@saas-ui/react 3.0.0-alpha.22 → 3.0.0-alpha.24

package/dist/index.js

@@ -1,9 +1,23 @@
 import {
-  sidebar_exports,
-  useSidebar,
-  useSidebarItemStyles,
-  useSidebarStyles
-} from "./chunk-U23VDAWJ.js";
+  Tooltip
+} from "./chunk-QSNSWCTM.js";
+import {
+  colors
+} from "./chunk-3MO37LYW.js";
+import {
+  PinInput
+} from "./chunk-2EUACKRH.js";
+import {
+  Status
+} from "./chunk-YKSY7UOM.js";
+import {
+  steps_exports
+} from "./chunk-VZG7EJ64.js";
+import {
+  Tabs,
+  useTabsContext,
+  useTabsStyles
+} from "./chunk-IVLUAUU5.js";
 import {
   Switch
 } from "./chunk-SA3OGTOO.js";
@@ -13,49 +27,40 @@ import {
 import {
   Toaster,
   toast
-} from "./chunk-HELHPHIQ.js";
-import {
-  Tooltip
-} from "./chunk-QSNSWCTM.js";
-import {
-  steps_exports
-} from "./chunk-VZG7EJ64.js";
+} from "./chunk-RLIAFHVM.js";
 import {
-  Status
-} from "./chunk-Q6IC3BTH.js";
+  pagination_exports
+} from "./chunk-MLJN6IOJ.js";
 import {
-  colors
-} from "./chunk-3MO37LYW.js";
+  PasswordInput
+} from "./chunk-CD2JUFI2.js";
 import {
-  PinInput
-} from "./chunk-2EUACKRH.js";
+  Radio,
+  RadioGroup
+} from "./chunk-WYLMBMAH.js";
 import {
   Persona,
   PersonaAvatar,
   defaultPresenceOptions
 } from "./chunk-GWC5GCMW.js";
-import {
-  Radio,
-  RadioGroup
-} from "./chunk-WYLMBMAH.js";
-import {
-  SegmentedControl
-} from "./chunk-SKXSBAOS.js";
 import {
   SearchInput
 } from "./chunk-46ISJZBS.js";
 import {
   namespace_exports as namespace_exports3
-} from "./chunk-BU7QENBQ.js";
+} from "./chunk-3JZ42NYM.js";
 import {
-  navbar_exports
-} from "./chunk-Q6SNJJO2.js";
+  SegmentedControl
+} from "./chunk-SKXSBAOS.js";
 import {
-  IconButton
-} from "./chunk-MS2ELLDY.js";
+  sidebar_exports,
+  useSidebar,
+  useSidebarItemStyles,
+  useSidebarStyles
+} from "./chunk-U23VDAWJ.js";
 import {
-  menu_exports
-} from "./chunk-KFXNVUEZ.js";
+  IconBadge
+} from "./chunk-I2RXEKTB.js";
 import {
   loading_overlay_exports,
   useLoadingOverlayStyles
@@ -67,46 +72,51 @@ import {
   Link
 } from "./chunk-TZBAM4AD.js";
 import {
-  SuiContext,
-  SuiProvider,
-  useLink,
-  useSui
-} from "./chunk-O2WVT2BP.js";
+  menu_exports
+} from "./chunk-KFXNVUEZ.js";
+import "./chunk-KTLWEUNW.js";
 import {
   NumberInput
 } from "./chunk-S5J6REMC.js";
-import {
-  pagination_exports
-} from "./chunk-MLJN6IOJ.js";
-import {
-  PasswordInput
-} from "./chunk-CD2JUFI2.js";
 import {
   InputGroup
 } from "./chunk-PKI6YH2V.js";
+import {
+  navbar_exports
+} from "./chunk-Q6SNJJO2.js";
+import {
+  SuiContext,
+  SuiProvider,
+  useLink,
+  useSui
+} from "./chunk-O2WVT2BP.js";
 import {
   Command
 } from "./chunk-UASXI64E.js";
+import {
+  DataList,
+  useDataListStyles
+} from "./chunk-52XM5VXJ.js";
 import {
   namespace_exports
-} from "./chunk-EQ7Q6HRE.js";
+} from "./chunk-OIOBGO3Y.js";
 import {
   EmptyState
 } from "./chunk-FJFNGSPL.js";
 import {
   namespace_exports as namespace_exports2
-} from "./chunk-VJ4NCA6R.js";
+} from "./chunk-3Y67QIZ7.js";
+import "./chunk-JMYI6YXR.js";
 import {
   CloseButton
-} from "./chunk-BKYGKH3L.js";
+} from "./chunk-YXGJOOMM.js";
+import "./chunk-4TPVIHNO.js";
 import {
   grid_list_exports
 } from "./chunk-NSD5HRIP.js";
-import "./chunk-KTLWEUNW.js";
-import "./chunk-4TPVIHNO.js";
 import {
-  IconBadge
-} from "./chunk-I2RXEKTB.js";
+  IconButton
+} from "./chunk-MS2ELLDY.js";
 import {
   AppShell
 } from "./chunk-6ZNR6N2K.js";
@@ -115,12 +125,12 @@ import {
   Avatar,
   AvatarGroup
 } from "./chunk-JO4WJVYO.js";
-import {
-  Badge
-} from "./chunk-INV6RT5B.js";
 import {
   breadcrumb_exports
 } from "./chunk-TT4C5VXB.js";
+import {
+  Badge
+} from "./chunk-INV6RT5B.js";
 import {
   Button
 } from "./chunk-NGSHWY7E.js";
@@ -1609,6 +1619,20 @@ var semanticColors = defineSemanticTokens.colors({
       value: { _light: "{colors.gray.400}", _dark: "{colors.gray.400}" }
     }
   },
+  status: {
+    success: {
+      value: { _light: "{colors.green.500}", _dark: "{colors.green.500}" }
+    },
+    error: {
+      value: { _light: "{colors.red.500}", _dark: "{colors.red.500}" }
+    },
+    warning: {
+      value: { _light: "{colors.orange.500}", _dark: "{colors.orange.500}" }
+    },
+    info: {
+      value: { _light: "{colors.blue.500}", _dark: "{colors.blue.500}" }
+    }
+  },
   sidebar: {
     bg: {
       value: { _light: "{colors.gray.100}", _dark: "{colors.gray.900}" }
@@ -3329,9 +3353,135 @@ var personaSlotRecipe = defineSlotRecipe8({
   }
 });
 
-// src/components/sidebar/sidebar-item.recipe.ts
+// src/components/segmented-control/segment-group.recipe.ts
 import { defineSlotRecipe as defineSlotRecipe9 } from "@chakra-ui/react";
-var sidebarNavItemSlotRecipe = defineSlotRecipe9({
+import { segmentGroupAnatomy } from "@chakra-ui/react/anatomy";
+var segmentGroupSlotRecipe = defineSlotRecipe9({
+  className: "chakra-segment-group",
+  slots: segmentGroupAnatomy.keys(),
+  base: {
+    root: {
+      "--segment-radius": "radii.md",
+      borderRadius: "md",
+      display: "inline-flex",
+      boxShadow: "inset",
+      minW: "max-content",
+      textAlign: "center",
+      position: "relative",
+      isolation: "isolate",
+      bg: "bg.muted",
+      borderWidth: "1px"
+    },
+    item: {
+      display: "flex",
+      alignItems: "center",
+      userSelect: "none",
+      fontSize: "sm",
+      position: "relative",
+      color: "fg.subtle",
+      cursor: "button",
+      borderRadius: "var(--segment-radius)",
+      _disabled: {
+        opacity: "0.5"
+      },
+      _hover: {
+        color: "fg"
+      },
+      "&:has(input:focus-visible)": {
+        focusRing: "inside",
+        focusRingWidth: "1px"
+      },
+      _before: {
+        content: '""',
+        position: "absolute",
+        insetInlineStart: 0,
+        insetBlock: "0",
+        bg: "border",
+        width: "1px",
+        transition: "opacity 0.2s"
+      },
+      _checked: {
+        color: "fg"
+      },
+      "& + &[data-state=checked], &[data-state=checked] + &, &:first-of-type": {
+        _before: {
+          opacity: "0"
+        }
+      },
+      "&[data-state=checked][data-ssr]": {
+        shadow: "sm",
+        bg: "bg",
+        color: "fg",
+        borderRadius: "var(--segment-radius)"
+      }
+    },
+    indicator: {
+      shadow: "sm",
+      pos: "absolute",
+      bg: {
+        base: "bg",
+        _dark: "bg.emphasized"
+      },
+      width: "var(--width)",
+      height: "var(--height)",
+      top: "var(--top)",
+      left: "var(--left)",
+      zIndex: -1,
+      borderRadius: "var(--segment-radius)"
+    }
+  },
+  variants: {
+    size: {
+      xs: {
+        root: {
+          height: "6"
+        },
+        item: {
+          textStyle: "xs",
+          px: "3",
+          gap: "1"
+        }
+      },
+      sm: {
+        root: {
+          height: "7"
+        },
+        item: {
+          textStyle: "sm",
+          px: "4",
+          gap: "2"
+        }
+      },
+      md: {
+        root: {
+          height: "8"
+        },
+        item: {
+          textStyle: "md",
+          px: "4",
+          gap: "2"
+        }
+      },
+      lg: {
+        root: {
+          height: "10"
+        },
+        item: {
+          textStyle: "md",
+          px: "5",
+          gap: "3"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+// src/components/sidebar/sidebar-item.recipe.ts
+import { defineSlotRecipe as defineSlotRecipe10 } from "@chakra-ui/react";
+var sidebarNavItemSlotRecipe = defineSlotRecipe10({
   className: "sui-sidebar-nav-item",
   slots: ["item", "button", "endElement"],
   base: {
@@ -3416,8 +3566,8 @@ var sidebarNavItemSlotRecipe = defineSlotRecipe9({
 });
 
 // src/components/sidebar/sidebar.recipe.ts
-import { defineSlotRecipe as defineSlotRecipe10 } from "@chakra-ui/react";
-var sidebarSlotRecipe = defineSlotRecipe10({
+import { defineSlotRecipe as defineSlotRecipe11 } from "@chakra-ui/react";
+var sidebarSlotRecipe = defineSlotRecipe11({
   className: "sui-sidebar",
   slots: [
     "root",
@@ -3653,9 +3803,9 @@ var sidebarSlotRecipe = defineSlotRecipe10({
 });
 
 // src/components/status/status.recipe.ts
-import { defineSlotRecipe as defineSlotRecipe11 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe12 } from "@chakra-ui/react";
 import { statusAnatomy } from "@chakra-ui/react/anatomy";
-var statusSlotRecipe = defineSlotRecipe11({
+var statusSlotRecipe = defineSlotRecipe12({
   className: "chakra-status",
   slots: statusAnatomy.keys(),
   base: {
@@ -3698,23 +3848,320 @@ var statusSlotRecipe = defineSlotRecipe11({
   }
 });
 
-// src/components/tag/tag.recipe.ts
-import { defineSlotRecipe as defineSlotRecipe12 } from "@chakra-ui/react";
-import { tagAnatomy } from "@chakra-ui/react/anatomy";
-var _a;
-var badgeVariant = (_a = badgeRecipe.variants) == null ? void 0 : _a.variant;
-var tagSlotRecipe = defineSlotRecipe12({
-  slots: tagAnatomy.keys(),
-  className: "chakra-tag",
+// src/components/tabs/tabs.recipe.ts
+import { defineSlotRecipe as defineSlotRecipe13 } from "@chakra-ui/react";
+import { tabsAnatomy } from "@chakra-ui/react/anatomy";
+var tabsSlotRecipe = defineSlotRecipe13({
+  slots: tabsAnatomy.keys(),
+  className: "chakra-tabs",
   base: {
     root: {
-      colorPalette: "neutral",
-      display: "inline-flex",
-      alignItems: "center",
-      verticalAlign: "top",
-      maxWidth: "100%",
-      userSelect: "none",
-      borderRadius: "full",
+      colorPalette: "gray",
+      "--tabs-trigger-radius": "radii.md",
+      position: "relative",
+      _horizontal: {
+        display: "block"
+      },
+      _vertical: {
+        display: "flex"
+      }
+    },
+    list: {
+      display: "inline-flex",
+      position: "relative",
+      isolation: "isolate",
+      "--tabs-indicator-shadow": "shadows.xs",
+      "--tabs-indicator-bg": "colors.bg",
+      minH: "var(--tabs-height)",
+      _horizontal: {
+        flexDirection: "row"
+      },
+      _vertical: {
+        flexDirection: "column"
+      }
+    },
+    trigger: {
+      outline: "0",
+      minW: "var(--tabs-height)",
+      height: "var(--tabs-height)",
+      display: "flex",
+      alignItems: "center",
+      fontWeight: "medium",
+      position: "relative",
+      cursor: "button",
+      gap: "2",
+      _focusVisible: {
+        zIndex: 1,
+        focusVisibleRing: "outside"
+      },
+      _disabled: {
+        cursor: "not-allowed",
+        opacity: 0.5
+      }
+    },
+    content: {
+      focusVisibleRing: "inside",
+      _horizontal: {
+        width: "100%",
+        pt: "var(--tabs-content-padding)"
+      },
+      _vertical: {
+        height: "100%",
+        ps: "var(--tabs-content-padding)"
+      }
+    },
+    indicator: {
+      width: "var(--width)",
+      height: "var(--height)",
+      borderRadius: "var(--tabs-indicator-radius)",
+      bg: "var(--tabs-indicator-bg)",
+      shadow: "var(--tabs-indicator-shadow)",
+      zIndex: -1
+    }
+  },
+  variants: {
+    fitted: {
+      true: {
+        list: {
+          display: "flex"
+        },
+        trigger: {
+          flex: 1,
+          textAlign: "center",
+          justifyContent: "center"
+        }
+      }
+    },
+    justify: {
+      start: {
+        list: {
+          justifyContent: "flex-start"
+        }
+      },
+      center: {
+        list: {
+          justifyContent: "center"
+        }
+      },
+      end: {
+        list: {
+          justifyContent: "flex-end"
+        }
+      }
+    },
+    size: {
+      xs: {
+        root: {
+          "--tabs-height": "sizes.6",
+          "--tabs-content-padding": "spacing.2"
+        },
+        trigger: {
+          py: "1",
+          px: "2",
+          textStyle: "xs"
+        }
+      },
+      sm: {
+        root: {
+          "--tabs-height": "sizes.7",
+          "--tabs-content-padding": "spacing.3"
+        },
+        trigger: {
+          py: "1",
+          px: "3",
+          textStyle: "sm"
+        }
+      },
+      md: {
+        root: {
+          "--tabs-height": "sizes.8",
+          "--tabs-content-padding": "spacing.4"
+        },
+        trigger: {
+          py: "2",
+          px: "4",
+          textStyle: "sm"
+        }
+      },
+      lg: {
+        root: {
+          "--tabs-height": "sizes.10",
+          "--tabs-content-padding": "spacing.4.5"
+        },
+        trigger: {
+          py: "2",
+          px: "4.5",
+          textStyle: "md"
+        }
+      }
+    },
+    variant: {
+      line: {
+        list: {
+          display: "flex",
+          borderColor: "border",
+          _horizontal: {
+            borderBottomWidth: "1px"
+          },
+          _vertical: {
+            borderEndWidth: "1px"
+          }
+        },
+        trigger: {
+          color: "fg.muted",
+          _hover: {
+            color: "fg.subtle"
+          },
+          _disabled: {
+            _active: { bg: "initial" }
+          },
+          _selected: {
+            color: "fg !important",
+            _horizontal: {
+              layerStyle: "indicator.bottom",
+              "--indicator-offset-y": "-1px",
+              "--indicator-color": "colors.colorPalette.solid"
+            },
+            _vertical: {
+              layerStyle: "indicator.end",
+              "--indicator-offset-x": "-1px"
+            }
+          }
+        }
+      },
+      pills: {
+        list: {
+          gap: 2
+        },
+        trigger: {
+          borderRadius: "var(--tabs-trigger-radius)",
+          color: "fg.muted",
+          borderWidth: "1px",
+          borderColor: "border.emphasized",
+          _hover: {
+            bg: "bg.muted",
+            color: "fg.subtle"
+          },
+          _selected: {
+            bg: "colorPalette.subtle !important",
+            color: "colorPalette.fg !important",
+            borderColor: "colorPalette.solid/50"
+          }
+        }
+      },
+      enclosed: {
+        list: {
+          bg: "bg.muted",
+          boxShadow: "inset",
+          borderRadius: "md",
+          borderWidth: "1px",
+          minH: "calc(var(--tabs-height) - 4px)"
+        },
+        trigger: {
+          justifyContent: "center",
+          color: "fg.muted",
+          borderRadius: "var(--tabs-trigger-radius)",
+          _selected: {
+            bg: "bg",
+            color: "colorPalette.fg",
+            shadow: "sm"
+          }
+        }
+      },
+      outline: {
+        list: {
+          "--line-thickness": "1px",
+          "--line-offset": "calc(var(--line-thickness) * -1)",
+          borderColor: "border",
+          display: "flex",
+          _horizontal: {
+            _before: {
+              content: '""',
+              position: "absolute",
+              bottom: "0px",
+              width: "100%",
+              borderBottomWidth: "var(--line-thickness)",
+              borderBottomColor: "border"
+            }
+          },
+          _vertical: {
+            _before: {
+              content: '""',
+              position: "absolute",
+              insetInline: "var(--line-offset)",
+              height: "calc(100% - calc(var(--line-thickness) * 2))",
+              borderEndWidth: "var(--line-thickness)",
+              borderEndColor: "border"
+            }
+          }
+        },
+        trigger: {
+          color: "fg.muted",
+          borderWidth: "1px",
+          borderColor: "transparent",
+          _selected: {
+            bg: "currentBg",
+            color: "colorPalette.fg"
+          },
+          _horizontal: {
+            borderTopRadius: "var(--tabs-trigger-radius)",
+            marginBottom: "var(--line-offset)",
+            marginEnd: { _notLast: "var(--line-offset)" },
+            _selected: {
+              borderColor: "border",
+              borderBottomColor: "transparent"
+            }
+          },
+          _vertical: {
+            borderStartRadius: "var(--tabs-trigger-radius)",
+            marginEnd: "var(--line-offset)",
+            marginBottom: { _notLast: "var(--line-offset)" },
+            _selected: {
+              borderColor: "border",
+              borderEndColor: "transparent"
+            }
+          }
+        }
+      },
+      plain: {
+        trigger: {
+          color: "fg.muted",
+          _selected: {
+            color: "colorPalette.fg"
+          },
+          borderRadius: "var(--tabs-trigger-radius)",
+          "&[data-selected][data-ssr]": {
+            bg: "var(--tabs-indicator-bg)",
+            shadow: "var(--tabs-indicator-shadow)",
+            borderRadius: "var(--tabs-indicator-radius)"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "line"
+  }
+});
+
+// src/components/tag/tag.recipe.ts
+import { defineSlotRecipe as defineSlotRecipe14 } from "@chakra-ui/react";
+import { tagAnatomy } from "@chakra-ui/react/anatomy";
+var _a;
+var badgeVariant = (_a = badgeRecipe.variants) == null ? void 0 : _a.variant;
+var tagSlotRecipe = defineSlotRecipe14({
+  slots: tagAnatomy.keys(),
+  className: "chakra-tag",
+  base: {
+    root: {
+      colorPalette: "neutral",
+      display: "inline-flex",
+      alignItems: "center",
+      verticalAlign: "top",
+      maxWidth: "100%",
+      userSelect: "none",
+      borderRadius: "full",
       focusVisibleRing: "outside"
     },
     label: {
@@ -3750,11 +4197,14 @@ var tagSlotRecipe = defineSlotRecipe12({
       justifyContent: "center",
       flexShrink: 0,
       boxSize: "var(--tag-element-size)",
+      _icon: { boxSize: "80% !important" },
       "&:has([data-scope=avatar])": {
         boxSize: "var(--tag-avatar-size)",
         ms: "var(--tag-element-offset)"
       },
-      _icon: { boxSize: "100%" }
+      '&:has([class*="status__root"])': {
+        width: "var(--tag-status-size)"
+      }
     },
     endElement: {
       flexShrink: 0,
@@ -3773,6 +4223,7 @@ var tagSlotRecipe = defineSlotRecipe12({
           minH: "5",
           gap: "1",
           "--tag-avatar-size": "spacing.3.5",
+          "--tag-status-size": "spacing.2",
           "--tag-element-size": "spacing.3.5",
           "--tag-element-offset": "spacing.-0.5"
         },
@@ -3786,6 +4237,7 @@ var tagSlotRecipe = defineSlotRecipe12({
           minH: "6",
           gap: "1",
           "--tag-avatar-size": "spacing.4",
+          "--tag-status-size": "spacing.2",
           "--tag-element-size": "spacing.4",
           "--tag-element-offset": "spacing.-1"
         },
@@ -3799,6 +4251,7 @@ var tagSlotRecipe = defineSlotRecipe12({
           minH: "7",
           gap: "1",
           "--tag-avatar-size": "spacing.5",
+          "--tag-status-size": "spacing.2",
           "--tag-element-size": "spacing.5",
           "--tag-element-offset": "spacing.-1.5"
         },
@@ -3815,11 +4268,12 @@ var tagSlotRecipe = defineSlotRecipe12({
           minH: "8",
           gap: "1.5",
           "--tag-avatar-size": "spacing.6",
+          "--tag-status-size": "spacing.2",
           "--tag-element-size": "spacing.6",
           "--tag-element-offset": "spacing.-2"
         },
         label: {
-          textStyle: "sm"
+          textStyle: "md"
         },
         closeTrigger: {
           padding: "3px"
@@ -3847,10 +4301,102 @@ var tagSlotRecipe = defineSlotRecipe12({
   }
 });
 
+// src/components/toaster/toast.recipe.ts
+import { defineSlotRecipe as defineSlotRecipe15 } from "@chakra-ui/react";
+import { toastAnatomy } from "@chakra-ui/react/anatomy";
+var toastSlotRecipe = defineSlotRecipe15({
+  slots: toastAnatomy.keys(),
+  className: "chakra-toast",
+  base: {
+    root: {
+      width: "full",
+      display: "flex",
+      alignItems: "flex-start",
+      position: "relative",
+      gap: "2",
+      py: "3",
+      ps: "3",
+      pe: "6",
+      borderRadius: "md",
+      borderWidth: "1px",
+      translate: "var(--x) var(--y)",
+      scale: "var(--scale)",
+      zIndex: "var(--z-index)",
+      height: "var(--height, var(--toast-height))",
+      opacity: "var(--opacity)",
+      willChange: "translate, opacity, scale, height",
+      transition: "translate 400ms, scale 400ms, opacity 400ms, height 200ms, box-shadow 200ms",
+      transitionTimingFunction: "bounce-in",
+      _closed: {
+        transition: "translate 400ms, scale 400ms, height 200ms, opacity 200ms",
+        transitionTimingFunction: "bounce-out"
+      },
+      bg: "bg.panel",
+      color: "fg",
+      boxShadow: "lg",
+      overflow: "hidden",
+      "--toast-indicated-color": "colors.fg.muted",
+      "&[data-type=warning]": {
+        "--toast-indicated-color": "colors.fg.warning"
+      },
+      "&[data-type=success]": {
+        "--toast-indicated-color": "colors.fg.success"
+      },
+      "&[data-type=error]": {
+        "--toast-indicated-color": "colors.fg.error"
+      },
+      "&[data-overlap]": {
+        _before: {
+          content: '""',
+          position: "absolute",
+          inset: "0",
+          maskImage: "linear-gradient(to bottom, transparent, black 50%)"
+        }
+      }
+    },
+    title: {
+      fontWeight: "medium",
+      textStyle: "sm",
+      marginEnd: "2"
+    },
+    description: {
+      display: "inline",
+      textStyle: "sm",
+      opacity: "0.8"
+    },
+    indicator: {
+      flexShrink: "0",
+      boxSize: "5",
+      color: "var(--toast-indicated-color)"
+    },
+    actionTrigger: {
+      cursor: "button",
+      textStyle: "sm",
+      fontWeight: "medium",
+      height: "6",
+      px: "3",
+      ms: "-3",
+      borderRadius: "sm",
+      alignSelf: "flex-start",
+      transition: "background 200ms",
+      color: "colorPalette.solid/80",
+      _hover: {
+        bg: "bg.subtle",
+        color: "colorPalette.solid"
+      }
+    },
+    closeTrigger: {
+      position: "absolute",
+      top: "2",
+      insetEnd: "2"
+    }
+  }
+});
+
 // src/theme/recipes/chakra/accordion.ts
-import { defineSlotRecipe as defineSlotRecipe13 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe16 } from "@chakra-ui/react";
 import { accordionAnatomy } from "@chakra-ui/react/anatomy";
-var accordionSlotRecipe = defineSlotRecipe13({
+var accordionSlotRecipe = defineSlotRecipe16({
   className: "chakra-accordion",
   slots: accordionAnatomy.keys(),
   base: {
@@ -3988,9 +4534,9 @@ var accordionSlotRecipe = defineSlotRecipe13({
 });
 
 // src/theme/recipes/chakra/action-bar.ts
-import { defineSlotRecipe as defineSlotRecipe14 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe17 } from "@chakra-ui/react";
 import { actionBarAnatomy } from "@chakra-ui/react/anatomy";
-var actionBarSlotRecipe = defineSlotRecipe14({
+var actionBarSlotRecipe = defineSlotRecipe17({
   className: "chakra-action-bar",
   slots: actionBarAnatomy.keys(),
   base: {
@@ -4046,9 +4592,9 @@ var actionBarSlotRecipe = defineSlotRecipe14({
 });
 
 // src/theme/recipes/chakra/alert.ts
-import { defineSlotRecipe as defineSlotRecipe15 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe18 } from "@chakra-ui/react";
 import { alertAnatomy } from "@chakra-ui/react/anatomy";
-var alertSlotRecipe = defineSlotRecipe15({
+var alertSlotRecipe = defineSlotRecipe18({
   slots: alertAnatomy.keys(),
   className: "chakra-alert",
   base: {
@@ -4195,9 +4741,9 @@ var alertSlotRecipe = defineSlotRecipe15({
 });
 
 // src/theme/recipes/chakra/blockquote.ts
-import { defineSlotRecipe as defineSlotRecipe16 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe19 } from "@chakra-ui/react";
 import { blockquoteAnatomy } from "@chakra-ui/react/anatomy";
-var blockquoteSlotRecipe = defineSlotRecipe16({
+var blockquoteSlotRecipe = defineSlotRecipe19({
   className: "chakra-blockquote",
   slots: blockquoteAnatomy.keys(),
   base: {
@@ -4274,9 +4820,9 @@ var blockquoteSlotRecipe = defineSlotRecipe16({
 });
 
 // src/theme/recipes/chakra/breadcrumb.ts
-import { defineSlotRecipe as defineSlotRecipe17 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe20 } from "@chakra-ui/react";
 import { breadcrumbAnatomy } from "@chakra-ui/react/anatomy";
-var breadcrumbSlotRecipe = defineSlotRecipe17({
+var breadcrumbSlotRecipe = defineSlotRecipe20({
   className: "chakra-breadcrumb",
   slots: breadcrumbAnatomy.keys(),
   base: {
@@ -4366,9 +4912,9 @@ var breadcrumbSlotRecipe = defineSlotRecipe17({
 });
 
 // src/theme/recipes/chakra/card.ts
-import { defineSlotRecipe as defineSlotRecipe18 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe21 } from "@chakra-ui/react";
 import { cardAnatomy } from "@chakra-ui/react/anatomy";
-var cardSlotRecipe = defineSlotRecipe18({
+var cardSlotRecipe = defineSlotRecipe21({
   className: "chakra-card",
   slots: cardAnatomy.keys(),
   base: {
@@ -4488,10 +5034,10 @@ var cardSlotRecipe = defineSlotRecipe18({
 });
 
 // src/theme/recipes/chakra/checkbox.ts
-import { defineSlotRecipe as defineSlotRecipe19 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe22 } from "@chakra-ui/react";
 import { checkboxAnatomy } from "@chakra-ui/react/anatomy";
 var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
-var checkboxSlotRecipe = defineSlotRecipe19({
+var checkboxSlotRecipe = defineSlotRecipe22({
   slots: checkboxAnatomy.keys(),
   className: "chakra-checkbox",
   base: {
@@ -4553,10 +5099,10 @@ var checkboxSlotRecipe = defineSlotRecipe19({
 });
 
 // src/theme/recipes/chakra/checkbox-card.ts
-import { defineSlotRecipe as defineSlotRecipe20 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe23 } from "@chakra-ui/react";
 import { checkboxCardAnatomy } from "@chakra-ui/react/anatomy";
 var _a3, _b2, _c2, _d2, _e2, _f2, _g2;
-var checkboxCardSlotRecipe = defineSlotRecipe20({
+var checkboxCardSlotRecipe = defineSlotRecipe23({
   slots: checkboxCardAnatomy.keys(),
   className: "chakra-checkbox-card",
   base: {
@@ -4756,9 +5302,9 @@ var checkboxCardSlotRecipe = defineSlotRecipe20({
 });
 
 // src/theme/recipes/chakra/collapsible.ts
-import { defineSlotRecipe as defineSlotRecipe21 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe24 } from "@chakra-ui/react";
 import { collapsibleAnatomy } from "@chakra-ui/react/anatomy";
-var collapsibleSlotRecipe = defineSlotRecipe21({
+var collapsibleSlotRecipe = defineSlotRecipe24({
   slots: collapsibleAnatomy.keys(),
   className: "chakra-collapsible",
   base: {
@@ -4777,9 +5323,9 @@ var collapsibleSlotRecipe = defineSlotRecipe21({
 });
 
 // src/theme/recipes/chakra/data-list.ts
-import { defineSlotRecipe as defineSlotRecipe22 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe25 } from "@chakra-ui/react";
 import { dataListAnatomy } from "@chakra-ui/react/anatomy";
-var dataListSlotRecipe = defineSlotRecipe22({
+var dataListSlotRecipe = defineSlotRecipe25({
   slots: dataListAnatomy.keys(),
   className: "chakra-data-list",
   base: {
@@ -4857,7 +5403,7 @@ var dataListSlotRecipe = defineSlotRecipe22({
 });
 
 // src/theme/recipes/chakra/editable.ts
-import { defineSlotRecipe as defineSlotRecipe23, defineStyle as defineStyle2 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe26, defineStyle as defineStyle2 } from "@chakra-ui/react";
 import { editableAnatomy } from "@chakra-ui/react/anatomy";
 var sharedStyles = defineStyle2({
   fontSize: "inherit",
@@ -4866,7 +5412,7 @@ var sharedStyles = defineStyle2({
   bg: "transparent",
   borderRadius: "l2"
 });
-var editableSlotRecipe = defineSlotRecipe23({
+var editableSlotRecipe = defineSlotRecipe26({
   slots: editableAnatomy.keys(),
   className: "chakra-editable",
   base: {
@@ -4942,9 +5488,9 @@ var editableSlotRecipe = defineSlotRecipe23({
 });
 
 // src/theme/recipes/chakra/empty-state.ts
-import { defineSlotRecipe as defineSlotRecipe24 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe27 } from "@chakra-ui/react";
 import { emptyStateAnatomy } from "@chakra-ui/react/anatomy";
-var emptyStateSlotRecipe = defineSlotRecipe24({
+var emptyStateSlotRecipe = defineSlotRecipe27({
   slots: emptyStateAnatomy.keys(),
   className: "chakra-empty-state",
   base: {
@@ -5034,9 +5580,9 @@ var emptyStateSlotRecipe = defineSlotRecipe24({
 });
 
 // src/theme/recipes/chakra/field.ts
-import { defineSlotRecipe as defineSlotRecipe25 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe28 } from "@chakra-ui/react";
 import { fieldAnatomy } from "@chakra-ui/react/anatomy";
-var fieldSlotRecipe = defineSlotRecipe25({
+var fieldSlotRecipe = defineSlotRecipe28({
   className: "chakra-field",
   slots: fieldAnatomy.keys(),
   base: {
@@ -5110,9 +5656,9 @@ var fieldSlotRecipe = defineSlotRecipe25({
 });
 
 // src/theme/recipes/chakra/file-upload.ts
-import { defineSlotRecipe as defineSlotRecipe26 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe29 } from "@chakra-ui/react";
 import { fileUploadAnatomy } from "@chakra-ui/react/anatomy";
-var fileUploadSlotRecipe = defineSlotRecipe26({
+var fileUploadSlotRecipe = defineSlotRecipe29({
   className: "chakra-file-upload",
   slots: fileUploadAnatomy.keys(),
   base: {
@@ -5206,9 +5752,9 @@ var fileUploadSlotRecipe = defineSlotRecipe26({
 });
 
 // src/theme/recipes/chakra/hover-card.ts
-import { defineSlotRecipe as defineSlotRecipe27 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe30 } from "@chakra-ui/react";
 import { hoverCardAnatomy } from "@chakra-ui/react/anatomy";
-var hoverCardSlotRecipe = defineSlotRecipe27({
+var hoverCardSlotRecipe = defineSlotRecipe30({
   className: "chakra-hover-card",
   slots: hoverCardAnatomy.keys(),
   base: {
@@ -5273,9 +5819,9 @@ var hoverCardSlotRecipe = defineSlotRecipe27({
 });
 
 // src/theme/recipes/chakra/list.ts
-import { defineSlotRecipe as defineSlotRecipe28 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe31 } from "@chakra-ui/react";
 import { listAnatomy } from "@chakra-ui/react/anatomy";
-var listSlotRecipe = defineSlotRecipe28({
+var listSlotRecipe = defineSlotRecipe31({
   className: "chakra-list",
   slots: listAnatomy.keys(),
   base: {
@@ -5337,9 +5883,9 @@ var listSlotRecipe = defineSlotRecipe28({
 });
 
 // src/theme/recipes/chakra/menu.ts
-import { defineSlotRecipe as defineSlotRecipe29 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe32 } from "@chakra-ui/react";
 import { menuAnatomy } from "@chakra-ui/react/anatomy";
-var menuSlotRecipe = defineSlotRecipe29({
+var menuSlotRecipe = defineSlotRecipe32({
   className: "chakra-menu",
   slots: menuAnatomy.keys(),
   base: {
@@ -5460,13 +6006,13 @@ var menuSlotRecipe = defineSlotRecipe29({
 });
 
 // src/theme/recipes/chakra/native-select.ts
-import { defineSlotRecipe as defineSlotRecipe31 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe34 } from "@chakra-ui/react";
 import { nativeSelectAnatomy } from "@chakra-ui/react/anatomy";
 
 // src/theme/recipes/chakra/select.ts
-import { defineSlotRecipe as defineSlotRecipe30 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe33 } from "@chakra-ui/react";
 import { selectAnatomy } from "@chakra-ui/react/anatomy";
-var selectSlotRecipe = defineSlotRecipe30({
+var selectSlotRecipe = defineSlotRecipe33({
   className: "chakra-select",
   slots: selectAnatomy.keys(),
   base: {
@@ -5751,7 +6297,7 @@ var selectSlotRecipe = defineSlotRecipe30({
 
 // src/theme/recipes/chakra/native-select.ts
 var _a4, _b3;
-var nativeSelectSlotRecipe = defineSlotRecipe31({
+var nativeSelectSlotRecipe = defineSlotRecipe34({
   className: "chakra-native-select",
   slots: nativeSelectAnatomy.keys(),
   base: {
@@ -5884,7 +6430,7 @@ var nativeSelectSlotRecipe = defineSlotRecipe31({
 });
 
 // src/theme/recipes/chakra/number-input.ts
-import { defineSlotRecipe as defineSlotRecipe32, defineStyle as defineStyle3 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe35, defineStyle as defineStyle3 } from "@chakra-ui/react";
 import { numberInputAnatomy } from "@chakra-ui/react/anatomy";
 
 // src/theme/utils.ts
@@ -5928,7 +6474,7 @@ var triggerStyle = defineStyle3({
     bg: "bg.emphasized"
   }
 });
-var numberInputSlotRecipe = defineSlotRecipe32({
+var numberInputSlotRecipe = defineSlotRecipe35({
   className: "chakra-number-input",
   slots: numberInputAnatomy.keys(),
   base: {
@@ -6013,10 +6559,10 @@ var numberInputSlotRecipe = defineSlotRecipe32({
 });
 
 // src/theme/recipes/chakra/pin-input.ts
-import { defineSlotRecipe as defineSlotRecipe33 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe36 } from "@chakra-ui/react";
 import { pinInputAnatomy } from "@chakra-ui/react/anatomy";
 var { variants: variants2, defaultVariants: defaultVariants2 } = inputRecipe;
-var pinInputSlotRecipe = defineSlotRecipe33({
+var pinInputSlotRecipe = defineSlotRecipe36({
   className: "chakra-pin-input",
   slots: pinInputAnatomy.keys(),
   base: {
@@ -6045,9 +6591,9 @@ var pinInputSlotRecipe = defineSlotRecipe33({
 });
 
 // src/theme/recipes/chakra/popover.ts
-import { defineSlotRecipe as defineSlotRecipe34 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe37 } from "@chakra-ui/react";
 import { popoverAnatomy } from "@chakra-ui/react/anatomy";
-var popoverSlotRecipe = defineSlotRecipe34({
+var popoverSlotRecipe = defineSlotRecipe37({
   className: "chakra-popover",
   slots: popoverAnatomy.keys(),
   base: {
@@ -6132,9 +6678,9 @@ var popoverSlotRecipe = defineSlotRecipe34({
 });
 
 // src/theme/recipes/chakra/progress.ts
-import { defineSlotRecipe as defineSlotRecipe35 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe38 } from "@chakra-ui/react";
 import { progressAnatomy } from "@chakra-ui/react/anatomy";
-var progressSlotRecipe = defineSlotRecipe35({
+var progressSlotRecipe = defineSlotRecipe38({
   slots: progressAnatomy.keys(),
   className: "chakra-progress",
   base: {
@@ -6254,9 +6800,9 @@ var progressSlotRecipe = defineSlotRecipe35({
 });
 
 // src/theme/recipes/chakra/progress-circle.ts
-import { defineSlotRecipe as defineSlotRecipe36 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe39 } from "@chakra-ui/react";
 import { progressAnatomy as progressAnatomy2 } from "@chakra-ui/react/anatomy";
-var progressCircleSlotRecipe = defineSlotRecipe36({
+var progressCircleSlotRecipe = defineSlotRecipe39({
   className: "chakra-progress-circle",
   slots: progressAnatomy2.keys(),
   base: {
@@ -6347,10 +6893,10 @@ var progressCircleSlotRecipe = defineSlotRecipe36({
 });
 
 // src/theme/recipes/chakra/radio-card.ts
-import { defineSlotRecipe as defineSlotRecipe37 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe40 } from "@chakra-ui/react";
 import { radioCardAnatomy } from "@chakra-ui/react/anatomy";
 var _a5, _b4, _c3, _d3, _e3, _f3, _g3;
-var radioCardSlotRecipe = defineSlotRecipe37({
+var radioCardSlotRecipe = defineSlotRecipe40({
   className: "chakra-radio-card",
   slots: radioCardAnatomy.keys(),
   base: {
@@ -6558,10 +7104,10 @@ var radioCardSlotRecipe = defineSlotRecipe37({
 });
 
 // src/theme/recipes/chakra/radio-group.ts
-import { defineSlotRecipe as defineSlotRecipe38 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe41 } from "@chakra-ui/react";
 import { radioGroupAnatomy } from "@chakra-ui/react/anatomy";
 var _a6, _b5, _c4, _d4, _e4, _f4, _g4, _h2, _i2, _j2, _k2, _l2, _m2, _n2;
-var radioGroupSlotRecipe = defineSlotRecipe38({
+var radioGroupSlotRecipe = defineSlotRecipe41({
   className: "chakra-radio-group",
   slots: radioGroupAnatomy.keys(),
   base: {
@@ -6621,9 +7167,9 @@ var radioGroupSlotRecipe = defineSlotRecipe38({
 });
 
 // src/theme/recipes/chakra/rating-group.ts
-import { defineSlotRecipe as defineSlotRecipe39 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe42 } from "@chakra-ui/react";
 import { ratingGroupAnatomy } from "@chakra-ui/react/anatomy";
-var ratingGroupSlotRecipe = defineSlotRecipe39({
+var ratingGroupSlotRecipe = defineSlotRecipe42({
   className: "chakra-rating-group",
   slots: ratingGroupAnatomy.keys(),
   base: {
@@ -6642,186 +7188,60 @@ var ratingGroupSlotRecipe = defineSlotRecipe39({
     },
     itemIndicator: {
       display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      width: "1em",
-      height: "1em",
-      position: "relative",
-      _icon: {
-        stroke: "currentColor",
-        width: "100%",
-        height: "100%",
-        display: "inline-block",
-        flexShrink: 0,
-        position: "absolute",
-        left: 0,
-        top: 0
-      },
-      "& [data-bg]": {
-        color: "bg.emphasized"
-      },
-      "& [data-fg]": {
-        color: "transparent"
-      },
-      "&[data-highlighted]:not([data-half])": {
-        "& [data-fg]": {
-          color: "colorPalette.solid"
-        }
-      },
-      "&[data-half]": {
-        "& [data-fg]": {
-          color: "colorPalette.solid",
-          clipPath: "inset(0 50% 0 0)"
-        }
-      }
-    }
-  },
-  variants: {
-    size: {
-      xs: {
-        item: {
-          textStyle: "sm"
-        }
-      },
-      sm: {
-        item: {
-          textStyle: "md"
-        }
-      },
-      md: {
-        item: {
-          textStyle: "xl"
-        }
-      },
-      lg: {
-        item: {
-          textStyle: "2xl"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});
-
-// src/theme/recipes/chakra/segment-group.ts
-import { defineSlotRecipe as defineSlotRecipe40 } from "@chakra-ui/react";
-import { segmentGroupAnatomy } from "@chakra-ui/react/anatomy";
-var segmentGroupSlotRecipe = defineSlotRecipe40({
-  className: "chakra-segment-group",
-  slots: segmentGroupAnatomy.keys(),
-  base: {
-    root: {
-      "--segment-radius": "radii.md",
-      borderRadius: "md",
-      display: "inline-flex",
-      boxShadow: "inset",
-      minW: "max-content",
-      textAlign: "center",
-      position: "relative",
-      isolation: "isolate",
-      bg: "bg.muted",
-      borderWidth: "1px"
-    },
-    item: {
-      display: "flex",
-      alignItems: "center",
-      userSelect: "none",
-      fontSize: "sm",
-      position: "relative",
-      color: "fg.subtle",
-      cursor: "button",
-      borderRadius: "var(--segment-radius)",
-      _disabled: {
-        opacity: "0.5"
-      },
-      _hover: {
-        color: "fg"
-      },
-      "&:has(input:focus-visible)": {
-        focusRing: "inside",
-        focusRingWidth: "1px"
-      },
-      _before: {
-        content: '""',
+      alignItems: "center",
+      justifyContent: "center",
+      width: "1em",
+      height: "1em",
+      position: "relative",
+      _icon: {
+        stroke: "currentColor",
+        width: "100%",
+        height: "100%",
+        display: "inline-block",
+        flexShrink: 0,
         position: "absolute",
-        insetInlineStart: 0,
-        insetBlock: "0",
-        bg: "border",
-        width: "1px",
-        transition: "opacity 0.2s"
+        left: 0,
+        top: 0
       },
-      _checked: {
-        color: "fg"
+      "& [data-bg]": {
+        color: "bg.emphasized"
       },
-      "& + &[data-state=checked], &[data-state=checked] + &, &:first-of-type": {
-        _before: {
-          opacity: "0"
+      "& [data-fg]": {
+        color: "transparent"
+      },
+      "&[data-highlighted]:not([data-half])": {
+        "& [data-fg]": {
+          color: "colorPalette.solid"
         }
       },
-      "&[data-state=checked][data-ssr]": {
-        shadow: "sm",
-        bg: "bg",
-        color: "fg",
-        borderRadius: "var(--segment-radius)"
+      "&[data-half]": {
+        "& [data-fg]": {
+          color: "colorPalette.solid",
+          clipPath: "inset(0 50% 0 0)"
+        }
       }
-    },
-    indicator: {
-      shadow: "sm",
-      pos: "absolute",
-      bg: {
-        base: "bg",
-        _dark: "bg.emphasized"
-      },
-      width: "var(--width)",
-      height: "var(--height)",
-      top: "var(--top)",
-      left: "var(--left)",
-      zIndex: -1,
-      borderRadius: "var(--segment-radius)"
     }
   },
   variants: {
     size: {
       xs: {
-        root: {
-          height: "6"
-        },
         item: {
-          textStyle: "xs",
-          px: "3",
-          gap: "1"
+          textStyle: "sm"
         }
       },
       sm: {
-        root: {
-          height: "7"
-        },
         item: {
-          textStyle: "sm",
-          px: "4",
-          gap: "2"
+          textStyle: "md"
         }
       },
       md: {
-        root: {
-          height: "8"
-        },
         item: {
-          textStyle: "sm",
-          px: "4",
-          gap: "2"
+          textStyle: "xl"
         }
       },
       lg: {
-        root: {
-          height: "10"
-        },
         item: {
-          textStyle: "md",
-          px: "5",
-          gap: "3"
+          textStyle: "2xl"
         }
       }
     }
@@ -6832,9 +7252,9 @@ var segmentGroupSlotRecipe = defineSlotRecipe40({
 });
 
 // src/theme/recipes/chakra/slider.ts
-import { defineSlotRecipe as defineSlotRecipe41 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe43 } from "@chakra-ui/react";
 import { sliderAnatomy } from "@chakra-ui/react/anatomy";
-var sliderSlotRecipe = defineSlotRecipe41({
+var sliderSlotRecipe = defineSlotRecipe43({
   className: "chakra-slider",
   slots: sliderAnatomy.keys(),
   base: {
@@ -7009,9 +7429,9 @@ var sliderSlotRecipe = defineSlotRecipe41({
 });
 
 // src/theme/recipes/chakra/stat.ts
-import { defineSlotRecipe as defineSlotRecipe42 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe44 } from "@chakra-ui/react";
 import { statAnatomy } from "@chakra-ui/react/anatomy";
-var statSlotRecipe = defineSlotRecipe42({
+var statSlotRecipe = defineSlotRecipe44({
   className: "chakra-stat",
   slots: statAnatomy.keys(),
   base: {
@@ -7087,9 +7507,9 @@ var statSlotRecipe = defineSlotRecipe42({
 });
 
 // src/theme/recipes/chakra/steps.ts
-import { defineSlotRecipe as defineSlotRecipe43 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe45 } from "@chakra-ui/react";
 import { stepsAnatomy } from "@chakra-ui/react/anatomy";
-var stepsSlotRecipe = defineSlotRecipe43({
+var stepsSlotRecipe = defineSlotRecipe45({
   className: "chakra-steps",
   slots: stepsAnatomy.keys(),
   base: {
@@ -7302,9 +7722,9 @@ var stepsSlotRecipe = defineSlotRecipe43({
 });
 
 // src/theme/recipes/chakra/switch.ts
-import { defineSlotRecipe as defineSlotRecipe44 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe46 } from "@chakra-ui/react";
 import { switchAnatomy } from "@chakra-ui/react/anatomy";
-var switchSlotRecipe = defineSlotRecipe44({
+var switchSlotRecipe = defineSlotRecipe46({
   slots: switchAnatomy.keys(),
   className: "chakra-switch",
   base: {
@@ -7460,9 +7880,9 @@ var switchSlotRecipe = defineSlotRecipe44({
 });
 
 // src/theme/recipes/chakra/table.ts
-import { defineSlotRecipe as defineSlotRecipe45 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe47 } from "@chakra-ui/react";
 import { tableAnatomy } from "@chakra-ui/react/anatomy";
-var tableSlotRecipe = defineSlotRecipe45({
+var tableSlotRecipe = defineSlotRecipe47({
   className: "chakra-table",
   slots: tableAnatomy.keys(),
   base: {
@@ -7548,355 +7968,84 @@ var tableSlotRecipe = defineSlotRecipe45({
         },
         cell: {
           borderBottomWidth: "1px"
-        },
-        row: {
-          bg: "bg"
-        }
-      },
-      outline: {
-        root: {
-          boxShadow: "0 0 0 1px {colors.border}",
-          overflow: "hidden"
-        },
-        columnHeader: {
-          borderBottomWidth: "1px"
-        },
-        header: {
-          bg: "bg.muted"
-        },
-        row: {
-          "&:not(:last-of-type)": {
-            borderBottomWidth: "1px"
-          }
-        },
-        footer: {
-          borderTopWidth: "1px"
-        }
-      }
-    },
-    size: {
-      sm: {
-        root: {
-          textStyle: "sm"
-        },
-        columnHeader: {
-          px: "2",
-          py: "2"
-        },
-        cell: {
-          px: "2",
-          py: "2"
-        }
-      },
-      md: {
-        root: {
-          textStyle: "sm"
-        },
-        columnHeader: {
-          px: "3",
-          py: "3"
-        },
-        cell: {
-          px: "3",
-          py: "3"
-        }
-      },
-      lg: {
-        root: {
-          textStyle: "md"
-        },
-        columnHeader: {
-          px: "4",
-          py: "3"
-        },
-        cell: {
-          px: "4",
-          py: "3"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "line",
-    size: "md"
-  }
-});
-
-// src/theme/recipes/chakra/tabs.ts
-import { defineSlotRecipe as defineSlotRecipe46 } from "@chakra-ui/react";
-import { tabsAnatomy } from "@chakra-ui/react/anatomy";
-var tabsSlotRecipe = defineSlotRecipe46({
-  slots: tabsAnatomy.keys(),
-  className: "chakra-tabs",
-  base: {
-    root: {
-      "--tabs-trigger-radius": "radii.l2",
-      position: "relative",
-      _horizontal: {
-        display: "block"
-      },
-      _vertical: {
-        display: "flex"
-      }
-    },
-    list: {
-      display: "inline-flex",
-      position: "relative",
-      isolation: "isolate",
-      "--tabs-indicator-shadow": "shadows.xs",
-      "--tabs-indicator-bg": "colors.bg",
-      minH: "var(--tabs-height)",
-      _horizontal: {
-        flexDirection: "row"
-      },
-      _vertical: {
-        flexDirection: "column"
-      }
-    },
-    trigger: {
-      outline: "0",
-      minW: "var(--tabs-height)",
-      height: "var(--tabs-height)",
-      display: "flex",
-      alignItems: "center",
-      fontWeight: "medium",
-      position: "relative",
-      cursor: "button",
-      gap: "2",
-      _focusVisible: {
-        zIndex: 1,
-        focusVisibleRing: "outside"
-      },
-      _disabled: {
-        cursor: "not-allowed",
-        opacity: 0.5
-      }
-    },
-    content: {
-      focusVisibleRing: "inside",
-      _horizontal: {
-        width: "100%",
-        pt: "var(--tabs-content-padding)"
-      },
-      _vertical: {
-        height: "100%",
-        ps: "var(--tabs-content-padding)"
-      }
-    },
-    indicator: {
-      width: "var(--width)",
-      height: "var(--height)",
-      borderRadius: "var(--tabs-indicator-radius)",
-      bg: "var(--tabs-indicator-bg)",
-      shadow: "var(--tabs-indicator-shadow)",
-      zIndex: -1
-    }
-  },
-  variants: {
-    fitted: {
-      true: {
-        list: {
-          display: "flex"
-        },
-        trigger: {
-          flex: 1,
-          textAlign: "center",
-          justifyContent: "center"
-        }
-      }
-    },
-    justify: {
-      start: {
-        list: {
-          justifyContent: "flex-start"
-        }
-      },
-      center: {
-        list: {
-          justifyContent: "center"
+        },
+        row: {
+          bg: "bg"
         }
       },
-      end: {
-        list: {
-          justifyContent: "flex-end"
+      outline: {
+        root: {
+          boxShadow: "0 0 0 1px {colors.border}",
+          overflow: "hidden"
+        },
+        columnHeader: {
+          borderBottomWidth: "1px"
+        },
+        header: {
+          bg: "bg.muted"
+        },
+        row: {
+          "&:not(:last-of-type)": {
+            borderBottomWidth: "1px"
+          }
+        },
+        footer: {
+          borderTopWidth: "1px"
         }
       }
     },
     size: {
       sm: {
         root: {
-          "--tabs-height": "sizes.9",
-          "--tabs-content-padding": "spacing.3"
-        },
-        trigger: {
-          py: "1",
-          px: "3",
           textStyle: "sm"
+        },
+        columnHeader: {
+          px: "2",
+          py: "2"
+        },
+        cell: {
+          px: "2",
+          py: "2"
         }
       },
       md: {
         root: {
-          "--tabs-height": "sizes.10",
-          "--tabs-content-padding": "spacing.4"
-        },
-        trigger: {
-          py: "2",
-          px: "4",
           textStyle: "sm"
+        },
+        columnHeader: {
+          px: "3",
+          py: "3"
+        },
+        cell: {
+          px: "3",
+          py: "3"
         }
       },
       lg: {
         root: {
-          "--tabs-height": "sizes.11",
-          "--tabs-content-padding": "spacing.4.5"
-        },
-        trigger: {
-          py: "2",
-          px: "4.5",
           textStyle: "md"
-        }
-      }
-    },
-    variant: {
-      line: {
-        list: {
-          display: "flex",
-          borderColor: "border",
-          _horizontal: {
-            borderBottomWidth: "1px"
-          },
-          _vertical: {
-            borderEndWidth: "1px"
-          }
-        },
-        trigger: {
-          color: "fg.muted",
-          _disabled: {
-            _active: { bg: "initial" }
-          },
-          _selected: {
-            color: "fg",
-            _horizontal: {
-              layerStyle: "indicator.bottom",
-              "--indicator-offset-y": "-1px",
-              "--indicator-color": "colors.colorPalette.solid"
-            },
-            _vertical: {
-              layerStyle: "indicator.end",
-              "--indicator-offset-x": "-1px"
-            }
-          }
-        }
-      },
-      subtle: {
-        trigger: {
-          borderRadius: "var(--tabs-trigger-radius)",
-          color: "fg.muted",
-          _selected: {
-            bg: "colorPalette.subtle",
-            color: "colorPalette.fg"
-          }
-        }
-      },
-      enclosed: {
-        list: {
-          bg: "bg.muted",
-          padding: "1",
-          borderRadius: "l3",
-          minH: "calc(var(--tabs-height) - 4px)"
         },
-        trigger: {
-          justifyContent: "center",
-          color: "fg.muted",
-          borderRadius: "var(--tabs-trigger-radius)",
-          _selected: {
-            bg: "bg",
-            color: "colorPalette.fg",
-            shadow: "xs"
-          }
-        }
-      },
-      outline: {
-        list: {
-          "--line-thickness": "1px",
-          "--line-offset": "calc(var(--line-thickness) * -1)",
-          borderColor: "border",
-          display: "flex",
-          _horizontal: {
-            _before: {
-              content: '""',
-              position: "absolute",
-              bottom: "0px",
-              width: "100%",
-              borderBottomWidth: "var(--line-thickness)",
-              borderBottomColor: "border"
-            }
-          },
-          _vertical: {
-            _before: {
-              content: '""',
-              position: "absolute",
-              insetInline: "var(--line-offset)",
-              height: "calc(100% - calc(var(--line-thickness) * 2))",
-              borderEndWidth: "var(--line-thickness)",
-              borderEndColor: "border"
-            }
-          }
+        columnHeader: {
+          px: "4",
+          py: "3"
         },
-        trigger: {
-          color: "fg.muted",
-          borderWidth: "1px",
-          borderColor: "transparent",
-          _selected: {
-            bg: "currentBg",
-            color: "colorPalette.fg"
-          },
-          _horizontal: {
-            borderTopRadius: "var(--tabs-trigger-radius)",
-            marginBottom: "var(--line-offset)",
-            marginEnd: { _notLast: "var(--line-offset)" },
-            _selected: {
-              borderColor: "border",
-              borderBottomColor: "transparent"
-            }
-          },
-          _vertical: {
-            borderStartRadius: "var(--tabs-trigger-radius)",
-            marginEnd: "var(--line-offset)",
-            marginBottom: { _notLast: "var(--line-offset)" },
-            _selected: {
-              borderColor: "border",
-              borderEndColor: "transparent"
-            }
-          }
-        }
-      },
-      plain: {
-        trigger: {
-          color: "fg.muted",
-          _selected: {
-            color: "colorPalette.fg"
-          },
-          borderRadius: "var(--tabs-trigger-radius)",
-          "&[data-selected][data-ssr]": {
-            bg: "var(--tabs-indicator-bg)",
-            shadow: "var(--tabs-indicator-shadow)",
-            borderRadius: "var(--tabs-indicator-radius)"
-          }
+        cell: {
+          px: "4",
+          py: "3"
         }
       }
     }
   },
   defaultVariants: {
-    size: "md",
-    variant: "line"
+    variant: "line",
+    size: "md"
   }
 });
 
 // src/theme/recipes/chakra/timeline.ts
-import { defineSlotRecipe as defineSlotRecipe47 } from "@chakra-ui/react";
+import { defineSlotRecipe as defineSlotRecipe48 } from "@chakra-ui/react";
 import { timelineAnatomy } from "@chakra-ui/react/anatomy";
-var timelineSlotRecipe = defineSlotRecipe47({
+var timelineSlotRecipe = defineSlotRecipe48({
   slots: timelineAnatomy.keys(),
   className: "chakra-timeline",
   base: {
@@ -8029,102 +8178,6 @@ var timelineSlotRecipe = defineSlotRecipe47({
   }
 });
 
-// src/theme/recipes/chakra/toast.ts
-import { defineSlotRecipe as defineSlotRecipe48 } from "@chakra-ui/react";
-import { toastAnatomy } from "@chakra-ui/react/anatomy";
-var toastSlotRecipe = defineSlotRecipe48({
-  slots: toastAnatomy.keys(),
-  className: "chakra-toast",
-  base: {
-    root: {
-      width: "full",
-      display: "flex",
-      alignItems: "flex-start",
-      position: "relative",
-      gap: "3",
-      py: "4",
-      ps: "4",
-      pe: "6",
-      borderRadius: "l2",
-      translate: "var(--x) var(--y)",
-      scale: "var(--scale)",
-      zIndex: "var(--z-index)",
-      height: "var(--height)",
-      opacity: "var(--opacity)",
-      willChange: "translate, opacity, scale",
-      transition: "translate 400ms, scale 400ms, opacity 400ms, height 400ms, box-shadow 200ms",
-      transitionTimingFunction: "cubic-bezier(0.21, 1.02, 0.73, 1)",
-      _closed: {
-        transition: "translate 400ms, scale 400ms, opacity 200ms",
-        transitionTimingFunction: "cubic-bezier(0.06, 0.71, 0.55, 1)"
-      },
-      bg: "bg.panel",
-      color: "fg",
-      boxShadow: "xl",
-      "--toast-trigger-bg": "colors.bg.muted",
-      "&[data-type=warning]": {
-        bg: "orange.solid",
-        color: "orange.contrast",
-        "--toast-trigger-bg": "{white/10}",
-        "--toast-border-color": "{white/40}"
-      },
-      "&[data-type=success]": {
-        bg: "green.solid",
-        color: "green.contrast",
-        "--toast-trigger-bg": "{white/10}",
-        "--toast-border-color": "{white/40}"
-      },
-      "&[data-type=error]": {
-        bg: "red.solid",
-        color: "red.contrast",
-        "--toast-trigger-bg": "{white/10}",
-        "--toast-border-color": "{white/40}"
-      }
-    },
-    title: {
-      fontWeight: "medium",
-      textStyle: "sm",
-      marginEnd: "2"
-    },
-    description: {
-      display: "inline",
-      textStyle: "sm",
-      opacity: "0.8"
-    },
-    indicator: {
-      flexShrink: "0",
-      boxSize: "5"
-    },
-    actionTrigger: {
-      textStyle: "sm",
-      fontWeight: "medium",
-      height: "8",
-      px: "3",
-      borderRadius: "l2",
-      alignSelf: "center",
-      borderWidth: "1px",
-      borderColor: "var(--toast-border-color, inherit)",
-      transition: "background 200ms",
-      _hover: {
-        bg: "var(--toast-trigger-bg)"
-      }
-    },
-    closeTrigger: {
-      position: "absolute",
-      top: "1",
-      insetEnd: "1",
-      padding: "1",
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      color: "{currentColor/60}",
-      borderRadius: "l2",
-      textStyle: "md",
-      transition: "background 200ms"
-    }
-  }
-});
-
 // src/theme/recipes/chakra/tooltip.ts
 import { defineSlotRecipe as defineSlotRecipe49 } from "@chakra-ui/react";
 import { tooltipAnatomy } from "@chakra-ui/react/anatomy";
@@ -8864,6 +8917,7 @@ export {
   Checkbox,
   CloseButton,
   Command,
+  DataList,
   namespace_exports as Dialog,
   namespace_exports2 as Drawer,
   EmptyState,
@@ -8893,6 +8947,7 @@ export {
   SuiContext,
   SuiProvider,
   Switch,
+  Tabs,
   Tag,
   Toaster,
   Tooltip,
@@ -8901,10 +8956,13 @@ export {
   defaultPresenceOptions,
   defaultSystem,
   toast,
+  useDataListStyles,
   useLink,
   useLoadingOverlayStyles,
   useSidebar,
   useSidebarItemStyles,
   useSidebarStyles,
-  useSui
+  useSui,
+  useTabsContext,
+  useTabsStyles
 };