@laerdal/life-react-components 1.2.2-dev.8 → 1.3.1-dev.1.full

package/dist/esm/Accordion/AccordionItem.js

@@ -0,0 +1,70 @@
+import _pt from "prop-types";
+import React from 'react';
+import { COLORS, ComponentM, ComponentS } from '..';
+import { SystemIcons } from '../icons';
+import { AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';
+
+const AccordionItem = props => {
+  const {
+    id,
+    onSelect,
+    isActive,
+    title,
+    icon,
+    disabled,
+    isLast
+  } = props;
+  const supressFocusRef = React.useRef(null);
+  const [tabbedHere, setTabbedHere] = React.useState(false);
+  React.useEffect(() => {
+    !!disabled && setTabbedHere(false);
+  }, [disabled]);
+  return /*#__PURE__*/React.createElement(AccordionItemContainer, {
+    id: id,
+    displaySeparator: !isActive && !isLast
+  }, /*#__PURE__*/React.createElement(ItemHeaderContainer, {
+    tabIndex: !disabled ? 0 : -1,
+    onClick: () => {
+      if (!disabled) {
+        onSelect(id);
+      }
+    },
+    onKeyDown: e => {
+      if (e.key == 'Enter') onSelect(id);
+    },
+    onBlur: () => {
+      setTabbedHere(false);
+      supressFocusRef.current = false;
+    },
+    onFocus: () => {
+      if (!disabled) {
+        if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
+      }
+    },
+    onMouseDown: () => {
+      if (!disabled && !tabbedHere) supressFocusRef.current = true;
+    },
+    tabbedHere: tabbedHere,
+    isActive: isActive,
+    isDisabled: disabled ?? false
+  }, icon && /*#__PURE__*/React.cloneElement(icon, {
+    size: '24px'
+  }), /*#__PURE__*/React.createElement(ComponentM, {
+    className: "headerLabel",
+    color: isActive ? COLORS.neutral_800 : disabled ? COLORS.neutral_300 : COLORS.neutral_600
+  }, title), isActive ? /*#__PURE__*/React.createElement(SystemIcons.ChevronUp, {
+    color: COLORS.neutral_800,
+    size: "20px"
+  }) : /*#__PURE__*/React.createElement(SystemIcons.ChevronDown, {
+    color: COLORS.neutral_600,
+    size: "20px"
+  })), isActive && /*#__PURE__*/React.createElement(ItemBodyContainer, null, /*#__PURE__*/React.createElement(ComponentS, null, props.children)));
+};
+
+AccordionItem.propTypes = {
+  onSelect: _pt.func.isRequired,
+  isActive: _pt.bool.isRequired,
+  isLast: _pt.bool.isRequired
+};
+export default AccordionItem;
+//# sourceMappingURL=AccordionItem.js.map

package/dist/esm/Accordion/AccordionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Accordion/AccordionItem.tsx"],"names":["React","COLORS","ComponentM","ComponentS","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","supressFocusRef","useRef","tabbedHere","setTabbedHere","useState","useEffect","e","key","current","cloneElement","size","neutral_800","neutral_300","neutral_600","children"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { COLORS, ComponentM, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, HeaderIconContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n  onSelect: (id: string) => void;\n  isActive: boolean;\n  isLast: boolean;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n  const { id, onSelect, isActive, title, icon, disabled, isLast } = props;\n\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    !!disabled && setTabbedHere(false);\n  }, [disabled]);\n\n  return (\n    <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n      <ItemHeaderContainer\n        tabIndex={!disabled ? 0 : -1}\n        onClick={() => {\n          if (!disabled) {\n            onSelect(id);\n          }\n        }}\n        onKeyDown={(e: any) => {\n          if(e.key == 'Enter')\n            onSelect(id);\n        }}\n        onBlur={() => {\n          setTabbedHere(false);\n          supressFocusRef.current = false;\n        }}\n        onFocus={() => {\n          if(!disabled) {\n            if (!supressFocusRef.current) setTabbedHere(true);\n            else supressFocusRef.current = false;\n          }\n        }}\n        onMouseDown={() => {\n          if (!disabled && !tabbedHere) supressFocusRef.current = true;\n        }}\n        tabbedHere={tabbedHere}\n        isActive={isActive}\n        isDisabled={disabled ?? false}>\n        {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n        <ComponentM className=\"headerLabel\" color={isActive ? COLORS.neutral_800 : disabled ? COLORS.neutral_300 : COLORS.neutral_600}>{title}</ComponentM>\n        {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n      </ItemHeaderContainer>\n      {isActive && (\n        <ItemBodyContainer>\n          <ComponentS>{props.children}</ComponentS>\n        </ItemBodyContainer>\n      )}\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.js"}

package/dist/esm/Accordion/AccordionMenu.js

@@ -0,0 +1,61 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import AccordionItem from './AccordionItem';
+import { AccordionMenuWrapper } from './styles';
+
+const AccordionMenu = ({
+  items,
+  selectedItems,
+  setSelectedItems,
+  onSelect,
+  multipleActive
+}) => {
+  const [builtinSelectedItems, builtinSetSelectedItems] = React.useState([]);
+
+  const getCollection = () => {
+    return selectedItems ? selectedItems : builtinSelectedItems;
+  };
+
+  const getUpdateFunction = () => {
+    return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;
+  };
+
+  const onSelected = id => {
+    const collection = getCollection();
+    const updateFunc = getUpdateFunction();
+    const isActive = !!collection.find(x => x == id);
+
+    if (multipleActive) {
+      if (isActive) updateFunc(collection.filter(x => x != id));else updateFunc([...collection, id]);
+    } else updateFunc(isActive ? [] : [id]);
+
+    onSelect && onSelect(id);
+  };
+
+  return /*#__PURE__*/React.createElement(AccordionMenuWrapper, null, items.map(item => /*#__PURE__*/React.createElement(AccordionItem, {
+    key: item.id,
+    disabled: item.disabled,
+    id: item.id,
+    title: item.title,
+    icon: item.icon,
+    isActive: !!getCollection().find(x => x == item.id),
+    isLast: items.indexOf(item) === items.length - 1,
+    onSelect: onSelected
+  }, item.children)));
+};
+
+AccordionMenu.propTypes = {
+  items: _pt.arrayOf(_pt.shape({
+    id: _pt.string.isRequired,
+    disabled: _pt.bool,
+    title: _pt.string.isRequired,
+    icon: _pt.node,
+    children: _pt.node.isRequired
+  })).isRequired,
+  selectedItems: _pt.arrayOf(_pt.string),
+  setSelectedItems: _pt.func,
+  onSelect: _pt.func,
+  multipleActive: _pt.bool
+};
+export default AccordionMenu;
+//# sourceMappingURL=AccordionMenu.js.map

package/dist/esm/Accordion/AccordionMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Accordion/AccordionMenu.tsx"],"names":["React","AccordionItem","AccordionMenuWrapper","AccordionMenu","items","selectedItems","setSelectedItems","onSelect","multipleActive","builtinSelectedItems","builtinSetSelectedItems","useState","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","item","disabled","title","icon","indexOf","length","children"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,SAASC,oBAAT,QAAqC,UAArC;;AAkBA,MAAMC,aAAsD,GAAG,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,aAAT;AAAwBC,EAAAA,gBAAxB;AAA0CC,EAAAA,QAA1C;AAAoDC,EAAAA;AAApD,CAAD,KAA0F;AAEvJ,QAAM,CAACC,oBAAD,EAAuBC,uBAAvB,IAAkDV,KAAK,CAACW,QAAN,CAAyB,EAAzB,CAAxD;;AAEA,QAAMC,aAAa,GAAG,MAAM;AAC1B,WAAOP,aAAa,GAAGA,aAAH,GAAmBI,oBAAvC;AACD,GAFD;;AAIA,QAAMI,iBAAiB,GAAG,MAAM;AAC9B,WAAOP,gBAAgB,GAAGA,gBAAH,GAAsBI,uBAA7C;AACD,GAFD;;AAIA,QAAMI,UAAU,GAAIC,EAAD,IAAgB;AACjC,UAAMC,UAAU,GAAGJ,aAAa,EAAhC;AACA,UAAMK,UAAU,GAAGJ,iBAAiB,EAApC;AAEA,UAAMK,QAAQ,GAAG,CAAC,CAACF,UAAU,CAACG,IAAX,CAAgBC,CAAC,IAAIA,CAAC,IAAIL,EAA1B,CAAnB;;AACA,QAAGP,cAAH,EAAmB;AACjB,UAAGU,QAAH,EACED,UAAU,CAACD,UAAU,CAACK,MAAX,CAAkBD,CAAC,IAAIA,CAAC,IAAIL,EAA5B,CAAD,CAAV,CADF,KAIEE,UAAU,CAAC,CAAC,GAAGD,UAAJ,EAAgBD,EAAhB,CAAD,CAAV;AACH,KAND,MAQEE,UAAU,CAACC,QAAQ,GAAG,EAAH,GAAQ,CAACH,EAAD,CAAjB,CAAV;;AAEFR,IAAAA,QAAQ,IAAIA,QAAQ,CAACQ,EAAD,CAApB;AACD,GAhBD;;AAkBA,sBACE,oBAAC,oBAAD,QACGX,KAAK,CAACkB,GAAN,CAAWC,IAAD,iBACT,oBAAC,aAAD;AACE,IAAA,GAAG,EAAEA,IAAI,CAACR,EADZ;AAEE,IAAA,QAAQ,EAAEQ,IAAI,CAACC,QAFjB;AAGE,IAAA,EAAE,EAAED,IAAI,CAACR,EAHX;AAIE,IAAA,KAAK,EAAEQ,IAAI,CAACE,KAJd;AAKE,IAAA,IAAI,EAAEF,IAAI,CAACG,IALb;AAME,IAAA,QAAQ,EAAE,CAAC,CAACd,aAAa,GAAGO,IAAhB,CAAqBC,CAAC,IAAIA,CAAC,IAAIG,IAAI,CAACR,EAApC,CANd;AAOE,IAAA,MAAM,EAAEX,KAAK,CAACuB,OAAN,CAAcJ,IAAd,MAAwBnB,KAAK,CAACwB,MAAN,GAAe,CAPjD;AAQE,IAAA,QAAQ,EAAEd;AARZ,KASGS,IAAI,CAACM,QATR,CADD,CADH,CADF;AAiBD,CA/CD;;;AAfEzB,EAAAA,K;AAQAW,IAAAA,E;AACAS,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,I;AACAG,IAAAA,Q;;AAXAxB,EAAAA,a;AACAC,EAAAA,gB;AACAC,EAAAA,Q;AACAC,EAAAA,c;;AA4DF,eAAeL,aAAf","sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps {\n  items: AccordionItemProps[];\n  selectedItems?: string[];\n  setSelectedItems?: (a: string[]) => void;\n  onSelect?: (id: string) => void;\n  multipleActive?: boolean;\n}\n\nexport interface AccordionItemProps {\n  id: string;\n  disabled?: boolean;\n  title: string;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = ({ items, selectedItems, setSelectedItems, onSelect, multipleActive }: AccordionProps) => {\n\n  const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n  const getCollection = () => {\n    return selectedItems ? selectedItems : builtinSelectedItems;\n  };\n\n  const getUpdateFunction = () => {\n    return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n  }\n\n  const onSelected = (id: string) => {\n    const collection = getCollection();\n    const updateFunc = getUpdateFunction();\n\n    const isActive = !!collection.find(x => x == id);\n    if(multipleActive) {\n      if(isActive)\n        updateFunc(collection.filter(x => x != id));\n      \n      else \n        updateFunc([...collection, id]);\n    }\n    else\n      updateFunc(isActive ? [] : [id]);\n\n    onSelect && onSelect(id);\n  };\n\n  return (\n    <AccordionMenuWrapper>\n      {items.map((item) => (\n        <AccordionItem\n          key={item.id}\n          disabled={item.disabled}\n          id={item.id}\n          title={item.title}\n          icon={item.icon}\n          isActive={!!getCollection().find(x => x == item.id)}\n          isLast={items.indexOf(item) === items.length - 1}\n          onSelect={onSelected}>\n          {item.children}\n        </AccordionItem>\n      ))}\n    </AccordionMenuWrapper>\n  );\n};\n\nexport default AccordionMenu;\n"],"file":"AccordionMenu.js"}

package/dist/esm/Accordion/__tests__/AccordionMenu.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+import AccordionMenu from '../AccordionMenu';
+const accordionItems = [{
+  id: 'test1_id',
+  title: 'Item label with text 1',
+  children: /*#__PURE__*/React.createElement("div", null, "content test1")
+}, {
+  id: 'test2_id',
+  title: 'Item label with text 2',
+  children: /*#__PURE__*/React.createElement("div", null, "content test2")
+}];
+describe('<AccordionMenu />', () => {
+  it('Check correct text placed on labels', async () => {
+    const {
+      queryByText
+    } = render( /*#__PURE__*/React.createElement(AccordionMenu, {
+      items: accordionItems,
+      onSelect: () => {}
+    }));
+    expect(queryByText('Item label with text 1')).toBeDefined();
+    expect(queryByText('Item label with text 2')).toBeDefined();
+    expect(queryByText('content test1')).toBeNull();
+  });
+  it('Check item label element color and label', async () => {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(AccordionMenu, {
+      items: accordionItems,
+      onSelect: () => {}
+    }));
+    const headerItem = container.querySelector('#test2_id');
+    expect(headerItem).toBeDefined();
+    expect(headerItem?.children[0]).toHaveStyleRule('background', COLORS.neutral_20);
+    expect(headerItem?.textContent).toContain('Item label with text 2');
+  });
+  it('Check expanded item text', async () => {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(AccordionMenu, {
+      items: accordionItems,
+      onSelect: () => {},
+      selectedItems: ['test1_id']
+    }));
+    const headerItem = container.querySelector('#test1_id'); //check item expanded
+
+    expect(headerItem?.children[1]).toBeDefined();
+    expect(headerItem?.children[1]?.textContent).toContain('content test1');
+  });
+});
+//# sourceMappingURL=AccordionMenu.test.js.map

package/dist/esm/Accordion/__tests__/AccordionMenu.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Accordion/__tests__/AccordionMenu.test.tsx"],"names":["React","render","COLORS","AccordionMenu","accordionItems","id","title","children","describe","it","queryByText","expect","toBeDefined","toBeNull","container","headerItem","querySelector","toHaveStyleRule","neutral_20","textContent","toContain"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,OAAO,wBAAP;AACA,SAASC,MAAT,QAAuB,cAAvB;AACA,OAAOC,aAAP,MAA0B,kBAA1B;AAEA,MAAMC,cAAc,GAAG,CACrB;AACEC,EAAAA,EAAE,EAAE,UADN;AAEEC,EAAAA,KAAK,EAAE,wBAFT;AAGEC,EAAAA,QAAQ,eAAE;AAHZ,CADqB,EAMrB;AACEF,EAAAA,EAAE,EAAE,UADN;AAEEC,EAAAA,KAAK,EAAE,wBAFT;AAGEC,EAAAA,QAAQ,eAAE;AAHZ,CANqB,CAAvB;AAaAC,QAAQ,CAAC,mBAAD,EAAsB,MAAM;AAClCC,EAAAA,EAAE,CAAC,qCAAD,EAAwC,YAAY;AACpD,UAAM;AAAEC,MAAAA;AAAF,QAAkBT,MAAM,eAAC,oBAAC,aAAD;AAAe,MAAA,KAAK,EAAEG,cAAtB;AAAsC,MAAA,QAAQ,EAAE,MAAM,CAAE;AAAxD,MAAD,CAA9B;AACAO,IAAAA,MAAM,CAACD,WAAW,CAAC,wBAAD,CAAZ,CAAN,CAA8CE,WAA9C;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,wBAAD,CAAZ,CAAN,CAA8CE,WAA9C;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,eAAD,CAAZ,CAAN,CAAqCG,QAArC;AACD,GALC,CAAF;AAOAJ,EAAAA,EAAE,CAAC,0CAAD,EAA6C,YAAY;AACzD,UAAM;AAAEK,MAAAA;AAAF,QAAgBb,MAAM,eAAC,oBAAC,aAAD;AAAe,MAAA,KAAK,EAAEG,cAAtB;AAAsC,MAAA,QAAQ,EAAE,MAAM,CAAE;AAAxD,MAAD,CAA5B;AACA,UAAMW,UAAU,GAAGD,SAAS,CAACE,aAAV,CAAwB,WAAxB,CAAnB;AACAL,IAAAA,MAAM,CAACI,UAAD,CAAN,CAAmBH,WAAnB;AACAD,IAAAA,MAAM,CAACI,UAAU,EAAER,QAAZ,CAAqB,CAArB,CAAD,CAAN,CAAgCU,eAAhC,CAAgD,YAAhD,EAA8Df,MAAM,CAACgB,UAArE;AACAP,IAAAA,MAAM,CAACI,UAAU,EAAEI,WAAb,CAAN,CAAgCC,SAAhC,CAA0C,wBAA1C;AACD,GANC,CAAF;AAQAX,EAAAA,EAAE,CAAC,0BAAD,EAA6B,YAAY;AACzC,UAAM;AAAEK,MAAAA;AAAF,QAAgBb,MAAM,eAAC,oBAAC,aAAD;AAAe,MAAA,KAAK,EAAEG,cAAtB;AAAsC,MAAA,QAAQ,EAAE,MAAM,CAAE,CAAxD;AAA0D,MAAA,aAAa,EAAE,CAAC,UAAD;AAAzE,MAAD,CAA5B;AACA,UAAMW,UAAU,GAAGD,SAAS,CAACE,aAAV,CAAwB,WAAxB,CAAnB,CAFyC,CAGzC;;AACAL,IAAAA,MAAM,CAACI,UAAU,EAAER,QAAZ,CAAqB,CAArB,CAAD,CAAN,CAAgCK,WAAhC;AACAD,IAAAA,MAAM,CAACI,UAAU,EAAER,QAAZ,CAAqB,CAArB,GAAyBY,WAA1B,CAAN,CAA6CC,SAA7C,CAAuD,eAAvD;AACD,GANC,CAAF;AAOD,CAvBO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { COLORS } from '../../styles';\nimport AccordionMenu from '../AccordionMenu';\n\nconst accordionItems = [\n  {\n    id: 'test1_id',\n    title: 'Item label with text 1',\n    children: <div>content test1</div>,\n  },\n  {\n    id: 'test2_id',\n    title: 'Item label with text 2',\n    children: <div>content test2</div>,\n  },\n];\n\ndescribe('<AccordionMenu />', () => {\n  it('Check correct text placed on labels', async () => {\n    const { queryByText } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);\n    expect(queryByText('Item label with text 1')).toBeDefined();\n    expect(queryByText('Item label with text 2')).toBeDefined();\n    expect(queryByText('content test1')).toBeNull();\n  });\n\n  it('Check item label element color and label', async () => {\n    const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);\n    const headerItem = container.querySelector('#test2_id');\n    expect(headerItem).toBeDefined();\n    expect(headerItem?.children[0]).toHaveStyleRule('background', COLORS.neutral_20);\n    expect(headerItem?.textContent).toContain('Item label with text 2');\n  });\n\n  it('Check expanded item text', async () => {\n    const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}} selectedItems={['test1_id']}></AccordionMenu>);\n    const headerItem = container.querySelector('#test1_id');\n    //check item expanded\n    expect(headerItem?.children[1]).toBeDefined();\n    expect(headerItem?.children[1]?.textContent).toContain('content test1');\n  });\n});\n"],"file":"AccordionMenu.test.js"}

package/dist/esm/Accordion/index.js

@@ -0,0 +1,4 @@
+export { default as AccordionMenu } from './AccordionMenu';
+export { default as AccordionMenuItem } from './AccordionMenu';
+export { AccordionMenuWrapper } from './styles';
+//# sourceMappingURL=index.js.map

package/dist/esm/Accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Accordion/index.ts"],"names":["default","AccordionMenu","AccordionMenuItem","AccordionMenuWrapper"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAApB,QAAyC,iBAAzC;AACA,SAASD,OAAO,IAAIE,iBAApB,QAA6C,iBAA7C;AACA,SAASC,oBAAT,QAAqC,UAArC","sourcesContent":["export { default as AccordionMenu } from './AccordionMenu';\nexport { default as AccordionMenuItem } from './AccordionMenu';\nexport { AccordionMenuWrapper } from './styles';\n"],"file":"index.js"}

package/dist/esm/Accordion/styles.js

@@ -0,0 +1,75 @@
+import styled, { css } from 'styled-components';
+import { COLORS } from '../styles';
+import { Z_INDEXES } from '../styles/z-indexes';
+export const AccordionMenuWrapper = styled.div`
+  min-width: 320px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+`;
+export const AccordionItemContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  border-bottom: ${props => props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : ''};
+`;
+const disabledState = css`
+  background: ${COLORS.white}!important;
+  color: ${COLORS.neutral_300};
+  pointer-events: none;
+  svg {
+    color: ${COLORS.neutral_300}!important;
+  }
+`;
+export const ItemHeaderContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px 11px 16px;
+  cursor: pointer;
+  background: ${COLORS.neutral_20};
+  cursor: ${props => props.isDisabled ? 'not-allowed' : 'pointer'};
+  svg:last-child {
+    margin-left: auto;
+  }
+  outline: none;
+  ${props => props.tabbedHere ? css`
+    z-index: ${Z_INDEXES.focus};
+    box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};` : ''}
+
+  ${props => props.isDisabled ? disabledState : ''}
+  :hover {
+    background: ${COLORS.primary_20};
+  }
+
+  :hover .headerLabel {
+    color: ${COLORS.primary_700};
+  }
+
+  :active .headerLabel {
+    color: ${COLORS.primary_800};
+  }
+
+  :hover svg {
+    color: ${COLORS.primary_700};
+  }
+
+  :active svg {
+    color: ${COLORS.primary_800};
+  }
+
+  :active {
+    background: ${COLORS.primary_100};
+  }
+`;
+export const HeaderIconContainer = styled.div`
+  margin-left: auto;
+`;
+export const ItemBodyContainer = styled.div`
+  padding: 0px 16px;
+  margin: 12px 0;
+  background: ${COLORS.white};
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/Accordion/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Accordion/styles.ts"],"names":["styled","css","COLORS","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemContainer","props","displaySeparator","neutral_100","disabledState","white","neutral_300","ItemHeaderContainer","neutral_20","isDisabled","tabbedHere","focus","primary_500","primary_20","primary_700","primary_800","primary_100","HeaderIconContainer","ItemBodyContainer"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,SAAT,QAA0B,qBAA1B;AAEA,OAAO,MAAMC,oBAAoB,GAAGJ,MAAM,CAACK,GAAI;AAC/C;AACA;AACA;AACA;AACA,CALO;AAOP,OAAO,MAAMC,sBAAsB,GAAGN,MAAM,CAACK,GAAoC;AACjF;AACA;AACA;AACA;AACA,mBAAoBE,KAAD,IAAYA,KAAK,CAACC,gBAAN,GAA0B,aAAYN,MAAM,CAACO,WAAY,EAAzD,GAA6D,EAAI;AAChG,CANO;AAQP,MAAMC,aAAa,GAAGT,GAAI;AAC1B,gBAAgBC,MAAM,CAACS,KAAM;AAC7B,WAAWT,MAAM,CAACU,WAAY;AAC9B;AACA;AACA,aAAaV,MAAM,CAACU,WAAY;AAChC;AACA,CAPA;AASA,OAAO,MAAMC,mBAAmB,GAAGb,MAAM,CAACK,GAAqE;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBH,MAAM,CAACY,UAAW;AAClC,YAAaP,KAAD,IAAYA,KAAK,CAACQ,UAAN,GAAmB,aAAnB,GAAmC,SAAW;AACtE;AACA;AACA;AACA;AACA,IAAIR,KAAK,IAAIA,KAAK,CAACS,UAAN,GAAmBf,GAAI;AACpC,eAAeE,SAAS,CAACc,KAAM;AAC/B,+BAA+Bf,MAAM,CAACgB,WAAY,iBAAgBhB,MAAM,CAACgB,WAAY,GAFxE,GAE6E,EAAG;AAC7F;AACA,IAAKX,KAAD,IAAYA,KAAK,CAACQ,UAAN,GAAmBL,aAAnB,GAAmC,EAAI;AACvD;AACA,kBAAkBR,MAAM,CAACiB,UAAW;AACpC;AACA;AACA;AACA,aAAajB,MAAM,CAACkB,WAAY;AAChC;AACA;AACA;AACA,aAAalB,MAAM,CAACmB,WAAY;AAChC;AACA;AACA;AACA,aAAanB,MAAM,CAACkB,WAAY;AAChC;AACA;AACA;AACA,aAAalB,MAAM,CAACmB,WAAY;AAChC;AACA;AACA;AACA,kBAAkBnB,MAAM,CAACoB,WAAY;AACrC;AACA,CAzCO;AA2CP,OAAO,MAAMC,mBAAmB,GAAGvB,MAAM,CAACK,GAAI;AAC9C;AACA,CAFO;AAIP,OAAO,MAAMmB,iBAAiB,GAAGxB,MAAM,CAACK,GAAI;AAC5C;AACA;AACA,gBAAgBH,MAAM,CAACS,KAAM;AAC7B,CAJO","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } 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\nconst disabledState = css`\n  background: ${COLORS.white}!important;\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  svg {\n    color: ${COLORS.neutral_300}!important;\n  }\n`;\n\nexport const ItemHeaderContainer = styled.div<{ isDisabled: boolean, isActive: boolean, tabbedHere: boolean }>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n  background: ${COLORS.neutral_20};\n  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};\n  svg:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n  ${props => props.tabbedHere ? css`\n    z-index: ${Z_INDEXES.focus};\n    box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};` : ''}\n\n  ${(props) => (props.isDisabled ? disabledState : '')}\n  :hover {\n    background: ${COLORS.primary_20};\n  }\n\n  :hover .headerLabel {\n    color: ${COLORS.primary_700};\n  }\n\n  :active .headerLabel {\n    color: ${COLORS.primary_800};\n  }\n\n  :hover svg {\n    color: ${COLORS.primary_700};\n  }\n\n  :active svg {\n    color: ${COLORS.primary_800};\n  }\n\n  :active {\n    background: ${COLORS.primary_100};\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div`\n  padding: 0px 16px;\n  margin: 12px 0;\n  background: ${COLORS.white};\n`;\n"],"file":"styles.js"}

package/dist/esm/Banners/Banner.js

@@ -250,7 +250,6 @@ const Banner = ({
 };
 
 Banner.propTypes = {
-  size: _pt.oneOf(['small', 'medium', 'large']),
   type: _pt.string,
   link: _pt.string,
   linkText: _pt.string,

package/dist/esm/Banners/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","BannerContainer","div","props","type","correct_100","black","bottom","MEDIUM","LARGE","link","BannerCenter","Regular","color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","children","testId","linkText","onClose","icon","noIcon","width","setWidth","useState","window","innerWidth","useEffect","handleResize","addEventListener","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","Math","floor","random","white","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_20","primary_500","hover"],"mappings":"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","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 {ComponentMStyling, ComponentResponsive} from '../styles/typography';\nimport {HyperLink} from '../HyperLink';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n  background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\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  a {\n    color: ${(props: BannerProps) => props.link} !important;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color)}\n  \n  display: flex;\n  width: 100%;\n  margin: 0 0 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 16px 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 40px 0 56px;\n  }\n  &.small {\n    margin: 0 0 0 16px;\n  }\n  &.medium {\n    margin: 0 16px 0 32px;\n  }\n  &.large {\n    margin: 0 40px 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\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 = {\n  size?: 'small' | 'medium' | 'large';\n  type?: string;\n  link?: string;\n  linkText?: string;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\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  const formatTypeToLowerCase = type?.toLowerCase();\n  switch (formatTypeToLowerCase) {\n    case 'warning':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n          <BannerCenter color={COLORS.warning_700} className={size}>\n            {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.warning_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'critical':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.critical_700} className={size}>\n            {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.critical_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'positive':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.correct_700} className={size}>\n            {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.correct_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    default:\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.primary_700} className={size}>\n            {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type=\"neutral\">\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.primary_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n  }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
+{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","BannerContainer","div","props","type","correct_100","black","bottom","MEDIUM","LARGE","link","BannerCenter","Regular","color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","children","testId","linkText","onClose","icon","noIcon","width","setWidth","useState","window","innerWidth","useEffect","handleResize","addEventListener","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","Math","floor","random","white","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_20","primary_500","hover"],"mappings":"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","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/typography';\nimport {HyperLink} from '../HyperLink';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n  background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\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  a {\n    color: ${(props: BannerProps) => props.link} !important;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color)}\n  \n  display: flex;\n  width: 100%;\n  margin: 0 0 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 16px 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 40px 0 56px;\n  }\n  &.small {\n    margin: 0 0 0 16px;\n  }\n  &.medium {\n    margin: 0 16px 0 32px;\n  }\n  &.large {\n    margin: 0 40px 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\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 = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: string;\n  link?: string;\n  linkText?: string;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\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  const formatTypeToLowerCase = type?.toLowerCase();\n  switch (formatTypeToLowerCase) {\n    case 'warning':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n          <BannerCenter color={COLORS.warning_700} className={size}>\n            {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.warning_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'critical':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.critical_700} className={size}>\n            {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.critical_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'positive':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.correct_700} className={size}>\n            {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.correct_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    default:\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.primary_700} className={size}>\n            {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type=\"neutral\">\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.primary_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n  }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}

package/dist/esm/Button/BackButton.js

@@ -10,6 +10,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import * as React from 'react';
 import styled from 'styled-components';
 import { COLORS } from '../styles';
+import { Size } from '../types';
 import { ArrowLineLeft } from '../icons/systemicons/SystemIcons';
 import { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';
 const Button = styled.button`
@@ -25,7 +26,7 @@ const Button = styled.button`
   background-color: transparent;
   cursor: pointer;
 
-  ${props => props.size === 'XSmall' ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)};
+  ${props => props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)};
   font-feature-settings: 'liga' off;
 
   & > .button-content {
@@ -79,7 +80,7 @@ const Button = styled.button`
 const BackButton = _ref => {
   let {
     children,
-    size = 'Small'
+    size = Size.Small
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -88,12 +89,11 @@ const BackButton = _ref => {
   }), /*#__PURE__*/React.createElement("div", {
     className: 'button-content'
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ArrowLineLeft, {
-    size: size === 'XSmall' ? '20' : '24'
+    size: size === Size.XSmall ? '20' : '24'
   })), /*#__PURE__*/React.createElement("label", null, children)));
 };
 
 BackButton.propTypes = {
-  size: _pt.oneOf(['Small', 'XSmall']).isRequired,
   disabled: _pt.bool
 };
 export default BackButton;

package/dist/esm/Button/BackButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/BackButton.tsx"],"names":["React","styled","COLORS","ArrowLineLeft","ComponentTextStyle","ComponentSStyling","ComponentXSStyling","Button","button","props","size","Bold","neutral_600","primary_20","primary_700","primary_100","primary_800","neutral_300","BackButton","children","disabled"],"mappings":";;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,aAAT,QAA8B,kCAA9B;AACA,SAASC,kBAAT,EAA6BC,iBAA7B,EAAgDC,kBAAhD,QAA0E,sBAA1E;AAEA,MAAMC,MAAM,GAAGN,MAAM,CAACO,MAAwB;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAACC,IAAN,KAAe,QAAf,GAA0BJ,kBAAkB,CAACF,kBAAkB,CAACO,IAApB,EAA0BT,MAAM,CAACU,WAAjC,CAA5C,GAA4FP,iBAAiB,CAACD,kBAAkB,CAACO,IAApB,EAA0BT,MAAM,CAACU,WAAjC,CAA+C;AAC5K;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBV,MAAM,CAACW,UAAW;AAC1C,aAAaX,MAAM,CAACY,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBZ,MAAM,CAACa,WAAY;AAC3C,aAAab,MAAM,CAACc,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,aAAad,MAAM,CAACe,WAAY;AAChC;AACA;AACA,CA9DA;;AAoEA,MAAMC,UAAoD,GAAG,QAA4C;AAAA,MAA3C;AAAEC,IAAAA,QAAF;AAAYT,IAAAA,IAAI,GAAG;AAAnB,GAA2C;AAAA,MAAZD,KAAY;;AACvG,sBACE,oBAAC,MAAD,eAAYA,KAAZ;AAAmB,IAAA,IAAI,EAAEC;AAAzB,mBACE;AAAK,IAAA,SAAS,EAAE;AAAhB,kBACE,+CACE,oBAAC,aAAD;AAAe,IAAA,IAAI,EAAEA,IAAI,KAAK,QAAT,GAAoB,IAApB,GAA2B;AAAhD,IADF,CADF,eAIE,mCAAQS,QAAR,CAJF,CADF,CADF;AAUD,CAXD;;;AAHET,EAAAA,I,aAAM,O,EAAU,Q;AAChBU,EAAAA,Q;;AAeF,eAAeF,UAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { ArrowLineLeft } from '../icons/systemicons/SystemIcons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === 'XSmall' ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: unset;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: 'Small' | 'XSmall';\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = 'Small', ...props }) => {\n  return (\n    <Button {...props} size={size}>\n      <div className={'button-content'}>\n        <span>\n          <ArrowLineLeft size={size === 'XSmall' ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\n"],"file":"BackButton.js"}
+{"version":3,"sources":["../../../src/Button/BackButton.tsx"],"names":["React","styled","COLORS","Size","ArrowLineLeft","ComponentTextStyle","ComponentSStyling","ComponentXSStyling","Button","button","props","size","XSmall","Bold","neutral_600","primary_20","primary_700","primary_100","primary_800","neutral_300","BackButton","children","Small","disabled"],"mappings":";;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,aAAT,QAA8B,kCAA9B;AACA,SAASC,kBAAT,EAA6BC,iBAA7B,EAAgDC,kBAAhD,QAA0E,sBAA1E;AAEA,MAAMC,MAAM,GAAGP,MAAM,CAACQ,MAAwB;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAACC,IAAN,KAAeR,IAAI,CAACS,MAApB,GAA6BL,kBAAkB,CAACF,kBAAkB,CAACQ,IAApB,EAA0BX,MAAM,CAACY,WAAjC,CAA/C,GAA+FR,iBAAiB,CAACD,kBAAkB,CAACQ,IAApB,EAA0BX,MAAM,CAACY,WAAjC,CAA+C;AAC/K;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBZ,MAAM,CAACa,UAAW;AAC1C,aAAab,MAAM,CAACc,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBd,MAAM,CAACe,WAAY;AAC3C,aAAaf,MAAM,CAACgB,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,aAAahB,MAAM,CAACiB,WAAY;AAChC;AACA;AACA,CA9DA;;AAoEA,MAAMC,UAAoD,GAAG,QAA+C;AAAA,MAA9C;AAAEC,IAAAA,QAAF;AAAYV,IAAAA,IAAI,GAAGR,IAAI,CAACmB;AAAxB,GAA8C;AAAA,MAAZZ,KAAY;;AAC1G,sBACE,oBAAC,MAAD,eAAYA,KAAZ;AAAmB,IAAA,IAAI,EAAEC;AAAzB,mBACE;AAAK,IAAA,SAAS,EAAE;AAAhB,kBACE,+CACE,oBAAC,aAAD;AAAe,IAAA,IAAI,EAAEA,IAAI,KAAKR,IAAI,CAACS,MAAd,GAAuB,IAAvB,GAA8B;AAAnD,IADF,CADF,eAIE,mCAAQS,QAAR,CAJF,CADF,CADF;AAUD,CAXD;;;AAFEE,EAAAA,Q;;AAeF,eAAeH,UAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { ArrowLineLeft } from '../icons/systemicons/SystemIcons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: unset;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: Size.Small | Size.XSmall;\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = Size.Small, ...props }) => {\n  return (\n    <Button {...props} size={size}>\n      <div className={'button-content'}>\n        <span>\n          <ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\n"],"file":"BackButton.js"}

package/dist/esm/Button/Iconbutton.js

@@ -1,5 +1,5 @@
 import _pt from "prop-types";
-import * as React from 'react';
+import React from 'react';
 import styled, { css } from 'styled-components';
 import { BREAKPOINTS, COLORS } from '../styles';
 
@@ -212,8 +212,11 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
     }
 
     return false;
-  }; // Let's render button
+  };
 
+  React.useEffect(() => {
+    !!disabled && setTabbedHere(false);
+  }, [disabled]); // Let's render button
 
   switch (variant) {
     case 'secondary':

package/dist/esm/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["React","styled","css","BREAKPOINTS","COLORS","tabbedHereStyle","variant","tabbedHereBackgroundColor","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","forwardRef","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","hidden","ref","supressFocusRef","useRef","setTabbedHere","useState","isPressingEnter","e","key","preventDefault","stopPropagation","event","current"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  tabbedHere?: boolean;\n  tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n          box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.neutral_600};\n        }\n      `;\n    case 'primary':\n    default:\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.white};\n        }\n      `;\n  }\n};\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px'); \n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n      \n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none;\n    }\n  }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ninterface Props {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabbedHereBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n};\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n  hidden\n}: Props, ref) => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
+{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["React","styled","css","BREAKPOINTS","COLORS","tabbedHereStyle","variant","tabbedHereBackgroundColor","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","forwardRef","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","hidden","ref","supressFocusRef","useRef","setTabbedHere","useState","isPressingEnter","e","key","preventDefault","stopPropagation","useEffect","event","current"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  tabbedHere?: boolean;\n  tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n          box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.neutral_600};\n        }\n      `;\n    case 'primary':\n    default:\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.white};\n        }\n      `;\n  }\n};\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px'); \n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n      \n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none;\n    }\n  }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ninterface Props {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabbedHereBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n};\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n  hidden\n}: Props, ref) => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  React.useEffect(() => {\n    !!disabled && setTabbedHere(false)\n  }, [disabled]);\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}

package/dist/esm/Button/__tests__/BackButton.test.js

@@ -1,20 +1,21 @@
 import React from 'react';
 import { act, render } from '@testing-library/react';
 import { BackButton } from '../index';
+import { Size } from '../../types';
 import 'jest-styled-components';
 describe('<BackButton />', () => {
   it('should render back button', function () {
     const {
       queryByText
     } = render( /*#__PURE__*/React.createElement(BackButton, {
-      size: 'Small'
+      size: Size.Small
     }, "Back Button"));
     expect(queryByText('Back Button')).toBeDefined();
   });
   it('should call action on click', function () {
     const clickMock = jest.fn(() => {});
     const component = render( /*#__PURE__*/React.createElement(BackButton, {
-      size: 'Small',
+      size: Size.Small,
       onClick: clickMock
     }, "Back Button"));
     act(() => {
@@ -25,7 +26,7 @@ describe('<BackButton />', () => {
   it('should not call action on click when disabled', function () {
     const clickMock = jest.fn(() => {});
     const component = render( /*#__PURE__*/React.createElement(BackButton, {
-      size: 'Small',
+      size: Size.Small,
       disabled: true,
       onClick: clickMock
     }, "Back Button"));