@laerdal/life-react-components 1.9.8-dev.2 → 1.9.8-dev.20

package/dist/Modals/ModalStyles.cjs.map

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

package/dist/Modals/ModalStyles.d.ts

@@ -1,53 +1,53 @@
-import { Size } from '../types';
-/**
- * Modal styles
- */
-export declare const ModalHeader: import("styled-components").StyledComponent<"section", any, {
-    marginBottom?: string | undefined;
-}, never>;
-export declare const StyledModalHeader: import("styled-components").StyledComponent<"section", any, {
-    marginBottom?: string | undefined;
-} & {
-    marginBottom?: string | undefined;
-    size?: string | undefined;
-    $height?: number | undefined;
-}, never>;
-export declare const ImageContainer: import("styled-components").StyledComponent<"div", any, {
-    $height: number;
-}, never>;
-export declare const ImageOverlay: import("styled-components").StyledComponent<"div", any, {
-    $height: number;
-}, never>;
-export declare const Column: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ModalTitleSection: import("styled-components").StyledComponent<"section", any, {}, never>;
-export declare const ModalHeaderActionsWithImage: import("styled-components").StyledComponent<"div", any, {
-    hasBackButton?: boolean | undefined;
-}, never>;
-export declare const ModalHeaderActions: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FlexContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ModalHoverModifier: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CloseButtonWrapper: import("styled-components").StyledComponent<"div", any, {
-    size?: Size | undefined;
-    hasImage?: boolean | undefined;
-}, never>;
-export declare const BackButtonWrapper: import("styled-components").StyledComponent<"div", any, {
-    size?: Size | undefined;
-    hasImage?: boolean | undefined;
-}, never>;
-export declare const ModalTitle: import("styled-components").StyledComponent<"h5", any, {
-    fontSize?: string | undefined;
-}, never>;
-export declare const ModalNoteSection: import("styled-components").StyledComponent<"section", any, {
-    state: string;
-    size?: string | undefined;
-}, never>;
-export declare const ModalBody: import("styled-components").StyledComponent<"section", any, {
-    size?: string | undefined;
-    overflow?: string | undefined;
-    hasContentBorders?: boolean | undefined;
-}, never>;
-export declare const ModalFooter: import("styled-components").StyledComponent<"section", any, {
-    size?: Size | undefined;
-}, never>;
-export declare const getBackgroundColor: (state: string) => string;
-export declare const getNoteMessageColor: (state: string) => string;
+import { Size } from '../types';
+/**
+ * Modal styles
+ */
+export declare const ModalHeader: import("styled-components").StyledComponent<"section", any, {
+    marginBottom?: string | undefined;
+}, never>;
+export declare const StyledModalHeader: import("styled-components").StyledComponent<"section", any, {
+    marginBottom?: string | undefined;
+} & {
+    marginBottom?: string | undefined;
+    size?: string | undefined;
+    $height?: number | undefined;
+}, never>;
+export declare const ImageContainer: import("styled-components").StyledComponent<"div", any, {
+    $height: number;
+}, never>;
+export declare const ImageOverlay: import("styled-components").StyledComponent<"div", any, {
+    $height: number;
+}, never>;
+export declare const Column: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ModalTitleSection: import("styled-components").StyledComponent<"section", any, {}, never>;
+export declare const ModalHeaderActionsWithImage: import("styled-components").StyledComponent<"div", any, {
+    hasBackButton?: boolean | undefined;
+}, never>;
+export declare const ModalHeaderActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FlexContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ModalHoverModifier: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CloseButtonWrapper: import("styled-components").StyledComponent<"div", any, {
+    size?: Size | undefined;
+    hasImage?: boolean | undefined;
+}, never>;
+export declare const BackButtonWrapper: import("styled-components").StyledComponent<"div", any, {
+    size?: Size | undefined;
+    hasImage?: boolean | undefined;
+}, never>;
+export declare const ModalTitle: import("styled-components").StyledComponent<"h5", any, {
+    fontSize?: string | undefined;
+}, never>;
+export declare const ModalNoteSection: import("styled-components").StyledComponent<"section", any, {
+    state: string;
+    size?: string | undefined;
+}, never>;
+export declare const ModalBody: import("styled-components").StyledComponent<"section", any, {
+    size?: string | undefined;
+    overflow?: string | undefined;
+    hasContentBorders?: boolean | undefined;
+}, never>;
+export declare const ModalFooter: import("styled-components").StyledComponent<"section", any, {
+    size?: Size | undefined;
+}, never>;
+export declare const getBackgroundColor: (state: string) => string;
+export declare const getNoteMessageColor: (state: string) => string;

package/dist/Modals/ModalStyles.js

@@ -6,8 +6,8 @@ import styled, { css } from 'styled-components';
 import { COLORS } from '..';
 import { scrollBarStyling } from '../styles';
 import { Size } from '../types';
-/**
- * Modal styles
+/**
+ * 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) {

package/dist/Modals/ModalStyles.js.map

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

package/dist/Modals/ModalTypes.d.ts

@@ -1,23 +1,23 @@
-import { ButtonProps } from '../Button/Button';
-import { HyperlinkProps } from '../HyperLink/HyperLink';
-import { IconButtonProps } from '../Button/Iconbutton';
-import React from 'react';
-export interface IconButtonAction extends Pick<IconButtonProps, 'variant' | 'id' | 'shape' | 'disabled' | 'action'> {
-    icon: React.ReactNode;
-}
-export interface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {
-    action?: (() => void) | ((e: any) => void);
-    text: string;
-}
-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 {
-    text: string;
-}
-export declare type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;
+import { ButtonProps } from '../Button/Button';
+import { HyperlinkProps } from '../HyperLink/HyperLink';
+import { IconButtonProps } from '../Button/Iconbutton';
+import React from 'react';
+export interface IconButtonAction extends Pick<IconButtonProps, 'variant' | 'id' | 'shape' | 'disabled' | 'action'> {
+    icon: React.ReactNode;
+}
+export interface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {
+    action?: (() => void) | ((e: any) => void);
+    text: string;
+}
+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 {
+    text: string;
+}
+export declare type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;

package/dist/Modals/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import Modal, { ModalCloseButton } from './Modal';\nimport ModalContainer from './ModalContainer';\nimport { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';\nimport ModalDialog from './ModalDialog';\nimport ModalContent from './ModalContent';\n\nexport { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog, ModalContent };\n\nexport type {LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton, IconButtonAction} from './ModalTypes';\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/Modals/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import Modal, { ModalCloseButton } from './Modal';\r\nimport ModalContainer from './ModalContainer';\r\nimport { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';\r\nimport ModalDialog from './ModalDialog';\r\nimport ModalContent from './ModalContent';\r\n\r\nexport { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog, ModalContent };\r\n\r\nexport type {LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton, IconButtonAction} from './ModalTypes';\r\n"],"file":"index.cjs"}

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 from './ModalContent';
-export { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog, ModalContent };
-export type { LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton, IconButtonAction } from './ModalTypes';
+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 };
+export type { LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton, IconButtonAction } from './ModalTypes';

package/dist/Modals/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/index.tsx"],"names":["Modal","ModalCloseButton","ModalContainer","ModalHeader","ModalTitle","ModalBody","ModalFooter","ModalDialog","ModalContent"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,gBAAhB,QAAwC,SAAxC;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AACA,SAASC,WAAT,EAAsBC,UAAtB,EAAkCC,SAAlC,EAA6CC,WAA7C,QAAgE,eAAhE;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AAEA,SAASR,KAAT,EAAgBE,cAAhB,EAAgCC,WAAhC,EAA6CE,SAA7C,EAAwDC,WAAxD,EAAqEF,UAArE,EAAiFH,gBAAjF,EAAmGM,WAAnG,EAAgHC,YAAhH","sourcesContent":["import Modal, { ModalCloseButton } from './Modal';\nimport ModalContainer from './ModalContainer';\nimport { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';\nimport ModalDialog from './ModalDialog';\nimport ModalContent from './ModalContent';\n\nexport { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog, ModalContent };\n\nexport type {LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton, IconButtonAction} from './ModalTypes';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/Modals/index.tsx"],"names":["Modal","ModalCloseButton","ModalContainer","ModalHeader","ModalTitle","ModalBody","ModalFooter","ModalDialog","ModalContent"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,gBAAhB,QAAwC,SAAxC;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AACA,SAASC,WAAT,EAAsBC,UAAtB,EAAkCC,SAAlC,EAA6CC,WAA7C,QAAgE,eAAhE;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AAEA,SAASR,KAAT,EAAgBE,cAAhB,EAAgCC,WAAhC,EAA6CE,SAA7C,EAAwDC,WAAxD,EAAqEF,UAArE,EAAiFH,gBAAjF,EAAmGM,WAAnG,EAAgHC,YAAhH","sourcesContent":["import Modal, { ModalCloseButton } from './Modal';\r\nimport ModalContainer from './ModalContainer';\r\nimport { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';\r\nimport ModalDialog from './ModalDialog';\r\nimport ModalContent from './ModalContent';\r\n\r\nexport { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog, ModalContent };\r\n\r\nexport type {LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton, IconButtonAction} from './ModalTypes';\r\n"],"file":"index.js"}

package/dist/NavItem/NavItem.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/NavItem/NavItem.tsx"],"names":["NavItem","styled","div","ComponentTextStyle","Regular","COLORS","neutral_600","Z_INDEXES","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","focusStyles"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,04BACT,mCAAkBC,+BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CADS,EAwBEC,oBAAUC,MAxBZ,EAyBWH,eAAOI,UAzBlB,EA0BAJ,eAAOK,WA1BP,EA4BaL,eAAOM,WA5BpB,EAiCAN,eAAOO,WAjCP,EAkCWP,eAAOQ,WAlClB,EAoCaR,eAAOQ,WApCpB,EAyCEN,oBAAUO,KAzCZ,EA0CWT,eAAOU,UA1ClB,EA2CAV,eAAOW,WA3CP,EA6CaX,eAAOM,WA7CpB,EAkDPM,mBAlDO,CAAb;;eAsDejB,O","sourcesContent":["import styled from 'styled-components';\n\nimport {COLORS, focusStyles} from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst NavItem = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\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    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n    &:after {\n      background-color: ${COLORS.neutral_100};\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    ${focusStyles}\n  }\n`;\n\nexport default NavItem;\n"],"file":"NavItem.cjs"}
+{"version":3,"sources":["../../src/NavItem/NavItem.tsx"],"names":["NavItem","styled","div","ComponentTextStyle","Regular","COLORS","neutral_600","Z_INDEXES","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","focusStyles"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,04BACT,mCAAkBC,+BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CADS,EAwBEC,oBAAUC,MAxBZ,EAyBWH,eAAOI,UAzBlB,EA0BAJ,eAAOK,WA1BP,EA4BaL,eAAOM,WA5BpB,EAiCAN,eAAOO,WAjCP,EAkCWP,eAAOQ,WAlClB,EAoCaR,eAAOQ,WApCpB,EAyCEN,oBAAUO,KAzCZ,EA0CWT,eAAOU,UA1ClB,EA2CAV,eAAOW,WA3CP,EA6CaX,eAAOM,WA7CpB,EAkDPM,mBAlDO,CAAb;;eAsDejB,O","sourcesContent":["import styled from 'styled-components';\r\n\r\nimport {COLORS, focusStyles} from '../styles';\r\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\nconst NavItem = styled.div`\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n  margin: 0;\r\n  padding: 0 21px 0 21px;\r\n  height: 64px;\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    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: 3px;\r\n    background-color: transparent;\r\n  }\r\n\r\n  &.active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background-color: ${COLORS.neutral_20};\r\n    color: ${COLORS.neutral_800};\r\n    &:after {\r\n      background-color: ${COLORS.primary_600};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${COLORS.neutral_300};\r\n    background-color: ${COLORS.neutral_100};\r\n    &:after {\r\n      background-color: ${COLORS.neutral_100};\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    background-color: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n    &:after {\r\n      background-color: ${COLORS.primary_600};\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled) {\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport default NavItem;\r\n"],"file":"NavItem.cjs"}

package/dist/NavItem/NavItem.d.ts

@@ -1,2 +1,2 @@
-declare const NavItem: import("styled-components").StyledComponent<"div", any, {}, never>;
-export default NavItem;
+declare const NavItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default NavItem;

package/dist/NavItem/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/NavItem/NavItem.tsx"],"names":["styled","COLORS","focusStyles","ComponentMStyling","ComponentTextStyle","Z_INDEXES","NavItem","div","Regular","neutral_600","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700"],"mappings":";;;;AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAAQC,MAAR,EAAgBC,WAAhB,QAAkC,WAAlC;AACA,SAASC,iBAAT,EAA4BC,kBAA5B,QAAsD,sBAAtD;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA,IAAMC,OAAO,GAAGN,MAAM,CAACO,GAAV,43BACTJ,iBAAiB,CAACC,kBAAkB,CAACI,OAApB,EAA6BP,MAAM,CAACQ,WAApC,CADR,EAwBEJ,SAAS,CAACK,MAxBZ,EAyBWT,MAAM,CAACU,UAzBlB,EA0BAV,MAAM,CAACW,WA1BP,EA4BaX,MAAM,CAACY,WA5BpB,EAiCAZ,MAAM,CAACa,WAjCP,EAkCWb,MAAM,CAACc,WAlClB,EAoCad,MAAM,CAACc,WApCpB,EAyCEV,SAAS,CAACW,KAzCZ,EA0CWf,MAAM,CAACgB,UA1ClB,EA2CAhB,MAAM,CAACiB,WA3CP,EA6CajB,MAAM,CAACY,WA7CpB,EAkDPX,WAlDO,CAAb;AAsDA,eAAeI,OAAf","sourcesContent":["import styled from 'styled-components';\n\nimport {COLORS, focusStyles} from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst NavItem = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\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    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n    &:after {\n      background-color: ${COLORS.neutral_100};\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    ${focusStyles}\n  }\n`;\n\nexport default NavItem;\n"],"file":"NavItem.js"}
+{"version":3,"sources":["../../src/NavItem/NavItem.tsx"],"names":["styled","COLORS","focusStyles","ComponentMStyling","ComponentTextStyle","Z_INDEXES","NavItem","div","Regular","neutral_600","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700"],"mappings":";;;;AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAAQC,MAAR,EAAgBC,WAAhB,QAAkC,WAAlC;AACA,SAASC,iBAAT,EAA4BC,kBAA5B,QAAsD,sBAAtD;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA,IAAMC,OAAO,GAAGN,MAAM,CAACO,GAAV,43BACTJ,iBAAiB,CAACC,kBAAkB,CAACI,OAApB,EAA6BP,MAAM,CAACQ,WAApC,CADR,EAwBEJ,SAAS,CAACK,MAxBZ,EAyBWT,MAAM,CAACU,UAzBlB,EA0BAV,MAAM,CAACW,WA1BP,EA4BaX,MAAM,CAACY,WA5BpB,EAiCAZ,MAAM,CAACa,WAjCP,EAkCWb,MAAM,CAACc,WAlClB,EAoCad,MAAM,CAACc,WApCpB,EAyCEV,SAAS,CAACW,KAzCZ,EA0CWf,MAAM,CAACgB,UA1ClB,EA2CAhB,MAAM,CAACiB,WA3CP,EA6CajB,MAAM,CAACY,WA7CpB,EAkDPX,WAlDO,CAAb;AAsDA,eAAeI,OAAf","sourcesContent":["import styled from 'styled-components';\r\n\r\nimport {COLORS, focusStyles} from '../styles';\r\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\nconst NavItem = styled.div`\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n  margin: 0;\r\n  padding: 0 21px 0 21px;\r\n  height: 64px;\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    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: 3px;\r\n    background-color: transparent;\r\n  }\r\n\r\n  &.active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background-color: ${COLORS.neutral_20};\r\n    color: ${COLORS.neutral_800};\r\n    &:after {\r\n      background-color: ${COLORS.primary_600};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${COLORS.neutral_300};\r\n    background-color: ${COLORS.neutral_100};\r\n    &:after {\r\n      background-color: ${COLORS.neutral_100};\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    background-color: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n    &:after {\r\n      background-color: ${COLORS.primary_600};\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled) {\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport default NavItem;\r\n"],"file":"NavItem.js"}

package/dist/NavItem/index.cjs.map

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

package/dist/NavItem/index.d.ts

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

package/dist/NavItem/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/NavItem/index.ts"],"names":["default","NavItem"],"mappings":"AAAA,SAASA,OAAO,IAAIC,OAApB,QAAmC,WAAnC","sourcesContent":["export { default as NavItem } from './NavItem';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/NavItem/index.ts"],"names":["default","NavItem"],"mappings":"AAAA,SAASA,OAAO,IAAIC,OAApB,QAAmC,WAAnC","sourcesContent":["export { default as NavItem } from './NavItem';\r\n"],"file":"index.js"}

package/dist/NotificationDot/NotificationDot.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/NotificationDot/NotificationDot.tsx"],"names":["ContentWrapper","styled","div","props","size","Size","Small","Large","Content","variant","COLORS","correct_500","critical_500","white","NotificationDot","Medium","testId"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;AAQA,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,oKACT,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CADS,EAER,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAFQ,EAGP,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,KAA5B,GAAqCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,KAA5B,GAAoC,KAApF;AAAA,CAHO,CAApB;;AAOA,IAAMC,OAAO,GAAGP,0BAAOC,GAAV,wNACS,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACM,OAAN,KAAkB,UAAlB,GAA+BC,SAAOC,WAAtC,GAAoDD,SAAOE,YAAtE;AAAA,CADT,EAED,UAACT,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAFC,EAGF,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAHE,EAIM,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAJN,EAKD,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,eAAeI,SAAOG,KAAlD,GAA2DV,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,eAAeG,SAAOG,KAAlD,GAA0D,eAAeH,SAAOG,KAAtJ;AAAA,CALC,CAAb;;AASA,IAAMC,eAA2D,GAAG,SAA9DA,eAA8D,OAA2C;AAAA,uBAAzCV,IAAyC;AAAA,MAAzCA,IAAyC,0BAAlCC,YAAKU,MAA6B;AAAA,MAArBN,OAAqB,QAArBA,OAAqB;AAAA,MAAZO,MAAY,QAAZA,MAAY;AAC7G,sBACE,qBAAC,cAAD;AAAgB,IAAA,IAAI,EAAEZ,IAAtB;AAA4B,IAAA,OAAO,EAAEK,OAArC;AAAA,2BACE,qBAAC,OAAD;AAAS,MAAA,IAAI,EAAEL,IAAf;AAAqB,MAAA,OAAO,EAAEK,OAA9B;AAAuC,qBAAaO;AAApD;AADF,IADF;AAKD,CAND;;;AApBEP,EAAAA,O,4BAAS,U,EAAa,U;AACtBO,EAAAA,M;;eA2BaF,e","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Size } from '../types';\nimport {COLORS} from '..';\n\nexport interface NotificationProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant: 'critical' | 'positive';\n  testId?: string;\n}\n\nconst ContentWrapper = styled.div<NotificationProps>`\n  width: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\n  height: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\n  padding: ${(props) => props.size === Size.Small ? '3px' : (props.size === Size.Large ? '4px' : '4px')};\n  box-sizing: border-box;\n`;\n\nconst Content = styled.div<NotificationProps>`\n  background-color: ${(props) => props.variant === 'positive' ? COLORS.correct_500 : COLORS.critical_500};\n  height: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  width: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  border-radius: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  border: ${(props) => props.size === Size.Small ? '2px solid ' + COLORS.white : (props.size === Size.Large ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white)};\n  box-sizing: border-box;\n`;\n\nconst NotificationDot: React.FunctionComponent<NotificationProps> = ({size = Size.Medium, variant, testId}) => {\n  return (\n    <ContentWrapper size={size} variant={variant}>\n      <Content size={size} variant={variant} data-testid={testId}/>\n    </ContentWrapper>\n  );\n};\n\nexport default NotificationDot;\n"],"file":"NotificationDot.cjs"}
+{"version":3,"sources":["../../src/NotificationDot/NotificationDot.tsx"],"names":["ContentWrapper","styled","div","props","size","Size","Small","Large","Content","variant","COLORS","correct_500","critical_500","white","NotificationDot","Medium","testId"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;AAQA,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,oKACT,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CADS,EAER,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAFQ,EAGP,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,KAA5B,GAAqCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,KAA5B,GAAoC,KAApF;AAAA,CAHO,CAApB;;AAOA,IAAMC,OAAO,GAAGP,0BAAOC,GAAV,wNACS,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACM,OAAN,KAAkB,UAAlB,GAA+BC,SAAOC,WAAtC,GAAoDD,SAAOE,YAAtE;AAAA,CADT,EAED,UAACT,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAFC,EAGF,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAHE,EAIM,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,MAA5B,GAAsCH,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAJN,EAKD,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeC,YAAKC,KAApB,GAA4B,eAAeI,SAAOG,KAAlD,GAA2DV,KAAK,CAACC,IAAN,KAAeC,YAAKE,KAApB,GAA4B,eAAeG,SAAOG,KAAlD,GAA0D,eAAeH,SAAOG,KAAtJ;AAAA,CALC,CAAb;;AASA,IAAMC,eAA2D,GAAG,SAA9DA,eAA8D,OAA2C;AAAA,uBAAzCV,IAAyC;AAAA,MAAzCA,IAAyC,0BAAlCC,YAAKU,MAA6B;AAAA,MAArBN,OAAqB,QAArBA,OAAqB;AAAA,MAAZO,MAAY,QAAZA,MAAY;AAC7G,sBACE,qBAAC,cAAD;AAAgB,IAAA,IAAI,EAAEZ,IAAtB;AAA4B,IAAA,OAAO,EAAEK,OAArC;AAAA,2BACE,qBAAC,OAAD;AAAS,MAAA,IAAI,EAAEL,IAAf;AAAqB,MAAA,OAAO,EAAEK,OAA9B;AAAuC,qBAAaO;AAApD;AADF,IADF;AAKD,CAND;;;AApBEP,EAAAA,O,4BAAS,U,EAAa,U;AACtBO,EAAAA,M;;eA2BaF,e","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Size } from '../types';\r\nimport {COLORS} from '..';\r\n\r\nexport interface NotificationProps {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  variant: 'critical' | 'positive';\r\n  testId?: string;\r\n}\r\n\r\nconst ContentWrapper = styled.div<NotificationProps>`\r\n  width: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\r\n  height: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\r\n  padding: ${(props) => props.size === Size.Small ? '3px' : (props.size === Size.Large ? '4px' : '4px')};\r\n  box-sizing: border-box;\r\n`;\r\n\r\nconst Content = styled.div<NotificationProps>`\r\n  background-color: ${(props) => props.variant === 'positive' ? COLORS.correct_500 : COLORS.critical_500};\r\n  height: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\r\n  width: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\r\n  border-radius: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\r\n  border: ${(props) => props.size === Size.Small ? '2px solid ' + COLORS.white : (props.size === Size.Large ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white)};\r\n  box-sizing: border-box;\r\n`;\r\n\r\nconst NotificationDot: React.FunctionComponent<NotificationProps> = ({size = Size.Medium, variant, testId}) => {\r\n  return (\r\n    <ContentWrapper size={size} variant={variant}>\r\n      <Content size={size} variant={variant} data-testid={testId}/>\r\n    </ContentWrapper>\r\n  );\r\n};\r\n\r\nexport default NotificationDot;\r\n"],"file":"NotificationDot.cjs"}

package/dist/NotificationDot/NotificationDot.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { Size } from '../types';
-export interface NotificationProps {
-    size?: Size.Small | Size.Medium | Size.Large;
-    variant: 'critical' | 'positive';
-    testId?: string;
-}
-declare const NotificationDot: React.FunctionComponent<NotificationProps>;
-export default NotificationDot;
+import * as React from 'react';
+import { Size } from '../types';
+export interface NotificationProps {
+    size?: Size.Small | Size.Medium | Size.Large;
+    variant: 'critical' | 'positive';
+    testId?: string;
+}
+declare const NotificationDot: React.FunctionComponent<NotificationProps>;
+export default NotificationDot;

package/dist/NotificationDot/NotificationDot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/NotificationDot/NotificationDot.tsx"],"names":["React","styled","Size","COLORS","ContentWrapper","div","props","size","Small","Large","Content","variant","correct_500","critical_500","white","NotificationDot","Medium","testId"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAAQC,MAAR,QAAqB,IAArB;;AAQA,IAAMC,cAAc,GAAGH,MAAM,CAACI,GAAV,sJACT,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CADS,EAER,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAFQ,EAGP,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,KAA5B,GAAqCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,KAA5B,GAAoC,KAApF;AAAA,CAHO,CAApB;AAOA,IAAMC,OAAO,GAAGT,MAAM,CAACI,GAAV,0MACS,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACK,OAAN,KAAkB,UAAlB,GAA+BR,MAAM,CAACS,WAAtC,GAAoDT,MAAM,CAACU,YAAtE;AAAA,CADT,EAED,UAACP,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAFC,EAGF,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAHE,EAIM,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAJN,EAKD,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,eAAeL,MAAM,CAACW,KAAlD,GAA2DR,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,eAAeN,MAAM,CAACW,KAAlD,GAA0D,eAAeX,MAAM,CAACW,KAAtJ;AAAA,CALC,CAAb;;AASA,IAAMC,eAA2D,GAAG,SAA9DA,eAA8D,OAA2C;AAAA,uBAAzCR,IAAyC;AAAA,MAAzCA,IAAyC,0BAAlCL,IAAI,CAACc,MAA6B;AAAA,MAArBL,OAAqB,QAArBA,OAAqB;AAAA,MAAZM,MAAY,QAAZA,MAAY;AAC7G,sBACE,KAAC,cAAD;AAAgB,IAAA,IAAI,EAAEV,IAAtB;AAA4B,IAAA,OAAO,EAAEI,OAArC;AAAA,2BACE,KAAC,OAAD;AAAS,MAAA,IAAI,EAAEJ,IAAf;AAAqB,MAAA,OAAO,EAAEI,OAA9B;AAAuC,qBAAaM;AAApD;AADF,IADF;AAKD,CAND;;;AApBEN,EAAAA,O,aAAS,U,EAAa,U;AACtBM,EAAAA,M;;AA2BF,eAAeF,eAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Size } from '../types';\nimport {COLORS} from '..';\n\nexport interface NotificationProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant: 'critical' | 'positive';\n  testId?: string;\n}\n\nconst ContentWrapper = styled.div<NotificationProps>`\n  width: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\n  height: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\n  padding: ${(props) => props.size === Size.Small ? '3px' : (props.size === Size.Large ? '4px' : '4px')};\n  box-sizing: border-box;\n`;\n\nconst Content = styled.div<NotificationProps>`\n  background-color: ${(props) => props.variant === 'positive' ? COLORS.correct_500 : COLORS.critical_500};\n  height: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  width: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  border-radius: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  border: ${(props) => props.size === Size.Small ? '2px solid ' + COLORS.white : (props.size === Size.Large ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white)};\n  box-sizing: border-box;\n`;\n\nconst NotificationDot: React.FunctionComponent<NotificationProps> = ({size = Size.Medium, variant, testId}) => {\n  return (\n    <ContentWrapper size={size} variant={variant}>\n      <Content size={size} variant={variant} data-testid={testId}/>\n    </ContentWrapper>\n  );\n};\n\nexport default NotificationDot;\n"],"file":"NotificationDot.js"}
+{"version":3,"sources":["../../src/NotificationDot/NotificationDot.tsx"],"names":["React","styled","Size","COLORS","ContentWrapper","div","props","size","Small","Large","Content","variant","correct_500","critical_500","white","NotificationDot","Medium","testId"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAAQC,MAAR,QAAqB,IAArB;;AAQA,IAAMC,cAAc,GAAGH,MAAM,CAACI,GAAV,sJACT,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CADS,EAER,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAFQ,EAGP,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,KAA5B,GAAqCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,KAA5B,GAAoC,KAApF;AAAA,CAHO,CAApB;AAOA,IAAMC,OAAO,GAAGT,MAAM,CAACI,GAAV,0MACS,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACK,OAAN,KAAkB,UAAlB,GAA+BR,MAAM,CAACS,WAAtC,GAAoDT,MAAM,CAACU,YAAtE;AAAA,CADT,EAED,UAACP,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAFC,EAGF,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAHE,EAIM,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAtF;AAAA,CAJN,EAKD,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,eAAeL,MAAM,CAACW,KAAlD,GAA2DR,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,eAAeN,MAAM,CAACW,KAAlD,GAA0D,eAAeX,MAAM,CAACW,KAAtJ;AAAA,CALC,CAAb;;AASA,IAAMC,eAA2D,GAAG,SAA9DA,eAA8D,OAA2C;AAAA,uBAAzCR,IAAyC;AAAA,MAAzCA,IAAyC,0BAAlCL,IAAI,CAACc,MAA6B;AAAA,MAArBL,OAAqB,QAArBA,OAAqB;AAAA,MAAZM,MAAY,QAAZA,MAAY;AAC7G,sBACE,KAAC,cAAD;AAAgB,IAAA,IAAI,EAAEV,IAAtB;AAA4B,IAAA,OAAO,EAAEI,OAArC;AAAA,2BACE,KAAC,OAAD;AAAS,MAAA,IAAI,EAAEJ,IAAf;AAAqB,MAAA,OAAO,EAAEI,OAA9B;AAAuC,qBAAaM;AAApD;AADF,IADF;AAKD,CAND;;;AApBEN,EAAAA,O,aAAS,U,EAAa,U;AACtBM,EAAAA,M;;AA2BF,eAAeF,eAAf","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Size } from '../types';\r\nimport {COLORS} from '..';\r\n\r\nexport interface NotificationProps {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  variant: 'critical' | 'positive';\r\n  testId?: string;\r\n}\r\n\r\nconst ContentWrapper = styled.div<NotificationProps>`\r\n  width: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\r\n  height: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\r\n  padding: ${(props) => props.size === Size.Small ? '3px' : (props.size === Size.Large ? '4px' : '4px')};\r\n  box-sizing: border-box;\r\n`;\r\n\r\nconst Content = styled.div<NotificationProps>`\r\n  background-color: ${(props) => props.variant === 'positive' ? COLORS.correct_500 : COLORS.critical_500};\r\n  height: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\r\n  width: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\r\n  border-radius: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\r\n  border: ${(props) => props.size === Size.Small ? '2px solid ' + COLORS.white : (props.size === Size.Large ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white)};\r\n  box-sizing: border-box;\r\n`;\r\n\r\nconst NotificationDot: React.FunctionComponent<NotificationProps> = ({size = Size.Medium, variant, testId}) => {\r\n  return (\r\n    <ContentWrapper size={size} variant={variant}>\r\n      <Content size={size} variant={variant} data-testid={testId}/>\r\n    </ContentWrapper>\r\n  );\r\n};\r\n\r\nexport default NotificationDot;\r\n"],"file":"NotificationDot.js"}

package/dist/NotificationDot/index.d.ts

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

package/dist/Paginator/Paginator.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Paginator/Paginator.tsx"],"names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentTextStyle","Regular","COLORS","neutral_600","focusStyles","Z_INDEXES","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","history","handleButtonClick","push","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","findIndex","item","map"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useHistory} from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 75%;\n  }\n`;\n\nconst Items = styled.ul`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n`;\n\nconst Item = styled.li`\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    &:focus,\n    &:focus-within {\n      ${focusStyles}\n    }\n  }\n  & > a:hover {\n    z-index: ${Z_INDEXES.hover};\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n  }\n  & > a:active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n  }\n  & > a.active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.neutral_800};\n    background-color: ${COLORS.neutral_20};\n    cursor: default;\n    &:hover {\n      color: ${COLORS.primary_800};\n      background-color: ${COLORS.primary_20};\n    }\n    &:active {\n      color: ${COLORS.primary_700};\n      background-color: ${COLORS.primary_100};\n    }\n  }\n`;\n\nconst Dots = styled(Item)`\n  cursor: not-allowed;\n  &:after{\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    content: '...';\n  }\n`;\n\nconst ItemContent = styled('div')`\n  text-align:center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \n  &.active:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    width: 32px;\n    border-radius: 4px;\n    height: 4px;\n    background-color: ${COLORS.primary_500}\n  }\n  &.active:hover:after{\n    background-color: ${COLORS.primary_700}\n  }\n  &.active:active:after{\n    background-color: ${COLORS.primary_800}\n  }\n`\n\ntype PaginatorProps = {\n  pageCount: number;\n  currentPage: number;\n  baseUrl: string;\n  onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n  up = true,\n  target = '',\n  disabled = false,\n  page,\n  onPageChange,\n  id,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  id?: string;\n}) => {\n  const history = useHistory();\n\n  const handleButtonClick = () => {\n    history.push(target);\n    onPageChange && onPageChange(page);\n  }\n\n  return (\n    <IconButton id={id}\n                action={event => handleButtonClick()}\n                variant={'secondary'}\n                shape={'circular'}\n                disabled={disabled}>\n      {up ? <ChevronRight/> : <ChevronLeft/>}\n    </IconButton>\n  )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n  const pages = [];\n  let from = 2;\n  let to = 4;\n  if (pageCount === 0) return null;\n\n  if (pageCount > 1) {\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\n      from = currentPage - 1;\n      to = currentPage + 1;\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n      from = pageCount - 3;\n      to = pageCount - 1;\n    }\n    if (to > pageCount) {\n      to = pageCount;\n    }\n    for (let i = from; i <= to; i += 1) {\n      pages.push(i);\n    }\n  }\n\n  return (\n    <Container>\n      <Items>\n        <Step up={false}\n              target={`${baseUrl}/${currentPage - 1}`}\n              page={currentPage - 1}\n              disabled={currentPage === 1}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage - 1);\n              }}\n              id=\"paginator-left\"/>\n        {pages.findIndex(item => item === 1) === -1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/1`}\n              onClick={() => {\n                if (onPageChange) onPageChange(1);\n              }}>\n                <ItemContent className={currentPage === 1 ? 'active' : ''}>\n                 <span>1</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n          <Dots/>\n        )}\n        {pages.map(page => (\n          <Item key={page}>\n            <NavLink\n              to={`${baseUrl}/${page}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(page);\n              }}>\n                <ItemContent className={currentPage === page ? 'active' : ''}>\n                 <span>{page}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\n          <Dots/>\n        )}\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/${pageCount}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(pageCount);\n              }}>\n                <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n                 <span>{pageCount}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        <Step up\n              target={`${baseUrl}/${currentPage + 1}`}\n              page={currentPage + 1}\n              disabled={currentPage === pageCount}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage + 1);\n              }}\n              id=\"paginator-right\"/>\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"file":"Paginator.cjs"}
+{"version":3,"sources":["../../src/Paginator/Paginator.tsx"],"names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentTextStyle","Regular","COLORS","neutral_600","focusStyles","Z_INDEXES","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","history","handleButtonClick","push","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","findIndex","item","map"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {NavLink} from 'react-router-dom';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\r\nimport {ComponentMStyling} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {useHistory} from 'react-router';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Container = styled.nav`\r\n  margin: 20px 0;\r\n  display: flex;\r\n  justify-content: center;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 75%;\r\n  }\r\n`;\r\n\r\nconst Items = styled.ul`\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  display: flex;\r\n`;\r\n\r\nconst Item = styled.li`\r\n  width: 48px;\r\n  height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  & > * {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    text-decoration: none;\r\n\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n    &:focus,\r\n    &:focus-within {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n  & > a:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n    color: ${COLORS.primary_800};\r\n    background-color: ${COLORS.primary_20};\r\n  }\r\n  & > a:active {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${COLORS.primary_700};\r\n    background-color: ${COLORS.primary_100};\r\n  }\r\n  & > a.active {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${COLORS.neutral_800};\r\n    background-color: ${COLORS.neutral_20};\r\n    cursor: default;\r\n    &:hover {\r\n      color: ${COLORS.primary_800};\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n    &:active {\r\n      color: ${COLORS.primary_700};\r\n      background-color: ${COLORS.primary_100};\r\n    }\r\n  }\r\n`;\r\n\r\nconst Dots = styled(Item)`\r\n  cursor: not-allowed;\r\n  &:after{\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    content: '...';\r\n  }\r\n`;\r\n\r\nconst ItemContent = styled('div')`\r\n  text-align:center;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  \r\n  &.active:after{\r\n    content: '';\r\n    position: absolute;\r\n    bottom: 4px;\r\n    width: 32px;\r\n    border-radius: 4px;\r\n    height: 4px;\r\n    background-color: ${COLORS.primary_500}\r\n  }\r\n  &.active:hover:after{\r\n    background-color: ${COLORS.primary_700}\r\n  }\r\n  &.active:active:after{\r\n    background-color: ${COLORS.primary_800}\r\n  }\r\n`\r\n\r\ntype PaginatorProps = {\r\n  pageCount: number;\r\n  currentPage: number;\r\n  baseUrl: string;\r\n  onPageChange?: (page: number) => void;\r\n};\r\n\r\nconst Step = ({\r\n  up = true,\r\n  target = '',\r\n  disabled = false,\r\n  page,\r\n  onPageChange,\r\n  id,\r\n}: {\r\n  up: boolean;\r\n  target: string;\r\n  disabled: boolean;\r\n  page: number;\r\n  onPageChange?: (page: number) => void;\r\n  id?: string;\r\n}) => {\r\n  const history = useHistory();\r\n\r\n  const handleButtonClick = () => {\r\n    history.push(target);\r\n    onPageChange && onPageChange(page);\r\n  }\r\n\r\n  return (\r\n    <IconButton id={id}\r\n                action={event => handleButtonClick()}\r\n                variant={'secondary'}\r\n                shape={'circular'}\r\n                disabled={disabled}>\r\n      {up ? <ChevronRight/> : <ChevronLeft/>}\r\n    </IconButton>\r\n  )\r\n};\r\n\r\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\r\n  const pages = [];\r\n  let from = 2;\r\n  let to = 4;\r\n  if (pageCount === 0) return null;\r\n\r\n  if (pageCount > 1) {\r\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\r\n      from = currentPage - 1;\r\n      to = currentPage + 1;\r\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\r\n      from = pageCount - 3;\r\n      to = pageCount - 1;\r\n    }\r\n    if (to > pageCount) {\r\n      to = pageCount;\r\n    }\r\n    for (let i = from; i <= to; i += 1) {\r\n      pages.push(i);\r\n    }\r\n  }\r\n\r\n  return (\r\n    <Container>\r\n      <Items>\r\n        <Step up={false}\r\n              target={`${baseUrl}/${currentPage - 1}`}\r\n              page={currentPage - 1}\r\n              disabled={currentPage === 1}\r\n              onPageChange={() => {\r\n                if (onPageChange) onPageChange(currentPage - 1);\r\n              }}\r\n              id=\"paginator-left\"/>\r\n        {pages.findIndex(item => item === 1) === -1 && (\r\n          <Item>\r\n            <NavLink\r\n              to={`${baseUrl}/1`}\r\n              onClick={() => {\r\n                if (onPageChange) onPageChange(1);\r\n              }}>\r\n                <ItemContent className={currentPage === 1 ? 'active' : ''}>\r\n                 <span>1</span>\r\n                </ItemContent>\r\n            </NavLink>\r\n          </Item>\r\n        )}\r\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\r\n          <Dots/>\r\n        )}\r\n        {pages.map(page => (\r\n          <Item key={page}>\r\n            <NavLink\r\n              to={`${baseUrl}/${page}`}\r\n              onClick={() => {\r\n                if (onPageChange) onPageChange(page);\r\n              }}>\r\n                <ItemContent className={currentPage === page ? 'active' : ''}>\r\n                 <span>{page}</span>\r\n                </ItemContent>\r\n            </NavLink>\r\n          </Item>\r\n        ))}\r\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\r\n          <Dots/>\r\n        )}\r\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\r\n          <Item>\r\n            <NavLink\r\n              to={`${baseUrl}/${pageCount}`}\r\n              onClick={() => {\r\n                if (onPageChange) onPageChange(pageCount);\r\n              }}>\r\n                <ItemContent className={currentPage === pageCount ? 'active' : ''}>\r\n                 <span>{pageCount}</span>\r\n                </ItemContent>\r\n            </NavLink>\r\n          </Item>\r\n        )}\r\n        <Step up\r\n              target={`${baseUrl}/${currentPage + 1}`}\r\n              page={currentPage + 1}\r\n              disabled={currentPage === pageCount}\r\n              onPageChange={() => {\r\n                if (onPageChange) onPageChange(currentPage + 1);\r\n              }}\r\n              id=\"paginator-right\"/>\r\n      </Items>\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Paginator;\r\n"],"file":"Paginator.cjs"}

package/dist/Paginator/Paginator.d.ts

@@ -1,8 +1,8 @@
-declare type PaginatorProps = {
-    pageCount: number;
-    currentPage: number;
-    baseUrl: string;
-    onPageChange?: (page: number) => void;
-};
-declare const Paginator: ({ pageCount, currentPage, baseUrl, onPageChange }: PaginatorProps) => JSX.Element | null;
-export default Paginator;
+declare type PaginatorProps = {
+    pageCount: number;
+    currentPage: number;
+    baseUrl: string;
+    onPageChange?: (page: number) => void;
+};
+declare const Paginator: ({ pageCount, currentPage, baseUrl, onPageChange }: PaginatorProps) => JSX.Element | null;
+export default Paginator;

package/dist/Paginator/Paginator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Paginator/Paginator.tsx"],"names":["React","styled","NavLink","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ChevronLeft","ChevronRight","ComponentMStyling","Z_INDEXES","useHistory","IconButton","Container","nav","MEDIUM","Items","ul","Item","li","Regular","neutral_600","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","history","handleButtonClick","push","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","findIndex","item","map"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useHistory} from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 75%;\n  }\n`;\n\nconst Items = styled.ul`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n`;\n\nconst Item = styled.li`\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    &:focus,\n    &:focus-within {\n      ${focusStyles}\n    }\n  }\n  & > a:hover {\n    z-index: ${Z_INDEXES.hover};\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n  }\n  & > a:active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n  }\n  & > a.active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.neutral_800};\n    background-color: ${COLORS.neutral_20};\n    cursor: default;\n    &:hover {\n      color: ${COLORS.primary_800};\n      background-color: ${COLORS.primary_20};\n    }\n    &:active {\n      color: ${COLORS.primary_700};\n      background-color: ${COLORS.primary_100};\n    }\n  }\n`;\n\nconst Dots = styled(Item)`\n  cursor: not-allowed;\n  &:after{\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    content: '...';\n  }\n`;\n\nconst ItemContent = styled('div')`\n  text-align:center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \n  &.active:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    width: 32px;\n    border-radius: 4px;\n    height: 4px;\n    background-color: ${COLORS.primary_500}\n  }\n  &.active:hover:after{\n    background-color: ${COLORS.primary_700}\n  }\n  &.active:active:after{\n    background-color: ${COLORS.primary_800}\n  }\n`\n\ntype PaginatorProps = {\n  pageCount: number;\n  currentPage: number;\n  baseUrl: string;\n  onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n  up = true,\n  target = '',\n  disabled = false,\n  page,\n  onPageChange,\n  id,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  id?: string;\n}) => {\n  const history = useHistory();\n\n  const handleButtonClick = () => {\n    history.push(target);\n    onPageChange && onPageChange(page);\n  }\n\n  return (\n    <IconButton id={id}\n                action={event => handleButtonClick()}\n                variant={'secondary'}\n                shape={'circular'}\n                disabled={disabled}>\n      {up ? <ChevronRight/> : <ChevronLeft/>}\n    </IconButton>\n  )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n  const pages = [];\n  let from = 2;\n  let to = 4;\n  if (pageCount === 0) return null;\n\n  if (pageCount > 1) {\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\n      from = currentPage - 1;\n      to = currentPage + 1;\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n      from = pageCount - 3;\n      to = pageCount - 1;\n    }\n    if (to > pageCount) {\n      to = pageCount;\n    }\n    for (let i = from; i <= to; i += 1) {\n      pages.push(i);\n    }\n  }\n\n  return (\n    <Container>\n      <Items>\n        <Step up={false}\n              target={`${baseUrl}/${currentPage - 1}`}\n              page={currentPage - 1}\n              disabled={currentPage === 1}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage - 1);\n              }}\n              id=\"paginator-left\"/>\n        {pages.findIndex(item => item === 1) === -1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/1`}\n              onClick={() => {\n                if (onPageChange) onPageChange(1);\n              }}>\n                <ItemContent className={currentPage === 1 ? 'active' : ''}>\n                 <span>1</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n          <Dots/>\n        )}\n        {pages.map(page => (\n          <Item key={page}>\n            <NavLink\n              to={`${baseUrl}/${page}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(page);\n              }}>\n                <ItemContent className={currentPage === page ? 'active' : ''}>\n                 <span>{page}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\n          <Dots/>\n        )}\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/${pageCount}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(pageCount);\n              }}>\n                <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n                 <span>{pageCount}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        <Step up\n              target={`${baseUrl}/${currentPage + 1}`}\n              page={currentPage + 1}\n              disabled={currentPage === pageCount}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage + 1);\n              }}\n              id=\"paginator-right\"/>\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"file":"Paginator.js"}
+{"version":3,"sources":["../../src/Paginator/Paginator.tsx"],"names":["React","styled","NavLink","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ChevronLeft","ChevronRight","ComponentMStyling","Z_INDEXES","useHistory","IconButton","Container","nav","MEDIUM","Items","ul","Item","li","Regular","neutral_600","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","history","handleButtonClick","push","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","findIndex","item","map"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {NavLink} from 'react-router-dom';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\r\nimport {ComponentMStyling} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {useHistory} from 'react-router';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Container = styled.nav`\r\n  margin: 20px 0;\r\n  display: flex;\r\n  justify-content: center;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 75%;\r\n  }\r\n`;\r\n\r\nconst Items = styled.ul`\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  display: flex;\r\n`;\r\n\r\nconst Item = styled.li`\r\n  width: 48px;\r\n  height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  & > * {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    text-decoration: none;\r\n\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n    &:focus,\r\n    &:focus-within {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n  & > a:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n    color: ${COLORS.primary_800};\r\n    background-color: ${COLORS.primary_20};\r\n  }\r\n  & > a:active {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${COLORS.primary_700};\r\n    background-color: ${COLORS.primary_100};\r\n  }\r\n  & > a.active {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${COLORS.neutral_800};\r\n    background-color: ${COLORS.neutral_20};\r\n    cursor: default;\r\n    &:hover {\r\n      color: ${COLORS.primary_800};\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n    &:active {\r\n      color: ${COLORS.primary_700};\r\n      background-color: ${COLORS.primary_100};\r\n    }\r\n  }\r\n`;\r\n\r\nconst Dots = styled(Item)`\r\n  cursor: not-allowed;\r\n  &:after{\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    content: '...';\r\n  }\r\n`;\r\n\r\nconst ItemContent = styled('div')`\r\n  text-align:center;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  \r\n  &.active:after{\r\n    content: '';\r\n    position: absolute;\r\n    bottom: 4px;\r\n    width: 32px;\r\n    border-radius: 4px;\r\n    height: 4px;\r\n    background-color: ${COLORS.primary_500}\r\n  }\r\n  &.active:hover:after{\r\n    background-color: ${COLORS.primary_700}\r\n  }\r\n  &.active:active:after{\r\n    background-color: ${COLORS.primary_800}\r\n  }\r\n`\r\n\r\ntype PaginatorProps = {\r\n  pageCount: number;\r\n  currentPage: number;\r\n  baseUrl: string;\r\n  onPageChange?: (page: number) => void;\r\n};\r\n\r\nconst Step = ({\r\n  up = true,\r\n  target = '',\r\n  disabled = false,\r\n  page,\r\n  onPageChange,\r\n  id,\r\n}: {\r\n  up: boolean;\r\n  target: string;\r\n  disabled: boolean;\r\n  page: number;\r\n  onPageChange?: (page: number) => void;\r\n  id?: string;\r\n}) => {\r\n  const history = useHistory();\r\n\r\n  const handleButtonClick = () => {\r\n    history.push(target);\r\n    onPageChange && onPageChange(page);\r\n  }\r\n\r\n  return (\r\n    <IconButton id={id}\r\n                action={event => handleButtonClick()}\r\n                variant={'secondary'}\r\n                shape={'circular'}\r\n                disabled={disabled}>\r\n      {up ? <ChevronRight/> : <ChevronLeft/>}\r\n    </IconButton>\r\n  )\r\n};\r\n\r\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\r\n  const pages = [];\r\n  let from = 2;\r\n  let to = 4;\r\n  if (pageCount === 0) return null;\r\n\r\n  if (pageCount > 1) {\r\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\r\n      from = currentPage - 1;\r\n      to = currentPage + 1;\r\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\r\n      from = pageCount - 3;\r\n      to = pageCount - 1;\r\n    }\r\n    if (to > pageCount) {\r\n      to = pageCount;\r\n    }\r\n    for (let i = from; i <= to; i += 1) {\r\n      pages.push(i);\r\n    }\r\n  }\r\n\r\n  return (\r\n    <Container>\r\n      <Items>\r\n        <Step up={false}\r\n              target={`${baseUrl}/${currentPage - 1}`}\r\n              page={currentPage - 1}\r\n              disabled={currentPage === 1}\r\n              onPageChange={() => {\r\n                if (onPageChange) onPageChange(currentPage - 1);\r\n              }}\r\n              id=\"paginator-left\"/>\r\n        {pages.findIndex(item => item === 1) === -1 && (\r\n          <Item>\r\n            <NavLink\r\n              to={`${baseUrl}/1`}\r\n              onClick={() => {\r\n                if (onPageChange) onPageChange(1);\r\n              }}>\r\n                <ItemContent className={currentPage === 1 ? 'active' : ''}>\r\n                 <span>1</span>\r\n                </ItemContent>\r\n            </NavLink>\r\n          </Item>\r\n        )}\r\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\r\n          <Dots/>\r\n        )}\r\n        {pages.map(page => (\r\n          <Item key={page}>\r\n            <NavLink\r\n              to={`${baseUrl}/${page}`}\r\n              onClick={() => {\r\n                if (onPageChange) onPageChange(page);\r\n              }}>\r\n                <ItemContent className={currentPage === page ? 'active' : ''}>\r\n                 <span>{page}</span>\r\n                </ItemContent>\r\n            </NavLink>\r\n          </Item>\r\n        ))}\r\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\r\n          <Dots/>\r\n        )}\r\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\r\n          <Item>\r\n            <NavLink\r\n              to={`${baseUrl}/${pageCount}`}\r\n              onClick={() => {\r\n                if (onPageChange) onPageChange(pageCount);\r\n              }}>\r\n                <ItemContent className={currentPage === pageCount ? 'active' : ''}>\r\n                 <span>{pageCount}</span>\r\n                </ItemContent>\r\n            </NavLink>\r\n          </Item>\r\n        )}\r\n        <Step up\r\n              target={`${baseUrl}/${currentPage + 1}`}\r\n              page={currentPage + 1}\r\n              disabled={currentPage === pageCount}\r\n              onPageChange={() => {\r\n                if (onPageChange) onPageChange(currentPage + 1);\r\n              }}\r\n              id=\"paginator-right\"/>\r\n      </Items>\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Paginator;\r\n"],"file":"Paginator.js"}