@elliemae/ds-mobile 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/MobileTimePicker/MobileTimePicker.js

@@ -1,32 +1,46 @@
-import * as React from "react";
-import React2, { useRef, useMemo, useEffect } from "react";
-import { PropTypes, describe } from "react-desc";
-import { DSIconColors } from "@elliemae/ds-icon";
-import { RecentDocuments } from "@elliemae/ds-icons";
-import DSButton from "@elliemae/ds-button";
-import { DSInputGroup } from "@elliemae/ds-form";
-import { Input } from "./Input";
-const DSMobileTimePicker = ({ disabled, value, tabIndex, placeholder, onChange }) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useRef, useEffect, useMemo } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import { DSIconColors } from '@elliemae/ds-icon';
+import { RecentDocuments } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import { DSInputGroup } from '@elliemae/ds-form';
+import { Input } from './Input.js';
+
+var _RecentDocuments;
+
+const DSMobileTimePicker = _ref => {
+  let {
+    disabled,
+    value,
+    tabIndex,
+    placeholder,
+    onChange
+  } = _ref;
   const inputRef = useRef(null);
-  const valueArr = value.split(":");
+  const valueArr = value.split(':');
   useEffect(() => {
+    /*
+      necessary if value is being set in mount, 
+      otherwise the clear won't work on the first click
+      [SEE input onChange comment]
+    */
     if (inputRef.current) {
-      inputRef.current.defaultValue = "";
+      inputRef.current.defaultValue = '';
     }
   }, [inputRef.current]);
   const displayValue = useMemo(() => {
-    if (!value || !valueArr[0] || !valueArr[1])
-      return "";
-    const ampm = valueArr[0] >= 12 ? "pm" : "am";
+    if (!value || !valueArr[0] || !valueArr[1]) return '';
+    const ampm = valueArr[0] >= 12 ? 'pm' : 'am';
     const h = valueArr[0] > 12 ? valueArr[0] - 12 : valueArr[0];
-    return `${h} : ${valueArr[1]} ${ampm}`;
+    return "".concat(h, " : ").concat(valueArr[1], " ").concat(ampm);
   }, [value]);
-  return /* @__PURE__ */ React2.createElement(DSInputGroup, {
-    rightAddon: /* @__PURE__ */ React2.createElement(DSButton, {
+  return /*#__PURE__*/_jsx(DSInputGroup, {
+    rightAddon: /*#__PURE__*/_jsx(DSButton, {
       "aria-label": "Time Picker Button",
       color: !disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL,
-      disabled,
-      icon: /* @__PURE__ */ React2.createElement(RecentDocuments, null),
+      disabled: disabled,
+      icon: _RecentDocuments || (_RecentDocuments = /*#__PURE__*/_jsx(RecentDocuments, {})),
       type: "button",
       buttonType: "secondary",
       onClick: () => {
@@ -34,44 +48,65 @@ const DSMobileTimePicker = ({ disabled, value, tabIndex, placeholder, onChange }
         inputRef.current.click();
       }
     })
-  }, /* @__PURE__ */ React2.createElement(Input, {
+  }, void 0, /*#__PURE__*/_jsx(Input, {
     innerRef: inputRef,
     type: "time",
     "data-testid": "ds-mobile-time-picker",
     "aria-label": "Time Picker Input Mask",
-    disabled,
-    placeholder,
-    tabIndex,
-    value,
+    disabled: disabled,
+    placeholder: placeholder,
+    tabIndex: tabIndex,
+    value: value,
     "data-displayvalue": displayValue,
-    onChange: (e) => {
-      const { target } = e.nativeEvent;
+    onChange: e => {
+      // https://github.com/facebook/react/issues/8938#issuecomment-360573204
+      const {
+        target
+      } = e.nativeEvent;
+
       function iosClearDefault() {
-        target.defaultValue = "";
+        target.defaultValue = '';
       }
+
       window.setTimeout(iosClearDefault, 0);
       onChange(e);
     }
   }));
 };
+
 DSMobileTimePicker.defaultProps = {
   disabled: false,
   tabIndex: 0,
-  placeholder: "HH : MM am",
-  value: ""
+  placeholder: 'HH : MM am',
+  value: ''
 };
 const pickerProps = {
-  disabled: PropTypes.bool.description("disabled prop, defaults to false"),
-  tabIndex: PropTypes.number.description("focus order HTML property, 0 as default"),
-  placeholder: PropTypes.string.description("HH : MM am as default"),
-  onChange: PropTypes.func.description("onChange handler, receives change event as first argument"),
-  value: PropTypes.string.description("HH:MM string representing the time or empty string")
+  /**
+   * defaults to false
+   */
+  disabled: PropTypes.bool.description('disabled prop, defaults to false'),
+
+  /**
+   * 0 as default
+   */
+  tabIndex: PropTypes.number.description('focus order HTML property, 0 as default'),
+
+  /**
+   * HH : MM am as default
+   */
+  placeholder: PropTypes.string.description('HH : MM am as default'),
+
+  /**
+   * onChange handler, receives change event as first argument
+   */
+  onChange: PropTypes.func.description('onChange handler, receives change event as first argument'),
+
+  /**
+   * HH:MM string representing the time or empty string
+   */
+  value: PropTypes.string.description('HH:MM string representing the time or empty string')
 };
-DSMobileTimePicker.propTypes = pickerProps;
-const DSMobileTimePickerWithSchema = describe(DSMobileTimePicker).description("Time picker for mobile & tablet");
+const DSMobileTimePickerWithSchema = describe(DSMobileTimePicker).description('Time picker for mobile & tablet');
 DSMobileTimePickerWithSchema.propTypes = pickerProps;
-export {
-  DSMobileTimePicker,
-  DSMobileTimePickerWithSchema
-};
-//# sourceMappingURL=MobileTimePicker.js.map
+
+export { DSMobileTimePicker, DSMobileTimePickerWithSchema };

package/esm/MobileTimePicker/MobileTimePicker.stories.js

@@ -0,0 +1,26 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { Grid } from '@elliemae/ds-grid';
+import { addDefaultMobileView, PATH_MOBILE_TIME_PICKER, useMobileTimePicker } from '@elliemae/ds-devutils';
+import { DSMobileTimePicker } from './MobileTimePicker.js';
+
+var MobileTimePicker_stories = {
+  title: PATH_MOBILE_TIME_PICKER
+};
+const Basic = () => {
+  // KNOBS
+  const {
+    value,
+    onChange
+  } = useMobileTimePicker(); // KNOBS
+
+  return /*#__PURE__*/_jsx(Grid, {
+    m: "xs"
+  }, void 0, /*#__PURE__*/_jsx(DSMobileTimePicker, {
+    value: value,
+    onChange: onChange
+  }));
+};
+addDefaultMobileView(Basic);
+
+export { Basic, MobileTimePicker_stories as default };

package/esm/MobileTimePicker/index.js

@@ -1,3 +1 @@
-import * as React from "react";
-export * from "./MobileTimePicker";
-//# sourceMappingURL=index.js.map
+export { DSMobileTimePicker, DSMobileTimePickerWithSchema } from './MobileTimePicker.js';

package/esm/MobileTouchable/MobileTouchable.js

@@ -1,43 +1,50 @@
-import * as React from "react";
-import React2, { useState, useCallback } from "react";
-import { noop } from "lodash";
-import PropTypes from "prop-types";
-import styled from "styled-components";
-import { Grid } from "@elliemae/ds-grid";
-import { withTheme } from "@elliemae/ds-system";
-const StyledContainer = styled(Grid)`
-  cursor: pointer;
-  background: ${(props) => props.touching ? props.theme.colors.brand["100"] : props.theme.colors.neutral["000"]};
-`;
-const MobileTouchable = ({
-  children,
-  onClick = noop,
-  theme,
-  dataTestid = "mobile-touchable",
-  render,
-  ...gridProps
-}) => {
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { useState, useCallback } from 'react';
+import { noop } from 'lodash';
+import styled from 'styled-components';
+import { Grid } from '@elliemae/ds-grid';
+import { withTheme } from '@elliemae/ds-system';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["children", "onClick", "theme", "dataTestid", "render"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const StyledContainer = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-6cxve6-0"
+})(["cursor:pointer;background:", ";"], props => props.touching ? props.theme.colors.brand['100'] : props.theme.colors.neutral['000']);
+
+const MobileTouchable = _ref => {
+  let {
+    children,
+    onClick = noop,
+    theme,
+    dataTestid = 'mobile-touchable',
+    render
+  } = _ref,
+      gridProps = _objectWithoutProperties(_ref, _excluded);
+
   const [touching, setTouching] = useState(false);
   const handleStart = useCallback(() => setTouching(true));
   const handleEnd = useCallback(() => setTouching(false));
-  return /* @__PURE__ */ React2.createElement(StyledContainer, {
-    ...gridProps,
-    touching,
-    onClick,
+  return /*#__PURE__*/jsx(StyledContainer, _objectSpread(_objectSpread({}, gridProps), {}, {
+    touching: touching,
+    onClick: onClick,
     onTouchStart: handleStart,
     onTouchEnd: handleEnd,
-    "data-testid": dataTestid
-  }, children || render(gridProps));
-};
-MobileTouchable.propTypes = {
-  onClick: PropTypes.func,
-  children: PropTypes.any,
-  render: PropTypes.func,
-  theme: PropTypes.any,
-  dataTestid: PropTypes.string
+    "data-testid": dataTestid,
+    children: children || render(gridProps)
+  }));
 };
+
 const DSMobileTouchable = withTheme(MobileTouchable);
-export {
-  DSMobileTouchable
-};
-//# sourceMappingURL=MobileTouchable.js.map
+
+export { DSMobileTouchable };

package/esm/MobileTouchable/index.js

@@ -1,3 +1 @@
-import * as React from "react";
-export * from "./MobileTouchable";
-//# sourceMappingURL=index.js.map
+export { DSMobileTouchable } from './MobileTouchable.js';

package/esm/Modal/Modal.js

@@ -1,110 +1,122 @@
-import * as React from "react";
-import React2 from "react";
-import { describe, PropTypes } from "react-desc";
-import { noop } from "lodash";
-import { Grid } from "@elliemae/ds-grid";
-import { WarningTriangle } from "@elliemae/ds-icons";
-import DSButton from "@elliemae/ds-button";
-import { useTheme } from "@elliemae/ds-system";
-import { ModalPosition, ModalBox, BackShadow, ModalIcon, ModalTitle, ModalDescription, BodyFix } from "./styled";
-const Modal = ({
-  zIndex = 1,
-  title = "",
-  description = "",
-  onClose = noop,
-  showSecondaryAction = true,
-  secondaryActionProps = {
-    onClick: noop,
-    labelText: "Cancel"
-  },
-  primaryActionProps = {
-    onClick: noop,
-    labelText: "Accept"
-  },
-  isOpen = false
-}) => {
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import { noop } from 'lodash';
+import { Grid } from '@elliemae/ds-grid';
+import { WarningTriangle } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import { useTheme } from '@elliemae/ds-system';
+import { BodyFix, BackShadow, ModalPosition, ModalBox, ModalIcon, ModalTitle, ModalDescription } from './styled.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var _ModalIcon;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const Modal = _ref => {
+  let {
+    zIndex = 1,
+    title = '',
+    description = '',
+    onClose = noop,
+    showSecondaryAction = true,
+    secondaryActionProps = {
+      onClick: noop,
+      labelText: 'Cancel'
+    },
+    primaryActionProps = {
+      onClick: noop,
+      labelText: 'Accept'
+    },
+    isOpen = false
+  } = _ref;
   const theme = useTheme();
-  if (!isOpen)
-    return null;
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(BodyFix, {
-    isOpen
-  }), /* @__PURE__ */ React2.createElement(BackShadow, {
-    onClick: onClose,
-    zIndex
-  }), /* @__PURE__ */ React2.createElement(ModalPosition, {
-    zIndex,
-    cols: ["auto"]
-  }, /* @__PURE__ */ React2.createElement(ModalBox, {
-    maxHeight: `${window.innerHeight * 0.75}px`,
-    rows: [1, "80px"],
-    style: {
-      overflow: "hidden"
-    }
-  }, /* @__PURE__ */ React2.createElement(Grid, {
-    pl: "xs",
-    pr: "xs",
-    style: {
-      overflow: "hidden"
-    }
-  }, /* @__PURE__ */ React2.createElement(Grid, {
-    rows: ["auto", "auto", 1],
-    style: {
-      overflow: "hidden"
-    }
-  }, /* @__PURE__ */ React2.createElement(ModalIcon, null, /* @__PURE__ */ React2.createElement(WarningTriangle, {
-    size: "xxl"
-  })), /* @__PURE__ */ React2.createElement(ModalTitle, {
-    "data-testid": "modal-title"
-  }, title), /* @__PURE__ */ React2.createElement(ModalDescription, {
-    "data-testid": "modal-desc",
-    style: {
-      overflow: "auto"
-    }
-  }, description))), /* @__PURE__ */ React2.createElement(Grid, {
-    pt: "24px"
-  }, /* @__PURE__ */ React2.createElement(Grid, {
-    pl: "xs",
-    pr: "xs",
-    cols: showSecondaryAction ? [1, 1] : [1],
-    gutter: "xs",
-    justifyContent: "center",
-    alignItems: "center",
-    style: {
-      borderTop: `1px solid ${theme.colors.neutral[100]}`
-    }
-  }, showSecondaryAction && /* @__PURE__ */ React2.createElement(DSButton, {
-    ...secondaryActionProps,
-    labelText: secondaryActionProps.labelText || " Cancel",
-    buttonType: "secondary",
-    "data-testid": "modal-secondary-btn"
-  }), /* @__PURE__ */ React2.createElement(DSButton, {
-    labelText: primaryActionProps.labelText || " Accept",
-    ...primaryActionProps,
-    buttonType: "primary",
-    "data-testid": "modal-primary-btn"
-  }))))));
+  if (!isOpen) return null;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(BodyFix, {
+      isOpen: isOpen
+    }), /*#__PURE__*/_jsx(BackShadow, {
+      onClick: onClose,
+      zIndex: zIndex
+    }), /*#__PURE__*/_jsx(ModalPosition, {
+      zIndex: zIndex,
+      cols: ['auto']
+    }, void 0, /*#__PURE__*/_jsx(ModalBox, {
+      maxHeight: "".concat(window.innerHeight * 0.75, "px"),
+      rows: [1, '80px'],
+      style: {
+        overflow: 'hidden'
+      }
+    }, void 0, /*#__PURE__*/_jsx(Grid, {
+      pl: "xs",
+      pr: "xs",
+      style: {
+        overflow: 'hidden'
+      }
+    }, void 0, /*#__PURE__*/_jsx(Grid, {
+      rows: ['auto', 'auto', 1],
+      style: {
+        overflow: 'hidden'
+      }
+    }, void 0, _ModalIcon || (_ModalIcon = /*#__PURE__*/_jsx(ModalIcon, {}, void 0, /*#__PURE__*/_jsx(WarningTriangle, {
+      size: "xxl"
+    }))), /*#__PURE__*/_jsx(ModalTitle, {
+      "data-testid": "modal-title"
+    }, void 0, title), /*#__PURE__*/_jsx(ModalDescription, {
+      "data-testid": "modal-desc",
+      style: {
+        overflow: 'auto'
+      }
+    }, void 0, description))), /*#__PURE__*/_jsx(Grid, {
+      pt: "24px"
+    }, void 0, /*#__PURE__*/_jsx(Grid, {
+      pl: "xs",
+      pr: "xs",
+      cols: showSecondaryAction ? [1, 1] : [1],
+      gutter: "xs",
+      justifyContent: "center",
+      alignItems: "center",
+      style: {
+        borderTop: "1px solid ".concat(theme.colors.neutral[100])
+      }
+    }, void 0, showSecondaryAction && /*#__PURE__*/jsx(DSButton, _objectSpread(_objectSpread({}, secondaryActionProps), {}, {
+      labelText: secondaryActionProps.labelText || ' Cancel',
+      buttonType: "secondary",
+      "data-testid": "modal-secondary-btn"
+    })), /*#__PURE__*/jsx(DSButton, _objectSpread(_objectSpread({
+      labelText: primaryActionProps.labelText || ' Accept'
+    }, primaryActionProps), {}, {
+      buttonType: "primary",
+      "data-testid": "modal-primary-btn"
+    }))))))]
+  });
 };
+
 const modalProps = {
-  isOpen: PropTypes.bool.description("Wheter the modal is open or closed").defaultValue(false),
-  zIndex: PropTypes.number.description("z-index value").defaultValue(1),
-  title: PropTypes.string.description("Modal s title").isRequired,
-  description: PropTypes.string.description("Modal s content").isRequired,
-  onClose: PropTypes.func.description("Function executed when the modal closes"),
-  showSecondaryAction: PropTypes.bool.description("Wheter to show secondary action button or not").defaultValue(true),
+  isOpen: PropTypes.bool.description('Wheter the modal is open or closed').defaultValue(false),
+  zIndex: PropTypes.number.description('z-index value').defaultValue(1),
+  title: PropTypes.string.description('Modal s title').isRequired,
+  description: PropTypes.string.description('Modal s content').isRequired,
+  onClose: PropTypes.func.description('Function executed when the modal closes'),
+  showSecondaryAction: PropTypes.bool.description('Wheter to show secondary action button or not').defaultValue(true),
   secondaryActionProps: PropTypes.shape({
     onClick: PropTypes.func,
     labelText: PropTypes.string
-  }).description("Secondary action props"),
+  }).description('Secondary action props'),
   primaryActionProps: PropTypes.shape({
     onClick: PropTypes.func,
     labelText: PropTypes.string
-  }).description("Primary action props")
+  }).description('Primary action props')
 };
-Modal.propTypes = modalProps;
 const ModalWithSchema = describe(Modal);
 ModalWithSchema.propTypes = modalProps;
-export {
-  Modal,
-  ModalWithSchema
-};
-//# sourceMappingURL=Modal.js.map
+
+export { Modal, ModalWithSchema };

package/esm/Modal/index.js

@@ -1,7 +1 @@
-import * as React from "react";
-import { Modal, ModalWithSchema } from "./Modal";
-export {
-  Modal,
-  ModalWithSchema
-};
-//# sourceMappingURL=index.js.map
+export { Modal, ModalWithSchema } from './Modal.js';

package/esm/Modal/styled.js

@@ -1,65 +1,27 @@
-import * as React from "react";
-import { Grid } from "@elliemae/ds-grid";
-import styled from "styled-components";
-import { createGlobalStyle } from "@elliemae/ds-system";
-const BodyFix = createGlobalStyle`
-    body{
-        ${(props) => props.isOpen ? "overflow: hidden;" : ""};
-    }
-`;
-const ModalBox = styled(Grid)`
-  width: 100%;
-  background: ${(props) => props.theme.colors.neutral["000"]};
-  max-height: ${(props) => props.maxHeight};
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
-`;
-const ModalPosition = styled(Grid)`
-  z-index: ${(props) => props.zIndex};
-  background: ${(props) => props.theme.colors.neutral["000"]};
-  position: absolute;
-  top: 12.5%;
-  width: 80%;
-  left: 10%;
-`;
-const BackShadow = styled(Grid)`
-  z-index: ${(props) => props.zIndex};
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.6);
-  overflow: hidden;
-`;
-const ModalIcon = styled(Grid)`
-  padding-top: 24px;
-  justify-content: center;
-  span.em-ds-icon svg,
-  svg:not([fill]) {
-    fill: ${(props) => props.theme.colors.warning[600]};
-  }
-`;
-const ModalTitle = styled(Grid)`
-  padding-top: 24px;
-  font-size: 22px;
-  font-weight: 600;
-  color: ${(props) => props.theme.colors.neutral[600]};
-  text-align: center;
-`;
-const ModalDescription = styled(Grid)`
-  padding-top: ${(props) => props.theme.space.xxs};
-  font-size: 16px;
-  font-weight: 400;
-  color: ${(props) => props.theme.colors.neutral[500]};
-  text-align: center;
-`;
-export {
-  BackShadow,
-  BodyFix,
-  ModalBox,
-  ModalDescription,
-  ModalIcon,
-  ModalPosition,
-  ModalTitle
-};
-//# sourceMappingURL=styled.js.map
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { Grid } from '@elliemae/ds-grid';
+import styled from 'styled-components';
+import { createGlobalStyle } from '@elliemae/ds-system';
+
+var _templateObject;
+const BodyFix = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    body{\n        ", ";\n    }\n"])), props => props.isOpen ? 'overflow: hidden;' : '');
+const ModalBox = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-cke90o-0"
+})(["width:100%;background:", ";max-height:", ";box-shadow:0 2px 4px 0 rgba(0,0,0,0.5);"], props => props.theme.colors.neutral['000'], props => props.maxHeight);
+const ModalPosition = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-cke90o-1"
+})(["z-index:", ";background:", ";position:absolute;top:12.5%;width:80%;left:10%;"], props => props.zIndex, props => props.theme.colors.neutral['000']);
+const BackShadow = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-cke90o-2"
+})(["z-index:", ";position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);overflow:hidden;"], props => props.zIndex);
+const ModalIcon = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-cke90o-3"
+})(["padding-top:24px;justify-content:center;span.em-ds-icon svg,svg:not([fill]){fill:", ";}"], props => props.theme.colors.warning[600]);
+const ModalTitle = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-cke90o-4"
+})(["padding-top:24px;font-size:22px;font-weight:600;color:", ";text-align:center;"], props => props.theme.colors.neutral[600]);
+const ModalDescription = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-cke90o-5"
+})(["padding-top:", ";font-size:16px;font-weight:400;color:", ";text-align:center;"], props => props.theme.space.xxs, props => props.theme.colors.neutral[500]);
+
+export { BackShadow, BodyFix, ModalBox, ModalDescription, ModalIcon, ModalPosition, ModalTitle };