periplo-ui 4.8.0 → 4.8.2

package/dist/components/Sidebar/Sidebar.d.ts

@@ -48,7 +48,9 @@ declare const SidebarInput: React.ForwardRefExoticComponent<Omit<{
     stepControls?: boolean;
     inputClassName?: string;
     onClear?: boolean | (() => void);
-} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement> & {
+    size?: SidebarSize;
+}, "ref"> & React.RefAttributes<HTMLInputElement>>;
 declare const SidebarHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SidebarFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SidebarSeparator: React.ForwardRefExoticComponent<Omit<{
@@ -58,11 +60,19 @@ declare const SidebarSeparator: React.ForwardRefExoticComponent<Omit<{
 } & Omit<import('@radix-ui/react-separator').SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SidebarContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SidebarGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const sidebarGroupLabelVariants: (props?: ({
+    size?: "big" | "small" | "medium" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const SidebarGroupLabel: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
     asChild?: boolean;
+    size?: SidebarSize;
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const sidebarGroupActionVariants: (props?: ({
+    size?: "big" | "small" | "medium" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const SidebarGroupAction: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     asChild?: boolean;
+    size?: SidebarSize;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const SidebarGroupContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SidebarMenu: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
@@ -78,18 +88,38 @@ declare const SidebarMenuButton: React.ForwardRefExoticComponent<Omit<React.Clas
     variant?: "navigation-item" | "element";
     size?: SidebarSize;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const sidebarMenuActionVariants: (props?: ({
+    size?: "big" | "small" | "medium" | null | undefined;
+    showOnHover?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const SidebarMenuAction: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     asChild?: boolean;
     showOnHover?: boolean;
+    size?: SidebarSize;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const SidebarMenuBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const sidebarMenuBadgeVariants: (props?: ({
+    size?: "big" | "small" | "medium" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const SidebarMenuBadge: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    size?: SidebarSize;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SidebarMenuSkeleton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
     showIcon?: boolean;
+    size?: SidebarSize;
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SidebarMenuSub: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const sidebarMenuSubVariants: (props?: ({
+    size?: "big" | "small" | "medium" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const SidebarMenuSub: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement> & {
+    size?: SidebarSize;
+}, "ref"> & React.RefAttributes<HTMLUListElement>>;
 declare const SidebarMenuSubItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const sidebarMenuSubButtonVariants: (props?: ({
+    size?: "big" | "small" | "medium" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const SidebarMenuSubButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
     asChild?: boolean;
     isActive?: boolean;
+    size?: SidebarSize;
 }, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-export { SidebarRoot, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, sidebarMenuButtonVariants, useSidebar, };
+export { SidebarRoot, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, sidebarGroupActionVariants, sidebarGroupLabelVariants, sidebarMenuActionVariants, sidebarMenuBadgeVariants, sidebarMenuButtonVariants, sidebarMenuSubButtonVariants, sidebarMenuSubVariants, useSidebar, };

package/dist/components/Sidebar/Sidebar.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { List } from '@phosphor-icons/react/dist/ssr/List';
 import { SidebarSimple } from '@phosphor-icons/react/dist/ssr/SidebarSimple';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -94,10 +95,7 @@ const SidebarProvider = React.forwardRef(
           "--sidebar-width-icon": SIDEBAR_WIDTH_ICON[size],
           ...style
         },
-        className: cn(
-          "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
-          className
-        ),
+        className: cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", className),
         ref,
         ...props,
         children
@@ -177,7 +175,7 @@ const SidebarRoot = React.forwardRef(({ side = "left", variant = "default", clas
 SidebarRoot.displayName = "SidebarRoot";
 const SidebarTrigger = React.forwardRef(
   ({ className, onClick, ...props }, ref) => {
-    const { toggleSidebar } = useSidebar();
+    const { isMobile, toggleSidebar } = useSidebar();
     return /* @__PURE__ */ jsx(
       Button,
       {
@@ -190,7 +188,7 @@ const SidebarTrigger = React.forwardRef(
           toggleSidebar();
         },
         ...props,
-        StartIcon: SidebarSimple,
+        StartIcon: isMobile ? List : SidebarSimple,
         children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
       }
     );
@@ -239,22 +237,28 @@ const SidebarInset = React.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarInset.displayName = "SidebarInset";
-const SidebarInput = React.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Input,
-      {
-        ref,
-        "data-sidebar": "input",
-        className: cn(
-          "bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2",
-          className
-        ),
-        ...props
-      }
-    );
-  }
-);
+const SIDEBAR_INPUT_HEIGHT = {
+  small: "h-8",
+  medium: "h-10",
+  big: "h-12"
+};
+const SidebarInput = React.forwardRef(({ className, size, ...props }, ref) => {
+  const { size: contextSize } = useSidebar();
+  const resolvedSize = size ?? contextSize;
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref,
+      "data-sidebar": "input",
+      className: cn(
+        "bg-background focus-visible:ring-sidebar-ring w-full shadow-none focus-visible:ring-2",
+        SIDEBAR_INPUT_HEIGHT[resolvedSize],
+        className
+      ),
+      ...props
+    }
+  );
+});
 SidebarInput.displayName = "SidebarInput";
 const SidebarHeader = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx("div", { ref, "data-sidebar": "header", className: cn("flex flex-col gap-2 p-2", className), ...props });
@@ -306,46 +310,71 @@ const SidebarGroup = React.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarGroup.displayName = "SidebarGroup";
-const SidebarGroupLabel = React.forwardRef(
-  ({ className, asChild = false, children, ...props }, ref) => {
-    const Comp = asChild ? Slot : "div";
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        ref,
-        "data-sidebar": "group-label",
-        className: cn(
-          "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 transition-[margin,opacity] duration-200 ease-linear outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-          "group-data-[state=collapsed]:group-data-[variant=hidden]:hidden",
-          "group-data-[state=collapsed]:group-data-[variant=default]:-mt-8 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0",
-          className
-        ),
-        ...props,
-        children: typeof children === "string" ? /* @__PURE__ */ jsx(Typography, { variant: "label-md", color: "secondary", children }) : children
+const sidebarGroupLabelVariants = cva(
+  "text-sidebar-foreground/70 ring-sidebar-ring flex shrink-0 items-center rounded-md transition-[margin,opacity] duration-200 ease-linear outline-none focus-visible:ring-2 [&>svg]:shrink-0 group-data-[state=collapsed]:group-data-[variant=hidden]:hidden",
+  {
+    variants: {
+      size: {
+        small: "h-8 px-2 [&>svg]:size-4 group-data-[state=collapsed]:group-data-[variant=default]:-mt-8 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0",
+        medium: "h-9 px-2.5 [&>svg]:size-4 group-data-[state=collapsed]:group-data-[variant=default]:-mt-9 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0",
+        big: "h-10 px-3 [&>svg]:size-5 group-data-[state=collapsed]:group-data-[variant=default]:-mt-10 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0"
       }
-    );
+    },
+    defaultVariants: {
+      size: "small"
+    }
   }
 );
+const SIDEBAR_GROUP_LABEL_TEXT_VARIANT = {
+  small: "label-md",
+  medium: "label-md",
+  big: "label-lg"
+};
+const SidebarGroupLabel = React.forwardRef(({ className, asChild = false, size, children, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div";
+  const { size: contextSize } = useSidebar();
+  const resolvedSize = size ?? contextSize;
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-sidebar": "group-label",
+      className: cn(sidebarGroupLabelVariants({ size: resolvedSize }), className),
+      ...props,
+      children: typeof children === "string" ? /* @__PURE__ */ jsx(Typography, { variant: SIDEBAR_GROUP_LABEL_TEXT_VARIANT[resolvedSize], color: "secondary", children }) : children
+    }
+  );
+});
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
-const SidebarGroupAction = React.forwardRef(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        ref,
-        "data-sidebar": "group-action",
-        className: cn(
-          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-          "after:absolute after:-inset-2 after:md:hidden",
-          "group-data-[state=collapsed]:hidden",
-          className
-        ),
-        ...props
+const sidebarGroupActionVariants = cva(
+  "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute flex aspect-square items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 after:absolute after:-inset-2 after:md:hidden group-data-[state=collapsed]:hidden [&>svg]:shrink-0",
+  {
+    variants: {
+      size: {
+        small: "top-3.5 right-3 w-5 [&>svg]:size-4",
+        medium: "top-4 right-3 w-5 [&>svg]:size-4",
+        big: "top-4 right-3 w-6 [&>svg]:size-5"
       }
-    );
+    },
+    defaultVariants: {
+      size: "small"
+    }
   }
 );
+const SidebarGroupAction = React.forwardRef(({ className, asChild = false, size, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+  const { size: contextSize } = useSidebar();
+  const resolvedSize = size ?? contextSize;
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-sidebar": "group-action",
+      className: cn(sidebarGroupActionVariants({ size: resolvedSize }), className),
+      ...props
+    }
+  );
+});
 SidebarGroupAction.displayName = "SidebarGroupAction";
 const SidebarGroupContent = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-sidebar": "group-content", className: cn("w-full text-sm", className), ...props })
@@ -406,44 +435,81 @@ const SidebarMenuButton = React.forwardRef(
   }
 );
 SidebarMenuButton.displayName = "SidebarMenuButton";
-const SidebarMenuAction = React.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+const sidebarMenuActionVariants = cva(
+  "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute flex aspect-square items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 after:absolute after:-inset-2 after:md:hidden group-data-[state=collapsed]:hidden [&>svg]:shrink-0",
+  {
+    variants: {
+      size: {
+        small: "top-1.5 right-1 w-5 [&>svg]:size-4",
+        medium: "top-2.5 right-1 w-5 [&>svg]:size-4",
+        big: "top-3 right-1.5 w-6 [&>svg]:size-5"
+      },
+      showOnHover: {
+        true: "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=expanded]:opacity-100 md:opacity-0",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "small",
+      showOnHover: false
+    }
+  }
+);
+const SidebarMenuAction = React.forwardRef(({ className, asChild = false, showOnHover = false, size, ...props }, ref) => {
   const Comp = asChild ? Slot : "button";
+  const { size: contextSize } = useSidebar();
+  const resolvedSize = size ?? contextSize;
   return /* @__PURE__ */ jsx(
     Comp,
     {
       ref,
       "data-sidebar": "menu-action",
-      className: cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "after:absolute after:-inset-2 after:md:hidden",
-        "group-data-[state=collapsed]:hidden",
-        showOnHover && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=expanded]:opacity-100 md:opacity-0",
-        className
-      ),
+      className: cn(sidebarMenuActionVariants({ size: resolvedSize, showOnHover }), className),
       ...props
     }
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-const SidebarMenuBadge = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      "data-sidebar": "menu-badge",
-      className: cn(
-        "text-sidebar-foreground pointer-events-none absolute top-1.5 right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
-        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-        "group-data-[state=collapsed]:group-data-[variant=hidden]:hidden",
-        "group-data-[state=collapsed]:group-data-[variant=default]:opacity-0",
-        className
-      ),
-      ...props
+const sidebarMenuBadgeVariants = cva(
+  "text-sidebar-foreground pointer-events-none absolute flex items-center justify-center rounded-md font-medium tabular-nums select-none peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-data-[state=collapsed]:group-data-[variant=hidden]:hidden group-data-[state=collapsed]:group-data-[variant=default]:opacity-0",
+  {
+    variants: {
+      size: {
+        small: "top-1.5 right-1 h-5 min-w-5 px-1 text-xs",
+        medium: "top-2.5 right-1 h-5 min-w-5 px-1 text-xs",
+        big: "top-3 right-1.5 h-6 min-w-6 px-1.5 text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "small"
     }
-  )
+  }
+);
+const SidebarMenuBadge = React.forwardRef(
+  ({ className, size, ...props }, ref) => {
+    const { size: contextSize } = useSidebar();
+    const resolvedSize = size ?? contextSize;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-sidebar": "menu-badge",
+        className: cn(sidebarMenuBadgeVariants({ size: resolvedSize }), className),
+        ...props
+      }
+    );
+  }
 );
 SidebarMenuBadge.displayName = "SidebarMenuBadge";
-const SidebarMenuSkeleton = React.forwardRef(({ className, showIcon = false, ...props }, ref) => {
+const SIDEBAR_MENU_SKELETON = {
+  small: { row: "h-8 gap-2 px-2", icon: "size-4", text: "h-4" },
+  medium: { row: "h-10 gap-3 px-2.5", icon: "size-5", text: "h-4" },
+  big: { row: "h-12 gap-4 px-3", icon: "size-6", text: "h-5" }
+};
+const SidebarMenuSkeleton = React.forwardRef(({ className, showIcon = false, size, ...props }, ref) => {
+  const { size: contextSize } = useSidebar();
+  const resolvedSize = size ?? contextSize;
+  const dims = SIDEBAR_MENU_SKELETON[resolvedSize];
   const width = React.useMemo(() => {
     return `${Math.floor(window.crypto.getRandomValues(new Uint32Array(1))[0] % 40 + 50)}%`;
   }, []);
@@ -452,14 +518,14 @@ const SidebarMenuSkeleton = React.forwardRef(({ className, showIcon = false, ...
     {
       ref,
       "data-sidebar": "menu-skeleton",
-      className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+      className: cn("flex items-center rounded-md", dims.row, className),
       ...props,
       children: [
-        showIcon && /* @__PURE__ */ jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }),
+        showIcon && /* @__PURE__ */ jsx(Skeleton, { className: cn("rounded-md", dims.icon), "data-sidebar": "menu-skeleton-icon" }),
         /* @__PURE__ */ jsx(
           Skeleton,
           {
-            className: "h-4 max-w-(--skeleton-width) flex-1",
+            className: cn("max-w-(--skeleton-width) flex-1", dims.text),
             "data-sidebar": "menu-skeleton-text",
             style: {
               "--skeleton-width": width
@@ -471,38 +537,65 @@ const SidebarMenuSkeleton = React.forwardRef(({ className, showIcon = false, ...
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-const SidebarMenuSub = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "ul",
-    {
-      ref,
-      "data-sidebar": "menu-sub",
-      className: cn(
-        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
-        "group-data-[state=collapsed]:hidden",
-        className
-      ),
-      ...props
+const sidebarMenuSubVariants = cva(
+  "border-sidebar-border flex min-w-0 flex-col gap-1 border-l py-0.5 group-data-[state=collapsed]:hidden",
+  {
+    variants: {
+      size: {
+        small: "ml-[15px] pl-2.5",
+        medium: "ml-[19px] pl-2.5",
+        big: "ml-[23px] pl-3"
+      }
+    },
+    defaultVariants: {
+      size: "small"
     }
-  )
+  }
+);
+const SidebarMenuSub = React.forwardRef(
+  ({ className, size, ...props }, ref) => {
+    const { size: contextSize } = useSidebar();
+    const resolvedSize = size ?? contextSize;
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref,
+        "data-sidebar": "menu-sub",
+        className: cn(sidebarMenuSubVariants({ size: resolvedSize }), className),
+        ...props
+      }
+    );
+  }
 );
 SidebarMenuSub.displayName = "SidebarMenuSub";
 const SidebarMenuSubItem = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, ...props }));
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-const SidebarMenuSubButton = React.forwardRef(({ asChild = false, isActive, className, children, ...props }, ref) => {
+const sidebarMenuSubButtonVariants = cva(
+  "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex w-full min-w-0 items-center gap-2 overflow-hidden rounded-md outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground group-data-[state=collapsed]:hidden [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      size: {
+        small: "h-8 px-2",
+        medium: "h-10 px-2.5",
+        big: "h-12 px-3"
+      }
+    },
+    defaultVariants: {
+      size: "small"
+    }
+  }
+);
+const SidebarMenuSubButton = React.forwardRef(({ asChild = false, isActive, className, children, size, ...props }, ref) => {
   const Comp = asChild ? Slot : "a";
+  const { size: contextSize } = useSidebar();
+  const resolvedSize = size ?? contextSize;
   return /* @__PURE__ */ jsx(
     Comp,
     {
       ref,
       "data-sidebar": "menu-sub-button",
       "data-active": isActive,
-      className: cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        "group-data-[state=collapsed]:hidden",
-        className
-      ),
+      className: cn(sidebarMenuSubButtonVariants({ size: resolvedSize }), className),
       ...props,
       children: typeof children === "string" ? /* @__PURE__ */ jsx(Typography, { variant: "body-md", children }) : children
     }
@@ -510,5 +603,5 @@ const SidebarMenuSubButton = React.forwardRef(({ asChild = false, isActive, clas
 });
 SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 
-export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarRoot, SidebarSeparator, SidebarTrigger, sidebarMenuButtonVariants, useSidebar };
+export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarRoot, SidebarSeparator, SidebarTrigger, sidebarGroupActionVariants, sidebarGroupLabelVariants, sidebarMenuActionVariants, sidebarMenuBadgeVariants, sidebarMenuButtonVariants, sidebarMenuSubButtonVariants, sidebarMenuSubVariants, useSidebar };
 //# sourceMappingURL=Sidebar.js.map

package/dist/components/Sidebar/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["'use client'\n\nimport { SidebarSimple as SidebarIcon } from '@phosphor-icons/react/dist/ssr/SidebarSimple'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../../lib/useMobile'\nimport { Button } from '../Button'\nimport { Input } from '../Input'\nimport { Separator } from '../Separator'\nimport { SheetContent, SheetDescription, SheetHeader, SheetRoot, SheetTitle } from '../Sheet'\nimport { Skeleton } from '../Skeleton'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '../Tooltip'\nimport { Typography } from '../Typography'\n\nimport { cn } from '@/lib/utils'\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport type SidebarSize = 'small' | 'medium' | 'big'\n\nconst SIDEBAR_WIDTH_ICON: Record<SidebarSize, string> = {\n  small: '3rem',\n  medium: '3.5rem',\n  big: '4rem',\n}\n\ntype SidebarContext = {\n  state: 'expanded' | 'collapsed'\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n  size: SidebarSize\n}\n\nconst SidebarContext = React.createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.')\n  }\n\n  return context\n}\n\nconst SidebarProvider = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    defaultOpen?: boolean\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n    size?: SidebarSize\n  }\n>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange: setOpenProp,\n      size = 'small',\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const isMobile = useIsMobile()\n    const [openMobile, setOpenMobile] = React.useState(false)\n\n    // This is the internal state of the sidebar.\n    // We use openProp and setOpenProp for control from outside the component.\n    const [_open, _setOpen] = React.useState(defaultOpen)\n    const open = openProp ?? _open\n    const setOpen = React.useCallback(\n      (value: boolean | ((value: boolean) => boolean)) => {\n        const openState = typeof value === 'function' ? value(open) : value\n        if (setOpenProp) {\n          setOpenProp(openState)\n        } else {\n          _setOpen(openState)\n        }\n\n        // This sets the cookie to keep the sidebar state.\n        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n      },\n      [setOpenProp, open],\n    )\n\n    // Helper to toggle the sidebar.\n    const toggleSidebar = React.useCallback(() => {\n      isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n    }, [isMobile, setOpen, setOpenMobile])\n\n    // Adds a keyboard shortcut to toggle the sidebar.\n    React.useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n          event.preventDefault()\n          toggleSidebar()\n        }\n      }\n\n      window.addEventListener('keydown', handleKeyDown)\n      return () => window.removeEventListener('keydown', handleKeyDown)\n    }, [toggleSidebar])\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = open ? 'expanded' : 'collapsed'\n\n    const contextValue = React.useMemo<SidebarContext>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n        size,\n      }),\n      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, size],\n    )\n\n    return (\n      <SidebarContext.Provider value={contextValue}>\n        <TooltipProvider delayDuration={0}>\n          <div\n            style={\n              {\n                '--sidebar-width': SIDEBAR_WIDTH,\n                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON[size],\n                ...style,\n              } as React.CSSProperties\n            }\n            className={cn(\n              'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',\n              className,\n            )}\n            ref={ref}\n            {...props}\n          >\n            {children}\n          </div>\n        </TooltipProvider>\n      </SidebarContext.Provider>\n    )\n  },\n)\nSidebarProvider.displayName = 'SidebarProvider'\n\nconst SidebarRoot = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    side?: 'left' | 'right'\n    variant?: 'default' | 'hidden'\n  }\n>(({ side = 'left', variant = 'default', className, children, ...props }, ref) => {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (isMobile) {\n    return (\n      <SheetRoot open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </SheetRoot>\n    )\n  }\n\n  return (\n    <div\n      ref={ref}\n      className=\"group peer text-sidebar-foreground hidden shadow-md md:block\"\n      data-state={state}\n      data-side={side}\n      data-variant={variant}\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        className={cn(\n          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n          variant === 'default' && 'group-data-[state=collapsed]:w-(--sidebar-width-icon)',\n          variant === 'hidden' && 'group-data-[state=collapsed]:w-0',\n          'group-data-[side=right]:rotate-180',\n        )}\n      />\n      <div\n        className={cn(\n          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n          side === 'left'\n            ? [\n                'left-0',\n                variant === 'default' && 'group-data-[state=collapsed]:w-(--sidebar-width-icon)',\n                variant === 'hidden' && 'group-data-[state=collapsed]:-left-(--sidebar-width)',\n              ]\n            : [\n                'right-0',\n                variant === 'default' && 'group-data-[state=collapsed]:w-(--sidebar-width-icon)',\n                variant === 'hidden' && 'group-data-[state=collapsed]:-right-(--sidebar-width)',\n              ],\n          'group-data-[side=left]:border-r group-data-[side=right]:border-l',\n          className,\n        )}\n        {...props}\n      >\n        <div data-sidebar=\"sidebar\" className=\"bg-sidebar flex h-full w-full flex-col\">\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n})\nSidebarRoot.displayName = 'SidebarRoot'\n\nconst SidebarTrigger = React.forwardRef<React.ComponentRef<typeof Button>, React.ComponentProps<typeof Button>>(\n  ({ className, onClick, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar()\n\n    return (\n      <Button\n        ref={ref}\n        data-sidebar=\"trigger\"\n        variant=\"text\"\n        className={cn('text-primary-foreground h-8 w-8 p-1', className)}\n        onClick={(event) => {\n          onClick?.(event)\n          toggleSidebar()\n        }}\n        {...props}\n        StartIcon={SidebarIcon}\n      >\n        <span className=\"sr-only\">Toggle Sidebar</span>\n      </Button>\n    )\n  },\n)\nSidebarTrigger.displayName = 'SidebarTrigger'\n\nconst SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<'button'>>(\n  ({ className, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar()\n\n    return (\n      <button\n        ref={ref}\n        data-sidebar=\"rail\"\n        aria-label=\"Toggle Sidebar\"\n        tabIndex={-1}\n        onClick={toggleSidebar}\n        title=\"Toggle Sidebar\"\n        className={cn(\n          'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 sm:flex',\n          'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n          '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n          'group-data-[variant=offcanvas]:hover:bg-sidebar group-data-[variant=offcanvas]:translate-x-0 group-data-[variant=offcanvas]:after:left-full',\n          '[[data-side=left][data-variant=offcanvas]_&]:-right-2',\n          '[[data-side=right][data-variant=offcanvas]_&]:-left-2',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarRail.displayName = 'SidebarRail'\n\nconst SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<'main'>>(({ className, ...props }, ref) => {\n  return (\n    <main\n      ref={ref}\n      className={cn(\n        'bg-background relative flex w-full flex-1 flex-col',\n        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInset.displayName = 'SidebarInset'\n\nconst SidebarInput = React.forwardRef<React.ComponentRef<typeof Input>, React.ComponentProps<typeof Input>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <Input\n        ref={ref}\n        data-sidebar=\"input\"\n        className={cn(\n          'bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarInput.displayName = 'SidebarInput'\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return <div ref={ref} data-sidebar=\"header\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />\n})\nSidebarHeader.displayName = 'SidebarHeader'\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return <div ref={ref} data-sidebar=\"footer\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />\n})\nSidebarFooter.displayName = 'SidebarFooter'\n\nconst SidebarSeparator = React.forwardRef<React.ComponentRef<typeof Separator>, React.ComponentProps<typeof Separator>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <Separator\n        ref={ref}\n        data-sidebar=\"separator\"\n        className={cn('bg-sidebar-border mx-2 w-auto', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarSeparator.displayName = 'SidebarSeparator'\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"content\"\n      className={cn(\n        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto',\n        'group-data-[variant=default]:group-data-[state=collapsed]:overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarContent.displayName = 'SidebarContent'\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"group\"\n      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n      {...props}\n    />\n  )\n})\nSidebarGroup.displayName = 'SidebarGroup'\n\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'> & { asChild?: boolean }>(\n  ({ className, asChild = false, children, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp\n        ref={ref}\n        data-sidebar=\"group-label\"\n        className={cn(\n          'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 transition-[margin,opacity] duration-200 ease-linear outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n          'group-data-[state=collapsed]:group-data-[variant=hidden]:hidden',\n          'group-data-[state=collapsed]:group-data-[variant=default]:-mt-8 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n          className,\n        )}\n        {...props}\n      >\n        {typeof children === 'string' ? (\n          <Typography variant=\"label-md\" color=\"secondary\">\n            {children}\n          </Typography>\n        ) : (\n          children\n        )}\n      </Comp>\n    )\n  },\n)\nSidebarGroupLabel.displayName = 'SidebarGroupLabel'\n\nconst SidebarGroupAction = React.forwardRef<HTMLButtonElement, React.ComponentProps<'button'> & { asChild?: boolean }>(\n  ({ className, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'button'\n\n    return (\n      <Comp\n        ref={ref}\n        data-sidebar=\"group-action\"\n        className={cn(\n          'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n          'after:absolute after:-inset-2 after:md:hidden',\n          'group-data-[state=collapsed]:hidden',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarGroupAction.displayName = 'SidebarGroupAction'\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />\n  ),\n)\nSidebarGroupContent.displayName = 'SidebarGroupContent'\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(({ className, ...props }, ref) => (\n  <ul ref={ref} data-sidebar=\"menu\" className={cn('flex w-full min-w-0 flex-col gap-1', className)} {...props} />\n))\nSidebarMenu.displayName = 'SidebarMenu'\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ className, ...props }, ref) => (\n  <li ref={ref} data-sidebar=\"menu-item\" className={cn('group/menu-item relative', className)} {...props} />\n))\nSidebarMenuItem.displayName = 'SidebarMenuItem'\n\nconst sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground items-center overflow-hidden rounded-md text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=expanded]:hover:bg-sidebar-accent data-[state=expanded]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        'navigation-item': '',\n        element: 'group-data-[state=collapsed]:!p-0',\n      },\n      size: {\n        small: 'h-8 gap-2 p-2 [&>svg]:size-4',\n        medium: 'h-10 gap-3 p-2.5 [&>svg]:size-5',\n        big: 'h-12 gap-4 p-3 [&>svg]:size-6',\n      },\n    },\n    defaultVariants: {\n      variant: 'navigation-item',\n      size: 'small',\n    },\n  },\n)\n\nconst SidebarMenuButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<'button'> & {\n    asChild?: boolean\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n    variant?: 'navigation-item' | 'element'\n    size?: SidebarSize\n  }\n>(\n  (\n    { asChild = false, isActive = false, tooltip, className, children, variant = 'navigation-item', size, ...props },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'button'\n    const { isMobile, state, size: contextSize } = useSidebar()\n    const resolvedSize = size ?? contextSize\n\n    const button = (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-button\"\n        data-active={isActive}\n        className={cn(sidebarMenuButtonVariants({ variant, size: resolvedSize }), className)}\n        {...props}\n      >\n        {children}\n      </Comp>\n    )\n\n    if (!tooltip) {\n      return button\n    }\n\n    if (typeof tooltip === 'string') {\n      tooltip = {\n        children: tooltip,\n      }\n    }\n\n    return (\n      <TooltipRoot>\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\n        <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n      </TooltipRoot>\n    )\n  },\n)\nSidebarMenuButton.displayName = 'SidebarMenuButton'\n\nconst SidebarMenuAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<'button'> & {\n    asChild?: boolean\n    showOnHover?: boolean\n  }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n        'after:absolute after:-inset-2 after:md:hidden',\n        'group-data-[state=collapsed]:hidden',\n        showOnHover &&\n          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=expanded]:opacity-100 md:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuAction.displayName = 'SidebarMenuAction'\n\nconst SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        'text-sidebar-foreground pointer-events-none absolute top-1.5 right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',\n        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n        'group-data-[state=collapsed]:group-data-[variant=hidden]:hidden',\n        'group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuBadge.displayName = 'SidebarMenuBadge'\n\nconst SidebarMenuSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    showIcon?: boolean\n  }\n>(({ className, showIcon = false, ...props }, ref) => {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor((window.crypto.getRandomValues(new Uint32Array(1))[0] % 40) + 50)}%`\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n      {...props}\n    >\n      {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            '--skeleton-width': width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n})\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'\n\nconst SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',\n        'group-data-[state=collapsed]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuSub.displayName = 'SidebarMenuSub'\n\nconst SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ ...props }, ref) => (\n  <li ref={ref} {...props} />\n))\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem'\n\nconst SidebarMenuSubButton = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentProps<'a'> & {\n    asChild?: boolean\n    isActive?: boolean\n  }\n>(({ asChild = false, isActive, className, children, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'a'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-active={isActive}\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n        'group-data-[state=collapsed]:hidden',\n        className,\n      )}\n      {...props}\n    >\n      {typeof children === 'string' ? <Typography variant=\"body-md\">{children}</Typography> : children}\n    </Comp>\n  )\n})\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton'\n\nexport {\n  SidebarRoot,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  sidebarMenuButtonVariants,\n  useSidebar,\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAkBA;AACA;AACA;AACA;AACA;AAIA;AAAwD;AAC/C;AACC;AAEV;AAaA;AAEA;AACE;AACA;AACE;AAAmE;AAGrE;AACF;AAEA;AAA8B;AAU1B;AACgB;AACR;AACQ;AACP;AACP;AACA;AACA;AACG;AAIL;AACA;AAIA;AACA;AACA;AAAsB;AAElB;AACA;AACE;AAAqB;AAErB;AAAkB;AAIpB;AAAgG;AAClG;AACkB;AAIpB;AACE;AAAmE;AAIrE;AACE;AACE;AACE;AACA;AAAc;AAChB;AAGF;AACA;AAAgE;AAKlE;AAEA;AAA2B;AAClB;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAC+E;AAGjF;AAGM;AAAC;AAAA;AAEG;AACqB;AAC4B;AAC5C;AACL;AAES;AACT;AACA;AACF;AACA;AACI;AAEH;AAAA;AAGP;AAGN;AACA;AAEA;AAOE;AAEA;AACE;AAEI;AAAC;AAAA;AACc;AACD;AACF;AAER;AACqB;AACrB;AAEF;AAEA;AACE;AAAmB;AAC2B;AAChD;AACuD;AAAA;AAAA;AAE3D;AAIJ;AACE;AAAC;AAAA;AACC;AACU;AACE;AACD;AACG;AAGd;AAAA;AAAC;AAAA;AACY;AACT;AACyB;AACD;AACxB;AACF;AAAA;AACF;AACA;AAAC;AAAA;AACY;AACT;AAEI;AACE;AACyB;AACD;AAE1B;AACE;AACyB;AACD;AAC1B;AACJ;AACA;AACF;AACI;AAIJ;AAAA;AACF;AAAA;AAAA;AAGN;AACA;AAEA;AAA6B;AAEzB;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACL;AACsD;AAE5D;AACA;AAAc;AAChB;AACI;AACO;AAE6B;AAAA;AAC1C;AAGN;AACA;AAEA;AAA0B;AAEtB;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACD;AACD;AACH;AACK;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACW;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAA2B;AAEvB;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACF;AACA;AAEA;AACE;AACF;AACA;AAEA;AAA+B;AAE3B;AACE;AAAC;AAAA;AACC;AACa;AAC2C;AACpD;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACa;AACuD;AAChE;AAAA;AAGV;AACA;AAEA;AAAgC;AAE5B;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACA;AACF;AACI;AAOF;AAAA;AAEJ;AAGN;AACA;AAEA;AAAiC;AAE7B;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEA;AAAkC;AAIlC;AACA;AAEA;AAGA;AAEA;AAGA;AAEA;AAAkC;AAChC;AACA;AACY;AACC;AACY;AACV;AACX;AACM;AACG;AACC;AACH;AACP;AACF;AACiB;AACN;AACH;AACR;AAEJ;AAEA;AAAgC;AAc5B;AACA;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACA;AACsE;AAC/E;AAEH;AAAA;AAIL;AACE;AAAO;AAGT;AACE;AAAU;AACE;AACZ;AAGF;AAEI;AAAgC;AACoE;AACtG;AAGN;AACA;AAEA;AAOE;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AAEE;AACF;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAA+B;AAE3B;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAOE;AACE;AAAsF;AAGxF;AACE;AAAC;AAAA;AACC;AACa;AACyD;AAClE;AAEH;AAAsF;AACvF;AAAC;AAAA;AACW;AACG;AAEX;AACsB;AACtB;AAAA;AAEJ;AAAA;AAAA;AAGN;AACA;AAEA;AAA6B;AAEzB;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAGA;AAEA;AAOE;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACA;AACF;AACT;AACA;AACA;AACA;AACF;AACI;AAEoF;AAAA;AAG9F;AACA;;"}
+{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["'use client'\n\nimport { List } from '@phosphor-icons/react/dist/ssr/List'\nimport { SidebarSimple } from '@phosphor-icons/react/dist/ssr/SidebarSimple'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../../lib/useMobile'\nimport { Button } from '../Button'\nimport { Input } from '../Input'\nimport { Separator } from '../Separator'\nimport { SheetContent, SheetDescription, SheetHeader, SheetRoot, SheetTitle } from '../Sheet'\nimport { Skeleton } from '../Skeleton'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '../Tooltip'\nimport { Typography } from '../Typography'\n\nimport { cn } from '@/lib/utils'\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport type SidebarSize = 'small' | 'medium' | 'big'\n\nconst SIDEBAR_WIDTH_ICON: Record<SidebarSize, string> = {\n  small: '3rem',\n  medium: '3.5rem',\n  big: '4rem',\n}\n\ntype SidebarContext = {\n  state: 'expanded' | 'collapsed'\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n  size: SidebarSize\n}\n\nconst SidebarContext = React.createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.')\n  }\n\n  return context\n}\n\nconst SidebarProvider = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    defaultOpen?: boolean\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n    size?: SidebarSize\n  }\n>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange: setOpenProp,\n      size = 'small',\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const isMobile = useIsMobile()\n    const [openMobile, setOpenMobile] = React.useState(false)\n\n    // This is the internal state of the sidebar.\n    // We use openProp and setOpenProp for control from outside the component.\n    const [_open, _setOpen] = React.useState(defaultOpen)\n    const open = openProp ?? _open\n    const setOpen = React.useCallback(\n      (value: boolean | ((value: boolean) => boolean)) => {\n        const openState = typeof value === 'function' ? value(open) : value\n        if (setOpenProp) {\n          setOpenProp(openState)\n        } else {\n          _setOpen(openState)\n        }\n\n        // This sets the cookie to keep the sidebar state.\n        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n      },\n      [setOpenProp, open],\n    )\n\n    // Helper to toggle the sidebar.\n    const toggleSidebar = React.useCallback(() => {\n      isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n    }, [isMobile, setOpen, setOpenMobile])\n\n    // Adds a keyboard shortcut to toggle the sidebar.\n    React.useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n          event.preventDefault()\n          toggleSidebar()\n        }\n      }\n\n      window.addEventListener('keydown', handleKeyDown)\n      return () => window.removeEventListener('keydown', handleKeyDown)\n    }, [toggleSidebar])\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = open ? 'expanded' : 'collapsed'\n\n    const contextValue = React.useMemo<SidebarContext>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n        size,\n      }),\n      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, size],\n    )\n\n    return (\n      <SidebarContext.Provider value={contextValue}>\n        <TooltipProvider delayDuration={0}>\n          <div\n            style={\n              {\n                '--sidebar-width': SIDEBAR_WIDTH,\n                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON[size],\n                ...style,\n              } as React.CSSProperties\n            }\n            className={cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className)}\n            ref={ref}\n            {...props}\n          >\n            {children}\n          </div>\n        </TooltipProvider>\n      </SidebarContext.Provider>\n    )\n  },\n)\nSidebarProvider.displayName = 'SidebarProvider'\n\nconst SidebarRoot = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    side?: 'left' | 'right'\n    variant?: 'default' | 'hidden'\n  }\n>(({ side = 'left', variant = 'default', className, children, ...props }, ref) => {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (isMobile) {\n    return (\n      <SheetRoot open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </SheetRoot>\n    )\n  }\n\n  return (\n    <div\n      ref={ref}\n      className=\"group peer text-sidebar-foreground hidden shadow-md md:block\"\n      data-state={state}\n      data-side={side}\n      data-variant={variant}\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        className={cn(\n          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n          variant === 'default' && 'group-data-[state=collapsed]:w-(--sidebar-width-icon)',\n          variant === 'hidden' && 'group-data-[state=collapsed]:w-0',\n          'group-data-[side=right]:rotate-180',\n        )}\n      />\n      <div\n        className={cn(\n          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n          side === 'left'\n            ? [\n                'left-0',\n                variant === 'default' && 'group-data-[state=collapsed]:w-(--sidebar-width-icon)',\n                variant === 'hidden' && 'group-data-[state=collapsed]:-left-(--sidebar-width)',\n              ]\n            : [\n                'right-0',\n                variant === 'default' && 'group-data-[state=collapsed]:w-(--sidebar-width-icon)',\n                variant === 'hidden' && 'group-data-[state=collapsed]:-right-(--sidebar-width)',\n              ],\n          'group-data-[side=left]:border-r group-data-[side=right]:border-l',\n          className,\n        )}\n        {...props}\n      >\n        <div data-sidebar=\"sidebar\" className=\"bg-sidebar flex h-full w-full flex-col\">\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n})\nSidebarRoot.displayName = 'SidebarRoot'\n\nconst SidebarTrigger = React.forwardRef<React.ComponentRef<typeof Button>, React.ComponentProps<typeof Button>>(\n  ({ className, onClick, ...props }, ref) => {\n    const { isMobile, toggleSidebar } = useSidebar()\n\n    return (\n      <Button\n        ref={ref}\n        data-sidebar=\"trigger\"\n        variant=\"text\"\n        className={cn('text-primary-foreground h-8 w-8 p-1', className)}\n        onClick={(event) => {\n          onClick?.(event)\n          toggleSidebar()\n        }}\n        {...props}\n        StartIcon={isMobile ? List : SidebarSimple}\n      >\n        <span className=\"sr-only\">Toggle Sidebar</span>\n      </Button>\n    )\n  },\n)\nSidebarTrigger.displayName = 'SidebarTrigger'\n\nconst SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<'button'>>(\n  ({ className, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar()\n\n    return (\n      <button\n        ref={ref}\n        data-sidebar=\"rail\"\n        aria-label=\"Toggle Sidebar\"\n        tabIndex={-1}\n        onClick={toggleSidebar}\n        title=\"Toggle Sidebar\"\n        className={cn(\n          'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 sm:flex',\n          'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n          '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n          'group-data-[variant=offcanvas]:hover:bg-sidebar group-data-[variant=offcanvas]:translate-x-0 group-data-[variant=offcanvas]:after:left-full',\n          '[[data-side=left][data-variant=offcanvas]_&]:-right-2',\n          '[[data-side=right][data-variant=offcanvas]_&]:-left-2',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarRail.displayName = 'SidebarRail'\n\nconst SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<'main'>>(({ className, ...props }, ref) => {\n  return (\n    <main\n      ref={ref}\n      className={cn(\n        'bg-background relative flex w-full flex-1 flex-col',\n        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInset.displayName = 'SidebarInset'\n\nconst SIDEBAR_INPUT_HEIGHT: Record<SidebarSize, string> = {\n  small: 'h-8',\n  medium: 'h-10',\n  big: 'h-12',\n}\n\nconst SidebarInput = React.forwardRef<\n  React.ComponentRef<typeof Input>,\n  React.ComponentProps<typeof Input> & { size?: SidebarSize }\n>(({ className, size, ...props }, ref) => {\n  const { size: contextSize } = useSidebar()\n  const resolvedSize = size ?? contextSize\n\n  return (\n    <Input\n      ref={ref}\n      data-sidebar=\"input\"\n      className={cn(\n        'bg-background focus-visible:ring-sidebar-ring w-full shadow-none focus-visible:ring-2',\n        SIDEBAR_INPUT_HEIGHT[resolvedSize],\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInput.displayName = 'SidebarInput'\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return <div ref={ref} data-sidebar=\"header\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />\n})\nSidebarHeader.displayName = 'SidebarHeader'\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return <div ref={ref} data-sidebar=\"footer\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />\n})\nSidebarFooter.displayName = 'SidebarFooter'\n\nconst SidebarSeparator = React.forwardRef<React.ComponentRef<typeof Separator>, React.ComponentProps<typeof Separator>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <Separator\n        ref={ref}\n        data-sidebar=\"separator\"\n        className={cn('bg-sidebar-border mx-2 w-auto', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarSeparator.displayName = 'SidebarSeparator'\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"content\"\n      className={cn(\n        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto',\n        'group-data-[variant=default]:group-data-[state=collapsed]:overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarContent.displayName = 'SidebarContent'\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"group\"\n      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n      {...props}\n    />\n  )\n})\nSidebarGroup.displayName = 'SidebarGroup'\n\nconst sidebarGroupLabelVariants = cva(\n  'text-sidebar-foreground/70 ring-sidebar-ring flex shrink-0 items-center rounded-md transition-[margin,opacity] duration-200 ease-linear outline-none focus-visible:ring-2 [&>svg]:shrink-0 group-data-[state=collapsed]:group-data-[variant=hidden]:hidden',\n  {\n    variants: {\n      size: {\n        small:\n          'h-8 px-2 [&>svg]:size-4 group-data-[state=collapsed]:group-data-[variant=default]:-mt-8 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n        medium:\n          'h-9 px-2.5 [&>svg]:size-4 group-data-[state=collapsed]:group-data-[variant=default]:-mt-9 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n        big: 'h-10 px-3 [&>svg]:size-5 group-data-[state=collapsed]:group-data-[variant=default]:-mt-10 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n    },\n  },\n)\n\nconst SIDEBAR_GROUP_LABEL_TEXT_VARIANT: Record<SidebarSize, 'label-md' | 'label-lg'> = {\n  small: 'label-md',\n  medium: 'label-md',\n  big: 'label-lg',\n}\n\nconst SidebarGroupLabel = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & { asChild?: boolean; size?: SidebarSize }\n>(({ className, asChild = false, size, children, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'div'\n  const { size: contextSize } = useSidebar()\n  const resolvedSize = size ?? contextSize\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-label\"\n      className={cn(sidebarGroupLabelVariants({ size: resolvedSize }), className)}\n      {...props}\n    >\n      {typeof children === 'string' ? (\n        <Typography variant={SIDEBAR_GROUP_LABEL_TEXT_VARIANT[resolvedSize]} color=\"secondary\">\n          {children}\n        </Typography>\n      ) : (\n        children\n      )}\n    </Comp>\n  )\n})\nSidebarGroupLabel.displayName = 'SidebarGroupLabel'\n\nconst sidebarGroupActionVariants = cva(\n  'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute flex aspect-square items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 after:absolute after:-inset-2 after:md:hidden group-data-[state=collapsed]:hidden [&>svg]:shrink-0',\n  {\n    variants: {\n      size: {\n        small: 'top-3.5 right-3 w-5 [&>svg]:size-4',\n        medium: 'top-4 right-3 w-5 [&>svg]:size-4',\n        big: 'top-4 right-3 w-6 [&>svg]:size-5',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n    },\n  },\n)\n\nconst SidebarGroupAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<'button'> & { asChild?: boolean; size?: SidebarSize }\n>(({ className, asChild = false, size, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n  const { size: contextSize } = useSidebar()\n  const resolvedSize = size ?? contextSize\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-action\"\n      className={cn(sidebarGroupActionVariants({ size: resolvedSize }), className)}\n      {...props}\n    />\n  )\n})\nSidebarGroupAction.displayName = 'SidebarGroupAction'\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />\n  ),\n)\nSidebarGroupContent.displayName = 'SidebarGroupContent'\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(({ className, ...props }, ref) => (\n  <ul ref={ref} data-sidebar=\"menu\" className={cn('flex w-full min-w-0 flex-col gap-1', className)} {...props} />\n))\nSidebarMenu.displayName = 'SidebarMenu'\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ className, ...props }, ref) => (\n  <li ref={ref} data-sidebar=\"menu-item\" className={cn('group/menu-item relative', className)} {...props} />\n))\nSidebarMenuItem.displayName = 'SidebarMenuItem'\n\nconst sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground items-center overflow-hidden rounded-md text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=expanded]:hover:bg-sidebar-accent data-[state=expanded]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        'navigation-item': '',\n        element: 'group-data-[state=collapsed]:!p-0',\n      },\n      size: {\n        small: 'h-8 gap-2 p-2 [&>svg]:size-4',\n        medium: 'h-10 gap-3 p-2.5 [&>svg]:size-5',\n        big: 'h-12 gap-4 p-3 [&>svg]:size-6',\n      },\n    },\n    defaultVariants: {\n      variant: 'navigation-item',\n      size: 'small',\n    },\n  },\n)\n\nconst SidebarMenuButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<'button'> & {\n    asChild?: boolean\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n    variant?: 'navigation-item' | 'element'\n    size?: SidebarSize\n  }\n>(\n  (\n    { asChild = false, isActive = false, tooltip, className, children, variant = 'navigation-item', size, ...props },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'button'\n    const { isMobile, state, size: contextSize } = useSidebar()\n    const resolvedSize = size ?? contextSize\n\n    const button = (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-button\"\n        data-active={isActive}\n        className={cn(sidebarMenuButtonVariants({ variant, size: resolvedSize }), className)}\n        {...props}\n      >\n        {children}\n      </Comp>\n    )\n\n    if (!tooltip) {\n      return button\n    }\n\n    if (typeof tooltip === 'string') {\n      tooltip = {\n        children: tooltip,\n      }\n    }\n\n    return (\n      <TooltipRoot>\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\n        <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n      </TooltipRoot>\n    )\n  },\n)\nSidebarMenuButton.displayName = 'SidebarMenuButton'\n\nconst sidebarMenuActionVariants = cva(\n  'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute flex aspect-square items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 after:absolute after:-inset-2 after:md:hidden group-data-[state=collapsed]:hidden [&>svg]:shrink-0',\n  {\n    variants: {\n      size: {\n        small: 'top-1.5 right-1 w-5 [&>svg]:size-4',\n        medium: 'top-2.5 right-1 w-5 [&>svg]:size-4',\n        big: 'top-3 right-1.5 w-6 [&>svg]:size-5',\n      },\n      showOnHover: {\n        true: 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=expanded]:opacity-100 md:opacity-0',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n      showOnHover: false,\n    },\n  },\n)\n\nconst SidebarMenuAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<'button'> & {\n    asChild?: boolean\n    showOnHover?: boolean\n    size?: SidebarSize\n  }\n>(({ className, asChild = false, showOnHover = false, size, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n  const { size: contextSize } = useSidebar()\n  const resolvedSize = size ?? contextSize\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(sidebarMenuActionVariants({ size: resolvedSize, showOnHover }), className)}\n      {...props}\n    />\n  )\n})\nSidebarMenuAction.displayName = 'SidebarMenuAction'\n\nconst sidebarMenuBadgeVariants = cva(\n  'text-sidebar-foreground pointer-events-none absolute flex items-center justify-center rounded-md font-medium tabular-nums select-none peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-data-[state=collapsed]:group-data-[variant=hidden]:hidden group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n  {\n    variants: {\n      size: {\n        small: 'top-1.5 right-1 h-5 min-w-5 px-1 text-xs',\n        medium: 'top-2.5 right-1 h-5 min-w-5 px-1 text-xs',\n        big: 'top-3 right-1.5 h-6 min-w-6 px-1.5 text-sm',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n    },\n  },\n)\n\nconst SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'> & { size?: SidebarSize }>(\n  ({ className, size, ...props }, ref) => {\n    const { size: contextSize } = useSidebar()\n    const resolvedSize = size ?? contextSize\n\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"menu-badge\"\n        className={cn(sidebarMenuBadgeVariants({ size: resolvedSize }), className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarMenuBadge.displayName = 'SidebarMenuBadge'\n\nconst SIDEBAR_MENU_SKELETON: Record<SidebarSize, { row: string; icon: string; text: string }> = {\n  small: { row: 'h-8 gap-2 px-2', icon: 'size-4', text: 'h-4' },\n  medium: { row: 'h-10 gap-3 px-2.5', icon: 'size-5', text: 'h-4' },\n  big: { row: 'h-12 gap-4 px-3', icon: 'size-6', text: 'h-5' },\n}\n\nconst SidebarMenuSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    showIcon?: boolean\n    size?: SidebarSize\n  }\n>(({ className, showIcon = false, size, ...props }, ref) => {\n  const { size: contextSize } = useSidebar()\n  const resolvedSize = size ?? contextSize\n  const dims = SIDEBAR_MENU_SKELETON[resolvedSize]\n\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor((window.crypto.getRandomValues(new Uint32Array(1))[0] % 40) + 50)}%`\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn('flex items-center rounded-md', dims.row, className)}\n      {...props}\n    >\n      {showIcon && <Skeleton className={cn('rounded-md', dims.icon)} data-sidebar=\"menu-skeleton-icon\" />}\n      <Skeleton\n        className={cn('max-w-(--skeleton-width) flex-1', dims.text)}\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            '--skeleton-width': width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n})\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'\n\nconst sidebarMenuSubVariants = cva(\n  'border-sidebar-border flex min-w-0 flex-col gap-1 border-l py-0.5 group-data-[state=collapsed]:hidden',\n  {\n    variants: {\n      size: {\n        small: 'ml-[15px] pl-2.5',\n        medium: 'ml-[19px] pl-2.5',\n        big: 'ml-[23px] pl-3',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n    },\n  },\n)\n\nconst SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'> & { size?: SidebarSize }>(\n  ({ className, size, ...props }, ref) => {\n    const { size: contextSize } = useSidebar()\n    const resolvedSize = size ?? contextSize\n\n    return (\n      <ul\n        ref={ref}\n        data-sidebar=\"menu-sub\"\n        className={cn(sidebarMenuSubVariants({ size: resolvedSize }), className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarMenuSub.displayName = 'SidebarMenuSub'\n\nconst SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ ...props }, ref) => (\n  <li ref={ref} {...props} />\n))\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem'\n\nconst sidebarMenuSubButtonVariants = cva(\n  'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex w-full min-w-0 items-center gap-2 overflow-hidden rounded-md outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground group-data-[state=collapsed]:hidden [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      size: {\n        small: 'h-8 px-2',\n        medium: 'h-10 px-2.5',\n        big: 'h-12 px-3',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n    },\n  },\n)\n\nconst SidebarMenuSubButton = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentProps<'a'> & {\n    asChild?: boolean\n    isActive?: boolean\n    size?: SidebarSize\n  }\n>(({ asChild = false, isActive, className, children, size, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'a'\n  const { size: contextSize } = useSidebar()\n  const resolvedSize = size ?? contextSize\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-active={isActive}\n      className={cn(sidebarMenuSubButtonVariants({ size: resolvedSize }), className)}\n      {...props}\n    >\n      {typeof children === 'string' ? <Typography variant=\"body-md\">{children}</Typography> : children}\n    </Comp>\n  )\n})\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton'\n\nexport {\n  SidebarRoot,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  sidebarGroupActionVariants,\n  sidebarGroupLabelVariants,\n  sidebarMenuActionVariants,\n  sidebarMenuBadgeVariants,\n  sidebarMenuButtonVariants,\n  sidebarMenuSubButtonVariants,\n  sidebarMenuSubVariants,\n  useSidebar,\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAmBA;AACA;AACA;AACA;AACA;AAIA;AAAwD;AAC/C;AACC;AAEV;AAaA;AAEA;AACE;AACA;AACE;AAAmE;AAGrE;AACF;AAEA;AAA8B;AAU1B;AACgB;AACR;AACQ;AACP;AACP;AACA;AACA;AACG;AAIL;AACA;AAIA;AACA;AACA;AAAsB;AAElB;AACA;AACE;AAAqB;AAErB;AAAkB;AAIpB;AAAgG;AAClG;AACkB;AAIpB;AACE;AAAmE;AAIrE;AACE;AACE;AACE;AACA;AAAc;AAChB;AAGF;AACA;AAAgE;AAKlE;AAEA;AAA2B;AAClB;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAC+E;AAGjF;AAGM;AAAC;AAAA;AAEG;AACqB;AAC4B;AAC5C;AACL;AAEwG;AAC1G;AACI;AAEH;AAAA;AAGP;AAGN;AACA;AAEA;AAOE;AAEA;AACE;AAEI;AAAC;AAAA;AACc;AACD;AACF;AAER;AACqB;AACrB;AAEF;AAEA;AACE;AAAmB;AAC2B;AAChD;AACuD;AAAA;AAAA;AAE3D;AAIJ;AACE;AAAC;AAAA;AACC;AACU;AACE;AACD;AACG;AAGd;AAAA;AAAC;AAAA;AACY;AACT;AACyB;AACD;AACxB;AACF;AAAA;AACF;AACA;AAAC;AAAA;AACY;AACT;AAEI;AACE;AACyB;AACD;AAE1B;AACE;AACyB;AACD;AAC1B;AACJ;AACA;AACF;AACI;AAIJ;AAAA;AACF;AAAA;AAAA;AAGN;AACA;AAEA;AAA6B;AAEzB;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACL;AACsD;AAE5D;AACA;AAAc;AAChB;AACI;AACyB;AAEW;AAAA;AAC1C;AAGN;AACA;AAEA;AAA0B;AAEtB;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACD;AACD;AACH;AACK;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACW;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAA0D;AACjD;AACC;AAEV;AAEA;AAIE;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACiC;AACjC;AACF;AACI;AAAA;AAGV;AACA;AAEA;AACE;AACF;AACA;AAEA;AACE;AACF;AACA;AAEA;AAA+B;AAE3B;AACE;AAAC;AAAA;AACC;AACa;AAC2C;AACpD;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACa;AACuD;AAChE;AAAA;AAGV;AACA;AAEA;AAAkC;AAChC;AACA;AACY;AACF;AAEF;AAEA;AACG;AACP;AACF;AACiB;AACT;AACR;AAEJ;AAEA;AAAuF;AAC9E;AACC;AAEV;AAEA;AAIE;AACA;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AAC6D;AACtE;AAOF;AAAA;AAIR;AACA;AAEA;AAAmC;AACjC;AACA;AACY;AACF;AACG;AACC;AACH;AACP;AACF;AACiB;AACT;AACR;AAEJ;AAEA;AAIE;AACA;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AAC8D;AACvE;AAAA;AAGV;AACA;AAEA;AAAkC;AAIlC;AACA;AAEA;AAGA;AAEA;AAGA;AAEA;AAAkC;AAChC;AACA;AACY;AACC;AACY;AACV;AACX;AACM;AACG;AACC;AACH;AACP;AACF;AACiB;AACN;AACH;AACR;AAEJ;AAEA;AAAgC;AAc5B;AACA;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACA;AACsE;AAC/E;AAEH;AAAA;AAIL;AACE;AAAO;AAGT;AACE;AAAU;AACE;AACZ;AAGF;AAEI;AAAgC;AACoE;AACtG;AAGN;AACA;AAEA;AAAkC;AAChC;AACA;AACY;AACF;AACG;AACC;AACH;AACP;AACa;AACL;AACC;AACT;AACF;AACiB;AACT;AACO;AACf;AAEJ;AAEA;AAQE;AACA;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AAC0E;AACnF;AAAA;AAGV;AACA;AAEA;AAAiC;AAC/B;AACA;AACY;AACF;AACG;AACC;AACH;AACP;AACF;AACiB;AACT;AACR;AAEJ;AAEA;AAA+B;AAE3B;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AAC4D;AACrE;AAAA;AACN;AAGN;AACA;AAEA;AAAgG;AAClC;AACI;AAElE;AAEA;AAOE;AACA;AACA;AAGA;AACE;AAAsF;AAGxF;AACE;AAAC;AAAA;AACC;AACa;AACoD;AAC7D;AAEH;AAAgG;AACjG;AAAC;AAAA;AAC2D;AAC7C;AAEX;AACsB;AACtB;AAAA;AAEJ;AAAA;AAAA;AAGN;AACA;AAEA;AAA+B;AAC7B;AACA;AACY;AACF;AACG;AACC;AACH;AACP;AACF;AACiB;AACT;AACR;AAEJ;AAEA;AAA6B;AAEzB;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AAC0D;AACnE;AAAA;AACN;AAGN;AACA;AAEA;AAGA;AAEA;AAAqC;AACnC;AACA;AACY;AACF;AACG;AACC;AACH;AACP;AACF;AACiB;AACT;AACR;AAEJ;AAEA;AAQE;AACA;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACA;AACgE;AACzE;AAEoF;AAAA;AAG9F;AACA;;"}

package/dist/components/Sidebar/index.js

@@ -1,2 +1,2 @@
-export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarRoot, SidebarSeparator, SidebarTrigger, sidebarMenuButtonVariants, useSidebar } from './Sidebar.js';
+export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarRoot, SidebarSeparator, SidebarTrigger, sidebarGroupActionVariants, sidebarGroupLabelVariants, sidebarMenuActionVariants, sidebarMenuBadgeVariants, sidebarMenuButtonVariants, sidebarMenuSubButtonVariants, sidebarMenuSubVariants, useSidebar } from './Sidebar.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js

@@ -35,7 +35,7 @@ export { RadioGroup, RadioGroupItem } from './components/RadioGroup/RadioGroup.j
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from './components/Select/Select.js';
 export { Separator } from './components/Separator/Separator.js';
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetRoot, SheetTitle, SheetTrigger } from './components/Sheet/Sheet.js';
-export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarRoot, SidebarSeparator, SidebarTrigger, sidebarMenuButtonVariants, useSidebar } from './components/Sidebar/Sidebar.js';
+export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarRoot, SidebarSeparator, SidebarTrigger, sidebarGroupActionVariants, sidebarGroupLabelVariants, sidebarMenuActionVariants, sidebarMenuBadgeVariants, sidebarMenuButtonVariants, sidebarMenuSubButtonVariants, sidebarMenuSubVariants, useSidebar } from './components/Sidebar/Sidebar.js';
 export { Skeleton } from './components/Skeleton/Skeleton.js';
 export { StarRating } from './components/StarRating/StarRating.js';
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './components/Table/Table.js';

package/package.json

@@ -2,7 +2,7 @@
   "name": "periplo-ui",
   "description": "IATI UI library",
   "private": false,
-  "version": "4.8.0",
+  "version": "4.8.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",