@laerdal/life-react-components 1.11.0-dev.9 → 2.0.0

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js

@@ -1,37 +1,37 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React from 'react';
 import styled from 'styled-components';
-import { BREAKPOINTS, COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, ParagraphSStyling, ParagraphTextStyle, ParagraphXSStyling, scrollBarStyling } from '../../styles';
+import { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, ParagraphSStyling, ParagraphTextStyle, ParagraphXSStyling } from '../../styles';
 import { Size } from '../../types';
 import { HyperLink } from '../../HyperLink';
-import { useMediaQuery } from 'react-responsive';
-import { Button } from '../../Button';
 import { useNavigationHelper } from '../../common/NavigationHelper';
 import { MenuItem } from '../../MenuItem';
 import { SystemIcons } from '../../icons';
-import { useDimensionsRef } from 'rooks';
+import { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';
+import { useScrollableContainer } from '../../common/ScrollableContainer';
+import { MobileActionContainer } from './MobileActionContainer';
+import { useMediaMatch } from "rooks";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var HeaderText = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
-var HeaderNote = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  word-break: break-all;\n  ", "\n"])), ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600));
-var HeaderContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n"])), COLORS.neutral_200);
-var ScrollableContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ", "\n\n  ::-webkit-scrollbar-track {\n    margin: 8px;\n  }\n\n"])), scrollBarStyling(Size.Small));
-var MenuItemsContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n"])));
-var MenuSectionContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"])), COLORS.neutral_200);
-var MenuSectionHeader = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ", ";\n\n  ", "\n"])), COLORS.neutral_20, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500));
-var MenuSectionList = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
-var PinnedContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n"])), COLORS.neutral_200);
-var FooterText = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
-var FooterNote = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600), BREAKPOINTS.SMALL, ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600));
-var FooterLink = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  a {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, null));
-var FooterContainer = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n\n  ", " {\n    padding: 16px;\n  }\n"])), COLORS.neutral_200, COLORS.neutral_20, BREAKPOINTS.SMALL);
-var ActionContainer = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n\n  ", " {\n    padding: 16px;\n  }\n"])), COLORS.neutral_200, BREAKPOINTS.SMALL);
-var Wrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
+var MenuItemsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n"])));
+var MenuSectionContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"])), COLORS.neutral_200);
+var MenuSectionHeader = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ", ";\n\n  ", "\n"])), COLORS.neutral_20, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500));
+var MenuSectionList = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+var PinnedContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n"])), COLORS.neutral_200);
+var FooterText = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+var FooterNote = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600), BREAKPOINTS.SMALL, ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600));
+var FooterLink = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  a {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, null));
+var FooterContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n\n  ", " {\n    padding: 16px;\n  }\n"])), COLORS.neutral_200, COLORS.neutral_20, BREAKPOINTS.SMALL);
 
 var MobileMenuContent = function MobileMenuContent(_ref) {
   var header = _ref.header,
@@ -39,34 +39,16 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
       footer = _ref.footer,
       action = _ref.action,
       onSubMenuOpen = _ref.onSubMenuOpen;
-  var isSmallScreen = useMediaQuery({
-    query: BREAKPOINTS.SMALL.replace('@media ', '')
-  });
+  var isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));
 
   var _useNavigationHelper = useNavigationHelper(),
       navigate = _useNavigationHelper.navigate,
       isActiveRoute = _useNavigationHelper.isActiveRoute;
 
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      scrollable = _React$useState2[0],
-      setScrollable = _React$useState2[1];
-
-  var _useDimensionsRef = useDimensionsRef({
-    updateOnResize: true
-  }),
-      _useDimensionsRef2 = _slicedToArray(_useDimensionsRef, 3),
-      scrollContainerRef = _useDimensionsRef2[0],
-      dimensions = _useDimensionsRef2[1],
-      node = _useDimensionsRef2[2];
-
-  React.useEffect(function () {
-    var _node$clientHeight, _node$scrollHeight;
-
-    var clientHeight = (_node$clientHeight = node === null || node === void 0 ? void 0 : node.clientHeight) !== null && _node$clientHeight !== void 0 ? _node$clientHeight : 0;
-    var scrollHeight = (_node$scrollHeight = node === null || node === void 0 ? void 0 : node.scrollHeight) !== null && _node$scrollHeight !== void 0 ? _node$scrollHeight : 0;
-    setScrollable(scrollHeight > clientHeight);
-  }, [header, dimensions, node, footer, action, items]);
+  var _useScrollableContain = useScrollableContainer([header, footer, action, items]),
+      _useScrollableContain2 = _slicedToArray(_useScrollableContain, 2),
+      scrollContainerRef = _useScrollableContain2[0],
+      scrollable = _useScrollableContain2[1];
 
   var renderItem = function renderItem(item, index) {
     switch (item.type) {
@@ -121,14 +103,14 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
     }
   };
 
-  return /*#__PURE__*/_jsxs(Wrapper, {
+  return /*#__PURE__*/_jsxs(MobileMenuWrapper, {
     children: [/*#__PURE__*/_jsxs(ScrollableContainer, {
       ref: scrollContainerRef,
       className: scrollable ? 'scrollable' : '',
-      children: [!!header && /*#__PURE__*/_jsxs(HeaderContainer, {
-        children: [/*#__PURE__*/_jsx(HeaderText, {
+      children: [!!header && /*#__PURE__*/_jsxs(MobileHeaderContainer, {
+        children: [/*#__PURE__*/_jsx(MobileHeaderText, {
           children: header.header
-        }), header.note && /*#__PURE__*/_jsx(HeaderNote, {
+        }), header.note && /*#__PURE__*/_jsx(MobileHeaderNote, {
           children: header.note
         })]
       }), /*#__PURE__*/_jsx(MenuItemsContainer, {
@@ -163,16 +145,7 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
           children: footer.link.label
         })
       })]
-    }), action && /*#__PURE__*/_jsx(ActionContainer, {
-      children: /*#__PURE__*/_jsx(Button, {
-        variant: 'secondary',
-        size: isSmallScreen ? Size.Medium : Size.Small,
-        disabled: action.disabled,
-        icon: action.icon,
-        onClick: action.action,
-        children: action.label
-      })
-    })]
+    }), action && /*#__PURE__*/_jsx(MobileActionContainer, _objectSpread({}, action))]
   });
 };
 

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobileMenuContent.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ParagraphSStyling","ParagraphTextStyle","ParagraphXSStyling","scrollBarStyling","Size","HyperLink","useMediaQuery","Button","useNavigationHelper","MenuItem","SystemIcons","useDimensionsRef","HeaderText","div","Bold","neutral_600","SMALL","HeaderNote","Regular","HeaderContainer","neutral_200","ScrollableContainer","Small","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","ActionContainer","Wrapper","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","useState","scrollable","setScrollable","updateOnResize","scrollContainerRef","dimensions","node","useEffect","clientHeight","scrollHeight","renderItem","item","index","type","label","map","Medium","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  MenuButton,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuNavigationItemTypeGroup,\n  MenuNavigationItemTypeItem,\n  MenuNavigationItemTypeSection\n} from '../types';\nimport styled from 'styled-components';\nimport {\n  BREAKPOINTS,\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n  ParagraphXSStyling,\n  scrollBarStyling\n} from '../../styles';\nimport {Size} from '../../types';\nimport {HyperLink} from '../../HyperLink';\nimport {useMediaQuery} from 'react-responsive';\nimport {Button} from '../../Button';\nimport {useNavigationHelper} from '../../common/NavigationHelper';\nimport {MenuItem} from '../../MenuItem';\nimport {SystemIcons} from '../../icons';\nimport {useDimensionsRef} from 'rooks';\n\n\nconst HeaderText = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst HeaderNote = styled.div`\n  word-break: break-all;\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderContainer = styled.div`\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst ScrollableContainer = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n\n  ::-webkit-scrollbar-track {\n    margin: 8px;\n  }\n\n`;\n\nconst MenuItemsContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\nconst MenuSectionHeader = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ${COLORS.neutral_20};\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst PinnedContainer = styled.div`\n  border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst FooterNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\nconst FooterLink = styled.div`\n  a {\n    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n    ${BREAKPOINTS.SMALL} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n`;\n\nconst FooterContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n  background: ${COLORS.neutral_20};\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst ActionContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ninterface MobileMenuContentProps {\n  header?: MenuGroupHeader;\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n\n  onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({\n                                                                              header,\n                                                                              items,\n                                                                              footer,\n                                                                              action,\n                                                                              onSubMenuOpen\n                                                                            }) => {\n\n  const isSmallScreen = useMediaQuery({query: BREAKPOINTS.SMALL.replace('@media ', '')});\n\n  const {navigate, isActiveRoute} = useNavigationHelper();\n\n  const [scrollable, setScrollable] = React.useState(false);\n\n  const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n\n  React.useEffect(() => {\n    const clientHeight = node?.clientHeight ?? 0;\n    const scrollHeight = node?.scrollHeight ?? 0;\n    setScrollable(scrollHeight > clientHeight);\n  }, [header, dimensions, node, footer, action, items]);\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n    switch (item.type) {\n      case 'section':\n        return (\n          <MenuSectionContainer key={index}>\n            {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n            <MenuSectionList>\n              {item.items.map((item, index) => renderItem(item, index))}\n            </MenuSectionList>\n          </MenuSectionContainer>\n        );\n      case 'group':\n        return <MenuItem key={index}\n                         id={'menu-item-' + index}\n                         size={isSmallScreen ? Size.Medium : Size.Small}\n                         active={false}\n                         item={{\n                           value: item.label,\n                           disabled: item.disabled,\n                           icon: item.icon,\n                           displayLabel: item.label,\n                           noteLabel: item.note,\n                         }}\n                         iconRight={<SystemIcons.ArrowDropRight/>}\n                         onClickHandler={(e) => {\n                           e.nativeEvent.stopImmediatePropagation();\n                           onSubMenuOpen && onSubMenuOpen(item);\n                         }}/>\n      case 'item':\n      default:\n        return (\n          <MenuItem key={index}\n                    id={'menu-item-' + index}\n                    active={!item.external && isActiveRoute(item.to, !!item.exact)}\n                    size={isSmallScreen ? Size.Medium : Size.Small}\n                    item={{\n                      value: item.to,\n                      disabled: item.disabled,\n                      icon: item.icon,\n                      displayLabel: item.label,\n                      noteLabel: item.note,\n                    }}\n                    onClickHandler={(e) => {\n                      item.action && item.action(e);\n                      navigate(item.to, !!item.external);\n                    }}/>\n        );\n    }\n  }\n\n  return (\n    <Wrapper>\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n        {\n          !!header &&\n          <HeaderContainer>\n            <HeaderText>{header.header}</HeaderText>\n            {header.note && <HeaderNote>{header.note}</HeaderNote>}\n          </HeaderContainer>\n        }\n        <MenuItemsContainer>\n          {items?.filter(a => !a.pinned).map((item, index) => renderItem(item, index))}\n        </MenuItemsContainer>\n      </ScrollableContainer>\n      {\n        items?.some(a => a.pinned) &&\n        <PinnedContainer>\n          <MenuItemsContainer>\n            {items?.filter(a => !!a.pinned).map((item, index) => renderItem(item, index))}\n          </MenuItemsContainer>\n        </PinnedContainer>\n\n      }\n      {\n        footer &&\n        <FooterContainer>\n          <FooterText>{footer.header}</FooterText>\n          {footer.note && <FooterNote>{footer.note}</FooterNote>}\n          {footer.link &&\n            <FooterLink>\n              <HyperLink variant={'default'}\n                         id={footer.link.id}\n                         target={footer.link.target}\n                         onClick={footer.link.onClick}\n                         href={footer.link.href}>\n                {footer.link.label}\n              </HyperLink>\n            </FooterLink>\n          }\n        </FooterContainer>\n      }\n      {\n        action &&\n        <ActionContainer>\n          <Button variant={'secondary'}\n                  size={isSmallScreen ? Size.Medium : Size.Small}\n                  disabled={action.disabled}\n                  icon={action.icon}\n                  onClick={action.action}>\n            {action.label}\n          </Button>\n        </ActionContainer>\n      }\n    </Wrapper>\n  )\n};\n\nexport default MobileMenuContent;\n"],"mappings":"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"}
+{"version":3,"file":"MobileMenuContent.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ParagraphSStyling","ParagraphTextStyle","ParagraphXSStyling","Size","HyperLink","useNavigationHelper","MenuItem","SystemIcons","MobileHeaderContainer","MobileHeaderNote","MobileHeaderText","MobileMenuWrapper","ScrollableContainer","useScrollableContainer","MobileActionContainer","useMediaMatch","MenuItemsContainer","div","MenuSectionContainer","neutral_200","MenuSectionHeader","neutral_20","Bold","neutral_500","MenuSectionList","PinnedContainer","FooterText","neutral_600","SMALL","FooterNote","Regular","FooterLink","FooterContainer","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","replace","navigate","isActiveRoute","scrollContainerRef","scrollable","renderItem","item","index","type","label","map","Medium","Small","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"sourcesContent":["import React from 'react';\nimport { MenuButton, MenuGroupFooter, MenuGroupHeader, MenuNavigationItemTypeGroup, MenuNavigationItemTypeItem, MenuNavigationItemTypeSection } from '../types';\nimport styled from 'styled-components';\nimport {\n  BREAKPOINTS,\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n  ParagraphXSStyling,\n  scrollBarStyling,\n} from '../../styles';\nimport { Size } from '../../types';\nimport { HyperLink } from '../../HyperLink';\nimport { useNavigationHelper } from '../../common/NavigationHelper';\nimport { MenuItem } from '../../MenuItem';\nimport { SystemIcons } from '../../icons';\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';\nimport { useScrollableContainer } from '../../common/ScrollableContainer';\nimport { MobileActionContainer } from './MobileActionContainer';\nimport {useMediaMatch} from \"rooks\";\n\nconst MenuItemsContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\nconst MenuSectionHeader = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ${COLORS.neutral_20};\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst PinnedContainer = styled.div`\n  border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst FooterNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\nconst FooterLink = styled.div`\n  a {\n    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n    ${BREAKPOINTS.SMALL} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n`;\n\nconst FooterContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n  background: ${COLORS.neutral_20};\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\ninterface MobileMenuContentProps {\n  header?: MenuGroupHeader;\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n\n  onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({ header, items, footer, action, onSubMenuOpen }) => {\n  const isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));\n\n  const { navigate, isActiveRoute } = useNavigationHelper();\n\n  const [scrollContainerRef, scrollable] = useScrollableContainer([header, footer, action, items]);\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n    switch (item.type) {\n      case 'section':\n        return (\n          <MenuSectionContainer key={index}>\n            {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n            <MenuSectionList>{item.items.map((item, index) => renderItem(item, index))}</MenuSectionList>\n          </MenuSectionContainer>\n        );\n      case 'group':\n        return (\n          <MenuItem\n            key={index}\n            id={'menu-item-' + index}\n            size={isSmallScreen ? Size.Medium : Size.Small}\n            active={false}\n            item={{\n              value: item.label,\n              disabled: item.disabled,\n              icon: item.icon,\n              displayLabel: item.label,\n              noteLabel: item.note,\n            }}\n            iconRight={<SystemIcons.ArrowDropRight />}\n            onClickHandler={(e) => {\n              e.nativeEvent.stopImmediatePropagation();\n              onSubMenuOpen && onSubMenuOpen(item);\n            }}\n          />\n        );\n      case 'item':\n      default:\n        return (\n          <MenuItem\n            key={index}\n            id={'menu-item-' + index}\n            active={!item.external && isActiveRoute(item.to, !!item.exact)}\n            size={isSmallScreen ? Size.Medium : Size.Small}\n            item={{\n              value: item.to,\n              disabled: item.disabled,\n              icon: item.icon,\n              displayLabel: item.label,\n              noteLabel: item.note,\n            }}\n            onClickHandler={(e) => {\n              item.action && item.action(e);\n              navigate(item.to, !!item.external);\n            }}\n          />\n        );\n    }\n  };\n\n  return (\n    <MobileMenuWrapper>\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n        {!!header && (\n          <MobileHeaderContainer>\n            <MobileHeaderText>{header.header}</MobileHeaderText>\n            {header.note && <MobileHeaderNote>{header.note}</MobileHeaderNote>}\n          </MobileHeaderContainer>\n        )}\n        <MenuItemsContainer>{items?.filter((a) => !a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n      </ScrollableContainer>\n      {items?.some((a) => a.pinned) && (\n        <PinnedContainer>\n          <MenuItemsContainer>{items?.filter((a) => !!a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n        </PinnedContainer>\n      )}\n      {footer && (\n        <FooterContainer>\n          <FooterText>{footer.header}</FooterText>\n          {footer.note && <FooterNote>{footer.note}</FooterNote>}\n          {footer.link && (\n            <FooterLink>\n              <HyperLink variant={'default'} id={footer.link.id} target={footer.link.target} onClick={footer.link.onClick} href={footer.link.href}>\n                {footer.link.label}\n              </HyperLink>\n            </FooterLink>\n          )}\n        </FooterContainer>\n      )}\n      {action && <MobileActionContainer {...action} />}\n    </MobileMenuWrapper>\n  );\n};\n\nexport default MobileMenuContent;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","names":[],"sources":["../../src/GlobalNavigationBar/types.tsx"],"sourcesContent":["import React from 'react';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ProfileButtonProps} from '../ProfileButton/ProfileButton';\nimport {NavLinkProps} from 'react-router-dom';\n\n\nexport interface MenuHyperLinkProps extends Pick<HyperlinkProps, 'id' | 'href' | 'onClick' | 'target'> {\n  label: string;\n  icon?: React.ReactElement;\n}\n\nexport interface MenuButton {\n  label: string;\n  icon?: React.ReactNode;\n  action: () => void;\n  disabled?: boolean;\n}\n\nexport interface MenuGroupFooter {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuGroupHeader {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuAccountInfo {\n  firstName: string;\n  lastName: string;\n  email: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface ProfileMenu {\n  label?: string;\n\n  user: MenuAccountInfo;\n\n  sections: MenuNavigationSection[];\n\n  signOut?: MenuButton;\n}\n\nexport interface MenuIconSubMenuButton extends Omit<IconButtonProps, 'type' | 'action' | 'shape' | 'variant' | 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'iconColor' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'invertFocus'> {\n  type: 'submenu';\n  icon: React.ReactNode;\n  menu: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu;\n  placement?: 'left' | 'right';\n}\n\n\nexport interface MenuIconButton extends Omit<IconButtonProps, 'type' | 'action' | 'shape' | 'variant' | 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'iconColor' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'invertFocus'> {\n  type: 'action'\n  icon: React.ReactNode;\n  action: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\n\nexport interface MenuProfileButton extends Omit<ProfileButtonProps, 'type' | 'onClick' | 'initials' | 'hideOnLowWidth' | 'icon' | 'portraitSrc'> {\n  type: 'profile'\n  action?: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\n\nexport interface MenuSwitcherButton extends Omit<IconButtonProps, 'id' | 'type' | 'action' | 'shape' | 'variant' | 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'iconColor' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'invertFocus'> {\n  type: 'switcher'\n  placement?: 'left' | 'right';\n  action?: (button?: EventTarget) => boolean | void;\n}\n\nexport type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;\nexport type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton;\n\n\nexport interface MobileNavigationMenuProps {\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n\n  header?: MenuGroupHeader;\n\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup)[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport interface DesktopNavigationMenuProps {\n  buttons?: DesktopMenuButtonTypes[];\n  items: MenuNavigationItemTypeItem[];\n  action?: MenuButton;\n  reverseRightSideOrder?: boolean;\n}\n\n// @ts-ignore\nexport interface MenuNavigationGroup<T = (MenuNavigationItem | MenuNavigationSection | MenuNavigationGroup)> {\n  label: string;\n  note?: string;\n\n  buttons?: MobileMenuButtonTypes[];\n  header?: MenuGroupHeader;\n\n  items: T[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport type MenuNavigationItem = {\n  icon?: React.ReactNode;\n  to: string;\n  exact?: boolean;\n  disabled?: boolean;\n  external?: boolean;\n  action?: (e: React.MouseEvent) => void;\n  label: string;\n  note?: string;\n  pinned?: boolean;\n} & Omit<NavLinkProps, 'onClick' | 'to' | 'exact' | 'onMouseDown'>\n\nexport interface MenuNavigationSection<T = MenuNavigationItem> {\n  divider?: boolean;\n  pinned?: boolean;\n  label?: string;\n  items: T[];\n}\n\nexport type MenuNavigationItemTypeItem = MenuNavigationItem & {\n  type?: 'item';\n}\n\nexport type MenuNavigationItemTypeGroup =\n  MenuNavigationGroup<MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection>\n  & {\n  type: 'group';\n  icon?: React.ReactNode;\n  pinned?: boolean;\n  disabled?: boolean;\n};\n\nexport type MenuNavigationItemTypeSection = MenuNavigationSection<MenuNavigationItemTypeItem> & {\n  type: 'section';\n}\n\n\nexport type MenuNavigationCustomSubMenu = {\n  type: 'custom';\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n  custom: () => React.ReactNode;\n}\n"],"mappings":""}
+{"version":3,"file":"types.cjs","names":[],"sources":["../../src/GlobalNavigationBar/types.tsx"],"sourcesContent":["import React from 'react';\nimport { HyperlinkProps } from '../HyperLink/HyperLink';\nimport { IconButtonProps } from '../Button/Iconbutton';\nimport { ProfileButtonProps } from '../ProfileButton/ProfileButton';\nimport { NavLinkProps } from 'react-router-dom';\n\nexport interface MenuHyperLinkProps extends Pick<HyperlinkProps, 'id' | 'href' | 'onClick' | 'target'> {\n  label: string;\n  icon?: React.ReactElement;\n}\n\nexport interface MenuButton {\n  label: string;\n  icon?: React.ReactNode;\n  action: () => void;\n  disabled?: boolean;\n  isLoading?: boolean;\n  variant?: 'primary' | 'secondary';\n}\n\nexport interface MenuGroupFooter {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuGroupHeader {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuAccountInfo {\n  firstName: string;\n  lastName: string;\n  email: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface ProfileMenu {\n  label?: string;\n\n  user: MenuAccountInfo;\n\n  sections: MenuNavigationSection[];\n\n  signOut?: MenuButton;\n}\n\nexport interface MenuIconSubMenuButton\n  extends Omit<\n    IconButtonProps,\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'submenu';\n  icon: React.ReactNode;\n  menu: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuIconButton\n  extends Omit<\n    IconButtonProps,\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'action';\n  icon: React.ReactNode;\n  action: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuProfileButton extends Omit<ProfileButtonProps, 'type' | 'onClick' | 'initials' | 'hideOnLowWidth' | 'icon' | 'portraitSrc'> {\n  type: 'profile';\n  action?: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuSwitcherButton\n  extends Omit<\n    IconButtonProps,\n    | 'id'\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'switcher';\n  placement?: 'left' | 'right';\n  action?: (button?: EventTarget) => boolean | void;\n}\n\nexport type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;\nexport type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton;\n\nexport interface MobileNavigationMenuProps {\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n\n  header?: MenuGroupHeader;\n\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup)[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport interface DesktopNavigationMenuProps {\n  buttons?: DesktopMenuButtonTypes[];\n  items: MenuNavigationItemTypeItem[];\n  action?: MenuButton;\n  reverseRightSideOrder?: boolean;\n}\n\n// @ts-ignore\nexport interface MenuNavigationGroup<T = MenuNavigationItem | MenuNavigationSection | MenuNavigationGroup> {\n  label: string;\n  note?: string;\n\n  buttons?: MobileMenuButtonTypes[];\n  header?: MenuGroupHeader;\n\n  items: T[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport type MenuNavigationItem = {\n  icon?: React.ReactNode;\n  to: string;\n  exact?: boolean;\n  disabled?: boolean;\n  external?: boolean;\n  action?: (e: React.MouseEvent) => void;\n  label: string;\n  note?: string;\n  pinned?: boolean;\n} & Omit<NavLinkProps, 'onClick' | 'to' | 'exact' | 'onMouseDown'>;\n\nexport interface MenuNavigationSection<T = MenuNavigationItem> {\n  divider?: boolean;\n  pinned?: boolean;\n  label?: string;\n  items: T[];\n}\n\nexport type MenuNavigationItemTypeItem = MenuNavigationItem & {\n  type?: 'item';\n};\n\nexport type MenuNavigationItemTypeGroup = MenuNavigationGroup<MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection> & {\n  type: 'group';\n  icon?: React.ReactNode;\n  pinned?: boolean;\n  disabled?: boolean;\n};\n\nexport type MenuNavigationItemTypeSection = MenuNavigationSection<MenuNavigationItemTypeItem> & {\n  type: 'section';\n};\n\nexport type MenuNavigationCustomSubMenu = {\n  type: 'custom';\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n  custom: () => React.ReactNode;\n};\n"],"mappings":""}

package/dist/GlobalNavigationBar/types.d.ts

@@ -12,6 +12,8 @@ export interface MenuButton {
     icon?: React.ReactNode;
     action: () => void;
     disabled?: boolean;
+    isLoading?: boolean;
+    variant?: 'primary' | 'secondary';
 }
 export interface MenuGroupFooter {
     header: string;
@@ -73,7 +75,7 @@ export interface DesktopNavigationMenuProps {
     action?: MenuButton;
     reverseRightSideOrder?: boolean;
 }
-export interface MenuNavigationGroup<T = (MenuNavigationItem | MenuNavigationSection | MenuNavigationGroup)> {
+export interface MenuNavigationGroup<T = MenuNavigationItem | MenuNavigationSection | MenuNavigationGroup> {
     label: string;
     note?: string;
     buttons?: MobileMenuButtonTypes[];

package/dist/GlobalNavigationBar/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../src/GlobalNavigationBar/types.tsx"],"sourcesContent":["import React from 'react';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ProfileButtonProps} from '../ProfileButton/ProfileButton';\nimport {NavLinkProps} from 'react-router-dom';\n\n\nexport interface MenuHyperLinkProps extends Pick<HyperlinkProps, 'id' | 'href' | 'onClick' | 'target'> {\n  label: string;\n  icon?: React.ReactElement;\n}\n\nexport interface MenuButton {\n  label: string;\n  icon?: React.ReactNode;\n  action: () => void;\n  disabled?: boolean;\n}\n\nexport interface MenuGroupFooter {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuGroupHeader {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuAccountInfo {\n  firstName: string;\n  lastName: string;\n  email: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface ProfileMenu {\n  label?: string;\n\n  user: MenuAccountInfo;\n\n  sections: MenuNavigationSection[];\n\n  signOut?: MenuButton;\n}\n\nexport interface MenuIconSubMenuButton extends Omit<IconButtonProps, 'type' | 'action' | 'shape' | 'variant' | 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'iconColor' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'invertFocus'> {\n  type: 'submenu';\n  icon: React.ReactNode;\n  menu: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu;\n  placement?: 'left' | 'right';\n}\n\n\nexport interface MenuIconButton extends Omit<IconButtonProps, 'type' | 'action' | 'shape' | 'variant' | 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'iconColor' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'invertFocus'> {\n  type: 'action'\n  icon: React.ReactNode;\n  action: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\n\nexport interface MenuProfileButton extends Omit<ProfileButtonProps, 'type' | 'onClick' | 'initials' | 'hideOnLowWidth' | 'icon' | 'portraitSrc'> {\n  type: 'profile'\n  action?: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\n\nexport interface MenuSwitcherButton extends Omit<IconButtonProps, 'id' | 'type' | 'action' | 'shape' | 'variant' | 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'iconColor' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'invertFocus'> {\n  type: 'switcher'\n  placement?: 'left' | 'right';\n  action?: (button?: EventTarget) => boolean | void;\n}\n\nexport type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;\nexport type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton;\n\n\nexport interface MobileNavigationMenuProps {\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n\n  header?: MenuGroupHeader;\n\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup)[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport interface DesktopNavigationMenuProps {\n  buttons?: DesktopMenuButtonTypes[];\n  items: MenuNavigationItemTypeItem[];\n  action?: MenuButton;\n  reverseRightSideOrder?: boolean;\n}\n\n// @ts-ignore\nexport interface MenuNavigationGroup<T = (MenuNavigationItem | MenuNavigationSection | MenuNavigationGroup)> {\n  label: string;\n  note?: string;\n\n  buttons?: MobileMenuButtonTypes[];\n  header?: MenuGroupHeader;\n\n  items: T[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport type MenuNavigationItem = {\n  icon?: React.ReactNode;\n  to: string;\n  exact?: boolean;\n  disabled?: boolean;\n  external?: boolean;\n  action?: (e: React.MouseEvent) => void;\n  label: string;\n  note?: string;\n  pinned?: boolean;\n} & Omit<NavLinkProps, 'onClick' | 'to' | 'exact' | 'onMouseDown'>\n\nexport interface MenuNavigationSection<T = MenuNavigationItem> {\n  divider?: boolean;\n  pinned?: boolean;\n  label?: string;\n  items: T[];\n}\n\nexport type MenuNavigationItemTypeItem = MenuNavigationItem & {\n  type?: 'item';\n}\n\nexport type MenuNavigationItemTypeGroup =\n  MenuNavigationGroup<MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection>\n  & {\n  type: 'group';\n  icon?: React.ReactNode;\n  pinned?: boolean;\n  disabled?: boolean;\n};\n\nexport type MenuNavigationItemTypeSection = MenuNavigationSection<MenuNavigationItemTypeItem> & {\n  type: 'section';\n}\n\n\nexport type MenuNavigationCustomSubMenu = {\n  type: 'custom';\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n  custom: () => React.ReactNode;\n}\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../src/GlobalNavigationBar/types.tsx"],"sourcesContent":["import React from 'react';\nimport { HyperlinkProps } from '../HyperLink/HyperLink';\nimport { IconButtonProps } from '../Button/Iconbutton';\nimport { ProfileButtonProps } from '../ProfileButton/ProfileButton';\nimport { NavLinkProps } from 'react-router-dom';\n\nexport interface MenuHyperLinkProps extends Pick<HyperlinkProps, 'id' | 'href' | 'onClick' | 'target'> {\n  label: string;\n  icon?: React.ReactElement;\n}\n\nexport interface MenuButton {\n  label: string;\n  icon?: React.ReactNode;\n  action: () => void;\n  disabled?: boolean;\n  isLoading?: boolean;\n  variant?: 'primary' | 'secondary';\n}\n\nexport interface MenuGroupFooter {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuGroupHeader {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuAccountInfo {\n  firstName: string;\n  lastName: string;\n  email: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface ProfileMenu {\n  label?: string;\n\n  user: MenuAccountInfo;\n\n  sections: MenuNavigationSection[];\n\n  signOut?: MenuButton;\n}\n\nexport interface MenuIconSubMenuButton\n  extends Omit<\n    IconButtonProps,\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'submenu';\n  icon: React.ReactNode;\n  menu: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuIconButton\n  extends Omit<\n    IconButtonProps,\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'action';\n  icon: React.ReactNode;\n  action: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuProfileButton extends Omit<ProfileButtonProps, 'type' | 'onClick' | 'initials' | 'hideOnLowWidth' | 'icon' | 'portraitSrc'> {\n  type: 'profile';\n  action?: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuSwitcherButton\n  extends Omit<\n    IconButtonProps,\n    | 'id'\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'switcher';\n  placement?: 'left' | 'right';\n  action?: (button?: EventTarget) => boolean | void;\n}\n\nexport type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;\nexport type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton;\n\nexport interface MobileNavigationMenuProps {\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n\n  header?: MenuGroupHeader;\n\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup)[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport interface DesktopNavigationMenuProps {\n  buttons?: DesktopMenuButtonTypes[];\n  items: MenuNavigationItemTypeItem[];\n  action?: MenuButton;\n  reverseRightSideOrder?: boolean;\n}\n\n// @ts-ignore\nexport interface MenuNavigationGroup<T = MenuNavigationItem | MenuNavigationSection | MenuNavigationGroup> {\n  label: string;\n  note?: string;\n\n  buttons?: MobileMenuButtonTypes[];\n  header?: MenuGroupHeader;\n\n  items: T[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport type MenuNavigationItem = {\n  icon?: React.ReactNode;\n  to: string;\n  exact?: boolean;\n  disabled?: boolean;\n  external?: boolean;\n  action?: (e: React.MouseEvent) => void;\n  label: string;\n  note?: string;\n  pinned?: boolean;\n} & Omit<NavLinkProps, 'onClick' | 'to' | 'exact' | 'onMouseDown'>;\n\nexport interface MenuNavigationSection<T = MenuNavigationItem> {\n  divider?: boolean;\n  pinned?: boolean;\n  label?: string;\n  items: T[];\n}\n\nexport type MenuNavigationItemTypeItem = MenuNavigationItem & {\n  type?: 'item';\n};\n\nexport type MenuNavigationItemTypeGroup = MenuNavigationGroup<MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection> & {\n  type: 'group';\n  icon?: React.ReactNode;\n  pinned?: boolean;\n  disabled?: boolean;\n};\n\nexport type MenuNavigationItemTypeSection = MenuNavigationSection<MenuNavigationItemTypeItem> & {\n  type: 'section';\n};\n\nexport type MenuNavigationCustomSubMenu = {\n  type: 'custom';\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n  custom: () => React.ReactNode;\n};\n"],"mappings":""}

package/dist/InputFields/Checkbox.cjs

@@ -91,6 +91,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref,
     disabled: disabled,
     className: cls,
+    "aria-checked": selected,
     selected: selected,
     tabIndex: disabled || readOnly ? -1 : tabIndexVal ? tabIndexVal : 0,
     invalid: invalid,

package/dist/InputFields/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","className","rest","onKeyPress","e","keyCode","handleClick","Size","Medium","cls","defaultOnMouseDownHandler"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            invalid,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readOnly,\n                                                            tabIndexVal,\n                                                            className,\n                                                            ...rest\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readOnly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readOnly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    selected={selected}\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    invalid={invalid}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}\n                    {...rest}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.cjs","names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","className","rest","onKeyPress","e","keyCode","handleClick","Size","Medium","cls","defaultOnMouseDownHandler"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            invalid,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readOnly,\n                                                            tabIndexVal,\n                                                            className,\n                                                            ...rest\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readOnly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readOnly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    aria-checked={selected}\n                    selected={selected}\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    invalid={invalid}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}\n                    {...rest}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/InputFields/Checkbox.js

@@ -63,6 +63,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref,
     disabled: disabled,
     className: cls,
+    "aria-checked": selected,
     selected: selected,
     tabIndex: disabled || readOnly ? -1 : tabIndexVal ? tabIndexVal : 0,
     invalid: invalid,

package/dist/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","StyledCheckBox","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","className","rest","onKeyPress","e","keyCode","handleClick","Medium","cls"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            invalid,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readOnly,\n                                                            tabIndexVal,\n                                                            className,\n                                                            ...rest\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readOnly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readOnly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    selected={selected}\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    invalid={invalid}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}\n                    {...rest}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","StyledCheckBox","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","className","rest","onKeyPress","e","keyCode","handleClick","Medium","cls"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            invalid,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readOnly,\n                                                            tabIndexVal,\n                                                            className,\n                                                            ...rest\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readOnly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readOnly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    aria-checked={selected}\n                    selected={selected}\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    invalid={invalid}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}\n                    {...rest}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/InputFields/DatepickerField.cjs

@@ -25,7 +25,9 @@ var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
 
 var _enGB = _interopRequireDefault(require("date-fns/locale/en-GB"));
 
-var _moment = _interopRequireDefault(require("moment"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+
+var _advancedFormat = _interopRequireDefault(require("dayjs/plugin/advancedFormat"));
 
 var _colors = _interopRequireDefault(require("../styles/colors"));
 
@@ -53,16 +55,22 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+_dayjs.default.extend(_advancedFormat.default);
+/**
+ * Import custom components.
+ */
+
+
 /**
  * Add custom styles.
  */
-var DatePickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .react-datepicker-popper {\n    z-index: ", ";\n  }\n\n  > div {\n    display: block;\n\n    ", "\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ", ";\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ", "\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ", ";\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ", ";\n      background: ", ";\n      height: ", ";\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ", "\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ", "\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ", "\n    }\n\n    .react-datepicker__year-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ", "\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ", "\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__day--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ", ";\n        background: ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:focus {\n          ", "\n        }\n      }\n    }\n  }\n"])), _styles.Z_INDEXES.dropdown, function (props) {
+var DatePickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .react-datepicker-popper {\n    z-index: ", ";\n  }\n\n  > div {\n    display: block;\n\n    ", "\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ", ";\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ", "\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ", ";\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ", ";\n      background: ", ";\n      height: ", ";\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ", "\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ", "\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ", "\n    }\n\n    .react-datepicker__year-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ", "\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ", "\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__day--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ", ";\n        background: ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:focus {\n          ", "\n        }\n      }\n    }\n  }\n"])), _styles.Z_INDEXES.dropdown, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, _colors.default.primary_20, _styles.focusStyles, _colors.default.neutral_20, _colors.default.neutral_200, _colors.default.neutral_20, function (props) {
   return !props.yearPicker ? '96px' : '54px';
 }, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors.default.neutral_600), (0, _styles.scrollBarStyling)(_types.Size.Small), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.neutral_600, _colors.default.white, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles, _colors.default.white, _colors.default.primary_500, _colors.default.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.neutral_600, _colors.default.white, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles, _colors.default.white, _colors.default.primary_500, _colors.default.neutral_700, _colors.default.neutral_100, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles);
 
-var IconWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ", ";\n  color: ", ";\n"])), _styles.Z_INDEXES.focus + 1, _colors.default.neutral_600);
+var IconWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ", ";\n  color: ", ";\n"])), +_styles.Z_INDEXES.focus + 1, _colors.default.neutral_600);
 
 var DatepickerRow = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
 
@@ -117,7 +125,7 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
 
 
   _react.default.useEffect(function () {
-    if (value) inputRef.current.value = (0, _moment.default)(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');
+    if (value) inputRef.current.value = (0, _dayjs.default)(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');
   }, [value]);
 
   _react.default.useEffect(function () {