@laerdal/life-react-components 1.9.9-dev.6.full → 1.10.0

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,8 +58,8 @@ var AccordionItem = function AccordionItem(props) {
         size: "20px"
       })]
     }), isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ItemBodyContainer, {
+      "aria-describedby": "itemHeaderFor_".concat(id),
       padding: props.padding,
-      margin: props.margin,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentS, {
         children: props.children
       })
@@ -69,8 +71,7 @@ AccordionItem.propTypes = {
   onSelect: _propTypes.default.func.isRequired,
   isActive: _propTypes.default.bool.isRequired,
   isLast: _propTypes.default.bool.isRequired,
-  padding: _propTypes.default.string,
-  margin: _propTypes.default.string
+  padding: _propTypes.default.string
 };
 var _default = AccordionItem;
 exports.default = _default;

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","margin","children"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;AAUA,IAAMA,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;AAC1G,MAAOC,EAAP,GAAgED,KAAhE,CAAOC,EAAP;AAAA,MAAWC,QAAX,GAAgEF,KAAhE,CAAWE,QAAX;AAAA,MAAqBC,QAArB,GAAgEH,KAAhE,CAAqBG,QAArB;AAAA,MAA+BC,KAA/B,GAAgEJ,KAAhE,CAA+BI,KAA/B;AAAA,MAAsCC,IAAtC,GAAgEL,KAAhE,CAAsCK,IAAtC;AAAA,MAA4CC,QAA5C,GAAgEN,KAAhE,CAA4CM,QAA5C;AAAA,MAAsDC,MAAtD,GAAgEP,KAAhE,CAAsDO,MAAtD;AAEA,sBACE,sBAAC,8BAAD;AAAwB,IAAA,EAAE,EAAEN,EAA5B;AAAgC,IAAA,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;AAAA,4BACE,sBAAC,2BAAD;AAAqB,MAAA,QAAQ,EAAE,CAACD,QAAD,GAAY,CAAZ,GAAgBE,SAA/C;AACqB,MAAA,OAAO,EAAE,mBAAM;AACb,YAAI,CAACF,QAAL,EAAe;AACbJ,UAAAA,QAAQ,CAACD,EAAD,CAAR;AACD;AACF,OALtB;AAMqB,MAAA,SAAS,EAAE,mBAACQ,CAAD,EAAY;AACrB,YAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EACER,QAAQ,CAACD,EAAD,CAAR;AACH,OATtB;AAUqB,MAAA,WAAW,EAAEU,iCAVlC;AAWqB,MAAA,SAAS,EAAE,CAACR,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,CAXhC;AAAA,iBAYGD,IAAI,iBAAIO,eAAMC,YAAN,CAAmBR,IAAnB,EAA+C;AAACS,QAAAA,IAAI,EAAE;AAAP,OAA/C,CAZX,eAaE;AAAA,kBAAOV;AAAP,QAbF,EAeID,QAAQ,gBACJ,qBAAC,kBAAD,CAAa,SAAb;AAAuB,QAAA,KAAK,EAAEY,SAAOC,WAArC;AAAkD,QAAA,IAAI,EAAC;AAAvD,QADI,gBAEJ,qBAAC,kBAAD,CAAa,WAAb;AAAyB,QAAA,KAAK,EAAED,SAAOE,WAAvC;AAAoD,QAAA,IAAI,EAAC;AAAzD,QAjBR;AAAA,MADF,EAsBId,QAAQ,iBACR,qBAAC,yBAAD;AAAmB,MAAA,OAAO,EAAEH,KAAK,CAACkB,OAAlC;AAA2C,MAAA,MAAM,EAAElB,KAAK,CAACmB,MAAzD;AAAA,6BACE,qBAAC,YAAD;AAAA,kBAAanB,KAAK,CAACoB;AAAnB;AADF,MAvBJ;AAAA,IADF;AA8BD,CAjCD;;;AAPElB,EAAAA,Q;AACAC,EAAAA,Q;AACAI,EAAAA,M;AACAW,EAAAA,O;AACAC,EAAAA,M;;eAsCapB,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  margin?: 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 tabIndex={!disabled ? 0 : undefined}\n                           onClick={() => {\n                             if (!disabled) {\n                               onSelect(id);\n                             }\n                           }}\n                           onKeyDown={(e: any) => {\n                             if (e.key === 'Enter')\n                               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        {\n          isActive\n            ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\"/>\n            : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\"/>\n        }\n      </ItemHeaderContainer>\n      {\n        isActive &&\n        <ItemBodyContainer padding={props.padding} margin={props.margin}>\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.d.ts

@@ -5,7 +5,6 @@ interface AccordionItemPropsInner extends AccordionItemProps {
     isActive: boolean;
     isLast: boolean;
     padding?: string;
-    margin?: string;
 }
 declare const AccordionItem: React.FunctionComponent<AccordionItemPropsInner>;
 export default AccordionItem;

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,8 +44,8 @@ var AccordionItem = function AccordionItem(props) {
         size: "20px"
       })]
     }), isActive && /*#__PURE__*/_jsx(ItemBodyContainer, {
+      "aria-describedby": "itemHeaderFor_".concat(id),
       padding: props.padding,
-      margin: props.margin,
       children: /*#__PURE__*/_jsx(ComponentS, {
         children: props.children
       })
@@ -55,8 +57,7 @@ AccordionItem.propTypes = {
   onSelect: _pt.func.isRequired,
   isActive: _pt.bool.isRequired,
   isLast: _pt.bool.isRequired,
-  padding: _pt.string,
-  margin: _pt.string
+  padding: _pt.string
 };
 export default AccordionItem;
 //# sourceMappingURL=AccordionItem.js.map

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","margin","children"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,MAAR,EAA4BC,UAA5B,QAA6C,IAA7C;AACA,SAAQC,WAAR,QAA0B,UAA1B;AAEA,SAAQC,sBAAR,EAAgCC,iBAAhC,EAAmDC,mBAAnD,QAA6E,UAA7E;AACA,SAAQC,yBAAR,QAAwC,WAAxC;;;;AAUA,IAAMC,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;AAC1G,MAAOC,EAAP,GAAgED,KAAhE,CAAOC,EAAP;AAAA,MAAWC,QAAX,GAAgEF,KAAhE,CAAWE,QAAX;AAAA,MAAqBC,QAArB,GAAgEH,KAAhE,CAAqBG,QAArB;AAAA,MAA+BC,KAA/B,GAAgEJ,KAAhE,CAA+BI,KAA/B;AAAA,MAAsCC,IAAtC,GAAgEL,KAAhE,CAAsCK,IAAtC;AAAA,MAA4CC,QAA5C,GAAgEN,KAAhE,CAA4CM,QAA5C;AAAA,MAAsDC,MAAtD,GAAgEP,KAAhE,CAAsDO,MAAtD;AAEA,sBACE,MAAC,sBAAD;AAAwB,IAAA,EAAE,EAAEN,EAA5B;AAAgC,IAAA,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;AAAA,4BACE,MAAC,mBAAD;AAAqB,MAAA,QAAQ,EAAE,CAACD,QAAD,GAAY,CAAZ,GAAgBE,SAA/C;AACqB,MAAA,OAAO,EAAE,mBAAM;AACb,YAAI,CAACF,QAAL,EAAe;AACbJ,UAAAA,QAAQ,CAACD,EAAD,CAAR;AACD;AACF,OALtB;AAMqB,MAAA,SAAS,EAAE,mBAACQ,CAAD,EAAY;AACrB,YAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EACER,QAAQ,CAACD,EAAD,CAAR;AACH,OATtB;AAUqB,MAAA,WAAW,EAAEH,yBAVlC;AAWqB,MAAA,SAAS,EAAE,CAACK,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,CAXhC;AAAA,iBAYGD,IAAI,iBAAId,KAAK,CAACoB,YAAN,CAAmBN,IAAnB,EAA+C;AAACO,QAAAA,IAAI,EAAE;AAAP,OAA/C,CAZX,eAaE;AAAA,kBAAOR;AAAP,QAbF,EAeID,QAAQ,gBACJ,KAAC,WAAD,CAAa,SAAb;AAAuB,QAAA,KAAK,EAAEX,MAAM,CAACqB,WAArC;AAAkD,QAAA,IAAI,EAAC;AAAvD,QADI,gBAEJ,KAAC,WAAD,CAAa,WAAb;AAAyB,QAAA,KAAK,EAAErB,MAAM,CAACsB,WAAvC;AAAoD,QAAA,IAAI,EAAC;AAAzD,QAjBR;AAAA,MADF,EAsBIX,QAAQ,iBACR,KAAC,iBAAD;AAAmB,MAAA,OAAO,EAAEH,KAAK,CAACe,OAAlC;AAA2C,MAAA,MAAM,EAAEf,KAAK,CAACgB,MAAzD;AAAA,6BACE,KAAC,UAAD;AAAA,kBAAahB,KAAK,CAACiB;AAAnB;AADF,MAvBJ;AAAA,IADF;AA8BD,CAjCD;;;AAPEf,EAAAA,Q;AACAC,EAAAA,Q;AACAI,EAAAA,M;AACAQ,EAAAA,O;AACAC,EAAAA,M;;AAsCF,eAAejB,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  margin?: 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 tabIndex={!disabled ? 0 : undefined}\n                           onClick={() => {\n                             if (!disabled) {\n                               onSelect(id);\n                             }\n                           }}\n                           onKeyDown={(e: any) => {\n                             if (e.key === 'Enter')\n                               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        {\n          isActive\n            ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\"/>\n            : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\"/>\n        }\n      </ItemHeaderContainer>\n      {\n        isActive &&\n        <ItemBodyContainer padding={props.padding} margin={props.margin}>\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

@@ -33,8 +33,7 @@ var AccordionMenu = function AccordionMenu(_ref) {
       setSelectedItems = _ref.setSelectedItems,
       onSelect = _ref.onSelect,
       multipleActive = _ref.multipleActive,
-      padding = _ref.padding,
-      margin = _ref.margin;
+      padding = _ref.padding;
 
   var _React$useState = React.useState([]),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -71,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;
@@ -78,7 +80,6 @@ var AccordionMenu = function AccordionMenu(_ref) {
         isLast: items.indexOf(item) === items.length - 1,
         onSelect: onSelected,
         padding: padding,
-        margin: margin,
         children: item.children
       }, item.id);
     })
@@ -97,8 +98,7 @@ AccordionMenu.propTypes = {
   setSelectedItems: _propTypes.default.func,
   onSelect: _propTypes.default.func,
   multipleActive: _propTypes.default.bool,
-  padding: _propTypes.default.string,
-  margin: _propTypes.default.string
+  padding: _propTypes.default.string
 };
 var _default = AccordionMenu;
 exports.default = _default;

package/dist/Accordion/AccordionMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Accordion/AccordionMenu.tsx"],"names":["AccordionMenu","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","margin","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;;;;;;;;AAoBA,IAAMA,aAAsD,GAAG,SAAzDA,aAAyD,OAQuB;AAAA,MAPpBC,KAOoB,QAPpBA,KAOoB;AAAA,MANpBC,aAMoB,QANpBA,aAMoB;AAAA,MALpBC,gBAKoB,QALpBA,gBAKoB;AAAA,MAJpBC,QAIoB,QAJpBA,QAIoB;AAAA,MAHpBC,cAGoB,QAHpBA,cAGoB;AAAA,MAFpBC,OAEoB,QAFpBA,OAEoB;AAAA,MADpBC,MACoB,QADpBA,MACoB;;AAEpF,wBAAwDC,KAAK,CAACC,QAAN,CAAyB,EAAzB,CAAxD;AAAA;AAAA,MAAOC,oBAAP;AAAA,MAA6BC,uBAA7B;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AAC1B,WAAOV,aAAa,GAAGA,aAAH,GAAmBQ,oBAAvC;AACD,GAFD;;AAIA,MAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AAC9B,WAAOV,gBAAgB,GAAGA,gBAAH,GAAsBQ,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,UAAAC,CAAC;AAAA,aAAIA,CAAC,IAAIL,EAAT;AAAA,KAAjB,CAAnB;;AACA,QAAGV,cAAH,EAAmB;AACjB,UAAGa,QAAH,EACED,UAAU,CAACD,UAAU,CAACK,MAAX,CAAkB,UAAAD,CAAC;AAAA,eAAIA,CAAC,IAAIL,EAAT;AAAA,OAAnB,CAAD,CAAV,CADF,KAIEE,UAAU,4CAAKD,UAAL,IAAiBD,EAAjB,GAAV;AACH,KAND,MAQEE,UAAU,CAACC,QAAQ,GAAG,EAAH,GAAQ,CAACH,EAAD,CAAjB,CAAV;;AAEFX,IAAAA,QAAQ,IAAIA,QAAQ,CAACW,EAAD,CAApB;AACD,GAhBD;;AAkBA,sBACE,qBAAC,4BAAD;AAAA,cACGd,KAAK,CAACqB,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,UAAAC,CAAC;AAAA,iBAAIA,CAAC,IAAIG,IAAI,CAACR,EAAd;AAAA,SAAtB,CANd;AAOE,QAAA,MAAM,EAAEd,KAAK,CAAC0B,OAAN,CAAcJ,IAAd,MAAwBtB,KAAK,CAAC2B,MAAN,GAAe,CAPjD;AAQE,QAAA,QAAQ,EAAEd,UARZ;AASE,QAAA,OAAO,EAAER,OATX;AAUE,QAAA,MAAM,EAAEC,MAVV;AAAA,kBAWGgB,IAAI,CAACM;AAXR,SACON,IAAI,CAACR,EADZ,CADS;AAAA,KAAV;AADH,IADF;AAmBD,CAzDD;;;AAjBEd,EAAAA,K;AAUAc,IAAAA,E;AACAS,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,I;AACAG,IAAAA,Q;;AAbA3B,EAAAA,a;AACAC,EAAAA,gB;AACAC,EAAAA,Q;AACAC,EAAAA,c;AACAC,EAAAA,O;AACAC,EAAAA,M;;eAsEaP,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  margin?: 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> = ({\n                                                                  items,\n                                                                  selectedItems,\n                                                                  setSelectedItems,\n                                                                  onSelect,\n                                                                  multipleActive,\n                                                                  padding,\n                                                                  margin,\n                                                                }: AccordionProps) => {\n\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)\n        updateFunc(collection.filter(x => x != id));\n      \n      else \n        updateFunc([...collection, id]);\n    }\n    else\n      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          margin={margin}>\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

@@ -6,9 +6,8 @@ export interface AccordionProps {
     onSelect?: (id: string) => void;
     multipleActive?: boolean;
     padding?: string;
-    margin?: string;
 }
-export interface AccordionItemProps {
+export interface AccordionItemProps extends React.AriaAttributes {
     id: string;
     disabled?: boolean;
     title: string;

package/dist/Accordion/AccordionMenu.js

@@ -12,8 +12,7 @@ var AccordionMenu = function AccordionMenu(_ref) {
       setSelectedItems = _ref.setSelectedItems,
       onSelect = _ref.onSelect,
       multipleActive = _ref.multipleActive,
-      padding = _ref.padding,
-      margin = _ref.margin;
+      padding = _ref.padding;
 
   var _React$useState = React.useState([]),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -50,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;
@@ -57,7 +59,6 @@ var AccordionMenu = function AccordionMenu(_ref) {
         isLast: items.indexOf(item) === items.length - 1,
         onSelect: onSelected,
         padding: padding,
-        margin: margin,
         children: item.children
       }, item.id);
     })
@@ -76,8 +77,7 @@ AccordionMenu.propTypes = {
   setSelectedItems: _pt.func,
   onSelect: _pt.func,
   multipleActive: _pt.bool,
-  padding: _pt.string,
-  margin: _pt.string
+  padding: _pt.string
 };
 export default AccordionMenu;
 //# sourceMappingURL=AccordionMenu.js.map

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","margin","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;;;AAoBA,IAAMC,aAAsD,GAAG,SAAzDA,aAAyD,OAQuB;AAAA,MAPpBC,KAOoB,QAPpBA,KAOoB;AAAA,MANpBC,aAMoB,QANpBA,aAMoB;AAAA,MALpBC,gBAKoB,QALpBA,gBAKoB;AAAA,MAJpBC,QAIoB,QAJpBA,QAIoB;AAAA,MAHpBC,cAGoB,QAHpBA,cAGoB;AAAA,MAFpBC,OAEoB,QAFpBA,OAEoB;AAAA,MADpBC,MACoB,QADpBA,MACoB;;AAEpF,wBAAwDV,KAAK,CAACW,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,UAAAC,CAAC;AAAA,aAAIA,CAAC,IAAIL,EAAT;AAAA,KAAjB,CAAnB;;AACA,QAAGT,cAAH,EAAmB;AACjB,UAAGY,QAAH,EACED,UAAU,CAACD,UAAU,CAACK,MAAX,CAAkB,UAAAD,CAAC;AAAA,eAAIA,CAAC,IAAIL,EAAT;AAAA,OAAnB,CAAD,CAAV,CADF,KAIEE,UAAU,8BAAKD,UAAL,IAAiBD,EAAjB,GAAV;AACH,KAND,MAQEE,UAAU,CAACC,QAAQ,GAAG,EAAH,GAAQ,CAACH,EAAD,CAAjB,CAAV;;AAEFV,IAAAA,QAAQ,IAAIA,QAAQ,CAACU,EAAD,CAApB;AACD,GAhBD;;AAkBA,sBACE,KAAC,oBAAD;AAAA,cACGb,KAAK,CAACoB,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,UAAAC,CAAC;AAAA,iBAAIA,CAAC,IAAIG,IAAI,CAACR,EAAd;AAAA,SAAtB,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;AAUE,QAAA,MAAM,EAAEC,MAVV;AAAA,kBAWGe,IAAI,CAACM;AAXR,SACON,IAAI,CAACR,EADZ,CADS;AAAA,KAAV;AADH,IADF;AAmBD,CAzDD;;;AAjBEb,EAAAA,K;AAUAa,IAAAA,E;AACAS,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,I;AACAG,IAAAA,Q;;AAbA1B,EAAAA,a;AACAC,EAAAA,gB;AACAC,EAAAA,Q;AACAC,EAAAA,c;AACAC,EAAAA,O;AACAC,EAAAA,M;;AAsEF,eAAeP,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  margin?: 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> = ({\n                                                                  items,\n                                                                  selectedItems,\n                                                                  setSelectedItems,\n                                                                  onSelect,\n                                                                  multipleActive,\n                                                                  padding,\n                                                                  margin,\n                                                                }: AccordionProps) => {\n\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)\n        updateFunc(collection.filter(x => x != id));\n      \n      else \n        updateFunc([...collection, id]);\n    }\n    else\n      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          margin={margin}>\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

@@ -67,7 +67,7 @@ var ContentAccordionItem = _styledComponents.default.div(_templateObject8 || (_t
 
 exports.ContentAccordionItem = ContentAccordionItem;
 
-var ContentAccordionWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  position: relative;\n\n  ", ":last-child {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ", " {\n      gap: 8px;\n      padding: 0 8px;\n      ", "\n    }\n\n    ", " {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        ", "\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ", " {\n      gap: 12px;\n      padding: 0 12px;\n      ", "\n    }\n\n    ", " {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        ", "\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ", " {\n      gap: 16px;\n      padding: 0 16px;\n      ", "\n    }\n\n    ", " {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        ", "\n      }\n    }\n  }\n"])), ContentAccordionItem, _styles.COLORS.neutral_100, ContentAccordionItemHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ParagraphSStyling)(_typography.ParagraphTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, (0, _typography.ParagraphSStyling)(_typography.ParagraphTextStyle.Regular, _styles.COLORS.black), ContentAccordionItemHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ParagraphMStyling)(_typography.ParagraphTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, (0, _typography.ParagraphMStyling)(_typography.ParagraphTextStyle.Regular, _styles.COLORS.black), ContentAccordionItemHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ParagraphLStyling)(_typography.ParagraphTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, (0, _typography.ParagraphLStyling)(_typography.ParagraphTextStyle.Regular, _styles.COLORS.black));
+var ContentAccordionWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  position: relative;\n\n  ", ":last-child {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ", " {\n      gap: 8px;\n      padding: 0 8px;\n      ", "\n    }\n\n    ", " {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        ", "\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ", " {\n      gap: 12px;\n      padding: 0 12px;\n      ", "\n    }\n\n    ", " {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        ", "\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ", " {\n      gap: 16px;\n      padding: 0 16px;\n      ", "\n    }\n\n    ", " {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        ", "\n      }\n    }\n  }\n"])), ContentAccordionItem, _styles.COLORS.neutral_100, ContentAccordionItemHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, (0, _typography.ParagraphSStyling)(_typography.ParagraphTextStyle.Regular, _styles.COLORS.black), ContentAccordionItemHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, (0, _typography.ParagraphMStyling)(_typography.ParagraphTextStyle.Regular, _styles.COLORS.black), ContentAccordionItemHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, (0, _typography.ParagraphLStyling)(_typography.ParagraphTextStyle.Regular, _styles.COLORS.black));
 
 exports.ContentAccordionWrapper = ContentAccordionWrapper;
 
@@ -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","ParagraphTextStyle","Bold","black","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        ${ParagraphSStyling(ParagraphTextStyle.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        ${ParagraphMStyling(ParagraphTextStyle.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        ${ParagraphLStyling(ParagraphTextStyle.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":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAUA;;AACA;;AACA;;;;;;AAEO,IAAMA,0BAA0B,GAAGC,0BAAOC,GAAV,iaAK5BC,eAAOC,WALqB,EAS1BD,eAAOE,WATmB,EAUfF,eAAOG,UAVQ,EAWxBC,oBAAUC,KAXc,EAejCC,mBAfiC,EAmB1BN,eAAOO,WAnBmB,EAoBfP,eAAOQ,WApBQ,EAqBxBJ,oBAAUK,MArBc,CAAhC;;;;AAyBA,IAAMC,8BAA8B,GAAGZ,0BAAOC,GAAV,6KAApC;;;;AAUA,IAAMY,8BAA8B,GAAGb,0BAAOC,GAAV,qFAApC;;;;AAEA,IAAMa,2BAA2B,GAAGd,0BAAOC,GAAV,oIAAjC;;;;AAKA,IAAMc,iCAAiC,GAAGf,0BAAOC,GAAV,qFAAvC;;;;AAEA,IAAMe,+BAA+B,GAAGhB,0BAAOC,GAAV,qFAArC;;;;AAEA,IAAMgB,iCAAiC,GAAGjB,0BAAOC,GAAV,qFAAvC;;;;AAEA,IAAMiB,oBAAoB,GAAGlB,0BAAOC,GAAV,yVAGPC,eAAOiB,WAHA,EAM3BL,2BAN2B,EAY3Bf,0BAZ2B,EAalBG,eAAOkB,WAbW,CAA1B;;;;AAoBA,IAAMC,uBAAuB,GAAGrB,0BAAOC,GAAV,6iCAIhCiB,oBAJgC,EAKLhB,eAAOiB,WALF,EAY9BpB,0BAZ8B,EAe5B,mCAAkBuB,+BAAmBC,OAArC,EAA8C,IAA9C,CAf4B,EAkB9BT,2BAlB8B,EAsB5BC,iCAtB4B,EAuB1B,mCAAkBO,+BAAmBE,IAArC,EAA2CtB,eAAOuB,KAAlD,CAvB0B,EA0B5BT,+BA1B4B,EA2B1B,mCAAkBU,+BAAmBH,OAArC,EAA8CrB,eAAOuB,KAArD,CA3B0B,EAoC9B1B,0BApC8B,EAuC5B,mCAAkBuB,+BAAmBC,OAArC,EAA8C,IAA9C,CAvC4B,EA0C9BT,2BA1C8B,EA8C5BC,iCA9C4B,EA+C1B,mCAAkBO,+BAAmBE,IAArC,EAA2CtB,eAAOuB,KAAlD,CA/C0B,EAkD5BT,+BAlD4B,EAmD1B,mCAAkBU,+BAAmBH,OAArC,EAA8CrB,eAAOuB,KAArD,CAnD0B,EA4D9B1B,0BA5D8B,EA+D5B,mCAAkBuB,+BAAmBC,OAArC,EAA8C,IAA9C,CA/D4B,EAkE9BT,2BAlE8B,EAsE5BC,iCAtE4B,EAuE1B,mCAAkBO,+BAAmBE,IAArC,EAA2CtB,eAAOuB,KAAlD,CAvE0B,EA0E5BT,+BA1E4B,EA2E1B,mCAAkBU,+BAAmBH,OAArC,EAA8CrB,eAAOuB,KAArD,CA3E0B,CAA7B;;;;AAiGA,IAAME,gBAAgE,GAAG,SAAnEA,gBAAmE,CAACC,KAAD,EAAW;AAAA;;AACzF,wBAA4BC,eAAMC,QAAN,CAAyB,EAAzB,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEAH,iBAAMI,SAAN,CAAgB,YAAM;AACpB,QAAIL,KAAK,CAACM,KAAV,EAAiB;AACfF,MAAAA,SAAS,CAACJ,KAAK,CAACO,KAAN,CAAYC,MAAZ,CAAmB,UAACC,IAAD;AAAA,eAAUA,IAAI,CAAC1B,MAAf;AAAA,OAAnB,EAA0C2B,GAA1C,CAA8C,UAACD,IAAD;AAAA,eAAUA,IAAI,CAACE,EAAf;AAAA,OAA9C,CAAD,CAAT;AACD,KAFD,MAEO;AAAA;;AACL,UAAI5B,MAAM,wBAAGiB,KAAK,CAACO,KAAN,CAAYK,IAAZ,CAAiB,UAACH,IAAD;AAAA,eAAU,CAAC,CAACA,IAAI,CAAC1B,MAAjB;AAAA,OAAjB,CAAH,sDAAG,kBAA2C4B,EAAxD;;AACA,UAAI5B,MAAJ,EAAY;AACVqB,QAAAA,SAAS,CAAC,CAACrB,MAAD,CAAD,CAAT;AACD;AACF;AACF,GATD,EASG,CAACiB,KAAK,CAACO,KAAP,EAAcP,KAAK,CAACM,KAApB,CATH;;AAWA,MAAMO,WAAW,GAAG,SAAdA,WAAc,CAACJ,IAAD,EAAgC;AAClD,QAAIA,IAAI,CAACK,QAAT,EAAmB;;AACnB,QAAIX,MAAM,CAACY,QAAP,CAAgBN,IAAI,CAACE,EAArB,CAAJ,EAA8B;AAC5BP,MAAAA,SAAS,CAACD,MAAM,CAACK,MAAP,CAAc,UAACQ,GAAD;AAAA,eAASA,GAAG,KAAKP,IAAI,CAACE,EAAtB;AAAA,OAAd,CAAD,CAAT;AACD,KAFD,MAEO;AACL,UAAIX,KAAK,CAACM,KAAV,EAAiB;AACfF,QAAAA,SAAS,4CAAKD,MAAL,IAAaM,IAAI,CAACE,EAAlB,GAAT;AACD,OAFD,MAEO;AACLP,QAAAA,SAAS,CAAC,CAACK,IAAI,CAACE,EAAN,CAAD,CAAT;AACD;AACF;AACF,GAXD;;AAaA,MAAMM,UAAU,GAAG,SAAbA,UAAa,CAACR,IAAD,EAAgC;AACjD,QAAMS,QAAQ,GAAGf,MAAM,CAACY,QAAP,CAAgBN,IAAI,CAACE,EAArB,CAAjB;AAEA,wBACE,sBAAC,oBAAD;AAAoC,MAAA,EAAE,iBAAUF,IAAI,CAACE,EAAf,CAAtC;AAA2D,MAAA,SAAS,EAAE,GAAGQ,MAAH,CAAUD,QAAQ,GAAG,SAAH,GAAe,EAAjC,EAAqCC,MAArC,CAA4CV,IAAI,CAACK,QAAL,GAAgB,WAAhB,GAA8B,EAA1E,CAAtE;AAAA,8BACE,sBAAC,0BAAD;AACE,QAAA,IAAI,EAAC,QADP;AAEE,QAAA,EAAE,sBAAeL,IAAI,CAACE,EAApB,CAFJ;AAGE,QAAA,QAAQ,EAAE,CAACF,IAAI,CAACK,QAAN,GAAiB,CAAjB,GAAqBM,SAHjC;AAIE,QAAA,WAAW,EAAEC,iCAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACZ,IAAI,CAACK,QAAN,IAAkBD,WAAW,CAACJ,IAAD,CAAnC;AAAA,SALX;AAME,QAAA,UAAU,EAAE,oBAACa,KAAD;AAAA,iBAAWA,KAAK,CAACN,GAAN,KAAc,OAAd,IAAyBH,WAAW,CAACJ,IAAD,CAA/C;AAAA,SANd;AAAA,gCAOE,qBAAC,8BAAD;AAAA,oBACGT,KAAK,CAACM,KAAN,GAAcY,QAAQ,gBAAG,qBAAC,kBAAD,CAAa,KAAb,KAAH,gBAA2B,qBAAC,kBAAD,CAAa,IAAb,KAAjD,GAAwEA,QAAQ,gBAAG,qBAAC,kBAAD,CAAa,WAAb,KAAH,gBAAiC,qBAAC,kBAAD,CAAa,YAAb;AADpH,UAPF,eAUE,qBAAC,8BAAD;AAAA,oBAAiCT,IAAI,CAACc;AAAtC,UAVF;AAAA,QADF,eAaE,sBAAC,2BAAD;AAA6B,gDAA+Bd,IAAI,CAACE,EAApC,CAA7B;AAAA,mBACGF,IAAI,CAACe,MAAL,iBAAe,qBAAC,iCAAD;AAAA,oBAAoCf,IAAI,CAACe;AAAzC,UADlB,eAEE,qBAAC,+BAAD;AAAA,oBAAkCf,IAAI,CAACgB;AAAvC,UAFF,EAGGhB,IAAI,CAACiB,MAAL,iBAAe,qBAAC,iCAAD;AAAA,oBAAoCjB,IAAI,CAACiB;AAAzC,UAHlB;AAAA,QAbF;AAAA,OAA2BjB,IAAI,CAACE,EAAhC,CADF;AAqBD,GAxBD;;AA0BA,sBAAO,qBAAC,uBAAD;AAAyB,IAAA,SAAS,EAAE,GAAGQ,MAAH,2BAAcnB,KAAK,CAAC2B,IAApB,qDAA4BC,YAAKC,MAAjC,EAApC;AAAA,cAAiF7B,KAAK,CAACO,KAAN,CAAYG,GAAZ,CAAgB,UAACD,IAAD;AAAA,aAAUQ,UAAU,CAACR,IAAD,CAApB;AAAA,KAAhB;AAAjF,IAAP;AACD,CAtDM;;;;AALLF,EAAAA,K;AAVAI,IAAAA,E;AACAY,IAAAA,K;AACAC,IAAAA,M;AACAC,IAAAA,I;AACAC,IAAAA,M;AACAZ,IAAAA,Q;AACA/B,IAAAA,M;;AAKAuB,EAAAA,K;;eA4DaP,gB","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

@@ -23,7 +23,7 @@ export var ContentAccordionItemContentHeader = styled.div(_templateObject5 || (_
 export var ContentAccordionItemContentBody = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));
 export var ContentAccordionItemContentFooter = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
 export var ContentAccordionItem = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ", ";\n\n  &.active {\n    ", " {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ", " {\n      color: ", ";\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n"])), COLORS.neutral_100, ContentAccordionItemContent, ContentAccordionItemHeader, COLORS.neutral_300);
-export var ContentAccordionWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n\n  ", ":last-child {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ", " {\n      gap: 8px;\n      padding: 0 8px;\n      ", "\n    }\n\n    ", " {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        ", "\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ", " {\n      gap: 12px;\n      padding: 0 12px;\n      ", "\n    }\n\n    ", " {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        ", "\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ", " {\n      gap: 16px;\n      padding: 0 16px;\n      ", "\n    }\n\n    ", " {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        ", "\n      }\n    }\n  }\n"])), ContentAccordionItem, COLORS.neutral_100, ContentAccordionItemHeader, ComponentSStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ParagraphSStyling(ParagraphTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black), ContentAccordionItemHeader, ComponentMStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ParagraphMStyling(ParagraphTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black), ContentAccordionItemHeader, ComponentLStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ParagraphLStyling(ParagraphTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black));
+export var ContentAccordionWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n\n  ", ":last-child {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ", " {\n      gap: 8px;\n      padding: 0 8px;\n      ", "\n    }\n\n    ", " {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        ", "\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ", " {\n      gap: 12px;\n      padding: 0 12px;\n      ", "\n    }\n\n    ", " {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        ", "\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ", " {\n      gap: 16px;\n      padding: 0 16px;\n      ", "\n    }\n\n    ", " {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        ", "\n      }\n    }\n  }\n"])), ContentAccordionItem, COLORS.neutral_100, ContentAccordionItemHeader, ComponentSStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentSStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black), ContentAccordionItemHeader, ComponentMStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentMStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black), ContentAccordionItemHeader, ComponentLStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentLStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black));
 export var ContentAccordion = function ContentAccordion(props) {
   var _props$size;
 
@@ -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        ${ParagraphSStyling(ParagraphTextStyle.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        ${ParagraphMStyling(ParagraphTextStyle.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        ${ParagraphLStyling(ParagraphTextStyle.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/Accordion/styles.cjs

@@ -35,10 +35,8 @@ var HeaderIconContainer = _styledComponents.default.div(_templateObject4 || (_te
 
 exports.HeaderIconContainer = HeaderIconContainer;
 
-var ItemBodyContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", ";\n  margin: ", ";\n  background: ", ";\n"])), function (props) {
-  return props.padding || '0px 16px';
-}, function (props) {
-  return props.margin || '12px 0';
+var ItemBodyContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", ";\n  background: ", ";\n"])), function (props) {
+  return props.padding || '12px 16px';
 }, _styles.COLORS.white);
 
 exports.ItemBodyContainer = ItemBodyContainer;