silver-ui 0.4.0 → 0.6.0

package/dist/{chunk-AHVHLNHU.cjs → chunk-H7VK36SZ.cjs}

@@ -1,11 +1,11 @@
 'use strict';
 
 var chunkH7LOOHWU_cjs = require('./chunk-H7LOOHWU.cjs');
-var chunkQOKEU3DC_cjs = require('./chunk-QOKEU3DC.cjs');
-var chunkM26XECB2_cjs = require('./chunk-M26XECB2.cjs');
+var chunkVXOIOPGZ_cjs = require('./chunk-VXOIOPGZ.cjs');
+var chunkMHAXS4GO_cjs = require('./chunk-MHAXS4GO.cjs');
 var chunkQAO6QMNQ_cjs = require('./chunk-QAO6QMNQ.cjs');
+var chunkZ6RT3WPE_cjs = require('./chunk-Z6RT3WPE.cjs');
 var chunkJRBQKFVO_cjs = require('./chunk-JRBQKFVO.cjs');
-var chunkRU6JG3FS_cjs = require('./chunk-RU6JG3FS.cjs');
 var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -25,34 +25,200 @@ var paddingVariants = {
   8: { p: "8" },
   10: { p: "10" }
 };
-var layoutRecipe = chunkJRBQKFVO_cjs.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 = chunkZ6RT3WPE_cjs.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 = chunkJRBQKFVO_cjs.cva({
+var layoutPanelRecipe = chunkJRBQKFVO_cjs.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 = chunkJRBQKFVO_cjs.cva({
   base: {
-    display: "flex",
     flex: 1,
     minH: 0,
-    minW: 0
+    minW: 0,
+    overflow: "clip"
+  },
+  variants: {
+    isScrollable: {
+      true: { overflow: "auto" }
+    }
+  },
+  defaultVariants: {
+    isScrollable: true
+  }
+});
+var layoutHeaderRecipe = chunkZ6RT3WPE_cjs.sva({
+  slots: ["root", "inner", "titleArea", "actions", "closeButton"],
+  base: {
+    root: {
+      flexShrink: 0
+    },
+    inner: {
+      display: "flex",
+      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: {
+    // Cross-axis alignment of the start/title/end slots within the header row.
+    align: {
+      start: { inner: { alignItems: "flex-start" } },
+      center: { inner: { alignItems: "center" } },
+      end: { inner: { alignItems: "flex-end" } }
+    },
+    hasDivider: {
+      true: {
+        root: {
+          borderBlockEndWidth: "default",
+          borderBlockEndStyle: "solid",
+          borderBlockEndColor: "border"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    align: "start",
+    hasDivider: false
+  }
+});
+var layoutFooterRecipe = chunkZ6RT3WPE_cjs.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 = chunkJRBQKFVO_cjs.cva({
@@ -65,13 +231,6 @@ var layoutRegionRecipe = chunkJRBQKFVO_cjs.cva({
 });
 var LayoutAreaContext = react.createContext("content");
 LayoutAreaContext.displayName = "LayoutAreaContext";
-var LayoutSlotsContext = react.createContext({
-  hasEnd: false,
-  hasFooter: false,
-  hasHeader: false,
-  hasStart: false
-});
-LayoutSlotsContext.displayName = "LayoutSlotsContext";
 var LayoutDividerContext = react.createContext(null);
 LayoutDividerContext.displayName = "LayoutDividerContext";
 function useLayoutArea() {
@@ -80,14 +239,6 @@ function useLayoutArea() {
 function useLayoutDivider() {
   return react.use(LayoutDividerContext);
 }
-var styles = {
-  contentFill: chunkRU6JG3FS_cjs.css({
-    flex: 1,
-    minW: 0,
-    display: "flex",
-    flexDirection: "column"
-  })
-};
 function AreaProvider({
   area,
   children
@@ -111,50 +262,28 @@ function Layout({
   start,
   style
 }) {
-  const slots = react.useMemo(
-    () => ({
-      hasEnd: chunkQAO6QMNQ_cjs.isReactNode(end),
-      hasFooter: chunkQAO6QMNQ_cjs.isReactNode(footer),
-      hasHeader: chunkQAO6QMNQ_cjs.isReactNode(header),
-      hasStart: chunkQAO6QMNQ_cjs.isReactNode(start)
-    }),
-    [end, footer, header, start]
-  );
   const dividerValue = react.useMemo(() => ({ hasDividers }), [hasDividers]);
-  const rootStyle = {
-    ...style
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(LayoutDividerContext, { value: dividerValue, children: /* @__PURE__ */ jsxRuntime.jsx(LayoutSlotsContext, { value: slots, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  const classes = layoutRecipe({ height, padding });
+  return /* @__PURE__ */ jsxRuntime.jsx(LayoutDividerContext, { value: dividerValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: chunkSPDVNY2Z_cjs.cx(layoutRecipe({ height, padding }), className),
+      className: chunkSPDVNY2Z_cjs.cx(classes.root, className),
       "data-testid": dataTestId,
       ref,
-      style: rootStyle,
+      style,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(AreaProvider, { area: "header", children: header }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: layoutMiddleRecipe(), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.middle, children: [
           /* @__PURE__ */ jsxRuntime.jsx(AreaProvider, { area: "start", children: start }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.contentFill, children: /* @__PURE__ */ jsxRuntime.jsx(AreaProvider, { area: "content", children: content }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.content, children: /* @__PURE__ */ jsxRuntime.jsx(AreaProvider, { area: "content", children: content }) }),
           /* @__PURE__ */ jsxRuntime.jsx(AreaProvider, { area: "end", children: end })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(AreaProvider, { area: "footer", children: footer })
       ]
     }
-  ) }) });
+  ) });
 }
 Layout.displayName = "Layout";
-var styles2 = {
-  root: chunkRU6JG3FS_cjs.css({
-    flex: 1,
-    minH: 0,
-    minW: 0,
-    overflow: "clip"
-  }),
-  scrollable: chunkRU6JG3FS_cjs.css({
-    overflow: "auto"
-  })
-};
 function LayoutContent({
   as: Element = "div",
   children,
@@ -174,9 +303,8 @@ function LayoutContent({
       ...rest,
       "aria-label": label,
       className: chunkSPDVNY2Z_cjs.cx(
-        styles2.root,
+        layoutContentRecipe({ isScrollable }),
         layoutRegionRecipe({ padding }),
-        isScrollable && styles2.scrollable,
         className
       ),
       "data-testid": dataTestId,
@@ -188,37 +316,6 @@ function LayoutContent({
   );
 }
 LayoutContent.displayName = "LayoutContent";
-var styles3 = {
-  root: chunkRU6JG3FS_cjs.css({
-    flexShrink: 0
-  }),
-  divider: chunkRU6JG3FS_cjs.css({
-    borderBlockStartWidth: "default",
-    borderBlockStartStyle: "solid",
-    borderBlockStartColor: "border"
-  }),
-  inner: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    gap: "3"
-  }),
-  customInner: chunkRU6JG3FS_cjs.css({}),
-  start: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "center",
-    gap: "2",
-    flex: 1,
-    minW: 0,
-    marginInlineEnd: "auto"
-  }),
-  actions: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "center",
-    gap: "2",
-    flexShrink: 0
-  })
-};
 function LayoutFooter({
   children,
   className,
@@ -236,69 +333,30 @@ function LayoutFooter({
   const hasDivider = dividerContext?.hasDividers ?? false;
   const rootStyle = { height, ...style };
   const isCustom = chunkQAO6QMNQ_cjs.isReactNode(children);
+  const hasActions = chunkQAO6QMNQ_cjs.isReactNode(primaryButton) || chunkQAO6QMNQ_cjs.isReactNode(secondaryButton);
+  const classes = layoutFooterRecipe({ hasDivider, isCustom });
   return /* @__PURE__ */ jsxRuntime.jsx(
     "footer",
     {
       "aria-label": label,
-      className: chunkSPDVNY2Z_cjs.cx(styles3.root, hasDivider && styles3.divider, className),
+      className: chunkSPDVNY2Z_cjs.cx(classes.root, className),
       "data-divider": hasDivider || void 0,
       "data-testid": dataTestId,
       ref,
       style: rootStyle,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: chunkSPDVNY2Z_cjs.cx(
-            isCustom ? styles3.customInner : styles3.inner,
-            layoutRegionRecipe({ padding })
-          ),
-          children: isCustom ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            chunkQAO6QMNQ_cjs.isReactNode(startContent) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles3.start, children: startContent }) : null,
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles3.actions, children: [
-              secondaryButton,
-              primaryButton
-            ] })
-          ] })
-        }
-      )
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkSPDVNY2Z_cjs.cx(classes.inner, layoutRegionRecipe({ padding })), children: isCustom ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        chunkQAO6QMNQ_cjs.isReactNode(startContent) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.start, children: startContent }) : null,
+        hasActions ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.actions, children: [
+          secondaryButton,
+          primaryButton
+        ] }) : null
+      ] }) })
     }
   );
 }
 LayoutFooter.displayName = "LayoutFooter";
-var styles4 = {
-  root: chunkRU6JG3FS_cjs.css({
-    flexShrink: 0
-  }),
-  divider: chunkRU6JG3FS_cjs.css({
-    borderBlockEndWidth: "default",
-    borderBlockEndStyle: "solid",
-    borderBlockEndColor: "border"
-  }),
-  inner: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "space-between",
-    gap: "3"
-  }),
-  titleArea: chunkRU6JG3FS_cjs.css({
-    flex: 1,
-    minW: 0,
-    "& > :focus": {
-      outline: "none"
-    }
-  }),
-  actions: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "center",
-    gap: "2",
-    flexShrink: 0
-  }),
-  closeButton: chunkRU6JG3FS_cjs.css({
-    marginInlineEnd: "-2",
-    marginBlockStart: "-2"
-  })
-};
 function LayoutHeader({
+  align = "start",
   className,
   "data-testid": dataTestId,
   endContent,
@@ -315,10 +373,11 @@ function LayoutHeader({
   const dialogContext = chunkH7LOOHWU_cjs.useDialogContext();
   const hasDivider = dividerContext?.hasDividers ?? false;
   const rootStyle = { height, ...style };
+  const classes = layoutHeaderRecipe({ align, hasDivider });
   const closeButton = dialogContext != null ? /* @__PURE__ */ jsxRuntime.jsx(
-    chunkQOKEU3DC_cjs.Button,
+    chunkVXOIOPGZ_cjs.Button,
     {
-      className: styles4.closeButton,
+      className: classes.closeButton,
       icon: lucideReact.X,
       isIconOnly: true,
       label: "Close",
@@ -331,15 +390,15 @@ function LayoutHeader({
     "header",
     {
       "aria-label": label,
-      className: chunkSPDVNY2Z_cjs.cx(styles4.root, hasDivider && styles4.divider, className),
+      className: chunkSPDVNY2Z_cjs.cx(classes.root, className),
       "data-testid": dataTestId,
       ref,
       style: rootStyle,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkSPDVNY2Z_cjs.cx(styles4.inner, layoutRegionRecipe({ padding })), children: [
-        chunkQAO6QMNQ_cjs.isReactNode(startContent) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles4.actions, children: startContent }) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles4.titleArea, children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkSPDVNY2Z_cjs.cx(classes.inner, layoutRegionRecipe({ padding })), children: [
+        chunkQAO6QMNQ_cjs.isReactNode(startContent) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children: startContent }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleArea, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkM26XECB2_cjs.Heading,
+            chunkMHAXS4GO_cjs.Heading,
             {
               "data-dialog-autofocus": dialogContext != null ? "true" : void 0,
               id: dialogContext?.titleId,
@@ -348,9 +407,9 @@ function LayoutHeader({
               children: title
             }
           ),
-          subtitle != null ? /* @__PURE__ */ jsxRuntime.jsx(chunkM26XECB2_cjs.Text, { as: "p", color: "secondary", type: "supporting", children: subtitle }) : null
+          subtitle != null ? /* @__PURE__ */ jsxRuntime.jsx(chunkMHAXS4GO_cjs.Text, { as: "p", color: "secondary", type: "supporting", children: subtitle }) : null
         ] }),
-        hasEnd ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles4.actions, children: [
+        hasEnd ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.actions, children: [
           endContent,
           closeButton
         ] }) : null
@@ -359,25 +418,6 @@ function LayoutHeader({
   );
 }
 LayoutHeader.displayName = "LayoutHeader";
-var styles5 = {
-  root: chunkRU6JG3FS_cjs.css({
-    flexShrink: 0,
-    overflow: "clip"
-  }),
-  scrollable: chunkRU6JG3FS_cjs.css({
-    overflow: "auto"
-  }),
-  dividerEnd: chunkRU6JG3FS_cjs.css({
-    borderInlineEndWidth: "default",
-    borderInlineEndStyle: "solid",
-    borderInlineEndColor: "border"
-  }),
-  dividerStart: chunkRU6JG3FS_cjs.css({
-    borderInlineStartWidth: "default",
-    borderInlineStartStyle: "solid",
-    borderInlineStartColor: "border"
-  })
-};
 function LayoutPanel({
   children,
   className,
@@ -394,17 +434,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__ */ jsxRuntime.jsx(
     "div",
     {
       ...rest,
       "aria-label": label,
       className: chunkSPDVNY2Z_cjs.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,
@@ -422,5 +460,5 @@ exports.LayoutContent = LayoutContent;
 exports.LayoutFooter = LayoutFooter;
 exports.LayoutHeader = LayoutHeader;
 exports.LayoutPanel = LayoutPanel;
-//# sourceMappingURL=chunk-AHVHLNHU.cjs.map
-//# sourceMappingURL=chunk-AHVHLNHU.cjs.map
+//# sourceMappingURL=chunk-H7VK36SZ.cjs.map
+//# sourceMappingURL=chunk-H7VK36SZ.cjs.map

package/dist/chunk-H7VK36SZ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Layout/Layout.recipe.ts","../src/components/Layout/LayoutContext.ts","../src/components/Layout/Layout.tsx","../src/components/Layout/LayoutContent.tsx","../src/components/Layout/LayoutFooter.tsx","../src/components/Layout/LayoutHeader.tsx","../src/components/Layout/LayoutPanel.tsx"],"names":["sva","cva","createContext","use","isReactNode","jsx","useMemo","jsxs","cx","Fragment","useDialogContext","Button","X","Heading","Text"],"mappings":";;;;;;;;;;;;;;AAEA,IAAM,eAAA,GAAkB;AAAA,EACtB,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAG;AAAA,EACV,GAAA,EAAK,EAAC,CAAA,EAAG,KAAA,EAAK;AAAA,EACd,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAG;AAAA,EACV,GAAA,EAAK,EAAC,CAAA,EAAG,KAAA,EAAK;AAAA,EACd,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAG;AAAA,EACV,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAG;AAAA,EACV,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAG;AAAA,EACV,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAG;AAAA,EACV,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAG;AAAA,EACV,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAG;AAAA,EACV,EAAA,EAAI,EAAC,CAAA,EAAG,IAAA;AACV,CAAA;AAIA,IAAM,mBAAA,GAAsB;AAAA,EAC1B,GAAG,EAAC,IAAA,EAAM,EAAC,CAAA,EAAG,KAAG,EAAC;AAAA,EAClB,KAAK,EAAC,IAAA,EAAM,EAAC,CAAA,EAAG,OAAK,EAAC;AAAA,EACtB,GAAG,EAAC,IAAA,EAAM,EAAC,CAAA,EAAG,KAAG,EAAC;AAAA,EAClB,KAAK,EAAC,IAAA,EAAM,EAAC,CAAA,EAAG,OAAK,EAAC;AAAA,EACtB,GAAG,EAAC,IAAA,EAAM,EAAC,CAAA,EAAG,KAAG,EAAC;AAAA,EAClB,GAAG,EAAC,IAAA,EAAM,EAAC,CAAA,EAAG,KAAG,EAAC;AAAA,EAClB,GAAG,EAAC,IAAA,EAAM,EAAC,CAAA,EAAG,KAAG,EAAC;AAAA,EAClB,GAAG,EAAC,IAAA,EAAM,EAAC,CAAA,EAAG,KAAG,EAAC;AAAA,EAClB,GAAG,EAAC,IAAA,EAAM,EAAC,CAAA,EAAG,KAAG,EAAC;AAAA,EAClB,GAAG,EAAC,IAAA,EAAM,EAAC,CAAA,EAAG,KAAG,EAAC;AAAA,EAClB,IAAI,EAAC,IAAA,EAAM,EAAC,CAAA,EAAG,MAAI;AACrB,CAAA;AAEO,IAAM,eAAeA,qBAAA,CAAI;AAAA,EAC9B,KAAA,EAAO,CAAC,MAAA,EAAQ,QAAA,EAAU,SAAS,CAAA;AAAA,EACnC,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe,QAAA;AAAA,MACf,IAAA,EAAM;AAAA,KACR;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,OAAA,EAAS,MAAA;AAAA,MACT,IAAA,EAAM,CAAA;AAAA,MACN,IAAA,EAAM,CAAA;AAAA,MACN,IAAA,EAAM;AAAA,KACR;AAAA,IACA,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,CAAA;AAAA,MACN,IAAA,EAAM,CAAA;AAAA,MACN,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe;AAAA;AACjB,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,MAAA,EAAQ;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM,EAAC,CAAA,EAAG,MAAA,EAAQ,MAAM,CAAA;AAAC,OAC3B;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM,EAAC,IAAA,EAAM,MAAA;AAAM;AACrB,KACF;AAAA,IACA,OAAA,EAAS;AAAA,GACX;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,MAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAEM,IAAM,oBAAoBC,qBAAA,CAAI;AAAA,EACnC,IAAA,EAAM;AAAA,IACJ,UAAA,EAAY,CAAA;AAAA,IACZ,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,YAAA,EAAc;AAAA,MACZ,IAAA,EAAM,EAAC,QAAA,EAAU,MAAA;AAAM,KACzB;AAAA,IACA,OAAA,EAAS;AAAA,MACP,MAAM,EAAC;AAAA;AAAA;AAAA,MAGP,KAAA,EAAO;AAAA,QACL,oBAAA,EAAsB,SAAA;AAAA,QACtB,oBAAA,EAAsB,OAAA;AAAA,QACtB,oBAAA,EAAsB;AAAA,OACxB;AAAA,MACA,GAAA,EAAK;AAAA,QACH,sBAAA,EAAwB,SAAA;AAAA,QACxB,sBAAA,EAAwB,OAAA;AAAA,QACxB,sBAAA,EAAwB;AAAA;AAC1B;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,YAAA,EAAc,IAAA;AAAA,IACd,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAEM,IAAM,sBAAsBA,qBAAA,CAAI;AAAA,EACrC,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM,CAAA;AAAA,IACN,IAAA,EAAM,CAAA;AAAA,IACN,IAAA,EAAM,CAAA;AAAA,IACN,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,YAAA,EAAc;AAAA,MACZ,IAAA,EAAM,EAAC,QAAA,EAAU,MAAA;AAAM;AACzB,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,YAAA,EAAc;AAAA;AAElB,CAAC,CAAA;AAEM,IAAM,qBAAqBD,qBAAA,CAAI;AAAA,EACpC,OAAO,CAAC,MAAA,EAAQ,OAAA,EAAS,WAAA,EAAa,WAAW,aAAa,CAAA;AAAA,EAC9D,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM;AAAA,MACJ,UAAA,EAAY;AAAA,KACd;AAAA,IACA,KAAA,EAAO;AAAA,MACL,OAAA,EAAS,MAAA;AAAA,MACT,cAAA,EAAgB,eAAA;AAAA,MAChB,GAAA,EAAK;AAAA,KACP;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAM,CAAA;AAAA,MACN,IAAA,EAAM,CAAA;AAAA,MACN,YAAA,EAAc;AAAA,QACZ,OAAA,EAAS;AAAA;AACX,KACF;AAAA,IACA,OAAA,EAAS;AAAA,MACP,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,GAAA,EAAK,GAAA;AAAA,MACL,UAAA,EAAY;AAAA,KACd;AAAA,IACA,WAAA,EAAa;AAAA,MACX,eAAA,EAAiB,IAAA;AAAA,MACjB,gBAAA,EAAkB;AAAA;AACpB,GACF;AAAA,EACA,QAAA,EAAU;AAAA;AAAA,IAER,KAAA,EAAO;AAAA,MACL,OAAO,EAAC,KAAA,EAAO,EAAC,UAAA,EAAY,cAAY,EAAC;AAAA,MACzC,QAAQ,EAAC,KAAA,EAAO,EAAC,UAAA,EAAY,UAAQ,EAAC;AAAA,MACtC,KAAK,EAAC,KAAA,EAAO,EAAC,UAAA,EAAY,YAAU;AAAC,KACvC;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM;AAAA,UACJ,mBAAA,EAAqB,SAAA;AAAA,UACrB,mBAAA,EAAqB,OAAA;AAAA,UACrB,mBAAA,EAAqB;AAAA;AACvB;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,KAAA,EAAO,OAAA;AAAA,IACP,UAAA,EAAY;AAAA;AAEhB,CAAC,CAAA;AAEM,IAAM,qBAAqBA,qBAAA,CAAI;AAAA,EACpC,KAAA,EAAO,CAAC,MAAA,EAAQ,OAAA,EAAS,SAAS,SAAS,CAAA;AAAA,EAC3C,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM;AAAA,MACJ,UAAA,EAAY;AAAA,KACd;AAAA,IACA,KAAA,EAAO;AAAA,MACL,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,GAAA,EAAK,GAAA;AAAA,MACL,IAAA,EAAM,CAAA;AAAA,MACN,IAAA,EAAM,CAAA;AAAA,MACN,eAAA,EAAiB;AAAA,KACnB;AAAA,IACA,OAAA,EAAS;AAAA,MACP,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,GAAA,EAAK,GAAA;AAAA,MACL,UAAA,EAAY;AAAA;AACd,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM;AAAA,UACJ,qBAAA,EAAuB,SAAA;AAAA,UACvB,qBAAA,EAAuB,OAAA;AAAA,UACvB,qBAAA,EAAuB;AAAA;AACzB;AACF,KACF;AAAA;AAAA;AAAA,IAGA,QAAA,EAAU;AAAA,MACR,KAAA,EAAO;AAAA,QACL,KAAA,EAAO;AAAA,UACL,OAAA,EAAS,MAAA;AAAA,UACT,UAAA,EAAY,QAAA;AAAA,UACZ,cAAA,EAAgB,UAAA;AAAA,UAChB,GAAA,EAAK;AAAA;AACP,OACF;AAAA,MACA,MAAM;AAAC;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,UAAA,EAAY,KAAA;AAAA,IACZ,QAAA,EAAU;AAAA;AAEd,CAAC,CAAA;AAEM,IAAM,qBAAqBC,qBAAA,CAAI;AAAA,EACpC,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,GACX;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AC3NM,IAAM,iBAAA,GAAoBC,oBAA0B,SAAS,CAAA;AACpE,iBAAA,CAAkB,WAAA,GAAc,mBAAA;AACzB,IAAM,oBAAA,GACXA,oBAAgD,IAAI,CAAA;AACtD,oBAAA,CAAqB,WAAA,GAAc,sBAAA;AAE5B,SAAS,aAAA,GAA4B;AAC1C,EAAA,OAAOC,UAAI,iBAAiB,CAAA;AAC9B;AAEO,SAAS,gBAAA,GAAqD;AACnE,EAAA,OAAOA,UAAI,oBAAoB,CAAA;AACjC;AC+CA,SAAS,YAAA,CAAa;AAAA,EACpB,IAAA;AAAA,EACA;AACF,CAAA,EAG6B;AAC3B,EAAA,IAAI,CAACC,6BAAA,CAAY,QAAQ,CAAA,EAAG;AAC1B,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBAAOC,cAAA,CAAC,iBAAA,EAAA,EAAkB,KAAA,EAAO,IAAA,EAAO,QAAA,EAAS,CAAA;AACnD;AAEO,SAAS,MAAA,CAAO;AAAA,EACrB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,WAAA,GAAc,IAAA;AAAA,EACd,GAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA,GAAS,MAAA;AAAA,EACT,OAAA;AAAA,EACA,GAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAAmC;AACjC,EAAA,MAAM,YAAA,GAAeC,cAAQ,OAAO,EAAC,aAAW,CAAA,EAAI,CAAC,WAAW,CAAC,CAAA;AACjE,EAAA,MAAM,OAAA,GAAU,YAAA,CAAa,EAAC,MAAA,EAAQ,SAAQ,CAAA;AAE9C,EAAA,uBACED,cAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAAE,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,oBAAA,CAAG,OAAA,CAAQ,IAAA,EAAM,SAAS,CAAA;AAAA,MACrC,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAA,EAAA;AAAA,wBAAAH,cAAA,CAAC,YAAA,EAAA,EAAa,IAAA,EAAK,QAAA,EAAU,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,wBACpCE,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,MAAA,EACtB,QAAA,EAAA;AAAA,0BAAAF,cAAA,CAAC,YAAA,EAAA,EAAa,IAAA,EAAK,OAAA,EAAS,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,0BAClCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,OAAA,EACtB,yCAAC,YAAA,EAAA,EAAa,IAAA,EAAK,SAAA,EAAW,QAAA,EAAA,OAAA,EAAQ,CAAA,EACxC,CAAA;AAAA,0BACAA,cAAA,CAAC,YAAA,EAAA,EAAa,IAAA,EAAK,KAAA,EAAO,QAAA,EAAA,GAAA,EAAI;AAAA,SAAA,EAChC,CAAA;AAAA,wBACAA,cAAA,CAAC,YAAA,EAAA,EAAa,IAAA,EAAK,QAAA,EAAU,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GACtC,EACF,CAAA;AAEJ;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;AChFd,SAAS,aAAA,CAAc;AAAA,EAC5B,IAAI,OAAA,GAAU,KAAA;AAAA,EACd,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,YAAA,GAAe,IAAA;AAAA,EACf,KAAA;AAAA,EACA,OAAA,GAAU,CAAA;AAAA,EACV,GAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA0C;AACxC,EAAA,uBACEA,cAAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,YAAA,EAAY,KAAA;AAAA,MACZ,SAAA,EAAWG,oBAAA;AAAA,QACT,mBAAA,CAAoB,EAAC,YAAA,EAAa,CAAA;AAAA,QAClC,kBAAA,CAAmB,EAAC,OAAA,EAAQ,CAAA;AAAA,QAC5B;AAAA,OACF;AAAA,MACA,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,IAAA,EAAM,IAAA,KAAS,KAAA,IAAS,IAAA,GAAO,QAAA,GAAW,MAAA,CAAA;AAAA,MAC1C,KAAA;AAAA,MACC;AAAA;AAAA,GACH;AAEJ;AAEA,aAAA,CAAc,WAAA,GAAc,eAAA;ACQrB,SAAS,YAAA,CAAa;AAAA,EAC3B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,CAAA;AAAA,EACV,aAAA;AAAA,EACA,GAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAAyC;AACvC,EAAA,MAAM,iBAAiB,gBAAA,EAAiB;AACxC,EAAA,MAAM,UAAA,GAAa,gBAAgB,WAAA,IAAe,KAAA;AAClD,EAAA,MAAM,SAAA,GAA2B,EAAC,MAAA,EAAQ,GAAG,KAAA,EAAK;AAClD,EAAA,MAAM,QAAA,GAAWJ,8BAAY,QAAQ,CAAA;AACrC,EAAA,MAAM,UAAA,GAAaA,6BAAA,CAAY,aAAa,CAAA,IAAKA,8BAAY,eAAe,CAAA;AAC5E,EAAA,MAAM,OAAA,GAAU,kBAAA,CAAmB,EAAC,UAAA,EAAY,UAAS,CAAA;AAEzD,EAAA,uBACEC,cAAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,KAAA;AAAA,MACZ,SAAA,EAAWG,oBAAA,CAAG,OAAA,CAAQ,IAAA,EAAM,SAAS,CAAA;AAAA,MACrC,gBAAc,UAAA,IAAc,MAAA;AAAA,MAC5B,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,KAAA,EAAO,SAAA;AAAA,MACP,0BAAAH,cAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWG,oBAAA,CAAG,QAAQ,KAAA,EAAO,kBAAA,CAAmB,EAAC,OAAA,EAAQ,CAAC,CAAA,EAC5D,qBACC,QAAA,mBAEAD,gBAAAE,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAAL,6BAAA,CAAY,YAAY,oBACvBC,cAAAA,CAAC,SAAI,SAAA,EAAW,OAAA,CAAQ,KAAA,EAAQ,QAAA,EAAA,YAAA,EAAa,CAAA,GAC3C,IAAA;AAAA,QACH,6BACCE,eAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,QAAQ,OAAA,EACrB,QAAA,EAAA;AAAA,UAAA,eAAA;AAAA,UACA;AAAA,SAAA,EACH,CAAA,GACE;AAAA,OAAA,EACN,CAAA,EAEJ;AAAA;AAAA,GACF;AAEJ;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;AC7CpB,SAAS,YAAA,CAAa;AAAA,EAC3B,KAAA,GAAQ,OAAA;AAAA,EACR,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,UAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,CAAA;AAAA,EACV,GAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAAyC;AACvC,EAAA,MAAM,iBAAiB,gBAAA,EAAiB;AACxC,EAAA,MAAM,gBAAgBG,kCAAA,EAAiB;AACvC,EAAA,MAAM,UAAA,GAAa,gBAAgB,WAAA,IAAe,KAAA;AAClD,EAAA,MAAM,SAAA,GAA2B,EAAC,MAAA,EAAQ,GAAG,KAAA,EAAK;AAClD,EAAA,MAAM,OAAA,GAAU,kBAAA,CAAmB,EAAC,KAAA,EAAO,YAAW,CAAA;AAEtD,EAAA,MAAM,WAAA,GACJ,aAAA,IAAiB,IAAA,mBACfL,cAAAA;AAAA,IAACM,wBAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAA,CAAQ,WAAA;AAAA,MACnB,IAAA,EAAMC,aAAA;AAAA,MACN,UAAA,EAAU,IAAA;AAAA,MACV,KAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS,MAAM,aAAA,CAAc,YAAA,CAAa,KAAK,CAAA;AAAA,MAC/C,OAAA,EAAQ;AAAA;AAAA,GACV,GACE,IAAA;AACN,EAAA,MAAM,MAAA,GAASR,6BAAA,CAAY,UAAU,CAAA,IAAK,WAAA,IAAe,IAAA;AAEzD,EAAA,uBACEC,cAAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,KAAA;AAAA,MACZ,SAAA,EAAWG,oBAAA,CAAG,OAAA,CAAQ,IAAA,EAAM,SAAS,CAAA;AAAA,MACrC,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,KAAA,EAAO,SAAA;AAAA,MACP,QAAA,kBAAAD,eAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,oBAAA,CAAG,OAAA,CAAQ,KAAA,EAAO,kBAAA,CAAmB,EAAC,OAAA,EAAQ,CAAC,CAAA,EAC5D,QAAA,EAAA;AAAA,QAAAJ,6BAAA,CAAY,YAAY,oBACvBC,cAAAA,CAAC,SAAI,SAAA,EAAW,OAAA,CAAQ,OAAA,EAAU,QAAA,EAAA,YAAA,EAAa,CAAA,GAC7C,IAAA;AAAA,wBACJE,eAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,QAAQ,SAAA,EACtB,QAAA,EAAA;AAAA,0BAAAF,cAAAA;AAAA,YAACQ,yBAAA;AAAA,YAAA;AAAA,cACC,uBAAA,EAAuB,aAAA,IAAiB,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,cACxD,IAAI,aAAA,EAAe,OAAA;AAAA,cACnB,KAAA,EAAO,CAAA;AAAA,cACP,QAAA,EAAU,aAAA,IAAiB,IAAA,GAAO,EAAA,GAAK,MAAA;AAAA,cACtC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UACC,QAAA,IAAY,IAAA,mBACXR,cAAAA,CAACS,sBAAA,EAAA,EAAK,EAAA,EAAG,GAAA,EAAI,KAAA,EAAM,WAAA,EAAY,IAAA,EAAK,YAAA,EACjC,QAAA,EAAA,QAAA,EACH,CAAA,GACE;AAAA,SAAA,EACN,CAAA;AAAA,QACC,yBACCP,eAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,QAAQ,OAAA,EACrB,QAAA,EAAA;AAAA,UAAA,UAAA;AAAA,UACA;AAAA,SAAA,EACH,CAAA,GACE;AAAA,OAAA,EACN;AAAA;AAAA,GACF;AAEJ;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;AC/GpB,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,YAAA,GAAe,IAAA;AAAA,EACf,KAAA;AAAA,EACA,OAAA,GAAU,CAAA;AAAA,EACV,GAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAwC;AACtC,EAAA,MAAM,OAAO,aAAA,EAAc;AAC3B,EAAA,MAAM,iBAAiB,gBAAA,EAAiB;AACxC,EAAA,MAAM,UAAA,GAAa,gBAAgB,WAAA,IAAe,KAAA;AAClD,EAAA,MAAM,UACJ,UAAA,KAAe,IAAA,KAAS,OAAA,IAAW,IAAA,KAAS,SAAS,IAAA,GAAO,MAAA;AAE9D,EAAA,uBACEF,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,YAAA,EAAY,KAAA;AAAA,MACZ,SAAA,EAAWG,oBAAA;AAAA,QACT,iBAAA,CAAkB,EAAC,YAAA,EAAc,OAAA,EAAQ,CAAA;AAAA,QACzC,kBAAA,CAAmB,EAAC,OAAA,EAAQ,CAAA;AAAA,QAC5B;AAAA,OACF;AAAA,MACA,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,IAAA,EAAM,IAAA,KAAS,KAAA,IAAS,IAAA,GAAO,QAAA,GAAW,MAAA,CAAA;AAAA,MAC1C,KAAA,EAAO,EAAC,KAAA,EAAO,GAAG,KAAA,EAAK;AAAA,MACtB;AAAA;AAAA,GACH;AAEJ;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-H7VK36SZ.cjs","sourcesContent":["import {cva, sva, type RecipeVariantProps} from 'styled-system/css';\n\nconst paddingVariants = {\n  0: {p: '0'},\n  0.5: {p: '0.5'},\n  1: {p: '1'},\n  1.5: {p: '1.5'},\n  2: {p: '2'},\n  3: {p: '3'},\n  4: {p: '4'},\n  5: {p: '5'},\n  6: {p: '6'},\n  8: {p: '8'},\n  10: {p: '10'},\n};\n\n// Same padding scale as `paddingVariants`, scoped to the `root` slot so it can\n// be used as an `sva` variant on the Layout shell.\nconst rootPaddingVariants = {\n  0: {root: {p: '0'}},\n  0.5: {root: {p: '0.5'}},\n  1: {root: {p: '1'}},\n  1.5: {root: {p: '1.5'}},\n  2: {root: {p: '2'}},\n  3: {root: {p: '3'}},\n  4: {root: {p: '4'}},\n  5: {root: {p: '5'}},\n  6: {root: {p: '6'}},\n  8: {root: {p: '8'}},\n  10: {root: {p: '10'}},\n};\n\nexport const layoutRecipe = sva({\n  slots: ['root', 'middle', 'content'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      minW: 0,\n    },\n    middle: {\n      display: 'flex',\n      flex: 1,\n      minH: 0,\n      minW: 0,\n    },\n    content: {\n      flex: 1,\n      minW: 0,\n      display: 'flex',\n      flexDirection: 'column',\n    },\n  },\n  variants: {\n    height: {\n      fill: {\n        root: {h: '100%', minH: 0},\n      },\n      auto: {\n        root: {minH: '100%'},\n      },\n    },\n    padding: rootPaddingVariants,\n  },\n  defaultVariants: {\n    height: 'fill',\n  },\n});\n\nexport const layoutPanelRecipe = cva({\n  base: {\n    flexShrink: 0,\n    overflow: 'clip',\n  },\n  variants: {\n    isScrollable: {\n      true: {overflow: 'auto'},\n    },\n    divider: {\n      none: {},\n      // Border on the edge adjacent to the content area: inline-end for a start\n      // panel, inline-start for an end panel.\n      start: {\n        borderInlineEndWidth: 'default',\n        borderInlineEndStyle: 'solid',\n        borderInlineEndColor: 'border',\n      },\n      end: {\n        borderInlineStartWidth: 'default',\n        borderInlineStartStyle: 'solid',\n        borderInlineStartColor: 'border',\n      },\n    },\n  },\n  defaultVariants: {\n    isScrollable: true,\n    divider: 'none',\n  },\n});\n\nexport const layoutContentRecipe = cva({\n  base: {\n    flex: 1,\n    minH: 0,\n    minW: 0,\n    overflow: 'clip',\n  },\n  variants: {\n    isScrollable: {\n      true: {overflow: 'auto'},\n    },\n  },\n  defaultVariants: {\n    isScrollable: true,\n  },\n});\n\nexport const layoutHeaderRecipe = sva({\n  slots: ['root', 'inner', 'titleArea', 'actions', 'closeButton'],\n  base: {\n    root: {\n      flexShrink: 0,\n    },\n    inner: {\n      display: 'flex',\n      justifyContent: 'space-between',\n      gap: '3',\n    },\n    titleArea: {\n      flex: 1,\n      minW: 0,\n      '& > :focus': {\n        outline: 'none',\n      },\n    },\n    actions: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '2',\n      flexShrink: 0,\n    },\n    closeButton: {\n      marginInlineEnd: '-2',\n      marginBlockStart: '-2',\n    },\n  },\n  variants: {\n    // Cross-axis alignment of the start/title/end slots within the header row.\n    align: {\n      start: {inner: {alignItems: 'flex-start'}},\n      center: {inner: {alignItems: 'center'}},\n      end: {inner: {alignItems: 'flex-end'}},\n    },\n    hasDivider: {\n      true: {\n        root: {\n          borderBlockEndWidth: 'default',\n          borderBlockEndStyle: 'solid',\n          borderBlockEndColor: 'border',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    align: 'start',\n    hasDivider: false,\n  },\n});\n\nexport const layoutFooterRecipe = sva({\n  slots: ['root', 'inner', 'start', 'actions'],\n  base: {\n    root: {\n      flexShrink: 0,\n    },\n    start: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '2',\n      flex: 1,\n      minW: 0,\n      marginInlineEnd: 'auto',\n    },\n    actions: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '2',\n      flexShrink: 0,\n    },\n  },\n  variants: {\n    hasDivider: {\n      true: {\n        root: {\n          borderBlockStartWidth: 'default',\n          borderBlockStartStyle: 'solid',\n          borderBlockStartColor: 'border',\n        },\n      },\n    },\n    // Custom footers render arbitrary children, so the inner element drops the\n    // action-row flex layout.\n    isCustom: {\n      false: {\n        inner: {\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'flex-end',\n          gap: '3',\n        },\n      },\n      true: {},\n    },\n  },\n  defaultVariants: {\n    hasDivider: false,\n    isCustom: false,\n  },\n});\n\nexport const layoutRegionRecipe = cva({\n  variants: {\n    padding: paddingVariants,\n  },\n  defaultVariants: {\n    padding: 4,\n  },\n});\n\nexport type LayoutVariants = RecipeVariantProps<typeof layoutRecipe>;\nexport type LayoutRegionVariants = RecipeVariantProps<\n  typeof layoutRegionRecipe\n>;\n","import {createContext, use} from 'react';\n\nexport type LayoutArea = 'header' | 'content' | 'start' | 'end' | 'footer';\n\nexport interface LayoutDividerContextValue {\n  hasDividers: boolean;\n}\n\nexport const LayoutAreaContext = createContext<LayoutArea>('content');\nLayoutAreaContext.displayName = 'LayoutAreaContext';\nexport const LayoutDividerContext =\n  createContext<LayoutDividerContextValue | null>(null);\nLayoutDividerContext.displayName = 'LayoutDividerContext';\n\nexport function useLayoutArea(): LayoutArea {\n  return use(LayoutAreaContext);\n}\n\nexport function useLayoutDivider(): LayoutDividerContextValue | null {\n  return use(LayoutDividerContext);\n}\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {useMemo} from 'react';\nimport {layoutRecipe} from 'components/Layout/Layout.recipe';\nimport {\n  LayoutAreaContext,\n  LayoutDividerContext,\n  type LayoutArea,\n} from 'components/Layout/LayoutContext';\nimport type {LayoutHeight} from 'components/Layout/types';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\nimport type {SpacingToken} from 'internal/spacingTokens';\n\n/**\n * Shell with header, side panels, content, and footer slots.\n */\nexport interface LayoutProps {\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Main content slot.\n   */\n  content?: ReactNode;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * End panel slot.\n   */\n  end?: ReactNode;\n  /**\n   * Footer slot.\n   */\n  footer?: ReactNode;\n  /**\n   * Whether child layout regions should show dividers.\n   */\n  hasDividers?: boolean;\n  /**\n   * Header slot.\n   */\n  header?: ReactNode;\n  /**\n   * Layout height behavior. Default is `fill`.\n   */\n  height?: LayoutHeight;\n  /**\n   * Outer padding for layout edges.\n   */\n  padding?: SpacingToken;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Start panel slot.\n   */\n  start?: ReactNode;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n}\n\nfunction AreaProvider({\n  area,\n  children,\n}: {\n  area: LayoutArea;\n  children?: ReactNode;\n}): React.JSX.Element | null {\n  if (!isReactNode(children)) {\n    return null;\n  }\n\n  return <LayoutAreaContext value={area}>{children}</LayoutAreaContext>;\n}\n\nexport function Layout({\n  className,\n  content,\n  'data-testid': dataTestId,\n  hasDividers = true,\n  end,\n  footer,\n  header,\n  height = 'fill',\n  padding,\n  ref,\n  start,\n  style,\n}: LayoutProps): React.JSX.Element {\n  const dividerValue = useMemo(() => ({hasDividers}), [hasDividers]);\n  const classes = layoutRecipe({height, padding});\n\n  return (\n    <LayoutDividerContext value={dividerValue}>\n      <div\n        className={cx(classes.root, className)}\n        data-testid={dataTestId}\n        ref={ref}\n        style={style}>\n        <AreaProvider area=\"header\">{header}</AreaProvider>\n        <div className={classes.middle}>\n          <AreaProvider area=\"start\">{start}</AreaProvider>\n          <div className={classes.content}>\n            <AreaProvider area=\"content\">{content}</AreaProvider>\n          </div>\n          <AreaProvider area=\"end\">{end}</AreaProvider>\n        </div>\n        <AreaProvider area=\"footer\">{footer}</AreaProvider>\n      </div>\n    </LayoutDividerContext>\n  );\n}\n\nLayout.displayName = 'Layout';\n","import type {ComponentPropsWithRef, ElementType} from 'react';\nimport {\n  layoutContentRecipe,\n  layoutRegionRecipe,\n} from 'components/Layout/Layout.recipe';\nimport {cx} from 'internal/cx';\nimport type {SpacingToken} from 'internal/spacingTokens';\n\n/**\n * Scrollable main content area within a Layout. Fills the remaining space\n * between panels and stretches to fill the available height.\n */\nexport interface LayoutContentProps extends ComponentPropsWithRef<'div'> {\n  /**\n   * HTML element to render. Default is `div`.\n   */\n  as?: ElementType;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether the content area scrolls when it overflows.\n   */\n  isScrollable?: boolean;\n  /**\n   * Accessible label. Automatically sets role=\"region\" when provided.\n   */\n  label?: string;\n  /**\n   * Inner padding.\n   */\n  padding?: SpacingToken;\n}\n\n/**\n * Scrollable main content area within a Layout. Fills the remaining space\n * between panels and stretches to fill the available height.\n */\nexport function LayoutContent({\n  as: Element = 'div',\n  children,\n  className,\n  'data-testid': dataTestId,\n  isScrollable = true,\n  label,\n  padding = 4,\n  ref,\n  role,\n  style,\n  ...rest\n}: LayoutContentProps): React.JSX.Element {\n  return (\n    <Element\n      {...rest}\n      aria-label={label}\n      className={cx(\n        layoutContentRecipe({isScrollable}),\n        layoutRegionRecipe({padding}),\n        className,\n      )}\n      data-testid={dataTestId}\n      ref={ref}\n      role={role ?? (label != null ? 'region' : undefined)}\n      style={style}>\n      {children}\n    </Element>\n  );\n}\n\nLayoutContent.displayName = 'LayoutContent';\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {\n  layoutFooterRecipe,\n  layoutRegionRecipe,\n} from 'components/Layout/Layout.recipe';\nimport {useLayoutDivider} from 'components/Layout/LayoutContext';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\nimport type {SpacingToken} from 'internal/spacingTokens';\n\ninterface LayoutFooterBaseProps {\n  /**\n   * Additional CSS class names applied to the footer.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Fixed height for the footer.\n   */\n  height?: number | string;\n  /**\n   * Accessible label for the footer landmark.\n   */\n  label?: string;\n  /**\n   * Inner padding.\n   */\n  padding?: SpacingToken;\n  /**\n   * Ref forwarded to the footer element.\n   */\n  ref?: Ref<HTMLElement>;\n  /**\n   * Inline styles applied to the footer.\n   */\n  style?: CSSProperties;\n}\n\ninterface LayoutFooterCustomProps extends LayoutFooterBaseProps {\n  /**\n   * Custom footer content rendered inside the footer shell.\n   */\n  children: ReactNode;\n  primaryButton?: never;\n  secondaryButton?: never;\n  startContent?: never;\n}\n\ninterface LayoutFooterActionsProps extends LayoutFooterBaseProps {\n  children?: never;\n  /**\n   * Primary action button, rendered rightmost.\n   */\n  primaryButton?: ReactNode;\n  /**\n   * Secondary action button, rendered left of the primary button.\n   */\n  secondaryButton?: ReactNode;\n  /**\n   * Content rendered at the start (left) of the footer.\n   */\n  startContent?: ReactNode;\n}\n\n/**\n * Footer landmark region within a Layout. Use action slots for the standard\n * footer layout, or children for a custom footer inside the same shell.\n */\nexport type LayoutFooterProps =\n  | LayoutFooterActionsProps\n  | LayoutFooterCustomProps;\n\n/**\n * Footer landmark region within a Layout.\n */\nexport function LayoutFooter({\n  children,\n  className,\n  'data-testid': dataTestId,\n  height,\n  label,\n  padding = 4,\n  primaryButton,\n  ref,\n  secondaryButton,\n  startContent,\n  style,\n}: LayoutFooterProps): React.JSX.Element {\n  const dividerContext = useLayoutDivider();\n  const hasDivider = dividerContext?.hasDividers ?? false;\n  const rootStyle: CSSProperties = {height, ...style};\n  const isCustom = isReactNode(children);\n  const hasActions = isReactNode(primaryButton) || isReactNode(secondaryButton);\n  const classes = layoutFooterRecipe({hasDivider, isCustom});\n\n  return (\n    <footer\n      aria-label={label}\n      className={cx(classes.root, className)}\n      data-divider={hasDivider || undefined}\n      data-testid={dataTestId}\n      ref={ref}\n      style={rootStyle}>\n      <div className={cx(classes.inner, layoutRegionRecipe({padding}))}>\n        {isCustom ? (\n          children\n        ) : (\n          <>\n            {isReactNode(startContent) ? (\n              <div className={classes.start}>{startContent}</div>\n            ) : null}\n            {hasActions ? (\n              <div className={classes.actions}>\n                {secondaryButton}\n                {primaryButton}\n              </div>\n            ) : null}\n          </>\n        )}\n      </div>\n    </footer>\n  );\n}\n\nLayoutFooter.displayName = 'LayoutFooter';\n","import {X} from 'lucide-react';\nimport type {CSSProperties, ReactNode, Ref} from 'react';\nimport {Button} from 'components/Button';\nimport {useDialogContext} from 'components/Dialog/DialogContext';\nimport {\n  layoutHeaderRecipe,\n  layoutRegionRecipe,\n} from 'components/Layout/Layout.recipe';\nimport {useLayoutDivider} from 'components/Layout/LayoutContext';\nimport {Heading, Text} from 'components/Text';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\nimport type {SpacingToken} from 'internal/spacingTokens';\n\n/**\n * Header landmark region within a Layout with a structured title,\n * optional subtitle, and start/end content slots.\n *\n * When rendered inside a Dialog, a close button is automatically\n * appended after `endContent`. The button calls `onOpenChange(false)`\n * on the parent Dialog and the title receives initial focus.\n */\nexport interface LayoutHeaderProps {\n  /**\n   * Cross-axis alignment of the start content, title, and end content within\n   * the header row. Default is `start`.\n   */\n  align?: 'start' | 'center' | 'end';\n  /**\n   * Additional CSS class names applied to the header.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the header.\n   */\n  'data-testid'?: string;\n  /**\n   * Content rendered after the title area.\n   */\n  endContent?: ReactNode;\n  /**\n   * Fixed height for the header.\n   */\n  height?: number | string;\n  /**\n   * Accessible label for the header landmark.\n   */\n  label?: string;\n  /**\n   * Inner padding.\n   */\n  padding?: SpacingToken;\n  /**\n   * Ref forwarded to the header element.\n   */\n  ref?: Ref<HTMLElement>;\n  /**\n   * Content rendered before the title area.\n   */\n  startContent?: ReactNode;\n  /**\n   * Inline styles applied to the header.\n   */\n  style?: CSSProperties;\n  /**\n   * Supporting text displayed below the title.\n   */\n  subtitle?: string;\n  /**\n   * Primary header title.\n   */\n  title: string;\n}\n\n/**\n * Header landmark region within a Layout with a structured title,\n * optional subtitle, and start/end content slots.\n *\n * When rendered inside a Dialog, a close button is automatically\n * appended after `endContent`. The button calls `onOpenChange(false)`\n * on the parent Dialog and the title receives initial focus.\n */\nexport function LayoutHeader({\n  align = 'start',\n  className,\n  'data-testid': dataTestId,\n  endContent,\n  height,\n  label,\n  padding = 4,\n  ref,\n  startContent,\n  style,\n  subtitle,\n  title,\n}: LayoutHeaderProps): React.JSX.Element {\n  const dividerContext = useLayoutDivider();\n  const dialogContext = useDialogContext();\n  const hasDivider = dividerContext?.hasDividers ?? false;\n  const rootStyle: CSSProperties = {height, ...style};\n  const classes = layoutHeaderRecipe({align, hasDivider});\n\n  const closeButton =\n    dialogContext != null ? (\n      <Button\n        className={classes.closeButton}\n        icon={X}\n        isIconOnly\n        label=\"Close\"\n        onClick={() => dialogContext.onOpenChange(false)}\n        variant=\"ghost\"\n      />\n    ) : null;\n  const hasEnd = isReactNode(endContent) || closeButton != null;\n\n  return (\n    <header\n      aria-label={label}\n      className={cx(classes.root, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={rootStyle}>\n      <div className={cx(classes.inner, layoutRegionRecipe({padding}))}>\n        {isReactNode(startContent) ? (\n          <div className={classes.actions}>{startContent}</div>\n        ) : null}\n        <div className={classes.titleArea}>\n          <Heading\n            data-dialog-autofocus={dialogContext != null ? 'true' : undefined}\n            id={dialogContext?.titleId}\n            level={4}\n            tabIndex={dialogContext != null ? -1 : undefined}>\n            {title}\n          </Heading>\n          {subtitle != null ? (\n            <Text as=\"p\" color=\"secondary\" type=\"supporting\">\n              {subtitle}\n            </Text>\n          ) : null}\n        </div>\n        {hasEnd ? (\n          <div className={classes.actions}>\n            {endContent}\n            {closeButton}\n          </div>\n        ) : null}\n      </div>\n    </header>\n  );\n}\n\nLayoutHeader.displayName = 'LayoutHeader';\n","import type {ComponentPropsWithRef} from 'react';\nimport {\n  layoutPanelRecipe,\n  layoutRegionRecipe,\n} from 'components/Layout/Layout.recipe';\nimport {useLayoutArea, useLayoutDivider} from 'components/Layout/LayoutContext';\nimport {cx} from 'internal/cx';\nimport type {SpacingToken} from 'internal/spacingTokens';\n\n/**\n * Side panel region within a Layout. Placed in the start or end slot,\n * with optional dividers and scrolling.\n */\nexport interface LayoutPanelProps extends ComponentPropsWithRef<'div'> {\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether the panel scrolls when it overflows.\n   */\n  isScrollable?: boolean;\n  /**\n   * Accessible label. Automatically sets role=\"region\" when provided.\n   */\n  label?: string;\n  /**\n   * Inner padding.\n   */\n  padding?: SpacingToken;\n  /**\n   * Fixed width for the panel.\n   */\n  width?: number | string;\n}\n\n/**\n * Side panel region within a Layout. Placed in the start or end slot,\n * with optional dividers and scrolling.\n */\nexport function LayoutPanel({\n  children,\n  className,\n  'data-testid': dataTestId,\n  isScrollable = true,\n  label,\n  padding = 4,\n  ref,\n  role,\n  style,\n  width,\n  ...rest\n}: LayoutPanelProps): React.JSX.Element {\n  const area = useLayoutArea();\n  const dividerContext = useLayoutDivider();\n  const hasDivider = dividerContext?.hasDividers ?? false;\n  const divider =\n    hasDivider && (area === 'start' || area === 'end') ? area : 'none';\n\n  return (\n    <div\n      {...rest}\n      aria-label={label}\n      className={cx(\n        layoutPanelRecipe({isScrollable, divider}),\n        layoutRegionRecipe({padding}),\n        className,\n      )}\n      data-testid={dataTestId}\n      ref={ref}\n      role={role ?? (label != null ? 'region' : undefined)}\n      style={{width, ...style}}>\n      {children}\n    </div>\n  );\n}\n\nLayoutPanel.displayName = 'LayoutPanel';\n"]}