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

package/README.md

@@ -122,13 +122,13 @@ Alternatively, set `data-theme` directly on the document root — useful when th
 
 ## Components
 
-| Category     | Components                                                                                                                                                                                                                                       |
-| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Forms        | Input, TextArea, Select, Checkbox, Switch, Radio, RadioGroup, RadioCard, Counter, Datepicker, TimePicker, PhoneNumberInput, Range, Slider, Autocomplete, Filter, TagSelect, MultiSelectDropdown, ImageUpload                                       |
-| UI           | Button, Badge, Card, Alert, AlertDialog, Modal, Breadcrumb, Divider, Tag, Tooltip, Toast, Tabs, Typography                                                                                                                                         |
-| Data display | Table, VirtualizedTable, PieChart, ProgressBar, Loading, Spinner                                                                                                                                                                                   |
-| Layout       | Sidebar                                                                                                                                                                                                                                            |
-| Other        | DropdownButton, Command                                                                                                                                                                                                                            |
+| Category     | Components                                                                                                                                                                                                   |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Forms        | Input, TextArea, Select, Checkbox, Switch, Radio, RadioGroup, RadioCard, Counter, Datepicker, TimePicker, PhoneNumberInput, Range, Slider, Autocomplete, Filter, TagSelect, MultiSelectDropdown, ImageUpload |
+| UI           | Button, Badge, Card, CopyButton, Alert, AlertDialog, Modal, Breadcrumb, Divider, Tag, Tooltip, Toast, Tabs, Typography                                                                                       |
+| Data display | Table, VirtualizedTable, PieChart, ProgressBar, Loading, Spinner                                                                                                                                             |
+| Layout       | Sidebar                                                                                                                                                                                                      |
+| Other        | DropdownButton, Command                                                                                                                                                                                      |
 
 Full documentation with live examples is available in the [Storybook](https://konstructio.github.io/konstruct-ui).
 

package/dist/AnimatePresence-C5PSMIZj.js

@@ -0,0 +1,186 @@
+import { a as V, c as W, i as T, n as _, o as k, r as B, s as K } from "./react-DRLuFcbk.js";
+import * as L from "react";
+import { Children as G, isValidElement as Y, useContext as N, useId as O, useInsertionEffect as q, useMemo as F, useRef as y, useState as D } from "react";
+import { Fragment as J, jsx as b } from "react/jsx-runtime";
+function H(e, o) {
+  if (typeof e == "function") return e(o);
+  e != null && (e.current = o);
+}
+function Q(...e) {
+  return (o) => {
+    let t = !1;
+    const s = e.map((u) => {
+      const r = H(u, o);
+      return !t && typeof r == "function" && (t = !0), r;
+    });
+    if (t) return () => {
+      for (let u = 0; u < s.length; u++) {
+        const r = s[u];
+        typeof r == "function" ? r() : H(e[u], null);
+      }
+    };
+  };
+}
+function X(...e) {
+  return L.useCallback(Q(...e), e);
+}
+var Z = class extends L.Component {
+  getSnapshotBeforeUpdate(e) {
+    const o = this.props.childRef.current;
+    if (T(o) && e.isPresent && !this.props.isPresent && this.props.pop !== !1) {
+      const t = o.offsetParent, s = T(t) && t.offsetWidth || 0, u = T(t) && t.offsetHeight || 0, r = getComputedStyle(o), n = this.props.sizeRef.current;
+      n.height = parseFloat(r.height), n.width = parseFloat(r.width), n.top = o.offsetTop, n.left = o.offsetLeft, n.right = s - n.width - n.left, n.bottom = u - n.height - n.top, n.direction = r.direction;
+    }
+    return null;
+  }
+  componentDidUpdate() {
+  }
+  render() {
+    return this.props.children;
+  }
+};
+function ee({ children: e, isPresent: o, anchorX: t, anchorY: s, root: u, pop: r }) {
+  const n = O(), m = y(null), v = y({
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    direction: "ltr"
+  }), { nonce: w } = N(B), i = r !== !1 ? e.props?.ref ?? e?.ref : void 0, R = X(m, i);
+  return q(() => {
+    const { width: c, height: a, top: x, left: C, right: l, bottom: g, direction: S } = v.current;
+    if (o || r === !1 || !m.current || !c || !a) return;
+    const P = S === "rtl", d = t === "left" ? P ? `right: ${l}` : `left: ${C}` : P ? `left: ${C}` : `right: ${l}`, M = s === "bottom" ? `bottom: ${g}` : `top: ${x}`;
+    m.current.dataset.motionPopId = n;
+    const p = document.createElement("style");
+    w && (p.nonce = w);
+    const E = u ?? document.head;
+    return E.appendChild(p), p.sheet && p.sheet.insertRule(`
+          [data-motion-pop-id="${n}"] {
+            position: absolute !important;
+            width: ${c}px !important;
+            height: ${a}px !important;
+            ${d}px !important;
+            ${M}px !important;
+          }
+        `), () => {
+      m.current?.removeAttribute("data-motion-pop-id"), E.contains(p) && E.removeChild(p);
+    };
+  }, [o]), b(Z, {
+    isPresent: o,
+    childRef: m,
+    sizeRef: v,
+    pop: r,
+    children: r === !1 ? e : L.cloneElement(e, { ref: R })
+  });
+}
+var te = ({ children: e, initial: o, isPresent: t, onExitComplete: s, custom: u, presenceAffectsLayout: r, mode: n, anchorX: m, anchorY: v, root: w }) => {
+  const i = K(ne), R = O(), c = y(t), a = y(s);
+  k(() => {
+    c.current = t, a.current = s;
+  });
+  let x = !0, C = F(() => (x = !1, {
+    id: R,
+    initial: o,
+    isPresent: t,
+    custom: u,
+    onExitComplete: (l) => {
+      i.set(l, !0);
+      for (const g of i.values()) if (!g) return;
+      s && s();
+    },
+    register: (l) => (i.set(l, !1), () => {
+      i.delete(l), !c.current && !i.size && a.current?.();
+    })
+  }), [
+    t,
+    i,
+    s
+  ]);
+  return r && x && (C = { ...C }), F(() => {
+    i.forEach((l, g) => i.set(g, !1));
+  }, [t]), L.useEffect(() => {
+    !t && !i.size && s && s();
+  }, [t]), e = b(ee, {
+    pop: n === "popLayout",
+    isPresent: t,
+    anchorX: m,
+    anchorY: v,
+    root: w,
+    children: e
+  }), b(V.Provider, {
+    value: C,
+    children: e
+  });
+};
+function ne() {
+  return /* @__PURE__ */ new Map();
+}
+var I = (e) => e.key || "";
+function j(e) {
+  const o = [];
+  return G.forEach(e, (t) => {
+    Y(t) && o.push(t);
+  }), o;
+}
+var ie = ({ children: e, custom: o, initial: t = !0, onExitComplete: s, presenceAffectsLayout: u = !0, mode: r = "sync", propagate: n = !1, anchorX: m = "left", anchorY: v = "top", root: w }) => {
+  const [i, R] = _(n), c = F(() => j(e), [e]), a = n && !i ? [] : c.map(I), x = y(!0), C = y(c), l = K(() => /* @__PURE__ */ new Map()), g = y(/* @__PURE__ */ new Set()), [S, P] = D(c), [d, M] = D(c);
+  k(() => {
+    n && !i && !d.length && R?.();
+  }, [
+    i,
+    n,
+    d.length,
+    R
+  ]), k(() => {
+    x.current = !1, C.current = c;
+    for (let h = 0; h < d.length; h++) {
+      const f = I(d[h]);
+      a.includes(f) ? (l.delete(f), g.current.delete(f)) : l.get(f) !== !0 && l.set(f, !1);
+    }
+  }, [
+    d,
+    a.length,
+    a.join("-")
+  ]);
+  const p = [];
+  if (c !== S) {
+    let h = [...c], f = 0;
+    for (const $ of d) {
+      const z = a.indexOf(I($));
+      z === -1 ? (h.splice(f++, 0, $), p.push($)) : f = z + p.length + 1;
+    }
+    return r === "wait" && p.length && (h = p), M(j(h)), P(c), null;
+  }
+  process.env.NODE_ENV !== "production" && r === "wait" && d.length > 1 && console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
+  const { forceRender: E } = N(W);
+  return b(J, { children: d.map((h) => {
+    const f = I(h), $ = n && !i ? !1 : c === d || a.includes(f), z = () => {
+      if (g.current.has(f)) return;
+      if (l.has(f))
+        g.current.add(f), l.set(f, !0);
+      else return;
+      let A = !0;
+      l.forEach((U) => {
+        U || (A = !1);
+      }), A && (E?.(), M(C.current), n && R?.(), s && s());
+    };
+    return b(te, {
+      isPresent: $,
+      initial: !x.current || t ? void 0 : !1,
+      custom: o,
+      presenceAffectsLayout: u,
+      mode: r,
+      root: w,
+      onExitComplete: $ ? void 0 : z,
+      anchorX: m,
+      anchorY: v,
+      children: h
+    }, f);
+  }) });
+};
+export {
+  ie as t
+};

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

@@ -11,9 +11,9 @@ 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-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 { a as de, i as Ye, r as Xe, t as He } from "./dist-9WbMf_jT.js";
+import { t as qe } from "./dist-DwxO2RoR.js";
+import { t as Ze } from "./dist-DGOjiAnB.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";
@@ -79,12 +79,12 @@ var ot = Object.defineProperty, p = (n, e) => ot(n, "name", {
 ], at = [...rt, ...pe], cn = {
   ltr: [...Y, "ArrowRight"],
   rtl: [...Y, "ArrowLeft"]
-}, N = "Menu", [X, ct, it] = Ye(N), [S, me] = le(N, [
+}, N = "Menu", [X, ct, it] = qe(N), [S, me] = le(N, [
   it,
   de,
   fe
 ]), Z = de(), ve = fe(), [ut, K] = S(N), [st, J] = S(N), lt = /* @__PURE__ */ p((n) => {
-  const { __scopeMenu: e, open: o = !1, children: t, dir: r, onOpenChange: a, modal: c = !0 } = n, l = Z(e), [h, d] = i.useState(null), m = i.useRef(!1), v = je(a), f = Xe(r);
+  const { __scopeMenu: e, open: o = !1, children: t, dir: r, onOpenChange: a, modal: c = !0 } = n, l = Z(e), [h, d] = i.useState(null), m = i.useRef(!1), v = je(a), f = Ze(r);
   return i.useEffect(() => {
     const w = /* @__PURE__ */ p(() => {
       m.current = !0, document.addEventListener("pointerdown", C, {
@@ -102,7 +102,7 @@ var ot = Object.defineProperty, p = (n, e) => ot(n, "name", {
     if (!o) return;
     const w = /* @__PURE__ */ p(() => v(!1), "handleBlur");
     return window.addEventListener("blur", w), () => window.removeEventListener("blur", w);
-  }, [o, v]), /* @__PURE__ */ s(He, {
+  }, [o, v]), /* @__PURE__ */ s(Ye, {
     ...l,
     children: /* @__PURE__ */ s(ut, {
       scope: e,
@@ -122,7 +122,7 @@ var ot = Object.defineProperty, p = (n, e) => ot(n, "name", {
   });
 }, "Menu"), dt = /* @__PURE__ */ i.forwardRef(/* @__PURE__ */ p(function(e, o) {
   const { __scopeMenu: t, ...r } = e, a = Z(t);
-  return /* @__PURE__ */ s(Ze, {
+  return /* @__PURE__ */ s(He, {
     ...a,
     ...r,
     ref: o
@@ -226,7 +226,7 @@ var ot = Object.defineProperty, p = (n, e) => ot(n, "name", {
               B.isUsingKeyboardRef.current || u.preventDefault();
             }),
             preventScrollOnEntryFocus: !0,
-            children: /* @__PURE__ */ s(qe, {
+            children: /* @__PURE__ */ s(Xe, {
               role: "menu",
               "aria-orientation": "vertical",
               "data-state": we(ee.open),

package/dist/{Modal-Dq9BHD_9.js → Modal-DL4p692X.js}

@@ -2,7 +2,7 @@ import { t as F } from "./x-Ierxf0uI.js";
 import { t as N } from "./dist-DX0sBG3Q.js";
 import { t as h } from "./utils-B-6R7kNE.js";
 import { t as k } from "./Combination-CnMM05mt.js";
-import { t as w } from "./react-7zQ6bvbE.js";
+import { t as w } from "./react-DRLuFcbk.js";
 import { t as A } from "./es2015-B_07N-UL.js";
 import { Body as R } from "./components/Modal/components/Body/Body.js";
 import { Footer as x } from "./components/Modal/components/Footer/Footer.js";

package/dist/Wrapper-Bbaaa7YA.js

@@ -0,0 +1,218 @@
+import { t as r } from "./utils-B-6R7kNE.js";
+import { LoaderIcon as xe } from "./assets/icons/components/Loader.js";
+import { t as he } from "./createLucideIcon-MbzNWCaI.js";
+import { t as ve } from "./chevron-up-Bjpvg6ui.js";
+import { Typography as ge } from "./components/Typography/Typography.js";
+import { i as we, n as ye, r as Ne, t as Ce } from "./dist-ByCJijZd.js";
+import { useSelectContext as ke } from "./components/Select/contexts/select.hook.js";
+import { List as be } from "./components/Select/components/List/List.js";
+import { inputVariants as Ie, labelVariants as Oe, selectVariants as je } from "./components/Select/Select.variants.js";
+import { useSelect as ze } from "./components/Select/hooks/useSelect.js";
+import { forwardRef as De, useEffect as Le, useImperativeHandle as Re, useMemo as Ve, useRef as w } from "react";
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+var Te = [["path", {
+  d: "m21 21-4.34-4.34",
+  key: "14j7rj"
+}], ["circle", {
+  cx: "11",
+  cy: "11",
+  r: "8",
+  key: "4ej97u"
+}]], Fe = he("search", Te), Ge = De(({ additionalOptions: E, className: $, defaultValue: y, describedBy: b, fieldId: N, disabled: n = !1, error: c, groupedOptions: B, iconClassName: K, inputClassName: M, isInfiniteScrollEnabled: W = !1, isLoading: I, isPortal: f = !1, isRequired: x, loadingText: _, label: l, labelAction: q, labelClassName: H, labelWrapperClassName: U, listClassName: G, listItemClassName: J, listItemSecondRowClassName: P, name: O, noOptionsText: Q, placeholder: h, portalClassName: X, searchable: j = !1, showSearchIcon: C, theme: Y, visibleItems: Z, wrapperClassName: ee, onFetchMoreOptions: te, onBlur: ae, onSearchChange: re, ...z }, ne) => {
+  const v = `${N}-label`, D = `${N}-control`, L = `${N}-listbox`, d = w(null), R = w(null), k = w(null), oe = w(0), { isOpen: o, options: i, searchTerm: le, value: u, setCanFilter: ie, setSearchTerm: se, setValue: m, toggleOpen: V } = ke(), t = Ve(() => i.find(({ value: e }) => e === u), [i, u]), { isInside: ce, wrapperRef: ue, wrapperInputRef: T, handleOpen: g } = ze({
+    inputRef: d,
+    searchInputRef: R,
+    internalValue: t,
+    listRef: k,
+    onBlur: ae
+  }), de = (e) => {
+    ce(e.relatedTarget) || V(!1);
+  }, F = () => {
+    if (!n) {
+      if (o) {
+        V(!1);
+        return;
+      }
+      g();
+    }
+  }, me = (e) => {
+    if (!n) {
+      if (e.key === "ArrowDown") {
+        if (e.preventDefault(), !o) {
+          g();
+          return;
+        }
+        k.current?.querySelector('li:not([data-action="true"])')?.focus();
+        return;
+      }
+      e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), F());
+    }
+  };
+  Re(ne, () => d.current, [d]), Le(() => {
+    if (y && !u) {
+      const e = i && i.find((p) => p.value === y);
+      e && m(e.value);
+    }
+  }, [
+    y,
+    i,
+    m,
+    u
+  ]);
+  const pe = (e) => {
+    const p = e.target.value;
+    ie(!0), m(""), se(p ?? ""), re?.(p);
+    const S = i.find((fe) => fe.value.toLocaleLowerCase() === p.toLocaleLowerCase());
+    m(S ? S.value : t?.value ?? "");
+  }, A = /* @__PURE__ */ a(be, {
+    ref: k,
+    id: L,
+    labelledBy: l ? v : void 0,
+    additionalOptions: E,
+    className: r(f && "static top-auto mt-0", G),
+    groupedOptions: B,
+    itemClassName: J,
+    name: O,
+    wrapperInputRef: T,
+    inputRef: d,
+    options: i,
+    isLoading: !!I,
+    searchable: j,
+    listItemSecondRowClassName: P,
+    isInfiniteScrollEnabled: W,
+    onFetchMoreOptions: te,
+    noOptionsText: Q,
+    loadingText: _,
+    visibleItems: Z
+  });
+  return /* @__PURE__ */ s("div", {
+    ref: ue,
+    className: r("flex flex-col gap-2 w-full relative", ee),
+    "data-theme": Y,
+    children: [l ? /* @__PURE__ */ s("div", {
+      className: r("flex items-center justify-between", U),
+      children: [/* @__PURE__ */ s("label", {
+        id: v,
+        className: r(Oe({ className: H })),
+        htmlFor: D,
+        onClick: () => !n && g(),
+        children: [l, x && /* @__PURE__ */ a("span", {
+          "aria-hidden": "true",
+          className: "text-red-600 dark:text-red-500 ml-1",
+          children: "*"
+        })]
+      }), q]
+    }) : null, /* @__PURE__ */ s(we, {
+      open: f && o,
+      children: [
+        /* @__PURE__ */ a(Ce, {
+          asChild: !0,
+          children: /* @__PURE__ */ s("div", {
+            ref: T,
+            id: D,
+            className: r(je({
+              className: $,
+              hasError: !!c,
+              disabled: n
+            })),
+            role: "combobox",
+            onClick: F,
+            onKeyDown: me,
+            "aria-expanded": o,
+            tabIndex: oe.current,
+            "aria-labelledby": l ? v : void 0,
+            "aria-label": l ? void 0 : h,
+            "aria-haspopup": "listbox",
+            "aria-controls": o ? L : void 0,
+            "aria-invalid": !!c || void 0,
+            "aria-describedby": b,
+            "aria-required": x || void 0,
+            "aria-disabled": n || void 0,
+            children: [/* @__PURE__ */ s("div", {
+              className: "flex gap-2.5 items-center flex-1",
+              children: [
+                t?.leftIcon && !C && /* @__PURE__ */ a("span", {
+                  className: "w-4 h-4 flex justify-center items-center dark:text-metal-50",
+                  children: t.leftIcon
+                }),
+                C && /* @__PURE__ */ a(Fe, { className: r("w-4", "h-4", "text-zinc-500", "select-none", "transition-colors", "duration-300", "dark:text-metal-300", "dark:group-focus-within:text-metal-50") }),
+                j ? /* @__PURE__ */ a("input", {
+                  ref: R,
+                  type: "text",
+                  value: o ? le : t?.label ?? u ?? "",
+                  onChange: pe,
+                  placeholder: h,
+                  className: r(Ie({ className: M }), { "text-red-700 placeholder:text-red-700": !!c }),
+                  onClick: (e) => {
+                    e.stopPropagation(), n || g();
+                  },
+                  "aria-labelledby": l ? v : void 0,
+                  "aria-label": l ? void 0 : h,
+                  "aria-invalid": !!c || void 0,
+                  "aria-describedby": b,
+                  required: x,
+                  autoComplete: "off",
+                  autoCapitalize: "words",
+                  disabled: n,
+                  tabIndex: -1,
+                  ...z
+                }) : /* @__PURE__ */ s(ge, {
+                  variant: "body2",
+                  className: r("flex-1 text-zinc-400 text-sm dark:text-metal-400 flex gap-2 items-center", {
+                    "text-red-700": !!c,
+                    "select-none": !t,
+                    "text-metal-800 dark:text-metal-50": t,
+                    "text-metal-400/50 dark:text-metal-50/50": n
+                  }, t?.wrapperClassNameOnSelectedValue),
+                  children: [
+                    t?.label || h,
+                    " ",
+                    t?.showRightComponentOnselectedValue ? t?.rightComponent : null
+                  ]
+                })
+              ]
+            }), I ? /* @__PURE__ */ a(xe, {
+              size: 16,
+              className: "text-metal-400 animate-spin select-none"
+            }) : !C && /* @__PURE__ */ a(ve, {
+              "data-state": o ? "open" : "closed",
+              className: r("w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-metal-50", K, {
+                "text-red-700": !!c,
+                "text-metal-400/50 dark:group-focus-within:text-zinc-500": n
+              })
+            })]
+          })
+        }),
+        /* @__PURE__ */ a("input", {
+          ref: d,
+          type: "text",
+          name: O,
+          className: "hidden",
+          "aria-hidden": "true",
+          required: x,
+          inert: !0,
+          defaultValue: t?.value ?? u ?? void 0,
+          ...z
+        }),
+        o && !f && A,
+        f && /* @__PURE__ */ a(Ne, { children: /* @__PURE__ */ a(ye, {
+          role: "presentation",
+          align: "start",
+          sideOffset: 4,
+          className: r("z-50 w-(--radix-popover-trigger-width)", X),
+          onOpenAutoFocus: (e) => {
+            e.preventDefault();
+          },
+          onCloseAutoFocus: (e) => {
+            e.preventDefault();
+          },
+          onBlur: de,
+          children: A
+        }) })
+      ]
+    })]
+  });
+});
+export {
+  Ge as t
+};

package/dist/assets/icons/components/AllSetCheck.js

@@ -0,0 +1,27 @@
+import { forwardRef as s } from "react";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+var h = s(({ size: t = 24, color: r = "currentColor", ...o }, i) => /* @__PURE__ */ l("svg", {
+  ref: i,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: t,
+  height: t,
+  viewBox: "0 0 82 82",
+  fill: "none",
+  ...o,
+  children: [/* @__PURE__ */ e("path", {
+    d: "M80.8425 41C80.8425 52.1811 76.2756 62.2598 68.9528 69.5039C61.7874 76.6693 51.8661 81 40.9213 81C30.0551 81 20.1339 76.5905 12.8898 69.5039C5.56693 62.2598 1 52.1811 1 41C1 18.874 18.874 1 40.9213 1C62.9685 1 80.8425 18.9528 80.8425 41Z",
+    stroke: r,
+    strokeWidth: "2",
+    strokeMiterlimit: "10"
+  }), /* @__PURE__ */ e("path", {
+    d: "M38.1994 46.3064L55.7247 28.9531L59.6617 32.8901L38.2694 53.697L38.2514 53.6789L38.1813 53.749L27.2129 42.7806L30.9432 39.0502L38.1994 46.3064Z",
+    stroke: r,
+    strokeWidth: "2",
+    strokeMiterlimit: "10"
+  })]
+}));
+h.displayName = "KonstructAllSetCheckIcon";
+export {
+  h as AllSetCheckIcon,
+  h as default
+};

package/dist/assets/icons/components/Detach.js

@@ -0,0 +1,20 @@
+import { forwardRef as e } from "react";
+import { jsx as L } from "react/jsx-runtime";
+var a = e(({ size: C = 24, color: o = "currentColor", ...r }, t) => /* @__PURE__ */ L("svg", {
+  ref: t,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: C,
+  height: C,
+  viewBox: "0 0 16 16",
+  fill: "none",
+  ...r,
+  children: /* @__PURE__ */ L("path", {
+    d: "M1.33203 3.51338L2.18536 2.66671L13.332 13.8134L12.4854 14.6667L9.26536 11.4467L7.52536 13.1867C6.22536 14.4867 4.11203 14.4867 2.81203 13.1867C1.51203 11.8867 1.51203 9.77338 2.81203 8.47338L3.80536 7.48005C3.7987 8.02671 3.88536 8.57338 4.07203 9.10005L3.7587 9.41338C2.97203 10.1934 2.97203 11.46 3.7587 12.24C4.5387 13.0267 5.80536 13.0267 6.58536 12.24L8.33203 10.5067L7.25203 9.43338C7.24536 9.59338 7.1787 9.76005 7.0587 9.88671C6.7987 10.1467 6.37203 10.1467 6.11203 9.88671C5.41203 9.18005 5.08536 8.24671 5.14536 7.33338L1.33203 3.51338ZM8.47203 2.81338C9.77203 1.51338 11.8854 1.51338 13.1854 2.81338C14.4854 4.11338 14.4854 6.22671 13.1854 7.52671L12.192 8.52005C12.1987 7.97338 12.112 7.42671 11.9254 6.90671L12.2387 6.58671C13.0254 5.80671 13.0254 4.54005 12.2387 3.76005C11.4587 2.97338 10.192 2.97338 9.41203 3.76005L7.19203 5.98005L6.25203 5.03338L8.47203 2.81338ZM8.9387 6.11338C9.1987 5.85338 9.62536 5.85338 9.88536 6.11338C10.7987 7.02671 11.072 8.33338 10.7054 9.48671L9.5187 8.30671C9.48536 7.85338 9.29203 7.40671 8.9387 7.06005C8.66536 6.80005 8.66536 6.37338 8.9387 6.11338Z",
+    fill: o
+  })
+}));
+a.displayName = "KonstructDetachIcon";
+export {
+  a as DetachIcon,
+  a as default
+};

package/dist/assets/icons/components/Pause.js

@@ -0,0 +1,20 @@
+import { forwardRef as l } from "react";
+import { jsx as r } from "react/jsx-runtime";
+var i = l(({ size: o = 24, color: t = "currentColor", ...e }, a) => /* @__PURE__ */ r("svg", {
+  ref: a,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: o,
+  height: o,
+  viewBox: "0 0 7 9",
+  fill: "none",
+  ...e,
+  children: /* @__PURE__ */ r("path", {
+    d: "M4.66667 8.16667H7V0H4.66667M0 8.16667H2.33333V0H0V8.16667Z",
+    fill: t
+  })
+}));
+i.displayName = "KonstructPauseIcon";
+export {
+  i as PauseIcon,
+  i as default
+};

package/dist/assets/icons/components/SpendStatement.js

@@ -0,0 +1,70 @@
+import { forwardRef as d } from "react";
+import { jsx as C, jsxs as h } from "react/jsx-runtime";
+var r = d(({ size: H = 24, color: t = "currentColor", ...e }, i) => /* @__PURE__ */ h("svg", {
+  ref: i,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: H,
+  height: H,
+  viewBox: "0 0 160 160",
+  fill: "none",
+  ...e,
+  children: [
+    /* @__PURE__ */ C("path", {
+      d: "M122.469 133.617C106.224 133.617 99.1582 133.617 82.3836 133.617C68.9961 133.617 59.62 133.617 44.552 133.617V39.284C44.552 36.1635 44.552 33.6172 50.1993 33.6172H106.224L122.469 49.9185V133.617Z",
+      stroke: t,
+      strokeWidth: "2",
+      strokeMiterlimit: "10"
+    }),
+    /* @__PURE__ */ C("path", {
+      d: "M100.856 56.9422H80.1443C79.6626 56.9422 79.2498 56.4633 79.2498 55.9047C79.2498 55.346 79.6626 54.8672 80.1443 54.8672H100.856C101.337 54.8672 101.75 55.346 101.75 55.9047C101.75 56.4633 101.337 56.9422 100.856 56.9422Z",
+      fill: t
+    }),
+    /* @__PURE__ */ C("path", {
+      d: "M86.8229 63.1866H80.0129C79.602 63.1866 79.2498 62.709 79.2498 62.1519C79.2498 61.5947 79.602 61.1172 80.0129 61.1172H86.7642C87.1752 61.1172 87.5274 61.5947 87.5274 62.1519C87.5274 62.709 87.1752 63.1866 86.8229 63.1866Z",
+      fill: t
+    }),
+    /* @__PURE__ */ C("path", {
+      d: "M106.382 106.395H75.2847H71.8574H61.4917C61.0737 106.395 60.6558 106.826 60.6558 107.429C60.6558 107.947 60.9901 108.464 61.4917 108.464H71.8574H75.2847H106.382C106.8 108.464 107.218 108.033 107.218 107.429C107.134 106.826 106.8 106.395 106.382 106.395Z",
+      fill: t
+    }),
+    /* @__PURE__ */ C("path", {
+      d: "M106.38 97.082H94.8235H90.8875H61.4932C61.0745 97.082 60.6558 97.5132 60.6558 98.1167C60.6558 98.6341 60.9907 99.1514 61.4932 99.1514H90.8875H94.8235H106.38C106.799 99.1514 107.218 98.7203 107.218 98.1167C107.134 97.5132 106.799 97.082 106.38 97.082Z",
+      fill: t
+    }),
+    /* @__PURE__ */ C("path", {
+      d: "M108.492 88.8047H105.355H102.218H61.5271C61.0914 88.8047 60.6558 89.2358 60.6558 89.8394C60.6558 90.3567 61.0043 90.8741 61.5271 90.8741H102.218H105.703H108.405C108.84 90.8741 109.276 90.4429 109.276 89.8394C109.363 89.322 108.927 88.8047 108.492 88.8047Z",
+      fill: t
+    }),
+    /* @__PURE__ */ C("path", {
+      d: "M108.423 80.5273H98.317H95.812H61.5196C61.0877 80.5273 60.6558 80.9585 60.6558 81.562C60.6558 82.0794 61.0013 82.5967 61.5196 82.5967H95.812H98.317H108.337C108.942 82.5967 109.287 82.1656 109.287 81.562C109.287 81.0447 108.942 80.5273 108.423 80.5273Z",
+      fill: t
+    }),
+    /* @__PURE__ */ C("path", {
+      d: "M106.223 34.2969V46.5982C106.223 48.8073 108.014 50.5982 110.223 50.5982H122.468",
+      stroke: t,
+      strokeWidth: "2",
+      strokeMiterlimit: "10"
+    }),
+    /* @__PURE__ */ C("path", {
+      d: "M50.6219 61.7598H38.5312",
+      stroke: t,
+      strokeWidth: "2",
+      strokeMiterlimit: "10"
+    }),
+    /* @__PURE__ */ C("path", {
+      d: "M50.6219 116.254H38.5312",
+      stroke: t,
+      strokeWidth: "2",
+      strokeMiterlimit: "10"
+    }),
+    /* @__PURE__ */ C("path", {
+      d: "M63.8329 62.4199H62.3745C62.3745 64.3085 64.1464 65.4241 66.0204 65.6574V67.1595H67.4788V65.6501C69.1194 65.4314 71.1247 64.4908 71.1247 62.4199C71.1247 60.3491 69.1194 59.4085 67.4788 59.1897V55.5658C68.4486 55.7408 69.6663 56.2512 69.6663 57.3158H71.1247C71.1247 55.2449 69.1194 54.3043 67.4788 54.0855V52.5762H66.0204V54.0855C64.3798 54.3043 62.3745 55.2449 62.3745 57.3158C62.3745 59.3866 64.3214 60.3126 66.0204 60.546V64.1699C64.9631 63.9876 63.8329 63.4262 63.8329 62.4199ZM69.6663 62.4199C69.6663 63.4845 68.4486 63.9949 67.4788 64.1699V60.6699C68.4486 60.8449 69.6663 61.3553 69.6663 62.4199ZM63.8329 57.3158C63.8329 56.2512 65.0506 55.7408 66.0204 55.5658V59.0658C65.0214 58.8835 63.8329 58.3366 63.8329 57.3158Z",
+      fill: t
+    })
+  ]
+}));
+r.displayName = "KonstructSpendStatementIcon";
+export {
+  r as SpendStatementIcon,
+  r as default
+};

package/dist/assets/icons/components/Updated.js

@@ -0,0 +1,20 @@
+import { forwardRef as e } from "react";
+import { jsx as o } from "react/jsx-runtime";
+var a = e(({ size: C = 24, color: r = "currentColor", ...t }, d) => /* @__PURE__ */ o("svg", {
+  ref: d,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: C,
+  height: C,
+  viewBox: "0 0 20 20",
+  fill: "none",
+  ...t,
+  children: /* @__PURE__ */ o("path", {
+    d: "M10.6446 2.65677C10.6596 2.57343 10.6906 2.49393 10.7358 2.42285C10.7811 2.35177 10.8396 2.29051 10.9081 2.24258C10.9767 2.19465 11.0538 2.161 11.1351 2.14357C11.2164 2.12614 11.3003 2.12527 11.3819 2.141L11.7082 2.21027C15.0603 2.99938 18 5.96537 18 10.2511C18 12.1521 17.1511 13.6463 16.1627 14.7817C15.4532 15.5968 14.6406 16.2573 13.9882 16.7631H15.9735C16.1343 16.7631 16.2885 16.8283 16.4022 16.9443C16.516 17.0603 16.5799 17.2176 16.5799 17.3816C16.5799 17.5456 16.516 17.7029 16.4022 17.8189C16.2885 17.9348 16.1343 18 15.9735 18H12.3352C12.1744 18 12.0201 17.9348 11.9064 17.8189C11.7927 17.7029 11.7288 17.5456 11.7288 17.3816V13.671C11.7288 13.507 11.7927 13.3497 11.9064 13.2337C12.0201 13.1177 12.1744 13.0526 12.3352 13.0526C12.496 13.0526 12.6502 13.1177 12.764 13.2337C12.8777 13.3497 12.9416 13.507 12.9416 13.671V15.9542L13.1623 15.7835C13.8099 15.2826 14.5594 14.6803 15.2167 13.9258C16.0838 12.9314 16.7351 11.7291 16.7351 10.2523C16.7351 6.5269 14.1155 3.97774 11.1491 3.40878L11.0254 3.37168C10.8909 3.31553 10.7795 3.21371 10.7101 3.08343C10.6407 2.95316 10.6175 2.80244 10.6446 2.65677ZM2 9.74892C2 7.8491 2.84893 6.35498 3.83734 5.21831C4.5468 4.40445 5.35936 3.74397 6.01182 3.23686H4.02774C3.86692 3.23686 3.71268 3.1717 3.59896 3.05572C3.48525 2.93975 3.42136 2.78245 3.42136 2.61843C3.42136 2.45441 3.48525 2.29711 3.59896 2.18113C3.71268 2.06516 3.86692 2 4.02774 2H7.66603C7.82686 2 7.98109 2.06516 8.09481 2.18113C8.20853 2.29711 8.27242 2.45441 8.27242 2.61843V6.329C8.27242 6.49302 8.20853 6.65032 8.09481 6.7663C7.98109 6.88228 7.82686 6.94743 7.66603 6.94743C7.50521 6.94743 7.35098 6.88228 7.23726 6.7663C7.12354 6.65032 7.05965 6.49302 7.05965 6.329V4.047L6.83893 4.21645C6.19131 4.71738 5.44182 5.31973 4.78451 6.07421C3.91738 7.06865 3.26613 8.27087 3.26613 9.74892C3.26613 13.5139 5.9427 16.0792 8.94793 16.6098C9.10503 16.6473 9.24213 16.7447 9.33122 16.8819C9.4203 17.0191 9.45466 17.1858 9.42725 17.348C9.39984 17.5102 9.31275 17.6556 9.18376 17.7545C9.05478 17.8533 8.89364 17.8983 8.73327 17.88C5.2017 17.2566 2 14.2214 2 9.74892Z",
+    fill: r
+  })
+}));
+a.displayName = "KonstructUpdatedIcon";
+export {
+  a as UpdatedIcon,
+  a as default
+};