@laerdal/life-react-components 1.9.9 → 1.10.0

package/dist/Accordion/ContentAccordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","ContentAccordion","props","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","event","title","header","body","footer","size","Medium"],"mappings":"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","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const ContentAccordionItemHeader = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ${COLORS.neutral_600};\n  cursor: pointer;\n\n  &:hover {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_20};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div`\n`;\n\nexport const ContentAccordionItemContent = styled.div`\n  display: none;\n  flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div`\n`;\n\nexport const ContentAccordionItemContentBody = styled.div`\n`;\n\nexport const ContentAccordionItemContentFooter = styled.div`\n`;\n\nexport const ContentAccordionItem = styled.div`\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &.active {\n    ${ContentAccordionItemContent} {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ${ContentAccordionItemHeader} {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${ContentAccordionItem}:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 8px;\n      padding: 0 8px;\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 12px;\n      padding: 0 12px;\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      }\n\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 16px;\n      padding: 0 16px;\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem {\n  key: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (props.multi) {\n      setOpened(props.items.filter(item => item.active).map(item => item.key));\n    } else {\n      let active = props.items.find(item => !!item.active)?.key;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [props.items, props.multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.key)) {\n      setOpened(opened.filter(key => key !== item.key));\n    } else {\n      if (props.multi) {\n        setOpened([...opened, item.key]);\n      } else {\n        setOpened([item.key]);\n      }\n    }\n  }\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const isActive = opened.includes(item.key);\n\n    return (\n      <ContentAccordionItem key={item.key}\n                            id={`item_${item.key}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader tabIndex={!item.disabled ? 0 : undefined}\n                                    onMouseDown={defaultOnMouseDownHandler}\n                                    onClick={() => !item.disabled && onItemClick(item)}\n                                    onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n          <ContentAccordionItemHeaderIcon>\n            {\n              props.multi\n                ? isActive\n                  ? <SystemIcons.Minus/>\n                  : <SystemIcons.Plus/>\n                : isActive\n                  ? <SystemIcons.ChevronDown/>\n                  : <SystemIcons.ChevronRight/>\n            }\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>\n            {item.title}\n          </ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent>\n          {\n            item.header &&\n            <ContentAccordionItemContentHeader>\n              {item.header}\n            </ContentAccordionItemContentHeader>\n          }\n          <ContentAccordionItemContentBody>\n            {item.body}\n          </ContentAccordionItemContentBody>\n          {\n            item.footer &&\n            <ContentAccordionItemContentFooter>\n              {item.footer}\n            </ContentAccordionItemContentFooter>\n          }\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  }\n\n  return (\n    <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>\n      {props.items.map(item => renderItem(item))}\n    </ContentAccordionWrapper>\n  );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}
+{"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ParagraphLStyling","ParagraphMStyling","ParagraphSStyling","ParagraphTextStyle","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","black","ContentAccordion","props","useState","opened","setOpened","useEffect","multi","items","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","isActive","concat","undefined","event","title","header","body","footer","size","Medium"],"mappings":";;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,WAAT,QAA4B,UAA5B;AACA,SACEC,iBADF,EAEEC,iBAFF,EAGEC,iBAHF,EAIEC,kBAJF,EAKEC,iBALF,EAMEC,iBANF,EAOEC,iBAPF,EAQEC,kBARF,QASO,sBATP;AAUA,SAASC,MAAT,EAAiBC,WAAjB,QAAoC,WAApC;AACA,SAASC,SAAT,QAA0B,qBAA1B;AACA,SAASC,yBAAT,QAA0C,WAA1C;;;AAEA,OAAO,IAAMC,0BAA0B,GAAGf,MAAM,CAACgB,GAAV,mZAK5BL,MAAM,CAACM,WALqB,EAS1BN,MAAM,CAACO,WATmB,EAUfP,MAAM,CAACQ,UAVQ,EAWxBN,SAAS,CAACO,KAXc,EAejCR,WAfiC,EAmB1BD,MAAM,CAACU,WAnBmB,EAoBfV,MAAM,CAACW,WApBQ,EAqBxBT,SAAS,CAACU,MArBc,CAAhC;AAyBP,OAAO,IAAMC,8BAA8B,GAAGxB,MAAM,CAACgB,GAAV,+JAApC;AAUP,OAAO,IAAMS,8BAA8B,GAAGzB,MAAM,CAACgB,GAAV,uEAApC;AAEP,OAAO,IAAMU,2BAA2B,GAAG1B,MAAM,CAACgB,GAAV,sHAAjC;AAKP,OAAO,IAAMW,iCAAiC,GAAG3B,MAAM,CAACgB,GAAV,uEAAvC;AAEP,OAAO,IAAMY,+BAA+B,GAAG5B,MAAM,CAACgB,GAAV,uEAArC;AAEP,OAAO,IAAMa,iCAAiC,GAAG7B,MAAM,CAACgB,GAAV,uEAAvC;AAEP,OAAO,IAAMc,oBAAoB,GAAG9B,MAAM,CAACgB,GAAV,2UAGPL,MAAM,CAACoB,WAHA,EAM3BL,2BAN2B,EAY3BX,0BAZ2B,EAalBJ,MAAM,CAACqB,WAbW,CAA1B;AAoBP,OAAO,IAAMC,uBAAuB,GAAGjC,MAAM,CAACgB,GAAV,+hCAIhCc,oBAJgC,EAKLnB,MAAM,CAACoB,WALF,EAY9BhB,0BAZ8B,EAe5BV,iBAAiB,CAACC,kBAAkB,CAAC4B,OAApB,EAA6B,IAA7B,CAfW,EAkB9BR,2BAlB8B,EAsB5BC,iCAtB4B,EAuB1BtB,iBAAiB,CAACC,kBAAkB,CAAC6B,IAApB,EAA0BxB,MAAM,CAACyB,KAAjC,CAvBS,EA0B5BR,+BA1B4B,EA2B1BnB,iBAAiB,CAACC,kBAAkB,CAACwB,OAApB,EAA6BvB,MAAM,CAACyB,KAApC,CA3BS,EAoC9BrB,0BApC8B,EAuC5BX,iBAAiB,CAACE,kBAAkB,CAAC4B,OAApB,EAA6B,IAA7B,CAvCW,EA0C9BR,2BA1C8B,EA8C5BC,iCA9C4B,EA+C1BvB,iBAAiB,CAACE,kBAAkB,CAAC6B,IAApB,EAA0BxB,MAAM,CAACyB,KAAjC,CA/CS,EAkD5BR,+BAlD4B,EAmD1BpB,iBAAiB,CAACE,kBAAkB,CAACwB,OAApB,EAA6BvB,MAAM,CAACyB,KAApC,CAnDS,EA4D9BrB,0BA5D8B,EA+D5BZ,iBAAiB,CAACG,kBAAkB,CAAC4B,OAApB,EAA6B,IAA7B,CA/DW,EAkE9BR,2BAlE8B,EAsE5BC,iCAtE4B,EAuE1BxB,iBAAiB,CAACG,kBAAkB,CAAC6B,IAApB,EAA0BxB,MAAM,CAACyB,KAAjC,CAvES,EA0E5BR,+BA1E4B,EA2E1BrB,iBAAiB,CAACG,kBAAkB,CAACwB,OAApB,EAA6BvB,MAAM,CAACyB,KAApC,CA3ES,CAA7B;AAiGP,OAAO,IAAMC,gBAAgE,GAAG,SAAnEA,gBAAmE,CAACC,KAAD,EAAW;AAAA;;AACzF,wBAA4BvC,KAAK,CAACwC,QAAN,CAAyB,EAAzB,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEA1C,EAAAA,KAAK,CAAC2C,SAAN,CAAgB,YAAM;AACpB,QAAIJ,KAAK,CAACK,KAAV,EAAiB;AACfF,MAAAA,SAAS,CAACH,KAAK,CAACM,KAAN,CAAYC,MAAZ,CAAmB,UAACC,IAAD;AAAA,eAAUA,IAAI,CAACvB,MAAf;AAAA,OAAnB,EAA0CwB,GAA1C,CAA8C,UAACD,IAAD;AAAA,eAAUA,IAAI,CAACE,EAAf;AAAA,OAA9C,CAAD,CAAT;AACD,KAFD,MAEO;AAAA;;AACL,UAAIzB,MAAM,wBAAGe,KAAK,CAACM,KAAN,CAAYK,IAAZ,CAAiB,UAACH,IAAD;AAAA,eAAU,CAAC,CAACA,IAAI,CAACvB,MAAjB;AAAA,OAAjB,CAAH,sDAAG,kBAA2CyB,EAAxD;;AACA,UAAIzB,MAAJ,EAAY;AACVkB,QAAAA,SAAS,CAAC,CAAClB,MAAD,CAAD,CAAT;AACD;AACF;AACF,GATD,EASG,CAACe,KAAK,CAACM,KAAP,EAAcN,KAAK,CAACK,KAApB,CATH;;AAWA,MAAMO,WAAW,GAAG,SAAdA,WAAc,CAACJ,IAAD,EAAgC;AAClD,QAAIA,IAAI,CAACK,QAAT,EAAmB;;AACnB,QAAIX,MAAM,CAACY,QAAP,CAAgBN,IAAI,CAACE,EAArB,CAAJ,EAA8B;AAC5BP,MAAAA,SAAS,CAACD,MAAM,CAACK,MAAP,CAAc,UAACQ,GAAD;AAAA,eAASA,GAAG,KAAKP,IAAI,CAACE,EAAtB;AAAA,OAAd,CAAD,CAAT;AACD,KAFD,MAEO;AACL,UAAIV,KAAK,CAACK,KAAV,EAAiB;AACfF,QAAAA,SAAS,8BAAKD,MAAL,IAAaM,IAAI,CAACE,EAAlB,GAAT;AACD,OAFD,MAEO;AACLP,QAAAA,SAAS,CAAC,CAACK,IAAI,CAACE,EAAN,CAAD,CAAT;AACD;AACF;AACF,GAXD;;AAaA,MAAMM,UAAU,GAAG,SAAbA,UAAa,CAACR,IAAD,EAAgC;AACjD,QAAMS,QAAQ,GAAGf,MAAM,CAACY,QAAP,CAAgBN,IAAI,CAACE,EAArB,CAAjB;AAEA,wBACE,MAAC,oBAAD;AAAoC,MAAA,EAAE,iBAAUF,IAAI,CAACE,EAAf,CAAtC;AAA2D,MAAA,SAAS,EAAE,GAAGQ,MAAH,CAAUD,QAAQ,GAAG,SAAH,GAAe,EAAjC,EAAqCC,MAArC,CAA4CV,IAAI,CAACK,QAAL,GAAgB,WAAhB,GAA8B,EAA1E,CAAtE;AAAA,8BACE,MAAC,0BAAD;AACE,QAAA,IAAI,EAAC,QADP;AAEE,QAAA,EAAE,sBAAeL,IAAI,CAACE,EAApB,CAFJ;AAGE,QAAA,QAAQ,EAAE,CAACF,IAAI,CAACK,QAAN,GAAiB,CAAjB,GAAqBM,SAHjC;AAIE,QAAA,WAAW,EAAE3C,yBAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACgC,IAAI,CAACK,QAAN,IAAkBD,WAAW,CAACJ,IAAD,CAAnC;AAAA,SALX;AAME,QAAA,UAAU,EAAE,oBAACY,KAAD;AAAA,iBAAWA,KAAK,CAACL,GAAN,KAAc,OAAd,IAAyBH,WAAW,CAACJ,IAAD,CAA/C;AAAA,SANd;AAAA,gCAOE,KAAC,8BAAD;AAAA,oBACGR,KAAK,CAACK,KAAN,GAAcY,QAAQ,gBAAG,KAAC,WAAD,CAAa,KAAb,KAAH,gBAA2B,KAAC,WAAD,CAAa,IAAb,KAAjD,GAAwEA,QAAQ,gBAAG,KAAC,WAAD,CAAa,WAAb,KAAH,gBAAiC,KAAC,WAAD,CAAa,YAAb;AADpH,UAPF,eAUE,KAAC,8BAAD;AAAA,oBAAiCT,IAAI,CAACa;AAAtC,UAVF;AAAA,QADF,eAaE,MAAC,2BAAD;AAA6B,gDAA+Bb,IAAI,CAACE,EAApC,CAA7B;AAAA,mBACGF,IAAI,CAACc,MAAL,iBAAe,KAAC,iCAAD;AAAA,oBAAoCd,IAAI,CAACc;AAAzC,UADlB,eAEE,KAAC,+BAAD;AAAA,oBAAkCd,IAAI,CAACe;AAAvC,UAFF,EAGGf,IAAI,CAACgB,MAAL,iBAAe,KAAC,iCAAD;AAAA,oBAAoChB,IAAI,CAACgB;AAAzC,UAHlB;AAAA,QAbF;AAAA,OAA2BhB,IAAI,CAACE,EAAhC,CADF;AAqBD,GAxBD;;AA0BA,sBAAO,KAAC,uBAAD;AAAyB,IAAA,SAAS,EAAE,GAAGQ,MAAH,2BAAclB,KAAK,CAACyB,IAApB,qDAA4B9D,IAAI,CAAC+D,MAAjC,EAApC;AAAA,cAAiF1B,KAAK,CAACM,KAAN,CAAYG,GAAZ,CAAgB,UAACD,IAAD;AAAA,aAAUQ,UAAU,CAACR,IAAD,CAApB;AAAA,KAAhB;AAAjF,IAAP;AACD,CAtDM;;AALLF,EAAAA,K;AAVAI,IAAAA,E;AACAW,IAAAA,K;AACAC,IAAAA,M;AACAC,IAAAA,I;AACAC,IAAAA,M;AACAX,IAAAA,Q;AACA5B,IAAAA,M;;AAKAoB,EAAAA,K;;AA4DF,eAAeN,gBAAf","sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Size } from '../types';\nimport { SystemIcons } from '../icons';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ParagraphLStyling,\n  ParagraphMStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n} from '../styles/typography';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ${COLORS.neutral_600};\n  cursor: pointer;\n\n  &:hover {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_20};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n  display: none;\n  flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.div``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &.active {\n    ${ContentAccordionItemContent} {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ${ContentAccordionItemHeader} {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${ContentAccordionItem}:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 8px;\n      padding: 0 8px;\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 12px;\n      padding: 0 12px;\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 16px;\n      padding: 0 16px;\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem {\n  id: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (props.multi) {\n      setOpened(props.items.filter((item) => item.active).map((item) => item.id));\n    } else {\n      let active = props.items.find((item) => !!item.active)?.id;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [props.items, props.multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.id)) {\n      setOpened(opened.filter((key) => key !== item.id));\n    } else {\n      if (props.multi) {\n        setOpened([...opened, item.id]);\n      } else {\n        setOpened([item.id]);\n      }\n    }\n  };\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const isActive = opened.includes(item.id);\n\n    return (\n      <ContentAccordionItem key={item.id} id={`item_${item.id}`} className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\n          role=\"button\"\n          id={`headerFor_${item.id}`}\n          tabIndex={!item.disabled ? 0 : undefined}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !item.disabled && onItemClick(item)}\n          onKeyPress={(event) => event.key === 'Enter' && onItemClick(item)}>\n          <ContentAccordionItemHeaderIcon>\n            {props.multi ? isActive ? <SystemIcons.Minus /> : <SystemIcons.Plus /> : isActive ? <SystemIcons.ChevronDown /> : <SystemIcons.ChevronRight />}\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>{item.title}</ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent aria-describedby={`headerFor_${item.id}`}>\n          {item.header && <ContentAccordionItemContentHeader>{item.header}</ContentAccordionItemContentHeader>}\n          <ContentAccordionItemContentBody>{item.body}</ContentAccordionItemContentBody>\n          {item.footer && <ContentAccordionItemContentFooter>{item.footer}</ContentAccordionItemContentFooter>}\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  };\n\n  return <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>{props.items.map((item) => renderItem(item))}</ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}

package/dist/Accordion/styles.cjs

@@ -27,7 +27,7 @@ var AccordionItemContainer = _styledComponents.default.div(_templateObject2 || (
 
 exports.AccordionItemContainer = AccordionItemContainer;
 
-var ItemHeaderContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  background: ", ";\n  cursor: pointer;\n  \n  ", "\n  \n  \n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n\n  :focus:not(:active){\n    ", "\n  }\n\n  :hover  {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active  {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n  }\n\n  &.active{\n    color: ", ";\n  }\n  \n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"])), _styles.COLORS.neutral_20, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
+var ItemHeaderContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n\n  ", "\n\n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  :focus:not(:active) {\n    ", "\n  }\n\n  :hover {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n  }\n\n  &.active {\n    color: ", ";\n  }\n\n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
 
 exports.ItemHeaderContainer = ItemHeaderContainer;
 
@@ -35,10 +35,8 @@ var HeaderIconContainer = _styledComponents.default.div(_templateObject4 || (_te
 
 exports.HeaderIconContainer = HeaderIconContainer;
 
-var ItemBodyContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", ";\n  margin: ", ";\n  background: ", ";\n"])), function (props) {
-  return props.padding || '0px 16px';
-}, function (props) {
-  return props.margin || '12px 0';
+var ItemBodyContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", ";\n  background: ", ";\n"])), function (props) {
+  return props.padding || '12px 16px';
 }, _styles.COLORS.white);
 
 exports.ItemBodyContainer = ItemBodyContainer;

package/dist/Accordion/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","ItemHeaderContainer","neutral_20","ComponentTextStyle","Regular","neutral_600","focusStyles","primary_20","primary_700","Z_INDEXES","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding","margin"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,kLAA1B;;;;AAOA,IAAMC,sBAAsB,GAAGF,0BAAOC,GAAV,wMAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCC,eAAOC,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;;;;AASA,IAAMC,mBAAmB,GAAGP,0BAAOC,GAAV,4uBAMhBI,eAAOG,UANS,EAS5B,+BAAkBC,2BAAmBC,OAArC,EAA8CL,eAAOM,WAArD,CAT4B,EAmB1BC,mBAnB0B,EAuBdP,eAAOQ,UAvBO,EAwBnBR,eAAOS,WAxBY,EAyBjBC,oBAAUC,KAzBO,EA6BnBX,eAAOY,WA7BY,EA8BdZ,eAAOa,WA9BO,EA+BjBH,oBAAUI,MA/BO,EAmCnBd,eAAOe,WAnCY,EAuCdf,eAAOgB,KAvCO,EAwCnBhB,eAAOiB,WAxCY,EA4CjBjB,eAAOiB,WA5CU,CAAzB;;;;AAiDA,IAAMC,mBAAmB,GAAGvB,0BAAOC,GAAV,6GAAzB;;;;AAIA,IAAMuB,iBAAiB,GAAGxB,0BAAOC,GAAV,gJACjB,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACsB,OAAN,IAAiB,UAArB;AAAA,CADY,EAElB,UAAAtB,KAAK;AAAA,SAAIA,KAAK,CAACuB,MAAN,IAAgB,QAApB;AAAA,CAFa,EAGdrB,eAAOgB,KAHO,CAAvB","sourcesContent":["import styled, {css} from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean; }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\n\nexport const ItemHeaderContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  background: ${COLORS.neutral_20};\n  cursor: pointer;\n  \n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  \n  \n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n\n  :focus:not(:active){\n    ${focusStyles}\n  }\n\n  :hover  {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  :active  {\n    color: ${COLORS.primary_800};\n    background: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.active{\n    color: ${COLORS.neutral_800};\n  }\n  \n  &.disabled {\n    background: ${COLORS.white}!important;\n    color: ${COLORS.neutral_300};\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ${COLORS.neutral_300}!important;\n    }\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{padding?: string; margin?: string}>`\n  padding: ${props => props.padding || '0px 16px'};\n  margin: ${props => props.margin || '12px 0'};\n  background: ${COLORS.white};\n`;\n"],"file":"styles.cjs"}
+{"version":3,"sources":["../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","ItemHeaderContainer","ComponentTextStyle","Regular","neutral_600","focusStyles","primary_20","primary_700","Z_INDEXES","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,kLAA1B;;;;AAOA,IAAMC,sBAAsB,GAAGF,0BAAOC,GAAV,wMAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCC,eAAOC,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;;;;AAQA,IAAMC,mBAAmB,GAAGP,0BAAOC,GAAV,2sBAQ5B,+BAAkBO,2BAAmBC,OAArC,EAA8CJ,eAAOK,WAArD,CAR4B,EAgB1BC,mBAhB0B,EAoBdN,eAAOO,UApBO,EAqBnBP,eAAOQ,WArBY,EAsBjBC,oBAAUC,KAtBO,EA0BnBV,eAAOW,WA1BY,EA2BdX,eAAOY,WA3BO,EA4BjBH,oBAAUI,MA5BO,EAgCnBb,eAAOc,WAhCY,EAoCdd,eAAOe,KApCO,EAqCnBf,eAAOgB,WArCY,EAyCjBhB,eAAOgB,WAzCU,CAAzB;;;;AA8CA,IAAMC,mBAAmB,GAAGtB,0BAAOC,GAAV,6GAAzB;;;;AAIA,IAAMsB,iBAAiB,GAAGvB,0BAAOC,GAAV,+HACjB,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACqB,OAAN,IAAiB,WAA5B;AAAA,CADiB,EAEdnB,eAAOe,KAFO,CAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nexport const ItemHeaderContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  :focus:not(:active) {\n    ${focusStyles}\n  }\n\n  :hover {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  :active {\n    color: ${COLORS.primary_800};\n    background: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.active {\n    color: ${COLORS.neutral_800};\n  }\n\n  &.disabled {\n    background: ${COLORS.white}!important;\n    color: ${COLORS.neutral_300};\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ${COLORS.neutral_300}!important;\n    }\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n  padding: ${(props) => props.padding || '12px 16px'};\n  background: ${COLORS.white};\n`;\n"],"file":"styles.cjs"}

package/dist/Accordion/styles.d.ts

@@ -6,5 +6,4 @@ export declare const ItemHeaderContainer: import("styled-components").StyledComp
 export declare const HeaderIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemBodyContainer: import("styled-components").StyledComponent<"div", any, {
     padding?: string | undefined;
-    margin?: string | undefined;
 }, never>;

package/dist/Accordion/styles.js

@@ -9,11 +9,9 @@ export var AccordionMenuWrapper = styled.div(_templateObject || (_templateObject
 export var AccordionItemContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ", ";\n"])), function (props) {
   return props.displaySeparator ? "1px solid ".concat(COLORS.neutral_100) : '';
 });
-export var ItemHeaderContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  background: ", ";\n  cursor: pointer;\n  \n  ", "\n  \n  \n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n\n  :focus:not(:active){\n    ", "\n  }\n\n  :hover  {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active  {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n  }\n\n  &.active{\n    color: ", ";\n  }\n  \n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"])), COLORS.neutral_20, ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), focusStyles, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active, COLORS.neutral_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300);
+export var ItemHeaderContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n\n  ", "\n\n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  :focus:not(:active) {\n    ", "\n  }\n\n  :hover {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n  }\n\n  &.active {\n    color: ", ";\n  }\n\n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), focusStyles, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active, COLORS.neutral_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300);
 export var HeaderIconContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-left: auto;\n"])));
-export var ItemBodyContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: ", ";\n  margin: ", ";\n  background: ", ";\n"])), function (props) {
-  return props.padding || '0px 16px';
-}, function (props) {
-  return props.margin || '12px 0';
+export var ItemBodyContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: ", ";\n  background: ", ";\n"])), function (props) {
+  return props.padding || '12px 16px';
 }, COLORS.white);
 //# sourceMappingURL=styles.js.map

package/dist/Accordion/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Accordion/styles.ts"],"names":["styled","COLORS","ComponentMStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemContainer","props","displaySeparator","neutral_100","ItemHeaderContainer","neutral_20","Regular","neutral_600","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding","margin"],"mappings":";;;;AAAA,OAAOA,MAAP,MAA0B,mBAA1B;AACA,SAAQC,MAAR,EAAgBC,iBAAhB,EAAmCC,kBAAnC,EAAuDC,WAAvD,QAAyE,WAAzE;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA,OAAO,IAAMC,oBAAoB,GAAGN,MAAM,CAACO,GAAV,oKAA1B;AAOP,OAAO,IAAMC,sBAAsB,GAAGR,MAAM,CAACO,GAAV,0LAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCT,MAAM,CAACU,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;AASP,OAAO,IAAMC,mBAAmB,GAAGZ,MAAM,CAACO,GAAV,8tBAMhBN,MAAM,CAACY,UANS,EAS5BX,iBAAiB,CAACC,kBAAkB,CAACW,OAApB,EAA6Bb,MAAM,CAACc,WAApC,CATW,EAmB1BX,WAnB0B,EAuBdH,MAAM,CAACe,UAvBO,EAwBnBf,MAAM,CAACgB,WAxBY,EAyBjBZ,SAAS,CAACa,KAzBO,EA6BnBjB,MAAM,CAACkB,WA7BY,EA8BdlB,MAAM,CAACmB,WA9BO,EA+BjBf,SAAS,CAACgB,MA/BO,EAmCnBpB,MAAM,CAACqB,WAnCY,EAuCdrB,MAAM,CAACsB,KAvCO,EAwCnBtB,MAAM,CAACuB,WAxCY,EA4CjBvB,MAAM,CAACuB,WA5CU,CAAzB;AAiDP,OAAO,IAAMC,mBAAmB,GAAGzB,MAAM,CAACO,GAAV,+FAAzB;AAIP,OAAO,IAAMmB,iBAAiB,GAAG1B,MAAM,CAACO,GAAV,kIACjB,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACkB,OAAN,IAAiB,UAArB;AAAA,CADY,EAElB,UAAAlB,KAAK;AAAA,SAAIA,KAAK,CAACmB,MAAN,IAAgB,QAApB;AAAA,CAFa,EAGd3B,MAAM,CAACsB,KAHO,CAAvB","sourcesContent":["import styled, {css} from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean; }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\n\nexport const ItemHeaderContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  background: ${COLORS.neutral_20};\n  cursor: pointer;\n  \n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  \n  \n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n\n  :focus:not(:active){\n    ${focusStyles}\n  }\n\n  :hover  {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  :active  {\n    color: ${COLORS.primary_800};\n    background: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.active{\n    color: ${COLORS.neutral_800};\n  }\n  \n  &.disabled {\n    background: ${COLORS.white}!important;\n    color: ${COLORS.neutral_300};\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ${COLORS.neutral_300}!important;\n    }\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{padding?: string; margin?: string}>`\n  padding: ${props => props.padding || '0px 16px'};\n  margin: ${props => props.margin || '12px 0'};\n  background: ${COLORS.white};\n`;\n"],"file":"styles.js"}
+{"version":3,"sources":["../../src/Accordion/styles.ts"],"names":["styled","COLORS","ComponentMStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemContainer","props","displaySeparator","neutral_100","ItemHeaderContainer","Regular","neutral_600","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding"],"mappings":";;;;AAAA,OAAOA,MAAP,MAA4B,mBAA5B;AACA,SAASC,MAAT,EAAiBC,iBAAjB,EAAoCC,kBAApC,EAAwDC,WAAxD,QAA2E,WAA3E;AACA,SAASC,SAAT,QAA0B,qBAA1B;AAEA,OAAO,IAAMC,oBAAoB,GAAGN,MAAM,CAACO,GAAV,oKAA1B;AAOP,OAAO,IAAMC,sBAAsB,GAAGR,MAAM,CAACO,GAAV,0LAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCT,MAAM,CAACU,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;AAQP,OAAO,IAAMC,mBAAmB,GAAGZ,MAAM,CAACO,GAAV,6rBAQ5BL,iBAAiB,CAACC,kBAAkB,CAACU,OAApB,EAA6BZ,MAAM,CAACa,WAApC,CARW,EAgB1BV,WAhB0B,EAoBdH,MAAM,CAACc,UApBO,EAqBnBd,MAAM,CAACe,WArBY,EAsBjBX,SAAS,CAACY,KAtBO,EA0BnBhB,MAAM,CAACiB,WA1BY,EA2BdjB,MAAM,CAACkB,WA3BO,EA4BjBd,SAAS,CAACe,MA5BO,EAgCnBnB,MAAM,CAACoB,WAhCY,EAoCdpB,MAAM,CAACqB,KApCO,EAqCnBrB,MAAM,CAACsB,WArCY,EAyCjBtB,MAAM,CAACsB,WAzCU,CAAzB;AA8CP,OAAO,IAAMC,mBAAmB,GAAGxB,MAAM,CAACO,GAAV,+FAAzB;AAIP,OAAO,IAAMkB,iBAAiB,GAAGzB,MAAM,CAACO,GAAV,iHACjB,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACiB,OAAN,IAAiB,WAA5B;AAAA,CADiB,EAEdzB,MAAM,CAACqB,KAFO,CAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nexport const ItemHeaderContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  :focus:not(:active) {\n    ${focusStyles}\n  }\n\n  :hover {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  :active {\n    color: ${COLORS.primary_800};\n    background: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.active {\n    color: ${COLORS.neutral_800};\n  }\n\n  &.disabled {\n    background: ${COLORS.white}!important;\n    color: ${COLORS.neutral_300};\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ${COLORS.neutral_300}!important;\n    }\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n  padding: ${(props) => props.padding || '12px 16px'};\n  background: ${COLORS.white};\n`;\n"],"file":"styles.js"}

package/dist/Breadcrumb/Breadcrumb.cjs

@@ -9,64 +9,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var React = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("../styles");
 
 var _ = require("..");
 
 var _reactRouter = require("react-router");
 
-var _typography = require("../styles/typography");
-
 var _DropdownButton = _interopRequireDefault(require("../Dropdown/DropdownButton"));
 
-var _jsxRuntime = require("react/jsx-runtime");
+var _styles2 = require("./styles");
 
-var _templateObject, _templateObject2;
+var _jsxRuntime = require("react/jsx-runtime");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var marginRight = function marginRight(size) {
-  return size == _.Size.Small || size == _.Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;';
-};
-
-var BreadcrumbContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display:flex;\n  align-items: center;\n  min-height: 48px;\n    \n  a {\n    text-decoration: none;\n    ", "\n    ", "\n  }\n\n  .chevronicon {\n    ", "\n  }\n\n  a:hover {\n    color: ", ";\n  }\n  a:active {\n    color: ", ";\n  }\n"])), function (props) {
-  return FontStyles(props.size, _.ComponentTextStyle.Regular, _styles.COLORS.neutral_600);
-}, function (props) {
-  return marginRight(props.size);
-}, function (props) {
-  return marginRight(props.size);
-}, _styles.COLORS.primary_700, _styles.COLORS.primary_800);
-
-var FontStyles = function FontStyles(size, textStyle, color) {
-  switch (size) {
-    case _.Size.XSmall:
-      return (0, _typography.ComponentXXSStyling)(textStyle, color);
-
-    case _.Size.Medium:
-      return (0, _typography.ComponentMStyling)(textStyle, color);
-
-    case _.Size.Small:
-    default:
-      return (0, _typography.ComponentSStyling)(textStyle, color);
-  }
-};
-
-var LastBreadcrumbItem = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n"])), function (props) {
-  return FontStyles(props.size, _.ComponentTextStyle.Bold, _styles.COLORS.neutral_800);
-}, function (props) {
-  return marginRight(props.size);
-});
-
 var Breadcrumb = function Breadcrumb(_ref) {
   var items = _ref.items,
       _ref$size = _ref.size,
@@ -89,10 +51,12 @@ var Breadcrumb = function Breadcrumb(_ref) {
     history.push(links[0]);
   };
 
-  var chevronSize = size == _.Size.Medium ? "24px" : size == _.Size.Small ? "20px" : "16px";
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BreadcrumbContainer, {
+  var chevronSize = size == _.Size.Medium ? '24px' : size == _.Size.Small ? '20px' : '16px';
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.BreadcrumbContainer, {
     size: size,
+    "data-testid": 'breacrumbContainer',
     children: [homeIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.IconButton, {
+      id: "homeIcon",
       variant: "secondary",
       shape: "circular",
       action: function action() {
@@ -102,7 +66,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
         size: chevronSize
       })
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HyperLink, {
-      id: "homelink",
+      id: 'homelink',
       variant: "default",
       href: homeUrl,
       children: homeLabel
@@ -128,7 +92,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
         color: _styles.COLORS.neutral_500,
         size: chevronSize
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HyperLink, {
-        id: "link-item-" + (items.length - 3),
+        id: 'link-item-' + (items.length - 3),
         target: "_self",
         variant: "default",
         href: items[items.length - 3].url,
@@ -140,7 +104,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
         color: _styles.COLORS.neutral_500,
         size: chevronSize
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HyperLink, {
-        id: "link-item-" + (items.length - 2),
+        id: 'link-item-' + (items.length - 2),
         target: "_self",
         variant: "default",
         href: items[items.length - 2].url,
@@ -151,7 +115,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
         className: "chevronicon",
         color: _styles.COLORS.neutral_500,
         size: chevronSize
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LastBreadcrumbItem, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles2.LastBreadcrumbItem, {
         size: size,
         children: items[items.length - 1].label
       })]

package/dist/Breadcrumb/Breadcrumb.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"names":["marginRight","size","Size","Small","Medium","BreadcrumbContainer","styled","div","props","FontStyles","ComponentTextStyle","Regular","COLORS","neutral_600","primary_700","primary_800","textStyle","color","XSmall","LastBreadcrumbItem","label","Bold","neutral_800","Breadcrumb","items","homeIcon","homeLabel","homeUrl","history","dropdownItems","slice","length","map","x","value","url","displayLabel","navigate","links","push","chevronSize","neutral_500"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS} from '../styles';\nimport {ComponentTextStyle, Size, SystemIcons} from '..';\nimport {useHistory} from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport {BreadcrumbItem} from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport {ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\n\ntype BreadcrumbProps = {\n  homeIcon?: boolean;\n  homeLabel?: string;\n  homeUrl?: string;\n  items?: BreadcrumbItem[];\n  size?: Size;\n};\n\nconst marginRight = (size: Size | undefined) => {\n  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;'\n}\n\nconst BreadcrumbContainer = styled.div<{size: Size | undefined}>`\n  display:flex;\n  align-items: center;\n  min-height: 48px;\n    \n  a {\n    text-decoration: none;\n    ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${(props) => marginRight(props.size) }\n  }\n\n  .chevronicon {\n    ${(props) => marginRight(props.size) }\n  }\n\n  a:hover {\n    color: ${COLORS.primary_700};\n  }\n  a:active {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst FontStyles = (size: Size | undefined, textStyle: ComponentTextStyle, color: string) => {\n  switch (size) {\n    case Size.XSmall:\n      return ComponentXXSStyling(textStyle, color);\n    case Size.Medium:\n      return ComponentMStyling(textStyle, color);\n    case Size.Small:\n    default:\n      return ComponentSStyling(textStyle, color);\n  }\n}\n\nconst LastBreadcrumbItem = styled.label<{size: Size}>`\n  ${(props) => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}\n  ${(props) => marginRight(props.size) }\n`;\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ \n    items, \n    size = Size.Small, \n    homeIcon = true, \n    homeLabel = 'Home', \n    homeUrl = '/' }) => {\n\n  const history = useHistory();\n  const dropdownItems: DropdownItem[] = items ? items.slice(0, items.length - 2).map(x => ({ value: x.url, displayLabel: x.label })) : [];\n  const navigate = (links: string[]) => {    \n    history.push(links[0]);\n  };\n\n  const chevronSize = size == Size.Medium ? \"24px\" : size == Size.Small ? \"20px\" : \"16px\";\n\n  return (\n    <BreadcrumbContainer size={size}>\n\n      {homeIcon ? \n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => history.push(homeUrl)}>\n          <SystemIcons.Home size={chevronSize} />\n        </IconButton> : \n        <HyperLink id={\"homelink\"} variant=\"default\" href={homeUrl}>\n          {homeLabel}\n        </HyperLink>}\n\n      { !!items && items.length > 2 &&\n          (items.length > 3 ?\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <DropdownButton\n              type={'icon'}\n              alignLeft={true}\n              items={dropdownItems} \n              size={size}\n              icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n              onClick={navigate} />\n          </> :\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <HyperLink id={\"link-item-\" + (items.length - 3)} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\n              {items[items.length - 3].label}\n            </HyperLink>  \n          </>)\n      }\n\n      { !!items && items.length > 1 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <HyperLink id={\"link-item-\" + (items.length - 2)} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </HyperLink>\n        </>\n      }\n\n      { !!items && items.length > 0 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <LastBreadcrumbItem size={size}>\n            {items[items.length - 1].label}\n          </LastBreadcrumbItem>\n        </>\n      }\n\n    </BreadcrumbContainer>);\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.cjs"}
+{"version":3,"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"names":["Breadcrumb","items","size","Size","Small","homeIcon","homeLabel","homeUrl","history","dropdownItems","slice","length","map","x","value","url","displayLabel","label","navigate","links","push","chevronSize","Medium","COLORS","neutral_500","neutral_600"],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport { COLORS } from '../styles';\nimport { Size, SystemIcons } from '..';\nimport { useHistory } from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport { BreadcrumbItem } from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport { BreadcrumbContainer, LastBreadcrumbItem } from './styles';\n\ntype BreadcrumbProps = {\n  homeIcon?: boolean;\n  homeLabel?: string;\n  homeUrl?: string;\n  items?: BreadcrumbItem[];\n  size?: Size;\n};\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ items, size = Size.Small, homeIcon = true, homeLabel = 'Home', homeUrl = '/' }) => {\n  const history = useHistory();\n  const dropdownItems: DropdownItem[] = items ? items.slice(0, items.length - 2).map((x) => ({ value: x.url, displayLabel: x.label })) : [];\n  const navigate = (links: string[]) => {\n    history.push(links[0]);\n  };\n\n  const chevronSize = size == Size.Medium ? '24px' : size == Size.Small ? '20px' : '16px';\n\n  return (\n    <BreadcrumbContainer size={size} data-testid={'breacrumbContainer'}>\n      {homeIcon ? (\n        <IconButton id=\"homeIcon\" variant=\"secondary\" shape=\"circular\" action={() => history.push(homeUrl)}>\n          <SystemIcons.Home size={chevronSize} />\n        </IconButton>\n      ) : (\n        <HyperLink id={'homelink'} variant=\"default\" href={homeUrl}>\n          {homeLabel}\n        </HyperLink>\n      )}\n\n      {!!items &&\n        items.length > 2 &&\n        (items.length > 3 ? (\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <DropdownButton\n              type={'icon'}\n              alignLeft={true}\n              items={dropdownItems}\n              size={size}\n              icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n              onClick={navigate}\n            />\n          </>\n        ) : (\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <HyperLink id={'link-item-' + (items.length - 3)} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\n              {items[items.length - 3].label}\n            </HyperLink>\n          </>\n        ))}\n\n      {!!items && items.length > 1 && (\n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <HyperLink id={'link-item-' + (items.length - 2)} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </HyperLink>\n        </>\n      )}\n\n      {!!items && items.length > 0 && (\n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <LastBreadcrumbItem size={size}>{items[items.length - 1].label}</LastBreadcrumbItem>\n        </>\n      )}\n    </BreadcrumbContainer>\n  );\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.cjs"}

package/dist/Breadcrumb/Breadcrumb.js

@@ -1,52 +1,15 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-
-var _templateObject, _templateObject2;
-
 import * as React from 'react';
-import styled from 'styled-components';
 import { COLORS } from '../styles';
-import { ComponentTextStyle, Size, SystemIcons } from '..';
+import { Size, SystemIcons } from '..';
 import { useHistory } from 'react-router';
 import { HyperLink, IconButton } from '..';
-import { ComponentMStyling, ComponentSStyling, ComponentXXSStyling } from '../styles/typography';
 import DropdownButton from '../Dropdown/DropdownButton';
+import { BreadcrumbContainer, LastBreadcrumbItem } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
-var marginRight = function marginRight(size) {
-  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;';
-};
-
-var BreadcrumbContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display:flex;\n  align-items: center;\n  min-height: 48px;\n    \n  a {\n    text-decoration: none;\n    ", "\n    ", "\n  }\n\n  .chevronicon {\n    ", "\n  }\n\n  a:hover {\n    color: ", ";\n  }\n  a:active {\n    color: ", ";\n  }\n"])), function (props) {
-  return FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600);
-}, function (props) {
-  return marginRight(props.size);
-}, function (props) {
-  return marginRight(props.size);
-}, COLORS.primary_700, COLORS.primary_800);
-
-var FontStyles = function FontStyles(size, textStyle, color) {
-  switch (size) {
-    case Size.XSmall:
-      return ComponentXXSStyling(textStyle, color);
-
-    case Size.Medium:
-      return ComponentMStyling(textStyle, color);
-
-    case Size.Small:
-    default:
-      return ComponentSStyling(textStyle, color);
-  }
-};
-
-var LastBreadcrumbItem = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), function (props) {
-  return FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800);
-}, function (props) {
-  return marginRight(props.size);
-});
-
 var Breadcrumb = function Breadcrumb(_ref) {
   var items = _ref.items,
       _ref$size = _ref.size,
@@ -69,10 +32,12 @@ var Breadcrumb = function Breadcrumb(_ref) {
     history.push(links[0]);
   };
 
-  var chevronSize = size == Size.Medium ? "24px" : size == Size.Small ? "20px" : "16px";
+  var chevronSize = size == Size.Medium ? '24px' : size == Size.Small ? '20px' : '16px';
   return /*#__PURE__*/_jsxs(BreadcrumbContainer, {
     size: size,
+    "data-testid": 'breacrumbContainer',
     children: [homeIcon ? /*#__PURE__*/_jsx(IconButton, {
+      id: "homeIcon",
       variant: "secondary",
       shape: "circular",
       action: function action() {
@@ -82,7 +47,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
         size: chevronSize
       })
     }) : /*#__PURE__*/_jsx(HyperLink, {
-      id: "homelink",
+      id: 'homelink',
       variant: "default",
       href: homeUrl,
       children: homeLabel
@@ -108,7 +73,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
         color: COLORS.neutral_500,
         size: chevronSize
       }), /*#__PURE__*/_jsx(HyperLink, {
-        id: "link-item-" + (items.length - 3),
+        id: 'link-item-' + (items.length - 3),
         target: "_self",
         variant: "default",
         href: items[items.length - 3].url,
@@ -120,7 +85,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
         color: COLORS.neutral_500,
         size: chevronSize
       }), /*#__PURE__*/_jsx(HyperLink, {
-        id: "link-item-" + (items.length - 2),
+        id: 'link-item-' + (items.length - 2),
         target: "_self",
         variant: "default",
         href: items[items.length - 2].url,

package/dist/Breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","Size","SystemIcons","useHistory","HyperLink","IconButton","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","DropdownButton","marginRight","size","Small","Medium","BreadcrumbContainer","div","props","FontStyles","Regular","neutral_600","primary_700","primary_800","textStyle","color","XSmall","LastBreadcrumbItem","label","Bold","neutral_800","Breadcrumb","items","homeIcon","homeLabel","homeUrl","history","dropdownItems","slice","length","map","x","value","url","displayLabel","navigate","links","push","chevronSize","neutral_500"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS} from '../styles';\nimport {ComponentTextStyle, Size, SystemIcons} from '..';\nimport {useHistory} from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport {BreadcrumbItem} from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport {ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\n\ntype BreadcrumbProps = {\n  homeIcon?: boolean;\n  homeLabel?: string;\n  homeUrl?: string;\n  items?: BreadcrumbItem[];\n  size?: Size;\n};\n\nconst marginRight = (size: Size | undefined) => {\n  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;'\n}\n\nconst BreadcrumbContainer = styled.div<{size: Size | undefined}>`\n  display:flex;\n  align-items: center;\n  min-height: 48px;\n    \n  a {\n    text-decoration: none;\n    ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${(props) => marginRight(props.size) }\n  }\n\n  .chevronicon {\n    ${(props) => marginRight(props.size) }\n  }\n\n  a:hover {\n    color: ${COLORS.primary_700};\n  }\n  a:active {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst FontStyles = (size: Size | undefined, textStyle: ComponentTextStyle, color: string) => {\n  switch (size) {\n    case Size.XSmall:\n      return ComponentXXSStyling(textStyle, color);\n    case Size.Medium:\n      return ComponentMStyling(textStyle, color);\n    case Size.Small:\n    default:\n      return ComponentSStyling(textStyle, color);\n  }\n}\n\nconst LastBreadcrumbItem = styled.label<{size: Size}>`\n  ${(props) => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}\n  ${(props) => marginRight(props.size) }\n`;\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ \n    items, \n    size = Size.Small, \n    homeIcon = true, \n    homeLabel = 'Home', \n    homeUrl = '/' }) => {\n\n  const history = useHistory();\n  const dropdownItems: DropdownItem[] = items ? items.slice(0, items.length - 2).map(x => ({ value: x.url, displayLabel: x.label })) : [];\n  const navigate = (links: string[]) => {    \n    history.push(links[0]);\n  };\n\n  const chevronSize = size == Size.Medium ? \"24px\" : size == Size.Small ? \"20px\" : \"16px\";\n\n  return (\n    <BreadcrumbContainer size={size}>\n\n      {homeIcon ? \n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => history.push(homeUrl)}>\n          <SystemIcons.Home size={chevronSize} />\n        </IconButton> : \n        <HyperLink id={\"homelink\"} variant=\"default\" href={homeUrl}>\n          {homeLabel}\n        </HyperLink>}\n\n      { !!items && items.length > 2 &&\n          (items.length > 3 ?\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <DropdownButton\n              type={'icon'}\n              alignLeft={true}\n              items={dropdownItems} \n              size={size}\n              icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n              onClick={navigate} />\n          </> :\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <HyperLink id={\"link-item-\" + (items.length - 3)} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\n              {items[items.length - 3].label}\n            </HyperLink>  \n          </>)\n      }\n\n      { !!items && items.length > 1 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <HyperLink id={\"link-item-\" + (items.length - 2)} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </HyperLink>\n        </>\n      }\n\n      { !!items && items.length > 0 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <LastBreadcrumbItem size={size}>\n            {items[items.length - 1].label}\n          </LastBreadcrumbItem>\n        </>\n      }\n\n    </BreadcrumbContainer>);\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.js"}
+{"version":3,"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"names":["React","COLORS","Size","SystemIcons","useHistory","HyperLink","IconButton","DropdownButton","BreadcrumbContainer","LastBreadcrumbItem","Breadcrumb","items","size","Small","homeIcon","homeLabel","homeUrl","history","dropdownItems","slice","length","map","x","value","url","displayLabel","label","navigate","links","push","chevronSize","Medium","neutral_500","neutral_600"],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport { COLORS } from '../styles';\nimport { Size, SystemIcons } from '..';\nimport { useHistory } from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport { BreadcrumbItem } from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport { BreadcrumbContainer, LastBreadcrumbItem } from './styles';\n\ntype BreadcrumbProps = {\n  homeIcon?: boolean;\n  homeLabel?: string;\n  homeUrl?: string;\n  items?: BreadcrumbItem[];\n  size?: Size;\n};\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ items, size = Size.Small, homeIcon = true, homeLabel = 'Home', homeUrl = '/' }) => {\n  const history = useHistory();\n  const dropdownItems: DropdownItem[] = items ? items.slice(0, items.length - 2).map((x) => ({ value: x.url, displayLabel: x.label })) : [];\n  const navigate = (links: string[]) => {\n    history.push(links[0]);\n  };\n\n  const chevronSize = size == Size.Medium ? '24px' : size == Size.Small ? '20px' : '16px';\n\n  return (\n    <BreadcrumbContainer size={size} data-testid={'breacrumbContainer'}>\n      {homeIcon ? (\n        <IconButton id=\"homeIcon\" variant=\"secondary\" shape=\"circular\" action={() => history.push(homeUrl)}>\n          <SystemIcons.Home size={chevronSize} />\n        </IconButton>\n      ) : (\n        <HyperLink id={'homelink'} variant=\"default\" href={homeUrl}>\n          {homeLabel}\n        </HyperLink>\n      )}\n\n      {!!items &&\n        items.length > 2 &&\n        (items.length > 3 ? (\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <DropdownButton\n              type={'icon'}\n              alignLeft={true}\n              items={dropdownItems}\n              size={size}\n              icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n              onClick={navigate}\n            />\n          </>\n        ) : (\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <HyperLink id={'link-item-' + (items.length - 3)} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\n              {items[items.length - 3].label}\n            </HyperLink>\n          </>\n        ))}\n\n      {!!items && items.length > 1 && (\n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <HyperLink id={'link-item-' + (items.length - 2)} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </HyperLink>\n        </>\n      )}\n\n      {!!items && items.length > 0 && (\n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <LastBreadcrumbItem size={size}>{items[items.length - 1].label}</LastBreadcrumbItem>\n        </>\n      )}\n    </BreadcrumbContainer>\n  );\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.js"}

package/dist/Breadcrumb/styles.cjs

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LastBreadcrumbItem = exports.BreadcrumbContainer = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _types = require("../types");
+
+var _templateObject, _templateObject2;
+
+var marginRight = function marginRight(size) {
+  return size == _types.Size.Small || size == _types.Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;';
+};
+
+var FontStyles = function FontStyles(size, textStyle, color) {
+  switch (size) {
+    case _types.Size.XSmall:
+      return (0, _styles.ComponentXXSStyling)(textStyle, color);
+
+    case _types.Size.Medium:
+      return (0, _styles.ComponentMStyling)(textStyle, color);
+
+    case _types.Size.Small:
+    default:
+      return (0, _styles.ComponentSStyling)(textStyle, color);
+  }
+};
+
+var LastBreadcrumbItem = _styledComponents.default.label(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n"])), function (props) {
+  return FontStyles(props.size, _styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_800);
+}, function (props) {
+  return marginRight(props.size);
+});
+
+exports.LastBreadcrumbItem = LastBreadcrumbItem;
+
+var BreadcrumbContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n\n  a {\n    text-decoration: none;\n    ", "\n    ", "\n  }\n\n  .chevronicon {\n    ", "\n  }\n\n  a:hover {\n    color: ", ";\n  }\n  a:active {\n    color: ", ";\n  }\n"])), function (props) {
+  return FontStyles(props.size, _styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600);
+}, function (props) {
+  return marginRight(props.size);
+}, function (props) {
+  return marginRight(props.size);
+}, _styles.COLORS.primary_700, _styles.COLORS.primary_800);
+
+exports.BreadcrumbContainer = BreadcrumbContainer;
+//# sourceMappingURL=styles.cjs.map

package/dist/Breadcrumb/styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Breadcrumb/styles.ts"],"names":["marginRight","size","Size","Small","Medium","FontStyles","textStyle","color","XSmall","LastBreadcrumbItem","styled","label","props","ComponentTextStyle","Bold","COLORS","neutral_800","BreadcrumbContainer","div","Regular","neutral_600","primary_700","primary_800"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAEA,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,IAAD,EAA4B;AAC9C,SAAOA,IAAI,IAAIC,YAAKC,KAAb,IAAsBF,IAAI,IAAIC,YAAKE,MAAnC,GAA4C,oBAA5C,GAAmE,oBAA1E;AACD,CAFD;;AAIA,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAACJ,IAAD,EAAyBK,SAAzB,EAAwDC,KAAxD,EAA0E;AAC3F,UAAQN,IAAR;AACE,SAAKC,YAAKM,MAAV;AACE,aAAO,iCAAoBF,SAApB,EAA+BC,KAA/B,CAAP;;AACF,SAAKL,YAAKE,MAAV;AACE,aAAO,+BAAkBE,SAAlB,EAA6BC,KAA7B,CAAP;;AACF,SAAKL,YAAKC,KAAV;AACA;AACE,aAAO,+BAAkBG,SAAlB,EAA6BC,KAA7B,CAAP;AAPJ;AASD,CAVD;;AAYO,IAAME,kBAAkB,GAAGC,0BAAOC,KAAV,sGAC3B,UAACC,KAAD;AAAA,SAAWP,UAAU,CAACO,KAAK,CAACX,IAAP,EAAaY,2BAAmBC,IAAhC,EAAsCC,eAAOC,WAA7C,CAArB;AAAA,CAD2B,EAE3B,UAACJ,KAAD;AAAA,SAAWZ,WAAW,CAACY,KAAK,CAACX,IAAP,CAAtB;AAAA,CAF2B,CAAxB;;;;AAKA,IAAMgB,mBAAmB,GAAGP,0BAAOQ,GAAV,mUAO1B,UAACN,KAAD;AAAA,SAAWP,UAAU,CAACO,KAAK,CAACX,IAAP,EAAaY,2BAAmBM,OAAhC,EAAyCJ,eAAOK,WAAhD,CAArB;AAAA,CAP0B,EAQ1B,UAACR,KAAD;AAAA,SAAWZ,WAAW,CAACY,KAAK,CAACX,IAAP,CAAtB;AAAA,CAR0B,EAY1B,UAACW,KAAD;AAAA,SAAWZ,WAAW,CAACY,KAAK,CAACX,IAAP,CAAtB;AAAA,CAZ0B,EAgBnBc,eAAOM,WAhBY,EAmBnBN,eAAOO,WAnBY,CAAzB","sourcesContent":["import styled from 'styled-components';\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling } from '../styles';\nimport { Size } from '../types';\n\nconst marginRight = (size: Size | undefined) => {\n  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;';\n};\n\nconst FontStyles = (size: Size | undefined, textStyle: ComponentTextStyle, color: string) => {\n  switch (size) {\n    case Size.XSmall:\n      return ComponentXXSStyling(textStyle, color);\n    case Size.Medium:\n      return ComponentMStyling(textStyle, color);\n    case Size.Small:\n    default:\n      return ComponentSStyling(textStyle, color);\n  }\n};\n\nexport const LastBreadcrumbItem = styled.label<{ size: Size }>`\n  ${(props) => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}\n  ${(props) => marginRight(props.size)}\n`;\n\nexport const BreadcrumbContainer = styled.div<{ size: Size | undefined }>`\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n\n  a {\n    text-decoration: none;\n    ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${(props) => marginRight(props.size)}\n  }\n\n  .chevronicon {\n    ${(props) => marginRight(props.size)}\n  }\n\n  a:hover {\n    color: ${COLORS.primary_700};\n  }\n  a:active {\n    color: ${COLORS.primary_800};\n  }\n`;\n"],"file":"styles.cjs"}

package/dist/Breadcrumb/styles.d.ts

@@ -0,0 +1,7 @@
+import { Size } from '../types';
+export declare const LastBreadcrumbItem: import("styled-components").StyledComponent<"label", any, {
+    size: Size;
+}, never>;
+export declare const BreadcrumbContainer: import("styled-components").StyledComponent<"div", any, {
+    size: Size | undefined;
+}, never>;

package/dist/Breadcrumb/styles.js

@@ -0,0 +1,39 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import styled from 'styled-components';
+import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling } from '../styles';
+import { Size } from '../types';
+
+var marginRight = function marginRight(size) {
+  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;';
+};
+
+var FontStyles = function FontStyles(size, textStyle, color) {
+  switch (size) {
+    case Size.XSmall:
+      return ComponentXXSStyling(textStyle, color);
+
+    case Size.Medium:
+      return ComponentMStyling(textStyle, color);
+
+    case Size.Small:
+    default:
+      return ComponentSStyling(textStyle, color);
+  }
+};
+
+export var LastBreadcrumbItem = styled.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), function (props) {
+  return FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800);
+}, function (props) {
+  return marginRight(props.size);
+});
+export var BreadcrumbContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n\n  a {\n    text-decoration: none;\n    ", "\n    ", "\n  }\n\n  .chevronicon {\n    ", "\n  }\n\n  a:hover {\n    color: ", ";\n  }\n  a:active {\n    color: ", ";\n  }\n"])), function (props) {
+  return FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600);
+}, function (props) {
+  return marginRight(props.size);
+}, function (props) {
+  return marginRight(props.size);
+}, COLORS.primary_700, COLORS.primary_800);
+//# sourceMappingURL=styles.js.map

package/dist/Breadcrumb/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Breadcrumb/styles.ts"],"names":["styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXXSStyling","Size","marginRight","size","Small","Medium","FontStyles","textStyle","color","XSmall","LastBreadcrumbItem","label","props","Bold","neutral_800","BreadcrumbContainer","div","Regular","neutral_600","primary_700","primary_800"],"mappings":";;;;AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,iBAAjB,EAAoCC,iBAApC,EAAuDC,kBAAvD,EAA2EC,mBAA3E,QAAsG,WAAtG;AACA,SAASC,IAAT,QAAqB,UAArB;;AAEA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,IAAD,EAA4B;AAC9C,SAAOA,IAAI,IAAIF,IAAI,CAACG,KAAb,IAAsBD,IAAI,IAAIF,IAAI,CAACI,MAAnC,GAA4C,oBAA5C,GAAmE,oBAA1E;AACD,CAFD;;AAIA,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAACH,IAAD,EAAyBI,SAAzB,EAAwDC,KAAxD,EAA0E;AAC3F,UAAQL,IAAR;AACE,SAAKF,IAAI,CAACQ,MAAV;AACE,aAAOT,mBAAmB,CAACO,SAAD,EAAYC,KAAZ,CAA1B;;AACF,SAAKP,IAAI,CAACI,MAAV;AACE,aAAOR,iBAAiB,CAACU,SAAD,EAAYC,KAAZ,CAAxB;;AACF,SAAKP,IAAI,CAACG,KAAV;AACA;AACE,aAAON,iBAAiB,CAACS,SAAD,EAAYC,KAAZ,CAAxB;AAPJ;AASD,CAVD;;AAYA,OAAO,IAAME,kBAAkB,GAAGf,MAAM,CAACgB,KAAV,wFAC3B,UAACC,KAAD;AAAA,SAAWN,UAAU,CAACM,KAAK,CAACT,IAAP,EAAaJ,kBAAkB,CAACc,IAAhC,EAAsCjB,MAAM,CAACkB,WAA7C,CAArB;AAAA,CAD2B,EAE3B,UAACF,KAAD;AAAA,SAAWV,WAAW,CAACU,KAAK,CAACT,IAAP,CAAtB;AAAA,CAF2B,CAAxB;AAKP,OAAO,IAAMY,mBAAmB,GAAGpB,MAAM,CAACqB,GAAV,qTAO1B,UAACJ,KAAD;AAAA,SAAWN,UAAU,CAACM,KAAK,CAACT,IAAP,EAAaJ,kBAAkB,CAACkB,OAAhC,EAAyCrB,MAAM,CAACsB,WAAhD,CAArB;AAAA,CAP0B,EAQ1B,UAACN,KAAD;AAAA,SAAWV,WAAW,CAACU,KAAK,CAACT,IAAP,CAAtB;AAAA,CAR0B,EAY1B,UAACS,KAAD;AAAA,SAAWV,WAAW,CAACU,KAAK,CAACT,IAAP,CAAtB;AAAA,CAZ0B,EAgBnBP,MAAM,CAACuB,WAhBY,EAmBnBvB,MAAM,CAACwB,WAnBY,CAAzB","sourcesContent":["import styled from 'styled-components';\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling } from '../styles';\nimport { Size } from '../types';\n\nconst marginRight = (size: Size | undefined) => {\n  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;';\n};\n\nconst FontStyles = (size: Size | undefined, textStyle: ComponentTextStyle, color: string) => {\n  switch (size) {\n    case Size.XSmall:\n      return ComponentXXSStyling(textStyle, color);\n    case Size.Medium:\n      return ComponentMStyling(textStyle, color);\n    case Size.Small:\n    default:\n      return ComponentSStyling(textStyle, color);\n  }\n};\n\nexport const LastBreadcrumbItem = styled.label<{ size: Size }>`\n  ${(props) => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}\n  ${(props) => marginRight(props.size)}\n`;\n\nexport const BreadcrumbContainer = styled.div<{ size: Size | undefined }>`\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n\n  a {\n    text-decoration: none;\n    ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${(props) => marginRight(props.size)}\n  }\n\n  .chevronicon {\n    ${(props) => marginRight(props.size)}\n  }\n\n  a:hover {\n    color: ${COLORS.primary_700};\n  }\n  a:active {\n    color: ${COLORS.primary_800};\n  }\n`;\n"],"file":"styles.js"}