{"version":3,"sources":["webpack:///./presentation/components/Shortcode/Alt.tsx","webpack:///./presentation/components/Shortcode/Bold.tsx","webpack:///./presentation/components/Shortcode/Italic.tsx","webpack:///./presentation/components/Shortcode/Link.tsx","webpack:///./presentation/components/Shortcode/Text.tsx","webpack:///src/presentation/components/Shortcode/Tooltip.tsx","webpack:///./presentation/components/Shortcode/PendingShortcode.tsx","webpack:///./presentation/components/Shortcode/Shortcode.tsx","webpack:///./presentation/components/Shortcode/index.ts","webpack:///./domain/constants/alignment.ts","webpack:///./presentation/utils/responsiveColumns.ts","webpack:///src/presentation/components/ribbons/aspects/Aspects.stylesheet.ts","webpack:///src/presentation/components/ribbons/aspects/Aspect.tsx","webpack:///src/presentation/components/ribbons/aspects/Aspect.stylesheet.ts","webpack:///./presentation/components/ribbons/aspects/Aspects.tsx","webpack:///./presentation/components/ribbons/aspects/index.ts"],"names":["getColor","theme","against","Against","LIGHT","NEUTRAL","palette","primary","DARK","tertiary","Alt","RecursiveShortcode","elements","rest","useTheme","style","color","displayName","Bold","fontWeight","fontStyle","Link","contentType","attributes","isExternalRoute","route","useIsExternalRoute","goto","href","id","analyticskey","size","TextButtonSize","INHERIT","rel","target","newTab","formatText","text","newline","values","formattedText","replace","_","match","replaceValues","split","join","escapeShortCodes","string","reduce","prev","cur","i","nl2br","Text","ReactTooltip","lazy","TooltipShortcode","isMinLg","useBreakpoints","eventToggle","undefined","padding","cssTheme","CallToAction","fallback","tagName","useDefaultStyles","content","maxWidth","randomWidth","Math","floor","random","PendingShortcode","code","display","width","lines","Glyph","Sup","List","OrderedList","ListItem","TickListItem","ProductPrice","PhoneNumber","map","element","index","Shortcode","JSON","stringify","props","String","getAgainst","type","name","glyph","Italic","Tooltip","ShortcodeWrapper","Alignment","responsiveColumns","defaultColumns","desiredColumns","columns","value","defaultedDesiredValue","bootstrapResponsiveColumns","valuesToString","arr","columnToSameValue","colCount","rangeColumns","range","getRows","aspects","aspectsToTemplateArea","fixArea","rows","rangeArray","createGridTemplateAreas","column","createGridTemplateColumns","StyledGrid","PureAspect","hBaseline","alignment","Colorway","tickColor","classNames","tick","getClassNames","className","data-alignment","depth","ticks","alt","isNilOrEmpty","PureAspects","colorway","loading","layout","body","title","hasBody","hasHeader","findResponsiveItem","alignmentMobile","STARTING","alignmentTablet","aspectsWithIndex","item","header","root","Ribbon","Type","ASPECTS","data-no-header","component","aspect","Aspect","errorBoundary","visibilitySet","Aspects"],"mappings":"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","file":"pex-static/34/18.4dc0c8f78df6d4dd65f2.chunk.js","sourcesContent":["import React from 'react';\nimport { Theme, useTheme, Colorway as Against } from '@uds/theme-utils';\n\nimport { RecursiveShortcodeProps } from './Shortcode';\n\nconst getColor = (theme: Theme, against: Against | undefined) => {\n  switch (against) {\n    case Against.LIGHT:\n      return theme.palette.primary;\n    case Against.NEUTRAL:\n      return theme.palette.primary;\n    case Against.DARK:\n      return theme.palette.tertiary;\n    default:\n      return 'inherit';\n  }\n};\nconst Alt = ({ RecursiveShortcode, elements, against, ...rest }: RecursiveShortcodeProps) => {\n  const { theme } = useTheme();\n  return (\n    <span\n      style={{\n        color: getColor(theme, against),\n      }}\n    >\n      {RecursiveShortcode ? <RecursiveShortcode elements={elements} against={against} {...rest} /> : null}\n    </span>\n  );\n};\n\nAlt.displayName = 'Alt';\n\nexport default Alt;\n","import React from 'react';\n\nimport { RecursiveShortcodeProps } from './Shortcode';\n\nconst Bold = ({ elements, RecursiveShortcode, ...rest }: RecursiveShortcodeProps) => (\n  <span style={{ fontWeight: 'bold' }}>\n    {RecursiveShortcode ? <RecursiveShortcode elements={elements} {...rest} /> : null}\n  </span>\n);\n\nBold.displayName = 'Bold';\n\nexport default Bold;\n","import React from 'react';\n\nimport { RecursiveShortcodeProps } from './Shortcode';\n\nconst Bold = ({ elements, RecursiveShortcode, ...rest }: RecursiveShortcodeProps) => (\n  <span style={{ fontStyle: 'italic' }}>\n    {RecursiveShortcode ? <RecursiveShortcode elements={elements} {...rest} /> : null}\n  </span>\n);\n\nBold.displayName = 'Bold';\n\nexport default Bold;\n","import React from 'react';\nimport { ReactRouterTextButton } from '@uds/react-router-adapter';\nimport { Size as TextButtonSize } from '@uds/text-button';\nimport { useIsExternalRoute } from 'domain/selectors/common';\n\nimport { RecursiveShortcodeProps } from './Shortcode';\n\nconst Link = ({ RecursiveShortcode, elements, contentType, attributes, against, ...rest }: RecursiveShortcodeProps) => {\n  const [isExternalRoute, route] = useIsExternalRoute(attributes?.goto);\n  return (\n    <ReactRouterTextButton\n      href={route}\n      id={attributes?.analyticskey ? `shortcode-link-${attributes?.analyticskey}` : ''}\n      contentType={contentType}\n      size={TextButtonSize.INHERIT}\n      isExternalRoute={isExternalRoute}\n      rel={attributes?.rel}\n      target={attributes?.newTab === 'true' ? '_blank' : ''}\n    >\n      {/* @ts-ignore: error when upgrading to @ux/config */}\n      <RecursiveShortcode elements={elements} {...rest} />\n    </ReactRouterTextButton>\n  );\n};\n\nLink.displayName = 'Link';\n\nexport default Link;\n","import React, { Fragment } from 'react';\n\nconst escapeShortCodes = (text: string) => {\n  if (typeof text !== 'string') {\n    return null;\n  }\n  const replaceA = (text ?? '').split('[!').join('[');\n  const replaceB = replaceA.split('!/]').join('/]');\n  const replaceC = replaceB.split('[/!').join('[/');\n  return replaceC;\n  // using split/join because for some reason replaceAll fails for backstop\n  // tests but not for backstop storybook?\n  // if anyone can tell me why, I'd appreciate it.\n  // return (text ?? '').replaceAll('[!', '[').replaceAll('!/]', '/]')\n  //   .replaceAll('[/!', '[/');\n};\n\nconst replaceValues = (text: string, values?: Record<string, string>) => {\n  if (values == null) {\n    return text;\n  }\n  return text.replace(/{(?<value>[^{]*)}/g, (_, match) => {\n    return values[match];\n  });\n};\n\nconst nl2br = (string: string) =>\n  (string ?? '')\n    .split('\\n')\n    // @ts-ignore typescript cant figure typing out\n    // eslint-disable-next-line react/no-array-index-key\n    .reduce((prev, cur, i) => [prev, <br key={i} />, cur]);\n\nconst formatText = (text: string, newline: boolean | Element | undefined, values?: Record<string, string>) => {\n  const formattedText = replaceValues(escapeShortCodes(text) ?? '', values);\n  if (newline === false) {\n    return formattedText;\n  }\n  return nl2br(formattedText);\n};\n\ninterface OuterProps {\n  text?: string | undefined;\n  nl2br?: boolean | Element;\n  values?: Record<string, string>;\n}\nconst Text = ({ text, nl2br, values }: OuterProps) => <Fragment>{formatText(text ?? '', nl2br, values)}</Fragment>;\n\nText.displayName = 'Text';\n\nexport default Text;\n","import React, { lazy, Suspense } from 'react';\nimport TextButton, { Size as TextButtonSize } from '@uds/text-button';\nimport { cssTheme } from '@uds/theme-utils';\nimport { useBreakpoints } from '@uds/responsive';\n\nimport { RecursiveShortcodeProps } from './Shortcode';\n\n/*\n  React-Tooltip is a heavy dependency therefore we asynchronously load it in\n  and gracefully decorate the functionality in once it has loaded\n*/\nconst ReactTooltip = lazy(\n  () =>\n    import(\n      /* webpackChunkName: \"react-tooltip-lite\" */\n      'react-tooltip-lite'\n    ),\n);\n\nconst TooltipShortcode = ({ RecursiveShortcode, attributes, elements }: RecursiveShortcodeProps) => {\n  const { isMinLg } = useBreakpoints();\n  const eventToggle = isMinLg ? undefined : 'onClick';\n  const padding = cssTheme.gu2;\n  const CallToAction = <TextButton size={TextButtonSize.INHERIT}>{attributes?.label}</TextButton>;\n\n  return (\n    <Suspense fallback={CallToAction}>\n      {/* @ts-ignore children doesnt exist */}\n      <ReactTooltip\n        tagName=\"span\"\n        eventToggle={eventToggle}\n        useDefaultStyles={true}\n        padding={padding}\n        content={\n          <div\n            style={{\n              maxWidth: 320,\n            }}\n          >\n            {/* @ts-ignore: error when upgrading to @ux/config  */}\n            <RecursiveShortcode elements={elements} />\n          </div>\n        }\n      >\n        {CallToAction}\n      </ReactTooltip>\n    </Suspense>\n  );\n};\n\nTooltipShortcode.displayName = 'TooltipShortcode';\n\nexport default TooltipShortcode;\n","import React from 'react';\nimport { Shimmer } from '@uds/penders';\n\nimport { ShortcodeProps } from './';\n\nexport interface OuterProps {\n  code?: ShortcodeProps;\n}\n\n// random % width for shimmer betwen 50% and 95%\nconst randomWidth = () => Math.floor(Math.random() * (95 - 50) + 50);\n\nconst PendingShortcode = ({ code }: OuterProps) => (\n  <span\n    style={{\n      display: 'inline-block',\n      width: `${randomWidth()}%`,\n    }}\n  >\n    <Shimmer lines={code && code.elements ? 2 : 1} />\n  </span>\n);\n\nPendingShortcode.displayName = 'PendingShortcode';\n\nexport default PendingShortcode;\n","import React, { Suspense, lazy, ReactNode } from 'react';\nimport { getAgainst } from 'presentation/utils/colorway';\nimport { Layout } from 'domain/constants/layout';\n/*\n  These shortcodes should not be lazy loaded in as they are already in the\n  main bundle and it causes a unnecessary shimmer which makes the page feel\n  less responsive\n*/\nimport { Colorway as Against } from '@uds/theme-utils';\nimport { IconName } from '@uds/glyphs';\n\nimport Alt from './Alt';\nimport Bold from './Bold';\nimport Italic from './Italic';\nimport Link from './Link';\nimport Text from './Text';\nimport Tooltip from './Tooltip';\nimport PendingShortcode from './PendingShortcode';\n\nimport { ShortcodeProps } from '.';\n\nconst Glyph = lazy(\n  () =>\n    import(\n      /* webpackChunkName: \"shortcode-glyph\" */\n      './Glyph'\n    ),\n);\n\nconst Sup = lazy(\n  () =>\n    import(\n      /* webpackChunkName: \"shortcode-sup\" */\n      './Sup'\n    ),\n);\n\nconst List = lazy(\n  () =>\n    import(\n      /* webpackChunkName: \"shortcode-list\" */\n      './List'\n    ),\n);\n\nconst OrderedList = lazy(\n  () =>\n    import(\n      /* webpackChunkName: \"shortcode-ordered-list\" */\n      './OrderedList'\n    ),\n);\n\nconst ListItem = lazy(\n  () =>\n    import(\n      /* webpackChunkName: \"shortcode-list-item\" */\n      './ListItem'\n    ),\n);\n\nconst TickListItem = lazy(\n  () =>\n    import(\n      /* webpackChunkName: \"shortcode-tick-list-item\" */\n      './TickListItem'\n    ),\n);\n\nconst ProductPrice = lazy(\n  () =>\n    import(\n      /* webpackChunkName: \"shortcode-product-price\" */\n      './ProductPrice'\n    ),\n);\n\nconst PhoneNumber = lazy(\n  () =>\n    import(\n      /* webpackChunkName: \"shortcode-phone-number\" */\n      './PhoneNumber'\n    ),\n);\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\ndeclare const i: number;\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\ndeclare const element: ShortcodeProps;\n\nexport interface ShortcodeAttributesProps {\n  glyph: string;\n  use?: number;\n  number?: number;\n  RecursiveShortcode: (props: RecursiveShortcodeProps) => JSX.Element;\n  analyticskey?: string;\n  goto?: string;\n  label?: ReactNode;\n  icon: IconName;\n  prices?: Array<{\n    gross: number;\n    net: number;\n    raw: number;\n    tax: number;\n  }>;\n  inctax?: string;\n  style?: string;\n  rel?: string;\n  newTab?: string;\n}\nexport interface RecursiveShortcodeProps {\n  elements?: Array<ShortcodeProps>;\n  RecursiveShortcode?: (props: RecursiveShortcodeProps) => JSX.Element;\n  type?: string;\n  name?: string;\n  layout?: Layout;\n  against?: Against;\n  attributes?: ShortcodeAttributesProps | undefined;\n  nl2br?: boolean;\n  rest?: {\n    [key: string]: any;\n  };\n  [key: string]: any;\n}\n\nconst RecursiveShortcode = ({ elements = [], ...rest }: RecursiveShortcodeProps) => (\n  <>\n    {elements.map((element, index) => (\n      // Temporarily allow index as key waiting for BE to add ids\n      // eslint-disable-next-line react/no-array-index-key\n      <Shortcode key={`stringed-shortcode-${JSON.stringify(element)}-${index}`} code={element} {...rest} />\n    ))}\n  </>\n);\n\nexport interface ShortcodeOuterProps {\n  against?: Against;\n  code: RecursiveShortcodeProps;\n  type?: string;\n  name?: string;\n  values?: Record<string, string>;\n}\n\nconst Shortcode = ({ code, ...rest }: RecursiveShortcodeProps) => {\n  let props = {\n    ...rest,\n  } as RecursiveShortcodeProps;\n  if (typeof code === 'string' || code instanceof String) {\n    props.code = code;\n  } else {\n    props = {\n      ...props,\n      ...code,\n    };\n  }\n\n  props.against = getAgainst(props.against);\n  props.RecursiveShortcode = RecursiveShortcode;\n  props.attributes = props?.attributes ?? ({} as ShortcodeAttributesProps);\n\n  const { type, name, values } = props;\n  if (typeof props.code === 'string') {\n    return <Text text={code} values={values} />;\n  }\n  if (props.type === 'text') {\n    return <Text {...props} values={values} />;\n  }\n  if (type === 'element') {\n    switch (name) {\n      case 'list':\n        if (props?.attributes?.style === 'number') {\n          return <OrderedList {...props} />;\n        }\n        return <List {...props} />;\n      case 'li':\n        if (props?.attributes?.style === 'glyph') {\n          return <TickListItem {...props} glyph={props.attributes?.glyph ?? 'tick'} />;\n        }\n        return <ListItem {...props} />;\n      case 'i':\n        return <Italic {...props} />;\n      case 'b':\n        return <Bold {...props} />;\n      case 'alt':\n        return <Alt {...props} />;\n      case 'sup':\n        return <Sup {...props} />;\n      case 'glyph':\n        return <Glyph attributes={props.attributes} {...props} />;\n      case 'tel':\n        return <PhoneNumber {...props} />;\n      case 'link':\n        return <Link {...props} />;\n      case 'productprice':\n        return <ProductPrice {...props} />;\n      case 'tooltip':\n        return <Tooltip {...props} />;\n      case 'root':\n        return <RecursiveShortcode {...props} />;\n      default:\n        return null;\n    }\n  }\n  return null;\n};\n\nconst ShortcodeWrapper = (props: RecursiveShortcodeProps) => (\n  <Suspense fallback={<PendingShortcode code={props.code} />}>\n    <Shortcode {...props} />\n  </Suspense>\n);\n\nShortcodeWrapper.displayName = 'Shortcode';\n\nexport default ShortcodeWrapper;\n","import Shortcode, { RecursiveShortcodeProps } from './Shortcode';\n\n// TODO: help.. please.\nexport type ShortcodeProps = RecursiveShortcodeProps;\n\nexport default Shortcode;\n","export enum Alignment {\n  STARTING = 'STARTING',\n  CENTER = 'CENTER',\n}\n\nexport default null;\n","import { ResponsiveSet } from 'core/ribbons/primitives';\nimport { ColumnCount } from 'domain/constants/layout';\n\nconst responsiveColumns = (\n  defaultColumns: ResponsiveSet<ColumnCount>,\n  desiredColumns = [null, null, null] as unknown as ResponsiveSet<ColumnCount>,\n) => {\n  const columns = desiredColumns.map((value, index) => {\n    const defaultedDesiredValue = value ?? null;\n    const prunedValue = defaultedDesiredValue === null ? defaultColumns[index] : defaultedDesiredValue;\n    return prunedValue;\n  });\n  return columns;\n};\n\nexport const bootstrapResponsiveColumns = (\n  defaultColumns: ResponsiveSet<ColumnCount>,\n  desiredColumns: ResponsiveSet<ColumnCount>,\n) => {\n  const columns = responsiveColumns(defaultColumns, desiredColumns);\n  const dividedColumns = columns.map((value) => (typeof value === 'number' ? 12 / value : value));\n  return dividedColumns as ResponsiveSet<ColumnCount>;\n};\n\nexport default responsiveColumns;\n","import { range } from 'presentation/utils/generalUtils';\nimport { css } from 'linaria';\nimport { styled } from 'linaria/react';\nimport { cssTheme } from '@uds/theme-utils';\nimport { ResponsiveSet } from 'core/ribbons/primitives';\n\nimport { AspectType } from './Aspect';\n\n// Map all values into an array and then convert to string separated by a single space\nconst valuesToString = (arr: Array<number>, val: string) => arr.map(() => val).join(' ');\n\n// Map each column to each value\nconst columnToSameValue = (colCount: number, value: string) => {\n  const rangeColumns = range(colCount);\n  return valuesToString(rangeColumns, value);\n};\n\n// Get the total rows by dividing the total aspects by the columns\nconst getRows = (aspects: Array<AspectType>, columns: number) => Math.ceil(aspects.length / columns);\n\n// Map the aspects to each template area\nconst aspectsToTemplateArea = (aspects: Array<AspectType>, columns: number, fixArea = '') => {\n  const rows = getRows(aspects, columns);\n  const rangeArray = range(rows);\n\n  return valuesToString(rangeArray, `\"${fixArea} ${columnToSameValue(columns, 'none')}\"`);\n};\n\nconst createGridTemplateAreas = (aspects: Array<AspectType>, column: number) =>\n  `\"${columnToSameValue(column, 'header')}\" ${aspectsToTemplateArea(aspects, column)}`;\n\nconst createGridTemplateColumns = (column: number) => `repeat(${column}, minmax(auto, 1fr))`;\ninterface RootProps {\n  columns: ResponsiveSet<number>;\n  aspects: Array<AspectType>;\n}\n\nexport const StyledGrid = styled.div<RootProps>`\n  display: grid;\n  row-gap: ${cssTheme.gu1};\n  grid-template-areas: ${(props) => createGridTemplateAreas(props.aspects, props.columns[0])};\n  &[data-no-header='true'] {\n    grid-template-areas: ${(props) => aspectsToTemplateArea(props.aspects, props.columns[0])};\n  }\n  ${cssTheme.breakpoints.sm} {\n    column-gap: ${cssTheme.gu2};\n    row-gap: ${cssTheme.gu2};\n    grid-template-areas: ${(props) => createGridTemplateAreas(props.aspects, props.columns[1])};\n    &[data-no-header='true'] {\n      grid-template-areas: ${(props) => aspectsToTemplateArea(props.aspects, props.columns[1])};\n    }\n  }\n  ${cssTheme.breakpoints.md} {\n    // columns should be equal width, however many, but account\n    // for the fact the header is now a special column at this breapoint\n    // by incrementing count by 1\n    grid-template-columns: ${(props) => createGridTemplateColumns(props.columns[1] + 1)};\n    grid-template-areas: ${(props) => aspectsToTemplateArea(props.aspects, props.columns[1], 'header')};\n    &[data-no-header='true'] {\n      grid-template-areas: ${(props) => aspectsToTemplateArea(props.aspects, props.columns[1] + 1)};\n    }\n  }\n  ${cssTheme.breakpoints.lg} {\n    // columns should be equal width, however many\n    grid-template-columns: ${(props) => createGridTemplateColumns(props.columns[2] + 1)};\n    // account for the header being one of the columns at this breakpoint\n    // by decrementing one from the column count\n    grid-template-areas: ${(props) => aspectsToTemplateArea(props.aspects, props.columns[2], 'header')};\n    &[data-no-header='true'] {\n      grid-template-areas: ${(props) => aspectsToTemplateArea(props.aspects, props.columns[2])};\n    }\n  }\n`;\n\nexport default () => {\n  return {\n    header: css`\n      grid-area: header;\n    `,\n    root: css`\n      &[data-alignment='CENTER'] {\n        text-align: center;\n      }\n    `,\n    body: css`\n      margin-top: ${cssTheme.gu2};\n    `,\n  };\n};\n","import React from 'react';\nimport PaddingBox from '@uds/padding-box';\nimport { Glyph } from '@uds/glyphs';\nimport { Heading04, BodyCopy } from '@uds/typography';\nimport { Colorway, cssTheme } from '@uds/theme-utils';\nimport { Alignment } from 'domain/constants/alignment';\nimport Shortcode, { ShortcodeProps } from 'components/Shortcode';\nimport { isNilOrEmpty } from 'presentation/utils/generalUtils';\n\nimport getClassNames from './Aspect.stylesheet';\n\nexport type AspectType = {\n  title: ShortcodeProps;\n  body: ShortcodeProps;\n};\nexport interface OuterProps extends AspectType {\n  hBaseline: number;\n  ticks: boolean;\n  colorway: Colorway;\n  alignment: Alignment;\n}\n\nexport const PureAspect = ({ hBaseline = 1, title, body, ticks, colorway, alignment }: OuterProps) => {\n  let tickColor;\n  if ([Colorway.LIGHT, Colorway.NEUTRAL].includes(colorway)) {\n    tickColor = cssTheme.palette.green01;\n  }\n  const classNames = getClassNames();\n  return (\n    <PaddingBox>\n      <div className={classNames.root} data-alignment={alignment}>\n        <Heading04 depth={hBaseline} className={classNames.title} data-alignment={alignment}>\n          <>\n            <span className={classNames.titleText}>\n              <Shortcode code={title} against={colorway} />\n            </span>\n            {ticks && <Glyph name=\"tick\" alt=\"tick\" className={classNames.tick} color={tickColor} />}\n          </>\n        </Heading04>\n        {!isNilOrEmpty(body) && (\n          <BodyCopy>\n            <Shortcode code={body} against={colorway} />\n          </BodyCopy>\n        )}\n      </div>\n    </PaddingBox>\n  );\n};\n\nPureAspect.displayName = 'Aspect';\n\nexport default PureAspect;\n","import { css } from 'linaria';\nimport { cssTheme } from '@uds/theme-utils';\n\n\nconst root = css`\n  overflow: hidden;\n  overflow-wrap: break-word;\n  &[data-alignment='CENTER'] {\n    text-align: center;\n  }\n`;\nconst title = css`\n  &[data-alignment='CENTER'] {\n    justify-content: center;\n  }\n`;\n\nconst titleText = css`\n  vertical-align: middle;\n`;\n          \nconst tick = css`\n  display: inline-block;\n  vertical-align: text-top;\n  padding-left: ${cssTheme.gu1};\n  width: ${cssTheme.gu3};\n`;\n\nexport default () => {\n  return {\n    root,\n    title,\n    titleText,\n    tick,\n  };\n};\n","import React, { ComponentClass } from 'react';\nimport { Container } from '@uds/grid';\nimport PaddingBox from '@uds/padding-box';\nimport { Heading02, Heading04 } from '@uds/typography';\nimport { useBreakpoints } from '@ux/responsive';\nimport Shortcode, { ShortcodeProps } from 'components/Shortcode';\nimport visibilitySet from 'presentation/hocs/visibilitySet';\nimport errorBoundary from 'presentation/hocs/errorBoundary';\nimport { RibbonProps, Type } from 'domain/constants/ribbons';\nimport { Alignment } from 'domain/constants/alignment';\nimport { isNilOrEmpty } from 'presentation/utils/generalUtils';\nimport Ribbon from 'components/ribbons/Ribbon';\nimport findResponsiveItem from 'presentation/utils/findResponsiveItem';\nimport responsiveColumns from 'presentation/utils/responsiveColumns';\nimport { ResponsiveSet } from 'core/ribbons/primitives';\nimport { ColumnCount } from 'domain/constants/layout';\n\nimport getClassNames, { StyledGrid } from './Aspects.stylesheet';\nimport Aspect, { AspectType } from './Aspect';\n\nexport interface OuterProps extends RibbonProps {\n  aspects: Array<AspectType>;\n  text: {\n    title: ShortcodeProps;\n    body: ShortcodeProps;\n  };\n  ticks: boolean;\n  hBaseline?: number;\n}\n\nexport const PureAspects = ({\n  id,\n  colorway,\n  loading,\n  hBaseline = 1,\n  text,\n  aspects,\n  ticks,\n  layout,\n  name,\n}: OuterProps) => {\n  const { body, title } = text;\n\n  const hasBody = !isNilOrEmpty(body);\n  const hasTitle = !isNilOrEmpty(title);\n  const hasHeader = hasTitle || hasBody;\n\n  const alignment = findResponsiveItem(useBreakpoints(), [\n    layout?.alignmentMobile ?? Alignment.STARTING,\n    layout?.alignmentTablet ?? Alignment.STARTING,\n    layout?.alignment ?? Alignment.STARTING,\n  ]);\n\n  // Adding index to aspects array to avoid performance issues when passing keys as index to render\n  const aspectsWithIndex = aspects.map((item, index) => ({\n    ...item,\n    index: `Aspect${index}${id}`,\n  }));\n\n  const columns = responsiveColumns([1, 2, 4], layout.columns as ResponsiveSet<ColumnCount>);\n\n  const classNames = getClassNames();\n  return (\n    <Ribbon id={id} colorway={colorway} loading={loading} layout={layout} name={name} type={Type.ASPECTS}>\n      <div className={classNames.root} data-alignment={alignment}>\n        <Container>\n          <StyledGrid columns={columns as [number, number, number]} aspects={aspects} data-no-header={!hasHeader}>\n            {hasHeader && (\n              <PaddingBox className={classNames.header}>\n                <Heading02 depth={hBaseline}>\n                  <Shortcode against={colorway} code={text.title} />\n                </Heading02>\n                {hasBody && (\n                  <Heading04 component=\"p\" className={classNames.body}>\n                    <Shortcode code={text.body} against={colorway} />\n                  </Heading04>\n                )}\n              </PaddingBox>\n            )}\n            {aspectsWithIndex.map((aspect) => (\n              <Aspect\n                key={aspect.index}\n                hBaseline={hBaseline + 1}\n                title={aspect.title}\n                body={aspect.body}\n                colorway={colorway}\n                alignment={alignment}\n                ticks={ticks}\n              />\n            ))}\n          </StyledGrid>\n        </Container>\n      </div>\n    </Ribbon>\n  );\n};\n\nPureAspects.displayName = 'Aspects';\n\nexport default errorBoundary(visibilitySet(PureAspects)) as ComponentClass<OuterProps>;\n","import Aspects from './Aspects';\n\nexport default Aspects;\n"],"sourceRoot":""}