@elliemae/ds-mobile 3.1.0-next.2 → 3.1.0-next.3

package/dist/cjs/MobileFooter/Action.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MobileFooter/Action.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable jest/valid-describe */\n/* eslint-disable jest/valid-title */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { typography } from '@xstyled/styled-components';\nimport { color, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe, PropTypes } from 'react-desc';\n\nconst Label = styled.span`\n  ${typography}\n  ${color('neutral', '800')}\n  padding-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  padding-top: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} / 2);\n`;\n\nconst DSMobileFooterAction = ({ label, icon, onClick }) => (\n  <Grid\n    data-testid=\"ds-mobile-footer-action\"\n    rows={['auto'].concat(label ? 'min-content' : 'none')}\n    justifyContent=\"center\"\n    role=\"button\"\n    onClick={onClick}\n  >\n    <Grid justifyContent=\"center\" alignItems=\"center\">\n      {React.cloneElement(icon, {\n        'data-testid': 'ds-mobile-footer-action-icon',\n        size: !label ? 'l' : 'm',\n      })}\n    </Grid>\n\n    {label && (\n      <Grid justifyContent=\"center\">\n        <Label fontSize=\"11px\">{label}</Label>\n      </Grid>\n    )}\n  </Grid>\n);\n\nconst actionProps = {\n  /** Action label */\n  label: PropTypes.string.description('Action label'),\n  /** Action icon */\n  icon: PropTypes.element.description('Action icon'),\n  /** onClick callback */\n  onClick: PropTypes.func.description('onClick callback'),\n};\n\nDSMobileFooterAction.propTypes = actionProps;\nDSMobileFooterAction.displayName = 'DSMobileFooterAction';\nconst DSMobileFooterActionWithSchema = describe(DSMobileFooterAction).description('Mobile footer action');\nDSMobileFooterActionWithSchema.propTypes = actionProps;\n\nexport { DSMobileFooterAction, DSMobileFooterActionWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkB;AAClB,+BAAmB;AACnB,gCAA2B;AAC3B,uBAAgD;AAChD,qBAAqB;AACrB,wBAAoC;AAEpC,MAAM,QAAQ,iCAAO;AAAA,IACjB;AAAA,IACA,4BAAM,WAAW,KAAK;AAAA,oBACN,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,sBACvD,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAG/E,MAAM,uBAAuB,CAAC,EAAE,OAAO,MAAM,cAC3C,mDAAC;AAAA,EACC,eAAY;AAAA,EACZ,MAAM,CAAC,MAAM,EAAE,OAAO,QAAQ,gBAAgB,MAAM;AAAA,EACpD,gBAAe;AAAA,EACf,MAAK;AAAA,EACL;AAAA,GAEA,mDAAC;AAAA,EAAK,gBAAe;AAAA,EAAS,YAAW;AAAA,GACtC,qBAAM,aAAa,MAAM;AAAA,EACxB,eAAe;AAAA,EACf,MAAM,CAAC,QAAQ,MAAM;AACvB,CAAC,CACH,GAEC,SACC,mDAAC;AAAA,EAAK,gBAAe;AAAA,GACnB,mDAAC;AAAA,EAAM,UAAS;AAAA,GAAQ,KAAM,CAChC,CAEJ;AAGF,MAAM,cAAc;AAAA,EAElB,OAAO,4BAAU,OAAO,YAAY,cAAc;AAAA,EAElD,MAAM,4BAAU,QAAQ,YAAY,aAAa;AAAA,EAEjD,SAAS,4BAAU,KAAK,YAAY,kBAAkB;AACxD;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,gCAAS,oBAAoB,EAAE,YAAY,sBAAsB;AACxG,+BAA+B,YAAY;",
+  "sourcesContent": ["/* eslint-disable jest/valid-describe */\n/* eslint-disable jest/valid-title */\nimport React from 'react';\nimport { styled, typography, color, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\n\nconst Label = styled.span`\n  ${typography}\n  ${color('neutral', '800')}\n  padding-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  padding-top: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} / 2);\n`;\n\nconst DSMobileFooterAction = ({ label, icon, onClick }) => (\n  <Grid\n    data-testid=\"ds-mobile-footer-action\"\n    rows={['auto'].concat(label ? 'min-content' : 'none')}\n    justifyContent=\"center\"\n    role=\"button\"\n    onClick={onClick}\n  >\n    <Grid justifyContent=\"center\" alignItems=\"center\">\n      {React.cloneElement(icon, {\n        'data-testid': 'ds-mobile-footer-action-icon',\n        size: !label ? 'l' : 'm',\n      })}\n    </Grid>\n\n    {label && (\n      <Grid justifyContent=\"center\">\n        <Label fontSize=\"11px\">{label}</Label>\n      </Grid>\n    )}\n  </Grid>\n);\n\nconst actionProps = {\n  /** Action label */\n  label: PropTypes.string.description('Action label'),\n  /** Action icon */\n  icon: PropTypes.element.description('Action icon'),\n  /** onClick callback */\n  onClick: PropTypes.func.description('onClick callback'),\n};\n\nDSMobileFooterAction.propTypes = actionProps;\nDSMobileFooterAction.displayName = 'DSMobileFooterAction';\nconst DSMobileFooterActionWithSchema = describe(DSMobileFooterAction).description('Mobile footer action');\nDSMobileFooterActionWithSchema.propTypes = actionProps;\n\nexport { DSMobileFooterAction, DSMobileFooterActionWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkB;AAClB,uBAAoE;AACpE,qBAAqB;AACrB,0BAAoC;AAEpC,MAAM,QAAQ,wBAAO;AAAA,IACjB;AAAA,IACA,4BAAM,WAAW,KAAK;AAAA,oBACN,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,sBACvD,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAG/E,MAAM,uBAAuB,CAAC,EAAE,OAAO,MAAM,cAC3C,mDAAC;AAAA,EACC,eAAY;AAAA,EACZ,MAAM,CAAC,MAAM,EAAE,OAAO,QAAQ,gBAAgB,MAAM;AAAA,EACpD,gBAAe;AAAA,EACf,MAAK;AAAA,EACL;AAAA,GAEA,mDAAC;AAAA,EAAK,gBAAe;AAAA,EAAS,YAAW;AAAA,GACtC,qBAAM,aAAa,MAAM;AAAA,EACxB,eAAe;AAAA,EACf,MAAM,CAAC,QAAQ,MAAM;AACvB,CAAC,CACH,GAEC,SACC,mDAAC;AAAA,EAAK,gBAAe;AAAA,GACnB,mDAAC;AAAA,EAAM,UAAS;AAAA,GAAQ,KAAM,CAChC,CAEJ;AAGF,MAAM,cAAc;AAAA,EAElB,OAAO,8BAAU,OAAO,YAAY,cAAc;AAAA,EAElD,MAAM,8BAAU,QAAQ,YAAY,aAAa;AAAA,EAEjD,SAAS,8BAAU,KAAK,YAAY,kBAAkB;AACxD;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,kCAAS,oBAAoB,EAAE,YAAY,sBAAsB;AACxG,+BAA+B,YAAY;",
   "names": []
 }

package/dist/cjs/MobileFooter/Footer.js

@@ -26,16 +26,16 @@ __export(Footer_exports, {
 module.exports = __toCommonJS(Footer_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
 var import_ds_system = require("@elliemae/ds-system");
+var import_ds_system2 = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_button = __toESM(require("@elliemae/ds-button"));
-var import_react_desc = require("react-desc");
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_Text = require("./Text");
-const FooterWrap = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const FooterWrap = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   background-color: ${(props) => props.theme.colors.neutral["000"]};
-  border-top: ${(props) => (0, import_ds_system.border)(props.theme.colors.neutral[100])};
-  height: ${(props) => `calc(${(0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xs)} * 7)`};
+  border-top: ${(props) => (0, import_ds_system2.border)(props.theme.colors.neutral[100])};
+  height: ${(props) => `calc(${(0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xs)} * 7)`};
 `;
 const MobileFooter = ({ children }) => {
   const childArr = import_react.default.Children.toArray(children);
@@ -56,11 +56,11 @@ const MobileFooter = ({ children }) => {
   }, c))));
 };
 const footerProps = {
-  children: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.element, import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.element)]).isRequired.description("Instance of DSButton, DSMobileFooterText or DSMobileFooterAction")
+  children: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.element, import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.element)]).isRequired.description("Instance of DSButton, DSMobileFooterText or DSMobileFooterAction")
 };
 MobileFooter.propTypes = footerProps;
 MobileFooter.displayName = "MobileFooter";
-const MobileFooterWithSchema = (0, import_react_desc.describe)(MobileFooter);
+const MobileFooterWithSchema = (0, import_ds_utilities.describe)(MobileFooter);
 MobileFooterWithSchema.propTypes = footerProps;
 var Footer_default = MobileFooter;
 //# sourceMappingURL=Footer.js.map

package/dist/cjs/MobileFooter/Footer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MobileFooter/Footer.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable jest/valid-describe */\n/* eslint-disable jest/valid-title */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { border, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport DSButton from '@elliemae/ds-button';\nimport { describe, PropTypes } from 'react-desc';\nimport { DSMobileFooterText } from './Text';\n\nconst FooterWrap = styled(Grid)`\n  background-color: ${(props) => props.theme.colors.neutral['000']};\n  border-top: ${(props) => border(props.theme.colors.neutral[100])};\n  height: ${(props) => `calc(${__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)} * 7)`};\n`;\n\nconst MobileFooter = ({ children }) => {\n  const childArr = React.Children.toArray(children);\n  const isButtonType = childArr[0].type === DSMobileFooterText || childArr[0].type === DSButton;\n  const setCols = () => {\n    if (isButtonType) {\n      return childArr.length === 1 ? ['90%'] : ['45%', '45%'];\n    }\n    return childArr.map(() => `${100 / childArr.length}%`);\n  };\n  return (\n    <FooterWrap>\n      <Grid\n        cols={setCols()}\n        gutter={isButtonType ? 'xs' : undefined}\n        justifyContent=\"center\"\n        alignItems={isButtonType ? 'center' : undefined}\n      >\n        {childArr.map((c, i) => (\n          // eslint-disable-next-line react/no-array-index-key\n          <Grid key={i}>{c}</Grid>\n        ))}\n      </Grid>\n    </FooterWrap>\n  );\n};\n\nconst footerProps = {\n  /**\n   * Instance of DSButton, DSMobileFooterText or DSMobileFooterAction\n   */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired.description(\n    'Instance of DSButton, DSMobileFooterText or DSMobileFooterAction',\n  ),\n};\n\nMobileFooter.propTypes = footerProps;\nMobileFooter.displayName = 'MobileFooter';\nconst MobileFooterWithSchema = describe(MobileFooter);\nMobileFooterWithSchema.propTypes = footerProps;\n\nexport default MobileFooter;\n\nexport { MobileFooterWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkB;AAClB,+BAAmB;AACnB,uBAAiD;AACjD,qBAAqB;AACrB,uBAAqB;AACrB,wBAAoC;AACpC,kBAAmC;AAEnC,MAAM,aAAa,sCAAO,mBAAI;AAAA,sBACR,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBAC5C,CAAC,UAAU,6BAAO,MAAM,MAAM,OAAO,QAAQ,IAAI;AAAA,YACrD,CAAC,UAAU,QAAQ,+CAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAG5E,MAAM,eAAe,CAAC,EAAE,eAAe;AACrC,QAAM,WAAW,qBAAM,SAAS,QAAQ,QAAQ;AAChD,QAAM,eAAe,SAAS,GAAG,SAAS,kCAAsB,SAAS,GAAG,SAAS;AACrF,QAAM,UAAU,MAAM;AACpB,QAAI,cAAc;AAChB,aAAO,SAAS,WAAW,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,KAAK;AAAA,IACxD;AACA,WAAO,SAAS,IAAI,MAAM,GAAG,MAAM,SAAS,SAAS;AAAA,EACvD;AACA,SACE,mDAAC,kBACC,mDAAC;AAAA,IACC,MAAM,QAAQ;AAAA,IACd,QAAQ,eAAe,OAAO;AAAA,IAC9B,gBAAe;AAAA,IACf,YAAY,eAAe,WAAW;AAAA,KAErC,SAAS,IAAI,CAAC,GAAG,MAEhB,mDAAC;AAAA,IAAK,KAAK;AAAA,KAAI,CAAE,CAClB,CACH,CACF;AAEJ;AAEA,MAAM,cAAc;AAAA,EAIlB,UAAU,4BAAU,UAAU,CAAC,4BAAU,SAAS,4BAAU,QAAQ,4BAAU,OAAO,CAAC,CAAC,EAAE,WAAW,YAClG,kEACF;AACF;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,yBAAyB,gCAAS,YAAY;AACpD,uBAAuB,YAAY;AAEnC,IAAO,iBAAQ;",
+  "sourcesContent": ["/* eslint-disable jest/valid-describe */\n/* eslint-disable jest/valid-title */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { border, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport DSButton from '@elliemae/ds-button';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { DSMobileFooterText } from './Text';\n\nconst FooterWrap = styled(Grid)`\n  background-color: ${(props) => props.theme.colors.neutral['000']};\n  border-top: ${(props) => border(props.theme.colors.neutral[100])};\n  height: ${(props) => `calc(${__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)} * 7)`};\n`;\n\nconst MobileFooter = ({ children }) => {\n  const childArr = React.Children.toArray(children);\n  const isButtonType = childArr[0].type === DSMobileFooterText || childArr[0].type === DSButton;\n  const setCols = () => {\n    if (isButtonType) {\n      return childArr.length === 1 ? ['90%'] : ['45%', '45%'];\n    }\n    return childArr.map(() => `${100 / childArr.length}%`);\n  };\n  return (\n    <FooterWrap>\n      <Grid\n        cols={setCols()}\n        gutter={isButtonType ? 'xs' : undefined}\n        justifyContent=\"center\"\n        alignItems={isButtonType ? 'center' : undefined}\n      >\n        {childArr.map((c, i) => (\n          // eslint-disable-next-line react/no-array-index-key\n          <Grid key={i}>{c}</Grid>\n        ))}\n      </Grid>\n    </FooterWrap>\n  );\n};\n\nconst footerProps = {\n  /**\n   * Instance of DSButton, DSMobileFooterText or DSMobileFooterAction\n   */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired.description(\n    'Instance of DSButton, DSMobileFooterText or DSMobileFooterAction',\n  ),\n};\n\nMobileFooter.propTypes = footerProps;\nMobileFooter.displayName = 'MobileFooter';\nconst MobileFooterWithSchema = describe(MobileFooter);\nMobileFooterWithSchema.propTypes = footerProps;\n\nexport default MobileFooter;\n\nexport { MobileFooterWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkB;AAClB,uBAAuB;AACvB,wBAAiD;AACjD,qBAAqB;AACrB,uBAAqB;AACrB,0BAAoC;AACpC,kBAAmC;AAEnC,MAAM,aAAa,6BAAO,mBAAI;AAAA,sBACR,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBAC5C,CAAC,UAAU,8BAAO,MAAM,MAAM,OAAO,QAAQ,IAAI;AAAA,YACrD,CAAC,UAAU,QAAQ,gDAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAG5E,MAAM,eAAe,CAAC,EAAE,eAAe;AACrC,QAAM,WAAW,qBAAM,SAAS,QAAQ,QAAQ;AAChD,QAAM,eAAe,SAAS,GAAG,SAAS,kCAAsB,SAAS,GAAG,SAAS;AACrF,QAAM,UAAU,MAAM;AACpB,QAAI,cAAc;AAChB,aAAO,SAAS,WAAW,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,KAAK;AAAA,IACxD;AACA,WAAO,SAAS,IAAI,MAAM,GAAG,MAAM,SAAS,SAAS;AAAA,EACvD;AACA,SACE,mDAAC,kBACC,mDAAC;AAAA,IACC,MAAM,QAAQ;AAAA,IACd,QAAQ,eAAe,OAAO;AAAA,IAC9B,gBAAe;AAAA,IACf,YAAY,eAAe,WAAW;AAAA,KAErC,SAAS,IAAI,CAAC,GAAG,MAEhB,mDAAC;AAAA,IAAK,KAAK;AAAA,KAAI,CAAE,CAClB,CACH,CACF;AAEJ;AAEA,MAAM,cAAc;AAAA,EAIlB,UAAU,8BAAU,UAAU,CAAC,8BAAU,SAAS,8BAAU,QAAQ,8BAAU,OAAO,CAAC,CAAC,EAAE,WAAW,YAClG,kEACF;AACF;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,yBAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;AAEnC,IAAO,iBAAQ;",
   "names": []
 }

package/dist/cjs/MobileFooter/Text.js

@@ -26,21 +26,21 @@ __export(Text_exports, {
 module.exports = __toCommonJS(Text_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_react_desc = require("react-desc");
-const Text = import_styled_components.default.p`
+var import_ds_system2 = require("@elliemae/ds-system");
+var import_ds_utilities = require("@elliemae/ds-utilities");
+const Text = import_ds_system.styled.p`
   margin: auto 0;
-  ${(0, import_ds_system.truncate)()}
-  ${(0, import_ds_system.textStyle)("body")}
-  ${(0, import_ds_system.color)("neutral", "800")}
+  ${(0, import_ds_system2.truncate)()}
+  ${(0, import_ds_system2.textStyle)("body")}
+  ${(0, import_ds_system2.color)("neutral", "800")}
 `;
 const DSMobileFooterText = ({ children }) => /* @__PURE__ */ import_react.default.createElement(Text, null, children);
 const props = {
-  children: import_react_desc.PropTypes.string.isRequired.description("Children")
+  children: import_ds_utilities.PropTypes.string.isRequired.description("Children")
 };
 DSMobileFooterText.propTypes = props;
 DSMobileFooterText.displayName = "DSMobileFooterText";
-const DSMobileFooterTextWithSchema = (0, import_react_desc.describe)(DSMobileFooterText);
+const DSMobileFooterTextWithSchema = (0, import_ds_utilities.describe)(DSMobileFooterText);
 DSMobileFooterTextWithSchema.propTypes = props;
 //# sourceMappingURL=Text.js.map

package/dist/cjs/MobileFooter/Text.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MobileFooter/Text.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable jest/valid-describe */\n/* eslint-disable jest/valid-title */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { textStyle, truncate, color } from '@elliemae/ds-system';\nimport { describe, PropTypes } from 'react-desc';\n\nconst Text = styled.p`\n  margin: auto 0;\n  ${truncate()}\n  ${textStyle('body')}\n  ${color('neutral', '800')}\n`;\n\nconst DSMobileFooterText = ({ children }) => <Text>{children}</Text>;\n\nconst props = {\n  children: PropTypes.string.isRequired.description('Children'),\n};\n\nDSMobileFooterText.propTypes = props;\nDSMobileFooterText.displayName = 'DSMobileFooterText';\nconst DSMobileFooterTextWithSchema = describe(DSMobileFooterText);\nDSMobileFooterTextWithSchema.propTypes = props;\n\nexport { DSMobileFooterText, DSMobileFooterTextWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkB;AAClB,+BAAmB;AACnB,uBAA2C;AAC3C,wBAAoC;AAEpC,MAAM,OAAO,iCAAO;AAAA;AAAA,IAEhB,+BAAS;AAAA,IACT,gCAAU,MAAM;AAAA,IAChB,4BAAM,WAAW,KAAK;AAAA;AAG1B,MAAM,qBAAqB,CAAC,EAAE,eAAe,mDAAC,YAAM,QAAS;AAE7D,MAAM,QAAQ;AAAA,EACZ,UAAU,4BAAU,OAAO,WAAW,YAAY,UAAU;AAC9D;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,gCAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
+  "sourcesContent": ["/* eslint-disable jest/valid-describe */\n/* eslint-disable jest/valid-title */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { textStyle, truncate, color } from '@elliemae/ds-system';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\n\nconst Text = styled.p`\n  margin: auto 0;\n  ${truncate()}\n  ${textStyle('body')}\n  ${color('neutral', '800')}\n`;\n\nconst DSMobileFooterText = ({ children }) => <Text>{children}</Text>;\n\nconst props = {\n  children: PropTypes.string.isRequired.description('Children'),\n};\n\nDSMobileFooterText.propTypes = props;\nDSMobileFooterText.displayName = 'DSMobileFooterText';\nconst DSMobileFooterTextWithSchema = describe(DSMobileFooterText);\nDSMobileFooterTextWithSchema.propTypes = props;\n\nexport { DSMobileFooterText, DSMobileFooterTextWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkB;AAClB,uBAAuB;AACvB,wBAA2C;AAC3C,0BAAoC;AAEpC,MAAM,OAAO,wBAAO;AAAA;AAAA,IAEhB,gCAAS;AAAA,IACT,iCAAU,MAAM;AAAA,IAChB,6BAAM,WAAW,KAAK;AAAA;AAG1B,MAAM,qBAAqB,CAAC,EAAE,eAAe,mDAAC,YAAM,QAAS;AAE7D,MAAM,QAAQ;AAAA,EACZ,UAAU,8BAAU,OAAO,WAAW,YAAY,UAAU;AAC9D;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,kCAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
   "names": []
 }

package/dist/cjs/MobileListItem/MobileListItem.js

@@ -26,19 +26,19 @@ __export(MobileListItem_exports, {
 module.exports = __toCommonJS(MobileListItem_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_system = require("@elliemae/ds-system");
-const StyledContainer = (0, import_styled_components.default)(import_ds_grid.Grid)`
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_system2 = require("@elliemae/ds-system");
+const StyledContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   background: ${(props) => props.theme.colors.neutral["000"]};
-  border-bottom: ${(props) => (0, import_ds_system.border)(props.theme.colors.neutral["300"])};
+  border-bottom: ${(props) => (0, import_ds_system2.border)(props.theme.colors.neutral["300"])};
 `;
-const StyledTitle = import_styled_components.default.div`
+const StyledTitle = import_ds_system.styled.div`
   font-weight: ${(props) => props.theme.fontWeights.semibold};
   font-size: 13px;
   color: ${(props) => props.theme.colors.neutral["800"]};
-  ${(0, import_ds_system.truncate)()}
+  ${(0, import_ds_system2.truncate)()}
 `;
 const MobileListItem = ({
   leftAddon = null,
@@ -50,15 +50,15 @@ const MobileListItem = ({
 }) => {
   const cols = [1];
   if (leftAddon)
-    cols.unshift((0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.m));
+    cols.unshift((0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.m));
   if (rightAddon)
-    cols.push((0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.m));
+    cols.push((0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.m));
   return /* @__PURE__ */ import_react.default.createElement(StyledContainer, {
     cols,
     height: theme.space.m,
     width: "100%",
-    pl: (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s),
-    pr: (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s),
+    pl: (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s),
+    pr: (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s),
     gutter: "xs",
     "data-testid": `${dataTestid}--${value}`
   }, leftAddon && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
@@ -71,17 +71,17 @@ const MobileListItem = ({
     justifyContent: "center"
   }, rightAddon));
 };
-const DSMobileListItem = (0, import_ds_system.withTheme)(MobileListItem);
+const DSMobileListItem = (0, import_ds_system2.withTheme)(MobileListItem);
 const listItemProps = {
-  leftAddon: import_react_desc.PropTypes.element.description("Element placed at the left"),
-  rightAddon: import_react_desc.PropTypes.element.description("Element placed at the right"),
-  title: import_react_desc.PropTypes.string.description("Item s title").isRequired,
-  value: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]).description("Item s value, used for data-testid attr"),
-  dataTestid: import_react_desc.PropTypes.string.description("ID used for testing").defaultValue("mobile-list-item"),
-  theme: import_react_desc.PropTypes.object.description("")
+  leftAddon: import_ds_utilities.PropTypes.element.description("Element placed at the left"),
+  rightAddon: import_ds_utilities.PropTypes.element.description("Element placed at the right"),
+  title: import_ds_utilities.PropTypes.string.description("Item s title").isRequired,
+  value: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.string, import_ds_utilities.PropTypes.number]).description("Item s value, used for data-testid attr"),
+  dataTestid: import_ds_utilities.PropTypes.string.description("ID used for testing").defaultValue("mobile-list-item"),
+  theme: import_ds_utilities.PropTypes.object.description("")
 };
 MobileListItem.propTypes = listItemProps;
 MobileListItem.displayName = "MobileListItem";
-const ListItemWithSchema = (0, import_react_desc.describe)(MobileListItem);
+const ListItemWithSchema = (0, import_ds_utilities.describe)(MobileListItem);
 ListItemWithSchema.propTypes = listItemProps;
 //# sourceMappingURL=MobileListItem.js.map

package/dist/cjs/MobileListItem/MobileListItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MobileListItem/MobileListItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { border, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\n\nconst StyledContainer = styled(Grid)`\n  background: ${(props) => props.theme.colors.neutral['000']};\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\nconst StyledTitle = styled.div`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 13px;\n  color: ${(props) => props.theme.colors.neutral['800']};\n  ${truncate()}\n`;\n\nconst MobileListItem = ({\n  leftAddon = null,\n  rightAddon = null,\n  title = '',\n  value = '',\n  dataTestid = 'mobile-list-item',\n  theme,\n}) => {\n  const cols = [1];\n  if (leftAddon) cols.unshift(__UNSAFE_SPACE_TO_DIMSUM(theme.space.m));\n  if (rightAddon) cols.push(__UNSAFE_SPACE_TO_DIMSUM(theme.space.m));\n  return (\n    <StyledContainer\n      cols={cols}\n      height={theme.space.m}\n      width=\"100%\"\n      pl={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}\n      pr={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}\n      gutter=\"xs\"\n      data-testid={`${dataTestid}--${value}`}\n    >\n      {leftAddon && (\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          {leftAddon}\n        </Grid>\n      )}\n      <Grid alignItems=\"center\">\n        <StyledTitle>{title}</StyledTitle>\n      </Grid>\n      {rightAddon && (\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          {rightAddon}\n        </Grid>\n      )}\n    </StyledContainer>\n  );\n};\n\nconst DSMobileListItem = withTheme(MobileListItem);\n\nconst listItemProps = {\n  leftAddon: PropTypes.element.description('Element placed at the left'),\n  rightAddon: PropTypes.element.description('Element placed at the right'),\n  title: PropTypes.string.description('Item s title').isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'Item s value, used for data-testid attr',\n  ),\n  dataTestid: PropTypes.string.description('ID used for testing').defaultValue('mobile-list-item'),\n  theme: PropTypes.object.description(''),\n};\n\nMobileListItem.propTypes = listItemProps;\nMobileListItem.displayName = 'MobileListItem';\nconst ListItemWithSchema = describe(MobileListItem);\nListItemWithSchema.propTypes = listItemProps;\n\nexport { DSMobileListItem, ListItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAoC;AACpC,+BAAmB;AACnB,qBAAqB;AACrB,uBAAsE;AAEtE,MAAM,kBAAkB,sCAAO,mBAAI;AAAA,gBACnB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,mBACnC,CAAC,UAAU,6BAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAEtE,MAAM,cAAc,iCAAO;AAAA,iBACV,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,WAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,IAC7C,+BAAS;AAAA;AAGb,MAAM,iBAAiB,CAAC;AAAA,EACtB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,aAAa;AAAA,EACb;AAAA,MACI;AACJ,QAAM,OAAO,CAAC,CAAC;AACf,MAAI;AAAW,SAAK,QAAQ,+CAAyB,MAAM,MAAM,CAAC,CAAC;AACnE,MAAI;AAAY,SAAK,KAAK,+CAAyB,MAAM,MAAM,CAAC,CAAC;AACjE,SACE,mDAAC;AAAA,IACC;AAAA,IACA,QAAQ,MAAM,MAAM;AAAA,IACpB,OAAM;AAAA,IACN,IAAI,+CAAyB,MAAM,MAAM,CAAC;AAAA,IAC1C,IAAI,+CAAyB,MAAM,MAAM,CAAC;AAAA,IAC1C,QAAO;AAAA,IACP,eAAa,GAAG,eAAe;AAAA,KAE9B,aACC,mDAAC;AAAA,IAAK,YAAW;AAAA,IAAS,gBAAe;AAAA,KACtC,SACH,GAEF,mDAAC;AAAA,IAAK,YAAW;AAAA,KACf,mDAAC,mBAAa,KAAM,CACtB,GACC,cACC,mDAAC;AAAA,IAAK,YAAW;AAAA,IAAS,gBAAe;AAAA,KACtC,UACH,CAEJ;AAEJ;AAEA,MAAM,mBAAmB,gCAAU,cAAc;AAEjD,MAAM,gBAAgB;AAAA,EACpB,WAAW,4BAAU,QAAQ,YAAY,4BAA4B;AAAA,EACrE,YAAY,4BAAU,QAAQ,YAAY,6BAA6B;AAAA,EACvE,OAAO,4BAAU,OAAO,YAAY,cAAc,EAAE;AAAA,EACpD,OAAO,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,MAAM,CAAC,EAAE,YAC/D,yCACF;AAAA,EACA,YAAY,4BAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,kBAAkB;AAAA,EAC/F,OAAO,4BAAU,OAAO,YAAY,EAAE;AACxC;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,qBAAqB,gCAAS,cAAc;AAClD,mBAAmB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { border, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\n\nconst StyledContainer = styled(Grid)`\n  background: ${(props) => props.theme.colors.neutral['000']};\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\nconst StyledTitle = styled.div`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 13px;\n  color: ${(props) => props.theme.colors.neutral['800']};\n  ${truncate()}\n`;\n\nconst MobileListItem = ({\n  leftAddon = null,\n  rightAddon = null,\n  title = '',\n  value = '',\n  dataTestid = 'mobile-list-item',\n  theme,\n}) => {\n  const cols = [1];\n  if (leftAddon) cols.unshift(__UNSAFE_SPACE_TO_DIMSUM(theme.space.m));\n  if (rightAddon) cols.push(__UNSAFE_SPACE_TO_DIMSUM(theme.space.m));\n  return (\n    <StyledContainer\n      cols={cols}\n      height={theme.space.m}\n      width=\"100%\"\n      pl={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}\n      pr={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}\n      gutter=\"xs\"\n      data-testid={`${dataTestid}--${value}`}\n    >\n      {leftAddon && (\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          {leftAddon}\n        </Grid>\n      )}\n      <Grid alignItems=\"center\">\n        <StyledTitle>{title}</StyledTitle>\n      </Grid>\n      {rightAddon && (\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          {rightAddon}\n        </Grid>\n      )}\n    </StyledContainer>\n  );\n};\n\nconst DSMobileListItem = withTheme(MobileListItem);\n\nconst listItemProps = {\n  leftAddon: PropTypes.element.description('Element placed at the left'),\n  rightAddon: PropTypes.element.description('Element placed at the right'),\n  title: PropTypes.string.description('Item s title').isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'Item s value, used for data-testid attr',\n  ),\n  dataTestid: PropTypes.string.description('ID used for testing').defaultValue('mobile-list-item'),\n  theme: PropTypes.object.description(''),\n};\n\nMobileListItem.propTypes = listItemProps;\nMobileListItem.displayName = 'MobileListItem';\nconst ListItemWithSchema = describe(MobileListItem);\nListItemWithSchema.propTypes = listItemProps;\n\nexport { DSMobileListItem, ListItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAoC;AACpC,uBAAuB;AACvB,qBAAqB;AACrB,wBAAsE;AAEtE,MAAM,kBAAkB,6BAAO,mBAAI;AAAA,gBACnB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,mBACnC,CAAC,UAAU,8BAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAEtE,MAAM,cAAc,wBAAO;AAAA,iBACV,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,WAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,IAC7C,gCAAS;AAAA;AAGb,MAAM,iBAAiB,CAAC;AAAA,EACtB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,aAAa;AAAA,EACb;AAAA,MACI;AACJ,QAAM,OAAO,CAAC,CAAC;AACf,MAAI;AAAW,SAAK,QAAQ,gDAAyB,MAAM,MAAM,CAAC,CAAC;AACnE,MAAI;AAAY,SAAK,KAAK,gDAAyB,MAAM,MAAM,CAAC,CAAC;AACjE,SACE,mDAAC;AAAA,IACC;AAAA,IACA,QAAQ,MAAM,MAAM;AAAA,IACpB,OAAM;AAAA,IACN,IAAI,gDAAyB,MAAM,MAAM,CAAC;AAAA,IAC1C,IAAI,gDAAyB,MAAM,MAAM,CAAC;AAAA,IAC1C,QAAO;AAAA,IACP,eAAa,GAAG,eAAe;AAAA,KAE9B,aACC,mDAAC;AAAA,IAAK,YAAW;AAAA,IAAS,gBAAe;AAAA,KACtC,SACH,GAEF,mDAAC;AAAA,IAAK,YAAW;AAAA,KACf,mDAAC,mBAAa,KAAM,CACtB,GACC,cACC,mDAAC;AAAA,IAAK,YAAW;AAAA,IAAS,gBAAe;AAAA,KACtC,UACH,CAEJ;AAEJ;AAEA,MAAM,mBAAmB,iCAAU,cAAc;AAEjD,MAAM,gBAAgB;AAAA,EACpB,WAAW,8BAAU,QAAQ,YAAY,4BAA4B;AAAA,EACrE,YAAY,8BAAU,QAAQ,YAAY,6BAA6B;AAAA,EACvE,OAAO,8BAAU,OAAO,YAAY,cAAc,EAAE;AAAA,EACpD,OAAO,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAC/D,yCACF;AAAA,EACA,YAAY,8BAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,kBAAkB;AAAA,EAC/F,OAAO,8BAAU,OAAO,YAAY,EAAE;AACxC;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,qBAAqB,kCAAS,cAAc;AAClD,mBAAmB,YAAY;",
   "names": []
 }

package/dist/cjs/MobilePageHeader/MobilePageHeader.js

@@ -26,39 +26,39 @@ __export(MobilePageHeader_exports, {
 module.exports = __toCommonJS(MobilePageHeader_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-var import_styled_components = __toESM(require("styled-components"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_system = require("@elliemae/ds-system");
 var import_ds_truncated_expandable_text = require("@elliemae/ds-truncated-expandable-text");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_ds_system = require("@elliemae/ds-system");
+var import_ds_system2 = require("@elliemae/ds-system");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_button = __toESM(require("@elliemae/ds-button"));
 var import_MobileSeparator = __toESM(require("../MobileSeparator"));
-const StyledTitle = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const StyledTitle = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   font-size: 22px;
   font-weight: ${(props) => props.theme.fontWeights.regular};
   color: ${(props) => props.theme.colors.neutral["700"]};
   min-height: ${(props) => props.withBreadcrumb ? "auto" : "44px"};
   padding-top: ${(props) => props.withBreadcrumb ? "0" : "6px"};
 `;
-const StyledBreadCrumb = import_styled_components.default.div`
+const StyledBreadCrumb = import_ds_system.styled.div`
   font-size: 16px;
   font-weight: ${(props) => props.theme.fontWeights.regular};
   color: ${(props) => props.theme.colors.neutral["600"]};
-  ${(0, import_ds_system.truncate)()}
+  ${(0, import_ds_system2.truncate)()}
 `;
-const Label = import_styled_components.default.div`
+const Label = import_ds_system.styled.div`
   color: ${(props) => props.theme.colors.neutral["500"]};
-  ${(0, import_ds_system.truncate)()}
+  ${(0, import_ds_system2.truncate)()}
 `;
-const Value = import_styled_components.default.div`
-  ${(0, import_ds_system.truncate)()}
+const Value = import_ds_system.styled.div`
+  ${(0, import_ds_system2.truncate)()}
   color: ${(props) => props.theme.colors.neutral["600"]};
   ${(props) => props.withMarginRight ? `margin-right: 4px;` : ""}
   margin-top: ${(props) => props.withBreadcrumb ? "12px" : "0"};
 `;
-const Wrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  border-bottom: ${(props) => (0, import_ds_system.border)(props.theme.colors.neutral["300"])};
+const Wrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  border-bottom: ${(props) => (0, import_ds_system2.border)(props.theme.colors.neutral["300"])};
 `;
 const MobilePageHeader = ({
   pageTitle = null,
@@ -117,7 +117,7 @@ const MobilePageHeader = ({
   }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
     cols: backArrow ? ["auto", 1] : [1],
     alignItems: "flex-start",
-    pr: countActions === 0 && !hasValue && !label ? (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s) : 0
+    pr: countActions === 0 && !hasValue && !label ? (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s) : 0
   }, backArrow && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
     height: breadCrumb ? "56px" : "44px",
     alignItems: "center"
@@ -177,20 +177,20 @@ const MobilePageHeader = ({
   }, firstAction && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, firstAction), countActions === 2 && separator, secondAction && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, secondAction)));
 };
 const pageHeaderProps = {
-  pageTitle: import_react_desc.PropTypes.string.description("Page title").isRequired,
-  contextMenu: import_react_desc.PropTypes.element.description("Context Menu to open"),
-  onOpenContextMenu: import_react_desc.PropTypes.func.description("function called when context menu opens"),
-  firstAction: import_react_desc.PropTypes.element.description("Action Button"),
-  secondAction: import_react_desc.PropTypes.element.description("Action Button"),
-  backArrow: import_react_desc.PropTypes.element.description("Back Arrow Button"),
-  breadCrumb: import_react_desc.PropTypes.string.description("BreadCrumbs title"),
-  value: import_react_desc.PropTypes.number.description("Page summary value"),
-  label: import_react_desc.PropTypes.string.description("Page summary label"),
-  theme: import_react_desc.PropTypes.object.description("dimsum theme")
+  pageTitle: import_ds_utilities.PropTypes.string.description("Page title").isRequired,
+  contextMenu: import_ds_utilities.PropTypes.element.description("Context Menu to open"),
+  onOpenContextMenu: import_ds_utilities.PropTypes.func.description("function called when context menu opens"),
+  firstAction: import_ds_utilities.PropTypes.element.description("Action Button"),
+  secondAction: import_ds_utilities.PropTypes.element.description("Action Button"),
+  backArrow: import_ds_utilities.PropTypes.element.description("Back Arrow Button"),
+  breadCrumb: import_ds_utilities.PropTypes.string.description("BreadCrumbs title"),
+  value: import_ds_utilities.PropTypes.number.description("Page summary value"),
+  label: import_ds_utilities.PropTypes.string.description("Page summary label"),
+  theme: import_ds_utilities.PropTypes.object.description("dimsum theme")
 };
 MobilePageHeader.propTypes = pageHeaderProps;
 MobilePageHeader.displayName = "MobilePageHeader";
-const PageHeaderWithSchema = (0, import_react_desc.describe)(MobilePageHeader);
+const PageHeaderWithSchema = (0, import_ds_utilities.describe)(MobilePageHeader);
 PageHeaderWithSchema.propTypes = pageHeaderProps;
-const DSMobilePageHeader = (0, import_ds_system.withTheme)(MobilePageHeader);
+const DSMobilePageHeader = (0, import_ds_system2.withTheme)(MobilePageHeader);
 //# sourceMappingURL=MobilePageHeader.js.map

package/dist/cjs/MobilePageHeader/MobilePageHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MobilePageHeader/MobilePageHeader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable import/no-unresolved */\n/* eslint-disable no-plusplus */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useMemo, useState, useCallback } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport { TruncatedExpandableText } from '@elliemae/ds-truncated-expandable-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { border, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport MobileSeparator from '../MobileSeparator';\n\nconst StyledTitle = styled(Grid)`\n  font-size: 22px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  min-height: ${(props) => (props.withBreadcrumb ? 'auto' : '44px')};\n  padding-top: ${(props) => (props.withBreadcrumb ? '0' : '6px')};\n`;\n\nconst StyledBreadCrumb = styled.div`\n  font-size: 16px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['600']};\n  ${truncate()}\n`;\n\nconst Label = styled.div`\n  color: ${(props) => props.theme.colors.neutral['500']};\n  ${truncate()}\n`;\n\nconst Value = styled.div`\n  ${truncate()}\n  color: ${(props) => props.theme.colors.neutral['600']};\n  ${(props) => (props.withMarginRight ? `margin-right: 4px;` : '')}\n  margin-top: ${(props) => (props.withBreadcrumb ? '12px' : '0')};\n`;\n\nconst Wrapper = styled(Grid)`\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst MobilePageHeader = ({\n  pageTitle = null,\n  contextMenu = null,\n  firstAction = null,\n  secondAction = null,\n  backArrow = null,\n  breadCrumb = null,\n  onOpenContextMenu = () => null,\n  value,\n  label,\n  theme,\n}) => {\n  const hasValue = value === 0 || value;\n\n  const countActions = useMemo(() => {\n    let count = 0;\n    if (firstAction) count++;\n    if (secondAction) count++;\n    return count;\n  }, [firstAction, secondAction]);\n  const [open, setOpen] = useState();\n  const handleContext = useCallback(() => {\n    setOpen(!open);\n  }, [open]);\n\n  const separator = (\n    <Grid height=\"32px\" alignItems=\"center\">\n      <Grid height=\"24px\">\n        <MobileSeparator direction=\"vertical\" margin=\"xxs\" color={['neutral', '300']} />\n      </Grid>\n    </Grid>\n  );\n  const cols = [1, 'auto'];\n  const cols2 = ['auto'];\n  if (countActions) cols.push('auto');\n  if (hasValue) cols2.push('auto');\n  if (label) cols2.push('auto');\n\n  return (\n    <Wrapper\n      cols={cols}\n      pl={theme.space.xs}\n      pr={theme.space.xs}\n      alignItems=\"flex-start\"\n      width=\"100%\"\n      data-testid=\"page-header-wrapper\"\n    >\n      <Grid alignItems=\"flex-start\" justifyContent=\"flex-start\" cols={cols2}>\n        <Grid\n          cols={backArrow ? ['auto', 1] : [1]}\n          alignItems=\"flex-start\"\n          pr={countActions === 0 && !hasValue && !label ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.s) : 0}\n        >\n          {backArrow && (\n            <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\">\n              {backArrow}\n            </Grid>\n          )}\n          <Grid flexGrow={0} pt={!breadCrumb ? 0 : theme.space.xxs}>\n            <Grid cols={['auto', 'auto']} alignItems=\"flex-start\">\n              <Grid>\n                {breadCrumb && <StyledBreadCrumb data-testid=\"page-header-breadcrum\">{breadCrumb}</StyledBreadCrumb>}\n                <StyledTitle\n                  maxWidth=\"100%\"\n                  alignItems=\"flex-start\"\n                  withBreadcrumb={!!breadCrumb}\n                  data-testid=\"page-header-title\"\n                >\n                  <Grid pt={breadCrumb ? 0 : theme.space.xxxs}>\n                    <TruncatedExpandableText value={pageTitle} />\n                  </Grid>\n                </StyledTitle>\n              </Grid>\n              {contextMenu && (\n                <Grid alignItems=\"center\" mt={breadCrumb ? '20px' : '8px'}>\n                  <DSButton\n                    buttonType=\"text\"\n                    icon={<ChevronSmallDown />}\n                    size=\"s\"\n                    onClick={() => {\n                      handleContext();\n                      onOpenContextMenu();\n                    }}\n                    containerProps={{ 'data-testid': 'trigger-context-menu' }}\n                  />\n                  {React.cloneElement(contextMenu, {\n                    open: contextMenu.props.open !== undefined ? contextMenu.props.open : open,\n                    onChange: (event, item) => {\n                      if (contextMenu.props.onChange) contextMenu.props.onChange(event, item);\n                      handleContext();\n                    },\n                  })}\n                </Grid>\n              )}\n            </Grid>\n          </Grid>\n        </Grid>\n        {hasValue && (\n          <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\" cols={['auto', 'auto']}>\n            {separator}\n            <Value withMarginRight={!!label} data-testid=\"page-header-value\">\n              {value}\n            </Value>\n          </Grid>\n        )}\n        {label && (\n          <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\">\n            <Label withBreadcrumb={!!breadCrumb} data-testid=\"page-header-label\">\n              {label}\n            </Label>\n          </Grid>\n        )}\n      </Grid>\n      {countActions > 0 && (\n        <Grid\n          height={breadCrumb ? '56px' : '44px'}\n          alignItems=\"center\"\n          cols={countActions === 1 ? ['auto'] : ['auto', 'auto', 'auto']}\n        >\n          {firstAction && <Grid>{firstAction}</Grid>}\n          {countActions === 2 && separator}\n          {secondAction && <Grid>{secondAction}</Grid>}\n        </Grid>\n      )}\n    </Wrapper>\n  );\n};\n\nconst pageHeaderProps = {\n  pageTitle: PropTypes.string.description('Page title').isRequired,\n  contextMenu: PropTypes.element.description('Context Menu to open'),\n  onOpenContextMenu: PropTypes.func.description('function called when context menu opens'),\n  firstAction: PropTypes.element.description('Action Button'),\n  secondAction: PropTypes.element.description('Action Button'),\n  backArrow: PropTypes.element.description('Back Arrow Button'),\n  breadCrumb: PropTypes.string.description('BreadCrumbs title'),\n  value: PropTypes.number.description('Page summary value'),\n  label: PropTypes.string.description('Page summary label'),\n  theme: PropTypes.object.description('dimsum theme'),\n};\n\nMobilePageHeader.propTypes = pageHeaderProps;\nMobilePageHeader.displayName = 'MobilePageHeader';\nconst PageHeaderWithSchema = describe(MobilePageHeader);\nPageHeaderWithSchema.propTypes = pageHeaderProps;\n\nconst DSMobilePageHeader = withTheme(MobilePageHeader);\n\nexport { DSMobilePageHeader, PageHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable import/no-unresolved */\n/* eslint-disable no-plusplus */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useMemo, useState, useCallback } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { TruncatedExpandableText } from '@elliemae/ds-truncated-expandable-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { border, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport MobileSeparator from '../MobileSeparator';\n\nconst StyledTitle = styled(Grid)`\n  font-size: 22px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  min-height: ${(props) => (props.withBreadcrumb ? 'auto' : '44px')};\n  padding-top: ${(props) => (props.withBreadcrumb ? '0' : '6px')};\n`;\n\nconst StyledBreadCrumb = styled.div`\n  font-size: 16px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['600']};\n  ${truncate()}\n`;\n\nconst Label = styled.div`\n  color: ${(props) => props.theme.colors.neutral['500']};\n  ${truncate()}\n`;\n\nconst Value = styled.div`\n  ${truncate()}\n  color: ${(props) => props.theme.colors.neutral['600']};\n  ${(props) => (props.withMarginRight ? `margin-right: 4px;` : '')}\n  margin-top: ${(props) => (props.withBreadcrumb ? '12px' : '0')};\n`;\n\nconst Wrapper = styled(Grid)`\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst MobilePageHeader = ({\n  pageTitle = null,\n  contextMenu = null,\n  firstAction = null,\n  secondAction = null,\n  backArrow = null,\n  breadCrumb = null,\n  onOpenContextMenu = () => null,\n  value,\n  label,\n  theme,\n}) => {\n  const hasValue = value === 0 || value;\n\n  const countActions = useMemo(() => {\n    let count = 0;\n    if (firstAction) count++;\n    if (secondAction) count++;\n    return count;\n  }, [firstAction, secondAction]);\n  const [open, setOpen] = useState();\n  const handleContext = useCallback(() => {\n    setOpen(!open);\n  }, [open]);\n\n  const separator = (\n    <Grid height=\"32px\" alignItems=\"center\">\n      <Grid height=\"24px\">\n        <MobileSeparator direction=\"vertical\" margin=\"xxs\" color={['neutral', '300']} />\n      </Grid>\n    </Grid>\n  );\n  const cols = [1, 'auto'];\n  const cols2 = ['auto'];\n  if (countActions) cols.push('auto');\n  if (hasValue) cols2.push('auto');\n  if (label) cols2.push('auto');\n\n  return (\n    <Wrapper\n      cols={cols}\n      pl={theme.space.xs}\n      pr={theme.space.xs}\n      alignItems=\"flex-start\"\n      width=\"100%\"\n      data-testid=\"page-header-wrapper\"\n    >\n      <Grid alignItems=\"flex-start\" justifyContent=\"flex-start\" cols={cols2}>\n        <Grid\n          cols={backArrow ? ['auto', 1] : [1]}\n          alignItems=\"flex-start\"\n          pr={countActions === 0 && !hasValue && !label ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.s) : 0}\n        >\n          {backArrow && (\n            <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\">\n              {backArrow}\n            </Grid>\n          )}\n          <Grid flexGrow={0} pt={!breadCrumb ? 0 : theme.space.xxs}>\n            <Grid cols={['auto', 'auto']} alignItems=\"flex-start\">\n              <Grid>\n                {breadCrumb && <StyledBreadCrumb data-testid=\"page-header-breadcrum\">{breadCrumb}</StyledBreadCrumb>}\n                <StyledTitle\n                  maxWidth=\"100%\"\n                  alignItems=\"flex-start\"\n                  withBreadcrumb={!!breadCrumb}\n                  data-testid=\"page-header-title\"\n                >\n                  <Grid pt={breadCrumb ? 0 : theme.space.xxxs}>\n                    <TruncatedExpandableText value={pageTitle} />\n                  </Grid>\n                </StyledTitle>\n              </Grid>\n              {contextMenu && (\n                <Grid alignItems=\"center\" mt={breadCrumb ? '20px' : '8px'}>\n                  <DSButton\n                    buttonType=\"text\"\n                    icon={<ChevronSmallDown />}\n                    size=\"s\"\n                    onClick={() => {\n                      handleContext();\n                      onOpenContextMenu();\n                    }}\n                    containerProps={{ 'data-testid': 'trigger-context-menu' }}\n                  />\n                  {React.cloneElement(contextMenu, {\n                    open: contextMenu.props.open !== undefined ? contextMenu.props.open : open,\n                    onChange: (event, item) => {\n                      if (contextMenu.props.onChange) contextMenu.props.onChange(event, item);\n                      handleContext();\n                    },\n                  })}\n                </Grid>\n              )}\n            </Grid>\n          </Grid>\n        </Grid>\n        {hasValue && (\n          <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\" cols={['auto', 'auto']}>\n            {separator}\n            <Value withMarginRight={!!label} data-testid=\"page-header-value\">\n              {value}\n            </Value>\n          </Grid>\n        )}\n        {label && (\n          <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\">\n            <Label withBreadcrumb={!!breadCrumb} data-testid=\"page-header-label\">\n              {label}\n            </Label>\n          </Grid>\n        )}\n      </Grid>\n      {countActions > 0 && (\n        <Grid\n          height={breadCrumb ? '56px' : '44px'}\n          alignItems=\"center\"\n          cols={countActions === 1 ? ['auto'] : ['auto', 'auto', 'auto']}\n        >\n          {firstAction && <Grid>{firstAction}</Grid>}\n          {countActions === 2 && separator}\n          {secondAction && <Grid>{secondAction}</Grid>}\n        </Grid>\n      )}\n    </Wrapper>\n  );\n};\n\nconst pageHeaderProps = {\n  pageTitle: PropTypes.string.description('Page title').isRequired,\n  contextMenu: PropTypes.element.description('Context Menu to open'),\n  onOpenContextMenu: PropTypes.func.description('function called when context menu opens'),\n  firstAction: PropTypes.element.description('Action Button'),\n  secondAction: PropTypes.element.description('Action Button'),\n  backArrow: PropTypes.element.description('Back Arrow Button'),\n  breadCrumb: PropTypes.string.description('BreadCrumbs title'),\n  value: PropTypes.number.description('Page summary value'),\n  label: PropTypes.string.description('Page summary label'),\n  theme: PropTypes.object.description('dimsum theme'),\n};\n\nMobilePageHeader.propTypes = pageHeaderProps;\nMobilePageHeader.displayName = 'MobilePageHeader';\nconst PageHeaderWithSchema = describe(MobilePageHeader);\nPageHeaderWithSchema.propTypes = pageHeaderProps;\n\nconst DSMobilePageHeader = withTheme(MobilePageHeader);\n\nexport { DSMobilePageHeader, PageHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/MobileSelectList/styled.js

@@ -32,14 +32,14 @@ module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_lodash = require("lodash");
-var import_styled_components = __toESM(require("styled-components"));
+var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_form = require("@elliemae/ds-form");
 var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_system = require("@elliemae/ds-system");
+var import_ds_system2 = require("@elliemae/ds-system");
 var import_MobileTouchable = require("../MobileTouchable");
 var import_MobileListItem = require("../MobileListItem");
-const StyledContainer = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const StyledContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   background: ${(props) => props.theme.colors.neutral["000"]};
   z-index: ${(props) => props.zIndex};
   position: fixed;
@@ -49,13 +49,13 @@ const StyledContainer = (0, import_styled_components.default)(import_ds_grid.Gri
   right: 0;
   height: 100%;
 `;
-const HeaderContainer = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  border-bottom: ${(props) => (0, import_ds_system.border)(props.theme.colors.neutral["300"])};
+const HeaderContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  border-bottom: ${(props) => (0, import_ds_system2.border)(props.theme.colors.neutral["300"])};
 `;
-const Footer = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  border-top: ${(props) => (0, import_ds_system.border)(props.theme.colors.neutral["300"])};
+const Footer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  border-top: ${(props) => (0, import_ds_system2.border)(props.theme.colors.neutral["300"])};
 `;
-const ListContainer = import_styled_components.default.div`
+const ListContainer = import_ds_system.styled.div`
   & ${import_MobileTouchable.DSMobileTouchable}:last-child ${import_MobileListItem.DSMobileListItem} {
     border: none;
   }

package/dist/cjs/MobileSelectList/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MobileSelectList/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { noop } from 'lodash';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { border } from '@elliemae/ds-system';\nimport { DSMobileTouchable } from '../MobileTouchable';\nimport { DSMobileListItem } from '../MobileListItem';\n\nexport const StyledContainer = styled(Grid)`\n  background: ${(props) => props.theme.colors.neutral['000']};\n  z-index: ${(props) => props.zIndex};\n  position: fixed;\n  width: 100%;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n`;\n\nexport const HeaderContainer = styled(Grid)`\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nexport const Footer = styled(Grid)`\n  border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nexport const ListContainer = styled.div`\n  & ${DSMobileTouchable}:last-child ${DSMobileListItem} {\n    border: none;\n  }\n`;\n\nexport const checkbox = <DSCheckbox checked={false} onChange={noop} style={{ pointerEvents: 'none' }} />;\nexport const checked = <DSCheckbox checked onChange={noop} style={{ pointerEvents: 'none' }} />;\nexport const selectedMark = <Checkmark color={['brand-primary', 600]} />;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAAqB;AACrB,+BAAmB;AACnB,qBAAqB;AACrB,qBAA2B;AAC3B,sBAA0B;AAC1B,uBAAuB;AACvB,6BAAkC;AAClC,4BAAiC;AAE1B,MAAM,kBAAkB,sCAAO,mBAAI;AAAA,gBAC1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,aACzC,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB,MAAM,kBAAkB,sCAAO,mBAAI;AAAA,mBACvB,CAAC,UAAU,6BAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAG/D,MAAM,SAAS,sCAAO,mBAAI;AAAA,gBACjB,CAAC,UAAU,6BAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAG5D,MAAM,gBAAgB,iCAAO;AAAA,MAC9B,uDAAgC;AAAA;AAAA;AAAA;AAK/B,MAAM,WAAW,mDAAC;AAAA,EAAW,SAAS;AAAA,EAAO,UAAU;AAAA,EAAM,OAAO,EAAE,eAAe,OAAO;AAAA,CAAG;AAC/F,MAAM,UAAU,mDAAC;AAAA,EAAW,SAAO;AAAA,EAAC,UAAU;AAAA,EAAM,OAAO,EAAE,eAAe,OAAO;AAAA,CAAG;AACtF,MAAM,eAAe,mDAAC;AAAA,EAAU,OAAO,CAAC,iBAAiB,GAAG;AAAA,CAAG;",
+  "sourcesContent": ["import React from 'react';\nimport { noop } from 'lodash';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { border } from '@elliemae/ds-system';\nimport { DSMobileTouchable } from '../MobileTouchable';\nimport { DSMobileListItem } from '../MobileListItem';\n\nexport const StyledContainer = styled(Grid)`\n  background: ${(props) => props.theme.colors.neutral['000']};\n  z-index: ${(props) => props.zIndex};\n  position: fixed;\n  width: 100%;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n`;\n\nexport const HeaderContainer = styled(Grid)`\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nexport const Footer = styled(Grid)`\n  border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nexport const ListContainer = styled.div`\n  & ${DSMobileTouchable}:last-child ${DSMobileListItem} {\n    border: none;\n  }\n`;\n\nexport const checkbox = <DSCheckbox checked={false} onChange={noop} style={{ pointerEvents: 'none' }} />;\nexport const checked = <DSCheckbox checked onChange={noop} style={{ pointerEvents: 'none' }} />;\nexport const selectedMark = <Checkmark color={['brand-primary', 600]} />;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAAqB;AACrB,uBAAuB;AACvB,qBAAqB;AACrB,qBAA2B;AAC3B,sBAA0B;AAC1B,wBAAuB;AACvB,6BAAkC;AAClC,4BAAiC;AAE1B,MAAM,kBAAkB,6BAAO,mBAAI;AAAA,gBAC1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,aACzC,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB,MAAM,kBAAkB,6BAAO,mBAAI;AAAA,mBACvB,CAAC,UAAU,8BAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAG/D,MAAM,SAAS,6BAAO,mBAAI;AAAA,gBACjB,CAAC,UAAU,8BAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAG5D,MAAM,gBAAgB,wBAAO;AAAA,MAC9B,uDAAgC;AAAA;AAAA;AAAA;AAK/B,MAAM,WAAW,mDAAC;AAAA,EAAW,SAAS;AAAA,EAAO,UAAU;AAAA,EAAM,OAAO,EAAE,eAAe,OAAO;AAAA,CAAG;AAC/F,MAAM,UAAU,mDAAC;AAAA,EAAW,SAAO;AAAA,EAAC,UAAU;AAAA,EAAM,OAAO,EAAE,eAAe,OAAO;AAAA,CAAG;AACtF,MAAM,eAAe,mDAAC;AAAA,EAAU,OAAO,CAAC,iBAAiB,GAAG;AAAA,CAAG;",
   "names": []
 }

package/dist/cjs/MobileSeparator/Separator.js

@@ -40,10 +40,10 @@ __export(Separator_exports, {
 module.exports = __toCommonJS(Separator_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-var import_styled_components = __toESM(require("styled-components"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
-const Separator = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const Separator = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   border-top: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};
   border-left: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};
 `;
@@ -61,14 +61,14 @@ const MobileSeparator = ({ color = ["neutral", "800"], direction = "horizontal",
   return /* @__PURE__ */ import_react.default.createElement(Separator, __spreadValues({}, styles));
 };
 const mobileSeparatorProps = {
-  type: import_react_desc.PropTypes.oneOf(["solid", "dashed"]).description("Style type of separator").defaultValue("solid"),
-  direction: import_react_desc.PropTypes.oneOf(["vertical", "horizontal"]).description("Direction of the separator").defaultValue("horizontal"),
-  color: import_react_desc.PropTypes.array.description("Color of the separator").defaultValue(["neutral", "800"]),
-  margin: import_react_desc.PropTypes.oneOf(["xxs", "xs", "s", "m", "l", "xl", "xxl"]).description("Margin of the separator").defaultValue("xs")
+  type: import_ds_utilities.PropTypes.oneOf(["solid", "dashed"]).description("Style type of separator").defaultValue("solid"),
+  direction: import_ds_utilities.PropTypes.oneOf(["vertical", "horizontal"]).description("Direction of the separator").defaultValue("horizontal"),
+  color: import_ds_utilities.PropTypes.array.description("Color of the separator").defaultValue(["neutral", "800"]),
+  margin: import_ds_utilities.PropTypes.oneOf(["xxs", "xs", "s", "m", "l", "xl", "xxl"]).description("Margin of the separator").defaultValue("xs")
 };
 MobileSeparator.propTypes = mobileSeparatorProps;
 MobileSeparator.displayName = "MobileSeparator";
-const MobileSeparatorWithSchema = (0, import_react_desc.describe)(MobileSeparator);
+const MobileSeparatorWithSchema = (0, import_ds_utilities.describe)(MobileSeparator);
 MobileSeparatorWithSchema.propTypes = mobileSeparatorProps;
 var Separator_default = MobileSeparator;
 //# sourceMappingURL=Separator.js.map

package/dist/cjs/MobileSeparator/Separator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MobileSeparator/Separator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst Separator = styled(Grid)`\n  border-top: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};\n  border-left: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};\n`;\n\nconst MobileSeparator = ({ color = ['neutral', '800'], direction = 'horizontal', type = 'solid', margin = 'xs' }) => {\n  const orientation = direction === 'vertical' ? 'height' : 'width';\n  const xORy = direction === 'vertical' ? 'mx' : 'my';\n  const styles = {\n    width: 0,\n    height: 0,\n    [orientation]: '100%',\n    [xORy]: margin,\n    borderType: type,\n    color,\n  };\n  return <Separator {...styles} />;\n};\n\nconst mobileSeparatorProps = {\n  type: PropTypes.oneOf(['solid', 'dashed']).description('Style type of separator').defaultValue('solid'),\n  direction: PropTypes.oneOf(['vertical', 'horizontal'])\n    .description('Direction of the separator')\n    .defaultValue('horizontal'),\n  color: PropTypes.array.description('Color of the separator').defaultValue(['neutral', '800']),\n  margin: PropTypes.oneOf(['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'])\n    .description('Margin of the separator')\n    .defaultValue('xs'),\n};\n\nMobileSeparator.propTypes = mobileSeparatorProps;\nMobileSeparator.displayName = 'MobileSeparator';\nconst MobileSeparatorWithSchema = describe(MobileSeparator);\nMobileSeparatorWithSchema.propTypes = mobileSeparatorProps;\n\nexport { MobileSeparatorWithSchema };\nexport default MobileSeparator;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAoC;AACpC,+BAAmB;AACnB,qBAAqB;AAErB,MAAM,YAAY,sCAAO,mBAAI;AAAA,gBACb,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA,iBAC5E,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA;AAG9F,MAAM,kBAAkB,CAAC,EAAE,QAAQ,CAAC,WAAW,KAAK,GAAG,YAAY,cAAc,OAAO,SAAS,SAAS,WAAW;AACnH,QAAM,cAAc,cAAc,aAAa,WAAW;AAC1D,QAAM,OAAO,cAAc,aAAa,OAAO;AAC/C,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,KACP,cAAc;AAAA,KACd,OAAO;AAAA,IACR,YAAY;AAAA,IACZ;AAAA,EACF;AACA,SAAO,mDAAC,8BAAc,OAAQ;AAChC;AAEA,MAAM,uBAAuB;AAAA,EAC3B,MAAM,4BAAU,MAAM,CAAC,SAAS,QAAQ,CAAC,EAAE,YAAY,yBAAyB,EAAE,aAAa,OAAO;AAAA,EACtG,WAAW,4BAAU,MAAM,CAAC,YAAY,YAAY,CAAC,EAClD,YAAY,4BAA4B,EACxC,aAAa,YAAY;AAAA,EAC5B,OAAO,4BAAU,MAAM,YAAY,wBAAwB,EAAE,aAAa,CAAC,WAAW,KAAK,CAAC;AAAA,EAC5F,QAAQ,4BAAU,MAAM,CAAC,OAAO,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAC9D,YAAY,yBAAyB,EACrC,aAAa,IAAI;AACtB;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,gCAAS,eAAe;AAC1D,0BAA0B,YAAY;AAGtC,IAAO,oBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst Separator = styled(Grid)`\n  border-top: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};\n  border-left: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};\n`;\n\nconst MobileSeparator = ({ color = ['neutral', '800'], direction = 'horizontal', type = 'solid', margin = 'xs' }) => {\n  const orientation = direction === 'vertical' ? 'height' : 'width';\n  const xORy = direction === 'vertical' ? 'mx' : 'my';\n  const styles = {\n    width: 0,\n    height: 0,\n    [orientation]: '100%',\n    [xORy]: margin,\n    borderType: type,\n    color,\n  };\n  return <Separator {...styles} />;\n};\n\nconst mobileSeparatorProps = {\n  type: PropTypes.oneOf(['solid', 'dashed']).description('Style type of separator').defaultValue('solid'),\n  direction: PropTypes.oneOf(['vertical', 'horizontal'])\n    .description('Direction of the separator')\n    .defaultValue('horizontal'),\n  color: PropTypes.array.description('Color of the separator').defaultValue(['neutral', '800']),\n  margin: PropTypes.oneOf(['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'])\n    .description('Margin of the separator')\n    .defaultValue('xs'),\n};\n\nMobileSeparator.propTypes = mobileSeparatorProps;\nMobileSeparator.displayName = 'MobileSeparator';\nconst MobileSeparatorWithSchema = describe(MobileSeparator);\nMobileSeparatorWithSchema.propTypes = mobileSeparatorProps;\n\nexport { MobileSeparatorWithSchema };\nexport default MobileSeparator;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAoC;AACpC,uBAAuB;AACvB,qBAAqB;AAErB,MAAM,YAAY,6BAAO,mBAAI;AAAA,gBACb,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA,iBAC5E,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA;AAG9F,MAAM,kBAAkB,CAAC,EAAE,QAAQ,CAAC,WAAW,KAAK,GAAG,YAAY,cAAc,OAAO,SAAS,SAAS,WAAW;AACnH,QAAM,cAAc,cAAc,aAAa,WAAW;AAC1D,QAAM,OAAO,cAAc,aAAa,OAAO;AAC/C,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,KACP,cAAc;AAAA,KACd,OAAO;AAAA,IACR,YAAY;AAAA,IACZ;AAAA,EACF;AACA,SAAO,mDAAC,8BAAc,OAAQ;AAChC;AAEA,MAAM,uBAAuB;AAAA,EAC3B,MAAM,8BAAU,MAAM,CAAC,SAAS,QAAQ,CAAC,EAAE,YAAY,yBAAyB,EAAE,aAAa,OAAO;AAAA,EACtG,WAAW,8BAAU,MAAM,CAAC,YAAY,YAAY,CAAC,EAClD,YAAY,4BAA4B,EACxC,aAAa,YAAY;AAAA,EAC5B,OAAO,8BAAU,MAAM,YAAY,wBAAwB,EAAE,aAAa,CAAC,WAAW,KAAK,CAAC;AAAA,EAC5F,QAAQ,8BAAU,MAAM,CAAC,OAAO,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAC9D,YAAY,yBAAyB,EACrC,aAAa,IAAI;AACtB;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,kCAAS,eAAe;AAC1D,0BAA0B,YAAY;AAGtC,IAAO,oBAAQ;",
   "names": []
 }

package/dist/cjs/MobileTimePicker/Input.js

@@ -52,8 +52,8 @@ module.exports = __toCommonJS(Input_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_styled_components = __toESM(require("styled-components"));
-const StyledInput = import_styled_components.default.input`
+var import_ds_system2 = require("@elliemae/ds-system");
+const StyledInput = import_ds_system2.styled.input`
   input[type=time]& {   
     -webkit-appearance: none;
     -moz-appearance: none;

package/dist/cjs/MobileTimePicker/Input.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MobileTimePicker/Input.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { focus, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport styled from 'styled-components';\n\nconst StyledInput = styled.input`\n  input[type=time]& {   \n    -webkit-appearance: none;\n    -moz-appearance: none;\n    -webkit-tap-highlight-color: transparent;\n    appearance: none;\n    color: transparent;\n\n    white-space: nowrap;\n    position: relative;\n    height: ${props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.l)};\n    width: 100%;\n    max-width: calc(100% - 32px);\n    outline: none;\n    box-sizing: border-box;\n    display: flex;\n    background: ${props => props.theme.colors.neutral['000']};\n    padding: 0 ${props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n    z-index: 1;\n    border-radius: 2px;\n    border: solid 1px ${props => props.theme.colors.neutral[200]};\n  }\n\n  input[type=time]&:active, input[type=time]&:focus {\n    ${props => focus(props.theme.colors.brand[700])}\n  }\n\n  &:before {\n    color: ${props =>\n      props.value === ''\n        ? props.theme.colors.neutral['500']\n        : props.theme.colors.neutral['800']};\n    content: '${props =>\n      props.value === '' ? props.placeholder : props['data-displayvalue']}';\n  }\n\n  input[type=time]&::-webkit-datetime-edit, input[type=time]&::-webkit-inner-spin-button, input[type=time]&::-webkit-clear-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n`;\n\nexport const Input = ({ innerRef, ...props }) => (\n  <StyledInput ref={innerRef} {...props} />\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,uBAAgD;AAChD,+BAAmB;AAEnB,MAAM,cAAc,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAUb,WAAS,+CAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMjD,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA,iBACrC,WAAS,+CAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA,wBAG/C,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,MAItD,WAAS,4BAAM,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA,aAIrC,WACP,MAAM,UAAU,KACZ,MAAM,MAAM,OAAO,QAAQ,SAC3B,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACrB,WACV,MAAM,UAAU,KAAK,MAAM,cAAc,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS9C,MAAM,QAAQ,CAAC,OAAwB;AAAxB,eAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AACtB,4DAAC;AAAA,IAAY,KAAK;AAAA,KAAc,MAAO;AAAA;",
+  "sourcesContent": ["import React from 'react';\nimport { focus, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { styled } from '@elliemae/ds-system';\n\nconst StyledInput = styled.input`\n  input[type=time]& {   \n    -webkit-appearance: none;\n    -moz-appearance: none;\n    -webkit-tap-highlight-color: transparent;\n    appearance: none;\n    color: transparent;\n\n    white-space: nowrap;\n    position: relative;\n    height: ${props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.l)};\n    width: 100%;\n    max-width: calc(100% - 32px);\n    outline: none;\n    box-sizing: border-box;\n    display: flex;\n    background: ${props => props.theme.colors.neutral['000']};\n    padding: 0 ${props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n    z-index: 1;\n    border-radius: 2px;\n    border: solid 1px ${props => props.theme.colors.neutral[200]};\n  }\n\n  input[type=time]&:active, input[type=time]&:focus {\n    ${props => focus(props.theme.colors.brand[700])}\n  }\n\n  &:before {\n    color: ${props =>\n      props.value === ''\n        ? props.theme.colors.neutral['500']\n        : props.theme.colors.neutral['800']};\n    content: '${props =>\n      props.value === '' ? props.placeholder : props['data-displayvalue']}';\n  }\n\n  input[type=time]&::-webkit-datetime-edit, input[type=time]&::-webkit-inner-spin-button, input[type=time]&::-webkit-clear-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n`;\n\nexport const Input = ({ innerRef, ...props }) => (\n  <StyledInput ref={innerRef} {...props} />\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,uBAAgD;AAChD,wBAAuB;AAEvB,MAAM,cAAc,yBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAUb,WAAS,+CAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMjD,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA,iBACrC,WAAS,+CAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA,wBAG/C,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,MAItD,WAAS,4BAAM,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA,aAIrC,WACP,MAAM,UAAU,KACZ,MAAM,MAAM,OAAO,QAAQ,SAC3B,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACrB,WACV,MAAM,UAAU,KAAK,MAAM,cAAc,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS9C,MAAM,QAAQ,CAAC,OAAwB;AAAxB,eAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AACtB,4DAAC;AAAA,IAAY,KAAK;AAAA,KAAc,MAAO;AAAA;",
   "names": []
 }

package/dist/cjs/MobileTimePicker/MobileTimePicker.js

@@ -26,7 +26,7 @@ __export(MobileTimePicker_exports, {
 module.exports = __toCommonJS(MobileTimePicker_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_icon = require("@elliemae/ds-icon");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_button = __toESM(require("@elliemae/ds-button"));
@@ -87,14 +87,14 @@ DSMobileTimePicker.defaultProps = {
   value: ""
 };
 const pickerProps = {
-  disabled: import_react_desc.PropTypes.bool.description("disabled prop, defaults to false"),
-  tabIndex: import_react_desc.PropTypes.number.description("focus order HTML property, 0 as default"),
-  placeholder: import_react_desc.PropTypes.string.description("HH : MM am as default"),
-  onChange: import_react_desc.PropTypes.func.description("onChange handler, receives change event as first argument"),
-  value: import_react_desc.PropTypes.string.description("HH:MM string representing the time or empty string")
+  disabled: import_ds_utilities.PropTypes.bool.description("disabled prop, defaults to false"),
+  tabIndex: import_ds_utilities.PropTypes.number.description("focus order HTML property, 0 as default"),
+  placeholder: import_ds_utilities.PropTypes.string.description("HH : MM am as default"),
+  onChange: import_ds_utilities.PropTypes.func.description("onChange handler, receives change event as first argument"),
+  value: import_ds_utilities.PropTypes.string.description("HH:MM string representing the time or empty string")
 };
 DSMobileTimePicker.propTypes = pickerProps;
 DSMobileTimePicker.displayName = "DSMobileTimePicker";
-const DSMobileTimePickerWithSchema = (0, import_react_desc.describe)(DSMobileTimePicker).description("Time picker for mobile & tablet");
+const DSMobileTimePickerWithSchema = (0, import_ds_utilities.describe)(DSMobileTimePicker).description("Time picker for mobile & tablet");
 DSMobileTimePickerWithSchema.propTypes = pickerProps;
 //# sourceMappingURL=MobileTimePicker.js.map