@konstructio/ui 0.1.2-alpha.105 → 0.1.2-alpha.107

package/dist/{DropdownButton-DfNojmCW.js → DropdownButton-D4QlKGg7.js}

@@ -1,8 +1,8 @@
-import { o as Ae } from "./rolldown-runtime-Ck3dxwZt.js";
-import { t as Le } from "./prop-types-CfEYxTbR.js";
+import { o as Ae } from "./rolldown-runtime-Dw9YIBcH.js";
+import { t as Le } from "./prop-types-BCUW56rg.js";
 import { a as D, n as Fe } from "./dist-xCbHbMLA.js";
 import { n as Ne, t as se } from "./dist-CCdbu9GU.js";
-import { t as A } from "./utils-Cx-WzRZF.js";
+import { t as A } from "./utils-B-6R7kNE.js";
 import { i as le, r as g, t as Ke } from "./dist-D-yS0HN8.js";
 import { t as ae } from "./dist-DYIabsrY.js";
 import { t as je } from "./dist-D5XYRjmR.js";
@@ -11,10 +11,10 @@ import { n as Ue, r as Be, t as $e } from "./es2015-CoHq2g4y.js";
 import { t as Ve } from "./dist-BUocnzkM.js";
 import { t as ze } from "./Combination-CnMM05mt.js";
 import { Button as We } from "./components/Button/Button.js";
-import { t as Ye } from "./dist-CzKqHuqJ2.js";
-import { t as Xe } from "./dist-DGOjiAnB2.js";
-import { a as de, i as He, r as qe, t as Ze } from "./dist-DFCz63oC2.js";
-import { n as Je, r as fe, t as Qe } from "./dist-BdobXn93.js";
+import { t as Ye } from "./dist-DwxO2RoR.js";
+import { t as Xe } from "./dist-DGOjiAnB.js";
+import { a as de, i as He, r as qe, t as Ze } from "./dist-9WbMf_jT.js";
+import { n as Je, r as fe, t as Qe } from "./dist-CszFjHAP.js";
 import * as i from "react";
 import ce, { forwardRef as et } from "react";
 import { jsx as s, jsxs as ie } from "react/jsx-runtime";

package/dist/{FlagSelectorList-CkTR3j6O.js → FlagSelectorList-tYZNl-tz.js}

@@ -1,5 +1,5 @@
-import { t as N } from "./utils-Cx-WzRZF.js";
-import { Typography as W } from "./components/Typography/Typography.js";
+import { t as N } from "./utils-B-6R7kNE.js";
+import { Typography as L } from "./components/Typography/Typography.js";
 import { usePhoneNumberContext as K } from "./components/PhoneNumberInput/contexts/phone-number.hook.js";
 import { TruncateText as $ } from "./components/PhoneNumberInput/components/TruncateText/TruncateText.js";
 import * as M from "react";
@@ -61,22 +61,24 @@ function I(l, t, e) {
     s = h;
   }, o;
 }
-function L(l, t) {
+function V(l, t) {
   if (l === void 0) throw new Error(`Unexpected undefined${t ? `: ${t}` : ""}`);
   return l;
 }
 var Q = (l, t) => Math.abs(l - t) < 1.01, X = (l, t, e) => {
   let s;
-  return function(...i) {
+  return Object.assign(function(...i) {
     l.clearTimeout(s), s = l.setTimeout(() => t.apply(this, i), e);
-  };
+  }, { cancel: () => {
+    l.clearTimeout(s);
+  } });
 }, T, D = () => {
   if (T !== void 0) return T;
   if (typeof navigator > "u") return T = !1;
   if (/iP(hone|od|ad)/.test(navigator.userAgent)) return T = !0;
   const l = navigator.maxTouchPoints;
   return T = navigator.platform === "MacIntel" && l !== void 0 && l > 0;
-}, V = (l) => {
+}, W = (l) => {
   const { offsetWidth: t, offsetHeight: e } = l;
   return {
     width: t,
@@ -98,7 +100,7 @@ var Q = (l, t) => Math.abs(l - t) < 1.01, X = (l, t, e) => {
       height: Math.round(a)
     });
   };
-  if (i(V(e)), !s.ResizeObserver) return () => {
+  if (i(W(e)), !s.ResizeObserver) return () => {
   };
   const n = new s.ResizeObserver((o) => {
     const h = () => {
@@ -113,7 +115,7 @@ var Q = (l, t) => Math.abs(l - t) < 1.01, X = (l, t, e) => {
           return;
         }
       }
-      i(V(e));
+      i(W(e));
     };
     l.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(h) : h();
   });
@@ -131,7 +133,7 @@ var Q = (l, t) => Math.abs(l - t) < 1.01, X = (l, t, e) => {
     o = e(s), h?.(), t(o, r);
   }, d = a(!0), c = a(!1);
   return s.addEventListener("scroll", d, C), n && s.addEventListener("scrollend", c, C), () => {
-    s.removeEventListener("scroll", d), n && s.removeEventListener("scrollend", c);
+    s.removeEventListener("scroll", d), n && s.removeEventListener("scrollend", c), h?.cancel();
   };
 }, it = (l, t) => st(l, t, (e) => {
   const { horizontal: s, isRtl: i } = l.options;
@@ -175,7 +177,7 @@ var Q = (l, t) => Math.abs(l - t) < 1.01, X = (l, t, e) => {
               }
               return;
             }
-            this.shouldMeasureDuringScroll(h) && this.resizeItem(h, this.options.measureElement(o, i, this));
+            this.isIndexInRange(h) && this.shouldMeasureDuringScroll(h) && this.resizeItem(h, this.options.measureElement(o, i, this));
           };
           this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(n) : n();
         });
@@ -284,7 +286,7 @@ var Q = (l, t) => Math.abs(l - t) < 1.01, X = (l, t, e) => {
         this.range ? this.range.endIndex : null
       ]
     }), this.cleanup = () => {
-      this.unsubs.filter(Boolean).forEach((t) => t()), this.unsubs = [], this.observer.disconnect(), this.rafId != null && this.targetWindow && (this.targetWindow.cancelAnimationFrame(this.rafId), this.rafId = null), this.scrollState = null, this._iosDeferredAdjustment = 0, this._iosTouching = !1, this._iosJustTouchEnded = !1, this.scrollElement = null, this.targetWindow = null;
+      this.unsubs.filter(Boolean).forEach((t) => t()), this.unsubs = [], this.observer.disconnect(), this.rafId != null && this.targetWindow && (this.targetWindow.cancelAnimationFrame(this.rafId), this.rafId = null), this.scrollState = null, this.isScrolling = !1, this.scrollDirection = null, this._iosDeferredAdjustment = 0, this._iosTouching = !1, this._iosJustTouchEnded = !1, this.scrollElement = null, this.targetWindow = null;
     }, this._didMount = () => () => {
       this.cleanup();
     }, this._willUpdate = () => {
@@ -360,7 +362,7 @@ var Q = (l, t) => Math.abs(l - t) < 1.01, X = (l, t, e) => {
       lanes: o,
       laneAssignmentMode: h,
       gap: a
-    }), { key: !1 }), this.getMeasurements = I(() => [this.getMeasurementOptions(), this.itemSizeCacheVersion], ({ count: t, paddingStart: e, scrollMargin: s, getItemKey: i, enabled: n, lanes: o, laneAssignmentMode: h, gap: a }, d) => {
+    }), { key: !1 }), this.isIndexInRange = (t) => t >= 0 && t < this.options.count, this.getMeasurements = I(() => [this.getMeasurementOptions(), this.itemSizeCacheVersion], ({ count: t, paddingStart: e, scrollMargin: s, getItemKey: i, enabled: n, lanes: o, laneAssignmentMode: h, gap: a }, d) => {
       const c = this.itemSizeCache;
       if (!n)
         return this.measurementsCache = [], this.itemSizeCache.clear(), this.laneAssignments.clear(), [];
@@ -476,11 +478,13 @@ var Q = (l, t) => Math.abs(l - t) < 1.01, X = (l, t, e) => {
         });
         return;
       }
-      const e = this.indexFromElement(t), s = this.options.getItemKey(e), i = this.elementsCache.get(s);
+      const e = this.indexFromElement(t);
+      if (!this.isIndexInRange(e)) return;
+      const s = this.options.getItemKey(e), i = this.elementsCache.get(s);
       i !== t && (i && this.observer.unobserve(i), this.observer.observe(t), this.elementsCache.set(s, t)), (!this.isScrolling || this.scrollState) && this.shouldMeasureDuringScroll(e) && this.resizeItem(e, this.options.measureElement(t, void 0, this));
     }, this.resizeItem = (t, e) => {
       var s, i;
-      if (t < 0 || t >= this.options.count) return;
+      if (!this.isIndexInRange(t)) return;
       let n, o, h;
       const a = this._flatMeasurements;
       if (this.options.lanes === 1 && a !== null)
@@ -500,7 +504,9 @@ var Q = (l, t) => Math.abs(l - t) < 1.01, X = (l, t, e) => {
           end: o + n,
           lane: 0
         }, c, this) : S);
-        (this.pendingMin === null || t < this.pendingMin) && (this.pendingMin = t), this.itemSizeCache.set(h, e), this.itemSizeCacheVersion++, r ? this.applyScrollAdjustment(this.getTotalSize() - f) : p && this.applyScrollAdjustment(c), this.notify(!1);
+        (this.pendingMin === null || t < this.pendingMin) && (this.pendingMin = t), this.itemSizeCache.set(h, e), this.itemSizeCacheVersion++;
+        let u = !1;
+        r ? u = this.applyScrollAdjustment(this.getTotalSize() - f) : p && (u = this.applyScrollAdjustment(c)), this.notify(u);
       }
     }, this.getVirtualItems = I(() => [this.getVirtualIndexes(), this.getMeasurements()], (t, e) => {
       const s = [];
@@ -515,8 +521,8 @@ var Q = (l, t) => Math.abs(l - t) < 1.01, X = (l, t, e) => {
     }), this.getVirtualItemForOffset = (t) => {
       const e = this.getMeasurements();
       if (e.length === 0) return;
-      const s = this._flatMeasurements, i = this.options.lanes === 1 && s != null;
-      return L(e[P(0, e.length - 1, i ? (n) => s[n * 2] : (n) => L(e[n]).start, t)]);
+      const s = this._flatMeasurements, i = this.options.lanes === 1 && s != null, n = P(0, e.length - 1, i ? (o) => s[o * 2] : (o) => V(e[o]).start, t);
+      return V(e[n]);
     }, this.getMaxScrollOffset = () => {
       if (!this.scrollElement) return 0;
       if ("scrollHeight" in this.scrollElement) return this.options.horizontal ? this.scrollElement.scrollWidth - this.scrollElement.clientWidth : this.scrollElement.scrollHeight - this.scrollElement.clientHeight;
@@ -534,9 +540,10 @@ var Q = (l, t) => Math.abs(l - t) < 1.01, X = (l, t, e) => {
       t = Math.max(0, Math.min(t, this.options.count - 1));
       const s = this.getSize(), i = this.getScrollOffset(), n = this.measurementsCache[t];
       if (!n) return;
-      if (e === "auto") if (n.end >= i + s - this.options.scrollPaddingEnd) e = "end";
-      else if (n.start <= i + this.options.scrollPaddingStart) e = "start";
-      else return [i, e];
+      if (e === "auto")
+        if (n.end >= i + s - this.options.scrollPaddingEnd) e = "end";
+        else if (n.start <= i + this.options.scrollPaddingStart) e = "start";
+        else return [i, e];
       if (e === "end" && t === this.options.count - 1) return [this.getMaxScrollOffset(), e];
       const o = e === "end" ? n.end + this.options.scrollPaddingEnd : n.start - this.options.scrollPaddingStart;
       return [this.getOffsetForAlignment(o, e, n.size), e];
@@ -633,10 +640,10 @@ var Q = (l, t) => Math.abs(l - t) < 1.01, X = (l, t, e) => {
     }, this.setOptions(l);
   }
   applyScrollAdjustment(l, t) {
-    l !== 0 && (process.env.NODE_ENV !== "production" && this.options.debug && console.info("correction", l), D() && (this.isScrolling || this._iosTouching || this._iosJustTouchEnded) ? this._iosDeferredAdjustment += l : (this._scrollToOffset(this.getScrollOffset(), {
+    return l === 0 ? !1 : (process.env.NODE_ENV !== "production" && this.options.debug && console.info("correction", l), D() && (this.isScrolling || this._iosTouching || this._iosJustTouchEnded) ? (this._iosDeferredAdjustment += l, !1) : (this._scrollToOffset(this.getScrollOffset(), {
       adjustments: this.scrollAdjustments += l,
       behavior: t
-    }), this.scrollOffset !== null && (this.scrollOffset += this.scrollAdjustments, this.scrollOffset < 0 && (this.scrollOffset = 0), this.scrollAdjustments = 0)));
+    }), this.scrollOffset !== null && (this.scrollOffset += this.scrollAdjustments, this.scrollOffset < 0 && (this.scrollOffset = 0), this.scrollAdjustments = 0), !0));
   }
   scheduleScrollReconcile() {
     if (!this.targetWindow) {
@@ -811,7 +818,7 @@ var bt = ({ showFlagOnSearch: l, showNameOnSearch: t }) => {
       className: "relative",
       children: /* @__PURE__ */ x("li", {
         className: "w-full flex items-center h-10 select-none px-6",
-        children: /* @__PURE__ */ x(W, {
+        children: /* @__PURE__ */ x(L, {
           variant: "body2",
           component: "span",
           className: "flex gap-2 items-center text-left",
@@ -836,7 +843,7 @@ var bt = ({ showFlagOnSearch: l, showNameOnSearch: t }) => {
           children: /* @__PURE__ */ x("button", {
             className: N("w-full", "h-full", "cursor-pointer", "px-6", "hover:bg-gray-50", "transition-colors", "duration-150", "focus-visible:outline-0", "hover:outline-gray-100", "focus:bg-gray-50", "dark:hover:bg-metal-700"),
             onClick: () => n(d),
-            children: /* @__PURE__ */ U(W, {
+            children: /* @__PURE__ */ U(L, {
               variant: "body2",
               component: "span",
               className: "flex gap-2 items-center text-left",

package/dist/{HamburgerTrigger-DRylBL2d.js → HamburgerTrigger-B_NGSZ2r.js}

@@ -1,39 +1,39 @@
-import { o as m } from "./rolldown-runtime-Ck3dxwZt.js";
-import { t as g } from "./prop-types-CfEYxTbR.js";
-import { t as c } from "./dist-DX0sBG3Q.js";
-import { t as y } from "./utils-Cx-WzRZF.js";
+import { o as m } from "./rolldown-runtime-Dw9YIBcH.js";
+import { t as c } from "./prop-types-BCUW56rg.js";
+import { t as g } from "./dist-DX0sBG3Q.js";
+import { t as y } from "./utils-B-6R7kNE.js";
 import { hamburgerTriggerVariants as d } from "./components/Sidebar/components/HamburgerTrigger/HamburgerTrigger.variants.js";
 import a, { forwardRef as v } from "react";
 import { jsx as u, jsxs as b } from "react/jsx-runtime";
-var p = /* @__PURE__ */ m(g());
+var p = /* @__PURE__ */ m(c());
 function s() {
   return s = Object.assign || function(r) {
     for (var n = 1; n < arguments.length; n++) {
-      var e = arguments[n];
-      for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && (r[t] = e[t]);
+      var t = arguments[n];
+      for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && (r[e] = t[e]);
     }
     return r;
   }, s.apply(this, arguments);
 }
 function h(r, n) {
   if (r == null) return {};
-  var e = x(r, n), t, o;
+  var t = x(r, n), e, o;
   if (Object.getOwnPropertySymbols) {
     var i = Object.getOwnPropertySymbols(r);
     for (o = 0; o < i.length; o++)
-      t = i[o], !(n.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(r, t) && (e[t] = r[t]);
+      e = i[o], !(n.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(r, e) && (t[e] = r[e]);
   }
-  return e;
+  return t;
 }
 function x(r, n) {
   if (r == null) return {};
-  var e = {}, t = Object.keys(r), o, i;
-  for (i = 0; i < t.length; i++)
-    o = t[i], !(n.indexOf(o) >= 0) && (e[o] = r[o]);
-  return e;
+  var t = {}, e = Object.keys(r), o, i;
+  for (i = 0; i < e.length; i++)
+    o = e[i], !(n.indexOf(o) >= 0) && (t[o] = r[o]);
+  return t;
 }
 var l = v(function(r, n) {
-  var e = r.color, t = e === void 0 ? "currentColor" : e, o = r.size, i = o === void 0 ? 24 : o, f = h(r, ["color", "size"]);
+  var t = r.color, e = t === void 0 ? "currentColor" : t, o = r.size, i = o === void 0 ? 24 : o, f = h(r, ["color", "size"]);
   return /* @__PURE__ */ a.createElement("svg", s({
     ref: n,
     xmlns: "http://www.w3.org/2000/svg",
@@ -41,7 +41,7 @@ var l = v(function(r, n) {
     height: i,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: t,
+    stroke: e,
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
@@ -67,17 +67,17 @@ l.propTypes = {
   size: p.default.oneOfType([p.default.string, p.default.number])
 };
 l.displayName = "Menu";
-var O = ({ isOpen: r, onClick: n, className: e }) => /* @__PURE__ */ b("button", {
+var O = ({ isOpen: r, onClick: n, className: t, openNavigationLabel: e = "Open navigation" }) => /* @__PURE__ */ b("button", {
   type: "button",
-  "aria-label": "Open navigation",
+  "aria-label": e,
   "aria-expanded": r,
   "aria-haspopup": "menu",
-  className: y(d({ className: e })),
+  className: y(d({ className: t })),
   onClick: n,
   children: [/* @__PURE__ */ u(l, {
     size: 20,
     "aria-hidden": "true"
-  }), /* @__PURE__ */ u(c, { children: "Open navigation" })]
+  }), /* @__PURE__ */ u(g, { children: e })]
 });
 O.displayName = "KonstructSidebarHamburgerTrigger";
 export {

package/dist/{ImageUpload-DiwymQcU.js → ImageUpload-D7HKSXK8.js}

@@ -1,85 +1,86 @@
-import { t as o } from "./utils-Cx-WzRZF.js";
-import { LoaderIcon as _ } from "./assets/icons/components/Loader.js";
-import { PhotoLibraryIcon as ee } from "./assets/icons/components/PhotoLibrary.js";
-import { WarningIcon as te } from "./assets/icons/components/Warning.js";
-import { Button as F } from "./components/Button/Button.js";
-import { t as D } from "./x-a_LpoXzG2.js";
-import { helperTextVariants as ae, imageUploadVariants as re, inputContainerVariants as le, inputFieldVariants as ie, labelVariants as se } from "./components/ImageUpload/ImageUpload.variants.js";
-import { useEffect as ne, useId as ce, useRef as V, useState as N } from "react";
-import { Fragment as P, jsx as e, jsxs as l } from "react/jsx-runtime";
+import { t as c } from "./utils-B-6R7kNE.js";
+import { LoaderIcon as ee } from "./assets/icons/components/Loader.js";
+import { PhotoLibraryIcon as te } from "./assets/icons/components/PhotoLibrary.js";
+import { WarningIcon as ae } from "./assets/icons/components/Warning.js";
+import { Button as b } from "./components/Button/Button.js";
+import { t as P } from "./x-a_LpoXzG.js";
+import { helperTextVariants as re, imageUploadVariants as le, inputContainerVariants as ie, inputFieldVariants as se, labelVariants as ne } from "./components/ImageUpload/ImageUpload.variants.js";
+import { useEffect as oe, useId as ce, useRef as S, useState as g } from "react";
+import { Fragment as T, jsx as e, jsxs as l } from "react/jsx-runtime";
 var t = /* @__PURE__ */ (function(n) {
   return n.Default = "default", n.Uploading = "uploading", n.Complete = "complete", n.Error = "error", n;
-})({}), oe = ({ className: n, error: y, fileName: b, fileSize: z, fileUrl: E, helperText: R = "Logo should be 32 x 32 pixels with transparent background (larger images will be downscaled proportionally to fit). Accepted file type is SVG, PNG, JPEG. Max file size is 5MB.", isRequired: S = !1, label: p = "Item logo", labelClassName: T, labelWrapperClassName: L, name: A, onChange: k, onRemove: J, status: v = t.Default, theme: f, uploadButtonText: $ = "Upload logo", accept: M = "image/svg+xml,image/png,image/jpeg,image/jpg", maxSize: K = 5 * 1024 * 1024 }) => {
-  const U = ce(), h = V(null), c = V(null), [W, d] = N(v), [H, B] = N(E), [X, C] = N(b), [q, G] = N(z);
-  ne(() => () => {
-    c.current && clearTimeout(c.current);
+})({}), de = ({ className: n, error: z, fileName: E, fileSize: I, fileUrl: M, helperText: R = "Logo should be 32 x 32 pixels with transparent background (larger images will be downscaled proportionally to fit). Accepted file type is SVG, PNG, JPEG. Max file size is 5MB.", isRequired: U = !1, label: N = "Item logo", labelClassName: L, labelWrapperClassName: A, name: $, onChange: k, onRemove: J, status: v = t.Default, theme: f, uploadButtonText: K = "Upload logo", accept: B = "image/svg+xml,image/png,image/jpeg,image/jpg", maxSize: W = 5242880 }) => {
+  const w = ce(), C = `${w}-message`, h = S(null), o = S(null), [H, d] = g(v), [X, G] = g(M), [q, j] = g(E), [O, D] = g(I);
+  oe(() => () => {
+    o.current && clearTimeout(o.current);
   }, []);
-  const a = v !== t.Default ? v : W, w = E ?? H, m = b ?? X, x = z ?? q, g = !!y || a === t.Error, O = (i) => {
+  const a = v !== t.Default ? v : H, F = M ?? X, m = E ?? q, x = I ?? O, u = !!z || a === t.Error, Q = (i) => {
     const r = i.target.files?.[0];
     if (!r) return;
-    if (!M.split(",").map((s) => s.trim()).some((s) => {
+    if (!B.split(",").map((s) => s.trim()).some((s) => {
       if (s.includes("*")) {
-        const Z = s.split("/")[0];
-        return r.type.startsWith(Z);
+        const _ = s.split("/")[0];
+        return r.type.startsWith(_);
       }
       return r.type === s;
     })) {
       d(t.Error), k?.(i);
       return;
     }
-    if (r.size > K) {
+    if (r.size > W) {
       d(t.Error), k?.(i);
       return;
     }
-    d(t.Uploading), C(r.name), G(Y(r.size));
-    const u = new FileReader();
-    u.onloadend = () => {
-      B(u.result), c.current = setTimeout(() => {
+    d(t.Uploading), j(r.name), D(Z(r.size));
+    const p = new FileReader();
+    p.onloadend = () => {
+      G(p.result), o.current = setTimeout(() => {
         d(t.Complete);
       }, 500);
-    }, u.readAsDataURL(r), k?.(i);
-  }, I = () => {
-    c.current && (clearTimeout(c.current), c.current = null), B(void 0), C(void 0), G(void 0), d(t.Default), h.current && (h.current.value = ""), J?.();
-  }, Q = () => {
+    }, p.readAsDataURL(r), k?.(i);
+  }, V = () => {
+    o.current && (clearTimeout(o.current), o.current = null), G(void 0), j(void 0), D(void 0), d(t.Default), h.current && (h.current.value = ""), J?.();
+  }, Y = () => {
     h.current?.click();
-  }, Y = (i) => {
+  }, Z = (i) => {
     if (i === 0) return "0 Bytes";
-    const r = 1024, u = [
+    const r = 1024, p = [
       "Bytes",
       "KB",
       "MB",
       "GB"
     ], s = Math.floor(Math.log(i) / Math.log(r));
-    return `${parseFloat((i / Math.pow(r, s)).toFixed(2))}${u[s]}`;
-  }, j = y || (g ? "Invalid file format. Accepted file type is SVG, PNG, JPEG. Max file size is 5MB." : R || "Logo should be 32 x 32 pixels with transparent background (larger images will be downscaled proportionally to fit). Accepted file type is SVG, PNG, JPEG. Max file size is 5MB.");
+    return `${parseFloat((i / Math.pow(r, s)).toFixed(2))}${p[s]}`;
+  }, y = z || (u ? "Invalid file format. Accepted file type is SVG, PNG, JPEG. Max file size is 5MB." : R || "Logo should be 32 x 32 pixels with transparent background (larger images will be downscaled proportionally to fit). Accepted file type is SVG, PNG, JPEG. Max file size is 5MB.");
   return /* @__PURE__ */ l("div", {
-    className: o(re({
+    className: c(le({
       status: a,
       className: n
     })),
     "data-theme": f,
     children: [
-      p && /* @__PURE__ */ e("div", {
-        className: o(L),
+      N && /* @__PURE__ */ e("div", {
+        className: c(A),
         children: /* @__PURE__ */ l("label", {
-          htmlFor: U,
-          className: o(se({ className: T }), "cursor-pointer"),
-          children: [p, S && /* @__PURE__ */ e("span", {
+          htmlFor: w,
+          className: c(ne({ className: L }), "cursor-pointer"),
+          children: [N, U && /* @__PURE__ */ e("span", {
+            "aria-hidden": "true",
             className: "text-red-600 dark:text-red-500 text-xs mt-0.5",
             children: "*"
           })]
         })
       }),
       /* @__PURE__ */ l("div", {
-        className: o(le({ status: a })),
+        className: c(ie({ status: a })),
         children: [
           /* @__PURE__ */ l("div", {
-            className: o(ie({ status: a }), {
-              "justify-between": g,
-              "justify-start": !g
+            className: c(se({ status: a }), {
+              "justify-between": u,
+              "justify-start": !u
             }),
             children: [
-              a === t.Uploading && /* @__PURE__ */ l(P, { children: [/* @__PURE__ */ e(_, {
+              a === t.Uploading && /* @__PURE__ */ l(T, { children: [/* @__PURE__ */ e(ee, {
                 size: 20,
                 className: "shrink-0 animate-spin text-metal-400"
               }), m && /* @__PURE__ */ l("div", {
@@ -92,10 +93,10 @@ var t = /* @__PURE__ */ (function(n) {
                   children: x
                 })]
               })] }),
-              a === t.Complete && w && /* @__PURE__ */ l(P, { children: [/* @__PURE__ */ e("div", {
+              a === t.Complete && F && /* @__PURE__ */ l(T, { children: [/* @__PURE__ */ e("div", {
                 className: "w-8 h-8 shrink-0 relative",
                 children: /* @__PURE__ */ e("img", {
-                  src: w,
+                  src: F,
                   alt: m || "Uploaded image",
                   className: "w-full h-full object-contain"
                 })
@@ -109,53 +110,54 @@ var t = /* @__PURE__ */ (function(n) {
                   children: x
                 })]
               })] }),
-              (a === t.Default || a === t.Error && !w) && /* @__PURE__ */ e("div", {
+              (a === t.Default || a === t.Error && !F) && /* @__PURE__ */ e("div", {
                 className: "w-8 h-8 shrink-0 flex items-center justify-center",
-                children: /* @__PURE__ */ e(ee, { className: "w-8 h-8 text-slate-400 dark:text-slate-500 kubefirst-dark:text-slate-500" })
+                children: /* @__PURE__ */ e(te, { className: "w-8 h-8 text-slate-400 dark:text-slate-500 kubefirst-dark:text-slate-500" })
               }),
-              g && /* @__PURE__ */ e("div", {
+              u && /* @__PURE__ */ e("div", {
                 className: "shrink-0",
-                children: /* @__PURE__ */ e(te, { className: "w-5 h-5 text-red-700 dark:text-red-500 kubefirst-dark:text-red-500" })
+                children: /* @__PURE__ */ e(ae, { className: "w-5 h-5 text-red-700 dark:text-red-500 kubefirst-dark:text-red-500" })
               })
             ]
           }),
-          (a === t.Default || a === t.Error) && /* @__PURE__ */ e(F, {
+          (a === t.Default || a === t.Error) && /* @__PURE__ */ e(b, {
             variant: "secondary",
-            onClick: Q,
+            onClick: Y,
             theme: f,
             className: "h-10 px-4 py-2 shrink-0",
-            children: $
+            children: K
           }),
-          a === t.Uploading && /* @__PURE__ */ e(F, {
+          a === t.Uploading && /* @__PURE__ */ e(b, {
             variant: "secondary",
             shape: "circle",
             size: "medium",
-            onClick: I,
+            onClick: V,
             theme: f,
             className: "shrink-0",
             "aria-label": "Cancel upload",
-            children: /* @__PURE__ */ e(D, { className: "w-6 h-6" })
+            children: /* @__PURE__ */ e(P, { className: "w-6 h-6" })
           }),
-          a === t.Complete && /* @__PURE__ */ e(F, {
+          a === t.Complete && /* @__PURE__ */ e(b, {
             variant: "secondary",
             shape: "circle",
             size: "medium",
-            onClick: I,
+            onClick: V,
             theme: f,
             className: "shrink-0",
             "aria-label": "Remove file",
-            children: /* @__PURE__ */ e(D, { className: "w-6 h-6" })
+            children: /* @__PURE__ */ e(P, { className: "w-6 h-6" })
           })
         ]
       }),
-      j && /* @__PURE__ */ l("div", {
+      y && /* @__PURE__ */ l("div", {
         className: "flex w-full gap-2",
         children: [
           /* @__PURE__ */ e("div", {
             className: "flex-1 min-w-0",
             children: /* @__PURE__ */ e("p", {
-              className: o(ae({ status: a })),
-              children: j
+              id: C,
+              className: c(re({ status: a })),
+              children: y
             })
           }),
           (a === t.Default || a === t.Error) && /* @__PURE__ */ e("div", { className: "shrink-0 w-29" }),
@@ -164,18 +166,21 @@ var t = /* @__PURE__ */ (function(n) {
       }),
       /* @__PURE__ */ e("input", {
         ref: h,
-        id: U,
+        id: w,
         type: "file",
-        name: A,
-        accept: M,
-        onChange: O,
+        name: $,
+        accept: B,
+        onChange: Q,
         className: "hidden",
-        "aria-label": typeof p == "string" ? p : "File upload"
+        "aria-label": N ? void 0 : "File upload",
+        "aria-invalid": u || void 0,
+        "aria-describedby": y ? C : void 0,
+        "aria-required": U || void 0
       })
     ]
   });
 };
-oe.displayName = "KonstructImageUpload";
+de.displayName = "KonstructImageUpload";
 export {
-  oe as t
+  de as t
 };