@laerdal/life-react-components 1.9.9-dev.41.full → 1.9.9-dev.43

package/dist/Accordion/AccordionItem.cjs

@@ -33,6 +33,8 @@ var AccordionItem = function AccordionItem(props) {
     id: id,
     displaySeparator: !isActive && !isLast,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ItemHeaderContainer, {
+      role: "button",
+      id: "itemHeaderFor_".concat(id),
       tabIndex: !disabled ? 0 : undefined,
       onClick: function onClick() {
         if (!disabled) {
@@ -56,6 +58,7 @@ var AccordionItem = function AccordionItem(props) {
         size: "20px"
       })]
     }), isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ItemBodyContainer, {
+      "aria-describedby": "itemHeaderFor_".concat(id),
       padding: props.padding,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentS, {
         children: props.children

package/dist/Accordion/AccordionItem.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Accordion/AccordionItem.tsx"],"names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","undefined","e","key","defaultOnMouseDownHandler","React","cloneElement","size","COLORS","neutral_800","neutral_600","padding","children"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;AASA,IAAMA,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;AAC1G,MAAQC,EAAR,GAAkED,KAAlE,CAAQC,EAAR;AAAA,MAAYC,QAAZ,GAAkEF,KAAlE,CAAYE,QAAZ;AAAA,MAAsBC,QAAtB,GAAkEH,KAAlE,CAAsBG,QAAtB;AAAA,MAAgCC,KAAhC,GAAkEJ,KAAlE,CAAgCI,KAAhC;AAAA,MAAuCC,IAAvC,GAAkEL,KAAlE,CAAuCK,IAAvC;AAAA,MAA6CC,QAA7C,GAAkEN,KAAlE,CAA6CM,QAA7C;AAAA,MAAuDC,MAAvD,GAAkEP,KAAlE,CAAuDO,MAAvD;AAEA,sBACE,sBAAC,8BAAD;AAAwB,IAAA,EAAE,EAAEN,EAA5B;AAAgC,IAAA,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;AAAA,4BACE,sBAAC,2BAAD;AACE,MAAA,QAAQ,EAAE,CAACD,QAAD,GAAY,CAAZ,GAAgBE,SAD5B;AAEE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAI,CAACF,QAAL,EAAe;AACbJ,UAAAA,QAAQ,CAACD,EAAD,CAAR;AACD;AACF,OANH;AAOE,MAAA,SAAS,EAAE,mBAACQ,CAAD,EAAY;AACrB,YAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuBR,QAAQ,CAACD,EAAD,CAAR;AACxB,OATH;AAUE,MAAA,WAAW,EAAEU,iCAVf;AAWE,MAAA,SAAS,EAAE,CAACR,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,CAXb;AAAA,iBAYGD,IAAI,iBAAIO,eAAMC,YAAN,CAAmBR,IAAnB,EAA+C;AAAES,QAAAA,IAAI,EAAE;AAAR,OAA/C,CAZX,eAaE;AAAA,kBAAOV;AAAP,QAbF,EAcGD,QAAQ,gBAAG,qBAAC,kBAAD,CAAa,SAAb;AAAuB,QAAA,KAAK,EAAEY,SAAOC,WAArC;AAAkD,QAAA,IAAI,EAAC;AAAvD,QAAH,gBAAsE,qBAAC,kBAAD,CAAa,WAAb;AAAyB,QAAA,KAAK,EAAED,SAAOE,WAAvC;AAAoD,QAAA,IAAI,EAAC;AAAzD,QAdjF;AAAA,MADF,EAiBGd,QAAQ,iBACP,qBAAC,yBAAD;AAAmB,MAAA,OAAO,EAAEH,KAAK,CAACkB,OAAlC;AAAA,6BACE,qBAAC,YAAD;AAAA,kBAAalB,KAAK,CAACmB;AAAnB;AADF,MAlBJ;AAAA,IADF;AAyBD,CA5BD;;;AANEjB,EAAAA,Q;AACAC,EAAAA,Q;AACAI,EAAAA,M;AACAW,EAAAA,O;;eAiCanB,a","sourcesContent":["import React from 'react';\nimport { COLORS, ComponentM, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n  onSelect: (id: string) => void;\n  isActive: boolean;\n  isLast: boolean;\n  padding?: string;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n  const { id, onSelect, isActive, title, icon, disabled, isLast } = props;\n\n  return (\n    <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n      <ItemHeaderContainer\n        tabIndex={!disabled ? 0 : undefined}\n        onClick={() => {\n          if (!disabled) {\n            onSelect(id);\n          }\n        }}\n        onKeyDown={(e: any) => {\n          if (e.key === 'Enter') onSelect(id);\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        className={(isActive ? 'active' : '') + (disabled ? ' disabled' : '')}>\n        {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n        <span>{title}</span>\n        {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n      </ItemHeaderContainer>\n      {isActive && (\n        <ItemBodyContainer padding={props.padding}>\n          <ComponentS>{props.children}</ComponentS>\n        </ItemBodyContainer>\n      )}\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.cjs"}
+{"version":3,"sources":["../../src/Accordion/AccordionItem.tsx"],"names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","undefined","e","key","defaultOnMouseDownHandler","React","cloneElement","size","COLORS","neutral_800","neutral_600","padding","children"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;AASA,IAAMA,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;AAC1G,MAAQC,EAAR,GAAkED,KAAlE,CAAQC,EAAR;AAAA,MAAYC,QAAZ,GAAkEF,KAAlE,CAAYE,QAAZ;AAAA,MAAsBC,QAAtB,GAAkEH,KAAlE,CAAsBG,QAAtB;AAAA,MAAgCC,KAAhC,GAAkEJ,KAAlE,CAAgCI,KAAhC;AAAA,MAAuCC,IAAvC,GAAkEL,KAAlE,CAAuCK,IAAvC;AAAA,MAA6CC,QAA7C,GAAkEN,KAAlE,CAA6CM,QAA7C;AAAA,MAAuDC,MAAvD,GAAkEP,KAAlE,CAAuDO,MAAvD;AAEA,sBACE,sBAAC,8BAAD;AAAwB,IAAA,EAAE,EAAEN,EAA5B;AAAgC,IAAA,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;AAAA,4BACE,sBAAC,2BAAD;AACE,MAAA,IAAI,EAAC,QADP;AAEE,MAAA,EAAE,0BAAmBN,EAAnB,CAFJ;AAGE,MAAA,QAAQ,EAAE,CAACK,QAAD,GAAY,CAAZ,GAAgBE,SAH5B;AAIE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAI,CAACF,QAAL,EAAe;AACbJ,UAAAA,QAAQ,CAACD,EAAD,CAAR;AACD;AACF,OARH;AASE,MAAA,SAAS,EAAE,mBAACQ,CAAD,EAAY;AACrB,YAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuBR,QAAQ,CAACD,EAAD,CAAR;AACxB,OAXH;AAYE,MAAA,WAAW,EAAEU,iCAZf;AAaE,MAAA,SAAS,EAAE,CAACR,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,CAbb;AAAA,iBAcGD,IAAI,iBAAIO,eAAMC,YAAN,CAAmBR,IAAnB,EAA+C;AAAES,QAAAA,IAAI,EAAE;AAAR,OAA/C,CAdX,eAeE;AAAA,kBAAOV;AAAP,QAfF,EAgBGD,QAAQ,gBAAG,qBAAC,kBAAD,CAAa,SAAb;AAAuB,QAAA,KAAK,EAAEY,SAAOC,WAArC;AAAkD,QAAA,IAAI,EAAC;AAAvD,QAAH,gBAAsE,qBAAC,kBAAD,CAAa,WAAb;AAAyB,QAAA,KAAK,EAAED,SAAOE,WAAvC;AAAoD,QAAA,IAAI,EAAC;AAAzD,QAhBjF;AAAA,MADF,EAmBGd,QAAQ,iBACP,qBAAC,yBAAD;AAAmB,kDAAmCF,EAAnC,CAAnB;AAA4D,MAAA,OAAO,EAAED,KAAK,CAACkB,OAA3E;AAAA,6BACE,qBAAC,YAAD;AAAA,kBAAalB,KAAK,CAACmB;AAAnB;AADF,MApBJ;AAAA,IADF;AA2BD,CA9BD;;;AANEjB,EAAAA,Q;AACAC,EAAAA,Q;AACAI,EAAAA,M;AACAW,EAAAA,O;;eAmCanB,a","sourcesContent":["import React from 'react';\nimport { COLORS, ComponentM, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n  onSelect: (id: string) => void;\n  isActive: boolean;\n  isLast: boolean;\n  padding?: string;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n  const { id, onSelect, isActive, title, icon, disabled, isLast } = props;\n\n  return (\n    <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n      <ItemHeaderContainer\n        role=\"button\"\n        id={`itemHeaderFor_${id}`}\n        tabIndex={!disabled ? 0 : undefined}\n        onClick={() => {\n          if (!disabled) {\n            onSelect(id);\n          }\n        }}\n        onKeyDown={(e: any) => {\n          if (e.key === 'Enter') onSelect(id);\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        className={(isActive ? 'active' : '') + (disabled ? ' disabled' : '')}>\n        {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n        <span>{title}</span>\n        {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n      </ItemHeaderContainer>\n      {isActive && (\n        <ItemBodyContainer aria-describedby={`itemHeaderFor_${id}`} padding={props.padding}>\n          <ComponentS>{props.children}</ComponentS>\n        </ItemBodyContainer>\n      )}\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.cjs"}

package/dist/Accordion/AccordionItem.js

@@ -19,6 +19,8 @@ var AccordionItem = function AccordionItem(props) {
     id: id,
     displaySeparator: !isActive && !isLast,
     children: [/*#__PURE__*/_jsxs(ItemHeaderContainer, {
+      role: "button",
+      id: "itemHeaderFor_".concat(id),
       tabIndex: !disabled ? 0 : undefined,
       onClick: function onClick() {
         if (!disabled) {
@@ -42,6 +44,7 @@ var AccordionItem = function AccordionItem(props) {
         size: "20px"
       })]
     }), isActive && /*#__PURE__*/_jsx(ItemBodyContainer, {
+      "aria-describedby": "itemHeaderFor_".concat(id),
       padding: props.padding,
       children: /*#__PURE__*/_jsx(ComponentS, {
         children: props.children

package/dist/Accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Accordion/AccordionItem.tsx"],"names":["React","COLORS","ComponentS","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","defaultOnMouseDownHandler","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","undefined","e","key","cloneElement","size","neutral_800","neutral_600","padding","children"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,EAA6BC,UAA7B,QAA+C,IAA/C;AACA,SAASC,WAAT,QAA4B,UAA5B;AAEA,SAASC,sBAAT,EAAiCC,iBAAjC,EAAoDC,mBAApD,QAA+E,UAA/E;AACA,SAASC,yBAAT,QAA0C,WAA1C;;;;AASA,IAAMC,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;AAC1G,MAAQC,EAAR,GAAkED,KAAlE,CAAQC,EAAR;AAAA,MAAYC,QAAZ,GAAkEF,KAAlE,CAAYE,QAAZ;AAAA,MAAsBC,QAAtB,GAAkEH,KAAlE,CAAsBG,QAAtB;AAAA,MAAgCC,KAAhC,GAAkEJ,KAAlE,CAAgCI,KAAhC;AAAA,MAAuCC,IAAvC,GAAkEL,KAAlE,CAAuCK,IAAvC;AAAA,MAA6CC,QAA7C,GAAkEN,KAAlE,CAA6CM,QAA7C;AAAA,MAAuDC,MAAvD,GAAkEP,KAAlE,CAAuDO,MAAvD;AAEA,sBACE,MAAC,sBAAD;AAAwB,IAAA,EAAE,EAAEN,EAA5B;AAAgC,IAAA,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;AAAA,4BACE,MAAC,mBAAD;AACE,MAAA,QAAQ,EAAE,CAACD,QAAD,GAAY,CAAZ,GAAgBE,SAD5B;AAEE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAI,CAACF,QAAL,EAAe;AACbJ,UAAAA,QAAQ,CAACD,EAAD,CAAR;AACD;AACF,OANH;AAOE,MAAA,SAAS,EAAE,mBAACQ,CAAD,EAAY;AACrB,YAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuBR,QAAQ,CAACD,EAAD,CAAR;AACxB,OATH;AAUE,MAAA,WAAW,EAAEH,yBAVf;AAWE,MAAA,SAAS,EAAE,CAACK,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,CAXb;AAAA,iBAYGD,IAAI,iBAAId,KAAK,CAACoB,YAAN,CAAmBN,IAAnB,EAA+C;AAAEO,QAAAA,IAAI,EAAE;AAAR,OAA/C,CAZX,eAaE;AAAA,kBAAOR;AAAP,QAbF,EAcGD,QAAQ,gBAAG,KAAC,WAAD,CAAa,SAAb;AAAuB,QAAA,KAAK,EAAEX,MAAM,CAACqB,WAArC;AAAkD,QAAA,IAAI,EAAC;AAAvD,QAAH,gBAAsE,KAAC,WAAD,CAAa,WAAb;AAAyB,QAAA,KAAK,EAAErB,MAAM,CAACsB,WAAvC;AAAoD,QAAA,IAAI,EAAC;AAAzD,QAdjF;AAAA,MADF,EAiBGX,QAAQ,iBACP,KAAC,iBAAD;AAAmB,MAAA,OAAO,EAAEH,KAAK,CAACe,OAAlC;AAAA,6BACE,KAAC,UAAD;AAAA,kBAAaf,KAAK,CAACgB;AAAnB;AADF,MAlBJ;AAAA,IADF;AAyBD,CA5BD;;;AANEd,EAAAA,Q;AACAC,EAAAA,Q;AACAI,EAAAA,M;AACAQ,EAAAA,O;;AAiCF,eAAehB,aAAf","sourcesContent":["import React from 'react';\nimport { COLORS, ComponentM, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n  onSelect: (id: string) => void;\n  isActive: boolean;\n  isLast: boolean;\n  padding?: string;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n  const { id, onSelect, isActive, title, icon, disabled, isLast } = props;\n\n  return (\n    <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n      <ItemHeaderContainer\n        tabIndex={!disabled ? 0 : undefined}\n        onClick={() => {\n          if (!disabled) {\n            onSelect(id);\n          }\n        }}\n        onKeyDown={(e: any) => {\n          if (e.key === 'Enter') onSelect(id);\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        className={(isActive ? 'active' : '') + (disabled ? ' disabled' : '')}>\n        {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n        <span>{title}</span>\n        {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n      </ItemHeaderContainer>\n      {isActive && (\n        <ItemBodyContainer padding={props.padding}>\n          <ComponentS>{props.children}</ComponentS>\n        </ItemBodyContainer>\n      )}\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.js"}
+{"version":3,"sources":["../../src/Accordion/AccordionItem.tsx"],"names":["React","COLORS","ComponentS","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","defaultOnMouseDownHandler","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","undefined","e","key","cloneElement","size","neutral_800","neutral_600","padding","children"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,EAA6BC,UAA7B,QAA+C,IAA/C;AACA,SAASC,WAAT,QAA4B,UAA5B;AAEA,SAASC,sBAAT,EAAiCC,iBAAjC,EAAoDC,mBAApD,QAA+E,UAA/E;AACA,SAASC,yBAAT,QAA0C,WAA1C;;;;AASA,IAAMC,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;AAC1G,MAAQC,EAAR,GAAkED,KAAlE,CAAQC,EAAR;AAAA,MAAYC,QAAZ,GAAkEF,KAAlE,CAAYE,QAAZ;AAAA,MAAsBC,QAAtB,GAAkEH,KAAlE,CAAsBG,QAAtB;AAAA,MAAgCC,KAAhC,GAAkEJ,KAAlE,CAAgCI,KAAhC;AAAA,MAAuCC,IAAvC,GAAkEL,KAAlE,CAAuCK,IAAvC;AAAA,MAA6CC,QAA7C,GAAkEN,KAAlE,CAA6CM,QAA7C;AAAA,MAAuDC,MAAvD,GAAkEP,KAAlE,CAAuDO,MAAvD;AAEA,sBACE,MAAC,sBAAD;AAAwB,IAAA,EAAE,EAAEN,EAA5B;AAAgC,IAAA,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;AAAA,4BACE,MAAC,mBAAD;AACE,MAAA,IAAI,EAAC,QADP;AAEE,MAAA,EAAE,0BAAmBN,EAAnB,CAFJ;AAGE,MAAA,QAAQ,EAAE,CAACK,QAAD,GAAY,CAAZ,GAAgBE,SAH5B;AAIE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAI,CAACF,QAAL,EAAe;AACbJ,UAAAA,QAAQ,CAACD,EAAD,CAAR;AACD;AACF,OARH;AASE,MAAA,SAAS,EAAE,mBAACQ,CAAD,EAAY;AACrB,YAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuBR,QAAQ,CAACD,EAAD,CAAR;AACxB,OAXH;AAYE,MAAA,WAAW,EAAEH,yBAZf;AAaE,MAAA,SAAS,EAAE,CAACK,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,CAbb;AAAA,iBAcGD,IAAI,iBAAId,KAAK,CAACoB,YAAN,CAAmBN,IAAnB,EAA+C;AAAEO,QAAAA,IAAI,EAAE;AAAR,OAA/C,CAdX,eAeE;AAAA,kBAAOR;AAAP,QAfF,EAgBGD,QAAQ,gBAAG,KAAC,WAAD,CAAa,SAAb;AAAuB,QAAA,KAAK,EAAEX,MAAM,CAACqB,WAArC;AAAkD,QAAA,IAAI,EAAC;AAAvD,QAAH,gBAAsE,KAAC,WAAD,CAAa,WAAb;AAAyB,QAAA,KAAK,EAAErB,MAAM,CAACsB,WAAvC;AAAoD,QAAA,IAAI,EAAC;AAAzD,QAhBjF;AAAA,MADF,EAmBGX,QAAQ,iBACP,KAAC,iBAAD;AAAmB,kDAAmCF,EAAnC,CAAnB;AAA4D,MAAA,OAAO,EAAED,KAAK,CAACe,OAA3E;AAAA,6BACE,KAAC,UAAD;AAAA,kBAAaf,KAAK,CAACgB;AAAnB;AADF,MApBJ;AAAA,IADF;AA2BD,CA9BD;;;AANEd,EAAAA,Q;AACAC,EAAAA,Q;AACAI,EAAAA,M;AACAQ,EAAAA,O;;AAmCF,eAAehB,aAAf","sourcesContent":["import React from 'react';\nimport { COLORS, ComponentM, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n  onSelect: (id: string) => void;\n  isActive: boolean;\n  isLast: boolean;\n  padding?: string;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n  const { id, onSelect, isActive, title, icon, disabled, isLast } = props;\n\n  return (\n    <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n      <ItemHeaderContainer\n        role=\"button\"\n        id={`itemHeaderFor_${id}`}\n        tabIndex={!disabled ? 0 : undefined}\n        onClick={() => {\n          if (!disabled) {\n            onSelect(id);\n          }\n        }}\n        onKeyDown={(e: any) => {\n          if (e.key === 'Enter') onSelect(id);\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        className={(isActive ? 'active' : '') + (disabled ? ' disabled' : '')}>\n        {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n        <span>{title}</span>\n        {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n      </ItemHeaderContainer>\n      {isActive && (\n        <ItemBodyContainer aria-describedby={`itemHeaderFor_${id}`} padding={props.padding}>\n          <ComponentS>{props.children}</ComponentS>\n        </ItemBodyContainer>\n      )}\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.js"}

package/dist/Accordion/AccordionMenu.cjs

@@ -70,6 +70,9 @@ var AccordionMenu = function AccordionMenu(_ref) {
         disabled: item.disabled,
         id: item.id,
         title: item.title,
+        "aria-expanded": !!getCollection().find(function (x) {
+          return x == item.id;
+        }),
         icon: item.icon,
         isActive: !!getCollection().find(function (x) {
           return x == item.id;

package/dist/Accordion/AccordionMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Accordion/AccordionMenu.tsx"],"names":["AccordionMenu","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","React","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","item","disabled","title","icon","indexOf","length","children"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAmBA,IAAMA,aAAsD,GAAG,SAAzDA,aAAyD,OAAmG;AAAA,MAAhGC,KAAgG,QAAhGA,KAAgG;AAAA,MAAzFC,aAAyF,QAAzFA,aAAyF;AAAA,MAA1EC,gBAA0E,QAA1EA,gBAA0E;AAAA,MAAxDC,QAAwD,QAAxDA,QAAwD;AAAA,MAA9CC,cAA8C,QAA9CA,cAA8C;AAAA,MAA9BC,OAA8B,QAA9BA,OAA8B;;AAChK,wBAAwDC,KAAK,CAACC,QAAN,CAAyB,EAAzB,CAAxD;AAAA;AAAA,MAAOC,oBAAP;AAAA,MAA6BC,uBAA7B;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AAC1B,WAAOT,aAAa,GAAGA,aAAH,GAAmBO,oBAAvC;AACD,GAFD;;AAIA,MAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AAC9B,WAAOT,gBAAgB,GAAGA,gBAAH,GAAsBO,uBAA7C;AACD,GAFD;;AAIA,MAAMG,UAAU,GAAG,SAAbA,UAAa,CAACC,EAAD,EAAgB;AACjC,QAAMC,UAAU,GAAGJ,aAAa,EAAhC;AACA,QAAMK,UAAU,GAAGJ,iBAAiB,EAApC;AAEA,QAAMK,QAAQ,GAAG,CAAC,CAACF,UAAU,CAACG,IAAX,CAAgB,UAACC,CAAD;AAAA,aAAOA,CAAC,IAAIL,EAAZ;AAAA,KAAhB,CAAnB;;AACA,QAAIT,cAAJ,EAAoB;AAClB,UAAIY,QAAJ,EAAcD,UAAU,CAACD,UAAU,CAACK,MAAX,CAAkB,UAACD,CAAD;AAAA,eAAOA,CAAC,IAAIL,EAAZ;AAAA,OAAlB,CAAD,CAAV,CAAd,KACKE,UAAU,4CAAKD,UAAL,IAAiBD,EAAjB,GAAV;AACN,KAHD,MAGOE,UAAU,CAACC,QAAQ,GAAG,EAAH,GAAQ,CAACH,EAAD,CAAjB,CAAV;;AAEPV,IAAAA,QAAQ,IAAIA,QAAQ,CAACU,EAAD,CAApB;AACD,GAXD;;AAaA,sBACE,qBAAC,4BAAD;AAAA,cACGb,KAAK,CAACoB,GAAN,CAAU,UAACC,IAAD;AAAA,0BACT,qBAAC,sBAAD;AAEE,QAAA,QAAQ,EAAEA,IAAI,CAACC,QAFjB;AAGE,QAAA,EAAE,EAAED,IAAI,CAACR,EAHX;AAIE,QAAA,KAAK,EAAEQ,IAAI,CAACE,KAJd;AAKE,QAAA,IAAI,EAAEF,IAAI,CAACG,IALb;AAME,QAAA,QAAQ,EAAE,CAAC,CAACd,aAAa,GAAGO,IAAhB,CAAqB,UAACC,CAAD;AAAA,iBAAOA,CAAC,IAAIG,IAAI,CAACR,EAAjB;AAAA,SAArB,CANd;AAOE,QAAA,MAAM,EAAEb,KAAK,CAACyB,OAAN,CAAcJ,IAAd,MAAwBrB,KAAK,CAAC0B,MAAN,GAAe,CAPjD;AAQE,QAAA,QAAQ,EAAEd,UARZ;AASE,QAAA,OAAO,EAAEP,OATX;AAAA,kBAUGgB,IAAI,CAACM;AAVR,SACON,IAAI,CAACR,EADZ,CADS;AAAA,KAAV;AADH,IADF;AAkBD,CA1CD;;;AAhBEb,EAAAA,K;AASAa,IAAAA,E;AACAS,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,I;AACAG,IAAAA,Q;;AAZA1B,EAAAA,a;AACAC,EAAAA,gB;AACAC,EAAAA,Q;AACAC,EAAAA,c;AACAC,EAAAA,O;;eAuDaN,a","sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps {\n  items: AccordionItemProps[];\n  selectedItems?: string[];\n  setSelectedItems?: (a: string[]) => void;\n  onSelect?: (id: string) => void;\n  multipleActive?: boolean;\n  padding?: string;\n}\n\nexport interface AccordionItemProps {\n  id: string;\n  disabled?: boolean;\n  title: string;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = ({ items, selectedItems, setSelectedItems, onSelect, multipleActive, padding }: AccordionProps) => {\n  const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n  const getCollection = () => {\n    return selectedItems ? selectedItems : builtinSelectedItems;\n  };\n\n  const getUpdateFunction = () => {\n    return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n  };\n\n  const onSelected = (id: string) => {\n    const collection = getCollection();\n    const updateFunc = getUpdateFunction();\n\n    const isActive = !!collection.find((x) => x == id);\n    if (multipleActive) {\n      if (isActive) updateFunc(collection.filter((x) => x != id));\n      else updateFunc([...collection, id]);\n    } else updateFunc(isActive ? [] : [id]);\n\n    onSelect && onSelect(id);\n  };\n\n  return (\n    <AccordionMenuWrapper>\n      {items.map((item) => (\n        <AccordionItem\n          key={item.id}\n          disabled={item.disabled}\n          id={item.id}\n          title={item.title}\n          icon={item.icon}\n          isActive={!!getCollection().find((x) => x == item.id)}\n          isLast={items.indexOf(item) === items.length - 1}\n          onSelect={onSelected}\n          padding={padding}>\n          {item.children}\n        </AccordionItem>\n      ))}\n    </AccordionMenuWrapper>\n  );\n};\n\nexport default AccordionMenu;\n"],"file":"AccordionMenu.cjs"}
+{"version":3,"sources":["../../src/Accordion/AccordionMenu.tsx"],"names":["AccordionMenu","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","React","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","item","disabled","title","icon","indexOf","length","children"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAmBA,IAAMA,aAAsD,GAAG,SAAzDA,aAAyD,OAAmG;AAAA,MAAhGC,KAAgG,QAAhGA,KAAgG;AAAA,MAAzFC,aAAyF,QAAzFA,aAAyF;AAAA,MAA1EC,gBAA0E,QAA1EA,gBAA0E;AAAA,MAAxDC,QAAwD,QAAxDA,QAAwD;AAAA,MAA9CC,cAA8C,QAA9CA,cAA8C;AAAA,MAA9BC,OAA8B,QAA9BA,OAA8B;;AAChK,wBAAwDC,KAAK,CAACC,QAAN,CAAyB,EAAzB,CAAxD;AAAA;AAAA,MAAOC,oBAAP;AAAA,MAA6BC,uBAA7B;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AAC1B,WAAOT,aAAa,GAAGA,aAAH,GAAmBO,oBAAvC;AACD,GAFD;;AAIA,MAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AAC9B,WAAOT,gBAAgB,GAAGA,gBAAH,GAAsBO,uBAA7C;AACD,GAFD;;AAIA,MAAMG,UAAU,GAAG,SAAbA,UAAa,CAACC,EAAD,EAAgB;AACjC,QAAMC,UAAU,GAAGJ,aAAa,EAAhC;AACA,QAAMK,UAAU,GAAGJ,iBAAiB,EAApC;AAEA,QAAMK,QAAQ,GAAG,CAAC,CAACF,UAAU,CAACG,IAAX,CAAgB,UAACC,CAAD;AAAA,aAAOA,CAAC,IAAIL,EAAZ;AAAA,KAAhB,CAAnB;;AACA,QAAIT,cAAJ,EAAoB;AAClB,UAAIY,QAAJ,EAAcD,UAAU,CAACD,UAAU,CAACK,MAAX,CAAkB,UAACD,CAAD;AAAA,eAAOA,CAAC,IAAIL,EAAZ;AAAA,OAAlB,CAAD,CAAV,CAAd,KACKE,UAAU,4CAAKD,UAAL,IAAiBD,EAAjB,GAAV;AACN,KAHD,MAGOE,UAAU,CAACC,QAAQ,GAAG,EAAH,GAAQ,CAACH,EAAD,CAAjB,CAAV;;AAEPV,IAAAA,QAAQ,IAAIA,QAAQ,CAACU,EAAD,CAApB;AACD,GAXD;;AAaA,sBACE,qBAAC,4BAAD;AAAA,cACGb,KAAK,CAACoB,GAAN,CAAU,UAACC,IAAD;AAAA,0BACT,qBAAC,sBAAD;AAEE,QAAA,QAAQ,EAAEA,IAAI,CAACC,QAFjB;AAGE,QAAA,EAAE,EAAED,IAAI,CAACR,EAHX;AAIE,QAAA,KAAK,EAAEQ,IAAI,CAACE,KAJd;AAKE,yBAAe,CAAC,CAACb,aAAa,GAAGO,IAAhB,CAAqB,UAACC,CAAD;AAAA,iBAAOA,CAAC,IAAIG,IAAI,CAACR,EAAjB;AAAA,SAArB,CALnB;AAME,QAAA,IAAI,EAAEQ,IAAI,CAACG,IANb;AAOE,QAAA,QAAQ,EAAE,CAAC,CAACd,aAAa,GAAGO,IAAhB,CAAqB,UAACC,CAAD;AAAA,iBAAOA,CAAC,IAAIG,IAAI,CAACR,EAAjB;AAAA,SAArB,CAPd;AAQE,QAAA,MAAM,EAAEb,KAAK,CAACyB,OAAN,CAAcJ,IAAd,MAAwBrB,KAAK,CAAC0B,MAAN,GAAe,CARjD;AASE,QAAA,QAAQ,EAAEd,UATZ;AAUE,QAAA,OAAO,EAAEP,OAVX;AAAA,kBAWGgB,IAAI,CAACM;AAXR,SACON,IAAI,CAACR,EADZ,CADS;AAAA,KAAV;AADH,IADF;AAmBD,CA3CD;;;AAhBEb,EAAAA,K;AASAa,IAAAA,E;AACAS,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,I;AACAG,IAAAA,Q;;AAZA1B,EAAAA,a;AACAC,EAAAA,gB;AACAC,EAAAA,Q;AACAC,EAAAA,c;AACAC,EAAAA,O;;eAwDaN,a","sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps {\n  items: AccordionItemProps[];\n  selectedItems?: string[];\n  setSelectedItems?: (a: string[]) => void;\n  onSelect?: (id: string) => void;\n  multipleActive?: boolean;\n  padding?: string;\n}\n\nexport interface AccordionItemProps extends React.AriaAttributes {\n  id: string;\n  disabled?: boolean;\n  title: string;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = ({ items, selectedItems, setSelectedItems, onSelect, multipleActive, padding }: AccordionProps) => {\n  const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n  const getCollection = () => {\n    return selectedItems ? selectedItems : builtinSelectedItems;\n  };\n\n  const getUpdateFunction = () => {\n    return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n  };\n\n  const onSelected = (id: string) => {\n    const collection = getCollection();\n    const updateFunc = getUpdateFunction();\n\n    const isActive = !!collection.find((x) => x == id);\n    if (multipleActive) {\n      if (isActive) updateFunc(collection.filter((x) => x != id));\n      else updateFunc([...collection, id]);\n    } else updateFunc(isActive ? [] : [id]);\n\n    onSelect && onSelect(id);\n  };\n\n  return (\n    <AccordionMenuWrapper>\n      {items.map((item) => (\n        <AccordionItem\n          key={item.id}\n          disabled={item.disabled}\n          id={item.id}\n          title={item.title}\n          aria-expanded={!!getCollection().find((x) => x == item.id)}\n          icon={item.icon}\n          isActive={!!getCollection().find((x) => x == item.id)}\n          isLast={items.indexOf(item) === items.length - 1}\n          onSelect={onSelected}\n          padding={padding}>\n          {item.children}\n        </AccordionItem>\n      ))}\n    </AccordionMenuWrapper>\n  );\n};\n\nexport default AccordionMenu;\n"],"file":"AccordionMenu.cjs"}

package/dist/Accordion/AccordionMenu.d.ts

@@ -7,7 +7,7 @@ export interface AccordionProps {
     multipleActive?: boolean;
     padding?: string;
 }
-export interface AccordionItemProps {
+export interface AccordionItemProps extends React.AriaAttributes {
     id: string;
     disabled?: boolean;
     title: string;

package/dist/Accordion/AccordionMenu.js

@@ -49,6 +49,9 @@ var AccordionMenu = function AccordionMenu(_ref) {
         disabled: item.disabled,
         id: item.id,
         title: item.title,
+        "aria-expanded": !!getCollection().find(function (x) {
+          return x == item.id;
+        }),
         icon: item.icon,
         isActive: !!getCollection().find(function (x) {
           return x == item.id;

package/dist/Accordion/AccordionMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Accordion/AccordionMenu.tsx"],"names":["React","AccordionItem","AccordionMenuWrapper","AccordionMenu","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","item","disabled","title","icon","indexOf","length","children"],"mappings":";;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,SAASC,oBAAT,QAAqC,UAArC;;;AAmBA,IAAMC,aAAsD,GAAG,SAAzDA,aAAyD,OAAmG;AAAA,MAAhGC,KAAgG,QAAhGA,KAAgG;AAAA,MAAzFC,aAAyF,QAAzFA,aAAyF;AAAA,MAA1EC,gBAA0E,QAA1EA,gBAA0E;AAAA,MAAxDC,QAAwD,QAAxDA,QAAwD;AAAA,MAA9CC,cAA8C,QAA9CA,cAA8C;AAAA,MAA9BC,OAA8B,QAA9BA,OAA8B;;AAChK,wBAAwDT,KAAK,CAACU,QAAN,CAAyB,EAAzB,CAAxD;AAAA;AAAA,MAAOC,oBAAP;AAAA,MAA6BC,uBAA7B;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AAC1B,WAAOR,aAAa,GAAGA,aAAH,GAAmBM,oBAAvC;AACD,GAFD;;AAIA,MAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AAC9B,WAAOR,gBAAgB,GAAGA,gBAAH,GAAsBM,uBAA7C;AACD,GAFD;;AAIA,MAAMG,UAAU,GAAG,SAAbA,UAAa,CAACC,EAAD,EAAgB;AACjC,QAAMC,UAAU,GAAGJ,aAAa,EAAhC;AACA,QAAMK,UAAU,GAAGJ,iBAAiB,EAApC;AAEA,QAAMK,QAAQ,GAAG,CAAC,CAACF,UAAU,CAACG,IAAX,CAAgB,UAACC,CAAD;AAAA,aAAOA,CAAC,IAAIL,EAAZ;AAAA,KAAhB,CAAnB;;AACA,QAAIR,cAAJ,EAAoB;AAClB,UAAIW,QAAJ,EAAcD,UAAU,CAACD,UAAU,CAACK,MAAX,CAAkB,UAACD,CAAD;AAAA,eAAOA,CAAC,IAAIL,EAAZ;AAAA,OAAlB,CAAD,CAAV,CAAd,KACKE,UAAU,8BAAKD,UAAL,IAAiBD,EAAjB,GAAV;AACN,KAHD,MAGOE,UAAU,CAACC,QAAQ,GAAG,EAAH,GAAQ,CAACH,EAAD,CAAjB,CAAV;;AAEPT,IAAAA,QAAQ,IAAIA,QAAQ,CAACS,EAAD,CAApB;AACD,GAXD;;AAaA,sBACE,KAAC,oBAAD;AAAA,cACGZ,KAAK,CAACmB,GAAN,CAAU,UAACC,IAAD;AAAA,0BACT,KAAC,aAAD;AAEE,QAAA,QAAQ,EAAEA,IAAI,CAACC,QAFjB;AAGE,QAAA,EAAE,EAAED,IAAI,CAACR,EAHX;AAIE,QAAA,KAAK,EAAEQ,IAAI,CAACE,KAJd;AAKE,QAAA,IAAI,EAAEF,IAAI,CAACG,IALb;AAME,QAAA,QAAQ,EAAE,CAAC,CAACd,aAAa,GAAGO,IAAhB,CAAqB,UAACC,CAAD;AAAA,iBAAOA,CAAC,IAAIG,IAAI,CAACR,EAAjB;AAAA,SAArB,CANd;AAOE,QAAA,MAAM,EAAEZ,KAAK,CAACwB,OAAN,CAAcJ,IAAd,MAAwBpB,KAAK,CAACyB,MAAN,GAAe,CAPjD;AAQE,QAAA,QAAQ,EAAEd,UARZ;AASE,QAAA,OAAO,EAAEN,OATX;AAAA,kBAUGe,IAAI,CAACM;AAVR,SACON,IAAI,CAACR,EADZ,CADS;AAAA,KAAV;AADH,IADF;AAkBD,CA1CD;;;AAhBEZ,EAAAA,K;AASAY,IAAAA,E;AACAS,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,I;AACAG,IAAAA,Q;;AAZAzB,EAAAA,a;AACAC,EAAAA,gB;AACAC,EAAAA,Q;AACAC,EAAAA,c;AACAC,EAAAA,O;;AAuDF,eAAeN,aAAf","sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps {\n  items: AccordionItemProps[];\n  selectedItems?: string[];\n  setSelectedItems?: (a: string[]) => void;\n  onSelect?: (id: string) => void;\n  multipleActive?: boolean;\n  padding?: string;\n}\n\nexport interface AccordionItemProps {\n  id: string;\n  disabled?: boolean;\n  title: string;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = ({ items, selectedItems, setSelectedItems, onSelect, multipleActive, padding }: AccordionProps) => {\n  const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n  const getCollection = () => {\n    return selectedItems ? selectedItems : builtinSelectedItems;\n  };\n\n  const getUpdateFunction = () => {\n    return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n  };\n\n  const onSelected = (id: string) => {\n    const collection = getCollection();\n    const updateFunc = getUpdateFunction();\n\n    const isActive = !!collection.find((x) => x == id);\n    if (multipleActive) {\n      if (isActive) updateFunc(collection.filter((x) => x != id));\n      else updateFunc([...collection, id]);\n    } else updateFunc(isActive ? [] : [id]);\n\n    onSelect && onSelect(id);\n  };\n\n  return (\n    <AccordionMenuWrapper>\n      {items.map((item) => (\n        <AccordionItem\n          key={item.id}\n          disabled={item.disabled}\n          id={item.id}\n          title={item.title}\n          icon={item.icon}\n          isActive={!!getCollection().find((x) => x == item.id)}\n          isLast={items.indexOf(item) === items.length - 1}\n          onSelect={onSelected}\n          padding={padding}>\n          {item.children}\n        </AccordionItem>\n      ))}\n    </AccordionMenuWrapper>\n  );\n};\n\nexport default AccordionMenu;\n"],"file":"AccordionMenu.js"}
+{"version":3,"sources":["../../src/Accordion/AccordionMenu.tsx"],"names":["React","AccordionItem","AccordionMenuWrapper","AccordionMenu","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","item","disabled","title","icon","indexOf","length","children"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps {\n  items: AccordionItemProps[];\n  selectedItems?: string[];\n  setSelectedItems?: (a: string[]) => void;\n  onSelect?: (id: string) => void;\n  multipleActive?: boolean;\n  padding?: string;\n}\n\nexport interface AccordionItemProps extends React.AriaAttributes {\n  id: string;\n  disabled?: boolean;\n  title: string;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = ({ items, selectedItems, setSelectedItems, onSelect, multipleActive, padding }: AccordionProps) => {\n  const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n  const getCollection = () => {\n    return selectedItems ? selectedItems : builtinSelectedItems;\n  };\n\n  const getUpdateFunction = () => {\n    return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n  };\n\n  const onSelected = (id: string) => {\n    const collection = getCollection();\n    const updateFunc = getUpdateFunction();\n\n    const isActive = !!collection.find((x) => x == id);\n    if (multipleActive) {\n      if (isActive) updateFunc(collection.filter((x) => x != id));\n      else updateFunc([...collection, id]);\n    } else updateFunc(isActive ? [] : [id]);\n\n    onSelect && onSelect(id);\n  };\n\n  return (\n    <AccordionMenuWrapper>\n      {items.map((item) => (\n        <AccordionItem\n          key={item.id}\n          disabled={item.disabled}\n          id={item.id}\n          title={item.title}\n          aria-expanded={!!getCollection().find((x) => x == item.id)}\n          icon={item.icon}\n          isActive={!!getCollection().find((x) => x == item.id)}\n          isLast={items.indexOf(item) === items.length - 1}\n          onSelect={onSelected}\n          padding={padding}>\n          {item.children}\n        </AccordionItem>\n      ))}\n    </AccordionMenuWrapper>\n  );\n};\n\nexport default AccordionMenu;\n"],"file":"AccordionMenu.js"}

package/dist/Accordion/ContentAccordion.cjs

@@ -84,14 +84,14 @@ var ContentAccordion = function ContentAccordion(props) {
       setOpened(props.items.filter(function (item) {
         return item.active;
       }).map(function (item) {
-        return item.key;
+        return item.id;
       }));
     } else {
       var _props$items$find;
 
       var active = (_props$items$find = props.items.find(function (item) {
         return !!item.active;
-      })) === null || _props$items$find === void 0 ? void 0 : _props$items$find.key;
+      })) === null || _props$items$find === void 0 ? void 0 : _props$items$find.id;
 
       if (active) {
         setOpened([active]);
@@ -102,25 +102,27 @@ var ContentAccordion = function ContentAccordion(props) {
   var onItemClick = function onItemClick(item) {
     if (item.disabled) return;
 
-    if (opened.includes(item.key)) {
+    if (opened.includes(item.id)) {
       setOpened(opened.filter(function (key) {
-        return key !== item.key;
+        return key !== item.id;
       }));
     } else {
       if (props.multi) {
-        setOpened([].concat((0, _toConsumableArray2.default)(opened), [item.key]));
+        setOpened([].concat((0, _toConsumableArray2.default)(opened), [item.id]));
       } else {
-        setOpened([item.key]);
+        setOpened([item.id]);
       }
     }
   };
 
   var renderItem = function renderItem(item) {
-    var isActive = opened.includes(item.key);
+    var isActive = opened.includes(item.id);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItem, {
-      id: "item_".concat(item.key),
+      id: "item_".concat(item.id),
       className: ''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : ''),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItemHeader, {
+        role: "button",
+        id: "headerFor_".concat(item.id),
         tabIndex: !item.disabled ? 0 : undefined,
         onMouseDown: _common.defaultOnMouseDownHandler,
         onClick: function onClick() {
@@ -135,6 +137,7 @@ var ContentAccordion = function ContentAccordion(props) {
           children: item.title
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItemContent, {
+        "aria-describedby": "headerFor_".concat(item.id),
         children: [item.header && /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemContentHeader, {
           children: item.header
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemContentBody, {
@@ -143,7 +146,7 @@ var ContentAccordion = function ContentAccordion(props) {
           children: item.footer
         })]
       })]
-    }, item.key);
+    }, item.id);
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionWrapper, {
@@ -157,7 +160,7 @@ var ContentAccordion = function ContentAccordion(props) {
 exports.ContentAccordion = ContentAccordion;
 ContentAccordion.propTypes = {
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
-    key: _propTypes.default.string.isRequired,
+    id: _propTypes.default.string.isRequired,
     title: _propTypes.default.string.isRequired,
     header: _propTypes.default.string,
     body: _propTypes.default.any.isRequired,

package/dist/Accordion/ContentAccordion.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","focusStyles","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentTextStyle","Regular","Bold","black","ParagraphTextStyle","ContentAccordion","props","React","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","defaultOnMouseDownHandler","event","title","header","body","footer","size","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 {\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  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  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} id={`item_${item.key}`} className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\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>\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.cjs"}
+{"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","focusStyles","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentTextStyle","Regular","Bold","black","ParagraphTextStyle","ContentAccordion","props","React","useState","opened","setOpened","useEffect","multi","items","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","isActive","concat","undefined","defaultOnMouseDownHandler","event","title","header","body","footer","size","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 {\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.cjs"}

package/dist/Accordion/ContentAccordion.d.ts

@@ -10,7 +10,7 @@ export declare const ContentAccordionItemContentFooter: import("styled-component
 export declare const ContentAccordionItem: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContentAccordionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export interface ContentAccordionItem {
-    key: string;
+    id: string;
     title: string;
     header?: string;
     body: any;

package/dist/Accordion/ContentAccordion.js

@@ -37,14 +37,14 @@ export var ContentAccordion = function ContentAccordion(props) {
       setOpened(props.items.filter(function (item) {
         return item.active;
       }).map(function (item) {
-        return item.key;
+        return item.id;
       }));
     } else {
       var _props$items$find;
 
       var active = (_props$items$find = props.items.find(function (item) {
         return !!item.active;
-      })) === null || _props$items$find === void 0 ? void 0 : _props$items$find.key;
+      })) === null || _props$items$find === void 0 ? void 0 : _props$items$find.id;
 
       if (active) {
         setOpened([active]);
@@ -55,25 +55,27 @@ export var ContentAccordion = function ContentAccordion(props) {
   var onItemClick = function onItemClick(item) {
     if (item.disabled) return;
 
-    if (opened.includes(item.key)) {
+    if (opened.includes(item.id)) {
       setOpened(opened.filter(function (key) {
-        return key !== item.key;
+        return key !== item.id;
       }));
     } else {
       if (props.multi) {
-        setOpened([].concat(_toConsumableArray(opened), [item.key]));
+        setOpened([].concat(_toConsumableArray(opened), [item.id]));
       } else {
-        setOpened([item.key]);
+        setOpened([item.id]);
       }
     }
   };
 
   var renderItem = function renderItem(item) {
-    var isActive = opened.includes(item.key);
+    var isActive = opened.includes(item.id);
     return /*#__PURE__*/_jsxs(ContentAccordionItem, {
-      id: "item_".concat(item.key),
+      id: "item_".concat(item.id),
       className: ''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : ''),
       children: [/*#__PURE__*/_jsxs(ContentAccordionItemHeader, {
+        role: "button",
+        id: "headerFor_".concat(item.id),
         tabIndex: !item.disabled ? 0 : undefined,
         onMouseDown: defaultOnMouseDownHandler,
         onClick: function onClick() {
@@ -88,6 +90,7 @@ export var ContentAccordion = function ContentAccordion(props) {
           children: item.title
         })]
       }), /*#__PURE__*/_jsxs(ContentAccordionItemContent, {
+        "aria-describedby": "headerFor_".concat(item.id),
         children: [item.header && /*#__PURE__*/_jsx(ContentAccordionItemContentHeader, {
           children: item.header
         }), /*#__PURE__*/_jsx(ContentAccordionItemContentBody, {
@@ -96,7 +99,7 @@ export var ContentAccordion = function ContentAccordion(props) {
           children: item.footer
         })]
       })]
-    }, item.key);
+    }, item.id);
   };
 
   return /*#__PURE__*/_jsx(ContentAccordionWrapper, {
@@ -108,7 +111,7 @@ export var ContentAccordion = function ContentAccordion(props) {
 };
 ContentAccordion.propTypes = {
   items: _pt.arrayOf(_pt.shape({
-    key: _pt.string.isRequired,
+    id: _pt.string.isRequired,
     title: _pt.string.isRequired,
     header: _pt.string,
     body: _pt.any.isRequired,

package/dist/Accordion/ContentAccordion.js.map

@@ -1 +1 @@
-{"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","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 {\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  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  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} id={`item_${item.key}`} className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\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>\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"}
+{"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":"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","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/Card/VerticalCard/Card.cjs

@@ -47,7 +47,7 @@ var CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_t
 
 exports.CardTopLevelContainer = CardTopLevelContainer;
 
-var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n"])), _index.focusStyles, CardTopLevelContainer, _index.COLORS.primary_20, _index.COLORS.primary_100, CardTopLevelContainer, _index.BOXSHADOWS.BOXSHADOW_L3, _index.BOXSHADOWS.BOXSHADOW_L2);
+var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ", "{\n      border: 1px solid ", ";\n    }\n  }\n"])), _index.focusStyles, CardTopLevelContainer, _index.COLORS.primary_20, _index.COLORS.primary_100, CardTopLevelContainer, _index.BOXSHADOWS.BOXSHADOW_L3, _index.BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainer, _index.COLORS.neutral_100);
 
 exports.Wrapper = Wrapper;
 

package/dist/Card/VerticalCard/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","BOXSHADOWS","BOXSHADOW_L1","neutral_200","Wrapper","focusStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","defaultOnMouseDownHandler","a","key","e","instance"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,wVACZC,cAAOC,KADK,EAWhBC,kBAAWC,YAXK,EAeVH,cAAOI,WAfG,CAA3B;;;;AAoBA,IAAMC,OAAO,GAAGP,0BAAOC,GAAV,0sBAKdO,kBALc,EAYZT,qBAZY,EAcUG,cAAOO,UAdjB,EAkBUP,cAAOQ,WAlBjB,EAwBZX,qBAxBY,EA0BIK,kBAAWO,YA1Bf,EA8BIP,kBAAWQ,YA9Bf,CAAb;;;;AAmDP,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OAOkB;AAAA,MANfC,aAMe,QANfA,aAMe;AAAA,MALfC,eAKe,QALfA,eAKe;AAAA,MAJfC,kBAIe,QAJfA,kBAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,QAEe,QAFfA,QAEe;AAAA,0BADfC,OACe;AAAA,MADfA,OACe,6BADL,UACK;;AAGjE,wBAAsCC,KAAK,CAACC,QAAN,CAA+C,EAA/C,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AACA,MAAMC,WAAW,GAAIJ,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;AACA,MAAMC,YAAY,GAAGN,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;AAEA,8BAAgBC,YAAhB,6CAAkCJ,WAAlC,IAA+CE,WAA/C;AAEA,MAAMG,GAAG,aAAM,CAAC,CAACb,aAAF,GAAkB,aAAlB,GAAkC,EAAxC,cAA8CI,QAAQ,GAAG,UAAH,GAAgB,EAAtE,cAA4EC,OAA5E,CAAT;AAEA,sBAEE,qBAAC,OAAD;AAAS,IAAA,GAAG,EAAEO,YAAd;AACS,IAAA,SAAS,EAAEC,GADpB;AAES,IAAA,QAAQ,EAAE,CAAC,CAACb,aAAF,IAAmB,CAACI,QAApB,GAA+B,CAA/B,GAAmC,CAAC,CAFvD;AAGS,IAAA,WAAW,EAAEU,gCAHtB;AAIS,IAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACZ,QAAtB,IAAkCJ,aAAlC,IAAmDA,aAAa,EAApE;AAAA,KAJrB;AAKS,IAAA,OAAO,EAAE,iBAAAiB,CAAC;AAAA,aAAI,CAACb,QAAD,IAAaJ,aAAb,IAA8BA,aAAa,EAA/C;AAAA,KALnB;AAMS,mBAAa,cANtB;AAAA,2BAOE,sBAAC,qBAAD;AAAA,iBAEIC,eAAe,iBACf,qBAAC,uBAAD;AAAgB,QAAA,GAAG,EAAES;AAArB,SACMT,eADN;AACuB,QAAA,QAAQ,EAAEG;AADjC,SAHJ,EAOIF,kBAAkB,iBAClB,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,QAAA,QAAQ,EAAEE;AAArD,SARJ,EAWID,kBAAkB,iBAClB,qBAAC,0BAAD;AAAmB,QAAA,GAAG,EAAE,aAAAe,QAAQ;AAAA,iBAAIT,cAAc,CAACS,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,EAAb,CAAlB;AAAA;AAAhC,SACuBf,kBADvB;AAC2C,QAAA,QAAQ,EAAEC;AADrD,SAZJ;AAAA;AAPF,IAFF;AA4BD,CA9CD;;;AAREJ,EAAAA,a;AACAI,EAAAA,Q;AAIAC,EAAAA,O,4BAAU,S,EAAY,U;;eAmDTN,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n`;\n\n\nexport interface CardProps {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'elevated'\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\n\n  return (\n\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}>\n      <CardTopLevelContainer>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"file":"Card.cjs"}
+{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","BOXSHADOWS","BOXSHADOW_L1","neutral_200","Wrapper","focusStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","defaultOnMouseDownHandler","a","key","e","instance"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,wVACZC,cAAOC,KADK,EAWhBC,kBAAWC,YAXK,EAeVH,cAAOI,WAfG,CAA3B;;;;AAoBA,IAAMC,OAAO,GAAGP,0BAAOC,GAAV,2vBAKdO,kBALc,EAYZT,qBAZY,EAcUG,cAAOO,UAdjB,EAkBUP,cAAOQ,WAlBjB,EAwBZX,qBAxBY,EA0BIK,kBAAWO,YA1Bf,EA8BIP,kBAAWQ,YA9Bf,EAsCdb,qBAtCc,EAuCMG,cAAOW,WAvCb,CAAb;;;;AAsDP,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OAOkB;AAAA,MANfC,aAMe,QANfA,aAMe;AAAA,MALfC,eAKe,QALfA,eAKe;AAAA,MAJfC,kBAIe,QAJfA,kBAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,QAEe,QAFfA,QAEe;AAAA,0BADfC,OACe;AAAA,MADfA,OACe,6BADL,UACK;;AAGjE,wBAAsCC,KAAK,CAACC,QAAN,CAA+C,EAA/C,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AACA,MAAMC,WAAW,GAAIJ,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;AACA,MAAMC,YAAY,GAAGN,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;AAEA,8BAAgBC,YAAhB,6CAAkCJ,WAAlC,IAA+CE,WAA/C;AAEA,MAAMG,GAAG,aAAM,CAAC,CAACb,aAAF,GAAkB,aAAlB,GAAkC,EAAxC,cAA8CI,QAAQ,GAAG,UAAH,GAAgB,EAAtE,cAA4EC,OAA5E,CAAT;AAEA,sBAEE,qBAAC,OAAD;AAAS,IAAA,GAAG,EAAEO,YAAd;AACS,IAAA,SAAS,EAAEC,GADpB;AAES,IAAA,QAAQ,EAAE,CAAC,CAACb,aAAF,IAAmB,CAACI,QAApB,GAA+B,CAA/B,GAAmC,CAAC,CAFvD;AAGS,IAAA,WAAW,EAAEU,gCAHtB;AAIS,IAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACZ,QAAtB,IAAkCJ,aAAlC,IAAmDA,aAAa,EAApE;AAAA,KAJrB;AAKS,IAAA,OAAO,EAAE,iBAAAiB,CAAC;AAAA,aAAI,CAACb,QAAD,IAAaJ,aAAb,IAA8BA,aAAa,EAA/C;AAAA,KALnB;AAMS,mBAAa,cANtB;AAAA,2BAOE,sBAAC,qBAAD;AAAA,iBAEIC,eAAe,iBACf,qBAAC,uBAAD;AAAgB,QAAA,GAAG,EAAES;AAArB,SACMT,eADN;AACuB,QAAA,QAAQ,EAAEG;AADjC,SAHJ,EAOIF,kBAAkB,iBAClB,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,QAAA,QAAQ,EAAEE;AAArD,SARJ,EAWID,kBAAkB,iBAClB,qBAAC,0BAAD;AAAmB,QAAA,GAAG,EAAE,aAAAe,QAAQ;AAAA,iBAAIT,cAAc,CAACS,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,EAAb,CAAlB;AAAA;AAAhC,SACuBf,kBADvB;AAC2C,QAAA,QAAQ,EAAEC;AADrD,SAZJ;AAAA;AAPF,IAFF;AA4BD,CA9CD;;;AAREJ,EAAAA,a;AACAI,EAAAA,Q;AAIAC,EAAAA,O,4BAAU,S,EAAY,U;;eAmDTN,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ${CardTopLevelContainer}{\n      border: 1px solid ${COLORS.neutral_100};\n    }\n  }\n`;\n\n\nexport interface CardProps {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'elevated'\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\n\n  return (\n\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}>\n      <CardTopLevelContainer>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"file":"Card.cjs"}

package/dist/Card/VerticalCard/Card.js

@@ -19,7 +19,7 @@ import { BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWi
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var CardTopLevelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ", ";\n  }\n\n  .outline & {\n    border: 1px solid ", ";\n  }\n"])), COLORS.white, BOXSHADOWS.BOXSHADOW_L1, COLORS.neutral_200);
-export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n"])), focusStyles, CardTopLevelContainer, COLORS.primary_20, COLORS.primary_100, CardTopLevelContainer, BOXSHADOWS.BOXSHADOW_L3, BOXSHADOWS.BOXSHADOW_L2);
+export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ", "{\n      border: 1px solid ", ";\n    }\n  }\n"])), focusStyles, CardTopLevelContainer, COLORS.primary_20, COLORS.primary_100, CardTopLevelContainer, BOXSHADOWS.BOXSHADOW_L3, BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainer, COLORS.neutral_100);
 
 var Card = function Card(_ref) {
   var onCardClicked = _ref.onCardClicked,

package/dist/Card/VerticalCard/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainer","div","white","BOXSHADOW_L1","neutral_200","Wrapper","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n`;\n\n\nexport interface CardProps {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'elevated'\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\n\n  return (\n\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}>\n      <CardTopLevelContainer>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"file":"Card.js"}
+{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainer","div","white","BOXSHADOW_L1","neutral_200","Wrapper","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ${CardTopLevelContainer}{\n      border: 1px solid ${COLORS.neutral_100};\n    }\n  }\n`;\n\n\nexport interface CardProps {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'elevated'\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\n\n  return (\n\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}>\n      <CardTopLevelContainer>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"file":"Card.js"}

package/dist/Dropdown/index.cjs

@@ -30,11 +30,11 @@ Object.defineProperty(exports, "DropdownFilter", {
   }
 });
 
-var _DropdownFilter = _interopRequireDefault(require("./DropdownFilter"));
-
-var _BasicDropdown = _interopRequireDefault(require("./BasicDropdown"));
+var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
 
 var _DropdownButton = _interopRequireDefault(require("./DropdownButton"));
 
-var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
+var _DropdownFilter = _interopRequireDefault(require("./DropdownFilter"));
+
+var _BasicDropdown = _interopRequireDefault(require("./BasicDropdown"));
 //# sourceMappingURL=index.cjs.map

package/dist/Dropdown/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA","sourcesContent":["import DropdownFilter from './DropdownFilter';\nimport BasicDropdown from './BasicDropdown';\nimport DropdownButton from './DropdownButton';\nimport DropdownContent from './DropdownContent';\n\nexport type {DropdownItem} from './DropdownContent'\n\n\nexport { DropdownFilter, BasicDropdown, DropdownButton, DropdownContent };\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/Dropdown/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;;AACA;;AACA;;AACA","sourcesContent":["export type { DropdownItem } from './DropdownContent';\n\nexport { default as DropdownContent } from './DropdownContent';\nexport { default as DropdownButton } from './DropdownButton';\nexport { default as DropdownFilter } from './DropdownFilter';\nexport { default as BasicDropdown } from './BasicDropdown';\n"],"file":"index.cjs"}

package/dist/Dropdown/index.d.ts

@@ -1,6 +1,5 @@
-import DropdownFilter from './DropdownFilter';
-import BasicDropdown from './BasicDropdown';
-import DropdownButton from './DropdownButton';
-import DropdownContent from './DropdownContent';
 export type { DropdownItem } from './DropdownContent';
-export { DropdownFilter, BasicDropdown, DropdownButton, DropdownContent };
+export { default as DropdownContent } from './DropdownContent';
+export { default as DropdownButton } from './DropdownButton';
+export { default as DropdownFilter } from './DropdownFilter';
+export { default as BasicDropdown } from './BasicDropdown';