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

package/dist/Modals/ModalStyles.js

@@ -1,96 +1,55 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
-import styled, { css } from 'styled-components';
-import { COLORS } from '..';
-import { scrollBarStyling } from '../styles';
-import { Size } from '../types';
-
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from 'styled-components';
+import { COLORS } from '..';
+import { scrollBarStyling } from '../styles';
+import { Size } from '../types';
 /**
  * Modal styles
- */
-export var ModalHeader = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ", ";\n"])), function (props) {
-  return props.marginBottom || '24px';
-});
-export var StyledModalHeader = styled(ModalHeader)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1 0 calc(50% - 5px);\n  flex-direction: column;\n  flex-basis: auto;\n  text-align: left;\n  height: ", ";\n  img {\n    width: 100%;\n    height: ", ";\n    object-fit: cover;\n    border-radius: 8px 8px 0 0;\n  }\n"])), function (props) {
-  return props.$height ? "".concat(props.$height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24), "px") : '';
-}, function (props) {
-  return "".concat(props.$height, "px");
-});
-export var ImageContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: ", ";\n\n  #imgWithFallbackLoadingIndicator {\n    position: absolute;\n    left: 50%;\n    top: 0;\n  }\n"])), function (props) {
-  return "".concat(props.$height, "px");
-});
-export var ImageOverlay = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  content: '';\n  top: 0;\n  left: 0;\n  height: ", ";\n  width: 100%;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 8px 8px 0 0;\n\n  :after {\n    position: absolute;\n    height: ", ";\n    border-radius: 8px 8px 0 0;\n    content: '';\n    top: 0;\n    left: 0;\n    width: 100%;\n    background: #888888;\n    mix-blend-mode: saturation;\n  }\n"])), function (props) {
-  return "".concat(props.$height, "px");
-}, function (props) {
-  return "".concat(props.$height, "px");
-});
-export var Column = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n"])));
-export var ModalTitleSection = styled.section(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n"])));
-export var ModalHeaderActionsWithImage = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n"])), function (props) {
-  return !props.hasBackButton ? 'row-reverse' : 'row';
-});
-export var ModalHeaderActions = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  margin: -12px -12px 0 0;\n"])));
-export var FlexContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n"])));
-export var ModalHoverModifier = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  button:hover {\n    cursor: help !important;\n  }\n"])));
-export var CloseButtonWrapper = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  button {\n    ", "\n  }\n"])), function (props) {
-  return props.hasImage ? css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n            margin: -12px -12px 0 0 !important;\n          "]))) : css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n            left: unset;\n          "])));
-});
-export var BackButtonWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n"])));
-export var ModalTitle = styled.h5(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  margin: 0;\n  font-size: ", ";\n  font-weight: bold;\n"])), function (props) {
-  return props.fontSize || '1.25em';
-});
-export var ModalNoteSection = styled.section(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-size: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  display: flex;\n  flex-direction: row;\n  padding: ", ";\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: calc(100% - 32px);\n    margin-left: 8px;\n    color: ", ";\n  }\n"])), function (props) {
-  return getBackgroundColor(props.state);
-}, function (props) {
-  return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "16px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '20px' : '18px';
-}, function (props) {
-  return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "0px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '16px' : '4px';
-}, function (props) {
-  return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '24px' : '16px';
-}, function (props) {
-  return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '16px' : '12px';
-}, function (props) {
-  return getNoteMessageColor(props.state);
-});
-export var ModalBody = styled.section(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  overflow: ", ";\n  margin: ", ";\n\n  border-top: ", ";\n  border-bottom: ", ";\n\n  ", "\n"])), function (props) {
-  var _props$overflow;
-  return (_props$overflow = props === null || props === void 0 ? void 0 : props.overflow) !== null && _props$overflow !== void 0 ? _props$overflow : 'unset';
-}, function (props) {
-  return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px 0" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '16px 0' : '12px 0';
-}, function (props) {
-  return props !== null && props !== void 0 && props.hasContentBorders ? "1px solid ".concat(COLORS.neutral_100) : 'none';
-}, function (props) {
-  return props !== null && props !== void 0 && props.hasContentBorders ? "1px solid ".concat(COLORS.neutral_100) : 'none';
-}, scrollBarStyling(Size.Small));
-export var ModalFooter = styled.section(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ", ";\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ", ";\n    gap: ", ";\n  }\n\n  .footer-action.note {\n    color: ", ";\n  }\n"])), function (props) {
-  return (props === null || props === void 0 ? void 0 : props.size) === 'large' ? "16px" : '8px';
-}, function (props) {
-  return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "16px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '20px' : '18px';
-}, function (props) {
-  return (props === null || props === void 0 ? void 0 : props.size) === Size.Large ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === Size.Small ? '4px' : '6px';
-}, COLORS.neutral_600);
-export var getBackgroundColor = function getBackgroundColor(state) {
-  switch (state) {
-    case 'positive':
-      return COLORS.correct_100;
-    case 'warning':
-      return COLORS.warning_100;
-    case 'critical':
-      return COLORS.critical_100;
-    default:
-      return COLORS.primary_100;
-  }
-};
-export var getNoteMessageColor = function getNoteMessageColor(state) {
-  switch (state) {
-    case 'positive':
-      return COLORS.correct_700;
-    case 'warning':
-      return COLORS.warning_700;
-    case 'critical':
-      return COLORS.critical_700;
-    default:
-      return COLORS.primary_700;
-  }
-};
-//# sourceMappingURL=ModalStyles.js.map
+ */
+export var ModalHeader = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ", ";\n"])), function (props) { return props.marginBottom || '24px'; });
+export var StyledModalHeader = styled(ModalHeader)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1 0 calc(50% - 5px);\n  flex-direction: column;\n  flex-basis: auto;\n  text-align: left;\n  height: ", ";\n  img {\n    width: 100%;\n    height: ", ";\n    object-fit: cover;\n    border-radius: 8px 8px 0 0;\n  }\n"], ["\n  flex: 1 0 calc(50% - 5px);\n  flex-direction: column;\n  flex-basis: auto;\n  text-align: left;\n  height: ", ";\n  img {\n    width: 100%;\n    height: ", ";\n    object-fit: cover;\n    border-radius: 8px 8px 0 0;\n  }\n"])), function (props) { return (props.$height ? "".concat(props.$height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24), "px") : ''); }, function (props) { return "".concat(props.$height, "px"); });
+export var ImageContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: ", ";\n\n  #imgWithFallbackLoadingIndicator {\n    position: absolute;\n    left: 50%;\n    top: 0;\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: ", ";\n\n  #imgWithFallbackLoadingIndicator {\n    position: absolute;\n    left: 50%;\n    top: 0;\n  }\n"])), function (props) { return "".concat(props.$height, "px"); });
+export var ImageOverlay = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  content: '';\n  top: 0;\n  left: 0;\n  height: ", ";\n  width: 100%;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 8px 8px 0 0;\n\n  :after {\n    position: absolute;\n    height: ", ";\n    border-radius: 8px 8px 0 0;\n    content: '';\n    top: 0;\n    left: 0;\n    width: 100%;\n    background: #888888;\n    mix-blend-mode: saturation;\n  }\n"], ["\n  position: absolute;\n  content: '';\n  top: 0;\n  left: 0;\n  height: ", ";\n  width: 100%;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 8px 8px 0 0;\n\n  :after {\n    position: absolute;\n    height: ", ";\n    border-radius: 8px 8px 0 0;\n    content: '';\n    top: 0;\n    left: 0;\n    width: 100%;\n    background: #888888;\n    mix-blend-mode: saturation;\n  }\n"])), function (props) { return "".concat(props.$height, "px"); }, function (props) { return "".concat(props.$height, "px"); });
+export var Column = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n"])));
+export var ModalTitleSection = styled.section(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n"], ["\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n"])));
+export var ModalHeaderActionsWithImage = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n"])), function (props) { return (!props.hasBackButton ? 'row-reverse' : 'row'); });
+export var ModalHeaderActions = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  margin: -12px -12px 0 0;\n"], ["\n  display: flex;\n  margin: -12px -12px 0 0;\n"])));
+export var FlexContainer = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n"], ["\n  display: flex;\n  width: 100%;\n"])));
+export var ModalHoverModifier = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  button:hover {\n    cursor: help !important;\n  }\n"], ["\n  button:hover {\n    cursor: help !important;\n  }\n"])));
+export var CloseButtonWrapper = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  button {\n    ", "\n  }\n"], ["\n  button {\n    ", "\n  }\n"])), function (props) {
+    return props.hasImage
+        ? css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n            margin: -12px -12px 0 0 !important;\n          "], ["\n            margin: -12px -12px 0 0 !important;\n          "]))) : css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n            left: unset;\n          "], ["\n            left: unset;\n          "])));
+});
+export var BackButtonWrapper = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n"], ["\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n"])));
+export var ModalTitle = styled.h5(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  margin: 0;\n  font-size: ", ";\n  font-weight: bold;\n"], ["\n  margin: 0;\n  font-size: ", ";\n  font-weight: bold;\n"])), function (props) { return props.fontSize || '1.25em'; });
+export var ModalNoteSection = styled.section(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  font-size: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  display: flex;\n  flex-direction: row;\n  padding: ", ";\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: calc(100% - 32px);\n    margin-left: 8px;\n    color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  font-size: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  display: flex;\n  flex-direction: row;\n  padding: ", ";\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: calc(100% - 32px);\n    margin-left: 8px;\n    color: ", ";\n  }\n"])), function (props) { return getBackgroundColor(props.state); }, function (props) { return ((props === null || props === void 0 ? void 0 : props.size) === 'small' ? "16px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '20px' : '18px'); }, function (props) { return ((props === null || props === void 0 ? void 0 : props.size) === 'small' ? "0px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '16px' : '4px'); }, function (props) { return ((props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '24px' : '16px'); }, function (props) { return ((props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '16px' : '12px'); }, function (props) { return getNoteMessageColor(props.state); });
+export var ModalBody = styled.section(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  flex: 1 1 auto;\n  overflow: ", ";\n  margin: ", ";\n\n  border-top: ", ";\n  border-bottom: ", ";\n\n  ", "\n"], ["\n  flex: 1 1 auto;\n  overflow: ", ";\n  margin: ", ";\n\n  border-top: ", ";\n  border-bottom: ", ";\n\n  ", "\n"])), function (props) { var _a; return (_a = props === null || props === void 0 ? void 0 : props.overflow) !== null && _a !== void 0 ? _a : 'unset'; }, function (props) { return ((props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px 0" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '16px 0' : '12px 0'); }, function (props) { return ((props === null || props === void 0 ? void 0 : props.hasContentBorders) ? "1px solid ".concat(COLORS.neutral_100) : 'none'); }, function (props) { return ((props === null || props === void 0 ? void 0 : props.hasContentBorders) ? "1px solid ".concat(COLORS.neutral_100) : 'none'); }, scrollBarStyling(Size.Small));
+export var ModalFooter = styled.section(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ", ";\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ", ";\n    gap: ", ";\n  }\n\n  .footer-action.note {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ", ";\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ", ";\n    gap: ", ";\n  }\n\n  .footer-action.note {\n    color: ", ";\n  }\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.size) === 'large' ? "16px" : '8px'); }, function (props) { return ((props === null || props === void 0 ? void 0 : props.size) === 'small' ? "16px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '20px' : '18px'); }, function (props) { return ((props === null || props === void 0 ? void 0 : props.size) === Size.Large ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === Size.Small ? '4px' : '6px'); }, COLORS.neutral_600);
+export var getBackgroundColor = function (state) {
+    switch (state) {
+        case 'positive':
+            return COLORS.correct_100;
+        case 'warning':
+            return COLORS.warning_100;
+        case 'critical':
+            return COLORS.critical_100;
+        default:
+            return COLORS.primary_100;
+    }
+};
+export var getNoteMessageColor = function (state) {
+    switch (state) {
+        case 'positive':
+            return COLORS.correct_700;
+        case 'warning':
+            return COLORS.warning_700;
+        case 'critical':
+            return COLORS.critical_700;
+        default:
+            return COLORS.primary_700;
+    }
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;

package/dist/Modals/ModalTypes.d.ts

@@ -14,7 +14,7 @@ export interface ModalHeaderDropdownButton extends Omit<IconDropdownButtonProps,
 export interface ModalHeaderToggleButton extends ToggleButtonProps {
     componentType: 'toggle';
 }
-export type ModalHeaderButtons = ModalHeaderIconButton | ModalHeaderDropdownButton | ModalHeaderToggleButton;
+export declare type ModalHeaderButtons = ModalHeaderIconButton | ModalHeaderDropdownButton | ModalHeaderToggleButton;
 export interface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {
     action?: (() => void) | ((e: any) => void);
     text: string;
@@ -30,4 +30,4 @@ export interface LeftFooterHyperlink extends HyperlinkProps, LeftFooterActionBas
 export interface LeftFooterButton extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'>, LeftFooterActionBase {
     text: string;
 }
-export type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;
+export declare type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;

package/dist/Modals/ModalTypes.js

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

package/dist/Modals/index.js

@@ -1,7 +1,6 @@
-import Modal, { ModalCloseButton } from './Modal';
-import ModalContainer from './ModalContainer';
-import { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';
-import ModalDialog from './ModalDialog';
-import ModalContent from './ModalContent';
-export { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog, ModalContent };
-//# sourceMappingURL=index.js.map
+import Modal, { ModalCloseButton } from './Modal';
+import ModalContainer from './ModalContainer';
+import { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';
+import ModalDialog from './ModalDialog';
+import ModalContent from './ModalContent';
+export { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog, ModalContent };

package/dist/NavItem/NavItem.d.ts

@@ -1,9 +1,9 @@
 import { StyledComponentProps } from 'styled-components';
 import React from 'react';
-export type StyledComponentPropsWithAs<C extends string | React.ComponentType<any>, T extends object, O extends object, A extends keyof any, AsC extends string | React.ComponentType<any> = C, FAsC extends string | React.ComponentType<any> = C> = StyledComponentProps<C, T, O, A, FAsC> & {
+export declare type StyledComponentPropsWithAs<C extends string | React.ComponentType<any>, T extends object, O extends object, A extends keyof any, AsC extends string | React.ComponentType<any> = C, FAsC extends string | React.ComponentType<any> = C> = StyledComponentProps<C, T, O, A, FAsC> & {
     as?: AsC | undefined;
     forwardedAs?: FAsC | undefined;
 };
 export declare const NavItemDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const NavItem: (props: StyledComponentPropsWithAs<string | React.ComponentType<any>, any, {}, never, string | React.ComponentType<any>, "div">) => JSX.Element;
+declare const NavItem: (props: StyledComponentPropsWithAs<string | React.ComponentType<any>, any, {}, never, string | React.ComponentType<any>, "div">) => React.JSX.Element;
 export default NavItem;

package/dist/NavItem/NavItem.js

@@ -1,18 +1,26 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-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';
-import React from 'react';
-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 var 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"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), BREAKPOINTS.LARGE, Z_INDEXES.active, COLORS.neutral_20, COLORS.neutral_800, COLORS.primary_600, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_100, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, focusStyles);
-var NavItem = function NavItem(props) {
-  return /*#__PURE__*/_jsx(NavItemDiv, _objectSpread({}, props));
-};
-export default NavItem;
-//# sourceMappingURL=NavItem.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import styled from 'styled-components';
+import React from 'react';
+import { BREAKPOINTS, COLORS, focusStyles } from '../styles';
+import { ComponentMStyling, ComponentTextStyle } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
+export var NavItemDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), BREAKPOINTS.LARGE, Z_INDEXES.active, COLORS.neutral_20, COLORS.neutral_800, COLORS.primary_600, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_100, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, focusStyles);
+var NavItem = function (props) {
+    return (React.createElement(NavItemDiv, __assign({}, props)));
+};
+export default NavItem;
+var templateObject_1;

package/dist/NavItem/NestedNavItem.d.ts

@@ -1,13 +1,31 @@
 import * as React from 'react';
 import { Size } from '../types';
 import { DropdownItem } from '../Dropdown/DropdownContent';
-export interface MenuItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onMouseDown' | 'onClick'> {
+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<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+declare const NestedNavItem: React.ForwardRefExoticComponent<NestedNavItemProps & React.RefAttributes<HTMLButtonElement>>;
 export default NestedNavItem;

package/dist/NavItem/NestedNavItem.js

@@ -1,28 +1,18 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _pt from "prop-types";
-var _excluded = ["active", "item", "onClickHandler", "size", "className", "tabIndex", "iconRight", "id"];
-import * as React from 'react';
-import { Size } from '../types';
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
-var NestedNavItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var active = _ref.active,
-    item = _ref.item,
-    onClickHandler = _ref.onClickHandler,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? Size.Medium : _ref$size,
-    className = _ref.className,
-    tabIndex = _ref.tabIndex,
-    iconRight = _ref.iconRight,
-    id = _ref.id,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx(_Fragment, {});
-});
-NestedNavItem.propTypes = {
-  onClickHandler: _pt.func.isRequired,
-  active: _pt.bool.isRequired,
-  id: _pt.string.isRequired,
-  iconRight: _pt.element
-};
-export default NestedNavItem;
-//# sourceMappingURL=NestedNavItem.js.map
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { Size } from '../types';
+var NestedNavItem = React.forwardRef(function (_a, ref) {
+    var active = _a.active, item = _a.item, onClickHandler = _a.onClickHandler, _b = _a.size, size = _b === void 0 ? Size.Medium : _b, className = _a.className, tabIndex = _a.tabIndex, iconRight = _a.iconRight, id = _a.id, rest = __rest(_a, ["active", "item", "onClickHandler", "size", "className", "tabIndex", "iconRight", "id"]);
+    return (React.createElement(React.Fragment, null));
+});
+export default NestedNavItem;

package/dist/NavItem/index.js

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

package/dist/NotificationDot/NotificationDot.d.ts

@@ -1,8 +1,18 @@
 import * as React from 'react';
 import { Size } from '../types';
 export interface NotificationProps {
+    /**
+   * Optional. The size of the notification dot. It can be 'Small', 'Medium', or 'Large'.
+   * Defaults to 'Medium' if not specified.
+   */
     size?: Size.Small | Size.Medium | Size.Large;
+    /**
+   * Required. The variant of the notification dot. It can be 'critical' or 'positive'.
+   */
     variant: 'critical' | 'positive';
+    /**
+   * Optional. The testId for the notification dot. Useful for testing purposes.
+   */
     testId?: string;
 }
 declare const NotificationDot: React.FunctionComponent<NotificationProps>;

package/dist/NotificationDot/NotificationDot.js

@@ -1,47 +1,17 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _templateObject, _templateObject2;
-import * as React from 'react';
-import styled from 'styled-components';
-import { Size } from '../types';
-import { COLORS } from '..';
-import { jsx as _jsx } from "react/jsx-runtime";
-var ContentWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), function (props) {
-  return props.size === Size.Small ? '16px' : props.size === Size.Large ? '24px' : '20px';
-}, function (props) {
-  return props.size === Size.Small ? '16px' : props.size === Size.Large ? '24px' : '20px';
-}, function (props) {
-  return props.size === Size.Small ? '3px' : props.size === Size.Large ? '4px' : '4px';
-});
-var Content = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  border: ", ";\n  box-sizing: border-box;\n"])), function (props) {
-  return props.variant === 'positive' ? COLORS.correct_500 : COLORS.critical_500;
-}, function (props) {
-  return props.size === Size.Small ? '10px' : props.size === Size.Large ? '16px' : '12px';
-}, function (props) {
-  return props.size === Size.Small ? '10px' : props.size === Size.Large ? '16px' : '12px';
-}, function (props) {
-  return props.size === Size.Small ? '10px' : props.size === Size.Large ? '16px' : '12px';
-}, function (props) {
-  return props.size === Size.Small ? '2px solid ' + COLORS.white : props.size === Size.Large ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white;
-});
-var NotificationDot = function NotificationDot(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? Size.Medium : _ref$size,
-    variant = _ref.variant,
-    testId = _ref.testId;
-  return /*#__PURE__*/_jsx(ContentWrapper, {
-    size: size,
-    variant: variant,
-    children: /*#__PURE__*/_jsx(Content, {
-      size: size,
-      variant: variant,
-      "data-testid": testId
-    })
-  });
-};
-NotificationDot.propTypes = {
-  variant: _pt.oneOf(['critical', 'positive']).isRequired,
-  testId: _pt.string
-};
-export default NotificationDot;
-//# sourceMappingURL=NotificationDot.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { Size } from '../types';
+import { COLORS } from '..';
+var ContentWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"], ["\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), function (props) { return props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px'); }, function (props) { return props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px'); }, function (props) { return props.size === Size.Small ? '3px' : (props.size === Size.Large ? '4px' : '4px'); });
+var Content = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  border: ", ";\n  box-sizing: border-box;\n"], ["\n  background-color: ", ";\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  border: ", ";\n  box-sizing: border-box;\n"])), function (props) { return props.variant === 'positive' ? COLORS.correct_500 : COLORS.critical_500; }, function (props) { return props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px'); }, function (props) { return props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px'); }, function (props) { return props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px'); }, function (props) { return props.size === Size.Small ? '2px solid ' + COLORS.white : (props.size === Size.Large ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white); });
+var NotificationDot = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? Size.Medium : _b, variant = _a.variant, testId = _a.testId;
+    return (React.createElement(ContentWrapper, { size: size, variant: variant },
+        React.createElement(Content, { size: size, variant: variant, "data-testid": testId })));
+};
+export default NotificationDot;
+var templateObject_1, templateObject_2;

package/dist/NotificationDot/index.js

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

package/dist/Paginator/Paginator.d.ts

@@ -1,9 +1,23 @@
-/// <reference types="react" />
-type PaginatorProps = {
+import * as React from 'react';
+export interface PaginatorProps {
+    /**
+     * Required. The total number of pages.
+     */
     pageCount: number;
+    /**
+     * Required. The current active page.
+     */
     currentPage: number;
+    /**
+     * Required. The base URL to which the page number will be appended.
+     */
     baseUrl: string;
+    /**
+     * Optional. A callback function that will be called when the page changes.
+     * It receives the new page number as its argument.
+     * If the function returns false, the page change will be prevented.
+     */
     onPageChange?: (page: number) => boolean | void;
-};
-declare const Paginator: ({ pageCount, currentPage, baseUrl, onPageChange }: PaginatorProps) => JSX.Element | null;
+}
+declare const Paginator: ({ pageCount, currentPage, baseUrl, onPageChange }: PaginatorProps) => React.JSX.Element | null;
 export default Paginator;