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

package/dist/cjs/PageList/PageList.js

@@ -27,17 +27,17 @@ module.exports = __toCommonJS(PageList_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_prop_types = __toESM(require("prop-types"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_system = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_system2 = require("@elliemae/ds-system");
 var import_FullPageContainer = require("../FullPageContainer");
-const PageTitleWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const PageTitleWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   min-height: 44px;
 `;
-const DSMobilePageList = (0, import_ds_system.withTheme)(({ header = null, pageTitle = null, filterBar = null, body = null, footer = null, theme }) => {
-  const rows = ["auto", (0, import_ds_system.op)("*", (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xl), 0.83), 1];
+const DSMobilePageList = (0, import_ds_system2.withTheme)(({ header = null, pageTitle = null, filterBar = null, body = null, footer = null, theme }) => {
+  const rows = ["auto", (0, import_ds_system2.op)("*", (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xl), 0.83), 1];
   if (header)
-    rows.unshift((0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xxl));
+    rows.unshift((0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xxl));
   if (footer)
     rows.push("56px");
   return /* @__PURE__ */ import_react.default.createElement(import_FullPageContainer.DSFullPageContainer, {

package/dist/cjs/PageList/PageList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/PageList/PageList.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { op, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { DSFullPageContainer, DSFullPageContainerScroll } from '../FullPageContainer';\n\nconst PageTitleWrapper = styled(Grid)`\n  min-height: 44px;\n`;\n\nconst DSMobilePageList = withTheme(\n  ({ header = null, pageTitle = null, filterBar = null, body = null, footer = null, theme }) => {\n    const rows = ['auto', op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 0.83), 1];\n    if (header) rows.unshift(__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl));\n    if (footer) rows.push('56px');\n    return (\n      <DSFullPageContainer rows={rows}>\n        {header && <Grid>{header}</Grid>}\n        <PageTitleWrapper>{pageTitle}</PageTitleWrapper>\n        <Grid>{filterBar}</Grid>\n        <DSFullPageContainerScroll>{body}</DSFullPageContainerScroll>\n        {footer && <Grid>{footer}</Grid>}\n      </DSFullPageContainer>\n    );\n  },\n);\n\nDSMobilePageList.propTypes = {\n  header: PropTypes.element,\n  pageTitle: PropTypes.element,\n  filterBar: PropTypes.element,\n  body: PropTypes.element,\n  footer: PropTypes.element,\n};\n\nconst DSPageList = DSMobilePageList;\n\nexport { DSPageList, DSMobilePageList };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,+BAAmB;AACnB,qBAAqB;AACrB,uBAAwD;AACxD,+BAA+D;AAE/D,MAAM,mBAAmB,sCAAO,mBAAI;AAAA;AAAA;AAIpC,MAAM,mBAAmB,gCACvB,CAAC,EAAE,SAAS,MAAM,YAAY,MAAM,YAAY,MAAM,OAAO,MAAM,SAAS,MAAM,YAAY;AAC5F,QAAM,OAAO,CAAC,QAAQ,yBAAG,KAAK,+CAAyB,MAAM,MAAM,EAAE,GAAG,IAAI,GAAG,CAAC;AAChF,MAAI;AAAQ,SAAK,QAAQ,+CAAyB,MAAM,MAAM,GAAG,CAAC;AAClE,MAAI;AAAQ,SAAK,KAAK,MAAM;AAC5B,SACE,mDAAC;AAAA,IAAoB;AAAA,KAClB,UAAU,mDAAC,2BAAM,MAAO,GACzB,mDAAC,wBAAkB,SAAU,GAC7B,mDAAC,2BAAM,SAAU,GACjB,mDAAC,0DAA2B,IAAK,GAChC,UAAU,mDAAC,2BAAM,MAAO,CAC3B;AAEJ,CACF;AAEA,iBAAiB,YAAY;AAAA,EAC3B,QAAQ,0BAAU;AAAA,EAClB,WAAW,0BAAU;AAAA,EACrB,WAAW,0BAAU;AAAA,EACrB,MAAM,0BAAU;AAAA,EAChB,QAAQ,0BAAU;AACpB;AAEA,MAAM,aAAa;",
+  "sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { op, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { DSFullPageContainer, DSFullPageContainerScroll } from '../FullPageContainer';\n\nconst PageTitleWrapper = styled(Grid)`\n  min-height: 44px;\n`;\n\nconst DSMobilePageList = withTheme(\n  ({ header = null, pageTitle = null, filterBar = null, body = null, footer = null, theme }) => {\n    const rows = ['auto', op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 0.83), 1];\n    if (header) rows.unshift(__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl));\n    if (footer) rows.push('56px');\n    return (\n      <DSFullPageContainer rows={rows}>\n        {header && <Grid>{header}</Grid>}\n        <PageTitleWrapper>{pageTitle}</PageTitleWrapper>\n        <Grid>{filterBar}</Grid>\n        <DSFullPageContainerScroll>{body}</DSFullPageContainerScroll>\n        {footer && <Grid>{footer}</Grid>}\n      </DSFullPageContainer>\n    );\n  },\n);\n\nDSMobilePageList.propTypes = {\n  header: PropTypes.element,\n  pageTitle: PropTypes.element,\n  filterBar: PropTypes.element,\n  body: PropTypes.element,\n  footer: PropTypes.element,\n};\n\nconst DSPageList = DSMobilePageList;\n\nexport { DSPageList, DSMobilePageList };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,uBAAuB;AACvB,qBAAqB;AACrB,wBAAwD;AACxD,+BAA+D;AAE/D,MAAM,mBAAmB,6BAAO,mBAAI;AAAA;AAAA;AAIpC,MAAM,mBAAmB,iCACvB,CAAC,EAAE,SAAS,MAAM,YAAY,MAAM,YAAY,MAAM,OAAO,MAAM,SAAS,MAAM,YAAY;AAC5F,QAAM,OAAO,CAAC,QAAQ,0BAAG,KAAK,gDAAyB,MAAM,MAAM,EAAE,GAAG,IAAI,GAAG,CAAC;AAChF,MAAI;AAAQ,SAAK,QAAQ,gDAAyB,MAAM,MAAM,GAAG,CAAC;AAClE,MAAI;AAAQ,SAAK,KAAK,MAAM;AAC5B,SACE,mDAAC;AAAA,IAAoB;AAAA,KAClB,UAAU,mDAAC,2BAAM,MAAO,GACzB,mDAAC,wBAAkB,SAAU,GAC7B,mDAAC,2BAAM,SAAU,GACjB,mDAAC,0DAA2B,IAAK,GAChC,UAAU,mDAAC,2BAAM,MAAO,CAC3B;AAEJ,CACF;AAEA,iBAAiB,YAAY;AAAA,EAC3B,QAAQ,0BAAU;AAAA,EAClB,WAAW,0BAAU;AAAA,EACrB,WAAW,0BAAU;AAAA,EACrB,MAAM,0BAAU;AAAA,EAChB,QAAQ,0BAAU;AACpB;AAEA,MAAM,aAAa;",
   "names": []
 }

package/dist/cjs/PageSearch/PageSearch.js

@@ -27,15 +27,15 @@ module.exports = __toCommonJS(PageSearch_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_prop_types = __toESM(require("prop-types"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_system = require("@elliemae/ds-system");
-const Header = (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 Header = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   height: 100%;
   background: ${(props) => props.theme.colors.brand["600"]};
-  padding: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xxs)};
+  padding: ${(props) => (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xxs)};
 `;
-const DSMobilePageSearch = (0, import_ds_system.withTheme)(({
+const DSMobilePageSearch = (0, import_ds_system2.withTheme)(({
   HeaderContainer = Header,
   SearchContainer = Header,
   searchHeader = null,
@@ -44,8 +44,8 @@ const DSMobilePageSearch = (0, import_ds_system.withTheme)(({
   theme
 }) => {
   const rows = [
-    (0, import_ds_system.op)("*", (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.l), 0.81),
-    (0, import_ds_system.op)("*", (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.l), 1.62),
+    (0, import_ds_system2.op)("*", (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.l), 0.81),
+    (0, import_ds_system2.op)("*", (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.l), 1.62),
     1
   ];
   return /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {

package/dist/cjs/PageSearch/PageSearch.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/PageSearch/PageSearch.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { op, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\n\nconst Header = styled(Grid)`\n  height: 100%;\n  background: ${(props) => props.theme.colors.brand['600']};\n  padding: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n`;\n\nconst DSMobilePageSearch = withTheme(\n  ({\n    HeaderContainer = Header,\n    SearchContainer = Header,\n    searchHeader = null,\n    pageTitle = 'Search',\n    body = null,\n    theme,\n  }) => {\n    const rows = [\n      op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.l), 0.81),\n      op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.l), 1.62),\n      1,\n    ];\n    return (\n      <Grid rows={rows} height=\"100%\">\n        <Grid>\n          <HeaderContainer>{pageTitle}</HeaderContainer>\n        </Grid>\n        <Grid>\n          <SearchContainer>{searchHeader}</SearchContainer>\n        </Grid>\n        <Grid height=\"100%\" style={{ overflow: 'hidden' }}>\n          <Grid height=\"100%\" style={{ overflow: 'auto' }}>\n            {body}\n          </Grid>\n        </Grid>\n      </Grid>\n    );\n  },\n);\n\nDSMobilePageSearch.propTypes = {\n  header: PropTypes.element,\n  pageTitle: PropTypes.element,\n  filterBar: PropTypes.element,\n  body: PropTypes.element,\n  footer: PropTypes.element,\n};\n\nconst DSPageSearch = DSMobilePageSearch;\n\nexport { DSPageSearch, DSMobilePageSearch };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,+BAAmB;AACnB,qBAAqB;AACrB,uBAAwD;AAExD,MAAM,SAAS,sCAAO,mBAAI;AAAA;AAAA,gBAEV,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,aACvC,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAGtE,MAAM,qBAAqB,gCACzB,CAAC;AAAA,EACC,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,MACI;AACJ,QAAM,OAAO;AAAA,IACX,yBAAG,KAAK,+CAAyB,MAAM,MAAM,CAAC,GAAG,IAAI;AAAA,IACrD,yBAAG,KAAK,+CAAyB,MAAM,MAAM,CAAC,GAAG,IAAI;AAAA,IACrD;AAAA,EACF;AACA,SACE,mDAAC;AAAA,IAAK;AAAA,IAAY,QAAO;AAAA,KACvB,mDAAC,2BACC,mDAAC,uBAAiB,SAAU,CAC9B,GACA,mDAAC,2BACC,mDAAC,uBAAiB,YAAa,CACjC,GACA,mDAAC;AAAA,IAAK,QAAO;AAAA,IAAO,OAAO,EAAE,UAAU,SAAS;AAAA,KAC9C,mDAAC;AAAA,IAAK,QAAO;AAAA,IAAO,OAAO,EAAE,UAAU,OAAO;AAAA,KAC3C,IACH,CACF,CACF;AAEJ,CACF;AAEA,mBAAmB,YAAY;AAAA,EAC7B,QAAQ,0BAAU;AAAA,EAClB,WAAW,0BAAU;AAAA,EACrB,WAAW,0BAAU;AAAA,EACrB,MAAM,0BAAU;AAAA,EAChB,QAAQ,0BAAU;AACpB;AAEA,MAAM,eAAe;",
+  "sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { op, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\n\nconst Header = styled(Grid)`\n  height: 100%;\n  background: ${(props) => props.theme.colors.brand['600']};\n  padding: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n`;\n\nconst DSMobilePageSearch = withTheme(\n  ({\n    HeaderContainer = Header,\n    SearchContainer = Header,\n    searchHeader = null,\n    pageTitle = 'Search',\n    body = null,\n    theme,\n  }) => {\n    const rows = [\n      op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.l), 0.81),\n      op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.l), 1.62),\n      1,\n    ];\n    return (\n      <Grid rows={rows} height=\"100%\">\n        <Grid>\n          <HeaderContainer>{pageTitle}</HeaderContainer>\n        </Grid>\n        <Grid>\n          <SearchContainer>{searchHeader}</SearchContainer>\n        </Grid>\n        <Grid height=\"100%\" style={{ overflow: 'hidden' }}>\n          <Grid height=\"100%\" style={{ overflow: 'auto' }}>\n            {body}\n          </Grid>\n        </Grid>\n      </Grid>\n    );\n  },\n);\n\nDSMobilePageSearch.propTypes = {\n  header: PropTypes.element,\n  pageTitle: PropTypes.element,\n  filterBar: PropTypes.element,\n  body: PropTypes.element,\n  footer: PropTypes.element,\n};\n\nconst DSPageSearch = DSMobilePageSearch;\n\nexport { DSPageSearch, DSMobilePageSearch };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,uBAAuB;AACvB,qBAAqB;AACrB,wBAAwD;AAExD,MAAM,SAAS,6BAAO,mBAAI;AAAA;AAAA,gBAEV,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,aACvC,CAAC,UAAU,gDAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAGtE,MAAM,qBAAqB,iCACzB,CAAC;AAAA,EACC,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,MACI;AACJ,QAAM,OAAO;AAAA,IACX,0BAAG,KAAK,gDAAyB,MAAM,MAAM,CAAC,GAAG,IAAI;AAAA,IACrD,0BAAG,KAAK,gDAAyB,MAAM,MAAM,CAAC,GAAG,IAAI;AAAA,IACrD;AAAA,EACF;AACA,SACE,mDAAC;AAAA,IAAK;AAAA,IAAY,QAAO;AAAA,KACvB,mDAAC,2BACC,mDAAC,uBAAiB,SAAU,CAC9B,GACA,mDAAC,2BACC,mDAAC,uBAAiB,YAAa,CACjC,GACA,mDAAC;AAAA,IAAK,QAAO;AAAA,IAAO,OAAO,EAAE,UAAU,SAAS;AAAA,KAC9C,mDAAC;AAAA,IAAK,QAAO;AAAA,IAAO,OAAO,EAAE,UAAU,OAAO;AAAA,KAC3C,IACH,CACF,CACF;AAEJ,CACF;AAEA,mBAAmB,YAAY;AAAA,EAC7B,QAAQ,0BAAU;AAAA,EAClB,WAAW,0BAAU;AAAA,EACrB,WAAW,0BAAU;AAAA,EACrB,MAAM,0BAAU;AAAA,EAChB,QAAQ,0BAAU;AACpB;AAEA,MAAM,eAAe;",
   "names": []
 }

package/dist/cjs/PageSummary/PageSummary.js

@@ -27,15 +27,15 @@ var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_prop_types = __toESM(require("prop-types"));
 var import_ds_grid = require("@elliemae/ds-grid");
-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_FullPageContainer = require("../FullPageContainer");
 var import_Tags = require("./Tags");
-const Body = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const Body = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   margin: 0 auto;
   width: 100%;
   @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
-    ${({ theme }) => `width: ${(0, import_ds_system.op)("*", (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xxl), 6.25)};`}
+    ${({ theme }) => `width: ${(0, import_ds_system2.op)("*", (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xxl), 6.25)};`}
   }
 `;
 const PageSummary = ({

package/dist/cjs/PageSummary/PageSummary.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/PageSummary/PageSummary.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\nimport { op, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { DSFullPageContainer } from '../FullPageContainer';\nimport { Header, Toolbar, BodyWrapper, Section } from './Tags';\n\nconst Body = styled(Grid)`\n  margin: 0 auto;\n  width: 100%;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    ${({ theme }) => `width: ${op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl), 6.25)};`}\n  }\n`;\n\nconst PageSummary = ({\n  header = null,\n  headerZIndex = 1,\n  bodyPrimary = null,\n  actions = null,\n  actionsZIndex = 1,\n  bodySecondary = null,\n}) => (\n  <DSFullPageContainer>\n    {header && <Header zIndex={headerZIndex}>{header}</Header>}\n    <Section>\n      <Grid>\n        <Body>{bodyPrimary}</Body>\n      </Grid>\n      <Toolbar zIndex={actionsZIndex}>{actions}</Toolbar>\n      <BodyWrapper>\n        <Body>{bodySecondary}</Body>\n      </BodyWrapper>\n    </Section>\n  </DSFullPageContainer>\n);\n\nPageSummary.propTypes = {\n  header: PropTypes.element,\n  bodyPrimary: PropTypes.element,\n  actions: PropTypes.element,\n  bodySecondary: PropTypes.element,\n  headerZIndex: PropTypes.number,\n  actionsZIndex: PropTypes.number,\n};\n\nconst DSPageSummary = PageSummary;\n\nexport { DSPageSummary };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,qBAAqB;AACrB,+BAAmB;AACnB,uBAA6C;AAC7C,+BAAoC;AACpC,kBAAsD;AAEtD,MAAM,OAAO,sCAAO,mBAAI;AAAA;AAAA;AAAA,uBAGD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,MAClD,CAAC,EAAE,YAAY,UAAU,yBAAG,KAAK,+CAAyB,MAAM,MAAM,GAAG,GAAG,IAAI;AAAA;AAAA;AAItF,MAAM,cAAc,CAAC;AAAA,EACnB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,MAEhB,mDAAC,oDACE,UAAU,mDAAC;AAAA,EAAO,QAAQ;AAAA,GAAe,MAAO,GACjD,mDAAC,2BACC,mDAAC,2BACC,mDAAC,YAAM,WAAY,CACrB,GACA,mDAAC;AAAA,EAAQ,QAAQ;AAAA,GAAgB,OAAQ,GACzC,mDAAC,+BACC,mDAAC,YAAM,aAAc,CACvB,CACF,CACF;AAGF,YAAY,YAAY;AAAA,EACtB,QAAQ,0BAAU;AAAA,EAClB,aAAa,0BAAU;AAAA,EACvB,SAAS,0BAAU;AAAA,EACnB,eAAe,0BAAU;AAAA,EACzB,cAAc,0BAAU;AAAA,EACxB,eAAe,0BAAU;AAC3B;AAEA,MAAM,gBAAgB;",
+  "sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { op, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { DSFullPageContainer } from '../FullPageContainer';\nimport { Header, Toolbar, BodyWrapper, Section } from './Tags';\n\nconst Body = styled(Grid)`\n  margin: 0 auto;\n  width: 100%;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    ${({ theme }) => `width: ${op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl), 6.25)};`}\n  }\n`;\n\nconst PageSummary = ({\n  header = null,\n  headerZIndex = 1,\n  bodyPrimary = null,\n  actions = null,\n  actionsZIndex = 1,\n  bodySecondary = null,\n}) => (\n  <DSFullPageContainer>\n    {header && <Header zIndex={headerZIndex}>{header}</Header>}\n    <Section>\n      <Grid>\n        <Body>{bodyPrimary}</Body>\n      </Grid>\n      <Toolbar zIndex={actionsZIndex}>{actions}</Toolbar>\n      <BodyWrapper>\n        <Body>{bodySecondary}</Body>\n      </BodyWrapper>\n    </Section>\n  </DSFullPageContainer>\n);\n\nPageSummary.propTypes = {\n  header: PropTypes.element,\n  bodyPrimary: PropTypes.element,\n  actions: PropTypes.element,\n  bodySecondary: PropTypes.element,\n  headerZIndex: PropTypes.number,\n  actionsZIndex: PropTypes.number,\n};\n\nconst DSPageSummary = PageSummary;\n\nexport { DSPageSummary };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,qBAAqB;AACrB,uBAAuB;AACvB,wBAA6C;AAC7C,+BAAoC;AACpC,kBAAsD;AAEtD,MAAM,OAAO,6BAAO,mBAAI;AAAA;AAAA;AAAA,uBAGD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,MAClD,CAAC,EAAE,YAAY,UAAU,0BAAG,KAAK,gDAAyB,MAAM,MAAM,GAAG,GAAG,IAAI;AAAA;AAAA;AAItF,MAAM,cAAc,CAAC;AAAA,EACnB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,MAEhB,mDAAC,oDACE,UAAU,mDAAC;AAAA,EAAO,QAAQ;AAAA,GAAe,MAAO,GACjD,mDAAC,2BACC,mDAAC,2BACC,mDAAC,YAAM,WAAY,CACrB,GACA,mDAAC;AAAA,EAAQ,QAAQ;AAAA,GAAgB,OAAQ,GACzC,mDAAC,+BACC,mDAAC,YAAM,aAAc,CACvB,CACF,CACF;AAGF,YAAY,YAAY;AAAA,EACtB,QAAQ,0BAAU;AAAA,EAClB,aAAa,0BAAU;AAAA,EACvB,SAAS,0BAAU;AAAA,EACnB,eAAe,0BAAU;AAAA,EACzB,cAAc,0BAAU;AAAA,EACxB,eAAe,0BAAU;AAC3B;AAEA,MAAM,gBAAgB;",
   "names": []
 }

package/dist/cjs/PageSummary/Tags.js

@@ -27,8 +27,8 @@ __export(Tags_exports, {
 });
 module.exports = __toCommonJS(Tags_exports);
 var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-const Header = import_styled_components.default.div`
+var import_ds_system = require("@elliemae/ds-system");
+const Header = import_ds_system.styled.div`
   position: fixed;
   display: grid;
   top: 0;
@@ -37,21 +37,21 @@ const Header = import_styled_components.default.div`
   height: 64px;
   z-index: ${({ zIndex }) => zIndex};
 `;
-const Toolbar = import_styled_components.default.div`
+const Toolbar = import_ds_system.styled.div`
   position: sticky;
   left: 0;
   top: 64px;
   background: ${(props) => props.theme.colors.neutral["000"]};
   z-index: ${({ zIndex }) => zIndex};
 `;
-const BodyWrapper = import_styled_components.default.div`
+const BodyWrapper = import_ds_system.styled.div`
   position: relative;
   display: grid;
   top: 0;
   left: 0;
   height: 100%;
 `;
-const Section = import_styled_components.default.div`
+const Section = import_ds_system.styled.div`
   position: relative;
   top: 64px;
   height: 100%;

package/dist/cjs/PageSummary/Tags.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/PageSummary/Tags.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import styled from 'styled-components';\n\nexport const Header = styled.div`\n  position: fixed;\n  display: grid;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 64px;\n  z-index: ${({ zIndex }) => zIndex};\n`;\nexport const Toolbar = styled.div`\n  position: sticky;\n  left: 0;\n  top: 64px;\n  background: ${(props) => props.theme.colors.neutral['000']};\n  z-index: ${({ zIndex }) => zIndex};\n`;\nexport const BodyWrapper = styled.div`\n  position: relative;\n  display: grid;\n  top: 0;\n  left: 0;\n  height: 100%;\n`;\n\nexport const Section = styled.div`\n  position: relative;\n  top: 64px;\n  height: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AAEZ,MAAM,SAAS,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOhB,CAAC,EAAE,aAAa;AAAA;AAEtB,MAAM,UAAU,iCAAO;AAAA;AAAA;AAAA;AAAA,gBAId,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,aACzC,CAAC,EAAE,aAAa;AAAA;AAEtB,MAAM,cAAc,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3B,MAAM,UAAU,iCAAO;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const Header = styled.div`\n  position: fixed;\n  display: grid;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 64px;\n  z-index: ${({ zIndex }) => zIndex};\n`;\nexport const Toolbar = styled.div`\n  position: sticky;\n  left: 0;\n  top: 64px;\n  background: ${(props) => props.theme.colors.neutral['000']};\n  z-index: ${({ zIndex }) => zIndex};\n`;\nexport const BodyWrapper = styled.div`\n  position: relative;\n  display: grid;\n  top: 0;\n  left: 0;\n  height: 100%;\n`;\n\nexport const Section = styled.div`\n  position: relative;\n  top: 64px;\n  height: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,SAAS,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOhB,CAAC,EAAE,aAAa;AAAA;AAEtB,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA,gBAId,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,aACzC,CAAC,EAAE,aAAa;AAAA;AAEtB,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3B,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/SideNav/SideNav.js

@@ -29,7 +29,7 @@ var import_react = __toESM(require("react"));
 var import_ds_backdrop = require("@elliemae/ds-backdrop");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_icon = require("@elliemae/ds-icon");
-var import_react_desc = require("react-desc");
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_lodash = require("lodash");
 var import_EM_logo = __toESM(require("../Icons/EM_logo"));
 var import_styles = require("./styles");
@@ -76,19 +76,19 @@ const DSSideNav = ({ containerProps = {}, title, onClose = import_lodash.noop, m
     className: "content"
   }, /* @__PURE__ */ import_react.default.createElement("hr", null), renderBottomMenu())) : null)));
 };
-const menuProps = import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.shape({
-  icon: import_react_desc.PropTypes.element,
-  text: import_react_desc.PropTypes.string
+const menuProps = import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.shape({
+  icon: import_ds_utilities.PropTypes.element,
+  text: import_ds_utilities.PropTypes.string
 }));
 const navProps = {
-  containerProps: import_react_desc.PropTypes.object.description("inject props to wrapper element of side nav"),
-  title: import_react_desc.PropTypes.string.isRequired.description("Heading Title"),
-  onClose: import_react_desc.PropTypes.func.description("Callback function when close is menu is triggered"),
+  containerProps: import_ds_utilities.PropTypes.object.description("inject props to wrapper element of side nav"),
+  title: import_ds_utilities.PropTypes.string.isRequired.description("Heading Title"),
+  onClose: import_ds_utilities.PropTypes.func.description("Callback function when close is menu is triggered"),
   menuItems: menuProps.description("Top Menu items array"),
   bottomMenuItems: menuProps.description("Bottom Menu items array")
 };
 DSSideNav.propTypes = navProps;
 DSSideNav.displayName = "DSSideNav";
-const DSSideNavWithSchema = (0, import_react_desc.describe)(DSSideNav).description("Side navigation for mobile and tablet");
+const DSSideNavWithSchema = (0, import_ds_utilities.describe)(DSSideNav).description("Side navigation for mobile and tablet");
 DSSideNavWithSchema.propTypes = navProps;
 //# sourceMappingURL=SideNav.js.map

package/dist/cjs/SideNav/SideNav.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/SideNav/SideNav.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable import/no-unresolved */\n/* eslint-disable max-lines */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { useState } from 'react';\nimport { DSBackdrop } from '@elliemae/ds-backdrop';\nimport { Close } from '@elliemae/ds-icons';\nimport { DSIconSizes, DSIconColors } from '@elliemae/ds-icon';\nimport { PropTypes, describe } from 'react-desc';\nimport { noop } from 'lodash';\nimport Logo from '../Icons/EM_logo';\nimport { Container, Menu, Heading, Icon, Hr, MenuList, BottomMenu, MenuWrapper } from './styles';\n\nconst DSSideNav = ({ containerProps = {}, title, onClose = noop, menuItems = [], bottomMenuItems = [] }) => {\n  const [selectedMenuItemIdx, setSelectedMenuItem] = useState(-1);\n\n  const menuItemClick = (idx, text, cb) => {\n    if (cb) {\n      cb(idx, text);\n    }\n    setSelectedMenuItem(idx);\n  };\n\n  const renderMenuList = () => (\n    <>\n      {menuItems.length > 0 ? (\n        <MenuList>\n          {menuItems.map(({ icon, text, onClick }, idx) => (\n            <div key={idx} className=\"menuitem\" onClick={menuItemClick.bind(null, idx, text, onClick)}>\n              <div className=\"icon\">{icon}</div>\n              <div className={`text ${idx === selectedMenuItemIdx ? 'active' : ''}`}>{text}</div>\n            </div>\n          ))}\n        </MenuList>\n      ) : null}\n    </>\n  );\n\n  const renderBottomMenu = () => (\n    <MenuList>\n      {bottomMenuItems.map(({ icon, text, onClick }, idx) => (\n        <div key={idx} className=\"menuitem\" onClick={() => onClick(idx, text)}>\n          <div className=\"icon\">{icon}</div>\n          <div className=\"text\">{text}</div>\n        </div>\n      ))}\n    </MenuList>\n  );\n\n  return (\n    <Container data-testid={containerProps['data-testid'] || 'global-header-menu'}>\n      <DSBackdrop onClick={onClose} type=\"cover\"></DSBackdrop>\n\n      <Menu>\n        <MenuWrapper>\n          <Heading>\n            <Icon>{Logo()}</Icon>\n            <div className=\"content\">\n              <label>{title}</label>\n              <span></span>\n              <div className=\"icon\">\n                <Close onClick={onClose} size={DSIconSizes.S} color={DSIconColors.WHITE} />\n              </div>\n            </div>\n          </Heading>\n          <Hr></Hr>\n          {renderMenuList()}\n          {bottomMenuItems.length > 0 ? (\n            <BottomMenu>\n              <div className=\"content\">\n                <hr></hr>\n                {renderBottomMenu()}\n              </div>\n            </BottomMenu>\n          ) : null}\n        </MenuWrapper>\n      </Menu>\n    </Container>\n  );\n};\n\nconst menuProps = PropTypes.arrayOf(\n  PropTypes.shape({\n    icon: PropTypes.element,\n    text: PropTypes.string,\n  }),\n);\n\nconst navProps = {\n  /** inject props to wrapper element of side nav */\n  containerProps: PropTypes.object.description('inject props to wrapper element of side nav'),\n  /**\n   * Heading Title\n   */\n  title: PropTypes.string.isRequired.description('Heading Title'),\n  /**\n   * Callback function when close is menu is triggered\n   */\n  onClose: PropTypes.func.description('Callback function when close is menu is triggered'),\n  /**\n   * Top Menu items array\n   */\n  menuItems: menuProps.description('Top Menu items array'),\n  /**\n   * Bottom Menu items array\n   */\n  bottomMenuItems: menuProps.description('Bottom Menu items array'),\n};\n\nDSSideNav.propTypes = navProps;\nDSSideNav.displayName = 'DSSideNav';\nconst DSSideNavWithSchema = describe(DSSideNav).description('Side navigation for mobile and tablet');\n\nDSSideNavWithSchema.propTypes = navProps;\n\nexport { DSSideNav, DSSideNavWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,mBAAgC;AAChC,yBAA2B;AAC3B,sBAAsB;AACtB,qBAA0C;AAC1C,wBAAoC;AACpC,oBAAqB;AACrB,qBAAiB;AACjB,oBAAsF;AAEtF,MAAM,YAAY,CAAC,EAAE,iBAAiB,CAAC,GAAG,OAAO,UAAU,oBAAM,YAAY,CAAC,GAAG,kBAAkB,CAAC,QAAQ;AAC1G,QAAM,CAAC,qBAAqB,uBAAuB,2BAAS,EAAE;AAE9D,QAAM,gBAAgB,CAAC,KAAK,MAAM,OAAO;AACvC,QAAI,IAAI;AACN,SAAG,KAAK,IAAI;AAAA,IACd;AACA,wBAAoB,GAAG;AAAA,EACzB;AAEA,QAAM,iBAAiB,MACrB,wFACG,UAAU,SAAS,IAClB,mDAAC,8BACE,UAAU,IAAI,CAAC,EAAE,MAAM,MAAM,WAAW,QACvC,mDAAC;AAAA,IAAI,KAAK;AAAA,IAAK,WAAU;AAAA,IAAW,SAAS,cAAc,KAAK,MAAM,KAAK,MAAM,OAAO;AAAA,KACtF,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAQ,IAAK,GAC5B,mDAAC;AAAA,IAAI,WAAW,QAAQ,QAAQ,sBAAsB,WAAW;AAAA,KAAO,IAAK,CAC/E,CACD,CACH,IACE,IACN;AAGF,QAAM,mBAAmB,MACvB,mDAAC,8BACE,gBAAgB,IAAI,CAAC,EAAE,MAAM,MAAM,WAAW,QAC7C,mDAAC;AAAA,IAAI,KAAK;AAAA,IAAK,WAAU;AAAA,IAAW,SAAS,MAAM,QAAQ,KAAK,IAAI;AAAA,KAClE,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAQ,IAAK,GAC5B,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAQ,IAAK,CAC9B,CACD,CACH;AAGF,SACE,mDAAC;AAAA,IAAU,eAAa,eAAe,kBAAkB;AAAA,KACvD,mDAAC;AAAA,IAAW,SAAS;AAAA,IAAS,MAAK;AAAA,GAAQ,GAE3C,mDAAC,0BACC,mDAAC,iCACC,mDAAC,6BACC,mDAAC,0BAAM,4BAAK,CAAE,GACd,mDAAC;AAAA,IAAI,WAAU;AAAA,KACb,mDAAC,eAAO,KAAM,GACd,mDAAC,YAAK,GACN,mDAAC;AAAA,IAAI,WAAU;AAAA,KACb,mDAAC;AAAA,IAAM,SAAS;AAAA,IAAS,MAAM,2BAAY;AAAA,IAAG,OAAO,4BAAa;AAAA,GAAO,CAC3E,CACF,CACF,GACA,mDAAC,sBAAG,GACH,eAAe,GACf,gBAAgB,SAAS,IACxB,mDAAC,gCACC,mDAAC;AAAA,IAAI,WAAU;AAAA,KACb,mDAAC,UAAG,GACH,iBAAiB,CACpB,CACF,IACE,IACN,CACF,CACF;AAEJ;AAEA,MAAM,YAAY,4BAAU,QAC1B,4BAAU,MAAM;AAAA,EACd,MAAM,4BAAU;AAAA,EAChB,MAAM,4BAAU;AAClB,CAAC,CACH;AAEA,MAAM,WAAW;AAAA,EAEf,gBAAgB,4BAAU,OAAO,YAAY,6CAA6C;AAAA,EAI1F,OAAO,4BAAU,OAAO,WAAW,YAAY,eAAe;AAAA,EAI9D,SAAS,4BAAU,KAAK,YAAY,mDAAmD;AAAA,EAIvF,WAAW,UAAU,YAAY,sBAAsB;AAAA,EAIvD,iBAAiB,UAAU,YAAY,yBAAyB;AAClE;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,sBAAsB,gCAAS,SAAS,EAAE,YAAY,uCAAuC;AAEnG,oBAAoB,YAAY;",
+  "sourcesContent": ["/* eslint-disable import/no-unresolved */\n/* eslint-disable max-lines */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { useState } from 'react';\nimport { DSBackdrop } from '@elliemae/ds-backdrop';\nimport { Close } from '@elliemae/ds-icons';\nimport { DSIconSizes, DSIconColors } from '@elliemae/ds-icon';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { noop } from 'lodash';\nimport Logo from '../Icons/EM_logo';\nimport { Container, Menu, Heading, Icon, Hr, MenuList, BottomMenu, MenuWrapper } from './styles';\n\nconst DSSideNav = ({ containerProps = {}, title, onClose = noop, menuItems = [], bottomMenuItems = [] }) => {\n  const [selectedMenuItemIdx, setSelectedMenuItem] = useState(-1);\n\n  const menuItemClick = (idx, text, cb) => {\n    if (cb) {\n      cb(idx, text);\n    }\n    setSelectedMenuItem(idx);\n  };\n\n  const renderMenuList = () => (\n    <>\n      {menuItems.length > 0 ? (\n        <MenuList>\n          {menuItems.map(({ icon, text, onClick }, idx) => (\n            <div key={idx} className=\"menuitem\" onClick={menuItemClick.bind(null, idx, text, onClick)}>\n              <div className=\"icon\">{icon}</div>\n              <div className={`text ${idx === selectedMenuItemIdx ? 'active' : ''}`}>{text}</div>\n            </div>\n          ))}\n        </MenuList>\n      ) : null}\n    </>\n  );\n\n  const renderBottomMenu = () => (\n    <MenuList>\n      {bottomMenuItems.map(({ icon, text, onClick }, idx) => (\n        <div key={idx} className=\"menuitem\" onClick={() => onClick(idx, text)}>\n          <div className=\"icon\">{icon}</div>\n          <div className=\"text\">{text}</div>\n        </div>\n      ))}\n    </MenuList>\n  );\n\n  return (\n    <Container data-testid={containerProps['data-testid'] || 'global-header-menu'}>\n      <DSBackdrop onClick={onClose} type=\"cover\"></DSBackdrop>\n\n      <Menu>\n        <MenuWrapper>\n          <Heading>\n            <Icon>{Logo()}</Icon>\n            <div className=\"content\">\n              <label>{title}</label>\n              <span></span>\n              <div className=\"icon\">\n                <Close onClick={onClose} size={DSIconSizes.S} color={DSIconColors.WHITE} />\n              </div>\n            </div>\n          </Heading>\n          <Hr></Hr>\n          {renderMenuList()}\n          {bottomMenuItems.length > 0 ? (\n            <BottomMenu>\n              <div className=\"content\">\n                <hr></hr>\n                {renderBottomMenu()}\n              </div>\n            </BottomMenu>\n          ) : null}\n        </MenuWrapper>\n      </Menu>\n    </Container>\n  );\n};\n\nconst menuProps = PropTypes.arrayOf(\n  PropTypes.shape({\n    icon: PropTypes.element,\n    text: PropTypes.string,\n  }),\n);\n\nconst navProps = {\n  /** inject props to wrapper element of side nav */\n  containerProps: PropTypes.object.description('inject props to wrapper element of side nav'),\n  /**\n   * Heading Title\n   */\n  title: PropTypes.string.isRequired.description('Heading Title'),\n  /**\n   * Callback function when close is menu is triggered\n   */\n  onClose: PropTypes.func.description('Callback function when close is menu is triggered'),\n  /**\n   * Top Menu items array\n   */\n  menuItems: menuProps.description('Top Menu items array'),\n  /**\n   * Bottom Menu items array\n   */\n  bottomMenuItems: menuProps.description('Bottom Menu items array'),\n};\n\nDSSideNav.propTypes = navProps;\nDSSideNav.displayName = 'DSSideNav';\nconst DSSideNavWithSchema = describe(DSSideNav).description('Side navigation for mobile and tablet');\n\nDSSideNavWithSchema.propTypes = navProps;\n\nexport { DSSideNav, DSSideNavWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,mBAAgC;AAChC,yBAA2B;AAC3B,sBAAsB;AACtB,qBAA0C;AAC1C,0BAAoC;AACpC,oBAAqB;AACrB,qBAAiB;AACjB,oBAAsF;AAEtF,MAAM,YAAY,CAAC,EAAE,iBAAiB,CAAC,GAAG,OAAO,UAAU,oBAAM,YAAY,CAAC,GAAG,kBAAkB,CAAC,QAAQ;AAC1G,QAAM,CAAC,qBAAqB,uBAAuB,2BAAS,EAAE;AAE9D,QAAM,gBAAgB,CAAC,KAAK,MAAM,OAAO;AACvC,QAAI,IAAI;AACN,SAAG,KAAK,IAAI;AAAA,IACd;AACA,wBAAoB,GAAG;AAAA,EACzB;AAEA,QAAM,iBAAiB,MACrB,wFACG,UAAU,SAAS,IAClB,mDAAC,8BACE,UAAU,IAAI,CAAC,EAAE,MAAM,MAAM,WAAW,QACvC,mDAAC;AAAA,IAAI,KAAK;AAAA,IAAK,WAAU;AAAA,IAAW,SAAS,cAAc,KAAK,MAAM,KAAK,MAAM,OAAO;AAAA,KACtF,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAQ,IAAK,GAC5B,mDAAC;AAAA,IAAI,WAAW,QAAQ,QAAQ,sBAAsB,WAAW;AAAA,KAAO,IAAK,CAC/E,CACD,CACH,IACE,IACN;AAGF,QAAM,mBAAmB,MACvB,mDAAC,8BACE,gBAAgB,IAAI,CAAC,EAAE,MAAM,MAAM,WAAW,QAC7C,mDAAC;AAAA,IAAI,KAAK;AAAA,IAAK,WAAU;AAAA,IAAW,SAAS,MAAM,QAAQ,KAAK,IAAI;AAAA,KAClE,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAQ,IAAK,GAC5B,mDAAC;AAAA,IAAI,WAAU;AAAA,KAAQ,IAAK,CAC9B,CACD,CACH;AAGF,SACE,mDAAC;AAAA,IAAU,eAAa,eAAe,kBAAkB;AAAA,KACvD,mDAAC;AAAA,IAAW,SAAS;AAAA,IAAS,MAAK;AAAA,GAAQ,GAE3C,mDAAC,0BACC,mDAAC,iCACC,mDAAC,6BACC,mDAAC,0BAAM,4BAAK,CAAE,GACd,mDAAC;AAAA,IAAI,WAAU;AAAA,KACb,mDAAC,eAAO,KAAM,GACd,mDAAC,YAAK,GACN,mDAAC;AAAA,IAAI,WAAU;AAAA,KACb,mDAAC;AAAA,IAAM,SAAS;AAAA,IAAS,MAAM,2BAAY;AAAA,IAAG,OAAO,4BAAa;AAAA,GAAO,CAC3E,CACF,CACF,GACA,mDAAC,sBAAG,GACH,eAAe,GACf,gBAAgB,SAAS,IACxB,mDAAC,gCACC,mDAAC;AAAA,IAAI,WAAU;AAAA,KACb,mDAAC,UAAG,GACH,iBAAiB,CACpB,CACF,IACE,IACN,CACF,CACF;AAEJ;AAEA,MAAM,YAAY,8BAAU,QAC1B,8BAAU,MAAM;AAAA,EACd,MAAM,8BAAU;AAAA,EAChB,MAAM,8BAAU;AAClB,CAAC,CACH;AAEA,MAAM,WAAW;AAAA,EAEf,gBAAgB,8BAAU,OAAO,YAAY,6CAA6C;AAAA,EAI1F,OAAO,8BAAU,OAAO,WAAW,YAAY,eAAe;AAAA,EAI9D,SAAS,8BAAU,KAAK,YAAY,mDAAmD;AAAA,EAIvF,WAAW,UAAU,YAAY,sBAAsB;AAAA,EAIvD,iBAAiB,UAAU,YAAY,yBAAyB;AAClE;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,sBAAsB,kCAAS,SAAS,EAAE,YAAY,uCAAuC;AAEnG,oBAAoB,YAAY;",
   "names": []
 }

package/dist/cjs/SideNav/styles.js

@@ -31,17 +31,17 @@ __export(styles_exports, {
 });
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-const Container = import_styled_components.default.div`
+var import_ds_system = require("@elliemae/ds-system");
+const Container = import_ds_system.styled.div`
   position: fixed;
   width: 100%;
   height: 100%;
 `;
-const MenuWrapper = import_styled_components.default.div`
+const MenuWrapper = import_ds_system.styled.div`
   position: relative;
   height: 100%;
 `;
-const Menu = import_styled_components.default.div`
+const Menu = import_ds_system.styled.div`
   position: fixed;
   width: 80%;
   height: 100%;
@@ -50,7 +50,7 @@ const Menu = import_styled_components.default.div`
   box-shadow: 5px 0 5px ${(props) => props.theme.colors.neutral[600]};
   padding: ${(props) => props.theme.space.xs};
 `;
-const Heading = import_styled_components.default.div`
+const Heading = import_ds_system.styled.div`
   display: flex;
   flex-direction: row;
 
@@ -74,14 +74,14 @@ const Heading = import_styled_components.default.div`
     }
   }
 `;
-const Icon = import_styled_components.default.div`
+const Icon = import_ds_system.styled.div`
   margin-right: ${(props) => props.theme.space.xxs2};
 `;
-const Hr = import_styled_components.default.hr`
+const Hr = import_ds_system.styled.hr`
   margin-left: -${(props) => props.theme.space.xs};
   margin-right: -${(props) => props.theme.space.xs};
 `;
-const MenuList = import_styled_components.default.div`
+const MenuList = import_ds_system.styled.div`
   .menuitem {
     display: flex;
     flex-direction: row;
@@ -114,7 +114,7 @@ const MenuList = import_styled_components.default.div`
     }
   }
 `;
-const BottomMenu = import_styled_components.default.div`
+const BottomMenu = import_ds_system.styled.div`
   position: absolute;
   bottom: 0;
   width: 100%;

package/dist/cjs/SideNav/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/SideNav/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import styled from 'styled-components';\n\nexport const Container = styled.div`\n  position: fixed;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const MenuWrapper = styled.div`\n  position: relative;\n  height: 100%;\n`;\n\nexport const Menu = styled.div`\n  position: fixed;\n  width: 80%;\n  height: 100%;\n  background-color: ${(props) => props.theme.colors.brand[700]};\n  font-family: ${(props) => props.theme.fonts.default};\n  box-shadow: 5px 0 5px ${(props) => props.theme.colors.neutral[600]};\n  padding: ${(props) => props.theme.space.xs};\n`;\n\nexport const Heading = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  .content {\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    span {\n      flex-grow: 1;\n    }\n    label {\n      padding-top: 1px;\n      line-height:30px;\n      font-weight: ${(props) => props.theme.fontWeights.semibold};\n      font-size: 22px;\n      color: ${(props) => props.theme.colors.neutral['000']};\n    }\n    .icon {\n      cursor: pointer;\n      padding-top: 6px;\n    }\n  }\n`;\n\nexport const Icon = styled.div`\n  margin-right: ${(props) => props.theme.space.xxs2};\n`;\n\nexport const Hr = styled.hr`\n  margin-left: -${(props) => props.theme.space.xs};\n  margin-right: -${(props) => props.theme.space.xs};\n`;\nexport const MenuList = styled.div`\n  .menuitem {\n    display: flex;\n    flex-direction: row;\n    cursor: pointer;\n    height:22px;\n    margin-bottom: ${(props) => props.theme.space.xs};\n    .icon {\n      padding-left: 6px;\n      margin-right: ${(props) => props.theme.space.xs};\n      span{\n        height:20px;\n        width:20px;\n        svg{\n          height:20px;\n          width:20px;\n        }\n      }\n    }\n    .text {\n      font-weight: ${(props) => props.theme.fontWeights.regular};\n      font-size: 18px;\n      line-height:22px;\n      color: ${(props) => props.theme.colors.neutral['000']};\n      &.active {\n        font-weight: ${(props) => props.theme.fontWeights.semibold};\n      }\n    }\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n`;\n\nexport const BottomMenu = styled.div`\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AAEZ,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,cAAc,iCAAO;AAAA;AAAA;AAAA;AAK3B,MAAM,OAAO,iCAAO;AAAA;AAAA;AAAA;AAAA,sBAIL,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,iBACzC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,0BACpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,aACnD,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGnC,MAAM,UAAU,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAcT,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,eAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS9C,MAAM,OAAO,iCAAO;AAAA,kBACT,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGxC,MAAM,KAAK,iCAAO;AAAA,kBACP,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,mBAC5B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAEzC,MAAM,WAAW,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMV,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,sBAG5B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAW9B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA,eAGzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,uBAE9B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnD,MAAM,aAAa,iCAAO;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const Container = styled.div`\n  position: fixed;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const MenuWrapper = styled.div`\n  position: relative;\n  height: 100%;\n`;\n\nexport const Menu = styled.div`\n  position: fixed;\n  width: 80%;\n  height: 100%;\n  background-color: ${(props) => props.theme.colors.brand[700]};\n  font-family: ${(props) => props.theme.fonts.default};\n  box-shadow: 5px 0 5px ${(props) => props.theme.colors.neutral[600]};\n  padding: ${(props) => props.theme.space.xs};\n`;\n\nexport const Heading = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  .content {\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    span {\n      flex-grow: 1;\n    }\n    label {\n      padding-top: 1px;\n      line-height:30px;\n      font-weight: ${(props) => props.theme.fontWeights.semibold};\n      font-size: 22px;\n      color: ${(props) => props.theme.colors.neutral['000']};\n    }\n    .icon {\n      cursor: pointer;\n      padding-top: 6px;\n    }\n  }\n`;\n\nexport const Icon = styled.div`\n  margin-right: ${(props) => props.theme.space.xxs2};\n`;\n\nexport const Hr = styled.hr`\n  margin-left: -${(props) => props.theme.space.xs};\n  margin-right: -${(props) => props.theme.space.xs};\n`;\nexport const MenuList = styled.div`\n  .menuitem {\n    display: flex;\n    flex-direction: row;\n    cursor: pointer;\n    height:22px;\n    margin-bottom: ${(props) => props.theme.space.xs};\n    .icon {\n      padding-left: 6px;\n      margin-right: ${(props) => props.theme.space.xs};\n      span{\n        height:20px;\n        width:20px;\n        svg{\n          height:20px;\n          width:20px;\n        }\n      }\n    }\n    .text {\n      font-weight: ${(props) => props.theme.fontWeights.regular};\n      font-size: 18px;\n      line-height:22px;\n      color: ${(props) => props.theme.colors.neutral['000']};\n      &.active {\n        font-weight: ${(props) => props.theme.fontWeights.semibold};\n      }\n    }\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n`;\n\nexport const BottomMenu = styled.div`\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA;AAK3B,MAAM,OAAO,wBAAO;AAAA;AAAA;AAAA;AAAA,sBAIL,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,iBACzC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,0BACpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,aACnD,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGnC,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAcT,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,eAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS9C,MAAM,OAAO,wBAAO;AAAA,kBACT,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGxC,MAAM,KAAK,wBAAO;AAAA,kBACP,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,mBAC5B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAEzC,MAAM,WAAW,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMV,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,sBAG5B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAW9B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA,eAGzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,uBAE9B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnD,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/SwipeToRefresh/SwipeToRefresh.js

@@ -26,7 +26,7 @@ __export(SwipeToRefresh_exports, {
 module.exports = __toCommonJS(SwipeToRefresh_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_circular_progress_indicator = require("@elliemae/ds-circular-progress-indicator");
 var import_ds_system = require("@elliemae/ds-system");
 var import_useSwipe = require("./useSwipe");
@@ -60,12 +60,12 @@ const SwipeToRefresh = ({ children, loading, onRefresh }) => {
   }), children));
 };
 const props = {
-  children: import_react_desc.PropTypes.element.isRequired.description("component inside swipe to refresh container"),
-  loading: import_react_desc.PropTypes.bool.description("toggle loading state for swipe"),
-  onRefresh: import_react_desc.PropTypes.func.description("callback on refresh swipe")
+  children: import_ds_utilities.PropTypes.element.isRequired.description("component inside swipe to refresh container"),
+  loading: import_ds_utilities.PropTypes.bool.description("toggle loading state for swipe"),
+  onRefresh: import_ds_utilities.PropTypes.func.description("callback on refresh swipe")
 };
 SwipeToRefresh.propTypes = props;
 SwipeToRefresh.displayName = "SwipeToRefresh";
-const SwipeToRefreshWithSchema = (0, import_react_desc.describe)(SwipeToRefresh);
+const SwipeToRefreshWithSchema = (0, import_ds_utilities.describe)(SwipeToRefresh);
 SwipeToRefreshWithSchema.propTypes = props;
 //# sourceMappingURL=SwipeToRefresh.js.map

package/dist/cjs/SwipeToRefresh/SwipeToRefresh.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/SwipeToRefresh/SwipeToRefresh.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { useTheme } from '@elliemae/ds-system';\nimport { useSwipe } from './useSwipe';\nimport { SwipeContainer, SwipeDrag, LoaderBox, PositionLoader } from './styled';\nimport { ProgressIndicator } from './ProgressIndicator';\n\nconst SwipeToRefresh = ({ children, loading, onRefresh }) => {\n  const breakpoint = 60;\n  const theme = useTheme();\n  const swipe = useSwipe({ onRefresh, breakpoint });\n  const progress = swipe.height > breakpoint ? 100 : (swipe.height * 100) / breakpoint;\n  return (\n    <SwipeContainer>\n      <SwipeDrag\n        onTouchStart={swipe.touchStart}\n        onTouchEnd={swipe.touchEnd}\n        onTouchCancel={swipe.touchCancel}\n        onTouchMove={swipe.touchMove}\n        ref={swipe.ref}\n      >\n        <LoaderBox\n          height={loading ? theme.space.m : `${swipe.height}px`}\n          alignItems=\"flex-start\"\n          data-testid=\"loader-box\"\n        >\n          <PositionLoader\n            height={theme.space.m}\n            justifyContent=\"center\"\n            alignItems=\"center\"\n            mt={swipe.height > 40 || loading ? 0 : `${swipe.height - 40}px`}\n          >\n            {loading ? <DSCircularProgressIndicator /> : <ProgressIndicator progress={progress} />}\n          </PositionLoader>\n        </LoaderBox>\n        <div ref={swipe.target} style={{ height: 1 }} />\n        {children}\n      </SwipeDrag>\n    </SwipeContainer>\n  );\n};\n\nconst props = {\n  /** component inside swipe to refresh container */\n  children: PropTypes.element.isRequired.description('component inside swipe to refresh container'),\n  /** toggle loading state for swipe */\n  loading: PropTypes.bool.description('toggle loading state for swipe'),\n  /** callback on refresh swipe */\n  onRefresh: PropTypes.func.description('callback on refresh swipe'),\n};\n\nSwipeToRefresh.propTypes = props;\nSwipeToRefresh.displayName = 'SwipeToRefresh';\nconst SwipeToRefreshWithSchema = describe(SwipeToRefresh);\n\nSwipeToRefreshWithSchema.propTypes = props;\n\nexport { SwipeToRefresh, SwipeToRefreshWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAoC;AACpC,4CAA4C;AAC5C,uBAAyB;AACzB,sBAAyB;AACzB,oBAAqE;AACrE,+BAAkC;AAElC,MAAM,iBAAiB,CAAC,EAAE,UAAU,SAAS,gBAAgB;AAC3D,QAAM,aAAa;AACnB,QAAM,QAAQ,+BAAS;AACvB,QAAM,QAAQ,8BAAS,EAAE,WAAW,WAAW,CAAC;AAChD,QAAM,WAAW,MAAM,SAAS,aAAa,MAAO,MAAM,SAAS,MAAO;AAC1E,SACE,mDAAC,oCACC,mDAAC;AAAA,IACC,cAAc,MAAM;AAAA,IACpB,YAAY,MAAM;AAAA,IAClB,eAAe,MAAM;AAAA,IACrB,aAAa,MAAM;AAAA,IACnB,KAAK,MAAM;AAAA,KAEX,mDAAC;AAAA,IACC,QAAQ,UAAU,MAAM,MAAM,IAAI,GAAG,MAAM;AAAA,IAC3C,YAAW;AAAA,IACX,eAAY;AAAA,KAEZ,mDAAC;AAAA,IACC,QAAQ,MAAM,MAAM;AAAA,IACpB,gBAAe;AAAA,IACf,YAAW;AAAA,IACX,IAAI,MAAM,SAAS,MAAM,UAAU,IAAI,GAAG,MAAM,SAAS;AAAA,KAExD,UAAU,mDAAC,uEAA4B,IAAK,mDAAC;AAAA,IAAkB;AAAA,GAAoB,CACtF,CACF,GACA,mDAAC;AAAA,IAAI,KAAK,MAAM;AAAA,IAAQ,OAAO,EAAE,QAAQ,EAAE;AAAA,GAAG,GAC7C,QACH,CACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,UAAU,4BAAU,QAAQ,WAAW,YAAY,6CAA6C;AAAA,EAEhG,SAAS,4BAAU,KAAK,YAAY,gCAAgC;AAAA,EAEpE,WAAW,4BAAU,KAAK,YAAY,2BAA2B;AACnE;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,gCAAS,cAAc;AAExD,yBAAyB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { useTheme } from '@elliemae/ds-system';\nimport { useSwipe } from './useSwipe';\nimport { SwipeContainer, SwipeDrag, LoaderBox, PositionLoader } from './styled';\nimport { ProgressIndicator } from './ProgressIndicator';\n\nconst SwipeToRefresh = ({ children, loading, onRefresh }) => {\n  const breakpoint = 60;\n  const theme = useTheme();\n  const swipe = useSwipe({ onRefresh, breakpoint });\n  const progress = swipe.height > breakpoint ? 100 : (swipe.height * 100) / breakpoint;\n  return (\n    <SwipeContainer>\n      <SwipeDrag\n        onTouchStart={swipe.touchStart}\n        onTouchEnd={swipe.touchEnd}\n        onTouchCancel={swipe.touchCancel}\n        onTouchMove={swipe.touchMove}\n        ref={swipe.ref}\n      >\n        <LoaderBox\n          height={loading ? theme.space.m : `${swipe.height}px`}\n          alignItems=\"flex-start\"\n          data-testid=\"loader-box\"\n        >\n          <PositionLoader\n            height={theme.space.m}\n            justifyContent=\"center\"\n            alignItems=\"center\"\n            mt={swipe.height > 40 || loading ? 0 : `${swipe.height - 40}px`}\n          >\n            {loading ? <DSCircularProgressIndicator /> : <ProgressIndicator progress={progress} />}\n          </PositionLoader>\n        </LoaderBox>\n        <div ref={swipe.target} style={{ height: 1 }} />\n        {children}\n      </SwipeDrag>\n    </SwipeContainer>\n  );\n};\n\nconst props = {\n  /** component inside swipe to refresh container */\n  children: PropTypes.element.isRequired.description('component inside swipe to refresh container'),\n  /** toggle loading state for swipe */\n  loading: PropTypes.bool.description('toggle loading state for swipe'),\n  /** callback on refresh swipe */\n  onRefresh: PropTypes.func.description('callback on refresh swipe'),\n};\n\nSwipeToRefresh.propTypes = props;\nSwipeToRefresh.displayName = 'SwipeToRefresh';\nconst SwipeToRefreshWithSchema = describe(SwipeToRefresh);\n\nSwipeToRefreshWithSchema.propTypes = props;\n\nexport { SwipeToRefresh, SwipeToRefreshWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAoC;AACpC,4CAA4C;AAC5C,uBAAyB;AACzB,sBAAyB;AACzB,oBAAqE;AACrE,+BAAkC;AAElC,MAAM,iBAAiB,CAAC,EAAE,UAAU,SAAS,gBAAgB;AAC3D,QAAM,aAAa;AACnB,QAAM,QAAQ,+BAAS;AACvB,QAAM,QAAQ,8BAAS,EAAE,WAAW,WAAW,CAAC;AAChD,QAAM,WAAW,MAAM,SAAS,aAAa,MAAO,MAAM,SAAS,MAAO;AAC1E,SACE,mDAAC,oCACC,mDAAC;AAAA,IACC,cAAc,MAAM;AAAA,IACpB,YAAY,MAAM;AAAA,IAClB,eAAe,MAAM;AAAA,IACrB,aAAa,MAAM;AAAA,IACnB,KAAK,MAAM;AAAA,KAEX,mDAAC;AAAA,IACC,QAAQ,UAAU,MAAM,MAAM,IAAI,GAAG,MAAM;AAAA,IAC3C,YAAW;AAAA,IACX,eAAY;AAAA,KAEZ,mDAAC;AAAA,IACC,QAAQ,MAAM,MAAM;AAAA,IACpB,gBAAe;AAAA,IACf,YAAW;AAAA,IACX,IAAI,MAAM,SAAS,MAAM,UAAU,IAAI,GAAG,MAAM,SAAS;AAAA,KAExD,UAAU,mDAAC,uEAA4B,IAAK,mDAAC;AAAA,IAAkB;AAAA,GAAoB,CACtF,CACF,GACA,mDAAC;AAAA,IAAI,KAAK,MAAM;AAAA,IAAQ,OAAO,EAAE,QAAQ,EAAE;AAAA,GAAG,GAC7C,QACH,CACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,UAAU,8BAAU,QAAQ,WAAW,YAAY,6CAA6C;AAAA,EAEhG,SAAS,8BAAU,KAAK,YAAY,gCAAgC;AAAA,EAEpE,WAAW,8BAAU,KAAK,YAAY,2BAA2B;AACnE;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,kCAAS,cAAc;AAExD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/cjs/SwipeToRefresh/styled.js

@@ -28,23 +28,23 @@ __export(styled_exports, {
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_styled_components = __toESM(require("styled-components"));
-const SwipeContainer = (0, import_styled_components.default)(import_ds_grid.Grid)`
+var import_ds_system = require("@elliemae/ds-system");
+const SwipeContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   transition: height 0.2s;
   overscroll-behavior: none;
   height: 100%;
 `;
-const SwipeDrag = import_styled_components.default.div`
+const SwipeDrag = import_ds_system.styled.div`
   border: none;
   overscroll-behavior: none;
   overflow: auto;
   max-height: 100%;
 `;
-const LoaderBox = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const LoaderBox = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   transition: height 0.2s;
   overflow: hidden;
 `;
-const PositionLoader = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const PositionLoader = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   transition: margin 0.2s;
 `;
 //# sourceMappingURL=styled.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/SwipeToRefresh/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\n\nexport const SwipeContainer = styled(Grid)`\n  transition: height 0.2s;\n  overscroll-behavior: none;\n  height: 100%;\n`;\n\nexport const SwipeDrag = styled.div`\n  border: none;\n  overscroll-behavior: none;\n  overflow: auto;\n  max-height: 100%;\n`;\n\nexport const LoaderBox = styled(Grid)`\n  transition: height 0.2s;\n  overflow: hidden;\n`;\n\nexport const PositionLoader = styled(Grid)`\n  transition: margin 0.2s;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AACrB,+BAAmB;AAEZ,MAAM,iBAAiB,sCAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAMlC,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,YAAY,sCAAO,mBAAI;AAAA;AAAA;AAAA;AAK7B,MAAM,iBAAiB,sCAAO,mBAAI;AAAA;AAAA;",
+  "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\n\nexport const SwipeContainer = styled(Grid)`\n  transition: height 0.2s;\n  overscroll-behavior: none;\n  height: 100%;\n`;\n\nexport const SwipeDrag = styled.div`\n  border: none;\n  overscroll-behavior: none;\n  overflow: auto;\n  max-height: 100%;\n`;\n\nexport const LoaderBox = styled(Grid)`\n  transition: height 0.2s;\n  overflow: hidden;\n`;\n\nexport const PositionLoader = styled(Grid)`\n  transition: margin 0.2s;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AACrB,uBAAuB;AAEhB,MAAM,iBAAiB,6BAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAMlC,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,YAAY,6BAAO,mBAAI;AAAA;AAAA;AAAA;AAK7B,MAAM,iBAAiB,6BAAO,mBAAI;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/Tabs/index.js

@@ -56,7 +56,7 @@ __export(Tabs_exports, {
 });
 module.exports = __toCommonJS(Tabs_exports);
 var React = __toESM(require("react"));
-var import_react_desc = require("react-desc");
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_tabs = require("@elliemae/ds-tabs");
 var import_propTypes = require("./propTypes");
 const DSMobileTabs = (_a) => {
@@ -71,10 +71,10 @@ const DSMobileTab = (_c) => {
 };
 DSMobileTabs.propTypes = import_propTypes.MobileTabsPropTypes;
 DSMobileTabs.displayName = "DSMobileTabs";
-const DSMobileTabsWithSchema = (0, import_react_desc.describe)(DSMobileTabs);
+const DSMobileTabsWithSchema = (0, import_ds_utilities.describe)(DSMobileTabs);
 DSMobileTabsWithSchema.propTypes = import_propTypes.MobileTabsPropTypes;
 DSMobileTab.propTypes = import_propTypes.MobileTabPropTypes;
 DSMobileTab.displayName = "DSMobileTab";
-const DSMobileTabWithSchema = (0, import_react_desc.describe)(DSMobileTab);
+const DSMobileTabWithSchema = (0, import_ds_utilities.describe)(DSMobileTab);
 DSMobileTabWithSchema.propTypes = import_propTypes.MobileTabPropTypes;
 //# sourceMappingURL=index.js.map

package/dist/cjs/Tabs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/Tabs/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport { describe } from 'react-desc';\nimport { DSTabs, DSTab } from '@elliemae/ds-tabs';\nimport type { DSTabsT, DSTabT } from '@elliemae/ds-tabs';\nimport { MobileTabsPropTypes, MobileTabPropTypes } from './propTypes';\n\ntype DSMobileTabsPropsT = Omit<\n  DSTabsT.InternalProps,\n  'animated' | 'enableMouseEvents' | 'allowTextSelection' | 'type' | 'isDSMobile' | 'withCarousel'\n>;\n\ntype DSMobileTabPropsT = Omit<DSTabT.Props, 'isDSMobile'>;\n\nexport const DSMobileTabs = ({ children, ...props }: DSMobileTabsPropsT) => (\n  <DSTabs {...props} isDSMobile>\n    {children}\n  </DSTabs>\n);\n\nexport const DSMobileTab = ({ children, ...props }: DSMobileTabPropsT) => <DSTab {...props}>{children}</DSTab>;\n\nDSMobileTabs.propTypes = MobileTabsPropTypes as WeakValidationMap<unknown>;\nDSMobileTabs.displayName = 'DSMobileTabs';\nconst DSMobileTabsWithSchema = describe(DSMobileTabs);\nDSMobileTabsWithSchema.propTypes = MobileTabsPropTypes;\n\nDSMobileTab.propTypes = MobileTabPropTypes as WeakValidationMap<unknown>;\nDSMobileTab.displayName = 'DSMobileTab';\nconst DSMobileTabWithSchema = describe(DSMobileTab);\nDSMobileTabWithSchema.propTypes = MobileTabPropTypes;\n\nexport { DSMobileTabsWithSchema, DSMobileTabWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,wBAAyB;AACzB,qBAA8B;AAE9B,uBAAwD;AASjD,MAAM,eAAe,CAAC,OAA4C;AAA5C,eAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AAC7B,6CAAC,wDAAW,QAAX;AAAA,IAAkB,YAAU;AAAA,MAC1B,QACH;AAAA;AAGK,MAAM,cAAc,CAAC,OAA2C;AAA3C,eAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AAA4C,6CAAC,yCAAU,QAAQ,QAAS;AAAA;AAEtG,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,yBAAyB,gCAAS,YAAY;AACpD,uBAAuB,YAAY;AAEnC,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,wBAAwB,gCAAS,WAAW;AAClD,sBAAsB,YAAY;",
+  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { DSTabs, DSTab } from '@elliemae/ds-tabs';\nimport type { DSTabsT, DSTabT } from '@elliemae/ds-tabs';\nimport { MobileTabsPropTypes, MobileTabPropTypes } from './propTypes';\n\ntype DSMobileTabsPropsT = Omit<\n  DSTabsT.InternalProps,\n  'animated' | 'enableMouseEvents' | 'allowTextSelection' | 'type' | 'isDSMobile' | 'withCarousel'\n>;\n\ntype DSMobileTabPropsT = Omit<DSTabT.Props, 'isDSMobile'>;\n\nexport const DSMobileTabs = ({ children, ...props }: DSMobileTabsPropsT) => (\n  <DSTabs {...props} isDSMobile>\n    {children}\n  </DSTabs>\n);\n\nexport const DSMobileTab = ({ children, ...props }: DSMobileTabPropsT) => <DSTab {...props}>{children}</DSTab>;\n\nDSMobileTabs.propTypes = MobileTabsPropTypes as WeakValidationMap<unknown>;\nDSMobileTabs.displayName = 'DSMobileTabs';\nconst DSMobileTabsWithSchema = describe(DSMobileTabs);\nDSMobileTabsWithSchema.propTypes = MobileTabsPropTypes;\n\nDSMobileTab.propTypes = MobileTabPropTypes as WeakValidationMap<unknown>;\nDSMobileTab.displayName = 'DSMobileTab';\nconst DSMobileTabWithSchema = describe(DSMobileTab);\nDSMobileTabWithSchema.propTypes = MobileTabPropTypes;\n\nexport { DSMobileTabsWithSchema, DSMobileTabWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAyB;AACzB,qBAA8B;AAE9B,uBAAwD;AASjD,MAAM,eAAe,CAAC,OAA4C;AAA5C,eAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AAC7B,6CAAC,wDAAW,QAAX;AAAA,IAAkB,YAAU;AAAA,MAC1B,QACH;AAAA;AAGK,MAAM,cAAc,CAAC,OAA2C;AAA3C,eAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AAA4C,6CAAC,yCAAU,QAAQ,QAAS;AAAA;AAEtG,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,yBAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;AAEnC,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,wBAAwB,kCAAS,WAAW;AAClD,sBAAsB,YAAY;",
   "names": []
 }

package/dist/cjs/Tabs/propTypes.js

@@ -25,22 +25,22 @@ __export(propTypes_exports, {
 });
 module.exports = __toCommonJS(propTypes_exports);
 var React = __toESM(require("react"));
-var import_react_desc = require("react-desc");
+var import_ds_utilities = require("@elliemae/ds-utilities");
 const MobileTabPropTypes = {
-  tabId: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]).description("Unique Tab id.").defaultValue(""),
-  title: import_react_desc.PropTypes.string.description("Tab title.").defaultValue(""),
-  required: import_react_desc.PropTypes.bool.description("Show a required mark next to the title.").defaultValue(false),
-  disabled: import_react_desc.PropTypes.bool.description("Disables Tab.").defaultValue(false)
+  tabId: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.string, import_ds_utilities.PropTypes.number]).description("Unique Tab id.").defaultValue(""),
+  title: import_ds_utilities.PropTypes.string.description("Tab title.").defaultValue(""),
+  required: import_ds_utilities.PropTypes.bool.description("Show a required mark next to the title.").defaultValue(false),
+  disabled: import_ds_utilities.PropTypes.bool.description("Disables Tab.").defaultValue(false)
 };
 const MobileTabsPropTypes = {
-  onTabChange: import_react_desc.PropTypes.func.description("Handler when a user clicks on a different Tab.").defaultValue("() => {}"),
-  tabBarExtraContent: import_react_desc.PropTypes.element.description("Extra content next to the Tabs Bar.").defaultValue(void 0),
-  onlyRenderActiveTab: import_react_desc.PropTypes.bool.description("Only renders the active Tab in the DOM.").defaultValue(false),
-  fixedTabsHeaders: import_react_desc.PropTypes.bool.description("Enables fixed Tabs mode. Makes Tab Bar non scrollable and adds equal fixed widths.").defaultValue(false),
-  activeTab: import_react_desc.PropTypes.string.description("Passing a value makes DSTabs a controlled component.").defaultValue("First DSTab children."),
-  children: import_react_desc.PropTypes.node.description("Use DSTab component as children.").isRequired,
-  tabsListAriaLabel: import_react_desc.PropTypes.string.description("Aria label for the Tab list.").defaultValue("Tab list."),
-  containerProps: import_react_desc.PropTypes.object.description("Additional properties for the container.").defaultValue({}),
-  innerRef: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.func, import_react_desc.PropTypes.shape({ current: import_react_desc.PropTypes.any })]).description("Ref to the container.").defaultValue(void 0)
+  onTabChange: import_ds_utilities.PropTypes.func.description("Handler when a user clicks on a different Tab.").defaultValue("() => {}"),
+  tabBarExtraContent: import_ds_utilities.PropTypes.element.description("Extra content next to the Tabs Bar.").defaultValue(void 0),
+  onlyRenderActiveTab: import_ds_utilities.PropTypes.bool.description("Only renders the active Tab in the DOM.").defaultValue(false),
+  fixedTabsHeaders: import_ds_utilities.PropTypes.bool.description("Enables fixed Tabs mode. Makes Tab Bar non scrollable and adds equal fixed widths.").defaultValue(false),
+  activeTab: import_ds_utilities.PropTypes.string.description("Passing a value makes DSTabs a controlled component.").defaultValue("First DSTab children."),
+  children: import_ds_utilities.PropTypes.node.description("Use DSTab component as children.").isRequired,
+  tabsListAriaLabel: import_ds_utilities.PropTypes.string.description("Aria label for the Tab list.").defaultValue("Tab list."),
+  containerProps: import_ds_utilities.PropTypes.object.description("Additional properties for the container.").defaultValue({}),
+  innerRef: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.func, import_ds_utilities.PropTypes.shape({ current: import_ds_utilities.PropTypes.any })]).description("Ref to the container.").defaultValue(void 0)
 };
 //# sourceMappingURL=propTypes.js.map

package/dist/cjs/Tabs/propTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/Tabs/propTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { PropTypes } from 'react-desc';\n\nexport const MobileTabPropTypes = {\n  tabId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Unique Tab id.').defaultValue(''),\n  title: PropTypes.string.description('Tab title.').defaultValue(''),\n  required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n  disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n};\n\nexport const MobileTabsPropTypes = {\n  onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n  tabBarExtraContent: PropTypes.element.description('Extra content next to the Tabs Bar.').defaultValue(undefined),\n  onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n  fixedTabsHeaders: PropTypes.bool\n    .description('Enables fixed Tabs mode. Makes Tab Bar non scrollable and adds equal fixed widths.')\n    .defaultValue(false),\n  activeTab: PropTypes.string\n    .description('Passing a value makes DSTabs a controlled component.')\n    .defaultValue('First DSTab children.'),\n  children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n  tabsListAriaLabel: PropTypes.string.description('Aria label for the Tab list.').defaultValue('Tab list.'),\n  containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n    .description('Ref to the container.')\n    .defaultValue(undefined),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAEnB,MAAM,qBAAqB;AAAA,EAChC,OAAO,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EAC9G,OAAO,4BAAU,OAAO,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EACjE,UAAU,4BAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAClG,UAAU,4BAAU,KAAK,YAAY,eAAe,EAAE,aAAa,KAAK;AAC1E;AAEO,MAAM,sBAAsB;AAAA,EACjC,aAAa,4BAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,UAAU;AAAA,EACjH,oBAAoB,4BAAU,QAAQ,YAAY,qCAAqC,EAAE,aAAa,MAAS;AAAA,EAC/G,qBAAqB,4BAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAC7G,kBAAkB,4BAAU,KACzB,YAAY,oFAAoF,EAChG,aAAa,KAAK;AAAA,EACrB,WAAW,4BAAU,OAClB,YAAY,sDAAsD,EAClE,aAAa,uBAAuB;AAAA,EACvC,UAAU,4BAAU,KAAK,YAAY,kCAAkC,EAAE;AAAA,EACzE,mBAAmB,4BAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,WAAW;AAAA,EACxG,gBAAgB,4BAAU,OAAO,YAAY,0CAA0C,EAAE,aAAa,CAAC,CAAC;AAAA,EACxG,UAAU,4BAAU,UAAU,CAAC,4BAAU,MAAM,4BAAU,MAAM,EAAE,SAAS,4BAAU,IAAI,CAAC,CAAC,CAAC,EACxF,YAAY,uBAAuB,EACnC,aAAa,MAAS;AAC3B;",
+  "sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\n\nexport const MobileTabPropTypes = {\n  tabId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Unique Tab id.').defaultValue(''),\n  title: PropTypes.string.description('Tab title.').defaultValue(''),\n  required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n  disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n};\n\nexport const MobileTabsPropTypes = {\n  onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n  tabBarExtraContent: PropTypes.element.description('Extra content next to the Tabs Bar.').defaultValue(undefined),\n  onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n  fixedTabsHeaders: PropTypes.bool\n    .description('Enables fixed Tabs mode. Makes Tab Bar non scrollable and adds equal fixed widths.')\n    .defaultValue(false),\n  activeTab: PropTypes.string\n    .description('Passing a value makes DSTabs a controlled component.')\n    .defaultValue('First DSTab children.'),\n  children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n  tabsListAriaLabel: PropTypes.string.description('Aria label for the Tab list.').defaultValue('Tab list.'),\n  containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n    .description('Ref to the container.')\n    .defaultValue(undefined),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAEnB,MAAM,qBAAqB;AAAA,EAChC,OAAO,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EAC9G,OAAO,8BAAU,OAAO,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EACjE,UAAU,8BAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAClG,UAAU,8BAAU,KAAK,YAAY,eAAe,EAAE,aAAa,KAAK;AAC1E;AAEO,MAAM,sBAAsB;AAAA,EACjC,aAAa,8BAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,UAAU;AAAA,EACjH,oBAAoB,8BAAU,QAAQ,YAAY,qCAAqC,EAAE,aAAa,MAAS;AAAA,EAC/G,qBAAqB,8BAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAC7G,kBAAkB,8BAAU,KACzB,YAAY,oFAAoF,EAChG,aAAa,KAAK;AAAA,EACrB,WAAW,8BAAU,OAClB,YAAY,sDAAsD,EAClE,aAAa,uBAAuB;AAAA,EACvC,UAAU,8BAAU,KAAK,YAAY,kCAAkC,EAAE;AAAA,EACzE,mBAAmB,8BAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,WAAW;AAAA,EACxG,gBAAgB,8BAAU,OAAO,YAAY,0CAA0C,EAAE,aAAa,CAAC,CAAC;AAAA,EACxG,UAAU,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,EAAE,SAAS,8BAAU,IAAI,CAAC,CAAC,CAAC,EACxF,YAAY,uBAAuB,EACnC,aAAa,MAAS;AAC3B;",
   "names": []
 }

package/dist/esm/Accordion/DSMobileAccordion.js

@@ -30,7 +30,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import * as React from "react";
-import { describe } from "react-desc";
+import { describe } from "@elliemae/ds-utilities";
 import { DSAccordion, DSAccordionItem } from "@elliemae/ds-accordion";
 import { mobileAccordionItemPropTypes, mobileAccordionPropTypes } from "./react-desc-prop-types";
 const DSMobileAccordion = (_a) => {

package/dist/esm/Accordion/DSMobileAccordion.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Accordion/DSMobileAccordion.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from 'react-desc';\nimport { DSAccordion, DSAccordionItem } from '@elliemae/ds-accordion';\nimport type { DSAccordionT } from '@elliemae/ds-accordion';\nimport { mobileAccordionItemPropTypes, mobileAccordionPropTypes } from './react-desc-prop-types';\n\ntype DSMobileAccordionPropsT = Omit<DSAccordionT.Props, 'isDSMobile'>;\n\nexport const DSMobileAccordion = ({ children, ...props }: DSMobileAccordionPropsT) => (\n  <DSAccordion {...props} isDSMobile>\n    {children}\n  </DSAccordion>\n);\n\nexport const DSMobileAccordionItem = ({ children, ...props }: DSAccordionT.ItemProps) => (\n  <DSAccordionItem {...props}>{children}</DSAccordionItem>\n);\n\nDSMobileAccordionItem.displayName = 'DSMobileAccordionItem';\nconst DSMobileAccordionItemWithSchema = describe(DSMobileAccordionItem);\nDSMobileAccordionItemWithSchema.propTypes = mobileAccordionItemPropTypes;\n\nDSMobileAccordion.displayName = 'DSMobileAccordion';\nconst DSMobileAccordionWithSchema = describe(DSMobileAccordion);\nDSMobileAccordionWithSchema.propTypes = mobileAccordionPropTypes;\n\nexport { DSMobileAccordionItemWithSchema, DSMobileAccordionWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from '@elliemae/ds-utilities';\nimport { DSAccordion, DSAccordionItem } from '@elliemae/ds-accordion';\nimport type { DSAccordionT } from '@elliemae/ds-accordion';\nimport { mobileAccordionItemPropTypes, mobileAccordionPropTypes } from './react-desc-prop-types';\n\ntype DSMobileAccordionPropsT = Omit<DSAccordionT.Props, 'isDSMobile'>;\n\nexport const DSMobileAccordion = ({ children, ...props }: DSMobileAccordionPropsT) => (\n  <DSAccordion {...props} isDSMobile>\n    {children}\n  </DSAccordion>\n);\n\nexport const DSMobileAccordionItem = ({ children, ...props }: DSAccordionT.ItemProps) => (\n  <DSAccordionItem {...props}>{children}</DSAccordionItem>\n);\n\nDSMobileAccordionItem.displayName = 'DSMobileAccordionItem';\nconst DSMobileAccordionItemWithSchema = describe(DSMobileAccordionItem);\nDSMobileAccordionItemWithSchema.propTypes = mobileAccordionItemPropTypes;\n\nDSMobileAccordion.displayName = 'DSMobileAccordion';\nconst DSMobileAccordionWithSchema = describe(DSMobileAccordion);\nDSMobileAccordionWithSchema.propTypes = mobileAccordionPropTypes;\n\nexport { DSMobileAccordionItemWithSchema, DSMobileAccordionWithSchema };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAEA;AAIO,MAAM,oBAAoB,CAAC,OAAiD;AAAjD,eAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AAClC,6CAAC,8CAAgB,QAAhB;AAAA,IAAuB,YAAU;AAAA,MAC/B,QACH;AAAA;AAGK,MAAM,wBAAwB,CAAC,OAAgD;AAAhD,eAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AACtC,6CAAC,oCAAoB,QAAQ,QAAS;AAAA;AAGxC,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,SAAS,qBAAqB;AACtE,gCAAgC,YAAY;AAE5C,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
   "names": []
 }

package/dist/esm/CategoryBox/CategoryBox.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import React2 from "react";
 import { times } from "lodash";
-import { PropTypes, describe } from "react-desc";
-import styled from "styled-components";
+import { PropTypes, describe } from "@elliemae/ds-utilities";
+import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { truncate } from "@elliemae/ds-system";
 const Title = styled.h3`