@laerdal/life-react-components 1.5.1-dev.4 → 1.5.1-dev.40

package/dist/MenuItem/MenuItem.d.ts

@@ -8,13 +8,14 @@ export interface MenuItemProps {
     id: string;
     key: string;
     size?: Size;
+    className?: string;
 }
 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 ItemIconOld: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LockedIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DropdownButtonCSS: (size?: Size | undefined) => import("styled-components").FlattenSimpleInterpolation;
 declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/MenuItem/MenuItem.js

@@ -6,6 +6,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { COLORS, ComponentTextStyle } from '../styles';
+import { LockedOn } from '../icons/systemicons/SystemIcons';
 import { Size } from '../types';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling } from '../styles/typography';
 import { CommonInteractionStyling } from '../common';
@@ -16,10 +17,10 @@ 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 ItemIconOld = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""])));
-export var ItemContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);    \n    }\n\n    ", " {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n    ", " {\n      flex: 1 0 40px;\n      display: flex;\n      justify-content: flex-end;\n    }\n"])), ItemLabel, ItemIcon, ItemIconOld);
+export var LockedIconContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\n"])));
+export var ItemContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin: auto 0 auto 16px;\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: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n"])), ItemLabel, ItemIcon, LockedIconContainer);
 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: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 0;\n        bottom: 0;\n        left: 2px;\n        background-color: ", ";\n\n        border-radius: 2px;\n      }\n    }\n\n    &:disabled {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\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, CommonInteractionStyling, COLORS.neutral_20, COLORS.primary_500, COLORS.neutral_200, COLORS.primary_20, COLORS.primary_600, COLORS.primary_500, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500);
+  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: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\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      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\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, CommonInteractionStyling, COLORS.neutral_20, COLORS.primary_500, COLORS.neutral_200, COLORS.neutral_500, COLORS.primary_20, COLORS.primary_600, COLORS.primary_500, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500);
 };
 var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _item$displayLabel;
@@ -29,14 +30,15 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onClickHandler = _ref.onClickHandler,
       key = _ref.key,
       size = _ref.size,
+      className = _ref.className,
       id = _ref.id;
   return /*#__PURE__*/_jsxs(DropdownButton, {
     type: "button",
     size: size,
-    disabled: item.disabled,
+    disabled: item.disabled || item.locked,
     ref: ref,
     onClick: onClickHandler,
-    className: (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : ''),
+    className: className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : ''),
     id: id,
     children: [item.showDividerAbove && /*#__PURE__*/_jsx("div", {
       className: "divider"
@@ -44,11 +46,22 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       children: [item.icon && /*#__PURE__*/_jsx(ItemIcon, {
         children: item.icon
       }), /*#__PURE__*/_jsxs(ItemLabel, {
-        children: [(_item$displayLabel = item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item.value, item.noteLabel && /*#__PURE__*/_jsx("div", {
-          style: {
-            fontSize: '12px'
-          },
-          children: item.noteLabel
+        children: [/*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsx("div", {
+            children: (_item$displayLabel = item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item.value
+          }), item.noteLabel && /*#__PURE__*/_jsx("div", {
+            style: {
+              fontSize: '12px',
+              lineHeight: '16px'
+            },
+            children: item.noteLabel
+          })]
+        }), item.locked && /*#__PURE__*/_jsx(LockedIconContainer, {
+          children: /*#__PURE__*/_jsx(LockedOn, {
+            color: COLORS.neutral_400,
+            className: "extraMargin",
+            size: "24px"
+          })
         })]
       })]
     })]
@@ -58,7 +71,8 @@ MenuItem.propTypes = {
   onClickHandler: _pt.func.isRequired,
   active: _pt.bool.isRequired,
   id: _pt.string.isRequired,
-  key: _pt.string.isRequired
+  key: _pt.string.isRequired,
+  className: _pt.string
 };
 export default MenuItem;
 //# sourceMappingURL=MenuItem.js.map

package/dist/MenuItem/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["React","styled","css","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","CommonInteractionStyling","DropdownButton","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconOld","ItemContent","Small","Regular","neutral_600","Medium","Large","white","neutral_20","primary_500","neutral_200","primary_20","primary_600","primary_100","primary_800","MenuItem","forwardRef","ref","active","item","onClickHandler","key","id","disabled","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAAqBC,MAArB,EAA6BC,kBAA7B,QAAsD,WAAtD;AAEA,SAAiBC,IAAjB,QAA4B,UAA5B;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,QAAsE,sBAAtE;AAEA,SAASC,wBAAT,QAAyC,WAAzC;;;AAWA,OAAO,IAAMC,cAAc,GAAGT,MAAM,CAACU,MAAV,gFACvB,UAACC,KAAD;AAAA,SAAWC,iBAAiB,CAACD,KAAK,CAACE,IAAP,CAA5B;AAAA,CADuB,CAApB;AAIP,OAAO,IAAMC,SAAS,GAAGd,MAAM,CAACe,GAAV,uEAAf;AACP,OAAO,IAAMC,QAAQ,GAAGhB,MAAM,CAACe,GAAV,uEAAd;AACP,OAAO,IAAME,WAAW,GAAGjB,MAAM,CAACe,GAAV,uEAAjB;AAEP,OAAO,IAAMG,WAAW,GAAGlB,MAAM,CAACe,GAAV,2aAKlBD,SALkB,EASlBE,QATkB,EAgBlBC,WAhBkB,CAAjB;AAuBP,OAAO,IAAML,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,IAAD,EAAiB;AAChD,SAAOZ,GAAP,isCACIY,IAAI,IAAIT,IAAI,CAACe,KAAb,IAAsBZ,iBAAiB,CAACJ,kBAAkB,CAACiB,OAApB,EAA6BlB,MAAM,CAACmB,WAApC,CAD3C,EAEIR,IAAI,IAAIT,IAAI,CAACkB,MAAb,IAAuBhB,iBAAiB,CAACH,kBAAkB,CAACiB,OAApB,EAA6BlB,MAAM,CAACmB,WAApC,CAF5C,EAGIR,IAAI,IAAIT,IAAI,CAACmB,KAAb,IAAsBlB,iBAAiB,CAACF,kBAAkB,CAACiB,OAApB,EAA6BlB,MAAM,CAACmB,WAApC,CAH3C,EAUgBR,IAAI,IAAIT,IAAI,CAACmB,KAAb,GAAqB,MAArB,GAA8BV,IAAI,IAAIT,IAAI,CAACkB,MAAb,GAAsB,MAAtB,GAA+B,MAV7E,EAWsBpB,MAAM,CAACsB,KAX7B,EAuBIhB,wBAvBJ,EA0BkBN,MAAM,CAACuB,UA1BzB,EAmC0BvB,MAAM,CAACwB,WAnCjC,EA4CaxB,MAAM,CAACyB,WA5CpB,EAgDwBzB,MAAM,CAAC0B,UAhD/B,EAmDe1B,MAAM,CAAC2B,WAnDtB,EAuD0B3B,MAAM,CAACwB,WAvDjC,EA4DwBxB,MAAM,CAAC4B,WA5D/B,EA+De5B,MAAM,CAAC6B,WA/DtB,EAmE0B7B,MAAM,CAACwB,WAnEjC;AAuED,CAxEM;AA0EP,IAAMM,QAAQ,gBAAGjC,KAAK,CAACkC,UAAN,CAAmD,gBAM3CC,GAN2C,EAMnC;AAAA;;AAAA,MAL7BC,MAK6B,QAL7BA,MAK6B;AAAA,MAJ7BC,IAI6B,QAJ7BA,IAI6B;AAAA,MAH7BC,cAG6B,QAH7BA,cAG6B;AAAA,MAF7BC,GAE6B,QAF7BA,GAE6B;AAAA,MAD7BzB,IAC6B,QAD7BA,IAC6B;AAAA,MAA7B0B,EAA6B,QAA7BA,EAA6B;AAC/B,sBACE,MAAC,cAAD;AACI,IAAA,IAAI,EAAC,QADT;AAEI,IAAA,IAAI,EAAE1B,IAFV;AAGI,IAAA,QAAQ,EAAEuB,IAAI,CAACI,QAHnB;AAII,IAAA,GAAG,EAAEN,GAJT;AAKI,IAAA,OAAO,EAAEG,cALb;AAMI,IAAA,SAAS,EAAG,CAACD,IAAI,CAACK,gBAAL,GAAwB,oBAAxB,GAA+C,EAAhD,IAAsD,GAAtD,IAA6DN,MAAM,GAAG,QAAH,GAAc,EAAjF,CANhB;AAQI,IAAA,EAAE,EAAEI,EARR;AAAA,eASKH,IAAI,CAACK,gBAAL,iBAAyB;AAAK,MAAA,SAAS,EAAC;AAAf,MAT9B,eAUI,MAAC,WAAD;AAAA,iBACGL,IAAI,CAACM,IAAL,iBAAa,KAAC,QAAD;AAAA,kBAAWN,IAAI,CAACM;AAAhB,QADhB,eAEE,MAAC,SAAD;AAAA,yCACKN,IAAI,CAACO,YADV,mEAC0BP,IAAI,CAACQ,KAD/B,EAEKR,IAAI,CAACS,SAAL,iBAAkB;AAAK,UAAA,KAAK,EAAE;AAAEC,YAAAA,QAAQ,EAAE;AAAZ,WAAZ;AAAA,oBAAmCV,IAAI,CAACS;AAAxC,UAFvB;AAAA,QAFF;AAAA,MAVJ;AAAA,KAOSP,GAPT,CADF;AAoBD,CA3BgB,CAAjB;;AAhHGD,EAAAA,c;AACAF,EAAAA,M;AACAI,EAAAA,E;AACAD,EAAAA,G;;AA0IH,eAAeN,QAAf","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport { CommonInteractionStyling } from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: any) => void;\n   active: boolean;\n   id: string;\n   key: string;\n   size?: Size;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\nexport const ItemIcon = styled.div``;\nexport const ItemIconOld = styled.div``;\n\nexport const ItemContent = styled.div`\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);    \n    }\n\n    ${ItemIcon} {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n    ${ItemIconOld} {\n      flex: 1 0 40px;\n      display: flex;\n      justify-content: flex-end;\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: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 0;\n        bottom: 0;\n        left: 2px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 2px;\n      }\n    }\n\n    &:disabled {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200};\n    }\n\n    &.active:hover {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    key,\n    size,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        key={key}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              {item.displayLabel ?? item.value}\n              {item.noteLabel && <div style={{ fontSize: '12px' }}>{item.noteLabel}</div>}\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","LockedOn","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","CommonInteractionStyling","DropdownButton","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","LockedIconContainer","ItemContent","Small","Regular","neutral_600","Medium","Large","white","neutral_20","primary_500","neutral_200","neutral_500","primary_20","primary_600","primary_100","primary_800","MenuItem","forwardRef","ref","active","item","onClickHandler","key","className","id","disabled","locked","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400"],"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} 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 } from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: any) => void;\n   active: boolean;\n   id: string;\n   key: string;\n   size?: Size;\n   className?: string;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\nexport const ItemIcon = styled.div``;\n\nexport const LockedIconContainer = styled.div`\n\n`;\n\nexport const ItemContent = styled.div`\n    margin: auto 0 auto 16px;\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: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ${LockedIconContainer} {\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: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200};\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      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    key,\n    size,\n    className,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        key={key}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent>\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              {item.locked && <LockedIconContainer>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\" />\n              </LockedIconContainer>}\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.js"}

package/dist/MenuItem/index.cjs

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MenuItem", {
+  enumerable: true,
+  get: function get() {
+    return _MenuItem.default;
+  }
+});
+
+var _MenuItem = _interopRequireDefault(require("./MenuItem"));
+//# sourceMappingURL=index.cjs.map

package/dist/MenuItem/index.cjs.map

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

package/dist/MenuItem/index.d.ts

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

package/dist/MenuItem/index.js

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

package/dist/MenuItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/MenuItem/index.tsx"],"names":["default","MenuItem"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,QAAnB,QAAkC,YAAlC","sourcesContent":["export {default as MenuItem} from './MenuItem';"],"file":"index.js"}

package/dist/Modals/ModalContainer.cjs

@@ -127,18 +127,23 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
           _this$props$minWidth = _this$props.minWidth,
           minWidth = _this$props$minWidth === void 0 ? '' : _this$props$minWidth,
           _this$props$maxWidth = _this$props.maxWidth,
-          maxWidth = _this$props$maxWidth === void 0 ? '' : _this$props$maxWidth;
+          maxWidth = _this$props$maxWidth === void 0 ? '' : _this$props$maxWidth,
+          _this$props$zIndex = _this$props.zIndex,
+          zIndex = _this$props$zIndex === void 0 ? parseInt(_zIndexes.Z_INDEXES.modal) : _this$props$zIndex;
       var sizes = this.GetSize(modalHeight, modalWidth);
       var height = sizes.height,
           width = sizes.width;
-      var overflow = this.GetOverflow(modalOverflow);
+      var overflow = this.GetOverflow(modalOverflow); // should be at least z-index of modal and below z-index of toast
+
+      var zIndexValue = Math.min(Math.max(zIndex, +_zIndexes.Z_INDEXES.modal), +_zIndexes.Z_INDEXES.toast - 1);
       var stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
         height: height,
         width: width,
         padding: padding,
         overflow: overflow,
         minWidth: minWidth,
-        maxWidth: maxWidth
+        maxWidth: maxWidth,
+        zIndex: zIndexValue
       });
       var styles = {
         content: stylesConfiguration
@@ -169,7 +174,8 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
   modalOverflow: _propTypes.default.string,
   padding: _propTypes.default.string,
   minWidth: _propTypes.default.string,
-  maxWidth: _propTypes.default.string
+  maxWidth: _propTypes.default.string,
+  zIndex: _propTypes.default.number
 });
 var _default = ModalContainer;
 exports.default = _default;

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","modalHeight","modalWidth","modalOverflow","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","sizes","GetSize","GetOverflow","stylesConfiguration","Object","assign","styles","getElementById","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/z-indexes';\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\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\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\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\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","modalHeight","modalWidth","modalOverflow","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","sizes","GetSize","GetOverflow","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","getElementById","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/z-indexes';\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\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  zIndex?: number;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\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\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '', zIndex = parseInt(Z_INDEXES.modal) } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\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 }, { height, width, padding, overflow, minWidth, maxWidth, zIndex: zIndexValue });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.cjs"}

package/dist/Modals/ModalContainer.d.ts

@@ -10,6 +10,7 @@ declare type ModalContainerProps = {
     padding?: string;
     minWidth?: string;
     maxWidth?: string;
+    zIndex?: number;
 };
 declare type ModalContainerState = {};
 declare class ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {

package/dist/Modals/ModalContainer.js

@@ -103,18 +103,23 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
           _this$props$minWidth = _this$props.minWidth,
           minWidth = _this$props$minWidth === void 0 ? '' : _this$props$minWidth,
           _this$props$maxWidth = _this$props.maxWidth,
-          maxWidth = _this$props$maxWidth === void 0 ? '' : _this$props$maxWidth;
+          maxWidth = _this$props$maxWidth === void 0 ? '' : _this$props$maxWidth,
+          _this$props$zIndex = _this$props.zIndex,
+          zIndex = _this$props$zIndex === void 0 ? parseInt(Z_INDEXES.modal) : _this$props$zIndex;
       var sizes = this.GetSize(modalHeight, modalWidth);
       var height = sizes.height,
           width = sizes.width;
-      var overflow = this.GetOverflow(modalOverflow);
+      var overflow = this.GetOverflow(modalOverflow); // should be at least z-index of modal and below z-index of toast
+
+      var zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);
       var stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
         height: height,
         width: width,
         padding: padding,
         overflow: overflow,
         minWidth: minWidth,
-        maxWidth: maxWidth
+        maxWidth: maxWidth,
+        zIndex: zIndexValue
       });
       var styles = {
         content: stylesConfiguration
@@ -146,7 +151,8 @@ _defineProperty(ModalContainer, "propTypes", {
   modalOverflow: _pt.string,
   padding: _pt.string,
   minWidth: _pt.string,
-  maxWidth: _pt.string
+  maxWidth: _pt.string,
+  zIndex: _pt.number
 });
 
 export default ModalContainer;

package/dist/Modals/ModalContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","sizes","GetSize","GetOverflow","stylesConfiguration","Object","assign","styles","getElementById","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/z-indexes';\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\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\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\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}
+{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","sizes","GetSize","GetOverflow","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","getElementById","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/z-indexes';\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\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  zIndex?: number;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\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\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '', zIndex = parseInt(Z_INDEXES.modal) } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\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 }, { height, width, padding, overflow, minWidth, maxWidth, zIndex: zIndexValue });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}

package/dist/Modals/ModalContent.cjs

@@ -0,0 +1,235 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _types = require("../types");
+
+var _index = require("./index");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _Tooltips = require("../Tooltips");
+
+var _Button = require("../Button");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _HyperLink = require("../HyperLink");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["icon"],
+    _excluded2 = ["text", "variant", "action"],
+    _excluded3 = ["text", "variant", "action"],
+    _excluded4 = ["action", "text"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var HeaderText = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px\n"])));
+
+var HeaderTitle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.black));
+
+var HeaderNote = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
+
+var HeaderActions = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n"])));
+
+var Header = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ", " {\n    height: max-content;\n  }\n"])), _Tooltips.TooltipContainer);
+
+var Content = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  /* width */\n\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle */\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_600, _styles.COLORS.neutral_500);
+
+var FooterLeftContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
+
+var FooterLeftNote = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ", "\n"])), (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
+
+var FooterLeftLink = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.primary_500));
+
+var FooterRightContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  gap: 8px;\n  margin-left: auto;\n"])));
+
+var Footer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n"])));
+
+var Wrapper = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ", " {\n      padding: 12px 12px 4px 12px;\n\n      ", " {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ", " {\n          ", "\n        }\n\n        ", " {\n          ", "\n        }\n      }\n    }\n\n    ", " {\n      padding: 0 16px 0 24px;\n    }\n\n    ", " {\n      padding: 12px 24px 20px 24px;\n\n      ", " {\n        ", "\n        gap: 6px;\n      }\n\n      ", " {\n        a {\n          gap: 6px;\n        }\n\n        ", "\n      }\n\n      ", " {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ", " {\n      padding: 20px 20px 4px 20px;\n\n      ", " {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ", " {\n          ", "\n        }\n\n        ", " {\n          ", "\n        }\n      }\n    }\n\n    ", " {\n      padding: 0 24px 0 32px;\n    }\n\n    ", " {\n      padding: 16px 32px 32px 32px;\n\n      ", " {\n        ", "\n        gap: 8px;\n      }\n\n      ", " {\n        a {\n          gap: 8px;\n        }\n\n        ", "\n      }\n\n      ", " {\n        gap: 16px;\n      }\n    }\n  }\n"])), Header, HeaderText, HeaderTitle, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null), HeaderNote, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), Content, Footer, FooterLeftNote, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null), FooterLeftLink, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), FooterRightContainer, Header, HeaderText, HeaderTitle, (0, _styles.ComponentXLStyling)(_styles.ComponentTextStyle.Bold, null), HeaderNote, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), Content, Footer, FooterLeftNote, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), FooterLeftLink, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null), FooterRightContainer);
+
+var ModalContent = function ModalContent(props) {
+  var _props$size, _props$footerActions;
+
+  var tooltip = function tooltip() {
+    return !!props.tooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltips.TooltipWrapper, {
+      delay: "0s",
+      size: _types.Size.XSmall,
+      align: "center",
+      position: "bottom",
+      withArrow: false,
+      label: props.tooltip,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        style: {
+          cursor: 'help'
+        },
+        action: function action() {},
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Help, {
+          size: "24px",
+          color: _styles.COLORS.neutral_600
+        })
+      })
+    });
+  };
+
+  var headerActions = function headerActions() {
+    var _props$headerActions;
+
+    return (_props$headerActions = props.headerActions) === null || _props$headerActions === void 0 ? void 0 : _props$headerActions.map(function (action, index) {
+      var icon = action.icon,
+          rest = (0, _objectWithoutProperties2.default)(action, _excluded);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, _objectSpread(_objectSpread({}, rest), {}, {
+        children: icon
+      }), action.id || index);
+    });
+  };
+
+  var getLeftActionIconElement = function getLeftActionIconElement() {
+    var _props$leftFooterActi, _props$leftFooterActi2;
+
+    return !!((_props$leftFooterActi = props.leftFooterAction) !== null && _props$leftFooterActi !== void 0 && _props$leftFooterActi.icon) && /*#__PURE__*/_react.default.cloneElement((_props$leftFooterActi2 = props.leftFooterAction) === null || _props$leftFooterActi2 === void 0 ? void 0 : _props$leftFooterActi2.icon, {
+      size: props.size === _types.Size.Small ? '20px' : props.size === _types.Size.Large ? '28px' : '24px'
+    });
+  };
+
+  var leftFooterAction = function leftFooterAction() {
+    if (!props.leftFooterAction) return null;
+
+    switch (props.leftFooterAction.actionType) {
+      case 'button':
+        {
+          var _ref = props.leftFooterAction,
+              text = _ref.text,
+              variant = _ref.variant,
+              action = _ref.action,
+              rest = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, _objectSpread(_objectSpread({}, rest), {}, {
+            size: props.size,
+            onClick: action,
+            variant: variant !== null && variant !== void 0 ? variant : 'secondary',
+            children: text
+          }));
+        }
+
+      case 'hyperlink':
+        {
+          var _ref2 = props.leftFooterAction,
+              _text = _ref2.text,
+              _variant = _ref2.variant,
+              _action = _ref2.action,
+              _rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded3);
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(FooterLeftLink, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_HyperLink.HyperLink, _objectSpread(_objectSpread({}, _rest), {}, {
+              variant: _variant !== null && _variant !== void 0 ? _variant : 'default',
+              onClick: function onClick(e) {
+                if (_action) {
+                  e.preventDefault();
+
+                  _action(e);
+                }
+              },
+              children: [getLeftActionIconElement(), _text]
+            }))
+          });
+        }
+
+      case 'note':
+        {
+          var _text2 = props.leftFooterAction.text;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FooterLeftNote, {
+            children: [getLeftActionIconElement(), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: _text2
+            })]
+          });
+        }
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ModalContainer, {
+    showModal: props.isModalOpen,
+    closeModal: props.closeAction,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+      className: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : _types.Size.Medium,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(HeaderText, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderTitle, {
+            children: props.title
+          }), !!props.note && /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderNote, {
+            children: props.note
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(HeaderActions, {
+          children: [tooltip(), headerActions(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+            id: 'content-modal-close-button',
+            variant: "secondary",
+            shape: "circular",
+            action: props.closeAction,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
+              size: "24px",
+              color: _styles.COLORS.neutral_600
+            })
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
+        children: props.children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Footer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FooterLeftContainer, {
+          children: leftFooterAction()
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FooterRightContainer, {
+          children: (_props$footerActions = props.footerActions) === null || _props$footerActions === void 0 ? void 0 : _props$footerActions.map(function (item, index) {
+            var action = item.action,
+                text = item.text,
+                rest = (0, _objectWithoutProperties2.default)(item, _excluded4);
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, _objectSpread(_objectSpread({}, rest), {}, {
+              onClick: action,
+              size: props.size,
+              onKeyDown: function onKeyDown(a) {
+                return (a.key === 'Enter' || a.key === ' ') && action(a);
+              },
+              children: text
+            }), rest.id || index);
+          })
+        })]
+      })]
+    })
+  });
+};
+
+ModalContent.propTypes = {
+  isModalOpen: _propTypes.default.bool.isRequired,
+  closeAction: _propTypes.default.func.isRequired,
+  title: _propTypes.default.string.isRequired,
+  note: _propTypes.default.string,
+  headerActions: _propTypes.default.array,
+  footerActions: _propTypes.default.array,
+  tooltip: _propTypes.default.string,
+  yOffset: _propTypes.default.number,
+  zIndex: _propTypes.default.number
+};
+var _default = ModalContent;
+exports.default = _default;
+//# sourceMappingURL=ModalContent.cjs.map