@vygruppen/spor-react 6.2.2 → 7.0.0

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.
Files changed (45) hide show
  1. package/.turbo/turbo-build.log +10 -10
  2. package/CHANGELOG.md +20 -0
  3. package/dist/{CountryCodeSelect-FJ6OGX3Z.mjs → CountryCodeSelect-OK6RZ6AY.mjs} +1 -1
  4. package/dist/{chunk-2OBDF3T7.mjs → chunk-CYU6YFQK.mjs} +167 -642
  5. package/dist/index.d.mts +483 -497
  6. package/dist/index.d.ts +483 -497
  7. package/dist/index.js +196 -673
  8. package/dist/index.mjs +1 -1
  9. package/package.json +1 -1
  10. package/src/button/Button.tsx +4 -4
  11. package/src/input/NumericStepper.tsx +0 -4
  12. package/src/theme/components/accordion.ts +4 -15
  13. package/src/theme/components/breadcrumb.ts +2 -14
  14. package/src/theme/components/button.ts +5 -55
  15. package/src/theme/components/card-select.ts +11 -26
  16. package/src/theme/components/card.ts +2 -18
  17. package/src/theme/components/checkbox.ts +4 -12
  18. package/src/theme/components/choice-chip.ts +2 -11
  19. package/src/theme/components/close-button.ts +2 -14
  20. package/src/theme/components/code.ts +1 -1
  21. package/src/theme/components/datepicker.ts +14 -65
  22. package/src/theme/components/drawer.ts +7 -7
  23. package/src/theme/components/fab.ts +6 -63
  24. package/src/theme/components/form-label.ts +1 -1
  25. package/src/theme/components/form.ts +1 -1
  26. package/src/theme/components/info-select.ts +5 -35
  27. package/src/theme/components/info-tag.ts +1 -1
  28. package/src/theme/components/input.ts +9 -31
  29. package/src/theme/components/link.ts +5 -29
  30. package/src/theme/components/listbox.ts +3 -5
  31. package/src/theme/components/media-controller-button.ts +5 -46
  32. package/src/theme/components/modal.ts +7 -7
  33. package/src/theme/components/popover.ts +7 -15
  34. package/src/theme/components/progress-indicator.ts +1 -5
  35. package/src/theme/components/radio.ts +5 -11
  36. package/src/theme/components/select.ts +2 -2
  37. package/src/theme/components/stepper.ts +6 -6
  38. package/src/theme/components/switch.ts +5 -73
  39. package/src/theme/components/table.ts +18 -18
  40. package/src/theme/components/tabs.ts +11 -14
  41. package/src/theme/components/travel-tag.ts +2 -15
  42. package/src/theme/font-faces.ts +1 -1
  43. package/src/theme/utils/focus-util.ts +10 -0
  44. package/tsconfig.json +2 -2
  45. package/src/theme/utils/focus-utils.ts +0 -16
package/dist/index.d.ts CHANGED
@@ -413,7 +413,7 @@ type FloatingActionButtonProps = BoxProps & {
413
413
  * placement="bottom right"
414
414
  * />
415
415
  */
416
- declare const FloatingActionButton: ComponentWithAs<ComponentWithAs<"a" | "button", {}>, FloatingActionButtonProps>;
416
+ declare const FloatingActionButton: ComponentWithAs<ComponentWithAs<"a" | "button">, FloatingActionButtonProps>;
417
417
 
418
418
  type CardProps = Exclude<BoxProps, "size"> & {
419
419
  size?: "sm" | "lg";
@@ -2077,13 +2077,17 @@ declare const theme: {
2077
2077
  opacity: number;
2078
2078
  cursor: string;
2079
2079
  };
2080
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2081
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2082
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2080
+ _focusVisible: {
2081
+ outlineWidth: string;
2082
+ outlineColor: string;
2083
+ outlineStyle: string;
2084
+ outlineOffset: string;
2085
+ };
2083
2086
  transitionProperty: string;
2084
2087
  transitionDuration: string;
2085
2088
  border: string;
2086
2089
  borderRadius: string;
2090
+ borderColor: string;
2087
2091
  display: string;
2088
2092
  justifyContent: string;
2089
2093
  color: string;
@@ -2291,7 +2295,6 @@ declare const theme: {
2291
2295
  transitionProperty: string;
2292
2296
  transitionDuration: string;
2293
2297
  transitionTimingFunction: string;
2294
- outline: string;
2295
2298
  color: string;
2296
2299
  textDecoration: string;
2297
2300
  textStyle: string;
@@ -2301,9 +2304,12 @@ declare const theme: {
2301
2304
  _active: {
2302
2305
  backgroundColor: string;
2303
2306
  };
2304
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2305
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2306
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2307
+ _focusVisible: {
2308
+ outlineWidth: string;
2309
+ outlineColor: string;
2310
+ outlineStyle: string;
2311
+ outlineOffset: string;
2312
+ };
2307
2313
  cursor: string;
2308
2314
  _hover: {
2309
2315
  backgroundColor: string;
@@ -2333,11 +2339,29 @@ declare const theme: {
2333
2339
  parts: ("link" | "container" | "separator" | "item")[];
2334
2340
  };
2335
2341
  Button: {
2336
- baseStyle?: {
2342
+ baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
2343
+ _disabled: {
2344
+ cursor: string;
2345
+ boxShadow: string;
2346
+ backgroundColor: string;
2347
+ color: string;
2348
+ };
2349
+ _hover: {
2350
+ _disabled: {
2351
+ background: string;
2352
+ };
2353
+ };
2354
+ _focusVisible: {
2355
+ outlineWidth: string;
2356
+ outlineColor: string;
2357
+ outlineStyle: string;
2358
+ outlineOffset: string;
2359
+ };
2337
2360
  border: number;
2338
2361
  borderRadius: string;
2339
2362
  display: string;
2340
2363
  alignItems: string;
2364
+ justifyContent: string;
2341
2365
  transitionProperty: string;
2342
2366
  transitionDuration: string;
2343
2367
  textWrap: string;
@@ -2347,18 +2371,7 @@ declare const theme: {
2347
2371
  boxShadow: number;
2348
2372
  outline: number;
2349
2373
  };
2350
- _disabled: {
2351
- cursor: string;
2352
- boxShadow: string;
2353
- backgroundColor: string;
2354
- color: string;
2355
- };
2356
- _hover: {
2357
- _disabled: {
2358
- background: string;
2359
- };
2360
- };
2361
- } | undefined;
2374
+ }) | undefined;
2362
2375
  sizes?: {
2363
2376
  lg: {
2364
2377
  minHeight: number;
@@ -2390,9 +2403,6 @@ declare const theme: {
2390
2403
  primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
2391
2404
  backgroundColor: string;
2392
2405
  color: string;
2393
- _focusVisible: {
2394
- boxShadow: string;
2395
- };
2396
2406
  _hover: {
2397
2407
  backgroundColor: string;
2398
2408
  };
@@ -2406,12 +2416,6 @@ declare const theme: {
2406
2416
  _hover: {
2407
2417
  backgroundColor: string;
2408
2418
  };
2409
- _focusVisible: {
2410
- boxShadow: string;
2411
- _hover: {
2412
- boxShadow: string;
2413
- };
2414
- };
2415
2419
  _active: {
2416
2420
  backgroundColor: string;
2417
2421
  boxShadow: string;
@@ -2424,9 +2428,6 @@ declare const theme: {
2424
2428
  backgroundColor: string;
2425
2429
  color: string;
2426
2430
  boxShadow: string;
2427
- _focusVisible: {
2428
- boxShadow: string;
2429
- };
2430
2431
  _hover: {
2431
2432
  boxShadow: string;
2432
2433
  };
@@ -2438,9 +2439,6 @@ declare const theme: {
2438
2439
  ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
2439
2440
  backgroundColor: string;
2440
2441
  color: string;
2441
- _focusVisible: {
2442
- boxShadow: string;
2443
- };
2444
2442
  _hover: {
2445
2443
  backgroundColor: string;
2446
2444
  _disabled: {
@@ -2461,12 +2459,6 @@ declare const theme: {
2461
2459
  backgroundColor: string;
2462
2460
  boxShadow: string;
2463
2461
  };
2464
- _focusVisible: {
2465
- boxShadow: string;
2466
- _hover: {
2467
- boxShadow: string;
2468
- };
2469
- };
2470
2462
  };
2471
2463
  } | undefined;
2472
2464
  defaultProps?: {
@@ -2478,34 +2470,22 @@ declare const theme: {
2478
2470
  Card: {
2479
2471
  baseStyle?: ((props: any) => {
2480
2472
  "button&, a&, label&, &.is-clickable": {
2481
- _hover: {
2482
- backgroundColor: string;
2483
- boxShadow: string;
2484
- } | {
2485
- boxShadow: string;
2486
- backgroundColor?: undefined;
2487
- };
2488
2473
  _active: {
2489
2474
  backgroundColor: string;
2490
2475
  boxShadow: string;
2491
2476
  };
2492
- _focusVisible: {
2493
- boxShadow: string;
2494
- outline: string;
2495
- _active: {
2496
- backgroundColor: string;
2497
- boxShadow: string;
2498
- };
2499
- };
2500
2477
  _disabled: {
2501
2478
  backgroundColor: string;
2502
2479
  boxShadow: string;
2503
2480
  color: string;
2504
2481
  pointerEvents: string;
2505
2482
  };
2506
- boxShadow: string;
2507
- backgroundColor?: undefined;
2508
- } | {
2483
+ _focusVisible: {
2484
+ outlineWidth: string;
2485
+ outlineColor: string;
2486
+ outlineStyle: string;
2487
+ outlineOffset: string;
2488
+ };
2509
2489
  _hover: {
2510
2490
  backgroundColor: string;
2511
2491
  boxShadow: string;
@@ -2513,24 +2493,32 @@ declare const theme: {
2513
2493
  boxShadow: string;
2514
2494
  backgroundColor?: undefined;
2515
2495
  };
2496
+ boxShadow: string;
2497
+ backgroundColor?: undefined;
2498
+ } | {
2516
2499
  _active: {
2517
2500
  backgroundColor: string;
2518
2501
  boxShadow: string;
2519
2502
  };
2520
- _focusVisible: {
2521
- boxShadow: string;
2522
- outline: string;
2523
- _active: {
2524
- backgroundColor: string;
2525
- boxShadow: string;
2526
- };
2527
- };
2528
2503
  _disabled: {
2529
2504
  backgroundColor: string;
2530
2505
  boxShadow: string;
2531
2506
  color: string;
2532
2507
  pointerEvents: string;
2533
2508
  };
2509
+ _focusVisible: {
2510
+ outlineWidth: string;
2511
+ outlineColor: string;
2512
+ outlineStyle: string;
2513
+ outlineOffset: string;
2514
+ };
2515
+ _hover: {
2516
+ backgroundColor: string;
2517
+ boxShadow: string;
2518
+ } | {
2519
+ boxShadow: string;
2520
+ backgroundColor?: undefined;
2521
+ };
2534
2522
  backgroundColor: string;
2535
2523
  boxShadow: string;
2536
2524
  };
@@ -2546,34 +2534,22 @@ declare const theme: {
2546
2534
  borderRadius: string;
2547
2535
  } | {
2548
2536
  "button&, a&, label&, &.is-clickable": {
2549
- _hover: {
2550
- backgroundColor: string;
2551
- boxShadow: string;
2552
- } | {
2553
- boxShadow: string;
2554
- backgroundColor?: undefined;
2555
- };
2556
2537
  _active: {
2557
2538
  backgroundColor: string;
2558
2539
  boxShadow: string;
2559
2540
  };
2560
- _focusVisible: {
2561
- boxShadow: string;
2562
- outline: string;
2563
- _active: {
2564
- backgroundColor: string;
2565
- boxShadow: string;
2566
- };
2567
- };
2568
2541
  _disabled: {
2569
2542
  backgroundColor: string;
2570
2543
  boxShadow: string;
2571
2544
  color: string;
2572
2545
  pointerEvents: string;
2573
2546
  };
2574
- boxShadow: string;
2575
- backgroundColor?: undefined;
2576
- } | {
2547
+ _focusVisible: {
2548
+ outlineWidth: string;
2549
+ outlineColor: string;
2550
+ outlineStyle: string;
2551
+ outlineOffset: string;
2552
+ };
2577
2553
  _hover: {
2578
2554
  backgroundColor: string;
2579
2555
  boxShadow: string;
@@ -2581,24 +2557,32 @@ declare const theme: {
2581
2557
  boxShadow: string;
2582
2558
  backgroundColor?: undefined;
2583
2559
  };
2560
+ boxShadow: string;
2561
+ backgroundColor?: undefined;
2562
+ } | {
2584
2563
  _active: {
2585
2564
  backgroundColor: string;
2586
2565
  boxShadow: string;
2587
2566
  };
2588
- _focusVisible: {
2589
- boxShadow: string;
2590
- outline: string;
2591
- _active: {
2592
- backgroundColor: string;
2593
- boxShadow: string;
2594
- };
2595
- };
2596
2567
  _disabled: {
2597
2568
  backgroundColor: string;
2598
2569
  boxShadow: string;
2599
2570
  color: string;
2600
2571
  pointerEvents: string;
2601
2572
  };
2573
+ _focusVisible: {
2574
+ outlineWidth: string;
2575
+ outlineColor: string;
2576
+ outlineStyle: string;
2577
+ outlineOffset: string;
2578
+ };
2579
+ _hover: {
2580
+ backgroundColor: string;
2581
+ boxShadow: string;
2582
+ } | {
2583
+ boxShadow: string;
2584
+ backgroundColor?: undefined;
2585
+ };
2602
2586
  backgroundColor: string;
2603
2587
  boxShadow: string;
2604
2588
  };
@@ -2628,9 +2612,12 @@ declare const theme: {
2628
2612
  CardSelect: {
2629
2613
  baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
2630
2614
  trigger: {
2631
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2632
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2633
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2615
+ _focusVisible: {
2616
+ outlineWidth: string;
2617
+ outlineColor: string;
2618
+ outlineStyle: string;
2619
+ outlineOffset: string;
2620
+ };
2634
2621
  appearance: string;
2635
2622
  display: string;
2636
2623
  alignItems: string;
@@ -2675,6 +2662,7 @@ declare const theme: {
2675
2662
  variants?: {
2676
2663
  base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
2677
2664
  trigger: {
2665
+ boxShadow: string;
2678
2666
  _hover: {
2679
2667
  boxShadow: string;
2680
2668
  };
@@ -2693,10 +2681,6 @@ declare const theme: {
2693
2681
  };
2694
2682
  backgroundColor: string;
2695
2683
  };
2696
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2697
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2698
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2699
- boxShadow: string;
2700
2684
  };
2701
2685
  };
2702
2686
  ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -2746,7 +2730,7 @@ declare const theme: {
2746
2730
  parts: ("card" | "trigger")[];
2747
2731
  };
2748
2732
  Checkbox: {
2749
- baseStyle?: {
2733
+ baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
2750
2734
  container: {
2751
2735
  _hover: {
2752
2736
  "input:enabled:not([aria-invalid]) + .chakra-checkbox__control": {
@@ -2784,13 +2768,6 @@ declare const theme: {
2784
2768
  borderRadius: string;
2785
2769
  color: string;
2786
2770
  _checked: {
2787
- backgroundColor: string;
2788
- borderColor: string;
2789
- color: string;
2790
- _focus: {
2791
- backgroundColor: string;
2792
- borderColor: string;
2793
- };
2794
2771
  _disabled: {
2795
2772
  backgroundColor: string;
2796
2773
  borderColor: string;
@@ -2800,12 +2777,17 @@ declare const theme: {
2800
2777
  backgroundColor: string;
2801
2778
  borderColor: string;
2802
2779
  };
2803
- };
2804
- _disabled: {
2780
+ _focusVisible: {
2781
+ outlineWidth: string;
2782
+ outlineColor: string;
2783
+ outlineStyle: string;
2784
+ outlineOffset: string;
2785
+ };
2805
2786
  backgroundColor: string;
2806
2787
  borderColor: string;
2788
+ color: string;
2807
2789
  };
2808
- _focus: {
2790
+ _disabled: {
2809
2791
  backgroundColor: string;
2810
2792
  borderColor: string;
2811
2793
  };
@@ -2820,7 +2802,7 @@ declare const theme: {
2820
2802
  opacity: number;
2821
2803
  };
2822
2804
  };
2823
- } | undefined;
2805
+ }) | undefined;
2824
2806
  sizes?: {
2825
2807
  [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
2826
2808
  keys: ("label" | "container" | "icon" | "control")[];
@@ -2854,7 +2836,10 @@ declare const theme: {
2854
2836
  boxShadow: string;
2855
2837
  };
2856
2838
  "input:focus-visible + &": {
2857
- boxShadow: string;
2839
+ outlineWidth: string;
2840
+ outlineColor: string;
2841
+ outlineStyle: string;
2842
+ outlineOffset: string;
2858
2843
  };
2859
2844
  "@media (hover:hover)": {
2860
2845
  _hover: {
@@ -2926,9 +2911,12 @@ declare const theme: {
2926
2911
  _active: {
2927
2912
  backgroundColor: string;
2928
2913
  };
2929
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2930
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2931
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2914
+ _focusVisible: {
2915
+ outlineWidth: string;
2916
+ outlineColor: string;
2917
+ outlineStyle: string;
2918
+ outlineOffset: string;
2919
+ };
2932
2920
  w: string[];
2933
2921
  h: string[];
2934
2922
  transitionProperty: string;
@@ -2966,7 +2954,7 @@ declare const theme: {
2966
2954
  fontFamily: string;
2967
2955
  fontSize: ("mobile.xs" | "desktop.xs")[];
2968
2956
  borderRadius: string;
2969
- px: number;
2957
+ paddingX: number;
2970
2958
  } | undefined;
2971
2959
  sizes?: {
2972
2960
  [x: string]: {};
@@ -3003,6 +2991,12 @@ declare const theme: {
3003
2991
  _disabled: {
3004
2992
  pointerEvents: string;
3005
2993
  };
2994
+ _focusWithin: {
2995
+ outlineWidth: string;
2996
+ outlineColor: string;
2997
+ outlineStyle: string;
2998
+ outlineOffset: string;
2999
+ };
3006
3000
  };
3007
3001
  inputLabel: {
3008
3002
  fontSize: string;
@@ -3017,9 +3011,12 @@ declare const theme: {
3017
3011
  _invalid: {
3018
3012
  boxShadow: string;
3019
3013
  };
3020
- _focus: _chakra_ui_styled_system.SystemStyleObject;
3021
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
3022
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
3014
+ _focusVisible: {
3015
+ outlineWidth: string;
3016
+ outlineColor: string;
3017
+ outlineStyle: string;
3018
+ outlineOffset: string;
3019
+ };
3023
3020
  backgroundColor: string;
3024
3021
  boxShadow: string;
3025
3022
  width: number;
@@ -3057,6 +3054,24 @@ declare const theme: {
3057
3054
  color: string;
3058
3055
  };
3059
3056
  dateCell: {
3057
+ backgroundColor: string;
3058
+ color: string;
3059
+ borderRadius: string;
3060
+ position: string;
3061
+ transition: string;
3062
+ userSelect: string;
3063
+ width: number[];
3064
+ height: number[];
3065
+ transitionProperty: string;
3066
+ transitionSpeed: string;
3067
+ _hover: {
3068
+ backgroundColor: string;
3069
+ };
3070
+ _focusVisible: {
3071
+ outlineColor: string;
3072
+ outlineWidth: number;
3073
+ outlineStyle: string;
3074
+ };
3060
3075
  _active: {
3061
3076
  backgroundColor: string;
3062
3077
  boxShadow: string;
@@ -3078,31 +3093,11 @@ declare const theme: {
3078
3093
  };
3079
3094
  "&[data-today]": {
3080
3095
  boxShadow: string;
3081
- _focus: {
3082
- outline: string;
3083
- boxShadow: string;
3084
- };
3085
3096
  };
3086
3097
  "&[data-unavailable]": {
3087
3098
  pointerEvents: string;
3088
3099
  color: string;
3089
3100
  };
3090
- _focus: _chakra_ui_styled_system.SystemStyleObject;
3091
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
3092
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
3093
- backgroundColor: string;
3094
- color: string;
3095
- borderRadius: string;
3096
- position: string;
3097
- transition: string;
3098
- userSelect: string;
3099
- width: number[];
3100
- height: number[];
3101
- transitionProperty: string;
3102
- transitionSpeed: string;
3103
- _hover: {
3104
- backgroundColor: string;
3105
- };
3106
3101
  };
3107
3102
  }) | undefined;
3108
3103
  sizes?: {
@@ -3117,9 +3112,6 @@ declare const theme: {
3117
3112
  _hover: {
3118
3113
  boxShadow: string;
3119
3114
  };
3120
- _focusWithin: {
3121
- boxShadow: string;
3122
- };
3123
3115
  _invalid: {
3124
3116
  boxShadow: string;
3125
3117
  };
@@ -3151,9 +3143,6 @@ declare const theme: {
3151
3143
  _hover: {
3152
3144
  boxShadow: string;
3153
3145
  };
3154
- _focusWithin: {
3155
- boxShadow: string;
3156
- };
3157
3146
  _invalid: {
3158
3147
  boxShadow: string;
3159
3148
  };
@@ -3182,9 +3171,6 @@ declare const theme: {
3182
3171
  _hover: {
3183
3172
  boxShadow: string;
3184
3173
  };
3185
- _focusWithin: {
3186
- boxShadow: string;
3187
- };
3188
3174
  _invalid: {
3189
3175
  boxShadow: string;
3190
3176
  };
@@ -3273,9 +3259,9 @@ declare const theme: {
3273
3259
  boxShadow: string;
3274
3260
  };
3275
3261
  header: {
3276
- px: number;
3277
- pt: number;
3278
- pb: number;
3262
+ paddingX: number;
3263
+ paddingTop: number;
3264
+ paddingBottom: number;
3279
3265
  fontWeight: string;
3280
3266
  fontFamily: string;
3281
3267
  };
@@ -3286,14 +3272,14 @@ declare const theme: {
3286
3272
  zIndex: string;
3287
3273
  };
3288
3274
  body: {
3289
- px: number;
3290
- pb: number;
3275
+ paddingX: number;
3276
+ paddingBottom: number;
3291
3277
  flex: number;
3292
3278
  overflow: string | undefined;
3293
3279
  };
3294
3280
  footer: {
3295
- px: number;
3296
- pb: number;
3281
+ paddingX: number;
3282
+ paddingBottom: number;
3297
3283
  };
3298
3284
  }) | undefined;
3299
3285
  sizes?: {
@@ -3328,18 +3314,21 @@ declare const theme: {
3328
3314
  backgroundColor: string;
3329
3315
  };
3330
3316
  zIndex: string;
3331
- _focus: _chakra_ui_styled_system.SystemStyleObject;
3332
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
3333
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
3317
+ _focusVisible: {
3318
+ outlineWidth: string;
3319
+ outlineColor: string;
3320
+ outlineStyle: string;
3321
+ outlineOffset: string;
3322
+ };
3334
3323
  _disabled: {
3335
3324
  backgroundColor: string;
3336
3325
  color: string;
3337
3326
  };
3338
3327
  display: string;
3339
3328
  alignItems: string;
3340
- py: number;
3341
- pl: number;
3342
- pr: number;
3329
+ paddingY: number;
3330
+ paddingLeft: number;
3331
+ paddingRight: number;
3343
3332
  cursor: string;
3344
3333
  overflowX: string;
3345
3334
  whiteSpace: string;
@@ -3353,9 +3342,12 @@ declare const theme: {
3353
3342
  backgroundColor: string;
3354
3343
  };
3355
3344
  zIndex: string;
3356
- _focus: _chakra_ui_styled_system.SystemStyleObject;
3357
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
3358
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
3345
+ _focusVisible: {
3346
+ outlineWidth: string;
3347
+ outlineColor: string;
3348
+ outlineStyle: string;
3349
+ outlineOffset: string;
3350
+ };
3359
3351
  _disabled: {
3360
3352
  backgroundColor: string;
3361
3353
  color: string;
@@ -3366,9 +3358,9 @@ declare const theme: {
3366
3358
  bottom?: undefined;
3367
3359
  display: string;
3368
3360
  alignItems: string;
3369
- py: number;
3370
- pl: number;
3371
- pr: number;
3361
+ paddingY: number;
3362
+ paddingLeft: number;
3363
+ paddingRight: number;
3372
3364
  cursor: string;
3373
3365
  overflowX: string;
3374
3366
  whiteSpace: string;
@@ -3382,9 +3374,12 @@ declare const theme: {
3382
3374
  backgroundColor: string;
3383
3375
  };
3384
3376
  zIndex: string;
3385
- _focus: _chakra_ui_styled_system.SystemStyleObject;
3386
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
3387
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
3377
+ _focusVisible: {
3378
+ outlineWidth: string;
3379
+ outlineColor: string;
3380
+ outlineStyle: string;
3381
+ outlineOffset: string;
3382
+ };
3388
3383
  _disabled: {
3389
3384
  backgroundColor: string;
3390
3385
  color: string;
@@ -3395,9 +3390,9 @@ declare const theme: {
3395
3390
  bottom?: undefined;
3396
3391
  display: string;
3397
3392
  alignItems: string;
3398
- py: number;
3399
- pl: number;
3400
- pr: number;
3393
+ paddingY: number;
3394
+ paddingLeft: number;
3395
+ paddingRight: number;
3401
3396
  cursor: string;
3402
3397
  overflowX: string;
3403
3398
  whiteSpace: string;
@@ -3411,9 +3406,12 @@ declare const theme: {
3411
3406
  backgroundColor: string;
3412
3407
  };
3413
3408
  zIndex: string;
3414
- _focus: _chakra_ui_styled_system.SystemStyleObject;
3415
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
3416
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
3409
+ _focusVisible: {
3410
+ outlineWidth: string;
3411
+ outlineColor: string;
3412
+ outlineStyle: string;
3413
+ outlineOffset: string;
3414
+ };
3417
3415
  _disabled: {
3418
3416
  backgroundColor: string;
3419
3417
  color: string;
@@ -3424,9 +3422,9 @@ declare const theme: {
3424
3422
  right?: undefined;
3425
3423
  display: string;
3426
3424
  alignItems: string;
3427
- py: number;
3428
- pl: number;
3429
- pr: number;
3425
+ paddingY: number;
3426
+ paddingLeft: number;
3427
+ paddingRight: number;
3430
3428
  cursor: string;
3431
3429
  overflowX: string;
3432
3430
  whiteSpace: string;
@@ -3440,9 +3438,12 @@ declare const theme: {
3440
3438
  backgroundColor: string;
3441
3439
  };
3442
3440
  zIndex: string;
3443
- _focus: _chakra_ui_styled_system.SystemStyleObject;
3444
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
3445
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
3441
+ _focusVisible: {
3442
+ outlineWidth: string;
3443
+ outlineColor: string;
3444
+ outlineStyle: string;
3445
+ outlineOffset: string;
3446
+ };
3446
3447
  _disabled: {
3447
3448
  backgroundColor: string;
3448
3449
  color: string;
@@ -3453,9 +3454,9 @@ declare const theme: {
3453
3454
  left?: undefined;
3454
3455
  display: string;
3455
3456
  alignItems: string;
3456
- py: number;
3457
- pl: number;
3458
- pr: number;
3457
+ paddingY: number;
3458
+ paddingLeft: number;
3459
+ paddingRight: number;
3459
3460
  cursor: string;
3460
3461
  overflowX: string;
3461
3462
  whiteSpace: string;
@@ -3466,7 +3467,7 @@ declare const theme: {
3466
3467
  position: string;
3467
3468
  };
3468
3469
  icon: {
3469
- mr: number;
3470
+ marginRight: number;
3470
3471
  };
3471
3472
  text: {
3472
3473
  display: string;
@@ -3484,9 +3485,6 @@ declare const theme: {
3484
3485
  variants?: {
3485
3486
  dark: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
3486
3487
  container: {
3487
- _focus: _chakra_ui_styled_system.SystemStyleObject;
3488
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
3489
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
3490
3488
  backgroundColor: string;
3491
3489
  color: string;
3492
3490
  _active: {
@@ -3518,9 +3516,6 @@ declare const theme: {
3518
3516
  };
3519
3517
  brand: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
3520
3518
  container: {
3521
- _focus: _chakra_ui_styled_system.SystemStyleObject;
3522
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
3523
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
3524
3519
  backgroundColor: string;
3525
3520
  color: string;
3526
3521
  _active: {
@@ -3533,9 +3528,6 @@ declare const theme: {
3533
3528
  };
3534
3529
  base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
3535
3530
  container: {
3536
- _focus: _chakra_ui_styled_system.SystemStyleObject;
3537
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
3538
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
3539
3531
  backgroundColor: string;
3540
3532
  color: string;
3541
3533
  _active: {
@@ -3551,9 +3543,6 @@ declare const theme: {
3551
3543
  };
3552
3544
  accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
3553
3545
  container: {
3554
- _focus: _chakra_ui_styled_system.SystemStyleObject;
3555
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
3556
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
3557
3546
  backgroundColor: string;
3558
3547
  color: string;
3559
3548
  _active: {
@@ -3587,7 +3576,7 @@ declare const theme: {
3587
3576
  color: string;
3588
3577
  };
3589
3578
  helperText: {
3590
- mt: number;
3579
+ marginTop: number;
3591
3580
  color: string;
3592
3581
  lineHeight: string;
3593
3582
  fontSize: string;
@@ -3614,7 +3603,7 @@ declare const theme: {
3614
3603
  baseStyle?: {
3615
3604
  fontSize: string;
3616
3605
  marginEnd: number;
3617
- mb: number;
3606
+ marginBottom: number;
3618
3607
  transitionProperty: string;
3619
3608
  transitionDuration: string;
3620
3609
  opacity: number;
@@ -3661,24 +3650,20 @@ declare const theme: {
3661
3650
  color: string;
3662
3651
  };
3663
3652
  _active: {
3664
- boxShadow: string;
3665
3653
  backgroundColor: string;
3666
3654
  };
3667
- _expanded: {
3668
- boxShadow: string;
3669
- };
3670
3655
  _invalid: {
3671
- _focus: _chakra_ui_styled_system.SystemStyleObject;
3672
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
3673
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
3674
3656
  _hover: {
3675
3657
  boxShadow: string;
3676
3658
  };
3677
3659
  boxShadow: string;
3678
3660
  };
3679
- _focus: _chakra_ui_styled_system.SystemStyleObject;
3680
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
3681
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
3661
+ _focusVisible: {
3662
+ outlineWidth: string;
3663
+ outlineColor: string;
3664
+ outlineStyle: string;
3665
+ outlineOffset: string;
3666
+ };
3682
3667
  _hover: {
3683
3668
  boxShadow: string;
3684
3669
  };
@@ -3701,17 +3686,14 @@ declare const theme: {
3701
3686
  }>;
3702
3687
  } | undefined;
3703
3688
  variants?: {
3704
- base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {};
3689
+ base: () => {};
3705
3690
  floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
3706
3691
  button: {
3707
- _active: {
3692
+ _hover: {
3708
3693
  backgroundColor: string;
3709
3694
  boxShadow: string;
3710
3695
  };
3711
- _focus: _chakra_ui_styled_system.SystemStyleObject;
3712
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
3713
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
3714
- _hover: {
3696
+ _active: {
3715
3697
  backgroundColor: string;
3716
3698
  boxShadow: string;
3717
3699
  };
@@ -3750,9 +3732,12 @@ declare const theme: {
3750
3732
  opacity: number;
3751
3733
  boxShadow: string;
3752
3734
  };
3753
- _focus: _chakra_ui_styled_system.SystemStyleObject;
3754
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
3755
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
3735
+ _focusVisible: {
3736
+ outlineWidth: string;
3737
+ outlineColor: string;
3738
+ outlineStyle: string;
3739
+ outlineOffset: string;
3740
+ };
3756
3741
  _hover: {
3757
3742
  boxShadow: string;
3758
3743
  };
@@ -3775,9 +3760,12 @@ declare const theme: {
3775
3760
  opacity: number;
3776
3761
  boxShadow: string;
3777
3762
  };
3778
- _focus: _chakra_ui_styled_system.SystemStyleObject;
3779
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
3780
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
3763
+ _focusVisible: {
3764
+ outlineWidth: string;
3765
+ outlineColor: string;
3766
+ outlineStyle: string;
3767
+ outlineOffset: string;
3768
+ };
3781
3769
  _hover: {
3782
3770
  boxShadow: string;
3783
3771
  };
@@ -3862,40 +3850,6 @@ declare const theme: {
3862
3850
  Input: {
3863
3851
  baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
3864
3852
  field: {
3865
- _disabled: {
3866
- backgroundColor: string;
3867
- boxShadow: string;
3868
- cursor: string;
3869
- };
3870
- _invalid: {
3871
- _focus: _chakra_ui_styled_system.SystemStyleObject;
3872
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
3873
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
3874
- boxShadow: string;
3875
- _hover: {
3876
- boxShadow: string;
3877
- };
3878
- };
3879
- " + label": {
3880
- fontSize: ("mobile.sm" | "desktop.sm")[];
3881
- top: string;
3882
- left: any;
3883
- zIndex: number;
3884
- position: string;
3885
- my: number;
3886
- transition: string;
3887
- transformOrigin: string;
3888
- cursor: string;
3889
- };
3890
- "&:not(:placeholder-shown)": {
3891
- pt: string;
3892
- "& + label": {
3893
- transform: string;
3894
- };
3895
- };
3896
- _focus: _chakra_ui_styled_system.SystemStyleObject;
3897
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
3898
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
3899
3853
  appearance: string;
3900
3854
  width: string;
3901
3855
  outline: string;
@@ -3905,7 +3859,7 @@ declare const theme: {
3905
3859
  transitionProperty: string;
3906
3860
  transitionDuration: string;
3907
3861
  position: string;
3908
- px: number;
3862
+ paddingX: number;
3909
3863
  height: string;
3910
3864
  fontSize: string;
3911
3865
  boxShadow: string;
@@ -3916,6 +3870,40 @@ declare const theme: {
3916
3870
  _hover: {
3917
3871
  boxShadow: string;
3918
3872
  };
3873
+ _focusVisible: {
3874
+ outlineOffset: number;
3875
+ outlineWidth: string;
3876
+ outlineColor: string;
3877
+ outlineStyle: string;
3878
+ };
3879
+ _disabled: {
3880
+ backgroundColor: string;
3881
+ boxShadow: string;
3882
+ cursor: string;
3883
+ };
3884
+ _invalid: {
3885
+ boxShadow: string;
3886
+ _hover: {
3887
+ boxShadow: string;
3888
+ };
3889
+ };
3890
+ " + label": {
3891
+ fontSize: ("mobile.sm" | "desktop.sm")[];
3892
+ top: string;
3893
+ left: any;
3894
+ zIndex: number;
3895
+ position: string;
3896
+ marginY: number;
3897
+ transition: string;
3898
+ transformOrigin: string;
3899
+ cursor: string;
3900
+ };
3901
+ "&:not(:placeholder-shown)": {
3902
+ paddingTop: string;
3903
+ "& + label": {
3904
+ transform: string;
3905
+ };
3906
+ };
3919
3907
  };
3920
3908
  element: {
3921
3909
  height: string;
@@ -4064,7 +4052,20 @@ declare const theme: {
4064
4052
  parts: ("icon" | "iconContainer")[];
4065
4053
  };
4066
4054
  Link: {
4067
- baseStyle?: {
4055
+ baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
4056
+ svg: {
4057
+ display: string;
4058
+ width: string;
4059
+ height: string;
4060
+ position: string;
4061
+ bottom: string;
4062
+ };
4063
+ _focusVisible: {
4064
+ outlineWidth: string;
4065
+ outlineColor: string;
4066
+ outlineStyle: string;
4067
+ outlineOffset: string;
4068
+ };
4068
4069
  transitionProperty: string;
4069
4070
  transitionDuration: string;
4070
4071
  transitionTimingFunction: string;
@@ -4085,19 +4086,13 @@ declare const theme: {
4085
4086
  outline: string;
4086
4087
  borderRadius: string;
4087
4088
  };
4088
- svg: {
4089
- display: string;
4090
- width: string;
4091
- height: string;
4092
- position: string;
4093
- bottom: string;
4094
- };
4095
- } | undefined;
4089
+ }) | undefined;
4096
4090
  sizes?: {
4097
4091
  [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
4098
4092
  } | undefined;
4099
4093
  variants?: {
4100
4094
  primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
4095
+ color: string;
4101
4096
  _hover: {
4102
4097
  color: string;
4103
4098
  backgroundColor: string;
@@ -4106,12 +4101,9 @@ declare const theme: {
4106
4101
  color: string;
4107
4102
  backgroundColor: string;
4108
4103
  };
4109
- _focus: _chakra_ui_styled_system.SystemStyleObject;
4110
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
4111
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
4112
- color: string;
4113
4104
  };
4114
4105
  secondary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
4106
+ color: string;
4115
4107
  _hover: {
4116
4108
  backgroundColor: string;
4117
4109
  color: string;
@@ -4120,10 +4112,6 @@ declare const theme: {
4120
4112
  backgroundColor: string;
4121
4113
  color: string;
4122
4114
  };
4123
- _focus: _chakra_ui_styled_system.SystemStyleObject;
4124
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
4125
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
4126
- color: string;
4127
4115
  };
4128
4116
  } | undefined;
4129
4117
  defaultProps?: {
@@ -4175,6 +4163,15 @@ declare const theme: {
4175
4163
  borderBottomRadius: string;
4176
4164
  };
4177
4165
  item: {
4166
+ _selected: {
4167
+ backgroundColor: string;
4168
+ };
4169
+ _focusVisible: {
4170
+ outlineWidth: string;
4171
+ outlineColor: string;
4172
+ outlineStyle: string;
4173
+ outlineOffset: string;
4174
+ };
4178
4175
  paddingX: number;
4179
4176
  paddingY: number;
4180
4177
  marginY: number;
@@ -4186,15 +4183,9 @@ declare const theme: {
4186
4183
  _active: {
4187
4184
  backgroundColor: string;
4188
4185
  };
4189
- _focus: {
4190
- backgroundColor: string;
4191
- };
4192
4186
  _hover: {
4193
4187
  backgroundColor: string;
4194
4188
  };
4195
- _selected: {
4196
- backgroundColor: string;
4197
- };
4198
4189
  };
4199
4190
  label: {};
4200
4191
  description: {
@@ -4223,8 +4214,14 @@ declare const theme: {
4223
4214
  parts: ("label" | "container" | "description" | "item")[];
4224
4215
  };
4225
4216
  MediaControllerButton: {
4226
- baseStyle?: {
4217
+ baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
4227
4218
  container: {
4219
+ _focusVisible: {
4220
+ outlineWidth: string;
4221
+ outlineColor: string;
4222
+ outlineStyle: string;
4223
+ outlineOffset: string;
4224
+ };
4228
4225
  fontSize: number;
4229
4226
  transitionProperty: string;
4230
4227
  transitionDuration: string;
@@ -4244,7 +4241,7 @@ declare const theme: {
4244
4241
  width: string;
4245
4242
  height: string;
4246
4243
  };
4247
- } | undefined;
4244
+ }) | undefined;
4248
4245
  sizes?: {
4249
4246
  sm: {
4250
4247
  container: {
@@ -4260,6 +4257,13 @@ declare const theme: {
4260
4257
  variants?: {
4261
4258
  play: {
4262
4259
  container: {
4260
+ padding: number;
4261
+ _hover: {
4262
+ color: string;
4263
+ };
4264
+ _active: {
4265
+ color: string;
4266
+ };
4263
4267
  _disabled: {
4264
4268
  color: string;
4265
4269
  _hover: {
@@ -4269,16 +4273,6 @@ declare const theme: {
4269
4273
  color: string;
4270
4274
  };
4271
4275
  };
4272
- _focus: _chakra_ui_styled_system.SystemStyleObject;
4273
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
4274
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
4275
- padding: number;
4276
- _hover: {
4277
- color: string;
4278
- };
4279
- _active: {
4280
- color: string;
4281
- };
4282
4276
  };
4283
4277
  };
4284
4278
  jumpSkip: {
@@ -4299,9 +4293,6 @@ declare const theme: {
4299
4293
  backgroundColor: string;
4300
4294
  };
4301
4295
  };
4302
- _focus: _chakra_ui_styled_system.SystemStyleObject;
4303
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
4304
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
4305
4296
  };
4306
4297
  icon: {
4307
4298
  width: string;
@@ -4339,9 +4330,9 @@ declare const theme: {
4339
4330
  boxShadow: string;
4340
4331
  };
4341
4332
  header: {
4342
- px: number;
4343
- pt: number;
4344
- pb: number;
4333
+ paddingX: number;
4334
+ paddingTop: number;
4335
+ paddingBottom: number;
4345
4336
  fontWeight: string;
4346
4337
  fontFamily: string;
4347
4338
  };
@@ -4352,14 +4343,14 @@ declare const theme: {
4352
4343
  insetEnd: number;
4353
4344
  };
4354
4345
  body: {
4355
- px: number;
4356
- pb: number;
4346
+ paddingX: number;
4347
+ paddingBottom: number;
4357
4348
  flex: number;
4358
4349
  overflow: string | undefined;
4359
4350
  };
4360
4351
  footer: {
4361
- px: number;
4362
- pb: number;
4352
+ paddingX: number;
4353
+ paddingBottom: number;
4363
4354
  };
4364
4355
  }) | undefined;
4365
4356
  sizes?: {
@@ -4400,7 +4391,7 @@ declare const theme: {
4400
4391
  backgroundColor: string;
4401
4392
  color: string;
4402
4393
  borderRadius: string;
4403
- p: number;
4394
+ padding: number;
4404
4395
  zIndex: string;
4405
4396
  maxWidth: string;
4406
4397
  _focus: {
@@ -4423,9 +4414,12 @@ declare const theme: {
4423
4414
  width: number;
4424
4415
  height: number;
4425
4416
  padding: number;
4426
- _focus: _chakra_ui_styled_system.SystemStyleObject;
4427
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
4428
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
4417
+ _focusVisible: {
4418
+ outlineWidth: string;
4419
+ outlineColor: string;
4420
+ outlineStyle: string;
4421
+ outlineOffset: string;
4422
+ };
4429
4423
  position: string;
4430
4424
  color: string;
4431
4425
  hover: string;
@@ -4434,14 +4428,14 @@ declare const theme: {
4434
4428
  sizes?: {
4435
4429
  sm: {
4436
4430
  content: {
4437
- px: number;
4438
- py: number;
4431
+ paddingX: number;
4432
+ paddingY: number;
4439
4433
  };
4440
4434
  };
4441
4435
  lg: {
4442
4436
  content: {
4443
- px: number;
4444
- py: number;
4437
+ paddingX: number;
4438
+ paddingY: number;
4445
4439
  };
4446
4440
  };
4447
4441
  } | undefined;
@@ -4487,17 +4481,19 @@ declare const theme: {
4487
4481
  }>;
4488
4482
  } | undefined;
4489
4483
  variants?: {
4490
- base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {};
4484
+ [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
4485
+ keys: ("container" | "root" | "progressDot")[];
4486
+ }>;
4491
4487
  } | undefined;
4492
4488
  defaultProps?: {
4493
4489
  size?: string | number | undefined;
4494
- variant?: "base" | undefined;
4490
+ variant?: string | number | undefined;
4495
4491
  colorScheme?: string | undefined;
4496
4492
  } | undefined;
4497
4493
  parts: ("container" | "root" | "progressDot")[];
4498
4494
  };
4499
4495
  Radio: {
4500
- baseStyle?: {
4496
+ baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
4501
4497
  container: {
4502
4498
  _hover: {
4503
4499
  "input:enabled + .chakra-radio__control": {
@@ -4516,16 +4512,6 @@ declare const theme: {
4516
4512
  };
4517
4513
  };
4518
4514
  control: {
4519
- width: number;
4520
- height: number;
4521
- backgroundColor: string;
4522
- border: string;
4523
- borderColor: string;
4524
- borderRadius: string;
4525
- _focus: {
4526
- backgroundColor: string;
4527
- borderColor: string;
4528
- };
4529
4515
  _disabled: {
4530
4516
  backgroundColor: string;
4531
4517
  borderColor: string;
@@ -4542,17 +4528,25 @@ declare const theme: {
4542
4528
  borderRadius: string;
4543
4529
  background: string;
4544
4530
  };
4545
- _focus: {
4546
- backgroundColor: string;
4547
- color: string;
4548
- };
4549
4531
  _disabled: {
4550
4532
  backgroundColor: string;
4551
4533
  borderColor: string;
4552
4534
  };
4553
4535
  };
4536
+ _focusVisible: {
4537
+ outlineWidth: string;
4538
+ outlineColor: string;
4539
+ outlineStyle: string;
4540
+ outlineOffset: string;
4541
+ };
4542
+ width: number;
4543
+ height: number;
4544
+ backgroundColor: string;
4545
+ border: string;
4546
+ borderColor: string;
4547
+ borderRadius: string;
4554
4548
  };
4555
- } | undefined;
4549
+ }) | undefined;
4556
4550
  sizes?: {
4557
4551
  [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
4558
4552
  keys: ("label" | "container" | "control")[];
@@ -4582,7 +4576,7 @@ declare const theme: {
4582
4576
  left: number;
4583
4577
  zIndex: number;
4584
4578
  position: string;
4585
- my: number;
4579
+ marginY: number;
4586
4580
  transformOrigin: string;
4587
4581
  transform: ("scale(0.825) translateY(-12px)" | "scale(0.825) translateY(-14px)")[];
4588
4582
  };
@@ -4593,15 +4587,37 @@ declare const theme: {
4593
4587
  "option, optgroup": {
4594
4588
  background: string;
4595
4589
  };
4590
+ width: string;
4591
+ outline: string;
4592
+ border: number;
4593
+ backgroundColor: string;
4594
+ borderRadius: string;
4595
+ transitionProperty: string;
4596
+ transitionDuration: string;
4597
+ position: string;
4598
+ paddingX: number;
4599
+ height: string;
4600
+ fontSize: string;
4601
+ boxShadow: string;
4602
+ _active: {
4603
+ backgroundColor: string;
4604
+ boxShadow: string;
4605
+ };
4606
+ _hover: {
4607
+ boxShadow: string;
4608
+ };
4609
+ _focusVisible: {
4610
+ outlineOffset: number;
4611
+ outlineWidth: string;
4612
+ outlineColor: string;
4613
+ outlineStyle: string;
4614
+ };
4596
4615
  _disabled: {
4597
4616
  backgroundColor: string;
4598
4617
  boxShadow: string;
4599
4618
  cursor: string;
4600
4619
  };
4601
4620
  _invalid: {
4602
- _focus: _chakra_ui_styled_system.SystemStyleObject;
4603
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
4604
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
4605
4621
  boxShadow: string;
4606
4622
  _hover: {
4607
4623
  boxShadow: string;
@@ -4613,39 +4629,17 @@ declare const theme: {
4613
4629
  left: any;
4614
4630
  zIndex: number;
4615
4631
  position: string;
4616
- my: number;
4632
+ marginY: number;
4617
4633
  transition: string;
4618
4634
  transformOrigin: string;
4619
4635
  cursor: string;
4620
4636
  };
4621
4637
  "&:not(:placeholder-shown)": {
4622
- pt: string;
4638
+ paddingTop: string;
4623
4639
  "& + label": {
4624
4640
  transform: string;
4625
4641
  };
4626
4642
  };
4627
- _focus: _chakra_ui_styled_system.SystemStyleObject;
4628
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
4629
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
4630
- width: string;
4631
- outline: string;
4632
- border: number;
4633
- backgroundColor: string;
4634
- borderRadius: string;
4635
- transitionProperty: string;
4636
- transitionDuration: string;
4637
- position: string;
4638
- px: number;
4639
- height: string;
4640
- fontSize: string;
4641
- boxShadow: string;
4642
- _active: {
4643
- backgroundColor: string;
4644
- boxShadow: string;
4645
- };
4646
- _hover: {
4647
- boxShadow: string;
4648
- };
4649
4643
  };
4650
4644
  icon: {
4651
4645
  width: string;
@@ -4709,9 +4703,9 @@ declare const theme: {
4709
4703
  width: string;
4710
4704
  };
4711
4705
  container: {
4712
- px: number[];
4706
+ paddingX: number[];
4713
4707
  maxWidth: string;
4714
- mx: string;
4708
+ marginX: string;
4715
4709
  width: string;
4716
4710
  };
4717
4711
  innerContainer: {
@@ -4722,7 +4716,7 @@ declare const theme: {
4722
4716
  };
4723
4717
  backButton: {
4724
4718
  borderRadius: string;
4725
- px: number;
4719
+ paddingX: number;
4726
4720
  width: string;
4727
4721
  minWidth: string;
4728
4722
  };
@@ -4732,7 +4726,7 @@ declare const theme: {
4732
4726
  WebkitLineClamp: number;
4733
4727
  display: string;
4734
4728
  WebkitBoxOrient: string;
4735
- ml: number;
4729
+ marginLeft: number;
4736
4730
  textAlign: string;
4737
4731
  };
4738
4732
  stepContainer: {
@@ -4750,7 +4744,7 @@ declare const theme: {
4750
4744
  }>;
4751
4745
  } | undefined;
4752
4746
  variants?: {
4753
- base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
4747
+ base: () => {
4754
4748
  root: {
4755
4749
  backgroundColor: string;
4756
4750
  };
@@ -4805,7 +4799,7 @@ declare const theme: {
4805
4799
  };
4806
4800
  track: {
4807
4801
  borderRadius: string;
4808
- p: string;
4802
+ padding: string;
4809
4803
  };
4810
4804
  };
4811
4805
  md: {
@@ -4814,7 +4808,7 @@ declare const theme: {
4814
4808
  };
4815
4809
  track: {
4816
4810
  borderRadius: string;
4817
- p: string;
4811
+ padding: string;
4818
4812
  };
4819
4813
  };
4820
4814
  lg: {
@@ -4823,7 +4817,7 @@ declare const theme: {
4823
4817
  };
4824
4818
  track: {
4825
4819
  borderRadius: string;
4826
- p: string;
4820
+ padding: string;
4827
4821
  };
4828
4822
  };
4829
4823
  } | undefined;
@@ -4835,14 +4829,11 @@ declare const theme: {
4835
4829
  boxShadow: string;
4836
4830
  };
4837
4831
  _checked: {
4832
+ backgroundColor: string;
4838
4833
  _hover: {
4839
4834
  backgroundColor: string;
4840
4835
  boxShadow: string;
4841
4836
  };
4842
- _focus: _chakra_ui_styled_system.SystemStyleObject;
4843
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
4844
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
4845
- backgroundColor: string;
4846
4837
  };
4847
4838
  _disabled: {
4848
4839
  backgroundColor: string;
@@ -4852,9 +4843,12 @@ declare const theme: {
4852
4843
  boxShadow: string;
4853
4844
  };
4854
4845
  };
4855
- _focus: _chakra_ui_styled_system.SystemStyleObject;
4856
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
4857
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
4846
+ _focusVisible: {
4847
+ outlineWidth: string;
4848
+ outlineColor: string;
4849
+ outlineStyle: string;
4850
+ outlineOffset: string;
4851
+ };
4858
4852
  backgroundColor: string;
4859
4853
  boxShadow: string;
4860
4854
  };
@@ -4869,10 +4863,6 @@ declare const theme: {
4869
4863
  track: {
4870
4864
  backgroundColor: string;
4871
4865
  boxShadow: string;
4872
- _focus: {
4873
- backgroundColor: string;
4874
- boxShadow: string;
4875
- };
4876
4866
  _hover: {
4877
4867
  backgroundColor: string;
4878
4868
  };
@@ -4881,10 +4871,6 @@ declare const theme: {
4881
4871
  _hover: {
4882
4872
  backgroundColor: string;
4883
4873
  };
4884
- _focus: {
4885
- backgroundColor: string;
4886
- boxShadow: string;
4887
- };
4888
4874
  };
4889
4875
  };
4890
4876
  thumb: {
@@ -4938,16 +4924,16 @@ declare const theme: {
4938
4924
  fontSize: ("mobile.xs" | "desktop.xs")[];
4939
4925
  };
4940
4926
  th: {
4941
- px: number;
4942
- py: number;
4927
+ paddingX: number;
4928
+ paddingY: number;
4943
4929
  };
4944
4930
  td: {
4945
- px: number;
4946
- py: number;
4931
+ paddingX: number;
4932
+ paddingY: number;
4947
4933
  };
4948
4934
  caption: {
4949
- px: number;
4950
- py: number;
4935
+ paddingX: number;
4936
+ paddingY: number;
4951
4937
  };
4952
4938
  };
4953
4939
  md: {
@@ -4955,16 +4941,16 @@ declare const theme: {
4955
4941
  fontSize: ("mobile.sm" | "desktop.sm")[];
4956
4942
  };
4957
4943
  th: {
4958
- px: number;
4959
- py: number;
4944
+ paddingX: number;
4945
+ paddingY: number;
4960
4946
  };
4961
4947
  td: {
4962
- px: number;
4963
- py: number;
4948
+ paddingX: number;
4949
+ paddingY: number;
4964
4950
  };
4965
4951
  caption: {
4966
- px: number;
4967
- py: number;
4952
+ paddingX: number;
4953
+ paddingY: number;
4968
4954
  };
4969
4955
  };
4970
4956
  lg: {
@@ -4972,16 +4958,16 @@ declare const theme: {
4972
4958
  fontSize: ("mobile.sm" | "desktop.sm")[];
4973
4959
  };
4974
4960
  th: {
4975
- px: number;
4976
- py: string;
4961
+ paddingX: number;
4962
+ paddingY: string;
4977
4963
  };
4978
4964
  td: {
4979
- px: number;
4980
- py: string;
4965
+ paddingX: number;
4966
+ paddingY: string;
4981
4967
  };
4982
4968
  caption: {
4983
- px: number;
4984
- py: string;
4969
+ paddingX: number;
4970
+ paddingY: string;
4985
4971
  };
4986
4972
  };
4987
4973
  } | undefined;
@@ -5084,6 +5070,41 @@ declare const theme: {
5084
5070
  width: string;
5085
5071
  };
5086
5072
  tab: {
5073
+ _hover: {
5074
+ backgroundColor: string;
5075
+ boxShadow?: undefined;
5076
+ color?: undefined;
5077
+ } | {
5078
+ boxShadow: string;
5079
+ color: string;
5080
+ backgroundColor?: undefined;
5081
+ } | {
5082
+ backgroundColor: string;
5083
+ color: string;
5084
+ boxShadow?: undefined;
5085
+ } | {
5086
+ backgroundColor?: undefined;
5087
+ boxShadow?: undefined;
5088
+ color?: undefined;
5089
+ };
5090
+ _active: {
5091
+ backgroundColor: string;
5092
+ color: string;
5093
+ } | {
5094
+ backgroundColor?: undefined;
5095
+ color?: undefined;
5096
+ };
5097
+ _disabled: {
5098
+ color: string;
5099
+ } | {
5100
+ color?: undefined;
5101
+ };
5102
+ _focusVisible: {
5103
+ outlineWidth: string;
5104
+ outlineColor: string;
5105
+ outlineStyle: string;
5106
+ outlineOffset: string;
5107
+ };
5087
5108
  _selected: {
5088
5109
  backgroundColor: string;
5089
5110
  color: string;
@@ -5123,15 +5144,16 @@ declare const theme: {
5123
5144
  boxShadow: string;
5124
5145
  pointerEvents: string;
5125
5146
  };
5126
- _focus: {
5127
- boxShadow: string;
5128
- };
5129
- ":focus:not(:focus-visible)": {
5130
- boxShadow: string;
5131
- };
5132
- _focusVisible: {
5133
- boxShadow: string;
5134
- };
5147
+ color: string;
5148
+ display: string;
5149
+ justifyContent: string;
5150
+ alignItems: string;
5151
+ transitionProperty: string;
5152
+ transitionDuration: string;
5153
+ width: string;
5154
+ height: string;
5155
+ whiteSpace: string;
5156
+ } | {
5135
5157
  _hover: {
5136
5158
  backgroundColor: string;
5137
5159
  boxShadow?: undefined;
@@ -5161,16 +5183,12 @@ declare const theme: {
5161
5183
  } | {
5162
5184
  color?: undefined;
5163
5185
  };
5164
- color: string;
5165
- display: string;
5166
- justifyContent: string;
5167
- alignItems: string;
5168
- transitionProperty: string;
5169
- transitionDuration: string;
5170
- width: string;
5171
- height: string;
5172
- whiteSpace: string;
5173
- } | {
5186
+ _focusVisible: {
5187
+ outlineWidth: string;
5188
+ outlineColor: string;
5189
+ outlineStyle: string;
5190
+ outlineOffset: string;
5191
+ };
5174
5192
  _selected: {
5175
5193
  backgroundColor: string;
5176
5194
  color: string;
@@ -5210,44 +5228,6 @@ declare const theme: {
5210
5228
  boxShadow: string;
5211
5229
  pointerEvents: string;
5212
5230
  };
5213
- _focus: {
5214
- boxShadow: string;
5215
- };
5216
- ":focus:not(:focus-visible)": {
5217
- boxShadow: string;
5218
- };
5219
- _focusVisible: {
5220
- boxShadow: string;
5221
- };
5222
- _hover: {
5223
- backgroundColor: string;
5224
- boxShadow?: undefined;
5225
- color?: undefined;
5226
- } | {
5227
- boxShadow: string;
5228
- color: string;
5229
- backgroundColor?: undefined;
5230
- } | {
5231
- backgroundColor: string;
5232
- color: string;
5233
- boxShadow?: undefined;
5234
- } | {
5235
- backgroundColor?: undefined;
5236
- boxShadow?: undefined;
5237
- color?: undefined;
5238
- };
5239
- _active: {
5240
- backgroundColor: string;
5241
- color: string;
5242
- } | {
5243
- backgroundColor?: undefined;
5244
- color?: undefined;
5245
- };
5246
- _disabled: {
5247
- color: string;
5248
- } | {
5249
- color?: undefined;
5250
- };
5251
5231
  color?: undefined;
5252
5232
  display: string;
5253
5233
  justifyContent: string;
@@ -5264,40 +5244,40 @@ declare const theme: {
5264
5244
  sm: {
5265
5245
  tablist: {
5266
5246
  height: string;
5267
- p: string;
5247
+ padding: string;
5268
5248
  };
5269
5249
  tab: {
5270
- px: number;
5271
- py: number;
5250
+ paddingX: number;
5251
+ paddingY: number;
5272
5252
  };
5273
5253
  };
5274
5254
  md: {
5275
5255
  tablist: {
5276
5256
  height: string;
5277
- p: number;
5257
+ padding: number;
5278
5258
  };
5279
5259
  tab: {
5280
- px: number;
5260
+ paddingX: number;
5281
5261
  };
5282
5262
  };
5283
5263
  lg: {
5284
5264
  tablist: {
5285
5265
  height: string;
5286
- p: number;
5266
+ padding: number;
5287
5267
  };
5288
5268
  tab: {
5289
5269
  fontWeight: string;
5290
- px: number;
5270
+ paddingX: number;
5291
5271
  };
5292
5272
  };
5293
5273
  xl: {
5294
5274
  tablist: {
5295
5275
  height: string;
5296
- p: string;
5276
+ padding: string;
5297
5277
  };
5298
5278
  tab: {
5299
5279
  fontWeight: string;
5300
- px: number;
5280
+ paddingX: number;
5301
5281
  };
5302
5282
  };
5303
5283
  } | undefined;
@@ -5340,15 +5320,37 @@ declare const theme: {
5340
5320
  transform: string;
5341
5321
  };
5342
5322
  };
5323
+ width: string;
5324
+ outline: string;
5325
+ border: number;
5326
+ backgroundColor: string;
5327
+ borderRadius: string;
5328
+ transitionProperty: string;
5329
+ transitionDuration: string;
5330
+ position: string;
5331
+ paddingX: number;
5332
+ height: string;
5333
+ fontSize: string;
5334
+ boxShadow: string;
5335
+ _active: {
5336
+ backgroundColor: string;
5337
+ boxShadow: string;
5338
+ };
5339
+ _hover: {
5340
+ boxShadow: string;
5341
+ };
5342
+ _focusVisible: {
5343
+ outlineOffset: number;
5344
+ outlineWidth: string;
5345
+ outlineColor: string;
5346
+ outlineStyle: string;
5347
+ };
5343
5348
  _disabled: {
5344
5349
  backgroundColor: string;
5345
5350
  boxShadow: string;
5346
5351
  cursor: string;
5347
5352
  };
5348
5353
  _invalid: {
5349
- _focus: _chakra_ui_styled_system.SystemStyleObject;
5350
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
5351
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
5352
5354
  boxShadow: string;
5353
5355
  _hover: {
5354
5356
  boxShadow: string;
@@ -5360,33 +5362,11 @@ declare const theme: {
5360
5362
  left: any;
5361
5363
  zIndex: number;
5362
5364
  position: string;
5363
- my: number;
5365
+ marginY: number;
5364
5366
  transition: string;
5365
5367
  transformOrigin: string;
5366
5368
  cursor: string;
5367
5369
  };
5368
- _focus: _chakra_ui_styled_system.SystemStyleObject;
5369
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
5370
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
5371
- width: string;
5372
- outline: string;
5373
- border: number;
5374
- backgroundColor: string;
5375
- borderRadius: string;
5376
- transitionProperty: string;
5377
- transitionDuration: string;
5378
- position: string;
5379
- px: number;
5380
- height: string;
5381
- fontSize: string;
5382
- boxShadow: string;
5383
- _active: {
5384
- backgroundColor: string;
5385
- boxShadow: string;
5386
- };
5387
- _hover: {
5388
- boxShadow: string;
5389
- };
5390
5370
  }) | undefined;
5391
5371
  sizes?: {
5392
5372
  [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
@@ -5445,9 +5425,12 @@ declare const theme: {
5445
5425
  opacity: number;
5446
5426
  boxShadow: string;
5447
5427
  };
5448
- _focus: _chakra_ui_styled_system.SystemStyleObject;
5449
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
5450
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
5428
+ _focusVisible: {
5429
+ outlineWidth: string;
5430
+ outlineColor: string;
5431
+ outlineStyle: string;
5432
+ outlineOffset: string;
5433
+ };
5451
5434
  _hover: {
5452
5435
  boxShadow: string;
5453
5436
  };
@@ -5470,9 +5453,12 @@ declare const theme: {
5470
5453
  opacity: number;
5471
5454
  boxShadow: string;
5472
5455
  };
5473
- _focus: _chakra_ui_styled_system.SystemStyleObject;
5474
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
5475
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
5456
+ _focusVisible: {
5457
+ outlineWidth: string;
5458
+ outlineColor: string;
5459
+ outlineStyle: string;
5460
+ outlineOffset: string;
5461
+ };
5476
5462
  _hover: {
5477
5463
  boxShadow: string;
5478
5464
  };