@elliemae/ds-form-input-text 3.50.0-next.2 → 3.50.0-rc.1

package/dist/cjs/DSInputText.js

@@ -40,7 +40,6 @@ var import_ds_icon = require("@elliemae/ds-icon");
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_useInputText = require("./config/useInputText.js");
-var import_data_test_ids = require("./exported-related/data-test-ids.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_components = require("./styled/components.js");
 const DSInputText = (props) => {
@@ -61,10 +60,15 @@ const DSInputText = (props) => {
     inputSize,
     onClear,
     value,
-    applyAriaDisabled
+    applyAriaDisabled,
+    ariaDescribedBy
   } = propsWithDefault;
   const inputRef = (0, import_react.useRef)(null);
-  const shouldDisplayClearButton = clearable && !disabled && value !== "";
+  const shouldDisplayClearButton = clearable && !disabled && value !== "" && !applyAriaDisabled && !readOnly;
+  const defaultAriaDescribedBy = (0, import_react.useMemo)(
+    () => id !== void 0 ? `${id}_feedback_message ${id}_error_message` : void 0,
+    [id]
+  );
   const handleClear = (0, import_react.useCallback)(() => {
     onClear();
     inputRef?.current?.focus();
@@ -86,16 +90,16 @@ const DSInputText = (props) => {
           import_components.StyledInput,
           {
             inputSize,
-            "data-testid": import_data_test_ids.DSInputTextDataTestIds.INPUT,
             disabled,
             placeholder,
             readOnly,
             innerRef: (0, import_ds_system.mergeRefs)(innerRef, inputRef),
             value,
-            "aria-describedby": id !== void 0 ? `${id}_feedback_message ${id}_error_message` : void 0,
+            "aria-describedby": defaultAriaDescribedBy || ariaDescribedBy ? `${defaultAriaDescribedBy} ${ariaDescribedBy}` : void 0,
             "aria-invalid": hasError,
             id,
             "aria-disabled": applyAriaDisabled,
+            "aria-readonly": readOnly,
             ...handlers,
             ...otherGlobalAttributes
           }
@@ -103,9 +107,9 @@ const DSInputText = (props) => {
         shouldDisplayClearButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_components.StyledClearButton,
           {
+            disabled: disabled || applyAriaDisabled || readOnly,
             "aria-label": "Clear input value",
             buttonType: "icon",
-            "data-testid": import_data_test_ids.DSInputTextDataTestIds.CLEAR_BUTTON,
             onClick: handleClear,
             size: "s",
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseMedium, { color: import_ds_icon.DSIconColors.PRIMARY, size: "s" })

package/dist/cjs/DSInputText.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSInputText.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback, useRef } from 'react';\nimport { CloseMedium } from '@elliemae/ds-icons';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useInputText } from './config/useInputText.js';\nimport { DSInputTextDataTestIds } from './exported-related/data-test-ids.js';\nimport type { DSInputTextT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypes } from './react-desc-prop-types.js';\nimport { StyledClearButton, StyledInput, StyledInputWrapper } from './styled/components.js';\n\nexport const DSInputText: React.ComponentType<DSInputTextT.Props> = (props) => {\n  const {\n    globalAttributes: { className, id, ...otherGlobalAttributes },\n    hasFocus,\n    handlers,\n    propsWithDefault,\n    xstyledProps,\n  } = useInputText(props);\n\n  const {\n    clearable,\n    disabled,\n    hasError,\n    innerRef,\n    placeholder,\n    readOnly,\n    inputSize,\n    onClear,\n    value,\n    applyAriaDisabled,\n  } = propsWithDefault;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const shouldDisplayClearButton = clearable && !disabled && value !== '';\n\n  const handleClear = useCallback(() => {\n    onClear();\n    inputRef?.current?.focus();\n  }, [onClear]);\n\n  return (\n    <StyledInputWrapper\n      className={className}\n      cols={shouldDisplayClearButton ? ['auto', 'min-content'] : ['auto']}\n      isDisabled={disabled}\n      applyAriaDisabled={applyAriaDisabled}\n      isReadOnly={readOnly}\n      hasError={hasError}\n      hasFocus={hasFocus}\n      inputSize={inputSize}\n      {...xstyledProps}\n    >\n      <StyledInput\n        inputSize={inputSize}\n        data-testid={DSInputTextDataTestIds.INPUT}\n        disabled={disabled}\n        placeholder={placeholder}\n        readOnly={readOnly}\n        innerRef={mergeRefs(innerRef, inputRef)}\n        value={value}\n        aria-describedby={id !== undefined ? `${id}_feedback_message ${id}_error_message` : undefined}\n        aria-invalid={hasError}\n        id={id}\n        aria-disabled={applyAriaDisabled}\n        {...handlers}\n        {...otherGlobalAttributes}\n      />\n      {shouldDisplayClearButton && (\n        <StyledClearButton\n          aria-label=\"Clear input value\"\n          buttonType=\"icon\"\n          data-testid={DSInputTextDataTestIds.CLEAR_BUTTON}\n          onClick={handleClear}\n          size=\"s\"\n        >\n          <CloseMedium color={DSIconColors.PRIMARY} size=\"s\" />\n        </StyledClearButton>\n      )}\n    </StyledInputWrapper>\n  );\n};\n\nDSInputText.displayName = 'DSInputText';\nexport const DSInputTextWithSchema = describe(DSInputText);\nDSInputTextWithSchema.propTypes = DSInputTextPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CnB;AA1CJ,mBAA2C;AAC3C,sBAA4B;AAC5B,qBAA6B;AAC7B,uBAA0B;AAC1B,8BAAyB;AACzB,0BAA6B;AAC7B,2BAAuC;AAEvC,mCAAqC;AACrC,wBAAmE;AAE5D,MAAM,cAAuD,CAAC,UAAU;AAC7E,QAAM;AAAA,IACJ,kBAAkB,EAAE,WAAW,IAAI,GAAG,sBAAsB;AAAA,IAC5D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,kCAAa,KAAK;AAEtB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,eAAW,qBAAyB,IAAI;AAC9C,QAAM,2BAA2B,aAAa,CAAC,YAAY,UAAU;AAErE,QAAM,kBAAc,0BAAY,MAAM;AACpC,YAAQ;AACR,cAAU,SAAS,MAAM;AAAA,EAC3B,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM,2BAA2B,CAAC,QAAQ,aAAa,IAAI,CAAC,MAAM;AAAA,MAClE,YAAY;AAAA,MACZ;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,eAAa,4CAAuB;AAAA,YACpC;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAU,4BAAU,UAAU,QAAQ;AAAA,YACtC;AAAA,YACA,oBAAkB,OAAO,SAAY,GAAG,EAAE,qBAAqB,EAAE,mBAAmB;AAAA,YACpF,gBAAc;AAAA,YACd;AAAA,YACA,iBAAe;AAAA,YACd,GAAG;AAAA,YACH,GAAG;AAAA;AAAA,QACN;AAAA,QACC,4BACC;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,YAAW;AAAA,YACX,eAAa,4CAAuB;AAAA,YACpC,SAAS;AAAA,YACT,MAAK;AAAA,YAEL,sDAAC,+BAAY,OAAO,4BAAa,SAAS,MAAK,KAAI;AAAA;AAAA,QACrD;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,YAAY,cAAc;AACnB,MAAM,4BAAwB,kCAAS,WAAW;AACzD,sBAAsB,YAAY;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { CloseMedium } from '@elliemae/ds-icons';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useInputText } from './config/useInputText.js';\nimport type { DSInputTextT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypes } from './react-desc-prop-types.js';\nimport { StyledClearButton, StyledInput, StyledInputWrapper } from './styled/components.js';\n\nexport const DSInputText: React.ComponentType<DSInputTextT.Props> = (props) => {\n  const {\n    globalAttributes: { className, id, ...otherGlobalAttributes },\n    hasFocus,\n    handlers,\n    propsWithDefault,\n    xstyledProps,\n  } = useInputText(props);\n\n  const {\n    clearable,\n    disabled,\n    hasError,\n    innerRef,\n    placeholder,\n    readOnly,\n    inputSize,\n    onClear,\n    value,\n    applyAriaDisabled,\n    ariaDescribedBy,\n  } = propsWithDefault;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const shouldDisplayClearButton = clearable && !disabled && value !== '' && !applyAriaDisabled && !readOnly;\n\n  const defaultAriaDescribedBy = useMemo(\n    () => (id !== undefined ? `${id}_feedback_message ${id}_error_message` : undefined),\n    [id],\n  );\n\n  const handleClear = useCallback(() => {\n    onClear();\n    inputRef?.current?.focus();\n  }, [onClear]);\n\n  return (\n    <StyledInputWrapper\n      className={className}\n      cols={shouldDisplayClearButton ? ['auto', 'min-content'] : ['auto']}\n      isDisabled={disabled}\n      applyAriaDisabled={applyAriaDisabled}\n      isReadOnly={readOnly}\n      hasError={hasError}\n      hasFocus={hasFocus}\n      inputSize={inputSize}\n      {...xstyledProps}\n    >\n      <StyledInput\n        inputSize={inputSize}\n        disabled={disabled}\n        placeholder={placeholder}\n        readOnly={readOnly}\n        innerRef={mergeRefs(innerRef, inputRef)}\n        value={value}\n        aria-describedby={\n          defaultAriaDescribedBy || ariaDescribedBy ? `${defaultAriaDescribedBy} ${ariaDescribedBy}` : undefined\n        }\n        aria-invalid={hasError}\n        id={id}\n        aria-disabled={applyAriaDisabled}\n        aria-readonly={readOnly}\n        {...handlers}\n        {...otherGlobalAttributes}\n      />\n      {shouldDisplayClearButton && (\n        <StyledClearButton\n          disabled={disabled || applyAriaDisabled || readOnly}\n          aria-label=\"Clear input value\"\n          buttonType=\"icon\"\n          onClick={handleClear}\n          size=\"s\"\n        >\n          <CloseMedium color={DSIconColors.PRIMARY} size=\"s\" />\n        </StyledClearButton>\n      )}\n    </StyledInputWrapper>\n  );\n};\n\nDSInputText.displayName = 'DSInputText';\nexport const DSInputTextWithSchema = describe(DSInputText);\nDSInputTextWithSchema.propTypes = DSInputTextPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDnB;AA/CJ,mBAAoD;AACpD,sBAA4B;AAC5B,qBAA6B;AAC7B,uBAA0B;AAC1B,8BAAyB;AACzB,0BAA6B;AAE7B,mCAAqC;AACrC,wBAAmE;AAE5D,MAAM,cAAuD,CAAC,UAAU;AAC7E,QAAM;AAAA,IACJ,kBAAkB,EAAE,WAAW,IAAI,GAAG,sBAAsB;AAAA,IAC5D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,kCAAa,KAAK;AAEtB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,eAAW,qBAAyB,IAAI;AAC9C,QAAM,2BAA2B,aAAa,CAAC,YAAY,UAAU,MAAM,CAAC,qBAAqB,CAAC;AAElG,QAAM,6BAAyB;AAAA,IAC7B,MAAO,OAAO,SAAY,GAAG,EAAE,qBAAqB,EAAE,mBAAmB;AAAA,IACzE,CAAC,EAAE;AAAA,EACL;AAEA,QAAM,kBAAc,0BAAY,MAAM;AACpC,YAAQ;AACR,cAAU,SAAS,MAAM;AAAA,EAC3B,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM,2BAA2B,CAAC,QAAQ,aAAa,IAAI,CAAC,MAAM;AAAA,MAClE,YAAY;AAAA,MACZ;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAU,4BAAU,UAAU,QAAQ;AAAA,YACtC;AAAA,YACA,oBACE,0BAA0B,kBAAkB,GAAG,sBAAsB,IAAI,eAAe,KAAK;AAAA,YAE/F,gBAAc;AAAA,YACd;AAAA,YACA,iBAAe;AAAA,YACf,iBAAe;AAAA,YACd,GAAG;AAAA,YACH,GAAG;AAAA;AAAA,QACN;AAAA,QACC,4BACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,YAAY,qBAAqB;AAAA,YAC3C,cAAW;AAAA,YACX,YAAW;AAAA,YACX,SAAS;AAAA,YACT,MAAK;AAAA,YAEL,sDAAC,+BAAY,OAAO,4BAAa,SAAS,MAAK,KAAI;AAAA;AAAA,QACrD;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,YAAY,cAAc;AACnB,MAAM,4BAAwB,kCAAS,WAAW;AACzD,sBAAsB,YAAY;",
   "names": []
 }

package/dist/cjs/config/useInputText.js

@@ -34,11 +34,11 @@ module.exports = __toCommonJS(useInputText_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react = require("react");
-var import_exported_related = require("../exported-related/index.js");
+var import_constants = require("../constants/index.js");
 var import_react_desc_prop_types = require("../react-desc-prop-types.js");
 const useInputText = (props) => {
   const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
-  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.DSInputTextPropTypes, import_exported_related.DSInputTextName);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.DSInputTextPropTypes, import_constants.DSInputTextName);
   const { onValueChange, applyAriaDisabled } = propsWithDefault;
   const [hasFocus, setHasFocus] = (0, import_react.useState)(false);
   const handleOnChange = (0, import_react.useCallback)(

package/dist/cjs/config/useInputText.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useInputText.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type React from 'react';\nimport { useCallback, useMemo, useState } from 'react';\nimport { DSInputTextName } from '../exported-related/index.js';\nimport type { DSInputTextT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSInputTextPropTypes } from '../react-desc-prop-types.js';\n\nexport const useInputText = (props: DSInputTextT.Props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSInputTextT.IProps>>(props, defaultProps);\n\n  useValidateTypescriptPropTypes(props, DSInputTextPropTypes, DSInputTextName);\n\n  const { onValueChange, applyAriaDisabled } = propsWithDefault;\n\n  // =============================================================================\n  // INTERNAL STATE\n  // =============================================================================\n  const [hasFocus, setHasFocus] = useState(false);\n\n  // ===========================================================================\n  // INTERNAL HANDLERS\n  // ===========================================================================\n  const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (applyAriaDisabled) return;\n      onValueChange(e.target.value, e);\n    },\n    [onValueChange, applyAriaDisabled],\n  );\n\n  const handleOnFocus: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n    setHasFocus(true);\n  }, []);\n\n  const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n    setHasFocus(false);\n  }, []);\n\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault, {\n    onChange: handleOnChange,\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  return useMemo(\n    () => ({\n      globalAttributes,\n      hasFocus,\n      handlers: {\n        onChange: handleOnChange,\n        onFocus: handleOnFocus,\n        onBlur: handleOnBlur,\n      },\n      propsWithDefault,\n      xstyledProps,\n    }),\n    [globalAttributes, handleOnBlur, handleOnChange, handleOnFocus, hasFocus, propsWithDefault, xstyledProps],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAKO;AAEP,mBAA+C;AAC/C,8BAAgC;AAEhC,mCAAmD;AAE5C,MAAM,eAAe,CAAC,UAA8B;AACzD,QAAM,uBAAmB,sDAA4D,OAAO,yCAAY;AAExG,8DAA+B,OAAO,mDAAsB,uCAAe;AAE3E,QAAM,EAAE,eAAe,kBAAkB,IAAI;AAK7C,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAK9C,QAAM,qBAA6D;AAAA,IACjE,CAAC,MAAM;AACL,UAAI,kBAAmB;AACvB,oBAAc,EAAE,OAAO,OAAO,CAAC;AAAA,IACjC;AAAA,IACA,CAAC,eAAe,iBAAiB;AAAA,EACnC;AAEA,QAAM,oBAA2D,0BAAY,MAAM;AACjF,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,QAAM,mBAA0D,0BAAY,MAAM;AAChF,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,CAAC;AAKL,QAAM,uBAAmB,gDAAuB,kBAAkB;AAAA,IAChE,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,mBAAe,4CAAmB,gBAAgB;AAExD,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,QACR,UAAU;AAAA,QACV,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,cAAc,gBAAgB,eAAe,UAAU,kBAAkB,YAAY;AAAA,EAC1G;AACF;",
+  "sourcesContent": ["import {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type React from 'react';\nimport { useCallback, useMemo, useState } from 'react';\nimport { DSInputTextName } from '../constants/index.js';\nimport type { DSInputTextT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSInputTextPropTypes } from '../react-desc-prop-types.js';\n\nexport const useInputText = (props: DSInputTextT.Props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSInputTextT.IProps>>(props, defaultProps);\n\n  useValidateTypescriptPropTypes(props, DSInputTextPropTypes, DSInputTextName);\n\n  const { onValueChange, applyAriaDisabled } = propsWithDefault;\n\n  // =============================================================================\n  // INTERNAL STATE\n  // =============================================================================\n  const [hasFocus, setHasFocus] = useState(false);\n\n  // ===========================================================================\n  // INTERNAL HANDLERS\n  // ===========================================================================\n  const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (applyAriaDisabled) return;\n      onValueChange(e.target.value, e);\n    },\n    [onValueChange, applyAriaDisabled],\n  );\n\n  const handleOnFocus: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n    setHasFocus(true);\n  }, []);\n\n  const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n    setHasFocus(false);\n  }, []);\n\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault, {\n    onChange: handleOnChange,\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  return useMemo(\n    () => ({\n      globalAttributes,\n      hasFocus,\n      handlers: {\n        onChange: handleOnChange,\n        onFocus: handleOnFocus,\n        onBlur: handleOnBlur,\n      },\n      propsWithDefault,\n      xstyledProps,\n    }),\n    [globalAttributes, handleOnBlur, handleOnChange, handleOnFocus, hasFocus, propsWithDefault, xstyledProps],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAKO;AAEP,mBAA+C;AAC/C,uBAAgC;AAEhC,mCAAmD;AAE5C,MAAM,eAAe,CAAC,UAA8B;AACzD,QAAM,uBAAmB,sDAA4D,OAAO,yCAAY;AAExG,8DAA+B,OAAO,mDAAsB,gCAAe;AAE3E,QAAM,EAAE,eAAe,kBAAkB,IAAI;AAK7C,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAK9C,QAAM,qBAA6D;AAAA,IACjE,CAAC,MAAM;AACL,UAAI,kBAAmB;AACvB,oBAAc,EAAE,OAAO,OAAO,CAAC;AAAA,IACjC;AAAA,IACA,CAAC,eAAe,iBAAiB;AAAA,EACnC;AAEA,QAAM,oBAA2D,0BAAY,MAAM;AACjF,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,QAAM,mBAA0D,0BAAY,MAAM;AAChF,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,CAAC;AAKL,QAAM,uBAAmB,gDAAuB,kBAAkB;AAAA,IAChE,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,mBAAe,4CAAmB,gBAAgB;AAExD,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,QACR,UAAU;AAAA,QACV,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,cAAc,gBAAgB,eAAe,UAAU,kBAAkB,YAAY;AAAA,EAC1G;AACF;",
   "names": []
 }

package/dist/cjs/{exported-related/theming.js → constants/index.js}

@@ -26,17 +26,30 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var theming_exports = {};
-__export(theming_exports, {
+var constants_exports = {};
+__export(constants_exports, {
+  DSFormInputTextName: () => DSFormInputTextName,
+  DSInputTextDataTestIds: () => DSInputTextDataTestIds,
   DSInputTextName: () => DSInputTextName,
-  DSInputTextSlots: () => DSInputTextSlots
+  DSInputTextSlots: () => DSInputTextSlots,
+  FORM_INPUT_TEXT_DATA_TESTID: () => FORM_INPUT_TEXT_DATA_TESTID,
+  FORM_INPUT_TEXT_SLOTS: () => FORM_INPUT_TEXT_SLOTS
 });
-module.exports = __toCommonJS(theming_exports);
+module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
-const DSInputTextName = "DSInputText";
+var import_ds_system = require("@elliemae/ds-system");
+const DSFormInputTextName = "DSInputtext";
+const FORM_INPUT_TEXT_SLOTS = {
+  INPUT_WRAPPER: "root",
+  INPUT: "input",
+  CLEAR_BUTTON: "input-clear-button"
+};
+const FORM_INPUT_TEXT_DATA_TESTID = (0, import_ds_system.slotObjectToDataTestIds)(DSFormInputTextName, FORM_INPUT_TEXT_SLOTS);
+const DSInputTextDataTestIds = FORM_INPUT_TEXT_DATA_TESTID;
+const DSInputTextName = "DSInputtext";
 const DSInputTextSlots = {
   INPUT_WRAPPER: "root",
   INPUT: "input",
   CLEAR_BUTTON: "input-clear-button"
 };
-//# sourceMappingURL=theming.js.map
+//# sourceMappingURL=index.js.map

package/dist/cjs/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFormInputTextName = 'DSInputtext';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_INPUT_TEXT_SLOTS = {\n  INPUT_WRAPPER: 'root',\n  INPUT: 'input',\n  CLEAR_BUTTON: 'input-clear-button',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_INPUT_TEXT_DATA_TESTID = slotObjectToDataTestIds(DSFormInputTextName, FORM_INPUT_TEXT_SLOTS);\n\n// keeping legacy code to avoid breaking changes, the code above this is the new convention\nexport const DSInputTextDataTestIds = FORM_INPUT_TEXT_DATA_TESTID;\n\nexport const DSInputTextName = 'DSInputtext';\n\nexport const DSInputTextSlots = {\n  INPUT_WRAPPER: 'root',\n  INPUT: 'input',\n  CLEAR_BUTTON: 'input-clear-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,sBAAsB;AAG5B,MAAM,wBAAwB;AAAA,EACnC,eAAe;AAAA,EACf,OAAO;AAAA,EACP,cAAc;AAChB;AAGO,MAAM,kCAA8B,0CAAwB,qBAAqB,qBAAqB;AAGtG,MAAM,yBAAyB;AAE/B,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,eAAe;AAAA,EACf,OAAO;AAAA,EACP,cAAc;AAChB;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -5,6 +5,10 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -24,8 +28,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
+__export(src_exports, {
+  DSFormInputTextName: () => import_constants.DSFormInputTextName,
+  DSInputTextDataTestIds: () => import_constants.DSInputTextDataTestIds,
+  DSInputTextName: () => import_constants.DSInputTextName,
+  DSInputTextSlots: () => import_constants.DSInputTextSlots,
+  FORM_INPUT_TEXT_DATA_TESTID: () => import_constants.FORM_INPUT_TEXT_DATA_TESTID,
+  FORM_INPUT_TEXT_SLOTS: () => import_constants.FORM_INPUT_TEXT_SLOTS
+});
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
 __reExport(src_exports, require("./DSInputText.js"), module.exports);
-__reExport(src_exports, require("./exported-related/index.js"), module.exports);
+var import_constants = require("./constants/index.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './DSInputText.js';\nexport * from './exported-related/index.js';\nexport type { DSInputTextT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,6BAAd;AACA,wBAAc,wCADd;",
+  "sourcesContent": ["export * from './DSInputText.js';\nexport type { DSInputTextT } from './react-desc-prop-types.js';\nexport {\n  DSFormInputTextName,\n  FORM_INPUT_TEXT_SLOTS,\n  FORM_INPUT_TEXT_DATA_TESTID,\n  // legacy imports to avoid breaking changes\n  DSInputTextDataTestIds,\n  DSInputTextSlots,\n  DSInputTextName,\n} from './constants/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,6BAAd;AAEA,uBAQO;",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js

@@ -62,6 +62,7 @@ const DSInputTextPropTypes = {
   applyAriaDisabled: import_ds_props_helpers.PropTypes.bool.description(
     "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION"
   ).defaultValue(false),
+  ariaDescribedBy: import_ds_props_helpers.PropTypes.string.description("Value passed to the aria-describedby attribute"),
   onClear: import_ds_props_helpers.PropTypes.func.description("Callback triggered when the clearable button is pressed").defaultValue(() => null).signature("(() => void)")
 };
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSInputTextT {\n  export interface IProps {\n    value?: string | number;\n    onValueChange?: (\n      nextValue: string,\n      e: React.ChangeEvent<HTMLInputElement>,\n    ) => void | React.Dispatch<React.SetStateAction<string>>;\n    onClear?: () => void;\n    placeholder?: string;\n    innerRef?: React.MutableRefObject<HTMLInputElement | null> | ((_ref: HTMLInputElement | null) => void);\n    disabled?: boolean;\n    readOnly?: boolean;\n    hasError?: boolean;\n    inputSize?: 's' | 'm';\n    clearable?: boolean;\n    applyAriaDisabled?: boolean;\n  }\n\n  export interface Props extends IProps, Omit<GlobalAttributesT<HTMLInputElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSInputTextT.Props = {\n  onValueChange: () => {},\n  onClear: () => {},\n  placeholder: '',\n  disabled: false,\n  readOnly: false,\n  hasError: false,\n  inputSize: 'm',\n  clearable: false,\n  applyAriaDisabled: false,\n};\n\nexport const DSInputTextPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string)])\n    .description('Value of the input')\n    .defaultValue(''),\n  onValueChange: PropTypes.func\n    .description('Callback triggered when the value changes')\n    .defaultValue(() => null)\n    .signature('((newValue: string, e: React.ChangeEvent) => void)'),\n  placeholder: PropTypes.string.description('Value of the placeholder').defaultValue(''),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func.signature('((ref: HTMLInputElement) => void)')])\n    .description('Reference to the input')\n    .defaultValue(null),\n  disabled: PropTypes.bool.description('Whether the input is disabled').defaultValue(false),\n  readOnly: PropTypes.bool.description('Whether the input is readonly').defaultValue(false),\n  hasError: PropTypes.bool.description('Whether the input has error').defaultValue(false),\n  inputSize: PropTypes.oneOf(['s', 'm']).description('Size of the input').defaultValue('m'),\n  clearable: PropTypes.bool.description('Whether the input is clearable').defaultValue(false),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION',\n    )\n    .defaultValue(false),\n  onClear: PropTypes.func\n    .description('Callback triggered when the clearable button is pressed')\n    .defaultValue(() => null)\n    .signature('(() => void)'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAAuE;AAuBhE,MAAM,eAAmC;AAAA,EAC9C,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,mBAAmB;AACrB;AAEO,MAAM,uBAAuB;AAAA,EAClC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,EACjG,YAAY,oBAAoB,EAChC,aAAa,EAAE;AAAA,EAClB,eAAe,kCAAU,KACtB,YAAY,2CAA2C,EACvD,aAAa,MAAM,IAAI,EACvB,UAAU,oDAAoD;AAAA,EACjE,aAAa,kCAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,EAAE;AAAA,EACrF,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,KAAK,UAAU,mCAAmC,CAAC,CAAC,EAC5G,YAAY,wBAAwB,EACpC,aAAa,IAAI;AAAA,EACpB,UAAU,kCAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,kCAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,kCAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EACtF,WAAW,kCAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,mBAAmB,EAAE,aAAa,GAAG;AAAA,EACxF,WAAW,kCAAU,KAAK,YAAY,gCAAgC,EAAE,aAAa,KAAK;AAAA,EAC1F,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,SAAS,kCAAU,KAChB,YAAY,yDAAyD,EACrE,aAAa,MAAM,IAAI,EACvB,UAAU,cAAc;AAC7B;",
+  "sourcesContent": ["import type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSInputTextT {\n  export interface IProps {\n    value?: string | number;\n    onValueChange?: (\n      nextValue: string,\n      e: React.ChangeEvent<HTMLInputElement>,\n    ) => void | React.Dispatch<React.SetStateAction<string>>;\n    onClear?: () => void;\n    placeholder?: string;\n    innerRef?: React.MutableRefObject<HTMLInputElement | null> | ((_ref: HTMLInputElement | null) => void);\n    disabled?: boolean;\n    readOnly?: boolean;\n    hasError?: boolean;\n    inputSize?: 's' | 'm';\n    clearable?: boolean;\n    applyAriaDisabled?: boolean;\n    ariaDescribedBy?: string;\n  }\n\n  export interface Props extends IProps, Omit<GlobalAttributesT<HTMLInputElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSInputTextT.Props = {\n  onValueChange: () => {},\n  onClear: () => {},\n  placeholder: '',\n  disabled: false,\n  readOnly: false,\n  hasError: false,\n  inputSize: 'm',\n  clearable: false,\n  applyAriaDisabled: false,\n};\n\nexport const DSInputTextPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string)])\n    .description('Value of the input')\n    .defaultValue(''),\n  onValueChange: PropTypes.func\n    .description('Callback triggered when the value changes')\n    .defaultValue(() => null)\n    .signature('((newValue: string, e: React.ChangeEvent) => void)'),\n  placeholder: PropTypes.string.description('Value of the placeholder').defaultValue(''),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func.signature('((ref: HTMLInputElement) => void)')])\n    .description('Reference to the input')\n    .defaultValue(null),\n  disabled: PropTypes.bool.description('Whether the input is disabled').defaultValue(false),\n  readOnly: PropTypes.bool.description('Whether the input is readonly').defaultValue(false),\n  hasError: PropTypes.bool.description('Whether the input has error').defaultValue(false),\n  inputSize: PropTypes.oneOf(['s', 'm']).description('Size of the input').defaultValue('m'),\n  clearable: PropTypes.bool.description('Whether the input is clearable').defaultValue(false),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION',\n    )\n    .defaultValue(false),\n  ariaDescribedBy: PropTypes.string.description('Value passed to the aria-describedby attribute'),\n  onClear: PropTypes.func\n    .description('Callback triggered when the clearable button is pressed')\n    .defaultValue(() => null)\n    .signature('(() => void)'),\n} as ValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AAwBhE,MAAM,eAAmC;AAAA,EAC9C,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,mBAAmB;AACrB;AAEO,MAAM,uBAAuB;AAAA,EAClC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,EACjG,YAAY,oBAAoB,EAChC,aAAa,EAAE;AAAA,EAClB,eAAe,kCAAU,KACtB,YAAY,2CAA2C,EACvD,aAAa,MAAM,IAAI,EACvB,UAAU,oDAAoD;AAAA,EACjE,aAAa,kCAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,EAAE;AAAA,EACrF,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,KAAK,UAAU,mCAAmC,CAAC,CAAC,EAC5G,YAAY,wBAAwB,EACpC,aAAa,IAAI;AAAA,EACpB,UAAU,kCAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,kCAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,kCAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EACtF,WAAW,kCAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,mBAAmB,EAAE,aAAa,GAAG;AAAA,EACxF,WAAW,kCAAU,KAAK,YAAY,gCAAgC,EAAE,aAAa,KAAK;AAAA,EAC1F,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,iBAAiB,kCAAU,OAAO,YAAY,gDAAgD;AAAA,EAC9F,SAAS,kCAAU,KAChB,YAAY,yDAAyD,EACrE,aAAa,MAAM,IAAI,EACvB,UAAU,cAAc;AAC7B;",
   "names": []
 }

package/dist/cjs/styled/borders.js

@@ -38,8 +38,9 @@ const commonBorderCss = import_ds_system.css`
   border: 1px solid ${import_ds_system.th.color("neutral-400")};
 `;
 const readOnlyBorderCss = import_ds_system.css`
-  border: 1px solid transparent;
-  border-top-color: ${import_ds_system.th.color("neutral-400")};
+  background-color: ${import_ds_system.th.color("neutral-050")};
+  border: 1px solid ${import_ds_system.th.color("neutral-080")};
+  border-bottom: 1px solid ${import_ds_system.th.color("neutral-400")};
 `;
 const disabledBorderCss = commonBorderCss;
 const hasErrorBorderCss = import_ds_system.css`
@@ -48,6 +49,9 @@ const hasErrorBorderCss = import_ds_system.css`
 const hoverBorderCss = import_ds_system.css`
   border: 1px solid ${import_ds_system.th.color("brand-700")};
 `;
+const hoverReadOnlyBorderCss = import_ds_system.css`
+  border: 1px solid ${import_ds_system.th.color("brand-600")};
+`;
 const focusBorderCss = import_ds_system.css`
   border: 1px solid transparent;
   outline: 2px solid ${import_ds_system.th.color("brand-700")};
@@ -55,24 +59,19 @@ const focusBorderCss = import_ds_system.css`
 `;
 const getBorderCss = (props) => {
   if (props.isDisabled) return disabledBorderCss;
-  if (props.applyAriaDisabled) {
-    if (props.hasFocus) return focusBorderCss;
-    return disabledBorderCss;
-  }
   if (props.hasFocus) return focusBorderCss;
   if (props.hasError) return hasErrorBorderCss;
-  if (props.isReadOnly) return readOnlyBorderCss;
+  if (props.isReadOnly || props.applyAriaDisabled) return readOnlyBorderCss;
   return commonBorderCss;
 };
 const getHoverBorderCss = (props) => {
   if (props.isDisabled) return disabledBorderCss;
-  if (props.applyAriaDisabled) {
-    if (props.hasFocus) return focusBorderCss;
-    return disabledBorderCss;
-  }
   if (props.hasFocus) return focusBorderCss;
   if (props.hasError) return hasErrorBorderCss;
-  if (props.isReadOnly) return readOnlyBorderCss;
+  if (props.isReadOnly || props.applyAriaDisabled) {
+    if (props.hasFocus) return focusBorderCss;
+    return hoverReadOnlyBorderCss;
+  }
   return hoverBorderCss;
 };
 //# sourceMappingURL=borders.js.map

package/dist/cjs/styled/borders.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styled/borders.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { th, css } from '@elliemae/ds-system';\n\ninterface BorderNecessaryProps {\n  isDisabled: boolean;\n  applyAriaDisabled: boolean;\n  hasError: boolean;\n  isReadOnly: boolean;\n  hasFocus: boolean;\n}\n\nconst commonBorderCss = css`\n  border: 1px solid ${th.color('neutral-400')};\n`;\n\nconst readOnlyBorderCss = css`\n  border: 1px solid transparent;\n  border-top-color: ${th.color('neutral-400')};\n`;\n\nconst disabledBorderCss = commonBorderCss;\n\nconst hasErrorBorderCss = css`\n  border: 1px solid ${th.color('danger-900')};\n`;\n\nconst hoverBorderCss = css`\n  border: 1px solid ${th.color('brand-700')};\n`;\n\nconst focusBorderCss = css`\n  border: 1px solid transparent;\n  outline: 2px solid ${th.color('brand-700')};\n  outline-offset: -2px;\n`;\n\nexport const getBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n  if (props.isDisabled) return disabledBorderCss;\n  if (props.applyAriaDisabled) {\n    if (props.hasFocus) return focusBorderCss;\n    return disabledBorderCss;\n  }\n  if (props.hasFocus) return focusBorderCss;\n  if (props.hasError) return hasErrorBorderCss;\n  if (props.isReadOnly) return readOnlyBorderCss;\n  return commonBorderCss;\n};\n\nexport const getHoverBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n  if (props.isDisabled) return disabledBorderCss;\n  if (props.applyAriaDisabled) {\n    if (props.hasFocus) return focusBorderCss;\n    return disabledBorderCss;\n  }\n  if (props.hasFocus) return focusBorderCss;\n  if (props.hasError) return hasErrorBorderCss;\n  if (props.isReadOnly) return readOnlyBorderCss;\n  return hoverBorderCss;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwB;AAUxB,MAAM,kBAAkB;AAAA,sBACF,oBAAG,MAAM,aAAa,CAAC;AAAA;AAG7C,MAAM,oBAAoB;AAAA;AAAA,sBAEJ,oBAAG,MAAM,aAAa,CAAC;AAAA;AAG7C,MAAM,oBAAoB;AAE1B,MAAM,oBAAoB;AAAA,sBACJ,oBAAG,MAAM,YAAY,CAAC;AAAA;AAG5C,MAAM,iBAAiB;AAAA,sBACD,oBAAG,MAAM,WAAW,CAAC;AAAA;AAG3C,MAAM,iBAAiB;AAAA;AAAA,uBAEA,oBAAG,MAAM,WAAW,CAAC;AAAA;AAAA;AAIrC,MAAM,eAAe,CAAC,UAAwD;AACnF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,mBAAmB;AAC3B,QAAI,MAAM,SAAU,QAAO;AAC3B,WAAO;AAAA,EACT;AACA,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,WAAY,QAAO;AAC7B,SAAO;AACT;AAEO,MAAM,oBAAoB,CAAC,UAAwD;AACxF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,mBAAmB;AAC3B,QAAI,MAAM,SAAU,QAAO;AAC3B,WAAO;AAAA,EACT;AACA,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,WAAY,QAAO;AAC7B,SAAO;AACT;",
+  "sourcesContent": ["import { th, css } from '@elliemae/ds-system';\n\ninterface BorderNecessaryProps {\n  isDisabled: boolean;\n  applyAriaDisabled: boolean;\n  hasError: boolean;\n  isReadOnly: boolean;\n  hasFocus: boolean;\n}\n\nconst commonBorderCss = css`\n  border: 1px solid ${th.color('neutral-400')};\n`;\n\nconst readOnlyBorderCss = css`\n  background-color: ${th.color('neutral-050')};\n  border: 1px solid ${th.color('neutral-080')};\n  border-bottom: 1px solid ${th.color('neutral-400')};\n`;\n\nconst disabledBorderCss = commonBorderCss;\n\nconst hasErrorBorderCss = css`\n  border: 1px solid ${th.color('danger-900')};\n`;\n\nconst hoverBorderCss = css`\n  border: 1px solid ${th.color('brand-700')};\n`;\n\nconst hoverReadOnlyBorderCss = css`\n  border: 1px solid ${th.color('brand-600')};\n`;\n\nconst focusBorderCss = css`\n  border: 1px solid transparent;\n  outline: 2px solid ${th.color('brand-700')};\n  outline-offset: -2px;\n`;\n\nexport const getBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n  if (props.isDisabled) return disabledBorderCss;\n  if (props.hasFocus) return focusBorderCss;\n  if (props.hasError) return hasErrorBorderCss;\n  if (props.isReadOnly || props.applyAriaDisabled) return readOnlyBorderCss;\n  return commonBorderCss;\n};\n\nexport const getHoverBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n  if (props.isDisabled) return disabledBorderCss;\n  if (props.hasFocus) return focusBorderCss;\n  if (props.hasError) return hasErrorBorderCss;\n  if (props.isReadOnly || props.applyAriaDisabled) {\n    if (props.hasFocus) return focusBorderCss;\n    return hoverReadOnlyBorderCss;\n  }\n  return hoverBorderCss;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwB;AAUxB,MAAM,kBAAkB;AAAA,sBACF,oBAAG,MAAM,aAAa,CAAC;AAAA;AAG7C,MAAM,oBAAoB;AAAA,sBACJ,oBAAG,MAAM,aAAa,CAAC;AAAA,sBACvB,oBAAG,MAAM,aAAa,CAAC;AAAA,6BAChB,oBAAG,MAAM,aAAa,CAAC;AAAA;AAGpD,MAAM,oBAAoB;AAE1B,MAAM,oBAAoB;AAAA,sBACJ,oBAAG,MAAM,YAAY,CAAC;AAAA;AAG5C,MAAM,iBAAiB;AAAA,sBACD,oBAAG,MAAM,WAAW,CAAC;AAAA;AAG3C,MAAM,yBAAyB;AAAA,sBACT,oBAAG,MAAM,WAAW,CAAC;AAAA;AAG3C,MAAM,iBAAiB;AAAA;AAAA,uBAEA,oBAAG,MAAM,WAAW,CAAC;AAAA;AAAA;AAIrC,MAAM,eAAe,CAAC,UAAwD;AACnF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,cAAc,MAAM,kBAAmB,QAAO;AACxD,SAAO;AACT;AAEO,MAAM,oBAAoB,CAAC,UAAwD;AACxF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,cAAc,MAAM,mBAAmB;AAC/C,QAAI,MAAM,SAAU,QAAO;AAC3B,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/styled/components.js

@@ -37,11 +37,11 @@ var React = __toESM(require("react"));
 var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_system = require("@elliemae/ds-system");
-var import_exported_related = require("../exported-related/index.js");
+var import_constants = require("../constants/index.js");
 var import_borders = require("./borders.js");
 const StyledInputWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
-  name: import_exported_related.DSInputTextName,
-  slot: import_exported_related.DSInputTextSlots.INPUT_WRAPPER
+  name: import_constants.DSInputTextName,
+  slot: import_constants.DSInputTextSlots.INPUT_WRAPPER
 })`
   ${import_borders.getBorderCss}
   border-radius: 2px;
@@ -51,7 +51,7 @@ const StyledInputWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   min-height: ${({ inputSize }) => inputSize === "m" ? "28px" : "24px"};
   ${import_ds_system.xStyledCommonProps}
 `;
-const StyledInput = (0, import_ds_system.styled)("input", { name: import_exported_related.DSInputTextName, slot: import_exported_related.DSInputTextSlots.INPUT })`
+const StyledInput = (0, import_ds_system.styled)("input", { name: import_constants.DSInputTextName, slot: import_constants.DSInputTextSlots.INPUT })`
   padding: ${({ inputSize }) => inputSize === "m" ? "4px" : "3px"} ${import_ds_system.th.space("xxs")};
   @media (max-width: ${import_ds_system.th.breakpoint("small")}) {
     padding: ${({ inputSize }) => inputSize === "m" ? "3px" : "1.25px"} ${import_ds_system.th.space("xxs")};
@@ -70,15 +70,21 @@ const StyledInput = (0, import_ds_system.styled)("input", { name: import_exporte
     color: ${import_ds_system.th.color("neutral-500")};
   }
 
-  :disabled,
-  &[aria-disabled='true'] {
+  :disabled {
     background-color: ${import_ds_system.th.color("neutral-080")};
     color: #616b7f;
     cursor: not-allowed;
     caret-color: transparent;
   }
+
+  &[aria-disabled='true'],
+  &[aria-readonly='true'] {
+    background-color: ${import_ds_system.th.color("neutral-050")};
+    caret-color: transparent;
+    cursor: text;
+  }
 `;
-const StyledClearButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, { name: import_exported_related.DSInputTextName, slot: import_exported_related.DSInputTextSlots.CLEAR_BUTTON })`
+const StyledClearButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, { name: import_constants.DSInputTextName, slot: import_constants.DSInputTextSlots.CLEAR_BUTTON })`
   height: 100%;
 
   &:after {

package/dist/cjs/styled/components.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styled/components.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { th, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSInputTextName, DSInputTextSlots } from '../exported-related/index.js';\nimport { getBorderCss, getHoverBorderCss } from './borders.js';\n\ninterface StyledInputWrapperProps {\n  isDisabled: boolean;\n  applyAriaDisabled: boolean;\n  hasError: boolean;\n  isReadOnly: boolean;\n  hasFocus: boolean;\n  inputSize: string;\n}\n\nexport const StyledInputWrapper = styled(Grid, {\n  name: DSInputTextName,\n  slot: DSInputTextSlots.INPUT_WRAPPER,\n})<StyledInputWrapperProps>`\n  ${getBorderCss}\n  border-radius: 2px;\n  :hover {\n    ${getHoverBorderCss}\n  }\n  min-height: ${({ inputSize }) => (inputSize === 'm' ? '28px' : '24px')};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledInput = styled('input', { name: DSInputTextName, slot: DSInputTextSlots.INPUT })<{\n  inputSize: string;\n}>`\n  padding: ${({ inputSize }) => (inputSize === 'm' ? '4px' : '3px')} ${th.space('xxs')};\n  @media (max-width: ${th.breakpoint('small')}) {\n    padding: ${({ inputSize }) => (inputSize === 'm' ? '3px' : '1.25px')} ${th.space('xxs')};\n  }\n  border: none;\n  outline: none;\n  border-radius: 2px;\n\n  width: 100%;\n  height: 100%;\n  color: ${th.color('neutral-800')};\n\n  ::placeholder {\n    font-weight: ${th.fontWeight('regular')};\n    font-style: italic;\n    color: ${th.color('neutral-500')};\n  }\n\n  :disabled,\n  &[aria-disabled='true'] {\n    background-color: ${th.color('neutral-080')};\n    color: #616b7f;\n    cursor: not-allowed;\n    caret-color: transparent;\n  }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`\n  height: 100%;\n\n  &:after {\n    border-top-left-radius: 0px !important;\n    border-bottom-left-radius: 0px !important;\n  }\n  :focus {\n    border-width: 0px;\n  }\n\n  &:hover:not(:disabled),\n  &:hover:not([aria-disabled='true']) {\n    background-color: transparent;\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAC3B,qBAAqB;AACrB,uBAA+C;AAC/C,8BAAkD;AAClD,qBAAgD;AAWzC,MAAM,yBAAqB,yBAAO,qBAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,yCAAiB;AACzB,CAAC;AAAA,IACG,2BAAY;AAAA;AAAA;AAAA,MAGV,gCAAiB;AAAA;AAAA,gBAEP,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,SAAS,MAAO;AAAA,IACpE,mCAAkB;AAAA;AAGf,MAAM,kBAAc,yBAAO,SAAS,EAAE,MAAM,yCAAiB,MAAM,yCAAiB,MAAM,CAAC;AAAA,aAGrF,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,KAAM,IAAI,oBAAG,MAAM,KAAK,CAAC;AAAA,uBAC/D,oBAAG,WAAW,OAAO,CAAC;AAAA,eAC9B,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,QAAS,IAAI,oBAAG,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQhF,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,mBAGf,oBAAG,WAAW,SAAS,CAAC;AAAA;AAAA,aAE9B,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKZ,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,wBAAoB,yBAAO,gCAAY,EAAE,MAAM,yCAAiB,MAAM,yCAAiB,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { th, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSInputTextName, DSInputTextSlots } from '../constants/index.js';\nimport { getBorderCss, getHoverBorderCss } from './borders.js';\n\ninterface StyledInputWrapperProps {\n  isDisabled: boolean;\n  applyAriaDisabled: boolean;\n  hasError: boolean;\n  isReadOnly: boolean;\n  hasFocus: boolean;\n  inputSize: string;\n}\n\nexport const StyledInputWrapper = styled(Grid, {\n  name: DSInputTextName,\n  slot: DSInputTextSlots.INPUT_WRAPPER,\n})<StyledInputWrapperProps>`\n  ${getBorderCss}\n  border-radius: 2px;\n  :hover {\n    ${getHoverBorderCss}\n  }\n  min-height: ${({ inputSize }) => (inputSize === 'm' ? '28px' : '24px')};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledInput = styled('input', { name: DSInputTextName, slot: DSInputTextSlots.INPUT })<{\n  inputSize: string;\n}>`\n  padding: ${({ inputSize }) => (inputSize === 'm' ? '4px' : '3px')} ${th.space('xxs')};\n  @media (max-width: ${th.breakpoint('small')}) {\n    padding: ${({ inputSize }) => (inputSize === 'm' ? '3px' : '1.25px')} ${th.space('xxs')};\n  }\n  border: none;\n  outline: none;\n  border-radius: 2px;\n\n  width: 100%;\n  height: 100%;\n  color: ${th.color('neutral-800')};\n\n  ::placeholder {\n    font-weight: ${th.fontWeight('regular')};\n    font-style: italic;\n    color: ${th.color('neutral-500')};\n  }\n\n  :disabled {\n    background-color: ${th.color('neutral-080')};\n    color: #616b7f;\n    cursor: not-allowed;\n    caret-color: transparent;\n  }\n\n  &[aria-disabled='true'],\n  &[aria-readonly='true'] {\n    background-color: ${th.color('neutral-050')};\n    caret-color: transparent;\n    cursor: text;\n  }\n`;\n\nexport const StyledClearButton = styled(DSButtonV3, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`\n  height: 100%;\n\n  &:after {\n    border-top-left-radius: 0px !important;\n    border-bottom-left-radius: 0px !important;\n  }\n  :focus {\n    border-width: 0px;\n  }\n\n  &:hover:not(:disabled),\n  &:hover:not([aria-disabled='true']) {\n    background-color: transparent;\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAC3B,qBAAqB;AACrB,uBAA+C;AAC/C,uBAAkD;AAClD,qBAAgD;AAWzC,MAAM,yBAAqB,yBAAO,qBAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAAA,IACG,2BAAY;AAAA;AAAA;AAAA,MAGV,gCAAiB;AAAA;AAAA,gBAEP,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,SAAS,MAAO;AAAA,IACpE,mCAAkB;AAAA;AAGf,MAAM,kBAAc,yBAAO,SAAS,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,MAAM,CAAC;AAAA,aAGrF,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,KAAM,IAAI,oBAAG,MAAM,KAAK,CAAC;AAAA,uBAC/D,oBAAG,WAAW,OAAO,CAAC;AAAA,eAC9B,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,QAAS,IAAI,oBAAG,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQhF,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,mBAGf,oBAAG,WAAW,SAAS,CAAC;AAAA;AAAA,aAE9B,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA,wBAIZ,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQvB,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAMxC,MAAM,wBAAoB,yBAAO,gCAAY,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/DSInputText.js

@@ -1,12 +1,11 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useRef } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import { CloseMedium } from "@elliemae/ds-icons";
 import { DSIconColors } from "@elliemae/ds-icon";
 import { mergeRefs } from "@elliemae/ds-system";
 import { describe } from "@elliemae/ds-props-helpers";
 import { useInputText } from "./config/useInputText.js";
-import { DSInputTextDataTestIds } from "./exported-related/data-test-ids.js";
 import { DSInputTextPropTypes } from "./react-desc-prop-types.js";
 import { StyledClearButton, StyledInput, StyledInputWrapper } from "./styled/components.js";
 const DSInputText = (props) => {
@@ -27,10 +26,15 @@ const DSInputText = (props) => {
     inputSize,
     onClear,
     value,
-    applyAriaDisabled
+    applyAriaDisabled,
+    ariaDescribedBy
   } = propsWithDefault;
   const inputRef = useRef(null);
-  const shouldDisplayClearButton = clearable && !disabled && value !== "";
+  const shouldDisplayClearButton = clearable && !disabled && value !== "" && !applyAriaDisabled && !readOnly;
+  const defaultAriaDescribedBy = useMemo(
+    () => id !== void 0 ? `${id}_feedback_message ${id}_error_message` : void 0,
+    [id]
+  );
   const handleClear = useCallback(() => {
     onClear();
     inputRef?.current?.focus();
@@ -52,16 +56,16 @@ const DSInputText = (props) => {
           StyledInput,
           {
             inputSize,
-            "data-testid": DSInputTextDataTestIds.INPUT,
             disabled,
             placeholder,
             readOnly,
             innerRef: mergeRefs(innerRef, inputRef),
             value,
-            "aria-describedby": id !== void 0 ? `${id}_feedback_message ${id}_error_message` : void 0,
+            "aria-describedby": defaultAriaDescribedBy || ariaDescribedBy ? `${defaultAriaDescribedBy} ${ariaDescribedBy}` : void 0,
             "aria-invalid": hasError,
             id,
             "aria-disabled": applyAriaDisabled,
+            "aria-readonly": readOnly,
             ...handlers,
             ...otherGlobalAttributes
           }
@@ -69,9 +73,9 @@ const DSInputText = (props) => {
         shouldDisplayClearButton && /* @__PURE__ */ jsx(
           StyledClearButton,
           {
+            disabled: disabled || applyAriaDisabled || readOnly,
             "aria-label": "Clear input value",
             buttonType: "icon",
-            "data-testid": DSInputTextDataTestIds.CLEAR_BUTTON,
             onClick: handleClear,
             size: "s",
             children: /* @__PURE__ */ jsx(CloseMedium, { color: DSIconColors.PRIMARY, size: "s" })

package/dist/esm/DSInputText.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSInputText.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useRef } from 'react';\nimport { CloseMedium } from '@elliemae/ds-icons';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useInputText } from './config/useInputText.js';\nimport { DSInputTextDataTestIds } from './exported-related/data-test-ids.js';\nimport type { DSInputTextT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypes } from './react-desc-prop-types.js';\nimport { StyledClearButton, StyledInput, StyledInputWrapper } from './styled/components.js';\n\nexport const DSInputText: React.ComponentType<DSInputTextT.Props> = (props) => {\n  const {\n    globalAttributes: { className, id, ...otherGlobalAttributes },\n    hasFocus,\n    handlers,\n    propsWithDefault,\n    xstyledProps,\n  } = useInputText(props);\n\n  const {\n    clearable,\n    disabled,\n    hasError,\n    innerRef,\n    placeholder,\n    readOnly,\n    inputSize,\n    onClear,\n    value,\n    applyAriaDisabled,\n  } = propsWithDefault;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const shouldDisplayClearButton = clearable && !disabled && value !== '';\n\n  const handleClear = useCallback(() => {\n    onClear();\n    inputRef?.current?.focus();\n  }, [onClear]);\n\n  return (\n    <StyledInputWrapper\n      className={className}\n      cols={shouldDisplayClearButton ? ['auto', 'min-content'] : ['auto']}\n      isDisabled={disabled}\n      applyAriaDisabled={applyAriaDisabled}\n      isReadOnly={readOnly}\n      hasError={hasError}\n      hasFocus={hasFocus}\n      inputSize={inputSize}\n      {...xstyledProps}\n    >\n      <StyledInput\n        inputSize={inputSize}\n        data-testid={DSInputTextDataTestIds.INPUT}\n        disabled={disabled}\n        placeholder={placeholder}\n        readOnly={readOnly}\n        innerRef={mergeRefs(innerRef, inputRef)}\n        value={value}\n        aria-describedby={id !== undefined ? `${id}_feedback_message ${id}_error_message` : undefined}\n        aria-invalid={hasError}\n        id={id}\n        aria-disabled={applyAriaDisabled}\n        {...handlers}\n        {...otherGlobalAttributes}\n      />\n      {shouldDisplayClearButton && (\n        <StyledClearButton\n          aria-label=\"Clear input value\"\n          buttonType=\"icon\"\n          data-testid={DSInputTextDataTestIds.CLEAR_BUTTON}\n          onClick={handleClear}\n          size=\"s\"\n        >\n          <CloseMedium color={DSIconColors.PRIMARY} size=\"s\" />\n        </StyledClearButton>\n      )}\n    </StyledInputWrapper>\n  );\n};\n\nDSInputText.displayName = 'DSInputText';\nexport const DSInputTextWithSchema = describe(DSInputText);\nDSInputTextWithSchema.propTypes = DSInputTextPropTypes;\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC0CnB,SAWE,KAXF;AA1CJ,SAAgB,aAAa,cAAc;AAC3C,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AAEvC,SAAS,4BAA4B;AACrC,SAAS,mBAAmB,aAAa,0BAA0B;AAE5D,MAAM,cAAuD,CAAC,UAAU;AAC7E,QAAM;AAAA,IACJ,kBAAkB,EAAE,WAAW,IAAI,GAAG,sBAAsB;AAAA,IAC5D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,aAAa,KAAK;AAEtB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,2BAA2B,aAAa,CAAC,YAAY,UAAU;AAErE,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ;AACR,cAAU,SAAS,MAAM;AAAA,EAC3B,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM,2BAA2B,CAAC,QAAQ,aAAa,IAAI,CAAC,MAAM;AAAA,MAClE,YAAY;AAAA,MACZ;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,eAAa,uBAAuB;AAAA,YACpC;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU,UAAU,UAAU,QAAQ;AAAA,YACtC;AAAA,YACA,oBAAkB,OAAO,SAAY,GAAG,EAAE,qBAAqB,EAAE,mBAAmB;AAAA,YACpF,gBAAc;AAAA,YACd;AAAA,YACA,iBAAe;AAAA,YACd,GAAG;AAAA,YACH,GAAG;AAAA;AAAA,QACN;AAAA,QACC,4BACC;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,YAAW;AAAA,YACX,eAAa,uBAAuB;AAAA,YACpC,SAAS;AAAA,YACT,MAAK;AAAA,YAEL,8BAAC,eAAY,OAAO,aAAa,SAAS,MAAK,KAAI;AAAA;AAAA,QACrD;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,YAAY,cAAc;AACnB,MAAM,wBAAwB,SAAS,WAAW;AACzD,sBAAsB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { CloseMedium } from '@elliemae/ds-icons';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useInputText } from './config/useInputText.js';\nimport type { DSInputTextT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypes } from './react-desc-prop-types.js';\nimport { StyledClearButton, StyledInput, StyledInputWrapper } from './styled/components.js';\n\nexport const DSInputText: React.ComponentType<DSInputTextT.Props> = (props) => {\n  const {\n    globalAttributes: { className, id, ...otherGlobalAttributes },\n    hasFocus,\n    handlers,\n    propsWithDefault,\n    xstyledProps,\n  } = useInputText(props);\n\n  const {\n    clearable,\n    disabled,\n    hasError,\n    innerRef,\n    placeholder,\n    readOnly,\n    inputSize,\n    onClear,\n    value,\n    applyAriaDisabled,\n    ariaDescribedBy,\n  } = propsWithDefault;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const shouldDisplayClearButton = clearable && !disabled && value !== '' && !applyAriaDisabled && !readOnly;\n\n  const defaultAriaDescribedBy = useMemo(\n    () => (id !== undefined ? `${id}_feedback_message ${id}_error_message` : undefined),\n    [id],\n  );\n\n  const handleClear = useCallback(() => {\n    onClear();\n    inputRef?.current?.focus();\n  }, [onClear]);\n\n  return (\n    <StyledInputWrapper\n      className={className}\n      cols={shouldDisplayClearButton ? ['auto', 'min-content'] : ['auto']}\n      isDisabled={disabled}\n      applyAriaDisabled={applyAriaDisabled}\n      isReadOnly={readOnly}\n      hasError={hasError}\n      hasFocus={hasFocus}\n      inputSize={inputSize}\n      {...xstyledProps}\n    >\n      <StyledInput\n        inputSize={inputSize}\n        disabled={disabled}\n        placeholder={placeholder}\n        readOnly={readOnly}\n        innerRef={mergeRefs(innerRef, inputRef)}\n        value={value}\n        aria-describedby={\n          defaultAriaDescribedBy || ariaDescribedBy ? `${defaultAriaDescribedBy} ${ariaDescribedBy}` : undefined\n        }\n        aria-invalid={hasError}\n        id={id}\n        aria-disabled={applyAriaDisabled}\n        aria-readonly={readOnly}\n        {...handlers}\n        {...otherGlobalAttributes}\n      />\n      {shouldDisplayClearButton && (\n        <StyledClearButton\n          disabled={disabled || applyAriaDisabled || readOnly}\n          aria-label=\"Clear input value\"\n          buttonType=\"icon\"\n          onClick={handleClear}\n          size=\"s\"\n        >\n          <CloseMedium color={DSIconColors.PRIMARY} size=\"s\" />\n        </StyledClearButton>\n      )}\n    </StyledInputWrapper>\n  );\n};\n\nDSInputText.displayName = 'DSInputText';\nexport const DSInputTextWithSchema = describe(DSInputText);\nDSInputTextWithSchema.propTypes = DSInputTextPropTypes;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgDnB,SAWE,KAXF;AA/CJ,SAAgB,aAAa,SAAS,cAAc;AACpD,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAE7B,SAAS,4BAA4B;AACrC,SAAS,mBAAmB,aAAa,0BAA0B;AAE5D,MAAM,cAAuD,CAAC,UAAU;AAC7E,QAAM;AAAA,IACJ,kBAAkB,EAAE,WAAW,IAAI,GAAG,sBAAsB;AAAA,IAC5D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,aAAa,KAAK;AAEtB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,2BAA2B,aAAa,CAAC,YAAY,UAAU,MAAM,CAAC,qBAAqB,CAAC;AAElG,QAAM,yBAAyB;AAAA,IAC7B,MAAO,OAAO,SAAY,GAAG,EAAE,qBAAqB,EAAE,mBAAmB;AAAA,IACzE,CAAC,EAAE;AAAA,EACL;AAEA,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ;AACR,cAAU,SAAS,MAAM;AAAA,EAC3B,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM,2BAA2B,CAAC,QAAQ,aAAa,IAAI,CAAC,MAAM;AAAA,MAClE,YAAY;AAAA,MACZ;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU,UAAU,UAAU,QAAQ;AAAA,YACtC;AAAA,YACA,oBACE,0BAA0B,kBAAkB,GAAG,sBAAsB,IAAI,eAAe,KAAK;AAAA,YAE/F,gBAAc;AAAA,YACd;AAAA,YACA,iBAAe;AAAA,YACf,iBAAe;AAAA,YACd,GAAG;AAAA,YACH,GAAG;AAAA;AAAA,QACN;AAAA,QACC,4BACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,YAAY,qBAAqB;AAAA,YAC3C,cAAW;AAAA,YACX,YAAW;AAAA,YACX,SAAS;AAAA,YACT,MAAK;AAAA,YAEL,8BAAC,eAAY,OAAO,aAAa,SAAS,MAAK,KAAI;AAAA;AAAA,QACrD;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,YAAY,cAAc;AACnB,MAAM,wBAAwB,SAAS,WAAW;AACzD,sBAAsB,YAAY;",
   "names": []
 }

package/dist/esm/config/useInputText.js

@@ -6,7 +6,7 @@ import {
   useValidateTypescriptPropTypes
 } from "@elliemae/ds-props-helpers";
 import { useCallback, useMemo, useState } from "react";
-import { DSInputTextName } from "../exported-related/index.js";
+import { DSInputTextName } from "../constants/index.js";
 import { defaultProps, DSInputTextPropTypes } from "../react-desc-prop-types.js";
 const useInputText = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);

package/dist/esm/config/useInputText.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useInputText.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type React from 'react';\nimport { useCallback, useMemo, useState } from 'react';\nimport { DSInputTextName } from '../exported-related/index.js';\nimport type { DSInputTextT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSInputTextPropTypes } from '../react-desc-prop-types.js';\n\nexport const useInputText = (props: DSInputTextT.Props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSInputTextT.IProps>>(props, defaultProps);\n\n  useValidateTypescriptPropTypes(props, DSInputTextPropTypes, DSInputTextName);\n\n  const { onValueChange, applyAriaDisabled } = propsWithDefault;\n\n  // =============================================================================\n  // INTERNAL STATE\n  // =============================================================================\n  const [hasFocus, setHasFocus] = useState(false);\n\n  // ===========================================================================\n  // INTERNAL HANDLERS\n  // ===========================================================================\n  const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (applyAriaDisabled) return;\n      onValueChange(e.target.value, e);\n    },\n    [onValueChange, applyAriaDisabled],\n  );\n\n  const handleOnFocus: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n    setHasFocus(true);\n  }, []);\n\n  const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n    setHasFocus(false);\n  }, []);\n\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault, {\n    onChange: handleOnChange,\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  return useMemo(\n    () => ({\n      globalAttributes,\n      hasFocus,\n      handlers: {\n        onChange: handleOnChange,\n        onFocus: handleOnFocus,\n        onBlur: handleOnBlur,\n      },\n      propsWithDefault,\n      xstyledProps,\n    }),\n    [globalAttributes, handleOnBlur, handleOnChange, handleOnFocus, hasFocus, propsWithDefault, xstyledProps],\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type React from 'react';\nimport { useCallback, useMemo, useState } from 'react';\nimport { DSInputTextName } from '../constants/index.js';\nimport type { DSInputTextT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSInputTextPropTypes } from '../react-desc-prop-types.js';\n\nexport const useInputText = (props: DSInputTextT.Props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSInputTextT.IProps>>(props, defaultProps);\n\n  useValidateTypescriptPropTypes(props, DSInputTextPropTypes, DSInputTextName);\n\n  const { onValueChange, applyAriaDisabled } = propsWithDefault;\n\n  // =============================================================================\n  // INTERNAL STATE\n  // =============================================================================\n  const [hasFocus, setHasFocus] = useState(false);\n\n  // ===========================================================================\n  // INTERNAL HANDLERS\n  // ===========================================================================\n  const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (applyAriaDisabled) return;\n      onValueChange(e.target.value, e);\n    },\n    [onValueChange, applyAriaDisabled],\n  );\n\n  const handleOnFocus: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n    setHasFocus(true);\n  }, []);\n\n  const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n    setHasFocus(false);\n  }, []);\n\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault, {\n    onChange: handleOnChange,\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  return useMemo(\n    () => ({\n      globalAttributes,\n      hasFocus,\n      handlers: {\n        onChange: handleOnChange,\n        onFocus: handleOnFocus,\n        onBlur: handleOnBlur,\n      },\n      propsWithDefault,\n      xstyledProps,\n    }),\n    [globalAttributes, handleOnBlur, handleOnChange, handleOnFocus, hasFocus, propsWithDefault, xstyledProps],\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,aAAa,SAAS,gBAAgB;AAC/C,SAAS,uBAAuB;AAEhC,SAAS,cAAc,4BAA4B;AAE5C,MAAM,eAAe,CAAC,UAA8B;AACzD,QAAM,mBAAmB,6BAA4D,OAAO,YAAY;AAExG,iCAA+B,OAAO,sBAAsB,eAAe;AAE3E,QAAM,EAAE,eAAe,kBAAkB,IAAI;AAK7C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAK9C,QAAM,iBAA6D;AAAA,IACjE,CAAC,MAAM;AACL,UAAI,kBAAmB;AACvB,oBAAc,EAAE,OAAO,OAAO,CAAC;AAAA,IACjC;AAAA,IACA,CAAC,eAAe,iBAAiB;AAAA,EACnC;AAEA,QAAM,gBAA2D,YAAY,MAAM;AACjF,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,QAAM,eAA0D,YAAY,MAAM;AAChF,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,CAAC;AAKL,QAAM,mBAAmB,uBAAuB,kBAAkB;AAAA,IAChE,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,QACR,UAAU;AAAA,QACV,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,cAAc,gBAAgB,eAAe,UAAU,kBAAkB,YAAY;AAAA,EAC1G;AACF;",
   "names": []
 }

package/dist/esm/constants/index.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+const DSFormInputTextName = "DSInputtext";
+const FORM_INPUT_TEXT_SLOTS = {
+  INPUT_WRAPPER: "root",
+  INPUT: "input",
+  CLEAR_BUTTON: "input-clear-button"
+};
+const FORM_INPUT_TEXT_DATA_TESTID = slotObjectToDataTestIds(DSFormInputTextName, FORM_INPUT_TEXT_SLOTS);
+const DSInputTextDataTestIds = FORM_INPUT_TEXT_DATA_TESTID;
+const DSInputTextName = "DSInputtext";
+const DSInputTextSlots = {
+  INPUT_WRAPPER: "root",
+  INPUT: "input",
+  CLEAR_BUTTON: "input-clear-button"
+};
+export {
+  DSFormInputTextName,
+  DSInputTextDataTestIds,
+  DSInputTextName,
+  DSInputTextSlots,
+  FORM_INPUT_TEXT_DATA_TESTID,
+  FORM_INPUT_TEXT_SLOTS
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFormInputTextName = 'DSInputtext';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_INPUT_TEXT_SLOTS = {\n  INPUT_WRAPPER: 'root',\n  INPUT: 'input',\n  CLEAR_BUTTON: 'input-clear-button',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_INPUT_TEXT_DATA_TESTID = slotObjectToDataTestIds(DSFormInputTextName, FORM_INPUT_TEXT_SLOTS);\n\n// keeping legacy code to avoid breaking changes, the code above this is the new convention\nexport const DSInputTextDataTestIds = FORM_INPUT_TEXT_DATA_TESTID;\n\nexport const DSInputTextName = 'DSInputtext';\n\nexport const DSInputTextSlots = {\n  INPUT_WRAPPER: 'root',\n  INPUT: 'input',\n  CLEAR_BUTTON: 'input-clear-button',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,sBAAsB;AAG5B,MAAM,wBAAwB;AAAA,EACnC,eAAe;AAAA,EACf,OAAO;AAAA,EACP,cAAc;AAChB;AAGO,MAAM,8BAA8B,wBAAwB,qBAAqB,qBAAqB;AAGtG,MAAM,yBAAyB;AAE/B,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,eAAe;AAAA,EACf,OAAO;AAAA,EACP,cAAc;AAChB;",
+  "names": []
+}

package/dist/esm/index.js

@@ -1,4 +1,19 @@
 import * as React from "react";
 export * from "./DSInputText.js";
-export * from "./exported-related/index.js";
+import {
+  DSFormInputTextName,
+  FORM_INPUT_TEXT_SLOTS,
+  FORM_INPUT_TEXT_DATA_TESTID,
+  DSInputTextDataTestIds,
+  DSInputTextSlots,
+  DSInputTextName
+} from "./constants/index.js";
+export {
+  DSFormInputTextName,
+  DSInputTextDataTestIds,
+  DSInputTextName,
+  DSInputTextSlots,
+  FORM_INPUT_TEXT_DATA_TESTID,
+  FORM_INPUT_TEXT_SLOTS
+};
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSInputText.js';\nexport * from './exported-related/index.js';\nexport type { DSInputTextT } from './react-desc-prop-types.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSInputText.js';\nexport type { DSInputTextT } from './react-desc-prop-types.js';\nexport {\n  DSFormInputTextName,\n  FORM_INPUT_TEXT_SLOTS,\n  FORM_INPUT_TEXT_DATA_TESTID,\n  // legacy imports to avoid breaking changes\n  DSInputTextDataTestIds,\n  DSInputTextSlots,\n  DSInputTextName,\n} from './constants/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AAEd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js

@@ -28,6 +28,7 @@ const DSInputTextPropTypes = {
   applyAriaDisabled: PropTypes.bool.description(
     "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION"
   ).defaultValue(false),
+  ariaDescribedBy: PropTypes.string.description("Value passed to the aria-describedby attribute"),
   onClear: PropTypes.func.description("Callback triggered when the clearable button is pressed").defaultValue(() => null).signature("(() => void)")
 };
 export {

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSInputTextT {\n  export interface IProps {\n    value?: string | number;\n    onValueChange?: (\n      nextValue: string,\n      e: React.ChangeEvent<HTMLInputElement>,\n    ) => void | React.Dispatch<React.SetStateAction<string>>;\n    onClear?: () => void;\n    placeholder?: string;\n    innerRef?: React.MutableRefObject<HTMLInputElement | null> | ((_ref: HTMLInputElement | null) => void);\n    disabled?: boolean;\n    readOnly?: boolean;\n    hasError?: boolean;\n    inputSize?: 's' | 'm';\n    clearable?: boolean;\n    applyAriaDisabled?: boolean;\n  }\n\n  export interface Props extends IProps, Omit<GlobalAttributesT<HTMLInputElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSInputTextT.Props = {\n  onValueChange: () => {},\n  onClear: () => {},\n  placeholder: '',\n  disabled: false,\n  readOnly: false,\n  hasError: false,\n  inputSize: 'm',\n  clearable: false,\n  applyAriaDisabled: false,\n};\n\nexport const DSInputTextPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string)])\n    .description('Value of the input')\n    .defaultValue(''),\n  onValueChange: PropTypes.func\n    .description('Callback triggered when the value changes')\n    .defaultValue(() => null)\n    .signature('((newValue: string, e: React.ChangeEvent) => void)'),\n  placeholder: PropTypes.string.description('Value of the placeholder').defaultValue(''),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func.signature('((ref: HTMLInputElement) => void)')])\n    .description('Reference to the input')\n    .defaultValue(null),\n  disabled: PropTypes.bool.description('Whether the input is disabled').defaultValue(false),\n  readOnly: PropTypes.bool.description('Whether the input is readonly').defaultValue(false),\n  hasError: PropTypes.bool.description('Whether the input has error').defaultValue(false),\n  inputSize: PropTypes.oneOf(['s', 'm']).description('Size of the input').defaultValue('m'),\n  clearable: PropTypes.bool.description('Whether the input is clearable').defaultValue(false),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION',\n    )\n    .defaultValue(false),\n  onClear: PropTypes.func\n    .description('Callback triggered when the clearable button is pressed')\n    .defaultValue(() => null)\n    .signature('(() => void)'),\n} as WeakValidationMap<unknown>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW,2BAA2B,wBAAwB;AAuBhE,MAAM,eAAmC;AAAA,EAC9C,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,mBAAmB;AACrB;AAEO,MAAM,uBAAuB;AAAA,EAClC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,EACjG,YAAY,oBAAoB,EAChC,aAAa,EAAE;AAAA,EAClB,eAAe,UAAU,KACtB,YAAY,2CAA2C,EACvD,aAAa,MAAM,IAAI,EACvB,UAAU,oDAAoD;AAAA,EACjE,aAAa,UAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,EAAE;AAAA,EACrF,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,KAAK,UAAU,mCAAmC,CAAC,CAAC,EAC5G,YAAY,wBAAwB,EACpC,aAAa,IAAI;AAAA,EACpB,UAAU,UAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,UAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,UAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EACtF,WAAW,UAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,mBAAmB,EAAE,aAAa,GAAG;AAAA,EACxF,WAAW,UAAU,KAAK,YAAY,gCAAgC,EAAE,aAAa,KAAK;AAAA,EAC1F,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,SAAS,UAAU,KAChB,YAAY,yDAAyD,EACrE,aAAa,MAAM,IAAI,EACvB,UAAU,cAAc;AAC7B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSInputTextT {\n  export interface IProps {\n    value?: string | number;\n    onValueChange?: (\n      nextValue: string,\n      e: React.ChangeEvent<HTMLInputElement>,\n    ) => void | React.Dispatch<React.SetStateAction<string>>;\n    onClear?: () => void;\n    placeholder?: string;\n    innerRef?: React.MutableRefObject<HTMLInputElement | null> | ((_ref: HTMLInputElement | null) => void);\n    disabled?: boolean;\n    readOnly?: boolean;\n    hasError?: boolean;\n    inputSize?: 's' | 'm';\n    clearable?: boolean;\n    applyAriaDisabled?: boolean;\n    ariaDescribedBy?: string;\n  }\n\n  export interface Props extends IProps, Omit<GlobalAttributesT<HTMLInputElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSInputTextT.Props = {\n  onValueChange: () => {},\n  onClear: () => {},\n  placeholder: '',\n  disabled: false,\n  readOnly: false,\n  hasError: false,\n  inputSize: 'm',\n  clearable: false,\n  applyAriaDisabled: false,\n};\n\nexport const DSInputTextPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string)])\n    .description('Value of the input')\n    .defaultValue(''),\n  onValueChange: PropTypes.func\n    .description('Callback triggered when the value changes')\n    .defaultValue(() => null)\n    .signature('((newValue: string, e: React.ChangeEvent) => void)'),\n  placeholder: PropTypes.string.description('Value of the placeholder').defaultValue(''),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func.signature('((ref: HTMLInputElement) => void)')])\n    .description('Reference to the input')\n    .defaultValue(null),\n  disabled: PropTypes.bool.description('Whether the input is disabled').defaultValue(false),\n  readOnly: PropTypes.bool.description('Whether the input is readonly').defaultValue(false),\n  hasError: PropTypes.bool.description('Whether the input has error').defaultValue(false),\n  inputSize: PropTypes.oneOf(['s', 'm']).description('Size of the input').defaultValue('m'),\n  clearable: PropTypes.bool.description('Whether the input is clearable').defaultValue(false),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION',\n    )\n    .defaultValue(false),\n  ariaDescribedBy: PropTypes.string.description('Value passed to the aria-describedby attribute'),\n  onClear: PropTypes.func\n    .description('Callback triggered when the clearable button is pressed')\n    .defaultValue(() => null)\n    .signature('(() => void)'),\n} as ValidationMap<unknown>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AAwBhE,MAAM,eAAmC;AAAA,EAC9C,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,mBAAmB;AACrB;AAEO,MAAM,uBAAuB;AAAA,EAClC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,EACjG,YAAY,oBAAoB,EAChC,aAAa,EAAE;AAAA,EAClB,eAAe,UAAU,KACtB,YAAY,2CAA2C,EACvD,aAAa,MAAM,IAAI,EACvB,UAAU,oDAAoD;AAAA,EACjE,aAAa,UAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,EAAE;AAAA,EACrF,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,KAAK,UAAU,mCAAmC,CAAC,CAAC,EAC5G,YAAY,wBAAwB,EACpC,aAAa,IAAI;AAAA,EACpB,UAAU,UAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,UAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,UAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EACtF,WAAW,UAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,mBAAmB,EAAE,aAAa,GAAG;AAAA,EACxF,WAAW,UAAU,KAAK,YAAY,gCAAgC,EAAE,aAAa,KAAK;AAAA,EAC1F,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,iBAAiB,UAAU,OAAO,YAAY,gDAAgD;AAAA,EAC9F,SAAS,UAAU,KAChB,YAAY,yDAAyD,EACrE,aAAa,MAAM,IAAI,EACvB,UAAU,cAAc;AAC7B;",
   "names": []
 }

package/dist/esm/styled/borders.js

@@ -4,8 +4,9 @@ const commonBorderCss = css`
   border: 1px solid ${th.color("neutral-400")};
 `;
 const readOnlyBorderCss = css`
-  border: 1px solid transparent;
-  border-top-color: ${th.color("neutral-400")};
+  background-color: ${th.color("neutral-050")};
+  border: 1px solid ${th.color("neutral-080")};
+  border-bottom: 1px solid ${th.color("neutral-400")};
 `;
 const disabledBorderCss = commonBorderCss;
 const hasErrorBorderCss = css`
@@ -14,6 +15,9 @@ const hasErrorBorderCss = css`
 const hoverBorderCss = css`
   border: 1px solid ${th.color("brand-700")};
 `;
+const hoverReadOnlyBorderCss = css`
+  border: 1px solid ${th.color("brand-600")};
+`;
 const focusBorderCss = css`
   border: 1px solid transparent;
   outline: 2px solid ${th.color("brand-700")};
@@ -21,24 +25,19 @@ const focusBorderCss = css`
 `;
 const getBorderCss = (props) => {
   if (props.isDisabled) return disabledBorderCss;
-  if (props.applyAriaDisabled) {
-    if (props.hasFocus) return focusBorderCss;
-    return disabledBorderCss;
-  }
   if (props.hasFocus) return focusBorderCss;
   if (props.hasError) return hasErrorBorderCss;
-  if (props.isReadOnly) return readOnlyBorderCss;
+  if (props.isReadOnly || props.applyAriaDisabled) return readOnlyBorderCss;
   return commonBorderCss;
 };
 const getHoverBorderCss = (props) => {
   if (props.isDisabled) return disabledBorderCss;
-  if (props.applyAriaDisabled) {
-    if (props.hasFocus) return focusBorderCss;
-    return disabledBorderCss;
-  }
   if (props.hasFocus) return focusBorderCss;
   if (props.hasError) return hasErrorBorderCss;
-  if (props.isReadOnly) return readOnlyBorderCss;
+  if (props.isReadOnly || props.applyAriaDisabled) {
+    if (props.hasFocus) return focusBorderCss;
+    return hoverReadOnlyBorderCss;
+  }
   return hoverBorderCss;
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/borders.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { th, css } from '@elliemae/ds-system';\n\ninterface BorderNecessaryProps {\n  isDisabled: boolean;\n  applyAriaDisabled: boolean;\n  hasError: boolean;\n  isReadOnly: boolean;\n  hasFocus: boolean;\n}\n\nconst commonBorderCss = css`\n  border: 1px solid ${th.color('neutral-400')};\n`;\n\nconst readOnlyBorderCss = css`\n  border: 1px solid transparent;\n  border-top-color: ${th.color('neutral-400')};\n`;\n\nconst disabledBorderCss = commonBorderCss;\n\nconst hasErrorBorderCss = css`\n  border: 1px solid ${th.color('danger-900')};\n`;\n\nconst hoverBorderCss = css`\n  border: 1px solid ${th.color('brand-700')};\n`;\n\nconst focusBorderCss = css`\n  border: 1px solid transparent;\n  outline: 2px solid ${th.color('brand-700')};\n  outline-offset: -2px;\n`;\n\nexport const getBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n  if (props.isDisabled) return disabledBorderCss;\n  if (props.applyAriaDisabled) {\n    if (props.hasFocus) return focusBorderCss;\n    return disabledBorderCss;\n  }\n  if (props.hasFocus) return focusBorderCss;\n  if (props.hasError) return hasErrorBorderCss;\n  if (props.isReadOnly) return readOnlyBorderCss;\n  return commonBorderCss;\n};\n\nexport const getHoverBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n  if (props.isDisabled) return disabledBorderCss;\n  if (props.applyAriaDisabled) {\n    if (props.hasFocus) return focusBorderCss;\n    return disabledBorderCss;\n  }\n  if (props.hasFocus) return focusBorderCss;\n  if (props.hasError) return hasErrorBorderCss;\n  if (props.isReadOnly) return readOnlyBorderCss;\n  return hoverBorderCss;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,IAAI,WAAW;AAUxB,MAAM,kBAAkB;AAAA,sBACF,GAAG,MAAM,aAAa,CAAC;AAAA;AAG7C,MAAM,oBAAoB;AAAA;AAAA,sBAEJ,GAAG,MAAM,aAAa,CAAC;AAAA;AAG7C,MAAM,oBAAoB;AAE1B,MAAM,oBAAoB;AAAA,sBACJ,GAAG,MAAM,YAAY,CAAC;AAAA;AAG5C,MAAM,iBAAiB;AAAA,sBACD,GAAG,MAAM,WAAW,CAAC;AAAA;AAG3C,MAAM,iBAAiB;AAAA;AAAA,uBAEA,GAAG,MAAM,WAAW,CAAC;AAAA;AAAA;AAIrC,MAAM,eAAe,CAAC,UAAwD;AACnF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,mBAAmB;AAC3B,QAAI,MAAM,SAAU,QAAO;AAC3B,WAAO;AAAA,EACT;AACA,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,WAAY,QAAO;AAC7B,SAAO;AACT;AAEO,MAAM,oBAAoB,CAAC,UAAwD;AACxF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,mBAAmB;AAC3B,QAAI,MAAM,SAAU,QAAO;AAC3B,WAAO;AAAA,EACT;AACA,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,WAAY,QAAO;AAC7B,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { th, css } from '@elliemae/ds-system';\n\ninterface BorderNecessaryProps {\n  isDisabled: boolean;\n  applyAriaDisabled: boolean;\n  hasError: boolean;\n  isReadOnly: boolean;\n  hasFocus: boolean;\n}\n\nconst commonBorderCss = css`\n  border: 1px solid ${th.color('neutral-400')};\n`;\n\nconst readOnlyBorderCss = css`\n  background-color: ${th.color('neutral-050')};\n  border: 1px solid ${th.color('neutral-080')};\n  border-bottom: 1px solid ${th.color('neutral-400')};\n`;\n\nconst disabledBorderCss = commonBorderCss;\n\nconst hasErrorBorderCss = css`\n  border: 1px solid ${th.color('danger-900')};\n`;\n\nconst hoverBorderCss = css`\n  border: 1px solid ${th.color('brand-700')};\n`;\n\nconst hoverReadOnlyBorderCss = css`\n  border: 1px solid ${th.color('brand-600')};\n`;\n\nconst focusBorderCss = css`\n  border: 1px solid transparent;\n  outline: 2px solid ${th.color('brand-700')};\n  outline-offset: -2px;\n`;\n\nexport const getBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n  if (props.isDisabled) return disabledBorderCss;\n  if (props.hasFocus) return focusBorderCss;\n  if (props.hasError) return hasErrorBorderCss;\n  if (props.isReadOnly || props.applyAriaDisabled) return readOnlyBorderCss;\n  return commonBorderCss;\n};\n\nexport const getHoverBorderCss = (props: BorderNecessaryProps): ReturnType<typeof css> => {\n  if (props.isDisabled) return disabledBorderCss;\n  if (props.hasFocus) return focusBorderCss;\n  if (props.hasError) return hasErrorBorderCss;\n  if (props.isReadOnly || props.applyAriaDisabled) {\n    if (props.hasFocus) return focusBorderCss;\n    return hoverReadOnlyBorderCss;\n  }\n  return hoverBorderCss;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,IAAI,WAAW;AAUxB,MAAM,kBAAkB;AAAA,sBACF,GAAG,MAAM,aAAa,CAAC;AAAA;AAG7C,MAAM,oBAAoB;AAAA,sBACJ,GAAG,MAAM,aAAa,CAAC;AAAA,sBACvB,GAAG,MAAM,aAAa,CAAC;AAAA,6BAChB,GAAG,MAAM,aAAa,CAAC;AAAA;AAGpD,MAAM,oBAAoB;AAE1B,MAAM,oBAAoB;AAAA,sBACJ,GAAG,MAAM,YAAY,CAAC;AAAA;AAG5C,MAAM,iBAAiB;AAAA,sBACD,GAAG,MAAM,WAAW,CAAC;AAAA;AAG3C,MAAM,yBAAyB;AAAA,sBACT,GAAG,MAAM,WAAW,CAAC;AAAA;AAG3C,MAAM,iBAAiB;AAAA;AAAA,uBAEA,GAAG,MAAM,WAAW,CAAC;AAAA;AAAA;AAIrC,MAAM,eAAe,CAAC,UAAwD;AACnF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,cAAc,MAAM,kBAAmB,QAAO;AACxD,SAAO;AACT;AAEO,MAAM,oBAAoB,CAAC,UAAwD;AACxF,MAAI,MAAM,WAAY,QAAO;AAC7B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,SAAU,QAAO;AAC3B,MAAI,MAAM,cAAc,MAAM,mBAAmB;AAC/C,QAAI,MAAM,SAAU,QAAO;AAC3B,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/styled/components.js

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { DSButtonV2 } from "@elliemae/ds-button-v2";
+import { DSButtonV3 } from "@elliemae/ds-button-v2";
 import { Grid } from "@elliemae/ds-grid";
 import { th, styled, xStyledCommonProps } from "@elliemae/ds-system";
-import { DSInputTextName, DSInputTextSlots } from "../exported-related/index.js";
+import { DSInputTextName, DSInputTextSlots } from "../constants/index.js";
 import { getBorderCss, getHoverBorderCss } from "./borders.js";
 const StyledInputWrapper = styled(Grid, {
   name: DSInputTextName,
@@ -35,15 +35,21 @@ const StyledInput = styled("input", { name: DSInputTextName, slot: DSInputTextSl
     color: ${th.color("neutral-500")};
   }
 
-  :disabled,
-  &[aria-disabled='true'] {
+  :disabled {
     background-color: ${th.color("neutral-080")};
     color: #616b7f;
     cursor: not-allowed;
     caret-color: transparent;
   }
+
+  &[aria-disabled='true'],
+  &[aria-readonly='true'] {
+    background-color: ${th.color("neutral-050")};
+    caret-color: transparent;
+    cursor: text;
+  }
 `;
-const StyledClearButton = styled(DSButtonV2, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`
+const StyledClearButton = styled(DSButtonV3, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`
   height: 100%;
 
   &:after {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/components.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { th, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSInputTextName, DSInputTextSlots } from '../exported-related/index.js';\nimport { getBorderCss, getHoverBorderCss } from './borders.js';\n\ninterface StyledInputWrapperProps {\n  isDisabled: boolean;\n  applyAriaDisabled: boolean;\n  hasError: boolean;\n  isReadOnly: boolean;\n  hasFocus: boolean;\n  inputSize: string;\n}\n\nexport const StyledInputWrapper = styled(Grid, {\n  name: DSInputTextName,\n  slot: DSInputTextSlots.INPUT_WRAPPER,\n})<StyledInputWrapperProps>`\n  ${getBorderCss}\n  border-radius: 2px;\n  :hover {\n    ${getHoverBorderCss}\n  }\n  min-height: ${({ inputSize }) => (inputSize === 'm' ? '28px' : '24px')};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledInput = styled('input', { name: DSInputTextName, slot: DSInputTextSlots.INPUT })<{\n  inputSize: string;\n}>`\n  padding: ${({ inputSize }) => (inputSize === 'm' ? '4px' : '3px')} ${th.space('xxs')};\n  @media (max-width: ${th.breakpoint('small')}) {\n    padding: ${({ inputSize }) => (inputSize === 'm' ? '3px' : '1.25px')} ${th.space('xxs')};\n  }\n  border: none;\n  outline: none;\n  border-radius: 2px;\n\n  width: 100%;\n  height: 100%;\n  color: ${th.color('neutral-800')};\n\n  ::placeholder {\n    font-weight: ${th.fontWeight('regular')};\n    font-style: italic;\n    color: ${th.color('neutral-500')};\n  }\n\n  :disabled,\n  &[aria-disabled='true'] {\n    background-color: ${th.color('neutral-080')};\n    color: #616b7f;\n    cursor: not-allowed;\n    caret-color: transparent;\n  }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`\n  height: 100%;\n\n  &:after {\n    border-top-left-radius: 0px !important;\n    border-bottom-left-radius: 0px !important;\n  }\n  :focus {\n    border-width: 0px;\n  }\n\n  &:hover:not(:disabled),\n  &:hover:not([aria-disabled='true']) {\n    background-color: transparent;\n  }\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,IAAI,QAAQ,0BAA0B;AAC/C,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,cAAc,yBAAyB;AAWzC,MAAM,qBAAqB,OAAO,MAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA,IACG,YAAY;AAAA;AAAA;AAAA,MAGV,iBAAiB;AAAA;AAAA,gBAEP,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,SAAS,MAAO;AAAA,IACpE,kBAAkB;AAAA;AAGf,MAAM,cAAc,OAAO,SAAS,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,MAAM,CAAC;AAAA,aAGrF,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,KAAM,IAAI,GAAG,MAAM,KAAK,CAAC;AAAA,uBAC/D,GAAG,WAAW,OAAO,CAAC;AAAA,eAC9B,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,QAAS,IAAI,GAAG,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQhF,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,mBAGf,GAAG,WAAW,SAAS,CAAC;AAAA;AAAA,aAE9B,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKZ,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,oBAAoB,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { th, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSInputTextName, DSInputTextSlots } from '../constants/index.js';\nimport { getBorderCss, getHoverBorderCss } from './borders.js';\n\ninterface StyledInputWrapperProps {\n  isDisabled: boolean;\n  applyAriaDisabled: boolean;\n  hasError: boolean;\n  isReadOnly: boolean;\n  hasFocus: boolean;\n  inputSize: string;\n}\n\nexport const StyledInputWrapper = styled(Grid, {\n  name: DSInputTextName,\n  slot: DSInputTextSlots.INPUT_WRAPPER,\n})<StyledInputWrapperProps>`\n  ${getBorderCss}\n  border-radius: 2px;\n  :hover {\n    ${getHoverBorderCss}\n  }\n  min-height: ${({ inputSize }) => (inputSize === 'm' ? '28px' : '24px')};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledInput = styled('input', { name: DSInputTextName, slot: DSInputTextSlots.INPUT })<{\n  inputSize: string;\n}>`\n  padding: ${({ inputSize }) => (inputSize === 'm' ? '4px' : '3px')} ${th.space('xxs')};\n  @media (max-width: ${th.breakpoint('small')}) {\n    padding: ${({ inputSize }) => (inputSize === 'm' ? '3px' : '1.25px')} ${th.space('xxs')};\n  }\n  border: none;\n  outline: none;\n  border-radius: 2px;\n\n  width: 100%;\n  height: 100%;\n  color: ${th.color('neutral-800')};\n\n  ::placeholder {\n    font-weight: ${th.fontWeight('regular')};\n    font-style: italic;\n    color: ${th.color('neutral-500')};\n  }\n\n  :disabled {\n    background-color: ${th.color('neutral-080')};\n    color: #616b7f;\n    cursor: not-allowed;\n    caret-color: transparent;\n  }\n\n  &[aria-disabled='true'],\n  &[aria-readonly='true'] {\n    background-color: ${th.color('neutral-050')};\n    caret-color: transparent;\n    cursor: text;\n  }\n`;\n\nexport const StyledClearButton = styled(DSButtonV3, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`\n  height: 100%;\n\n  &:after {\n    border-top-left-radius: 0px !important;\n    border-bottom-left-radius: 0px !important;\n  }\n  :focus {\n    border-width: 0px;\n  }\n\n  &:hover:not(:disabled),\n  &:hover:not([aria-disabled='true']) {\n    background-color: transparent;\n  }\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,IAAI,QAAQ,0BAA0B;AAC/C,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,cAAc,yBAAyB;AAWzC,MAAM,qBAAqB,OAAO,MAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA,IACG,YAAY;AAAA;AAAA;AAAA,MAGV,iBAAiB;AAAA;AAAA,gBAEP,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,SAAS,MAAO;AAAA,IACpE,kBAAkB;AAAA;AAGf,MAAM,cAAc,OAAO,SAAS,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,MAAM,CAAC;AAAA,aAGrF,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,KAAM,IAAI,GAAG,MAAM,KAAK,CAAC;AAAA,uBAC/D,GAAG,WAAW,OAAO,CAAC;AAAA,eAC9B,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,QAAQ,QAAS,IAAI,GAAG,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQhF,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,mBAGf,GAAG,WAAW,SAAS,CAAC;AAAA;AAAA,aAE9B,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA,wBAIZ,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQvB,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAMxC,MAAM,oBAAoB,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/types/constants/index.d.ts

@@ -0,0 +1,14 @@
+export declare const DSFormInputTextName = "DSInputtext";
+export declare const FORM_INPUT_TEXT_SLOTS: {
+    readonly INPUT_WRAPPER: "root";
+    readonly INPUT: "input";
+    readonly CLEAR_BUTTON: "input-clear-button";
+};
+export declare const FORM_INPUT_TEXT_DATA_TESTID: Record<string, string>;
+export declare const DSInputTextDataTestIds: Record<string, string>;
+export declare const DSInputTextName = "DSInputtext";
+export declare const DSInputTextSlots: {
+    INPUT_WRAPPER: string;
+    INPUT: string;
+    CLEAR_BUTTON: string;
+};

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
 export * from './DSInputText.js';
-export * from './exported-related/index.js';
 export type { DSInputTextT } from './react-desc-prop-types.js';
+export { DSFormInputTextName, FORM_INPUT_TEXT_SLOTS, FORM_INPUT_TEXT_DATA_TESTID, DSInputTextDataTestIds, DSInputTextSlots, DSInputTextName, } from './constants/index.js';

package/dist/types/react-desc-prop-types.d.ts

@@ -1,6 +1,6 @@
-import type { WeakValidationMap } from 'react';
+/// <reference types="prop-types" />
 import type React from 'react';
-import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
+import type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';
 export declare namespace DSInputTextT {
     interface IProps {
         value?: string | number;
@@ -14,9 +14,10 @@ export declare namespace DSInputTextT {
         inputSize?: 's' | 'm';
         clearable?: boolean;
         applyAriaDisabled?: boolean;
+        ariaDescribedBy?: string;
     }
     interface Props extends IProps, Omit<GlobalAttributesT<HTMLInputElement>, keyof IProps>, XstyledProps {
     }
 }
 export declare const defaultProps: DSInputTextT.Props;
-export declare const DSInputTextPropTypes: WeakValidationMap<unknown>;
+export declare const DSInputTextPropTypes: ValidationMap<unknown>;

package/dist/types/styled/components.d.ts

@@ -11,5 +11,5 @@ export declare const StyledInputWrapper: import("styled-components").StyledCompo
 export declare const StyledInput: import("styled-components").StyledComponent<"input", import("@elliemae/ds-system").Theme, {
     inputSize: string;
 } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"input">, never>;
-export declare const StyledClearButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>>, never>;
+export declare const StyledClearButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>>, never>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-input-text",
-  "version": "3.50.0-next.2",
+  "version": "3.50.0-rc.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Input Text",
   "files": [
@@ -25,8 +25,8 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "pnpm": ">=9",
+    "node": ">=22"
   },
   "author": "ICE MT",
   "jestSonar": {
@@ -36,19 +36,21 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button-v2": "3.50.0-next.2",
-    "@elliemae/ds-grid": "3.50.0-next.2",
-    "@elliemae/ds-icons": "3.50.0-next.2",
-    "@elliemae/ds-icon": "3.50.0-next.2",
-    "@elliemae/ds-props-helpers": "3.50.0-next.2",
-    "@elliemae/ds-system": "3.50.0-next.2"
+    "@elliemae/ds-button-v2": "3.50.0-rc.1",
+    "@elliemae/ds-grid": "3.50.0-rc.1",
+    "@elliemae/ds-icon": "3.50.0-rc.1",
+    "@elliemae/ds-system": "3.50.0-rc.1",
+    "@elliemae/ds-props-helpers": "3.50.0-rc.1",
+    "@elliemae/ds-icons": "3.50.0-rc.1"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "9.0.0-next.31",
+    "@elliemae/pui-cli": "9.0.0-next.50",
     "@elliemae/pui-theme": "~2.10.0",
+    "jest": "~29.7.0",
+    "jest-cli": "~29.7.0",
     "styled-components": "~5.3.9",
-    "styled-system": "^5.1.5",
-    "@elliemae/ds-monorepo-devops": "3.50.0-next.2"
+    "styled-system": "~5.1.5",
+    "@elliemae/ds-monorepo-devops": "3.50.0-rc.1"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.10.0",

package/dist/cjs/exported-related/data-test-ids.js

@@ -1,39 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var data_test_ids_exports = {};
-__export(data_test_ids_exports, {
-  DSInputTextDataTestIds: () => DSInputTextDataTestIds
-});
-module.exports = __toCommonJS(data_test_ids_exports);
-var React = __toESM(require("react"));
-const DSInputTextDataTestIds = {
-  INPUT: "ds-input-text-input",
-  CLEAR_BUTTON: "ds-input-text-clear-button"
-};
-//# sourceMappingURL=data-test-ids.js.map

package/dist/cjs/exported-related/data-test-ids.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/exported-related/data-test-ids.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const DSInputTextDataTestIds = {\n  INPUT: 'ds-input-text-input',\n  CLEAR_BUTTON: 'ds-input-text-clear-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,yBAAyB;AAAA,EACpC,OAAO;AAAA,EACP,cAAc;AAChB;",
-  "names": []
-}

package/dist/cjs/exported-related/index.js

@@ -1,31 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var exported_related_exports = {};
-module.exports = __toCommonJS(exported_related_exports);
-var React = __toESM(require("react"));
-__reExport(exported_related_exports, require("./data-test-ids.js"), module.exports);
-__reExport(exported_related_exports, require("./theming.js"), module.exports);
-//# sourceMappingURL=index.js.map

package/dist/cjs/exported-related/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/exported-related/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './data-test-ids.js';\nexport * from './theming.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,qCAAc,+BAAd;AACA,qCAAc,yBADd;",
-  "names": []
-}

package/dist/cjs/exported-related/theming.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/exported-related/theming.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const DSInputTextName = 'DSInputText';\n\nexport const DSInputTextSlots = {\n  INPUT_WRAPPER: 'root',\n  INPUT: 'input',\n  CLEAR_BUTTON: 'input-clear-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,eAAe;AAAA,EACf,OAAO;AAAA,EACP,cAAc;AAChB;",
-  "names": []
-}

package/dist/esm/exported-related/data-test-ids.js

@@ -1,9 +0,0 @@
-import * as React from "react";
-const DSInputTextDataTestIds = {
-  INPUT: "ds-input-text-input",
-  CLEAR_BUTTON: "ds-input-text-clear-button"
-};
-export {
-  DSInputTextDataTestIds
-};
-//# sourceMappingURL=data-test-ids.js.map

package/dist/esm/exported-related/data-test-ids.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/data-test-ids.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSInputTextDataTestIds = {\n  INPUT: 'ds-input-text-input',\n  CLEAR_BUTTON: 'ds-input-text-clear-button',\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,yBAAyB;AAAA,EACpC,OAAO;AAAA,EACP,cAAc;AAChB;",
-  "names": []
-}

package/dist/esm/exported-related/index.js

@@ -1,4 +0,0 @@
-import * as React from "react";
-export * from "./data-test-ids.js";
-export * from "./theming.js";
-//# sourceMappingURL=index.js.map

package/dist/esm/exported-related/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './data-test-ids.js';\nexport * from './theming.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;",
-  "names": []
-}

package/dist/esm/exported-related/theming.js

@@ -1,12 +0,0 @@
-import * as React from "react";
-const DSInputTextName = "DSInputText";
-const DSInputTextSlots = {
-  INPUT_WRAPPER: "root",
-  INPUT: "input",
-  CLEAR_BUTTON: "input-clear-button"
-};
-export {
-  DSInputTextName,
-  DSInputTextSlots
-};
-//# sourceMappingURL=theming.js.map

package/dist/esm/exported-related/theming.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSInputTextName = 'DSInputText';\n\nexport const DSInputTextSlots = {\n  INPUT_WRAPPER: 'root',\n  INPUT: 'input',\n  CLEAR_BUTTON: 'input-clear-button',\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,eAAe;AAAA,EACf,OAAO;AAAA,EACP,cAAc;AAChB;",
-  "names": []
-}

package/dist/types/exported-related/data-test-ids.d.ts

@@ -1,4 +0,0 @@
-export declare const DSInputTextDataTestIds: {
-    INPUT: string;
-    CLEAR_BUTTON: string;
-};

package/dist/types/exported-related/index.d.ts

@@ -1,2 +0,0 @@
-export * from './data-test-ids.js';
-export * from './theming.js';

package/dist/types/exported-related/theming.d.ts

@@ -1,6 +0,0 @@
-export declare const DSInputTextName = "DSInputText";
-export declare const DSInputTextSlots: {
-    INPUT_WRAPPER: string;
-    INPUT: string;
-    CLEAR_BUTTON: string;
-};