@westpac/ui 0.39.0 → 0.40.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.
- package/CHANGELOG.md +12 -0
- package/dist/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.js +5 -3
- package/dist/components/popover/components/panel/panel.component.js +1 -0
- package/dist/components/popover/components/panel/panel.styles.js +9 -9
- package/dist/components/radio-group/components/radio-group-radio/radio-group-radio.component.js +5 -3
- package/dist/css/westpac-ui.css +38 -73
- package/dist/css/westpac-ui.min.css +38 -73
- package/package.json +1 -1
- package/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.tsx +5 -5
- package/src/components/popover/components/panel/panel.component.tsx +1 -0
- package/src/components/popover/components/panel/panel.styles.ts +9 -9
- package/src/components/radio-group/components/radio-group-radio/radio-group-radio.component.tsx +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @westpac/ui
|
|
2
2
|
|
|
3
|
+
## 0.40.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 6b3ed1b: popover styling changes for rounded corner, thick arrow, arrow possitioning, and header's font medium
|
|
8
|
+
|
|
9
|
+
## 0.40.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- 04d5a45: fixes #1006
|
|
14
|
+
|
|
3
15
|
## 0.39.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
|
@@ -51,15 +51,17 @@ function BaseCheckbox({ className , hint , label , value , ...props }, ref) {
|
|
|
51
51
|
className
|
|
52
52
|
}),
|
|
53
53
|
ref: ref
|
|
54
|
-
}, React.createElement(VisuallyHidden,
|
|
54
|
+
}, React.createElement(VisuallyHidden, {
|
|
55
|
+
elementType: "span"
|
|
56
|
+
}, React.createElement("input", _extends({}, inputProps, focusProps, {
|
|
55
57
|
ref: localRef
|
|
56
|
-
}))), React.createElement("
|
|
58
|
+
}))), React.createElement("span", {
|
|
57
59
|
className: styles.checkbox()
|
|
58
60
|
}, isSelected && React.createElement(CheckIcon, {
|
|
59
61
|
className: styles.checkIcon(),
|
|
60
62
|
size: size,
|
|
61
63
|
color: isDisabled ? 'border' : 'hero'
|
|
62
|
-
})), React.createElement("
|
|
64
|
+
})), React.createElement("span", {
|
|
63
65
|
className: styles.textWrapper()
|
|
64
66
|
}, React.createElement("span", {
|
|
65
67
|
className: styles.labelText()
|
|
@@ -50,6 +50,7 @@ export function BasePanel({ state , heading , headingTag: Tag = 'h1' , content ,
|
|
|
50
50
|
className: styles.body()
|
|
51
51
|
}, content), React.createElement(Button, {
|
|
52
52
|
look: "link",
|
|
53
|
+
size: "small",
|
|
53
54
|
onClick: state.close,
|
|
54
55
|
className: styles.closeBtn(),
|
|
55
56
|
iconAfter: ()=>React.createElement(CloseIcon, {
|
|
@@ -2,24 +2,24 @@ import { tv } from 'tailwind-variants';
|
|
|
2
2
|
export const styles = tv({
|
|
3
3
|
slots: {
|
|
4
4
|
base: '',
|
|
5
|
-
popover: 'absolute z-[999] rounded border border-muted bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
|
|
5
|
+
popover: 'absolute z-[999] rounded-[3px] border border-muted bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
|
|
6
6
|
arrow: `absolute -z-10 size-0
|
|
7
|
-
before:absolute before:left-
|
|
8
|
-
after:left-
|
|
7
|
+
before:absolute before:left-[1px] before:top-[0.5px] before:size-0 before:border-x-[7px] before:border-t-[12px] before:border-x-[transparent] before:border-t-muted after:absolute
|
|
8
|
+
after:left-[1.5px] after:top-0 after:size-0 after:border-x-[6.5px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white
|
|
9
9
|
`,
|
|
10
|
-
closeBtn: 'absolute right-1
|
|
11
|
-
content: 'w-[17.625rem] bg-white py-4 pl-3 pr-5',
|
|
12
|
-
heading: 'typography-body-9 mb-2 font-
|
|
10
|
+
closeBtn: 'absolute right-1 h-3 top-1 p-0 hover:opacity-80',
|
|
11
|
+
content: 'w-[17.625rem] rounded-[3px] bg-white py-4 pl-3 pr-5',
|
|
12
|
+
heading: 'typography-body-9 mb-2 font-medium text-text',
|
|
13
13
|
body: 'typography-body-10 text-text'
|
|
14
14
|
},
|
|
15
15
|
variants: {
|
|
16
16
|
placement: {
|
|
17
17
|
top: {
|
|
18
|
-
popover: '-mt-2
|
|
19
|
-
arrow: 'top-full translate-x-[-6px] translate-y-
|
|
18
|
+
popover: '-mt-2 mb-2',
|
|
19
|
+
arrow: 'top-full translate-x-[-6px] translate-y-0'
|
|
20
20
|
},
|
|
21
21
|
bottom: {
|
|
22
|
-
popover: 'mt-2
|
|
22
|
+
popover: 'mt-2',
|
|
23
23
|
arrow: 'bottom-full translate-x-[6px] rotate-180 after:bottom-[1px]'
|
|
24
24
|
}
|
|
25
25
|
}
|
package/dist/components/radio-group/components/radio-group-radio/radio-group-radio.component.js
CHANGED
|
@@ -37,11 +37,13 @@ function BaseRadioGroupRadio({ className , hint , label , ...props }, ref) {
|
|
|
37
37
|
className
|
|
38
38
|
}),
|
|
39
39
|
ref: ref
|
|
40
|
-
}, React.createElement(VisuallyHidden,
|
|
40
|
+
}, React.createElement(VisuallyHidden, {
|
|
41
|
+
elementType: "span"
|
|
42
|
+
}, React.createElement("input", _extends({}, inputProps, focusProps, {
|
|
41
43
|
ref: localRef
|
|
42
|
-
}))), React.createElement("
|
|
44
|
+
}))), React.createElement("span", {
|
|
43
45
|
className: styles.selector()
|
|
44
|
-
}), React.createElement("
|
|
46
|
+
}), React.createElement("span", {
|
|
45
47
|
className: styles.textWrapper()
|
|
46
48
|
}, React.createElement("span", {
|
|
47
49
|
className: styles.labelText()
|
package/dist/css/westpac-ui.css
CHANGED
|
@@ -3445,9 +3445,6 @@ body {
|
|
|
3445
3445
|
.m-0 {
|
|
3446
3446
|
margin: 0rem;
|
|
3447
3447
|
}
|
|
3448
|
-
.m-1 {
|
|
3449
|
-
margin: 0.375rem;
|
|
3450
|
-
}
|
|
3451
3448
|
.m-auto {
|
|
3452
3449
|
margin: auto;
|
|
3453
3450
|
}
|
|
@@ -3514,9 +3511,6 @@ body {
|
|
|
3514
3511
|
.-mt-2 {
|
|
3515
3512
|
margin-top: -0.75rem;
|
|
3516
3513
|
}
|
|
3517
|
-
.-mt-2\.5 {
|
|
3518
|
-
margin-top: -0.9375rem;
|
|
3519
|
-
}
|
|
3520
3514
|
.-mt-6 {
|
|
3521
3515
|
margin-top: -2.25rem;
|
|
3522
3516
|
}
|
|
@@ -3529,9 +3523,6 @@ body {
|
|
|
3529
3523
|
.mb-2 {
|
|
3530
3524
|
margin-bottom: 0.75rem;
|
|
3531
3525
|
}
|
|
3532
|
-
.mb-2\.5 {
|
|
3533
|
-
margin-bottom: 0.9375rem;
|
|
3534
|
-
}
|
|
3535
3526
|
.mb-3 {
|
|
3536
3527
|
margin-bottom: 1.125rem;
|
|
3537
3528
|
}
|
|
@@ -3598,9 +3589,6 @@ body {
|
|
|
3598
3589
|
.mt-2 {
|
|
3599
3590
|
margin-top: 0.75rem;
|
|
3600
3591
|
}
|
|
3601
|
-
.mt-2\.5 {
|
|
3602
|
-
margin-top: 0.9375rem;
|
|
3603
|
-
}
|
|
3604
3592
|
.mt-3 {
|
|
3605
3593
|
margin-top: 1.125rem;
|
|
3606
3594
|
}
|
|
@@ -4133,8 +4121,8 @@ body {
|
|
|
4133
4121
|
--tw-translate-x: 6px;
|
|
4134
4122
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
4135
4123
|
}
|
|
4136
|
-
.translate-y
|
|
4137
|
-
--tw-translate-y:
|
|
4124
|
+
.translate-y-0 {
|
|
4125
|
+
--tw-translate-y: 0rem;
|
|
4138
4126
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
4139
4127
|
}
|
|
4140
4128
|
.-rotate-45 {
|
|
@@ -4396,6 +4384,9 @@ body {
|
|
|
4396
4384
|
.rounded-\[2\.875rem\] {
|
|
4397
4385
|
border-radius: 2.875rem;
|
|
4398
4386
|
}
|
|
4387
|
+
.rounded-\[3px\] {
|
|
4388
|
+
border-radius: 3px;
|
|
4389
|
+
}
|
|
4399
4390
|
.rounded-full {
|
|
4400
4391
|
border-radius: 9999px;
|
|
4401
4392
|
}
|
|
@@ -7308,17 +7299,17 @@ body {
|
|
|
7308
7299
|
top: 0rem;
|
|
7309
7300
|
bottom: 0rem;
|
|
7310
7301
|
}
|
|
7311
|
-
.before\:left-0::before {
|
|
7312
|
-
content: var(--tw-content);
|
|
7313
|
-
left: 0rem;
|
|
7314
|
-
}
|
|
7315
7302
|
.before\:left-1::before {
|
|
7316
7303
|
content: var(--tw-content);
|
|
7317
7304
|
left: 0.375rem;
|
|
7318
7305
|
}
|
|
7319
|
-
.before\:
|
|
7306
|
+
.before\:left-\[1px\]::before {
|
|
7320
7307
|
content: var(--tw-content);
|
|
7321
|
-
|
|
7308
|
+
left: 1px;
|
|
7309
|
+
}
|
|
7310
|
+
.before\:top-\[0\.5px\]::before {
|
|
7311
|
+
content: var(--tw-content);
|
|
7312
|
+
top: 0.5px;
|
|
7322
7313
|
}
|
|
7323
7314
|
.before\:z-10::before {
|
|
7324
7315
|
content: var(--tw-content);
|
|
@@ -7442,6 +7433,10 @@ body {
|
|
|
7442
7433
|
content: var(--tw-content);
|
|
7443
7434
|
left: -0.125rem;
|
|
7444
7435
|
}
|
|
7436
|
+
.after\:left-\[1\.5px\]::after {
|
|
7437
|
+
content: var(--tw-content);
|
|
7438
|
+
left: 1.5px;
|
|
7439
|
+
}
|
|
7445
7440
|
.after\:left-full::after {
|
|
7446
7441
|
content: var(--tw-content);
|
|
7447
7442
|
left: 100%;
|
|
@@ -7561,10 +7556,10 @@ body {
|
|
|
7561
7556
|
border-left-width: 0px;
|
|
7562
7557
|
border-right-width: 0px;
|
|
7563
7558
|
}
|
|
7564
|
-
.after\:border-x-\[
|
|
7559
|
+
.after\:border-x-\[6\.5px\]::after {
|
|
7565
7560
|
content: var(--tw-content);
|
|
7566
|
-
border-left-width:
|
|
7567
|
-
border-right-width:
|
|
7561
|
+
border-left-width: 6.5px;
|
|
7562
|
+
border-right-width: 6.5px;
|
|
7568
7563
|
}
|
|
7569
7564
|
.after\:border-y-0::after {
|
|
7570
7565
|
content: var(--tw-content);
|
|
@@ -8393,9 +8388,6 @@ body {
|
|
|
8393
8388
|
.xsl\:-mt-2 {
|
|
8394
8389
|
margin-top: -0.75rem;
|
|
8395
8390
|
}
|
|
8396
|
-
.xsl\:-mt-2\.5 {
|
|
8397
|
-
margin-top: -0.9375rem;
|
|
8398
|
-
}
|
|
8399
8391
|
.xsl\:-mt-6 {
|
|
8400
8392
|
margin-top: -2.25rem;
|
|
8401
8393
|
}
|
|
@@ -8405,9 +8397,6 @@ body {
|
|
|
8405
8397
|
.xsl\:mb-2 {
|
|
8406
8398
|
margin-bottom: 0.75rem;
|
|
8407
8399
|
}
|
|
8408
|
-
.xsl\:mb-2\.5 {
|
|
8409
|
-
margin-bottom: 0.9375rem;
|
|
8410
|
-
}
|
|
8411
8400
|
.xsl\:mb-3 {
|
|
8412
8401
|
margin-bottom: 1.125rem;
|
|
8413
8402
|
}
|
|
@@ -8441,8 +8430,8 @@ body {
|
|
|
8441
8430
|
.xsl\:mr-\[0\.25rem\] {
|
|
8442
8431
|
margin-right: 0.25rem;
|
|
8443
8432
|
}
|
|
8444
|
-
.xsl\:mt-2
|
|
8445
|
-
margin-top: 0.
|
|
8433
|
+
.xsl\:mt-2 {
|
|
8434
|
+
margin-top: 0.75rem;
|
|
8446
8435
|
}
|
|
8447
8436
|
@media (min-width: 576px) {
|
|
8448
8437
|
.xsl\:xsl\:mr-2 {
|
|
@@ -8660,8 +8649,8 @@ body {
|
|
|
8660
8649
|
--tw-translate-x: 6px;
|
|
8661
8650
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
8662
8651
|
}
|
|
8663
|
-
.xsl\:translate-y
|
|
8664
|
-
--tw-translate-y:
|
|
8652
|
+
.xsl\:translate-y-0 {
|
|
8653
|
+
--tw-translate-y: 0rem;
|
|
8665
8654
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
8666
8655
|
}
|
|
8667
8656
|
.xsl\:-rotate-45 {
|
|
@@ -9908,9 +9897,6 @@ body {
|
|
|
9908
9897
|
.sm\:-mt-2 {
|
|
9909
9898
|
margin-top: -0.75rem;
|
|
9910
9899
|
}
|
|
9911
|
-
.sm\:-mt-2\.5 {
|
|
9912
|
-
margin-top: -0.9375rem;
|
|
9913
|
-
}
|
|
9914
9900
|
.sm\:-mt-6 {
|
|
9915
9901
|
margin-top: -2.25rem;
|
|
9916
9902
|
}
|
|
@@ -9923,9 +9909,6 @@ body {
|
|
|
9923
9909
|
.sm\:mb-2 {
|
|
9924
9910
|
margin-bottom: 0.75rem;
|
|
9925
9911
|
}
|
|
9926
|
-
.sm\:mb-2\.5 {
|
|
9927
|
-
margin-bottom: 0.9375rem;
|
|
9928
|
-
}
|
|
9929
9912
|
.sm\:mb-3 {
|
|
9930
9913
|
margin-bottom: 1.125rem;
|
|
9931
9914
|
}
|
|
@@ -9959,8 +9942,8 @@ body {
|
|
|
9959
9942
|
.sm\:mr-\[0\.25rem\] {
|
|
9960
9943
|
margin-right: 0.25rem;
|
|
9961
9944
|
}
|
|
9962
|
-
.sm\:mt-2
|
|
9963
|
-
margin-top: 0.
|
|
9945
|
+
.sm\:mt-2 {
|
|
9946
|
+
margin-top: 0.75rem;
|
|
9964
9947
|
}
|
|
9965
9948
|
.sm\:box-content {
|
|
9966
9949
|
box-sizing: content-box;
|
|
@@ -10198,8 +10181,8 @@ body {
|
|
|
10198
10181
|
--tw-translate-x: 6px;
|
|
10199
10182
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
10200
10183
|
}
|
|
10201
|
-
.sm\:translate-y
|
|
10202
|
-
--tw-translate-y:
|
|
10184
|
+
.sm\:translate-y-0 {
|
|
10185
|
+
--tw-translate-y: 0rem;
|
|
10203
10186
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
10204
10187
|
}
|
|
10205
10188
|
.sm\:-rotate-45 {
|
|
@@ -11548,9 +11531,6 @@ body {
|
|
|
11548
11531
|
.md\:-mt-2 {
|
|
11549
11532
|
margin-top: -0.75rem;
|
|
11550
11533
|
}
|
|
11551
|
-
.md\:-mt-2\.5 {
|
|
11552
|
-
margin-top: -0.9375rem;
|
|
11553
|
-
}
|
|
11554
11534
|
.md\:-mt-3 {
|
|
11555
11535
|
margin-top: -1.125rem;
|
|
11556
11536
|
}
|
|
@@ -11563,9 +11543,6 @@ body {
|
|
|
11563
11543
|
.md\:mb-2 {
|
|
11564
11544
|
margin-bottom: 0.75rem;
|
|
11565
11545
|
}
|
|
11566
|
-
.md\:mb-2\.5 {
|
|
11567
|
-
margin-bottom: 0.9375rem;
|
|
11568
|
-
}
|
|
11569
11546
|
.md\:mb-3 {
|
|
11570
11547
|
margin-bottom: 1.125rem;
|
|
11571
11548
|
}
|
|
@@ -11613,8 +11590,8 @@ body {
|
|
|
11613
11590
|
.md\:mt-1 {
|
|
11614
11591
|
margin-top: 0.375rem;
|
|
11615
11592
|
}
|
|
11616
|
-
.md\:mt-2
|
|
11617
|
-
margin-top: 0.
|
|
11593
|
+
.md\:mt-2 {
|
|
11594
|
+
margin-top: 0.75rem;
|
|
11618
11595
|
}
|
|
11619
11596
|
.md\:box-content {
|
|
11620
11597
|
box-sizing: content-box;
|
|
@@ -11830,8 +11807,8 @@ body {
|
|
|
11830
11807
|
--tw-translate-x: 6px;
|
|
11831
11808
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
11832
11809
|
}
|
|
11833
|
-
.md\:translate-y
|
|
11834
|
-
--tw-translate-y:
|
|
11810
|
+
.md\:translate-y-0 {
|
|
11811
|
+
--tw-translate-y: 0rem;
|
|
11835
11812
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
11836
11813
|
}
|
|
11837
11814
|
.md\:-rotate-45 {
|
|
@@ -13185,9 +13162,6 @@ body {
|
|
|
13185
13162
|
.lg\:-mt-2 {
|
|
13186
13163
|
margin-top: -0.75rem;
|
|
13187
13164
|
}
|
|
13188
|
-
.lg\:-mt-2\.5 {
|
|
13189
|
-
margin-top: -0.9375rem;
|
|
13190
|
-
}
|
|
13191
13165
|
.lg\:-mt-6 {
|
|
13192
13166
|
margin-top: -2.25rem;
|
|
13193
13167
|
}
|
|
@@ -13202,9 +13176,6 @@ body {
|
|
|
13202
13176
|
.lg\:mb-2 {
|
|
13203
13177
|
margin-bottom: 0.75rem;
|
|
13204
13178
|
}
|
|
13205
|
-
.lg\:mb-2\.5 {
|
|
13206
|
-
margin-bottom: 0.9375rem;
|
|
13207
|
-
}
|
|
13208
13179
|
.lg\:mb-3 {
|
|
13209
13180
|
margin-bottom: 1.125rem;
|
|
13210
13181
|
}
|
|
@@ -13241,8 +13212,8 @@ body {
|
|
|
13241
13212
|
.lg\:mr-\[300px\] {
|
|
13242
13213
|
margin-right: 300px;
|
|
13243
13214
|
}
|
|
13244
|
-
.lg\:mt-2
|
|
13245
|
-
margin-top: 0.
|
|
13215
|
+
.lg\:mt-2 {
|
|
13216
|
+
margin-top: 0.75rem;
|
|
13246
13217
|
}
|
|
13247
13218
|
.lg\:box-content {
|
|
13248
13219
|
box-sizing: content-box;
|
|
@@ -13455,8 +13426,8 @@ body {
|
|
|
13455
13426
|
--tw-translate-x: 6px;
|
|
13456
13427
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
13457
13428
|
}
|
|
13458
|
-
.lg\:translate-y
|
|
13459
|
-
--tw-translate-y:
|
|
13429
|
+
.lg\:translate-y-0 {
|
|
13430
|
+
--tw-translate-y: 0rem;
|
|
13460
13431
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
13461
13432
|
}
|
|
13462
13433
|
.lg\:-rotate-45 {
|
|
@@ -14750,9 +14721,6 @@ body {
|
|
|
14750
14721
|
.xl\:-mt-2 {
|
|
14751
14722
|
margin-top: -0.75rem;
|
|
14752
14723
|
}
|
|
14753
|
-
.xl\:-mt-2\.5 {
|
|
14754
|
-
margin-top: -0.9375rem;
|
|
14755
|
-
}
|
|
14756
14724
|
.xl\:-mt-6 {
|
|
14757
14725
|
margin-top: -2.25rem;
|
|
14758
14726
|
}
|
|
@@ -14762,9 +14730,6 @@ body {
|
|
|
14762
14730
|
.xl\:mb-2 {
|
|
14763
14731
|
margin-bottom: 0.75rem;
|
|
14764
14732
|
}
|
|
14765
|
-
.xl\:mb-2\.5 {
|
|
14766
|
-
margin-bottom: 0.9375rem;
|
|
14767
|
-
}
|
|
14768
14733
|
.xl\:mb-3 {
|
|
14769
14734
|
margin-bottom: 1.125rem;
|
|
14770
14735
|
}
|
|
@@ -14798,8 +14763,8 @@ body {
|
|
|
14798
14763
|
.xl\:mr-\[0\.25rem\] {
|
|
14799
14764
|
margin-right: 0.25rem;
|
|
14800
14765
|
}
|
|
14801
|
-
.xl\:mt-2
|
|
14802
|
-
margin-top: 0.
|
|
14766
|
+
.xl\:mt-2 {
|
|
14767
|
+
margin-top: 0.75rem;
|
|
14803
14768
|
}
|
|
14804
14769
|
.xl\:box-content {
|
|
14805
14770
|
box-sizing: content-box;
|
|
@@ -15004,8 +14969,8 @@ body {
|
|
|
15004
14969
|
--tw-translate-x: 6px;
|
|
15005
14970
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
15006
14971
|
}
|
|
15007
|
-
.xl\:translate-y
|
|
15008
|
-
--tw-translate-y:
|
|
14972
|
+
.xl\:translate-y-0 {
|
|
14973
|
+
--tw-translate-y: 0rem;
|
|
15009
14974
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
15010
14975
|
}
|
|
15011
14976
|
.xl\:-rotate-45 {
|
|
@@ -3445,9 +3445,6 @@ body {
|
|
|
3445
3445
|
.m-0 {
|
|
3446
3446
|
margin: 0rem;
|
|
3447
3447
|
}
|
|
3448
|
-
.m-1 {
|
|
3449
|
-
margin: 0.375rem;
|
|
3450
|
-
}
|
|
3451
3448
|
.m-auto {
|
|
3452
3449
|
margin: auto;
|
|
3453
3450
|
}
|
|
@@ -3514,9 +3511,6 @@ body {
|
|
|
3514
3511
|
.-mt-2 {
|
|
3515
3512
|
margin-top: -0.75rem;
|
|
3516
3513
|
}
|
|
3517
|
-
.-mt-2\.5 {
|
|
3518
|
-
margin-top: -0.9375rem;
|
|
3519
|
-
}
|
|
3520
3514
|
.-mt-6 {
|
|
3521
3515
|
margin-top: -2.25rem;
|
|
3522
3516
|
}
|
|
@@ -3529,9 +3523,6 @@ body {
|
|
|
3529
3523
|
.mb-2 {
|
|
3530
3524
|
margin-bottom: 0.75rem;
|
|
3531
3525
|
}
|
|
3532
|
-
.mb-2\.5 {
|
|
3533
|
-
margin-bottom: 0.9375rem;
|
|
3534
|
-
}
|
|
3535
3526
|
.mb-3 {
|
|
3536
3527
|
margin-bottom: 1.125rem;
|
|
3537
3528
|
}
|
|
@@ -3598,9 +3589,6 @@ body {
|
|
|
3598
3589
|
.mt-2 {
|
|
3599
3590
|
margin-top: 0.75rem;
|
|
3600
3591
|
}
|
|
3601
|
-
.mt-2\.5 {
|
|
3602
|
-
margin-top: 0.9375rem;
|
|
3603
|
-
}
|
|
3604
3592
|
.mt-3 {
|
|
3605
3593
|
margin-top: 1.125rem;
|
|
3606
3594
|
}
|
|
@@ -4133,8 +4121,8 @@ body {
|
|
|
4133
4121
|
--tw-translate-x: 6px;
|
|
4134
4122
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
4135
4123
|
}
|
|
4136
|
-
.translate-y
|
|
4137
|
-
--tw-translate-y:
|
|
4124
|
+
.translate-y-0 {
|
|
4125
|
+
--tw-translate-y: 0rem;
|
|
4138
4126
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
4139
4127
|
}
|
|
4140
4128
|
.-rotate-45 {
|
|
@@ -4396,6 +4384,9 @@ body {
|
|
|
4396
4384
|
.rounded-\[2\.875rem\] {
|
|
4397
4385
|
border-radius: 2.875rem;
|
|
4398
4386
|
}
|
|
4387
|
+
.rounded-\[3px\] {
|
|
4388
|
+
border-radius: 3px;
|
|
4389
|
+
}
|
|
4399
4390
|
.rounded-full {
|
|
4400
4391
|
border-radius: 9999px;
|
|
4401
4392
|
}
|
|
@@ -7308,17 +7299,17 @@ body {
|
|
|
7308
7299
|
top: 0rem;
|
|
7309
7300
|
bottom: 0rem;
|
|
7310
7301
|
}
|
|
7311
|
-
.before\:left-0::before {
|
|
7312
|
-
content: var(--tw-content);
|
|
7313
|
-
left: 0rem;
|
|
7314
|
-
}
|
|
7315
7302
|
.before\:left-1::before {
|
|
7316
7303
|
content: var(--tw-content);
|
|
7317
7304
|
left: 0.375rem;
|
|
7318
7305
|
}
|
|
7319
|
-
.before\:
|
|
7306
|
+
.before\:left-\[1px\]::before {
|
|
7320
7307
|
content: var(--tw-content);
|
|
7321
|
-
|
|
7308
|
+
left: 1px;
|
|
7309
|
+
}
|
|
7310
|
+
.before\:top-\[0\.5px\]::before {
|
|
7311
|
+
content: var(--tw-content);
|
|
7312
|
+
top: 0.5px;
|
|
7322
7313
|
}
|
|
7323
7314
|
.before\:z-10::before {
|
|
7324
7315
|
content: var(--tw-content);
|
|
@@ -7442,6 +7433,10 @@ body {
|
|
|
7442
7433
|
content: var(--tw-content);
|
|
7443
7434
|
left: -0.125rem;
|
|
7444
7435
|
}
|
|
7436
|
+
.after\:left-\[1\.5px\]::after {
|
|
7437
|
+
content: var(--tw-content);
|
|
7438
|
+
left: 1.5px;
|
|
7439
|
+
}
|
|
7445
7440
|
.after\:left-full::after {
|
|
7446
7441
|
content: var(--tw-content);
|
|
7447
7442
|
left: 100%;
|
|
@@ -7561,10 +7556,10 @@ body {
|
|
|
7561
7556
|
border-left-width: 0px;
|
|
7562
7557
|
border-right-width: 0px;
|
|
7563
7558
|
}
|
|
7564
|
-
.after\:border-x-\[
|
|
7559
|
+
.after\:border-x-\[6\.5px\]::after {
|
|
7565
7560
|
content: var(--tw-content);
|
|
7566
|
-
border-left-width:
|
|
7567
|
-
border-right-width:
|
|
7561
|
+
border-left-width: 6.5px;
|
|
7562
|
+
border-right-width: 6.5px;
|
|
7568
7563
|
}
|
|
7569
7564
|
.after\:border-y-0::after {
|
|
7570
7565
|
content: var(--tw-content);
|
|
@@ -8393,9 +8388,6 @@ body {
|
|
|
8393
8388
|
.xsl\:-mt-2 {
|
|
8394
8389
|
margin-top: -0.75rem;
|
|
8395
8390
|
}
|
|
8396
|
-
.xsl\:-mt-2\.5 {
|
|
8397
|
-
margin-top: -0.9375rem;
|
|
8398
|
-
}
|
|
8399
8391
|
.xsl\:-mt-6 {
|
|
8400
8392
|
margin-top: -2.25rem;
|
|
8401
8393
|
}
|
|
@@ -8405,9 +8397,6 @@ body {
|
|
|
8405
8397
|
.xsl\:mb-2 {
|
|
8406
8398
|
margin-bottom: 0.75rem;
|
|
8407
8399
|
}
|
|
8408
|
-
.xsl\:mb-2\.5 {
|
|
8409
|
-
margin-bottom: 0.9375rem;
|
|
8410
|
-
}
|
|
8411
8400
|
.xsl\:mb-3 {
|
|
8412
8401
|
margin-bottom: 1.125rem;
|
|
8413
8402
|
}
|
|
@@ -8441,8 +8430,8 @@ body {
|
|
|
8441
8430
|
.xsl\:mr-\[0\.25rem\] {
|
|
8442
8431
|
margin-right: 0.25rem;
|
|
8443
8432
|
}
|
|
8444
|
-
.xsl\:mt-2
|
|
8445
|
-
margin-top: 0.
|
|
8433
|
+
.xsl\:mt-2 {
|
|
8434
|
+
margin-top: 0.75rem;
|
|
8446
8435
|
}
|
|
8447
8436
|
@media (min-width: 576px) {
|
|
8448
8437
|
.xsl\:xsl\:mr-2 {
|
|
@@ -8660,8 +8649,8 @@ body {
|
|
|
8660
8649
|
--tw-translate-x: 6px;
|
|
8661
8650
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
8662
8651
|
}
|
|
8663
|
-
.xsl\:translate-y
|
|
8664
|
-
--tw-translate-y:
|
|
8652
|
+
.xsl\:translate-y-0 {
|
|
8653
|
+
--tw-translate-y: 0rem;
|
|
8665
8654
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
8666
8655
|
}
|
|
8667
8656
|
.xsl\:-rotate-45 {
|
|
@@ -9908,9 +9897,6 @@ body {
|
|
|
9908
9897
|
.sm\:-mt-2 {
|
|
9909
9898
|
margin-top: -0.75rem;
|
|
9910
9899
|
}
|
|
9911
|
-
.sm\:-mt-2\.5 {
|
|
9912
|
-
margin-top: -0.9375rem;
|
|
9913
|
-
}
|
|
9914
9900
|
.sm\:-mt-6 {
|
|
9915
9901
|
margin-top: -2.25rem;
|
|
9916
9902
|
}
|
|
@@ -9923,9 +9909,6 @@ body {
|
|
|
9923
9909
|
.sm\:mb-2 {
|
|
9924
9910
|
margin-bottom: 0.75rem;
|
|
9925
9911
|
}
|
|
9926
|
-
.sm\:mb-2\.5 {
|
|
9927
|
-
margin-bottom: 0.9375rem;
|
|
9928
|
-
}
|
|
9929
9912
|
.sm\:mb-3 {
|
|
9930
9913
|
margin-bottom: 1.125rem;
|
|
9931
9914
|
}
|
|
@@ -9959,8 +9942,8 @@ body {
|
|
|
9959
9942
|
.sm\:mr-\[0\.25rem\] {
|
|
9960
9943
|
margin-right: 0.25rem;
|
|
9961
9944
|
}
|
|
9962
|
-
.sm\:mt-2
|
|
9963
|
-
margin-top: 0.
|
|
9945
|
+
.sm\:mt-2 {
|
|
9946
|
+
margin-top: 0.75rem;
|
|
9964
9947
|
}
|
|
9965
9948
|
.sm\:box-content {
|
|
9966
9949
|
box-sizing: content-box;
|
|
@@ -10198,8 +10181,8 @@ body {
|
|
|
10198
10181
|
--tw-translate-x: 6px;
|
|
10199
10182
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
10200
10183
|
}
|
|
10201
|
-
.sm\:translate-y
|
|
10202
|
-
--tw-translate-y:
|
|
10184
|
+
.sm\:translate-y-0 {
|
|
10185
|
+
--tw-translate-y: 0rem;
|
|
10203
10186
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
10204
10187
|
}
|
|
10205
10188
|
.sm\:-rotate-45 {
|
|
@@ -11548,9 +11531,6 @@ body {
|
|
|
11548
11531
|
.md\:-mt-2 {
|
|
11549
11532
|
margin-top: -0.75rem;
|
|
11550
11533
|
}
|
|
11551
|
-
.md\:-mt-2\.5 {
|
|
11552
|
-
margin-top: -0.9375rem;
|
|
11553
|
-
}
|
|
11554
11534
|
.md\:-mt-3 {
|
|
11555
11535
|
margin-top: -1.125rem;
|
|
11556
11536
|
}
|
|
@@ -11563,9 +11543,6 @@ body {
|
|
|
11563
11543
|
.md\:mb-2 {
|
|
11564
11544
|
margin-bottom: 0.75rem;
|
|
11565
11545
|
}
|
|
11566
|
-
.md\:mb-2\.5 {
|
|
11567
|
-
margin-bottom: 0.9375rem;
|
|
11568
|
-
}
|
|
11569
11546
|
.md\:mb-3 {
|
|
11570
11547
|
margin-bottom: 1.125rem;
|
|
11571
11548
|
}
|
|
@@ -11613,8 +11590,8 @@ body {
|
|
|
11613
11590
|
.md\:mt-1 {
|
|
11614
11591
|
margin-top: 0.375rem;
|
|
11615
11592
|
}
|
|
11616
|
-
.md\:mt-2
|
|
11617
|
-
margin-top: 0.
|
|
11593
|
+
.md\:mt-2 {
|
|
11594
|
+
margin-top: 0.75rem;
|
|
11618
11595
|
}
|
|
11619
11596
|
.md\:box-content {
|
|
11620
11597
|
box-sizing: content-box;
|
|
@@ -11830,8 +11807,8 @@ body {
|
|
|
11830
11807
|
--tw-translate-x: 6px;
|
|
11831
11808
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
11832
11809
|
}
|
|
11833
|
-
.md\:translate-y
|
|
11834
|
-
--tw-translate-y:
|
|
11810
|
+
.md\:translate-y-0 {
|
|
11811
|
+
--tw-translate-y: 0rem;
|
|
11835
11812
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
11836
11813
|
}
|
|
11837
11814
|
.md\:-rotate-45 {
|
|
@@ -13185,9 +13162,6 @@ body {
|
|
|
13185
13162
|
.lg\:-mt-2 {
|
|
13186
13163
|
margin-top: -0.75rem;
|
|
13187
13164
|
}
|
|
13188
|
-
.lg\:-mt-2\.5 {
|
|
13189
|
-
margin-top: -0.9375rem;
|
|
13190
|
-
}
|
|
13191
13165
|
.lg\:-mt-6 {
|
|
13192
13166
|
margin-top: -2.25rem;
|
|
13193
13167
|
}
|
|
@@ -13202,9 +13176,6 @@ body {
|
|
|
13202
13176
|
.lg\:mb-2 {
|
|
13203
13177
|
margin-bottom: 0.75rem;
|
|
13204
13178
|
}
|
|
13205
|
-
.lg\:mb-2\.5 {
|
|
13206
|
-
margin-bottom: 0.9375rem;
|
|
13207
|
-
}
|
|
13208
13179
|
.lg\:mb-3 {
|
|
13209
13180
|
margin-bottom: 1.125rem;
|
|
13210
13181
|
}
|
|
@@ -13241,8 +13212,8 @@ body {
|
|
|
13241
13212
|
.lg\:mr-\[300px\] {
|
|
13242
13213
|
margin-right: 300px;
|
|
13243
13214
|
}
|
|
13244
|
-
.lg\:mt-2
|
|
13245
|
-
margin-top: 0.
|
|
13215
|
+
.lg\:mt-2 {
|
|
13216
|
+
margin-top: 0.75rem;
|
|
13246
13217
|
}
|
|
13247
13218
|
.lg\:box-content {
|
|
13248
13219
|
box-sizing: content-box;
|
|
@@ -13455,8 +13426,8 @@ body {
|
|
|
13455
13426
|
--tw-translate-x: 6px;
|
|
13456
13427
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
13457
13428
|
}
|
|
13458
|
-
.lg\:translate-y
|
|
13459
|
-
--tw-translate-y:
|
|
13429
|
+
.lg\:translate-y-0 {
|
|
13430
|
+
--tw-translate-y: 0rem;
|
|
13460
13431
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
13461
13432
|
}
|
|
13462
13433
|
.lg\:-rotate-45 {
|
|
@@ -14750,9 +14721,6 @@ body {
|
|
|
14750
14721
|
.xl\:-mt-2 {
|
|
14751
14722
|
margin-top: -0.75rem;
|
|
14752
14723
|
}
|
|
14753
|
-
.xl\:-mt-2\.5 {
|
|
14754
|
-
margin-top: -0.9375rem;
|
|
14755
|
-
}
|
|
14756
14724
|
.xl\:-mt-6 {
|
|
14757
14725
|
margin-top: -2.25rem;
|
|
14758
14726
|
}
|
|
@@ -14762,9 +14730,6 @@ body {
|
|
|
14762
14730
|
.xl\:mb-2 {
|
|
14763
14731
|
margin-bottom: 0.75rem;
|
|
14764
14732
|
}
|
|
14765
|
-
.xl\:mb-2\.5 {
|
|
14766
|
-
margin-bottom: 0.9375rem;
|
|
14767
|
-
}
|
|
14768
14733
|
.xl\:mb-3 {
|
|
14769
14734
|
margin-bottom: 1.125rem;
|
|
14770
14735
|
}
|
|
@@ -14798,8 +14763,8 @@ body {
|
|
|
14798
14763
|
.xl\:mr-\[0\.25rem\] {
|
|
14799
14764
|
margin-right: 0.25rem;
|
|
14800
14765
|
}
|
|
14801
|
-
.xl\:mt-2
|
|
14802
|
-
margin-top: 0.
|
|
14766
|
+
.xl\:mt-2 {
|
|
14767
|
+
margin-top: 0.75rem;
|
|
14803
14768
|
}
|
|
14804
14769
|
.xl\:box-content {
|
|
14805
14770
|
box-sizing: content-box;
|
|
@@ -15004,8 +14969,8 @@ body {
|
|
|
15004
14969
|
--tw-translate-x: 6px;
|
|
15005
14970
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
15006
14971
|
}
|
|
15007
|
-
.xl\:translate-y
|
|
15008
|
-
--tw-translate-y:
|
|
14972
|
+
.xl\:translate-y-0 {
|
|
14973
|
+
--tw-translate-y: 0rem;
|
|
15009
14974
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
15010
14975
|
}
|
|
15011
14976
|
.xl\:-rotate-45 {
|
package/package.json
CHANGED
|
@@ -47,16 +47,16 @@ function BaseCheckbox(
|
|
|
47
47
|
|
|
48
48
|
return (
|
|
49
49
|
<label className={styles.base({ className })} ref={ref}>
|
|
50
|
-
<VisuallyHidden>
|
|
50
|
+
<VisuallyHidden elementType="span">
|
|
51
51
|
<input {...inputProps} {...focusProps} ref={localRef} />
|
|
52
52
|
</VisuallyHidden>
|
|
53
|
-
<
|
|
53
|
+
<span className={styles.checkbox()}>
|
|
54
54
|
{isSelected && <CheckIcon className={styles.checkIcon()} size={size} color={isDisabled ? 'border' : 'hero'} />}
|
|
55
|
-
</
|
|
56
|
-
<
|
|
55
|
+
</span>
|
|
56
|
+
<span className={styles.textWrapper()}>
|
|
57
57
|
<span className={styles.labelText()}>{label}</span>
|
|
58
58
|
{hint && <span className={styles.hintText()}>{hint}</span>}
|
|
59
|
-
</
|
|
59
|
+
</span>
|
|
60
60
|
</label>
|
|
61
61
|
);
|
|
62
62
|
}
|
|
@@ -4,24 +4,24 @@ export const styles = tv(
|
|
|
4
4
|
{
|
|
5
5
|
slots: {
|
|
6
6
|
base: '',
|
|
7
|
-
popover: 'absolute z-[999] rounded border border-muted bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
|
|
7
|
+
popover: 'absolute z-[999] rounded-[3px] border border-muted bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
|
|
8
8
|
arrow: `absolute -z-10 size-0
|
|
9
|
-
before:absolute before:left-
|
|
10
|
-
after:left-
|
|
9
|
+
before:absolute before:left-[1px] before:top-[0.5px] before:size-0 before:border-x-[7px] before:border-t-[12px] before:border-x-[transparent] before:border-t-muted after:absolute
|
|
10
|
+
after:left-[1.5px] after:top-0 after:size-0 after:border-x-[6.5px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white
|
|
11
11
|
`,
|
|
12
|
-
closeBtn: 'absolute right-1
|
|
13
|
-
content: 'w-[17.625rem] bg-white py-4 pl-3 pr-5',
|
|
14
|
-
heading: 'typography-body-9 mb-2 font-
|
|
12
|
+
closeBtn: 'absolute right-1 h-3 top-1 p-0 hover:opacity-80',
|
|
13
|
+
content: 'w-[17.625rem] rounded-[3px] bg-white py-4 pl-3 pr-5',
|
|
14
|
+
heading: 'typography-body-9 mb-2 font-medium text-text',
|
|
15
15
|
body: 'typography-body-10 text-text',
|
|
16
16
|
},
|
|
17
17
|
variants: {
|
|
18
18
|
placement: {
|
|
19
19
|
top: {
|
|
20
|
-
popover: '-mt-2
|
|
21
|
-
arrow: 'top-full translate-x-[-6px] translate-y-
|
|
20
|
+
popover: '-mt-2 mb-2',
|
|
21
|
+
arrow: 'top-full translate-x-[-6px] translate-y-0',
|
|
22
22
|
},
|
|
23
23
|
bottom: {
|
|
24
|
-
popover: 'mt-2
|
|
24
|
+
popover: 'mt-2',
|
|
25
25
|
arrow: 'bottom-full translate-x-[6px] rotate-180 after:bottom-[1px]',
|
|
26
26
|
},
|
|
27
27
|
},
|
package/src/components/radio-group/components/radio-group-radio/radio-group-radio.component.tsx
CHANGED
|
@@ -17,14 +17,14 @@ function BaseRadioGroupRadio({ className, hint, label, ...props }: RadioGroupRad
|
|
|
17
17
|
|
|
18
18
|
return (
|
|
19
19
|
<label className={styles.base({ className })} ref={ref}>
|
|
20
|
-
<VisuallyHidden>
|
|
20
|
+
<VisuallyHidden elementType="span">
|
|
21
21
|
<input {...inputProps} {...focusProps} ref={localRef} />
|
|
22
22
|
</VisuallyHidden>
|
|
23
|
-
<
|
|
24
|
-
<
|
|
23
|
+
<span className={styles.selector()} />
|
|
24
|
+
<span className={styles.textWrapper()}>
|
|
25
25
|
<span className={styles.labelText()}>{label}</span>
|
|
26
26
|
{hint && <span className={styles.hintText()}>{hint}</span>}
|
|
27
|
-
</
|
|
27
|
+
</span>
|
|
28
28
|
</label>
|
|
29
29
|
);
|
|
30
30
|
}
|