@elliemae/ds-mobile 3.0.0-next.66 → 3.0.0-next.69

package/dist/cjs/Modal/Modal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/Modal/Modal.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { noop } from 'lodash';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { useTheme } from '@elliemae/ds-system';\nimport { ModalPosition, ModalBox, BackShadow, ModalIcon, ModalTitle, ModalDescription, BodyFix } from './styled';\n\nconst Modal = ({\n  zIndex = 1,\n  title = '',\n  description = '',\n  onClose = noop,\n  showSecondaryAction = true,\n  secondaryActionProps = {\n    onClick: noop,\n    labelText: 'Cancel',\n  },\n  primaryActionProps = {\n    onClick: noop,\n    labelText: 'Accept',\n  },\n  isOpen = false,\n}) => {\n  const theme = useTheme();\n  if (!isOpen) return null;\n  return (\n    <>\n      <BodyFix isOpen={isOpen} />\n      <BackShadow onClick={onClose} zIndex={zIndex} />\n      <ModalPosition zIndex={zIndex} cols={['auto']}>\n        <ModalBox\n          maxHeight={`${window.innerHeight * 0.75}px`}\n          rows={[1, '80px']}\n          style={{\n            overflow: 'hidden',\n          }}\n        >\n          <Grid\n            pl=\"xs\"\n            pr=\"xs\"\n            style={{\n              overflow: 'hidden',\n            }}\n          >\n            <Grid\n              rows={['auto', 'auto', 1]}\n              style={{\n                overflow: 'hidden',\n              }}\n            >\n              <ModalIcon>\n                <WarningTriangle size=\"xxl\" />\n              </ModalIcon>\n              <ModalTitle data-testid=\"modal-title\">{title}</ModalTitle>\n              <ModalDescription\n                data-testid=\"modal-desc\"\n                style={{\n                  overflow: 'auto',\n                }}\n              >\n                {description}\n              </ModalDescription>\n            </Grid>\n          </Grid>\n          <Grid pt=\"24px\">\n            <Grid\n              pl=\"xs\"\n              pr=\"xs\"\n              cols={showSecondaryAction ? [1, 1] : [1]}\n              gutter=\"xs\"\n              justifyContent=\"center\"\n              alignItems=\"center\"\n              style={{\n                borderTop: `1px solid ${theme.colors.neutral[100]}`,\n              }}\n            >\n              {showSecondaryAction && (\n                <DSButton\n                  {...secondaryActionProps}\n                  labelText={secondaryActionProps.labelText || ' Cancel'}\n                  buttonType=\"secondary\"\n                  data-testid=\"modal-secondary-btn\"\n                />\n              )}\n              <DSButton\n                labelText={primaryActionProps.labelText || ' Accept'}\n                {...primaryActionProps}\n                buttonType=\"primary\"\n                data-testid=\"modal-primary-btn\"\n              />\n            </Grid>\n          </Grid>\n        </ModalBox>\n      </ModalPosition>\n    </>\n  );\n};\n\nconst modalProps = {\n  isOpen: PropTypes.bool.description('Wheter the modal is open or closed').defaultValue(false),\n  zIndex: PropTypes.number.description('z-index value').defaultValue(1),\n  title: PropTypes.string.description('Modal s title').isRequired,\n  description: PropTypes.string.description('Modal s content').isRequired,\n  onClose: PropTypes.func.description('Function executed when the modal closes'),\n  showSecondaryAction: PropTypes.bool.description('Wheter to show secondary action button or not').defaultValue(true),\n  secondaryActionProps: PropTypes.shape({\n    onClick: PropTypes.func,\n    labelText: PropTypes.string,\n  }).description('Secondary action props'),\n  primaryActionProps: PropTypes.shape({\n    onClick: PropTypes.func,\n    labelText: PropTypes.string,\n  }).description('Primary action props'),\n};\n\nModal.propTypes = modalProps;\n\nconst ModalWithSchema = describe(Modal);\nModalWithSchema.propTypes = modalProps;\n\nexport { Modal, ModalWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAoC;AACpC,oBAAqB;AACrB,qBAAqB;AACrB,sBAAgC;AAChC,uBAAqB;AACrB,uBAAyB;AACzB,oBAAsG;AAEtG,MAAM,QAAQ,CAAC;AAAA,EACb,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,UAAU;AAAA,EACV,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,qBAAqB;AAAA,IACnB,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,SAAS;AAAA,MACL;AACJ,QAAM,QAAQ,+BAAS;AACvB,MAAI,CAAC;AAAQ,WAAO;AACpB,SACE,wFACE,mDAAC;AAAA,IAAQ;AAAA,GAAgB,GACzB,mDAAC;AAAA,IAAW,SAAS;AAAA,IAAS;AAAA,GAAgB,GAC9C,mDAAC;AAAA,IAAc;AAAA,IAAgB,MAAM,CAAC,MAAM;AAAA,KAC1C,mDAAC;AAAA,IACC,WAAW,GAAG,OAAO,cAAc;AAAA,IACnC,MAAM,CAAC,GAAG,MAAM;AAAA,IAChB,OAAO;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,KAEA,mDAAC;AAAA,IACC,IAAG;AAAA,IACH,IAAG;AAAA,IACH,OAAO;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,KAEA,mDAAC;AAAA,IACC,MAAM,CAAC,QAAQ,QAAQ,CAAC;AAAA,IACxB,OAAO;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,KAEA,mDAAC,+BACC,mDAAC;AAAA,IAAgB,MAAK;AAAA,GAAM,CAC9B,GACA,mDAAC;AAAA,IAAW,eAAY;AAAA,KAAe,KAAM,GAC7C,mDAAC;AAAA,IACC,eAAY;AAAA,IACZ,OAAO;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,KAEC,WACH,CACF,CACF,GACA,mDAAC;AAAA,IAAK,IAAG;AAAA,KACP,mDAAC;AAAA,IACC,IAAG;AAAA,IACH,IAAG;AAAA,IACH,MAAM,sBAAsB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAAA,IACvC,QAAO;AAAA,IACP,gBAAe;AAAA,IACf,YAAW;AAAA,IACX,OAAO;AAAA,MACL,WAAW,aAAa,MAAM,OAAO,QAAQ;AAAA,IAC/C;AAAA,KAEC,uBACC,mDAAC,2DACK,uBADL;AAAA,IAEC,WAAW,qBAAqB,aAAa;AAAA,IAC7C,YAAW;AAAA,IACX,eAAY;AAAA,IACd,GAEF,mDAAC;AAAA,IACC,WAAW,mBAAmB,aAAa;AAAA,KACvC,qBAFL;AAAA,IAGC,YAAW;AAAA,IACX,eAAY;AAAA,IACd,CACF,CACF,CACF,CACF,CACF;AAEJ;AAEA,MAAM,aAAa;AAAA,EACjB,QAAQ,4BAAU,KAAK,YAAY,oCAAoC,EAAE,aAAa,KAAK;AAAA,EAC3F,QAAQ,4BAAU,OAAO,YAAY,eAAe,EAAE,aAAa,CAAC;AAAA,EACpE,OAAO,4BAAU,OAAO,YAAY,eAAe,EAAE;AAAA,EACrD,aAAa,4BAAU,OAAO,YAAY,iBAAiB,EAAE;AAAA,EAC7D,SAAS,4BAAU,KAAK,YAAY,yCAAyC;AAAA,EAC7E,qBAAqB,4BAAU,KAAK,YAAY,+CAA+C,EAAE,aAAa,IAAI;AAAA,EAClH,sBAAsB,4BAAU,MAAM;AAAA,IACpC,SAAS,4BAAU;AAAA,IACnB,WAAW,4BAAU;AAAA,EACvB,CAAC,EAAE,YAAY,wBAAwB;AAAA,EACvC,oBAAoB,4BAAU,MAAM;AAAA,IAClC,SAAS,4BAAU;AAAA,IACnB,WAAW,4BAAU;AAAA,EACvB,CAAC,EAAE,YAAY,sBAAsB;AACvC;AAEA,MAAM,YAAY;AAElB,MAAM,kBAAkB,gCAAS,KAAK;AACtC,gBAAgB,YAAY;",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { noop } from 'lodash';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { useTheme } from '@elliemae/ds-system';\nimport { ModalPosition, ModalBox, BackShadow, ModalIcon, ModalTitle, ModalDescription, BodyFix } from './styled';\n\nconst Modal = ({\n  zIndex = 1,\n  title = '',\n  description = '',\n  onClose = noop,\n  showSecondaryAction = true,\n  secondaryActionProps = {\n    onClick: noop,\n    labelText: 'Cancel',\n  },\n  primaryActionProps = {\n    onClick: noop,\n    labelText: 'Accept',\n  },\n  isOpen = false,\n}) => {\n  const theme = useTheme();\n  if (!isOpen) return null;\n  return (\n    <>\n      <BodyFix isOpen={isOpen} />\n      <BackShadow onClick={onClose} zIndex={zIndex} />\n      <ModalPosition zIndex={zIndex} cols={['auto']}>\n        <ModalBox\n          maxHeight={`${window.innerHeight * 0.75}px`}\n          rows={[1, '80px']}\n          style={{\n            overflow: 'hidden',\n          }}\n        >\n          <Grid\n            pl=\"xs\"\n            pr=\"xs\"\n            style={{\n              overflow: 'hidden',\n            }}\n          >\n            <Grid\n              rows={['auto', 'auto', 1]}\n              style={{\n                overflow: 'hidden',\n              }}\n            >\n              <ModalIcon>\n                <WarningTriangle size=\"xxl\" />\n              </ModalIcon>\n              <ModalTitle data-testid=\"modal-title\">{title}</ModalTitle>\n              <ModalDescription\n                data-testid=\"modal-desc\"\n                style={{\n                  overflow: 'auto',\n                }}\n              >\n                {description}\n              </ModalDescription>\n            </Grid>\n          </Grid>\n          <Grid pt=\"24px\">\n            <Grid\n              pl=\"xs\"\n              pr=\"xs\"\n              cols={showSecondaryAction ? [1, 1] : [1]}\n              gutter=\"xs\"\n              justifyContent=\"center\"\n              alignItems=\"center\"\n              style={{\n                borderTop: `1px solid ${theme.colors.neutral[100]}`,\n              }}\n            >\n              {showSecondaryAction && (\n                <DSButton\n                  {...secondaryActionProps}\n                  labelText={secondaryActionProps.labelText || ' Cancel'}\n                  buttonType=\"secondary\"\n                  data-testid=\"modal-secondary-btn\"\n                />\n              )}\n              <DSButton\n                labelText={primaryActionProps.labelText || ' Accept'}\n                {...primaryActionProps}\n                buttonType=\"primary\"\n                data-testid=\"modal-primary-btn\"\n              />\n            </Grid>\n          </Grid>\n        </ModalBox>\n      </ModalPosition>\n    </>\n  );\n};\n\nconst modalProps = {\n  isOpen: PropTypes.bool.description('Wheter the modal is open or closed').defaultValue(false),\n  zIndex: PropTypes.number.description('z-index value').defaultValue(1),\n  title: PropTypes.string.description('Modal s title').isRequired,\n  description: PropTypes.string.description('Modal s content').isRequired,\n  onClose: PropTypes.func.description('Function executed when the modal closes'),\n  showSecondaryAction: PropTypes.bool.description('Wheter to show secondary action button or not').defaultValue(true),\n  secondaryActionProps: PropTypes.shape({\n    onClick: PropTypes.func,\n    labelText: PropTypes.string,\n  }).description('Secondary action props'),\n  primaryActionProps: PropTypes.shape({\n    onClick: PropTypes.func,\n    labelText: PropTypes.string,\n  }).description('Primary action props'),\n};\n\nModal.propTypes = modalProps;\nModal.displayName = 'Modal';\nconst ModalWithSchema = describe(Modal);\nModalWithSchema.propTypes = modalProps;\n\nexport { Modal, ModalWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAoC;AACpC,oBAAqB;AACrB,qBAAqB;AACrB,sBAAgC;AAChC,uBAAqB;AACrB,uBAAyB;AACzB,oBAAsG;AAEtG,MAAM,QAAQ,CAAC;AAAA,EACb,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,UAAU;AAAA,EACV,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,qBAAqB;AAAA,IACnB,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,SAAS;AAAA,MACL;AACJ,QAAM,QAAQ,+BAAS;AACvB,MAAI,CAAC;AAAQ,WAAO;AACpB,SACE,wFACE,mDAAC;AAAA,IAAQ;AAAA,GAAgB,GACzB,mDAAC;AAAA,IAAW,SAAS;AAAA,IAAS;AAAA,GAAgB,GAC9C,mDAAC;AAAA,IAAc;AAAA,IAAgB,MAAM,CAAC,MAAM;AAAA,KAC1C,mDAAC;AAAA,IACC,WAAW,GAAG,OAAO,cAAc;AAAA,IACnC,MAAM,CAAC,GAAG,MAAM;AAAA,IAChB,OAAO;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,KAEA,mDAAC;AAAA,IACC,IAAG;AAAA,IACH,IAAG;AAAA,IACH,OAAO;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,KAEA,mDAAC;AAAA,IACC,MAAM,CAAC,QAAQ,QAAQ,CAAC;AAAA,IACxB,OAAO;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,KAEA,mDAAC,+BACC,mDAAC;AAAA,IAAgB,MAAK;AAAA,GAAM,CAC9B,GACA,mDAAC;AAAA,IAAW,eAAY;AAAA,KAAe,KAAM,GAC7C,mDAAC;AAAA,IACC,eAAY;AAAA,IACZ,OAAO;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,KAEC,WACH,CACF,CACF,GACA,mDAAC;AAAA,IAAK,IAAG;AAAA,KACP,mDAAC;AAAA,IACC,IAAG;AAAA,IACH,IAAG;AAAA,IACH,MAAM,sBAAsB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAAA,IACvC,QAAO;AAAA,IACP,gBAAe;AAAA,IACf,YAAW;AAAA,IACX,OAAO;AAAA,MACL,WAAW,aAAa,MAAM,OAAO,QAAQ;AAAA,IAC/C;AAAA,KAEC,uBACC,mDAAC,2DACK,uBADL;AAAA,IAEC,WAAW,qBAAqB,aAAa;AAAA,IAC7C,YAAW;AAAA,IACX,eAAY;AAAA,IACd,GAEF,mDAAC;AAAA,IACC,WAAW,mBAAmB,aAAa;AAAA,KACvC,qBAFL;AAAA,IAGC,YAAW;AAAA,IACX,eAAY;AAAA,IACd,CACF,CACF,CACF,CACF,CACF;AAEJ;AAEA,MAAM,aAAa;AAAA,EACjB,QAAQ,4BAAU,KAAK,YAAY,oCAAoC,EAAE,aAAa,KAAK;AAAA,EAC3F,QAAQ,4BAAU,OAAO,YAAY,eAAe,EAAE,aAAa,CAAC;AAAA,EACpE,OAAO,4BAAU,OAAO,YAAY,eAAe,EAAE;AAAA,EACrD,aAAa,4BAAU,OAAO,YAAY,iBAAiB,EAAE;AAAA,EAC7D,SAAS,4BAAU,KAAK,YAAY,yCAAyC;AAAA,EAC7E,qBAAqB,4BAAU,KAAK,YAAY,+CAA+C,EAAE,aAAa,IAAI;AAAA,EAClH,sBAAsB,4BAAU,MAAM;AAAA,IACpC,SAAS,4BAAU;AAAA,IACnB,WAAW,4BAAU;AAAA,EACvB,CAAC,EAAE,YAAY,wBAAwB;AAAA,EACvC,oBAAoB,4BAAU,MAAM;AAAA,IAClC,SAAS,4BAAU;AAAA,IACnB,WAAW,4BAAU;AAAA,EACvB,CAAC,EAAE,YAAY,sBAAsB;AACvC;AAEA,MAAM,YAAY;AAClB,MAAM,cAAc;AACpB,MAAM,kBAAkB,gCAAS,KAAK;AACtC,gBAAgB,YAAY;",
   "names": []
 }

package/dist/cjs/SideNav/SideNav.js

@@ -88,6 +88,7 @@ const navProps = {
   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");
 DSSideNavWithSchema.propTypes = navProps;
 //# sourceMappingURL=SideNav.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/SideNav/SideNav.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable import/no-unresolved */\n/* eslint-disable max-lines */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { useState } from 'react';\nimport { DSBackdrop } from '@elliemae/ds-backdrop';\nimport { Close } from '@elliemae/ds-icons';\nimport { DSIconSizes, DSIconColors } from '@elliemae/ds-icon';\nimport { PropTypes, describe } from 'react-desc';\nimport { noop } from 'lodash';\nimport Logo from '../Icons/EM_logo';\nimport { Container, Menu, Heading, Icon, Hr, MenuList, BottomMenu, MenuWrapper } from './styles';\n\nconst DSSideNav = ({ containerProps = {}, title, onClose = noop, menuItems = [], bottomMenuItems = [] }) => {\n  const [selectedMenuItemIdx, setSelectedMenuItem] = useState(-1);\n\n  const menuItemClick = (idx, text, cb) => {\n    if (cb) {\n      cb(idx, text);\n    }\n    setSelectedMenuItem(idx);\n  };\n\n  const renderMenuList = () => (\n    <>\n      {menuItems.length > 0 ? (\n        <MenuList>\n          {menuItems.map(({ icon, text, onClick }, idx) => (\n            <div key={idx} className=\"menuitem\" onClick={menuItemClick.bind(null, idx, text, onClick)}>\n              <div className=\"icon\">{icon}</div>\n              <div className={`text ${idx === selectedMenuItemIdx ? 'active' : ''}`}>{text}</div>\n            </div>\n          ))}\n        </MenuList>\n      ) : null}\n    </>\n  );\n\n  const renderBottomMenu = () => (\n    <MenuList>\n      {bottomMenuItems.map(({ icon, text, onClick }, idx) => (\n        <div key={idx} className=\"menuitem\" onClick={() => onClick(idx, text)}>\n          <div className=\"icon\">{icon}</div>\n          <div className=\"text\">{text}</div>\n        </div>\n      ))}\n    </MenuList>\n  );\n\n  return (\n    <Container data-testid={containerProps['data-testid'] || 'global-header-menu'}>\n      <DSBackdrop onClick={onClose} type=\"cover\"></DSBackdrop>\n\n      <Menu>\n        <MenuWrapper>\n          <Heading>\n            <Icon>{Logo()}</Icon>\n            <div className=\"content\">\n              <label>{title}</label>\n              <span></span>\n              <div className=\"icon\">\n                <Close onClick={onClose} size={DSIconSizes.S} color={DSIconColors.WHITE} />\n              </div>\n            </div>\n          </Heading>\n          <Hr></Hr>\n          {renderMenuList()}\n          {bottomMenuItems.length > 0 ? (\n            <BottomMenu>\n              <div className=\"content\">\n                <hr></hr>\n                {renderBottomMenu()}\n              </div>\n            </BottomMenu>\n          ) : null}\n        </MenuWrapper>\n      </Menu>\n    </Container>\n  );\n};\n\nconst menuProps = PropTypes.arrayOf(\n  PropTypes.shape({\n    icon: PropTypes.element,\n    text: PropTypes.string,\n  }),\n);\n\nconst navProps = {\n  /** inject props to wrapper element of side nav */\n  containerProps: PropTypes.object.description('inject props to wrapper element of side nav'),\n  /**\n   * Heading Title\n   */\n  title: PropTypes.string.isRequired.description('Heading Title'),\n  /**\n   * Callback function when close is menu is triggered\n   */\n  onClose: PropTypes.func.description('Callback function when close is menu is triggered'),\n  /**\n   * Top Menu items array\n   */\n  menuItems: menuProps.description('Top Menu items array'),\n  /**\n   * Bottom Menu items array\n   */\n  bottomMenuItems: menuProps.description('Bottom Menu items array'),\n};\n\nDSSideNav.propTypes = navProps;\n\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;AAEtB,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 '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;",
   "names": []
 }

package/dist/cjs/SwipeToRefresh/SwipeToRefresh.js

@@ -65,6 +65,7 @@ const props = {
   onRefresh: import_react_desc.PropTypes.func.description("callback on refresh swipe")
 };
 SwipeToRefresh.propTypes = props;
+SwipeToRefresh.displayName = "SwipeToRefresh";
 const SwipeToRefreshWithSchema = (0, import_react_desc.describe)(SwipeToRefresh);
 SwipeToRefreshWithSchema.propTypes = props;
 //# sourceMappingURL=SwipeToRefresh.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/SwipeToRefresh/SwipeToRefresh.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { useTheme } from '@elliemae/ds-system';\nimport { useSwipe } from './useSwipe';\nimport { SwipeContainer, SwipeDrag, LoaderBox, PositionLoader } from './styled';\nimport { ProgressIndicator } from './ProgressIndicator';\n\nconst SwipeToRefresh = ({ children, loading, onRefresh }) => {\n  const breakpoint = 60;\n  const theme = useTheme();\n  const swipe = useSwipe({ onRefresh, breakpoint });\n  const progress = swipe.height > breakpoint ? 100 : (swipe.height * 100) / breakpoint;\n  return (\n    <SwipeContainer>\n      <SwipeDrag\n        onTouchStart={swipe.touchStart}\n        onTouchEnd={swipe.touchEnd}\n        onTouchCancel={swipe.touchCancel}\n        onTouchMove={swipe.touchMove}\n        ref={swipe.ref}\n      >\n        <LoaderBox\n          height={loading ? theme.space.m : `${swipe.height}px`}\n          alignItems=\"flex-start\"\n          data-testid=\"loader-box\"\n        >\n          <PositionLoader\n            height={theme.space.m}\n            justifyContent=\"center\"\n            alignItems=\"center\"\n            mt={swipe.height > 40 || loading ? 0 : `${swipe.height - 40}px`}\n          >\n            {loading ? <DSCircularProgressIndicator /> : <ProgressIndicator progress={progress} />}\n          </PositionLoader>\n        </LoaderBox>\n        <div ref={swipe.target} style={{ height: 1 }} />\n        {children}\n      </SwipeDrag>\n    </SwipeContainer>\n  );\n};\n\nconst props = {\n  /** component inside swipe to refresh container */\n  children: PropTypes.element.isRequired.description('component inside swipe to refresh container'),\n  /** toggle loading state for swipe */\n  loading: PropTypes.bool.description('toggle loading state for swipe'),\n  /** callback on refresh swipe */\n  onRefresh: PropTypes.func.description('callback on refresh swipe'),\n};\n\nSwipeToRefresh.propTypes = props;\n\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;AAE3B,MAAM,2BAA2B,gCAAS,cAAc;AAExD,yBAAyB,YAAY;",
+  "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;",
   "names": []
 }

package/dist/cjs/Tabs/index.js

@@ -70,9 +70,11 @@ const DSMobileTab = (_c) => {
   return /* @__PURE__ */ React.createElement(import_ds_tabs.DSTab, __spreadValues({}, props), children);
 };
 DSMobileTabs.propTypes = import_propTypes.MobileTabsPropTypes;
+DSMobileTabs.displayName = "DSMobileTabs";
 const DSMobileTabsWithSchema = (0, import_react_desc.describe)(DSMobileTabs);
 DSMobileTabsWithSchema.propTypes = import_propTypes.MobileTabsPropTypes;
 DSMobileTab.propTypes = import_propTypes.MobileTabPropTypes;
+DSMobileTab.displayName = "DSMobileTab";
 const DSMobileTabWithSchema = (0, import_react_desc.describe)(DSMobileTab);
 DSMobileTabWithSchema.propTypes = import_propTypes.MobileTabPropTypes;
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/Tabs/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport { describe } from 'react-desc';\nimport { DSTabs, DSTab } from '@elliemae/ds-tabs';\nimport type { DSTabsT, DSTabT } from '@elliemae/ds-tabs';\nimport { MobileTabsPropTypes, MobileTabPropTypes } from './propTypes';\n\ntype DSMobileTabsPropsT = Omit<\n  DSTabsT.InternalProps,\n  'animated' | 'enableMouseEvents' | 'allowTextSelection' | 'type' | 'isDSMobile' | 'withCarousel'\n>;\n\ntype DSMobileTabPropsT = Omit<DSTabT.Props, 'isDSMobile'>;\n\nexport const DSMobileTabs = ({ children, ...props }: DSMobileTabsPropsT) => (\n  <DSTabs {...props} isDSMobile>\n    {children}\n  </DSTabs>\n);\n\nexport const DSMobileTab = ({ children, ...props }: DSMobileTabPropsT) => <DSTab {...props}>{children}</DSTab>;\n\nDSMobileTabs.propTypes = MobileTabsPropTypes as WeakValidationMap<unknown>;\nconst DSMobileTabsWithSchema = describe(DSMobileTabs);\nDSMobileTabsWithSchema.propTypes = MobileTabsPropTypes;\n\nDSMobileTab.propTypes = MobileTabPropTypes as WeakValidationMap<unknown>;\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,MAAM,yBAAyB,gCAAS,YAAY;AACpD,uBAAuB,YAAY;AAEnC,YAAY,YAAY;AACxB,MAAM,wBAAwB,gCAAS,WAAW;AAClD,sBAAsB,YAAY;",
+  "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;",
   "names": []
 }

package/dist/esm/Accordion/Accordion.js

@@ -44,9 +44,11 @@ const DSMobileAccordionItem = (_c) => {
   return /* @__PURE__ */ React.createElement(DSAccordionItem, __spreadValues({}, props), children);
 };
 DSMobileAccordionItem.propTypes = mobileAccordionItemPropTypes;
+DSMobileAccordionItem.displayName = "DSMobileAccordionItem";
 const DSMobileAccordionItemWithSchema = describe(DSMobileAccordionItem);
 DSMobileAccordionItemWithSchema.propTypes = mobileAccordionItemPropTypes;
 DSMobileAccordion.propTypes = mobileAccordionPropTypes;
+DSMobileAccordion.displayName = "DSMobileAccordion";
 const DSMobileAccordionWithSchema = describe(DSMobileAccordion);
 DSMobileAccordionWithSchema.propTypes = mobileAccordionPropTypes;
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Accordion/Accordion.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport { describe } from 'react-desc';\nimport { DSAccordion, DSAccordionItem } from '@elliemae/ds-accordion';\nimport type { DSAccordionT } from '@elliemae/ds-accordion';\nimport { mobileAccordionItemPropTypes, mobileAccordionPropTypes } from './propTypes';\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.propTypes = mobileAccordionItemPropTypes as WeakValidationMap<unknown>;\nconst DSMobileAccordionItemWithSchema = describe(DSMobileAccordionItem);\nDSMobileAccordionItemWithSchema.propTypes = mobileAccordionItemPropTypes;\n\nDSMobileAccordion.propTypes = mobileAccordionPropTypes as WeakValidationMap<unknown>;\nconst DSMobileAccordionWithSchema = describe(DSMobileAccordion);\nDSMobileAccordionWithSchema.propTypes = mobileAccordionPropTypes;\n\nexport { DSMobileAccordionItemWithSchema, DSMobileAccordionWithSchema };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;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,YAAY;AAClC,MAAM,kCAAkC,SAAS,qBAAqB;AACtE,gCAAgC,YAAY;AAE5C,kBAAkB,YAAY;AAC9B,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport { describe } from 'react-desc';\nimport { DSAccordion, DSAccordionItem } from '@elliemae/ds-accordion';\nimport type { DSAccordionT } from '@elliemae/ds-accordion';\nimport { mobileAccordionItemPropTypes, mobileAccordionPropTypes } from './propTypes';\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.propTypes = mobileAccordionItemPropTypes as WeakValidationMap<unknown>;\nDSMobileAccordionItem.displayName = 'DSMobileAccordionItem';\nconst DSMobileAccordionItemWithSchema = describe(DSMobileAccordionItem);\nDSMobileAccordionItemWithSchema.propTypes = mobileAccordionItemPropTypes;\n\nDSMobileAccordion.propTypes = mobileAccordionPropTypes as WeakValidationMap<unknown>;\nDSMobileAccordion.displayName = 'DSMobileAccordion';\nconst DSMobileAccordionWithSchema = describe(DSMobileAccordion);\nDSMobileAccordionWithSchema.propTypes = mobileAccordionPropTypes;\n\nexport { DSMobileAccordionItemWithSchema, DSMobileAccordionWithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;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,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,SAAS,qBAAqB;AACtE,gCAAgC,YAAY;AAE5C,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
   "names": []
 }

package/dist/esm/CategoryBox/CategoryBox.js

@@ -45,6 +45,7 @@ const props = {
   children: PropTypes.element.description("In-box children")
 };
 DSCategoryBox.propTypes = props;
+DSCategoryBox.displayName = "DSCategoryBox";
 const DSCategoryBoxWithSchema = describe(DSCategoryBox);
 DSCategoryBoxWithSchema.propTypes = props;
 export {

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

@@ -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;\n\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;AAE1B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "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"],
+  "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

@@ -71,6 +71,7 @@ const props = {
   headerLevel: 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 = describe(DSCollectionBox);
 DSCollectionBoxWithSchema.propTypes = props;
 export {

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

@@ -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;\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,MAAM,4BAA4B,SAAS,eAAe;AAC1D,0BAA0B,YAAY;",
+  "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"],
+  "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

@@ -100,6 +100,7 @@ const props = {
   bottomMenuItems: menuProps
 };
 DSGlobalHeader.propTypes = props;
+DSGlobalHeader.displayName = "DSGlobalHeader";
 const DSGlobalHeaderWithSchema = describe(DSGlobalHeader);
 DSGlobalHeaderWithSchema.propTypes = props;
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/GlobalHeader/MobileGlobalHeader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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;\nconst DSGlobalHeaderWithSchema = describe(DSGlobalHeader);\nDSGlobalHeaderWithSchema.propTypes = props;\n\nexport { DSGlobalHeader, DSGlobalHeaderWithSchema };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,iBAAiB,CAAC;AAAA,EACtB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,MACI;AACJ,QAAM,CAAC,kBAAkB,uBAAuB,SAAS,KAAK;AAC9D,QAAM,CAAC,aAAa,kBAAkB,SAAS;AAC/C,QAAM,CAAC,UAAU,eAAe,SAAS,KAAK;AAC9C,QAAM,gBAAgB,MAAM;AAC1B,wBAAoB,IAAI;AAAA,EAC1B;AAEA,QAAM,0BAA0B,YAAY,SAAS,gBAAgB,GAAG,GAAG,CAAC,CAAC;AAC7E,QAAM,qBAAqB,CAAC,MAAM;AAChC,UAAM,MAAM,EAAE,OAAO;AACrB,4BAAwB,GAAG;AAC3B,mBAAe,GAAG;AAAA,EACpB;AAEA,QAAM,qBAAqB,MAAM;AAC/B,wBAAoB,KAAK;AAAA,EAC3B;AAEA,QAAM,aAAa,CAAC,SAAS;AAC3B,gBAAY,IAAI;AAAA,EAClB;AAEA,SACE,4DACE,qCAAC;AAAA,IAAU,eAAa,eAAe,kBAAkB;AAAA,KAA6B,iBACnF,CAAC,mBACA,4DACE,qCAAC,mBACC,qCAAC;AAAA,IAAK,SAAS,WAAW,KAAK,MAAM,IAAI;AAAA,KAAI,KAAK,CAAE,GACpD,qCAAC,aAAO,KAAM,GACd,qCAAC,YAAK,GACN,qCAAC,oBACC,qCAAC;AAAA,IAAK,MAAM,WAAW,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;AAAA,IAAG,QAAO;AAAA,KAClD,qCAAC,YACC,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,MAAM,YAAY;AAAA,IAClB,OAAO,aAAa;AAAA,IACpB,SAAS;AAAA,GACX,CACF,GACC,YAAY,qCAAC,YAAM,QAAS,CAC/B,CACF,CACF,CACF,IAEA,qCAAC,qBACC,qCAAC;AAAA,IACC,WAAS;AAAA,IACT,WAAU;AAAA,IACV,aAAY;AAAA,IACZ,UAAU;AAAA,IACV,gBACE,qCAAC;AAAA,MACC,YAAW;AAAA,MACX,WAAU;AAAA,MACV,MAAM,qCAAC;AAAA,QAAO,MAAM,YAAY;AAAA,QAAG,OAAO,aAAa;AAAA,QAAO,SAAS;AAAA,OAAoB;AAAA,KAC7F;AAAA,IAEF,OAAO;AAAA,IACP,SAAQ;AAAA,GACV,CACF,CAEJ,GACC,WACC,qCAAC;AAAA,IACC;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,SAAS,WAAW,KAAK,MAAM,KAAK;AAAA,GACrC,IACC,IACN;AAEJ;AAEA,MAAM,YAAY,UAAU,QAC1B,UAAU,MAAM;AAAA,EACd,MAAM,UAAU;AAAA,EAChB,MAAM,UAAU;AAClB,CAAC,CACH,EAAE,YAAY,iBAAiB;AAE/B,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,4BAA4B;AAAA,EAIzE,OAAO,UAAU,OAAO,WAAW,YAAY,eAAe;AAAA,EAI9D,UAAU,UAAU,QAAQ,YAAY,qBAAqB;AAAA,EAI7D,gBAAgB,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAIhF,cAAc;AAAA,EAId,iBAAiB;AACnB;AAEA,eAAe,YAAY;AAC3B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,iBAAiB,CAAC;AAAA,EACtB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,MACI;AACJ,QAAM,CAAC,kBAAkB,uBAAuB,SAAS,KAAK;AAC9D,QAAM,CAAC,aAAa,kBAAkB,SAAS;AAC/C,QAAM,CAAC,UAAU,eAAe,SAAS,KAAK;AAC9C,QAAM,gBAAgB,MAAM;AAC1B,wBAAoB,IAAI;AAAA,EAC1B;AAEA,QAAM,0BAA0B,YAAY,SAAS,gBAAgB,GAAG,GAAG,CAAC,CAAC;AAC7E,QAAM,qBAAqB,CAAC,MAAM;AAChC,UAAM,MAAM,EAAE,OAAO;AACrB,4BAAwB,GAAG;AAC3B,mBAAe,GAAG;AAAA,EACpB;AAEA,QAAM,qBAAqB,MAAM;AAC/B,wBAAoB,KAAK;AAAA,EAC3B;AAEA,QAAM,aAAa,CAAC,SAAS;AAC3B,gBAAY,IAAI;AAAA,EAClB;AAEA,SACE,4DACE,qCAAC;AAAA,IAAU,eAAa,eAAe,kBAAkB;AAAA,KAA6B,iBACnF,CAAC,mBACA,4DACE,qCAAC,mBACC,qCAAC;AAAA,IAAK,SAAS,WAAW,KAAK,MAAM,IAAI;AAAA,KAAI,KAAK,CAAE,GACpD,qCAAC,aAAO,KAAM,GACd,qCAAC,YAAK,GACN,qCAAC,oBACC,qCAAC;AAAA,IAAK,MAAM,WAAW,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;AAAA,IAAG,QAAO;AAAA,KAClD,qCAAC,YACC,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,MAAM,YAAY;AAAA,IAClB,OAAO,aAAa;AAAA,IACpB,SAAS;AAAA,GACX,CACF,GACC,YAAY,qCAAC,YAAM,QAAS,CAC/B,CACF,CACF,CACF,IAEA,qCAAC,qBACC,qCAAC;AAAA,IACC,WAAS;AAAA,IACT,WAAU;AAAA,IACV,aAAY;AAAA,IACZ,UAAU;AAAA,IACV,gBACE,qCAAC;AAAA,MACC,YAAW;AAAA,MACX,WAAU;AAAA,MACV,MAAM,qCAAC;AAAA,QAAO,MAAM,YAAY;AAAA,QAAG,OAAO,aAAa;AAAA,QAAO,SAAS;AAAA,OAAoB;AAAA,KAC7F;AAAA,IAEF,OAAO;AAAA,IACP,SAAQ;AAAA,GACV,CACF,CAEJ,GACC,WACC,qCAAC;AAAA,IACC;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,SAAS,WAAW,KAAK,MAAM,KAAK;AAAA,GACrC,IACC,IACN;AAEJ;AAEA,MAAM,YAAY,UAAU,QAC1B,UAAU,MAAM;AAAA,EACd,MAAM,UAAU;AAAA,EAChB,MAAM,UAAU;AAClB,CAAC,CACH,EAAE,YAAY,iBAAiB;AAE/B,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,4BAA4B;AAAA,EAIzE,OAAO,UAAU,OAAO,WAAW,YAAY,eAAe;AAAA,EAI9D,UAAU,UAAU,QAAQ,YAAY,qBAAqB;AAAA,EAI7D,gBAAgB,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAIhF,cAAc;AAAA,EAId,iBAAiB;AACnB;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/esm/GroupBox/GroupBox.js

@@ -49,6 +49,7 @@ const props = {
   actionsRight: PropTypes.arrayOf(PropTypes.element).description("Array of button icons")
 };
 DSGroupBox.propTypes = props;
+DSGroupBox.displayName = "DSGroupBox";
 const DSGroupBoxWithSchema = describe(DSGroupBox);
 DSGroupBoxWithSchema.propTypes = props;
 export {

package/dist/esm/GroupBox/GroupBox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/GroupBox/GroupBox.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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;\nconst DSGroupBoxWithSchema = describe(DSGroupBox);\nDSGroupBoxWithSchema.propTypes = props;\n\nexport { DSGroupBox, DSGroupBoxWithSchema };\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA,IAGjB,SAAS;AAAA,WACF,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,iBAGhC,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA;AAGpD,MAAM,WAAW,OAAO,IAAI;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,qCAAC;AAAA,IAAK,MAAM,CAAC,QAAQ,MAAM;AAAA,KACzB,qCAAC;AAAA,IACC;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,YAAW;AAAA,IACX,IAAG;AAAA,IACH,IAAI,aAAa,QAAQ;AAAA,KAEzB,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,UAAU,UAAU,QAAQ,YAAY,iBAAiB;AAAA,EAIzD,YAAY,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,kBAAkB;AAAA,EAI7E,WAAW,UAAU,KAAK,YAAY,gCAAgC;AAAA,EAItE,OAAO,UAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAIhE,aAAa,UAAU,MAAM,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,YAAY,4CAA4C;AAAA,EAIzG,cAAc,UAAU,QAAQ,UAAU,OAAO,EAAE,YAAY,uBAAuB;AACxF;AAEA,WAAW,YAAY;AACvB,MAAM,uBAAuB,SAAS,UAAU;AAChD,qBAAqB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA,IAGjB,SAAS;AAAA,WACF,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,iBAGhC,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA;AAGpD,MAAM,WAAW,OAAO,IAAI;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,qCAAC;AAAA,IAAK,MAAM,CAAC,QAAQ,MAAM;AAAA,KACzB,qCAAC;AAAA,IACC;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,YAAW;AAAA,IACX,IAAG;AAAA,IACH,IAAI,aAAa,QAAQ;AAAA,KAEzB,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,UAAU,UAAU,QAAQ,YAAY,iBAAiB;AAAA,EAIzD,YAAY,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,kBAAkB;AAAA,EAI7E,WAAW,UAAU,KAAK,YAAY,gCAAgC;AAAA,EAItE,OAAO,UAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAIhE,aAAa,UAAU,MAAM,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,YAAY,4CAA4C;AAAA,EAIzG,cAAc,UAAU,QAAQ,UAAU,OAAO,EAAE,YAAY,uBAAuB;AACxF;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAChD,qBAAqB,YAAY;",
   "names": []
 }

package/dist/esm/InfiniteLoader/Infiniteloader.js

@@ -49,6 +49,7 @@ const listProps = {
   height: PropTypes.number.isRequired.description("infinite loader list height")
 };
 InfiniteLoader.propTypes = listProps;
+InfiniteLoader.displayName = "InfiniteLoader";
 const InfiniteLoaderWithSchema = describe(InfiniteLoader);
 InfiniteLoaderWithSchema.propTypes = listProps;
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InfiniteLoader/Infiniteloader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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;\n\nconst InfiniteLoaderWithSchema = describe(InfiniteLoader);\n\nInfiniteLoaderWithSchema.propTypes = listProps;\n\nexport { InfiniteLoader, InfiniteLoaderWithSchema };\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,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,OAAO,IAAI;AAC1B,QAAM,WAAW,OAAO,IAAI;AAE5B,YAAU,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,qCAAC;AAAA,IAAK,OAAO,EAAE,UAAU,YAAY,QAAQ,UAAU,SAAS;AAAA,KAC9D,qCAAC;AAAA,IAAK,OAAO,EAAE,UAAU,aAAa,WAAW,QAAQ,OAAO;AAAA,KAC7D,UACD,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAQ,OAAO,EAAE,QAAQ,EAAE;AAAA,GAAG,CAC1C,GACA,qCAAC;AAAA,IAAO,QAAQ;AAAA,GAAY,CAC9B;AAEJ;AAEA,MAAM,YAAY;AAAA,EAEhB,YAAY,UAAU,KAAK,YAAY,sBAAsB;AAAA,EAE7D,WAAW,UAAU,KAAK,YAAY,6BAA6B;AAAA,EAEnE,UAAU,UAAU,QAAQ,YAAY,+BAA+B;AAAA,EAEvE,QAAQ,UAAU,OAAO,WAAW,YAAY,6BAA6B;AAC/E;AAEA,eAAe,YAAY;AAE3B,MAAM,2BAA2B,SAAS,cAAc;AAExD,yBAAyB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,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,OAAO,IAAI;AAC1B,QAAM,WAAW,OAAO,IAAI;AAE5B,YAAU,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,qCAAC;AAAA,IAAK,OAAO,EAAE,UAAU,YAAY,QAAQ,UAAU,SAAS;AAAA,KAC9D,qCAAC;AAAA,IAAK,OAAO,EAAE,UAAU,aAAa,WAAW,QAAQ,OAAO;AAAA,KAC7D,UACD,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAQ,OAAO,EAAE,QAAQ,EAAE;AAAA,GAAG,CAC1C,GACA,qCAAC;AAAA,IAAO,QAAQ;AAAA,GAAY,CAC9B;AAEJ;AAEA,MAAM,YAAY;AAAA,EAEhB,YAAY,UAAU,KAAK,YAAY,sBAAsB;AAAA,EAE7D,WAAW,UAAU,KAAK,YAAY,6BAA6B;AAAA,EAEnE,UAAU,UAAU,QAAQ,YAAY,+BAA+B;AAAA,EAEvE,QAAQ,UAAU,OAAO,WAAW,YAAY,6BAA6B;AAC/E;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AAExD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/esm/InfiniteLoader/VirtualizedInfiniteLoader.js

@@ -51,6 +51,7 @@ const listProps = {
   hasNextPage: PropTypes.bool.description("flag for virtualized list")
 };
 VirtualizedInfiniteLoader.propTypes = listProps;
+VirtualizedInfiniteLoader.displayName = "VirtualizedInfiniteLoader";
 const VirtualizedInfiniteLoaderWithSchema = describe(VirtualizedInfiniteLoader);
 VirtualizedInfiniteLoaderWithSchema.propTypes = listProps;
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InfiniteLoader/VirtualizedInfiniteLoader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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;\n\nconst VirtualizedInfiniteLoaderWithSchema = describe(VirtualizedInfiniteLoader);\n\nVirtualizedInfiniteLoaderWithSchema.propTypes = listProps;\n\nexport { VirtualizedInfiniteLoader, VirtualizedInfiniteLoaderWithSchema };\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,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,SAAS,EAAE;AAE7C,QAAM,WAAW,CAAC,YAAY,cAAc;AAC1C,QAAI;AAAa,mBAAa,YAAY,CAAC;AAC3C,WAAO,cAAc,YAAY,SAAS;AAAA,EAC5C;AAEA,SACE,qCAAC;AAAA,IAAI,OAAO,EAAE,UAAU,WAAW;AAAA,KACjC,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAe;AAAA,KAEd,CAAC,EAAE,iBAAiB,UACnB,qCAAC;AAAA,IACC,WAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,OAAM;AAAA,KAEL,GACH,CAEJ,GACC,oBACC,qCAAC;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,UAAU,KAAK,YAC3B,kEACF;AAAA,EAEA,eAAe,UAAU,KAAK,YAC5B,uIACF;AAAA,EAEA,aAAa,UAAU,KAAK,YAAY,+BAA+B;AAAA,EAEvE,QAAQ,UAAU,OAAO,YAAY,qBAAqB;AAAA,EAE1D,kBAAkB,UAAU,KAAK,YAC/B,gCACF;AAAA,EAEA,MAAM,UAAU,QAAQ,YAAY,oBAAoB;AAAA,EAExD,aAAa,UAAU,KAAK,YAAY,2BAA2B;AACrE;AAEA,0BAA0B,YAAY;AAEtC,MAAM,sCAAsC,SAAS,yBAAyB;AAE9E,oCAAoC,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,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,SAAS,EAAE;AAE7C,QAAM,WAAW,CAAC,YAAY,cAAc;AAC1C,QAAI;AAAa,mBAAa,YAAY,CAAC;AAC3C,WAAO,cAAc,YAAY,SAAS;AAAA,EAC5C;AAEA,SACE,qCAAC;AAAA,IAAI,OAAO,EAAE,UAAU,WAAW;AAAA,KACjC,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAe;AAAA,KAEd,CAAC,EAAE,iBAAiB,UACnB,qCAAC;AAAA,IACC,WAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,OAAM;AAAA,KAEL,GACH,CAEJ,GACC,oBACC,qCAAC;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,UAAU,KAAK,YAC3B,kEACF;AAAA,EAEA,eAAe,UAAU,KAAK,YAC5B,uIACF;AAAA,EAEA,aAAa,UAAU,KAAK,YAAY,+BAA+B;AAAA,EAEvE,QAAQ,UAAU,OAAO,YAAY,qBAAqB;AAAA,EAE1D,kBAAkB,UAAU,KAAK,YAC/B,gCACF;AAAA,EAEA,MAAM,UAAU,QAAQ,YAAY,oBAAoB;AAAA,EAExD,aAAa,UAAU,KAAK,YAAY,2BAA2B;AACrE;AAEA,0BAA0B,YAAY;AACtC,0BAA0B,cAAc;AACxC,MAAM,sCAAsC,SAAS,yBAAyB;AAE9E,oCAAoC,YAAY;",
   "names": []
 }

package/dist/esm/MobileActionToolbar/MobileActionToolbar.js

@@ -27,6 +27,7 @@ const props = {
 };
 Toolbar.propTypes = props;
 const DSMobileActionToolbar = withTheme(Toolbar);
+DSMobileActionToolbar.displayName = "DSMobileActionToolbar";
 const DSMobileActionToolbarWithSchema = describe(DSMobileActionToolbar);
 DSMobileActionToolbarWithSchema.propTypes = props;
 var MobileActionToolbar_default = DSMobileActionToolbar;

package/dist/esm/MobileActionToolbar/MobileActionToolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileActionToolbar/MobileActionToolbar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\nimport { withTheme } from '@elliemae/ds-system';\nimport ToolbarItem from './MobileActionToolbarItem';\n\nconst ToolStrip = styled(Grid)`\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  background-color: ${(props) => props.theme.colors.neutral['000']};\n`;\nconst Toolbar = ({ withDepth = true, buttons = [], theme }) => {\n  const rows = [1];\n  const toolbarHeight = theme.space.m;\n  const borderStyle = withDepth ? { boxShadow: '0 1px 5px 0 rgba(0,0,0,0.5)' } : { boxShadow: 'none' };\n  return (\n    <ToolStrip rows={rows} height={toolbarHeight} style={borderStyle}>\n      {buttons}\n    </ToolStrip>\n  );\n};\n\nconst props = {\n  /** toggle box shadow for buttons border */\n  withDepth: PropTypes.bool.description('toggle box shadow for buttons border'),\n  /** button array for the mobile action toolbar */\n  buttons: PropTypes.arrayOf(PropTypes.element).description('button array for the mobile action toolbar'),\n};\n\nToolbar.propTypes = props;\n\nconst DSMobileActionToolbar = withTheme(Toolbar);\n\nconst DSMobileActionToolbarWithSchema = describe(DSMobileActionToolbar);\nDSMobileActionToolbarWithSchema.propTypes = props;\n\nexport { ToolbarItem, DSMobileActionToolbarWithSchema };\nexport default DSMobileActionToolbar;\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA,sBAIP,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAE5D,MAAM,UAAU,CAAC,EAAE,YAAY,MAAM,UAAU,CAAC,GAAG,YAAY;AAC7D,QAAM,OAAO,CAAC,CAAC;AACf,QAAM,gBAAgB,MAAM,MAAM;AAClC,QAAM,cAAc,YAAY,EAAE,WAAW,8BAA8B,IAAI,EAAE,WAAW,OAAO;AACnG,SACE,qCAAC;AAAA,IAAU;AAAA,IAAY,QAAQ;AAAA,IAAe,OAAO;AAAA,KAClD,OACH;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,WAAW,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAE5E,SAAS,UAAU,QAAQ,UAAU,OAAO,EAAE,YAAY,4CAA4C;AACxG;AAEA,QAAQ,YAAY;AAEpB,MAAM,wBAAwB,UAAU,OAAO;AAE/C,MAAM,kCAAkC,SAAS,qBAAqB;AACtE,gCAAgC,YAAY;AAG5C,IAAO,8BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\nimport { withTheme } from '@elliemae/ds-system';\nimport ToolbarItem from './MobileActionToolbarItem';\n\nconst ToolStrip = styled(Grid)`\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  background-color: ${(props) => props.theme.colors.neutral['000']};\n`;\nconst Toolbar = ({ withDepth = true, buttons = [], theme }) => {\n  const rows = [1];\n  const toolbarHeight = theme.space.m;\n  const borderStyle = withDepth ? { boxShadow: '0 1px 5px 0 rgba(0,0,0,0.5)' } : { boxShadow: 'none' };\n  return (\n    <ToolStrip rows={rows} height={toolbarHeight} style={borderStyle}>\n      {buttons}\n    </ToolStrip>\n  );\n};\n\nconst props = {\n  /** toggle box shadow for buttons border */\n  withDepth: PropTypes.bool.description('toggle box shadow for buttons border'),\n  /** button array for the mobile action toolbar */\n  buttons: PropTypes.arrayOf(PropTypes.element).description('button array for the mobile action toolbar'),\n};\n\nToolbar.propTypes = props;\n\nconst DSMobileActionToolbar = withTheme(Toolbar);\nDSMobileActionToolbar.displayName = 'DSMobileActionToolbar';\nconst DSMobileActionToolbarWithSchema = describe(DSMobileActionToolbar);\nDSMobileActionToolbarWithSchema.propTypes = props;\n\nexport { ToolbarItem, DSMobileActionToolbarWithSchema };\nexport default DSMobileActionToolbar;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA,sBAIP,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAE5D,MAAM,UAAU,CAAC,EAAE,YAAY,MAAM,UAAU,CAAC,GAAG,YAAY;AAC7D,QAAM,OAAO,CAAC,CAAC;AACf,QAAM,gBAAgB,MAAM,MAAM;AAClC,QAAM,cAAc,YAAY,EAAE,WAAW,8BAA8B,IAAI,EAAE,WAAW,OAAO;AACnG,SACE,qCAAC;AAAA,IAAU;AAAA,IAAY,QAAQ;AAAA,IAAe,OAAO;AAAA,KAClD,OACH;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,WAAW,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAE5E,SAAS,UAAU,QAAQ,UAAU,OAAO,EAAE,YAAY,4CAA4C;AACxG;AAEA,QAAQ,YAAY;AAEpB,MAAM,wBAAwB,UAAU,OAAO;AAC/C,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,SAAS,qBAAqB;AACtE,gCAAgC,YAAY;AAG5C,IAAO,8BAAQ;",
   "names": []
 }

package/dist/esm/MobileActionToolbar/MobileActionToolbarItem.js

@@ -47,6 +47,7 @@ const props = {
   icon: PropTypes.element.description("Toolbar item icon")
 };
 ToolbarItem.propTypes = props;
+ToolbarItem.displayName = "ToolbarItem";
 const DSToolbarItemWithSchema = describe(ToolbarItem);
 DSToolbarItemWithSchema.propTypes = props;
 var MobileActionToolbarItem_default = ToolbarItem;

package/dist/esm/MobileActionToolbar/MobileActionToolbarItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileActionToolbar/MobileActionToolbarItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport DSButton from '@elliemae/ds-button';\n\nconst ToolbarItem = ({ icon, ...otherProps }) => {\n  const displayIcon = React.cloneElement(icon, { size: 'm' });\n  return <DSButton {...otherProps} buttonType=\"text\" icon={displayIcon} size=\"m\" />;\n};\n\nToolbarItem.displayName = 'ToolbarItem';\n\nconst props = {\n  /** toolbar item icon */\n  icon: PropTypes.element.description('Toolbar item icon'),\n};\n\nToolbarItem.propTypes = props;\n\nconst DSToolbarItemWithSchema = describe(ToolbarItem);\n\nDSToolbarItemWithSchema.propTypes = props;\n\nexport default ToolbarItem;\n\nexport { DSToolbarItemWithSchema };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA,MAAM,cAAc,CAAC,OAA4B;AAA5B,eAAE,WAAF,IAAW,uBAAX,IAAW,CAAT;AACrB,QAAM,cAAc,OAAM,aAAa,MAAM,EAAE,MAAM,IAAI,CAAC;AAC1D,SAAO,qCAAC,2CAAa,aAAb;AAAA,IAAyB,YAAW;AAAA,IAAO,MAAM;AAAA,IAAa,MAAK;AAAA,IAAI;AACjF;AAEA,YAAY,cAAc;AAE1B,MAAM,QAAQ;AAAA,EAEZ,MAAM,UAAU,QAAQ,YAAY,mBAAmB;AACzD;AAEA,YAAY,YAAY;AAExB,MAAM,0BAA0B,SAAS,WAAW;AAEpD,wBAAwB,YAAY;AAEpC,IAAO,kCAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport DSButton from '@elliemae/ds-button';\n\nconst ToolbarItem = ({ icon, ...otherProps }) => {\n  const displayIcon = React.cloneElement(icon, { size: 'm' });\n  return <DSButton {...otherProps} buttonType=\"text\" icon={displayIcon} size=\"m\" />;\n};\n\nToolbarItem.displayName = 'ToolbarItem';\n\nconst props = {\n  /** toolbar item icon */\n  icon: PropTypes.element.description('Toolbar item icon'),\n};\n\nToolbarItem.propTypes = props;\nToolbarItem.displayName = 'ToolbarItem';\nconst DSToolbarItemWithSchema = describe(ToolbarItem);\n\nDSToolbarItemWithSchema.propTypes = props;\n\nexport default ToolbarItem;\n\nexport { DSToolbarItemWithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA,MAAM,cAAc,CAAC,OAA4B;AAA5B,eAAE,WAAF,IAAW,uBAAX,IAAW,CAAT;AACrB,QAAM,cAAc,OAAM,aAAa,MAAM,EAAE,MAAM,IAAI,CAAC;AAC1D,SAAO,qCAAC,2CAAa,aAAb;AAAA,IAAyB,YAAW;AAAA,IAAO,MAAM;AAAA,IAAa,MAAK;AAAA,IAAI;AACjF;AAEA,YAAY,cAAc;AAE1B,MAAM,QAAQ;AAAA,EAEZ,MAAM,UAAU,QAAQ,YAAY,mBAAmB;AACzD;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,0BAA0B,SAAS,WAAW;AAEpD,wBAAwB,YAAY;AAEpC,IAAO,kCAAQ;",
   "names": []
 }

package/dist/esm/MobileBanner/MobileBanner.js

@@ -108,6 +108,7 @@ const DSMobileBanner = ({
 };
 DSMobileBanner.defaultProps = defaultProps;
 DSMobileBanner.propTypes = propTypes;
+DSMobileBanner.displayName = "DSMobileBanner";
 const DSMobileBannerWithSchema = describe(DSMobileBanner);
 DSMobileBannerWithSchema.propTypes = propTypes;
 export {

package/dist/esm/MobileBanner/MobileBanner.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileBanner/MobileBanner.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useLayoutEffect, useEffect, useRef, useState } from 'react';\nimport { CloseX } from '@elliemae/ds-icons';\n\nimport { describe } from 'react-desc';\nimport type { MobileBannerPropsT } from './index.d';\nimport { icons } from './utils/icons';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport {\n  StyledActionLink,\n  StyledCloseButton,\n  StyledInnerContainer,\n  StyledBannerContainer,\n  StyledContent,\n  StyledIconContainer,\n  StyledSubTitle,\n  StyledTitle,\n  StyledSubTitleText,\n  StyledCloseButtonContainer,\n} from './styles';\n\nconst DSMobileBanner = ({\n  type,\n  isOpen,\n  closeButtonOnClick,\n  label,\n  body,\n  actionLinkLabel,\n  actionLinkHref,\n  actionLinkOnClick,\n  showCloseButton,\n  containerProps,\n  focusOnOpen,\n}: MobileBannerPropsT): JSX.Element => {\n  const innerContainerRef = useRef<HTMLDivElement | null>(null);\n  const closeRef = useRef<HTMLDivElement | null>(null);\n  const [current, setCurrent] = useState<boolean>(isOpen);\n  const [isAnimating, setIsAnimating] = useState<boolean>(false);\n  const [height, setHeight] = useState<number>(0);\n\n  useEffect(() => {\n    if (innerContainerRef.current) {\n      setHeight(innerContainerRef.current.offsetHeight);\n    }\n  }, [isAnimating, isOpen]);\n\n  useEffect(() => {\n    if (focusOnOpen && closeRef.current && isOpen) {\n      closeRef.current?.focus?.();\n    }\n  }, [focusOnOpen, isOpen]);\n\n  useLayoutEffect(() => {\n    if (isOpen !== current || isOpen) setIsAnimating(true);\n    else setIsAnimating(false);\n  }, [isOpen, current]);\n\n  if (!isAnimating && !isOpen) return null;\n\n  return (\n    <StyledBannerContainer\n      type={type}\n      isOpen={isOpen}\n      isAnimating={isAnimating}\n      onAnimationEnd={() => setCurrent(isOpen)}\n      height={height}\n      {...containerProps}\n      data-testid=\"ds-mobile-banner-container\"\n      role=\"alert\"\n    >\n      <StyledInnerContainer type={type} isOpen={isOpen} ref={innerContainerRef} isAnimating={isAnimating}>\n        <StyledIconContainer data-testid=\"ds-mobile-banner-icon\">{icons[type]}</StyledIconContainer>\n        <StyledContent showCloseButton={showCloseButton}>\n          <StyledTitle>{label}</StyledTitle>\n          <StyledSubTitle>\n            <StyledSubTitleText>{body}</StyledSubTitleText>\n            {actionLinkLabel && (\n              <StyledActionLink href={actionLinkHref} data-testid=\"ds-mobile-banner-link\" onClick={actionLinkOnClick}>\n                {actionLinkLabel}\n              </StyledActionLink>\n            )}\n          </StyledSubTitle>\n        </StyledContent>\n        {showCloseButton && (\n          <StyledCloseButtonContainer>\n            <StyledCloseButton\n              data-testid=\"ds-mobile-banner-close-button\"\n              buttonType=\"icon\"\n              onClick={closeButtonOnClick}\n              aria-label=\"Close Banner\"\n              innerRef={closeRef}\n              size=\"s\"\n            >\n              <CloseX width=\"12px\" height=\"12px\" />\n            </StyledCloseButton>\n          </StyledCloseButtonContainer>\n        )}\n      </StyledInnerContainer>\n    </StyledBannerContainer>\n  );\n};\n\nDSMobileBanner.defaultProps = defaultProps;\nDSMobileBanner.propTypes = propTypes;\nconst DSMobileBannerWithSchema = describe(DSMobileBanner);\nDSMobileBannerWithSchema.propTypes = propTypes;\n\nexport { DSMobileBanner, DSMobileBannerWithSchema };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAEA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaA,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACqC;AACrC,QAAM,oBAAoB,OAA8B,IAAI;AAC5D,QAAM,WAAW,OAA8B,IAAI;AACnD,QAAM,CAAC,SAAS,cAAc,SAAkB,MAAM;AACtD,QAAM,CAAC,aAAa,kBAAkB,SAAkB,KAAK;AAC7D,QAAM,CAAC,QAAQ,aAAa,SAAiB,CAAC;AAE9C,YAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,gBAAU,kBAAkB,QAAQ,YAAY;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,aAAa,MAAM,CAAC;AAExB,YAAU,MAAM;AACd,QAAI,eAAe,SAAS,WAAW,QAAQ;AAC7C,eAAS,SAAS,QAAQ;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,aAAa,MAAM,CAAC;AAExB,kBAAgB,MAAM;AACpB,QAAI,WAAW,WAAW;AAAQ,qBAAe,IAAI;AAAA;AAChD,qBAAe,KAAK;AAAA,EAC3B,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,MAAI,CAAC,eAAe,CAAC;AAAQ,WAAO;AAEpC,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,MAAM,WAAW,MAAM;AAAA,IACvC;AAAA,KACI,iBANL;AAAA,IAOC,eAAY;AAAA,IACZ,MAAK;AAAA,MAEL,qCAAC;AAAA,IAAqB;AAAA,IAAY;AAAA,IAAgB,KAAK;AAAA,IAAmB;AAAA,KACxE,qCAAC;AAAA,IAAoB,eAAY;AAAA,KAAyB,MAAM,KAAM,GACtE,qCAAC;AAAA,IAAc;AAAA,KACb,qCAAC,mBAAa,KAAM,GACpB,qCAAC,sBACC,qCAAC,0BAAoB,IAAK,GACzB,mBACC,qCAAC;AAAA,IAAiB,MAAM;AAAA,IAAgB,eAAY;AAAA,IAAwB,SAAS;AAAA,KAClF,eACH,CAEJ,CACF,GACC,mBACC,qCAAC,kCACC,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,YAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAW;AAAA,IACX,UAAU;AAAA,IACV,MAAK;AAAA,KAEL,qCAAC;AAAA,IAAO,OAAM;AAAA,IAAO,QAAO;AAAA,GAAO,CACrC,CACF,CAEJ,CACF;AAEJ;AAEA,eAAe,eAAe;AAC9B,eAAe,YAAY;AAC3B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useLayoutEffect, useEffect, useRef, useState } from 'react';\nimport { CloseX } from '@elliemae/ds-icons';\n\nimport { describe } from 'react-desc';\nimport type { MobileBannerPropsT } from './index.d';\nimport { icons } from './utils/icons';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport {\n  StyledActionLink,\n  StyledCloseButton,\n  StyledInnerContainer,\n  StyledBannerContainer,\n  StyledContent,\n  StyledIconContainer,\n  StyledSubTitle,\n  StyledTitle,\n  StyledSubTitleText,\n  StyledCloseButtonContainer,\n} from './styles';\n\nconst DSMobileBanner = ({\n  type,\n  isOpen,\n  closeButtonOnClick,\n  label,\n  body,\n  actionLinkLabel,\n  actionLinkHref,\n  actionLinkOnClick,\n  showCloseButton,\n  containerProps,\n  focusOnOpen,\n}: MobileBannerPropsT): JSX.Element => {\n  const innerContainerRef = useRef<HTMLDivElement | null>(null);\n  const closeRef = useRef<HTMLDivElement | null>(null);\n  const [current, setCurrent] = useState<boolean>(isOpen);\n  const [isAnimating, setIsAnimating] = useState<boolean>(false);\n  const [height, setHeight] = useState<number>(0);\n\n  useEffect(() => {\n    if (innerContainerRef.current) {\n      setHeight(innerContainerRef.current.offsetHeight);\n    }\n  }, [isAnimating, isOpen]);\n\n  useEffect(() => {\n    if (focusOnOpen && closeRef.current && isOpen) {\n      closeRef.current?.focus?.();\n    }\n  }, [focusOnOpen, isOpen]);\n\n  useLayoutEffect(() => {\n    if (isOpen !== current || isOpen) setIsAnimating(true);\n    else setIsAnimating(false);\n  }, [isOpen, current]);\n\n  if (!isAnimating && !isOpen) return null;\n\n  return (\n    <StyledBannerContainer\n      type={type}\n      isOpen={isOpen}\n      isAnimating={isAnimating}\n      onAnimationEnd={() => setCurrent(isOpen)}\n      height={height}\n      {...containerProps}\n      data-testid=\"ds-mobile-banner-container\"\n      role=\"alert\"\n    >\n      <StyledInnerContainer type={type} isOpen={isOpen} ref={innerContainerRef} isAnimating={isAnimating}>\n        <StyledIconContainer data-testid=\"ds-mobile-banner-icon\">{icons[type]}</StyledIconContainer>\n        <StyledContent showCloseButton={showCloseButton}>\n          <StyledTitle>{label}</StyledTitle>\n          <StyledSubTitle>\n            <StyledSubTitleText>{body}</StyledSubTitleText>\n            {actionLinkLabel && (\n              <StyledActionLink href={actionLinkHref} data-testid=\"ds-mobile-banner-link\" onClick={actionLinkOnClick}>\n                {actionLinkLabel}\n              </StyledActionLink>\n            )}\n          </StyledSubTitle>\n        </StyledContent>\n        {showCloseButton && (\n          <StyledCloseButtonContainer>\n            <StyledCloseButton\n              data-testid=\"ds-mobile-banner-close-button\"\n              buttonType=\"icon\"\n              onClick={closeButtonOnClick}\n              aria-label=\"Close Banner\"\n              innerRef={closeRef}\n              size=\"s\"\n            >\n              <CloseX width=\"12px\" height=\"12px\" />\n            </StyledCloseButton>\n          </StyledCloseButtonContainer>\n        )}\n      </StyledInnerContainer>\n    </StyledBannerContainer>\n  );\n};\n\nDSMobileBanner.defaultProps = defaultProps;\nDSMobileBanner.propTypes = propTypes;\nDSMobileBanner.displayName = 'DSMobileBanner';\nconst DSMobileBannerWithSchema = describe(DSMobileBanner);\nDSMobileBannerWithSchema.propTypes = propTypes;\n\nexport { DSMobileBanner, DSMobileBannerWithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAEA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaA,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACqC;AACrC,QAAM,oBAAoB,OAA8B,IAAI;AAC5D,QAAM,WAAW,OAA8B,IAAI;AACnD,QAAM,CAAC,SAAS,cAAc,SAAkB,MAAM;AACtD,QAAM,CAAC,aAAa,kBAAkB,SAAkB,KAAK;AAC7D,QAAM,CAAC,QAAQ,aAAa,SAAiB,CAAC;AAE9C,YAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,gBAAU,kBAAkB,QAAQ,YAAY;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,aAAa,MAAM,CAAC;AAExB,YAAU,MAAM;AACd,QAAI,eAAe,SAAS,WAAW,QAAQ;AAC7C,eAAS,SAAS,QAAQ;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,aAAa,MAAM,CAAC;AAExB,kBAAgB,MAAM;AACpB,QAAI,WAAW,WAAW;AAAQ,qBAAe,IAAI;AAAA;AAChD,qBAAe,KAAK;AAAA,EAC3B,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,MAAI,CAAC,eAAe,CAAC;AAAQ,WAAO;AAEpC,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,MAAM,WAAW,MAAM;AAAA,IACvC;AAAA,KACI,iBANL;AAAA,IAOC,eAAY;AAAA,IACZ,MAAK;AAAA,MAEL,qCAAC;AAAA,IAAqB;AAAA,IAAY;AAAA,IAAgB,KAAK;AAAA,IAAmB;AAAA,KACxE,qCAAC;AAAA,IAAoB,eAAY;AAAA,KAAyB,MAAM,KAAM,GACtE,qCAAC;AAAA,IAAc;AAAA,KACb,qCAAC,mBAAa,KAAM,GACpB,qCAAC,sBACC,qCAAC,0BAAoB,IAAK,GACzB,mBACC,qCAAC;AAAA,IAAiB,MAAM;AAAA,IAAgB,eAAY;AAAA,IAAwB,SAAS;AAAA,KAClF,eACH,CAEJ,CACF,GACC,mBACC,qCAAC,kCACC,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,YAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAW;AAAA,IACX,UAAU;AAAA,IACV,MAAK;AAAA,KAEL,qCAAC;AAAA,IAAO,OAAM;AAAA,IAAO,QAAO;AAAA,GAAO,CACrC,CACF,CAEJ,CACF;AAEJ;AAEA,eAAe,eAAe;AAC9B,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/esm/MobileCard/Card.js

@@ -142,6 +142,7 @@ const MobileCard = ({
   });
 };
 MobileCard.propTypes = cardPropsTypes;
+MobileCard.displayName = "MobileCard";
 const DSMobileCardWithSchema = describe(MobileCard);
 DSMobileCardWithSchema.propTypes = cardPropsTypes;
 var Card_default = withTheme(MobileCard);