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

package/dist/index.cjs

@@ -39,10 +39,11 @@ __export(src_exports, {
   Checkbox: () => Checkbox,
   CloseButton: () => CloseButton,
   Command: () => Command,
-  DataList: () => import_data_list2.DataList,
-  Dialog: () => namespace_exports,
-  Drawer: () => namespace_exports2,
+  DataList: () => import_data_list.DataList,
+  Dialog: () => dialog_exports,
+  Drawer: () => drawer_exports,
   EmptyState: () => EmptyState,
+  FileUpload: () => file_upload_exports,
   GridList: () => grid_list_exports,
   IconBadge: () => IconBadge,
   IconButton: () => IconButton,
@@ -57,11 +58,12 @@ __export(src_exports, {
   Persona: () => Persona,
   PersonaAvatar: () => PersonaAvatar2,
   PinInput: () => PinInput,
+  Popover: () => popover_exports,
   Radio: () => Radio,
   RadioGroup: () => RadioGroup,
   SearchInput: () => SearchInput,
   SegmentedControl: () => SegmentedControl,
-  Select: () => namespace_exports3,
+  Select: () => namespace_exports,
   Sidebar: () => sidebar_exports,
   Spinner: () => Spinner2,
   Status: () => Status,
@@ -73,12 +75,12 @@ __export(src_exports, {
   Tag: () => Tag,
   Toaster: () => Toaster,
   Tooltip: () => Tooltip,
-  createSystem: () => import_react170.createSystem,
+  createSystem: () => import_react172.createSystem,
   defaultConfig: () => defaultConfig,
   defaultPresenceOptions: () => defaultPresenceOptions,
   defaultSystem: () => defaultSystem,
   toast: () => toast,
-  useDataListStyles: () => import_data_list2.useDataListStyles,
+  useDataListStyles: () => import_data_list.useDataListStyles,
   useLink: () => useLink,
   useLoadingOverlayStyles: () => useLoadingOverlayStyles,
   useSidebar: () => import_sidebar2.useSidebar,
@@ -183,7 +185,6 @@ var import_react3 = require("@chakra-ui/react");
 var empty = "var(--chakra-empty,/*!*/ /*!*/)";
 var globalCss = (0, import_react3.defineGlobalStyles)({
   "*": {
-    fontFeatureSettings: '"cv11"',
     "--ring-inset": empty,
     "--ring-offset-width": "0px",
     "--ring-offset-color": "#fff",
@@ -219,9 +220,15 @@ var globalCss = (0, import_react3.defineGlobalStyles)({
     "--global-font-body": "fonts.body",
     "--global-color-border": "colors.border",
     "--cursor-button": "default",
-    "--radius-factor": "1",
+    // '--radius-factor': '1',
+    // '--radius-control': '1',
+    // '--radius-panel': '1',
+    // '--radius-indicator': '1',
     "--radius-full": "9999px",
-    "--scale-factor": "1"
+    "--scale-factor": "1",
+    "--overlay-translucency": "90%",
+    "--overlay-effect": "blur({blurs.lg})",
+    "--backdrop-effect": "none"
   },
   body: {
     color: "fg",
@@ -234,41 +241,6 @@ var globalCss = (0, import_react3.defineGlobalStyles)({
   },
   "*::selection": {
     bg: "colorPalette.muted/80"
-  },
-  '[data-radius="none"]': {
-    "--radius-factor": "0",
-    "--radius-full": "0"
-  },
-  '[data-radius="sm"]': {
-    "--radius-factor": "0.9",
-    "--radius-full": "0"
-  },
-  '[data-radius="md"]': {
-    "--radius-factor": "1",
-    "--radius-full": "0"
-  },
-  '[data-radius="lg"]': {
-    "--radius-factor": "1.5",
-    "--radius-full": "0"
-  },
-  '[data-radius="full"]': {
-    "--radius-factor": "1.5",
-    "--radius-full": "9999px"
-  },
-  '[data-scale="xs"]': {
-    "--scale-factor": "0.9"
-  },
-  '[data-scale="sm"]': {
-    "--scale-factor": "0.95"
-  },
-  '[data-scale="md"]': {
-    "--scale-factor": "1"
-  },
-  '[data-scale="lg"]': {
-    "--scale-factor": "1.05"
-  },
-  '[data-scale="xl"]': {
-    "--scale-factor": "1.1"
   }
 });
 
@@ -382,6 +354,20 @@ var layerStyles = (0, import_react4.defineLayerStyles)({
   },
   none: {
     value: {}
+  },
+  overlay: {
+    value: {
+      bg: "bg.overlay",
+      backdropFilter: "var(--overlay-effect)",
+      borderRadius: "panel.lg",
+      boxShadow: "lg"
+    }
+  },
+  backdrop: {
+    value: {
+      bg: "bg.backdrop",
+      backdropFilter: "var(--backdrop-effect)"
+    }
   }
 });
 
@@ -491,7 +477,7 @@ var buttonRecipe = (0, import_react6.defineRecipe)({
         h: "6",
         minW: "6",
         textStyle: "xs",
-        borderRadius: "sm",
+        borderRadius: "control.sm",
         px: "2"
       },
       sm: {
@@ -499,14 +485,14 @@ var buttonRecipe = (0, import_react6.defineRecipe)({
         h: "7",
         minW: "7",
         textStyle: "sm",
-        borderRadius: "md",
+        borderRadius: "control.md",
         px: "2.5"
       },
       md: {
         gap: "2",
         h: "8",
         minW: "8",
-        borderRadius: "md",
+        borderRadius: "control.md",
         textStyle: "sm",
         px: "3"
       },
@@ -514,7 +500,7 @@ var buttonRecipe = (0, import_react6.defineRecipe)({
         gap: "3",
         h: "10",
         minW: "10",
-        borderRadius: "lg",
+        borderRadius: "control.lg",
         textStyle: "md",
         px: "4.5"
       },
@@ -522,7 +508,7 @@ var buttonRecipe = (0, import_react6.defineRecipe)({
         gap: "3",
         h: "12",
         minW: "12",
-        borderRadius: "lg",
+        borderRadius: "control.lg",
         textStyle: "lg",
         px: "6"
       }
@@ -1622,6 +1608,18 @@ var semanticColors = import_react25.defineSemanticTokens.colors({
     panel: {
       value: { _light: "{colors.white}", _dark: "{colors.gray.950}" }
     },
+    overlay: {
+      value: {
+        _light: "color-mix(in oklch, {colors.white} var(--overlay-translucency), transparent)",
+        _dark: "color-mix(in srgb, var(--overlay-translucency), {colors.gray.950} 100%)"
+      }
+    },
+    backdrop: {
+      value: {
+        _light: "{colors.black/30}",
+        _dark: "{colors.black/30}"
+      }
+    },
     error: {
       value: { _light: "{colors.red.50}", _dark: "{colors.red.950}" }
     },
@@ -2229,7 +2227,40 @@ var import_react26 = require("@chakra-ui/react");
 var semanticRadii = import_react26.defineSemanticTokens.radii({
   l1: { value: "{radii.xs}" },
   l2: { value: "{radii.sm}" },
-  l3: { value: "{radii.md}" }
+  l3: { value: "{radii.md}" },
+  control: {
+    sm: {
+      value: "calc({radii.xs} * var(--scale-factor, 1) * var(--radius-control, 1))"
+    },
+    md: {
+      value: "calc({radii.sm} * var(--scale-factor, 1) * var(--radius-control, 1))"
+    },
+    lg: {
+      value: "calc({radii.md} * var(--scale-factor, 1) * var(--radius-control, 1))"
+    }
+  },
+  panel: {
+    sm: {
+      value: "calc({radii.sm} * var(--scale-factor, 1) * var(--radius-panel, 1))"
+    },
+    md: {
+      value: "calc({radii.md} * var(--scale-factor, 1) * var(--radius-panel, 1  ))"
+    },
+    lg: {
+      value: "calc({radii.lg} * var(--scale-factor, 1) * var(--radius-panel, 1))"
+    }
+  },
+  indicator: {
+    sm: {
+      value: "calc({radii.xs} * var(--scale-factor, 1) * var(--radius-indicator, 1))"
+    },
+    md: {
+      value: "calc({radii.sm} * var(--scale-factor, 1) * var(--radius-indicator, 1  ))"
+    },
+    lg: {
+      value: "calc({radii.md} * var(--scale-factor, 1) * var(--radius-indicator, 1))"
+    }
+  }
 });
 
 // src/theme/semantic-tokens/shadows.ts
@@ -2237,37 +2268,37 @@ var import_react27 = require("@chakra-ui/react");
 var semanticShadows = import_react27.defineSemanticTokens.shadows({
   xs: {
     value: {
-      _light: "0px 1px 2px {colors.gray.900/5}, 0px 0px 1px {colors.gray.900/20}",
+      _light: "0px 1px 2px {colors.gray.900/5}, 0px 0px 1px {colors.gray.900/5}",
       _dark: "0px 1px 1px {black/64}, 0px 0px 1px inset {colors.gray.300/20}"
     }
   },
   sm: {
     value: {
-      _light: "0px 2px 4px {colors.gray.900/5}, 0px 0px 1px {colors.gray.900/30}",
+      _light: "0px 2px 4px {colors.gray.900/5}, 0px 0px 2px {colors.gray.900/5}",
       _dark: "0px 2px 4px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
     }
   },
   md: {
     value: {
-      _light: "0px 4px 8px {colors.gray.900/5}, 0px 0px 1px {colors.gray.900/30}",
+      _light: "0px 4px 8px {colors.gray.900/5}, 0px 0px 3px {colors.gray.900/5}",
       _dark: "0px 4px 8px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
     }
   },
   lg: {
     value: {
-      _light: "0px 8px 16px {colors.gray.900/5}, 0px 0px 1px {colors.gray.900/30}",
+      _light: "0px 8px 16px {colors.gray.900/5}, 0px 0px 4px {colors.gray.900/5}",
       _dark: "0px 8px 16px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
     }
   },
   xl: {
     value: {
-      _light: "0px 16px 24px {colors.gray.900/5}, 0px 0px 1px {colors.gray.900/30}",
+      _light: "0px 16px 24px {colors.gray.900/5}, 0px 0px 5px {colors.gray.900/5}",
       _dark: "0px 16px 24px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
     }
   },
   "2xl": {
     value: {
-      _light: "0px 24px 40px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+      _light: "0px 24px 40px {colors.gray.900/10}, 0px 0px 6px {colors.gray.900/5}",
       _dark: "0px 24px 40px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
     }
   },
@@ -2464,15 +2495,95 @@ var avatarSlotRecipe = (0, import_react29.defineSlotRecipe)({
   }
 });
 
-// src/components/dialog/dialog.recipe.ts
+// src/components/data-list/data-list.recipe.ts
 var import_react30 = require("@chakra-ui/react");
 var import_anatomy2 = require("@chakra-ui/react/anatomy");
-var dialogSlotRecipe = (0, import_react30.defineSlotRecipe)({
-  slots: import_anatomy2.dialogAnatomy.keys(),
+var dataListSlotRecipe = (0, import_react30.defineSlotRecipe)({
+  slots: import_anatomy2.dataListAnatomy.keys(),
+  className: "chakra-data-list",
+  base: {
+    itemLabel: {
+      color: "fg.muted",
+      display: "flex",
+      alignItems: "center",
+      gap: "1"
+    },
+    itemValue: {
+      display: "flex",
+      minWidth: "0",
+      flex: "1"
+    }
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: {
+          display: "flex",
+          flexDirection: "column"
+        },
+        item: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "4"
+        },
+        itemLabel: {
+          minWidth: "120px"
+        }
+      },
+      vertical: {
+        root: {
+          display: "flex",
+          flexDirection: "column"
+        },
+        item: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "1"
+        }
+      }
+    },
+    size: {
+      sm: {
+        root: {
+          gap: "3"
+        },
+        item: {
+          textStyle: "xs"
+        }
+      },
+      md: {
+        root: {
+          gap: "4"
+        },
+        item: {
+          textStyle: "sm"
+        }
+      },
+      lg: {
+        root: {
+          gap: "5"
+        },
+        item: {
+          textStyle: "md"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    orientation: "vertical"
+  }
+});
+
+// src/components/dialog/dialog.recipe.ts
+var import_react31 = require("@chakra-ui/react");
+var import_anatomy3 = require("@chakra-ui/react/anatomy");
+var dialogSlotRecipe = (0, import_react31.defineSlotRecipe)({
+  slots: import_anatomy3.dialogAnatomy.keys(),
   className: "chakra-dialog",
   base: {
     backdrop: {
-      bg: "blackAlpha.500",
+      layerStyle: "backdrop",
       pos: "fixed",
       left: 0,
       top: 0,
@@ -2495,7 +2606,7 @@ var dialogSlotRecipe = (0, import_react30.defineSlotRecipe)({
       position: "fixed",
       left: 0,
       top: 0,
-      "--dialog-z-index": "zIndex.modal",
+      "--dialog-z-index": "zIndex.layer-4",
       zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
       justifyContent: "center",
       overscrollBehaviorY: "none"
@@ -2506,13 +2617,11 @@ var dialogSlotRecipe = (0, import_react30.defineSlotRecipe)({
       position: "relative",
       width: "100%",
       outline: 0,
-      borderRadius: "l3",
       textStyle: "sm",
       my: "var(--dialog-margin, var(--dialog-base-margin))",
-      "--dialog-z-index": "zIndex.modal",
+      "--dialog-z-index": "zIndex.layer-4",
       zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
-      bg: "bg.panel",
-      boxShadow: "lg",
+      layerStyle: "overlay",
       _open: {
         animationDuration: "moderate"
       },
@@ -2689,14 +2798,14 @@ var dialogSlotRecipe = (0, import_react30.defineSlotRecipe)({
 });
 
 // src/components/drawer/drawer.recipe.ts
-var import_react31 = require("@chakra-ui/react");
-var import_anatomy3 = require("@chakra-ui/react/anatomy");
-var drawerSlotRecipe = (0, import_react31.defineSlotRecipe)({
-  slots: import_anatomy3.drawerAnatomy.keys(),
+var import_react32 = require("@chakra-ui/react");
+var import_anatomy4 = require("@chakra-ui/react/anatomy");
+var drawerSlotRecipe = (0, import_react32.defineSlotRecipe)({
+  slots: import_anatomy4.drawerAnatomy.keys(),
   className: "chakra-drawer",
   base: {
     backdrop: {
-      bg: "blackAlpha.500",
+      layerStyle: "backdrop",
       pos: "fixed",
       insetInlineStart: 0,
       top: 0,
@@ -2717,6 +2826,7 @@ var drawerSlotRecipe = (0, import_react31.defineSlotRecipe)({
       width: "100vw",
       height: "100dvh",
       position: "fixed",
+      padding: 2,
       insetInlineStart: 0,
       top: 0,
       zIndex: "modal",
@@ -2728,12 +2838,12 @@ var drawerSlotRecipe = (0, import_react31.defineSlotRecipe)({
       position: "relative",
       width: "100%",
       outline: 0,
-      zIndex: "modal",
+      "--drawer-z-index": "zIndex.layer-4",
+      zIndex: "calc(var(--drawer-z-index) + var(--layer-index, 0))",
       textStyle: "sm",
       maxH: "100dvh",
       color: "inherit",
-      bg: "bg.panel",
-      boxShadow: "lg",
+      layerStyle: "overlay",
       _open: {
         animationDuration: "slowest",
         animationTimingFunction: "ease-in-smooth"
@@ -2869,134 +2979,350 @@ var drawerSlotRecipe = (0, import_react31.defineSlotRecipe)({
         }
       }
     },
-    contained: {
+    attached: {
       true: {
         positioner: {
-          padding: "2"
+          padding: 0
         },
         content: {
-          borderRadius: "md"
+          borderRadius: "none"
         }
       }
     }
   },
   defaultVariants: {
     size: "xs",
-    placement: "end",
-    contained: true
+    placement: "end"
   }
 });
 
-// src/components/grid-list/grid-list.recipe.ts
-var import_react32 = require("@chakra-ui/react");
-var gridListSlotRecipe = (0, import_react32.defineSlotRecipe)({
-  className: "sui-grid-list",
-  slots: ["root", "item", "header", "cell"],
+// src/components/empty-state/empty-state.recipe.ts
+var import_react33 = require("@chakra-ui/react");
+var import_anatomy5 = require("@chakra-ui/react/anatomy");
+var emptyStateSlotRecipe = (0, import_react33.defineSlotRecipe)({
+  slots: import_anatomy5.emptyStateAnatomy.extendWith("actions").keys(),
+  className: "chakra-empty-state",
   base: {
     root: {
-      position: "relative"
+      width: "full",
+      height: "full",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center"
     },
-    item: {
+    content: {
       display: "flex",
-      flexDirection: "row",
+      flexDirection: "column",
       alignItems: "center",
-      justifyContent: "space-between",
-      flex: 1,
-      userSelect: "none",
-      borderRadius: "inherit",
-      outline: "none",
-      _focusVisible: {
-        boxShadow: "outline"
-      },
-      _disabled: {
-        cursor: "disabled",
-        opacity: 0.5,
-        _hover: {
-          bg: "transparent",
-          _dark: {
-            bg: "transparent"
-          }
-        },
-        _active: {
-          bg: "transparent",
-          _dark: {
-            bg: "transparent"
-          }
-        }
-      }
+      justifyContent: "center"
     },
-    header: {
+    indicator: {
       display: "flex",
-      flexDirection: "row",
-      position: "sticky",
-      fontSize: "md",
-      fontWeight: "semibold",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "colorPalette.solid",
+      _icon: {
+        boxSize: "1em"
+      }
+    },
+    title: {
+      fontWeight: "semibold"
+    },
+    description: {
+      textStyle: "sm",
       color: "fg.muted"
     },
-    cell: {
-      flexShrink: 0
+    actions: {
+      display: "flex",
+      flexDirection: "row",
+      gap: "2"
     }
   },
   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: {
-          textStyle: "sm",
-          py: 0.5
+          px: "4",
+          py: "6"
         },
-        item: {
-          py: 1,
-          px: 2,
-          gap: 1
+        indicator: {
+          textStyle: "3xl",
+          mb: "2"
         },
-        header: {
-          py: 1,
-          px: 2
+        title: {
+          textStyle: "md"
+        },
+        description: {
+          textStyle: "xs"
+        },
+        content: {},
+        actions: {
+          mt: "2"
         }
       },
       md: {
         root: {
-          textStyle: "md",
-          py: 1
+          px: "8",
+          py: "12"
         },
-        item: {
-          py: 2,
-          px: 3,
-          gap: 2
+        indicator: {
+          textStyle: "4xl",
+          mb: "3"
         },
-        header: {
-          py: 2,
-          px: 3
+        title: {
+          textStyle: "lg"
+        },
+        description: {
+          textStyle: "sm"
+        },
+        content: {},
+        actions: {
+          mt: "3"
         }
-      }
-    }
-  },
-  compoundVariants: [
-    {
+      },
+      lg: {
+        root: {
+          px: "12",
+          py: "16"
+        },
+        indicator: {
+          textStyle: "6xl",
+          mb: "4"
+        },
+        title: {
+          textStyle: "xl"
+        },
+        description: {
+          textStyle: "md"
+        },
+        content: {},
+        actions: {
+          mt: "4"
+        }
+      }
+    },
+    align: {
+      start: {
+        content: {
+          alignItems: "flex-start"
+        }
+      },
+      center: {
+        content: {
+          alignItems: "center"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    align: "center"
+  }
+});
+
+// src/components/file-upload/file-upload.recipe.ts
+var import_react34 = require("@chakra-ui/react");
+var import_anatomy6 = require("@chakra-ui/react/anatomy");
+var fileUploadSlotRecipe = (0, import_react34.defineSlotRecipe)({
+  className: "chakra-file-upload",
+  slots: import_anatomy6.fileUploadAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "4",
+      width: "100%",
+      alignItems: "flex-start"
+    },
+    label: {
+      fontWeight: "medium",
+      textStyle: "sm"
+    },
+    dropzone: {
+      background: "bg",
+      borderRadius: "panel.md",
+      borderWidth: "1px",
+      borderStyle: "dashed",
+      display: "flex",
+      alignItems: "center",
+      flexDirection: "column",
+      gap: "4",
+      justifyContent: "center",
+      p: "4",
+      transition: "backgrounds",
+      focusVisibleRing: "outside",
+      _dragging: {
+        bg: "colorPalette.subtle",
+        borderStyle: "solid",
+        borderColor: "colorPalette.solid"
+      }
+    },
+    dropzoneContent: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      textAlign: "center",
+      gap: "4",
+      textStyle: "sm"
+    },
+    item: {
+      textStyle: "sm",
+      animationName: "fade-in",
+      animationDuration: "moderate",
+      background: "bg",
+      borderRadius: "panel.md",
+      borderWidth: "1px",
+      width: "100%",
+      display: "flex",
+      alignItems: "center",
+      gap: "3",
+      px: "4",
+      py: "2"
+    },
+    itemGroup: {
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      gap: "3"
+    },
+    itemName: {
+      color: "fg",
+      fontWeight: "medium",
+      lineClamp: "1"
+    },
+    itemContent: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5",
+      flex: "1"
+    },
+    itemSizeText: {
+      color: "fg.muted",
+      textStyle: "xs"
+    },
+    itemDeleteTrigger: {
+      alignSelf: "flex-start"
+    },
+    itemPreviewImage: {
+      width: "10",
+      height: "10",
+      objectFit: "scale-down"
+    }
+  },
+  defaultVariants: {}
+});
+
+// src/components/grid-list/grid-list.recipe.ts
+var import_react35 = require("@chakra-ui/react");
+var gridListSlotRecipe = (0, import_react35.defineSlotRecipe)({
+  className: "sui-grid-list",
+  slots: ["root", "item", "header", "cell"],
+  base: {
+    root: {
+      position: "relative"
+    },
+    item: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      flex: 1,
+      userSelect: "none",
+      borderRadius: "inherit",
+      outline: "none",
+      _focusVisible: {
+        boxShadow: "outline"
+      },
+      _disabled: {
+        cursor: "disabled",
+        opacity: 0.5,
+        _hover: {
+          bg: "transparent",
+          _dark: {
+            bg: "transparent"
+          }
+        },
+        _active: {
+          bg: "transparent",
+          _dark: {
+            bg: "transparent"
+          }
+        }
+      }
+    },
+    header: {
+      display: "flex",
+      flexDirection: "row",
+      position: "sticky",
+      fontSize: "md",
+      fontWeight: "semibold",
+      color: "fg.muted"
+    },
+    cell: {
+      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: {
+          textStyle: "sm",
+          py: 0.5
+        },
+        item: {
+          py: 1,
+          px: 2,
+          gap: 1
+        },
+        header: {
+          py: 1,
+          px: 2
+        }
+      },
+      md: {
+        root: {
+          textStyle: "md",
+          py: 1
+        },
+        item: {
+          py: 2,
+          px: 3,
+          gap: 2
+        },
+        header: {
+          py: 2,
+          px: 3
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
       variant: "rounded",
       size: "sm",
       css: {
@@ -3022,8 +3348,8 @@ var gridListSlotRecipe = (0, import_react32.defineSlotRecipe)({
 });
 
 // src/components/loading-overlay/loading-overlay.recipe.ts
-var import_react33 = require("@chakra-ui/react");
-var loadingOverlaySlotRecipe = (0, import_react33.defineSlotRecipe)({
+var import_react36 = require("@chakra-ui/react");
+var loadingOverlaySlotRecipe = (0, import_react36.defineSlotRecipe)({
   className: "sui-loading-overlay",
   slots: ["root", "text"],
   base: {
@@ -3083,9 +3409,133 @@ var loadingOverlaySlotRecipe = (0, import_react33.defineSlotRecipe)({
   }
 });
 
+// src/components/menu/menu.recipe.ts
+var import_react37 = require("@chakra-ui/react");
+var import_anatomy7 = require("@chakra-ui/react/anatomy");
+var menuSlotRecipe = (0, import_react37.defineSlotRecipe)({
+  className: "chakra-menu",
+  slots: import_anatomy7.menuAnatomy.keys(),
+  base: {
+    content: {
+      layerStyle: "overlay",
+      boxShadow: "md",
+      borderWidth: "1px",
+      borderColor: "border",
+      outline: 0,
+      color: "fg",
+      maxHeight: "var(--available-height)",
+      "--menu-z-index": "zIndex.layer-3",
+      zIndex: "calc(var(--menu-z-index) + var(--layer-index, 0))",
+      overflow: "hidden",
+      _open: {
+        animationStyle: "slide-fade-in",
+        animationDuration: "fast"
+      },
+      _closed: {
+        animationStyle: "slide-fade-out",
+        animationDuration: "faster"
+      }
+    },
+    item: {
+      textDecoration: "none",
+      color: "fg",
+      userSelect: "none",
+      borderRadius: "control.md",
+      width: "100%",
+      display: "flex",
+      cursor: "menuitem",
+      alignItems: "center",
+      textAlign: "start",
+      position: "relative",
+      flex: "0 0 auto",
+      outline: 0,
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    itemText: {
+      flex: "1"
+    },
+    itemGroupLabel: {
+      px: "2",
+      py: "1.5",
+      fontWeight: "semibold",
+      textStyle: "sm"
+    },
+    indicator: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: "0"
+    },
+    itemCommand: {
+      opacity: "0.6",
+      textStyle: "xs",
+      ms: "auto",
+      ps: "4",
+      letterSpacing: "widest"
+    },
+    separator: {
+      height: "1px",
+      bg: "bg.muted",
+      my: "1",
+      mx: "-1"
+    }
+  },
+  variants: {
+    variant: {
+      subtle: {
+        item: {
+          _highlighted: {
+            bg: "bg.subtle"
+          }
+        }
+      },
+      solid: {
+        item: {
+          _highlighted: {
+            bg: "colorPalette.solid",
+            color: "colorPalette.contrast"
+          }
+        }
+      }
+    },
+    size: {
+      sm: {
+        content: {
+          minW: "8rem",
+          padding: "0.5"
+        },
+        item: {
+          gap: "1",
+          textStyle: "xs",
+          py: "1",
+          px: "1.5"
+        }
+      },
+      md: {
+        content: {
+          minW: "8rem",
+          padding: "1"
+        },
+        item: {
+          gap: "2",
+          textStyle: "sm",
+          py: "1.5",
+          px: "2"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "subtle"
+  }
+});
+
 // src/components/navbar/navbar.recipe.ts
-var import_react34 = require("@chakra-ui/react");
-var navbarSlotRecipe = (0, import_react34.defineSlotRecipe)({
+var import_react38 = require("@chakra-ui/react");
+var navbarSlotRecipe = (0, import_react38.defineSlotRecipe)({
   className: "sui-navbar",
   slots: ["root", "content", "brand", "item", "link"],
   base: {
@@ -3194,15 +3644,15 @@ var navbarSlotRecipe = (0, import_react34.defineSlotRecipe)({
 });
 
 // src/components/persona/persona.recipe.ts
-var import_react35 = require("@chakra-ui/react");
-var baseStyleLabel = (0, import_react35.defineStyle)({
+var import_react39 = require("@chakra-ui/react");
+var baseStyleLabel = (0, import_react39.defineStyle)({
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
   minW: 0,
   color: "fg"
 });
-var personaSlotRecipe = (0, import_react35.defineSlotRecipe)({
+var personaSlotRecipe = (0, import_react39.defineSlotRecipe)({
   className: "sui-persona",
   slots: [
     "root",
@@ -3288,11 +3738,98 @@ var personaSlotRecipe = (0, import_react35.defineSlotRecipe)({
         secondaryLabel: { fontSize: "md" },
         tertiaryLabel: { fontSize: "md" }
       },
-      "2xl": {
-        details: { ms: 4 },
-        label: { fontSize: "xl" },
-        secondaryLabel: { fontSize: "lg" },
-        tertiaryLabel: { fontSize: "lg" }
+      "2xl": {
+        details: { ms: 4 },
+        label: { fontSize: "xl" },
+        secondaryLabel: { fontSize: "lg" },
+        tertiaryLabel: { fontSize: "lg" }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+// src/components/popover/popover.recipe.ts
+var import_react40 = require("@chakra-ui/react");
+var import_anatomy8 = require("@chakra-ui/react/anatomy");
+var popoverSlotRecipe = (0, import_react40.defineSlotRecipe)({
+  className: "chakra-popover",
+  slots: import_anatomy8.popoverAnatomy.keys(),
+  base: {
+    content: {
+      layerStyle: "overlay",
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      textStyle: "sm",
+      "--popover-bg": "colors.bg.panel",
+      bg: "var(--popover-bg)",
+      "--popover-size": "sizes.xs",
+      "--popover-mobile-size": "calc(100dvw - 1rem)",
+      width: {
+        base: "min(var(--popover-mobile-size), var(--popover-size))",
+        sm: "var(--popover-size)"
+      },
+      "--popover-z-index": "zIndex.layer-2",
+      zIndex: "calc(var(--popover-z-index) + var(--layer-index, 0))",
+      borderWidth: "1px",
+      outline: "0",
+      transformOrigin: "var(--transform-origin)",
+      _open: {
+        animationStyle: "scale-fade-in",
+        animationDuration: "fast"
+      },
+      _closed: {
+        animationStyle: "scale-fade-out",
+        animationDuration: "faster"
+      }
+    },
+    header: {
+      paddingInline: "var(--popover-padding)",
+      paddingTop: "var(--popover-padding)"
+    },
+    body: {
+      padding: "var(--popover-padding)",
+      flex: "1"
+    },
+    footer: {
+      display: "flex",
+      alignItems: "center",
+      paddingInline: "var(--popover-padding)",
+      paddingBottom: "var(--popover-padding)"
+    },
+    arrow: {
+      "--arrow-size": "sizes.3",
+      "--arrow-background": "var(--popover-bg)"
+    },
+    arrowTip: {
+      borderTopWidth: "1px",
+      borderInlineStartWidth: "1px"
+    }
+  },
+  variants: {
+    size: {
+      xs: {
+        content: {
+          "--popover-padding": "spacing.3"
+        }
+      },
+      sm: {
+        content: {
+          "--popover-padding": "spacing.4"
+        }
+      },
+      md: {
+        content: {
+          "--popover-padding": "spacing.5"
+        }
+      },
+      lg: {
+        content: {
+          "--popover-padding": "spacing.6"
+        }
       }
     }
   },
@@ -3302,11 +3839,11 @@ var personaSlotRecipe = (0, import_react35.defineSlotRecipe)({
 });
 
 // src/components/segmented-control/segment-group.recipe.ts
-var import_react36 = require("@chakra-ui/react");
-var import_anatomy4 = require("@chakra-ui/react/anatomy");
-var segmentGroupSlotRecipe = (0, import_react36.defineSlotRecipe)({
+var import_react41 = require("@chakra-ui/react");
+var import_anatomy9 = require("@chakra-ui/react/anatomy");
+var segmentGroupSlotRecipe = (0, import_react41.defineSlotRecipe)({
   className: "chakra-segment-group",
-  slots: import_anatomy4.segmentGroupAnatomy.keys(),
+  slots: import_anatomy9.segmentGroupAnatomy.keys(),
   base: {
     root: {
       "--segment-radius": "radii.md",
@@ -3428,8 +3965,8 @@ var segmentGroupSlotRecipe = (0, import_react36.defineSlotRecipe)({
 });
 
 // src/components/sidebar/sidebar-item.recipe.ts
-var import_react37 = require("@chakra-ui/react");
-var sidebarNavItemSlotRecipe = (0, import_react37.defineSlotRecipe)({
+var import_react42 = require("@chakra-ui/react");
+var sidebarNavItemSlotRecipe = (0, import_react42.defineSlotRecipe)({
   className: "sui-sidebar-nav-item",
   slots: ["item", "button", "endElement"],
   base: {
@@ -3492,18 +4029,44 @@ var sidebarNavItemSlotRecipe = (0, import_react37.defineSlotRecipe)({
       }
     },
     size: {
+      sm: {
+        item: {
+          fontSize: "sm"
+        },
+        button: {
+          borderRadius: "control.md",
+          px: 1.5,
+          height: 7
+        },
+        endElement: {
+          pe: "1"
+        }
+      },
       md: {
         item: {
           fontSize: "sm"
         },
         button: {
-          borderRadius: "md",
-          px: 2,
+          borderRadius: "control.md",
+          px: 3,
           height: 8
         },
         endElement: {
           pe: "1"
         }
+      },
+      lg: {
+        item: {
+          fontSize: "sm"
+        },
+        button: {
+          borderRadius: "control.lg",
+          px: 3,
+          height: 10
+        },
+        endElement: {
+          pe: "1"
+        }
       }
     }
   },
@@ -3514,8 +4077,8 @@ var sidebarNavItemSlotRecipe = (0, import_react37.defineSlotRecipe)({
 });
 
 // src/components/sidebar/sidebar.recipe.ts
-var import_react38 = require("@chakra-ui/react");
-var sidebarSlotRecipe = (0, import_react38.defineSlotRecipe)({
+var import_react43 = require("@chakra-ui/react");
+var sidebarSlotRecipe = (0, import_react43.defineSlotRecipe)({
   className: "sui-sidebar",
   slots: [
     "root",
@@ -3751,11 +4314,11 @@ var sidebarSlotRecipe = (0, import_react38.defineSlotRecipe)({
 });
 
 // src/components/status/status.recipe.ts
-var import_react39 = require("@chakra-ui/react");
-var import_anatomy5 = require("@chakra-ui/react/anatomy");
-var statusSlotRecipe = (0, import_react39.defineSlotRecipe)({
+var import_react44 = require("@chakra-ui/react");
+var import_anatomy10 = require("@chakra-ui/react/anatomy");
+var statusSlotRecipe = (0, import_react44.defineSlotRecipe)({
   className: "chakra-status",
-  slots: import_anatomy5.statusAnatomy.keys(),
+  slots: import_anatomy10.statusAnatomy.keys(),
   base: {
     root: {
       colorPalette: "gray",
@@ -3797,15 +4360,15 @@ var statusSlotRecipe = (0, import_react39.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(),
+var import_react45 = require("@chakra-ui/react");
+var import_anatomy11 = require("@chakra-ui/react/anatomy");
+var tabsSlotRecipe = (0, import_react45.defineSlotRecipe)({
+  slots: import_anatomy11.tabsAnatomy.keys(),
   className: "chakra-tabs",
   base: {
     root: {
       colorPalette: "gray",
-      "--tabs-trigger-radius": "radii.md",
+      "--tabs-trigger-radius": "radii.control.md",
       position: "relative",
       _horizontal: {
         display: "block"
@@ -3997,6 +4560,23 @@ var tabsSlotRecipe = (0, import_react40.defineSlotRecipe)({
           }
         }
       },
+      ghost: {
+        list: {
+          gap: 2
+        },
+        trigger: {
+          borderRadius: "var(--tabs-trigger-radius)",
+          color: "fg.muted",
+          _hover: {
+            bg: "bg.muted",
+            color: "fg.subtle"
+          },
+          _selected: {
+            bg: "colorPalette.subtle !important",
+            color: "colorPalette.fg !important"
+          }
+        }
+      },
       enclosed: {
         list: {
           bg: "bg.muted",
@@ -4094,12 +4674,12 @@ var tabsSlotRecipe = (0, import_react40.defineSlotRecipe)({
 });
 
 // src/components/tag/tag.recipe.ts
-var import_react41 = require("@chakra-ui/react");
-var import_anatomy7 = require("@chakra-ui/react/anatomy");
+var import_react46 = require("@chakra-ui/react");
+var import_anatomy12 = require("@chakra-ui/react/anatomy");
 var _a;
 var badgeVariant = (_a = badgeRecipe.variants) == null ? void 0 : _a.variant;
-var tagSlotRecipe = (0, import_react41.defineSlotRecipe)({
-  slots: import_anatomy7.tagAnatomy.keys(),
+var tagSlotRecipe = (0, import_react46.defineSlotRecipe)({
+  slots: import_anatomy12.tagAnatomy.keys(),
   className: "chakra-tag",
   base: {
     root: {
@@ -4250,10 +4830,10 @@ var tagSlotRecipe = (0, import_react41.defineSlotRecipe)({
 });
 
 // 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(),
+var import_react47 = require("@chakra-ui/react");
+var import_anatomy13 = require("@chakra-ui/react/anatomy");
+var toastSlotRecipe = (0, import_react47.defineSlotRecipe)({
+  slots: import_anatomy13.toastAnatomy.keys(),
   className: "chakra-toast",
   base: {
     root: {
@@ -4341,12 +4921,66 @@ var toastSlotRecipe = (0, import_react42.defineSlotRecipe)({
   }
 });
 
+// src/components/tooltip/tooltip.recipe.ts
+var import_react48 = require("@chakra-ui/react");
+var import_anatomy14 = require("@chakra-ui/react/anatomy");
+var tooltipSlotRecipe = (0, import_react48.defineSlotRecipe)({
+  slots: import_anatomy14.tooltipAnatomy.keys(),
+  className: "chakra-tooltip",
+  base: {
+    content: {
+      "--tooltip-bg": "colors.bg",
+      display: "flex",
+      alignItems: "center",
+      bg: "var(--tooltip-bg)",
+      color: "fg",
+      px: "2.5",
+      py: "1",
+      borderRadius: "l2",
+      fontWeight: "medium",
+      textStyle: "xs",
+      boxShadow: "md",
+      maxW: "xs",
+      zIndex: "tooltip",
+      transformOrigin: "var(--transform-origin)",
+      _open: {
+        animationStyle: "scale-fade-in",
+        animationDuration: "fast"
+      },
+      _closed: {
+        animationStyle: "scale-fade-out",
+        animationDuration: "fast"
+      }
+    },
+    arrow: {
+      "--arrow-size": "sizes.2",
+      "--arrow-background": "var(--tooltip-bg)",
+      zIndex: "-1"
+    },
+    arrowTip: {
+      borderTopWidth: "1px",
+      borderInlineStartWidth: "1px",
+      borderColor: "var(--tooltip-bg)"
+    }
+  },
+  variants: {
+    variant: {
+      inverted: {
+        content: {
+          "--tooltip-bg": "colors.bg.inverted",
+          color: "fg.inverted"
+        }
+      }
+    }
+  }
+});
+
 // src/theme/recipes/chakra/accordion.ts
-var import_react43 = require("@chakra-ui/react");
-var import_anatomy9 = require("@chakra-ui/react/anatomy");
-var accordionSlotRecipe = (0, import_react43.defineSlotRecipe)({
+var import_react49 = require("@chakra-ui/react");
+var import_anatomy15 = require("@chakra-ui/react/anatomy");
+var accordionSlotRecipe = (0, import_react49.defineSlotRecipe)({
   className: "chakra-accordion",
-  slots: import_anatomy9.accordionAnatomy.keys(),
+  slots: import_anatomy15.accordionAnatomy.keys(),
   base: {
     root: {
       width: "full",
@@ -4482,11 +5116,11 @@ var accordionSlotRecipe = (0, import_react43.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/action-bar.ts
-var import_react44 = require("@chakra-ui/react");
-var import_anatomy10 = require("@chakra-ui/react/anatomy");
-var actionBarSlotRecipe = (0, import_react44.defineSlotRecipe)({
+var import_react50 = require("@chakra-ui/react");
+var import_anatomy16 = require("@chakra-ui/react/anatomy");
+var actionBarSlotRecipe = (0, import_react50.defineSlotRecipe)({
   className: "chakra-action-bar",
-  slots: import_anatomy10.actionBarAnatomy.keys(),
+  slots: import_anatomy16.actionBarAnatomy.keys(),
   base: {
     positioner: {
       position: "fixed",
@@ -4540,10 +5174,10 @@ var actionBarSlotRecipe = (0, import_react44.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/alert.ts
-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(),
+var import_react51 = require("@chakra-ui/react");
+var import_anatomy17 = require("@chakra-ui/react/anatomy");
+var alertSlotRecipe = (0, import_react51.defineSlotRecipe)({
+  slots: import_anatomy17.alertAnatomy.keys(),
   className: "chakra-alert",
   base: {
     root: {
@@ -4689,11 +5323,11 @@ var alertSlotRecipe = (0, import_react45.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/blockquote.ts
-var import_react46 = require("@chakra-ui/react");
-var import_anatomy12 = require("@chakra-ui/react/anatomy");
-var blockquoteSlotRecipe = (0, import_react46.defineSlotRecipe)({
+var import_react52 = require("@chakra-ui/react");
+var import_anatomy18 = require("@chakra-ui/react/anatomy");
+var blockquoteSlotRecipe = (0, import_react52.defineSlotRecipe)({
   className: "chakra-blockquote",
-  slots: import_anatomy12.blockquoteAnatomy.keys(),
+  slots: import_anatomy18.blockquoteAnatomy.keys(),
   base: {
     root: {
       position: "relative",
@@ -4768,11 +5402,11 @@ var blockquoteSlotRecipe = (0, import_react46.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/breadcrumb.ts
-var import_react47 = require("@chakra-ui/react");
-var import_anatomy13 = require("@chakra-ui/react/anatomy");
-var breadcrumbSlotRecipe = (0, import_react47.defineSlotRecipe)({
+var import_react53 = require("@chakra-ui/react");
+var import_anatomy19 = require("@chakra-ui/react/anatomy");
+var breadcrumbSlotRecipe = (0, import_react53.defineSlotRecipe)({
   className: "chakra-breadcrumb",
-  slots: import_anatomy13.breadcrumbAnatomy.keys(),
+  slots: import_anatomy19.breadcrumbAnatomy.keys(),
   base: {
     list: {
       display: "flex",
@@ -4860,11 +5494,11 @@ var breadcrumbSlotRecipe = (0, import_react47.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/card.ts
-var import_react48 = require("@chakra-ui/react");
-var import_anatomy14 = require("@chakra-ui/react/anatomy");
-var cardSlotRecipe = (0, import_react48.defineSlotRecipe)({
+var import_react54 = require("@chakra-ui/react");
+var import_anatomy20 = require("@chakra-ui/react/anatomy");
+var cardSlotRecipe = (0, import_react54.defineSlotRecipe)({
   className: "chakra-card",
-  slots: import_anatomy14.cardAnatomy.keys(),
+  slots: import_anatomy20.cardAnatomy.keys(),
   base: {
     root: {
       display: "flex",
@@ -4982,11 +5616,11 @@ var cardSlotRecipe = (0, import_react48.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/checkbox.ts
-var import_react49 = require("@chakra-ui/react");
-var import_anatomy15 = require("@chakra-ui/react/anatomy");
+var import_react55 = require("@chakra-ui/react");
+var import_anatomy21 = require("@chakra-ui/react/anatomy");
 var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
-var checkboxSlotRecipe = (0, import_react49.defineSlotRecipe)({
-  slots: import_anatomy15.checkboxAnatomy.keys(),
+var checkboxSlotRecipe = (0, import_react55.defineSlotRecipe)({
+  slots: import_anatomy21.checkboxAnatomy.keys(),
   className: "chakra-checkbox",
   base: {
     root: {
@@ -5047,11 +5681,11 @@ var checkboxSlotRecipe = (0, import_react49.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/checkbox-card.ts
-var import_react50 = require("@chakra-ui/react");
-var import_anatomy16 = require("@chakra-ui/react/anatomy");
+var import_react56 = require("@chakra-ui/react");
+var import_anatomy22 = require("@chakra-ui/react/anatomy");
 var _a3, _b2, _c2, _d2, _e2, _f2, _g2;
-var checkboxCardSlotRecipe = (0, import_react50.defineSlotRecipe)({
-  slots: import_anatomy16.checkboxCardAnatomy.keys(),
+var checkboxCardSlotRecipe = (0, import_react56.defineSlotRecipe)({
+  slots: import_anatomy22.checkboxCardAnatomy.keys(),
   className: "chakra-checkbox-card",
   base: {
     root: {
@@ -5227,141 +5861,61 @@ var checkboxCardSlotRecipe = (0, import_react50.defineSlotRecipe)({
         root: { "--checkbox-card-align": "flex-end" },
         content: { textAlign: "end" }
       },
-      center: {
-        root: { "--checkbox-card-align": "center" },
-        content: { textAlign: "center" }
-      }
-    },
-    orientation: {
-      vertical: {
-        control: { flexDirection: "column" }
-      },
-      horizontal: {
-        control: { flexDirection: "row" }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "outline",
-    align: "start",
-    orientation: "horizontal"
-  }
-});
-
-// src/theme/recipes/chakra/collapsible.ts
-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: {
-      _open: {
-        animationName: "expand-height, fade-in",
-        animationDuration: "moderate"
-      },
-      _closed: {
-        animationName: "collapse-height, fade-out",
-        animationDuration: "moderate",
-        overflow: "hidden"
-      }
-    }
-  }
-});
-
-// src/theme/recipes/chakra/data-list.ts
-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: {
-      color: "fg.muted",
-      display: "flex",
-      alignItems: "center",
-      gap: "1"
-    },
-    itemValue: {
-      display: "flex",
-      minWidth: "0",
-      flex: "1"
-    }
-  },
-  variants: {
-    orientation: {
-      horizontal: {
-        root: {
-          display: "flex",
-          flexDirection: "column"
-        },
-        item: {
-          display: "inline-flex",
-          alignItems: "center",
-          gap: "4"
-        },
-        itemLabel: {
-          minWidth: "120px"
-        }
-      },
-      vertical: {
-        root: {
-          display: "flex",
-          flexDirection: "column"
-        },
-        item: {
-          display: "flex",
-          flexDirection: "column",
-          gap: "1"
-        }
-      }
-    },
-    size: {
-      sm: {
-        root: {
-          gap: "3"
-        },
-        item: {
-          textStyle: "xs"
-        }
-      },
-      md: {
-        root: {
-          gap: "4"
-        },
-        item: {
-          textStyle: "sm"
-        }
+      center: {
+        root: { "--checkbox-card-align": "center" },
+        content: { textAlign: "center" }
+      }
+    },
+    orientation: {
+      vertical: {
+        control: { flexDirection: "column" }
       },
-      lg: {
-        root: {
-          gap: "5"
-        },
-        item: {
-          textStyle: "md"
-        }
+      horizontal: {
+        control: { flexDirection: "row" }
       }
     }
   },
   defaultVariants: {
     size: "md",
-    orientation: "vertical"
+    variant: "outline",
+    align: "start",
+    orientation: "horizontal"
+  }
+});
+
+// src/theme/recipes/chakra/collapsible.ts
+var import_react57 = require("@chakra-ui/react");
+var import_anatomy23 = require("@chakra-ui/react/anatomy");
+var collapsibleSlotRecipe = (0, import_react57.defineSlotRecipe)({
+  slots: import_anatomy23.collapsibleAnatomy.keys(),
+  className: "chakra-collapsible",
+  base: {
+    content: {
+      _open: {
+        animationName: "expand-height, fade-in",
+        animationDuration: "moderate"
+      },
+      _closed: {
+        animationName: "collapse-height, fade-out",
+        animationDuration: "moderate",
+        overflow: "hidden"
+      }
+    }
   }
 });
 
 // src/theme/recipes/chakra/editable.ts
-var import_react53 = require("@chakra-ui/react");
-var import_anatomy19 = require("@chakra-ui/react/anatomy");
-var sharedStyles = (0, import_react53.defineStyle)({
+var import_react58 = require("@chakra-ui/react");
+var import_anatomy24 = require("@chakra-ui/react/anatomy");
+var sharedStyles = (0, import_react58.defineStyle)({
   fontSize: "inherit",
   fontWeight: "inherit",
   textAlign: "inherit",
   bg: "transparent",
   borderRadius: "l2"
 });
-var editableSlotRecipe = (0, import_react53.defineSlotRecipe)({
-  slots: import_anatomy19.editableAnatomy.keys(),
+var editableSlotRecipe = (0, import_react58.defineSlotRecipe)({
+  slots: import_anatomy24.editableAnatomy.keys(),
   className: "chakra-editable",
   base: {
     root: {
@@ -5435,104 +5989,12 @@ var editableSlotRecipe = (0, import_react53.defineSlotRecipe)({
   }
 });
 
-// src/theme/recipes/chakra/empty-state.ts
-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: {
-      width: "full",
-      height: "full",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    content: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    indicator: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      color: "fg.subtle",
-      _icon: {
-        boxSize: "1em"
-      }
-    },
-    title: {
-      fontWeight: "semibold"
-    },
-    description: {
-      textStyle: "sm",
-      color: "fg.muted"
-    }
-  },
-  variants: {
-    size: {
-      sm: {
-        root: {
-          px: "4",
-          py: "6"
-        },
-        title: {
-          textStyle: "md"
-        },
-        content: {
-          gap: "4"
-        },
-        indicator: {
-          textStyle: "2xl"
-        }
-      },
-      md: {
-        root: {
-          px: "8",
-          py: "12"
-        },
-        title: {
-          textStyle: "lg"
-        },
-        content: {
-          gap: "6"
-        },
-        indicator: {
-          textStyle: "4xl"
-        }
-      },
-      lg: {
-        root: {
-          px: "12",
-          py: "16"
-        },
-        title: {
-          textStyle: "xl"
-        },
-        content: {
-          gap: "8"
-        },
-        indicator: {
-          textStyle: "6xl"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});
-
 // src/theme/recipes/chakra/field.ts
-var import_react55 = require("@chakra-ui/react");
-var import_anatomy21 = require("@chakra-ui/react/anatomy");
-var fieldSlotRecipe = (0, import_react55.defineSlotRecipe)({
+var import_react59 = require("@chakra-ui/react");
+var import_anatomy25 = require("@chakra-ui/react/anatomy");
+var fieldSlotRecipe = (0, import_react59.defineSlotRecipe)({
   className: "chakra-field",
-  slots: import_anatomy21.fieldAnatomy.keys(),
+  slots: import_anatomy25.fieldAnatomy.keys(),
   base: {
     requiredIndicator: {
       color: "fg.error",
@@ -5573,138 +6035,42 @@ var fieldSlotRecipe = (0, import_react55.defineSlotRecipe)({
     orientation: {
       vertical: {
         root: {
-          flexDirection: "column",
-          alignItems: "flex-start"
-        }
-      },
-      horizontal: {
-        root: {
-          display: "grid",
-          gridTemplateColumns: "var(--field-label-width, 8rem) 1fr",
-          alignItems: "center",
-          "&:has(textarea)": {
-            alignItems: "flex-start",
-            "& label": {
-              pt: 1.5
-            }
-          }
-        },
-        helperText: {
-          gridColumn: 2
-        },
-        errorText: {
-          gridColumn: 2
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    orientation: "vertical"
-  }
-});
-
-// src/theme/recipes/chakra/file-upload.ts
-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_anatomy22.fileUploadAnatomy.keys(),
-  base: {
-    root: {
-      display: "flex",
-      flexDirection: "column",
-      gap: "4",
-      width: "100%",
-      alignItems: "flex-start"
-    },
-    label: {
-      fontWeight: "medium",
-      textStyle: "sm"
-    },
-    dropzone: {
-      background: "bg",
-      borderRadius: "l3",
-      borderWidth: "2px",
-      borderStyle: "dashed",
-      display: "flex",
-      alignItems: "center",
-      flexDirection: "column",
-      gap: "4",
-      justifyContent: "center",
-      minHeight: "2xs",
-      px: "3",
-      py: "2",
-      transition: "backgrounds",
-      focusVisibleRing: "outside",
-      _hover: {
-        bg: "bg.subtle"
-      },
-      _dragging: {
-        bg: "colorPalette.subtle",
-        borderStyle: "solid",
-        borderColor: "colorPalette.solid"
-      }
-    },
-    dropzoneContent: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      textAlign: "center",
-      gap: "1",
-      textStyle: "sm"
-    },
-    item: {
-      textStyle: "sm",
-      animationName: "fade-in",
-      animationDuration: "moderate",
-      background: "bg",
-      borderRadius: "l2",
-      borderWidth: "1px",
-      width: "100%",
-      display: "flex",
-      alignItems: "center",
-      gap: "3",
-      p: "4"
-    },
-    itemGroup: {
-      width: "100%",
-      display: "flex",
-      flexDirection: "column",
-      gap: "3"
-    },
-    itemName: {
-      color: "fg",
-      fontWeight: "medium",
-      lineClamp: "1"
-    },
-    itemContent: {
-      display: "flex",
-      flexDirection: "column",
-      gap: "0.5",
-      flex: "1"
-    },
-    itemSizeText: {
-      color: "fg.muted",
-      textStyle: "xs"
-    },
-    itemDeleteTrigger: {
-      alignSelf: "flex-start"
-    },
-    itemPreviewImage: {
-      width: "10",
-      height: "10",
-      objectFit: "scale-down"
+          flexDirection: "column",
+          alignItems: "flex-start"
+        }
+      },
+      horizontal: {
+        root: {
+          display: "grid",
+          gridTemplateColumns: "var(--field-label-width, 8rem) 1fr",
+          alignItems: "center",
+          "&:has(textarea)": {
+            alignItems: "flex-start",
+            "& label": {
+              pt: 1.5
+            }
+          }
+        },
+        helperText: {
+          gridColumn: 2
+        },
+        errorText: {
+          gridColumn: 2
+        }
+      }
     }
   },
-  defaultVariants: {}
+  defaultVariants: {
+    orientation: "vertical"
+  }
 });
 
 // src/theme/recipes/chakra/hover-card.ts
-var import_react57 = require("@chakra-ui/react");
-var import_anatomy23 = require("@chakra-ui/react/anatomy");
-var hoverCardSlotRecipe = (0, import_react57.defineSlotRecipe)({
+var import_react60 = require("@chakra-ui/react");
+var import_anatomy26 = require("@chakra-ui/react/anatomy");
+var hoverCardSlotRecipe = (0, import_react60.defineSlotRecipe)({
   className: "chakra-hover-card",
-  slots: import_anatomy23.hoverCardAnatomy.keys(),
+  slots: import_anatomy26.hoverCardAnatomy.keys(),
   base: {
     content: {
       position: "relative",
@@ -5767,11 +6133,11 @@ var hoverCardSlotRecipe = (0, import_react57.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/list.ts
-var import_react58 = require("@chakra-ui/react");
-var import_anatomy24 = require("@chakra-ui/react/anatomy");
-var listSlotRecipe = (0, import_react58.defineSlotRecipe)({
+var import_react61 = require("@chakra-ui/react");
+var import_anatomy27 = require("@chakra-ui/react/anatomy");
+var listSlotRecipe = (0, import_react61.defineSlotRecipe)({
   className: "chakra-list",
-  slots: import_anatomy24.listAnatomy.keys(),
+  slots: import_anatomy27.listAnatomy.keys(),
   base: {
     root: {
       display: "flex",
@@ -5830,139 +6196,16 @@ var listSlotRecipe = (0, import_react58.defineSlotRecipe)({
   }
 });
 
-// src/theme/recipes/chakra/menu.ts
-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_anatomy25.menuAnatomy.keys(),
-  base: {
-    content: {
-      outline: 0,
-      bg: "bg.panel",
-      boxShadow: "lg",
-      color: "fg",
-      maxHeight: "var(--available-height)",
-      "--menu-z-index": "zIndex.dropdown",
-      zIndex: "calc(var(--menu-z-index) + var(--layer-index, 0))",
-      borderRadius: "l2",
-      overflow: "hidden",
-      _open: {
-        animationStyle: "slide-fade-in",
-        animationDuration: "fast"
-      },
-      _closed: {
-        animationStyle: "slide-fade-out",
-        animationDuration: "faster"
-      }
-    },
-    item: {
-      textDecoration: "none",
-      color: "fg",
-      userSelect: "none",
-      borderRadius: "l3",
-      width: "100%",
-      display: "flex",
-      cursor: "menuitem",
-      alignItems: "center",
-      textAlign: "start",
-      position: "relative",
-      flex: "0 0 auto",
-      outline: 0,
-      _disabled: {
-        layerStyle: "disabled"
-      }
-    },
-    itemText: {
-      flex: "1"
-    },
-    itemGroupLabel: {
-      px: "2",
-      py: "1.5",
-      fontWeight: "semibold",
-      textStyle: "sm"
-    },
-    indicator: {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      flexShrink: "0"
-    },
-    itemCommand: {
-      opacity: "0.6",
-      textStyle: "xs",
-      ms: "auto",
-      ps: "4",
-      letterSpacing: "widest"
-    },
-    separator: {
-      height: "1px",
-      bg: "bg.muted",
-      my: "1",
-      mx: "-1"
-    }
-  },
-  variants: {
-    variant: {
-      subtle: {
-        item: {
-          _highlighted: {
-            bg: "bg.subtle"
-          }
-        }
-      },
-      solid: {
-        item: {
-          _highlighted: {
-            bg: "colorPalette.solid",
-            color: "colorPalette.contrast"
-          }
-        }
-      }
-    },
-    size: {
-      sm: {
-        content: {
-          minW: "8rem",
-          padding: "1"
-        },
-        item: {
-          gap: "1",
-          textStyle: "xs",
-          py: "1",
-          px: "1.5"
-        }
-      },
-      md: {
-        content: {
-          minW: "8rem",
-          padding: "1.5"
-        },
-        item: {
-          gap: "2",
-          textStyle: "sm",
-          py: "1.5",
-          px: "2"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "subtle"
-  }
-});
-
 // src/theme/recipes/chakra/native-select.ts
-var import_react61 = require("@chakra-ui/react");
-var import_anatomy27 = require("@chakra-ui/react/anatomy");
+var import_react63 = require("@chakra-ui/react");
+var import_anatomy29 = require("@chakra-ui/react/anatomy");
 
 // src/theme/recipes/chakra/select.ts
-var import_react60 = require("@chakra-ui/react");
-var import_anatomy26 = require("@chakra-ui/react/anatomy");
-var selectSlotRecipe = (0, import_react60.defineSlotRecipe)({
+var import_react62 = require("@chakra-ui/react");
+var import_anatomy28 = require("@chakra-ui/react/anatomy");
+var selectSlotRecipe = (0, import_react62.defineSlotRecipe)({
   className: "chakra-select",
-  slots: import_anatomy26.selectAnatomy.keys(),
+  slots: import_anatomy28.selectAnatomy.keys(),
   base: {
     root: {
       display: "flex",
@@ -6245,9 +6488,9 @@ var selectSlotRecipe = (0, import_react60.defineSlotRecipe)({
 
 // src/theme/recipes/chakra/native-select.ts
 var _a4, _b3;
-var nativeSelectSlotRecipe = (0, import_react61.defineSlotRecipe)({
+var nativeSelectSlotRecipe = (0, import_react63.defineSlotRecipe)({
   className: "chakra-native-select",
-  slots: import_anatomy27.nativeSelectAnatomy.keys(),
+  slots: import_anatomy29.nativeSelectAnatomy.keys(),
   base: {
     root: {
       height: "fit-content",
@@ -6378,8 +6621,8 @@ var nativeSelectSlotRecipe = (0, import_react61.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/number-input.ts
-var import_react62 = require("@chakra-ui/react");
-var import_anatomy28 = require("@chakra-ui/react/anatomy");
+var import_react64 = require("@chakra-ui/react");
+var import_anatomy30 = require("@chakra-ui/react/anatomy");
 
 // src/theme/utils.ts
 function mapEntries(obj, f) {
@@ -6393,12 +6636,9 @@ function mapEntries(obj, f) {
 function scaleToken(value) {
   return `calc(${value} * var(--scale-factor))`;
 }
-function radiusToken(value) {
-  return `calc(${value} * var(--scale-factor) * var(--radius-factor))`;
-}
 
 // src/theme/recipes/chakra/number-input.ts
-var triggerStyle = (0, import_react62.defineStyle)({
+var triggerStyle = (0, import_react64.defineStyle)({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
@@ -6422,9 +6662,9 @@ var triggerStyle = (0, import_react62.defineStyle)({
     bg: "bg.emphasized"
   }
 });
-var numberInputSlotRecipe = (0, import_react62.defineSlotRecipe)({
+var numberInputSlotRecipe = (0, import_react64.defineSlotRecipe)({
   className: "chakra-number-input",
-  slots: import_anatomy28.numberInputAnatomy.keys(),
+  slots: import_anatomy30.numberInputAnatomy.keys(),
   base: {
     root: {
       position: "relative",
@@ -6507,12 +6747,12 @@ var numberInputSlotRecipe = (0, import_react62.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/pin-input.ts
-var import_react63 = require("@chakra-ui/react");
-var import_anatomy29 = require("@chakra-ui/react/anatomy");
+var import_react65 = require("@chakra-ui/react");
+var import_anatomy31 = require("@chakra-ui/react/anatomy");
 var { variants: variants2, defaultVariants: defaultVariants2 } = inputRecipe;
-var pinInputSlotRecipe = (0, import_react63.defineSlotRecipe)({
+var pinInputSlotRecipe = (0, import_react65.defineSlotRecipe)({
   className: "chakra-pin-input",
-  slots: import_anatomy29.pinInputAnatomy.keys(),
+  slots: import_anatomy31.pinInputAnatomy.keys(),
   base: {
     input: {
       ...inputRecipe.base,
@@ -6529,107 +6769,20 @@ var pinInputSlotRecipe = (0, import_react63.defineSlotRecipe)({
           px: 0
         }
       }
-    ]),
-    variant: mapEntries(variants2.variant, (key, value) => [
-      key,
-      { input: value }
-    ])
-  },
-  defaultVariants: defaultVariants2
-});
-
-// src/theme/recipes/chakra/popover.ts
-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_anatomy30.popoverAnatomy.keys(),
-  base: {
-    content: {
-      position: "relative",
-      display: "flex",
-      flexDirection: "column",
-      textStyle: "sm",
-      "--popover-bg": "colors.bg.panel",
-      bg: "var(--popover-bg)",
-      boxShadow: "lg",
-      "--popover-size": "sizes.xs",
-      "--popover-mobile-size": "calc(100dvw - 1rem)",
-      width: {
-        base: "min(var(--popover-mobile-size), var(--popover-size))",
-        sm: "var(--popover-size)"
-      },
-      borderRadius: "l3",
-      "--popover-z-index": "zIndex.popover",
-      zIndex: "calc(var(--popover-z-index) + var(--layer-index, 0))",
-      outline: "0",
-      transformOrigin: "var(--transform-origin)",
-      _open: {
-        animationStyle: "scale-fade-in",
-        animationDuration: "fast"
-      },
-      _closed: {
-        animationStyle: "scale-fade-out",
-        animationDuration: "faster"
-      }
-    },
-    header: {
-      paddingInline: "var(--popover-padding)",
-      paddingTop: "var(--popover-padding)"
-    },
-    body: {
-      padding: "var(--popover-padding)",
-      flex: "1"
-    },
-    footer: {
-      display: "flex",
-      alignItems: "center",
-      paddingInline: "var(--popover-padding)",
-      paddingBottom: "var(--popover-padding)"
-    },
-    arrow: {
-      "--arrow-size": "sizes.3",
-      "--arrow-background": "var(--popover-bg)"
-    },
-    arrowTip: {
-      borderTopWidth: "1px",
-      borderInlineStartWidth: "1px"
-    }
-  },
-  variants: {
-    size: {
-      xs: {
-        content: {
-          "--popover-padding": "spacing.3"
-        }
-      },
-      sm: {
-        content: {
-          "--popover-padding": "spacing.4"
-        }
-      },
-      md: {
-        content: {
-          "--popover-padding": "spacing.5"
-        }
-      },
-      lg: {
-        content: {
-          "--popover-padding": "spacing.6"
-        }
-      }
-    }
+    ]),
+    variant: mapEntries(variants2.variant, (key, value) => [
+      key,
+      { input: value }
+    ])
   },
-  defaultVariants: {
-    size: "md"
-  }
+  defaultVariants: defaultVariants2
 });
 
 // src/theme/recipes/chakra/progress.ts
-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(),
+var import_react66 = require("@chakra-ui/react");
+var import_anatomy32 = require("@chakra-ui/react/anatomy");
+var progressSlotRecipe = (0, import_react66.defineSlotRecipe)({
+  slots: import_anatomy32.progressAnatomy.keys(),
   className: "chakra-progress",
   base: {
     root: {
@@ -6748,11 +6901,11 @@ var progressSlotRecipe = (0, import_react65.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/progress-circle.ts
-var import_react66 = require("@chakra-ui/react");
-var import_anatomy32 = require("@chakra-ui/react/anatomy");
-var progressCircleSlotRecipe = (0, import_react66.defineSlotRecipe)({
+var import_react67 = require("@chakra-ui/react");
+var import_anatomy33 = require("@chakra-ui/react/anatomy");
+var progressCircleSlotRecipe = (0, import_react67.defineSlotRecipe)({
   className: "chakra-progress-circle",
-  slots: import_anatomy32.progressAnatomy.keys(),
+  slots: import_anatomy33.progressAnatomy.keys(),
   base: {
     root: {
       display: "inline-flex",
@@ -6841,12 +6994,12 @@ var progressCircleSlotRecipe = (0, import_react66.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/radio-card.ts
-var import_react67 = require("@chakra-ui/react");
-var import_anatomy33 = require("@chakra-ui/react/anatomy");
+var import_react68 = require("@chakra-ui/react");
+var import_anatomy34 = require("@chakra-ui/react/anatomy");
 var _a5, _b4, _c3, _d3, _e3, _f3, _g3;
-var radioCardSlotRecipe = (0, import_react67.defineSlotRecipe)({
+var radioCardSlotRecipe = (0, import_react68.defineSlotRecipe)({
   className: "chakra-radio-card",
-  slots: import_anatomy33.radioCardAnatomy.keys(),
+  slots: import_anatomy34.radioCardAnatomy.keys(),
   base: {
     root: {
       display: "flex",
@@ -7052,12 +7205,12 @@ var radioCardSlotRecipe = (0, import_react67.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/radio-group.ts
-var import_react68 = require("@chakra-ui/react");
-var import_anatomy34 = require("@chakra-ui/react/anatomy");
+var import_react69 = require("@chakra-ui/react");
+var import_anatomy35 = require("@chakra-ui/react/anatomy");
 var _a6, _b5, _c4, _d4, _e4, _f4, _g4, _h2, _i2, _j2, _k2, _l2, _m2, _n2;
-var radioGroupSlotRecipe = (0, import_react68.defineSlotRecipe)({
+var radioGroupSlotRecipe = (0, import_react69.defineSlotRecipe)({
   className: "chakra-radio-group",
-  slots: import_anatomy34.radioGroupAnatomy.keys(),
+  slots: import_anatomy35.radioGroupAnatomy.keys(),
   base: {
     item: {
       display: "inline-flex",
@@ -7115,11 +7268,11 @@ var radioGroupSlotRecipe = (0, import_react68.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/rating-group.ts
-var import_react69 = require("@chakra-ui/react");
-var import_anatomy35 = require("@chakra-ui/react/anatomy");
-var ratingGroupSlotRecipe = (0, import_react69.defineSlotRecipe)({
+var import_react70 = require("@chakra-ui/react");
+var import_anatomy36 = require("@chakra-ui/react/anatomy");
+var ratingGroupSlotRecipe = (0, import_react70.defineSlotRecipe)({
   className: "chakra-rating-group",
-  slots: import_anatomy35.ratingGroupAnatomy.keys(),
+  slots: import_anatomy36.ratingGroupAnatomy.keys(),
   base: {
     root: {
       display: "inline-flex"
@@ -7200,11 +7353,11 @@ var ratingGroupSlotRecipe = (0, import_react69.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/slider.ts
-var import_react70 = require("@chakra-ui/react");
-var import_anatomy36 = require("@chakra-ui/react/anatomy");
-var sliderSlotRecipe = (0, import_react70.defineSlotRecipe)({
+var import_react71 = require("@chakra-ui/react");
+var import_anatomy37 = require("@chakra-ui/react/anatomy");
+var sliderSlotRecipe = (0, import_react71.defineSlotRecipe)({
   className: "chakra-slider",
-  slots: import_anatomy36.sliderAnatomy.keys(),
+  slots: import_anatomy37.sliderAnatomy.keys(),
   base: {
     root: {
       display: "flex",
@@ -7377,11 +7530,11 @@ var sliderSlotRecipe = (0, import_react70.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/stat.ts
-var import_react71 = require("@chakra-ui/react");
-var import_anatomy37 = require("@chakra-ui/react/anatomy");
-var statSlotRecipe = (0, import_react71.defineSlotRecipe)({
+var import_react72 = require("@chakra-ui/react");
+var import_anatomy38 = require("@chakra-ui/react/anatomy");
+var statSlotRecipe = (0, import_react72.defineSlotRecipe)({
   className: "chakra-stat",
-  slots: import_anatomy37.statAnatomy.keys(),
+  slots: import_anatomy38.statAnatomy.keys(),
   base: {
     root: {
       display: "flex",
@@ -7455,11 +7608,11 @@ var statSlotRecipe = (0, import_react71.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/steps.ts
-var import_react72 = require("@chakra-ui/react");
-var import_anatomy38 = require("@chakra-ui/react/anatomy");
-var stepsSlotRecipe = (0, import_react72.defineSlotRecipe)({
+var import_react73 = require("@chakra-ui/react");
+var import_anatomy39 = require("@chakra-ui/react/anatomy");
+var stepsSlotRecipe = (0, import_react73.defineSlotRecipe)({
   className: "chakra-steps",
-  slots: import_anatomy38.stepsAnatomy.keys(),
+  slots: import_anatomy39.stepsAnatomy.keys(),
   base: {
     root: {
       display: "flex",
@@ -7670,10 +7823,10 @@ var stepsSlotRecipe = (0, import_react72.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/switch.ts
-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(),
+var import_react74 = require("@chakra-ui/react");
+var import_anatomy40 = require("@chakra-ui/react/anatomy");
+var switchSlotRecipe = (0, import_react74.defineSlotRecipe)({
+  slots: import_anatomy40.switchAnatomy.keys(),
   className: "chakra-switch",
   base: {
     root: {
@@ -7828,11 +7981,11 @@ var switchSlotRecipe = (0, import_react73.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/table.ts
-var import_react74 = require("@chakra-ui/react");
-var import_anatomy40 = require("@chakra-ui/react/anatomy");
-var tableSlotRecipe = (0, import_react74.defineSlotRecipe)({
+var import_react75 = require("@chakra-ui/react");
+var import_anatomy41 = require("@chakra-ui/react/anatomy");
+var tableSlotRecipe = (0, import_react75.defineSlotRecipe)({
   className: "chakra-table",
-  slots: import_anatomy40.tableAnatomy.keys(),
+  slots: import_anatomy41.tableAnatomy.keys(),
   base: {
     root: {
       fontVariantNumeric: "lining-nums tabular-nums",
@@ -7991,10 +8144,10 @@ var tableSlotRecipe = (0, import_react74.defineSlotRecipe)({
 });
 
 // src/theme/recipes/chakra/timeline.ts
-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(),
+var import_react76 = require("@chakra-ui/react");
+var import_anatomy42 = require("@chakra-ui/react/anatomy");
+var timelineSlotRecipe = (0, import_react76.defineSlotRecipe)({
+  slots: import_anatomy42.timelineAnatomy.keys(),
   className: "chakra-timeline",
   base: {
     root: {
@@ -8126,60 +8279,6 @@ var timelineSlotRecipe = (0, import_react75.defineSlotRecipe)({
   }
 });
 
-// src/theme/recipes/chakra/tooltip.ts
-var import_react76 = require("@chakra-ui/react");
-var import_anatomy42 = require("@chakra-ui/react/anatomy");
-var tooltipSlotRecipe = (0, import_react76.defineSlotRecipe)({
-  slots: import_anatomy42.tooltipAnatomy.keys(),
-  className: "chakra-tooltip",
-  base: {
-    content: {
-      "--tooltip-bg": "colors.bg",
-      display: "flex",
-      alignItems: "center",
-      bg: "var(--tooltip-bg)",
-      color: "fg",
-      px: "2.5",
-      py: "1",
-      borderRadius: "l2",
-      fontWeight: "medium",
-      textStyle: "xs",
-      boxShadow: "md",
-      maxW: "xs",
-      zIndex: "tooltip",
-      transformOrigin: "var(--transform-origin)",
-      _open: {
-        animationStyle: "scale-fade-in",
-        animationDuration: "fast"
-      },
-      _closed: {
-        animationStyle: "scale-fade-out",
-        animationDuration: "fast"
-      }
-    },
-    arrow: {
-      "--arrow-size": "sizes.2",
-      "--arrow-background": "var(--tooltip-bg)",
-      zIndex: "-1"
-    },
-    arrowTip: {
-      borderTopWidth: "1px",
-      borderInlineStartWidth: "1px",
-      borderColor: "var(--tooltip-bg)"
-    }
-  },
-  variants: {
-    variant: {
-      inverted: {
-        content: {
-          "--tooltip-bg": "colors.bg.inverted",
-          color: "fg.inverted"
-        }
-      }
-    }
-  }
-});
-
 // src/theme/slot-recipes.ts
 var slotRecipes = {
   // Chakra UI Recipes
@@ -8914,17 +9013,17 @@ var lineHeights = import_react91.defineTokens.lineHeights({
 var import_react92 = require("@chakra-ui/react");
 var radii = import_react92.defineTokens.radii({
   "2xs": {
-    value: radiusToken("0.0625rem")
+    value: "0.0625rem"
   },
-  xs: { value: radiusToken("0.125rem") },
-  sm: { value: radiusToken("0.25rem") },
-  md: { value: radiusToken("0.375rem") },
-  lg: { value: radiusToken("0.5rem") },
-  xl: { value: radiusToken("0.75rem") },
-  "2xl": { value: radiusToken("1rem") },
-  "3xl": { value: radiusToken("1.5rem") },
-  "4xl": { value: radiusToken("2rem") },
-  full: { value: "var(--radius-full)" }
+  xs: { value: "0.125rem" },
+  sm: { value: "0.25rem" },
+  md: { value: "0.375rem" },
+  lg: { value: "0.5rem" },
+  xl: { value: "0.75rem" },
+  "2xl": { value: "1rem" },
+  "3xl": { value: "1.5rem" },
+  "4xl": { value: "2rem" },
+  full: { value: "9999px" }
 });
 
 // src/theme/tokens/sizes.ts
@@ -9175,7 +9274,7 @@ defaultConfig.utilities = Object.assign(
 var defaultSystem = (0, import_react97.createSystem)(defaultConfig);
 
 // src/index.ts
-var import_react170 = require("@chakra-ui/react");
+var import_react172 = require("@chakra-ui/react");
 
 // src/provider/sui-provider.tsx
 var React = __toESM(require("react"), 1);
@@ -9489,33 +9588,32 @@ var Key = (props) => {
 };
 
 // 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, {
-  ActionTrigger: () => DialogActionTrigger,
-  Backdrop: () => DialogBackdrop,
-  Body: () => DialogBody,
-  CloseButton: () => DialogCloseButton,
-  CloseTrigger: () => DialogCloseTrigger2,
-  Content: () => DialogContent,
-  Context: () => import_dialog.DialogContext,
-  Description: () => DialogDescription,
-  Footer: () => DialogFooter,
-  Header: () => DialogHeader,
-  Root: () => DialogRoot,
-  Title: () => DialogTitle,
-  Trigger: () => DialogTrigger
-});
+var import_data_list = require("@chakra-ui/react/data-list");
 
 // src/components/dialog/dialog.tsx
+var dialog_exports = {};
+__export(dialog_exports, {
+  ActionTrigger: () => ActionTrigger,
+  Backdrop: () => Backdrop,
+  Body: () => Body,
+  CloseButton: () => CloseButton3,
+  CloseTrigger: () => CloseTrigger,
+  Content: () => Content,
+  Context: () => Context,
+  Description: () => Description,
+  DialogContext: () => import_dialog.DialogContext,
+  Footer: () => Footer,
+  Header: () => Header,
+  Root: () => Root,
+  Title: () => Title,
+  Trigger: () => Trigger
+});
 var import_react115 = require("react");
 var import_react116 = require("@chakra-ui/react");
 var import_dialog = require("@ark-ui/react/dialog");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var DialogContent = (0, import_react115.forwardRef)(
-  function DialogContent2(props, ref) {
+var Content = (0, import_react115.forwardRef)(
+  function DialogContent(props, ref) {
     const {
       children,
       portalled = true,
@@ -9529,83 +9627,176 @@ var DialogContent = (0, import_react115.forwardRef)(
     ] });
   }
 );
-var DialogCloseButton = (0, import_react115.forwardRef)(function DialogCloseTrigger(props, ref) {
+var CloseButton3 = (0, import_react115.forwardRef)(function DialogCloseTrigger(props, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react116.Dialog.CloseTrigger, { position: "absolute", ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CloseButton, { size: "sm", ref, children: props.children }) });
 });
-var DialogCloseTrigger2 = import_react116.Dialog.CloseTrigger;
-var DialogRoot = import_react116.Dialog.Root;
-var DialogFooter = import_react116.Dialog.Footer;
-var DialogHeader = import_react116.Dialog.Header;
-var DialogBody = import_react116.Dialog.Body;
-var DialogBackdrop = import_react116.Dialog.Backdrop;
-var DialogTitle = import_react116.Dialog.Title;
-var DialogDescription = import_react116.Dialog.Description;
-var DialogTrigger = import_react116.Dialog.Trigger;
-var DialogActionTrigger = import_react116.Dialog.ActionTrigger;
-
-// src/components/drawer/namespace.ts
-var namespace_exports2 = {};
-__export(namespace_exports2, {
-  ActionTrigger: () => DrawerActionTrigger,
-  Backdrop: () => DrawerBackdrop,
-  Body: () => DrawerBody,
-  CloseButton: () => DrawerCloseButton,
-  CloseTrigger: () => DrawerCloseTrigger2,
-  Content: () => DrawerContent,
-  Context: () => DrawerContext,
-  Description: () => DrawerDescription,
-  Footer: () => DrawerFooter,
-  Header: () => DrawerHeader,
-  Root: () => DrawerRoot,
-  Title: () => DrawerTitle,
-  Trigger: () => DrawerTrigger
-});
+var CloseTrigger = import_react116.Dialog.CloseTrigger;
+var Root = import_react116.Dialog.Root;
+var Context = import_react116.Dialog.Context;
+var Footer = import_react116.Dialog.Footer;
+var Header = import_react116.Dialog.Header;
+var Body = import_react116.Dialog.Body;
+var Backdrop = import_react116.Dialog.Backdrop;
+var Title = import_react116.Dialog.Title;
+var Description = import_react116.Dialog.Description;
+var Trigger = import_react116.Dialog.Trigger;
+var ActionTrigger = import_react116.Dialog.ActionTrigger;
 
 // src/components/drawer/drawer.tsx
+var drawer_exports = {};
+__export(drawer_exports, {
+  ActionTrigger: () => ActionTrigger2,
+  Backdrop: () => Backdrop2,
+  Body: () => Body2,
+  CloseButton: () => CloseButton4,
+  CloseTrigger: () => CloseTrigger2,
+  Content: () => Content2,
+  Context: () => Context2,
+  Description: () => Description2,
+  Footer: () => Footer2,
+  Header: () => Header2,
+  Root: () => Root2,
+  Title: () => Title2,
+  Trigger: () => Trigger2
+});
 var import_react117 = require("react");
-var import_dialog3 = require("@ark-ui/react/dialog");
+var import_dialog2 = require("@ark-ui/react/dialog");
 var import_react118 = require("@chakra-ui/react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var DrawerContent = (0, import_react117.forwardRef)(
-  function DrawerContent2(props, ref) {
+var Content2 = (0, import_react117.forwardRef)(
+  function DrawerContent(props, ref) {
     const { children, portalled = true, portalRef, offset, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react118.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react118.Drawer.Positioner, { padding: offset, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react118.Drawer.Content, { ref, ...rest, asChild: false, children }) }) });
   }
 );
-var DrawerCloseButton = (0, import_react117.forwardRef)(function DrawerCloseTrigger(props, ref) {
+var CloseButton4 = (0, import_react117.forwardRef)(function DrawerCloseTrigger(props, ref) {
   const { children, ...rest } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react118.Drawer.CloseTrigger, { position: "absolute", ...rest, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CloseButton, { size: "sm", ref, children }) });
 });
-var DrawerCloseTrigger2 = import_react118.Drawer.CloseTrigger;
-var DrawerTrigger = import_react118.Drawer.Trigger;
-var DrawerRoot = import_react118.Drawer.Root;
-var DrawerFooter = import_react118.Drawer.Footer;
-var DrawerHeader = import_react118.Drawer.Header;
-var DrawerBody = import_react118.Drawer.Body;
-var DrawerBackdrop = import_react118.Drawer.Backdrop;
-var DrawerDescription = import_react118.Drawer.Description;
-var DrawerTitle = import_react118.Drawer.Title;
-var DrawerActionTrigger = import_react118.Drawer.ActionTrigger;
-var DrawerContext = import_dialog3.DialogContext;
+var CloseTrigger2 = import_react118.Drawer.CloseTrigger;
+var Trigger2 = import_react118.Drawer.Trigger;
+var Root2 = import_react118.Drawer.Root;
+var Footer2 = import_react118.Drawer.Footer;
+var Header2 = import_react118.Drawer.Header;
+var Body2 = import_react118.Drawer.Body;
+var Backdrop2 = import_react118.Drawer.Backdrop;
+var Description2 = import_react118.Drawer.Description;
+var Title2 = import_react118.Drawer.Title;
+var ActionTrigger2 = import_react118.Drawer.ActionTrigger;
+var Context2 = import_dialog2.DialogContext;
 
 // src/components/empty-state/empty-state.tsx
-var import_react119 = require("@chakra-ui/react");
-var import_react120 = require("react");
+var import_react119 = require("react");
+var import_react120 = require("@chakra-ui/react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var EmptyState = (0, import_react120.forwardRef)(
+var EmptyStateActions = (props) => {
+  const { actions } = (0, import_react120.useEmptyStateStyles)();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react120.Box, { ...props, css: [actions, props.css] });
+};
+var EmptyState = (0, import_react119.forwardRef)(
   function EmptyState2(props, ref) {
     const { title, description, icon, children, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react119.EmptyState.Root, { ref, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react119.EmptyState.Content, { children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react119.EmptyState.Indicator, { children: icon }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react119.VStack, { textAlign: "center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react119.EmptyState.Title, { children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react119.EmptyState.Description, { children: description })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react119.EmptyState.Title, { children: title }),
-      children
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react120.EmptyState.Root, { ref, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react120.EmptyState.Content, { children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react120.EmptyState.Indicator, { children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react120.EmptyState.Title, { children: title }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react120.EmptyState.Description, { children: description }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EmptyStateActions, { children })
     ] }) });
   }
 );
 
+// src/components/file-upload/file-upload.tsx
+var file_upload_exports = {};
+__export(file_upload_exports, {
+  ClearTrigger: () => ClearTrigger,
+  Dropzone: () => Dropzone,
+  Input: () => Input,
+  Label: () => Label,
+  List: () => List,
+  Root: () => Root3,
+  Trigger: () => Trigger3
+});
+var React2 = __toESM(require("react"), 1);
+var import_react121 = require("@chakra-ui/react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Root3 = React2.forwardRef(
+  function FileUploadRoot(props, ref) {
+    const { children, inputProps, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react121.FileUpload.Root, { ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react121.FileUpload.HiddenInput, { ref, ...inputProps }),
+      children
+    ] });
+  }
+);
+var Dropzone = React2.forwardRef(
+  function FileUploadDropzone(props, ref) {
+    const { children, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react121.FileUpload.Dropzone, { ref, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react121.FileUpload.DropzoneContent, { children }) });
+  }
+);
+var Item = React2.forwardRef(
+  function FileUploadItem(props, ref) {
+    const { file, showSize, icon, clearable } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react121.FileUpload.Item, { file, ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react121.FileUpload.ItemPreview, { children: icon }),
+      showSize ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react121.FileUpload.ItemContent, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react121.FileUpload.ItemName, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react121.FileUpload.ItemSizeText, {})
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react121.FileUpload.ItemName, { flex: "1" }),
+      clearable && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react121.FileUpload.ItemDeleteTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseButton, { size: "xs" }) })
+    ] });
+  }
+);
+var List = React2.forwardRef(
+  function FileUploadList(props, ref) {
+    const { showSize, clearable, files, ...rest } = props;
+    const fileUpload = (0, import_react121.useFileUploadContext)();
+    const acceptedFiles = files != null ? files : fileUpload.acceptedFiles;
+    if (acceptedFiles.length === 0) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react121.FileUpload.ItemGroup, { ref, ...rest, children: acceptedFiles.map((file) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      Item,
+      {
+        file,
+        showSize,
+        clearable
+      },
+      file.name
+    )) });
+  }
+);
+var Input = React2.forwardRef(
+  function FileInput(props, ref) {
+    const inputRecipe2 = (0, import_react121.useRecipe)({ key: "input" });
+    const [recipeProps, restProps] = inputRecipe2.splitVariantProps(props);
+    const { placeholder = "Select file(s)", ...rest } = restProps;
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react121.FileUpload.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_react121.Button,
+      {
+        unstyled: true,
+        py: "0",
+        ref,
+        ...rest,
+        css: [inputRecipe2(recipeProps), props.css],
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react121.FileUpload.Context, { children: ({ acceptedFiles }) => {
+          if (acceptedFiles.length === 1) {
+            return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: acceptedFiles[0].name });
+          }
+          if (acceptedFiles.length > 1) {
+            return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
+              acceptedFiles.length,
+              " files"
+            ] });
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react121.Span, { color: "fg.subtle", children: placeholder });
+        } })
+      }
+    ) });
+  }
+);
+var Label = import_react121.FileUpload.Label;
+var ClearTrigger = import_react121.FileUpload.ClearTrigger;
+var Trigger3 = import_react121.FileUpload.Trigger;
+
 // src/components/grid-list/grid-list.tsx
 var grid_list_exports = {};
 __export(grid_list_exports, {
@@ -9617,12 +9808,12 @@ __export(grid_list_exports, {
 var import_grid_list = require("@saas-ui/core/grid-list");
 
 // src/components/grid-list/grid-list.context.ts
-var import_react121 = require("@chakra-ui/react");
+var import_react122 = require("@chakra-ui/react");
 var {
   withProvider: withProvider2,
   withContext: withContext3,
   useStyles: useGridListStyles
-} = (0, import_react121.createSlotRecipeContext)({
+} = (0, import_react122.createSlotRecipeContext)({
   key: "suiGridList"
 });
 
@@ -9645,29 +9836,29 @@ var GridListCell = withContext3(
 );
 
 // src/components/icon-badge/icon-badge.tsx
-var React2 = __toESM(require("react"), 1);
-var import_react122 = require("react");
-var import_react123 = require("@chakra-ui/react");
-var import_utils7 = require("@saas-ui/core/utils");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var IconBadge = React2.forwardRef(
+var React3 = __toESM(require("react"), 1);
+var import_react123 = require("react");
+var import_react124 = require("@chakra-ui/react");
+var import_utils6 = require("@saas-ui/core/utils");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var IconBadge = React3.forwardRef(
   (props, ref) => {
     const { icon, children, ...rest } = props;
-    const recipe = (0, import_react123.useRecipe)({ key: "suiIconBadge", recipe: props.recipe });
+    const recipe = (0, import_react124.useRecipe)({ key: "suiIconBadge", recipe: props.recipe });
     const [variantProps, localProps] = recipe.splitVariantProps(rest);
     const styles = recipe(variantProps);
     const element = icon || children;
-    const _children = (0, import_react122.isValidElement)(element) ? (0, import_react122.cloneElement)(element, {
+    const _children = (0, import_react123.isValidElement)(element) ? (0, import_react123.cloneElement)(element, {
       "aria-hidden": true,
       focusable: false
     }) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_react123.chakra.div,
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_react124.chakra.div,
       {
         ref,
         ...localProps,
         css: [styles, props.css],
-        className: (0, import_utils7.cx)(recipe.className, props.className),
+        className: (0, import_utils6.cx)(recipe.className, props.className),
         children: _children
       }
     );
@@ -9675,11 +9866,11 @@ var IconBadge = React2.forwardRef(
 );
 
 // src/components/icon-button/icon-button.tsx
-var import_react124 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var IconButton = (0, import_react124.forwardRef)(
+var import_react125 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var IconButton = (0, import_react125.forwardRef)(
   function IconButton2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       Button,
       {
         px: "0",
@@ -9693,10 +9884,10 @@ var IconButton = (0, import_react124.forwardRef)(
 );
 
 // src/components/input-group/input-group.tsx
-var import_react125 = require("react");
-var import_react126 = require("@chakra-ui/react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var InputGroup = (0, import_react125.forwardRef)(
+var import_react126 = require("react");
+var import_react127 = require("@chakra-ui/react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var InputGroup = (0, import_react126.forwardRef)(
   function InputGroup2(props, ref) {
     const {
       startElement,
@@ -9706,26 +9897,26 @@ var InputGroup = (0, import_react125.forwardRef)(
       children,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react126.Group, { ref, display: "flex", ...rest, children: [
-      startElement && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react126.InputElement, { pointerEvents: "none", ...startElementProps, children: startElement }),
-      (0, import_react125.isValidElement)(children) && (0, import_react125.cloneElement)(children, {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react127.Group, { ref, display: "flex", ...rest, children: [
+      startElement && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react127.InputElement, { pointerEvents: "none", ...startElementProps, children: startElement }),
+      (0, import_react126.isValidElement)(children) && (0, import_react126.cloneElement)(children, {
         ...startElement && { ps: "calc(var(--input-height) - 6px)" },
         ...endElement && { pe: "calc(var(--input-height) - 6px)" },
         ...children.props
       }),
-      endElement && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react126.InputElement, { placement: "end", ...endElementProps, children: endElement })
+      endElement && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react127.InputElement, { placement: "end", ...endElementProps, children: endElement })
     ] });
   }
 );
 
 // src/components/link/link.tsx
-var import_react127 = __toESM(require("react"), 1);
-var import_react128 = require("@chakra-ui/react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var Link = import_react127.default.forwardRef(
+var import_react128 = __toESM(require("react"), 1);
+var import_react129 = require("@chakra-ui/react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Link = import_react128.default.forwardRef(
   (props, ref) => {
     const LinkComponent = useLink();
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react128.Link, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(LinkComponent, { ref, ...props }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react129.Link, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LinkComponent, { ref, ...props }) });
   }
 );
 Link.displayName = "Link";
@@ -9738,38 +9929,38 @@ __export(loading_overlay_exports, {
   Text: () => LoadingOverlayText
 });
 var import_presence = require("@ark-ui/react/presence");
-var import_react132 = require("@chakra-ui/react");
+var import_react133 = require("@chakra-ui/react");
 
 // src/components/spinner/spinner.tsx
-var import_react129 = require("react");
-var import_react130 = require("@chakra-ui/react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Spinner2 = (0, import_react129.forwardRef)(
+var import_react130 = require("react");
+var import_react131 = require("@chakra-ui/react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Spinner2 = (0, import_react130.forwardRef)(
   function Spinner3(props, ref) {
     const { loading, children, ...rest } = props;
     if (loading === false) {
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react130.Spinner, { ref, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react131.Spinner, { ref, ...rest });
   }
 );
 
 // src/components/loading-overlay/loading-overlay.context.ts
-var import_react131 = require("@chakra-ui/react");
+var import_react132 = require("@chakra-ui/react");
 var {
   useStyles: useLoadingOverlayStyles,
   withContext: withContext4,
   withProvider: withProvider3
-} = (0, import_react131.createSlotRecipeContext)({
+} = (0, import_react132.createSlotRecipeContext)({
   key: "suiLoadingOverlay"
 });
 
 // src/components/loading-overlay/loading-overlay.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = 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_runtime18.jsx)(import_presence.Presence, { present: loading, ...presenceProps, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react132.chakra.div, { ...rootProps, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_presence.Presence, { present: loading, ...presenceProps, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react133.chakra.div, { ...rootProps, children }) });
 };
 var LoadingOverlayRoot = withProvider3(
   LoadingOverlay,
@@ -9791,21 +9982,21 @@ __export(navbar_exports, {
   Link: () => NavbarLink,
   Root: () => NavbarRoot
 });
-var import_react134 = require("react");
+var import_react135 = require("react");
 var import_navbar = require("@saas-ui/core/navbar");
 
 // src/components/navbar/navbar.context.ts
-var import_react133 = require("@chakra-ui/react");
+var import_react134 = require("@chakra-ui/react");
 var {
   withProvider: withProvider4,
   withContext: withContext5,
   useStyles: useNavbarStyles
-} = (0, import_react133.createSlotRecipeContext)({
+} = (0, import_react134.createSlotRecipeContext)({
   key: "suiNavbar"
 });
 
 // src/components/navbar/navbar.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var NavbarRoot = withProvider4(
   import_navbar.Navbar.Root,
   "root"
@@ -9823,10 +10014,10 @@ var NavbarItem = withContext5(
   "item"
 );
 var NavbarLink = withContext5(
-  (0, import_react134.forwardRef)((props, ref) => {
+  (0, import_react135.forwardRef)((props, ref) => {
     const Link2 = useLink();
     const { active, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_navbar.Navbar.Link, { asChild: true, ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Link2, { "data-active": active ? "" : void 0, ...props }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_navbar.Navbar.Link, { asChild: true, ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Link2, { "data-active": active ? "" : void 0, ...props }) });
   }),
   "link",
   {
@@ -9835,10 +10026,10 @@ var NavbarLink = withContext5(
 );
 
 // src/components/number-input/number-input.tsx
-var import_react135 = require("react");
-var import_react136 = require("@chakra-ui/react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var NumberInput = (0, import_react135.forwardRef)(
+var import_react136 = require("react");
+var import_react137 = require("@chakra-ui/react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var NumberInput = (0, import_react136.forwardRef)(
   function NumberInput2(props, ref) {
     const {
       hideControls,
@@ -9848,19 +10039,19 @@ var NumberInput = (0, import_react135.forwardRef)(
       rootRef,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react136.NumberInput.Root, { ref: rootRef, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react137.NumberInput.Root, { ref: rootRef, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         InputGroup,
         {
           startElement,
           endElement,
           width: "full",
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.NumberInput.Input, { ref, ...inputProps })
+          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react137.NumberInput.Input, { ref, ...inputProps })
         }
       ),
-      !hideControls && !endElement ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react136.NumberInput.Control, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.NumberInput.IncrementTrigger, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.NumberInput.DecrementTrigger, {})
+      !hideControls && !endElement ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react137.NumberInput.Control, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react137.NumberInput.IncrementTrigger, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react137.NumberInput.DecrementTrigger, {})
       ] }) : null
     ] });
   }
@@ -9886,87 +10077,87 @@ __export(menu_exports, {
   Trigger: () => MenuTrigger,
   TriggerItem: () => MenuTriggerItem
 });
-var import_react137 = require("react");
-var import_react138 = require("@chakra-ui/react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var MenuContent = (0, import_react137.forwardRef)(
+var import_react138 = require("react");
+var import_react139 = require("@chakra-ui/react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var MenuContent = (0, import_react138.forwardRef)(
   function MenuContent2(props, ref) {
     const { portalled = true, portalRef, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Menu.Content, { ref, ...rest }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react139.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react139.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react139.Menu.Content, { ref, ...rest }) }) });
   }
 );
-var MenuArrow = (0, import_react137.forwardRef)(
+var MenuArrow = (0, import_react138.forwardRef)(
   function MenuArrow2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Menu.Arrow, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Menu.ArrowTip, {}) });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react139.Menu.Arrow, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react139.Menu.ArrowTip, {}) });
   }
 );
-var MenuCheckboxItem = (0, import_react137.forwardRef)(function MenuCheckboxItem2(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react138.Menu.CheckboxItem, { ref, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Menu.ItemIndicator, { hidden: false, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CheckIcon, {}) }),
+var MenuCheckboxItem = (0, import_react138.forwardRef)(function MenuCheckboxItem2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react139.Menu.CheckboxItem, { ref, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react139.Menu.ItemIndicator, { hidden: false, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CheckIcon, {}) }),
     props.children
   ] });
 });
-var MenuRadioItem = (0, import_react137.forwardRef)(
+var MenuRadioItem = (0, import_react138.forwardRef)(
   function MenuRadioItem2(props, ref) {
     const { children, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react138.Menu.RadioItem, { ps: "8", ref, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.AbsoluteCenter, { axis: "horizontal", left: "4", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Menu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CheckIcon, {}) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Menu.ItemText, { children })
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react139.Menu.RadioItem, { ps: "8", ref, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react139.AbsoluteCenter, { axis: "horizontal", left: "4", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react139.Menu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CheckIcon, {}) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react139.Menu.ItemText, { children })
     ] });
   }
 );
-var MenuItemGroup = (0, import_react137.forwardRef)(
+var MenuItemGroup = (0, import_react138.forwardRef)(
   function MenuItemGroup2(props, ref) {
     const { title, children, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react138.Menu.ItemGroup, { ref, ...rest, children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Menu.ItemGroupLabel, { userSelect: "none", children: title }),
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react139.Menu.ItemGroup, { ref, ...rest, children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react139.Menu.ItemGroupLabel, { userSelect: "none", children: title }),
       children
     ] });
   }
 );
-var MenuTriggerItem = (0, import_react137.forwardRef)(
+var MenuTriggerItem = (0, import_react138.forwardRef)(
   function MenuTriggerItem2(props, ref) {
     const { startIcon, children, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react138.Menu.TriggerItem, { ref, ...rest, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react139.Menu.TriggerItem, { ref, ...rest, children: [
       startIcon,
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronRightIcon, {})
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChevronRightIcon, {})
     ] });
   }
 );
-var MenuButton = (0, import_react137.forwardRef)(
+var MenuButton = (0, import_react138.forwardRef)(
   function MenuButton2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MenuTrigger, { ref, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { ...props }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MenuTrigger, { ref, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { ...props }) });
   }
 );
-var MenuRadioItemGroup = import_react138.Menu.RadioItemGroup;
-var MenuContextTrigger = import_react138.Menu.ContextTrigger;
-var MenuRoot = import_react138.Menu.Root;
-var MenuSeparator = import_react138.Menu.Separator;
-var MenuContext = import_react138.Menu.Context;
-var MenuItem = import_react138.Menu.Item;
-var MenuItemText = import_react138.Menu.ItemText;
-var MenuItemCommand = import_react138.Menu.ItemCommand;
-var MenuTrigger = import_react138.Menu.Trigger;
+var MenuRadioItemGroup = import_react139.Menu.RadioItemGroup;
+var MenuContextTrigger = import_react139.Menu.ContextTrigger;
+var MenuRoot = import_react139.Menu.Root;
+var MenuSeparator = import_react139.Menu.Separator;
+var MenuContext = import_react139.Menu.Context;
+var MenuItem = import_react139.Menu.Item;
+var MenuItemText = import_react139.Menu.ItemText;
+var MenuItemCommand = import_react139.Menu.ItemCommand;
+var MenuTrigger = import_react139.Menu.Trigger;
 
 // src/components/pagination/pagination.tsx
 var pagination_exports = {};
 __export(pagination_exports, {
-  Context: () => Context,
+  Context: () => Context3,
   Ellipsis: () => Ellipsis,
-  Item: () => Item,
+  Item: () => Item2,
   Items: () => Items,
   NextButton: () => NextButton,
   NextTrigger: () => NextTrigger,
   PageText: () => PageText,
   PrevButton: () => PrevButton,
   PrevTrigger: () => PrevTrigger,
-  Root: () => Root
+  Root: () => Root4
 });
-var import_react139 = require("react");
-var import_react140 = require("@chakra-ui/react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var [RootPropsProvider, useRootProps] = (0, import_react140.createContext)({
+var import_react140 = require("react");
+var import_react141 = require("@chakra-ui/react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var [RootPropsProvider, useRootProps] = (0, import_react141.createContext)({
   name: "RootPropsProvider"
 });
 var variantMap = {
@@ -9974,66 +10165,66 @@ var variantMap = {
   solid: { default: "outline", ellipsis: "outline", current: "solid" },
   subtle: { default: "ghost", ellipsis: "plain", current: "subtle" }
 };
-var Root = (0, import_react139.forwardRef)(
+var Root4 = (0, import_react140.forwardRef)(
   function PaginationRoot(props, ref) {
     const { size = "sm", variant = "outline", ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(RootPropsProvider, { value: { size, variantMap: variantMap[variant] }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react140.Pagination.Root, { ref, type: "button", ...rest }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RootPropsProvider, { value: { size, variantMap: variantMap[variant] }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react141.Pagination.Root, { ref, type: "button", ...rest }) });
   }
 );
-var Ellipsis = (0, import_react139.forwardRef)(function PaginationEllipsis(props, ref) {
+var Ellipsis = (0, import_react140.forwardRef)(function PaginationEllipsis(props, ref) {
   var _a8;
   const { size, variantMap: variantMap2 } = useRootProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react140.Pagination.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react140.Button, { as: "span", variant: variantMap2.ellipsis, size, children: (_a8 = props.children) != null ? _a8 : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EllipsisIcon, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react141.Pagination.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react141.Button, { as: "span", variant: variantMap2.ellipsis, size, children: (_a8 = props.children) != null ? _a8 : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(EllipsisIcon, {}) }) });
 });
-var Item = (0, import_react139.forwardRef)(
+var Item2 = (0, import_react140.forwardRef)(
   function PaginationItem(props, ref) {
-    const { page } = (0, import_react140.usePaginationContext)();
+    const { page } = (0, import_react141.usePaginationContext)();
     const { size, variantMap: variantMap2 } = useRootProps();
     const current = page === props.value;
     const variant = current ? variantMap2.current : variantMap2.default;
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react140.Pagination.Item, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react140.Button, { variant, size, children: props.value }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react141.Pagination.Item, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react141.Button, { variant, size, children: props.value }) });
   }
 );
-var PrevButton = (0, import_react139.forwardRef)(function PaginationPrevTrigger(props, ref) {
+var PrevButton = (0, import_react140.forwardRef)(function PaginationPrevTrigger(props, ref) {
   var _a8;
   const { size, variantMap: variantMap2 } = useRootProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react140.Pagination.PrevTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react140.IconButton, { variant: variantMap2.default, size, children: (_a8 = props.children) != null ? _a8 : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChevronLeftIcon, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react141.Pagination.PrevTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react141.IconButton, { variant: variantMap2.default, size, children: (_a8 = props.children) != null ? _a8 : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChevronLeftIcon, {}) }) });
 });
-var NextButton = (0, import_react139.forwardRef)(function PaginationNextTrigger(props, ref) {
+var NextButton = (0, import_react140.forwardRef)(function PaginationNextTrigger(props, ref) {
   var _a8;
   const { size, variantMap: variantMap2 } = useRootProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react140.Pagination.NextTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react140.IconButton, { variant: variantMap2.default, size, children: (_a8 = props.children) != null ? _a8 : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChevronRightIcon, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react141.Pagination.NextTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react141.IconButton, { variant: variantMap2.default, size, children: (_a8 = props.children) != null ? _a8 : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChevronRightIcon, {}) }) });
 });
 var Items = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react140.Pagination.Context, { children: ({ pages }) => pages.map((page, index) => {
-    return page.type === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Ellipsis, { index, ...props }, index) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Item, { type: "page", value: page.value, ...props }, index);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react141.Pagination.Context, { children: ({ pages }) => pages.map((page, index) => {
+    return page.type === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ellipsis, { index, ...props }, index) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Item2, { type: "page", value: page.value, ...props }, index);
   }) });
 };
-var PageText = (0, import_react139.forwardRef)(
+var PageText = (0, import_react140.forwardRef)(
   function PaginationPageText(props, ref) {
     const { format = "compact", ...rest } = props;
-    const { page, pages, pageRange, count } = (0, import_react140.usePaginationContext)();
-    const content = (0, import_react139.useMemo)(() => {
+    const { page, pages, pageRange, count } = (0, import_react141.usePaginationContext)();
+    const content = (0, import_react140.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_runtime22.jsx)(import_react140.Text, { fontWeight: "medium", ref, ...rest, children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react141.Text, { fontWeight: "medium", ref, ...rest, children: content });
   }
 );
-var PrevTrigger = import_react140.Pagination.PrevTrigger;
-var NextTrigger = import_react140.Pagination.NextTrigger;
-var Context = import_react140.Pagination.Context;
+var PrevTrigger = import_react141.Pagination.PrevTrigger;
+var NextTrigger = import_react141.Pagination.NextTrigger;
+var Context3 = import_react141.Pagination.Context;
 
 // src/components/password-input/password-input.tsx
-var import_react143 = require("react");
-var import_react144 = require("@chakra-ui/react");
+var import_react144 = require("react");
+var import_react145 = require("@chakra-ui/react");
 
 // ../../node_modules/react-icons/lib/iconBase.mjs
-var import_react142 = __toESM(require("react"), 1);
+var import_react143 = __toESM(require("react"), 1);
 
 // ../../node_modules/react-icons/lib/iconContext.mjs
-var import_react141 = __toESM(require("react"), 1);
+var import_react142 = __toESM(require("react"), 1);
 var DefaultContext = {
   color: void 0,
   size: void 0,
@@ -10041,7 +10232,7 @@ var DefaultContext = {
   style: void 0,
   attr: void 0
 };
-var IconContext = import_react141.default.createContext && /* @__PURE__ */ import_react141.default.createContext(DefaultContext);
+var IconContext = import_react142.default.createContext && /* @__PURE__ */ import_react142.default.createContext(DefaultContext);
 
 // ../../node_modules/react-icons/lib/iconBase.mjs
 var _excluded = ["attr", "size", "title"];
@@ -10130,12 +10321,12 @@ function _toPrimitive(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 function Tree2Element(tree) {
-  return tree && tree.map((node, i) => /* @__PURE__ */ import_react142.default.createElement(node.tag, _objectSpread({
+  return tree && tree.map((node, i) => /* @__PURE__ */ import_react143.default.createElement(node.tag, _objectSpread({
     key: i
   }, node.attr), Tree2Element(node.child)));
 }
 function GenIcon(data) {
-  return (props) => /* @__PURE__ */ import_react142.default.createElement(IconBase, _extends({
+  return (props) => /* @__PURE__ */ import_react143.default.createElement(IconBase, _extends({
     attr: _objectSpread({}, data.attr)
   }, props), Tree2Element(data.child));
 }
@@ -10150,7 +10341,7 @@ function IconBase(props) {
     var className;
     if (conf.className) className = conf.className;
     if (props.className) className = (className ? className + " " : "") + props.className;
-    return /* @__PURE__ */ import_react142.default.createElement("svg", _extends({
+    return /* @__PURE__ */ import_react143.default.createElement("svg", _extends({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
@@ -10162,42 +10353,42 @@ function IconBase(props) {
       height: computedSize,
       width: computedSize,
       xmlns: "http://www.w3.org/2000/svg"
-    }), title && /* @__PURE__ */ import_react142.default.createElement("title", null, title), props.children);
+    }), title && /* @__PURE__ */ import_react143.default.createElement("title", null, title), props.children);
   };
-  return IconContext !== void 0 ? /* @__PURE__ */ import_react142.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
+  return IconContext !== void 0 ? /* @__PURE__ */ import_react143.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
 }
 
 // ../../node_modules/react-icons/lu/index.mjs
 function LuEyeOff(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M9.88 9.88a3 3 0 1 0 4.24 4.24" }, "child": [] }, { "tag": "path", "attr": { "d": "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }, "child": [] }, { "tag": "path", "attr": { "d": "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }, "child": [] }, { "tag": "line", "attr": { "x1": "2", "x2": "22", "y1": "2", "y2": "22" }, "child": [] }] })(props);
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }, "child": [] }, { "tag": "path", "attr": { "d": "M14.084 14.158a3 3 0 0 1-4.242-4.242" }, "child": [] }, { "tag": "path", "attr": { "d": "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }, "child": [] }, { "tag": "path", "attr": { "d": "m2 2 20 20" }, "child": [] }] })(props);
 }
 function LuEye(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "3" }, "child": [] }] })(props);
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "3" }, "child": [] }] })(props);
 }
 
 // src/components/password-input/password-input.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var PasswordInput = (0, import_react143.forwardRef)(
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var PasswordInput = (0, import_react144.forwardRef)(
   function PasswordInput2(props, ref) {
     const {
       rootProps,
       defaultVisible,
       visible: visibleProp,
       onVisibleChange,
-      visibilityIcon = { on: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LuEye, {}), off: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LuEyeOff, {}) },
+      visibilityIcon = { on: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LuEye, {}), off: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LuEyeOff, {}) },
       ...rest
     } = props;
-    const [visible, setVisible] = (0, import_react144.useControllableState)({
+    const [visible, setVisible] = (0, import_react145.useControllableState)({
       value: visibleProp,
       defaultValue: defaultVisible || false,
       onChange: onVisibleChange
     });
-    const inputRef = (0, import_react143.useRef)(null);
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    const inputRef = (0, import_react144.useRef)(null);
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       InputGroup,
       {
         width: "full",
-        endElement: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        endElement: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           VisibilityTrigger,
           {
             disabled: rest.disabled,
@@ -10211,11 +10402,11 @@ var PasswordInput = (0, import_react143.forwardRef)(
           }
         ),
         ...rootProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_react144.Input,
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          import_react145.Input,
           {
             ...rest,
-            ref: (0, import_react144.mergeRefs)(ref, inputRef),
+            ref: (0, import_react145.mergeRefs)(ref, inputRef),
             type: visible ? "text" : "password"
           }
         )
@@ -10223,10 +10414,10 @@ var PasswordInput = (0, import_react143.forwardRef)(
     );
   }
 );
-var VisibilityTrigger = (0, import_react143.forwardRef)(
+var VisibilityTrigger = (0, import_react144.forwardRef)(
   function VisibilityTrigger2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-      import_react144.IconButton,
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      import_react145.IconButton,
       {
         tabIndex: -1,
         ref,
@@ -10244,34 +10435,34 @@ var VisibilityTrigger = (0, import_react143.forwardRef)(
 );
 
 // src/components/persona/persona.tsx
-var React7 = __toESM(require("react"), 1);
+var React8 = __toESM(require("react"), 1);
 
 // src/components/persona/persona-primitive.tsx
-var import_react146 = require("react");
-var import_react147 = require("@chakra-ui/react");
-var import_utils8 = require("@saas-ui/core/utils");
+var import_react147 = require("react");
+var import_react148 = require("@chakra-ui/react");
+var import_utils7 = require("@saas-ui/core/utils");
 
 // src/components/persona/persona.context.ts
-var import_react145 = require("@chakra-ui/react");
+var import_react146 = require("@chakra-ui/react");
 var {
   useStyles: usePersonaStyles,
   withProvider: withProvider5,
   withContext: withContext6
-} = (0, import_react145.createSlotRecipeContext)({
+} = (0, import_react146.createSlotRecipeContext)({
   key: "suiPersona"
 });
 
 // src/components/persona/persona-primitive.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var PersonaRoot = withProvider5(
-  (0, import_react146.forwardRef)((props, ref) => {
+  (0, import_react147.forwardRef)((props, ref) => {
     const { outOfOffice, presence, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      import_react147.chakra.div,
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      import_react148.chakra.div,
       {
         ref,
         ...rest,
-        "data-out-of-office": (0, import_utils8.dataAttr)(outOfOffice),
+        "data-out-of-office": (0, import_utils7.dataAttr)(outOfOffice),
         "data-presence": presence,
         css: [
           presence ? {
@@ -10284,7 +10475,7 @@ var PersonaRoot = withProvider5(
   }),
   "root"
 );
-var PersonaAvatar = (0, import_react146.forwardRef)(
+var PersonaAvatar = (0, import_react147.forwardRef)(
   (props, ref) => {
     const {
       name,
@@ -10297,7 +10488,7 @@ var PersonaAvatar = (0, import_react146.forwardRef)(
       children,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Avatar, { ref, ...rest, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Avatar, { ref, ...rest, children });
   }
 );
 var PersonaPresenceBadge = withContext6("span", "presence");
@@ -10320,8 +10511,8 @@ var PersonaTertiaryLabel = withContext6(
 );
 
 // src/components/persona/persona.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var Persona = React7.forwardRef(
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Persona = React8.forwardRef(
   (props, ref) => {
     const {
       name,
@@ -10344,7 +10535,7 @@ var Persona = React7.forwardRef(
       fallback: fallback2,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       PersonaRoot,
       {
         ref,
@@ -10353,7 +10544,7 @@ var Persona = React7.forwardRef(
         size,
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             PersonaAvatar,
             {
               name,
@@ -10365,13 +10556,13 @@ var Persona = React7.forwardRef(
               src,
               srcSet,
               fallback: fallback2,
-              children: presence ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PersonaPresenceBadge, { children: presenceIcon }) : null
+              children: presence ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PersonaPresenceBadge, { children: presenceIcon }) : null
             }
           ),
-          !hideDetails && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(PersonaDetails, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PersonaLabel, { children: label || name }),
-            secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PersonaSecondaryLabel, { children: secondaryLabel }),
-            tertiaryLabel && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PersonaTertiaryLabel, { children: tertiaryLabel }),
+          !hideDetails && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(PersonaDetails, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PersonaLabel, { children: label || name }),
+            secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PersonaSecondaryLabel, { children: secondaryLabel }),
+            tertiaryLabel && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PersonaTertiaryLabel, { children: tertiaryLabel }),
             children
           ] })
         ]
@@ -10380,8 +10571,8 @@ var Persona = React7.forwardRef(
   }
 );
 Persona.displayName = "Persona";
-var PersonaAvatar2 = React7.forwardRef(function PersonaAvatar3(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Persona, { ref, ...props, hideDetails: true });
+var PersonaAvatar2 = React8.forwardRef(function PersonaAvatar3(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Persona, { ref, ...props, hideDetails: true });
 });
 
 // src/components/persona/presence.ts
@@ -10409,10 +10600,10 @@ var defaultPresenceOptions = {
 };
 
 // src/components/pin-input/pin-input.tsx
-var import_react148 = require("react");
-var import_react149 = require("@chakra-ui/react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var PinInput = (0, import_react148.forwardRef)(
+var import_react149 = require("react");
+var import_react150 = require("@chakra-ui/react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var PinInput = (0, import_react149.forwardRef)(
   function PinInput2(props, ref) {
     const {
       pinLength = 4,
@@ -10422,35 +10613,87 @@ var PinInput = (0, import_react148.forwardRef)(
       gap = attached ? 0 : 2,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react149.PinInput.Root, { ref: rootRef, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react149.PinInput.HiddenInput, { ref, ...inputProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react149.PinInput.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react149.Group, { attached, gap, children: Array.from({ length: pinLength }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react149.PinInput.Input, { index }, index)) }) })
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react150.PinInput.Root, { ref: rootRef, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react150.PinInput.HiddenInput, { ref, ...inputProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react150.PinInput.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react150.Group, { attached, gap, children: Array.from({ length: pinLength }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react150.PinInput.Input, { index }, index)) }) })
     ] });
   }
 );
 
-// src/components/radio/radio.tsx
-var import_react150 = require("react");
+// src/components/popover/popover.tsx
+var popover_exports = {};
+__export(popover_exports, {
+  Arrow: () => Arrow,
+  Body: () => Body3,
+  CloseButton: () => CloseButton5,
+  CloseTrigger: () => CloseTrigger3,
+  Content: () => Content3,
+  Description: () => Description3,
+  Footer: () => Footer3,
+  Header: () => Header3,
+  Root: () => Root5,
+  Title: () => Title3,
+  Trigger: () => Trigger4
+});
+var React9 = __toESM(require("react"), 1);
 var import_react151 = require("@chakra-ui/react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var Radio = (0, import_react150.forwardRef)(
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Content3 = React9.forwardRef(
+  function PopoverContent(props, ref) {
+    const { portalled = true, portalRef, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react151.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react151.Popover.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react151.Popover.Content, { ref, ...rest }) }) });
+  }
+);
+var Arrow = React9.forwardRef(
+  function PopoverArrow(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react151.Popover.Arrow, { ...props, ref, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react151.Popover.ArrowTip, {}) });
+  }
+);
+var CloseButton5 = React9.forwardRef(function PopoverCloseTrigger(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_react151.Popover.CloseTrigger,
+    {
+      position: "absolute",
+      top: "1",
+      insetEnd: "1",
+      ...props,
+      asChild: true,
+      ref,
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CloseButton, { size: "sm" })
+    }
+  );
+});
+var CloseTrigger3 = import_react151.Popover.CloseTrigger;
+var Title3 = import_react151.Popover.Title;
+var Description3 = import_react151.Popover.Description;
+var Footer3 = import_react151.Popover.Footer;
+var Header3 = import_react151.Popover.Header;
+var Root5 = import_react151.Popover.Root;
+var Body3 = import_react151.Popover.Body;
+var Trigger4 = import_react151.Popover.Trigger;
+
+// src/components/radio/radio.tsx
+var import_react152 = require("react");
+var import_react153 = require("@chakra-ui/react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Radio = (0, import_react152.forwardRef)(
   function Radio2(props, ref) {
     const { children, inputProps, rootRef, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react151.RadioGroup.Item, { ref: rootRef, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react151.RadioGroup.ItemHiddenInput, { ref, ...inputProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react151.RadioGroup.ItemIndicator, {}),
-      children && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react151.RadioGroup.ItemText, { children })
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react153.RadioGroup.Item, { ref: rootRef, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react153.RadioGroup.ItemHiddenInput, { ref, ...inputProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react153.RadioGroup.ItemIndicator, {}),
+      children && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react153.RadioGroup.ItemText, { children })
     ] });
   }
 );
-var RadioGroup = import_react151.RadioGroup.Root;
+var RadioGroup = import_react153.RadioGroup.Root;
 
 // src/components/search-input/search-input.tsx
-var import_react152 = __toESM(require("react"), 1);
-var import_react153 = require("@chakra-ui/react");
-var import_utils9 = require("@saas-ui/core/utils");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var SearchInput = (0, import_react152.forwardRef)(
+var import_react154 = __toESM(require("react"), 1);
+var import_react155 = require("@chakra-ui/react");
+var import_utils8 = require("@saas-ui/core/utils");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var SearchInput = (0, import_react154.forwardRef)(
   (props, ref) => {
     const {
       placeholder = "Search",
@@ -10459,7 +10702,7 @@ var SearchInput = (0, import_react152.forwardRef)(
       size,
       variant,
       width = "full",
-      icon = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SearchIcon, {}),
+      icon = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SearchIcon, {}),
       resetIcon,
       endElement: endElementProp,
       onChange: onChangeProp,
@@ -10468,18 +10711,18 @@ var SearchInput = (0, import_react152.forwardRef)(
       disabled,
       ...inputProps
     } = props;
-    const inputRef = import_react152.default.useRef(null);
-    const [value, setValue] = (0, import_react153.useControllableState)({
+    const inputRef = import_react154.default.useRef(null);
+    const [value, setValue] = (0, import_react155.useControllableState)({
       value: valueProp,
       defaultValue: defaultValueProp
     });
-    const onChange = import_react152.default.useCallback(
+    const onChange = import_react154.default.useCallback(
       (e) => {
         setValue(e.target.value);
       },
       [setValue]
     );
-    const onKeyDown = import_react152.default.useCallback(
+    const onKeyDown = import_react154.default.useCallback(
       (event) => {
         if (event.key === "Escape") {
           setValue("");
@@ -10495,10 +10738,10 @@ var SearchInput = (0, import_react152.forwardRef)(
       (_a8 = inputRef.current) == null ? void 0 : _a8.focus();
     };
     const showReset = value && !props.disabled;
-    const endElement = showReset ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SearchInputResetButton, { size, children: resetIcon }) : endElementProp;
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react153.Group, { width, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        import_react153.InputElement,
+    const endElement = showReset ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SearchInputResetButton, { size, children: resetIcon }) : endElementProp;
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react155.Group, { width, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        import_react155.InputElement,
         {
           placement: "start",
           px: "0",
@@ -10507,8 +10750,8 @@ var SearchInput = (0, import_react152.forwardRef)(
           children: icon
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        import_react153.Input,
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        import_react155.Input,
         {
           type: "text",
           placeholder,
@@ -10516,23 +10759,23 @@ var SearchInput = (0, import_react152.forwardRef)(
           size,
           value,
           disabled,
-          ref: (0, import_react153.mergeRefs)(ref, inputRef),
-          onChange: (0, import_utils9.callAll)(onChange, onChangeProp),
-          onKeyDown: (0, import_utils9.callAll)(onKeyDown, onKeyDownProp),
+          ref: (0, import_react155.mergeRefs)(ref, inputRef),
+          onChange: (0, import_utils8.callAll)(onChange, onChangeProp),
+          onKeyDown: (0, import_utils8.callAll)(onKeyDown, onKeyDownProp),
           ps: "calc(var(--input-height) - var(--input-height) / 10)",
           pe: "calc(var(--input-height) - var(--input-height) / 10)",
           ...inputProps
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.InputElement, { placement: "end", children: endElement })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react155.InputElement, { placement: "end", children: endElement })
     ] });
   }
 );
-var SearchInputResetButton = (0, import_react152.forwardRef)(
+var SearchInputResetButton = (0, import_react154.forwardRef)(
   (props, ref) => {
-    const { children = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CloseIcon, {}), ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      import_react153.IconButton,
+    const { children = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CloseIcon, {}), ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      import_react155.IconButton,
       {
         ref,
         variant: "ghost",
@@ -10549,8 +10792,8 @@ var SearchInputResetButton = (0, import_react152.forwardRef)(
 SearchInput.displayName = "SearchInput";
 
 // src/components/select/namespace.ts
-var namespace_exports3 = {};
-__export(namespace_exports3, {
+var namespace_exports = {};
+__export(namespace_exports, {
   Content: () => SelectContent,
   Item: () => SelectItem,
   ItemGroup: () => SelectItemGroup,
@@ -10562,23 +10805,23 @@ __export(namespace_exports3, {
 });
 
 // src/components/select/select.tsx
-var import_react154 = require("react");
-var import_react155 = require("@chakra-ui/react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var SelectTrigger = (0, import_react154.forwardRef)(
+var import_react156 = require("react");
+var import_react157 = require("@chakra-ui/react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var SelectTrigger = (0, import_react156.forwardRef)(
   function SelectTrigger2(props, ref) {
     const { children, clearable, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react155.Select.Control, { ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.Select.Trigger, { ref, children }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react155.Select.IndicatorGroup, { children: [
-        clearable && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectClearTrigger, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.Select.Indicator, {})
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react157.Select.Control, { ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Select.Trigger, { ref, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react157.Select.IndicatorGroup, { children: [
+        clearable && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectClearTrigger, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Select.Indicator, {})
       ] })
     ] });
   }
 );
-var SelectClearTrigger = (0, import_react154.forwardRef)(function SelectClearTrigger2(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.Select.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var SelectClearTrigger = (0, import_react156.forwardRef)(function SelectClearTrigger2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Select.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     CloseButton,
     {
       size: "xs",
@@ -10589,24 +10832,24 @@ var SelectClearTrigger = (0, import_react154.forwardRef)(function SelectClearTri
     }
   ) });
 });
-var SelectContent = (0, import_react154.forwardRef)(
+var SelectContent = (0, import_react156.forwardRef)(
   function SelectContent2(props, ref) {
     const { portalled = true, portalRef, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.Select.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.Select.Content, { ...rest, ref }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Select.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Select.Content, { ...rest, ref }) }) });
   }
 );
-var SelectItem = (0, import_react154.forwardRef)(
+var SelectItem = (0, import_react156.forwardRef)(
   function SelectItem2(props, ref) {
     const { item, children, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react155.Select.Item, { item, ...rest, ref, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react157.Select.Item, { item, ...rest, ref, children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.Select.ItemIndicator, {})
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Select.ItemIndicator, {})
     ] }, item.value);
   }
 );
-var SelectValueText = (0, import_react154.forwardRef)(function SelectValueText2(props, ref) {
+var SelectValueText = (0, import_react156.forwardRef)(function SelectValueText2(props, ref) {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.Select.ValueText, { ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.Select.Context, { children: (select) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Select.ValueText, { ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Select.Context, { children: (select) => {
     const items = select.selectedItems;
     if (items.length === 0) return props.placeholder;
     if (children) return children(items);
@@ -10615,9 +10858,9 @@ var SelectValueText = (0, import_react154.forwardRef)(function SelectValueText2(
     return `${items.length} selected`;
   } }) });
 });
-var SelectRoot = (0, import_react154.forwardRef)(function SelectRoot2(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    import_react155.Select.Root,
+var SelectRoot = (0, import_react156.forwardRef)(function SelectRoot2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_react157.Select.Root,
     {
       ...props,
       ref,
@@ -10625,41 +10868,41 @@ var SelectRoot = (0, import_react154.forwardRef)(function SelectRoot2(props, ref
     }
   );
 });
-var SelectItemGroup = (0, import_react154.forwardRef)(
+var SelectItemGroup = (0, import_react156.forwardRef)(
   function SelectItemGroup2(props, ref) {
     const { children, label, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react155.Select.ItemGroup, { ...rest, ref, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.Select.ItemGroupLabel, { children: label }),
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react157.Select.ItemGroup, { ...rest, ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Select.ItemGroupLabel, { children: label }),
       children
     ] });
   }
 );
-var SelectLabel = import_react155.Select.Label;
-var SelectItemText = import_react155.Select.ItemText;
+var SelectLabel = import_react157.Select.Label;
+var SelectItemText = import_react157.Select.ItemText;
 
 // src/components/segmented-control/segmented-control.tsx
-var import_react156 = require("react");
-var import_react157 = require("@chakra-ui/react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react158 = require("react");
+var import_react159 = require("@chakra-ui/react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function normalize(items) {
   return items.map((item) => {
     if (typeof item === "string") return { value: item, label: item };
     return item;
   });
 }
-var SegmentedControl = (0, import_react156.forwardRef)(function SegmentedControl2(props, ref) {
+var SegmentedControl = (0, import_react158.forwardRef)(function SegmentedControl2(props, ref) {
   const { items, ...rest } = props;
-  const data = (0, import_react156.useMemo)(() => normalize(items), [items]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react157.SegmentGroup.Root, { ref, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react157.SegmentGroup.Indicator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react157.For, { each: data, children: (item) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-      import_react157.SegmentGroup.Item,
+  const data = (0, import_react158.useMemo)(() => normalize(items), [items]);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react159.SegmentGroup.Root, { ref, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.SegmentGroup.Indicator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.For, { each: data, children: (item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+      import_react159.SegmentGroup.Item,
       {
         value: item.value,
         disabled: item.disabled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react157.SegmentGroup.ItemText, { children: item.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react157.SegmentGroup.ItemHiddenInput, {})
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.SegmentGroup.ItemText, { children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.SegmentGroup.ItemHiddenInput, {})
         ]
       },
       item.value
@@ -10692,28 +10935,28 @@ __export(sidebar_exports, {
 var import_sidebar = require("@saas-ui/core/sidebar");
 
 // src/components/sidebar/sidebar.context.ts
-var import_react158 = require("@chakra-ui/react");
+var import_react160 = require("@chakra-ui/react");
 var {
   withContext: withContext7,
   useRecipeResult,
   StylesProvider,
   ClassNamesProvider,
   useStyles: useSidebarStyles
-} = (0, import_react158.createSlotRecipeContext)({
+} = (0, import_react160.createSlotRecipeContext)({
   key: "suiSidebar"
 });
 var {
   withProvider: withItemProvider,
   withContext: withItemContext,
   useStyles: useSidebarItemStyles
-} = (0, import_react158.createSlotRecipeContext)({
+} = (0, import_react160.createSlotRecipeContext)({
   key: "suiSidebarNavItem"
 });
 
 // src/components/sidebar/sidebar.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var SidebarProvider = function SidebarProvider2(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_sidebar.Sidebar.Provider, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RecipeProvider, { ...props, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_sidebar.Sidebar.Provider, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RecipeProvider, { ...props, children: props.children }) });
 };
 function RecipeProvider(props) {
   const { mode } = (0, import_sidebar.useSidebar)();
@@ -10721,7 +10964,7 @@ function RecipeProvider(props) {
     ...props,
     mode
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StylesProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ClassNamesProvider, { value: classNames, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StylesProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ClassNamesProvider, { value: classNames, children: props.children }) });
 }
 var SidebarRoot = withContext7(
   import_sidebar.Sidebar.Root,
@@ -10800,15 +11043,15 @@ var SidebarContext = import_sidebar.Sidebar.Context;
 var import_sidebar2 = require("@saas-ui/core/sidebar");
 
 // src/components/status/status.tsx
-var import_react159 = require("react");
-var import_react160 = require("@chakra-ui/react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var Status = (0, import_react159.forwardRef)(
+var import_react161 = require("react");
+var import_react162 = require("@chakra-ui/react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var Status = (0, import_react161.forwardRef)(
   function Status2(props, ref) {
     const { children, value, ...rest } = props;
     const color = value ? `status.${value}` : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react160.Status.Root, { ref, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react160.Status.Indicator, { bg: color }),
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react162.Status.Root, { ref, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Status.Indicator, { bg: color }),
       children
     ] });
   }
@@ -10825,68 +11068,68 @@ __export(steps_exports, {
   NextTrigger: () => StepsNextTrigger,
   PrevTrigger: () => StepsPrevTrigger,
   Root: () => StepsRoot,
-  useContext: () => import_react161.useStepsContext
+  useContext: () => import_react163.useStepsContext
 });
-var import_react161 = require("@chakra-ui/react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react163 = require("@chakra-ui/react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var StepsItem = (props) => {
   const { title, description, completedIcon, icon, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react161.Steps.Item, { ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react161.Steps.Trigger, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        import_react161.Steps.Status,
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react163.Steps.Item, { ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react163.Steps.Trigger, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react163.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        import_react163.Steps.Status,
         {
-          complete: completedIcon || /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CheckIcon, {}),
-          incomplete: icon || /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Steps.Number, {})
+          complete: completedIcon || /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CheckIcon, {}),
+          incomplete: icon || /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react163.Steps.Number, {})
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StepInfo, { title, description })
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StepInfo, { title, description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Steps.Separator, {})
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react163.Steps.Separator, {})
   ] });
 };
 var StepInfo = (props) => {
   const { title, description } = props;
   if (title && description) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react161.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Steps.Title, { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Steps.Description, { children: description })
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react163.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react163.Steps.Title, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react163.Steps.Description, { children: description })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Steps.Title, { children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Steps.Description, { children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react163.Steps.Title, { children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react163.Steps.Description, { children: description })
   ] });
 };
 var StepsIndicator = (props) => {
-  const { icon = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Steps.Number, {}), completedIcon } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Steps.Status, { complete: completedIcon, incomplete: icon }) });
+  const { icon = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react163.Steps.Number, {}), completedIcon } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react163.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react163.Steps.Status, { complete: completedIcon, incomplete: icon }) });
 };
-var StepsList = import_react161.Steps.List;
-var StepsRoot = import_react161.Steps.Root;
-var StepsContent = import_react161.Steps.Content;
-var StepsCompletedContent = import_react161.Steps.CompletedContent;
+var StepsList = import_react163.Steps.List;
+var StepsRoot = import_react163.Steps.Root;
+var StepsContent = import_react163.Steps.Content;
+var StepsCompletedContent = import_react163.Steps.CompletedContent;
 var StepsNextTrigger = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Steps.NextTrigger, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react163.Steps.NextTrigger, { ...props });
 };
 var StepsPrevTrigger = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Steps.PrevTrigger, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react163.Steps.PrevTrigger, { ...props });
 };
 
 // src/components/switch/switch.tsx
-var import_react162 = require("@chakra-ui/react");
-var import_react163 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var Switch = (0, import_react163.forwardRef)(
+var import_react164 = require("@chakra-ui/react");
+var import_react165 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var Switch = (0, import_react165.forwardRef)(
   function Switch2(props, ref) {
     const { inputProps, children, rootRef, trackLabel, thumbLabel, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react162.Switch.Root, { ref: rootRef, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Switch.HiddenInput, { ref, ...inputProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react162.Switch.Control, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Switch.Thumb, { children: thumbLabel && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Switch.ThumbIndicator, { fallback: thumbLabel == null ? void 0 : thumbLabel.off, children: thumbLabel == null ? void 0 : thumbLabel.on }) }),
-        trackLabel && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Switch.Indicator, { fallback: trackLabel.off, children: trackLabel.on })
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react164.Switch.Root, { ref: rootRef, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react164.Switch.HiddenInput, { ref, ...inputProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react164.Switch.Control, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react164.Switch.Thumb, { children: thumbLabel && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react164.Switch.ThumbIndicator, { fallback: thumbLabel == null ? void 0 : thumbLabel.off, children: thumbLabel == null ? void 0 : thumbLabel.on }) }),
+        trackLabel && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react164.Switch.Indicator, { fallback: trackLabel.off, children: trackLabel.on })
       ] }),
-      children != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Switch.Label, { children })
+      children != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react164.Switch.Label, { children })
     ] });
   }
 );
@@ -10895,10 +11138,10 @@ var Switch = (0, import_react163.forwardRef)(
 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");
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var Tag = (0, import_react164.forwardRef)(
+var import_react166 = require("react");
+var import_react167 = require("@chakra-ui/react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var Tag = (0, import_react166.forwardRef)(
   function Tag2(props, ref) {
     const {
       startElement,
@@ -10908,54 +11151,54 @@ var Tag = (0, import_react164.forwardRef)(
       children,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react165.Tag.Root, { ref, ...rest, children: [
-      startElement && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react165.Tag.StartElement, { children: startElement }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react165.Tag.Label, { children }),
-      endElement && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react165.Tag.EndElement, { children: endElement }),
-      closable && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react165.Tag.EndElement, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react165.Tag.CloseTrigger, { onClick: onClose }) })
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react167.Tag.Root, { ref, ...rest, children: [
+      startElement && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react167.Tag.StartElement, { children: startElement }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react167.Tag.Label, { children }),
+      endElement && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react167.Tag.EndElement, { children: endElement }),
+      closable && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react167.Tag.EndElement, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react167.Tag.CloseTrigger, { onClick: onClose }) })
     ] });
   }
 );
 
 // src/components/toaster/toaster.tsx
-var import_react166 = require("react");
-var import_react167 = require("@chakra-ui/react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_react168 = require("react");
+var import_react169 = require("@chakra-ui/react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var defaultOptions = {
   placement: "bottom-end",
   pauseOnPageIdle: true
 };
-var toast = (0, import_react167.createToaster)(defaultOptions);
+var toast = (0, import_react169.createToaster)(defaultOptions);
 var Toaster = (props) => {
   const { closable: defaultClosable = true, ...options } = props || {};
-  const toaster = (0, import_react166.useMemo)(() => {
-    toast = (0, import_react167.createToaster)({
+  const toaster = (0, import_react168.useMemo)(() => {
+    toast = (0, import_react169.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) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react169.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react169.Toaster, { toaster, insetInline: { mdDown: "4" }, children: (toast2) => {
     var _a8;
     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 })
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(ToastRoot, { children: [
+      toast2.type === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react169.Spinner, { size: "sm", color: "colorPalette.solid", mt: "0.5" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react169.Toast.Indicator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react169.Stack, { gap: "1", flex: "1", maxWidth: "100%", children: [
+        toast2.title && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react169.Toast.Title, { children: toast2.title }),
+        toast2.description && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react169.Toast.Description, { children: toast2.description }),
+        toast2.action && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react169.Toast.ActionTrigger, { children: toast2.action.label })
       ] }),
-      closable !== false && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react167.Toast.CloseTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CloseButton, { size: "xs" }) })
+      closable !== false && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react169.Toast.CloseTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CloseButton, { size: "xs" }) })
     ] });
   } }) });
 };
 function ToastRoot(props) {
-  const [rect, setRect] = (0, import_react166.useState)();
-  const rectCallbackRef = (0, import_react166.useCallback)((el) => {
+  const [rect, setRect] = (0, import_react168.useState)();
+  const rectCallbackRef = (0, import_react168.useCallback)((el) => {
     setRect(el == null ? void 0 : el.getBoundingClientRect());
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_react167.Toast.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    import_react169.Toast.Root,
     {
       ref: rectCallbackRef,
       width: { md: "sm" },
@@ -10968,10 +11211,10 @@ function ToastRoot(props) {
 }
 
 // src/components/tooltip/tooltip.tsx
-var import_react168 = require("react");
-var import_react169 = require("@chakra-ui/react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var Tooltip = (0, import_react168.forwardRef)(
+var import_react170 = require("react");
+var import_react171 = require("@chakra-ui/react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var Tooltip = (0, import_react170.forwardRef)(
   function Tooltip2(props, ref) {
     const {
       showArrow,
@@ -10984,10 +11227,10 @@ var Tooltip = (0, import_react168.forwardRef)(
       ...rest
     } = props;
     if (disabled) return children;
-    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, {}) }),
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react171.Tooltip.Root, { ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react171.Tooltip.Trigger, { asChild: true, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react171.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react171.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react171.Tooltip.Content, { ref, ...contentProps, children: [
+        showArrow && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react171.Tooltip.Arrow, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react171.Tooltip.ArrowTip, {}) }),
         content
       ] }) }) })
     ] });
@@ -11008,6 +11251,7 @@ var Tooltip = (0, import_react168.forwardRef)(
   Dialog,
   Drawer,
   EmptyState,
+  FileUpload,
   GridList,
   IconBadge,
   IconButton,
@@ -11022,6 +11266,7 @@ var Tooltip = (0, import_react168.forwardRef)(
   Persona,
   PersonaAvatar,
   PinInput,
+  Popover,
   Radio,
   RadioGroup,
   SearchInput,