@laerdal/life-react-components 1.2.2-dev.9.full → 1.3.0

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/Breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Breadcrumb/Breadcrumb.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","Size","SystemIcons","useHistory","HyperLink","IconButton","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","DropdownButton","marginRight","size","Small","Medium","BreadcrumbContainer","div","props","FontStyles","Regular","neutral_600","primary_700","primary_800","textStyle","color","XSmall","LastBreadcrumbItem","label","Bold","neutral_800","Breadcrumb","items","homeIcon","homeLabel","homeUrl","history","dropdownItems","slice","length","map","x","value","url","displayLabel","navigate","links","push","chevronSize","neutral_500"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAAQC,MAAR,QAAqB,WAArB;AACA,SAAQC,kBAAR,EAA4BC,IAA5B,EAAkCC,WAAlC,QAAoD,IAApD;AACA,SAAQC,UAAR,QAAyB,cAAzB;AACA,SAASC,SAAT,EAAoBC,UAApB,QAAsC,IAAtC;AAGA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,mBAA9C,QAAwE,sBAAxE;AACA,OAAOC,cAAP,MAA2B,4BAA3B;;AAWA,MAAMC,WAAW,GAAIC,IAAD,IAA4B;AAC9C,SAAOA,IAAI,IAAIV,IAAI,CAACW,KAAb,IAAsBD,IAAI,IAAIV,IAAI,CAACY,MAAnC,GAA4C,oBAA5C,GAAmE,oBAA1E;AACD,CAFD;;AAIA,MAAMC,mBAAmB,GAAGhB,MAAM,CAACiB,GAA8B;AACjE;AACA;AACA;AACA;AACA;AACA;AACA,MAAOC,KAAD,IAAWC,UAAU,CAACD,KAAK,CAACL,IAAP,EAAaX,kBAAkB,CAACkB,OAAhC,EAAyCnB,MAAM,CAACoB,WAAhD,CAA6D;AACxF,MAAOH,KAAD,IAAWN,WAAW,CAACM,KAAK,CAACL,IAAP,CAAc;AAC1C;AACA;AACA;AACA,MAAOK,KAAD,IAAWN,WAAW,CAACM,KAAK,CAACL,IAAP,CAAc;AAC1C;AACA;AACA;AACA,aAAaZ,MAAM,CAACqB,WAAY;AAChC;AACA;AACA,aAAarB,MAAM,CAACsB,WAAY;AAChC;AACA,CArBA;;AAuBA,MAAMJ,UAAU,GAAG,CAACN,IAAD,EAAyBW,SAAzB,EAAwDC,KAAxD,KAA0E;AAC3F,UAAQZ,IAAR;AACE,SAAKV,IAAI,CAACuB,MAAV;AACE,aAAOhB,mBAAmB,CAACc,SAAD,EAAYC,KAAZ,CAA1B;;AACF,SAAKtB,IAAI,CAACY,MAAV;AACE,aAAOP,iBAAiB,CAACgB,SAAD,EAAYC,KAAZ,CAAxB;;AACF,SAAKtB,IAAI,CAACW,KAAV;AACA;AACE,aAAOL,iBAAiB,CAACe,SAAD,EAAYC,KAAZ,CAAxB;AAPJ;AASD,CAVD;;AAYA,MAAME,kBAAkB,GAAG3B,MAAM,CAAC4B,KAAoB;AACtD,IAAKV,KAAD,IAAWC,UAAU,CAACD,KAAK,CAACL,IAAP,EAAaX,kBAAkB,CAAC2B,IAAhC,EAAsC5B,MAAM,CAAC6B,WAA7C,CAA0D;AACnF,IAAKZ,KAAD,IAAWN,WAAW,CAACM,KAAK,CAACL,IAAP,CAAc;AACxC,CAHA;;AAKA,MAAMkB,UAAoD,GAAG,CAAC;AAC1DC,EAAAA,KAD0D;AAE1DnB,EAAAA,IAAI,GAAGV,IAAI,CAACW,KAF8C;AAG1DmB,EAAAA,QAAQ,GAAG,IAH+C;AAI1DC,EAAAA,SAAS,GAAG,MAJ8C;AAK1DC,EAAAA,OAAO,GAAG;AALgD,CAAD,KAKrC;AAEtB,QAAMC,OAAO,GAAG/B,UAAU,EAA1B;AACA,QAAMgC,aAA6B,GAAGL,KAAK,GAAGA,KAAK,CAACM,KAAN,CAAY,CAAZ,EAAeN,KAAK,CAACO,MAAN,GAAe,CAA9B,EAAiCC,GAAjC,CAAqCC,CAAC,KAAK;AAAEC,IAAAA,KAAK,EAAED,CAAC,CAACE,GAAX;AAAgBC,IAAAA,YAAY,EAAEH,CAAC,CAACb;AAAhC,GAAL,CAAtC,CAAH,GAA0F,EAArI;;AACA,QAAMiB,QAAQ,GAAIC,KAAD,IAAqB;AACpCV,IAAAA,OAAO,CAACW,IAAR,CAAaD,KAAK,CAAC,CAAD,CAAlB;AACD,GAFD;;AAIA,QAAME,WAAW,GAAGnC,IAAI,IAAIV,IAAI,CAACY,MAAb,GAAsB,MAAtB,GAA+BF,IAAI,IAAIV,IAAI,CAACW,KAAb,GAAqB,MAArB,GAA8B,MAAjF;AAEA,sBACE,oBAAC,mBAAD;AAAqB,IAAA,IAAI,EAAED;AAA3B,KAEGoB,QAAQ,gBACP,oBAAC,UAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,KAAK,EAAC,UAAtC;AAAiD,IAAA,MAAM,EAAE,MAAMG,OAAO,CAACW,IAAR,CAAaZ,OAAb;AAA/D,kBACE,oBAAC,WAAD,CAAa,IAAb;AAAkB,IAAA,IAAI,EAAEa;AAAxB,IADF,CADO,gBAIP,oBAAC,SAAD;AAAW,IAAA,EAAE,EAAE,UAAf;AAA2B,IAAA,OAAO,EAAC,SAAnC;AAA6C,IAAA,IAAI,EAAEb;AAAnD,KACGD,SADH,CANJ,EAUI,CAAC,CAACF,KAAF,IAAWA,KAAK,CAACO,MAAN,GAAe,CAA1B,KACGP,KAAK,CAACO,MAAN,GAAe,CAAf,gBACD,uDACE,oBAAC,WAAD,CAAa,YAAb;AAA0B,IAAA,SAAS,EAAC,aAApC;AAAkD,IAAA,KAAK,EAAEtC,MAAM,CAACgD,WAAhE;AAA6E,IAAA,IAAI,EAAED;AAAnF,IADF,eAEE,oBAAC,cAAD;AACE,IAAA,SAAS,EAAE,IADb;AAEE,IAAA,KAAK,EAAEX,aAFT;AAGE,IAAA,IAAI,EAAExB,IAHR;AAIE,IAAA,IAAI,eAAE,oBAAC,WAAD,CAAa,cAAb;AAA4B,MAAA,KAAK,EAAEZ,MAAM,CAACoB,WAA1C;AAAuD,MAAA,IAAI,EAAC;AAA5D,MAJR;AAKE,IAAA,OAAO,EAAEwB;AALX,IAFF,CADC,gBAUD,uDACE,oBAAC,WAAD,CAAa,YAAb;AAA0B,IAAA,SAAS,EAAC,aAApC;AAAkD,IAAA,KAAK,EAAE5C,MAAM,CAACgD,WAAhE;AAA6E,IAAA,IAAI,EAAED;AAAnF,IADF,eAEE,oBAAC,SAAD;AAAW,IAAA,EAAE,EAAE,gBAAgBhB,KAAK,CAACO,MAAN,GAAe,CAA/B,CAAf;AAAkD,IAAA,MAAM,EAAC,OAAzD;AAAiE,IAAA,OAAO,EAAC,SAAzE;AAAmF,IAAA,IAAI,EAAEP,KAAK,CAACA,KAAK,CAACO,MAAN,GAAe,CAAhB,CAAL,CAAwBI;AAAjH,KACGX,KAAK,CAACA,KAAK,CAACO,MAAN,GAAe,CAAhB,CAAL,CAAwBX,KAD3B,CAFF,CAXF,CAVJ,EA6BI,CAAC,CAACI,KAAF,IAAWA,KAAK,CAACO,MAAN,GAAe,CAA1B,iBACA,uDACE,oBAAC,WAAD,CAAa,YAAb;AAA0B,IAAA,SAAS,EAAC,aAApC;AAAkD,IAAA,KAAK,EAAEtC,MAAM,CAACgD,WAAhE;AAA6E,IAAA,IAAI,EAAED;AAAnF,IADF,eAEE,oBAAC,SAAD;AAAW,IAAA,EAAE,EAAE,gBAAgBhB,KAAK,CAACO,MAAN,GAAe,CAA/B,CAAf;AAAkD,IAAA,MAAM,EAAC,OAAzD;AAAiE,IAAA,OAAO,EAAC,SAAzE;AAAmF,IAAA,IAAI,EAAEP,KAAK,CAACA,KAAK,CAACO,MAAN,GAAe,CAAhB,CAAL,CAAwBI;AAAjH,KACGX,KAAK,CAACA,KAAK,CAACO,MAAN,GAAe,CAAhB,CAAL,CAAwBX,KAD3B,CAFF,CA9BJ,EAsCI,CAAC,CAACI,KAAF,IAAWA,KAAK,CAACO,MAAN,GAAe,CAA1B,iBACA,uDACE,oBAAC,WAAD,CAAa,YAAb;AAA0B,IAAA,SAAS,EAAC,aAApC;AAAkD,IAAA,KAAK,EAAEtC,MAAM,CAACgD,WAAhE;AAA6E,IAAA,IAAI,EAAED;AAAnF,IADF,eAEE,oBAAC,kBAAD;AAAoB,IAAA,IAAI,EAAEnC;AAA1B,KACGmB,KAAK,CAACA,KAAK,CAACO,MAAN,GAAe,CAAhB,CAAL,CAAwBX,KAD3B,CAFF,CAvCJ,CADF;AAiDD,CAhED;;;AAnDEK,EAAAA,Q;AACAC,EAAAA,S;AACAC,EAAAA,O;AACAH,EAAAA,K;;AAkHF,eAAeD,UAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS} from '../styles';\nimport {ComponentTextStyle, Size, SystemIcons} from '..';\nimport {useHistory} from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport {BreadcrumbItem} from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport {Link} from 'react-router-dom';\nimport {ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\n\ntype BreadcrumbProps = {\n  homeIcon?: boolean;\n  homeLabel?: string;\n  homeUrl?: string;\n  items?: BreadcrumbItem[];\n  size?: Size;\n};\n\nconst marginRight = (size: Size | undefined) => {\n  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;'\n}\n\nconst BreadcrumbContainer = styled.div<{size: Size | undefined}>`\n  display:flex;\n  align-items: center;\n  min-height: 48px;\n    \n  a {\n    text-decoration: none;\n    ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${(props) => marginRight(props.size) }\n  }\n\n  .chevronicon {\n    ${(props) => marginRight(props.size) }\n  }\n\n  a:hover {\n    color: ${COLORS.primary_700};\n  }\n  a:active {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst FontStyles = (size: Size | undefined, textStyle: ComponentTextStyle, color: string) => {\n  switch (size) {\n    case Size.XSmall:\n      return ComponentXXSStyling(textStyle, color);\n    case Size.Medium:\n      return ComponentMStyling(textStyle, color);\n    case Size.Small:\n    default:\n      return ComponentSStyling(textStyle, color);\n  }\n}\n\nconst LastBreadcrumbItem = styled.label<{size: Size}>`\n  ${(props) => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}\n  ${(props) => marginRight(props.size) }\n`;\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ \n    items, \n    size = Size.Small, \n    homeIcon = true, \n    homeLabel = 'Home', \n    homeUrl = '/' }) => {\n\n  const history = useHistory();\n  const dropdownItems: DropdownItem[] = items ? items.slice(0, items.length - 2).map(x => ({ value: x.url, displayLabel: x.label })) : [];\n  const navigate = (links: string[]) => {    \n    history.push(links[0]);\n  };\n\n  const chevronSize = size == Size.Medium ? \"24px\" : size == Size.Small ? \"20px\" : \"16px\";\n\n  return (\n    <BreadcrumbContainer size={size}>\n\n      {homeIcon ? \n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => history.push(homeUrl)}>\n          <SystemIcons.Home size={chevronSize} />\n        </IconButton> : \n        <HyperLink id={\"homelink\"} variant=\"default\" href={homeUrl}>\n          {homeLabel}\n        </HyperLink>}\n\n      { !!items && items.length > 2 &&\n          (items.length > 3 ?\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <DropdownButton \n              alignLeft={true}\n              items={dropdownItems} \n              size={size}\n              icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n              onClick={navigate} />\n          </> :\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <HyperLink id={\"link-item-\" + (items.length - 3)} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\n              {items[items.length - 3].label}\n            </HyperLink>  \n          </>)\n      }\n\n      { !!items && items.length > 1 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <HyperLink id={\"link-item-\" + (items.length - 2)} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </HyperLink>\n        </>\n      }\n\n      { !!items && items.length > 0 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <LastBreadcrumbItem size={size}>\n            {items[items.length - 1].label}\n          </LastBreadcrumbItem>\n        </>\n      }\n\n    </BreadcrumbContainer>);\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.js"}
+{"version":3,"sources":["../../../src/Breadcrumb/Breadcrumb.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","Size","SystemIcons","useHistory","HyperLink","IconButton","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","DropdownButton","marginRight","size","Small","Medium","BreadcrumbContainer","div","props","FontStyles","Regular","neutral_600","primary_700","primary_800","textStyle","color","XSmall","LastBreadcrumbItem","label","Bold","neutral_800","Breadcrumb","items","homeIcon","homeLabel","homeUrl","history","dropdownItems","slice","length","map","x","value","url","displayLabel","navigate","links","push","chevronSize","neutral_500"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS} from '../styles';\nimport {ComponentTextStyle, Size, SystemIcons} from '..';\nimport {useHistory} from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport {BreadcrumbItem} from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport {ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\n\ntype BreadcrumbProps = {\n  homeIcon?: boolean;\n  homeLabel?: string;\n  homeUrl?: string;\n  items?: BreadcrumbItem[];\n  size?: Size;\n};\n\nconst marginRight = (size: Size | undefined) => {\n  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;'\n}\n\nconst BreadcrumbContainer = styled.div<{size: Size | undefined}>`\n  display:flex;\n  align-items: center;\n  min-height: 48px;\n    \n  a {\n    text-decoration: none;\n    ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${(props) => marginRight(props.size) }\n  }\n\n  .chevronicon {\n    ${(props) => marginRight(props.size) }\n  }\n\n  a:hover {\n    color: ${COLORS.primary_700};\n  }\n  a:active {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst FontStyles = (size: Size | undefined, textStyle: ComponentTextStyle, color: string) => {\n  switch (size) {\n    case Size.XSmall:\n      return ComponentXXSStyling(textStyle, color);\n    case Size.Medium:\n      return ComponentMStyling(textStyle, color);\n    case Size.Small:\n    default:\n      return ComponentSStyling(textStyle, color);\n  }\n}\n\nconst LastBreadcrumbItem = styled.label<{size: Size}>`\n  ${(props) => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}\n  ${(props) => marginRight(props.size) }\n`;\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ \n    items, \n    size = Size.Small, \n    homeIcon = true, \n    homeLabel = 'Home', \n    homeUrl = '/' }) => {\n\n  const history = useHistory();\n  const dropdownItems: DropdownItem[] = items ? items.slice(0, items.length - 2).map(x => ({ value: x.url, displayLabel: x.label })) : [];\n  const navigate = (links: string[]) => {    \n    history.push(links[0]);\n  };\n\n  const chevronSize = size == Size.Medium ? \"24px\" : size == Size.Small ? \"20px\" : \"16px\";\n\n  return (\n    <BreadcrumbContainer size={size}>\n\n      {homeIcon ? \n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => history.push(homeUrl)}>\n          <SystemIcons.Home size={chevronSize} />\n        </IconButton> : \n        <HyperLink id={\"homelink\"} variant=\"default\" href={homeUrl}>\n          {homeLabel}\n        </HyperLink>}\n\n      { !!items && items.length > 2 &&\n          (items.length > 3 ?\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <DropdownButton \n              alignLeft={true}\n              items={dropdownItems} \n              size={size}\n              icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n              onClick={navigate} />\n          </> :\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <HyperLink id={\"link-item-\" + (items.length - 3)} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\n              {items[items.length - 3].label}\n            </HyperLink>  \n          </>)\n      }\n\n      { !!items && items.length > 1 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <HyperLink id={\"link-item-\" + (items.length - 2)} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </HyperLink>\n        </>\n      }\n\n      { !!items && items.length > 0 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <LastBreadcrumbItem size={size}>\n            {items[items.length - 1].label}\n          </LastBreadcrumbItem>\n        </>\n      }\n\n    </BreadcrumbContainer>);\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.js"}

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':