npm - @elliemae/ds-mobile - Versions diffs - 3.1.0-next.1 → 3.1.0-next.12 - Mend

@elliemae/ds-mobile 3.1.0-next.1 → 3.1.0-next.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (239) hide show

package/dist/cjs/PageSummary/PageSummary.js CHANGED Viewed

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

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

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

package/dist/cjs/PageSummary/Tags.js CHANGED Viewed

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

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

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

package/dist/cjs/SideNav/SideNav.js CHANGED Viewed

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

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

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

package/dist/cjs/SideNav/styles.js CHANGED Viewed

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

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

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

package/dist/cjs/SwipeToRefresh/SwipeToRefresh.js CHANGED Viewed

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

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

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

package/dist/cjs/SwipeToRefresh/styled.js CHANGED Viewed

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

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

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

package/dist/cjs/Tabs/index.js CHANGED Viewed

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

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

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

package/dist/cjs/Tabs/propTypes.js CHANGED Viewed

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

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

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

package/dist/esm/Accordion/DSMobileAccordion.js CHANGED Viewed

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

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

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

package/dist/esm/CategoryBox/CategoryBox.js CHANGED Viewed

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

package/dist/esm/CategoryBox/CategoryBox.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/CategoryBox/CategoryBox.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
   "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA,WAGV,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,IAE7C,SAAS;AAAA,iBACI,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA;AAGpD,MAAM,cAAc,OAAO,IAAI;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,qCAAC;AAAA,IAAK,MAAM,CAAC,QAAQ,MAAM;AAAA,KACzB,qCAAC;AAAA,IACC,MAAM;AAAA,IACN;AAAA,IACA,YAAW;AAAA,IACX,IAAG;AAAA,IACH,IAAI,aAAa,SAAS,IAAI,QAAQ;AAAA,KAEtC,qCAAC;AAAA,IAAM,IAAI,IAAI;AAAA,KAAgB,KAAM,GACpC,cACC,qCAAC;AAAA,IAAK,MAAM,MAAM,aAAa,QAAQ,MAAM,MAAM;AAAA,IAAG,aAAY;AAAA,KAC/D,YACH,CAEJ,GACC,QACH;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAIZ,OAAO,UAAU,OAAO,WAAW,YAAY,oBAAoB;AAAA,EAInE,WAAW,UAAU,KAAK,YAAY,mCAAmC;AAAA,EAIzE,cAAc,UAAU,QAAQ,UAAU,OAAO,EAAE,YAAY,uBAAuB;AAAA,EAItF,aAAa,UAAU,MAAM,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,YAAY,4CAA4C;AAAA,EAIzG,UAAU,UAAU,QAAQ,YAAY,iBAAiB;AAC3D;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
   "names": []
 }

package/dist/esm/CollectionBox/CollectionBox.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import React2 from "react";
-import { PropTypes, describe } from "react-desc";
-import styled from "styled-components";
+import { PropTypes, describe } from "@elliemae/ds-utilities";
+import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { truncate } from "@elliemae/ds-system";
 const CollectionBox = styled(Grid)`

package/dist/esm/CollectionBox/CollectionBox.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/CollectionBox/CollectionBox.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
   "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA,MAAM,gBAAgB,OAAO,IAAI;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,OAAO,IAAI;AAAA,2BACC,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAGjE,MAAM,OAAO,OAAO,IAAI;AAAA;AAAA,iBAEP,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA;AAGpD,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlB,SAAS;AAAA;AAAA;AAIb,MAAM,aAAa,OAAO,IAAI;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,qCAAC;AAAA,IAAc;AAAA,KACb,qCAAC;AAAA,IAAK,YAAW;AAAA,IAAS,MAAM;AAAA,KAC7B,SAAS,qCAAC;AAAA,IAAO,IAAI,IAAI;AAAA,KAAgB,KAAM,GAC/C,gBAAgB,qCAAC;AAAA,IAAW,aAAY;AAAA,KAAO,YAAa,CAC/D,GACA,qCAAC,YAAM,IAAK,GACX,gBACC,qCAAC;AAAA,IAAO,YAAW;AAAA,IAAS,MAAM;AAAA,KAChC,qCAAC;AAAA,IAAW,aAAY;AAAA,KAAO,YAAa,CAC9C,CAEJ;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAIZ,MAAM,UAAU,QAAQ,WAAW,YAAY,4BAA4B;AAAA,EAI3E,OAAO,UAAU,OAAO,YAAY,uBAAuB;AAAA,EAI3D,cAAc,UAAU,QAAQ,YAAY,4DAA4D;AAAA,EAIxG,cAAc,UAAU,QAAQ,YAAY,4DAA4D;AAAA,EAIxG,aAAa,UAAU,MAAM,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,YAAY,+CAA+C;AAC9G;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,SAAS,eAAe;AAC1D,0BAA0B,YAAY;",
   "names": []
 }

package/dist/esm/GlobalHeader/MobileGlobalHeader.js CHANGED Viewed

@@ -18,7 +18,7 @@ import * as React from "react";
 import React2, { useState, useCallback } from "react";
 import { Search } from "@elliemae/ds-icons";
 import { DSInput } from "@elliemae/ds-form";
-import { PropTypes, describe } from "react-desc";
+import { PropTypes, describe } from "@elliemae/ds-utilities";
 import DSButton from "@elliemae/ds-button";
 import { DSIconSizes, DSIconColors } from "@elliemae/ds-icon";
 import { debounce, noop } from "lodash";