@laerdal/life-react-components 1.1.2-dev.8 → 1.2.1-dev.2

package/dist/umd/List/ListRow.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../Button", "../icons/systemicons/SystemIcons", "../styles", "./ListRowDropdown", "../styles/typography"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../styles/typography", "../Tooltips", "../Dropdown", "../icons", "../types"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../styles"), require("./ListRowDropdown"), require("../styles/typography"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../styles/typography"), require("../Tooltips"), require("../Dropdown"), require("../icons"), require("../types"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.Button, global.SystemIcons, global.styles, global.ListRowDropdown, global.typography);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.typography, global.Tooltips, global.Dropdown, global.icons, global.types);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _Button, _SystemIcons, _styles, _ListRowDropdown, _typography) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _typography, _Tooltips, _Dropdown, _icons, _types) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -23,8 +23,6 @@
 
   var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
-  var _ListRowDropdown2 = _interopRequireDefault(_ListRowDropdown);
-
   function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -81,121 +79,249 @@
     };
   }
 
-  const EditRow = _styledComponents2.default.div`
+  function _extends() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+
+    return _extends.apply(this, arguments);
+  }
+
+  const Row = _styledComponents2.default.div`
   display: flex;
-  justify-content: space-between;
-  padding: 8px 12px;
+  flex-direction: row;
   align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid ${_styles.COLORS.neutral_100};
+  box-sizing: border-box;
+  position: relative;
+
+  color: ${_styles.COLORS.neutral_600};
+  background-color: ${_styles.COLORS.white};
 
-  &:nth-child(even) {
-    background-color: ${props => props.disableDifferentBackgroundforEvenNumbers ? 'inherit' : _styles.COLORS.neutral_20};
+
+  cursor: default;
+
+  &.interactive {
+    cursor: pointer;
   }
 
-  .user-actions {
-    display: flex;
-    position: relative;
-    align-items: center;
+  &.interactive.disabled {
+    cursor: not-allowed;
   }
 
-  .somePaddingForAlignment {
-    padding: 0 3px 0 0;
+  &.interactive:hover:not(.in-action):not(.disabled) {
+    background-color: ${_styles.COLORS.primary_20};
+    color: ${_styles.COLORS.primary_700};
   }
 
-  &.active {
-    background-color: ${_styles.COLORS.neutral_100};
+  &.interactive:active:not(.in-action):not(.disabled) {
+    background-color: ${_styles.COLORS.primary_100};
+    color: ${_styles.COLORS.primary_800};
+    box-shadow: none;
   }
-`;
-  const LeftSection = _styledComponents2.default.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
 
-  ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit')}
+  &.interactive:focus {
+    outline: none;
+    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;
+    z-index: 1;
+  }
 
-  svg {
-    margin-right: 12px;
+  &.disabled {
+    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {
+      color: ${_styles.COLORS.neutral_300};
+    }
   }
-`;
-  const MainInfo = _styledComponents2.default.div`
-  margin: auto 1em auto 0;
-  display: flex;
-  flex-direction: column;
-`;
-  const ButtonWrapper = _styledComponents2.default.div`
-  outline: none;
-`;
-  const UserDropdownButton = (0, _styledComponents2.default)(_Button.Button)`
-  display: flex;
-  text-decoration: none;
-  outline: none;
-  div {
-    outline: none;
+
+
+  &.small {
+    min-height: 48px;
+    padding: 0 8px;
+
+    .list-item-icon {
+      margin-right: 8px;
+    }
+
+    .list-item-main-text {
+      ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null)}
+    }
+
+    .list-item-actions {
+      margin-right: -8px;
+    }
   }
-  &:focus > div {
-    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);
-    border-radius: 4px;
-    outline: none;
-    background: ${_styles.COLORS.white};
+
+  &.medium {
+    min-height: 56px;
+    padding: 0 12px;
+
+    .list-item-icon {
+      margin-right: 12px;
+    }
+
+    .list-item-main-text {
+      ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null)}
+    }
+
+    .list-item-actions {
+      margin-right: -12px;
+    }
   }
-`;
-  const StyledMoreVertical = (0, _styledComponents2.default)(_SystemIcons.MoreVertical)`
-  padding: 8px 8px;
-  outline: none;
-  &:hover {
-    background: ${_styles.COLORS.primary_20};
-    border-radius: 4px;
+
+  &.large {
+    min-height: 64px;
+    padding: 0 16px;
+
+    .list-item-icon {
+      margin-right: 16px;
+    }
+
+    .list-item-main-text {
+      ${(0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null)}
+    }
+
+    .list-item-actions {
+      margin-right: -16px;
+    }
+  }
+
+  &.overlay {
+    padding: 0 4px;
+
+    .list-item-actions {
+      margin-right: -4px;
+    }
+  }
+
+  .list-item-icon {
+    width: 24px;
+    height: 24px;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .list-item-content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
   }
-  &:active {
-    background: ${_styles.COLORS.primary_100};
-    border-radius: 4px;
+
+  .list-item-main-text {
+  }
+
+  .list-item-secondary-text {
+    ${(0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null)}
+  }
+
+  .list-item-note {
+    color: ${_styles.COLORS.neutral_600};
+    word-break: initial;
+    ${(0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null)}
+  }
+
+  .list-item-note.with-tooltip {
+    cursor: pointer;
+
+    > div {
+      text-decoration-line: underline;
+      text-decoration-style: dashed;
+      text-underline-offset: 1px;
+      text-decoration-thickness: 1px;
+    }
+  }
+
+  .list-item-actions {
+    color: ${_styles.COLORS.neutral_600};
+    display: flex;
+    align-items: center;
+
+    button div {
+      background-color: transparent;
+    }
   }
 `;
 
   const ListRow = ({
     key,
-    Icon,
-    mainInfo,
-    dropdownOptions,
-    disableDifferentBackgroundforEvenNumbers
+    size = _types.Size.Medium,
+    variant = 'normal',
+    icon,
+    mainText,
+    secondaryText,
+    dropdown,
+    note,
+    noteTooltip,
+    disabled = false,
+    action
   }) => {
-    const color = _styles.COLORS.black;
-    const [dropdownActive, setDropdownActive] = React.useState(false);
-    return /*#__PURE__*/React.createElement(EditRow, {
+    const [inAction, setInAction] = React.useState(false);
+
+    const handleKeyPress = e => {
+      if (e.key === 'Enter') {
+        action && action();
+      }
+    };
+
+    const rowClassName = (inAction ? 'in-action ' : '').concat(disabled ? 'disabled ' : '').concat(!!action ? 'interactive ' : '').concat('list-item-row ').concat(`${variant} `).concat(`${size}`);
+    return /*#__PURE__*/React.createElement(Row, {
       key: key,
-      disableDifferentBackgroundforEvenNumbers: disableDifferentBackgroundforEvenNumbers
-    }, /*#__PURE__*/React.createElement(LeftSection, {
-      color: color,
+      tabIndex: !!action && !disabled ? 0 : undefined,
+      className: rowClassName,
+      onKeyPress: e => !disabled && handleKeyPress(e),
+      onClick: e => {
+        !disabled && action && action();
+      },
       "data-hj-suppress": true
-    }, Icon && /*#__PURE__*/React.createElement(Icon, {
-      size: "22px",
-      color: color,
-      className: "somePaddingForAlignment"
-    }), /*#__PURE__*/React.createElement(MainInfo, {
-      "data-hj-suppress": true
-    }, mainInfo)), /*#__PURE__*/React.createElement(ButtonWrapper, {
-      className: "user-actions"
-    }, /*#__PURE__*/React.createElement(UserDropdownButton, {
-      variant: "tertiary",
-      onClick: () => {
-        setDropdownActive(true);
-      }
+    }, !!icon && /*#__PURE__*/React.createElement("div", {
+      className: 'list-item-icon'
+    }, icon), /*#__PURE__*/React.createElement("div", {
+      className: 'list-item-content'
     }, /*#__PURE__*/React.createElement("div", {
-      tabIndex: -1
-    }, /*#__PURE__*/React.createElement(StyledMoreVertical, {
-      size: "22px",
-      color: _styles.COLORS.neutral_500
-    }))), dropdownActive && /*#__PURE__*/React.createElement(_ListRowDropdown2.default, {
-      closeDropdown: () => setDropdownActive(false),
-      options: dropdownOptions
-    })));
+      className: 'list-item-main-text'
+    }, mainText), !!secondaryText && /*#__PURE__*/React.createElement("div", {
+      className: 'list-item-secondary-text'
+    }, secondaryText)), !!note && /*#__PURE__*/React.createElement(React.Fragment, null, !!noteTooltip && /*#__PURE__*/React.createElement("div", {
+      className: 'list-item-note with-tooltip'
+    }, /*#__PURE__*/React.createElement(_Tooltips.TooltipWrapper, {
+      label: noteTooltip,
+      size: size === _types.Size.Large ? _types.Size.Medium : size === _types.Size.Small ? _types.Size.XSmall : _types.Size.Small,
+      position: 'top',
+      withArrow: true
+    }, note)), !noteTooltip && /*#__PURE__*/React.createElement("div", {
+      className: 'list-item-note'
+    }, note)), !!dropdown && /*#__PURE__*/React.createElement("div", {
+      className: 'list-item-actions',
+      onMouseEnter: () => setInAction(!dropdown?.disabled),
+      onMouseLeave: () => setInAction(false)
+    }, /*#__PURE__*/React.createElement(_Dropdown.DropdownButton, _extends({}, dropdown, {
+      disabled: disabled || dropdown.disabled,
+      icon: variant === 'overlay' ? /*#__PURE__*/React.createElement(_icons.SystemIcons.ArrowDropDown, null) : /*#__PURE__*/React.createElement(_icons.SystemIcons.MoreVertical, null)
+    }))));
   };
 
   ListRow.propTypes = {
     key: _propTypes2.default.string,
-    Icon: _propTypes2.default.any,
-    mainInfo: _propTypes2.default.any.isRequired,
-    dropdownOptions: _propTypes2.default.array.isRequired,
-    disableDifferentBackgroundforEvenNumbers: _propTypes2.default.bool
+    variant: _propTypes2.default.oneOf(['normal', 'overlay']),
+    icon: _propTypes2.default.node,
+    mainText: _propTypes2.default.string.isRequired,
+    secondaryText: _propTypes2.default.string,
+    note: _propTypes2.default.string,
+    noteTooltip: _propTypes2.default.string,
+    disabled: _propTypes2.default.bool,
+    action: _propTypes2.default.func
   };
   exports.default = ListRow;
 });

package/dist/umd/List/ListRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["EditRow","styled","div","props","COLORS","neutral_20","neutral_100","LeftSection","ComponentSStyling","ComponentTextStyle","MainInfo","ButtonWrapper","UserDropdownButton","white","StyledMoreVertical","primary_20","primary_100","key","Icon","mainInfo","dropdownOptions","disableDifferentBackgroundforEvenNumbers","ListRow","color","React","setDropdownActive","neutral_500","dropdownActive"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../Button';\nimport {MoreVertical} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {ListRowDropdownOption} from '../types';\n\nimport ListRowDropdown from './ListRowDropdown';\nimport {ComponentSStyling} from '../styles/typography';\n\nconst EditRow = styled.div<{ disableDifferentBackgroundforEvenNumbers?: boolean }>`\n  display: flex;\n  justify-content: space-between;\n  padding: 8px 12px;\n  align-items: center;\n\n  &:nth-child(even) {\n    background-color: ${props => (props.disableDifferentBackgroundforEvenNumbers ? 'inherit' : COLORS.neutral_20)};\n  }\n\n  .user-actions {\n    display: flex;\n    position: relative;\n    align-items: center;\n  }\n\n  .somePaddingForAlignment {\n    padding: 0 3px 0 0;\n  }\n\n  &.active {\n    background-color: ${COLORS.neutral_100};\n  }\n`;\n\nconst LeftSection = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  svg {\n    margin-right: 12px;\n  }\n`;\n\nconst MainInfo = styled.div`\n  margin: auto 1em auto 0;\n  display: flex;\n  flex-direction: column;\n`;\n\nconst ButtonWrapper = styled.div`\n  outline: none;\n`;\n\nconst UserDropdownButton = styled(Button)`\n  display: flex;\n  text-decoration: none;\n  outline: none;\n  div {\n    outline: none;\n  }\n  &:focus > div {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    border-radius: 4px;\n    outline: none;\n    background: ${COLORS.white};\n  }\n`;\n\nconst StyledMoreVertical = styled(MoreVertical)`\n  padding: 8px 8px;\n  outline: none;\n  &:hover {\n    background: ${COLORS.primary_20};\n    border-radius: 4px;\n  }\n  &:active {\n    background: ${COLORS.primary_100};\n    border-radius: 4px;\n  }\n`;\n\ntype Props = {\n  key?: string;\n  Icon?: any;\n  mainInfo: any;\n  dropdownOptions: ListRowDropdownOption[];\n  disableDifferentBackgroundforEvenNumbers?: boolean;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({ key, Icon, mainInfo, dropdownOptions, disableDifferentBackgroundforEvenNumbers }: Props) => {\n  const color = COLORS.black;\n  const [dropdownActive, setDropdownActive] = React.useState<Boolean>(false);\n\n  return (\n    <EditRow key={key} disableDifferentBackgroundforEvenNumbers={disableDifferentBackgroundforEvenNumbers}>\n      <LeftSection color={color} data-hj-suppress>\n        {Icon && <Icon size=\"22px\" color={color} className=\"somePaddingForAlignment\" />}\n        <MainInfo data-hj-suppress>{mainInfo}</MainInfo>\n      </LeftSection>\n\n      <ButtonWrapper className=\"user-actions\">\n        <UserDropdownButton\n          variant=\"tertiary\"\n          onClick={() => {\n            setDropdownActive(true);\n          }}>\n          <div tabIndex={-1}>\n            <StyledMoreVertical size=\"22px\" color={COLORS.neutral_500} />\n          </div>\n        </UserDropdownButton>\n        {dropdownActive && <ListRowDropdown closeDropdown={() => setDropdownActive(false)} options={dropdownOptions} />}\n      </ButtonWrapper>\n    </EditRow>\n  );\n};\n\nexport default ListRow;\n"],"file":"ListRow.js"}
+{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","primary_100","primary_800","neutral_300","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","ComponentXXSStyling","ComponentXSStyling","key","variant","icon","mainText","secondaryText","note","noteTooltip","disabled","action","ListRow","size","Size","React","handleKeyPress","e","rowClassName","inAction","setInAction","dropdown"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,QAAMA,GAAG,GAAGC,2BAAOC,GAAI;AACvB;AACA;AACA;AACA;AACA,6BAA6BC,eAAOC,WAAY;AAChD;AACA;AACA;AACA,WAAWD,eAAOE,WAAY;AAC9B,sBAAsBF,eAAOG,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBH,eAAOI,UAAW;AAC1C,aAAaJ,eAAOK,WAAY;AAChC;AACA;AACA;AACA,wBAAwBL,eAAOM,WAAY;AAC3C,aAAaN,eAAOO,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeP,eAAOQ,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,mCAAkBC,2BAAD,OAAjBD,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQE,mCAAkBD,2BAAD,OAAjBC,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,mCAAkBF,2BAAD,OAAjBE,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,qCAAoBH,2BAAD,OAAnBG,EAAmB,IAAnBA,CAAsD;AAC5D;AACA;AACA;AACA,aAAab,eAAOE,WAAY;AAChC;AACA,MAAMY,oCAAmBJ,2BAAD,OAAlBI,EAAkB,IAAlBA,CAAqD;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAad,eAAOE,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AA1JA,CAAA;;AA4KA,QAAMsB,OAAuC,GAAG,CAAC;AAAA,IAAA,GAAA;AAEEC,IAAAA,IAAI,GAAGC,YAFT,MAAA;AAGEV,IAAAA,OAAO,GAHT,QAAA;AAAA,IAAA,IAAA;AAAA,IAAA,QAAA;AAAA,IAAA,aAAA;AAAA,IAAA,QAAA;AAAA,IAAA,IAAA;AAAA,IAAA,WAAA;AAUEM,IAAAA,QAAQ,GAVV,KAAA;AAWEC,IAAAA;AAXF,GAAD,KAYc;AAE5D,UAAM,CAAA,QAAA,EAAA,WAAA,IAA0BI,KAAK,CAALA,QAAAA,CAAhC,KAAgCA,CAAhC;;AAEA,UAAMC,cAAc,GAAIC,CAAD,IAAY;AACjC,UAAIA,CAAC,CAADA,GAAAA,KAAJ,OAAA,EAAuB;AACrBN,QAAAA,MAAM,IAAIA,MAAVA,EAAAA;AACD;AAHH,KAAA;;AAMA,UAAMO,YAAY,GAAG,CAACC,QAAQ,GAAA,YAAA,GAAT,EAAA,EAAA,MAAA,CACXT,QAAQ,GAAA,WAAA,GADG,EAAA,EAAA,MAAA,CAEX,CAAC,CAAD,MAAA,GAAA,cAAA,GAFW,EAAA,EAAA,MAAA,CAAA,gBAAA,EAAA,MAAA,CAIV,GAAEN,OAJQ,GAAA,EAAA,MAAA,CAKV,GAAES,IALb,EAAqB,CAArB;AAOA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAK,MAAA,GAAG,EAAR,GAAA;AACK,MAAA,QAAQ,EAAE,CAAC,CAAD,MAAA,IAAY,CAAZ,QAAA,GAAA,CAAA,GADf,SAAA;AAEK,MAAA,SAAS,EAFd,YAAA;AAGK,MAAA,UAAU,EAAGI,CAAD,IAAO,CAAA,QAAA,IAAaD,cAAc,CAHnD,CAGmD,CAHnD;AAIK,MAAA,OAAO,EAAEC,CAAC,IAAI;AACZ,SAAA,QAAA,IAAA,MAAA,IAAuBN,MAAvB,EAAA;AALP,OAAA;AAOK,0BAAA;AAPL,KAAA,EASI,CAAC,CAAD,IAAA,IAAA,aACA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAE;AAAhB,KAAA,EAVJ,IAUI,CAVJ,EAAA,aAYE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAE;AAAhB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAE;AAAhB,KAAA,EADF,QACE,CADF,EAEG,CAAC,CAAD,aAAA,IAAA,aAAmB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAE;AAAhB,KAAA,EAdxB,aAcwB,CAFtB,CAZF,EAiBI,CAAC,CAAD,IAAA,IAAA,aACA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAEI,CAAC,CAAD,WAAA,IAAA,aACA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAE;AAAhB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AAAgB,MAAA,KAAK,EAArB,WAAA;AACgB,MAAA,IAAI,EAAEE,IAAI,KAAKC,YAATD,KAAAA,GAAsBC,YAAtBD,MAAAA,GAAoCA,IAAI,KAAKC,YAATD,KAAAA,GAAsBC,YAAtBD,MAAAA,GAAoCC,YAD9F,KAAA;AAEgB,MAAA,QAAQ,EAFxB,KAAA;AAGgB,MAAA,SAAS,EAAE;AAH3B,KAAA,EAJN,IAIM,CADF,CAHJ,EAaI,CAAA,WAAA,IAAA,aACA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAE;AAAhB,KAAA,EAhCR,IAgCQ,CAdJ,CAlBJ,EAuCI,CAAC,CAAD,QAAA,IAAA,aACA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAd,mBAAA;AACK,MAAA,YAAY,EAAE,MAAMM,WAAW,CAAC,CAACC,QAAQ,EAD9C,QACoC,CADpC;AAEK,MAAA,YAAY,EAAE,MAAMD,WAAW,CAAA,KAAA;AAFpC,KAAA,EAAA,aAGE,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA,QAAA,CAAA,EAAA,EAAA,QAAA,EAAA;AACgB,MAAA,QAAQ,EAAEV,QAAQ,IAAIW,QAAQ,CAD9C,QAAA;AAEgB,MAAA,IAAI,EAAEjB,OAAO,KAAPA,SAAAA,GAAAA,aACF,KAAA,CAAA,aAAA,CAAA,mBAAA,aAAA,EADEA,IACF,CADEA,GAAAA,aAEF,KAAA,CAAA,aAAA,CAAA,mBAAA,YAAA,EAAA,IAAA;AAJpB,KAAA,CAAA,CAHF,CAxCJ,CADF;AA7BF,GAAA;;;AAbED,IAAAA,G;AAEAC,IAAAA,O,6BAAU,Q,EAAW,S;AACrBC,IAAAA,I;AACAC,IAAAA,Q;AACAC,IAAAA,a;AAEAC,IAAAA,I;AACAC,IAAAA,W;AACAC,IAAAA,Q;AACAC,IAAAA,M;;oBAwFF,O","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  position: relative;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: none;\n  }\n\n  &.interactive:focus {\n    outline: none;\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    z-index: 1;\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\n\ntype Props = {\n  key?: string;\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   key,\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyPress = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`);\n\n  return (\n    <Row key={key}\n         tabIndex={!!action && !disabled ? 0 : undefined}\n         className={rowClassName}\n         onKeyPress={(e) => !disabled && handleKeyPress(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}

package/dist/umd/List/__tests__/ListRow.tests.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["react", "@testing-library/react", "../index", "../../icons/systemicons/SystemIcons"], factory);
+    define(["react", "@testing-library/react", "../index", "../../types", "../../icons"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(require("react"), require("@testing-library/react"), require("../index"), require("../../icons/systemicons/SystemIcons"));
+    factory(require("react"), require("@testing-library/react"), require("../index"), require("../../types"), require("../../icons"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(global.react, global.react, global.index, global.SystemIcons);
+    factory(global.react, global.react, global.index, global.types, global.icons);
     global.undefined = mod.exports;
   }
-})(this, function (_react, _react3, _index, _SystemIcons) {
+})(this, function (_react, _react3, _index, _types, _icons) {
   "use strict";
 
   var _react2 = _interopRequireDefault(_react);
@@ -26,50 +26,13 @@
       const {
         getByText
       } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.ListRow, {
-        Icon: _SystemIcons.Institute,
-        mainInfo: /*#__PURE__*/_react2.default.createElement("div", null, "Laerdal Medical AS"),
-        dropdownOptions: [{
-          label: 'Option 1',
-          action: () => {},
-          key: 'Test1'
-        }, {
-          label: 'Option 2',
-          action: () => {},
-          key: 'Test2'
-        }]
-      }, "Menu 1"));
+        icon: /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.Institute, null),
+        mainText: 'Laerdal Medical AS',
+        size: _types.Size.Small,
+        disabled: false
+      }));
       expect(getByText('Laerdal Medical AS')).toBeDefined();
     });
-    it('When menu is clicked, it opens', async () => {
-      const {
-        getByRole,
-        getByText
-      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.ListRow, {
-        Icon: _SystemIcons.Institute,
-        mainInfo: /*#__PURE__*/_react2.default.createElement("div", null, "Laerdal Medical AS"),
-        dropdownOptions: [{
-          label: 'Option 1',
-          action: () => {},
-          key: 'Test1'
-        }, {
-          label: 'Option 2',
-          action: () => {},
-          key: 'Test2'
-        }]
-      }, "Menu 1")); //expect(getByText('Option 1')).not.toBeDefined();
-
-      getByRole('button').click();
-      expect(getByText('Option 1')).toBeDefined();
-    });
-    /*it('Renders with required input if specified', async () => {
-      const { getByPlaceholderText } = render(<DropdownFilter id="Dropdown" list={list} placeholder="Placeholder" required />);
-      expect(getByPlaceholderText('Placeholder').required).toBe(true);
-    });
-     it('Renders with inital value if specified', async () => {
-      const initialValue = 'Contact';
-      const { getByPlaceholderText } = render(<DropdownFilter id="Dropdown" list={list} placeholder="Placeholder" initalValue={initialValue} />);
-      expect(getByPlaceholderText('Placeholder').value).toBe(initialValue);
-    });*/
   });
 });
 //# sourceMappingURL=ListRow.tests.js.map

package/dist/umd/List/__tests__/ListRow.tests.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/List/__tests__/ListRow.tests.tsx"],"names":["describe","it","getByText","render","label","action","key","expect","getByRole"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAKAA,EAAAA,QAAQ,CAAA,aAAA,EAAgB,MAAM;AAC5BC,IAAAA,EAAE,CAAA,SAAA,EAAY,YAAY;AACxB,YAAM;AAAEC,QAAAA;AAAF,UAAgBC,qBAAM,aAC1B,gBAAA,aAAA,CAAA,cAAA,EAAA;AACE,QAAA,IAAI,EADN,sBAAA;AAEE,QAAA,QAAQ,EAAA,aAAE,gBAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAFZ,oBAEY,CAFZ;AAGE,QAAA,eAAe,EAAE,CACf;AAAEC,UAAAA,KAAK,EAAP,UAAA;AAAqBC,UAAAA,MAAM,EAAE,MAAM,CAAnC,CAAA;AAAuCC,UAAAA,GAAG,EAAE;AAA5C,SADe,EAEf;AAAEF,UAAAA,KAAK,EAAP,UAAA;AAAqBC,UAAAA,MAAM,EAAE,MAAM,CAAnC,CAAA;AAAuCC,UAAAA,GAAG,EAAE;AAA5C,SAFe;AAHnB,OAAA,EADF,QACE,CADoBH,CAAtB;AAWAI,MAAAA,MAAM,CAACL,SAAS,CAAhBK,oBAAgB,CAAV,CAANA,CAAAA,WAAAA;AAZFN,KAAE,CAAFA;AAeAA,IAAAA,EAAE,CAAA,gCAAA,EAAmC,YAAY;AAC/C,YAAM;AAAA,QAAA,SAAA;AAAaC,QAAAA;AAAb,UAA2BC,qBAAM,aACrC,gBAAA,aAAA,CAAA,cAAA,EAAA;AACE,QAAA,IAAI,EADN,sBAAA;AAEE,QAAA,QAAQ,EAAA,aAAE,gBAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAFZ,oBAEY,CAFZ;AAGE,QAAA,eAAe,EAAE,CACf;AAAEC,UAAAA,KAAK,EAAP,UAAA;AAAqBC,UAAAA,MAAM,EAAE,MAAM,CAAnC,CAAA;AAAuCC,UAAAA,GAAG,EAAE;AAA5C,SADe,EAEf;AAAEF,UAAAA,KAAK,EAAP,UAAA;AAAqBC,UAAAA,MAAM,EAAE,MAAM,CAAnC,CAAA;AAAuCC,UAAAA,GAAG,EAAE;AAA5C,SAFe;AAHnB,OAAA,EAF6C,QAE7C,CAD+BH,CAAjC,CAD+C,CAa/C;;AACAK,MAAAA,SAAS,CAATA,QAAS,CAATA,CAAAA,KAAAA;AACAD,MAAAA,MAAM,CAACL,SAAS,CAAhBK,UAAgB,CAAV,CAANA,CAAAA,WAAAA;AAfFN,KAAE,CAAFA;AAkBA;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA1CAD,GAAQ,CAARA","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport { ListRow } from '../index';\nimport { Institute } from '../../icons/systemicons/SystemIcons';\n\ndescribe('<ListRow />', () => {\n  it('Renders', async () => {\n    const { getByText } = render(\n      <ListRow\n        Icon={Institute}\n        mainInfo={<div>Laerdal Medical AS</div>}\n        dropdownOptions={[\n          { label: 'Option 1', action: () => {}, key: 'Test1' },\n          { label: 'Option 2', action: () => {}, key: 'Test2' },\n        ]}>\n        Menu 1\n      </ListRow>,\n    );\n    expect(getByText('Laerdal Medical AS')).toBeDefined();\n  });\n\n  it('When menu is clicked, it opens', async () => {\n    const { getByRole, getByText } = render(\n      <ListRow\n        Icon={Institute}\n        mainInfo={<div>Laerdal Medical AS</div>}\n        dropdownOptions={[\n          { label: 'Option 1', action: () => {}, key: 'Test1' },\n          { label: 'Option 2', action: () => {}, key: 'Test2' },\n        ]}>\n        Menu 1\n      </ListRow>,\n    );\n\n    //expect(getByText('Option 1')).not.toBeDefined();\n    getByRole('button').click();\n    expect(getByText('Option 1')).toBeDefined();\n  });\n\n  /*it('Renders with required input if specified', async () => {\n    const { getByPlaceholderText } = render(<DropdownFilter id=\"Dropdown\" list={list} placeholder=\"Placeholder\" required />);\n    expect(getByPlaceholderText('Placeholder').required).toBe(true);\n  });\n\n  it('Renders with inital value if specified', async () => {\n    const initialValue = 'Contact';\n    const { getByPlaceholderText } = render(<DropdownFilter id=\"Dropdown\" list={list} placeholder=\"Placeholder\" initalValue={initialValue} />);\n    expect(getByPlaceholderText('Placeholder').value).toBe(initialValue);\n  });*/\n});\n"],"file":"ListRow.tests.js"}
+{"version":3,"sources":["../../../../src/List/__tests__/ListRow.tests.tsx"],"names":["describe","it","getByText","render","Size","expect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAMAA,EAAAA,QAAQ,CAAA,aAAA,EAAgB,MAAM;AAC5BC,IAAAA,EAAE,CAAA,SAAA,EAAY,YAAY;AACxB,YAAM;AAACC,QAAAA;AAAD,UAAcC,qBAAM,aACxB,gBAAA,aAAA,CAAA,cAAA,EAAA;AACE,QAAA,IAAI,EAAA,aAAE,gBAAA,aAAA,CAAA,mBAAA,SAAA,EADR,IACQ,CADR;AAEE,QAAA,QAAQ,EAFV,oBAAA;AAGE,QAAA,IAAI,EAAEC,YAHR,KAAA;AAIE,QAAA,QAAQ,EAAE;AAJZ,OAAA,CADkBD,CAApB;AAOAE,MAAAA,MAAM,CAACH,SAAS,CAAhBG,oBAAgB,CAAV,CAANA,CAAAA,WAAAA;AARFJ,KAAE,CAAFA;AADFD,GAAQ,CAARA","sourcesContent":["import React from 'react';\nimport {render} from '@testing-library/react';\nimport {ListRow} from '../index';\nimport {Size} from '../../types';\nimport {SystemIcons} from '../../icons';\n\ndescribe('<ListRow />', () => {\n  it('Renders', async () => {\n    const {getByText} = render(\n      <ListRow\n        icon={<SystemIcons.Institute/>}\n        mainText={'Laerdal Medical AS'}\n        size={Size.Small}\n        disabled={false}/>,\n    );\n    expect(getByText('Laerdal Medical AS')).toBeDefined();\n  });\n});\n"],"file":"ListRow.tests.js"}

package/dist/umd/List/index.js

@@ -1,27 +1,25 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "./ListRow", "./ListRowDropdown"], factory);
+    define(["exports", "./ListRow"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("./ListRow"), require("./ListRowDropdown"));
+    factory(exports, require("./ListRow"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.ListRow, global.ListRowDropdown);
+    factory(mod.exports, global.ListRow);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _ListRow, _ListRowDropdown) {
+})(this, function (exports, _ListRow) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
     value: true
   });
-  exports.ListRowDropdown = exports.ListRow = undefined;
+  exports.ListRow = undefined;
 
   var _ListRow2 = _interopRequireDefault(_ListRow);
 
-  var _ListRowDropdown2 = _interopRequireDefault(_ListRowDropdown);
-
   function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
       default: obj
@@ -29,6 +27,5 @@
   }
 
   exports.ListRow = _ListRow2.default;
-  exports.ListRowDropdown = _ListRowDropdown2.default;
 });
 //# sourceMappingURL=index.js.map

package/dist/umd/List/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAGA,O,GAAA,iB;UAAA,e,GAAA,yB","sourcesContent":["import ListRow from './ListRow';\nimport ListRowDropdown from './ListRowDropdown';\n\nexport { ListRow, ListRowDropdown };\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/List/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;UAEA,O,GAAA,iB","sourcesContent":["import ListRow from './ListRow';\n\nexport {ListRow};\n"],"file":"index.js"}

package/dist/umd/Modals/ModalContainer.js

@@ -152,6 +152,7 @@
   const modalTransitions = `
 .ReactModal__Overlay {
   opacity: 0;
+  z-index: 100;
 }
 
 .ReactModal__Overlay--after-open {

package/dist/umd/Modals/ModalContainer.js.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","id","showModal","closeModal","children","modalHeight","modalWidth","modalOverflow","padding","minWidth","maxWidth","ModalContainer","React","componentDidMount","ReactModal","document","head","style","render","sizes","stylesConfiguration","styles"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } 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}\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  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":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","id","showModal","closeModal","children","modalHeight","modalWidth","modalOverflow","padding","minWidth","maxWidth","ModalContainer","React","componentDidMount","ReactModal","document","head","style","render","sizes","stylesConfiguration","styles"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } 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: 100;\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  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"}

package/dist/umd/Modals/ModalDialog.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "../Button", "../icons/systemicons/SystemIcons", "../styles", "../types", "./ModalContainer", "./ModalStyles"], factory);
+    define(["exports", "prop-types", "react", "../Button", "../icons/systemicons/SystemIcons", "../styles", "../types", "./ModalContainer", "./ModalStyles", "./ModalNote"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../styles"), require("../types"), require("./ModalContainer"), require("./ModalStyles"));
+    factory(exports, require("prop-types"), require("react"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../styles"), require("../types"), require("./ModalContainer"), require("./ModalStyles"), require("./ModalNote"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.Button, global.SystemIcons, global.styles, global.types, global.ModalContainer, global.ModalStyles);
+    factory(mod.exports, global.propTypes, global.react, global.Button, global.SystemIcons, global.styles, global.types, global.ModalContainer, global.ModalStyles, global.ModalNote);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _Button, _SystemIcons, _styles, _types, _ModalContainer, _ModalStyles) {
+})(this, function (exports, _propTypes, _react, _Button, _SystemIcons, _styles, _types, _ModalContainer, _ModalStyles, _ModalNote) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -91,7 +91,9 @@
     closeAction,
     submitAction,
     tooltip,
-    children
+    children,
+    note,
+    state
   }) => {
     const [tooltipOpen, setTooltipOpen] = React.useState(false);
 
@@ -256,7 +258,11 @@
       color: _styles.COLORS.neutral_600
     })), tooltipOpen && /*#__PURE__*/React.createElement("span", null, tooltip)), !topImage && ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(_ModalStyles.ModalBody, {
       size: size
-    }, children), /*#__PURE__*/React.createElement(_ModalStyles.ModalFooter, {
+    }, children), note && /*#__PURE__*/React.createElement(_ModalNote.ModalNote, {
+      note: note,
+      state: state,
+      size: size
+    }), /*#__PURE__*/React.createElement(_ModalStyles.ModalFooter, {
       size: size
     }, buttons?.map((b, i) => /*#__PURE__*/React.createElement(_Button.Button, {
       key: b.id || i,
@@ -287,7 +293,9 @@
     tooltip: _propTypes2.default.string,
     backButton: _propTypes2.default.func,
     closeAction: _propTypes2.default.func.isRequired,
-    submitAction: _propTypes2.default.func.isRequired
+    submitAction: _propTypes2.default.func.isRequired,
+    note: _propTypes2.default.string,
+    state: _propTypes2.default.string
   };
   exports.default = ModalDialog;
 });