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

package/dist/LoadingPage/GlobalLoadingPage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LoadingPage/GlobalLoadingPage.tsx"],"names":["React","styled","LaerdalLoadingLogo","LoadingIndicator","COLORS","ComponentTextStyle","ComponentMStyling","LoadingMain","main","primary_20","Header","div","white","neutral_200","LogoAndMessage","Regular","neutral_600","LoadingIndicatorContainer","LoadingPage","optionalMessage","includeHeader"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,kBAAR,QAAiC,WAAjC;AAEA,OAAOC,gBAAP,MAA6B,sCAA7B;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;;;AAEA,IAAMC,WAAW,GAAGN,MAAM,CAACO,IAAV,6KAIKJ,MAAM,CAACK,UAJZ,CAAjB;AAQA,IAAMC,MAAM,GAAGT,MAAM,CAACU,GAAV,wJAEUP,MAAM,CAACQ,KAFjB,EAGiBR,MAAM,CAACS,WAHxB,CAAZ;AAMA,IAAMC,cAAc,GAAGb,MAAM,CAACU,GAAV,qWAedL,iBAAiB,CAACD,kBAAkB,CAACU,OAApB,EAA6BX,MAAM,CAACY,WAApC,CAfH,CAApB;AAmBA,IAAMC,yBAAyB,GAAGhB,MAAM,CAACU,GAAV,gKAA/B;;AAYA,IAAMO,WAAiD,GAAG,SAApDA,WAAoD,OAAqD;AAAA,MAAlDC,eAAkD,QAAlDA,eAAkD;AAAA,MAAjCC,aAAiC,QAAjCA,aAAiC;AAC7G,sBACE,MAAC,WAAD;AAAa,mBAAY,iBAAzB;AAAA,eACGA,aAAa,iBAAI,KAAC,MAAD,KADpB,eAEE,KAAC,yBAAD;AAAA,6BACE,KAAC,gBAAD;AADF,MAFF,eAKE,MAAC,cAAD;AAAgB,qBAAY,2BAA5B;AAAA,iBACGD,eAAe,iBAAI;AAAA,kBAAOA;AAAP,QADtB,eAEE,KAAC,kBAAD,KAFF;AAAA,MALF;AAAA,IADF;AAYD,CAbD;;;AAJEA,EAAAA,e;AACAC,EAAAA,a;;AAkBF,eAAeF,WAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {LaerdalLoadingLogo} from '../assets';\n\nimport LoadingIndicator from '../LoadingIndicator/LoadingIndicator';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst LoadingMain = styled.main`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  background-color: ${COLORS.primary_20};\n  height: 100%;\n`;\n\nconst Header = styled.div<LoaderProps>`\n  height: 64px;\n  background-color: ${COLORS.white};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nconst LogoAndMessage = styled.div`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  bottom: 36px;\n  left: 50%;\n  transform: translate(-50%);\n  align-items: center;\n\n  span {\n    margin-bottom: 40px;\n    font-weight: normal;\n    width: 320px;\n    text-align: center;\n    \n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\n\nconst LoadingIndicatorContainer = styled.div`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n`;\n\ninterface LoaderProps {\n  optionalMessage?: string;\n  includeHeader?: boolean;\n}\n\nconst LoadingPage: React.FunctionComponent<LoaderProps> = ({ optionalMessage, includeHeader }: LoaderProps) => {\n  return (\n    <LoadingMain data-testid=\"TestLoadingMain\">\n      {includeHeader && <Header />}\n      <LoadingIndicatorContainer>\n        <LoadingIndicator />\n      </LoadingIndicatorContainer>\n      <LogoAndMessage data-testid=\"TestLoadingLogoAndMessage\">\n        {optionalMessage && <span>{optionalMessage}</span>}\n        <LaerdalLoadingLogo />\n      </LogoAndMessage>\n    </LoadingMain>\n  );\n};\n\nexport default LoadingPage;\n"],"file":"GlobalLoadingPage.js"}
+{"version":3,"sources":["../../src/LoadingPage/GlobalLoadingPage.tsx"],"names":["React","styled","LaerdalLoadingLogo","LoadingIndicator","COLORS","ComponentTextStyle","ComponentMStyling","LoadingMain","main","primary_20","Header","div","white","neutral_200","LogoAndMessage","Regular","neutral_600","LoadingIndicatorContainer","LoadingPage","optionalMessage","includeHeader"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,kBAAR,QAAiC,WAAjC;AAEA,OAAOC,gBAAP,MAA6B,sCAA7B;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;;;AAEA,IAAMC,WAAW,GAAGN,MAAM,CAACO,IAAV,6KAIKJ,MAAM,CAACK,UAJZ,CAAjB;AAQA,IAAMC,MAAM,GAAGT,MAAM,CAACU,GAAV,wJAEUP,MAAM,CAACQ,KAFjB,EAGiBR,MAAM,CAACS,WAHxB,CAAZ;AAMA,IAAMC,cAAc,GAAGb,MAAM,CAACU,GAAV,qWAedL,iBAAiB,CAACD,kBAAkB,CAACU,OAApB,EAA6BX,MAAM,CAACY,WAApC,CAfH,CAApB;AAmBA,IAAMC,yBAAyB,GAAGhB,MAAM,CAACU,GAAV,gKAA/B;;AAYA,IAAMO,WAAiD,GAAG,SAApDA,WAAoD,OAAqD;AAAA,MAAlDC,eAAkD,QAAlDA,eAAkD;AAAA,MAAjCC,aAAiC,QAAjCA,aAAiC;AAC7G,sBACE,MAAC,WAAD;AAAa,mBAAY,iBAAzB;AAAA,eACGA,aAAa,iBAAI,KAAC,MAAD,KADpB,eAEE,KAAC,yBAAD;AAAA,6BACE,KAAC,gBAAD;AADF,MAFF,eAKE,MAAC,cAAD;AAAgB,qBAAY,2BAA5B;AAAA,iBACGD,eAAe,iBAAI;AAAA,kBAAOA;AAAP,QADtB,eAEE,KAAC,kBAAD,KAFF;AAAA,MALF;AAAA,IADF;AAYD,CAbD;;;AAJEA,EAAAA,e;AACAC,EAAAA,a;;AAkBF,eAAeF,WAAf","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {LaerdalLoadingLogo} from '../assets';\r\n\r\nimport LoadingIndicator from '../LoadingIndicator/LoadingIndicator';\r\nimport {COLORS, ComponentTextStyle} from '../styles';\r\nimport {ComponentMStyling} from '../styles/typography';\r\n\r\nconst LoadingMain = styled.main`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  background-color: ${COLORS.primary_20};\r\n  height: 100%;\r\n`;\r\n\r\nconst Header = styled.div<LoaderProps>`\r\n  height: 64px;\r\n  background-color: ${COLORS.white};\r\n  border-bottom: 1px solid ${COLORS.neutral_200};\r\n`;\r\n\r\nconst LogoAndMessage = styled.div`\r\n  position: absolute;\r\n  display: flex;\r\n  flex-direction: column;\r\n  bottom: 36px;\r\n  left: 50%;\r\n  transform: translate(-50%);\r\n  align-items: center;\r\n\r\n  span {\r\n    margin-bottom: 40px;\r\n    font-weight: normal;\r\n    width: 320px;\r\n    text-align: center;\r\n    \r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n  }\r\n`;\r\n\r\nconst LoadingIndicatorContainer = styled.div`\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n`;\r\n\r\ninterface LoaderProps {\r\n  optionalMessage?: string;\r\n  includeHeader?: boolean;\r\n}\r\n\r\nconst LoadingPage: React.FunctionComponent<LoaderProps> = ({ optionalMessage, includeHeader }: LoaderProps) => {\r\n  return (\r\n    <LoadingMain data-testid=\"TestLoadingMain\">\r\n      {includeHeader && <Header />}\r\n      <LoadingIndicatorContainer>\r\n        <LoadingIndicator />\r\n      </LoadingIndicatorContainer>\r\n      <LogoAndMessage data-testid=\"TestLoadingLogoAndMessage\">\r\n        {optionalMessage && <span>{optionalMessage}</span>}\r\n        <LaerdalLoadingLogo />\r\n      </LogoAndMessage>\r\n    </LoadingMain>\r\n  );\r\n};\r\n\r\nexport default LoadingPage;\r\n"],"file":"GlobalLoadingPage.js"}

package/dist/LoadingPage/index.cjs.map

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

package/dist/LoadingPage/index.d.ts

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

package/dist/LoadingPage/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LoadingPage/index.tsx"],"names":["default","GlobalLoadingPage"],"mappings":"AAAA,SAASA,OAAO,IAAIC,iBAApB,QAA6C,qBAA7C","sourcesContent":["export { default as GlobalLoadingPage } from './GlobalLoadingPage';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/LoadingPage/index.tsx"],"names":["default","GlobalLoadingPage"],"mappings":"AAAA,SAASA,OAAO,IAAIC,iBAApB,QAA6C,qBAA7C","sourcesContent":["export { default as GlobalLoadingPage } from './GlobalLoadingPage';\r\n"],"file":"index.js"}

package/dist/MenuItem/MenuItem.cjs

@@ -53,7 +53,7 @@ var ItemIconRight = _styledComponents.default.div(_templateObject4 || (_template
 
 exports.ItemIconRight = ItemIconRight;
 
-var ItemContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    margin: ", ";\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: ", ";\n      svg {\n        display: block;\n        margin: auto;\n        height:", ";\n        width:", ";\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n"])), function (props) {
+var ItemContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    margin: ", ";\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: ", ";\n      svg {\n        display: block;\n        margin: auto;\n        height:", ";\n        width:", ";\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n        position: absolute;\n        right: ", ";\n      }\n    }\n"])), function (props) {
   return props.size === _types.Size.Small ? 'auto 0 auto 10px' : props.size === _types.Size.Large ? 'auto 0 auto 26px' : 'auto 0 auto 18px';
 }, ItemLabel, ItemIcon, function (props) {
   return props.size === _types.Size.Small ? '6px' : '8px';
@@ -61,12 +61,14 @@ var ItemContent = _styledComponents.default.div(_templateObject5 || (_templateOb
   return props.size === _types.Size.Small ? '20px' : '';
 }, function (props) {
   return props.size === _types.Size.Small ? '20px' : '';
-}, ItemIconRight);
+}, ItemIconRight, function (props) {
+  return props.size === _types.Size.Small ? '8px' : props.size === _types.Size.Medium ? '16px' : '24px';
+});
 
 exports.ItemContent = ItemContent;
 
 var DropdownButtonCSS = function DropdownButtonCSS(size) {
-  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ", ", " {\n      color: ", ";\n    }\n\n    &:hover:not(.active), &.hover-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ", "\n    }\n\n    &:active:not(.active), &.active-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &.active {\n      background: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 4px;\n        bottom: 4px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }      \n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ", " !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px', _styles.COLORS.white, ItemLabel, ItemIcon, _styles.COLORS.neutral_600, _styles.COLORS.primary_20, ItemLabel, ItemIcon, _styles.COLORS.primary_700, _styles.focusStyles, _styles.COLORS.primary_100, ItemLabel, ItemIcon, _styles.COLORS.primary_800, _styles.COLORS.neutral_20, ItemLabel, ItemIcon, _styles.COLORS.neutral_800, _styles.COLORS.primary_500, _styles.COLORS.neutral_500, _styles.COLORS.primary_20, ItemIcon, ItemLabel, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.primary_100, ItemIcon, ItemLabel, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_200, _styles.COLORS.primary_20, _styles.COLORS.primary_600);
+  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ", ", " {\n      color: ", ";\n    }\n\n    &:hover:not(.active):not(:disabled):not(.disabled-state),\n    &.hover-state:not(.active):not(:disabled):not(.disabled-state) {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ", "\n    }\n\n    &:active:not(.active):not(:disabled):not(.disabled-state), &.active-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &.active {\n      background: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 4px;\n        bottom: 4px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background: none;\n      cursor: not-allowed;\n      \n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &.active:hover:not(:disabled):not(.locked), &.active-hover-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }      \n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active:not(:disabled):not(.locked), &.active-active-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active.locked {\n      &::after {\n        background-color: ", ";\n      } \n    }\n\n    &.active:disabled:not(.locked) {\n      &::after {\n        background-color: ", ";\n      }     \n    }\n\n    &:disabled:not(.locked), &.disabled-state {\n      background: none;\n      cursor: not-allowed;\n      \n      ", ", ", " {\n        color: ", " !important;\n      }\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px', _styles.COLORS.white, ItemLabel, ItemIcon, _styles.COLORS.neutral_600, _styles.COLORS.primary_20, ItemLabel, ItemIcon, _styles.COLORS.primary_700, _styles.focusStyles, _styles.COLORS.primary_100, ItemLabel, ItemIcon, _styles.COLORS.primary_800, _styles.COLORS.neutral_20, ItemLabel, ItemIcon, _styles.COLORS.neutral_800, _styles.COLORS.primary_500, ItemIcon, ItemLabel, _styles.COLORS.neutral_500, _styles.COLORS.primary_20, ItemIcon, ItemLabel, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.primary_100, ItemIcon, ItemLabel, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_500, _styles.COLORS.neutral_300, ItemIcon, ItemLabel, _styles.COLORS.neutral_300, _styles.COLORS.primary_20, _styles.COLORS.primary_600);
 };
 
 exports.DropdownButtonCSS = DropdownButtonCSS;

package/dist/MenuItem/MenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["DropdownButton","styled","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconRight","ItemContent","Size","Small","Large","css","ComponentTextStyle","Regular","COLORS","neutral_600","Medium","white","primary_20","primary_700","focusStyles","primary_100","primary_800","neutral_20","neutral_800","primary_500","neutral_500","neutral_200","primary_600","MenuItem","React","forwardRef","ref","active","item","onClickHandler","className","tabIndex","iconRight","id","disabled","locked","defaultOnMouseDownHandler","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400","cloneElement"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: React.MouseEvent) => void;\n   active: boolean;\n   id: string;\n   size?: Size;\n   className?: string;\n   tabIndex?: number;\n   iconRight?: React.ReactElement;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\n\nexport const ItemIcon = styled.div``;\n\nexport const ItemIconRight = styled.div`\n  align-items: center;\n  display: flex;\n`;\n\nexport const ItemContent = styled.div<{size:Size}>`\n    margin: ${props=>props.size===Size.Small?'auto 0 auto 10px':(props.size===Size.Large?'auto 0 auto 26px':'auto 0 auto 18px')};\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ${ItemIcon} {\n      margin-right: ${props=>props.size===Size.Small?'6px':'8px'};\n      svg {\n        display: block;\n        margin: auto;\n        height:${props=>props.size===Size.Small?'20px':''};\n        width:${props=>props.size===Size.Small?'20px':''};\n      }\n    }\n\n    ${ItemIconRight} {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n`;\n\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${ItemLabel}, ${ItemIcon} {\n      color: ${COLORS.neutral_600};\n    }\n\n    &:hover:not(.active), &.hover-state {\n      background: ${COLORS.primary_20};\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.primary_700};\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ${focusStyles}\n    }\n\n    &:active:not(.active), &.active-state {\n      background: ${COLORS.primary_100};\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.neutral_800};\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 4px;\n        bottom: 4px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_500};\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ${COLORS.primary_20};\n\n      ${ItemIcon}, ${ItemLabel} {\n        color: ${COLORS.primary_700};\n      }      \n\n      &::after {\n        background-color: ${COLORS.primary_700};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      ${ItemIcon}, ${ItemLabel} {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_800};\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200} !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    size = Size.Medium,\n    className,\n    tabIndex,\n    iconRight,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        tabIndex={tabIndex}\n        onMouseDown={defaultOnMouseDownHandler}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent size={size}>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              <div>\n                <div>{item.displayLabel ?? item.value}</div>\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n              </div>\n            {\n              item.locked &&\n              <ItemIconRight>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\"/>\n              </ItemIconRight>\n            }\n            {\n              !item.locked && !!iconRight &&\n              <ItemIconRight>\n                {React.cloneElement(iconRight, {className: 'extraMargin', size: '24px',})}\n              </ItemIconRight>\n            }\n\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.cjs"}
+{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["DropdownButton","styled","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconRight","ItemContent","Size","Small","Large","Medium","css","ComponentTextStyle","Regular","COLORS","neutral_600","white","primary_20","primary_700","focusStyles","primary_100","primary_800","neutral_20","neutral_800","primary_500","neutral_500","neutral_300","primary_600","MenuItem","React","forwardRef","ref","active","item","onClickHandler","className","tabIndex","iconRight","id","disabled","locked","defaultOnMouseDownHandler","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400","cloneElement"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport styled, { css } from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\r\nimport {Product, Size} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport { DropdownItem } from '../Dropdown/DropdownContent';\r\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\r\n\r\nexport interface MenuItemProps {\r\n   item: DropdownItem;\r\n   onClickHandler: (e: React.MouseEvent) => void;\r\n   active: boolean;\r\n   id: string;\r\n   size?: Size;\r\n   className?: string;\r\n   tabIndex?: number;\r\n   iconRight?: React.ReactElement;\r\n}\r\n\r\nexport const DropdownButton = styled.button<{ size?: Size }>`\r\n  ${(props) => DropdownButtonCSS(props.size)}\r\n`;\r\n\r\nexport const ItemLabel = styled.div``;\r\n\r\nexport const ItemIcon = styled.div``;\r\n\r\nexport const ItemIconRight = styled.div`\r\n  align-items: center;\r\n  display: flex;\r\n`;\r\n\r\nexport const ItemContent = styled.div<{size:Size}>`\r\n    margin: ${props=>props.size===Size.Small?'auto 0 auto 10px':(props.size===Size.Large?'auto 0 auto 26px':'auto 0 auto 18px')};\r\n    display: flex;\r\n    align-items: center;\r\n    flex-grow: 2;\r\n\r\n    ${ItemLabel} {\r\n      flex: 1 0 calc(100% - 40px);\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n    }\r\n\r\n    ${ItemIcon} {\r\n      margin-right: ${props=>props.size===Size.Small?'6px':'8px'};\r\n      svg {\r\n        display: block;\r\n        margin: auto;\r\n        height:${props=>props.size===Size.Small?'20px':''};\r\n        width:${props=>props.size===Size.Small?'20px':''};\r\n      }\r\n    }\r\n\r\n    ${ItemIconRight} {\r\n      flex-grow: 2;\r\n\r\n      .extraMargin {\r\n        margin-left: calc(100% - 24px);\r\n        position: absolute;\r\n        right: ${props=>props.size===Size.Small?'8px':(props.size===Size.Medium?'16px':'24px')};\r\n      }\r\n    }\r\n`;\r\n\r\n\r\nexport const DropdownButtonCSS = (size?: Size) => {\r\n  return css`\r\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n    position: relative;\r\n    text-decoration: none;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\r\n    background-color: ${COLORS.white};\r\n    border: none;\r\n    cursor: pointer;\r\n    background: none;\r\n    width: 100%;\r\n    text-align: left;\r\n\r\n    span {\r\n      margin: auto 0 auto 16px;\r\n      line-height: 48px;\r\n    }\r\n\r\n    ${ItemLabel}, ${ItemIcon} {\r\n      color: ${COLORS.neutral_600};\r\n    }\r\n\r\n    &:hover:not(.active):not(:disabled):not(.disabled-state),\r\n    &.hover-state:not(.active):not(:disabled):not(.disabled-state) {\r\n      background: ${COLORS.primary_20};\r\n      ${ItemLabel}, ${ItemIcon} {\r\n        color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n\r\n    &:focus, &.focus-state, &.focus-visible {\r\n      ${focusStyles}\r\n    }\r\n\r\n    &:active:not(.active):not(:disabled):not(.disabled-state), &.active-state {\r\n      background: ${COLORS.primary_100};\r\n      ${ItemLabel}, ${ItemIcon} {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n\r\n    &.active {\r\n      background: ${COLORS.neutral_20};\r\n\r\n      ${ItemLabel}, ${ItemIcon} {\r\n        color: ${COLORS.neutral_800};\r\n      }\r\n\r\n      &::after {\r\n        position: absolute;\r\n        content: ' ';\r\n        width: 4px;\r\n        top: 4px;\r\n        bottom: 4px;\r\n        left: 4px;\r\n        background-color: ${COLORS.primary_500};\r\n\r\n        border-radius: 4px;\r\n      }\r\n    }\r\n\r\n\r\n    &.locked {\r\n      background: none;\r\n      cursor: not-allowed;\r\n      \r\n      ${ItemIcon}, ${ItemLabel} {\r\n        color: ${COLORS.neutral_500};\r\n      }\r\n    }\r\n\r\n    &.active:hover:not(:disabled):not(.locked), &.active-hover-state {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      ${ItemIcon}, ${ItemLabel} {\r\n        color: ${COLORS.primary_700};\r\n      }      \r\n\r\n      &::after {\r\n        background-color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n\r\n    &.active:active:not(:disabled):not(.locked), &.active-active-state {\r\n      background-color: ${COLORS.primary_100};\r\n\r\n      ${ItemIcon}, ${ItemLabel} {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n\r\n      &::after {\r\n        background-color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n\r\n    &.active.locked {\r\n      &::after {\r\n        background-color: ${COLORS.neutral_500};\r\n      } \r\n    }\r\n\r\n    &.active:disabled:not(.locked) {\r\n      &::after {\r\n        background-color: ${COLORS.neutral_300};\r\n      }     \r\n    }\r\n\r\n    &:disabled:not(.locked), &.disabled-state {\r\n      background: none;\r\n      cursor: not-allowed;\r\n      \r\n      ${ItemIcon}, ${ItemLabel} {\r\n        color: ${COLORS.neutral_300} !important;\r\n      }\r\n    }\r\n\r\n    &.dropdown-hover:not(:disabled) {\r\n      background-color: ${COLORS.primary_20};\r\n      color: ${COLORS.primary_600};\r\n    }\r\n  `;\r\n};\r\n\r\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\r\n    active,\r\n    item,\r\n    onClickHandler,\r\n    size = Size.Medium,\r\n    className,\r\n    tabIndex,\r\n    iconRight,\r\n    id }: MenuItemProps, ref) => {\r\n  return (\r\n    <DropdownButton\r\n        type=\"button\"\r\n        size={size}\r\n        disabled={item.disabled || item.locked}\r\n        tabIndex={tabIndex}\r\n        onMouseDown={defaultOnMouseDownHandler}\r\n        ref={ref}\r\n        onClick={onClickHandler}\r\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\r\n        id={id}>\r\n        {item.showDividerAbove && <div className=\"divider\" />}\r\n        <ItemContent size={size}>\r\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\r\n          <ItemLabel>\r\n              <div>\r\n                <div>{item.displayLabel ?? item.value}</div>\r\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\r\n              </div>\r\n            {\r\n              item.locked &&\r\n              <ItemIconRight>\r\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\"/>\r\n              </ItemIconRight>\r\n            }\r\n            {\r\n              !item.locked && !!iconRight &&\r\n              <ItemIconRight>\r\n                {React.cloneElement(iconRight, {className: 'extraMargin', size: '24px',})}\r\n              </ItemIconRight>\r\n            }\r\n\r\n          </ItemLabel>\r\n        </ItemContent>\r\n  </DropdownButton>\r\n  );\r\n});\r\n\r\nexport default MenuItem;\r\n"],"file":"MenuItem.cjs"}

package/dist/MenuItem/MenuItem.d.ts

@@ -1,25 +1,25 @@
-import * as React from 'react';
-import { Size } from '../types';
-import { DropdownItem } from '../Dropdown/DropdownContent';
-export interface MenuItemProps {
-    item: DropdownItem;
-    onClickHandler: (e: React.MouseEvent) => void;
-    active: boolean;
-    id: string;
-    size?: Size;
-    className?: string;
-    tabIndex?: number;
-    iconRight?: React.ReactElement;
-}
-export declare const DropdownButton: import("styled-components").StyledComponent<"button", any, {
-    size?: Size | undefined;
-}, never>;
-export declare const ItemLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ItemIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ItemIconRight: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ItemContent: import("styled-components").StyledComponent<"div", any, {
-    size: Size;
-}, never>;
-export declare const DropdownButtonCSS: (size?: Size | undefined) => import("styled-components").FlattenSimpleInterpolation;
-declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
-export default MenuItem;
+import * as React from 'react';
+import { Size } from '../types';
+import { DropdownItem } from '../Dropdown/DropdownContent';
+export interface MenuItemProps {
+    item: DropdownItem;
+    onClickHandler: (e: React.MouseEvent) => void;
+    active: boolean;
+    id: string;
+    size?: Size;
+    className?: string;
+    tabIndex?: number;
+    iconRight?: React.ReactElement;
+}
+export declare const DropdownButton: import("styled-components").StyledComponent<"button", any, {
+    size?: Size | undefined;
+}, never>;
+export declare const ItemLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ItemIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ItemIconRight: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ItemContent: import("styled-components").StyledComponent<"div", any, {
+    size: Size;
+}, never>;
+export declare const DropdownButtonCSS: (size?: Size | undefined) => import("styled-components").FlattenSimpleInterpolation;
+declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+export default MenuItem;

package/dist/MenuItem/MenuItem.js

@@ -18,7 +18,7 @@ export var DropdownButton = styled.button(_templateObject || (_templateObject =
 export var ItemLabel = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
 export var ItemIcon = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
 export var ItemIconRight = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n"])));
-export var ItemContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin: ", ";\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: ", ";\n      svg {\n        display: block;\n        margin: auto;\n        height:", ";\n        width:", ";\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n"])), function (props) {
+export var ItemContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin: ", ";\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: ", ";\n      svg {\n        display: block;\n        margin: auto;\n        height:", ";\n        width:", ";\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n        position: absolute;\n        right: ", ";\n      }\n    }\n"])), function (props) {
   return props.size === Size.Small ? 'auto 0 auto 10px' : props.size === Size.Large ? 'auto 0 auto 26px' : 'auto 0 auto 18px';
 }, ItemLabel, ItemIcon, function (props) {
   return props.size === Size.Small ? '6px' : '8px';
@@ -26,9 +26,11 @@ export var ItemContent = styled.div(_templateObject5 || (_templateObject5 = _tag
   return props.size === Size.Small ? '20px' : '';
 }, function (props) {
   return props.size === Size.Small ? '20px' : '';
-}, ItemIconRight);
+}, ItemIconRight, function (props) {
+  return props.size === Size.Small ? '8px' : props.size === Size.Medium ? '16px' : '24px';
+});
 export var DropdownButtonCSS = function DropdownButtonCSS(size) {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ", ", " {\n      color: ", ";\n    }\n\n    &:hover:not(.active), &.hover-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ", "\n    }\n\n    &:active:not(.active), &.active-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &.active {\n      background: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 4px;\n        bottom: 4px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }      \n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ", " !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px', COLORS.white, ItemLabel, ItemIcon, COLORS.neutral_600, COLORS.primary_20, ItemLabel, ItemIcon, COLORS.primary_700, focusStyles, COLORS.primary_100, ItemLabel, ItemIcon, COLORS.primary_800, COLORS.neutral_20, ItemLabel, ItemIcon, COLORS.neutral_800, COLORS.primary_500, COLORS.neutral_500, COLORS.primary_20, ItemIcon, ItemLabel, COLORS.primary_700, COLORS.primary_700, COLORS.primary_100, ItemIcon, ItemLabel, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_200, COLORS.primary_20, COLORS.primary_600);
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ", ", " {\n      color: ", ";\n    }\n\n    &:hover:not(.active):not(:disabled):not(.disabled-state),\n    &.hover-state:not(.active):not(:disabled):not(.disabled-state) {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ", "\n    }\n\n    &:active:not(.active):not(:disabled):not(.disabled-state), &.active-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &.active {\n      background: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 4px;\n        bottom: 4px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background: none;\n      cursor: not-allowed;\n      \n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &.active:hover:not(:disabled):not(.locked), &.active-hover-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }      \n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active:not(:disabled):not(.locked), &.active-active-state {\n      background-color: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active.locked {\n      &::after {\n        background-color: ", ";\n      } \n    }\n\n    &.active:disabled:not(.locked) {\n      &::after {\n        background-color: ", ";\n      }     \n    }\n\n    &:disabled:not(.locked), &.disabled-state {\n      background: none;\n      cursor: not-allowed;\n      \n      ", ", ", " {\n        color: ", " !important;\n      }\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px', COLORS.white, ItemLabel, ItemIcon, COLORS.neutral_600, COLORS.primary_20, ItemLabel, ItemIcon, COLORS.primary_700, focusStyles, COLORS.primary_100, ItemLabel, ItemIcon, COLORS.primary_800, COLORS.neutral_20, ItemLabel, ItemIcon, COLORS.neutral_800, COLORS.primary_500, ItemIcon, ItemLabel, COLORS.neutral_500, COLORS.primary_20, ItemIcon, ItemLabel, COLORS.primary_700, COLORS.primary_700, COLORS.primary_100, ItemIcon, ItemLabel, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_500, COLORS.neutral_300, ItemIcon, ItemLabel, COLORS.neutral_300, COLORS.primary_20, COLORS.primary_600);
 };
 var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _item$displayLabel;

package/dist/MenuItem/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["React","styled","css","COLORS","ComponentTextStyle","focusStyles","LockedOn","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","DropdownButton","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconRight","ItemContent","Small","Large","Regular","neutral_600","Medium","white","primary_20","primary_700","primary_100","primary_800","neutral_20","neutral_800","primary_500","neutral_500","neutral_200","primary_600","MenuItem","forwardRef","ref","active","item","onClickHandler","className","tabIndex","iconRight","id","disabled","locked","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400","cloneElement"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: React.MouseEvent) => void;\n   active: boolean;\n   id: string;\n   size?: Size;\n   className?: string;\n   tabIndex?: number;\n   iconRight?: React.ReactElement;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\n\nexport const ItemIcon = styled.div``;\n\nexport const ItemIconRight = styled.div`\n  align-items: center;\n  display: flex;\n`;\n\nexport const ItemContent = styled.div<{size:Size}>`\n    margin: ${props=>props.size===Size.Small?'auto 0 auto 10px':(props.size===Size.Large?'auto 0 auto 26px':'auto 0 auto 18px')};\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ${ItemIcon} {\n      margin-right: ${props=>props.size===Size.Small?'6px':'8px'};\n      svg {\n        display: block;\n        margin: auto;\n        height:${props=>props.size===Size.Small?'20px':''};\n        width:${props=>props.size===Size.Small?'20px':''};\n      }\n    }\n\n    ${ItemIconRight} {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n`;\n\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${ItemLabel}, ${ItemIcon} {\n      color: ${COLORS.neutral_600};\n    }\n\n    &:hover:not(.active), &.hover-state {\n      background: ${COLORS.primary_20};\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.primary_700};\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ${focusStyles}\n    }\n\n    &:active:not(.active), &.active-state {\n      background: ${COLORS.primary_100};\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.neutral_800};\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 4px;\n        bottom: 4px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_500};\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ${COLORS.primary_20};\n\n      ${ItemIcon}, ${ItemLabel} {\n        color: ${COLORS.primary_700};\n      }      \n\n      &::after {\n        background-color: ${COLORS.primary_700};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      ${ItemIcon}, ${ItemLabel} {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_800};\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200} !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    size = Size.Medium,\n    className,\n    tabIndex,\n    iconRight,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        tabIndex={tabIndex}\n        onMouseDown={defaultOnMouseDownHandler}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent size={size}>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              <div>\n                <div>{item.displayLabel ?? item.value}</div>\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n              </div>\n            {\n              item.locked &&\n              <ItemIconRight>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\"/>\n              </ItemIconRight>\n            }\n            {\n              !item.locked && !!iconRight &&\n              <ItemIconRight>\n                {React.cloneElement(iconRight, {className: 'extraMargin', size: '24px',})}\n              </ItemIconRight>\n            }\n\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.js"}
+{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["React","styled","css","COLORS","ComponentTextStyle","focusStyles","LockedOn","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","DropdownButton","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconRight","ItemContent","Small","Large","Medium","Regular","neutral_600","white","primary_20","primary_700","primary_100","primary_800","neutral_20","neutral_800","primary_500","neutral_500","neutral_300","primary_600","MenuItem","forwardRef","ref","active","item","onClickHandler","className","tabIndex","iconRight","id","disabled","locked","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400","cloneElement"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport styled, { css } from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\r\nimport {Product, Size} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport { DropdownItem } from '../Dropdown/DropdownContent';\r\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\r\n\r\nexport interface MenuItemProps {\r\n   item: DropdownItem;\r\n   onClickHandler: (e: React.MouseEvent) => void;\r\n   active: boolean;\r\n   id: string;\r\n   size?: Size;\r\n   className?: string;\r\n   tabIndex?: number;\r\n   iconRight?: React.ReactElement;\r\n}\r\n\r\nexport const DropdownButton = styled.button<{ size?: Size }>`\r\n  ${(props) => DropdownButtonCSS(props.size)}\r\n`;\r\n\r\nexport const ItemLabel = styled.div``;\r\n\r\nexport const ItemIcon = styled.div``;\r\n\r\nexport const ItemIconRight = styled.div`\r\n  align-items: center;\r\n  display: flex;\r\n`;\r\n\r\nexport const ItemContent = styled.div<{size:Size}>`\r\n    margin: ${props=>props.size===Size.Small?'auto 0 auto 10px':(props.size===Size.Large?'auto 0 auto 26px':'auto 0 auto 18px')};\r\n    display: flex;\r\n    align-items: center;\r\n    flex-grow: 2;\r\n\r\n    ${ItemLabel} {\r\n      flex: 1 0 calc(100% - 40px);\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n    }\r\n\r\n    ${ItemIcon} {\r\n      margin-right: ${props=>props.size===Size.Small?'6px':'8px'};\r\n      svg {\r\n        display: block;\r\n        margin: auto;\r\n        height:${props=>props.size===Size.Small?'20px':''};\r\n        width:${props=>props.size===Size.Small?'20px':''};\r\n      }\r\n    }\r\n\r\n    ${ItemIconRight} {\r\n      flex-grow: 2;\r\n\r\n      .extraMargin {\r\n        margin-left: calc(100% - 24px);\r\n        position: absolute;\r\n        right: ${props=>props.size===Size.Small?'8px':(props.size===Size.Medium?'16px':'24px')};\r\n      }\r\n    }\r\n`;\r\n\r\n\r\nexport const DropdownButtonCSS = (size?: Size) => {\r\n  return css`\r\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n    position: relative;\r\n    text-decoration: none;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\r\n    background-color: ${COLORS.white};\r\n    border: none;\r\n    cursor: pointer;\r\n    background: none;\r\n    width: 100%;\r\n    text-align: left;\r\n\r\n    span {\r\n      margin: auto 0 auto 16px;\r\n      line-height: 48px;\r\n    }\r\n\r\n    ${ItemLabel}, ${ItemIcon} {\r\n      color: ${COLORS.neutral_600};\r\n    }\r\n\r\n    &:hover:not(.active):not(:disabled):not(.disabled-state),\r\n    &.hover-state:not(.active):not(:disabled):not(.disabled-state) {\r\n      background: ${COLORS.primary_20};\r\n      ${ItemLabel}, ${ItemIcon} {\r\n        color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n\r\n    &:focus, &.focus-state, &.focus-visible {\r\n      ${focusStyles}\r\n    }\r\n\r\n    &:active:not(.active):not(:disabled):not(.disabled-state), &.active-state {\r\n      background: ${COLORS.primary_100};\r\n      ${ItemLabel}, ${ItemIcon} {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n\r\n    &.active {\r\n      background: ${COLORS.neutral_20};\r\n\r\n      ${ItemLabel}, ${ItemIcon} {\r\n        color: ${COLORS.neutral_800};\r\n      }\r\n\r\n      &::after {\r\n        position: absolute;\r\n        content: ' ';\r\n        width: 4px;\r\n        top: 4px;\r\n        bottom: 4px;\r\n        left: 4px;\r\n        background-color: ${COLORS.primary_500};\r\n\r\n        border-radius: 4px;\r\n      }\r\n    }\r\n\r\n\r\n    &.locked {\r\n      background: none;\r\n      cursor: not-allowed;\r\n      \r\n      ${ItemIcon}, ${ItemLabel} {\r\n        color: ${COLORS.neutral_500};\r\n      }\r\n    }\r\n\r\n    &.active:hover:not(:disabled):not(.locked), &.active-hover-state {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      ${ItemIcon}, ${ItemLabel} {\r\n        color: ${COLORS.primary_700};\r\n      }      \r\n\r\n      &::after {\r\n        background-color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n\r\n    &.active:active:not(:disabled):not(.locked), &.active-active-state {\r\n      background-color: ${COLORS.primary_100};\r\n\r\n      ${ItemIcon}, ${ItemLabel} {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n\r\n      &::after {\r\n        background-color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n\r\n    &.active.locked {\r\n      &::after {\r\n        background-color: ${COLORS.neutral_500};\r\n      } \r\n    }\r\n\r\n    &.active:disabled:not(.locked) {\r\n      &::after {\r\n        background-color: ${COLORS.neutral_300};\r\n      }     \r\n    }\r\n\r\n    &:disabled:not(.locked), &.disabled-state {\r\n      background: none;\r\n      cursor: not-allowed;\r\n      \r\n      ${ItemIcon}, ${ItemLabel} {\r\n        color: ${COLORS.neutral_300} !important;\r\n      }\r\n    }\r\n\r\n    &.dropdown-hover:not(:disabled) {\r\n      background-color: ${COLORS.primary_20};\r\n      color: ${COLORS.primary_600};\r\n    }\r\n  `;\r\n};\r\n\r\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\r\n    active,\r\n    item,\r\n    onClickHandler,\r\n    size = Size.Medium,\r\n    className,\r\n    tabIndex,\r\n    iconRight,\r\n    id }: MenuItemProps, ref) => {\r\n  return (\r\n    <DropdownButton\r\n        type=\"button\"\r\n        size={size}\r\n        disabled={item.disabled || item.locked}\r\n        tabIndex={tabIndex}\r\n        onMouseDown={defaultOnMouseDownHandler}\r\n        ref={ref}\r\n        onClick={onClickHandler}\r\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\r\n        id={id}>\r\n        {item.showDividerAbove && <div className=\"divider\" />}\r\n        <ItemContent size={size}>\r\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\r\n          <ItemLabel>\r\n              <div>\r\n                <div>{item.displayLabel ?? item.value}</div>\r\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\r\n              </div>\r\n            {\r\n              item.locked &&\r\n              <ItemIconRight>\r\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\"/>\r\n              </ItemIconRight>\r\n            }\r\n            {\r\n              !item.locked && !!iconRight &&\r\n              <ItemIconRight>\r\n                {React.cloneElement(iconRight, {className: 'extraMargin', size: '24px',})}\r\n              </ItemIconRight>\r\n            }\r\n\r\n          </ItemLabel>\r\n        </ItemContent>\r\n  </DropdownButton>\r\n  );\r\n});\r\n\r\nexport default MenuItem;\r\n"],"file":"MenuItem.js"}

package/dist/MenuItem/index.d.ts

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

package/dist/MiniProductCard/MiniProductCard.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MiniProductCard/MiniProductCard.tsx"],"names":["ProductLink","Link","COLORS","black","BREAKPOINTS","MEDIUM","ProductThing","styled","div","primary_20","primary_600","primary_100","ProductImage","img","ProductName","h2","ComponentTextStyle","Regular","ProductType","span","ProductInnerWrapper","RightIconWrapper","MiniProductCard","url","product","image","name","type","primary"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAMA,IAAMA,WAAW,GAAG,+BAAOC,oBAAP,CAAH,uNAINC,eAAOC,KAJD,EAObC,oBAAYC,MAPC,CAAjB;;AAYA,IAAMC,YAAY,GAAGC,0BAAOC,GAAV,waAQAN,eAAOO,UARP,EAWJP,eAAOQ,WAXH,EAeAR,eAAOS,WAfP,EAkBJT,eAAOQ,WAlBH,CAAlB;;AAuBA,IAAME,YAAY,GAAGL,0BAAOM,GAAV,oKAAlB;;AAOA,IAAMC,WAAW,GAAGP,0BAAOQ,EAAV,kIACb,mCAAkBC,2BAAmBC,OAArC,EAA8Cf,eAAOC,KAArD,CADa,CAAjB;;AAMA,IAAMe,WAAW,GAAGX,0BAAOY,IAAV,8GACb,mCAAkBH,2BAAmBC,OAArC,EAA8Cf,eAAOC,KAArD,CADa,CAAjB;;AAKA,IAAMiB,mBAAmB,GAAGb,0BAAOC,GAAV,uKAAzB;;AAOA,IAAMa,gBAAgB,GAAGd,0BAAOC,GAAV,sLAAtB;;AAOA,IAAMc,eAAe,GAAG,SAAlBA,eAAkB,OAAiC;AAAA,MAA9BC,GAA8B,QAA9BA,GAA8B;AAAA,MAAzBC,OAAyB,QAAzBA,OAAyB;AACvD,sBACE,qBAAC,WAAD;AAAa,IAAA,EAAE,EAAED,GAAF,aAAEA,GAAF,cAAEA,GAAF,GAAS,EAAxB;AAAA,2BACE,sBAAC,YAAD;AAAA,iBACGC,OAAO,CAACC,KAAR,iBAAiB,qBAAC,YAAD;AAAc,QAAA,GAAG,EAAED,OAAO,CAACC;AAA3B,QADpB,eAEE,sBAAC,mBAAD;AAAA,gCACE,qBAAC,WAAD;AAAA,oBAAcD,OAAO,CAACE;AAAtB,UADF,eAEE,qBAAC,WAAD;AAAA,oBAAcF,OAAO,CAACG;AAAtB,UAFF;AAAA,QAFF,eAME,qBAAC,gBAAD;AAAA,+BACE,qBAAC,yBAAD;AAAc,UAAA,KAAK,EAAEzB,eAAO0B,OAA5B;AAAqC,UAAA,SAAS,EAAE,uBAAhD;AAAyE,UAAA,IAAI,EAAE;AAA/E;AADF,QANF;AAAA;AADF,IADF;AAcD,CAfD;;;AArEEL,EAAAA,G;;eAsFaD,e","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {Product} from '../types';\nimport {ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\ntype CardProps = {\n  product: Product;\n  url?: string;\n};\nconst ProductLink = styled(Link)`\n  display: flex;\n  flex: 1;\n  margin: 10px 8px;\n  color: ${COLORS.black};\n  text-decoration: none;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 305px;\n  }\n`;\n\nconst ProductThing = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  border-radius: 8px;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n\n  &:hover {\n    background: ${COLORS.primary_20};\n\n    .product-chevron-right-path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n  &:active {\n    background: ${COLORS.primary_100};\n\n    .product-chevron-right-path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n`;\n\nconst ProductImage = styled.img`\n  width: 95px;\n  height: 75px;\n  object-fit: fill;\n  border-radius: 8px;\n`;\n\nconst ProductName = styled.h2`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  margin: 0;\n  margin-top: 3px;\n`;\n\nconst ProductType = styled.span`\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  margin: 0;\n`;\n\nconst ProductInnerWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  padding: 12px 18px;\n  flex: 1;\n`;\n\nconst RightIconWrapper = styled.div`\n  display: flex;\n  justify-self: flex-start;\n  align-items: center;\n  padding-right: 12px;\n`;\n\nconst MiniProductCard = ({ url, product }: CardProps) => {\n  return (\n    <ProductLink to={url ?? ''}>\n      <ProductThing>\n        {product.image && <ProductImage src={product.image} />}\n        <ProductInnerWrapper>\n          <ProductName>{product.name}</ProductName>\n          <ProductType>{product.type}</ProductType>\n        </ProductInnerWrapper>\n        <RightIconWrapper>\n          <ChevronRight color={COLORS.primary} className={'product-chevron-right'} size={'24px'} />\n        </RightIconWrapper>\n      </ProductThing>\n    </ProductLink>\n  );\n};\n\nexport default MiniProductCard;\n"],"file":"MiniProductCard.cjs"}
+{"version":3,"sources":["../../src/MiniProductCard/MiniProductCard.tsx"],"names":["ProductLink","Link","COLORS","black","BREAKPOINTS","MEDIUM","ProductThing","styled","div","primary_20","primary_600","primary_100","ProductImage","img","ProductName","h2","ComponentTextStyle","Regular","ProductType","span","ProductInnerWrapper","RightIconWrapper","MiniProductCard","url","product","image","name","type","primary"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAMA,IAAMA,WAAW,GAAG,+BAAOC,oBAAP,CAAH,uNAINC,eAAOC,KAJD,EAObC,oBAAYC,MAPC,CAAjB;;AAYA,IAAMC,YAAY,GAAGC,0BAAOC,GAAV,waAQAN,eAAOO,UARP,EAWJP,eAAOQ,WAXH,EAeAR,eAAOS,WAfP,EAkBJT,eAAOQ,WAlBH,CAAlB;;AAuBA,IAAME,YAAY,GAAGL,0BAAOM,GAAV,oKAAlB;;AAOA,IAAMC,WAAW,GAAGP,0BAAOQ,EAAV,kIACb,mCAAkBC,2BAAmBC,OAArC,EAA8Cf,eAAOC,KAArD,CADa,CAAjB;;AAMA,IAAMe,WAAW,GAAGX,0BAAOY,IAAV,8GACb,mCAAkBH,2BAAmBC,OAArC,EAA8Cf,eAAOC,KAArD,CADa,CAAjB;;AAKA,IAAMiB,mBAAmB,GAAGb,0BAAOC,GAAV,uKAAzB;;AAOA,IAAMa,gBAAgB,GAAGd,0BAAOC,GAAV,sLAAtB;;AAOA,IAAMc,eAAe,GAAG,SAAlBA,eAAkB,OAAiC;AAAA,MAA9BC,GAA8B,QAA9BA,GAA8B;AAAA,MAAzBC,OAAyB,QAAzBA,OAAyB;AACvD,sBACE,qBAAC,WAAD;AAAa,IAAA,EAAE,EAAED,GAAF,aAAEA,GAAF,cAAEA,GAAF,GAAS,EAAxB;AAAA,2BACE,sBAAC,YAAD;AAAA,iBACGC,OAAO,CAACC,KAAR,iBAAiB,qBAAC,YAAD;AAAc,QAAA,GAAG,EAAED,OAAO,CAACC;AAA3B,QADpB,eAEE,sBAAC,mBAAD;AAAA,gCACE,qBAAC,WAAD;AAAA,oBAAcD,OAAO,CAACE;AAAtB,UADF,eAEE,qBAAC,WAAD;AAAA,oBAAcF,OAAO,CAACG;AAAtB,UAFF;AAAA,QAFF,eAME,qBAAC,gBAAD;AAAA,+BACE,qBAAC,yBAAD;AAAc,UAAA,KAAK,EAAEzB,eAAO0B,OAA5B;AAAqC,UAAA,SAAS,EAAE,uBAAhD;AAAyE,UAAA,IAAI,EAAE;AAA/E;AADF,QANF;AAAA;AADF,IADF;AAcD,CAfD;;;AArEEL,EAAAA,G;;eAsFaD,e","sourcesContent":["import * as React from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport styled from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\r\nimport {ChevronRight} from '../icons/systemicons/SystemIcons';\r\nimport {Product} from '../types';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\n\r\ntype CardProps = {\r\n  product: Product;\r\n  url?: string;\r\n};\r\nconst ProductLink = styled(Link)`\r\n  display: flex;\r\n  flex: 1;\r\n  margin: 10px 8px;\r\n  color: ${COLORS.black};\r\n  text-decoration: none;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 305px;\r\n  }\r\n`;\r\n\r\nconst ProductThing = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  border-radius: 8px;\r\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\r\n\r\n  &:hover {\r\n    background: ${COLORS.primary_20};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${COLORS.primary_600};\r\n    }\r\n  }\r\n  &:active {\r\n    background: ${COLORS.primary_100};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${COLORS.primary_600};\r\n    }\r\n  }\r\n`;\r\n\r\nconst ProductImage = styled.img`\r\n  width: 95px;\r\n  height: 75px;\r\n  object-fit: fill;\r\n  border-radius: 8px;\r\n`;\r\n\r\nconst ProductName = styled.h2`\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  margin: 0;\r\n  margin-top: 3px;\r\n`;\r\n\r\nconst ProductType = styled.span`\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  margin: 0;\r\n`;\r\n\r\nconst ProductInnerWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 12px 18px;\r\n  flex: 1;\r\n`;\r\n\r\nconst RightIconWrapper = styled.div`\r\n  display: flex;\r\n  justify-self: flex-start;\r\n  align-items: center;\r\n  padding-right: 12px;\r\n`;\r\n\r\nconst MiniProductCard = ({ url, product }: CardProps) => {\r\n  return (\r\n    <ProductLink to={url ?? ''}>\r\n      <ProductThing>\r\n        {product.image && <ProductImage src={product.image} />}\r\n        <ProductInnerWrapper>\r\n          <ProductName>{product.name}</ProductName>\r\n          <ProductType>{product.type}</ProductType>\r\n        </ProductInnerWrapper>\r\n        <RightIconWrapper>\r\n          <ChevronRight color={COLORS.primary} className={'product-chevron-right'} size={'24px'} />\r\n        </RightIconWrapper>\r\n      </ProductThing>\r\n    </ProductLink>\r\n  );\r\n};\r\n\r\nexport default MiniProductCard;\r\n"],"file":"MiniProductCard.cjs"}

package/dist/MiniProductCard/MiniProductCard.d.ts

@@ -1,7 +1,7 @@
-import { Product } from '../types';
-declare type CardProps = {
-    product: Product;
-    url?: string;
-};
-declare const MiniProductCard: ({ url, product }: CardProps) => JSX.Element;
-export default MiniProductCard;
+import { Product } from '../types';
+declare type CardProps = {
+    product: Product;
+    url?: string;
+};
+declare const MiniProductCard: ({ url, product }: CardProps) => JSX.Element;
+export default MiniProductCard;

package/dist/MiniProductCard/MiniProductCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MiniProductCard/MiniProductCard.tsx"],"names":["React","Link","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ChevronRight","ComponentMStyling","ComponentSStyling","ProductLink","black","MEDIUM","ProductThing","div","primary_20","primary_600","primary_100","ProductImage","img","ProductName","h2","Regular","ProductType","span","ProductInnerWrapper","RightIconWrapper","MiniProductCard","url","product","image","name","type","primary"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAAQC,IAAR,QAAmB,kBAAnB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,kBAA7B,QAAsD,WAAtD;AACA,SAAQC,YAAR,QAA2B,kCAA3B;AAEA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,sBAAnD;;;AAMA,IAAMC,WAAW,GAAGP,MAAM,CAACD,IAAD,CAAT,yMAING,MAAM,CAACM,KAJD,EAObP,WAAW,CAACQ,MAPC,CAAjB;AAYA,IAAMC,YAAY,GAAGV,MAAM,CAACW,GAAV,0ZAQAT,MAAM,CAACU,UARP,EAWJV,MAAM,CAACW,WAXH,EAeAX,MAAM,CAACY,WAfP,EAkBJZ,MAAM,CAACW,WAlBH,CAAlB;AAuBA,IAAME,YAAY,GAAGf,MAAM,CAACgB,GAAV,sJAAlB;AAOA,IAAMC,WAAW,GAAGjB,MAAM,CAACkB,EAAV,oHACbb,iBAAiB,CAACF,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACM,KAApC,CADJ,CAAjB;AAMA,IAAMY,WAAW,GAAGpB,MAAM,CAACqB,IAAV,gGACbf,iBAAiB,CAACH,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACM,KAApC,CADJ,CAAjB;AAKA,IAAMc,mBAAmB,GAAGtB,MAAM,CAACW,GAAV,yJAAzB;AAOA,IAAMY,gBAAgB,GAAGvB,MAAM,CAACW,GAAV,wKAAtB;;AAOA,IAAMa,eAAe,GAAG,SAAlBA,eAAkB,OAAiC;AAAA,MAA9BC,GAA8B,QAA9BA,GAA8B;AAAA,MAAzBC,OAAyB,QAAzBA,OAAyB;AACvD,sBACE,KAAC,WAAD;AAAa,IAAA,EAAE,EAAED,GAAF,aAAEA,GAAF,cAAEA,GAAF,GAAS,EAAxB;AAAA,2BACE,MAAC,YAAD;AAAA,iBACGC,OAAO,CAACC,KAAR,iBAAiB,KAAC,YAAD;AAAc,QAAA,GAAG,EAAED,OAAO,CAACC;AAA3B,QADpB,eAEE,MAAC,mBAAD;AAAA,gCACE,KAAC,WAAD;AAAA,oBAAcD,OAAO,CAACE;AAAtB,UADF,eAEE,KAAC,WAAD;AAAA,oBAAcF,OAAO,CAACG;AAAtB,UAFF;AAAA,QAFF,eAME,KAAC,gBAAD;AAAA,+BACE,KAAC,YAAD;AAAc,UAAA,KAAK,EAAE3B,MAAM,CAAC4B,OAA5B;AAAqC,UAAA,SAAS,EAAE,uBAAhD;AAAyE,UAAA,IAAI,EAAE;AAA/E;AADF,QANF;AAAA;AADF,IADF;AAcD,CAfD;;;AArEEL,EAAAA,G;;AAsFF,eAAeD,eAAf","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {Product} from '../types';\nimport {ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\ntype CardProps = {\n  product: Product;\n  url?: string;\n};\nconst ProductLink = styled(Link)`\n  display: flex;\n  flex: 1;\n  margin: 10px 8px;\n  color: ${COLORS.black};\n  text-decoration: none;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 305px;\n  }\n`;\n\nconst ProductThing = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  border-radius: 8px;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n\n  &:hover {\n    background: ${COLORS.primary_20};\n\n    .product-chevron-right-path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n  &:active {\n    background: ${COLORS.primary_100};\n\n    .product-chevron-right-path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n`;\n\nconst ProductImage = styled.img`\n  width: 95px;\n  height: 75px;\n  object-fit: fill;\n  border-radius: 8px;\n`;\n\nconst ProductName = styled.h2`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  margin: 0;\n  margin-top: 3px;\n`;\n\nconst ProductType = styled.span`\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  margin: 0;\n`;\n\nconst ProductInnerWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  padding: 12px 18px;\n  flex: 1;\n`;\n\nconst RightIconWrapper = styled.div`\n  display: flex;\n  justify-self: flex-start;\n  align-items: center;\n  padding-right: 12px;\n`;\n\nconst MiniProductCard = ({ url, product }: CardProps) => {\n  return (\n    <ProductLink to={url ?? ''}>\n      <ProductThing>\n        {product.image && <ProductImage src={product.image} />}\n        <ProductInnerWrapper>\n          <ProductName>{product.name}</ProductName>\n          <ProductType>{product.type}</ProductType>\n        </ProductInnerWrapper>\n        <RightIconWrapper>\n          <ChevronRight color={COLORS.primary} className={'product-chevron-right'} size={'24px'} />\n        </RightIconWrapper>\n      </ProductThing>\n    </ProductLink>\n  );\n};\n\nexport default MiniProductCard;\n"],"file":"MiniProductCard.js"}
+{"version":3,"sources":["../../src/MiniProductCard/MiniProductCard.tsx"],"names":["React","Link","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ChevronRight","ComponentMStyling","ComponentSStyling","ProductLink","black","MEDIUM","ProductThing","div","primary_20","primary_600","primary_100","ProductImage","img","ProductName","h2","Regular","ProductType","span","ProductInnerWrapper","RightIconWrapper","MiniProductCard","url","product","image","name","type","primary"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAAQC,IAAR,QAAmB,kBAAnB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,kBAA7B,QAAsD,WAAtD;AACA,SAAQC,YAAR,QAA2B,kCAA3B;AAEA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,sBAAnD;;;AAMA,IAAMC,WAAW,GAAGP,MAAM,CAACD,IAAD,CAAT,yMAING,MAAM,CAACM,KAJD,EAObP,WAAW,CAACQ,MAPC,CAAjB;AAYA,IAAMC,YAAY,GAAGV,MAAM,CAACW,GAAV,0ZAQAT,MAAM,CAACU,UARP,EAWJV,MAAM,CAACW,WAXH,EAeAX,MAAM,CAACY,WAfP,EAkBJZ,MAAM,CAACW,WAlBH,CAAlB;AAuBA,IAAME,YAAY,GAAGf,MAAM,CAACgB,GAAV,sJAAlB;AAOA,IAAMC,WAAW,GAAGjB,MAAM,CAACkB,EAAV,oHACbb,iBAAiB,CAACF,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACM,KAApC,CADJ,CAAjB;AAMA,IAAMY,WAAW,GAAGpB,MAAM,CAACqB,IAAV,gGACbf,iBAAiB,CAACH,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACM,KAApC,CADJ,CAAjB;AAKA,IAAMc,mBAAmB,GAAGtB,MAAM,CAACW,GAAV,yJAAzB;AAOA,IAAMY,gBAAgB,GAAGvB,MAAM,CAACW,GAAV,wKAAtB;;AAOA,IAAMa,eAAe,GAAG,SAAlBA,eAAkB,OAAiC;AAAA,MAA9BC,GAA8B,QAA9BA,GAA8B;AAAA,MAAzBC,OAAyB,QAAzBA,OAAyB;AACvD,sBACE,KAAC,WAAD;AAAa,IAAA,EAAE,EAAED,GAAF,aAAEA,GAAF,cAAEA,GAAF,GAAS,EAAxB;AAAA,2BACE,MAAC,YAAD;AAAA,iBACGC,OAAO,CAACC,KAAR,iBAAiB,KAAC,YAAD;AAAc,QAAA,GAAG,EAAED,OAAO,CAACC;AAA3B,QADpB,eAEE,MAAC,mBAAD;AAAA,gCACE,KAAC,WAAD;AAAA,oBAAcD,OAAO,CAACE;AAAtB,UADF,eAEE,KAAC,WAAD;AAAA,oBAAcF,OAAO,CAACG;AAAtB,UAFF;AAAA,QAFF,eAME,KAAC,gBAAD;AAAA,+BACE,KAAC,YAAD;AAAc,UAAA,KAAK,EAAE3B,MAAM,CAAC4B,OAA5B;AAAqC,UAAA,SAAS,EAAE,uBAAhD;AAAyE,UAAA,IAAI,EAAE;AAA/E;AADF,QANF;AAAA;AADF,IADF;AAcD,CAfD;;;AArEEL,EAAAA,G;;AAsFF,eAAeD,eAAf","sourcesContent":["import * as React from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport styled from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\r\nimport {ChevronRight} from '../icons/systemicons/SystemIcons';\r\nimport {Product} from '../types';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\n\r\ntype CardProps = {\r\n  product: Product;\r\n  url?: string;\r\n};\r\nconst ProductLink = styled(Link)`\r\n  display: flex;\r\n  flex: 1;\r\n  margin: 10px 8px;\r\n  color: ${COLORS.black};\r\n  text-decoration: none;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 305px;\r\n  }\r\n`;\r\n\r\nconst ProductThing = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  border-radius: 8px;\r\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\r\n\r\n  &:hover {\r\n    background: ${COLORS.primary_20};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${COLORS.primary_600};\r\n    }\r\n  }\r\n  &:active {\r\n    background: ${COLORS.primary_100};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${COLORS.primary_600};\r\n    }\r\n  }\r\n`;\r\n\r\nconst ProductImage = styled.img`\r\n  width: 95px;\r\n  height: 75px;\r\n  object-fit: fill;\r\n  border-radius: 8px;\r\n`;\r\n\r\nconst ProductName = styled.h2`\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  margin: 0;\r\n  margin-top: 3px;\r\n`;\r\n\r\nconst ProductType = styled.span`\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  margin: 0;\r\n`;\r\n\r\nconst ProductInnerWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 12px 18px;\r\n  flex: 1;\r\n`;\r\n\r\nconst RightIconWrapper = styled.div`\r\n  display: flex;\r\n  justify-self: flex-start;\r\n  align-items: center;\r\n  padding-right: 12px;\r\n`;\r\n\r\nconst MiniProductCard = ({ url, product }: CardProps) => {\r\n  return (\r\n    <ProductLink to={url ?? ''}>\r\n      <ProductThing>\r\n        {product.image && <ProductImage src={product.image} />}\r\n        <ProductInnerWrapper>\r\n          <ProductName>{product.name}</ProductName>\r\n          <ProductType>{product.type}</ProductType>\r\n        </ProductInnerWrapper>\r\n        <RightIconWrapper>\r\n          <ChevronRight color={COLORS.primary} className={'product-chevron-right'} size={'24px'} />\r\n        </RightIconWrapper>\r\n      </ProductThing>\r\n    </ProductLink>\r\n  );\r\n};\r\n\r\nexport default MiniProductCard;\r\n"],"file":"MiniProductCard.js"}

package/dist/MiniProductCard/index.cjs.map

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

package/dist/MiniProductCard/index.d.ts

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

package/dist/MiniProductCard/index.js.map

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

package/dist/Modals/Modal.cjs

@@ -33,8 +33,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/**
- * Modal styles
+/**
+ * Modal styles
  */
 var Column = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n"])));
 

package/dist/Modals/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/Modal.tsx"],"names":["Column","styled","div","StyledButton","IconButton","ModalCloseButton","onClick","COLORS","black","Modal","children","Header","Body","Footer"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA;AACA;AACA;AACA,IAAMA,MAAM,GAAGC,0BAAOC,GAAV,gLAAZ;;AAOA,IAAMC,YAAY,GAAG,+BAAOC,kBAAP,CAAH,yGAAlB;;AAIO,IAAMC,gBAAkE,GAAG,SAArEA,gBAAqE,OAAiB;AAAA,MAAdC,OAAc,QAAdA,OAAc;AACjG,sBACE,qBAAC,YAAD;AAAc,IAAA,OAAO,EAAC,WAAtB;AAAkC,IAAA,KAAK,EAAC,QAAxC;AAAiD,IAAA,MAAM,EAAEA,OAAzD;AAAA,2BACE,qBAAC,kBAAD;AAAO,MAAA,IAAI,EAAC,MAAZ;AAAmB,MAAA,KAAK,EAAEC,eAAOC;AAAjC;AADF,IADF;AAKD,CANM;;;;AAYP,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,MAAGC,QAAH,SAAGA,QAAH;AAAA,sBAA8B,qBAAC,MAAD;AAAA,cAASA;AAAT,IAA9B;AAAA,CAAd;;;AAHEA,EAAAA,Q;;;AAKFD,KAAK,CAACE,MAAN,GAAe;AAAA,MAAGD,QAAH,SAAGA,QAAH;AAAA,sBAA8B,qBAAC,wBAAD;AAAA,cAAcA;AAAd,IAA9B;AAAA,CAAf;;AAEAD,KAAK,CAACG,IAAN,GAAa;AAAA,MAAGF,QAAH,SAAGA,QAAH;AAAA,sBAA8B,qBAAC,sBAAD;AAAA,cAAYA;AAAZ,IAA9B;AAAA,CAAb;;AAEAD,KAAK,CAACI,MAAN,GAAe;AAAA,MAAGH,QAAH,SAAGA,QAAH;AAAA,sBAA8B,qBAAC,wBAAD;AAAA,cAAcA;AAAd,IAA9B;AAAA,CAAf;;eAEeD,K","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { ModalHeader, ModalBody, ModalFooter } from './ModalStyles';\n\n/**\n * Modal styles\n */\nconst Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nconst StyledButton = styled(IconButton)`\n  display: flex;\n`;\n\nexport const ModalCloseButton: React.FunctionComponent<{ onClick: () => void }> = ({ onClick }) => {\n  return (\n    <StyledButton variant=\"secondary\" shape=\"square\" action={onClick}>\n      <Close size=\"24px\" color={COLORS.black} />\n    </StyledButton>\n  );\n};\n\ntype ModalProps = {\n  children: any;\n};\n\nconst Modal = ({ children }: ModalProps) => <Column>{children}</Column>;\n\nModal.Header = ({ children }: ModalProps) => <ModalHeader>{children}</ModalHeader>;\n\nModal.Body = ({ children }: ModalProps) => <ModalBody>{children}</ModalBody>;\n\nModal.Footer = ({ children }: ModalProps) => <ModalFooter>{children}</ModalFooter>;\n\nexport default Modal;\n"],"file":"Modal.cjs"}
+{"version":3,"sources":["../../src/Modals/Modal.tsx"],"names":["Column","styled","div","StyledButton","IconButton","ModalCloseButton","onClick","COLORS","black","Modal","children","Header","Body","Footer"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA;AACA;AACA;AACA,IAAMA,MAAM,GAAGC,0BAAOC,GAAV,gLAAZ;;AAOA,IAAMC,YAAY,GAAG,+BAAOC,kBAAP,CAAH,yGAAlB;;AAIO,IAAMC,gBAAkE,GAAG,SAArEA,gBAAqE,OAAiB;AAAA,MAAdC,OAAc,QAAdA,OAAc;AACjG,sBACE,qBAAC,YAAD;AAAc,IAAA,OAAO,EAAC,WAAtB;AAAkC,IAAA,KAAK,EAAC,QAAxC;AAAiD,IAAA,MAAM,EAAEA,OAAzD;AAAA,2BACE,qBAAC,kBAAD;AAAO,MAAA,IAAI,EAAC,MAAZ;AAAmB,MAAA,KAAK,EAAEC,eAAOC;AAAjC;AADF,IADF;AAKD,CANM;;;;AAYP,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,MAAGC,QAAH,SAAGA,QAAH;AAAA,sBAA8B,qBAAC,MAAD;AAAA,cAASA;AAAT,IAA9B;AAAA,CAAd;;;AAHEA,EAAAA,Q;;;AAKFD,KAAK,CAACE,MAAN,GAAe;AAAA,MAAGD,QAAH,SAAGA,QAAH;AAAA,sBAA8B,qBAAC,wBAAD;AAAA,cAAcA;AAAd,IAA9B;AAAA,CAAf;;AAEAD,KAAK,CAACG,IAAN,GAAa;AAAA,MAAGF,QAAH,SAAGA,QAAH;AAAA,sBAA8B,qBAAC,sBAAD;AAAA,cAAYA;AAAZ,IAA9B;AAAA,CAAb;;AAEAD,KAAK,CAACI,MAAN,GAAe;AAAA,MAAGH,QAAH,SAAGA,QAAH;AAAA,sBAA8B,qBAAC,wBAAD;AAAA,cAAcA;AAAd,IAA9B;AAAA,CAAf;;eAEeD,K","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { IconButton } from '../Button';\r\nimport { Close } from '../icons/systemicons/SystemIcons';\r\nimport { COLORS } from '../styles';\r\nimport { ModalHeader, ModalBody, ModalFooter } from './ModalStyles';\r\n\r\n/**\r\n * Modal styles\r\n */\r\nconst 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\nconst StyledButton = styled(IconButton)`\r\n  display: flex;\r\n`;\r\n\r\nexport const ModalCloseButton: React.FunctionComponent<{ onClick: () => void }> = ({ onClick }) => {\r\n  return (\r\n    <StyledButton variant=\"secondary\" shape=\"square\" action={onClick}>\r\n      <Close size=\"24px\" color={COLORS.black} />\r\n    </StyledButton>\r\n  );\r\n};\r\n\r\ntype ModalProps = {\r\n  children: any;\r\n};\r\n\r\nconst Modal = ({ children }: ModalProps) => <Column>{children}</Column>;\r\n\r\nModal.Header = ({ children }: ModalProps) => <ModalHeader>{children}</ModalHeader>;\r\n\r\nModal.Body = ({ children }: ModalProps) => <ModalBody>{children}</ModalBody>;\r\n\r\nModal.Footer = ({ children }: ModalProps) => <ModalFooter>{children}</ModalFooter>;\r\n\r\nexport default Modal;\r\n"],"file":"Modal.cjs"}

package/dist/Modals/Modal.d.ts

@@ -1,14 +1,14 @@
-import * as React from 'react';
-export declare const ModalCloseButton: React.FunctionComponent<{
-    onClick: () => void;
-}>;
-declare type ModalProps = {
-    children: any;
-};
-declare const Modal: {
-    ({ children }: ModalProps): JSX.Element;
-    Header({ children }: ModalProps): JSX.Element;
-    Body({ children }: ModalProps): JSX.Element;
-    Footer({ children }: ModalProps): JSX.Element;
-};
-export default Modal;
+import * as React from 'react';
+export declare const ModalCloseButton: React.FunctionComponent<{
+    onClick: () => void;
+}>;
+declare type ModalProps = {
+    children: any;
+};
+declare const Modal: {
+    ({ children }: ModalProps): JSX.Element;
+    Header({ children }: ModalProps): JSX.Element;
+    Body({ children }: ModalProps): JSX.Element;
+    Footer({ children }: ModalProps): JSX.Element;
+};
+export default Modal;

package/dist/Modals/Modal.js

@@ -9,8 +9,8 @@ import { IconButton } from '../Button';
 import { Close } from '../icons/systemicons/SystemIcons';
 import { COLORS } from '../styles';
 import { ModalHeader, ModalBody, ModalFooter } from './ModalStyles';
-/**
- * Modal styles
+/**
+ * Modal styles
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/Modals/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/Modal.tsx"],"names":["React","styled","IconButton","Close","COLORS","ModalHeader","ModalBody","ModalFooter","Column","div","StyledButton","ModalCloseButton","onClick","black","Modal","children","Header","Body","Footer"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,UAAT,QAA2B,WAA3B;AACA,SAASC,KAAT,QAAsB,kCAAtB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,WAAT,EAAsBC,SAAtB,EAAiCC,WAAjC,QAAoD,eAApD;AAEA;AACA;AACA;;;AACA,IAAMC,MAAM,GAAGP,MAAM,CAACQ,GAAV,kKAAZ;AAOA,IAAMC,YAAY,GAAGT,MAAM,CAACC,UAAD,CAAT,2FAAlB;AAIA,OAAO,IAAMS,gBAAkE,GAAG,SAArEA,gBAAqE,OAAiB;AAAA,MAAdC,OAAc,QAAdA,OAAc;AACjG,sBACE,KAAC,YAAD;AAAc,IAAA,OAAO,EAAC,WAAtB;AAAkC,IAAA,KAAK,EAAC,QAAxC;AAAiD,IAAA,MAAM,EAAEA,OAAzD;AAAA,2BACE,KAAC,KAAD;AAAO,MAAA,IAAI,EAAC,MAAZ;AAAmB,MAAA,KAAK,EAAER,MAAM,CAACS;AAAjC;AADF,IADF;AAKD,CANM;;AAYP,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,MAAGC,QAAH,SAAGA,QAAH;AAAA,sBAA8B,KAAC,MAAD;AAAA,cAASA;AAAT,IAA9B;AAAA,CAAd;;;AAHEA,EAAAA,Q;;;AAKFD,KAAK,CAACE,MAAN,GAAe;AAAA,MAAGD,QAAH,SAAGA,QAAH;AAAA,sBAA8B,KAAC,WAAD;AAAA,cAAcA;AAAd,IAA9B;AAAA,CAAf;;AAEAD,KAAK,CAACG,IAAN,GAAa;AAAA,MAAGF,QAAH,SAAGA,QAAH;AAAA,sBAA8B,KAAC,SAAD;AAAA,cAAYA;AAAZ,IAA9B;AAAA,CAAb;;AAEAD,KAAK,CAACI,MAAN,GAAe;AAAA,MAAGH,QAAH,SAAGA,QAAH;AAAA,sBAA8B,KAAC,WAAD;AAAA,cAAcA;AAAd,IAA9B;AAAA,CAAf;;AAEA,eAAeD,KAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { ModalHeader, ModalBody, ModalFooter } from './ModalStyles';\n\n/**\n * Modal styles\n */\nconst Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nconst StyledButton = styled(IconButton)`\n  display: flex;\n`;\n\nexport const ModalCloseButton: React.FunctionComponent<{ onClick: () => void }> = ({ onClick }) => {\n  return (\n    <StyledButton variant=\"secondary\" shape=\"square\" action={onClick}>\n      <Close size=\"24px\" color={COLORS.black} />\n    </StyledButton>\n  );\n};\n\ntype ModalProps = {\n  children: any;\n};\n\nconst Modal = ({ children }: ModalProps) => <Column>{children}</Column>;\n\nModal.Header = ({ children }: ModalProps) => <ModalHeader>{children}</ModalHeader>;\n\nModal.Body = ({ children }: ModalProps) => <ModalBody>{children}</ModalBody>;\n\nModal.Footer = ({ children }: ModalProps) => <ModalFooter>{children}</ModalFooter>;\n\nexport default Modal;\n"],"file":"Modal.js"}
+{"version":3,"sources":["../../src/Modals/Modal.tsx"],"names":["React","styled","IconButton","Close","COLORS","ModalHeader","ModalBody","ModalFooter","Column","div","StyledButton","ModalCloseButton","onClick","black","Modal","children","Header","Body","Footer"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,UAAT,QAA2B,WAA3B;AACA,SAASC,KAAT,QAAsB,kCAAtB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,WAAT,EAAsBC,SAAtB,EAAiCC,WAAjC,QAAoD,eAApD;AAEA;AACA;AACA;;;AACA,IAAMC,MAAM,GAAGP,MAAM,CAACQ,GAAV,kKAAZ;AAOA,IAAMC,YAAY,GAAGT,MAAM,CAACC,UAAD,CAAT,2FAAlB;AAIA,OAAO,IAAMS,gBAAkE,GAAG,SAArEA,gBAAqE,OAAiB;AAAA,MAAdC,OAAc,QAAdA,OAAc;AACjG,sBACE,KAAC,YAAD;AAAc,IAAA,OAAO,EAAC,WAAtB;AAAkC,IAAA,KAAK,EAAC,QAAxC;AAAiD,IAAA,MAAM,EAAEA,OAAzD;AAAA,2BACE,KAAC,KAAD;AAAO,MAAA,IAAI,EAAC,MAAZ;AAAmB,MAAA,KAAK,EAAER,MAAM,CAACS;AAAjC;AADF,IADF;AAKD,CANM;;AAYP,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,MAAGC,QAAH,SAAGA,QAAH;AAAA,sBAA8B,KAAC,MAAD;AAAA,cAASA;AAAT,IAA9B;AAAA,CAAd;;;AAHEA,EAAAA,Q;;;AAKFD,KAAK,CAACE,MAAN,GAAe;AAAA,MAAGD,QAAH,SAAGA,QAAH;AAAA,sBAA8B,KAAC,WAAD;AAAA,cAAcA;AAAd,IAA9B;AAAA,CAAf;;AAEAD,KAAK,CAACG,IAAN,GAAa;AAAA,MAAGF,QAAH,SAAGA,QAAH;AAAA,sBAA8B,KAAC,SAAD;AAAA,cAAYA;AAAZ,IAA9B;AAAA,CAAb;;AAEAD,KAAK,CAACI,MAAN,GAAe;AAAA,MAAGH,QAAH,SAAGA,QAAH;AAAA,sBAA8B,KAAC,WAAD;AAAA,cAAcA;AAAd,IAA9B;AAAA,CAAf;;AAEA,eAAeD,KAAf","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { IconButton } from '../Button';\r\nimport { Close } from '../icons/systemicons/SystemIcons';\r\nimport { COLORS } from '../styles';\r\nimport { ModalHeader, ModalBody, ModalFooter } from './ModalStyles';\r\n\r\n/**\r\n * Modal styles\r\n */\r\nconst 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\nconst StyledButton = styled(IconButton)`\r\n  display: flex;\r\n`;\r\n\r\nexport const ModalCloseButton: React.FunctionComponent<{ onClick: () => void }> = ({ onClick }) => {\r\n  return (\r\n    <StyledButton variant=\"secondary\" shape=\"square\" action={onClick}>\r\n      <Close size=\"24px\" color={COLORS.black} />\r\n    </StyledButton>\r\n  );\r\n};\r\n\r\ntype ModalProps = {\r\n  children: any;\r\n};\r\n\r\nconst Modal = ({ children }: ModalProps) => <Column>{children}</Column>;\r\n\r\nModal.Header = ({ children }: ModalProps) => <ModalHeader>{children}</ModalHeader>;\r\n\r\nModal.Body = ({ children }: ModalProps) => <ModalBody>{children}</ModalBody>;\r\n\r\nModal.Footer = ({ children }: ModalProps) => <ModalFooter>{children}</ModalFooter>;\r\n\r\nexport default Modal;\r\n"],"file":"Modal.js"}

package/dist/Modals/ModalContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","ModalContainer","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","prevProps","prevState","scroll","snapshot","resetScroll","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","getElementById","offset","openInstances","setState","body","position","state","scrollTo","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport {BOXSHADOWS} from '../styles';\nimport {Z_INDEXES} from '../styles';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  height?: any;\n  width?: any;\n  overflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  zIndex?: number;\n};\n\ntype ModalContainerState = {\n  scroll: number;\n};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  private static openInstances = 0;\n\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n\n    if (this.props.showModal) {\n      this.preventScroll(window.scrollY);\n    }\n  }\n\n  getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\n    return {scroll: window.scrollY};\n  }\n\n  componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\n    if (this.props.showModal && !prevProps.showModal) {\n      this.preventScroll(snapshot!.scroll);\n    }\n    if (!this.props.showModal && prevProps.showModal) {\n      this.resetScroll();\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.props.showModal) {\n      this.resetScroll();\n    }\n  }\n\n  render() {\n    const {\n      id,\n      showModal,\n      closeModal,\n      children,\n      height = 'auto',\n      width = 'auto',\n      overflow = 'visible',\n      padding,\n      minWidth = '',\n      maxWidth = '',\n      zIndex = parseInt(Z_INDEXES.modal)\n    } = this.props;\n\n    // should be at least z-index of modal and below z-index of toast\n    const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\n    const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\n      height,\n      width,\n      padding,\n      overflow,\n      minWidth,\n      maxWidth,\n      zIndex: zIndexValue\n    });\n    const styles = {content: stylesConfiguration};\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles}\n                  appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n\n  private preventScroll(offset: number) {\n    if (!ModalContainer.openInstances) {\n      this.setState({scroll: offset});\n      document.body.style.position = 'fixed';\n      document.body.style.left = `0px`;\n      document.body.style.right = `0px`;\n      document.body.style.top = `-${offset}px`;\n    }\n    ModalContainer.openInstances++\n  }\n\n  private resetScroll() {\n    ModalContainer.openInstances--;\n    if (!ModalContainer.openInstances) {\n      //@ts-ignore\n      document.body.style.position = null;\n      //@ts-ignore\n      document.body.style.left = null;\n      //@ts-ignore\n      document.body.style.top = null;\n      //@ts-ignore\n      document.body.style.right = null;\n      this.state.scroll && window.scrollTo(0, this.state.scroll);\n      this.setState({scroll: 0});\n    }\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.cjs"}
+{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","ModalContainer","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","prevProps","prevState","scroll","snapshot","resetScroll","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","getElementById","offset","openInstances","setState","body","position","state","scrollTo","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport ReactModal from 'react-modal';\r\nimport {BOXSHADOWS} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\n\r\nconst ModalContainerStyles = {\r\n  content: {\r\n    top: '50%',\r\n    left: '50%',\r\n    right: 'auto',\r\n    bottom: 'auto',\r\n    marginRight: '-50%',\r\n    width: '640px',\r\n    height: '320px',\r\n    borderRadius: '8px',\r\n    boxSizing: 'border-box' as any,\r\n    margin: 0,\r\n    overflow: 'auto',\r\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\r\n  },\r\n};\r\n\r\n//override modal classes to define the animations\r\nconst modalTransitions = `\r\n.ReactModal__Overlay {\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.backdrop};\r\n}\r\n\r\n.ReactModal__Overlay--after-open {\r\n  opacity: 1;\r\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content{\r\n  z-index: ${Z_INDEXES.modal};\r\n  opacity:0;\r\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\r\n}\r\n\r\n.ReactModal__Content--after-open{\r\n  opacity: 1;\r\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\r\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Overlay--before-close {\r\n  opacity: 0;\r\n  transition: opacity 120ms linear;\r\n}\r\n\r\n.ReactModal__Content--before-close{\r\n  opacity: 0;\r\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\r\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\r\n}\r\n`;\r\n\r\n\r\ntype ModalContainerProps = {\r\n  id?: string;\r\n  showModal: boolean;\r\n  closeModal: () => void;\r\n  children: any;\r\n  height?: any;\r\n  width?: any;\r\n  overflow?: string;\r\n  padding?: string;\r\n  minWidth?: string;\r\n  maxWidth?: string;\r\n  zIndex?: number;\r\n};\r\n\r\ntype ModalContainerState = {\r\n  scroll: number;\r\n};\r\n\r\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\r\n  private static openInstances = 0;\r\n\r\n  componentDidMount() {\r\n    if (ReactModal.defaultStyles.overlay) {\r\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\r\n    }\r\n\r\n    //append style node to override modal transition classes\r\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\r\n      const head = document.head || document.getElementsByTagName('head')[0];\r\n      const style = document.createElement('style');\r\n      style.setAttribute('modal-custom-styling', 'active');\r\n      head.appendChild(style);\r\n      style.appendChild(document.createTextNode(modalTransitions));\r\n    }\r\n\r\n    if (this.props.showModal) {\r\n      this.preventScroll(window.scrollY);\r\n    }\r\n  }\r\n\r\n  getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\r\n    return {scroll: window.scrollY};\r\n  }\r\n\r\n  componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\r\n    if (this.props.showModal && !prevProps.showModal) {\r\n      this.preventScroll(snapshot!.scroll);\r\n    }\r\n    if (!this.props.showModal && prevProps.showModal) {\r\n      this.resetScroll();\r\n    }\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    if (this.props.showModal) {\r\n      this.resetScroll();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const {\r\n      id,\r\n      showModal,\r\n      closeModal,\r\n      children,\r\n      height = 'auto',\r\n      width = 'auto',\r\n      overflow = 'visible',\r\n      padding,\r\n      minWidth = '',\r\n      maxWidth = '',\r\n      zIndex = parseInt(Z_INDEXES.modal)\r\n    } = this.props;\r\n\r\n    // should be at least z-index of modal and below z-index of toast\r\n    const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\r\n    const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\r\n      height,\r\n      width,\r\n      padding,\r\n      overflow,\r\n      minWidth,\r\n      maxWidth,\r\n      zIndex: zIndexValue\r\n    });\r\n    const styles = {content: stylesConfiguration};\r\n\r\n    return (\r\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles}\r\n                  appElement={document.getElementById('root') || ''}>\r\n        {children}\r\n      </ReactModal>\r\n    );\r\n  }\r\n\r\n  private preventScroll(offset: number) {\r\n    if (!ModalContainer.openInstances) {\r\n      this.setState({scroll: offset});\r\n      document.body.style.position = 'fixed';\r\n      document.body.style.left = `0px`;\r\n      document.body.style.right = `0px`;\r\n      document.body.style.top = `-${offset}px`;\r\n    }\r\n    ModalContainer.openInstances++\r\n  }\r\n\r\n  private resetScroll() {\r\n    ModalContainer.openInstances--;\r\n    if (!ModalContainer.openInstances) {\r\n      //@ts-ignore\r\n      document.body.style.position = null;\r\n      //@ts-ignore\r\n      document.body.style.left = null;\r\n      //@ts-ignore\r\n      document.body.style.top = null;\r\n      //@ts-ignore\r\n      document.body.style.right = null;\r\n      this.state.scroll && window.scrollTo(0, this.state.scroll);\r\n      this.setState({scroll: 0});\r\n    }\r\n  }\r\n}\r\n\r\nexport default ModalContainer;\r\n"],"file":"ModalContainer.cjs"}