@laerdal/life-react-components 1.4.1-dev.1 → 1.4.1-dev.12

package/dist/SkipToContent/SkipToContent.cjs

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _typography = require("../styles/typography");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+
+var SkipToContentLink = _styledComponents.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  \n  text-decoration: underline;\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.black));
+
+var SkipToContentWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  z-index: -1000;\n  height: 0px;\n  overflow-x: hidden;\n\n  &:focus-within {\n    height: auto;\n    padding: 16px;\n    z-index: 100000;\n\n    background: ", ";\n  }\n\n  @media print {\n    display: none;\n  }\n"])), _styles.COLORS.accent2_200);
+
+var SkipToContent = function SkipToContent(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkipToContentWrapper, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SkipToContentLink, {
+      href: "#main",
+      children: children
+    })
+  });
+};
+
+var _default = SkipToContent;
+exports.default = _default;
+//# sourceMappingURL=SkipToContent.cjs.map

package/dist/SkipToContent/SkipToContent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SkipToContent/SkipToContent.tsx"],"names":["SkipToContentLink","styled","a","ComponentTextStyle","Bold","COLORS","black","SkipToContentWrapper","div","accent2_200","SkipToContent","children"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;;;AAIA,IAAMA,iBAAiB,GAAGC,0BAAOC,CAAV,iIACnB,mCAAkBC,2BAAmBC,IAArC,EAA2CC,eAAOC,KAAlD,CADmB,CAAvB;;AAMA,IAAMC,oBAAoB,GAAGN,0BAAOO,GAAV,0UAWRH,eAAOI,WAXC,CAA1B;;AAmBA,IAAMC,aAA0D,GAAG,SAA7DA,aAA6D,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACnF,sBACE,qBAAC,oBAAD;AAAA,2BACE,qBAAC,iBAAD;AAAmB,MAAA,IAAI,EAAC,OAAxB;AAAA,gBAAiCA;AAAjC;AADF,IADF;AAKD,CAND;;eAQeD,a","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle, TYPOGRAPHY} from '../styles';\nimport {ComponentSStyling} from '../styles/typography';\n\ntype SkipToContentProps = {};\n\nconst SkipToContentLink = styled.a`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n  \n  text-decoration: underline;\n`;\n\nconst SkipToContentWrapper = styled.div`\n  text-decoration: none;\n  z-index: -1000;\n  height: 0px;\n  overflow-x: hidden;\n\n  &:focus-within {\n    height: auto;\n    padding: 16px;\n    z-index: 100000;\n\n    background: ${COLORS.accent2_200};\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst SkipToContent: React.FunctionComponent<SkipToContentProps> = ({ children }) => {\n  return (\n    <SkipToContentWrapper>\n      <SkipToContentLink href=\"#main\">{children}</SkipToContentLink>\n    </SkipToContentWrapper>\n  );\n};\n\nexport default SkipToContent;\n"],"file":"SkipToContent.cjs"}

package/dist/SkipToContent/SkipToContent.js

@@ -0,0 +1,24 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentTextStyle } from '../styles';
+import { ComponentSStyling } from '../styles/typography';
+import { jsx as _jsx } from "react/jsx-runtime";
+var SkipToContentLink = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  \n  text-decoration: underline;\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.black));
+var SkipToContentWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-decoration: none;\n  z-index: -1000;\n  height: 0px;\n  overflow-x: hidden;\n\n  &:focus-within {\n    height: auto;\n    padding: 16px;\n    z-index: 100000;\n\n    background: ", ";\n  }\n\n  @media print {\n    display: none;\n  }\n"])), COLORS.accent2_200);
+
+var SkipToContent = function SkipToContent(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_jsx(SkipToContentWrapper, {
+    children: /*#__PURE__*/_jsx(SkipToContentLink, {
+      href: "#main",
+      children: children
+    })
+  });
+};
+
+export default SkipToContent;
+//# sourceMappingURL=SkipToContent.js.map

package/dist/SkipToContent/SkipToContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SkipToContent/SkipToContent.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentSStyling","SkipToContentLink","a","Bold","black","SkipToContentWrapper","div","accent2_200","SkipToContent","children"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAqD,WAArD;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;;AAIA,IAAMC,iBAAiB,GAAGJ,MAAM,CAACK,CAAV,mHACnBF,iBAAiB,CAACD,kBAAkB,CAACI,IAApB,EAA0BL,MAAM,CAACM,KAAjC,CADE,CAAvB;AAMA,IAAMC,oBAAoB,GAAGR,MAAM,CAACS,GAAV,4TAWRR,MAAM,CAACS,WAXC,CAA1B;;AAmBA,IAAMC,aAA0D,GAAG,SAA7DA,aAA6D,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACnF,sBACE,KAAC,oBAAD;AAAA,2BACE,KAAC,iBAAD;AAAmB,MAAA,IAAI,EAAC,OAAxB;AAAA,gBAAiCA;AAAjC;AADF,IADF;AAKD,CAND;;AAQA,eAAeD,aAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle, TYPOGRAPHY} from '../styles';\nimport {ComponentSStyling} from '../styles/typography';\n\ntype SkipToContentProps = {};\n\nconst SkipToContentLink = styled.a`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n  \n  text-decoration: underline;\n`;\n\nconst SkipToContentWrapper = styled.div`\n  text-decoration: none;\n  z-index: -1000;\n  height: 0px;\n  overflow-x: hidden;\n\n  &:focus-within {\n    height: auto;\n    padding: 16px;\n    z-index: 100000;\n\n    background: ${COLORS.accent2_200};\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst SkipToContent: React.FunctionComponent<SkipToContentProps> = ({ children }) => {\n  return (\n    <SkipToContentWrapper>\n      <SkipToContentLink href=\"#main\">{children}</SkipToContentLink>\n    </SkipToContentWrapper>\n  );\n};\n\nexport default SkipToContent;\n"],"file":"SkipToContent.js"}

package/dist/SkipToContent/index.cjs

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SkipToContent", {
+  enumerable: true,
+  get: function get() {
+    return _SkipToContent.default;
+  }
+});
+
+var _SkipToContent = _interopRequireDefault(require("./SkipToContent"));
+//# sourceMappingURL=index.cjs.map

package/dist/SkipToContent/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SkipToContent/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as SkipToContent } from './SkipToContent';\n"],"file":"index.cjs"}

package/dist/SkipToContent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SkipToContent/index.ts"],"names":["default","SkipToContent"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAApB,QAAyC,iBAAzC","sourcesContent":["export { default as SkipToContent } from './SkipToContent';\n"],"file":"index.js"}

package/dist/Switcher/MobileSwitcherMenu.cjs

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _Button = require("../Button");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _CommonStyles = require("../GlobalNavigationBar/mobile/CommonStyles");
+
+var _SwitcherMenuItem = _interopRequireDefault(require("./SwitcherMenuItem"));
+
+var _typography = require("../styles/typography");
+
+var _zIndexes = require("../styles/z-indexes");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+
+var Menu = _styledComponents.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ", ";\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ", ";\n"])), _styles.COLORS.white, _CommonStyles.flowDown, _CommonStyles.flowDown, _zIndexes.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL, _styles.scrollBarStyling);
+
+var MenuSection = _styledComponents.default.li(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
+
+var MenuSectionList = _styledComponents.default.ul(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ", "\n"])), _CommonStyles.UserMenuSectionListStyling);
+
+var Top = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ", ";\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ", "\n  }\n"])), _styles.COLORS.neutral_600, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'));
+
+var LabelLine = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  height: 32px;\n  background-color: ", ";\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n"])), _styles.COLORS.neutral_20);
+
+var MobileSwitcherMenu = function MobileSwitcherMenu(_ref) {
+  var header = _ref.header,
+      elementsHeader = _ref.elementsHeader,
+      clickMenuAction = _ref.clickMenuAction,
+      elements = _ref.elements;
+  React.useEffect(function () {
+    function handleKeyPress(e) {
+      if (e.keyCode === 27) {
+        clickMenuAction();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyPress, false);
+    return function () {
+      document.removeEventListener('keydown', handleKeyPress, false);
+    };
+  }, [clickMenuAction]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Menu, {
+    onClick: function onClick() {},
+    role: "menu",
+    "aria-labelledby": "UserMenuButton",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Top, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        action: clickMenuAction,
+        isInMobileMenu: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowLineLeft, {
+          size: "24px",
+          color: _styles.COLORS.neutral_600
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+        children: header
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.Right, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          action: clickMenuAction,
+          isInMobileMenu: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
+            size: "24px"
+          })
+        })
+      })]
+    }), elements && (elements === null || elements === void 0 ? void 0 : elements.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuSection, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LabelLine, {
+        children: elementsHeader
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSectionList, {
+        children: elements === null || elements === void 0 ? void 0 : elements.map(function (element) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SwitcherMenuItem.default, {
+            url: element === null || element === void 0 ? void 0 : element.to,
+            label: element === null || element === void 0 ? void 0 : element.label,
+            Icon: element.icon
+          });
+        })
+      })]
+    })]
+  });
+};
+
+MobileSwitcherMenu.propTypes = {
+  header: _propTypes.default.string.isRequired,
+  elementsHeader: _propTypes.default.string.isRequired,
+  clickMenuAction: _propTypes.default.func.isRequired,
+  elements: _propTypes.default.array
+};
+var _default = MobileSwitcherMenu;
+exports.default = _default;
+//# sourceMappingURL=MobileSwitcherMenu.cjs.map

package/dist/Switcher/MobileSwitcherMenu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","ComponentTextStyle","Regular","LabelLine","span","neutral_20","MobileSwitcherMenu","header","elementsHeader","clickMenuAction","elements","React","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../styles';\n\nimport {UserMenuItem} from '../types';\nimport {IconButton} from '../Button';\nimport {ArrowLineLeft, Close} from '../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\nimport {ComponentSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.cjs"}

package/dist/Switcher/MobileSwitcherMenu.js

@@ -0,0 +1,90 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling } from '../styles';
+import { IconButton } from '../Button';
+import { ArrowLineLeft, Close } from '../icons/systemicons/SystemIcons';
+import { flowDown, Right, UserMenuSectionListStyling } from '../GlobalNavigationBar/mobile/CommonStyles';
+import SwitcherMenuItem from './SwitcherMenuItem';
+import { ComponentSStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Menu = styled.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ", ";\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ", ";\n"])), COLORS.white, flowDown, flowDown, Z_INDEXES.off_canvas, BREAKPOINTS.SMALL, scrollBarStyling);
+var MenuSection = styled.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
+var MenuSectionList = styled.ul(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ", "\n"])), UserMenuSectionListStyling);
+var Top = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ", ";\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ", "\n  }\n"])), COLORS.neutral_600, ComponentSStyling(ComponentTextStyle.Regular, 'inherit'));
+var LabelLine = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  height: 32px;\n  background-color: ", ";\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n"])), COLORS.neutral_20);
+
+var MobileSwitcherMenu = function MobileSwitcherMenu(_ref) {
+  var header = _ref.header,
+      elementsHeader = _ref.elementsHeader,
+      clickMenuAction = _ref.clickMenuAction,
+      elements = _ref.elements;
+  React.useEffect(function () {
+    function handleKeyPress(e) {
+      if (e.keyCode === 27) {
+        clickMenuAction();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyPress, false);
+    return function () {
+      document.removeEventListener('keydown', handleKeyPress, false);
+    };
+  }, [clickMenuAction]);
+  return /*#__PURE__*/_jsxs(Menu, {
+    onClick: function onClick() {},
+    role: "menu",
+    "aria-labelledby": "UserMenuButton",
+    children: [/*#__PURE__*/_jsxs(Top, {
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        action: clickMenuAction,
+        isInMobileMenu: true,
+        children: /*#__PURE__*/_jsx(ArrowLineLeft, {
+          size: "24px",
+          color: COLORS.neutral_600
+        })
+      }), /*#__PURE__*/_jsx("h3", {
+        children: header
+      }), /*#__PURE__*/_jsx(Right, {
+        children: /*#__PURE__*/_jsx(IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          action: clickMenuAction,
+          isInMobileMenu: true,
+          children: /*#__PURE__*/_jsx(Close, {
+            size: "24px"
+          })
+        })
+      })]
+    }), elements && (elements === null || elements === void 0 ? void 0 : elements.length) > 0 && /*#__PURE__*/_jsxs(MenuSection, {
+      children: [/*#__PURE__*/_jsx(LabelLine, {
+        children: elementsHeader
+      }), /*#__PURE__*/_jsx(MenuSectionList, {
+        children: elements === null || elements === void 0 ? void 0 : elements.map(function (element) {
+          return /*#__PURE__*/_jsx(SwitcherMenuItem, {
+            url: element === null || element === void 0 ? void 0 : element.to,
+            label: element === null || element === void 0 ? void 0 : element.label,
+            Icon: element.icon
+          });
+        })
+      })]
+    })]
+  });
+};
+
+MobileSwitcherMenu.propTypes = {
+  header: _pt.string.isRequired,
+  elementsHeader: _pt.string.isRequired,
+  clickMenuAction: _pt.func.isRequired,
+  elements: _pt.array
+};
+export default MobileSwitcherMenu;
+//# sourceMappingURL=MobileSwitcherMenu.js.map

package/dist/Switcher/MobileSwitcherMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","scrollBarStyling","IconButton","ArrowLineLeft","Close","flowDown","Right","UserMenuSectionListStyling","SwitcherMenuItem","ComponentSStyling","Z_INDEXES","Menu","ul","white","off_canvas","SMALL","MenuSection","li","MenuSectionList","Top","div","neutral_600","Regular","LabelLine","span","neutral_20","MobileSwitcherMenu","header","elementsHeader","clickMenuAction","elements","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../styles';\n\nimport {UserMenuItem} from '../types';\nimport {IconButton} from '../Button';\nimport {ArrowLineLeft, Close} from '../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\nimport {ComponentSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}

package/dist/Switcher/SwitcherMenuItem.cjs

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _typography = require("../styles/typography");
+
+var _zIndexes = require("../styles/z-indexes");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+
+var StyledSwitcherItem = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 16px 25px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ", "\n\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 4px;\n    top: 4px;\n    bottom: 4px;\n    width: 4px;\n    background-color: transparent;\n    border-radius: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    font-weight: bold;\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n\n    &:after {\n      background-color: ", ";\n    }\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    z-index: ", ";\n    box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_800, _styles.COLORS.primary_500, _styles.COLORS.neutral_800, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_600, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _styles.COLORS.primary_500, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_500);
+
+var A = _styledComponents.default.a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
+
+var SwitcherMenuItem = function SwitcherMenuItem(_ref) {
+  var label = _ref.label,
+      url = _ref.url,
+      disabled = _ref.disabled,
+      Icon = _ref.Icon,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? A : _ref$as,
+      testId = _ref.testId;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSwitcherItem, {
+    onClick: function onClick() {
+      return window.location.href = url || '';
+    },
+    as: as,
+    href: url || '',
+    target: "_parent",
+    className: disabled ? 'disabled' : '',
+    "data-testid": testId,
+    children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+      size: "22px",
+      color: "#666666"
+    }), label]
+  }, label);
+};
+
+var _default = SwitcherMenuItem;
+exports.default = _default;
+//# sourceMappingURL=SwitcherMenuItem.cjs.map

package/dist/Switcher/SwitcherMenuItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Switcher/SwitcherMenuItem.tsx"],"names":["StyledSwitcherItem","styled","div","ComponentTextStyle","Regular","COLORS","neutral_600","Z_INDEXES","active","neutral_800","primary_500","neutral_300","neutral_100","hover","primary_600","primary_20","primary_800","primary_100","focus","A","a","SwitcherMenuItem","label","url","disabled","Icon","as","testId","window","location","href"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV,8wCASpB,mCAAkBC,2BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CAToB,EA8BTC,oBAAUC,MA9BD,EAgCXH,eAAOI,WAhCI,EAmCEJ,eAAOK,WAnCT,EAuCVL,eAAOI,WAvCG,EA4CXJ,eAAOM,WA5CI,EA6CAN,eAAOO,WA7CP,EAiDTL,oBAAUM,KAjDD,EAkDXR,eAAOS,WAlDI,EAmDAT,eAAOU,UAnDP,EAsDVV,eAAOS,WAtDG,EA2DTP,oBAAUC,MA3DD,EA4DXH,eAAOW,WA5DI,EA6DAX,eAAOY,WA7DP,EAiEEZ,eAAOK,WAjET,EAqEVL,eAAOW,WArEG,EA0ETT,oBAAUW,KA1ED,EA2EMb,eAAOK,WA3Eb,CAAxB;;AAgFA,IAAMS,CAAC,GAAGlB,0BAAOmB,CAAV,qFAAP;;AAEA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,GAAV,QAAUA,GAAV;AAAA,MAAeC,QAAf,QAAeA,QAAf;AAAA,MAAyBC,IAAzB,QAAyBA,IAAzB;AAAA,qBAA+BC,EAA/B;AAAA,MAA+BA,EAA/B,wBAAoCP,CAApC;AAAA,MAAuCQ,MAAvC,QAAuCA,MAAvC;AAAA,sBACvB,sBAAC,kBAAD;AACE,IAAA,OAAO,EAAE;AAAA,aAAOC,MAAM,CAACC,QAAP,CAAgBC,IAAhB,GAAuBP,GAAG,IAAI,EAArC;AAAA,KADX;AAEE,IAAA,EAAE,EAAEG,EAFN;AAGE,IAAA,IAAI,EAAEH,GAAG,IAAI,EAHf;AAIE,IAAA,MAAM,EAAC,SAJT;AAME,IAAA,SAAS,EAAEC,QAAQ,GAAG,UAAH,GAAgB,EANrC;AAOE,mBAAaG,MAPf;AAAA,eAQGF,IAAI,iBAAI,qBAAC,IAAD;AAAM,MAAA,IAAI,EAAC,MAAX;AAAkB,MAAA,KAAK,EAAC;AAAxB,MARX,EASGH,KATH;AAAA,KAKOA,KALP,CADuB;AAAA,CAAzB;;eAceD,gB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {SwitcherNavItem} from '../types';\nimport {ComponentMStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst StyledSwitcherItem = styled.div`\n  padding: 16px 25px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 4px;\n    top: 4px;\n    bottom: 4px;\n    width: 4px;\n    background-color: transparent;\n    border-radius: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    font-weight: bold;\n    color: ${COLORS.neutral_800};\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.neutral_800};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    color: ${COLORS.primary_600};\n    background-color: ${COLORS.primary_20};\n\n    svg path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst A = styled.a``;\n\nconst SwitcherMenuItem = ({ label, url, disabled, Icon, as = A, testId }: SwitcherNavItem) => (\n  <StyledSwitcherItem\n    onClick={() => (window.location.href = url || '')}\n    as={as}\n    href={url || ''}\n    target=\"_parent\"\n    key={label}\n    className={disabled ? 'disabled' : ''}\n    data-testid={testId}>\n    {Icon && <Icon size=\"22px\" color=\"#666666\" />}\n    {label}\n  </StyledSwitcherItem>\n);\n\nexport default SwitcherMenuItem;\n"],"file":"SwitcherMenuItem.cjs"}

package/dist/Switcher/SwitcherMenuItem.js

@@ -0,0 +1,40 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentTextStyle } from '../styles';
+import { ComponentMStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var StyledSwitcherItem = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 16px 25px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ", "\n\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 4px;\n    top: 4px;\n    bottom: 4px;\n    width: 4px;\n    background-color: transparent;\n    border-radius: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    font-weight: bold;\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n\n    &:after {\n      background-color: ", ";\n    }\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    z-index: ", ";\n    box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), Z_INDEXES.active, COLORS.neutral_800, COLORS.primary_500, COLORS.neutral_800, COLORS.neutral_300, COLORS.neutral_100, Z_INDEXES.hover, COLORS.primary_600, COLORS.primary_20, COLORS.primary_600, Z_INDEXES.active, COLORS.primary_800, COLORS.primary_100, COLORS.primary_500, COLORS.primary_800, Z_INDEXES.focus, COLORS.primary_500);
+var A = styled.a(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
+
+var SwitcherMenuItem = function SwitcherMenuItem(_ref) {
+  var label = _ref.label,
+      url = _ref.url,
+      disabled = _ref.disabled,
+      Icon = _ref.Icon,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? A : _ref$as,
+      testId = _ref.testId;
+  return /*#__PURE__*/_jsxs(StyledSwitcherItem, {
+    onClick: function onClick() {
+      return window.location.href = url || '';
+    },
+    as: as,
+    href: url || '',
+    target: "_parent",
+    className: disabled ? 'disabled' : '',
+    "data-testid": testId,
+    children: [Icon && /*#__PURE__*/_jsx(Icon, {
+      size: "22px",
+      color: "#666666"
+    }), label]
+  }, label);
+};
+
+export default SwitcherMenuItem;
+//# sourceMappingURL=SwitcherMenuItem.js.map

package/dist/Switcher/SwitcherMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Switcher/SwitcherMenuItem.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentMStyling","Z_INDEXES","StyledSwitcherItem","div","Regular","neutral_600","active","neutral_800","primary_500","neutral_300","neutral_100","hover","primary_600","primary_20","primary_800","primary_100","focus","A","a","SwitcherMenuItem","label","url","disabled","Icon","as","testId","window","location","href"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA,SAAQC,iBAAR,QAAgC,sBAAhC;AACA,SAAQC,SAAR,QAAwB,qBAAxB;;;AAEA,IAAMC,kBAAkB,GAAGL,MAAM,CAACM,GAAV,gwCASpBH,iBAAiB,CAACD,kBAAkB,CAACK,OAApB,EAA6BN,MAAM,CAACO,WAApC,CATG,EA8BTJ,SAAS,CAACK,MA9BD,EAgCXR,MAAM,CAACS,WAhCI,EAmCET,MAAM,CAACU,WAnCT,EAuCVV,MAAM,CAACS,WAvCG,EA4CXT,MAAM,CAACW,WA5CI,EA6CAX,MAAM,CAACY,WA7CP,EAiDTT,SAAS,CAACU,KAjDD,EAkDXb,MAAM,CAACc,WAlDI,EAmDAd,MAAM,CAACe,UAnDP,EAsDVf,MAAM,CAACc,WAtDG,EA2DTX,SAAS,CAACK,MA3DD,EA4DXR,MAAM,CAACgB,WA5DI,EA6DAhB,MAAM,CAACiB,WA7DP,EAiEEjB,MAAM,CAACU,WAjET,EAqEVV,MAAM,CAACgB,WArEG,EA0ETb,SAAS,CAACe,KA1ED,EA2EMlB,MAAM,CAACU,WA3Eb,CAAxB;AAgFA,IAAMS,CAAC,GAAGpB,MAAM,CAACqB,CAAV,uEAAP;;AAEA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,GAAV,QAAUA,GAAV;AAAA,MAAeC,QAAf,QAAeA,QAAf;AAAA,MAAyBC,IAAzB,QAAyBA,IAAzB;AAAA,qBAA+BC,EAA/B;AAAA,MAA+BA,EAA/B,wBAAoCP,CAApC;AAAA,MAAuCQ,MAAvC,QAAuCA,MAAvC;AAAA,sBACvB,MAAC,kBAAD;AACE,IAAA,OAAO,EAAE;AAAA,aAAOC,MAAM,CAACC,QAAP,CAAgBC,IAAhB,GAAuBP,GAAG,IAAI,EAArC;AAAA,KADX;AAEE,IAAA,EAAE,EAAEG,EAFN;AAGE,IAAA,IAAI,EAAEH,GAAG,IAAI,EAHf;AAIE,IAAA,MAAM,EAAC,SAJT;AAME,IAAA,SAAS,EAAEC,QAAQ,GAAG,UAAH,GAAgB,EANrC;AAOE,mBAAaG,MAPf;AAAA,eAQGF,IAAI,iBAAI,KAAC,IAAD;AAAM,MAAA,IAAI,EAAC,MAAX;AAAkB,MAAA,KAAK,EAAC;AAAxB,MARX,EASGH,KATH;AAAA,KAKOA,KALP,CADuB;AAAA,CAAzB;;AAcA,eAAeD,gBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {SwitcherNavItem} from '../types';\nimport {ComponentMStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst StyledSwitcherItem = styled.div`\n  padding: 16px 25px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 4px;\n    top: 4px;\n    bottom: 4px;\n    width: 4px;\n    background-color: transparent;\n    border-radius: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    font-weight: bold;\n    color: ${COLORS.neutral_800};\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.neutral_800};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    color: ${COLORS.primary_600};\n    background-color: ${COLORS.primary_20};\n\n    svg path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst A = styled.a``;\n\nconst SwitcherMenuItem = ({ label, url, disabled, Icon, as = A, testId }: SwitcherNavItem) => (\n  <StyledSwitcherItem\n    onClick={() => (window.location.href = url || '')}\n    as={as}\n    href={url || ''}\n    target=\"_parent\"\n    key={label}\n    className={disabled ? 'disabled' : ''}\n    data-testid={testId}>\n    {Icon && <Icon size=\"22px\" color=\"#666666\" />}\n    {label}\n  </StyledSwitcherItem>\n);\n\nexport default SwitcherMenuItem;\n"],"file":"SwitcherMenuItem.js"}

package/dist/Switcher/index.cjs

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MobileSwitcherMenu", {
+  enumerable: true,
+  get: function get() {
+    return _MobileSwitcherMenu.default;
+  }
+});
+Object.defineProperty(exports, "SwitcherMenuItem", {
+  enumerable: true,
+  get: function get() {
+    return _SwitcherMenuItem.default;
+  }
+});
+
+var _SwitcherMenuItem = _interopRequireDefault(require("./SwitcherMenuItem"));
+
+var _MobileSwitcherMenu = _interopRequireDefault(require("./MobileSwitcherMenu"));
+//# sourceMappingURL=index.cjs.map

package/dist/Switcher/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Switcher/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["import SwitcherMenuItem from './SwitcherMenuItem';\nimport MobileSwitcherMenu from './MobileSwitcherMenu';\n\nexport { SwitcherMenuItem, MobileSwitcherMenu };\n"],"file":"index.cjs"}

package/dist/Switcher/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Switcher/index.ts"],"names":["SwitcherMenuItem","MobileSwitcherMenu"],"mappings":"AAAA,OAAOA,gBAAP,MAA6B,oBAA7B;AACA,OAAOC,kBAAP,MAA+B,sBAA/B;AAEA,SAASD,gBAAT,EAA2BC,kBAA3B","sourcesContent":["import SwitcherMenuItem from './SwitcherMenuItem';\nimport MobileSwitcherMenu from './MobileSwitcherMenu';\n\nexport { SwitcherMenuItem, MobileSwitcherMenu };\n"],"file":"index.js"}