@ledgerhq/lumen-ui-react 0.1.55 → 0.1.57

package/ai-rules/RULES.md

@@ -14,6 +14,7 @@
 
 - Import components from `@ledgerhq/lumen-ui-react`
 - Import icons from `@ledgerhq/lumen-ui-react/symbols` (not from main package)
+- Import charts from `@ledgerhq/lumen-ui-react/visualization` (not from main package)
 - Import design tokens/presets from `@ledgerhq/lumen-design-core`
 
 ### Font Family (REQUIRED)
@@ -25,10 +26,10 @@ Lumen typography classes set `font-family: Inter` via design tokens. The consume
 - Check the installed Tailwind major version first — the two paths differ:
 - **Tailwind v4 (recommended):** the main stylesheet MUST import Lumen's
   stylesheet so Tailwind scans the compiled components:
-  `@import '@ledgerhq/lumen-ui-react/tailwind.css';` (add
-  `@import '@ledgerhq/lumen-ui-react-visualization/tailwind.css';` when using
-  charts). Do NOT also add `./node_modules/@ledgerhq/lumen-ui-react/dist/**` to
-  the `content` array — that path is internal and may change in any release.
+  `@import '@ledgerhq/lumen-ui-react/tailwind.css';` — that single import
+  covers charts too. Do NOT also add
+  `./node_modules/@ledgerhq/lumen-ui-react/dist/**` to the `content` array —
+  that path is internal and may change in any release.
 - Always use a preset from `@ledgerhq/lumen-design-core`: ledgerLivePreset, enterprisePreset or websitesPreset
 - Import presets: `import { ledgerLivePreset } from '@ledgerhq/lumen-design-core'`
 

package/dist/lib/Components/core/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Card/Card.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAEV,2BAA2B,EAC3B,gBAAgB,EAChB,mBAAmB,EACnB,qBAAqB,EACrB,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACT,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,uBAAuB,GAAI,wCAKrC;IACD,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAChC,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;CACjC,KAAG,gBA2BH,CAAC;AAiDF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,GAAI,qFAUlB,SAAS,4CAkCX,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,wCAKxB,eAAe,4CA8BjB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,wCAKzB,gBAAgB,4CAUlB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,wCAKzB,gBAAgB,4CAkBlB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,wCAK5B,mBAAmB,4CAmBrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,wCAK9B,qBAAqB,4CAmBvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAAI,wCAKpC,2BAA2B,4CAmB7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,wCAK1B,iBAAiB,4CAqBnB,CAAC;AAiBF;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,oDAMxB,eAAe,4CA4BjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,wCAK/B,sBAAsB,4CAQxB,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Card/Card.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAEV,2BAA2B,EAC3B,gBAAgB,EAChB,mBAAmB,EACnB,qBAAqB,EACrB,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACT,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,uBAAuB,GAAI,wCAKrC;IACD,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAChC,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;CACjC,KAAG,gBA2BH,CAAC;AA4CF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,GAAI,qFAUlB,SAAS,4CAwCX,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,wCAKxB,eAAe,4CA8BjB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,wCAKzB,gBAAgB,4CAUlB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,wCAKzB,gBAAgB,4CAkBlB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,wCAK5B,mBAAmB,4CAmBrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,wCAK9B,qBAAqB,4CAmBvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAAI,wCAKpC,2BAA2B,4CAmB7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,wCAK1B,iBAAiB,4CAqBnB,CAAC;AAiBF;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,oDAMxB,eAAe,4CA4BjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,wCAK/B,sBAAsB,4CAQxB,CAAC"}

package/dist/lib/Components/core/Card/Card.js

@@ -1,4 +1,4 @@
-import { jsx as n, jsxs as f, Fragment as p } from "react/jsx-runtime";
+import { jsx as n, jsxs as f, Fragment as b } from "react/jsx-runtime";
 import { createSafeContext as m, DisabledProvider as g, cn as o, getButtonA11yProps as C } from "../../../../libs/utils-shared/dist/index.js";
 import { cva as v } from "class-variance-authority";
 import { useMemo as h } from "react";
@@ -47,17 +47,13 @@ const k = ({
 ), [q, x] = m("CardContentAlign", {
   align: "left"
 }), E = v(
-  "flex w-full flex-col overflow-clip rounded-lg bg-surface text-base transition-colors",
+  "relative flex w-full flex-col overflow-clip rounded-lg bg-surface text-base transition-colors",
   {
     variants: {
       interactive: {
         true: "cursor-pointer hover:bg-surface-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus active:bg-surface-pressed",
         false: ""
       },
-      outlined: {
-        true: "border-2 border-active",
-        false: ""
-      },
       disabled: {
         true: "cursor-default",
         false: ""
@@ -72,7 +68,6 @@ const k = ({
     ],
     defaultVariants: {
       interactive: !1,
-      outlined: !1,
       disabled: !1
     }
   }
@@ -83,34 +78,43 @@ const k = ({
   expanded: e,
   outlined: s = !1,
   disabled: i = !1,
-  onClick: l,
-  children: d,
-  ...b
+  onClick: d,
+  children: l,
+  ...p
 }) => {
   const u = h(
     () => k({
       type: a,
       expanded: e,
-      onClick: l,
+      onClick: d,
       disabled: i
     }),
-    [a, e, l, i]
+    [a, e, d, i]
   );
-  return /* @__PURE__ */ n(R, { value: u, children: /* @__PURE__ */ n(g, { value: { disabled: i }, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(R, { value: u, children: /* @__PURE__ */ n(g, { value: { disabled: i }, children: /* @__PURE__ */ f(
     "div",
     {
       ref: r,
-      ...u.cardClickable && C({ onClick: l, disabled: i }),
+      ...u.cardClickable && C({ onClick: d, disabled: i }),
       className: o(
         E({
           interactive: u.cardClickable,
-          outlined: s,
           disabled: i
         }),
         t
       ),
-      ...b,
-      children: d
+      ...p,
+      children: [
+        l,
+        s && /* @__PURE__ */ n(
+          "span",
+          {
+            "data-testid": "card-outline",
+            className: "pointer-events-none absolute inset-0 rounded-[inherit] border-2 border-active",
+            "aria-hidden": "true"
+          }
+        )
+      ]
     }
   ) }) });
 }, T = ({
@@ -119,7 +123,7 @@ const k = ({
   className: a,
   ...e
 }) => {
-  const { disabled: s, headerClickable: i, footerExpanded: l, onHeaderClick: d } = c({
+  const { disabled: s, headerClickable: i, footerExpanded: d, onHeaderClick: l } = c({
     consumerName: "CardHeader",
     contextRequired: !1
   });
@@ -127,8 +131,8 @@ const k = ({
     "div",
     {
       ref: r,
-      "aria-expanded": d ? l : void 0,
-      ...C({ onClick: d, disabled: s }),
+      "aria-expanded": l ? d : void 0,
+      ...C({ onClick: l, disabled: s }),
       className: o(
         "flex items-center gap-12 p-12",
         i && "cursor-pointer -outline-offset-6 transition-colors hover:bg-surface-hover focus-visible:outline-2 focus-visible:outline-focus active:bg-surface-pressed",
@@ -137,9 +141,9 @@ const k = ({
       ...e,
       children: [
         t,
-        d && /* @__PURE__ */ f(p, { children: [
-          l && /* @__PURE__ */ n(N, { className: "text-muted", size: 20 }),
-          !l && /* @__PURE__ */ n(w, { className: "text-muted", size: 20 })
+        l && /* @__PURE__ */ f(b, { children: [
+          d && /* @__PURE__ */ n(N, { className: "text-muted", size: 20 }),
+          !d && /* @__PURE__ */ n(w, { className: "text-muted", size: 20 })
         ] })
       ]
     }
@@ -292,7 +296,7 @@ const k = ({
   appearance: e = "plain",
   ...s
 }) => {
-  const { disabled: i, footerExpanded: l } = c({
+  const { disabled: i, footerExpanded: d } = c({
     consumerName: "CardFooter",
     contextRequired: !1
   });
@@ -301,7 +305,7 @@ const k = ({
     {
       className: o(
         H({ appearance: e }),
-        l ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+        d ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
       ),
       children: /* @__PURE__ */ n("div", { className: "overflow-hidden", children: /* @__PURE__ */ n(
         "div",

package/dist/lib/Components/core/SearchInput/types.d.ts

@@ -1,10 +1,10 @@
 import { ComponentPropsWithRef } from 'react';
 import { BaseInputProps } from '../../internal/BaseInput/types';
-export type SearchInputProps = Omit<BaseInputProps, 'prefix' | 'label' | 'labelClassName'> & {
+export type SearchInputProps = Omit<BaseInputProps, 'prefix' | 'label' | 'labelClassName' | 'multiline' | 'minLines' | 'maxLines' | 'scrollbarWidth' | 'ref' | 'onChange'> & Pick<ComponentPropsWithRef<'input'>, 'ref' | 'onChange'> & {
     /**
      * The visual appearance of the search input
      * @default 'plain'
      */
     appearance?: 'plain' | 'transparent';
-} & ComponentPropsWithRef<'input'>;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/Components/core/SearchInput/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,EACd,QAAQ,GAAG,OAAO,GAAG,gBAAgB,CACtC,GAAG;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;CACtC,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,EACZ,QAAQ,GACR,OAAO,GACP,gBAAgB,GAChB,WAAW,GACX,UAAU,GACV,UAAU,GACV,gBAAgB,GAChB,KAAK,GACL,UAAU,CACb,GACC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG;IACzD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;CACtC,CAAC"}

package/dist/lib/Components/core/TextInput/types.d.ts

@@ -1,4 +1,3 @@
-import { ComponentPropsWithRef } from 'react';
 import { BaseInputProps } from '../../internal/BaseInput/types';
-export type TextInputProps = Omit<BaseInputProps, 'prefix' | 'labelClassName' | 'inputClassName'> & ComponentPropsWithRef<'input'>;
+export type TextInputProps = Omit<BaseInputProps, 'prefix' | 'labelClassName' | 'inputClassName'>;
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/Components/core/TextInput/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/TextInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,cAAc,EACd,QAAQ,GAAG,gBAAgB,GAAG,gBAAgB,CAC/C,GACC,qBAAqB,CAAC,OAAO,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/TextInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,cAAc,EACd,QAAQ,GAAG,gBAAgB,GAAG,gBAAgB,CAC/C,CAAC"}

package/dist/lib/Components/internal/BaseInput/BaseInput.d.ts

@@ -1,22 +1,8 @@
 import { BaseInputProps } from './types';
 /**
- * Base input component with floating label, error state styling, and clear button functionality.
- * Shows a clear button by default when input has content. Use hideClearButton to hide it.
- * This is an internal component used to build other input components.
- *
- * Features:
- * - Automatic clear button that works with both controlled and uncontrolled inputs
- * - Native-like clear behavior using HTMLInputElement.prototype.value setter
- * - Proper event dispatching that React can intercept for controlled components
- * - Floating label with smooth transitions
- * - Error state styling and accessibility
- *
- * Supports className customization for different elements:
- * - `className`: Applied to the container/root element
- * - `inputClassName`: Applied to the input element
- * - `labelClassName`: Applied to the floating label element
+ * Internal field chrome shared by `TextInput`, `SearchInput`, and `AddressInput`.
  *
  * @internal
  */
-export declare const BaseInput: ({ ref, className, containerClassName, inputClassName, labelClassName, label, id, disabled: disabledProp, helperText, maxCount, status, suffix, prefix, onClear, hideClearButton, readOnly, "aria-invalid": ariaInvalidProp, onChange: onChangeProp, placeholder: placeholderProp, ...props }: BaseInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BaseInput: ({ ref, className, containerClassName, inputClassName, labelClassName, label, id, disabled: disabledProp, helperText, maxCount, status, suffix, prefix, onClear, hideClearButton, readOnly, "aria-invalid": ariaInvalidProp, onChange: onChangeProp, placeholder: placeholderProp, multiline, minLines, maxLines, scrollbarWidth, type, ...props }: BaseInputProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=BaseInput.d.ts.map

package/dist/lib/Components/internal/BaseInput/BaseInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/internal/BaseInput/BaseInput.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAGV,cAAc,EACf,MAAM,SAAS,CAAC;AAuEjB;;;;;;;;;;;;;;;;;;GAkBG;AAEH,eAAO,MAAM,SAAS,GAAI,8RAqBvB,cAAc,4CAiLhB,CAAC"}
+{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/internal/BaseInput/BaseInput.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAsC9C;;;;GAIG;AAEH,eAAO,MAAM,SAAS,GAAI,mVA0BvB,cAAc,4CA4JhB,CAAC"}

package/dist/lib/Components/internal/BaseInput/BaseInput.js

@@ -1,15 +1,19 @@
-import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import { useDisabledContext as X, resolveBaseInputPlaceholder as Y, useMergedRef as Z, cn as s } from "../../../../libs/utils-shared/dist/index.js";
-import { cva as g } from "class-variance-authority";
-import { useRef as _, useId as ee, useState as te, useCallback as re } from "react";
-import { useCommonTranslation as se } from "../../../../i18n/useCommonTranslation.js";
-import { InteractiveIcon as ae } from "../../core/InteractiveIcon/InteractiveIcon.js";
-import { DeleteCircleFill as B } from "../../symbols/icons/DeleteCircleFill.js";
-import { InformationFill as oe } from "../../symbols/icons/InformationFill.js";
-import { CheckmarkCircleFill as ne } from "../../symbols/icons/CheckmarkCircleFill.js";
-const le = g(
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { useDisabledContext as Z, resolveBaseInputPlaceholder as _, cn as I } from "../../../../libs/utils-shared/dist/index.js";
+import { cva as O } from "class-variance-authority";
+import { useId as ee } from "react";
+import { BaseInputCounter as te } from "./BaseInputCounter.js";
+import { BaseInputHelperText as ae } from "./BaseInputHelperText.js";
+import { BaseInputLabel as re } from "./BaseInputLabel.js";
+import { BaseInputMultiline as ne } from "./BaseInputMultiline.js";
+import { BaseInputSingleLine as se } from "./BaseInputSingleLine.js";
+import { useBaseInputValue as ie } from "./useBaseInputValue/useBaseInputValue.js";
+import { useCommonTranslation as oe } from "../../../../i18n/useCommonTranslation.js";
+import { InteractiveIcon as le } from "../../core/InteractiveIcon/InteractiveIcon.js";
+import { DeleteCircleFill as ce } from "../../symbols/icons/DeleteCircleFill.js";
+const ue = O(
   [
-    "group relative flex h-48 w-full cursor-text items-center gap-8 rounded-sm bg-muted px-16 transition-colors",
+    "group relative flex w-full cursor-text gap-8 rounded-sm bg-muted px-16 transition-colors",
     "focus-within:ring-2 focus-within:ring-active hover:bg-muted-hover",
     "has-disabled:cursor-not-allowed has-disabled:bg-disabled has-disabled:text-disabled"
   ],
@@ -19,202 +23,171 @@ const le = g(
         default: "",
         error: "ring-1 ring-error focus-within:ring-2 focus-within:ring-error",
         success: "ring-1 ring-success focus-within:ring-2 focus-within:ring-success"
+      },
+      multiline: {
+        true: "min-h-48 items-start",
+        false: "h-48 items-center"
+      },
+      hasLabel: {
+        true: "",
+        false: ""
       }
     },
+    compoundVariants: [
+      { multiline: !0, hasLabel: !0, class: "py-6" },
+      { multiline: !0, hasLabel: !1, class: "pt-12 pb-10" }
+    ],
     defaultVariants: {
-      status: "default"
+      status: "default",
+      multiline: !1,
+      hasLabel: !1
     }
   }
-), ie = s(
-  "peer w-full flex-1 bg-muted body-1 text-base caret-active outline-hidden transition-colors",
-  "group-hover:bg-muted-hover group-disabled:bg-disabled",
-  "group-has-disabled:cursor-not-allowed group-has-disabled:bg-disabled group-has-disabled:text-disabled",
-  "placeholder:text-muted group-has-disabled:placeholder:text-disabled",
-  "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
-  "truncate"
-), ce = s(
-  "pointer-events-none absolute top-6 left-16 origin-left body-4 text-muted transition-all duration-300",
-  "peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-placeholder-shown:body-2",
-  "group-has-disabled:text-disabled",
-  "peer-focus:top-6 peer-focus:translate-y-0 peer-focus:body-4",
-  "w-[calc(100%-var(--size-56))] truncate"
-), de = g(ce, {
-  variants: {
-    status: {
-      default: "",
-      error: "text-error",
-      success: ""
-    },
-    floated: {
-      true: "peer-placeholder-shown:top-6 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:body-4",
-      false: ""
-    }
-  },
-  defaultVariants: {
-    status: "default",
-    floated: !1
-  }
-}), ue = g("flex items-center gap-2 body-3", {
-  variants: {
-    status: {
-      default: "text-muted",
-      error: "text-error",
-      success: "text-success"
-    }
-  },
-  defaultVariants: {
-    status: "default"
-  }
-}), Ce = ({
-  ref: a,
-  className: o,
-  containerClassName: t,
-  inputClassName: F,
+), Ve = ({
+  ref: w,
+  className: B,
+  containerClassName: C,
+  inputClassName: L,
   labelClassName: P,
-  label: i,
-  id: j,
-  disabled: z,
-  helperText: b,
-  maxCount: c,
-  status: d,
-  suffix: R,
-  prefix: D,
-  onClear: $,
-  hideClearButton: E = !1,
-  readOnly: v = !1,
-  "aria-invalid": H,
-  onChange: w,
-  placeholder: L,
-  ...u
+  label: t,
+  id: V,
+  disabled: x,
+  helperText: l,
+  maxCount: r,
+  status: n,
+  suffix: y,
+  prefix: N,
+  onClear: j,
+  hideClearButton: F = !1,
+  readOnly: m = !1,
+  "aria-invalid": D,
+  onChange: R,
+  placeholder: S,
+  multiline: s = !1,
+  minLines: A,
+  maxLines: H,
+  scrollbarWidth: W,
+  type: $,
+  ...i
 }) => {
-  const x = X({
+  const h = Z({
     consumerName: "BaseInput",
-    mergeWith: { disabled: z }
-  }), { t: A } = se(), r = _(null), M = ee(), m = j || `input-${M}`, T = H ?? (d === "error" ? !0 : void 0), p = u.value !== void 0, [W, y] = te(
-    u.defaultValue?.toString() ?? ""
-  ), q = re(
-    (n) => {
-      p || y(n.target.value), w?.(n);
-    },
-    [p, w]
-  ), I = p ? u.value?.toString() ?? "" : W, O = I.length > 0, { inputPlaceholder: U, labelStaysFloatedWithPlaceholder: G } = Y({
-    label: i,
-    placeholder: L
-  }), C = O && !x && !v && !E, J = I.length, N = !!(c && c > 0), V = `${m}-helper`, h = !!b, K = () => {
-    if (!r.current) return;
-    Object.getOwnPropertyDescriptor(
-      window.HTMLInputElement.prototype,
-      "value"
-    )?.set?.call(r.current, ""), p || y("");
-    const S = new Event("input", { bubbles: !0 });
-    r.current.dispatchEvent(S), r.current.focus(), $?.();
-  }, Q = Z(a, r);
-  return /* @__PURE__ */ f("div", { className: o, children: [
-    /* @__PURE__ */ f(
+    mergeWith: { disabled: x }
+  }), { t: k } = oe(), {
+    inputRef: q,
+    composedRef: f,
+    currentValue: z,
+    hasContent: M,
+    handleChange: T,
+    handleClear: E
+  } = ie({
+    value: i.value,
+    defaultValue: i.defaultValue,
+    onChange: R,
+    onClear: j,
+    ref: w
+  }), G = ee(), c = V || `input-${G}`, J = D ?? (n === "error" ? !0 : void 0), { inputPlaceholder: K, labelStaysFloatedWithPlaceholder: Q } = _({
+    label: t,
+    placeholder: S
+  }), U = M && !h && !m && !F, X = z.length, p = !!(r && r > 0), g = `${c}-helper`, o = !!l, b = {
+    id: c,
+    disabled: h,
+    readOnly: m,
+    placeholder: K,
+    "aria-invalid": J,
+    "aria-describedby": o ? g : void 0,
+    hasLabel: !!t,
+    className: L,
+    onChange: T
+  }, u = U ? /* @__PURE__ */ e(
+    le,
+    {
+      iconType: "filled",
+      icon: ce,
+      size: 20,
+      onClick: E,
+      "aria-label": k("components.baseInput.clearInputAriaLabel")
+    }
+  ) : y;
+  return /* @__PURE__ */ d("div", { className: B, children: [
+    /* @__PURE__ */ d(
       "div",
       {
-        className: s(le({ status: d }), t),
-        onPointerDown: (n) => {
-          if (n.target.closest("input, button, a")) return;
-          const l = r.current;
-          if (!l) return;
-          const k = l.value.length > 0 ? l.value.length : 0;
+        className: I(
+          ue({ status: n, multiline: s, hasLabel: !!t }),
+          C
+        ),
+        onPointerDown: (Y) => {
+          if (Y.target.closest("input, textarea, button, a")) return;
+          const a = q.current;
+          if (!a) return;
+          const v = a.value.length > 0 ? a.value.length : 0;
           window.requestAnimationFrame(() => {
             try {
-              l.setSelectionRange(k, k);
+              a.setSelectionRange(v, v);
             } catch {
             }
-            l.focus();
+            a.focus();
           });
         },
         children: [
-          D,
-          /* @__PURE__ */ e(
-            "input",
+          N,
+          s ? /* @__PURE__ */ e(
+            ne,
             {
-              ref: Q,
-              id: m,
-              disabled: x,
-              readOnly: v,
-              placeholder: U,
-              "aria-invalid": T,
-              "aria-describedby": h ? V : void 0,
-              className: s(
-                ie,
-                i && "pt-12 body-2",
-                F
-              ),
-              onChange: q,
-              ...u
+              ref: f,
+              minLines: A,
+              maxLines: H,
+              scrollbarWidth: W,
+              ...b,
+              ...i
             }
-          ),
-          i && /* @__PURE__ */ e(
-            "label",
+          ) : /* @__PURE__ */ e(
+            se,
             {
-              htmlFor: m,
-              className: s(
-                de({
-                  status: d,
-                  floated: G
-                }),
-                P
-              ),
-              children: i
+              ref: f,
+              type: $,
+              ...b,
+              ...i
             }
           ),
-          C && /* @__PURE__ */ e(
-            ae,
+          t && /* @__PURE__ */ e(
+            re,
             {
-              iconType: "filled",
-              icon: B,
-              size: 20,
-              onClick: K,
-              "aria-label": A("components.baseInput.clearInputAriaLabel")
+              htmlFor: c,
+              status: n,
+              floated: Q,
+              multiline: s,
+              className: P,
+              children: t
             }
           ),
-          !C && R
+          s && u ? /* @__PURE__ */ e("div", { className: "pt-2", children: u }) : u
         ]
       }
     ),
-    (h || N) && /* @__PURE__ */ f(
+    (o || p) && /* @__PURE__ */ d(
       "div",
       {
-        className: s(
+        className: I(
           "mt-8 flex items-start gap-8",
-          h ? "justify-between" : "justify-end"
+          o ? "justify-between" : "justify-end"
         ),
         children: [
-          h && b && /* @__PURE__ */ e(
-            pe,
+          o && l && /* @__PURE__ */ e(
+            ae,
             {
-              id: V,
-              helperText: b,
-              status: d
+              id: g,
+              helperText: l,
+              status: n
             }
           ),
-          N && c != null && /* @__PURE__ */ e(he, { count: J, maxCount: c })
+          p && r != null && /* @__PURE__ */ e(te, { count: X, maxCount: r })
         ]
       }
     )
   ] });
-}, pe = ({
-  id: a,
-  helperText: o,
-  status: t
-}) => /* @__PURE__ */ f(
-  "div",
-  {
-    id: a,
-    className: ue({ status: t }),
-    role: t === "error" ? "alert" : void 0,
-    children: [
-      !t && /* @__PURE__ */ e(oe, { size: 16, className: "text-muted" }),
-      t === "error" && /* @__PURE__ */ e(B, { size: 16, className: "text-error" }),
-      t === "success" && /* @__PURE__ */ e(ne, { size: 16, className: "text-success" }),
-      /* @__PURE__ */ e("span", { className: "body-3", children: o })
-    ]
-  }
-), he = ({ count: a, maxCount: o }) => /* @__PURE__ */ e("span", { "aria-live": "polite", className: "shrink-0 body-3 text-muted", children: `${a}/${o}` });
+};
 export {
-  Ce as BaseInput
+  Ve as BaseInput
 };

package/dist/lib/Components/internal/BaseInput/BaseInputCounter.d.ts

@@ -0,0 +1,8 @@
+import { BaseInputCounterProps } from './types';
+/**
+ * Character counter rendered below the control inside `BaseInput`.
+ *
+ * @internal
+ */
+export declare const BaseInputCounter: ({ count, maxCount, }: BaseInputCounterProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BaseInputCounter.d.ts.map

package/dist/lib/Components/internal/BaseInput/BaseInputCounter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseInputCounter.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/internal/BaseInput/BaseInputCounter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,sBAG9B,qBAAqB,4CAMvB,CAAC"}

package/dist/lib/Components/internal/BaseInput/BaseInputCounter.js

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+const o = ({
+  count: e,
+  maxCount: t
+}) => /* @__PURE__ */ r("span", { "aria-live": "polite", className: "shrink-0 body-3 text-muted", children: `${e}/${t}` });
+export {
+  o as BaseInputCounter
+};

package/dist/lib/Components/internal/BaseInput/BaseInputHelperText.d.ts

@@ -0,0 +1,8 @@
+import { BaseInputHelperTextProps } from './types';
+/**
+ * Hint, error or success copy rendered below the control inside `BaseInput`.
+ *
+ * @internal
+ */
+export declare const BaseInputHelperText: ({ id, helperText, status, }: BaseInputHelperTextProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BaseInputHelperText.d.ts.map

package/dist/lib/Components/internal/BaseInput/BaseInputHelperText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseInputHelperText.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/internal/BaseInput/BaseInputHelperText.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAexD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,GAAI,6BAIjC,wBAAwB,4CAiB1B,CAAC"}