@elliemae/ds-mobile 2.0.0-rc.7 → 2.0.1-rc.0

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.7",
+  "version": "2.0.1-rc.0",
   "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,11 +429,20 @@
     "generateSubmodules": true
   },
   "dependencies": {
-    "@elliemae/ds-basic": "2.0.0-rc.7",
-    "@elliemae/ds-devutils": "2.0.0-rc.7",
-    "@elliemae/ds-icons": "2.0.0-rc.7",
-    "@elliemae/ds-shared": "2.0.0-rc.7",
-    "@elliemae/ds-system": "2.0.0-rc.7",
+    "@elliemae/ds-accordion": "2.0.1-rc.0",
+    "@elliemae/ds-backdrop": "2.0.1-rc.0",
+    "@elliemae/ds-button": "2.0.1-rc.0",
+    "@elliemae/ds-circular-progress-indicator": "2.0.1-rc.0",
+    "@elliemae/ds-devutils": "2.0.1-rc.0",
+    "@elliemae/ds-form": "2.0.1-rc.0",
+    "@elliemae/ds-grid": "2.0.1-rc.0",
+    "@elliemae/ds-icon": "2.0.1-rc.0",
+    "@elliemae/ds-icons": "2.0.1-rc.0",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.0.1-rc.0",
+    "@elliemae/ds-shared": "2.0.1-rc.0",
+    "@elliemae/ds-system": "2.0.1-rc.0",
+    "@elliemae/ds-tabs": "2.0.1-rc.0",
+    "@elliemae/ds-truncated-expandable-text": "2.0.1-rc.0",
     "polished": "~3.6.7",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
@@ -433,12 +450,15 @@
     "react-window-infinite-loader": "~1.0.5"
   },
   "devDependencies": {
-    "@elliemae/pui-theme": "~2.2.6",
+    "@elliemae/pui-theme": "~2.2.5",
+    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/react": "~12.1.2",
+    "@testing-library/user-event": "~13.5.0",
     "styled-components": "~5.3.3",
     "styled-system": "~5.1.5"
   },
   "peerDependencies": {
-    "@elliemae/pui-theme": "^2.2.6",
+    "@elliemae/pui-theme": "^2.2.5",
     "lodash": "^4.17.21",
     "react": "~17.0.2",
     "react-dom": "^17.0.2",

package/types/CategoryBox/CategoryBox.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 declare const DSCategoryBox: {
     ({ borderTop, actionsRight, title, headerLevel, children }: {
@@ -15,20 +16,50 @@ declare const DSCategoryBox: {
         /**
          * Toggle border top of category box
          */
-        borderTop: any;
+        borderTop: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Array of button icons
          */
-        actionsRight: any;
+        actionsRight: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * semantic level of header tag for the title
          */
-        headerLevel: any;
+        headerLevel: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * In-box children
          */
-        children: any;
+        children: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const DSCategoryBoxWithSchema: any;
+declare const DSCategoryBoxWithSchema: {
+    (props?: {
+        borderTop?: boolean | undefined;
+        actionsRight?: never[] | undefined;
+        title: any;
+        headerLevel?: number | undefined;
+        children: any;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { DSCategoryBox, DSCategoryBoxWithSchema };