@mage-ui/components 1.0.35 → 1.0.37

package/dist/components/data-display/uploaded-file/UploadedFileDetails.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime50 from "react/jsx-runtime";
+import * as react_jsx_runtime31 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/components/data-display/uploaded-file/UploadedFileDetails.d.ts
@@ -17,7 +17,7 @@ declare const UploadedFileDetails: ({
   fileDate,
   fileType,
   classNames
-}: UploadedFileDetailsProps) => react_jsx_runtime50.JSX.Element;
+}: UploadedFileDetailsProps) => react_jsx_runtime31.JSX.Element;
 //#endregion
 export { UploadedFileDetails, UploadedFileDetailsProps };
 //# sourceMappingURL=UploadedFileDetails.d.mts.map

package/dist/components/forms/Form.d.mts

@@ -3,7 +3,7 @@ import { FormSubmitProps } from "./controls/FormSubmit.mjs";
 import { FormCheckboxProps } from "./controls/FormCheckbox.mjs";
 import { FormPasswordProps } from "./controls/FormPassword.mjs";
 import "../index.mjs";
-import * as react_jsx_runtime53 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 import React, { ReactNode } from "react";
 import { FieldValues, UseFormSetError } from "react-hook-form";
 import { ZodObject, ZodTypeAny } from "zod";
@@ -44,7 +44,7 @@ declare const Form: {
     schema,
     t,
     classNames
-  }: FormProps<T>): react_jsx_runtime53.JSX.Element;
+  }: FormProps<T>): react_jsx_runtime6.JSX.Element;
   displayName: string;
   TextInput: {
     ({
@@ -55,7 +55,7 @@ declare const Form: {
       $rule?: string;
       isSubmitting?: boolean;
       name: string;
-    } & TextInputProps): react_jsx_runtime53.JSX.Element;
+    } & TextInputProps): react_jsx_runtime6.JSX.Element;
     displayName: string;
   };
   Submit: {
@@ -63,7 +63,7 @@ declare const Form: {
       children,
       successText,
       ...props
-    }: FormSubmitProps): react_jsx_runtime53.JSX.Element;
+    }: FormSubmitProps): react_jsx_runtime6.JSX.Element;
     displayName: string;
   };
   Hidden: {
@@ -75,7 +75,7 @@ declare const Form: {
       name?: string;
       value?: string;
       defaultValue?: string;
-    } & React.InputHTMLAttributes<HTMLInputElement>): react_jsx_runtime53.JSX.Element;
+    } & React.InputHTMLAttributes<HTMLInputElement>): react_jsx_runtime6.JSX.Element;
     displayName: string;
   };
   Checkbox: {
@@ -84,7 +84,7 @@ declare const Form: {
       isSubmitting,
       name,
       ...props
-    }: FormCheckboxProps): react_jsx_runtime53.JSX.Element;
+    }: FormCheckboxProps): react_jsx_runtime6.JSX.Element;
     displayName: string;
   };
   Password: {
@@ -96,7 +96,7 @@ declare const Form: {
       name,
       rules,
       ...props
-    }: FormPasswordProps): react_jsx_runtime53.JSX.Element;
+    }: FormPasswordProps): react_jsx_runtime6.JSX.Element;
     displayName: string;
   };
 };

package/dist/components/forms/Form.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.mts","names":[],"sources":["../../../src/components/forms/Form.tsx"],"mappings":";;;;;;;;;;;KAeK,YAAA;EACH,IAAA;EACA,OAAA;EACA,MAAA;EACA,GAAA;AAAA;AAAA,KAGU,SAAA,WAAoB,WAAA;EAC9B,QAAA,GAAW,MAAA;IAAU,IAAA,EAAM,CAAA;EAAA,MAAQ,OAAA;EACnC,aAAA,IAAiB,QAAA,EAAU,YAAA;EAC3B,eAAA,IAAmB,MAAA;IACjB,OAAA;IACA,QAAA,EAAU,eAAA,CAAgB,CAAA;IAC1B,MAAA;EAAA;EAEF,aAAA;EACA,QAAA,EAAU,SAAA;EACV,MAAA,GAAS,SAAA,CAAU,MAAA,SAAe,UAAA;EAClC,CAAA,IACE,GAAA,UACA,QAAA,GAAW,MAAA,kBACX,QAAA,uBACY,KAAA,CAAM,SAAA;EACpB,UAAA;IACE,IAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAYS,IAAA;EAAA,WAAkB,WAAA;IAAW,QAAA;IAAA,aAAA;IAAA,eAAA;IAAA,aAAA;IAAA,QAAA;IAAA,MAAA;IAAA,CAAA;IAAA;EAAA,GASvC,SAAA,CAAU,CAAA,IAAE,mBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Form.d.mts","names":[],"sources":["../../../src/components/forms/Form.tsx"],"mappings":";;;;;;;;;;;KAeK,YAAA;EACH,IAAA;EACA,OAAA;EACA,MAAA;EACA,GAAA;AAAA;AAAA,KAGU,SAAA,WAAoB,WAAA;EAC9B,QAAA,GAAW,MAAA;IAAU,IAAA,EAAM,CAAA;EAAA,MAAQ,OAAA;EACnC,aAAA,IAAiB,QAAA,EAAU,YAAA;EAC3B,eAAA,IAAmB,MAAA;IACjB,OAAA;IACA,QAAA,EAAU,eAAA,CAAgB,CAAA;IAC1B,MAAA;EAAA;EAEF,aAAA;EACA,QAAA,EAAU,SAAA;EACV,MAAA,GAAS,SAAA,CAAU,MAAA,SAAe,UAAA;EAClC,CAAA,IACE,GAAA,UACA,QAAA,GAAW,MAAA,kBACX,QAAA,uBACY,KAAA,CAAM,SAAA;EACpB,UAAA;IACE,IAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAYS,IAAA;EAAA,WAAkB,WAAA;IAAW,QAAA;IAAA,aAAA;IAAA,eAAA;IAAA,aAAA;IAAA,QAAA;IAAA,MAAA;IAAA,CAAA;IAAA;EAAA,GASvC,SAAA,CAAU,CAAA,IAAE,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/forms/rules/password-rules.mjs

@@ -1,2 +1,2 @@
-const e=[{key:`password.rules.min`,text:`Mínimo 12 caracteres`,validate:e=>e.length>=12},{key:`password.rules.lower`,text:`Al menos una minúscula`,validate:e=>/[a-z]/.test(e)},{key:`password.rules.upper`,text:`Al menos una mayúscula`,validate:e=>/[A-Z]/.test(e)},{key:`password.rules.digit`,text:`Al menos un número`,validate:e=>/[0-9]/.test(e)},{key:`password.rules.symbol`,text:`Al menos un símbolo`,validate:e=>/[\W_]/.test(e)},{key:`password.rules.whitespace`,text:`Sin espacios en blanco`,validate:e=>!/\s/.test(e)}];export{e as PASSWORD_RULES};
+const e=[{key:`password.rules.min`,text:`Mínimo 12 caracteres`,validate:e=>e.length>=12},{key:`password.rules.lower`,text:`Al menos una minúscula`,validate:e=>/[a-z]/.test(e)},{key:`password.rules.upper`,text:`Al menos una mayúscula`,validate:e=>/[A-Z]/.test(e)},{key:`password.rules.digit`,text:`Al menos un número`,validate:e=>/[0-9]/.test(e)},{key:`password.rules.symbol`,text:`Al menos un símbolo`,validate:e=>/[^A-Za-z0-9\s]/.test(e)},{key:`password.rules.whitespace`,text:`Sin espacios en blanco`,validate:e=>!/\s/.test(e)}];export{e as PASSWORD_RULES};
 //# sourceMappingURL=password-rules.mjs.map

package/dist/components/forms/rules/password-rules.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"password-rules.mjs","names":[],"sources":["../../../../src/components/forms/rules/password-rules.ts"],"sourcesContent":["import type { PasswordRuleDefinition } from '@/components/controls/password-input/usePasswordRules';\n\nexport const PASSWORD_RULES: PasswordRuleDefinition[] = [\n  {\n    key: 'password.rules.min',\n    text: 'Mínimo 12 caracteres',\n    validate: (v) => v.length >= 12,\n  },\n  {\n    key: 'password.rules.lower',\n    text: 'Al menos una minúscula',\n    validate: (v) => /[a-z]/.test(v),\n  },\n  {\n    key: 'password.rules.upper',\n    text: 'Al menos una mayúscula',\n    validate: (v) => /[A-Z]/.test(v),\n  },\n  {\n    key: 'password.rules.digit',\n    text: 'Al menos un número',\n    validate: (v) => /[0-9]/.test(v),\n  },\n  {\n    key: 'password.rules.symbol',\n    text: 'Al menos un símbolo',\n    validate: (v) => /[\\W_]/.test(v),\n  },\n  {\n    key: 'password.rules.whitespace',\n    text: 'Sin espacios en blanco',\n    validate: (v) => !/\\s/.test(v),\n  },\n];\n"],"mappings":"AAEA,MAAa,EAA2C,CACtD,CACE,IAAK,qBACL,KAAM,uBACN,SAAW,GAAM,EAAE,QAAU,GAC9B,CACD,CACE,IAAK,uBACL,KAAM,yBACN,SAAW,GAAM,QAAQ,KAAK,EAAE,CACjC,CACD,CACE,IAAK,uBACL,KAAM,yBACN,SAAW,GAAM,QAAQ,KAAK,EAAE,CACjC,CACD,CACE,IAAK,uBACL,KAAM,qBACN,SAAW,GAAM,QAAQ,KAAK,EAAE,CACjC,CACD,CACE,IAAK,wBACL,KAAM,sBACN,SAAW,GAAM,QAAQ,KAAK,EAAE,CACjC,CACD,CACE,IAAK,4BACL,KAAM,yBACN,SAAW,GAAM,CAAC,KAAK,KAAK,EAAE,CAC/B,CACF"}
+{"version":3,"file":"password-rules.mjs","names":[],"sources":["../../../../src/components/forms/rules/password-rules.ts"],"sourcesContent":["import type { PasswordRuleDefinition } from '@/components/controls/password-input/usePasswordRules';\n\nexport const PASSWORD_RULES: PasswordRuleDefinition[] = [\n  {\n    key: 'password.rules.min',\n    text: 'Mínimo 12 caracteres',\n    validate: (v) => v.length >= 12,\n  },\n  {\n    key: 'password.rules.lower',\n    text: 'Al menos una minúscula',\n    validate: (v) => /[a-z]/.test(v),\n  },\n  {\n    key: 'password.rules.upper',\n    text: 'Al menos una mayúscula',\n    validate: (v) => /[A-Z]/.test(v),\n  },\n  {\n    key: 'password.rules.digit',\n    text: 'Al menos un número',\n    validate: (v) => /[0-9]/.test(v),\n  },\n  {\n    key: 'password.rules.symbol',\n    text: 'Al menos un símbolo',\n    validate: (v) => /[^A-Za-z0-9\\s]/.test(v),\n  },\n  {\n    key: 'password.rules.whitespace',\n    text: 'Sin espacios en blanco',\n    validate: (v) => !/\\s/.test(v),\n  },\n];\n"],"mappings":"AAEA,MAAa,EAA2C,CACtD,CACE,IAAK,qBACL,KAAM,uBACN,SAAW,GAAM,EAAE,QAAU,GAC9B,CACD,CACE,IAAK,uBACL,KAAM,yBACN,SAAW,GAAM,QAAQ,KAAK,EAAE,CACjC,CACD,CACE,IAAK,uBACL,KAAM,yBACN,SAAW,GAAM,QAAQ,KAAK,EAAE,CACjC,CACD,CACE,IAAK,uBACL,KAAM,qBACN,SAAW,GAAM,QAAQ,KAAK,EAAE,CACjC,CACD,CACE,IAAK,wBACL,KAAM,sBACN,SAAW,GAAM,iBAAiB,KAAK,EAAE,CAC1C,CACD,CACE,IAAK,4BACL,KAAM,yBACN,SAAW,GAAM,CAAC,KAAK,KAAK,EAAE,CAC/B,CACF"}

package/dist/components/index.d.mts

@@ -23,7 +23,7 @@ import { LoaderDot, LoaderDotProps } from "./data-display/loader-dot/LoaderDot.m
 import { LoaderOval, LoaderOvalProps } from "./data-display/loader-oval/LoaderOval.mjs";
 import { LogoImage, LogoImageProps } from "./data-display/logos/logo-image/LogoImage.mjs";
 import { LogoSvg, LogoSvgProps } from "./data-display/logos/logo-svg/LogoSvg.mjs";
-import { NotificationBanner, NotificationBannerProps } from "./data-display/notification-banner/NotificationBanner.mjs";
+import { NotificationBanner, NotificationBannerIntent, NotificationBannerProps } from "./data-display/notification-banner/NotificationBanner.mjs";
 import { RemovableItem, RemovableItemProps } from "./data-display/removable-item/RemovableItem.mjs";
 import { Tag, TagProps } from "./data-display/tag/Tag.mjs";
 import { TagGroup, TagGroupProps } from "./data-display/tag-group/TagGroup.mjs";
@@ -59,7 +59,7 @@ import { ScrollAreaAutosize, ScrollAreaAutosizeProps } from "./misc/scroll-area-
 import { VisuallyHidden, VisuallyHiddenProps } from "./misc/visually-hidden/VisuallyHidden.mjs";
 import "./misc/index.mjs";
 import { Breadcrumbs, BreadcrumbsProps } from "./navigations/breadcrumbs/Breadcrumbs.mjs";
-import { ItemType, NavType, Sidebar, SidebarProps } from "./navigations/sidebars/sidebar/Sidebar.mjs";
+import { NavType, Sidebar, SidebarProps } from "./navigations/sidebars/sidebar/Sidebar.mjs";
 import "./navigations/index.mjs";
 import { Modal, ModalProps, ModalRootProps } from "./overlays/modal/Modal.mjs";
 import { ModalAlert, ModalAlertClassNames, ModalAlertPublicProps } from "./overlays/modals/alert/ModalAlert.mjs";

package/dist/components/layouts/top-bar/TopBar.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime62 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/components/layouts/top-bar/TopBar.d.ts
@@ -17,7 +17,7 @@ declare const TopBar: ({
   startSlot,
   endSlot,
   classNames
-}: TopBarProps) => react_jsx_runtime62.JSX.Element;
+}: TopBarProps) => react_jsx_runtime5.JSX.Element;
 //#endregion
 export { TopBar, TopBarProps };
 //# sourceMappingURL=TopBar.d.mts.map

package/dist/components/layouts/top-bar/TopBar.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"TopBar.d.mts","names":[],"sources":["../../../../src/components/layouts/top-bar/TopBar.tsx"],"mappings":";;;;KAWY,WAAA;EACV,SAAA,GAAY,SAAA;EACZ,OAAA,GAAU,SAAA;EACV,UAAA;IACE,MAAA;IACA,IAAA;IACA,OAAA;IACA,SAAA;IACA,OAAA;EAAA;AAAA;AAAA,cAIS,MAAA;EAAU,SAAA;EAAA,OAAA;EAAA;AAAA,GAAoC,WAAA,KAAW,mBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"TopBar.d.mts","names":[],"sources":["../../../../src/components/layouts/top-bar/TopBar.tsx"],"mappings":";;;;KAWY,WAAA;EACV,SAAA,GAAY,SAAA;EACZ,OAAA,GAAU,SAAA;EACV,UAAA;IACE,MAAA;IACA,IAAA;IACA,OAAA;IACA,SAAA;IACA,OAAA;EAAA;AAAA;AAAA,cAIS,MAAA;EAAU,SAAA;EAAA,OAAA;EAAA;AAAA,GAAoC,WAAA,KAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/misc/horizontal-divider/HorizontalDivider.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime51 from "react/jsx-runtime";
+import * as react_jsx_runtime29 from "react/jsx-runtime";
 
 //#region src/components/misc/horizontal-divider/HorizontalDivider.d.ts
 type HorizontalDividerProps = {
@@ -9,7 +9,7 @@ type HorizontalDividerProps = {
 };
 declare const HorizontalDivider: ({
   classNames
-}: HorizontalDividerProps) => react_jsx_runtime51.JSX.Element;
+}: HorizontalDividerProps) => react_jsx_runtime29.JSX.Element;
 //#endregion
 export { HorizontalDivider, HorizontalDividerProps };
 //# sourceMappingURL=HorizontalDivider.d.mts.map

package/dist/components/misc/scroll-area-autosize/ScrollAreaAutosize.mjs

@@ -1,2 +1,2 @@
-import{cx as e}from"@mage-ui/styled-system/css";import{scrollAreaAutosize as t,scrollAreaAutosizeContent as n,scrollAreaAutosizeCorner as r,scrollAreaAutosizeRoot as i,scrollAreaAutosizeScrollbar as a,scrollAreaAutosizeThumb as o,scrollAreaAutosizeViewport as s}from"@mage-ui/styled-system/recipes";import{ScrollArea as c}from"@mantine/core";import{jsx as l}from"react/jsx-runtime";const u=({scrollbars:u=`y`,type:d,scrollbarSize:f,offsetScrollbars:p=!0,mah:m=192,children:h,classNames:g})=>l(c.Autosize,{scrollbars:u,type:d,scrollbarSize:f,offsetScrollbars:p,mah:m,classNames:{root:e(g?.scrollArea??t(),g?.root??i()),viewport:g?.viewport??s(),content:g?.content??n(),scrollbar:g?.scrollbar??a(),thumb:g?.thumb??o(),corner:g?.corner??r()},children:h});export{u as ScrollAreaAutosize};
+import{cx as e}from"@mage-ui/styled-system/css";import{scrollAreaAutosize as t,scrollAreaAutosizeContent as n,scrollAreaAutosizeCorner as r,scrollAreaAutosizeRoot as i,scrollAreaAutosizeScrollbar as a,scrollAreaAutosizeThumb as o,scrollAreaAutosizeViewport as s}from"@mage-ui/styled-system/recipes";import{ScrollArea as c}from"@mantine/core";import{jsx as l}from"react/jsx-runtime";const u=({scrollbars:u=`y`,type:d,scrollbarSize:f,offsetScrollbars:p=!0,mah:m,children:h,classNames:g})=>l(c.Autosize,{scrollbars:u,type:d,scrollbarSize:f,offsetScrollbars:p,mah:m,classNames:{root:e(g?.scrollArea??t(),g?.root??i()),viewport:g?.viewport??s(),content:g?.content??n(),scrollbar:g?.scrollbar??a(),thumb:g?.thumb??o(),corner:g?.corner??r()},children:h});export{u as ScrollAreaAutosize};
 //# sourceMappingURL=ScrollAreaAutosize.mjs.map

package/dist/components/misc/scroll-area-autosize/ScrollAreaAutosize.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaAutosize.mjs","names":["MantineScrollArea"],"sources":["../../../../src/components/misc/scroll-area-autosize/ScrollAreaAutosize.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  scrollAreaAutosize,\n  scrollAreaAutosizeContent,\n  scrollAreaAutosizeCorner,\n  scrollAreaAutosizeRoot,\n  scrollAreaAutosizeScrollbar,\n  scrollAreaAutosizeThumb,\n  scrollAreaAutosizeViewport,\n} from '@mage-ui/styled-system/recipes';\nimport { ScrollArea as MantineScrollArea } from '@mantine/core';\n\nimport type { ScrollAreaProps } from '../scroll-area/ScrollArea';\n\nexport type ScrollAreaAutosizeProps = {\n  mah: string | number;\n} & ScrollAreaProps;\n\nexport const ScrollAreaAutosize = ({\n  scrollbars = 'y',\n  type,\n  scrollbarSize,\n  offsetScrollbars = true,\n  mah = 192,\n  children,\n  classNames,\n}: ScrollAreaAutosizeProps): ReactNode => {\n  return (\n    <MantineScrollArea.Autosize\n      scrollbars={scrollbars}\n      type={type}\n      scrollbarSize={scrollbarSize}\n      offsetScrollbars={offsetScrollbars}\n      mah={mah}\n      classNames={{\n        root: cx(\n          classNames?.scrollArea ?? scrollAreaAutosize(),\n          classNames?.root ?? scrollAreaAutosizeRoot(),\n        ),\n        viewport: classNames?.viewport ?? scrollAreaAutosizeViewport(),\n        content: classNames?.content ?? scrollAreaAutosizeContent(),\n        scrollbar: classNames?.scrollbar ?? scrollAreaAutosizeScrollbar(),\n        thumb: classNames?.thumb ?? scrollAreaAutosizeThumb(),\n        corner: classNames?.corner ?? scrollAreaAutosizeCorner(),\n      }}\n    >\n      {children}\n    </MantineScrollArea.Autosize>\n  );\n};\n"],"mappings":"8XAoBA,MAAa,GAAsB,CACjC,aAAa,IACb,OACA,gBACA,mBAAmB,GACnB,MAAM,IACN,WACA,gBAGE,EAACA,EAAkB,SAAA,CACL,aACN,OACS,gBACG,mBACb,MACL,WAAY,CACV,KAAM,EACJ,GAAY,YAAc,GAAoB,CAC9C,GAAY,MAAQ,GAAwB,CAC7C,CACD,SAAU,GAAY,UAAY,GAA4B,CAC9D,QAAS,GAAY,SAAW,GAA2B,CAC3D,UAAW,GAAY,WAAa,GAA6B,CACjE,MAAO,GAAY,OAAS,GAAyB,CACrD,OAAQ,GAAY,QAAU,GAA0B,CACzD,CAEA,YAC0B"}
+{"version":3,"file":"ScrollAreaAutosize.mjs","names":["MantineScrollArea"],"sources":["../../../../src/components/misc/scroll-area-autosize/ScrollAreaAutosize.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  scrollAreaAutosize,\n  scrollAreaAutosizeContent,\n  scrollAreaAutosizeCorner,\n  scrollAreaAutosizeRoot,\n  scrollAreaAutosizeScrollbar,\n  scrollAreaAutosizeThumb,\n  scrollAreaAutosizeViewport,\n} from '@mage-ui/styled-system/recipes';\nimport { ScrollArea as MantineScrollArea } from '@mantine/core';\n\nimport type { ScrollAreaProps } from '../scroll-area/ScrollArea';\n\nexport type ScrollAreaAutosizeProps = {\n  mah: string | number;\n} & ScrollAreaProps;\n\nexport const ScrollAreaAutosize = ({\n  scrollbars = 'y',\n  type,\n  scrollbarSize,\n  offsetScrollbars = true,\n  mah,\n  children,\n  classNames,\n}: ScrollAreaAutosizeProps): ReactNode => {\n  return (\n    <MantineScrollArea.Autosize\n      scrollbars={scrollbars}\n      type={type}\n      scrollbarSize={scrollbarSize}\n      offsetScrollbars={offsetScrollbars}\n      mah={mah}\n      classNames={{\n        root: cx(\n          classNames?.scrollArea ?? scrollAreaAutosize(),\n          classNames?.root ?? scrollAreaAutosizeRoot(),\n        ),\n        viewport: classNames?.viewport ?? scrollAreaAutosizeViewport(),\n        content: classNames?.content ?? scrollAreaAutosizeContent(),\n        scrollbar: classNames?.scrollbar ?? scrollAreaAutosizeScrollbar(),\n        thumb: classNames?.thumb ?? scrollAreaAutosizeThumb(),\n        corner: classNames?.corner ?? scrollAreaAutosizeCorner(),\n      }}\n    >\n      {children}\n    </MantineScrollArea.Autosize>\n  );\n};\n"],"mappings":"8XAoBA,MAAa,GAAsB,CACjC,aAAa,IACb,OACA,gBACA,mBAAmB,GACnB,MACA,WACA,gBAGE,EAACA,EAAkB,SAAA,CACL,aACN,OACS,gBACG,mBACb,MACL,WAAY,CACV,KAAM,EACJ,GAAY,YAAc,GAAoB,CAC9C,GAAY,MAAQ,GAAwB,CAC7C,CACD,SAAU,GAAY,UAAY,GAA4B,CAC9D,QAAS,GAAY,SAAW,GAA2B,CAC3D,UAAW,GAAY,WAAa,GAA6B,CACjE,MAAO,GAAY,OAAS,GAAyB,CACrD,OAAQ,GAAY,QAAU,GAA0B,CACzD,CAEA,YAC0B"}

package/dist/components/misc/visually-hidden/VisuallyHidden.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime52 from "react/jsx-runtime";
+import * as react_jsx_runtime30 from "react/jsx-runtime";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 
 //#region src/components/misc/visually-hidden/VisuallyHidden.d.ts
@@ -8,7 +8,7 @@ type VisuallyHiddenProps = {
 declare const VisuallyHidden: ({
   children,
   ...props
-}: VisuallyHiddenProps) => react_jsx_runtime52.JSX.Element;
+}: VisuallyHiddenProps) => react_jsx_runtime30.JSX.Element;
 //#endregion
 export { VisuallyHidden, VisuallyHiddenProps };
 //# sourceMappingURL=VisuallyHidden.d.mts.map

package/dist/components/navigations/breadcrumbs/Breadcrumbs.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime61 from "react/jsx-runtime";
+import * as react_jsx_runtime68 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/components/navigations/breadcrumbs/Breadcrumbs.d.ts
@@ -19,7 +19,7 @@ declare const Breadcrumbs: {
     separator,
     children,
     classNames
-  }: BreadcrumbsProps): react_jsx_runtime61.JSX.Element;
+  }: BreadcrumbsProps): react_jsx_runtime68.JSX.Element;
   Item: {
     ({
       children

package/dist/components/navigations/index.d.mts

@@ -1,3 +1,3 @@
 import { Menu, MenuProps } from "./menu/Menu.mjs";
 import { Breadcrumbs, BreadcrumbsProps } from "./breadcrumbs/Breadcrumbs.mjs";
-import { ItemType, NavType, Sidebar, SidebarProps } from "./sidebars/sidebar/Sidebar.mjs";
+import { NavType, Sidebar, SidebarProps } from "./sidebars/sidebar/Sidebar.mjs";

package/dist/components/navigations/menu/Menu.d.mts

@@ -1,13 +1,18 @@
 import { ButtonProps } from "../../buttons/button/Button.mjs";
 import "../../buttons/index.mjs";
-import * as react_jsx_runtime22 from "react/jsx-runtime";
+import * as react_jsx_runtime43 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/components/navigations/menu/Menu.d.ts
+type MenuTargetButtonProps = Partial<ButtonProps> & {
+  [key: `data-${string}`]: string | number | boolean | undefined;
+};
 type MenuProps = {
   target: ReactNode;
   children: ReactNode;
   withinPortal?: boolean;
+  opened?: boolean;
+  onOpenedChange?: (opened: boolean) => void;
   position?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
   width?: number | string;
   keepMounted?: boolean;
@@ -21,32 +26,38 @@ type MenuProps = {
     divider?: string;
     target?: {
       button: string;
+      root?: string;
+      inner?: string;
+      label?: string;
+      section?: string;
     };
   };
-  targetButtonProps?: Partial<ButtonProps>;
+  targetButtonProps?: MenuTargetButtonProps;
 };
 declare const Menu: {
   ({
     target,
     children,
     withinPortal,
+    opened,
+    onOpenedChange,
     position,
     width,
     keepMounted,
     offset,
     classNames,
     targetButtonProps
-  }: MenuProps): react_jsx_runtime22.JSX.Element;
+  }: MenuProps): react_jsx_runtime43.JSX.Element;
   Item: {
     ({
       children
     }: {
       children: ReactNode;
-    }): react_jsx_runtime22.JSX.Element;
+    }): react_jsx_runtime43.JSX.Element;
     displayName: string;
   };
   Divider: {
-    (): react_jsx_runtime22.JSX.Element;
+    (): react_jsx_runtime43.JSX.Element;
     displayName: string;
   };
 };

package/dist/components/navigations/menu/Menu.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.mts","names":[],"sources":["../../../../src/components/navigations/menu/Menu.tsx"],"mappings":";;;;;;KAeY,SAAA;EACV,MAAA,EAAQ,SAAA;EACR,QAAA,EAAU,SAAA;EACV,YAAA;EACA,QAAA;EAaA,KAAA;EACA,WAAA;EACA,MAAA;EACA,UAAA;IACE,IAAA;IACA,IAAA;IACA,IAAA;IACA,SAAA;IACA,WAAA;IACA,OAAA;IACA,MAAA;MACE,MAAA;IAAA;EAAA;EAGJ,iBAAA,GAAoB,OAAA,CAAQ,WAAA;AAAA;AAAA,cAGjB,IAAA;EAAA;;;;;;;;;;KAUV,SAAA,GAAS,mBAAA,CAAA,GAAA,CAAA,OAAA;;;;;MAwCsB,QAAA,EAAU,SAAA;IAAA,IAAW,mBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Menu.d.mts","names":[],"sources":["../../../../src/components/navigations/menu/Menu.tsx"],"mappings":";;;;;;KAmBK,qBAAA,GAAwB,OAAA,CAAQ,WAAA;EAAA,CAClC,GAAA;AAAA;AAAA,KAGS,SAAA;EACV,MAAA,EAAQ,SAAA;EACR,QAAA,EAAU,SAAA;EACV,YAAA;EACA,MAAA;EACA,cAAA,IAAkB,MAAA;EAClB,QAAA;EAaA,KAAA;EACA,WAAA;EACA,MAAA;EACA,UAAA;IACE,IAAA;IACA,IAAA;IACA,IAAA;IACA,SAAA;IACA,WAAA;IACA,OAAA;IACA,MAAA;MACE,MAAA;MACA,IAAA;MACA,KAAA;MACA,KAAA;MACA,OAAA;IAAA;EAAA;EAGJ,iBAAA,GAAoB,qBAAA;AAAA;AAAA,cAGT,IAAA;EAAA;;;;;;;;;;;;KAYV,SAAA,GAAS,mBAAA,CAAA,GAAA,CAAA,OAAA;;;;;MA8CsB,QAAA,EAAU,SAAA;IAAA,IAAW,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/navigations/menu/Menu.mjs

@@ -1,2 +1,2 @@
-import{Button as e}from"../../buttons/button/Button.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{menu as n,menuDivider as r,menuItem as i,menuItemLabel as a,menuItemSection as o,menuRoot as s,menuTargetButton as c}from"@mage-ui/styled-system/recipes";import{Menu as l,useCombobox as u}from"@mantine/core";import{jsx as d,jsxs as f}from"react/jsx-runtime";const p=({target:p,children:m,withinPortal:h,position:g,width:_,keepMounted:v,offset:y,classNames:b,targetButtonProps:x})=>{let S=u({onDropdownClose:()=>S.resetSelectedOption()});return f(l,{offset:y||4,withinPortal:h,position:g,width:_,keepMounted:v,classNames:{dropdown:t(b?.menu??n(),b?.root??s()),item:b?.item??i(),itemLabel:b?.itemLabel??a(),itemSection:b?.itemSection??o(),divider:b?.divider??r()},children:[d(l.Target,{children:d(e,{classNames:{button:b?.target?.button??c()},onClick:()=>S.toggleDropdown(),...x,children:p})}),d(l.Dropdown,{children:m})]})},m=({children:e})=>d(l.Item,{component:`div`,children:e}),h=()=>d(l.Divider,{});p.Item=m,m.displayName=`Menu.Item`,p.Divider=h,h.displayName=`Menu.Divider`;export{p as Menu};
+import{Button as e}from"../../buttons/button/Button.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{menu as n,menuDivider as r,menuItem as i,menuItemLabel as a,menuItemSection as o,menuRoot as s,menuTargetButton as c,menuTargetButtonInner as l,menuTargetButtonLabel as u,menuTargetButtonRoot as d,menuTargetButtonSection as f}from"@mage-ui/styled-system/recipes";import{Menu as p,useCombobox as m}from"@mantine/core";import{jsx as h,jsxs as g}from"react/jsx-runtime";const _=({target:_,children:v,withinPortal:y,opened:b,onOpenedChange:x,position:S,width:C,keepMounted:w,offset:T,classNames:E,targetButtonProps:D})=>{let O=m({onDropdownClose:()=>O.resetSelectedOption()});return g(p,{offset:T||4,withinPortal:y,opened:b,onChange:x,position:S,width:C,keepMounted:w,classNames:{dropdown:t(E?.menu??n(),E?.root??s()),item:E?.item??i(),itemLabel:E?.itemLabel??a(),itemSection:E?.itemSection??o(),divider:E?.divider??r()},children:[h(p.Target,{children:h(e,{classNames:{button:E?.target?.button??c(),root:E?.target?.root??d(),inner:E?.target?.inner??l(),label:E?.target?.label??u(),section:E?.target?.section??f()},onClick:()=>O.toggleDropdown(),...D,children:_})}),h(p.Dropdown,{children:v})]})},v=({children:e})=>h(p.Item,{component:`div`,children:e}),y=()=>h(p.Divider,{});_.Item=v,v.displayName=`Menu.Item`,_.Divider=y,y.displayName=`Menu.Divider`;export{_ as Menu};
 //# sourceMappingURL=Menu.mjs.map

package/dist/components/navigations/menu/Menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.mjs","names":["Menu","MantineMenu","Button"],"sources":["../../../../src/components/navigations/menu/Menu.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  menu,\n  menuDivider,\n  menuItem,\n  menuItemLabel,\n  menuItemSection,\n  menuRoot,\n  menuTargetButton,\n} from '@mage-ui/styled-system/recipes';\nimport { Menu as MantineMenu, useCombobox } from '@mantine/core';\nimport { Button, type ButtonProps } from '@/components/buttons';\n\nexport type MenuProps = {\n  target: ReactNode;\n  children: ReactNode;\n  withinPortal?: boolean;\n  position?:\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end';\n  width?: number | string;\n  keepMounted?: boolean;\n  offset?: number;\n  classNames?: {\n    menu?: string;\n    root?: string;\n    item?: string;\n    itemLabel?: string;\n    itemSection?: string;\n    divider?: string;\n    target?: {\n      button: string;\n    };\n  };\n  targetButtonProps?: Partial<ButtonProps>;\n};\n\nexport const Menu = ({\n  target,\n  children,\n  withinPortal,\n  position,\n  width,\n  keepMounted,\n  offset,\n  classNames,\n  targetButtonProps,\n}: MenuProps) => {\n  const combobox = useCombobox({\n    onDropdownClose: () => combobox.resetSelectedOption(),\n  });\n\n  return (\n    <MantineMenu\n      offset={offset || 4}\n      withinPortal={withinPortal}\n      position={position}\n      width={width}\n      keepMounted={keepMounted}\n      classNames={{\n        dropdown: cx(\n          classNames?.menu ?? menu(),\n          classNames?.root ?? menuRoot(),\n        ),\n        item: classNames?.item ?? menuItem(),\n        itemLabel: classNames?.itemLabel ?? menuItemLabel(),\n        itemSection: classNames?.itemSection ?? menuItemSection(),\n        divider: classNames?.divider ?? menuDivider(),\n      }}\n    >\n      <MantineMenu.Target>\n        <Button\n          classNames={{\n            button: classNames?.target?.button ?? menuTargetButton(),\n          }}\n          onClick={() => combobox.toggleDropdown()}\n          {...targetButtonProps}\n        >\n          {target}\n        </Button>\n      </MantineMenu.Target>\n\n      <MantineMenu.Dropdown>{children}</MantineMenu.Dropdown>\n    </MantineMenu>\n  );\n};\n\nconst MenuItem = ({ children }: { children: ReactNode }) => {\n  return <MantineMenu.Item component='div'>{children}</MantineMenu.Item>;\n};\n\nconst MenuDivider = () => {\n  return <MantineMenu.Divider />;\n};\n\nMenu.Item = MenuItem;\nMenuItem.displayName = 'Menu.Item';\nMenu.Divider = MenuDivider;\nMenuDivider.displayName = 'Menu.Divider';\n"],"mappings":"kXAiDA,MAAaA,GAAQ,CACnB,SACA,WACA,eACA,WACA,QACA,cACA,SACA,aACA,uBACe,CACf,IAAM,EAAW,EAAY,CAC3B,oBAAuB,EAAS,qBAAqB,CACtD,CAAC,CAEF,OACE,EAACC,EAAAA,CACC,OAAQ,GAAU,EACJ,eACJ,WACH,QACM,cACb,WAAY,CACV,SAAU,EACR,GAAY,MAAQ,GAAM,CAC1B,GAAY,MAAQ,GAAU,CAC/B,CACD,KAAM,GAAY,MAAQ,GAAU,CACpC,UAAW,GAAY,WAAa,GAAe,CACnD,YAAa,GAAY,aAAe,GAAiB,CACzD,QAAS,GAAY,SAAW,GAAa,CAC9C,WAED,EAACA,EAAY,OAAA,CAAA,SACX,EAACC,EAAAA,CACC,WAAY,CACV,OAAQ,GAAY,QAAQ,QAAU,GAAkB,CACzD,CACD,YAAe,EAAS,gBAAgB,CACxC,GAAI,WAEH,GACM,CAAA,CACU,CAErB,EAACD,EAAY,SAAA,CAAU,WAAA,CAAgC,CAAA,EAC3C,EAIZ,GAAY,CAAE,cACX,EAACA,EAAY,KAAA,CAAK,UAAU,MAAO,YAA4B,CAGlE,MACG,EAACA,EAAY,QAAA,EAAA,CAAU,CAGhC,EAAK,KAAO,EACZ,EAAS,YAAc,YACvB,EAAK,QAAU,EACf,EAAY,YAAc"}
+{"version":3,"file":"Menu.mjs","names":["Menu","MantineMenu","Button"],"sources":["../../../../src/components/navigations/menu/Menu.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  menu,\n  menuDivider,\n  menuItem,\n  menuItemLabel,\n  menuItemSection,\n  menuRoot,\n  menuTargetButton,\n  menuTargetButtonInner,\n  menuTargetButtonLabel,\n  menuTargetButtonRoot,\n  menuTargetButtonSection,\n} from '@mage-ui/styled-system/recipes';\nimport { Menu as MantineMenu, useCombobox } from '@mantine/core';\nimport { Button, type ButtonProps } from '@/components/buttons';\n\ntype MenuTargetButtonProps = Partial<ButtonProps> & {\n  [key: `data-${string}`]: string | number | boolean | undefined;\n};\n\nexport type MenuProps = {\n  target: ReactNode;\n  children: ReactNode;\n  withinPortal?: boolean;\n  opened?: boolean;\n  onOpenedChange?: (opened: boolean) => void;\n  position?:\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end';\n  width?: number | string;\n  keepMounted?: boolean;\n  offset?: number;\n  classNames?: {\n    menu?: string;\n    root?: string;\n    item?: string;\n    itemLabel?: string;\n    itemSection?: string;\n    divider?: string;\n    target?: {\n      button: string;\n      root?: string;\n      inner?: string;\n      label?: string;\n      section?: string;\n    };\n  };\n  targetButtonProps?: MenuTargetButtonProps;\n};\n\nexport const Menu = ({\n  target,\n  children,\n  withinPortal,\n  opened,\n  onOpenedChange,\n  position,\n  width,\n  keepMounted,\n  offset,\n  classNames,\n  targetButtonProps,\n}: MenuProps) => {\n  const combobox = useCombobox({\n    onDropdownClose: () => combobox.resetSelectedOption(),\n  });\n\n  return (\n    <MantineMenu\n      offset={offset || 4}\n      withinPortal={withinPortal}\n      opened={opened}\n      onChange={onOpenedChange}\n      position={position}\n      width={width}\n      keepMounted={keepMounted}\n      classNames={{\n        dropdown: cx(\n          classNames?.menu ?? menu(),\n          classNames?.root ?? menuRoot(),\n        ),\n        item: classNames?.item ?? menuItem(),\n        itemLabel: classNames?.itemLabel ?? menuItemLabel(),\n        itemSection: classNames?.itemSection ?? menuItemSection(),\n        divider: classNames?.divider ?? menuDivider(),\n      }}\n    >\n      <MantineMenu.Target>\n        <Button\n          classNames={{\n            button: classNames?.target?.button ?? menuTargetButton(),\n            root: classNames?.target?.root ?? menuTargetButtonRoot(),\n            inner: classNames?.target?.inner ?? menuTargetButtonInner(),\n            label: classNames?.target?.label ?? menuTargetButtonLabel(),\n            section: classNames?.target?.section ?? menuTargetButtonSection(),\n          }}\n          onClick={() => combobox.toggleDropdown()}\n          {...targetButtonProps}\n        >\n          {target}\n        </Button>\n      </MantineMenu.Target>\n\n      <MantineMenu.Dropdown>{children}</MantineMenu.Dropdown>\n    </MantineMenu>\n  );\n};\n\nconst MenuItem = ({ children }: { children: ReactNode }) => {\n  return <MantineMenu.Item component='div'>{children}</MantineMenu.Item>;\n};\n\nconst MenuDivider = () => {\n  return <MantineMenu.Divider />;\n};\n\nMenu.Item = MenuItem;\nMenuItem.displayName = 'Menu.Item';\nMenu.Divider = MenuDivider;\nMenuDivider.displayName = 'Menu.Divider';\n"],"mappings":"+dA+DA,MAAaA,GAAQ,CACnB,SACA,WACA,eACA,SACA,iBACA,WACA,QACA,cACA,SACA,aACA,uBACe,CACf,IAAM,EAAW,EAAY,CAC3B,oBAAuB,EAAS,qBAAqB,CACtD,CAAC,CAEF,OACE,EAACC,EAAAA,CACC,OAAQ,GAAU,EACJ,eACN,SACR,SAAU,EACA,WACH,QACM,cACb,WAAY,CACV,SAAU,EACR,GAAY,MAAQ,GAAM,CAC1B,GAAY,MAAQ,GAAU,CAC/B,CACD,KAAM,GAAY,MAAQ,GAAU,CACpC,UAAW,GAAY,WAAa,GAAe,CACnD,YAAa,GAAY,aAAe,GAAiB,CACzD,QAAS,GAAY,SAAW,GAAa,CAC9C,WAED,EAACA,EAAY,OAAA,CAAA,SACX,EAACC,EAAAA,CACC,WAAY,CACV,OAAQ,GAAY,QAAQ,QAAU,GAAkB,CACxD,KAAM,GAAY,QAAQ,MAAQ,GAAsB,CACxD,MAAO,GAAY,QAAQ,OAAS,GAAuB,CAC3D,MAAO,GAAY,QAAQ,OAAS,GAAuB,CAC3D,QAAS,GAAY,QAAQ,SAAW,GAAyB,CAClE,CACD,YAAe,EAAS,gBAAgB,CACxC,GAAI,WAEH,GACM,CAAA,CACU,CAErB,EAACD,EAAY,SAAA,CAAU,WAAA,CAAgC,CAAA,EAC3C,EAIZ,GAAY,CAAE,cACX,EAACA,EAAY,KAAA,CAAK,UAAU,MAAO,YAA4B,CAGlE,MACG,EAACA,EAAY,QAAA,EAAA,CAAU,CAGhC,EAAK,KAAO,EACZ,EAAS,YAAc,YACvB,EAAK,QAAU,EACf,EAAY,YAAc"}

package/dist/components/navigations/sidebars/sidebar/Sidebar.d.mts

@@ -1,29 +1,33 @@
 import { NavItemProps } from "./SidebarNavItem.mjs";
-import { LinkType } from "./SidebarNavItemLink.mjs";
-import * as react_jsx_runtime59 from "react/jsx-runtime";
+import { NavItemButtonProps } from "./SidebarNavItemButton.mjs";
+import { LinkType, NavItemLinkProps } from "./SidebarNavItemLink.mjs";
+import { SubnavProps } from "./SidebarSubnav.mjs";
+import * as react_jsx_runtime60 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/components/navigations/sidebars/sidebar/Sidebar.d.ts
-type ItemType = {
-  text: string;
-  icon?: string;
-  link?: string;
-  subNav?: ItemType[];
-};
 type NavType = {
   list?: string;
   item?: string;
   link?: LinkType;
   root?: string;
+  scrollArea?: string;
 };
 type SidebarProps = {
   area?: string;
   classNames?: {
     sidebar?: string;
     root?: string;
+    topSlot?: string;
+    bottomSlot?: string;
     nav?: NavType;
   };
   isCollapsed: boolean;
+  expandedItems?: string[];
+  defaultExpandedItems?: string[];
+  onExpandedItemsChange?: (expandedItems: string[]) => void;
+  topSlot?: ReactNode;
+  bottomSlot?: ReactNode;
   children?: ReactNode;
 };
 declare const Sidebar: {
@@ -31,6 +35,11 @@ declare const Sidebar: {
     area,
     classNames,
     isCollapsed,
+    expandedItems,
+    defaultExpandedItems,
+    onExpandedItemsChange,
+    topSlot,
+    bottomSlot,
     children
   }: SidebarProps): ReactNode;
   displayName: string;
@@ -38,8 +47,9 @@ declare const Sidebar: {
     ({
       classNames,
       isVisible,
+      isSubnav,
       children
-    }: NavItemProps): react_jsx_runtime59.JSX.Element | null;
+    }: NavItemProps): react_jsx_runtime60.JSX.Element | null;
     displayName: string;
   };
   Group: {
@@ -54,14 +64,94 @@ declare const Sidebar: {
       classNames?: {
         nav?: {
           group?: string;
-          groupLabel?: string;
+          groupTitle?: string;
         };
       };
       isVisible?: boolean;
-    }): react_jsx_runtime59.JSX.Element | null;
+    }): react_jsx_runtime60.JSX.Element | null;
+    displayName: string;
+  };
+  NavList: {
+    ({
+      classNames,
+      children
+    }: {
+      classNames?: {
+        nav?: {
+          list?: string;
+        };
+      };
+      children?: ReactNode;
+    }): react_jsx_runtime60.JSX.Element;
+    displayName: string;
+  };
+  NavItem: {
+    ({
+      classNames,
+      isVisible,
+      isSubnav,
+      children
+    }: NavItemProps): react_jsx_runtime60.JSX.Element | null;
+    displayName: string;
+  };
+  NavGroup: {
+    ({
+      title,
+      isVisible,
+      children,
+      classNames
+    }: {
+      title?: string;
+      children?: React.ReactNode;
+      classNames?: {
+        nav?: {
+          group?: string;
+          groupTitle?: string;
+        };
+      };
+      isVisible?: boolean;
+    }): react_jsx_runtime60.JSX.Element | null;
+    displayName: string;
+  };
+  NavItemButton: {
+    ({
+      id,
+      children,
+      startSlot,
+      endSlot,
+      subnav,
+      collapsedSubnav,
+      onClick,
+      classNames,
+      isVisible,
+      tooltipLabel
+    }: NavItemButtonProps): react_jsx_runtime60.JSX.Element | null;
+    displayName: string;
+  };
+  NavItemLink: {
+    ({
+      children,
+      startSlot,
+      endSlot,
+      classNames,
+      tooltipLabel,
+      withTooltip,
+      isSelected,
+      isExpanded,
+      isVisible,
+      isSubnav
+    }: NavItemLinkProps): react_jsx_runtime60.JSX.Element | null;
+    displayName: string;
+  };
+  Subnav: {
+    ({
+      classNames,
+      isVisible,
+      children
+    }: SubnavProps): react_jsx_runtime60.JSX.Element | null;
     displayName: string;
   };
 };
 //#endregion
-export { ItemType, NavType, Sidebar, SidebarProps };
+export { NavType, Sidebar, SidebarProps };
 //# sourceMappingURL=Sidebar.d.mts.map

package/dist/components/navigations/sidebars/sidebar/Sidebar.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.d.mts","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/Sidebar.tsx"],"mappings":";;;;;;KAcY,QAAA;EACV,IAAA;EACA,IAAA;EACA,IAAA;EACA,MAAA,GAAS,QAAA;AAAA;AAAA,KAGC,OAAA;EACV,IAAA;EACA,IAAA;EACA,IAAA,GAAO,QAAA;EACP,IAAA;AAAA;AAAA,KAGU,YAAA;EACV,IAAA;EACA,UAAA;IACE,OAAA;IACA,IAAA;IACA,GAAA,GAAM,OAAA;EAAA;EAER,WAAA;EACA,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,OAAA;EAAA;;;;;KAKV,YAAA,GAAe,SAAA"}
+{"version":3,"file":"Sidebar.d.mts","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/Sidebar.tsx"],"mappings":";;;;;;;;KAuBY,OAAA;EACV,IAAA;EACA,IAAA;EACA,IAAA,GAAO,QAAA;EACP,IAAA;EACA,UAAA;AAAA;AAAA,KAGU,YAAA;EACV,IAAA;EACA,UAAA;IACE,OAAA;IACA,IAAA;IACA,OAAA;IACA,UAAA;IACA,GAAA,GAAM,OAAA;EAAA;EAER,WAAA;EACA,aAAA;EACA,oBAAA;EACA,qBAAA,IAAyB,aAAA;EACzB,OAAA,GAAU,SAAA;EACV,UAAA,GAAa,SAAA;EACb,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,OAAA;EAAA;;;;;;;;;;KAUV,YAAA,GAAe,SAAA"}

package/dist/components/navigations/sidebars/sidebar/Sidebar.mjs

@@ -1,2 +1,2 @@
-import{NavList as e}from"./SidebarNavList.mjs";import{NavGroup as t}from"./SidebarNavGroup.mjs";import{NavItem as n}from"./SidebarNavItem.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{sidebar as i,sidebarNavRoot as a,sidebarRoot as o}from"@mage-ui/styled-system/recipes";import{jsx as s}from"react/jsx-runtime";const c=({area:t=`sidebar`,classNames:n,isCollapsed:c,children:l})=>{let u=t===`sidebar`?void 0:{"--sidebar-grid-area":t};return s(`div`,{"data-collapsed":c||!1,className:r(n?.sidebar??i(),n?.root??o(),`group`),style:u,children:s(`nav`,{className:n?.nav?.root??a(),children:s(e,{classNames:n,children:l})})})};c.displayName=`Sidebar`,c.Item=n,c.Group=t;export{c as Sidebar};
+import{ScrollAreaAutosize as e}from"../../../misc/scroll-area-autosize/ScrollAreaAutosize.mjs";import{SidebarProvider as t}from"./SidebarContext.mjs";import{NavList as n}from"./SidebarNavList.mjs";import{NavGroup as r}from"./SidebarNavGroup.mjs";import{NavItem as i}from"./SidebarNavItem.mjs";import{NavItemButton as a}from"./SidebarNavItemButton.mjs";import{NavItemLink as o}from"./SidebarNavItemLink.mjs";import{Subnav as s}from"./SidebarSubnav.mjs";import{cx as c}from"@mage-ui/styled-system/css";import{sidebar as l,sidebarBottomSlot as u,sidebarNavRoot as d,sidebarRoot as f,sidebarScrollAreaAutosize as p,sidebarTopSlot as m}from"@mage-ui/styled-system/recipes";import{jsx as h,jsxs as g}from"react/jsx-runtime";import{useEffect as _,useMemo as v,useRef as y,useState as b}from"react";const x=({area:r=`sidebar`,classNames:i,isCollapsed:a=!1,expandedItems:o,defaultExpandedItems:s=[],onExpandedItemsChange:x,topSlot:S,bottomSlot:C,children:w})=>{let[T,E]=b(s),D=y(!1),O=o??T,k=e=>{o===void 0&&E(e),x?.(e)};_(()=>{!D.current&&a&&k([]),D.current=a},[a,k]);let A=e=>{let t=O.includes(e);if(a){k(t?[]:[e]);return}k(t?O.filter(t=>t!==e):[...O,e])},j=(e,t)=>{if(t!==O.includes(e)){if(a){k(t?[e]:[]);return}k(t?[...O,e]:O.filter(t=>t!==e))}},M=v(()=>({isCollapsed:a,expandedItems:O,toggleItem:A,setItemExpanded:j,isItemExpanded:e=>O.includes(e)}),[O,a,j,A]),N=r===`sidebar`?void 0:{"--sidebar-grid-area":r};return h(t,{value:M,children:g(`div`,{"data-collapsed":a?`true`:`false`,className:c(i?.sidebar??l(),i?.root??f(),`group`),style:N,children:[S?h(`div`,{className:i?.topSlot??m(),children:S}):null,h(`nav`,{className:i?.nav?.root??d(),children:h(e,{mah:`100%`,scrollbars:`y`,classNames:{scrollArea:i?.nav?.scrollArea??p()},children:h(n,{classNames:i,children:w})})}),C?h(`div`,{className:i?.bottomSlot??u(),children:C}):null]})})};x.displayName=`Sidebar`,x.Item=i,x.Group=r,x.NavList=n,x.NavItem=i,x.NavGroup=r,x.NavItemButton=a,x.NavItemLink=o,x.Subnav=s;export{x as Sidebar};
 //# sourceMappingURL=Sidebar.mjs.map

package/dist/components/navigations/sidebars/sidebar/Sidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.mjs","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/Sidebar.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  sidebar,\n  sidebarNavRoot,\n  sidebarRoot,\n} from '@mage-ui/styled-system/recipes';\n\nimport { NavGroup } from './SidebarNavGroup';\nimport { NavItem } from './SidebarNavItem';\nimport type { LinkType } from './SidebarNavItemLink';\nimport { NavList } from './SidebarNavList';\n\nexport type ItemType = {\n  text: string;\n  icon?: string;\n  link?: string;\n  subNav?: ItemType[];\n};\n\nexport type NavType = {\n  list?: string;\n  item?: string;\n  link?: LinkType;\n  root?: string;\n};\n\nexport type SidebarProps = {\n  area?: string;\n  classNames?: {\n    sidebar?: string;\n    root?: string;\n    nav?: NavType;\n  };\n  isCollapsed: boolean;\n  children?: ReactNode;\n};\n\nexport const Sidebar = ({\n  area = 'sidebar',\n  classNames,\n  isCollapsed,\n  children,\n}: SidebarProps): ReactNode => {\n  const style =\n    area !== 'sidebar' ? { '--sidebar-grid-area': area } : undefined;\n\n  return (\n    <div\n      data-collapsed={isCollapsed || false}\n      className={cx(\n        classNames?.sidebar ?? sidebar(),\n        classNames?.root ?? sidebarRoot(),\n        'group',\n      )}\n      style={style as CSSProperties}\n    >\n      <nav className={classNames?.nav?.root ?? sidebarNavRoot()}>\n        <NavList classNames={classNames}>{children}</NavList>\n      </nav>\n    </div>\n  );\n};\n\nSidebar.displayName = 'Sidebar';\nSidebar.Item = NavItem;\nSidebar.Group = NavGroup;\n"],"mappings":"qUAuCA,MAAa,GAAW,CACtB,OAAO,UACP,aACA,cACA,cAC6B,CAC7B,IAAM,EACJ,IAAS,UAA8C,IAAA,GAAlC,CAAE,sBAAuB,EAAM,CAEtD,OACE,EAAC,MAAA,CACC,iBAAgB,GAAe,GAC/B,UAAW,EACT,GAAY,SAAW,GAAS,CAChC,GAAY,MAAQ,GAAa,CACjC,QACD,CACM,iBAEP,EAAC,MAAA,CAAI,UAAW,GAAY,KAAK,MAAQ,GAAgB,UACvD,EAAC,EAAA,CAAoB,aAAa,YAAmB,EACjD,EACF,EAIV,EAAQ,YAAc,UACtB,EAAQ,KAAO,EACf,EAAQ,MAAQ"}
+{"version":3,"file":"Sidebar.mjs","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/Sidebar.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  sidebar,\n  sidebarBottomSlot,\n  sidebarNavRoot,\n  sidebarRoot,\n  sidebarScrollAreaAutosize,\n  sidebarTopSlot,\n} from '@mage-ui/styled-system/recipes';\n\nimport { ScrollAreaAutosize } from '../../../misc';\nimport { SidebarProvider } from './SidebarContext';\nimport { NavGroup } from './SidebarNavGroup';\nimport { NavItem } from './SidebarNavItem';\nimport { NavItemButton } from './SidebarNavItemButton';\nimport type { LinkType } from './SidebarNavItemLink';\nimport { NavItemLink } from './SidebarNavItemLink';\nimport { NavList } from './SidebarNavList';\nimport { Subnav } from './SidebarSubnav';\n\nexport type NavType = {\n  list?: string;\n  item?: string;\n  link?: LinkType;\n  root?: string;\n  scrollArea?: string;\n};\n\nexport type SidebarProps = {\n  area?: string;\n  classNames?: {\n    sidebar?: string;\n    root?: string;\n    topSlot?: string;\n    bottomSlot?: string;\n    nav?: NavType;\n  };\n  isCollapsed: boolean;\n  expandedItems?: string[];\n  defaultExpandedItems?: string[];\n  onExpandedItemsChange?: (expandedItems: string[]) => void;\n  topSlot?: ReactNode;\n  bottomSlot?: ReactNode;\n  children?: ReactNode;\n};\n\nexport const Sidebar = ({\n  area = 'sidebar',\n  classNames,\n  isCollapsed = false,\n  expandedItems,\n  defaultExpandedItems = [],\n  onExpandedItemsChange,\n  topSlot,\n  bottomSlot,\n  children,\n}: SidebarProps): ReactNode => {\n  const [uncontrolledExpandedItems, setUncontrolledExpandedItems] =\n    useState<string[]>(defaultExpandedItems);\n  const wasCollapsedRef = useRef(false);\n\n  const currentExpandedItems = expandedItems ?? uncontrolledExpandedItems;\n\n  const setExpandedItems = (nextExpandedItems: string[]) => {\n    if (expandedItems === undefined) {\n      setUncontrolledExpandedItems(nextExpandedItems);\n    }\n\n    onExpandedItemsChange?.(nextExpandedItems);\n  };\n\n  useEffect(() => {\n    // Normalize state on collapse so expanded desktop subnavs do not remain\n    // visible as flyouts.\n    if (!wasCollapsedRef.current && isCollapsed) {\n      setExpandedItems([]);\n    }\n\n    wasCollapsedRef.current = isCollapsed;\n  }, [isCollapsed, setExpandedItems]);\n\n  const toggleItem = (itemId: string) => {\n    const isExpanded = currentExpandedItems.includes(itemId);\n\n    if (isCollapsed) {\n      setExpandedItems(isExpanded ? [] : [itemId]);\n      return;\n    }\n\n    setExpandedItems(\n      isExpanded\n        ? currentExpandedItems.filter((id) => id !== itemId)\n        : [...currentExpandedItems, itemId],\n    );\n  };\n\n  const setItemExpanded = (itemId: string, isExpanded: boolean) => {\n    const alreadyExpanded = currentExpandedItems.includes(itemId);\n\n    if (isExpanded === alreadyExpanded) {\n      return;\n    }\n\n    if (isCollapsed) {\n      setExpandedItems(isExpanded ? [itemId] : []);\n      return;\n    }\n\n    setExpandedItems(\n      isExpanded\n        ? [...currentExpandedItems, itemId]\n        : currentExpandedItems.filter((id) => id !== itemId),\n    );\n  };\n\n  const contextValue = useMemo(\n    () => ({\n      isCollapsed,\n      expandedItems: currentExpandedItems,\n      toggleItem,\n      setItemExpanded,\n      isItemExpanded: (itemId: string) => currentExpandedItems.includes(itemId),\n    }),\n    [currentExpandedItems, isCollapsed, setItemExpanded, toggleItem],\n  );\n\n  const style =\n    area !== 'sidebar' ? { '--sidebar-grid-area': area } : undefined;\n\n  return (\n    <SidebarProvider value={contextValue}>\n      <div\n        data-collapsed={isCollapsed ? 'true' : 'false'}\n        className={cx(\n          classNames?.sidebar ?? sidebar(),\n          classNames?.root ?? sidebarRoot(),\n          'group',\n        )}\n        style={style as CSSProperties}\n      >\n        {topSlot ? (\n          <div className={classNames?.topSlot ?? sidebarTopSlot()}>\n            {topSlot}\n          </div>\n        ) : null}\n\n        <nav className={classNames?.nav?.root ?? sidebarNavRoot()}>\n          <ScrollAreaAutosize\n            mah='100%'\n            scrollbars='y'\n            classNames={{\n              scrollArea:\n                classNames?.nav?.scrollArea ?? sidebarScrollAreaAutosize(),\n            }}\n          >\n            <NavList classNames={classNames}>{children}</NavList>\n          </ScrollAreaAutosize>\n        </nav>\n\n        {bottomSlot ? (\n          <div className={classNames?.bottomSlot ?? sidebarBottomSlot()}>\n            {bottomSlot}\n          </div>\n        ) : null}\n      </div>\n    </SidebarProvider>\n  );\n};\n\nSidebar.displayName = 'Sidebar';\nSidebar.Item = NavItem;\nSidebar.Group = NavGroup;\nSidebar.NavList = NavList;\nSidebar.NavItem = NavItem;\nSidebar.NavGroup = NavGroup;\nSidebar.NavItemButton = NavItemButton;\nSidebar.NavItemLink = NavItemLink;\nSidebar.Subnav = Subnav;\n"],"mappings":"uxBAiDA,MAAa,GAAW,CACtB,OAAO,UACP,aACA,cAAc,GACd,gBACA,uBAAuB,EAAE,CACzB,wBACA,UACA,aACA,cAC6B,CAC7B,GAAM,CAAC,EAA2B,GAChC,EAAmB,EAAqB,CACpC,EAAkB,EAAO,GAAM,CAE/B,EAAuB,GAAiB,EAExC,EAAoB,GAAgC,CACpD,IAAkB,IAAA,IACpB,EAA6B,EAAkB,CAGjD,IAAwB,EAAkB,EAG5C,MAAgB,CAGV,CAAC,EAAgB,SAAW,GAC9B,EAAiB,EAAE,CAAC,CAGtB,EAAgB,QAAU,GACzB,CAAC,EAAa,EAAiB,CAAC,CAEnC,IAAM,EAAc,GAAmB,CACrC,IAAM,EAAa,EAAqB,SAAS,EAAO,CAExD,GAAI,EAAa,CACf,EAAiB,EAAa,EAAE,CAAG,CAAC,EAAO,CAAC,CAC5C,OAGF,EACE,EACI,EAAqB,OAAQ,GAAO,IAAO,EAAO,CAClD,CAAC,GAAG,EAAsB,EAAO,CACtC,EAGG,GAAmB,EAAgB,IAAwB,CAG3D,OAFoB,EAAqB,SAAS,EAAO,CAM7D,IAAI,EAAa,CACf,EAAiB,EAAa,CAAC,EAAO,CAAG,EAAE,CAAC,CAC5C,OAGF,EACE,EACI,CAAC,GAAG,EAAsB,EAAO,CACjC,EAAqB,OAAQ,GAAO,IAAO,EAAO,CACvD,GAGG,EAAe,OACZ,CACL,cACA,cAAe,EACf,aACA,kBACA,eAAiB,GAAmB,EAAqB,SAAS,EAAO,CAC1E,EACD,CAAC,EAAsB,EAAa,EAAiB,EAAW,CACjE,CAEK,EACJ,IAAS,UAA8C,IAAA,GAAlC,CAAE,sBAAuB,EAAM,CAEtD,OACE,EAAC,EAAA,CAAgB,MAAO,WACtB,EAAC,MAAA,CACC,iBAAgB,EAAc,OAAS,QACvC,UAAW,EACT,GAAY,SAAW,GAAS,CAChC,GAAY,MAAQ,GAAa,CACjC,QACD,CACM,kBAEN,EACC,EAAC,MAAA,CAAI,UAAW,GAAY,SAAW,GAAgB,UACpD,GACG,CACJ,KAEJ,EAAC,MAAA,CAAI,UAAW,GAAY,KAAK,MAAQ,GAAgB,UACvD,EAAC,EAAA,CACC,IAAI,OACJ,WAAW,IACX,WAAY,CACV,WACE,GAAY,KAAK,YAAc,GAA2B,CAC7D,UAED,EAAC,EAAA,CAAoB,aAAa,YAAmB,EAClC,EACjB,CAEL,EACC,EAAC,MAAA,CAAI,UAAW,GAAY,YAAc,GAAmB,UAC1D,GACG,CACJ,OACA,EACU,EAItB,EAAQ,YAAc,UACtB,EAAQ,KAAO,EACf,EAAQ,MAAQ,EAChB,EAAQ,QAAU,EAClB,EAAQ,QAAU,EAClB,EAAQ,SAAW,EACnB,EAAQ,cAAgB,EACxB,EAAQ,YAAc,EACtB,EAAQ,OAAS"}

package/dist/components/navigations/sidebars/sidebar/SidebarContext.mjs

@@ -0,0 +1,2 @@
+import{createContext as e,useContext as t}from"react";const n=e(null),r=n.Provider,i=()=>{let e=t(n);if(!e)throw Error(`Sidebar compound components must be used within <Sidebar>.`);return e};export{r as SidebarProvider,i as useSidebarContext};
+//# sourceMappingURL=SidebarContext.mjs.map

package/dist/components/navigations/sidebars/sidebar/SidebarContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarContext.mjs","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/SidebarContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\ntype SidebarContextValue = {\n  isCollapsed: boolean;\n  expandedItems: string[];\n  toggleItem: (itemId: string) => void;\n  setItemExpanded: (itemId: string, isExpanded: boolean) => void;\n  isItemExpanded: (itemId: string) => boolean;\n};\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\nexport const SidebarProvider = SidebarContext.Provider;\n\nexport const useSidebarContext = (): SidebarContextValue => {\n  const context = useContext(SidebarContext);\n\n  if (!context) {\n    throw new Error(\n      'Sidebar compound components must be used within <Sidebar>.',\n    );\n  }\n\n  return context;\n};\n"],"mappings":"sDAUA,MAAM,EAAiB,EAA0C,KAAK,CAEzD,EAAkB,EAAe,SAEjC,MAA+C,CAC1D,IAAM,EAAU,EAAW,EAAe,CAE1C,GAAI,CAAC,EACH,MAAU,MACR,6DACD,CAGH,OAAO"}

package/dist/components/navigations/sidebars/sidebar/SidebarNavGroup.mjs

@@ -1,2 +1,2 @@
-import{NavList as e}from"./SidebarNavList.mjs";import{jsx as t,jsxs as n}from"react/jsx-runtime";const r=({title:r,isVisible:i=!0,children:a,classNames:o})=>i?n(`li`,{className:o?.nav?.group,children:[r&&t(`span`,{className:o?.nav?.groupLabel,children:r}),t(e,{children:a})]}):null;r.displayName=`Sidebar.NavGroup`;export{r as NavGroup};
+import{NavList as e}from"./SidebarNavList.mjs";import{sidebarNavGroup as t,sidebarNavGroupTitle as n}from"@mage-ui/styled-system/recipes";import{jsx as r,jsxs as i}from"react/jsx-runtime";const a=({title:a,isVisible:o=!0,children:s,classNames:c})=>o?i(`li`,{className:c?.nav?.group??t(),children:[a?r(`p`,{className:c?.nav?.groupTitle??n(),children:a}):null,r(e,{children:s})]}):null;a.displayName=`Sidebar.NavGroup`;export{a as NavGroup};
 //# sourceMappingURL=SidebarNavGroup.mjs.map

package/dist/components/navigations/sidebars/sidebar/SidebarNavGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarNavGroup.mjs","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/SidebarNavGroup.tsx"],"sourcesContent":["import { NavList } from './SidebarNavList';\n\ntype NavGroupProps = {\n  title?: string;\n  children?: React.ReactNode;\n  classNames?: {\n    nav?: {\n      group?: string;\n      groupLabel?: string;\n    };\n  };\n  isVisible?: boolean;\n};\n\nexport const NavGroup = ({\n  title,\n  isVisible = true,\n  children,\n  classNames,\n}: NavGroupProps) => {\n  if (!isVisible) {\n    return null;\n  }\n  return (\n    <li className={classNames?.nav?.group}>\n      {title && <span className={classNames?.nav?.groupLabel}>{title}</span>}\n      <NavList>{children}</NavList>\n    </li>\n  );\n};\n\nNavGroup.displayName = 'Sidebar.NavGroup';\n"],"mappings":"iGAcA,MAAa,GAAY,CACvB,QACA,YAAY,GACZ,WACA,gBAEK,EAIH,EAAC,KAAA,CAAG,UAAW,GAAY,KAAK,gBAC7B,GAAS,EAAC,OAAA,CAAK,UAAW,GAAY,KAAK,oBAAa,GAAa,CACtE,EAAC,EAAA,CAAS,WAAA,CAAmB,CAAA,EAC1B,CANE,KAUX,EAAS,YAAc"}
+{"version":3,"file":"SidebarNavGroup.mjs","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/SidebarNavGroup.tsx"],"sourcesContent":["import {\n  sidebarNavGroup,\n  sidebarNavGroupTitle,\n} from '@mage-ui/styled-system/recipes';\n\nimport { NavList } from './SidebarNavList';\n\ntype NavGroupProps = {\n  title?: string;\n  children?: React.ReactNode;\n  classNames?: {\n    nav?: {\n      group?: string;\n      groupTitle?: string;\n    };\n  };\n  isVisible?: boolean;\n};\n\nexport const NavGroup = ({\n  title,\n  isVisible = true,\n  children,\n  classNames,\n}: NavGroupProps) => {\n  if (!isVisible) {\n    return null;\n  }\n  return (\n    <li className={classNames?.nav?.group ?? sidebarNavGroup()}>\n      {title ? (\n        <p className={classNames?.nav?.groupTitle ?? sidebarNavGroupTitle()}>\n          {title}\n        </p>\n      ) : null}\n      <NavList>{children}</NavList>\n    </li>\n  );\n};\n\nNavGroup.displayName = 'Sidebar.NavGroup';\n"],"mappings":"4LAmBA,MAAa,GAAY,CACvB,QACA,YAAY,GACZ,WACA,gBAEK,EAIH,EAAC,KAAA,CAAG,UAAW,GAAY,KAAK,OAAS,GAAiB,WACvD,EACC,EAAC,IAAA,CAAE,UAAW,GAAY,KAAK,YAAc,GAAsB,UAChE,GACC,CACF,KACJ,EAAC,EAAA,CAAS,WAAA,CAAmB,CAAA,EAC1B,CAVE,KAcX,EAAS,YAAc"}

package/dist/components/navigations/sidebars/sidebar/SidebarNavItem.d.mts

@@ -7,9 +7,13 @@ type NavItemProps = {
     nav?: {
       item?: string;
     };
+    subnav?: {
+      item?: string;
+    };
   };
   children?: React.ReactNode;
   isVisible?: boolean;
+  isSubnav?: boolean;
 };
 //#endregion
 export { NavItemProps };

package/dist/components/navigations/sidebars/sidebar/SidebarNavItem.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarNavItem.d.mts","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/SidebarNavItem.tsx"],"mappings":";;;;KAKY,YAAA;EACV,UAAA;IACE,GAAA;MACE,IAAA;IAAA;EAAA;EAGJ,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,SAAA;AAAA"}
+{"version":3,"file":"SidebarNavItem.d.mts","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/SidebarNavItem.tsx"],"mappings":";;;;KAQY,YAAA;EACV,UAAA;IACE,GAAA;MACE,IAAA;IAAA;IAEF,MAAA;MACE,IAAA;IAAA;EAAA;EAGJ,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,SAAA;EACA,QAAA;AAAA"}

package/dist/components/navigations/sidebars/sidebar/SidebarNavItem.mjs

@@ -1,2 +1,2 @@
-import{cx as e}from"@mage-ui/styled-system/css";import{sidebarNavItem as t}from"@mage-ui/styled-system/recipes";import{jsx as n}from"react/jsx-runtime";const r=({classNames:r,isVisible:i=!0,children:a})=>i?n(`li`,{className:e(r?.nav?.item??t()),children:a}):null;r.displayName=`Sidebar.NavItem`;export{r as NavItem};
+import{cx as e}from"@mage-ui/styled-system/css";import{sidebarNavItem as t,sidebarSubnavItem as n}from"@mage-ui/styled-system/recipes";import{jsx as r}from"react/jsx-runtime";const i=({classNames:i,isVisible:a=!0,isSubnav:o=!1,children:s})=>a?r(`li`,{className:e(o?i?.subnav?.item??n():i?.nav?.item??t()),children:s}):null;i.displayName=`Sidebar.NavItem`;export{i as NavItem};
 //# sourceMappingURL=SidebarNavItem.mjs.map

package/dist/components/navigations/sidebars/sidebar/SidebarNavItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarNavItem.mjs","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/SidebarNavItem.tsx"],"sourcesContent":["import type React from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport { sidebarNavItem } from '@mage-ui/styled-system/recipes';\n\nexport type NavItemProps = {\n  classNames?: {\n    nav?: {\n      item?: string;\n    };\n  };\n  children?: React.ReactNode;\n  isVisible?: boolean;\n};\n\nexport const NavItem = ({\n  classNames,\n  isVisible = true,\n  children,\n}: NavItemProps) => {\n  if (!isVisible) {\n    return null;\n  }\n  return (\n    <li className={cx(classNames?.nav?.item ?? sidebarNavItem())}>\n      {children}\n    </li>\n  );\n};\n\nNavItem.displayName = 'Sidebar.NavItem';\n"],"mappings":"wJAeA,MAAa,GAAW,CACtB,aACA,YAAY,GACZ,cAEK,EAIH,EAAC,KAAA,CAAG,UAAW,EAAG,GAAY,KAAK,MAAQ,GAAgB,CAAC,CACzD,YACE,CALE,KASX,EAAQ,YAAc"}
+{"version":3,"file":"SidebarNavItem.mjs","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/SidebarNavItem.tsx"],"sourcesContent":["import type React from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  sidebarNavItem,\n  sidebarSubnavItem,\n} from '@mage-ui/styled-system/recipes';\n\nexport type NavItemProps = {\n  classNames?: {\n    nav?: {\n      item?: string;\n    };\n    subnav?: {\n      item?: string;\n    };\n  };\n  children?: React.ReactNode;\n  isVisible?: boolean;\n  isSubnav?: boolean;\n};\n\nexport const NavItem = ({\n  classNames,\n  isVisible = true,\n  isSubnav = false,\n  children,\n}: NavItemProps) => {\n  if (!isVisible) {\n    return null;\n  }\n\n  const itemClassName = isSubnav\n    ? (classNames?.subnav?.item ?? sidebarSubnavItem())\n    : (classNames?.nav?.item ?? sidebarNavItem());\n\n  return <li className={cx(itemClassName)}>{children}</li>;\n};\n\nNavItem.displayName = 'Sidebar.NavItem';\n"],"mappings":"+KAsBA,MAAa,GAAW,CACtB,aACA,YAAY,GACZ,WAAW,GACX,cAEK,EAQE,EAAC,KAAA,CAAG,UAAW,EAJA,EACjB,GAAY,QAAQ,MAAQ,GAAmB,CAC/C,GAAY,KAAK,MAAQ,GAAgB,CAEP,CAAG,YAAc,CAP/C,KAUX,EAAQ,YAAc"}