@saas-ui/react 3.0.0-next.14 → 3.0.0-next.16

package/dist/index.cjs

@@ -120,6 +120,7 @@ __export(index_exports, {
   RadioGroup: () => import_radio_group2.RadioGroup,
   RatingGroup: () => import_rating_group.RatingGroup,
   SearchInput: () => SearchInput,
+  Section: () => section_exports,
   SegmentedControl: () => SegmentedControl,
   Select: () => namespace_exports,
   Separator: () => import_separator.Separator,
@@ -157,50 +158,55 @@ __export(index_exports, {
   VStack: () => import_stack3.VStack,
   VisuallyHidden: () => import_visually_hidden.VisuallyHidden,
   Wrap: () => import_wrap.Wrap,
-  chakra: () => import_styled_system72.chakra,
+  chakra: () => import_styled_system74.chakra,
+  createContext: () => import_react91.createContext,
   createIcon: () => createIcon,
-  createSystem: () => import_styled_system72.createSystem,
+  createListCollection: () => import_react91.createListCollection,
+  createRecipeContext: () => import_styled_system74.createRecipeContext,
+  createSlotRecipeContext: () => import_styled_system74.createSlotRecipeContext,
+  createSystem: () => import_styled_system74.createSystem,
   defaultConfig: () => defaultConfig,
   defaultPersonaPresenceOptions: () => defaultPersonaPresenceOptions,
   defaultSystem: () => defaultSystem,
-  defineAnimationStyles: () => import_styled_system72.defineAnimationStyles,
-  defineConditions: () => import_styled_system72.defineConditions,
-  defineConfig: () => import_styled_system72.defineConfig,
-  defineGlobalStyles: () => import_styled_system72.defineGlobalStyles,
-  defineKeyframes: () => import_styled_system72.defineKeyframes,
-  defineLayerStyles: () => import_styled_system72.defineLayerStyles,
-  defineRecipe: () => import_styled_system72.defineRecipe,
-  defineSemanticTokens: () => import_styled_system72.defineSemanticTokens,
-  defineSlotRecipe: () => import_styled_system72.defineSlotRecipe,
-  defineStyle: () => import_styled_system72.defineStyle,
-  defineTextStyles: () => import_styled_system72.defineTextStyles,
-  defineTokens: () => import_styled_system72.defineTokens,
+  defineAnimationStyles: () => import_styled_system74.defineAnimationStyles,
+  defineConditions: () => import_styled_system74.defineConditions,
+  defineConfig: () => import_styled_system74.defineConfig,
+  defineGlobalStyles: () => import_styled_system74.defineGlobalStyles,
+  defineKeyframes: () => import_styled_system74.defineKeyframes,
+  defineLayerStyles: () => import_styled_system74.defineLayerStyles,
+  defineRecipe: () => import_styled_system74.defineRecipe,
+  defineSemanticTokens: () => import_styled_system74.defineSemanticTokens,
+  defineSlotRecipe: () => import_styled_system74.defineSlotRecipe,
+  defineStyle: () => import_styled_system74.defineStyle,
+  defineTextStyles: () => import_styled_system74.defineTextStyles,
+  defineTokens: () => import_styled_system74.defineTokens,
   toast: () => toast,
-  useBreakpoint: () => import_react89.useBreakpoint,
-  useBreakpointValue: () => import_react89.useBreakpointValue,
-  useChakraContext: () => import_styled_system72.useChakraContext,
+  useBreakpoint: () => import_react91.useBreakpoint,
+  useBreakpointValue: () => import_react91.useBreakpointValue,
+  useChakraContext: () => import_styled_system74.useChakraContext,
   useClipboard: () => import_clipboard2.useClipboard,
-  useControllableState: () => import_react89.useControllableState,
+  useControllableState: () => import_react91.useControllableState,
   useDataListStyles: () => import_data_list.useDataListStyles,
-  useDisclosure: () => import_react89.useDisclosure,
+  useDisclosure: () => import_react91.useDisclosure,
   useEnvironmentContext: () => import_env.useEnvironmentContext,
   useFieldContext: () => import_field.useFieldContext,
   useFieldStyles: () => import_field.useFieldStyles,
   useFieldsetContext: () => import_fieldset.useFieldsetContext,
   useFileUploadContext: () => import_file_upload2.useFileUploadContext,
   useLink: () => useLink,
-  useMediaQuery: () => import_react89.useMediaQuery,
+  useMediaQuery: () => import_react91.useMediaQuery,
   usePageStyles: () => usePageStyles,
   useQrCode: () => import_qr_code.useQrCode,
-  useRecipe: () => import_styled_system72.useRecipe,
+  useRecipe: () => import_styled_system74.useRecipe,
+  useSectionStyles: () => useSectionStyles,
   useSidebar: () => import_sidebar2.useSidebar,
   useSidebarItemStyles: () => useSidebarItemStyles,
   useSidebarStyles: () => useSidebarStyles,
-  useSlotRecipe: () => import_styled_system72.useSlotRecipe,
+  useSlotRecipe: () => import_styled_system74.useSlotRecipe,
   useSui: () => useSui,
   useTabsContext: () => import_tabs.useTabsContext,
   useTabsStyles: () => import_tabs.useTabsStyles,
-  useToken: () => import_styled_system72.useToken
+  useToken: () => import_styled_system74.useToken
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -5547,16 +5553,116 @@ var numberInputSlotRecipe = (0, import_styled_system45.defineSlotRecipe)({
   }
 });
 
-// src/components/persona/persona.recipe.ts
+// src/components/page/page.recipe.ts
 var import_styled_system46 = require("@chakra-ui/react/styled-system");
-var baseStyleLabel = (0, import_styled_system46.defineStyle)({
+var slots = [
+  "root",
+  "header",
+  "headerContent",
+  "heading",
+  "headerFooter",
+  "title",
+  "description",
+  "body"
+];
+var pageSlotRecipe = (0, import_styled_system46.defineSlotRecipe)({
+  className: "sui-page",
+  slots,
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      flex: 1,
+      minH: 0
+    },
+    title: {
+      fontWeight: "medium",
+      fontSize: "sm"
+    },
+    description: {
+      color: "fg.muted",
+      fontSize: "xs"
+    },
+    body: {
+      flex: 1,
+      overflowY: "auto",
+      p: 4
+    }
+  },
+  variants: {
+    variant: {
+      panel: {
+        root: {
+          "--page-bg-color": "colors.bg.muted",
+          bg: "color-mix(in srgb, var(--page-bg-color) 50%, white)",
+          zIndex: 1
+        },
+        header: {
+          "--page-header-row-height": "40px",
+          display: "grid",
+          gridTemplateAreas: `"nav heading actions"
+               "footer footer footer"`,
+          gridTemplateColumns: "auto max-content 1fr",
+          gridTemplateRows: "minmax(var(--page-header-row-height), auto)",
+          columnGap: 2,
+          alignItems: "center",
+          justifyContent: "stretch",
+          flexShrink: 0,
+          px: 3,
+          borderBottomWidth: "1px"
+        },
+        title: {
+          me: 4
+        }
+      },
+      settings: {
+        root: {
+          overflowY: "auto",
+          px: 4
+        },
+        header: {
+          flexDirection: "row",
+          alignItems: "center",
+          mb: {
+            base: 4,
+            lg: 8
+          },
+          minH: 24
+        },
+        heading: {
+          py: {
+            base: 4,
+            lg: 8
+          }
+        },
+        title: {
+          textStyle: "2xl"
+        },
+        description: {
+          textStyle: "md"
+        },
+        body: {
+          overflow: "visible",
+          p: 0
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "panel"
+  }
+});
+
+// src/components/persona/persona.recipe.ts
+var import_styled_system47 = require("@chakra-ui/react/styled-system");
+var baseStyleLabel = (0, import_styled_system47.defineStyle)({
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
   minW: 0,
   color: "fg"
 });
-var personaSlotRecipe = (0, import_styled_system46.defineSlotRecipe)({
+var personaSlotRecipe = (0, import_styled_system47.defineSlotRecipe)({
   className: "sui-persona",
   slots: [
     "root",
@@ -5657,9 +5763,9 @@ var personaSlotRecipe = (0, import_styled_system46.defineSlotRecipe)({
 
 // src/components/pin-input/pin-input.recipe.ts
 var import_anatomy24 = require("@chakra-ui/react/anatomy");
-var import_styled_system47 = require("@chakra-ui/react/styled-system");
+var import_styled_system48 = require("@chakra-ui/react/styled-system");
 var { variants: variants2, defaultVariants: defaultVariants2 } = inputRecipe;
-var pinInputSlotRecipe = (0, import_styled_system47.defineSlotRecipe)({
+var pinInputSlotRecipe = (0, import_styled_system48.defineSlotRecipe)({
   className: "chakra-pin-input",
   slots: import_anatomy24.pinInputAnatomy.keys(),
   base: {
@@ -5689,8 +5795,8 @@ var pinInputSlotRecipe = (0, import_styled_system47.defineSlotRecipe)({
 
 // src/components/popover/popover.recipe.ts
 var import_anatomy25 = require("@chakra-ui/react/anatomy");
-var import_styled_system48 = require("@chakra-ui/react/styled-system");
-var popoverSlotRecipe = (0, import_styled_system48.defineSlotRecipe)({
+var import_styled_system49 = require("@chakra-ui/react/styled-system");
+var popoverSlotRecipe = (0, import_styled_system49.defineSlotRecipe)({
   className: "chakra-popover",
   slots: import_anatomy25.popoverAnatomy.keys(),
   base: {
@@ -5776,8 +5882,8 @@ var popoverSlotRecipe = (0, import_styled_system48.defineSlotRecipe)({
 
 // src/components/progress-circle/progress-circle.recipe.ts
 var import_anatomy26 = require("@chakra-ui/react/anatomy");
-var import_styled_system49 = require("@chakra-ui/react/styled-system");
-var progressCircleSlotRecipe = (0, import_styled_system49.defineSlotRecipe)({
+var import_styled_system50 = require("@chakra-ui/react/styled-system");
+var progressCircleSlotRecipe = (0, import_styled_system50.defineSlotRecipe)({
   className: "chakra-progress-circle",
   slots: import_anatomy26.progressAnatomy.keys(),
   base: {
@@ -5869,8 +5975,8 @@ var progressCircleSlotRecipe = (0, import_styled_system49.defineSlotRecipe)({
 
 // src/components/progress/progress.recipe.ts
 var import_anatomy27 = require("@chakra-ui/react/anatomy");
-var import_styled_system50 = require("@chakra-ui/react/styled-system");
-var progressSlotRecipe = (0, import_styled_system50.defineSlotRecipe)({
+var import_styled_system51 = require("@chakra-ui/react/styled-system");
+var progressSlotRecipe = (0, import_styled_system51.defineSlotRecipe)({
   slots: import_anatomy27.progressAnatomy.keys(),
   className: "chakra-progress",
   base: {
@@ -5991,8 +6097,8 @@ var progressSlotRecipe = (0, import_styled_system50.defineSlotRecipe)({
 
 // src/components/radio-card/radio-card.recipe.ts
 var import_anatomy28 = require("@chakra-ui/react/anatomy");
-var import_styled_system51 = require("@chakra-ui/react/styled-system");
-var radioCardSlotRecipe = (0, import_styled_system51.defineSlotRecipe)({
+var import_styled_system52 = require("@chakra-ui/react/styled-system");
+var radioCardSlotRecipe = (0, import_styled_system52.defineSlotRecipe)({
   className: "chakra-radio-card",
   slots: import_anatomy28.radioCardAnatomy.keys(),
   base: {
@@ -6201,8 +6307,8 @@ var radioCardSlotRecipe = (0, import_styled_system51.defineSlotRecipe)({
 
 // src/components/radio-group/radio-group.recipe.ts
 var import_anatomy29 = require("@chakra-ui/react/anatomy");
-var import_styled_system52 = require("@chakra-ui/react/styled-system");
-var radioGroupSlotRecipe = (0, import_styled_system52.defineSlotRecipe)({
+var import_styled_system53 = require("@chakra-ui/react/styled-system");
+var radioGroupSlotRecipe = (0, import_styled_system53.defineSlotRecipe)({
   className: "chakra-radio-group",
   slots: import_anatomy29.radioGroupAnatomy.keys(),
   base: {
@@ -6263,8 +6369,8 @@ var radioGroupSlotRecipe = (0, import_styled_system52.defineSlotRecipe)({
 
 // src/components/rating-group/rating-group.recipe.ts
 var import_anatomy30 = require("@chakra-ui/react/anatomy");
-var import_styled_system53 = require("@chakra-ui/react/styled-system");
-var ratingGroupSlotRecipe = (0, import_styled_system53.defineSlotRecipe)({
+var import_styled_system54 = require("@chakra-ui/react/styled-system");
+var ratingGroupSlotRecipe = (0, import_styled_system54.defineSlotRecipe)({
   className: "chakra-rating-group",
   slots: import_anatomy30.ratingGroupAnatomy.keys(),
   base: {
@@ -6346,10 +6452,75 @@ var ratingGroupSlotRecipe = (0, import_styled_system53.defineSlotRecipe)({
   }
 });
 
+// src/components/section/section.recipe.ts
+var import_styled_system55 = require("@chakra-ui/react/styled-system");
+var slots2 = ["root", "header", "title", "description", "body"];
+var sectionSlotRecipe = (0, import_styled_system55.defineSlotRecipe)({
+  className: "sui-section",
+  slots: slots2,
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    header: {
+      flexShrink: 0,
+      mb: 4
+    },
+    title: {
+      textStyle: "heading",
+      fontWeight: "semibold",
+      lineHeight: "110%",
+      letterSpacing: "-1%",
+      mb: 1
+    },
+    description: {
+      color: "fg.muted",
+      fontSize: "md",
+      "& a": {
+        fontWeight: "medium",
+        color: "fg"
+      }
+    },
+    body: {
+      flex: 1,
+      minWidth: 0
+    }
+  },
+  variants: {
+    variant: {
+      annotated: {
+        root: {
+          flexDirection: {
+            base: "column",
+            md: "row"
+          },
+          mt: 4
+        },
+        header: {
+          width: {
+            base: "full",
+            md: "30%"
+          },
+          mb: {
+            base: 4,
+            md: 0
+          },
+          pe: {
+            base: 4,
+            md: 8
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {}
+});
+
 // src/components/segmented-control/segment-group.recipe.ts
 var import_anatomy31 = require("@chakra-ui/react/anatomy");
-var import_styled_system54 = require("@chakra-ui/react/styled-system");
-var segmentGroupSlotRecipe = (0, import_styled_system54.defineSlotRecipe)({
+var import_styled_system56 = require("@chakra-ui/react/styled-system");
+var segmentGroupSlotRecipe = (0, import_styled_system56.defineSlotRecipe)({
   className: "chakra-segment-group",
   slots: import_anatomy31.segmentGroupAnatomy.keys(),
   base: {
@@ -6588,8 +6759,8 @@ var sidebarNavItemSlotRecipe = (0, import_react10.defineSlotRecipe)({
 });
 
 // src/components/sidebar/sidebar.recipe.ts
-var import_styled_system55 = require("@chakra-ui/react/styled-system");
-var sidebarSlotRecipe = (0, import_styled_system55.defineSlotRecipe)({
+var import_styled_system57 = require("@chakra-ui/react/styled-system");
+var sidebarSlotRecipe = (0, import_styled_system57.defineSlotRecipe)({
   className: "sui-sidebar",
   slots: [
     "root",
@@ -6827,8 +6998,8 @@ var sidebarSlotRecipe = (0, import_styled_system55.defineSlotRecipe)({
 
 // src/components/slider/slider.recipe.ts
 var import_anatomy32 = require("@chakra-ui/react/anatomy");
-var import_styled_system56 = require("@chakra-ui/react/styled-system");
-var sliderSlotRecipe = (0, import_styled_system56.defineSlotRecipe)({
+var import_styled_system58 = require("@chakra-ui/react/styled-system");
+var sliderSlotRecipe = (0, import_styled_system58.defineSlotRecipe)({
   className: "chakra-slider",
   slots: import_anatomy32.sliderAnatomy.keys(),
   base: {
@@ -7004,8 +7175,8 @@ var sliderSlotRecipe = (0, import_styled_system56.defineSlotRecipe)({
 
 // src/components/stat/stat.recipe.ts
 var import_anatomy33 = require("@chakra-ui/react/anatomy");
-var import_styled_system57 = require("@chakra-ui/react/styled-system");
-var statSlotRecipe = (0, import_styled_system57.defineSlotRecipe)({
+var import_styled_system59 = require("@chakra-ui/react/styled-system");
+var statSlotRecipe = (0, import_styled_system59.defineSlotRecipe)({
   className: "chakra-stat",
   slots: import_anatomy33.statAnatomy.keys(),
   base: {
@@ -7082,8 +7253,8 @@ var statSlotRecipe = (0, import_styled_system57.defineSlotRecipe)({
 
 // src/components/status/status.recipe.ts
 var import_anatomy34 = require("@chakra-ui/react/anatomy");
-var import_styled_system58 = require("@chakra-ui/react/styled-system");
-var statusSlotRecipe = (0, import_styled_system58.defineSlotRecipe)({
+var import_styled_system60 = require("@chakra-ui/react/styled-system");
+var statusSlotRecipe = (0, import_styled_system60.defineSlotRecipe)({
   className: "chakra-status",
   slots: import_anatomy34.statusAnatomy.keys(),
   base: {
@@ -7128,8 +7299,8 @@ var statusSlotRecipe = (0, import_styled_system58.defineSlotRecipe)({
 
 // src/components/steps/steps.recipe.ts
 var import_anatomy35 = require("@chakra-ui/react/anatomy");
-var import_styled_system59 = require("@chakra-ui/react/styled-system");
-var stepsSlotRecipe = (0, import_styled_system59.defineSlotRecipe)({
+var import_styled_system61 = require("@chakra-ui/react/styled-system");
+var stepsSlotRecipe = (0, import_styled_system61.defineSlotRecipe)({
   className: "chakra-steps",
   slots: import_anatomy35.stepsAnatomy.keys(),
   base: {
@@ -7343,8 +7514,8 @@ var stepsSlotRecipe = (0, import_styled_system59.defineSlotRecipe)({
 
 // src/components/switch/switch.recipe.ts
 var import_anatomy36 = require("@chakra-ui/react/anatomy");
-var import_styled_system60 = require("@chakra-ui/react/styled-system");
-var switchSlotRecipe = (0, import_styled_system60.defineSlotRecipe)({
+var import_styled_system62 = require("@chakra-ui/react/styled-system");
+var switchSlotRecipe = (0, import_styled_system62.defineSlotRecipe)({
   slots: import_anatomy36.switchAnatomy.keys(),
   className: "chakra-switch",
   base: {
@@ -7501,8 +7672,8 @@ var switchSlotRecipe = (0, import_styled_system60.defineSlotRecipe)({
 
 // src/components/table/table.recipe.ts
 var import_anatomy37 = require("@chakra-ui/react/anatomy");
-var import_styled_system61 = require("@chakra-ui/react/styled-system");
-var tableSlotRecipe = (0, import_styled_system61.defineSlotRecipe)({
+var import_styled_system63 = require("@chakra-ui/react/styled-system");
+var tableSlotRecipe = (0, import_styled_system63.defineSlotRecipe)({
   className: "chakra-table",
   slots: import_anatomy37.tableAnatomy.keys(),
   base: {
@@ -7664,8 +7835,8 @@ var tableSlotRecipe = (0, import_styled_system61.defineSlotRecipe)({
 
 // src/components/tabs/tabs.recipe.ts
 var import_anatomy38 = require("@chakra-ui/react/anatomy");
-var import_styled_system62 = require("@chakra-ui/react/styled-system");
-var tabsSlotRecipe = (0, import_styled_system62.defineSlotRecipe)({
+var import_styled_system64 = require("@chakra-ui/react/styled-system");
+var tabsSlotRecipe = (0, import_styled_system64.defineSlotRecipe)({
   slots: import_anatomy38.tabsAnatomy.keys(),
   className: "chakra-tabs",
   base: {
@@ -7978,9 +8149,9 @@ var tabsSlotRecipe = (0, import_styled_system62.defineSlotRecipe)({
 
 // src/components/tag/tag.recipe.ts
 var import_anatomy39 = require("@chakra-ui/react/anatomy");
-var import_styled_system63 = require("@chakra-ui/react/styled-system");
+var import_styled_system65 = require("@chakra-ui/react/styled-system");
 var badgeVariant = badgeRecipe.variants?.variant;
-var tagSlotRecipe = (0, import_styled_system63.defineSlotRecipe)({
+var tagSlotRecipe = (0, import_styled_system65.defineSlotRecipe)({
   slots: import_anatomy39.tagAnatomy.keys(),
   className: "chakra-tag",
   base: {
@@ -8133,8 +8304,8 @@ var tagSlotRecipe = (0, import_styled_system63.defineSlotRecipe)({
 
 // src/components/timeline/timeline.recipe.ts
 var import_anatomy40 = require("@chakra-ui/react/anatomy");
-var import_styled_system64 = require("@chakra-ui/react/styled-system");
-var timelineSlotRecipe = (0, import_styled_system64.defineSlotRecipe)({
+var import_styled_system66 = require("@chakra-ui/react/styled-system");
+var timelineSlotRecipe = (0, import_styled_system66.defineSlotRecipe)({
   slots: import_anatomy40.timelineAnatomy.keys(),
   className: "chakra-timeline",
   base: {
@@ -8269,8 +8440,8 @@ var timelineSlotRecipe = (0, import_styled_system64.defineSlotRecipe)({
 
 // src/components/toaster/toast.recipe.ts
 var import_anatomy41 = require("@chakra-ui/react/anatomy");
-var import_styled_system65 = require("@chakra-ui/react/styled-system");
-var toastSlotRecipe = (0, import_styled_system65.defineSlotRecipe)({
+var import_styled_system67 = require("@chakra-ui/react/styled-system");
+var toastSlotRecipe = (0, import_styled_system67.defineSlotRecipe)({
   slots: import_anatomy41.toastAnatomy.keys(),
   className: "chakra-toast",
   base: {
@@ -8361,8 +8532,8 @@ var toastSlotRecipe = (0, import_styled_system65.defineSlotRecipe)({
 
 // src/components/tooltip/tooltip.recipe.ts
 var import_anatomy42 = require("@chakra-ui/react/anatomy");
-var import_styled_system66 = require("@chakra-ui/react/styled-system");
-var tooltipSlotRecipe = (0, import_styled_system66.defineSlotRecipe)({
+var import_styled_system68 = require("@chakra-ui/react/styled-system");
+var tooltipSlotRecipe = (0, import_styled_system68.defineSlotRecipe)({
   slots: import_anatomy42.tooltipAnatomy.keys(),
   className: "chakra-tooltip",
   base: {
@@ -8465,7 +8636,9 @@ var slotRecipes = {
   suiGridList: gridListSlotRecipe,
   suiNavbar: navbarSlotRecipe,
   suiSidebar: sidebarSlotRecipe,
-  suiSidebarNavItem: sidebarNavItemSlotRecipe
+  suiSidebarNavItem: sidebarNavItemSlotRecipe,
+  suiPage: pageSlotRecipe,
+  suiSection: sectionSlotRecipe
 };
 
 // src/theme/text-styles.ts
@@ -9406,8 +9579,8 @@ defaultConfig.utilities = Object.assign(
 var defaultSystem = (0, import_react31.createSystem)(defaultConfig);
 
 // src/index.ts
-var import_styled_system72 = require("@chakra-ui/react/styled-system");
-var import_react89 = require("@chakra-ui/react");
+var import_styled_system74 = require("@chakra-ui/react/styled-system");
+var import_react91 = require("@chakra-ui/react");
 
 // src/provider/sui-provider.tsx
 var React = __toESM(require("react"), 1);
@@ -9704,13 +9877,13 @@ var Alert = (0, import_react37.forwardRef)(
 
 // src/components/app-shell/app-shell.tsx
 var import_react38 = require("react");
-var import_styled_system67 = require("@chakra-ui/react/styled-system");
+var import_styled_system69 = require("@chakra-ui/react/styled-system");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var {
   withProvider,
   withContext,
   useStyles: useAppShellStyles
-} = (0, import_styled_system67.createSlotRecipeContext)({
+} = (0, import_styled_system69.createSlotRecipeContext)({
   key: "suiAppShell"
 });
 var AppShellRoot = withProvider(
@@ -9984,14 +10157,14 @@ var import_code = require("@chakra-ui/react/code");
 var import_collapsible = require("@chakra-ui/react/collapsible");
 
 // src/components/command/command.tsx
-var import_styled_system68 = require("@chakra-ui/react/styled-system");
+var import_styled_system70 = require("@chakra-ui/react/styled-system");
 
 // src/components/kbd/index.ts
 var import_kbd = require("@chakra-ui/react/kbd");
 
 // src/components/command/command.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var { withContext: withContext2 } = (0, import_styled_system68.createRecipeContext)({
+var { withContext: withContext2 } = (0, import_styled_system70.createRecipeContext)({
   key: "suiCommand"
 });
 var Command = (props) => {
@@ -10148,7 +10321,7 @@ __export(file_upload_exports, {
 var React6 = __toESM(require("react"), 1);
 var import_react52 = require("@chakra-ui/react");
 var import_file_upload = require("@chakra-ui/react/file-upload");
-var import_styled_system69 = require("@chakra-ui/react/styled-system");
+var import_styled_system71 = require("@chakra-ui/react/styled-system");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var Root6 = React6.forwardRef(
   function FileUploadRoot(props, ref) {
@@ -10197,7 +10370,7 @@ var List = React6.forwardRef(
 );
 var Input2 = React6.forwardRef(
   function FileInput(props, ref) {
-    const inputRecipe2 = (0, import_styled_system69.useRecipe)({ key: "input" });
+    const inputRecipe2 = (0, import_styled_system71.useRecipe)({ key: "input" });
     const [recipeProps, restProps] = inputRecipe2.splitVariantProps(props);
     const { placeholder = "Select file(s)", ...rest } = restProps;
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_file_upload.FileUpload.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -10248,12 +10421,12 @@ __export(grid_list_exports, {
 var import_grid_list = require("@saas-ui/core/grid-list");
 
 // src/components/grid-list/grid-list.context.ts
-var import_styled_system70 = require("@chakra-ui/react/styled-system");
+var import_styled_system72 = require("@chakra-ui/react/styled-system");
 var {
   withProvider: withProvider2,
   withContext: withContext3,
   useStyles: useGridListStyles
-} = (0, import_styled_system70.createSlotRecipeContext)({
+} = (0, import_styled_system72.createSlotRecipeContext)({
   key: "suiGridList"
 });
 
@@ -10310,13 +10483,13 @@ var import_icon2 = require("@chakra-ui/react/icon");
 // src/components/icon-badge/icon-badge.tsx
 var React8 = __toESM(require("react"), 1);
 var import_react53 = require("react");
-var import_styled_system71 = require("@chakra-ui/react/styled-system");
+var import_styled_system73 = require("@chakra-ui/react/styled-system");
 var import_utils6 = require("@saas-ui/core/utils");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var IconBadge = React8.forwardRef(
   (props, ref) => {
     const { icon, children, ...rest } = props;
-    const recipe = (0, import_styled_system71.useRecipe)({ key: "suiIconBadge", recipe: props.recipe });
+    const recipe = (0, import_styled_system73.useRecipe)({ key: "suiIconBadge", recipe: props.recipe });
     const [variantProps, localProps] = recipe.splitVariantProps(rest);
     const styles = recipe(variantProps);
     const element = icon || children;
@@ -10325,7 +10498,7 @@ var IconBadge = React8.forwardRef(
       focusable: false
     }) : null;
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-      import_styled_system71.chakra.div,
+      import_styled_system73.chakra.div,
       {
         ref,
         ...localProps,
@@ -11965,7 +12138,7 @@ var Toaster = (props) => {
         toast2.description && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_toast.Toast.Description, { children: toast2.description }),
         toast2.action && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_toast.Toast.ActionTrigger, { children: toast2.action.label })
       ] }),
-      closable !== false && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_toast.Toast.CloseTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(CloseButton, { size: "xs" }) })
+      closable !== false && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_toast.Toast.CloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(CloseButton, { size: "xs" }) })
     ] });
   } }) });
 };
@@ -12066,6 +12239,55 @@ var import_presence3 = require("@chakra-ui/react/presence");
 // src/components/qr-code/index.ts
 var import_qr_code = require("@chakra-ui/react/qr-code");
 
+// src/components/section/section.tsx
+var section_exports = {};
+__export(section_exports, {
+  Body: () => SectionBody,
+  Description: () => SectionDescription,
+  Header: () => SectionHeader,
+  Root: () => SectionRoot,
+  Title: () => SectionTitle
+});
+var import_react90 = require("@chakra-ui/react");
+
+// src/components/section/section.context.ts
+var import_react89 = require("@chakra-ui/react");
+var {
+  withProvider: withProvider7,
+  withContext: withContext9,
+  useStyles: useSectionStyles,
+  useClassNames: useClassNames2
+} = (0, import_react89.createSlotRecipeContext)({
+  key: "suiSection"
+});
+
+// src/components/section/section.tsx
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var SectionRoot = withProvider7(
+  "div",
+  "root"
+);
+var SectionBody = withContext9("div", "body");
+var SectionHeader = withContext9(
+  (props) => {
+    const { title, description, children, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react90.chakra.div, { ...rest, children: [
+      typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SectionTitle, { children: title }) : title,
+      typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SectionDescription, { children: description }) : description,
+      children
+    ] });
+  },
+  "header"
+);
+var SectionTitle = withContext9(
+  "h3",
+  "title"
+);
+var SectionDescription = withContext9(
+  "div",
+  "description"
+);
+
 // src/components/show/index.ts
 var import_show = require("@chakra-ui/react/show");
 
@@ -12181,6 +12403,7 @@ var import_flex = require("@chakra-ui/react/flex");
   RadioGroup,
   RatingGroup,
   SearchInput,
+  Section,
   SegmentedControl,
   Select,
   Separator,
@@ -12219,7 +12442,11 @@ var import_flex = require("@chakra-ui/react/flex");
   VisuallyHidden,
   Wrap,
   chakra,
+  createContext,
   createIcon,
+  createListCollection,
+  createRecipeContext,
+  createSlotRecipeContext,
   createSystem,
   defaultConfig,
   defaultPersonaPresenceOptions,
@@ -12254,6 +12481,7 @@ var import_flex = require("@chakra-ui/react/flex");
   usePageStyles,
   useQrCode,
   useRecipe,
+  useSectionStyles,
   useSidebar,
   useSidebarItemStyles,
   useSidebarStyles,