@kolking/react-ui 1.8.20 → 1.9.0

package/dist/Thumbnails-BlXFynlF.js

@@ -0,0 +1,38 @@
+import { jsx as s } from "react/jsx-runtime";
+import a from "classnames";
+import { Thumbnail as g } from "./components/Lightbox/Thumbnail.js";
+import { cssProps as u, htmlImage as _ } from "./utils/helpers.js";
+const x = "Lightbox_lightbox_JQunO", p = "Lightbox_images_WFWsL", L = "Lightbox_thumbnails_jQSPH", f = "Lightbox_willhide_z2lO8", d = "Lightbox_content_UfCvB", v = "Lightbox_prev_qIKJt", T = "Lightbox_next_qZR61", j = "Lightbox_close_SgBu9", w = {
+  lightbox: x,
+  images: p,
+  thumbnails: L,
+  willhide: f,
+  content: d,
+  prev: v,
+  next: T,
+  close: j
+}, F = ({
+  images: o,
+  selected: i,
+  className: n,
+  style: e,
+  imageSize: h,
+  objectFit: c,
+  renderImage: b = _,
+  onSelect: m,
+  ...r
+}) => o.length <= 1 ? null : /* @__PURE__ */ s(
+  "ul",
+  {
+    ...r,
+    role: "listbox",
+    "data-lightbox-thumbnails": !0,
+    className: a(w.thumbnails, n),
+    style: { ...e, ...u({ thumbnailSize: h, thumbnailObjectFit: c }) },
+    children: o.map((l, t) => /* @__PURE__ */ s(g, { index: t, selected: t === i, onSelect: m, children: b({ ...l, alt: l.alt ?? `Thumbnail ${t + 1}` }) }, t))
+  }
+);
+export {
+  F as T,
+  w as s
+};

package/dist/components/Avatar/Avatar.js

@@ -4,47 +4,47 @@ import * as m from "react";
 import { forwardRef as S, useMemo as x, useState as A, useEffect as N, useCallback as E } from "react";
 import { cssProps as C } from "../../utils/helpers.js";
 import { getStringColor as k, getGravatarUri as M, getInitials as R } from "./helpers.js";
-const b = (a, t) => /* @__PURE__ */ m.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 50 50", ref: t, ...a }, /* @__PURE__ */ m.createElement("path", { fill: "currentColor", d: "M25 31c4.97 0 9-4.253 9-9.5S29.97 12 25 12s-9 4.253-9 9.5 4.03 9.5 9 9.5Zm19 19c0-8.837-8.507-15-19-15S6 41.163 6 50h38Z" })), j = S(b), y = "Avatar_avatar_PNlL5", I = "Avatar_image_Jwmxk", P = "Avatar_initials_i0r2T", e = {
+const b = (a, e) => /* @__PURE__ */ m.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 50 50", ref: e, ...a }, /* @__PURE__ */ m.createElement("path", { fill: "currentColor", d: "M25 31c4.97 0 9-4.253 9-9.5S29.97 12 25 12s-9 4.253-9 9.5 4.03 9.5 9 9.5Zm19 19c0-8.837-8.507-15-19-15S6 41.163 6 50h38Z" })), j = S(b), y = "Avatar_avatar_PNlL5", I = "Avatar_image_Jwmxk", P = "Avatar_initials_i0r2T", r = {
   avatar: y,
   image: I,
   initials: P,
   default: "Avatar_default_v75Mg"
 }, J = ({
   size: a = 50,
-  name: t,
+  name: e,
   email: o,
-  src: c,
+  src: n,
   colorize: v,
   className: d,
   style: u,
   children: g,
   ...f
 }) => {
-  const r = t == null ? void 0 : t.trim(), p = v && r ? k(r) : void 0, s = x(() => c || (o ? M(a, o) : void 0), [c, a, o]), [l, n] = A(s);
+  const t = e?.trim(), p = v && t ? k(t) : void 0, s = x(() => n || (o ? M(a, o) : void 0), [n, a, o]), [c, l] = A(s);
   N(() => {
-    n(s);
+    l(s);
   }, [s]);
   const w = E(() => {
-    n(void 0);
+    l(void 0);
   }, []);
   return /* @__PURE__ */ _(
     "div",
     {
       ...f,
       "data-avatar": !0,
-      className: h(e.avatar, d),
+      className: h(r.avatar, d),
       style: { ...u, ...C({ size: a, backgroundColor: p }) },
       children: [
-        l ? /* @__PURE__ */ i(
+        c ? /* @__PURE__ */ i(
           "img",
           {
             "data-avatar-image": !0,
-            className: e.image,
-            src: l,
-            alt: r ?? "",
+            className: r.image,
+            src: c,
+            alt: t ?? "",
             onError: w
           }
-        ) : r ? /* @__PURE__ */ i("span", { "data-avatar-initials": !0, className: e.initials, children: R(r) }) : /* @__PURE__ */ i(j, { "aria-hidden": !0, "data-avatar-default": !0, className: e.default }),
+        ) : t ? /* @__PURE__ */ i("span", { "data-avatar-initials": !0, className: r.initials, children: R(t) }) : /* @__PURE__ */ i(j, { "aria-hidden": !0, "data-avatar-default": !0, className: r.default }),
         g
       ]
     }

package/dist/components/Badge/Badge.js

@@ -2,64 +2,63 @@ import { jsx as h } from "react/jsx-runtime";
 import { useRef as _, useLayoutEffect as w, useEffect as l } from "react";
 import E from "classnames";
 import { wrapNode as P, cssProps as H } from "../../utils/helpers.js";
-const M = "Badge_badge_-mEE7", k = "Badge_appear_LbxbS", x = "Badge_accent_BIYve", L = "Badge_gray_7jA-J", I = "Badge_brown_x1GS7", R = "Badge_red_zPgCR", S = "Badge_orange_EoLmF", X = "Badge_yellow_qvbb6", j = "Badge_green_XX-1c", v = "Badge_teal_VHoFK", C = "Badge_cyan_1ksBn", F = "Badge_blue_YulfT", K = "Badge_indigo_2KXUy", N = "Badge_purple_o55fQ", O = "Badge_pink_T5H--", g = {
+const M = "Badge_badge_-mEE7", k = "Badge_appear_LbxbS", x = "Badge_accent_BIYve", L = "Badge_gray_7jA-J", v = "Badge_brown_x1GS7", I = "Badge_red_zPgCR", R = "Badge_orange_EoLmF", S = "Badge_yellow_qvbb6", X = "Badge_green_XX-1c", j = "Badge_teal_VHoFK", C = "Badge_cyan_1ksBn", F = "Badge_blue_YulfT", K = "Badge_indigo_2KXUy", N = "Badge_purple_o55fQ", O = "Badge_pink_T5H--", d = {
   badge: M,
   appear: k,
   accent: x,
   gray: L,
-  brown: I,
-  red: R,
-  orange: S,
-  yellow: X,
-  green: j,
-  teal: v,
+  brown: v,
+  red: I,
+  orange: R,
+  yellow: S,
+  green: X,
+  teal: j,
   cyan: C,
   blue: F,
   indigo: K,
   purple: N,
   pink: O
 };
-function T(a) {
-  const n = _();
+function T(o) {
+  const n = _(void 0);
   return l(() => {
-    n.current = a;
+    n.current = o;
   }), n.current;
 }
 const A = ({
-  size: a,
+  size: o,
   scheme: n = "red",
-  placement: s = "top-right",
-  value: o,
-  maxValue: c = 99,
+  placement: a = "top-right",
+  value: r,
+  maxValue: s = 99,
   className: u,
   style: f,
   ...y
 }) => {
-  const e = !o, p = T(e), t = _(null);
+  const e = !r, g = T(e), t = _(null);
   if (w(() => {
-    var r;
-    p && !e && ((r = t.current) == null || r.classList.add(g.appear));
-  }, [p, e]), l(() => {
-    if (!e && s && t.current) {
-      const r = t.current.clientHeight, d = t.current.parentElement, i = d ? Math.min(
-        parseInt(getComputedStyle(d).getPropertyValue("border-radius")),
-        d.clientHeight / 2
-      ) : 0, b = i * (1 - Math.sin(45 * Math.PI / 180)), m = (1 + Math.min(i / r, 1)) * (r / 4);
+    g && !e && t.current?.classList.add(d.appear);
+  }, [g, e]), l(() => {
+    if (!e && a && t.current) {
+      const i = t.current.clientHeight, c = t.current.parentElement, p = c ? Math.min(
+        parseInt(getComputedStyle(c).getPropertyValue("border-radius")),
+        c.clientHeight / 2
+      ) : 0, b = p * (1 - Math.sin(45 * Math.PI / 180)), m = (1 + Math.min(p / i, 1)) * (i / 4);
       t.current.style.setProperty("--offset", `${b - m}px`);
     }
-  }, [e, s]), e)
+  }, [e, a]), e)
     return null;
-  const B = typeof o == "number" && c > 0 && o > c;
+  const B = typeof r == "number" && s > 0 && r > s;
   return /* @__PURE__ */ h(
     "div",
     {
       ...y,
       ref: t,
       "data-badge": n,
-      "data-placement": s,
-      className: E(g.badge, g[n], u),
-      style: { ...f, ...H({ size: a }) },
-      children: P(B ? `${c}+` : o, "span")
+      "data-placement": a,
+      className: E(d.badge, d[n], u),
+      style: { ...f, ...H({ size: o }) },
+      children: P(B ? `${s}+` : r, "span")
     }
   );
 };

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

@@ -23,4 +23,4 @@ export declare const Button: <T extends React.ElementType = "button">(props: {
     title?: React.ReactNode;
     icon?: React.ReactElement;
     iconPosition?: "start" | "end";
-} & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "title" | "size" | "as" | "icon" | "scheme" | "minWidth" | "maxWidth" | "variant" | "busy" | "iconPosition"> & React.RefAttributes<unknown>) => React.ReactElement | null;
+} & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "title" | "as" | "size" | "icon" | "scheme" | "minWidth" | "maxWidth" | "variant" | "busy" | "iconPosition"> & React.RefAttributes<unknown>) => React.ReactElement | null;

package/dist/components/Dialog/Dialog.js

@@ -1,16 +1,16 @@
 import { jsx as t } from "react/jsx-runtime";
-import h, { useState as x, useLayoutEffect as m, useContext as y } from "react";
+import h, { useState as x, useLayoutEffect as m, useContext as p } from "react";
 import s from "classnames";
-import { useFloating as N, useInteractions as L, useDismiss as E, useRole as S, useMergeRefs as k, FloatingPortal as M, FloatingOverlay as O, FloatingFocusManager as Q, useId as j } from "@floating-ui/react";
-import { cssProps as q } from "../../utils/helpers.js";
-import { DialogContext as d } from "./DialogContext.js";
-import { Button as w } from "../Button/Button.js";
-import { Heading as B } from "../Heading/Heading.js";
-import { Icon as G } from "../Icon/Icon.js";
-const H = "Dialog_overlay_C98Qt", J = "Dialog_dialog_G3gxL", P = "Dialog_title_2pDPQ", V = "Dialog_footer_N-aEV", z = "Dialog_close_JSEkn", r = {
-  overlay: H,
-  dialog: J,
-  title: P,
+import { useFloating as N, useInteractions as P, useDismiss as L, useRole as E, useMergeRefs as S, FloatingPortal as k, FloatingOverlay as M, FloatingFocusManager as O, useId as Q } from "@floating-ui/react";
+import { cssProps as j } from "../../utils/helpers.js";
+import { DialogContext as c } from "./DialogContext.js";
+import { Button as q } from "../Button/Button.js";
+import { Heading as w } from "../Heading/Heading.js";
+import { Icon as B } from "../Icon/Icon.js";
+const G = "Dialog_overlay_C98Qt", H = "Dialog_dialog_G3gxL", J = "Dialog_title_2pDPQ", V = "Dialog_footer_N-aEV", z = "Dialog_close_JSEkn", i = {
+  overlay: G,
+  dialog: H,
+  title: J,
   footer: V,
   close: z
 }, oo = h.forwardRef(
@@ -19,73 +19,73 @@ const H = "Dialog_overlay_C98Qt", J = "Dialog_dialog_G3gxL", P = "Dialog_title_2
     size: e,
     width: a,
     lockScroll: l = !0,
-    style: i,
-    className: v,
-    children: D,
-    setTriggerProps: n,
-    requestClose: u,
-    ..._
-  }, p) => {
-    const [f, b] = x(), { refs: F, context: c } = N({
+    style: r,
+    className: y,
+    children: v,
+    setTriggerProps: d,
+    requestClose: g,
+    ...D
+  }, _) => {
+    const [u, b] = x(), { refs: F, context: n } = N({
       open: o,
-      onOpenChange: u
-    }), { getFloatingProps: C, getReferenceProps: g } = L([
-      E(c),
-      S(c, { role: "dialog" })
+      onOpenChange: g
+    }), { getFloatingProps: C, getReferenceProps: f } = P([
+      L(n),
+      E(n, { role: "dialog" })
     ]);
     m(() => {
-      n == null || n(g());
-    }, [n, g]);
-    const I = k([F.setFloating, p]), R = document.querySelector("[data-floating-root]") ?? document.body;
-    return o ? /* @__PURE__ */ t(d.Provider, { value: { labelId: f, setLabelId: b, requestClose: u }, children: /* @__PURE__ */ t(M, { root: R, children: /* @__PURE__ */ t(
-      O,
+      d?.(f());
+    }, [d, f]);
+    const I = S([F.setFloating, _]), R = document.querySelector("[data-floating-root]") ?? document.body;
+    return o ? /* @__PURE__ */ t(c.Provider, { value: { labelId: u, setLabelId: b, requestClose: g }, children: /* @__PURE__ */ t(k, { root: R, children: /* @__PURE__ */ t(
+      M,
       {
         "data-floating-root": !0,
         "data-dialog-overlay": !0,
         lockScroll: l,
-        className: r.overlay,
-        children: /* @__PURE__ */ t(Q, { context: c, children: /* @__PURE__ */ t(
+        className: i.overlay,
+        children: /* @__PURE__ */ t(O, { context: n, children: /* @__PURE__ */ t(
           "div",
           {
-            ...C(_),
+            ...C(D),
             ref: I,
             "data-dialog": !0,
             "data-open": o,
-            "aria-labelledby": f,
-            className: s(r.dialog, v),
-            style: { ...i, ...q({ size: e, width: a }) },
-            children: D
+            "aria-labelledby": u,
+            className: s(i.dialog, y),
+            style: { ...r, ...j({ size: e, width: a }) },
+            children: v
           }
         ) })
       }
     ) }) }) : null;
   }
 ), to = ({ className: o, children: e, ...a }) => {
-  const l = j(), { setLabelId: i } = y(d);
-  return m(() => (i(l), () => i(void 0)), [l, i]), /* @__PURE__ */ t(
-    B,
+  const l = Q(), { setLabelId: r } = p(c);
+  return m(() => (r(l), () => r(void 0)), [l, r]), /* @__PURE__ */ t(
+    w,
     {
       as: "h4",
       ...a,
       id: l,
       "data-dialog-title": !0,
       title: e,
-      className: s(r.title, o)
+      className: s(i.title, o)
     }
   );
-}, eo = (o) => /* @__PURE__ */ t("div", { ...o, "data-dialog-content": !0 }), ao = ({ className: o, ...e }) => /* @__PURE__ */ t("div", { ...e, "data-dialog-footer": !0, className: s(r.footer, o) }), lo = ({ className: o, ...e }) => {
-  const { requestClose: a } = y(d);
+}, eo = (o) => /* @__PURE__ */ t("div", { ...o, "data-dialog-content": !0 }), ao = ({ className: o, ...e }) => /* @__PURE__ */ t("div", { ...e, "data-dialog-footer": !0, className: s(i.footer, o) }), lo = ({ className: o, ...e }) => {
+  const { requestClose: a } = p(c);
   return /* @__PURE__ */ t(
-    w,
+    q,
     {
       type: "button",
       variant: "tertiary",
       "aria-label": "close dialog",
-      icon: /* @__PURE__ */ t(G, { name: "close" }),
+      icon: /* @__PURE__ */ t(B, { name: "close" }),
       onClick: a,
       ...e,
       "data-dialog-close": !0,
-      className: s(r.close, o)
+      className: s(i.close, o)
     }
   );
 };

package/dist/components/Dialog/useDialog.d.ts

@@ -7,7 +7,7 @@ export type DialogOptions<T, R> = {
 export type DialogType<T, R> = ReturnType<typeof useDialog<T, R>>;
 export declare function useDialog<T, R>(options?: DialogOptions<T, R>): {
     props: {
-        ref: import('react').RefObject<HTMLDivElement>;
+        ref: import('react').RefObject<HTMLDivElement | null>;
         open: boolean;
         setTriggerProps: import('react').Dispatch<import('react').SetStateAction<{}>>;
         requestClose: () => void;

package/dist/components/Dialog/useDialog.js

@@ -1,40 +1,32 @@
-import { useRef as l, useState as f, useCallback as o } from "react";
-function T(r, a) {
-  const c = r ? Math.max(
-    ...getComputedStyle(r).transitionDuration.split(",").map((t) => parseFloat(t) * 1e3)
-  ) : 0;
-  setTimeout(a, c);
-}
-function v(r) {
-  const a = l(null), c = l(r), t = l(!1), [D, b] = f({}), [h, p] = f((r == null ? void 0 : r.defaultOpen) ?? !1), [w, d] = f();
-  c.current = r;
-  const g = o((e) => {
-    var n, s;
-    t.current || (p(!0), d(e), (s = (n = c.current) == null ? void 0 : n.onShow) == null || s.call(n, e));
-  }, []), u = o((e) => {
-    var n;
-    t.current || (t.current = !0, (n = a.current) == null || n.setAttribute("data-open", "false"), T(a.current, () => {
-      var s, C, i, y;
-      e !== void 0 ? (C = (s = c.current) == null ? void 0 : s.onConfirm) == null || C.call(s, e) : (y = (i = c.current) == null ? void 0 : i.onCancel) == null || y.call(i), p(!1), d(void 0), t.current = !1;
+import { useRef as u, useState as a, useCallback as t } from "react";
+import { afterTransition as y } from "../../utils/helpers.js";
+function h(s) {
+  const c = u(null), n = u(s), r = u(!1), [g, d] = a({}), [m, f] = a(s?.defaultOpen ?? !1), [C, i] = a();
+  n.current = s;
+  const l = t((e) => {
+    r.current || (f(!0), i(e), n.current?.onShow?.(e));
+  }, []), o = t((e) => {
+    r.current || (r.current = !0, c.current?.setAttribute("data-open", "false"), y(c.current, () => {
+      e !== void 0 ? n.current?.onConfirm?.(e) : n.current?.onCancel?.(), f(!1), i(void 0), r.current = !1;
     }));
-  }, []), m = o(() => u(), [u]), O = o((e) => u(e), [u]), S = o(async (e) => {
-    t.current = !0;
+  }, []), p = t(() => o(), [o]), b = t((e) => o(e), [o]), w = t(async (e) => {
+    r.current = !0;
     try {
       return await e;
     } finally {
-      t.current = !1;
+      r.current = !1;
     }
   }, []);
   return {
-    props: { ref: a, open: h, setTriggerProps: b, requestClose: m },
-    trigger: { ...D, onClick: g },
-    data: w,
-    show: g,
-    cancel: m,
-    confirm: O,
-    preventClose: S
+    props: { ref: c, open: m, setTriggerProps: d, requestClose: p },
+    trigger: { ...g, onClick: l },
+    data: C,
+    show: l,
+    cancel: p,
+    confirm: b,
+    preventClose: w
   };
 }
 export {
-  v as useDialog
+  h as useDialog
 };

package/dist/components/Fields/Numeric.js

@@ -1,56 +1,54 @@
-import { jsxs as f, jsx as a } from "react/jsx-runtime";
-import y from "classnames";
-import _, { useRef as h, useImperativeHandle as v, useCallback as s } from "react";
-import { Icon as i } from "../Icon/Icon.js";
-import { Button as o } from "../Button/Button.js";
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import b from "classnames";
+import f, { useRef as y, useImperativeHandle as _, useCallback as a } from "react";
+import { Icon as c } from "../Icon/Icon.js";
+import { Button as s } from "../Button/Button.js";
 import "../../utils/helpers.js";
-import { I as w } from "../../Input-BG84zXZH.js";
-const E = "styles_numeric_dzUSE", R = "styles_increase_5S-Jo", g = "styles_decrease_j8UR6", c = {
-  numeric: E,
-  increase: R,
-  decrease: g
-}, C = _.forwardRef(
-  ({ labelIncrease: l = "increase", labelDecrease: d = "decrease", className: u, ...n }, m) => {
-    const e = h(null);
-    v(m, () => e.current);
-    const p = s(() => {
-      var r, t;
-      (r = e.current) == null || r.stepUp(), (t = e.current) == null || t.dispatchEvent(new Event("change", { bubbles: !0 }));
-    }, []), b = s(() => {
-      var r, t;
-      (r = e.current) == null || r.stepDown(), (t = e.current) == null || t.dispatchEvent(new Event("change", { bubbles: !0 }));
+import { I as h } from "../../Input-BG84zXZH.js";
+const v = "styles_numeric_dzUSE", w = "styles_increase_5S-Jo", E = "styles_decrease_j8UR6", t = {
+  numeric: v,
+  increase: w,
+  decrease: E
+}, k = f.forwardRef(
+  ({ labelIncrease: i = "increase", labelDecrease: o = "decrease", className: l, ...n }, d) => {
+    const e = y(null);
+    _(d, () => e.current);
+    const u = a(() => {
+      e.current?.stepUp(), e.current?.dispatchEvent(new Event("change", { bubbles: !0 }));
+    }, []), m = a(() => {
+      e.current?.stepDown(), e.current?.dispatchEvent(new Event("change", { bubbles: !0 }));
     }, []);
-    return /* @__PURE__ */ f(
-      w,
+    return /* @__PURE__ */ p(
+      h,
       {
         ...n,
         ref: e,
         type: "number",
         wrapperType: "numeric",
-        className: y(c.numeric, u),
+        className: b(t.numeric, l),
         children: [
-          /* @__PURE__ */ a(
-            o,
+          /* @__PURE__ */ r(
+            s,
             {
               type: "button",
               variant: "secondary",
-              "aria-label": l,
+              "aria-label": i,
               disabled: n.disabled || n.readOnly,
-              className: c.increase,
-              icon: /* @__PURE__ */ a(i, { name: "triangle-up" }),
-              onClick: p
+              className: t.increase,
+              icon: /* @__PURE__ */ r(c, { name: "triangle-up" }),
+              onClick: u
             }
           ),
-          /* @__PURE__ */ a(
-            o,
+          /* @__PURE__ */ r(
+            s,
             {
               type: "button",
               variant: "secondary",
-              "aria-label": d,
+              "aria-label": o,
               disabled: n.disabled || n.readOnly,
-              className: c.decrease,
-              icon: /* @__PURE__ */ a(i, { name: "triangle-down" }),
-              onClick: b
+              className: t.decrease,
+              icon: /* @__PURE__ */ r(c, { name: "triangle-down" }),
+              onClick: m
             }
           )
         ]
@@ -59,5 +57,5 @@ const E = "styles_numeric_dzUSE", R = "styles_increase_5S-Jo", g = "styles_decre
   }
 );
 export {
-  C as Numeric
+  k as Numeric
 };

package/dist/components/Fields/Range.d.ts

@@ -10,7 +10,7 @@ export type RangeProps = Omit<BaseInputProps, 'min' | 'max' | 'value' | 'default
     defaultValue?: number;
     ticks?: TickMarksProps['ticks'];
 };
-export declare const Range: React.ForwardRefExoticComponent<Omit<BaseInputProps, "max" | "min" | "defaultValue" | "value"> & {
+export declare const Range: React.ForwardRefExoticComponent<Omit<BaseInputProps, "defaultValue" | "value" | "max" | "min"> & {
     min?: number;
     max?: number;
     value?: number;

package/dist/components/Fields/Range.js

@@ -1,54 +1,54 @@
-import { jsxs as _, jsx as a } from "react/jsx-runtime";
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
 import N from "classnames";
 import R, { useRef as x, useState as T, useEffect as j, useCallback as P } from "react";
 import { cssProps as V, wrapNode as A } from "../../utils/helpers.js";
-import { V as E } from "../../ValidationTooltip-N4SQpl9r.js";
-const J = "styles_range_j9iED", D = "styles_range_thumb_6aftN", F = "styles_range_wrapper_LTcAf", H = "styles_range_track_HdlJx", L = "styles_ticks_YaeJb", n = {
-  range: J,
-  range_thumb: D,
-  range_wrapper: F,
-  range_track: H,
-  ticks: L
+import { V as C } from "../../ValidationTooltip-N4SQpl9r.js";
+const E = "styles_range_j9iED", J = "styles_range_thumb_6aftN", D = "styles_range_wrapper_LTcAf", F = "styles_range_track_HdlJx", H = "styles_ticks_YaeJb", s = {
+  range: E,
+  range_thumb: J,
+  range_wrapper: D,
+  range_track: F,
+  ticks: H
 };
-function f(r, t, e, s) {
-  r == null || r.style.setProperty("--progress", `${(s - t) / (e - t)}`);
+function _(a, r, t, n) {
+  a?.style.setProperty("--progress", `${(n - r) / (t - r)}`);
 }
-const M = ({ ticks: r }) => {
-  const t = typeof r == "number" ? [...Array(r)] : r;
-  return t.length < 2 ? null : /* @__PURE__ */ a("ul", { "data-range-ticks": !0, className: n.ticks, children: t.map((e, s) => /* @__PURE__ */ a("li", { children: e !== void 0 && /* @__PURE__ */ a("small", { children: e }) }, s)) });
-}, B = R.forwardRef(
-  ({ size: r, height: t, error: e, ticks: s, className: m, style: y, children: u, onChange: c, ...i }, h) => {
-    const { min: l = 0, max: o = 100, defaultValue: v = 50, value: p = v } = i, d = x(null), [k, b] = T(null);
+const L = ({ ticks: a }) => {
+  const r = typeof a == "number" ? [...Array(a)] : a;
+  return r.length < 2 ? null : /* @__PURE__ */ e("ul", { "data-range-ticks": !0, className: s.ticks, children: r.map((t, n) => /* @__PURE__ */ e("li", { children: t !== void 0 && /* @__PURE__ */ e("small", { children: t }) }, n)) });
+}, z = R.forwardRef(
+  ({ size: a, height: r, error: t, ticks: n, className: f, style: h, children: d, onChange: u, ...c }, y) => {
+    const { min: l = 0, max: o = 100, defaultValue: v = 50, value: g = v } = c, i = x(null), [k, b] = T(null);
     j(() => {
-      f(d.current, l, o, p);
-    }, [l, o, p]);
+      _(i.current, l, o, g);
+    }, [l, o, g]);
     const w = P(
-      (g) => {
-        f(d.current, l, o, parseFloat(g.currentTarget.value)), c == null || c(g);
+      (m) => {
+        _(i.current, l, o, parseFloat(m.currentTarget.value)), u?.(m);
       },
-      [l, o, c]
+      [l, o, u]
     );
-    return /* @__PURE__ */ _(
+    return /* @__PURE__ */ p(
       "div",
       {
-        ref: d,
+        ref: i,
         "data-range": !0,
-        "data-disabled": i.disabled,
-        "data-invalid": e ? !0 : void 0,
-        className: N(n.range, m),
-        style: { ...y, ...V({ size: r, height: t }) },
+        "data-disabled": c.disabled,
+        "data-invalid": t ? !0 : void 0,
+        className: N(s.range, f),
+        style: { ...h, ...V({ size: a, height: r }) },
         children: [
-          /* @__PURE__ */ _("div", { "data-range-wrapper": !0, className: n.range_wrapper, children: [
-            /* @__PURE__ */ a("div", { "data-range-track": !0, className: n.range_track }),
-            /* @__PURE__ */ a("div", { ref: b, "data-range-thumb": !0, className: n.range_thumb, children: u !== void 0 && A(u, "small") }),
-            /* @__PURE__ */ a(E, { content: e, placement: "top", anchor: k, children: /* @__PURE__ */ a("input", { ...i, ref: h, type: "range", onChange: w }) })
+          /* @__PURE__ */ p("div", { "data-range-wrapper": !0, className: s.range_wrapper, children: [
+            /* @__PURE__ */ e("div", { "data-range-track": !0, className: s.range_track }),
+            /* @__PURE__ */ e("div", { ref: b, "data-range-thumb": !0, className: s.range_thumb, children: d !== void 0 && A(d, "small") }),
+            /* @__PURE__ */ e(C, { content: t, placement: "top", anchor: k, children: /* @__PURE__ */ e("input", { ...c, ref: y, type: "range", onChange: w }) })
           ] }),
-          s !== void 0 && /* @__PURE__ */ a(M, { ticks: s })
+          n !== void 0 && /* @__PURE__ */ e(L, { ticks: n })
         ]
       }
     );
   }
 );
 export {
-  B as Range
+  z as Range
 };

package/dist/components/Flex/Flex.d.ts

@@ -19,4 +19,4 @@ export declare const Flex: <T extends React.ElementType = "div">(props: {
     wrap?: React.CSSProperties["flexWrap"];
     marginStart?: React.CSSProperties["marginBlockStart"];
     marginEnd?: React.CSSProperties["marginBlockEnd"];
-} & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "direction" | "as" | "align" | "wrap" | "justify" | "marginStart" | "marginEnd" | "gap"> & React.RefAttributes<unknown>) => React.ReactElement | null;
+} & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "as" | "align" | "wrap" | "justify" | "marginStart" | "marginEnd" | "direction" | "gap"> & React.RefAttributes<unknown>) => React.ReactElement | null;

package/dist/components/Gallery/Gallery.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { CompositeProps } from '@floating-ui/react';
+export type GalleryProps = React.HTMLAttributes<HTMLDivElement> & Omit<CompositeProps, 'cols'> & {
+    cols?: number | 'auto';
+    gap?: React.CSSProperties['gap'];
+    itemSize?: React.CSSProperties['width'];
+    objectFit?: React.CSSProperties['objectFit'];
+    marginStart?: React.CSSProperties['marginBlockStart'];
+    marginEnd?: React.CSSProperties['marginBlockEnd'];
+};
+export declare const Gallery: ({ gap, loop, cols, itemSize, objectFit: imageObjectFit, marginStart, marginEnd, className, style, children, ...props }: GalleryProps) => import("react/jsx-runtime").JSX.Element;