@ledgerhq/lumen-ui-react 0.0.53

package/dist/lib/Components/AmountInput/AmountInput.d.ts

@@ -0,0 +1,97 @@
+import { default as React } from 'react';
+export type AmountInputProps = {
+    /**
+     * The controlled value of the input
+     * @required
+     */
+    value: string | number;
+    /**
+     * Change handler
+     * @required
+     */
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The currency text (e.g. USD, EUR)
+     */
+    currencyText?: string;
+    /**
+     * Position of the currency text.
+     * @default 'left'
+     */
+    currencyPosition?: 'left' | 'right';
+    /**
+     * Maximum length for integer part (before decimal)
+     * @default 9
+     */
+    maxIntegerLength?: number;
+    /**
+     * Maximum length for decimal part (after decimal)
+     * @default 9
+     */
+    maxDecimalLength?: number;
+    /**
+     * Allow decimal values
+     * @default true
+     */
+    allowDecimals?: boolean;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Whether to use thousands separator (e.g. 1 000 for 1000)
+     * @default true
+     */
+    thousandsSeparator?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'value' | 'onChange'>;
+/**
+ * AmountInput component for handling numeric input with currency display.
+ * This is a controlled component - both `value` and `onChange` props are required.
+ * The currency text can be positioned either on the left or right side of the input.
+ */
+export declare const AmountInput: React.ForwardRefExoticComponent<{
+    /**
+     * The controlled value of the input
+     * @required
+     */
+    value: string | number;
+    /**
+     * Change handler
+     * @required
+     */
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The currency text (e.g. USD, EUR)
+     */
+    currencyText?: string;
+    /**
+     * Position of the currency text.
+     * @default 'left'
+     */
+    currencyPosition?: "left" | "right";
+    /**
+     * Maximum length for integer part (before decimal)
+     * @default 9
+     */
+    maxIntegerLength?: number;
+    /**
+     * Maximum length for decimal part (after decimal)
+     * @default 9
+     */
+    maxDecimalLength?: number;
+    /**
+     * Allow decimal values
+     * @default true
+     */
+    allowDecimals?: boolean;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Whether to use thousands separator (e.g. 1 000 for 1000)
+     * @default true
+     */
+    thousandsSeparator?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value" | "prefix"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=AmountInput.d.ts.map

package/dist/lib/Components/AmountInput/AmountInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/AmountInput/AmountInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAMN,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,GAAG,IAAI,CACN,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CACzC,CAAC;AAgCF;;;;GAIG;AACH,eAAO,MAAM,WAAW;IAnFtB;;;OAGG;WACI,MAAM,GAAG,MAAM;IACtB;;;OAGG;cACO,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI;IAC9D;;OAEG;mBACY,MAAM;IACrB;;;OAGG;uBACgB,MAAM,GAAG,OAAO;IACnC;;;OAGG;uBACgB,MAAM;IACzB;;;OAGG;uBACgB,MAAM;IACzB;;;OAGG;oBACa,OAAO;IACvB;;OAEG;gBACS,MAAM;IAClB;;;OAGG;yBACkB,OAAO;wIA2K7B,CAAC"}

package/dist/lib/Components/AmountInput/AmountInput.js

@@ -0,0 +1,134 @@
+import { jsxs as I, jsx as l } from "react/jsx-runtime";
+import { getFontSize as V, cn as a, textFormatter as F } from "../../../libs/utils-shared/dist/index.js";
+import { cva as z } from "class-variance-authority";
+import M, { useRef as p, useState as h, useMemo as _, useLayoutEffect as q, useEffect as D } from "react";
+const L = z(
+  [
+    "bg-transparent caret-active outline-none transition-colors heading-0",
+    "text-base placeholder:text-muted-subtle",
+    "disabled:cursor-not-allowed disabled:bg-base-transparent disabled:text-disabled",
+    '[&[aria-invalid="true"]]:text-error',
+    "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+    "h-56"
+  ],
+  {
+    variants: {
+      isChanging: {
+        true: "animate-translate-from-right",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      isChanging: !1
+    }
+  }
+), b = a(
+  "cursor-text heading-0",
+  "text-base",
+  "group-has-[input:placeholder-shown]:text-muted-subtle",
+  "group-has-[input:disabled]:cursor-not-allowed group-has-[input:disabled]:text-disabled",
+  'group-has-[input[aria-invalid="true"]]:text-error'
+), W = M.forwardRef(
+  ({
+    className: x,
+    currencyText: r,
+    currencyPosition: d = "left",
+    disabled: w,
+    maxIntegerLength: S = 9,
+    maxDecimalLength: v = 9,
+    allowDecimals: y = !0,
+    thousandsSeparator: R = !0,
+    value: u,
+    onChange: C,
+    ...N
+  }, A) => {
+    const c = p(null), s = p(null), [n, f] = h(u.toString()), [E, m] = h(!1), g = p(n);
+    function j(...t) {
+      return (e) => {
+        t.forEach((o) => {
+          o && (typeof o == "function" ? o(e) : o.current = e);
+        });
+      };
+    }
+    const i = _(
+      () => V(n) + "px",
+      [n]
+    );
+    q(() => {
+      if (c.current && s.current) {
+        const t = c.current.offsetWidth, e = n === "" ? 33 : 8;
+        s.current.style.width = `${t + e}px`;
+      }
+    }, [n]), D(() => {
+      f(u.toString());
+    }, [u]);
+    const k = (t) => {
+      const e = F(t.target.value, {
+        allowDecimals: y,
+        thousandsSeparator: R,
+        maxIntegerLength: S,
+        maxDecimalLength: v
+      });
+      f(e), C({ ...t, target: { ...t.target, value: e } }), e !== g.current && m(!0), g.current = e;
+    };
+    return /* @__PURE__ */ I(
+      "div",
+      {
+        className: "group relative flex items-center justify-center transition-transform",
+        onPointerDown: () => {
+          const t = s.current;
+          t && window.requestAnimationFrame(() => {
+            t.focus();
+          });
+        },
+        children: [
+          r && d === "left" && /* @__PURE__ */ l(
+            "span",
+            {
+              className: a(b, "shrink-0"),
+              style: { fontSize: i, letterSpacing: "normal" },
+              children: r
+            }
+          ),
+          /* @__PURE__ */ l(
+            "span",
+            {
+              ref: c,
+              className: a("invisible absolute heading-0"),
+              "aria-hidden": "true",
+              style: { fontSize: i, letterSpacing: "normal" },
+              children: n
+            }
+          ),
+          /* @__PURE__ */ l(
+            "input",
+            {
+              ref: j(A, s),
+              type: "text",
+              inputMode: "decimal",
+              disabled: w,
+              value: n,
+              onChange: k,
+              onAnimationEnd: () => m(!1),
+              className: a(L({ isChanging: E }), x),
+              ...N,
+              style: { fontSize: i, letterSpacing: "normal" }
+            }
+          ),
+          r && d === "right" && /* @__PURE__ */ l(
+            "span",
+            {
+              className: a(b, "shrink-0"),
+              style: { fontSize: i, letterSpacing: "normal" },
+              children: r
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+W.displayName = "AmountInput";
+export {
+  W as AmountInput
+};

package/dist/lib/Components/AmountInput/index.d.ts

@@ -0,0 +1,2 @@
+export { AmountInput } from './AmountInput';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/Components/AmountInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/AmountInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/lib/Components/Banner/Banner.d.ts

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+/**
+ * A banner component for displaying informational, success, warning, or error messages with optional description, action buttons, and close button.
+ *
+ * The appearance determines the color scheme and icon used.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-banner-overview--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-banner-implementation--docs#dos-and-donts Guidelines}
+ *
+ * @warning The `className` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the banner's core appearance (colors, padding, etc). Use the `appearance` prop instead.
+ *
+ * @example
+ * import { Banner } from '@ledgerhq/lumen-ui-react';
+ *
+ * // Basic info banner
+ * <Banner title="Information" appearance="info" />
+ *
+ * // Banner with description and actions
+ * <Banner
+ *   title="Success"
+ *   appearance="success"
+ *   description="Your action was successful."
+ *   primaryAction={<Button appearance="transparent" size="sm" onClick={() => {}}>Primary</Button>}
+ *   secondaryAction={<Button appearance="no-background" size="sm" onClick={() => {}}>Secondary</Button>}
+ * />
+ *
+ * // Error banner with close
+ * <Banner
+ *   title="Error"
+ *   appearance="error"
+ *   onClose={() => console.log('Close')}
+ *   closeAriaLabel="Close banner"
+ * />
+ */
+export declare const Banner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    appearance?: "info" | "success" | "warning" | "error";
+    title?: string;
+    description?: string;
+    primaryAction?: React.ReactNode;
+    secondaryAction?: React.ReactNode;
+    onClose?: () => void;
+    closeAriaLabel?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Banner.d.ts.map

package/dist/lib/Components/Banner/Banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Banner/Banner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,MAAM;;;;;;;;wCAuDlB,CAAC"}

package/dist/lib/Components/Banner/Banner.js

@@ -0,0 +1,76 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { cn as c } from "../../../libs/utils-shared/dist/index.js";
+import { cva as b } from "class-variance-authority";
+import g from "react";
+import { useCommonTranslation as u } from "../../../i18n/useCommonTranslation.js";
+import { IconButton as N } from "../IconButton/IconButton.js";
+import { Close as h } from "../../Symbols/Icons/Close.js";
+import { DeleteCircleFill as v } from "../../Symbols/Icons/DeleteCircleFill.js";
+import { WarningFill as w } from "../../Symbols/Icons/WarningFill.js";
+import { CheckmarkCircleFill as C } from "../../Symbols/Icons/CheckmarkCircleFill.js";
+import { InformationFill as k } from "../../Symbols/Icons/InformationFill.js";
+const F = {
+  info: /* @__PURE__ */ r(k, { className: "text-base" }),
+  success: /* @__PURE__ */ r(C, { className: "text-success" }),
+  warning: /* @__PURE__ */ r(w, { className: "text-warning" }),
+  error: /* @__PURE__ */ r(v, { className: "text-error" })
+}, j = {
+  root: b("flex w-full items-start gap-8 rounded-md p-12 text-base", {
+    variants: {
+      appearance: {
+        info: "bg-surface",
+        success: "bg-success",
+        warning: "bg-warning",
+        error: "bg-error"
+      }
+    }
+  })
+}, W = g.forwardRef(
+  ({
+    appearance: s = "info",
+    title: a,
+    description: o,
+    primaryAction: l,
+    secondaryAction: n,
+    className: m,
+    onClose: i,
+    closeAriaLabel: t,
+    ...f
+  }, p) => {
+    const { t: d } = u(), x = F[s];
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        ref: p,
+        className: c(m, j.root({ appearance: s })),
+        ...f,
+        children: [
+          /* @__PURE__ */ r("div", { className: "flex shrink-0 items-start py-4", children: x }),
+          /* @__PURE__ */ e("div", { className: "mr-8 flex flex-1 flex-col gap-8 py-4", children: [
+            /* @__PURE__ */ e("div", { className: "flex flex-col gap-4", children: [
+              a && /* @__PURE__ */ r("h3", { className: "line-clamp-2 body-1-semi-bold", children: a }),
+              o && /* @__PURE__ */ r("div", { className: c("line-clamp-5 body-2", !a && "mt-2"), children: o })
+            ] }),
+            (l || n) && /* @__PURE__ */ e("div", { className: "flex gap-4", children: [
+              l,
+              n
+            ] })
+          ] }),
+          i && /* @__PURE__ */ r(
+            N,
+            {
+              appearance: "transparent",
+              size: "xs",
+              icon: h,
+              onClick: () => i(),
+              "aria-label": t || d("components.banner.closeAriaLabel")
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  W as Banner
+};

package/dist/lib/Components/Banner/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Banner';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/Components/Banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Banner/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}

package/dist/lib/Components/Banner/types.d.ts

@@ -0,0 +1,33 @@
+export type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The type of banner which affects color and icon.
+     * @default info
+     */
+    appearance?: 'info' | 'success' | 'warning' | 'error';
+    /**
+     * The main title of the banner.
+     */
+    title?: string;
+    /**
+     * Optional descriptive text.
+     */
+    description?: string;
+    /**
+     * Optional primary action.
+     *
+     */
+    primaryAction?: React.ReactNode;
+    /**
+     * Optional secondary action.
+     */
+    secondaryAction?: React.ReactNode;
+    /**
+     * Optional close action.
+     */
+    onClose?: () => void;
+    /**
+     * Optional aria label for the close button.
+     */
+    closeAriaLabel?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/Components/Banner/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Banner/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/D;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC"}

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

@@ -0,0 +1,113 @@
+import { default as React } from 'react';
+export type BaseInputProps = {
+    /**
+     * The label text that floats above the input when focused or filled.
+     */
+    label?: string;
+    /**
+     * An optional error message displayed below the input
+     */
+    errorMessage?: string;
+    /**
+     * Indicates whether the input value is invalid
+     * @default false
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * Custom content to render after the input.
+     * @example suffix={<Icon />}
+     */
+    suffix?: React.ReactNode;
+    /**
+     * Custom content to render before the input (left side in LTR).
+     * @example prefix={<Icon />}
+     */
+    prefix?: React.ReactNode;
+    /**
+     * Optional function to extend the default clear behavior with custom logic
+     */
+    onClear?: () => void;
+    /**
+     * Hide the clear button (shown by default when input has content)
+     * @default false
+     */
+    hideClearButton?: boolean;
+    /**
+     * Additional class names to apply to the container element
+     */
+    className?: string;
+    /**
+     * Additional class names to apply to the input element
+     */
+    inputClassName?: string;
+    /**
+     * Additional class names to apply to the label element
+     */
+    labelClassName?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'>;
+/**
+ * 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
+ */
+export declare const BaseInput: React.ForwardRefExoticComponent<{
+    /**
+     * The label text that floats above the input when focused or filled.
+     */
+    label?: string;
+    /**
+     * An optional error message displayed below the input
+     */
+    errorMessage?: string;
+    /**
+     * Indicates whether the input value is invalid
+     * @default false
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * Custom content to render after the input.
+     * @example suffix={<Icon />}
+     */
+    suffix?: React.ReactNode;
+    /**
+     * Custom content to render before the input (left side in LTR).
+     * @example prefix={<Icon />}
+     */
+    prefix?: React.ReactNode;
+    /**
+     * Optional function to extend the default clear behavior with custom logic
+     */
+    onClear?: () => void;
+    /**
+     * Hide the clear button (shown by default when input has content)
+     * @default false
+     */
+    hideClearButton?: boolean;
+    /**
+     * Additional class names to apply to the container element
+     */
+    className?: string;
+    /**
+     * Additional class names to apply to the input element
+     */
+    inputClassName?: string;
+    /**
+     * Additional class names to apply to the label element
+     */
+    labelClassName?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=BaseInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/BaseInput/BaseInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AA8B1B,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC;AAEzE;;;;;;;;;;;;;;;;;;GAkBG;AAEH,eAAO,MAAM,SAAS;IAlEpB;;OAEG;YACK,MAAM;IACd;;OAEG;mBACY,MAAM;IACrB;;;OAGG;qBACc,OAAO;IACxB;;;OAGG;aACM,KAAK,CAAC,SAAS;IACxB;;;OAGG;aACM,KAAK,CAAC,SAAS;IACxB;;OAEG;cACO,MAAM,IAAI;IACpB;;;OAGG;sBACe,OAAO;IACzB;;OAEG;gBACS,MAAM;IAClB;;OAEG;qBACc,MAAM;IACvB;;OAEG;qBACc,MAAM;iHAgNxB,CAAC"}

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

@@ -0,0 +1,150 @@
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import { cn as l } from "../../../libs/utils-shared/dist/index.js";
+import s from "react";
+import { useCommonTranslation as O } from "../../../i18n/useCommonTranslation.js";
+import { InteractiveIcon as _ } from "../InteractiveIcon/InteractiveIcon.js";
+import { DeleteCircleFill as I } from "../../Symbols/Icons/DeleteCircleFill.js";
+const $ = l(
+  "group relative flex h-48 w-full cursor-text items-center 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",
+  "has-[:invalid]:border-error has-[:invalid]:ring-1 has-[:invalid]:ring-error",
+  'has-[input[aria-invalid="true"]]:border-error has-[input[aria-invalid="true"]]:ring-1 has-[input[aria-invalid="true"]]:ring-error'
+), q = l(
+  "peer w-full flex-1 bg-muted text-base caret-active outline-none transition-colors body-1",
+  "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"
+), H = l(
+  "pointer-events-none absolute left-16 top-6 origin-left text-muted transition-all duration-300 body-4",
+  "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"
+), U = s.forwardRef(
+  ({
+    className: N,
+    inputClassName: R,
+    labelClassName: S,
+    label: u,
+    id: k,
+    disabled: f,
+    errorMessage: a,
+    suffix: j,
+    prefix: E,
+    onClear: p,
+    hideClearButton: z = !1,
+    "aria-invalid": m,
+    onChange: c,
+    ...o
+  }, B) => {
+    var x;
+    const { t: C } = O(), n = s.useRef(null), D = s.useId(), b = k || `input-${D}`, F = m || (a ? !0 : void 0), d = o.value !== void 0, [L, v] = s.useState(
+      ((x = o.defaultValue) == null ? void 0 : x.toString()) || ""
+    ), T = s.useCallback(
+      (t) => {
+        d || v(t.target.value), c == null || c(t);
+      },
+      [d, c]
+    ), g = (d ? !!o.value && o.value.toString().length > 0 : L.length > 0) && !f && !z, w = `${b}-error`, V = () => {
+      var e;
+      if (!n.current) return;
+      const t = (e = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value"
+      )) == null ? void 0 : e.set;
+      t == null || t.call(n.current, ""), d || v("");
+      const i = new Event("input", { bubbles: !0 });
+      n.current.dispatchEvent(i), n.current.focus(), p == null || p();
+    };
+    function A(...t) {
+      return (i) => {
+        t.forEach((e) => {
+          e && (typeof e == "function" ? e(i) : e.current = i);
+        });
+      };
+    }
+    return /* @__PURE__ */ h("div", { className: N, children: [
+      /* @__PURE__ */ h(
+        "div",
+        {
+          className: $,
+          onPointerDown: (t) => {
+            if (t.target.closest("input, button, a")) return;
+            const e = n.current;
+            if (!e) return;
+            const y = e.value.length > 0 ? e.value.length : 0;
+            window.requestAnimationFrame(() => {
+              try {
+                e.setSelectionRange(y, y);
+              } catch {
+              }
+              e.focus();
+            });
+          },
+          children: [
+            E,
+            /* @__PURE__ */ r(
+              "input",
+              {
+                ref: A(B, n),
+                id: b,
+                disabled: f,
+                placeholder: " ",
+                "aria-invalid": F,
+                "aria-describedby": a ? w : void 0,
+                className: l(
+                  q,
+                  u && "pt-12 body-2",
+                  R
+                ),
+                onChange: T,
+                ...o
+              }
+            ),
+            u && /* @__PURE__ */ r(
+              "label",
+              {
+                htmlFor: b,
+                className: l(
+                  H,
+                  a && "text-error",
+                  S
+                ),
+                children: u
+              }
+            ),
+            g && /* @__PURE__ */ r(
+              _,
+              {
+                iconType: "filled",
+                onClick: V,
+                "aria-label": C("components.baseInput.clearInputAriaLabel"),
+                children: /* @__PURE__ */ r(I, { size: 20 })
+              }
+            ),
+            !g && j
+          ]
+        }
+      ),
+      a && /* @__PURE__ */ h(
+        "div",
+        {
+          id: w,
+          className: "mt-8 flex items-center gap-2 text-error body-3",
+          role: "alert",
+          children: [
+            /* @__PURE__ */ r(I, { size: 16, className: "shrink-0 text-error" }),
+            /* @__PURE__ */ r("span", { children: a })
+          ]
+        }
+      )
+    ] });
+  }
+);
+U.displayName = "BaseInput";
+export {
+  U as BaseInput
+};