npm - @elliemae/ds-mobile - Versions diffs - 3.1.0-next.0 → 3.1.0-next.11 - Mend

@elliemae/ds-mobile 3.1.0-next.0 → 3.1.0-next.11

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

Files changed (239) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MobileSeparator/Separator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAoC;AACpC,+BAAmB;AACnB,qBAAqB;AAErB,MAAM,YAAY,sCAAO,mBAAI;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,mDAAC,8BAAc,OAAQ;AAChC;AAEA,MAAM,uBAAuB;AAAA,EAC3B,MAAM,4BAAU,MAAM,CAAC,SAAS,QAAQ,CAAC,EAAE,YAAY,yBAAyB,EAAE,aAAa,OAAO;AAAA,EACtG,WAAW,4BAAU,MAAM,CAAC,YAAY,YAAY,CAAC,EAClD,YAAY,4BAA4B,EACxC,aAAa,YAAY;AAAA,EAC5B,OAAO,4BAAU,MAAM,YAAY,wBAAwB,EAAE,aAAa,CAAC,WAAW,KAAK,CAAC;AAAA,EAC5F,QAAQ,4BAAU,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,gCAAS,eAAe;AAC1D,0BAA0B,YAAY;AAGtC,IAAO,oBAAQ;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAoC;AACpC,uBAAuB;AACvB,qBAAqB;AAErB,MAAM,YAAY,6BAAO,mBAAI;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,mDAAC,8BAAc,OAAQ;AAChC;AAEA,MAAM,uBAAuB;AAAA,EAC3B,MAAM,8BAAU,MAAM,CAAC,SAAS,QAAQ,CAAC,EAAE,YAAY,yBAAyB,EAAE,aAAa,OAAO;AAAA,EACtG,WAAW,8BAAU,MAAM,CAAC,YAAY,YAAY,CAAC,EAClD,YAAY,4BAA4B,EACxC,aAAa,YAAY;AAAA,EAC5B,OAAO,8BAAU,MAAM,YAAY,wBAAwB,EAAE,aAAa,CAAC,WAAW,KAAK,CAAC;AAAA,EAC5F,QAAQ,8BAAU,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,kCAAS,eAAe;AAC1D,0BAA0B,YAAY;AAGtC,IAAO,oBAAQ;",
   "names": []
 }

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

@@ -52,8 +52,8 @@ module.exports = __toCommonJS(Input_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_styled_components = __toESM(require("styled-components"));
-const StyledInput = import_styled_components.default.input`
+var import_ds_system2 = require("@elliemae/ds-system");
+const StyledInput = import_ds_system2.styled.input`
   input[type=time]& {
     -webkit-appearance: none;
     -moz-appearance: none;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MobileTimePicker/Input.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,uBAAgD;AAChD,+BAAmB;AAEnB,MAAM,cAAc,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAUb,WAAS,+CAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMjD,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA,iBACrC,WAAS,+CAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA,wBAG/C,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,MAItD,WAAS,4BAAM,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,4DAAC;AAAA,IAAY,KAAK;AAAA,KAAc,MAAO;AAAA;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,uBAAgD;AAChD,wBAAuB;AAEvB,MAAM,cAAc,yBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAUb,WAAS,+CAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMjD,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA,iBACrC,WAAS,+CAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA,wBAG/C,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,MAItD,WAAS,4BAAM,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,4DAAC;AAAA,IAAY,KAAK;AAAA,KAAc,MAAO;AAAA;",
   "names": []
 }

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

@@ -26,7 +26,7 @@ __export(MobileTimePicker_exports, {
 module.exports = __toCommonJS(MobileTimePicker_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_icon = require("@elliemae/ds-icon");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_button = __toESM(require("@elliemae/ds-button"));
@@ -87,14 +87,14 @@ DSMobileTimePicker.defaultProps = {
   value: ""
 };
 const pickerProps = {
-  disabled: import_react_desc.PropTypes.bool.description("disabled prop, defaults to false"),
-  tabIndex: import_react_desc.PropTypes.number.description("focus order HTML property, 0 as default"),
-  placeholder: import_react_desc.PropTypes.string.description("HH : MM am as default"),
-  onChange: import_react_desc.PropTypes.func.description("onChange handler, receives change event as first argument"),
-  value: import_react_desc.PropTypes.string.description("HH:MM string representing the time or empty string")
+  disabled: import_ds_utilities.PropTypes.bool.description("disabled prop, defaults to false"),
+  tabIndex: import_ds_utilities.PropTypes.number.description("focus order HTML property, 0 as default"),
+  placeholder: import_ds_utilities.PropTypes.string.description("HH : MM am as default"),
+  onChange: import_ds_utilities.PropTypes.func.description("onChange handler, receives change event as first argument"),
+  value: import_ds_utilities.PropTypes.string.description("HH:MM string representing the time or empty string")
 };
 DSMobileTimePicker.propTypes = pickerProps;
 DSMobileTimePicker.displayName = "DSMobileTimePicker";
-const DSMobileTimePickerWithSchema = (0, import_react_desc.describe)(DSMobileTimePicker).description("Time picker for mobile & tablet");
+const DSMobileTimePickerWithSchema = (0, import_ds_utilities.describe)(DSMobileTimePicker).description("Time picker for mobile & tablet");
 DSMobileTimePickerWithSchema.propTypes = pickerProps;
 //# sourceMappingURL=MobileTimePicker.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MobileTimePicker/MobileTimePicker.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkD;AAClD,wBAAoC;AACpC,qBAA6B;AAC7B,sBAAgC;AAChC,uBAAqB;AACrB,qBAA6B;AAC7B,mBAAsB;AAEtB,MAAM,qBAAqB,CAAC,EAAE,UAAU,OAAO,UAAU,aAAa,eAAe;AACnF,QAAM,WAAW,yBAAO,IAAI;AAC5B,QAAM,WAAW,MAAM,MAAM,GAAG;AAChC,8BAAU,MAAM;AAMd,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,eAAe;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,SAAS,OAAO,CAAC;AACrB,QAAM,eAAe,0BAAQ,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,mDAAC;AAAA,IACC,YACE,mDAAC;AAAA,MACC,cAAW;AAAA,MACX,OAAO,CAAC,WAAW,4BAAa,UAAU,4BAAa;AAAA,MACvD;AAAA,MACA,MAAM,mDAAC,qCAAgB;AAAA,MACvB,MAAK;AAAA,MACL,YAAW;AAAA,MACX,SAAS,MAAM;AACb,iBAAS,QAAQ,MAAM;AACvB,iBAAS,QAAQ,MAAM;AAAA,MACzB;AAAA,KACF;AAAA,KAGF,mDAAC;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,4BAAU,KAAK,YAAY,kCAAkC;AAAA,EAIvE,UAAU,4BAAU,OAAO,YAAY,yCAAyC;AAAA,EAIhF,aAAa,4BAAU,OAAO,YAAY,uBAAuB;AAAA,EAIjE,UAAU,4BAAU,KAAK,YAAY,2DAA2D;AAAA,EAIhG,OAAO,4BAAU,OAAO,YAAY,oDAAoD;AAC1F;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,gCAAS,kBAAkB,EAAE,YAAY,iCAAiC;AAE/G,6BAA6B,YAAY;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkD;AAClD,0BAAoC;AACpC,qBAA6B;AAC7B,sBAAgC;AAChC,uBAAqB;AACrB,qBAA6B;AAC7B,mBAAsB;AAEtB,MAAM,qBAAqB,CAAC,EAAE,UAAU,OAAO,UAAU,aAAa,eAAe;AACnF,QAAM,WAAW,yBAAO,IAAI;AAC5B,QAAM,WAAW,MAAM,MAAM,GAAG;AAChC,8BAAU,MAAM;AAMd,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,eAAe;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,SAAS,OAAO,CAAC;AACrB,QAAM,eAAe,0BAAQ,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,mDAAC;AAAA,IACC,YACE,mDAAC;AAAA,MACC,cAAW;AAAA,MACX,OAAO,CAAC,WAAW,4BAAa,UAAU,4BAAa;AAAA,MACvD;AAAA,MACA,MAAM,mDAAC,qCAAgB;AAAA,MACvB,MAAK;AAAA,MACL,YAAW;AAAA,MACX,SAAS,MAAM;AACb,iBAAS,QAAQ,MAAM;AACvB,iBAAS,QAAQ,MAAM;AAAA,MACzB;AAAA,KACF;AAAA,KAGF,mDAAC;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,8BAAU,KAAK,YAAY,kCAAkC;AAAA,EAIvE,UAAU,8BAAU,OAAO,YAAY,yCAAyC;AAAA,EAIhF,aAAa,8BAAU,OAAO,YAAY,uBAAuB;AAAA,EAIjE,UAAU,8BAAU,KAAK,YAAY,2DAA2D;AAAA,EAIhG,OAAO,8BAAU,OAAO,YAAY,oDAAoD;AAC1F;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,kCAAS,kBAAkB,EAAE,YAAY,iCAAiC;AAE/G,6BAA6B,YAAY;",
   "names": []
 }

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

@@ -56,10 +56,10 @@ var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_lodash = require("lodash");
 var import_prop_types = __toESM(require("prop-types"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_system = require("@elliemae/ds-system");
-const StyledContainer = (0, import_styled_components.default)(import_ds_grid.Grid)`
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_system2 = require("@elliemae/ds-system");
+const StyledContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   cursor: pointer;
   background: ${(props) => props.touching ? props.theme.colors.brand["100"] : props.theme.colors.neutral["000"]};
 `;
@@ -95,5 +95,5 @@ MobileTouchable.propTypes = {
   theme: import_prop_types.default.any,
   dataTestid: import_prop_types.default.string
 };
-const DSMobileTouchable = (0, import_ds_system.withTheme)(MobileTouchable);
+const DSMobileTouchable = (0, import_ds_system2.withTheme)(MobileTouchable);
 //# sourceMappingURL=MobileTouchable.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MobileTouchable/MobileTouchable.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA6C;AAC7C,oBAAqB;AACrB,wBAAsB;AACtB,+BAAmB;AACnB,qBAAqB;AACrB,uBAA0B;AAE1B,MAAM,kBAAkB,sCAAO,mBAAI;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,2BAAS,KAAK;AAC9C,QAAM,cAAc,8BAAY,MAAM,YAAY,IAAI,CAAC;AACvD,QAAM,YAAY,8BAAY,MAAM,YAAY,KAAK,CAAC;AACtD,SACE,mDAAC,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,0BAAU;AAAA,EACnB,UAAU,0BAAU;AAAA,EACpB,QAAQ,0BAAU;AAAA,EAClB,OAAO,0BAAU;AAAA,EACjB,YAAY,0BAAU;AACxB;AAEA,MAAM,oBAAoB,gCAAU,eAAe;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA6C;AAC7C,oBAAqB;AACrB,wBAAsB;AACtB,uBAAuB;AACvB,qBAAqB;AACrB,wBAA0B;AAE1B,MAAM,kBAAkB,6BAAO,mBAAI;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,2BAAS,KAAK;AAC9C,QAAM,cAAc,8BAAY,MAAM,YAAY,IAAI,CAAC;AACvD,QAAM,YAAY,8BAAY,MAAM,YAAY,KAAK,CAAC;AACtD,SACE,mDAAC,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,0BAAU;AAAA,EACnB,UAAU,0BAAU;AAAA,EACpB,QAAQ,0BAAU;AAAA,EAClB,OAAO,0BAAU;AAAA,EACjB,YAAY,0BAAU;AACxB;AAEA,MAAM,oBAAoB,iCAAU,eAAe;",
   "names": []
 }

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

@@ -43,7 +43,7 @@ __export(Modal_exports, {
 module.exports = __toCommonJS(Modal_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_lodash = require("lodash");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_icons = require("@elliemae/ds-icons");
@@ -127,23 +127,23 @@ const Modal = ({
   })))))));
 };
 const modalProps = {
-  isOpen: import_react_desc.PropTypes.bool.description("Wheter the modal is open or closed").defaultValue(false),
-  zIndex: import_react_desc.PropTypes.number.description("z-index value").defaultValue(1),
-  title: import_react_desc.PropTypes.string.description("Modal s title").isRequired,
-  description: import_react_desc.PropTypes.string.description("Modal s content").isRequired,
-  onClose: import_react_desc.PropTypes.func.description("Function executed when the modal closes"),
-  showSecondaryAction: import_react_desc.PropTypes.bool.description("Wheter to show secondary action button or not").defaultValue(true),
-  secondaryActionProps: import_react_desc.PropTypes.shape({
-    onClick: import_react_desc.PropTypes.func,
-    labelText: import_react_desc.PropTypes.string
+  isOpen: import_ds_utilities.PropTypes.bool.description("Wheter the modal is open or closed").defaultValue(false),
+  zIndex: import_ds_utilities.PropTypes.number.description("z-index value").defaultValue(1),
+  title: import_ds_utilities.PropTypes.string.description("Modal s title").isRequired,
+  description: import_ds_utilities.PropTypes.string.description("Modal s content").isRequired,
+  onClose: import_ds_utilities.PropTypes.func.description("Function executed when the modal closes"),
+  showSecondaryAction: import_ds_utilities.PropTypes.bool.description("Wheter to show secondary action button or not").defaultValue(true),
+  secondaryActionProps: import_ds_utilities.PropTypes.shape({
+    onClick: import_ds_utilities.PropTypes.func,
+    labelText: import_ds_utilities.PropTypes.string
   }).description("Secondary action props"),
-  primaryActionProps: import_react_desc.PropTypes.shape({
-    onClick: import_react_desc.PropTypes.func,
-    labelText: import_react_desc.PropTypes.string
+  primaryActionProps: import_ds_utilities.PropTypes.shape({
+    onClick: import_ds_utilities.PropTypes.func,
+    labelText: import_ds_utilities.PropTypes.string
   }).description("Primary action props")
 };
 Modal.propTypes = modalProps;
 Modal.displayName = "Modal";
-const ModalWithSchema = (0, import_react_desc.describe)(Modal);
+const ModalWithSchema = (0, import_ds_utilities.describe)(Modal);
 ModalWithSchema.propTypes = modalProps;
 //# sourceMappingURL=Modal.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/Modal/Modal.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { noop } from 'lodash';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { useTheme } from '@elliemae/ds-system';\nimport { ModalPosition, ModalBox, BackShadow, ModalIcon, ModalTitle, ModalDescription, BodyFix } from './styled';\n\nconst Modal = ({\n  zIndex = 1,\n  title = '',\n  description = '',\n  onClose = noop,\n  showSecondaryAction = true,\n  secondaryActionProps = {\n    onClick: noop,\n    labelText: 'Cancel',\n  },\n  primaryActionProps = {\n    onClick: noop,\n    labelText: 'Accept',\n  },\n  isOpen = false,\n}) => {\n  const theme = useTheme();\n  if (!isOpen) return null;\n  return (\n    <>\n      <BodyFix isOpen={isOpen} />\n      <BackShadow onClick={onClose} zIndex={zIndex} />\n      <ModalPosition zIndex={zIndex} cols={['auto']}>\n        <ModalBox\n          maxHeight={`${window.innerHeight * 0.75}px`}\n          rows={[1, '80px']}\n          style={{\n            overflow: 'hidden',\n          }}\n        >\n          <Grid\n            pl=\"xs\"\n            pr=\"xs\"\n            style={{\n              overflow: 'hidden',\n            }}\n          >\n            <Grid\n              rows={['auto', 'auto', 1]}\n              style={{\n                overflow: 'hidden',\n              }}\n            >\n              <ModalIcon>\n                <WarningTriangle size=\"xxl\" />\n              </ModalIcon>\n              <ModalTitle data-testid=\"modal-title\">{title}</ModalTitle>\n              <ModalDescription\n                data-testid=\"modal-desc\"\n                style={{\n                  overflow: 'auto',\n                }}\n              >\n                {description}\n              </ModalDescription>\n            </Grid>\n          </Grid>\n          <Grid pt=\"24px\">\n            <Grid\n              pl=\"xs\"\n              pr=\"xs\"\n              cols={showSecondaryAction ? [1, 1] : [1]}\n              gutter=\"xs\"\n              justifyContent=\"center\"\n              alignItems=\"center\"\n              style={{\n                borderTop: `1px solid ${theme.colors.neutral[100]}`,\n              }}\n            >\n              {showSecondaryAction && (\n                <DSButton\n                  {...secondaryActionProps}\n                  labelText={secondaryActionProps.labelText || ' Cancel'}\n                  buttonType=\"secondary\"\n                  data-testid=\"modal-secondary-btn\"\n                />\n              )}\n              <DSButton\n                labelText={primaryActionProps.labelText || ' Accept'}\n                {...primaryActionProps}\n                buttonType=\"primary\"\n                data-testid=\"modal-primary-btn\"\n              />\n            </Grid>\n          </Grid>\n        </ModalBox>\n      </ModalPosition>\n    </>\n  );\n};\n\nconst modalProps = {\n  isOpen: PropTypes.bool.description('Wheter the modal is open or closed').defaultValue(false),\n  zIndex: PropTypes.number.description('z-index value').defaultValue(1),\n  title: PropTypes.string.description('Modal s title').isRequired,\n  description: PropTypes.string.description('Modal s content').isRequired,\n  onClose: PropTypes.func.description('Function executed when the modal closes'),\n  showSecondaryAction: PropTypes.bool.description('Wheter to show secondary action button or not').defaultValue(true),\n  secondaryActionProps: PropTypes.shape({\n    onClick: PropTypes.func,\n    labelText: PropTypes.string,\n  }).description('Secondary action props'),\n  primaryActionProps: PropTypes.shape({\n    onClick: PropTypes.func,\n    labelText: PropTypes.string,\n  }).description('Primary action props'),\n};\n\nModal.propTypes = modalProps;\nModal.displayName = 'Modal';\nconst ModalWithSchema = describe(Modal);\nModalWithSchema.propTypes = modalProps;\n\nexport { Modal, ModalWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -31,20 +31,20 @@ __export(styled_exports, {
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_styled_components = __toESM(require("styled-components"));
 var import_ds_system = require("@elliemae/ds-system");
-const BodyFix = import_ds_system.createGlobalStyle`
+var import_ds_system2 = require("@elliemae/ds-system");
+const BodyFix = import_ds_system2.createGlobalStyle`
     body{
         ${(props) => props.isOpen ? "overflow: hidden;" : ""};
     }
 `;
-const ModalBox = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const ModalBox = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   width: 100%;
   background: ${(props) => props.theme.colors.neutral["000"]};
   max-height: ${(props) => props.maxHeight};
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
 `;
-const ModalPosition = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const ModalPosition = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   z-index: ${(props) => props.zIndex};
   background: ${(props) => props.theme.colors.neutral["000"]};
   position: absolute;
@@ -52,7 +52,7 @@ const ModalPosition = (0, import_styled_components.default)(import_ds_grid.Grid)
   width: 80%;
   left: 10%;
 `;
-const BackShadow = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const BackShadow = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   z-index: ${(props) => props.zIndex};
   position: fixed;
   top: 0;
@@ -62,7 +62,7 @@ const BackShadow = (0, import_styled_components.default)(import_ds_grid.Grid)`
   background: rgba(0, 0, 0, 0.6);
   overflow: hidden;
 `;
-const ModalIcon = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const ModalIcon = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   padding-top: 24px;
   justify-content: center;
   span.em-ds-icon svg,
@@ -70,14 +70,14 @@ const ModalIcon = (0, import_styled_components.default)(import_ds_grid.Grid)`
     fill: ${(props) => props.theme.colors.warning[600]};
   }
 `;
-const ModalTitle = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const ModalTitle = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   padding-top: 24px;
   font-size: 22px;
   font-weight: 600;
   color: ${(props) => props.theme.colors.neutral[600]};
   text-align: center;
 `;
-const ModalDescription = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const ModalDescription = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   padding-top: ${(props) => props.theme.space.xxs};
   font-size: 16px;
   font-weight: 400;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/Modal/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AACrB,+BAAmB;AACnB,uBAAkC;AAE3B,MAAM,UAAU;AAAA;AAAA,UAEb,CAAC,UAAW,MAAM,SAAS,sBAAsB;AAAA;AAAA;AAGpD,MAAM,WAAW,sCAAO,mBAAI;AAAA;AAAA,gBAEnB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACtC,CAAC,UAAU,MAAM;AAAA;AAAA;AAG1B,MAAM,gBAAgB,sCAAO,mBAAI;AAAA,aAC3B,CAAC,UAAU,MAAM;AAAA,gBACd,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/C,MAAM,aAAa,sCAAO,mBAAI;AAAA,aACxB,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUvB,MAAM,YAAY,sCAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA,YAKxB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI3C,MAAM,aAAa,sCAAO,mBAAI;AAAA;AAAA;AAAA;AAAA,WAI1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAG1C,MAAM,mBAAmB,sCAAO,mBAAI;AAAA,iBAC1B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,WAGnC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AACrB,uBAAuB;AACvB,wBAAkC;AAE3B,MAAM,UAAU;AAAA;AAAA,UAEb,CAAC,UAAW,MAAM,SAAS,sBAAsB;AAAA;AAAA;AAGpD,MAAM,WAAW,6BAAO,mBAAI;AAAA;AAAA,gBAEnB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACtC,CAAC,UAAU,MAAM;AAAA;AAAA;AAG1B,MAAM,gBAAgB,6BAAO,mBAAI;AAAA,aAC3B,CAAC,UAAU,MAAM;AAAA,gBACd,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/C,MAAM,aAAa,6BAAO,mBAAI;AAAA,aACxB,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUvB,MAAM,YAAY,6BAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA,YAKxB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI3C,MAAM,aAAa,6BAAO,mBAAI;AAAA;AAAA;AAAA;AAAA,WAI1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAG1C,MAAM,mBAAmB,6BAAO,mBAAI;AAAA,iBAC1B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,WAGnC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;",
   "names": []
 }

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

@@ -26,35 +26,35 @@ module.exports = __toCommonJS(PageFilter_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_prop_types = __toESM(require("prop-types"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_system = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_system2 = require("@elliemae/ds-system");
 var import_FullPageContainer = require("../FullPageContainer");
-const Header = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const Header = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   border-bottom: 1px solid ${(props) => props.theme.colors.neutral["300"]};
 `;
-const ButtonSlot = import_styled_components.default.div`
+const ButtonSlot = import_ds_system.styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
 `;
-const Title = import_styled_components.default.div`
+const Title = import_ds_system.styled.div`
   display: flex;
   justify-content: flex-start;
   align-items: center;
   font-size: 22px;
 `;
-const BreadCrumb = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const BreadCrumb = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   align-items: flex-end;
   font-size: 16px;
   color: ${(props) => props.theme.colors.neutral[500]};
 `;
-const Body = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const Body = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   margin: 0 auto;
   width: 100%;
   overflow: auto;
 `;
-const Footer = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const Footer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   display: flex;
   justify-content: space-around;
   align-items: center;
@@ -75,18 +75,18 @@ const PageFilter = ({
   rightProp = null,
   footerButton = null
 }) => {
-  const theme = (0, import_ds_system.useTheme)();
+  const theme = (0, import_ds_system2.useTheme)();
   const headerDimension = theme.space.l;
   const rows = [headerDimension, 1];
   if (footerButton)
-    rows.push((0, import_ds_system.op)("*", (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xl), 1.167));
+    rows.push((0, import_ds_system2.op)("*", (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xl), 1.167));
   const cols = ["auto"];
   if (leftProp)
     cols.unshift(headerDimension);
   if (rightProp)
     cols.push(headerDimension);
   const bodyStyle = {
-    maxWidth: (0, import_ds_system.op)("*", (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xxl), 6.25)
+    maxWidth: (0, import_ds_system2.op)("*", (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xxl), 6.25)
   };
   return /* @__PURE__ */ import_react.default.createElement(import_FullPageContainer.DSFullPageContainer, {
     rows
@@ -94,13 +94,13 @@ const PageFilter = ({
     cols,
     height: headerDimension
   }, leftProp && /* @__PURE__ */ import_react.default.createElement(ButtonSlot, {
-    ml: (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s)
+    ml: (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s)
   }, leftProp), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, breadCrumb && /* @__PURE__ */ import_react.default.createElement(BreadCrumb, {
     pl: !leftProp && "1rem"
   }, breadCrumb), /* @__PURE__ */ import_react.default.createElement(Title, {
     style: leftProp ? {} : { paddingLeft: "1rem" }
   }, pageTitle)), rightProp && /* @__PURE__ */ import_react.default.createElement(ButtonSlot, {
-    ml: (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s)
+    ml: (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s)
   }, rightProp)), /* @__PURE__ */ import_react.default.createElement(Body, {
     style: bodyStyle
   }, children), footerButton && /* @__PURE__ */ import_react.default.createElement(Footer, null, footerButton));

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/PageFilter/PageFilter.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,+BAAmB;AACnB,qBAAqB;AACrB,uBAAuD;AACvD,+BAAoC;AAEpC,MAAM,SAAS,sCAAO,mBAAI;AAAA,6BACG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAEnE,MAAM,aAAa,iCAAO;AAAA;AAAA;AAAA;AAAA;AAK1B,MAAM,QAAQ,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAMrB,MAAM,aAAa,sCAAO,mBAAI;AAAA;AAAA;AAAA,WAGnB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAEjD,MAAM,OAAO,sCAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAKxB,MAAM,SAAS,sCAAO,mBAAI;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,+BAAS;AACvB,QAAM,kBAAkB,MAAM,MAAM;AACpC,QAAM,OAAO,CAAC,iBAAiB,CAAC;AAChC,MAAI;AAAc,SAAK,KAAK,yBAAG,KAAK,+CAAyB,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,yBAAG,KAAK,+CAAyB,MAAM,MAAM,GAAG,GAAG,IAAI;AAAA,EACnE;AACA,SACE,mDAAC;AAAA,IAAoB;AAAA,KACnB,mDAAC;AAAA,IAAO;AAAA,IAAY,QAAQ;AAAA,KACzB,YAAY,mDAAC;AAAA,IAAW,IAAI,+CAAyB,MAAM,MAAM,CAAC;AAAA,KAAI,QAAS,GAChF,mDAAC,2BACE,cAAc,mDAAC;AAAA,IAAW,IAAI,CAAC,YAAY;AAAA,KAAS,UAAW,GAChE,mDAAC;AAAA,IAAM,OAAO,WAAW,CAAC,IAAI,EAAE,aAAa,OAAO;AAAA,KAAI,SAAU,CACpE,GACC,aAAa,mDAAC;AAAA,IAAW,IAAI,+CAAyB,MAAM,MAAM,CAAC;AAAA,KAAI,SAAU,CACpF,GAEA,mDAAC;AAAA,IAAK,OAAO;AAAA,KAAY,QAAS,GACjC,gBAAgB,mDAAC,cAAQ,YAAa,CACzC;AAEJ;AAEA,WAAW,YAAY;AAAA,EAIrB,WAAW,0BAAU;AAAA,EAIrB,UAAU,0BAAU;AAAA,EAIpB,WAAW,0BAAU;AAAA,EAIrB,UAAU,0BAAU;AAAA,EAIpB,cAAc,0BAAU;AAAA,EAIxB,YAAY,0BAAU;AACxB;AAEA,MAAM,eAAe;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,uBAAuB;AACvB,qBAAqB;AACrB,wBAAuD;AACvD,+BAAoC;AAEpC,MAAM,SAAS,6BAAO,mBAAI;AAAA,6BACG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAEnE,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA;AAK1B,MAAM,QAAQ,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAMrB,MAAM,aAAa,6BAAO,mBAAI;AAAA;AAAA;AAAA,WAGnB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAEjD,MAAM,OAAO,6BAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAKxB,MAAM,SAAS,6BAAO,mBAAI;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,gCAAS;AACvB,QAAM,kBAAkB,MAAM,MAAM;AACpC,QAAM,OAAO,CAAC,iBAAiB,CAAC;AAChC,MAAI;AAAc,SAAK,KAAK,0BAAG,KAAK,gDAAyB,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,0BAAG,KAAK,gDAAyB,MAAM,MAAM,GAAG,GAAG,IAAI;AAAA,EACnE;AACA,SACE,mDAAC;AAAA,IAAoB;AAAA,KACnB,mDAAC;AAAA,IAAO;AAAA,IAAY,QAAQ;AAAA,KACzB,YAAY,mDAAC;AAAA,IAAW,IAAI,gDAAyB,MAAM,MAAM,CAAC;AAAA,KAAI,QAAS,GAChF,mDAAC,2BACE,cAAc,mDAAC;AAAA,IAAW,IAAI,CAAC,YAAY;AAAA,KAAS,UAAW,GAChE,mDAAC;AAAA,IAAM,OAAO,WAAW,CAAC,IAAI,EAAE,aAAa,OAAO;AAAA,KAAI,SAAU,CACpE,GACC,aAAa,mDAAC;AAAA,IAAW,IAAI,gDAAyB,MAAM,MAAM,CAAC;AAAA,KAAI,SAAU,CACpF,GAEA,mDAAC;AAAA,IAAK,OAAO;AAAA,KAAY,QAAS,GACjC,gBAAgB,mDAAC,cAAQ,YAAa,CACzC;AAEJ;AAEA,WAAW,YAAY;AAAA,EAIrB,WAAW,0BAAU;AAAA,EAIrB,UAAU,0BAAU;AAAA,EAIpB,WAAW,0BAAU;AAAA,EAIrB,UAAU,0BAAU;AAAA,EAIpB,cAAc,0BAAU;AAAA,EAIxB,YAAY,0BAAU;AACxB;AAEA,MAAM,eAAe;",
   "names": []
 }

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

@@ -28,21 +28,21 @@ var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_prop_types = __toESM(require("prop-types"));
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_styled_components = __toESM(require("styled-components"));
 var import_ds_system = require("@elliemae/ds-system");
+var import_ds_system2 = require("@elliemae/ds-system");
 var import_FullPageContainer = require("../FullPageContainer");
-const Body = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const Body = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   margin: 0 auto;
   width: 100%;
   @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
-    ${({ theme }) => `width: ${(0, import_ds_system.op)("*", (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xxl), 6.25)};`}
+    ${({ theme }) => `width: ${(0, import_ds_system2.op)("*", (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xxl), 6.25)};`}
   }
 `;
 const PageForm = ({ header = null, body = null, footer = null }) => {
-  const theme = (0, import_ds_system.useTheme)();
+  const theme = (0, import_ds_system2.useTheme)();
   const rows = [1];
   if (header)
-    rows.unshift((0, import_ds_system.op)("*", (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xxl), 1.125));
+    rows.unshift((0, import_ds_system2.op)("*", (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xxl), 1.125));
   if (footer)
     rows.push(theme.space.l);
   return /* @__PURE__ */ import_react.default.createElement(import_FullPageContainer.DSFullPageContainer, {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/PageForm/PageForm.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\nimport { op, __UNSAFE_SPACE_TO_DIMSUM, 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,qBAAqB;AACrB,+BAAmB;AACnB,uBAAuD;AACvD,+BAA+D;AAE/D,MAAM,OAAO,sCAAO,mBAAI;AAAA;AAAA;AAAA,uBAGD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,MAClD,CAAC,EAAE,YAAY,UAAU,yBAAG,KAAK,+CAAyB,MAAM,MAAM,GAAG,GAAG,IAAI;AAAA;AAAA;AAItF,MAAM,WAAW,CAAC,EAAE,SAAS,MAAM,OAAO,MAAM,SAAS,WAAW;AAClE,QAAM,QAAQ,+BAAS;AACvB,QAAM,OAAO,CAAC,CAAC;AACf,MAAI;AAAQ,SAAK,QAAQ,yBAAG,KAAK,+CAAyB,MAAM,MAAM,GAAG,GAAG,KAAK,CAAC;AAClF,MAAI;AAAQ,SAAK,KAAK,MAAM,MAAM,CAAC;AACnC,SACE,mDAAC;AAAA,IAAoB;AAAA,KAClB,UAAU,mDAAC,2BAAM,MAAO,GACzB,mDAAC;AAAA,IAAK,OAAO,EAAE,UAAU,SAAS;AAAA,KAChC,mDAAC,0DACC,mDAAC,YAAM,IAAK,CACd,CACF,GACC,UAAU,mDAAC,2BAAM,MAAO,CAC3B;AAEJ;AAEA,SAAS,YAAY;AAAA,EACnB,QAAQ,0BAAU;AAAA,EAClB,MAAM,0BAAU;AAAA,EAChB,QAAQ,0BAAU;AACpB;AAEA,MAAM,aAAa;AACnB,MAAM,mBAAmB;",
+  "sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { op, __UNSAFE_SPACE_TO_DIMSUM, 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,qBAAqB;AACrB,uBAAuB;AACvB,wBAAuD;AACvD,+BAA+D;AAE/D,MAAM,OAAO,6BAAO,mBAAI;AAAA;AAAA;AAAA,uBAGD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,MAClD,CAAC,EAAE,YAAY,UAAU,0BAAG,KAAK,gDAAyB,MAAM,MAAM,GAAG,GAAG,IAAI;AAAA;AAAA;AAItF,MAAM,WAAW,CAAC,EAAE,SAAS,MAAM,OAAO,MAAM,SAAS,WAAW;AAClE,QAAM,QAAQ,gCAAS;AACvB,QAAM,OAAO,CAAC,CAAC;AACf,MAAI;AAAQ,SAAK,QAAQ,0BAAG,KAAK,gDAAyB,MAAM,MAAM,GAAG,GAAG,KAAK,CAAC;AAClF,MAAI;AAAQ,SAAK,KAAK,MAAM,MAAM,CAAC;AACnC,SACE,mDAAC;AAAA,IAAoB;AAAA,KAClB,UAAU,mDAAC,2BAAM,MAAO,GACzB,mDAAC;AAAA,IAAK,OAAO,EAAE,UAAU,SAAS;AAAA,KAChC,mDAAC,0DACC,mDAAC,YAAM,IAAK,CACd,CACF,GACC,UAAU,mDAAC,2BAAM,MAAO,CAC3B;AAEJ;AAEA,SAAS,YAAY;AAAA,EACnB,QAAQ,0BAAU;AAAA,EAClB,MAAM,0BAAU;AAAA,EAChB,QAAQ,0BAAU;AACpB;AAEA,MAAM,aAAa;AACnB,MAAM,mBAAmB;",
   "names": []
 }

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

@@ -27,17 +27,17 @@ module.exports = __toCommonJS(PageList_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_prop_types = __toESM(require("prop-types"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_system = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_system2 = require("@elliemae/ds-system");
 var import_FullPageContainer = require("../FullPageContainer");
-const PageTitleWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
+const PageTitleWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   min-height: 44px;
 `;
-const DSMobilePageList = (0, import_ds_system.withTheme)(({ header = null, pageTitle = null, filterBar = null, body = null, footer = null, theme }) => {
-  const rows = ["auto", (0, import_ds_system.op)("*", (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xl), 0.83), 1];
+const DSMobilePageList = (0, import_ds_system2.withTheme)(({ header = null, pageTitle = null, filterBar = null, body = null, footer = null, theme }) => {
+  const rows = ["auto", (0, import_ds_system2.op)("*", (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xl), 0.83), 1];
   if (header)
-    rows.unshift((0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xxl));
+    rows.unshift((0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xxl));
   if (footer)
     rows.push("56px");
   return /* @__PURE__ */ import_react.default.createElement(import_FullPageContainer.DSFullPageContainer, {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/PageList/PageList.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { op, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { DSFullPageContainer, DSFullPageContainerScroll } from '../FullPageContainer';\n\nconst PageTitleWrapper = styled(Grid)`\n  min-height: 44px;\n`;\n\nconst DSMobilePageList = withTheme(\n  ({ header = null, pageTitle = null, filterBar = null, body = null, footer = null, theme }) => {\n    const rows = ['auto', op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 0.83), 1];\n    if (header) rows.unshift(__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl));\n    if (footer) rows.push('56px');\n    return (\n      <DSFullPageContainer rows={rows}>\n        {header && <Grid>{header}</Grid>}\n        <PageTitleWrapper>{pageTitle}</PageTitleWrapper>\n        <Grid>{filterBar}</Grid>\n        <DSFullPageContainerScroll>{body}</DSFullPageContainerScroll>\n        {footer && <Grid>{footer}</Grid>}\n      </DSFullPageContainer>\n    );\n  },\n);\n\nDSMobilePageList.propTypes = {\n  header: PropTypes.element,\n  pageTitle: PropTypes.element,\n  filterBar: PropTypes.element,\n  body: PropTypes.element,\n  footer: PropTypes.element,\n};\n\nconst DSPageList = DSMobilePageList;\n\nexport { DSPageList, DSMobilePageList };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,+BAAmB;AACnB,qBAAqB;AACrB,uBAAwD;AACxD,+BAA+D;AAE/D,MAAM,mBAAmB,sCAAO,mBAAI;AAAA;AAAA;AAIpC,MAAM,mBAAmB,gCACvB,CAAC,EAAE,SAAS,MAAM,YAAY,MAAM,YAAY,MAAM,OAAO,MAAM,SAAS,MAAM,YAAY;AAC5F,QAAM,OAAO,CAAC,QAAQ,yBAAG,KAAK,+CAAyB,MAAM,MAAM,EAAE,GAAG,IAAI,GAAG,CAAC;AAChF,MAAI;AAAQ,SAAK,QAAQ,+CAAyB,MAAM,MAAM,GAAG,CAAC;AAClE,MAAI;AAAQ,SAAK,KAAK,MAAM;AAC5B,SACE,mDAAC;AAAA,IAAoB;AAAA,KAClB,UAAU,mDAAC,2BAAM,MAAO,GACzB,mDAAC,wBAAkB,SAAU,GAC7B,mDAAC,2BAAM,SAAU,GACjB,mDAAC,0DAA2B,IAAK,GAChC,UAAU,mDAAC,2BAAM,MAAO,CAC3B;AAEJ,CACF;AAEA,iBAAiB,YAAY;AAAA,EAC3B,QAAQ,0BAAU;AAAA,EAClB,WAAW,0BAAU;AAAA,EACrB,WAAW,0BAAU;AAAA,EACrB,MAAM,0BAAU;AAAA,EAChB,QAAQ,0BAAU;AACpB;AAEA,MAAM,aAAa;",
+  "sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { op, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { DSFullPageContainer, DSFullPageContainerScroll } from '../FullPageContainer';\n\nconst PageTitleWrapper = styled(Grid)`\n  min-height: 44px;\n`;\n\nconst DSMobilePageList = withTheme(\n  ({ header = null, pageTitle = null, filterBar = null, body = null, footer = null, theme }) => {\n    const rows = ['auto', op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 0.83), 1];\n    if (header) rows.unshift(__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl));\n    if (footer) rows.push('56px');\n    return (\n      <DSFullPageContainer rows={rows}>\n        {header && <Grid>{header}</Grid>}\n        <PageTitleWrapper>{pageTitle}</PageTitleWrapper>\n        <Grid>{filterBar}</Grid>\n        <DSFullPageContainerScroll>{body}</DSFullPageContainerScroll>\n        {footer && <Grid>{footer}</Grid>}\n      </DSFullPageContainer>\n    );\n  },\n);\n\nDSMobilePageList.propTypes = {\n  header: PropTypes.element,\n  pageTitle: PropTypes.element,\n  filterBar: PropTypes.element,\n  body: PropTypes.element,\n  footer: PropTypes.element,\n};\n\nconst DSPageList = DSMobilePageList;\n\nexport { DSPageList, DSMobilePageList };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,uBAAuB;AACvB,qBAAqB;AACrB,wBAAwD;AACxD,+BAA+D;AAE/D,MAAM,mBAAmB,6BAAO,mBAAI;AAAA;AAAA;AAIpC,MAAM,mBAAmB,iCACvB,CAAC,EAAE,SAAS,MAAM,YAAY,MAAM,YAAY,MAAM,OAAO,MAAM,SAAS,MAAM,YAAY;AAC5F,QAAM,OAAO,CAAC,QAAQ,0BAAG,KAAK,gDAAyB,MAAM,MAAM,EAAE,GAAG,IAAI,GAAG,CAAC;AAChF,MAAI;AAAQ,SAAK,QAAQ,gDAAyB,MAAM,MAAM,GAAG,CAAC;AAClE,MAAI;AAAQ,SAAK,KAAK,MAAM;AAC5B,SACE,mDAAC;AAAA,IAAoB;AAAA,KAClB,UAAU,mDAAC,2BAAM,MAAO,GACzB,mDAAC,wBAAkB,SAAU,GAC7B,mDAAC,2BAAM,SAAU,GACjB,mDAAC,0DAA2B,IAAK,GAChC,UAAU,mDAAC,2BAAM,MAAO,CAC3B;AAEJ,CACF;AAEA,iBAAiB,YAAY;AAAA,EAC3B,QAAQ,0BAAU;AAAA,EAClB,WAAW,0BAAU;AAAA,EACrB,WAAW,0BAAU;AAAA,EACrB,MAAM,0BAAU;AAAA,EAChB,QAAQ,0BAAU;AACpB;AAEA,MAAM,aAAa;",
   "names": []
 }

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

@@ -27,15 +27,15 @@ module.exports = __toCommonJS(PageSearch_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_prop_types = __toESM(require("prop-types"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_system = require("@elliemae/ds-system");
-const Header = (0, import_styled_components.default)(import_ds_grid.Grid)`
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_system2 = require("@elliemae/ds-system");
+const Header = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   height: 100%;
   background: ${(props) => props.theme.colors.brand["600"]};
-  padding: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xxs)};
+  padding: ${(props) => (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xxs)};
 `;
-const DSMobilePageSearch = (0, import_ds_system.withTheme)(({
+const DSMobilePageSearch = (0, import_ds_system2.withTheme)(({
   HeaderContainer = Header,
   SearchContainer = Header,
   searchHeader = null,
@@ -44,8 +44,8 @@ const DSMobilePageSearch = (0, import_ds_system.withTheme)(({
   theme
 }) => {
   const rows = [
-    (0, import_ds_system.op)("*", (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.l), 0.81),
-    (0, import_ds_system.op)("*", (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.l), 1.62),
+    (0, import_ds_system2.op)("*", (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.l), 0.81),
+    (0, import_ds_system2.op)("*", (0, import_ds_system2.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.l), 1.62),
     1
   ];
   return /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {

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

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