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

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

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

Files changed (239) hide show

package/dist/esm/MobileFilterbar/Filterbar.js.map CHANGED Viewed

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

package/dist/esm/MobileFilterbar/FilterbarItem.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React2 from "react";
-import { describe, PropTypes } from "react-desc";
+import { describe, PropTypes } from "@elliemae/ds-utilities";
 import { Grid } from "@elliemae/ds-grid";
 const DSMobileFilterbarItem = ({ children, onClick }) => /* @__PURE__ */ React2.createElement(Grid, {
   "data-testid": "filter-bar-item-wrapper",

package/dist/esm/MobileFilterbar/FilterbarItem.js.map CHANGED Viewed

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

package/dist/esm/MobileFilterbar/FilterbarSort.js CHANGED Viewed

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

package/dist/esm/MobileFilterbar/FilterbarSort.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileFilterbar/FilterbarSort.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport MobileSeparator from '../MobileSeparator';\n\nconst Separator = styled.div`\n  & > * {\n    margin-left: 0;\n  }\n`;\n\nconst DSMobileFilterbarSort = ({ children }) => (\n  <>\n    {children}\n    <Grid pb=\"xxs\" pt=\"xxs\" cols={['min-content']}>\n      <Separator>\n        <MobileSeparator margin=\"xxs\" direction=\"vertical\" color={['neutral', '300']} />\n      </Separator>\n    </Grid>\n  </>\n);\n\nconst filterbarSortProps = {\n  children: PropTypes.element.description('FilterBar Sort Item').isRequired,\n};\n\nDSMobileFilterbarSort.propTypes = filterbarSortProps;\nDSMobileFilterbarSort.displayName = 'DSMobileFilterbarSort';\nconst FilterbarSortWithSchema = describe(DSMobileFilterbarSort);\nFilterbarSortWithSchema.propTypes = filterbarSortProps;\n\nexport { DSMobileFilterbarSort, FilterbarSortWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport MobileSeparator from '../MobileSeparator';\n\nconst Separator = styled.div`\n  & > * {\n    margin-left: 0;\n  }\n`;\n\nconst DSMobileFilterbarSort = ({ children }) => (\n  <>\n    {children}\n    <Grid pb=\"xxs\" pt=\"xxs\" cols={['min-content']}>\n      <Separator>\n        <MobileSeparator margin=\"xxs\" direction=\"vertical\" color={['neutral', '300']} />\n      </Separator>\n    </Grid>\n  </>\n);\n\nconst filterbarSortProps = {\n  children: PropTypes.element.description('FilterBar Sort Item').isRequired,\n};\n\nDSMobileFilterbarSort.propTypes = filterbarSortProps;\nDSMobileFilterbarSort.displayName = 'DSMobileFilterbarSort';\nconst FilterbarSortWithSchema = describe(DSMobileFilterbarSort);\nFilterbarSortWithSchema.propTypes = filterbarSortProps;\n\nexport { DSMobileFilterbarSort, FilterbarSortWithSchema };\n"],
   "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,wBAAwB,CAAC,EAAE,eAC/B,4DACG,UACD,qCAAC;AAAA,EAAK,IAAG;AAAA,EAAM,IAAG;AAAA,EAAM,MAAM,CAAC,aAAa;AAAA,GAC1C,qCAAC,iBACC,qCAAC;AAAA,EAAgB,QAAO;AAAA,EAAM,WAAU;AAAA,EAAW,OAAO,CAAC,WAAW,KAAK;AAAA,CAAG,CAChF,CACF,CACF;AAGF,MAAM,qBAAqB;AAAA,EACzB,UAAU,UAAU,QAAQ,YAAY,qBAAqB,EAAE;AACjE;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,0BAA0B,SAAS,qBAAqB;AAC9D,wBAAwB,YAAY;",
   "names": []
 }

package/dist/esm/MobileFooter/Action.js CHANGED Viewed

@@ -1,10 +1,8 @@
 import * as React from "react";
 import React2 from "react";
-import styled from "styled-components";
-import { typography } from "@xstyled/styled-components";
-import { color, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
+import { styled, typography, color, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-import { describe, PropTypes } from "react-desc";
+import { describe, PropTypes } from "@elliemae/ds-utilities";
 const Label = styled.span`
   ${typography}
   ${color("neutral", "800")}

package/dist/esm/MobileFooter/Action.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileFooter/Action.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jest/valid-describe */\n/* eslint-disable jest/valid-title */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { typography } from '@xstyled/styled-components';\nimport { color, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe, PropTypes } from 'react-desc';\n\nconst Label = styled.span`\n  ${typography}\n  ${color('neutral', '800')}\n  padding-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  padding-top: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} / 2);\n`;\n\nconst DSMobileFooterAction = ({ label, icon, onClick }) => (\n  <Grid\n    data-testid=\"ds-mobile-footer-action\"\n    rows={['auto'].concat(label ? 'min-content' : 'none')}\n    justifyContent=\"center\"\n    role=\"button\"\n    onClick={onClick}\n  >\n    <Grid justifyContent=\"center\" alignItems=\"center\">\n      {React.cloneElement(icon, {\n        'data-testid': 'ds-mobile-footer-action-icon',\n        size: !label ? 'l' : 'm',\n      })}\n    </Grid>\n\n    {label && (\n      <Grid justifyContent=\"center\">\n        <Label fontSize=\"11px\">{label}</Label>\n      </Grid>\n    )}\n  </Grid>\n);\n\nconst actionProps = {\n  /** Action label */\n  label: PropTypes.string.description('Action label'),\n  /** Action icon */\n  icon: PropTypes.element.description('Action icon'),\n  /** onClick callback */\n  onClick: PropTypes.func.description('onClick callback'),\n};\n\nDSMobileFooterAction.propTypes = actionProps;\nDSMobileFooterAction.displayName = 'DSMobileFooterAction';\nconst DSMobileFooterActionWithSchema = describe(DSMobileFooterAction).description('Mobile footer action');\nDSMobileFooterActionWithSchema.propTypes = actionProps;\n\nexport { DSMobileFooterAction, DSMobileFooterActionWithSchema };\n"],
-  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,QAAQ,OAAO;AAAA,IACjB;AAAA,IACA,MAAM,WAAW,KAAK;AAAA,oBACN,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,sBACvD,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAG/E,MAAM,uBAAuB,CAAC,EAAE,OAAO,MAAM,cAC3C,qCAAC;AAAA,EACC,eAAY;AAAA,EACZ,MAAM,CAAC,MAAM,EAAE,OAAO,QAAQ,gBAAgB,MAAM;AAAA,EACpD,gBAAe;AAAA,EACf,MAAK;AAAA,EACL;AAAA,GAEA,qCAAC;AAAA,EAAK,gBAAe;AAAA,EAAS,YAAW;AAAA,GACtC,OAAM,aAAa,MAAM;AAAA,EACxB,eAAe;AAAA,EACf,MAAM,CAAC,QAAQ,MAAM;AACvB,CAAC,CACH,GAEC,SACC,qCAAC;AAAA,EAAK,gBAAe;AAAA,GACnB,qCAAC;AAAA,EAAM,UAAS;AAAA,GAAQ,KAAM,CAChC,CAEJ;AAGF,MAAM,cAAc;AAAA,EAElB,OAAO,UAAU,OAAO,YAAY,cAAc;AAAA,EAElD,MAAM,UAAU,QAAQ,YAAY,aAAa;AAAA,EAEjD,SAAS,UAAU,KAAK,YAAY,kBAAkB;AACxD;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,SAAS,oBAAoB,EAAE,YAAY,sBAAsB;AACxG,+BAA+B,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jest/valid-describe */\n/* eslint-disable jest/valid-title */\nimport React from 'react';\nimport { styled, typography, color, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\n\nconst Label = styled.span`\n  ${typography}\n  ${color('neutral', '800')}\n  padding-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n  padding-top: calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} / 2);\n`;\n\nconst DSMobileFooterAction = ({ label, icon, onClick }) => (\n  <Grid\n    data-testid=\"ds-mobile-footer-action\"\n    rows={['auto'].concat(label ? 'min-content' : 'none')}\n    justifyContent=\"center\"\n    role=\"button\"\n    onClick={onClick}\n  >\n    <Grid justifyContent=\"center\" alignItems=\"center\">\n      {React.cloneElement(icon, {\n        'data-testid': 'ds-mobile-footer-action-icon',\n        size: !label ? 'l' : 'm',\n      })}\n    </Grid>\n\n    {label && (\n      <Grid justifyContent=\"center\">\n        <Label fontSize=\"11px\">{label}</Label>\n      </Grid>\n    )}\n  </Grid>\n);\n\nconst actionProps = {\n  /** Action label */\n  label: PropTypes.string.description('Action label'),\n  /** Action icon */\n  icon: PropTypes.element.description('Action icon'),\n  /** onClick callback */\n  onClick: PropTypes.func.description('onClick callback'),\n};\n\nDSMobileFooterAction.propTypes = actionProps;\nDSMobileFooterAction.displayName = 'DSMobileFooterAction';\nconst DSMobileFooterActionWithSchema = describe(DSMobileFooterAction).description('Mobile footer action');\nDSMobileFooterActionWithSchema.propTypes = actionProps;\n\nexport { DSMobileFooterAction, DSMobileFooterActionWithSchema };\n"],
+  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AAEA,MAAM,QAAQ,OAAO;AAAA,IACjB;AAAA,IACA,MAAM,WAAW,KAAK;AAAA,oBACN,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,sBACvD,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAG/E,MAAM,uBAAuB,CAAC,EAAE,OAAO,MAAM,cAC3C,qCAAC;AAAA,EACC,eAAY;AAAA,EACZ,MAAM,CAAC,MAAM,EAAE,OAAO,QAAQ,gBAAgB,MAAM;AAAA,EACpD,gBAAe;AAAA,EACf,MAAK;AAAA,EACL;AAAA,GAEA,qCAAC;AAAA,EAAK,gBAAe;AAAA,EAAS,YAAW;AAAA,GACtC,OAAM,aAAa,MAAM;AAAA,EACxB,eAAe;AAAA,EACf,MAAM,CAAC,QAAQ,MAAM;AACvB,CAAC,CACH,GAEC,SACC,qCAAC;AAAA,EAAK,gBAAe;AAAA,GACnB,qCAAC;AAAA,EAAM,UAAS;AAAA,GAAQ,KAAM,CAChC,CAEJ;AAGF,MAAM,cAAc;AAAA,EAElB,OAAO,UAAU,OAAO,YAAY,cAAc;AAAA,EAElD,MAAM,UAAU,QAAQ,YAAY,aAAa;AAAA,EAEjD,SAAS,UAAU,KAAK,YAAY,kBAAkB;AACxD;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,SAAS,oBAAoB,EAAE,YAAY,sBAAsB;AACxG,+BAA+B,YAAY;",
   "names": []
 }

package/dist/esm/MobileFooter/Footer.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import * as React from "react";
 import React2 from "react";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import { border, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import DSButton from "@elliemae/ds-button";
-import { describe, PropTypes } from "react-desc";
+import { describe, PropTypes } from "@elliemae/ds-utilities";
 import { DSMobileFooterText } from "./Text";
 const FooterWrap = styled(Grid)`
   background-color: ${(props) => props.theme.colors.neutral["000"]};

package/dist/esm/MobileFooter/Footer.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileFooter/Footer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jest/valid-describe */\n/* eslint-disable jest/valid-title */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { border, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport DSButton from '@elliemae/ds-button';\nimport { describe, PropTypes } from 'react-desc';\nimport { DSMobileFooterText } from './Text';\n\nconst FooterWrap = styled(Grid)`\n  background-color: ${(props) => props.theme.colors.neutral['000']};\n  border-top: ${(props) => border(props.theme.colors.neutral[100])};\n  height: ${(props) => `calc(${__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)} * 7)`};\n`;\n\nconst MobileFooter = ({ children }) => {\n  const childArr = React.Children.toArray(children);\n  const isButtonType = childArr[0].type === DSMobileFooterText || childArr[0].type === DSButton;\n  const setCols = () => {\n    if (isButtonType) {\n      return childArr.length === 1 ? ['90%'] : ['45%', '45%'];\n    }\n    return childArr.map(() => `${100 / childArr.length}%`);\n  };\n  return (\n    <FooterWrap>\n      <Grid\n        cols={setCols()}\n        gutter={isButtonType ? 'xs' : undefined}\n        justifyContent=\"center\"\n        alignItems={isButtonType ? 'center' : undefined}\n      >\n        {childArr.map((c, i) => (\n          // eslint-disable-next-line react/no-array-index-key\n          <Grid key={i}>{c}</Grid>\n        ))}\n      </Grid>\n    </FooterWrap>\n  );\n};\n\nconst footerProps = {\n  /**\n   * Instance of DSButton, DSMobileFooterText or DSMobileFooterAction\n   */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired.description(\n    'Instance of DSButton, DSMobileFooterText or DSMobileFooterAction',\n  ),\n};\n\nMobileFooter.propTypes = footerProps;\nMobileFooter.displayName = 'MobileFooter';\nconst MobileFooterWithSchema = describe(MobileFooter);\nMobileFooterWithSchema.propTypes = footerProps;\n\nexport default MobileFooter;\n\nexport { MobileFooterWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jest/valid-describe */\n/* eslint-disable jest/valid-title */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { border, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport DSButton from '@elliemae/ds-button';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { DSMobileFooterText } from './Text';\n\nconst FooterWrap = styled(Grid)`\n  background-color: ${(props) => props.theme.colors.neutral['000']};\n  border-top: ${(props) => border(props.theme.colors.neutral[100])};\n  height: ${(props) => `calc(${__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)} * 7)`};\n`;\n\nconst MobileFooter = ({ children }) => {\n  const childArr = React.Children.toArray(children);\n  const isButtonType = childArr[0].type === DSMobileFooterText || childArr[0].type === DSButton;\n  const setCols = () => {\n    if (isButtonType) {\n      return childArr.length === 1 ? ['90%'] : ['45%', '45%'];\n    }\n    return childArr.map(() => `${100 / childArr.length}%`);\n  };\n  return (\n    <FooterWrap>\n      <Grid\n        cols={setCols()}\n        gutter={isButtonType ? 'xs' : undefined}\n        justifyContent=\"center\"\n        alignItems={isButtonType ? 'center' : undefined}\n      >\n        {childArr.map((c, i) => (\n          // eslint-disable-next-line react/no-array-index-key\n          <Grid key={i}>{c}</Grid>\n        ))}\n      </Grid>\n    </FooterWrap>\n  );\n};\n\nconst footerProps = {\n  /**\n   * Instance of DSButton, DSMobileFooterText or DSMobileFooterAction\n   */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired.description(\n    'Instance of DSButton, DSMobileFooterText or DSMobileFooterAction',\n  ),\n};\n\nMobileFooter.propTypes = footerProps;\nMobileFooter.displayName = 'MobileFooter';\nconst MobileFooterWithSchema = describe(MobileFooter);\nMobileFooterWithSchema.propTypes = footerProps;\n\nexport default MobileFooter;\n\nexport { MobileFooterWithSchema };\n"],
   "mappings": "AAAA;ACEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,aAAa,OAAO,IAAI;AAAA,sBACR,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBAC5C,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,IAAI;AAAA,YACrD,CAAC,UAAU,QAAQ,yBAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAG5E,MAAM,eAAe,CAAC,EAAE,eAAe;AACrC,QAAM,WAAW,OAAM,SAAS,QAAQ,QAAQ;AAChD,QAAM,eAAe,SAAS,GAAG,SAAS,sBAAsB,SAAS,GAAG,SAAS;AACrF,QAAM,UAAU,MAAM;AACpB,QAAI,cAAc;AAChB,aAAO,SAAS,WAAW,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,KAAK;AAAA,IACxD;AACA,WAAO,SAAS,IAAI,MAAM,GAAG,MAAM,SAAS,SAAS;AAAA,EACvD;AACA,SACE,qCAAC,kBACC,qCAAC;AAAA,IACC,MAAM,QAAQ;AAAA,IACd,QAAQ,eAAe,OAAO;AAAA,IAC9B,gBAAe;AAAA,IACf,YAAY,eAAe,WAAW;AAAA,KAErC,SAAS,IAAI,CAAC,GAAG,MAEhB,qCAAC;AAAA,IAAK,KAAK;AAAA,KAAI,CAAE,CAClB,CACH,CACF;AAEJ;AAEA,MAAM,cAAc;AAAA,EAIlB,UAAU,UAAU,UAAU,CAAC,UAAU,SAAS,UAAU,QAAQ,UAAU,OAAO,CAAC,CAAC,EAAE,WAAW,YAClG,kEACF;AACF;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;AAEnC,IAAO,iBAAQ;",
   "names": []
 }

package/dist/esm/MobileFooter/Text.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import * as React from "react";
 import React2 from "react";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import { textStyle, truncate, color } from "@elliemae/ds-system";
-import { describe, PropTypes } from "react-desc";
+import { describe, PropTypes } from "@elliemae/ds-utilities";
 const Text = styled.p`
   margin: auto 0;
   ${truncate()}

package/dist/esm/MobileFooter/Text.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileFooter/Text.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jest/valid-describe */\n/* eslint-disable jest/valid-title */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { textStyle, truncate, color } from '@elliemae/ds-system';\nimport { describe, PropTypes } from 'react-desc';\n\nconst Text = styled.p`\n  margin: auto 0;\n  ${truncate()}\n  ${textStyle('body')}\n  ${color('neutral', '800')}\n`;\n\nconst DSMobileFooterText = ({ children }) => <Text>{children}</Text>;\n\nconst props = {\n  children: PropTypes.string.isRequired.description('Children'),\n};\n\nDSMobileFooterText.propTypes = props;\nDSMobileFooterText.displayName = 'DSMobileFooterText';\nconst DSMobileFooterTextWithSchema = describe(DSMobileFooterText);\nDSMobileFooterTextWithSchema.propTypes = props;\n\nexport { DSMobileFooterText, DSMobileFooterTextWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jest/valid-describe */\n/* eslint-disable jest/valid-title */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { textStyle, truncate, color } from '@elliemae/ds-system';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\n\nconst Text = styled.p`\n  margin: auto 0;\n  ${truncate()}\n  ${textStyle('body')}\n  ${color('neutral', '800')}\n`;\n\nconst DSMobileFooterText = ({ children }) => <Text>{children}</Text>;\n\nconst props = {\n  children: PropTypes.string.isRequired.description('Children'),\n};\n\nDSMobileFooterText.propTypes = props;\nDSMobileFooterText.displayName = 'DSMobileFooterText';\nconst DSMobileFooterTextWithSchema = describe(DSMobileFooterText);\nDSMobileFooterTextWithSchema.propTypes = props;\n\nexport { DSMobileFooterText, DSMobileFooterTextWithSchema };\n"],
   "mappings": "AAAA;ACEA;AACA;AACA;AACA;AAEA,MAAM,OAAO,OAAO;AAAA;AAAA,IAEhB,SAAS;AAAA,IACT,UAAU,MAAM;AAAA,IAChB,MAAM,WAAW,KAAK;AAAA;AAG1B,MAAM,qBAAqB,CAAC,EAAE,eAAe,qCAAC,YAAM,QAAS;AAE7D,MAAM,QAAQ;AAAA,EACZ,UAAU,UAAU,OAAO,WAAW,YAAY,UAAU;AAC9D;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileListItem/MobileListItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { border, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\n\nconst StyledContainer = styled(Grid)`\n  background: ${(props) => props.theme.colors.neutral['000']};\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\nconst StyledTitle = styled.div`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 13px;\n  color: ${(props) => props.theme.colors.neutral['800']};\n  ${truncate()}\n`;\n\nconst MobileListItem = ({\n  leftAddon = null,\n  rightAddon = null,\n  title = '',\n  value = '',\n  dataTestid = 'mobile-list-item',\n  theme,\n}) => {\n  const cols = [1];\n  if (leftAddon) cols.unshift(__UNSAFE_SPACE_TO_DIMSUM(theme.space.m));\n  if (rightAddon) cols.push(__UNSAFE_SPACE_TO_DIMSUM(theme.space.m));\n  return (\n    <StyledContainer\n      cols={cols}\n      height={theme.space.m}\n      width=\"100%\"\n      pl={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}\n      pr={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}\n      gutter=\"xs\"\n      data-testid={`${dataTestid}--${value}`}\n    >\n      {leftAddon && (\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          {leftAddon}\n        </Grid>\n      )}\n      <Grid alignItems=\"center\">\n        <StyledTitle>{title}</StyledTitle>\n      </Grid>\n      {rightAddon && (\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          {rightAddon}\n        </Grid>\n      )}\n    </StyledContainer>\n  );\n};\n\nconst DSMobileListItem = withTheme(MobileListItem);\n\nconst listItemProps = {\n  leftAddon: PropTypes.element.description('Element placed at the left'),\n  rightAddon: PropTypes.element.description('Element placed at the right'),\n  title: PropTypes.string.description('Item s title').isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'Item s value, used for data-testid attr',\n  ),\n  dataTestid: PropTypes.string.description('ID used for testing').defaultValue('mobile-list-item'),\n  theme: PropTypes.object.description(''),\n};\n\nMobileListItem.propTypes = listItemProps;\nMobileListItem.displayName = 'MobileListItem';\nconst ListItemWithSchema = describe(MobileListItem);\nListItemWithSchema.propTypes = listItemProps;\n\nexport { DSMobileListItem, ListItemWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { border, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\n\nconst StyledContainer = styled(Grid)`\n  background: ${(props) => props.theme.colors.neutral['000']};\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\nconst StyledTitle = styled.div`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 13px;\n  color: ${(props) => props.theme.colors.neutral['800']};\n  ${truncate()}\n`;\n\nconst MobileListItem = ({\n  leftAddon = null,\n  rightAddon = null,\n  title = '',\n  value = '',\n  dataTestid = 'mobile-list-item',\n  theme,\n}) => {\n  const cols = [1];\n  if (leftAddon) cols.unshift(__UNSAFE_SPACE_TO_DIMSUM(theme.space.m));\n  if (rightAddon) cols.push(__UNSAFE_SPACE_TO_DIMSUM(theme.space.m));\n  return (\n    <StyledContainer\n      cols={cols}\n      height={theme.space.m}\n      width=\"100%\"\n      pl={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}\n      pr={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}\n      gutter=\"xs\"\n      data-testid={`${dataTestid}--${value}`}\n    >\n      {leftAddon && (\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          {leftAddon}\n        </Grid>\n      )}\n      <Grid alignItems=\"center\">\n        <StyledTitle>{title}</StyledTitle>\n      </Grid>\n      {rightAddon && (\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          {rightAddon}\n        </Grid>\n      )}\n    </StyledContainer>\n  );\n};\n\nconst DSMobileListItem = withTheme(MobileListItem);\n\nconst listItemProps = {\n  leftAddon: PropTypes.element.description('Element placed at the left'),\n  rightAddon: PropTypes.element.description('Element placed at the right'),\n  title: PropTypes.string.description('Item s title').isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'Item s value, used for data-testid attr',\n  ),\n  dataTestid: PropTypes.string.description('ID used for testing').defaultValue('mobile-list-item'),\n  theme: PropTypes.object.description(''),\n};\n\nMobileListItem.propTypes = listItemProps;\nMobileListItem.displayName = 'MobileListItem';\nconst ListItemWithSchema = describe(MobileListItem);\nListItemWithSchema.propTypes = listItemProps;\n\nexport { DSMobileListItem, ListItemWithSchema };\n"],
   "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,kBAAkB,OAAO,IAAI;AAAA,gBACnB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,mBACnC,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAEtE,MAAM,cAAc,OAAO;AAAA,iBACV,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,WAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,IAC7C,SAAS;AAAA;AAGb,MAAM,iBAAiB,CAAC;AAAA,EACtB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,aAAa;AAAA,EACb;AAAA,MACI;AACJ,QAAM,OAAO,CAAC,CAAC;AACf,MAAI;AAAW,SAAK,QAAQ,yBAAyB,MAAM,MAAM,CAAC,CAAC;AACnE,MAAI;AAAY,SAAK,KAAK,yBAAyB,MAAM,MAAM,CAAC,CAAC;AACjE,SACE,qCAAC;AAAA,IACC;AAAA,IACA,QAAQ,MAAM,MAAM;AAAA,IACpB,OAAM;AAAA,IACN,IAAI,yBAAyB,MAAM,MAAM,CAAC;AAAA,IAC1C,IAAI,yBAAyB,MAAM,MAAM,CAAC;AAAA,IAC1C,QAAO;AAAA,IACP,eAAa,GAAG,eAAe;AAAA,KAE9B,aACC,qCAAC;AAAA,IAAK,YAAW;AAAA,IAAS,gBAAe;AAAA,KACtC,SACH,GAEF,qCAAC;AAAA,IAAK,YAAW;AAAA,KACf,qCAAC,mBAAa,KAAM,CACtB,GACC,cACC,qCAAC;AAAA,IAAK,YAAW;AAAA,IAAS,gBAAe;AAAA,KACtC,UACH,CAEJ;AAEJ;AAEA,MAAM,mBAAmB,UAAU,cAAc;AAEjD,MAAM,gBAAgB;AAAA,EACpB,WAAW,UAAU,QAAQ,YAAY,4BAA4B;AAAA,EACrE,YAAY,UAAU,QAAQ,YAAY,6BAA6B;AAAA,EACvE,OAAO,UAAU,OAAO,YAAY,cAAc,EAAE;AAAA,EACpD,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAC/D,yCACF;AAAA,EACA,YAAY,UAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,kBAAkB;AAAA,EAC/F,OAAO,UAAU,OAAO,YAAY,EAAE;AACxC;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,qBAAqB,SAAS,cAAc;AAClD,mBAAmB,YAAY;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import React2, { useMemo, useState, useCallback } from "react";
-import { describe, PropTypes } from "react-desc";
-import styled from "styled-components";
+import { describe, PropTypes } from "@elliemae/ds-utilities";
+import { styled } from "@elliemae/ds-system";
 import { TruncatedExpandableText } from "@elliemae/ds-truncated-expandable-text";
 import { Grid } from "@elliemae/ds-grid";
 import { border, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobilePageHeader/MobilePageHeader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\n/* eslint-disable no-plusplus */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useMemo, useState, useCallback } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport { TruncatedExpandableText } from '@elliemae/ds-truncated-expandable-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { border, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport MobileSeparator from '../MobileSeparator';\n\nconst StyledTitle = styled(Grid)`\n  font-size: 22px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  min-height: ${(props) => (props.withBreadcrumb ? 'auto' : '44px')};\n  padding-top: ${(props) => (props.withBreadcrumb ? '0' : '6px')};\n`;\n\nconst StyledBreadCrumb = styled.div`\n  font-size: 16px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['600']};\n  ${truncate()}\n`;\n\nconst Label = styled.div`\n  color: ${(props) => props.theme.colors.neutral['500']};\n  ${truncate()}\n`;\n\nconst Value = styled.div`\n  ${truncate()}\n  color: ${(props) => props.theme.colors.neutral['600']};\n  ${(props) => (props.withMarginRight ? `margin-right: 4px;` : '')}\n  margin-top: ${(props) => (props.withBreadcrumb ? '12px' : '0')};\n`;\n\nconst Wrapper = styled(Grid)`\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst MobilePageHeader = ({\n  pageTitle = null,\n  contextMenu = null,\n  firstAction = null,\n  secondAction = null,\n  backArrow = null,\n  breadCrumb = null,\n  onOpenContextMenu = () => null,\n  value,\n  label,\n  theme,\n}) => {\n  const hasValue = value === 0 || value;\n\n  const countActions = useMemo(() => {\n    let count = 0;\n    if (firstAction) count++;\n    if (secondAction) count++;\n    return count;\n  }, [firstAction, secondAction]);\n  const [open, setOpen] = useState();\n  const handleContext = useCallback(() => {\n    setOpen(!open);\n  }, [open]);\n\n  const separator = (\n    <Grid height=\"32px\" alignItems=\"center\">\n      <Grid height=\"24px\">\n        <MobileSeparator direction=\"vertical\" margin=\"xxs\" color={['neutral', '300']} />\n      </Grid>\n    </Grid>\n  );\n  const cols = [1, 'auto'];\n  const cols2 = ['auto'];\n  if (countActions) cols.push('auto');\n  if (hasValue) cols2.push('auto');\n  if (label) cols2.push('auto');\n\n  return (\n    <Wrapper\n      cols={cols}\n      pl={theme.space.xs}\n      pr={theme.space.xs}\n      alignItems=\"flex-start\"\n      width=\"100%\"\n      data-testid=\"page-header-wrapper\"\n    >\n      <Grid alignItems=\"flex-start\" justifyContent=\"flex-start\" cols={cols2}>\n        <Grid\n          cols={backArrow ? ['auto', 1] : [1]}\n          alignItems=\"flex-start\"\n          pr={countActions === 0 && !hasValue && !label ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.s) : 0}\n        >\n          {backArrow && (\n            <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\">\n              {backArrow}\n            </Grid>\n          )}\n          <Grid flexGrow={0} pt={!breadCrumb ? 0 : theme.space.xxs}>\n            <Grid cols={['auto', 'auto']} alignItems=\"flex-start\">\n              <Grid>\n                {breadCrumb && <StyledBreadCrumb data-testid=\"page-header-breadcrum\">{breadCrumb}</StyledBreadCrumb>}\n                <StyledTitle\n                  maxWidth=\"100%\"\n                  alignItems=\"flex-start\"\n                  withBreadcrumb={!!breadCrumb}\n                  data-testid=\"page-header-title\"\n                >\n                  <Grid pt={breadCrumb ? 0 : theme.space.xxxs}>\n                    <TruncatedExpandableText value={pageTitle} />\n                  </Grid>\n                </StyledTitle>\n              </Grid>\n              {contextMenu && (\n                <Grid alignItems=\"center\" mt={breadCrumb ? '20px' : '8px'}>\n                  <DSButton\n                    buttonType=\"text\"\n                    icon={<ChevronSmallDown />}\n                    size=\"s\"\n                    onClick={() => {\n                      handleContext();\n                      onOpenContextMenu();\n                    }}\n                    containerProps={{ 'data-testid': 'trigger-context-menu' }}\n                  />\n                  {React.cloneElement(contextMenu, {\n                    open: contextMenu.props.open !== undefined ? contextMenu.props.open : open,\n                    onChange: (event, item) => {\n                      if (contextMenu.props.onChange) contextMenu.props.onChange(event, item);\n                      handleContext();\n                    },\n                  })}\n                </Grid>\n              )}\n            </Grid>\n          </Grid>\n        </Grid>\n        {hasValue && (\n          <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\" cols={['auto', 'auto']}>\n            {separator}\n            <Value withMarginRight={!!label} data-testid=\"page-header-value\">\n              {value}\n            </Value>\n          </Grid>\n        )}\n        {label && (\n          <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\">\n            <Label withBreadcrumb={!!breadCrumb} data-testid=\"page-header-label\">\n              {label}\n            </Label>\n          </Grid>\n        )}\n      </Grid>\n      {countActions > 0 && (\n        <Grid\n          height={breadCrumb ? '56px' : '44px'}\n          alignItems=\"center\"\n          cols={countActions === 1 ? ['auto'] : ['auto', 'auto', 'auto']}\n        >\n          {firstAction && <Grid>{firstAction}</Grid>}\n          {countActions === 2 && separator}\n          {secondAction && <Grid>{secondAction}</Grid>}\n        </Grid>\n      )}\n    </Wrapper>\n  );\n};\n\nconst pageHeaderProps = {\n  pageTitle: PropTypes.string.description('Page title').isRequired,\n  contextMenu: PropTypes.element.description('Context Menu to open'),\n  onOpenContextMenu: PropTypes.func.description('function called when context menu opens'),\n  firstAction: PropTypes.element.description('Action Button'),\n  secondAction: PropTypes.element.description('Action Button'),\n  backArrow: PropTypes.element.description('Back Arrow Button'),\n  breadCrumb: PropTypes.string.description('BreadCrumbs title'),\n  value: PropTypes.number.description('Page summary value'),\n  label: PropTypes.string.description('Page summary label'),\n  theme: PropTypes.object.description('dimsum theme'),\n};\n\nMobilePageHeader.propTypes = pageHeaderProps;\nMobilePageHeader.displayName = 'MobilePageHeader';\nconst PageHeaderWithSchema = describe(MobilePageHeader);\nPageHeaderWithSchema.propTypes = pageHeaderProps;\n\nconst DSMobilePageHeader = withTheme(MobilePageHeader);\n\nexport { DSMobilePageHeader, PageHeaderWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\n/* eslint-disable no-plusplus */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useMemo, useState, useCallback } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { TruncatedExpandableText } from '@elliemae/ds-truncated-expandable-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { border, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport MobileSeparator from '../MobileSeparator';\n\nconst StyledTitle = styled(Grid)`\n  font-size: 22px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  min-height: ${(props) => (props.withBreadcrumb ? 'auto' : '44px')};\n  padding-top: ${(props) => (props.withBreadcrumb ? '0' : '6px')};\n`;\n\nconst StyledBreadCrumb = styled.div`\n  font-size: 16px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['600']};\n  ${truncate()}\n`;\n\nconst Label = styled.div`\n  color: ${(props) => props.theme.colors.neutral['500']};\n  ${truncate()}\n`;\n\nconst Value = styled.div`\n  ${truncate()}\n  color: ${(props) => props.theme.colors.neutral['600']};\n  ${(props) => (props.withMarginRight ? `margin-right: 4px;` : '')}\n  margin-top: ${(props) => (props.withBreadcrumb ? '12px' : '0')};\n`;\n\nconst Wrapper = styled(Grid)`\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst MobilePageHeader = ({\n  pageTitle = null,\n  contextMenu = null,\n  firstAction = null,\n  secondAction = null,\n  backArrow = null,\n  breadCrumb = null,\n  onOpenContextMenu = () => null,\n  value,\n  label,\n  theme,\n}) => {\n  const hasValue = value === 0 || value;\n\n  const countActions = useMemo(() => {\n    let count = 0;\n    if (firstAction) count++;\n    if (secondAction) count++;\n    return count;\n  }, [firstAction, secondAction]);\n  const [open, setOpen] = useState();\n  const handleContext = useCallback(() => {\n    setOpen(!open);\n  }, [open]);\n\n  const separator = (\n    <Grid height=\"32px\" alignItems=\"center\">\n      <Grid height=\"24px\">\n        <MobileSeparator direction=\"vertical\" margin=\"xxs\" color={['neutral', '300']} />\n      </Grid>\n    </Grid>\n  );\n  const cols = [1, 'auto'];\n  const cols2 = ['auto'];\n  if (countActions) cols.push('auto');\n  if (hasValue) cols2.push('auto');\n  if (label) cols2.push('auto');\n\n  return (\n    <Wrapper\n      cols={cols}\n      pl={theme.space.xs}\n      pr={theme.space.xs}\n      alignItems=\"flex-start\"\n      width=\"100%\"\n      data-testid=\"page-header-wrapper\"\n    >\n      <Grid alignItems=\"flex-start\" justifyContent=\"flex-start\" cols={cols2}>\n        <Grid\n          cols={backArrow ? ['auto', 1] : [1]}\n          alignItems=\"flex-start\"\n          pr={countActions === 0 && !hasValue && !label ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.s) : 0}\n        >\n          {backArrow && (\n            <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\">\n              {backArrow}\n            </Grid>\n          )}\n          <Grid flexGrow={0} pt={!breadCrumb ? 0 : theme.space.xxs}>\n            <Grid cols={['auto', 'auto']} alignItems=\"flex-start\">\n              <Grid>\n                {breadCrumb && <StyledBreadCrumb data-testid=\"page-header-breadcrum\">{breadCrumb}</StyledBreadCrumb>}\n                <StyledTitle\n                  maxWidth=\"100%\"\n                  alignItems=\"flex-start\"\n                  withBreadcrumb={!!breadCrumb}\n                  data-testid=\"page-header-title\"\n                >\n                  <Grid pt={breadCrumb ? 0 : theme.space.xxxs}>\n                    <TruncatedExpandableText value={pageTitle} />\n                  </Grid>\n                </StyledTitle>\n              </Grid>\n              {contextMenu && (\n                <Grid alignItems=\"center\" mt={breadCrumb ? '20px' : '8px'}>\n                  <DSButton\n                    buttonType=\"text\"\n                    icon={<ChevronSmallDown />}\n                    size=\"s\"\n                    onClick={() => {\n                      handleContext();\n                      onOpenContextMenu();\n                    }}\n                    containerProps={{ 'data-testid': 'trigger-context-menu' }}\n                  />\n                  {React.cloneElement(contextMenu, {\n                    open: contextMenu.props.open !== undefined ? contextMenu.props.open : open,\n                    onChange: (event, item) => {\n                      if (contextMenu.props.onChange) contextMenu.props.onChange(event, item);\n                      handleContext();\n                    },\n                  })}\n                </Grid>\n              )}\n            </Grid>\n          </Grid>\n        </Grid>\n        {hasValue && (\n          <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\" cols={['auto', 'auto']}>\n            {separator}\n            <Value withMarginRight={!!label} data-testid=\"page-header-value\">\n              {value}\n            </Value>\n          </Grid>\n        )}\n        {label && (\n          <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\">\n            <Label withBreadcrumb={!!breadCrumb} data-testid=\"page-header-label\">\n              {label}\n            </Label>\n          </Grid>\n        )}\n      </Grid>\n      {countActions > 0 && (\n        <Grid\n          height={breadCrumb ? '56px' : '44px'}\n          alignItems=\"center\"\n          cols={countActions === 1 ? ['auto'] : ['auto', 'auto', 'auto']}\n        >\n          {firstAction && <Grid>{firstAction}</Grid>}\n          {countActions === 2 && separator}\n          {secondAction && <Grid>{secondAction}</Grid>}\n        </Grid>\n      )}\n    </Wrapper>\n  );\n};\n\nconst pageHeaderProps = {\n  pageTitle: PropTypes.string.description('Page title').isRequired,\n  contextMenu: PropTypes.element.description('Context Menu to open'),\n  onOpenContextMenu: PropTypes.func.description('function called when context menu opens'),\n  firstAction: PropTypes.element.description('Action Button'),\n  secondAction: PropTypes.element.description('Action Button'),\n  backArrow: PropTypes.element.description('Back Arrow Button'),\n  breadCrumb: PropTypes.string.description('BreadCrumbs title'),\n  value: PropTypes.number.description('Page summary value'),\n  label: PropTypes.string.description('Page summary label'),\n  theme: PropTypes.object.description('dimsum theme'),\n};\n\nMobilePageHeader.propTypes = pageHeaderProps;\nMobilePageHeader.displayName = 'MobilePageHeader';\nconst PageHeaderWithSchema = describe(MobilePageHeader);\nPageHeaderWithSchema.propTypes = pageHeaderProps;\n\nconst DSMobilePageHeader = withTheme(MobilePageHeader);\n\nexport { DSMobilePageHeader, PageHeaderWithSchema };\n"],
   "mappings": "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",
   "names": []
 }

package/dist/esm/MobileSelectList/styled.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import React2 from "react";
 import { noop } from "lodash";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { DSCheckbox } from "@elliemae/ds-form";
 import { Checkmark } from "@elliemae/ds-icons";

package/dist/esm/MobileSelectList/styled.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileSelectList/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { noop } from 'lodash';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { border } from '@elliemae/ds-system';\nimport { DSMobileTouchable } from '../MobileTouchable';\nimport { DSMobileListItem } from '../MobileListItem';\n\nexport const StyledContainer = styled(Grid)`\n  background: ${(props) => props.theme.colors.neutral['000']};\n  z-index: ${(props) => props.zIndex};\n  position: fixed;\n  width: 100%;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n`;\n\nexport const HeaderContainer = styled(Grid)`\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nexport const Footer = styled(Grid)`\n  border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nexport const ListContainer = styled.div`\n  & ${DSMobileTouchable}:last-child ${DSMobileListItem} {\n    border: none;\n  }\n`;\n\nexport const checkbox = <DSCheckbox checked={false} onChange={noop} style={{ pointerEvents: 'none' }} />;\nexport const checked = <DSCheckbox checked onChange={noop} style={{ pointerEvents: 'none' }} />;\nexport const selectedMark = <Checkmark color={['brand-primary', 600]} />;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { noop } from 'lodash';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { border } from '@elliemae/ds-system';\nimport { DSMobileTouchable } from '../MobileTouchable';\nimport { DSMobileListItem } from '../MobileListItem';\n\nexport const StyledContainer = styled(Grid)`\n  background: ${(props) => props.theme.colors.neutral['000']};\n  z-index: ${(props) => props.zIndex};\n  position: fixed;\n  width: 100%;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n`;\n\nexport const HeaderContainer = styled(Grid)`\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nexport const Footer = styled(Grid)`\n  border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nexport const ListContainer = styled.div`\n  & ${DSMobileTouchable}:last-child ${DSMobileListItem} {\n    border: none;\n  }\n`;\n\nexport const checkbox = <DSCheckbox checked={false} onChange={noop} style={{ pointerEvents: 'none' }} />;\nexport const checked = <DSCheckbox checked onChange={noop} style={{ pointerEvents: 'none' }} />;\nexport const selectedMark = <Checkmark color={['brand-primary', 600]} />;\n"],
   "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,kBAAkB,OAAO,IAAI;AAAA,gBAC1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,aACzC,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB,MAAM,kBAAkB,OAAO,IAAI;AAAA,mBACvB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAG/D,MAAM,SAAS,OAAO,IAAI;AAAA,gBACjB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAG5D,MAAM,gBAAgB,OAAO;AAAA,MAC9B,gCAAgC;AAAA;AAAA;AAAA;AAK/B,MAAM,WAAW,qCAAC;AAAA,EAAW,SAAS;AAAA,EAAO,UAAU;AAAA,EAAM,OAAO,EAAE,eAAe,OAAO;AAAA,CAAG;AAC/F,MAAM,UAAU,qCAAC;AAAA,EAAW,SAAO;AAAA,EAAC,UAAU;AAAA,EAAM,OAAO,EAAE,eAAe,OAAO;AAAA,CAAG;AACtF,MAAM,eAAe,qCAAC;AAAA,EAAU,OAAO,CAAC,iBAAiB,GAAG;AAAA,CAAG;",
   "names": []
 }

package/dist/esm/MobileSeparator/Separator.js CHANGED Viewed

@@ -16,8 +16,8 @@ var __spreadValues = (a, b) => {
 };
 import * as React from "react";
 import React2 from "react";
-import { describe, PropTypes } from "react-desc";
-import styled from "styled-components";
+import { describe, PropTypes } from "@elliemae/ds-utilities";
+import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 const Separator = styled(Grid)`
   border-top: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};

package/dist/esm/MobileSeparator/Separator.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileSeparator/Separator.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst Separator = styled(Grid)`\n  border-top: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};\n  border-left: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};\n`;\n\nconst MobileSeparator = ({ color = ['neutral', '800'], direction = 'horizontal', type = 'solid', margin = 'xs' }) => {\n  const orientation = direction === 'vertical' ? 'height' : 'width';\n  const xORy = direction === 'vertical' ? 'mx' : 'my';\n  const styles = {\n    width: 0,\n    height: 0,\n    [orientation]: '100%',\n    [xORy]: margin,\n    borderType: type,\n    color,\n  };\n  return <Separator {...styles} />;\n};\n\nconst mobileSeparatorProps = {\n  type: PropTypes.oneOf(['solid', 'dashed']).description('Style type of separator').defaultValue('solid'),\n  direction: PropTypes.oneOf(['vertical', 'horizontal'])\n    .description('Direction of the separator')\n    .defaultValue('horizontal'),\n  color: PropTypes.array.description('Color of the separator').defaultValue(['neutral', '800']),\n  margin: PropTypes.oneOf(['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'])\n    .description('Margin of the separator')\n    .defaultValue('xs'),\n};\n\nMobileSeparator.propTypes = mobileSeparatorProps;\nMobileSeparator.displayName = 'MobileSeparator';\nconst MobileSeparatorWithSchema = describe(MobileSeparator);\nMobileSeparatorWithSchema.propTypes = mobileSeparatorProps;\n\nexport { MobileSeparatorWithSchema };\nexport default MobileSeparator;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst Separator = styled(Grid)`\n  border-top: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};\n  border-left: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};\n`;\n\nconst MobileSeparator = ({ color = ['neutral', '800'], direction = 'horizontal', type = 'solid', margin = 'xs' }) => {\n  const orientation = direction === 'vertical' ? 'height' : 'width';\n  const xORy = direction === 'vertical' ? 'mx' : 'my';\n  const styles = {\n    width: 0,\n    height: 0,\n    [orientation]: '100%',\n    [xORy]: margin,\n    borderType: type,\n    color,\n  };\n  return <Separator {...styles} />;\n};\n\nconst mobileSeparatorProps = {\n  type: PropTypes.oneOf(['solid', 'dashed']).description('Style type of separator').defaultValue('solid'),\n  direction: PropTypes.oneOf(['vertical', 'horizontal'])\n    .description('Direction of the separator')\n    .defaultValue('horizontal'),\n  color: PropTypes.array.description('Color of the separator').defaultValue(['neutral', '800']),\n  margin: PropTypes.oneOf(['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'])\n    .description('Margin of the separator')\n    .defaultValue('xs'),\n};\n\nMobileSeparator.propTypes = mobileSeparatorProps;\nMobileSeparator.displayName = 'MobileSeparator';\nconst MobileSeparatorWithSchema = describe(MobileSeparator);\nMobileSeparatorWithSchema.propTypes = mobileSeparatorProps;\n\nexport { MobileSeparatorWithSchema };\nexport default MobileSeparator;\n"],
   "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,YAAY,OAAO,IAAI;AAAA,gBACb,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA,iBAC5E,CAAC,EAAE,OAAO,OAAO,iBAAiB,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA;AAG9F,MAAM,kBAAkB,CAAC,EAAE,QAAQ,CAAC,WAAW,KAAK,GAAG,YAAY,cAAc,OAAO,SAAS,SAAS,WAAW;AACnH,QAAM,cAAc,cAAc,aAAa,WAAW;AAC1D,QAAM,OAAO,cAAc,aAAa,OAAO;AAC/C,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,KACP,cAAc;AAAA,KACd,OAAO;AAAA,IACR,YAAY;AAAA,IACZ;AAAA,EACF;AACA,SAAO,qCAAC,8BAAc,OAAQ;AAChC;AAEA,MAAM,uBAAuB;AAAA,EAC3B,MAAM,UAAU,MAAM,CAAC,SAAS,QAAQ,CAAC,EAAE,YAAY,yBAAyB,EAAE,aAAa,OAAO;AAAA,EACtG,WAAW,UAAU,MAAM,CAAC,YAAY,YAAY,CAAC,EAClD,YAAY,4BAA4B,EACxC,aAAa,YAAY;AAAA,EAC5B,OAAO,UAAU,MAAM,YAAY,wBAAwB,EAAE,aAAa,CAAC,WAAW,KAAK,CAAC;AAAA,EAC5F,QAAQ,UAAU,MAAM,CAAC,OAAO,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAC9D,YAAY,yBAAyB,EACrC,aAAa,IAAI;AACtB;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,SAAS,eAAe;AAC1D,0BAA0B,YAAY;AAGtC,IAAO,oBAAQ;",
   "names": []
 }

package/dist/esm/MobileTimePicker/Input.js CHANGED Viewed

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
 import * as React from "react";
 import React2 from "react";
 import { focus, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 const StyledInput = styled.input`
   input[type=time]& {
     -webkit-appearance: none;

package/dist/esm/MobileTimePicker/Input.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileTimePicker/Input.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { focus, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport styled from 'styled-components';\n\nconst StyledInput = styled.input`\n  input[type=time]& {   \n    -webkit-appearance: none;\n    -moz-appearance: none;\n    -webkit-tap-highlight-color: transparent;\n    appearance: none;\n    color: transparent;\n\n    white-space: nowrap;\n    position: relative;\n    height: ${props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.l)};\n    width: 100%;\n    max-width: calc(100% - 32px);\n    outline: none;\n    box-sizing: border-box;\n    display: flex;\n    background: ${props => props.theme.colors.neutral['000']};\n    padding: 0 ${props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n    z-index: 1;\n    border-radius: 2px;\n    border: solid 1px ${props => props.theme.colors.neutral[200]};\n  }\n\n  input[type=time]&:active, input[type=time]&:focus {\n    ${props => focus(props.theme.colors.brand[700])}\n  }\n\n  &:before {\n    color: ${props =>\n      props.value === ''\n        ? props.theme.colors.neutral['500']\n        : props.theme.colors.neutral['800']};\n    content: '${props =>\n      props.value === '' ? props.placeholder : props['data-displayvalue']}';\n  }\n\n  input[type=time]&::-webkit-datetime-edit, input[type=time]&::-webkit-inner-spin-button, input[type=time]&::-webkit-clear-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n`;\n\nexport const Input = ({ innerRef, ...props }) => (\n  <StyledInput ref={innerRef} {...props} />\n);\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { focus, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { styled } from '@elliemae/ds-system';\n\nconst StyledInput = styled.input`\n  input[type=time]& {   \n    -webkit-appearance: none;\n    -moz-appearance: none;\n    -webkit-tap-highlight-color: transparent;\n    appearance: none;\n    color: transparent;\n\n    white-space: nowrap;\n    position: relative;\n    height: ${props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.l)};\n    width: 100%;\n    max-width: calc(100% - 32px);\n    outline: none;\n    box-sizing: border-box;\n    display: flex;\n    background: ${props => props.theme.colors.neutral['000']};\n    padding: 0 ${props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n    z-index: 1;\n    border-radius: 2px;\n    border: solid 1px ${props => props.theme.colors.neutral[200]};\n  }\n\n  input[type=time]&:active, input[type=time]&:focus {\n    ${props => focus(props.theme.colors.brand[700])}\n  }\n\n  &:before {\n    color: ${props =>\n      props.value === ''\n        ? props.theme.colors.neutral['500']\n        : props.theme.colors.neutral['800']};\n    content: '${props =>\n      props.value === '' ? props.placeholder : props['data-displayvalue']}';\n  }\n\n  input[type=time]&::-webkit-datetime-edit, input[type=time]&::-webkit-inner-spin-button, input[type=time]&::-webkit-clear-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n`;\n\nexport const Input = ({ innerRef, ...props }) => (\n  <StyledInput ref={innerRef} {...props} />\n);\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAUb,WAAS,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMjD,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA,iBACrC,WAAS,yBAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA,wBAG/C,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,MAItD,WAAS,MAAM,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA,aAIrC,WACP,MAAM,UAAU,KACZ,MAAM,MAAM,OAAO,QAAQ,SAC3B,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACrB,WACV,MAAM,UAAU,KAAK,MAAM,cAAc,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS9C,MAAM,QAAQ,CAAC,OAAwB;AAAxB,eAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AACtB,8CAAC;AAAA,IAAY,KAAK;AAAA,KAAc,MAAO;AAAA;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React2, { useRef, useMemo, useEffect } from "react";
-import { PropTypes, describe } from "react-desc";
+import { PropTypes, describe } from "@elliemae/ds-utilities";
 import { DSIconColors } from "@elliemae/ds-icon";
 import { RecentDocuments } from "@elliemae/ds-icons";
 import DSButton from "@elliemae/ds-button";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileTimePicker/MobileTimePicker.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useMemo, useEffect } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { RecentDocuments } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { DSInputGroup } from '@elliemae/ds-form';\nimport { Input } from './Input';\n\nconst DSMobileTimePicker = ({ disabled, value, tabIndex, placeholder, onChange }) => {\n  const inputRef = useRef(null);\n  const valueArr = value.split(':');\n  useEffect(() => {\n    /*\n      necessary if value is being set in mount, \n      otherwise the clear won't work on the first click\n      [SEE input onChange comment]\n    */\n    if (inputRef.current) {\n      inputRef.current.defaultValue = '';\n    }\n  }, [inputRef.current]);\n  const displayValue = useMemo(() => {\n    if (!value || !valueArr[0] || !valueArr[1]) return '';\n    const ampm = valueArr[0] >= 12 ? 'pm' : 'am';\n    const h = valueArr[0] > 12 ? valueArr[0] - 12 : valueArr[0];\n\n    return `${h} : ${valueArr[1]} ${ampm}`;\n  }, [value]);\n\n  return (\n    <DSInputGroup\n      rightAddon={\n        <DSButton\n          aria-label=\"Time Picker Button\"\n          color={!disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL}\n          disabled={disabled}\n          icon={<RecentDocuments />}\n          type=\"button\"\n          buttonType=\"secondary\"\n          onClick={() => {\n            inputRef.current.focus();\n            inputRef.current.click();\n          }}\n        />\n      }\n    >\n      <Input\n        innerRef={inputRef}\n        type=\"time\"\n        data-testid=\"ds-mobile-time-picker\"\n        aria-label=\"Time Picker Input Mask\"\n        disabled={disabled}\n        placeholder={placeholder}\n        tabIndex={tabIndex}\n        value={value}\n        data-displayvalue={displayValue}\n        onChange={(e) => {\n          // https://github.com/facebook/react/issues/8938#issuecomment-360573204\n          const { target } = e.nativeEvent;\n          function iosClearDefault() {\n            target.defaultValue = '';\n          }\n          window.setTimeout(iosClearDefault, 0);\n          onChange(e);\n        }}\n      />\n    </DSInputGroup>\n  );\n};\n\nDSMobileTimePicker.defaultProps = {\n  disabled: false,\n  tabIndex: 0,\n  placeholder: 'HH : MM am',\n  value: '',\n};\n\nconst pickerProps = {\n  /**\n   * defaults to false\n   */\n  disabled: PropTypes.bool.description('disabled prop, defaults to false'),\n  /**\n   * 0 as default\n   */\n  tabIndex: PropTypes.number.description('focus order HTML property, 0 as default'),\n  /**\n   * HH : MM am as default\n   */\n  placeholder: PropTypes.string.description('HH : MM am as default'),\n  /**\n   * onChange handler, receives change event as first argument\n   */\n  onChange: PropTypes.func.description('onChange handler, receives change event as first argument'),\n  /**\n   * HH:MM string representing the time or empty string\n   */\n  value: PropTypes.string.description('HH:MM string representing the time or empty string'),\n};\n\nDSMobileTimePicker.propTypes = pickerProps;\nDSMobileTimePicker.displayName = 'DSMobileTimePicker';\nconst DSMobileTimePickerWithSchema = describe(DSMobileTimePicker).description('Time picker for mobile & tablet');\n\nDSMobileTimePickerWithSchema.propTypes = pickerProps;\n\nexport { DSMobileTimePicker, DSMobileTimePickerWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useMemo, useEffect } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { RecentDocuments } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { DSInputGroup } from '@elliemae/ds-form';\nimport { Input } from './Input';\n\nconst DSMobileTimePicker = ({ disabled, value, tabIndex, placeholder, onChange }) => {\n  const inputRef = useRef(null);\n  const valueArr = value.split(':');\n  useEffect(() => {\n    /*\n      necessary if value is being set in mount, \n      otherwise the clear won't work on the first click\n      [SEE input onChange comment]\n    */\n    if (inputRef.current) {\n      inputRef.current.defaultValue = '';\n    }\n  }, [inputRef.current]);\n  const displayValue = useMemo(() => {\n    if (!value || !valueArr[0] || !valueArr[1]) return '';\n    const ampm = valueArr[0] >= 12 ? 'pm' : 'am';\n    const h = valueArr[0] > 12 ? valueArr[0] - 12 : valueArr[0];\n\n    return `${h} : ${valueArr[1]} ${ampm}`;\n  }, [value]);\n\n  return (\n    <DSInputGroup\n      rightAddon={\n        <DSButton\n          aria-label=\"Time Picker Button\"\n          color={!disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL}\n          disabled={disabled}\n          icon={<RecentDocuments />}\n          type=\"button\"\n          buttonType=\"secondary\"\n          onClick={() => {\n            inputRef.current.focus();\n            inputRef.current.click();\n          }}\n        />\n      }\n    >\n      <Input\n        innerRef={inputRef}\n        type=\"time\"\n        data-testid=\"ds-mobile-time-picker\"\n        aria-label=\"Time Picker Input Mask\"\n        disabled={disabled}\n        placeholder={placeholder}\n        tabIndex={tabIndex}\n        value={value}\n        data-displayvalue={displayValue}\n        onChange={(e) => {\n          // https://github.com/facebook/react/issues/8938#issuecomment-360573204\n          const { target } = e.nativeEvent;\n          function iosClearDefault() {\n            target.defaultValue = '';\n          }\n          window.setTimeout(iosClearDefault, 0);\n          onChange(e);\n        }}\n      />\n    </DSInputGroup>\n  );\n};\n\nDSMobileTimePicker.defaultProps = {\n  disabled: false,\n  tabIndex: 0,\n  placeholder: 'HH : MM am',\n  value: '',\n};\n\nconst pickerProps = {\n  /**\n   * defaults to false\n   */\n  disabled: PropTypes.bool.description('disabled prop, defaults to false'),\n  /**\n   * 0 as default\n   */\n  tabIndex: PropTypes.number.description('focus order HTML property, 0 as default'),\n  /**\n   * HH : MM am as default\n   */\n  placeholder: PropTypes.string.description('HH : MM am as default'),\n  /**\n   * onChange handler, receives change event as first argument\n   */\n  onChange: PropTypes.func.description('onChange handler, receives change event as first argument'),\n  /**\n   * HH:MM string representing the time or empty string\n   */\n  value: PropTypes.string.description('HH:MM string representing the time or empty string'),\n};\n\nDSMobileTimePicker.propTypes = pickerProps;\nDSMobileTimePicker.displayName = 'DSMobileTimePicker';\nconst DSMobileTimePickerWithSchema = describe(DSMobileTimePicker).description('Time picker for mobile & tablet');\n\nDSMobileTimePickerWithSchema.propTypes = pickerProps;\n\nexport { DSMobileTimePicker, DSMobileTimePickerWithSchema };\n"],
   "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,qBAAqB,CAAC,EAAE,UAAU,OAAO,UAAU,aAAa,eAAe;AACnF,QAAM,WAAW,OAAO,IAAI;AAC5B,QAAM,WAAW,MAAM,MAAM,GAAG;AAChC,YAAU,MAAM;AAMd,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,eAAe;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,SAAS,OAAO,CAAC;AACrB,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,CAAC,SAAS,CAAC,SAAS,MAAM,CAAC,SAAS;AAAI,aAAO;AACnD,UAAM,OAAO,SAAS,MAAM,KAAK,OAAO;AACxC,UAAM,IAAI,SAAS,KAAK,KAAK,SAAS,KAAK,KAAK,SAAS;AAEzD,WAAO,GAAG,OAAO,SAAS,MAAM;AAAA,EAClC,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,qCAAC;AAAA,IACC,YACE,qCAAC;AAAA,MACC,cAAW;AAAA,MACX,OAAO,CAAC,WAAW,aAAa,UAAU,aAAa;AAAA,MACvD;AAAA,MACA,MAAM,qCAAC,qBAAgB;AAAA,MACvB,MAAK;AAAA,MACL,YAAW;AAAA,MACX,SAAS,MAAM;AACb,iBAAS,QAAQ,MAAM;AACvB,iBAAS,QAAQ,MAAM;AAAA,MACzB;AAAA,KACF;AAAA,KAGF,qCAAC;AAAA,IACC,UAAU;AAAA,IACV,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,cAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAmB;AAAA,IACnB,UAAU,CAAC,MAAM;AAEf,YAAM,EAAE,WAAW,EAAE;AACrB,iCAA2B;AACzB,eAAO,eAAe;AAAA,MACxB;AACA,aAAO,WAAW,iBAAiB,CAAC;AACpC,eAAS,CAAC;AAAA,IACZ;AAAA,GACF,CACF;AAEJ;AAEA,mBAAmB,eAAe;AAAA,EAChC,UAAU;AAAA,EACV,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAO;AACT;AAEA,MAAM,cAAc;AAAA,EAIlB,UAAU,UAAU,KAAK,YAAY,kCAAkC;AAAA,EAIvE,UAAU,UAAU,OAAO,YAAY,yCAAyC;AAAA,EAIhF,aAAa,UAAU,OAAO,YAAY,uBAAuB;AAAA,EAIjE,UAAU,UAAU,KAAK,YAAY,2DAA2D;AAAA,EAIhG,OAAO,UAAU,OAAO,YAAY,oDAAoD;AAC1F;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB,EAAE,YAAY,iCAAiC;AAE/G,6BAA6B,YAAY;",
   "names": []
 }

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

@@ -33,7 +33,7 @@ import * as React from "react";
 import React2, { useState, useCallback } from "react";
 import { noop } from "lodash";
 import PropTypes from "prop-types";
-import styled from "styled-components";
+import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { withTheme } from "@elliemae/ds-system";
 const StyledContainer = styled(Grid)`

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileTouchable/MobileTouchable.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback } from 'react';\nimport { noop } from 'lodash';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { withTheme } from '@elliemae/ds-system';\n\nconst StyledContainer = styled(Grid)`\n  cursor: pointer;\n  background: ${(props) => (props.touching ? props.theme.colors.brand['100'] : props.theme.colors.neutral['000'])};\n`;\n\nconst MobileTouchable = ({\n  children,\n  onClick = noop,\n  theme,\n  dataTestid = 'mobile-touchable',\n  render,\n  ...gridProps\n}) => {\n  const [touching, setTouching] = useState(false);\n  const handleStart = useCallback(() => setTouching(true));\n  const handleEnd = useCallback(() => setTouching(false));\n  return (\n    <StyledContainer\n      {...gridProps}\n      touching={touching}\n      onClick={onClick}\n      onTouchStart={handleStart}\n      onTouchEnd={handleEnd}\n      data-testid={dataTestid}\n    >\n      {children || render(gridProps)}\n    </StyledContainer>\n  );\n};\n\nMobileTouchable.propTypes = {\n  onClick: PropTypes.func,\n  children: PropTypes.any,\n  render: PropTypes.func,\n  theme: PropTypes.any,\n  dataTestid: PropTypes.string,\n};\n\nconst DSMobileTouchable = withTheme(MobileTouchable);\n\nexport { DSMobileTouchable };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback } from 'react';\nimport { noop } from 'lodash';\nimport PropTypes from 'prop-types';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { withTheme } from '@elliemae/ds-system';\n\nconst StyledContainer = styled(Grid)`\n  cursor: pointer;\n  background: ${(props) => (props.touching ? props.theme.colors.brand['100'] : props.theme.colors.neutral['000'])};\n`;\n\nconst MobileTouchable = ({\n  children,\n  onClick = noop,\n  theme,\n  dataTestid = 'mobile-touchable',\n  render,\n  ...gridProps\n}) => {\n  const [touching, setTouching] = useState(false);\n  const handleStart = useCallback(() => setTouching(true));\n  const handleEnd = useCallback(() => setTouching(false));\n  return (\n    <StyledContainer\n      {...gridProps}\n      touching={touching}\n      onClick={onClick}\n      onTouchStart={handleStart}\n      onTouchEnd={handleEnd}\n      data-testid={dataTestid}\n    >\n      {children || render(gridProps)}\n    </StyledContainer>\n  );\n};\n\nMobileTouchable.propTypes = {\n  onClick: PropTypes.func,\n  children: PropTypes.any,\n  render: PropTypes.func,\n  theme: PropTypes.any,\n  dataTestid: PropTypes.string,\n};\n\nconst DSMobileTouchable = withTheme(MobileTouchable);\n\nexport { DSMobileTouchable };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA,gBAEnB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,SAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG1G,MAAM,kBAAkB,CAAC,OAOnB;AAPmB,eACvB;AAAA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,aAAa;AAAA,IACb;AAAA,MALuB,IAMpB,sBANoB,IAMpB;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,CAAC,UAAU,eAAe,SAAS,KAAK;AAC9C,QAAM,cAAc,YAAY,MAAM,YAAY,IAAI,CAAC;AACvD,QAAM,YAAY,YAAY,MAAM,YAAY,KAAK,CAAC;AACtD,SACE,qCAAC,kDACK,YADL;AAAA,IAEC;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,eAAa;AAAA,MAEZ,YAAY,OAAO,SAAS,CAC/B;AAEJ;AAEA,gBAAgB,YAAY;AAAA,EAC1B,SAAS,UAAU;AAAA,EACnB,UAAU,UAAU;AAAA,EACpB,QAAQ,UAAU;AAAA,EAClB,OAAO,UAAU;AAAA,EACjB,YAAY,UAAU;AACxB;AAEA,MAAM,oBAAoB,UAAU,eAAe;",
   "names": []
 }

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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";