@elliemae/ds-mobile 3.60.0-next.9 → 3.70.0-next.1

package/dist/esm/MobileSelectList/styled.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { noop } from "lodash-es";
 import { styled, border } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-import { DSCheckbox } from "@elliemae/ds-form";
+import { DSCheckbox } from "@elliemae/ds-legacy-form";
 import { Checkmark } from "@elliemae/ds-icons";
 import { DSMobileTouchable } from "../MobileTouchable/index.js";
 import { DSMobileListItem } from "../MobileListItem/index.js";

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

@@ -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-es';\nimport { styled, border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { DSMobileTouchable } from '../MobileTouchable/index.js';\nimport { DSMobileListItem } from '../MobileListItem/index.js';\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-es';\nimport { styled, border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCheckbox } from '@elliemae/ds-legacy-form';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { DSMobileTouchable } from '../MobileTouchable/index.js';\nimport { DSMobileListItem } from '../MobileListItem/index.js';\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,YAAY,WAAW;ACkCC;AAjCxB,SAAS,YAAY;AACrB,SAAS,QAAQ,cAAc;AAC/B,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AAE1B,MAAM,kBAAkB,OAAO,IAAI;AAAA,gBAC1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,aAC/C,CAAC,UAAU,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7B,MAAM,kBAAkB,OAAO,IAAI;AAAA,mBACvB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC,CAAC;AAAA;AAGhE,MAAM,SAAS,OAAO,IAAI;AAAA,gBACjB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC,CAAC;AAAA;AAG7D,MAAM,gBAAgB,OAAO;AAAA,MAC9B,iBAAiB,eAAe,gBAAgB;AAAA;AAAA;AAAA;AAK/C,MAAM,WAAW,oBAAC,cAAW,SAAS,OAAO,UAAU,MAAM,OAAO,EAAE,eAAe,OAAO,GAAG;AAC/F,MAAM,UAAU,oBAAC,cAAW,SAAO,MAAC,UAAU,MAAM,OAAO,EAAE,eAAe,OAAO,GAAG;AACtF,MAAM,eAAe,oBAAC,aAAU,OAAO,CAAC,iBAAiB,GAAG,GAAG;",
   "names": []
 }

package/dist/esm/MobileTimePicker/Input.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { focus, __UNSAFE_SPACE_TO_DIMSUM, styled } from "@elliemae/ds-system";
+import { __UNSAFE_SPACE_TO_DIMSUM, styled } from "@elliemae/ds-system";
 const StyledInput = styled.input`
   input[type='time']& {
     -webkit-appearance: none;
@@ -26,7 +26,9 @@ const StyledInput = styled.input`
 
   input[type='time']&:active,
   input[type='time']&:focus {
-    ${(props) => focus(props.theme.colors.brand[700])}
+    outline: none;
+    border: 1px solid ${({ theme }) => theme.colors.brand[700]};
+    border-radius: 2px;
   }
 
   &:before {

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

@@ -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, 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,\n  input[type='time']&:focus {\n    ${(props) => focus(props.theme.colors.brand[700])}\n  }\n\n  &:before {\n    color: ${(props) => (props.value === '' ? props.theme.colors.neutral['500'] : props.theme.colors.neutral['800'])};\n    content: '${(props) => (props.value === '' ? props.placeholder : props['data-displayvalue'])}';\n  }\n\n  input[type='time']&::-webkit-datetime-edit,\n  input[type='time']&::-webkit-inner-spin-button,\n  input[type='time']&::-webkit-clear-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n`;\n\nexport const Input = ({ innerRef, ...props }) => <StyledInput innerRef={innerRef} {...props} />;\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC4C0B;AA3CjD,SAAS,OAAO,0BAA0B,cAAc;AAExD,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAUb,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMpD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,iBAC7C,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,EAAE,CAAC;AAAA;AAAA;AAAA,wBAGlD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,MAK5D,CAAC,UAAU,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,aAIxC,CAAC,UAAW,MAAM,UAAU,KAAK,MAAM,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAE;AAAA,gBACpG,CAAC,UAAW,MAAM,UAAU,KAAK,MAAM,cAAc,MAAM,mBAAmB,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWzF,MAAM,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,MAAM,oBAAC,eAAY,UAAqB,GAAG,OAAO;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { __UNSAFE_SPACE_TO_DIMSUM, 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,\n  input[type='time']&:focus {\n    outline: none;\n    border: 1px solid ${({ theme }) => theme.colors.brand[700]};\n    border-radius: 2px;\n  }\n\n  &:before {\n    color: ${(props) => (props.value === '' ? props.theme.colors.neutral['500'] : props.theme.colors.neutral['800'])};\n    content: '${(props) => (props.value === '' ? props.placeholder : props['data-displayvalue'])}';\n  }\n\n  input[type='time']&::-webkit-datetime-edit,\n  input[type='time']&::-webkit-inner-spin-button,\n  input[type='time']&::-webkit-clear-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n`;\n\nexport const Input = ({ innerRef, ...props }) => <StyledInput innerRef={innerRef} {...props} />;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8C0B;AA7CjD,SAAS,0BAA0B,cAAc;AAEjD,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAUb,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMpD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,iBAC7C,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,EAAE,CAAC;AAAA;AAAA;AAAA,wBAGlD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAM1C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAKjD,CAAC,UAAW,MAAM,UAAU,KAAK,MAAM,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAE;AAAA,gBACpG,CAAC,UAAW,MAAM,UAAU,KAAK,MAAM,cAAc,MAAM,mBAAmB,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWzF,MAAM,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,MAAM,oBAAC,eAAY,UAAqB,GAAG,OAAO;",
   "names": []
 }

package/dist/esm/MobileTimePicker/MobileTimePicker.js

@@ -4,8 +4,8 @@ import { useRef, useMemo, useEffect } from "react";
 import { PropTypes, describe } from "@elliemae/ds-props-helpers";
 import { DSIconColors } from "@elliemae/ds-icon";
 import { RecentDocuments } from "@elliemae/ds-icons";
-import { DSButton } from "@elliemae/ds-button";
-import { DSInputGroup } from "@elliemae/ds-form";
+import { DSButton } from "@elliemae/ds-legacy-button-v1";
+import { DSInputGroup } from "@elliemae/ds-legacy-form";
 import { Input } from "./Input.js";
 const DSMobileTimePicker = ({ disabled, value, tabIndex, placeholder, onChange }) => {
   const inputRef = useRef(null);

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

@@ -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 '@elliemae/ds-props-helpers';\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.js';\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.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-props-helpers';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { RecentDocuments } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-legacy-button-v1';\nimport { DSInputGroup } from '@elliemae/ds-legacy-form';\nimport { Input } from './Input.js';\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.displayName = 'DSMobileTimePicker';\nconst DSMobileTimePickerWithSchema = describe(DSMobileTimePicker).description('Time picker for mobile & tablet');\n\nDSMobileTimePickerWithSchema.propTypes = pickerProps;\n\nexport { DSMobileTimePicker, DSMobileTimePickerWithSchema };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACoCP;AApChB,SAAgB,QAAQ,SAAS,iBAAiB;AAClD,SAAS,WAAW,gBAAgB;AACpC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AAEtB,MAAM,qBAAqB,CAAC,EAAE,UAAU,OAAO,UAAU,aAAa,SAAS,MAAM;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,CAAC,KAAK,CAAC,SAAS,CAAC,EAAG,QAAO;AACnD,UAAM,OAAO,SAAS,CAAC,KAAK,KAAK,OAAO;AACxC,UAAM,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,KAAK,SAAS,CAAC;AAE1D,WAAO,GAAG,CAAC,MAAM,SAAS,CAAC,CAAC,IAAI,IAAI;AAAA,EACtC,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YACE;AAAA,QAAC;AAAA;AAAA,UACC,cAAW;AAAA,UACX,OAAO,CAAC,WAAW,aAAa,UAAU,aAAa;AAAA,UACvD;AAAA,UACA,MAAM,oBAAC,mBAAgB;AAAA,UACvB,MAAK;AAAA,UACL,YAAW;AAAA,UACX,SAAS,MAAM;AACb,qBAAS,QAAQ,MAAM;AACvB,qBAAS,QAAQ,MAAM;AAAA,UACzB;AAAA;AAAA,MACF;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,cAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,qBAAmB;AAAA,UACnB,UAAU,CAAC,MAAM;AAEf,kBAAM,EAAE,OAAO,IAAI,EAAE;AACrB,qBAAS,kBAAkB;AACzB,qBAAO,eAAe;AAAA,YACxB;AACA,mBAAO,WAAW,iBAAiB,CAAC;AACpC,qBAAS,CAAC;AAAA,UACZ;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,eAAe;AAAA,EAChC,UAAU;AAAA,EACV,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAO;AACT;AAEA,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA,EAIlB,UAAU,UAAU,KAAK,YAAY,kCAAkC;AAAA;AAAA;AAAA;AAAA,EAIvE,UAAU,UAAU,OAAO,YAAY,yCAAyC;AAAA;AAAA;AAAA;AAAA,EAIhF,aAAa,UAAU,OAAO,YAAY,uBAAuB;AAAA;AAAA;AAAA;AAAA,EAIjE,UAAU,UAAU,KAAK,YAAY,2DAA2D;AAAA;AAAA;AAAA;AAAA,EAIhG,OAAO,UAAU,OAAO,YAAY,oDAAoD;AAC1F;AAEA,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB,EAAE,YAAY,iCAAiC;AAE/G,6BAA6B,YAAY;",
   "names": []
 }

package/dist/esm/Modal/Modal.js

@@ -4,7 +4,7 @@ import { describe, PropTypes } from "@elliemae/ds-props-helpers";
 import { noop } from "lodash-es";
 import { Grid } from "@elliemae/ds-grid";
 import { WarningTriangle } from "@elliemae/ds-icons";
-import { DSButton } from "@elliemae/ds-button";
+import { DSButton } from "@elliemae/ds-legacy-button-v1";
 import { useTheme } from "@elliemae/ds-system";
 import { ModalPosition, ModalBox, BackShadow, ModalIcon, ModalTitle, ModalDescription, BodyFix } from "./styled.js";
 const Modal = ({

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/Modal/Modal.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { noop } from 'lodash-es';\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.js';\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  children = undefined,\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        {children !== undefined ? (\n          <>{children}</>\n        ) : (\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        )}\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.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-props-helpers';\nimport { noop } from 'lodash-es';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-legacy-button-v1';\nimport { useTheme } from '@elliemae/ds-system';\nimport { ModalPosition, ModalBox, BackShadow, ModalIcon, ModalTitle, ModalDescription, BodyFix } from './styled.js';\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  children = undefined,\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        {children !== undefined ? (\n          <>{children}</>\n        ) : (\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        )}\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.displayName = 'Modal';\nconst ModalWithSchema = describe(Modal);\nModalWithSchema.propTypes = modalProps;\n\nexport { Modal, ModalWithSchema };\n"],
   "mappings": "AAAA,YAAY,WAAW;AC+BjB,SAII,UAJJ,KAoBQ,YApBR;AA7BN,SAAS,UAAU,iBAAiB;AACpC,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,eAAe,UAAU,YAAY,WAAW,YAAY,kBAAkB,eAAe;AAEtG,MAAM,QAAQ,CAAC;AAAA,EACb,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,UAAU;AAAA,EACV,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,qBAAqB;AAAA,IACnB,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,SAAS;AAAA,EACT,WAAW;AACb,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,MAAI,CAAC,OAAQ,QAAO;AACpB,SACE,iCACE;AAAA,wBAAC,WAAQ,QAAgB;AAAA,IACzB,oBAAC,cAAW,SAAS,SAAS,QAAgB;AAAA,IAC9C,oBAAC,iBAAc,QAAgB,MAAM,CAAC,MAAM,GACzC,uBAAa,SACZ,gCAAG,UAAS,IAEZ;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,OAAO,cAAc,IAAI;AAAA,QACvC,MAAM,CAAC,GAAG,MAAM;AAAA,QAChB,OAAO;AAAA,UACL,UAAU;AAAA,QACZ;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,IAAG;AAAA,cACH,OAAO;AAAA,gBACL,UAAU;AAAA,cACZ;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,CAAC,QAAQ,QAAQ,CAAC;AAAA,kBACxB,OAAO;AAAA,oBACL,UAAU;AAAA,kBACZ;AAAA,kBAEA;AAAA,wCAAC,aACC,8BAAC,mBAAgB,MAAK,OAAM,GAC9B;AAAA,oBACA,oBAAC,cAAW,eAAY,eAAe,iBAAM;AAAA,oBAC7C;AAAA,sBAAC;AAAA;AAAA,wBACC,eAAY;AAAA,wBACZ,OAAO;AAAA,0BACL,UAAU;AAAA,wBACZ;AAAA,wBAEC;AAAA;AAAA,oBACH;AAAA;AAAA;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UACA,oBAAC,QAAK,IAAG,QACP;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,IAAG;AAAA,cACH,MAAM,sBAAsB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAAA,cACvC,QAAO;AAAA,cACP,gBAAe;AAAA,cACf,YAAW;AAAA,cACX,OAAO;AAAA,gBACL,WAAW,aAAa,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,cACnD;AAAA,cAEC;AAAA,uCACC;AAAA,kBAAC;AAAA;AAAA,oBACE,GAAG;AAAA,oBACJ,WAAW,qBAAqB,aAAa;AAAA,oBAC7C,YAAW;AAAA,oBACX,eAAY;AAAA;AAAA,gBACd;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW,mBAAmB,aAAa;AAAA,oBAC1C,GAAG;AAAA,oBACJ,YAAW;AAAA,oBACX,eAAY;AAAA;AAAA,gBACd;AAAA;AAAA;AAAA,UACF,GACF;AAAA;AAAA;AAAA,IACF,GAEJ;AAAA,KACF;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,cAAc;AACpB,MAAM,kBAAkB,SAAS,KAAK;AACtC,gBAAgB,YAAY;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-mobile",
-  "version": "3.60.0-next.9",
+  "version": "3.70.0-next.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - System",
   "files": [
@@ -35,56 +35,53 @@
     "reportFile": "tests.xml",
     "indent": 4
   },
-  "scripts": {
-    "test": "pui-cli test --passWithNoTests --coverage=\"false\"",
-    "lint": "node ../../../scripts/lint.mjs --fix",
-    "lint:strict": "node ../../../scripts/lint-strict.mjs",
-    "dts": "exit 0 | echo",
-    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
-    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\"",
-    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch"
-  },
   "publishConfig": {
     "access": "public",
     "typeSafety": false
   },
   "dependencies": {
-    "@elliemae/ds-accordion": "3.60.0-next.9",
-    "@elliemae/ds-backdrop": "3.60.0-next.9",
-    "@elliemae/ds-button": "3.60.0-next.9",
-    "@elliemae/ds-button-v2": "3.60.0-next.9",
-    "@elliemae/ds-circular-progress-indicator": "3.60.0-next.9",
-    "@elliemae/ds-form": "3.60.0-next.9",
-    "@elliemae/ds-form-checkbox": "3.60.0-next.9",
-    "@elliemae/ds-grid": "3.60.0-next.9",
-    "@elliemae/ds-icon": "3.60.0-next.9",
-    "@elliemae/ds-icons": "3.60.0-next.9",
-    "@elliemae/ds-indeterminate-progress-indicator": "3.60.0-next.9",
-    "@elliemae/ds-props-helpers": "3.60.0-next.9",
-    "@elliemae/ds-shared": "3.60.0-next.9",
-    "@elliemae/ds-system": "3.60.0-next.9",
-    "@elliemae/ds-tabs": "3.60.0-next.9",
-    "@elliemae/ds-truncated-expandable-text": "3.60.0-next.9",
-    "react-window": "catalog:",
-    "react-window-infinite-loader": "catalog:"
+    "@elliemae/ds-legacy-button-v1": "1.0.16",
+    "@elliemae/ds-legacy-form": "1.0.16",
+    "react-window": "~1.8.8",
+    "react-window-infinite-loader": "~1.0.8",
+    "@elliemae/ds-accordion": "3.70.0-next.1",
+    "@elliemae/ds-backdrop": "3.70.0-next.1",
+    "@elliemae/ds-button-v2": "3.70.0-next.1",
+    "@elliemae/ds-circular-progress-indicator": "3.70.0-next.1",
+    "@elliemae/ds-form-checkbox": "3.70.0-next.1",
+    "@elliemae/ds-grid": "3.70.0-next.1",
+    "@elliemae/ds-icon": "3.70.0-next.1",
+    "@elliemae/ds-indeterminate-progress-indicator": "3.70.0-next.1",
+    "@elliemae/ds-icons": "3.70.0-next.1",
+    "@elliemae/ds-system": "3.70.0-next.1",
+    "@elliemae/ds-shared": "3.70.0-next.1",
+    "@elliemae/ds-props-helpers": "3.70.0-next.1",
+    "@elliemae/ds-tabs": "3.70.0-next.1",
+    "@elliemae/ds-truncated-expandable-text": "3.70.0-next.1"
   },
   "devDependencies": {
-    "@elliemae/ds-monorepo-devops": "3.60.0-next.9",
-    "@elliemae/ds-test-utils": "3.60.0-next.9",
-    "@elliemae/pui-cli": "catalog:",
-    "@elliemae/pui-theme": "catalog:",
-    "jest": "catalog:",
-    "jest-cli": "catalog:",
-    "styled-components": "catalog:",
-    "styled-system": "catalog:"
+    "@elliemae/pui-theme": "~2.13.0",
+    "jest": "^30.0.0",
+    "styled-components": "~5.3.9",
+    "styled-system": "^5.1.5",
+    "@elliemae/ds-monorepo-devops": "3.70.0-next.1",
+    "@elliemae/ds-test-utils": "3.70.0-next.1"
   },
   "peerDependencies": {
-    "@elliemae/pui-theme": "catalog:",
-    "lodash-es": "catalog:",
-    "react": "catalog:",
-    "react-dom": "catalog:",
-    "styled-components": "catalog:",
-    "styled-system": "catalog:"
+    "@elliemae/pui-theme": "~2.13.0",
+    "lodash-es": "^4.17.21",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "styled-components": "~5.3.9",
+    "styled-system": "^5.1.5"
   },
-  "gitHead": "7b49878bf6b481e639c5412a4c816ee349d91b46"
-}
+  "scripts": {
+    "test": "ds-monorepo-devops test --passWithNoTests --coverage=\"false\"",
+    "lint": "node ../../../scripts/lint.mjs --fix",
+    "lint:strict": "node ../../../scripts/lint-strict.mjs",
+    "dts": "exit 0 | echo",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
+    "checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\"",
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch"
+  }
+}