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

package/dist/esm/Modal/Modal.js

@@ -19,7 +19,7 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import React2 from "react";
-import { describe, PropTypes } from "react-desc";
+import { describe, PropTypes } from "@elliemae/ds-utilities";
 import { noop } from "lodash";
 import { Grid } from "@elliemae/ds-grid";
 import { WarningTriangle } from "@elliemae/ds-icons";

package/dist/esm/Modal/Modal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Modal/Modal.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\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"],
   "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,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,SAAS;AACvB,MAAI,CAAC;AAAQ,WAAO;AACpB,SACE,4DACE,qCAAC;AAAA,IAAQ;AAAA,GAAgB,GACzB,qCAAC;AAAA,IAAW,SAAS;AAAA,IAAS;AAAA,GAAgB,GAC9C,qCAAC;AAAA,IAAc;AAAA,IAAgB,MAAM,CAAC,MAAM;AAAA,KAC1C,qCAAC;AAAA,IACC,WAAW,GAAG,OAAO,cAAc;AAAA,IACnC,MAAM,CAAC,GAAG,MAAM;AAAA,IAChB,OAAO;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,KAEA,qCAAC;AAAA,IACC,IAAG;AAAA,IACH,IAAG;AAAA,IACH,OAAO;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,KAEA,qCAAC;AAAA,IACC,MAAM,CAAC,QAAQ,QAAQ,CAAC;AAAA,IACxB,OAAO;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,KAEA,qCAAC,iBACC,qCAAC;AAAA,IAAgB,MAAK;AAAA,GAAM,CAC9B,GACA,qCAAC;AAAA,IAAW,eAAY;AAAA,KAAe,KAAM,GAC7C,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,OAAO;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,KAEC,WACH,CACF,CACF,GACA,qCAAC;AAAA,IAAK,IAAG;AAAA,KACP,qCAAC;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,qCAAC,2CACK,uBADL;AAAA,IAEC,WAAW,qBAAqB,aAAa;AAAA,IAC7C,YAAW;AAAA,IACX,eAAY;AAAA,IACd,GAEF,qCAAC;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,UAAU,KAAK,YAAY,oCAAoC,EAAE,aAAa,KAAK;AAAA,EAC3F,QAAQ,UAAU,OAAO,YAAY,eAAe,EAAE,aAAa,CAAC;AAAA,EACpE,OAAO,UAAU,OAAO,YAAY,eAAe,EAAE;AAAA,EACrD,aAAa,UAAU,OAAO,YAAY,iBAAiB,EAAE;AAAA,EAC7D,SAAS,UAAU,KAAK,YAAY,yCAAyC;AAAA,EAC7E,qBAAqB,UAAU,KAAK,YAAY,+CAA+C,EAAE,aAAa,IAAI;AAAA,EAClH,sBAAsB,UAAU,MAAM;AAAA,IACpC,SAAS,UAAU;AAAA,IACnB,WAAW,UAAU;AAAA,EACvB,CAAC,EAAE,YAAY,wBAAwB;AAAA,EACvC,oBAAoB,UAAU,MAAM;AAAA,IAClC,SAAS,UAAU;AAAA,IACnB,WAAW,UAAU;AAAA,EACvB,CAAC,EAAE,YAAY,sBAAsB;AACvC;AAEA,MAAM,YAAY;AAClB,MAAM,cAAc;AACpB,MAAM,kBAAkB,SAAS,KAAK;AACtC,gBAAgB,YAAY;",
   "names": []
 }

package/dist/esm/Modal/styled.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Grid } from "@elliemae/ds-grid";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import { createGlobalStyle } from "@elliemae/ds-system";
 const BodyFix = createGlobalStyle`
     body{

package/dist/esm/Modal/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Modal/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\nimport { createGlobalStyle } from '@elliemae/ds-system';\n\nexport const BodyFix = createGlobalStyle`\n    body{\n        ${(props) => (props.isOpen ? 'overflow: hidden;' : '')};\n    }\n`;\nexport const ModalBox = styled(Grid)`\n  width: 100%;\n  background: ${(props) => props.theme.colors.neutral['000']};\n  max-height: ${(props) => props.maxHeight};\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);\n`;\nexport const ModalPosition = styled(Grid)`\n  z-index: ${(props) => props.zIndex};\n  background: ${(props) => props.theme.colors.neutral['000']};\n  position: absolute;\n  top: 12.5%;\n  width: 80%;\n  left: 10%;\n`;\n\nexport const BackShadow = styled(Grid)`\n  z-index: ${(props) => props.zIndex};\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.6);\n  overflow: hidden;\n`;\n\nexport const ModalIcon = styled(Grid)`\n  padding-top: 24px;\n  justify-content: center;\n  span.em-ds-icon svg,\n  svg:not([fill]) {\n    fill: ${(props) => props.theme.colors.warning[600]};\n  }\n`;\n\nexport const ModalTitle = styled(Grid)`\n  padding-top: 24px;\n  font-size: 22px;\n  font-weight: 600;\n  color: ${(props) => props.theme.colors.neutral[600]};\n  text-align: center;\n`;\nexport const ModalDescription = styled(Grid)`\n  padding-top: ${(props) => props.theme.space.xxs};\n  font-size: 16px;\n  font-weight: 400;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  text-align: center;\n`;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { createGlobalStyle } from '@elliemae/ds-system';\n\nexport const BodyFix = createGlobalStyle`\n    body{\n        ${(props) => (props.isOpen ? 'overflow: hidden;' : '')};\n    }\n`;\nexport const ModalBox = styled(Grid)`\n  width: 100%;\n  background: ${(props) => props.theme.colors.neutral['000']};\n  max-height: ${(props) => props.maxHeight};\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);\n`;\nexport const ModalPosition = styled(Grid)`\n  z-index: ${(props) => props.zIndex};\n  background: ${(props) => props.theme.colors.neutral['000']};\n  position: absolute;\n  top: 12.5%;\n  width: 80%;\n  left: 10%;\n`;\n\nexport const BackShadow = styled(Grid)`\n  z-index: ${(props) => props.zIndex};\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.6);\n  overflow: hidden;\n`;\n\nexport const ModalIcon = styled(Grid)`\n  padding-top: 24px;\n  justify-content: center;\n  span.em-ds-icon svg,\n  svg:not([fill]) {\n    fill: ${(props) => props.theme.colors.warning[600]};\n  }\n`;\n\nexport const ModalTitle = styled(Grid)`\n  padding-top: 24px;\n  font-size: 22px;\n  font-weight: 600;\n  color: ${(props) => props.theme.colors.neutral[600]};\n  text-align: center;\n`;\nexport const ModalDescription = styled(Grid)`\n  padding-top: ${(props) => props.theme.space.xxs};\n  font-size: 16px;\n  font-weight: 400;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  text-align: center;\n`;\n"],
   "mappings": "AAAA;ACAA;AACA;AACA;AAEO,MAAM,UAAU;AAAA;AAAA,UAEb,CAAC,UAAW,MAAM,SAAS,sBAAsB;AAAA;AAAA;AAGpD,MAAM,WAAW,OAAO,IAAI;AAAA;AAAA,gBAEnB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACtC,CAAC,UAAU,MAAM;AAAA;AAAA;AAG1B,MAAM,gBAAgB,OAAO,IAAI;AAAA,aAC3B,CAAC,UAAU,MAAM;AAAA,gBACd,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/C,MAAM,aAAa,OAAO,IAAI;AAAA,aACxB,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUvB,MAAM,YAAY,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,YAKxB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI3C,MAAM,aAAa,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA,WAI1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAG1C,MAAM,mBAAmB,OAAO,IAAI;AAAA,iBAC1B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,WAGnC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/PageFilter/PageFilter.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import React2 from "react";
 import PropTypes from "prop-types";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { op, useTheme, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
 import { DSFullPageContainer } from "../FullPageContainer";

package/dist/esm/PageFilter/PageFilter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/PageFilter/PageFilter.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { op, useTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { DSFullPageContainer } from '../FullPageContainer';\n\nconst Header = styled(Grid)`\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['300']};\n`;\nconst ButtonSlot = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\nconst Title = styled.div`\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  font-size: 22px;\n`;\nconst BreadCrumb = styled(Grid)`\n  align-items: flex-end;\n  font-size: 16px;\n  color: ${(props) => props.theme.colors.neutral[500]};\n`;\nconst Body = styled(Grid)`\n  margin: 0 auto;\n  width: 100%;\n  overflow: auto;\n`;\nconst Footer = styled(Grid)`\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  width: 100%;\n  padding: 0.67rem;\n  border-top: 1px solid ${(props) => props.theme.colors.neutral[300]};\n\n  & > button {\n    flex-grow: 1;\n    margin: 0 0.33rem;\n  }\n`;\n\nconst PageFilter = ({\n  children = null,\n  breadCrumb = null,\n  pageTitle = null,\n  leftProp = null,\n  rightProp = null,\n  footerButton = null,\n}) => {\n  const theme = useTheme();\n  const headerDimension = theme.space.l;\n  const rows = [headerDimension, 1];\n  if (footerButton) rows.push(op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 1.167));\n  const cols = ['auto'];\n  if (leftProp) cols.unshift(headerDimension);\n  if (rightProp) cols.push(headerDimension);\n  const bodyStyle = {\n    maxWidth: op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl), 6.25),\n  };\n  return (\n    <DSFullPageContainer rows={rows}>\n      <Header cols={cols} height={headerDimension}>\n        {leftProp && <ButtonSlot ml={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}>{leftProp}</ButtonSlot>}\n        <Grid>\n          {breadCrumb && <BreadCrumb pl={!leftProp && '1rem'}>{breadCrumb}</BreadCrumb>}\n          <Title style={leftProp ? {} : { paddingLeft: '1rem' }}>{pageTitle}</Title>\n        </Grid>\n        {rightProp && <ButtonSlot ml={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}>{rightProp}</ButtonSlot>}\n      </Header>\n\n      <Body style={bodyStyle}>{children}</Body>\n      {footerButton && <Footer>{footerButton}</Footer>}\n    </DSFullPageContainer>\n  );\n};\n\nPageFilter.propTypes = {\n  /**\n   * Text to render in header title\n   */\n  pageTitle: PropTypes.string,\n  /**\n   * Pass an element to render left. For example a Button with an icon\n   */\n  leftProp: PropTypes.element,\n  /**\n   * Pass an element to render right. For example a Button with an icon\n   */\n  rightProp: PropTypes.element,\n  /**\n   * Pass an element to render in the body section\n   */\n  children: PropTypes.element,\n  /**\n   * Pass a button to render in the footer\n   */\n  footerButton: PropTypes.element,\n  /**\n   * BreadCrumb text\n   */\n  breadCrumb: PropTypes.string,\n};\n\nconst DSPageFilter = PageFilter;\n\nexport { DSPageFilter };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { op, useTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { DSFullPageContainer } from '../FullPageContainer';\n\nconst Header = styled(Grid)`\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['300']};\n`;\nconst ButtonSlot = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\nconst Title = styled.div`\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  font-size: 22px;\n`;\nconst BreadCrumb = styled(Grid)`\n  align-items: flex-end;\n  font-size: 16px;\n  color: ${(props) => props.theme.colors.neutral[500]};\n`;\nconst Body = styled(Grid)`\n  margin: 0 auto;\n  width: 100%;\n  overflow: auto;\n`;\nconst Footer = styled(Grid)`\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  width: 100%;\n  padding: 0.67rem;\n  border-top: 1px solid ${(props) => props.theme.colors.neutral[300]};\n\n  & > button {\n    flex-grow: 1;\n    margin: 0 0.33rem;\n  }\n`;\n\nconst PageFilter = ({\n  children = null,\n  breadCrumb = null,\n  pageTitle = null,\n  leftProp = null,\n  rightProp = null,\n  footerButton = null,\n}) => {\n  const theme = useTheme();\n  const headerDimension = theme.space.l;\n  const rows = [headerDimension, 1];\n  if (footerButton) rows.push(op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 1.167));\n  const cols = ['auto'];\n  if (leftProp) cols.unshift(headerDimension);\n  if (rightProp) cols.push(headerDimension);\n  const bodyStyle = {\n    maxWidth: op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl), 6.25),\n  };\n  return (\n    <DSFullPageContainer rows={rows}>\n      <Header cols={cols} height={headerDimension}>\n        {leftProp && <ButtonSlot ml={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}>{leftProp}</ButtonSlot>}\n        <Grid>\n          {breadCrumb && <BreadCrumb pl={!leftProp && '1rem'}>{breadCrumb}</BreadCrumb>}\n          <Title style={leftProp ? {} : { paddingLeft: '1rem' }}>{pageTitle}</Title>\n        </Grid>\n        {rightProp && <ButtonSlot ml={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}>{rightProp}</ButtonSlot>}\n      </Header>\n\n      <Body style={bodyStyle}>{children}</Body>\n      {footerButton && <Footer>{footerButton}</Footer>}\n    </DSFullPageContainer>\n  );\n};\n\nPageFilter.propTypes = {\n  /**\n   * Text to render in header title\n   */\n  pageTitle: PropTypes.string,\n  /**\n   * Pass an element to render left. For example a Button with an icon\n   */\n  leftProp: PropTypes.element,\n  /**\n   * Pass an element to render right. For example a Button with an icon\n   */\n  rightProp: PropTypes.element,\n  /**\n   * Pass an element to render in the body section\n   */\n  children: PropTypes.element,\n  /**\n   * Pass a button to render in the footer\n   */\n  footerButton: PropTypes.element,\n  /**\n   * BreadCrumb text\n   */\n  breadCrumb: PropTypes.string,\n};\n\nconst DSPageFilter = PageFilter;\n\nexport { DSPageFilter };\n"],
   "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,SAAS,OAAO,IAAI;AAAA,6BACG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAEnE,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAK1B,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAMrB,MAAM,aAAa,OAAO,IAAI;AAAA;AAAA;AAAA,WAGnB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAEjD,MAAM,OAAO,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAKxB,MAAM,SAAS,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMA,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQhE,MAAM,aAAa,CAAC;AAAA,EAClB,WAAW;AAAA,EACX,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,eAAe;AAAA,MACX;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,kBAAkB,MAAM,MAAM;AACpC,QAAM,OAAO,CAAC,iBAAiB,CAAC;AAChC,MAAI;AAAc,SAAK,KAAK,GAAG,KAAK,yBAAyB,MAAM,MAAM,EAAE,GAAG,KAAK,CAAC;AACpF,QAAM,OAAO,CAAC,MAAM;AACpB,MAAI;AAAU,SAAK,QAAQ,eAAe;AAC1C,MAAI;AAAW,SAAK,KAAK,eAAe;AACxC,QAAM,YAAY;AAAA,IAChB,UAAU,GAAG,KAAK,yBAAyB,MAAM,MAAM,GAAG,GAAG,IAAI;AAAA,EACnE;AACA,SACE,qCAAC;AAAA,IAAoB;AAAA,KACnB,qCAAC;AAAA,IAAO;AAAA,IAAY,QAAQ;AAAA,KACzB,YAAY,qCAAC;AAAA,IAAW,IAAI,yBAAyB,MAAM,MAAM,CAAC;AAAA,KAAI,QAAS,GAChF,qCAAC,YACE,cAAc,qCAAC;AAAA,IAAW,IAAI,CAAC,YAAY;AAAA,KAAS,UAAW,GAChE,qCAAC;AAAA,IAAM,OAAO,WAAW,CAAC,IAAI,EAAE,aAAa,OAAO;AAAA,KAAI,SAAU,CACpE,GACC,aAAa,qCAAC;AAAA,IAAW,IAAI,yBAAyB,MAAM,MAAM,CAAC;AAAA,KAAI,SAAU,CACpF,GAEA,qCAAC;AAAA,IAAK,OAAO;AAAA,KAAY,QAAS,GACjC,gBAAgB,qCAAC,cAAQ,YAAa,CACzC;AAEJ;AAEA,WAAW,YAAY;AAAA,EAIrB,WAAW,UAAU;AAAA,EAIrB,UAAU,UAAU;AAAA,EAIpB,WAAW,UAAU;AAAA,EAIrB,UAAU,UAAU;AAAA,EAIpB,cAAc,UAAU;AAAA,EAIxB,YAAY,UAAU;AACxB;AAEA,MAAM,eAAe;",
   "names": []
 }

package/dist/esm/PageForm/PageForm.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import React2 from "react";
 import PropTypes from "prop-types";
 import { Grid } from "@elliemae/ds-grid";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import { op, __UNSAFE_SPACE_TO_DIMSUM, useTheme } from "@elliemae/ds-system";
 import { DSFullPageContainer, DSFullPageContainerScroll } from "../FullPageContainer";
 const Body = styled(Grid)`

package/dist/esm/PageForm/PageForm.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/PageForm/PageForm.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\nimport { op, __UNSAFE_SPACE_TO_DIMSUM, useTheme } from '@elliemae/ds-system';\nimport { DSFullPageContainer, DSFullPageContainerScroll } from '../FullPageContainer';\n\nconst Body = styled(Grid)`\n  margin: 0 auto;\n  width: 100%;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    ${({ theme }) => `width: ${op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl), 6.25)};`}\n  }\n`;\n\nconst PageForm = ({ header = null, body = null, footer = null }) => {\n  const theme = useTheme();\n  const rows = [1];\n  if (header) rows.unshift(op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl), 1.125));\n  if (footer) rows.push(theme.space.l);\n  return (\n    <DSFullPageContainer rows={rows}>\n      {header && <Grid>{header}</Grid>}\n      <Grid style={{ overflow: 'hidden' }}>\n        <DSFullPageContainerScroll>\n          <Body>{body}</Body>\n        </DSFullPageContainerScroll>\n      </Grid>\n      {footer && <Grid>{footer}</Grid>}\n    </DSFullPageContainer>\n  );\n};\n\nPageForm.propTypes = {\n  header: PropTypes.element,\n  body: PropTypes.element,\n  footer: PropTypes.element,\n};\n\nconst DSPageForm = PageForm;\nconst DSMobilePageForm = DSPageForm;\n\nexport { DSPageForm, DSMobilePageForm };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { op, __UNSAFE_SPACE_TO_DIMSUM, useTheme } from '@elliemae/ds-system';\nimport { DSFullPageContainer, DSFullPageContainerScroll } from '../FullPageContainer';\n\nconst Body = styled(Grid)`\n  margin: 0 auto;\n  width: 100%;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    ${({ theme }) => `width: ${op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl), 6.25)};`}\n  }\n`;\n\nconst PageForm = ({ header = null, body = null, footer = null }) => {\n  const theme = useTheme();\n  const rows = [1];\n  if (header) rows.unshift(op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl), 1.125));\n  if (footer) rows.push(theme.space.l);\n  return (\n    <DSFullPageContainer rows={rows}>\n      {header && <Grid>{header}</Grid>}\n      <Grid style={{ overflow: 'hidden' }}>\n        <DSFullPageContainerScroll>\n          <Body>{body}</Body>\n        </DSFullPageContainerScroll>\n      </Grid>\n      {footer && <Grid>{footer}</Grid>}\n    </DSFullPageContainer>\n  );\n};\n\nPageForm.propTypes = {\n  header: PropTypes.element,\n  body: PropTypes.element,\n  footer: PropTypes.element,\n};\n\nconst DSPageForm = PageForm;\nconst DSMobilePageForm = DSPageForm;\n\nexport { DSPageForm, DSMobilePageForm };\n"],
   "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,OAAO,OAAO,IAAI;AAAA;AAAA;AAAA,uBAGD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,MAClD,CAAC,EAAE,YAAY,UAAU,GAAG,KAAK,yBAAyB,MAAM,MAAM,GAAG,GAAG,IAAI;AAAA;AAAA;AAItF,MAAM,WAAW,CAAC,EAAE,SAAS,MAAM,OAAO,MAAM,SAAS,WAAW;AAClE,QAAM,QAAQ,SAAS;AACvB,QAAM,OAAO,CAAC,CAAC;AACf,MAAI;AAAQ,SAAK,QAAQ,GAAG,KAAK,yBAAyB,MAAM,MAAM,GAAG,GAAG,KAAK,CAAC;AAClF,MAAI;AAAQ,SAAK,KAAK,MAAM,MAAM,CAAC;AACnC,SACE,qCAAC;AAAA,IAAoB;AAAA,KAClB,UAAU,qCAAC,YAAM,MAAO,GACzB,qCAAC;AAAA,IAAK,OAAO,EAAE,UAAU,SAAS;AAAA,KAChC,qCAAC,iCACC,qCAAC,YAAM,IAAK,CACd,CACF,GACC,UAAU,qCAAC,YAAM,MAAO,CAC3B;AAEJ;AAEA,SAAS,YAAY;AAAA,EACnB,QAAQ,UAAU;AAAA,EAClB,MAAM,UAAU;AAAA,EAChB,QAAQ,UAAU;AACpB;AAEA,MAAM,aAAa;AACnB,MAAM,mBAAmB;",
   "names": []
 }

package/dist/esm/PageList/PageList.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import React2 from "react";
 import PropTypes from "prop-types";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { op, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
 import { DSFullPageContainer, DSFullPageContainerScroll } from "../FullPageContainer";

package/dist/esm/PageList/PageList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/PageList/PageList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { op, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { DSFullPageContainer, DSFullPageContainerScroll } from '../FullPageContainer';\n\nconst PageTitleWrapper = styled(Grid)`\n  min-height: 44px;\n`;\n\nconst DSMobilePageList = withTheme(\n  ({ header = null, pageTitle = null, filterBar = null, body = null, footer = null, theme }) => {\n    const rows = ['auto', op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 0.83), 1];\n    if (header) rows.unshift(__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl));\n    if (footer) rows.push('56px');\n    return (\n      <DSFullPageContainer rows={rows}>\n        {header && <Grid>{header}</Grid>}\n        <PageTitleWrapper>{pageTitle}</PageTitleWrapper>\n        <Grid>{filterBar}</Grid>\n        <DSFullPageContainerScroll>{body}</DSFullPageContainerScroll>\n        {footer && <Grid>{footer}</Grid>}\n      </DSFullPageContainer>\n    );\n  },\n);\n\nDSMobilePageList.propTypes = {\n  header: PropTypes.element,\n  pageTitle: PropTypes.element,\n  filterBar: PropTypes.element,\n  body: PropTypes.element,\n  footer: PropTypes.element,\n};\n\nconst DSPageList = DSMobilePageList;\n\nexport { DSPageList, DSMobilePageList };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { op, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { DSFullPageContainer, DSFullPageContainerScroll } from '../FullPageContainer';\n\nconst PageTitleWrapper = styled(Grid)`\n  min-height: 44px;\n`;\n\nconst DSMobilePageList = withTheme(\n  ({ header = null, pageTitle = null, filterBar = null, body = null, footer = null, theme }) => {\n    const rows = ['auto', op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 0.83), 1];\n    if (header) rows.unshift(__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl));\n    if (footer) rows.push('56px');\n    return (\n      <DSFullPageContainer rows={rows}>\n        {header && <Grid>{header}</Grid>}\n        <PageTitleWrapper>{pageTitle}</PageTitleWrapper>\n        <Grid>{filterBar}</Grid>\n        <DSFullPageContainerScroll>{body}</DSFullPageContainerScroll>\n        {footer && <Grid>{footer}</Grid>}\n      </DSFullPageContainer>\n    );\n  },\n);\n\nDSMobilePageList.propTypes = {\n  header: PropTypes.element,\n  pageTitle: PropTypes.element,\n  filterBar: PropTypes.element,\n  body: PropTypes.element,\n  footer: PropTypes.element,\n};\n\nconst DSPageList = DSMobilePageList;\n\nexport { DSPageList, DSMobilePageList };\n"],
   "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB,OAAO,IAAI;AAAA;AAAA;AAIpC,MAAM,mBAAmB,UACvB,CAAC,EAAE,SAAS,MAAM,YAAY,MAAM,YAAY,MAAM,OAAO,MAAM,SAAS,MAAM,YAAY;AAC5F,QAAM,OAAO,CAAC,QAAQ,GAAG,KAAK,yBAAyB,MAAM,MAAM,EAAE,GAAG,IAAI,GAAG,CAAC;AAChF,MAAI;AAAQ,SAAK,QAAQ,yBAAyB,MAAM,MAAM,GAAG,CAAC;AAClE,MAAI;AAAQ,SAAK,KAAK,MAAM;AAC5B,SACE,qCAAC;AAAA,IAAoB;AAAA,KAClB,UAAU,qCAAC,YAAM,MAAO,GACzB,qCAAC,wBAAkB,SAAU,GAC7B,qCAAC,YAAM,SAAU,GACjB,qCAAC,iCAA2B,IAAK,GAChC,UAAU,qCAAC,YAAM,MAAO,CAC3B;AAEJ,CACF;AAEA,iBAAiB,YAAY;AAAA,EAC3B,QAAQ,UAAU;AAAA,EAClB,WAAW,UAAU;AAAA,EACrB,WAAW,UAAU;AAAA,EACrB,MAAM,UAAU;AAAA,EAChB,QAAQ,UAAU;AACpB;AAEA,MAAM,aAAa;",
   "names": []
 }

package/dist/esm/PageSearch/PageSearch.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import React2 from "react";
 import PropTypes from "prop-types";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { op, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
 const Header = styled(Grid)`

package/dist/esm/PageSearch/PageSearch.js.map

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

package/dist/esm/PageSummary/PageSummary.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import React2 from "react";
 import PropTypes from "prop-types";
 import { Grid } from "@elliemae/ds-grid";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import { op, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
 import { DSFullPageContainer } from "../FullPageContainer";
 import { Header, Toolbar, BodyWrapper, Section } from "./Tags";

package/dist/esm/PageSummary/PageSummary.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/PageSummary/PageSummary.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\nimport { op, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { DSFullPageContainer } from '../FullPageContainer';\nimport { Header, Toolbar, BodyWrapper, Section } from './Tags';\n\nconst Body = styled(Grid)`\n  margin: 0 auto;\n  width: 100%;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    ${({ theme }) => `width: ${op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl), 6.25)};`}\n  }\n`;\n\nconst PageSummary = ({\n  header = null,\n  headerZIndex = 1,\n  bodyPrimary = null,\n  actions = null,\n  actionsZIndex = 1,\n  bodySecondary = null,\n}) => (\n  <DSFullPageContainer>\n    {header && <Header zIndex={headerZIndex}>{header}</Header>}\n    <Section>\n      <Grid>\n        <Body>{bodyPrimary}</Body>\n      </Grid>\n      <Toolbar zIndex={actionsZIndex}>{actions}</Toolbar>\n      <BodyWrapper>\n        <Body>{bodySecondary}</Body>\n      </BodyWrapper>\n    </Section>\n  </DSFullPageContainer>\n);\n\nPageSummary.propTypes = {\n  header: PropTypes.element,\n  bodyPrimary: PropTypes.element,\n  actions: PropTypes.element,\n  bodySecondary: PropTypes.element,\n  headerZIndex: PropTypes.number,\n  actionsZIndex: PropTypes.number,\n};\n\nconst DSPageSummary = PageSummary;\n\nexport { DSPageSummary };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { op, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { DSFullPageContainer } from '../FullPageContainer';\nimport { Header, Toolbar, BodyWrapper, Section } from './Tags';\n\nconst Body = styled(Grid)`\n  margin: 0 auto;\n  width: 100%;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    ${({ theme }) => `width: ${op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl), 6.25)};`}\n  }\n`;\n\nconst PageSummary = ({\n  header = null,\n  headerZIndex = 1,\n  bodyPrimary = null,\n  actions = null,\n  actionsZIndex = 1,\n  bodySecondary = null,\n}) => (\n  <DSFullPageContainer>\n    {header && <Header zIndex={headerZIndex}>{header}</Header>}\n    <Section>\n      <Grid>\n        <Body>{bodyPrimary}</Body>\n      </Grid>\n      <Toolbar zIndex={actionsZIndex}>{actions}</Toolbar>\n      <BodyWrapper>\n        <Body>{bodySecondary}</Body>\n      </BodyWrapper>\n    </Section>\n  </DSFullPageContainer>\n);\n\nPageSummary.propTypes = {\n  header: PropTypes.element,\n  bodyPrimary: PropTypes.element,\n  actions: PropTypes.element,\n  bodySecondary: PropTypes.element,\n  headerZIndex: PropTypes.number,\n  actionsZIndex: PropTypes.number,\n};\n\nconst DSPageSummary = PageSummary;\n\nexport { DSPageSummary };\n"],
   "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,OAAO,OAAO,IAAI;AAAA;AAAA;AAAA,uBAGD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,MAClD,CAAC,EAAE,YAAY,UAAU,GAAG,KAAK,yBAAyB,MAAM,MAAM,GAAG,GAAG,IAAI;AAAA;AAAA;AAItF,MAAM,cAAc,CAAC;AAAA,EACnB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,MAEhB,qCAAC,2BACE,UAAU,qCAAC;AAAA,EAAO,QAAQ;AAAA,GAAe,MAAO,GACjD,qCAAC,eACC,qCAAC,YACC,qCAAC,YAAM,WAAY,CACrB,GACA,qCAAC;AAAA,EAAQ,QAAQ;AAAA,GAAgB,OAAQ,GACzC,qCAAC,mBACC,qCAAC,YAAM,aAAc,CACvB,CACF,CACF;AAGF,YAAY,YAAY;AAAA,EACtB,QAAQ,UAAU;AAAA,EAClB,aAAa,UAAU;AAAA,EACvB,SAAS,UAAU;AAAA,EACnB,eAAe,UAAU;AAAA,EACzB,cAAc,UAAU;AAAA,EACxB,eAAe,UAAU;AAC3B;AAEA,MAAM,gBAAgB;",
   "names": []
 }

package/dist/esm/PageSummary/Tags.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 const Header = styled.div`
   position: fixed;
   display: grid;

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

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

package/dist/esm/SideNav/SideNav.js

@@ -3,7 +3,7 @@ import React2, { useState } from "react";
 import { DSBackdrop } from "@elliemae/ds-backdrop";
 import { Close } from "@elliemae/ds-icons";
 import { DSIconSizes, DSIconColors } from "@elliemae/ds-icon";
-import { PropTypes, describe } from "react-desc";
+import { PropTypes, describe } from "@elliemae/ds-utilities";
 import { noop } from "lodash";
 import Logo from "../Icons/EM_logo";
 import { Container, Menu, Heading, Icon, Hr, MenuList, BottomMenu, MenuWrapper } from "./styles";

package/dist/esm/SideNav/SideNav.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/SideNav/SideNav.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\n/* eslint-disable max-lines */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { useState } from 'react';\nimport { DSBackdrop } from '@elliemae/ds-backdrop';\nimport { Close } from '@elliemae/ds-icons';\nimport { DSIconSizes, DSIconColors } from '@elliemae/ds-icon';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { noop } from 'lodash';\nimport Logo from '../Icons/EM_logo';\nimport { Container, Menu, Heading, Icon, Hr, MenuList, BottomMenu, MenuWrapper } from './styles';\n\nconst DSSideNav = ({ containerProps = {}, title, onClose = noop, menuItems = [], bottomMenuItems = [] }) => {\n  const [selectedMenuItemIdx, setSelectedMenuItem] = useState(-1);\n\n  const menuItemClick = (idx, text, cb) => {\n    if (cb) {\n      cb(idx, text);\n    }\n    setSelectedMenuItem(idx);\n  };\n\n  const renderMenuList = () => (\n    <>\n      {menuItems.length > 0 ? (\n        <MenuList>\n          {menuItems.map(({ icon, text, onClick }, idx) => (\n            <div key={idx} className=\"menuitem\" onClick={menuItemClick.bind(null, idx, text, onClick)}>\n              <div className=\"icon\">{icon}</div>\n              <div className={`text ${idx === selectedMenuItemIdx ? 'active' : ''}`}>{text}</div>\n            </div>\n          ))}\n        </MenuList>\n      ) : null}\n    </>\n  );\n\n  const renderBottomMenu = () => (\n    <MenuList>\n      {bottomMenuItems.map(({ icon, text, onClick }, idx) => (\n        <div key={idx} className=\"menuitem\" onClick={() => onClick(idx, text)}>\n          <div className=\"icon\">{icon}</div>\n          <div className=\"text\">{text}</div>\n        </div>\n      ))}\n    </MenuList>\n  );\n\n  return (\n    <Container data-testid={containerProps['data-testid'] || 'global-header-menu'}>\n      <DSBackdrop onClick={onClose} type=\"cover\"></DSBackdrop>\n\n      <Menu>\n        <MenuWrapper>\n          <Heading>\n            <Icon>{Logo()}</Icon>\n            <div className=\"content\">\n              <label>{title}</label>\n              <span></span>\n              <div className=\"icon\">\n                <Close onClick={onClose} size={DSIconSizes.S} color={DSIconColors.WHITE} />\n              </div>\n            </div>\n          </Heading>\n          <Hr></Hr>\n          {renderMenuList()}\n          {bottomMenuItems.length > 0 ? (\n            <BottomMenu>\n              <div className=\"content\">\n                <hr></hr>\n                {renderBottomMenu()}\n              </div>\n            </BottomMenu>\n          ) : null}\n        </MenuWrapper>\n      </Menu>\n    </Container>\n  );\n};\n\nconst menuProps = PropTypes.arrayOf(\n  PropTypes.shape({\n    icon: PropTypes.element,\n    text: PropTypes.string,\n  }),\n);\n\nconst navProps = {\n  /** inject props to wrapper element of side nav */\n  containerProps: PropTypes.object.description('inject props to wrapper element of side nav'),\n  /**\n   * Heading Title\n   */\n  title: PropTypes.string.isRequired.description('Heading Title'),\n  /**\n   * Callback function when close is menu is triggered\n   */\n  onClose: PropTypes.func.description('Callback function when close is menu is triggered'),\n  /**\n   * Top Menu items array\n   */\n  menuItems: menuProps.description('Top Menu items array'),\n  /**\n   * Bottom Menu items array\n   */\n  bottomMenuItems: menuProps.description('Bottom Menu items array'),\n};\n\nDSSideNav.propTypes = navProps;\nDSSideNav.displayName = 'DSSideNav';\nconst DSSideNavWithSchema = describe(DSSideNav).description('Side navigation for mobile and tablet');\n\nDSSideNavWithSchema.propTypes = navProps;\n\nexport { DSSideNav, DSSideNavWithSchema };\n"],
   "mappings": "AAAA;ACKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY,CAAC,EAAE,iBAAiB,CAAC,GAAG,OAAO,UAAU,MAAM,YAAY,CAAC,GAAG,kBAAkB,CAAC,QAAQ;AAC1G,QAAM,CAAC,qBAAqB,uBAAuB,SAAS,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,4DACG,UAAU,SAAS,IAClB,qCAAC,gBACE,UAAU,IAAI,CAAC,EAAE,MAAM,MAAM,WAAW,QACvC,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAK,WAAU;AAAA,IAAW,SAAS,cAAc,KAAK,MAAM,KAAK,MAAM,OAAO;AAAA,KACtF,qCAAC;AAAA,IAAI,WAAU;AAAA,KAAQ,IAAK,GAC5B,qCAAC;AAAA,IAAI,WAAW,QAAQ,QAAQ,sBAAsB,WAAW;AAAA,KAAO,IAAK,CAC/E,CACD,CACH,IACE,IACN;AAGF,QAAM,mBAAmB,MACvB,qCAAC,gBACE,gBAAgB,IAAI,CAAC,EAAE,MAAM,MAAM,WAAW,QAC7C,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAK,WAAU;AAAA,IAAW,SAAS,MAAM,QAAQ,KAAK,IAAI;AAAA,KAClE,qCAAC;AAAA,IAAI,WAAU;AAAA,KAAQ,IAAK,GAC5B,qCAAC;AAAA,IAAI,WAAU;AAAA,KAAQ,IAAK,CAC9B,CACD,CACH;AAGF,SACE,qCAAC;AAAA,IAAU,eAAa,eAAe,kBAAkB;AAAA,KACvD,qCAAC;AAAA,IAAW,SAAS;AAAA,IAAS,MAAK;AAAA,GAAQ,GAE3C,qCAAC,YACC,qCAAC,mBACC,qCAAC,eACC,qCAAC,YAAM,KAAK,CAAE,GACd,qCAAC;AAAA,IAAI,WAAU;AAAA,KACb,qCAAC,eAAO,KAAM,GACd,qCAAC,YAAK,GACN,qCAAC;AAAA,IAAI,WAAU;AAAA,KACb,qCAAC;AAAA,IAAM,SAAS;AAAA,IAAS,MAAM,YAAY;AAAA,IAAG,OAAO,aAAa;AAAA,GAAO,CAC3E,CACF,CACF,GACA,qCAAC,QAAG,GACH,eAAe,GACf,gBAAgB,SAAS,IACxB,qCAAC,kBACC,qCAAC;AAAA,IAAI,WAAU;AAAA,KACb,qCAAC,UAAG,GACH,iBAAiB,CACpB,CACF,IACE,IACN,CACF,CACF;AAEJ;AAEA,MAAM,YAAY,UAAU,QAC1B,UAAU,MAAM;AAAA,EACd,MAAM,UAAU;AAAA,EAChB,MAAM,UAAU;AAClB,CAAC,CACH;AAEA,MAAM,WAAW;AAAA,EAEf,gBAAgB,UAAU,OAAO,YAAY,6CAA6C;AAAA,EAI1F,OAAO,UAAU,OAAO,WAAW,YAAY,eAAe;AAAA,EAI9D,SAAS,UAAU,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,SAAS,SAAS,EAAE,YAAY,uCAAuC;AAEnG,oBAAoB,YAAY;",
   "names": []
 }

package/dist/esm/SideNav/styles.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 const Container = styled.div`
   position: fixed;
   width: 100%;

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

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

package/dist/esm/SwipeToRefresh/SwipeToRefresh.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React2 from "react";
-import { PropTypes, describe } from "react-desc";
+import { PropTypes, describe } from "@elliemae/ds-utilities";
 import { DSCircularProgressIndicator } from "@elliemae/ds-circular-progress-indicator";
 import { useTheme } from "@elliemae/ds-system";
 import { useSwipe } from "./useSwipe";

package/dist/esm/SwipeToRefresh/SwipeToRefresh.js.map

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

package/dist/esm/SwipeToRefresh/styled.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Grid } from "@elliemae/ds-grid";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 const SwipeContainer = styled(Grid)`
   transition: height 0.2s;
   overscroll-behavior: none;

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

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

package/dist/esm/Tabs/index.js

@@ -30,7 +30,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import * as React from "react";
-import { describe } from "react-desc";
+import { describe } from "@elliemae/ds-utilities";
 import { DSTabs, DSTab } from "@elliemae/ds-tabs";
 import { MobileTabsPropTypes, MobileTabPropTypes } from "./propTypes";
 const DSMobileTabs = (_a) => {

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

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

package/dist/esm/Tabs/propTypes.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { PropTypes } from "react-desc";
+import { PropTypes } from "@elliemae/ds-utilities";
 const MobileTabPropTypes = {
   tabId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("Unique Tab id.").defaultValue(""),
   title: PropTypes.string.description("Tab title.").defaultValue(""),

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-mobile",
-  "version": "3.1.0-next.2",
+  "version": "3.1.0-next.20",
   "license": "MIT",
   "description": "ICE MT - Dimsum - System",
   "files": [
@@ -430,53 +430,52 @@
     "reportFile": "tests.xml",
     "indent": 4
   },
-  "scripts": {
-    "test": "node ../../scripts/testing/test.mjs",
-    "lint": "node ../../scripts/lint.mjs",
-    "dts": "node ../../scripts/dts.mjs",
-    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
-    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch"
-  },
   "publishConfig": {
     "access": "public",
     "typeSafety": false
   },
   "dependencies": {
-    "@elliemae/ds-accordion": "3.1.0-next.2",
-    "@elliemae/ds-backdrop": "3.1.0-next.2",
-    "@elliemae/ds-button": "3.1.0-next.2",
-    "@elliemae/ds-circular-progress-indicator": "3.1.0-next.2",
-    "@elliemae/ds-form": "3.1.0-next.2",
-    "@elliemae/ds-grid": "3.1.0-next.2",
-    "@elliemae/ds-icon": "3.1.0-next.2",
-    "@elliemae/ds-icons": "3.1.0-next.2",
-    "@elliemae/ds-indeterminate-progress-indicator": "3.1.0-next.2",
-    "@elliemae/ds-shared": "3.1.0-next.2",
-    "@elliemae/ds-system": "3.1.0-next.2",
-    "@elliemae/ds-tabs": "3.1.0-next.2",
-    "@elliemae/ds-truncated-expandable-text": "3.1.0-next.2",
-    "@elliemae/ds-utilities": "3.1.0-next.2",
-    "@xstyled/styled-components": "~3.1.2",
+    "@elliemae/ds-accordion": "3.1.0-next.20",
+    "@elliemae/ds-backdrop": "3.1.0-next.20",
+    "@elliemae/ds-button": "3.1.0-next.20",
+    "@elliemae/ds-circular-progress-indicator": "3.1.0-next.20",
+    "@elliemae/ds-form": "3.1.0-next.20",
+    "@elliemae/ds-grid": "3.1.0-next.20",
+    "@elliemae/ds-icon": "3.1.0-next.20",
+    "@elliemae/ds-icons": "3.1.0-next.20",
+    "@elliemae/ds-indeterminate-progress-indicator": "3.1.0-next.20",
+    "@elliemae/ds-shared": "3.1.0-next.20",
+    "@elliemae/ds-system": "3.1.0-next.20",
+    "@elliemae/ds-tabs": "3.1.0-next.20",
+    "@elliemae/ds-truncated-expandable-text": "3.1.0-next.20",
+    "@elliemae/ds-utilities": "3.1.0-next.20",
     "polished": "~3.6.7",
     "prop-types": "~15.8.1",
-    "react-desc": "~4.1.3",
-    "react-window": "~1.8.6",
+    "react-window": "~1.8.7",
     "react-window-infinite-loader": "~1.0.7"
   },
   "devDependencies": {
-    "@elliemae/pui-theme": "~2.5.0",
-    "@testing-library/jest-dom": "~5.16.2",
-    "@testing-library/react": "~12.1.2",
+    "@elliemae/pui-theme": "~2.6.0",
+    "@testing-library/jest-dom": "~5.16.4",
+    "@testing-library/react": "~12.1.3",
     "@testing-library/user-event": "~13.5.0",
-    "styled-components": "~5.3.3",
+    "styled-components": "~5.3.5",
     "styled-system": "~5.1.5"
   },
   "peerDependencies": {
-    "@elliemae/pui-theme": "^2.5.0",
+    "@elliemae/pui-theme": "^2.6.0",
     "lodash": "^4.17.21",
     "react": "~17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.3",
+    "styled-components": "^5.3.5",
     "styled-system": "^5.1.5"
+  },
+  "scripts": {
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "dts": "node ../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
+    "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\"",
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch"
   }
-}
+}