@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.13

package/dist/SideMenu/SideMenuFooter.js

@@ -1,43 +1,46 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import React from 'react';
-import styled from 'styled-components';
-import { COLORS, ComponentTextStyle, ComponentXXSStyling } from '../styles';
-import { LaerdalLogo } from '../assets';
-import { Button } from '../Button';
-import { MenuItem } from '../MenuItem';
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n\n  border-top: 1px solid ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n\n  border-top: 1px solid ", ";\n"])), COLORS.neutral_200);
-var ItemsContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n"], ["\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n"])));
-var ButtonsContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 16px;\n  gap: 10px;\n  width: 100%;\n\n  button {\n    flex: 1;\n  }\n\n  .small & {\n    gap: 0;\n    flex-direction: column-reverse;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 16px;\n  gap: 10px;\n  width: 100%;\n\n  button {\n    flex: 1;\n  }\n\n  .small & {\n    gap: 0;\n    flex-direction: column-reverse;\n  }\n"])));
-var LogoContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  min-height: 80px;\n  padding: 8px 16px;\n  background-color: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  min-height: 80px;\n  padding: 8px 16px;\n  background-color: ", ";\n  width: 100%;\n"])), COLORS.neutral_20);
-var NoteContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500));
-export var SideMenuFooter = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    return (React.createElement(Wrapper, null,
-        !!((_b = (_a = props.footer) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length) &&
-            React.createElement(ItemsContainer, null, props.footer.items.map(function (item, index) {
-                return React.createElement(MenuItem, __assign({ key: index, size: props.size }, item));
-            })),
-        !!((_d = (_c = props.footer) === null || _c === void 0 ? void 0 : _c.buttons) === null || _d === void 0 ? void 0 : _d.length) &&
-            React.createElement(ButtonsContainer, null, props.footer.buttons.map(function (button, index) {
-                return React.createElement(Button, __assign({ key: index, size: props.size }, button), button.label);
-            })),
-        !((_f = (_e = props.footer) === null || _e === void 0 ? void 0 : _e.buttons) === null || _f === void 0 ? void 0 : _f.length) &&
-            React.createElement(LogoContainer, null,
-                React.createElement(LaerdalLogo, { height: '36px', width: '66px' }),
-                React.createElement(NoteContainer, null, (_g = props.footer) === null || _g === void 0 ? void 0 : _g.note))));
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentTextStyle, ComponentXXSStyling } from '../styles';
+import { LaerdalLogo } from '../assets';
+import { Button } from '../Button';
+import { MenuItem } from '../MenuItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n\n  border-top: 1px solid ", ";\n"])), COLORS.neutral_200);
+var ItemsContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n"])));
+var ButtonsContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 16px;\n  gap: 10px;\n  width: 100%;\n\n  button {\n    flex: 1;\n  }\n\n  .small & {\n    gap: 0;\n    flex-direction: column-reverse;\n  }\n"])));
+var LogoContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  min-height: 80px;\n  padding: 8px 16px;\n  background-color: ", ";\n  width: 100%;\n"])), COLORS.neutral_20);
+var NoteContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500));
+export var SideMenuFooter = function SideMenuFooter(props) {
+  var _props$footer, _props$footer$items, _props$footer2, _props$footer2$button, _props$footer3, _props$footer3$button, _props$footer4;
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    children: [!!((_props$footer = props.footer) !== null && _props$footer !== void 0 && (_props$footer$items = _props$footer.items) !== null && _props$footer$items !== void 0 && _props$footer$items.length) && /*#__PURE__*/_jsx(ItemsContainer, {
+      children: props.footer.items.map(function (item, index) {
+        return /*#__PURE__*/_jsx(MenuItem, _objectSpread({
+          size: props.size
+        }, item), index);
+      })
+    }), !!((_props$footer2 = props.footer) !== null && _props$footer2 !== void 0 && (_props$footer2$button = _props$footer2.buttons) !== null && _props$footer2$button !== void 0 && _props$footer2$button.length) && /*#__PURE__*/_jsx(ButtonsContainer, {
+      children: props.footer.buttons.map(function (button, index) {
+        return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+          size: props.size
+        }, button), {}, {
+          children: button.label
+        }), index);
+      })
+    }), !((_props$footer3 = props.footer) !== null && _props$footer3 !== void 0 && (_props$footer3$button = _props$footer3.buttons) !== null && _props$footer3$button !== void 0 && _props$footer3$button.length) && /*#__PURE__*/_jsxs(LogoContainer, {
+      children: [/*#__PURE__*/_jsx(LaerdalLogo, {
+        height: '36px',
+        width: '66px'
+      }), /*#__PURE__*/_jsx(NoteContainer, {
+        children: (_props$footer4 = props.footer) === null || _props$footer4 === void 0 ? void 0 : _props$footer4.note
+      })]
+    })]
+  });
+};
+//# sourceMappingURL=SideMenuFooter.js.map

package/dist/SideMenu/SideMenuHeader.js

@@ -1,46 +1,42 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
-import styled from 'styled-components';
-import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles';
-import { IconButton } from '../Button';
-import { SystemIcons } from '../icons';
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n\n  .small & {\n    min-height: 48px;\n  }\n\n  .medium & {\n    min-height: 56px;\n  }\n\n  .large & {\n    min-height: 64px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n\n  .small & {\n    min-height: 48px;\n  }\n\n  .medium & {\n    min-height: 56px;\n  }\n\n  .large & {\n    min-height: 64px;\n  }\n"])));
-var LabelContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-left: 8px;\n\n  .small & {\n    ", "\n  }\n\n  .medium & {\n    ", "\n  }\n\n  .large & {\n    ", "\n  }\n"], ["\n  margin-left: 8px;\n\n  .small & {\n    ", "\n  }\n\n  .medium & {\n    ", "\n  }\n\n  .large & {\n    ", "\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600), ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
-export var SideMenuHeader = function (props) {
-    var _a, _b, _c;
-    return (React.createElement(Wrapper, null, (_b = (_a = props.header) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 :
-        _b.map(function (_a, index) {
-            var icon = _a.icon, rest = __rest(_a, ["icon"]);
-            return React.createElement(IconButton, __assign({ key: index, variant: 'secondary', shape: 'circular' }, rest), icon);
-        }),
-        ((_c = props.header) === null || _c === void 0 ? void 0 : _c.label) &&
-            React.createElement(LabelContainer, null, props.header.label),
-        React.createElement(IconButton, { action: props.onClose, variant: 'secondary', shape: 'circular', style: { marginLeft: 'auto' } },
-            React.createElement(SystemIcons.Close, null))));
-};
-var templateObject_1, templateObject_2;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _excluded = ["icon"];
+var _templateObject, _templateObject2;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles';
+import { IconButton } from '../Button';
+import { SystemIcons } from '../icons';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n\n  .small & {\n    min-height: 48px;\n  }\n\n  .medium & {\n    min-height: 56px;\n  }\n\n  .large & {\n    min-height: 64px;\n  }\n"])));
+var LabelContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n\n  .small & {\n    ", "\n  }\n\n  .medium & {\n    ", "\n  }\n\n  .large & {\n    ", "\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600), ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+export var SideMenuHeader = function SideMenuHeader(props) {
+  var _props$header, _props$header$actions, _props$header2;
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    children: [(_props$header = props.header) === null || _props$header === void 0 ? void 0 : (_props$header$actions = _props$header.actions) === null || _props$header$actions === void 0 ? void 0 : _props$header$actions.map(function (_ref, index) {
+      var icon = _ref.icon,
+        rest = _objectWithoutProperties(_ref, _excluded);
+      return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+        variant: 'secondary',
+        shape: 'circular'
+      }, rest), {}, {
+        children: icon
+      }), index);
+    }), ((_props$header2 = props.header) === null || _props$header2 === void 0 ? void 0 : _props$header2.label) && /*#__PURE__*/_jsx(LabelContainer, {
+      children: props.header.label
+    }), /*#__PURE__*/_jsx(IconButton, {
+      action: props.onClose,
+      variant: 'secondary',
+      shape: 'circular',
+      style: {
+        marginLeft: 'auto'
+      },
+      children: /*#__PURE__*/_jsx(SystemIcons.Close, {})
+    })]
+  });
+};
+//# sourceMappingURL=SideMenuHeader.js.map

package/dist/SideMenu/index.js

@@ -1,2 +1,3 @@
-export { default as SideMenu } from './SideMenu';
-export * from './types';
+export { default as SideMenu } from './SideMenu';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/SideMenu/types.d.ts

@@ -3,13 +3,13 @@ import { ButtonProps } from '../Button/Button';
 import { IconButtonProps } from '../Button/Iconbutton';
 import { MenuItemProps } from '../MenuItem/MenuItem';
 import { Size } from '../types';
-export declare type SideMenuAction = Omit<IconButtonProps, 'variant' | 'shape' | 'isInMobileMenu' | 'borderRadius' | 'flatEdge' | 'focusBackgroundColor' | 'useTransparentBackground' | 'unsetIconSize' | 'shouldNotInteract' | 'invertFocus' | 'hideOnLowWidth' | 'children'> & {
+export type SideMenuAction = Omit<IconButtonProps, 'variant' | 'shape' | 'isInMobileMenu' | 'borderRadius' | 'flatEdge' | 'focusBackgroundColor' | 'useTransparentBackground' | 'unsetIconSize' | 'shouldNotInteract' | 'invertFocus' | 'hideOnLowWidth' | 'children'> & {
     icon: React.ReactNode;
 };
-export declare type SideMenuButton = Omit<ButtonProps, 'size' | 'iconOnly' | 'minWidth' | 'testId' | 'width' | 'invertFocus' | 'colorTheme' | 'flatEdge' | 'children'> & {
+export type SideMenuButton = Omit<ButtonProps, 'size' | 'iconOnly' | 'minWidth' | 'testId' | 'width' | 'invertFocus' | 'colorTheme' | 'flatEdge' | 'children'> & {
     label: string;
 };
-export declare type SideMenuItem = Omit<MenuItemProps, 'size'>;
+export type SideMenuItem = Omit<MenuItemProps, 'size'>;
 export interface SideMenuHeader {
     actions?: SideMenuAction[];
     label?: string;

package/dist/SideMenu/types.js

@@ -1 +1,2 @@
-export {};
+export {};
+//# sourceMappingURL=types.js.map

package/dist/SkipToContent/SkipToContent.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type SkipToContentProps = {
+export type SkipToContentProps = {
     children: React.ReactNode;
 };
 declare const SkipToContent: React.FunctionComponent<SkipToContentProps>;

package/dist/SkipToContent/SkipToContent.js

@@ -1,17 +1,24 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS, ComponentTextStyle } from '../styles';
-import { ComponentSStyling } from '../styles';
-var SkipToContentLink = styled.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  text-decoration: underline;\n"], ["\n  ", "\n\n  text-decoration: underline;\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.black));
-var SkipToContentWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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    flex: 1 0 auto;\n    background: ", ";\n  }\n\n  @media print {\n    display: none;\n  }\n"], ["\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    flex: 1 0 auto;\n    background: ", ";\n  }\n\n  @media print {\n    display: none;\n  }\n"])), COLORS.accent2_200);
-var SkipToContent = function (_a) {
-    var children = _a.children;
-    return (React.createElement(SkipToContentWrapper, null,
-        React.createElement(SkipToContentLink, { href: "#main" }, children)));
-};
-export default SkipToContent;
-var templateObject_1, templateObject_2;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject, _templateObject2;
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentTextStyle } from '../styles';
+import { ComponentSStyling } from '../styles';
+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    flex: 1 0 auto;\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
+    })
+  });
+};
+SkipToContent.propTypes = {
+  children: _pt.node.isRequired
+};
+export default SkipToContent;
+//# sourceMappingURL=SkipToContent.js.map

package/dist/SkipToContent/index.js

@@ -1 +1,2 @@
-export { default as SkipToContent } from './SkipToContent';
+export { default as SkipToContent } from './SkipToContent';
+//# sourceMappingURL=index.js.map

package/dist/Switcher/MobileCustomMenuContent.js

@@ -1,26 +1,37 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import React from 'react';
-import { useScrollableContainer } from '../common/ScrollableContainer';
-import { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';
-import { MobileActionContainer } from '../GlobalNavigationBar/mobile/MobileActionContainer';
-export var MobileCustomMenuContent = function (_a) {
-    var children = _a.children, header = _a.header, action = _a.action;
-    var _b = useScrollableContainer([children]), scrollContainerRef = _b[0], scrollable = _b[1];
-    return (React.createElement(MobileMenuWrapper, null,
-        React.createElement(ScrollableContainer, { ref: scrollContainerRef, className: scrollable ? 'scrollable' : '' },
-            !!header && (React.createElement(MobileHeaderContainer, null,
-                React.createElement(MobileHeaderText, null, header.header),
-                header.note && React.createElement(MobileHeaderNote, null, header.note))),
-            children),
-        action && React.createElement(MobileActionContainer, __assign({}, action))));
-};
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _pt from "prop-types";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { useScrollableContainer } from '../common/ScrollableContainer';
+import { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';
+import { MobileActionContainer } from '../GlobalNavigationBar/mobile/MobileActionContainer';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var MobileCustomMenuContent = function MobileCustomMenuContent(_ref) {
+  var children = _ref.children,
+    header = _ref.header,
+    action = _ref.action;
+  var _useScrollableContain = useScrollableContainer([children]),
+    _useScrollableContain2 = _slicedToArray(_useScrollableContain, 2),
+    scrollContainerRef = _useScrollableContain2[0],
+    scrollable = _useScrollableContain2[1];
+  return /*#__PURE__*/_jsxs(MobileMenuWrapper, {
+    children: [/*#__PURE__*/_jsxs(ScrollableContainer, {
+      ref: scrollContainerRef,
+      className: scrollable ? 'scrollable' : '',
+      children: [!!header && /*#__PURE__*/_jsxs(MobileHeaderContainer, {
+        children: [/*#__PURE__*/_jsx(MobileHeaderText, {
+          children: header.header
+        }), header.note && /*#__PURE__*/_jsx(MobileHeaderNote, {
+          children: header.note
+        })]
+      }), children]
+    }), action && /*#__PURE__*/_jsx(MobileActionContainer, _objectSpread({}, action))]
+  });
+};
+MobileCustomMenuContent.propTypes = {
+  children: _pt.node
+};
+//# sourceMappingURL=MobileCustomMenuContent.js.map

package/dist/Switcher/MobileSwitcherMenu.js

@@ -1,21 +1,55 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { BREAKPOINTS } from '../styles';
-import { Z_INDEXES } from '../styles';
-import MobileMenuHeader from '../GlobalNavigationBar/mobile/MobileMenuHeader';
-import MobileMenuContent from '../GlobalNavigationBar/mobile/MobileMenuContent';
-import { MobileCustomMenuContent } from './MobileCustomMenuContent';
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 320px;\n  z-index: ", ";\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ", " {\n    width: 400px;\n  }\n"], ["\n  width: 320px;\n  z-index: ", ";\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ", " {\n    width: 400px;\n  }\n"])), Z_INDEXES.off_canvas, BREAKPOINTS.SMALL);
-var MobileSwitcherMenu = function (_a) {
-    var label = _a.label, header = _a.header, note = _a.note, onMenuClose = _a.onMenuClose, customContent = _a.customContent, items = _a.items, footerAction = _a.footerAction;
-    return (React.createElement(Wrapper, { role: "menu", "aria-labelledby": "UserMenuButton" },
-        React.createElement(MobileMenuHeader, { onGoBack: onMenuClose, label: label, onClose: onMenuClose }),
-        items && React.createElement(MobileMenuContent, { header: { header: header, note: note }, items: items, action: footerAction }),
-        customContent && (React.createElement(MobileCustomMenuContent, { header: { header: header, note: note }, action: footerAction }, customContent))));
-};
-export default MobileSwitcherMenu;
-var templateObject_1;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject;
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS } from '../styles';
+import { Z_INDEXES } from '../styles';
+import MobileMenuHeader from '../GlobalNavigationBar/mobile/MobileMenuHeader';
+import MobileMenuContent from '../GlobalNavigationBar/mobile/MobileMenuContent';
+import { MobileCustomMenuContent } from './MobileCustomMenuContent';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 320px;\n  z-index: ", ";\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ", " {\n    width: 400px;\n  }\n"])), Z_INDEXES.off_canvas, BREAKPOINTS.SMALL);
+var MobileSwitcherMenu = function MobileSwitcherMenu(_ref) {
+  var label = _ref.label,
+    header = _ref.header,
+    note = _ref.note,
+    onMenuClose = _ref.onMenuClose,
+    customContent = _ref.customContent,
+    items = _ref.items,
+    footerAction = _ref.footerAction;
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    role: "menu",
+    "aria-labelledby": "UserMenuButton",
+    children: [/*#__PURE__*/_jsx(MobileMenuHeader, {
+      onGoBack: onMenuClose,
+      label: label,
+      onClose: onMenuClose
+    }), items && /*#__PURE__*/_jsx(MobileMenuContent, {
+      header: {
+        header: header,
+        note: note
+      },
+      items: items,
+      action: footerAction
+    }), customContent && /*#__PURE__*/_jsx(MobileCustomMenuContent, {
+      header: {
+        header: header,
+        note: note
+      },
+      action: footerAction,
+      children: customContent
+    })]
+  });
+};
+MobileSwitcherMenu.propTypes = {
+  label: _pt.string.isRequired,
+  header: _pt.string.isRequired,
+  note: _pt.string,
+  onMenuClose: _pt.func.isRequired,
+  items: _pt.array,
+  customContent: _pt.node
+};
+export default MobileSwitcherMenu;
+//# sourceMappingURL=MobileSwitcherMenu.js.map

package/dist/Switcher/SwitcherMenuItem.js

@@ -1,18 +1,44 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import styled from 'styled-components';
-import { Z_INDEXES, ComponentMStyling, COLORS, ComponentTextStyle, focusStyles } from '../styles';
-import { defaultOnMouseDownHandler } from '../common';
-var StyledSwitcherItem = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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\n    &:after {\n      background-color: ", ";\n    }\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    ", ";\n    \n    outline-offset: -2px;\n  }\n"], ["\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\n    &:after {\n      background-color: ", ";\n    }\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    ", ";\n    \n    outline-offset: -2px;\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, focusStyles);
-var A = styled.a(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
-var SwitcherMenuItem = function (_a) {
-    var label = _a.label, url = _a.url, disabled = _a.disabled, icon = _a.icon, _b = _a.as, as = _b === void 0 ? A : _b, testId = _a.testId;
-    return (React.createElement(StyledSwitcherItem, { onClick: function () { return (window.location.href = url || ''); }, as: as, onMouseDown: defaultOnMouseDownHandler, href: url || '', target: "_parent", key: label, className: disabled ? 'disabled' : '', "data-testid": testId },
-        !!icon && React.cloneElement(icon, { size: '24px', color: '#666666' }),
-        label));
-};
-export default SwitcherMenuItem;
-var templateObject_1, templateObject_2;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject, _templateObject2;
+import React from 'react';
+import styled from 'styled-components';
+import { Z_INDEXES, ComponentMStyling, COLORS, ComponentTextStyle, focusStyles } from '../styles';
+import { defaultOnMouseDownHandler } from '../common';
+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\n    &:after {\n      background-color: ", ";\n    }\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    ", ";\n    \n    outline-offset: -2px;\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, focusStyles);
+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,
+    onMouseDown: defaultOnMouseDownHandler,
+    href: url || '',
+    target: "_parent",
+    className: disabled ? 'disabled' : '',
+    "data-testid": testId,
+    children: [!!icon && /*#__PURE__*/React.cloneElement(icon, {
+      size: '24px',
+      color: '#666666'
+    }), label]
+  }, label);
+};
+SwitcherMenuItem.propTypes = {
+  label: _pt.string.isRequired,
+  url: _pt.string.isRequired,
+  disabled: _pt.bool,
+  icon: _pt.any,
+  as: _pt.any,
+  testId: _pt.string
+};
+export default SwitcherMenuItem;
+//# sourceMappingURL=SwitcherMenuItem.js.map

package/dist/Switcher/index.js

@@ -1,3 +1,4 @@
-import SwitcherMenuItem from './SwitcherMenuItem';
-import MobileSwitcherMenu from './MobileSwitcherMenu';
-export { SwitcherMenuItem, MobileSwitcherMenu };
+import SwitcherMenuItem from './SwitcherMenuItem';
+import MobileSwitcherMenu from './MobileSwitcherMenu';
+export { SwitcherMenuItem, MobileSwitcherMenu };
+//# sourceMappingURL=index.js.map