@elliemae/ds-mobile 2.3.0-alpha.9 → 2.3.0-next.3

package/cjs/SideNav/SideNav.js

@@ -0,0 +1,127 @@
+'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 Backdrop = require('@elliemae/ds-backdrop');
+var dsIcons = require('@elliemae/ds-icons');
+var dsIcon = require('@elliemae/ds-icon');
+var reactDesc = require('react-desc');
+var lodash = require('lodash');
+var EM_logo = require('../Icons/EM_logo.js');
+var styles = require('./styles.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 _span, _Hr, _hr;
+
+const DSSideNav = _ref => {
+  let {
+    containerProps = {},
+    title,
+    onClose = lodash.noop,
+    menuItems = [],
+    bottomMenuItems = []
+  } = _ref;
+  const [selectedMenuItemIdx, setSelectedMenuItem] = React.useState(-1);
+
+  const menuItemClick = (idx, text, cb) => {
+    if (cb) {
+      cb(idx, text);
+    }
+
+    setSelectedMenuItem(idx);
+  };
+
+  const renderMenuList = () => /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: menuItems.length > 0 ? /*#__PURE__*/_jsx__default["default"](styles.MenuList, {}, void 0, menuItems.map((_ref2, idx) => {
+      let {
+        icon,
+        text,
+        onClick
+      } = _ref2;
+      return /*#__PURE__*/_jsx__default["default"]("div", {
+        className: "menuitem",
+        onClick: menuItemClick.bind(null, idx, text, onClick)
+      }, idx, /*#__PURE__*/_jsx__default["default"]("div", {
+        className: "icon"
+      }, void 0, icon), /*#__PURE__*/_jsx__default["default"]("div", {
+        className: "text ".concat(idx === selectedMenuItemIdx ? 'active' : '')
+      }, void 0, text));
+    })) : null
+  });
+
+  const renderBottomMenu = () => /*#__PURE__*/_jsx__default["default"](styles.MenuList, {}, void 0, bottomMenuItems.map((_ref3, idx) => {
+    let {
+      icon,
+      text,
+      onClick
+    } = _ref3;
+    return /*#__PURE__*/_jsx__default["default"]("div", {
+      className: "menuitem",
+      onClick: () => onClick(idx, text)
+    }, idx, /*#__PURE__*/_jsx__default["default"]("div", {
+      className: "icon"
+    }, void 0, icon), /*#__PURE__*/_jsx__default["default"]("div", {
+      className: "text"
+    }, void 0, text));
+  }));
+
+  return /*#__PURE__*/_jsx__default["default"](styles.Container, {
+    "data-testid": containerProps['data-testid'] || 'global-header-menu'
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Backdrop.DSBackdrop, {
+    onClick: onClose,
+    type: "cover"
+  }), /*#__PURE__*/_jsx__default["default"](styles.Menu, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.MenuWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.Heading, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.Icon, {}, void 0, EM_logo()), /*#__PURE__*/_jsx__default["default"]("div", {
+    className: "content"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("label", {}, void 0, title), _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {})), /*#__PURE__*/_jsx__default["default"]("div", {
+    className: "icon"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.Close, {
+    onClick: onClose,
+    size: dsIcon.DSIconSizes.S,
+    color: dsIcon.DSIconColors.WHITE
+  })))), _Hr || (_Hr = /*#__PURE__*/_jsx__default["default"](styles.Hr, {})), renderMenuList(), bottomMenuItems.length > 0 ? /*#__PURE__*/_jsx__default["default"](styles.BottomMenu, {}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
+    className: "content"
+  }, void 0, _hr || (_hr = /*#__PURE__*/_jsx__default["default"]("hr", {})), renderBottomMenu())) : null)));
+};
+
+const menuProps = reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.shape({
+  icon: reactDesc.PropTypes.element,
+  text: reactDesc.PropTypes.string
+}));
+const navProps = {
+  /** inject props to wrapper element of side nav */
+  containerProps: reactDesc.PropTypes.object.description('inject props to wrapper element of side nav'),
+
+  /**
+   * Heading Title
+   */
+  title: reactDesc.PropTypes.string.isRequired.description('Heading Title'),
+
+  /**
+   * Callback function when close is menu is triggered
+   */
+  onClose: reactDesc.PropTypes.func.description('Callback function when close is menu is triggered'),
+
+  /**
+   * Top Menu items array
+   */
+  menuItems: menuProps.description('Top Menu items array'),
+
+  /**
+   * Bottom Menu items array
+   */
+  bottomMenuItems: menuProps.description('Bottom Menu items array')
+};
+const DSSideNavWithSchema = reactDesc.describe(DSSideNav).description('Side navigation for mobile and tablet');
+DSSideNavWithSchema.propTypes = navProps;
+
+exports.DSSideNav = DSSideNav;
+exports.DSSideNavWithSchema = DSSideNavWithSchema;

package/cjs/SideNav/index.js

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

package/cjs/SideNav/styles.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Container = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-10h55hr-0"
+})(["position:fixed;width:100%;height:100%;"]);
+const MenuWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-10h55hr-1"
+})(["position:relative;height:100%;"]);
+const Menu = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-10h55hr-2"
+})(["position:fixed;width:80%;height:100%;background-color:", ";font-family:", ";box-shadow:5px 0 5px ", ";padding:", ";"], props => props.theme.colors.brand[700], props => props.theme.fonts.default, props => props.theme.colors.neutral[600], props => props.theme.space.xs);
+const Heading = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-10h55hr-3"
+})(["display:flex;flex-direction:row;.content{width:100%;display:flex;flex-direction:row;span{flex-grow:1;}label{padding-top:1px;line-height:30px;font-weight:", ";font-size:22px;color:", ";}.icon{cursor:pointer;padding-top:6px;}}"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['000']);
+const Icon = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-10h55hr-4"
+})(["margin-right:", ";"], props => props.theme.space.xxs2);
+const Hr = /*#__PURE__*/styled__default["default"].hr.withConfig({
+  componentId: "sc-10h55hr-5"
+})(["margin-left:-", ";margin-right:-", ";"], props => props.theme.space.xs, props => props.theme.space.xs);
+const MenuList = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-10h55hr-6"
+})([".menuitem{display:flex;flex-direction:row;cursor:pointer;height:22px;margin-bottom:", ";.icon{padding-left:6px;margin-right:", ";span{height:20px;width:20px;svg{height:20px;width:20px;}}}.text{font-weight:", ";font-size:18px;line-height:22px;color:", ";&.active{font-weight:", ";}}&:last-child{margin-bottom:0;}}"], props => props.theme.space.xs, props => props.theme.space.xs, props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['000'], props => props.theme.fontWeights.semibold);
+const BottomMenu = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-10h55hr-7"
+})(["position:absolute;bottom:0;width:100%;"]);
+
+exports.BottomMenu = BottomMenu;
+exports.Container = Container;
+exports.Heading = Heading;
+exports.Hr = Hr;
+exports.Icon = Icon;
+exports.Menu = Menu;
+exports.MenuList = MenuList;
+exports.MenuWrapper = MenuWrapper;

package/cjs/SwipeToRefresh/ProgressIndicator.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var dsSystem = require('@elliemae/ds-system');
+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 rad = 54;
+const cir = 2 * Math.PI * rad;
+const ProgressIndicator = _ref => {
+  let {
+    progress = 0
+  } = _ref;
+  const factor = progress / 100;
+  const theme = dsSystem.useTheme();
+  const dashoffset = cir * (1 - factor);
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    height: theme.space.s,
+    width: theme.space.s,
+    justifyContent: "center",
+    alignItems: "center"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("svg", {
+    width: "23",
+    height: "23",
+    viewBox: "0 0 120 120",
+    transform: "rotate(-90)"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("circle", {
+    cx: "60",
+    cy: "60",
+    r: "54",
+    fill: "none",
+    strokeWidth: "12",
+    stroke: "".concat(theme.colors.neutral[100])
+  }), /*#__PURE__*/_jsx__default["default"]("circle", {
+    cx: "60",
+    cy: "60",
+    r: "54",
+    strokeWidth: "12",
+    fill: "none",
+    strokeDasharray: "".concat(cir, "px"),
+    strokeDashoffset: "".concat(dashoffset, "px"),
+    stroke: "".concat(theme.colors.brand[600]),
+    strokeLinecap: "round"
+  })));
+};
+
+exports.ProgressIndicator = ProgressIndicator;

package/cjs/SwipeToRefresh/ProgressLoader.js

@@ -0,0 +1,127 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _defs, _g;
+const ProgressLoader = () => {
+  const width = 32;
+  const height = 32;
+  return /*#__PURE__*/_jsx__default["default"]("svg", {
+    viewBox: "0 0 40 40",
+    width: width,
+    height: height,
+    rotate: "20deg"
+  }, void 0, _defs || (_defs = /*#__PURE__*/_jsx__default["default"]("defs", {}, void 0, /*#__PURE__*/_jsx__default["default"]("clipPath", {
+    id: "prefix__clip-path"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("circle", {
+    className: "prefix__cls-1",
+    cx: -220,
+    cy: 21,
+    r: 12
+  })), /*#__PURE__*/_jsx__default["default"]("clipPath", {
+    id: "prefix__clip-path-2"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("circle", {
+    className: "prefix__cls-1",
+    cx: -220,
+    cy: 9,
+    r: 2
+  })), /*#__PURE__*/_jsx__default["default"]("clipPath", {
+    id: "prefix__clip-path-3"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("circle", {
+    className: "prefix__cls-1",
+    cx: -159.98,
+    cy: 21,
+    r: 12
+  })), /*#__PURE__*/_jsx__default["default"]("clipPath", {
+    id: "prefix__clip-path-4"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
+    className: "prefix__cls-1",
+    d: "M-146 21a14 14 0 00-14-14h-.13a2 2 0 00-2 2 2 2 0 002 2h.09a10 10 0 0110 10 2 2 0 002 2 2 2 0 002.04-2z"
+  })), /*#__PURE__*/_jsx__default["default"]("clipPath", {
+    id: "prefix__clip-path-5"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
+    className: "prefix__cls-2",
+    d: "M-151.3 27.15l-1.33-6.81a1 1 0 01.79-1.18 1.05 1.05 0 01.5 0l7 2.24a1 1 0 01.65 1.26 1 1 0 01-.33.47l-5.66 4.58a1 1 0 01-1.4-.15 1.19 1.19 0 01-.22-.41z"
+  })), /*#__PURE__*/_jsx__default["default"]("clipPath", {
+    id: "prefix__clip-path-6"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("circle", {
+    className: "prefix__cls-1",
+    cx: -99.68,
+    cy: 21.22,
+    r: 12
+  })), /*#__PURE__*/_jsx__default["default"]("clipPath", {
+    id: "prefix__clip-path-7"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
+    className: "prefix__cls-1",
+    d: "M-99.68 35.22a14 14 0 0014-14 14 14 0 00-14-14h-.26a2 2 0 00-2 2 2 2 0 002 2h.18a10 10 0 0110 10 10 10 0 01-10 10 2 2 0 00-2 2 2 2 0 002.08 2z"
+  })), /*#__PURE__*/_jsx__default["default"]("clipPath", {
+    id: "prefix__clip-path-8"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
+    className: "prefix__cls-2",
+    d: "M-106.26 30l6.73-1.44a1 1 0 011.19.77 1 1 0 010 .48l-1.84 6.65a1 1 0 01-1.24.7 1.1 1.1 0 01-.46-.28l-4.88-5.22a1 1 0 010-1.42 1.05 1.05 0 01.5-.24z"
+  })), /*#__PURE__*/_jsx__default["default"]("clipPath", {
+    id: "prefix__clip-path-9"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("circle", {
+    className: "prefix__cls-1",
+    cx: -39.52,
+    cy: 21.9,
+    r: 12
+  })), /*#__PURE__*/_jsx__default["default"]("clipPath", {
+    id: "prefix__clip-path-10"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
+    className: "prefix__cls-1",
+    d: "M-53.52 21.9a14 14 0 0014 14 14 14 0 0014-14 14 14 0 00-14-14h-.39a2 2 0 00-1.94 2 2 2 0 002.05 2h.28a10 10 0 0110 10 10 10 0 01-10 10 10 10 0 01-10-10 2 2 0 00-2-2 2 2 0 00-2 2z"
+  })), /*#__PURE__*/_jsx__default["default"]("clipPath", {
+    id: "prefix__clip-path-11"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
+    className: "prefix__cls-2",
+    d: "M-47.67 14.9l1 6.87a1 1 0 01-.85 1.13 1.07 1.07 0 01-.47 0l-6.77-2.35a1 1 0 01-.61-1.27 1 1 0 01.33-.47l5.8-4.51a1 1 0 011.4.18.94.94 0 01.17.42z"
+  })), /*#__PURE__*/_jsx__default["default"]("clipPath", {
+    id: "prefix__clip-path-12"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
+    className: "prefix__cls-1",
+    d: "M34.48 21.9a14.2 14.2 0 100 .37 2 2 0 00-4-.11 9.76 9.76 0 110-.26 2 2 0 004 0z"
+  })), /*#__PURE__*/_jsx__default["default"]("clipPath", {
+    id: "prefix__clip-path-13"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
+    className: "prefix__cls-1",
+    d: "M-155.52-51.1h282v114h-282z"
+  })), /*#__PURE__*/_jsx__default["default"]("clipPath", {
+    id: "prefix__clip-path-14"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
+    className: "prefix__cls-1",
+    d: "M4.48 5.9h32v32h-32z"
+  })), /*#__PURE__*/_jsx__default["default"]("clipPath", {
+    id: "prefix__clip-path-15"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
+    className: "prefix__cls-2",
+    d: "M26.13 11.91l-6.53 1.87a1 1 0 01-1.24-.68.94.94 0 010-.5l1.48-6.43A1 1 0 0121 5.42a1.07 1.07 0 01.45.23l5 4.55a1 1 0 01.08 1.41 1.12 1.12 0 01-.4.3z"
+  })), /*#__PURE__*/_jsx__default["default"]("style", {}, void 0, '.prefix__cls-1,.prefix__cls-2{fill:none}.prefix__cls-2{clip-rule:evenodd}.prefix__cls-15{clip-path:url(#prefix__clip-path-13)}'))), _g || (_g = /*#__PURE__*/_jsx__default["default"]("g", {
+    id: "prefix__Layer_5",
+    "data-name": "Layer 5"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("g", {
+    clipPath: "url(#prefix__clip-path-12)"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("g", {
+    clipPath: "url(#prefix__clip-path-14)"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("image", {
+    width: 32,
+    height: 32,
+    transform: "rotate(-90 21.19 16.71)",
+    xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsSAAALEgHS3X78AAACA0lEQVRYR+3XTY7UMBDF8X+VnfR0SwiE2IzEBWDLHbgAHIyDwFVYcwDEEiSE5iOx32PhboYVs5ig2bQlL6KUlJ+fK44Sbz58No848r6C/z3OgDPgDDgDzoAz4NEB9b6CzUYtlIuJw1x5OhV2Nbmo+XDAp/cv7yv553gw4N3Hr7x9fcmr58mLHeynZA4zFygBGWOfIyAYkzheewMAwJcf18CeywM8u4BDMYcaTCWoGdQwCZQcqDih8DaA79cr3+YCzNxKPJngMAUXKeaEuQSlBFWQERRMJoRjG8BVFz+Xzq42oNIESxf7GuxqMHUzpZkTagaZQdFIYxNAdHG1dn4tyZQJJDKsNnuZuSRzgUUDUsPj4blRAu7iponrJqalkVEZCCMHTaIJppK0Y+PVNKmNegCbW5mbLuaeTE0UABIDvUA3dImWUEsyMVa/CcCGbnPbxFLETQsywDFePBlcQIbJIAtl0LfqAQMp0ZUsXdSM4xkQJMEpCRvEgHSbnhsBsMHQbJrGXGVqEyXKOHGIUxlK6AzINgDANt2wyjSJVUGGyd4pJMvx6AH+pOGtEggb5BGrzNo9ujxM6RBhHKdf0ACME8xGryGAYkDaMYkmUQJaJKUPzF0GRwQbJQCQ8t022FQH1dA87qX+BsD4EmwF8FhNGsBYRjIK00P0SNYuCskaoxnRaMzfAeIT7ZHlq9QAAAAASUVORK5CYII="
+  }))), /*#__PURE__*/_jsx__default["default"]("g", {
+    clipPath: "url(#prefix__clip-path-15)"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
+    transform: "rotate(-77 22.961 10.28)",
+    fill: "#3590ce",
+    d: "M13.66 1.31h18.6v17.94h-18.6z"
+  })))));
+};
+
+exports.ProgressLoader = ProgressLoader;

package/cjs/SwipeToRefresh/SwipeToRefresh.js

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var dsCircularProgressIndicator = require('@elliemae/ds-circular-progress-indicator');
+var dsSystem = require('@elliemae/ds-system');
+var useSwipe = require('./useSwipe.js');
+var styled = require('./styled.js');
+var ProgressIndicator = require('./ProgressIndicator.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 _DSCircularProgressIn;
+
+const SwipeToRefresh = _ref => {
+  let {
+    children,
+    loading,
+    onRefresh
+  } = _ref;
+  const breakpoint = 60;
+  const theme = dsSystem.useTheme();
+  const swipe = useSwipe.useSwipe({
+    onRefresh,
+    breakpoint
+  });
+  const progress = swipe.height > breakpoint ? 100 : swipe.height * 100 / breakpoint;
+  return /*#__PURE__*/_jsx__default["default"](styled.SwipeContainer, {}, void 0, /*#__PURE__*/jsxRuntime.jsxs(styled.SwipeDrag, {
+    onTouchStart: swipe.touchStart,
+    onTouchEnd: swipe.touchEnd,
+    onTouchCancel: swipe.touchCancel,
+    onTouchMove: swipe.touchMove,
+    ref: swipe.ref,
+    children: [/*#__PURE__*/_jsx__default["default"](styled.LoaderBox, {
+      height: loading ? theme.space.m : "".concat(swipe.height, "px"),
+      alignItems: "flex-start",
+      "data-testid": "loader-box"
+    }, void 0, /*#__PURE__*/_jsx__default["default"](styled.PositionLoader, {
+      height: theme.space.m,
+      justifyContent: "center",
+      alignItems: "center",
+      mt: swipe.height > 40 || loading ? 0 : "".concat(swipe.height - 40, "px")
+    }, void 0, loading ? _DSCircularProgressIn || (_DSCircularProgressIn = /*#__PURE__*/_jsx__default["default"](dsCircularProgressIndicator.DSCircularProgressIndicator, {})) : /*#__PURE__*/_jsx__default["default"](ProgressIndicator.ProgressIndicator, {
+      progress: progress
+    }))), /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: swipe.target,
+      style: {
+        height: 1
+      }
+    }), children]
+  }));
+};
+
+const props = {
+  /** component inside swipe to refresh container */
+  children: reactDesc.PropTypes.element.isRequired.description('component inside swipe to refresh container'),
+
+  /** toggle loading state for swipe */
+  loading: reactDesc.PropTypes.bool.description('toggle loading state for swipe'),
+
+  /** callback on refresh swipe */
+  onRefresh: reactDesc.PropTypes.func.description('callback on refresh swipe')
+};
+const SwipeToRefreshWithSchema = reactDesc.describe(SwipeToRefresh);
+SwipeToRefreshWithSchema.propTypes = props;
+
+exports.SwipeToRefresh = SwipeToRefresh;
+exports.SwipeToRefreshWithSchema = SwipeToRefreshWithSchema;

package/cjs/SwipeToRefresh/styled.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsGrid = require('@elliemae/ds-grid');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const SwipeContainer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-pbpd8a-0"
+})(["transition:height 0.2s;overscroll-behavior:none;height:100%;"]);
+const SwipeDrag = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-pbpd8a-1"
+})(["border:none;overscroll-behavior:none;overflow:auto;max-height:100%;"]);
+const LoaderBox = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-pbpd8a-2"
+})(["transition:height 0.2s;overflow:hidden;"]);
+const PositionLoader = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-pbpd8a-3"
+})(["transition:margin 0.2s;"]);
+
+exports.LoaderBox = LoaderBox;
+exports.PositionLoader = PositionLoader;
+exports.SwipeContainer = SwipeContainer;
+exports.SwipeDrag = SwipeDrag;

package/cjs/SwipeToRefresh/useSwipe.js

@@ -0,0 +1,82 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+
+const useSwipe = _ref => {
+  let {
+    onRefresh,
+    breakpoint
+  } = _ref;
+  const [startingPoint, setStartingPoint] = React.useState(0);
+  const [movingPoint, setMovingPoint] = React.useState(0);
+  const ref = React.useRef();
+  const height = movingPoint && startingPoint ? movingPoint - startingPoint : 0;
+  const [allowRefresh, setAllowRefresh] = React.useState(false);
+
+  const callback = entries => {
+    const {
+      isIntersecting
+    } = entries[0];
+
+    if (isIntersecting) {
+      setAllowRefresh(true);
+    } else {
+      setAllowRefresh(false);
+    }
+  };
+
+  const target = React.useRef(null);
+  const observer = React.useRef(null);
+
+  if (observer.current) {
+    observer.current.disconnect();
+  }
+
+  observer.current = new IntersectionObserver(callback, {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.25
+  });
+
+  if (target.current) {
+    observer.current.observe(target.current);
+  }
+
+  const touchStart = e => {
+    const {
+      scrollTop
+    } = ref.current;
+    if (scrollTop < 5) setStartingPoint(e.touches[0].clientY);
+  };
+
+  const touchEnd = () => {
+    if (height > breakpoint && allowRefresh && onRefresh) onRefresh();
+    setStartingPoint(0);
+    setMovingPoint(0);
+  };
+
+  const touchCancel = () => {
+    if (height > breakpoint && onRefresh) onRefresh();
+    setStartingPoint(0);
+    setMovingPoint(0);
+  };
+
+  const touchMove = e => {
+    setMovingPoint(e.touches[0].clientY);
+  };
+
+  return {
+    height,
+    touchStart,
+    touchEnd,
+    touchCancel,
+    touchMove,
+    ref,
+    target
+  };
+};
+
+exports.useSwipe = useSwipe;

package/cjs/Tabs/index.js

@@ -0,0 +1,57 @@
+'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 _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var reactDesc = require('react-desc');
+var dsTabs = require('@elliemae/ds-tabs');
+var propTypes = require('./propTypes.js');
+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 _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["children"],
+      _excluded2 = ["children"];
+
+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 DSMobileTabs = _ref => {
+  let {
+    children
+  } = _ref,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/jsxRuntime.jsx(dsTabs.DSTabs, _objectSpread(_objectSpread({}, props), {}, {
+    isDSMobile: true,
+    children: children
+  }));
+};
+const DSMobileTab = _ref2 => {
+  let {
+    children
+  } = _ref2,
+      props = _objectWithoutProperties__default["default"](_ref2, _excluded2);
+
+  return /*#__PURE__*/jsxRuntime.jsx(dsTabs.DSTab, _objectSpread(_objectSpread({}, props), {}, {
+    children: children
+  }));
+};
+const DSMobileTabsWithSchema = reactDesc.describe(DSMobileTabs);
+DSMobileTabsWithSchema.propTypes = propTypes.MobileTabsPropTypes;
+const DSMobileTabWithSchema = reactDesc.describe(DSMobileTab);
+DSMobileTabWithSchema.propTypes = propTypes.MobileTabPropTypes;
+
+exports.DSMobileTab = DSMobileTab;
+exports.DSMobileTabWithSchema = DSMobileTabWithSchema;
+exports.DSMobileTabs = DSMobileTabs;
+exports.DSMobileTabsWithSchema = DSMobileTabsWithSchema;

package/cjs/Tabs/propTypes.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const MobileTabPropTypes = {
+  tabId: reactDesc.PropTypes.string.description('Unique Tab id.').defaultValue(''),
+  title: reactDesc.PropTypes.string.description('Tab title.').defaultValue(''),
+  required: reactDesc.PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),
+  disabled: reactDesc.PropTypes.bool.description('Disables Tab.').defaultValue(false)
+};
+const MobileTabsPropTypes = {
+  onTabChange: reactDesc.PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),
+  tabBarExtraContent: reactDesc.PropTypes.element.description('Extra content next to the Tabs Bar.').defaultValue(undefined),
+  onlyRenderActiveTab: reactDesc.PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),
+  fixedTabsHeaders: reactDesc.PropTypes.bool.description('Enables fixed Tabs mode. Makes Tab Bar non scrollable and adds equal fixed widths.').defaultValue(false),
+  activeTab: reactDesc.PropTypes.string.description('Passing a value makes DSTabs a controlled component.').defaultValue('First DSTab children.'),
+  children: reactDesc.PropTypes.node.description('Use DSTab component as children.').isRequired,
+  tabsListAriaLabel: reactDesc.PropTypes.string.description('Aria label for the Tab list.').defaultValue('Tab list.'),
+  containerProps: reactDesc.PropTypes.object.description('Additional properties for the container.').defaultValue({}),
+  innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.shape({
+    current: reactDesc.PropTypes.any
+  })]).description('Ref to the container.').defaultValue(undefined)
+};
+
+exports.MobileTabPropTypes = MobileTabPropTypes;
+exports.MobileTabsPropTypes = MobileTabsPropTypes;