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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -43,6 +43,7 @@ __export(src_exports, {
43
43
  EmptyState: () => EmptyState,
44
44
  GridList: () => grid_list_exports,
45
45
  IconBadge: () => IconBadge,
46
+ IconButton: () => import_react123.IconButton,
46
47
  InputGroup: () => InputGroup,
47
48
  Link: () => Link,
48
49
  LoadingOverlay: () => loading_overlay_exports,
@@ -67,7 +68,7 @@ __export(src_exports, {
67
68
  Switch: () => Switch,
68
69
  Toaster: () => Toaster,
69
70
  Tooltip: () => Tooltip,
70
- createSystem: () => import_react163.createSystem,
71
+ createSystem: () => import_react164.createSystem,
71
72
  defaultConfig: () => defaultConfig,
72
73
  defaultPresenceOptions: () => defaultPresenceOptions,
73
74
  defaultSystem: () => defaultSystem,
@@ -165,7 +166,8 @@ var conditions = (0, import_react2.defineConditions)({
165
166
  groupChecked: ".group:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &, [role=group]:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &",
166
167
  groupExpanded: ".group:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &, [role=group]:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &",
167
168
  groupInvalid: ".group:invalid &, [role=group]:invalid &",
168
- parentHover: "button:hover > &, a:hover > &"
169
+ parentHover: "button:hover &, a:hover &, [role=button]:hover &",
170
+ pressable: "&:is(a, button, [role=button])"
169
171
  });
170
172
 
171
173
  // src/theme/global-css.ts
@@ -419,7 +421,7 @@ var buttonRecipe = (0, import_react5.defineRecipe)({
419
421
  sm: {
420
422
  gap: "2",
421
423
  h: "7",
422
- minW: "8",
424
+ minW: "7",
423
425
  textStyle: "sm",
424
426
  borderRadius: "md",
425
427
  px: "2.5"
@@ -532,10 +534,10 @@ var buttonRecipe = (0, import_react5.defineRecipe)({
532
534
  ghost: {
533
535
  color: "colorPalette.fg",
534
536
  _hover: {
535
- bg: "colorPalette.muted"
537
+ bg: "colorPalette.subtle"
536
538
  },
537
539
  _expanded: {
538
- bg: "colorPalette.muted"
540
+ bg: "colorPalette.subtle"
539
541
  }
540
542
  },
541
543
  plain: {
@@ -543,6 +545,14 @@ var buttonRecipe = (0, import_react5.defineRecipe)({
543
545
  }
544
546
  }
545
547
  },
548
+ compoundVariants: [
549
+ {
550
+ variant: "plain",
551
+ css: {
552
+ px: 0
553
+ }
554
+ }
555
+ ],
546
556
  defaultVariants: {
547
557
  size: "md",
548
558
  variant: "solid",
@@ -954,7 +964,14 @@ var inputRecipe = (0, import_react14.defineRecipe)({
954
964
  bg: "transparent",
955
965
  borderWidth: "1px",
956
966
  borderColor: "border",
957
- focusVisibleRing: "inside"
967
+ focusVisibleRing: "inside",
968
+ focusRingWidth: "0",
969
+ _hover: {
970
+ borderColor: "border.emphasized",
971
+ _focusVisible: {
972
+ borderColor: "var(--focus-ring-color)"
973
+ }
974
+ }
958
975
  },
959
976
  subtle: {
960
977
  borderWidth: "1px",
@@ -1157,9 +1174,7 @@ var radiomarkRecipe = (0, import_react19.defineRecipe)({
1157
1174
  borderRadius: "full",
1158
1175
  cursor: "radio",
1159
1176
  _focusVisible: {
1160
- outline: "2px solid",
1161
- outlineColor: "colorPalette.focusRing",
1162
- outlineOffset: "2px"
1177
+ focusVisibleRing: "outside"
1163
1178
  },
1164
1179
  _invalid: {
1165
1180
  colorPalette: "red",
@@ -1435,29 +1450,29 @@ var textareaRecipe = (0, import_react24.defineRecipe)({
1435
1450
  borderRadius: "sm",
1436
1451
  textStyle: "xs",
1437
1452
  px: "2",
1438
- py: "1.5",
1439
- scrollPaddingBottom: "1.5"
1453
+ py: "1",
1454
+ scrollPaddingBottom: "1"
1440
1455
  },
1441
1456
  sm: {
1442
1457
  borderRadius: "sm",
1443
1458
  textStyle: "sm",
1444
1459
  px: "2.5",
1445
- py: "2",
1446
- scrollPaddingBottom: "2"
1460
+ py: "1.5",
1461
+ scrollPaddingBottom: "1.5"
1447
1462
  },
1448
1463
  md: {
1449
1464
  borderRadius: "md",
1450
1465
  textStyle: "sm",
1451
1466
  px: "3",
1452
- py: "2",
1453
- scrollPaddingBottom: "2"
1467
+ py: "1.5",
1468
+ scrollPaddingBottom: "1.5"
1454
1469
  },
1455
1470
  lg: {
1456
1471
  borderRadius: "md",
1457
1472
  textStyle: "md",
1458
1473
  px: "4",
1459
- py: "3",
1460
- scrollPaddingBottom: "3"
1474
+ py: "2",
1475
+ scrollPaddingBottom: "2"
1461
1476
  },
1462
1477
  xl: {
1463
1478
  borderRadius: "lg",
@@ -1472,7 +1487,8 @@ var textareaRecipe = (0, import_react24.defineRecipe)({
1472
1487
  bg: "transparent",
1473
1488
  borderWidth: "1px",
1474
1489
  borderColor: "border",
1475
- focusVisibleRing: "inside"
1490
+ focusVisibleRing: "inside",
1491
+ focusRingWidth: 0
1476
1492
  },
1477
1493
  subtle: {
1478
1494
  borderWidth: "1px",
@@ -1547,7 +1563,7 @@ var semanticColors = import_react25.defineSemanticTokens.colors({
1547
1563
  },
1548
1564
  sidebar: {
1549
1565
  bg: {
1550
- value: { _light: "{colors.gray.50}", _dark: "{colors.gray.950}" }
1566
+ value: { _light: "{colors.gray.100}", _dark: "{colors.gray.900}" }
1551
1567
  },
1552
1568
  fg: {
1553
1569
  value: { _light: "{colors.gray.900}", _dark: "{colors.gray.200}" }
@@ -1557,7 +1573,7 @@ var semanticColors = import_react25.defineSemanticTokens.colors({
1557
1573
  },
1558
1574
  accent: {
1559
1575
  bg: {
1560
- value: { _light: "{colors.gray.200/40}", _dark: "{colors.gray.900}" }
1576
+ value: { _light: "{colors.gray.200/80}", _dark: "{colors.gray.900}" }
1561
1577
  },
1562
1578
  fg: {
1563
1579
  value: { _light: "{colors.gray.900}", _dark: "{colors.gray.200}" }
@@ -1654,9 +1670,6 @@ var semanticColors = import_react25.defineSemanticTokens.colors({
1654
1670
  value: { _light: "{colors.blue.500}", _dark: "{colors.blue.400}" }
1655
1671
  }
1656
1672
  },
1657
- focusRing: {
1658
- value: { _light: "{colors.blue.600/50}", _dark: "{colors.blue.500/50}" }
1659
- },
1660
1673
  accent: {
1661
1674
  contrast: {
1662
1675
  value: { _light: "white", _dark: "white" }
@@ -2201,44 +2214,50 @@ var import_react27 = require("@chakra-ui/react");
2201
2214
  var semanticShadows = import_react27.defineSemanticTokens.shadows({
2202
2215
  xs: {
2203
2216
  value: {
2204
- base: "0px 1px 2px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.100}",
2205
- _dark: "0px 1px 1px {colors.blackAlpha.800}, 0px 0px 1px inset {colors.whiteAlpha.300}"
2217
+ _light: "0px 1px 2px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/20}",
2218
+ _dark: "0px 1px 1px {black/64}, 0px 0px 1px inset {colors.gray.300/20}"
2206
2219
  }
2207
2220
  },
2208
2221
  sm: {
2209
2222
  value: {
2210
- base: "0px 4px 4px -1px {colors.blackAlpha.50}, 0px 0px 1px 1px {colors.blackAlpha.100}",
2211
- _dark: "0px 2px 4px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
2223
+ _light: "0px 2px 4px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
2224
+ _dark: "0px 2px 4px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
2212
2225
  }
2213
2226
  },
2214
2227
  md: {
2215
2228
  value: {
2216
- base: "0px 4px 8px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}",
2217
- _dark: "0px 4px 8px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
2229
+ _light: "0px 4px 8px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
2230
+ _dark: "0px 4px 8px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
2218
2231
  }
2219
2232
  },
2220
2233
  lg: {
2221
2234
  value: {
2222
- base: "0px 8px 16px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}",
2223
- _dark: "0px 8px 16px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
2235
+ _light: "0px 8px 16px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
2236
+ _dark: "0px 8px 16px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
2224
2237
  }
2225
2238
  },
2226
2239
  xl: {
2227
2240
  value: {
2228
- base: "0px 16px 24px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}",
2229
- _dark: "0px 16px 24px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
2241
+ _light: "0px 16px 24px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
2242
+ _dark: "0px 16px 24px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
2230
2243
  }
2231
2244
  },
2232
2245
  "2xl": {
2233
2246
  value: {
2234
- base: "0px 24px 40px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}",
2235
- _dark: "0px 24px 40px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
2247
+ _light: "0px 24px 40px {colors.gray.900/16}, 0px 0px 1px {colors.gray.900/30}",
2248
+ _dark: "0px 24px 40px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
2249
+ }
2250
+ },
2251
+ inner: {
2252
+ value: {
2253
+ _light: "inset 0 2px 4px 0 {black/5}",
2254
+ _dark: "inset 0 2px 4px 0 black"
2236
2255
  }
2237
2256
  },
2238
2257
  inset: {
2239
2258
  value: {
2240
- base: "inset 0 0 0 1px {colors.blackAlpha.100}",
2241
- _dark: "inset 0 0 0 1px {colors.whiteAlpha.100}"
2259
+ _light: "inset 0 1px 2px 0 {black/5}",
2260
+ _dark: "inset 0 1px 2px 0 {colors.gray.300/5}"
2242
2261
  }
2243
2262
  }
2244
2263
  });
@@ -2270,7 +2289,7 @@ var appShellSlotRecipe = (0, import_react28.defineSlotRecipe)({
2270
2289
  position: {
2271
2290
  static: {
2272
2291
  root: {
2273
- height: "100vh"
2292
+ height: "100dvh"
2274
2293
  }
2275
2294
  },
2276
2295
  fullscreen: {
@@ -2281,18 +2300,12 @@ var appShellSlotRecipe = (0, import_react28.defineSlotRecipe)({
2281
2300
  }
2282
2301
  },
2283
2302
  variant: {
2284
- plain: {},
2285
- raised: {
2286
- main: {
2287
- boxShadow: "xs",
2288
- zIndex: "layer-1"
2289
- }
2290
- }
2303
+ plain: {}
2291
2304
  }
2292
2305
  },
2293
2306
  defaultVariants: {
2294
2307
  position: "static",
2295
- variant: "raised"
2308
+ variant: "plain"
2296
2309
  }
2297
2310
  });
2298
2311
 
@@ -2303,7 +2316,6 @@ var gridListSlotRecipe = (0, import_react29.defineSlotRecipe)({
2303
2316
  slots: ["root", "item", "header", "cell"],
2304
2317
  base: {
2305
2318
  root: {
2306
- py: 2,
2307
2319
  position: "relative"
2308
2320
  },
2309
2321
  item: {
@@ -2312,35 +2324,14 @@ var gridListSlotRecipe = (0, import_react29.defineSlotRecipe)({
2312
2324
  alignItems: "center",
2313
2325
  justifyContent: "space-between",
2314
2326
  flex: 1,
2315
- cursor: "pointer",
2316
2327
  userSelect: "none",
2317
- transitionProperty: "common",
2318
- transitionDuration: "normal",
2319
2328
  borderRadius: "inherit",
2320
2329
  outline: "none",
2321
- _hover: {
2322
- bg: "blackAlpha.50",
2323
- _dark: {
2324
- bg: "whiteAlpha.50"
2325
- }
2326
- },
2327
2330
  _focusVisible: {
2328
2331
  boxShadow: "outline"
2329
2332
  },
2330
- _focus: {
2331
- bg: "blackAlpha.50",
2332
- _dark: {
2333
- bg: "whiteAlpha.50"
2334
- }
2335
- },
2336
- _active: {
2337
- bg: "blackAlpha.100",
2338
- _dark: {
2339
- bg: "whiteAlpha.100"
2340
- }
2341
- },
2342
2333
  _disabled: {
2343
- cursor: "inherit",
2334
+ cursor: "disabled",
2344
2335
  opacity: 0.5,
2345
2336
  _hover: {
2346
2337
  bg: "transparent",
@@ -2362,50 +2353,92 @@ var gridListSlotRecipe = (0, import_react29.defineSlotRecipe)({
2362
2353
  position: "sticky",
2363
2354
  fontSize: "md",
2364
2355
  fontWeight: "semibold",
2365
- color: "muted"
2356
+ color: "fg.muted"
2366
2357
  },
2367
2358
  cell: {
2368
- display: "flex",
2369
2359
  flexShrink: 0
2370
2360
  }
2371
2361
  },
2372
2362
  variants: {
2363
+ interactive: {
2364
+ true: {
2365
+ item: {
2366
+ cursor: "button",
2367
+ transitionProperty: "bg",
2368
+ transitionDuration: "fast",
2369
+ _hover: {
2370
+ bg: "bg.subtle"
2371
+ },
2372
+ _active: {
2373
+ bg: "bg.subtle"
2374
+ }
2375
+ }
2376
+ }
2377
+ },
2378
+ variant: {
2379
+ simple: {},
2380
+ rounded: {
2381
+ item: {
2382
+ borderRadius: "md",
2383
+ mb: 0.5
2384
+ }
2385
+ }
2386
+ },
2373
2387
  size: {
2374
2388
  sm: {
2375
2389
  root: {
2376
- fontSize: "sm"
2390
+ textStyle: "sm",
2391
+ py: 0.5
2377
2392
  },
2378
2393
  item: {
2379
2394
  py: 1,
2380
- px: 1
2395
+ px: 2,
2396
+ gap: 1
2381
2397
  },
2382
2398
  header: {
2383
2399
  py: 1,
2384
- px: 1
2385
- },
2386
- cell: {
2387
- px: 1
2400
+ px: 2
2388
2401
  }
2389
2402
  },
2390
2403
  md: {
2391
2404
  root: {
2392
- fontSize: "md"
2405
+ textStyle: "md",
2406
+ py: 1
2393
2407
  },
2394
2408
  item: {
2395
2409
  py: 2,
2396
- px: 2
2410
+ px: 3,
2411
+ gap: 2
2397
2412
  },
2398
2413
  header: {
2399
2414
  py: 2,
2400
- px: 2
2401
- },
2402
- cell: {
2403
- px: 2
2415
+ px: 3
2404
2416
  }
2405
2417
  }
2406
2418
  }
2407
2419
  },
2420
+ compoundVariants: [
2421
+ {
2422
+ variant: "rounded",
2423
+ size: "sm",
2424
+ css: {
2425
+ root: {
2426
+ p: 1
2427
+ }
2428
+ }
2429
+ },
2430
+ {
2431
+ variant: "rounded",
2432
+ size: "md",
2433
+ css: {
2434
+ root: {
2435
+ p: 2
2436
+ }
2437
+ }
2438
+ }
2439
+ ],
2408
2440
  defaultVariants: {
2441
+ variant: "simple",
2409
2442
  size: "md"
2410
2443
  }
2411
2444
  });
@@ -2488,7 +2521,7 @@ var navbarSlotRecipe = (0, import_react31.defineSlotRecipe)({
2488
2521
  top: 0,
2489
2522
  insetX: 0,
2490
2523
  transitionProperty: "common",
2491
- transitionDuration: "normal",
2524
+ transitionDuration: "moderate",
2492
2525
  transitionTimingFunction: "ease-in-out",
2493
2526
  _hidden: {
2494
2527
  transform: "translateY(-100%)"
@@ -2524,7 +2557,7 @@ var navbarSlotRecipe = (0, import_react31.defineSlotRecipe)({
2524
2557
  boxSizing: "border-box",
2525
2558
  borderRadius: "md",
2526
2559
  transitionProperty: "common",
2527
- transitionDuration: "normal",
2560
+ transitionDuration: "moderate",
2528
2561
  lineHeight: 1,
2529
2562
  _focusVisible: {
2530
2563
  outline: "none",
@@ -2588,7 +2621,8 @@ var baseStyleLabel = (0, import_react32.defineStyle)({
2588
2621
  overflow: "hidden",
2589
2622
  whiteSpace: "nowrap",
2590
2623
  textOverflow: "ellipsis",
2591
- minW: 0
2624
+ minW: 0,
2625
+ color: "fg"
2592
2626
  });
2593
2627
  var personaSlotRecipe = (0, import_react32.defineSlotRecipe)({
2594
2628
  className: "sui-persona",
@@ -2631,11 +2665,11 @@ var personaSlotRecipe = (0, import_react32.defineSlotRecipe)({
2631
2665
  label: baseStyleLabel,
2632
2666
  secondaryLabel: {
2633
2667
  ...baseStyleLabel,
2634
- color: "fg.muted"
2668
+ color: "fg/60"
2635
2669
  },
2636
2670
  tertiaryLabel: {
2637
2671
  ...baseStyleLabel,
2638
- color: "fg.muted"
2672
+ color: "fg/60"
2639
2673
  }
2640
2674
  },
2641
2675
  variants: {
@@ -2712,7 +2746,8 @@ var sidebarNavItemSlotRecipe = (0, import_react33.defineSlotRecipe)({
2712
2746
  cursor: "button",
2713
2747
  transitionProperty: "common",
2714
2748
  transitionDuration: "fast",
2715
- focusVisibleRing: "outside",
2749
+ focusVisibleRing: "inside",
2750
+ focusRingWidth: "1px",
2716
2751
  "& > svg": {
2717
2752
  boxSize: 4,
2718
2753
  color: "var(--sidebar-item-icon-color)"
@@ -2724,7 +2759,12 @@ var sidebarNavItemSlotRecipe = (0, import_react33.defineSlotRecipe)({
2724
2759
  endElement: {
2725
2760
  display: "flex",
2726
2761
  gap: "1px",
2727
- ms: "auto"
2762
+ ms: "auto",
2763
+ "& button": {
2764
+ _hover: {
2765
+ bg: "transparent"
2766
+ }
2767
+ }
2728
2768
  }
2729
2769
  },
2730
2770
  variants: {
@@ -2868,7 +2908,10 @@ var sidebarSlotRecipe = (0, import_react34.defineSlotRecipe)({
2868
2908
  },
2869
2909
  groupEndElement: {
2870
2910
  "& > button": {
2871
- boxSize: 6
2911
+ boxSize: 6,
2912
+ _hover: {
2913
+ bg: "transparent"
2914
+ }
2872
2915
  }
2873
2916
  },
2874
2917
  groupContent: {
@@ -2979,11 +3022,6 @@ var sidebarSlotRecipe = (0, import_react34.defineSlotRecipe)({
2979
3022
  },
2980
3023
  compact: {}
2981
3024
  },
2982
- variant: {
2983
- muted: {},
2984
- solid: {},
2985
- subtle: {}
2986
- },
2987
3025
  size: {
2988
3026
  md: {
2989
3027
  header: {
@@ -3003,7 +3041,6 @@ var sidebarSlotRecipe = (0, import_react34.defineSlotRecipe)({
3003
3041
  },
3004
3042
  defaultVariants: {
3005
3043
  mode: "collapsible",
3006
- variant: "muted",
3007
3044
  size: "md"
3008
3045
  }
3009
3046
  });
@@ -3671,7 +3708,7 @@ var cardSlotRecipe = (0, import_react41.defineSlotRecipe)({
3671
3708
  position: "relative",
3672
3709
  minWidth: "0",
3673
3710
  wordWrap: "break-word",
3674
- borderRadius: "l3",
3711
+ borderRadius: "lg",
3675
3712
  color: "fg",
3676
3713
  textAlign: "start"
3677
3714
  },
@@ -3683,14 +3720,15 @@ var cardSlotRecipe = (0, import_react41.defineSlotRecipe)({
3683
3720
  fontSize: "sm"
3684
3721
  },
3685
3722
  header: {
3686
- paddingInline: "var(--card-padding)",
3687
- paddingTop: "var(--card-padding)",
3723
+ padding: "var(--card-padding)",
3724
+ paddingBlock: "calc(var(--card-padding) / 1.5)",
3688
3725
  display: "flex",
3689
3726
  flexDirection: "column",
3690
3727
  gap: "1.5"
3691
3728
  },
3692
3729
  body: {
3693
3730
  padding: "var(--card-padding)",
3731
+ paddingBlock: "calc(var(--card-padding) / 1.5)",
3694
3732
  flex: "1",
3695
3733
  display: "flex",
3696
3734
  flexDirection: "column"
@@ -3699,15 +3737,15 @@ var cardSlotRecipe = (0, import_react41.defineSlotRecipe)({
3699
3737
  display: "flex",
3700
3738
  alignItems: "center",
3701
3739
  gap: "2",
3702
- paddingInline: "var(--card-padding)",
3703
- paddingBottom: "var(--card-padding)"
3740
+ padding: "var(--card-padding)",
3741
+ paddingBlock: "calc(var(--card-padding) / 1.5)"
3704
3742
  }
3705
3743
  },
3706
3744
  variants: {
3707
3745
  size: {
3708
3746
  sm: {
3709
3747
  root: {
3710
- "--card-padding": "spacing.4"
3748
+ "--card-padding": "spacing.2"
3711
3749
  },
3712
3750
  title: {
3713
3751
  textStyle: "md"
@@ -3715,7 +3753,7 @@ var cardSlotRecipe = (0, import_react41.defineSlotRecipe)({
3715
3753
  },
3716
3754
  md: {
3717
3755
  root: {
3718
- "--card-padding": "spacing.6"
3756
+ "--card-padding": "spacing.3"
3719
3757
  },
3720
3758
  title: {
3721
3759
  textStyle: "lg"
@@ -3723,7 +3761,7 @@ var cardSlotRecipe = (0, import_react41.defineSlotRecipe)({
3723
3761
  },
3724
3762
  lg: {
3725
3763
  root: {
3726
- "--card-padding": "spacing.7"
3764
+ "--card-padding": "spacing.6"
3727
3765
  },
3728
3766
  title: {
3729
3767
  textStyle: "xl"
@@ -3734,19 +3772,41 @@ var cardSlotRecipe = (0, import_react41.defineSlotRecipe)({
3734
3772
  elevated: {
3735
3773
  root: {
3736
3774
  bg: "bg.panel",
3737
- boxShadow: "md"
3775
+ boxShadow: "md",
3776
+ borderWidth: "0.5px",
3777
+ borderColor: "border",
3778
+ _pressable: {
3779
+ transitionProperty: "common",
3780
+ transitionDuration: "fast",
3781
+ _hover: {
3782
+ borderColor: "border.emphasized"
3783
+ }
3784
+ }
3738
3785
  }
3739
3786
  },
3740
3787
  outline: {
3741
3788
  root: {
3742
3789
  bg: "bg.panel",
3743
3790
  borderWidth: "1px",
3744
- borderColor: "border"
3791
+ borderColor: "border",
3792
+ _pressable: {
3793
+ transitionProperty: "common",
3794
+ transitionDuration: "fast",
3795
+ _hover: {
3796
+ borderColor: "border.emphasized"
3797
+ }
3798
+ }
3745
3799
  }
3746
3800
  },
3747
3801
  subtle: {
3748
3802
  root: {
3749
- bg: "bg.muted"
3803
+ bg: "colorPalette.muted"
3804
+ }
3805
+ },
3806
+ solid: {
3807
+ root: {
3808
+ bg: "colorPalette.solid",
3809
+ color: "colorPalette.contrast"
3750
3810
  }
3751
3811
  }
3752
3812
  }
@@ -4033,14 +4093,14 @@ var collapsibleSlotRecipe = (0, import_react44.defineSlotRecipe)({
4033
4093
  className: "chakra-collapsible",
4034
4094
  base: {
4035
4095
  content: {
4036
- overflow: "hidden",
4037
4096
  _open: {
4038
4097
  animationName: "expand-height, fade-in",
4039
4098
  animationDuration: "moderate"
4040
4099
  },
4041
4100
  _closed: {
4042
4101
  animationName: "collapse-height, fade-out",
4043
- animationDuration: "moderate"
4102
+ animationDuration: "moderate",
4103
+ overflow: "hidden"
4044
4104
  }
4045
4105
  }
4046
4106
  }
@@ -4570,7 +4630,7 @@ var editableSlotRecipe = (0, import_react48.defineSlotRecipe)({
4570
4630
  display: "inline-flex",
4571
4631
  alignItems: "center",
4572
4632
  transitionProperty: "common",
4573
- transitionDuration: "normal",
4633
+ transitionDuration: "moderate",
4574
4634
  cursor: "text",
4575
4635
  _hover: {
4576
4636
  bg: "bg.muted"
@@ -4585,7 +4645,7 @@ var editableSlotRecipe = (0, import_react48.defineSlotRecipe)({
4585
4645
  py: "1",
4586
4646
  px: "1",
4587
4647
  transitionProperty: "common",
4588
- transitionDuration: "normal",
4648
+ transitionDuration: "moderate",
4589
4649
  width: "full",
4590
4650
  focusVisibleRing: "inside",
4591
4651
  focusRingWidth: "2px",
@@ -4635,7 +4695,12 @@ var emptyStateSlotRecipe = (0, import_react49.defineSlotRecipe)({
4635
4695
  className: "chakra-empty-state",
4636
4696
  base: {
4637
4697
  root: {
4638
- width: "full"
4698
+ width: "full",
4699
+ height: "full",
4700
+ display: "flex",
4701
+ flexDirection: "column",
4702
+ alignItems: "center",
4703
+ justifyContent: "center"
4639
4704
  },
4640
4705
  content: {
4641
4706
  display: "flex",
@@ -4766,12 +4831,21 @@ var fieldSlotRecipe = (0, import_react50.defineSlotRecipe)({
4766
4831
  },
4767
4832
  horizontal: {
4768
4833
  root: {
4769
- flexDirection: "row",
4834
+ display: "grid",
4835
+ gridTemplateColumns: "var(--field-label-width, 8rem) 1fr",
4770
4836
  alignItems: "center",
4771
- justifyContent: "space-between"
4837
+ "&:has(textarea)": {
4838
+ alignItems: "flex-start",
4839
+ "& label": {
4840
+ pt: 1.5
4841
+ }
4842
+ }
4772
4843
  },
4773
- label: {
4774
- flex: "0 0 var(--field-label-width, 80px)"
4844
+ helperText: {
4845
+ gridColumn: 2
4846
+ },
4847
+ errorText: {
4848
+ gridColumn: 2
4775
4849
  }
4776
4850
  }
4777
4851
  }
@@ -5158,6 +5232,7 @@ var selectSlotRecipe = (0, import_react55.defineSlotRecipe)({
5158
5232
  userSelect: "none",
5159
5233
  textAlign: "start",
5160
5234
  focusVisibleRing: "inside",
5235
+ focusRingWidth: 0,
5161
5236
  _placeholderShown: {
5162
5237
  color: "fg.muted"
5163
5238
  },
@@ -5166,6 +5241,12 @@ var selectSlotRecipe = (0, import_react55.defineSlotRecipe)({
5166
5241
  },
5167
5242
  _invalid: {
5168
5243
  borderColor: "border.error"
5244
+ },
5245
+ _hover: {
5246
+ borderColor: "border.emphasized",
5247
+ _focusVisible: {
5248
+ borderColor: "var(--focus-ring-color)"
5249
+ }
5169
5250
  }
5170
5251
  },
5171
5252
  indicatorGroup: {
@@ -5600,7 +5681,8 @@ var numberInputSlotRecipe = (0, import_react57.defineSlotRecipe)({
5600
5681
  root: {
5601
5682
  position: "relative",
5602
5683
  zIndex: "0",
5603
- isolation: "isolate"
5684
+ isolation: "isolate",
5685
+ width: "full"
5604
5686
  },
5605
5687
  input: {
5606
5688
  ...inputRecipe.base,
@@ -6377,15 +6459,16 @@ var segmentGroupSlotRecipe = (0, import_react65.defineSlotRecipe)({
6377
6459
  slots: import_anatomy31.segmentGroupAnatomy.keys(),
6378
6460
  base: {
6379
6461
  root: {
6380
- "--segment-radius": "radii.l2",
6381
- borderRadius: "l2",
6462
+ "--segment-radius": "radii.md",
6463
+ borderRadius: "md",
6382
6464
  display: "inline-flex",
6383
6465
  boxShadow: "inset",
6384
6466
  minW: "max-content",
6385
6467
  textAlign: "center",
6386
6468
  position: "relative",
6387
6469
  isolation: "isolate",
6388
- bg: "bg.muted"
6470
+ bg: "bg.muted",
6471
+ borderWidth: "1px"
6389
6472
  },
6390
6473
  item: {
6391
6474
  display: "flex",
@@ -6393,23 +6476,31 @@ var segmentGroupSlotRecipe = (0, import_react65.defineSlotRecipe)({
6393
6476
  userSelect: "none",
6394
6477
  fontSize: "sm",
6395
6478
  position: "relative",
6396
- color: "fg",
6479
+ color: "fg.subtle",
6480
+ cursor: "button",
6397
6481
  borderRadius: "var(--segment-radius)",
6398
6482
  _disabled: {
6399
6483
  opacity: "0.5"
6400
6484
  },
6485
+ _hover: {
6486
+ color: "fg"
6487
+ },
6401
6488
  "&:has(input:focus-visible)": {
6402
- focusRing: "outside"
6489
+ focusRing: "inside",
6490
+ focusRingWidth: "1px"
6403
6491
  },
6404
6492
  _before: {
6405
6493
  content: '""',
6406
6494
  position: "absolute",
6407
6495
  insetInlineStart: 0,
6408
- insetBlock: "1.5",
6496
+ insetBlock: "0",
6409
6497
  bg: "border",
6410
6498
  width: "1px",
6411
6499
  transition: "opacity 0.2s"
6412
6500
  },
6501
+ _checked: {
6502
+ color: "fg"
6503
+ },
6413
6504
  "& + &[data-state=checked], &[data-state=checked] + &, &:first-of-type": {
6414
6505
  _before: {
6415
6506
  opacity: "0"
@@ -6418,13 +6509,17 @@ var segmentGroupSlotRecipe = (0, import_react65.defineSlotRecipe)({
6418
6509
  "&[data-state=checked][data-ssr]": {
6419
6510
  shadow: "sm",
6420
6511
  bg: "bg",
6512
+ color: "fg",
6421
6513
  borderRadius: "var(--segment-radius)"
6422
6514
  }
6423
6515
  },
6424
6516
  indicator: {
6425
6517
  shadow: "sm",
6426
6518
  pos: "absolute",
6427
- bg: { _light: "bg", _dark: "bg.emphasized" },
6519
+ bg: {
6520
+ base: "bg",
6521
+ _dark: "bg.emphasized"
6522
+ },
6428
6523
  width: "var(--width)",
6429
6524
  height: "var(--height)",
6430
6525
  top: "var(--top)",
@@ -6447,7 +6542,7 @@ var segmentGroupSlotRecipe = (0, import_react65.defineSlotRecipe)({
6447
6542
  },
6448
6543
  sm: {
6449
6544
  root: {
6450
- height: "8"
6545
+ height: "7"
6451
6546
  },
6452
6547
  item: {
6453
6548
  textStyle: "sm",
@@ -6457,7 +6552,7 @@ var segmentGroupSlotRecipe = (0, import_react65.defineSlotRecipe)({
6457
6552
  },
6458
6553
  md: {
6459
6554
  root: {
6460
- height: "10"
6555
+ height: "8"
6461
6556
  },
6462
6557
  item: {
6463
6558
  textStyle: "sm",
@@ -7056,9 +7151,7 @@ var switchSlotRecipe = (0, import_react70.defineSlotRecipe)({
7056
7151
  cursor: "not-allowed"
7057
7152
  },
7058
7153
  _invalid: {
7059
- outline: "2px solid",
7060
- outlineColor: "border.error",
7061
- outlineOffset: "2px"
7154
+ focusRingColor: "border.error"
7062
7155
  }
7063
7156
  },
7064
7157
  thumb: {
@@ -7363,8 +7456,7 @@ var tabsSlotRecipe = (0, import_react72.defineSlotRecipe)({
7363
7456
  gap: "2",
7364
7457
  _focusVisible: {
7365
7458
  zIndex: 1,
7366
- outline: "2px solid",
7367
- outlineColor: "colorPalette.focusRing"
7459
+ focusVisibleRing: "outside"
7368
7460
  },
7369
7461
  _disabled: {
7370
7462
  cursor: "not-allowed",
@@ -8893,12 +8985,67 @@ var zIndices = import_react95.defineTokens.zIndex({
8893
8985
  max: { value: 2147483647 }
8894
8986
  });
8895
8987
 
8988
+ // src/theme/utilities.ts
8989
+ var createFocusRing = (selector) => {
8990
+ return {
8991
+ values: ["outside", "inside", "mixed", "none"],
8992
+ transform(value, { token }) {
8993
+ var _a8;
8994
+ const focusRingColor = token("colors.colorPalette.focusRing");
8995
+ const styles = {
8996
+ inside: {
8997
+ "--focus-ring-color": focusRingColor,
8998
+ [selector]: {
8999
+ outlineOffset: "0px",
9000
+ outlineWidth: "var(--focus-ring-width, 0)",
9001
+ outlineColor: "var(--focus-ring-color)",
9002
+ outlineStyle: "var(--focus-ring-style, solid)",
9003
+ borderColor: "var(--focus-ring-color)"
9004
+ }
9005
+ },
9006
+ outside: {
9007
+ "--focus-ring-color": focusRingColor,
9008
+ [selector]: {
9009
+ outlineWidth: "var(--focus-ring-width, 1px)",
9010
+ outlineOffset: "var(--focus-ring-offset, 2px)",
9011
+ outlineStyle: "var(--focus-ring-style, solid)",
9012
+ outlineColor: "var(--focus-ring-color)"
9013
+ }
9014
+ },
9015
+ mixed: {
9016
+ "--focus-ring-color": focusRingColor,
9017
+ [selector]: {
9018
+ outlineWidth: "var(--focus-ring-width, 3px)",
9019
+ outlineStyle: "var(--focus-ring-style, solid)",
9020
+ outlineColor: "color-mix(in srgb, var(--focus-ring-color), transparent 60%)",
9021
+ borderColor: "var(--focus-ring-color)"
9022
+ }
9023
+ },
9024
+ none: {
9025
+ "--focus-ring-color": focusRingColor,
9026
+ [selector]: {
9027
+ outline: "none"
9028
+ }
9029
+ }
9030
+ };
9031
+ return (_a8 = styles[value]) != null ? _a8 : {};
9032
+ }
9033
+ };
9034
+ };
9035
+ var utilities = {
9036
+ focusRing: createFocusRing("&:is(:focus, [data-focus])"),
9037
+ focusVisibleRing: createFocusRing(
9038
+ "&:is(:focus-visible, [data-focus-visible])"
9039
+ )
9040
+ };
9041
+
8896
9042
  // src/theme/index.ts
8897
9043
  var defaultThemeConfig = (0, import_react96.defineConfig)({
8898
9044
  preflight: true,
8899
9045
  cssVarsPrefix: "chakra",
8900
9046
  cssVarsRoot: ":where(html, .chakra-theme)",
8901
9047
  globalCss,
9048
+ utilities,
8902
9049
  theme: {
8903
9050
  breakpoints,
8904
9051
  keyframes,
@@ -8937,10 +9084,15 @@ var defaultThemeConfig = (0, import_react96.defineConfig)({
8937
9084
 
8938
9085
  // src/preset.ts
8939
9086
  var defaultConfig = (0, import_react97.mergeConfigs)(import_react97.defaultBaseConfig, defaultThemeConfig);
9087
+ var _a7;
9088
+ defaultConfig.utilities = Object.assign(
9089
+ (_a7 = defaultConfig.utilities) != null ? _a7 : {},
9090
+ utilities
9091
+ );
8940
9092
  var defaultSystem = (0, import_react97.createSystem)(defaultConfig);
8941
9093
 
8942
9094
  // src/index.ts
8943
- var import_react163 = require("@chakra-ui/react");
9095
+ var import_react164 = require("@chakra-ui/react");
8944
9096
 
8945
9097
  // src/provider/sui-provider.tsx
8946
9098
  var React = __toESM(require("react"), 1);
@@ -9237,8 +9389,8 @@ var EllipsisIcon = createIcon({
9237
9389
  var import_jsx_runtime8 = require("react/jsx-runtime");
9238
9390
  var CloseButton = (0, import_react111.forwardRef)(
9239
9391
  function CloseButton2(props, ref) {
9240
- var _a7;
9241
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react112.IconButton, { variant: "ghost", "aria-label": "Close", ref, ...props, children: (_a7 = props.children) != null ? _a7 : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon, {}) });
9392
+ var _a8;
9393
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react112.IconButton, { variant: "ghost", "aria-label": "Close", ref, ...props, children: (_a8 = props.children) != null ? _a8 : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon, {}) });
9242
9394
  }
9243
9395
  );
9244
9396
 
@@ -9466,11 +9618,14 @@ var IconBadge = React2.forwardRef(
9466
9618
  }
9467
9619
  );
9468
9620
 
9621
+ // src/components/icon-button/index.ts
9622
+ var import_react123 = require("@chakra-ui/react");
9623
+
9469
9624
  // src/components/input-group/input-group.tsx
9470
- var import_react123 = require("react");
9471
- var import_react124 = require("@chakra-ui/react");
9625
+ var import_react124 = require("react");
9626
+ var import_react125 = require("@chakra-ui/react");
9472
9627
  var import_jsx_runtime14 = require("react/jsx-runtime");
9473
- var InputGroup = (0, import_react123.forwardRef)(
9628
+ var InputGroup = (0, import_react124.forwardRef)(
9474
9629
  function InputGroup2(props, ref) {
9475
9630
  const {
9476
9631
  startElement,
@@ -9480,26 +9635,26 @@ var InputGroup = (0, import_react123.forwardRef)(
9480
9635
  children,
9481
9636
  ...rest
9482
9637
  } = props;
9483
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react124.Group, { ref, display: "flex", ...rest, children: [
9484
- startElement && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react124.InputElement, { pointerEvents: "none", ...startElementProps, children: startElement }),
9485
- (0, import_react123.isValidElement)(children) && (0, import_react123.cloneElement)(children, {
9638
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react125.Group, { ref, display: "flex", ...rest, children: [
9639
+ startElement && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react125.InputElement, { pointerEvents: "none", ...startElementProps, children: startElement }),
9640
+ (0, import_react124.isValidElement)(children) && (0, import_react124.cloneElement)(children, {
9486
9641
  ...startElement && { ps: "calc(var(--input-height) - 6px)" },
9487
9642
  ...endElement && { pe: "calc(var(--input-height) - 6px)" },
9488
9643
  ...children.props
9489
9644
  }),
9490
- endElement && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react124.InputElement, { placement: "end", ...endElementProps, children: endElement })
9645
+ endElement && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react125.InputElement, { placement: "end", ...endElementProps, children: endElement })
9491
9646
  ] });
9492
9647
  }
9493
9648
  );
9494
9649
 
9495
9650
  // src/components/link/link.tsx
9496
- var import_react125 = __toESM(require("react"), 1);
9497
- var import_react126 = require("@chakra-ui/react");
9651
+ var import_react126 = __toESM(require("react"), 1);
9652
+ var import_react127 = require("@chakra-ui/react");
9498
9653
  var import_jsx_runtime15 = require("react/jsx-runtime");
9499
- var Link = import_react125.default.forwardRef(
9654
+ var Link = import_react126.default.forwardRef(
9500
9655
  (props, ref) => {
9501
9656
  const LinkComponent = useLink();
9502
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react126.Link, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(LinkComponent, { ref, ...props }) });
9657
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react127.Link, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(LinkComponent, { ref, ...props }) });
9503
9658
  }
9504
9659
  );
9505
9660
  Link.displayName = "Link";
@@ -9512,29 +9667,29 @@ __export(loading_overlay_exports, {
9512
9667
  Text: () => LoadingOverlayText
9513
9668
  });
9514
9669
  var import_presence = require("@ark-ui/react/presence");
9515
- var import_react130 = require("@chakra-ui/react");
9670
+ var import_react131 = require("@chakra-ui/react");
9516
9671
 
9517
9672
  // src/components/spinner/spinner.tsx
9518
- var import_react127 = require("react");
9519
- var import_react128 = require("@chakra-ui/react");
9673
+ var import_react128 = require("react");
9674
+ var import_react129 = require("@chakra-ui/react");
9520
9675
  var import_jsx_runtime16 = require("react/jsx-runtime");
9521
- var Spinner2 = (0, import_react127.forwardRef)(
9676
+ var Spinner2 = (0, import_react128.forwardRef)(
9522
9677
  function Spinner3(props, ref) {
9523
9678
  const { loading, children, ...rest } = props;
9524
9679
  if (loading === false) {
9525
9680
  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children });
9526
9681
  }
9527
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react128.Spinner, { ref, ...rest });
9682
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react129.Spinner, { ref, ...rest });
9528
9683
  }
9529
9684
  );
9530
9685
 
9531
9686
  // src/components/loading-overlay/loading-overlay.context.ts
9532
- var import_react129 = require("@chakra-ui/react");
9687
+ var import_react130 = require("@chakra-ui/react");
9533
9688
  var {
9534
9689
  useStyles: useLoadingOverlayStyles,
9535
9690
  withContext: withContext4,
9536
9691
  withProvider: withProvider3
9537
- } = (0, import_react129.createSlotRecipeContext)({
9692
+ } = (0, import_react130.createSlotRecipeContext)({
9538
9693
  key: "suiLoadingOverlay"
9539
9694
  });
9540
9695
 
@@ -9543,7 +9698,7 @@ var import_jsx_runtime17 = require("react/jsx-runtime");
9543
9698
  var LoadingOverlay = (props) => {
9544
9699
  const { children, loading = true, ...rest } = props;
9545
9700
  const [presenceProps, rootProps] = (0, import_presence.splitPresenceProps)(rest);
9546
- return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_presence.Presence, { present: loading, ...presenceProps, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react130.chakra.div, { ...rootProps, children }) });
9701
+ return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_presence.Presence, { present: loading, ...presenceProps, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react131.chakra.div, { ...rootProps, children }) });
9547
9702
  };
9548
9703
  var LoadingOverlayRoot = withProvider3(
9549
9704
  LoadingOverlay,
@@ -9565,16 +9720,16 @@ __export(navbar_exports, {
9565
9720
  Link: () => NavbarLink,
9566
9721
  Root: () => NavbarRoot
9567
9722
  });
9568
- var import_react132 = require("react");
9723
+ var import_react133 = require("react");
9569
9724
  var import_navbar = require("@saas-ui/core/navbar");
9570
9725
 
9571
9726
  // src/components/navbar/navbar.context.ts
9572
- var import_react131 = require("@chakra-ui/react");
9727
+ var import_react132 = require("@chakra-ui/react");
9573
9728
  var {
9574
9729
  withProvider: withProvider4,
9575
9730
  withContext: withContext5,
9576
9731
  useStyles: useNavbarStyles
9577
- } = (0, import_react131.createSlotRecipeContext)({
9732
+ } = (0, import_react132.createSlotRecipeContext)({
9578
9733
  key: "suiNavbar"
9579
9734
  });
9580
9735
 
@@ -9597,7 +9752,7 @@ var NavbarItem = withContext5(
9597
9752
  "item"
9598
9753
  );
9599
9754
  var NavbarLink = withContext5(
9600
- (0, import_react132.forwardRef)((props, ref) => {
9755
+ (0, import_react133.forwardRef)((props, ref) => {
9601
9756
  const Link2 = useLink();
9602
9757
  const { active, ...rest } = props;
9603
9758
  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_navbar.Navbar.Link, { asChild: true, ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Link2, { "data-active": active ? "" : void 0, ...props }) });
@@ -9609,10 +9764,10 @@ var NavbarLink = withContext5(
9609
9764
  );
9610
9765
 
9611
9766
  // src/components/number-input/number-input.tsx
9612
- var import_react133 = require("react");
9613
- var import_react134 = require("@chakra-ui/react");
9767
+ var import_react134 = require("react");
9768
+ var import_react135 = require("@chakra-ui/react");
9614
9769
  var import_jsx_runtime19 = require("react/jsx-runtime");
9615
- var NumberInput = (0, import_react133.forwardRef)(
9770
+ var NumberInput = (0, import_react134.forwardRef)(
9616
9771
  function NumberInput2(props, ref) {
9617
9772
  const {
9618
9773
  hideControls,
@@ -9622,11 +9777,19 @@ var NumberInput = (0, import_react133.forwardRef)(
9622
9777
  rootRef,
9623
9778
  ...rest
9624
9779
  } = props;
9625
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react134.NumberInput.Root, { ref: rootRef, ...rest, children: [
9626
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(InputGroup, { startElement, endElement, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react134.NumberInput.Input, { ref, ...inputProps }) }),
9627
- !hideControls && !endElement ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react134.NumberInput.Control, { children: [
9628
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react134.NumberInput.IncrementTrigger, {}),
9629
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react134.NumberInput.DecrementTrigger, {})
9780
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react135.NumberInput.Root, { ref: rootRef, ...rest, children: [
9781
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
9782
+ InputGroup,
9783
+ {
9784
+ startElement,
9785
+ endElement,
9786
+ width: "full",
9787
+ children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react135.NumberInput.Input, { ref, ...inputProps })
9788
+ }
9789
+ ),
9790
+ !hideControls && !endElement ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react135.NumberInput.Control, { children: [
9791
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react135.NumberInput.IncrementTrigger, {}),
9792
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react135.NumberInput.DecrementTrigger, {})
9630
9793
  ] }) : null
9631
9794
  ] });
9632
9795
  }
@@ -9652,72 +9815,73 @@ __export(menu_exports, {
9652
9815
  Trigger: () => MenuTrigger,
9653
9816
  TriggerItem: () => MenuTriggerItem
9654
9817
  });
9655
- var import_react135 = require("react");
9656
- var import_react136 = require("@chakra-ui/react");
9818
+ var import_react136 = require("react");
9819
+ var import_react137 = require("@chakra-ui/react");
9657
9820
  var import_jsx_runtime20 = require("react/jsx-runtime");
9658
- var MenuContent = (0, import_react135.forwardRef)(
9821
+ var MenuContent = (0, import_react136.forwardRef)(
9659
9822
  function MenuContent2(props, ref) {
9660
9823
  const { portalled = true, portalRef, ...rest } = props;
9661
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.Menu.Content, { ref, ...rest }) }) });
9824
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.Menu.Content, { ref, ...rest }) }) });
9662
9825
  }
9663
9826
  );
9664
- var MenuArrow = (0, import_react135.forwardRef)(
9827
+ var MenuArrow = (0, import_react136.forwardRef)(
9665
9828
  function MenuArrow2(props, ref) {
9666
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.Menu.Arrow, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.Menu.ArrowTip, {}) });
9829
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.Menu.Arrow, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.Menu.ArrowTip, {}) });
9667
9830
  }
9668
9831
  );
9669
- var MenuCheckboxItem = (0, import_react135.forwardRef)(function MenuCheckboxItem2(props, ref) {
9670
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react136.Menu.CheckboxItem, { ref, ...props, children: [
9671
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.Menu.ItemIndicator, { hidden: false, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CheckIcon, {}) }),
9832
+ var MenuCheckboxItem = (0, import_react136.forwardRef)(function MenuCheckboxItem2(props, ref) {
9833
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react137.Menu.CheckboxItem, { ref, ...props, children: [
9834
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.Menu.ItemIndicator, { hidden: false, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CheckIcon, {}) }),
9672
9835
  props.children
9673
9836
  ] });
9674
9837
  });
9675
- var MenuRadioItem = (0, import_react135.forwardRef)(
9838
+ var MenuRadioItem = (0, import_react136.forwardRef)(
9676
9839
  function MenuRadioItem2(props, ref) {
9677
9840
  const { children, ...rest } = props;
9678
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react136.Menu.RadioItem, { ps: "8", ref, ...rest, children: [
9679
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.AbsoluteCenter, { axis: "horizontal", left: "4", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.Menu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CheckIcon, {}) }) }),
9680
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.Menu.ItemText, { children })
9841
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react137.Menu.RadioItem, { ps: "8", ref, ...rest, children: [
9842
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.AbsoluteCenter, { axis: "horizontal", left: "4", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.Menu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CheckIcon, {}) }) }),
9843
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.Menu.ItemText, { children })
9681
9844
  ] });
9682
9845
  }
9683
9846
  );
9684
- var MenuItemGroup = (0, import_react135.forwardRef)(
9847
+ var MenuItemGroup = (0, import_react136.forwardRef)(
9685
9848
  function MenuItemGroup2(props, ref) {
9686
9849
  const { title, children, ...rest } = props;
9687
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react136.Menu.ItemGroup, { ref, ...rest, children: [
9688
- title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react136.Menu.ItemGroupLabel, { userSelect: "none", children: title }),
9850
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react137.Menu.ItemGroup, { ref, ...rest, children: [
9851
+ title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react137.Menu.ItemGroupLabel, { userSelect: "none", children: title }),
9689
9852
  children
9690
9853
  ] });
9691
9854
  }
9692
9855
  );
9693
- var MenuTriggerItem = (0, import_react135.forwardRef)(
9856
+ var MenuTriggerItem = (0, import_react136.forwardRef)(
9694
9857
  function MenuTriggerItem2(props, ref) {
9695
9858
  const { startIcon, children, ...rest } = props;
9696
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react136.Menu.TriggerItem, { ref, ...rest, children: [
9859
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react137.Menu.TriggerItem, { ref, ...rest, children: [
9697
9860
  startIcon,
9698
9861
  children,
9699
9862
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRightIcon, {})
9700
9863
  ] });
9701
9864
  }
9702
9865
  );
9703
- var MenuButton = (0, import_react135.forwardRef)(
9866
+ var MenuButton = (0, import_react136.forwardRef)(
9704
9867
  function MenuButton2(props, ref) {
9705
9868
  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MenuTrigger, { ref, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { ...props }) });
9706
9869
  }
9707
9870
  );
9708
- var MenuRadioItemGroup = import_react136.Menu.RadioItemGroup;
9709
- var MenuContextTrigger = import_react136.Menu.ContextTrigger;
9710
- var MenuRoot = import_react136.Menu.Root;
9711
- var MenuSeparator = import_react136.Menu.Separator;
9712
- var MenuContext = import_react136.Menu.Context;
9713
- var MenuItem = import_react136.Menu.Item;
9714
- var MenuItemText = import_react136.Menu.ItemText;
9715
- var MenuItemCommand = import_react136.Menu.ItemCommand;
9716
- var MenuTrigger = import_react136.Menu.Trigger;
9871
+ var MenuRadioItemGroup = import_react137.Menu.RadioItemGroup;
9872
+ var MenuContextTrigger = import_react137.Menu.ContextTrigger;
9873
+ var MenuRoot = import_react137.Menu.Root;
9874
+ var MenuSeparator = import_react137.Menu.Separator;
9875
+ var MenuContext = import_react137.Menu.Context;
9876
+ var MenuItem = import_react137.Menu.Item;
9877
+ var MenuItemText = import_react137.Menu.ItemText;
9878
+ var MenuItemCommand = import_react137.Menu.ItemCommand;
9879
+ var MenuTrigger = import_react137.Menu.Trigger;
9717
9880
 
9718
9881
  // src/components/pagination/pagination.tsx
9719
9882
  var pagination_exports = {};
9720
9883
  __export(pagination_exports, {
9884
+ Context: () => Context,
9721
9885
  Ellipsis: () => Ellipsis,
9722
9886
  Item: () => Item,
9723
9887
  Items: () => Items,
@@ -9728,10 +9892,10 @@ __export(pagination_exports, {
9728
9892
  PrevTrigger: () => PrevTrigger,
9729
9893
  Root: () => Root
9730
9894
  });
9731
- var import_react137 = require("react");
9732
- var import_react138 = require("@chakra-ui/react");
9895
+ var import_react138 = require("react");
9896
+ var import_react139 = require("@chakra-ui/react");
9733
9897
  var import_jsx_runtime21 = require("react/jsx-runtime");
9734
- var [RootPropsProvider, useRootProps] = (0, import_react138.createContext)({
9898
+ var [RootPropsProvider, useRootProps] = (0, import_react139.createContext)({
9735
9899
  name: "RootPropsProvider"
9736
9900
  });
9737
9901
  var variantMap = {
@@ -9739,66 +9903,66 @@ var variantMap = {
9739
9903
  solid: { default: "outline", ellipsis: "outline", current: "solid" },
9740
9904
  subtle: { default: "ghost", ellipsis: "plain", current: "subtle" }
9741
9905
  };
9742
- var Root = (0, import_react137.forwardRef)(
9906
+ var Root = (0, import_react138.forwardRef)(
9743
9907
  function PaginationRoot(props, ref) {
9744
9908
  const { size = "sm", variant = "outline", ...rest } = props;
9745
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RootPropsProvider, { value: { size, variantMap: variantMap[variant] }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Pagination.Root, { ref, type: "button", ...rest }) });
9909
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RootPropsProvider, { value: { size, variantMap: variantMap[variant] }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.Pagination.Root, { ref, type: "button", ...rest }) });
9746
9910
  }
9747
9911
  );
9748
- var Ellipsis = (0, import_react137.forwardRef)(function PaginationEllipsis(props, ref) {
9749
- var _a7;
9912
+ var Ellipsis = (0, import_react138.forwardRef)(function PaginationEllipsis(props, ref) {
9913
+ var _a8;
9750
9914
  const { size, variantMap: variantMap2 } = useRootProps();
9751
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Pagination.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Button, { as: "span", variant: variantMap2.ellipsis, size, children: (_a7 = props.children) != null ? _a7 : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(EllipsisIcon, {}) }) });
9915
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.Pagination.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.Button, { as: "span", variant: variantMap2.ellipsis, size, children: (_a8 = props.children) != null ? _a8 : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(EllipsisIcon, {}) }) });
9752
9916
  });
9753
- var Item = (0, import_react137.forwardRef)(
9917
+ var Item = (0, import_react138.forwardRef)(
9754
9918
  function PaginationItem(props, ref) {
9755
- const { page } = (0, import_react138.usePaginationContext)();
9919
+ const { page } = (0, import_react139.usePaginationContext)();
9756
9920
  const { size, variantMap: variantMap2 } = useRootProps();
9757
9921
  const current = page === props.value;
9758
9922
  const variant = current ? variantMap2.current : variantMap2.default;
9759
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Pagination.Item, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Button, { variant, size, children: props.value }) });
9923
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.Pagination.Item, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.Button, { variant, size, children: props.value }) });
9760
9924
  }
9761
9925
  );
9762
- var PrevButton = (0, import_react137.forwardRef)(function PaginationPrevTrigger(props, ref) {
9763
- var _a7;
9926
+ var PrevButton = (0, import_react138.forwardRef)(function PaginationPrevTrigger(props, ref) {
9927
+ var _a8;
9764
9928
  const { size, variantMap: variantMap2 } = useRootProps();
9765
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Pagination.PrevTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.IconButton, { variant: variantMap2.default, size, children: (_a7 = props.children) != null ? _a7 : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronLeftIcon, {}) }) });
9929
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.Pagination.PrevTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.IconButton, { variant: variantMap2.default, size, children: (_a8 = props.children) != null ? _a8 : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronLeftIcon, {}) }) });
9766
9930
  });
9767
- var NextButton = (0, import_react137.forwardRef)(function PaginationNextTrigger(props, ref) {
9768
- var _a7;
9931
+ var NextButton = (0, import_react138.forwardRef)(function PaginationNextTrigger(props, ref) {
9932
+ var _a8;
9769
9933
  const { size, variantMap: variantMap2 } = useRootProps();
9770
- const { nextPage } = (0, import_react138.usePaginationContext)();
9771
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Pagination.NextTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.IconButton, { variant: variantMap2.default, size, children: (_a7 = props.children) != null ? _a7 : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronRightIcon, {}) }) });
9934
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.Pagination.NextTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.IconButton, { variant: variantMap2.default, size, children: (_a8 = props.children) != null ? _a8 : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronRightIcon, {}) }) });
9772
9935
  });
9773
9936
  var Items = (props) => {
9774
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Pagination.Context, { children: ({ pages }) => pages.map((page, index) => {
9937
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.Pagination.Context, { children: ({ pages }) => pages.map((page, index) => {
9775
9938
  return page.type === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Ellipsis, { index, ...props }, index) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Item, { type: "page", value: page.value, ...props }, index);
9776
9939
  }) });
9777
9940
  };
9778
- var PageText = (0, import_react137.forwardRef)(
9941
+ var PageText = (0, import_react138.forwardRef)(
9779
9942
  function PaginationPageText(props, ref) {
9780
9943
  const { format = "compact", ...rest } = props;
9781
- const { page, pages, pageRange, count } = (0, import_react138.usePaginationContext)();
9782
- const content = (0, import_react137.useMemo)(() => {
9944
+ const { page, pages, pageRange, count } = (0, import_react139.usePaginationContext)();
9945
+ const content = (0, import_react138.useMemo)(() => {
9783
9946
  if (format === "short") return `${page} / ${pages.length}`;
9784
9947
  if (format === "compact") return `${page} of ${pages.length}`;
9785
9948
  return `${pageRange.start + 1} - ${pageRange.end} of ${count}`;
9786
9949
  }, [format, page, pages.length, pageRange, count]);
9787
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Text, { fontWeight: "medium", ref, ...rest, children: content });
9950
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react139.Text, { fontWeight: "medium", ref, ...rest, children: content });
9788
9951
  }
9789
9952
  );
9790
- var PrevTrigger = import_react138.Pagination.PrevTrigger;
9791
- var NextTrigger = import_react138.Pagination.NextTrigger;
9953
+ var PrevTrigger = import_react139.Pagination.PrevTrigger;
9954
+ var NextTrigger = import_react139.Pagination.NextTrigger;
9955
+ var Context = import_react139.Pagination.Context;
9792
9956
 
9793
9957
  // src/components/password-input/password-input.tsx
9794
- var import_react141 = require("react");
9795
- var import_react142 = require("@chakra-ui/react");
9958
+ var import_react142 = require("react");
9959
+ var import_react143 = require("@chakra-ui/react");
9796
9960
 
9797
9961
  // ../../node_modules/react-icons/lib/iconBase.mjs
9798
- var import_react140 = __toESM(require("react"), 1);
9962
+ var import_react141 = __toESM(require("react"), 1);
9799
9963
 
9800
9964
  // ../../node_modules/react-icons/lib/iconContext.mjs
9801
- var import_react139 = __toESM(require("react"), 1);
9965
+ var import_react140 = __toESM(require("react"), 1);
9802
9966
  var DefaultContext = {
9803
9967
  color: void 0,
9804
9968
  size: void 0,
@@ -9806,7 +9970,7 @@ var DefaultContext = {
9806
9970
  style: void 0,
9807
9971
  attr: void 0
9808
9972
  };
9809
- var IconContext = import_react139.default.createContext && /* @__PURE__ */ import_react139.default.createContext(DefaultContext);
9973
+ var IconContext = import_react140.default.createContext && /* @__PURE__ */ import_react140.default.createContext(DefaultContext);
9810
9974
 
9811
9975
  // ../../node_modules/react-icons/lib/iconBase.mjs
9812
9976
  var _excluded = ["attr", "size", "title"];
@@ -9895,12 +10059,12 @@ function _toPrimitive(t, r) {
9895
10059
  return ("string" === r ? String : Number)(t);
9896
10060
  }
9897
10061
  function Tree2Element(tree) {
9898
- return tree && tree.map((node, i) => /* @__PURE__ */ import_react140.default.createElement(node.tag, _objectSpread({
10062
+ return tree && tree.map((node, i) => /* @__PURE__ */ import_react141.default.createElement(node.tag, _objectSpread({
9899
10063
  key: i
9900
10064
  }, node.attr), Tree2Element(node.child)));
9901
10065
  }
9902
10066
  function GenIcon(data) {
9903
- return (props) => /* @__PURE__ */ import_react140.default.createElement(IconBase, _extends({
10067
+ return (props) => /* @__PURE__ */ import_react141.default.createElement(IconBase, _extends({
9904
10068
  attr: _objectSpread({}, data.attr)
9905
10069
  }, props), Tree2Element(data.child));
9906
10070
  }
@@ -9915,7 +10079,7 @@ function IconBase(props) {
9915
10079
  var className;
9916
10080
  if (conf.className) className = conf.className;
9917
10081
  if (props.className) className = (className ? className + " " : "") + props.className;
9918
- return /* @__PURE__ */ import_react140.default.createElement("svg", _extends({
10082
+ return /* @__PURE__ */ import_react141.default.createElement("svg", _extends({
9919
10083
  stroke: "currentColor",
9920
10084
  fill: "currentColor",
9921
10085
  strokeWidth: "0"
@@ -9927,9 +10091,9 @@ function IconBase(props) {
9927
10091
  height: computedSize,
9928
10092
  width: computedSize,
9929
10093
  xmlns: "http://www.w3.org/2000/svg"
9930
- }), title && /* @__PURE__ */ import_react140.default.createElement("title", null, title), props.children);
10094
+ }), title && /* @__PURE__ */ import_react141.default.createElement("title", null, title), props.children);
9931
10095
  };
9932
- return IconContext !== void 0 ? /* @__PURE__ */ import_react140.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
10096
+ return IconContext !== void 0 ? /* @__PURE__ */ import_react141.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
9933
10097
  }
9934
10098
 
9935
10099
  // ../../node_modules/react-icons/lu/index.mjs
@@ -9942,7 +10106,7 @@ function LuEye(props) {
9942
10106
 
9943
10107
  // src/components/password-input/password-input.tsx
9944
10108
  var import_jsx_runtime22 = require("react/jsx-runtime");
9945
- var PasswordInput = (0, import_react141.forwardRef)(
10109
+ var PasswordInput = (0, import_react142.forwardRef)(
9946
10110
  function PasswordInput2(props, ref) {
9947
10111
  const {
9948
10112
  rootProps,
@@ -9952,12 +10116,12 @@ var PasswordInput = (0, import_react141.forwardRef)(
9952
10116
  visibilityIcon = { on: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LuEye, {}), off: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LuEyeOff, {}) },
9953
10117
  ...rest
9954
10118
  } = props;
9955
- const [visible, setVisible] = (0, import_react142.useControllableState)({
10119
+ const [visible, setVisible] = (0, import_react143.useControllableState)({
9956
10120
  value: visibleProp,
9957
10121
  defaultValue: defaultVisible || false,
9958
10122
  onChange: onVisibleChange
9959
10123
  });
9960
- const inputRef = (0, import_react141.useRef)(null);
10124
+ const inputRef = (0, import_react142.useRef)(null);
9961
10125
  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
9962
10126
  InputGroup,
9963
10127
  {
@@ -9977,10 +10141,10 @@ var PasswordInput = (0, import_react141.forwardRef)(
9977
10141
  ),
9978
10142
  ...rootProps,
9979
10143
  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
9980
- import_react142.Input,
10144
+ import_react143.Input,
9981
10145
  {
9982
10146
  ...rest,
9983
- ref: (0, import_react142.mergeRefs)(ref, inputRef),
10147
+ ref: (0, import_react143.mergeRefs)(ref, inputRef),
9984
10148
  type: visible ? "text" : "password"
9985
10149
  }
9986
10150
  )
@@ -9988,10 +10152,10 @@ var PasswordInput = (0, import_react141.forwardRef)(
9988
10152
  );
9989
10153
  }
9990
10154
  );
9991
- var VisibilityTrigger = (0, import_react141.forwardRef)(
10155
+ var VisibilityTrigger = (0, import_react142.forwardRef)(
9992
10156
  function VisibilityTrigger2(props, ref) {
9993
10157
  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
9994
- import_react142.IconButton,
10158
+ import_react143.IconButton,
9995
10159
  {
9996
10160
  tabIndex: -1,
9997
10161
  ref,
@@ -10012,27 +10176,27 @@ var VisibilityTrigger = (0, import_react141.forwardRef)(
10012
10176
  var React7 = __toESM(require("react"), 1);
10013
10177
 
10014
10178
  // src/components/persona/persona-primitive.tsx
10015
- var import_react144 = require("react");
10016
- var import_react145 = require("@chakra-ui/react");
10179
+ var import_react145 = require("react");
10180
+ var import_react146 = require("@chakra-ui/react");
10017
10181
  var import_utils8 = require("@saas-ui/core/utils");
10018
10182
 
10019
10183
  // src/components/persona/persona.context.ts
10020
- var import_react143 = require("@chakra-ui/react");
10184
+ var import_react144 = require("@chakra-ui/react");
10021
10185
  var {
10022
10186
  useStyles: usePersonaStyles,
10023
10187
  withProvider: withProvider5,
10024
10188
  withContext: withContext6
10025
- } = (0, import_react143.createSlotRecipeContext)({
10189
+ } = (0, import_react144.createSlotRecipeContext)({
10026
10190
  key: "suiPersona"
10027
10191
  });
10028
10192
 
10029
10193
  // src/components/persona/persona-primitive.tsx
10030
10194
  var import_jsx_runtime23 = require("react/jsx-runtime");
10031
10195
  var PersonaRoot = withProvider5(
10032
- (0, import_react144.forwardRef)((props, ref) => {
10196
+ (0, import_react145.forwardRef)((props, ref) => {
10033
10197
  const { outOfOffice, presence, ...rest } = props;
10034
10198
  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
10035
- import_react145.chakra.div,
10199
+ import_react146.chakra.div,
10036
10200
  {
10037
10201
  ref,
10038
10202
  ...rest,
@@ -10049,7 +10213,7 @@ var PersonaRoot = withProvider5(
10049
10213
  }),
10050
10214
  "root"
10051
10215
  );
10052
- var PersonaAvatar = (0, import_react144.forwardRef)(
10216
+ var PersonaAvatar = (0, import_react145.forwardRef)(
10053
10217
  (props, ref) => {
10054
10218
  const {
10055
10219
  name,
@@ -10062,10 +10226,10 @@ var PersonaAvatar = (0, import_react144.forwardRef)(
10062
10226
  children,
10063
10227
  ...rest
10064
10228
  } = props;
10065
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react145.Avatar.Root, { ref, ...rest, children: [
10066
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react145.Avatar.Fallback, { children: getInitials2(name) }),
10229
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react146.Avatar.Root, { ref, ...rest, children: [
10230
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react146.Avatar.Fallback, { children: getInitials2(name) }),
10067
10231
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
10068
- import_react145.Avatar.Image,
10232
+ import_react146.Avatar.Image,
10069
10233
  {
10070
10234
  src,
10071
10235
  srcSet,
@@ -10184,10 +10348,10 @@ var defaultPresenceOptions = {
10184
10348
  };
10185
10349
 
10186
10350
  // src/components/pin-input/pin-input.tsx
10187
- var import_react146 = require("react");
10188
- var import_react147 = require("@chakra-ui/react");
10351
+ var import_react147 = require("react");
10352
+ var import_react148 = require("@chakra-ui/react");
10189
10353
  var import_jsx_runtime25 = require("react/jsx-runtime");
10190
- var PinInput = (0, import_react146.forwardRef)(
10354
+ var PinInput = (0, import_react147.forwardRef)(
10191
10355
  function PinInput2(props, ref) {
10192
10356
  const {
10193
10357
  pinLength = 4,
@@ -10197,35 +10361,35 @@ var PinInput = (0, import_react146.forwardRef)(
10197
10361
  gap = attached ? 0 : 2,
10198
10362
  ...rest
10199
10363
  } = props;
10200
- return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react147.PinInput.Root, { ref: rootRef, ...rest, children: [
10201
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react147.PinInput.HiddenInput, { ref, ...inputProps }),
10202
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react147.PinInput.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react147.Group, { attached, gap, children: Array.from({ length: pinLength }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react147.PinInput.Input, { index }, index)) }) })
10364
+ return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react148.PinInput.Root, { ref: rootRef, ...rest, children: [
10365
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react148.PinInput.HiddenInput, { ref, ...inputProps }),
10366
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react148.PinInput.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react148.Group, { attached, gap, children: Array.from({ length: pinLength }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react148.PinInput.Input, { index }, index)) }) })
10203
10367
  ] });
10204
10368
  }
10205
10369
  );
10206
10370
 
10207
10371
  // src/components/radio/radio.tsx
10208
- var import_react148 = require("react");
10209
- var import_react149 = require("@chakra-ui/react");
10372
+ var import_react149 = require("react");
10373
+ var import_react150 = require("@chakra-ui/react");
10210
10374
  var import_jsx_runtime26 = require("react/jsx-runtime");
10211
- var Radio = (0, import_react148.forwardRef)(
10375
+ var Radio = (0, import_react149.forwardRef)(
10212
10376
  function Radio2(props, ref) {
10213
10377
  const { children, inputProps, rootRef, ...rest } = props;
10214
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react149.RadioGroup.Item, { ref: rootRef, ...rest, children: [
10215
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react149.RadioGroup.ItemHiddenInput, { ref, ...inputProps }),
10216
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react149.RadioGroup.ItemIndicator, {}),
10217
- children && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react149.RadioGroup.ItemText, { children })
10378
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react150.RadioGroup.Item, { ref: rootRef, ...rest, children: [
10379
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react150.RadioGroup.ItemHiddenInput, { ref, ...inputProps }),
10380
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react150.RadioGroup.ItemIndicator, {}),
10381
+ children && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react150.RadioGroup.ItemText, { children })
10218
10382
  ] });
10219
10383
  }
10220
10384
  );
10221
- var RadioGroup = import_react149.RadioGroup.Root;
10385
+ var RadioGroup = import_react150.RadioGroup.Root;
10222
10386
 
10223
10387
  // src/components/search-input/search-input.tsx
10224
- var import_react150 = __toESM(require("react"), 1);
10225
- var import_react151 = require("@chakra-ui/react");
10388
+ var import_react151 = __toESM(require("react"), 1);
10389
+ var import_react152 = require("@chakra-ui/react");
10226
10390
  var import_utils9 = require("@saas-ui/core/utils");
10227
10391
  var import_jsx_runtime27 = require("react/jsx-runtime");
10228
- var SearchInput = (0, import_react150.forwardRef)(
10392
+ var SearchInput = (0, import_react151.forwardRef)(
10229
10393
  (props, ref) => {
10230
10394
  const {
10231
10395
  placeholder = "Search",
@@ -10243,18 +10407,18 @@ var SearchInput = (0, import_react150.forwardRef)(
10243
10407
  disabled,
10244
10408
  ...inputProps
10245
10409
  } = props;
10246
- const inputRef = import_react150.default.useRef(null);
10247
- const [value, setValue] = (0, import_react151.useControllableState)({
10410
+ const inputRef = import_react151.default.useRef(null);
10411
+ const [value, setValue] = (0, import_react152.useControllableState)({
10248
10412
  value: valueProp,
10249
10413
  defaultValue: defaultValueProp
10250
10414
  });
10251
- const onChange = import_react150.default.useCallback(
10415
+ const onChange = import_react151.default.useCallback(
10252
10416
  (e) => {
10253
10417
  setValue(e.target.value);
10254
10418
  },
10255
10419
  [setValue]
10256
10420
  );
10257
- const onKeyDown = import_react150.default.useCallback(
10421
+ const onKeyDown = import_react151.default.useCallback(
10258
10422
  (event) => {
10259
10423
  if (event.key === "Escape") {
10260
10424
  setValue("");
@@ -10264,16 +10428,16 @@ var SearchInput = (0, import_react150.forwardRef)(
10264
10428
  [onResetProp, setValue]
10265
10429
  );
10266
10430
  const onReset = () => {
10267
- var _a7;
10431
+ var _a8;
10268
10432
  setValue("");
10269
10433
  onResetProp == null ? void 0 : onResetProp();
10270
- (_a7 = inputRef.current) == null ? void 0 : _a7.focus();
10434
+ (_a8 = inputRef.current) == null ? void 0 : _a8.focus();
10271
10435
  };
10272
10436
  const showReset = value && !props.disabled;
10273
10437
  const endElement = showReset ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SearchInputResetButton, { size, children: resetIcon }) : endElementProp;
10274
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react151.Group, { width, children: [
10438
+ return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react152.Group, { width, children: [
10275
10439
  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
10276
- import_react151.InputElement,
10440
+ import_react152.InputElement,
10277
10441
  {
10278
10442
  placement: "start",
10279
10443
  px: "0",
@@ -10283,7 +10447,7 @@ var SearchInput = (0, import_react150.forwardRef)(
10283
10447
  }
10284
10448
  ),
10285
10449
  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
10286
- import_react151.Input,
10450
+ import_react152.Input,
10287
10451
  {
10288
10452
  type: "text",
10289
10453
  placeholder,
@@ -10291,7 +10455,7 @@ var SearchInput = (0, import_react150.forwardRef)(
10291
10455
  size,
10292
10456
  value,
10293
10457
  disabled,
10294
- ref: (0, import_react151.mergeRefs)(ref, inputRef),
10458
+ ref: (0, import_react152.mergeRefs)(ref, inputRef),
10295
10459
  onChange: (0, import_utils9.callAll)(onChange, onChangeProp),
10296
10460
  onKeyDown: (0, import_utils9.callAll)(onKeyDown, onKeyDownProp),
10297
10461
  ps: "calc(var(--input-height) - var(--input-height) / 10)",
@@ -10299,15 +10463,15 @@ var SearchInput = (0, import_react150.forwardRef)(
10299
10463
  ...inputProps
10300
10464
  }
10301
10465
  ),
10302
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react151.InputElement, { placement: "end", children: endElement })
10466
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react152.InputElement, { placement: "end", children: endElement })
10303
10467
  ] });
10304
10468
  }
10305
10469
  );
10306
- var SearchInputResetButton = (0, import_react150.forwardRef)(
10470
+ var SearchInputResetButton = (0, import_react151.forwardRef)(
10307
10471
  (props, ref) => {
10308
10472
  const { children = /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CloseIcon, {}), ...rest } = props;
10309
10473
  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
10310
- import_react151.IconButton,
10474
+ import_react152.IconButton,
10311
10475
  {
10312
10476
  ref,
10313
10477
  variant: "ghost",
@@ -10337,23 +10501,23 @@ __export(namespace_exports3, {
10337
10501
  });
10338
10502
 
10339
10503
  // src/components/select/select.tsx
10340
- var import_react152 = require("react");
10341
- var import_react153 = require("@chakra-ui/react");
10504
+ var import_react153 = require("react");
10505
+ var import_react154 = require("@chakra-ui/react");
10342
10506
  var import_jsx_runtime28 = require("react/jsx-runtime");
10343
- var SelectTrigger = (0, import_react152.forwardRef)(
10507
+ var SelectTrigger = (0, import_react153.forwardRef)(
10344
10508
  function SelectTrigger2(props, ref) {
10345
10509
  const { children, clearable, ...rest } = props;
10346
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react153.Select.Control, { ...rest, children: [
10347
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.Trigger, { ref, children }),
10348
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react153.Select.IndicatorGroup, { children: [
10510
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react154.Select.Control, { ...rest, children: [
10511
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Select.Trigger, { ref, children }),
10512
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react154.Select.IndicatorGroup, { children: [
10349
10513
  clearable && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectClearTrigger, {}),
10350
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.Indicator, {})
10514
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Select.Indicator, {})
10351
10515
  ] })
10352
10516
  ] });
10353
10517
  }
10354
10518
  );
10355
- var SelectClearTrigger = (0, import_react152.forwardRef)(function SelectClearTrigger2(props, ref) {
10356
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
10519
+ var SelectClearTrigger = (0, import_react153.forwardRef)(function SelectClearTrigger2(props, ref) {
10520
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Select.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
10357
10521
  CloseButton,
10358
10522
  {
10359
10523
  size: "xs",
@@ -10364,24 +10528,24 @@ var SelectClearTrigger = (0, import_react152.forwardRef)(function SelectClearTri
10364
10528
  }
10365
10529
  ) });
10366
10530
  });
10367
- var SelectContent = (0, import_react152.forwardRef)(
10531
+ var SelectContent = (0, import_react153.forwardRef)(
10368
10532
  function SelectContent2(props, ref) {
10369
10533
  const { portalled = true, portalRef, ...rest } = props;
10370
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.Content, { ...rest, ref }) }) });
10534
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Select.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Select.Content, { ...rest, ref }) }) });
10371
10535
  }
10372
10536
  );
10373
- var SelectItem = (0, import_react152.forwardRef)(
10537
+ var SelectItem = (0, import_react153.forwardRef)(
10374
10538
  function SelectItem2(props, ref) {
10375
10539
  const { item, children, ...rest } = props;
10376
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react153.Select.Item, { item, ...rest, ref, children: [
10540
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react154.Select.Item, { item, ...rest, ref, children: [
10377
10541
  children,
10378
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.ItemIndicator, {})
10542
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Select.ItemIndicator, {})
10379
10543
  ] }, item.value);
10380
10544
  }
10381
10545
  );
10382
- var SelectValueText = (0, import_react152.forwardRef)(function SelectValueText2(props, ref) {
10546
+ var SelectValueText = (0, import_react153.forwardRef)(function SelectValueText2(props, ref) {
10383
10547
  const { children, ...rest } = props;
10384
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.ValueText, { ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.Context, { children: (select) => {
10548
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Select.ValueText, { ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Select.Context, { children: (select) => {
10385
10549
  const items = select.selectedItems;
10386
10550
  if (items.length === 0) return props.placeholder;
10387
10551
  if (children) return children(items);
@@ -10390,9 +10554,9 @@ var SelectValueText = (0, import_react152.forwardRef)(function SelectValueText2(
10390
10554
  return `${items.length} selected`;
10391
10555
  } }) });
10392
10556
  });
10393
- var SelectRoot = (0, import_react152.forwardRef)(function SelectRoot2(props, ref) {
10557
+ var SelectRoot = (0, import_react153.forwardRef)(function SelectRoot2(props, ref) {
10394
10558
  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
10395
- import_react153.Select.Root,
10559
+ import_react154.Select.Root,
10396
10560
  {
10397
10561
  ...props,
10398
10562
  ref,
@@ -10400,21 +10564,21 @@ var SelectRoot = (0, import_react152.forwardRef)(function SelectRoot2(props, ref
10400
10564
  }
10401
10565
  );
10402
10566
  });
10403
- var SelectItemGroup = (0, import_react152.forwardRef)(
10567
+ var SelectItemGroup = (0, import_react153.forwardRef)(
10404
10568
  function SelectItemGroup2(props, ref) {
10405
10569
  const { children, label, ...rest } = props;
10406
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react153.Select.ItemGroup, { ...rest, ref, children: [
10407
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.ItemGroupLabel, { children: label }),
10570
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react154.Select.ItemGroup, { ...rest, ref, children: [
10571
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react154.Select.ItemGroupLabel, { children: label }),
10408
10572
  children
10409
10573
  ] });
10410
10574
  }
10411
10575
  );
10412
- var SelectLabel = import_react153.Select.Label;
10413
- var SelectItemText = import_react153.Select.ItemText;
10576
+ var SelectLabel = import_react154.Select.Label;
10577
+ var SelectItemText = import_react154.Select.ItemText;
10414
10578
 
10415
10579
  // src/components/segmented-control/segmented-control.tsx
10416
- var import_react154 = require("react");
10417
- var import_react155 = require("@chakra-ui/react");
10580
+ var import_react155 = require("react");
10581
+ var import_react156 = require("@chakra-ui/react");
10418
10582
  var import_jsx_runtime29 = require("react/jsx-runtime");
10419
10583
  function normalize(items) {
10420
10584
  return items.map((item) => {
@@ -10422,19 +10586,19 @@ function normalize(items) {
10422
10586
  return item;
10423
10587
  });
10424
10588
  }
10425
- var SegmentedControl = (0, import_react154.forwardRef)(function SegmentedControl2(props, ref) {
10589
+ var SegmentedControl = (0, import_react155.forwardRef)(function SegmentedControl2(props, ref) {
10426
10590
  const { items, ...rest } = props;
10427
- const data = (0, import_react154.useMemo)(() => normalize(items), [items]);
10428
- return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react155.SegmentGroup.Root, { ref, ...rest, children: [
10429
- /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.SegmentGroup.Indicator, {}),
10430
- /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.For, { each: data, children: (item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
10431
- import_react155.SegmentGroup.Item,
10591
+ const data = (0, import_react155.useMemo)(() => normalize(items), [items]);
10592
+ return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react156.SegmentGroup.Root, { ref, ...rest, children: [
10593
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react156.SegmentGroup.Indicator, {}),
10594
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react156.For, { each: data, children: (item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
10595
+ import_react156.SegmentGroup.Item,
10432
10596
  {
10433
10597
  value: item.value,
10434
10598
  disabled: item.disabled,
10435
10599
  children: [
10436
- /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.SegmentGroup.ItemText, { children: item.label }),
10437
- /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.SegmentGroup.ItemHiddenInput, {})
10600
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react156.SegmentGroup.ItemText, { children: item.label }),
10601
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react156.SegmentGroup.ItemHiddenInput, {})
10438
10602
  ]
10439
10603
  },
10440
10604
  item.value
@@ -10466,21 +10630,21 @@ __export(sidebar_exports, {
10466
10630
  var import_sidebar = require("@saas-ui/core/sidebar");
10467
10631
 
10468
10632
  // src/components/sidebar/sidebar.context.ts
10469
- var import_react156 = require("@chakra-ui/react");
10633
+ var import_react157 = require("@chakra-ui/react");
10470
10634
  var {
10471
10635
  withContext: withContext7,
10472
10636
  useRecipeResult,
10473
10637
  StylesProvider,
10474
10638
  ClassNamesProvider,
10475
10639
  useStyles: useSidebarStyles
10476
- } = (0, import_react156.createSlotRecipeContext)({
10640
+ } = (0, import_react157.createSlotRecipeContext)({
10477
10641
  key: "suiSidebar"
10478
10642
  });
10479
10643
  var {
10480
10644
  withProvider: withItemProvider,
10481
10645
  withContext: withItemContext,
10482
10646
  useStyles: useSidebarItemStyles
10483
- } = (0, import_react156.createSlotRecipeContext)({
10647
+ } = (0, import_react157.createSlotRecipeContext)({
10484
10648
  key: "suiSidebarNavItem"
10485
10649
  });
10486
10650
 
@@ -10583,99 +10747,99 @@ __export(steps_exports, {
10583
10747
  NextTrigger: () => StepsNextTrigger,
10584
10748
  PrevTrigger: () => StepsPrevTrigger,
10585
10749
  Root: () => StepsRoot,
10586
- useContext: () => import_react157.useStepsContext
10750
+ useContext: () => import_react158.useStepsContext
10587
10751
  });
10588
- var import_react157 = require("@chakra-ui/react");
10752
+ var import_react158 = require("@chakra-ui/react");
10589
10753
  var import_jsx_runtime31 = require("react/jsx-runtime");
10590
10754
  var StepsItem = (props) => {
10591
10755
  const { title, description, completedIcon, icon, ...rest } = props;
10592
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react157.Steps.Item, { ...rest, children: [
10593
- /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react157.Steps.Trigger, { children: [
10594
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
10595
- import_react157.Steps.Status,
10756
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react158.Steps.Item, { ...rest, children: [
10757
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react158.Steps.Trigger, { children: [
10758
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
10759
+ import_react158.Steps.Status,
10596
10760
  {
10597
10761
  complete: completedIcon || /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CheckIcon, {}),
10598
- incomplete: icon || /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Number, {})
10762
+ incomplete: icon || /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Number, {})
10599
10763
  }
10600
10764
  ) }),
10601
10765
  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StepInfo, { title, description })
10602
10766
  ] }),
10603
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Separator, {})
10767
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Separator, {})
10604
10768
  ] });
10605
10769
  };
10606
10770
  var StepInfo = (props) => {
10607
10771
  const { title, description } = props;
10608
10772
  if (title && description) {
10609
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react157.Box, { children: [
10610
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Title, { children: title }),
10611
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Description, { children: description })
10773
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react158.Box, { children: [
10774
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Title, { children: title }),
10775
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Description, { children: description })
10612
10776
  ] });
10613
10777
  }
10614
10778
  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
10615
- title && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Title, { children: title }),
10616
- description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Description, { children: description })
10779
+ title && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Title, { children: title }),
10780
+ description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Description, { children: description })
10617
10781
  ] });
10618
10782
  };
10619
10783
  var StepsIndicator = (props) => {
10620
- const { icon = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Number, {}), completedIcon } = props;
10621
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Status, { complete: completedIcon, incomplete: icon }) });
10784
+ const { icon = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Number, {}), completedIcon } = props;
10785
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.Status, { complete: completedIcon, incomplete: icon }) });
10622
10786
  };
10623
- var StepsList = import_react157.Steps.List;
10624
- var StepsRoot = import_react157.Steps.Root;
10625
- var StepsContent = import_react157.Steps.Content;
10626
- var StepsCompletedContent = import_react157.Steps.CompletedContent;
10787
+ var StepsList = import_react158.Steps.List;
10788
+ var StepsRoot = import_react158.Steps.Root;
10789
+ var StepsContent = import_react158.Steps.Content;
10790
+ var StepsCompletedContent = import_react158.Steps.CompletedContent;
10627
10791
  var StepsNextTrigger = (props) => {
10628
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.NextTrigger, { ...props });
10792
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.NextTrigger, { ...props });
10629
10793
  };
10630
10794
  var StepsPrevTrigger = (props) => {
10631
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.PrevTrigger, { ...props });
10795
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react158.Steps.PrevTrigger, { ...props });
10632
10796
  };
10633
10797
 
10634
10798
  // src/components/switch/switch.tsx
10635
- var import_react158 = require("@chakra-ui/react");
10636
- var import_react159 = require("react");
10799
+ var import_react159 = require("@chakra-ui/react");
10800
+ var import_react160 = require("react");
10637
10801
  var import_jsx_runtime32 = require("react/jsx-runtime");
10638
- var Switch = (0, import_react159.forwardRef)(
10802
+ var Switch = (0, import_react160.forwardRef)(
10639
10803
  function Switch2(props, ref) {
10640
10804
  const { inputProps, children, rootRef, trackLabel, thumbLabel, ...rest } = props;
10641
- return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react158.Switch.Root, { ref: rootRef, ...rest, children: [
10642
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.HiddenInput, { ref, ...inputProps }),
10643
- /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react158.Switch.Control, { children: [
10644
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.Thumb, { children: thumbLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.ThumbIndicator, { fallback: thumbLabel == null ? void 0 : thumbLabel.off, children: thumbLabel == null ? void 0 : thumbLabel.on }) }),
10645
- trackLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.Indicator, { fallback: trackLabel.off, children: trackLabel.on })
10805
+ return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react159.Switch.Root, { ref: rootRef, ...rest, children: [
10806
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.Switch.HiddenInput, { ref, ...inputProps }),
10807
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react159.Switch.Control, { children: [
10808
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.Switch.Thumb, { children: thumbLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.Switch.ThumbIndicator, { fallback: thumbLabel == null ? void 0 : thumbLabel.off, children: thumbLabel == null ? void 0 : thumbLabel.on }) }),
10809
+ trackLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.Switch.Indicator, { fallback: trackLabel.off, children: trackLabel.on })
10646
10810
  ] }),
10647
- children != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.Label, { children })
10811
+ children != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.Switch.Label, { children })
10648
10812
  ] });
10649
10813
  }
10650
10814
  );
10651
10815
 
10652
10816
  // src/components/toaster/toaster.tsx
10653
- var import_react160 = require("@chakra-ui/react");
10817
+ var import_react161 = require("@chakra-ui/react");
10654
10818
  var import_jsx_runtime33 = require("react/jsx-runtime");
10655
- var toast = (0, import_react160.createToaster)({
10819
+ var toast = (0, import_react161.createToaster)({
10656
10820
  placement: "bottom-end",
10657
10821
  pauseOnPageIdle: true
10658
10822
  });
10659
10823
  var Toaster = () => {
10660
- return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Toaster, { toaster: toast, insetInline: { mdDown: "4" }, children: (toast2) => {
10661
- var _a7;
10662
- return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react160.Toast.Root, { width: { md: "sm" }, children: [
10663
- toast2.type === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Spinner, { size: "sm", color: "colorPalette.solid" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Toast.Indicator, {}),
10664
- /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react160.Stack, { gap: "1", flex: "1", maxWidth: "100%", children: [
10665
- toast2.title && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Toast.Title, { children: toast2.title }),
10666
- toast2.description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Toast.Description, { children: toast2.description })
10824
+ return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Toaster, { toaster: toast, insetInline: { mdDown: "4" }, children: (toast2) => {
10825
+ var _a8;
10826
+ return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react161.Toast.Root, { width: { md: "sm" }, children: [
10827
+ toast2.type === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Spinner, { size: "sm", color: "colorPalette.solid" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Toast.Indicator, {}),
10828
+ /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react161.Stack, { gap: "1", flex: "1", maxWidth: "100%", children: [
10829
+ toast2.title && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Toast.Title, { children: toast2.title }),
10830
+ toast2.description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Toast.Description, { children: toast2.description })
10667
10831
  ] }),
10668
- toast2.action && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Toast.ActionTrigger, { children: toast2.action.label }),
10669
- ((_a7 = toast2.meta) == null ? void 0 : _a7.closable) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Toast.CloseTrigger, {})
10832
+ toast2.action && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Toast.ActionTrigger, { children: toast2.action.label }),
10833
+ ((_a8 = toast2.meta) == null ? void 0 : _a8.closable) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react161.Toast.CloseTrigger, {})
10670
10834
  ] });
10671
10835
  } }) });
10672
10836
  };
10673
10837
 
10674
10838
  // src/components/tooltip/tooltip.tsx
10675
- var import_react161 = require("react");
10676
- var import_react162 = require("@chakra-ui/react");
10839
+ var import_react162 = require("react");
10840
+ var import_react163 = require("@chakra-ui/react");
10677
10841
  var import_jsx_runtime34 = require("react/jsx-runtime");
10678
- var Tooltip = (0, import_react161.forwardRef)(
10842
+ var Tooltip = (0, import_react162.forwardRef)(
10679
10843
  function Tooltip2(props, ref) {
10680
10844
  const {
10681
10845
  showArrow,
@@ -10688,10 +10852,10 @@ var Tooltip = (0, import_react161.forwardRef)(
10688
10852
  ...rest
10689
10853
  } = props;
10690
10854
  if (disabled) return children;
10691
- return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react162.Tooltip.Root, { ...rest, children: [
10692
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Tooltip.Trigger, { asChild: true, children }),
10693
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react162.Tooltip.Content, { ref, ...contentProps, children: [
10694
- showArrow && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Tooltip.Arrow, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Tooltip.ArrowTip, {}) }),
10855
+ return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react163.Tooltip.Root, { ...rest, children: [
10856
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react163.Tooltip.Trigger, { asChild: true, children }),
10857
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react163.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react163.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react163.Tooltip.Content, { ref, ...contentProps, children: [
10858
+ showArrow && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react163.Tooltip.Arrow, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react163.Tooltip.ArrowTip, {}) }),
10695
10859
  content
10696
10860
  ] }) }) })
10697
10861
  ] });
@@ -10712,6 +10876,7 @@ var Tooltip = (0, import_react161.forwardRef)(
10712
10876
  EmptyState,
10713
10877
  GridList,
10714
10878
  IconBadge,
10879
+ IconButton,
10715
10880
  InputGroup,
10716
10881
  Link,
10717
10882
  LoadingOverlay,