@elliemae/ds-mobile 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/MobileDropdownMenu/MobileDropdownInput.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var dsIcons = require('@elliemae/ds-icons');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+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__default["default"](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 MobileDropdownInput = /*#__PURE__*/styled__default["default"].input.withConfig({
+  componentId: "sc-1rsc1yn-0"
+})(["-webkit-appearance:none;-moz-appearance:none;-webkit-tap-highlight-color:transparent;caret-color:transparent;padding-right:32px;padding-left:10px;border-radius:2px;width:100%;background:", ";height:32px;line-height:32px;border:solid 1px ", ";&:active,&:focus{", "}"], props => props.theme.colors.neutral['000'], props => props.theme.colors.neutral[200], props => dsSystem.focus(props.theme.colors.brand[700]));
+const MobileDropdownInputWrap = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-1rsc1yn-1"
+})(["position:relative;width:100%;display:inline-block;height:32px;"]);
+const CaretWrap = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-1rsc1yn-2"
+})(["width:32px;height:32px;position:absolute;right:0;top:0;display:flex;justify-content:center;align-items:center;"]);
+const Caret = _ref => {
+  let {
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](CaretWrap, {
+    onClick: onClick
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
+    color: ['brand-primary', '600']
+  }));
+};
+const DSMobileDropdownTriggerInput = _ref2 => {
+  let {
+    inputProps,
+    caretProps
+  } = _ref2;
+  return /*#__PURE__*/_jsx__default["default"](MobileDropdownInputWrap, {
+    "data-testid": "ds-mobile-ddwn-menu"
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(MobileDropdownInput, _objectSpread(_objectSpread({}, inputProps), {}, {
+    readOnly: true
+  })), /*#__PURE__*/jsxRuntime.jsx(Caret, _objectSpread({}, caretProps)));
+};
+
+exports.Caret = Caret;
+exports.DSMobileDropdownTriggerInput = DSMobileDropdownTriggerInput;
+exports.MobileDropdownInput = MobileDropdownInput;
+exports.MobileDropdownInputWrap = MobileDropdownInputWrap;

package/cjs/MobileDropdownMenu/MobileDropdownMenu.js

@@ -0,0 +1,99 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var React = require('react');
+var reactDesc = require('react-desc');
+var MobileContextMenu = require('../MobileContextMenu/MobileContextMenu.js');
+var MobileContextMenuItem = require('../MobileContextMenu/MobileContextMenuItem.js');
+require('../MobileContextMenu/MobileContextMenuGroup.js');
+var MobileDropdownInput = require('./MobileDropdownInput.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const DSMobileDropdownMenu = _ref => {
+  let {
+    placeholder,
+    options = [],
+    title,
+    value,
+    itemsProps = {
+      label: undefined,
+      leftProp: undefined,
+      isGroup: false,
+      isMulti: false,
+      singleSelect: false,
+      isItemSelected: () => false,
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onClick: () => {}
+    }
+  } = _ref;
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const inputProps = React__default["default"].useMemo(() => ({
+    readOnly: true,
+    value,
+    onClick: () => setMenuOpen(true),
+    ref: inputRef,
+    placeholder
+  }), [value, placeholder]);
+  const caretProps = React__default["default"].useMemo(() => ({
+    onClick: () => {
+      inputRef.current.focus();
+      setMenuOpen(true);
+    }
+  }), []);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/_jsx__default["default"](MobileDropdownInput.DSMobileDropdownTriggerInput, {
+      inputProps: inputProps,
+      caretProps: caretProps
+    }), menuOpen ? /*#__PURE__*/_jsx__default["default"](MobileContextMenu.DSMobileContextMenu, {
+      title: title,
+      open: true,
+      onChange: (_, e) => {
+        setMenuOpen(false);
+      },
+      onClickOutside: () => setMenuOpen(false)
+    }, void 0, options.map((opt, i) => /*#__PURE__*/_jsx__default["default"](MobileContextMenuItem.DSMobileContextMenuItem, {
+      title: opt.label,
+      value: opt.value,
+      isSelected: itemsProps.isItemSelected(opt),
+      onClick: e => {
+        setMenuOpen(false);
+        itemsProps.onClick(opt, e);
+      },
+      label: itemsProps.label,
+      leftProp: itemsProps.leftProp,
+      isGroup: itemsProps.isGroup,
+      isMulti: itemsProps.isMulti,
+      singleSelect: itemsProps.singleSelect
+    }, 'ddwn'.concat("".concat(i))))) : null]
+  });
+};
+
+const props = {
+  /** dropdown menu placeholder */
+  placeholder: reactDesc.PropTypes.string.description('dropdown menu placeholder'),
+
+  /** context menu menu title */
+  title: reactDesc.PropTypes.string.description('context menu menu title'),
+
+  /** context menu options / items */
+  options: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.shape({
+    value: reactDesc.PropTypes.string,
+    label: reactDesc.PropTypes.string
+  })).description('context menu options / items')
+};
+const DSMobileDropdownMenuWithSchema = reactDesc.describe(DSMobileDropdownMenu);
+DSMobileDropdownMenuWithSchema.propTypes = props;
+
+exports.DSMobileDropdownMenu = DSMobileDropdownMenu;
+exports.DSMobileDropdownMenuWithSchema = DSMobileDropdownMenuWithSchema;

package/cjs/MobileDropdownMenu/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MobileDropdownMenu = require('./MobileDropdownMenu.js');
+var MobileDropdownInput = require('./MobileDropdownInput.js');
+
+
+
+exports.DSMobileDropdownMenu = MobileDropdownMenu.DSMobileDropdownMenu;
+exports.DSMobileDropdownMenuWithSchema = MobileDropdownMenu.DSMobileDropdownMenuWithSchema;
+exports.DSMobileDropdownTriggerInput = MobileDropdownInput.DSMobileDropdownTriggerInput;

package/cjs/MobileEmtpyState/MobileEmptyState.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var styled = require('styled-components');
+var reactDesc = require('react-desc');
+var dsIcons = require('@elliemae/ds-icons');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Wrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1v2x6kj-0"
+})(["display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;"]);
+const Label = /*#__PURE__*/styled__default["default"].p.withConfig({
+  componentId: "sc-1v2x6kj-1"
+})(["color:", ";font-size:", ";font-weight:", ";min-width:132px;"], props => props.theme.colors.neutral['600'], props => props.theme.space.xs, props => props.theme.fontWeights.semibold);
+
+const DSMobileEmptyState = _ref => {
+  let {
+    label = 'No search results found.'
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](Wrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.Search, {
+    size: "xxl",
+    color: ['neutral', 400]
+  }), /*#__PURE__*/_jsx__default["default"](Label, {}, void 0, label));
+};
+
+const props = {
+  /** empty state label */
+  label: reactDesc.PropTypes.string.description('empty state label')
+};
+const DSMobileEmptyStateWithSchema = reactDesc.describe(DSMobileEmptyState);
+DSMobileEmptyStateWithSchema.propTypes = props;
+
+exports.DSMobileEmptyState = DSMobileEmptyState;
+exports.DSMobileEmptyStateWithSchema = DSMobileEmptyStateWithSchema;

package/cjs/MobileEmtpyState/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MobileEmptyState = require('./MobileEmptyState.js');
+
+
+
+exports.DSMobileEmptyState = MobileEmptyState.DSMobileEmptyState;
+exports.DSMobileEmptyStateWithSchema = MobileEmptyState.DSMobileEmptyStateWithSchema;
+exports["default"] = MobileEmptyState.DSMobileEmptyState;

package/cjs/MobileFilterbar/Filterbar.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var styled = require('styled-components');
+var reactDesc = require('react-desc');
+var dsSystem = require('@elliemae/ds-system');
+var dsGrid = require('@elliemae/ds-grid');
+var Separator$1 = require('../MobileSeparator/Separator.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Bar = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-14ysw84-0"
+})(["display:flex;overflow:auto;background-color:", ";padding-left:", ";& > *{flex-shrink:0;}&::-webkit-scrollbar{display:none;}"], props => props.theme.colors.neutral['000'], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs));
+const Separator = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-14ysw84-1"
+})(["& > *{margin:0;}"]);
+
+const DSMobileFilterbar = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    rows: ['auto', 'auto'],
+    "data-testid": "filter-bar-wrapper"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Bar, {}, void 0, children), /*#__PURE__*/_jsx__default["default"](Separator, {}, void 0, /*#__PURE__*/_jsx__default["default"](Separator$1["default"], {
+    margin: "xxs",
+    color: ['neutral', '300']
+  })));
+};
+
+const filterbarProps = {
+  children: reactDesc.PropTypes.element.description('FilterBar Items').isRequired
+};
+const FilterbarWithSchema = reactDesc.describe(DSMobileFilterbar);
+FilterbarWithSchema.propTypes = filterbarProps;
+
+exports.DSMobileFilterbar = DSMobileFilterbar;
+exports.FilterbarWithSchema = FilterbarWithSchema;

package/cjs/MobileFilterbar/FilterbarItem.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var dsGrid = require('@elliemae/ds-grid');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const DSMobileFilterbarItem = _ref => {
+  let {
+    children,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    "data-testid": "filter-bar-item-wrapper",
+    cols: ['min-content'],
+    pr: "xxs",
+    pt: "xxs",
+    role: "button",
+    onClick: onClick
+  }, void 0, children);
+};
+
+const filterbarItemProps = {
+  children: reactDesc.PropTypes.element.description('FilterBar Items').isRequired,
+  onClick: reactDesc.PropTypes.func.description('Function executed when clicking filterbar item')
+};
+const FilterbarItemWithSchema = reactDesc.describe(DSMobileFilterbarItem);
+FilterbarItemWithSchema.propTypes = filterbarItemProps;
+
+exports.DSMobileFilterbarItem = DSMobileFilterbarItem;
+exports.FilterbarItemWithSchema = FilterbarItemWithSchema;

package/cjs/MobileFilterbar/FilterbarSort.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var styled = require('styled-components');
+var dsGrid = require('@elliemae/ds-grid');
+var Separator$1 = require('../MobileSeparator/Separator.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Separator = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-103uq0b-0"
+})(["& > *{margin-left:0;}"]);
+
+const DSMobileFilterbarSort = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [children, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+      pb: "xxs",
+      pt: "xxs",
+      cols: ['min-content']
+    }, void 0, /*#__PURE__*/_jsx__default["default"](Separator, {}, void 0, /*#__PURE__*/_jsx__default["default"](Separator$1["default"], {
+      margin: "xxs",
+      direction: "vertical",
+      color: ['neutral', '300']
+    })))]
+  });
+};
+
+const filterbarSortProps = {
+  children: reactDesc.PropTypes.element.description('FilterBar Sort Item').isRequired
+};
+const FilterbarSortWithSchema = reactDesc.describe(DSMobileFilterbarSort);
+FilterbarSortWithSchema.propTypes = filterbarSortProps;
+
+exports.DSMobileFilterbarSort = DSMobileFilterbarSort;
+exports.FilterbarSortWithSchema = FilterbarSortWithSchema;

package/cjs/MobileFilterbar/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Filterbar = require('./Filterbar.js');
+var FilterbarSort = require('./FilterbarSort.js');
+var FilterbarItem = require('./FilterbarItem.js');
+
+
+
+exports.DSMobileFilterbar = Filterbar.DSMobileFilterbar;
+exports.FilterbarWithSchema = Filterbar.FilterbarWithSchema;
+exports.DSMobileFilterbarSort = FilterbarSort.DSMobileFilterbarSort;
+exports.FilterbarSortWithSchema = FilterbarSort.FilterbarSortWithSchema;
+exports.DSMobileFilterbarItem = FilterbarItem.DSMobileFilterbarItem;
+exports.FilterbarItemWithSchema = FilterbarItem.FilterbarItemWithSchema;

package/cjs/MobileFooter/Action.js

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var styled = require('styled-components');
+var styledComponents = require('@xstyled/styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var dsGrid = require('@elliemae/ds-grid');
+var reactDesc = require('react-desc');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Label = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-1op229o-0"
+})(["", " ", " padding-bottom:", ";padding-top:calc(", " / 2);"], styledComponents.typography, dsSystem.color('neutral', '800'), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs));
+
+const DSMobileFooterAction = _ref => {
+  let {
+    label,
+    icon,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    "data-testid": "ds-mobile-footer-action",
+    rows: ['auto'].concat(label ? 'min-content' : 'none'),
+    justifyContent: "center",
+    role: "button",
+    onClick: onClick
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    justifyContent: "center",
+    alignItems: "center"
+  }, void 0, /*#__PURE__*/React__default["default"].cloneElement(icon, {
+    'data-testid': 'ds-mobile-footer-action-icon',
+    size: !label ? 'l' : 'm'
+  })), label && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    justifyContent: "center"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Label, {
+    fontSize: "11px"
+  }, void 0, label)));
+};
+
+const actionProps = {
+  /** Action label */
+  label: reactDesc.PropTypes.string.description('Action label'),
+
+  /** Action icon */
+  icon: reactDesc.PropTypes.element.description('Action icon'),
+
+  /** onClick callback */
+  onClick: reactDesc.PropTypes.func.description('onClick callback')
+};
+const DSMobileFooterActionWithSchema = reactDesc.describe(DSMobileFooterAction).description('Mobile footer action');
+DSMobileFooterActionWithSchema.propTypes = actionProps;
+
+exports.DSMobileFooterAction = DSMobileFooterAction;
+exports.DSMobileFooterActionWithSchema = DSMobileFooterActionWithSchema;

package/cjs/MobileFooter/Footer.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.constructor.js');
+require('core-js/modules/esnext.async-iterator.to-array.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.to-array.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var React = require('react');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var dsGrid = require('@elliemae/ds-grid');
+var DSButton = require('@elliemae/ds-button');
+var reactDesc = require('react-desc');
+var Text = require('./Text.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+const FooterWrap = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-ls5vfg-0"
+})(["background-color:", ";border-top:", ";height:", ";"], props => props.theme.colors.neutral['000'], props => dsSystem.border(props.theme.colors.neutral[100]), props => "calc(".concat(dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), " * 7)"));
+
+const MobileFooter = _ref => {
+  let {
+    children
+  } = _ref;
+  const childArr = React__default["default"].Children.toArray(children);
+  const isButtonType = childArr[0].type === Text.DSMobileFooterText || childArr[0].type === DSButton__default["default"];
+
+  const setCols = () => {
+    if (isButtonType) {
+      return childArr.length === 1 ? ['90%'] : ['45%', '45%'];
+    }
+
+    return childArr.map(() => "".concat(100 / childArr.length, "%"));
+  };
+
+  return /*#__PURE__*/_jsx__default["default"](FooterWrap, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    cols: setCols(),
+    gutter: isButtonType ? 'xs' : undefined,
+    justifyContent: "center",
+    alignItems: isButtonType ? 'center' : undefined
+  }, void 0, childArr.map((c, i) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _jsx__default["default"](dsGrid.Grid, {}, i, c))));
+};
+
+const footerProps = {
+  /**
+   * Instance of DSButton, DSMobileFooterText or DSMobileFooterAction
+   */
+  children: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.element, reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.element)]).isRequired.description('Instance of DSButton, DSMobileFooterText or DSMobileFooterAction')
+};
+const MobileFooterWithSchema = reactDesc.describe(MobileFooter);
+MobileFooterWithSchema.propTypes = footerProps;
+
+exports.MobileFooterWithSchema = MobileFooterWithSchema;
+exports["default"] = MobileFooter;

package/cjs/MobileFooter/Text.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var reactDesc = require('react-desc');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Text = /*#__PURE__*/styled__default["default"].p.withConfig({
+  componentId: "sc-1v0cqsw-0"
+})(["margin:auto 0;", " ", " ", ""], dsSystem.truncate(), dsSystem.textStyle('body'), dsSystem.color('neutral', '800'));
+
+const DSMobileFooterText = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](Text, {}, void 0, children);
+};
+
+const props = {
+  children: reactDesc.PropTypes.string.isRequired.description('Children')
+};
+const DSMobileFooterTextWithSchema = reactDesc.describe(DSMobileFooterText);
+DSMobileFooterTextWithSchema.propTypes = props;
+
+exports.DSMobileFooterText = DSMobileFooterText;
+exports.DSMobileFooterTextWithSchema = DSMobileFooterTextWithSchema;

package/cjs/MobileFooter/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Footer = require('./Footer.js');
+var Text = require('./Text.js');
+var Action = require('./Action.js');
+
+
+
+exports.DSMobileFooter = Footer["default"];
+exports.MobileFooterWithSchema = Footer.MobileFooterWithSchema;
+exports.DSMobileFooterText = Text.DSMobileFooterText;
+exports.DSMobileFooterTextWithSchema = Text.DSMobileFooterTextWithSchema;
+exports.DSMobileFooterAction = Action.DSMobileFooterAction;
+exports.DSMobileFooterActionWithSchema = Action.DSMobileFooterActionWithSchema;

package/cjs/MobileListItem/MobileListItem.js

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var styled = require('styled-components');
+var dsGrid = require('@elliemae/ds-grid');
+var dsSystem = require('@elliemae/ds-system');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledContainer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-n7r3qn-0"
+})(["background:", ";border-bottom:", ";"], props => props.theme.colors.neutral['000'], props => dsSystem.border(props.theme.colors.neutral['300']));
+const StyledTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-n7r3qn-1"
+})(["font-weight:", ";font-size:13px;color:", ";", ""], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['800'], dsSystem.truncate());
+
+const MobileListItem = _ref => {
+  let {
+    leftAddon = null,
+    rightAddon = null,
+    title = '',
+    value = '',
+    dataTestid = 'mobile-list-item',
+    theme
+  } = _ref;
+  const cols = [1];
+  if (leftAddon) cols.unshift(dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.m));
+  if (rightAddon) cols.push(dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.m));
+  return /*#__PURE__*/_jsx__default["default"](StyledContainer, {
+    cols: cols,
+    height: theme.space.m,
+    width: "100%",
+    pl: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
+    pr: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
+    gutter: "xs",
+    "data-testid": "".concat(dataTestid, "--").concat(value)
+  }, void 0, leftAddon && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    alignItems: "center",
+    justifyContent: "center"
+  }, void 0, leftAddon), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    alignItems: "center"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](StyledTitle, {}, void 0, title)), rightAddon && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    alignItems: "center",
+    justifyContent: "center"
+  }, void 0, rightAddon));
+};
+
+const DSMobileListItem = dsSystem.withTheme(MobileListItem);
+const listItemProps = {
+  leftAddon: reactDesc.PropTypes.element.description('Element placed at the left'),
+  rightAddon: reactDesc.PropTypes.element.description('Element placed at the right'),
+  title: reactDesc.PropTypes.string.description('Item s title').isRequired,
+  value: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Item s value, used for data-testid attr'),
+  dataTestid: reactDesc.PropTypes.string.description('ID used for testing').defaultValue('mobile-list-item'),
+  theme: reactDesc.PropTypes.object.description('')
+};
+const ListItemWithSchema = reactDesc.describe(MobileListItem);
+ListItemWithSchema.propTypes = listItemProps;
+
+exports.DSMobileListItem = DSMobileListItem;
+exports.ListItemWithSchema = ListItemWithSchema;

package/cjs/MobileListItem/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MobileListItem = require('./MobileListItem.js');
+
+
+
+exports.DSMobileListItem = MobileListItem.DSMobileListItem;
+exports.ListItemWithSchema = MobileListItem.ListItemWithSchema;