@vygruppen/spor-react 10.2.0 → 10.4.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 (26) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/CHANGELOG.md +18 -0
  3. package/dist/{CountryCodeSelect-UFSVRLDY.mjs → CountryCodeSelect-XMQTDWRD.mjs} +2 -1
  4. package/dist/{chunk-BPDFFQ3U.mjs → chunk-T4CLCBB5.mjs} +245 -111
  5. package/dist/index.d.mts +582 -107
  6. package/dist/index.d.ts +582 -107
  7. package/dist/index.js +260 -120
  8. package/dist/index.mjs +1 -1
  9. package/package.json +1 -1
  10. package/src/input/Combobox.tsx +4 -0
  11. package/src/input/CountryCodeSelect.tsx +2 -0
  12. package/src/input/InfoSelect.tsx +5 -3
  13. package/src/input/ListBox.tsx +4 -1
  14. package/src/input/NumericStepper.tsx +72 -19
  15. package/src/input/PhoneNumberInput.tsx +5 -0
  16. package/src/input/Switch.tsx +4 -2
  17. package/src/input/Textarea.tsx +1 -2
  18. package/src/theme/components/card-select.ts +1 -1
  19. package/src/theme/components/info-select.ts +1 -0
  20. package/src/theme/components/input.ts +4 -83
  21. package/src/theme/components/listbox.ts +16 -2
  22. package/src/theme/components/select.ts +18 -3
  23. package/src/theme/components/textarea.ts +13 -2
  24. package/src/theme/utils/focus-utils.ts +2 -2
  25. package/src/theme/utils/input-utils.ts +119 -0
  26. package/src/theme/utils/types.ts +2 -0
package/dist/index.d.ts CHANGED
@@ -903,6 +903,7 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
903
903
  inputRef?: React.RefObject<HTMLInputElement>;
904
904
  /** If you want to allow an empty collection */
905
905
  allowsEmptyCollection?: boolean;
906
+ variant?: "base" | "floating";
906
907
  } & OverridableInputProps;
907
908
  /**
908
909
  * A combobox is a combination of an input and a list of suggestions.
@@ -927,7 +928,7 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
927
928
  * </Combobox>
928
929
  * ```
929
930
  */
930
- declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, emptyContent, inputRef: externalInputRef, allowsEmptyCollection, ...rest }: ComboboxProps<T>): React.JSX.Element;
931
+ declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, emptyContent, inputRef: externalInputRef, allowsEmptyCollection, variant, ...rest }: ComboboxProps<T>): React.JSX.Element;
931
932
 
932
933
  type FormControlProps = FormControlProps$1;
933
934
  declare const FormControl: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", FormControlProps$1>;
@@ -1177,6 +1178,7 @@ type ListBoxProps<T> = AriaListBoxProps<T> & Omit<BoxProps, "filter" | "autoFocu
1177
1178
  /** UI to render if the collection is empty */
1178
1179
  emptyContent?: React.ReactNode;
1179
1180
  maxWidth?: BoxProps["maxWidth"];
1181
+ variant?: "base" | "floating";
1180
1182
  };
1181
1183
  /**
1182
1184
  * A component that renders a list box with selectable options.
@@ -1212,7 +1214,7 @@ type ListBoxProps<T> = AriaListBoxProps<T> & Omit<BoxProps, "filter" | "autoFocu
1212
1214
  * );
1213
1215
  * ```
1214
1216
  */
1215
- declare function ListBox<T extends object>({ isLoading, listBoxRef, state, maxWidth, ...props }: ListBoxProps<T>): React.JSX.Element;
1217
+ declare function ListBox<T extends object>({ isLoading, listBoxRef, state, maxWidth, variant, ...props }: ListBoxProps<T>): React.JSX.Element;
1216
1218
  /**
1217
1219
  * Renders a label for a listbox item.
1218
1220
  *
@@ -1270,6 +1272,11 @@ type NumericStepperProps = {
1270
1272
  stepSize?: number;
1271
1273
  /** Whether to show the number input when value is zero */
1272
1274
  showZero?: boolean;
1275
+ /** Name added to the aria-label of subtract and add buttons. */
1276
+ ariaLabelContext?: {
1277
+ singular: string;
1278
+ plural: string;
1279
+ };
1273
1280
  } & Omit<BoxProps, "onChange">;
1274
1281
  /** A simple stepper component for integer values
1275
1282
  *
@@ -1295,7 +1302,7 @@ type NumericStepperProps = {
1295
1302
  * </FormControl>
1296
1303
  * ```
1297
1304
  */
1298
- declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, withInput, stepSize, showZero, ...boxProps }: NumericStepperProps): React.JSX.Element;
1305
+ declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, withInput, stepSize, showZero, ariaLabelContext, ...boxProps }: NumericStepperProps): React.JSX.Element;
1299
1306
 
1300
1307
  type PasswordInputProps = InputProps;
1301
1308
  declare const PasswordInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"input", InputProps>;
@@ -1316,6 +1323,7 @@ type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
1316
1323
  onChange?: (change: CountryCodeAndPhoneNumber) => void;
1317
1324
  /** The optional value of the country code and phone number */
1318
1325
  value?: CountryCodeAndPhoneNumber;
1326
+ variant?: "base" | "floating";
1319
1327
  };
1320
1328
  /**
1321
1329
  * A component for entering phone numbers.
@@ -1399,6 +1407,7 @@ declare const SearchInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"
1399
1407
 
1400
1408
  type SwitchProps = Omit<SwitchProps$1, "colorScheme" | "variant"> & {
1401
1409
  size?: "sm" | "md" | "lg";
1410
+ as?: As;
1402
1411
  };
1403
1412
  /**
1404
1413
  * A switch lets you toggle between on and off, yes and no. It's an alternative to a checkbox.
@@ -1423,7 +1432,7 @@ type SwitchProps = Omit<SwitchProps$1, "colorScheme" | "variant"> & {
1423
1432
  */
1424
1433
  declare const Switch: _chakra_ui_system_dist_system_types.ComponentWithAs<"input", SwitchProps>;
1425
1434
 
1426
- type TextareaProps = Exclude<TextareaProps$1, "variant" | "size"> & {
1435
+ type TextareaProps = Exclude<TextareaProps$1, "size"> & {
1427
1436
  label?: string;
1428
1437
  };
1429
1438
  /**
@@ -4059,6 +4068,7 @@ declare const theme: {
4059
4068
  width?: string | undefined;
4060
4069
  whiteSpace?: string | undefined;
4061
4070
  fontSize: ("mobile.xs" | "desktop.sm")[];
4071
+ marginTop: number;
4062
4072
  };
4063
4073
  innerButton: {
4064
4074
  display: string;
@@ -4350,26 +4360,6 @@ declare const theme: {
4350
4360
  paddingX: number;
4351
4361
  height: number;
4352
4362
  fontSize: string;
4353
- _hover: {
4354
- outlineWidth: string;
4355
- outlineColor: string;
4356
- outlineStyle: string;
4357
- outlineOffset: string;
4358
- } | {
4359
- outline: string;
4360
- outlineColor: string;
4361
- };
4362
- _active: {
4363
- outlineWidth: string;
4364
- outlineColor: string;
4365
- outlineStyle: string;
4366
- outlineOffset: string;
4367
- backgroundColor: string;
4368
- } | {
4369
- outline: string;
4370
- outlineColor: string;
4371
- backgroundColor: string;
4372
- };
4373
4363
  _focusVisible: {
4374
4364
  outlineOffset: number;
4375
4365
  outlineWidth: string;
@@ -4417,7 +4407,7 @@ declare const theme: {
4417
4407
  outlineColor: string;
4418
4408
  };
4419
4409
  " + label": {
4420
- fontSize: ("mobile.sm" | "desktop.sm")[];
4410
+ fontSize: string[];
4421
4411
  top: string;
4422
4412
  left: any;
4423
4413
  zIndex: number;
@@ -4451,19 +4441,173 @@ declare const theme: {
4451
4441
  variants?: {
4452
4442
  base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
4453
4443
  field: {
4444
+ _hover: {
4445
+ outlineWidth: string;
4446
+ outlineColor: string;
4447
+ outlineStyle: string;
4448
+ outlineOffset: string;
4449
+ } | {
4450
+ outline: string;
4451
+ outlineColor: string;
4452
+ };
4453
+ _active: {
4454
+ outlineWidth: string;
4455
+ outlineColor: string;
4456
+ outlineStyle: string;
4457
+ outlineOffset: string;
4458
+ backgroundColor: string;
4459
+ } | {
4460
+ outline: string;
4461
+ outlineColor: string;
4462
+ backgroundColor: string;
4463
+ };
4464
+ _selected: {
4465
+ outlineWidth: string;
4466
+ outlineColor: string;
4467
+ outlineStyle: string;
4468
+ outlineOffset: string;
4469
+ backgroundColor: string;
4470
+ } | {
4471
+ outline: string;
4472
+ outlineColor: string;
4473
+ backgroundColor: string;
4474
+ };
4454
4475
  outlineWidth: string;
4455
4476
  outlineColor: string;
4456
4477
  outlineStyle: string;
4457
4478
  outlineOffset: string;
4458
4479
  backgroundColor: string;
4459
4480
  } | {
4481
+ _hover: {
4482
+ outlineWidth: string;
4483
+ outlineColor: string;
4484
+ outlineStyle: string;
4485
+ outlineOffset: string;
4486
+ } | {
4487
+ outline: string;
4488
+ outlineColor: string;
4489
+ };
4490
+ _active: {
4491
+ outlineWidth: string;
4492
+ outlineColor: string;
4493
+ outlineStyle: string;
4494
+ outlineOffset: string;
4495
+ backgroundColor: string;
4496
+ } | {
4497
+ outline: string;
4498
+ outlineColor: string;
4499
+ backgroundColor: string;
4500
+ };
4501
+ _selected: {
4502
+ outlineWidth: string;
4503
+ outlineColor: string;
4504
+ outlineStyle: string;
4505
+ outlineOffset: string;
4506
+ backgroundColor: string;
4507
+ } | {
4508
+ outline: string;
4509
+ outlineColor: string;
4510
+ backgroundColor: string;
4511
+ };
4512
+ outline: string;
4513
+ outlineColor: string;
4514
+ backgroundColor: string;
4515
+ } | {
4516
+ _hover: {
4517
+ backgroundColor: string;
4518
+ outline: string;
4519
+ outlineColor: string;
4520
+ };
4521
+ _active: {
4522
+ backgroundColor: string;
4523
+ outline: string;
4524
+ outlineColor: string;
4525
+ };
4526
+ _selected: {
4527
+ backgroundColor: string;
4528
+ outline: string;
4529
+ outlineColor: string;
4530
+ };
4460
4531
  outline: string;
4461
4532
  outlineColor: string;
4462
4533
  backgroundColor: string;
4534
+ boxShadow: string;
4463
4535
  };
4464
4536
  };
4465
4537
  floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
4466
4538
  field: {
4539
+ _hover: {
4540
+ outlineWidth: string;
4541
+ outlineColor: string;
4542
+ outlineStyle: string;
4543
+ outlineOffset: string;
4544
+ } | {
4545
+ outline: string;
4546
+ outlineColor: string;
4547
+ };
4548
+ _active: {
4549
+ outlineWidth: string;
4550
+ outlineColor: string;
4551
+ outlineStyle: string;
4552
+ outlineOffset: string;
4553
+ backgroundColor: string;
4554
+ } | {
4555
+ outline: string;
4556
+ outlineColor: string;
4557
+ backgroundColor: string;
4558
+ };
4559
+ _selected: {
4560
+ outlineWidth: string;
4561
+ outlineColor: string;
4562
+ outlineStyle: string;
4563
+ outlineOffset: string;
4564
+ backgroundColor: string;
4565
+ } | {
4566
+ outline: string;
4567
+ outlineColor: string;
4568
+ backgroundColor: string;
4569
+ };
4570
+ outlineWidth: string;
4571
+ outlineColor: string;
4572
+ outlineStyle: string;
4573
+ outlineOffset: string;
4574
+ backgroundColor: string;
4575
+ } | {
4576
+ _hover: {
4577
+ outlineWidth: string;
4578
+ outlineColor: string;
4579
+ outlineStyle: string;
4580
+ outlineOffset: string;
4581
+ } | {
4582
+ outline: string;
4583
+ outlineColor: string;
4584
+ };
4585
+ _active: {
4586
+ outlineWidth: string;
4587
+ outlineColor: string;
4588
+ outlineStyle: string;
4589
+ outlineOffset: string;
4590
+ backgroundColor: string;
4591
+ } | {
4592
+ outline: string;
4593
+ outlineColor: string;
4594
+ backgroundColor: string;
4595
+ };
4596
+ _selected: {
4597
+ outlineWidth: string;
4598
+ outlineColor: string;
4599
+ outlineStyle: string;
4600
+ outlineOffset: string;
4601
+ backgroundColor: string;
4602
+ } | {
4603
+ outline: string;
4604
+ outlineColor: string;
4605
+ backgroundColor: string;
4606
+ };
4607
+ outline: string;
4608
+ outlineColor: string;
4609
+ backgroundColor: string;
4610
+ } | {
4467
4611
  _hover: {
4468
4612
  backgroundColor: string;
4469
4613
  outline: string;
@@ -4728,20 +4872,6 @@ declare const theme: {
4728
4872
  ListBox: {
4729
4873
  baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
4730
4874
  container: {
4731
- outlineWidth: string;
4732
- outlineColor: string;
4733
- outlineStyle: string;
4734
- outlineOffset: string;
4735
- boxShadow: string;
4736
- overflowY: string;
4737
- maxHeight: string;
4738
- width: string;
4739
- listStyle: string;
4740
- borderBottomRadius: string;
4741
- backgroundColor: string;
4742
- } | {
4743
- outline: string;
4744
- outlineColor: string;
4745
4875
  boxShadow: string;
4746
4876
  overflowY: string;
4747
4877
  maxHeight: string;
@@ -4787,13 +4917,27 @@ declare const theme: {
4787
4917
  }>;
4788
4918
  } | undefined;
4789
4919
  variants?: {
4790
- [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
4791
- keys: ("label" | "container" | "description" | "item")[];
4792
- }>;
4920
+ base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
4921
+ container: {
4922
+ outlineWidth: string;
4923
+ outlineColor: string;
4924
+ outlineStyle: string;
4925
+ outlineOffset: string;
4926
+ } | {
4927
+ outline: string;
4928
+ outlineColor: string;
4929
+ };
4930
+ };
4931
+ floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
4932
+ container: {
4933
+ outline: string;
4934
+ outlineColor: string;
4935
+ };
4936
+ };
4793
4937
  } | undefined;
4794
4938
  defaultProps?: {
4795
4939
  size?: string | number | undefined;
4796
- variant?: string | number | undefined;
4940
+ variant?: "base" | "floating" | undefined;
4797
4941
  colorScheme?: string | undefined;
4798
4942
  } | undefined;
4799
4943
  parts: ("label" | "container" | "description" | "item")[];
@@ -5584,7 +5728,6 @@ declare const theme: {
5584
5728
  field: {
5585
5729
  appearance: string;
5586
5730
  paddingTop: string;
5587
- "option, optgroup": {};
5588
5731
  width: string;
5589
5732
  outline: string;
5590
5733
  border: number;
@@ -5595,26 +5738,6 @@ declare const theme: {
5595
5738
  paddingX: number;
5596
5739
  height: number;
5597
5740
  fontSize: string;
5598
- _hover: {
5599
- outlineWidth: string;
5600
- outlineColor: string;
5601
- outlineStyle: string;
5602
- outlineOffset: string;
5603
- } | {
5604
- outline: string;
5605
- outlineColor: string;
5606
- };
5607
- _active: {
5608
- outlineWidth: string;
5609
- outlineColor: string;
5610
- outlineStyle: string;
5611
- outlineOffset: string;
5612
- backgroundColor: string;
5613
- } | {
5614
- outline: string;
5615
- outlineColor: string;
5616
- backgroundColor: string;
5617
- };
5618
5741
  _focusVisible: {
5619
5742
  outlineOffset: number;
5620
5743
  outlineWidth: string;
@@ -5662,7 +5785,7 @@ declare const theme: {
5662
5785
  outlineColor: string;
5663
5786
  };
5664
5787
  " + label": {
5665
- fontSize: ("mobile.sm" | "desktop.sm")[];
5788
+ fontSize: string[];
5666
5789
  top: string;
5667
5790
  left: any;
5668
5791
  zIndex: number;
@@ -5698,25 +5821,212 @@ declare const theme: {
5698
5821
  }>;
5699
5822
  } | undefined;
5700
5823
  variants?: {
5701
- [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
5702
- keys: ("icon" | "root" | "field")[];
5703
- }>;
5704
- } | undefined;
5705
- defaultProps?: {
5706
- size?: string | number | undefined;
5707
- variant?: string | number | undefined;
5708
- colorScheme?: string | undefined;
5709
- } | undefined;
5710
- parts: ("icon" | "root" | "field")[];
5711
- };
5712
- Skeleton: {
5713
- baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
5714
- [x: string]: any;
5715
- opacity: number;
5716
- borderRadius: string;
5717
- borderColor: any;
5718
- background: any;
5719
- animation: string;
5824
+ base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
5825
+ field: {
5826
+ _hover: {
5827
+ outlineWidth: string;
5828
+ outlineColor: string;
5829
+ outlineStyle: string;
5830
+ outlineOffset: string;
5831
+ } | {
5832
+ outline: string;
5833
+ outlineColor: string;
5834
+ };
5835
+ _active: {
5836
+ outlineWidth: string;
5837
+ outlineColor: string;
5838
+ outlineStyle: string;
5839
+ outlineOffset: string;
5840
+ backgroundColor: string;
5841
+ } | {
5842
+ outline: string;
5843
+ outlineColor: string;
5844
+ backgroundColor: string;
5845
+ };
5846
+ _selected: {
5847
+ outlineWidth: string;
5848
+ outlineColor: string;
5849
+ outlineStyle: string;
5850
+ outlineOffset: string;
5851
+ backgroundColor: string;
5852
+ } | {
5853
+ outline: string;
5854
+ outlineColor: string;
5855
+ backgroundColor: string;
5856
+ };
5857
+ outlineWidth: string;
5858
+ outlineColor: string;
5859
+ outlineStyle: string;
5860
+ outlineOffset: string;
5861
+ backgroundColor: string;
5862
+ } | {
5863
+ _hover: {
5864
+ outlineWidth: string;
5865
+ outlineColor: string;
5866
+ outlineStyle: string;
5867
+ outlineOffset: string;
5868
+ } | {
5869
+ outline: string;
5870
+ outlineColor: string;
5871
+ };
5872
+ _active: {
5873
+ outlineWidth: string;
5874
+ outlineColor: string;
5875
+ outlineStyle: string;
5876
+ outlineOffset: string;
5877
+ backgroundColor: string;
5878
+ } | {
5879
+ outline: string;
5880
+ outlineColor: string;
5881
+ backgroundColor: string;
5882
+ };
5883
+ _selected: {
5884
+ outlineWidth: string;
5885
+ outlineColor: string;
5886
+ outlineStyle: string;
5887
+ outlineOffset: string;
5888
+ backgroundColor: string;
5889
+ } | {
5890
+ outline: string;
5891
+ outlineColor: string;
5892
+ backgroundColor: string;
5893
+ };
5894
+ outline: string;
5895
+ outlineColor: string;
5896
+ backgroundColor: string;
5897
+ } | {
5898
+ _hover: {
5899
+ backgroundColor: string;
5900
+ outline: string;
5901
+ outlineColor: string;
5902
+ };
5903
+ _active: {
5904
+ backgroundColor: string;
5905
+ outline: string;
5906
+ outlineColor: string;
5907
+ };
5908
+ _selected: {
5909
+ backgroundColor: string;
5910
+ outline: string;
5911
+ outlineColor: string;
5912
+ };
5913
+ outline: string;
5914
+ outlineColor: string;
5915
+ backgroundColor: string;
5916
+ boxShadow: string;
5917
+ };
5918
+ };
5919
+ floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
5920
+ field: {
5921
+ _hover: {
5922
+ outlineWidth: string;
5923
+ outlineColor: string;
5924
+ outlineStyle: string;
5925
+ outlineOffset: string;
5926
+ } | {
5927
+ outline: string;
5928
+ outlineColor: string;
5929
+ };
5930
+ _active: {
5931
+ outlineWidth: string;
5932
+ outlineColor: string;
5933
+ outlineStyle: string;
5934
+ outlineOffset: string;
5935
+ backgroundColor: string;
5936
+ } | {
5937
+ outline: string;
5938
+ outlineColor: string;
5939
+ backgroundColor: string;
5940
+ };
5941
+ _selected: {
5942
+ outlineWidth: string;
5943
+ outlineColor: string;
5944
+ outlineStyle: string;
5945
+ outlineOffset: string;
5946
+ backgroundColor: string;
5947
+ } | {
5948
+ outline: string;
5949
+ outlineColor: string;
5950
+ backgroundColor: string;
5951
+ };
5952
+ outlineWidth: string;
5953
+ outlineColor: string;
5954
+ outlineStyle: string;
5955
+ outlineOffset: string;
5956
+ backgroundColor: string;
5957
+ } | {
5958
+ _hover: {
5959
+ outlineWidth: string;
5960
+ outlineColor: string;
5961
+ outlineStyle: string;
5962
+ outlineOffset: string;
5963
+ } | {
5964
+ outline: string;
5965
+ outlineColor: string;
5966
+ };
5967
+ _active: {
5968
+ outlineWidth: string;
5969
+ outlineColor: string;
5970
+ outlineStyle: string;
5971
+ outlineOffset: string;
5972
+ backgroundColor: string;
5973
+ } | {
5974
+ outline: string;
5975
+ outlineColor: string;
5976
+ backgroundColor: string;
5977
+ };
5978
+ _selected: {
5979
+ outlineWidth: string;
5980
+ outlineColor: string;
5981
+ outlineStyle: string;
5982
+ outlineOffset: string;
5983
+ backgroundColor: string;
5984
+ } | {
5985
+ outline: string;
5986
+ outlineColor: string;
5987
+ backgroundColor: string;
5988
+ };
5989
+ outline: string;
5990
+ outlineColor: string;
5991
+ backgroundColor: string;
5992
+ } | {
5993
+ _hover: {
5994
+ backgroundColor: string;
5995
+ outline: string;
5996
+ outlineColor: string;
5997
+ };
5998
+ _active: {
5999
+ backgroundColor: string;
6000
+ outline: string;
6001
+ outlineColor: string;
6002
+ };
6003
+ _selected: {
6004
+ backgroundColor: string;
6005
+ outline: string;
6006
+ outlineColor: string;
6007
+ };
6008
+ outline: string;
6009
+ outlineColor: string;
6010
+ backgroundColor: string;
6011
+ boxShadow: string;
6012
+ };
6013
+ };
6014
+ } | undefined;
6015
+ defaultProps?: {
6016
+ size?: string | number | undefined;
6017
+ variant?: "base" | "floating" | undefined;
6018
+ colorScheme?: string | undefined;
6019
+ } | undefined;
6020
+ parts: ("icon" | "root" | "field")[];
6021
+ };
6022
+ Skeleton: {
6023
+ baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
6024
+ [x: string]: any;
6025
+ opacity: number;
6026
+ borderRadius: string;
6027
+ borderColor: any;
6028
+ background: any;
6029
+ animation: string;
5720
6030
  }) | undefined;
5721
6031
  sizes?: {
5722
6032
  [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
@@ -6333,26 +6643,6 @@ declare const theme: {
6333
6643
  paddingX: number;
6334
6644
  height: number;
6335
6645
  fontSize: string;
6336
- _hover: {
6337
- outlineWidth: string;
6338
- outlineColor: string;
6339
- outlineStyle: string;
6340
- outlineOffset: string;
6341
- } | {
6342
- outline: string;
6343
- outlineColor: string;
6344
- };
6345
- _active: {
6346
- outlineWidth: string;
6347
- outlineColor: string;
6348
- outlineStyle: string;
6349
- outlineOffset: string;
6350
- backgroundColor: string;
6351
- } | {
6352
- outline: string;
6353
- outlineColor: string;
6354
- backgroundColor: string;
6355
- };
6356
6646
  _focusVisible: {
6357
6647
  outlineOffset: number;
6358
6648
  outlineWidth: string;
@@ -6400,7 +6690,7 @@ declare const theme: {
6400
6690
  outlineColor: string;
6401
6691
  };
6402
6692
  " + label": {
6403
- fontSize: ("mobile.sm" | "desktop.sm")[];
6693
+ fontSize: string[];
6404
6694
  top: string;
6405
6695
  left: any;
6406
6696
  zIndex: number;
@@ -6415,11 +6705,196 @@ declare const theme: {
6415
6705
  [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
6416
6706
  } | undefined;
6417
6707
  variants?: {
6418
- [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
6708
+ base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
6709
+ _hover: {
6710
+ outlineWidth: string;
6711
+ outlineColor: string;
6712
+ outlineStyle: string;
6713
+ outlineOffset: string;
6714
+ } | {
6715
+ outline: string;
6716
+ outlineColor: string;
6717
+ };
6718
+ _active: {
6719
+ outlineWidth: string;
6720
+ outlineColor: string;
6721
+ outlineStyle: string;
6722
+ outlineOffset: string;
6723
+ backgroundColor: string;
6724
+ } | {
6725
+ outline: string;
6726
+ outlineColor: string;
6727
+ backgroundColor: string;
6728
+ };
6729
+ _selected: {
6730
+ outlineWidth: string;
6731
+ outlineColor: string;
6732
+ outlineStyle: string;
6733
+ outlineOffset: string;
6734
+ backgroundColor: string;
6735
+ } | {
6736
+ outline: string;
6737
+ outlineColor: string;
6738
+ backgroundColor: string;
6739
+ };
6740
+ outlineWidth: string;
6741
+ outlineColor: string;
6742
+ outlineStyle: string;
6743
+ outlineOffset: string;
6744
+ backgroundColor: string;
6745
+ } | {
6746
+ _hover: {
6747
+ outlineWidth: string;
6748
+ outlineColor: string;
6749
+ outlineStyle: string;
6750
+ outlineOffset: string;
6751
+ } | {
6752
+ outline: string;
6753
+ outlineColor: string;
6754
+ };
6755
+ _active: {
6756
+ outlineWidth: string;
6757
+ outlineColor: string;
6758
+ outlineStyle: string;
6759
+ outlineOffset: string;
6760
+ backgroundColor: string;
6761
+ } | {
6762
+ outline: string;
6763
+ outlineColor: string;
6764
+ backgroundColor: string;
6765
+ };
6766
+ _selected: {
6767
+ outlineWidth: string;
6768
+ outlineColor: string;
6769
+ outlineStyle: string;
6770
+ outlineOffset: string;
6771
+ backgroundColor: string;
6772
+ } | {
6773
+ outline: string;
6774
+ outlineColor: string;
6775
+ backgroundColor: string;
6776
+ };
6777
+ outline: string;
6778
+ outlineColor: string;
6779
+ backgroundColor: string;
6780
+ } | {
6781
+ _hover: {
6782
+ backgroundColor: string;
6783
+ outline: string;
6784
+ outlineColor: string;
6785
+ };
6786
+ _active: {
6787
+ backgroundColor: string;
6788
+ outline: string;
6789
+ outlineColor: string;
6790
+ };
6791
+ _selected: {
6792
+ backgroundColor: string;
6793
+ outline: string;
6794
+ outlineColor: string;
6795
+ };
6796
+ outline: string;
6797
+ outlineColor: string;
6798
+ backgroundColor: string;
6799
+ boxShadow: string;
6800
+ };
6801
+ floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
6802
+ _hover: {
6803
+ outlineWidth: string;
6804
+ outlineColor: string;
6805
+ outlineStyle: string;
6806
+ outlineOffset: string;
6807
+ } | {
6808
+ outline: string;
6809
+ outlineColor: string;
6810
+ };
6811
+ _active: {
6812
+ outlineWidth: string;
6813
+ outlineColor: string;
6814
+ outlineStyle: string;
6815
+ outlineOffset: string;
6816
+ backgroundColor: string;
6817
+ } | {
6818
+ outline: string;
6819
+ outlineColor: string;
6820
+ backgroundColor: string;
6821
+ };
6822
+ _selected: {
6823
+ outlineWidth: string;
6824
+ outlineColor: string;
6825
+ outlineStyle: string;
6826
+ outlineOffset: string;
6827
+ backgroundColor: string;
6828
+ } | {
6829
+ outline: string;
6830
+ outlineColor: string;
6831
+ backgroundColor: string;
6832
+ };
6833
+ outlineWidth: string;
6834
+ outlineColor: string;
6835
+ outlineStyle: string;
6836
+ outlineOffset: string;
6837
+ backgroundColor: string;
6838
+ } | {
6839
+ _hover: {
6840
+ outlineWidth: string;
6841
+ outlineColor: string;
6842
+ outlineStyle: string;
6843
+ outlineOffset: string;
6844
+ } | {
6845
+ outline: string;
6846
+ outlineColor: string;
6847
+ };
6848
+ _active: {
6849
+ outlineWidth: string;
6850
+ outlineColor: string;
6851
+ outlineStyle: string;
6852
+ outlineOffset: string;
6853
+ backgroundColor: string;
6854
+ } | {
6855
+ outline: string;
6856
+ outlineColor: string;
6857
+ backgroundColor: string;
6858
+ };
6859
+ _selected: {
6860
+ outlineWidth: string;
6861
+ outlineColor: string;
6862
+ outlineStyle: string;
6863
+ outlineOffset: string;
6864
+ backgroundColor: string;
6865
+ } | {
6866
+ outline: string;
6867
+ outlineColor: string;
6868
+ backgroundColor: string;
6869
+ };
6870
+ outline: string;
6871
+ outlineColor: string;
6872
+ backgroundColor: string;
6873
+ } | {
6874
+ _hover: {
6875
+ backgroundColor: string;
6876
+ outline: string;
6877
+ outlineColor: string;
6878
+ };
6879
+ _active: {
6880
+ backgroundColor: string;
6881
+ outline: string;
6882
+ outlineColor: string;
6883
+ };
6884
+ _selected: {
6885
+ backgroundColor: string;
6886
+ outline: string;
6887
+ outlineColor: string;
6888
+ };
6889
+ outline: string;
6890
+ outlineColor: string;
6891
+ backgroundColor: string;
6892
+ boxShadow: string;
6893
+ };
6419
6894
  } | undefined;
6420
6895
  defaultProps?: {
6421
6896
  size?: string | number | undefined;
6422
- variant?: string | number | undefined;
6897
+ variant?: "base" | "floating" | undefined;
6423
6898
  colorScheme?: string | undefined;
6424
6899
  } | undefined;
6425
6900
  };