@webiny/admin-ui 6.4.12-beta.5 → 6.5.0-beta.0

package/SegmentedControl/SegmentedControlTabs.d.ts

@@ -1,11 +1,14 @@
 import React from "react";
 import type { SegmentedControlPrimitiveProps } from "./primitives/index.js";
+import { SegmentedControlTab } from "./SegmentedControlTab.js";
 export interface SegmentedControlTabsProps {
     children: React.ReactNode;
     variant?: SegmentedControlPrimitiveProps["variant"];
     defaultValue?: string;
     className?: string;
 }
-export declare const SegmentedControlTabs: (({ children, variant, defaultValue, className }: SegmentedControlTabsProps) => React.JSX.Element) & {
-    Tab: (props: import("./SegmentedControlTab.js").SegmentedControlTabProps) => null;
+declare const BaseSegmentedControlTabs: ({ children, variant, defaultValue, className }: SegmentedControlTabsProps) => React.JSX.Element;
+export declare const SegmentedControlTabs: typeof BaseSegmentedControlTabs & {
+    Tab: typeof SegmentedControlTab;
 };
+export {};

package/SegmentedControl/primitives/SegmentedControlPrimitive.d.ts

@@ -5,7 +5,7 @@ import type { SegmentedControlItemParams, SegmentedControlItemFormatted } from "
  * Segmented Control Item Button
  */
 declare const segmentedControlItemVariants: (props?: ({
-    variant?: "ghost" | "dimmed" | "light" | null | undefined;
+    variant?: "dimmed" | "ghost" | "light" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Segmented Control Primitive

package/Select/Select.d.ts

@@ -2,21 +2,22 @@ import React from "react";
 import type { SelectPrimitiveProps } from "./primitives/index.js";
 import type { FormComponentProps } from "../FormComponent/index.js";
 type SelectProps = SelectPrimitiveProps & FormComponentProps;
-declare const Select: (({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element) & {
-    original: ({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element;
+declare const DecoratableSelect: ({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element;
+declare const Select: typeof DecoratableSelect & {
+    original: typeof DecoratableSelect;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element;
+    original: typeof DecoratableSelect & {
+        original: typeof DecoratableSelect;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableSelect & {
+        original: typeof DecoratableSelect;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Select/primitives/components/SelectContent.js

@@ -5,7 +5,7 @@ import { SelectScrollDownButton } from "./SelectScrollDownButton.js";
 import * as __rspack_external_react from "react";
 const SelectContent = ({ className, children, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Select.Portal, null, /*#__PURE__*/ __rspack_external_react.createElement(Select.Content, {
         className: cn([
-            "relative z-popover max-h-96 min-w-56 shadow-lg py-sm overflow-hidden rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong",
+            "relative z-popover max-h-[250px] min-w-56 shadow-lg py-sm overflow-hidden rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong",
             "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
         ], className),

package/Select/primitives/components/SelectContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select/primitives/components/SelectContent.js","sources":["../../../../src/Select/primitives/components/SelectContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Select as SelectPrimitives } from \"radix-ui\";\nimport { cn } from \"~/utils.js\";\nimport { SelectScrollUpButton } from \"./SelectScrollUpButton.js\";\nimport { SelectScrollDownButton } from \"./SelectScrollDownButton.js\";\n\ntype SelectContentProps = SelectPrimitives.SelectContentProps;\n\nconst SelectContent = ({ className, children, ...props }: SelectContentProps) => (\n    <SelectPrimitives.Portal>\n        <SelectPrimitives.Content\n            className={cn(\n                [\n                    \"relative z-popover max-h-96 min-w-56 shadow-lg py-sm overflow-hidden rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong\",\n                    \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n                    \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\"\n                ],\n                className\n            )}\n            position={\"popper\"}\n            {...props}\n        >\n            <SelectScrollUpButton />\n            <SelectPrimitives.Viewport\n                className={cn([\n                    \"py-xs\",\n                    \"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)\"\n                ])}\n            >\n                {children}\n            </SelectPrimitives.Viewport>\n            <SelectScrollDownButton />\n        </SelectPrimitives.Content>\n    </SelectPrimitives.Portal>\n);\n\nexport { SelectContent, type SelectContentProps };\n"],"names":["SelectContent","className","children","props","SelectPrimitives","cn","SelectScrollUpButton","SelectScrollDownButton"],"mappings":";;;;;AAQA,MAAMA,gBAAgB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,OAA2B,iBACxE,sCAACC,OAAAA,MAAuB,sBACpB,sCAACA,OAAAA,OAAwB;QACrB,WAAWC,GACP;YACI;YACA;YACA;SACH,EACDJ;QAEJ,UAAU;QACT,GAAGE,KAAK;qBAET,sCAACG,sBAAoBA,OAAAA,WAAAA,GACrB,sCAACF,OAAAA,QAAyB;QACtB,WAAWC,GAAG;YACV;YACA;SACH;OAEAH,WAAAA,WAAAA,GAEL,sCAACK,wBAAsBA"}
+{"version":3,"file":"Select/primitives/components/SelectContent.js","sources":["../../../../src/Select/primitives/components/SelectContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Select as SelectPrimitives } from \"radix-ui\";\nimport { cn } from \"~/utils.js\";\nimport { SelectScrollUpButton } from \"./SelectScrollUpButton.js\";\nimport { SelectScrollDownButton } from \"./SelectScrollDownButton.js\";\n\ntype SelectContentProps = SelectPrimitives.SelectContentProps;\n\nconst SelectContent = ({ className, children, ...props }: SelectContentProps) => (\n    <SelectPrimitives.Portal>\n        <SelectPrimitives.Content\n            className={cn(\n                [\n                    \"relative z-popover max-h-[250px] min-w-56 shadow-lg py-sm overflow-hidden rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong\",\n                    \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n                    \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\"\n                ],\n                className\n            )}\n            position={\"popper\"}\n            {...props}\n        >\n            <SelectScrollUpButton />\n            <SelectPrimitives.Viewport\n                className={cn([\n                    \"py-xs\",\n                    \"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)\"\n                ])}\n            >\n                {children}\n            </SelectPrimitives.Viewport>\n            <SelectScrollDownButton />\n        </SelectPrimitives.Content>\n    </SelectPrimitives.Portal>\n);\n\nexport { SelectContent, type SelectContentProps };\n"],"names":["SelectContent","className","children","props","SelectPrimitives","cn","SelectScrollUpButton","SelectScrollDownButton"],"mappings":";;;;;AAQA,MAAMA,gBAAgB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,OAA2B,iBACxE,sCAACC,OAAAA,MAAuB,sBACpB,sCAACA,OAAAA,OAAwB;QACrB,WAAWC,GACP;YACI;YACA;YACA;SACH,EACDJ;QAEJ,UAAU;QACT,GAAGE,KAAK;qBAET,sCAACG,sBAAoBA,OAAAA,WAAAA,GACrB,sCAACF,OAAAA,QAAyB;QACtB,WAAWC,GAAG;YACV;YACA;SACH;OAEAH,WAAAA,WAAAA,GAEL,sCAACK,wBAAsBA"}

package/Select/primitives/components/SelectTrigger.d.ts

@@ -2,8 +2,8 @@ import * as React from "react";
 import { Select as SelectPrimitives } from "radix-ui";
 import { type VariantProps } from "../../../utils.js";
 declare const selectTriggerVariants: (props?: ({
-    variant?: "primary" | "secondary" | "ghost" | "ghost-negative" | null | undefined;
-    size?: "md" | "lg" | "xl" | null | undefined;
+    variant?: "ghost" | "ghost-negative" | "primary" | "secondary" | null | undefined;
+    size?: "lg" | "md" | "xl" | null | undefined;
     invalid?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SelectTriggerProps extends SelectPrimitives.SelectTriggerProps, VariantProps<typeof selectTriggerVariants> {

package/Separator/Separator.d.ts

@@ -2,30 +2,31 @@ import * as React from "react";
 import { Separator as SeparatorPrimitive } from "radix-ui";
 import { type VariantProps } from "../utils.js";
 declare const separatorVariants: (props?: ({
-    margin?: "sm" | "md" | "none" | "lg" | "xl" | "xs" | null | undefined;
+    margin?: "lg" | "md" | "none" | "sm" | "xl" | "xs" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
-    variant?: "accent" | "base" | "strong" | "transparent" | "dimmed" | "muted" | null | undefined;
+    variant?: "accent" | "base" | "dimmed" | "muted" | "strong" | "transparent" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SeparatorPosition = "start" | "middle" | "end";
 type SeparatorProps = Omit<SeparatorPrimitive.SeparatorProps, "children"> & VariantProps<typeof separatorVariants> & {
     children?: React.ReactNode;
     labelPosition?: SeparatorPosition;
 };
-declare const Separator: (({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element) & {
-    original: ({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element;
+declare const SeparatorBase: ({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element;
+declare const Separator: typeof SeparatorBase & {
+    original: typeof SeparatorBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element) & {
-        original: ({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element;
+    original: typeof SeparatorBase & {
+        original: typeof SeparatorBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element) & {
-        original: ({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof SeparatorBase & {
+        original: typeof SeparatorBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Sidebar/Sidebar.d.ts

@@ -7,21 +7,22 @@ interface SidebarProps extends Omit<React.ComponentPropsWithoutRef<typeof Sideba
     children: React.ReactNode;
     footer?: React.ReactNode;
 }
-declare const Sidebar: ((props: SidebarProps) => React.JSX.Element) & {
-    original: (props: SidebarProps) => React.JSX.Element;
+declare const SidebarBase: (props: SidebarProps) => React.JSX.Element;
+declare const Sidebar: typeof SidebarBase & {
+    original: typeof SidebarBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: SidebarProps) => React.JSX.Element) & {
-        original: (props: SidebarProps) => React.JSX.Element;
+    original: typeof SidebarBase & {
+        original: typeof SidebarBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: SidebarProps) => React.JSX.Element) & {
-        original: (props: SidebarProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof SidebarBase & {
+        original: typeof SidebarBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Sidebar/components/SidebarIcon.d.ts

@@ -3,21 +3,22 @@ import { type IconProps } from "../../Icon/index.js";
 interface SidebarIconProps extends Omit<IconProps, "icon"> {
     element?: React.ReactNode;
 }
-declare const SidebarIcon: (({ element, ...props }: SidebarIconProps) => React.JSX.Element) & {
-    original: ({ element, ...props }: SidebarIconProps) => React.JSX.Element;
+declare const SidebarIconBase: ({ element, ...props }: SidebarIconProps) => React.JSX.Element;
+declare const SidebarIcon: typeof SidebarIconBase & {
+    original: typeof SidebarIconBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ element, ...props }: SidebarIconProps) => React.JSX.Element) & {
-        original: ({ element, ...props }: SidebarIconProps) => React.JSX.Element;
+    original: typeof SidebarIconBase & {
+        original: typeof SidebarIconBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ element, ...props }: SidebarIconProps) => React.JSX.Element) & {
-        original: ({ element, ...props }: SidebarIconProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<typeof SidebarIconBase & {
+        original: typeof SidebarIconBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Sidebar/components/SidebarProvider.d.ts

@@ -36,8 +36,8 @@ type SidebarProviderProps = React.HTMLAttributes<HTMLDivElement> & {
     state?: SidebarCachedState;
     onChangeState?: (state: SidebarCachedState) => void;
 };
-declare const SidebarProvider: {
-    ({ className, children, state: cachedState, onChangeState, ...props }: SidebarProviderProps): React.JSX.Element;
-    displayName: string;
-};
+declare function SidebarProvider({ className, children, state: cachedState, onChangeState, ...props }: SidebarProviderProps): React.JSX.Element;
+declare namespace SidebarProvider {
+    var displayName: string;
+}
 export { SidebarProvider, useSidebar, type PinnedItemData };

package/Sidebar/components/items/SidebarMenuGroup.d.ts

@@ -1,22 +1,23 @@
 import React from "react";
 import { type SidebarMenuItemGroupProps } from "./SidebarMenuItem.js";
 import { type SidebarMenuItemIconProps } from "../../../Sidebar/components/items/SidebarMenuItemIcon.js";
-import { type SidebarMenuItemActionProps } from "../../../Sidebar/components/items/SidebarMenuItemAction.js";
-declare const SidebarMenuGroup: ((props: SidebarMenuItemGroupProps) => React.JSX.Element) & {
-    original: (props: SidebarMenuItemGroupProps) => React.JSX.Element;
+import { SidebarMenuItemAction, type SidebarMenuItemActionProps } from "../../../Sidebar/components/items/SidebarMenuItemAction.js";
+declare const SidebarMenuGroupBase: (props: SidebarMenuItemGroupProps) => React.JSX.Element;
+declare const SidebarMenuGroup: typeof SidebarMenuGroupBase & {
+    original: typeof SidebarMenuGroupBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: SidebarMenuItemGroupProps) => React.JSX.Element) & {
-        original: (props: SidebarMenuItemGroupProps) => React.JSX.Element;
+    original: typeof SidebarMenuGroupBase & {
+        original: typeof SidebarMenuGroupBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: SidebarMenuItemGroupProps) => React.JSX.Element) & {
-        original: (props: SidebarMenuItemGroupProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof SidebarMenuGroupBase & {
+        original: typeof SidebarMenuGroupBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
@@ -40,6 +41,6 @@ declare const SidebarMenuGroup: ((props: SidebarMenuItemGroupProps) => React.JSX
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     };
-    Action: ({ element, showOnHover, className, ...props }: SidebarMenuItemActionProps) => React.JSX.Element | null;
+    Action: typeof SidebarMenuItemAction;
 };
 export { SidebarMenuGroup, type SidebarMenuItemGroupProps, type SidebarMenuItemIconProps, type SidebarMenuItemActionProps };

package/Sidebar/components/items/SidebarMenuItem.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { type SidebarMenuItemIconProps } from "./SidebarMenuItemIcon.js";
-import { type SidebarMenuItemActionProps } from "./SidebarMenuItemAction.js";
-import { type SidebarMenuItemBadgeProps } from "./SidebarMenuItemBadge.js";
+import { SidebarMenuItemAction, type SidebarMenuItemActionProps } from "./SidebarMenuItemAction.js";
+import { SidebarMenuItemBadge, type SidebarMenuItemBadgeProps } from "./SidebarMenuItemBadge.js";
 import { LinkProps } from "../../../index.js";
 export interface SidebarMenuItemBaseProps {
     text: React.ReactNode;
@@ -26,21 +26,22 @@ type SidebarMenuItemButtonProps = SidebarMenuItemBaseProps & {
 type SidebarMenuItemGroupProps = SidebarMenuItemButtonProps;
 type SidebarMenuItemLinkProps = SidebarMenuItemBaseProps & LinkProps;
 type SidebarMenuItemProps = SidebarMenuItemButtonProps | SidebarMenuItemLinkProps;
-declare const SidebarMenuItem: ((props: SidebarMenuItemProps) => React.JSX.Element) & {
-    original: (props: SidebarMenuItemProps) => React.JSX.Element;
+declare const SidebarMenuItemBase: (props: SidebarMenuItemProps) => React.JSX.Element;
+declare const SidebarMenuItem: typeof SidebarMenuItemBase & {
+    original: typeof SidebarMenuItemBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: SidebarMenuItemProps) => React.JSX.Element) & {
-        original: (props: SidebarMenuItemProps) => React.JSX.Element;
+    original: typeof SidebarMenuItemBase & {
+        original: typeof SidebarMenuItemBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: SidebarMenuItemProps) => React.JSX.Element) & {
-        original: (props: SidebarMenuItemProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof SidebarMenuItemBase & {
+        original: typeof SidebarMenuItemBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
@@ -64,7 +65,7 @@ declare const SidebarMenuItem: ((props: SidebarMenuItemProps) => React.JSX.Eleme
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     };
-    Action: ({ element, showOnHover, className, ...props }: SidebarMenuItemActionProps) => React.JSX.Element | null;
-    Badge: ({ text }: SidebarMenuItemBadgeProps) => React.JSX.Element;
+    Action: typeof SidebarMenuItemAction;
+    Badge: typeof SidebarMenuItemBadge;
 };
 export { SidebarMenuItem, type SidebarMenuItemProps, type SidebarMenuItemButtonProps, type SidebarMenuItemLinkProps, type SidebarMenuItemGroupProps, type SidebarMenuItemIconProps, type SidebarMenuItemActionProps, type SidebarMenuItemBadgeProps };

package/Sidebar/components/items/SidebarMenuItemIcon.d.ts

@@ -3,21 +3,22 @@ import { type IconProps } from "../../../Icon/index.js";
 interface SidebarMenuItemIconProps extends Omit<IconProps, "icon"> {
     element?: React.ReactNode;
 }
-declare const SidebarMenuItemIcon: (({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null) & {
-    original: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null;
+declare const SidebarMenuItemIconBase: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null;
+declare const SidebarMenuItemIcon: typeof SidebarMenuItemIconBase & {
+    original: typeof SidebarMenuItemIconBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null) & {
-        original: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null;
+    original: typeof SidebarMenuItemIconBase & {
+        original: typeof SidebarMenuItemIconBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null) & {
-        original: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null;
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<typeof SidebarMenuItemIconBase & {
+        original: typeof SidebarMenuItemIconBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Sidebar/components/items/SidebarMenuLink.d.ts

@@ -1,23 +1,24 @@
 import React from "react";
 import { type SidebarMenuItemLinkProps } from "./SidebarMenuItem.js";
 import { type SidebarMenuItemIconProps } from "../../../Sidebar/components/items/SidebarMenuItemIcon.js";
-import { type SidebarMenuItemActionProps } from "../../../Sidebar/components/items/SidebarMenuItemAction.js";
-import { type SidebarMenuItemBadgeProps } from "../../../Sidebar/components/items/SidebarMenuItemBadge.js";
-declare const SidebarMenuLink: ((props: SidebarMenuItemLinkProps) => React.JSX.Element) & {
-    original: (props: SidebarMenuItemLinkProps) => React.JSX.Element;
+import { SidebarMenuItemAction, type SidebarMenuItemActionProps } from "../../../Sidebar/components/items/SidebarMenuItemAction.js";
+import { SidebarMenuItemBadge, type SidebarMenuItemBadgeProps } from "../../../Sidebar/components/items/SidebarMenuItemBadge.js";
+declare const SidebarMenuLinkBase: (props: SidebarMenuItemLinkProps) => React.JSX.Element;
+declare const SidebarMenuLink: typeof SidebarMenuLinkBase & {
+    original: typeof SidebarMenuLinkBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: SidebarMenuItemLinkProps) => React.JSX.Element) & {
-        original: (props: SidebarMenuItemLinkProps) => React.JSX.Element;
+    original: typeof SidebarMenuLinkBase & {
+        original: typeof SidebarMenuLinkBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: SidebarMenuItemLinkProps) => React.JSX.Element) & {
-        original: (props: SidebarMenuItemLinkProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof SidebarMenuLinkBase & {
+        original: typeof SidebarMenuLinkBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
@@ -41,7 +42,7 @@ declare const SidebarMenuLink: ((props: SidebarMenuItemLinkProps) => React.JSX.E
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     };
-    Action: ({ element, showOnHover, className, ...props }: SidebarMenuItemActionProps) => React.JSX.Element | null;
-    Badge: ({ text }: SidebarMenuItemBadgeProps) => React.JSX.Element;
+    Action: typeof SidebarMenuItemAction;
+    Badge: typeof SidebarMenuItemBadge;
 };
 export { SidebarMenuLink, type SidebarMenuItemLinkProps, type SidebarMenuItemIconProps, type SidebarMenuItemActionProps, type SidebarMenuItemBadgeProps };

package/Sidebar/components/items/SidebarMenuProvider.d.ts

@@ -11,8 +11,8 @@ interface SidebarMenuProviderProps {
 }
 declare const SidebarMenuContext: React.Context<SidebarMenuContext>;
 declare function useSidebarMenu(): SidebarMenuContext;
-declare const SidebarMenuProvider: {
-    ({ level, parentIcon, children }: SidebarMenuProviderProps): React.JSX.Element;
-    displayName: string;
-};
+declare function SidebarMenuProvider({ level, parentIcon, children }: SidebarMenuProviderProps): React.JSX.Element;
+declare namespace SidebarMenuProvider {
+    var displayName: string;
+}
 export { SidebarMenuProvider, useSidebarMenu };

package/Sidebar/components/items/SidebarMenuRootItem.d.ts

@@ -1,20 +1,22 @@
 import React from "react";
+import { SidebarMenuItemAction } from "./SidebarMenuItemAction.js";
 import { type SidebarMenuItemProps } from "./SidebarMenuItem.js";
-declare const SidebarMenuRootItem: (({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element) & {
-    original: ({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element;
+declare const SidebarMenuItemBase: ({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element;
+declare const SidebarMenuRootItem: typeof SidebarMenuItemBase & {
+    original: typeof SidebarMenuItemBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element) & {
-        original: ({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element;
+    original: typeof SidebarMenuItemBase & {
+        original: typeof SidebarMenuItemBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element) & {
-        original: ({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof SidebarMenuItemBase & {
+        original: typeof SidebarMenuItemBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
@@ -38,6 +40,6 @@ declare const SidebarMenuRootItem: (({ children, className, pinnable, action, ..
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     };
-    Action: ({ element, showOnHover, className, ...props }: import("./SidebarMenuItemAction.js").SidebarMenuItemActionProps) => React.JSX.Element | null;
+    Action: typeof SidebarMenuItemAction;
 };
 export { SidebarMenuRootItem, type SidebarMenuItemProps };

package/Skeleton/Skeleton.d.ts

@@ -2,25 +2,27 @@ import React from "react";
 import { type VariantProps } from "../utils.js";
 declare const skeletonVariants: (props?: ({
     type?: "area" | "text" | "thumbnail" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | "3xl" | null | undefined;
+    size?: "3xl" | "lg" | "md" | "sm" | "xl" | "xs" | "xxl" | null | undefined;
+    shade?: "dark" | "light" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
 }
-declare const Skeleton: (({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element) & {
-    original: ({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element;
+declare const DecoratableSkeleton: ({ size, type, shade, className, ...props }: SkeletonProps) => React.JSX.Element;
+declare const Skeleton: typeof DecoratableSkeleton & {
+    original: typeof DecoratableSkeleton;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element) & {
-        original: ({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element;
+    original: typeof DecoratableSkeleton & {
+        original: typeof DecoratableSkeleton;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element) & {
-        original: ({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableSkeleton & {
+        original: typeof DecoratableSkeleton;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Skeleton/Skeleton.js

@@ -1,6 +1,6 @@
 import react from "react";
 import { cn, cva, makeDecoratable } from "../utils.js";
-const skeletonVariants = cva("animate-skeleton-pulse rounded-sm", {
+const skeletonVariants = cva("rounded-sm", {
     variants: {
         type: {
             text: "w-full",
@@ -15,6 +15,10 @@ const skeletonVariants = cva("animate-skeleton-pulse rounded-sm", {
             xl: "h-xl",
             xxl: "h-[40px]",
             "3xl": "h-xxl"
+        },
+        shade: {
+            dark: "animate-skeleton-pulse",
+            light: "animate-skeleton-pulse-light"
         }
     },
     compoundVariants: [
@@ -31,13 +35,15 @@ const skeletonVariants = cva("animate-skeleton-pulse rounded-sm", {
     ],
     defaultVariants: {
         type: "area",
-        size: "lg"
+        size: "lg",
+        shade: "dark"
     }
 });
-const DecoratableSkeleton = ({ size, type, className, ...props })=>/*#__PURE__*/ react.createElement("div", {
+const DecoratableSkeleton = ({ size, type, shade, className, ...props })=>/*#__PURE__*/ react.createElement("div", {
         className: cn(skeletonVariants({
             size,
-            type
+            type,
+            shade
         }), className),
         ...props
     });

package/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton/Skeleton.js","sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils.js\";\n\nconst skeletonVariants = cva(\"animate-skeleton-pulse rounded-sm\", {\n    variants: {\n        type: {\n            text: \"w-full\",\n            thumbnail: \"aspect-square\",\n            area: \"size-full\"\n        },\n        size: {\n            xs: \"h-sm\",\n            sm: \"h-sm-extra\",\n            md: \"h-md\",\n            lg: \"h-lg\",\n            xl: \"h-xl\",\n            xxl: \"h-[40px]\",\n            \"3xl\": \"h-xxl\"\n        }\n    },\n    compoundVariants: [\n        // The following compound variants are not supported by the current version of the design system.\n        {\n            type: \"thumbnail\",\n            size: \"xs\",\n            class: \"hidden!\"\n        },\n        {\n            type: \"text\",\n            size: \"3xl\",\n            class: \"hidden!\"\n        }\n    ],\n    defaultVariants: {\n        type: \"area\",\n        size: \"lg\"\n    }\n});\n\ninterface SkeletonProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {}\n\nconst DecoratableSkeleton = ({ size, type, className, ...props }: SkeletonProps) => {\n    return <div className={cn(skeletonVariants({ size, type }), className)} {...props} />;\n};\n\nconst Skeleton = makeDecoratable(\"Skeleton\", DecoratableSkeleton);\n\nexport { Skeleton, type SkeletonProps };\n"],"names":["skeletonVariants","cva","DecoratableSkeleton","size","type","className","props","cn","Skeleton","makeDecoratable"],"mappings":";;AAGA,MAAMA,mBAAmBC,IAAI,qCAAqC;IAC9D,UAAU;QACN,MAAM;YACF,MAAM;YACN,WAAW;YACX,MAAM;QACV;QACA,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,KAAK;YACL,OAAO;QACX;IACJ;IACA,kBAAkB;QAEd;YACI,MAAM;YACN,MAAM;YACN,OAAO;QACX;QACA;YACI,MAAM;YACN,MAAM;YACN,OAAO;QACX;KACH;IACD,iBAAiB;QACb,MAAM;QACN,MAAM;IACV;AACJ;AAKA,MAAMC,sBAAsB,CAAC,EAAEC,IAAI,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGC,OAAsB,GACpE,WAAP,GAAO,oBAAC;QAAI,WAAWC,GAAGP,iBAAiB;YAAEG;YAAMC;QAAK,IAAIC;QAAa,GAAGC,KAAK;;AAGrF,MAAME,WAAWC,gBAAgB,YAAYP"}
+{"version":3,"file":"Skeleton/Skeleton.js","sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils.js\";\n\nconst skeletonVariants = cva(\"rounded-sm\", {\n    variants: {\n        type: {\n            text: \"w-full\",\n            thumbnail: \"aspect-square\",\n            area: \"size-full\"\n        },\n        size: {\n            xs: \"h-sm\",\n            sm: \"h-sm-extra\",\n            md: \"h-md\",\n            lg: \"h-lg\",\n            xl: \"h-xl\",\n            xxl: \"h-[40px]\",\n            \"3xl\": \"h-xxl\"\n        },\n        shade: {\n            dark: \"animate-skeleton-pulse\",\n            light: \"animate-skeleton-pulse-light\"\n        }\n    },\n    compoundVariants: [\n        // The following compound variants are not supported by the current version of the design system.\n        {\n            type: \"thumbnail\",\n            size: \"xs\",\n            class: \"hidden!\"\n        },\n        {\n            type: \"text\",\n            size: \"3xl\",\n            class: \"hidden!\"\n        }\n    ],\n    defaultVariants: {\n        type: \"area\",\n        size: \"lg\",\n        shade: \"dark\"\n    }\n});\n\ninterface SkeletonProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {}\n\nconst DecoratableSkeleton = ({ size, type, shade, className, ...props }: SkeletonProps) => {\n    return <div className={cn(skeletonVariants({ size, type, shade }), className)} {...props} />;\n};\n\nconst Skeleton = makeDecoratable(\"Skeleton\", DecoratableSkeleton);\n\nexport { Skeleton, type SkeletonProps };\n"],"names":["skeletonVariants","cva","DecoratableSkeleton","size","type","shade","className","props","cn","Skeleton","makeDecoratable"],"mappings":";;AAGA,MAAMA,mBAAmBC,IAAI,cAAc;IACvC,UAAU;QACN,MAAM;YACF,MAAM;YACN,WAAW;YACX,MAAM;QACV;QACA,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,KAAK;YACL,OAAO;QACX;QACA,OAAO;YACH,MAAM;YACN,OAAO;QACX;IACJ;IACA,kBAAkB;QAEd;YACI,MAAM;YACN,MAAM;YACN,OAAO;QACX;QACA;YACI,MAAM;YACN,MAAM;YACN,OAAO;QACX;KACH;IACD,iBAAiB;QACb,MAAM;QACN,MAAM;QACN,OAAO;IACX;AACJ;AAKA,MAAMC,sBAAsB,CAAC,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,OAAsB,GAC3E,WAAP,GAAO,oBAAC;QAAI,WAAWC,GAAGR,iBAAiB;YAAEG;YAAMC;YAAMC;QAAM,IAAIC;QAAa,GAAGC,KAAK;;AAG5F,MAAME,WAAWC,gBAAgB,YAAYR"}

package/Skeleton/Skeleton.stories.d.ts

@@ -15,4 +15,6 @@ export declare const Large: Story;
 export declare const ExtraLarge: Story;
 export declare const DoubleExtraLarge: Story;
 export declare const TripleExtraLarge: Story;
+export declare const Dark: Story;
+export declare const Light: Story;
 export declare const Documentation: Story;

package/Skeleton/Skeleton.stories.js

@@ -26,6 +26,13 @@ const meta = {
                 "xxl",
                 "3xl"
             ]
+        },
+        shade: {
+            control: "select",
+            options: [
+                "dark",
+                "light"
+            ]
         }
     }
 };
@@ -98,10 +105,21 @@ const TripleExtraLarge = {
         size: "3xl"
     }
 };
+const Dark = {
+    args: {
+        shade: "dark"
+    }
+};
+const Light = {
+    args: {
+        shade: "light"
+    }
+};
 const Documentation = {
     args: {
         type: "area",
-        size: "lg"
+        size: "lg",
+        shade: "dark"
     },
     argTypes: {
         type: {
@@ -125,10 +143,18 @@ const Documentation = {
                 "xxl",
                 "3xl"
             ]
+        },
+        shade: {
+            control: "select",
+            description: "The shade of the skeleton",
+            options: [
+                "dark",
+                "light"
+            ]
         }
     }
 };
 export default Skeleton_stories;
-export { Area, Default, Documentation, DoubleExtraLarge, ExtraLarge, ExtraSmall, Large, Medium, MultipleAreas, Small, Text, Thumbnail, TripleExtraLarge };
+export { Area, Dark, Default, Documentation, DoubleExtraLarge, ExtraLarge, ExtraSmall, Large, Light, Medium, MultipleAreas, Small, Text, Thumbnail, TripleExtraLarge };
 
 //# sourceMappingURL=Skeleton.stories.js.map

package/Skeleton/Skeleton.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton/Skeleton.stories.js","sources":["../../src/Skeleton/Skeleton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Skeleton } from \"./Skeleton.js\";\n\nconst meta: Meta<typeof Skeleton> = {\n    title: \"Components/Skeleton\",\n    component: Skeleton,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Skeleton>;\n\nexport const Default: Story = {};\n\nexport const Text: Story = {\n    args: {\n        type: \"text\"\n    }\n};\n\nexport const Thumbnail: Story = {\n    args: {\n        type: \"thumbnail\"\n    }\n};\n\nexport const Area: Story = {\n    args: {\n        type: \"area\",\n        className: \"w-1/2 h-32\"\n    }\n};\n\nexport const MultipleAreas: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <div className=\"flex flex-col gap-md\">\n                <Skeleton type=\"area\" className={\"w-32 h-32\"} />\n                <Skeleton type=\"area\" className={\"w-32 h-32\"} />\n            </div>\n            <div>\n                <Skeleton type=\"area\" className=\"w-32 h-full\" />\n            </div>\n        </div>\n    )\n};\n\nexport const ExtraSmall: Story = {\n    args: {\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        size: \"xl\"\n    }\n};\n\nexport const DoubleExtraLarge: Story = {\n    args: {\n        size: \"xxl\"\n    }\n};\n\nexport const TripleExtraLarge: Story = {\n    args: {\n        size: \"3xl\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        type: \"area\",\n        size: \"lg\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            description: \"The type of skeleton to display\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            description: \"The size of the skeleton\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        }\n    }\n};\n"],"names":["meta","Skeleton","Default","Text","Thumbnail","Area","MultipleAreas","ExtraSmall","Small","Medium","Large","ExtraLarge","DoubleExtraLarge","TripleExtraLarge","Documentation"],"mappings":";;AAIA,MAAMA,OAA8B;IAChC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAa;aAAO;QAC1C;QACA,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;gBAAM;gBAAM;gBAAO;aAAM;QACzD;IACJ;AACJ;AAEA,yBAAeD;AAIR,MAAME,UAAiB,CAAC;AAExB,MAAMC,OAAc;IACvB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,OAAc;IACvB,MAAM;QACF,MAAM;QACN,WAAW;IACf;AACJ;AAEO,MAAMC,gBAAuB;IAChC,QAAQ,kBACJ,oBAAC;YAAI,WAAU;yBACX,oBAAC;YAAI,WAAU;yBACX,oBAACL,UAAQA;YAAC,MAAK;YAAO,WAAW;0BACjC,oBAACA,UAAQA;YAAC,MAAK;YAAO,WAAW;2BAErC,oBAAC,2BACG,oBAACA,UAAQA;YAAC,MAAK;YAAO,WAAU;;AAIhD;AAEO,MAAMM,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,mBAA0B;IACnC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,mBAA0B;IACnC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,MAAM;QACN,MAAM;IACV;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,aAAa;YACb,SAAS;gBAAC;gBAAQ;gBAAa;aAAO;QAC1C;QACA,MAAM;YACF,SAAS;YACT,aAAa;YACb,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;gBAAM;gBAAM;gBAAO;aAAM;QACzD;IACJ;AACJ"}
+{"version":3,"file":"Skeleton/Skeleton.stories.js","sources":["../../src/Skeleton/Skeleton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Skeleton } from \"./Skeleton.js\";\n\nconst meta: Meta<typeof Skeleton> = {\n    title: \"Components/Skeleton\",\n    component: Skeleton,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        },\n        shade: {\n            control: \"select\",\n            options: [\"dark\", \"light\"]\n        }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Skeleton>;\n\nexport const Default: Story = {};\n\nexport const Text: Story = {\n    args: {\n        type: \"text\"\n    }\n};\n\nexport const Thumbnail: Story = {\n    args: {\n        type: \"thumbnail\"\n    }\n};\n\nexport const Area: Story = {\n    args: {\n        type: \"area\",\n        className: \"w-1/2 h-32\"\n    }\n};\n\nexport const MultipleAreas: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <div className=\"flex flex-col gap-md\">\n                <Skeleton type=\"area\" className={\"w-32 h-32\"} />\n                <Skeleton type=\"area\" className={\"w-32 h-32\"} />\n            </div>\n            <div>\n                <Skeleton type=\"area\" className=\"w-32 h-full\" />\n            </div>\n        </div>\n    )\n};\n\nexport const ExtraSmall: Story = {\n    args: {\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        size: \"xl\"\n    }\n};\n\nexport const DoubleExtraLarge: Story = {\n    args: {\n        size: \"xxl\"\n    }\n};\n\nexport const TripleExtraLarge: Story = {\n    args: {\n        size: \"3xl\"\n    }\n};\n\nexport const Dark: Story = {\n    args: {\n        shade: \"dark\"\n    }\n};\n\nexport const Light: Story = {\n    args: {\n        shade: \"light\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        type: \"area\",\n        size: \"lg\",\n        shade: \"dark\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            description: \"The type of skeleton to display\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            description: \"The size of the skeleton\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        },\n        shade: {\n            control: \"select\",\n            description: \"The shade of the skeleton\",\n            options: [\"dark\", \"light\"]\n        }\n    }\n};\n"],"names":["meta","Skeleton","Default","Text","Thumbnail","Area","MultipleAreas","ExtraSmall","Small","Medium","Large","ExtraLarge","DoubleExtraLarge","TripleExtraLarge","Dark","Light","Documentation"],"mappings":";;AAIA,MAAMA,OAA8B;IAChC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAa;aAAO;QAC1C;QACA,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;gBAAM;gBAAM;gBAAO;aAAM;QACzD;QACA,OAAO;YACH,SAAS;YACT,SAAS;gBAAC;gBAAQ;aAAQ;QAC9B;IACJ;AACJ;AAEA,yBAAeD;AAIR,MAAME,UAAiB,CAAC;AAExB,MAAMC,OAAc;IACvB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,OAAc;IACvB,MAAM;QACF,MAAM;QACN,WAAW;IACf;AACJ;AAEO,MAAMC,gBAAuB;IAChC,QAAQ,kBACJ,oBAAC;YAAI,WAAU;yBACX,oBAAC;YAAI,WAAU;yBACX,oBAACL,UAAQA;YAAC,MAAK;YAAO,WAAW;0BACjC,oBAACA,UAAQA;YAAC,MAAK;YAAO,WAAW;2BAErC,oBAAC,2BACG,oBAACA,UAAQA;YAAC,MAAK;YAAO,WAAU;;AAIhD;AAEO,MAAMM,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,mBAA0B;IACnC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,mBAA0B;IACnC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,OAAc;IACvB,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,MAAM;QACN,MAAM;QACN,OAAO;IACX;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,aAAa;YACb,SAAS;gBAAC;gBAAQ;gBAAa;aAAO;QAC1C;QACA,MAAM;YACF,SAAS;YACT,aAAa;YACb,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;gBAAM;gBAAM;gBAAO;aAAM;QACzD;QACA,OAAO;YACH,SAAS;YACT,aAAa;YACb,SAAS;gBAAC;gBAAQ;aAAQ;QAC9B;IACJ;AACJ"}