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

package/dist/cjs/MobileFilterbar/Filterbar.js

@@ -26,16 +26,16 @@ __export(Filterbar_exports, {
 module.exports = __toCommonJS(Filterbar_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_react_desc = require("react-desc");
 var import_ds_system = require("@elliemae/ds-system");
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_system2 = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_MobileSeparator = __toESM(require("../MobileSeparator"));
-const Bar = import_styled_components.default.div`
+const Bar = import_ds_system.styled.div`
   display: flex;
   overflow: auto;
   background-color: ${(props) => props.theme.colors.neutral["000"]};
-  padding-left: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xs)};
+  padding-left: ${(props) => (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xs)};
   & > * {
     flex-shrink: 0;
   }
@@ -44,7 +44,7 @@ const Bar = import_styled_components.default.div`
     display: none;
   }
 `;
-const Separator = import_styled_components.default.div`
+const Separator = import_ds_system.styled.div`
   & > * {
     margin: 0;
   }
@@ -57,10 +57,10 @@ const DSMobileFilterbar = ({ children }) => /* @__PURE__ */ import_react.default
   color: ["neutral", "300"]
 })));
 const filterbarProps = {
-  children: import_react_desc.PropTypes.element.description("FilterBar Items").isRequired
+  children: import_ds_utilities.PropTypes.element.description("FilterBar Items").isRequired
 };
 DSMobileFilterbar.propTypes = filterbarProps;
 DSMobileFilterbar.displayName = "DSMobileFilterbar";
-const FilterbarWithSchema = (0, import_react_desc.describe)(DSMobileFilterbar);
+const FilterbarWithSchema = (0, import_ds_utilities.describe)(DSMobileFilterbar);
 FilterbarWithSchema.propTypes = filterbarProps;
 //# sourceMappingURL=Filterbar.js.map

package/dist/cjs/MobileFilterbar/Filterbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MobileFilterbar/Filterbar.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { describe, PropTypes } from 'react-desc';\nimport { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport MobileSeparator from '../MobileSeparator';\n\nconst Bar = styled.div`\n  display: flex;\n  overflow: auto;\n  background-color: ${(props) => props.theme.colors.neutral['000']};\n  padding-left: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n  & > * {\n    flex-shrink: 0;\n  }\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nconst Separator = styled.div`\n  & > * {\n    margin: 0;\n  }\n`;\n\nconst DSMobileFilterbar = ({ children }) => (\n  <Grid rows={['auto', 'auto']} data-testid=\"filter-bar-wrapper\">\n    <Bar>{children}</Bar>\n    <Separator>\n      <MobileSeparator margin=\"xxs\" color={['neutral', '300']} />\n    </Separator>\n  </Grid>\n);\n\nconst filterbarProps = {\n  children: PropTypes.element.description('FilterBar Items').isRequired,\n};\n\nDSMobileFilterbar.propTypes = filterbarProps;\nDSMobileFilterbar.displayName = 'DSMobileFilterbar';\nconst FilterbarWithSchema = describe(DSMobileFilterbar);\nFilterbarWithSchema.propTypes = filterbarProps;\n\nexport { DSMobileFilterbar, FilterbarWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,+BAAmB;AACnB,wBAAoC;AACpC,uBAAyC;AACzC,qBAAqB;AACrB,6BAA4B;AAE5B,MAAM,MAAM,iCAAO;AAAA;AAAA;AAAA,sBAGG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,kBAC1C,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1E,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,oBAAoB,CAAC,EAAE,eAC3B,mDAAC;AAAA,EAAK,MAAM,CAAC,QAAQ,MAAM;AAAA,EAAG,eAAY;AAAA,GACxC,mDAAC,WAAK,QAAS,GACf,mDAAC,iBACC,mDAAC;AAAA,EAAgB,QAAO;AAAA,EAAM,OAAO,CAAC,WAAW,KAAK;AAAA,CAAG,CAC3D,CACF;AAGF,MAAM,iBAAiB;AAAA,EACrB,UAAU,4BAAU,QAAQ,YAAY,iBAAiB,EAAE;AAC7D;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,sBAAsB,gCAAS,iBAAiB;AACtD,oBAAoB,YAAY;",
+  "sourcesContent": ["/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport MobileSeparator from '../MobileSeparator';\n\nconst Bar = styled.div`\n  display: flex;\n  overflow: auto;\n  background-color: ${(props) => props.theme.colors.neutral['000']};\n  padding-left: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n  & > * {\n    flex-shrink: 0;\n  }\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nconst Separator = styled.div`\n  & > * {\n    margin: 0;\n  }\n`;\n\nconst DSMobileFilterbar = ({ children }) => (\n  <Grid rows={['auto', 'auto']} data-testid=\"filter-bar-wrapper\">\n    <Bar>{children}</Bar>\n    <Separator>\n      <MobileSeparator margin=\"xxs\" color={['neutral', '300']} />\n    </Separator>\n  </Grid>\n);\n\nconst filterbarProps = {\n  children: PropTypes.element.description('FilterBar Items').isRequired,\n};\n\nDSMobileFilterbar.propTypes = filterbarProps;\nDSMobileFilterbar.displayName = 'DSMobileFilterbar';\nconst FilterbarWithSchema = describe(DSMobileFilterbar);\nFilterbarWithSchema.propTypes = filterbarProps;\n\nexport { DSMobileFilterbar, FilterbarWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,uBAAuB;AACvB,0BAAoC;AACpC,wBAAyC;AACzC,qBAAqB;AACrB,6BAA4B;AAE5B,MAAM,MAAM,wBAAO;AAAA;AAAA;AAAA,sBAGG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,kBAC1C,CAAC,UAAU,gDAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1E,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,oBAAoB,CAAC,EAAE,eAC3B,mDAAC;AAAA,EAAK,MAAM,CAAC,QAAQ,MAAM;AAAA,EAAG,eAAY;AAAA,GACxC,mDAAC,WAAK,QAAS,GACf,mDAAC,iBACC,mDAAC;AAAA,EAAgB,QAAO;AAAA,EAAM,OAAO,CAAC,WAAW,KAAK;AAAA,CAAG,CAC3D,CACF;AAGF,MAAM,iBAAiB;AAAA,EACrB,UAAU,8BAAU,QAAQ,YAAY,iBAAiB,EAAE;AAC7D;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,sBAAsB,kCAAS,iBAAiB;AACtD,oBAAoB,YAAY;",
   "names": []
 }

package/dist/cjs/MobileFilterbar/FilterbarItem.js

@@ -26,7 +26,7 @@ __export(FilterbarItem_exports, {
 module.exports = __toCommonJS(FilterbarItem_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_grid = require("@elliemae/ds-grid");
 const DSMobileFilterbarItem = ({ children, onClick }) => /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
   "data-testid": "filter-bar-item-wrapper",
@@ -37,11 +37,11 @@ const DSMobileFilterbarItem = ({ children, onClick }) => /* @__PURE__ */ import_
   onClick
 }, children);
 const filterbarItemProps = {
-  children: import_react_desc.PropTypes.element.description("FilterBar Items").isRequired,
-  onClick: import_react_desc.PropTypes.func.description("Function executed when clicking filterbar item")
+  children: import_ds_utilities.PropTypes.element.description("FilterBar Items").isRequired,
+  onClick: import_ds_utilities.PropTypes.func.description("Function executed when clicking filterbar item")
 };
 DSMobileFilterbarItem.propTypes = filterbarItemProps;
 DSMobileFilterbarItem.displayName = "DSMobileFilterbarItem";
-const FilterbarItemWithSchema = (0, import_react_desc.describe)(DSMobileFilterbarItem);
+const FilterbarItemWithSchema = (0, import_ds_utilities.describe)(DSMobileFilterbarItem);
 FilterbarItemWithSchema.propTypes = filterbarItemProps;
 //# sourceMappingURL=FilterbarItem.js.map

package/dist/cjs/MobileFilterbar/FilterbarItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MobileFilterbar/FilterbarItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst DSMobileFilterbarItem = ({ children, onClick }) => (\n  <Grid data-testid=\"filter-bar-item-wrapper\" cols={['min-content']} pr=\"xxs\" pt=\"xxs\" role=\"button\" onClick={onClick}>\n    {children}\n  </Grid>\n);\nconst filterbarItemProps = {\n  children: PropTypes.element.description('FilterBar Items').isRequired,\n  onClick: PropTypes.func.description('Function executed when clicking filterbar item'),\n};\n\nDSMobileFilterbarItem.propTypes = filterbarItemProps;\nDSMobileFilterbarItem.displayName = 'DSMobileFilterbarItem';\nconst FilterbarItemWithSchema = describe(DSMobileFilterbarItem);\nFilterbarItemWithSchema.propTypes = filterbarItemProps;\n\nexport { DSMobileFilterbarItem, FilterbarItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAoC;AACpC,qBAAqB;AAErB,MAAM,wBAAwB,CAAC,EAAE,UAAU,cACzC,mDAAC;AAAA,EAAK,eAAY;AAAA,EAA0B,MAAM,CAAC,aAAa;AAAA,EAAG,IAAG;AAAA,EAAM,IAAG;AAAA,EAAM,MAAK;AAAA,EAAS;AAAA,GAChG,QACH;AAEF,MAAM,qBAAqB;AAAA,EACzB,UAAU,4BAAU,QAAQ,YAAY,iBAAiB,EAAE;AAAA,EAC3D,SAAS,4BAAU,KAAK,YAAY,gDAAgD;AACtF;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,0BAA0B,gCAAS,qBAAqB;AAC9D,wBAAwB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst DSMobileFilterbarItem = ({ children, onClick }) => (\n  <Grid data-testid=\"filter-bar-item-wrapper\" cols={['min-content']} pr=\"xxs\" pt=\"xxs\" role=\"button\" onClick={onClick}>\n    {children}\n  </Grid>\n);\nconst filterbarItemProps = {\n  children: PropTypes.element.description('FilterBar Items').isRequired,\n  onClick: PropTypes.func.description('Function executed when clicking filterbar item'),\n};\n\nDSMobileFilterbarItem.propTypes = filterbarItemProps;\nDSMobileFilterbarItem.displayName = 'DSMobileFilterbarItem';\nconst FilterbarItemWithSchema = describe(DSMobileFilterbarItem);\nFilterbarItemWithSchema.propTypes = filterbarItemProps;\n\nexport { DSMobileFilterbarItem, FilterbarItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAoC;AACpC,qBAAqB;AAErB,MAAM,wBAAwB,CAAC,EAAE,UAAU,cACzC,mDAAC;AAAA,EAAK,eAAY;AAAA,EAA0B,MAAM,CAAC,aAAa;AAAA,EAAG,IAAG;AAAA,EAAM,IAAG;AAAA,EAAM,MAAK;AAAA,EAAS;AAAA,GAChG,QACH;AAEF,MAAM,qBAAqB;AAAA,EACzB,UAAU,8BAAU,QAAQ,YAAY,iBAAiB,EAAE;AAAA,EAC3D,SAAS,8BAAU,KAAK,YAAY,gDAAgD;AACtF;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,0BAA0B,kCAAS,qBAAqB;AAC9D,wBAAwB,YAAY;",
   "names": []
 }

package/dist/cjs/MobileFilterbar/FilterbarSort.js

@@ -26,11 +26,11 @@ __export(FilterbarSort_exports, {
 module.exports = __toCommonJS(FilterbarSort_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");
 var import_MobileSeparator = __toESM(require("../MobileSeparator"));
-const Separator = import_styled_components.default.div`
+const Separator = import_ds_system.styled.div`
   & > * {
     margin-left: 0;
   }
@@ -45,10 +45,10 @@ const DSMobileFilterbarSort = ({ children }) => /* @__PURE__ */ import_react.def
   color: ["neutral", "300"]
 }))));
 const filterbarSortProps = {
-  children: import_react_desc.PropTypes.element.description("FilterBar Sort Item").isRequired
+  children: import_ds_utilities.PropTypes.element.description("FilterBar Sort Item").isRequired
 };
 DSMobileFilterbarSort.propTypes = filterbarSortProps;
 DSMobileFilterbarSort.displayName = "DSMobileFilterbarSort";
-const FilterbarSortWithSchema = (0, import_react_desc.describe)(DSMobileFilterbarSort);
+const FilterbarSortWithSchema = (0, import_ds_utilities.describe)(DSMobileFilterbarSort);
 FilterbarSortWithSchema.propTypes = filterbarSortProps;
 //# sourceMappingURL=FilterbarSort.js.map

package/dist/cjs/MobileFilterbar/FilterbarSort.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MobileFilterbar/FilterbarSort.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 MobileSeparator from '../MobileSeparator';\n\nconst Separator = styled.div`\n  & > * {\n    margin-left: 0;\n  }\n`;\n\nconst DSMobileFilterbarSort = ({ children }) => (\n  <>\n    {children}\n    <Grid pb=\"xxs\" pt=\"xxs\" cols={['min-content']}>\n      <Separator>\n        <MobileSeparator margin=\"xxs\" direction=\"vertical\" color={['neutral', '300']} />\n      </Separator>\n    </Grid>\n  </>\n);\n\nconst filterbarSortProps = {\n  children: PropTypes.element.description('FilterBar Sort Item').isRequired,\n};\n\nDSMobileFilterbarSort.propTypes = filterbarSortProps;\nDSMobileFilterbarSort.displayName = 'DSMobileFilterbarSort';\nconst FilterbarSortWithSchema = describe(DSMobileFilterbarSort);\nFilterbarSortWithSchema.propTypes = filterbarSortProps;\n\nexport { DSMobileFilterbarSort, FilterbarSortWithSchema };\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,6BAA4B;AAE5B,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,wBAAwB,CAAC,EAAE,eAC/B,wFACG,UACD,mDAAC;AAAA,EAAK,IAAG;AAAA,EAAM,IAAG;AAAA,EAAM,MAAM,CAAC,aAAa;AAAA,GAC1C,mDAAC,iBACC,mDAAC;AAAA,EAAgB,QAAO;AAAA,EAAM,WAAU;AAAA,EAAW,OAAO,CAAC,WAAW,KAAK;AAAA,CAAG,CAChF,CACF,CACF;AAGF,MAAM,qBAAqB;AAAA,EACzB,UAAU,4BAAU,QAAQ,YAAY,qBAAqB,EAAE;AACjE;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,0BAA0B,gCAAS,qBAAqB;AAC9D,wBAAwB,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 MobileSeparator from '../MobileSeparator';\n\nconst Separator = styled.div`\n  & > * {\n    margin-left: 0;\n  }\n`;\n\nconst DSMobileFilterbarSort = ({ children }) => (\n  <>\n    {children}\n    <Grid pb=\"xxs\" pt=\"xxs\" cols={['min-content']}>\n      <Separator>\n        <MobileSeparator margin=\"xxs\" direction=\"vertical\" color={['neutral', '300']} />\n      </Separator>\n    </Grid>\n  </>\n);\n\nconst filterbarSortProps = {\n  children: PropTypes.element.description('FilterBar Sort Item').isRequired,\n};\n\nDSMobileFilterbarSort.propTypes = filterbarSortProps;\nDSMobileFilterbarSort.displayName = 'DSMobileFilterbarSort';\nconst FilterbarSortWithSchema = describe(DSMobileFilterbarSort);\nFilterbarSortWithSchema.propTypes = filterbarSortProps;\n\nexport { DSMobileFilterbarSort, FilterbarSortWithSchema };\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,6BAA4B;AAE5B,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,wBAAwB,CAAC,EAAE,eAC/B,wFACG,UACD,mDAAC;AAAA,EAAK,IAAG;AAAA,EAAM,IAAG;AAAA,EAAM,MAAM,CAAC,aAAa;AAAA,GAC1C,mDAAC,iBACC,mDAAC;AAAA,EAAgB,QAAO;AAAA,EAAM,WAAU;AAAA,EAAW,OAAO,CAAC,WAAW,KAAK;AAAA,CAAG,CAChF,CACF,CACF;AAGF,MAAM,qBAAqB;AAAA,EACzB,UAAU,8BAAU,QAAQ,YAAY,qBAAqB,EAAE;AACjE;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,0BAA0B,kCAAS,qBAAqB;AAC9D,wBAAwB,YAAY;",
   "names": []
 }

package/dist/cjs/MobileFooter/Action.js

@@ -26,13 +26,11 @@ __export(Action_exports, {
 module.exports = __toCommonJS(Action_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_styled_components2 = require("@xstyled/styled-components");
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_react_desc = require("react-desc");
-const Label = import_styled_components.default.span`
-  ${import_styled_components2.typography}
+var import_ds_utilities = require("@elliemae/ds-utilities");
+const Label = import_ds_system.styled.span`
+  ${import_ds_system.typography}
   ${(0, import_ds_system.color)("neutral", "800")}
   padding-bottom: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xxs)};
   padding-top: calc(${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xxs)} / 2);
@@ -55,12 +53,12 @@ const DSMobileFooterAction = ({ label, icon, onClick }) => /* @__PURE__ */ impor
   fontSize: "11px"
 }, label)));
 const actionProps = {
-  label: import_react_desc.PropTypes.string.description("Action label"),
-  icon: import_react_desc.PropTypes.element.description("Action icon"),
-  onClick: import_react_desc.PropTypes.func.description("onClick callback")
+  label: import_ds_utilities.PropTypes.string.description("Action label"),
+  icon: import_ds_utilities.PropTypes.element.description("Action icon"),
+  onClick: import_ds_utilities.PropTypes.func.description("onClick callback")
 };
 DSMobileFooterAction.propTypes = actionProps;
 DSMobileFooterAction.displayName = "DSMobileFooterAction";
-const DSMobileFooterActionWithSchema = (0, import_react_desc.describe)(DSMobileFooterAction).description("Mobile footer action");
+const DSMobileFooterActionWithSchema = (0, import_ds_utilities.describe)(DSMobileFooterAction).description("Mobile footer action");
 DSMobileFooterActionWithSchema.propTypes = actionProps;
 //# sourceMappingURL=Action.js.map

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,20 +50,19 @@ 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,
+    height: "40px",
     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, {
-    alignItems: "center",
-    justifyContent: "center"
+    alignItems: "center"
   }, leftAddon), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
     alignItems: "center"
   }, /* @__PURE__ */ import_react.default.createElement(StyledTitle, null, title)), rightAddon && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
@@ -71,17 +70,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=\"40px\"\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 && <Grid alignItems=\"center\">{leftAddon}</Grid>}\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,QAAO;AAAA,IACP,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,aAAa,mDAAC;AAAA,IAAK,YAAW;AAAA,KAAU,SAAU,GACnD,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": []
 }