@saas-ui/react 3.0.0-alpha.17 → 3.0.0-alpha.19

package/dist/index.cjs

@@ -43,6 +43,7 @@ __export(src_exports, {
   EmptyState: () => EmptyState,
   GridList: () => grid_list_exports,
   IconBadge: () => IconBadge,
+  IconButton: () => import_react123.IconButton,
   InputGroup: () => InputGroup,
   Link: () => Link,
   LoadingOverlay: () => loading_overlay_exports,
@@ -67,7 +68,7 @@ __export(src_exports, {
   Switch: () => Switch,
   Toaster: () => Toaster,
   Tooltip: () => Tooltip,
-  createSystem: () => import_react163.createSystem,
+  createSystem: () => import_react164.createSystem,
   defaultConfig: () => defaultConfig,
   defaultPresenceOptions: () => defaultPresenceOptions,
   defaultSystem: () => defaultSystem,
@@ -165,7 +166,8 @@ var conditions = (0, import_react2.defineConditions)({
   groupChecked: ".group:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &, [role=group]:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &",
   groupExpanded: ".group:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &, [role=group]:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &",
   groupInvalid: ".group:invalid &, [role=group]:invalid &",
-  parentHover: "button:hover > &, a:hover > &"
+  parentHover: "button:hover &, a:hover &, [role=button]:hover &",
+  pressable: "&:is(a, button, [role=button])"
 });
 
 // src/theme/global-css.ts
@@ -419,7 +421,7 @@ var buttonRecipe = (0, import_react5.defineRecipe)({
       sm: {
         gap: "2",
         h: "7",
-        minW: "8",
+        minW: "7",
         textStyle: "sm",
         borderRadius: "md",
         px: "2.5"
@@ -532,10 +534,10 @@ var buttonRecipe = (0, import_react5.defineRecipe)({
       ghost: {
         color: "colorPalette.fg",
         _hover: {
-          bg: "colorPalette.muted"
+          bg: "colorPalette.subtle"
         },
         _expanded: {
-          bg: "colorPalette.muted"
+          bg: "colorPalette.subtle"
         }
       },
       plain: {
@@ -543,6 +545,14 @@ var buttonRecipe = (0, import_react5.defineRecipe)({
       }
     }
   },
+  compoundVariants: [
+    {
+      variant: "plain",
+      css: {
+        px: 0
+      }
+    }
+  ],
   defaultVariants: {
     size: "md",
     variant: "solid",
@@ -954,7 +964,14 @@ var inputRecipe = (0, import_react14.defineRecipe)({
         bg: "transparent",
         borderWidth: "1px",
         borderColor: "border",
-        focusVisibleRing: "inside"
+        focusVisibleRing: "inside",
+        focusRingWidth: "0",
+        _hover: {
+          borderColor: "border.emphasized",
+          _focusVisible: {
+            borderColor: "var(--focus-ring-color)"
+          }
+        }
       },
       subtle: {
         borderWidth: "1px",
@@ -1157,9 +1174,7 @@ var radiomarkRecipe = (0, import_react19.defineRecipe)({
     borderRadius: "full",
     cursor: "radio",
     _focusVisible: {
-      outline: "2px solid",
-      outlineColor: "colorPalette.focusRing",
-      outlineOffset: "2px"
+      focusVisibleRing: "outside"
     },
     _invalid: {
       colorPalette: "red",
@@ -1435,29 +1450,29 @@ var textareaRecipe = (0, import_react24.defineRecipe)({
         borderRadius: "sm",
         textStyle: "xs",
         px: "2",
-        py: "1.5",
-        scrollPaddingBottom: "1.5"
+        py: "1",
+        scrollPaddingBottom: "1"
       },
       sm: {
         borderRadius: "sm",
         textStyle: "sm",
         px: "2.5",
-        py: "2",
-        scrollPaddingBottom: "2"
+        py: "1.5",
+        scrollPaddingBottom: "1.5"
       },
       md: {
         borderRadius: "md",
         textStyle: "sm",
         px: "3",
-        py: "2",
-        scrollPaddingBottom: "2"
+        py: "1.5",
+        scrollPaddingBottom: "1.5"
       },
       lg: {
         borderRadius: "md",
         textStyle: "md",
         px: "4",
-        py: "3",
-        scrollPaddingBottom: "3"
+        py: "2",
+        scrollPaddingBottom: "2"
       },
       xl: {
         borderRadius: "lg",
@@ -1472,7 +1487,8 @@ var textareaRecipe = (0, import_react24.defineRecipe)({
         bg: "transparent",
         borderWidth: "1px",
         borderColor: "border",
-        focusVisibleRing: "inside"
+        focusVisibleRing: "inside",
+        focusRingWidth: 0
       },
       subtle: {
         borderWidth: "1px",
@@ -1547,7 +1563,7 @@ var semanticColors = import_react25.defineSemanticTokens.colors({
   },
   sidebar: {
     bg: {
-      value: { _light: "{colors.gray.50}", _dark: "{colors.gray.950}" }
+      value: { _light: "{colors.gray.100}", _dark: "{colors.gray.900}" }
     },
     fg: {
       value: { _light: "{colors.gray.900}", _dark: "{colors.gray.200}" }
@@ -1557,7 +1573,7 @@ var semanticColors = import_react25.defineSemanticTokens.colors({
     },
     accent: {
       bg: {
-        value: { _light: "{colors.gray.200/40}", _dark: "{colors.gray.900}" }
+        value: { _light: "{colors.gray.200/80}", _dark: "{colors.gray.900}" }
       },
       fg: {
         value: { _light: "{colors.gray.900}", _dark: "{colors.gray.200}" }
@@ -1654,9 +1670,6 @@ var semanticColors = import_react25.defineSemanticTokens.colors({
       value: { _light: "{colors.blue.500}", _dark: "{colors.blue.400}" }
     }
   },
-  focusRing: {
-    value: { _light: "{colors.blue.600/50}", _dark: "{colors.blue.500/50}" }
-  },
   accent: {
     contrast: {
       value: { _light: "white", _dark: "white" }
@@ -2201,44 +2214,50 @@ var import_react27 = require("@chakra-ui/react");
 var semanticShadows = import_react27.defineSemanticTokens.shadows({
   xs: {
     value: {
-      base: "0px 1px 2px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.100}",
-      _dark: "0px 1px 1px {colors.blackAlpha.800}, 0px 0px 1px inset {colors.whiteAlpha.300}"
+      _light: "0px 1px 2px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/20}",
+      _dark: "0px 1px 1px {black/64}, 0px 0px 1px inset {colors.gray.300/20}"
     }
   },
   sm: {
     value: {
-      base: "0px 4px 4px -1px {colors.blackAlpha.50}, 0px 0px 1px 1px {colors.blackAlpha.100}",
-      _dark: "0px 2px 4px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
+      _light: "0px 2px 4px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+      _dark: "0px 2px 4px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
     }
   },
   md: {
     value: {
-      base: "0px 4px 8px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}",
-      _dark: "0px 4px 8px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
+      _light: "0px 4px 8px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+      _dark: "0px 4px 8px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
     }
   },
   lg: {
     value: {
-      base: "0px 8px 16px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}",
-      _dark: "0px 8px 16px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
+      _light: "0px 8px 16px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+      _dark: "0px 8px 16px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
     }
   },
   xl: {
     value: {
-      base: "0px 16px 24px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}",
-      _dark: "0px 16px 24px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
+      _light: "0px 16px 24px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+      _dark: "0px 16px 24px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
     }
   },
   "2xl": {
     value: {
-      base: "0px 24px 40px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}",
-      _dark: "0px 24px 40px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
+      _light: "0px 24px 40px {colors.gray.900/16}, 0px 0px 1px {colors.gray.900/30}",
+      _dark: "0px 24px 40px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+    }
+  },
+  inner: {
+    value: {
+      _light: "inset 0 2px 4px 0 {black/5}",
+      _dark: "inset 0 2px 4px 0 black"
     }
   },
   inset: {
     value: {
-      base: "inset 0 0 0 1px {colors.blackAlpha.100}",
-      _dark: "inset 0 0 0 1px {colors.whiteAlpha.100}"
+      _light: "inset 0 1px 2px 0 {black/5}",
+      _dark: "inset 0 1px 2px 0 {colors.gray.300/5}"
     }
   }
 });
@@ -2270,7 +2289,7 @@ var appShellSlotRecipe = (0, import_react28.defineSlotRecipe)({
     position: {
       static: {
         root: {
-          height: "100vh"
+          height: "100dvh"
         }
       },
       fullscreen: {
@@ -2281,18 +2300,12 @@ var appShellSlotRecipe = (0, import_react28.defineSlotRecipe)({
       }
     },
     variant: {
-      plain: {},
-      raised: {
-        main: {
-          boxShadow: "xs",
-          zIndex: "layer-1"
-        }
-      }
+      plain: {}
     }
   },
   defaultVariants: {
     position: "static",
-    variant: "raised"
+    variant: "plain"
   }
 });
 
@@ -2303,7 +2316,6 @@ var gridListSlotRecipe = (0, import_react29.defineSlotRecipe)({
   slots: ["root", "item", "header", "cell"],
   base: {
     root: {
-      py: 2,
       position: "relative"
     },
     item: {
@@ -2312,35 +2324,14 @@ var gridListSlotRecipe = (0, import_react29.defineSlotRecipe)({
       alignItems: "center",
       justifyContent: "space-between",
       flex: 1,
-      cursor: "pointer",
       userSelect: "none",
-      transitionProperty: "common",
-      transitionDuration: "normal",
       borderRadius: "inherit",
       outline: "none",
-      _hover: {
-        bg: "blackAlpha.50",
-        _dark: {
-          bg: "whiteAlpha.50"
-        }
-      },
       _focusVisible: {
         boxShadow: "outline"
       },
-      _focus: {
-        bg: "blackAlpha.50",
-        _dark: {
-          bg: "whiteAlpha.50"
-        }
-      },
-      _active: {
-        bg: "blackAlpha.100",
-        _dark: {
-          bg: "whiteAlpha.100"
-        }
-      },
       _disabled: {
-        cursor: "inherit",
+        cursor: "disabled",
         opacity: 0.5,
         _hover: {
           bg: "transparent",
@@ -2362,50 +2353,92 @@ var gridListSlotRecipe = (0, import_react29.defineSlotRecipe)({
       position: "sticky",
       fontSize: "md",
       fontWeight: "semibold",
-      color: "muted"
+      color: "fg.muted"
     },
     cell: {
-      display: "flex",
       flexShrink: 0
     }
   },
   variants: {
+    interactive: {
+      true: {
+        item: {
+          cursor: "button",
+          transitionProperty: "bg",
+          transitionDuration: "fast",
+          _hover: {
+            bg: "bg.subtle"
+          },
+          _active: {
+            bg: "bg.subtle"
+          }
+        }
+      }
+    },
+    variant: {
+      simple: {},
+      rounded: {
+        item: {
+          borderRadius: "md",
+          mb: 0.5
+        }
+      }
+    },
     size: {
       sm: {
         root: {
-          fontSize: "sm"
+          textStyle: "sm",
+          py: 0.5
         },
         item: {
           py: 1,
-          px: 1
+          px: 2,
+          gap: 1
         },
         header: {
           py: 1,
-          px: 1
-        },
-        cell: {
-          px: 1
+          px: 2
         }
       },
       md: {
         root: {
-          fontSize: "md"
+          textStyle: "md",
+          py: 1
         },
         item: {
           py: 2,
-          px: 2
+          px: 3,
+          gap: 2
         },
         header: {
           py: 2,
-          px: 2
-        },
-        cell: {
-          px: 2
+          px: 3
         }
       }
     }
   },
+  compoundVariants: [
+    {
+      variant: "rounded",
+      size: "sm",
+      css: {
+        root: {
+          p: 1
+        }
+      }
+    },
+    {
+      variant: "rounded",
+      size: "md",
+      css: {
+        root: {
+          p: 2
+        }
+      }
+    }
+  ],
   defaultVariants: {
+    variant: "simple",
     size: "md"
   }
 });
@@ -2488,7 +2521,7 @@ var navbarSlotRecipe = (0, import_react31.defineSlotRecipe)({
       top: 0,
       insetX: 0,
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       transitionTimingFunction: "ease-in-out",
       _hidden: {
         transform: "translateY(-100%)"
@@ -2524,7 +2557,7 @@ var navbarSlotRecipe = (0, import_react31.defineSlotRecipe)({
       boxSizing: "border-box",
       borderRadius: "md",
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       lineHeight: 1,
       _focusVisible: {
         outline: "none",
@@ -2588,7 +2621,8 @@ var baseStyleLabel = (0, import_react32.defineStyle)({
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
-  minW: 0
+  minW: 0,
+  color: "fg"
 });
 var personaSlotRecipe = (0, import_react32.defineSlotRecipe)({
   className: "sui-persona",
@@ -2631,11 +2665,11 @@ var personaSlotRecipe = (0, import_react32.defineSlotRecipe)({
     label: baseStyleLabel,
     secondaryLabel: {
       ...baseStyleLabel,
-      color: "fg.muted"
+      color: "fg/60"
     },
     tertiaryLabel: {
       ...baseStyleLabel,
-      color: "fg.muted"
+      color: "fg/60"
     }
   },
   variants: {
@@ -2712,7 +2746,8 @@ var sidebarNavItemSlotRecipe = (0, import_react33.defineSlotRecipe)({
       cursor: "button",
       transitionProperty: "common",
       transitionDuration: "fast",
-      focusVisibleRing: "outside",
+      focusVisibleRing: "inside",
+      focusRingWidth: "1px",
       "& > svg": {
         boxSize: 4,
         color: "var(--sidebar-item-icon-color)"
@@ -2724,7 +2759,12 @@ var sidebarNavItemSlotRecipe = (0, import_react33.defineSlotRecipe)({
     endElement: {
       display: "flex",
       gap: "1px",
-      ms: "auto"
+      ms: "auto",
+      "& button": {
+        _hover: {
+          bg: "transparent"
+        }
+      }
     }
   },
   variants: {
@@ -2868,7 +2908,10 @@ var sidebarSlotRecipe = (0, import_react34.defineSlotRecipe)({
     },
     groupEndElement: {
       "& > button": {
-        boxSize: 6
+        boxSize: 6,
+        _hover: {
+          bg: "transparent"
+        }
       }
     },
     groupContent: {
@@ -2979,11 +3022,6 @@ var sidebarSlotRecipe = (0, import_react34.defineSlotRecipe)({
       },
       compact: {}
     },
-    variant: {
-      muted: {},
-      solid: {},
-      subtle: {}
-    },
     size: {
       md: {
         header: {
@@ -3003,7 +3041,6 @@ var sidebarSlotRecipe = (0, import_react34.defineSlotRecipe)({
   },
   defaultVariants: {
     mode: "collapsible",
-    variant: "muted",
     size: "md"
   }
 });
@@ -3671,7 +3708,7 @@ var cardSlotRecipe = (0, import_react41.defineSlotRecipe)({
       position: "relative",
       minWidth: "0",
       wordWrap: "break-word",
-      borderRadius: "l3",
+      borderRadius: "lg",
       color: "fg",
       textAlign: "start"
     },
@@ -3683,14 +3720,15 @@ var cardSlotRecipe = (0, import_react41.defineSlotRecipe)({
       fontSize: "sm"
     },
     header: {
-      paddingInline: "var(--card-padding)",
-      paddingTop: "var(--card-padding)",
+      padding: "var(--card-padding)",
+      paddingBlock: "calc(var(--card-padding) / 1.5)",
       display: "flex",
       flexDirection: "column",
       gap: "1.5"
     },
     body: {
       padding: "var(--card-padding)",
+      paddingBlock: "calc(var(--card-padding) / 1.5)",
       flex: "1",
       display: "flex",
       flexDirection: "column"
@@ -3699,15 +3737,15 @@ var cardSlotRecipe = (0, import_react41.defineSlotRecipe)({
       display: "flex",
       alignItems: "center",
       gap: "2",
-      paddingInline: "var(--card-padding)",
-      paddingBottom: "var(--card-padding)"
+      padding: "var(--card-padding)",
+      paddingBlock: "calc(var(--card-padding) / 1.5)"
     }
   },
   variants: {
     size: {
       sm: {
         root: {
-          "--card-padding": "spacing.4"
+          "--card-padding": "spacing.2"
         },
         title: {
           textStyle: "md"
@@ -3715,7 +3753,7 @@ var cardSlotRecipe = (0, import_react41.defineSlotRecipe)({
       },
       md: {
         root: {
-          "--card-padding": "spacing.6"
+          "--card-padding": "spacing.3"
         },
         title: {
           textStyle: "lg"
@@ -3723,7 +3761,7 @@ var cardSlotRecipe = (0, import_react41.defineSlotRecipe)({
       },
       lg: {
         root: {
-          "--card-padding": "spacing.7"
+          "--card-padding": "spacing.6"
         },
         title: {
           textStyle: "xl"
@@ -3734,19 +3772,41 @@ var cardSlotRecipe = (0, import_react41.defineSlotRecipe)({
       elevated: {
         root: {
           bg: "bg.panel",
-          boxShadow: "md"
+          boxShadow: "md",
+          borderWidth: "0.5px",
+          borderColor: "border",
+          _pressable: {
+            transitionProperty: "common",
+            transitionDuration: "fast",
+            _hover: {
+              borderColor: "border.emphasized"
+            }
+          }
         }
       },
       outline: {
         root: {
           bg: "bg.panel",
           borderWidth: "1px",
-          borderColor: "border"
+          borderColor: "border",
+          _pressable: {
+            transitionProperty: "common",
+            transitionDuration: "fast",
+            _hover: {
+              borderColor: "border.emphasized"
+            }
+          }
         }
       },
       subtle: {
         root: {
-          bg: "bg.muted"
+          bg: "colorPalette.muted"
+        }
+      },
+      solid: {
+        root: {
+          bg: "colorPalette.solid",
+          color: "colorPalette.contrast"
         }
       }
     }
@@ -4033,14 +4093,14 @@ var collapsibleSlotRecipe = (0, import_react44.defineSlotRecipe)({
   className: "chakra-collapsible",
   base: {
     content: {
-      overflow: "hidden",
       _open: {
         animationName: "expand-height, fade-in",
         animationDuration: "moderate"
       },
       _closed: {
         animationName: "collapse-height, fade-out",
-        animationDuration: "moderate"
+        animationDuration: "moderate",
+        overflow: "hidden"
       }
     }
   }
@@ -4570,7 +4630,7 @@ var editableSlotRecipe = (0, import_react48.defineSlotRecipe)({
       display: "inline-flex",
       alignItems: "center",
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       cursor: "text",
       _hover: {
         bg: "bg.muted"
@@ -4585,7 +4645,7 @@ var editableSlotRecipe = (0, import_react48.defineSlotRecipe)({
       py: "1",
       px: "1",
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       width: "full",
       focusVisibleRing: "inside",
       focusRingWidth: "2px",
@@ -4635,7 +4695,12 @@ var emptyStateSlotRecipe = (0, import_react49.defineSlotRecipe)({
   className: "chakra-empty-state",
   base: {
     root: {
-      width: "full"
+      width: "full",
+      height: "full",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center"
     },
     content: {
       display: "flex",
@@ -4766,12 +4831,21 @@ var fieldSlotRecipe = (0, import_react50.defineSlotRecipe)({
       },
       horizontal: {
         root: {
-          flexDirection: "row",
+          display: "grid",
+          gridTemplateColumns: "var(--field-label-width, 8rem) 1fr",
           alignItems: "center",
-          justifyContent: "space-between"
+          "&:has(textarea)": {
+            alignItems: "flex-start",
+            "& label": {
+              pt: 1.5
+            }
+          }
         },
-        label: {
-          flex: "0 0 var(--field-label-width, 80px)"
+        helperText: {
+          gridColumn: 2
+        },
+        errorText: {
+          gridColumn: 2
         }
       }
     }
@@ -5158,6 +5232,7 @@ var selectSlotRecipe = (0, import_react55.defineSlotRecipe)({
       userSelect: "none",
       textAlign: "start",
       focusVisibleRing: "inside",
+      focusRingWidth: 0,
       _placeholderShown: {
         color: "fg.muted"
       },
@@ -5166,6 +5241,12 @@ var selectSlotRecipe = (0, import_react55.defineSlotRecipe)({
       },
       _invalid: {
         borderColor: "border.error"
+      },
+      _hover: {
+        borderColor: "border.emphasized",
+        _focusVisible: {
+          borderColor: "var(--focus-ring-color)"
+        }
       }
     },
     indicatorGroup: {
@@ -5600,7 +5681,8 @@ var numberInputSlotRecipe = (0, import_react57.defineSlotRecipe)({
     root: {
       position: "relative",
       zIndex: "0",
-      isolation: "isolate"
+      isolation: "isolate",
+      width: "full"
     },
     input: {
       ...inputRecipe.base,
@@ -6377,15 +6459,16 @@ var segmentGroupSlotRecipe = (0, import_react65.defineSlotRecipe)({
   slots: import_anatomy31.segmentGroupAnatomy.keys(),
   base: {
     root: {
-      "--segment-radius": "radii.l2",
-      borderRadius: "l2",
+      "--segment-radius": "radii.md",
+      borderRadius: "md",
       display: "inline-flex",
       boxShadow: "inset",
       minW: "max-content",
       textAlign: "center",
       position: "relative",
       isolation: "isolate",
-      bg: "bg.muted"
+      bg: "bg.muted",
+      borderWidth: "1px"
     },
     item: {
       display: "flex",
@@ -6393,23 +6476,31 @@ var segmentGroupSlotRecipe = (0, import_react65.defineSlotRecipe)({
       userSelect: "none",
       fontSize: "sm",
       position: "relative",
-      color: "fg",
+      color: "fg.subtle",
+      cursor: "button",
       borderRadius: "var(--segment-radius)",
       _disabled: {
         opacity: "0.5"
       },
+      _hover: {
+        color: "fg"
+      },
       "&:has(input:focus-visible)": {
-        focusRing: "outside"
+        focusRing: "inside",
+        focusRingWidth: "1px"
       },
       _before: {
         content: '""',
         position: "absolute",
         insetInlineStart: 0,
-        insetBlock: "1.5",
+        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"
@@ -6418,13 +6509,17 @@ var segmentGroupSlotRecipe = (0, import_react65.defineSlotRecipe)({
       "&[data-state=checked][data-ssr]": {
         shadow: "sm",
         bg: "bg",
+        color: "fg",
         borderRadius: "var(--segment-radius)"
       }
     },
     indicator: {
       shadow: "sm",
       pos: "absolute",
-      bg: { _light: "bg", _dark: "bg.emphasized" },
+      bg: {
+        base: "bg",
+        _dark: "bg.emphasized"
+      },
       width: "var(--width)",
       height: "var(--height)",
       top: "var(--top)",
@@ -6447,7 +6542,7 @@ var segmentGroupSlotRecipe = (0, import_react65.defineSlotRecipe)({
       },
       sm: {
         root: {
-          height: "8"
+          height: "7"
         },
         item: {
           textStyle: "sm",
@@ -6457,7 +6552,7 @@ var segmentGroupSlotRecipe = (0, import_react65.defineSlotRecipe)({
       },
       md: {
         root: {
-          height: "10"
+          height: "8"
         },
         item: {
           textStyle: "sm",
@@ -7056,9 +7151,7 @@ var switchSlotRecipe = (0, import_react70.defineSlotRecipe)({
         cursor: "not-allowed"
       },
       _invalid: {
-        outline: "2px solid",
-        outlineColor: "border.error",
-        outlineOffset: "2px"
+        focusRingColor: "border.error"
       }
     },
     thumb: {
@@ -7363,8 +7456,7 @@ var tabsSlotRecipe = (0, import_react72.defineSlotRecipe)({
       gap: "2",
       _focusVisible: {
         zIndex: 1,
-        outline: "2px solid",
-        outlineColor: "colorPalette.focusRing"
+        focusVisibleRing: "outside"
       },
       _disabled: {
         cursor: "not-allowed",
@@ -8893,12 +8985,67 @@ var zIndices = import_react95.defineTokens.zIndex({
   max: { value: 2147483647 }
 });
 
+// src/theme/utilities.ts
+var createFocusRing = (selector) => {
+  return {
+    values: ["outside", "inside", "mixed", "none"],
+    transform(value, { token }) {
+      var _a8;
+      const focusRingColor = token("colors.colorPalette.focusRing");
+      const styles = {
+        inside: {
+          "--focus-ring-color": focusRingColor,
+          [selector]: {
+            outlineOffset: "0px",
+            outlineWidth: "var(--focus-ring-width, 0)",
+            outlineColor: "var(--focus-ring-color)",
+            outlineStyle: "var(--focus-ring-style, solid)",
+            borderColor: "var(--focus-ring-color)"
+          }
+        },
+        outside: {
+          "--focus-ring-color": focusRingColor,
+          [selector]: {
+            outlineWidth: "var(--focus-ring-width, 1px)",
+            outlineOffset: "var(--focus-ring-offset, 2px)",
+            outlineStyle: "var(--focus-ring-style, solid)",
+            outlineColor: "var(--focus-ring-color)"
+          }
+        },
+        mixed: {
+          "--focus-ring-color": focusRingColor,
+          [selector]: {
+            outlineWidth: "var(--focus-ring-width, 3px)",
+            outlineStyle: "var(--focus-ring-style, solid)",
+            outlineColor: "color-mix(in srgb, var(--focus-ring-color), transparent 60%)",
+            borderColor: "var(--focus-ring-color)"
+          }
+        },
+        none: {
+          "--focus-ring-color": focusRingColor,
+          [selector]: {
+            outline: "none"
+          }
+        }
+      };
+      return (_a8 = styles[value]) != null ? _a8 : {};
+    }
+  };
+};
+var utilities = {
+  focusRing: createFocusRing("&:is(:focus, [data-focus])"),
+  focusVisibleRing: createFocusRing(
+    "&:is(:focus-visible, [data-focus-visible])"
+  )
+};
+
 // src/theme/index.ts
 var defaultThemeConfig = (0, import_react96.defineConfig)({
   preflight: true,
   cssVarsPrefix: "chakra",
   cssVarsRoot: ":where(html, .chakra-theme)",
   globalCss,
+  utilities,
   theme: {
     breakpoints,
     keyframes,
@@ -8937,10 +9084,15 @@ var defaultThemeConfig = (0, import_react96.defineConfig)({
 
 // src/preset.ts
 var defaultConfig = (0, import_react97.mergeConfigs)(import_react97.defaultBaseConfig, defaultThemeConfig);
+var _a7;
+defaultConfig.utilities = Object.assign(
+  (_a7 = defaultConfig.utilities) != null ? _a7 : {},
+  utilities
+);
 var defaultSystem = (0, import_react97.createSystem)(defaultConfig);
 
 // src/index.ts
-var import_react163 = require("@chakra-ui/react");
+var import_react164 = require("@chakra-ui/react");
 
 // src/provider/sui-provider.tsx
 var React = __toESM(require("react"), 1);
@@ -9237,8 +9389,8 @@ var EllipsisIcon = createIcon({
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var CloseButton = (0, import_react111.forwardRef)(
   function CloseButton2(props, ref) {
-    var _a7;
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react112.IconButton, { variant: "ghost", "aria-label": "Close", ref, ...props, children: (_a7 = props.children) != null ? _a7 : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon, {}) });
+    var _a8;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react112.IconButton, { variant: "ghost", "aria-label": "Close", ref, ...props, children: (_a8 = props.children) != null ? _a8 : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon, {}) });
   }
 );
 
@@ -9466,11 +9618,14 @@ var IconBadge = React2.forwardRef(
   }
 );
 
+// src/components/icon-button/index.ts
+var import_react123 = require("@chakra-ui/react");
+
 // src/components/input-group/input-group.tsx
-var import_react123 = require("react");
-var import_react124 = require("@chakra-ui/react");
+var import_react124 = require("react");
+var import_react125 = require("@chakra-ui/react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var InputGroup = (0, import_react123.forwardRef)(
+var InputGroup = (0, import_react124.forwardRef)(
   function InputGroup2(props, ref) {
     const {
       startElement,
@@ -9480,26 +9635,26 @@ var InputGroup = (0, import_react123.forwardRef)(
       children,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react124.Group, { ref, display: "flex", ...rest, children: [
-      startElement && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react124.InputElement, { pointerEvents: "none", ...startElementProps, children: startElement }),
-      (0, import_react123.isValidElement)(children) && (0, import_react123.cloneElement)(children, {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react125.Group, { ref, display: "flex", ...rest, children: [
+      startElement && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react125.InputElement, { pointerEvents: "none", ...startElementProps, children: startElement }),
+      (0, import_react124.isValidElement)(children) && (0, import_react124.cloneElement)(children, {
         ...startElement && { ps: "calc(var(--input-height) - 6px)" },
         ...endElement && { pe: "calc(var(--input-height) - 6px)" },
         ...children.props
       }),
-      endElement && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react124.InputElement, { placement: "end", ...endElementProps, children: endElement })
+      endElement && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react125.InputElement, { placement: "end", ...endElementProps, children: endElement })
     ] });
   }
 );
 
 // src/components/link/link.tsx
-var import_react125 = __toESM(require("react"), 1);
-var import_react126 = require("@chakra-ui/react");
+var import_react126 = __toESM(require("react"), 1);
+var import_react127 = require("@chakra-ui/react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var Link = import_react125.default.forwardRef(
+var Link = import_react126.default.forwardRef(
   (props, ref) => {
     const LinkComponent = useLink();
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react126.Link, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(LinkComponent, { ref, ...props }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react127.Link, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(LinkComponent, { ref, ...props }) });
   }
 );
 Link.displayName = "Link";
@@ -9512,29 +9667,29 @@ __export(loading_overlay_exports, {
   Text: () => LoadingOverlayText
 });
 var import_presence = require("@ark-ui/react/presence");
-var import_react130 = require("@chakra-ui/react");
+var import_react131 = require("@chakra-ui/react");
 
 // src/components/spinner/spinner.tsx
-var import_react127 = require("react");
-var import_react128 = require("@chakra-ui/react");
+var import_react128 = require("react");
+var import_react129 = require("@chakra-ui/react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var Spinner2 = (0, import_react127.forwardRef)(
+var Spinner2 = (0, import_react128.forwardRef)(
   function Spinner3(props, ref) {
     const { loading, children, ...rest } = props;
     if (loading === false) {
       return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react128.Spinner, { ref, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react129.Spinner, { ref, ...rest });
   }
 );
 
 // src/components/loading-overlay/loading-overlay.context.ts
-var import_react129 = require("@chakra-ui/react");
+var import_react130 = require("@chakra-ui/react");
 var {
   useStyles: useLoadingOverlayStyles,
   withContext: withContext4,
   withProvider: withProvider3
-} = (0, import_react129.createSlotRecipeContext)({
+} = (0, import_react130.createSlotRecipeContext)({
   key: "suiLoadingOverlay"
 });
 
@@ -9543,7 +9698,7 @@ var import_jsx_runtime17 = require("react/jsx-runtime");
 var LoadingOverlay = (props) => {
   const { children, loading = true, ...rest } = props;
   const [presenceProps, rootProps] = (0, import_presence.splitPresenceProps)(rest);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_presence.Presence, { present: loading, ...presenceProps, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react130.chakra.div, { ...rootProps, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_presence.Presence, { present: loading, ...presenceProps, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react131.chakra.div, { ...rootProps, children }) });
 };
 var LoadingOverlayRoot = withProvider3(
   LoadingOverlay,
@@ -9565,16 +9720,16 @@ __export(navbar_exports, {
   Link: () => NavbarLink,
   Root: () => NavbarRoot
 });
-var import_react132 = require("react");
+var import_react133 = require("react");
 var import_navbar = require("@saas-ui/core/navbar");
 
 // src/components/navbar/navbar.context.ts
-var import_react131 = require("@chakra-ui/react");
+var import_react132 = require("@chakra-ui/react");
 var {
   withProvider: withProvider4,
   withContext: withContext5,
   useStyles: useNavbarStyles
-} = (0, import_react131.createSlotRecipeContext)({
+} = (0, import_react132.createSlotRecipeContext)({
   key: "suiNavbar"
 });
 
@@ -9597,7 +9752,7 @@ var NavbarItem = withContext5(
   "item"
 );
 var NavbarLink = withContext5(
-  (0, import_react132.forwardRef)((props, ref) => {
+  (0, import_react133.forwardRef)((props, ref) => {
     const Link2 = useLink();
     const { active, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_navbar.Navbar.Link, { asChild: true, ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Link2, { "data-active": active ? "" : void 0, ...props }) });
@@ -9609,10 +9764,10 @@ var NavbarLink = withContext5(
 );
 
 // src/components/number-input/number-input.tsx
-var import_react133 = require("react");
-var import_react134 = require("@chakra-ui/react");
+var import_react134 = require("react");
+var import_react135 = require("@chakra-ui/react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var NumberInput = (0, import_react133.forwardRef)(
+var NumberInput = (0, import_react134.forwardRef)(
   function NumberInput2(props, ref) {
     const {
       hideControls,
@@ -9622,11 +9777,19 @@ var NumberInput = (0, import_react133.forwardRef)(
       rootRef,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react134.NumberInput.Root, { ref: rootRef, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(InputGroup, { startElement, endElement, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react134.NumberInput.Input, { ref, ...inputProps }) }),
-      !hideControls && !endElement ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react134.NumberInput.Control, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react134.NumberInput.IncrementTrigger, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react134.NumberInput.DecrementTrigger, {})
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react135.NumberInput.Root, { ref: rootRef, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        InputGroup,
+        {
+          startElement,
+          endElement,
+          width: "full",
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react135.NumberInput.Input, { ref, ...inputProps })
+        }
+      ),
+      !hideControls && !endElement ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react135.NumberInput.Control, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react135.NumberInput.IncrementTrigger, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react135.NumberInput.DecrementTrigger, {})
       ] }) : null
     ] });
   }
@@ -9652,72 +9815,73 @@ __export(menu_exports, {
   Trigger: () => MenuTrigger,
   TriggerItem: () => MenuTriggerItem
 });
-var import_react135 = require("react");
-var import_react136 = require("@chakra-ui/react");
+var import_react136 = require("react");
+var import_react137 = require("@chakra-ui/react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var MenuContent = (0, import_react135.forwardRef)(
+var MenuContent = (0, import_react136.forwardRef)(
   function MenuContent2(props, ref) {
     const { portalled = true, portalRef, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.Menu.Content, { ref, ...rest }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.Menu.Content, { ref, ...rest }) }) });
   }
 );
-var MenuArrow = (0, import_react135.forwardRef)(
+var MenuArrow = (0, import_react136.forwardRef)(
   function MenuArrow2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.Menu.Arrow, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.Menu.ArrowTip, {}) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.Menu.Arrow, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.Menu.ArrowTip, {}) });
   }
 );
-var MenuCheckboxItem = (0, import_react135.forwardRef)(function MenuCheckboxItem2(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react136.Menu.CheckboxItem, { ref, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.Menu.ItemIndicator, { hidden: false, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CheckIcon, {}) }),
+var MenuCheckboxItem = (0, import_react136.forwardRef)(function MenuCheckboxItem2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react137.Menu.CheckboxItem, { ref, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.Menu.ItemIndicator, { hidden: false, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CheckIcon, {}) }),
     props.children
   ] });
 });
-var MenuRadioItem = (0, import_react135.forwardRef)(
+var MenuRadioItem = (0, import_react136.forwardRef)(
   function MenuRadioItem2(props, ref) {
     const { children, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react136.Menu.RadioItem, { ps: "8", ref, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.AbsoluteCenter, { axis: "horizontal", left: "4", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.Menu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CheckIcon, {}) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.Menu.ItemText, { children })
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react137.Menu.RadioItem, { ps: "8", ref, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.AbsoluteCenter, { axis: "horizontal", left: "4", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.Menu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CheckIcon, {}) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.Menu.ItemText, { children })
     ] });
   }
 );
-var MenuItemGroup = (0, import_react135.forwardRef)(
+var MenuItemGroup = (0, import_react136.forwardRef)(
   function MenuItemGroup2(props, ref) {
     const { title, children, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react136.Menu.ItemGroup, { ref, ...rest, children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.Menu.ItemGroupLabel, { userSelect: "none", children: title }),
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react137.Menu.ItemGroup, { ref, ...rest, children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.Menu.ItemGroupLabel, { userSelect: "none", children: title }),
       children
     ] });
   }
 );
-var MenuTriggerItem = (0, import_react135.forwardRef)(
+var MenuTriggerItem = (0, import_react136.forwardRef)(
   function MenuTriggerItem2(props, ref) {
     const { startIcon, children, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react136.Menu.TriggerItem, { ref, ...rest, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react137.Menu.TriggerItem, { ref, ...rest, children: [
       startIcon,
       children,
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRightIcon, {})
     ] });
   }
 );
-var MenuButton = (0, import_react135.forwardRef)(
+var MenuButton = (0, import_react136.forwardRef)(
   function MenuButton2(props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MenuTrigger, { ref, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { ...props }) });
   }
 );
-var MenuRadioItemGroup = import_react136.Menu.RadioItemGroup;
-var MenuContextTrigger = import_react136.Menu.ContextTrigger;
-var MenuRoot = import_react136.Menu.Root;
-var MenuSeparator = import_react136.Menu.Separator;
-var MenuContext = import_react136.Menu.Context;
-var MenuItem = import_react136.Menu.Item;
-var MenuItemText = import_react136.Menu.ItemText;
-var MenuItemCommand = import_react136.Menu.ItemCommand;
-var MenuTrigger = import_react136.Menu.Trigger;
+var MenuRadioItemGroup = import_react137.Menu.RadioItemGroup;
+var MenuContextTrigger = import_react137.Menu.ContextTrigger;
+var MenuRoot = import_react137.Menu.Root;
+var MenuSeparator = import_react137.Menu.Separator;
+var MenuContext = import_react137.Menu.Context;
+var MenuItem = import_react137.Menu.Item;
+var MenuItemText = import_react137.Menu.ItemText;
+var MenuItemCommand = import_react137.Menu.ItemCommand;
+var MenuTrigger = import_react137.Menu.Trigger;
 
 // src/components/pagination/pagination.tsx
 var pagination_exports = {};
 __export(pagination_exports, {
+  Context: () => Context,
   Ellipsis: () => Ellipsis,
   Item: () => Item,
   Items: () => Items,
@@ -9728,10 +9892,10 @@ __export(pagination_exports, {
   PrevTrigger: () => PrevTrigger,
   Root: () => Root
 });
-var import_react137 = require("react");
-var import_react138 = require("@chakra-ui/react");
+var import_react138 = require("react");
+var import_react139 = require("@chakra-ui/react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var [RootPropsProvider, useRootProps] = (0, import_react138.createContext)({
+var [RootPropsProvider, useRootProps] = (0, import_react139.createContext)({
   name: "RootPropsProvider"
 });
 var variantMap = {
@@ -9739,66 +9903,66 @@ var variantMap = {
   solid: { default: "outline", ellipsis: "outline", current: "solid" },
   subtle: { default: "ghost", ellipsis: "plain", current: "subtle" }
 };
-var Root = (0, import_react137.forwardRef)(
+var Root = (0, import_react138.forwardRef)(
   function PaginationRoot(props, ref) {
     const { size = "sm", variant = "outline", ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RootPropsProvider, { value: { size, variantMap: variantMap[variant] }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Pagination.Root, { ref, type: "button", ...rest }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RootPropsProvider, { value: { size, variantMap: variantMap[variant] }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.Pagination.Root, { ref, type: "button", ...rest }) });
   }
 );
-var Ellipsis = (0, import_react137.forwardRef)(function PaginationEllipsis(props, ref) {
-  var _a7;
+var Ellipsis = (0, import_react138.forwardRef)(function PaginationEllipsis(props, ref) {
+  var _a8;
   const { size, variantMap: variantMap2 } = useRootProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Pagination.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Button, { as: "span", variant: variantMap2.ellipsis, size, children: (_a7 = props.children) != null ? _a7 : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(EllipsisIcon, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.Pagination.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.Button, { as: "span", variant: variantMap2.ellipsis, size, children: (_a8 = props.children) != null ? _a8 : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(EllipsisIcon, {}) }) });
 });
-var Item = (0, import_react137.forwardRef)(
+var Item = (0, import_react138.forwardRef)(
   function PaginationItem(props, ref) {
-    const { page } = (0, import_react138.usePaginationContext)();
+    const { page } = (0, import_react139.usePaginationContext)();
     const { size, variantMap: variantMap2 } = useRootProps();
     const current = page === props.value;
     const variant = current ? variantMap2.current : variantMap2.default;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Pagination.Item, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Button, { variant, size, children: props.value }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.Pagination.Item, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.Button, { variant, size, children: props.value }) });
   }
 );
-var PrevButton = (0, import_react137.forwardRef)(function PaginationPrevTrigger(props, ref) {
-  var _a7;
+var PrevButton = (0, import_react138.forwardRef)(function PaginationPrevTrigger(props, ref) {
+  var _a8;
   const { size, variantMap: variantMap2 } = useRootProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Pagination.PrevTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.IconButton, { variant: variantMap2.default, size, children: (_a7 = props.children) != null ? _a7 : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronLeftIcon, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.Pagination.PrevTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.IconButton, { variant: variantMap2.default, size, children: (_a8 = props.children) != null ? _a8 : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronLeftIcon, {}) }) });
 });
-var NextButton = (0, import_react137.forwardRef)(function PaginationNextTrigger(props, ref) {
-  var _a7;
+var NextButton = (0, import_react138.forwardRef)(function PaginationNextTrigger(props, ref) {
+  var _a8;
   const { size, variantMap: variantMap2 } = useRootProps();
-  const { nextPage } = (0, import_react138.usePaginationContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Pagination.NextTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.IconButton, { variant: variantMap2.default, size, children: (_a7 = props.children) != null ? _a7 : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronRightIcon, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.Pagination.NextTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.IconButton, { variant: variantMap2.default, size, children: (_a8 = props.children) != null ? _a8 : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronRightIcon, {}) }) });
 });
 var Items = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Pagination.Context, { children: ({ pages }) => pages.map((page, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.Pagination.Context, { children: ({ pages }) => pages.map((page, index) => {
     return page.type === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Ellipsis, { index, ...props }, index) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Item, { type: "page", value: page.value, ...props }, index);
   }) });
 };
-var PageText = (0, import_react137.forwardRef)(
+var PageText = (0, import_react138.forwardRef)(
   function PaginationPageText(props, ref) {
     const { format = "compact", ...rest } = props;
-    const { page, pages, pageRange, count } = (0, import_react138.usePaginationContext)();
-    const content = (0, import_react137.useMemo)(() => {
+    const { page, pages, pageRange, count } = (0, import_react139.usePaginationContext)();
+    const content = (0, import_react138.useMemo)(() => {
       if (format === "short") return `${page} / ${pages.length}`;
       if (format === "compact") return `${page} of ${pages.length}`;
       return `${pageRange.start + 1} - ${pageRange.end} of ${count}`;
     }, [format, page, pages.length, pageRange, count]);
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Text, { fontWeight: "medium", ref, ...rest, children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.Text, { fontWeight: "medium", ref, ...rest, children: content });
   }
 );
-var PrevTrigger = import_react138.Pagination.PrevTrigger;
-var NextTrigger = import_react138.Pagination.NextTrigger;
+var PrevTrigger = import_react139.Pagination.PrevTrigger;
+var NextTrigger = import_react139.Pagination.NextTrigger;
+var Context = import_react139.Pagination.Context;
 
 // src/components/password-input/password-input.tsx
-var import_react141 = require("react");
-var import_react142 = require("@chakra-ui/react");
+var import_react142 = require("react");
+var import_react143 = require("@chakra-ui/react");
 
 // ../../node_modules/react-icons/lib/iconBase.mjs
-var import_react140 = __toESM(require("react"), 1);
+var import_react141 = __toESM(require("react"), 1);
 
 // ../../node_modules/react-icons/lib/iconContext.mjs
-var import_react139 = __toESM(require("react"), 1);
+var import_react140 = __toESM(require("react"), 1);
 var DefaultContext = {
   color: void 0,
   size: void 0,
@@ -9806,7 +9970,7 @@ var DefaultContext = {
   style: void 0,
   attr: void 0
 };
-var IconContext = import_react139.default.createContext && /* @__PURE__ */ import_react139.default.createContext(DefaultContext);
+var IconContext = import_react140.default.createContext && /* @__PURE__ */ import_react140.default.createContext(DefaultContext);
 
 // ../../node_modules/react-icons/lib/iconBase.mjs
 var _excluded = ["attr", "size", "title"];
@@ -9895,12 +10059,12 @@ function _toPrimitive(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 function Tree2Element(tree) {
-  return tree && tree.map((node, i) => /* @__PURE__ */ import_react140.default.createElement(node.tag, _objectSpread({
+  return tree && tree.map((node, i) => /* @__PURE__ */ import_react141.default.createElement(node.tag, _objectSpread({
     key: i
   }, node.attr), Tree2Element(node.child)));
 }
 function GenIcon(data) {
-  return (props) => /* @__PURE__ */ import_react140.default.createElement(IconBase, _extends({
+  return (props) => /* @__PURE__ */ import_react141.default.createElement(IconBase, _extends({
     attr: _objectSpread({}, data.attr)
   }, props), Tree2Element(data.child));
 }
@@ -9915,7 +10079,7 @@ function IconBase(props) {
     var className;
     if (conf.className) className = conf.className;
     if (props.className) className = (className ? className + " " : "") + props.className;
-    return /* @__PURE__ */ import_react140.default.createElement("svg", _extends({
+    return /* @__PURE__ */ import_react141.default.createElement("svg", _extends({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
@@ -9927,9 +10091,9 @@ function IconBase(props) {
       height: computedSize,
       width: computedSize,
       xmlns: "http://www.w3.org/2000/svg"
-    }), title && /* @__PURE__ */ import_react140.default.createElement("title", null, title), props.children);
+    }), title && /* @__PURE__ */ import_react141.default.createElement("title", null, title), props.children);
   };
-  return IconContext !== void 0 ? /* @__PURE__ */ import_react140.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
+  return IconContext !== void 0 ? /* @__PURE__ */ import_react141.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
 }
 
 // ../../node_modules/react-icons/lu/index.mjs
@@ -9942,7 +10106,7 @@ function LuEye(props) {
 
 // src/components/password-input/password-input.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var PasswordInput = (0, import_react141.forwardRef)(
+var PasswordInput = (0, import_react142.forwardRef)(
   function PasswordInput2(props, ref) {
     const {
       rootProps,
@@ -9952,12 +10116,12 @@ var PasswordInput = (0, import_react141.forwardRef)(
       visibilityIcon = { on: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LuEye, {}), off: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LuEyeOff, {}) },
       ...rest
     } = props;
-    const [visible, setVisible] = (0, import_react142.useControllableState)({
+    const [visible, setVisible] = (0, import_react143.useControllableState)({
       value: visibleProp,
       defaultValue: defaultVisible || false,
       onChange: onVisibleChange
     });
-    const inputRef = (0, import_react141.useRef)(null);
+    const inputRef = (0, import_react142.useRef)(null);
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       InputGroup,
       {
@@ -9977,10 +10141,10 @@ var PasswordInput = (0, import_react141.forwardRef)(
         ),
         ...rootProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_react142.Input,
+          import_react143.Input,
           {
             ...rest,
-            ref: (0, import_react142.mergeRefs)(ref, inputRef),
+            ref: (0, import_react143.mergeRefs)(ref, inputRef),
             type: visible ? "text" : "password"
           }
         )
@@ -9988,10 +10152,10 @@ var PasswordInput = (0, import_react141.forwardRef)(
     );
   }
 );
-var VisibilityTrigger = (0, import_react141.forwardRef)(
+var VisibilityTrigger = (0, import_react142.forwardRef)(
   function VisibilityTrigger2(props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      import_react142.IconButton,
+      import_react143.IconButton,
       {
         tabIndex: -1,
         ref,
@@ -10012,27 +10176,27 @@ var VisibilityTrigger = (0, import_react141.forwardRef)(
 var React7 = __toESM(require("react"), 1);
 
 // src/components/persona/persona-primitive.tsx
-var import_react144 = require("react");
-var import_react145 = require("@chakra-ui/react");
+var import_react145 = require("react");
+var import_react146 = require("@chakra-ui/react");
 var import_utils8 = require("@saas-ui/core/utils");
 
 // src/components/persona/persona.context.ts
-var import_react143 = require("@chakra-ui/react");
+var import_react144 = require("@chakra-ui/react");
 var {
   useStyles: usePersonaStyles,
   withProvider: withProvider5,
   withContext: withContext6
-} = (0, import_react143.createSlotRecipeContext)({
+} = (0, import_react144.createSlotRecipeContext)({
   key: "suiPersona"
 });
 
 // src/components/persona/persona-primitive.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var PersonaRoot = withProvider5(
-  (0, import_react144.forwardRef)((props, ref) => {
+  (0, import_react145.forwardRef)((props, ref) => {
     const { outOfOffice, presence, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-      import_react145.chakra.div,
+      import_react146.chakra.div,
       {
         ref,
         ...rest,
@@ -10049,7 +10213,7 @@ var PersonaRoot = withProvider5(
   }),
   "root"
 );
-var PersonaAvatar = (0, import_react144.forwardRef)(
+var PersonaAvatar = (0, import_react145.forwardRef)(
   (props, ref) => {
     const {
       name,
@@ -10062,10 +10226,10 @@ var PersonaAvatar = (0, import_react144.forwardRef)(
       children,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react145.Avatar.Root, { ref, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react145.Avatar.Fallback, { children: getInitials2(name) }),
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react146.Avatar.Root, { ref, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react146.Avatar.Fallback, { children: getInitials2(name) }),
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        import_react145.Avatar.Image,
+        import_react146.Avatar.Image,
         {
           src,
           srcSet,
@@ -10184,10 +10348,10 @@ var defaultPresenceOptions = {
 };
 
 // src/components/pin-input/pin-input.tsx
-var import_react146 = require("react");
-var import_react147 = require("@chakra-ui/react");
+var import_react147 = require("react");
+var import_react148 = require("@chakra-ui/react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var PinInput = (0, import_react146.forwardRef)(
+var PinInput = (0, import_react147.forwardRef)(
   function PinInput2(props, ref) {
     const {
       pinLength = 4,
@@ -10197,35 +10361,35 @@ var PinInput = (0, import_react146.forwardRef)(
       gap = attached ? 0 : 2,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react147.PinInput.Root, { ref: rootRef, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react147.PinInput.HiddenInput, { ref, ...inputProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react147.PinInput.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react147.Group, { attached, gap, children: Array.from({ length: pinLength }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react147.PinInput.Input, { index }, index)) }) })
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react148.PinInput.Root, { ref: rootRef, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react148.PinInput.HiddenInput, { ref, ...inputProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react148.PinInput.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react148.Group, { attached, gap, children: Array.from({ length: pinLength }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react148.PinInput.Input, { index }, index)) }) })
     ] });
   }
 );
 
 // src/components/radio/radio.tsx
-var import_react148 = require("react");
-var import_react149 = require("@chakra-ui/react");
+var import_react149 = require("react");
+var import_react150 = require("@chakra-ui/react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var Radio = (0, import_react148.forwardRef)(
+var Radio = (0, import_react149.forwardRef)(
   function Radio2(props, ref) {
     const { children, inputProps, rootRef, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react149.RadioGroup.Item, { ref: rootRef, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react149.RadioGroup.ItemHiddenInput, { ref, ...inputProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react149.RadioGroup.ItemIndicator, {}),
-      children && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react149.RadioGroup.ItemText, { children })
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react150.RadioGroup.Item, { ref: rootRef, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react150.RadioGroup.ItemHiddenInput, { ref, ...inputProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react150.RadioGroup.ItemIndicator, {}),
+      children && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react150.RadioGroup.ItemText, { children })
     ] });
   }
 );
-var RadioGroup = import_react149.RadioGroup.Root;
+var RadioGroup = import_react150.RadioGroup.Root;
 
 // src/components/search-input/search-input.tsx
-var import_react150 = __toESM(require("react"), 1);
-var import_react151 = require("@chakra-ui/react");
+var import_react151 = __toESM(require("react"), 1);
+var import_react152 = require("@chakra-ui/react");
 var import_utils9 = require("@saas-ui/core/utils");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var SearchInput = (0, import_react150.forwardRef)(
+var SearchInput = (0, import_react151.forwardRef)(
   (props, ref) => {
     const {
       placeholder = "Search",
@@ -10243,18 +10407,18 @@ var SearchInput = (0, import_react150.forwardRef)(
       disabled,
       ...inputProps
     } = props;
-    const inputRef = import_react150.default.useRef(null);
-    const [value, setValue] = (0, import_react151.useControllableState)({
+    const inputRef = import_react151.default.useRef(null);
+    const [value, setValue] = (0, import_react152.useControllableState)({
       value: valueProp,
       defaultValue: defaultValueProp
     });
-    const onChange = import_react150.default.useCallback(
+    const onChange = import_react151.default.useCallback(
       (e) => {
         setValue(e.target.value);
       },
       [setValue]
     );
-    const onKeyDown = import_react150.default.useCallback(
+    const onKeyDown = import_react151.default.useCallback(
       (event) => {
         if (event.key === "Escape") {
           setValue("");
@@ -10264,16 +10428,16 @@ var SearchInput = (0, import_react150.forwardRef)(
       [onResetProp, setValue]
     );
     const onReset = () => {
-      var _a7;
+      var _a8;
       setValue("");
       onResetProp == null ? void 0 : onResetProp();
-      (_a7 = inputRef.current) == null ? void 0 : _a7.focus();
+      (_a8 = inputRef.current) == null ? void 0 : _a8.focus();
     };
     const showReset = value && !props.disabled;
     const endElement = showReset ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SearchInputResetButton, { size, children: resetIcon }) : endElementProp;
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react151.Group, { width, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react152.Group, { width, children: [
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-        import_react151.InputElement,
+        import_react152.InputElement,
         {
           placement: "start",
           px: "0",
@@ -10283,7 +10447,7 @@ var SearchInput = (0, import_react150.forwardRef)(
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-        import_react151.Input,
+        import_react152.Input,
         {
           type: "text",
           placeholder,
@@ -10291,7 +10455,7 @@ var SearchInput = (0, import_react150.forwardRef)(
           size,
           value,
           disabled,
-          ref: (0, import_react151.mergeRefs)(ref, inputRef),
+          ref: (0, import_react152.mergeRefs)(ref, inputRef),
           onChange: (0, import_utils9.callAll)(onChange, onChangeProp),
           onKeyDown: (0, import_utils9.callAll)(onKeyDown, onKeyDownProp),
           ps: "calc(var(--input-height) - var(--input-height) / 10)",
@@ -10299,15 +10463,15 @@ var SearchInput = (0, import_react150.forwardRef)(
           ...inputProps
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react151.InputElement, { placement: "end", children: endElement })
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react152.InputElement, { placement: "end", children: endElement })
     ] });
   }
 );
-var SearchInputResetButton = (0, import_react150.forwardRef)(
+var SearchInputResetButton = (0, import_react151.forwardRef)(
   (props, ref) => {
     const { children = /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CloseIcon, {}), ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      import_react151.IconButton,
+      import_react152.IconButton,
       {
         ref,
         variant: "ghost",
@@ -10337,23 +10501,23 @@ __export(namespace_exports3, {
 });
 
 // src/components/select/select.tsx
-var import_react152 = require("react");
-var import_react153 = require("@chakra-ui/react");
+var import_react153 = require("react");
+var import_react154 = require("@chakra-ui/react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var SelectTrigger = (0, import_react152.forwardRef)(
+var SelectTrigger = (0, import_react153.forwardRef)(
   function SelectTrigger2(props, ref) {
     const { children, clearable, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react153.Select.Control, { ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.Trigger, { ref, children }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react153.Select.IndicatorGroup, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react154.Select.Control, { ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Select.Trigger, { ref, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react154.Select.IndicatorGroup, { children: [
         clearable && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectClearTrigger, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.Indicator, {})
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Select.Indicator, {})
       ] })
     ] });
   }
 );
-var SelectClearTrigger = (0, import_react152.forwardRef)(function SelectClearTrigger2(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var SelectClearTrigger = (0, import_react153.forwardRef)(function SelectClearTrigger2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Select.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     CloseButton,
     {
       size: "xs",
@@ -10364,24 +10528,24 @@ var SelectClearTrigger = (0, import_react152.forwardRef)(function SelectClearTri
     }
   ) });
 });
-var SelectContent = (0, import_react152.forwardRef)(
+var SelectContent = (0, import_react153.forwardRef)(
   function SelectContent2(props, ref) {
     const { portalled = true, portalRef, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.Content, { ...rest, ref }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Select.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Select.Content, { ...rest, ref }) }) });
   }
 );
-var SelectItem = (0, import_react152.forwardRef)(
+var SelectItem = (0, import_react153.forwardRef)(
   function SelectItem2(props, ref) {
     const { item, children, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react153.Select.Item, { item, ...rest, ref, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react154.Select.Item, { item, ...rest, ref, children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.ItemIndicator, {})
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Select.ItemIndicator, {})
     ] }, item.value);
   }
 );
-var SelectValueText = (0, import_react152.forwardRef)(function SelectValueText2(props, ref) {
+var SelectValueText = (0, import_react153.forwardRef)(function SelectValueText2(props, ref) {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.ValueText, { ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.Context, { children: (select) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Select.ValueText, { ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Select.Context, { children: (select) => {
     const items = select.selectedItems;
     if (items.length === 0) return props.placeholder;
     if (children) return children(items);
@@ -10390,9 +10554,9 @@ var SelectValueText = (0, import_react152.forwardRef)(function SelectValueText2(
     return `${items.length} selected`;
   } }) });
 });
-var SelectRoot = (0, import_react152.forwardRef)(function SelectRoot2(props, ref) {
+var SelectRoot = (0, import_react153.forwardRef)(function SelectRoot2(props, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    import_react153.Select.Root,
+    import_react154.Select.Root,
     {
       ...props,
       ref,
@@ -10400,21 +10564,21 @@ var SelectRoot = (0, import_react152.forwardRef)(function SelectRoot2(props, ref
     }
   );
 });
-var SelectItemGroup = (0, import_react152.forwardRef)(
+var SelectItemGroup = (0, import_react153.forwardRef)(
   function SelectItemGroup2(props, ref) {
     const { children, label, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react153.Select.ItemGroup, { ...rest, ref, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.ItemGroupLabel, { children: label }),
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react154.Select.ItemGroup, { ...rest, ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Select.ItemGroupLabel, { children: label }),
       children
     ] });
   }
 );
-var SelectLabel = import_react153.Select.Label;
-var SelectItemText = import_react153.Select.ItemText;
+var SelectLabel = import_react154.Select.Label;
+var SelectItemText = import_react154.Select.ItemText;
 
 // src/components/segmented-control/segmented-control.tsx
-var import_react154 = require("react");
-var import_react155 = require("@chakra-ui/react");
+var import_react155 = require("react");
+var import_react156 = require("@chakra-ui/react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function normalize(items) {
   return items.map((item) => {
@@ -10422,19 +10586,19 @@ function normalize(items) {
     return item;
   });
 }
-var SegmentedControl = (0, import_react154.forwardRef)(function SegmentedControl2(props, ref) {
+var SegmentedControl = (0, import_react155.forwardRef)(function SegmentedControl2(props, ref) {
   const { items, ...rest } = props;
-  const data = (0, import_react154.useMemo)(() => normalize(items), [items]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react155.SegmentGroup.Root, { ref, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.SegmentGroup.Indicator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.For, { each: data, children: (item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-      import_react155.SegmentGroup.Item,
+  const data = (0, import_react155.useMemo)(() => normalize(items), [items]);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react156.SegmentGroup.Root, { ref, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react156.SegmentGroup.Indicator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react156.For, { each: data, children: (item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      import_react156.SegmentGroup.Item,
       {
         value: item.value,
         disabled: item.disabled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.SegmentGroup.ItemText, { children: item.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.SegmentGroup.ItemHiddenInput, {})
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react156.SegmentGroup.ItemText, { children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react156.SegmentGroup.ItemHiddenInput, {})
         ]
       },
       item.value
@@ -10466,21 +10630,21 @@ __export(sidebar_exports, {
 var import_sidebar = require("@saas-ui/core/sidebar");
 
 // src/components/sidebar/sidebar.context.ts
-var import_react156 = require("@chakra-ui/react");
+var import_react157 = require("@chakra-ui/react");
 var {
   withContext: withContext7,
   useRecipeResult,
   StylesProvider,
   ClassNamesProvider,
   useStyles: useSidebarStyles
-} = (0, import_react156.createSlotRecipeContext)({
+} = (0, import_react157.createSlotRecipeContext)({
   key: "suiSidebar"
 });
 var {
   withProvider: withItemProvider,
   withContext: withItemContext,
   useStyles: useSidebarItemStyles
-} = (0, import_react156.createSlotRecipeContext)({
+} = (0, import_react157.createSlotRecipeContext)({
   key: "suiSidebarNavItem"
 });
 
@@ -10583,99 +10747,99 @@ __export(steps_exports, {
   NextTrigger: () => StepsNextTrigger,
   PrevTrigger: () => StepsPrevTrigger,
   Root: () => StepsRoot,
-  useContext: () => import_react157.useStepsContext
+  useContext: () => import_react158.useStepsContext
 });
-var import_react157 = require("@chakra-ui/react");
+var import_react158 = require("@chakra-ui/react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var StepsItem = (props) => {
   const { title, description, completedIcon, icon, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react157.Steps.Item, { ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react157.Steps.Trigger, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-        import_react157.Steps.Status,
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react158.Steps.Item, { ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react158.Steps.Trigger, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        import_react158.Steps.Status,
         {
           complete: completedIcon || /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CheckIcon, {}),
-          incomplete: icon || /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Number, {})
+          incomplete: icon || /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Number, {})
         }
       ) }),
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StepInfo, { title, description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Separator, {})
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Separator, {})
   ] });
 };
 var StepInfo = (props) => {
   const { title, description } = props;
   if (title && description) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react157.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Title, { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Description, { children: description })
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react158.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Title, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Description, { children: description })
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Title, { children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Description, { children: description })
+    title && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Title, { children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Description, { children: description })
   ] });
 };
 var StepsIndicator = (props) => {
-  const { icon = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Number, {}), completedIcon } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Status, { complete: completedIcon, incomplete: icon }) });
+  const { icon = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Number, {}), completedIcon } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Status, { complete: completedIcon, incomplete: icon }) });
 };
-var StepsList = import_react157.Steps.List;
-var StepsRoot = import_react157.Steps.Root;
-var StepsContent = import_react157.Steps.Content;
-var StepsCompletedContent = import_react157.Steps.CompletedContent;
+var StepsList = import_react158.Steps.List;
+var StepsRoot = import_react158.Steps.Root;
+var StepsContent = import_react158.Steps.Content;
+var StepsCompletedContent = import_react158.Steps.CompletedContent;
 var StepsNextTrigger = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.NextTrigger, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.NextTrigger, { ...props });
 };
 var StepsPrevTrigger = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.PrevTrigger, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.PrevTrigger, { ...props });
 };
 
 // src/components/switch/switch.tsx
-var import_react158 = require("@chakra-ui/react");
-var import_react159 = require("react");
+var import_react159 = require("@chakra-ui/react");
+var import_react160 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var Switch = (0, import_react159.forwardRef)(
+var Switch = (0, import_react160.forwardRef)(
   function Switch2(props, ref) {
     const { inputProps, children, rootRef, trackLabel, thumbLabel, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react158.Switch.Root, { ref: rootRef, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.HiddenInput, { ref, ...inputProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react158.Switch.Control, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.Thumb, { children: thumbLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.ThumbIndicator, { fallback: thumbLabel == null ? void 0 : thumbLabel.off, children: thumbLabel == null ? void 0 : thumbLabel.on }) }),
-        trackLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.Indicator, { fallback: trackLabel.off, children: trackLabel.on })
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react159.Switch.Root, { ref: rootRef, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.Switch.HiddenInput, { ref, ...inputProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react159.Switch.Control, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.Switch.Thumb, { children: thumbLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.Switch.ThumbIndicator, { fallback: thumbLabel == null ? void 0 : thumbLabel.off, children: thumbLabel == null ? void 0 : thumbLabel.on }) }),
+        trackLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.Switch.Indicator, { fallback: trackLabel.off, children: trackLabel.on })
       ] }),
-      children != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.Label, { children })
+      children != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.Switch.Label, { children })
     ] });
   }
 );
 
 // src/components/toaster/toaster.tsx
-var import_react160 = require("@chakra-ui/react");
+var import_react161 = require("@chakra-ui/react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var toast = (0, import_react160.createToaster)({
+var toast = (0, import_react161.createToaster)({
   placement: "bottom-end",
   pauseOnPageIdle: true
 });
 var Toaster = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Toaster, { toaster: toast, insetInline: { mdDown: "4" }, children: (toast2) => {
-    var _a7;
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react160.Toast.Root, { width: { md: "sm" }, children: [
-      toast2.type === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Spinner, { size: "sm", color: "colorPalette.solid" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Toast.Indicator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react160.Stack, { gap: "1", flex: "1", maxWidth: "100%", children: [
-        toast2.title && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Toast.Title, { children: toast2.title }),
-        toast2.description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Toast.Description, { children: toast2.description })
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Toaster, { toaster: toast, insetInline: { mdDown: "4" }, children: (toast2) => {
+    var _a8;
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react161.Toast.Root, { width: { md: "sm" }, children: [
+      toast2.type === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Spinner, { size: "sm", color: "colorPalette.solid" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Toast.Indicator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react161.Stack, { gap: "1", flex: "1", maxWidth: "100%", children: [
+        toast2.title && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Toast.Title, { children: toast2.title }),
+        toast2.description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Toast.Description, { children: toast2.description })
       ] }),
-      toast2.action && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Toast.ActionTrigger, { children: toast2.action.label }),
-      ((_a7 = toast2.meta) == null ? void 0 : _a7.closable) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Toast.CloseTrigger, {})
+      toast2.action && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Toast.ActionTrigger, { children: toast2.action.label }),
+      ((_a8 = toast2.meta) == null ? void 0 : _a8.closable) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Toast.CloseTrigger, {})
     ] });
   } }) });
 };
 
 // src/components/tooltip/tooltip.tsx
-var import_react161 = require("react");
-var import_react162 = require("@chakra-ui/react");
+var import_react162 = require("react");
+var import_react163 = require("@chakra-ui/react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var Tooltip = (0, import_react161.forwardRef)(
+var Tooltip = (0, import_react162.forwardRef)(
   function Tooltip2(props, ref) {
     const {
       showArrow,
@@ -10688,10 +10852,10 @@ var Tooltip = (0, import_react161.forwardRef)(
       ...rest
     } = props;
     if (disabled) return children;
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react162.Tooltip.Root, { ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Tooltip.Trigger, { asChild: true, children }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react162.Tooltip.Content, { ref, ...contentProps, children: [
-        showArrow && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Tooltip.Arrow, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Tooltip.ArrowTip, {}) }),
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react163.Tooltip.Root, { ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react163.Tooltip.Trigger, { asChild: true, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react163.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react163.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react163.Tooltip.Content, { ref, ...contentProps, children: [
+        showArrow && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react163.Tooltip.Arrow, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react163.Tooltip.ArrowTip, {}) }),
         content
       ] }) }) })
     ] });
@@ -10712,6 +10876,7 @@ var Tooltip = (0, import_react161.forwardRef)(
   EmptyState,
   GridList,
   IconBadge,
+  IconButton,
   InputGroup,
   Link,
   LoadingOverlay,