@laerdal/life-react-components 3.5.2-uss.hackathon → 4.0.0

package/dist/esm/MiniProductCard/MiniProductCard.js

@@ -1,88 +0,0 @@
-import _pt from "prop-types";
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-import styled from 'styled-components';
-import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
-import { ChevronRight } from '../icons/systemicons/SystemIcons';
-import { ComponentMStyling, ComponentSStyling } from '../styles/typography';
-const ProductLink = styled(Link)`
-  display: flex;
-  flex: 1;
-  margin: 10px 8px;
-  color: ${COLORS.black};
-  text-decoration: none;
-
-  ${BREAKPOINTS.MEDIUM} {
-    width: 305px;
-  }
-`;
-const ProductThing = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  border-radius: 8px;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
-
-  &:hover {
-    background: ${COLORS.primary_20};
-
-    .product-chevron-right-path {
-      fill: ${COLORS.primary_600};
-    }
-  }
-  &:active {
-    background: ${COLORS.primary_100};
-
-    .product-chevron-right-path {
-      fill: ${COLORS.primary_600};
-    }
-  }
-`;
-const ProductImage = styled.img`
-  width: 95px;
-  height: 75px;
-  object-fit: fill;
-  border-radius: 8px;
-`;
-const ProductName = styled.h2`
-  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
-  margin: 0;
-  margin-top: 3px;
-`;
-const ProductType = styled.span`
-  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
-  margin: 0;
-`;
-const ProductInnerWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 12px 18px;
-  flex: 1;
-`;
-const RightIconWrapper = styled.div`
-  display: flex;
-  justify-self: flex-start;
-  align-items: center;
-  padding-right: 12px;
-`;
-
-const MiniProductCard = ({
-  url,
-  product
-}) => {
-  return /*#__PURE__*/React.createElement(ProductLink, {
-    to: url ?? ''
-  }, /*#__PURE__*/React.createElement(ProductThing, null, product.image && /*#__PURE__*/React.createElement(ProductImage, {
-    src: product.image
-  }), /*#__PURE__*/React.createElement(ProductInnerWrapper, null, /*#__PURE__*/React.createElement(ProductName, null, product.name), /*#__PURE__*/React.createElement(ProductType, null, product.type)), /*#__PURE__*/React.createElement(RightIconWrapper, null, /*#__PURE__*/React.createElement(ChevronRight, {
-    color: COLORS.primary,
-    className: 'product-chevron-right',
-    size: '24px'
-  }))));
-};
-
-MiniProductCard.propTypes = {
-  url: _pt.string
-};
-export default MiniProductCard;
-//# sourceMappingURL=MiniProductCard.js.map

package/dist/esm/MiniProductCard/MiniProductCard.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/MiniProductCard/MiniProductCard.tsx"],"names":["React","Link","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ChevronRight","ComponentMStyling","ComponentSStyling","ProductLink","black","MEDIUM","ProductThing","div","primary_20","primary_600","primary_100","ProductImage","img","ProductName","h2","Regular","ProductType","span","ProductInnerWrapper","RightIconWrapper","MiniProductCard","url","product","image","name","type","primary"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAAQC,IAAR,QAAmB,kBAAnB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,kBAA7B,QAAsD,WAAtD;AACA,SAAQC,YAAR,QAA2B,kCAA3B;AAEA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,sBAAnD;AAMA,MAAMC,WAAW,GAAGP,MAAM,CAACD,IAAD,CAAO;AACjC;AACA;AACA;AACA,WAAWG,MAAM,CAACM,KAAM;AACxB;AACA;AACA,IAAIP,WAAW,CAACQ,MAAO;AACvB;AACA;AACA,CAVA;AAYA,MAAMC,YAAY,GAAGV,MAAM,CAACW,GAAI;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBT,MAAM,CAACU,UAAW;AACpC;AACA;AACA,cAAcV,MAAM,CAACW,WAAY;AACjC;AACA;AACA;AACA,kBAAkBX,MAAM,CAACY,WAAY;AACrC;AACA;AACA,cAAcZ,MAAM,CAACW,WAAY;AACjC;AACA;AACA,CArBA;AAuBA,MAAME,YAAY,GAAGf,MAAM,CAACgB,GAAI;AAChC;AACA;AACA;AACA;AACA,CALA;AAOA,MAAMC,WAAW,GAAGjB,MAAM,CAACkB,EAAG;AAC9B,IAAIb,iBAAiB,CAACF,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACM,KAApC,CAA2C;AAChE;AACA;AACA,CAJA;AAMA,MAAMY,WAAW,GAAGpB,MAAM,CAACqB,IAAK;AAChC,IAAIf,iBAAiB,CAACH,kBAAkB,CAACgB,OAApB,EAA6BjB,MAAM,CAACM,KAApC,CAA2C;AAChE;AACA,CAHA;AAKA,MAAMc,mBAAmB,GAAGtB,MAAM,CAACW,GAAI;AACvC;AACA;AACA;AACA;AACA,CALA;AAOA,MAAMY,gBAAgB,GAAGvB,MAAM,CAACW,GAAI;AACpC;AACA;AACA;AACA;AACA,CALA;;AAOA,MAAMa,eAAe,GAAG,CAAC;AAAEC,EAAAA,GAAF;AAAOC,EAAAA;AAAP,CAAD,KAAiC;AACvD,sBACE,oBAAC,WAAD;AAAa,IAAA,EAAE,EAAED,GAAG,IAAI;AAAxB,kBACE,oBAAC,YAAD,QACGC,OAAO,CAACC,KAAR,iBAAiB,oBAAC,YAAD;AAAc,IAAA,GAAG,EAAED,OAAO,CAACC;AAA3B,IADpB,eAEE,oBAAC,mBAAD,qBACE,oBAAC,WAAD,QAAcD,OAAO,CAACE,IAAtB,CADF,eAEE,oBAAC,WAAD,QAAcF,OAAO,CAACG,IAAtB,CAFF,CAFF,eAME,oBAAC,gBAAD,qBACE,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE3B,MAAM,CAAC4B,OAA5B;AAAqC,IAAA,SAAS,EAAE,uBAAhD;AAAyE,IAAA,IAAI,EAAE;AAA/E,IADF,CANF,CADF,CADF;AAcD,CAfD;;;AArEEL,EAAAA,G;;AAsFF,eAAeD,eAAf","sourcesContent":["import * as React from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport styled from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\r\nimport {ChevronRight} from '../icons/systemicons/SystemIcons';\r\nimport {Product} from '../types';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\n\r\ntype CardProps = {\r\n  product: Product;\r\n  url?: string;\r\n};\r\nconst ProductLink = styled(Link)`\r\n  display: flex;\r\n  flex: 1;\r\n  margin: 10px 8px;\r\n  color: ${COLORS.black};\r\n  text-decoration: none;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 305px;\r\n  }\r\n`;\r\n\r\nconst ProductThing = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  border-radius: 8px;\r\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\r\n\r\n  &:hover {\r\n    background: ${COLORS.primary_20};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${COLORS.primary_600};\r\n    }\r\n  }\r\n  &:active {\r\n    background: ${COLORS.primary_100};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${COLORS.primary_600};\r\n    }\r\n  }\r\n`;\r\n\r\nconst ProductImage = styled.img`\r\n  width: 95px;\r\n  height: 75px;\r\n  object-fit: fill;\r\n  border-radius: 8px;\r\n`;\r\n\r\nconst ProductName = styled.h2`\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  margin: 0;\r\n  margin-top: 3px;\r\n`;\r\n\r\nconst ProductType = styled.span`\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  margin: 0;\r\n`;\r\n\r\nconst ProductInnerWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 12px 18px;\r\n  flex: 1;\r\n`;\r\n\r\nconst RightIconWrapper = styled.div`\r\n  display: flex;\r\n  justify-self: flex-start;\r\n  align-items: center;\r\n  padding-right: 12px;\r\n`;\r\n\r\nconst MiniProductCard = ({ url, product }: CardProps) => {\r\n  return (\r\n    <ProductLink to={url ?? ''}>\r\n      <ProductThing>\r\n        {product.image && <ProductImage src={product.image} />}\r\n        <ProductInnerWrapper>\r\n          <ProductName>{product.name}</ProductName>\r\n          <ProductType>{product.type}</ProductType>\r\n        </ProductInnerWrapper>\r\n        <RightIconWrapper>\r\n          <ChevronRight color={COLORS.primary} className={'product-chevron-right'} size={'24px'} />\r\n        </RightIconWrapper>\r\n      </ProductThing>\r\n    </ProductLink>\r\n  );\r\n};\r\n\r\nexport default MiniProductCard;\r\n"],"file":"MiniProductCard.js"}

package/dist/esm/MiniProductCard/index.js

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

package/dist/esm/MiniProductCard/index.js.map

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

package/dist/esm/Modals/Modal.js

@@ -1,55 +0,0 @@
-import _pt from "prop-types";
-import * as React from 'react';
-import styled from 'styled-components';
-import { IconButton } from '../Button';
-import { Close } from '../icons/systemicons/SystemIcons';
-import { COLORS } from '../styles';
-import { ModalHeader, ModalBody, ModalFooter } from './ModalStyles';
-/**
- * Modal styles
- */
-
-const Column = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: stretch;
-  height: 100%;
-`;
-const StyledButton = styled(IconButton)`
-  display: flex;
-`;
-export const ModalCloseButton = ({
-  onClick
-}) => {
-  return /*#__PURE__*/React.createElement(StyledButton, {
-    variant: "secondary",
-    shape: "square",
-    action: onClick
-  }, /*#__PURE__*/React.createElement(Close, {
-    size: "24px",
-    color: COLORS.black
-  }));
-};
-
-const Modal = ({
-  children
-}) => /*#__PURE__*/React.createElement(Column, null, children);
-
-Modal.propTypes = {
-  children: _pt.any.isRequired
-};
-
-Modal.Header = ({
-  children
-}) => /*#__PURE__*/React.createElement(ModalHeader, null, children);
-
-Modal.Body = ({
-  children
-}) => /*#__PURE__*/React.createElement(ModalBody, null, children);
-
-Modal.Footer = ({
-  children
-}) => /*#__PURE__*/React.createElement(ModalFooter, null, children);
-
-export default Modal;
-//# sourceMappingURL=Modal.js.map

package/dist/esm/Modals/Modal.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Modals/Modal.tsx"],"names":["React","styled","IconButton","Close","COLORS","ModalHeader","ModalBody","ModalFooter","Column","div","StyledButton","ModalCloseButton","onClick","black","Modal","children","Header","Body","Footer"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,UAAT,QAA2B,WAA3B;AACA,SAASC,KAAT,QAAsB,kCAAtB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,WAAT,EAAsBC,SAAtB,EAAiCC,WAAjC,QAAoD,eAApD;AAEA;AACA;AACA;;AACA,MAAMC,MAAM,GAAGP,MAAM,CAACQ,GAAI;AAC1B;AACA;AACA;AACA;AACA,CALA;AAOA,MAAMC,YAAY,GAAGT,MAAM,CAACC,UAAD,CAAa;AACxC;AACA,CAFA;AAIA,OAAO,MAAMS,gBAAkE,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAiB;AACjG,sBACE,oBAAC,YAAD;AAAc,IAAA,OAAO,EAAC,WAAtB;AAAkC,IAAA,KAAK,EAAC,QAAxC;AAAiD,IAAA,MAAM,EAAEA;AAAzD,kBACE,oBAAC,KAAD;AAAO,IAAA,IAAI,EAAC,MAAZ;AAAmB,IAAA,KAAK,EAAER,MAAM,CAACS;AAAjC,IADF,CADF;AAKD,CANM;;AAYP,MAAMC,KAAK,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,kBAA8B,oBAAC,MAAD,QAASA,QAAT,CAA5C;;;AAHEA,EAAAA,Q;;;AAKFD,KAAK,CAACE,MAAN,GAAe,CAAC;AAAED,EAAAA;AAAF,CAAD,kBAA8B,oBAAC,WAAD,QAAcA,QAAd,CAA7C;;AAEAD,KAAK,CAACG,IAAN,GAAa,CAAC;AAAEF,EAAAA;AAAF,CAAD,kBAA8B,oBAAC,SAAD,QAAYA,QAAZ,CAA3C;;AAEAD,KAAK,CAACI,MAAN,GAAe,CAAC;AAAEH,EAAAA;AAAF,CAAD,kBAA8B,oBAAC,WAAD,QAAcA,QAAd,CAA7C;;AAEA,eAAeD,KAAf","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { IconButton } from '../Button';\r\nimport { Close } from '../icons/systemicons/SystemIcons';\r\nimport { COLORS } from '../styles';\r\nimport { ModalHeader, ModalBody, ModalFooter } from './ModalStyles';\r\n\r\n/**\r\n * Modal styles\r\n */\r\nconst Column = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: stretch;\r\n  height: 100%;\r\n`;\r\n\r\nconst StyledButton = styled(IconButton)`\r\n  display: flex;\r\n`;\r\n\r\nexport const ModalCloseButton: React.FunctionComponent<{ onClick: () => void }> = ({ onClick }) => {\r\n  return (\r\n    <StyledButton variant=\"secondary\" shape=\"square\" action={onClick}>\r\n      <Close size=\"24px\" color={COLORS.black} />\r\n    </StyledButton>\r\n  );\r\n};\r\n\r\ntype ModalProps = {\r\n  children: any;\r\n};\r\n\r\nconst Modal = ({ children }: ModalProps) => <Column>{children}</Column>;\r\n\r\nModal.Header = ({ children }: ModalProps) => <ModalHeader>{children}</ModalHeader>;\r\n\r\nModal.Body = ({ children }: ModalProps) => <ModalBody>{children}</ModalBody>;\r\n\r\nModal.Footer = ({ children }: ModalProps) => <ModalFooter>{children}</ModalFooter>;\r\n\r\nexport default Modal;\r\n"],"file":"Modal.js"}

package/dist/esm/Modals/ModalContainer.js

@@ -1,153 +0,0 @@
-import _pt from "prop-types";
-
-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) { _defineProperty(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; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-import * as React from 'react';
-import ReactModal from 'react-modal';
-import { BOXSHADOWS } from '../styles';
-import { Z_INDEXES } from '../styles/z-indexes';
-const ModalContainerStyles = {
-  content: {
-    top: '50%',
-    left: '50%',
-    right: 'auto',
-    bottom: 'auto',
-    marginRight: '-50%',
-    width: '640px',
-    height: '320px',
-    borderRadius: '8px',
-    boxSizing: 'border-box',
-    margin: 0,
-    overflow: 'auto',
-    boxShadow: BOXSHADOWS.BOXSHADOW_L3
-  }
-}; //override modal classes to define the animations
-
-const modalTransitions = `
-.ReactModal__Overlay {
-  opacity: 0;
-  z-index: ${Z_INDEXES.backdrop};
-}
-
-.ReactModal__Overlay--after-open {
-  opacity: 1;
-  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);
-}
-
-.ReactModal__Content{
-  z-index: ${Z_INDEXES.modal};
-  opacity:0;
-  transform: translate(-50%, -50%) scale(1.1, 1.1);
-}
-
-.ReactModal__Content--after-open{
-  opacity: 1;
-  transform: translate(-50%, -50%) scale(1.0, 1.0);
-  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);
-}
-
-.ReactModal__Overlay--before-close {
-  opacity: 0;
-  transition: opacity 120ms linear;
-}
-
-.ReactModal__Content--before-close{
-  opacity: 0;
-  transform: translate(-50%, -50%) scale(1.1, 1.1);
-  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);
-}
-
-.ReactModal__Body--open,
-.ReactModal__Html--open {
-  overflow: hidden;
-}
-`;
-
-class ModalContainer extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "GetSize", (modalHeight = 'auto', modalWidth = 'auto') => ({
-      height: modalHeight,
-      width: modalWidth
-    }));
-
-    _defineProperty(this, "GetOverflow", (modalOverflow = 'visible') => modalOverflow);
-  }
-
-  componentDidMount() {
-    if (ReactModal.defaultStyles.overlay) {
-      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';
-    } //append style node to override modal transition classes
-
-
-    if (!document.querySelector('[modal-custom-styling="active"]')) {
-      const head = document.head || document.getElementsByTagName('head')[0];
-      const style = document.createElement('style');
-      style.setAttribute('modal-custom-styling', 'active');
-      head.appendChild(style);
-      style.appendChild(document.createTextNode(modalTransitions));
-    }
-  }
-
-  render() {
-    const {
-      id,
-      showModal,
-      closeModal,
-      children,
-      modalHeight,
-      modalWidth,
-      modalOverflow,
-      padding,
-      minWidth = '',
-      maxWidth = ''
-    } = this.props;
-    const sizes = this.GetSize(modalHeight, modalWidth);
-    const {
-      height,
-      width
-    } = sizes;
-    const overflow = this.GetOverflow(modalOverflow);
-    const stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
-      height,
-      width,
-      padding,
-      overflow,
-      minWidth,
-      maxWidth
-    });
-    const styles = {
-      content: stylesConfiguration
-    };
-    return /*#__PURE__*/React.createElement(ReactModal, {
-      id: id,
-      isOpen: showModal,
-      closeTimeoutMS: 120,
-      onRequestClose: () => closeModal(),
-      style: styles,
-      appElement: document.getElementById('root') || ''
-    }, children);
-  }
-
-}
-
-_defineProperty(ModalContainer, "propTypes", {
-  id: _pt.string,
-  showModal: _pt.bool.isRequired,
-  closeModal: _pt.func.isRequired,
-  children: _pt.any.isRequired,
-  modalHeight: _pt.any,
-  modalWidth: _pt.any,
-  modalOverflow: _pt.string,
-  padding: _pt.string,
-  minWidth: _pt.string,
-  maxWidth: _pt.string
-});
-
-export default ModalContainer;
-//# sourceMappingURL=ModalContainer.js.map

package/dist/esm/Modals/ModalContainer.js.map

@@ -1 +0,0 @@
-{"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","Component","modalHeight","modalWidth","modalOverflow","componentDidMount","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","render","id","showModal","closeModal","children","padding","minWidth","maxWidth","props","sizes","GetSize","GetOverflow","stylesConfiguration","Object","assign","styles","getElementById"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport ReactModal from 'react-modal';\r\nimport { BOXSHADOWS } from '../styles';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\nconst ModalContainerStyles = {\r\n  content: {\r\n    top: '50%',\r\n    left: '50%',\r\n    right: 'auto',\r\n    bottom: 'auto',\r\n    marginRight: '-50%',\r\n    width: '640px',\r\n    height: '320px',\r\n    borderRadius: '8px',\r\n    boxSizing: 'border-box' as any,\r\n    margin: 0,\r\n    overflow: 'auto',\r\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\r\n  },\r\n};\r\n\r\n//override modal classes to define the animations\r\nconst modalTransitions = `\r\n.ReactModal__Overlay {\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.backdrop};\r\n}\r\n\r\n.ReactModal__Overlay--after-open {\r\n  opacity: 1;\r\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content{\r\n  z-index: ${Z_INDEXES.modal};\r\n  opacity:0;\r\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\r\n}\r\n\r\n.ReactModal__Content--after-open{\r\n  opacity: 1;\r\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\r\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Overlay--before-close {\r\n  opacity: 0;\r\n  transition: opacity 120ms linear;\r\n}\r\n\r\n.ReactModal__Content--before-close{\r\n  opacity: 0;\r\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\r\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\r\n}\r\n\r\n.ReactModal__Body--open,\r\n.ReactModal__Html--open {\r\n  overflow: hidden;\r\n}\r\n`;\r\n\r\ntype ModalContainerProps = {\r\n  id?: string;\r\n  showModal: boolean;\r\n  closeModal: () => void;\r\n  children: any;\r\n  modalHeight?: any;\r\n  modalWidth?: any;\r\n  modalOverflow?: string;\r\n  padding?: string;\r\n  minWidth?: string;\r\n  maxWidth?: string;\r\n};\r\n\r\ntype ModalContainerState = {};\r\n\r\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\r\n  componentDidMount() {\r\n    if (ReactModal.defaultStyles.overlay) {\r\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\r\n    }\r\n\r\n    //append style node to override modal transition classes\r\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\r\n      const head = document.head || document.getElementsByTagName('head')[0];\r\n      const style = document.createElement('style');\r\n      style.setAttribute('modal-custom-styling', 'active');\r\n      head.appendChild(style);\r\n      style.appendChild(document.createTextNode(modalTransitions));\r\n    }\r\n  }\r\n\r\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\r\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\r\n  render() {\r\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\r\n    const sizes = this.GetSize(modalHeight, modalWidth);\r\n    const { height, width } = sizes;\r\n    const overflow = this.GetOverflow(modalOverflow);\r\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\r\n    const styles = { content: stylesConfiguration };\r\n\r\n    return (\r\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\r\n        {children}\r\n      </ReactModal>\r\n    );\r\n  }\r\n}\r\n\r\nexport default ModalContainer;\r\n"],"file":"ModalContainer.js"}

package/dist/esm/Modals/ModalDialog.js

@@ -1,277 +0,0 @@
-import _pt from "prop-types";
-import * as React from 'react';
-import { Button, IconButton } from '../Button';
-import { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';
-import { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';
-import { Size } from '../types';
-import ModalContainer from './ModalContainer';
-import { BackButtonWrapper, CloseButtonWrapper, Column, FlexContainer, ModalBody, ModalFooter, ModalHeaderActions, ModalHeaderActionsWithImage, ModalTitleSection, StyledModalHeader, ModalHoverModifier } from './ModalStyles';
-import { ModalNote } from './ModalNote';
-import { TooltipWrapper } from '../Tooltips';
-import { HyperLink } from '..';
-export const ModalDialog = ({
-  size,
-  isModalOpen,
-  closeModalAndClearInput,
-  title,
-  topImage,
-  buttons,
-  leftFooterAction,
-  backButton,
-  closeAction,
-  submitAction,
-  tooltip,
-  children,
-  note,
-  state
-}) => {
-  const getMinWidth = () => {
-    switch (size) {
-      case Size.Small:
-        return '320px';
-
-      case Size.Large:
-        return '640px';
-
-      case Size.Medium:
-      default:
-        return '480px';
-    }
-  };
-
-  const getMaxWidth = () => {
-    switch (size) {
-      case Size.Small:
-        return '480px';
-
-      case Size.Large:
-        return '720px';
-
-      case Size.Medium:
-      default:
-        return '640px';
-    }
-  };
-
-  const getImageHeight = () => {
-    switch (size) {
-      case Size.Small:
-        return 160;
-
-      case Size.Medium:
-        return 200;
-
-      case Size.Large:
-        return 240;
-
-      default:
-        return 200;
-    }
-  };
-
-  const getMarginBottom = () => {
-    switch (size) {
-      case Size.Small:
-        return '16px';
-
-      case Size.Medium:
-        return '24px';
-
-      case Size.Large:
-        return '32px';
-
-      default:
-        return '24px';
-    }
-  };
-
-  const getPadding = () => {
-    switch (size) {
-      case Size.Small:
-        return '16px 16px 8px';
-
-      case Size.Medium:
-        return '24px 24px 20px';
-
-      case Size.Large:
-        return '32px';
-
-      default:
-        return '24px 24px 16px';
-    }
-  };
-
-  const ModalTitle = (title, size) => {
-    switch (size) {
-      case Size.Small:
-        return /*#__PURE__*/React.createElement(ComponentM, {
-          textStyle: ComponentTextStyle.Bold
-        }, title);
-
-      case Size.Medium:
-        return /*#__PURE__*/React.createElement(ComponentL, {
-          textStyle: ComponentTextStyle.Bold
-        }, title);
-
-      case Size.Large:
-        return /*#__PURE__*/React.createElement(ComponentXL, {
-          textStyle: ComponentTextStyle.Bold
-        }, title);
-
-      default:
-        return /*#__PURE__*/React.createElement(ComponentL, {
-          textStyle: ComponentTextStyle.Bold
-        }, title);
-    }
-  };
-
-  const ModalTootip = tooltip => {
-    return /*#__PURE__*/React.createElement(ModalHoverModifier, null, /*#__PURE__*/React.createElement(TooltipWrapper, {
-      delay: "0s",
-      size: Size.XSmall,
-      align: "center",
-      position: "top",
-      withArrow: false,
-      label: tooltip
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      variant: "secondary",
-      shape: "circular",
-      action: () => {}
-    }, /*#__PURE__*/React.createElement(Help, {
-      size: "24px",
-      color: COLORS.neutral_600
-    }))));
-  };
-
-  const ModalCloseButton = onClick => {
-    return /*#__PURE__*/React.createElement(CloseButtonWrapper, {
-      hasImage: !!topImage,
-      size: size
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      variant: "secondary",
-      shape: "circular",
-      action: () => onClick(),
-      borderRadius: 48
-    }, /*#__PURE__*/React.createElement(Close, {
-      size: "24px",
-      color: COLORS.black
-    })));
-  };
-
-  const ModalBackButton = () => {
-    if (backButton) {
-      return /*#__PURE__*/React.createElement(BackButtonWrapper, {
-        hasImage: !!topImage,
-        size: size
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        action: () => backButton(),
-        borderRadius: 48
-      }, /*#__PURE__*/React.createElement(ArrowLineLeft, {
-        size: "24px",
-        color: COLORS.black
-      })));
-    }
-  };
-
-  const getLeftActionIconElement = icon => {
-    return /*#__PURE__*/React.cloneElement(icon, {
-      size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px'
-    });
-  };
-
-  const LeftFooterAction = leftFooterAction => {
-    const {
-      text,
-      actionType,
-      disabled,
-      icon,
-      action
-    } = leftFooterAction;
-
-    switch (actionType) {
-      case 'button':
-        return /*#__PURE__*/React.createElement(Button, {
-          id: 'left-action-button',
-          type: leftFooterAction?.type,
-          disabled: disabled,
-          loading: leftFooterAction?.loading,
-          icon: icon,
-          size: size,
-          onClick: action,
-          variant: leftFooterAction?.variant ?? 'secondary',
-          style: {
-            order: -1,
-            marginRight: 'auto'
-          }
-        }, text);
-
-      case 'hyperlink':
-        return /*#__PURE__*/React.createElement(HyperLink, {
-          id: "left-action-hyperlink",
-          className: "footer-action",
-          href: leftFooterAction.href,
-          disabled: disabled,
-          variant: "default"
-        }, icon && getLeftActionIconElement(icon), text);
-
-      case 'note':
-        return /*#__PURE__*/React.createElement("div", {
-          className: "footer-action note"
-        }, icon && getLeftActionIconElement(icon), /*#__PURE__*/React.createElement("span", null, text));
-    }
-  };
-
-  return /*#__PURE__*/React.createElement(ModalContainer, {
-    showModal: isModalOpen,
-    closeModal: closeModalAndClearInput,
-    minWidth: getMinWidth(),
-    maxWidth: getMaxWidth(),
-    modalHeight: "auto",
-    padding: getPadding()
-  }, /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement("form", {
-    onSubmit: submitAction
-  }, topImage && /*#__PURE__*/React.createElement(StyledModalHeader, {
-    size: size,
-    height: getImageHeight(),
-    marginBottom: getMarginBottom()
-  }, /*#__PURE__*/React.createElement("img", {
-    src: topImage,
-    alt: "Modal top"
-  }), /*#__PURE__*/React.createElement(ModalHeaderActionsWithImage, {
-    hasBackButton: !!backButton
-  }, ModalBackButton(), ModalCloseButton(closeAction))), /*#__PURE__*/React.createElement(ModalTitleSection, null, /*#__PURE__*/React.createElement(FlexContainer, null, !topImage && ModalBackButton(), title && ModalTitle(title, size)), /*#__PURE__*/React.createElement(ModalHeaderActions, null, tooltip && ModalTootip(tooltip), !topImage && ModalCloseButton(closeAction))), /*#__PURE__*/React.createElement(ModalBody, {
-    size: size
-  }, children), note && /*#__PURE__*/React.createElement(ModalNote, {
-    note: note,
-    state: state,
-    size: size
-  }), /*#__PURE__*/React.createElement(ModalFooter, {
-    size: size
-  }, leftFooterAction && LeftFooterAction(leftFooterAction), buttons?.map((b, i) => /*#__PURE__*/React.createElement(Button, {
-    key: b.id || i,
-    id: b.id,
-    disabled: b.disabled,
-    loading: b.loading,
-    size: size,
-    onClick: b.action,
-    type: b.type,
-    variant: b.variant
-  }, b.text))))));
-};
-ModalDialog.propTypes = {
-  isModalOpen: _pt.bool.isRequired,
-  closeModalAndClearInput: _pt.any.isRequired,
-  title: _pt.string,
-  topImage: _pt.any,
-  buttons: _pt.array,
-  tooltip: _pt.string,
-  backButton: _pt.func,
-  closeAction: _pt.func.isRequired,
-  submitAction: _pt.func.isRequired,
-  note: _pt.string,
-  state: _pt.string
-};
-export default ModalDialog;
-//# sourceMappingURL=ModalDialog.js.map

package/dist/esm/Modals/ModalDialog.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ModalNote","TooltipWrapper","HyperLink","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","icon","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","map","b","i","id"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport { Button, IconButton } from '../Button';\r\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\r\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\r\nimport { Size } from '../types';\r\nimport ModalContainer from './ModalContainer';\r\nimport {\r\n  BackButtonWrapper,\r\n  CloseButtonWrapper,\r\n  Column,\r\n  FlexContainer,\r\n  ModalBody,\r\n  ModalFooter,\r\n  ModalHeaderActions,\r\n  ModalHeaderActionsWithImage,\r\n  ModalTitleSection,\r\n  StyledModalHeader,\r\n  ModalHoverModifier\r\n} from './ModalStyles';\r\n\r\nimport { ModalNote } from './ModalNote';\r\nimport { TooltipWrapper } from '../Tooltips';\r\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\r\nimport { ReactNode } from 'react';\r\nimport { HyperLink } from '..';\r\n\r\ninterface NewModalProps {\r\n  size?: Size;\r\n  isModalOpen: boolean;\r\n  closeModalAndClearInput: any;\r\n  title?: string;\r\n  topImage?: any;\r\n  buttons?: ButtonAction[];\r\n  leftFooterAction?: LeftFooterAction;\r\n  tooltip?: string;\r\n  backButton?: () => void;\r\n  closeAction: () => void;\r\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\r\n  note?: string;\r\n  state?: string;\r\n}\r\n\r\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\r\n  size,\r\n  isModalOpen,\r\n  closeModalAndClearInput,\r\n  title,\r\n  topImage,\r\n  buttons,\r\n  leftFooterAction,\r\n  backButton,\r\n  closeAction,\r\n  submitAction,\r\n  tooltip,\r\n  children,\r\n  note,\r\n  state,\r\n}) => {\r\n  const getMinWidth = () => {\r\n    switch (size) {\r\n      case Size.Small:\r\n        return '320px';\r\n      case Size.Large:\r\n        return '640px';\r\n      case Size.Medium:\r\n      default:\r\n        return '480px';\r\n    }\r\n  };\r\n\r\n  const getMaxWidth = () => {\r\n    switch (size) {\r\n      case Size.Small:\r\n        return '480px';\r\n      case Size.Large:\r\n        return '720px';\r\n      case Size.Medium:\r\n      default:\r\n        return '640px';\r\n    }\r\n  };\r\n\r\n  const getImageHeight = () => {\r\n    switch (size) {\r\n      case Size.Small:\r\n        return 160;\r\n      case Size.Medium:\r\n        return 200;\r\n      case Size.Large:\r\n        return 240;\r\n      default:\r\n        return 200;\r\n    }\r\n  };\r\n\r\n  const getMarginBottom = () => {\r\n    switch (size) {\r\n      case Size.Small:\r\n        return '16px';\r\n      case Size.Medium:\r\n        return '24px';\r\n      case Size.Large:\r\n        return '32px';\r\n      default:\r\n        return '24px';\r\n    }\r\n  };\r\n\r\n  const getPadding = () => {\r\n    switch (size) {\r\n      case Size.Small:\r\n        return '16px 16px 8px';\r\n      case Size.Medium:\r\n        return '24px 24px 20px';\r\n      case Size.Large:\r\n        return '32px';\r\n      default:\r\n        return '24px 24px 16px';\r\n    }\r\n  };\r\n\r\n  const ModalTitle = (title: string, size?: Size) => {\r\n    switch (size) {\r\n      case Size.Small:\r\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\r\n      case Size.Medium:\r\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\r\n      case Size.Large:\r\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\r\n      default:\r\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\r\n    }\r\n  };\r\n\r\n  const ModalTootip = (tooltip: string) => {\r\n    return (\r\n      <ModalHoverModifier>\r\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\r\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\r\n            <Help size=\"24px\" color={COLORS.neutral_600} />\r\n          </IconButton>\r\n        </TooltipWrapper>\r\n      </ModalHoverModifier>\r\n    );\r\n  };\r\n\r\n  const ModalCloseButton = (onClick: any) => {\r\n    return (\r\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\r\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\r\n          <Close size=\"24px\" color={COLORS.black} />\r\n        </IconButton>\r\n      </CloseButtonWrapper>\r\n    );\r\n  };\r\n\r\n  const ModalBackButton = () => {\r\n    if (backButton) {\r\n      return (\r\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\r\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\r\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\r\n          </IconButton>\r\n        </BackButtonWrapper>\r\n      );\r\n    }\r\n  };\r\n\r\n  const getLeftActionIconElement = (icon: ReactNode) => {\r\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\r\n  };\r\n\r\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\r\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\r\n    switch (actionType) {\r\n      case 'button':\r\n        return (\r\n          <Button\r\n            id={'left-action-button'}\r\n            type={(leftFooterAction as LeftFooterButton)?.type}\r\n            disabled={disabled}\r\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\r\n            icon={icon}\r\n            size={size}\r\n            onClick={action}\r\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\r\n            style={{ order: -1, marginRight: 'auto' }}>\r\n            {text}\r\n          </Button>\r\n        );\r\n      case 'hyperlink':\r\n        return (\r\n          <HyperLink id=\"left-action-hyperlink\" className=\"footer-action\" href={(leftFooterAction as LeftFooterHyperlink).href} disabled={disabled} variant=\"default\">\r\n            {icon && getLeftActionIconElement(icon)}\r\n            {text}\r\n          </HyperLink>\r\n        );\r\n      case 'note':\r\n        return (\r\n          <div className=\"footer-action note\">\r\n            {icon && getLeftActionIconElement(icon)}\r\n            <span>{text}</span>\r\n          </div>\r\n        );\r\n    }\r\n  };\r\n\r\n  return (\r\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\r\n      <Column>\r\n        <form onSubmit={submitAction}>\r\n          {topImage && (\r\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\r\n              <img src={topImage} alt=\"Modal top\" />\r\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\r\n                {ModalBackButton()}\r\n                {ModalCloseButton(closeAction)}\r\n              </ModalHeaderActionsWithImage>\r\n            </StyledModalHeader>\r\n          )}\r\n          <ModalTitleSection>\r\n            <FlexContainer>\r\n              {!topImage && ModalBackButton()}\r\n              {title && ModalTitle(title, size)}\r\n            </FlexContainer>\r\n            <ModalHeaderActions>\r\n              {tooltip && ModalTootip(tooltip)}\r\n              {!topImage && ModalCloseButton(closeAction)}\r\n            </ModalHeaderActions>\r\n          </ModalTitleSection>\r\n\r\n          <ModalBody size={size}>{children}</ModalBody>\r\n\r\n          {note && <ModalNote note={note} state={state} size={size} />}\r\n\r\n          <ModalFooter size={size}>\r\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\r\n            {buttons?.map((b, i) => (\r\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\r\n                {b.text}\r\n              </Button>\r\n            ))}\r\n          </ModalFooter>\r\n        </form>\r\n      </Column>\r\n    </ModalContainer>\r\n  );\r\n};\r\n\r\nexport default ModalDialog;\r\n"],"file":"ModalDialog.js"}