@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1.full

package/dist/Modals/ModalStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalStyles.js","names":["styled","css","COLORS","scrollBarStyling","Size","ModalHeader","section","_templateObject","_taggedTemplateLiteral","props","$marginBottom","StyledModalHeader","_templateObject2","$height","concat","$size","ImageContainer","div","_templateObject3","ImageOverlay","_templateObject4","Column","_templateObject5","ModalTitleSection","_templateObject6","ModalHeaderActionsWithImage","_templateObject7","$hasBackButton","ModalHeaderActions","_templateObject8","FlexContainer","_templateObject9","ModalHoverModifier","_templateObject10","CloseButtonWrapper","_templateObject11","$hasImage","_templateObject12","_templateObject13","BackButtonWrapper","_templateObject14","ModalTitle","h5","_templateObject15","$fontSize","ModalNoteSection","_templateObject16","getBackgroundColor","$state","theme","getNoteMessageColor","ModalBody","_templateObject17","_props$$overflow","$overflow","$hasContentBorders","getColor","Small","ModalFooter","_templateObject18","Large","state"],"sources":["../../src/Modals/ModalStyles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport { COLORS } from '..';\r\nimport { scrollBarStyling } from '../styles';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Modal styles\r\n */\r\nexport const ModalHeader = styled.section<{ $marginBottom?: string }>`\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  margin-bottom: ${(props) => props.$marginBottom || '24px'};\r\n`;\r\n\r\nexport const StyledModalHeader = styled(ModalHeader)<{ $marginBottom?: string; $size?: string; $height?: number }>`\r\n  flex: 1 0 calc(50% - 5px);\r\n  flex-direction: column;\r\n  flex-basis: auto;\r\n  text-align: left;\r\n  height: ${(props) => (props.$height ? `${props.$height - (props.$size === 'small' ? 16 : props.$size === 'large' ? 32 : 24)}px` : '')};\r\n  img {\r\n    width: 100%;\r\n    height: ${(props) => `${props.$height}px`};\r\n    object-fit: cover;\r\n    border-radius: 8px 8px 0 0;\r\n  }\r\n`;\r\n\r\nexport const ImageContainer = styled.div<{ $height: number }>`\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  height: ${(props) => `${props.$height}px`};\r\n\r\n  #imgWithFallbackLoadingIndicator {\r\n    position: absolute;\r\n    left: 50%;\r\n    top: 0;\r\n  }\r\n`;\r\n\r\nexport const ImageOverlay = styled.div<{ $height: number }>`\r\n  position: absolute;\r\n  content: '';\r\n  top: 0;\r\n  left: 0;\r\n  height: ${(props) => `${props.$height}px`};\r\n  width: 100%;\r\n  background: rgba(255, 255, 255, 0.5);\r\n  border-radius: 8px 8px 0 0;\r\n\r\n  &:after {\r\n    position: absolute;\r\n    height: ${(props) => `${props.$height}px`};\r\n    border-radius: 8px 8px 0 0;\r\n    content: '';\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    background: #888888;\r\n    mix-blend-mode: saturation;\r\n  }\r\n`;\r\n\r\nexport const Column = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: stretch;\r\n  height: 100%;\r\n`;\r\n\r\nexport const ModalTitleSection = styled.section`\r\n  word-break: break-word;\r\n  display: flex;\r\n  width: 100%;\r\n  justify-content: space-between;\r\n`;\r\n\r\nexport const ModalHeaderActionsWithImage = styled.div<{ $hasBackButton?: boolean }>`\r\n  display: flex;\r\n  flex-direction: ${(props) => (!props.$hasBackButton ? 'row-reverse' : 'row')};\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  z-index: 1;\r\n`;\r\n\r\nexport const ModalHeaderActions = styled.div`\r\n  display: flex;\r\n  margin: -12px -12px 0 0;\r\n`;\r\n\r\nexport const FlexContainer = styled.div`\r\n  display: flex;\r\n  width: 100%;\r\n`;\r\n\r\nexport const ModalHoverModifier = styled.div`\r\n  button:hover {\r\n    cursor: help !important;\r\n  }\r\n`;\r\n\r\nexport const CloseButtonWrapper = styled.div<{ $size?: Size; $hasImage?: boolean }>`\r\n  button {\r\n    ${(props) =>\r\n      props.$hasImage\r\n        ? css`\r\n            margin: -12px -12px 0 0 !important;\r\n          `\r\n        : css`\r\n            left: unset;\r\n          `}\r\n  }\r\n`;\r\n\r\nexport const BackButtonWrapper = styled.div<{ $size?: Size; $hasImage?: boolean }>`\r\n  button {\r\n    margin: -12px 0 0 -12px !important;\r\n  }\r\n`;\r\n\r\nexport const ModalTitle = styled.h5<{ $fontSize?: string }>`\r\n  margin: 0;\r\n  font-size: ${(props) => props.$fontSize || '1.25em'};\r\n  font-weight: bold;\r\n`;\r\n\r\nexport const ModalNoteSection = styled.section<{ $state: string; $size?: string }>`\r\n  background-color: ${(props) => getBackgroundColor(props.$state, props.theme)};\r\n  font-size: ${(props) => (props?.$size === 'small' ? `16px` : props?.$size === 'large' ? '20px' : '18px')};\r\n  margin-top: ${(props) => (props?.$size === 'small' ? `0px` : props?.$size === 'large' ? '16px' : '4px')};\r\n  margin-bottom: ${(props) => (props?.$size === 'small' ? `8px` : props?.$size === 'large' ? '24px' : '16px')};\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: ${(props) => (props?.$size === 'small' ? `8px` : props?.$size === 'large' ? '16px' : '12px')};\r\n  border-radius: 2px;\r\n\r\n  span {\r\n    display: block;\r\n    width: calc(100% - 32px);\r\n    margin-left: 8px;\r\n    color: ${(props) => getNoteMessageColor(props.$state, props.theme)};\r\n  }\r\n`;\r\n\r\nexport const ModalBody = styled.section<{ $size?: string; $overflow?: string; $hasContentBorders?: boolean }>`\r\n  flex: 1 1 auto;\r\n  overflow: ${(props) => props?.$overflow ?? 'unset'};\r\n  margin: ${(props) => (props?.$size === 'small' ? `8px 0` : props?.$size === 'large' ? '16px 0' : '12px 0')};\r\n\r\n  border-top: ${(props) => (props?.$hasContentBorders ? `1px solid ${COLORS.getColor('neutral_100', props.theme)}` : 'none')};\r\n  border-bottom: ${(props) => (props?.$hasContentBorders ? `1px solid ${COLORS.getColor('neutral_100', props.theme)}` : 'none')};\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n`;\r\n\r\nexport const ModalFooter = styled.section<{ $size?: Size }>`\r\n  display: flex;\r\n  justify-content: flex-end;\r\n\r\n  gap: ${(props) => (props?.$size === 'large' ? `16px` : '8px')};\r\n\r\n  .footer-action {\r\n    order: -1;\r\n    margin-right: auto;\r\n    display: flex;\r\n    align-items: center;\r\n    font-size: ${(props) => (props?.$size === 'small' ? `16px` : props?.$size === 'large' ? '20px' : '18px')};\r\n    gap: ${(props) => (props?.$size === Size.Large ? `8px` : props?.$size === Size.Small ? '4px' : '6px')};\r\n  }\r\n\r\n  .footer-action.note {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const getBackgroundColor = (state: string, theme: any) => {\r\n  switch (state) {\r\n    case 'positive':\r\n      return COLORS.getColor('correct_100', theme);\r\n    case 'warning':\r\n      return COLORS.getColor('warning_100', theme);\r\n    case 'critical':\r\n      return COLORS.getColor('critical_100', theme);\r\n    default:\r\n      return COLORS.getColor('primary_100', theme);\r\n  }\r\n};\r\n\r\nexport const getNoteMessageColor = (state: string, theme: any) => {\r\n  switch (state) {\r\n    case 'positive':\r\n      return COLORS.getColor('correct_700', theme);\r\n    case 'warning':\r\n      return COLORS.getColor('warning_700', theme);\r\n    case 'critical':\r\n      return COLORS.getColor('critical_700', theme);\r\n    default:\r\n      return COLORS.getColor('primary_700', theme);\r\n  }\r\n};\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ModalStyles.js","names":["styled","css","COLORS","scrollBarStyling","Size","ModalHeader","section","props","$marginBottom","StyledModalHeader","$height","$size","ImageContainer","div","ImageOverlay","Column","ModalTitleSection","ModalHeaderActionsWithImage","$hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","$hasImage","BackButtonWrapper","ModalTitle","h5","$fontSize","ModalNoteSection","getBackgroundColor","$state","theme","getNoteMessageColor","ModalBody","$overflow","$hasContentBorders","getColor","Small","ModalFooter","Large","state"],"sources":["../../src/Modals/ModalStyles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport { COLORS } from '..';\r\nimport { scrollBarStyling } from '../styles';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Modal styles\r\n */\r\nexport const ModalHeader = styled.section<{ $marginBottom?: string }>`\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  margin-bottom: ${(props) => props.$marginBottom || '24px'};\r\n`;\r\n\r\nexport const StyledModalHeader = styled(ModalHeader)<{ $marginBottom?: string; $size?: string; $height?: number }>`\r\n  flex: 1 0 calc(50% - 5px);\r\n  flex-direction: column;\r\n  flex-basis: auto;\r\n  text-align: left;\r\n  height: ${(props) => (props.$height ? `${props.$height - (props.$size === 'small' ? 16 : props.$size === 'large' ? 32 : 24)}px` : '')};\r\n  img {\r\n    width: 100%;\r\n    height: ${(props) => `${props.$height}px`};\r\n    object-fit: cover;\r\n    border-radius: 8px 8px 0 0;\r\n  }\r\n`;\r\n\r\nexport const ImageContainer = styled.div<{ $height: number }>`\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  height: ${(props) => `${props.$height}px`};\r\n\r\n  #imgWithFallbackLoadingIndicator {\r\n    position: absolute;\r\n    left: 50%;\r\n    top: 0;\r\n  }\r\n`;\r\n\r\nexport const ImageOverlay = styled.div<{ $height: number }>`\r\n  position: absolute;\r\n  content: '';\r\n  top: 0;\r\n  left: 0;\r\n  height: ${(props) => `${props.$height}px`};\r\n  width: 100%;\r\n  background: rgba(255, 255, 255, 0.5);\r\n  border-radius: 8px 8px 0 0;\r\n\r\n  &:after {\r\n    position: absolute;\r\n    height: ${(props) => `${props.$height}px`};\r\n    border-radius: 8px 8px 0 0;\r\n    content: '';\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    background: #888888;\r\n    mix-blend-mode: saturation;\r\n  }\r\n`;\r\n\r\nexport const Column = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: stretch;\r\n  height: 100%;\r\n`;\r\n\r\nexport const ModalTitleSection = styled.section`\r\n  word-break: break-word;\r\n  display: flex;\r\n  width: 100%;\r\n  justify-content: space-between;\r\n`;\r\n\r\nexport const ModalHeaderActionsWithImage = styled.div<{ $hasBackButton?: boolean }>`\r\n  display: flex;\r\n  flex-direction: ${(props) => (!props.$hasBackButton ? 'row-reverse' : 'row')};\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  z-index: 1;\r\n`;\r\n\r\nexport const ModalHeaderActions = styled.div`\r\n  display: flex;\r\n  margin: -12px -12px 0 0;\r\n`;\r\n\r\nexport const FlexContainer = styled.div`\r\n  display: flex;\r\n  width: 100%;\r\n`;\r\n\r\nexport const ModalHoverModifier = styled.div`\r\n  button:hover {\r\n    cursor: help !important;\r\n  }\r\n`;\r\n\r\nexport const CloseButtonWrapper = styled.div<{ $size?: Size; $hasImage?: boolean }>`\r\n  button {\r\n    ${(props) =>\r\n      props.$hasImage\r\n        ? css`\r\n            margin: -12px -12px 0 0 !important;\r\n          `\r\n        : css`\r\n            left: unset;\r\n          `}\r\n  }\r\n`;\r\n\r\nexport const BackButtonWrapper = styled.div<{ $size?: Size; $hasImage?: boolean }>`\r\n  button {\r\n    margin: -12px 0 0 -12px !important;\r\n  }\r\n`;\r\n\r\nexport const ModalTitle = styled.h5<{ $fontSize?: string }>`\r\n  margin: 0;\r\n  font-size: ${(props) => props.$fontSize || '1.25em'};\r\n  font-weight: bold;\r\n`;\r\n\r\nexport const ModalNoteSection = styled.section<{ $state: string; $size?: string }>`\r\n  background-color: ${(props) => getBackgroundColor(props.$state, props.theme)};\r\n  font-size: ${(props) => (props?.$size === 'small' ? `16px` : props?.$size === 'large' ? '20px' : '18px')};\r\n  margin-top: ${(props) => (props?.$size === 'small' ? `0px` : props?.$size === 'large' ? '16px' : '4px')};\r\n  margin-bottom: ${(props) => (props?.$size === 'small' ? `8px` : props?.$size === 'large' ? '24px' : '16px')};\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: ${(props) => (props?.$size === 'small' ? `8px` : props?.$size === 'large' ? '16px' : '12px')};\r\n  border-radius: 2px;\r\n\r\n  span {\r\n    display: block;\r\n    width: calc(100% - 32px);\r\n    margin-left: 8px;\r\n    color: ${(props) => getNoteMessageColor(props.$state, props.theme)};\r\n  }\r\n`;\r\n\r\nexport const ModalBody = styled.section<{ $size?: string; $overflow?: string; $hasContentBorders?: boolean }>`\r\n  flex: 1 1 auto;\r\n  overflow: ${(props) => props?.$overflow ?? 'unset'};\r\n  margin: ${(props) => (props?.$size === 'small' ? `8px 0` : props?.$size === 'large' ? '16px 0' : '12px 0')};\r\n\r\n  border-top: ${(props) => (props?.$hasContentBorders ? `1px solid ${COLORS.getColor('neutral_100', props.theme)}` : 'none')};\r\n  border-bottom: ${(props) => (props?.$hasContentBorders ? `1px solid ${COLORS.getColor('neutral_100', props.theme)}` : 'none')};\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n`;\r\n\r\nexport const ModalFooter = styled.section<{ $size?: Size }>`\r\n  display: flex;\r\n  justify-content: flex-end;\r\n\r\n  gap: ${(props) => (props?.$size === 'large' ? `16px` : '8px')};\r\n\r\n  .footer-action {\r\n    order: -1;\r\n    margin-right: auto;\r\n    display: flex;\r\n    align-items: center;\r\n    font-size: ${(props) => (props?.$size === 'small' ? `16px` : props?.$size === 'large' ? '20px' : '18px')};\r\n    gap: ${(props) => (props?.$size === Size.Large ? `8px` : props?.$size === Size.Small ? '4px' : '6px')};\r\n  }\r\n\r\n  .footer-action.note {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const getBackgroundColor = (state: string, theme: any) => {\r\n  switch (state) {\r\n    case 'positive':\r\n      return COLORS.getColor('correct_100', theme);\r\n    case 'warning':\r\n      return COLORS.getColor('warning_100', theme);\r\n    case 'critical':\r\n      return COLORS.getColor('critical_100', theme);\r\n    default:\r\n      return COLORS.getColor('primary_100', theme);\r\n  }\r\n};\r\n\r\nexport const getNoteMessageColor = (state: string, theme: any) => {\r\n  switch (state) {\r\n    case 'positive':\r\n      return COLORS.getColor('correct_700', theme);\r\n    case 'warning':\r\n      return COLORS.getColor('warning_700', theme);\r\n    case 'critical':\r\n      return COLORS.getColor('critical_700', theme);\r\n    default:\r\n      return COLORS.getColor('primary_700', theme);\r\n  }\r\n};\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Modals/ModalTypes.d.ts

@@ -1,34 +1,34 @@
-import { ButtonProps } from '../Button';
-import { HyperlinkProps } from '../HyperLink/HyperLink';
-import { IconButtonProps } from '../Button';
-import React from 'react';
-import { IconDropdownButtonProps } from "../Dropdown/DropdownButtonTypes";
-import { ToggleButtonProps } from "../Toggles/ToggleButton";
-export interface ModalHeaderIconButton extends Omit<IconButtonProps, 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'focusOnClick'> {
-    componentType: 'icon';
-    icon: React.ReactNode;
-}
-export interface ModalHeaderDropdownButton extends Omit<IconDropdownButtonProps, 'size' | 'type'> {
-    componentType: 'dropdown';
-}
-export interface ModalHeaderToggleButton extends ToggleButtonProps {
-    componentType: 'toggle';
-}
-export type ModalHeaderButtons = ModalHeaderIconButton | ModalHeaderDropdownButton | ModalHeaderToggleButton;
-export interface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {
-    action?: (() => void) | ((e: any) => void);
-    text?: string;
-    children?: React.ReactNode;
-}
-export interface LeftFooterActionBase {
-    actionType: 'hyperlink' | 'note' | 'button';
-    text: string;
-    icon?: React.ReactNode;
-    action?: (() => void) | ((e: any) => void);
-}
-export interface LeftFooterHyperlink extends HyperlinkProps, LeftFooterActionBase {
-}
-export interface LeftFooterButton extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'>, LeftFooterActionBase {
-    children?: React.ReactNode;
-}
-export type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;
+import { ButtonProps } from '../Button';
+import { HyperlinkProps } from '../HyperLink/HyperLink';
+import { IconButtonProps } from '../Button';
+import React from 'react';
+import { IconDropdownButtonProps } from "../Dropdown/DropdownButtonTypes";
+import { ToggleButtonProps } from "../Toggles/ToggleButton";
+export interface ModalHeaderIconButton extends Omit<IconButtonProps, 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'focusOnClick'> {
+    componentType: 'icon';
+    icon: React.ReactNode;
+}
+export interface ModalHeaderDropdownButton extends Omit<IconDropdownButtonProps, 'size' | 'type'> {
+    componentType: 'dropdown';
+}
+export interface ModalHeaderToggleButton extends ToggleButtonProps {
+    componentType: 'toggle';
+}
+export type ModalHeaderButtons = ModalHeaderIconButton | ModalHeaderDropdownButton | ModalHeaderToggleButton;
+export interface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {
+    action?: (() => void) | ((e: any) => void);
+    text?: string;
+    children?: React.ReactNode;
+}
+export interface LeftFooterActionBase {
+    actionType: 'hyperlink' | 'note' | 'button';
+    text: string;
+    icon?: React.ReactNode;
+    action?: (() => void) | ((e: any) => void);
+}
+export interface LeftFooterHyperlink extends HyperlinkProps, LeftFooterActionBase {
+}
+export interface LeftFooterButton extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'>, LeftFooterActionBase {
+    children?: React.ReactNode;
+}
+export type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;

package/dist/Modals/index.d.ts

@@ -1,7 +1,7 @@
-import Modal, { ModalCloseButton } from './Modal';
-import ModalContainer from './ModalContainer';
-import { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';
-import ModalDialog from './ModalDialog';
-import ModalContent, { ModalContentBodyComponent, ModalContentFooterComponent, ModalContentHeaderComponent } from './ModalContent';
-export { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog, ModalContent, ModalContentBodyComponent, ModalContentFooterComponent, ModalContentHeaderComponent };
-export type { LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton, ModalHeaderIconButton } from './ModalTypes';
+import Modal, { ModalCloseButton } from './Modal';
+import ModalContainer from './ModalContainer';
+import { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';
+import ModalDialog from './ModalDialog';
+import ModalContent, { ModalContentBodyComponent, ModalContentFooterComponent, ModalContentHeaderComponent } from './ModalContent';
+export { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog, ModalContent, ModalContentBodyComponent, ModalContentFooterComponent, ModalContentHeaderComponent };
+export type { LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton, ModalHeaderIconButton } from './ModalTypes';

package/dist/NavItem/NavItem.cjs

@@ -6,17 +6,87 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.NavItemDiv = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("../styles");
 var _typography = require("../styles/typography");
 var _zIndexes = require("../styles/z-indexes");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-const NavItemDiv = exports.NavItemDiv = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  ", " {\n    height: 80px;\n  }\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    background-color: transparent;\n    height: 3px;\n    border-radius: 3px;\n    left: 2px;\n    right: 2px;\n    bottom: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n\n  &:focus:not(.disabled) {\n    ", "\n    outline-offset: -4px;\n  }\n"])), props => (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme)), _styles.BREAKPOINTS.LARGE, _zIndexes.Z_INDEXES.active, props => _styles.COLORS.getColor('neutral_20', props.theme), props => _styles.COLORS.getColor('neutral_800', props.theme), props => _styles.COLORS.getColor('primary_600', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme), props => _styles.COLORS.getColor('neutral_100', props.theme), props => _styles.COLORS.getColor('neutral_100', props.theme), _zIndexes.Z_INDEXES.hover, props => _styles.COLORS.getColor('primary_20', props.theme), props => _styles.COLORS.getColor('primary_700', props.theme), props => _styles.COLORS.getColor('primary_700', props.theme), _zIndexes.Z_INDEXES.active, props => _styles.COLORS.getColor('primary_100', props.theme), props => _styles.COLORS.getColor('primary_800', props.theme), props => _styles.COLORS.getColor('primary_800', props.theme), _styles.focusStyles);
+const NavItemDiv = exports.NavItemDiv = _styledComponents.default.div`
+  ${props => (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme))}
+
+  margin: 0;
+  padding: 0 21px 0 21px;
+  height: 64px;
+
+  ${_styles.BREAKPOINTS.LARGE} {
+    height: 80px;
+  }
+
+  display: flex;
+  align-items: center;
+  text-align: center;
+  position: relative;
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    background-color: transparent;
+    height: 3px;
+    border-radius: 3px;
+    left: 2px;
+    right: 2px;
+    bottom: 2px;
+  }
+
+  &.active:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.active};
+    background-color: ${props => _styles.COLORS.getColor('neutral_20', props.theme)};
+    color: ${props => _styles.COLORS.getColor('neutral_800', props.theme)};
+
+    &:after {
+      background-color: ${props => _styles.COLORS.getColor('primary_600', props.theme)};
+    }
+  }
+
+  &.disabled {
+    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+    background-color: ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+
+    &:after {
+      background-color: ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+    }
+  }
+
+  &:hover:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.hover};
+    background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+    color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+
+    &:after {
+      background-color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+    }
+  }
+
+  &:active:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.active};
+    background-color: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
+    color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+
+    &:after {
+      background-color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    }
+  }
+
+
+  &:focus:not(.disabled) {
+    ${_styles.focusStyles}
+    outline-offset: -4px;
+  }
+`;
 const NavItem = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(NavItemDiv, _objectSpread({}, props));
 };

package/dist/NavItem/NavItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.cjs","names":["_styledComponents","_interopRequireDefault","require","_react","_styles","_typography","_zIndexes","_jsxRuntime","_templateObject","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","NavItemDiv","exports","styled","div","_taggedTemplateLiteral2","props","ComponentMStyling","ComponentTextStyle","Regular","COLORS","getColor","theme","BREAKPOINTS","LARGE","Z_INDEXES","active","hover","focusStyles","NavItem","jsx","_default"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled from 'styled-components';\r\nimport React from 'react';\r\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\r\nimport {ComponentMStyling, ComponentTextStyle} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {useFocusVisibleRef} from '../common';\r\n\r\nexport const NavItemDiv = styled.div`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n  margin: 0;\r\n  padding: 0 21px 0 21px;\r\n  height: 64px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    height: 80px;\r\n  }\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  text-align: center;\r\n  position: relative;\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    background-color: transparent;\r\n    height: 3px;\r\n    border-radius: 3px;\r\n    left: 2px;\r\n    right: 2px;\r\n    bottom: 2px;\r\n  }\r\n\r\n  &.active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n\r\n  &:focus:not(.disabled) {\r\n    ${focusStyles}\r\n    outline-offset: -4px;\r\n  }\r\n`;\r\n\r\n\r\nconst NavItem = (props: any) => {\r\n  return (\r\n    <NavItemDiv {...props} />\r\n  );\r\n};\r\n\r\nexport default NavItem;\r\n"],"mappings":";;;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AAA8C,IAAAK,WAAA,GAAAL,OAAA;AAAA,IAAAM,eAAA;AAAA,SAAAC,QAAAC,CAAA,EAAAC,CAAA,QAAAC,CAAA,GAAAC,MAAA,CAAAC,IAAA,CAAAJ,CAAA,OAAAG,MAAA,CAAAE,qBAAA,QAAAC,CAAA,GAAAH,MAAA,CAAAE,qBAAA,CAAAL,CAAA,GAAAC,CAAA,KAAAK,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAAN,CAAA,WAAAE,MAAA,CAAAK,wBAAA,CAAAR,CAAA,EAAAC,CAAA,EAAAQ,UAAA,OAAAP,CAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,CAAA,EAAAI,CAAA,YAAAJ,CAAA;AAAA,SAAAU,cAAAZ,CAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAY,SAAA,CAAAC,MAAA,EAAAb,CAAA,UAAAC,CAAA,WAAAW,SAAA,CAAAZ,CAAA,IAAAY,SAAA,CAAAZ,CAAA,QAAAA,CAAA,OAAAF,OAAA,CAAAI,MAAA,CAAAD,CAAA,OAAAa,OAAA,WAAAd,CAAA,QAAAe,gBAAA,CAAAC,OAAA,EAAAjB,CAAA,EAAAC,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAE,MAAA,CAAAe,yBAAA,GAAAf,MAAA,CAAAgB,gBAAA,CAAAnB,CAAA,EAAAG,MAAA,CAAAe,yBAAA,CAAAhB,CAAA,KAAAH,OAAA,CAAAI,MAAA,CAAAD,CAAA,GAAAa,OAAA,WAAAd,CAAA,IAAAE,MAAA,CAAAiB,cAAA,CAAApB,CAAA,EAAAC,CAAA,EAAAE,MAAA,CAAAK,wBAAA,CAAAN,CAAA,EAAAD,CAAA,iBAAAD,CAAA;AAGvC,MAAMqB,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAGE,yBAAM,CAACC,GAAG,CAAA1B,eAAA,KAAAA,eAAA,OAAA2B,uBAAA,CAAAR,OAAA,okCAChCS,KAAK,IAAI,IAAAC,6BAAiB,EAACC,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC,EAMnGC,mBAAW,CAACC,KAAK,EAsBNC,mBAAS,CAACC,MAAM,EACPV,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEL,KAAK,CAACM,KAAK,CAAC,EAC9DN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAGvCN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAKjEN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EACzCN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAGlDN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAK/DG,mBAAS,CAACE,KAAK,EACNX,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEL,KAAK,CAACM,KAAK,CAAC,EAC9DN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAGvCN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAK/DG,mBAAS,CAACC,MAAM,EACPV,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAC/DN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAGvCN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAMxEM,mBAAW,CAGhB;AAGD,MAAMC,OAAO,GAAIb,KAAU,IAAK;EAC9B,oBACE,IAAA7B,WAAA,CAAA2C,GAAA,EAACnB,UAAU,EAAAT,aAAA,KAAKc,KAAK,CAAG,CAAC;AAE7B,CAAC;AAAC,IAAAe,QAAA,GAAAnB,OAAA,CAAAL,OAAA,GAEasB,OAAO","ignoreList":[]}
+{"version":3,"file":"NavItem.cjs","names":["_styledComponents","_interopRequireDefault","require","_react","_styles","_typography","_zIndexes","_jsxRuntime","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","NavItemDiv","exports","styled","div","props","ComponentMStyling","ComponentTextStyle","Regular","COLORS","getColor","theme","BREAKPOINTS","LARGE","Z_INDEXES","active","hover","focusStyles","NavItem","jsx","_default"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled from 'styled-components';\r\nimport React from 'react';\r\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\r\nimport {ComponentMStyling, ComponentTextStyle} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {useFocusVisibleRef} from '../common';\r\n\r\nexport const NavItemDiv = styled.div`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n  margin: 0;\r\n  padding: 0 21px 0 21px;\r\n  height: 64px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    height: 80px;\r\n  }\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  text-align: center;\r\n  position: relative;\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    background-color: transparent;\r\n    height: 3px;\r\n    border-radius: 3px;\r\n    left: 2px;\r\n    right: 2px;\r\n    bottom: 2px;\r\n  }\r\n\r\n  &.active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n\r\n  &:focus:not(.disabled) {\r\n    ${focusStyles}\r\n    outline-offset: -4px;\r\n  }\r\n`;\r\n\r\n\r\nconst NavItem = (props: any) => {\r\n  return (\r\n    <NavItemDiv {...props} />\r\n  );\r\n};\r\n\r\nexport default NavItem;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/NavItem/NavItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-export declare const NavItemDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-declare const NavItem: (props: any) => React.JSX.Element;
-export default NavItem;
+import React from 'react';
+export declare const NavItemDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const NavItem: (props: any) => React.JSX.Element;
+export default NavItem;

package/dist/NavItem/NavItem.js

@@ -1,6 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import styled from 'styled-components';
@@ -9,7 +7,79 @@ import { BREAKPOINTS, COLORS, focusStyles } from '../styles';
 import { ComponentMStyling, ComponentTextStyle } from '../styles/typography';
 import { Z_INDEXES } from '../styles/z-indexes';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const NavItemDiv = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  ", " {\n    height: 80px;\n  }\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    background-color: transparent;\n    height: 3px;\n    border-radius: 3px;\n    left: 2px;\n    right: 2px;\n    bottom: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n\n  &:focus:not(.disabled) {\n    ", "\n    outline-offset: -4px;\n  }\n"])), props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme)), BREAKPOINTS.LARGE, Z_INDEXES.active, props => COLORS.getColor('neutral_20', props.theme), props => COLORS.getColor('neutral_800', props.theme), props => COLORS.getColor('primary_600', props.theme), props => COLORS.getColor('neutral_300', props.theme), props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_100', props.theme), Z_INDEXES.hover, props => COLORS.getColor('primary_20', props.theme), props => COLORS.getColor('primary_700', props.theme), props => COLORS.getColor('primary_700', props.theme), Z_INDEXES.active, props => COLORS.getColor('primary_100', props.theme), props => COLORS.getColor('primary_800', props.theme), props => COLORS.getColor('primary_800', props.theme), focusStyles);
+export const NavItemDiv = styled.div`
+  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+
+  margin: 0;
+  padding: 0 21px 0 21px;
+  height: 64px;
+
+  ${BREAKPOINTS.LARGE} {
+    height: 80px;
+  }
+
+  display: flex;
+  align-items: center;
+  text-align: center;
+  position: relative;
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    background-color: transparent;
+    height: 3px;
+    border-radius: 3px;
+    left: 2px;
+    right: 2px;
+    bottom: 2px;
+  }
+
+  &.active:not(.disabled) {
+    z-index: ${Z_INDEXES.active};
+    background-color: ${props => COLORS.getColor('neutral_20', props.theme)};
+    color: ${props => COLORS.getColor('neutral_800', props.theme)};
+
+    &:after {
+      background-color: ${props => COLORS.getColor('primary_600', props.theme)};
+    }
+  }
+
+  &.disabled {
+    color: ${props => COLORS.getColor('neutral_300', props.theme)};
+    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+
+    &:after {
+      background-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+    }
+  }
+
+  &:hover:not(.disabled) {
+    z-index: ${Z_INDEXES.hover};
+    background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+    color: ${props => COLORS.getColor('primary_700', props.theme)};
+
+    &:after {
+      background-color: ${props => COLORS.getColor('primary_700', props.theme)};
+    }
+  }
+
+  &:active:not(.disabled) {
+    z-index: ${Z_INDEXES.active};
+    background-color: ${props => COLORS.getColor('primary_100', props.theme)};
+    color: ${props => COLORS.getColor('primary_800', props.theme)};
+
+    &:after {
+      background-color: ${props => COLORS.getColor('primary_800', props.theme)};
+    }
+  }
+
+
+  &:focus:not(.disabled) {
+    ${focusStyles}
+    outline-offset: -4px;
+  }
+`;
 const NavItem = props => {
   return /*#__PURE__*/_jsx(NavItemDiv, _objectSpread({}, props));
 };

package/dist/NavItem/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","names":["styled","React","BREAKPOINTS","COLORS","focusStyles","ComponentMStyling","ComponentTextStyle","Z_INDEXES","jsx","_jsx","NavItemDiv","div","_templateObject","_taggedTemplateLiteral","props","Regular","getColor","theme","LARGE","active","hover","NavItem","_objectSpread"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled from 'styled-components';\r\nimport React from 'react';\r\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\r\nimport {ComponentMStyling, ComponentTextStyle} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {useFocusVisibleRef} from '../common';\r\n\r\nexport const NavItemDiv = styled.div`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n  margin: 0;\r\n  padding: 0 21px 0 21px;\r\n  height: 64px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    height: 80px;\r\n  }\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  text-align: center;\r\n  position: relative;\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    background-color: transparent;\r\n    height: 3px;\r\n    border-radius: 3px;\r\n    left: 2px;\r\n    right: 2px;\r\n    bottom: 2px;\r\n  }\r\n\r\n  &.active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n\r\n  &:focus:not(.disabled) {\r\n    ${focusStyles}\r\n    outline-offset: -4px;\r\n  }\r\n`;\r\n\r\n\r\nconst NavItem = (props: any) => {\r\n  return (\r\n    <NavItemDiv {...props} />\r\n  );\r\n};\r\n\r\nexport default NavItem;\r\n"],"mappings":";;;;;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAAQC,WAAW,EAAEC,MAAM,EAAEC,WAAW,QAAO,WAAW;AAC1D,SAAQC,iBAAiB,EAAEC,kBAAkB,QAAO,sBAAsB;AAC1E,SAAQC,SAAS,QAAO,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG9C,OAAO,MAAMC,UAAU,GAAGV,MAAM,CAACW,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,mkCAChCC,KAAK,IAAIT,iBAAiB,CAACC,kBAAkB,CAACS,OAAO,EAAEZ,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC,EAMnGf,WAAW,CAACgB,KAAK,EAsBNX,SAAS,CAACY,MAAM,EACPL,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC,EAC9DH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAGvCH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAKjEH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EACzCH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAGlDH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAK/DV,SAAS,CAACa,KAAK,EACNN,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC,EAC9DH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAGvCH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAK/DV,SAAS,CAACY,MAAM,EACPL,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAC/DH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAGvCH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAMxEb,WAAW,CAGhB;AAGD,MAAMiB,OAAO,GAAIP,KAAU,IAAK;EAC9B,oBACEL,IAAA,CAACC,UAAU,EAAAY,aAAA,KAAKR,KAAK,CAAG,CAAC;AAE7B,CAAC;AAED,eAAeO,OAAO","ignoreList":[]}
+{"version":3,"file":"NavItem.js","names":["styled","React","BREAKPOINTS","COLORS","focusStyles","ComponentMStyling","ComponentTextStyle","Z_INDEXES","jsx","_jsx","NavItemDiv","div","props","Regular","getColor","theme","LARGE","active","hover","NavItem","_objectSpread"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled from 'styled-components';\r\nimport React from 'react';\r\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\r\nimport {ComponentMStyling, ComponentTextStyle} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {useFocusVisibleRef} from '../common';\r\n\r\nexport const NavItemDiv = styled.div`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n  margin: 0;\r\n  padding: 0 21px 0 21px;\r\n  height: 64px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    height: 80px;\r\n  }\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  text-align: center;\r\n  position: relative;\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    background-color: transparent;\r\n    height: 3px;\r\n    border-radius: 3px;\r\n    left: 2px;\r\n    right: 2px;\r\n    bottom: 2px;\r\n  }\r\n\r\n  &.active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n\r\n  &:focus:not(.disabled) {\r\n    ${focusStyles}\r\n    outline-offset: -4px;\r\n  }\r\n`;\r\n\r\n\r\nconst NavItem = (props: any) => {\r\n  return (\r\n    <NavItemDiv {...props} />\r\n  );\r\n};\r\n\r\nexport default NavItem;\r\n"],"mappings":";;;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAAQC,WAAW,EAAEC,MAAM,EAAEC,WAAW,QAAO,WAAW;AAC1D,SAAQC,iBAAiB,EAAEC,kBAAkB,QAAO,sBAAsB;AAC1E,SAAQC,SAAS,QAAO,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG9C,OAAO,MAAMC,UAAU,GAAGV,MAAM,CAACW,GAAG;AACpC,IAAIC,KAAK,IAAIP,iBAAiB,CAACC,kBAAkB,CAACO,OAAO,EAAEV,MAAM,CAACW,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACvG;AACA;AACA;AACA;AACA;AACA,IAAIb,WAAW,CAACc,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeT,SAAS,CAACU,MAAM;AAC/B,wBAAwBL,KAAK,IAAIT,MAAM,CAACW,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC3E,aAAaH,KAAK,IAAIT,MAAM,CAACW,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA,0BAA0BH,KAAK,IAAIT,MAAM,CAACW,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA,aAAaH,KAAK,IAAIT,MAAM,CAACW,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE,wBAAwBH,KAAK,IAAIT,MAAM,CAACW,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC5E;AACA;AACA,0BAA0BH,KAAK,IAAIT,MAAM,CAACW,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA,eAAeR,SAAS,CAACW,KAAK;AAC9B,wBAAwBN,KAAK,IAAIT,MAAM,CAACW,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC3E,aAAaH,KAAK,IAAIT,MAAM,CAACW,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA,0BAA0BH,KAAK,IAAIT,MAAM,CAACW,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA,eAAeR,SAAS,CAACU,MAAM;AAC/B,wBAAwBL,KAAK,IAAIT,MAAM,CAACW,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC5E,aAAaH,KAAK,IAAIT,MAAM,CAACW,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA,0BAA0BH,KAAK,IAAIT,MAAM,CAACW,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA;AACA,MAAMX,WAAW;AACjB;AACA;AACA,CAAC;AAGD,MAAMe,OAAO,GAAIP,KAAU,IAAK;EAC9B,oBACEH,IAAA,CAACC,UAAU,EAAAU,aAAA,KAAKR,KAAK,CAAG,CAAC;AAE7B,CAAC;AAED,eAAeO,OAAO","ignoreList":[]}

package/dist/NavItem/NestedNavItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NestedNavItem.cjs","names":["React","_interopRequireWildcard","require","_types","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","NestedNavItem","forwardRef","_ref","ref","active","item","onClickHandler","size","Size","Medium","className","tabIndex","iconRight","id","rest","_objectWithoutProperties2","jsx","Fragment","propTypes","_propTypes","func","isRequired","bool","string","element","_default","exports"],"sources":["../../src/NavItem/NestedNavItem.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {Size} from '../types';\r\nimport { DropdownItem } from '../Dropdown/DropdownContent';\r\n\r\nexport interface NestedNavItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onMouseDown' | 'onClick'> {\r\n  /**\r\n   * Required. The item to be displayed in the dropdown.\r\n   */\r\n  item: DropdownItem;\r\n\r\n  /**\r\n   * Required. The handler function to be called when the item is clicked.\r\n   */\r\n  onClickHandler: (e: React.MouseEvent) => void;\r\n\r\n  /**\r\n   * Required. A boolean indicating whether the item is currently active.\r\n   */\r\n  active: boolean;\r\n\r\n  /**\r\n   * Required. The unique identifier for the item.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. The size of the item. Defaults to 'Medium'.\r\n   */\r\n  size?: Size;\r\n\r\n  /**\r\n   * Optional. An icon to be displayed on the right side of the item.\r\n   */\r\n  iconRight?: React.ReactElement;\r\n}\r\n\r\n\r\nconst NestedNavItem = React.forwardRef<HTMLButtonElement, NestedNavItemProps>(({\r\n                                                                       active,\r\n                                                                       item,\r\n                                                                       onClickHandler,\r\n                                                                       size = Size.Medium,\r\n                                                                       className,\r\n                                                                       tabIndex,\r\n                                                                       iconRight,\r\n                                                                       id,\r\n                                                                       ...rest\r\n                                                                     }: NestedNavItemProps, ref) => {\r\n  return (\r\n   <></>\r\n  );\r\n});\r\n\r\nexport default NestedNavItem;\r\n"],"mappings":";;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAA8B,IAAAE,WAAA,GAAAF,OAAA;AAAA,MAAAG,SAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAoC9B,MAAMW,aAAa,gBAAG1B,KAAK,CAAC2B,UAAU,CAAwC,CAAAC,IAAA,EAUcC,GAAG,KAAK;EAAA,IAVrB;MACRC,MAAM;MACNC,IAAI;MACJC,cAAc;MACdC,IAAI,GAAGC,WAAI,CAACC,MAAM;MAClBC,SAAS;MACTC,QAAQ;MACRC,SAAS;MACTC;IAEkB,CAAC,GAAAX,IAAA;IADhBY,IAAI,OAAAC,yBAAA,CAAA7B,OAAA,EAAAgB,IAAA,EAAAvB,SAAA;EAE5E,oBACC,IAAAD,WAAA,CAAAsC,GAAA,EAAAtC,WAAA,CAAAuC,QAAA,IAAI,CAAC;AAER,CAAC,CAAC;AAACjB,aAAA,CAAAkB,SAAA;EAtCDZ,cAAc,EAAAa,UAAA,CAAAjC,OAAA,CAAAkC,IAAA,CAAAC,UAAA;EAKdjB,MAAM,EAAAe,UAAA,CAAAjC,OAAA,CAAAoC,IAAA,CAAAD,UAAA;EAKNR,EAAE,EAAAM,UAAA,CAAAjC,OAAA,CAAAqC,MAAA,CAAAF,UAAA;EAUFT,SAAS,EAAAO,UAAA,CAAAjC,OAAA,CAAAsC;AAAA;AAAA,IAAAC,QAAA,GAAAC,OAAA,CAAAxC,OAAA,GAoBIc,aAAa","ignoreList":[]}
+{"version":3,"file":"NestedNavItem.cjs","names":["React","_interopRequireWildcard","require","_types","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","NestedNavItem","forwardRef","_ref","ref","active","item","onClickHandler","size","Size","Medium","className","tabIndex","iconRight","id","rest","_objectWithoutProperties2","jsx","Fragment","propTypes","_propTypes","func","isRequired","bool","string","element","_default","exports"],"sources":["../../src/NavItem/NestedNavItem.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {Size} from '../types';\r\nimport { DropdownItem } from '../Dropdown/DropdownContent';\r\n\r\nexport interface NestedNavItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onMouseDown' | 'onClick'> {\r\n  /**\r\n   * Required. The item to be displayed in the dropdown.\r\n   */\r\n  item: DropdownItem;\r\n\r\n  /**\r\n   * Required. The handler function to be called when the item is clicked.\r\n   */\r\n  onClickHandler: (e: React.MouseEvent) => void;\r\n\r\n  /**\r\n   * Required. A boolean indicating whether the item is currently active.\r\n   */\r\n  active: boolean;\r\n\r\n  /**\r\n   * Required. The unique identifier for the item.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. The size of the item. Defaults to 'Medium'.\r\n   */\r\n  size?: Size;\r\n\r\n  /**\r\n   * Optional. An icon to be displayed on the right side of the item.\r\n   */\r\n  iconRight?: React.ReactElement<any>;\r\n}\r\n\r\n\r\nconst NestedNavItem = React.forwardRef<HTMLButtonElement, NestedNavItemProps>(({\r\n                                                                       active,\r\n                                                                       item,\r\n                                                                       onClickHandler,\r\n                                                                       size = Size.Medium,\r\n                                                                       className,\r\n                                                                       tabIndex,\r\n                                                                       iconRight,\r\n                                                                       id,\r\n                                                                       ...rest\r\n                                                                     }: NestedNavItemProps, ref) => {\r\n  return (\r\n   <></>\r\n  );\r\n});\r\n\r\nexport default NestedNavItem;\r\n"],"mappings":";;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAA8B,IAAAE,WAAA,GAAAF,OAAA;AAAA,MAAAG,SAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAoC9B,MAAMW,aAAa,gBAAG1B,KAAK,CAAC2B,UAAU,CAAwC,CAAAC,IAAA,EAUcC,GAAG,KAAK;EAAA,IAVrB;MACRC,MAAM;MACNC,IAAI;MACJC,cAAc;MACdC,IAAI,GAAGC,WAAI,CAACC,MAAM;MAClBC,SAAS;MACTC,QAAQ;MACRC,SAAS;MACTC;IAEkB,CAAC,GAAAX,IAAA;IADhBY,IAAI,OAAAC,yBAAA,CAAA7B,OAAA,EAAAgB,IAAA,EAAAvB,SAAA;EAE5E,oBACC,IAAAD,WAAA,CAAAsC,GAAA,EAAAtC,WAAA,CAAAuC,QAAA,IAAI,CAAC;AAER,CAAC,CAAC;AAACjB,aAAA,CAAAkB,SAAA;EAtCDZ,cAAc,EAAAa,UAAA,CAAAjC,OAAA,CAAAkC,IAAA,CAAAC,UAAA;EAKdjB,MAAM,EAAAe,UAAA,CAAAjC,OAAA,CAAAoC,IAAA,CAAAD,UAAA;EAKNR,EAAE,EAAAM,UAAA,CAAAjC,OAAA,CAAAqC,MAAA,CAAAF,UAAA;EAUFT,SAAS,EAAAO,UAAA,CAAAjC,OAAA,CAAAsC;AAAA;AAAA,IAAAC,QAAA,GAAAC,OAAA,CAAAxC,OAAA,GAoBIc,aAAa","ignoreList":[]}

package/dist/NavItem/NestedNavItem.d.ts

@@ -1,31 +1,31 @@
-import * as React from 'react';
-import { Size } from '../types';
-import { DropdownItem } from '../Dropdown/DropdownContent';
-export interface NestedNavItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onMouseDown' | 'onClick'> {
-    /**
-     * Required. The item to be displayed in the dropdown.
-     */
-    item: DropdownItem;
-    /**
-     * Required. The handler function to be called when the item is clicked.
-     */
-    onClickHandler: (e: React.MouseEvent) => void;
-    /**
-     * Required. A boolean indicating whether the item is currently active.
-     */
-    active: boolean;
-    /**
-     * Required. The unique identifier for the item.
-     */
-    id: string;
-    /**
-     * Optional. The size of the item. Defaults to 'Medium'.
-     */
-    size?: Size;
-    /**
-     * Optional. An icon to be displayed on the right side of the item.
-     */
-    iconRight?: React.ReactElement;
-}
-declare const NestedNavItem: React.ForwardRefExoticComponent<NestedNavItemProps & React.RefAttributes<HTMLButtonElement>>;
-export default NestedNavItem;
+import * as React from 'react';
+import { Size } from '../types';
+import { DropdownItem } from '../Dropdown/DropdownContent';
+export interface NestedNavItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onMouseDown' | 'onClick'> {
+    /**
+     * Required. The item to be displayed in the dropdown.
+     */
+    item: DropdownItem;
+    /**
+     * Required. The handler function to be called when the item is clicked.
+     */
+    onClickHandler: (e: React.MouseEvent) => void;
+    /**
+     * Required. A boolean indicating whether the item is currently active.
+     */
+    active: boolean;
+    /**
+     * Required. The unique identifier for the item.
+     */
+    id: string;
+    /**
+     * Optional. The size of the item. Defaults to 'Medium'.
+     */
+    size?: Size;
+    /**
+     * Optional. An icon to be displayed on the right side of the item.
+     */
+    iconRight?: React.ReactElement<any>;
+}
+declare const NestedNavItem: React.ForwardRefExoticComponent<NestedNavItemProps & React.RefAttributes<HTMLButtonElement>>;
+export default NestedNavItem;

package/dist/NavItem/NestedNavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NestedNavItem.js","names":["React","Size","Fragment","_Fragment","jsx","_jsx","NestedNavItem","forwardRef","_ref","ref","active","item","onClickHandler","size","Medium","className","tabIndex","iconRight","id","rest","_objectWithoutProperties","_excluded","propTypes","_pt","func","isRequired","bool","string","element"],"sources":["../../src/NavItem/NestedNavItem.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {Size} from '../types';\r\nimport { DropdownItem } from '../Dropdown/DropdownContent';\r\n\r\nexport interface NestedNavItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onMouseDown' | 'onClick'> {\r\n  /**\r\n   * Required. The item to be displayed in the dropdown.\r\n   */\r\n  item: DropdownItem;\r\n\r\n  /**\r\n   * Required. The handler function to be called when the item is clicked.\r\n   */\r\n  onClickHandler: (e: React.MouseEvent) => void;\r\n\r\n  /**\r\n   * Required. A boolean indicating whether the item is currently active.\r\n   */\r\n  active: boolean;\r\n\r\n  /**\r\n   * Required. The unique identifier for the item.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. The size of the item. Defaults to 'Medium'.\r\n   */\r\n  size?: Size;\r\n\r\n  /**\r\n   * Optional. An icon to be displayed on the right side of the item.\r\n   */\r\n  iconRight?: React.ReactElement;\r\n}\r\n\r\n\r\nconst NestedNavItem = React.forwardRef<HTMLButtonElement, NestedNavItemProps>(({\r\n                                                                       active,\r\n                                                                       item,\r\n                                                                       onClickHandler,\r\n                                                                       size = Size.Medium,\r\n                                                                       className,\r\n                                                                       tabIndex,\r\n                                                                       iconRight,\r\n                                                                       id,\r\n                                                                       ...rest\r\n                                                                     }: NestedNavItemProps, ref) => {\r\n  return (\r\n   <></>\r\n  );\r\n});\r\n\r\nexport default NestedNavItem;\r\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAQC,IAAI,QAAO,UAAU;AAAC,SAAAC,QAAA,IAAAC,SAAA,EAAAC,GAAA,IAAAC,IAAA;AAoC9B,MAAMC,aAAa,gBAAGN,KAAK,CAACO,UAAU,CAAwC,CAAAC,IAAA,EAUcC,GAAG,KAAK;EAAA,IAVrB;MACRC,MAAM;MACNC,IAAI;MACJC,cAAc;MACdC,IAAI,GAAGZ,IAAI,CAACa,MAAM;MAClBC,SAAS;MACTC,QAAQ;MACRC,SAAS;MACTC;IAEkB,CAAC,GAAAV,IAAA;IADhBW,IAAI,GAAAC,wBAAA,CAAAZ,IAAA,EAAAa,SAAA;EAE5E,oBACChB,IAAA,CAAAF,SAAA,IAAI,CAAC;AAER,CAAC,CAAC;AAACG,aAAA,CAAAgB,SAAA;EAtCDV,cAAc,EAAAW,GAAA,CAAAC,IAAA,CAAAC,UAAA;EAKdf,MAAM,EAAAa,GAAA,CAAAG,IAAA,CAAAD,UAAA;EAKNP,EAAE,EAAAK,GAAA,CAAAI,MAAA,CAAAF,UAAA;EAUFR,SAAS,EAAAM,GAAA,CAAAK;AAAA;AAoBX,eAAetB,aAAa","ignoreList":[]}
+{"version":3,"file":"NestedNavItem.js","names":["React","Size","Fragment","_Fragment","jsx","_jsx","NestedNavItem","forwardRef","_ref","ref","active","item","onClickHandler","size","Medium","className","tabIndex","iconRight","id","rest","_objectWithoutProperties","_excluded","propTypes","_pt","func","isRequired","bool","string","element"],"sources":["../../src/NavItem/NestedNavItem.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {Size} from '../types';\r\nimport { DropdownItem } from '../Dropdown/DropdownContent';\r\n\r\nexport interface NestedNavItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onMouseDown' | 'onClick'> {\r\n  /**\r\n   * Required. The item to be displayed in the dropdown.\r\n   */\r\n  item: DropdownItem;\r\n\r\n  /**\r\n   * Required. The handler function to be called when the item is clicked.\r\n   */\r\n  onClickHandler: (e: React.MouseEvent) => void;\r\n\r\n  /**\r\n   * Required. A boolean indicating whether the item is currently active.\r\n   */\r\n  active: boolean;\r\n\r\n  /**\r\n   * Required. The unique identifier for the item.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. The size of the item. Defaults to 'Medium'.\r\n   */\r\n  size?: Size;\r\n\r\n  /**\r\n   * Optional. An icon to be displayed on the right side of the item.\r\n   */\r\n  iconRight?: React.ReactElement<any>;\r\n}\r\n\r\n\r\nconst NestedNavItem = React.forwardRef<HTMLButtonElement, NestedNavItemProps>(({\r\n                                                                       active,\r\n                                                                       item,\r\n                                                                       onClickHandler,\r\n                                                                       size = Size.Medium,\r\n                                                                       className,\r\n                                                                       tabIndex,\r\n                                                                       iconRight,\r\n                                                                       id,\r\n                                                                       ...rest\r\n                                                                     }: NestedNavItemProps, ref) => {\r\n  return (\r\n   <></>\r\n  );\r\n});\r\n\r\nexport default NestedNavItem;\r\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAQC,IAAI,QAAO,UAAU;AAAC,SAAAC,QAAA,IAAAC,SAAA,EAAAC,GAAA,IAAAC,IAAA;AAoC9B,MAAMC,aAAa,gBAAGN,KAAK,CAACO,UAAU,CAAwC,CAAAC,IAAA,EAUcC,GAAG,KAAK;EAAA,IAVrB;MACRC,MAAM;MACNC,IAAI;MACJC,cAAc;MACdC,IAAI,GAAGZ,IAAI,CAACa,MAAM;MAClBC,SAAS;MACTC,QAAQ;MACRC,SAAS;MACTC;IAEkB,CAAC,GAAAV,IAAA;IADhBW,IAAI,GAAAC,wBAAA,CAAAZ,IAAA,EAAAa,SAAA;EAE5E,oBACChB,IAAA,CAAAF,SAAA,IAAI,CAAC;AAER,CAAC,CAAC;AAACG,aAAA,CAAAgB,SAAA;EAtCDV,cAAc,EAAAW,GAAA,CAAAC,IAAA,CAAAC,UAAA;EAKdf,MAAM,EAAAa,GAAA,CAAAG,IAAA,CAAAD,UAAA;EAKNP,EAAE,EAAAK,GAAA,CAAAI,MAAA,CAAAF,UAAA;EAUFR,SAAS,EAAAM,GAAA,CAAAK;AAAA;AAoBX,eAAetB,aAAa","ignoreList":[]}

package/dist/NavItem/index.d.ts

@@ -1 +1 @@
-export { default as NavItem } from './NavItem';
+export { default as NavItem } from './NavItem';

package/dist/Navigation/NavigationProvider.cjs

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNavigation = exports.NavigationProvider = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const NavigationContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+const NavigationProvider = _ref => {
+  let {
+    children,
+    navigate,
+    isActiveRoute,
+    currentPath
+  } = _ref;
+  const value = _react.default.useMemo(() => ({
+    navigate,
+    currentPath,
+    isActiveRoute
+  }), [navigate, currentPath, isActiveRoute]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(NavigationContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+exports.NavigationProvider = NavigationProvider;
+NavigationProvider.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
+const useNavigation = () => {
+  const context = (0, _react.useContext)(NavigationContext);
+  if (!context) {
+    throw new Error('useNavigation must be used within a NavigationProvider');
+  }
+  return context;
+};
+exports.useNavigation = useNavigation;
+//# sourceMappingURL=NavigationProvider.cjs.map

package/dist/Navigation/NavigationProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationProvider.cjs","names":["_react","_interopRequireWildcard","require","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","NavigationContext","createContext","undefined","NavigationProvider","_ref","children","navigate","isActiveRoute","currentPath","value","React","useMemo","jsx","Provider","exports","propTypes","_propTypes","node","isRequired","useNavigation","context","useContext","Error"],"sources":["../../src/Navigation/NavigationProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, ReactNode } from 'react';\r\n\r\ninterface NavigationContextType {\r\n    navigate?: (path: string, isExternal: boolean) => void;\r\n    currentPath?: string | undefined;\r\n    isActiveRoute?: (url: string, exact: boolean) => boolean;\r\n}\r\n\r\nconst NavigationContext = createContext<NavigationContextType | undefined>(undefined);\r\n\r\nexport interface NavigationProviderProps {\r\n    children: ReactNode;\r\n}\r\n\r\nexport const NavigationProvider: React.FC<NavigationProviderProps & Partial<NavigationContextType>> = ({ \r\n    children, \r\n    navigate,\r\n    isActiveRoute,\r\n    currentPath\r\n}) => {\r\n    const value = React.useMemo(() => ({\r\n        navigate,\r\n        currentPath,\r\n        isActiveRoute\r\n    }), [navigate, currentPath, isActiveRoute]);\r\n\r\n    return (\r\n        <NavigationContext.Provider value={value}>\r\n            {children}\r\n        </NavigationContext.Provider>\r\n    );\r\n};\r\n\r\nexport const useNavigation = (): NavigationContextType => {\r\n    const context = useContext(NavigationContext);\r\n    if (!context) {\r\n        throw new Error('useNavigation must be used within a NavigationProvider');\r\n    }\r\n    return context;\r\n};"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAoE,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQpE,MAAMW,iBAAiB,gBAAG,IAAAC,oBAAa,EAAoCC,SAAS,CAAC;AAM9E,MAAMC,kBAAsF,GAAGC,IAAA,IAKhG;EAAA,IALiG;IACnGC,QAAQ;IACRC,QAAQ;IACRC,aAAa;IACbC;EACJ,CAAC,GAAAJ,IAAA;EACG,MAAMK,KAAK,GAAGC,cAAK,CAACC,OAAO,CAAC,OAAO;IAC/BL,QAAQ;IACRE,WAAW;IACXD;EACJ,CAAC,CAAC,EAAE,CAACD,QAAQ,EAAEE,WAAW,EAAED,aAAa,CAAC,CAAC;EAE3C,oBACI,IAAA5B,WAAA,CAAAiC,GAAA,EAACZ,iBAAiB,CAACa,QAAQ;IAACJ,KAAK,EAAEA,KAAM;IAAAJ,QAAA,EACpCA;EAAQ,CACe,CAAC;AAErC,CAAC;AAACS,OAAA,CAAAX,kBAAA,GAAAA,kBAAA;AAAAA,kBAAA,CAAAY,SAAA;EApBEV,QAAQ,EAAAW,UAAA,CAAA9B,OAAA,CAAA+B,IAAA,CAAAC;AAAA;AAsBL,MAAMC,aAAa,GAAGA,CAAA,KAA6B;EACtD,MAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACrB,iBAAiB,CAAC;EAC7C,IAAI,CAACoB,OAAO,EAAE;IACV,MAAM,IAAIE,KAAK,CAAC,wDAAwD,CAAC;EAC7E;EACA,OAAOF,OAAO;AAClB,CAAC;AAACN,OAAA,CAAAK,aAAA,GAAAA,aAAA","ignoreList":[]}

package/dist/Navigation/NavigationProvider.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+interface NavigationContextType {
+    navigate?: (path: string, isExternal: boolean) => void;
+    currentPath?: string | undefined;
+    isActiveRoute?: (url: string, exact: boolean) => boolean;
+}
+export interface NavigationProviderProps {
+    children: ReactNode;
+}
+export declare const NavigationProvider: React.FC<NavigationProviderProps & Partial<NavigationContextType>>;
+export declare const useNavigation: () => NavigationContextType;
+export {};