@grupor5/raya 0.2.6 → 0.2.8

package/dist/index.d.mts

@@ -5,7 +5,7 @@ export { StrokeColorToken, StrokeDirection, StrokeToken, componentStrokes, creat
 export { badgeTokens } from './tokens/badge.mjs';
 export { tagTokens } from './tokens/tag.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import React__default, { ReactNode } from 'react';
 export { classNames } from './utils/classNames.mjs';
 export { cn } from './utils/cn.mjs';
 export { Badge, BadgeProps, badgeVariants } from './atoms/badge/index.mjs';
@@ -27,6 +27,7 @@ export { Step, StepContent, StepDescription, StepLabel, Stepper, StepperAPI, use
 export { Dropdown, DropdownProps } from './molecules/dropdown/index.mjs';
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './molecules/accordion/index.mjs';
 export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from './molecules/chart/index.mjs';
+export { Grid, GridItem, GridItemProps, GridProps, ResponsiveValue } from './molecules/grid/index.mjs';
 export { useModal } from './hooks/useModal.mjs';
 import 'clsx';
 import 'class-variance-authority/dist/types';
@@ -66,6 +67,112 @@ interface ModalProps {
 }
 declare function Modal({ open, onClose, children }: ModalProps): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * Navigation item interface
+ */
+interface NavigationItem {
+    id: string;
+    label: string;
+    icon?: React__default.ReactNode;
+    path: string;
+    badge?: string | number;
+    children?: NavigationItem[];
+    isCollapsible?: boolean;
+}
+/**
+ * Brand information interface
+ */
+interface BrandInfo {
+    logo?: React__default.ReactNode;
+    name: string;
+    tagline?: string;
+}
+/**
+ * Sidebar component props
+ */
+interface SidebarProps {
+    /** Brand information displayed at the top */
+    brand: BrandInfo;
+    /** Navigation items */
+    navigation: NavigationItem[];
+    /** Current active path */
+    currentPath?: string;
+    /** Whether the sidebar is collapsed */
+    collapsed?: boolean;
+    /** Callback when navigation item is clicked */
+    onNavigate?: (item: NavigationItem) => void;
+    /** Callback when collapse toggle is clicked */
+    onToggleCollapse?: () => void;
+    /** Custom className */
+    className?: string;
+    /** Data test id for testing */
+    'data-testid'?: string;
+}
+/**
+ * # Sidebar - Navigation Organismo
+ *
+ * ## 🚨 GRID SYSTEM COMPLIANCE
+ *
+ * Este componente está diseñado para ocupar **2 columnas** en el grid system del Raya Design System.
+ * Debe usarse dentro de un Grid container para mantener la consistencia de layouts.
+ *
+ * ### Features
+ * - **Grid Integration**: Ocupa exactamente 2 columnas del sistema de grid
+ * - **Responsive Behavior**: Se adapta a diferentes breakpoints
+ * - **Navigation System**: Soporte para navegación jerárquica y badges
+ * - **Brand Display**: Logo y información de marca
+ * - **Collapsible**: Opción de colapsar para ahorrar espacio
+ * - **Accessibility**: ARIA labels y navegación por teclado
+ *
+ * ### Grid Usage
+ * ```tsx
+ * <Grid cols={12} margin>
+ *   <GridItem span={{ mobile: 12, desktop: 2 }}>
+ *     <Sidebar {...props} />
+ *   </GridItem>
+ *   <GridItem span={{ mobile: 12, desktop: 10 }}>
+ *     <MainContent />
+ *   </GridItem>
+ * </Grid>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Basic sidebar with navigation
+ * <Sidebar
+ *   brand={{ name: "Manta Seguros" }}
+ *   navigation={[
+ *     { id: "dashboard", label: "Dashboard", icon: <HomeIcon />, path: "/" },
+ *     { id: "products", label: "Productos", icon: <ProductIcon />, path: "/products" },
+ *   ]}
+ *   currentPath="/dashboard"
+ *   onNavigate={(item) => navigate(item.path)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Sidebar with hierarchical navigation
+ * <Sidebar
+ *   brand={{ name: "Admin Panel", tagline: "Management System" }}
+ *   navigation={[
+ *     {
+ *       id: "products",
+ *       label: "Productos",
+ *       icon: <ProductIcon />,
+ *       path: "/products",
+ *       isCollapsible: true,
+ *       children: [
+ *         { id: "all-products", label: "Todos", path: "/products" },
+ *         { id: "categories", label: "Categorías", path: "/products/categories" }
+ *       ]
+ *     }
+ *   ]}
+ * />
+ * ```
+ */
+declare const Sidebar: React__default.ForwardRefExoticComponent<SidebarProps & React__default.RefAttributes<HTMLDivElement>>;
+
 interface AuthLayoutProps {
     children: ReactNode;
 }
@@ -77,4 +184,4 @@ interface IconProps extends React.SVGProps<SVGSVGElement> {
     color?: string;
 }
 
-export { AuthLayout, type IconProps, Modal, type Size, ThemeProvider, useTheme };
+export { AuthLayout, type BrandInfo, type IconProps, Modal, type NavigationItem, Sidebar, type SidebarProps, type Size, ThemeProvider, useTheme };

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { StrokeColorToken, StrokeDirection, StrokeToken, componentStrokes, creat
 export { badgeTokens } from './tokens/badge.js';
 export { tagTokens } from './tokens/tag.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import React__default, { ReactNode } from 'react';
 export { classNames } from './utils/classNames.js';
 export { cn } from './utils/cn.js';
 export { Badge, BadgeProps, badgeVariants } from './atoms/badge/index.js';
@@ -27,6 +27,7 @@ export { Step, StepContent, StepDescription, StepLabel, Stepper, StepperAPI, use
 export { Dropdown, DropdownProps } from './molecules/dropdown/index.js';
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './molecules/accordion/index.js';
 export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from './molecules/chart/index.js';
+export { Grid, GridItem, GridItemProps, GridProps, ResponsiveValue } from './molecules/grid/index.js';
 export { useModal } from './hooks/useModal.js';
 import 'clsx';
 import 'class-variance-authority/dist/types';
@@ -66,6 +67,112 @@ interface ModalProps {
 }
 declare function Modal({ open, onClose, children }: ModalProps): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * Navigation item interface
+ */
+interface NavigationItem {
+    id: string;
+    label: string;
+    icon?: React__default.ReactNode;
+    path: string;
+    badge?: string | number;
+    children?: NavigationItem[];
+    isCollapsible?: boolean;
+}
+/**
+ * Brand information interface
+ */
+interface BrandInfo {
+    logo?: React__default.ReactNode;
+    name: string;
+    tagline?: string;
+}
+/**
+ * Sidebar component props
+ */
+interface SidebarProps {
+    /** Brand information displayed at the top */
+    brand: BrandInfo;
+    /** Navigation items */
+    navigation: NavigationItem[];
+    /** Current active path */
+    currentPath?: string;
+    /** Whether the sidebar is collapsed */
+    collapsed?: boolean;
+    /** Callback when navigation item is clicked */
+    onNavigate?: (item: NavigationItem) => void;
+    /** Callback when collapse toggle is clicked */
+    onToggleCollapse?: () => void;
+    /** Custom className */
+    className?: string;
+    /** Data test id for testing */
+    'data-testid'?: string;
+}
+/**
+ * # Sidebar - Navigation Organismo
+ *
+ * ## 🚨 GRID SYSTEM COMPLIANCE
+ *
+ * Este componente está diseñado para ocupar **2 columnas** en el grid system del Raya Design System.
+ * Debe usarse dentro de un Grid container para mantener la consistencia de layouts.
+ *
+ * ### Features
+ * - **Grid Integration**: Ocupa exactamente 2 columnas del sistema de grid
+ * - **Responsive Behavior**: Se adapta a diferentes breakpoints
+ * - **Navigation System**: Soporte para navegación jerárquica y badges
+ * - **Brand Display**: Logo y información de marca
+ * - **Collapsible**: Opción de colapsar para ahorrar espacio
+ * - **Accessibility**: ARIA labels y navegación por teclado
+ *
+ * ### Grid Usage
+ * ```tsx
+ * <Grid cols={12} margin>
+ *   <GridItem span={{ mobile: 12, desktop: 2 }}>
+ *     <Sidebar {...props} />
+ *   </GridItem>
+ *   <GridItem span={{ mobile: 12, desktop: 10 }}>
+ *     <MainContent />
+ *   </GridItem>
+ * </Grid>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Basic sidebar with navigation
+ * <Sidebar
+ *   brand={{ name: "Manta Seguros" }}
+ *   navigation={[
+ *     { id: "dashboard", label: "Dashboard", icon: <HomeIcon />, path: "/" },
+ *     { id: "products", label: "Productos", icon: <ProductIcon />, path: "/products" },
+ *   ]}
+ *   currentPath="/dashboard"
+ *   onNavigate={(item) => navigate(item.path)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Sidebar with hierarchical navigation
+ * <Sidebar
+ *   brand={{ name: "Admin Panel", tagline: "Management System" }}
+ *   navigation={[
+ *     {
+ *       id: "products",
+ *       label: "Productos",
+ *       icon: <ProductIcon />,
+ *       path: "/products",
+ *       isCollapsible: true,
+ *       children: [
+ *         { id: "all-products", label: "Todos", path: "/products" },
+ *         { id: "categories", label: "Categorías", path: "/products/categories" }
+ *       ]
+ *     }
+ *   ]}
+ * />
+ * ```
+ */
+declare const Sidebar: React__default.ForwardRefExoticComponent<SidebarProps & React__default.RefAttributes<HTMLDivElement>>;
+
 interface AuthLayoutProps {
     children: ReactNode;
 }
@@ -77,4 +184,4 @@ interface IconProps extends React.SVGProps<SVGSVGElement> {
     color?: string;
 }
 
-export { AuthLayout, type IconProps, Modal, type Size, ThemeProvider, useTheme };
+export { AuthLayout, type BrandInfo, type IconProps, Modal, type NavigationItem, Sidebar, type SidebarProps, type Size, ThemeProvider, useTheme };

package/dist/index.js

@@ -2613,10 +2613,363 @@ function getPayloadConfigFromPayload(config, payload, key) {
   }
   return configLabelKey in config ? config[configLabelKey] : config[key];
 }
+var getColsClasses = (cols) => {
+  if (typeof cols === "number") {
+    return `grid-cols-${cols}`;
+  }
+  if (typeof cols === "object" && cols !== null) {
+    const classes = [];
+    if (cols.mobile) {
+      classes.push(`grid-cols-${cols.mobile}`);
+    }
+    if (cols.tablet) {
+      classes.push(`md:grid-cols-${cols.tablet}`);
+    }
+    if (cols.desktop) {
+      classes.push(`lg:grid-cols-${cols.desktop}`);
+    }
+    return classes.join(" ");
+  }
+  return "grid-cols-4 md:grid-cols-8 lg:grid-cols-12";
+};
+var getGapClasses = (gap) => {
+  if (typeof gap === "string") {
+    const gapMap = {
+      xs: "gap-1",
+      // 4px
+      s: "gap-2",
+      // 8px
+      m: "gap-4",
+      // 16px
+      l: "gap-6",
+      // 24px
+      xl: "gap-8"
+      // 32px
+    };
+    return gapMap[gap] || "gap-4";
+  }
+  if (typeof gap === "object" && gap !== null) {
+    const gapMap = {
+      xs: "1",
+      s: "2",
+      m: "4",
+      l: "6",
+      xl: "8"
+    };
+    const classes = [];
+    if (gap.mobile) {
+      classes.push(`gap-${gapMap[gap.mobile] || "4"}`);
+    }
+    if (gap.tablet) {
+      classes.push(`md:gap-${gapMap[gap.tablet] || "5"}`);
+    }
+    if (gap.desktop) {
+      classes.push(`lg:gap-${gapMap[gap.desktop] || "6"}`);
+    }
+    return classes.join(" ");
+  }
+  return "gap-4 md:gap-5 lg:gap-6";
+};
+var getSpanClasses = (span) => {
+  if (typeof span === "number") {
+    return `col-span-${span}`;
+  }
+  if (typeof span === "object" && span !== null) {
+    const classes = [];
+    if (span.mobile) {
+      classes.push(`col-span-${span.mobile}`);
+    }
+    if (span.tablet) {
+      classes.push(`md:col-span-${span.tablet}`);
+    }
+    if (span.desktop) {
+      classes.push(`lg:col-span-${span.desktop}`);
+    }
+    return classes.join(" ");
+  }
+  return "";
+};
+var getRowSpanClasses = (rowSpan) => {
+  if (typeof rowSpan === "number") {
+    return `row-span-${rowSpan}`;
+  }
+  if (typeof rowSpan === "object" && rowSpan !== null) {
+    const classes = [];
+    if (rowSpan.mobile) {
+      classes.push(`row-span-${rowSpan.mobile}`);
+    }
+    if (rowSpan.tablet) {
+      classes.push(`md:row-span-${rowSpan.tablet}`);
+    }
+    if (rowSpan.desktop) {
+      classes.push(`lg:row-span-${rowSpan.desktop}`);
+    }
+    return classes.join(" ");
+  }
+  return "";
+};
+var getColPositionClasses = (colStart, colEnd) => {
+  const classes = [];
+  if (colStart) {
+    if (typeof colStart === "number") {
+      classes.push(`col-start-${colStart}`);
+    } else if (typeof colStart === "object") {
+      if (colStart.mobile) classes.push(`col-start-${colStart.mobile}`);
+      if (colStart.tablet) classes.push(`md:col-start-${colStart.tablet}`);
+      if (colStart.desktop) classes.push(`lg:col-start-${colStart.desktop}`);
+    }
+  }
+  if (colEnd) {
+    if (typeof colEnd === "number") {
+      classes.push(`col-end-${colEnd}`);
+    } else if (typeof colEnd === "object") {
+      if (colEnd.mobile) classes.push(`col-end-${colEnd.mobile}`);
+      if (colEnd.tablet) classes.push(`md:col-end-${colEnd.tablet}`);
+      if (colEnd.desktop) classes.push(`lg:col-end-${colEnd.desktop}`);
+    }
+  }
+  return classes.join(" ");
+};
+var Grid = React17__namespace.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      container = true,
+      cols,
+      gap,
+      margin = false,
+      className,
+      children,
+      "aria-label": ariaLabel,
+      "data-testid": dataTestId
+    } = _b, props = __objRest(_b, [
+      "container",
+      "cols",
+      "gap",
+      "margin",
+      "className",
+      "children",
+      "aria-label",
+      "data-testid"
+    ]);
+    const gridClasses = cn(
+      // Base grid styles
+      container && "grid",
+      // Maximum width containers following design system
+      "max-w-grid-mobile",
+      // Mobile: 412px max-width
+      "md:max-w-grid-tablet",
+      // Tablet: 834px max-width  
+      "lg:max-w-grid-desktop",
+      // Desktop: 1440px max-width
+      // Center containers when margin is enabled
+      margin && "mx-auto",
+      // Column configuration
+      getColsClasses(cols),
+      // Gap configuration
+      getGapClasses(gap),
+      // Padding configuration (follows design system)
+      margin && "px-4 md:px-5 lg:px-6",
+      // Custom classes
+      className
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: gridClasses,
+        "aria-label": ariaLabel,
+        "data-testid": dataTestId
+      }, props), {
+        children
+      })
+    );
+  }
+);
+Grid.displayName = "Grid";
+var GridItem = React17__namespace.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      span,
+      rowSpan,
+      colStart,
+      colEnd,
+      className,
+      children,
+      "data-testid": dataTestId
+    } = _b, props = __objRest(_b, [
+      "span",
+      "rowSpan",
+      "colStart",
+      "colEnd",
+      "className",
+      "children",
+      "data-testid"
+    ]);
+    const itemClasses = cn(
+      // Span configuration
+      getSpanClasses(span),
+      // Row span configuration
+      getRowSpanClasses(rowSpan),
+      // Position configuration
+      getColPositionClasses(colStart, colEnd),
+      // Custom classes
+      className
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: itemClasses,
+        "data-testid": dataTestId
+      }, props), {
+        children
+      })
+    );
+  }
+);
+GridItem.displayName = "GridItem";
 function Modal({ open, onClose, children }) {
   if (!open) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "fixed", top: 0, left: 0, right: 0, bottom: 0, background: "rgba(0,0,0,0.5)" }, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { margin: "100px auto", background: "#fff", padding: 24, borderRadius: 8, minWidth: 320 }, onClick: (e) => e.stopPropagation(), children }) });
 }
+var NavigationItemComponent = ({ item, isActive, onNavigate, collapsed = false, level = 0 }) => {
+  var _a;
+  const [isExpanded, setIsExpanded] = React17__namespace.default.useState(false);
+  const hasChildren = item.children && item.children.length > 0;
+  const handleClick = () => {
+    if (hasChildren && item.isCollapsible) {
+      setIsExpanded(!isExpanded);
+    } else {
+      onNavigate == null ? void 0 : onNavigate(item);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant: isActive ? "secondary" : "ghost",
+        size: "sm",
+        onClick: handleClick,
+        className: cn(
+          "w-full justify-start text-left font-normal h-10",
+          level > 0 && "ml-4",
+          isActive && "bg-primary-100 text-primary-900 font-medium"
+        ),
+        "data-testid": `nav-item-${item.id}`,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+            item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-gray-500", isActive && "text-primary-600"), children: item.icon }),
+            !collapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: item.label })
+          ] }),
+          !collapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            item.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-red-500 text-white text-xs px-2 py-1 rounded-full min-w-[20px] text-center", children: item.badge }),
+            hasChildren && item.isCollapsible && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+              "text-gray-400 transition-transform",
+              isExpanded && "rotate-90"
+            ), children: "\u25B6" })
+          ] })
+        ] })
+      }
+    ),
+    hasChildren && isExpanded && !collapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: (_a = item.children) == null ? void 0 : _a.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+      NavigationItemComponent,
+      {
+        item: child,
+        isActive: child.path === item.path,
+        onNavigate,
+        collapsed,
+        level: level + 1
+      },
+      child.id
+    )) })
+  ] });
+};
+var Sidebar = React17__namespace.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      brand,
+      navigation,
+      currentPath,
+      collapsed = false,
+      onNavigate,
+      onToggleCollapse,
+      className,
+      "data-testid": dataTestId
+    } = _b, props = __objRest(_b, [
+      "brand",
+      "navigation",
+      "currentPath",
+      "collapsed",
+      "onNavigate",
+      "onToggleCollapse",
+      "className",
+      "data-testid"
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "h-full bg-white border-r border-gray-200 flex flex-col",
+          "transition-all duration-300",
+          collapsed ? "w-16" : "w-full",
+          className
+        ),
+        "data-testid": dataTestId
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
+            "p-4 border-b border-gray-100",
+            collapsed && "px-2"
+          ), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+              brand.logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: brand.logo }),
+              !collapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "subheading-md", className: "text-gray-900 font-bold truncate", children: brand.name }),
+                brand.tagline && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body-xs", className: "text-gray-500 truncate", children: brand.tagline })
+              ] })
+            ] }),
+            onToggleCollapse && /* @__PURE__ */ jsxRuntime.jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: onToggleCollapse,
+                className: cn(
+                  "mt-3 w-full h-8",
+                  collapsed && "w-8 mx-auto"
+                ),
+                "data-testid": "sidebar-toggle",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                    "transition-transform",
+                    collapsed && "rotate-180"
+                  ), children: "\u25C0" }),
+                  !collapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-xs", children: "Colapsar" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex-1 p-4 space-y-2 overflow-y-auto", children: navigation.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            NavigationItemComponent,
+            {
+              item,
+              isActive: currentPath === item.path,
+              onNavigate,
+              collapsed
+            },
+            item.id
+          )) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+            "p-4 border-t border-gray-100",
+            collapsed && "px-2"
+          ), children: !collapsed && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body-xs", className: "text-gray-400 text-center", children: "\xA9 2024 Design System" }) })
+        ]
+      })
+    );
+  }
+);
+Sidebar.displayName = "Sidebar";
 function AuthLayout({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx("main", { children }) });
 }
@@ -2659,6 +3012,8 @@ exports.Form = Form;
 exports.FormField = FormField;
 exports.FormLabel = FormLabel;
 exports.FormMessage = FormMessage;
+exports.Grid = Grid;
+exports.GridItem = GridItem;
 exports.Input = Input;
 exports.Label = Label;
 exports.Modal = Modal;
@@ -2666,6 +3021,7 @@ exports.Paragraph = Paragraph;
 exports.ProgressBar = ProgressBar;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
+exports.Sidebar = Sidebar;
 exports.Step = Step;
 exports.StepContent = StepContent;
 exports.StepDescription = StepDescription;