@cfx-dev/ui-components 2.0.4 → 2.0.5

package/dist/components/Button/Button.d.ts

@@ -1,19 +1,19 @@
 import { default as React } from 'react';
 import { IconName } from '../Icon';
 
-export type ButtonTheme = 'primary' | 'secondary' | 'on-light' | 'default';
+export type ButtonTheme = 'primary' | 'secondary' | 'on-light' | 'default' | 'quicklink';
 export interface ButtonProps {
     text?: React.ReactNode;
     title?: string;
     type?: HTMLButtonElement['type'];
     icon?: IconName;
     theme?: ButtonTheme;
-    disabled?: boolean;
-    autofocus?: boolean;
     tabIndex?: number;
     className?: string;
     ariaLabel?: string;
     fullWidth?: boolean;
+    disabled?: boolean;
+    autofocus?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseUp?: (event: React.MouseEvent<HTMLButtonElement>) => void;

package/dist/components/Button/Button.js

@@ -1,105 +1,107 @@
-import { jsx as i, jsxs as k, Fragment as B } from "react/jsx-runtime";
-import _ from "react";
-import { Icon as I } from "../Icon/Icon.js";
-import { clsx as M } from "../../utils/clsx.js";
-import { noop as h } from "../../utils/functional.js";
-import '../../assets/Button.css';const j = "_root_1a4gc_1", w = "_fullWidth_1a4gc_32", F = "_primary_1a4gc_52", R = "_secondary_1a4gc_73", v = "_icon_1a4gc_115", D = "_decorator_1a4gc_120", t = {
-  root: j,
-  fullWidth: w,
-  primary: F,
-  secondary: R,
-  "on-light": "_on-light_1a4gc_94",
+import { jsx as r, jsxs as W, Fragment as g } from "react/jsx-runtime";
+import m from "react";
+import { Icon as B } from "../Icon/Icon.js";
+import { clsx as I } from "../../utils/clsx.js";
+import { noop as q } from "../../utils/functional.js";
+import '../../assets/Button.css';const M = "_root_1qqs9_1", j = "_fullWidth_1qqs9_35", w = "_primary_1qqs9_55", F = "_secondary_1qqs9_76", R = "_quicklink_1qqs9_118", v = "_icon_1qqs9_125", D = "_icononly_1qqs9_150", L = "_decorator_1qqs9_155", o = {
+  root: M,
+  fullWidth: j,
+  primary: w,
+  secondary: F,
+  "on-light": "_on-light_1qqs9_97",
+  quicklink: R,
   icon: v,
-  decorator: D
+  icononly: D,
+  decorator: L
 };
-function L(c) {
+function U(s) {
   const {
-    text: o = null,
+    text: t = null,
     icon: e,
     decorator: n = null
-  } = c;
-  return /* @__PURE__ */ k(B, { children: [
-    o,
-    !!e && /* @__PURE__ */ i(I, { name: e }),
-    !!n && /* @__PURE__ */ i("div", { className: t.decorator, children: n })
+  } = s;
+  return /* @__PURE__ */ W(g, { children: [
+    t,
+    !!e && /* @__PURE__ */ r(B, { name: e, className: o.icon }),
+    !!n && /* @__PURE__ */ r("div", { className: o.decorator, children: n })
   ] });
 }
-function U(c) {
+function z(s) {
   const {
-    text: o = null,
+    text: t = null,
     icon: e,
     theme: n = "default",
-    disabled: l = !1,
+    disabled: c = !1,
     className: u = "",
     autofocus: d = !1,
-    fullWidth: r = !1,
-    tabIndex: s
-  } = c;
-  return M(t.root, t[n], u, {
-    [t.disabled]: l,
-    [t.icon]: !!e && (o === null || typeof o > "u"),
-    [t.text]: !!o,
-    [t.autofocus]: d || typeof s < "u",
-    [t.fullWidth]: r
+    fullWidth: a = !1,
+    tabIndex: i
+  } = s;
+  return I(o.root, o[n], u, {
+    [o.disabled]: c,
+    [o.icononly]: !!e && (t === null || typeof t > "u"),
+    [o.text]: !!t,
+    [o.autofocus]: d || typeof i < "u",
+    [o.fullWidth]: a
   });
 }
-const H = _.forwardRef(function(o, e) {
+const K = m.forwardRef(function(t, e) {
   const {
     text: n = null,
-    icon: l,
+    icon: c,
     title: u = "",
     type: d = "button",
-    className: r = "",
-    theme: s = "default",
-    disabled: a = !1,
-    onClick: p = h,
-    onMouseDown: b = h,
-    onMouseUp: x = h,
+    className: a = "",
+    theme: i = "default",
+    disabled: l = !1,
+    onClick: h = q,
+    onMouseDown: p = q,
+    onMouseUp: b = q,
     autofocus: f = !1,
-    tabIndex: m,
-    fullWidth: g = !1,
-    ariaLabel: y = ""
-  } = o, C = _.useMemo(() => U({
+    tabIndex: _,
+    fullWidth: y = !1,
+    ariaLabel: k = ""
+  } = t, x = m.useMemo(() => z({
     text: n,
-    icon: l,
-    theme: s,
-    disabled: a,
-    className: r,
+    icon: c,
+    theme: i,
+    disabled: l,
+    className: a,
     autofocus: f,
-    fullWidth: g,
-    tabIndex: m
+    fullWidth: y,
+    tabIndex: _
   }), [
     f,
-    r,
-    g,
     a,
+    y,
     l,
-    m,
+    c,
+    _,
     n,
-    s
-  ]), N = _.useCallback((W) => {
-    a || p(W);
-  }, [a, p]);
-  return /* @__PURE__ */ i(
+    i
+  ]), C = m.useCallback((N) => {
+    l || h(N);
+  }, [l, h]);
+  return /* @__PURE__ */ r(
     "button",
     {
       ref: e,
-      disabled: a,
-      className: C,
-      onClick: N,
-      onMouseDown: b,
-      onMouseUp: x,
+      disabled: l,
+      className: x,
+      onClick: C,
+      onMouseDown: p,
+      onMouseUp: b,
       autoFocus: f,
-      tabIndex: m,
+      tabIndex: _,
       title: u,
       type: d,
-      "aria-label": y,
-      children: /* @__PURE__ */ i(L, { ...o })
+      "aria-label": k,
+      children: /* @__PURE__ */ r(U, { ...t })
     }
   );
 });
 export {
-  H as Button,
-  L as ButtonContent,
-  U as getButtonClassName
+  K as Button,
+  U as ButtonContent,
+  z as getButtonClassName
 };

package/dist/components/Button/ButtonShowcase.js

@@ -1,15 +1,15 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import l from "react";
 import { Flex as i } from "../Layout/Flex/Flex.js";
 import { Text as n } from "../Text/Text.js";
-import { Button as r } from "./Button.js";
+import { Button as t } from "./Button.js";
 import { ButtonBar as c } from "./ButtonBar.js";
 function o() {
-  return /* @__PURE__ */ t(i, { gap: "large", vertical: !0, children: [
-    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
+  return /* @__PURE__ */ r(i, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Default" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        r,
+        t,
         {
           text: "Sign In",
           theme: "default",
@@ -17,10 +17,10 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Primary" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        r,
+        t,
         {
           text: "Sign In",
           theme: "primary",
@@ -28,10 +28,10 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Secondary" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        r,
+        t,
         {
           text: "Sign In",
           theme: "secondary",
@@ -39,10 +39,10 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "On Light" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        r,
+        t,
         {
           text: "Sign In",
           theme: "on-light",
@@ -50,20 +50,31 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Quick Link" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        t,
+        {
+          text: "Sign In",
+          theme: "quicklink",
+          icon: "LeftArrow"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "No Icon" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        r,
+        t,
         {
           text: "Sign In",
           theme: "default"
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Full Width" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        r,
+        t,
         {
           text: "Sign In",
           theme: "default",
@@ -72,14 +83,25 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Button Bar" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ t(c, { children: [
-        /* @__PURE__ */ e(r, { text: "Sign In", theme: "primary", icon: "Users" }),
-        /* @__PURE__ */ e(r, { text: "Register", theme: "secondary", icon: "Users" }),
-        /* @__PURE__ */ e(r, { text: "Sign Out", theme: "on-light", icon: "Users" }),
-        /* @__PURE__ */ e(r, { text: "Create Account", theme: "default", icon: "Users" })
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ r(c, { children: [
+        /* @__PURE__ */ e(t, { text: "Sign In", theme: "primary", icon: "Users" }),
+        /* @__PURE__ */ e(t, { text: "Register", theme: "secondary", icon: "Users" }),
+        /* @__PURE__ */ e(t, { text: "Sign Out", theme: "on-light", icon: "Users" }),
+        /* @__PURE__ */ e(t, { text: "Create Account", theme: "default", icon: "Users" })
       ] }) })
+    ] }),
+    /* @__PURE__ */ r(i, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Long text" }),
+      /* @__PURE__ */ e("div", { style: { maxWidth: "300px" }, children: /* @__PURE__ */ e(
+        t,
+        {
+          text: "Long text that should wrap around",
+          theme: "default",
+          icon: "Users"
+        }
+      ) })
     ] })
   ] });
 }

package/dist/components/InfoPanel/InfoPanel.js

@@ -1,36 +1,36 @@
 import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import u from "react";
-import { Icon as l } from "../Icon/Icon.js";
-import { clsx as v } from "../../utils/clsx.js";
-import '../../assets/InfoPanel.css';const y = "_rootUnset_10ll9_1", f = "_root_10ll9_1", x = "_interactive_10ll9_19", z = "_interactiveIcon_10ll9_22", d = "_icon_10ll9_69", I = "_content_10ll9_73", t = {
-  rootUnset: y,
-  root: f,
-  interactive: x,
-  interactiveIcon: z,
-  "type-neutral": "_type-neutral_10ll9_34",
-  "type-error": "_type-error_10ll9_41",
-  "type-success": "_type-success_10ll9_48",
-  "type-warning": "_type-warning_10ll9_55",
-  "size-small": "_size-small_10ll9_62",
-  "size-large": "_size-large_10ll9_65",
-  icon: d,
-  content: I
+import h from "react";
+import { Icon as s } from "../Icon/Icon.js";
+import { clsx as k } from "../../utils/clsx.js";
+import '../../assets/InfoPanel.css';const u = "_rootUnset_1kt7h_1", v = "_root_1kt7h_1", y = "_interactive_1kt7h_19", f = "_interactiveIcon_1kt7h_22", x = "_icon_1kt7h_69", z = "_content_1kt7h_73", t = {
+  rootUnset: u,
+  root: v,
+  interactive: y,
+  interactiveIcon: f,
+  "type-neutral": "_type-neutral_1kt7h_34",
+  "type-error": "_type-error_1kt7h_41",
+  "type-success": "_type-success_1kt7h_48",
+  "type-warning": "_type-warning_1kt7h_55",
+  "size-small": "_size-small_1kt7h_62",
+  "size-large": "_size-large_1kt7h_65",
+  icon: x,
+  content: z
 };
-function N(s) {
+function d(c) {
   const {
-    type: c = "neutral",
-    size: r = "normal",
-    className: a,
+    type: r = "neutral",
+    size: a = "normal",
+    className: i,
     onClick: e,
-    ariaLabel: i,
+    ariaLabel: _,
     icon: n,
-    children: _
-  } = s, m = v(
+    children: l
+  } = c, m = k(
     t.rootUnset,
     t.root,
-    a,
-    t[`type-${c}`],
-    t[`size-${r}`],
+    i,
+    t[`type-${r}`],
+    t[`size-${a}`],
     {
       [t.interactive]: !!e
     }
@@ -41,16 +41,16 @@ function N(s) {
       type: e ? "button" : void 0,
       className: m,
       onClick: e,
-      "aria-label": i,
+      "aria-label": _,
       children: [
-        n && /* @__PURE__ */ o(l, { size: "xxsmall", name: n, className: t.icon }),
-        /* @__PURE__ */ o("div", { className: t.content, children: _ }),
-        e && /* @__PURE__ */ o(l, { size: "xxsmall", name: "LeftArrow", className: t.interactiveIcon })
+        n && /* @__PURE__ */ o(s, { size: "xxsmall", name: n, className: t.icon }),
+        /* @__PURE__ */ o("div", { className: t.content, children: l }),
+        e && /* @__PURE__ */ o(s, { size: "xxsmall", name: "LeftArrow", className: t.interactiveIcon })
       ]
     }
   );
 }
-const R = u.memo(N);
+const U = h.memo(d);
 export {
-  R as default
+  U as default
 };

package/dist/components/Input/Input.js

@@ -1,88 +1,88 @@
-import { jsxs as h, jsx as f } from "react/jsx-runtime";
-import t from "react";
+import { jsxs as b, jsx as p } from "react/jsx-runtime";
+import o from "react";
 import { Icon as j } from "../Icon/Icon.js";
 import { Indicator as G } from "../Indicator/Indicator.js";
 import { clsx as T } from "../../utils/clsx.js";
-import { getValue as z } from "../../utils/getValue.js";
-import '../../assets/Input.css';const B = "_root_osypq_1", W = "_input_osypq_1", X = "_small_osypq_5", $ = "_large_osypq_9", H = "_placeholderIcon_osypq_75", J = "_empty_osypq_151", L = "_decorator_osypq_156", e = {
-  root: B,
-  input: W,
-  small: X,
-  large: $,
+import { getValue as B } from "../../utils/getValue.js";
+import '../../assets/Input.css';const W = "_root_1truz_1", X = "_input_1truz_1", $ = "_small_1truz_5", q = "_large_1truz_9", H = "_placeholderIcon_1truz_75", J = "_empty_1truz_151", L = "_decorator_1truz_156", e = {
+  root: W,
+  input: X,
+  small: $,
+  large: q,
   placeholderIcon: H,
-  "full-width": "_full-width_osypq_145",
+  "full-width": "_full-width_1truz_145",
   empty: J,
   decorator: L,
-  "backdrop-blur": "_backdrop-blur_osypq_173"
-}, oe = t.forwardRef(function(a, b) {
+  "backdrop-blur": "_backdrop-blur_1truz_173"
+}, te = o.forwardRef(function(a, y) {
   const {
     id: I,
     fullWidth: N = !1,
-    value: l,
-    onChange: s,
-    onSubmit: c,
-    onKeyDown: u,
+    value: r,
+    onChange: c,
+    onSubmit: u,
+    onKeyDown: s,
     pattern: d,
-    tabIndex: g,
-    loading: y = !1,
-    spellCheck: k = !0,
-    autofocus: q = !1,
+    tabIndex: z,
+    loading: h = !1,
+    spellCheck: g = !0,
+    autofocus: k = !1,
     disabled: w = !1,
     className: x = "",
-    placeholder: n = "",
-    placeholderIcon: r,
+    placeholder: l = "",
+    placeholderIcon: n,
     type: C = "text",
     size: E = "normal",
     decorator: i,
     backdropBlur: v = !1
-  } = a, [m, R] = t.useState(l), V = typeof m < "u" && m !== "" && m !== null || typeof l < "u" && l !== "" && l !== null, S = a.type === "number" && (a.min ?? Number.MIN_SAFE_INTEGER) || void 0, A = a.type === "number" && (a.max ?? Number.MAX_SAFE_INTEGER) || void 0, p = t.useCallback((o) => {
-    R(o), s && s(o);
-  }, [s]), D = t.useCallback(
-    (o) => {
+  } = a, [m, R] = o.useState(r), V = typeof m < "u" && m !== "" && m !== null || typeof r < "u" && r !== "" && r !== null, S = a.type === "number" && (a.min ?? Number.MIN_SAFE_INTEGER) || void 0, A = a.type === "number" && (a.max ?? Number.MAX_SAFE_INTEGER) || void 0, _ = o.useCallback((t) => {
+    R(t), c && c(t);
+  }, [c]), D = o.useCallback(
+    (t) => {
       const {
-        value: _
-      } = o.target;
+        value: f
+      } = t.target;
       if (d) {
-        d.test(_) && p(_);
+        d.test(f) && _(f);
         return;
       }
-      p(_);
+      _(f);
     },
-    [p, d]
-  ), F = t.useCallback((o) => {
-    u && u(o), c && o.key === "Enter" && c();
-  }, [u, c]), K = T(e.root, e[E], x, {
+    [_, d]
+  ), F = o.useCallback((t) => {
+    s && s(t), u && t.key === "Enter" && u();
+  }, [s, u]), K = T(e.root, e[E], x, {
     [e["full-width"]]: N,
     [e["backdrop-blur"]]: v,
     [e.empty]: !V
-  }), M = t.useMemo(() => n ? r ? `     ${n.trim()}` : n.trim() : "", [n, r]);
-  return /* @__PURE__ */ h("div", { className: K, children: [
-    /* @__PURE__ */ f(
+  }), M = o.useMemo(() => l ? n ? `     ${l.trim()}` : l.trim() : "", [l, n]);
+  return /* @__PURE__ */ b("div", { className: K, children: [
+    /* @__PURE__ */ p(
       "input",
       {
         id: I,
-        ref: b,
+        ref: y,
         type: C,
-        tabIndex: g,
-        autoFocus: q,
+        tabIndex: z,
+        autoFocus: k,
         className: e.input,
-        value: l,
+        value: r,
         placeholder: M,
         disabled: w,
         onChange: D,
         onKeyDown: F,
-        spellCheck: k,
+        spellCheck: g,
         min: S,
         max: A
       }
     ),
-    r && /* @__PURE__ */ f(j, { name: r, className: e.placeholderIcon }),
-    (y || !!i) && /* @__PURE__ */ h("div", { className: e.decorator, children: [
-      !!y && /* @__PURE__ */ f(G, {}),
-      !!i && z(i)
+    n && /* @__PURE__ */ p(j, { name: n, className: e.placeholderIcon }),
+    (h || !!i) && /* @__PURE__ */ b("div", { className: e.decorator, children: [
+      !!h && /* @__PURE__ */ p(G, {}),
+      !!i && B(i)
     ] })
   ] });
 });
 export {
-  oe as default
+  te as default
 };

package/dist/components/Input/RichInput.js

@@ -1,18 +1,18 @@
-import { jsxs as D, jsx as n } from "react/jsx-runtime";
-import t from "react";
-import { Button as F } from "../Button/Button.js";
-import { clsx as I } from "../../utils/clsx.js";
+import { jsxs as B, jsx as o } from "react/jsx-runtime";
+import r from "react";
+import { Button as D } from "../Button/Button.js";
+import { clsx as F } from "../../utils/clsx.js";
 import { useDynamicRef as i } from "../../utils/hooks/useDynamicRef.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
 import "../../index-2hJuj4UN.js";
-import '../../assets/RichInput.css';const L = "_root_ttyw6_1", T = "_renderer_ttyw6_1", j = "_small_ttyw6_5", E = "_large_ttyw6_10", z = "_clear_ttyw6_144", o = {
-  root: L,
-  renderer: T,
-  small: j,
+import '../../assets/RichInput.css';const I = "_root_1w3oj_1", L = "_renderer_1w3oj_1", T = "_small_1w3oj_5", E = "_large_1w3oj_10", z = "_clear_1w3oj_144", n = {
+  root: I,
+  renderer: L,
+  small: T,
   large: E,
   clear: z
-}, P = t.forwardRef(function(f, m) {
+}, P = r.forwardRef(function(f, m) {
   const {
     size: d = "normal",
     value: c,
@@ -23,24 +23,24 @@ import '../../assets/RichInput.css';const L = "_root_ttyw6_1", T = "_renderer_tt
     onKeyDown: g,
     className: R,
     rendered: w,
-    placeholder: y,
+    placeholder: j,
     autoFocus: S,
     withClearButton: k = !1
-  } = f, s = t.useRef(null), r = t.useRef(null), a = i(p), u = i(C), x = t.useCallback((e) => {
+  } = f, s = r.useRef(null), t = r.useRef(null), a = i(p), u = i(C), x = r.useCallback((e) => {
     a.current(e.target.value);
-  }, []), N = t.useCallback(() => {
+  }, []), N = r.useCallback(() => {
     var e;
     a.current(""), (e = s.current) == null || e.focus();
-  }, []), b = t.useCallback((e) => {
+  }, []), b = r.useCallback((e) => {
     if (!u.current || !(e.target instanceof HTMLInputElement))
       return;
     const l = e.target;
     u.current(l.selectionStart, l.selectionEnd, l.selectionDirection);
-  }, []), v = t.useCallback((e) => {
-    r.current && (r.current.scrollTop = e.target.scrollTop, r.current.scrollLeft = e.target.scrollLeft);
-  }, []), B = I(o.root, R, o[d]);
-  return /* @__PURE__ */ D("div", { ref: m, className: B, children: [
-    /* @__PURE__ */ n(
+  }, []), v = r.useCallback((e) => {
+    t.current && (t.current.scrollTop = e.target.scrollTop, t.current.scrollLeft = e.target.scrollLeft);
+  }, []), y = F(n.root, R, n[d]);
+  return /* @__PURE__ */ B("div", { ref: m, className: y, children: [
+    /* @__PURE__ */ o(
       "input",
       {
         ref: s,
@@ -48,7 +48,7 @@ import '../../assets/RichInput.css';const L = "_root_ttyw6_1", T = "_renderer_tt
         type: "text",
         value: c,
         onChange: x,
-        placeholder: y,
+        placeholder: j,
         onBlur: h,
         onFocus: _,
         onScroll: v,
@@ -56,8 +56,8 @@ import '../../assets/RichInput.css';const L = "_root_ttyw6_1", T = "_renderer_tt
         onKeyDown: g
       }
     ),
-    /* @__PURE__ */ n("div", { ref: r, className: o.renderer, children: w }),
-    k && c && /* @__PURE__ */ n("div", { className: o.clear, children: /* @__PURE__ */ n(F, { icon: "Close", onClick: N }) })
+    /* @__PURE__ */ o("div", { ref: t, className: n.renderer, children: w }),
+    k && c && /* @__PURE__ */ o("div", { className: n.clear, children: /* @__PURE__ */ o(D, { icon: "Close", onClick: N }) })
   ] });
 });
 export {

package/dist/components/InputDropzone/InputDropzone.js

@@ -1023,7 +1023,7 @@ function bt(e, r) {
 }
 function rr() {
 }
-const ht = "_dropzone_ir264_1", Dt = "_text_ir264_19", At = "_disabled_ir264_25", wt = "_focused_ir264_39", Ot = "_dragActive_ir264_39", F = {
+const ht = "_dropzone_6f6kw_1", Dt = "_text_6f6kw_19", At = "_disabled_6f6kw_25", wt = "_focused_6f6kw_39", Ot = "_dragActive_6f6kw_39", F = {
   dropzone: ht,
   text: Dt,
   disabled: At,