silver-ui 0.4.0 → 0.5.0

package/dist/{chunk-X574M2JB.cjs → chunk-6DAZ2ZOW.cjs}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkGC5VUTUR_cjs = require('./chunk-GC5VUTUR.cjs');
-var chunkAHVHLNHU_cjs = require('./chunk-AHVHLNHU.cjs');
-var chunkQOKEU3DC_cjs = require('./chunk-QOKEU3DC.cjs');
-var chunkM26XECB2_cjs = require('./chunk-M26XECB2.cjs');
+var chunkEZFQCREN_cjs = require('./chunk-EZFQCREN.cjs');
+var chunkZPJW3PP7_cjs = require('./chunk-ZPJW3PP7.cjs');
+var chunk5XMWGK3O_cjs = require('./chunk-5XMWGK3O.cjs');
+var chunk3Z5PF75J_cjs = require('./chunk-3Z5PF75J.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -42,7 +42,7 @@ function AlertDialog({
     onAction();
   }, [onAction]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkGC5VUTUR_cjs.Dialog,
+    chunkEZFQCREN_cjs.Dialog,
     {
       className,
       "data-testid": dataTestId,
@@ -54,14 +54,14 @@ function AlertDialog({
       style,
       width,
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        chunkAHVHLNHU_cjs.Layout,
+        chunkZPJW3PP7_cjs.Layout,
         {
-          content: /* @__PURE__ */ jsxRuntime.jsx(chunkAHVHLNHU_cjs.LayoutContent, { children: /* @__PURE__ */ jsxRuntime.jsx(chunkM26XECB2_cjs.Text, { as: "p", color: "secondary", children: description }) }),
+          content: /* @__PURE__ */ jsxRuntime.jsx(chunkZPJW3PP7_cjs.LayoutContent, { children: /* @__PURE__ */ jsxRuntime.jsx(chunk3Z5PF75J_cjs.Text, { as: "p", color: "secondary", children: description }) }),
           footer: /* @__PURE__ */ jsxRuntime.jsx(
-            chunkAHVHLNHU_cjs.LayoutFooter,
+            chunkZPJW3PP7_cjs.LayoutFooter,
             {
               primaryButton: /* @__PURE__ */ jsxRuntime.jsx(
-                chunkQOKEU3DC_cjs.Button,
+                chunk5XMWGK3O_cjs.Button,
                 {
                   isLoading: isActionLoading,
                   label: actionLabel,
@@ -70,7 +70,7 @@ function AlertDialog({
                 }
               ),
               secondaryButton: /* @__PURE__ */ jsxRuntime.jsx(
-                chunkQOKEU3DC_cjs.Button,
+                chunk5XMWGK3O_cjs.Button,
                 {
                   label: cancelLabel,
                   onClick: () => onOpenChange(false),
@@ -80,7 +80,7 @@ function AlertDialog({
             }
           ),
           hasDividers: true,
-          header: /* @__PURE__ */ jsxRuntime.jsx(chunkAHVHLNHU_cjs.LayoutHeader, { title })
+          header: /* @__PURE__ */ jsxRuntime.jsx(chunkZPJW3PP7_cjs.LayoutHeader, { title })
         }
       )
     }
@@ -104,5 +104,5 @@ function useAlertDialog() {
 
 exports.AlertDialog = AlertDialog;
 exports.useAlertDialog = useAlertDialog;
-//# sourceMappingURL=chunk-X574M2JB.cjs.map
-//# sourceMappingURL=chunk-X574M2JB.cjs.map
+//# sourceMappingURL=chunk-6DAZ2ZOW.cjs.map
+//# sourceMappingURL=chunk-6DAZ2ZOW.cjs.map

package/dist/chunk-6DAZ2ZOW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AlertDialog/AlertDialog.tsx","../src/components/AlertDialog/useAlertDialog.tsx"],"names":["useRef","useEffect","useCallback","jsx","Dialog","Layout","LayoutContent","Text","LayoutFooter","Button","LayoutHeader","useState"],"mappings":"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","file":"chunk-6DAZ2ZOW.cjs","sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useRef,\n  type CSSProperties,\n  type Ref,\n} from 'react';\nimport {Button} from 'components/Button';\nimport {Dialog} from 'components/Dialog';\nimport {\n  Layout,\n  LayoutContent,\n  LayoutFooter,\n  LayoutHeader,\n} from 'components/Layout';\nimport {Text} from 'components/Text';\n\nexport type AlertDialogActionVariant = 'destructive' | 'primary';\n\nexport interface AlertDialogProps {\n  /**\n   * Action button label.\n   */\n  actionLabel: string;\n  /**\n   * Visual variant for the action button.\n   * @default 'destructive'\n   */\n  actionVariant?: AlertDialogActionVariant;\n  /**\n   * Cancel button label.\n   * @default 'Cancel'\n   */\n  cancelLabel?: string;\n  /**\n   * Additional CSS class names applied to the dialog.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the dialog.\n   */\n  'data-testid'?: string;\n  /**\n   * Consequence description.\n   */\n  description: string;\n  /**\n   * Whether the action button is loading.\n   * @default false\n   */\n  isActionLoading?: boolean;\n  /**\n   * Whether the dialog is open.\n   */\n  isOpen: boolean;\n  /**\n   * Called when the primary action is clicked.\n   */\n  onAction: () => void;\n  /**\n   * Called when the dialog requests an open-state change.\n   */\n  onOpenChange: (isOpen: boolean) => void;\n  /**\n   * Ref forwarded to the dialog element.\n   */\n  ref?: Ref<HTMLDialogElement>;\n  /**\n   * Inline styles applied to the dialog.\n   */\n  style?: CSSProperties;\n  /**\n   * Dialog title.\n   */\n  title: string;\n  /**\n   * Dialog width. Numbers are treated as pixels.\n   * @default 400\n   */\n  width?: number | string;\n}\n\n/**\n * A modal confirmation dialog for destructive or irreversible actions.\n */\nexport function AlertDialog({\n  actionLabel,\n  actionVariant = 'destructive',\n  cancelLabel = 'Cancel',\n  className,\n  'data-testid': dataTestId,\n  description,\n  isActionLoading = false,\n  isOpen,\n  onAction,\n  onOpenChange,\n  ref,\n  style,\n  title,\n  width = 400,\n}: AlertDialogProps): React.JSX.Element | null {\n  /**\n   * Synchronous guard against rapid double-invocation of onAction.\n   * The ref flips immediately on the first call — before React can\n   * re-render with `isActionLoading=true` — so a second Enter/click\n   * in the same event-loop tick is ignored.\n   */\n  const actionFiredRef = useRef(false);\n\n  useEffect(() => {\n    if (!isActionLoading) {\n      actionFiredRef.current = false;\n    }\n  }, [isActionLoading]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      actionFiredRef.current = false;\n    }\n  }, [isOpen]);\n\n  const handleAction = useCallback(() => {\n    if (actionFiredRef.current) {\n      return;\n    }\n    actionFiredRef.current = true;\n    onAction();\n  }, [onAction]);\n\n  return (\n    <Dialog\n      className={className}\n      data-testid={dataTestId}\n      dismissBehavior={false}\n      isOpen={isOpen}\n      onOpenChange={onOpenChange}\n      ref={ref}\n      role=\"alertdialog\"\n      style={style}\n      width={width}>\n      <Layout\n        content={\n          <LayoutContent>\n            <Text as=\"p\" color=\"secondary\">\n              {description}\n            </Text>\n          </LayoutContent>\n        }\n        footer={\n          <LayoutFooter\n            primaryButton={\n              <Button\n                isLoading={isActionLoading}\n                label={actionLabel}\n                onClick={handleAction}\n                variant={actionVariant}\n              />\n            }\n            secondaryButton={\n              <Button\n                label={cancelLabel}\n                onClick={() => onOpenChange(false)}\n                variant=\"ghost\"\n              />\n            }\n          />\n        }\n        hasDividers\n        header={<LayoutHeader title={title} />}\n      />\n    </Dialog>\n  );\n}\n\nAlertDialog.displayName = 'AlertDialog';\n","import {useCallback, useState, type ReactNode} from 'react';\nimport {\n  AlertDialog,\n  type AlertDialogProps,\n} from 'components/AlertDialog/AlertDialog';\n\nexport type AlertDialogOptions = Omit<\n  AlertDialogProps,\n  'isOpen' | 'onOpenChange'\n>;\n\nexport interface UseAlertDialogReturn {\n  /**\n   * Render this element in your tree.\n   */\n  element: ReactNode;\n  /**\n   * Hide the current alert dialog.\n   */\n  hide: () => void;\n  /**\n   * Whether the alert dialog is open.\n   */\n  isOpen: boolean;\n  /**\n   * Show an alert dialog with the provided options.\n   */\n  show: (options: AlertDialogOptions) => void;\n}\n\nexport function useAlertDialog(): UseAlertDialogReturn {\n  const [isOpen, setIsOpen] = useState(false);\n  const [options, setOptions] = useState<AlertDialogOptions | null>(null);\n\n  const show = useCallback((nextOptions: AlertDialogOptions) => {\n    setOptions(nextOptions);\n    setIsOpen(true);\n  }, []);\n  const hide = useCallback(() => {\n    setIsOpen(false);\n    setOptions(null);\n  }, []);\n\n  const element: ReactNode =\n    options == null ? null : (\n      <AlertDialog {...options} isOpen={isOpen} onOpenChange={setIsOpen} />\n    );\n\n  return {element, hide, isOpen, show};\n}\n"]}

package/dist/{chunk-2N6FOSNM.js → chunk-6EYLEVC6.js}

@@ -1,9 +1,9 @@
 import { useDialogContext } from './chunk-BKKLUIIU.js';
-import { Button } from './chunk-2LABTS4P.js';
-import { Heading, Text } from './chunk-QRFDPG34.js';
+import { Button } from './chunk-THTVYP5V.js';
+import { Heading, Text } from './chunk-RJEZBOSH.js';
 import { isReactNode } from './chunk-2PSZAWLC.js';
+import { sva } from './chunk-IAVZKGZS.js';
 import { cva } from './chunk-FMEIPGUP.js';
-import { css } from './chunk-OD4DHHZH.js';
 import { cx } from './chunk-PPNETWIP.js';
 import { createContext, useMemo, use } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -23,34 +23,194 @@ var paddingVariants = {
   8: { p: "8" },
   10: { p: "10" }
 };
-var layoutRecipe = cva({
+var rootPaddingVariants = {
+  0: { root: { p: "0" } },
+  0.5: { root: { p: "0.5" } },
+  1: { root: { p: "1" } },
+  1.5: { root: { p: "1.5" } },
+  2: { root: { p: "2" } },
+  3: { root: { p: "3" } },
+  4: { root: { p: "4" } },
+  5: { root: { p: "5" } },
+  6: { root: { p: "6" } },
+  8: { root: { p: "8" } },
+  10: { root: { p: "10" } }
+};
+var layoutRecipe = sva({
+  slots: ["root", "middle", "content"],
   base: {
-    display: "flex",
-    flexDirection: "column",
-    minW: 0
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      minW: 0
+    },
+    middle: {
+      display: "flex",
+      flex: 1,
+      minH: 0,
+      minW: 0
+    },
+    content: {
+      flex: 1,
+      minW: 0,
+      display: "flex",
+      flexDirection: "column"
+    }
   },
   variants: {
     height: {
       fill: {
-        h: "100%",
-        minH: 0
+        root: { h: "100%", minH: 0 }
       },
       auto: {
-        minH: "100%"
+        root: { minH: "100%" }
       }
     },
-    padding: paddingVariants
+    padding: rootPaddingVariants
   },
   defaultVariants: {
     height: "fill"
   }
 });
-var layoutMiddleRecipe = cva({
+var layoutPanelRecipe = cva({
+  base: {
+    flexShrink: 0,
+    overflow: "clip"
+  },
+  variants: {
+    isScrollable: {
+      true: { overflow: "auto" }
+    },
+    divider: {
+      none: {},
+      // Border on the edge adjacent to the content area: inline-end for a start
+      // panel, inline-start for an end panel.
+      start: {
+        borderInlineEndWidth: "default",
+        borderInlineEndStyle: "solid",
+        borderInlineEndColor: "border"
+      },
+      end: {
+        borderInlineStartWidth: "default",
+        borderInlineStartStyle: "solid",
+        borderInlineStartColor: "border"
+      }
+    }
+  },
+  defaultVariants: {
+    isScrollable: true,
+    divider: "none"
+  }
+});
+var layoutContentRecipe = cva({
   base: {
-    display: "flex",
     flex: 1,
     minH: 0,
-    minW: 0
+    minW: 0,
+    overflow: "clip"
+  },
+  variants: {
+    isScrollable: {
+      true: { overflow: "auto" }
+    }
+  },
+  defaultVariants: {
+    isScrollable: true
+  }
+});
+var layoutHeaderRecipe = sva({
+  slots: ["root", "inner", "titleArea", "actions", "closeButton"],
+  base: {
+    root: {
+      flexShrink: 0
+    },
+    inner: {
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "space-between",
+      gap: "3"
+    },
+    titleArea: {
+      flex: 1,
+      minW: 0,
+      "& > :focus": {
+        outline: "none"
+      }
+    },
+    actions: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      flexShrink: 0
+    },
+    closeButton: {
+      marginInlineEnd: "-2",
+      marginBlockStart: "-2"
+    }
+  },
+  variants: {
+    hasDivider: {
+      true: {
+        root: {
+          borderBlockEndWidth: "default",
+          borderBlockEndStyle: "solid",
+          borderBlockEndColor: "border"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    hasDivider: false
+  }
+});
+var layoutFooterRecipe = sva({
+  slots: ["root", "inner", "start", "actions"],
+  base: {
+    root: {
+      flexShrink: 0
+    },
+    start: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      flex: 1,
+      minW: 0,
+      marginInlineEnd: "auto"
+    },
+    actions: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      flexShrink: 0
+    }
+  },
+  variants: {
+    hasDivider: {
+      true: {
+        root: {
+          borderBlockStartWidth: "default",
+          borderBlockStartStyle: "solid",
+          borderBlockStartColor: "border"
+        }
+      }
+    },
+    // Custom footers render arbitrary children, so the inner element drops the
+    // action-row flex layout.
+    isCustom: {
+      false: {
+        inner: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          gap: "3"
+        }
+      },
+      true: {}
+    }
+  },
+  defaultVariants: {
+    hasDivider: false,
+    isCustom: false
   }
 });
 var layoutRegionRecipe = cva({
@@ -63,13 +223,6 @@ var layoutRegionRecipe = cva({
 });
 var LayoutAreaContext = createContext("content");
 LayoutAreaContext.displayName = "LayoutAreaContext";
-var LayoutSlotsContext = createContext({
-  hasEnd: false,
-  hasFooter: false,
-  hasHeader: false,
-  hasStart: false
-});
-LayoutSlotsContext.displayName = "LayoutSlotsContext";
 var LayoutDividerContext = createContext(null);
 LayoutDividerContext.displayName = "LayoutDividerContext";
 function useLayoutArea() {
@@ -78,14 +231,6 @@ function useLayoutArea() {
 function useLayoutDivider() {
   return use(LayoutDividerContext);
 }
-var styles = {
-  contentFill: css({
-    flex: 1,
-    minW: 0,
-    display: "flex",
-    flexDirection: "column"
-  })
-};
 function AreaProvider({
   area,
   children
@@ -109,50 +254,28 @@ function Layout({
   start,
   style
 }) {
-  const slots = useMemo(
-    () => ({
-      hasEnd: isReactNode(end),
-      hasFooter: isReactNode(footer),
-      hasHeader: isReactNode(header),
-      hasStart: isReactNode(start)
-    }),
-    [end, footer, header, start]
-  );
   const dividerValue = useMemo(() => ({ hasDividers }), [hasDividers]);
-  const rootStyle = {
-    ...style
-  };
-  return /* @__PURE__ */ jsx(LayoutDividerContext, { value: dividerValue, children: /* @__PURE__ */ jsx(LayoutSlotsContext, { value: slots, children: /* @__PURE__ */ jsxs(
+  const classes = layoutRecipe({ height, padding });
+  return /* @__PURE__ */ jsx(LayoutDividerContext, { value: dividerValue, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx(layoutRecipe({ height, padding }), className),
+      className: cx(classes.root, className),
       "data-testid": dataTestId,
       ref,
-      style: rootStyle,
+      style,
       children: [
         /* @__PURE__ */ jsx(AreaProvider, { area: "header", children: header }),
-        /* @__PURE__ */ jsxs("div", { className: layoutMiddleRecipe(), children: [
+        /* @__PURE__ */ jsxs("div", { className: classes.middle, children: [
           /* @__PURE__ */ jsx(AreaProvider, { area: "start", children: start }),
-          /* @__PURE__ */ jsx("div", { className: styles.contentFill, children: /* @__PURE__ */ jsx(AreaProvider, { area: "content", children: content }) }),
+          /* @__PURE__ */ jsx("div", { className: classes.content, children: /* @__PURE__ */ jsx(AreaProvider, { area: "content", children: content }) }),
           /* @__PURE__ */ jsx(AreaProvider, { area: "end", children: end })
         ] }),
         /* @__PURE__ */ jsx(AreaProvider, { area: "footer", children: footer })
       ]
     }
-  ) }) });
+  ) });
 }
 Layout.displayName = "Layout";
-var styles2 = {
-  root: css({
-    flex: 1,
-    minH: 0,
-    minW: 0,
-    overflow: "clip"
-  }),
-  scrollable: css({
-    overflow: "auto"
-  })
-};
 function LayoutContent({
   as: Element = "div",
   children,
@@ -172,9 +295,8 @@ function LayoutContent({
       ...rest,
       "aria-label": label,
       className: cx(
-        styles2.root,
+        layoutContentRecipe({ isScrollable }),
         layoutRegionRecipe({ padding }),
-        isScrollable && styles2.scrollable,
         className
       ),
       "data-testid": dataTestId,
@@ -186,37 +308,6 @@ function LayoutContent({
   );
 }
 LayoutContent.displayName = "LayoutContent";
-var styles3 = {
-  root: css({
-    flexShrink: 0
-  }),
-  divider: css({
-    borderBlockStartWidth: "default",
-    borderBlockStartStyle: "solid",
-    borderBlockStartColor: "border"
-  }),
-  inner: css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    gap: "3"
-  }),
-  customInner: css({}),
-  start: css({
-    display: "flex",
-    alignItems: "center",
-    gap: "2",
-    flex: 1,
-    minW: 0,
-    marginInlineEnd: "auto"
-  }),
-  actions: css({
-    display: "flex",
-    alignItems: "center",
-    gap: "2",
-    flexShrink: 0
-  })
-};
 function LayoutFooter({
   children,
   className,
@@ -234,68 +325,28 @@ function LayoutFooter({
   const hasDivider = dividerContext?.hasDividers ?? false;
   const rootStyle = { height, ...style };
   const isCustom = isReactNode(children);
+  const hasActions = isReactNode(primaryButton) || isReactNode(secondaryButton);
+  const classes = layoutFooterRecipe({ hasDivider, isCustom });
   return /* @__PURE__ */ jsx(
     "footer",
     {
       "aria-label": label,
-      className: cx(styles3.root, hasDivider && styles3.divider, className),
+      className: cx(classes.root, className),
       "data-divider": hasDivider || void 0,
       "data-testid": dataTestId,
       ref,
       style: rootStyle,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cx(
-            isCustom ? styles3.customInner : styles3.inner,
-            layoutRegionRecipe({ padding })
-          ),
-          children: isCustom ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
-            isReactNode(startContent) ? /* @__PURE__ */ jsx("div", { className: styles3.start, children: startContent }) : null,
-            /* @__PURE__ */ jsxs("div", { className: styles3.actions, children: [
-              secondaryButton,
-              primaryButton
-            ] })
-          ] })
-        }
-      )
+      children: /* @__PURE__ */ jsx("div", { className: cx(classes.inner, layoutRegionRecipe({ padding })), children: isCustom ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        isReactNode(startContent) ? /* @__PURE__ */ jsx("div", { className: classes.start, children: startContent }) : null,
+        hasActions ? /* @__PURE__ */ jsxs("div", { className: classes.actions, children: [
+          secondaryButton,
+          primaryButton
+        ] }) : null
+      ] }) })
     }
   );
 }
 LayoutFooter.displayName = "LayoutFooter";
-var styles4 = {
-  root: css({
-    flexShrink: 0
-  }),
-  divider: css({
-    borderBlockEndWidth: "default",
-    borderBlockEndStyle: "solid",
-    borderBlockEndColor: "border"
-  }),
-  inner: css({
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "space-between",
-    gap: "3"
-  }),
-  titleArea: css({
-    flex: 1,
-    minW: 0,
-    "& > :focus": {
-      outline: "none"
-    }
-  }),
-  actions: css({
-    display: "flex",
-    alignItems: "center",
-    gap: "2",
-    flexShrink: 0
-  }),
-  closeButton: css({
-    marginInlineEnd: "-2",
-    marginBlockStart: "-2"
-  })
-};
 function LayoutHeader({
   className,
   "data-testid": dataTestId,
@@ -313,10 +364,11 @@ function LayoutHeader({
   const dialogContext = useDialogContext();
   const hasDivider = dividerContext?.hasDividers ?? false;
   const rootStyle = { height, ...style };
+  const classes = layoutHeaderRecipe({ hasDivider });
   const closeButton = dialogContext != null ? /* @__PURE__ */ jsx(
     Button,
     {
-      className: styles4.closeButton,
+      className: classes.closeButton,
       icon: X,
       isIconOnly: true,
       label: "Close",
@@ -329,13 +381,13 @@ function LayoutHeader({
     "header",
     {
       "aria-label": label,
-      className: cx(styles4.root, hasDivider && styles4.divider, className),
+      className: cx(classes.root, className),
       "data-testid": dataTestId,
       ref,
       style: rootStyle,
-      children: /* @__PURE__ */ jsxs("div", { className: cx(styles4.inner, layoutRegionRecipe({ padding })), children: [
-        isReactNode(startContent) ? /* @__PURE__ */ jsx("div", { className: styles4.actions, children: startContent }) : null,
-        /* @__PURE__ */ jsxs("div", { className: styles4.titleArea, children: [
+      children: /* @__PURE__ */ jsxs("div", { className: cx(classes.inner, layoutRegionRecipe({ padding })), children: [
+        isReactNode(startContent) ? /* @__PURE__ */ jsx("div", { className: classes.actions, children: startContent }) : null,
+        /* @__PURE__ */ jsxs("div", { className: classes.titleArea, children: [
           /* @__PURE__ */ jsx(
             Heading,
             {
@@ -348,7 +400,7 @@ function LayoutHeader({
           ),
           subtitle != null ? /* @__PURE__ */ jsx(Text, { as: "p", color: "secondary", type: "supporting", children: subtitle }) : null
         ] }),
-        hasEnd ? /* @__PURE__ */ jsxs("div", { className: styles4.actions, children: [
+        hasEnd ? /* @__PURE__ */ jsxs("div", { className: classes.actions, children: [
           endContent,
           closeButton
         ] }) : null
@@ -357,25 +409,6 @@ function LayoutHeader({
   );
 }
 LayoutHeader.displayName = "LayoutHeader";
-var styles5 = {
-  root: css({
-    flexShrink: 0,
-    overflow: "clip"
-  }),
-  scrollable: css({
-    overflow: "auto"
-  }),
-  dividerEnd: css({
-    borderInlineEndWidth: "default",
-    borderInlineEndStyle: "solid",
-    borderInlineEndColor: "border"
-  }),
-  dividerStart: css({
-    borderInlineStartWidth: "default",
-    borderInlineStartStyle: "solid",
-    borderInlineStartColor: "border"
-  })
-};
 function LayoutPanel({
   children,
   className,
@@ -392,17 +425,15 @@ function LayoutPanel({
   const area = useLayoutArea();
   const dividerContext = useLayoutDivider();
   const hasDivider = dividerContext?.hasDividers ?? false;
+  const divider = hasDivider && (area === "start" || area === "end") ? area : "none";
   return /* @__PURE__ */ jsx(
     "div",
     {
       ...rest,
       "aria-label": label,
       className: cx(
-        styles5.root,
+        layoutPanelRecipe({ isScrollable, divider }),
         layoutRegionRecipe({ padding }),
-        isScrollable && styles5.scrollable,
-        hasDivider && area === "start" && styles5.dividerEnd,
-        hasDivider && area === "end" && styles5.dividerStart,
         className
       ),
       "data-testid": dataTestId,
@@ -416,5 +447,5 @@ function LayoutPanel({
 LayoutPanel.displayName = "LayoutPanel";
 
 export { Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutPanel };
-//# sourceMappingURL=chunk-2N6FOSNM.js.map
-//# sourceMappingURL=chunk-2N6FOSNM.js.map
+//# sourceMappingURL=chunk-6EYLEVC6.js.map
+//# sourceMappingURL=chunk-6EYLEVC6.js.map