@vygruppen/spor-react 6.2.3 → 7.0.1

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 (46) hide show
  1. package/.turbo/turbo-build.log +10 -10
  2. package/CHANGELOG.md +22 -0
  3. package/dist/{CountryCodeSelect-QZYP3GSD.mjs → CountryCodeSelect-EKQUBVBJ.mjs} +1 -1
  4. package/dist/{chunk-YFZOYRGT.mjs → chunk-CSCLMQYA.mjs} +183 -654
  5. package/dist/index.d.mts +502 -496
  6. package/dist/index.d.ts +502 -496
  7. package/dist/index.js +212 -685
  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/stepper/Stepper.tsx +1 -1
  13. package/src/stepper/StepperStep.tsx +1 -1
  14. package/src/theme/components/accordion.ts +4 -15
  15. package/src/theme/components/breadcrumb.ts +2 -14
  16. package/src/theme/components/button.ts +8 -58
  17. package/src/theme/components/card-select.ts +11 -26
  18. package/src/theme/components/card.ts +2 -18
  19. package/src/theme/components/checkbox.ts +4 -12
  20. package/src/theme/components/choice-chip.ts +2 -11
  21. package/src/theme/components/close-button.ts +2 -14
  22. package/src/theme/components/code.ts +1 -1
  23. package/src/theme/components/datepicker.ts +14 -65
  24. package/src/theme/components/drawer.ts +7 -7
  25. package/src/theme/components/fab.ts +12 -65
  26. package/src/theme/components/form-label.ts +1 -1
  27. package/src/theme/components/form.ts +1 -1
  28. package/src/theme/components/info-select.ts +5 -35
  29. package/src/theme/components/info-tag.ts +1 -1
  30. package/src/theme/components/input.ts +9 -31
  31. package/src/theme/components/link.ts +5 -29
  32. package/src/theme/components/listbox.ts +3 -5
  33. package/src/theme/components/media-controller-button.ts +5 -46
  34. package/src/theme/components/modal.ts +7 -7
  35. package/src/theme/components/popover.ts +7 -15
  36. package/src/theme/components/progress-indicator.ts +2 -6
  37. package/src/theme/components/radio.ts +5 -11
  38. package/src/theme/components/select.ts +2 -2
  39. package/src/theme/components/stepper.ts +11 -11
  40. package/src/theme/components/switch.ts +5 -73
  41. package/src/theme/components/table.ts +18 -18
  42. package/src/theme/components/tabs.ts +11 -14
  43. package/src/theme/components/travel-tag.ts +2 -15
  44. package/src/theme/utils/focus-util.ts +10 -0
  45. package/tsconfig.json +2 -2
  46. 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?: {
@@ -3326,20 +3312,27 @@ declare const theme: {
3326
3312
  container: {
3327
3313
  _hover: {
3328
3314
  backgroundColor: string;
3315
+ _disabled: {
3316
+ backgroundColor: string;
3317
+ color: string;
3318
+ };
3329
3319
  };
3330
3320
  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;
3321
+ _focusVisible: {
3322
+ outlineWidth: string;
3323
+ outlineColor: string;
3324
+ outlineStyle: string;
3325
+ outlineOffset: string;
3326
+ };
3334
3327
  _disabled: {
3335
3328
  backgroundColor: string;
3336
3329
  color: string;
3337
3330
  };
3338
3331
  display: string;
3339
3332
  alignItems: string;
3340
- py: number;
3341
- pl: number;
3342
- pr: number;
3333
+ paddingY: number;
3334
+ paddingLeft: number;
3335
+ paddingRight: number;
3343
3336
  cursor: string;
3344
3337
  overflowX: string;
3345
3338
  whiteSpace: string;
@@ -3351,11 +3344,18 @@ declare const theme: {
3351
3344
  } | {
3352
3345
  _hover: {
3353
3346
  backgroundColor: string;
3347
+ _disabled: {
3348
+ backgroundColor: string;
3349
+ color: string;
3350
+ };
3354
3351
  };
3355
3352
  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;
3353
+ _focusVisible: {
3354
+ outlineWidth: string;
3355
+ outlineColor: string;
3356
+ outlineStyle: string;
3357
+ outlineOffset: string;
3358
+ };
3359
3359
  _disabled: {
3360
3360
  backgroundColor: string;
3361
3361
  color: string;
@@ -3366,9 +3366,9 @@ declare const theme: {
3366
3366
  bottom?: undefined;
3367
3367
  display: string;
3368
3368
  alignItems: string;
3369
- py: number;
3370
- pl: number;
3371
- pr: number;
3369
+ paddingY: number;
3370
+ paddingLeft: number;
3371
+ paddingRight: number;
3372
3372
  cursor: string;
3373
3373
  overflowX: string;
3374
3374
  whiteSpace: string;
@@ -3380,11 +3380,18 @@ declare const theme: {
3380
3380
  } | {
3381
3381
  _hover: {
3382
3382
  backgroundColor: string;
3383
+ _disabled: {
3384
+ backgroundColor: string;
3385
+ color: string;
3386
+ };
3383
3387
  };
3384
3388
  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;
3389
+ _focusVisible: {
3390
+ outlineWidth: string;
3391
+ outlineColor: string;
3392
+ outlineStyle: string;
3393
+ outlineOffset: string;
3394
+ };
3388
3395
  _disabled: {
3389
3396
  backgroundColor: string;
3390
3397
  color: string;
@@ -3395,9 +3402,9 @@ declare const theme: {
3395
3402
  bottom?: undefined;
3396
3403
  display: string;
3397
3404
  alignItems: string;
3398
- py: number;
3399
- pl: number;
3400
- pr: number;
3405
+ paddingY: number;
3406
+ paddingLeft: number;
3407
+ paddingRight: number;
3401
3408
  cursor: string;
3402
3409
  overflowX: string;
3403
3410
  whiteSpace: string;
@@ -3409,11 +3416,18 @@ declare const theme: {
3409
3416
  } | {
3410
3417
  _hover: {
3411
3418
  backgroundColor: string;
3419
+ _disabled: {
3420
+ backgroundColor: string;
3421
+ color: string;
3422
+ };
3412
3423
  };
3413
3424
  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;
3425
+ _focusVisible: {
3426
+ outlineWidth: string;
3427
+ outlineColor: string;
3428
+ outlineStyle: string;
3429
+ outlineOffset: string;
3430
+ };
3417
3431
  _disabled: {
3418
3432
  backgroundColor: string;
3419
3433
  color: string;
@@ -3424,9 +3438,9 @@ declare const theme: {
3424
3438
  right?: undefined;
3425
3439
  display: string;
3426
3440
  alignItems: string;
3427
- py: number;
3428
- pl: number;
3429
- pr: number;
3441
+ paddingY: number;
3442
+ paddingLeft: number;
3443
+ paddingRight: number;
3430
3444
  cursor: string;
3431
3445
  overflowX: string;
3432
3446
  whiteSpace: string;
@@ -3438,11 +3452,18 @@ declare const theme: {
3438
3452
  } | {
3439
3453
  _hover: {
3440
3454
  backgroundColor: string;
3455
+ _disabled: {
3456
+ backgroundColor: string;
3457
+ color: string;
3458
+ };
3441
3459
  };
3442
3460
  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;
3461
+ _focusVisible: {
3462
+ outlineWidth: string;
3463
+ outlineColor: string;
3464
+ outlineStyle: string;
3465
+ outlineOffset: string;
3466
+ };
3446
3467
  _disabled: {
3447
3468
  backgroundColor: string;
3448
3469
  color: string;
@@ -3453,9 +3474,9 @@ declare const theme: {
3453
3474
  left?: undefined;
3454
3475
  display: string;
3455
3476
  alignItems: string;
3456
- py: number;
3457
- pl: number;
3458
- pr: number;
3477
+ paddingY: number;
3478
+ paddingLeft: number;
3479
+ paddingRight: number;
3459
3480
  cursor: string;
3460
3481
  overflowX: string;
3461
3482
  whiteSpace: string;
@@ -3466,7 +3487,7 @@ declare const theme: {
3466
3487
  position: string;
3467
3488
  };
3468
3489
  icon: {
3469
- mr: number;
3490
+ marginRight: number;
3470
3491
  };
3471
3492
  text: {
3472
3493
  display: string;
@@ -3484,9 +3505,6 @@ declare const theme: {
3484
3505
  variants?: {
3485
3506
  dark: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
3486
3507
  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
3508
  backgroundColor: string;
3491
3509
  color: string;
3492
3510
  _active: {
@@ -3518,9 +3536,6 @@ declare const theme: {
3518
3536
  };
3519
3537
  brand: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
3520
3538
  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
3539
  backgroundColor: string;
3525
3540
  color: string;
3526
3541
  _active: {
@@ -3533,9 +3548,6 @@ declare const theme: {
3533
3548
  };
3534
3549
  base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
3535
3550
  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
3551
  backgroundColor: string;
3540
3552
  color: string;
3541
3553
  _active: {
@@ -3551,9 +3563,6 @@ declare const theme: {
3551
3563
  };
3552
3564
  accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
3553
3565
  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
3566
  backgroundColor: string;
3558
3567
  color: string;
3559
3568
  _active: {
@@ -3587,7 +3596,7 @@ declare const theme: {
3587
3596
  color: string;
3588
3597
  };
3589
3598
  helperText: {
3590
- mt: number;
3599
+ marginTop: number;
3591
3600
  color: string;
3592
3601
  lineHeight: string;
3593
3602
  fontSize: string;
@@ -3614,7 +3623,7 @@ declare const theme: {
3614
3623
  baseStyle?: {
3615
3624
  fontSize: string;
3616
3625
  marginEnd: number;
3617
- mb: number;
3626
+ marginBottom: number;
3618
3627
  transitionProperty: string;
3619
3628
  transitionDuration: string;
3620
3629
  opacity: number;
@@ -3661,25 +3670,21 @@ declare const theme: {
3661
3670
  color: string;
3662
3671
  };
3663
3672
  _active: {
3664
- boxShadow: string;
3665
3673
  backgroundColor: string;
3666
3674
  };
3667
- _expanded: {
3668
- boxShadow: string;
3669
- };
3670
3675
  _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
3676
  _hover: {
3675
3677
  boxShadow: string;
3676
3678
  };
3677
3679
  boxShadow: string;
3678
3680
  };
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;
3682
- _hover: {
3681
+ _focusVisible: {
3682
+ outlineWidth: string;
3683
+ outlineColor: string;
3684
+ outlineStyle: string;
3685
+ outlineOffset: string;
3686
+ };
3687
+ _hover: {
3683
3688
  boxShadow: string;
3684
3689
  };
3685
3690
  boxShadow: string;
@@ -3701,17 +3706,14 @@ declare const theme: {
3701
3706
  }>;
3702
3707
  } | undefined;
3703
3708
  variants?: {
3704
- base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {};
3709
+ base: () => {};
3705
3710
  floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
3706
3711
  button: {
3707
- _active: {
3712
+ _hover: {
3708
3713
  backgroundColor: string;
3709
3714
  boxShadow: string;
3710
3715
  };
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: {
3716
+ _active: {
3715
3717
  backgroundColor: string;
3716
3718
  boxShadow: string;
3717
3719
  };
@@ -3750,9 +3752,12 @@ declare const theme: {
3750
3752
  opacity: number;
3751
3753
  boxShadow: string;
3752
3754
  };
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;
3755
+ _focusVisible: {
3756
+ outlineWidth: string;
3757
+ outlineColor: string;
3758
+ outlineStyle: string;
3759
+ outlineOffset: string;
3760
+ };
3756
3761
  _hover: {
3757
3762
  boxShadow: string;
3758
3763
  };
@@ -3775,9 +3780,12 @@ declare const theme: {
3775
3780
  opacity: number;
3776
3781
  boxShadow: string;
3777
3782
  };
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;
3783
+ _focusVisible: {
3784
+ outlineWidth: string;
3785
+ outlineColor: string;
3786
+ outlineStyle: string;
3787
+ outlineOffset: string;
3788
+ };
3781
3789
  _hover: {
3782
3790
  boxShadow: string;
3783
3791
  };
@@ -3862,15 +3870,38 @@ declare const theme: {
3862
3870
  Input: {
3863
3871
  baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
3864
3872
  field: {
3873
+ appearance: string;
3874
+ width: string;
3875
+ outline: string;
3876
+ border: number;
3877
+ backgroundColor: string;
3878
+ borderRadius: string;
3879
+ transitionProperty: string;
3880
+ transitionDuration: string;
3881
+ position: string;
3882
+ paddingX: number;
3883
+ height: string;
3884
+ fontSize: string;
3885
+ boxShadow: string;
3886
+ _active: {
3887
+ backgroundColor: string;
3888
+ boxShadow: string;
3889
+ };
3890
+ _hover: {
3891
+ boxShadow: string;
3892
+ };
3893
+ _focusVisible: {
3894
+ outlineOffset: number;
3895
+ outlineWidth: string;
3896
+ outlineColor: string;
3897
+ outlineStyle: string;
3898
+ };
3865
3899
  _disabled: {
3866
3900
  backgroundColor: string;
3867
3901
  boxShadow: string;
3868
3902
  cursor: string;
3869
3903
  };
3870
3904
  _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
3905
  boxShadow: string;
3875
3906
  _hover: {
3876
3907
  boxShadow: string;
@@ -3882,40 +3913,17 @@ declare const theme: {
3882
3913
  left: any;
3883
3914
  zIndex: number;
3884
3915
  position: string;
3885
- my: number;
3916
+ marginY: number;
3886
3917
  transition: string;
3887
3918
  transformOrigin: string;
3888
3919
  cursor: string;
3889
3920
  };
3890
3921
  "&:not(:placeholder-shown)": {
3891
- pt: string;
3922
+ paddingTop: string;
3892
3923
  "& + label": {
3893
3924
  transform: string;
3894
3925
  };
3895
3926
  };
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
- appearance: string;
3900
- width: string;
3901
- outline: string;
3902
- border: number;
3903
- backgroundColor: string;
3904
- borderRadius: string;
3905
- transitionProperty: string;
3906
- transitionDuration: string;
3907
- position: string;
3908
- px: number;
3909
- height: string;
3910
- fontSize: string;
3911
- boxShadow: string;
3912
- _active: {
3913
- backgroundColor: string;
3914
- boxShadow: string;
3915
- };
3916
- _hover: {
3917
- boxShadow: string;
3918
- };
3919
3927
  };
3920
3928
  element: {
3921
3929
  height: string;
@@ -4064,7 +4072,20 @@ declare const theme: {
4064
4072
  parts: ("icon" | "iconContainer")[];
4065
4073
  };
4066
4074
  Link: {
4067
- baseStyle?: {
4075
+ baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
4076
+ svg: {
4077
+ display: string;
4078
+ width: string;
4079
+ height: string;
4080
+ position: string;
4081
+ bottom: string;
4082
+ };
4083
+ _focusVisible: {
4084
+ outlineWidth: string;
4085
+ outlineColor: string;
4086
+ outlineStyle: string;
4087
+ outlineOffset: string;
4088
+ };
4068
4089
  transitionProperty: string;
4069
4090
  transitionDuration: string;
4070
4091
  transitionTimingFunction: string;
@@ -4085,19 +4106,13 @@ declare const theme: {
4085
4106
  outline: string;
4086
4107
  borderRadius: string;
4087
4108
  };
4088
- svg: {
4089
- display: string;
4090
- width: string;
4091
- height: string;
4092
- position: string;
4093
- bottom: string;
4094
- };
4095
- } | undefined;
4109
+ }) | undefined;
4096
4110
  sizes?: {
4097
4111
  [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
4098
4112
  } | undefined;
4099
4113
  variants?: {
4100
4114
  primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
4115
+ color: string;
4101
4116
  _hover: {
4102
4117
  color: string;
4103
4118
  backgroundColor: string;
@@ -4106,12 +4121,9 @@ declare const theme: {
4106
4121
  color: string;
4107
4122
  backgroundColor: string;
4108
4123
  };
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
4124
  };
4114
4125
  secondary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
4126
+ color: string;
4115
4127
  _hover: {
4116
4128
  backgroundColor: string;
4117
4129
  color: string;
@@ -4120,10 +4132,6 @@ declare const theme: {
4120
4132
  backgroundColor: string;
4121
4133
  color: string;
4122
4134
  };
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
4135
  };
4128
4136
  } | undefined;
4129
4137
  defaultProps?: {
@@ -4175,6 +4183,15 @@ declare const theme: {
4175
4183
  borderBottomRadius: string;
4176
4184
  };
4177
4185
  item: {
4186
+ _selected: {
4187
+ backgroundColor: string;
4188
+ };
4189
+ _focusVisible: {
4190
+ outlineWidth: string;
4191
+ outlineColor: string;
4192
+ outlineStyle: string;
4193
+ outlineOffset: string;
4194
+ };
4178
4195
  paddingX: number;
4179
4196
  paddingY: number;
4180
4197
  marginY: number;
@@ -4186,15 +4203,9 @@ declare const theme: {
4186
4203
  _active: {
4187
4204
  backgroundColor: string;
4188
4205
  };
4189
- _focus: {
4190
- backgroundColor: string;
4191
- };
4192
4206
  _hover: {
4193
4207
  backgroundColor: string;
4194
4208
  };
4195
- _selected: {
4196
- backgroundColor: string;
4197
- };
4198
4209
  };
4199
4210
  label: {};
4200
4211
  description: {
@@ -4223,8 +4234,14 @@ declare const theme: {
4223
4234
  parts: ("label" | "container" | "description" | "item")[];
4224
4235
  };
4225
4236
  MediaControllerButton: {
4226
- baseStyle?: {
4237
+ baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
4227
4238
  container: {
4239
+ _focusVisible: {
4240
+ outlineWidth: string;
4241
+ outlineColor: string;
4242
+ outlineStyle: string;
4243
+ outlineOffset: string;
4244
+ };
4228
4245
  fontSize: number;
4229
4246
  transitionProperty: string;
4230
4247
  transitionDuration: string;
@@ -4244,7 +4261,7 @@ declare const theme: {
4244
4261
  width: string;
4245
4262
  height: string;
4246
4263
  };
4247
- } | undefined;
4264
+ }) | undefined;
4248
4265
  sizes?: {
4249
4266
  sm: {
4250
4267
  container: {
@@ -4260,6 +4277,13 @@ declare const theme: {
4260
4277
  variants?: {
4261
4278
  play: {
4262
4279
  container: {
4280
+ padding: number;
4281
+ _hover: {
4282
+ color: string;
4283
+ };
4284
+ _active: {
4285
+ color: string;
4286
+ };
4263
4287
  _disabled: {
4264
4288
  color: string;
4265
4289
  _hover: {
@@ -4269,16 +4293,6 @@ declare const theme: {
4269
4293
  color: string;
4270
4294
  };
4271
4295
  };
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
4296
  };
4283
4297
  };
4284
4298
  jumpSkip: {
@@ -4299,9 +4313,6 @@ declare const theme: {
4299
4313
  backgroundColor: string;
4300
4314
  };
4301
4315
  };
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
4316
  };
4306
4317
  icon: {
4307
4318
  width: string;
@@ -4339,9 +4350,9 @@ declare const theme: {
4339
4350
  boxShadow: string;
4340
4351
  };
4341
4352
  header: {
4342
- px: number;
4343
- pt: number;
4344
- pb: number;
4353
+ paddingX: number;
4354
+ paddingTop: number;
4355
+ paddingBottom: number;
4345
4356
  fontWeight: string;
4346
4357
  fontFamily: string;
4347
4358
  };
@@ -4352,14 +4363,14 @@ declare const theme: {
4352
4363
  insetEnd: number;
4353
4364
  };
4354
4365
  body: {
4355
- px: number;
4356
- pb: number;
4366
+ paddingX: number;
4367
+ paddingBottom: number;
4357
4368
  flex: number;
4358
4369
  overflow: string | undefined;
4359
4370
  };
4360
4371
  footer: {
4361
- px: number;
4362
- pb: number;
4372
+ paddingX: number;
4373
+ paddingBottom: number;
4363
4374
  };
4364
4375
  }) | undefined;
4365
4376
  sizes?: {
@@ -4400,7 +4411,7 @@ declare const theme: {
4400
4411
  backgroundColor: string;
4401
4412
  color: string;
4402
4413
  borderRadius: string;
4403
- p: number;
4414
+ padding: number;
4404
4415
  zIndex: string;
4405
4416
  maxWidth: string;
4406
4417
  _focus: {
@@ -4423,9 +4434,12 @@ declare const theme: {
4423
4434
  width: number;
4424
4435
  height: number;
4425
4436
  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;
4437
+ _focusVisible: {
4438
+ outlineWidth: string;
4439
+ outlineColor: string;
4440
+ outlineStyle: string;
4441
+ outlineOffset: string;
4442
+ };
4429
4443
  position: string;
4430
4444
  color: string;
4431
4445
  hover: string;
@@ -4434,14 +4448,14 @@ declare const theme: {
4434
4448
  sizes?: {
4435
4449
  sm: {
4436
4450
  content: {
4437
- px: number;
4438
- py: number;
4451
+ paddingX: number;
4452
+ paddingY: number;
4439
4453
  };
4440
4454
  };
4441
4455
  lg: {
4442
4456
  content: {
4443
- px: number;
4444
- py: number;
4457
+ paddingX: number;
4458
+ paddingY: number;
4445
4459
  };
4446
4460
  };
4447
4461
  } | undefined;
@@ -4487,17 +4501,19 @@ declare const theme: {
4487
4501
  }>;
4488
4502
  } | undefined;
4489
4503
  variants?: {
4490
- base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {};
4504
+ [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
4505
+ keys: ("container" | "root" | "progressDot")[];
4506
+ }>;
4491
4507
  } | undefined;
4492
4508
  defaultProps?: {
4493
4509
  size?: string | number | undefined;
4494
- variant?: "base" | undefined;
4510
+ variant?: string | number | undefined;
4495
4511
  colorScheme?: string | undefined;
4496
4512
  } | undefined;
4497
4513
  parts: ("container" | "root" | "progressDot")[];
4498
4514
  };
4499
4515
  Radio: {
4500
- baseStyle?: {
4516
+ baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
4501
4517
  container: {
4502
4518
  _hover: {
4503
4519
  "input:enabled + .chakra-radio__control": {
@@ -4516,16 +4532,6 @@ declare const theme: {
4516
4532
  };
4517
4533
  };
4518
4534
  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
4535
  _disabled: {
4530
4536
  backgroundColor: string;
4531
4537
  borderColor: string;
@@ -4542,17 +4548,25 @@ declare const theme: {
4542
4548
  borderRadius: string;
4543
4549
  background: string;
4544
4550
  };
4545
- _focus: {
4546
- backgroundColor: string;
4547
- color: string;
4548
- };
4549
4551
  _disabled: {
4550
4552
  backgroundColor: string;
4551
4553
  borderColor: string;
4552
4554
  };
4553
4555
  };
4556
+ _focusVisible: {
4557
+ outlineWidth: string;
4558
+ outlineColor: string;
4559
+ outlineStyle: string;
4560
+ outlineOffset: string;
4561
+ };
4562
+ width: number;
4563
+ height: number;
4564
+ backgroundColor: string;
4565
+ border: string;
4566
+ borderColor: string;
4567
+ borderRadius: string;
4554
4568
  };
4555
- } | undefined;
4569
+ }) | undefined;
4556
4570
  sizes?: {
4557
4571
  [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
4558
4572
  keys: ("label" | "container" | "control")[];
@@ -4582,7 +4596,7 @@ declare const theme: {
4582
4596
  left: number;
4583
4597
  zIndex: number;
4584
4598
  position: string;
4585
- my: number;
4599
+ marginY: number;
4586
4600
  transformOrigin: string;
4587
4601
  transform: ("scale(0.825) translateY(-12px)" | "scale(0.825) translateY(-14px)")[];
4588
4602
  };
@@ -4593,15 +4607,37 @@ declare const theme: {
4593
4607
  "option, optgroup": {
4594
4608
  background: string;
4595
4609
  };
4610
+ width: string;
4611
+ outline: string;
4612
+ border: number;
4613
+ backgroundColor: string;
4614
+ borderRadius: string;
4615
+ transitionProperty: string;
4616
+ transitionDuration: string;
4617
+ position: string;
4618
+ paddingX: number;
4619
+ height: string;
4620
+ fontSize: string;
4621
+ boxShadow: string;
4622
+ _active: {
4623
+ backgroundColor: string;
4624
+ boxShadow: string;
4625
+ };
4626
+ _hover: {
4627
+ boxShadow: string;
4628
+ };
4629
+ _focusVisible: {
4630
+ outlineOffset: number;
4631
+ outlineWidth: string;
4632
+ outlineColor: string;
4633
+ outlineStyle: string;
4634
+ };
4596
4635
  _disabled: {
4597
4636
  backgroundColor: string;
4598
4637
  boxShadow: string;
4599
4638
  cursor: string;
4600
4639
  };
4601
4640
  _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
4641
  boxShadow: string;
4606
4642
  _hover: {
4607
4643
  boxShadow: string;
@@ -4613,39 +4649,17 @@ declare const theme: {
4613
4649
  left: any;
4614
4650
  zIndex: number;
4615
4651
  position: string;
4616
- my: number;
4652
+ marginY: number;
4617
4653
  transition: string;
4618
4654
  transformOrigin: string;
4619
4655
  cursor: string;
4620
4656
  };
4621
4657
  "&:not(:placeholder-shown)": {
4622
- pt: string;
4658
+ paddingTop: string;
4623
4659
  "& + label": {
4624
4660
  transform: string;
4625
4661
  };
4626
4662
  };
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
4663
  };
4650
4664
  icon: {
4651
4665
  width: string;
@@ -4699,30 +4713,30 @@ declare const theme: {
4699
4713
  } | undefined;
4700
4714
  };
4701
4715
  Stepper: {
4702
- baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
4716
+ baseStyle?: {
4703
4717
  root: {
4704
4718
  display: string;
4705
4719
  alignItems: string;
4706
- justifyContent: ("center" | "space-between")[];
4707
- minHeight: ("48px" | "60px")[];
4720
+ justifyContent: ("center" | "space-between" | null)[];
4721
+ minHeight: ("48px" | "60px" | null)[];
4708
4722
  overflowX: string;
4709
4723
  width: string;
4710
4724
  };
4711
4725
  container: {
4712
- px: number[];
4726
+ paddingX: (number | null)[];
4713
4727
  maxWidth: string;
4714
- mx: string;
4728
+ marginX: string;
4715
4729
  width: string;
4716
4730
  };
4717
4731
  innerContainer: {
4718
4732
  overflow: string;
4719
- display: ("flex" | "none")[];
4733
+ display: ("flex" | "none" | null)[];
4720
4734
  alignItems: string;
4721
4735
  justifyContent: string;
4722
4736
  };
4723
4737
  backButton: {
4724
4738
  borderRadius: string;
4725
- px: number;
4739
+ paddingX: number;
4726
4740
  width: string;
4727
4741
  minWidth: string;
4728
4742
  };
@@ -4732,7 +4746,7 @@ declare const theme: {
4732
4746
  WebkitLineClamp: number;
4733
4747
  display: string;
4734
4748
  WebkitBoxOrient: string;
4735
- ml: number;
4749
+ marginLeft: number;
4736
4750
  textAlign: string;
4737
4751
  };
4738
4752
  stepContainer: {
@@ -4743,14 +4757,14 @@ declare const theme: {
4743
4757
  textStyle: string;
4744
4758
  whiteSpace: string;
4745
4759
  };
4746
- }) | undefined;
4760
+ } | undefined;
4747
4761
  sizes?: {
4748
4762
  [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
4749
4763
  keys: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "backButton" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
4750
4764
  }>;
4751
4765
  } | undefined;
4752
4766
  variants?: {
4753
- base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
4767
+ base: () => {
4754
4768
  root: {
4755
4769
  backgroundColor: string;
4756
4770
  };
@@ -4805,7 +4819,7 @@ declare const theme: {
4805
4819
  };
4806
4820
  track: {
4807
4821
  borderRadius: string;
4808
- p: string;
4822
+ padding: string;
4809
4823
  };
4810
4824
  };
4811
4825
  md: {
@@ -4814,7 +4828,7 @@ declare const theme: {
4814
4828
  };
4815
4829
  track: {
4816
4830
  borderRadius: string;
4817
- p: string;
4831
+ padding: string;
4818
4832
  };
4819
4833
  };
4820
4834
  lg: {
@@ -4823,7 +4837,7 @@ declare const theme: {
4823
4837
  };
4824
4838
  track: {
4825
4839
  borderRadius: string;
4826
- p: string;
4840
+ padding: string;
4827
4841
  };
4828
4842
  };
4829
4843
  } | undefined;
@@ -4835,14 +4849,11 @@ declare const theme: {
4835
4849
  boxShadow: string;
4836
4850
  };
4837
4851
  _checked: {
4852
+ backgroundColor: string;
4838
4853
  _hover: {
4839
4854
  backgroundColor: string;
4840
4855
  boxShadow: string;
4841
4856
  };
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
4857
  };
4847
4858
  _disabled: {
4848
4859
  backgroundColor: string;
@@ -4852,9 +4863,12 @@ declare const theme: {
4852
4863
  boxShadow: string;
4853
4864
  };
4854
4865
  };
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;
4866
+ _focusVisible: {
4867
+ outlineWidth: string;
4868
+ outlineColor: string;
4869
+ outlineStyle: string;
4870
+ outlineOffset: string;
4871
+ };
4858
4872
  backgroundColor: string;
4859
4873
  boxShadow: string;
4860
4874
  };
@@ -4869,10 +4883,6 @@ declare const theme: {
4869
4883
  track: {
4870
4884
  backgroundColor: string;
4871
4885
  boxShadow: string;
4872
- _focus: {
4873
- backgroundColor: string;
4874
- boxShadow: string;
4875
- };
4876
4886
  _hover: {
4877
4887
  backgroundColor: string;
4878
4888
  };
@@ -4881,10 +4891,6 @@ declare const theme: {
4881
4891
  _hover: {
4882
4892
  backgroundColor: string;
4883
4893
  };
4884
- _focus: {
4885
- backgroundColor: string;
4886
- boxShadow: string;
4887
- };
4888
4894
  };
4889
4895
  };
4890
4896
  thumb: {
@@ -4938,16 +4944,16 @@ declare const theme: {
4938
4944
  fontSize: ("mobile.xs" | "desktop.xs")[];
4939
4945
  };
4940
4946
  th: {
4941
- px: number;
4942
- py: number;
4947
+ paddingX: number;
4948
+ paddingY: number;
4943
4949
  };
4944
4950
  td: {
4945
- px: number;
4946
- py: number;
4951
+ paddingX: number;
4952
+ paddingY: number;
4947
4953
  };
4948
4954
  caption: {
4949
- px: number;
4950
- py: number;
4955
+ paddingX: number;
4956
+ paddingY: number;
4951
4957
  };
4952
4958
  };
4953
4959
  md: {
@@ -4955,16 +4961,16 @@ declare const theme: {
4955
4961
  fontSize: ("mobile.sm" | "desktop.sm")[];
4956
4962
  };
4957
4963
  th: {
4958
- px: number;
4959
- py: number;
4964
+ paddingX: number;
4965
+ paddingY: number;
4960
4966
  };
4961
4967
  td: {
4962
- px: number;
4963
- py: number;
4968
+ paddingX: number;
4969
+ paddingY: number;
4964
4970
  };
4965
4971
  caption: {
4966
- px: number;
4967
- py: number;
4972
+ paddingX: number;
4973
+ paddingY: number;
4968
4974
  };
4969
4975
  };
4970
4976
  lg: {
@@ -4972,16 +4978,16 @@ declare const theme: {
4972
4978
  fontSize: ("mobile.sm" | "desktop.sm")[];
4973
4979
  };
4974
4980
  th: {
4975
- px: number;
4976
- py: string;
4981
+ paddingX: number;
4982
+ paddingY: string;
4977
4983
  };
4978
4984
  td: {
4979
- px: number;
4980
- py: string;
4985
+ paddingX: number;
4986
+ paddingY: string;
4981
4987
  };
4982
4988
  caption: {
4983
- px: number;
4984
- py: string;
4989
+ paddingX: number;
4990
+ paddingY: string;
4985
4991
  };
4986
4992
  };
4987
4993
  } | undefined;
@@ -5084,6 +5090,41 @@ declare const theme: {
5084
5090
  width: string;
5085
5091
  };
5086
5092
  tab: {
5093
+ _hover: {
5094
+ backgroundColor: string;
5095
+ boxShadow?: undefined;
5096
+ color?: undefined;
5097
+ } | {
5098
+ boxShadow: string;
5099
+ color: string;
5100
+ backgroundColor?: undefined;
5101
+ } | {
5102
+ backgroundColor: string;
5103
+ color: string;
5104
+ boxShadow?: undefined;
5105
+ } | {
5106
+ backgroundColor?: undefined;
5107
+ boxShadow?: undefined;
5108
+ color?: undefined;
5109
+ };
5110
+ _active: {
5111
+ backgroundColor: string;
5112
+ color: string;
5113
+ } | {
5114
+ backgroundColor?: undefined;
5115
+ color?: undefined;
5116
+ };
5117
+ _disabled: {
5118
+ color: string;
5119
+ } | {
5120
+ color?: undefined;
5121
+ };
5122
+ _focusVisible: {
5123
+ outlineWidth: string;
5124
+ outlineColor: string;
5125
+ outlineStyle: string;
5126
+ outlineOffset: string;
5127
+ };
5087
5128
  _selected: {
5088
5129
  backgroundColor: string;
5089
5130
  color: string;
@@ -5123,15 +5164,16 @@ declare const theme: {
5123
5164
  boxShadow: string;
5124
5165
  pointerEvents: string;
5125
5166
  };
5126
- _focus: {
5127
- boxShadow: string;
5128
- };
5129
- ":focus:not(:focus-visible)": {
5130
- boxShadow: string;
5131
- };
5132
- _focusVisible: {
5133
- boxShadow: string;
5134
- };
5167
+ color: string;
5168
+ display: string;
5169
+ justifyContent: string;
5170
+ alignItems: string;
5171
+ transitionProperty: string;
5172
+ transitionDuration: string;
5173
+ width: string;
5174
+ height: string;
5175
+ whiteSpace: string;
5176
+ } | {
5135
5177
  _hover: {
5136
5178
  backgroundColor: string;
5137
5179
  boxShadow?: undefined;
@@ -5161,16 +5203,12 @@ declare const theme: {
5161
5203
  } | {
5162
5204
  color?: undefined;
5163
5205
  };
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
- } | {
5206
+ _focusVisible: {
5207
+ outlineWidth: string;
5208
+ outlineColor: string;
5209
+ outlineStyle: string;
5210
+ outlineOffset: string;
5211
+ };
5174
5212
  _selected: {
5175
5213
  backgroundColor: string;
5176
5214
  color: string;
@@ -5210,44 +5248,6 @@ declare const theme: {
5210
5248
  boxShadow: string;
5211
5249
  pointerEvents: string;
5212
5250
  };
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
5251
  color?: undefined;
5252
5252
  display: string;
5253
5253
  justifyContent: string;
@@ -5264,40 +5264,40 @@ declare const theme: {
5264
5264
  sm: {
5265
5265
  tablist: {
5266
5266
  height: string;
5267
- p: string;
5267
+ padding: string;
5268
5268
  };
5269
5269
  tab: {
5270
- px: number;
5271
- py: number;
5270
+ paddingX: number;
5271
+ paddingY: number;
5272
5272
  };
5273
5273
  };
5274
5274
  md: {
5275
5275
  tablist: {
5276
5276
  height: string;
5277
- p: number;
5277
+ padding: number;
5278
5278
  };
5279
5279
  tab: {
5280
- px: number;
5280
+ paddingX: number;
5281
5281
  };
5282
5282
  };
5283
5283
  lg: {
5284
5284
  tablist: {
5285
5285
  height: string;
5286
- p: number;
5286
+ padding: number;
5287
5287
  };
5288
5288
  tab: {
5289
5289
  fontWeight: string;
5290
- px: number;
5290
+ paddingX: number;
5291
5291
  };
5292
5292
  };
5293
5293
  xl: {
5294
5294
  tablist: {
5295
5295
  height: string;
5296
- p: string;
5296
+ padding: string;
5297
5297
  };
5298
5298
  tab: {
5299
5299
  fontWeight: string;
5300
- px: number;
5300
+ paddingX: number;
5301
5301
  };
5302
5302
  };
5303
5303
  } | undefined;
@@ -5340,15 +5340,37 @@ declare const theme: {
5340
5340
  transform: string;
5341
5341
  };
5342
5342
  };
5343
+ width: string;
5344
+ outline: string;
5345
+ border: number;
5346
+ backgroundColor: string;
5347
+ borderRadius: string;
5348
+ transitionProperty: string;
5349
+ transitionDuration: string;
5350
+ position: string;
5351
+ paddingX: number;
5352
+ height: string;
5353
+ fontSize: string;
5354
+ boxShadow: string;
5355
+ _active: {
5356
+ backgroundColor: string;
5357
+ boxShadow: string;
5358
+ };
5359
+ _hover: {
5360
+ boxShadow: string;
5361
+ };
5362
+ _focusVisible: {
5363
+ outlineOffset: number;
5364
+ outlineWidth: string;
5365
+ outlineColor: string;
5366
+ outlineStyle: string;
5367
+ };
5343
5368
  _disabled: {
5344
5369
  backgroundColor: string;
5345
5370
  boxShadow: string;
5346
5371
  cursor: string;
5347
5372
  };
5348
5373
  _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
5374
  boxShadow: string;
5353
5375
  _hover: {
5354
5376
  boxShadow: string;
@@ -5360,33 +5382,11 @@ declare const theme: {
5360
5382
  left: any;
5361
5383
  zIndex: number;
5362
5384
  position: string;
5363
- my: number;
5385
+ marginY: number;
5364
5386
  transition: string;
5365
5387
  transformOrigin: string;
5366
5388
  cursor: string;
5367
5389
  };
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
5390
  }) | undefined;
5391
5391
  sizes?: {
5392
5392
  [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
@@ -5445,9 +5445,12 @@ declare const theme: {
5445
5445
  opacity: number;
5446
5446
  boxShadow: string;
5447
5447
  };
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;
5448
+ _focusVisible: {
5449
+ outlineWidth: string;
5450
+ outlineColor: string;
5451
+ outlineStyle: string;
5452
+ outlineOffset: string;
5453
+ };
5451
5454
  _hover: {
5452
5455
  boxShadow: string;
5453
5456
  };
@@ -5470,9 +5473,12 @@ declare const theme: {
5470
5473
  opacity: number;
5471
5474
  boxShadow: string;
5472
5475
  };
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;
5476
+ _focusVisible: {
5477
+ outlineWidth: string;
5478
+ outlineColor: string;
5479
+ outlineStyle: string;
5480
+ outlineOffset: string;
5481
+ };
5476
5482
  _hover: {
5477
5483
  boxShadow: string;
5478
5484
  };