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

package/dist/index.cjs

@@ -39,6 +39,7 @@ __export(src_exports, {
   Checkbox: () => Checkbox,
   CloseButton: () => CloseButton,
   Command: () => Command,
+  DataList: () => import_data_list2.DataList,
   Dialog: () => namespace_exports,
   Drawer: () => namespace_exports2,
   EmptyState: () => EmptyState,
@@ -68,20 +69,24 @@ __export(src_exports, {
   SuiContext: () => SuiContext,
   SuiProvider: () => SuiProvider,
   Switch: () => Switch,
+  Tabs: () => import_tabs.Tabs,
   Tag: () => Tag,
   Toaster: () => Toaster,
   Tooltip: () => Tooltip,
-  createSystem: () => import_react169.createSystem,
+  createSystem: () => import_react170.createSystem,
   defaultConfig: () => defaultConfig,
   defaultPresenceOptions: () => defaultPresenceOptions,
   defaultSystem: () => defaultSystem,
   toast: () => toast,
+  useDataListStyles: () => import_data_list2.useDataListStyles,
   useLink: () => useLink,
   useLoadingOverlayStyles: () => useLoadingOverlayStyles,
   useSidebar: () => import_sidebar2.useSidebar,
   useSidebarItemStyles: () => useSidebarItemStyles,
   useSidebarStyles: () => useSidebarStyles,
-  useSui: () => useSui
+  useSui: () => useSui,
+  useTabsContext: () => import_tabs.useTabsContext,
+  useTabsStyles: () => import_tabs.useTabsStyles
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -3296,9 +3301,135 @@ var personaSlotRecipe = (0, import_react35.defineSlotRecipe)({
   }
 });
 
-// src/components/sidebar/sidebar-item.recipe.ts
+// src/components/segmented-control/segment-group.recipe.ts
 var import_react36 = require("@chakra-ui/react");
-var sidebarNavItemSlotRecipe = (0, import_react36.defineSlotRecipe)({
+var import_anatomy4 = require("@chakra-ui/react/anatomy");
+var segmentGroupSlotRecipe = (0, import_react36.defineSlotRecipe)({
+  className: "chakra-segment-group",
+  slots: import_anatomy4.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
+var import_react37 = require("@chakra-ui/react");
+var sidebarNavItemSlotRecipe = (0, import_react37.defineSlotRecipe)({
   className: "sui-sidebar-nav-item",
   slots: ["item", "button", "endElement"],
   base: {
@@ -3383,8 +3514,8 @@ var sidebarNavItemSlotRecipe = (0, import_react36.defineSlotRecipe)({
 });
 
 // src/components/sidebar/sidebar.recipe.ts
-var import_react37 = require("@chakra-ui/react");
-var sidebarSlotRecipe = (0, import_react37.defineSlotRecipe)({
+var import_react38 = require("@chakra-ui/react");
+var sidebarSlotRecipe = (0, import_react38.defineSlotRecipe)({
   className: "sui-sidebar",
   slots: [
     "root",
@@ -3620,11 +3751,11 @@ var sidebarSlotRecipe = (0, import_react37.defineSlotRecipe)({
 });
 
 // src/components/status/status.recipe.ts
-var import_react38 = require("@chakra-ui/react");
-var import_anatomy4 = require("@chakra-ui/react/anatomy");
-var statusSlotRecipe = (0, import_react38.defineSlotRecipe)({
+var import_react39 = require("@chakra-ui/react");
+var import_anatomy5 = require("@chakra-ui/react/anatomy");
+var statusSlotRecipe = (0, import_react39.defineSlotRecipe)({
   className: "chakra-status",
-  slots: import_anatomy4.statusAnatomy.keys(),
+  slots: import_anatomy5.statusAnatomy.keys(),
   base: {
     root: {
       colorPalette: "gray",
@@ -3665,13 +3796,310 @@ var statusSlotRecipe = (0, import_react38.defineSlotRecipe)({
   }
 });
 
+// src/components/tabs/tabs.recipe.ts
+var import_react40 = require("@chakra-ui/react");
+var import_anatomy6 = require("@chakra-ui/react/anatomy");
+var tabsSlotRecipe = (0, import_react40.defineSlotRecipe)({
+  slots: import_anatomy6.tabsAnatomy.keys(),
+  className: "chakra-tabs",
+  base: {
+    root: {
+      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
-var import_react39 = require("@chakra-ui/react");
-var import_anatomy5 = require("@chakra-ui/react/anatomy");
+var import_react41 = require("@chakra-ui/react");
+var import_anatomy7 = require("@chakra-ui/react/anatomy");
 var _a;
 var badgeVariant = (_a = badgeRecipe.variants) == null ? void 0 : _a.variant;
-var tagSlotRecipe = (0, import_react39.defineSlotRecipe)({
-  slots: import_anatomy5.tagAnatomy.keys(),
+var tagSlotRecipe = (0, import_react41.defineSlotRecipe)({
+  slots: import_anatomy7.tagAnatomy.keys(),
   className: "chakra-tag",
   base: {
     root: {
@@ -3804,29 +4232,121 @@ var tagSlotRecipe = (0, import_react39.defineSlotRecipe)({
       subtle: {
         root: badgeVariant == null ? void 0 : badgeVariant.subtle
       },
-      solid: {
-        root: badgeVariant == null ? void 0 : badgeVariant.solid
+      solid: {
+        root: badgeVariant == null ? void 0 : badgeVariant.solid
+      },
+      outline: {
+        root: badgeVariant == null ? void 0 : badgeVariant.outline
+      },
+      surface: {
+        root: badgeVariant == null ? void 0 : badgeVariant.surface
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "surface"
+  }
+});
+
+// src/components/toaster/toast.recipe.ts
+var import_react42 = require("@chakra-ui/react");
+var import_anatomy8 = require("@chakra-ui/react/anatomy");
+var toastSlotRecipe = (0, import_react42.defineSlotRecipe)({
+  slots: import_anatomy8.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"
       },
-      outline: {
-        root: badgeVariant == null ? void 0 : badgeVariant.outline
+      "&[data-type=success]": {
+        "--toast-indicated-color": "colors.fg.success"
       },
-      surface: {
-        root: badgeVariant == null ? void 0 : badgeVariant.surface
+      "&[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"
     }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "surface"
   }
 });
 
 // src/theme/recipes/chakra/accordion.ts
-var import_react40 = require("@chakra-ui/react");
-var import_anatomy6 = require("@chakra-ui/react/anatomy");
-var accordionSlotRecipe = (0, import_react40.defineSlotRecipe)({
+var import_react43 = require("@chakra-ui/react");
+var import_anatomy9 = require("@chakra-ui/react/anatomy");
+var accordionSlotRecipe = (0, import_react43.defineSlotRecipe)({
   className: "chakra-accordion",
-  slots: import_anatomy6.accordionAnatomy.keys(),
+  slots: import_anatomy9.accordionAnatomy.keys(),
   base: {
     root: {
       width: "full",
@@ -3962,11 +4482,11 @@ var accordionSlotRecipe = (0, import_react40.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/action-bar.ts
-var import_react41 = require("@chakra-ui/react");
-var import_anatomy7 = require("@chakra-ui/react/anatomy");
-var actionBarSlotRecipe = (0, import_react41.defineSlotRecipe)({
+var import_react44 = require("@chakra-ui/react");
+var import_anatomy10 = require("@chakra-ui/react/anatomy");
+var actionBarSlotRecipe = (0, import_react44.defineSlotRecipe)({
   className: "chakra-action-bar",
-  slots: import_anatomy7.actionBarAnatomy.keys(),
+  slots: import_anatomy10.actionBarAnatomy.keys(),
   base: {
     positioner: {
       position: "fixed",
@@ -4020,10 +4540,10 @@ var actionBarSlotRecipe = (0, import_react41.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/alert.ts
-var import_react42 = require("@chakra-ui/react");
-var import_anatomy8 = require("@chakra-ui/react/anatomy");
-var alertSlotRecipe = (0, import_react42.defineSlotRecipe)({
-  slots: import_anatomy8.alertAnatomy.keys(),
+var import_react45 = require("@chakra-ui/react");
+var import_anatomy11 = require("@chakra-ui/react/anatomy");
+var alertSlotRecipe = (0, import_react45.defineSlotRecipe)({
+  slots: import_anatomy11.alertAnatomy.keys(),
   className: "chakra-alert",
   base: {
     root: {
@@ -4169,11 +4689,11 @@ var alertSlotRecipe = (0, import_react42.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/blockquote.ts
-var import_react43 = require("@chakra-ui/react");
-var import_anatomy9 = require("@chakra-ui/react/anatomy");
-var blockquoteSlotRecipe = (0, import_react43.defineSlotRecipe)({
+var import_react46 = require("@chakra-ui/react");
+var import_anatomy12 = require("@chakra-ui/react/anatomy");
+var blockquoteSlotRecipe = (0, import_react46.defineSlotRecipe)({
   className: "chakra-blockquote",
-  slots: import_anatomy9.blockquoteAnatomy.keys(),
+  slots: import_anatomy12.blockquoteAnatomy.keys(),
   base: {
     root: {
       position: "relative",
@@ -4248,11 +4768,11 @@ var blockquoteSlotRecipe = (0, import_react43.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/breadcrumb.ts
-var import_react44 = require("@chakra-ui/react");
-var import_anatomy10 = require("@chakra-ui/react/anatomy");
-var breadcrumbSlotRecipe = (0, import_react44.defineSlotRecipe)({
+var import_react47 = require("@chakra-ui/react");
+var import_anatomy13 = require("@chakra-ui/react/anatomy");
+var breadcrumbSlotRecipe = (0, import_react47.defineSlotRecipe)({
   className: "chakra-breadcrumb",
-  slots: import_anatomy10.breadcrumbAnatomy.keys(),
+  slots: import_anatomy13.breadcrumbAnatomy.keys(),
   base: {
     list: {
       display: "flex",
@@ -4340,11 +4860,11 @@ var breadcrumbSlotRecipe = (0, import_react44.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/card.ts
-var import_react45 = require("@chakra-ui/react");
-var import_anatomy11 = require("@chakra-ui/react/anatomy");
-var cardSlotRecipe = (0, import_react45.defineSlotRecipe)({
+var import_react48 = require("@chakra-ui/react");
+var import_anatomy14 = require("@chakra-ui/react/anatomy");
+var cardSlotRecipe = (0, import_react48.defineSlotRecipe)({
   className: "chakra-card",
-  slots: import_anatomy11.cardAnatomy.keys(),
+  slots: import_anatomy14.cardAnatomy.keys(),
   base: {
     root: {
       display: "flex",
@@ -4462,11 +4982,11 @@ var cardSlotRecipe = (0, import_react45.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/checkbox.ts
-var import_react46 = require("@chakra-ui/react");
-var import_anatomy12 = require("@chakra-ui/react/anatomy");
+var import_react49 = require("@chakra-ui/react");
+var import_anatomy15 = require("@chakra-ui/react/anatomy");
 var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
-var checkboxSlotRecipe = (0, import_react46.defineSlotRecipe)({
-  slots: import_anatomy12.checkboxAnatomy.keys(),
+var checkboxSlotRecipe = (0, import_react49.defineSlotRecipe)({
+  slots: import_anatomy15.checkboxAnatomy.keys(),
   className: "chakra-checkbox",
   base: {
     root: {
@@ -4527,11 +5047,11 @@ var checkboxSlotRecipe = (0, import_react46.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/checkbox-card.ts
-var import_react47 = require("@chakra-ui/react");
-var import_anatomy13 = require("@chakra-ui/react/anatomy");
+var import_react50 = require("@chakra-ui/react");
+var import_anatomy16 = require("@chakra-ui/react/anatomy");
 var _a3, _b2, _c2, _d2, _e2, _f2, _g2;
-var checkboxCardSlotRecipe = (0, import_react47.defineSlotRecipe)({
-  slots: import_anatomy13.checkboxCardAnatomy.keys(),
+var checkboxCardSlotRecipe = (0, import_react50.defineSlotRecipe)({
+  slots: import_anatomy16.checkboxCardAnatomy.keys(),
   className: "chakra-checkbox-card",
   base: {
     root: {
@@ -4730,10 +5250,10 @@ var checkboxCardSlotRecipe = (0, import_react47.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/collapsible.ts
-var import_react48 = require("@chakra-ui/react");
-var import_anatomy14 = require("@chakra-ui/react/anatomy");
-var collapsibleSlotRecipe = (0, import_react48.defineSlotRecipe)({
-  slots: import_anatomy14.collapsibleAnatomy.keys(),
+var import_react51 = require("@chakra-ui/react");
+var import_anatomy17 = require("@chakra-ui/react/anatomy");
+var collapsibleSlotRecipe = (0, import_react51.defineSlotRecipe)({
+  slots: import_anatomy17.collapsibleAnatomy.keys(),
   className: "chakra-collapsible",
   base: {
     content: {
@@ -4751,10 +5271,10 @@ var collapsibleSlotRecipe = (0, import_react48.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/data-list.ts
-var import_react49 = require("@chakra-ui/react");
-var import_anatomy15 = require("@chakra-ui/react/anatomy");
-var dataListSlotRecipe = (0, import_react49.defineSlotRecipe)({
-  slots: import_anatomy15.dataListAnatomy.keys(),
+var import_react52 = require("@chakra-ui/react");
+var import_anatomy18 = require("@chakra-ui/react/anatomy");
+var dataListSlotRecipe = (0, import_react52.defineSlotRecipe)({
+  slots: import_anatomy18.dataListAnatomy.keys(),
   className: "chakra-data-list",
   base: {
     itemLabel: {
@@ -4831,17 +5351,17 @@ var dataListSlotRecipe = (0, import_react49.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/editable.ts
-var import_react50 = require("@chakra-ui/react");
-var import_anatomy16 = require("@chakra-ui/react/anatomy");
-var sharedStyles = (0, import_react50.defineStyle)({
+var import_react53 = require("@chakra-ui/react");
+var import_anatomy19 = require("@chakra-ui/react/anatomy");
+var sharedStyles = (0, import_react53.defineStyle)({
   fontSize: "inherit",
   fontWeight: "inherit",
   textAlign: "inherit",
   bg: "transparent",
   borderRadius: "l2"
 });
-var editableSlotRecipe = (0, import_react50.defineSlotRecipe)({
-  slots: import_anatomy16.editableAnatomy.keys(),
+var editableSlotRecipe = (0, import_react53.defineSlotRecipe)({
+  slots: import_anatomy19.editableAnatomy.keys(),
   className: "chakra-editable",
   base: {
     root: {
@@ -4916,10 +5436,10 @@ var editableSlotRecipe = (0, import_react50.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/empty-state.ts
-var import_react51 = require("@chakra-ui/react");
-var import_anatomy17 = require("@chakra-ui/react/anatomy");
-var emptyStateSlotRecipe = (0, import_react51.defineSlotRecipe)({
-  slots: import_anatomy17.emptyStateAnatomy.keys(),
+var import_react54 = require("@chakra-ui/react");
+var import_anatomy20 = require("@chakra-ui/react/anatomy");
+var emptyStateSlotRecipe = (0, import_react54.defineSlotRecipe)({
+  slots: import_anatomy20.emptyStateAnatomy.keys(),
   className: "chakra-empty-state",
   base: {
     root: {
@@ -5008,11 +5528,11 @@ var emptyStateSlotRecipe = (0, import_react51.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/field.ts
-var import_react52 = require("@chakra-ui/react");
-var import_anatomy18 = require("@chakra-ui/react/anatomy");
-var fieldSlotRecipe = (0, import_react52.defineSlotRecipe)({
+var import_react55 = require("@chakra-ui/react");
+var import_anatomy21 = require("@chakra-ui/react/anatomy");
+var fieldSlotRecipe = (0, import_react55.defineSlotRecipe)({
   className: "chakra-field",
-  slots: import_anatomy18.fieldAnatomy.keys(),
+  slots: import_anatomy21.fieldAnatomy.keys(),
   base: {
     requiredIndicator: {
       color: "fg.error",
@@ -5084,11 +5604,11 @@ var fieldSlotRecipe = (0, import_react52.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/file-upload.ts
-var import_react53 = require("@chakra-ui/react");
-var import_anatomy19 = require("@chakra-ui/react/anatomy");
-var fileUploadSlotRecipe = (0, import_react53.defineSlotRecipe)({
+var import_react56 = require("@chakra-ui/react");
+var import_anatomy22 = require("@chakra-ui/react/anatomy");
+var fileUploadSlotRecipe = (0, import_react56.defineSlotRecipe)({
   className: "chakra-file-upload",
-  slots: import_anatomy19.fileUploadAnatomy.keys(),
+  slots: import_anatomy22.fileUploadAnatomy.keys(),
   base: {
     root: {
       display: "flex",
@@ -5180,11 +5700,11 @@ var fileUploadSlotRecipe = (0, import_react53.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/hover-card.ts
-var import_react54 = require("@chakra-ui/react");
-var import_anatomy20 = require("@chakra-ui/react/anatomy");
-var hoverCardSlotRecipe = (0, import_react54.defineSlotRecipe)({
+var import_react57 = require("@chakra-ui/react");
+var import_anatomy23 = require("@chakra-ui/react/anatomy");
+var hoverCardSlotRecipe = (0, import_react57.defineSlotRecipe)({
   className: "chakra-hover-card",
-  slots: import_anatomy20.hoverCardAnatomy.keys(),
+  slots: import_anatomy23.hoverCardAnatomy.keys(),
   base: {
     content: {
       position: "relative",
@@ -5247,11 +5767,11 @@ var hoverCardSlotRecipe = (0, import_react54.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/list.ts
-var import_react55 = require("@chakra-ui/react");
-var import_anatomy21 = require("@chakra-ui/react/anatomy");
-var listSlotRecipe = (0, import_react55.defineSlotRecipe)({
+var import_react58 = require("@chakra-ui/react");
+var import_anatomy24 = require("@chakra-ui/react/anatomy");
+var listSlotRecipe = (0, import_react58.defineSlotRecipe)({
   className: "chakra-list",
-  slots: import_anatomy21.listAnatomy.keys(),
+  slots: import_anatomy24.listAnatomy.keys(),
   base: {
     root: {
       display: "flex",
@@ -5311,11 +5831,11 @@ var listSlotRecipe = (0, import_react55.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/menu.ts
-var import_react56 = require("@chakra-ui/react");
-var import_anatomy22 = require("@chakra-ui/react/anatomy");
-var menuSlotRecipe = (0, import_react56.defineSlotRecipe)({
+var import_react59 = require("@chakra-ui/react");
+var import_anatomy25 = require("@chakra-ui/react/anatomy");
+var menuSlotRecipe = (0, import_react59.defineSlotRecipe)({
   className: "chakra-menu",
-  slots: import_anatomy22.menuAnatomy.keys(),
+  slots: import_anatomy25.menuAnatomy.keys(),
   base: {
     content: {
       outline: 0,
@@ -5434,15 +5954,15 @@ var menuSlotRecipe = (0, import_react56.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/native-select.ts
-var import_react58 = require("@chakra-ui/react");
-var import_anatomy24 = require("@chakra-ui/react/anatomy");
+var import_react61 = require("@chakra-ui/react");
+var import_anatomy27 = require("@chakra-ui/react/anatomy");
 
 // src/theme/recipes/chakra/select.ts
-var import_react57 = require("@chakra-ui/react");
-var import_anatomy23 = require("@chakra-ui/react/anatomy");
-var selectSlotRecipe = (0, import_react57.defineSlotRecipe)({
+var import_react60 = require("@chakra-ui/react");
+var import_anatomy26 = require("@chakra-ui/react/anatomy");
+var selectSlotRecipe = (0, import_react60.defineSlotRecipe)({
   className: "chakra-select",
-  slots: import_anatomy23.selectAnatomy.keys(),
+  slots: import_anatomy26.selectAnatomy.keys(),
   base: {
     root: {
       display: "flex",
@@ -5725,9 +6245,9 @@ var selectSlotRecipe = (0, import_react57.defineSlotRecipe)({
 
 // src/theme/recipes/chakra/native-select.ts
 var _a4, _b3;
-var nativeSelectSlotRecipe = (0, import_react58.defineSlotRecipe)({
+var nativeSelectSlotRecipe = (0, import_react61.defineSlotRecipe)({
   className: "chakra-native-select",
-  slots: import_anatomy24.nativeSelectAnatomy.keys(),
+  slots: import_anatomy27.nativeSelectAnatomy.keys(),
   base: {
     root: {
       height: "fit-content",
@@ -5858,8 +6378,8 @@ var nativeSelectSlotRecipe = (0, import_react58.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/number-input.ts
-var import_react59 = require("@chakra-ui/react");
-var import_anatomy25 = require("@chakra-ui/react/anatomy");
+var import_react62 = require("@chakra-ui/react");
+var import_anatomy28 = require("@chakra-ui/react/anatomy");
 
 // src/theme/utils.ts
 function mapEntries(obj, f) {
@@ -5878,7 +6398,7 @@ function radiusToken(value) {
 }
 
 // src/theme/recipes/chakra/number-input.ts
-var triggerStyle = (0, import_react59.defineStyle)({
+var triggerStyle = (0, import_react62.defineStyle)({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
@@ -5902,9 +6422,9 @@ var triggerStyle = (0, import_react59.defineStyle)({
     bg: "bg.emphasized"
   }
 });
-var numberInputSlotRecipe = (0, import_react59.defineSlotRecipe)({
+var numberInputSlotRecipe = (0, import_react62.defineSlotRecipe)({
   className: "chakra-number-input",
-  slots: import_anatomy25.numberInputAnatomy.keys(),
+  slots: import_anatomy28.numberInputAnatomy.keys(),
   base: {
     root: {
       position: "relative",
@@ -5987,12 +6507,12 @@ var numberInputSlotRecipe = (0, import_react59.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/pin-input.ts
-var import_react60 = require("@chakra-ui/react");
-var import_anatomy26 = require("@chakra-ui/react/anatomy");
+var import_react63 = require("@chakra-ui/react");
+var import_anatomy29 = require("@chakra-ui/react/anatomy");
 var { variants: variants2, defaultVariants: defaultVariants2 } = inputRecipe;
-var pinInputSlotRecipe = (0, import_react60.defineSlotRecipe)({
+var pinInputSlotRecipe = (0, import_react63.defineSlotRecipe)({
   className: "chakra-pin-input",
-  slots: import_anatomy26.pinInputAnatomy.keys(),
+  slots: import_anatomy29.pinInputAnatomy.keys(),
   base: {
     input: {
       ...inputRecipe.base,
@@ -6019,11 +6539,11 @@ var pinInputSlotRecipe = (0, import_react60.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/popover.ts
-var import_react61 = require("@chakra-ui/react");
-var import_anatomy27 = require("@chakra-ui/react/anatomy");
-var popoverSlotRecipe = (0, import_react61.defineSlotRecipe)({
+var import_react64 = require("@chakra-ui/react");
+var import_anatomy30 = require("@chakra-ui/react/anatomy");
+var popoverSlotRecipe = (0, import_react64.defineSlotRecipe)({
   className: "chakra-popover",
-  slots: import_anatomy27.popoverAnatomy.keys(),
+  slots: import_anatomy30.popoverAnatomy.keys(),
   base: {
     content: {
       position: "relative",
@@ -6106,10 +6626,10 @@ var popoverSlotRecipe = (0, import_react61.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/progress.ts
-var import_react62 = require("@chakra-ui/react");
-var import_anatomy28 = require("@chakra-ui/react/anatomy");
-var progressSlotRecipe = (0, import_react62.defineSlotRecipe)({
-  slots: import_anatomy28.progressAnatomy.keys(),
+var import_react65 = require("@chakra-ui/react");
+var import_anatomy31 = require("@chakra-ui/react/anatomy");
+var progressSlotRecipe = (0, import_react65.defineSlotRecipe)({
+  slots: import_anatomy31.progressAnatomy.keys(),
   className: "chakra-progress",
   base: {
     root: {
@@ -6228,11 +6748,11 @@ var progressSlotRecipe = (0, import_react62.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/progress-circle.ts
-var import_react63 = require("@chakra-ui/react");
-var import_anatomy29 = require("@chakra-ui/react/anatomy");
-var progressCircleSlotRecipe = (0, import_react63.defineSlotRecipe)({
+var import_react66 = require("@chakra-ui/react");
+var import_anatomy32 = require("@chakra-ui/react/anatomy");
+var progressCircleSlotRecipe = (0, import_react66.defineSlotRecipe)({
   className: "chakra-progress-circle",
-  slots: import_anatomy29.progressAnatomy.keys(),
+  slots: import_anatomy32.progressAnatomy.keys(),
   base: {
     root: {
       display: "inline-flex",
@@ -6321,12 +6841,12 @@ var progressCircleSlotRecipe = (0, import_react63.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/radio-card.ts
-var import_react64 = require("@chakra-ui/react");
-var import_anatomy30 = require("@chakra-ui/react/anatomy");
+var import_react67 = require("@chakra-ui/react");
+var import_anatomy33 = require("@chakra-ui/react/anatomy");
 var _a5, _b4, _c3, _d3, _e3, _f3, _g3;
-var radioCardSlotRecipe = (0, import_react64.defineSlotRecipe)({
+var radioCardSlotRecipe = (0, import_react67.defineSlotRecipe)({
   className: "chakra-radio-card",
-  slots: import_anatomy30.radioCardAnatomy.keys(),
+  slots: import_anatomy33.radioCardAnatomy.keys(),
   base: {
     root: {
       display: "flex",
@@ -6532,12 +7052,12 @@ var radioCardSlotRecipe = (0, import_react64.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/radio-group.ts
-var import_react65 = require("@chakra-ui/react");
-var import_anatomy31 = require("@chakra-ui/react/anatomy");
+var import_react68 = require("@chakra-ui/react");
+var import_anatomy34 = require("@chakra-ui/react/anatomy");
 var _a6, _b5, _c4, _d4, _e4, _f4, _g4, _h2, _i2, _j2, _k2, _l2, _m2, _n2;
-var radioGroupSlotRecipe = (0, import_react65.defineSlotRecipe)({
+var radioGroupSlotRecipe = (0, import_react68.defineSlotRecipe)({
   className: "chakra-radio-group",
-  slots: import_anatomy31.radioGroupAnatomy.keys(),
+  slots: import_anatomy34.radioGroupAnatomy.keys(),
   base: {
     item: {
       display: "inline-flex",
@@ -6595,11 +7115,11 @@ var radioGroupSlotRecipe = (0, import_react65.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/rating-group.ts
-var import_react66 = require("@chakra-ui/react");
-var import_anatomy32 = require("@chakra-ui/react/anatomy");
-var ratingGroupSlotRecipe = (0, import_react66.defineSlotRecipe)({
+var import_react69 = require("@chakra-ui/react");
+var import_anatomy35 = require("@chakra-ui/react/anatomy");
+var ratingGroupSlotRecipe = (0, import_react69.defineSlotRecipe)({
   className: "chakra-rating-group",
-  slots: import_anatomy32.ratingGroupAnatomy.keys(),
+  slots: import_anatomy35.ratingGroupAnatomy.keys(),
   base: {
     root: {
       display: "inline-flex"
@@ -6618,184 +7138,58 @@ var ratingGroupSlotRecipe = (0, import_react66.defineSlotRecipe)({
       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
-var import_react67 = require("@chakra-ui/react");
-var import_anatomy33 = require("@chakra-ui/react/anatomy");
-var segmentGroupSlotRecipe = (0, import_react67.defineSlotRecipe)({
-  className: "chakra-segment-group",
-  slots: import_anatomy33.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: '""',
+      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"
         }
       }
     }
@@ -6806,11 +7200,11 @@ var segmentGroupSlotRecipe = (0, import_react67.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/slider.ts
-var import_react68 = require("@chakra-ui/react");
-var import_anatomy34 = require("@chakra-ui/react/anatomy");
-var sliderSlotRecipe = (0, import_react68.defineSlotRecipe)({
+var import_react70 = require("@chakra-ui/react");
+var import_anatomy36 = require("@chakra-ui/react/anatomy");
+var sliderSlotRecipe = (0, import_react70.defineSlotRecipe)({
   className: "chakra-slider",
-  slots: import_anatomy34.sliderAnatomy.keys(),
+  slots: import_anatomy36.sliderAnatomy.keys(),
   base: {
     root: {
       display: "flex",
@@ -6983,11 +7377,11 @@ var sliderSlotRecipe = (0, import_react68.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/stat.ts
-var import_react69 = require("@chakra-ui/react");
-var import_anatomy35 = require("@chakra-ui/react/anatomy");
-var statSlotRecipe = (0, import_react69.defineSlotRecipe)({
+var import_react71 = require("@chakra-ui/react");
+var import_anatomy37 = require("@chakra-ui/react/anatomy");
+var statSlotRecipe = (0, import_react71.defineSlotRecipe)({
   className: "chakra-stat",
-  slots: import_anatomy35.statAnatomy.keys(),
+  slots: import_anatomy37.statAnatomy.keys(),
   base: {
     root: {
       display: "flex",
@@ -7061,11 +7455,11 @@ var statSlotRecipe = (0, import_react69.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/steps.ts
-var import_react70 = require("@chakra-ui/react");
-var import_anatomy36 = require("@chakra-ui/react/anatomy");
-var stepsSlotRecipe = (0, import_react70.defineSlotRecipe)({
+var import_react72 = require("@chakra-ui/react");
+var import_anatomy38 = require("@chakra-ui/react/anatomy");
+var stepsSlotRecipe = (0, import_react72.defineSlotRecipe)({
   className: "chakra-steps",
-  slots: import_anatomy36.stepsAnatomy.keys(),
+  slots: import_anatomy38.stepsAnatomy.keys(),
   base: {
     root: {
       display: "flex",
@@ -7276,10 +7670,10 @@ var stepsSlotRecipe = (0, import_react70.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/switch.ts
-var import_react71 = require("@chakra-ui/react");
-var import_anatomy37 = require("@chakra-ui/react/anatomy");
-var switchSlotRecipe = (0, import_react71.defineSlotRecipe)({
-  slots: import_anatomy37.switchAnatomy.keys(),
+var import_react73 = require("@chakra-ui/react");
+var import_anatomy39 = require("@chakra-ui/react/anatomy");
+var switchSlotRecipe = (0, import_react73.defineSlotRecipe)({
+  slots: import_anatomy39.switchAnatomy.keys(),
   className: "chakra-switch",
   base: {
     root: {
@@ -7434,11 +7828,11 @@ var switchSlotRecipe = (0, import_react71.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/table.ts
-var import_react72 = require("@chakra-ui/react");
-var import_anatomy38 = require("@chakra-ui/react/anatomy");
-var tableSlotRecipe = (0, import_react72.defineSlotRecipe)({
+var import_react74 = require("@chakra-ui/react");
+var import_anatomy40 = require("@chakra-ui/react/anatomy");
+var tableSlotRecipe = (0, import_react74.defineSlotRecipe)({
   className: "chakra-table",
-  slots: import_anatomy38.tableAnatomy.keys(),
+  slots: import_anatomy40.tableAnatomy.keys(),
   base: {
     root: {
       fontVariantNumeric: "lining-nums tabular-nums",
@@ -7534,344 +7928,73 @@ var tableSlotRecipe = (0, import_react72.defineSlotRecipe)({
         },
         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
-var import_react73 = require("@chakra-ui/react");
-var import_anatomy39 = require("@chakra-ui/react/anatomy");
-var tabsSlotRecipe = (0, import_react73.defineSlotRecipe)({
-  slots: import_anatomy39.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"
-        }
-      },
-      end: {
-        list: {
-          justifyContent: "flex-end"
+        },
+        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
-var import_react74 = require("@chakra-ui/react");
-var import_anatomy40 = require("@chakra-ui/react/anatomy");
-var timelineSlotRecipe = (0, import_react74.defineSlotRecipe)({
-  slots: import_anatomy40.timelineAnatomy.keys(),
+var import_react75 = require("@chakra-ui/react");
+var import_anatomy41 = require("@chakra-ui/react/anatomy");
+var timelineSlotRecipe = (0, import_react75.defineSlotRecipe)({
+  slots: import_anatomy41.timelineAnatomy.keys(),
   className: "chakra-timeline",
   base: {
     root: {
@@ -8003,102 +8126,6 @@ var timelineSlotRecipe = (0, import_react74.defineSlotRecipe)({
   }
 });
 
-// src/theme/recipes/chakra/toast.ts
-var import_react75 = require("@chakra-ui/react");
-var import_anatomy41 = require("@chakra-ui/react/anatomy");
-var toastSlotRecipe = (0, import_react75.defineSlotRecipe)({
-  slots: import_anatomy41.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
 var import_react76 = require("@chakra-ui/react");
 var import_anatomy42 = require("@chakra-ui/react/anatomy");
@@ -9148,7 +9175,7 @@ defaultConfig.utilities = Object.assign(
 var defaultSystem = (0, import_react97.createSystem)(defaultConfig);
 
 // src/index.ts
-var import_react169 = require("@chakra-ui/react");
+var import_react170 = require("@chakra-ui/react");
 
 // src/provider/sui-provider.tsx
 var React = __toESM(require("react"), 1);
@@ -9461,6 +9488,9 @@ var Key = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react114.Kbd, { ...rest, children });
 };
 
+// src/components/data-list/index.ts
+var import_data_list2 = require("@chakra-ui/react/data-list");
+
 // src/components/dialog/namespace.ts
 var namespace_exports = {};
 __export(namespace_exports, {
@@ -10861,6 +10891,9 @@ var Switch = (0, import_react163.forwardRef)(
   }
 );
 
+// src/components/tabs/index.ts
+var import_tabs = require("@chakra-ui/react/tabs");
+
 // src/components/tag/tag.tsx
 var import_react164 = require("react");
 var import_react165 = require("@chakra-ui/react");
@@ -10885,32 +10918,60 @@ var Tag = (0, import_react164.forwardRef)(
 );
 
 // src/components/toaster/toaster.tsx
-var import_react166 = require("@chakra-ui/react");
+var import_react166 = require("react");
+var import_react167 = require("@chakra-ui/react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var toast = (0, import_react166.createToaster)({
+var defaultOptions = {
   placement: "bottom-end",
   pauseOnPageIdle: true
-});
-var Toaster = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react166.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react166.Toaster, { toaster: toast, insetInline: { mdDown: "4" }, children: (toast2) => {
+};
+var toast = (0, import_react167.createToaster)(defaultOptions);
+var Toaster = (props) => {
+  const { closable: defaultClosable = true, ...options } = props || {};
+  const toaster = (0, import_react166.useMemo)(() => {
+    toast = (0, import_react167.createToaster)({
+      ...defaultOptions,
+      ...options
+    });
+    return toast;
+  }, [options]);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react167.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react167.Toaster, { toaster, insetInline: { mdDown: "4" }, children: (toast2) => {
     var _a8;
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react166.Toast.Root, { width: { md: "sm" }, children: [
-      toast2.type === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react166.Spinner, { size: "sm", color: "colorPalette.solid" }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react166.Toast.Indicator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react166.Stack, { gap: "1", flex: "1", maxWidth: "100%", children: [
-        toast2.title && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react166.Toast.Title, { children: toast2.title }),
-        toast2.description && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react166.Toast.Description, { children: toast2.description })
+    const closable = ((_a8 = toast2.meta) == null ? void 0 : _a8.closable) === false ? false : defaultClosable && toast2.type !== "loading";
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(ToastRoot, { children: [
+      toast2.type === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react167.Spinner, { size: "sm", color: "colorPalette.solid", mt: "0.5" }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react167.Toast.Indicator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react167.Stack, { gap: "1", flex: "1", maxWidth: "100%", children: [
+        toast2.title && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react167.Toast.Title, { children: toast2.title }),
+        toast2.description && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react167.Toast.Description, { children: toast2.description }),
+        toast2.action && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react167.Toast.ActionTrigger, { children: toast2.action.label })
       ] }),
-      toast2.action && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react166.Toast.ActionTrigger, { children: toast2.action.label }),
-      ((_a8 = toast2.meta) == null ? void 0 : _a8.closable) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react166.Toast.CloseTrigger, {})
+      closable !== false && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react167.Toast.CloseTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CloseButton, { size: "xs" }) })
     ] });
   } }) });
 };
+function ToastRoot(props) {
+  const [rect, setRect] = (0, import_react166.useState)();
+  const rectCallbackRef = (0, import_react166.useCallback)((el) => {
+    setRect(el == null ? void 0 : el.getBoundingClientRect());
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_react167.Toast.Root,
+    {
+      ref: rectCallbackRef,
+      width: { md: "sm" },
+      css: {
+        "--toast-height": `${rect == null ? void 0 : rect.height}px`
+      },
+      children: props.children
+    }
+  );
+}
 
 // src/components/tooltip/tooltip.tsx
-var import_react167 = require("react");
-var import_react168 = require("@chakra-ui/react");
+var import_react168 = require("react");
+var import_react169 = require("@chakra-ui/react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var Tooltip = (0, import_react167.forwardRef)(
+var Tooltip = (0, import_react168.forwardRef)(
   function Tooltip2(props, ref) {
     const {
       showArrow,
@@ -10923,10 +10984,10 @@ var Tooltip = (0, import_react167.forwardRef)(
       ...rest
     } = props;
     if (disabled) return children;
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react168.Tooltip.Root, { ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react168.Tooltip.Trigger, { asChild: true, children }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react168.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react168.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react168.Tooltip.Content, { ref, ...contentProps, children: [
-        showArrow && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react168.Tooltip.Arrow, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react168.Tooltip.ArrowTip, {}) }),
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react169.Tooltip.Root, { ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react169.Tooltip.Trigger, { asChild: true, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react169.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react169.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react169.Tooltip.Content, { ref, ...contentProps, children: [
+        showArrow && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react169.Tooltip.Arrow, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react169.Tooltip.ArrowTip, {}) }),
         content
       ] }) }) })
     ] });
@@ -10943,6 +11004,7 @@ var Tooltip = (0, import_react167.forwardRef)(
   Checkbox,
   CloseButton,
   Command,
+  DataList,
   Dialog,
   Drawer,
   EmptyState,
@@ -10972,6 +11034,7 @@ var Tooltip = (0, import_react167.forwardRef)(
   SuiContext,
   SuiProvider,
   Switch,
+  Tabs,
   Tag,
   Toaster,
   Tooltip,
@@ -10980,10 +11043,13 @@ var Tooltip = (0, import_react167.forwardRef)(
   defaultPresenceOptions,
   defaultSystem,
   toast,
+  useDataListStyles,
   useLink,
   useLoadingOverlayStyles,
   useSidebar,
   useSidebarItemStyles,
   useSidebarStyles,
-  useSui
+  useSui,
+  useTabsContext,
+  useTabsStyles
 });