@konstructio/ui 0.1.2-alpha.84 → 0.1.2-alpha.85

package/dist/components/MultiSelectDropdown/components/index.js

@@ -1,5 +1,5 @@
 import { Item as m } from "./Item/Item.js";
-import { n as p, r as t } from "../../../components-DNFycJGm.js";
+import { n as p, r as t } from "../../../components-C_LekSz_.js";
 export {
   m as Item,
   t as List,

package/dist/components/PhoneNumberInput/PhoneNumberInput.js

@@ -1,5 +1,5 @@
-import { t as p } from "../../phone-number.provider-B9BWYAqH.js";
-import { t } from "../../Wrapper-BYC8shQP.js";
+import { t as p } from "../../phone-number.provider-CdPQAKnl.js";
+import { t } from "../../Wrapper-TuoyTFqo.js";
 import { forwardRef as f } from "react";
 import { jsx as r } from "react/jsx-runtime";
 var h = f(({ defaultCountryCode: o = "US", ...m }, e) => /* @__PURE__ */ r(p, {

package/dist/components/PhoneNumberInput/PhoneNumberInput.variants.js

@@ -1,4 +1,4 @@
-import { t as r } from "../../dist-DtEbXv47.js";
+import { t as r } from "../../dist-Bcn6lMQe.js";
 var e = r([
   "text-sm",
   "relative",

package/dist/components/PhoneNumberInput/components/FlagContent/FlagContent.js

@@ -1,5 +1,5 @@
-import { t as n } from "../../../../utils-DHuiYnx1.js";
-import { t as s } from "../../../../chevron-up-DuS9MUNr.js";
+import { t as n } from "../../../../utils-COaoD3PI.js";
+import { t as s } from "../../../../chevron-up-BKlxfVX9.js";
 import { usePhoneNumberContext as l } from "../../contexts/phone-number.hook.js";
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
 var u = () => {

package/dist/components/PhoneNumberInput/components/FlagSelectorList/FlagSelectorList.js

@@ -1,4 +1,4 @@
-import { t as o } from "../../../../FlagSelectorList-C17nmEBM.js";
+import { t as o } from "../../../../FlagSelectorList-NMlHNF7N.js";
 export {
   o as FlagSelectorList
 };

package/dist/components/PhoneNumberInput/components/FlagSelectorWrapper/FlagSelectorWrapper.js

@@ -1,6 +1,6 @@
-import { t as n } from "../../../../Input-GBMxM3Z7.js";
-import { t as d } from "../../../../utils-DHuiYnx1.js";
-import { t as p } from "../../../../FlagSelectorList-C17nmEBM.js";
+import { t as n } from "../../../../Input-BZG7N8m1.js";
+import { t as d } from "../../../../utils-COaoD3PI.js";
+import { t as p } from "../../../../FlagSelectorList-NMlHNF7N.js";
 import { usePhoneNumberContext as c } from "../../contexts/phone-number.hook.js";
 import { useCallback as u } from "react";
 import { jsx as r, jsxs as h } from "react/jsx-runtime";

package/dist/components/PhoneNumberInput/components/TruncateText/TruncateText.js

@@ -1,6 +1,6 @@
-import { o as f } from "../../../../chunk-D1xtDmiO.js";
-import { a as u, i as b, n as m, o as p } from "../../../../dist-CSP6X06u.js";
-import { t as h } from "../../../../debounce-CzFlgg9h.js";
+import { o as f } from "../../../../chunk-cI0lbGMq.js";
+import { a as u, i as b, n as m, o as p } from "../../../../dist-BeLV4B_x.js";
+import { t as h } from "../../../../debounce-B55BpO1u.js";
 import { useCallback as w, useEffect as i, useRef as g, useState as v } from "react";
 import { jsx as s, jsxs as a } from "react/jsx-runtime";
 var k = /* @__PURE__ */ f(h(), 1), N = ({ text: r, prefix: n }) => {

package/dist/components/PhoneNumberInput/components/Wrapper.js

@@ -1,4 +1,4 @@
-import { t as p } from "../../../Wrapper-BYC8shQP.js";
+import { t as p } from "../../../Wrapper-TuoyTFqo.js";
 export {
   p as Wrapper
 };

package/dist/components/PhoneNumberInput/components/index.js

@@ -1,5 +1,5 @@
-import { t } from "../../../FlagSelectorList-C17nmEBM.js";
-import { t as p } from "../../../Wrapper-BYC8shQP.js";
+import { t } from "../../../FlagSelectorList-NMlHNF7N.js";
+import { t as p } from "../../../Wrapper-TuoyTFqo.js";
 export {
   t as FlagSelectorList,
   p as Wrapper

package/dist/components/PhoneNumberInput/contexts/index.js

@@ -1,5 +1,5 @@
 import { PhoneNumberContext as r } from "./phone-number.context.js";
-import { t as m } from "../../../phone-number.provider-B9BWYAqH.js";
+import { t as m } from "../../../phone-number.provider-CdPQAKnl.js";
 import { usePhoneNumberContext as n } from "./phone-number.hook.js";
 export {
   r as PhoneNumberContext,

package/dist/components/PhoneNumberInput/contexts/phone-number.provider.js

@@ -1,4 +1,4 @@
-import { t as o } from "../../../phone-number.provider-B9BWYAqH.js";
+import { t as o } from "../../../phone-number.provider-CdPQAKnl.js";
 export {
   o as PhoneNumberProvider
 };

package/dist/components/PhoneNumberInput/utils/index.js

@@ -1,4 +1,4 @@
-import { t as m } from "../../../libphonenumber-7uXgv7U8.js";
+import { t as m } from "../../../libphonenumber-Dy3Kac9j.js";
 var n = m(), e = n.PhoneNumberUtil.getInstance(), p = (t) => {
   const r = t.code, o = e.getExampleNumber(r);
   if (!o) return;

package/dist/components/PieChart/PieChart.js

@@ -1,4 +1,4 @@
-import { a as $, r as D, t as v } from "../../dist-DRmqW28Z2.js";
+import { a as $, r as D, t as v } from "../../dist-BHslNQd82.js";
 import { useMemo as i } from "react";
 import { jsx as y } from "react/jsx-runtime";
 $.register(D);

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,4 +1,4 @@
-import { t as n } from "../../utils-DHuiYnx1.js";
+import { t as n } from "../../utils-COaoD3PI.js";
 import { progressBarFillVariants as p, progressBarTrackVariants as x } from "./ProgressBar.variants.js";
 import { jsx as s, jsxs as i } from "react/jsx-runtime";
 var w = ({ className: l, fillClassName: r, leftContent: a, percent: c, rightContent: e, status: m, theme: d, trackClassName: t }) => {

package/dist/components/ProgressBar/ProgressBar.variants.js

@@ -1,4 +1,4 @@
-import { t as r } from "../../dist-DtEbXv47.js";
+import { t as r } from "../../dist-Bcn6lMQe.js";
 var t = r([
   "relative",
   "h-2",

package/dist/components/Radio/Radio.js

@@ -1,4 +1,4 @@
-import { t as a } from "../../utils-DHuiYnx1.js";
+import { t as a } from "../../utils-COaoD3PI.js";
 import { Typography as c } from "../Typography/Typography.js";
 import { labelRadioVariants as p, radioVariants as V, wrapperRadioVariants as j } from "./Radio.variants.js";
 import { forwardRef as w, useCallback as F, useId as $ } from "react";

package/dist/components/Radio/Radio.variants.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../dist-DtEbXv47.js";
+import { t as e } from "../../dist-Bcn6lMQe.js";
 var a = e([
   "inline-flex",
   "items-center",

package/dist/components/RadioCard/RadioCard.js

@@ -1,4 +1,4 @@
-import { t as a } from "../../utils-DHuiYnx1.js";
+import { t as a } from "../../utils-COaoD3PI.js";
 import { Card as d } from "../Card/Card.js";
 import { Radio as l } from "../Radio/Radio.js";
 import { radioCardVariants as e } from "./RadioCard.variants.js";

package/dist/components/RadioCard/RadioCard.variants.js

@@ -1,4 +1,4 @@
-import { t as r } from "../../dist-DtEbXv47.js";
+import { t as r } from "../../dist-Bcn6lMQe.js";
 var e = r([
   "flex",
   "items-center",

package/dist/components/RadioCardGroup/RadioCardGroup.js

@@ -1,4 +1,4 @@
-import { t } from "../../utils-DHuiYnx1.js";
+import { t } from "../../utils-COaoD3PI.js";
 import { RadioCard as C } from "../RadioCard/RadioCard.js";
 import { radioCardGroupVariants as N } from "./RadioCardGroup.variants.js";
 import { useCallback as S, useState as k } from "react";

package/dist/components/RadioCardGroup/RadioCardGroup.variants.js

@@ -1,4 +1,4 @@
-import { t as a } from "../../dist-DtEbXv47.js";
+import { t as a } from "../../dist-Bcn6lMQe.js";
 var o = a(["flex"], {
   variants: { direction: {
     row: ["flex-row", "gap-8"],

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,5 +1,5 @@
-import { t as G } from "../../dist-DXJSck4j.js";
-import { t as s } from "../../utils-DHuiYnx1.js";
+import { t as G } from "../../dist-CMPkuWNy.js";
+import { t as s } from "../../utils-COaoD3PI.js";
 import { Radio as R } from "../Radio/Radio.js";
 import { radioGroupVariants as b } from "./RadioGroup.variants.js";
 import { useCallback as j, useState as I } from "react";

package/dist/components/RadioGroup/RadioGroup.variants.js

@@ -1,4 +1,4 @@
-import { t as a } from "../../dist-DtEbXv47.js";
+import { t as a } from "../../dist-Bcn6lMQe.js";
 var o = a(["flex"], {
   variants: { direction: {
     row: ["flex-row", "gap-8"],

package/dist/components/Range/Range.js

@@ -1,5 +1,5 @@
-import { t as e } from "../../utils-DHuiYnx1.js";
-import { i as v, n as V, r as c, t as R } from "../../dist-BL8l9uRy.js";
+import { t as e } from "../../utils-COaoD3PI.js";
+import { i as v, n as V, r as c, t as R } from "../../dist-BfrkYZKI.js";
 import { rangeOutsideVariants as j, rangeVariants as b, thumbVariants as i, trackVariants as k } from "./Range.variants.js";
 import { forwardRef as w, useCallback as y, useEffect as C, useImperativeHandle as S, useRef as T, useState as $ } from "react";
 import { jsx as a, jsxs as r } from "react/jsx-runtime";

package/dist/components/Range/Range.variants.js

@@ -1,4 +1,4 @@
-import { t as r } from "../../dist-DtEbXv47.js";
+import { t as r } from "../../dist-Bcn6lMQe.js";
 var e = r([
   "relative",
   "flex",

package/dist/components/Select/Select.js

@@ -1,7 +1,7 @@
-import { t as a } from "../../utils-DHuiYnx1.js";
-import { t as h } from "../../Wrapper-DEJ-hyar.js";
+import { t as a } from "../../utils-COaoD3PI.js";
+import { t as h } from "../../Wrapper-DimnwFZe.js";
 import { SelectProvider as v } from "./contexts/select.provider.js";
-import { n as N } from "../../AdditionalOptions-Cx9wU01w.js";
+import { n as N } from "../../AdditionalOptions-UEegkZqG.js";
 import { forwardRef as g, useMemo as j } from "react";
 import { jsx as r, jsxs as k } from "react/jsx-runtime";
 var R = g(({ error: e, errorClassName: i, helperText: l, helperTextClassName: d, highlightSearch: p, mainWrapperClassName: f, name: s, value: n, options: t, onChange: c, onBlur: m, ...o }, x) => /* @__PURE__ */ r(v, {

package/dist/components/Select/Select.variants.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../dist-DtEbXv47.js";
+import { t as e } from "../../dist-Bcn6lMQe.js";
 var a = e([
   "group",
   "border",

package/dist/components/Select/components/AdditionalOptions/AdditionalOptions.js

@@ -1,4 +1,4 @@
-import { t } from "../../../../AdditionalOptions-Cx9wU01w.js";
+import { t } from "../../../../AdditionalOptions-UEegkZqG.js";
 export {
   t as AdditionalOptions
 };

package/dist/components/Select/components/AdditionalOptions/AdditionalOptions.variants.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../../../utils-DHuiYnx1.js";
+import { t as e } from "../../../../utils-COaoD3PI.js";
 var r = e("flex", "min-h-10", "py-2", "px-6", "w-full", "h-full", "gap-1", "items-center", "text-sm", "[&>svg]:-ml-1", "[&>svg]:w-3.5", "[&>svg]:h-3.5", "[&>svg]:shrink-0", "cursor-pointer", "select-none", "hover:bg-gray-50", "hover:dark:bg-metal-700", "focus:outline-0", "text-blue-600", "dark:text-aurora-500");
 export {
   r as additionalOptionSlotClassName

package/dist/components/Select/components/List/List.js

@@ -1,9 +1,9 @@
-import { o as K } from "../../../../chunk-D1xtDmiO.js";
-import { t as n } from "../../../../utils-DHuiYnx1.js";
-import { t as Q } from "../../../../Loading-DKqxR-oV.js";
-import { t as W } from "../../../../debounce-CzFlgg9h.js";
+import { o as K } from "../../../../chunk-cI0lbGMq.js";
+import { t as n } from "../../../../utils-COaoD3PI.js";
+import { t as Q } from "../../../../Loading-DNlO4qxs.js";
+import { t as W } from "../../../../debounce-B55BpO1u.js";
 import { useSelectContext as Y } from "../../contexts/select.hook.js";
-import { n as $, t as R } from "../../../../AdditionalOptions-Cx9wU01w.js";
+import { n as $, t as R } from "../../../../AdditionalOptions-UEegkZqG.js";
 import { listGroupLabelVariants as ee, listVariants as te } from "./List.variants.js";
 import "../../constants/pagination.js";
 import "../../constants/list.js";

package/dist/components/Select/components/List/List.variants.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../../../dist-DtEbXv47.js";
+import { t as e } from "../../../../dist-Bcn6lMQe.js";
 var r = e([
   "flex",
   "items-center",

package/dist/components/Select/components/ListItem/ListItem.js

@@ -1,4 +1,4 @@
-import { t as s } from "../../../../utils-DHuiYnx1.js";
+import { t as s } from "../../../../utils-COaoD3PI.js";
 import { Typography as y } from "../../../Typography/Typography.js";
 import { useSelectContext as I } from "../../contexts/select.hook.js";
 import { listItemVariants as L } from "./ListItem.variants.js";

package/dist/components/Select/components/ListItem/ListItem.variants.js

@@ -1,4 +1,4 @@
-import { t as r } from "../../../../dist-DtEbXv47.js";
+import { t as r } from "../../../../dist-Bcn6lMQe.js";
 var a = r([
   "cursor-pointer",
   "py-1.5",

package/dist/components/Select/components/Wrapper.js

@@ -1,4 +1,4 @@
-import { t as p } from "../../../Wrapper-DEJ-hyar.js";
+import { t as p } from "../../../Wrapper-DimnwFZe.js";
 export {
   p as Wrapper
 };

package/dist/components/Select/components/index.js

@@ -1,5 +1,5 @@
-import { t as o } from "../../../Wrapper-DEJ-hyar.js";
-import { t as i } from "../../../AdditionalOptions-Cx9wU01w.js";
+import { t as o } from "../../../Wrapper-DimnwFZe.js";
+import { t as i } from "../../../AdditionalOptions-UEegkZqG.js";
 import { EmptyList as p } from "./EmptyList.js";
 import { List as a } from "./List/List.js";
 export {

package/dist/components/Sidebar/Sidebar.js

@@ -1,26 +1,29 @@
 "use client";
 import { Footer as i } from "./components/Footer/Footer.js";
-import { Logo as a } from "./components/Logo/Logo.js";
-import { NavigationGroup as t } from "./components/NavigationGroup/NavigationGroup.js";
+import { Label as a } from "./components/Label/Label.js";
+import { Logo as t } from "./components/Logo/Logo.js";
+import { NavigationGroup as m } from "./components/NavigationGroup/NavigationGroup.js";
 import { NavigationOption as p } from "./components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as m } from "./components/NavigationSeparator/NavigationSeparator.js";
+import { NavigationSeparator as e } from "./components/NavigationSeparator/NavigationSeparator.js";
 import { Navigation as n } from "./components/Navigation/Navigation.js";
-import { Wrapper as e } from "./components/Wrapper/Wrapper.js";
-import { jsx as g } from "react/jsx-runtime";
-var o = (r) => /* @__PURE__ */ g(e, { ...r });
+import { Wrapper as g } from "./components/Wrapper/Wrapper.js";
+import { jsx as f } from "react/jsx-runtime";
+var o = (r) => /* @__PURE__ */ f(g, { ...r });
 o.displayName = "KonstructSidebar";
 o.Footer = i;
-o.Logo = a;
+o.Label = a;
+o.Logo = t;
 o.Navigation = n;
-o.NavigationGroup = t;
+o.NavigationGroup = m;
 o.NavigationOption = p;
-o.NavigationSeparator = m;
+o.NavigationSeparator = e;
 export {
   i as Footer,
-  a as Logo,
+  a as Label,
+  t as Logo,
   n as Navigation,
-  t as NavigationGroup,
+  m as NavigationGroup,
   p as NavigationOption,
-  m as NavigationSeparator,
+  e as NavigationSeparator,
   o as Sidebar
 };

package/dist/components/Sidebar/Sidebar.variants.js

@@ -1,19 +1,23 @@
-import { t as r } from "../../dist-DtEbXv47.js";
-var e = r([
+import { t as a } from "../../dist-Bcn6lMQe.js";
+var e = a([
   "duration-200",
   "ease-linear",
   "flex",
   "flex-col",
-  "flex-shrink-0",
+  "shrink-0",
   "group/sidebar",
   "h-full",
   "px-4",
   "relative",
   "transition-all",
-  "w-18",
-  "md:w-64",
   "bg-kubefirst-dark-blue-900"
-]), i = r([
+], {
+  variants: { mode: {
+    expanded: ["w-64"],
+    collapsed: ["w-18"]
+  } },
+  defaultVariants: { mode: "expanded" }
+}), o = a([
   "absolute",
   "top-0",
   "right-0",
@@ -21,12 +25,12 @@ var e = r([
   "opacity-0",
   "group-hover/sidebar:opacity-100",
   "cursor-col-resize",
-  "w-[2px]",
+  "w-0.5",
   "shadow",
   "shadow-slate-200",
   "bg-slate-200"
 ]);
 export {
-  i as dragVariants,
+  o as dragVariants,
   e as wrapperSiderbarVariants
 };

package/dist/components/Sidebar/components/Footer/Footer.js

@@ -1,4 +1,4 @@
-import { t } from "../../../../utils-DHuiYnx1.js";
+import { t } from "../../../../utils-COaoD3PI.js";
 import { footerVariants as a } from "./Footer.variants.js";
 import { jsx as e } from "react/jsx-runtime";
 var m = ({ className: o, children: r }) => /* @__PURE__ */ e("footer", {

package/dist/components/Sidebar/components/Footer/Footer.variants.js

@@ -1,4 +1,4 @@
-import { t } from "../../../../dist-DtEbXv47.js";
+import { t } from "../../../../dist-Bcn6lMQe.js";
 var e = t([
   "p-2",
   "pb-5",

package/dist/components/Sidebar/components/HamburgerTrigger/HamburgerTrigger.js

@@ -0,0 +1,4 @@
+import { t as e } from "../../../../HamburgerTrigger-BzCfBWzH.js";
+export {
+  e as HamburgerTrigger
+};

package/dist/components/Sidebar/components/HamburgerTrigger/HamburgerTrigger.variants.js

@@ -0,0 +1,22 @@
+import { t as e } from "../../../../dist-Bcn6lMQe.js";
+var r = e([
+  "fixed",
+  "top-4",
+  "left-4",
+  "z-30",
+  "inline-flex",
+  "items-center",
+  "justify-center",
+  "w-10",
+  "h-10",
+  "rounded-md",
+  "bg-kubefirst-dark-blue-900",
+  "text-white",
+  "cursor-pointer",
+  "focus:outline-none",
+  "focus-visible:ring-2",
+  "focus-visible:ring-white/40"
+]);
+export {
+  r as hamburgerTriggerVariants
+};

package/dist/components/Sidebar/components/Label/Label.js

@@ -0,0 +1,20 @@
+import { t as a } from "../../../../utils-COaoD3PI.js";
+import { Typography as p } from "../../../Typography/Typography.js";
+import { useSidebarContext as l } from "../../contexts/SidebarContext.js";
+import { jsx as n } from "react/jsx-runtime";
+var d = ({ children: o, className: e, variant: r = "body1" }) => {
+  const { isCollapsed: t, expandOnHover: i, animateOnHover: s } = l();
+  return t && !i ? null : t && i ? /* @__PURE__ */ n(p, {
+    variant: r,
+    className: a("text-inherit", "absolute top-1/2 -translate-y-1/2 left-full ml-2", "overflow-hidden whitespace-nowrap", "rounded-r-xl bg-kubefirst-dark-blue-900 py-2 px-3", "shadow-lg", "max-w-0 opacity-0 invisible", "group-hover/sidebar-option:max-w-48 group-hover/sidebar-option:opacity-100 group-hover/sidebar-option:visible", s && "transition-[max-width,opacity] duration-200 ease-out", e),
+    children: o
+  }) : /* @__PURE__ */ n(p, {
+    variant: r,
+    className: a("text-inherit", e),
+    children: o
+  });
+};
+d.displayName = "KonstructSidebarLabel";
+export {
+  d as Label
+};

package/dist/components/Sidebar/components/Logo/Logo.js

@@ -1,4 +1,4 @@
-import { t as a } from "../../../../utils-DHuiYnx1.js";
+import { t as a } from "../../../../utils-COaoD3PI.js";
 import { logoVariants as m } from "./Logo.variants.js";
 import { jsx as t } from "react/jsx-runtime";
 var s = ({ children: o, className: r }) => /* @__PURE__ */ t("header", {

package/dist/components/Sidebar/components/Logo/Logo.variants.js

@@ -1,7 +1,7 @@
-import { t as p } from "../../../../dist-DtEbXv47.js";
-var o = p([
-  "md:px-4",
-  "md:py-5",
+import { t as p } from "../../../../dist-Bcn6lMQe.js";
+var t = p([
+  "group-data-[mode=expanded]/sidebar:px-4",
+  "group-data-[mode=expanded]/sidebar:py-5",
   "flex",
   "flex-col",
   "justify-center",
@@ -19,5 +19,5 @@ var o = p([
   "cursor-pointer"
 ]);
 export {
-  o as logoVariants
+  t as logoVariants
 };

package/dist/components/Sidebar/components/Navigation/Navigation.js

@@ -1,19 +1,32 @@
-import { t } from "../../../../utils-DHuiYnx1.js";
-import { NavigationTitle as r } from "../NavigationTitle/NavigationTitle.js";
-import { NavigationGroup as n } from "../NavigationGroup/NavigationGroup.js";
-import { NavigationOption as m } from "../NavigationOption/NavigationOption.js";
+import { t as c } from "../../../../utils-COaoD3PI.js";
+import { useSidebarContext as d } from "../../contexts/SidebarContext.js";
+import { NavigationTitle as y } from "../NavigationTitle/NavigationTitle.js";
+import { NavigationGroup as u } from "../NavigationGroup/NavigationGroup.js";
+import { NavigationOption as C } from "../NavigationOption/NavigationOption.js";
 import { NavigationSeparator as p } from "../NavigationSeparator/NavigationSeparator.js";
-import { navigationVariants as v } from "./Navigation.variants.js";
-import { jsx as N } from "react/jsx-runtime";
-var a = ({ className: i, children: o }) => /* @__PURE__ */ N("nav", {
-  className: t(v({ className: i })),
-  children: o
-});
-a.displayName = "KonstructSidebarNavigation";
-a.NavigationGroup = n;
-a.NavigationOption = m;
-a.NavigationSeparator = p;
-a.NavigationTitle = r;
+import { navigationVariants as S } from "./Navigation.variants.js";
+import { Children as b, Fragment as h, isValidElement as s } from "react";
+import { jsx as n } from "react/jsx-runtime";
+var v = (r) => s(r) && r.type === u, x = (r) => s(r) && r.type === p, o = ({ className: r, children: m }) => {
+  const { isCollapsed: N, separatorClassName: f } = d(), g = (() => {
+    if (!N) return m;
+    const l = b.toArray(m), t = [];
+    return l.forEach((a, i) => {
+      if (!s(a)) return;
+      const e = t[t.length - 1];
+      v(a) && e && v(e) && !x(e) && t.push(/* @__PURE__ */ n(p, { className: f }, `sidebar-auto-separator-${i}`)), t.push(a);
+    }), t.map((a, i) => /* @__PURE__ */ n(h, { children: a }, a.key ?? `sidebar-nav-child-${i}`));
+  })();
+  return /* @__PURE__ */ n("nav", {
+    className: c(S({ className: r })),
+    children: g
+  });
+};
+o.displayName = "KonstructSidebarNavigation";
+o.NavigationGroup = u;
+o.NavigationOption = C;
+o.NavigationSeparator = p;
+o.NavigationTitle = y;
 export {
-  a as Navigation
+  o as Navigation
 };

package/dist/components/Sidebar/components/Navigation/Navigation.variants.js

@@ -1,4 +1,4 @@
-import { t as a } from "../../../../dist-DtEbXv47.js";
+import { t as a } from "../../../../dist-Bcn6lMQe.js";
 var f = a([
   "flex",
   "flex-1",

package/dist/components/Sidebar/components/NavigationGroup/NavigationGroup.js

@@ -1,15 +1,19 @@
-import { t as s } from "../../../../utils-DHuiYnx1.js";
-import { NavigationTitle as e } from "../NavigationTitle/NavigationTitle.js";
+import { t as m } from "../../../../utils-COaoD3PI.js";
+import { useSidebarContext as l } from "../../contexts/SidebarContext.js";
+import { NavigationTitle as p } from "../NavigationTitle/NavigationTitle.js";
 import { navigationGroupsVariants as u } from "./NavigationGroup.variants.js";
-import { Fragment as l, jsx as a, jsxs as p } from "react/jsx-runtime";
-var N = ({ children: i, title: r, className: o, titleClassName: t, isVisible: n = !0, ...m }) => n ? /* @__PURE__ */ p(l, { children: [r ? /* @__PURE__ */ a(e, {
-  title: r,
-  className: t,
-  ...m
-}) : null, /* @__PURE__ */ a("ul", {
-  className: s(u({ className: o })),
-  children: i
-})] }) : null;
+import { Fragment as c, jsx as a, jsxs as f } from "react/jsx-runtime";
+var N = ({ children: o, title: r, className: i, titleClassName: t, isVisible: n = !0, ...s }) => {
+  const { isCollapsed: e } = l();
+  return n ? /* @__PURE__ */ f(c, { children: [r && !e ? /* @__PURE__ */ a(p, {
+    title: r,
+    className: t,
+    ...s
+  }) : null, /* @__PURE__ */ a("ul", {
+    className: m(u({ className: i })),
+    children: o
+  })] }) : null;
+};
 N.displayName = "KonstructSidebarNavigationGroup";
 export {
   N as NavigationGroup

package/dist/components/Sidebar/components/NavigationGroup/NavigationGroup.variants.js

@@ -1,4 +1,4 @@
-import { t as a } from "../../../../dist-DtEbXv47.js";
+import { t as a } from "../../../../dist-Bcn6lMQe.js";
 var r = a([
   "flex",
   "flex-col",

package/dist/components/Sidebar/components/NavigationOption/NavigationOption.js

@@ -1,16 +1,26 @@
-import { t as n } from "../../../../utils-DHuiYnx1.js";
-import { navigationOptionVariants as p } from "./NavigationOption.variants.js";
-import { jsx as e } from "react/jsx-runtime";
-var m = ({ children: i, className: t, isVisible: o = !0, isActive: r, ...a }) => o ? /* @__PURE__ */ e("li", {
-  ...a,
-  role: "option",
-  className: n(p({
-    className: t,
-    isActive: r
-  })),
-  children: i
-}) : null;
-m.displayName = "KonstructSidebarNavigationOption";
+import { t as p } from "../../../../utils-COaoD3PI.js";
+import { useSidebarContext as l } from "../../contexts/SidebarContext.js";
+import { navigationOptionVariants as m } from "./NavigationOption.variants.js";
+import { jsx as v } from "react/jsx-runtime";
+var d = ({ children: o, className: r, isVisible: i = !0, isActive: t, ...a }) => {
+  const { isCollapsed: e, expandOnHover: n } = l(), s = e && n;
+  return i ? /* @__PURE__ */ v("li", {
+    ...a,
+    role: "option",
+    className: p(m({
+      className: r,
+      isActive: t
+    }), s && [
+      "group/sidebar-option",
+      "relative",
+      "hover:z-50",
+      "hover:shadow-lg",
+      "hover:bg-kubefirst-dark-blue-900"
+    ]),
+    children: o
+  }) : null;
+};
+d.displayName = "KonstructSidebarNavigationOption";
 export {
-  m as NavigationOption
+  d as NavigationOption
 };