@pautena/react-design-system 1.0.1 → 2.0.0-alpha.0

package/README.md

@@ -27,12 +27,6 @@ npm:
 npm install @pautena/react-design-system @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/x-data-grid
 ```
 
-yarn:
-
-```bash
-yarn add @pautena/react-design-system @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/x-data-grid react-dom
-```
-
 Now you are going to be able to import the components and use it in your React project.
 
 ```javascript

package/dist/Drawerx/Drawer.types.d.ts

@@ -1,8 +1,8 @@
 import { DrawerProps as MuiDrawerProps } from '@mui/material/Drawer';
 import { Theme } from '@mui/material/styles';
 import { CSSProperties, FunctionComponent, PropsWithChildren, ReactElement } from 'react';
-import { BulletVariant } from '../Bullet';
-import { LabelVariant } from '../Label';
+import { BadgeVariant } from '../components/badge';
+import { BulletVariant } from '../components/bullet';
 import { DrawerAppBarProps } from './DrawerAppBar';
 /**
  * Drawer display variants
@@ -40,7 +40,7 @@ export interface DrawerItemLabel {
     /**
      * Label color variant
      */
-    variant: LabelVariant;
+    variant: BadgeVariant;
 }
 /**
  * Bullet indicator configuration for drawer items

package/dist/Drawerx/Drawer.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.types.mjs","sources":["../../src/Drawerx/Drawer.types.ts"],"sourcesContent":["import type { DrawerProps as MuiDrawerProps } from \"@mui/material/Drawer\";\nimport type { Theme } from \"@mui/material/styles\";\nimport type {\n  CSSProperties,\n  FunctionComponent,\n  PropsWithChildren,\n  ReactElement,\n} from \"react\";\nimport type { BulletVariant } from \"../Bullet\";\nimport type { LabelVariant } from \"../Label\";\nimport type { DrawerAppBarProps } from \"./DrawerAppBar\";\n\n/**\n * Drawer display variants\n */\nexport type DrawerVariant = \"temporary\" | \"mini\" | \"persistent\";\n\n/**\n * Drawer open/close states\n */\nexport type DrawerState = \"open\" | \"collapse\" | \"close\";\n\n/**\n * Drawer size variants\n */\nexport type DrawerSize = \"small\" | \"medium\";\n\n/**\n * Avatar configuration for drawer items\n */\nexport interface DrawerItemAvatar {\n  /**\n   * Avatar image source URL\n   */\n  src: string;\n  /**\n   * Alt text for the avatar image\n   */\n  alt: string;\n}\n\n/**\n * Label configuration for drawer items\n */\nexport interface DrawerItemLabel {\n  /**\n   * Label text content\n   */\n  text: string;\n  /**\n   * Label color variant\n   */\n  variant: LabelVariant;\n}\n\n/**\n * Bullet indicator configuration for drawer items\n */\nexport interface DrawerItemBullet {\n  /**\n   * Bullet color variant\n   */\n  variant: BulletVariant;\n}\n\n/**\n * Navigation link item in the drawer\n */\nexport interface DrawerNavigationLink {\n  /**\n   * Item type discriminator\n   */\n  kind: \"link\";\n  /**\n   * Unique identifier\n   */\n  id: string;\n  /**\n   * Display text\n   */\n  text: string;\n  /**\n   * Navigation URL\n   */\n  href: string;\n  /**\n   * Optional icon element\n   */\n  icon?: ReactElement;\n  /**\n   * Optional avatar configuration\n   */\n  avatar?: DrawerItemAvatar;\n  /**\n   * Optional label badge\n   */\n  label?: DrawerItemLabel;\n  /**\n   * Optional bullet indicator\n   */\n  bullet?: DrawerItemBullet;\n}\n\n/**\n * Collapsable navigation group with nested items\n */\nexport type DrawerNavigationCollapsable = Pick<\n  DrawerNavigationLink,\n  \"id\" | \"text\" | \"icon\"\n> & {\n  /**\n   * Item type discriminator\n   */\n  kind: \"collapsable\";\n  /**\n   * Nested navigation items\n   */\n  items: DrawerNavigationItem[];\n};\n\n/**\n * Section header in the drawer navigation\n */\nexport interface DrawerNavigationHeader {\n  /**\n   * Item type discriminator\n   */\n  kind: \"header\";\n  /**\n   * Unique identifier\n   */\n  id: string;\n  /**\n   * Header text\n   */\n  text: string;\n}\n\n/**\n * Union of all possible drawer navigation item types\n */\nexport type DrawerNavigationItem =\n  | DrawerNavigationLink\n  | DrawerNavigationCollapsable\n  | DrawerNavigationHeader;\n\n/**\n * Complete navigation structure for the drawer\n */\nexport type DrawerNavigation = DrawerNavigationItem[];\n\nexport interface DrawerContentProps {\n  /**\n   * Object with the content that has to be rendered\n   */\n  navigation: DrawerNavigation;\n}\n\n/**\n * DrawerContent component type\n */\nexport type DrawerContentComponent = FunctionComponent<DrawerContentProps>;\n\n/**\n * DrawerContent element type\n */\nexport type DrawerContentElement = ReactElement<\n  DrawerContentProps,\n  DrawerContentComponent\n>;\n\n/**\n * Props for the Drawer component\n *\n * @extends MuiDrawerProps\n */\nexport type DrawerProps = PropsWithChildren<MuiDrawerProps>;\n\n/**\n * Drawer component type\n */\nexport type DrawerComponent = FunctionComponent<DrawerProps>;\n\n/**\n * Drawer element type\n */\nexport type DrawerElement = ReactElement<DrawerProps, DrawerComponent>;\n\n/**\n * Returns color and font weight styles for drawer items based on selection state\n *\n * @param theme - MUI theme object\n * @param selected - Whether the item is selected\n */\nexport const getDrawerItemColors = (\n  theme: Theme,\n  selected: boolean | undefined,\n): {\n  color?: string;\n  fontWeight: CSSProperties[\"fontWeight\"];\n} => ({\n  color: selected ? theme.palette.primary.main : undefined,\n  fontWeight: selected\n    ? theme.typography.fontWeightBold\n    : theme.typography.fontWeightMedium,\n});\n\n/**\n * DrawerAppBar component type\n */\nexport type DrawerAppBarComponent = FunctionComponent<DrawerAppBarProps>;\n\n/**\n * DrawerAppBar element type\n */\nexport type DrawerAppBarElement = ReactElement<\n  DrawerAppBarProps,\n  DrawerAppBarComponent\n>;\n"],"names":["getDrawerItemColors","theme","selected"],"mappings":"AAkMO,MAAMA,IAAsB,CACjCC,GACAC,OAII;AAAA,EACJ,OAAOA,IAAWD,EAAM,QAAQ,QAAQ,OAAO;AAAA,EAC/C,YAAYC,IACRD,EAAM,WAAW,iBACjBA,EAAM,WAAW;AACvB;"}
+{"version":3,"file":"Drawer.types.mjs","sources":["../../src/Drawerx/Drawer.types.ts"],"sourcesContent":["import type { DrawerProps as MuiDrawerProps } from \"@mui/material/Drawer\";\nimport type { Theme } from \"@mui/material/styles\";\nimport type {\n  CSSProperties,\n  FunctionComponent,\n  PropsWithChildren,\n  ReactElement,\n} from \"react\";\nimport type { BadgeVariant } from \"../components/badge\";\nimport type { BulletVariant } from \"../components/bullet\";\nimport type { DrawerAppBarProps } from \"./DrawerAppBar\";\n\n/**\n * Drawer display variants\n */\nexport type DrawerVariant = \"temporary\" | \"mini\" | \"persistent\";\n\n/**\n * Drawer open/close states\n */\nexport type DrawerState = \"open\" | \"collapse\" | \"close\";\n\n/**\n * Drawer size variants\n */\nexport type DrawerSize = \"small\" | \"medium\";\n\n/**\n * Avatar configuration for drawer items\n */\nexport interface DrawerItemAvatar {\n  /**\n   * Avatar image source URL\n   */\n  src: string;\n  /**\n   * Alt text for the avatar image\n   */\n  alt: string;\n}\n\n/**\n * Label configuration for drawer items\n */\nexport interface DrawerItemLabel {\n  /**\n   * Label text content\n   */\n  text: string;\n  /**\n   * Label color variant\n   */\n  variant: BadgeVariant;\n}\n\n/**\n * Bullet indicator configuration for drawer items\n */\nexport interface DrawerItemBullet {\n  /**\n   * Bullet color variant\n   */\n  variant: BulletVariant;\n}\n\n/**\n * Navigation link item in the drawer\n */\nexport interface DrawerNavigationLink {\n  /**\n   * Item type discriminator\n   */\n  kind: \"link\";\n  /**\n   * Unique identifier\n   */\n  id: string;\n  /**\n   * Display text\n   */\n  text: string;\n  /**\n   * Navigation URL\n   */\n  href: string;\n  /**\n   * Optional icon element\n   */\n  icon?: ReactElement;\n  /**\n   * Optional avatar configuration\n   */\n  avatar?: DrawerItemAvatar;\n  /**\n   * Optional label badge\n   */\n  label?: DrawerItemLabel;\n  /**\n   * Optional bullet indicator\n   */\n  bullet?: DrawerItemBullet;\n}\n\n/**\n * Collapsable navigation group with nested items\n */\nexport type DrawerNavigationCollapsable = Pick<\n  DrawerNavigationLink,\n  \"id\" | \"text\" | \"icon\"\n> & {\n  /**\n   * Item type discriminator\n   */\n  kind: \"collapsable\";\n  /**\n   * Nested navigation items\n   */\n  items: DrawerNavigationItem[];\n};\n\n/**\n * Section header in the drawer navigation\n */\nexport interface DrawerNavigationHeader {\n  /**\n   * Item type discriminator\n   */\n  kind: \"header\";\n  /**\n   * Unique identifier\n   */\n  id: string;\n  /**\n   * Header text\n   */\n  text: string;\n}\n\n/**\n * Union of all possible drawer navigation item types\n */\nexport type DrawerNavigationItem =\n  | DrawerNavigationLink\n  | DrawerNavigationCollapsable\n  | DrawerNavigationHeader;\n\n/**\n * Complete navigation structure for the drawer\n */\nexport type DrawerNavigation = DrawerNavigationItem[];\n\nexport interface DrawerContentProps {\n  /**\n   * Object with the content that has to be rendered\n   */\n  navigation: DrawerNavigation;\n}\n\n/**\n * DrawerContent component type\n */\nexport type DrawerContentComponent = FunctionComponent<DrawerContentProps>;\n\n/**\n * DrawerContent element type\n */\nexport type DrawerContentElement = ReactElement<\n  DrawerContentProps,\n  DrawerContentComponent\n>;\n\n/**\n * Props for the Drawer component\n *\n * @extends MuiDrawerProps\n */\nexport type DrawerProps = PropsWithChildren<MuiDrawerProps>;\n\n/**\n * Drawer component type\n */\nexport type DrawerComponent = FunctionComponent<DrawerProps>;\n\n/**\n * Drawer element type\n */\nexport type DrawerElement = ReactElement<DrawerProps, DrawerComponent>;\n\n/**\n * Returns color and font weight styles for drawer items based on selection state\n *\n * @param theme - MUI theme object\n * @param selected - Whether the item is selected\n */\nexport const getDrawerItemColors = (\n  theme: Theme,\n  selected: boolean | undefined,\n): {\n  color?: string;\n  fontWeight: CSSProperties[\"fontWeight\"];\n} => ({\n  color: selected ? theme.palette.primary.main : undefined,\n  fontWeight: selected\n    ? theme.typography.fontWeightBold\n    : theme.typography.fontWeightMedium,\n});\n\n/**\n * DrawerAppBar component type\n */\nexport type DrawerAppBarComponent = FunctionComponent<DrawerAppBarProps>;\n\n/**\n * DrawerAppBar element type\n */\nexport type DrawerAppBarElement = ReactElement<\n  DrawerAppBarProps,\n  DrawerAppBarComponent\n>;\n"],"names":["getDrawerItemColors","theme","selected"],"mappings":"AAkMO,MAAMA,IAAsB,CACjCC,GACAC,OAII;AAAA,EACJ,OAAOA,IAAWD,EAAM,QAAQ,QAAQ,OAAO;AAAA,EAC/C,YAAYC,IACRD,EAAM,WAAW,iBACjBA,EAAM,WAAW;AACvB;"}

package/dist/Drawerx/DrawerContent/DrawerContent.mjs

@@ -9,14 +9,12 @@ import "@mui/material/ListItemButton";
 import "@mui/material/ListItemIcon";
 import "@mui/material/ListItemText";
 import "@mui/material/styles";
-import "@mui/material/Badge";
-import "@mui/material/Box";
 import "@mui/icons-material/ChevronRight";
 import "@mui/icons-material/ExpandMore";
 import "@mui/material/Collapse";
 import "@mui/material/List";
 import "@mui/material/Popover";
-function X({ navigation: m }) {
+function I({ navigation: m }) {
   const { size: o } = s(), { spacing: r } = p();
   return /* @__PURE__ */ i(
     e,
@@ -30,6 +28,6 @@ function X({ navigation: m }) {
   );
 }
 export {
-  X as default
+  I as default
 };
 //# sourceMappingURL=DrawerContent.mjs.map

package/dist/Drawerx/DrawerContent/DrawerContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.mjs","sources":["../../../src/Drawerx/DrawerContent/DrawerContent.tsx"],"sourcesContent":["import { List, useTheme } from \"@mui/material\";\nimport type { DrawerContentProps } from \"../Drawer.types\";\nimport { useDrawer } from \"../DrawerContext\";\nimport DrawerItem from \"../DrawerItem\";\n\n/**\n * Content to be shown inside a navigation\n */\nexport default function DrawerContent({ navigation }: DrawerContentProps) {\n  const { size } = useDrawer();\n  const { spacing } = useTheme();\n\n  return (\n    <List\n      sx={{\n        paddingTop: size === \"small\" ? spacing(0.5) : undefined,\n        paddingX: size === \"small\" ? spacing(0.5) : spacing(1),\n      }}\n    >\n      {navigation.map((item) => (\n        <DrawerItem key={item.id} item={item} />\n      ))}\n    </List>\n  );\n}\n"],"names":["DrawerContent","navigation","size","useDrawer","spacing","useTheme","jsx","List","item","DrawerItem"],"mappings":";;;;;;;;;;;;;;;;;;AAQA,SAAwBA,EAAc,EAAE,YAAAC,KAAkC;AACxE,QAAM,EAAE,MAAAC,EAAA,IAASC,EAAA,GACX,EAAE,SAAAC,EAAA,IAAYC,EAAA;AAEpB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,YAAYL,MAAS,UAAUE,EAAQ,GAAG,IAAI;AAAA,QAC9C,UAA6BA,EAAnBF,MAAS,UAAkB,MAAe,CAAZ;AAAA,MAAa;AAAA,MAGtD,UAAAD,EAAW,IAAI,CAACO,wBACdC,GAAA,EAAyB,MAAAD,EAAA,GAATA,EAAK,EAAgB,CACvC;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"DrawerContent.mjs","sources":["../../../src/Drawerx/DrawerContent/DrawerContent.tsx"],"sourcesContent":["import { List, useTheme } from \"@mui/material\";\nimport type { DrawerContentProps } from \"../Drawer.types\";\nimport { useDrawer } from \"../DrawerContext\";\nimport DrawerItem from \"../DrawerItem\";\n\n/**\n * Content to be shown inside a navigation\n */\nexport default function DrawerContent({ navigation }: DrawerContentProps) {\n  const { size } = useDrawer();\n  const { spacing } = useTheme();\n\n  return (\n    <List\n      sx={{\n        paddingTop: size === \"small\" ? spacing(0.5) : undefined,\n        paddingX: size === \"small\" ? spacing(0.5) : spacing(1),\n      }}\n    >\n      {navigation.map((item) => (\n        <DrawerItem key={item.id} item={item} />\n      ))}\n    </List>\n  );\n}\n"],"names":["DrawerContent","navigation","size","useDrawer","spacing","useTheme","jsx","List","item","DrawerItem"],"mappings":";;;;;;;;;;;;;;;;AAQA,SAAwBA,EAAc,EAAE,YAAAC,KAAkC;AACxE,QAAM,EAAE,MAAAC,EAAA,IAASC,EAAA,GACX,EAAE,SAAAC,EAAA,IAAYC,EAAA;AAEpB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,YAAYL,MAAS,UAAUE,EAAQ,GAAG,IAAI;AAAA,QAC9C,UAA6BA,EAAnBF,MAAS,UAAkB,MAAe,CAAZ;AAAA,MAAa;AAAA,MAGtD,UAAAD,EAAW,IAAI,CAACO,wBACdC,GAAA,EAAyB,MAAAD,EAAA,GAATA,EAAK,EAAgB,CACvC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/Drawerx/DrawerItem/DrawerItemLink.mjs

@@ -1,13 +1,13 @@
 import { jsxs as I, jsx as o } from "react/jsx-runtime";
-import L from "@mui/material/Avatar";
-import y from "@mui/material/ListItemAvatar";
+import y from "@mui/material/Avatar";
+import L from "@mui/material/ListItemAvatar";
 import w from "@mui/material/ListItemButton";
 import C from "@mui/material/ListItemIcon";
 import j from "@mui/material/ListItemText";
 import { useTheme as v } from "@mui/material/styles";
-import { Bullet as D } from "../../Bullet/Bullet.mjs";
-import { Label as T } from "../../Label/Label.mjs";
-import { getDrawerItemColors as k } from "../Drawer.types.mjs";
+import { Badge as B } from "../../components/badge/badge.mjs";
+import { Bullet as D } from "../../components/bullet/bullet.mjs";
+import { getDrawerItemColors as T } from "../Drawer.types.mjs";
 import "@mui/material";
 import "react";
 import { useDrawer as h } from "../DrawerContext/DrawerContext.mjs";
@@ -15,28 +15,28 @@ const f = {
   minWidth: 0,
   justifyContent: "center",
   marginRight: "auto"
-}, M = ({
+}, K = ({
   text: e,
   icon: m,
   avatar: i,
   label: s,
-  bullet: n,
-  href: x,
-  selected: p,
+  bullet: a,
+  href: d,
+  selected: n,
   level: r,
-  sx: d
+  sx: x
 }) => {
-  const { state: t, size: a } = h(), c = v(), { color: l, fontWeight: u } = k(c, p), { LinkComponent: g } = h();
+  const { state: t, size: p } = h(), c = v(), { color: l, fontWeight: g } = T(c, n), { LinkComponent: u } = h();
   return /* @__PURE__ */ I(
     w,
     {
-      dense: a === "small",
-      LinkComponent: g,
+      dense: p === "small",
+      LinkComponent: u,
       "aria-label": e,
-      href: x,
-      selected: p,
+      href: d,
+      selected: n,
       sx: {
-        ...d,
+        ...x,
         borderRadius: 2,
         pl: t === "open" ? c.spacing(2 + 1.5 * r) : void 0,
         ...t === "collapse" && {
@@ -56,18 +56,18 @@ const f = {
           }
         ),
         i && /* @__PURE__ */ o(
-          y,
+          L,
           {
             sx: {
               ...t === "collapse" && r === 0 && f
             },
             children: /* @__PURE__ */ o(
-              L,
+              y,
               {
                 alt: i.alt,
                 src: i.src,
                 sx: {
-                  ...a === "small" && { width: 24, height: 24 },
+                  ...p === "small" && { width: 24, height: 24 },
                   ...t === "collapse" && { width: 30, height: 30 }
                 }
               }
@@ -81,18 +81,18 @@ const f = {
             primary: e,
             sx: {
               color: l,
-              fontWeight: u,
+              fontWeight: g,
               opacity: t === "collapse" && r === 0 ? 0 : void 0
             }
           }
         ),
-        s && t === "open" && /* @__PURE__ */ o(T, { text: s.text, variant: s.variant, sx: { ml: 2 } }),
-        n && t === "open" && /* @__PURE__ */ o(D, { variant: n.variant, sx: { ml: 2 } })
+        s && t === "open" && /* @__PURE__ */ o(B, { text: s.text, variant: s.variant, className: "ml-2" }),
+        a && t === "open" && /* @__PURE__ */ o(D, { variant: a.variant, className: "ml-4" })
       ]
     }
   );
 };
 export {
-  M as DrawerItemLink
+  K as DrawerItemLink
 };
 //# sourceMappingURL=DrawerItemLink.mjs.map

package/dist/Drawerx/DrawerItem/DrawerItemLink.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerItemLink.mjs","sources":["../../../src/Drawerx/DrawerItem/DrawerItemLink.tsx"],"sourcesContent":["import Avatar from \"@mui/material/Avatar\";\nimport ListItemAvatar from \"@mui/material/ListItemAvatar\";\nimport ListItemButton from \"@mui/material/ListItemButton\";\nimport ListItemIcon from \"@mui/material/ListItemIcon\";\nimport ListItemText from \"@mui/material/ListItemText\";\nimport { type SxProps, type Theme, useTheme } from \"@mui/material/styles\";\nimport type { ReactElement } from \"react\";\nimport { Bullet } from \"../../Bullet\";\nimport { Label } from \"../../Label\";\nimport {\n  type DrawerItemAvatar,\n  type DrawerItemBullet,\n  type DrawerItemLabel,\n  getDrawerItemColors,\n} from \"../Drawer.types\";\nimport { useDrawer } from \"../DrawerContext\";\n\nexport interface DrawerItemLinkProps {\n  /**\n   * Text displayed inside the item\n   */\n  text: string;\n  /**\n   * Url where the user is going to be redirected\n   * if the item is clicked\n   */\n  href: string;\n  /**\n   * Icon displayed to the left\n   */\n  icon?: ReactElement;\n  /**\n   * Avatar displayed to the left\n   */\n  avatar?: DrawerItemAvatar;\n  /**\n   * Label with extra info displayed to the right\n   */\n  label?: DrawerItemLabel;\n  /**\n   * Bullet to attract the user attention displyed to the right\n   */\n  bullet?: DrawerItemBullet;\n  /**\n   * The item has to be marked as selected\n   */\n  selected?: boolean;\n  /**\n   * Deep level of this item inside the submenus\n   */\n  level: number;\n  /**\n   * Custom styles\n   */\n  sx?: SxProps<Theme>;\n}\n\nconst sxCollapsedIcon = {\n  minWidth: 0,\n  justifyContent: \"center\",\n  marginRight: \"auto\",\n};\n\n/**\n * Clicable item inside a drawer\n */\nexport const DrawerItemLink = ({\n  text,\n  icon,\n  avatar,\n  label,\n  bullet,\n  href,\n  selected,\n  level,\n  sx,\n}: DrawerItemLinkProps) => {\n  const { state, size } = useDrawer();\n  const theme = useTheme();\n  const { color, fontWeight } = getDrawerItemColors(theme, selected);\n  const { LinkComponent } = useDrawer();\n\n  return (\n    <ListItemButton\n      dense={size === \"small\"}\n      LinkComponent={LinkComponent}\n      aria-label={text}\n      href={href}\n      selected={selected}\n      sx={{\n        ...sx,\n        borderRadius: 2,\n        pl: state === \"open\" ? theme.spacing(2 + 1.5 * level) : undefined,\n        ...(state === \"collapse\" && {\n          px: 2.5,\n          justifyContent: \"center\",\n        }),\n      }}\n    >\n      {icon && (\n        <ListItemIcon\n          sx={{\n            color,\n            ...(state === \"collapse\" && level === 0 && sxCollapsedIcon),\n          }}\n        >\n          {icon}\n        </ListItemIcon>\n      )}\n      {avatar && (\n        <ListItemAvatar\n          sx={{\n            ...(state === \"collapse\" && level === 0 && sxCollapsedIcon),\n          }}\n        >\n          <Avatar\n            alt={avatar.alt}\n            src={avatar.src}\n            sx={{\n              ...(size === \"small\" && { width: 24, height: 24 }),\n              ...(state === \"collapse\" && { width: 30, height: 30 }),\n            }}\n          />\n        </ListItemAvatar>\n      )}\n      <ListItemText\n        disableTypography\n        primary={text}\n        sx={{\n          color,\n          fontWeight,\n          opacity: state === \"collapse\" && level === 0 ? 0 : undefined,\n        }}\n      />\n      {label && state === \"open\" && (\n        <Label text={label.text} variant={label.variant} sx={{ ml: 2 }} />\n      )}\n      {bullet && state === \"open\" && (\n        <Bullet variant={bullet.variant} sx={{ ml: 2 }} />\n      )}\n    </ListItemButton>\n  );\n};\n"],"names":["sxCollapsedIcon","DrawerItemLink","text","icon","avatar","label","bullet","href","selected","level","sx","state","size","useDrawer","theme","useTheme","color","fontWeight","getDrawerItemColors","LinkComponent","jsxs","ListItemButton","jsx","ListItemIcon","ListItemAvatar","Avatar","ListItemText","Label","Bullet"],"mappings":";;;;;;;;;;;;;AAyDA,MAAMA,IAAkB;AAAA,EACtB,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AACf,GAKaC,IAAiB,CAAC;AAAA,EAC7B,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,IAAAC;AACF,MAA2B;AACzB,QAAM,EAAE,OAAAC,GAAO,MAAAC,EAAA,IAASC,EAAA,GAClBC,IAAQC,EAAA,GACR,EAAE,OAAAC,GAAO,YAAAC,EAAA,IAAeC,EAAoBJ,GAAON,CAAQ,GAC3D,EAAE,eAAAW,EAAA,IAAkBN,EAAA;AAE1B,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOT,MAAS;AAAA,MAChB,eAAAO;AAAA,MACA,cAAYjB;AAAA,MACZ,MAAAK;AAAA,MACA,UAAAC;AAAA,MACA,IAAI;AAAA,QACF,GAAGE;AAAA,QACH,cAAc;AAAA,QACd,IAAIC,MAAU,SAASG,EAAM,QAAQ,IAAI,MAAML,CAAK,IAAI;AAAA,QACxD,GAAIE,MAAU,cAAc;AAAA,UAC1B,IAAI;AAAA,UACJ,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,MAGD,UAAA;AAAA,QAAAR,KACC,gBAAAmB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,OAAAP;AAAA,cACA,GAAIL,MAAU,cAAcF,MAAU,KAAKT;AAAA,YAAA;AAAA,YAG5C,UAAAG;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJC,KACC,gBAAAkB;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,GAAIb,MAAU,cAAcF,MAAU,KAAKT;AAAA,YAAA;AAAA,YAG7C,UAAA,gBAAAsB;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,KAAKrB,EAAO;AAAA,gBACZ,KAAKA,EAAO;AAAA,gBACZ,IAAI;AAAA,kBACF,GAAIQ,MAAS,WAAW,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,kBAC7C,GAAID,MAAU,cAAc,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,gBAAG;AAAA,cACtD;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAGJ,gBAAAW;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,mBAAiB;AAAA,YACjB,SAASxB;AAAA,YACT,IAAI;AAAA,cACF,OAAAc;AAAA,cACA,YAAAC;AAAA,cACA,SAASN,MAAU,cAAcF,MAAU,IAAI,IAAI;AAAA,YAAA;AAAA,UACrD;AAAA,QAAA;AAAA,QAEDJ,KAASM,MAAU,UAClB,gBAAAW,EAACK,KAAM,MAAMtB,EAAM,MAAM,SAASA,EAAM,SAAS,IAAI,EAAE,IAAI,KAAK;AAAA,QAEjEC,KAAUK,MAAU,UACnB,gBAAAW,EAACM,GAAA,EAAO,SAAStB,EAAO,SAAS,IAAI,EAAE,IAAI,EAAA,EAAE,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIxD;"}
+{"version":3,"file":"DrawerItemLink.mjs","sources":["../../../src/Drawerx/DrawerItem/DrawerItemLink.tsx"],"sourcesContent":["import Avatar from \"@mui/material/Avatar\";\nimport ListItemAvatar from \"@mui/material/ListItemAvatar\";\nimport ListItemButton from \"@mui/material/ListItemButton\";\nimport ListItemIcon from \"@mui/material/ListItemIcon\";\nimport ListItemText from \"@mui/material/ListItemText\";\nimport { type SxProps, type Theme, useTheme } from \"@mui/material/styles\";\nimport type { ReactElement } from \"react\";\nimport { Badge } from \"../../components/badge\";\nimport { Bullet } from \"../../components/bullet\";\nimport {\n  type DrawerItemAvatar,\n  type DrawerItemBullet,\n  type DrawerItemLabel,\n  getDrawerItemColors,\n} from \"../Drawer.types\";\nimport { useDrawer } from \"../DrawerContext\";\n\nexport interface DrawerItemLinkProps {\n  /**\n   * Text displayed inside the item\n   */\n  text: string;\n  /**\n   * Url where the user is going to be redirected\n   * if the item is clicked\n   */\n  href: string;\n  /**\n   * Icon displayed to the left\n   */\n  icon?: ReactElement;\n  /**\n   * Avatar displayed to the left\n   */\n  avatar?: DrawerItemAvatar;\n  /**\n   * Label with extra info displayed to the right\n   */\n  label?: DrawerItemLabel;\n  /**\n   * Bullet to attract the user attention displyed to the right\n   */\n  bullet?: DrawerItemBullet;\n  /**\n   * The item has to be marked as selected\n   */\n  selected?: boolean;\n  /**\n   * Deep level of this item inside the submenus\n   */\n  level: number;\n  /**\n   * Custom styles\n   */\n  sx?: SxProps<Theme>;\n}\n\nconst sxCollapsedIcon = {\n  minWidth: 0,\n  justifyContent: \"center\",\n  marginRight: \"auto\",\n};\n\n/**\n * Clicable item inside a drawer\n */\nexport const DrawerItemLink = ({\n  text,\n  icon,\n  avatar,\n  label,\n  bullet,\n  href,\n  selected,\n  level,\n  sx,\n}: DrawerItemLinkProps) => {\n  const { state, size } = useDrawer();\n  const theme = useTheme();\n  const { color, fontWeight } = getDrawerItemColors(theme, selected);\n  const { LinkComponent } = useDrawer();\n\n  return (\n    <ListItemButton\n      dense={size === \"small\"}\n      LinkComponent={LinkComponent}\n      aria-label={text}\n      href={href}\n      selected={selected}\n      sx={{\n        ...sx,\n        borderRadius: 2,\n        pl: state === \"open\" ? theme.spacing(2 + 1.5 * level) : undefined,\n        ...(state === \"collapse\" && {\n          px: 2.5,\n          justifyContent: \"center\",\n        }),\n      }}\n    >\n      {icon && (\n        <ListItemIcon\n          sx={{\n            color,\n            ...(state === \"collapse\" && level === 0 && sxCollapsedIcon),\n          }}\n        >\n          {icon}\n        </ListItemIcon>\n      )}\n      {avatar && (\n        <ListItemAvatar\n          sx={{\n            ...(state === \"collapse\" && level === 0 && sxCollapsedIcon),\n          }}\n        >\n          <Avatar\n            alt={avatar.alt}\n            src={avatar.src}\n            sx={{\n              ...(size === \"small\" && { width: 24, height: 24 }),\n              ...(state === \"collapse\" && { width: 30, height: 30 }),\n            }}\n          />\n        </ListItemAvatar>\n      )}\n      <ListItemText\n        disableTypography\n        primary={text}\n        sx={{\n          color,\n          fontWeight,\n          opacity: state === \"collapse\" && level === 0 ? 0 : undefined,\n        }}\n      />\n      {label && state === \"open\" && (\n        <Badge text={label.text} variant={label.variant} className=\"ml-2\" />\n      )}\n      {bullet && state === \"open\" && (\n        <Bullet variant={bullet.variant} className=\"ml-4\" />\n      )}\n    </ListItemButton>\n  );\n};\n"],"names":["sxCollapsedIcon","DrawerItemLink","text","icon","avatar","label","bullet","href","selected","level","sx","state","size","useDrawer","theme","useTheme","color","fontWeight","getDrawerItemColors","LinkComponent","jsxs","ListItemButton","jsx","ListItemIcon","ListItemAvatar","Avatar","ListItemText","Badge","Bullet"],"mappings":";;;;;;;;;;;;;AAyDA,MAAMA,IAAkB;AAAA,EACtB,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AACf,GAKaC,IAAiB,CAAC;AAAA,EAC7B,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,IAAAC;AACF,MAA2B;AACzB,QAAM,EAAE,OAAAC,GAAO,MAAAC,EAAA,IAASC,EAAA,GAClBC,IAAQC,EAAA,GACR,EAAE,OAAAC,GAAO,YAAAC,EAAA,IAAeC,EAAoBJ,GAAON,CAAQ,GAC3D,EAAE,eAAAW,EAAA,IAAkBN,EAAA;AAE1B,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOT,MAAS;AAAA,MAChB,eAAAO;AAAA,MACA,cAAYjB;AAAA,MACZ,MAAAK;AAAA,MACA,UAAAC;AAAA,MACA,IAAI;AAAA,QACF,GAAGE;AAAA,QACH,cAAc;AAAA,QACd,IAAIC,MAAU,SAASG,EAAM,QAAQ,IAAI,MAAML,CAAK,IAAI;AAAA,QACxD,GAAIE,MAAU,cAAc;AAAA,UAC1B,IAAI;AAAA,UACJ,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,MAGD,UAAA;AAAA,QAAAR,KACC,gBAAAmB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,OAAAP;AAAA,cACA,GAAIL,MAAU,cAAcF,MAAU,KAAKT;AAAA,YAAA;AAAA,YAG5C,UAAAG;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJC,KACC,gBAAAkB;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,GAAIb,MAAU,cAAcF,MAAU,KAAKT;AAAA,YAAA;AAAA,YAG7C,UAAA,gBAAAsB;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,KAAKrB,EAAO;AAAA,gBACZ,KAAKA,EAAO;AAAA,gBACZ,IAAI;AAAA,kBACF,GAAIQ,MAAS,WAAW,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,kBAC7C,GAAID,MAAU,cAAc,EAAE,OAAO,IAAI,QAAQ,GAAA;AAAA,gBAAG;AAAA,cACtD;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAGJ,gBAAAW;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,mBAAiB;AAAA,YACjB,SAASxB;AAAA,YACT,IAAI;AAAA,cACF,OAAAc;AAAA,cACA,YAAAC;AAAA,cACA,SAASN,MAAU,cAAcF,MAAU,IAAI,IAAI;AAAA,YAAA;AAAA,UACrD;AAAA,QAAA;AAAA,QAEDJ,KAASM,MAAU,UAClB,gBAAAW,EAACK,GAAA,EAAM,MAAMtB,EAAM,MAAM,SAASA,EAAM,SAAS,WAAU,OAAA,CAAO;AAAA,QAEnEC,KAAUK,MAAU,UACnB,gBAAAW,EAACM,KAAO,SAAStB,EAAO,SAAS,WAAU,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI1D;"}

package/dist/ListPanel/ListPanel.mjs

@@ -1,5 +1,5 @@
-import { jsx as t, jsxs as y } from "react/jsx-runtime";
-import { useState as P, createElement as k } from "react";
+import { jsx as t, jsxs as P } from "react/jsx-runtime";
+import { useState as k, createElement as x } from "react";
 import { useTheme as L, Link as b } from "@mui/material";
 import { grey as v } from "@mui/material/colors";
 import r from "@mui/material/Grid";
@@ -19,15 +19,15 @@ function O({
   onSelectedItemChange: c = () => null
 }) {
   o.map((e) => e.path).filter(Boolean);
-  const h = w(), { palette: f } = L(), [u, d] = P(p), g = (e) => {
+  const h = w(), { palette: f } = L(), [u, d] = k(p), g = (e) => {
     d(e), c(e);
   };
-  return /* @__PURE__ */ t(z, { value: u, children: /* @__PURE__ */ y(r, { container: !0, bgcolor: h, height: 1, children: [
-    /* @__PURE__ */ t(r, { size: { xs: i }, pl: 1, height: 1, children: /* @__PURE__ */ t(C, { sx: { height: 1, overflowY: "auto" }, children: o.map(({ id: e, text: n, tooltip: l, href: x }) => {
-      const m = /* @__PURE__ */ k(
+  return /* @__PURE__ */ t(z, { value: u, children: /* @__PURE__ */ P(r, { container: !0, bgcolor: h, height: 1, children: [
+    /* @__PURE__ */ t(r, { size: i, pl: 1, height: 1, children: /* @__PURE__ */ t(C, { sx: { height: 1, overflowY: "auto" }, children: o.map(({ id: e, text: n, tooltip: l, href: y }) => {
+      const m = /* @__PURE__ */ x(
         I,
         {
-          ...a === "navigation" ? { component: b, href: x } : {},
+          ...a === "navigation" ? { component: b, href: y } : {},
           key: e,
           dense: !0,
           onClick: () => g(e),
@@ -54,7 +54,7 @@ function O({
         e
       ) : m;
     }) }) }),
-    /* @__PURE__ */ t(r, { size: { xs: 12 - i }, pl: 1, py: 1, pr: 1, children: /* @__PURE__ */ t(
+    /* @__PURE__ */ t(r, { size: 12 - i, pl: 1, py: 1, pr: 1, children: /* @__PURE__ */ t(
       S,
       {
         elevation: 0,

package/dist/ListPanel/ListPanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListPanel.mjs","sources":["../../src/ListPanel/ListPanel.tsx"],"sourcesContent":["import { Link, useTheme } from \"@mui/material\";\nimport { grey } from \"@mui/material/colors\";\nimport Grid from \"@mui/material/Grid\";\nimport List from \"@mui/material/List\";\nimport ListItemButton from \"@mui/material/ListItemButton\";\nimport ListItemText from \"@mui/material/ListItemText\";\nimport Paper from \"@mui/material/Paper\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport { useState } from \"react\";\nimport { useGetDefaultThemeColor } from \"../utils\";\nimport { ListPanelContextProvider } from \"./ListPanel.context\";\n\nexport interface ListPanelItem {\n  id: string;\n  text: string;\n  tooltip?: string;\n  href?: string;\n  path?: string;\n}\n\nexport interface ListPanelProps {\n  /**\n   * The ID of the item that should be selected by default.\n   */\n  defaultSelectedItem?: string;\n  /**\n   * The list of items to be displayed in the panel.\n   */\n  items: ListPanelItem[];\n  /**\n   * The mode of the list, either \"panel\" or \"navigation\".\n   */\n  listMode?: \"panel\" | \"navigation\";\n  /**\n   * The breakpoint for column layout.\n   */\n  colBreakpoint?: number;\n  /**\n   * Callback function that is called when the selected item changes.\n   */\n  onSelectedItemChange?: (id: string) => void;\n  /**\n   * Content to display in the panel area\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * ListPanel component renders a panel with a list of items and a content area.\n */\nexport function ListPanel({\n  items,\n  defaultSelectedItem,\n  colBreakpoint = 3,\n  listMode = \"panel\",\n  children,\n  onSelectedItemChange = () => null,\n}: ListPanelProps) {\n  const _paths = items.map((item) => item.path).filter(Boolean) as string[];\n\n  const bgColor = useGetDefaultThemeColor();\n  const { palette } = useTheme();\n  const [selectedItem, setSelectedItem] = useState(defaultSelectedItem);\n\n  const handleSelectItem = (id: string) => {\n    setSelectedItem(id);\n    onSelectedItemChange(id);\n  };\n\n  return (\n    <ListPanelContextProvider value={selectedItem}>\n      <Grid container bgcolor={bgColor} height={1}>\n        <Grid size={{ xs: colBreakpoint }} pl={1} height={1}>\n          <List sx={{ height: 1, overflowY: \"auto\" }}>\n            {items.map(({ id, text, tooltip, href }) => {\n              const linkProps =\n                listMode === \"navigation\" ? { component: Link, href } : {};\n\n              const contentEl = (\n                <ListItemButton\n                  {...linkProps}\n                  key={id}\n                  dense\n                  onClick={() => handleSelectItem(id)}\n                  aria-label={text}\n                >\n                  <ListItemText\n                    primary={text}\n                    primaryTypographyProps={{\n                      color: grey[600],\n                    }}\n                  />\n                </ListItemButton>\n              );\n\n              return tooltip ? (\n                <Tooltip\n                  key={id}\n                  title={tooltip}\n                  enterDelay={1500}\n                  placement=\"right\"\n                >\n                  {contentEl}\n                </Tooltip>\n              ) : (\n                contentEl\n              );\n            })}\n          </List>\n        </Grid>\n        <Grid size={{ xs: 12 - colBreakpoint }} pl={1} py={1} pr={1}>\n          <Paper\n            elevation={0}\n            sx={{\n              width: 1,\n              height: 1,\n              backgroundColor: palette.background.paper,\n            }}\n          >\n            {children}\n          </Paper>\n        </Grid>\n      </Grid>\n    </ListPanelContextProvider>\n  );\n}\n\nexport default ListPanel;\n"],"names":["ListPanel","items","defaultSelectedItem","colBreakpoint","listMode","children","onSelectedItemChange","item","bgColor","useGetDefaultThemeColor","palette","useTheme","selectedItem","setSelectedItem","useState","handleSelectItem","id","jsx","ListPanelContextProvider","jsxs","Grid","List","text","tooltip","href","contentEl","createElement","ListItemButton","Link","ListItemText","grey","Tooltip","Paper"],"mappings":";;;;;;;;;;;;AAkDO,SAASA,EAAU;AAAA,EACxB,OAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,sBAAAC,IAAuB,MAAM;AAC/B,GAAmB;AACF,EAAAL,EAAM,IAAI,CAACM,MAASA,EAAK,IAAI,EAAE,OAAO,OAAO;AAE5D,QAAMC,IAAUC,EAAA,GACV,EAAE,SAAAC,EAAA,IAAYC,EAAA,GACd,CAACC,GAAcC,CAAe,IAAIC,EAASZ,CAAmB,GAE9Da,IAAmB,CAACC,MAAe;AACvC,IAAAH,EAAgBG,CAAE,GAClBV,EAAqBU,CAAE;AAAA,EACzB;AAEA,SACE,gBAAAC,EAACC,GAAA,EAAyB,OAAON,GAC/B,UAAA,gBAAAO,EAACC,GAAA,EAAK,WAAS,IAAC,SAASZ,GAAS,QAAQ,GACxC,UAAA;AAAA,IAAA,gBAAAS,EAACG,GAAA,EAAK,MAAM,EAAE,IAAIjB,EAAA,GAAiB,IAAI,GAAG,QAAQ,GAChD,UAAA,gBAAAc,EAACI,GAAA,EAAK,IAAI,EAAE,QAAQ,GAAG,WAAW,OAAA,GAC/B,UAAApB,EAAM,IAAI,CAAC,EAAE,IAAAe,GAAI,MAAAM,GAAM,SAAAC,GAAS,MAAAC,EAAA,MAAW;AAI1C,YAAMC,IACJ,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACE,GAJHvB,MAAa,eAAe,EAAE,WAAWwB,GAAM,MAAAJ,EAAA,IAAS,CAAA;AAAA,UAKtD,KAAKR;AAAA,UACL,OAAK;AAAA,UACL,SAAS,MAAMD,EAAiBC,CAAE;AAAA,UAClC,cAAYM;AAAA,QAAA;AAAA,QAEZ,gBAAAL;AAAA,UAACY;AAAA,UAAA;AAAA,YACC,SAASP;AAAA,YACT,wBAAwB;AAAA,cACtB,OAAOQ,EAAK,GAAG;AAAA,YAAA;AAAA,UACjB;AAAA,QAAA;AAAA,MACF;AAIJ,aAAOP,IACL,gBAAAN;AAAA,QAACc;AAAA,QAAA;AAAA,UAEC,OAAOR;AAAA,UACP,YAAY;AAAA,UACZ,WAAU;AAAA,UAET,UAAAE;AAAA,QAAA;AAAA,QALIT;AAAA,MAAA,IAQPS;AAAA,IAEJ,CAAC,GACH,GACF;AAAA,IACA,gBAAAR,EAACG,GAAA,EAAK,MAAM,EAAE,IAAI,KAAKjB,EAAA,GAAiB,IAAI,GAAG,IAAI,GAAG,IAAI,GACxD,UAAA,gBAAAc;AAAA,MAACe;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX,IAAI;AAAA,UACF,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,iBAAiBtB,EAAQ,WAAW;AAAA,QAAA;AAAA,QAGrC,UAAAL;AAAA,MAAA;AAAA,IAAA,EACH,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"ListPanel.mjs","sources":["../../src/ListPanel/ListPanel.tsx"],"sourcesContent":["import { Link, useTheme } from \"@mui/material\";\nimport { grey } from \"@mui/material/colors\";\nimport Grid from \"@mui/material/Grid\";\nimport List from \"@mui/material/List\";\nimport ListItemButton from \"@mui/material/ListItemButton\";\nimport ListItemText from \"@mui/material/ListItemText\";\nimport Paper from \"@mui/material/Paper\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport { useState } from \"react\";\nimport { useGetDefaultThemeColor } from \"../utils\";\nimport { ListPanelContextProvider } from \"./ListPanel.context\";\n\nexport interface ListPanelItem {\n  id: string;\n  text: string;\n  tooltip?: string;\n  href?: string;\n  path?: string;\n}\n\nexport interface ListPanelProps {\n  /**\n   * The ID of the item that should be selected by default.\n   */\n  defaultSelectedItem?: string;\n  /**\n   * The list of items to be displayed in the panel.\n   */\n  items: ListPanelItem[];\n  /**\n   * The mode of the list, either \"panel\" or \"navigation\".\n   */\n  listMode?: \"panel\" | \"navigation\";\n  /**\n   * The breakpoint for column layout.\n   */\n  colBreakpoint?: number;\n  /**\n   * Callback function that is called when the selected item changes.\n   */\n  onSelectedItemChange?: (id: string) => void;\n  /**\n   * Content to display in the panel area\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * ListPanel component renders a panel with a list of items and a content area.\n */\nexport function ListPanel({\n  items,\n  defaultSelectedItem,\n  colBreakpoint = 3,\n  listMode = \"panel\",\n  children,\n  onSelectedItemChange = () => null,\n}: ListPanelProps) {\n  const _paths = items.map((item) => item.path).filter(Boolean) as string[];\n\n  const bgColor = useGetDefaultThemeColor();\n  const { palette } = useTheme();\n  const [selectedItem, setSelectedItem] = useState(defaultSelectedItem);\n\n  const handleSelectItem = (id: string) => {\n    setSelectedItem(id);\n    onSelectedItemChange(id);\n  };\n\n  return (\n    <ListPanelContextProvider value={selectedItem}>\n      <Grid container bgcolor={bgColor} height={1}>\n        <Grid size={colBreakpoint} pl={1} height={1}>\n          <List sx={{ height: 1, overflowY: \"auto\" }}>\n            {items.map(({ id, text, tooltip, href }) => {\n              const linkProps =\n                listMode === \"navigation\" ? { component: Link, href } : {};\n\n              const contentEl = (\n                <ListItemButton\n                  {...linkProps}\n                  key={id}\n                  dense\n                  onClick={() => handleSelectItem(id)}\n                  aria-label={text}\n                >\n                  <ListItemText\n                    primary={text}\n                    primaryTypographyProps={{\n                      color: grey[600],\n                    }}\n                  />\n                </ListItemButton>\n              );\n\n              return tooltip ? (\n                <Tooltip\n                  key={id}\n                  title={tooltip}\n                  enterDelay={1500}\n                  placement=\"right\"\n                >\n                  {contentEl}\n                </Tooltip>\n              ) : (\n                contentEl\n              );\n            })}\n          </List>\n        </Grid>\n        <Grid size={12 - colBreakpoint} pl={1} py={1} pr={1}>\n          <Paper\n            elevation={0}\n            sx={{\n              width: 1,\n              height: 1,\n              backgroundColor: palette.background.paper,\n            }}\n          >\n            {children}\n          </Paper>\n        </Grid>\n      </Grid>\n    </ListPanelContextProvider>\n  );\n}\n\nexport default ListPanel;\n"],"names":["ListPanel","items","defaultSelectedItem","colBreakpoint","listMode","children","onSelectedItemChange","item","bgColor","useGetDefaultThemeColor","palette","useTheme","selectedItem","setSelectedItem","useState","handleSelectItem","id","jsx","ListPanelContextProvider","jsxs","Grid","List","text","tooltip","href","contentEl","createElement","ListItemButton","Link","ListItemText","grey","Tooltip","Paper"],"mappings":";;;;;;;;;;;;AAkDO,SAASA,EAAU;AAAA,EACxB,OAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,sBAAAC,IAAuB,MAAM;AAC/B,GAAmB;AACF,EAAAL,EAAM,IAAI,CAACM,MAASA,EAAK,IAAI,EAAE,OAAO,OAAO;AAE5D,QAAMC,IAAUC,EAAA,GACV,EAAE,SAAAC,EAAA,IAAYC,EAAA,GACd,CAACC,GAAcC,CAAe,IAAIC,EAASZ,CAAmB,GAE9Da,IAAmB,CAACC,MAAe;AACvC,IAAAH,EAAgBG,CAAE,GAClBV,EAAqBU,CAAE;AAAA,EACzB;AAEA,SACE,gBAAAC,EAACC,GAAA,EAAyB,OAAON,GAC/B,UAAA,gBAAAO,EAACC,GAAA,EAAK,WAAS,IAAC,SAASZ,GAAS,QAAQ,GACxC,UAAA;AAAA,IAAA,gBAAAS,EAACG,GAAA,EAAK,MAAMjB,GAAe,IAAI,GAAG,QAAQ,GACxC,UAAA,gBAAAc,EAACI,GAAA,EAAK,IAAI,EAAE,QAAQ,GAAG,WAAW,OAAA,GAC/B,UAAApB,EAAM,IAAI,CAAC,EAAE,IAAAe,GAAI,MAAAM,GAAM,SAAAC,GAAS,MAAAC,EAAA,MAAW;AAI1C,YAAMC,IACJ,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACE,GAJHvB,MAAa,eAAe,EAAE,WAAWwB,GAAM,MAAAJ,EAAA,IAAS,CAAA;AAAA,UAKtD,KAAKR;AAAA,UACL,OAAK;AAAA,UACL,SAAS,MAAMD,EAAiBC,CAAE;AAAA,UAClC,cAAYM;AAAA,QAAA;AAAA,QAEZ,gBAAAL;AAAA,UAACY;AAAA,UAAA;AAAA,YACC,SAASP;AAAA,YACT,wBAAwB;AAAA,cACtB,OAAOQ,EAAK,GAAG;AAAA,YAAA;AAAA,UACjB;AAAA,QAAA;AAAA,MACF;AAIJ,aAAOP,IACL,gBAAAN;AAAA,QAACc;AAAA,QAAA;AAAA,UAEC,OAAOR;AAAA,UACP,YAAY;AAAA,UACZ,WAAU;AAAA,UAET,UAAAE;AAAA,QAAA;AAAA,QALIT;AAAA,MAAA,IAQPS;AAAA,IAEJ,CAAC,GACH,GACF;AAAA,IACA,gBAAAR,EAACG,GAAA,EAAK,MAAM,KAAKjB,GAAe,IAAI,GAAG,IAAI,GAAG,IAAI,GAChD,UAAA,gBAAAc;AAAA,MAACe;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX,IAAI;AAAA,UACF,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,iBAAiBtB,EAAQ,WAAW;AAAA,QAAA;AAAA,QAGrC,UAAAL;AAAA,MAAA;AAAA,IAAA,EACH,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;"}

package/dist/SkeletonGrid/SkeletonGrid.mjs

@@ -4,7 +4,7 @@ import { SkeletonCard as o } from "../SkeletonCard/SkeletonCard.mjs";
 import { newArrayWithSize as n } from "../utils/arrays.mjs";
 import "@mui/material";
 function l({ size: t = 20 }) {
-  return /* @__PURE__ */ r(i, { container: !0, spacing: 2, children: n(t, 0).map((m, e) => /* @__PURE__ */ r(i, { size: { xs: 4 }, children: /* @__PURE__ */ r(o, { width: 1 }) }, e)) });
+  return /* @__PURE__ */ r(i, { container: !0, spacing: 2, children: n(t, 0).map((m, e) => /* @__PURE__ */ r(i, { size: 4, children: /* @__PURE__ */ r(o, { width: 1 }) }, e)) });
 }
 export {
   l as SkeletonGrid,

package/dist/SkeletonGrid/SkeletonGrid.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonGrid.mjs","sources":["../../src/SkeletonGrid/SkeletonGrid.tsx"],"sourcesContent":["import Grid from \"@mui/material/Grid\";\nimport SkeletonCard from \"../SkeletonCard\";\nimport { newArrayWithSize } from \"../utils\";\n\n/**\n * Props for the SkeletonGrid component.\n */\nexport interface SkeletonGridProps {\n  /**\n   * Optional size of the skeleton grid.\n   */\n  size?: number;\n}\nexport interface SkeletonGridProps {\n  size?: number;\n}\n\n/**\n * SkeletonGrid component renders a grid of skeleton cards.\n */\nexport function SkeletonGrid({ size = 20 }: SkeletonGridProps) {\n  return (\n    <Grid container spacing={2}>\n      {newArrayWithSize(size, 0).map((_, i) => (\n        <Grid key={i} size={{ xs: 4 }}>\n          <SkeletonCard width={1} />\n        </Grid>\n      ))}\n    </Grid>\n  );\n}\n\nexport default SkeletonGrid;\n"],"names":["SkeletonGrid","size","jsx","Grid","newArrayWithSize","_","i","SkeletonCard"],"mappings":";;;;;AAoBO,SAASA,EAAa,EAAE,MAAAC,IAAO,MAAyB;AAC7D,SACE,gBAAAC,EAACC,GAAA,EAAK,WAAS,IAAC,SAAS,GACtB,UAAAC,EAAiBH,GAAM,CAAC,EAAE,IAAI,CAACI,GAAGC,MACjC,gBAAAJ,EAACC,GAAA,EAAa,MAAM,EAAE,IAAI,EAAA,GACxB,UAAA,gBAAAD,EAACK,GAAA,EAAa,OAAO,EAAA,CAAG,EAAA,GADfD,CAEX,CACD,GACH;AAEJ;"}
+{"version":3,"file":"SkeletonGrid.mjs","sources":["../../src/SkeletonGrid/SkeletonGrid.tsx"],"sourcesContent":["import Grid from \"@mui/material/Grid\";\nimport SkeletonCard from \"../SkeletonCard\";\nimport { newArrayWithSize } from \"../utils\";\n\n/**\n * Props for the SkeletonGrid component.\n */\nexport interface SkeletonGridProps {\n  /**\n   * Optional size of the skeleton grid.\n   */\n  size?: number;\n}\nexport interface SkeletonGridProps {\n  size?: number;\n}\n\n/**\n * SkeletonGrid component renders a grid of skeleton cards.\n */\nexport function SkeletonGrid({ size = 20 }: SkeletonGridProps) {\n  return (\n    <Grid container spacing={2}>\n      {newArrayWithSize(size, 0).map((_, i) => (\n        <Grid key={i} size={4}>\n          <SkeletonCard width={1} />\n        </Grid>\n      ))}\n    </Grid>\n  );\n}\n\nexport default SkeletonGrid;\n"],"names":["SkeletonGrid","size","jsx","Grid","newArrayWithSize","_","i","SkeletonCard"],"mappings":";;;;;AAoBO,SAASA,EAAa,EAAE,MAAAC,IAAO,MAAyB;AAC7D,SACE,gBAAAC,EAACC,GAAA,EAAK,WAAS,IAAC,SAAS,GACtB,UAAAC,EAAiBH,GAAM,CAAC,EAAE,IAAI,CAACI,GAAGC,MACjC,gBAAAJ,EAACC,GAAA,EAAa,MAAM,GAClB,UAAA,gBAAAD,EAACK,GAAA,EAAa,OAAO,EAAA,CAAG,EAAA,GADfD,CAEX,CACD,EAAA,CACH;AAEJ;"}

package/dist/ValueItem/ValueItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ValueItem.mjs","sources":["../../src/ValueItem/ValueItem.tsx"],"sourcesContent":["import Box from \"@mui/material/Box\";\nimport Grid, { type GridProps } from \"@mui/material/Grid\";\nimport type { ResponsiveStyleValue } from \"@mui/system\";\nimport type { FunctionComponent, ReactElement } from \"react\";\nimport { useGetDefaultThemeColor } from \"../utils\";\n\n/**\n * Props for the ValueItem component\n */\nexport interface ValueItemProps extends Omit<GridProps, \"item\" | \"container\"> {\n  /**\n   * Whether to display a border\n   */\n  bordered?: ResponsiveStyleValue<boolean>;\n  /**\n   * Content to display\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * ValueItem component type\n */\nexport type ValueItemComponent = FunctionComponent<ValueItemProps>;\n\n/**\n * ValueItem element type\n */\nexport type ValueItemElement = ReactElement<ValueItemProps, ValueItemComponent>;\n\nexport const valueItemClasses = {\n  root: \"RdsValueItem-root\",\n  content: \"RdsValueItem-content\",\n};\n\nconst resolveBorderStyle = (\n  bordered: ResponsiveStyleValue<boolean>,\n  color: string,\n) => {\n  const borderStyle = `solid ${color} 1px`;\n  const noBorder = \"none\";\n\n  if (!bordered) {\n    return undefined;\n  }\n\n  if (Array.isArray(bordered)) {\n    return bordered.map((b) => (b ? borderStyle : noBorder));\n  }\n\n  if (typeof bordered === \"object\") {\n    const style: Record<string, string | undefined> = {};\n    Object.entries(bordered).forEach(([key, value]) => {\n      style[key] = value ? borderStyle : noBorder;\n    });\n    return style;\n  }\n\n  return borderStyle;\n};\n\n/**\n * `ValueItem` is a component to wrap your value components\n */\nconst ValueItem: ValueItemComponent = ({\n  children,\n  bordered = true,\n  ...rest\n}: ValueItemProps) => {\n  const defaultColor = useGetDefaultThemeColor({\n    lightWeight: 200,\n    darkWeight: 800,\n  });\n  const borderLeft = resolveBorderStyle(bordered, defaultColor);\n  return (\n    <Grid className={valueItemClasses.root} {...rest}>\n      <Box className={valueItemClasses.content} px={1} borderLeft={borderLeft}>\n        {children}\n      </Box>\n    </Grid>\n  );\n};\n\nexport default ValueItem;\n"],"names":["valueItemClasses","resolveBorderStyle","bordered","color","borderStyle","noBorder","b","style","key","value","ValueItem","children","rest","defaultColor","useGetDefaultThemeColor","borderLeft","Grid","jsx","Box"],"mappings":";;;;AA8BO,MAAMA,IAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,SAAS;AACX,GAEMC,IAAqB,CACzBC,GACAC,MACG;AACH,QAAMC,IAAc,SAASD,CAAK,QAC5BE,IAAW;AAEjB,MAAKH,GAIL;AAAA,QAAI,MAAM,QAAQA,CAAQ;AACxB,aAAOA,EAAS,IAAI,CAACI,MAAOA,IAAIF,IAAcC,CAAS;AAGzD,QAAI,OAAOH,KAAa,UAAU;AAChC,YAAMK,IAA4C,CAAA;AAClD,oBAAO,QAAQL,CAAQ,EAAE,QAAQ,CAAC,CAACM,GAAKC,CAAK,MAAM;AACjD,QAAAF,EAAMC,CAAG,IAAIC,IAAQL,IAAcC;AAAA,MACrC,CAAC,GACME;AAAA,IACT;AAEA,WAAOH;AAAA;AACT,GAKMM,IAAgC,CAAC;AAAA,EACrC,UAAAC;AAAA,EACA,UAAAT,IAAW;AAAA,EACX,GAAGU;AACL,MAAsB;AACpB,QAAMC,IAAeC,EAAwB;AAAA,IAC3C,aAAa;AAAA,IACb,YAAY;AAAA,EAAA,CACb,GACKC,IAAad,EAAmBC,GAAUW,CAAY;AAC5D,2BACGG,GAAA,EAAK,WAAWhB,EAAiB,MAAO,GAAGY,GAC1C,UAAA,gBAAAK,EAACC,GAAA,EAAI,WAAWlB,EAAiB,SAAS,IAAI,GAAG,YAAAe,GAC9C,UAAAJ,GACH,GACF;AAEJ;"}
+{"version":3,"file":"ValueItem.mjs","sources":["../../src/ValueItem/ValueItem.tsx"],"sourcesContent":["import Box from \"@mui/material/Box\";\nimport Grid, { type GridProps } from \"@mui/material/Grid\";\nimport type { ResponsiveStyleValue } from \"@mui/system\";\nimport type { FunctionComponent, ReactElement } from \"react\";\nimport { useGetDefaultThemeColor } from \"../utils\";\n\n/**\n * Props for the ValueItem component\n */\nexport interface ValueItemProps extends Omit<GridProps, \"item\" | \"container\"> {\n  /**\n   * Whether to display a border\n   */\n  bordered?: ResponsiveStyleValue<boolean>;\n  /**\n   * Content to display\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * ValueItem component type\n */\nexport type ValueItemComponent = FunctionComponent<ValueItemProps>;\n\n/**\n * ValueItem element type\n */\nexport type ValueItemElement = ReactElement<ValueItemProps, ValueItemComponent>;\n\nexport const valueItemClasses = {\n  root: \"RdsValueItem-root\",\n  content: \"RdsValueItem-content\",\n};\n\nconst resolveBorderStyle = (\n  bordered: ResponsiveStyleValue<boolean>,\n  color: string,\n) => {\n  const borderStyle = `solid ${color} 1px`;\n  const noBorder = \"none\";\n\n  if (!bordered) {\n    return undefined;\n  }\n\n  if (Array.isArray(bordered)) {\n    return bordered.map((b) => (b ? borderStyle : noBorder));\n  }\n\n  if (typeof bordered === \"object\") {\n    const style: Record<string, string | undefined> = {};\n    Object.entries(bordered).forEach(([key, value]) => {\n      style[key] = value ? borderStyle : noBorder;\n    });\n    return style;\n  }\n\n  return borderStyle;\n};\n\n/**\n * `ValueItem` is a component to wrap your value components\n */\nconst ValueItem: ValueItemComponent = ({\n  children,\n  bordered = true,\n  ...rest\n}: ValueItemProps) => {\n  const defaultColor = useGetDefaultThemeColor({\n    lightWeight: 200,\n    darkWeight: 800,\n  });\n  const borderLeft = resolveBorderStyle(bordered, defaultColor);\n\n  return (\n    <Grid className={valueItemClasses.root} {...rest}>\n      <Box className={valueItemClasses.content} px={1} borderLeft={borderLeft}>\n        {children}\n      </Box>\n    </Grid>\n  );\n};\n\nexport default ValueItem;\n"],"names":["valueItemClasses","resolveBorderStyle","bordered","color","borderStyle","noBorder","b","style","key","value","ValueItem","children","rest","defaultColor","useGetDefaultThemeColor","borderLeft","Grid","jsx","Box"],"mappings":";;;;AA8BO,MAAMA,IAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,SAAS;AACX,GAEMC,IAAqB,CACzBC,GACAC,MACG;AACH,QAAMC,IAAc,SAASD,CAAK,QAC5BE,IAAW;AAEjB,MAAKH,GAIL;AAAA,QAAI,MAAM,QAAQA,CAAQ;AACxB,aAAOA,EAAS,IAAI,CAACI,MAAOA,IAAIF,IAAcC,CAAS;AAGzD,QAAI,OAAOH,KAAa,UAAU;AAChC,YAAMK,IAA4C,CAAA;AAClD,oBAAO,QAAQL,CAAQ,EAAE,QAAQ,CAAC,CAACM,GAAKC,CAAK,MAAM;AACjD,QAAAF,EAAMC,CAAG,IAAIC,IAAQL,IAAcC;AAAA,MACrC,CAAC,GACME;AAAA,IACT;AAEA,WAAOH;AAAA;AACT,GAKMM,IAAgC,CAAC;AAAA,EACrC,UAAAC;AAAA,EACA,UAAAT,IAAW;AAAA,EACX,GAAGU;AACL,MAAsB;AACpB,QAAMC,IAAeC,EAAwB;AAAA,IAC3C,aAAa;AAAA,IACb,YAAY;AAAA,EAAA,CACb,GACKC,IAAad,EAAmBC,GAAUW,CAAY;AAE5D,2BACGG,GAAA,EAAK,WAAWhB,EAAiB,MAAO,GAAGY,GAC1C,UAAA,gBAAAK,EAACC,GAAA,EAAI,WAAWlB,EAAiB,SAAS,IAAI,GAAG,YAAAe,GAC9C,UAAAJ,GACH,GACF;AAEJ;"}

package/dist/ValueLabel/ValueLabel.d.ts

@@ -1,4 +1,4 @@
-import { LabelVariant } from '../Label';
+import { BadgeVariant } from '../components/badge';
 import { BaseValueProps } from '../ValueBase';
 /**
  * Props for the ValueLabel component
@@ -9,14 +9,10 @@ export type ValueLabelProps = BaseValueProps<string | number | string[] | number
     /**
      * Label color variant or array of variants for multiple labels
      */
-    variant?: LabelVariant | LabelVariant[];
-    /**
-     * Custom color or array of colors for multiple labels
-     */
-    color?: string | string[];
+    variant?: BadgeVariant | BadgeVariant[];
 };
 /**
  * Displays a label component value with a label
  */
-export declare function ValueLabel({ label, value: valueProp, placeholder, color, variant, }: ValueLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function ValueLabel({ label, value: valueProp, placeholder, variant, }: ValueLabelProps): import("react/jsx-runtime").JSX.Element;
 export default ValueLabel;

package/dist/ValueLabel/ValueLabel.mjs

@@ -1,35 +1,32 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import f from "@mui/material/Grid";
-import { Label as o } from "../Label/Label.mjs";
-import { DefaultPlaceholder as l } from "../ValueBase/ValueDisplays.types.mjs";
-import { getValueContentLabelId as u, ValueContent as d } from "../ValueContent/ValueContent.mjs";
-function L({
-  label: n,
-  value: a,
-  placeholder: m = l,
-  color: r,
-  variant: t
+import { Badge as n } from "../components/badge/badge.mjs";
+import { DefaultPlaceholder as u } from "../ValueBase/ValueDisplays.types.mjs";
+import { getValueContentLabelId as s, ValueContent as y } from "../ValueContent/ValueContent.mjs";
+function b({
+  label: o,
+  value: e,
+  placeholder: a = u,
+  variant: r
 }) {
-  const y = u(n), A = Array.isArray(a) ? a.map((s, i) => /* @__PURE__ */ e(
-    o,
+  const m = s(o), l = Array.isArray(e) ? e.map((d, i) => /* @__PURE__ */ t(
+    n,
     {
-      text: s.toString() || m,
-      variant: Array.isArray(t) ? t[i] : t,
-      color: Array.isArray(r) ? r[i] : r
+      text: d.toString() || a,
+      variant: Array.isArray(r) ? r[i] : r
     },
     i
-  )) : /* @__PURE__ */ e(
-    o,
+  )) : /* @__PURE__ */ t(
+    n,
     {
-      text: a?.toString() || m,
-      variant: Array.isArray(t) ? t[0] : t,
-      color: Array.isArray(r) ? r[0] : r
+      text: e?.toString() || a,
+      variant: Array.isArray(r) ? r[0] : r
     }
   );
-  return /* @__PURE__ */ e(d, { label: n, children: /* @__PURE__ */ e(f, { container: !0, gap: 1, "aria-labelledby": y, children: A }) });
+  return /* @__PURE__ */ t(y, { label: o, children: /* @__PURE__ */ t(f, { container: !0, gap: 1, "aria-labelledby": m, children: l }) });
 }
 export {
-  L as ValueLabel,
-  L as default
+  b as ValueLabel,
+  b as default
 };
 //# sourceMappingURL=ValueLabel.mjs.map

package/dist/ValueLabel/ValueLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ValueLabel.mjs","sources":["../../src/ValueLabel/ValueLabel.tsx"],"sourcesContent":["import Grid from \"@mui/material/Grid\";\nimport Label, { type LabelVariant } from \"../Label\";\nimport { type BaseValueProps, DefaultPlaceholder } from \"../ValueBase\";\nimport ValueContent, { getValueContentLabelId } from \"../ValueContent\";\n\n/**\n * Props for the ValueLabel component\n *\n * @extends BaseValueProps\n */\nexport type ValueLabelProps = BaseValueProps<\n  string | number | string[] | number[]\n> & {\n  /**\n   * Label color variant or array of variants for multiple labels\n   */\n  variant?: LabelVariant | LabelVariant[];\n  /**\n   * Custom color or array of colors for multiple labels\n   */\n  color?: string | string[];\n};\n\n/**\n * Displays a label component value with a label\n */\nexport function ValueLabel({\n  label,\n  value: valueProp,\n  placeholder = DefaultPlaceholder,\n  color,\n  variant,\n}: ValueLabelProps) {\n  const id = getValueContentLabelId(label);\n  const value = Array.isArray(valueProp) ? (\n    valueProp.map((value, i) => (\n      <Label\n        text={value.toString() || placeholder}\n        variant={Array.isArray(variant) ? variant[i] : variant}\n        color={Array.isArray(color) ? color[i] : color}\n        key={i}\n      />\n    ))\n  ) : (\n    <Label\n      text={valueProp?.toString() || placeholder}\n      variant={Array.isArray(variant) ? variant[0] : variant}\n      color={Array.isArray(color) ? color[0] : color}\n    />\n  );\n\n  return (\n    <ValueContent label={label}>\n      <Grid container gap={1} aria-labelledby={id}>\n        {value}\n      </Grid>\n    </ValueContent>\n  );\n}\n\nexport default ValueLabel;\n"],"names":["ValueLabel","label","valueProp","placeholder","DefaultPlaceholder","color","variant","id","getValueContentLabelId","value","jsx","Label","ValueContent","Grid"],"mappings":";;;;;AA0BO,SAASA,EAAW;AAAA,EACzB,OAAAC;AAAA,EACA,OAAOC;AAAA,EACP,aAAAC,IAAcC;AAAA,EACd,OAAAC;AAAA,EACA,SAAAC;AACF,GAAoB;AAClB,QAAMC,IAAKC,EAAuBP,CAAK,GACjCQ,IAAQ,MAAM,QAAQP,CAAS,IACnCA,EAAU,IAAI,CAACO,GAAO,MACpB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMF,EAAM,SAAA,KAAcN;AAAA,MAC1B,SAAS,MAAM,QAAQG,CAAO,IAAIA,EAAQ,CAAC,IAAIA;AAAA,MAC/C,OAAO,MAAM,QAAQD,CAAK,IAAIA,EAAM,CAAC,IAAIA;AAAA,IAAA;AAAA,IACpC;AAAA,EAAA,CAER,IAED,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMT,GAAW,SAAA,KAAcC;AAAA,MAC/B,SAAS,MAAM,QAAQG,CAAO,IAAIA,EAAQ,CAAC,IAAIA;AAAA,MAC/C,OAAO,MAAM,QAAQD,CAAK,IAAIA,EAAM,CAAC,IAAIA;AAAA,IAAA;AAAA,EAAA;AAI7C,SACE,gBAAAK,EAACE,GAAA,EAAa,OAAAX,GACZ,UAAA,gBAAAS,EAACG,GAAA,EAAK,WAAS,IAAC,KAAK,GAAG,mBAAiBN,GACtC,UAAAE,EAAA,CACH,GACF;AAEJ;"}
+{"version":3,"file":"ValueLabel.mjs","sources":["../../src/ValueLabel/ValueLabel.tsx"],"sourcesContent":["import Grid from \"@mui/material/Grid\";\nimport Badge, { type BadgeVariant } from \"../components/badge\";\nimport { type BaseValueProps, DefaultPlaceholder } from \"../ValueBase\";\nimport ValueContent, { getValueContentLabelId } from \"../ValueContent\";\n\n/**\n * Props for the ValueLabel component\n *\n * @extends BaseValueProps\n */\nexport type ValueLabelProps = BaseValueProps<\n  string | number | string[] | number[]\n> & {\n  /**\n   * Label color variant or array of variants for multiple labels\n   */\n  variant?: BadgeVariant | BadgeVariant[];\n};\n\n/**\n * Displays a label component value with a label\n */\nexport function ValueLabel({\n  label,\n  value: valueProp,\n  placeholder = DefaultPlaceholder,\n  variant,\n}: ValueLabelProps) {\n  const id = getValueContentLabelId(label);\n  const value = Array.isArray(valueProp) ? (\n    valueProp.map((value, i) => (\n      <Badge\n        text={value.toString() || placeholder}\n        variant={Array.isArray(variant) ? variant[i] : variant}\n        key={i}\n      />\n    ))\n  ) : (\n    <Badge\n      text={valueProp?.toString() || placeholder}\n      variant={Array.isArray(variant) ? variant[0] : variant}\n    />\n  );\n\n  return (\n    <ValueContent label={label}>\n      <Grid container gap={1} aria-labelledby={id}>\n        {value}\n      </Grid>\n    </ValueContent>\n  );\n}\n\nexport default ValueLabel;\n"],"names":["ValueLabel","label","valueProp","placeholder","DefaultPlaceholder","variant","id","getValueContentLabelId","value","jsx","Badge","ValueContent","Grid"],"mappings":";;;;;AAsBO,SAASA,EAAW;AAAA,EACzB,OAAAC;AAAA,EACA,OAAOC;AAAA,EACP,aAAAC,IAAcC;AAAA,EACd,SAAAC;AACF,GAAoB;AAClB,QAAMC,IAAKC,EAAuBN,CAAK,GACjCO,IAAQ,MAAM,QAAQN,CAAS,IACnCA,EAAU,IAAI,CAACM,GAAO,MACpB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMF,EAAM,SAAA,KAAcL;AAAA,MAC1B,SAAS,MAAM,QAAQE,CAAO,IAAIA,EAAQ,CAAC,IAAIA;AAAA,IAAA;AAAA,IAC1C;AAAA,EAAA,CAER,IAED,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMR,GAAW,SAAA,KAAcC;AAAA,MAC/B,SAAS,MAAM,QAAQE,CAAO,IAAIA,EAAQ,CAAC,IAAIA;AAAA,IAAA;AAAA,EAAA;AAInD,SACE,gBAAAI,EAACE,GAAA,EAAa,OAAAV,GACZ,UAAA,gBAAAQ,EAACG,GAAA,EAAK,WAAS,IAAC,KAAK,GAAG,mBAAiBN,GACtC,UAAAE,EAAA,CACH,GACF;AAEJ;"}

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps } from 'react';
+import { Badge as UiBadge } from '../ui/badge';
+export type BadgeVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error" | "success";
+/**
+ * Props for the Badge component
+ */
+export interface BadgeProps extends Omit<ComponentProps<typeof UiBadge>, "children" | "variant"> {
+    /**
+     * Content of the component
+     */
+    text: string;
+    /**
+     * Color palette used to draw the component
+     */
+    variant?: BadgeVariant;
+}
+/**
+ * Compact badge wrapper for consumer-facing API
+ */
+export declare function Badge({ text, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export default Badge;

package/dist/components/badge/badge.mjs

@@ -0,0 +1,19 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Badge as n } from "../ui/badge.mjs";
+const o = {
+  default: "default",
+  primary: "default",
+  secondary: "secondary",
+  info: "outline",
+  warning: "outline",
+  error: "destructive",
+  success: "secondary"
+};
+function s({ text: a, variant: e = "default", ...r }) {
+  return /* @__PURE__ */ t(n, { variant: o[e], ...r, children: a });
+}
+export {
+  s as Badge,
+  s as default
+};
+//# sourceMappingURL=badge.mjs.map

package/dist/components/badge/badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.mjs","sources":["../../../src/components/badge/badge.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { Badge as UiBadge } from \"@/components/ui/badge\";\n\nexport type BadgeVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"default\"\n  | \"info\"\n  | \"warning\"\n  | \"error\"\n  | \"success\";\n\nconst variantMap: Record<\n  BadgeVariant,\n  ComponentProps<typeof UiBadge>[\"variant\"]\n> = {\n  default: \"default\",\n  primary: \"default\",\n  secondary: \"secondary\",\n  info: \"outline\",\n  warning: \"outline\",\n  error: \"destructive\",\n  success: \"secondary\",\n};\n\n/**\n * Props for the Badge component\n */\nexport interface BadgeProps\n  extends Omit<ComponentProps<typeof UiBadge>, \"children\" | \"variant\"> {\n  /**\n   * Content of the component\n   */\n  text: string;\n  /**\n   * Color palette used to draw the component\n   */\n  variant?: BadgeVariant;\n}\n\n/**\n * Compact badge wrapper for consumer-facing API\n */\nexport function Badge({ text, variant = \"default\", ...props }: BadgeProps) {\n  return (\n    <UiBadge variant={variantMap[variant]} {...props}>\n      {text}\n    </UiBadge>\n  );\n}\n\nexport default Badge;\n"],"names":["variantMap","Badge","text","variant","props","jsx","UiBadge"],"mappings":";;AAYA,MAAMA,IAGF;AAAA,EACF,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AACX;AAoBO,SAASC,EAAM,EAAE,MAAAC,GAAM,SAAAC,IAAU,WAAW,GAAGC,KAAqB;AACzE,SACE,gBAAAC,EAACC,KAAQ,SAASN,EAAWG,CAAO,GAAI,GAAGC,GACxC,UAAAF,GACH;AAEJ;"}

package/dist/components/badge/index.d.ts

@@ -0,0 +1,2 @@
+export type { BadgeProps, BadgeVariant } from './badge';
+export { default, default as Badge } from './badge';

package/dist/{Bullet/Bullet.d.ts → components/bullet/bullet.d.ts}

@@ -1,4 +1,3 @@
-import { SxProps, Theme } from '@mui/material/styles';
 export type BulletVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error";
 export declare const bulletClasses: {
     root: string;
@@ -12,12 +11,12 @@ export interface BulletProps {
      */
     variant?: BulletVariant;
     /**
-     * Custom styles
+     * Additional CSS classes for custom styling
      */
-    sx?: SxProps<Theme>;
+    className?: string;
 }
 /**
  * Dot to attract the user attention
  */
-export declare function Bullet({ variant, sx }: BulletProps): import("react/jsx-runtime").JSX.Element;
+export declare function Bullet({ variant, className }: BulletProps): import("react/jsx-runtime").JSX.Element;
 export default Bullet;

package/dist/components/bullet/bullet.mjs

@@ -0,0 +1,44 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cva as t } from "../../node_modules/class-variance-authority/dist/index.mjs";
+import { Badge as o } from "../ui/badge.mjs";
+import { cn as i } from "../../lib/utils.mjs";
+const l = {
+  root: "RdsBullet-root"
+}, n = t("bg-primary", {
+  variants: {
+    variant: {
+      primary: "bg-blue-500",
+      secondary: "bg-violet-500",
+      default: "bg-zinc-400",
+      info: "bg-sky-500",
+      warning: "bg-amber-500",
+      error: "bg-red-500"
+    }
+  },
+  defaultVariants: {
+    variant: "primary"
+  }
+});
+function d({ variant: r = "primary", className: a }) {
+  return /* @__PURE__ */ e(
+    o,
+    {
+      variant: "outline",
+      className: i(
+        l.root,
+        "inline-flex size-2.5 min-w-0 rounded-full border-0 p-0",
+        n({ variant: r }),
+        a
+      ),
+      role: "status",
+      "aria-label": `${r} bullet`,
+      "aria-describedby": r
+    }
+  );
+}
+export {
+  d as Bullet,
+  l as bulletClasses,
+  d as default
+};
+//# sourceMappingURL=bullet.mjs.map

package/dist/components/bullet/bullet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"bullet.mjs","sources":["../../../src/components/bullet/bullet.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\n\nexport type BulletVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"default\"\n  | \"info\"\n  | \"warning\"\n  | \"error\";\n\nexport const bulletClasses = {\n  root: \"RdsBullet-root\",\n};\n\nconst bulletVariants = cva(\"bg-primary\", {\n  variants: {\n    variant: {\n      primary: \"bg-blue-500\",\n      secondary: \"bg-violet-500\",\n      default: \"bg-zinc-400\",\n      info: \"bg-sky-500\",\n      warning: \"bg-amber-500\",\n      error: \"bg-red-500\",\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n  },\n});\n\n/**\n * Props for the Bullet component\n */\nexport interface BulletProps {\n  /**\n   * Color palette used to draw the component\n   */\n  variant?: BulletVariant;\n  /**\n   * Additional CSS classes for custom styling\n   */\n  className?: string;\n}\n\n/**\n * Dot to attract the user attention\n */\nexport function Bullet({ variant = \"primary\", className }: BulletProps) {\n  return (\n    <Badge\n      variant=\"outline\"\n      className={cn(\n        bulletClasses.root,\n        \"inline-flex size-2.5 min-w-0 rounded-full border-0 p-0\",\n        bulletVariants({ variant }),\n        className,\n      )}\n      role=\"status\"\n      aria-label={`${variant} bullet`}\n      aria-describedby={variant}\n    />\n  );\n}\n\nexport default Bullet;\n"],"names":["bulletClasses","bulletVariants","cva","Bullet","variant","className","jsx","Badge","cn"],"mappings":";;;;AAYO,MAAMA,IAAgB;AAAA,EAC3B,MAAM;AACR,GAEMC,IAAiBC,EAAI,cAAc;AAAA,EACvC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,EAAA;AAEb,CAAC;AAmBM,SAASC,EAAO,EAAE,SAAAC,IAAU,WAAW,WAAAC,KAA0B;AACtE,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAWC;AAAA,QACTR,EAAc;AAAA,QACd;AAAA,QACAC,EAAe,EAAE,SAAAG,GAAS;AAAA,QAC1BC;AAAA,MAAA;AAAA,MAEF,MAAK;AAAA,MACL,cAAY,GAAGD,CAAO;AAAA,MACtB,oBAAkBA;AAAA,IAAA;AAAA,EAAA;AAGxB;"}

package/dist/components/bullet/index.d.ts

@@ -0,0 +1,2 @@
+export * from './bullet';
+export { default, default as Bullet } from './bullet';

package/dist/components/button/button.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from 'react';
+import { Button as UiButton } from '../ui/button';
+export type ButtonVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error" | "success" | "outline" | "ghost" | "destructive" | "link";
+/**
+ * Props for the Button component
+ */
+export interface ButtonProps extends Omit<ComponentProps<typeof UiButton>, "variant"> {
+    /**
+     * Color palette used to draw the component
+     * @default "default"
+     */
+    variant?: ButtonVariant;
+}
+/**
+ * Consumer-facing button wrapper for public package API
+ */
+export declare function Button({ variant, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export default Button;

package/dist/components/button/button.mjs

@@ -0,0 +1,23 @@
+import { jsx as n } from "react/jsx-runtime";
+import { Button as o } from "../ui/button.mjs";
+const r = {
+  default: "default",
+  primary: "default",
+  secondary: "secondary",
+  info: "outline",
+  warning: "outline",
+  error: "destructive",
+  success: "secondary",
+  outline: "outline",
+  ghost: "ghost",
+  destructive: "destructive",
+  link: "link"
+};
+function i({ variant: t = "default", ...e }) {
+  return /* @__PURE__ */ n(o, { variant: r[t], ...e });
+}
+export {
+  i as Button,
+  i as default
+};
+//# sourceMappingURL=button.mjs.map