{"version":3,"sources":["webpack:///./presentation/components/Shortcode/TickListItem.tsx","webpack:///./domain/constants/alignment.ts","webpack:///src/presentation/components/Shortcode/stylesheets.ts"],"names":["TickListItem","RecursiveShortcode","elements","glyph","against","attributes","layout","rest","styles","useStylesheet","style","root","wrapper","icon","size","width","color","text","displayName","Alignment","useListStyles","theme","useTheme","alignment","findResponsiveItem","useBreakpoints","useStyles","default","listStylePosition","cssSides","Side","marginBottom","cssTheme","paddingRight","paddingLeft","getBodyColor","getTitleColor","listStyleType","modifier","textAlign","useListItemStyles","gu1","minWidth","display","gu2","number","justifyContent","useGlyphStyles","palette","Against","getColor"],"mappings":"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","file":"pex-static/90/61.d6646fc4bd203571c560.chunk.js","sourcesContent":["import React from 'react';\nimport Glyph from '@ux/glyphs';\n\nimport { useListItemStyles as useStylesheet } from './stylesheets';\nimport { RecursiveShortcodeProps } from './Shortcode';\n\nconst TickListItem = ({\n  RecursiveShortcode,\n  elements,\n  glyph,\n  against,\n  attributes,\n  layout,\n  ...rest\n}: RecursiveShortcodeProps) => {\n  const { styles } = useStylesheet({\n    against,\n    attributes,\n    layout,\n  });\n  return (\n    <li style={styles.root}>\n      <span style={styles.wrapper}>\n        <span style={styles.icon}>\n          <Glyph icon={glyph} size={styles.icon.width as number} color={styles.icon.color as string} />\n        </span>\n        <span style={styles.text}>\n          {/*  @ts-ignore: error when upgrading to @ux/config */}\n          <RecursiveShortcode elements={elements} {...rest} />\n        </span>\n      </span>\n    </li>\n  );\n};\n\nTickListItem.displayName = 'TickListItem';\n\nexport default TickListItem;\n","export enum Alignment {\n  STARTING = 'STARTING',\n  CENTER = 'CENTER',\n}\n\nexport default null;\n","import { useStyles } from '@team-griffin/stylr';\nimport { useTheme, cssTheme } from '@ux/theme-utils';\nimport cssSides, { Side } from '@team-griffin/css-sides';\nimport { Alignment } from 'domain/constants/alignment';\nimport { getTitleColor, getBodyColor } from 'presentation/utils/colorway';\nimport { modifier } from '@ux/style-utils';\nimport { Against } from 'domain/constants/colorway';\nimport { Layout } from 'domain/constants/layout';\nimport { useBreakpoints } from '@ux/responsive';\nimport findResponsiveItem from 'presentation/utils/findResponsiveItem';\n\nimport { ShortcodeAttributesProps } from './Shortcode';\n\nexport const useListStyles = ({\n  layout,\n  against,\n  attributes,\n}: {\n  layout: Layout | undefined;\n  against: Against | undefined;\n  attributes: ShortcodeAttributesProps | undefined;\n}) => {\n  const { theme } = useTheme();\n\n  const alignment = findResponsiveItem(useBreakpoints(), [\n    layout?.alignmentMobile ?? Alignment.STARTING,\n    layout?.alignmentTablet ?? Alignment.STARTING,\n    layout?.alignment ?? Alignment.STARTING,\n  ]);\n\n  return useStyles(\n    {\n      default: {\n        root: {\n          listStylePosition: 'inside',\n          ...cssSides('margin', Side.A, 0),\n          marginBottom: cssTheme.gu2,\n          paddingRight: 0,\n          paddingLeft: 0,\n          color: getBodyColor(theme, against),\n        },\n\n        icon: {\n          color: getTitleColor(theme, against),\n        },\n      },\n      glyph: {\n        root: {\n          listStyleType: 'none',\n        },\n      },\n      [modifier('alignment', Alignment.CENTER)]: {\n        root: {\n          textAlign: 'center',\n        },\n      },\n    },\n    {\n      against,\n      alignment,\n      glyph: (attributes?.style ?? null) === 'glyph',\n    },\n  );\n};\n\nexport const useListItemStyles = ({\n  against,\n  attributes,\n  layout,\n}: {\n  against?: Against;\n  attributes?: ShortcodeAttributesProps;\n  layout?: Layout;\n}) => {\n  const { theme } = useTheme();\n\n  const alignment = findResponsiveItem(useBreakpoints(), [\n    layout?.alignmentMobile ?? Alignment.STARTING,\n    layout?.alignmentTablet ?? Alignment.STARTING,\n    layout?.alignment ?? Alignment.STARTING,\n  ]);\n\n  return useStyles(\n    {\n      default: {\n        root: {\n          paddingLeft: 0,\n          marginBottom: cssTheme.gu1,\n        },\n        icon: {\n          width: cssTheme.gu2,\n          minWidth: cssTheme.gu2,\n          color: getTitleColor(theme, against),\n        },\n        text: {\n          paddingLeft: 0,\n          color: getBodyColor(theme, against),\n        },\n      },\n      glyph: {\n        root: {\n          display: 'flex',\n        },\n        wrapper: {\n          display: 'flex',\n        },\n        text: {\n          paddingLeft: cssTheme.gu2,\n        },\n      },\n      number: {\n        text: {\n          paddingLeft: cssTheme.gu1,\n        },\n      },\n      [modifier('alignment', Alignment.CENTER)]: {\n        root: {\n          justifyContent: 'center',\n        },\n      },\n    },\n    {\n      against,\n      alignment,\n      glyph: (attributes?.style || null) === 'glyph',\n      number: (attributes?.style || null) === 'number',\n    },\n  );\n};\nexport const useGlyphStyles = ({ against }: { against: Against }) => {\n  const {\n    theme: { palette },\n  } = useTheme();\n  const getColor = (against: Against) => {\n    switch (against) {\n      case Against.LIGHT:\n        return palette.secondary;\n      case Against.PRIMARY:\n        return palette.primaryContrast;\n      case Against.HIGHLIGHT:\n        return palette.highlightContrast;\n      case Against.NEUTRAL:\n        return palette.secondary;\n      case Against.DARK:\n        return palette.tertiary;\n      default:\n        return 'inherit';\n    }\n  };\n  return useStyles(\n    {\n      default: {\n        root: {\n          width: cssTheme.gu3,\n          color: getColor(against),\n        },\n      },\n    },\n    [{ against }],\n  );\n};\n"],"sourceRoot":""}