@ztwoint/z-ui 0.1.26 → 0.1.28

package/dist/components/assets/icons/chevron-left.d.ts

@@ -0,0 +1,7 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    secondaryfill?: string;
+    title?: string;
+};
+declare function ChevronLeft({ fill, title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default ChevronLeft;

package/dist/components/assets/icons/chevron-left.js

@@ -0,0 +1,20 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+function h({ fill: r = "currentColor", title: t = "chevron left", ...o }) {
+  return /* @__PURE__ */ n("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...o, children: [
+    /* @__PURE__ */ e("title", { children: t }),
+    /* @__PURE__ */ e("g", { fill: r, children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M8.75 11.55L4.2 7l4.55-4.55",
+        fill: "none",
+        stroke: r,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2"
+      }
+    ) })
+  ] });
+}
+export {
+  h as default
+};

package/dist/components/assets/icons/chevron-right.js

@@ -0,0 +1,30 @@
+import { jsx as t } from "react/jsx-runtime";
+function h({
+  fill: o = "#5D5D5D",
+  secondaryfill: n,
+  strokewidth: s = 1,
+  width: r = "14",
+  height: e = "14",
+  ...i
+}) {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      height: e,
+      width: r,
+      viewBox: "0 0 14 14",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...i,
+      children: /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M4.95778 2.41478C5.26089 2.11174 5.75228 2.11174 6.05539 2.41478L10.0919 6.45123C10.3948 6.75435 10.3949 7.24576 10.0919 7.54885L6.05539 11.5853C5.7523 11.8882 5.26087 11.8882 4.95778 11.5853C4.65477 11.2822 4.65483 10.7908 4.95778 10.4877L8.44543 7.00004L4.95778 3.51239C4.65472 3.20925 4.65467 2.71788 4.95778 2.41478Z",
+          fill: o
+        }
+      )
+    }
+  );
+}
+export {
+  h as default
+};

package/dist/components/assets/icons/circle-check.js

@@ -0,0 +1,32 @@
+import { jsx as e } from "react/jsx-runtime";
+function d({
+  fill: r = "currentColor",
+  secondaryfill: i,
+  strokewidth: l = 1,
+  width: c = "1em",
+  height: t = "1em",
+  ...o
+}) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      height: t,
+      id: "circle-check",
+      width: c,
+      viewBox: "0 0 12 12",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...o,
+      children: /* @__PURE__ */ e("g", { fill: r, children: /* @__PURE__ */ e(
+        "path",
+        {
+          d: "m6,0C2.691,0,0,2.691,0,6s2.691,6,6,6,6-2.691,6-6S9.309,0,6,0Zm2.853,4.45l-3.003,4c-.13.174-.329.282-.546.298-.019.001-.036.002-.054.002-.198,0-.389-.078-.53-.219l-1.503-1.5c-.293-.292-.293-.768,0-1.061s.768-.294,1.062,0l.892.89,2.484-3.31c.248-.331.718-.4,1.05-.149.331.249.398.719.149,1.05Z",
+          fill: r,
+          strokeWidth: "0"
+        }
+      ) })
+    }
+  );
+}
+export {
+  d as default
+};

package/dist/components/assets/icons/double-chevron-left.d.ts

@@ -0,0 +1,7 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    secondaryfill?: string;
+    title?: string;
+};
+declare function DoubleChevronLeft({ fill, title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default DoubleChevronLeft;

package/dist/components/assets/icons/double-chevron-left.js

@@ -0,0 +1,24 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+function l({
+  fill: o = "currentColor",
+  title: r = "double chevron left",
+  ...t
+}) {
+  return /* @__PURE__ */ n("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
+    /* @__PURE__ */ e("title", { children: r }),
+    /* @__PURE__ */ e("g", { fill: o, children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M6.75 11.55L2.2 7l4.55-4.55M11.75 11.55L7.2 7l4.55-4.55",
+        fill: "none",
+        stroke: o,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2"
+      }
+    ) })
+  ] });
+}
+export {
+  l as default
+};

package/dist/components/assets/icons/double-chevron-right.d.ts

@@ -0,0 +1,7 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    secondaryfill?: string;
+    title?: string;
+};
+declare function DoubleChevronRight({ fill, title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default DoubleChevronRight;

package/dist/components/assets/icons/double-chevron-right.js

@@ -0,0 +1,24 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+function h({
+  fill: r = "currentColor",
+  title: o = "double chevron right",
+  ...t
+}) {
+  return /* @__PURE__ */ n("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
+    /* @__PURE__ */ e("title", { children: o }),
+    /* @__PURE__ */ e("g", { fill: r, children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M7.25 2.45L11.8 7l-4.55 4.55M2.25 2.45L6.8 7l-4.55 4.55",
+        fill: "none",
+        stroke: r,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2"
+      }
+    ) })
+  ] });
+}
+export {
+  h as default
+};

package/dist/components/assets/icons/info-icon.js

@@ -0,0 +1,16 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+const l = ({ fill: o = "currentColor", title: C = "Info", ...t }) => /* @__PURE__ */ n("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
+  /* @__PURE__ */ e("title", { children: C }),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M7 2.12695C10.0877 2.12696 12.6003 4.63964 12.6003 7.72729C12.6003 10.815 10.0877 13.3276 7 13.3276C3.9123 13.3276 1.39966 10.815 1.39966 7.72729C1.3997 4.63963 3.91233 2.12695 7 2.12695ZM7 6.67712C6.6129 6.67712 6.30017 6.99141 6.30017 7.37781V10.5275C6.30022 10.9138 6.61293 11.2273 7 11.2273C7.38706 11.2273 7.69978 10.9138 7.69983 10.5275V7.37781C7.69983 6.99142 7.38709 6.67714 7 6.67712ZM7 4.22729C6.51773 4.22729 6.12505 4.62003 6.125 5.10229C6.125 5.58459 6.5177 5.97729 7 5.97729C7.48229 5.97728 7.875 5.58459 7.875 5.10229C7.87495 4.62004 7.48226 4.22731 7 4.22729Z",
+      fill: o
+    }
+  )
+] });
+export {
+  l as InfoIcon
+};

package/dist/components/assets/icons/magnifier-icon.js

@@ -0,0 +1,16 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+const l = ({ fill: r = "currentColor", title: t = "Search", ...C }) => /* @__PURE__ */ i("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...C, children: [
+  /* @__PURE__ */ e("title", { children: t }),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M5.94971 1.93848C8.36588 1.93848 10.3246 3.89733 10.3247 6.31348C10.3247 7.20512 10.0573 8.0341 9.59924 8.72571L12.1687 11.2952L12.2285 11.361C12.5089 11.7046 12.4891 12.2121 12.1687 12.5325C11.8483 12.8529 11.3409 12.8727 10.9972 12.5923L10.9314 12.5325L8.36194 9.96301C7.67032 10.4211 6.84138 10.6885 5.94971 10.6885C3.53354 10.6884 1.57471 8.72967 1.57471 6.31348C1.57482 3.89738 3.53361 1.93856 5.94971 1.93848ZM5.94971 3.68848C4.5001 3.68856 3.32482 4.86388 3.32471 6.31348C3.32471 7.76317 4.50003 8.93839 5.94971 8.93848C7.39946 8.93848 8.57471 7.76322 8.57471 6.31348C8.57459 4.86383 7.39938 3.68848 5.94971 3.68848Z",
+      fill: r
+    }
+  )
+] });
+export {
+  l as MagnifierIcon
+};

package/dist/components/assets/icons/sub-nav-indicator.d.ts

@@ -1,7 +1,8 @@
 import { SVGProps } from 'react';
 type IconProps = SVGProps<SVGSVGElement> & {
     secondaryfill?: string;
+    strokewidth?: number;
     title?: string;
 };
-declare function AngleDottedCopy({ fill, secondaryfill, title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
-export default AngleDottedCopy;
+declare function SubNavIndicator({ fill, secondaryfill: _secondaryfill, strokewidth: _strokewidth, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default SubNavIndicator;

package/dist/components/assets/icons/sub-nav-indicator.js

@@ -1,48 +1,33 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
-function d({
-  fill: h = "currentColor",
-  secondaryfill: t,
-  title: e = "badge 13",
-  ...l
+import { jsx as r } from "react/jsx-runtime";
+function l({
+  fill: t = "#5D5D5D",
+  secondaryfill: s,
+  strokewidth: o = 2,
+  width: e = "7",
+  height: i = "7",
+  ...n
 }) {
-  return t = t || h, /* @__PURE__ */ i("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...l, children: [
-    /* @__PURE__ */ a("title", { children: e }),
-    /* @__PURE__ */ i("g", { fill: h, children: [
-      /* @__PURE__ */ a(
+  return /* @__PURE__ */ r(
+    "svg",
+    {
+      height: i,
+      width: e,
+      viewBox: "0 0 9 10",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...n,
+      children: /* @__PURE__ */ r("g", { fill: "none", children: /* @__PURE__ */ r(
         "path",
         {
-          d: "M2.15 1.56a0.58 0.58 0 0 1 0.58 0.58v8.2c0 0.54 0.44 0.98 0.98 0.97h8.19a0.58 0.58 0 0 1 0 1.17h-8.19a2.15 2.15 0 0 1-2.15-2.14v-8.19a0.58 0.58 0 0 1 0.59-0.59z",
-          fill: h,
-          fillRule: "evenodd"
+          d: "M1 1.36365V6.36365C1 7.46822 1.89543 8.36365 3 8.36365H8",
+          stroke: t,
+          strokeLinecap: "round",
+          strokeOpacity: "1",
+          strokeWidth: o
         }
-      ),
-      /* @__PURE__ */ a(
-        "path",
-        {
-          d: "M4.23 7.44a0.58 0.58 0 1 0 0-1.17 0.58 0.58 0 0 0 0 1.17z",
-          fill: t,
-          fillOpacity: "0.000"
-        }
-      ),
-      /* @__PURE__ */ a(
-        "path",
-        {
-          d: "M6.01 8.62a0.58 0.58 0 1 0 0-1.17 0.58 0.58 0 0 0 0 1.17z",
-          fill: t,
-          fillOpacity: "0.000"
-        }
-      ),
-      /* @__PURE__ */ a(
-        "path",
-        {
-          d: "M7.19 10.39a0.58 0.58 0 1 0 0-1.17 0.58 0.58 0 0 0 0 1.17z",
-          fill: t,
-          fillOpacity: "0.000"
-        }
-      )
-    ] })
-  ] });
+      ) })
+    }
+  );
 }
 export {
-  d as default
+  l as default
 };

package/dist/components/button/button.d.ts

@@ -6,7 +6,7 @@ declare const buttonVariants: (props?: ({
     size?: "small" | "large" | null | undefined;
     iconOnly?: boolean | null | undefined;
 } & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
-export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style' | 'type'>, Omit<VariantProps<typeof buttonVariants>, 'iconOnly'> {
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Omit<VariantProps<typeof buttonVariants>, 'iconOnly'> {
     asChild?: boolean;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;

package/dist/components/button/button.js

@@ -1,9 +1,9 @@
-import { jsx as e, jsxs as x, Fragment as g } from "react/jsx-runtime";
+import { jsx as e, jsxs as v, Fragment as h } from "react/jsx-runtime";
 import w from "react";
 import { Slot as O } from "@radix-ui/react-slot";
 import { cva as z } from "class-variance-authority";
-import { cn as n } from "../../lib/utils.js";
-const N = z(
+import { cn as d } from "../../lib/utils.js";
+const k = z(
   "box-border h-7.5 leading-none-medium-sm flex items-center justify-center whitespace-nowrap rounded-lg  select-none hover:cursor-pointer active:outline-none border-solid",
   {
     variants: {
@@ -15,10 +15,10 @@ const N = z(
         ghost: [""]
       },
       shade: {
-        neutral: "button-primary-neutral-surface-default border-black disabled:border-none text-inverted-primary  hover:button-primary-neutral-surface-hover active:button-primary-neutral-surface-pressed  disabled:button-primary-neutral-surface-disabled disabled:text-neutral-muted",
-        brand: "button-primary-brand-surface-default border-(--color-accent-600)  text-inverted-primary hover:button-primary-brand-surface-hover active:button-primary-brand-surface-pressed disabled:button-primary-brand-surface-disabled disabled:text-neutral-muted",
-        danger: "button-primary-danger-surface-default border-(--color-red-600) text-inverted-primary hover:button-primary-danger-surface-hover active:button-primary-danger-surface-pressed disabled:button-primary-danger-surface-disabled disabled:text-neutral-muted",
-        neutralGhost: "text-neutral-primary hover:text-neutral-secondary active:text-neutral-muted disabled:text-neutral-muted"
+        brand: "bg-button-primary-brand-surface-default border-button-primary-brand-surface-default  text-text-inverted-primary hover:bg-button-primary-brand-surface-hover active:bg-button-primary-brand-surface-pressed disabled:bg-button-primary-brand-surface-disabled disabled:text-text-neutral-muted disabled:border-button-primary-brand-surface-disabled",
+        neutral: "bg-button-primary-neutral-surface-default border-button-primary-neutral-surface-default disabled:border-none text-text-inverted-primary  hover:bg-button-primary-neutral-surface-hover active:bg-button-primary-neutral-surface-pressed  disabled:bg-button-primary-neutral-surface-disabled disabled:text-text-neutral-muted",
+        danger: "bg-button-primary-danger-surface-default border-button-primary-danger-stroke-default text-text-inverted-primary hover:bg-button-primary-danger-surface-hover active:bg-button-primary-danger-surface-pressed disabled:bg-button-primary-danger-surface-disabled disabled:text-text-neutral-muted",
+        neutralGhost: "border-none text-text-neutral-primary hover:text-text-neutral-secondary active:text-text-neutral-muted disabled:text-text-neutral-muted hover:bg-transparent"
       },
       size: {
         large: "gap-1",
@@ -37,7 +37,7 @@ const N = z(
       {
         iconOnly: !0,
         size: "small",
-        class: "p-1.5"
+        class: "p-1.5 h-6.5"
       },
       {
         iconOnly: !1,
@@ -52,17 +52,32 @@ const N = z(
       {
         variant: "stroke",
         shade: "neutral",
-        class: "border-none shadow-default button-secondary-surface-default text-default-primary hover:button-secondary-surface-hover hover:text-default-secondary active:button-secondary-surface-pressed active:text-default-disabled disabled:button-secondary-surface-disabled disabled:text-default-disabled"
+        class: "border-none shadow-default dark:shadow-none bg-button-secondary-surface-default text-text-neutral-primary hover:bg-button-secondary-surface-hover hover:text-text-neutral-primary active:bg-button-secondary-surface-pressed active:text-text-neutral-primary disabled:bg-button-secondary-surface-disabled disabled:text-text-neutral-muted"
       },
       {
         variant: "stroke",
         shade: "danger",
-        class: "border-none shadow-default button-secondary-surface-default text-default-danger hover:button-secondary-surface-hover hover:text-default-danger active:button-secondary-surface-pressed active:text-default-danger disabled:button-secondary-surface-disabled disabled:text-default-disabled"
+        class: "border-none shadow-default bg-button-secondary-surface-default text-text-danger-secondary hover:bg-button-secondary-surface-hover hover:text-text-secondary active:bg-button-secondary-surface-pressed active:text-text-primary disabled:bg-button-secondary-surface-disabled disabled:text-text-neutral-muted"
+      },
+      {
+        variant: "stroke",
+        shade: "brand",
+        class: "border-none shadow-default bg-button-secondary-surface-default text-text-brand-secondary hover:bg-button-secondary-surface-hover hover:text-text-secondary active:bg-button-secondary-surface-pressed active:text-text-primary disabled:bg-button-secondary-surface-disabled disabled:text-text-neutral-muted"
       },
       {
         variant: "ghost",
         shade: "neutral",
-        class: "bg-transparent text-default-primary hover:text-default-secondary  active:text-default-disabled disabled:text-default-disabled"
+        class: "bg-transparent text-text-neutral-primary hover:text-text-neutral-secondary  active:text-text-neutral-muted disabled:text-text-neutral-muted hover:bg-transparent active:bg-transparent"
+      },
+      {
+        variant: "ghost",
+        shade: "brand",
+        class: "bg-transparent text-text-brand-primary hover:text-text-neutral-secondary  active:text-text-neutral-muted disabled:text-text-neutral-muted hover:bg-transparent active:bg-transparent"
+      },
+      {
+        variant: "ghost",
+        shade: "danger",
+        class: "bg-transparent text-text-danger-primary hover:text-text-neutral-secondary  active:text-text-neutral-muted disabled:text-text-neutral-muted hover:bg-transparent active:bg-transparent"
       }
     ],
     defaultVariants: {
@@ -72,31 +87,31 @@ const N = z(
       iconOnly: !1
     }
   }
-), k = w.forwardRef(
+), N = w.forwardRef(
   ({
-    className: u,
-    shade: c,
-    size: b,
-    variant: f,
+    className: i,
+    shade: b = "neutral",
+    size: c,
+    variant: x = "filled",
     asChild: o = !1,
-    leftIcon: a,
-    rightIcon: t,
-    label: m,
-    children: l,
-    ...p
+    leftIcon: t,
+    rightIcon: a,
+    label: p,
+    children: u,
+    ...m
   }, y) => {
-    const v = o ? O : "button", r = m || l, s = !r && !!(a || t), i = s ? a || t : null, h = n(
-      N({ shade: c, size: b, variant: f, iconOnly: s, className: u })
-    ), d = "w-3.5 h-3.5";
-    return /* @__PURE__ */ e(v, { className: h, ref: y, ...p, children: o ? l : s ? i ? /* @__PURE__ */ e("span", { className: d, children: i }) : null : /* @__PURE__ */ x(g, { children: [
-      a && /* @__PURE__ */ e("span", { className: n(d), children: a }),
+    const f = o ? O : "button", r = p || u, n = !r && !!(t || a), l = n ? t || a : null, g = d(
+      k({ shade: b, size: c, variant: x, iconOnly: n, className: i })
+    ), s = "w-3.5 h-3.5";
+    return /* @__PURE__ */ e(f, { className: g, ref: y, ...m, children: o ? u : n ? l ? /* @__PURE__ */ e("span", { className: s, children: l }) : null : /* @__PURE__ */ v(h, { children: [
+      t && /* @__PURE__ */ e("span", { className: d(s), children: t }),
       r && /* @__PURE__ */ e("span", { children: r }),
-      t && /* @__PURE__ */ e("span", { className: n(d), children: t })
+      a && /* @__PURE__ */ e("span", { className: d(s), children: a })
     ] }) });
   }
 );
-k.displayName = "Button";
+N.displayName = "Button";
 export {
-  k as Button,
-  N as buttonVariants
+  N as Button,
+  k as buttonVariants
 };

package/dist/components/collapsible-side-nav-bar/side-nav-bar-content.js

@@ -1,29 +1,29 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as l from "react";
-import { cn as f } from "../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+import * as i from "react";
+import { cn as l } from "../../lib/utils.js";
 import { useZ2SideNavBar as m } from "./context.js";
-const s = l.forwardRef(
-  ({ className: e, children: r, ...o }, t) => {
-    const { isCollapsed: i } = m();
-    return i ? /* @__PURE__ */ a(
+const s = i.forwardRef(
+  ({ className: e, children: o, ...r }, a) => {
+    const { isCollapsed: f } = m();
+    return f ? /* @__PURE__ */ t(
       "div",
       {
-        ref: t,
-        className: f(
+        ref: a,
+        className: l(
           "flex-1 overflow-y-auto flex flex-col items-start gap-2 relative w-10.5 max-w-10.5",
           "border-b border-gray-200",
           e
         ),
-        ...o,
-        children: r
+        ...r,
+        children: o
       }
-    ) : /* @__PURE__ */ a(
+    ) : /* @__PURE__ */ t(
       "div",
       {
-        ref: t,
-        className: f("flex flex-col items-center flex-1 overflow-y-auto", e),
-        ...o,
-        children: r
+        ref: a,
+        className: l("flex flex-col flex-1 overflow-y-auto w-full", e),
+        ...r,
+        children: o
       }
     );
   }

package/dist/components/collapsible-side-nav-bar/side-nav-bar-footer.js

@@ -16,7 +16,7 @@ const d = m.forwardRef(
         ...t,
         children: e
       }
-    ) : /* @__PURE__ */ a("div", { ref: o, className: i("p-4 border-t border-gray-200", r), ...t, children: e });
+    ) : /* @__PURE__ */ a("div", { ref: o, className: i("p-2 border-t border-gray-200", r), ...t, children: e });
   }
 );
 d.displayName = "Z2SideNavBarFooter";

package/dist/components/collapsible-side-nav-bar/side-nav-bar-group.js

@@ -1,25 +1,33 @@
-import { jsx as i, jsxs as p } from "react/jsx-runtime";
-import * as c from "react";
+import { jsx as i, jsxs as d } from "react/jsx-runtime";
+import * as p from "react";
 import { cn as m } from "../../lib/utils.js";
-import { useZ2SideNavBar as d } from "./context.js";
-const f = c.forwardRef(
-  ({ className: r, children: e, title: a, ...t }, o) => {
-    const { isCollapsed: s } = d(), l = a && !s;
-    return s ? /* @__PURE__ */ i(
+import { useZ2SideNavBar as c } from "./context.js";
+const n = p.forwardRef(
+  ({ className: e, children: r, title: a, ...s }, o) => {
+    const { isCollapsed: t } = c(), l = a && !t;
+    return t ? /* @__PURE__ */ i(
       "div",
       {
         ref: o,
-        className: m("flex flex-col items-start gap-1.5 p-1.5  relative", r),
-        ...t,
-        children: e
+        className: m("flex flex-col items-start gap-1.5 p-1.5  relative", e),
+        ...s,
+        children: r
       }
-    ) : /* @__PURE__ */ p("div", { ref: o, className: m("w-56 max-w-56 pt-2", r), ...t, children: [
-      l && /* @__PURE__ */ i("h3", { className: "text-sm font-medium text-(--color-neutral-600) px-2 pb-2", children: a }),
-      e
-    ] });
+    ) : /* @__PURE__ */ d(
+      "div",
+      {
+        ref: o,
+        className: m("p-2 flex flex-col gap-1.5 items-stretch", e),
+        ...s,
+        children: [
+          l && /* @__PURE__ */ i("div", { className: "leading-none-medium-sm text-neutral-secondary p-2 pb-1", children: a }),
+          r
+        ]
+      }
+    );
   }
 );
-f.displayName = "Z2SideNavBarGroup";
+n.displayName = "Z2SideNavBarGroup";
 export {
-  f as Z2SideNavBarGroup
+  n as Z2SideNavBarGroup
 };