@elliemae/ds-mobile 2.0.0-rc.11 → 2.0.0-rc.15

package/cjs/MobileCard/Card.js

@@ -16,6 +16,7 @@ var StyledCard = require('./StyledCard.js');
 var ExpandChevron = require('./ExpandChevron.js');
 var useHeight = require('./useHeight.js');
 var ExpandableRegion = require('./ExpandableRegion.js');
+var props = require('./props.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -29,7 +30,7 @@ const TitleEllipsis = /*#__PURE__*/styled__default["default"].div.withConfig({
 })(["", ""], dsSystem.truncate());
 const Title = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-10tpzm8-1"
-})(["", " ", " font-weight:", ";font-size:", ";width:100%;", ""], styledSystem.padding, dsSystem.truncate(), props => props.theme.fontWeights.semibold, props => dsSystem.toMobile(props.theme.fontSizes.title[600]), dsSystem.color('neutral', '800'));
+})(["", " ", " font-weight:", ";font-size:", ";width:100%;", ""], styledSystem.padding, dsSystem.truncate(), props => props.theme.fontWeights.semibold, props => dsSystem.toMobile(props.theme.fontSizes.title[600]), dsSystem.color('neutral', 800));
 const Detail = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-10tpzm8-2"
 })(["", " ", " font-size:", ";font-weight:", ";"], styledSystem.padding, dsSystem.truncate(), props => dsSystem.toMobile(props.theme.fontSizes.title[500]), props => props.theme.fontWeights.regular);
@@ -38,7 +39,7 @@ const SubText = /*#__PURE__*/styled__default["default"].span.withConfig({
 })(["margin-top:", ";", " &:nth-child(2){padding-left:", ";}"], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), dsSystem.truncate(), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s));
 const SubTextWrap = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-10tpzm8-4"
-})(["", " border-top:", ";margin-top:6px;margin-bottom:2px;padding-bottom:", ";font-size:", ";", " font-weight:", ";display:flex;justify-content:space-between;"], dsSystem.truncate(), props => dsSystem.border(props.theme.colors.neutral['300']), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => dsSystem.toMobile(props.theme.fontSizes.subTitle[400]), dsSystem.color('neutral', '500'), props => props.theme.fontWeights.regular);
+})(["", " border-top:", ";margin-top:6px;margin-bottom:2px;padding-bottom:", ";font-size:", ";", " font-weight:", ";display:flex;justify-content:space-between;"], dsSystem.truncate(), props => dsSystem.border(props.theme.colors.neutral['300']), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => dsSystem.toMobile(props.theme.fontSizes.subTitle[400]), dsSystem.color('neutral', 500), props => props.theme.fontWeights.regular);
 const LeftIcon = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-10tpzm8-5"
 })(["& > span{height:", ";width:", ";}& > span > svg,svg:not([fill]){height:", ";width:", ";}"], props => props.halfM, props => props.halfM, props => props.halfM, props => props.halfM);
@@ -47,7 +48,7 @@ const CenterWrap = /*#__PURE__*/styled__default["default"].div.withConfig({
 })(["display:flex;align-items:center;", ""], dsSystem.truncate());
 
 const MobileCard = _ref => {
-  var _TitleEllipsis, _SubText;
+  var _TitleEllipsis, _SubText, _Grid;
 
   let {
     children,
@@ -61,7 +62,8 @@ const MobileCard = _ref => {
     theme,
     expandable = false,
     expandedContent,
-    value
+    value,
+    cardContent
   } = _ref;
   const subTextRef = React.useRef(null);
   const subTextHeight = useHeight.useHeight(subTextRef);
@@ -108,7 +110,7 @@ const MobileCard = _ref => {
       }, void 0, _TitleEllipsis || (_TitleEllipsis = /*#__PURE__*/_jsx__default["default"](TitleEllipsis, {}, void 0, children)), details && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
         "data-testid": "card-details",
         cols: details.map(() => 'min-content'),
-        mb: !(subText || subIcons) && halfM,
+        mb: !(subText || subIcons) && halfM || 0,
         pt: dsSystem.op('/', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs), 2)
       }, void 0, details.map((d, i) => /*#__PURE__*/_jsx__default["default"](Detail, {}, i, d, i < details.length - 1 && /*#__PURE__*/_jsx__default["default"](Detail, {
         px: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs)
@@ -127,66 +129,13 @@ const MobileCard = _ref => {
       }), /*#__PURE__*/_jsx__default["default"](ExpandableRegion.ExpandableRegion, {
         show: selected,
         content: expandedContent
-      })));
+      }), cardContent && (_Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, cardContent)))));
     }
   });
 };
 
-const props = {
-  /**
-   * card height
-   */
-  height: reactDesc.PropTypes.oneOf(['s', 'm']).description('card height'),
-
-  /**
-   * Defines mobile card title
-   */
-  children: reactDesc.PropTypes.string.isRequired.description('Defines mobile card title'),
-
-  /**
-   * Wheter if the card is expandable or not
-   */
-  expandable: reactDesc.PropTypes.bool.description('Wheter if the card is expandable or not'),
-
-  /**
-   * content to display in expand card section
-   */
-  expandedContent: reactDesc.PropTypes.element.description('content to display in expand card section'),
-
-  /**
-   * Icon to the left of the card. Size is adjusted automatically.
-   */
-  leftAddOn: reactDesc.PropTypes.element.description('Icon to the left of the card. Size is adjusted automatically.'),
-
-  /**
-   * Pass an element to render left. For example a Button with an icon
-   */
-  leftProp: reactDesc.PropTypes.element.description('Pass an element to render left. For example a Button with an icon'),
-
-  /**
-   * Pass an array of 1 or 2 elements to render right. For example a Button with an icon
-   */
-  rightProp: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.element).description('Pass an array of 1 or 2 elements to render right. For example a Button with an icon'),
-
-  /**
-   * Pass an array of 1 or 2 strings
-   */
-  subText: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('Pass an array of 1 or 2 strings'),
-
-  /**
-   * SubIcons component
-   */
-  subIcons: reactDesc.PropTypes.element.description('SubIcons component'),
-
-  /**
-   * Pass an array of 1, 2 or 3 strings
-   */
-  details: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('Pass an array of 1, 2 or 3 strings'),
-  theme: reactDesc.PropTypes.object.isRequired.description(''),
-  value: reactDesc.PropTypes.number.description('')
-};
 const DSMobileCardWithSchema = reactDesc.describe(MobileCard);
-DSMobileCardWithSchema.propTypes = props;
+DSMobileCardWithSchema.propTypes = props.cardPropsTypes;
 var MobileCard$1 = dsSystem.withTheme(MobileCard);
 
 exports.DSMobileCardWithSchema = DSMobileCardWithSchema;

package/cjs/MobileCard/props.js

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const cardPropsTypes = {
+  /**
+   * card height
+   */
+  height: reactDesc.PropTypes.oneOf(['s', 'm']).description('card height'),
+
+  /**
+   * Defines mobile card title
+   */
+  children: reactDesc.PropTypes.string.description('Defines mobile card title').isRequired,
+
+  /**
+   * Wheter if the card is expandable or not
+   */
+  expandable: reactDesc.PropTypes.bool.description('Wheter if the card is expandable or not'),
+
+  /**
+   * content to display in expand card section
+   */
+  expandedContent: reactDesc.PropTypes.element.description('content to display in expand card section'),
+
+  /**
+   * Icon to the left of the card. Size is adjusted automatically.
+   */
+  leftAddOn: reactDesc.PropTypes.element.description('Icon to the left of the card. Size is adjusted automatically.'),
+
+  /**
+   * Pass an element to render left. For example a Button with an icon
+   */
+  leftProp: reactDesc.PropTypes.element.description('Pass an element to render left. For example a Button with an icon'),
+
+  /**
+   * Pass an array of 1 or 2 elements to render right. For example a Button with an icon
+   */
+  rightProp: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.element).description('Pass an array of 1 or 2 elements to render right. For example a Button with an icon'),
+
+  /**
+   * Pass an array of 1 or 2 strings
+   */
+  subText: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('Pass an array of 1 or 2 strings'),
+
+  /**
+   * SubIcons component
+   */
+  subIcons: reactDesc.PropTypes.element.description('SubIcons component'),
+
+  /**
+   * Pass an array of 1, 2 or 3 strings
+   */
+  details: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('Pass an array of 1, 2 or 3 strings'),
+  theme: reactDesc.PropTypes.object.description('').isRequired,
+  value: reactDesc.PropTypes.number.description(''),
+  cardContent: reactDesc.PropTypes.node.description('JSX content for the card')
+};
+
+exports.cardPropsTypes = cardPropsTypes;

package/cjs/Tabs/index.js

@@ -9,8 +9,9 @@ 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');
-require('react');
+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 }; }
@@ -42,10 +43,15 @@ const DSMobileTab = _ref2 => {
       props = _objectWithoutProperties__default["default"](_ref2, _excluded2);
 
   return /*#__PURE__*/jsxRuntime.jsx(dsTabs.DSTab, _objectSpread(_objectSpread({}, props), {}, {
-    isDSMobile: true,
     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;

package/cjs/index.js

@@ -114,7 +114,9 @@ exports.DSMobileDropdownMenu = MobileDropdownMenu.DSMobileDropdownMenu;
 exports.DSMobileDropdownMenuWithSchema = MobileDropdownMenu.DSMobileDropdownMenuWithSchema;
 exports.DSMobileDropdownTriggerInput = MobileDropdownInput.DSMobileDropdownTriggerInput;
 exports.DSMobileTab = index$1.DSMobileTab;
+exports.DSMobileTabWithSchema = index$1.DSMobileTabWithSchema;
 exports.DSMobileTabs = index$1.DSMobileTabs;
+exports.DSMobileTabsWithSchema = index$1.DSMobileTabsWithSchema;
 exports.DSMobileCard = index.DSMobileCard;
 exports.DSCollectionBox = CollectionBox.DSCollectionBox;
 exports.DSCollectionBoxWithSchema = CollectionBox.DSCollectionBoxWithSchema;

package/esm/MobileCard/Card.js

@@ -2,7 +2,7 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import { useRef } from 'react';
-import { PropTypes, describe } from 'react-desc';
+import { describe } from 'react-desc';
 import styled from 'styled-components';
 import { padding } from 'styled-system';
 import { truncate, toMobile, color, __UNSAFE_SPACE_TO_DIMSUM, border, withTheme, op } from '@elliemae/ds-system';
@@ -12,6 +12,7 @@ import { StyledCard } from './StyledCard.js';
 import { ExpandChevron } from './ExpandChevron.js';
 import { useHeight } from './useHeight.js';
 import { ExpandableRegion } from './ExpandableRegion.js';
+import { cardPropsTypes } from './props.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const TitleEllipsis = /*#__PURE__*/styled.div.withConfig({
@@ -19,7 +20,7 @@ const TitleEllipsis = /*#__PURE__*/styled.div.withConfig({
 })(["", ""], truncate());
 const Title = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-10tpzm8-1"
-})(["", " ", " font-weight:", ";font-size:", ";width:100%;", ""], padding, truncate(), props => props.theme.fontWeights.semibold, props => toMobile(props.theme.fontSizes.title[600]), color('neutral', '800'));
+})(["", " ", " font-weight:", ";font-size:", ";width:100%;", ""], padding, truncate(), props => props.theme.fontWeights.semibold, props => toMobile(props.theme.fontSizes.title[600]), color('neutral', 800));
 const Detail = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-10tpzm8-2"
 })(["", " ", " font-size:", ";font-weight:", ";"], padding, truncate(), props => toMobile(props.theme.fontSizes.title[500]), props => props.theme.fontWeights.regular);
@@ -28,7 +29,7 @@ const SubText = /*#__PURE__*/styled.span.withConfig({
 })(["margin-top:", ";", " &:nth-child(2){padding-left:", ";}"], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), truncate(), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s));
 const SubTextWrap = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-10tpzm8-4"
-})(["", " border-top:", ";margin-top:6px;margin-bottom:2px;padding-bottom:", ";font-size:", ";", " font-weight:", ";display:flex;justify-content:space-between;"], truncate(), props => border(props.theme.colors.neutral['300']), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => toMobile(props.theme.fontSizes.subTitle[400]), color('neutral', '500'), props => props.theme.fontWeights.regular);
+})(["", " border-top:", ";margin-top:6px;margin-bottom:2px;padding-bottom:", ";font-size:", ";", " font-weight:", ";display:flex;justify-content:space-between;"], truncate(), props => border(props.theme.colors.neutral['300']), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => toMobile(props.theme.fontSizes.subTitle[400]), color('neutral', 500), props => props.theme.fontWeights.regular);
 const LeftIcon = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-10tpzm8-5"
 })(["& > span{height:", ";width:", ";}& > span > svg,svg:not([fill]){height:", ";width:", ";}"], props => props.halfM, props => props.halfM, props => props.halfM, props => props.halfM);
@@ -37,7 +38,7 @@ const CenterWrap = /*#__PURE__*/styled.div.withConfig({
 })(["display:flex;align-items:center;", ""], truncate());
 
 const MobileCard = _ref => {
-  var _TitleEllipsis, _SubText;
+  var _TitleEllipsis, _SubText, _Grid;
 
   let {
     children,
@@ -51,7 +52,8 @@ const MobileCard = _ref => {
     theme,
     expandable = false,
     expandedContent,
-    value
+    value,
+    cardContent
   } = _ref;
   const subTextRef = useRef(null);
   const subTextHeight = useHeight(subTextRef);
@@ -98,7 +100,7 @@ const MobileCard = _ref => {
       }, void 0, _TitleEllipsis || (_TitleEllipsis = /*#__PURE__*/_jsx(TitleEllipsis, {}, void 0, children)), details && /*#__PURE__*/_jsx(Grid, {
         "data-testid": "card-details",
         cols: details.map(() => 'min-content'),
-        mb: !(subText || subIcons) && halfM,
+        mb: !(subText || subIcons) && halfM || 0,
         pt: op('/', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs), 2)
       }, void 0, details.map((d, i) => /*#__PURE__*/_jsx(Detail, {}, i, d, i < details.length - 1 && /*#__PURE__*/_jsx(Detail, {
         px: __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs)
@@ -117,66 +119,13 @@ const MobileCard = _ref => {
       }), /*#__PURE__*/_jsx(ExpandableRegion, {
         show: selected,
         content: expandedContent
-      })));
+      }), cardContent && (_Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {}, void 0, cardContent)))));
     }
   });
 };
 
-const props = {
-  /**
-   * card height
-   */
-  height: PropTypes.oneOf(['s', 'm']).description('card height'),
-
-  /**
-   * Defines mobile card title
-   */
-  children: PropTypes.string.isRequired.description('Defines mobile card title'),
-
-  /**
-   * Wheter if the card is expandable or not
-   */
-  expandable: PropTypes.bool.description('Wheter if the card is expandable or not'),
-
-  /**
-   * content to display in expand card section
-   */
-  expandedContent: PropTypes.element.description('content to display in expand card section'),
-
-  /**
-   * Icon to the left of the card. Size is adjusted automatically.
-   */
-  leftAddOn: PropTypes.element.description('Icon to the left of the card. Size is adjusted automatically.'),
-
-  /**
-   * Pass an element to render left. For example a Button with an icon
-   */
-  leftProp: PropTypes.element.description('Pass an element to render left. For example a Button with an icon'),
-
-  /**
-   * Pass an array of 1 or 2 elements to render right. For example a Button with an icon
-   */
-  rightProp: PropTypes.arrayOf(PropTypes.element).description('Pass an array of 1 or 2 elements to render right. For example a Button with an icon'),
-
-  /**
-   * Pass an array of 1 or 2 strings
-   */
-  subText: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1 or 2 strings'),
-
-  /**
-   * SubIcons component
-   */
-  subIcons: PropTypes.element.description('SubIcons component'),
-
-  /**
-   * Pass an array of 1, 2 or 3 strings
-   */
-  details: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1, 2 or 3 strings'),
-  theme: PropTypes.object.isRequired.description(''),
-  value: PropTypes.number.description('')
-};
 const DSMobileCardWithSchema = describe(MobileCard);
-DSMobileCardWithSchema.propTypes = props;
+DSMobileCardWithSchema.propTypes = cardPropsTypes;
 var MobileCard$1 = withTheme(MobileCard);
 
 export { DSMobileCardWithSchema, MobileCard$1 as default };

package/esm/MobileCard/props.js

@@ -0,0 +1,58 @@
+import { PropTypes } from 'react-desc';
+
+const cardPropsTypes = {
+  /**
+   * card height
+   */
+  height: PropTypes.oneOf(['s', 'm']).description('card height'),
+
+  /**
+   * Defines mobile card title
+   */
+  children: PropTypes.string.description('Defines mobile card title').isRequired,
+
+  /**
+   * Wheter if the card is expandable or not
+   */
+  expandable: PropTypes.bool.description('Wheter if the card is expandable or not'),
+
+  /**
+   * content to display in expand card section
+   */
+  expandedContent: PropTypes.element.description('content to display in expand card section'),
+
+  /**
+   * Icon to the left of the card. Size is adjusted automatically.
+   */
+  leftAddOn: PropTypes.element.description('Icon to the left of the card. Size is adjusted automatically.'),
+
+  /**
+   * Pass an element to render left. For example a Button with an icon
+   */
+  leftProp: PropTypes.element.description('Pass an element to render left. For example a Button with an icon'),
+
+  /**
+   * Pass an array of 1 or 2 elements to render right. For example a Button with an icon
+   */
+  rightProp: PropTypes.arrayOf(PropTypes.element).description('Pass an array of 1 or 2 elements to render right. For example a Button with an icon'),
+
+  /**
+   * Pass an array of 1 or 2 strings
+   */
+  subText: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1 or 2 strings'),
+
+  /**
+   * SubIcons component
+   */
+  subIcons: PropTypes.element.description('SubIcons component'),
+
+  /**
+   * Pass an array of 1, 2 or 3 strings
+   */
+  details: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1, 2 or 3 strings'),
+  theme: PropTypes.object.description('').isRequired,
+  value: PropTypes.number.description(''),
+  cardContent: PropTypes.node.description('JSX content for the card')
+};
+
+export { cardPropsTypes };

package/esm/Tabs/index.js

@@ -5,8 +5,9 @@ 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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'react';
+import { describe } from 'react-desc';
 import { DSTabs, DSTab } from '@elliemae/ds-tabs';
+import { MobileTabsPropTypes, MobileTabPropTypes } from './propTypes.js';
 import { jsx } from 'react/jsx-runtime';
 
 const _excluded = ["children"],
@@ -33,9 +34,12 @@ const DSMobileTab = _ref2 => {
       props = _objectWithoutProperties(_ref2, _excluded2);
 
   return /*#__PURE__*/jsx(DSTab, _objectSpread(_objectSpread({}, props), {}, {
-    isDSMobile: true,
     children: children
   }));
 };
+const DSMobileTabsWithSchema = describe(DSMobileTabs);
+DSMobileTabsWithSchema.propTypes = MobileTabsPropTypes;
+const DSMobileTabWithSchema = describe(DSMobileTab);
+DSMobileTabWithSchema.propTypes = MobileTabPropTypes;
 
-export { DSMobileTab, DSMobileTabs };
+export { DSMobileTab, DSMobileTabWithSchema, DSMobileTabs, DSMobileTabsWithSchema };

package/esm/Tabs/propTypes.js

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

package/esm/index.js

@@ -26,7 +26,7 @@ export { DSMobileTimePicker, DSMobileTimePickerWithSchema } from './MobileTimePi
 export { DSMobileEmptyState, DSMobileEmptyStateWithSchema } from './MobileEmtpyState/MobileEmptyState.js';
 export { DSMobileDropdownMenu, DSMobileDropdownMenuWithSchema } from './MobileDropdownMenu/MobileDropdownMenu.js';
 export { DSMobileDropdownTriggerInput } from './MobileDropdownMenu/MobileDropdownInput.js';
-export { DSMobileTab, DSMobileTabs } from './Tabs/index.js';
+export { DSMobileTab, DSMobileTabWithSchema, DSMobileTabs, DSMobileTabsWithSchema } from './Tabs/index.js';
 export { DSMobileCard } from './MobileCard/index.js';
 export { DSCollectionBox, DSCollectionBoxWithSchema } from './CollectionBox/CollectionBox.js';
 export { DSCategoryBox, DSCategoryBoxWithSchema } from './CategoryBox/CategoryBox.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-mobile",
-  "version": "2.0.0-rc.11",
+  "version": "2.0.0-rc.15",
   "license": "MIT",
   "description": "ICE MT - Dimsum - System",
   "module": "./esm/index.js",
@@ -11,6 +11,10 @@
       "import": "./esm/index.js",
       "require": "./cjs/index.js"
     },
+    "./Tabs/propTypes": {
+      "import": "./esm/Tabs/propTypes.js",
+      "require": "./cjs/Tabs/propTypes.js"
+    },
     "./Tabs": {
       "import": "./esm/Tabs/index.js",
       "require": "./cjs/Tabs/index.js"
@@ -231,6 +235,10 @@
       "import": "./esm/MobileCard/StyledCard.js",
       "require": "./cjs/MobileCard/StyledCard.js"
     },
+    "./MobileCard/props": {
+      "import": "./esm/MobileCard/props.js",
+      "require": "./cjs/MobileCard/props.js"
+    },
     "./MobileCard": {
       "import": "./esm/MobileCard/index.js",
       "require": "./cjs/MobileCard/index.js"
@@ -421,20 +429,20 @@
     "generateSubmodules": true
   },
   "dependencies": {
-    "@elliemae/ds-accordion": "2.0.0-rc.11",
-    "@elliemae/ds-backdrop": "2.0.0-rc.11",
-    "@elliemae/ds-button": "2.0.0-rc.11",
-    "@elliemae/ds-circular-progress-indicator": "2.0.0-rc.11",
-    "@elliemae/ds-devutils": "2.0.0-rc.11",
-    "@elliemae/ds-form": "2.0.0-rc.11",
-    "@elliemae/ds-grid": "2.0.0-rc.11",
-    "@elliemae/ds-icon": "2.0.0-rc.11",
-    "@elliemae/ds-icons": "2.0.0-rc.11",
-    "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-rc.11",
-    "@elliemae/ds-shared": "2.0.0-rc.11",
-    "@elliemae/ds-system": "2.0.0-rc.11",
-    "@elliemae/ds-tabs": "2.0.0-rc.11",
-    "@elliemae/ds-truncated-expandable-text": "2.0.0-rc.11",
+    "@elliemae/ds-accordion": "2.0.0-rc.15",
+    "@elliemae/ds-backdrop": "2.0.0-rc.15",
+    "@elliemae/ds-button": "2.0.0-rc.15",
+    "@elliemae/ds-circular-progress-indicator": "2.0.0-rc.15",
+    "@elliemae/ds-devutils": "2.0.0-rc.15",
+    "@elliemae/ds-form": "2.0.0-rc.15",
+    "@elliemae/ds-grid": "2.0.0-rc.15",
+    "@elliemae/ds-icon": "2.0.0-rc.15",
+    "@elliemae/ds-icons": "2.0.0-rc.15",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-rc.15",
+    "@elliemae/ds-shared": "2.0.0-rc.15",
+    "@elliemae/ds-system": "2.0.0-rc.15",
+    "@elliemae/ds-tabs": "2.0.0-rc.15",
+    "@elliemae/ds-truncated-expandable-text": "2.0.0-rc.15",
     "polished": "~3.6.7",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",

package/types/MobileCard/Card.d.ts

@@ -1,28 +1,25 @@
 /// <reference path="../../../../../shared/typings/react-desc.d.ts" />
 import React from 'react';
+import { MobileCardProps } from './props';
 declare const DSMobileCardWithSchema: {
-    (props?: {
-        children: any;
-        height?: string | undefined;
-        leftAddOn: any;
-        leftProp: any;
-        rightProp: any;
-        subText: any;
-        subIcons: any;
-        details: any;
-        theme: any;
-        expandable?: boolean | undefined;
-        expandedContent: any;
-        value: any;
-    } | undefined): JSX.Element;
+    (props?: React.PropsWithChildren<MobileCardProps> | undefined): JSX.Element;
     propTypes: unknown;
     toTypescript: () => import("react-desc").TypescriptSchema;
 };
 export { DSMobileCardWithSchema };
 declare const _default: React.ForwardRefExoticComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
+    height: "s" | "m";
+    children: ((string | number | boolean | {} | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | React.ReactNode[]) & (boolean | React.ReactChild | React.ReactFragment | React.ReactPortal)) | null | undefined;
+    details: string[];
+    leftProp: JSX.Element | JSX.Element[];
+    rightProp: JSX.Element[];
+    value: number;
+    leftAddOn: JSX.Element | JSX.Element[];
+    subText: string[];
+    subIcons: JSX.Element | JSX.Element[];
+    expandable: boolean;
+    expandedContent: JSX.Element | JSX.Element[];
+    cardContent: JSX.Element | JSX.Element[];
 } & {
     theme?: import("styled-components").DefaultTheme | undefined;
 }>;

package/types/MobileCard/ExpandableRegion.d.ts

@@ -2,8 +2,8 @@
 import PropTypes from 'prop-types';
 export declare const ExpandableRegion: {
     ({ show, content }: {
-        show: any;
-        content: any;
+        show: boolean;
+        content: JSX.Element | JSX.Element[];
     }): JSX.Element;
     propTypes: {
         show: PropTypes.Requireable<boolean>;

package/types/MobileCard/StyledCard.d.ts

@@ -1 +1,3 @@
-export declare const StyledCard: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCard: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    minHeight: string;
+}, never>;

package/types/MobileCard/index.d.ts

@@ -3,9 +3,18 @@ import MobileCard, { DSMobileCardWithSchema } from './Card';
 import { DSMobileCardGroupWithSchema } from './Group';
 import { ActionAddon } from './ActionAddon';
 declare const DSMobileCard: import("react").ForwardRefExoticComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
+    height: "s" | "m";
+    children: ((string | number | boolean | {} | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | import("react").ReactNode[]) & (boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal)) | null | undefined;
+    details: string[];
+    leftProp: JSX.Element | JSX.Element[];
+    rightProp: JSX.Element[];
+    value: number;
+    leftAddOn: JSX.Element | JSX.Element[];
+    subText: string[];
+    subIcons: JSX.Element | JSX.Element[];
+    expandable: boolean;
+    expandedContent: JSX.Element | JSX.Element[];
+    cardContent: JSX.Element | JSX.Element[];
 } & {
     theme?: import("styled-components").DefaultTheme | undefined;
 }>;

package/types/MobileCard/props.d.ts

@@ -0,0 +1,118 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
+import React from 'react';
+import type { Theme } from '@elliemae/pui-theme';
+export interface MobileCardProps {
+    children: React.ReactNode | React.ReactNode[];
+    height: 's' | 'm';
+    leftAddOn: JSX.Element | JSX.Element[];
+    leftProp: JSX.Element | JSX.Element[];
+    rightProp: JSX.Element[];
+    subText: string[];
+    subIcons: JSX.Element | JSX.Element[];
+    details: string[];
+    theme: Theme;
+    value: number;
+    expandable: boolean;
+    expandedContent: JSX.Element | JSX.Element[];
+    cardContent: JSX.Element | JSX.Element[];
+}
+export declare const cardPropsTypes: {
+    /**
+     * card height
+     */
+    height: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    /**
+     * Defines mobile card title
+     */
+    children: import("react-desc").PropTypesDescValidator;
+    /**
+     * Wheter if the card is expandable or not
+     */
+    expandable: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    /**
+     * content to display in expand card section
+     */
+    expandedContent: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    /**
+     * Icon to the left of the card. Size is adjusted automatically.
+     */
+    leftAddOn: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    /**
+     * Pass an element to render left. For example a Button with an icon
+     */
+    leftProp: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    /**
+     * Pass an array of 1 or 2 elements to render right. For example a Button with an icon
+     */
+    rightProp: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    /**
+     * Pass an array of 1 or 2 strings
+     */
+    subText: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    /**
+     * SubIcons component
+     */
+    subIcons: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    /**
+     * Pass an array of 1, 2 or 3 strings
+     */
+    details: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    theme: import("react-desc").PropTypesDescValidator;
+    value: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    cardContent: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+};

package/types/Tabs/index.d.ts

@@ -1,9 +1,24 @@
-/// <reference types="react" />
-export declare const DSMobileTabs: ({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}) => JSX.Element;
-export declare const DSMobileTab: ({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}) => JSX.Element;
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
+import type { WeakValidationMap } from 'react';
+import type { DSTabsPropsT, DSTabPropsT } from '@elliemae/ds-tabs';
+declare type DSMobileTabsPropsT = Omit<DSTabsPropsT, 'animated' | 'enableMouseEvents' | 'allowTextSelection' | 'type' | 'isDSMobile' | 'withCarousel'>;
+declare type DSMobileTabPropsT = Omit<DSTabPropsT, 'isDSMobile'>;
+export declare const DSMobileTabs: {
+    ({ children, ...props }: DSMobileTabsPropsT): JSX.Element;
+    propTypes: WeakValidationMap<unknown>;
+};
+export declare const DSMobileTab: {
+    ({ children, ...props }: DSMobileTabPropsT): JSX.Element;
+    propTypes: WeakValidationMap<unknown>;
+};
+declare const DSMobileTabsWithSchema: {
+    (props?: DSMobileTabsPropsT | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+declare const DSMobileTabWithSchema: {
+    (props?: DSMobileTabPropsT | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+export { DSMobileTabsWithSchema, DSMobileTabWithSchema };

package/types/Tabs/propTypes.d.ts

@@ -0,0 +1,42 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
+export declare const MobileTabPropTypes: {
+    tabId: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    title: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    required: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    disabled: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+};
+export declare const MobileTabsPropTypes: {
+    onTabChange: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    tabBarExtraContent: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    onlyRenderActiveTab: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    fixedTabsHeaders: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    activeTab: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    children: import("react-desc").PropTypesDescValidator;
+    tabsListAriaLabel: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    containerProps: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    innerRef: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+};