@vygruppen/spor-react 9.2.1 → 9.3.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.
- package/.turbo/turbo-build.log +9 -9
- package/CHANGELOG.md +13 -0
- package/dist/{CountryCodeSelect-FR7IFLQR.mjs → CountryCodeSelect-QD66IDCL.mjs} +1 -1
- package/dist/{chunk-EVOFJL5T.mjs → chunk-U3P2P6PX.mjs} +11 -13
- package/dist/index.d.mts +33 -42
- package/dist/index.d.ts +33 -42
- package/dist/index.js +10 -12
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/src/input/CardSelect.tsx +15 -1
- package/src/theme/components/button.ts +1 -1
- package/src/theme/components/choice-chip.ts +0 -2
- package/src/theme/components/datepicker.ts +2 -1
- package/src/theme/components/input.ts +1 -1
- package/src/theme/components/numeric-stepper.ts +1 -1
- package/src/theme/components/select.ts +1 -3
- package/src/theme/components/switch.ts +2 -2
- package/src/theme/utils/base-utils.ts +1 -1
package/.turbo/turbo-build.log
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
|
2
|
-
> @vygruppen/spor-react@9.
|
2
|
+
> @vygruppen/spor-react@9.3.0 build
|
3
3
|
> tsup src/index.tsx --dts --treeshake --format cjs,esm
|
4
4
|
|
5
5
|
[34mCLI[39m Building entry: src/index.tsx
|
@@ -9,12 +9,12 @@
|
|
9
9
|
[34mCJS[39m Build start
|
10
10
|
[34mESM[39m Build start
|
11
11
|
[34mDTS[39m Build start
|
12
|
-
[32mCJS[39m [1mdist/index.js [22m[32m488.25 KB[39m
|
13
|
-
[32mCJS[39m ⚡️ Build success in 2045ms
|
14
12
|
[32mESM[39m [1mdist/index.mjs [22m[32m2.02 KB[39m
|
15
|
-
[32mESM[39m [1mdist/CountryCodeSelect-
|
16
|
-
[32mESM[39m [1mdist/chunk-
|
17
|
-
[32mESM[39m ⚡️ Build success in
|
18
|
-
[
|
19
|
-
[
|
20
|
-
[32mDTS[39m
|
13
|
+
[32mESM[39m [1mdist/CountryCodeSelect-QD66IDCL.mjs [22m[32m1.19 KB[39m
|
14
|
+
[32mESM[39m [1mdist/chunk-U3P2P6PX.mjs [22m[32m382.24 KB[39m
|
15
|
+
[32mESM[39m ⚡️ Build success in 2076ms
|
16
|
+
[32mCJS[39m [1mdist/index.js [22m[32m488.21 KB[39m
|
17
|
+
[32mCJS[39m ⚡️ Build success in 2077ms
|
18
|
+
[32mDTS[39m ⚡️ Build success in 12077ms
|
19
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m318.05 KB[39m
|
20
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m318.05 KB[39m
|
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,18 @@
|
|
1
1
|
# @vygruppen/spor-react
|
2
2
|
|
3
|
+
## 9.3.0
|
4
|
+
|
5
|
+
### Minor Changes
|
6
|
+
|
7
|
+
- d660370: CardSelect: Add fontWeight prop
|
8
|
+
|
9
|
+
### Patch Changes
|
10
|
+
|
11
|
+
- 7838d12: Removed baseBackground from base variant on most of the components.
|
12
|
+
- 162650e: CardSelect: Improve JSDoc
|
13
|
+
- Updated dependencies [df1ae12]
|
14
|
+
- @vygruppen/spor-design-tokens@3.5.3
|
15
|
+
|
3
16
|
## 9.2.1
|
4
17
|
|
5
18
|
### Patch Changes
|
@@ -2507,6 +2507,7 @@ var CardSelect = forwardRef(
|
|
2507
2507
|
crossOffset = 0,
|
2508
2508
|
placement = "bottom",
|
2509
2509
|
withChevron = true,
|
2510
|
+
fontWeight = "normal",
|
2510
2511
|
...props
|
2511
2512
|
}, externalRef) => {
|
2512
2513
|
const label = "label" in props ? props.label : props["aria-label"];
|
@@ -2534,6 +2535,7 @@ var CardSelect = forwardRef(
|
|
2534
2535
|
{
|
2535
2536
|
type: "button",
|
2536
2537
|
ref: triggerRef,
|
2538
|
+
fontWeight: "bold",
|
2537
2539
|
sx: styles3.trigger,
|
2538
2540
|
"aria-label": label,
|
2539
2541
|
...buttonProps,
|
@@ -3341,7 +3343,7 @@ var texts14 = createTexts({
|
|
3341
3343
|
sv: "Telefonnummer"
|
3342
3344
|
}
|
3343
3345
|
});
|
3344
|
-
var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-
|
3346
|
+
var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-QD66IDCL.mjs'));
|
3345
3347
|
var Radio = forwardRef((props, ref) => {
|
3346
3348
|
return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
|
3347
3349
|
});
|
@@ -9552,7 +9554,7 @@ function baseBackground(state2, props) {
|
|
9552
9554
|
return surface("disabled", props);
|
9553
9555
|
case "hover":
|
9554
9556
|
default:
|
9555
|
-
return
|
9557
|
+
return { backgroundColor: "transparent" };
|
9556
9558
|
}
|
9557
9559
|
}
|
9558
9560
|
function baseBorder(state2, props) {
|
@@ -10211,7 +10213,6 @@ var config6 = defineStyleConfig$1({
|
|
10211
10213
|
},
|
10212
10214
|
_active: {
|
10213
10215
|
...baseBorder("default", props),
|
10214
|
-
// We want a
|
10215
10216
|
...baseBackground("active", props)
|
10216
10217
|
}
|
10217
10218
|
}),
|
@@ -10904,13 +10905,11 @@ var config11 = helpers6.defineMultiStyleConfig({
|
|
10904
10905
|
variants: {
|
10905
10906
|
base: (props) => ({
|
10906
10907
|
container: {
|
10907
|
-
...baseBackground("default", props),
|
10908
10908
|
...baseBorder("default", props),
|
10909
10909
|
...baseText("default", props),
|
10910
10910
|
_hover: {
|
10911
10911
|
...baseText("default", props),
|
10912
|
-
...baseBorder("hover", props)
|
10913
|
-
...baseBackground("hover", props)
|
10912
|
+
...baseBorder("hover", props)
|
10914
10913
|
},
|
10915
10914
|
_active: {
|
10916
10915
|
...baseBackground("active", props),
|
@@ -11201,6 +11200,7 @@ var config14 = helpers7.defineMultiStyleConfig({
|
|
11201
11200
|
}),
|
11202
11201
|
floating: (props) => ({
|
11203
11202
|
wrapper: {
|
11203
|
+
...floatingBackground("default", props),
|
11204
11204
|
...floatingBorder("default", props),
|
11205
11205
|
boxShadow: "sm",
|
11206
11206
|
_hover: {
|
@@ -11888,7 +11888,6 @@ var config22 = helpers14.defineMultiStyleConfig({
|
|
11888
11888
|
width: "100%",
|
11889
11889
|
outline: "none",
|
11890
11890
|
border: 0,
|
11891
|
-
...baseBackground("default", props),
|
11892
11891
|
borderRadius: "sm",
|
11893
11892
|
transitionProperty: "common",
|
11894
11893
|
transitionDuration: "fast",
|
@@ -11896,6 +11895,7 @@ var config22 = helpers14.defineMultiStyleConfig({
|
|
11896
11895
|
paddingX: 3,
|
11897
11896
|
height: "54px",
|
11898
11897
|
fontSize: "mobile.md",
|
11898
|
+
...baseBackground("default", props),
|
11899
11899
|
...baseBorder("default", props),
|
11900
11900
|
_hover: {
|
11901
11901
|
...baseBorder("hover", props)
|
@@ -12390,8 +12390,8 @@ var config28 = helpers19.defineMultiStyleConfig({
|
|
12390
12390
|
textAlign: "center",
|
12391
12391
|
transitionProperty: "common",
|
12392
12392
|
transitionDuration: "fast",
|
12393
|
-
...baseBackground("default", props),
|
12394
12393
|
...baseText("default", props),
|
12394
|
+
...baseBackground("default", props),
|
12395
12395
|
_disabled: {
|
12396
12396
|
pointerEvents: "none",
|
12397
12397
|
opacity: 0.5
|
@@ -12637,9 +12637,7 @@ var config33 = helpers24.defineMultiStyleConfig({
|
|
12637
12637
|
...input_default.baseStyle(props).field,
|
12638
12638
|
appearance: "none",
|
12639
12639
|
paddingTop: "16px",
|
12640
|
-
"option, optgroup": {
|
12641
|
-
background: "white"
|
12642
|
-
}
|
12640
|
+
"option, optgroup": {}
|
12643
12641
|
},
|
12644
12642
|
icon: {
|
12645
12643
|
width: "30px",
|
@@ -12789,17 +12787,17 @@ var config36 = helpers26.defineMultiStyleConfig({
|
|
12789
12787
|
height: [$height3.reference],
|
12790
12788
|
transitionProperty: "common",
|
12791
12789
|
transitionDuration: "fast",
|
12792
|
-
...baseBackground("default", props),
|
12793
12790
|
...baseBorder("default", props),
|
12794
12791
|
...focusVisibleStyles(props),
|
12792
|
+
...baseBackground("default", props),
|
12795
12793
|
_hover: {
|
12796
|
-
...baseBackground("hover", props),
|
12797
12794
|
...baseBorder("hover", props)
|
12798
12795
|
},
|
12799
12796
|
_checked: {
|
12800
12797
|
...brandBackground("default", props),
|
12801
12798
|
outlineColor: "transparent",
|
12802
12799
|
_hover: {
|
12800
|
+
...baseBackground("default", props),
|
12803
12801
|
...brandBackground("hover", props)
|
12804
12802
|
}
|
12805
12803
|
},
|
package/dist/index.d.mts
CHANGED
@@ -667,9 +667,13 @@ type CardSelectProps = BoxProps & {
|
|
667
667
|
placement?: AriaPositionProps["placement"];
|
668
668
|
/** Whether or not to show the chevron. Defaults to true */
|
669
669
|
withChevron?: boolean;
|
670
|
+
/** Defaults to normal */
|
671
|
+
fontWeight?: ResponsiveValue<"normal" | "bold">;
|
670
672
|
} & ({
|
673
|
+
/** The text label of the trigger button */
|
671
674
|
label: string;
|
672
675
|
} | {
|
676
|
+
/** Accessible label for the trigger button */
|
673
677
|
"aria-label": string;
|
674
678
|
});
|
675
679
|
/**
|
@@ -3512,14 +3516,12 @@ declare const theme: {
|
|
3512
3516
|
base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
|
3513
3517
|
container: {
|
3514
3518
|
_hover: {
|
3515
|
-
backgroundColor: string;
|
3516
3519
|
outlineWidth: string;
|
3517
3520
|
outlineColor: string;
|
3518
3521
|
outlineStyle: string;
|
3519
3522
|
outlineOffset: string;
|
3520
3523
|
color: string;
|
3521
3524
|
} | {
|
3522
|
-
backgroundColor: string;
|
3523
3525
|
outline: string;
|
3524
3526
|
outlineColor: string;
|
3525
3527
|
color: string;
|
@@ -3540,17 +3542,14 @@ declare const theme: {
|
|
3540
3542
|
outlineColor: string;
|
3541
3543
|
outlineStyle: string;
|
3542
3544
|
outlineOffset: string;
|
3543
|
-
backgroundColor: string;
|
3544
3545
|
} | {
|
3545
3546
|
_hover: {
|
3546
|
-
backgroundColor: string;
|
3547
3547
|
outlineWidth: string;
|
3548
3548
|
outlineColor: string;
|
3549
3549
|
outlineStyle: string;
|
3550
3550
|
outlineOffset: string;
|
3551
3551
|
color: string;
|
3552
3552
|
} | {
|
3553
|
-
backgroundColor: string;
|
3554
3553
|
outline: string;
|
3555
3554
|
outlineColor: string;
|
3556
3555
|
color: string;
|
@@ -3569,7 +3568,6 @@ declare const theme: {
|
|
3569
3568
|
color: string;
|
3570
3569
|
outline: string;
|
3571
3570
|
outlineColor: string;
|
3572
|
-
backgroundColor: string;
|
3573
3571
|
};
|
3574
3572
|
};
|
3575
3573
|
accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
|
@@ -3937,6 +3935,7 @@ declare const theme: {
|
|
3937
3935
|
};
|
3938
3936
|
outline: string;
|
3939
3937
|
outlineColor: string;
|
3938
|
+
backgroundColor: string;
|
3940
3939
|
};
|
3941
3940
|
};
|
3942
3941
|
ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
|
@@ -4759,6 +4758,11 @@ declare const theme: {
|
|
4759
4758
|
outlineColor: string;
|
4760
4759
|
outlineStyle: string;
|
4761
4760
|
outlineOffset: string;
|
4761
|
+
backgroundColor: string;
|
4762
|
+
appearance: string;
|
4763
|
+
width: string;
|
4764
|
+
outline: string;
|
4765
|
+
border: number;
|
4762
4766
|
borderRadius: string;
|
4763
4767
|
transitionProperty: string;
|
4764
4768
|
transitionDuration: string;
|
@@ -4766,11 +4770,6 @@ declare const theme: {
|
|
4766
4770
|
paddingX: number;
|
4767
4771
|
height: string;
|
4768
4772
|
fontSize: string;
|
4769
|
-
backgroundColor: string;
|
4770
|
-
appearance: string;
|
4771
|
-
width: string;
|
4772
|
-
outline: string;
|
4773
|
-
border: number;
|
4774
4773
|
} | {
|
4775
4774
|
_hover: {
|
4776
4775
|
outlineWidth: string;
|
@@ -4857,6 +4856,10 @@ declare const theme: {
|
|
4857
4856
|
};
|
4858
4857
|
outline: string;
|
4859
4858
|
outlineColor: string;
|
4859
|
+
backgroundColor: string;
|
4860
|
+
appearance: string;
|
4861
|
+
width: string;
|
4862
|
+
border: number;
|
4860
4863
|
borderRadius: string;
|
4861
4864
|
transitionProperty: string;
|
4862
4865
|
transitionDuration: string;
|
@@ -4864,10 +4867,6 @@ declare const theme: {
|
|
4864
4867
|
paddingX: number;
|
4865
4868
|
height: string;
|
4866
4869
|
fontSize: string;
|
4867
|
-
backgroundColor: string;
|
4868
|
-
appearance: string;
|
4869
|
-
width: string;
|
4870
|
-
border: number;
|
4871
4870
|
};
|
4872
4871
|
element: {
|
4873
4872
|
height: string;
|
@@ -5385,8 +5384,8 @@ declare const theme: {
|
|
5385
5384
|
_active: {
|
5386
5385
|
backgroundColor: string;
|
5387
5386
|
};
|
5388
|
-
color: string;
|
5389
5387
|
backgroundColor: string;
|
5388
|
+
color: string;
|
5390
5389
|
fontSize: string;
|
5391
5390
|
fontWeight: string;
|
5392
5391
|
marginX: number;
|
@@ -5688,9 +5687,7 @@ declare const theme: {
|
|
5688
5687
|
field: {
|
5689
5688
|
appearance: string;
|
5690
5689
|
paddingTop: string;
|
5691
|
-
"option, optgroup": {
|
5692
|
-
background: string;
|
5693
|
-
};
|
5690
|
+
"option, optgroup": {};
|
5694
5691
|
_hover: {
|
5695
5692
|
outlineWidth: string;
|
5696
5693
|
outlineColor: string;
|
@@ -5778,6 +5775,10 @@ declare const theme: {
|
|
5778
5775
|
outlineColor: string;
|
5779
5776
|
outlineStyle: string;
|
5780
5777
|
outlineOffset: string;
|
5778
|
+
backgroundColor: string;
|
5779
|
+
width: string;
|
5780
|
+
outline: string;
|
5781
|
+
border: number;
|
5781
5782
|
borderRadius: string;
|
5782
5783
|
transitionProperty: string;
|
5783
5784
|
transitionDuration: string;
|
@@ -5785,16 +5786,10 @@ declare const theme: {
|
|
5785
5786
|
paddingX: number;
|
5786
5787
|
height: string;
|
5787
5788
|
fontSize: string;
|
5788
|
-
backgroundColor: string;
|
5789
|
-
width: string;
|
5790
|
-
outline: string;
|
5791
|
-
border: number;
|
5792
5789
|
} | {
|
5793
5790
|
appearance: string;
|
5794
5791
|
paddingTop: string;
|
5795
|
-
"option, optgroup": {
|
5796
|
-
background: string;
|
5797
|
-
};
|
5792
|
+
"option, optgroup": {};
|
5798
5793
|
_hover: {
|
5799
5794
|
outlineWidth: string;
|
5800
5795
|
outlineColor: string;
|
@@ -5880,6 +5875,9 @@ declare const theme: {
|
|
5880
5875
|
};
|
5881
5876
|
outline: string;
|
5882
5877
|
outlineColor: string;
|
5878
|
+
backgroundColor: string;
|
5879
|
+
width: string;
|
5880
|
+
border: number;
|
5883
5881
|
borderRadius: string;
|
5884
5882
|
transitionProperty: string;
|
5885
5883
|
transitionDuration: string;
|
@@ -5887,9 +5885,6 @@ declare const theme: {
|
|
5887
5885
|
paddingX: number;
|
5888
5886
|
height: string;
|
5889
5887
|
fontSize: string;
|
5890
|
-
backgroundColor: string;
|
5891
|
-
width: string;
|
5892
|
-
border: number;
|
5893
5888
|
};
|
5894
5889
|
icon: {
|
5895
5890
|
width: string;
|
@@ -6035,11 +6030,9 @@ declare const theme: {
|
|
6035
6030
|
outlineColor: string;
|
6036
6031
|
outlineStyle: string;
|
6037
6032
|
outlineOffset: string;
|
6038
|
-
backgroundColor: string;
|
6039
6033
|
} | {
|
6040
6034
|
outline: string;
|
6041
6035
|
outlineColor: string;
|
6042
|
-
backgroundColor: string;
|
6043
6036
|
};
|
6044
6037
|
_checked: {
|
6045
6038
|
outlineColor: string;
|
@@ -6083,6 +6076,7 @@ declare const theme: {
|
|
6083
6076
|
backgroundColor: string;
|
6084
6077
|
pointerEvents: string;
|
6085
6078
|
};
|
6079
|
+
backgroundColor: string;
|
6086
6080
|
_focusVisible: {
|
6087
6081
|
outlineWidth: string;
|
6088
6082
|
outlineColor: string;
|
@@ -6093,7 +6087,6 @@ declare const theme: {
|
|
6093
6087
|
outlineColor: string;
|
6094
6088
|
outlineStyle: string;
|
6095
6089
|
outlineOffset: string;
|
6096
|
-
backgroundColor: string;
|
6097
6090
|
width: string[];
|
6098
6091
|
height: string[];
|
6099
6092
|
transitionProperty: string;
|
@@ -6104,11 +6097,9 @@ declare const theme: {
|
|
6104
6097
|
outlineColor: string;
|
6105
6098
|
outlineStyle: string;
|
6106
6099
|
outlineOffset: string;
|
6107
|
-
backgroundColor: string;
|
6108
6100
|
} | {
|
6109
6101
|
outline: string;
|
6110
6102
|
outlineColor: string;
|
6111
|
-
backgroundColor: string;
|
6112
6103
|
};
|
6113
6104
|
_checked: {
|
6114
6105
|
outlineColor: string;
|
@@ -6152,6 +6143,7 @@ declare const theme: {
|
|
6152
6143
|
backgroundColor: string;
|
6153
6144
|
pointerEvents: string;
|
6154
6145
|
};
|
6146
|
+
backgroundColor: string;
|
6155
6147
|
_focusVisible: {
|
6156
6148
|
outlineWidth: string;
|
6157
6149
|
outlineColor: string;
|
@@ -6160,7 +6152,6 @@ declare const theme: {
|
|
6160
6152
|
};
|
6161
6153
|
outline: string;
|
6162
6154
|
outlineColor: string;
|
6163
|
-
backgroundColor: string;
|
6164
6155
|
width: string[];
|
6165
6156
|
height: string[];
|
6166
6157
|
transitionProperty: string;
|
@@ -6620,6 +6611,10 @@ declare const theme: {
|
|
6620
6611
|
outlineColor: string;
|
6621
6612
|
outlineStyle: string;
|
6622
6613
|
outlineOffset: string;
|
6614
|
+
backgroundColor: string;
|
6615
|
+
width: string;
|
6616
|
+
outline: string;
|
6617
|
+
border: number;
|
6623
6618
|
borderRadius: string;
|
6624
6619
|
transitionProperty: string;
|
6625
6620
|
transitionDuration: string;
|
@@ -6627,10 +6622,6 @@ declare const theme: {
|
|
6627
6622
|
paddingX: number;
|
6628
6623
|
height: string;
|
6629
6624
|
fontSize: string;
|
6630
|
-
backgroundColor: string;
|
6631
|
-
width: string;
|
6632
|
-
outline: string;
|
6633
|
-
border: number;
|
6634
6625
|
} | {
|
6635
6626
|
minHeight: string;
|
6636
6627
|
verticalAlign: string;
|
@@ -6723,6 +6714,9 @@ declare const theme: {
|
|
6723
6714
|
};
|
6724
6715
|
outline: string;
|
6725
6716
|
outlineColor: string;
|
6717
|
+
backgroundColor: string;
|
6718
|
+
width: string;
|
6719
|
+
border: number;
|
6726
6720
|
borderRadius: string;
|
6727
6721
|
transitionProperty: string;
|
6728
6722
|
transitionDuration: string;
|
@@ -6730,9 +6724,6 @@ declare const theme: {
|
|
6730
6724
|
paddingX: number;
|
6731
6725
|
height: string;
|
6732
6726
|
fontSize: string;
|
6733
|
-
backgroundColor: string;
|
6734
|
-
width: string;
|
6735
|
-
border: number;
|
6736
6727
|
}) | undefined;
|
6737
6728
|
sizes?: {
|
6738
6729
|
[key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
|
package/dist/index.d.ts
CHANGED
@@ -667,9 +667,13 @@ type CardSelectProps = BoxProps & {
|
|
667
667
|
placement?: AriaPositionProps["placement"];
|
668
668
|
/** Whether or not to show the chevron. Defaults to true */
|
669
669
|
withChevron?: boolean;
|
670
|
+
/** Defaults to normal */
|
671
|
+
fontWeight?: ResponsiveValue<"normal" | "bold">;
|
670
672
|
} & ({
|
673
|
+
/** The text label of the trigger button */
|
671
674
|
label: string;
|
672
675
|
} | {
|
676
|
+
/** Accessible label for the trigger button */
|
673
677
|
"aria-label": string;
|
674
678
|
});
|
675
679
|
/**
|
@@ -3512,14 +3516,12 @@ declare const theme: {
|
|
3512
3516
|
base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
|
3513
3517
|
container: {
|
3514
3518
|
_hover: {
|
3515
|
-
backgroundColor: string;
|
3516
3519
|
outlineWidth: string;
|
3517
3520
|
outlineColor: string;
|
3518
3521
|
outlineStyle: string;
|
3519
3522
|
outlineOffset: string;
|
3520
3523
|
color: string;
|
3521
3524
|
} | {
|
3522
|
-
backgroundColor: string;
|
3523
3525
|
outline: string;
|
3524
3526
|
outlineColor: string;
|
3525
3527
|
color: string;
|
@@ -3540,17 +3542,14 @@ declare const theme: {
|
|
3540
3542
|
outlineColor: string;
|
3541
3543
|
outlineStyle: string;
|
3542
3544
|
outlineOffset: string;
|
3543
|
-
backgroundColor: string;
|
3544
3545
|
} | {
|
3545
3546
|
_hover: {
|
3546
|
-
backgroundColor: string;
|
3547
3547
|
outlineWidth: string;
|
3548
3548
|
outlineColor: string;
|
3549
3549
|
outlineStyle: string;
|
3550
3550
|
outlineOffset: string;
|
3551
3551
|
color: string;
|
3552
3552
|
} | {
|
3553
|
-
backgroundColor: string;
|
3554
3553
|
outline: string;
|
3555
3554
|
outlineColor: string;
|
3556
3555
|
color: string;
|
@@ -3569,7 +3568,6 @@ declare const theme: {
|
|
3569
3568
|
color: string;
|
3570
3569
|
outline: string;
|
3571
3570
|
outlineColor: string;
|
3572
|
-
backgroundColor: string;
|
3573
3571
|
};
|
3574
3572
|
};
|
3575
3573
|
accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
|
@@ -3937,6 +3935,7 @@ declare const theme: {
|
|
3937
3935
|
};
|
3938
3936
|
outline: string;
|
3939
3937
|
outlineColor: string;
|
3938
|
+
backgroundColor: string;
|
3940
3939
|
};
|
3941
3940
|
};
|
3942
3941
|
ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
|
@@ -4759,6 +4758,11 @@ declare const theme: {
|
|
4759
4758
|
outlineColor: string;
|
4760
4759
|
outlineStyle: string;
|
4761
4760
|
outlineOffset: string;
|
4761
|
+
backgroundColor: string;
|
4762
|
+
appearance: string;
|
4763
|
+
width: string;
|
4764
|
+
outline: string;
|
4765
|
+
border: number;
|
4762
4766
|
borderRadius: string;
|
4763
4767
|
transitionProperty: string;
|
4764
4768
|
transitionDuration: string;
|
@@ -4766,11 +4770,6 @@ declare const theme: {
|
|
4766
4770
|
paddingX: number;
|
4767
4771
|
height: string;
|
4768
4772
|
fontSize: string;
|
4769
|
-
backgroundColor: string;
|
4770
|
-
appearance: string;
|
4771
|
-
width: string;
|
4772
|
-
outline: string;
|
4773
|
-
border: number;
|
4774
4773
|
} | {
|
4775
4774
|
_hover: {
|
4776
4775
|
outlineWidth: string;
|
@@ -4857,6 +4856,10 @@ declare const theme: {
|
|
4857
4856
|
};
|
4858
4857
|
outline: string;
|
4859
4858
|
outlineColor: string;
|
4859
|
+
backgroundColor: string;
|
4860
|
+
appearance: string;
|
4861
|
+
width: string;
|
4862
|
+
border: number;
|
4860
4863
|
borderRadius: string;
|
4861
4864
|
transitionProperty: string;
|
4862
4865
|
transitionDuration: string;
|
@@ -4864,10 +4867,6 @@ declare const theme: {
|
|
4864
4867
|
paddingX: number;
|
4865
4868
|
height: string;
|
4866
4869
|
fontSize: string;
|
4867
|
-
backgroundColor: string;
|
4868
|
-
appearance: string;
|
4869
|
-
width: string;
|
4870
|
-
border: number;
|
4871
4870
|
};
|
4872
4871
|
element: {
|
4873
4872
|
height: string;
|
@@ -5385,8 +5384,8 @@ declare const theme: {
|
|
5385
5384
|
_active: {
|
5386
5385
|
backgroundColor: string;
|
5387
5386
|
};
|
5388
|
-
color: string;
|
5389
5387
|
backgroundColor: string;
|
5388
|
+
color: string;
|
5390
5389
|
fontSize: string;
|
5391
5390
|
fontWeight: string;
|
5392
5391
|
marginX: number;
|
@@ -5688,9 +5687,7 @@ declare const theme: {
|
|
5688
5687
|
field: {
|
5689
5688
|
appearance: string;
|
5690
5689
|
paddingTop: string;
|
5691
|
-
"option, optgroup": {
|
5692
|
-
background: string;
|
5693
|
-
};
|
5690
|
+
"option, optgroup": {};
|
5694
5691
|
_hover: {
|
5695
5692
|
outlineWidth: string;
|
5696
5693
|
outlineColor: string;
|
@@ -5778,6 +5775,10 @@ declare const theme: {
|
|
5778
5775
|
outlineColor: string;
|
5779
5776
|
outlineStyle: string;
|
5780
5777
|
outlineOffset: string;
|
5778
|
+
backgroundColor: string;
|
5779
|
+
width: string;
|
5780
|
+
outline: string;
|
5781
|
+
border: number;
|
5781
5782
|
borderRadius: string;
|
5782
5783
|
transitionProperty: string;
|
5783
5784
|
transitionDuration: string;
|
@@ -5785,16 +5786,10 @@ declare const theme: {
|
|
5785
5786
|
paddingX: number;
|
5786
5787
|
height: string;
|
5787
5788
|
fontSize: string;
|
5788
|
-
backgroundColor: string;
|
5789
|
-
width: string;
|
5790
|
-
outline: string;
|
5791
|
-
border: number;
|
5792
5789
|
} | {
|
5793
5790
|
appearance: string;
|
5794
5791
|
paddingTop: string;
|
5795
|
-
"option, optgroup": {
|
5796
|
-
background: string;
|
5797
|
-
};
|
5792
|
+
"option, optgroup": {};
|
5798
5793
|
_hover: {
|
5799
5794
|
outlineWidth: string;
|
5800
5795
|
outlineColor: string;
|
@@ -5880,6 +5875,9 @@ declare const theme: {
|
|
5880
5875
|
};
|
5881
5876
|
outline: string;
|
5882
5877
|
outlineColor: string;
|
5878
|
+
backgroundColor: string;
|
5879
|
+
width: string;
|
5880
|
+
border: number;
|
5883
5881
|
borderRadius: string;
|
5884
5882
|
transitionProperty: string;
|
5885
5883
|
transitionDuration: string;
|
@@ -5887,9 +5885,6 @@ declare const theme: {
|
|
5887
5885
|
paddingX: number;
|
5888
5886
|
height: string;
|
5889
5887
|
fontSize: string;
|
5890
|
-
backgroundColor: string;
|
5891
|
-
width: string;
|
5892
|
-
border: number;
|
5893
5888
|
};
|
5894
5889
|
icon: {
|
5895
5890
|
width: string;
|
@@ -6035,11 +6030,9 @@ declare const theme: {
|
|
6035
6030
|
outlineColor: string;
|
6036
6031
|
outlineStyle: string;
|
6037
6032
|
outlineOffset: string;
|
6038
|
-
backgroundColor: string;
|
6039
6033
|
} | {
|
6040
6034
|
outline: string;
|
6041
6035
|
outlineColor: string;
|
6042
|
-
backgroundColor: string;
|
6043
6036
|
};
|
6044
6037
|
_checked: {
|
6045
6038
|
outlineColor: string;
|
@@ -6083,6 +6076,7 @@ declare const theme: {
|
|
6083
6076
|
backgroundColor: string;
|
6084
6077
|
pointerEvents: string;
|
6085
6078
|
};
|
6079
|
+
backgroundColor: string;
|
6086
6080
|
_focusVisible: {
|
6087
6081
|
outlineWidth: string;
|
6088
6082
|
outlineColor: string;
|
@@ -6093,7 +6087,6 @@ declare const theme: {
|
|
6093
6087
|
outlineColor: string;
|
6094
6088
|
outlineStyle: string;
|
6095
6089
|
outlineOffset: string;
|
6096
|
-
backgroundColor: string;
|
6097
6090
|
width: string[];
|
6098
6091
|
height: string[];
|
6099
6092
|
transitionProperty: string;
|
@@ -6104,11 +6097,9 @@ declare const theme: {
|
|
6104
6097
|
outlineColor: string;
|
6105
6098
|
outlineStyle: string;
|
6106
6099
|
outlineOffset: string;
|
6107
|
-
backgroundColor: string;
|
6108
6100
|
} | {
|
6109
6101
|
outline: string;
|
6110
6102
|
outlineColor: string;
|
6111
|
-
backgroundColor: string;
|
6112
6103
|
};
|
6113
6104
|
_checked: {
|
6114
6105
|
outlineColor: string;
|
@@ -6152,6 +6143,7 @@ declare const theme: {
|
|
6152
6143
|
backgroundColor: string;
|
6153
6144
|
pointerEvents: string;
|
6154
6145
|
};
|
6146
|
+
backgroundColor: string;
|
6155
6147
|
_focusVisible: {
|
6156
6148
|
outlineWidth: string;
|
6157
6149
|
outlineColor: string;
|
@@ -6160,7 +6152,6 @@ declare const theme: {
|
|
6160
6152
|
};
|
6161
6153
|
outline: string;
|
6162
6154
|
outlineColor: string;
|
6163
|
-
backgroundColor: string;
|
6164
6155
|
width: string[];
|
6165
6156
|
height: string[];
|
6166
6157
|
transitionProperty: string;
|
@@ -6620,6 +6611,10 @@ declare const theme: {
|
|
6620
6611
|
outlineColor: string;
|
6621
6612
|
outlineStyle: string;
|
6622
6613
|
outlineOffset: string;
|
6614
|
+
backgroundColor: string;
|
6615
|
+
width: string;
|
6616
|
+
outline: string;
|
6617
|
+
border: number;
|
6623
6618
|
borderRadius: string;
|
6624
6619
|
transitionProperty: string;
|
6625
6620
|
transitionDuration: string;
|
@@ -6627,10 +6622,6 @@ declare const theme: {
|
|
6627
6622
|
paddingX: number;
|
6628
6623
|
height: string;
|
6629
6624
|
fontSize: string;
|
6630
|
-
backgroundColor: string;
|
6631
|
-
width: string;
|
6632
|
-
outline: string;
|
6633
|
-
border: number;
|
6634
6625
|
} | {
|
6635
6626
|
minHeight: string;
|
6636
6627
|
verticalAlign: string;
|
@@ -6723,6 +6714,9 @@ declare const theme: {
|
|
6723
6714
|
};
|
6724
6715
|
outline: string;
|
6725
6716
|
outlineColor: string;
|
6717
|
+
backgroundColor: string;
|
6718
|
+
width: string;
|
6719
|
+
border: number;
|
6726
6720
|
borderRadius: string;
|
6727
6721
|
transitionProperty: string;
|
6728
6722
|
transitionDuration: string;
|
@@ -6730,9 +6724,6 @@ declare const theme: {
|
|
6730
6724
|
paddingX: number;
|
6731
6725
|
height: string;
|
6732
6726
|
fontSize: string;
|
6733
|
-
backgroundColor: string;
|
6734
|
-
width: string;
|
6735
|
-
border: number;
|
6736
6727
|
}) | undefined;
|
6737
6728
|
sizes?: {
|
6738
6729
|
[key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
|
package/dist/index.js
CHANGED
@@ -2253,6 +2253,7 @@ var init_CardSelect = __esm({
|
|
2253
2253
|
crossOffset = 0,
|
2254
2254
|
placement = "bottom",
|
2255
2255
|
withChevron = true,
|
2256
|
+
fontWeight = "normal",
|
2256
2257
|
...props
|
2257
2258
|
}, externalRef) => {
|
2258
2259
|
const label = "label" in props ? props.label : props["aria-label"];
|
@@ -2280,6 +2281,7 @@ var init_CardSelect = __esm({
|
|
2280
2281
|
{
|
2281
2282
|
type: "button",
|
2282
2283
|
ref: triggerRef,
|
2284
|
+
fontWeight: "bold",
|
2283
2285
|
sx: styles3.trigger,
|
2284
2286
|
"aria-label": label,
|
2285
2287
|
...buttonProps,
|
@@ -10858,7 +10860,7 @@ function baseBackground(state2, props) {
|
|
10858
10860
|
return surface("disabled", props);
|
10859
10861
|
case "hover":
|
10860
10862
|
default:
|
10861
|
-
return
|
10863
|
+
return { backgroundColor: "transparent" };
|
10862
10864
|
}
|
10863
10865
|
}
|
10864
10866
|
function baseBorder(state2, props) {
|
@@ -11585,7 +11587,6 @@ var init_button2 = __esm({
|
|
11585
11587
|
},
|
11586
11588
|
_active: {
|
11587
11589
|
...baseBorder("default", props),
|
11588
|
-
// We want a
|
11589
11590
|
...baseBackground("active", props)
|
11590
11591
|
}
|
11591
11592
|
}),
|
@@ -12410,13 +12411,11 @@ var init_choice_chip = __esm({
|
|
12410
12411
|
variants: {
|
12411
12412
|
base: (props) => ({
|
12412
12413
|
container: {
|
12413
|
-
...baseBackground("default", props),
|
12414
12414
|
...baseBorder("default", props),
|
12415
12415
|
...baseText("default", props),
|
12416
12416
|
_hover: {
|
12417
12417
|
...baseText("default", props),
|
12418
|
-
...baseBorder("hover", props)
|
12419
|
-
...baseBackground("hover", props)
|
12418
|
+
...baseBorder("hover", props)
|
12420
12419
|
},
|
12421
12420
|
_active: {
|
12422
12421
|
...baseBackground("active", props),
|
@@ -12732,6 +12731,7 @@ var init_datepicker2 = __esm({
|
|
12732
12731
|
}),
|
12733
12732
|
floating: (props) => ({
|
12734
12733
|
wrapper: {
|
12734
|
+
...floatingBackground("default", props),
|
12735
12735
|
...floatingBorder("default", props),
|
12736
12736
|
boxShadow: "sm",
|
12737
12737
|
_hover: {
|
@@ -13489,7 +13489,6 @@ var init_input2 = __esm({
|
|
13489
13489
|
width: "100%",
|
13490
13490
|
outline: "none",
|
13491
13491
|
border: 0,
|
13492
|
-
...baseBackground("default", props),
|
13493
13492
|
borderRadius: "sm",
|
13494
13493
|
transitionProperty: "common",
|
13495
13494
|
transitionDuration: "fast",
|
@@ -13497,6 +13496,7 @@ var init_input2 = __esm({
|
|
13497
13496
|
paddingX: 3,
|
13498
13497
|
height: "54px",
|
13499
13498
|
fontSize: "mobile.md",
|
13499
|
+
...baseBackground("default", props),
|
13500
13500
|
...baseBorder("default", props),
|
13501
13501
|
_hover: {
|
13502
13502
|
...baseBorder("hover", props)
|
@@ -14046,8 +14046,8 @@ var init_numeric_stepper = __esm({
|
|
14046
14046
|
textAlign: "center",
|
14047
14047
|
transitionProperty: "common",
|
14048
14048
|
transitionDuration: "fast",
|
14049
|
-
...baseBackground("default", props),
|
14050
14049
|
...baseText("default", props),
|
14050
|
+
...baseBackground("default", props),
|
14051
14051
|
_disabled: {
|
14052
14052
|
pointerEvents: "none",
|
14053
14053
|
opacity: 0.5
|
@@ -14329,9 +14329,7 @@ var init_select = __esm({
|
|
14329
14329
|
...input_default.baseStyle(props).field,
|
14330
14330
|
appearance: "none",
|
14331
14331
|
paddingTop: "16px",
|
14332
|
-
"option, optgroup": {
|
14333
|
-
background: "white"
|
14334
|
-
}
|
14332
|
+
"option, optgroup": {}
|
14335
14333
|
},
|
14336
14334
|
icon: {
|
14337
14335
|
width: "30px",
|
@@ -14517,17 +14515,17 @@ var init_switch = __esm({
|
|
14517
14515
|
height: [$height3.reference],
|
14518
14516
|
transitionProperty: "common",
|
14519
14517
|
transitionDuration: "fast",
|
14520
|
-
...baseBackground("default", props),
|
14521
14518
|
...baseBorder("default", props),
|
14522
14519
|
...focusVisibleStyles(props),
|
14520
|
+
...baseBackground("default", props),
|
14523
14521
|
_hover: {
|
14524
|
-
...baseBackground("hover", props),
|
14525
14522
|
...baseBorder("hover", props)
|
14526
14523
|
},
|
14527
14524
|
_checked: {
|
14528
14525
|
...brandBackground("default", props),
|
14529
14526
|
outlineColor: "transparent",
|
14530
14527
|
_hover: {
|
14528
|
+
...baseBackground("default", props),
|
14531
14529
|
...brandBackground("hover", props)
|
14532
14530
|
}
|
14533
14531
|
},
|
package/dist/index.mjs
CHANGED
@@ -1 +1 @@
|
|
1
|
-
export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-
|
1
|
+
export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-U3P2P6PX.mjs';
|
package/package.json
CHANGED
package/src/input/CardSelect.tsx
CHANGED
@@ -4,6 +4,7 @@ import {
|
|
4
4
|
chakra,
|
5
5
|
Flex,
|
6
6
|
forwardRef,
|
7
|
+
ResponsiveValue,
|
7
8
|
useMultiStyleConfig,
|
8
9
|
} from "@chakra-ui/react";
|
9
10
|
import {
|
@@ -43,7 +44,18 @@ type CardSelectProps = BoxProps & {
|
|
43
44
|
placement?: AriaPositionProps["placement"];
|
44
45
|
/** Whether or not to show the chevron. Defaults to true */
|
45
46
|
withChevron?: boolean;
|
46
|
-
|
47
|
+
/** Defaults to normal */
|
48
|
+
fontWeight?: ResponsiveValue<"normal" | "bold">;
|
49
|
+
} & (
|
50
|
+
| {
|
51
|
+
/** The text label of the trigger button */
|
52
|
+
label: string;
|
53
|
+
}
|
54
|
+
| {
|
55
|
+
/** Accessible label for the trigger button */
|
56
|
+
"aria-label": string;
|
57
|
+
}
|
58
|
+
);
|
47
59
|
|
48
60
|
/**
|
49
61
|
* A card select component.
|
@@ -73,6 +85,7 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
|
|
73
85
|
crossOffset = 0,
|
74
86
|
placement = "bottom",
|
75
87
|
withChevron = true,
|
88
|
+
fontWeight = "normal",
|
76
89
|
...props
|
77
90
|
},
|
78
91
|
externalRef,
|
@@ -109,6 +122,7 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
|
|
109
122
|
<chakra.button
|
110
123
|
type="button"
|
111
124
|
ref={triggerRef}
|
125
|
+
fontWeight="bold"
|
112
126
|
sx={styles.trigger}
|
113
127
|
aria-label={label}
|
114
128
|
{...buttonProps}
|
@@ -64,13 +64,11 @@ const config = helpers.defineMultiStyleConfig({
|
|
64
64
|
variants: {
|
65
65
|
base: (props) => ({
|
66
66
|
container: {
|
67
|
-
...baseBackground("default", props),
|
68
67
|
...baseBorder("default", props),
|
69
68
|
...baseText("default", props),
|
70
69
|
_hover: {
|
71
70
|
...baseText("default", props),
|
72
71
|
...baseBorder("hover", props),
|
73
|
-
...baseBackground("hover", props),
|
74
72
|
},
|
75
73
|
_active: {
|
76
74
|
...baseBackground("active", props),
|
@@ -4,7 +4,7 @@ import { zIndices } from "../foundations";
|
|
4
4
|
import { accentText } from "../utils/accent-utils";
|
5
5
|
import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
|
6
6
|
import { brandBackground, brandText } from "../utils/brand-utils";
|
7
|
-
import { floatingBorder } from "../utils/floating-utils";
|
7
|
+
import { floatingBorder, floatingBackground } from "../utils/floating-utils";
|
8
8
|
import { focusVisibleStyles } from "../utils/focus-utils";
|
9
9
|
import { ghostBackground } from "../utils/ghost-utils";
|
10
10
|
import { surface } from "../utils/surface-utils";
|
@@ -159,6 +159,7 @@ const config = helpers.defineMultiStyleConfig({
|
|
159
159
|
}),
|
160
160
|
floating: (props) => ({
|
161
161
|
wrapper: {
|
162
|
+
...floatingBackground("default", props),
|
162
163
|
...floatingBorder("default", props),
|
163
164
|
boxShadow: "sm",
|
164
165
|
|
@@ -13,7 +13,6 @@ const config = helpers.defineMultiStyleConfig({
|
|
13
13
|
width: "100%",
|
14
14
|
outline: "none",
|
15
15
|
border: 0,
|
16
|
-
...baseBackground("default", props),
|
17
16
|
borderRadius: "sm",
|
18
17
|
transitionProperty: "common",
|
19
18
|
transitionDuration: "fast",
|
@@ -21,6 +20,7 @@ const config = helpers.defineMultiStyleConfig({
|
|
21
20
|
paddingX: 3,
|
22
21
|
height: "54px",
|
23
22
|
fontSize: "mobile.md",
|
23
|
+
...baseBackground("default", props),
|
24
24
|
|
25
25
|
...baseBorder("default", props),
|
26
26
|
_hover: {
|
@@ -28,8 +28,8 @@ const config = helpers.defineMultiStyleConfig({
|
|
28
28
|
textAlign: "center",
|
29
29
|
transitionProperty: "common",
|
30
30
|
transitionDuration: "fast",
|
31
|
-
...baseBackground("default", props),
|
32
31
|
...baseText("default", props),
|
32
|
+
...baseBackground("default", props),
|
33
33
|
|
34
34
|
_disabled: {
|
35
35
|
pointerEvents: "none",
|
@@ -27,12 +27,11 @@ const config = helpers.defineMultiStyleConfig({
|
|
27
27
|
height: [$height.reference],
|
28
28
|
transitionProperty: "common",
|
29
29
|
transitionDuration: "fast",
|
30
|
-
...baseBackground("default", props),
|
31
30
|
...baseBorder("default", props),
|
32
31
|
...focusVisibleStyles(props),
|
32
|
+
...baseBackground("default", props),
|
33
33
|
|
34
34
|
_hover: {
|
35
|
-
...baseBackground("hover", props),
|
36
35
|
...baseBorder("hover", props),
|
37
36
|
},
|
38
37
|
_checked: {
|
@@ -40,6 +39,7 @@ const config = helpers.defineMultiStyleConfig({
|
|
40
39
|
outlineColor: "transparent",
|
41
40
|
|
42
41
|
_hover: {
|
42
|
+
...baseBackground("default", props),
|
43
43
|
...brandBackground("hover", props),
|
44
44
|
},
|
45
45
|
},
|