@laerdal/life-react-components 1.11.0-dev.9 → 2.0.0

package/dist/Accordion/AccordionItem.cjs

@@ -49,7 +49,9 @@ var AccordionItem = function AccordionItem(props) {
     displaySeparator: !isActive && !isLast,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ItemHeaderContainer, _objectSpread(_objectSpread({
       role: "button",
+      "aria-expanded": isActive,
       id: "itemHeaderFor_".concat(id),
+      "aria-controls": "itemContentFor_".concat(id),
       tabIndex: !disabled ? 0 : undefined,
       onClick: function onClick() {
         if (!disabled) {
@@ -66,15 +68,18 @@ var AccordionItem = function AccordionItem(props) {
         size: '24px'
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: title
-      }), isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronUp, {
-        color: _.COLORS.neutral_800,
-        size: "20px"
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronDown, {
-        color: _.COLORS.neutral_600,
-        size: "20px"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        "aria-hidden": "true",
+        children: isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronUp, {
+          color: _.COLORS.neutral_800,
+          size: "20px"
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronDown, {
+          color: _.COLORS.neutral_600,
+          size: "20px"
+        })
       })]
     })), isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ItemBodyContainer, {
-      "aria-describedby": "itemHeaderFor_".concat(id),
+      id: "itemContentFor_".concat(id),
       padding: padding,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentS, {
         children: children

package/dist/Accordion/AccordionItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.cjs","names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","rest","cls","undefined","e","key","defaultOnMouseDownHandler","React","cloneElement","size","COLORS","neutral_800","neutral_600"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS, 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, padding, children, className, ...rest } = props;\n\n  const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '');\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={cls}\n        {...rest}>\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={padding}>\n          <ComponentS>{children}</ComponentS>\n        </ItemBodyContainer>\n      )}\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AASA,IAAMA,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;EAC1G,IAAQC,EAAR,GAAyGD,KAAzG,CAAQC,EAAR;EAAA,IAAYC,QAAZ,GAAyGF,KAAzG,CAAYE,QAAZ;EAAA,IAAsBC,QAAtB,GAAyGH,KAAzG,CAAsBG,QAAtB;EAAA,IAAgCC,KAAhC,GAAyGJ,KAAzG,CAAgCI,KAAhC;EAAA,IAAuCC,IAAvC,GAAyGL,KAAzG,CAAuCK,IAAvC;EAAA,IAA6CC,QAA7C,GAAyGN,KAAzG,CAA6CM,QAA7C;EAAA,IAAuDC,MAAvD,GAAyGP,KAAzG,CAAuDO,MAAvD;EAAA,IAA+DC,OAA/D,GAAyGR,KAAzG,CAA+DQ,OAA/D;EAAA,IAAwEC,QAAxE,GAAyGT,KAAzG,CAAwES,QAAxE;EAAA,IAAkFC,SAAlF,GAAyGV,KAAzG,CAAkFU,SAAlF;EAAA,IAAgGC,IAAhG,0CAAyGX,KAAzG;EAEA,IAAMY,GAAG,GAAG,CAACT,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,KAA8DI,SAAS,cAAOA,SAAP,IAAqB,EAA5F,CAAZ;EAEA,oBACE,sBAAC,8BAAD;IAAwB,EAAE,EAAET,EAA5B;IAAgC,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;IAAA,wBACE,sBAAC,2BAAD;MACE,IAAI,EAAC,QADP;MAEE,EAAE,0BAAmBN,EAAnB,CAFJ;MAGE,QAAQ,EAAE,CAACK,QAAD,GAAY,CAAZ,GAAgBO,SAH5B;MAIE,OAAO,EAAE,mBAAM;QACb,IAAI,CAACP,QAAL,EAAe;UACbJ,QAAQ,CAACD,EAAD,CAAR;QACD;MACF,CARH;MASE,SAAS,EAAE,mBAACa,CAAD,EAAY;QACrB,IAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuBb,QAAQ,CAACD,EAAD,CAAR;MACxB,CAXH;MAYE,WAAW,EAAEe,iCAZf;MAaE,SAAS,EAAEJ;IAbb,GAcMD,IAdN;MAAA,WAeGN,IAAI,iBAAIY,cAAA,CAAMC,YAAN,CAAmBb,IAAnB,EAA+C;QAAEc,IAAI,EAAE;MAAR,CAA/C,CAfX,eAgBE;QAAA,UAAOf;MAAP,EAhBF,EAiBGD,QAAQ,gBAAG,qBAAC,kBAAD,CAAa,SAAb;QAAuB,KAAK,EAAEiB,QAAA,CAAOC,WAArC;QAAkD,IAAI,EAAC;MAAvD,EAAH,gBAAsE,qBAAC,kBAAD,CAAa,WAAb;QAAyB,KAAK,EAAED,QAAA,CAAOE,WAAvC;QAAoD,IAAI,EAAC;MAAzD,EAjBjF;IAAA,GADF,EAoBGnB,QAAQ,iBACP,qBAAC,yBAAD;MAAmB,4CAAmCF,EAAnC,CAAnB;MAA4D,OAAO,EAAEO,OAArE;MAAA,uBACE,qBAAC,YAAD;QAAA,UAAaC;MAAb;IADF,EArBJ;EAAA,EADF;AA4BD,CAjCD;;;EANEP,Q;EACAC,Q;EACAI,M;EACAC,O;;eAsCaT,a"}
+{"version":3,"file":"AccordionItem.cjs","names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","rest","cls","undefined","e","key","defaultOnMouseDownHandler","React","cloneElement","size","COLORS","neutral_800","neutral_600"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS, 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, padding, children, className, ...rest } = props;\n\n  const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '');\n\n  return (\n    <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n      <ItemHeaderContainer\n        role=\"button\"\n        aria-expanded={isActive}\n        id={`itemHeaderFor_${id}`}\n        aria-controls={`itemContentFor_${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={cls}\n        {...rest}>\n        {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n        <span>{title}</span>\n        <div aria-hidden=\"true\">\n          {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n        </div>\n      </ItemHeaderContainer>\n      {isActive && (\n        <ItemBodyContainer id={`itemContentFor_${id}`} padding={padding}>\n          <ComponentS>{children}</ComponentS>\n        </ItemBodyContainer>\n      )}\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AASA,IAAMA,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;EAC1G,IAAQC,EAAR,GAAyGD,KAAzG,CAAQC,EAAR;EAAA,IAAYC,QAAZ,GAAyGF,KAAzG,CAAYE,QAAZ;EAAA,IAAsBC,QAAtB,GAAyGH,KAAzG,CAAsBG,QAAtB;EAAA,IAAgCC,KAAhC,GAAyGJ,KAAzG,CAAgCI,KAAhC;EAAA,IAAuCC,IAAvC,GAAyGL,KAAzG,CAAuCK,IAAvC;EAAA,IAA6CC,QAA7C,GAAyGN,KAAzG,CAA6CM,QAA7C;EAAA,IAAuDC,MAAvD,GAAyGP,KAAzG,CAAuDO,MAAvD;EAAA,IAA+DC,OAA/D,GAAyGR,KAAzG,CAA+DQ,OAA/D;EAAA,IAAwEC,QAAxE,GAAyGT,KAAzG,CAAwES,QAAxE;EAAA,IAAkFC,SAAlF,GAAyGV,KAAzG,CAAkFU,SAAlF;EAAA,IAAgGC,IAAhG,0CAAyGX,KAAzG;EAEA,IAAMY,GAAG,GAAG,CAACT,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,KAA8DI,SAAS,cAAOA,SAAP,IAAqB,EAA5F,CAAZ;EAEA,oBACE,sBAAC,8BAAD;IAAwB,EAAE,EAAET,EAA5B;IAAgC,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;IAAA,wBACE,sBAAC,2BAAD;MACE,IAAI,EAAC,QADP;MAEE,iBAAeJ,QAFjB;MAGE,EAAE,0BAAmBF,EAAnB,CAHJ;MAIE,0CAAiCA,EAAjC,CAJF;MAKE,QAAQ,EAAE,CAACK,QAAD,GAAY,CAAZ,GAAgBO,SAL5B;MAME,OAAO,EAAE,mBAAM;QACb,IAAI,CAACP,QAAL,EAAe;UACbJ,QAAQ,CAACD,EAAD,CAAR;QACD;MACF,CAVH;MAWE,SAAS,EAAE,mBAACa,CAAD,EAAY;QACrB,IAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuBb,QAAQ,CAACD,EAAD,CAAR;MACxB,CAbH;MAcE,WAAW,EAAEe,iCAdf;MAeE,SAAS,EAAEJ;IAfb,GAgBMD,IAhBN;MAAA,WAiBGN,IAAI,iBAAIY,cAAA,CAAMC,YAAN,CAAmBb,IAAnB,EAA+C;QAAEc,IAAI,EAAE;MAAR,CAA/C,CAjBX,eAkBE;QAAA,UAAOf;MAAP,EAlBF,eAmBE;QAAK,eAAY,MAAjB;QAAA,UACGD,QAAQ,gBAAG,qBAAC,kBAAD,CAAa,SAAb;UAAuB,KAAK,EAAEiB,QAAA,CAAOC,WAArC;UAAkD,IAAI,EAAC;QAAvD,EAAH,gBAAsE,qBAAC,kBAAD,CAAa,WAAb;UAAyB,KAAK,EAAED,QAAA,CAAOE,WAAvC;UAAoD,IAAI,EAAC;QAAzD;MADjF,EAnBF;IAAA,GADF,EAwBGnB,QAAQ,iBACP,qBAAC,yBAAD;MAAmB,EAAE,2BAAoBF,EAApB,CAArB;MAA+C,OAAO,EAAEO,OAAxD;MAAA,uBACE,qBAAC,YAAD;QAAA,UAAaC;MAAb;IADF,EAzBJ;EAAA,EADF;AAgCD,CArCD;;;EANEP,Q;EACAC,Q;EACAI,M;EACAC,O;;eA0CaT,a"}

package/dist/Accordion/AccordionItem.js

@@ -34,7 +34,9 @@ var AccordionItem = function AccordionItem(props) {
     displaySeparator: !isActive && !isLast,
     children: [/*#__PURE__*/_jsxs(ItemHeaderContainer, _objectSpread(_objectSpread({
       role: "button",
+      "aria-expanded": isActive,
       id: "itemHeaderFor_".concat(id),
+      "aria-controls": "itemContentFor_".concat(id),
       tabIndex: !disabled ? 0 : undefined,
       onClick: function onClick() {
         if (!disabled) {
@@ -51,15 +53,18 @@ var AccordionItem = function AccordionItem(props) {
         size: '24px'
       }), /*#__PURE__*/_jsx("span", {
         children: title
-      }), isActive ? /*#__PURE__*/_jsx(SystemIcons.ChevronUp, {
-        color: COLORS.neutral_800,
-        size: "20px"
-      }) : /*#__PURE__*/_jsx(SystemIcons.ChevronDown, {
-        color: COLORS.neutral_600,
-        size: "20px"
+      }), /*#__PURE__*/_jsx("div", {
+        "aria-hidden": "true",
+        children: isActive ? /*#__PURE__*/_jsx(SystemIcons.ChevronUp, {
+          color: COLORS.neutral_800,
+          size: "20px"
+        }) : /*#__PURE__*/_jsx(SystemIcons.ChevronDown, {
+          color: COLORS.neutral_600,
+          size: "20px"
+        })
       })]
     })), isActive && /*#__PURE__*/_jsx(ItemBodyContainer, {
-      "aria-describedby": "itemHeaderFor_".concat(id),
+      id: "itemContentFor_".concat(id),
       padding: padding,
       children: /*#__PURE__*/_jsx(ComponentS, {
         children: children

package/dist/Accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","names":["React","COLORS","ComponentS","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","defaultOnMouseDownHandler","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","rest","cls","undefined","e","key","cloneElement","size","neutral_800","neutral_600"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS, 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, padding, children, className, ...rest } = props;\n\n  const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '');\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={cls}\n        {...rest}>\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={padding}>\n          <ComponentS>{children}</ComponentS>\n        </ItemBodyContainer>\n      )}\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,EAAiBC,UAAjB,QAAmC,IAAnC;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;EAC1G,IAAQC,EAAR,GAAyGD,KAAzG,CAAQC,EAAR;EAAA,IAAYC,QAAZ,GAAyGF,KAAzG,CAAYE,QAAZ;EAAA,IAAsBC,QAAtB,GAAyGH,KAAzG,CAAsBG,QAAtB;EAAA,IAAgCC,KAAhC,GAAyGJ,KAAzG,CAAgCI,KAAhC;EAAA,IAAuCC,IAAvC,GAAyGL,KAAzG,CAAuCK,IAAvC;EAAA,IAA6CC,QAA7C,GAAyGN,KAAzG,CAA6CM,QAA7C;EAAA,IAAuDC,MAAvD,GAAyGP,KAAzG,CAAuDO,MAAvD;EAAA,IAA+DC,OAA/D,GAAyGR,KAAzG,CAA+DQ,OAA/D;EAAA,IAAwEC,QAAxE,GAAyGT,KAAzG,CAAwES,QAAxE;EAAA,IAAkFC,SAAlF,GAAyGV,KAAzG,CAAkFU,SAAlF;EAAA,IAAgGC,IAAhG,4BAAyGX,KAAzG;;EAEA,IAAMY,GAAG,GAAG,CAACT,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,KAA8DI,SAAS,cAAOA,SAAP,IAAqB,EAA5F,CAAZ;EAEA,oBACE,MAAC,sBAAD;IAAwB,EAAE,EAAET,EAA5B;IAAgC,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;IAAA,wBACE,MAAC,mBAAD;MACE,IAAI,EAAC,QADP;MAEE,EAAE,0BAAmBN,EAAnB,CAFJ;MAGE,QAAQ,EAAE,CAACK,QAAD,GAAY,CAAZ,GAAgBO,SAH5B;MAIE,OAAO,EAAE,mBAAM;QACb,IAAI,CAACP,QAAL,EAAe;UACbJ,QAAQ,CAACD,EAAD,CAAR;QACD;MACF,CARH;MASE,SAAS,EAAE,mBAACa,CAAD,EAAY;QACrB,IAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuBb,QAAQ,CAACD,EAAD,CAAR;MACxB,CAXH;MAYE,WAAW,EAAEH,yBAZf;MAaE,SAAS,EAAEc;IAbb,GAcMD,IAdN;MAAA,WAeGN,IAAI,iBAAId,KAAK,CAACyB,YAAN,CAAmBX,IAAnB,EAA+C;QAAEY,IAAI,EAAE;MAAR,CAA/C,CAfX,eAgBE;QAAA,UAAOb;MAAP,EAhBF,EAiBGD,QAAQ,gBAAG,KAAC,WAAD,CAAa,SAAb;QAAuB,KAAK,EAAEX,MAAM,CAAC0B,WAArC;QAAkD,IAAI,EAAC;MAAvD,EAAH,gBAAsE,KAAC,WAAD,CAAa,WAAb;QAAyB,KAAK,EAAE1B,MAAM,CAAC2B,WAAvC;QAAoD,IAAI,EAAC;MAAzD,EAjBjF;IAAA,GADF,EAoBGhB,QAAQ,iBACP,KAAC,iBAAD;MAAmB,4CAAmCF,EAAnC,CAAnB;MAA4D,OAAO,EAAEO,OAArE;MAAA,uBACE,KAAC,UAAD;QAAA,UAAaC;MAAb;IADF,EArBJ;EAAA,EADF;AA4BD,CAjCD;;;EANEP,Q;EACAC,Q;EACAI,M;EACAC,O;;AAsCF,eAAeT,aAAf"}
+{"version":3,"file":"AccordionItem.js","names":["React","COLORS","ComponentS","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","defaultOnMouseDownHandler","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","rest","cls","undefined","e","key","cloneElement","size","neutral_800","neutral_600"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS, 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, padding, children, className, ...rest } = props;\n\n  const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '');\n\n  return (\n    <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n      <ItemHeaderContainer\n        role=\"button\"\n        aria-expanded={isActive}\n        id={`itemHeaderFor_${id}`}\n        aria-controls={`itemContentFor_${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={cls}\n        {...rest}>\n        {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n        <span>{title}</span>\n        <div aria-hidden=\"true\">\n          {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n        </div>\n      </ItemHeaderContainer>\n      {isActive && (\n        <ItemBodyContainer id={`itemContentFor_${id}`} padding={padding}>\n          <ComponentS>{children}</ComponentS>\n        </ItemBodyContainer>\n      )}\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,EAAiBC,UAAjB,QAAmC,IAAnC;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;EAC1G,IAAQC,EAAR,GAAyGD,KAAzG,CAAQC,EAAR;EAAA,IAAYC,QAAZ,GAAyGF,KAAzG,CAAYE,QAAZ;EAAA,IAAsBC,QAAtB,GAAyGH,KAAzG,CAAsBG,QAAtB;EAAA,IAAgCC,KAAhC,GAAyGJ,KAAzG,CAAgCI,KAAhC;EAAA,IAAuCC,IAAvC,GAAyGL,KAAzG,CAAuCK,IAAvC;EAAA,IAA6CC,QAA7C,GAAyGN,KAAzG,CAA6CM,QAA7C;EAAA,IAAuDC,MAAvD,GAAyGP,KAAzG,CAAuDO,MAAvD;EAAA,IAA+DC,OAA/D,GAAyGR,KAAzG,CAA+DQ,OAA/D;EAAA,IAAwEC,QAAxE,GAAyGT,KAAzG,CAAwES,QAAxE;EAAA,IAAkFC,SAAlF,GAAyGV,KAAzG,CAAkFU,SAAlF;EAAA,IAAgGC,IAAhG,4BAAyGX,KAAzG;;EAEA,IAAMY,GAAG,GAAG,CAACT,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,KAA8DI,SAAS,cAAOA,SAAP,IAAqB,EAA5F,CAAZ;EAEA,oBACE,MAAC,sBAAD;IAAwB,EAAE,EAAET,EAA5B;IAAgC,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;IAAA,wBACE,MAAC,mBAAD;MACE,IAAI,EAAC,QADP;MAEE,iBAAeJ,QAFjB;MAGE,EAAE,0BAAmBF,EAAnB,CAHJ;MAIE,0CAAiCA,EAAjC,CAJF;MAKE,QAAQ,EAAE,CAACK,QAAD,GAAY,CAAZ,GAAgBO,SAL5B;MAME,OAAO,EAAE,mBAAM;QACb,IAAI,CAACP,QAAL,EAAe;UACbJ,QAAQ,CAACD,EAAD,CAAR;QACD;MACF,CAVH;MAWE,SAAS,EAAE,mBAACa,CAAD,EAAY;QACrB,IAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuBb,QAAQ,CAACD,EAAD,CAAR;MACxB,CAbH;MAcE,WAAW,EAAEH,yBAdf;MAeE,SAAS,EAAEc;IAfb,GAgBMD,IAhBN;MAAA,WAiBGN,IAAI,iBAAId,KAAK,CAACyB,YAAN,CAAmBX,IAAnB,EAA+C;QAAEY,IAAI,EAAE;MAAR,CAA/C,CAjBX,eAkBE;QAAA,UAAOb;MAAP,EAlBF,eAmBE;QAAK,eAAY,MAAjB;QAAA,UACGD,QAAQ,gBAAG,KAAC,WAAD,CAAa,SAAb;UAAuB,KAAK,EAAEX,MAAM,CAAC0B,WAArC;UAAkD,IAAI,EAAC;QAAvD,EAAH,gBAAsE,KAAC,WAAD,CAAa,WAAb;UAAyB,KAAK,EAAE1B,MAAM,CAAC2B,WAAvC;UAAoD,IAAI,EAAC;QAAzD;MADjF,EAnBF;IAAA,GADF,EAwBGhB,QAAQ,iBACP,KAAC,iBAAD;MAAmB,EAAE,2BAAoBF,EAApB,CAArB;MAA+C,OAAO,EAAEO,OAAxD;MAAA,uBACE,KAAC,UAAD;QAAA,UAAaC;MAAb;IADF,EAzBJ;EAAA,EADF;AAgCD,CArCD;;;EANEP,Q;EACAC,Q;EACAI,M;EACAC,O;;AA0CF,eAAeT,aAAf"}

package/dist/Accordion/ContentAccordion.cjs

@@ -148,6 +148,8 @@ var ContentAccordion = function ContentAccordion(_ref) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItemHeader, _objectSpread(_objectSpread({
         role: "button",
         id: "headerFor_".concat(id),
+        "aria-expanded": isActive,
+        "aria-controls": "itemContentFor_".concat(id),
         tabIndex: !disabled ? 0 : undefined,
         onMouseDown: _common.defaultOnMouseDownHandler,
         onClick: function onClick() {
@@ -163,7 +165,7 @@ var ContentAccordion = function ContentAccordion(_ref) {
           children: title
         })]
       })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItemContent, {
-        "aria-describedby": "headerFor_".concat(id),
+        id: "itemContentFor_".concat(id),
         children: [header && /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemContentHeader, {
           children: header
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemContentBody, {

package/dist/Accordion/ContentAccordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentAccordion.cjs","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","ComponentSStyling","ComponentTextStyle","Regular","Bold","black","ParagraphSStyling","ParagraphTextStyle","ComponentMStyling","ParagraphMStyling","ComponentLStyling","ParagraphLStyling","ContentAccordion","items","multi","size","Size","Medium","className","rest","React","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","title","header","body","footer","isActive","concat","undefined","defaultOnMouseDownHandler","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"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 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\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 extends React.HTMLAttributes<HTMLDivElement> {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n                                                                                   items,\n                                                                                   multi = false,\n                                                                                   size = Size.Medium,\n                                                                                   className,\n                                                                                   ...rest\n                                                                                 }) => {\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (multi) {\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\n    } else {\n      let active = items.find((item) => !!item.active)?.id;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [items, 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 (multi) {\n        setOpened([...opened, item.id]);\n      } else {\n        setOpened([item.id]);\n      }\n    }\n  };\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\n    const isActive = opened.includes(id);\n\n    return (\n      <ContentAccordionItem key={id} id={`item_${id}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\n          role=\"button\"\n          id={`headerFor_${id}`}\n          tabIndex={!disabled ? 0 : undefined}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onItemClick(item)}\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n          {...rest}>\n          <ContentAccordionItemHeaderIcon>\n            {multi ? isActive ? <SystemIcons.Minus/> : <SystemIcons.Plus/> : isActive ?\n              <SystemIcons.ChevronDown/> : <SystemIcons.ChevronRight/>}\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent aria-describedby={`headerFor_${id}`}>\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  };\n\n  const cls = `${size} ${className ?? ''}`.trim();\n\n  return <ContentAccordionWrapper className={cls}>\n    {items.map((item) => renderItem(item))}\n  </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}
+{"version":3,"file":"ContentAccordion.cjs","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","ComponentSStyling","ComponentTextStyle","Regular","Bold","black","ParagraphSStyling","ParagraphTextStyle","ComponentMStyling","ParagraphMStyling","ComponentLStyling","ParagraphLStyling","ContentAccordion","items","multi","size","Size","Medium","className","rest","React","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","title","header","body","footer","isActive","concat","undefined","defaultOnMouseDownHandler","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"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 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\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 extends React.HTMLAttributes<HTMLDivElement> {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n                                                                                   items,\n                                                                                   multi = false,\n                                                                                   size = Size.Medium,\n                                                                                   className,\n                                                                                   ...rest\n                                                                                 }) => {\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (multi) {\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\n    } else {\n      let active = items.find((item) => !!item.active)?.id;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [items, 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 (multi) {\n        setOpened([...opened, item.id]);\n      } else {\n        setOpened([item.id]);\n      }\n    }\n  };\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\n    const isActive = opened.includes(id);\n\n    return (\n      <ContentAccordionItem key={id} id={`item_${id}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\n          role=\"button\"\n          id={`headerFor_${id}`}\n          aria-expanded={isActive}\n          aria-controls={`itemContentFor_${id}`}\n          tabIndex={!disabled ? 0 : undefined}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onItemClick(item)}\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n          {...rest}>\n          <ContentAccordionItemHeaderIcon>\n            {multi ? isActive ? <SystemIcons.Minus/> : <SystemIcons.Plus/> : isActive ?\n              <SystemIcons.ChevronDown/> : <SystemIcons.ChevronRight/>}\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent id={`itemContentFor_${id}`}>\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  };\n\n  const cls = `${size} ${className ?? ''}`.trim();\n\n  return <ContentAccordionWrapper className={cls}>\n    {items.map((item) => renderItem(item))}\n  </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}

package/dist/Accordion/ContentAccordion.js

@@ -99,6 +99,8 @@ export var ContentAccordion = function ContentAccordion(_ref) {
       children: [/*#__PURE__*/_jsxs(ContentAccordionItemHeader, _objectSpread(_objectSpread({
         role: "button",
         id: "headerFor_".concat(id),
+        "aria-expanded": isActive,
+        "aria-controls": "itemContentFor_".concat(id),
         tabIndex: !disabled ? 0 : undefined,
         onMouseDown: defaultOnMouseDownHandler,
         onClick: function onClick() {
@@ -114,7 +116,7 @@ export var ContentAccordion = function ContentAccordion(_ref) {
           children: title
         })]
       })), /*#__PURE__*/_jsxs(ContentAccordionItemContent, {
-        "aria-describedby": "headerFor_".concat(id),
+        id: "itemContentFor_".concat(id),
         children: [header && /*#__PURE__*/_jsx(ContentAccordionItemContentHeader, {
           children: header
         }), /*#__PURE__*/_jsx(ContentAccordionItemContentBody, {

package/dist/Accordion/ContentAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentAccordion.js","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","items","multi","size","Medium","className","rest","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","title","header","body","footer","isActive","concat","undefined","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"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 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\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 extends React.HTMLAttributes<HTMLDivElement> {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n                                                                                   items,\n                                                                                   multi = false,\n                                                                                   size = Size.Medium,\n                                                                                   className,\n                                                                                   ...rest\n                                                                                 }) => {\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (multi) {\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\n    } else {\n      let active = items.find((item) => !!item.active)?.id;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [items, 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 (multi) {\n        setOpened([...opened, item.id]);\n      } else {\n        setOpened([item.id]);\n      }\n    }\n  };\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\n    const isActive = opened.includes(id);\n\n    return (\n      <ContentAccordionItem key={id} id={`item_${id}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\n          role=\"button\"\n          id={`headerFor_${id}`}\n          tabIndex={!disabled ? 0 : undefined}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onItemClick(item)}\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n          {...rest}>\n          <ContentAccordionItemHeaderIcon>\n            {multi ? isActive ? <SystemIcons.Minus/> : <SystemIcons.Plus/> : isActive ?\n              <SystemIcons.ChevronDown/> : <SystemIcons.ChevronRight/>}\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent aria-describedby={`headerFor_${id}`}>\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  };\n\n  const cls = `${size} ${className ?? ''}`.trim();\n\n  return <ContentAccordionWrapper className={cls}>\n    {items.map((item) => renderItem(item))}\n  </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}
+{"version":3,"file":"ContentAccordion.js","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","items","multi","size","Medium","className","rest","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","title","header","body","footer","isActive","concat","undefined","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"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 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\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 extends React.HTMLAttributes<HTMLDivElement> {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n                                                                                   items,\n                                                                                   multi = false,\n                                                                                   size = Size.Medium,\n                                                                                   className,\n                                                                                   ...rest\n                                                                                 }) => {\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (multi) {\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\n    } else {\n      let active = items.find((item) => !!item.active)?.id;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [items, 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 (multi) {\n        setOpened([...opened, item.id]);\n      } else {\n        setOpened([item.id]);\n      }\n    }\n  };\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\n    const isActive = opened.includes(id);\n\n    return (\n      <ContentAccordionItem key={id} id={`item_${id}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\n          role=\"button\"\n          id={`headerFor_${id}`}\n          aria-expanded={isActive}\n          aria-controls={`itemContentFor_${id}`}\n          tabIndex={!disabled ? 0 : undefined}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onItemClick(item)}\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n          {...rest}>\n          <ContentAccordionItemHeaderIcon>\n            {multi ? isActive ? <SystemIcons.Minus/> : <SystemIcons.Plus/> : isActive ?\n              <SystemIcons.ChevronDown/> : <SystemIcons.ChevronRight/>}\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent id={`itemContentFor_${id}`}>\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  };\n\n  const cls = `${size} ${className ?? ''}`.trim();\n\n  return <ContentAccordionWrapper className={cls}>\n    {items.map((item) => renderItem(item))}\n  </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}

package/dist/Accordion/styles.cjs

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

package/dist/Accordion/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","ItemHeaderContainer","ComponentMStyling","ComponentTextStyle","Regular","neutral_600","focusStyles","primary_20","primary_700","Z_INDEXES","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nexport const ItemHeaderContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  :focus:not(:active) {\n    ${focusStyles}\n  }\n\n  :hover {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  :active {\n    color: ${COLORS.primary_800};\n    background: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.active {\n    color: ${COLORS.neutral_800};\n  }\n\n  &.disabled {\n    background: ${COLORS.white}!important;\n    color: ${COLORS.neutral_300};\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ${COLORS.neutral_300}!important;\n    }\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n  padding: ${(props) => props.padding || '12px 16px'};\n  background: ${COLORS.white};\n`;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAEO,IAAMA,oBAAoB,GAAGC,yBAAA,CAAOC,GAAV,kLAA1B;;;;AAOA,IAAMC,sBAAsB,GAAGF,yBAAA,CAAOC,GAAV,wMAKhB,UAACE,KAAD;EAAA,OAAYA,KAAK,CAACC,gBAAN,uBAAsCC,cAAA,CAAOC,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;;;;AAQA,IAAMC,mBAAmB,GAAGP,yBAAA,CAAOC,GAAV,2sBAQ5B,IAAAO,yBAAA,EAAkBC,0BAAA,CAAmBC,OAArC,EAA8CL,cAAA,CAAOM,WAArD,CAR4B,EAgB1BC,mBAhB0B,EAoBdP,cAAA,CAAOQ,UApBO,EAqBnBR,cAAA,CAAOS,WArBY,EAsBjBC,mBAAA,CAAUC,KAtBO,EA0BnBX,cAAA,CAAOY,WA1BY,EA2BdZ,cAAA,CAAOa,WA3BO,EA4BjBH,mBAAA,CAAUI,MA5BO,EAgCnBd,cAAA,CAAOe,WAhCY,EAoCdf,cAAA,CAAOgB,KApCO,EAqCnBhB,cAAA,CAAOiB,WArCY,EAyCjBjB,cAAA,CAAOiB,WAzCU,CAAzB;;;;AA8CA,IAAMC,mBAAmB,GAAGvB,yBAAA,CAAOC,GAAV,6GAAzB;;;;AAIA,IAAMuB,iBAAiB,GAAGxB,yBAAA,CAAOC,GAAV,+HACjB,UAACE,KAAD;EAAA,OAAWA,KAAK,CAACsB,OAAN,IAAiB,WAA5B;AAAA,CADiB,EAEdpB,cAAA,CAAOgB,KAFO,CAAvB"}
+{"version":3,"file":"styles.cjs","names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","ItemHeaderContainer","ComponentMStyling","ComponentTextStyle","Regular","neutral_600","focusStyles","primary_20","primary_700","Z_INDEXES","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nexport const ItemHeaderContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  div:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  :focus:not(:active) {\n    ${focusStyles}\n  }\n\n  :hover {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  :active {\n    color: ${COLORS.primary_800};\n    background: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.active {\n    color: ${COLORS.neutral_800};\n  }\n\n  &.disabled {\n    background: ${COLORS.white}!important;\n    color: ${COLORS.neutral_300};\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ${COLORS.neutral_300}!important;\n    }\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n  padding: ${(props) => props.padding || '12px 16px'};\n  background: ${COLORS.white};\n`;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAEO,IAAMA,oBAAoB,GAAGC,yBAAA,CAAOC,GAAV,kLAA1B;;;;AAOA,IAAMC,sBAAsB,GAAGF,yBAAA,CAAOC,GAAV,wMAKhB,UAACE,KAAD;EAAA,OAAYA,KAAK,CAACC,gBAAN,uBAAsCC,cAAA,CAAOC,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;;;;AAQA,IAAMC,mBAAmB,GAAGP,yBAAA,CAAOC,GAAV,2sBAQ5B,IAAAO,yBAAA,EAAkBC,0BAAA,CAAmBC,OAArC,EAA8CL,cAAA,CAAOM,WAArD,CAR4B,EAgB1BC,mBAhB0B,EAoBdP,cAAA,CAAOQ,UApBO,EAqBnBR,cAAA,CAAOS,WArBY,EAsBjBC,mBAAA,CAAUC,KAtBO,EA0BnBX,cAAA,CAAOY,WA1BY,EA2BdZ,cAAA,CAAOa,WA3BO,EA4BjBH,mBAAA,CAAUI,MA5BO,EAgCnBd,cAAA,CAAOe,WAhCY,EAoCdf,cAAA,CAAOgB,KApCO,EAqCnBhB,cAAA,CAAOiB,WArCY,EAyCjBjB,cAAA,CAAOiB,WAzCU,CAAzB;;;;AA8CA,IAAMC,mBAAmB,GAAGvB,yBAAA,CAAOC,GAAV,6GAAzB;;;;AAIA,IAAMuB,iBAAiB,GAAGxB,yBAAA,CAAOC,GAAV,+HACjB,UAACE,KAAD;EAAA,OAAWA,KAAK,CAACsB,OAAN,IAAiB,WAA5B;AAAA,CADiB,EAEdpB,cAAA,CAAOgB,KAFO,CAAvB"}

package/dist/Accordion/styles.js

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

package/dist/Accordion/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["styled","COLORS","ComponentMStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemContainer","props","displaySeparator","neutral_100","ItemHeaderContainer","Regular","neutral_600","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nexport const ItemHeaderContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  :focus:not(:active) {\n    ${focusStyles}\n  }\n\n  :hover {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  :active {\n    color: ${COLORS.primary_800};\n    background: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.active {\n    color: ${COLORS.neutral_800};\n  }\n\n  &.disabled {\n    background: ${COLORS.white}!important;\n    color: ${COLORS.neutral_300};\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ${COLORS.neutral_300}!important;\n    }\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n  padding: ${(props) => props.padding || '12px 16px'};\n  background: ${COLORS.white};\n`;\n"],"mappings":";;;;AAAA,OAAOA,MAAP,MAA4B,mBAA5B;AACA,SAASC,MAAT,EAAiBC,iBAAjB,EAAoCC,kBAApC,EAAwDC,WAAxD,QAA2E,WAA3E;AACA,SAASC,SAAT,QAA0B,qBAA1B;AAEA,OAAO,IAAMC,oBAAoB,GAAGN,MAAM,CAACO,GAAV,oKAA1B;AAOP,OAAO,IAAMC,sBAAsB,GAAGR,MAAM,CAACO,GAAV,0LAKhB,UAACE,KAAD;EAAA,OAAYA,KAAK,CAACC,gBAAN,uBAAsCT,MAAM,CAACU,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;AAQP,OAAO,IAAMC,mBAAmB,GAAGZ,MAAM,CAACO,GAAV,6rBAQ5BL,iBAAiB,CAACC,kBAAkB,CAACU,OAApB,EAA6BZ,MAAM,CAACa,WAApC,CARW,EAgB1BV,WAhB0B,EAoBdH,MAAM,CAACc,UApBO,EAqBnBd,MAAM,CAACe,WArBY,EAsBjBX,SAAS,CAACY,KAtBO,EA0BnBhB,MAAM,CAACiB,WA1BY,EA2BdjB,MAAM,CAACkB,WA3BO,EA4BjBd,SAAS,CAACe,MA5BO,EAgCnBnB,MAAM,CAACoB,WAhCY,EAoCdpB,MAAM,CAACqB,KApCO,EAqCnBrB,MAAM,CAACsB,WArCY,EAyCjBtB,MAAM,CAACsB,WAzCU,CAAzB;AA8CP,OAAO,IAAMC,mBAAmB,GAAGxB,MAAM,CAACO,GAAV,+FAAzB;AAIP,OAAO,IAAMkB,iBAAiB,GAAGzB,MAAM,CAACO,GAAV,iHACjB,UAACE,KAAD;EAAA,OAAWA,KAAK,CAACiB,OAAN,IAAiB,WAA5B;AAAA,CADiB,EAEdzB,MAAM,CAACqB,KAFO,CAAvB"}
+{"version":3,"file":"styles.js","names":["styled","COLORS","ComponentMStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemContainer","props","displaySeparator","neutral_100","ItemHeaderContainer","Regular","neutral_600","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nexport const ItemHeaderContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  div:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  :focus:not(:active) {\n    ${focusStyles}\n  }\n\n  :hover {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  :active {\n    color: ${COLORS.primary_800};\n    background: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.active {\n    color: ${COLORS.neutral_800};\n  }\n\n  &.disabled {\n    background: ${COLORS.white}!important;\n    color: ${COLORS.neutral_300};\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ${COLORS.neutral_300}!important;\n    }\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n  padding: ${(props) => props.padding || '12px 16px'};\n  background: ${COLORS.white};\n`;\n"],"mappings":";;;;AAAA,OAAOA,MAAP,MAA4B,mBAA5B;AACA,SAASC,MAAT,EAAiBC,iBAAjB,EAAoCC,kBAApC,EAAwDC,WAAxD,QAA2E,WAA3E;AACA,SAASC,SAAT,QAA0B,qBAA1B;AAEA,OAAO,IAAMC,oBAAoB,GAAGN,MAAM,CAACO,GAAV,oKAA1B;AAOP,OAAO,IAAMC,sBAAsB,GAAGR,MAAM,CAACO,GAAV,0LAKhB,UAACE,KAAD;EAAA,OAAYA,KAAK,CAACC,gBAAN,uBAAsCT,MAAM,CAACU,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;AAQP,OAAO,IAAMC,mBAAmB,GAAGZ,MAAM,CAACO,GAAV,6rBAQ5BL,iBAAiB,CAACC,kBAAkB,CAACU,OAApB,EAA6BZ,MAAM,CAACa,WAApC,CARW,EAgB1BV,WAhB0B,EAoBdH,MAAM,CAACc,UApBO,EAqBnBd,MAAM,CAACe,WArBY,EAsBjBX,SAAS,CAACY,KAtBO,EA0BnBhB,MAAM,CAACiB,WA1BY,EA2BdjB,MAAM,CAACkB,WA3BO,EA4BjBd,SAAS,CAACe,MA5BO,EAgCnBnB,MAAM,CAACoB,WAhCY,EAoCdpB,MAAM,CAACqB,KApCO,EAqCnBrB,MAAM,CAACsB,WArCY,EAyCjBtB,MAAM,CAACsB,WAzCU,CAAzB;AA8CP,OAAO,IAAMC,mBAAmB,GAAGxB,MAAM,CAACO,GAAV,+FAAzB;AAIP,OAAO,IAAMkB,iBAAiB,GAAGzB,MAAM,CAACO,GAAV,iHACjB,UAACE,KAAD;EAAA,OAAWA,KAAK,CAACiB,OAAN,IAAiB,WAA5B;AAAA,CADiB,EAEdzB,MAAM,CAACqB,KAFO,CAAvB"}

package/dist/AuthPage/AuthPage.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type AuthPageProps = {
     /** set this to 'false' to hide the left side illustration/information section */
     showInformationSection: boolean;

package/dist/Banners/Banner.cjs

@@ -35,6 +35,8 @@ var _HyperLink = require("../HyperLink");
 
 var _HyperLink2 = require("../HyperLink/HyperLink");
 
+var _utils = require("../utils/utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _excluded = ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction", "fullWidth", "className"];
@@ -49,7 +51,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link{\n      color: ", ";\n    }\n    &:visited{\n      color: ", ";\n    }\n    &:focus,\n    &:active{\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  \n  &.full-width-banner{\n    margin: 8px;\n  }\n"])), function (props) {
+var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link {\n      color: ", ";\n    }\n    &:visited {\n      color: ", ";\n    }\n    &:focus,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n"])), function (props) {
   return props.$type ? props.$type : _styles.COLORS.correct_100;
 }, _styles.COLORS.black, function (props) {
   return props.bottom ? 'auto' : '0';
@@ -61,7 +63,7 @@ var BannerContainer = _styledComponents.default.div(_templateObject || (_templat
   return props.linkFocused;
 }, _styles.COLORS.white);
 
-var BannerCenter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n  \n  .full-width-banner & {\n    margin: 0 16px;\n\n    ", " {\n      margin: 0 24px;\n    }\n    ", " {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium{\n      margin: 0 24px;\n    }\n\n    &.large{\n      margin: 0 48px;\n    }\n  }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
+var BannerCenter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ", " {\n      margin: 0 24px;\n    }\n    ", " {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 24px;\n    }\n\n    &.large {\n      margin: 0 48px;\n    }\n  }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
 
 var ButtonWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 0 auto;\n"])));
 
@@ -88,7 +90,7 @@ var Banner = function Banner(_ref) {
       className = _ref.className,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
-  var _React$useState = React.useState(window.innerWidth),
+  var _React$useState = React.useState((0, _utils.hasWindow)() ? window.innerWidth : -1),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       width = _React$useState2[0],
       setWidth = _React$useState2[1];
@@ -99,7 +101,10 @@ var Banner = function Banner(_ref) {
     }
 
     window.addEventListener('resize', handleResize);
-  });
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
   var bannerParams = {
     typeColor: _styles.COLORS.primary_100,
     accentColor: _styles.COLORS.primary_700,

package/dist/Banners/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.cjs","names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentMStyling","ComponentTextStyle","Regular","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string, linkVisited: string, linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ${StyledLink} {\n    &:link{\n      color: ${(props) => props.link};\n    }\n    &:visited{\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active{\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n  \n  &.full-width-banner{\n    margin: 8px;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n  \n  .full-width-banner & {\n    margin: 0 16px;\n\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium{\n      margin: 0 24px;\n    }\n\n    &.large{\n      margin: 0 48px;\n    }\n  }\n`;\n\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n  fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n                                                        size,\n                                                        type = 'neutral',\n                                                        children,\n                                                        bottom,\n                                                        testId,\n                                                        linkText,\n                                                        link,\n                                                        onClose,\n                                                        icon,\n                                                        noIcon,\n                                                        linkAction,\n                                                        fullWidth,\n                                                        className,\n                                                        ...rest\n                                                      }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: Tip,\n    containerType: type,\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800\n  };\n  switch (type) {\n    case 'warning':\n      bannerParams.typeColor = COLORS.warning_100;\n      bannerParams.accentColor = COLORS.warning_700;\n      bannerParams.focusBgColor = COLORS.warning_200;\n      bannerParams.hoverColor = COLORS.warning_20;\n      bannerParams.icon = Help;\n      bannerParams.closeIconColor = COLORS.warning_500;\n      bannerParams.linkVisited = COLORS.warning_800;\n      bannerParams.linkFocused = COLORS.warning_800;\n      break;\n    case 'critical':\n      bannerParams.typeColor = COLORS.critical_100;\n      bannerParams.accentColor = COLORS.critical_700;\n      bannerParams.focusBgColor = COLORS.critical_200;\n      bannerParams.hoverColor = COLORS.critical_20;\n      bannerParams.icon = TechnicalWarning;\n      bannerParams.closeIconColor = COLORS.critical_500;\n      bannerParams.linkVisited = COLORS.critical_800;\n      bannerParams.linkFocused = COLORS.critical_800;\n      break;\n    case 'positive':\n      bannerParams.typeColor = COLORS.correct_100;\n      bannerParams.accentColor = COLORS.correct_700;\n      bannerParams.focusBgColor = COLORS.correct_200;\n      bannerParams.hoverColor = COLORS.correct_20;\n      bannerParams.icon = ThumbsUp;\n      bannerParams.closeIconColor = COLORS.correct_500;\n      bannerParams.linkVisited = COLORS.correct_800;\n      bannerParams.linkFocused = COLORS.correct_800;\n      break;\n  }\n  \n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n  return (\n    <BannerContainer data-testid={testId}\n                     $type={bannerParams.typeColor}\n                     linkFocused={bannerParams.linkFocused}\n                     linkVisited={bannerParams.linkVisited}\n                     link={bannerParams.accentColor}\n                     hover={bannerParams.hoverColor}\n                     bottom={bottom}\n                     className={cls}\n                     {...rest}>\n      <BannerCenter style={{color: bannerParams.accentColor}} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"mappings":"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"}
+{"version":3,"file":"Banner.cjs","names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentMStyling","ComponentTextStyle","Regular","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","hasWindow","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink/HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ${StyledLink} {\n    &:link {\n      color: ${(props) => props.link};\n    }\n    &:visited {\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active {\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 24px;\n    }\n\n    &.large {\n      margin: 0 48px;\n    }\n  }\n`;\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n  fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n  size,\n  type = 'neutral',\n  children,\n  bottom,\n  testId,\n  linkText,\n  link,\n  onClose,\n  icon,\n  noIcon,\n  linkAction,\n  fullWidth,\n  className,\n  ...rest\n}) => {\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: Tip,\n    containerType: type,\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800,\n  };\n  switch (type) {\n    case 'warning':\n      bannerParams.typeColor = COLORS.warning_100;\n      bannerParams.accentColor = COLORS.warning_700;\n      bannerParams.focusBgColor = COLORS.warning_200;\n      bannerParams.hoverColor = COLORS.warning_20;\n      bannerParams.icon = Help;\n      bannerParams.closeIconColor = COLORS.warning_500;\n      bannerParams.linkVisited = COLORS.warning_800;\n      bannerParams.linkFocused = COLORS.warning_800;\n      break;\n    case 'critical':\n      bannerParams.typeColor = COLORS.critical_100;\n      bannerParams.accentColor = COLORS.critical_700;\n      bannerParams.focusBgColor = COLORS.critical_200;\n      bannerParams.hoverColor = COLORS.critical_20;\n      bannerParams.icon = TechnicalWarning;\n      bannerParams.closeIconColor = COLORS.critical_500;\n      bannerParams.linkVisited = COLORS.critical_800;\n      bannerParams.linkFocused = COLORS.critical_800;\n      break;\n    case 'positive':\n      bannerParams.typeColor = COLORS.correct_100;\n      bannerParams.accentColor = COLORS.correct_700;\n      bannerParams.focusBgColor = COLORS.correct_200;\n      bannerParams.hoverColor = COLORS.correct_20;\n      bannerParams.icon = ThumbsUp;\n      bannerParams.closeIconColor = COLORS.correct_500;\n      bannerParams.linkVisited = COLORS.correct_800;\n      bannerParams.linkFocused = COLORS.correct_800;\n      break;\n  }\n\n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n  return (\n    <BannerContainer\n      data-testid={testId}\n      $type={bannerParams.typeColor}\n      linkFocused={bannerParams.linkFocused}\n      linkVisited={bannerParams.linkVisited}\n      link={bannerParams.accentColor}\n      hover={bannerParams.hoverColor}\n      bottom={bottom}\n      className={cls}\n      {...rest}>\n      <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"mappings":"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"}

package/dist/Banners/Banner.js

@@ -20,13 +20,14 @@ import { getButtonStyle } from './styles';
 import { ComponentMStyling, ComponentResponsive } from '../styles';
 import { HyperLink } from '../HyperLink';
 import { StyledLink } from '../HyperLink/HyperLink';
+import { hasWindow } from '../utils/utils';
 /**
  * Styles for <Banner />
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link{\n      color: ", ";\n    }\n    &:visited{\n      color: ", ";\n    }\n    &:focus,\n    &:active{\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  \n  &.full-width-banner{\n    margin: 8px;\n  }\n"])), function (props) {
+var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link {\n      color: ", ";\n    }\n    &:visited {\n      color: ", ";\n    }\n    &:focus,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n"])), function (props) {
   return props.$type ? props.$type : COLORS.correct_100;
 }, COLORS.black, function (props) {
   return props.bottom ? 'auto' : '0';
@@ -37,7 +38,7 @@ var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTe
 }, function (props) {
   return props.linkFocused;
 }, COLORS.white);
-var BannerCenter = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n  \n  .full-width-banner & {\n    margin: 0 16px;\n\n    ", " {\n      margin: 0 24px;\n    }\n    ", " {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium{\n      margin: 0 24px;\n    }\n\n    &.large{\n      margin: 0 48px;\n    }\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, null), BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
+var BannerCenter = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ", " {\n      margin: 0 24px;\n    }\n    ", " {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 24px;\n    }\n\n    &.large {\n      margin: 0 48px;\n    }\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, null), BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
 var ButtonWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0 0 0 auto;\n"])));
 var ButtonContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: contents;\n  ", ";\n"])), function (props) {
   return props.$type ? getButtonStyle(props.$type) : null;
@@ -61,7 +62,7 @@ var Banner = function Banner(_ref) {
       className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var _React$useState = React.useState(window.innerWidth),
+  var _React$useState = React.useState(hasWindow() ? window.innerWidth : -1),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       width = _React$useState2[0],
       setWidth = _React$useState2[1];
@@ -72,7 +73,10 @@ var Banner = function Banner(_ref) {
     }
 
     window.addEventListener('resize', handleResize);
-  });
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
   var bannerParams = {
     typeColor: COLORS.primary_100,
     accentColor: COLORS.primary_700,