{"version":3,"sources":["webpack:///./presentation/components/Shortcode/List.tsx","webpack:///./domain/constants/alignment.ts","webpack:///src/presentation/components/Shortcode/stylesheets.ts"],"names":["List","RecursiveShortcode","elements","rest","against","attributes","layout","styles","useStylesheet","style","root","nl2br","displayName","Alignment","useListStyles","theme","useTheme","alignment","findResponsiveItem","useBreakpoints","useStyles","default","listStylePosition","cssSides","Side","marginBottom","cssTheme","paddingRight","paddingLeft","color","getBodyColor","icon","getTitleColor","glyph","listStyleType","modifier","textAlign","useListItemStyles","gu1","width","minWidth","text","display","wrapper","gu2","number","justifyContent","useGlyphStyles","palette","Against","getColor"],"mappings":"+EAAA,gCAKA,MAAMA,EAAO,IAAwE,IAAvE,mBAAEC,EAAF,SAAsBC,KAAaC,GAAoC,EACnF,MAAM,QAAEC,EAAF,WAAWC,EAAX,OAAuBC,GAAWH,GAClC,OAAEI,GAAWC,YAAc,CAC/BF,SACAF,UACAC,eAEF,OACE,oBAAII,MAAOF,EAAOG,KAAlB,SAEE,cAACT,EAAD,CAAoBC,SAAUA,EAAUS,OAAO,KAAWR,OAKhEH,EAAKY,YAAc,OAEJZ,a,oBCtBR,IAAKa,EAAZ,kC,SAAYA,K,oBAAAA,E,iBAAAA,M,0BCAZ,mLAaO,MAAMC,EAAgB,IAQvB,gBARwB,8BAG5BT,GAKI,EACJ,MAAM,MAAEU,GAAUC,cAEZC,EAAYC,YAAmBC,cAAkB,UACrDb,aADqD,EACrDA,mBADqD,EAC1BO,IAD0B,kBAErDP,aAFqD,EAErDA,mBAFqD,EAE1BO,IAF0B,kBAGrDP,aAHqD,EAGrDA,aAHqD,EAGhCO,IAHvB,WAMA,OAAOO,YACL,CACEC,QAAS,CACPX,KAAM,CACJY,kBADI,YAEDC,YAAS,SAAUC,IAAX,EAFP,GAGJC,aAAcC,IAHV,IAIJC,aAJI,EAKJC,YALI,EAMJC,MAAOC,YAAaf,EAAOX,IAG7B2B,KAAM,CACJF,MAAOG,YAAcjB,EAAOX,KAGhC6B,MAAO,CACLvB,KAAM,CACJwB,cAAe,SAGnB,CAACC,YAAS,YAAatB,IAAvB,SAA2C,CACzCH,KAAM,CACJ0B,UAAW,YAIjB,uBAGEH,MAAuC,WAAhC,SAAC5B,aAAD,EAACA,SAAD,WAKAgC,EAAoB,IAQ3B,cAR4B,8BAGhC/B,GAKI,EACJ,MAAM,MAAES,GAAUC,cAEZC,EAAYC,YAAmBC,cAAkB,UACrDb,aADqD,EACrDA,mBADqD,EAC1BO,IAD0B,kBAErDP,aAFqD,EAErDA,mBAFqD,EAE1BO,IAF0B,kBAGrDP,aAHqD,EAGrDA,aAHqD,EAGhCO,IAHvB,WAMA,OAAOO,YACL,CACEC,QAAS,CACPX,KAAM,CACJkB,YADI,EAEJH,aAAcC,IAASY,KAEzBP,KAAM,CACJQ,MAAOb,IADH,IAEJc,SAAUd,IAFN,IAGJG,MAAOG,YAAcjB,EAAOX,IAE9BqC,KAAM,CACJb,YADI,EAEJC,MAAOC,YAAaf,EAAOX,KAG/B6B,MAAO,CACLvB,KAAM,CACJgC,QAAS,QAEXC,QAAS,CACPD,QAAS,QAEXD,KAAM,CACJb,YAAaF,IAASkB,MAG1BC,OAAQ,CACNJ,KAAM,CACJb,YAAaF,IAASY,MAG1B,CAACH,YAAS,YAAatB,IAAvB,SAA2C,CACzCH,KAAM,CACJoC,eAAgB,YAItB,uBAGEb,MAHF,YAGU5B,yBAAD,MACPwC,OAAwC,aAA/BxC,yBAAD,SAID0C,EAAiB,IAAuC,IAAtC,QAAE3C,GAAoC,EACnE,MACEW,OAAO,QAAEiC,IACPhC,cAiBJ,OAAOI,YACL,CACEC,QAAS,CACPX,KAAM,CACJ6B,MAAOb,IADH,IAEJG,MArBS,KACf,UACE,KAAKoB,IAAL,MACE,OAAOD,EAAP,UACF,KAAKC,IAAL,QACE,OAAOD,EAAP,gBACF,KAAKC,IAAL,UACE,OAAOD,EAAP,kBACF,KAAKC,IAAL,QACE,OAAOD,EAAP,UACF,KAAKC,IAAL,KACE,OAAOD,EAAP,SACF,QACE,kBAQSE,CAAS9C,MAItB,CAAC,CAAEA","file":"pex-static/90/55.28e6d2f84830efa1018c.chunk.js","sourcesContent":["import React from 'react';\n\nimport { useListStyles as useStylesheet } from './stylesheets';\nimport { RecursiveShortcodeProps } from './Shortcode';\n\nconst List = ({ RecursiveShortcode, elements, ...rest }: RecursiveShortcodeProps) => {\n  const { against, attributes, layout } = rest;\n  const { styles } = useStylesheet({\n    layout,\n    against,\n    attributes,\n  });\n  return (\n    <ul style={styles.root}>\n      {/* @ts-ignore: error when upgrading to @ux/config */}\n      <RecursiveShortcode elements={elements} nl2br={false} {...rest} />\n    </ul>\n  );\n};\n\nList.displayName = 'List';\n\nexport default List;\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":""}