@webiny/admin-ui 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/Sidebar/components/items/SidebarMenuItem.js

@@ -2,6 +2,7 @@ import react from "react";
 import { makeDecoratable, withStaticProps } from "../../../utils.js";
 import { SidebarMenuItemIcon } from "./SidebarMenuItemIcon.js";
 import { SidebarMenuItemAction } from "./SidebarMenuItemAction.js";
+import { SidebarMenuItemBadge } from "./SidebarMenuItemBadge.js";
 import { SidebarMenuSubItem } from "./SidebarMenuSubItem.js";
 import { useSidebarMenu } from "./SidebarMenuProvider.js";
 import { SidebarMenuRootItem } from "./SidebarMenuRootItem.js";
@@ -13,7 +14,8 @@ const SidebarMenuItemBase = (props)=>{
 const DecoratableSidebarMenuItem = makeDecoratable("SidebarMenuItem", SidebarMenuItemBase);
 const SidebarMenuItem = withStaticProps(DecoratableSidebarMenuItem, {
     Icon: SidebarMenuItemIcon,
-    Action: SidebarMenuItemAction
+    Action: SidebarMenuItemAction,
+    Badge: SidebarMenuItemBadge
 });
 export { SidebarMenuItem };
 

package/Sidebar/components/items/SidebarMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar/components/items/SidebarMenuItem.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { SidebarMenuItemIcon, type SidebarMenuItemIconProps } from \"./SidebarMenuItemIcon.js\";\nimport { SidebarMenuItemAction, type SidebarMenuItemActionProps } from \"./SidebarMenuItemAction.js\";\nimport { SidebarMenuSubItem } from \"./SidebarMenuSubItem.js\";\nimport { useSidebarMenu } from \"./SidebarMenuProvider.js\";\nimport { SidebarMenuRootItem } from \"~/Sidebar/components/items/SidebarMenuRootItem.js\";\nimport { LinkProps } from \"~/index.js\";\n\nexport interface SidebarMenuItemBaseProps {\n    text: React.ReactNode;\n    className?: string;\n    collapsible?: boolean;\n    children?: React.ReactNode;\n    onClick?: React.MouseEventHandler;\n    icon?: React.ReactNode;\n    action?: React.ReactNode;\n    variant?: \"group-label\";\n    active?: boolean;\n    disabled?: boolean;\n    pinnable?: boolean;\n    pinnedIcon?: React.ReactNode;\n}\n\ntype SidebarMenuItemButtonProps = SidebarMenuItemBaseProps & {\n    to?: never;\n    route?: never;\n    params?: never;\n};\n\ntype SidebarMenuItemGroupProps = SidebarMenuItemButtonProps;\ntype SidebarMenuItemLinkProps = SidebarMenuItemBaseProps & LinkProps;\n\ntype SidebarMenuItemProps = SidebarMenuItemButtonProps | SidebarMenuItemLinkProps;\n\nconst SidebarMenuItemBase = (props: SidebarMenuItemProps) => {\n    const { currentLevel } = useSidebarMenu();\n\n    if (currentLevel === 0) {\n        return <SidebarMenuRootItem {...props} />;\n    }\n\n    return <SidebarMenuSubItem {...props} />;\n};\n\nconst DecoratableSidebarMenuItem = makeDecoratable(\"SidebarMenuItem\", SidebarMenuItemBase);\n\nconst SidebarMenuItem = withStaticProps(DecoratableSidebarMenuItem, {\n    Icon: SidebarMenuItemIcon,\n    Action: SidebarMenuItemAction\n});\n\nexport {\n    SidebarMenuItem,\n    type SidebarMenuItemProps,\n    type SidebarMenuItemButtonProps,\n    type SidebarMenuItemLinkProps,\n    type SidebarMenuItemGroupProps,\n    type SidebarMenuItemIconProps,\n    type SidebarMenuItemActionProps\n};\n"],"names":["SidebarMenuItemBase","props","currentLevel","useSidebarMenu","SidebarMenuRootItem","SidebarMenuSubItem","DecoratableSidebarMenuItem","makeDecoratable","SidebarMenuItem","withStaticProps","SidebarMenuItemIcon","SidebarMenuItemAction"],"mappings":";;;;;;;AAmCA,MAAMA,sBAAsB,CAACC;IACzB,MAAM,EAAEC,YAAY,EAAE,GAAGC;IAEzB,IAAID,AAAiB,MAAjBA,cACA,OAAO,WAAP,GAAO,oBAACE,qBAAwBH;IAGpC,OAAO,WAAP,GAAO,oBAACI,oBAAuBJ;AACnC;AAEA,MAAMK,6BAA6BC,gBAAgB,mBAAmBP;AAEtE,MAAMQ,kBAAkBC,gBAAgBH,4BAA4B;IAChE,MAAMI;IACN,QAAQC;AACZ"}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuItem.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { SidebarMenuItemIcon, type SidebarMenuItemIconProps } from \"./SidebarMenuItemIcon.js\";\nimport { SidebarMenuItemAction, type SidebarMenuItemActionProps } from \"./SidebarMenuItemAction.js\";\nimport { SidebarMenuItemBadge, type SidebarMenuItemBadgeProps } from \"./SidebarMenuItemBadge.js\";\nimport { SidebarMenuSubItem } from \"./SidebarMenuSubItem.js\";\nimport { useSidebarMenu } from \"./SidebarMenuProvider.js\";\nimport { SidebarMenuRootItem } from \"~/Sidebar/components/items/SidebarMenuRootItem.js\";\nimport { LinkProps } from \"~/index.js\";\n\nexport interface SidebarMenuItemBaseProps {\n    text: React.ReactNode;\n    className?: string;\n    collapsible?: boolean;\n    children?: React.ReactNode;\n    onClick?: React.MouseEventHandler;\n    icon?: React.ReactNode;\n    action?: React.ReactNode;\n    variant?: \"group-label\";\n    active?: boolean;\n    disabled?: boolean;\n    pinnable?: boolean;\n    pinnedIcon?: React.ReactNode;\n    badge?: React.ReactNode;\n}\n\ntype SidebarMenuItemButtonProps = SidebarMenuItemBaseProps & {\n    to?: never;\n    route?: never;\n    params?: never;\n};\n\ntype SidebarMenuItemGroupProps = SidebarMenuItemButtonProps;\ntype SidebarMenuItemLinkProps = SidebarMenuItemBaseProps & LinkProps;\n\ntype SidebarMenuItemProps = SidebarMenuItemButtonProps | SidebarMenuItemLinkProps;\n\nconst SidebarMenuItemBase = (props: SidebarMenuItemProps) => {\n    const { currentLevel } = useSidebarMenu();\n\n    if (currentLevel === 0) {\n        return <SidebarMenuRootItem {...props} />;\n    }\n\n    return <SidebarMenuSubItem {...props} />;\n};\n\nconst DecoratableSidebarMenuItem = makeDecoratable(\"SidebarMenuItem\", SidebarMenuItemBase);\n\nconst SidebarMenuItem = withStaticProps(DecoratableSidebarMenuItem, {\n    Icon: SidebarMenuItemIcon,\n    Action: SidebarMenuItemAction,\n    Badge: SidebarMenuItemBadge\n});\n\nexport {\n    SidebarMenuItem,\n    type SidebarMenuItemProps,\n    type SidebarMenuItemButtonProps,\n    type SidebarMenuItemLinkProps,\n    type SidebarMenuItemGroupProps,\n    type SidebarMenuItemIconProps,\n    type SidebarMenuItemActionProps,\n    type SidebarMenuItemBadgeProps\n};\n"],"names":["SidebarMenuItemBase","props","currentLevel","useSidebarMenu","SidebarMenuRootItem","SidebarMenuSubItem","DecoratableSidebarMenuItem","makeDecoratable","SidebarMenuItem","withStaticProps","SidebarMenuItemIcon","SidebarMenuItemAction","SidebarMenuItemBadge"],"mappings":";;;;;;;;AAqCA,MAAMA,sBAAsB,CAACC;IACzB,MAAM,EAAEC,YAAY,EAAE,GAAGC;IAEzB,IAAID,AAAiB,MAAjBA,cACA,OAAO,WAAP,GAAO,oBAACE,qBAAwBH;IAGpC,OAAO,WAAP,GAAO,oBAACI,oBAAuBJ;AACnC;AAEA,MAAMK,6BAA6BC,gBAAgB,mBAAmBP;AAEtE,MAAMQ,kBAAkBC,gBAAgBH,4BAA4B;IAChE,MAAMI;IACN,QAAQC;IACR,OAAOC;AACX"}

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

@@ -0,0 +1,6 @@
+import React from "react";
+interface SidebarMenuItemBadgeProps {
+    text: React.ReactNode;
+}
+declare const SidebarMenuItemBadge: ({ text }: SidebarMenuItemBadgeProps) => React.JSX.Element;
+export { SidebarMenuItemBadge, type SidebarMenuItemBadgeProps };

package/Sidebar/components/items/SidebarMenuItemBadge.js

@@ -0,0 +1,7 @@
+import react from "react";
+const SidebarMenuItemBadge = ({ text })=>/*#__PURE__*/ react.createElement("span", {
+        className: "inline-flex items-center rounded-sm bg-primary/50 px-xs text-[10px] font-semibold text-neutral-light leading-none h-md shrink-0"
+    }, text);
+export { SidebarMenuItemBadge };
+
+//# sourceMappingURL=SidebarMenuItemBadge.js.map

package/Sidebar/components/items/SidebarMenuItemBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar/components/items/SidebarMenuItemBadge.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuItemBadge.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface SidebarMenuItemBadgeProps {\n    text: React.ReactNode;\n}\n\nconst SidebarMenuItemBadge = ({ text }: SidebarMenuItemBadgeProps) => {\n    return (\n        <span\n            className={\n                \"inline-flex items-center rounded-sm bg-primary/50 px-xs text-[10px] font-semibold text-neutral-light leading-none h-md shrink-0\"\n            }\n        >\n            {text}\n        </span>\n    );\n};\n\nexport { SidebarMenuItemBadge, type SidebarMenuItemBadgeProps };\n"],"names":["SidebarMenuItemBadge","text"],"mappings":";AAMA,MAAMA,uBAAuB,CAAC,EAAEC,IAAI,EAA6B,GACtD,WAAP,GACI,oBAAC;QACG,WACI;OAGHA"}

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,22 +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";
-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;
@@ -40,6 +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;
+    Action: typeof SidebarMenuItemAction;
+    Badge: typeof SidebarMenuItemBadge;
 };
-export { SidebarMenuLink, type SidebarMenuItemLinkProps, type SidebarMenuItemIconProps, type SidebarMenuItemActionProps };
+export { SidebarMenuLink, type SidebarMenuItemLinkProps, type SidebarMenuItemIconProps, type SidebarMenuItemActionProps, type SidebarMenuItemBadgeProps };

package/Sidebar/components/items/SidebarMenuLink.js

@@ -3,11 +3,13 @@ import { SidebarMenuItem } from "./SidebarMenuItem.js";
 import { makeDecoratable, withStaticProps } from "../../../utils.js";
 import { SidebarMenuItemIcon } from "./SidebarMenuItemIcon.js";
 import { SidebarMenuItemAction } from "./SidebarMenuItemAction.js";
+import { SidebarMenuItemBadge } from "./SidebarMenuItemBadge.js";
 const SidebarMenuLinkBase = (props)=>/*#__PURE__*/ react.createElement(SidebarMenuItem, props);
 const DecoratableSidebarMenuLink = makeDecoratable("SidebarMenuLink", SidebarMenuLinkBase);
 const SidebarMenuLink = withStaticProps(DecoratableSidebarMenuLink, {
     Icon: SidebarMenuItemIcon,
-    Action: SidebarMenuItemAction
+    Action: SidebarMenuItemAction,
+    Badge: SidebarMenuItemBadge
 });
 export { SidebarMenuLink };
 

package/Sidebar/components/items/SidebarMenuLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar/components/items/SidebarMenuLink.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuLink.tsx"],"sourcesContent":["import React from \"react\";\nimport { SidebarMenuItem, type SidebarMenuItemLinkProps } from \"./SidebarMenuItem.js\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport {\n    SidebarMenuItemIcon,\n    type SidebarMenuItemIconProps\n} from \"~/Sidebar/components/items/SidebarMenuItemIcon.js\";\nimport {\n    SidebarMenuItemAction,\n    type SidebarMenuItemActionProps\n} from \"~/Sidebar/components/items/SidebarMenuItemAction.js\";\n\nconst SidebarMenuLinkBase = (props: SidebarMenuItemLinkProps) => {\n    return <SidebarMenuItem {...props} />;\n};\n\nconst DecoratableSidebarMenuLink = makeDecoratable(\"SidebarMenuLink\", SidebarMenuLinkBase);\n\nconst SidebarMenuLink = withStaticProps(DecoratableSidebarMenuLink, {\n    Icon: SidebarMenuItemIcon,\n    Action: SidebarMenuItemAction\n});\n\nexport {\n    SidebarMenuLink,\n    type SidebarMenuItemLinkProps,\n    type SidebarMenuItemIconProps,\n    type SidebarMenuItemActionProps\n};\n"],"names":["SidebarMenuLinkBase","props","SidebarMenuItem","DecoratableSidebarMenuLink","makeDecoratable","SidebarMenuLink","withStaticProps","SidebarMenuItemIcon","SidebarMenuItemAction"],"mappings":";;;;;AAYA,MAAMA,sBAAsB,CAACC,QAClB,WAAP,GAAO,oBAACC,iBAAoBD;AAGhC,MAAME,6BAA6BC,gBAAgB,mBAAmBJ;AAEtE,MAAMK,kBAAkBC,gBAAgBH,4BAA4B;IAChE,MAAMI;IACN,QAAQC;AACZ"}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuLink.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuLink.tsx"],"sourcesContent":["import React from \"react\";\nimport { SidebarMenuItem, type SidebarMenuItemLinkProps } from \"./SidebarMenuItem.js\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport {\n    SidebarMenuItemIcon,\n    type SidebarMenuItemIconProps\n} from \"~/Sidebar/components/items/SidebarMenuItemIcon.js\";\nimport {\n    SidebarMenuItemAction,\n    type SidebarMenuItemActionProps\n} from \"~/Sidebar/components/items/SidebarMenuItemAction.js\";\nimport {\n    SidebarMenuItemBadge,\n    type SidebarMenuItemBadgeProps\n} from \"~/Sidebar/components/items/SidebarMenuItemBadge.js\";\n\nconst SidebarMenuLinkBase = (props: SidebarMenuItemLinkProps) => {\n    return <SidebarMenuItem {...props} />;\n};\n\nconst DecoratableSidebarMenuLink = makeDecoratable(\"SidebarMenuLink\", SidebarMenuLinkBase);\n\nconst SidebarMenuLink = withStaticProps(DecoratableSidebarMenuLink, {\n    Icon: SidebarMenuItemIcon,\n    Action: SidebarMenuItemAction,\n    Badge: SidebarMenuItemBadge\n});\n\nexport {\n    SidebarMenuLink,\n    type SidebarMenuItemLinkProps,\n    type SidebarMenuItemIconProps,\n    type SidebarMenuItemActionProps,\n    type SidebarMenuItemBadgeProps\n};\n"],"names":["SidebarMenuLinkBase","props","SidebarMenuItem","DecoratableSidebarMenuLink","makeDecoratable","SidebarMenuLink","withStaticProps","SidebarMenuItemIcon","SidebarMenuItemAction","SidebarMenuItemBadge"],"mappings":";;;;;;AAgBA,MAAMA,sBAAsB,CAACC,QAClB,WAAP,GAAO,oBAACC,iBAAoBD;AAGhC,MAAME,6BAA6BC,gBAAgB,mBAAmBJ;AAEtE,MAAMK,kBAAkBC,gBAAgBH,4BAA4B;IAChE,MAAMI;IACN,QAAQC;IACR,OAAOC;AACX"}

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/SidebarMenuRootButton.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import type { SidebarMenuItemProps } from "./SidebarMenuRootItem.js";
 type SidebarMenuButtonBaseProps = Omit<SidebarMenuItemProps, "children">;
-declare const SidebarMenuRootButton: ({ className, onClick, variant, active, disabled, icon, pinnedIcon, action, text, to, ...linkProps }: SidebarMenuButtonBaseProps) => React.JSX.Element;
+declare const SidebarMenuRootButton: ({ className, onClick, variant, active, disabled, icon, pinnedIcon, action, text, badge, to, ...linkProps }: SidebarMenuButtonBaseProps) => React.JSX.Element;
 export { SidebarMenuRootButton };

package/Sidebar/components/items/SidebarMenuRootButton.js

@@ -1,6 +1,7 @@
 import react from "react";
 import { cn, cva } from "../../../utils.js";
 import { DivButton } from "./DivButton.js";
+import { SidebarMenuItemBadge } from "./SidebarMenuItemBadge.js";
 import { useAdminUi } from "../../../index.js";
 const variants = cva([
     "flex w-full items-center gap-sm rounded-md",
@@ -22,7 +23,7 @@ const variants = cva([
         }
     }
 });
-const SidebarMenuRootButton = ({ className, onClick, variant, active, disabled, icon, pinnedIcon, action, text, to, ...linkProps })=>{
+const SidebarMenuRootButton = ({ className, onClick, variant, active, disabled, icon, pinnedIcon, action, text, badge, to, ...linkProps })=>{
     const sharedProps = {
         "data-sidebar": "menu-button",
         "data-active": active,
@@ -37,11 +38,15 @@ const SidebarMenuRootButton = ({ className, onClick, variant, active, disabled,
         ...sharedProps,
         to: to,
         ...linkProps
-    }, icon, text) : /*#__PURE__*/ react.createElement(DivButton, {
+    }, icon, text, badge && ("string" == typeof badge ? /*#__PURE__*/ react.createElement(SidebarMenuItemBadge, {
+        text: badge
+    }) : badge)) : /*#__PURE__*/ react.createElement(DivButton, {
         ...sharedProps,
         disabled: disabled,
         tabIndex: "group-label" === variant ? -1 : void 0
-    }, icon, text);
+    }, icon, text, badge && ("string" == typeof badge ? /*#__PURE__*/ react.createElement(SidebarMenuItemBadge, {
+        text: badge
+    }) : badge));
     return /*#__PURE__*/ react.createElement("div", {
         className: cn("flex items-center w-full relative group/menu-root-button", className)
     }, content, action && /*#__PURE__*/ react.createElement("div", {

package/Sidebar/components/items/SidebarMenuRootButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar/components/items/SidebarMenuRootButton.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuRootButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva } from \"~/utils.js\";\nimport type { SidebarMenuItemProps } from \"./SidebarMenuRootItem.js\";\nimport { DivButton } from \"./DivButton.js\";\nimport { useAdminUi } from \"~/index.js\";\n\nconst variants = cva(\n    [\n        \"flex w-full items-center gap-sm rounded-md\",\n        \"no-underline! text-neutral-primary cursor-pointer px-sm py-xs-plus text-left\",\n        \"text-md outline-none transition-[width,height,padding]\",\n        \"whitespace-nowrap overflow-hidden\",\n        \"hover:bg-neutral-dark/5\",\n        \"group-hover/menu-root-button:bg-neutral-dark/5\",\n        \"focus:bg-neutral-dark/5 focus:ring-none focus:ring-transparent\",\n        \"data-[active=true]:bg-neutral-dark/5 data-[active=true]:font-semibold data-[active=true]:pointer-events-none\",\n        \"group-data-[state=open]/menu-item-collapsible:font-semibold!\"\n    ],\n    {\n        variants: {\n            variant: {\n                \"group-label\":\n                    \"text-neutral-muted! uppercase hover:bg-transparent! group-hover/menu-root-button:bg-transparent! focus:bg-transparent! cursor-default!\"\n            },\n            disabled: {\n                true: \"pointer-events-none text-neutral-disabled!\"\n            }\n        }\n    }\n);\n\ntype SidebarMenuButtonBaseProps = Omit<SidebarMenuItemProps, \"children\">;\n\nconst SidebarMenuRootButton = ({\n    className,\n    onClick,\n    variant,\n    active,\n    disabled,\n    icon,\n\n    // oxlint-disable-next-line\n    pinnedIcon,\n\n    action,\n    text,\n    to,\n    ...linkProps\n}: SidebarMenuButtonBaseProps) => {\n    const sharedProps = {\n        \"data-sidebar\": \"menu-button\",\n        \"data-active\": active,\n        className: variants({ variant, disabled }),\n        onClick\n    };\n\n    const { linkComponent: LinkComponent } = useAdminUi();\n\n    const content = to ? (\n        <LinkComponent {...sharedProps} to={to} {...linkProps}>\n            {icon}\n            {text}\n        </LinkComponent>\n    ) : (\n        <DivButton\n            {...sharedProps}\n            disabled={disabled}\n            tabIndex={variant === \"group-label\" ? -1 : undefined}\n        >\n            {icon}\n            {text}\n        </DivButton>\n    );\n\n    return (\n        <div className={cn(\"flex items-center w-full relative group/menu-root-button\", className)}>\n            {content}\n            {action && (\n                <div className=\"absolute top-0 right-0 mr-sm h-full flex items-center\">\n                    {action}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport { SidebarMenuRootButton };\n"],"names":["variants","cva","SidebarMenuRootButton","className","onClick","variant","active","disabled","icon","pinnedIcon","action","text","to","linkProps","sharedProps","LinkComponent","useAdminUi","content","DivButton","undefined","cn"],"mappings":";;;;AAMA,MAAMA,WAAWC,IACb;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,eACI;QACR;QACA,UAAU;YACN,MAAM;QACV;IACJ;AACJ;AAKJ,MAAMC,wBAAwB,CAAC,EAC3BC,SAAS,EACTC,OAAO,EACPC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,IAAI,EAGJC,UAAU,EAEVC,MAAM,EACNC,IAAI,EACJC,EAAE,EACF,GAAGC,WACsB;IACzB,MAAMC,cAAc;QAChB,gBAAgB;QAChB,eAAeR;QACf,WAAWN,SAAS;YAAEK;YAASE;QAAS;QACxCH;IACJ;IAEA,MAAM,EAAE,eAAeW,aAAa,EAAE,GAAGC;IAEzC,MAAMC,UAAUL,KAAK,WAALA,GACZ,oBAACG,eAAAA;QAAe,GAAGD,WAAW;QAAE,IAAIF;QAAK,GAAGC,SAAS;OAChDL,MACAG,QAAAA,WAAAA,GAGL,oBAACO,WAASA;QACL,GAAGJ,WAAW;QACf,UAAUP;QACV,UAAUF,AAAY,kBAAZA,UAA4B,KAAKc;OAE1CX,MACAG;IAIT,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWS,GAAG,4DAA4DjB;OAC1Ec,SACAP,UAAU,WAAVA,GACG,oBAAC;QAAI,WAAU;OACVA;AAKrB"}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuRootButton.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuRootButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva } from \"~/utils.js\";\nimport type { SidebarMenuItemProps } from \"./SidebarMenuRootItem.js\";\nimport { DivButton } from \"./DivButton.js\";\nimport { SidebarMenuItemBadge } from \"./SidebarMenuItemBadge.js\";\nimport { useAdminUi } from \"~/index.js\";\n\nconst variants = cva(\n    [\n        \"flex w-full items-center gap-sm rounded-md\",\n        \"no-underline! text-neutral-primary cursor-pointer px-sm py-xs-plus text-left\",\n        \"text-md outline-none transition-[width,height,padding]\",\n        \"whitespace-nowrap overflow-hidden\",\n        \"hover:bg-neutral-dark/5\",\n        \"group-hover/menu-root-button:bg-neutral-dark/5\",\n        \"focus:bg-neutral-dark/5 focus:ring-none focus:ring-transparent\",\n        \"data-[active=true]:bg-neutral-dark/5 data-[active=true]:font-semibold data-[active=true]:pointer-events-none\",\n        \"group-data-[state=open]/menu-item-collapsible:font-semibold!\"\n    ],\n    {\n        variants: {\n            variant: {\n                \"group-label\":\n                    \"text-neutral-muted! uppercase hover:bg-transparent! group-hover/menu-root-button:bg-transparent! focus:bg-transparent! cursor-default!\"\n            },\n            disabled: {\n                true: \"pointer-events-none text-neutral-disabled!\"\n            }\n        }\n    }\n);\n\ntype SidebarMenuButtonBaseProps = Omit<SidebarMenuItemProps, \"children\">;\n\nconst SidebarMenuRootButton = ({\n    className,\n    onClick,\n    variant,\n    active,\n    disabled,\n    icon,\n\n    // oxlint-disable-next-line\n    pinnedIcon,\n\n    action,\n    text,\n    badge,\n    to,\n    ...linkProps\n}: SidebarMenuButtonBaseProps) => {\n    const sharedProps = {\n        \"data-sidebar\": \"menu-button\",\n        \"data-active\": active,\n        className: variants({ variant, disabled }),\n        onClick\n    };\n\n    const { linkComponent: LinkComponent } = useAdminUi();\n\n    const content = to ? (\n        <LinkComponent {...sharedProps} to={to} {...linkProps}>\n            {icon}\n            {text}\n            {badge && (typeof badge === \"string\" ? <SidebarMenuItemBadge text={badge} /> : badge)}\n        </LinkComponent>\n    ) : (\n        <DivButton\n            {...sharedProps}\n            disabled={disabled}\n            tabIndex={variant === \"group-label\" ? -1 : undefined}\n        >\n            {icon}\n            {text}\n            {badge && (typeof badge === \"string\" ? <SidebarMenuItemBadge text={badge} /> : badge)}\n        </DivButton>\n    );\n\n    return (\n        <div className={cn(\"flex items-center w-full relative group/menu-root-button\", className)}>\n            {content}\n            {action && (\n                <div className=\"absolute top-0 right-0 mr-sm h-full flex items-center\">\n                    {action}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport { SidebarMenuRootButton };\n"],"names":["variants","cva","SidebarMenuRootButton","className","onClick","variant","active","disabled","icon","pinnedIcon","action","text","badge","to","linkProps","sharedProps","LinkComponent","useAdminUi","content","SidebarMenuItemBadge","DivButton","undefined","cn"],"mappings":";;;;;AAOA,MAAMA,WAAWC,IACb;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,eACI;QACR;QACA,UAAU;YACN,MAAM;QACV;IACJ;AACJ;AAKJ,MAAMC,wBAAwB,CAAC,EAC3BC,SAAS,EACTC,OAAO,EACPC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,IAAI,EAGJC,UAAU,EAEVC,MAAM,EACNC,IAAI,EACJC,KAAK,EACLC,EAAE,EACF,GAAGC,WACsB;IACzB,MAAMC,cAAc;QAChB,gBAAgB;QAChB,eAAeT;QACf,WAAWN,SAAS;YAAEK;YAASE;QAAS;QACxCH;IACJ;IAEA,MAAM,EAAE,eAAeY,aAAa,EAAE,GAAGC;IAEzC,MAAMC,UAAUL,KAAK,WAALA,GACZ,oBAACG,eAAAA;QAAe,GAAGD,WAAW;QAAE,IAAIF;QAAK,GAAGC,SAAS;OAChDN,MACAG,MACAC,SAAU,CAAiB,YAAjB,OAAOA,QAAqB,WAAX,GAAW,oBAACO,sBAAoBA;QAAC,MAAMP;SAAYA,KAAI,mBAGvF,oBAACQ,WAASA;QACL,GAAGL,WAAW;QACf,UAAUR;QACV,UAAUF,AAAY,kBAAZA,UAA4B,KAAKgB;OAE1Cb,MACAG,MACAC,SAAU,CAAiB,YAAjB,OAAOA,QAAqB,WAAX,GAAW,oBAACO,sBAAoBA;QAAC,MAAMP;SAAYA,KAAI;IAI3F,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWU,GAAG,4DAA4DnB;OAC1Ee,SACAR,UAAU,WAAVA,GACG,oBAAC;QAAI,WAAU;OACVA;AAKrB"}

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/Sidebar/components/items/SidebarMenuSubButton.d.ts

@@ -2,5 +2,5 @@ import React from "react";
 import type { SidebarMenuItemProps } from "./SidebarMenuRootItem.js";
 import { DistributedOmit } from "type-fest";
 type SidebarMenuSubButtonProps = DistributedOmit<SidebarMenuItemProps, "children">;
-declare const SidebarMenuSubButton: ({ onClick, variant, active, disabled, icon, pinnedIcon, action, text, className, to, ...linkProps }: SidebarMenuSubButtonProps) => React.JSX.Element;
+declare const SidebarMenuSubButton: ({ onClick, variant, active, disabled, icon, pinnedIcon, action, text, badge, className, to, ...linkProps }: SidebarMenuSubButtonProps) => React.JSX.Element;
 export { SidebarMenuSubButton };

package/Sidebar/components/items/SidebarMenuSubButton.js

@@ -1,6 +1,7 @@
 import react from "react";
-import { cva } from "../../../utils.js";
+import { cn, cva } from "../../../utils.js";
 import { DivButton } from "./DivButton.js";
+import { SidebarMenuItemBadge } from "./SidebarMenuItemBadge.js";
 import { useAdminUi } from "../../../index.js";
 const variants = cva([
     "flex w-full cursor-pointer items-center gap-sm",
@@ -26,7 +27,7 @@ const variants = cva([
         }
     }
 });
-const SidebarMenuSubButton = ({ onClick, variant, active, disabled, icon, pinnedIcon, action, text, className, to, ...linkProps })=>{
+const SidebarMenuSubButton = ({ onClick, variant, active, disabled, icon, pinnedIcon, action, text, badge, className, to, ...linkProps })=>{
     const { linkComponent: LinkComponent } = useAdminUi();
     const sharedProps = {
         "data-sidebar": "menu-sub-button",
@@ -34,21 +35,28 @@ const SidebarMenuSubButton = ({ onClick, variant, active, disabled, icon, pinned
         className: variants({
             variant,
             disabled,
-            className
+            className: cn(className, action && "pr-xl")
         }),
         onClick
     };
+    const textContent = /*#__PURE__*/ react.createElement("span", {
+        className: "truncate"
+    }, text);
     const content = to ? /*#__PURE__*/ react.createElement(LinkComponent, {
         ...sharedProps,
         to: to,
         ...linkProps
-    }, icon, text) : /*#__PURE__*/ react.createElement(DivButton, {
+    }, icon, textContent, badge && ("string" == typeof badge ? /*#__PURE__*/ react.createElement(SidebarMenuItemBadge, {
+        text: badge
+    }) : badge)) : /*#__PURE__*/ react.createElement(DivButton, {
         ...sharedProps,
         disabled: disabled,
         tabIndex: "group-label" === variant ? -1 : void 0
-    }, icon, text);
+    }, icon, textContent, badge && ("string" == typeof badge ? /*#__PURE__*/ react.createElement(SidebarMenuItemBadge, {
+        text: badge
+    }) : badge));
     return /*#__PURE__*/ react.createElement("div", {
-        className: "flex items-center w-full relative group/menu-sub-button"
+        className: "flex items-center w-full min-w-0 relative group/menu-sub-button"
     }, content, action && /*#__PURE__*/ react.createElement("div", {
         className: "absolute top-0 right-0 mr-sm h-full flex items-center"
     }, action));

package/Sidebar/components/items/SidebarMenuSubButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar/components/items/SidebarMenuSubButton.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuSubButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cva } from \"~/utils.js\";\nimport type { SidebarMenuItemProps } from \"./SidebarMenuRootItem.js\";\nimport { DivButton } from \"./DivButton.js\";\nimport { DistributedOmit } from \"type-fest\";\nimport { useAdminUi } from \"~/index.js\";\n\nconst variants = cva(\n    [\n        \"flex w-full cursor-pointer items-center gap-sm\",\n        \"text-md text-neutral-primary no-underline!\",\n        \"rounded-md p-xs-plus pr-sm outline-none\",\n        \"whitespace-nowrap overflow-hidden\",\n        \"hover:bg-neutral-dark/5\",\n        \"group-hover/menu-sub-button:bg-neutral-dark/5\",\n        \"focus:bg-neutral-dark/5 focus:ring-none focus:ring-transparent\",\n        \"data-[active=true]:bg-neutral-dark/5 data-[active=true]:font-semibold data-[active=true]:pointer-events-none\",\n        \"group-data-[state=collapsed]:hidden\"\n    ],\n    {\n        variants: {\n            variant: {\n                \"group-label\": [\n                    \"uppercase font-semibold text-neutral-muted! text-sm\",\n                    \"pt-md pb-xs-plus pointer-events-none\",\n                    \"hover:bg-transparent! group-hover/menu-sub-button:bg-transparent! focus:bg-transparent! cursor-default!\"\n                ]\n            },\n            disabled: {\n                true: \"pointer-events-none text-neutral-disabled!\"\n            }\n        }\n    }\n);\n\ntype SidebarMenuSubButtonProps = DistributedOmit<SidebarMenuItemProps, \"children\">;\n\nconst SidebarMenuSubButton = ({\n    onClick,\n    variant,\n    active,\n    disabled,\n    icon,\n\n    // oxlint-disable-next-line\n    pinnedIcon,\n\n    action,\n    text,\n    className,\n    to,\n    ...linkProps\n}: SidebarMenuSubButtonProps) => {\n    const { linkComponent: LinkComponent } = useAdminUi();\n\n    const sharedProps = {\n        \"data-sidebar\": \"menu-sub-button\",\n        \"data-active\": active,\n        className: variants({ variant, disabled, className }),\n        onClick\n    };\n\n    const content = to ? (\n        <LinkComponent {...sharedProps} to={to} {...linkProps}>\n            {icon}\n            {text}\n        </LinkComponent>\n    ) : (\n        // We can't use the default button element here because the content of the button\n        // can also contain a button, which is not allowed in HTML.\n        <DivButton\n            {...sharedProps}\n            disabled={disabled}\n            tabIndex={variant === \"group-label\" ? -1 : undefined}\n        >\n            {icon}\n            {text}\n        </DivButton>\n    );\n\n    return (\n        <div className={\"flex items-center w-full relative group/menu-sub-button\"}>\n            {content}\n\n            {action && (\n                <div className=\"absolute top-0 right-0 mr-sm h-full flex items-center\">\n                    {action}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport { SidebarMenuSubButton };\n"],"names":["variants","cva","SidebarMenuSubButton","onClick","variant","active","disabled","icon","pinnedIcon","action","text","className","to","linkProps","LinkComponent","useAdminUi","sharedProps","content","DivButton","undefined"],"mappings":";;;;AAOA,MAAMA,WAAWC,IACb;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,eAAe;gBACX;gBACA;gBACA;aACH;QACL;QACA,UAAU;YACN,MAAM;QACV;IACJ;AACJ;AAKJ,MAAMC,uBAAuB,CAAC,EAC1BC,OAAO,EACPC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,IAAI,EAGJC,UAAU,EAEVC,MAAM,EACNC,IAAI,EACJC,SAAS,EACTC,EAAE,EACF,GAAGC,WACqB;IACxB,MAAM,EAAE,eAAeC,aAAa,EAAE,GAAGC;IAEzC,MAAMC,cAAc;QAChB,gBAAgB;QAChB,eAAeX;QACf,WAAWL,SAAS;YAAEI;YAASE;YAAUK;QAAU;QACnDR;IACJ;IAEA,MAAMc,UAAUL,KAAK,WAALA,GACZ,oBAACE,eAAAA;QAAe,GAAGE,WAAW;QAAE,IAAIJ;QAAK,GAAGC,SAAS;OAChDN,MACAG,Q,cAKL,oBAACQ,WAASA;QACL,GAAGF,WAAW;QACf,UAAUV;QACV,UAAUF,AAAY,kBAAZA,UAA4B,KAAKe;OAE1CZ,MACAG;IAIT,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXO,SAEAR,UAAU,WAAVA,GACG,oBAAC;QAAI,WAAU;OACVA;AAKrB"}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuSubButton.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuSubButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva } from \"~/utils.js\";\nimport type { SidebarMenuItemProps } from \"./SidebarMenuRootItem.js\";\nimport { DivButton } from \"./DivButton.js\";\nimport { SidebarMenuItemBadge } from \"./SidebarMenuItemBadge.js\";\nimport { DistributedOmit } from \"type-fest\";\nimport { useAdminUi } from \"~/index.js\";\n\nconst variants = cva(\n    [\n        \"flex w-full cursor-pointer items-center gap-sm\",\n        \"text-md text-neutral-primary no-underline!\",\n        \"rounded-md p-xs-plus pr-sm outline-none\",\n        \"whitespace-nowrap overflow-hidden\",\n        \"hover:bg-neutral-dark/5\",\n        \"group-hover/menu-sub-button:bg-neutral-dark/5\",\n        \"focus:bg-neutral-dark/5 focus:ring-none focus:ring-transparent\",\n        \"data-[active=true]:bg-neutral-dark/5 data-[active=true]:font-semibold data-[active=true]:pointer-events-none\",\n        \"group-data-[state=collapsed]:hidden\"\n    ],\n    {\n        variants: {\n            variant: {\n                \"group-label\": [\n                    \"uppercase font-semibold text-neutral-muted! text-sm\",\n                    \"pt-md pb-xs-plus pointer-events-none\",\n                    \"hover:bg-transparent! group-hover/menu-sub-button:bg-transparent! focus:bg-transparent! cursor-default!\"\n                ]\n            },\n            disabled: {\n                true: \"pointer-events-none text-neutral-disabled!\"\n            }\n        }\n    }\n);\n\ntype SidebarMenuSubButtonProps = DistributedOmit<SidebarMenuItemProps, \"children\">;\n\nconst SidebarMenuSubButton = ({\n    onClick,\n    variant,\n    active,\n    disabled,\n    icon,\n\n    // oxlint-disable-next-line\n    pinnedIcon,\n\n    action,\n    text,\n    badge,\n    className,\n    to,\n    ...linkProps\n}: SidebarMenuSubButtonProps) => {\n    const { linkComponent: LinkComponent } = useAdminUi();\n\n    const sharedProps = {\n        \"data-sidebar\": \"menu-sub-button\",\n        \"data-active\": active,\n        className: variants({ variant, disabled, className: cn(className, action && \"pr-xl\") }),\n        onClick\n    };\n\n    const textContent = <span className=\"truncate\">{text}</span>;\n\n    const content = to ? (\n        <LinkComponent {...sharedProps} to={to} {...linkProps}>\n            {icon}\n            {textContent}\n            {badge && (typeof badge === \"string\" ? <SidebarMenuItemBadge text={badge} /> : badge)}\n        </LinkComponent>\n    ) : (\n        // We can't use the default button element here because the content of the button\n        // can also contain a button, which is not allowed in HTML.\n        <DivButton\n            {...sharedProps}\n            disabled={disabled}\n            tabIndex={variant === \"group-label\" ? -1 : undefined}\n        >\n            {icon}\n            {textContent}\n            {badge && (typeof badge === \"string\" ? <SidebarMenuItemBadge text={badge} /> : badge)}\n        </DivButton>\n    );\n\n    return (\n        <div className={\"flex items-center w-full min-w-0 relative group/menu-sub-button\"}>\n            {content}\n\n            {action && (\n                <div className=\"absolute top-0 right-0 mr-sm h-full flex items-center\">\n                    {action}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport { SidebarMenuSubButton };\n"],"names":["variants","cva","SidebarMenuSubButton","onClick","variant","active","disabled","icon","pinnedIcon","action","text","badge","className","to","linkProps","LinkComponent","useAdminUi","sharedProps","cn","textContent","content","SidebarMenuItemBadge","DivButton","undefined"],"mappings":";;;;;AAQA,MAAMA,WAAWC,IACb;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,eAAe;gBACX;gBACA;gBACA;aACH;QACL;QACA,UAAU;YACN,MAAM;QACV;IACJ;AACJ;AAKJ,MAAMC,uBAAuB,CAAC,EAC1BC,OAAO,EACPC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,IAAI,EAGJC,UAAU,EAEVC,MAAM,EACNC,IAAI,EACJC,KAAK,EACLC,SAAS,EACTC,EAAE,EACF,GAAGC,WACqB;IACxB,MAAM,EAAE,eAAeC,aAAa,EAAE,GAAGC;IAEzC,MAAMC,cAAc;QAChB,gBAAgB;QAChB,eAAeZ;QACf,WAAWL,SAAS;YAAEI;YAASE;YAAU,WAAWY,GAAGN,WAAWH,UAAU;QAAS;QACrFN;IACJ;IAEA,MAAMgB,cAAc,WAAdA,GAAc,oBAAC;QAAK,WAAU;OAAYT;IAEhD,MAAMU,UAAUP,KAAK,WAALA,GACZ,oBAACE,eAAAA;QAAe,GAAGE,WAAW;QAAE,IAAIJ;QAAK,GAAGC,SAAS;OAChDP,MACAY,aACAR,SAAU,CAAiB,YAAjB,OAAOA,QAAqB,WAAX,GAAW,oBAACU,sBAAoBA;QAAC,MAAMV;SAAYA,KAAI,K,cAKvF,oBAACW,WAASA;QACL,GAAGL,WAAW;QACf,UAAUX;QACV,UAAUF,AAAY,kBAAZA,UAA4B,KAAKmB;OAE1ChB,MACAY,aACAR,SAAU,CAAiB,YAAjB,OAAOA,QAAqB,WAAX,GAAW,oBAACU,sBAAoBA;QAAC,MAAMV;SAAYA,KAAI;IAI3F,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXS,SAEAX,UAAU,WAAVA,GACG,oBAAC;QAAI,WAAU;OACVA;AAKrB"}

package/Sidebar/components/items/SidebarMenuSubItem.js

@@ -117,7 +117,7 @@ const SidebarMenuSubItem = ({ children, className, pinnable, action, collapsible
             className: "flex items-center gap-xs"
         }, pinAction, chevron) : chevron;
         if (!collapsible) return /*#__PURE__*/ react.createElement("div", {
-            className: "flex items-center"
+            className: "flex items-center min-w-0"
         }, /*#__PURE__*/ react.createElement(SidebarMenuSubItemIndentation, {
             lvl: currentLevel,
             variant: buttonProps.variant
@@ -127,7 +127,7 @@ const SidebarMenuSubItem = ({ children, className, pinnable, action, collapsible
             open: isSectionExpanded,
             onOpenChange: toggleSectionExpanded
         }, /*#__PURE__*/ react.createElement("div", {
-            className: "flex items-center"
+            className: "flex items-center min-w-0"
         }, /*#__PURE__*/ react.createElement(SidebarMenuSubItemIndentation, {
             lvl: currentLevel,
             variant: buttonProps.variant
@@ -153,7 +153,7 @@ const SidebarMenuSubItem = ({ children, className, pinnable, action, collapsible
     ]);
     return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("li", {
         "data-sidebar": "menu-sub-item",
-        className: cn("group/menu-sub-item relative flex", className)
+        className: cn("group/menu-sub-item relative flex min-w-0", className)
     }, sidebarMenuSubButton), children && !collapsible ? children : null);
 };
 export { SidebarMenuSubItem };

package/Sidebar/components/items/SidebarMenuSubItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar/components/items/SidebarMenuSubItem.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuSubItem.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { Collapsible } from \"radix-ui\";\nimport { SidebarMenuSubButton } from \"./SidebarMenuSubButton.js\";\nimport { SidebarMenuSubItemIndentation } from \"./SidebarMenuSubItemIndentation.js\";\nimport { SidebarMenuSub } from \"./SidebarMenuSub.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { ReactComponent as KeyboardArrowRightIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as PinIcon } from \"@webiny/icons/push_pin.svg\";\nimport { ReactComponent as UnPinIcon } from \"@webiny/icons/push_pin_off.svg\";\nimport { useSidebarMenu } from \"./SidebarMenuProvider.js\";\nimport { type SidebarMenuItemProps } from \"./SidebarMenuItem.js\";\nimport { useSidebar } from \"~/Sidebar/index.js\";\nimport { SidebarMenuItemAction } from \"./SidebarMenuItemAction.js\";\n\nconst SidebarMenuSubItem = ({\n    children,\n    className,\n    pinnable,\n    action,\n    collapsible = true,\n    ...buttonProps\n}: SidebarMenuItemProps) => {\n    const { currentLevel, parentIcon } = useSidebarMenu();\n    const sidebar = useSidebar();\n    const [showChevron, setShowChevron] = useState(false);\n\n    const menuItemId = useMemo(() => {\n        return btoa(`sidebar-item-${currentLevel}-${buttonProps.text}`);\n    }, [buttonProps.text, currentLevel]);\n\n    const isSectionExpanded = useMemo(() => {\n        return sidebar.isSectionExpanded(menuItemId);\n    }, [sidebar.expandedSections]);\n\n    const toggleSectionExpanded = useCallback(() => {\n        sidebar.toggleSectionExpanded(menuItemId);\n    }, [isSectionExpanded]);\n\n    const isPinned = sidebar.isItemPinned(menuItemId);\n\n    // Icon to use when this item is pinned\n    const pinnedItemIcon = useMemo(() => {\n        if (buttonProps.pinnedIcon) {\n            return buttonProps.pinnedIcon;\n        }\n\n        return buttonProps.icon || parentIcon;\n    }, [buttonProps.pinnedIcon, buttonProps.icon, parentIcon]);\n\n    // Register when pinned, unregister when unpinned\n    // Re-register when active state changes to keep pinned items in sync\n    React.useEffect(() => {\n        if (pinnable && isPinned) {\n            sidebar.registerPinnedItem({\n                id: menuItemId,\n                text: buttonProps.text,\n                icon: pinnedItemIcon,\n                to: buttonProps.to,\n                onClick: buttonProps.onClick,\n                active: buttonProps.active\n            });\n        } else if (pinnable && !isPinned) {\n            // Only unregister if this item is explicitly unpinned\n            sidebar.unregisterPinnedItem(menuItemId);\n        }\n    }, [pinnable, isPinned, pinnedItemIcon, menuItemId, buttonProps.active]);\n\n    const pinAction = useMemo(() => {\n        if (!pinnable) {\n            return action;\n        }\n\n        const handlePinClick = (e: React.MouseEvent) => {\n            e.stopPropagation();\n            e.preventDefault();\n\n            if (isPinned) {\n                sidebar.unregisterPinnedItem(menuItemId);\n            } else {\n                sidebar.registerPinnedItem({\n                    id: menuItemId,\n                    text: buttonProps.text,\n                    icon: pinnedItemIcon,\n                    to: buttonProps.to,\n                    onClick: buttonProps.onClick,\n                    active: buttonProps.active\n                });\n            }\n\n            sidebar.toggleItemPinned(menuItemId);\n        };\n\n        const pinButton = (\n            <SidebarMenuItemAction\n                element={isPinned ? <UnPinIcon /> : <PinIcon />}\n                onClick={handlePinClick}\n                showOnHover={true}\n            />\n        );\n\n        // If there's a custom action, combine them\n        // Don't modify the custom action - it should keep its original behavior\n        if (action) {\n            return (\n                <div className=\"flex items-center gap-xs\">\n                    {pinButton}\n                    {action}\n                </div>\n            );\n        }\n\n        return pinButton;\n    }, [pinnable, isPinned, pinnedItemIcon, action, sidebar, menuItemId]);\n\n    useEffect(() => {\n        if (sidebar.expanded) {\n            const timer = setTimeout(() => {\n                setShowChevron(true);\n            }, 100);\n            return () => clearTimeout(timer);\n        }\n        setShowChevron(false);\n        return undefined;\n    }, [sidebar.expanded]);\n\n    const sidebarMenuSubButton = useMemo(() => {\n        if (!children) {\n            return (\n                <>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <SidebarMenuSubButton {...buttonProps} action={pinAction} />\n                </>\n            );\n        }\n\n        const chevron = showChevron ? (\n            <Icon\n                label={\"Expand / Collapse\"}\n                size={\"sm\"}\n                className={\n                    \"ml-auto transition-transform duration-100 group-data-[state=open]/menu-sub-item-collapsible:rotate-180 group-data-[state=collapsed]:hidden\"\n                }\n                color={\"neutral-strong\"}\n                data-sidebar={\"menu-item-expanded-indicator\"}\n                icon={<KeyboardArrowRightIcon />}\n            />\n        ) : null;\n\n        const collapsibleAction = pinnable ? (\n            <div className=\"flex items-center gap-xs\">\n                {pinAction}\n                {chevron}\n            </div>\n        ) : (\n            chevron\n        );\n\n        if (!collapsible) {\n            return (\n                <div className={\"flex items-center\"}>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <SidebarMenuSubButton {...buttonProps} />\n                </div>\n            );\n        }\n\n        return (\n            <Collapsible.Root\n                className=\"w-full group/menu-sub-item-collapsible\"\n                open={isSectionExpanded}\n                onOpenChange={toggleSectionExpanded}\n            >\n                <div className={\"flex items-center\"}>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <Collapsible.Trigger asChild>\n                        <SidebarMenuSubButton\n                            {...buttonProps}\n                            action={collapsibleAction}\n                            className={\n                                \"group-data-[state=open]/menu-sub-item-collapsible:font-semibold!\"\n                            }\n                        />\n                    </Collapsible.Trigger>\n                </div>\n                <Collapsible.Content>\n                    <SidebarMenuSub parentIcon={buttonProps.icon}>{children}</SidebarMenuSub>\n                </Collapsible.Content>\n            </Collapsible.Root>\n        );\n    }, [\n        children,\n        buttonProps,\n        currentLevel,\n        menuItemId,\n        isSectionExpanded,\n        toggleSectionExpanded,\n        showChevron,\n        pinnable,\n        pinAction\n    ]);\n\n    return (\n        <>\n            <li\n                data-sidebar=\"menu-sub-item\"\n                className={cn(\"group/menu-sub-item relative flex\", className)}\n            >\n                {sidebarMenuSubButton}\n            </li>\n            {children && !collapsible ? children : null}\n        </>\n    );\n};\n\nexport { SidebarMenuSubItem };\n"],"names":["SidebarMenuSubItem","children","className","pinnable","action","collapsible","buttonProps","currentLevel","parentIcon","useSidebarMenu","sidebar","useSidebar","showChevron","setShowChevron","useState","menuItemId","useMemo","btoa","isSectionExpanded","toggleSectionExpanded","useCallback","isPinned","pinnedItemIcon","React","pinAction","handlePinClick","e","pinButton","SidebarMenuItemAction","UnPinIcon","PinIcon","useEffect","timer","setTimeout","clearTimeout","sidebarMenuSubButton","SidebarMenuSubItemIndentation","SidebarMenuSubButton","chevron","Icon","KeyboardArrowRightIcon","collapsibleAction","Collapsible","SidebarMenuSub","cn"],"mappings":"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"}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuSubItem.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuSubItem.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { Collapsible } from \"radix-ui\";\nimport { SidebarMenuSubButton } from \"./SidebarMenuSubButton.js\";\nimport { SidebarMenuSubItemIndentation } from \"./SidebarMenuSubItemIndentation.js\";\nimport { SidebarMenuSub } from \"./SidebarMenuSub.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { ReactComponent as KeyboardArrowRightIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as PinIcon } from \"@webiny/icons/push_pin.svg\";\nimport { ReactComponent as UnPinIcon } from \"@webiny/icons/push_pin_off.svg\";\nimport { useSidebarMenu } from \"./SidebarMenuProvider.js\";\nimport { type SidebarMenuItemProps } from \"./SidebarMenuItem.js\";\nimport { useSidebar } from \"~/Sidebar/index.js\";\nimport { SidebarMenuItemAction } from \"./SidebarMenuItemAction.js\";\n\nconst SidebarMenuSubItem = ({\n    children,\n    className,\n    pinnable,\n    action,\n    collapsible = true,\n    ...buttonProps\n}: SidebarMenuItemProps) => {\n    const { currentLevel, parentIcon } = useSidebarMenu();\n    const sidebar = useSidebar();\n    const [showChevron, setShowChevron] = useState(false);\n\n    const menuItemId = useMemo(() => {\n        return btoa(`sidebar-item-${currentLevel}-${buttonProps.text}`);\n    }, [buttonProps.text, currentLevel]);\n\n    const isSectionExpanded = useMemo(() => {\n        return sidebar.isSectionExpanded(menuItemId);\n    }, [sidebar.expandedSections]);\n\n    const toggleSectionExpanded = useCallback(() => {\n        sidebar.toggleSectionExpanded(menuItemId);\n    }, [isSectionExpanded]);\n\n    const isPinned = sidebar.isItemPinned(menuItemId);\n\n    // Icon to use when this item is pinned\n    const pinnedItemIcon = useMemo(() => {\n        if (buttonProps.pinnedIcon) {\n            return buttonProps.pinnedIcon;\n        }\n\n        return buttonProps.icon || parentIcon;\n    }, [buttonProps.pinnedIcon, buttonProps.icon, parentIcon]);\n\n    // Register when pinned, unregister when unpinned\n    // Re-register when active state changes to keep pinned items in sync\n    React.useEffect(() => {\n        if (pinnable && isPinned) {\n            sidebar.registerPinnedItem({\n                id: menuItemId,\n                text: buttonProps.text,\n                icon: pinnedItemIcon,\n                to: buttonProps.to,\n                onClick: buttonProps.onClick,\n                active: buttonProps.active\n            });\n        } else if (pinnable && !isPinned) {\n            // Only unregister if this item is explicitly unpinned\n            sidebar.unregisterPinnedItem(menuItemId);\n        }\n    }, [pinnable, isPinned, pinnedItemIcon, menuItemId, buttonProps.active]);\n\n    const pinAction = useMemo(() => {\n        if (!pinnable) {\n            return action;\n        }\n\n        const handlePinClick = (e: React.MouseEvent) => {\n            e.stopPropagation();\n            e.preventDefault();\n\n            if (isPinned) {\n                sidebar.unregisterPinnedItem(menuItemId);\n            } else {\n                sidebar.registerPinnedItem({\n                    id: menuItemId,\n                    text: buttonProps.text,\n                    icon: pinnedItemIcon,\n                    to: buttonProps.to,\n                    onClick: buttonProps.onClick,\n                    active: buttonProps.active\n                });\n            }\n\n            sidebar.toggleItemPinned(menuItemId);\n        };\n\n        const pinButton = (\n            <SidebarMenuItemAction\n                element={isPinned ? <UnPinIcon /> : <PinIcon />}\n                onClick={handlePinClick}\n                showOnHover={true}\n            />\n        );\n\n        // If there's a custom action, combine them\n        // Don't modify the custom action - it should keep its original behavior\n        if (action) {\n            return (\n                <div className=\"flex items-center gap-xs\">\n                    {pinButton}\n                    {action}\n                </div>\n            );\n        }\n\n        return pinButton;\n    }, [pinnable, isPinned, pinnedItemIcon, action, sidebar, menuItemId]);\n\n    useEffect(() => {\n        if (sidebar.expanded) {\n            const timer = setTimeout(() => {\n                setShowChevron(true);\n            }, 100);\n            return () => clearTimeout(timer);\n        }\n        setShowChevron(false);\n        return undefined;\n    }, [sidebar.expanded]);\n\n    const sidebarMenuSubButton = useMemo(() => {\n        if (!children) {\n            return (\n                <>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <SidebarMenuSubButton {...buttonProps} action={pinAction} />\n                </>\n            );\n        }\n\n        const chevron = showChevron ? (\n            <Icon\n                label={\"Expand / Collapse\"}\n                size={\"sm\"}\n                className={\n                    \"ml-auto transition-transform duration-100 group-data-[state=open]/menu-sub-item-collapsible:rotate-180 group-data-[state=collapsed]:hidden\"\n                }\n                color={\"neutral-strong\"}\n                data-sidebar={\"menu-item-expanded-indicator\"}\n                icon={<KeyboardArrowRightIcon />}\n            />\n        ) : null;\n\n        const collapsibleAction = pinnable ? (\n            <div className=\"flex items-center gap-xs\">\n                {pinAction}\n                {chevron}\n            </div>\n        ) : (\n            chevron\n        );\n\n        if (!collapsible) {\n            return (\n                <div className={\"flex items-center min-w-0\"}>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <SidebarMenuSubButton {...buttonProps} />\n                </div>\n            );\n        }\n\n        return (\n            <Collapsible.Root\n                className=\"w-full group/menu-sub-item-collapsible\"\n                open={isSectionExpanded}\n                onOpenChange={toggleSectionExpanded}\n            >\n                <div className={\"flex items-center min-w-0\"}>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <Collapsible.Trigger asChild>\n                        <SidebarMenuSubButton\n                            {...buttonProps}\n                            action={collapsibleAction}\n                            className={\n                                \"group-data-[state=open]/menu-sub-item-collapsible:font-semibold!\"\n                            }\n                        />\n                    </Collapsible.Trigger>\n                </div>\n                <Collapsible.Content>\n                    <SidebarMenuSub parentIcon={buttonProps.icon}>{children}</SidebarMenuSub>\n                </Collapsible.Content>\n            </Collapsible.Root>\n        );\n    }, [\n        children,\n        buttonProps,\n        currentLevel,\n        menuItemId,\n        isSectionExpanded,\n        toggleSectionExpanded,\n        showChevron,\n        pinnable,\n        pinAction\n    ]);\n\n    return (\n        <>\n            <li\n                data-sidebar=\"menu-sub-item\"\n                className={cn(\"group/menu-sub-item relative flex min-w-0\", className)}\n            >\n                {sidebarMenuSubButton}\n            </li>\n            {children && !collapsible ? children : null}\n        </>\n    );\n};\n\nexport { SidebarMenuSubItem };\n"],"names":["SidebarMenuSubItem","children","className","pinnable","action","collapsible","buttonProps","currentLevel","parentIcon","useSidebarMenu","sidebar","useSidebar","showChevron","setShowChevron","useState","menuItemId","useMemo","btoa","isSectionExpanded","toggleSectionExpanded","useCallback","isPinned","pinnedItemIcon","React","pinAction","handlePinClick","e","pinButton","SidebarMenuItemAction","UnPinIcon","PinIcon","useEffect","timer","setTimeout","clearTimeout","sidebarMenuSubButton","SidebarMenuSubItemIndentation","SidebarMenuSubButton","chevron","Icon","KeyboardArrowRightIcon","collapsibleAction","Collapsible","SidebarMenuSub","cn"],"mappings":"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"}

package/Sidebar/components/items/SidebarMenuSubItemIndentation.js

@@ -24,7 +24,8 @@ const SidebarMenuSubItemIndentation = ({ lvl, variant })=>/*#__PURE__*/ react.cr
             margin: "none",
             variant: "strong",
             className: separatorVariants({
-                variant
+                variant,
+                className: "!h-full"
             })
         }))));
 export { SidebarMenuSubItemIndentation };

package/Sidebar/components/items/SidebarMenuSubItemIndentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar/components/items/SidebarMenuSubItemIndentation.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuSubItemIndentation.tsx"],"sourcesContent":["import React from \"react\";\nimport { Separator } from \"~/Separator/index.js\";\n\nimport { cva, type VariantProps } from \"~/utils.js\";\n\nconst separatorVariants = cva([\"h-xl ml-px\"], {\n    variants: {\n        variant: {\n            \"group-label\": \"h-[38px]!\"\n        }\n    }\n});\n\nexport interface SidebarMenuSubItemIndentationProps\n    extends\n        Omit<React.HTMLAttributes<HTMLLIElement>, \"content\">,\n        VariantProps<typeof separatorVariants> {\n    lvl: number;\n}\n\nconst SidebarMenuSubItemIndentation = ({ lvl, variant }: SidebarMenuSubItemIndentationProps) => {\n    return (\n        <div data-sidebar=\"indentation\" className={\"gap-x-xs flex mr-sm\"}>\n            {Array.from({ length: lvl }, (_, index) => (\n                <div data-sidebar={\"indentation-element\"} className={\"ml-md\"} key={lvl + index}>\n                    <Separator\n                        orientation={\"vertical\"}\n                        margin={\"none\"}\n                        variant={\"strong\"}\n                        className={separatorVariants({ variant })}\n                    />\n                </div>\n            ))}\n        </div>\n    );\n};\n\nexport { SidebarMenuSubItemIndentation };\n"],"names":["separatorVariants","cva","SidebarMenuSubItemIndentation","lvl","variant","Array","_","index","Separator"],"mappings":";;;AAKA,MAAMA,oBAAoBC,IAAI;IAAC;CAAa,EAAE;IAC1C,UAAU;QACN,SAAS;YACL,eAAe;QACnB;IACJ;AACJ;AASA,MAAMC,gCAAgC,CAAC,EAAEC,GAAG,EAAEC,OAAO,EAAsC,GAChF,WAAP,GACI,oBAAC;QAAI,gBAAa;QAAc,WAAW;OACtCC,MAAM,IAAI,CAAC;QAAE,QAAQF;IAAI,GAAG,CAACG,GAAGC,QAAAA,WAAAA,GAC7B,oBAAC;YAAI,gBAAc;YAAuB,WAAW;YAAS,KAAKJ,MAAMI;yBACrE,oBAACC,WAASA;YACN,aAAa;YACb,QAAQ;YACR,SAAS;YACT,WAAWR,kBAAkB;gBAAEI;YAAQ"}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuSubItemIndentation.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuSubItemIndentation.tsx"],"sourcesContent":["import React from \"react\";\nimport { Separator } from \"~/Separator/index.js\";\n\nimport { cva, type VariantProps } from \"~/utils.js\";\n\nconst separatorVariants = cva([\"h-xl ml-px\"], {\n    variants: {\n        variant: {\n            \"group-label\": \"h-[38px]!\"\n        }\n    }\n});\n\nexport interface SidebarMenuSubItemIndentationProps\n    extends\n        Omit<React.HTMLAttributes<HTMLLIElement>, \"content\">,\n        VariantProps<typeof separatorVariants> {\n    lvl: number;\n}\n\nconst SidebarMenuSubItemIndentation = ({ lvl, variant }: SidebarMenuSubItemIndentationProps) => {\n    return (\n        <div data-sidebar=\"indentation\" className={\"gap-x-xs flex mr-sm\"}>\n            {Array.from({ length: lvl }, (_, index) => (\n                <div data-sidebar={\"indentation-element\"} className={\"ml-md\"} key={lvl + index}>\n                    <Separator\n                        orientation={\"vertical\"}\n                        margin={\"none\"}\n                        variant={\"strong\"}\n                        className={separatorVariants({ variant, className: \"!h-full\" })}\n                    />\n                </div>\n            ))}\n        </div>\n    );\n};\n\nexport { SidebarMenuSubItemIndentation };\n"],"names":["separatorVariants","cva","SidebarMenuSubItemIndentation","lvl","variant","Array","_","index","Separator"],"mappings":";;;AAKA,MAAMA,oBAAoBC,IAAI;IAAC;CAAa,EAAE;IAC1C,UAAU;QACN,SAAS;YACL,eAAe;QACnB;IACJ;AACJ;AASA,MAAMC,gCAAgC,CAAC,EAAEC,GAAG,EAAEC,OAAO,EAAsC,GAChF,WAAP,GACI,oBAAC;QAAI,gBAAa;QAAc,WAAW;OACtCC,MAAM,IAAI,CAAC;QAAE,QAAQF;IAAI,GAAG,CAACG,GAAGC,QAAAA,WAAAA,GAC7B,oBAAC;YAAI,gBAAc;YAAuB,WAAW;YAAS,KAAKJ,MAAMI;yBACrE,oBAACC,WAASA;YACN,aAAa;YACb,QAAQ;YACR,SAAS;YACT,WAAWR,kBAAkB;gBAAEI;gBAAS,WAAW;YAAU"}

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Skeleton } from "./Skeleton.js";
 declare const meta: Meta<typeof Skeleton>;
 export default meta;
@@ -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;