@elliemae/ds-form 3.15.0 → 3.16.0-next.10

package/dist/esm/DateInputV2/components/DateInputs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/DateInputV2/components/DateInputs.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useState, useEffect } from 'react';\nimport moment from 'moment';\nimport {\n  commonInputProps,\n  triggerOnBlur,\n  focusNextInput,\n  getFormattedDay,\n  getShouldShortcircuitDay,\n  getFormattedMonth,\n  getShouldShortcircuitMonth,\n  getFormattedYear,\n} from './utils';\nimport { onKeyDownHelper } from './helpers';\nimport { DateInputDivider, DateInputWrapper, DateInputInput, DateInputFluidContainer } from './styled';\nimport { DateInputsPropTypes } from './propsTypes';\n\nconst FORMAT = 'MMDDYYYY';\n\nexport const DateInputs = ({ onBlur, onChange, onDateChange, disabled, onCustomKeyDown, time, tabIndex, innerRef }) => {\n  const [month, setMonth] = useState('');\n  const [day, setDay] = useState('');\n  const [year, setYear] = useState('');\n  const [onChangeDateTrigger, setOnChangeDateTrigger] = useState({});\n  const dayRef = React.useRef<HTMLInputElement>();\n  const [haveInputsOnChangeTriggered, setHaveInputsOnChangeTriggered] = useState(false);\n\n  let digits = 2;\n  let placeholder = '';\n\n  const handleFluidClick = React.useCallback(\n    (e: React.MouseEvent<Element, MouseEvent>) => {\n      if (!(e.target as HTMLInputElement).type && dayRef.current) {\n        dayRef.current.focus();\n      }\n    },\n    [dayRef.current],\n  );\n\n  const triggerOnDateChange = React.useCallback(() => {\n    if (month && day && year && haveInputsOnChangeTriggered) {\n      const momentValue = moment(`${month}${day}${year}`, 'MMDDYYYY', true);\n      if (momentValue.isValid()) {\n        onDateChange(momentValue);\n      }\n      setHaveInputsOnChangeTriggered(false);\n    }\n  }, [day, month, year, haveInputsOnChangeTriggered]);\n\n  // isArrowChange is coming from the onKeyDown handler in helpers\n  const onMonthChange = React.useCallback((e, isArrowChange) => {\n    const value = getFormattedMonth(e.target.value);\n    const shouldAdvance = getShouldShortcircuitMonth(e.target.value);\n    setMonth(value);\n    setHaveInputsOnChangeTriggered(true);\n    if (e.target.value.length > 1 || shouldAdvance) {\n      if (!isArrowChange) focusNextInput(e.target);\n      setOnChangeDateTrigger({});\n    }\n  }, []);\n\n  // isArrowChange is coming from the onKeyDown handler in helpers\n  const onDayChange = React.useCallback((e, isArrowChange) => {\n    const value = getFormattedDay(e.target.value);\n    const shouldAdvance = getShouldShortcircuitDay(e.target.value);\n    setDay(value);\n    setHaveInputsOnChangeTriggered(true);\n    if (e.target.value.length > 1 || shouldAdvance) {\n      if (!isArrowChange) focusNextInput(e.target);\n      setOnChangeDateTrigger({});\n    }\n  }, []);\n\n  const onYearChange = React.useCallback((e) => {\n    const value = getFormattedYear(e.target.value);\n    setYear(value);\n    setHaveInputsOnChangeTriggered(true);\n    setOnChangeDateTrigger({});\n  }, []);\n\n  useEffect(() => {\n    // When component mounts haveInputsOnChangeTriggered is set to false\n    // so this is not triggered on mount but is triggered with all other changes\n    if (haveInputsOnChangeTriggered) {\n      const momentValue = moment(`${month}${day}${year}`, FORMAT, true);\n      onChange(`${month}${day}${year}`, momentValue.isValid() ? momentValue : null);\n    }\n  }, [day, month, year]);\n\n  useEffect(() => {\n    triggerOnDateChange();\n  }, [onChangeDateTrigger]);\n\n  useEffect(() => {\n    if (time && time !== `${month}${day}${year}` && moment(time, 'MMDDYYYY').isValid()) {\n      const values = String(time || '');\n      if (values.slice(0, 2)) setMonth(values.slice(0, 2));\n      if (values.slice(2, 4)) setDay(values.slice(2, 4));\n      if (values.slice(4, 8)) setYear(values.slice(4, 8));\n    } else if (!time && (month || day || year)) {\n      setMonth('');\n      setDay('');\n      setYear('');\n    }\n  }, [time]);\n\n  const onKeyDown = (event) =>\n    onKeyDownHelper(event, {\n      onDayChange,\n      onMonthChange,\n      onYearChange,\n    });\n\n  const renderMonthInput = () => {\n    placeholder = 'MM';\n    const onMonthInputBlur = (e) => {\n      setOnChangeDateTrigger({});\n      triggerOnBlur(e, onBlur);\n    };\n    return (\n      <DateInputInput\n        {...commonInputProps(digits, onKeyDown, placeholder)}\n        autoComplete=\"off\"\n        key=\"month-input\"\n        data-testid=\"month\"\n        disabled={disabled}\n        name=\"month\"\n        onBlur={onMonthInputBlur}\n        onChange={onMonthChange}\n        value={month}\n        tabIndex={tabIndex}\n        ref={dayRef}\n      />\n    );\n  };\n  const renderDayInput = () => {\n    placeholder = 'DD';\n    const onDayInputBlur = (e) => {\n      setOnChangeDateTrigger({});\n      triggerOnBlur(e, onBlur);\n    };\n    return (\n      <DateInputInput\n        {...commonInputProps(digits, onKeyDown, placeholder)}\n        autoComplete=\"off\"\n        key=\"day-input\"\n        data-testid=\"day\"\n        disabled={disabled}\n        name=\"day\"\n        onBlur={onDayInputBlur}\n        onChange={onDayChange}\n        value={day}\n        tabIndex={tabIndex}\n      />\n    );\n  };\n  const renderYearInput = () => {\n    placeholder = 'YY';\n    digits = 4;\n    const onYearInputBlur = (e) => {\n      triggerOnBlur(e, onBlur);\n    };\n    return (\n      <DateInputInput\n        {...commonInputProps(digits, onKeyDown, placeholder)}\n        autoComplete=\"off\"\n        key=\"year-input\"\n        data-testid=\"year\"\n        disabled={disabled}\n        name=\"year\"\n        onBlur={onYearInputBlur}\n        onChange={onYearChange}\n        value={year}\n        size=\"l\"\n        tabIndex={tabIndex}\n      />\n    );\n  };\n\n  const renderDateInputs = () => {\n    const inputs = [renderMonthInput(), renderDayInput(), renderYearInput()];\n    const inputsWithDividers = inputs.reduce(\n      (acc, input, index) => (input ? acc.concat([index ? <DateInputDivider>/</DateInputDivider> : null, input]) : acc),\n      [],\n    );\n\n    return [\n      inputsWithDividers,\n      React.createElement('span', { key: 'span' }), // hack for next/prev focus\n    ];\n  };\n\n  return (\n    <DateInputFluidContainer onClick={handleFluidClick} data-testid=\"date-input-fluidContainer\">\n      <DateInputWrapper\n        disabled={disabled}\n        ref={innerRef}\n        onKeyDown={onCustomKeyDown}\n        tabIndex={-1}\n        cols={['auto', '6px', 'auto', '6px', 'auto']}\n      >\n        {renderDateInputs()}\n      </DateInputWrapper>\n    </DateInputFluidContainer>\n  );\n};\n\nDateInputs.propTypes = DateInputsPropTypes;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport React, { useState, useEffect } from 'react';\nimport moment from 'moment';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\n\nimport {\n  commonInputProps,\n  triggerOnBlur,\n  focusNextInput,\n  getFormattedDay,\n  getShouldShortcircuitDay,\n  getFormattedMonth,\n  getShouldShortcircuitMonth,\n  getFormattedYear,\n} from './utils.js';\nimport { onKeyDownHelper } from './helpers.js';\nimport { DateInputDivider, DateInputWrapper, DateInputInput, DateInputFluidContainer } from './styled.js';\nimport { DateInputsPropTypes } from './propsTypes.js';\n\nconst FORMAT = 'MMDDYYYY';\n\nexport const DateInputs = ({ onBlur, onChange, onDateChange, disabled, onCustomKeyDown, time, tabIndex, innerRef }) => {\n  useDeprecateComponent({ componentName: 'ds-form/DateInputV2', version: '3.x Date: 2023 Q1' });\n\n  const [month, setMonth] = useState('');\n  const [day, setDay] = useState('');\n  const [year, setYear] = useState('');\n  const [onChangeDateTrigger, setOnChangeDateTrigger] = useState({});\n  const dayRef = React.useRef<HTMLInputElement>();\n  const [haveInputsOnChangeTriggered, setHaveInputsOnChangeTriggered] = useState(false);\n\n  let digits = 2;\n  let placeholder = '';\n\n  const handleFluidClick = React.useCallback(\n    (e: React.MouseEvent<Element, MouseEvent>) => {\n      if (!(e.target as HTMLInputElement).type && dayRef.current) {\n        dayRef.current.focus();\n      }\n    },\n    [dayRef.current],\n  );\n\n  const triggerOnDateChange = React.useCallback(() => {\n    if (month && day && year && haveInputsOnChangeTriggered) {\n      const momentValue = moment(`${month}${day}${year}`, 'MMDDYYYY', true);\n      if (momentValue.isValid()) {\n        onDateChange(momentValue);\n      }\n      setHaveInputsOnChangeTriggered(false);\n    }\n  }, [day, month, year, haveInputsOnChangeTriggered]);\n\n  // isArrowChange is coming from the onKeyDown handler in helpers\n  const onMonthChange = React.useCallback((e, isArrowChange) => {\n    const value = getFormattedMonth(e.target.value);\n    const shouldAdvance = getShouldShortcircuitMonth(e.target.value);\n    setMonth(value);\n    setHaveInputsOnChangeTriggered(true);\n    if (e.target.value.length > 1 || shouldAdvance) {\n      if (!isArrowChange) focusNextInput(e.target);\n      setOnChangeDateTrigger({});\n    }\n  }, []);\n\n  // isArrowChange is coming from the onKeyDown handler in helpers\n  const onDayChange = React.useCallback((e, isArrowChange) => {\n    const value = getFormattedDay(e.target.value);\n    const shouldAdvance = getShouldShortcircuitDay(e.target.value);\n    setDay(value);\n    setHaveInputsOnChangeTriggered(true);\n    if (e.target.value.length > 1 || shouldAdvance) {\n      if (!isArrowChange) focusNextInput(e.target);\n      setOnChangeDateTrigger({});\n    }\n  }, []);\n\n  const onYearChange = React.useCallback((e) => {\n    const value = getFormattedYear(e.target.value);\n    setYear(value);\n    setHaveInputsOnChangeTriggered(true);\n    setOnChangeDateTrigger({});\n  }, []);\n\n  useEffect(() => {\n    // When component mounts haveInputsOnChangeTriggered is set to false\n    // so this is not triggered on mount but is triggered with all other changes\n    if (haveInputsOnChangeTriggered) {\n      const momentValue = moment(`${month}${day}${year}`, FORMAT, true);\n      onChange(`${month}${day}${year}`, momentValue.isValid() ? momentValue : null);\n    }\n  }, [day, month, year]);\n\n  useEffect(() => {\n    triggerOnDateChange();\n  }, [onChangeDateTrigger]);\n\n  useEffect(() => {\n    if (time && time !== `${month}${day}${year}` && moment(time, 'MMDDYYYY').isValid()) {\n      const values = String(time || '');\n      if (values.slice(0, 2)) setMonth(values.slice(0, 2));\n      if (values.slice(2, 4)) setDay(values.slice(2, 4));\n      if (values.slice(4, 8)) setYear(values.slice(4, 8));\n    } else if (!time && (month || day || year)) {\n      setMonth('');\n      setDay('');\n      setYear('');\n    }\n  }, [time]);\n\n  const onKeyDown = (event) =>\n    onKeyDownHelper(event, {\n      onDayChange,\n      onMonthChange,\n      onYearChange,\n    });\n\n  const renderMonthInput = () => {\n    placeholder = 'MM';\n    const onMonthInputBlur = (e) => {\n      setOnChangeDateTrigger({});\n      triggerOnBlur(e, onBlur);\n    };\n    return (\n      <DateInputInput\n        {...commonInputProps(digits, onKeyDown, placeholder)}\n        autoComplete=\"off\"\n        key=\"month-input\"\n        data-testid=\"month\"\n        disabled={disabled}\n        name=\"month\"\n        onBlur={onMonthInputBlur}\n        onChange={onMonthChange}\n        value={month}\n        tabIndex={tabIndex}\n        ref={dayRef}\n      />\n    );\n  };\n  const renderDayInput = () => {\n    placeholder = 'DD';\n    const onDayInputBlur = (e) => {\n      setOnChangeDateTrigger({});\n      triggerOnBlur(e, onBlur);\n    };\n    return (\n      <DateInputInput\n        {...commonInputProps(digits, onKeyDown, placeholder)}\n        autoComplete=\"off\"\n        key=\"day-input\"\n        data-testid=\"day\"\n        disabled={disabled}\n        name=\"day\"\n        onBlur={onDayInputBlur}\n        onChange={onDayChange}\n        value={day}\n        tabIndex={tabIndex}\n      />\n    );\n  };\n  const renderYearInput = () => {\n    placeholder = 'YY';\n    digits = 4;\n    const onYearInputBlur = (e) => {\n      triggerOnBlur(e, onBlur);\n    };\n    return (\n      <DateInputInput\n        {...commonInputProps(digits, onKeyDown, placeholder)}\n        autoComplete=\"off\"\n        key=\"year-input\"\n        data-testid=\"year\"\n        disabled={disabled}\n        name=\"year\"\n        onBlur={onYearInputBlur}\n        onChange={onYearChange}\n        value={year}\n        size=\"l\"\n        tabIndex={tabIndex}\n      />\n    );\n  };\n\n  const renderDateInputs = () => {\n    const inputs = [renderMonthInput(), renderDayInput(), renderYearInput()];\n    const inputsWithDividers = inputs.reduce(\n      (acc, input, index) => (input ? acc.concat([index ? <DateInputDivider>/</DateInputDivider> : null, input]) : acc),\n      [],\n    );\n\n    return [\n      inputsWithDividers,\n      React.createElement('span', { key: 'span' }), // hack for next/prev focus\n    ];\n  };\n\n  return (\n    <DateInputFluidContainer onClick={handleFluidClick} data-testid=\"date-input-fluidContainer\">\n      <DateInputWrapper\n        disabled={disabled}\n        ref={innerRef}\n        onKeyDown={onCustomKeyDown}\n        tabIndex={-1}\n        cols={['auto', '6px', 'auto', '6px', 'auto']}\n      >\n        {renderDateInputs()}\n      </DateInputWrapper>\n    </DateInputFluidContainer>\n  );\n};\n\nDateInputs.propTypes = DateInputsPropTypes;\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/DateInputV2/components/helpers.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { cloneDeep } from "lodash";
-import { focusNextInput, focusPreviousInput } from "./utils";
+import { focusNextInput, focusPreviousInput } from "./utils.js";
 const callChange = (event, handlers, isArrowChange) => {
   if (event.target.name === "day")
     handlers.onDayChange(event, isArrowChange);

package/dist/esm/DateInputV2/components/helpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/DateInputV2/components/helpers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { cloneDeep } from 'lodash';\nimport { focusNextInput, focusPreviousInput } from './utils';\n\nconst callChange = (event, handlers, isArrowChange) => {\n  if (event.target.name === 'day') handlers.onDayChange(event, isArrowChange);\n  if (event.target.name === 'month') handlers.onMonthChange(event, isArrowChange);\n  if (event.target.name === 'year') handlers.onYearChange(event, isArrowChange);\n};\n\nconst setTarget = (event, v) => {\n  const n = cloneDeep(event);\n  let newValue = parseInt(n.target.value || 0, 10) + v;\n  if (newValue < 1) newValue = '01';\n  if (event.target.name === 'day' && newValue > 31) newValue = 31;\n  if (event.target.name === 'month' && newValue > 12) newValue = 12;\n  n.target.value = newValue;\n  return n;\n};\n\n// eslint-disable-next-line max-statements, complexity\nexport const onKeyDownHelper = (event, handlers) => {\n  switch (event.key) {\n    case 'ArrowLeft': {\n      event.preventDefault();\n      focusPreviousInput(event.target);\n      break;\n    }\n    case 'ArrowUp': {\n      event.preventDefault();\n      const n = setTarget(event, 1);\n      callChange(n, handlers, true);\n      break;\n    }\n    case 'ArrowDown': {\n      event.preventDefault();\n      const n = setTarget(event, -1);\n      callChange(n, handlers, true);\n      break;\n    }\n    case 'ArrowRight': {\n      event.preventDefault();\n      focusNextInput(event.target);\n      break;\n    }\n    case 'Tab': {\n      if (event.shiftKey) break;\n      if (event.target.value.length > 0 && event.target.name !== 'year') event.preventDefault();\n      callChange(event, handlers);\n      break;\n    }\n    case 'Backspace': {\n      // HTML Date input behavior, clear everything when deleting\n      event.preventDefault();\n      const n = cloneDeep(event);\n      n.target.value = '';\n      callChange(n, handlers, true);\n      break;\n    }\n    case 'Enter': {\n      break;\n    }\n    default:\n      break;\n  }\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { cloneDeep } from 'lodash';\nimport { focusNextInput, focusPreviousInput } from './utils.js';\n\nconst callChange = (event, handlers, isArrowChange) => {\n  if (event.target.name === 'day') handlers.onDayChange(event, isArrowChange);\n  if (event.target.name === 'month') handlers.onMonthChange(event, isArrowChange);\n  if (event.target.name === 'year') handlers.onYearChange(event, isArrowChange);\n};\n\nconst setTarget = (event, v) => {\n  const n = cloneDeep(event);\n  let newValue = parseInt(n.target.value || 0, 10) + v;\n  if (newValue < 1) newValue = '01';\n  if (event.target.name === 'day' && newValue > 31) newValue = 31;\n  if (event.target.name === 'month' && newValue > 12) newValue = 12;\n  n.target.value = newValue;\n  return n;\n};\n\n// eslint-disable-next-line max-statements, complexity\nexport const onKeyDownHelper = (event, handlers) => {\n  switch (event.key) {\n    case 'ArrowLeft': {\n      event.preventDefault();\n      focusPreviousInput(event.target);\n      break;\n    }\n    case 'ArrowUp': {\n      event.preventDefault();\n      const n = setTarget(event, 1);\n      callChange(n, handlers, true);\n      break;\n    }\n    case 'ArrowDown': {\n      event.preventDefault();\n      const n = setTarget(event, -1);\n      callChange(n, handlers, true);\n      break;\n    }\n    case 'ArrowRight': {\n      event.preventDefault();\n      focusNextInput(event.target);\n      break;\n    }\n    case 'Tab': {\n      if (event.shiftKey) break;\n      if (event.target.value.length > 0 && event.target.name !== 'year') event.preventDefault();\n      callChange(event, handlers);\n      break;\n    }\n    case 'Backspace': {\n      // HTML Date input behavior, clear everything when deleting\n      event.preventDefault();\n      const n = cloneDeep(event);\n      n.target.value = '';\n      callChange(n, handlers, true);\n      break;\n    }\n    case 'Enter': {\n      break;\n    }\n    default:\n      break;\n  }\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB,0BAA0B;AAEnD,MAAM,aAAa,CAAC,OAAO,UAAU,kBAAkB;AACrD,MAAI,MAAM,OAAO,SAAS;AAAO,aAAS,YAAY,OAAO,aAAa;AAC1E,MAAI,MAAM,OAAO,SAAS;AAAS,aAAS,cAAc,OAAO,aAAa;AAC9E,MAAI,MAAM,OAAO,SAAS;AAAQ,aAAS,aAAa,OAAO,aAAa;AAC9E;AAEA,MAAM,YAAY,CAAC,OAAO,MAAM;AAC9B,QAAM,IAAI,UAAU,KAAK;AACzB,MAAI,WAAW,SAAS,EAAE,OAAO,SAAS,GAAG,EAAE,IAAI;AACnD,MAAI,WAAW;AAAG,eAAW;AAC7B,MAAI,MAAM,OAAO,SAAS,SAAS,WAAW;AAAI,eAAW;AAC7D,MAAI,MAAM,OAAO,SAAS,WAAW,WAAW;AAAI,eAAW;AAC/D,IAAE,OAAO,QAAQ;AACjB,SAAO;AACT;AAGO,MAAM,kBAAkB,CAAC,OAAO,aAAa;AAClD,UAAQ,MAAM,KAAK;AAAA,IACjB,KAAK,aAAa;AAChB,YAAM,eAAe;AACrB,yBAAmB,MAAM,MAAM;AAC/B;AAAA,IACF;AAAA,IACA,KAAK,WAAW;AACd,YAAM,eAAe;AACrB,YAAM,IAAI,UAAU,OAAO,CAAC;AAC5B,iBAAW,GAAG,UAAU,IAAI;AAC5B;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,YAAM,eAAe;AACrB,YAAM,IAAI,UAAU,OAAO,EAAE;AAC7B,iBAAW,GAAG,UAAU,IAAI;AAC5B;AAAA,IACF;AAAA,IACA,KAAK,cAAc;AACjB,YAAM,eAAe;AACrB,qBAAe,MAAM,MAAM;AAC3B;AAAA,IACF;AAAA,IACA,KAAK,OAAO;AACV,UAAI,MAAM;AAAU;AACpB,UAAI,MAAM,OAAO,MAAM,SAAS,KAAK,MAAM,OAAO,SAAS;AAAQ,cAAM,eAAe;AACxF,iBAAW,OAAO,QAAQ;AAC1B;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAEhB,YAAM,eAAe;AACrB,YAAM,IAAI,UAAU,KAAK;AACzB,QAAE,OAAO,QAAQ;AACjB,iBAAW,GAAG,UAAU,IAAI;AAC5B;AAAA,IACF;AAAA,IACA,KAAK,SAAS;AACZ;AAAA,IACF;AAAA,IACA;AACE;AAAA,EACJ;AACF;",
   "names": []
 }

package/dist/esm/DateInputV2/components/props.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { PropTypes } from "@elliemae/ds-utilities";
+import { PropTypes } from "@elliemae/ds-props-helpers";
 import { noop } from "lodash";
 const props = {
   containerProps: PropTypes.object.description("Props to inject to date input wrapper"),

package/dist/esm/DateInputV2/components/props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/DateInputV2/components/props.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\nimport { noop } from 'lodash';\n\nexport const props = {\n  /** Props to inject to date input wrapper */\n  containerProps: PropTypes.object.description('Props to inject to date input wrapper'),\n  /**\n   * Triggers the onBlur when focus moves out of date input\n   */\n  onBlur: PropTypes.func.description('Triggers the onBlur when focus moves out of date input'),\n  /**\n   * Triggers the onFocus when the component gets the focus\n   */\n  onFocus: PropTypes.func.description('Triggers the onFocus when the component gets the focus'),\n  /**\n   * Triggers the onKeyDown\n   */\n  onKeyDown: PropTypes.func.description('Triggers the onKeyDown'),\n  /**\n   * Allows a function that is triggered once the date input changes\n   */\n  onChange: PropTypes.func.description('Allows a function that is triggered once the date input changes'),\n  /**\n   * Triggers when the date is completely set and  only once you have blurred the\n   * corresponding input. For example if you are editing the day and the year and month\n   * are already set, once you completely set the day it will trigger.\n   */\n  onDateChange: PropTypes.func.description(\n    ' Triggers when the date is completely set and  only once you have blurred the corresponding input. For example if you are editing the day and the year and month are already set, once you completely set the day it will trigger.',\n  ),\n  /**\n   * Triggers the onError once one input date is wrong\n   */\n  onError: PropTypes.func.description('Triggers the onError once one input date is wrong'),\n  /**\n   * Default value once the component is initialized MMDDYYYY\n   */\n  value: PropTypes.string.description('Default value once the component is initialized MMDDYYYY'),\n  /**\n   * Whether the date input is disabled or not\n   */\n  disabled: PropTypes.bool.description('Whether the date input is disabled or not'),\n  /**\n   * tab index\n   */\n  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('tab index'),\n};\n\nexport const defaultProps = {\n  onFocus: noop,\n  onBlur: noop,\n  onChange: noop,\n  onDateChange: noop,\n  onKeyDown: noop,\n  onError: noop,\n  value: '',\n  disabled: false,\n  containerProps: {},\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\nimport { noop } from 'lodash';\n\nexport const props = {\n  /** Props to inject to date input wrapper */\n  containerProps: PropTypes.object.description('Props to inject to date input wrapper'),\n  /**\n   * Triggers the onBlur when focus moves out of date input\n   */\n  onBlur: PropTypes.func.description('Triggers the onBlur when focus moves out of date input'),\n  /**\n   * Triggers the onFocus when the component gets the focus\n   */\n  onFocus: PropTypes.func.description('Triggers the onFocus when the component gets the focus'),\n  /**\n   * Triggers the onKeyDown\n   */\n  onKeyDown: PropTypes.func.description('Triggers the onKeyDown'),\n  /**\n   * Allows a function that is triggered once the date input changes\n   */\n  onChange: PropTypes.func.description('Allows a function that is triggered once the date input changes'),\n  /**\n   * Triggers when the date is completely set and  only once you have blurred the\n   * corresponding input. For example if you are editing the day and the year and month\n   * are already set, once you completely set the day it will trigger.\n   */\n  onDateChange: PropTypes.func.description(\n    ' Triggers when the date is completely set and  only once you have blurred the corresponding input. For example if you are editing the day and the year and month are already set, once you completely set the day it will trigger.',\n  ),\n  /**\n   * Triggers the onError once one input date is wrong\n   */\n  onError: PropTypes.func.description('Triggers the onError once one input date is wrong'),\n  /**\n   * Default value once the component is initialized MMDDYYYY\n   */\n  value: PropTypes.string.description('Default value once the component is initialized MMDDYYYY'),\n  /**\n   * Whether the date input is disabled or not\n   */\n  disabled: PropTypes.bool.description('Whether the date input is disabled or not'),\n  /**\n   * tab index\n   */\n  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('tab index'),\n};\n\nexport const defaultProps = {\n  onFocus: noop,\n  onBlur: noop,\n  onChange: noop,\n  onDateChange: noop,\n  onKeyDown: noop,\n  onError: noop,\n  value: '',\n  disabled: false,\n  containerProps: {},\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAEd,MAAM,QAAQ;AAAA,EAEnB,gBAAgB,UAAU,OAAO,YAAY,uCAAuC;AAAA,EAIpF,QAAQ,UAAU,KAAK,YAAY,wDAAwD;AAAA,EAI3F,SAAS,UAAU,KAAK,YAAY,wDAAwD;AAAA,EAI5F,WAAW,UAAU,KAAK,YAAY,wBAAwB;AAAA,EAI9D,UAAU,UAAU,KAAK,YAAY,iEAAiE;AAAA,EAMtG,cAAc,UAAU,KAAK;AAAA,IAC3B;AAAA,EACF;AAAA,EAIA,SAAS,UAAU,KAAK,YAAY,mDAAmD;AAAA,EAIvF,OAAO,UAAU,OAAO,YAAY,0DAA0D;AAAA,EAI9F,UAAU,UAAU,KAAK,YAAY,2CAA2C;AAAA,EAIhF,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,WAAW;AAC7F;AAEO,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,cAAc;AAAA,EACd,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB,CAAC;AACnB;",
   "names": []
 }

package/dist/esm/DateInputV2/index.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { DateInputs } from "./components/DateInputs";
-export * from "./components/DSDateInput";
+import { DateInputs } from "./components/DateInputs.js";
+export * from "./components/DSDateInput.js";
 export {
   DateInputs as DateInputsV2Impl
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/DateInputV2/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DateInputs as DateInputsV2Impl } from './components/DateInputs';\nexport * from './components/DSDateInput';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DateInputs as DateInputsV2Impl } from './components/DateInputs.js';\nexport * from './components/DSDateInput.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAuB,kBAAwB;AAC/C,cAAc;",
   "names": []
 }

package/dist/esm/ExpandableInput/DSExpandableInput.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { ExpandableInputImpl } from "./ExpandableInputImpl";
+import { ExpandableInputImpl } from "./ExpandableInputImpl.js";
 const DSExpandableInput = ({
   containerProps = {},
   innerRef,

package/dist/esm/ExpandableInput/DSExpandableInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/ExpandableInput/DSExpandableInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ExpandableInputImpl } from './ExpandableInputImpl';\n\nconst DSExpandableInput = ({\n  containerProps = {},\n  innerRef,\n  className = '',\n  style = {},\n  triggerComponent = undefined,\n  children,\n  isOpen = false,\n  onOpen = () => null,\n  onClose = () => null,\n  onBlur = () => null,\n  width = undefined,\n}) => (\n  <ExpandableInputImpl\n    className={className}\n    containerProps={containerProps}\n    innerRef={innerRef}\n    isOpen={isOpen}\n    onBlur={onBlur}\n    onClose={onClose}\n    onOpen={onOpen}\n    style={style}\n    triggerComponent={triggerComponent}\n    width={width}\n  >\n    {children}\n  </ExpandableInputImpl>\n);\n\nexport { DSExpandableInput };\nexport default DSExpandableInput;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ExpandableInputImpl } from './ExpandableInputImpl.js';\n\nconst DSExpandableInput = ({\n  containerProps = {},\n  innerRef,\n  className = '',\n  style = {},\n  triggerComponent = undefined,\n  children,\n  isOpen = false,\n  onOpen = () => null,\n  onClose = () => null,\n  onBlur = () => null,\n  width = undefined,\n}) => (\n  <ExpandableInputImpl\n    className={className}\n    containerProps={containerProps}\n    innerRef={innerRef}\n    isOpen={isOpen}\n    onBlur={onBlur}\n    onClose={onClose}\n    onOpen={onOpen}\n    style={style}\n    triggerComponent={triggerComponent}\n    width={width}\n  >\n    {children}\n  </ExpandableInputImpl>\n);\n\nexport { DSExpandableInput };\nexport default DSExpandableInput;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACgBrB;AAfF,SAAS,2BAA2B;AAEpC,MAAM,oBAAoB,CAAC;AAAA,EACzB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ,CAAC;AAAA,EACT,mBAAmB;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,EACT,SAAS,MAAM;AAAA,EACf,UAAU,MAAM;AAAA,EAChB,SAAS,MAAM;AAAA,EACf,QAAQ;AACV,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEC;AAAA;AACH;AAIF,IAAO,4BAAQ;",
   "names": []
 }

package/dist/esm/ExpandableInput/ExpandableInputImpl.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import React2, { Component, cloneElement } from "react";
 import { aggregatedClasses } from "@elliemae/ds-classnames";
 import { isFunction } from "@elliemae/ds-shared";
-import { InputAddonWrapper } from "../Input";
+import { InputAddonWrapper } from "../Input/index.js";
 const blockName = "expandable-input";
 const ExpandableInput = aggregatedClasses("div")(blockName, null, ({ isOpen }) => ({ opened: isOpen }));
 const InputWrapper = aggregatedClasses(InputAddonWrapper)(blockName, "wrapper", ({ isOpen }) => ({ opened: isOpen }));

package/dist/esm/ExpandableInput/ExpandableInputImpl.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/ExpandableInput/ExpandableInputImpl.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { Component, cloneElement } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { isFunction } from '@elliemae/ds-shared';\nimport { InputAddonWrapper } from '../Input';\n\nconst blockName = 'expandable-input';\n\nconst ExpandableInput = aggregatedClasses('div')(blockName, null, ({ isOpen }) => ({ opened: isOpen }));\nconst InputWrapper = aggregatedClasses(InputAddonWrapper)(blockName, 'wrapper', ({ isOpen }) => ({ opened: isOpen }));\n\nclass ExpandableInputImpl extends Component {\n  componentDidUpdate(prevProps) {\n    const { isOpen } = this.props;\n    if (isOpen && isOpen !== prevProps.isOpen) this.input.focus();\n  }\n\n  render() {\n    const { innerRef, triggerComponent, children, width, isOpen, onOpen, onClose, onBlur, containerProps } = this.props;\n    const InputComponent = React.Children.only(children);\n    const handleTriggerClick = (e) => {\n      if (isFunction(triggerComponent.onClick)) triggerComponent.onClick(e);\n      if (isOpen) {\n        onClose();\n      } else {\n        onOpen();\n      }\n    };\n\n    return (\n      <ExpandableInput\n        {...containerProps}\n        classProps={{ isOpen }}\n        innerRef={innerRef}\n        style={{ width: isOpen && width }}\n      >\n        <InputWrapper\n          rightComponents={[\n            cloneElement(triggerComponent, {\n              key: 'handler',\n              onClick: handleTriggerClick,\n            }),\n          ]}\n        >\n          {cloneElement(InputComponent, {\n            className: 'expandable-input__input',\n            innerRef: (node) => (this.input = node),\n            onBlur,\n          })}\n        </InputWrapper>\n      </ExpandableInput>\n    );\n  }\n}\n\nexport { ExpandableInputImpl };\nexport default ExpandableInputImpl;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { Component, cloneElement } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { isFunction } from '@elliemae/ds-shared';\nimport { InputAddonWrapper } from '../Input/index.js';\n\nconst blockName = 'expandable-input';\n\nconst ExpandableInput = aggregatedClasses('div')(blockName, null, ({ isOpen }) => ({ opened: isOpen }));\nconst InputWrapper = aggregatedClasses(InputAddonWrapper)(blockName, 'wrapper', ({ isOpen }) => ({ opened: isOpen }));\n\nclass ExpandableInputImpl extends Component {\n  componentDidUpdate(prevProps) {\n    const { isOpen } = this.props;\n    if (isOpen && isOpen !== prevProps.isOpen) this.input.focus();\n  }\n\n  render() {\n    const { innerRef, triggerComponent, children, width, isOpen, onOpen, onClose, onBlur, containerProps } = this.props;\n    const InputComponent = React.Children.only(children);\n    const handleTriggerClick = (e) => {\n      if (isFunction(triggerComponent.onClick)) triggerComponent.onClick(e);\n      if (isOpen) {\n        onClose();\n      } else {\n        onOpen();\n      }\n    };\n\n    return (\n      <ExpandableInput\n        {...containerProps}\n        classProps={{ isOpen }}\n        innerRef={innerRef}\n        style={{ width: isOpen && width }}\n      >\n        <InputWrapper\n          rightComponents={[\n            cloneElement(triggerComponent, {\n              key: 'handler',\n              onClick: handleTriggerClick,\n            }),\n          ]}\n        >\n          {cloneElement(InputComponent, {\n            className: 'expandable-input__input',\n            innerRef: (node) => (this.input = node),\n            onBlur,\n          })}\n        </InputWrapper>\n      </ExpandableInput>\n    );\n  }\n}\n\nexport { ExpandableInputImpl };\nexport default ExpandableInputImpl;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACmCf;AAnCR,OAAOA,UAAS,WAAW,oBAAoB;AAC/C,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAElC,MAAM,YAAY;AAElB,MAAM,kBAAkB,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,OAAO,OAAO,EAAE,QAAQ,OAAO,EAAE;AACtG,MAAM,eAAe,kBAAkB,iBAAiB,EAAE,WAAW,WAAW,CAAC,EAAE,OAAO,OAAO,EAAE,QAAQ,OAAO,EAAE;AAEpH,MAAM,4BAA4B,UAAU;AAAA,EAC1C,mBAAmB,WAAW;AAC5B,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,QAAI,UAAU,WAAW,UAAU;AAAQ,WAAK,MAAM,MAAM;AAAA,EAC9D;AAAA,EAEA,SAAS;AACP,UAAM,EAAE,UAAU,kBAAkB,UAAU,OAAO,QAAQ,QAAQ,SAAS,QAAQ,eAAe,IAAI,KAAK;AAC9G,UAAM,iBAAiBA,OAAM,SAAS,KAAK,QAAQ;AACnD,UAAM,qBAAqB,CAAC,MAAM;AAChC,UAAI,WAAW,iBAAiB,OAAO;AAAG,yBAAiB,QAAQ,CAAC;AACpE,UAAI,QAAQ;AACV,gBAAQ;AAAA,MACV,OAAO;AACL,eAAO;AAAA,MACT;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,YAAY,EAAE,OAAO;AAAA,QACrB;AAAA,QACA,OAAO,EAAE,OAAO,UAAU,MAAM;AAAA,QAEhC;AAAA,UAAC;AAAA;AAAA,YACC,iBAAiB;AAAA,cACf,aAAa,kBAAkB;AAAA,gBAC7B,KAAK;AAAA,gBACL,SAAS;AAAA,cACX,CAAC;AAAA,YACH;AAAA,YAEC,uBAAa,gBAAgB;AAAA,cAC5B,WAAW;AAAA,cACX,UAAU,CAAC,SAAU,KAAK,QAAQ;AAAA,cAClC;AAAA,YACF,CAAC;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAGA,IAAO,8BAAQ;",
   "names": ["React"]
 }

package/dist/esm/ExpandableInput/index.js

@@ -1,3 +1,3 @@
 import * as React from "react";
-export * from "./DSExpandableInput";
+export * from "./DSExpandableInput.js";
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/ExpandableInput/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSExpandableInput';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSExpandableInput.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
   "names": []
 }

package/dist/esm/FloatingLabelInput/DSFloatingLabelInput.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { FloatingLabelInputImpl } from "./FloatingLabelInputImpl";
-import { DSLabel } from "../FormItem/Label/DSLabel";
-import { DSTextBox } from "../TextBox";
+import { FloatingLabelInputImpl } from "./FloatingLabelInputImpl.js";
+import { DSLabel } from "../FormItem/Label/DSLabel.js";
+import { DSTextBox } from "../TextBox/index.js";
 const noop = () => {
 };
 const DSFloatingLabelInput = ({

package/dist/esm/FloatingLabelInput/DSFloatingLabelInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/FloatingLabelInput/DSFloatingLabelInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { FloatingLabelInputImpl } from './FloatingLabelInputImpl';\nimport { DSLabel } from '../FormItem/Label/DSLabel';\nimport { DSTextBox } from '../TextBox';\n\nconst noop = () => {};\nconst DSFloatingLabelInput = ({\n  containerProps = {},\n  arialLabel = '',\n  /**\n   * Gets the reference for the input controller\n   *\n   * @param {HTMLElement} node\n   */\n  innerRef = noop,\n  /**\n   * Custom className for floatingLabelInput\n   */\n  className = '',\n  /**\n   * Props injected to the input component\n   *\n   * @type Object\n   */\n  extraInputProps = {},\n  /**\n   * Input controller\n   *\n   * @type {element}\n   */\n  inputComponent = DSTextBox,\n  /**\n   * Input value\n   *\n   * @type {string}\n   */\n  value = '',\n  /**\n   * Label component\n   *\n   * @type {element}\n   */\n  labelComponent = DSLabel,\n  /**\n   * Label text\n   *\n   * @type {string | element}\n   */\n  labelText = null,\n  /**\n   * Callback when input controller has changed\n   *\n   * @param event\n   */\n  onChange = noop,\n  onBlur = noop,\n  onFocus = noop,\n  /**\n   * Whether the label is floating or not\n   *\n   * @type {boolean}\n   */\n  isOpen = false,\n  /**\n   * Whether ...\n   *\n   * @type {boolean}\n   */\n  hasError = false,\n  /**\n   * Whether ...\n   *\n   * @type {boolean}\n   */\n  readOnly = false,\n  /**\n   * Whether ...\n   *\n   * @type {boolean}\n   */\n  disabled = false,\n  /**\n   * Whether ...\n   *\n   * @type {boolean}\n   */\n  required = false,\n  optional = false,\n  mask = null,\n  useSubfix = '',\n}) => (\n  <FloatingLabelInputImpl\n    arialLabel={arialLabel}\n    className={className}\n    disabled={disabled}\n    extraInputProps={extraInputProps}\n    hasError={hasError}\n    innerRef={innerRef}\n    inputComponent={inputComponent}\n    isOpen={isOpen}\n    labelComponent={labelComponent}\n    labelText={labelText}\n    mask={mask}\n    onBlur={onBlur}\n    onChange={onChange}\n    onFocus={onFocus}\n    optional={optional}\n    readOnly={readOnly}\n    required={required}\n    useSubfix={useSubfix}\n    value={value}\n  />\n);\n\nexport { DSFloatingLabelInput };\nexport default DSFloatingLabelInput;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { FloatingLabelInputImpl } from './FloatingLabelInputImpl.js';\nimport { DSLabel } from '../FormItem/Label/DSLabel.js';\nimport { DSTextBox } from '../TextBox/index.js';\n\nconst noop = () => {};\nconst DSFloatingLabelInput = ({\n  containerProps = {},\n  arialLabel = '',\n  /**\n   * Gets the reference for the input controller\n   *\n   * @param {HTMLElement} node\n   */\n  innerRef = noop,\n  /**\n   * Custom className for floatingLabelInput\n   */\n  className = '',\n  /**\n   * Props injected to the input component\n   *\n   * @type Object\n   */\n  extraInputProps = {},\n  /**\n   * Input controller\n   *\n   * @type {element}\n   */\n  inputComponent = DSTextBox,\n  /**\n   * Input value\n   *\n   * @type {string}\n   */\n  value = '',\n  /**\n   * Label component\n   *\n   * @type {element}\n   */\n  labelComponent = DSLabel,\n  /**\n   * Label text\n   *\n   * @type {string | element}\n   */\n  labelText = null,\n  /**\n   * Callback when input controller has changed\n   *\n   * @param event\n   */\n  onChange = noop,\n  onBlur = noop,\n  onFocus = noop,\n  /**\n   * Whether the label is floating or not\n   *\n   * @type {boolean}\n   */\n  isOpen = false,\n  /**\n   * Whether ...\n   *\n   * @type {boolean}\n   */\n  hasError = false,\n  /**\n   * Whether ...\n   *\n   * @type {boolean}\n   */\n  readOnly = false,\n  /**\n   * Whether ...\n   *\n   * @type {boolean}\n   */\n  disabled = false,\n  /**\n   * Whether ...\n   *\n   * @type {boolean}\n   */\n  required = false,\n  optional = false,\n  mask = null,\n  useSubfix = '',\n}) => (\n  <FloatingLabelInputImpl\n    arialLabel={arialLabel}\n    className={className}\n    disabled={disabled}\n    extraInputProps={extraInputProps}\n    hasError={hasError}\n    innerRef={innerRef}\n    inputComponent={inputComponent}\n    isOpen={isOpen}\n    labelComponent={labelComponent}\n    labelText={labelText}\n    mask={mask}\n    onBlur={onBlur}\n    onChange={onChange}\n    onFocus={onFocus}\n    optional={optional}\n    readOnly={readOnly}\n    required={required}\n    useSubfix={useSubfix}\n    value={value}\n  />\n);\n\nexport { DSFloatingLabelInput };\nexport default DSFloatingLabelInput;\n"],
   "mappings": "AAAA,YAAY,WAAW;AC2FrB;AA1FF,SAAS,8BAA8B;AACvC,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAE1B,MAAM,OAAO,MAAM;AAAC;AACpB,MAAM,uBAAuB,CAAC;AAAA,EAC5B,iBAAiB,CAAC;AAAA,EAClB,aAAa;AAAA,EAMb,WAAW;AAAA,EAIX,YAAY;AAAA,EAMZ,kBAAkB,CAAC;AAAA,EAMnB,iBAAiB;AAAA,EAMjB,QAAQ;AAAA,EAMR,iBAAiB;AAAA,EAMjB,YAAY;AAAA,EAMZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EAMV,SAAS;AAAA,EAMT,WAAW;AAAA,EAMX,WAAW;AAAA,EAMX,WAAW;AAAA,EAMX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AACd,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;AAIF,IAAO,+BAAQ;",
   "names": []
 }

package/dist/esm/FloatingLabelInput/FloatingLabelInputImpl.js

@@ -5,8 +5,8 @@ import { aggregatedClasses } from "@elliemae/ds-classnames";
 import { getComponentFromProps } from "@elliemae/ds-utilities";
 import { DSTextWrapper } from "@elliemae/ds-text-wrapper";
 import { ResizeObserver } from "resize-observer";
-import { getSvgPath } from "./getSvgPath";
-import { RequiredMark } from "../RequiredMark/RequiredMark";
+import { getSvgPath } from "./getSvgPath.js";
+import { RequiredMark } from "../RequiredMark/RequiredMark.js";
 const blockName = "labeled-outline";
 const Wrapper = aggregatedClasses("div")(blockName, null, ({ isOpen }) => ({
   "has-value": isOpen

package/dist/esm/FloatingLabelInput/FloatingLabelInputImpl.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/FloatingLabelInput/FloatingLabelInputImpl.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-unused-state */\nimport React, { Component } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { getComponentFromProps } from '@elliemae/ds-utilities';\nimport { DSTextWrapper } from '@elliemae/ds-text-wrapper';\nimport { ResizeObserver } from 'resize-observer';\nimport { getSvgPath } from './getSvgPath';\nimport { RequiredMark } from '../RequiredMark/RequiredMark';\n\nconst blockName = 'labeled-outline';\n\nconst Wrapper = aggregatedClasses('div')(blockName, null, ({ isOpen }) => ({\n  'has-value': isOpen,\n}));\nconst FloatingLabel = aggregatedClasses('label')(blockName, 'label');\nconst OutlineIdle = aggregatedClasses('div')(blockName, 'idle');\nconst Outline = aggregatedClasses('div')(blockName, 'outline');\nconst OutlinePath = aggregatedClasses('path')(blockName, 'outline__path');\n\nconst shouldUpdateSvgPath = ({ width, height, labelWidth }, prevSizes) => {\n  if (width !== prevSizes.width) return true;\n  if (height !== prevSizes.height) return true;\n  return labelWidth !== prevSizes.labelWidth;\n};\n\nclass FloatingLabelInputImpl extends Component {\n  resizeObserver = new ResizeObserver(() => this.updatePath());\n\n  prevSizes = {};\n\n  static defaultProps = { onChange: () => null };\n\n  constructor(props) {\n    super(props);\n    this.wrapperRef = React.createRef();\n    this.outlinePathRef = React.createRef();\n    this.outlineIdleRef = React.createRef();\n    this.labelRef = React.createRef();\n\n    this.sizes = this.sizes.bind(this);\n    this.isOpened = this.isOpened.bind(this);\n    this.getValue = this.getValue.bind(this);\n    this.updatePath = this.updatePath.bind(this);\n  }\n\n  componentDidMount() {\n    this.resizeObserver.observe(this.wrapperRef.current);\n  }\n\n  componentDidUpdate() {\n    if (!shouldUpdateSvgPath(this.sizes, this.prevSizes)) return;\n    this.updatePath();\n  }\n\n  componentWillUnmount() {\n    this.resizeObserver.unobserve(this.wrapperRef.current);\n  }\n\n  get sizes() {\n    const { current: labelEl } = this.labelRef;\n    const { current: wrapperEl } = this.wrapperRef;\n    const { current: outlineIdleEl } = this.outlineIdleRef;\n    const elStyles = window.getComputedStyle(outlineIdleEl);\n    const leftRadius = elStyles.getPropertyValue('border-top-left-radius');\n    const rightRadius = elStyles.getPropertyValue('border-top-right-radius');\n    const hasLeftRadius = parseFloat(leftRadius) !== 0;\n    const hasRightRadius = parseFloat(rightRadius) !== 0;\n    return {\n      labelWidth: labelEl.offsetWidth * 0.9,\n      width: wrapperEl.offsetWidth,\n      height: wrapperEl.offsetHeight,\n      radiusStyle: leftRadius,\n      hasLeftRadius,\n      hasRightRadius,\n    };\n  }\n\n  get isOpened() {\n    const { focused, isOpen, value } = this.props;\n    return focused || (Array.isArray(value) ? !!value.length : !!value) || isOpen;\n  }\n\n  getValue(value) {\n    const { valueAccessor } = this.props;\n    if (valueAccessor) return valueAccessor(value);\n    // is an event\n    if (value && value.target) return value.target.value;\n\n    return value;\n  }\n\n  updatePath() {\n    const path = getSvgPath(this.sizes);\n    this.prevSizes = this.sizes;\n    this.outlinePathRef.current.setAttribute('d', path);\n  }\n\n  render() {\n    const {\n      ariaLabel,\n      hasError,\n      readOnly,\n      disabled,\n      inputComponent,\n      labelText,\n      onBlur,\n      onFocus,\n      innerRef,\n      extraInputProps,\n      required,\n      value,\n      onChange,\n      mask,\n      useSubfix,\n      optional,\n    } = this.props;\n\n    const inputProps = {\n      ariaLabel,\n      className: 'floating-label-input-controller',\n      disabled,\n      hasError,\n      onBlur,\n      onChange,\n      onFocus,\n      readOnly,\n      value,\n      innerRef,\n      mask,\n      useSubfix,\n      ...extraInputProps,\n    };\n    const InputComponent = getComponentFromProps(inputComponent, inputProps);\n    const isOpen = this.isOpened;\n\n    return (\n      <Wrapper\n        classProps={{\n          hasError,\n          isOpen,\n          readOnly,\n          disabled,\n        }}\n        innerRef={this.wrapperRef}\n        onBlur={() => null}\n        onFocus={() => null}\n        onMouseOut={this.handleMouseOut}\n        onMouseOver={this.handleMouseOver}\n      >\n        {InputComponent}\n        <FloatingLabel classProps={{ isOpen }} innerRef={this.labelRef}>\n          <DSTextWrapper maxWidth=\"100%\" text={labelText} />\n          <RequiredMark optional={optional} required={required} />\n        </FloatingLabel>\n        <Outline>\n          <svg>\n            <OutlinePath innerRef={this.outlinePathRef} />\n          </svg>\n        </Outline>\n        <OutlineIdle innerRef={this.outlineIdleRef} />\n      </Wrapper>\n    );\n  }\n}\n\nexport { FloatingLabelInputImpl };\nexport default FloatingLabelInputImpl;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-unused-state */\nimport React, { Component } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { getComponentFromProps } from '@elliemae/ds-utilities';\nimport { DSTextWrapper } from '@elliemae/ds-text-wrapper';\nimport { ResizeObserver } from 'resize-observer';\nimport { getSvgPath } from './getSvgPath.js';\nimport { RequiredMark } from '../RequiredMark/RequiredMark.js';\n\nconst blockName = 'labeled-outline';\n\nconst Wrapper = aggregatedClasses('div')(blockName, null, ({ isOpen }) => ({\n  'has-value': isOpen,\n}));\nconst FloatingLabel = aggregatedClasses('label')(blockName, 'label');\nconst OutlineIdle = aggregatedClasses('div')(blockName, 'idle');\nconst Outline = aggregatedClasses('div')(blockName, 'outline');\nconst OutlinePath = aggregatedClasses('path')(blockName, 'outline__path');\n\nconst shouldUpdateSvgPath = ({ width, height, labelWidth }, prevSizes) => {\n  if (width !== prevSizes.width) return true;\n  if (height !== prevSizes.height) return true;\n  return labelWidth !== prevSizes.labelWidth;\n};\n\nclass FloatingLabelInputImpl extends Component {\n  resizeObserver = new ResizeObserver(() => this.updatePath());\n\n  prevSizes = {};\n\n  static defaultProps = { onChange: () => null };\n\n  constructor(props) {\n    super(props);\n    this.wrapperRef = React.createRef();\n    this.outlinePathRef = React.createRef();\n    this.outlineIdleRef = React.createRef();\n    this.labelRef = React.createRef();\n\n    this.sizes = this.sizes.bind(this);\n    this.isOpened = this.isOpened.bind(this);\n    this.getValue = this.getValue.bind(this);\n    this.updatePath = this.updatePath.bind(this);\n  }\n\n  componentDidMount() {\n    this.resizeObserver.observe(this.wrapperRef.current);\n  }\n\n  componentDidUpdate() {\n    if (!shouldUpdateSvgPath(this.sizes, this.prevSizes)) return;\n    this.updatePath();\n  }\n\n  componentWillUnmount() {\n    this.resizeObserver.unobserve(this.wrapperRef.current);\n  }\n\n  get sizes() {\n    const { current: labelEl } = this.labelRef;\n    const { current: wrapperEl } = this.wrapperRef;\n    const { current: outlineIdleEl } = this.outlineIdleRef;\n    const elStyles = window.getComputedStyle(outlineIdleEl);\n    const leftRadius = elStyles.getPropertyValue('border-top-left-radius');\n    const rightRadius = elStyles.getPropertyValue('border-top-right-radius');\n    const hasLeftRadius = parseFloat(leftRadius) !== 0;\n    const hasRightRadius = parseFloat(rightRadius) !== 0;\n    return {\n      labelWidth: labelEl.offsetWidth * 0.9,\n      width: wrapperEl.offsetWidth,\n      height: wrapperEl.offsetHeight,\n      radiusStyle: leftRadius,\n      hasLeftRadius,\n      hasRightRadius,\n    };\n  }\n\n  get isOpened() {\n    const { focused, isOpen, value } = this.props;\n    return focused || (Array.isArray(value) ? !!value.length : !!value) || isOpen;\n  }\n\n  getValue(value) {\n    const { valueAccessor } = this.props;\n    if (valueAccessor) return valueAccessor(value);\n    // is an event\n    if (value && value.target) return value.target.value;\n\n    return value;\n  }\n\n  updatePath() {\n    const path = getSvgPath(this.sizes);\n    this.prevSizes = this.sizes;\n    this.outlinePathRef.current.setAttribute('d', path);\n  }\n\n  render() {\n    const {\n      ariaLabel,\n      hasError,\n      readOnly,\n      disabled,\n      inputComponent,\n      labelText,\n      onBlur,\n      onFocus,\n      innerRef,\n      extraInputProps,\n      required,\n      value,\n      onChange,\n      mask,\n      useSubfix,\n      optional,\n    } = this.props;\n\n    const inputProps = {\n      ariaLabel,\n      className: 'floating-label-input-controller',\n      disabled,\n      hasError,\n      onBlur,\n      onChange,\n      onFocus,\n      readOnly,\n      value,\n      innerRef,\n      mask,\n      useSubfix,\n      ...extraInputProps,\n    };\n    const InputComponent = getComponentFromProps(inputComponent, inputProps);\n    const isOpen = this.isOpened;\n\n    return (\n      <Wrapper\n        classProps={{\n          hasError,\n          isOpen,\n          readOnly,\n          disabled,\n        }}\n        innerRef={this.wrapperRef}\n        onBlur={() => null}\n        onFocus={() => null}\n        onMouseOut={this.handleMouseOut}\n        onMouseOver={this.handleMouseOver}\n      >\n        {InputComponent}\n        <FloatingLabel classProps={{ isOpen }} innerRef={this.labelRef}>\n          <DSTextWrapper maxWidth=\"100%\" text={labelText} />\n          <RequiredMark optional={optional} required={required} />\n        </FloatingLabel>\n        <Outline>\n          <svg>\n            <OutlinePath innerRef={this.outlinePathRef} />\n          </svg>\n        </Outline>\n        <OutlineIdle innerRef={this.outlineIdleRef} />\n      </Wrapper>\n    );\n  }\n}\n\nexport { FloatingLabelInputImpl };\nexport default FloatingLabelInputImpl;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACsJf,SACE,KADF;AArJR,OAAOA,UAAS,iBAAiB;AACjC,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAE7B,MAAM,YAAY;AAElB,MAAM,UAAU,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,OAAO,OAAO;AAAA,EACzE,aAAa;AACf,EAAE;AACF,MAAM,gBAAgB,kBAAkB,OAAO,EAAE,WAAW,OAAO;AACnE,MAAM,cAAc,kBAAkB,KAAK,EAAE,WAAW,MAAM;AAC9D,MAAM,UAAU,kBAAkB,KAAK,EAAE,WAAW,SAAS;AAC7D,MAAM,cAAc,kBAAkB,MAAM,EAAE,WAAW,eAAe;AAExE,MAAM,sBAAsB,CAAC,EAAE,OAAO,QAAQ,WAAW,GAAG,cAAc;AACxE,MAAI,UAAU,UAAU;AAAO,WAAO;AACtC,MAAI,WAAW,UAAU;AAAQ,WAAO;AACxC,SAAO,eAAe,UAAU;AAClC;AAEA,MAAM,+BAA+B,UAAU;AAAA,EAO7C,YAAY,OAAO;AACjB,UAAM,KAAK;AAPb,0BAAiB,IAAI,eAAe,MAAM,KAAK,WAAW,CAAC;AAE3D,qBAAY,CAAC;AAMX,SAAK,aAAaA,OAAM,UAAU;AAClC,SAAK,iBAAiBA,OAAM,UAAU;AACtC,SAAK,iBAAiBA,OAAM,UAAU;AACtC,SAAK,WAAWA,OAAM,UAAU;AAEhC,SAAK,QAAQ,KAAK,MAAM,KAAK,IAAI;AACjC,SAAK,WAAW,KAAK,SAAS,KAAK,IAAI;AACvC,SAAK,WAAW,KAAK,SAAS,KAAK,IAAI;AACvC,SAAK,aAAa,KAAK,WAAW,KAAK,IAAI;AAAA,EAC7C;AAAA,EAEA,oBAAoB;AAClB,SAAK,eAAe,QAAQ,KAAK,WAAW,OAAO;AAAA,EACrD;AAAA,EAEA,qBAAqB;AACnB,QAAI,CAAC,oBAAoB,KAAK,OAAO,KAAK,SAAS;AAAG;AACtD,SAAK,WAAW;AAAA,EAClB;AAAA,EAEA,uBAAuB;AACrB,SAAK,eAAe,UAAU,KAAK,WAAW,OAAO;AAAA,EACvD;AAAA,EAEA,IAAI,QAAQ;AACV,UAAM,EAAE,SAAS,QAAQ,IAAI,KAAK;AAClC,UAAM,EAAE,SAAS,UAAU,IAAI,KAAK;AACpC,UAAM,EAAE,SAAS,cAAc,IAAI,KAAK;AACxC,UAAM,WAAW,OAAO,iBAAiB,aAAa;AACtD,UAAM,aAAa,SAAS,iBAAiB,wBAAwB;AACrE,UAAM,cAAc,SAAS,iBAAiB,yBAAyB;AACvE,UAAM,gBAAgB,WAAW,UAAU,MAAM;AACjD,UAAM,iBAAiB,WAAW,WAAW,MAAM;AACnD,WAAO;AAAA,MACL,YAAY,QAAQ,cAAc;AAAA,MAClC,OAAO,UAAU;AAAA,MACjB,QAAQ,UAAU;AAAA,MAClB,aAAa;AAAA,MACb;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EAEA,IAAI,WAAW;AACb,UAAM,EAAE,SAAS,QAAQ,MAAM,IAAI,KAAK;AACxC,WAAO,YAAY,MAAM,QAAQ,KAAK,IAAI,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC,UAAU;AAAA,EACzE;AAAA,EAEA,SAAS,OAAO;AACd,UAAM,EAAE,cAAc,IAAI,KAAK;AAC/B,QAAI;AAAe,aAAO,cAAc,KAAK;AAE7C,QAAI,SAAS,MAAM;AAAQ,aAAO,MAAM,OAAO;AAE/C,WAAO;AAAA,EACT;AAAA,EAEA,aAAa;AACX,UAAM,OAAO,WAAW,KAAK,KAAK;AAClC,SAAK,YAAY,KAAK;AACtB,SAAK,eAAe,QAAQ,aAAa,KAAK,IAAI;AAAA,EACpD;AAAA,EAEA,SAAS;AACP,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,KAAK;AAET,UAAM,aAAa;AAAA,MACjB;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AACA,UAAM,iBAAiB,sBAAsB,gBAAgB,UAAU;AACvE,UAAM,SAAS,KAAK;AAEpB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAY;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,UAAU,KAAK;AAAA,QACf,QAAQ,MAAM;AAAA,QACd,SAAS,MAAM;AAAA,QACf,YAAY,KAAK;AAAA,QACjB,aAAa,KAAK;AAAA,QAEjB;AAAA;AAAA,UACD,qBAAC,iBAAc,YAAY,EAAE,OAAO,GAAG,UAAU,KAAK,UACpD;AAAA,gCAAC,iBAAc,UAAS,QAAO,MAAM,WAAW;AAAA,YAChD,oBAAC,gBAAa,UAAoB,UAAoB;AAAA,aACxD;AAAA,UACA,oBAAC,WACC,8BAAC,SACC,8BAAC,eAAY,UAAU,KAAK,gBAAgB,GAC9C,GACF;AAAA,UACA,oBAAC,eAAY,UAAU,KAAK,gBAAgB;AAAA;AAAA;AAAA,IAC9C;AAAA,EAEJ;AACF;AA1IM,uBAKG,eAAe,EAAE,UAAU,MAAM,KAAK;AAwI/C,IAAO,iCAAQ;",
   "names": ["React"]
 }

package/dist/esm/FloatingLabelInput/index.js

@@ -1,3 +1,3 @@
 import * as React from "react";
-export * from "./DSFloatingLabelInput";
+export * from "./DSFloatingLabelInput.js";
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/FloatingLabelInput/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSFloatingLabelInput';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSFloatingLabelInput.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
   "names": []
 }

package/dist/esm/FormItem/DSFormItemLayout.js

@@ -1,15 +1,16 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { describe, getComponentFromProps } from "@elliemae/ds-utilities";
+import { getComponentFromProps, useDeprecateComponent } from "@elliemae/ds-utilities";
+import { describe } from "@elliemae/ds-props-helpers";
 import { Group } from "@elliemae/ds-shared";
-import { DSInputGroup } from "../InputGroup";
-import { DSFloatingLabelInput } from "../FloatingLabelInput";
-import { DSError } from "./Error/DSError";
-import { props } from "./props";
-import { defaultProps } from "./defaultProps";
-import { FORMITEM_LAYOUT_VARIANTS } from "./variants";
-import { Suffix, SuffixInputWrapper, SuffixWrapper } from "./Suffix/Suffix";
+import { DSInputGroup } from "../InputGroup/index.js";
+import { DSFloatingLabelInput } from "../FloatingLabelInput/index.js";
+import { DSError } from "./Error/DSError.js";
+import { props } from "./props.js";
+import { defaultProps } from "./defaultProps.js";
+import { FORMITEM_LAYOUT_VARIANTS } from "./variants.js";
+import { Suffix, SuffixInputWrapper, SuffixWrapper } from "./Suffix/Suffix.js";
 const blockName = "form-item";
 const Wrapper = aggregatedClasses("div")(blockName, null, ({ leftLabel, variant, fitContent, withHighlight }) => ({
   "with-left-label": leftLabel,
@@ -59,6 +60,7 @@ const DSFormItemLayout = ({
   containerProps,
   ...rest
 }) => {
+  useDeprecateComponent({ componentName: "ds-form/FormItemLayout", version: "3.x Date: 2023 Q1" });
   const isGroup = InputComponent.type === (/* @__PURE__ */ jsx(Group, {})).type;
   const floatingLabelOverride = floatingLabel === "UNSAFE";
   const WrapperContentComp = !isGroup ? WrapperContent : WrapperContentGroup;

package/dist/esm/FormItem/DSFormItemLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/FormItem/DSFormItemLayout.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { describe, getComponentFromProps } from '@elliemae/ds-utilities';\nimport { Group } from '@elliemae/ds-shared';\nimport { DSInputGroup } from '../InputGroup';\nimport { DSFloatingLabelInput } from '../FloatingLabelInput';\nimport { DSError } from './Error/DSError';\nimport { props } from './props';\nimport { defaultProps } from './defaultProps';\nimport { FORMITEM_LAYOUT_VARIANTS } from './variants';\nimport { Suffix, SuffixInputWrapper, SuffixWrapper } from './Suffix/Suffix';\n// import { maskTypes } from '../InputMask/MaskTypes';\n\nexport { DSError, FORMITEM_LAYOUT_VARIANTS };\n\nconst blockName = 'form-item';\n\nconst Wrapper = aggregatedClasses('div')(blockName, null, ({ leftLabel, variant, fitContent, withHighlight }) => ({\n  'with-left-label': leftLabel,\n  'fit-content': fitContent,\n  [variant]: variant,\n  'with-highlight': withHighlight,\n}));\n\nconst WrapperContent = aggregatedClasses('div')(`${blockName}-content`);\nconst WrapperContentGroup = aggregatedClasses('fieldset')(`${blockName}-content`);\n\nconst DSFormItemLayout = ({\n  leftLabel,\n  floatingLabel,\n  name,\n  id,\n  value,\n  inputComponent: InputComponent,\n  labelComponent: LabelComponent,\n  feedbackComponent: FeedbackComponent,\n  labelText,\n  truncateText,\n  hasError,\n  // orientation = 'vertical', // one of [ vertical, horizontal ]\n  validationState, // one of [ success, error, warning ]\n  validationMessage,\n  feedbackMessage,\n  readOnly,\n  focused,\n  type,\n  autoFocus,\n  disabled,\n  onChange,\n  onBlur,\n  onFocus,\n  onPaste,\n  onKeyUp,\n  extraInputProps,\n  extraContent,\n  leftAddon,\n  rightAddon,\n  required,\n  optional,\n  mask,\n  useSubfix,\n  suffix,\n  variant,\n  fitContent,\n  withHighlight,\n  containerProps,\n  ...rest\n}) => {\n  const isGroup = InputComponent.type === (<Group />).type;\n  const floatingLabelOverride = floatingLabel === 'UNSAFE';\n  const WrapperContentComp = !isGroup ? WrapperContent : WrapperContentGroup;\n\n  // group the input props to not duplicate it inside the specific inputComponent (floating or not)\n  const inputProps = {\n    ...extraInputProps,\n    disabled,\n    hasError: hasError || validationState === 'error',\n    id,\n    name,\n    type,\n    autoFocus,\n    onBlur,\n    onChange,\n    onFocus,\n    onPaste,\n    onKeyUp,\n    readOnly,\n    value,\n    mask,\n    useSubfix,\n    variant,\n    required,\n    ...rest,\n  };\n\n  const renderInput = (Input) =>\n    leftAddon || rightAddon ? (\n      <DSInputGroup leftAddon={leftAddon} rightAddon={rightAddon} variant={variant}>\n        {Input}\n      </DSInputGroup>\n    ) : (\n      Input\n    );\n\n  const renderFloating = (\n    <DSFloatingLabelInput\n      {...inputProps}\n      extraInputProps={extraInputProps}\n      focused={focused}\n      inputComponent={InputComponent}\n      labelComponent={LabelComponent}\n      labelText={labelText}\n      optional={optional}\n      required={required}\n      variant={variant}\n    />\n  );\n\n  const InputWithLabel = floatingLabelOverride ? (\n    renderInput(renderFloating)\n  ) : (\n    <>\n      <LabelComponent\n        htmlFor={id || name}\n        label={labelText}\n        optional={optional}\n        required={required}\n        isGroup={isGroup}\n        truncateText={truncateText}\n      />\n      {renderInput(getComponentFromProps(InputComponent, inputProps))}\n    </>\n  );\n\n  if (suffix) {\n    return (\n      <Wrapper\n        classProps={{\n          disabled,\n          readOnly,\n          hasError,\n          leftLabel,\n          variant,\n          fitContent,\n          withHighlight,\n        }}\n        {...containerProps}\n      >\n        <SuffixWrapper className=\"suffix-wrapper\">\n          <SuffixInputWrapper className=\"suffix-input-wrapper\">\n            <WrapperContentComp>\n              {InputWithLabel}\n              {extraContent}\n            </WrapperContentComp>\n            <FeedbackComponent\n              hasError={hasError}\n              text={validationState || hasError ? validationMessage : feedbackMessage}\n            />\n          </SuffixInputWrapper>\n          <Suffix\n            className=\"suffix-label\"\n            label={!!labelText}\n            withFeedback={Boolean(validationMessage || feedbackMessage)}\n          >\n            {suffix}\n          </Suffix>\n        </SuffixWrapper>\n      </Wrapper>\n    );\n  }\n\n  return (\n    <Wrapper\n      classProps={{\n        disabled,\n        readOnly,\n        hasError,\n        leftLabel,\n        variant,\n        fitContent,\n        withHighlight,\n      }}\n      {...containerProps}\n    >\n      <WrapperContentComp>\n        {InputWithLabel}\n        {extraContent}\n      </WrapperContentComp>\n      <FeedbackComponent hasError={hasError} text={validationState || hasError ? validationMessage : feedbackMessage} />\n    </Wrapper>\n  );\n};\n\nDSFormItemLayout.propTypes = props;\nDSFormItemLayout.defaultProps = defaultProps;\nDSFormItemLayout.displayName = 'DSFormItemLayout';\nconst DSFormItemLayoutWithSchema = describe(DSFormItemLayout);\nDSFormItemLayoutWithSchema.propTypes = props;\n\nexport default DSFormItemLayout;\nexport { DSFormItemLayoutWithSchema, DSFormItemLayout };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { getComponentFromProps, useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { Group } from '@elliemae/ds-shared';\nimport { DSInputGroup } from '../InputGroup/index.js';\nimport { DSFloatingLabelInput } from '../FloatingLabelInput/index.js';\nimport { DSError } from './Error/DSError.js';\nimport { props } from './props.js';\nimport { defaultProps } from './defaultProps.js';\nimport { FORMITEM_LAYOUT_VARIANTS } from './variants.js';\nimport { Suffix, SuffixInputWrapper, SuffixWrapper } from './Suffix/Suffix.js';\n// import { maskTypes } from '../InputMask/MaskTypes';\n\nexport { DSError, FORMITEM_LAYOUT_VARIANTS };\n\nconst blockName = 'form-item';\n\nconst Wrapper = aggregatedClasses('div')(blockName, null, ({ leftLabel, variant, fitContent, withHighlight }) => ({\n  'with-left-label': leftLabel,\n  'fit-content': fitContent,\n  [variant]: variant,\n  'with-highlight': withHighlight,\n}));\n\nconst WrapperContent = aggregatedClasses('div')(`${blockName}-content`);\nconst WrapperContentGroup = aggregatedClasses('fieldset')(`${blockName}-content`);\n\nconst DSFormItemLayout = ({\n  leftLabel,\n  floatingLabel,\n  name,\n  id,\n  value,\n  inputComponent: InputComponent,\n  labelComponent: LabelComponent,\n  feedbackComponent: FeedbackComponent,\n  labelText,\n  truncateText,\n  hasError,\n  // orientation = 'vertical', // one of [ vertical, horizontal ]\n  validationState, // one of [ success, error, warning ]\n  validationMessage,\n  feedbackMessage,\n  readOnly,\n  focused,\n  type,\n  autoFocus,\n  disabled,\n  onChange,\n  onBlur,\n  onFocus,\n  onPaste,\n  onKeyUp,\n  extraInputProps,\n  extraContent,\n  leftAddon,\n  rightAddon,\n  required,\n  optional,\n  mask,\n  useSubfix,\n  suffix,\n  variant,\n  fitContent,\n  withHighlight,\n  containerProps,\n  ...rest\n}) => {\n  useDeprecateComponent({ componentName: 'ds-form/FormItemLayout', version: '3.x Date: 2023 Q1' });\n\n  const isGroup = InputComponent.type === (<Group />).type;\n  const floatingLabelOverride = floatingLabel === 'UNSAFE';\n  const WrapperContentComp = !isGroup ? WrapperContent : WrapperContentGroup;\n\n  // group the input props to not duplicate it inside the specific inputComponent (floating or not)\n  const inputProps = {\n    ...extraInputProps,\n    disabled,\n    hasError: hasError || validationState === 'error',\n    id,\n    name,\n    type,\n    autoFocus,\n    onBlur,\n    onChange,\n    onFocus,\n    onPaste,\n    onKeyUp,\n    readOnly,\n    value,\n    mask,\n    useSubfix,\n    variant,\n    required,\n    ...rest,\n  };\n\n  const renderInput = (Input) =>\n    leftAddon || rightAddon ? (\n      <DSInputGroup leftAddon={leftAddon} rightAddon={rightAddon} variant={variant}>\n        {Input}\n      </DSInputGroup>\n    ) : (\n      Input\n    );\n\n  const renderFloating = (\n    <DSFloatingLabelInput\n      {...inputProps}\n      extraInputProps={extraInputProps}\n      focused={focused}\n      inputComponent={InputComponent}\n      labelComponent={LabelComponent}\n      labelText={labelText}\n      optional={optional}\n      required={required}\n      variant={variant}\n    />\n  );\n\n  const InputWithLabel = floatingLabelOverride ? (\n    renderInput(renderFloating)\n  ) : (\n    <>\n      <LabelComponent\n        htmlFor={id || name}\n        label={labelText}\n        optional={optional}\n        required={required}\n        isGroup={isGroup}\n        truncateText={truncateText}\n      />\n      {renderInput(getComponentFromProps(InputComponent, inputProps))}\n    </>\n  );\n\n  if (suffix) {\n    return (\n      <Wrapper\n        classProps={{\n          disabled,\n          readOnly,\n          hasError,\n          leftLabel,\n          variant,\n          fitContent,\n          withHighlight,\n        }}\n        {...containerProps}\n      >\n        <SuffixWrapper className=\"suffix-wrapper\">\n          <SuffixInputWrapper className=\"suffix-input-wrapper\">\n            <WrapperContentComp>\n              {InputWithLabel}\n              {extraContent}\n            </WrapperContentComp>\n            <FeedbackComponent\n              hasError={hasError}\n              text={validationState || hasError ? validationMessage : feedbackMessage}\n            />\n          </SuffixInputWrapper>\n          <Suffix\n            className=\"suffix-label\"\n            label={!!labelText}\n            withFeedback={Boolean(validationMessage || feedbackMessage)}\n          >\n            {suffix}\n          </Suffix>\n        </SuffixWrapper>\n      </Wrapper>\n    );\n  }\n\n  return (\n    <Wrapper\n      classProps={{\n        disabled,\n        readOnly,\n        hasError,\n        leftLabel,\n        variant,\n        fitContent,\n        withHighlight,\n      }}\n      {...containerProps}\n    >\n      <WrapperContentComp>\n        {InputWithLabel}\n        {extraContent}\n      </WrapperContentComp>\n      <FeedbackComponent hasError={hasError} text={validationState || hasError ? validationMessage : feedbackMessage} />\n    </Wrapper>\n  );\n};\n\nDSFormItemLayout.propTypes = props;\nDSFormItemLayout.defaultProps = defaultProps;\nDSFormItemLayout.displayName = 'DSFormItemLayout';\nconst DSFormItemLayoutWithSchema = describe(DSFormItemLayout);\nDSFormItemLayoutWithSchema.propTypes = props;\n\nexport default DSFormItemLayout;\nexport { DSFormItemLayoutWithSchema, DSFormItemLayout };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/FormItem/Error/DSError.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { PropTypes, describe } from "@elliemae/ds-utilities";
+import { PropTypes, describe } from "@elliemae/ds-props-helpers";
 const DSError = ({ hasError = false, errorText = "Error" }) => {
   if (!hasError)
     return null;

package/dist/esm/FormItem/Error/DSError.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/FormItem/Error/DSError.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\n\nconst DSError = ({ hasError = false, errorText = 'Error' }) => {\n  if (!hasError) return null;\n  return <div className=\"em-ds-error\">{errorText}</div>;\n};\n\nconst props = {\n  /** error state */\n  hasError: PropTypes.bool.description('error state'),\n  /** error label text */\n  errorText: PropTypes.string.description('error label text'),\n};\n\nDSError.propTypes = props;\nDSError.displayName = 'DSError';\nconst DSErrorWithSchema = describe(DSError);\n\nDSErrorWithSchema.propTypes = props;\n\nexport default DSError;\nexport { DSErrorWithSchema, DSError };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\n\nconst DSError = ({ hasError = false, errorText = 'Error' }) => {\n  if (!hasError) return null;\n  return <div className=\"em-ds-error\">{errorText}</div>;\n};\n\nconst props = {\n  /** error state */\n  hasError: PropTypes.bool.description('error state'),\n  /** error label text */\n  errorText: PropTypes.string.description('error label text'),\n};\n\nDSError.propTypes = props;\nDSError.displayName = 'DSError';\nconst DSErrorWithSchema = describe(DSError);\n\nDSErrorWithSchema.propTypes = props;\n\nexport default DSError;\nexport { DSErrorWithSchema, DSError };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACKd;AAJT,SAAS,WAAW,gBAAgB;AAEpC,MAAM,UAAU,CAAC,EAAE,WAAW,OAAO,YAAY,QAAQ,MAAM;AAC7D,MAAI,CAAC;AAAU,WAAO;AACtB,SAAO,oBAAC,SAAI,WAAU,eAAe,qBAAU;AACjD;AAEA,MAAM,QAAQ;AAAA,EAEZ,UAAU,UAAU,KAAK,YAAY,aAAa;AAAA,EAElD,WAAW,UAAU,OAAO,YAAY,kBAAkB;AAC5D;AAEA,QAAQ,YAAY;AACpB,QAAQ,cAAc;AACtB,MAAM,oBAAoB,SAAS,OAAO;AAE1C,kBAAkB,YAAY;AAE9B,IAAO,kBAAQ;",
   "names": []
 }

package/dist/esm/FormItem/Label/DSLabel.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import { aggregatedClasses } from "@elliemae/ds-classnames";
 import { DSTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { RequiredMark } from "../../RequiredMark";
+import { RequiredMark } from "../../RequiredMark/index.js";
 const blockName = "em-ds-label";
 const Text = aggregatedClasses("span")(blockName, "text");
 const DSLabel = ({ children, label, htmlFor, required, optional, truncateText = true, isGroup = false }) => {

package/dist/esm/FormItem/Label/DSLabel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/FormItem/Label/DSLabel.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/label-has-associated-control */\n/* eslint-disable react/no-unknown-property, jsx-a11y/label-has-for */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { RequiredMark } from '../../RequiredMark';\n\nconst blockName = 'em-ds-label';\n\nconst Text = aggregatedClasses('span')(blockName, 'text');\n\nconst DSLabel = ({ children, label, htmlFor, required, optional, truncateText = true, isGroup = false }) => {\n  const Tag = isGroup ? 'legend' : 'label';\n\n  return (\n    <Tag className={`${blockName}${isGroup ? ` ${blockName}--group` : ''}`} htmlFor={htmlFor}>\n      {truncateText ? <DSTruncatedTooltipText value={children || label} /> : <Text>{label}</Text>}\n      <RequiredMark optional={optional} required={required} />\n    </Tag>\n  );\n};\n\nDSLabel.propTypes = {\n  children: PropTypes.string,\n  label: PropTypes.string,\n  htmlFor: PropTypes.string,\n  required: PropTypes.bool,\n  optional: PropTypes.bool,\n  truncateText: PropTypes.bool,\n  isGroup: PropTypes.bool,\n};\n\nexport { DSLabel };\nexport default DSLabel;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/label-has-associated-control */\n/* eslint-disable react/no-unknown-property, jsx-a11y/label-has-for */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { RequiredMark } from '../../RequiredMark/index.js';\n\nconst blockName = 'em-ds-label';\n\nconst Text = aggregatedClasses('span')(blockName, 'text');\n\nconst DSLabel = ({ children, label, htmlFor, required, optional, truncateText = true, isGroup = false }) => {\n  const Tag = isGroup ? 'legend' : 'label';\n\n  return (\n    <Tag className={`${blockName}${isGroup ? ` ${blockName}--group` : ''}`} htmlFor={htmlFor}>\n      {truncateText ? <DSTruncatedTooltipText value={children || label} /> : <Text>{label}</Text>}\n      <RequiredMark optional={optional} required={required} />\n    </Tag>\n  );\n};\n\nDSLabel.propTypes = {\n  children: PropTypes.string,\n  label: PropTypes.string,\n  htmlFor: PropTypes.string,\n  required: PropTypes.bool,\n  optional: PropTypes.bool,\n  truncateText: PropTypes.bool,\n  isGroup: PropTypes.bool,\n};\n\nexport { DSLabel };\nexport default DSLabel;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACgBnB,SACkB,KADlB;AAbJ,OAAO,eAAe;AACtB,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAE7B,MAAM,YAAY;AAElB,MAAM,OAAO,kBAAkB,MAAM,EAAE,WAAW,MAAM;AAExD,MAAM,UAAU,CAAC,EAAE,UAAU,OAAO,SAAS,UAAU,UAAU,eAAe,MAAM,UAAU,MAAM,MAAM;AAC1G,QAAM,MAAM,UAAU,WAAW;AAEjC,SACE,qBAAC,OAAI,WAAW,GAAG,YAAY,UAAU,IAAI,qBAAqB,MAAM,SACrE;AAAA,mBAAe,oBAAC,0BAAuB,OAAO,YAAY,OAAO,IAAK,oBAAC,QAAM,iBAAM;AAAA,IACpF,oBAAC,gBAAa,UAAoB,UAAoB;AAAA,KACxD;AAEJ;AAEA,QAAQ,YAAY;AAAA,EAClB,UAAU,UAAU;AAAA,EACpB,OAAO,UAAU;AAAA,EACjB,SAAS,UAAU;AAAA,EACnB,UAAU,UAAU;AAAA,EACpB,UAAU,UAAU;AAAA,EACpB,cAAc,UAAU;AAAA,EACxB,SAAS,UAAU;AACrB;AAGA,IAAO,kBAAQ;",
   "names": []
 }

package/dist/esm/FormItem/defaultProps.js

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { DSTextBox } from "../TextBox";
-import { DSLabel } from "./Label/DSLabel";
-import { Feedback } from "./Feedback";
-import { FORMITEM_LAYOUT_VARIANTS } from "./variants";
+import { DSTextBox } from "../TextBox/index.js";
+import { DSLabel } from "./Label/DSLabel.js";
+import { Feedback } from "./Feedback.js";
+import { FORMITEM_LAYOUT_VARIANTS } from "./variants.js";
 const defaultProps = {
   leftLabel: false,
   floatingLabel: false,

package/dist/esm/FormItem/defaultProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/FormItem/defaultProps.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSTextBox } from '../TextBox';\nimport { DSLabel } from './Label/DSLabel';\nimport { Feedback } from './Feedback';\nimport { FORMITEM_LAYOUT_VARIANTS } from './variants';\n\nexport const defaultProps = {\n  leftLabel: false,\n  floatingLabel: false,\n  inputComponent: DSTextBox,\n  labelComponent: DSLabel,\n  feedbackComponent: Feedback,\n  hasError: false,\n  validationMessage: '',\n  feedbackMessage: '',\n  focused: false,\n  autoFocus: false,\n  disabled: false,\n  onChange: () => {},\n  onBlur: () => {},\n  onFocus: () => {},\n  onPaste: () => {},\n  onKeyUp: () => {},\n  extraInputProps: {},\n  leftAddon: null,\n  rightAddon: null,\n  required: false,\n  optional: false,\n  useSubfix: '',\n  suffix: '',\n  variant: FORMITEM_LAYOUT_VARIANTS.DEFAULT,\n  containerProps: {},\n  fitContent: false,\n  withHighlight: false,\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSTextBox } from '../TextBox/index.js';\nimport { DSLabel } from './Label/DSLabel.js';\nimport { Feedback } from './Feedback.js';\nimport { FORMITEM_LAYOUT_VARIANTS } from './variants.js';\n\nexport const defaultProps = {\n  leftLabel: false,\n  floatingLabel: false,\n  inputComponent: DSTextBox,\n  labelComponent: DSLabel,\n  feedbackComponent: Feedback,\n  hasError: false,\n  validationMessage: '',\n  feedbackMessage: '',\n  focused: false,\n  autoFocus: false,\n  disabled: false,\n  onChange: () => {},\n  onBlur: () => {},\n  onFocus: () => {},\n  onPaste: () => {},\n  onKeyUp: () => {},\n  extraInputProps: {},\n  leftAddon: null,\n  rightAddon: null,\n  required: false,\n  optional: false,\n  useSubfix: '',\n  suffix: '',\n  variant: FORMITEM_LAYOUT_VARIANTS.DEFAULT,\n  containerProps: {},\n  fitContent: false,\n  withHighlight: false,\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,gBAAgB;AACzB,SAAS,gCAAgC;AAElC,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,QAAQ,MAAM;AAAA,EAAC;AAAA,EACf,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,iBAAiB,CAAC;AAAA,EAClB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,SAAS,yBAAyB;AAAA,EAClC,gBAAgB,CAAC;AAAA,EACjB,YAAY;AAAA,EACZ,eAAe;AACjB;",
   "names": []
 }

package/dist/esm/FormItem/index.js

@@ -5,8 +5,8 @@ import {
   FORMITEM_LAYOUT_VARIANTS,
   DSError,
   DSFormItemLayoutWithSchema
-} from "./DSFormItemLayout";
-import { DSErrorWithSchema } from "./Error/DSError";
+} from "./DSFormItemLayout.js";
+import { DSErrorWithSchema } from "./Error/DSError.js";
 export {
   DSError,
   DSErrorWithSchema,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/FormItem/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export {\n  default,\n  DSFormItemLayout,\n  FORMITEM_LAYOUT_VARIANTS,\n  DSError,\n  DSFormItemLayoutWithSchema,\n} from './DSFormItemLayout';\nexport { DSErrorWithSchema } from './Error/DSError';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export {\n  default,\n  DSFormItemLayout,\n  FORMITEM_LAYOUT_VARIANTS,\n  DSError,\n  DSFormItemLayoutWithSchema,\n} from './DSFormItemLayout.js';\nexport { DSErrorWithSchema } from './Error/DSError.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE,WAAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;",
   "names": ["default"]
 }

package/dist/esm/FormItem/props.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { PropTypes } from "@elliemae/ds-utilities";
-import { FORMITEM_LAYOUT_VARIANTS } from "./variants";
+import { PropTypes } from "@elliemae/ds-props-helpers";
+import { FORMITEM_LAYOUT_VARIANTS } from "./variants.js";
 const props = {
   containerProps: PropTypes.object.description("props to inject to form item layout wrapper"),
   disableTooltip: PropTypes.bool.description("Whether to show a tooltip or not when text does not fit").defaultValue(true),

package/dist/esm/FormItem/props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/FormItem/props.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\nimport { FORMITEM_LAYOUT_VARIANTS } from './variants';\n\nexport const props = {\n  /** props to inject to form item layout wrapper */\n  containerProps: PropTypes.object.description('props to inject to form item layout wrapper'),\n  /** disableTooltip */\n  disableTooltip: PropTypes.bool\n    .description('Whether to show a tooltip or not when text does not fit')\n    .defaultValue(true),\n  /** position label on the left */\n  leftLabel: PropTypes.bool.description('position label on the left'),\n  /** turn on floating label */\n  floatingLabel: PropTypes.bool.description('turn on floating label'),\n  /** id for form item layout */\n  id: PropTypes.string.description('id for form item layout'),\n  /** html name prop for form tags */\n  name: PropTypes.string.description('html name prop for form tags'),\n  /** form item layout element value */\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description(\n    'form item layout element value',\n  ),\n  /** Any input component */\n  inputComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description('Any input component'),\n  /** isShowElipsisActive */\n  /** isShowElipsisActive */\n  isShowElipsisActive: PropTypes.bool\n    .description('Wheter to enable the ellipsis and tooltip functionality or not')\n    .defaultValue(true),\n  /** Label component  */\n  labelComponent: PropTypes.func.description('Label component'),\n  /** feedback component to embed on form item */\n  feedbackComponent: PropTypes.func.description('feedback component to embed on form item'),\n  /** label text */\n  labelText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description('label text'),\n  /** error state */\n  hasError: PropTypes.bool.description('error state'),\n  /** add fit content to form container */\n  fitContent: PropTypes.bool.description(\n    'Adds fit content css property to the main container, making the layout width adapt to the input component',\n  ),\n  /** validation state */\n  validationState: PropTypes.oneOf(['success', 'error', 'warning']).description('validation state'),\n  /** validation message */\n  validationMessage: PropTypes.string.description('validation message'),\n  /** feedback message */\n  feedbackMessage: PropTypes.string.description('feedback message'),\n  /** read only form item */\n  readOnly: PropTypes.bool.description('read only form item'),\n  /** focused state */\n  focused: PropTypes.bool.description('focused state'),\n  /** input type */\n  type: PropTypes.string.description('input type'),\n  /** auto focus input */\n  autoFocus: PropTypes.bool.description('auto focus input'),\n  /** disabled state */\n  disabled: PropTypes.bool.description('disabled state'),\n  /** on change handler */\n  onChange: PropTypes.func.description('on change handler'),\n  /** on blur handler */\n  onBlur: PropTypes.func.description('on blur handler'),\n  /** extra input props to inject */\n  extraInputProps: PropTypes.object.description('extra input props to inject'),\n  /** extra content */\n  extraContent: PropTypes.element.description('extra content'),\n  /** left addon for form item */\n  leftAddon: PropTypes.element.description('left addon for form item'),\n  /** right addon for form item */\n  rightAddon: PropTypes.element.description('right addon for form item'),\n  /** add required mark */\n  required: PropTypes.bool.description('add required mark'),\n  /** add optional mark */\n  optional: PropTypes.bool.description('add optional mark'),\n  /** on focus handler */\n  onFocus: PropTypes.func.description('on focus handler'),\n  /** on paste handler */\n  onPaste: PropTypes.func.description('on paste handler'),\n  /** add truncation and ellipsis */\n  truncateText: PropTypes.bool.description('add truncation and ellipsis'),\n  /** on key up event handler */\n  onKeyUp: PropTypes.func.description('on key up event handler'),\n  /** mask for input mask component */\n  mask: PropTypes.oneOfType([\n    // PropTypes.oneOf(maskTypes),\n    PropTypes.string,\n    PropTypes.func,\n    PropTypes.object,\n    PropTypes.array,\n  ]).description('mask for input mask component'),\n  /** add suffix to input */\n  useSubfix: PropTypes.string.description('add suffix to input'),\n  /** suffix for input */\n  suffix: PropTypes.string.description('suffix for input'),\n  /** form item layout type */\n  variant: PropTypes.oneOf([\n    FORMITEM_LAYOUT_VARIANTS.DEFAULT,\n    FORMITEM_LAYOUT_VARIANTS.FOCUS,\n    FORMITEM_LAYOUT_VARIANTS.ACTIVE,\n    FORMITEM_LAYOUT_VARIANTS.DISABLED,\n    FORMITEM_LAYOUT_VARIANTS.READ_ONLY,\n    FORMITEM_LAYOUT_VARIANTS.OPTIONAL,\n  ]).description('form item layout type'),\n  withHighlight: PropTypes.bool.description('adds highlight style to the input component'),\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\nimport { FORMITEM_LAYOUT_VARIANTS } from './variants.js';\n\nexport const props = {\n  /** props to inject to form item layout wrapper */\n  containerProps: PropTypes.object.description('props to inject to form item layout wrapper'),\n  /** disableTooltip */\n  disableTooltip: PropTypes.bool\n    .description('Whether to show a tooltip or not when text does not fit')\n    .defaultValue(true),\n  /** position label on the left */\n  leftLabel: PropTypes.bool.description('position label on the left'),\n  /** turn on floating label */\n  floatingLabel: PropTypes.bool.description('turn on floating label'),\n  /** id for form item layout */\n  id: PropTypes.string.description('id for form item layout'),\n  /** html name prop for form tags */\n  name: PropTypes.string.description('html name prop for form tags'),\n  /** form item layout element value */\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description(\n    'form item layout element value',\n  ),\n  /** Any input component */\n  inputComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description('Any input component'),\n  /** isShowElipsisActive */\n  /** isShowElipsisActive */\n  isShowElipsisActive: PropTypes.bool\n    .description('Wheter to enable the ellipsis and tooltip functionality or not')\n    .defaultValue(true),\n  /** Label component  */\n  labelComponent: PropTypes.func.description('Label component'),\n  /** feedback component to embed on form item */\n  feedbackComponent: PropTypes.func.description('feedback component to embed on form item'),\n  /** label text */\n  labelText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description('label text'),\n  /** error state */\n  hasError: PropTypes.bool.description('error state'),\n  /** add fit content to form container */\n  fitContent: PropTypes.bool.description(\n    'Adds fit content css property to the main container, making the layout width adapt to the input component',\n  ),\n  /** validation state */\n  validationState: PropTypes.oneOf(['success', 'error', 'warning']).description('validation state'),\n  /** validation message */\n  validationMessage: PropTypes.string.description('validation message'),\n  /** feedback message */\n  feedbackMessage: PropTypes.string.description('feedback message'),\n  /** read only form item */\n  readOnly: PropTypes.bool.description('read only form item'),\n  /** focused state */\n  focused: PropTypes.bool.description('focused state'),\n  /** input type */\n  type: PropTypes.string.description('input type'),\n  /** auto focus input */\n  autoFocus: PropTypes.bool.description('auto focus input'),\n  /** disabled state */\n  disabled: PropTypes.bool.description('disabled state'),\n  /** on change handler */\n  onChange: PropTypes.func.description('on change handler'),\n  /** on blur handler */\n  onBlur: PropTypes.func.description('on blur handler'),\n  /** extra input props to inject */\n  extraInputProps: PropTypes.object.description('extra input props to inject'),\n  /** extra content */\n  extraContent: PropTypes.element.description('extra content'),\n  /** left addon for form item */\n  leftAddon: PropTypes.element.description('left addon for form item'),\n  /** right addon for form item */\n  rightAddon: PropTypes.element.description('right addon for form item'),\n  /** add required mark */\n  required: PropTypes.bool.description('add required mark'),\n  /** add optional mark */\n  optional: PropTypes.bool.description('add optional mark'),\n  /** on focus handler */\n  onFocus: PropTypes.func.description('on focus handler'),\n  /** on paste handler */\n  onPaste: PropTypes.func.description('on paste handler'),\n  /** add truncation and ellipsis */\n  truncateText: PropTypes.bool.description('add truncation and ellipsis'),\n  /** on key up event handler */\n  onKeyUp: PropTypes.func.description('on key up event handler'),\n  /** mask for input mask component */\n  mask: PropTypes.oneOfType([\n    // PropTypes.oneOf(maskTypes),\n    PropTypes.string,\n    PropTypes.func,\n    PropTypes.object,\n    PropTypes.array,\n  ]).description('mask for input mask component'),\n  /** add suffix to input */\n  useSubfix: PropTypes.string.description('add suffix to input'),\n  /** suffix for input */\n  suffix: PropTypes.string.description('suffix for input'),\n  /** form item layout type */\n  variant: PropTypes.oneOf([\n    FORMITEM_LAYOUT_VARIANTS.DEFAULT,\n    FORMITEM_LAYOUT_VARIANTS.FOCUS,\n    FORMITEM_LAYOUT_VARIANTS.ACTIVE,\n    FORMITEM_LAYOUT_VARIANTS.DISABLED,\n    FORMITEM_LAYOUT_VARIANTS.READ_ONLY,\n    FORMITEM_LAYOUT_VARIANTS.OPTIONAL,\n  ]).description('form item layout type'),\n  withHighlight: PropTypes.bool.description('adds highlight style to the input component'),\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAC1B,SAAS,gCAAgC;AAElC,MAAM,QAAQ;AAAA,EAEnB,gBAAgB,UAAU,OAAO,YAAY,6CAA6C;AAAA,EAE1F,gBAAgB,UAAU,KACvB,YAAY,yDAAyD,EACrE,aAAa,IAAI;AAAA,EAEpB,WAAW,UAAU,KAAK,YAAY,4BAA4B;AAAA,EAElE,eAAe,UAAU,KAAK,YAAY,wBAAwB;AAAA,EAElE,IAAI,UAAU,OAAO,YAAY,yBAAyB;AAAA,EAE1D,MAAM,UAAU,OAAO,YAAY,8BAA8B;AAAA,EAEjE,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE;AAAA,IACjF;AAAA,EACF;AAAA,EAEA,gBAAgB,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,OAAO,CAAC,EAAE,YAAY,qBAAqB;AAAA,EAG1G,qBAAqB,UAAU,KAC5B,YAAY,gEAAgE,EAC5E,aAAa,IAAI;AAAA,EAEpB,gBAAgB,UAAU,KAAK,YAAY,iBAAiB;AAAA,EAE5D,mBAAmB,UAAU,KAAK,YAAY,0CAA0C;AAAA,EAExF,WAAW,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC,EAAE,YAAY,YAAY;AAAA,EAE9F,UAAU,UAAU,KAAK,YAAY,aAAa;AAAA,EAElD,YAAY,UAAU,KAAK;AAAA,IACzB;AAAA,EACF;AAAA,EAEA,iBAAiB,UAAU,MAAM,CAAC,WAAW,SAAS,SAAS,CAAC,EAAE,YAAY,kBAAkB;AAAA,EAEhG,mBAAmB,UAAU,OAAO,YAAY,oBAAoB;AAAA,EAEpE,iBAAiB,UAAU,OAAO,YAAY,kBAAkB;AAAA,EAEhE,UAAU,UAAU,KAAK,YAAY,qBAAqB;AAAA,EAE1D,SAAS,UAAU,KAAK,YAAY,eAAe;AAAA,EAEnD,MAAM,UAAU,OAAO,YAAY,YAAY;AAAA,EAE/C,WAAW,UAAU,KAAK,YAAY,kBAAkB;AAAA,EAExD,UAAU,UAAU,KAAK,YAAY,gBAAgB;AAAA,EAErD,UAAU,UAAU,KAAK,YAAY,mBAAmB;AAAA,EAExD,QAAQ,UAAU,KAAK,YAAY,iBAAiB;AAAA,EAEpD,iBAAiB,UAAU,OAAO,YAAY,6BAA6B;AAAA,EAE3E,cAAc,UAAU,QAAQ,YAAY,eAAe;AAAA,EAE3D,WAAW,UAAU,QAAQ,YAAY,0BAA0B;AAAA,EAEnE,YAAY,UAAU,QAAQ,YAAY,2BAA2B;AAAA,EAErE,UAAU,UAAU,KAAK,YAAY,mBAAmB;AAAA,EAExD,UAAU,UAAU,KAAK,YAAY,mBAAmB;AAAA,EAExD,SAAS,UAAU,KAAK,YAAY,kBAAkB;AAAA,EAEtD,SAAS,UAAU,KAAK,YAAY,kBAAkB;AAAA,EAEtD,cAAc,UAAU,KAAK,YAAY,6BAA6B;AAAA,EAEtE,SAAS,UAAU,KAAK,YAAY,yBAAyB;AAAA,EAE7D,MAAM,UAAU,UAAU;AAAA,IAExB,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,EACZ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EAE9C,WAAW,UAAU,OAAO,YAAY,qBAAqB;AAAA,EAE7D,QAAQ,UAAU,OAAO,YAAY,kBAAkB;AAAA,EAEvD,SAAS,UAAU,MAAM;AAAA,IACvB,yBAAyB;AAAA,IACzB,yBAAyB;AAAA,IACzB,yBAAyB;AAAA,IACzB,yBAAyB;AAAA,IACzB,yBAAyB;AAAA,IACzB,yBAAyB;AAAA,EAC3B,CAAC,EAAE,YAAY,uBAAuB;AAAA,EACtC,eAAe,UAAU,KAAK,YAAY,6CAA6C;AACzF;",
   "names": []
 }