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

package/dist/cjs/Accordion/DSMobileAccordion.js

@@ -56,7 +56,7 @@ __export(DSMobileAccordion_exports, {
 });
 module.exports = __toCommonJS(DSMobileAccordion_exports);
 var React = __toESM(require("react"));
-var import_react_desc = require("react-desc");
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_accordion = require("@elliemae/ds-accordion");
 var import_react_desc_prop_types = require("./react-desc-prop-types");
 const DSMobileAccordion = (_a) => {
@@ -70,9 +70,9 @@ const DSMobileAccordionItem = (_c) => {
   return /* @__PURE__ */ React.createElement(import_ds_accordion.DSAccordionItem, __spreadValues({}, props), children);
 };
 DSMobileAccordionItem.displayName = "DSMobileAccordionItem";
-const DSMobileAccordionItemWithSchema = (0, import_react_desc.describe)(DSMobileAccordionItem);
+const DSMobileAccordionItemWithSchema = (0, import_ds_utilities.describe)(DSMobileAccordionItem);
 DSMobileAccordionItemWithSchema.propTypes = import_react_desc_prop_types.mobileAccordionItemPropTypes;
 DSMobileAccordion.displayName = "DSMobileAccordion";
-const DSMobileAccordionWithSchema = (0, import_react_desc.describe)(DSMobileAccordion);
+const DSMobileAccordionWithSchema = (0, import_ds_utilities.describe)(DSMobileAccordion);
 DSMobileAccordionWithSchema.propTypes = import_react_desc_prop_types.mobileAccordionPropTypes;
 //# sourceMappingURL=DSMobileAccordion.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/Accordion/DSMobileAccordion.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAyB;AACzB,0BAA6C;AAE7C,mCAAuE;AAIhE,MAAM,oBAAoB,CAAC,OAAiD;AAAjD,eAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AAClC,6CAAC,kEAAgB,QAAhB;AAAA,IAAuB,YAAU;AAAA,MAC/B,QACH;AAAA;AAGK,MAAM,wBAAwB,CAAC,OAAgD;AAAhD,eAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AACtC,6CAAC,wDAAoB,QAAQ,QAAS;AAAA;AAGxC,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,gCAAS,qBAAqB;AACtE,gCAAgC,YAAY;AAE5C,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,gCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAyB;AACzB,0BAA6C;AAE7C,mCAAuE;AAIhE,MAAM,oBAAoB,CAAC,OAAiD;AAAjD,eAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AAClC,6CAAC,kEAAgB,QAAhB;AAAA,IAAuB,YAAU;AAAA,MAC/B,QACH;AAAA;AAGK,MAAM,wBAAwB,CAAC,OAAgD;AAAhD,eAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AACtC,6CAAC,wDAAoB,QAAQ,QAAS;AAAA;AAGxC,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,kCAAS,qBAAqB;AACtE,gCAAgC,YAAY;AAE5C,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
   "names": []
 }

package/dist/cjs/CategoryBox/CategoryBox.js

@@ -27,19 +27,19 @@ module.exports = __toCommonJS(CategoryBox_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_lodash = require("lodash");
-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 Title = import_styled_components.default.h3`
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_system2 = require("@elliemae/ds-system");
+const Title = import_ds_system.styled.h3`
   font-size: 18px;
   margin: 0;
   color: ${(props2) => props2.theme.colors.neutral["700"]};
   line-height: inherit;
-  ${(0, import_ds_system.truncate)()}
+  ${(0, import_ds_system2.truncate)()}
   font-weight: ${(props2) => props2.theme.fontWeights.semibold};
 `;
-const CategoryBox = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const CategoryBox = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   background: ${(props2) => props2.theme.colors.neutral["0"]};
   border-top: ${(props2) => props2.borderTop ? `1px solid ${props2.theme.colors.neutral["100"]}` : "none"};
 `;
@@ -64,14 +64,14 @@ const DSCategoryBox = ({ borderTop = true, actionsRight = [], title, headerLevel
   }, actionsRight)), children);
 };
 const props = {
-  title: import_react_desc.PropTypes.string.isRequired.description("Category Box title"),
-  borderTop: import_react_desc.PropTypes.bool.description("Toggle border top of category box"),
-  actionsRight: import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.element).description("Array of button icons"),
-  headerLevel: import_react_desc.PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description("semantic level of header tag for the title"),
-  children: import_react_desc.PropTypes.element.description("In-box children")
+  title: import_ds_utilities.PropTypes.string.isRequired.description("Category Box title"),
+  borderTop: import_ds_utilities.PropTypes.bool.description("Toggle border top of category box"),
+  actionsRight: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.element).description("Array of button icons"),
+  headerLevel: import_ds_utilities.PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description("semantic level of header tag for the title"),
+  children: import_ds_utilities.PropTypes.element.description("In-box children")
 };
 DSCategoryBox.propTypes = props;
 DSCategoryBox.displayName = "DSCategoryBox";
-const DSCategoryBoxWithSchema = (0, import_react_desc.describe)(DSCategoryBox);
+const DSCategoryBoxWithSchema = (0, import_ds_utilities.describe)(DSCategoryBox);
 DSCategoryBoxWithSchema.propTypes = props;
 //# sourceMappingURL=CategoryBox.js.map

package/dist/cjs/CategoryBox/CategoryBox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/CategoryBox/CategoryBox.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { times } from 'lodash';\nimport { PropTypes, describe } from 'react-desc';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { truncate } from '@elliemae/ds-system';\n\nconst Title = styled.h3`\n  font-size: 18px;\n  margin: 0;\n  color: ${(props) => props.theme.colors.neutral['700']};\n  line-height: inherit;\n  ${truncate()}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n`;\n\nconst CategoryBox = styled(Grid)`\n  background: ${(props) => props.theme.colors.neutral['0']};\n  border-top: ${(props) => (props.borderTop ? `1px solid ${props.theme.colors.neutral['100']}` : 'none')};\n`;\n\nconst DSCategoryBox = ({ borderTop = true, actionsRight = [], title, headerLevel = 3, children }) => {\n  const rows = ['auto'];\n  const hasActions = actionsRight.length > 0;\n  if (hasActions) rows.push('auto');\n\n  return (\n    <Grid rows={['40px', 'auto']}>\n      <CategoryBox\n        cols={rows}\n        borderTop={borderTop}\n        alignItems=\"center\"\n        pl=\"xs\"\n        pr={actionsRight.length > 0 ? 'xxs' : 'xs'}\n      >\n        <Title as={`h${headerLevel}`}>{title}</Title>\n        {hasActions && (\n          <Grid cols={times(actionsRight.length, () => 'auto')} justifySelf=\"end\">\n            {actionsRight}\n          </Grid>\n        )}\n      </CategoryBox>\n      {children}\n    </Grid>\n  );\n};\n\nconst props = {\n  /**\n   * Category Box title\n   */\n  title: PropTypes.string.isRequired.description('Category Box title'),\n  /**\n   * Toggle border top of category box\n   */\n  borderTop: PropTypes.bool.description('Toggle border top of category box'),\n  /**\n   * Array of button icons\n   */\n  actionsRight: PropTypes.arrayOf(PropTypes.element).description('Array of button icons'),\n  /**\n   * semantic level of header tag for the title\n   */\n  headerLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description('semantic level of header tag for the title'),\n  /**\n   * In-box children\n   */\n  children: PropTypes.element.description('In-box children'),\n};\n\nDSCategoryBox.propTypes = props;\nDSCategoryBox.displayName = 'DSCategoryBox';\nconst DSCategoryBoxWithSchema = describe(DSCategoryBox);\nDSCategoryBoxWithSchema.propTypes = props;\n\nexport { DSCategoryBox, DSCategoryBoxWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAAsB;AACtB,wBAAoC;AACpC,+BAAmB;AACnB,qBAAqB;AACrB,uBAAyB;AAEzB,MAAM,QAAQ,iCAAO;AAAA;AAAA;AAAA,WAGV,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,IAE7C,+BAAS;AAAA,iBACI,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA;AAGpD,MAAM,cAAc,sCAAO,mBAAI;AAAA,gBACf,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,gBACtC,CAAC,WAAW,OAAM,YAAY,aAAa,OAAM,MAAM,OAAO,QAAQ,WAAW;AAAA;AAGjG,MAAM,gBAAgB,CAAC,EAAE,YAAY,MAAM,eAAe,CAAC,GAAG,OAAO,cAAc,GAAG,eAAe;AACnG,QAAM,OAAO,CAAC,MAAM;AACpB,QAAM,aAAa,aAAa,SAAS;AACzC,MAAI;AAAY,SAAK,KAAK,MAAM;AAEhC,SACE,mDAAC;AAAA,IAAK,MAAM,CAAC,QAAQ,MAAM;AAAA,KACzB,mDAAC;AAAA,IACC,MAAM;AAAA,IACN;AAAA,IACA,YAAW;AAAA,IACX,IAAG;AAAA,IACH,IAAI,aAAa,SAAS,IAAI,QAAQ;AAAA,KAEtC,mDAAC;AAAA,IAAM,IAAI,IAAI;AAAA,KAAgB,KAAM,GACpC,cACC,mDAAC;AAAA,IAAK,MAAM,yBAAM,aAAa,QAAQ,MAAM,MAAM;AAAA,IAAG,aAAY;AAAA,KAC/D,YACH,CAEJ,GACC,QACH;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAIZ,OAAO,4BAAU,OAAO,WAAW,YAAY,oBAAoB;AAAA,EAInE,WAAW,4BAAU,KAAK,YAAY,mCAAmC;AAAA,EAIzE,cAAc,4BAAU,QAAQ,4BAAU,OAAO,EAAE,YAAY,uBAAuB;AAAA,EAItF,aAAa,4BAAU,MAAM,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,YAAY,4CAA4C;AAAA,EAIzG,UAAU,4BAAU,QAAQ,YAAY,iBAAiB;AAC3D;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,0BAA0B,gCAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { times } from 'lodash';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { truncate } from '@elliemae/ds-system';\n\nconst Title = styled.h3`\n  font-size: 18px;\n  margin: 0;\n  color: ${(props) => props.theme.colors.neutral['700']};\n  line-height: inherit;\n  ${truncate()}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n`;\n\nconst CategoryBox = styled(Grid)`\n  background: ${(props) => props.theme.colors.neutral['0']};\n  border-top: ${(props) => (props.borderTop ? `1px solid ${props.theme.colors.neutral['100']}` : 'none')};\n`;\n\nconst DSCategoryBox = ({ borderTop = true, actionsRight = [], title, headerLevel = 3, children }) => {\n  const rows = ['auto'];\n  const hasActions = actionsRight.length > 0;\n  if (hasActions) rows.push('auto');\n\n  return (\n    <Grid rows={['40px', 'auto']}>\n      <CategoryBox\n        cols={rows}\n        borderTop={borderTop}\n        alignItems=\"center\"\n        pl=\"xs\"\n        pr={actionsRight.length > 0 ? 'xxs' : 'xs'}\n      >\n        <Title as={`h${headerLevel}`}>{title}</Title>\n        {hasActions && (\n          <Grid cols={times(actionsRight.length, () => 'auto')} justifySelf=\"end\">\n            {actionsRight}\n          </Grid>\n        )}\n      </CategoryBox>\n      {children}\n    </Grid>\n  );\n};\n\nconst props = {\n  /**\n   * Category Box title\n   */\n  title: PropTypes.string.isRequired.description('Category Box title'),\n  /**\n   * Toggle border top of category box\n   */\n  borderTop: PropTypes.bool.description('Toggle border top of category box'),\n  /**\n   * Array of button icons\n   */\n  actionsRight: PropTypes.arrayOf(PropTypes.element).description('Array of button icons'),\n  /**\n   * semantic level of header tag for the title\n   */\n  headerLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description('semantic level of header tag for the title'),\n  /**\n   * In-box children\n   */\n  children: PropTypes.element.description('In-box children'),\n};\n\nDSCategoryBox.propTypes = props;\nDSCategoryBox.displayName = 'DSCategoryBox';\nconst DSCategoryBoxWithSchema = describe(DSCategoryBox);\nDSCategoryBoxWithSchema.propTypes = props;\n\nexport { DSCategoryBox, DSCategoryBoxWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAAsB;AACtB,0BAAoC;AACpC,uBAAuB;AACvB,qBAAqB;AACrB,wBAAyB;AAEzB,MAAM,QAAQ,wBAAO;AAAA;AAAA;AAAA,WAGV,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,IAE7C,gCAAS;AAAA,iBACI,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA;AAGpD,MAAM,cAAc,6BAAO,mBAAI;AAAA,gBACf,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,gBACtC,CAAC,WAAW,OAAM,YAAY,aAAa,OAAM,MAAM,OAAO,QAAQ,WAAW;AAAA;AAGjG,MAAM,gBAAgB,CAAC,EAAE,YAAY,MAAM,eAAe,CAAC,GAAG,OAAO,cAAc,GAAG,eAAe;AACnG,QAAM,OAAO,CAAC,MAAM;AACpB,QAAM,aAAa,aAAa,SAAS;AACzC,MAAI;AAAY,SAAK,KAAK,MAAM;AAEhC,SACE,mDAAC;AAAA,IAAK,MAAM,CAAC,QAAQ,MAAM;AAAA,KACzB,mDAAC;AAAA,IACC,MAAM;AAAA,IACN;AAAA,IACA,YAAW;AAAA,IACX,IAAG;AAAA,IACH,IAAI,aAAa,SAAS,IAAI,QAAQ;AAAA,KAEtC,mDAAC;AAAA,IAAM,IAAI,IAAI;AAAA,KAAgB,KAAM,GACpC,cACC,mDAAC;AAAA,IAAK,MAAM,yBAAM,aAAa,QAAQ,MAAM,MAAM;AAAA,IAAG,aAAY;AAAA,KAC/D,YACH,CAEJ,GACC,QACH;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAIZ,OAAO,8BAAU,OAAO,WAAW,YAAY,oBAAoB;AAAA,EAInE,WAAW,8BAAU,KAAK,YAAY,mCAAmC;AAAA,EAIzE,cAAc,8BAAU,QAAQ,8BAAU,OAAO,EAAE,YAAY,uBAAuB;AAAA,EAItF,aAAa,8BAAU,MAAM,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,YAAY,4CAA4C;AAAA,EAIzG,UAAU,8BAAU,QAAQ,YAAY,iBAAiB;AAC3D;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,0BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
   "names": []
 }

package/dist/cjs/CollectionBox/CollectionBox.js

@@ -26,33 +26,33 @@ __export(CollectionBox_exports, {
 module.exports = __toCommonJS(CollectionBox_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 CollectionBox = (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 CollectionBox = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   background: ${(props2) => props2.theme.colors.neutral["000"]};
   font-size: 13px;
   color: ${(props2) => props2.theme.colors.neutral["700"]};
   font-weight: ${(props2) => props2.theme.fontWeights.semibold};
   border-top: 1px solid ${(props2) => props2.theme.colors.neutral["100"]};
 `;
-const Footer = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const Footer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   border-top: 1px dashed ${(props2) => props2.theme.colors.neutral["100"]};
 `;
-const Body = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const Body = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   min-height: 92px;
   font-weight: ${(props2) => props2.theme.fontWeights.regular};
 `;
-const Header = import_styled_components.default.h3`
+const Header = import_ds_system.styled.h3`
   line-height: unset;
   font-size: inherit;
   font-weight: inherit;
   margin: 0;
-  ${(0, import_ds_system.truncate)()}
+  ${(0, import_ds_system2.truncate)()}
 }
 `;
-const ActionWrap = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const ActionWrap = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   & .em-ds-button {
     padding: 0;
     min-width: unset;
@@ -90,14 +90,14 @@ const DSCollectionBox = ({ body, title, headerAction, footerAction, headerLevel
   }, footerAction)));
 };
 const props = {
-  body: import_react_desc.PropTypes.element.isRequired.description("body inside collection box"),
-  title: import_react_desc.PropTypes.string.description("Collection box header"),
-  headerAction: import_react_desc.PropTypes.element.description("Collection box header action, expects a button with size s"),
-  footerAction: import_react_desc.PropTypes.element.description("Collection box footer action, expects a button with size s"),
-  headerLevel: import_react_desc.PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description("Semantic header tag used for the header title")
+  body: import_ds_utilities.PropTypes.element.isRequired.description("body inside collection box"),
+  title: import_ds_utilities.PropTypes.string.description("Collection box header"),
+  headerAction: import_ds_utilities.PropTypes.element.description("Collection box header action, expects a button with size s"),
+  footerAction: import_ds_utilities.PropTypes.element.description("Collection box footer action, expects a button with size s"),
+  headerLevel: import_ds_utilities.PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description("Semantic header tag used for the header title")
 };
 DSCollectionBox.propTypes = props;
 DSCollectionBox.displayName = "DSCollectionBox";
-const DSCollectionBoxWithSchema = (0, import_react_desc.describe)(DSCollectionBox);
+const DSCollectionBoxWithSchema = (0, import_ds_utilities.describe)(DSCollectionBox);
 DSCollectionBoxWithSchema.propTypes = props;
 //# sourceMappingURL=CollectionBox.js.map

package/dist/cjs/CollectionBox/CollectionBox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/CollectionBox/CollectionBox.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { truncate } from '@elliemae/ds-system';\n\nconst CollectionBox = styled(Grid)`\n  background: ${(props) => props.theme.colors.neutral['000']};\n  font-size: 13px;\n  color: ${(props) => props.theme.colors.neutral['700']};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  border-top: 1px solid ${(props) => props.theme.colors.neutral['100']};\n`;\n\nconst Footer = styled(Grid)`\n  border-top: 1px dashed ${(props) => props.theme.colors.neutral['100']};\n`;\n\nconst Body = styled(Grid)`\n  min-height: 92px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n`;\n\nconst Header = styled.h3`\n  line-height: unset;\n  font-size: inherit;\n  font-weight: inherit;\n  margin: 0;\n  ${truncate()}\n}\n`;\n\nconst ActionWrap = styled(Grid)`\n  & .em-ds-button {\n    padding: 0;\n    min-width: unset;\n  }\n`;\n\nconst DSCollectionBox = ({ body, title, headerAction, footerAction, headerLevel = 3 }) => {\n  const headerCols = [];\n  const footerCols = [];\n  const rows = [];\n  if (headerAction || title) rows.push('40px');\n  rows.push('auto');\n  if (footerAction) rows.push('40px');\n\n  if (headerAction) headerCols.push('auto');\n  if (title) headerCols.push('auto');\n\n  if (footerAction) footerCols.push('auto');\n\n  return (\n    <CollectionBox rows={rows}>\n      <Grid alignItems=\"center\" cols={headerCols}>\n        {title && <Header as={`h${headerLevel}`}>{title}</Header>}\n        {headerAction && <ActionWrap justifySelf=\"end\">{headerAction}</ActionWrap>}\n      </Grid>\n      <Body>{body}</Body>\n      {footerAction && (\n        <Footer alignItems=\"center\" cols={footerCols}>\n          <ActionWrap justifySelf=\"end\">{footerAction}</ActionWrap>\n        </Footer>\n      )}\n    </CollectionBox>\n  );\n};\n\nconst props = {\n  /**\n   * body inside collection box\n   */\n  body: PropTypes.element.isRequired.description('body inside collection box'),\n  /**\n   * Collection box header\n   */\n  title: PropTypes.string.description('Collection box header'),\n  /**\n   * Collection box header action, expects a button with size s\n   */\n  headerAction: PropTypes.element.description('Collection box header action, expects a button with size s'),\n  /**\n   * Collection box footer action, expects a button with size s\n   */\n  footerAction: PropTypes.element.description('Collection box footer action, expects a button with size s'),\n  /**\n   * Semantic header tag used for the header title\n   */\n  headerLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description('Semantic header tag used for the header title'),\n};\n\nDSCollectionBox.propTypes = props;\nDSCollectionBox.displayName = 'DSCollectionBox';\nconst DSCollectionBoxWithSchema = describe(DSCollectionBox);\nDSCollectionBoxWithSchema.propTypes = props;\n\nexport { DSCollectionBox, DSCollectionBoxWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAoC;AACpC,+BAAmB;AACnB,qBAAqB;AACrB,uBAAyB;AAEzB,MAAM,gBAAgB,sCAAO,mBAAI;AAAA,gBACjB,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,WAE3C,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,iBAChC,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA,0BAC1B,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAGhE,MAAM,SAAS,sCAAO,mBAAI;AAAA,2BACC,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAGjE,MAAM,OAAO,sCAAO,mBAAI;AAAA;AAAA,iBAEP,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA;AAGpD,MAAM,SAAS,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlB,+BAAS;AAAA;AAAA;AAIb,MAAM,aAAa,sCAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9B,MAAM,kBAAkB,CAAC,EAAE,MAAM,OAAO,cAAc,cAAc,cAAc,QAAQ;AACxF,QAAM,aAAa,CAAC;AACpB,QAAM,aAAa,CAAC;AACpB,QAAM,OAAO,CAAC;AACd,MAAI,gBAAgB;AAAO,SAAK,KAAK,MAAM;AAC3C,OAAK,KAAK,MAAM;AAChB,MAAI;AAAc,SAAK,KAAK,MAAM;AAElC,MAAI;AAAc,eAAW,KAAK,MAAM;AACxC,MAAI;AAAO,eAAW,KAAK,MAAM;AAEjC,MAAI;AAAc,eAAW,KAAK,MAAM;AAExC,SACE,mDAAC;AAAA,IAAc;AAAA,KACb,mDAAC;AAAA,IAAK,YAAW;AAAA,IAAS,MAAM;AAAA,KAC7B,SAAS,mDAAC;AAAA,IAAO,IAAI,IAAI;AAAA,KAAgB,KAAM,GAC/C,gBAAgB,mDAAC;AAAA,IAAW,aAAY;AAAA,KAAO,YAAa,CAC/D,GACA,mDAAC,YAAM,IAAK,GACX,gBACC,mDAAC;AAAA,IAAO,YAAW;AAAA,IAAS,MAAM;AAAA,KAChC,mDAAC;AAAA,IAAW,aAAY;AAAA,KAAO,YAAa,CAC9C,CAEJ;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAIZ,MAAM,4BAAU,QAAQ,WAAW,YAAY,4BAA4B;AAAA,EAI3E,OAAO,4BAAU,OAAO,YAAY,uBAAuB;AAAA,EAI3D,cAAc,4BAAU,QAAQ,YAAY,4DAA4D;AAAA,EAIxG,cAAc,4BAAU,QAAQ,YAAY,4DAA4D;AAAA,EAIxG,aAAa,4BAAU,MAAM,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,YAAY,+CAA+C;AAC9G;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,gCAAS,eAAe;AAC1D,0BAA0B,YAAY;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { truncate } from '@elliemae/ds-system';\n\nconst CollectionBox = styled(Grid)`\n  background: ${(props) => props.theme.colors.neutral['000']};\n  font-size: 13px;\n  color: ${(props) => props.theme.colors.neutral['700']};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  border-top: 1px solid ${(props) => props.theme.colors.neutral['100']};\n`;\n\nconst Footer = styled(Grid)`\n  border-top: 1px dashed ${(props) => props.theme.colors.neutral['100']};\n`;\n\nconst Body = styled(Grid)`\n  min-height: 92px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n`;\n\nconst Header = styled.h3`\n  line-height: unset;\n  font-size: inherit;\n  font-weight: inherit;\n  margin: 0;\n  ${truncate()}\n}\n`;\n\nconst ActionWrap = styled(Grid)`\n  & .em-ds-button {\n    padding: 0;\n    min-width: unset;\n  }\n`;\n\nconst DSCollectionBox = ({ body, title, headerAction, footerAction, headerLevel = 3 }) => {\n  const headerCols = [];\n  const footerCols = [];\n  const rows = [];\n  if (headerAction || title) rows.push('40px');\n  rows.push('auto');\n  if (footerAction) rows.push('40px');\n\n  if (headerAction) headerCols.push('auto');\n  if (title) headerCols.push('auto');\n\n  if (footerAction) footerCols.push('auto');\n\n  return (\n    <CollectionBox rows={rows}>\n      <Grid alignItems=\"center\" cols={headerCols}>\n        {title && <Header as={`h${headerLevel}`}>{title}</Header>}\n        {headerAction && <ActionWrap justifySelf=\"end\">{headerAction}</ActionWrap>}\n      </Grid>\n      <Body>{body}</Body>\n      {footerAction && (\n        <Footer alignItems=\"center\" cols={footerCols}>\n          <ActionWrap justifySelf=\"end\">{footerAction}</ActionWrap>\n        </Footer>\n      )}\n    </CollectionBox>\n  );\n};\n\nconst props = {\n  /**\n   * body inside collection box\n   */\n  body: PropTypes.element.isRequired.description('body inside collection box'),\n  /**\n   * Collection box header\n   */\n  title: PropTypes.string.description('Collection box header'),\n  /**\n   * Collection box header action, expects a button with size s\n   */\n  headerAction: PropTypes.element.description('Collection box header action, expects a button with size s'),\n  /**\n   * Collection box footer action, expects a button with size s\n   */\n  footerAction: PropTypes.element.description('Collection box footer action, expects a button with size s'),\n  /**\n   * Semantic header tag used for the header title\n   */\n  headerLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description('Semantic header tag used for the header title'),\n};\n\nDSCollectionBox.propTypes = props;\nDSCollectionBox.displayName = 'DSCollectionBox';\nconst DSCollectionBoxWithSchema = describe(DSCollectionBox);\nDSCollectionBoxWithSchema.propTypes = props;\n\nexport { DSCollectionBox, DSCollectionBoxWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,0BAAoC;AACpC,uBAAuB;AACvB,qBAAqB;AACrB,wBAAyB;AAEzB,MAAM,gBAAgB,6BAAO,mBAAI;AAAA,gBACjB,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,WAE3C,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,iBAChC,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA,0BAC1B,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAGhE,MAAM,SAAS,6BAAO,mBAAI;AAAA,2BACC,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAGjE,MAAM,OAAO,6BAAO,mBAAI;AAAA;AAAA,iBAEP,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA;AAGpD,MAAM,SAAS,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlB,gCAAS;AAAA;AAAA;AAIb,MAAM,aAAa,6BAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9B,MAAM,kBAAkB,CAAC,EAAE,MAAM,OAAO,cAAc,cAAc,cAAc,QAAQ;AACxF,QAAM,aAAa,CAAC;AACpB,QAAM,aAAa,CAAC;AACpB,QAAM,OAAO,CAAC;AACd,MAAI,gBAAgB;AAAO,SAAK,KAAK,MAAM;AAC3C,OAAK,KAAK,MAAM;AAChB,MAAI;AAAc,SAAK,KAAK,MAAM;AAElC,MAAI;AAAc,eAAW,KAAK,MAAM;AACxC,MAAI;AAAO,eAAW,KAAK,MAAM;AAEjC,MAAI;AAAc,eAAW,KAAK,MAAM;AAExC,SACE,mDAAC;AAAA,IAAc;AAAA,KACb,mDAAC;AAAA,IAAK,YAAW;AAAA,IAAS,MAAM;AAAA,KAC7B,SAAS,mDAAC;AAAA,IAAO,IAAI,IAAI;AAAA,KAAgB,KAAM,GAC/C,gBAAgB,mDAAC;AAAA,IAAW,aAAY;AAAA,KAAO,YAAa,CAC/D,GACA,mDAAC,YAAM,IAAK,GACX,gBACC,mDAAC;AAAA,IAAO,YAAW;AAAA,IAAS,MAAM;AAAA,KAChC,mDAAC;AAAA,IAAW,aAAY;AAAA,KAAO,YAAa,CAC9C,CAEJ;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAIZ,MAAM,8BAAU,QAAQ,WAAW,YAAY,4BAA4B;AAAA,EAI3E,OAAO,8BAAU,OAAO,YAAY,uBAAuB;AAAA,EAI3D,cAAc,8BAAU,QAAQ,YAAY,4DAA4D;AAAA,EAIxG,cAAc,8BAAU,QAAQ,YAAY,4DAA4D;AAAA,EAIxG,aAAa,8BAAU,MAAM,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,YAAY,+CAA+C;AAC9G;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,kCAAS,eAAe;AAC1D,0BAA0B,YAAY;",
   "names": []
 }

package/dist/cjs/GlobalHeader/MobileGlobalHeader.js

@@ -42,7 +42,7 @@ var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_form = require("@elliemae/ds-form");
-var import_react_desc = require("react-desc");
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_button = __toESM(require("@elliemae/ds-button"));
 var import_ds_icon = require("@elliemae/ds-icon");
 var import_lodash = require("lodash");
@@ -111,20 +111,20 @@ const DSGlobalHeader = ({
     onClose: menuToggle.bind(null, false)
   }) : 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
 })).description("menu item array");
 const props = {
-  containerProps: import_react_desc.PropTypes.object.description("props to inject to wrapper"),
-  title: import_react_desc.PropTypes.string.isRequired.description("Heading Title"),
-  lastIcon: import_react_desc.PropTypes.element.description("Dimsum icon Element"),
-  onSearchChange: import_react_desc.PropTypes.func.description("Callback function for search change"),
+  containerProps: import_ds_utilities.PropTypes.object.description("props to inject to wrapper"),
+  title: import_ds_utilities.PropTypes.string.isRequired.description("Heading Title"),
+  lastIcon: import_ds_utilities.PropTypes.element.description("Dimsum icon Element"),
+  onSearchChange: import_ds_utilities.PropTypes.func.description("Callback function for search change"),
   topMenuItems: menuProps,
   bottomMenuItems: menuProps
 };
 DSGlobalHeader.propTypes = props;
 DSGlobalHeader.displayName = "DSGlobalHeader";
-const DSGlobalHeaderWithSchema = (0, import_react_desc.describe)(DSGlobalHeader);
+const DSGlobalHeaderWithSchema = (0, import_ds_utilities.describe)(DSGlobalHeader);
 DSGlobalHeaderWithSchema.propTypes = props;
 //# sourceMappingURL=MobileGlobalHeader.js.map

package/dist/cjs/GlobalHeader/MobileGlobalHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/GlobalHeader/MobileGlobalHeader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/jsx-no-bind */\n/* eslint-disable import/no-unresolved */\n/* eslint-disable max-lines */\nimport React, { useState, useCallback } from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport { DSInput } from '@elliemae/ds-form';\nimport { PropTypes, describe } from 'react-desc';\nimport DSButton from '@elliemae/ds-button';\nimport { DSIconSizes, DSIconColors } from '@elliemae/ds-icon';\nimport { debounce, noop } from 'lodash';\nimport { Grid } from '@elliemae/ds-grid';\nimport Logo from '../Icons/EM_logo';\nimport { Container, Label, SearchWrapper, Icon, RightSection, MainSection } from './styles';\nimport { DSSideNav } from '../SideNav';\n\nconst DSGlobalHeader = ({\n  containerProps = {},\n  title,\n  lastIcon,\n  onSearchChange = noop,\n  topMenuItems,\n  bottomMenuItems,\n}) => {\n  const [searchBarVisible, setSearchBarVisible] = useState(false);\n  const [searchValue, setSearchValue] = useState();\n  const [showMenu, setShowMenu] = useState(false);\n  const searchClicked = () => {\n    setSearchBarVisible(true);\n  };\n\n  const onSearchChangeDebounced = useCallback(debounce(onSearchChange, 250), []);\n  const searchValueChanged = (e) => {\n    const val = e.target.value;\n    onSearchChangeDebounced(val);\n    setSearchValue(val);\n  };\n\n  const searchCloseClicked = () => {\n    setSearchBarVisible(false);\n  };\n\n  const menuToggle = (flag) => {\n    setShowMenu(flag);\n  };\n\n  return (\n    <>\n      <Container data-testid={containerProps['data-testid'] || 'global-header-wrapper'} {...containerProps}>\n        {!searchBarVisible ? (\n          <>\n            <MainSection>\n              <Icon onClick={menuToggle.bind(null, true)}>{Logo()}</Icon>\n              <Label>{title}</Label>\n              <span></span>\n              <RightSection>\n                <Grid cols={lastIcon ? [1 / 2, 1 / 2] : [1]} gutter=\"xs\">\n                  <Grid>\n                    <Search\n                      data-testid=\"mobile-global-header-search\"\n                      size={DSIconSizes.M}\n                      color={DSIconColors.WHITE}\n                      onClick={searchClicked}\n                    />\n                  </Grid>\n                  {lastIcon && <Grid>{lastIcon}</Grid>}\n                </Grid>\n              </RightSection>\n            </MainSection>\n          </>\n        ) : (\n          <SearchWrapper>\n            <DSInput\n              clearable\n              className=\"dsInput\"\n              placeholder=\"Search here\"\n              onChange={searchValueChanged}\n              rightComponent={\n                <DSButton\n                  buttonType=\"primary\"\n                  className=\"dsButton\"\n                  icon={<Search size={DSIconSizes.M} color={DSIconColors.WHITE} onClick={searchCloseClicked} />}\n                />\n              }\n              value={searchValue}\n              variant=\"variant-active\"\n            />\n          </SearchWrapper>\n        )}\n      </Container>\n      {showMenu ? (\n        <DSSideNav\n          title={title}\n          menuItems={topMenuItems}\n          bottomMenuItems={bottomMenuItems}\n          onClose={menuToggle.bind(null, false)}\n        ></DSSideNav>\n      ) : null}\n    </>\n  );\n};\n\nconst menuProps = PropTypes.arrayOf(\n  PropTypes.shape({\n    icon: PropTypes.element,\n    text: PropTypes.string,\n  }),\n).description('menu item array');\n\nconst props = {\n  /** props to inject to wrapper */\n  containerProps: PropTypes.object.description('props to inject to wrapper'),\n  /**\n   * Heading Title\n   */\n  title: PropTypes.string.isRequired.description('Heading Title'),\n  /**\n   * Dimsum icon Element\n   */\n  lastIcon: PropTypes.element.description('Dimsum icon Element'),\n  /**\n   * Callback function for search change\n   */\n  onSearchChange: PropTypes.func.description('Callback function for search change'),\n  /**\n   * Top Menu items array\n   */\n  topMenuItems: menuProps,\n  /**\n   * Bottom Menu items array\n   */\n  bottomMenuItems: menuProps,\n};\n\nDSGlobalHeader.propTypes = props;\nDSGlobalHeader.displayName = 'DSGlobalHeader';\nconst DSGlobalHeaderWithSchema = describe(DSGlobalHeader);\nDSGlobalHeaderWithSchema.propTypes = props;\n\nexport { DSGlobalHeader, DSGlobalHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable react/jsx-no-bind */\n/* eslint-disable import/no-unresolved */\n/* eslint-disable max-lines */\nimport React, { useState, useCallback } from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport { DSInput } from '@elliemae/ds-form';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport DSButton from '@elliemae/ds-button';\nimport { DSIconSizes, DSIconColors } from '@elliemae/ds-icon';\nimport { debounce, noop } from 'lodash';\nimport { Grid } from '@elliemae/ds-grid';\nimport Logo from '../Icons/EM_logo';\nimport { Container, Label, SearchWrapper, Icon, RightSection, MainSection } from './styles';\nimport { DSSideNav } from '../SideNav';\n\nconst DSGlobalHeader = ({\n  containerProps = {},\n  title,\n  lastIcon,\n  onSearchChange = noop,\n  topMenuItems,\n  bottomMenuItems,\n}) => {\n  const [searchBarVisible, setSearchBarVisible] = useState(false);\n  const [searchValue, setSearchValue] = useState();\n  const [showMenu, setShowMenu] = useState(false);\n  const searchClicked = () => {\n    setSearchBarVisible(true);\n  };\n\n  const onSearchChangeDebounced = useCallback(debounce(onSearchChange, 250), []);\n  const searchValueChanged = (e) => {\n    const val = e.target.value;\n    onSearchChangeDebounced(val);\n    setSearchValue(val);\n  };\n\n  const searchCloseClicked = () => {\n    setSearchBarVisible(false);\n  };\n\n  const menuToggle = (flag) => {\n    setShowMenu(flag);\n  };\n\n  return (\n    <>\n      <Container data-testid={containerProps['data-testid'] || 'global-header-wrapper'} {...containerProps}>\n        {!searchBarVisible ? (\n          <>\n            <MainSection>\n              <Icon onClick={menuToggle.bind(null, true)}>{Logo()}</Icon>\n              <Label>{title}</Label>\n              <span></span>\n              <RightSection>\n                <Grid cols={lastIcon ? [1 / 2, 1 / 2] : [1]} gutter=\"xs\">\n                  <Grid>\n                    <Search\n                      data-testid=\"mobile-global-header-search\"\n                      size={DSIconSizes.M}\n                      color={DSIconColors.WHITE}\n                      onClick={searchClicked}\n                    />\n                  </Grid>\n                  {lastIcon && <Grid>{lastIcon}</Grid>}\n                </Grid>\n              </RightSection>\n            </MainSection>\n          </>\n        ) : (\n          <SearchWrapper>\n            <DSInput\n              clearable\n              className=\"dsInput\"\n              placeholder=\"Search here\"\n              onChange={searchValueChanged}\n              rightComponent={\n                <DSButton\n                  buttonType=\"primary\"\n                  className=\"dsButton\"\n                  icon={<Search size={DSIconSizes.M} color={DSIconColors.WHITE} onClick={searchCloseClicked} />}\n                />\n              }\n              value={searchValue}\n              variant=\"variant-active\"\n            />\n          </SearchWrapper>\n        )}\n      </Container>\n      {showMenu ? (\n        <DSSideNav\n          title={title}\n          menuItems={topMenuItems}\n          bottomMenuItems={bottomMenuItems}\n          onClose={menuToggle.bind(null, false)}\n        ></DSSideNav>\n      ) : null}\n    </>\n  );\n};\n\nconst menuProps = PropTypes.arrayOf(\n  PropTypes.shape({\n    icon: PropTypes.element,\n    text: PropTypes.string,\n  }),\n).description('menu item array');\n\nconst props = {\n  /** props to inject to wrapper */\n  containerProps: PropTypes.object.description('props to inject to wrapper'),\n  /**\n   * Heading Title\n   */\n  title: PropTypes.string.isRequired.description('Heading Title'),\n  /**\n   * Dimsum icon Element\n   */\n  lastIcon: PropTypes.element.description('Dimsum icon Element'),\n  /**\n   * Callback function for search change\n   */\n  onSearchChange: PropTypes.func.description('Callback function for search change'),\n  /**\n   * Top Menu items array\n   */\n  topMenuItems: menuProps,\n  /**\n   * Bottom Menu items array\n   */\n  bottomMenuItems: menuProps,\n};\n\nDSGlobalHeader.propTypes = props;\nDSGlobalHeader.displayName = 'DSGlobalHeader';\nconst DSGlobalHeaderWithSchema = describe(DSGlobalHeader);\nDSGlobalHeaderWithSchema.propTypes = props;\n\nexport { DSGlobalHeader, DSGlobalHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/GlobalHeader/styles.js

@@ -29,9 +29,9 @@ __export(styles_exports, {
 });
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
 var import_ds_system = require("@elliemae/ds-system");
-const Container = import_styled_components.default.header`
+var import_ds_system2 = require("@elliemae/ds-system");
+const Container = import_ds_system.styled.header`
   width: auto;
   height: 64px;
   position: fixed;
@@ -40,7 +40,7 @@ const Container = import_styled_components.default.header`
   padding: ${(props) => props.theme.space.xs};
   color: ${(props) => props.theme.colors.neutral["000"]};
 `;
-const growLeft = import_ds_system.kfrm`
+const growLeft = import_ds_system2.kfrm`
   0% {
     width: 0;
   }
@@ -48,9 +48,9 @@ const growLeft = import_ds_system.kfrm`
     width: 100%;
   }
 `;
-const SearchWrapper = import_styled_components.default.div`
+const SearchWrapper = import_ds_system.styled.div`
   background-color: ${(props) => props.theme.colors.brand[600]};
-  ${import_ds_system.css`
+  ${import_ds_system2.css`
     animation: ${growLeft} 1s;
   `}
   float: right;
@@ -85,19 +85,19 @@ const SearchWrapper = import_styled_components.default.div`
     fill: ${(props) => props.theme.colors.neutral["000"]};
   }
 `;
-const Icon = import_styled_components.default.div`
+const Icon = import_ds_system.styled.div`
   margin-right: ${(props) => props.theme.space.xs};
 `;
-const Label = import_styled_components.default.div`
+const Label = import_ds_system.styled.div`
   font-family: ${(props) => props.theme.fonts.default};
   font-weight: ${(props) => props.theme.fontWeights.regular};
   font-size: 25px;
   line-height: 32px;
 `;
-const RightSection = import_styled_components.default.div`
+const RightSection = import_ds_system.styled.div`
   padding-top: 5px;
 `;
-const MainSection = import_styled_components.default.div`
+const MainSection = import_ds_system.styled.div`
   display: flex;
   flex-direction: row;
   height: 32px;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/GlobalHeader/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import styled from 'styled-components';\nimport { kfrm, css } from '@elliemae/ds-system';\n\nexport const Container = styled.header`\n  width: auto;\n  height: 64px;\n  position: fixed;\n  width: 100%;\n  background-color: ${(props) => props.theme.colors.brand[700]};\n  padding: ${(props) => props.theme.space.xs};\n  color: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst growLeft = kfrm`\n  0% {\n    width: 0;\n  }\n  100% {\n    width: 100%;\n  }\n`;\n\nexport const SearchWrapper = styled.div`\n  background-color: ${(props) => props.theme.colors.brand[600]};\n  ${css`\n    animation: ${growLeft} 1s;\n  `}\n  float: right;\n  width: 100%;\n  border-radius: 4px;\n  .dsInput {\n    input {\n      border-radius: 2px 0 0 2px;\n      color: ${(props) => props.theme.colors.neutral['000']};\n      border: calc(0.30769rem * 0.25) solid\n        ${(props) => props.theme.colors.brand[800]} !important;\n      &:focus {\n        border-right: none !important;\n      }\n      &::placeholder {\n        color: ${(props) => props.theme.colors.neutral['000']};\n      }\n    }\n    .em-ds-input__clearable {\n      border: calc(0.30769rem * 0.25) solid\n        ${(props) => props.theme.colors.brand[800]} !important;\n    }\n  }\n\n  .dsButton {\n    border-color: ${(props) => props.theme.colors.brand[800]} !important;\n    border-radius: 0 2px 2px 0;\n    border-left: none;\n  }\n  svg,\n  svg:not([fill]) {\n    fill: ${(props) => props.theme.colors.neutral['000']};\n  }\n`;\n\nexport const Icon = styled.div`\n  margin-right: ${(props) => props.theme.space.xs};\n`;\n\nexport const Label = styled.div`\n  font-family: ${(props) => props.theme.fonts.default};\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  font-size: 25px;\n  line-height: 32px;\n`;\n\nexport const RightSection = styled.div`\n  padding-top: 5px;\n`;\n\nexport const MainSection = styled.div`\n  display: flex;\n  flex-direction: row;\n  height: 32px;\n  span {\n    flex-grow: 1;\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AACnB,uBAA0B;AAEnB,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKV,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,aAC7C,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WAC/B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGjD,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASV,MAAM,gBAAgB,iCAAO;AAAA,sBACd,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,IACtD;AAAA,iBACa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQF,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,UAE3C,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,iBAK7B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,UAK7C,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,oBAK1B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM5C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI3C,MAAM,OAAO,iCAAO;AAAA,kBACT,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGxC,MAAM,QAAQ,iCAAO;AAAA,iBACX,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBAC7B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAK7C,MAAM,eAAe,iCAAO;AAAA;AAAA;AAI5B,MAAM,cAAc,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { kfrm, css } from '@elliemae/ds-system';\n\nexport const Container = styled.header`\n  width: auto;\n  height: 64px;\n  position: fixed;\n  width: 100%;\n  background-color: ${(props) => props.theme.colors.brand[700]};\n  padding: ${(props) => props.theme.space.xs};\n  color: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst growLeft = kfrm`\n  0% {\n    width: 0;\n  }\n  100% {\n    width: 100%;\n  }\n`;\n\nexport const SearchWrapper = styled.div`\n  background-color: ${(props) => props.theme.colors.brand[600]};\n  ${css`\n    animation: ${growLeft} 1s;\n  `}\n  float: right;\n  width: 100%;\n  border-radius: 4px;\n  .dsInput {\n    input {\n      border-radius: 2px 0 0 2px;\n      color: ${(props) => props.theme.colors.neutral['000']};\n      border: calc(0.30769rem * 0.25) solid\n        ${(props) => props.theme.colors.brand[800]} !important;\n      &:focus {\n        border-right: none !important;\n      }\n      &::placeholder {\n        color: ${(props) => props.theme.colors.neutral['000']};\n      }\n    }\n    .em-ds-input__clearable {\n      border: calc(0.30769rem * 0.25) solid\n        ${(props) => props.theme.colors.brand[800]} !important;\n    }\n  }\n\n  .dsButton {\n    border-color: ${(props) => props.theme.colors.brand[800]} !important;\n    border-radius: 0 2px 2px 0;\n    border-left: none;\n  }\n  svg,\n  svg:not([fill]) {\n    fill: ${(props) => props.theme.colors.neutral['000']};\n  }\n`;\n\nexport const Icon = styled.div`\n  margin-right: ${(props) => props.theme.space.xs};\n`;\n\nexport const Label = styled.div`\n  font-family: ${(props) => props.theme.fonts.default};\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  font-size: 25px;\n  line-height: 32px;\n`;\n\nexport const RightSection = styled.div`\n  padding-top: 5px;\n`;\n\nexport const MainSection = styled.div`\n  display: flex;\n  flex-direction: row;\n  height: 32px;\n  span {\n    flex-grow: 1;\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,wBAA0B;AAEnB,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKV,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,aAC7C,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WAC/B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGjD,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASV,MAAM,gBAAgB,wBAAO;AAAA,sBACd,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,IACtD;AAAA,iBACa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQF,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,UAE3C,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,iBAK7B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,UAK7C,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,oBAK1B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM5C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI3C,MAAM,OAAO,wBAAO;AAAA,kBACT,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGxC,MAAM,QAAQ,wBAAO;AAAA,iBACX,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBAC7B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAK7C,MAAM,eAAe,wBAAO;AAAA;AAAA;AAI5B,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/GroupBox/GroupBox.js

@@ -26,12 +26,12 @@ __export(GroupBox_exports, {
 module.exports = __toCommonJS(GroupBox_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_lodash = require("lodash");
 var import_ds_system = require("@elliemae/ds-system");
-var import_styled_components = __toESM(require("styled-components"));
+var import_ds_system2 = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
-const Title = import_styled_components.default.h3`
+const Title = import_ds_system2.styled.h3`
   font-size: 14px;
   margin: 0;
   ${(0, import_ds_system.truncate)()}
@@ -40,7 +40,7 @@ const Title = import_styled_components.default.h3`
   text-transform: capitalize;
   font-weight: ${(props2) => props2.theme.fontWeights.semibold};
 `;
-const GroupBox = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const GroupBox = (0, import_ds_system2.styled)(import_ds_grid.Grid)`
   background: ${(props2) => props2.background === "grey" ? props2.theme.colors.neutral["050"] : props2.theme.colors.neutral["000"]};
 
   border-top: ${(props2) => props2.borderTop ? `1px solid ${props2.theme.colors.neutral["100"]}` : "none"};
@@ -67,15 +67,15 @@ const DSGroupBox = ({ children, title, background = "grey", headerLevel = 3, act
   }, actionsRight)), children);
 };
 const props = {
-  children: import_react_desc.PropTypes.element.description("In-box children"),
-  background: import_react_desc.PropTypes.oneOf(["white", "grey"]).description("Title background"),
-  borderTop: import_react_desc.PropTypes.bool.description("Toggle border top of group box"),
-  title: import_react_desc.PropTypes.string.isRequired.description("Group Box title"),
-  headerLevel: import_react_desc.PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description("semantic level of header tag for the title"),
-  actionsRight: import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.element).description("Array of button icons")
+  children: import_ds_utilities.PropTypes.element.description("In-box children"),
+  background: import_ds_utilities.PropTypes.oneOf(["white", "grey"]).description("Title background"),
+  borderTop: import_ds_utilities.PropTypes.bool.description("Toggle border top of group box"),
+  title: import_ds_utilities.PropTypes.string.isRequired.description("Group Box title"),
+  headerLevel: import_ds_utilities.PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description("semantic level of header tag for the title"),
+  actionsRight: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.element).description("Array of button icons")
 };
 DSGroupBox.propTypes = props;
 DSGroupBox.displayName = "DSGroupBox";
-const DSGroupBoxWithSchema = (0, import_react_desc.describe)(DSGroupBox);
+const DSGroupBoxWithSchema = (0, import_ds_utilities.describe)(DSGroupBox);
 DSGroupBoxWithSchema.propTypes = props;
 //# sourceMappingURL=GroupBox.js.map

package/dist/cjs/GroupBox/GroupBox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/GroupBox/GroupBox.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { times } from 'lodash';\nimport { truncate } from '@elliemae/ds-system';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst Title = styled.h3`\n  font-size: 14px;\n  margin: 0;\n  ${truncate()}\n  color: ${(props) => props.theme.colors.neutral['700']};\n  line-height: inherit;\n  text-transform: capitalize;\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n`;\n\nconst GroupBox = styled(Grid)`\n  background: ${(props) =>\n    props.background === 'grey' ? props.theme.colors.neutral['050'] : props.theme.colors.neutral['000']};\n\n  border-top: ${(props) => (props.borderTop ? `1px solid ${props.theme.colors.neutral['100']}` : 'none')};\n`;\n\nconst DSGroupBox = ({ children, title, background = 'grey', headerLevel = 3, actionsRight = [], borderTop }) => {\n  const rows = ['auto'];\n  const hasActions = actionsRight.length > 0;\n  if (hasActions) rows.push('auto');\n  return (\n    <Grid rows={['32px', 'auto']}>\n      <GroupBox\n        background={background}\n        cols={rows}\n        borderTop={borderTop}\n        alignItems=\"center\"\n        pl=\"xs\"\n        pr={hasActions ? 'xxs' : 'xs'}\n      >\n        <Title as={`h${headerLevel}`}>{title}</Title>\n        {hasActions && (\n          <Grid cols={times(actionsRight.length, () => 'auto')} justifySelf=\"end\">\n            {actionsRight}\n          </Grid>\n        )}\n      </GroupBox>\n      {children}\n    </Grid>\n  );\n};\n\nconst props = {\n  /**\n   * In-box children\n   */\n  children: PropTypes.element.description('In-box children'),\n  /**\n   * Title background\n   */\n  background: PropTypes.oneOf(['white', 'grey']).description('Title background'),\n  /**\n   * Toggle border top of group box\n   */\n  borderTop: PropTypes.bool.description('Toggle border top of group box'),\n  /**\n   * Group Box title\n   */\n  title: PropTypes.string.isRequired.description('Group Box title'),\n  /**\n   * semantic level of header tag for the title\n   */\n  headerLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description('semantic level of header tag for the title'),\n  /**\n   * Array of button icons\n   */\n  actionsRight: PropTypes.arrayOf(PropTypes.element).description('Array of button icons'),\n};\n\nDSGroupBox.propTypes = props;\nDSGroupBox.displayName = 'DSGroupBox';\nconst DSGroupBoxWithSchema = describe(DSGroupBox);\nDSGroupBoxWithSchema.propTypes = props;\n\nexport { DSGroupBox, DSGroupBoxWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAoC;AACpC,oBAAsB;AACtB,uBAAyB;AACzB,+BAAmB;AACnB,qBAAqB;AAErB,MAAM,QAAQ,iCAAO;AAAA;AAAA;AAAA,IAGjB,+BAAS;AAAA,WACF,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,iBAGhC,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA;AAGpD,MAAM,WAAW,sCAAO,mBAAI;AAAA,gBACZ,CAAC,WACb,OAAM,eAAe,SAAS,OAAM,MAAM,OAAO,QAAQ,SAAS,OAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAEjF,CAAC,WAAW,OAAM,YAAY,aAAa,OAAM,MAAM,OAAO,QAAQ,WAAW;AAAA;AAGjG,MAAM,aAAa,CAAC,EAAE,UAAU,OAAO,aAAa,QAAQ,cAAc,GAAG,eAAe,CAAC,GAAG,gBAAgB;AAC9G,QAAM,OAAO,CAAC,MAAM;AACpB,QAAM,aAAa,aAAa,SAAS;AACzC,MAAI;AAAY,SAAK,KAAK,MAAM;AAChC,SACE,mDAAC;AAAA,IAAK,MAAM,CAAC,QAAQ,MAAM;AAAA,KACzB,mDAAC;AAAA,IACC;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,YAAW;AAAA,IACX,IAAG;AAAA,IACH,IAAI,aAAa,QAAQ;AAAA,KAEzB,mDAAC;AAAA,IAAM,IAAI,IAAI;AAAA,KAAgB,KAAM,GACpC,cACC,mDAAC;AAAA,IAAK,MAAM,yBAAM,aAAa,QAAQ,MAAM,MAAM;AAAA,IAAG,aAAY;AAAA,KAC/D,YACH,CAEJ,GACC,QACH;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAIZ,UAAU,4BAAU,QAAQ,YAAY,iBAAiB;AAAA,EAIzD,YAAY,4BAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,kBAAkB;AAAA,EAI7E,WAAW,4BAAU,KAAK,YAAY,gCAAgC;AAAA,EAItE,OAAO,4BAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAIhE,aAAa,4BAAU,MAAM,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,YAAY,4CAA4C;AAAA,EAIzG,cAAc,4BAAU,QAAQ,4BAAU,OAAO,EAAE,YAAY,uBAAuB;AACxF;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,gCAAS,UAAU;AAChD,qBAAqB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { times } from 'lodash';\nimport { truncate } from '@elliemae/ds-system';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst Title = styled.h3`\n  font-size: 14px;\n  margin: 0;\n  ${truncate()}\n  color: ${(props) => props.theme.colors.neutral['700']};\n  line-height: inherit;\n  text-transform: capitalize;\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n`;\n\nconst GroupBox = styled(Grid)`\n  background: ${(props) =>\n    props.background === 'grey' ? props.theme.colors.neutral['050'] : props.theme.colors.neutral['000']};\n\n  border-top: ${(props) => (props.borderTop ? `1px solid ${props.theme.colors.neutral['100']}` : 'none')};\n`;\n\nconst DSGroupBox = ({ children, title, background = 'grey', headerLevel = 3, actionsRight = [], borderTop }) => {\n  const rows = ['auto'];\n  const hasActions = actionsRight.length > 0;\n  if (hasActions) rows.push('auto');\n  return (\n    <Grid rows={['32px', 'auto']}>\n      <GroupBox\n        background={background}\n        cols={rows}\n        borderTop={borderTop}\n        alignItems=\"center\"\n        pl=\"xs\"\n        pr={hasActions ? 'xxs' : 'xs'}\n      >\n        <Title as={`h${headerLevel}`}>{title}</Title>\n        {hasActions && (\n          <Grid cols={times(actionsRight.length, () => 'auto')} justifySelf=\"end\">\n            {actionsRight}\n          </Grid>\n        )}\n      </GroupBox>\n      {children}\n    </Grid>\n  );\n};\n\nconst props = {\n  /**\n   * In-box children\n   */\n  children: PropTypes.element.description('In-box children'),\n  /**\n   * Title background\n   */\n  background: PropTypes.oneOf(['white', 'grey']).description('Title background'),\n  /**\n   * Toggle border top of group box\n   */\n  borderTop: PropTypes.bool.description('Toggle border top of group box'),\n  /**\n   * Group Box title\n   */\n  title: PropTypes.string.isRequired.description('Group Box title'),\n  /**\n   * semantic level of header tag for the title\n   */\n  headerLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description('semantic level of header tag for the title'),\n  /**\n   * Array of button icons\n   */\n  actionsRight: PropTypes.arrayOf(PropTypes.element).description('Array of button icons'),\n};\n\nDSGroupBox.propTypes = props;\nDSGroupBox.displayName = 'DSGroupBox';\nconst DSGroupBoxWithSchema = describe(DSGroupBox);\nDSGroupBoxWithSchema.propTypes = props;\n\nexport { DSGroupBox, DSGroupBoxWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAoC;AACpC,oBAAsB;AACtB,uBAAyB;AACzB,wBAAuB;AACvB,qBAAqB;AAErB,MAAM,QAAQ,yBAAO;AAAA;AAAA;AAAA,IAGjB,+BAAS;AAAA,WACF,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,iBAGhC,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA;AAGpD,MAAM,WAAW,8BAAO,mBAAI;AAAA,gBACZ,CAAC,WACb,OAAM,eAAe,SAAS,OAAM,MAAM,OAAO,QAAQ,SAAS,OAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAEjF,CAAC,WAAW,OAAM,YAAY,aAAa,OAAM,MAAM,OAAO,QAAQ,WAAW;AAAA;AAGjG,MAAM,aAAa,CAAC,EAAE,UAAU,OAAO,aAAa,QAAQ,cAAc,GAAG,eAAe,CAAC,GAAG,gBAAgB;AAC9G,QAAM,OAAO,CAAC,MAAM;AACpB,QAAM,aAAa,aAAa,SAAS;AACzC,MAAI;AAAY,SAAK,KAAK,MAAM;AAChC,SACE,mDAAC;AAAA,IAAK,MAAM,CAAC,QAAQ,MAAM;AAAA,KACzB,mDAAC;AAAA,IACC;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,YAAW;AAAA,IACX,IAAG;AAAA,IACH,IAAI,aAAa,QAAQ;AAAA,KAEzB,mDAAC;AAAA,IAAM,IAAI,IAAI;AAAA,KAAgB,KAAM,GACpC,cACC,mDAAC;AAAA,IAAK,MAAM,yBAAM,aAAa,QAAQ,MAAM,MAAM;AAAA,IAAG,aAAY;AAAA,KAC/D,YACH,CAEJ,GACC,QACH;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAIZ,UAAU,8BAAU,QAAQ,YAAY,iBAAiB;AAAA,EAIzD,YAAY,8BAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,kBAAkB;AAAA,EAI7E,WAAW,8BAAU,KAAK,YAAY,gCAAgC;AAAA,EAItE,OAAO,8BAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAIhE,aAAa,8BAAU,MAAM,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,YAAY,4CAA4C;AAAA,EAIzG,cAAc,8BAAU,QAAQ,8BAAU,OAAO,EAAE,YAAY,uBAAuB;AACxF;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,kCAAS,UAAU;AAChD,qBAAqB,YAAY;",
   "names": []
 }

package/dist/cjs/InfiniteLoader/Infiniteloader.js

@@ -26,7 +26,7 @@ __export(Infiniteloader_exports, {
 module.exports = __toCommonJS(Infiniteloader_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");
 var import_Loader = require("./Loader");
 const InfiniteLoader = ({ isFetching, fetchData, children, height = window.innerHeight }) => {
@@ -69,13 +69,13 @@ const InfiniteLoader = ({ isFetching, fetchData, children, height = window.inner
   }));
 };
 const listProps = {
-  isFetching: import_react_desc.PropTypes.bool.description("toggle loading state"),
-  fetchData: import_react_desc.PropTypes.func.description("callback to fetch new items"),
-  children: import_react_desc.PropTypes.element.description("row items for infinite loader"),
-  height: import_react_desc.PropTypes.number.isRequired.description("infinite loader list height")
+  isFetching: import_ds_utilities.PropTypes.bool.description("toggle loading state"),
+  fetchData: import_ds_utilities.PropTypes.func.description("callback to fetch new items"),
+  children: import_ds_utilities.PropTypes.element.description("row items for infinite loader"),
+  height: import_ds_utilities.PropTypes.number.isRequired.description("infinite loader list height")
 };
 InfiniteLoader.propTypes = listProps;
 InfiniteLoader.displayName = "InfiniteLoader";
-const InfiniteLoaderWithSchema = (0, import_react_desc.describe)(InfiniteLoader);
+const InfiniteLoaderWithSchema = (0, import_ds_utilities.describe)(InfiniteLoader);
 InfiniteLoaderWithSchema.propTypes = listProps;
 //# sourceMappingURL=Infiniteloader.js.map

package/dist/cjs/InfiniteLoader/Infiniteloader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/InfiniteLoader/Infiniteloader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useEffect, useRef } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Loader } from './Loader';\n\nconst InfiniteLoader = ({ isFetching, fetchData, children, height = window.innerHeight }) => {\n  const callback = (entries) => {\n    const { isIntersecting } = entries[0];\n    if (isIntersecting && !isFetching) {\n      fetchData();\n      // observer.current.unobserve(target.current);\n      observer.current.disconnect();\n      observer.current = undefined;\n    }\n  };\n  // const [target, setTarget] = useState(null);\n  const target = useRef(null);\n  const observer = useRef(null);\n\n  useEffect(() => {\n    if (observer.current) {\n      observer.current.disconnect();\n    }\n    observer.current = new IntersectionObserver(callback, {\n      root: null,\n      rootMargin: '0px',\n      threshold: 0.25,\n    });\n    if (target.current) {\n      observer.current.observe(target.current);\n    }\n    return () => {\n      observer.current?.unobserve(target.current);\n      observer.current?.disconnect();\n    };\n  }, [target, observer, fetchData]);\n\n  return (\n    <Grid style={{ position: 'relative', height, overflow: 'hidden' }}>\n      <Grid style={{ overflow: isFetching ? 'hidden' : 'auto', height }}>\n        {children}\n        <div ref={target} style={{ height: 1 }} />\n      </Grid>\n      <Loader isOpen={isFetching} />\n    </Grid>\n  );\n};\n\nconst listProps = {\n  /** toggle loading state */\n  isFetching: PropTypes.bool.description('toggle loading state'),\n  /** callback to fetch new items */\n  fetchData: PropTypes.func.description('callback to fetch new items'),\n  /** row items for infinite loader */\n  children: PropTypes.element.description('row items for infinite loader'),\n  /** infinite loader list height */\n  height: PropTypes.number.isRequired.description('infinite loader list height'),\n};\n\nInfiniteLoader.propTypes = listProps;\nInfiniteLoader.displayName = 'InfiniteLoader';\nconst InfiniteLoaderWithSchema = describe(InfiniteLoader);\n\nInfiniteLoaderWithSchema.propTypes = listProps;\n\nexport { InfiniteLoader, InfiniteLoaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,wBAAoC;AACpC,qBAAqB;AACrB,oBAAuB;AAEvB,MAAM,iBAAiB,CAAC,EAAE,YAAY,WAAW,UAAU,SAAS,OAAO,kBAAkB;AAC3F,QAAM,WAAW,CAAC,YAAY;AAC5B,UAAM,EAAE,mBAAmB,QAAQ;AACnC,QAAI,kBAAkB,CAAC,YAAY;AACjC,gBAAU;AAEV,eAAS,QAAQ,WAAW;AAC5B,eAAS,UAAU;AAAA,IACrB;AAAA,EACF;AAEA,QAAM,SAAS,yBAAO,IAAI;AAC1B,QAAM,WAAW,yBAAO,IAAI;AAE5B,8BAAU,MAAM;AACd,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,WAAW;AAAA,IAC9B;AACA,aAAS,UAAU,IAAI,qBAAqB,UAAU;AAAA,MACpD,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,WAAW;AAAA,IACb,CAAC;AACD,QAAI,OAAO,SAAS;AAClB,eAAS,QAAQ,QAAQ,OAAO,OAAO;AAAA,IACzC;AACA,WAAO,MAAM;AACX,eAAS,SAAS,UAAU,OAAO,OAAO;AAC1C,eAAS,SAAS,WAAW;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,QAAQ,UAAU,SAAS,CAAC;AAEhC,SACE,mDAAC;AAAA,IAAK,OAAO,EAAE,UAAU,YAAY,QAAQ,UAAU,SAAS;AAAA,KAC9D,mDAAC;AAAA,IAAK,OAAO,EAAE,UAAU,aAAa,WAAW,QAAQ,OAAO;AAAA,KAC7D,UACD,mDAAC;AAAA,IAAI,KAAK;AAAA,IAAQ,OAAO,EAAE,QAAQ,EAAE;AAAA,GAAG,CAC1C,GACA,mDAAC;AAAA,IAAO,QAAQ;AAAA,GAAY,CAC9B;AAEJ;AAEA,MAAM,YAAY;AAAA,EAEhB,YAAY,4BAAU,KAAK,YAAY,sBAAsB;AAAA,EAE7D,WAAW,4BAAU,KAAK,YAAY,6BAA6B;AAAA,EAEnE,UAAU,4BAAU,QAAQ,YAAY,+BAA+B;AAAA,EAEvE,QAAQ,4BAAU,OAAO,WAAW,YAAY,6BAA6B;AAC/E;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,gCAAS,cAAc;AAExD,yBAAyB,YAAY;",
+  "sourcesContent": ["import React, { useEffect, useRef } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Loader } from './Loader';\n\nconst InfiniteLoader = ({ isFetching, fetchData, children, height = window.innerHeight }) => {\n  const callback = (entries) => {\n    const { isIntersecting } = entries[0];\n    if (isIntersecting && !isFetching) {\n      fetchData();\n      // observer.current.unobserve(target.current);\n      observer.current.disconnect();\n      observer.current = undefined;\n    }\n  };\n  // const [target, setTarget] = useState(null);\n  const target = useRef(null);\n  const observer = useRef(null);\n\n  useEffect(() => {\n    if (observer.current) {\n      observer.current.disconnect();\n    }\n    observer.current = new IntersectionObserver(callback, {\n      root: null,\n      rootMargin: '0px',\n      threshold: 0.25,\n    });\n    if (target.current) {\n      observer.current.observe(target.current);\n    }\n    return () => {\n      observer.current?.unobserve(target.current);\n      observer.current?.disconnect();\n    };\n  }, [target, observer, fetchData]);\n\n  return (\n    <Grid style={{ position: 'relative', height, overflow: 'hidden' }}>\n      <Grid style={{ overflow: isFetching ? 'hidden' : 'auto', height }}>\n        {children}\n        <div ref={target} style={{ height: 1 }} />\n      </Grid>\n      <Loader isOpen={isFetching} />\n    </Grid>\n  );\n};\n\nconst listProps = {\n  /** toggle loading state */\n  isFetching: PropTypes.bool.description('toggle loading state'),\n  /** callback to fetch new items */\n  fetchData: PropTypes.func.description('callback to fetch new items'),\n  /** row items for infinite loader */\n  children: PropTypes.element.description('row items for infinite loader'),\n  /** infinite loader list height */\n  height: PropTypes.number.isRequired.description('infinite loader list height'),\n};\n\nInfiniteLoader.propTypes = listProps;\nInfiniteLoader.displayName = 'InfiniteLoader';\nconst InfiniteLoaderWithSchema = describe(InfiniteLoader);\n\nInfiniteLoaderWithSchema.propTypes = listProps;\n\nexport { InfiniteLoader, InfiniteLoaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,0BAAoC;AACpC,qBAAqB;AACrB,oBAAuB;AAEvB,MAAM,iBAAiB,CAAC,EAAE,YAAY,WAAW,UAAU,SAAS,OAAO,kBAAkB;AAC3F,QAAM,WAAW,CAAC,YAAY;AAC5B,UAAM,EAAE,mBAAmB,QAAQ;AACnC,QAAI,kBAAkB,CAAC,YAAY;AACjC,gBAAU;AAEV,eAAS,QAAQ,WAAW;AAC5B,eAAS,UAAU;AAAA,IACrB;AAAA,EACF;AAEA,QAAM,SAAS,yBAAO,IAAI;AAC1B,QAAM,WAAW,yBAAO,IAAI;AAE5B,8BAAU,MAAM;AACd,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,WAAW;AAAA,IAC9B;AACA,aAAS,UAAU,IAAI,qBAAqB,UAAU;AAAA,MACpD,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,WAAW;AAAA,IACb,CAAC;AACD,QAAI,OAAO,SAAS;AAClB,eAAS,QAAQ,QAAQ,OAAO,OAAO;AAAA,IACzC;AACA,WAAO,MAAM;AACX,eAAS,SAAS,UAAU,OAAO,OAAO;AAC1C,eAAS,SAAS,WAAW;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,QAAQ,UAAU,SAAS,CAAC;AAEhC,SACE,mDAAC;AAAA,IAAK,OAAO,EAAE,UAAU,YAAY,QAAQ,UAAU,SAAS;AAAA,KAC9D,mDAAC;AAAA,IAAK,OAAO,EAAE,UAAU,aAAa,WAAW,QAAQ,OAAO;AAAA,KAC7D,UACD,mDAAC;AAAA,IAAI,KAAK;AAAA,IAAQ,OAAO,EAAE,QAAQ,EAAE;AAAA,GAAG,CAC1C,GACA,mDAAC;AAAA,IAAO,QAAQ;AAAA,GAAY,CAC9B;AAEJ;AAEA,MAAM,YAAY;AAAA,EAEhB,YAAY,8BAAU,KAAK,YAAY,sBAAsB;AAAA,EAE7D,WAAW,8BAAU,KAAK,YAAY,6BAA6B;AAAA,EAEnE,UAAU,8BAAU,QAAQ,YAAY,+BAA+B;AAAA,EAEvE,QAAQ,8BAAU,OAAO,WAAW,YAAY,6BAA6B;AAC/E;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,kCAAS,cAAc;AAExD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/cjs/InfiniteLoader/VirtualizedInfiniteLoader.js

@@ -26,7 +26,7 @@ __export(VirtualizedInfiniteLoader_exports, {
 module.exports = __toCommonJS(VirtualizedInfiniteLoader_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_react_window_infinite_loader = __toESM(require("react-window-infinite-loader"));
 var import_react_window = require("react-window");
 const VirtualizedInfiniteLoader = ({
@@ -68,16 +68,16 @@ const VirtualizedInfiniteLoader = ({
   }, "Loading"));
 };
 const listProps = {
-  isItemLoaded: import_react_desc.PropTypes.bool.description("Function responsible for tracking the loaded state of each item."),
-  loadMoreItems: import_react_desc.PropTypes.func.description("Callback to be invoked when more rows must be loaded. It should return a Promise that is resolved once all data has finished loading."),
-  getItemSize: import_react_desc.PropTypes.func.description("callback to get row item size"),
-  height: import_react_desc.PropTypes.number.description("height for the list"),
-  moreItemsLoading: import_react_desc.PropTypes.bool.description("flag to know if virtual list s"),
-  item: import_react_desc.PropTypes.element.description("Row item to render"),
-  hasNextPage: import_react_desc.PropTypes.bool.description("flag for virtualized list")
+  isItemLoaded: import_ds_utilities.PropTypes.bool.description("Function responsible for tracking the loaded state of each item."),
+  loadMoreItems: import_ds_utilities.PropTypes.func.description("Callback to be invoked when more rows must be loaded. It should return a Promise that is resolved once all data has finished loading."),
+  getItemSize: import_ds_utilities.PropTypes.func.description("callback to get row item size"),
+  height: import_ds_utilities.PropTypes.number.description("height for the list"),
+  moreItemsLoading: import_ds_utilities.PropTypes.bool.description("flag to know if virtual list s"),
+  item: import_ds_utilities.PropTypes.element.description("Row item to render"),
+  hasNextPage: import_ds_utilities.PropTypes.bool.description("flag for virtualized list")
 };
 VirtualizedInfiniteLoader.propTypes = listProps;
 VirtualizedInfiniteLoader.displayName = "VirtualizedInfiniteLoader";
-const VirtualizedInfiniteLoaderWithSchema = (0, import_react_desc.describe)(VirtualizedInfiniteLoader);
+const VirtualizedInfiniteLoaderWithSchema = (0, import_ds_utilities.describe)(VirtualizedInfiniteLoader);
 VirtualizedInfiniteLoaderWithSchema.propTypes = listProps;
 //# sourceMappingURL=VirtualizedInfiniteLoader.js.map

package/dist/cjs/InfiniteLoader/VirtualizedInfiniteLoader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/InfiniteLoader/VirtualizedInfiniteLoader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useState } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport RWInfiniteLoader from 'react-window-infinite-loader';\nimport { VariableSizeList as List } from 'react-window';\n\nconst VirtualizedInfiniteLoader = ({\n  moreItemsLoading = false,\n  hasNextPage = false,\n  isItemLoaded = () => true,\n  loadMoreItems,\n  getItemSize = () => 38,\n  height,\n  item: Row,\n}) => {\n  const [itemCount, setItemCount] = useState(10);\n\n  const loadMore = (startIndex, stopIndex) => {\n    if (hasNextPage) setItemCount(itemCount + 1);\n    return loadMoreItems(startIndex, stopIndex);\n  };\n\n  return (\n    <div style={{ position: 'relative' }}>\n      <RWInfiniteLoader\n        isItemLoaded={isItemLoaded}\n        itemCount={itemCount}\n        loadMoreItems={loadMore}\n      >\n        {({ onItemsRendered, ref }) => (\n          <List\n            className=\"List\"\n            height={height}\n            itemCount={itemCount}\n            itemSize={getItemSize}\n            onItemsRendered={onItemsRendered}\n            ref={ref}\n            width=\"100%\"\n          >\n            {Row}\n          </List>\n        )}\n      </RWInfiniteLoader>\n      {moreItemsLoading && (\n        <div\n          style={{\n            position: 'absolute',\n            bottom: 0,\n            background: 'blue',\n            zIndex: 1,\n          }}\n        >\n          Loading\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst listProps = {\n  /** Function responsible for tracking the loaded state of each item. */\n  isItemLoaded: PropTypes.bool.description(\n    'Function responsible for tracking the loaded state of each item.',\n  ),\n  /**  Callback to be invoked when more rows must be loaded. It should return a Promise that is resolved once all data has finished loading. */\n  loadMoreItems: PropTypes.func.description(\n    'Callback to be invoked when more rows must be loaded. It should return a Promise that is resolved once all data has finished loading.',\n  ),\n  /** callback to get row item size */\n  getItemSize: PropTypes.func.description('callback to get row item size'),\n  /** height for the list */\n  height: PropTypes.number.description('height for the list'),\n  /** flag to know if virtual list should be on loading state */\n  moreItemsLoading: PropTypes.bool.description(\n    'flag to know if virtual list s',\n  ),\n  /** Row item to render */\n  item: PropTypes.element.description('Row item to render'),\n  /** flag for virtualized list */\n  hasNextPage: PropTypes.bool.description('flag for virtualized list'),\n};\n\nVirtualizedInfiniteLoader.propTypes = listProps;\nVirtualizedInfiniteLoader.displayName = 'VirtualizedInfiniteLoader';\nconst VirtualizedInfiniteLoaderWithSchema = describe(VirtualizedInfiniteLoader);\n\nVirtualizedInfiniteLoaderWithSchema.propTypes = listProps;\n\nexport { VirtualizedInfiniteLoader, VirtualizedInfiniteLoaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAgC;AAChC,wBAAoC;AACpC,0CAA6B;AAC7B,0BAAyC;AAEzC,MAAM,4BAA4B,CAAC;AAAA,EACjC,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,eAAe,MAAM;AAAA,EACrB;AAAA,EACA,cAAc,MAAM;AAAA,EACpB;AAAA,EACA,MAAM;AAAA,MACF;AACJ,QAAM,CAAC,WAAW,gBAAgB,2BAAS,EAAE;AAE7C,QAAM,WAAW,CAAC,YAAY,cAAc;AAC1C,QAAI;AAAa,mBAAa,YAAY,CAAC;AAC3C,WAAO,cAAc,YAAY,SAAS;AAAA,EAC5C;AAEA,SACE,mDAAC;AAAA,IAAI,OAAO,EAAE,UAAU,WAAW;AAAA,KACjC,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAe;AAAA,KAEd,CAAC,EAAE,iBAAiB,UACnB,mDAAC;AAAA,IACC,WAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,OAAM;AAAA,KAEL,GACH,CAEJ,GACC,oBACC,mDAAC;AAAA,IACC,OAAO;AAAA,MACL,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,QAAQ;AAAA,IACV;AAAA,KACD,SAED,CAEJ;AAEJ;AAEA,MAAM,YAAY;AAAA,EAEhB,cAAc,4BAAU,KAAK,YAC3B,kEACF;AAAA,EAEA,eAAe,4BAAU,KAAK,YAC5B,uIACF;AAAA,EAEA,aAAa,4BAAU,KAAK,YAAY,+BAA+B;AAAA,EAEvE,QAAQ,4BAAU,OAAO,YAAY,qBAAqB;AAAA,EAE1D,kBAAkB,4BAAU,KAAK,YAC/B,gCACF;AAAA,EAEA,MAAM,4BAAU,QAAQ,YAAY,oBAAoB;AAAA,EAExD,aAAa,4BAAU,KAAK,YAAY,2BAA2B;AACrE;AAEA,0BAA0B,YAAY;AACtC,0BAA0B,cAAc;AACxC,MAAM,sCAAsC,gCAAS,yBAAyB;AAE9E,oCAAoC,YAAY;",
+  "sourcesContent": ["import React, { useState } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport RWInfiniteLoader from 'react-window-infinite-loader';\nimport { VariableSizeList as List } from 'react-window';\n\nconst VirtualizedInfiniteLoader = ({\n  moreItemsLoading = false,\n  hasNextPage = false,\n  isItemLoaded = () => true,\n  loadMoreItems,\n  getItemSize = () => 38,\n  height,\n  item: Row,\n}) => {\n  const [itemCount, setItemCount] = useState(10);\n\n  const loadMore = (startIndex, stopIndex) => {\n    if (hasNextPage) setItemCount(itemCount + 1);\n    return loadMoreItems(startIndex, stopIndex);\n  };\n\n  return (\n    <div style={{ position: 'relative' }}>\n      <RWInfiniteLoader\n        isItemLoaded={isItemLoaded}\n        itemCount={itemCount}\n        loadMoreItems={loadMore}\n      >\n        {({ onItemsRendered, ref }) => (\n          <List\n            className=\"List\"\n            height={height}\n            itemCount={itemCount}\n            itemSize={getItemSize}\n            onItemsRendered={onItemsRendered}\n            ref={ref}\n            width=\"100%\"\n          >\n            {Row}\n          </List>\n        )}\n      </RWInfiniteLoader>\n      {moreItemsLoading && (\n        <div\n          style={{\n            position: 'absolute',\n            bottom: 0,\n            background: 'blue',\n            zIndex: 1,\n          }}\n        >\n          Loading\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst listProps = {\n  /** Function responsible for tracking the loaded state of each item. */\n  isItemLoaded: PropTypes.bool.description(\n    'Function responsible for tracking the loaded state of each item.',\n  ),\n  /**  Callback to be invoked when more rows must be loaded. It should return a Promise that is resolved once all data has finished loading. */\n  loadMoreItems: PropTypes.func.description(\n    'Callback to be invoked when more rows must be loaded. It should return a Promise that is resolved once all data has finished loading.',\n  ),\n  /** callback to get row item size */\n  getItemSize: PropTypes.func.description('callback to get row item size'),\n  /** height for the list */\n  height: PropTypes.number.description('height for the list'),\n  /** flag to know if virtual list should be on loading state */\n  moreItemsLoading: PropTypes.bool.description(\n    'flag to know if virtual list s',\n  ),\n  /** Row item to render */\n  item: PropTypes.element.description('Row item to render'),\n  /** flag for virtualized list */\n  hasNextPage: PropTypes.bool.description('flag for virtualized list'),\n};\n\nVirtualizedInfiniteLoader.propTypes = listProps;\nVirtualizedInfiniteLoader.displayName = 'VirtualizedInfiniteLoader';\nconst VirtualizedInfiniteLoaderWithSchema = describe(VirtualizedInfiniteLoader);\n\nVirtualizedInfiniteLoaderWithSchema.propTypes = listProps;\n\nexport { VirtualizedInfiniteLoader, VirtualizedInfiniteLoaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAgC;AAChC,0BAAoC;AACpC,0CAA6B;AAC7B,0BAAyC;AAEzC,MAAM,4BAA4B,CAAC;AAAA,EACjC,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,eAAe,MAAM;AAAA,EACrB;AAAA,EACA,cAAc,MAAM;AAAA,EACpB;AAAA,EACA,MAAM;AAAA,MACF;AACJ,QAAM,CAAC,WAAW,gBAAgB,2BAAS,EAAE;AAE7C,QAAM,WAAW,CAAC,YAAY,cAAc;AAC1C,QAAI;AAAa,mBAAa,YAAY,CAAC;AAC3C,WAAO,cAAc,YAAY,SAAS;AAAA,EAC5C;AAEA,SACE,mDAAC;AAAA,IAAI,OAAO,EAAE,UAAU,WAAW;AAAA,KACjC,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAe;AAAA,KAEd,CAAC,EAAE,iBAAiB,UACnB,mDAAC;AAAA,IACC,WAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,OAAM;AAAA,KAEL,GACH,CAEJ,GACC,oBACC,mDAAC;AAAA,IACC,OAAO;AAAA,MACL,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,QAAQ;AAAA,IACV;AAAA,KACD,SAED,CAEJ;AAEJ;AAEA,MAAM,YAAY;AAAA,EAEhB,cAAc,8BAAU,KAAK,YAC3B,kEACF;AAAA,EAEA,eAAe,8BAAU,KAAK,YAC5B,uIACF;AAAA,EAEA,aAAa,8BAAU,KAAK,YAAY,+BAA+B;AAAA,EAEvE,QAAQ,8BAAU,OAAO,YAAY,qBAAqB;AAAA,EAE1D,kBAAkB,8BAAU,KAAK,YAC/B,gCACF;AAAA,EAEA,MAAM,8BAAU,QAAQ,YAAY,oBAAoB;AAAA,EAExD,aAAa,8BAAU,KAAK,YAAY,2BAA2B;AACrE;AAEA,0BAA0B,YAAY;AACtC,0BAA0B,cAAc;AACxC,MAAM,sCAAsC,kCAAS,yBAAyB;AAE9E,oCAAoC,YAAY;",
   "names": []
 }

package/dist/cjs/InfiniteLoader/styled.js

@@ -24,8 +24,8 @@ __export(styled_exports, {
 });
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-const LoaderBox = import_styled_components.default.div`
+var import_ds_system = require("@elliemae/ds-system");
+const LoaderBox = import_ds_system.styled.div`
   position: absolute;
   width: 100%;
   z-index: 10;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/InfiniteLoader/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import styled from 'styled-components';\n\nexport const LoaderBox = styled.div`\n  position: absolute;\n  width: 100%;\n  z-index: 10;\n  background-color: white;\n  height: 50px;\n  bottom: -50px;\n  border-top: 1px solid #e0e3e8;\n  align-items: center;\n  transition: 400ms cubic-bezier(0, 0, 0.42, 1);\n  &.opened {\n    transition: 400ms cubic-bezier(0.36, 0, 1, 1);\n    bottom: 0;\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AAEZ,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const LoaderBox = styled.div`\n  position: absolute;\n  width: 100%;\n  z-index: 10;\n  background-color: white;\n  height: 50px;\n  bottom: -50px;\n  border-top: 1px solid #e0e3e8;\n  align-items: center;\n  transition: 400ms cubic-bezier(0, 0, 0.42, 1);\n  &.opened {\n    transition: 400ms cubic-bezier(0.36, 0, 1, 1);\n    bottom: 0;\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }