@konstructio/ui 0.1.2-alpha.9 → 0.1.2-alpha.94

package/dist/HamburgerTrigger-BzCfBWzH.js

@@ -0,0 +1,85 @@
+import { o as m } from "./chunk-cI0lbGMq.js";
+import { t as g } from "./prop-types-CE0Kfmwk.js";
+import { t as c } from "./dist-EV-1XXQr.js";
+import { t as y } from "./utils-COaoD3PI.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());
+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]);
+    }
+    return r;
+  }, s.apply(this, arguments);
+}
+function h(r, n) {
+  if (r == null) return {};
+  var e = x(r, n), t, 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]);
+  }
+  return e;
+}
+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 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"]);
+  return /* @__PURE__ */ a.createElement("svg", s({
+    ref: n,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: i,
+    height: i,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: t,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, f), /* @__PURE__ */ a.createElement("line", {
+    x1: "3",
+    y1: "12",
+    x2: "21",
+    y2: "12"
+  }), /* @__PURE__ */ a.createElement("line", {
+    x1: "3",
+    y1: "6",
+    x2: "21",
+    y2: "6"
+  }), /* @__PURE__ */ a.createElement("line", {
+    x1: "3",
+    y1: "18",
+    x2: "21",
+    y2: "18"
+  }));
+});
+l.propTypes = {
+  color: p.default.string,
+  size: p.default.oneOfType([p.default.string, p.default.number])
+};
+l.displayName = "Menu";
+var O = ({ isOpen: r, onClick: n, className: e }) => /* @__PURE__ */ b("button", {
+  type: "button",
+  "aria-label": "Open navigation",
+  "aria-expanded": r,
+  "aria-haspopup": "menu",
+  className: y(d({ className: e })),
+  onClick: n,
+  children: [/* @__PURE__ */ u(l, {
+    size: 20,
+    "aria-hidden": "true"
+  }), /* @__PURE__ */ u(c, { children: "Open navigation" })]
+});
+O.displayName = "KonstructSidebarHamburgerTrigger";
+export {
+  O as t
+};

package/dist/ImageUpload-DebL0hwF.js

@@ -0,0 +1,181 @@
+import { t as o } from "./utils-COaoD3PI.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-DBIZFfaM.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";
+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);
+  }, []);
+  const a = v !== t.Default ? v : W, w = E ?? H, m = b ?? X, x = z ?? q, g = !!y || a === t.Error, O = (i) => {
+    const r = i.target.files?.[0];
+    if (!r) return;
+    if (!M.split(",").map((s) => s.trim()).some((s) => {
+      if (s.includes("*")) {
+        const Z = s.split("/")[0];
+        return r.type.startsWith(Z);
+      }
+      return r.type === s;
+    })) {
+      d(t.Error), k?.(i);
+      return;
+    }
+    if (r.size > K) {
+      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.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 = () => {
+    h.current?.click();
+  }, Y = (i) => {
+    if (i === 0) return "0 Bytes";
+    const r = 1024, u = [
+      "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 /* @__PURE__ */ l("div", {
+    className: o(re({
+      status: a,
+      className: n
+    })),
+    "data-theme": f,
+    children: [
+      p && /* @__PURE__ */ e("div", {
+        className: o(L),
+        children: /* @__PURE__ */ l("label", {
+          htmlFor: U,
+          className: o(se({ className: T }), "cursor-pointer"),
+          children: [p, S && /* @__PURE__ */ e("span", {
+            className: "text-red-600 dark:text-red-500 text-xs mt-0.5",
+            children: "*"
+          })]
+        })
+      }),
+      /* @__PURE__ */ l("div", {
+        className: o(le({ status: a })),
+        children: [
+          /* @__PURE__ */ l("div", {
+            className: o(ie({ status: a }), {
+              "justify-between": g,
+              "justify-start": !g
+            }),
+            children: [
+              a === t.Uploading && /* @__PURE__ */ l(P, { children: [/* @__PURE__ */ e(_, {
+                size: 20,
+                className: "shrink-0 animate-spin text-metal-400"
+              }), m && /* @__PURE__ */ l("div", {
+                className: "flex flex-col items-start min-w-0 flex-1",
+                children: [/* @__PURE__ */ e("p", {
+                  className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-metal-50",
+                  children: m
+                }), x && /* @__PURE__ */ e("p", {
+                  className: "text-xs leading-4 text-slate-600 dark:text-metal-300 tracking-[0.15px]",
+                  children: x
+                })]
+              })] }),
+              a === t.Complete && w && /* @__PURE__ */ l(P, { children: [/* @__PURE__ */ e("div", {
+                className: "w-8 h-8 shrink-0 relative",
+                children: /* @__PURE__ */ e("img", {
+                  src: w,
+                  alt: m || "Uploaded image",
+                  className: "w-full h-full object-contain"
+                })
+              }), m && /* @__PURE__ */ l("div", {
+                className: "flex flex-col items-start min-w-0 flex-1",
+                children: [/* @__PURE__ */ e("p", {
+                  className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-slate-50 kubefirst-dark:text-slate-50",
+                  children: m
+                }), x && /* @__PURE__ */ e("p", {
+                  className: "text-xs leading-4 text-slate-600 dark:text-slate-400 kubefirst-dark:text-slate-400 tracking-[0.15px]",
+                  children: x
+                })]
+              })] }),
+              (a === t.Default || a === t.Error && !w) && /* @__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" })
+              }),
+              g && /* @__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" })
+              })
+            ]
+          }),
+          (a === t.Default || a === t.Error) && /* @__PURE__ */ e(F, {
+            variant: "secondary",
+            onClick: Q,
+            theme: f,
+            className: "h-10 px-4 py-2 shrink-0",
+            children: $
+          }),
+          a === t.Uploading && /* @__PURE__ */ e(F, {
+            variant: "secondary",
+            shape: "circle",
+            size: "medium",
+            onClick: I,
+            theme: f,
+            className: "shrink-0",
+            "aria-label": "Cancel upload",
+            children: /* @__PURE__ */ e(D, { className: "w-6 h-6" })
+          }),
+          a === t.Complete && /* @__PURE__ */ e(F, {
+            variant: "secondary",
+            shape: "circle",
+            size: "medium",
+            onClick: I,
+            theme: f,
+            className: "shrink-0",
+            "aria-label": "Remove file",
+            children: /* @__PURE__ */ e(D, { className: "w-6 h-6" })
+          })
+        ]
+      }),
+      j && /* @__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
+            })
+          }),
+          (a === t.Default || a === t.Error) && /* @__PURE__ */ e("div", { className: "shrink-0 w-29" }),
+          a === t.Uploading && /* @__PURE__ */ e("div", { className: "shrink-0 w-10" })
+        ]
+      }),
+      /* @__PURE__ */ e("input", {
+        ref: h,
+        id: U,
+        type: "file",
+        name: A,
+        accept: M,
+        onChange: O,
+        className: "hidden",
+        "aria-label": typeof p == "string" ? p : "File upload"
+      })
+    ]
+  });
+};
+oe.displayName = "KonstructImageUpload";
+export {
+  oe as t
+};

package/dist/Input-BZG7N8m1.js

@@ -0,0 +1,188 @@
+import { o as W } from "./chunk-cI0lbGMq.js";
+import { t as $ } from "./prop-types-CE0Kfmwk.js";
+import { t as i } from "./utils-COaoD3PI.js";
+import { SearchIcon as S } from "./assets/icons/components/Search.js";
+import { WarningIcon as T } from "./assets/icons/components/Warning.js";
+import { Typography as m } from "./components/Typography/Typography.js";
+import { inputVariants as M } from "./components/Input/Input.variants.js";
+import p, { forwardRef as y, useId as C, useRef as R, useState as A } from "react";
+import { jsx as s, jsxs as d } from "react/jsx-runtime";
+var l = /* @__PURE__ */ W($());
+function g() {
+  return g = Object.assign || function(t) {
+    for (var r = 1; r < arguments.length; r++) {
+      var n = arguments[r];
+      for (var e in n) Object.prototype.hasOwnProperty.call(n, e) && (t[e] = n[e]);
+    }
+    return t;
+  }, g.apply(this, arguments);
+}
+function B(t, r) {
+  if (t == null) return {};
+  var n = q(t, r), e, a;
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(t);
+    for (a = 0; a < o.length; a++)
+      e = o[a], !(r.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (n[e] = t[e]);
+  }
+  return n;
+}
+function q(t, r) {
+  if (t == null) return {};
+  var n = {}, e = Object.keys(t), a, o;
+  for (o = 0; o < e.length; o++)
+    a = e[o], !(r.indexOf(a) >= 0) && (n[a] = t[a]);
+  return n;
+}
+var x = y(function(t, r) {
+  var n = t.color, e = n === void 0 ? "currentColor" : n, a = t.size, o = a === void 0 ? 24 : a, c = B(t, ["color", "size"]);
+  return /* @__PURE__ */ p.createElement("svg", g({
+    ref: r,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: o,
+    height: o,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: e,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, c), /* @__PURE__ */ p.createElement("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }), /* @__PURE__ */ p.createElement("line", {
+    x1: "1",
+    y1: "1",
+    x2: "23",
+    y2: "23"
+  }));
+});
+x.propTypes = {
+  color: l.default.string,
+  size: l.default.oneOfType([l.default.string, l.default.number])
+};
+x.displayName = "EyeOff";
+function v() {
+  return v = Object.assign || function(t) {
+    for (var r = 1; r < arguments.length; r++) {
+      var n = arguments[r];
+      for (var e in n) Object.prototype.hasOwnProperty.call(n, e) && (t[e] = n[e]);
+    }
+    return t;
+  }, v.apply(this, arguments);
+}
+function D(t, r) {
+  if (t == null) return {};
+  var n = F(t, r), e, a;
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(t);
+    for (a = 0; a < o.length; a++)
+      e = o[a], !(r.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (n[e] = t[e]);
+  }
+  return n;
+}
+function F(t, r) {
+  if (t == null) return {};
+  var n = {}, e = Object.keys(t), a, o;
+  for (o = 0; o < e.length; o++)
+    a = e[o], !(r.indexOf(a) >= 0) && (n[a] = t[a]);
+  return n;
+}
+var w = y(function(t, r) {
+  var n = t.color, e = n === void 0 ? "currentColor" : n, a = t.size, o = a === void 0 ? 24 : a, c = D(t, ["color", "size"]);
+  return /* @__PURE__ */ p.createElement("svg", v({
+    ref: r,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: o,
+    height: o,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: e,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, c), /* @__PURE__ */ p.createElement("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), /* @__PURE__ */ p.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3"
+  }));
+});
+w.propTypes = {
+  color: l.default.string,
+  size: l.default.oneOfType([l.default.string, l.default.number])
+};
+w.displayName = "Eye";
+var K = y(({ className: t, error: r, helperText: n, helperTextClassName: e, isRequired: a = !1, isSearch: o = !1, label: c, labelAction: O, labelClassName: j, labelWrapperClassName: k, name: N, theme: E, type: f = "text", ...P }, _) => {
+  const b = C(), z = R(f === "password"), [h, I] = A(() => f !== "password"), u = typeof r == "string" && r.length >= 0, L = h ? w : x;
+  return /* @__PURE__ */ d("div", {
+    className: "flex flex-col gap-2 w-full relative",
+    "data-theme": E,
+    children: [
+      c ? /* @__PURE__ */ d("div", {
+        className: i("flex items-center justify-between", k),
+        children: [/* @__PURE__ */ d(m, {
+          component: "label",
+          variant: "labelLarge",
+          htmlFor: b,
+          className: i("cursor-pointer", "flex", "gap-1", "text-sm", "font-medium", j),
+          children: [
+            c,
+            " ",
+            a && /* @__PURE__ */ s(m, {
+              component: "span",
+              className: i("text-red-600", "dark:text-red-500", "text-xs", "mt-0.5"),
+              children: "*"
+            })
+          ]
+        }), O]
+      }) : null,
+      /* @__PURE__ */ d("div", {
+        className: "relative",
+        children: [
+          o ? /* @__PURE__ */ s("i", {
+            className: i("absolute", "left-2.5", "top-1/2", "-translate-y-[50%]", "text-slate-400", "dark:text-metal-400", { "text-red-700": u }),
+            children: /* @__PURE__ */ s(S, { className: "w-5 h-5" })
+          }) : null,
+          /* @__PURE__ */ s("input", {
+            id: c ? b : void 0,
+            ref: _,
+            name: N,
+            type: h ? z.current ? "text" : f : "password",
+            "data-error": u,
+            className: i(M({
+              className: t,
+              variant: u ? "error" : "default"
+            }), {
+              "pr-10": f === "password" || u,
+              "pl-8": o
+            }),
+            ...P
+          }),
+          u ? /* @__PURE__ */ s("i", {
+            className: i("-translate-y-[50%]", "absolute", "right-3", "text-red-700", "top-1/2", "dark:text-red-500"),
+            children: /* @__PURE__ */ s(T, { className: "w-5 h-5" })
+          }) : null,
+          f === "password" && !r ? /* @__PURE__ */ s("i", {
+            className: i("-translate-y-[50%]", "absolute", "right-3", "text-slate-400", "top-1/2"),
+            children: /* @__PURE__ */ s(L, {
+              className: "w-5 h-5 cursor-pointer",
+              onClick: () => I(!h)
+            })
+          }) : null
+        ]
+      }),
+      r ? /* @__PURE__ */ s(m, {
+        component: "span",
+        className: i("text-xs", "tracking-normal", "text-red-700", "dark:text-red-400"),
+        children: r
+      }) : null,
+      !r && n ? /* @__PURE__ */ s(m, {
+        component: "span",
+        variant: "body1",
+        className: i("text-xs", "text-slate-600", "dark:text-slate-200", "select-none", "tracking-normal", e),
+        children: n
+      }) : null
+    ]
+  });
+});
+K.displayName = "KonstructInput";
+export {
+  K as t
+};

package/dist/Loading-DNlO4qxs.js

@@ -0,0 +1,16 @@
+import { t as e } from "./utils-COaoD3PI.js";
+import { t as i } from "./createLucideIcon-CL4htJAF.js";
+import { loadingVariants as t } from "./components/Loading/Loading.variants.js";
+import { jsx as d } from "react/jsx-runtime";
+var m = [["path", {
+  d: "M21 12a9 9 0 1 1-6.219-8.56",
+  key: "13zald"
+}]], c = i("loader-circle", m), s = ({ className: a, theme: r, ...o }) => /* @__PURE__ */ d(c, {
+  "data-theme": r,
+  className: e(t({ className: a })),
+  ...o
+});
+s.displayName = "Loading";
+export {
+  s as t
+};

package/dist/Modal-IyDr5vIx.js

@@ -0,0 +1,76 @@
+import { t as F } from "./x-KjMYhcCb.js";
+import { t as k } from "./dist-EV-1XXQr.js";
+import { t as h } from "./utils-COaoD3PI.js";
+import { t as w } from "./Combination-DFcElBFt.js";
+import { t as A } from "./proxy-Cx8v8fok.js";
+import { Body as N } from "./components/Modal/components/Body/Body.js";
+import { Footer as R } from "./components/Modal/components/Footer/Footer.js";
+import { Header as x } from "./components/Modal/components/Header/Header.js";
+import { buttonCloseVariants as B, modalVariants as C } from "./components/Modal/components/Wrapper/Wrapper.variants.js";
+import { Children as m, isValidElement as l, useEffect as g, useRef as E, useState as H } from "react";
+import { createPortal as V } from "react-dom";
+import { Fragment as j, jsx as a, jsxs as c } from "react/jsx-runtime";
+var D = ({ buttonCloseClassName: f, children: r, className: n, containerClassName: s, showCloseButton: p = !0, theme: i, transition: u, onClose: d }) => {
+  const o = m.toArray(r).find((t) => l(t) && t.type === e.Header), y = m.toArray(r).find((t) => l(t) && t.type === e.Body), b = m.toArray(r).find((t) => l(t) && t.type === e.Footer), v = m.toArray(r).filter((t) => !l(t) || ![
+    e.Header,
+    e.Body,
+    e.Footer
+  ].includes(t.type));
+  return /* @__PURE__ */ a(w, { children: /* @__PURE__ */ c("div", {
+    className: h("fixed inset-0 grid place-content-center", s),
+    "data-theme": i,
+    children: [/* @__PURE__ */ a("div", {
+      className: "absolute inset-0 bg-black opacity-70 dark:opacity-85 animate-in fade-in-0",
+      onClick: d,
+      role: "presentation"
+    }), /* @__PURE__ */ c(A.div, {
+      className: h(C({ className: n })),
+      role: "dialog",
+      "aria-modal": "true",
+      layout: "size",
+      transition: u ?? {
+        duration: 0.25,
+        ease: "easeInOut"
+      },
+      children: [
+        o,
+        p && /* @__PURE__ */ c("button", {
+          className: h(B({ className: f })),
+          onClick: d,
+          children: [/* @__PURE__ */ a(F, {}), /* @__PURE__ */ a(k, { children: "Dismiss modal" })]
+        }),
+        y ?? v,
+        b
+      ]
+    })]
+  }) });
+}, e = ({ isOpen: f, onClose: r, container: n, theme: s, ...p }) => {
+  const i = E(null), [u, d] = H(null);
+  return g(() => {
+    if (!i.current || s || n) return;
+    const o = i.current.closest("[data-theme]");
+    o && d(o);
+  }, [s, n]), g(() => {
+    const o = new AbortController(), y = (b) => {
+      b.code === "Escape" && r?.();
+    };
+    return window.addEventListener("keydown", y, { signal: o.signal }), () => {
+      o.abort();
+    };
+  }, [r]), /* @__PURE__ */ c(j, { children: [/* @__PURE__ */ a("span", {
+    ref: i,
+    "data-testid": "modal-anchor",
+    hidden: !0
+  }), f && V(/* @__PURE__ */ a(D, {
+    ...p,
+    theme: s,
+    onClose: r
+  }), n || u || document.body)] });
+};
+e.Header = x;
+e.Body = N;
+e.Footer = R;
+export {
+  D as n,
+  e as t
+};

package/dist/Sidebar.css

@@ -0,0 +1 @@
+.konstruct-sidebar{height:100%}aside.konstruct-sidebar{width:16rem}aside.konstruct-sidebar[data-mode=collapsed]{width:4.5rem}.konstruct-sidebar nav{scrollbar-color:#78787866 transparent;scrollbar-width:thin;flex-direction:column;flex:1;width:100%;min-height:0;display:flex;overflow-y:auto}.konstruct-sidebar nav::-webkit-scrollbar{width:8px;height:8px}.konstruct-sidebar nav::-webkit-scrollbar-track{background:0 0}.konstruct-sidebar nav::-webkit-scrollbar-thumb{background-color:#78787866;border-radius:9999px;transition:background-color .2s}.konstruct-sidebar nav::-webkit-scrollbar-thumb:hover{background-color:#78787899}.konstruct-sidebar nav::-webkit-scrollbar-corner{background:0 0}.konstruct-sidebar ul{flex-direction:column;flex-shrink:0;gap:.25rem;margin:0;padding:0 .5rem;list-style:none;display:flex}.konstruct-sidebar li[role=option]{flex-shrink:0}.konstruct-sidebar li[role=option]>a{padding:.625rem}.konstruct-sidebar[data-mode=expanded] li[role=option]>a{padding:.625rem 1rem}.konstruct-sidebar li[role=option]:hover{background-color:var(--konstruct-sidebar-hover-bg,#252a41);color:var(--konstruct-sidebar-hover-color,#fff)}.konstruct-sidebar li[role=option][data-active=true]{background-color:var(--konstruct-sidebar-active-bg,#252a41);color:var(--konstruct-sidebar-active-color,#fff)}.konstruct-sidebar li[role=option]>a{color:inherit;align-items:center;gap:1rem;width:100%;text-decoration:none;display:flex}.konstruct-sidebar[data-mode=collapsed] li[role=option],.konstruct-sidebar[data-mode=collapsed] li[role=option]>a,.konstruct-sidebar[data-mode=collapsed] [data-konstruct-sidebar-logo]>a{justify-content:center}.konstruct-sidebar[data-mode=collapsed] [data-konstruct-sidebar-logo]{align-items:center}.konstruct-sidebar[data-mode=expanded] [data-konstruct-sidebar-logo]{padding:var(--konstruct-sidebar-logo-padding-expanded,var(--konstruct-sidebar-logo-padding,1.25rem 1rem))}.konstruct-sidebar[data-mode=collapsed] [data-konstruct-sidebar-logo]{padding:var(--konstruct-sidebar-logo-padding-collapsed,var(--konstruct-sidebar-logo-padding,0))}.konstruct-sidebar [data-konstruct-sidebar-separator]{background-color:#fff3;flex-shrink:0;height:1px;margin:.75rem .5rem}