@laerdal/life-react-components 1.2.2-dev.13.full → 1.2.2-dev.15.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: () => {},
+        selectedItemId: '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,cAAc,EAAE;AAA1E,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={() => {}} selectedItemId={'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,85 @@
+(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}` : ''};
+  cursor: ${props => props.isDisabled ? 'not-allowed' : 'pointer'};
+`;
+  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};
+  svg:last-child {
+    margin-left: auto;
+  }
+  :focus {
+    outline: none;
+    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};
+  }
+  :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 24px;
+  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_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,GAAwD;AACrG;AACA;AACA;AACA;AACA,mBAAoBE,KAAD,IAAYA,KAAK,CAALA,gBAAAA,GAA0B,aAAYC,eAAOC,WAA7CF,EAAAA,GAA6D,EAAI;AAChG,YAAaA,KAAD,IAAYA,KAAK,CAALA,UAAAA,GAAAA,aAAAA,GAAmC,SAAW;AAN/D,CAAA;AASP,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,GAA6B;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBG,eAAOO,UAAW;AAClC;AACA;AACA;AACA;AACA;AACA,eAAeC,oBAAUC,KAAM;AAC/B,+BAA+BT,eAAOU,WAAY,iBAAgBV,eAAOU,WAAY;AACrF;AACA;AACA,IAAKX,KAAD,IAAYA,KAAK,CAALA,UAAAA,GAAAA,aAAAA,GAAmC,EAAI;AACvD;AACA,kBAAkBC,eAAOW,UAAW;AACpC;AACA;AACA,kBAAkBX,eAAOY,WAAY;AACrC;AAvBO,CAAA;AA0BA,QAAMC,mBAAmB,WAAnBA,mBAAmB,GAAGjB,2BAAOC,GAAI;AAC9C;AADO,CAAA;AAIA,QAAMiB,iBAAiB,WAAjBA,iBAAiB,GAAGlB,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; isDisabled: 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  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};\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 }>`\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  svg:last-child {\n    margin-left: auto;\n  }\n  :focus {\n    outline: none;\n    z-index: ${Z_INDEXES.focus};\n    box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};\n  }\n\n  ${(props) => (props.isDisabled ? disabledState : '')}\n  :hover {\n    background: ${COLORS.primary_20};\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 24px;\n  margin: 12px 0;\n  background: ${COLORS.white};\n`;\n"],"file":"styles.js"}

package/dist/umd/GlobalNavigationBar/Avatar.js

@@ -110,7 +110,7 @@
   }
 `;
   const AvatarImage = _styledComponents2.default.div`
-  background-color: ${props => props.color};
+  background-color: ${props => props.$color};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -156,7 +156,7 @@
       onMouseDown: e => e.preventDefault()
     }, /*#__PURE__*/React.createElement(AvatarImage, {
       size: size,
-      color: color,
+      $color: color,
       useInteractionStyling: useInteractionStyling
     }, /*#__PURE__*/React.createElement(AvatarLetter, {
       "data-hj-suppress": true,

package/dist/umd/GlobalNavigationBar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/Avatar.tsx"],"names":["LinkStyling","css","COLORS","primary_500","primary","ImageStyling","primary_700","primary_800","AvatarLink","styled","div","props","AvatarImage","color","AvatarLetter","AvatarContainer","BREAKPOINTS","MEDIUM","firstName","lastName","size","profileMenuLink","useInteractionStyling","Avatar","e"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS, BREAKPOINTS } from '../styles';\n\nconst LinkStyling = css`\n  &:focus {\n    background: ${COLORS.primary_500};\n    outline: none;\n  }\n  &:focus-within {\n    box-shadow: 0px 0px 8px ${COLORS.primary}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n  }\n`;\n\nconst ImageStyling = css`\n  &:hover {\n    background-color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    background: ${COLORS.primary_800};\n  }\n`;\n\nconst AvatarLink = styled.div<{ size: number; useInteractionStyling: boolean }>`\n  text-decoration: none;\n\n  ${props => (props.useInteractionStyling ? LinkStyling : '')};\n  &:focus {\n    outline: none;\n  }\n  &:focus-within {\n    border-radius: ${props => (props.useInteractionStyling ? `${props.size ? props.size : 48}px` : '')};\n  }\n`;\n\nconst AvatarImage = styled.div<{ size: number; color: string; useInteractionStyling: boolean }>`\n  background-color: ${props => props.color};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ${props => (props.size ? props.size : 48)}px;\n  height: ${props => (props.size ? props.size : 48)}px;\n  width: ${props => (props.size ? props.size : 48)}px;\n  cursor: pointer;\n\n  ${props => (props.useInteractionStyling ? ImageStyling : '')};\n`;\n\nconst AvatarLetter = styled.div<{ size: number }>`\n  font-size: ${props => props.size / 2 - 2}px;\n  color: white;\n  font-weight: bold;\n  text-transform: uppercase;\n  display: inline-block;\n  line-height: ${props => (props.size ? props.size : 48)}px;\n`;\n\nexport const AvatarContainer = styled.div<{ hideOnLowWidth?: boolean; inMobileMenu?: boolean; hidePadding?: boolean }>`\n  flex-direction: column;\n  align-self: center;\n  margin-right: ${props => (props.inMobileMenu ? '6px' : '8px')};\n  margin-left: ${props => (props.inMobileMenu ? '0' : 'auto')};\n  display: ${props => (props.hideOnLowWidth ? 'none' : 'flex')};\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n    ${props => !props.hidePadding ? 'padding: 6px;' : ''};\n  }\n`;\n\ninterface AvatarProps {\n  firstName: string;\n  lastName: string;\n  size: number;\n  color: string;\n  profileMenuLink: string;\n  useInteractionStyling?: boolean;\n}\n\nconst Avatar = ({ firstName, lastName, size, color, useInteractionStyling = true }: AvatarProps) => {\n  return (\n    <AvatarLink size={size} tabIndex={0} useInteractionStyling={useInteractionStyling} onMouseDown={(e: any) => e.preventDefault()}>\n      <AvatarImage size={size} color={color} useInteractionStyling={useInteractionStyling}>\n        <AvatarLetter data-hj-suppress size={size}>\n          {firstName[0]}\n          {lastName[0]}\n        </AvatarLetter>\n      </AvatarImage>\n    </AvatarLink>\n  );\n};\n\nexport default Avatar;\n"],"file":"Avatar.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/Avatar.tsx"],"names":["LinkStyling","css","COLORS","primary_500","primary","ImageStyling","primary_700","primary_800","AvatarLink","styled","div","props","AvatarImage","$color","AvatarLetter","AvatarContainer","BREAKPOINTS","MEDIUM","firstName","lastName","size","color","profileMenuLink","useInteractionStyling","Avatar","e"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS, BREAKPOINTS } from '../styles';\n\nconst LinkStyling = css`\n  &:focus {\n    background: ${COLORS.primary_500};\n    outline: none;\n  }\n  &:focus-within {\n    box-shadow: 0px 0px 8px ${COLORS.primary}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n  }\n`;\n\nconst ImageStyling = css`\n  &:hover {\n    background-color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    background: ${COLORS.primary_800};\n  }\n`;\n\nconst AvatarLink = styled.div<{ size: number; useInteractionStyling: boolean }>`\n  text-decoration: none;\n\n  ${(props) => (props.useInteractionStyling ? LinkStyling : '')};\n  &:focus {\n    outline: none;\n  }\n  &:focus-within {\n    border-radius: ${(props) => (props.useInteractionStyling ? `${props.size ? props.size : 48}px` : '')};\n  }\n`;\n\nconst AvatarImage = styled.div<{ size: number; $color: string; useInteractionStyling: boolean }>`\n  background-color: ${(props) => props.$color};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ${(props) => (props.size ? props.size : 48)}px;\n  height: ${(props) => (props.size ? props.size : 48)}px;\n  width: ${(props) => (props.size ? props.size : 48)}px;\n  cursor: pointer;\n\n  ${(props) => (props.useInteractionStyling ? ImageStyling : '')};\n`;\n\nconst AvatarLetter = styled.div<{ size: number }>`\n  font-size: ${(props) => props.size / 2 - 2}px;\n  color: white;\n  font-weight: bold;\n  text-transform: uppercase;\n  display: inline-block;\n  line-height: ${(props) => (props.size ? props.size : 48)}px;\n`;\n\nexport const AvatarContainer = styled.div<{ hideOnLowWidth?: boolean; inMobileMenu?: boolean; hidePadding?: boolean }>`\n  flex-direction: column;\n  align-self: center;\n  margin-right: ${(props) => (props.inMobileMenu ? '6px' : '8px')};\n  margin-left: ${(props) => (props.inMobileMenu ? '0' : 'auto')};\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'flex')};\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n    ${(props) => (!props.hidePadding ? 'padding: 6px;' : '')};\n  }\n`;\n\ninterface AvatarProps {\n  firstName: string;\n  lastName: string;\n  size: number;\n  color: string;\n  profileMenuLink: string;\n  useInteractionStyling?: boolean;\n}\n\nconst Avatar = ({ firstName, lastName, size, color, useInteractionStyling = true }: AvatarProps) => {\n  return (\n    <AvatarLink size={size} tabIndex={0} useInteractionStyling={useInteractionStyling} onMouseDown={(e: any) => e.preventDefault()}>\n      <AvatarImage size={size} $color={color} useInteractionStyling={useInteractionStyling}>\n        <AvatarLetter data-hj-suppress size={size}>\n          {firstName[0]}\n          {lastName[0]}\n        </AvatarLetter>\n      </AvatarImage>\n    </AvatarLink>\n  );\n};\n\nexport default Avatar;\n"],"file":"Avatar.js"}

package/dist/umd/GlobalNavigationBar/Logo.js

@@ -90,7 +90,7 @@
   svg {
     width: 66px;
     height: 36px;
-    color: ${props => props.color};
+    color: ${props => props.$color};
     ${_styles.BREAKPOINTS.MEDIUM} {
       width: 88px;
       height: 48px;
@@ -118,18 +118,18 @@
   const Name = _styledComponents2.default.span`
   margin-left: 8px;
   padding-left: 8px;
-  border-left: 1px solid ${props => props.color || _styles.COLORS.black};
+  border-left: 1px solid ${props => props.$color || _styles.COLORS.black};
   letter-spacing: -0.02em;
 
-  ${props => props.noSizeChangeOnMobile ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black) : (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black)}
-  
+  ${props => props.noSizeChangeOnMobile ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black) : (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black)}
+
   font-weight: 300 !important;
   line-height: 24px !important;
-  
+
   ${_styles.BREAKPOINTS.MEDIUM} {
     margin-left: 12px;
     padding-left: 12px;
-    ${props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black)}
+    ${props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black)}
   }
 `;
   const BetaTag = _styledComponents2.default.span`
@@ -140,7 +140,7 @@
   border-left: none;
   border-radius: 2px;
 
-  ${props => (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.color || _styles.COLORS.white)}
+  ${props => (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.$color || _styles.COLORS.white)}
 `;
 
   const Logo = ({
@@ -161,13 +161,13 @@
           onClick();
         }
       },
-      color: color
+      $color: color
     }, color === _styles.COLORS.white ? /*#__PURE__*/React.createElement(_assets.LaerdalWhiteLogo, null) : /*#__PURE__*/React.createElement(_assets.LaerdalLogo, null), /*#__PURE__*/React.createElement(Name, {
-      color: color,
+      $color: color,
       noSizeChangeOnMobile: noSizeChangeOnMobile || false
     }, name), showBetaTag && /*#__PURE__*/React.createElement(BetaTag, {
       backgroundColor: betaTagBackgroundColor,
-      color: betaTagColor
+      $color: betaTagColor
     }, "BETA")));
   };
 

package/dist/umd/GlobalNavigationBar/Logo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","styled","props","color","BREAKPOINTS","MEDIUM","LogoContainer","div","Name","span","COLORS","black","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","BetaTag","accent2_500","name","showBetaTag","onClick","to","noSizeChangeOnMobile","betaTagBackgroundColor","betaTagColor","Logo","e"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {LaerdalLogo, LaerdalWhiteLogo} from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentXSStyling} from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) => props.noSizeChangeOnMobile\n          ? ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)\n          : ComponentXSStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n  \n  font-weight: 300 !important;\n  line-height: 24px !important;\n  \n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","styled","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","div","Name","span","COLORS","black","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","BetaTag","accent2_500","name","showBetaTag","onClick","to","color","noSizeChangeOnMobile","betaTagBackgroundColor","betaTagColor","Logo","e"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}

package/dist/umd/index.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "./styles", "./icons", "./types", "./AuthPage", "./Button", "./Breadcrumb", "./Chips", "./SkipToContent", "./Footer", "./LoadingIndicator", "./MiniProductCard", "./NavItem", "./Layouts", "./GlobalNavigationBar", "./Tabs", "./Banners", "./Toasters", "./InputFields", "./Dropdown", "./Switcher", "./LoadingPage", "./List", "./Modals", "./Paginator", "./Table", "./Toggles", "./HyperLink", "./NotificationDot"], factory);
+    define(["exports", "./styles", "./icons", "./types", "./AuthPage", "./Button", "./Breadcrumb", "./Chips", "./SkipToContent", "./Footer", "./LoadingIndicator", "./MiniProductCard", "./NavItem", "./Layouts", "./GlobalNavigationBar", "./Tabs", "./Banners", "./Toasters", "./InputFields", "./Dropdown", "./Switcher", "./LoadingPage", "./List", "./Modals", "./Paginator", "./Table", "./Toggles", "./HyperLink", "./NotificationDot", "./Accordion"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("./styles"), require("./icons"), require("./types"), require("./AuthPage"), require("./Button"), require("./Breadcrumb"), require("./Chips"), require("./SkipToContent"), require("./Footer"), require("./LoadingIndicator"), require("./MiniProductCard"), require("./NavItem"), require("./Layouts"), require("./GlobalNavigationBar"), require("./Tabs"), require("./Banners"), require("./Toasters"), require("./InputFields"), require("./Dropdown"), require("./Switcher"), require("./LoadingPage"), require("./List"), require("./Modals"), require("./Paginator"), require("./Table"), require("./Toggles"), require("./HyperLink"), require("./NotificationDot"));
+    factory(exports, require("./styles"), require("./icons"), require("./types"), require("./AuthPage"), require("./Button"), require("./Breadcrumb"), require("./Chips"), require("./SkipToContent"), require("./Footer"), require("./LoadingIndicator"), require("./MiniProductCard"), require("./NavItem"), require("./Layouts"), require("./GlobalNavigationBar"), require("./Tabs"), require("./Banners"), require("./Toasters"), require("./InputFields"), require("./Dropdown"), require("./Switcher"), require("./LoadingPage"), require("./List"), require("./Modals"), require("./Paginator"), require("./Table"), require("./Toggles"), require("./HyperLink"), require("./NotificationDot"), require("./Accordion"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.styles, global.icons, global.types, global.AuthPage, global.Button, global.Breadcrumb, global.Chips, global.SkipToContent, global.Footer, global.LoadingIndicator, global.MiniProductCard, global.NavItem, global.Layouts, global.GlobalNavigationBar, global.Tabs, global.Banners, global.Toasters, global.InputFields, global.Dropdown, global.Switcher, global.LoadingPage, global.List, global.Modals, global.Paginator, global.Table, global.Toggles, global.HyperLink, global.NotificationDot);
+    factory(mod.exports, global.styles, global.icons, global.types, global.AuthPage, global.Button, global.Breadcrumb, global.Chips, global.SkipToContent, global.Footer, global.LoadingIndicator, global.MiniProductCard, global.NavItem, global.Layouts, global.GlobalNavigationBar, global.Tabs, global.Banners, global.Toasters, global.InputFields, global.Dropdown, global.Switcher, global.LoadingPage, global.List, global.Modals, global.Paginator, global.Table, global.Toggles, global.HyperLink, global.NotificationDot, global.Accordion);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _styles, _icons, _types, _AuthPage, _Button, _Breadcrumb, _Chips, _SkipToContent, _Footer, _LoadingIndicator, _MiniProductCard, _NavItem, _Layouts, _GlobalNavigationBar, _Tabs, _Banners, _Toasters, _InputFields, _Dropdown, _Switcher, _LoadingPage, _List, _Modals, _Paginator, _Table, _Toggles, _HyperLink, _NotificationDot) {
+})(this, function (exports, _styles, _icons, _types, _AuthPage, _Button, _Breadcrumb, _Chips, _SkipToContent, _Footer, _LoadingIndicator, _MiniProductCard, _NavItem, _Layouts, _GlobalNavigationBar, _Tabs, _Banners, _Toasters, _InputFields, _Dropdown, _Switcher, _LoadingPage, _List, _Modals, _Paginator, _Table, _Toggles, _HyperLink, _NotificationDot, _Accordion) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -268,5 +268,14 @@
       }
     });
   });
+  Object.keys(_Accordion).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    Object.defineProperty(exports, key, {
+      enumerable: true,
+      get: function () {
+        return _Accordion[key];
+      }
+    });
+  });
 });
 //# sourceMappingURL=index.js.map

package/dist/umd/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\n\nexport * from './AuthPage';\n\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\n\nexport * from './AuthPage';\n\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.2.2-dev.13.full",
+  "version": "1.2.2-dev.15.full",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [