@ledgerhq/lumen-ui-react 0.0.63 → 0.0.65

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

@@ -1,68 +1,69 @@
-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 { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { cn as a } from "../../../libs/utils-shared/dist/index.js";
+import l from "react";
+import { useCommonTranslation as _ } from "../../../i18n/useCommonTranslation.js";
+import { InteractiveIcon as $ } from "../InteractiveIcon/InteractiveIcon.js";
 import { DeleteCircleFill as I } from "../../Symbols/Icons/DeleteCircleFill.js";
-const $ = l(
+const q = a(
   "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-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",
+), H = a(
+  "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",
+  "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",
+), U = a(
+  "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",
+  "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(
+), G = l.forwardRef(
   ({
     className: N,
-    inputClassName: R,
-    labelClassName: S,
+    containerClassName: R,
+    inputClassName: S,
+    labelClassName: k,
     label: u,
-    id: k,
+    id: z,
     disabled: f,
-    errorMessage: a,
-    suffix: z,
-    prefix: E,
+    errorMessage: i,
+    suffix: E,
+    prefix: j,
     onClear: p,
-    hideClearButton: j = !1,
+    hideClearButton: B = !1,
     "aria-invalid": m,
-    onChange: c,
+    onChange: d,
     ...o
-  }, B) => {
+  }, C) => {
     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(
+    const { t: D } = _(), r = l.useRef(null), F = l.useId(), b = z || `input-${F}`, L = m || (i ? !0 : void 0), c = o.value !== void 0, [T, v] = l.useState(
       ((x = o.defaultValue) == null ? void 0 : x.toString()) || ""
-    ), T = s.useCallback(
+    ), V = l.useCallback(
       (t) => {
-        d || v(t.target.value), c == null || c(t);
+        c || v(t.target.value), d == null || d(t);
       },
-      [d, c]
-    ), g = (d ? !!o.value && o.value.toString().length > 0 : L.length > 0) && !f && !j, w = `${b}-error`, V = () => {
+      [c, d]
+    ), g = (c ? !!o.value && o.value.toString().length > 0 : T.length > 0) && !f && !B, w = `${b}-error`, A = () => {
       var e;
-      if (!n.current) return;
+      if (!r.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();
+      t == null || t.call(r.current, ""), c || v("");
+      const s = new Event("input", { bubbles: !0 });
+      r.current.dispatchEvent(s), r.current.focus(), p == null || p();
     };
-    function A(...t) {
-      return (i) => {
+    function O(...t) {
+      return (s) => {
         t.forEach((e) => {
-          e && (typeof e == "function" ? e(i) : e.current = i);
+          e && (typeof e == "function" ? e(s) : e.current = s);
         });
       };
     }
@@ -70,10 +71,10 @@ const $ = l(
       /* @__PURE__ */ h(
         "div",
         {
-          className: $,
+          className: a(q, R),
           onPointerDown: (t) => {
             if (t.target.closest("input, button, a")) return;
-            const e = n.current;
+            const e = r.current;
             if (!e) return;
             const y = e.value.length > 0 ? e.value.length : 0;
             window.requestAnimationFrame(() => {
@@ -85,66 +86,66 @@ const $ = l(
             });
           },
           children: [
-            E,
-            /* @__PURE__ */ r(
+            j,
+            /* @__PURE__ */ n(
               "input",
               {
-                ref: A(B, n),
+                ref: O(C, r),
                 id: b,
                 disabled: f,
                 placeholder: " ",
-                "aria-invalid": F,
-                "aria-describedby": a ? w : void 0,
-                className: l(
-                  q,
+                "aria-invalid": L,
+                "aria-describedby": i ? w : void 0,
+                className: a(
+                  H,
                   u && "pt-12 body-2",
-                  R
+                  S
                 ),
-                onChange: T,
+                onChange: V,
                 ...o
               }
             ),
-            u && /* @__PURE__ */ r(
+            u && /* @__PURE__ */ n(
               "label",
               {
                 htmlFor: b,
-                className: l(
-                  H,
-                  a && "text-error",
-                  S
+                className: a(
+                  U,
+                  i && "text-error",
+                  k
                 ),
                 children: u
               }
             ),
-            g && /* @__PURE__ */ r(
-              _,
+            g && /* @__PURE__ */ n(
+              $,
               {
                 iconType: "filled",
-                onClick: V,
-                "aria-label": C("components.baseInput.clearInputAriaLabel"),
-                children: /* @__PURE__ */ r(I, { size: 20 })
+                onClick: A,
+                "aria-label": D("components.baseInput.clearInputAriaLabel"),
+                children: /* @__PURE__ */ n(I, { size: 20 })
               }
             ),
-            !g && z
+            !g && E
           ]
         }
       ),
-      a && /* @__PURE__ */ h(
+      i && /* @__PURE__ */ h(
         "div",
         {
           id: w,
-          className: "mt-8 flex items-center gap-2 text-error body-3",
+          className: "mt-8 flex items-center gap-2 body-3 text-error",
           role: "alert",
           children: [
-            /* @__PURE__ */ r(I, { size: 16, className: "shrink-0 text-error" }),
-            /* @__PURE__ */ r("span", { children: a })
+            /* @__PURE__ */ n(I, { size: 16, className: "shrink-0 text-error" }),
+            /* @__PURE__ */ n("span", { children: i })
           ]
         }
       )
     ] });
   }
 );
-U.displayName = "BaseInput";
+G.displayName = "BaseInput";
 export {
-  U as BaseInput
+  G as BaseInput
 };

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

@@ -32,9 +32,13 @@ export type BaseInputProps = {
      */
     hideClearButton?: boolean;
     /**
-     * Additional class names to apply to the container element
+     * Additional class names to apply to the outer wrapper element
      */
     className?: string;
+    /**
+     * Additional class names to apply to the inner container element
+     */
+    containerClassName?: string;
     /**
      * Additional class names to apply to the input element
      */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/BaseInput/types.ts"],"names":[],"mappings":"AAAA,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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/BaseInput/types.ts"],"names":[],"mappings":"AAAA,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,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;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"}

package/dist/lib/Components/Button/BaseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Button/BaseButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAqDzC,eAAO,MAAM,UAAU;;;;;;;;;YAxCf,CAAR;iBACU,CAAT;;;2FAkHA,CAAC"}
+{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Button/BaseButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAqDzC,eAAO,MAAM,UAAU;;;;;;;;;YAxCf,CAAF;iBACI,CAAH;;;2FAkHN,CAAC"}

package/dist/lib/Components/Button/BaseButton.js

@@ -5,7 +5,7 @@ import { cva as l } from "class-variance-authority";
 import y, { useCallback as B } from "react";
 import { Spinner as N } from "../Spinner/Spinner.js";
 const j = l(
-  'inline-flex size-fit cursor-pointer items-center justify-center rounded-full transition-colors duration-200 body-1-semi-bold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus [&[data-disabled="true"]]:bg-disabled [&[data-disabled="true"]]:text-disabled',
+  'inline-flex size-fit cursor-pointer items-center justify-center rounded-full body-1-semi-bold transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus data-[disabled="true"]:bg-disabled data-[disabled="true"]:text-disabled',
   {
     variants: {
       appearance: {

package/dist/lib/Components/CardButton/CardButton.js

@@ -9,7 +9,7 @@ const p = c(
     variants: {
       appearance: {
         base: "bg-muted text-base hover:bg-muted-hover active:bg-muted-pressed disabled:bg-disabled",
-        outline: "bg-base-transparent text-base outline-dashed outline-1 outline-muted-subtle hover:bg-base-transparent-hover hover:outline-muted-subtle-hover focus-visible:outline-none focus-visible:outline-offset-0 active:bg-base-transparent-pressed active:outline-muted-subtle-pressed disabled:bg-base-transparent disabled:outline-disabled"
+        outline: "bg-base-transparent text-base outline-dashed outline-1 outline-muted-subtle hover:bg-base-transparent-hover hover:outline-muted-subtle-hover focus-visible:outline-hidden focus-visible:outline-offset-0 active:bg-base-transparent-pressed active:outline-muted-subtle-pressed disabled:bg-base-transparent disabled:outline-disabled"
       }
     },
     defaultVariants: {

package/dist/lib/Components/Checkbox/Checkbox.js

@@ -1,11 +1,11 @@
 import { jsx as e } from "react/jsx-runtime";
-import { cn as d } from "../../../libs/utils-shared/dist/index.js";
+import { cn as a } from "../../../libs/utils-shared/dist/index.js";
 import * as t from "@radix-ui/react-checkbox";
 import i from "react";
 import { Check as o } from "../../Symbols/Icons/Check.js";
-const r = [
-  "h-20 w-20 shrink-0 rounded-xs transition-colors",
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2",
+const r = a(
+  "size-20 shrink-0 cursor-pointer rounded-xs transition-colors",
+  "focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:outline-hidden",
   "data-[state=unchecked]:border data-[state=unchecked]:border-muted data-[state=unchecked]:bg-base",
   "data-[state=unchecked]:hover:bg-base-hover",
   "data-[state=unchecked]:active:bg-base-pressed",
@@ -14,12 +14,12 @@ const r = [
   "data-[state=checked]:hover:bg-active-hover",
   "data-[state=checked]:active:bg-active-pressed",
   "data-[state=checked]:disabled:bg-disabled data-[state=checked]:disabled:text-disabled"
-].join(" "), b = i.forwardRef(({ className: a, ...s }, c) => /* @__PURE__ */ e(
+), b = i.forwardRef(({ className: s, ...d }, c) => /* @__PURE__ */ e(
   t.Root,
   {
     ref: c,
-    className: d(r, a),
-    ...s,
+    className: a(r, s),
+    ...d,
     children: /* @__PURE__ */ e(t.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ e(o, { size: 16 }) })
   }
 ));

package/dist/lib/Components/Dialog/Dialog.js

@@ -3,10 +3,10 @@ import { createSafeContext as u, cn as l } from "../../../libs/utils-shared/dist
 import * as r from "@radix-ui/react-dialog";
 import { cva as h } from "class-variance-authority";
 import * as n from "react";
-const [x, s] = u("Dialog"), p = h(
+const [p, s] = u("Dialog"), x = h(
   [
     "flex w-400 max-w-[calc(100%-2rem)] flex-col overflow-hidden rounded-2xl bg-canvas-sheet pb-24",
-    "fixed left-[50%] top-[50%] z-dialog-content translate-x-[-50%] translate-y-[-50%]",
+    "fixed top-[50%] left-[50%] z-dialog-content translate-[-50%]",
     "data-[state=closed]:animate-content-hide data-[state=open]:animate-content-show"
   ],
   {
@@ -22,7 +22,7 @@ const [x, s] = u("Dialog"), p = h(
   }
 );
 function C({ height: a = "hug", ...t }) {
-  return /* @__PURE__ */ o(x, { value: { height: a }, children: /* @__PURE__ */ o(r.Root, { "data-slot": "dialog", ...t }) });
+  return /* @__PURE__ */ o(p, { value: { height: a }, children: /* @__PURE__ */ o(r.Root, { "data-slot": "dialog", ...t }) });
 }
 function R({ ...a }) {
   return /* @__PURE__ */ o(r.Trigger, { "data-slot": "dialog-trigger", ...a });
@@ -62,7 +62,7 @@ function O({
       r.Content,
       {
         "data-slot": "dialog-content",
-        className: l(p({ height: i }), a),
+        className: l(x({ height: i }), a),
         ...e,
         children: t
       }

package/dist/lib/Components/Dialog/DialogHeader/DialogHeader.js

@@ -79,8 +79,8 @@ const y = b("flex px-24 text-base", {
                 "pl-40": !i
               }),
               children: [
-                o && /* @__PURE__ */ e("div", { className: "heading-5-semi-bold truncate text-center", children: o }),
-                l && /* @__PURE__ */ e("div", { className: "truncate text-center text-muted body-2", children: l })
+                o && /* @__PURE__ */ e("div", { className: "truncate text-center heading-5-semi-bold", children: o }),
+                l && /* @__PURE__ */ e("div", { className: "truncate text-center body-2 text-muted", children: l })
               ]
             }
           ),
@@ -93,7 +93,7 @@ const y = b("flex px-24 text-base", {
           ] }),
           (o || l) && /* @__PURE__ */ t("div", { className: "flex flex-col gap-4", children: [
             o && /* @__PURE__ */ e("div", { className: "heading-3-semi-bold", children: o }),
-            l && /* @__PURE__ */ e("div", { className: "text-muted body-2", children: l })
+            l && /* @__PURE__ */ e("div", { className: "body-2 text-muted", children: l })
           ] })
         ] })
       ]

package/dist/lib/Components/InteractiveIcon/InteractiveIcon.js

@@ -1,9 +1,9 @@
-import { jsx as i } from "react/jsx-runtime";
-import { cn as o } from "../../../libs/utils-shared/dist/index.js";
+import { jsx as o } from "react/jsx-runtime";
+import { cn as i } from "../../../libs/utils-shared/dist/index.js";
 import { cva as a } from "class-variance-authority";
 import n from "react";
 const c = a(
-  "inline-flex size-fit items-center justify-center rounded-full text-muted transition-colors hover:text-muted-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus active:text-muted-pressed disabled:text-disabled",
+  "inline-flex size-fit cursor-pointer items-center justify-center rounded-full text-muted transition-colors hover:text-muted-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus active:text-muted-pressed disabled:text-disabled",
   {
     variants: {
       iconType: {
@@ -12,12 +12,12 @@ const c = a(
       }
     }
   }
-), d = n.forwardRef(({ className: e, iconType: t, ...s }, r) => /* @__PURE__ */ i(
+), d = n.forwardRef(({ className: e, iconType: t, ...r }, s) => /* @__PURE__ */ o(
   "button",
   {
-    ref: r,
-    className: o(e, c({ iconType: t })),
-    ...s
+    ref: s,
+    className: i(e, c({ iconType: t })),
+    ...r
   }
 ));
 d.displayName = "InteractiveIcon";

package/dist/lib/Components/ListItem/ListItem.js

@@ -76,7 +76,7 @@ const N = n.forwardRef(({ children: e, className: t }, s) => {
     {
       ref: s,
       className: a(
-        "w-full items-center truncate text-muted body-3",
+        "w-full items-center truncate body-3 text-muted",
         o ? "justify-end text-end" : "justify-start text-start",
         r && "text-disabled",
         t

package/dist/lib/Components/Menu/Menu.js

@@ -11,14 +11,14 @@ const c = o(
   "data-[state=open]:animate-fade-in",
   "data-[state=closed]:animate-fade-out"
 ), d = o(
-  "relative flex cursor-default select-none items-center gap-12",
-  "h-44 rounded-sm px-8 outline-none",
-  "text-base body-2-semi-bold",
+  "relative flex cursor-default items-center gap-12 select-none",
+  "h-44 rounded-sm px-8 outline-hidden",
+  "body-2-semi-bold text-base",
   "transition-colors",
   "focus:bg-base-transparent-hover",
   "active:bg-base-transparent-pressed",
-  "data-[disabled]:pointer-events-none data-[disabled]:text-disabled"
-), b = o("px-8 py-4 text-muted body-3-semi-bold"), N = o(
+  "data-disabled:pointer-events-none data-disabled:text-disabled"
+), b = o("px-8 py-4 body-3-semi-bold text-muted"), N = o(
   d,
   "data-[state=open]:bg-base-transparent-hover"
 );

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

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-import { SearchInputProps } from './types';
 /**
  * A customizable search input component with built-in search icon, automatic clear button, error states, and focus/hover effects.
  *
@@ -54,5 +53,7 @@ import { SearchInputProps } from './types';
  *   }}
  * />
  */
-export declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const SearchInput: React.ForwardRefExoticComponent<Omit<import('..').BaseInputProps, "label" | "prefix" | "containerClassName" | "labelClassName"> & {
+    appearance?: "plain" | "transparent";
+} & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=SearchInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,eAAO,MAAM,WAAW,2FAcvB,CAAC"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AA+B1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,eAAO,MAAM,WAAW;;0CAuBvB,CAAC"}

package/dist/lib/Components/SearchInput/SearchInput.js

@@ -1,18 +1,50 @@
-import { jsx as e } from "react/jsx-runtime";
-import a from "react";
-import { BaseInput as o } from "../BaseInput/BaseInput.js";
-import { Search as s } from "../../Symbols/Icons/Search.js";
-const c = a.forwardRef(
-  (r, t) => /* @__PURE__ */ e(o, { ref: t, prefix: /* @__PURE__ */ e(
-    s,
+import { jsx as r } from "react/jsx-runtime";
+import { cn as i } from "../../../libs/utils-shared/dist/index.js";
+import { cva as t } from "class-variance-authority";
+import o from "react";
+import { BaseInput as d } from "../BaseInput/BaseInput.js";
+import { Search as c } from "../../Symbols/Icons/Search.js";
+const m = t("", {
+  variants: {
+    appearance: {
+      plain: "",
+      transparent: "bg-muted-transparent hover:bg-muted-transparent-hover has-disabled:bg-muted-transparent-disabled"
+    }
+  },
+  defaultVariants: {
+    appearance: "plain"
+  }
+}), l = t("", {
+  variants: {
+    appearance: {
+      plain: "",
+      transparent: "bg-transparent group-hover:bg-transparent-hover group-has-disabled:bg-transparent-disabled"
+    }
+  },
+  defaultVariants: {
+    appearance: "plain"
+  }
+}), u = o.forwardRef(
+  ({ appearance: a = "plain", className: e, inputClassName: n, ...s }, p) => /* @__PURE__ */ r(
+    d,
     {
-      size: 20,
-      className: "text-muted group-has-[:disabled]:text-disabled",
-      "aria-hidden": "true"
+      ref: p,
+      prefix: /* @__PURE__ */ r(
+        c,
+        {
+          size: 20,
+          className: "text-muted group-has-disabled:text-disabled",
+          "aria-hidden": "true"
+        }
+      ),
+      className: e,
+      containerClassName: m({ appearance: a }),
+      inputClassName: i(l({ appearance: a }), n),
+      ...s
     }
-  ), ...r })
+  )
 );
-c.displayName = "SearchInput";
+u.displayName = "SearchInput";
 export {
-  c as SearchInput
+  u as SearchInput
 };

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

@@ -1,3 +1,9 @@
 import { BaseInputProps } from '../BaseInput/types';
-export type SearchInputProps = Omit<BaseInputProps, 'prefix' | 'label' | 'labelClassName' | 'inputClassName'>;
+export type SearchInputProps = Omit<BaseInputProps, 'prefix' | 'label' | 'labelClassName' | 'containerClassName'> & {
+    /**
+     * The visual appearance of the search input
+     * @default 'plain'
+     */
+    appearance?: 'plain' | 'transparent';
+};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,EACd,QAAQ,GAAG,OAAO,GAAG,gBAAgB,GAAG,gBAAgB,CACzD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,EACd,QAAQ,GAAG,OAAO,GAAG,gBAAgB,GAAG,oBAAoB,CAC7D,GAAG;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;CACtC,CAAC"}