@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/sidebar.d.ts

@@ -0,0 +1,1826 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$_uds_types0 from "@uds/types";
+
+//#region ../components/dist/sidebar.d.ts
+//#region src/sidebar.d.ts
+interface SidebarContextValue {
+  state: 'expanded' | 'collapsed';
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+}
+interface SidebarProviderProps {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+declare const SidebarProvider: _$react.FC<{
+    children: React.ReactNode;
+  } & SidebarProviderProps>, useSidebar: () => SidebarContextValue;
+declare function SidebarTrigger({
+  className,
+  children
+}: {
+  className?: string;
+  children?: React.ReactNode;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarInset({
+  className,
+  children
+}: {
+  className?: string;
+  children: React.ReactNode;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarHeader({
+  className,
+  children
+}: {
+  className?: string;
+  children?: React.ReactNode;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarContent({
+  className,
+  children
+}: {
+  className?: string;
+  children?: React.ReactNode;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarFooter({
+  className,
+  children
+}: {
+  className?: string;
+  children?: React.ReactNode;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarGroup({
+  className,
+  children,
+  label,
+  action,
+  collapsible,
+  defaultOpen
+}: {
+  className?: string;
+  children?: React.ReactNode;
+  label?: string;
+  action?: React.ReactNode;
+  collapsible?: boolean;
+  defaultOpen?: boolean;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarGroupAction({
+  className,
+  children,
+  onClick,
+  'aria-label': ariaLabel
+}: {
+  className?: string;
+  children: React.ReactNode;
+  onClick?: () => void;
+  'aria-label': string;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarMenu({
+  className,
+  children
+}: {
+  className?: string;
+  children?: React.ReactNode;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarMenuItem({
+  className,
+  children
+}: {
+  className?: string;
+  children?: React.ReactNode;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarMenuButton({
+  className,
+  children,
+  href,
+  onClick,
+  isActive
+}: {
+  className?: string;
+  children?: React.ReactNode;
+  href?: string;
+  onClick?: () => void;
+  isActive?: boolean;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarMenuAction({
+  className,
+  children,
+  onClick,
+  'aria-label': ariaLabel
+}: {
+  className?: string;
+  children: React.ReactNode;
+  onClick?: () => void;
+  'aria-label': string;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarMenuBadge({
+  className,
+  children
+}: {
+  className?: string;
+  children: React.ReactNode;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarMenuSub({
+  className,
+  children
+}: {
+  className?: string;
+  children?: React.ReactNode;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarMenuSubItem({
+  className,
+  children
+}: {
+  className?: string;
+  children?: React.ReactNode;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarMenuSubButton({
+  className,
+  children,
+  href,
+  onClick,
+  isActive
+}: {
+  className?: string;
+  children?: React.ReactNode;
+  href?: string;
+  onClick?: () => void;
+  isActive?: boolean;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarSkeleton({
+  count
+}: {
+  count?: number;
+}): _$react_jsx_runtime0.JSX.Element;
+interface SidebarOwnProps {
+  collapsible?: 'offcanvas' | 'icon' | 'none';
+  children?: React.ReactNode;
+}
+interface SidebarElements {
+  root: 'aside';
+  header: 'div';
+  content: 'div';
+  footer: 'div';
+  overlay: 'button';
+  rail: 'button';
+}
+/**
+ * @description A collapsible side navigation panel composed from sub-components
+ */
+declare const Sidebar: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  Sidebar: {
+    readonly base: {
+      readonly root: {
+        readonly backgroundColor: string;
+        readonly borderRightWidth: string;
+        readonly borderColor: string;
+        readonly fontFamily: string;
+        readonly height: "100%";
+      };
+      readonly header: {
+        readonly borderBottomWidth: string;
+        readonly borderColor: string;
+      };
+      readonly content: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly gap: string;
+        readonly padding: string;
+      };
+      readonly footer: {
+        readonly borderTopWidth: string;
+        readonly borderColor: string;
+      };
+      readonly group: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly gap: string;
+      };
+      readonly groupLabel: {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly padding: `${string} ${string}`;
+        readonly letterSpacing: string;
+        readonly textTransform: "uppercase";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly groupAction: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly width: "1.5rem";
+        readonly height: "1.5rem";
+        readonly borderRadius: string;
+        readonly cursor: "pointer";
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly _hover: {
+          readonly backgroundColor: string;
+        };
+      };
+      readonly menu: {
+        readonly listStyleType: "none";
+        readonly padding: "0";
+        readonly margin: "0";
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly gap: string;
+      };
+      readonly menuItem: {
+        readonly position: "relative";
+      };
+      readonly menuButton: {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly backgroundColor: string;
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly menuAction: {
+        readonly position: "absolute";
+        readonly right: string;
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly width: "1.5rem";
+        readonly height: "1.5rem";
+        readonly borderRadius: string;
+        readonly cursor: "pointer";
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly opacity: "0";
+        readonly transition: "all";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+      };
+      readonly menuBadge: {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.6875rem";
+        readonly color: string;
+        readonly marginLeft: "auto";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly menuSub: {
+        readonly listStyleType: "none";
+        readonly padding: "0";
+        readonly margin: "0";
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly marginLeft: string;
+        readonly paddingLeft: string;
+        readonly borderLeftWidth: string;
+        readonly borderColor: string;
+      };
+      readonly menuSubItem: {};
+      readonly menuSubButton: {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "0.8125rem";
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly cursor: "pointer";
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly _active: {
+          readonly color: string;
+          readonly fontWeight: string;
+        };
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly trigger: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly width: "2rem";
+        readonly height: "2rem";
+        readonly borderRadius: string;
+        readonly cursor: "pointer";
+        readonly color: string;
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly position: "relative";
+        readonly _hover: {
+          readonly backgroundColor: string;
+          readonly color: string;
+        };
+      };
+      readonly rail: {
+        readonly position: "absolute";
+        readonly top: "0";
+        readonly bottom: "0";
+        readonly right: "0";
+        readonly width: "4px";
+        readonly cursor: "col-resize";
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly padding: "0";
+        readonly transition: "all";
+        readonly _hover: {
+          readonly backgroundColor: string;
+        };
+      };
+      readonly overlay: {
+        readonly backgroundColor: "rgba(0,0,0,0.4)";
+        readonly opacity: "0";
+        readonly display: "none";
+        readonly transition: "opacity 0.2s, display 0.2s allow-discrete";
+        readonly _dataStateOpen: {
+          readonly opacity: "1";
+          readonly display: "block";
+          readonly _startingStyle: {
+            readonly opacity: "0";
+          };
+        };
+      };
+      readonly skeleton: {
+        readonly backgroundColor: string;
+        readonly borderRadius: string;
+      };
+    };
+    readonly variants: {
+      readonly variant: {
+        readonly sidebar: {
+          readonly root: {};
+        };
+        readonly floating: {
+          readonly root: {
+            readonly margin: string;
+            readonly borderRadius: string;
+            readonly borderWidth: string;
+            readonly borderColor: string;
+            readonly borderRightWidth: string;
+            readonly boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)";
+            readonly height: "auto";
+          };
+        };
+        readonly inset: {
+          readonly root: {
+            readonly margin: string;
+            readonly borderRadius: string;
+            readonly borderWidth: string;
+            readonly borderColor: string;
+            readonly borderRightWidth: string;
+            readonly backgroundColor: string;
+            readonly height: "auto";
+          };
+        };
+      };
+    };
+  };
+}, {}>, SidebarOwnProps, SidebarElements>>;
+type SidebarProps = React.ComponentProps<typeof Sidebar>; //#endregion
+//#endregion
+export { Sidebar, SidebarContent, SidebarContextValue, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarOwnProps, SidebarProps, SidebarProvider, SidebarSkeleton, SidebarTrigger, useSidebar };