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

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

@@ -0,0 +1,74 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["react", "@testing-library/react", "../../styles", "../AccordionMenu", "jest-styled-components"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("react"), require("@testing-library/react"), require("../../styles"), require("../AccordionMenu"), require("jest-styled-components"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global.react, global.react, global.styles, global.AccordionMenu, global.jestStyledComponents);
+    global.undefined = mod.exports;
+  }
+})(this, function (_react, _react3, _styles, _AccordionMenu) {
+  "use strict";
+
+  var _react2 = _interopRequireDefault(_react);
+
+  var _AccordionMenu2 = _interopRequireDefault(_AccordionMenu);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const accordionItems = [{
+    id: 'test1_id',
+    title: 'Item label with text 1',
+    children: /*#__PURE__*/_react2.default.createElement("div", null, "content test1")
+  }, {
+    id: 'test2_id',
+    title: 'Item label with text 2',
+    children: /*#__PURE__*/_react2.default.createElement("div", null, "content test2")
+  }];
+  describe('<AccordionMenu />', () => {
+    it('Check correct text placed on labels', async () => {
+      const {
+        queryByText
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_AccordionMenu2.default, {
+        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
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_AccordionMenu2.default, {
+        items: accordionItems,
+        onSelect: () => {}
+      }));
+      const headerItem = container.querySelector('#test2_id');
+      expect(headerItem).toBeDefined();
+      expect(headerItem?.children[0]).toHaveStyleRule('background', _styles.COLORS.neutral_20);
+      expect(headerItem?.textContent).toContain('Item label with text 2');
+    });
+    it('Check expanded item text', async () => {
+      const {
+        container
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_AccordionMenu2.default, {
+        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/umd/Accordion/__tests__/AccordionMenu.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Accordion/__tests__/AccordionMenu.test.tsx"],"names":["accordionItems","id","title","children","describe","it","queryByText","render","expect","container","headerItem","COLORS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAMA,QAAMA,cAAc,GAAG,CACrB;AACEC,IAAAA,EAAE,EADJ,UAAA;AAEEC,IAAAA,KAAK,EAFP,wBAAA;AAGEC,IAAAA,QAAQ,EAAA,aAAE,gBAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,eAAA;AAHZ,GADqB,EAMrB;AACEF,IAAAA,EAAE,EADJ,UAAA;AAEEC,IAAAA,KAAK,EAFP,wBAAA;AAGEC,IAAAA,QAAQ,EAAA,aAAE,gBAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,eAAA;AAHZ,GANqB,CAAvB;AAaAC,EAAAA,QAAQ,CAAA,mBAAA,EAAsB,MAAM;AAClCC,IAAAA,EAAE,CAAA,qCAAA,EAAwC,YAAY;AACpD,YAAM;AAAEC,QAAAA;AAAF,UAAkBC,qBAAM,aAAC,gBAAA,aAAA,CAAA,uBAAA,EAAA;AAAe,QAAA,KAAK,EAApB,cAAA;AAAsC,QAAA,QAAQ,EAAE,MAAM,CAAE;AAAxD,OAAA,CAAPA,CAAxB;AACAC,MAAAA,MAAM,CAACF,WAAW,CAAlBE,wBAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,wBAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,eAAkB,CAAZ,CAANA,CAAAA,QAAAA;AAJFH,KAAE,CAAFA;AAOAA,IAAAA,EAAE,CAAA,0CAAA,EAA6C,YAAY;AACzD,YAAM;AAAEI,QAAAA;AAAF,UAAgBF,qBAAM,aAAC,gBAAA,aAAA,CAAA,uBAAA,EAAA;AAAe,QAAA,KAAK,EAApB,cAAA;AAAsC,QAAA,QAAQ,EAAE,MAAM,CAAE;AAAxD,OAAA,CAAPA,CAAtB;AACA,YAAMG,UAAU,GAAGD,SAAS,CAATA,aAAAA,CAAnB,WAAmBA,CAAnB;AACAD,MAAAA,MAAM,CAANA,UAAM,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACE,UAAU,EAAVA,QAAAA,CAAPF,CAAOE,CAAD,CAANF,CAAAA,eAAAA,CAAAA,YAAAA,EAA8DG,eAA9DH,UAAAA;AACAA,MAAAA,MAAM,CAACE,UAAU,EAAjBF,WAAM,CAANA,CAAAA,SAAAA,CAAAA,wBAAAA;AALFH,KAAE,CAAFA;AAQAA,IAAAA,EAAE,CAAA,0BAAA,EAA6B,YAAY;AACzC,YAAM;AAAEI,QAAAA;AAAF,UAAgBF,qBAAM,aAAC,gBAAA,aAAA,CAAA,uBAAA,EAAA;AAAe,QAAA,KAAK,EAApB,cAAA;AAAsC,QAAA,QAAQ,EAAE,MAAM,CAAtD,CAAA;AAA0D,QAAA,aAAa,EAAE,CAAA,UAAA;AAAzE,OAAA,CAAPA,CAAtB;AACA,YAAMG,UAAU,GAAGD,SAAS,CAATA,aAAAA,CAFsB,WAEtBA,CAAnB,CAFyC,CAGzC;;AACAD,MAAAA,MAAM,CAACE,UAAU,EAAVA,QAAAA,CAAPF,CAAOE,CAAD,CAANF,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACE,UAAU,EAAVA,QAAAA,CAAAA,CAAAA,GAAPF,WAAM,CAANA,CAAAA,SAAAA,CAAAA,eAAAA;AALFH,KAAE,CAAFA;AAhBFD,GAAQ,CAARA","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/umd/Accordion/index.js

@@ -0,0 +1,44 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "./AccordionMenu", "./styles"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("./AccordionMenu"), require("./styles"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.AccordionMenu, global.styles);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _AccordionMenu, _styles) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  Object.defineProperty(exports, "AccordionMenu", {
+    enumerable: true,
+    get: function () {
+      return _interopRequireDefault(_AccordionMenu).default;
+    }
+  });
+  Object.defineProperty(exports, "AccordionMenuItem", {
+    enumerable: true,
+    get: function () {
+      return _interopRequireDefault(_AccordionMenu).default;
+    }
+  });
+  Object.defineProperty(exports, "AccordionMenuWrapper", {
+    enumerable: true,
+    get: function () {
+      return _styles.AccordionMenuWrapper;
+    }
+  });
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Accordion/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;oDAAA,O;;;;;;oDACA,O;;;;;;qBACA,oB","sourcesContent":["export { default as AccordionMenu } from './AccordionMenu';\nexport { default as AccordionMenuItem } from './AccordionMenu';\nexport { AccordionMenuWrapper } from './styles';\n"],"file":"index.js"}

package/dist/umd/Accordion/styles.js

@@ -0,0 +1,101 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "styled-components", "../styles", "../styles/z-indexes"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("styled-components"), require("../styles"), require("../styles/z-indexes"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.styledComponents, global.styles, global.zIndexes);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _styledComponents, _styles, _zIndexes) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.ItemBodyContainer = exports.HeaderIconContainer = exports.ItemHeaderContainer = exports.AccordionItemContainer = exports.AccordionMenuWrapper = undefined;
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const AccordionMenuWrapper = exports.AccordionMenuWrapper = _styledComponents2.default.div`
+  min-width: 320px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+`;
+  const AccordionItemContainer = exports.AccordionItemContainer = _styledComponents2.default.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  border-bottom: ${props => props.displaySeparator ? `1px solid ${_styles.COLORS.neutral_100}` : ''};
+`;
+  const disabledState = _styledComponents.css`
+  background: ${_styles.COLORS.white}!important;
+  color: ${_styles.COLORS.neutral_300};
+  pointer-events: none;
+  svg {
+    color: ${_styles.COLORS.neutral_300}!important;
+  }
+`;
+  const ItemHeaderContainer = exports.ItemHeaderContainer = _styledComponents2.default.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px 11px 16px;
+  cursor: pointer;
+  background: ${_styles.COLORS.neutral_20};
+  cursor: ${props => props.isDisabled ? 'not-allowed' : 'pointer'};
+  svg:last-child {
+    margin-left: auto;
+  }
+  outline: none;
+  ${props => props.tabbedHere ? _styledComponents.css`
+    z-index: ${_zIndexes.Z_INDEXES.focus};
+    box-shadow: 0px 4px 12px ${_styles.COLORS.primary_500}, 0px 0px 8px ${_styles.COLORS.primary_500};` : ''}
+
+  ${props => props.isDisabled ? disabledState : ''}
+  :hover {
+    background: ${_styles.COLORS.primary_20};
+  }
+
+  :hover .headerLabel {
+    color: ${_styles.COLORS.primary_700};
+  }
+
+  :active .headerLabel {
+    color: ${_styles.COLORS.primary_800};
+  }
+
+  :hover svg {
+    color: ${_styles.COLORS.primary_700};
+  }
+
+  :active svg {
+    color: ${_styles.COLORS.primary_800};
+  }
+
+  :active {
+    background: ${_styles.COLORS.primary_100};
+  }
+`;
+  const HeaderIconContainer = exports.HeaderIconContainer = _styledComponents2.default.div`
+  margin-left: auto;
+`;
+  const ItemBodyContainer = exports.ItemBodyContainer = _styledComponents2.default.div`
+  padding: 0px 16px;
+  margin: 12px 0;
+  background: ${_styles.COLORS.white};
+`;
+});
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","COLORS","neutral_100","disabledState","css","white","neutral_300","ItemHeaderContainer","neutral_20","Z_INDEXES","focus","primary_500","primary_20","primary_700","primary_800","primary_100","HeaderIconContainer","ItemBodyContainer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,QAAMA,oBAAoB,WAApBA,oBAAoB,GAAGC,2BAAOC,GAAI;AAC/C;AACA;AACA;AACA;AAJO,CAAA;AAOA,QAAMC,sBAAsB,WAAtBA,sBAAsB,GAAGF,2BAAOC,GAAoC;AACjF;AACA;AACA;AACA;AACA,mBAAoBE,KAAD,IAAYA,KAAK,CAALA,gBAAAA,GAA0B,aAAYC,eAAOC,WAA7CF,EAAAA,GAA6D,EAAI;AALzF,CAAA;AAQP,QAAMG,aAAa,GAAGC,qBAAI;AAC1B,gBAAgBH,eAAOI,KAAM;AAC7B,WAAWJ,eAAOK,WAAY;AAC9B;AACA;AACA,aAAaL,eAAOK,WAAY;AAChC;AANA,CAAA;AASO,QAAMC,mBAAmB,WAAnBA,mBAAmB,GAAGV,2BAAOC,GAAqE;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBG,eAAOO,UAAW;AAClC,YAAaR,KAAD,IAAYA,KAAK,CAALA,UAAAA,GAAAA,aAAAA,GAAmC,SAAW;AACtE;AACA;AACA;AACA;AACA,IAAIA,KAAK,IAAIA,KAAK,CAALA,UAAAA,GAAmBI,qBAAI;AACpC,eAAeK,oBAAUC,KAAM;AAC/B,+BAA+BT,eAAOU,WAAY,iBAAgBV,eAAOU,WAF5DX,GAAAA,GAE6E,EAAG;AAC7F;AACA,IAAKA,KAAD,IAAYA,KAAK,CAALA,UAAAA,GAAAA,aAAAA,GAAmC,EAAI;AACvD;AACA,kBAAkBC,eAAOW,UAAW;AACpC;AACA;AACA;AACA,aAAaX,eAAOY,WAAY;AAChC;AACA;AACA;AACA,aAAaZ,eAAOa,WAAY;AAChC;AACA;AACA;AACA,aAAab,eAAOY,WAAY;AAChC;AACA;AACA;AACA,aAAaZ,eAAOa,WAAY;AAChC;AACA;AACA;AACA,kBAAkBb,eAAOc,WAAY;AACrC;AAxCO,CAAA;AA2CA,QAAMC,mBAAmB,WAAnBA,mBAAmB,GAAGnB,2BAAOC,GAAI;AAC9C;AADO,CAAA;AAIA,QAAMmB,iBAAiB,WAAjBA,iBAAiB,GAAGpB,2BAAOC,GAAI;AAC5C;AACA;AACA,gBAAgBG,eAAOI,KAAM;AAHtB,CAAA","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/umd/Banners/Banner.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","COLORS","correct_100","black","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","ComponentMStyling","ComponentTextStyle","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","size","type","linkText","hover","bottom","testId","icon","onClose","noIcon","Banner","React","window","setWidth","formatTypeToLowerCase","warning_700","Math","critical_700","correct_700","primary_700"],"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":["BannerContainer","styled","div","props","COLORS","correct_100","black","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","ComponentMStyling","ComponentTextStyle","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","type","linkText","hover","bottom","testId","icon","onClose","noIcon","Banner","React","window","setWidth","formatTypeToLowerCase","size","warning_700","Math","critical_700","correct_700","primary_700"],"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/umd/Button/BackButton.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../styles", "../icons/systemicons/SystemIcons", "../styles/typography"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../types", "../icons/systemicons/SystemIcons", "../styles/typography"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../styles/typography"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../types"), require("../icons/systemicons/SystemIcons"), require("../styles/typography"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.SystemIcons, global.typography);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.types, global.SystemIcons, global.typography);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _SystemIcons, _typography) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _types, _SystemIcons, _typography) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -148,7 +148,7 @@
   background-color: transparent;
   cursor: pointer;
 
-  ${props => props.size === 'XSmall' ? (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600) : (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600)};
+  ${props => props.size === _types.Size.XSmall ? (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600) : (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600)};
   font-feature-settings: 'liga' off;
 
   & > .button-content {
@@ -202,7 +202,7 @@
   const BackButton = _ref => {
     let {
       children,
-      size = 'Small'
+      size = _types.Size.Small
     } = _ref,
         props = _objectWithoutProperties(_ref, _excluded);
 
@@ -211,12 +211,11 @@
     }), /*#__PURE__*/React.createElement("div", {
       className: 'button-content'
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineLeft, {
-      size: size === 'XSmall' ? '20' : '24'
+      size: size === _types.Size.XSmall ? '20' : '24'
     })), /*#__PURE__*/React.createElement("label", null, children)));
   };
 
   BackButton.propTypes = {
-    size: _propTypes2.default.oneOf(['Small', 'XSmall']).isRequired,
     disabled: _propTypes2.default.bool
   };
   exports.default = BackButton;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/BackButton.tsx"],"names":["Button","styled","button","props","ComponentXSStyling","ComponentTextStyle","COLORS","ComponentSStyling","primary_20","primary_700","primary_100","primary_800","neutral_300","size","disabled","BackButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,QAAMA,MAAM,GAAGC,2BAAOC,MAAwB;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,IAAAA,KAAAA,QAAAA,GAA0BC,oCAAmBC,+BAAD,IAAlBD,EAA4CE,eAAtEH,WAA0BC,CAA1BD,GAA4FI,mCAAkBF,+BAAD,IAAjBE,EAA2CD,eAA1B,WAAjBC,CAAgE;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,wBAAwBD,eAAOE,UAAW;AAC1C,aAAaF,eAAOG,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBH,eAAOI,WAAY;AAC3C,aAAaJ,eAAOK,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,aAAaL,eAAOM,WAAY;AAChC;AACA;AA7DA,CAAA;;AAoEA,QAAMG,UAAoD,GAAG,IAAA,IAA4C;AAAA,QAA3C;AAAA,MAAA,QAAA;AAAYF,MAAAA,IAAI,GAAG;AAAnB,QAA2C,IAAA;AAAA,QAAZV,KAAY,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA;;AACvG,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,QAAA,CAAA,EAAA,EAAA,KAAA,EAAA;AAAmB,MAAA,IAAI,EAAEU;AAAzB,KAAA,CAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAE;AAAhB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,MAAA,IAAI,EAAEA,IAAI,KAAJA,QAAAA,GAAAA,IAAAA,GAA2B;AAAhD,KAAA,CADF,CADF,EAAA,aAIE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EANN,QAMM,CAJF,CADF,CADF;AADF,GAAA;;;AAHEA,IAAAA,I,6BAAM,O,EAAU,Q;AAChBC,IAAAA,Q;;oBAeF,U","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":["Button","styled","button","props","Size","ComponentXSStyling","ComponentTextStyle","COLORS","ComponentSStyling","primary_20","primary_700","primary_100","primary_800","neutral_300","disabled","BackButton","size","Small"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,QAAMA,MAAM,GAAGC,2BAAOC,MAAwB;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,MAAAA,GAA6BE,oCAAmBC,+BAAD,IAAlBD,EAA4CE,eAAzEJ,WAA6BE,CAA7BF,GAA+FK,mCAAkBF,+BAAD,IAAjBE,EAA2CD,eAA1B,WAAjBC,CAAgE;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,wBAAwBD,eAAOE,UAAW;AAC1C,aAAaF,eAAOG,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBH,eAAOI,WAAY;AAC3C,aAAaJ,eAAOK,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,aAAaL,eAAOM,WAAY;AAChC;AACA;AA7DA,CAAA;;AAoEA,QAAME,UAAoD,GAAG,IAAA,IAA+C;AAAA,QAA9C;AAAA,MAAA,QAAA;AAAYC,MAAAA,IAAI,GAAGZ,YAAKa;AAAxB,QAA8C,IAAA;AAAA,QAAZd,KAAY,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA;;AAC1G,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,QAAA,CAAA,EAAA,EAAA,KAAA,EAAA;AAAmB,MAAA,IAAI,EAAEa;AAAzB,KAAA,CAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAE;AAAhB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,MAAA,IAAI,EAAEA,IAAI,KAAKZ,YAATY,MAAAA,GAAAA,IAAAA,GAA8B;AAAnD,KAAA,CADF,CADF,EAAA,aAIE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EANN,QAMM,CAJF,CADF,CADF;AADF,GAAA;;;AAFEF,IAAAA,Q;;oBAeF,U","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/umd/Button/Iconbutton.js

@@ -19,60 +19,10 @@
 
   var _propTypes2 = _interopRequireDefault(_propTypes);
 
-  var React = _interopRequireWildcard(_react);
+  var _react2 = _interopRequireDefault(_react);
 
   var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
-  function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function (nodeInterop) {
-      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-  }
-
-  function _interopRequireWildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-      return obj;
-    }
-
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-      return {
-        default: obj
-      };
-    }
-
-    var cache = _getRequireWildcardCache(nodeInterop);
-
-    if (cache && cache.has(obj)) {
-      return cache.get(obj);
-    }
-
-    var newObj = {};
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-
-    for (var key in obj) {
-      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-
-        if (desc && (desc.get || desc.set)) {
-          Object.defineProperty(newObj, key, desc);
-        } else {
-          newObj[key] = obj[key];
-        }
-      }
-    }
-
-    newObj.default = obj;
-
-    if (cache) {
-      cache.set(obj, newObj);
-    }
-
-    return newObj;
-  }
-
   function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
       default: obj
@@ -257,7 +207,8 @@
   ${props => props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : ''};
 `;
   ;
-  const IconButton = /*#__PURE__*/React.forwardRef(({
+
+  const IconButton = /*#__PURE__*/_react2.default.forwardRef(({
     id,
     variant,
     shape,
@@ -277,8 +228,9 @@
     type,
     hidden
   }, ref) => {
-    const supressFocusRef = React.useRef(null);
-    const [tabbedHere, setTabbedHere] = React.useState(false);
+    const supressFocusRef = _react2.default.useRef(null);
+
+    const [tabbedHere, setTabbedHere] = _react2.default.useState(false);
 
     const isPressingEnter = e => {
       if (e.key === 'Enter') {
@@ -288,12 +240,16 @@
       }
 
       return false;
-    }; // Let's render button
+    };
+
+    _react2.default.useEffect(() => {
+      !!disabled && setTabbedHere(false);
+    }, [disabled]); // Let's render button
 
 
     switch (variant) {
       case 'secondary':
-        return /*#__PURE__*/React.createElement(StyledSecondaryIconButton, {
+        return /*#__PURE__*/_react2.default.createElement(StyledSecondaryIconButton, {
           id: id,
           type: type ?? 'button',
           "data-testid": id,
@@ -323,11 +279,11 @@
           onKeyPress: onKeyPress,
           hidden: hidden,
           tabbedHereBackgroundColor: tabbedHereBackgroundColor
-        }, /*#__PURE__*/React.createElement("div", null, children));
+        }, /*#__PURE__*/_react2.default.createElement("div", null, children));
 
       case 'primary':
       default:
-        return /*#__PURE__*/React.createElement(StyledPrimaryIconButton, {
+        return /*#__PURE__*/_react2.default.createElement(StyledPrimaryIconButton, {
           id: id,
           type: type ?? 'button',
           "data-testid": id,
@@ -358,9 +314,10 @@
           onKeyPress: onKeyPress,
           hidden: hidden,
           tabbedHereBackgroundColor: tabbedHereBackgroundColor
-        }, /*#__PURE__*/React.createElement("div", null, children));
+        }, /*#__PURE__*/_react2.default.createElement("div", null, children));
     }
   });
+
   IconButton.propTypes = {
     id: _propTypes2.default.string,
     variant: _propTypes2.default.oneOf(['primary', 'secondary']),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","css","tabbedHereBackgroundColor","COLORS","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","StyledIconButton","styled","button","BREAKPOINTS","MEDIUM","StyledPrimaryIconButton","primary_800","neutral_200","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","id","variant","shape","action","hideOnLowWidth","isInMobileMenu","disabled","useTransparentBackground","iconColor","unsetIconSize","tabIndex","onKeyPress","children","hidden","IconButton","supressFocusRef","React","isPressingEnter","e","type","event","setTabbedHere"],"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":["tabbedHereStyle","css","tabbedHereBackgroundColor","COLORS","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","StyledIconButton","styled","button","BREAKPOINTS","MEDIUM","StyledPrimaryIconButton","primary_800","neutral_200","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","id","variant","shape","action","hideOnLowWidth","isInMobileMenu","disabled","useTransparentBackground","iconColor","unsetIconSize","tabIndex","onKeyPress","children","hidden","IconButton","supressFocusRef","React","isPressingEnter","e","setTabbedHere","type","event"],"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"}