@vygruppen/spor-react 10.3.0 → 10.4.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/.turbo/turbo-build.log +9 -9
- package/CHANGELOG.md +19 -0
- package/dist/{CountryCodeSelect-KCPHU7A7.mjs → CountryCodeSelect-QNKQE3C6.mjs} +2 -1
- package/dist/{chunk-5HRYDWQ5.mjs → chunk-PH4RK5L3.mjs} +185 -97
- package/dist/index.d.mts +579 -111
- package/dist/index.d.ts +579 -111
- package/dist/index.js +200 -106
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/src/input/Combobox.tsx +4 -0
- package/src/input/CountryCodeSelect.tsx +2 -0
- package/src/input/InfoSelect.tsx +5 -3
- package/src/input/ListBox.tsx +4 -1
- package/src/input/PhoneNumberInput.tsx +5 -0
- package/src/input/Switch.tsx +4 -2
- package/src/input/Textarea.tsx +1 -2
- package/src/theme/components/card-select.ts +1 -1
- package/src/theme/components/info-select.ts +1 -0
- package/src/theme/components/input.ts +4 -83
- package/src/theme/components/listbox.ts +16 -2
- package/src/theme/components/select.ts +18 -3
- package/src/theme/components/textarea.ts +13 -2
- package/src/theme/components/travel-tag.ts +1 -4
- package/src/theme/utils/focus-utils.ts +2 -2
- package/src/theme/utils/input-utils.ts +119 -0
- package/src/theme/utils/types.ts +2 -0
package/.turbo/turbo-build.log
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
|
2
|
-
> @vygruppen/spor-react@10.
|
2
|
+
> @vygruppen/spor-react@10.4.1 build
|
3
3
|
> tsup src/index.tsx --dts --treeshake --format cjs,esm
|
4
4
|
|
5
5
|
[34mCLI[39m Building entry: src/index.tsx
|
@@ -10,11 +10,11 @@
|
|
10
10
|
[34mESM[39m Build start
|
11
11
|
[34mDTS[39m Build start
|
12
12
|
[32mESM[39m [1mdist/index.mjs [22m[32m2.15 KB[39m
|
13
|
-
[32mESM[39m [1mdist/CountryCodeSelect-
|
14
|
-
[32mESM[39m [1mdist/chunk-
|
15
|
-
[32mESM[39m ⚡️ Build success in
|
16
|
-
[32mCJS[39m [1mdist/index.js [22m[
|
17
|
-
[32mCJS[39m ⚡️ Build success in
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
19
|
-
[32mDTS[39m [1mdist/index.d.ts [22m[
|
20
|
-
[32mDTS[39m [1mdist/index.d.mts [22m[
|
13
|
+
[32mESM[39m [1mdist/CountryCodeSelect-QNKQE3C6.mjs [22m[32m1.22 KB[39m
|
14
|
+
[32mESM[39m [1mdist/chunk-PH4RK5L3.mjs [22m[32m419.16 KB[39m
|
15
|
+
[32mESM[39m ⚡️ Build success in 2411ms
|
16
|
+
[32mCJS[39m [1mdist/index.js [22m[32m531.22 KB[39m
|
17
|
+
[32mCJS[39m ⚡️ Build success in 2412ms
|
18
|
+
[32mDTS[39m ⚡️ Build success in 16011ms
|
19
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m335.24 KB[39m
|
20
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m335.24 KB[39m
|
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,24 @@
|
|
1
1
|
# @vygruppen/spor-react
|
2
2
|
|
3
|
+
## 10.4.1
|
4
|
+
|
5
|
+
### Patch Changes
|
6
|
+
|
7
|
+
- aeefe3f: Changed styling of LineTag deviation icons to be more similar to the design
|
8
|
+
- 72b88be: adjusted z-index of the TravelTag deviation icon, so that it does not end atop banners and dropdowns e.t.c
|
9
|
+
|
10
|
+
## 10.4.0
|
11
|
+
|
12
|
+
### Minor Changes
|
13
|
+
|
14
|
+
- 5c24b42: Add variants to all form components
|
15
|
+
|
16
|
+
Components: Input, Textarea, PasswordInput, PhoneNumberInput, Textarea, NativeSelect, InfoSelect, Combobox
|
17
|
+
|
18
|
+
### Patch Changes
|
19
|
+
|
20
|
+
- 80669c3: Switch: Update accessibility
|
21
|
+
|
3
22
|
## 10.3.0
|
4
23
|
|
5
24
|
### Minor Changes
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { createTexts, useTranslation, InfoSelect, Item } from './chunk-
|
1
|
+
import { createTexts, useTranslation, InfoSelect, Item } from './chunk-PH4RK5L3.mjs';
|
2
2
|
import React from 'react';
|
3
3
|
import { getSupportedCallingCodes } from 'awesome-phonenumber';
|
4
4
|
|
@@ -22,6 +22,7 @@ var CountryCodeSelect = (props) => {
|
|
22
22
|
label: t(texts.countryCode),
|
23
23
|
isLabelSrOnly: true,
|
24
24
|
items: callingCodes,
|
25
|
+
variant: props.variant,
|
25
26
|
...props
|
26
27
|
},
|
27
28
|
(item) => /* @__PURE__ */ React.createElement(Item, { key: item.key }, item.key)
|
@@ -1052,6 +1052,7 @@ function Combobox({
|
|
1052
1052
|
emptyContent,
|
1053
1053
|
inputRef: externalInputRef,
|
1054
1054
|
allowsEmptyCollection,
|
1055
|
+
variant,
|
1055
1056
|
...rest
|
1056
1057
|
}) {
|
1057
1058
|
const { contains: contains2 } = useFilter({ sensitivity: "base" });
|
@@ -1105,6 +1106,7 @@ function Combobox({
|
|
1105
1106
|
ref: inputRef,
|
1106
1107
|
role: "combobox",
|
1107
1108
|
label,
|
1109
|
+
variant,
|
1108
1110
|
"aria-expanded": state2.isOpen,
|
1109
1111
|
"aria-autocomplete": "list",
|
1110
1112
|
"aria-controls": listboxId,
|
@@ -1146,7 +1148,8 @@ function Combobox({
|
|
1146
1148
|
id: listboxId,
|
1147
1149
|
listBoxRef,
|
1148
1150
|
emptyContent,
|
1149
|
-
maxWidth: inputWidth
|
1151
|
+
maxWidth: inputWidth,
|
1152
|
+
variant
|
1150
1153
|
},
|
1151
1154
|
rest.children
|
1152
1155
|
)
|
@@ -1249,10 +1252,11 @@ function ListBox({
|
|
1249
1252
|
listBoxRef,
|
1250
1253
|
state: state2,
|
1251
1254
|
maxWidth,
|
1255
|
+
variant,
|
1252
1256
|
...props
|
1253
1257
|
}) {
|
1254
1258
|
const { listBoxProps } = useListBox(props, state2, listBoxRef);
|
1255
|
-
const styles3 = useMultiStyleConfig("ListBox", {});
|
1259
|
+
const styles3 = useMultiStyleConfig("ListBox", { variant });
|
1256
1260
|
return /* @__PURE__ */ React84__default.createElement(
|
1257
1261
|
List,
|
1258
1262
|
{
|
@@ -1260,7 +1264,8 @@ function ListBox({
|
|
1260
1264
|
ref: listBoxRef,
|
1261
1265
|
sx: styles3.container,
|
1262
1266
|
"aria-busy": isLoading,
|
1263
|
-
maxWidth
|
1267
|
+
maxWidth,
|
1268
|
+
variant
|
1264
1269
|
},
|
1265
1270
|
state2.collection.size === 0 && props.emptyContent,
|
1266
1271
|
Array.from(state2.collection).map(
|
@@ -1372,16 +1377,17 @@ function InfoSelect({
|
|
1372
1377
|
triggerRef
|
1373
1378
|
);
|
1374
1379
|
const stateStyle = "completed";
|
1380
|
+
const hasChosenValue = state2.selectedItem !== null;
|
1375
1381
|
const styles3 = useMultiStyleConfig("InfoSelect", {
|
1376
1382
|
isOpen: state2.isOpen,
|
1377
1383
|
isLabelSrOnly,
|
1378
1384
|
variant,
|
1379
|
-
stateStyle
|
1385
|
+
stateStyle,
|
1386
|
+
hasChosenValue
|
1380
1387
|
});
|
1381
1388
|
const { buttonProps } = useButton(triggerProps, triggerRef);
|
1382
1389
|
const { t: t2 } = useTranslation();
|
1383
1390
|
const formControl = useFormControlProps(props);
|
1384
|
-
const hasChosenValue = state2.selectedItem !== null;
|
1385
1391
|
return /* @__PURE__ */ React84__default.createElement(Box, { sx: styles3.container }, /* @__PURE__ */ React84__default.createElement(
|
1386
1392
|
HiddenSelect,
|
1387
1393
|
{
|
@@ -1421,7 +1427,7 @@ function InfoSelect({
|
|
1421
1427
|
...valueProps,
|
1422
1428
|
h: isLabelSrOnly ? "" : !hasChosenValue ? "0px" : "18px",
|
1423
1429
|
hidden: !hasChosenValue,
|
1424
|
-
transform: isLabelSrOnly ? "" : "scale(1) translateY(-
|
1430
|
+
transform: isLabelSrOnly ? "" : "scale(1) translateY(-12px)",
|
1425
1431
|
transitionProperty: "var(--spor-transition-property-common)",
|
1426
1432
|
transitionDuration: "var(--spor-transition-duration-normal)"
|
1427
1433
|
},
|
@@ -1441,7 +1447,8 @@ function InfoSelect({
|
|
1441
1447
|
...menuProps,
|
1442
1448
|
state: state2,
|
1443
1449
|
listBoxRef: listboxRef,
|
1444
|
-
borderBottomRadius: "sm"
|
1450
|
+
borderBottomRadius: "sm",
|
1451
|
+
variant
|
1445
1452
|
},
|
1446
1453
|
props.children
|
1447
1454
|
)
|
@@ -1747,6 +1754,7 @@ var PhoneNumberInput = forwardRef(
|
|
1747
1754
|
name,
|
1748
1755
|
value: externalValue,
|
1749
1756
|
onChange: externalOnChange,
|
1757
|
+
variant,
|
1750
1758
|
...boxProps
|
1751
1759
|
}, ref) => {
|
1752
1760
|
const { t: t2 } = useTranslation();
|
@@ -1769,7 +1777,8 @@ var PhoneNumberInput = forwardRef(
|
|
1769
1777
|
label: t2(texts4.countryCodeLabel),
|
1770
1778
|
width: "6.25rem",
|
1771
1779
|
height: "100%",
|
1772
|
-
value: "+47"
|
1780
|
+
value: "+47",
|
1781
|
+
variant
|
1773
1782
|
},
|
1774
1783
|
/* @__PURE__ */ React84__default.createElement(Item, { key: "+47" }, "+47")
|
1775
1784
|
)
|
@@ -1784,7 +1793,8 @@ var PhoneNumberInput = forwardRef(
|
|
1784
1793
|
}),
|
1785
1794
|
name: name ? `${name}-country-code` : "country-code",
|
1786
1795
|
height: "100%",
|
1787
|
-
width: "6.25rem"
|
1796
|
+
width: "6.25rem",
|
1797
|
+
variant
|
1788
1798
|
}
|
1789
1799
|
)
|
1790
1800
|
), /* @__PURE__ */ React84__default.createElement(
|
@@ -1803,7 +1813,8 @@ var PhoneNumberInput = forwardRef(
|
|
1803
1813
|
});
|
1804
1814
|
},
|
1805
1815
|
position: "relative",
|
1806
|
-
left: "1px"
|
1816
|
+
left: "1px",
|
1817
|
+
variant
|
1807
1818
|
}
|
1808
1819
|
));
|
1809
1820
|
}
|
@@ -1822,7 +1833,7 @@ var texts4 = createTexts({
|
|
1822
1833
|
sv: "Landskod"
|
1823
1834
|
}
|
1824
1835
|
});
|
1825
|
-
var LazyCountryCodeSelect = React84__default.lazy(() => import('./CountryCodeSelect-
|
1836
|
+
var LazyCountryCodeSelect = React84__default.lazy(() => import('./CountryCodeSelect-QNKQE3C6.mjs'));
|
1826
1837
|
var Radio = forwardRef((props, ref) => {
|
1827
1838
|
return /* @__PURE__ */ React84__default.createElement(Radio$1, { ...props, ref });
|
1828
1839
|
});
|
@@ -1884,8 +1895,8 @@ var texts5 = createTexts({
|
|
1884
1895
|
}
|
1885
1896
|
});
|
1886
1897
|
var Switch = forwardRef(
|
1887
|
-
({ size: size2 = "md", ...props }, ref) => {
|
1888
|
-
return /* @__PURE__ */ React84__default.createElement(Switch$1, { size: size2, ...props, ref });
|
1898
|
+
({ size: size2 = "md", as = "div", ...props }, ref) => {
|
1899
|
+
return /* @__PURE__ */ React84__default.createElement(Switch$1, { as, size: size2, ...props, ref });
|
1889
1900
|
}
|
1890
1901
|
);
|
1891
1902
|
var Textarea = forwardRef((props, ref) => {
|
@@ -12105,6 +12116,7 @@ var config18 = helpers11.defineMultiStyleConfig({
|
|
12105
12116
|
label: {
|
12106
12117
|
position: "relative",
|
12107
12118
|
fontSize: ["mobile.xs", "desktop.sm"],
|
12119
|
+
marginTop: props.hasChosenValue ? 2 : 0,
|
12108
12120
|
...props.isLabelSrOnly ? srOnly2 : {}
|
12109
12121
|
},
|
12110
12122
|
innerButton: {
|
@@ -12401,15 +12413,12 @@ var getDeviationIconStyle = (props) => {
|
|
12401
12413
|
top: "0",
|
12402
12414
|
right: "0",
|
12403
12415
|
transform: "translate(50%, -50%)",
|
12404
|
-
zIndex: "
|
12405
|
-
stroke: "white",
|
12416
|
+
zIndex: "docked",
|
12406
12417
|
color: deviationIconColor[props.deviationLevel] || "inherit"
|
12407
12418
|
};
|
12408
12419
|
};
|
12409
12420
|
var deviationIconColor = {
|
12410
12421
|
critical: "brightRed",
|
12411
|
-
major: "golden",
|
12412
|
-
minor: "golden",
|
12413
12422
|
info: "ocean"
|
12414
12423
|
};
|
12415
12424
|
|
@@ -12471,79 +12480,28 @@ var config20 = helpers13.defineMultiStyleConfig({
|
|
12471
12480
|
}
|
12472
12481
|
});
|
12473
12482
|
var info_tag_default = config20;
|
12474
|
-
|
12475
|
-
|
12476
|
-
|
12477
|
-
|
12478
|
-
|
12479
|
-
|
12480
|
-
|
12481
|
-
|
12482
|
-
borderRadius: "sm",
|
12483
|
-
transitionProperty: "common",
|
12484
|
-
transitionDuration: "fast",
|
12485
|
-
position: "relative",
|
12486
|
-
paddingX: 3,
|
12487
|
-
height: 8,
|
12488
|
-
fontSize: "mobile.md",
|
12489
|
-
_hover: {
|
12490
|
-
...baseBorder("hover", props)
|
12491
|
-
},
|
12492
|
-
_active: {
|
12493
|
-
...baseBackground("active", props),
|
12494
|
-
...baseBorder("default", props)
|
12495
|
-
},
|
12496
|
-
_focusVisible: {
|
12497
|
-
...focusVisibleStyles(props)._focusVisible,
|
12498
|
-
outlineOffset: 0
|
12499
|
-
},
|
12500
|
-
_disabled: {
|
12501
|
-
...surface("disabled", props),
|
12502
|
-
...baseBorder("disabled", props),
|
12503
|
-
pointerEvents: "none"
|
12504
|
-
},
|
12505
|
-
_invalid: {
|
12506
|
-
...baseBorder("invalid", props),
|
12483
|
+
|
12484
|
+
// src/theme/utils/input-utils.ts
|
12485
|
+
function inputVariant(state2, props) {
|
12486
|
+
switch (state2) {
|
12487
|
+
case "base":
|
12488
|
+
return {
|
12489
|
+
...baseBackground("default", props),
|
12490
|
+
...baseBorder("default", props),
|
12507
12491
|
_hover: {
|
12508
12492
|
...baseBorder("hover", props)
|
12493
|
+
},
|
12494
|
+
_active: {
|
12495
|
+
...baseBackground("active", props),
|
12496
|
+
...baseBorder("default", props)
|
12497
|
+
},
|
12498
|
+
_selected: {
|
12499
|
+
...baseBackground("selected", props),
|
12500
|
+
...baseBorder("selected", props)
|
12509
12501
|
}
|
12510
|
-
}
|
12511
|
-
|
12512
|
-
|
12513
|
-
top: "2px",
|
12514
|
-
left: props.paddingLeft || props.pl || 3,
|
12515
|
-
zIndex: 2,
|
12516
|
-
position: "absolute",
|
12517
|
-
marginY: 2,
|
12518
|
-
transition: ".1s ease-out",
|
12519
|
-
transformOrigin: "top left",
|
12520
|
-
cursor: "text"
|
12521
|
-
},
|
12522
|
-
"&:not(:placeholder-shown)": {
|
12523
|
-
paddingTop: "1rem",
|
12524
|
-
"& + label": {
|
12525
|
-
transform: "scale(0.825) translateY(-10px)"
|
12526
|
-
}
|
12527
|
-
}
|
12528
|
-
},
|
12529
|
-
element: {
|
12530
|
-
height: "100%"
|
12531
|
-
},
|
12532
|
-
group: {
|
12533
|
-
":has(:disabled)": {
|
12534
|
-
...baseText("disabled", props)
|
12535
|
-
}
|
12536
|
-
}
|
12537
|
-
}),
|
12538
|
-
variants: {
|
12539
|
-
base: (props) => ({
|
12540
|
-
field: {
|
12541
|
-
...baseBackground("default", props),
|
12542
|
-
...baseBorder("default", props)
|
12543
|
-
}
|
12544
|
-
}),
|
12545
|
-
floating: (props) => ({
|
12546
|
-
field: {
|
12502
|
+
};
|
12503
|
+
case "floating":
|
12504
|
+
return {
|
12547
12505
|
boxShadow: "sm",
|
12548
12506
|
...floatingBackground("default", props),
|
12549
12507
|
...floatingBorder("default", props),
|
@@ -12559,6 +12517,97 @@ var config21 = helpers14.defineMultiStyleConfig({
|
|
12559
12517
|
...floatingBorder("selected", props),
|
12560
12518
|
...floatingBackground("selected", props)
|
12561
12519
|
}
|
12520
|
+
};
|
12521
|
+
case "default":
|
12522
|
+
default:
|
12523
|
+
return {
|
12524
|
+
...baseBackground("default", props),
|
12525
|
+
...baseBorder("default", props),
|
12526
|
+
_hover: {
|
12527
|
+
...baseBorder("hover", props)
|
12528
|
+
},
|
12529
|
+
_active: {
|
12530
|
+
...baseBackground("active", props),
|
12531
|
+
...baseBorder("default", props)
|
12532
|
+
},
|
12533
|
+
_selected: {
|
12534
|
+
...baseBackground("selected", props),
|
12535
|
+
...baseBorder("selected", props)
|
12536
|
+
}
|
12537
|
+
};
|
12538
|
+
}
|
12539
|
+
}
|
12540
|
+
var inputBaseStyle = (props) => ({
|
12541
|
+
field: {
|
12542
|
+
appearance: "none",
|
12543
|
+
width: "100%",
|
12544
|
+
outline: "none",
|
12545
|
+
border: 0,
|
12546
|
+
borderRadius: "sm",
|
12547
|
+
transitionProperty: "common",
|
12548
|
+
transitionDuration: "fast",
|
12549
|
+
position: "relative",
|
12550
|
+
paddingX: 3,
|
12551
|
+
height: 8,
|
12552
|
+
fontSize: "mobile.md",
|
12553
|
+
_focusVisible: {
|
12554
|
+
...focusVisibleStyles(props)._focusVisible,
|
12555
|
+
outlineOffset: 0
|
12556
|
+
},
|
12557
|
+
_disabled: {
|
12558
|
+
...surface("disabled", props),
|
12559
|
+
...baseBorder("disabled", props),
|
12560
|
+
pointerEvents: "none"
|
12561
|
+
},
|
12562
|
+
_invalid: {
|
12563
|
+
...baseBorder("invalid", props),
|
12564
|
+
_hover: {
|
12565
|
+
...baseBorder("hover", props)
|
12566
|
+
}
|
12567
|
+
},
|
12568
|
+
" + label": {
|
12569
|
+
fontSize: ["mobile.sm", "desktop.sm"],
|
12570
|
+
top: "2px",
|
12571
|
+
left: props.paddingLeft || props.pl || 3,
|
12572
|
+
zIndex: 2,
|
12573
|
+
position: "absolute",
|
12574
|
+
marginY: 2,
|
12575
|
+
transition: ".1s ease-out",
|
12576
|
+
transformOrigin: "top left",
|
12577
|
+
cursor: "text"
|
12578
|
+
},
|
12579
|
+
"&:not(:placeholder-shown)": {
|
12580
|
+
paddingTop: "1rem",
|
12581
|
+
"& + label": {
|
12582
|
+
transform: "scale(0.825) translateY(-10px)"
|
12583
|
+
}
|
12584
|
+
}
|
12585
|
+
},
|
12586
|
+
element: {
|
12587
|
+
height: "100%"
|
12588
|
+
},
|
12589
|
+
group: {
|
12590
|
+
":has(:disabled)": {
|
12591
|
+
...baseText("disabled", props)
|
12592
|
+
}
|
12593
|
+
}
|
12594
|
+
});
|
12595
|
+
|
12596
|
+
// src/theme/components/input.ts
|
12597
|
+
var helpers14 = createMultiStyleConfigHelpers$1(inputAnatomy.keys);
|
12598
|
+
var config21 = helpers14.defineMultiStyleConfig({
|
12599
|
+
baseStyle: (props) => ({
|
12600
|
+
...inputBaseStyle(props)
|
12601
|
+
}),
|
12602
|
+
variants: {
|
12603
|
+
base: (props) => ({
|
12604
|
+
field: {
|
12605
|
+
...inputVariant("base", props)
|
12606
|
+
}
|
12607
|
+
}),
|
12608
|
+
floating: (props) => ({
|
12609
|
+
field: {
|
12610
|
+
...inputVariant("floating", props)
|
12562
12611
|
}
|
12563
12612
|
})
|
12564
12613
|
},
|
@@ -12812,8 +12861,7 @@ var config24 = helpers16.defineMultiStyleConfig({
|
|
12812
12861
|
maxHeight: "50vh",
|
12813
12862
|
width: "100%",
|
12814
12863
|
listStyle: "none",
|
12815
|
-
borderBottomRadius: "sm"
|
12816
|
-
...baseBorder("default", props)
|
12864
|
+
borderBottomRadius: "sm"
|
12817
12865
|
},
|
12818
12866
|
item: {
|
12819
12867
|
paddingX: 2,
|
@@ -12845,7 +12893,22 @@ var config24 = helpers16.defineMultiStyleConfig({
|
|
12845
12893
|
...ghostText("selected", props)
|
12846
12894
|
}
|
12847
12895
|
}
|
12848
|
-
})
|
12896
|
+
}),
|
12897
|
+
variants: {
|
12898
|
+
base: (props) => ({
|
12899
|
+
container: {
|
12900
|
+
...baseBorder("default", props)
|
12901
|
+
}
|
12902
|
+
}),
|
12903
|
+
floating: (props) => ({
|
12904
|
+
container: {
|
12905
|
+
...floatingBorder("default", props)
|
12906
|
+
}
|
12907
|
+
})
|
12908
|
+
},
|
12909
|
+
defaultProps: {
|
12910
|
+
variant: "base"
|
12911
|
+
}
|
12849
12912
|
});
|
12850
12913
|
var listbox_default = config24;
|
12851
12914
|
var parts12 = anatomy$1("media-controller-button").parts("container", "icon");
|
@@ -13465,7 +13528,7 @@ var config34 = helpers26.defineMultiStyleConfig({
|
|
13465
13528
|
position: "relative",
|
13466
13529
|
"& + label": {
|
13467
13530
|
fontSize: ["mobile.sm", "desktop.sm"],
|
13468
|
-
top: "
|
13531
|
+
top: "0.2rem",
|
13469
13532
|
left: 3,
|
13470
13533
|
zIndex: 2,
|
13471
13534
|
position: "absolute",
|
@@ -13478,10 +13541,9 @@ var config34 = helpers26.defineMultiStyleConfig({
|
|
13478
13541
|
}
|
13479
13542
|
},
|
13480
13543
|
field: {
|
13481
|
-
...
|
13544
|
+
...inputBaseStyle(props).field,
|
13482
13545
|
appearance: "none",
|
13483
|
-
paddingTop: "1rem"
|
13484
|
-
"option, optgroup": {}
|
13546
|
+
paddingTop: "1rem"
|
13485
13547
|
},
|
13486
13548
|
icon: {
|
13487
13549
|
width: 5,
|
@@ -13495,7 +13557,22 @@ var config34 = helpers26.defineMultiStyleConfig({
|
|
13495
13557
|
...baseText("disabled", props)
|
13496
13558
|
}
|
13497
13559
|
}
|
13498
|
-
})
|
13560
|
+
}),
|
13561
|
+
variants: {
|
13562
|
+
base: (props) => ({
|
13563
|
+
field: {
|
13564
|
+
...inputVariant("base", props)
|
13565
|
+
}
|
13566
|
+
}),
|
13567
|
+
floating: (props) => ({
|
13568
|
+
field: {
|
13569
|
+
...inputVariant("floating", props)
|
13570
|
+
}
|
13571
|
+
})
|
13572
|
+
},
|
13573
|
+
defaultProps: {
|
13574
|
+
variant: "base"
|
13575
|
+
}
|
13499
13576
|
});
|
13500
13577
|
var select_default = config34;
|
13501
13578
|
var fade = (startColor, endColor) => keyframes({
|
@@ -13991,7 +14068,7 @@ var config39 = helpers30.defineMultiStyleConfig({
|
|
13991
14068
|
var tabs_default = config39;
|
13992
14069
|
var config40 = defineStyleConfig$1({
|
13993
14070
|
baseStyle: (props) => ({
|
13994
|
-
...
|
14071
|
+
...inputBaseStyle(props).field,
|
13995
14072
|
minHeight: "5rem",
|
13996
14073
|
verticalAlign: "top",
|
13997
14074
|
appearance: "none",
|
@@ -14004,7 +14081,18 @@ var config40 = defineStyleConfig$1({
|
|
14004
14081
|
transform: "scale(0.825) translateY(-10px)"
|
14005
14082
|
}
|
14006
14083
|
}
|
14007
|
-
})
|
14084
|
+
}),
|
14085
|
+
variants: {
|
14086
|
+
base: (props) => ({
|
14087
|
+
...inputVariant("base", props)
|
14088
|
+
}),
|
14089
|
+
floating: (props) => ({
|
14090
|
+
...inputVariant("floating", props)
|
14091
|
+
})
|
14092
|
+
},
|
14093
|
+
defaultProps: {
|
14094
|
+
variant: "base"
|
14095
|
+
}
|
14008
14096
|
});
|
14009
14097
|
var textarea_default = config40;
|
14010
14098
|
var config41 = defineStyleConfig$1({
|