@qasa/qds-ui 0.23.1 → 0.25.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/README.md +3 -2
- package/dist/index.d.mts +686 -3973
- package/dist/index.d.ts +686 -3973
- package/dist/index.js +197 -180
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +105 -89
- package/dist/index.mjs.map +1 -1
- package/dist/preset.css +136 -8
- package/package.json +25 -49
package/dist/index.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ import * as _emotion_styled from '@emotion/styled';
|
|
|
9
9
|
import { LucideIcon } from 'lucide-react';
|
|
10
10
|
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
|
|
11
11
|
import * as RadixSwitch from '@radix-ui/react-switch';
|
|
12
|
+
import * as ToastPrimitive from '@radix-ui/react-toast';
|
|
12
13
|
|
|
13
14
|
declare const theme: {
|
|
14
15
|
mediaQueries: {
|
|
@@ -934,10 +935,10 @@ interface ForwardRefComponent<IntrinsicElementString, OwnProps = {}> extends For
|
|
|
934
935
|
* so that events are typed when using JSX.IntrinsicElements.
|
|
935
936
|
*/
|
|
936
937
|
<As = IntrinsicElementString>(props: As extends '' ? {
|
|
937
|
-
as: keyof JSX.IntrinsicElements;
|
|
938
|
+
as: keyof react.JSX.IntrinsicElements;
|
|
938
939
|
} : As extends react.ComponentType<infer P> ? Merge<P, OwnProps & {
|
|
939
940
|
as: As;
|
|
940
|
-
}> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
|
|
941
|
+
}> : As extends keyof react.JSX.IntrinsicElements ? Merge<react.JSX.IntrinsicElements[As], OwnProps & {
|
|
941
942
|
as: As;
|
|
942
943
|
}> : never): react.ReactElement | null;
|
|
943
944
|
}
|
|
@@ -962,8 +963,8 @@ interface IconOptions {
|
|
|
962
963
|
*/
|
|
963
964
|
color?: IconColor;
|
|
964
965
|
}
|
|
965
|
-
type OmittedProps$
|
|
966
|
-
interface IconProps extends Omit<SVGAttributes<SVGElement>, OmittedProps$
|
|
966
|
+
type OmittedProps$9 = 'color' | 'onClick' | 'width' | 'height' | 'fontSize';
|
|
967
|
+
interface IconProps extends Omit<SVGAttributes<SVGElement>, OmittedProps$9>, IconOptions {
|
|
967
968
|
}
|
|
968
969
|
|
|
969
970
|
interface CreateIconOptions {
|
|
@@ -1069,4002 +1070,693 @@ type VariantProps<T extends ReturnType<typeof createStyle | typeof createStyleVa
|
|
|
1069
1070
|
*/
|
|
1070
1071
|
declare const pxToRem: (px: number) => string;
|
|
1071
1072
|
|
|
1072
|
-
declare const getFormFieldBaseStyles: (theme: {
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
readonly mdUp: "@media(min-width: 768px)";
|
|
1076
|
-
readonly lgUp: "@media(min-width: 1024px)";
|
|
1077
|
-
readonly xlUp: "@media(min-width: 1280px)";
|
|
1078
|
-
readonly '2xlUp': "@media(min-width: 1536px)";
|
|
1079
|
-
};
|
|
1080
|
-
spacing: {
|
|
1081
|
-
'0x': string;
|
|
1082
|
-
'1x': string;
|
|
1083
|
-
'2x': string;
|
|
1084
|
-
'3x': string;
|
|
1085
|
-
'4x': string;
|
|
1086
|
-
'5x': string;
|
|
1087
|
-
'6x': string;
|
|
1088
|
-
'8x': string;
|
|
1089
|
-
'10x': string;
|
|
1090
|
-
'12x': string;
|
|
1091
|
-
'14x': string;
|
|
1092
|
-
'16x': string;
|
|
1093
|
-
'20x': string;
|
|
1094
|
-
'24x': string;
|
|
1073
|
+
declare const getFormFieldBaseStyles: (theme: Theme) => {
|
|
1074
|
+
'&::placeholder': {
|
|
1075
|
+
color: string;
|
|
1095
1076
|
};
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
readonly sm: 480;
|
|
1099
|
-
readonly md: 768;
|
|
1100
|
-
readonly lg: 1024;
|
|
1101
|
-
readonly xl: 1280;
|
|
1102
|
-
readonly '2xl': 1536;
|
|
1077
|
+
'&:hover': {
|
|
1078
|
+
borderColor: string;
|
|
1103
1079
|
};
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
docked: number;
|
|
1109
|
-
dropdown: number;
|
|
1110
|
-
sticky: number;
|
|
1111
|
-
banner: number;
|
|
1112
|
-
overlay: number;
|
|
1113
|
-
modal: number;
|
|
1114
|
-
popover: number;
|
|
1115
|
-
skipLink: number;
|
|
1116
|
-
toast: number;
|
|
1117
|
-
tooltip: number;
|
|
1080
|
+
'&:focus': {
|
|
1081
|
+
outline: number;
|
|
1082
|
+
borderColor: string;
|
|
1083
|
+
boxShadow: `0 0 0 1px ${string}`;
|
|
1118
1084
|
};
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
gray90: string;
|
|
1124
|
-
gray80: string;
|
|
1125
|
-
gray70: string;
|
|
1126
|
-
gray60: string;
|
|
1127
|
-
gray50: string;
|
|
1128
|
-
gray40: string;
|
|
1129
|
-
gray30: string;
|
|
1130
|
-
gray20: string;
|
|
1131
|
-
gray10: string;
|
|
1132
|
-
pink: string;
|
|
1133
|
-
uiPink: string;
|
|
1134
|
-
uiPinkDark: string;
|
|
1135
|
-
uiPinkLight: string;
|
|
1136
|
-
brown: string;
|
|
1137
|
-
brownDark: string;
|
|
1138
|
-
brownLight: string;
|
|
1139
|
-
offWhite: string;
|
|
1140
|
-
offWhiteDark: string;
|
|
1141
|
-
offWhiteLight: string;
|
|
1142
|
-
softPink: string;
|
|
1143
|
-
warmYellow: string;
|
|
1144
|
-
softYellow: string;
|
|
1145
|
-
red90: string;
|
|
1146
|
-
red80: string;
|
|
1147
|
-
red70: string;
|
|
1148
|
-
red60: string;
|
|
1149
|
-
red50: string;
|
|
1150
|
-
red40: string;
|
|
1151
|
-
red30: string;
|
|
1152
|
-
red20: string;
|
|
1153
|
-
red10: string;
|
|
1154
|
-
green90: string;
|
|
1155
|
-
green80: string;
|
|
1156
|
-
green70: string;
|
|
1157
|
-
green60: string;
|
|
1158
|
-
green50: string;
|
|
1159
|
-
green40: string;
|
|
1160
|
-
green30: string;
|
|
1161
|
-
green20: string;
|
|
1162
|
-
green10: string;
|
|
1163
|
-
blue90: string;
|
|
1164
|
-
blue80: string;
|
|
1165
|
-
blue70: string;
|
|
1166
|
-
blue60: string;
|
|
1167
|
-
blue50: string;
|
|
1168
|
-
blue40: string;
|
|
1169
|
-
blue30: string;
|
|
1170
|
-
blue20: string;
|
|
1171
|
-
blue10: string;
|
|
1172
|
-
yellow90: string;
|
|
1173
|
-
yellow80: string;
|
|
1174
|
-
yellow70: string;
|
|
1175
|
-
yellow60: string;
|
|
1176
|
-
yellow50: string;
|
|
1177
|
-
yellow40: string;
|
|
1178
|
-
yellow30: string;
|
|
1179
|
-
yellow20: string;
|
|
1180
|
-
yellow10: string;
|
|
1181
|
-
blackAlpha5: string;
|
|
1182
|
-
blackAlpha10: string;
|
|
1183
|
-
blackAlpha20: string;
|
|
1184
|
-
};
|
|
1185
|
-
bg: {
|
|
1186
|
-
default: string;
|
|
1187
|
-
brandPrimary: string;
|
|
1188
|
-
brandPrimaryHover: string;
|
|
1189
|
-
brandPrimaryActive: string;
|
|
1190
|
-
brandSecondary: string;
|
|
1191
|
-
brandSecondaryHover: string;
|
|
1192
|
-
brandSecondaryActive: string;
|
|
1193
|
-
brandTertiary: string;
|
|
1194
|
-
brandTertiaryHover: string;
|
|
1195
|
-
brandTertiaryActive: string;
|
|
1196
|
-
negative: string;
|
|
1197
|
-
warning: string;
|
|
1198
|
-
positive: string;
|
|
1199
|
-
inset: string;
|
|
1200
|
-
backdrop: string;
|
|
1201
|
-
};
|
|
1202
|
-
text: {
|
|
1203
|
-
strong: string;
|
|
1204
|
-
default: string;
|
|
1205
|
-
subtle: string;
|
|
1206
|
-
disabled: string;
|
|
1207
|
-
negative: string;
|
|
1208
|
-
warning: string;
|
|
1209
|
-
positive: string;
|
|
1210
|
-
onBrandPrimary: string;
|
|
1211
|
-
onBrandSecondary: string;
|
|
1212
|
-
onBrandTertiary: string;
|
|
1213
|
-
};
|
|
1214
|
-
icon: {
|
|
1215
|
-
default: string;
|
|
1216
|
-
strong: string;
|
|
1217
|
-
subtle: string;
|
|
1218
|
-
disabled: string;
|
|
1219
|
-
negative: string;
|
|
1220
|
-
warning: string;
|
|
1221
|
-
positive: string;
|
|
1222
|
-
onBrandPrimary: string;
|
|
1223
|
-
onBrandSecondary: string;
|
|
1224
|
-
onBrandTertiary: string;
|
|
1225
|
-
};
|
|
1226
|
-
border: {
|
|
1227
|
-
default: string;
|
|
1228
|
-
defaultHover: string;
|
|
1229
|
-
defaultSelected: string;
|
|
1230
|
-
strong: string;
|
|
1231
|
-
subtle: string;
|
|
1232
|
-
negative: string;
|
|
1233
|
-
warning: string;
|
|
1234
|
-
positive: string;
|
|
1085
|
+
'&[aria-invalid="true"]': {
|
|
1086
|
+
borderColor: string;
|
|
1087
|
+
'&:focus': {
|
|
1088
|
+
boxShadow: `0 0 0 1px ${string}`;
|
|
1235
1089
|
};
|
|
1236
1090
|
};
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
144: string;
|
|
1241
|
-
160: string;
|
|
1242
|
-
176: string;
|
|
1243
|
-
192: string;
|
|
1244
|
-
224: string;
|
|
1245
|
-
256: string;
|
|
1246
|
-
288: string;
|
|
1247
|
-
320: string;
|
|
1248
|
-
384: string;
|
|
1249
|
-
448: string;
|
|
1250
|
-
512: string;
|
|
1251
|
-
576: string;
|
|
1252
|
-
672: string;
|
|
1253
|
-
768: string;
|
|
1254
|
-
896: string;
|
|
1255
|
-
1024: string;
|
|
1256
|
-
'0x': string;
|
|
1257
|
-
'1x': string;
|
|
1258
|
-
'2x': string;
|
|
1259
|
-
'3x': string;
|
|
1260
|
-
'4x': string;
|
|
1261
|
-
'5x': string;
|
|
1262
|
-
'6x': string;
|
|
1263
|
-
'8x': string;
|
|
1264
|
-
'10x': string;
|
|
1265
|
-
'12x': string;
|
|
1266
|
-
'14x': string;
|
|
1267
|
-
'16x': string;
|
|
1268
|
-
'20x': string;
|
|
1269
|
-
'24x': string;
|
|
1091
|
+
'&[disabled], &:disabled, &[data-disabled]': {
|
|
1092
|
+
opacity: number;
|
|
1093
|
+
borderColor: string;
|
|
1270
1094
|
};
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1095
|
+
transitionProperty: "opacity, border-color, box-shadow";
|
|
1096
|
+
transitionDuration: "120ms";
|
|
1097
|
+
transitionTimingFunction: "ease";
|
|
1098
|
+
fontFamily: string;
|
|
1099
|
+
fontWeight: string;
|
|
1100
|
+
fontSize: string;
|
|
1101
|
+
lineHeight: string;
|
|
1102
|
+
letterSpacing: string;
|
|
1103
|
+
width: string;
|
|
1104
|
+
minWidth: number;
|
|
1105
|
+
appearance: "none";
|
|
1106
|
+
paddingLeft: string;
|
|
1107
|
+
paddingRight: string;
|
|
1108
|
+
border: string;
|
|
1109
|
+
borderRadius: string;
|
|
1110
|
+
backgroundColor: string;
|
|
1111
|
+
color: string;
|
|
1112
|
+
WebkitTouchCallout: "none";
|
|
1113
|
+
WebkitTapHighlightColor: "transparent";
|
|
1114
|
+
'&::-webkit-date-and-time-value': {
|
|
1115
|
+
textAlign: "left";
|
|
1281
1116
|
};
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1117
|
+
alignItems: "center";
|
|
1118
|
+
};
|
|
1119
|
+
|
|
1120
|
+
declare const getSizeStyles$4: (theme: Theme) => {
|
|
1121
|
+
xs: {
|
|
1122
|
+
fontFamily: string;
|
|
1123
|
+
fontWeight: string;
|
|
1124
|
+
fontSize: string;
|
|
1125
|
+
lineHeight: string;
|
|
1126
|
+
letterSpacing: string;
|
|
1127
|
+
height: string;
|
|
1128
|
+
paddingLeft: string;
|
|
1129
|
+
paddingRight: string;
|
|
1288
1130
|
};
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
fontFamily: string;
|
|
1341
|
-
fontWeight: string;
|
|
1342
|
-
fontSize: string;
|
|
1343
|
-
lineHeight: string;
|
|
1344
|
-
letterSpacing: string;
|
|
1345
|
-
fontFeatureSettings: string;
|
|
1346
|
-
};
|
|
1347
|
-
'2xs': {
|
|
1348
|
-
fontFamily: string;
|
|
1349
|
-
fontWeight: string;
|
|
1350
|
-
fontSize: string;
|
|
1351
|
-
lineHeight: string;
|
|
1352
|
-
letterSpacing: string;
|
|
1353
|
-
fontFeatureSettings: string;
|
|
1354
|
-
};
|
|
1355
|
-
};
|
|
1356
|
-
title: {
|
|
1357
|
-
lg: {
|
|
1358
|
-
fontFamily: string;
|
|
1359
|
-
fontWeight: string;
|
|
1360
|
-
fontSize: string;
|
|
1361
|
-
lineHeight: string;
|
|
1362
|
-
letterSpacing: string;
|
|
1363
|
-
};
|
|
1364
|
-
md: {
|
|
1365
|
-
fontFamily: string;
|
|
1366
|
-
fontWeight: string;
|
|
1367
|
-
fontSize: string;
|
|
1368
|
-
lineHeight: string;
|
|
1369
|
-
letterSpacing: string;
|
|
1370
|
-
};
|
|
1371
|
-
sm: {
|
|
1372
|
-
fontFamily: string;
|
|
1373
|
-
fontWeight: string;
|
|
1374
|
-
fontSize: string;
|
|
1375
|
-
lineHeight: string;
|
|
1376
|
-
letterSpacing: string;
|
|
1377
|
-
};
|
|
1378
|
-
xs: {
|
|
1379
|
-
fontFamily: string;
|
|
1380
|
-
fontWeight: string;
|
|
1381
|
-
fontSize: string;
|
|
1382
|
-
lineHeight: string;
|
|
1383
|
-
letterSpacing: string;
|
|
1384
|
-
};
|
|
1385
|
-
'2xs': {
|
|
1386
|
-
fontFamily: string;
|
|
1387
|
-
fontWeight: string;
|
|
1388
|
-
fontSize: string;
|
|
1389
|
-
lineHeight: string;
|
|
1390
|
-
letterSpacing: string;
|
|
1391
|
-
};
|
|
1392
|
-
'3xs': {
|
|
1393
|
-
fontFamily: string;
|
|
1394
|
-
fontWeight: string;
|
|
1395
|
-
fontSize: string;
|
|
1396
|
-
lineHeight: string;
|
|
1397
|
-
letterSpacing: string;
|
|
1398
|
-
};
|
|
1399
|
-
};
|
|
1400
|
-
body: {
|
|
1401
|
-
xl: {
|
|
1402
|
-
fontFamily: string;
|
|
1403
|
-
fontWeight: string;
|
|
1404
|
-
fontSize: string;
|
|
1405
|
-
lineHeight: string;
|
|
1406
|
-
letterSpacing: string;
|
|
1407
|
-
};
|
|
1408
|
-
lg: {
|
|
1409
|
-
fontFamily: string;
|
|
1410
|
-
fontWeight: string;
|
|
1411
|
-
fontSize: string;
|
|
1412
|
-
lineHeight: string;
|
|
1413
|
-
letterSpacing: string;
|
|
1414
|
-
};
|
|
1415
|
-
md: {
|
|
1416
|
-
fontFamily: string;
|
|
1417
|
-
fontWeight: string;
|
|
1418
|
-
fontSize: string;
|
|
1419
|
-
lineHeight: string;
|
|
1420
|
-
letterSpacing: string;
|
|
1421
|
-
};
|
|
1422
|
-
sm: {
|
|
1423
|
-
fontFamily: string;
|
|
1424
|
-
fontWeight: string;
|
|
1425
|
-
fontSize: string;
|
|
1426
|
-
lineHeight: string;
|
|
1427
|
-
letterSpacing: string;
|
|
1131
|
+
sm: {
|
|
1132
|
+
fontFamily: string;
|
|
1133
|
+
fontWeight: string;
|
|
1134
|
+
fontSize: string;
|
|
1135
|
+
lineHeight: string;
|
|
1136
|
+
letterSpacing: string;
|
|
1137
|
+
height: string;
|
|
1138
|
+
paddingLeft: string;
|
|
1139
|
+
paddingRight: string;
|
|
1140
|
+
};
|
|
1141
|
+
md: {
|
|
1142
|
+
fontFamily: string;
|
|
1143
|
+
fontWeight: string;
|
|
1144
|
+
fontSize: string;
|
|
1145
|
+
lineHeight: string;
|
|
1146
|
+
letterSpacing: string;
|
|
1147
|
+
height: string;
|
|
1148
|
+
paddingLeft: string;
|
|
1149
|
+
paddingRight: string;
|
|
1150
|
+
};
|
|
1151
|
+
lg: {
|
|
1152
|
+
fontFamily: string;
|
|
1153
|
+
fontWeight: string;
|
|
1154
|
+
fontSize: string;
|
|
1155
|
+
lineHeight: string;
|
|
1156
|
+
letterSpacing: string;
|
|
1157
|
+
height: string;
|
|
1158
|
+
paddingLeft: string;
|
|
1159
|
+
paddingRight: string;
|
|
1160
|
+
};
|
|
1161
|
+
xl: {
|
|
1162
|
+
fontFamily: string;
|
|
1163
|
+
fontWeight: string;
|
|
1164
|
+
fontSize: string;
|
|
1165
|
+
lineHeight: string;
|
|
1166
|
+
letterSpacing: string;
|
|
1167
|
+
height: string;
|
|
1168
|
+
paddingLeft: string;
|
|
1169
|
+
paddingRight: string;
|
|
1170
|
+
};
|
|
1171
|
+
};
|
|
1172
|
+
type ButtonSize = VariantProps<typeof getSizeStyles$4>;
|
|
1173
|
+
declare const getVariantStyles$2: (theme: Theme) => {
|
|
1174
|
+
primary: {
|
|
1175
|
+
background: string;
|
|
1176
|
+
color: string;
|
|
1177
|
+
":not([disabled])": {
|
|
1178
|
+
'@media(hover: hover)': {
|
|
1179
|
+
':hover': {
|
|
1180
|
+
background: string;
|
|
1181
|
+
};
|
|
1428
1182
|
};
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
fontWeight: string;
|
|
1432
|
-
fontSize: string;
|
|
1433
|
-
lineHeight: string;
|
|
1434
|
-
letterSpacing: string;
|
|
1183
|
+
':active': {
|
|
1184
|
+
background: string;
|
|
1435
1185
|
};
|
|
1436
1186
|
};
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1187
|
+
};
|
|
1188
|
+
secondary: {
|
|
1189
|
+
background: string;
|
|
1190
|
+
color: string;
|
|
1191
|
+
":not([disabled])": {
|
|
1192
|
+
'@media(hover: hover)': {
|
|
1193
|
+
':hover': {
|
|
1194
|
+
background: string;
|
|
1195
|
+
};
|
|
1444
1196
|
};
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
fontWeight: string;
|
|
1448
|
-
fontSize: string;
|
|
1449
|
-
lineHeight: string;
|
|
1450
|
-
letterSpacing: string;
|
|
1197
|
+
':active': {
|
|
1198
|
+
background: string;
|
|
1451
1199
|
};
|
|
1452
1200
|
};
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1201
|
+
};
|
|
1202
|
+
tertiary: {
|
|
1203
|
+
background: string;
|
|
1204
|
+
color: string;
|
|
1205
|
+
":not([disabled])": {
|
|
1206
|
+
'@media(hover: hover)': {
|
|
1207
|
+
':hover': {
|
|
1208
|
+
background: string;
|
|
1209
|
+
};
|
|
1460
1210
|
};
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
fontWeight: string;
|
|
1464
|
-
fontSize: string;
|
|
1465
|
-
lineHeight: string;
|
|
1466
|
-
letterSpacing: string;
|
|
1211
|
+
':active': {
|
|
1212
|
+
background: string;
|
|
1467
1213
|
};
|
|
1468
1214
|
};
|
|
1469
|
-
caption: {
|
|
1470
|
-
md: {
|
|
1471
|
-
fontFamily: string;
|
|
1472
|
-
fontWeight: string;
|
|
1473
|
-
fontSize: string;
|
|
1474
|
-
lineHeight: string;
|
|
1475
|
-
letterSpacing: string;
|
|
1476
|
-
};
|
|
1477
|
-
sm: {
|
|
1478
|
-
fontFamily: string;
|
|
1479
|
-
fontWeight: string;
|
|
1480
|
-
fontSize: string;
|
|
1481
|
-
lineHeight: string;
|
|
1482
|
-
letterSpacing: string;
|
|
1483
|
-
};
|
|
1484
|
-
};
|
|
1485
|
-
};
|
|
1486
|
-
}) => {
|
|
1487
|
-
'&::placeholder': {
|
|
1488
|
-
color: string;
|
|
1489
|
-
};
|
|
1490
|
-
'&:hover': {
|
|
1491
|
-
borderColor: string;
|
|
1492
|
-
};
|
|
1493
|
-
'&:focus': {
|
|
1494
|
-
outline: number;
|
|
1495
|
-
borderColor: string;
|
|
1496
|
-
boxShadow: `0 0 0 1px ${string}`;
|
|
1497
|
-
};
|
|
1498
|
-
'&[aria-invalid="true"]': {
|
|
1499
|
-
borderColor: string;
|
|
1500
|
-
'&:focus': {
|
|
1501
|
-
boxShadow: `0 0 0 1px ${string}`;
|
|
1502
|
-
};
|
|
1503
|
-
};
|
|
1504
|
-
'&[disabled], &:disabled, &[data-disabled]': {
|
|
1505
|
-
opacity: number;
|
|
1506
|
-
borderColor: string;
|
|
1507
|
-
};
|
|
1508
|
-
transitionProperty: "opacity, border-color, box-shadow";
|
|
1509
|
-
transitionDuration: "120ms";
|
|
1510
|
-
transitionTimingFunction: "ease";
|
|
1511
|
-
fontFamily: string;
|
|
1512
|
-
fontWeight: string;
|
|
1513
|
-
fontSize: string;
|
|
1514
|
-
lineHeight: string;
|
|
1515
|
-
letterSpacing: string;
|
|
1516
|
-
width: string;
|
|
1517
|
-
minWidth: number;
|
|
1518
|
-
appearance: "none";
|
|
1519
|
-
paddingLeft: string;
|
|
1520
|
-
paddingRight: string;
|
|
1521
|
-
border: string;
|
|
1522
|
-
borderRadius: string;
|
|
1523
|
-
backgroundColor: string;
|
|
1524
|
-
color: string;
|
|
1525
|
-
WebkitTouchCallout: "none";
|
|
1526
|
-
WebkitTapHighlightColor: "transparent";
|
|
1527
|
-
'&::-webkit-date-and-time-value': {
|
|
1528
|
-
textAlign: "left";
|
|
1529
1215
|
};
|
|
1530
|
-
alignItems: "center";
|
|
1531
1216
|
};
|
|
1217
|
+
type ButtonVariant = VariantProps<typeof getVariantStyles$2>;
|
|
1532
1218
|
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
strong: string;
|
|
1692
|
-
subtle: string;
|
|
1693
|
-
negative: string;
|
|
1694
|
-
warning: string;
|
|
1695
|
-
positive: string;
|
|
1696
|
-
};
|
|
1697
|
-
};
|
|
1698
|
-
sizes: {
|
|
1699
|
-
112: string;
|
|
1700
|
-
128: string;
|
|
1701
|
-
144: string;
|
|
1702
|
-
160: string;
|
|
1703
|
-
176: string;
|
|
1704
|
-
192: string;
|
|
1705
|
-
224: string;
|
|
1706
|
-
256: string;
|
|
1707
|
-
288: string;
|
|
1708
|
-
320: string;
|
|
1709
|
-
384: string;
|
|
1710
|
-
448: string;
|
|
1711
|
-
512: string;
|
|
1712
|
-
576: string;
|
|
1713
|
-
672: string;
|
|
1714
|
-
768: string;
|
|
1715
|
-
896: string;
|
|
1716
|
-
1024: string;
|
|
1717
|
-
'0x': string;
|
|
1718
|
-
'1x': string;
|
|
1719
|
-
'2x': string;
|
|
1720
|
-
'3x': string;
|
|
1721
|
-
'4x': string;
|
|
1722
|
-
'5x': string;
|
|
1723
|
-
'6x': string;
|
|
1724
|
-
'8x': string;
|
|
1725
|
-
'10x': string;
|
|
1726
|
-
'12x': string;
|
|
1727
|
-
'14x': string;
|
|
1728
|
-
'16x': string;
|
|
1729
|
-
'20x': string;
|
|
1730
|
-
'24x': string;
|
|
1731
|
-
};
|
|
1732
|
-
radii: {
|
|
1733
|
-
none: string;
|
|
1734
|
-
'2xs': string;
|
|
1735
|
-
xs: string;
|
|
1736
|
-
sm: string;
|
|
1737
|
-
md: string;
|
|
1738
|
-
lg: string;
|
|
1739
|
-
xl: string;
|
|
1740
|
-
'2xl': string;
|
|
1741
|
-
full: string;
|
|
1742
|
-
};
|
|
1743
|
-
shadows: {
|
|
1744
|
-
none: string;
|
|
1745
|
-
sm: string;
|
|
1746
|
-
md: string;
|
|
1747
|
-
lg: string;
|
|
1748
|
-
xl: string;
|
|
1749
|
-
};
|
|
1750
|
-
typography: {
|
|
1751
|
-
display: {
|
|
1752
|
-
'3xl': {
|
|
1753
|
-
fontFamily: string;
|
|
1754
|
-
fontWeight: string;
|
|
1755
|
-
fontSize: string;
|
|
1756
|
-
lineHeight: string;
|
|
1757
|
-
letterSpacing: string;
|
|
1758
|
-
fontFeatureSettings: string;
|
|
1759
|
-
};
|
|
1760
|
-
'2xl': {
|
|
1761
|
-
fontFamily: string;
|
|
1762
|
-
fontWeight: string;
|
|
1763
|
-
fontSize: string;
|
|
1764
|
-
lineHeight: string;
|
|
1765
|
-
letterSpacing: string;
|
|
1766
|
-
fontFeatureSettings: string;
|
|
1767
|
-
};
|
|
1768
|
-
xl: {
|
|
1769
|
-
fontFamily: string;
|
|
1770
|
-
fontWeight: string;
|
|
1771
|
-
fontSize: string;
|
|
1772
|
-
lineHeight: string;
|
|
1773
|
-
letterSpacing: string;
|
|
1774
|
-
fontFeatureSettings: string;
|
|
1775
|
-
};
|
|
1776
|
-
lg: {
|
|
1777
|
-
fontFamily: string;
|
|
1778
|
-
fontWeight: string;
|
|
1779
|
-
fontSize: string;
|
|
1780
|
-
lineHeight: string;
|
|
1781
|
-
letterSpacing: string;
|
|
1782
|
-
fontFeatureSettings: string;
|
|
1783
|
-
};
|
|
1784
|
-
md: {
|
|
1785
|
-
fontFamily: string;
|
|
1786
|
-
fontWeight: string;
|
|
1787
|
-
fontSize: string;
|
|
1788
|
-
lineHeight: string;
|
|
1789
|
-
letterSpacing: string;
|
|
1790
|
-
fontFeatureSettings: string;
|
|
1791
|
-
};
|
|
1792
|
-
sm: {
|
|
1793
|
-
fontFamily: string;
|
|
1794
|
-
fontWeight: string;
|
|
1795
|
-
fontSize: string;
|
|
1796
|
-
lineHeight: string;
|
|
1797
|
-
letterSpacing: string;
|
|
1798
|
-
fontFeatureSettings: string;
|
|
1799
|
-
};
|
|
1800
|
-
xs: {
|
|
1801
|
-
fontFamily: string;
|
|
1802
|
-
fontWeight: string;
|
|
1803
|
-
fontSize: string;
|
|
1804
|
-
lineHeight: string;
|
|
1805
|
-
letterSpacing: string;
|
|
1806
|
-
fontFeatureSettings: string;
|
|
1807
|
-
};
|
|
1808
|
-
'2xs': {
|
|
1809
|
-
fontFamily: string;
|
|
1810
|
-
fontWeight: string;
|
|
1811
|
-
fontSize: string;
|
|
1812
|
-
lineHeight: string;
|
|
1813
|
-
letterSpacing: string;
|
|
1814
|
-
fontFeatureSettings: string;
|
|
1815
|
-
};
|
|
1816
|
-
};
|
|
1817
|
-
title: {
|
|
1818
|
-
lg: {
|
|
1819
|
-
fontFamily: string;
|
|
1820
|
-
fontWeight: string;
|
|
1821
|
-
fontSize: string;
|
|
1822
|
-
lineHeight: string;
|
|
1823
|
-
letterSpacing: string;
|
|
1824
|
-
};
|
|
1825
|
-
md: {
|
|
1826
|
-
fontFamily: string;
|
|
1827
|
-
fontWeight: string;
|
|
1828
|
-
fontSize: string;
|
|
1829
|
-
lineHeight: string;
|
|
1830
|
-
letterSpacing: string;
|
|
1831
|
-
};
|
|
1832
|
-
sm: {
|
|
1833
|
-
fontFamily: string;
|
|
1834
|
-
fontWeight: string;
|
|
1835
|
-
fontSize: string;
|
|
1836
|
-
lineHeight: string;
|
|
1837
|
-
letterSpacing: string;
|
|
1838
|
-
};
|
|
1839
|
-
xs: {
|
|
1840
|
-
fontFamily: string;
|
|
1841
|
-
fontWeight: string;
|
|
1842
|
-
fontSize: string;
|
|
1843
|
-
lineHeight: string;
|
|
1844
|
-
letterSpacing: string;
|
|
1845
|
-
};
|
|
1846
|
-
'2xs': {
|
|
1847
|
-
fontFamily: string;
|
|
1848
|
-
fontWeight: string;
|
|
1849
|
-
fontSize: string;
|
|
1850
|
-
lineHeight: string;
|
|
1851
|
-
letterSpacing: string;
|
|
1852
|
-
};
|
|
1853
|
-
'3xs': {
|
|
1854
|
-
fontFamily: string;
|
|
1855
|
-
fontWeight: string;
|
|
1856
|
-
fontSize: string;
|
|
1857
|
-
lineHeight: string;
|
|
1858
|
-
letterSpacing: string;
|
|
1859
|
-
};
|
|
1860
|
-
};
|
|
1861
|
-
body: {
|
|
1862
|
-
xl: {
|
|
1863
|
-
fontFamily: string;
|
|
1864
|
-
fontWeight: string;
|
|
1865
|
-
fontSize: string;
|
|
1866
|
-
lineHeight: string;
|
|
1867
|
-
letterSpacing: string;
|
|
1868
|
-
};
|
|
1869
|
-
lg: {
|
|
1870
|
-
fontFamily: string;
|
|
1871
|
-
fontWeight: string;
|
|
1872
|
-
fontSize: string;
|
|
1873
|
-
lineHeight: string;
|
|
1874
|
-
letterSpacing: string;
|
|
1875
|
-
};
|
|
1876
|
-
md: {
|
|
1877
|
-
fontFamily: string;
|
|
1878
|
-
fontWeight: string;
|
|
1879
|
-
fontSize: string;
|
|
1880
|
-
lineHeight: string;
|
|
1881
|
-
letterSpacing: string;
|
|
1882
|
-
};
|
|
1883
|
-
sm: {
|
|
1884
|
-
fontFamily: string;
|
|
1885
|
-
fontWeight: string;
|
|
1886
|
-
fontSize: string;
|
|
1887
|
-
lineHeight: string;
|
|
1888
|
-
letterSpacing: string;
|
|
1889
|
-
};
|
|
1890
|
-
xs: {
|
|
1891
|
-
fontFamily: string;
|
|
1892
|
-
fontWeight: string;
|
|
1893
|
-
fontSize: string;
|
|
1894
|
-
lineHeight: string;
|
|
1895
|
-
letterSpacing: string;
|
|
1896
|
-
};
|
|
1897
|
-
};
|
|
1898
|
-
label: {
|
|
1899
|
-
md: {
|
|
1900
|
-
fontFamily: string;
|
|
1901
|
-
fontWeight: string;
|
|
1902
|
-
fontSize: string;
|
|
1903
|
-
lineHeight: string;
|
|
1904
|
-
letterSpacing: string;
|
|
1905
|
-
};
|
|
1906
|
-
sm: {
|
|
1907
|
-
fontFamily: string;
|
|
1908
|
-
fontWeight: string;
|
|
1909
|
-
fontSize: string;
|
|
1910
|
-
lineHeight: string;
|
|
1911
|
-
letterSpacing: string;
|
|
1912
|
-
};
|
|
1913
|
-
};
|
|
1914
|
-
button: {
|
|
1915
|
-
md: {
|
|
1916
|
-
fontFamily: string;
|
|
1917
|
-
fontWeight: string;
|
|
1918
|
-
fontSize: string;
|
|
1919
|
-
lineHeight: string;
|
|
1920
|
-
letterSpacing: string;
|
|
1921
|
-
};
|
|
1922
|
-
sm: {
|
|
1923
|
-
fontFamily: string;
|
|
1924
|
-
fontWeight: string;
|
|
1925
|
-
fontSize: string;
|
|
1926
|
-
lineHeight: string;
|
|
1927
|
-
letterSpacing: string;
|
|
1928
|
-
};
|
|
1929
|
-
};
|
|
1930
|
-
caption: {
|
|
1931
|
-
md: {
|
|
1932
|
-
fontFamily: string;
|
|
1933
|
-
fontWeight: string;
|
|
1934
|
-
fontSize: string;
|
|
1935
|
-
lineHeight: string;
|
|
1936
|
-
letterSpacing: string;
|
|
1937
|
-
};
|
|
1938
|
-
sm: {
|
|
1939
|
-
fontFamily: string;
|
|
1940
|
-
fontWeight: string;
|
|
1941
|
-
fontSize: string;
|
|
1942
|
-
lineHeight: string;
|
|
1943
|
-
letterSpacing: string;
|
|
1944
|
-
};
|
|
1945
|
-
};
|
|
1946
|
-
};
|
|
1947
|
-
}) => {
|
|
1948
|
-
xs: {
|
|
1949
|
-
fontFamily: string;
|
|
1950
|
-
fontWeight: string;
|
|
1951
|
-
fontSize: string;
|
|
1952
|
-
lineHeight: string;
|
|
1953
|
-
letterSpacing: string;
|
|
1954
|
-
height: string;
|
|
1955
|
-
paddingLeft: string;
|
|
1956
|
-
paddingRight: string;
|
|
1957
|
-
};
|
|
1958
|
-
sm: {
|
|
1959
|
-
fontFamily: string;
|
|
1960
|
-
fontWeight: string;
|
|
1961
|
-
fontSize: string;
|
|
1962
|
-
lineHeight: string;
|
|
1963
|
-
letterSpacing: string;
|
|
1964
|
-
height: string;
|
|
1965
|
-
paddingLeft: string;
|
|
1966
|
-
paddingRight: string;
|
|
1967
|
-
};
|
|
1968
|
-
md: {
|
|
1969
|
-
fontFamily: string;
|
|
1970
|
-
fontWeight: string;
|
|
1971
|
-
fontSize: string;
|
|
1972
|
-
lineHeight: string;
|
|
1973
|
-
letterSpacing: string;
|
|
1974
|
-
height: string;
|
|
1975
|
-
paddingLeft: string;
|
|
1976
|
-
paddingRight: string;
|
|
1977
|
-
};
|
|
1978
|
-
lg: {
|
|
1979
|
-
fontFamily: string;
|
|
1980
|
-
fontWeight: string;
|
|
1981
|
-
fontSize: string;
|
|
1982
|
-
lineHeight: string;
|
|
1983
|
-
letterSpacing: string;
|
|
1984
|
-
height: string;
|
|
1985
|
-
paddingLeft: string;
|
|
1986
|
-
paddingRight: string;
|
|
1987
|
-
};
|
|
1988
|
-
xl: {
|
|
1989
|
-
fontFamily: string;
|
|
1990
|
-
fontWeight: string;
|
|
1991
|
-
fontSize: string;
|
|
1992
|
-
lineHeight: string;
|
|
1993
|
-
letterSpacing: string;
|
|
1994
|
-
height: string;
|
|
1995
|
-
paddingLeft: string;
|
|
1996
|
-
paddingRight: string;
|
|
1997
|
-
};
|
|
1998
|
-
};
|
|
1999
|
-
type ButtonSize = VariantProps<typeof getSizeStyles$4>;
|
|
2000
|
-
declare const getVariantStyles$1: (theme: {
|
|
2001
|
-
mediaQueries: {
|
|
2002
|
-
readonly smUp: "@media(min-width: 480px)";
|
|
2003
|
-
readonly mdUp: "@media(min-width: 768px)";
|
|
2004
|
-
readonly lgUp: "@media(min-width: 1024px)";
|
|
2005
|
-
readonly xlUp: "@media(min-width: 1280px)";
|
|
2006
|
-
readonly '2xlUp': "@media(min-width: 1536px)";
|
|
2007
|
-
};
|
|
2008
|
-
spacing: {
|
|
2009
|
-
'0x': string;
|
|
2010
|
-
'1x': string;
|
|
2011
|
-
'2x': string;
|
|
2012
|
-
'3x': string;
|
|
2013
|
-
'4x': string;
|
|
2014
|
-
'5x': string;
|
|
2015
|
-
'6x': string;
|
|
2016
|
-
'8x': string;
|
|
2017
|
-
'10x': string;
|
|
2018
|
-
'12x': string;
|
|
2019
|
-
'14x': string;
|
|
2020
|
-
'16x': string;
|
|
2021
|
-
'20x': string;
|
|
2022
|
-
'24x': string;
|
|
2023
|
-
};
|
|
2024
|
-
breakpoints: {
|
|
2025
|
-
readonly base: 0;
|
|
2026
|
-
readonly sm: 480;
|
|
2027
|
-
readonly md: 768;
|
|
2028
|
-
readonly lg: 1024;
|
|
2029
|
-
readonly xl: 1280;
|
|
2030
|
-
readonly '2xl': 1536;
|
|
2031
|
-
};
|
|
2032
|
-
zIndices: {
|
|
2033
|
-
hide: number;
|
|
2034
|
-
auto: string;
|
|
2035
|
-
base: number;
|
|
2036
|
-
docked: number;
|
|
2037
|
-
dropdown: number;
|
|
2038
|
-
sticky: number;
|
|
2039
|
-
banner: number;
|
|
2040
|
-
overlay: number;
|
|
2041
|
-
modal: number;
|
|
2042
|
-
popover: number;
|
|
2043
|
-
skipLink: number;
|
|
2044
|
-
toast: number;
|
|
2045
|
-
tooltip: number;
|
|
2046
|
-
};
|
|
2047
|
-
colors: {
|
|
2048
|
-
core: {
|
|
2049
|
-
black: string;
|
|
2050
|
-
white: string;
|
|
2051
|
-
gray90: string;
|
|
2052
|
-
gray80: string;
|
|
2053
|
-
gray70: string;
|
|
2054
|
-
gray60: string;
|
|
2055
|
-
gray50: string;
|
|
2056
|
-
gray40: string;
|
|
2057
|
-
gray30: string;
|
|
2058
|
-
gray20: string;
|
|
2059
|
-
gray10: string;
|
|
2060
|
-
pink: string;
|
|
2061
|
-
uiPink: string;
|
|
2062
|
-
uiPinkDark: string;
|
|
2063
|
-
uiPinkLight: string;
|
|
2064
|
-
brown: string;
|
|
2065
|
-
brownDark: string;
|
|
2066
|
-
brownLight: string;
|
|
2067
|
-
offWhite: string;
|
|
2068
|
-
offWhiteDark: string;
|
|
2069
|
-
offWhiteLight: string;
|
|
2070
|
-
softPink: string;
|
|
2071
|
-
warmYellow: string;
|
|
2072
|
-
softYellow: string;
|
|
2073
|
-
red90: string;
|
|
2074
|
-
red80: string;
|
|
2075
|
-
red70: string;
|
|
2076
|
-
red60: string;
|
|
2077
|
-
red50: string;
|
|
2078
|
-
red40: string;
|
|
2079
|
-
red30: string;
|
|
2080
|
-
red20: string;
|
|
2081
|
-
red10: string;
|
|
2082
|
-
green90: string;
|
|
2083
|
-
green80: string;
|
|
2084
|
-
green70: string;
|
|
2085
|
-
green60: string;
|
|
2086
|
-
green50: string;
|
|
2087
|
-
green40: string;
|
|
2088
|
-
green30: string;
|
|
2089
|
-
green20: string;
|
|
2090
|
-
green10: string;
|
|
2091
|
-
blue90: string;
|
|
2092
|
-
blue80: string;
|
|
2093
|
-
blue70: string;
|
|
2094
|
-
blue60: string;
|
|
2095
|
-
blue50: string;
|
|
2096
|
-
blue40: string;
|
|
2097
|
-
blue30: string;
|
|
2098
|
-
blue20: string;
|
|
2099
|
-
blue10: string;
|
|
2100
|
-
yellow90: string;
|
|
2101
|
-
yellow80: string;
|
|
2102
|
-
yellow70: string;
|
|
2103
|
-
yellow60: string;
|
|
2104
|
-
yellow50: string;
|
|
2105
|
-
yellow40: string;
|
|
2106
|
-
yellow30: string;
|
|
2107
|
-
yellow20: string;
|
|
2108
|
-
yellow10: string;
|
|
2109
|
-
blackAlpha5: string;
|
|
2110
|
-
blackAlpha10: string;
|
|
2111
|
-
blackAlpha20: string;
|
|
2112
|
-
};
|
|
2113
|
-
bg: {
|
|
2114
|
-
default: string;
|
|
2115
|
-
brandPrimary: string;
|
|
2116
|
-
brandPrimaryHover: string;
|
|
2117
|
-
brandPrimaryActive: string;
|
|
2118
|
-
brandSecondary: string;
|
|
2119
|
-
brandSecondaryHover: string;
|
|
2120
|
-
brandSecondaryActive: string;
|
|
2121
|
-
brandTertiary: string;
|
|
2122
|
-
brandTertiaryHover: string;
|
|
2123
|
-
brandTertiaryActive: string;
|
|
2124
|
-
negative: string;
|
|
2125
|
-
warning: string;
|
|
2126
|
-
positive: string;
|
|
2127
|
-
inset: string;
|
|
2128
|
-
backdrop: string;
|
|
2129
|
-
};
|
|
2130
|
-
text: {
|
|
2131
|
-
strong: string;
|
|
2132
|
-
default: string;
|
|
2133
|
-
subtle: string;
|
|
2134
|
-
disabled: string;
|
|
2135
|
-
negative: string;
|
|
2136
|
-
warning: string;
|
|
2137
|
-
positive: string;
|
|
2138
|
-
onBrandPrimary: string;
|
|
2139
|
-
onBrandSecondary: string;
|
|
2140
|
-
onBrandTertiary: string;
|
|
2141
|
-
};
|
|
2142
|
-
icon: {
|
|
2143
|
-
default: string;
|
|
2144
|
-
strong: string;
|
|
2145
|
-
subtle: string;
|
|
2146
|
-
disabled: string;
|
|
2147
|
-
negative: string;
|
|
2148
|
-
warning: string;
|
|
2149
|
-
positive: string;
|
|
2150
|
-
onBrandPrimary: string;
|
|
2151
|
-
onBrandSecondary: string;
|
|
2152
|
-
onBrandTertiary: string;
|
|
2153
|
-
};
|
|
2154
|
-
border: {
|
|
2155
|
-
default: string;
|
|
2156
|
-
defaultHover: string;
|
|
2157
|
-
defaultSelected: string;
|
|
2158
|
-
strong: string;
|
|
2159
|
-
subtle: string;
|
|
2160
|
-
negative: string;
|
|
2161
|
-
warning: string;
|
|
2162
|
-
positive: string;
|
|
2163
|
-
};
|
|
2164
|
-
};
|
|
2165
|
-
sizes: {
|
|
2166
|
-
112: string;
|
|
2167
|
-
128: string;
|
|
2168
|
-
144: string;
|
|
2169
|
-
160: string;
|
|
2170
|
-
176: string;
|
|
2171
|
-
192: string;
|
|
2172
|
-
224: string;
|
|
2173
|
-
256: string;
|
|
2174
|
-
288: string;
|
|
2175
|
-
320: string;
|
|
2176
|
-
384: string;
|
|
2177
|
-
448: string;
|
|
2178
|
-
512: string;
|
|
2179
|
-
576: string;
|
|
2180
|
-
672: string;
|
|
2181
|
-
768: string;
|
|
2182
|
-
896: string;
|
|
2183
|
-
1024: string;
|
|
2184
|
-
'0x': string;
|
|
2185
|
-
'1x': string;
|
|
2186
|
-
'2x': string;
|
|
2187
|
-
'3x': string;
|
|
2188
|
-
'4x': string;
|
|
2189
|
-
'5x': string;
|
|
2190
|
-
'6x': string;
|
|
2191
|
-
'8x': string;
|
|
2192
|
-
'10x': string;
|
|
2193
|
-
'12x': string;
|
|
2194
|
-
'14x': string;
|
|
2195
|
-
'16x': string;
|
|
2196
|
-
'20x': string;
|
|
2197
|
-
'24x': string;
|
|
2198
|
-
};
|
|
2199
|
-
radii: {
|
|
2200
|
-
none: string;
|
|
2201
|
-
'2xs': string;
|
|
2202
|
-
xs: string;
|
|
2203
|
-
sm: string;
|
|
2204
|
-
md: string;
|
|
2205
|
-
lg: string;
|
|
2206
|
-
xl: string;
|
|
2207
|
-
'2xl': string;
|
|
2208
|
-
full: string;
|
|
2209
|
-
};
|
|
2210
|
-
shadows: {
|
|
2211
|
-
none: string;
|
|
2212
|
-
sm: string;
|
|
2213
|
-
md: string;
|
|
2214
|
-
lg: string;
|
|
2215
|
-
xl: string;
|
|
2216
|
-
};
|
|
2217
|
-
typography: {
|
|
2218
|
-
display: {
|
|
2219
|
-
'3xl': {
|
|
2220
|
-
fontFamily: string;
|
|
2221
|
-
fontWeight: string;
|
|
2222
|
-
fontSize: string;
|
|
2223
|
-
lineHeight: string;
|
|
2224
|
-
letterSpacing: string;
|
|
2225
|
-
fontFeatureSettings: string;
|
|
2226
|
-
};
|
|
2227
|
-
'2xl': {
|
|
2228
|
-
fontFamily: string;
|
|
2229
|
-
fontWeight: string;
|
|
2230
|
-
fontSize: string;
|
|
2231
|
-
lineHeight: string;
|
|
2232
|
-
letterSpacing: string;
|
|
2233
|
-
fontFeatureSettings: string;
|
|
2234
|
-
};
|
|
2235
|
-
xl: {
|
|
2236
|
-
fontFamily: string;
|
|
2237
|
-
fontWeight: string;
|
|
2238
|
-
fontSize: string;
|
|
2239
|
-
lineHeight: string;
|
|
2240
|
-
letterSpacing: string;
|
|
2241
|
-
fontFeatureSettings: string;
|
|
2242
|
-
};
|
|
2243
|
-
lg: {
|
|
2244
|
-
fontFamily: string;
|
|
2245
|
-
fontWeight: string;
|
|
2246
|
-
fontSize: string;
|
|
2247
|
-
lineHeight: string;
|
|
2248
|
-
letterSpacing: string;
|
|
2249
|
-
fontFeatureSettings: string;
|
|
2250
|
-
};
|
|
2251
|
-
md: {
|
|
2252
|
-
fontFamily: string;
|
|
2253
|
-
fontWeight: string;
|
|
2254
|
-
fontSize: string;
|
|
2255
|
-
lineHeight: string;
|
|
2256
|
-
letterSpacing: string;
|
|
2257
|
-
fontFeatureSettings: string;
|
|
2258
|
-
};
|
|
2259
|
-
sm: {
|
|
2260
|
-
fontFamily: string;
|
|
2261
|
-
fontWeight: string;
|
|
2262
|
-
fontSize: string;
|
|
2263
|
-
lineHeight: string;
|
|
2264
|
-
letterSpacing: string;
|
|
2265
|
-
fontFeatureSettings: string;
|
|
2266
|
-
};
|
|
2267
|
-
xs: {
|
|
2268
|
-
fontFamily: string;
|
|
2269
|
-
fontWeight: string;
|
|
2270
|
-
fontSize: string;
|
|
2271
|
-
lineHeight: string;
|
|
2272
|
-
letterSpacing: string;
|
|
2273
|
-
fontFeatureSettings: string;
|
|
2274
|
-
};
|
|
2275
|
-
'2xs': {
|
|
2276
|
-
fontFamily: string;
|
|
2277
|
-
fontWeight: string;
|
|
2278
|
-
fontSize: string;
|
|
2279
|
-
lineHeight: string;
|
|
2280
|
-
letterSpacing: string;
|
|
2281
|
-
fontFeatureSettings: string;
|
|
2282
|
-
};
|
|
2283
|
-
};
|
|
2284
|
-
title: {
|
|
2285
|
-
lg: {
|
|
2286
|
-
fontFamily: string;
|
|
2287
|
-
fontWeight: string;
|
|
2288
|
-
fontSize: string;
|
|
2289
|
-
lineHeight: string;
|
|
2290
|
-
letterSpacing: string;
|
|
2291
|
-
};
|
|
2292
|
-
md: {
|
|
2293
|
-
fontFamily: string;
|
|
2294
|
-
fontWeight: string;
|
|
2295
|
-
fontSize: string;
|
|
2296
|
-
lineHeight: string;
|
|
2297
|
-
letterSpacing: string;
|
|
2298
|
-
};
|
|
2299
|
-
sm: {
|
|
2300
|
-
fontFamily: string;
|
|
2301
|
-
fontWeight: string;
|
|
2302
|
-
fontSize: string;
|
|
2303
|
-
lineHeight: string;
|
|
2304
|
-
letterSpacing: string;
|
|
2305
|
-
};
|
|
2306
|
-
xs: {
|
|
2307
|
-
fontFamily: string;
|
|
2308
|
-
fontWeight: string;
|
|
2309
|
-
fontSize: string;
|
|
2310
|
-
lineHeight: string;
|
|
2311
|
-
letterSpacing: string;
|
|
2312
|
-
};
|
|
2313
|
-
'2xs': {
|
|
2314
|
-
fontFamily: string;
|
|
2315
|
-
fontWeight: string;
|
|
2316
|
-
fontSize: string;
|
|
2317
|
-
lineHeight: string;
|
|
2318
|
-
letterSpacing: string;
|
|
2319
|
-
};
|
|
2320
|
-
'3xs': {
|
|
2321
|
-
fontFamily: string;
|
|
2322
|
-
fontWeight: string;
|
|
2323
|
-
fontSize: string;
|
|
2324
|
-
lineHeight: string;
|
|
2325
|
-
letterSpacing: string;
|
|
2326
|
-
};
|
|
2327
|
-
};
|
|
2328
|
-
body: {
|
|
2329
|
-
xl: {
|
|
2330
|
-
fontFamily: string;
|
|
2331
|
-
fontWeight: string;
|
|
2332
|
-
fontSize: string;
|
|
2333
|
-
lineHeight: string;
|
|
2334
|
-
letterSpacing: string;
|
|
2335
|
-
};
|
|
2336
|
-
lg: {
|
|
2337
|
-
fontFamily: string;
|
|
2338
|
-
fontWeight: string;
|
|
2339
|
-
fontSize: string;
|
|
2340
|
-
lineHeight: string;
|
|
2341
|
-
letterSpacing: string;
|
|
2342
|
-
};
|
|
2343
|
-
md: {
|
|
2344
|
-
fontFamily: string;
|
|
2345
|
-
fontWeight: string;
|
|
2346
|
-
fontSize: string;
|
|
2347
|
-
lineHeight: string;
|
|
2348
|
-
letterSpacing: string;
|
|
2349
|
-
};
|
|
2350
|
-
sm: {
|
|
2351
|
-
fontFamily: string;
|
|
2352
|
-
fontWeight: string;
|
|
2353
|
-
fontSize: string;
|
|
2354
|
-
lineHeight: string;
|
|
2355
|
-
letterSpacing: string;
|
|
2356
|
-
};
|
|
2357
|
-
xs: {
|
|
2358
|
-
fontFamily: string;
|
|
2359
|
-
fontWeight: string;
|
|
2360
|
-
fontSize: string;
|
|
2361
|
-
lineHeight: string;
|
|
2362
|
-
letterSpacing: string;
|
|
2363
|
-
};
|
|
2364
|
-
};
|
|
2365
|
-
label: {
|
|
2366
|
-
md: {
|
|
2367
|
-
fontFamily: string;
|
|
2368
|
-
fontWeight: string;
|
|
2369
|
-
fontSize: string;
|
|
2370
|
-
lineHeight: string;
|
|
2371
|
-
letterSpacing: string;
|
|
2372
|
-
};
|
|
2373
|
-
sm: {
|
|
2374
|
-
fontFamily: string;
|
|
2375
|
-
fontWeight: string;
|
|
2376
|
-
fontSize: string;
|
|
2377
|
-
lineHeight: string;
|
|
2378
|
-
letterSpacing: string;
|
|
2379
|
-
};
|
|
2380
|
-
};
|
|
2381
|
-
button: {
|
|
2382
|
-
md: {
|
|
2383
|
-
fontFamily: string;
|
|
2384
|
-
fontWeight: string;
|
|
2385
|
-
fontSize: string;
|
|
2386
|
-
lineHeight: string;
|
|
2387
|
-
letterSpacing: string;
|
|
2388
|
-
};
|
|
2389
|
-
sm: {
|
|
2390
|
-
fontFamily: string;
|
|
2391
|
-
fontWeight: string;
|
|
2392
|
-
fontSize: string;
|
|
2393
|
-
lineHeight: string;
|
|
2394
|
-
letterSpacing: string;
|
|
2395
|
-
};
|
|
2396
|
-
};
|
|
2397
|
-
caption: {
|
|
2398
|
-
md: {
|
|
2399
|
-
fontFamily: string;
|
|
2400
|
-
fontWeight: string;
|
|
2401
|
-
fontSize: string;
|
|
2402
|
-
lineHeight: string;
|
|
2403
|
-
letterSpacing: string;
|
|
2404
|
-
};
|
|
2405
|
-
sm: {
|
|
2406
|
-
fontFamily: string;
|
|
2407
|
-
fontWeight: string;
|
|
2408
|
-
fontSize: string;
|
|
2409
|
-
lineHeight: string;
|
|
2410
|
-
letterSpacing: string;
|
|
2411
|
-
};
|
|
2412
|
-
};
|
|
2413
|
-
};
|
|
2414
|
-
}) => {
|
|
2415
|
-
primary: {
|
|
2416
|
-
background: string;
|
|
2417
|
-
color: string;
|
|
2418
|
-
":not([disabled])": {
|
|
2419
|
-
'@media(hover: hover)': {
|
|
2420
|
-
':hover': {
|
|
2421
|
-
background: string;
|
|
2422
|
-
};
|
|
2423
|
-
};
|
|
2424
|
-
':active': {
|
|
2425
|
-
background: string;
|
|
2426
|
-
};
|
|
2427
|
-
};
|
|
2428
|
-
};
|
|
2429
|
-
secondary: {
|
|
2430
|
-
background: string;
|
|
2431
|
-
color: string;
|
|
2432
|
-
":not([disabled])": {
|
|
2433
|
-
'@media(hover: hover)': {
|
|
2434
|
-
':hover': {
|
|
2435
|
-
background: string;
|
|
2436
|
-
};
|
|
2437
|
-
};
|
|
2438
|
-
':active': {
|
|
2439
|
-
background: string;
|
|
2440
|
-
};
|
|
2441
|
-
};
|
|
2442
|
-
};
|
|
2443
|
-
tertiary: {
|
|
2444
|
-
background: string;
|
|
2445
|
-
color: string;
|
|
2446
|
-
":not([disabled])": {
|
|
2447
|
-
'@media(hover: hover)': {
|
|
2448
|
-
':hover': {
|
|
2449
|
-
background: string;
|
|
2450
|
-
};
|
|
2451
|
-
};
|
|
2452
|
-
':active': {
|
|
2453
|
-
background: string;
|
|
2454
|
-
};
|
|
2455
|
-
};
|
|
2456
|
-
};
|
|
2457
|
-
};
|
|
2458
|
-
type ButtonVariant = VariantProps<typeof getVariantStyles$1>;
|
|
2459
|
-
|
|
2460
|
-
interface ButtonOptions {
|
|
2461
|
-
/**
|
|
2462
|
-
* Sets the size of the button
|
|
2463
|
-
* @default 'md'
|
|
2464
|
-
*/
|
|
2465
|
-
size?: ResponsiveProp<ButtonSize>;
|
|
2466
|
-
/**
|
|
2467
|
-
* Sets the style variant of the button
|
|
2468
|
-
* @default 'secondary'
|
|
2469
|
-
*/
|
|
2470
|
-
variant?: ButtonVariant;
|
|
2471
|
-
/**
|
|
2472
|
-
* If `true` the button will fill its container
|
|
2473
|
-
* @default false
|
|
2474
|
-
*/
|
|
2475
|
-
isFullWidth?: boolean;
|
|
2476
|
-
/**
|
|
2477
|
-
* If `true` the button will show a spinner
|
|
2478
|
-
* @default false
|
|
2479
|
-
*/
|
|
2480
|
-
isLoading?: boolean;
|
|
2481
|
-
/**
|
|
2482
|
-
* If `true` the button will be disabled
|
|
2483
|
-
* @default false
|
|
2484
|
-
*/
|
|
2485
|
-
isDisabled?: boolean;
|
|
2486
|
-
/**
|
|
2487
|
-
* Icon to display before the button label
|
|
2488
|
-
*/
|
|
2489
|
-
iconLeft?: ElementType<IconProps>;
|
|
2490
|
-
/**
|
|
2491
|
-
* Icon to display after the button label
|
|
2492
|
-
*/
|
|
2493
|
-
iconRight?: ElementType<IconProps>;
|
|
2494
|
-
/**
|
|
2495
|
-
* The HTML `type` attribute
|
|
2496
|
-
* @default 'button'
|
|
2497
|
-
*/
|
|
2498
|
-
type?: 'button' | 'submit' | 'reset';
|
|
2499
|
-
}
|
|
2500
|
-
|
|
2501
|
-
type PolymorphicButton = ForwardRefComponent<'button', ButtonOptions>;
|
|
2502
|
-
type ButtonProps = PropsOf<PolymorphicButton>;
|
|
2503
|
-
declare const Button: PolymorphicButton;
|
|
2504
|
-
|
|
2505
|
-
type DisplaySize = keyof Theme['typography']['display'];
|
|
2506
|
-
type DisplayTextAlign = 'left' | 'center' | 'right';
|
|
2507
|
-
type DisplayTextWrap = 'pretty' | 'balance' | 'wrap' | 'nowrap' | 'stable';
|
|
2508
|
-
interface DisplayTextOptions {
|
|
2509
|
-
/**
|
|
2510
|
-
* Sets the visual size of the display text.
|
|
2511
|
-
* To override the rendered tag, use the `as` prop.
|
|
2512
|
-
*
|
|
2513
|
-
* @default 'md'
|
|
2514
|
-
*/
|
|
2515
|
-
size?: ResponsiveProp<DisplaySize>;
|
|
2516
|
-
/**
|
|
2517
|
-
* Sets the text alignment
|
|
2518
|
-
* @default 'left'
|
|
2519
|
-
*/
|
|
2520
|
-
textAlign?: DisplayTextAlign;
|
|
2521
|
-
/**
|
|
2522
|
-
* Sets the text wrapping
|
|
2523
|
-
* @default 'pretty'
|
|
2524
|
-
* Read more on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap)
|
|
2525
|
-
*/
|
|
2526
|
-
textWrap?: DisplayTextWrap;
|
|
2527
|
-
}
|
|
2528
|
-
type DisplayTextComponent = ForwardRefComponent<'h2', DisplayTextOptions>;
|
|
2529
|
-
type DisplayTextProps = PropsOf<DisplayTextComponent>;
|
|
2530
|
-
declare const DisplayText: DisplayTextComponent;
|
|
2531
|
-
|
|
2532
|
-
interface CheckboxOptions {
|
|
2533
|
-
/**
|
|
2534
|
-
* The label for the checkbox. Accepts a string, or a React component for rendering links within the label.
|
|
2535
|
-
*
|
|
2536
|
-
* @example
|
|
2537
|
-
* ```jsx
|
|
2538
|
-
* <Checkbox label="I agree to the terms and conditions" />
|
|
2539
|
-
* ```
|
|
2540
|
-
*
|
|
2541
|
-
* @example
|
|
2542
|
-
* ```jsx
|
|
2543
|
-
* <Checkbox
|
|
2544
|
-
* label={
|
|
2545
|
-
* <>
|
|
2546
|
-
* I agree to <Link href="/terms">the terms and conditions</Link>
|
|
2547
|
-
* </>
|
|
2548
|
-
* }
|
|
2549
|
-
* />
|
|
2550
|
-
* ```
|
|
2551
|
-
*/
|
|
2552
|
-
label: string | ReactElement<unknown>;
|
|
2553
|
-
/**
|
|
2554
|
-
* Text that provides additional guidance to the user
|
|
2555
|
-
*/
|
|
2556
|
-
helperText?: string;
|
|
2557
|
-
/**
|
|
2558
|
-
* The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
|
|
2559
|
-
*/
|
|
2560
|
-
isDefaultChecked?: boolean;
|
|
2561
|
-
/**
|
|
2562
|
-
* The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
|
|
2563
|
-
*/
|
|
2564
|
-
defaultChecked?: boolean;
|
|
2565
|
-
/**
|
|
2566
|
-
* The controlled checked state of the checkbox. Must be used in conjunction with `onCheckedChange`.
|
|
2567
|
-
*/
|
|
2568
|
-
isChecked?: boolean;
|
|
2569
|
-
/**
|
|
2570
|
-
* The controlled checked state of the checkbox. Must be used in conjunction with `onCheckedChange`.
|
|
2571
|
-
*/
|
|
2572
|
-
checked?: boolean;
|
|
2573
|
-
/**
|
|
2574
|
-
* Event handler called when the checked state of the checkbox changes.
|
|
2575
|
-
*/
|
|
2576
|
-
onCheckedChange?: (checked: boolean) => void;
|
|
2577
|
-
/**
|
|
2578
|
-
* If `true` the checkbox will render in its invalid state.
|
|
2579
|
-
* @default false
|
|
2580
|
-
*/
|
|
2581
|
-
isInvalid?: boolean;
|
|
2582
|
-
/**
|
|
2583
|
-
* The error message to display if `isInvalid` is `true`
|
|
2584
|
-
*/
|
|
2585
|
-
errorMessage?: string;
|
|
2586
|
-
/**
|
|
2587
|
-
* If `true` it prevents the user from interacting with the checkbox.
|
|
2588
|
-
* @default false
|
|
2589
|
-
*/
|
|
2590
|
-
isDisabled?: boolean;
|
|
2591
|
-
/**
|
|
2592
|
-
* If `true` the user must check the checkbox before the owning form can be submitted.
|
|
2593
|
-
* @default false
|
|
2594
|
-
*/
|
|
2595
|
-
isRequired?: boolean;
|
|
2596
|
-
/**
|
|
2597
|
-
* The name of the checkbox. Submitted with its owning form as part of a name/value pair.
|
|
2598
|
-
*/
|
|
2599
|
-
name?: string;
|
|
2600
|
-
/**
|
|
2601
|
-
* The value given as data when submitted with a `name`.
|
|
2602
|
-
*/
|
|
2603
|
-
value?: string;
|
|
2604
|
-
}
|
|
2605
|
-
type CheckboxProps = Omit<CheckboxPrimitive.CheckboxProps, 'asChild' | 'children' | 'checked' | 'defaultChecked' | keyof CheckboxOptions> & CheckboxOptions;
|
|
2606
|
-
declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps, "children" | "asChild" | keyof CheckboxOptions> & CheckboxOptions & react.RefAttributes<HTMLButtonElement>>;
|
|
2607
|
-
|
|
2608
|
-
interface DividerOptions {
|
|
2609
|
-
/**
|
|
2610
|
-
* The orientation of the divider.
|
|
2611
|
-
*
|
|
2612
|
-
* @default 'horizontal'
|
|
2613
|
-
*/
|
|
2614
|
-
orientation?: 'horizontal' | 'vertical';
|
|
2615
|
-
}
|
|
2616
|
-
interface DividerProps extends HTMLQdsProps<'span'>, DividerOptions {
|
|
2617
|
-
}
|
|
2618
|
-
declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
|
|
2619
|
-
|
|
2620
|
-
type PrimitiveContentProps = DropdownPrimitive.DropdownMenuContentProps;
|
|
2621
|
-
interface DropdownMenuContentOptions {
|
|
2622
|
-
/**
|
|
2623
|
-
* Event handler called when focus moves to the trigger after closing.
|
|
2624
|
-
* It can be prevented by calling `event.preventDefault`.
|
|
2625
|
-
*/
|
|
2626
|
-
onCloseAutofocus?: PrimitiveContentProps['onCloseAutoFocus'];
|
|
2627
|
-
/**
|
|
2628
|
-
* Event handler called when the escape key is down.
|
|
2629
|
-
* It can be prevented by calling `event.preventDefault`.
|
|
2630
|
-
*/
|
|
2631
|
-
onEscapeKeyDown?: PrimitiveContentProps['onEscapeKeyDown'];
|
|
2632
|
-
/**
|
|
2633
|
-
* Event handler called when a pointer event occurs outside the bounds of the component.
|
|
2634
|
-
* It can be prevented by calling `event.preventDefault`.
|
|
2635
|
-
*/
|
|
2636
|
-
onPointerDownOutside?: PrimitiveContentProps['onPointerDownOutside'];
|
|
2637
|
-
/**
|
|
2638
|
-
* Event handler called when focus moves outside the bounds of the component.
|
|
2639
|
-
* It can be prevented by calling `event.preventDefault`.
|
|
2640
|
-
*/
|
|
2641
|
-
onFocusOutside?: PrimitiveContentProps['onFocusOutside'];
|
|
2642
|
-
/**
|
|
2643
|
-
* Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component.
|
|
2644
|
-
* It can be prevented by calling `event.preventDefault`.
|
|
2645
|
-
*/
|
|
2646
|
-
onInteractOutside?: PrimitiveContentProps['onInteractOutside'];
|
|
2647
|
-
/**
|
|
2648
|
-
* The preferred side of the trigger to render against when open.
|
|
2649
|
-
* Will be reversed when collisions occur and `avoidCollisions` is enabled.
|
|
2650
|
-
*
|
|
2651
|
-
* @default "bottom"
|
|
2652
|
-
*/
|
|
2653
|
-
side?: PrimitiveContentProps['side'];
|
|
2654
|
-
/**
|
|
2655
|
-
* The distance in pixels from the trigger.
|
|
2656
|
-
*
|
|
2657
|
-
* @default 8
|
|
2658
|
-
*/
|
|
2659
|
-
sideOffset?: PrimitiveContentProps['sideOffset'];
|
|
2660
|
-
/**
|
|
2661
|
-
* The preferred alignment against the trigger. May change when collisions occur.
|
|
2662
|
-
*
|
|
2663
|
-
* @default "center"
|
|
2664
|
-
*/
|
|
2665
|
-
align?: PrimitiveContentProps['align'];
|
|
2666
|
-
/**
|
|
2667
|
-
* The element used as the collision boundary.
|
|
2668
|
-
* By default this is the viewport, though you can provide additional element(s) to be included in this check.
|
|
2669
|
-
*
|
|
2670
|
-
* @default []
|
|
2671
|
-
*/
|
|
2672
|
-
collisionBoundary?: PrimitiveContentProps['collisionBoundary'];
|
|
2673
|
-
/**
|
|
2674
|
-
* Whether to hide the content when the trigger becomes fully occluded.
|
|
2675
|
-
*
|
|
2676
|
-
* @default false
|
|
2677
|
-
*/
|
|
2678
|
-
hideWhenDetached?: PrimitiveContentProps['hideWhenDetached'];
|
|
2679
|
-
}
|
|
2680
|
-
interface DropdownMenuContentProps extends HTMLQdsProps<'div'>, DropdownMenuContentOptions {
|
|
2681
|
-
}
|
|
2682
|
-
|
|
2683
|
-
type DropdownMenuDividerProps = HTMLQdsProps<'div'>;
|
|
2684
|
-
|
|
2685
|
-
interface DropdownMenuItemOptions {
|
|
2686
|
-
/**
|
|
2687
|
-
* If `true`, the item will be disabled
|
|
2688
|
-
*/
|
|
2689
|
-
isDisabled?: boolean;
|
|
2690
|
-
/**
|
|
2691
|
-
* Event handler called when the user selects an item (via mouse or keyboard).
|
|
2692
|
-
* Calling `event.preventDefault` in this handler will prevent the dropdown from closing when selecting that item.
|
|
2693
|
-
*/
|
|
2694
|
-
onSelect?: (event: Event) => void;
|
|
2695
|
-
/**
|
|
2696
|
-
* Optional text used for typeahead purposes.
|
|
2697
|
-
* By default the typeahead behavior will use the `.textContent` of the item.
|
|
2698
|
-
* Use this when the content is complex, or you have non-textual content inside.
|
|
2699
|
-
*/
|
|
2700
|
-
textValue?: string;
|
|
2701
|
-
/**
|
|
2702
|
-
* Optional icon to display on the left side of the item content.
|
|
2703
|
-
*/
|
|
2704
|
-
icon?: ElementType<IconProps>;
|
|
2705
|
-
}
|
|
2706
|
-
interface DropdownMenuItemProps extends Omit<DropdownPrimitive.DropdownMenuItemProps, 'asChild' | keyof DropdownMenuItemOptions>, DropdownMenuItemOptions {
|
|
2707
|
-
}
|
|
2708
|
-
|
|
2709
|
-
type DropdownTriggerComponent = ForwardRefComponent<'button'>;
|
|
2710
|
-
type DropdownMenuTriggerProps = PropsOf<DropdownTriggerComponent>;
|
|
2711
|
-
|
|
2712
|
-
interface DropdownMenuRootProps {
|
|
2713
|
-
children: ReactNode;
|
|
2714
|
-
/**
|
|
2715
|
-
* If `true` the dropdown menu will be open
|
|
2716
|
-
*/
|
|
2717
|
-
isOpen?: boolean;
|
|
2718
|
-
/**
|
|
2719
|
-
* The open state of the submenu when it is initially rendered.
|
|
2720
|
-
* Use when you do not need to control its open state.
|
|
2721
|
-
*/
|
|
2722
|
-
defaultOpen?: boolean;
|
|
2723
|
-
/**
|
|
2724
|
-
* Callback invoked open state changes
|
|
2725
|
-
*/
|
|
2726
|
-
onOpenChange?: (isOpen: boolean) => void;
|
|
2727
|
-
}
|
|
2728
|
-
declare function DropdownMenuRoot(props: DropdownMenuRootProps): react_jsx_runtime.JSX.Element;
|
|
2729
|
-
declare const DropdownMenu: typeof DropdownMenuRoot & {
|
|
2730
|
-
Trigger: ForwardRefComponent<"button", {}>;
|
|
2731
|
-
Content: react.ForwardRefExoticComponent<DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>>;
|
|
2732
|
-
Item: react.ForwardRefExoticComponent<DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>>;
|
|
2733
|
-
Divider: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
2734
|
-
};
|
|
2735
|
-
|
|
2736
|
-
type HeadingSize = keyof Theme['typography']['title'];
|
|
2737
|
-
type HeadingColor = keyof Theme['colors']['text'];
|
|
2738
|
-
interface HeadingOptions {
|
|
2739
|
-
/**
|
|
2740
|
-
* Sets the visual size of the heading.
|
|
2741
|
-
* To override the rendered tag, use the `as` prop.
|
|
2742
|
-
*
|
|
2743
|
-
* @default 'md'
|
|
2744
|
-
*/
|
|
2745
|
-
size?: ResponsiveProp<HeadingSize>;
|
|
2746
|
-
/**
|
|
2747
|
-
* Sets the color of the heading
|
|
2748
|
-
* @default 'default'
|
|
2749
|
-
*/
|
|
2750
|
-
color?: HeadingColor;
|
|
2751
|
-
/**
|
|
2752
|
-
* Truncates the heading after a specific number of lines
|
|
2753
|
-
*/
|
|
2754
|
-
numberOfLines?: number;
|
|
2755
|
-
/**
|
|
2756
|
-
* Alignment of the heading
|
|
2757
|
-
* @default 'left'
|
|
2758
|
-
*/
|
|
2759
|
-
textAlign?: 'left' | 'center' | 'right';
|
|
2760
|
-
}
|
|
2761
|
-
type HeadingComponent = ForwardRefComponent<'h2', HeadingOptions>;
|
|
2762
|
-
type HeadingProps = PropsOf<HeadingComponent>;
|
|
2763
|
-
declare const Heading: HeadingComponent;
|
|
2764
|
-
|
|
2765
|
-
type HintBoxTitleProps = HTMLQdsProps<'span'>;
|
|
2766
|
-
type HintBoxProps = HTMLQdsProps<'aside'>;
|
|
2767
|
-
declare const HintBox: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & react.RefAttributes<HTMLElement>> & {
|
|
2768
|
-
Title: _emotion_styled.StyledComponent<{
|
|
2769
|
-
theme?: _emotion_react.Theme | undefined;
|
|
2770
|
-
as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
|
|
2771
|
-
}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
|
|
2772
|
-
};
|
|
2773
|
-
|
|
2774
|
-
declare const getSizeStyles$3: (theme: {
|
|
2775
|
-
mediaQueries: {
|
|
2776
|
-
readonly smUp: "@media(min-width: 480px)";
|
|
2777
|
-
readonly mdUp: "@media(min-width: 768px)";
|
|
2778
|
-
readonly lgUp: "@media(min-width: 1024px)";
|
|
2779
|
-
readonly xlUp: "@media(min-width: 1280px)";
|
|
2780
|
-
readonly '2xlUp': "@media(min-width: 1536px)";
|
|
2781
|
-
};
|
|
2782
|
-
spacing: {
|
|
2783
|
-
'0x': string;
|
|
2784
|
-
'1x': string;
|
|
2785
|
-
'2x': string;
|
|
2786
|
-
'3x': string;
|
|
2787
|
-
'4x': string;
|
|
2788
|
-
'5x': string;
|
|
2789
|
-
'6x': string;
|
|
2790
|
-
'8x': string;
|
|
2791
|
-
'10x': string;
|
|
2792
|
-
'12x': string;
|
|
2793
|
-
'14x': string;
|
|
2794
|
-
'16x': string;
|
|
2795
|
-
'20x': string;
|
|
2796
|
-
'24x': string;
|
|
2797
|
-
};
|
|
2798
|
-
breakpoints: {
|
|
2799
|
-
readonly base: 0;
|
|
2800
|
-
readonly sm: 480;
|
|
2801
|
-
readonly md: 768;
|
|
2802
|
-
readonly lg: 1024;
|
|
2803
|
-
readonly xl: 1280;
|
|
2804
|
-
readonly '2xl': 1536;
|
|
2805
|
-
};
|
|
2806
|
-
zIndices: {
|
|
2807
|
-
hide: number;
|
|
2808
|
-
auto: string;
|
|
2809
|
-
base: number;
|
|
2810
|
-
docked: number;
|
|
2811
|
-
dropdown: number;
|
|
2812
|
-
sticky: number;
|
|
2813
|
-
banner: number;
|
|
2814
|
-
overlay: number;
|
|
2815
|
-
modal: number;
|
|
2816
|
-
popover: number;
|
|
2817
|
-
skipLink: number;
|
|
2818
|
-
toast: number;
|
|
2819
|
-
tooltip: number;
|
|
2820
|
-
};
|
|
2821
|
-
colors: {
|
|
2822
|
-
core: {
|
|
2823
|
-
black: string;
|
|
2824
|
-
white: string;
|
|
2825
|
-
gray90: string;
|
|
2826
|
-
gray80: string;
|
|
2827
|
-
gray70: string;
|
|
2828
|
-
gray60: string;
|
|
2829
|
-
gray50: string;
|
|
2830
|
-
gray40: string;
|
|
2831
|
-
gray30: string;
|
|
2832
|
-
gray20: string;
|
|
2833
|
-
gray10: string;
|
|
2834
|
-
pink: string;
|
|
2835
|
-
uiPink: string;
|
|
2836
|
-
uiPinkDark: string;
|
|
2837
|
-
uiPinkLight: string;
|
|
2838
|
-
brown: string;
|
|
2839
|
-
brownDark: string;
|
|
2840
|
-
brownLight: string;
|
|
2841
|
-
offWhite: string;
|
|
2842
|
-
offWhiteDark: string;
|
|
2843
|
-
offWhiteLight: string;
|
|
2844
|
-
softPink: string;
|
|
2845
|
-
warmYellow: string;
|
|
2846
|
-
softYellow: string;
|
|
2847
|
-
red90: string;
|
|
2848
|
-
red80: string;
|
|
2849
|
-
red70: string;
|
|
2850
|
-
red60: string;
|
|
2851
|
-
red50: string;
|
|
2852
|
-
red40: string;
|
|
2853
|
-
red30: string;
|
|
2854
|
-
red20: string;
|
|
2855
|
-
red10: string;
|
|
2856
|
-
green90: string;
|
|
2857
|
-
green80: string;
|
|
2858
|
-
green70: string;
|
|
2859
|
-
green60: string;
|
|
2860
|
-
green50: string;
|
|
2861
|
-
green40: string;
|
|
2862
|
-
green30: string;
|
|
2863
|
-
green20: string;
|
|
2864
|
-
green10: string;
|
|
2865
|
-
blue90: string;
|
|
2866
|
-
blue80: string;
|
|
2867
|
-
blue70: string;
|
|
2868
|
-
blue60: string;
|
|
2869
|
-
blue50: string;
|
|
2870
|
-
blue40: string;
|
|
2871
|
-
blue30: string;
|
|
2872
|
-
blue20: string;
|
|
2873
|
-
blue10: string;
|
|
2874
|
-
yellow90: string;
|
|
2875
|
-
yellow80: string;
|
|
2876
|
-
yellow70: string;
|
|
2877
|
-
yellow60: string;
|
|
2878
|
-
yellow50: string;
|
|
2879
|
-
yellow40: string;
|
|
2880
|
-
yellow30: string;
|
|
2881
|
-
yellow20: string;
|
|
2882
|
-
yellow10: string;
|
|
2883
|
-
blackAlpha5: string;
|
|
2884
|
-
blackAlpha10: string;
|
|
2885
|
-
blackAlpha20: string;
|
|
2886
|
-
};
|
|
2887
|
-
bg: {
|
|
2888
|
-
default: string;
|
|
2889
|
-
brandPrimary: string;
|
|
2890
|
-
brandPrimaryHover: string;
|
|
2891
|
-
brandPrimaryActive: string;
|
|
2892
|
-
brandSecondary: string;
|
|
2893
|
-
brandSecondaryHover: string;
|
|
2894
|
-
brandSecondaryActive: string;
|
|
2895
|
-
brandTertiary: string;
|
|
2896
|
-
brandTertiaryHover: string;
|
|
2897
|
-
brandTertiaryActive: string;
|
|
2898
|
-
negative: string;
|
|
2899
|
-
warning: string;
|
|
2900
|
-
positive: string;
|
|
2901
|
-
inset: string;
|
|
2902
|
-
backdrop: string;
|
|
2903
|
-
};
|
|
2904
|
-
text: {
|
|
2905
|
-
strong: string;
|
|
2906
|
-
default: string;
|
|
2907
|
-
subtle: string;
|
|
2908
|
-
disabled: string;
|
|
2909
|
-
negative: string;
|
|
2910
|
-
warning: string;
|
|
2911
|
-
positive: string;
|
|
2912
|
-
onBrandPrimary: string;
|
|
2913
|
-
onBrandSecondary: string;
|
|
2914
|
-
onBrandTertiary: string;
|
|
2915
|
-
};
|
|
2916
|
-
icon: {
|
|
2917
|
-
default: string;
|
|
2918
|
-
strong: string;
|
|
2919
|
-
subtle: string;
|
|
2920
|
-
disabled: string;
|
|
2921
|
-
negative: string;
|
|
2922
|
-
warning: string;
|
|
2923
|
-
positive: string;
|
|
2924
|
-
onBrandPrimary: string;
|
|
2925
|
-
onBrandSecondary: string;
|
|
2926
|
-
onBrandTertiary: string;
|
|
2927
|
-
};
|
|
2928
|
-
border: {
|
|
2929
|
-
default: string;
|
|
2930
|
-
defaultHover: string;
|
|
2931
|
-
defaultSelected: string;
|
|
2932
|
-
strong: string;
|
|
2933
|
-
subtle: string;
|
|
2934
|
-
negative: string;
|
|
2935
|
-
warning: string;
|
|
2936
|
-
positive: string;
|
|
2937
|
-
};
|
|
2938
|
-
};
|
|
2939
|
-
sizes: {
|
|
2940
|
-
112: string;
|
|
2941
|
-
128: string;
|
|
2942
|
-
144: string;
|
|
2943
|
-
160: string;
|
|
2944
|
-
176: string;
|
|
2945
|
-
192: string;
|
|
2946
|
-
224: string;
|
|
2947
|
-
256: string;
|
|
2948
|
-
288: string;
|
|
2949
|
-
320: string;
|
|
2950
|
-
384: string;
|
|
2951
|
-
448: string;
|
|
2952
|
-
512: string;
|
|
2953
|
-
576: string;
|
|
2954
|
-
672: string;
|
|
2955
|
-
768: string;
|
|
2956
|
-
896: string;
|
|
2957
|
-
1024: string;
|
|
2958
|
-
'0x': string;
|
|
2959
|
-
'1x': string;
|
|
2960
|
-
'2x': string;
|
|
2961
|
-
'3x': string;
|
|
2962
|
-
'4x': string;
|
|
2963
|
-
'5x': string;
|
|
2964
|
-
'6x': string;
|
|
2965
|
-
'8x': string;
|
|
2966
|
-
'10x': string;
|
|
2967
|
-
'12x': string;
|
|
2968
|
-
'14x': string;
|
|
2969
|
-
'16x': string;
|
|
2970
|
-
'20x': string;
|
|
2971
|
-
'24x': string;
|
|
2972
|
-
};
|
|
2973
|
-
radii: {
|
|
2974
|
-
none: string;
|
|
2975
|
-
'2xs': string;
|
|
2976
|
-
xs: string;
|
|
2977
|
-
sm: string;
|
|
2978
|
-
md: string;
|
|
2979
|
-
lg: string;
|
|
2980
|
-
xl: string;
|
|
2981
|
-
'2xl': string;
|
|
2982
|
-
full: string;
|
|
2983
|
-
};
|
|
2984
|
-
shadows: {
|
|
2985
|
-
none: string;
|
|
2986
|
-
sm: string;
|
|
2987
|
-
md: string;
|
|
2988
|
-
lg: string;
|
|
2989
|
-
xl: string;
|
|
2990
|
-
};
|
|
2991
|
-
typography: {
|
|
2992
|
-
display: {
|
|
2993
|
-
'3xl': {
|
|
2994
|
-
fontFamily: string;
|
|
2995
|
-
fontWeight: string;
|
|
2996
|
-
fontSize: string;
|
|
2997
|
-
lineHeight: string;
|
|
2998
|
-
letterSpacing: string;
|
|
2999
|
-
fontFeatureSettings: string;
|
|
3000
|
-
};
|
|
3001
|
-
'2xl': {
|
|
3002
|
-
fontFamily: string;
|
|
3003
|
-
fontWeight: string;
|
|
3004
|
-
fontSize: string;
|
|
3005
|
-
lineHeight: string;
|
|
3006
|
-
letterSpacing: string;
|
|
3007
|
-
fontFeatureSettings: string;
|
|
3008
|
-
};
|
|
3009
|
-
xl: {
|
|
3010
|
-
fontFamily: string;
|
|
3011
|
-
fontWeight: string;
|
|
3012
|
-
fontSize: string;
|
|
3013
|
-
lineHeight: string;
|
|
3014
|
-
letterSpacing: string;
|
|
3015
|
-
fontFeatureSettings: string;
|
|
3016
|
-
};
|
|
3017
|
-
lg: {
|
|
3018
|
-
fontFamily: string;
|
|
3019
|
-
fontWeight: string;
|
|
3020
|
-
fontSize: string;
|
|
3021
|
-
lineHeight: string;
|
|
3022
|
-
letterSpacing: string;
|
|
3023
|
-
fontFeatureSettings: string;
|
|
3024
|
-
};
|
|
3025
|
-
md: {
|
|
3026
|
-
fontFamily: string;
|
|
3027
|
-
fontWeight: string;
|
|
3028
|
-
fontSize: string;
|
|
3029
|
-
lineHeight: string;
|
|
3030
|
-
letterSpacing: string;
|
|
3031
|
-
fontFeatureSettings: string;
|
|
3032
|
-
};
|
|
3033
|
-
sm: {
|
|
3034
|
-
fontFamily: string;
|
|
3035
|
-
fontWeight: string;
|
|
3036
|
-
fontSize: string;
|
|
3037
|
-
lineHeight: string;
|
|
3038
|
-
letterSpacing: string;
|
|
3039
|
-
fontFeatureSettings: string;
|
|
3040
|
-
};
|
|
3041
|
-
xs: {
|
|
3042
|
-
fontFamily: string;
|
|
3043
|
-
fontWeight: string;
|
|
3044
|
-
fontSize: string;
|
|
3045
|
-
lineHeight: string;
|
|
3046
|
-
letterSpacing: string;
|
|
3047
|
-
fontFeatureSettings: string;
|
|
3048
|
-
};
|
|
3049
|
-
'2xs': {
|
|
3050
|
-
fontFamily: string;
|
|
3051
|
-
fontWeight: string;
|
|
3052
|
-
fontSize: string;
|
|
3053
|
-
lineHeight: string;
|
|
3054
|
-
letterSpacing: string;
|
|
3055
|
-
fontFeatureSettings: string;
|
|
3056
|
-
};
|
|
3057
|
-
};
|
|
3058
|
-
title: {
|
|
3059
|
-
lg: {
|
|
3060
|
-
fontFamily: string;
|
|
3061
|
-
fontWeight: string;
|
|
3062
|
-
fontSize: string;
|
|
3063
|
-
lineHeight: string;
|
|
3064
|
-
letterSpacing: string;
|
|
3065
|
-
};
|
|
3066
|
-
md: {
|
|
3067
|
-
fontFamily: string;
|
|
3068
|
-
fontWeight: string;
|
|
3069
|
-
fontSize: string;
|
|
3070
|
-
lineHeight: string;
|
|
3071
|
-
letterSpacing: string;
|
|
3072
|
-
};
|
|
3073
|
-
sm: {
|
|
3074
|
-
fontFamily: string;
|
|
3075
|
-
fontWeight: string;
|
|
3076
|
-
fontSize: string;
|
|
3077
|
-
lineHeight: string;
|
|
3078
|
-
letterSpacing: string;
|
|
3079
|
-
};
|
|
3080
|
-
xs: {
|
|
3081
|
-
fontFamily: string;
|
|
3082
|
-
fontWeight: string;
|
|
3083
|
-
fontSize: string;
|
|
3084
|
-
lineHeight: string;
|
|
3085
|
-
letterSpacing: string;
|
|
3086
|
-
};
|
|
3087
|
-
'2xs': {
|
|
3088
|
-
fontFamily: string;
|
|
3089
|
-
fontWeight: string;
|
|
3090
|
-
fontSize: string;
|
|
3091
|
-
lineHeight: string;
|
|
3092
|
-
letterSpacing: string;
|
|
3093
|
-
};
|
|
3094
|
-
'3xs': {
|
|
3095
|
-
fontFamily: string;
|
|
3096
|
-
fontWeight: string;
|
|
3097
|
-
fontSize: string;
|
|
3098
|
-
lineHeight: string;
|
|
3099
|
-
letterSpacing: string;
|
|
3100
|
-
};
|
|
3101
|
-
};
|
|
3102
|
-
body: {
|
|
3103
|
-
xl: {
|
|
3104
|
-
fontFamily: string;
|
|
3105
|
-
fontWeight: string;
|
|
3106
|
-
fontSize: string;
|
|
3107
|
-
lineHeight: string;
|
|
3108
|
-
letterSpacing: string;
|
|
3109
|
-
};
|
|
3110
|
-
lg: {
|
|
3111
|
-
fontFamily: string;
|
|
3112
|
-
fontWeight: string;
|
|
3113
|
-
fontSize: string;
|
|
3114
|
-
lineHeight: string;
|
|
3115
|
-
letterSpacing: string;
|
|
3116
|
-
};
|
|
3117
|
-
md: {
|
|
3118
|
-
fontFamily: string;
|
|
3119
|
-
fontWeight: string;
|
|
3120
|
-
fontSize: string;
|
|
3121
|
-
lineHeight: string;
|
|
3122
|
-
letterSpacing: string;
|
|
3123
|
-
};
|
|
3124
|
-
sm: {
|
|
3125
|
-
fontFamily: string;
|
|
3126
|
-
fontWeight: string;
|
|
3127
|
-
fontSize: string;
|
|
3128
|
-
lineHeight: string;
|
|
3129
|
-
letterSpacing: string;
|
|
3130
|
-
};
|
|
3131
|
-
xs: {
|
|
3132
|
-
fontFamily: string;
|
|
3133
|
-
fontWeight: string;
|
|
3134
|
-
fontSize: string;
|
|
3135
|
-
lineHeight: string;
|
|
3136
|
-
letterSpacing: string;
|
|
3137
|
-
};
|
|
3138
|
-
};
|
|
3139
|
-
label: {
|
|
3140
|
-
md: {
|
|
3141
|
-
fontFamily: string;
|
|
3142
|
-
fontWeight: string;
|
|
3143
|
-
fontSize: string;
|
|
3144
|
-
lineHeight: string;
|
|
3145
|
-
letterSpacing: string;
|
|
3146
|
-
};
|
|
3147
|
-
sm: {
|
|
3148
|
-
fontFamily: string;
|
|
3149
|
-
fontWeight: string;
|
|
3150
|
-
fontSize: string;
|
|
3151
|
-
lineHeight: string;
|
|
3152
|
-
letterSpacing: string;
|
|
3153
|
-
};
|
|
3154
|
-
};
|
|
3155
|
-
button: {
|
|
3156
|
-
md: {
|
|
3157
|
-
fontFamily: string;
|
|
3158
|
-
fontWeight: string;
|
|
3159
|
-
fontSize: string;
|
|
3160
|
-
lineHeight: string;
|
|
3161
|
-
letterSpacing: string;
|
|
3162
|
-
};
|
|
3163
|
-
sm: {
|
|
3164
|
-
fontFamily: string;
|
|
3165
|
-
fontWeight: string;
|
|
3166
|
-
fontSize: string;
|
|
3167
|
-
lineHeight: string;
|
|
3168
|
-
letterSpacing: string;
|
|
3169
|
-
};
|
|
3170
|
-
};
|
|
3171
|
-
caption: {
|
|
3172
|
-
md: {
|
|
3173
|
-
fontFamily: string;
|
|
3174
|
-
fontWeight: string;
|
|
3175
|
-
fontSize: string;
|
|
3176
|
-
lineHeight: string;
|
|
3177
|
-
letterSpacing: string;
|
|
3178
|
-
};
|
|
3179
|
-
sm: {
|
|
3180
|
-
fontFamily: string;
|
|
3181
|
-
fontWeight: string;
|
|
3182
|
-
fontSize: string;
|
|
3183
|
-
lineHeight: string;
|
|
3184
|
-
letterSpacing: string;
|
|
3185
|
-
};
|
|
3186
|
-
};
|
|
3187
|
-
};
|
|
3188
|
-
}) => {
|
|
3189
|
-
xs: {
|
|
3190
|
-
width: string;
|
|
3191
|
-
height: string;
|
|
3192
|
-
};
|
|
3193
|
-
sm: {
|
|
3194
|
-
width: string;
|
|
3195
|
-
height: string;
|
|
3196
|
-
};
|
|
3197
|
-
md: {
|
|
3198
|
-
width: string;
|
|
3199
|
-
height: string;
|
|
3200
|
-
};
|
|
3201
|
-
};
|
|
3202
|
-
declare const getVariantStyles: (theme: {
|
|
3203
|
-
mediaQueries: {
|
|
3204
|
-
readonly smUp: "@media(min-width: 480px)";
|
|
3205
|
-
readonly mdUp: "@media(min-width: 768px)";
|
|
3206
|
-
readonly lgUp: "@media(min-width: 1024px)";
|
|
3207
|
-
readonly xlUp: "@media(min-width: 1280px)";
|
|
3208
|
-
readonly '2xlUp': "@media(min-width: 1536px)";
|
|
3209
|
-
};
|
|
3210
|
-
spacing: {
|
|
3211
|
-
'0x': string;
|
|
3212
|
-
'1x': string;
|
|
3213
|
-
'2x': string;
|
|
3214
|
-
'3x': string;
|
|
3215
|
-
'4x': string;
|
|
3216
|
-
'5x': string;
|
|
3217
|
-
'6x': string;
|
|
3218
|
-
'8x': string;
|
|
3219
|
-
'10x': string;
|
|
3220
|
-
'12x': string;
|
|
3221
|
-
'14x': string;
|
|
3222
|
-
'16x': string;
|
|
3223
|
-
'20x': string;
|
|
3224
|
-
'24x': string;
|
|
3225
|
-
};
|
|
3226
|
-
breakpoints: {
|
|
3227
|
-
readonly base: 0;
|
|
3228
|
-
readonly sm: 480;
|
|
3229
|
-
readonly md: 768;
|
|
3230
|
-
readonly lg: 1024;
|
|
3231
|
-
readonly xl: 1280;
|
|
3232
|
-
readonly '2xl': 1536;
|
|
3233
|
-
};
|
|
3234
|
-
zIndices: {
|
|
3235
|
-
hide: number;
|
|
3236
|
-
auto: string;
|
|
3237
|
-
base: number;
|
|
3238
|
-
docked: number;
|
|
3239
|
-
dropdown: number;
|
|
3240
|
-
sticky: number;
|
|
3241
|
-
banner: number;
|
|
3242
|
-
overlay: number;
|
|
3243
|
-
modal: number;
|
|
3244
|
-
popover: number;
|
|
3245
|
-
skipLink: number;
|
|
3246
|
-
toast: number;
|
|
3247
|
-
tooltip: number;
|
|
3248
|
-
};
|
|
3249
|
-
colors: {
|
|
3250
|
-
core: {
|
|
3251
|
-
black: string;
|
|
3252
|
-
white: string;
|
|
3253
|
-
gray90: string;
|
|
3254
|
-
gray80: string;
|
|
3255
|
-
gray70: string;
|
|
3256
|
-
gray60: string;
|
|
3257
|
-
gray50: string;
|
|
3258
|
-
gray40: string;
|
|
3259
|
-
gray30: string;
|
|
3260
|
-
gray20: string;
|
|
3261
|
-
gray10: string;
|
|
3262
|
-
pink: string;
|
|
3263
|
-
uiPink: string;
|
|
3264
|
-
uiPinkDark: string;
|
|
3265
|
-
uiPinkLight: string;
|
|
3266
|
-
brown: string;
|
|
3267
|
-
brownDark: string;
|
|
3268
|
-
brownLight: string;
|
|
3269
|
-
offWhite: string;
|
|
3270
|
-
offWhiteDark: string;
|
|
3271
|
-
offWhiteLight: string;
|
|
3272
|
-
softPink: string;
|
|
3273
|
-
warmYellow: string;
|
|
3274
|
-
softYellow: string;
|
|
3275
|
-
red90: string;
|
|
3276
|
-
red80: string;
|
|
3277
|
-
red70: string;
|
|
3278
|
-
red60: string;
|
|
3279
|
-
red50: string;
|
|
3280
|
-
red40: string;
|
|
3281
|
-
red30: string;
|
|
3282
|
-
red20: string;
|
|
3283
|
-
red10: string;
|
|
3284
|
-
green90: string;
|
|
3285
|
-
green80: string;
|
|
3286
|
-
green70: string;
|
|
3287
|
-
green60: string;
|
|
3288
|
-
green50: string;
|
|
3289
|
-
green40: string;
|
|
3290
|
-
green30: string;
|
|
3291
|
-
green20: string;
|
|
3292
|
-
green10: string;
|
|
3293
|
-
blue90: string;
|
|
3294
|
-
blue80: string;
|
|
3295
|
-
blue70: string;
|
|
3296
|
-
blue60: string;
|
|
3297
|
-
blue50: string;
|
|
3298
|
-
blue40: string;
|
|
3299
|
-
blue30: string;
|
|
3300
|
-
blue20: string;
|
|
3301
|
-
blue10: string;
|
|
3302
|
-
yellow90: string;
|
|
3303
|
-
yellow80: string;
|
|
3304
|
-
yellow70: string;
|
|
3305
|
-
yellow60: string;
|
|
3306
|
-
yellow50: string;
|
|
3307
|
-
yellow40: string;
|
|
3308
|
-
yellow30: string;
|
|
3309
|
-
yellow20: string;
|
|
3310
|
-
yellow10: string;
|
|
3311
|
-
blackAlpha5: string;
|
|
3312
|
-
blackAlpha10: string;
|
|
3313
|
-
blackAlpha20: string;
|
|
3314
|
-
};
|
|
3315
|
-
bg: {
|
|
3316
|
-
default: string;
|
|
3317
|
-
brandPrimary: string;
|
|
3318
|
-
brandPrimaryHover: string;
|
|
3319
|
-
brandPrimaryActive: string;
|
|
3320
|
-
brandSecondary: string;
|
|
3321
|
-
brandSecondaryHover: string;
|
|
3322
|
-
brandSecondaryActive: string;
|
|
3323
|
-
brandTertiary: string;
|
|
3324
|
-
brandTertiaryHover: string;
|
|
3325
|
-
brandTertiaryActive: string;
|
|
3326
|
-
negative: string;
|
|
3327
|
-
warning: string;
|
|
3328
|
-
positive: string;
|
|
3329
|
-
inset: string;
|
|
3330
|
-
backdrop: string;
|
|
3331
|
-
};
|
|
3332
|
-
text: {
|
|
3333
|
-
strong: string;
|
|
3334
|
-
default: string;
|
|
3335
|
-
subtle: string;
|
|
3336
|
-
disabled: string;
|
|
3337
|
-
negative: string;
|
|
3338
|
-
warning: string;
|
|
3339
|
-
positive: string;
|
|
3340
|
-
onBrandPrimary: string;
|
|
3341
|
-
onBrandSecondary: string;
|
|
3342
|
-
onBrandTertiary: string;
|
|
3343
|
-
};
|
|
3344
|
-
icon: {
|
|
3345
|
-
default: string;
|
|
3346
|
-
strong: string;
|
|
3347
|
-
subtle: string;
|
|
3348
|
-
disabled: string;
|
|
3349
|
-
negative: string;
|
|
3350
|
-
warning: string;
|
|
3351
|
-
positive: string;
|
|
3352
|
-
onBrandPrimary: string;
|
|
3353
|
-
onBrandSecondary: string;
|
|
3354
|
-
onBrandTertiary: string;
|
|
3355
|
-
};
|
|
3356
|
-
border: {
|
|
3357
|
-
default: string;
|
|
3358
|
-
defaultHover: string;
|
|
3359
|
-
defaultSelected: string;
|
|
3360
|
-
strong: string;
|
|
3361
|
-
subtle: string;
|
|
3362
|
-
negative: string;
|
|
3363
|
-
warning: string;
|
|
3364
|
-
positive: string;
|
|
3365
|
-
};
|
|
3366
|
-
};
|
|
3367
|
-
sizes: {
|
|
3368
|
-
112: string;
|
|
3369
|
-
128: string;
|
|
3370
|
-
144: string;
|
|
3371
|
-
160: string;
|
|
3372
|
-
176: string;
|
|
3373
|
-
192: string;
|
|
3374
|
-
224: string;
|
|
3375
|
-
256: string;
|
|
3376
|
-
288: string;
|
|
3377
|
-
320: string;
|
|
3378
|
-
384: string;
|
|
3379
|
-
448: string;
|
|
3380
|
-
512: string;
|
|
3381
|
-
576: string;
|
|
3382
|
-
672: string;
|
|
3383
|
-
768: string;
|
|
3384
|
-
896: string;
|
|
3385
|
-
1024: string;
|
|
3386
|
-
'0x': string;
|
|
3387
|
-
'1x': string;
|
|
3388
|
-
'2x': string;
|
|
3389
|
-
'3x': string;
|
|
3390
|
-
'4x': string;
|
|
3391
|
-
'5x': string;
|
|
3392
|
-
'6x': string;
|
|
3393
|
-
'8x': string;
|
|
3394
|
-
'10x': string;
|
|
3395
|
-
'12x': string;
|
|
3396
|
-
'14x': string;
|
|
3397
|
-
'16x': string;
|
|
3398
|
-
'20x': string;
|
|
3399
|
-
'24x': string;
|
|
3400
|
-
};
|
|
3401
|
-
radii: {
|
|
3402
|
-
none: string;
|
|
3403
|
-
'2xs': string;
|
|
3404
|
-
xs: string;
|
|
3405
|
-
sm: string;
|
|
3406
|
-
md: string;
|
|
3407
|
-
lg: string;
|
|
3408
|
-
xl: string;
|
|
3409
|
-
'2xl': string;
|
|
3410
|
-
full: string;
|
|
3411
|
-
};
|
|
3412
|
-
shadows: {
|
|
3413
|
-
none: string;
|
|
3414
|
-
sm: string;
|
|
3415
|
-
md: string;
|
|
3416
|
-
lg: string;
|
|
3417
|
-
xl: string;
|
|
3418
|
-
};
|
|
3419
|
-
typography: {
|
|
3420
|
-
display: {
|
|
3421
|
-
'3xl': {
|
|
3422
|
-
fontFamily: string;
|
|
3423
|
-
fontWeight: string;
|
|
3424
|
-
fontSize: string;
|
|
3425
|
-
lineHeight: string;
|
|
3426
|
-
letterSpacing: string;
|
|
3427
|
-
fontFeatureSettings: string;
|
|
3428
|
-
};
|
|
3429
|
-
'2xl': {
|
|
3430
|
-
fontFamily: string;
|
|
3431
|
-
fontWeight: string;
|
|
3432
|
-
fontSize: string;
|
|
3433
|
-
lineHeight: string;
|
|
3434
|
-
letterSpacing: string;
|
|
3435
|
-
fontFeatureSettings: string;
|
|
3436
|
-
};
|
|
3437
|
-
xl: {
|
|
3438
|
-
fontFamily: string;
|
|
3439
|
-
fontWeight: string;
|
|
3440
|
-
fontSize: string;
|
|
3441
|
-
lineHeight: string;
|
|
3442
|
-
letterSpacing: string;
|
|
3443
|
-
fontFeatureSettings: string;
|
|
3444
|
-
};
|
|
3445
|
-
lg: {
|
|
3446
|
-
fontFamily: string;
|
|
3447
|
-
fontWeight: string;
|
|
3448
|
-
fontSize: string;
|
|
3449
|
-
lineHeight: string;
|
|
3450
|
-
letterSpacing: string;
|
|
3451
|
-
fontFeatureSettings: string;
|
|
3452
|
-
};
|
|
3453
|
-
md: {
|
|
3454
|
-
fontFamily: string;
|
|
3455
|
-
fontWeight: string;
|
|
3456
|
-
fontSize: string;
|
|
3457
|
-
lineHeight: string;
|
|
3458
|
-
letterSpacing: string;
|
|
3459
|
-
fontFeatureSettings: string;
|
|
3460
|
-
};
|
|
3461
|
-
sm: {
|
|
3462
|
-
fontFamily: string;
|
|
3463
|
-
fontWeight: string;
|
|
3464
|
-
fontSize: string;
|
|
3465
|
-
lineHeight: string;
|
|
3466
|
-
letterSpacing: string;
|
|
3467
|
-
fontFeatureSettings: string;
|
|
3468
|
-
};
|
|
3469
|
-
xs: {
|
|
3470
|
-
fontFamily: string;
|
|
3471
|
-
fontWeight: string;
|
|
3472
|
-
fontSize: string;
|
|
3473
|
-
lineHeight: string;
|
|
3474
|
-
letterSpacing: string;
|
|
3475
|
-
fontFeatureSettings: string;
|
|
3476
|
-
};
|
|
3477
|
-
'2xs': {
|
|
3478
|
-
fontFamily: string;
|
|
3479
|
-
fontWeight: string;
|
|
3480
|
-
fontSize: string;
|
|
3481
|
-
lineHeight: string;
|
|
3482
|
-
letterSpacing: string;
|
|
3483
|
-
fontFeatureSettings: string;
|
|
3484
|
-
};
|
|
3485
|
-
};
|
|
3486
|
-
title: {
|
|
3487
|
-
lg: {
|
|
3488
|
-
fontFamily: string;
|
|
3489
|
-
fontWeight: string;
|
|
3490
|
-
fontSize: string;
|
|
3491
|
-
lineHeight: string;
|
|
3492
|
-
letterSpacing: string;
|
|
3493
|
-
};
|
|
3494
|
-
md: {
|
|
3495
|
-
fontFamily: string;
|
|
3496
|
-
fontWeight: string;
|
|
3497
|
-
fontSize: string;
|
|
3498
|
-
lineHeight: string;
|
|
3499
|
-
letterSpacing: string;
|
|
3500
|
-
};
|
|
3501
|
-
sm: {
|
|
3502
|
-
fontFamily: string;
|
|
3503
|
-
fontWeight: string;
|
|
3504
|
-
fontSize: string;
|
|
3505
|
-
lineHeight: string;
|
|
3506
|
-
letterSpacing: string;
|
|
3507
|
-
};
|
|
3508
|
-
xs: {
|
|
3509
|
-
fontFamily: string;
|
|
3510
|
-
fontWeight: string;
|
|
3511
|
-
fontSize: string;
|
|
3512
|
-
lineHeight: string;
|
|
3513
|
-
letterSpacing: string;
|
|
3514
|
-
};
|
|
3515
|
-
'2xs': {
|
|
3516
|
-
fontFamily: string;
|
|
3517
|
-
fontWeight: string;
|
|
3518
|
-
fontSize: string;
|
|
3519
|
-
lineHeight: string;
|
|
3520
|
-
letterSpacing: string;
|
|
3521
|
-
};
|
|
3522
|
-
'3xs': {
|
|
3523
|
-
fontFamily: string;
|
|
3524
|
-
fontWeight: string;
|
|
3525
|
-
fontSize: string;
|
|
3526
|
-
lineHeight: string;
|
|
3527
|
-
letterSpacing: string;
|
|
3528
|
-
};
|
|
3529
|
-
};
|
|
3530
|
-
body: {
|
|
3531
|
-
xl: {
|
|
3532
|
-
fontFamily: string;
|
|
3533
|
-
fontWeight: string;
|
|
3534
|
-
fontSize: string;
|
|
3535
|
-
lineHeight: string;
|
|
3536
|
-
letterSpacing: string;
|
|
3537
|
-
};
|
|
3538
|
-
lg: {
|
|
3539
|
-
fontFamily: string;
|
|
3540
|
-
fontWeight: string;
|
|
3541
|
-
fontSize: string;
|
|
3542
|
-
lineHeight: string;
|
|
3543
|
-
letterSpacing: string;
|
|
3544
|
-
};
|
|
3545
|
-
md: {
|
|
3546
|
-
fontFamily: string;
|
|
3547
|
-
fontWeight: string;
|
|
3548
|
-
fontSize: string;
|
|
3549
|
-
lineHeight: string;
|
|
3550
|
-
letterSpacing: string;
|
|
3551
|
-
};
|
|
3552
|
-
sm: {
|
|
3553
|
-
fontFamily: string;
|
|
3554
|
-
fontWeight: string;
|
|
3555
|
-
fontSize: string;
|
|
3556
|
-
lineHeight: string;
|
|
3557
|
-
letterSpacing: string;
|
|
3558
|
-
};
|
|
3559
|
-
xs: {
|
|
3560
|
-
fontFamily: string;
|
|
3561
|
-
fontWeight: string;
|
|
3562
|
-
fontSize: string;
|
|
3563
|
-
lineHeight: string;
|
|
3564
|
-
letterSpacing: string;
|
|
3565
|
-
};
|
|
3566
|
-
};
|
|
3567
|
-
label: {
|
|
3568
|
-
md: {
|
|
3569
|
-
fontFamily: string;
|
|
3570
|
-
fontWeight: string;
|
|
3571
|
-
fontSize: string;
|
|
3572
|
-
lineHeight: string;
|
|
3573
|
-
letterSpacing: string;
|
|
3574
|
-
};
|
|
3575
|
-
sm: {
|
|
3576
|
-
fontFamily: string;
|
|
3577
|
-
fontWeight: string;
|
|
3578
|
-
fontSize: string;
|
|
3579
|
-
lineHeight: string;
|
|
3580
|
-
letterSpacing: string;
|
|
3581
|
-
};
|
|
3582
|
-
};
|
|
3583
|
-
button: {
|
|
3584
|
-
md: {
|
|
3585
|
-
fontFamily: string;
|
|
3586
|
-
fontWeight: string;
|
|
3587
|
-
fontSize: string;
|
|
3588
|
-
lineHeight: string;
|
|
3589
|
-
letterSpacing: string;
|
|
3590
|
-
};
|
|
3591
|
-
sm: {
|
|
3592
|
-
fontFamily: string;
|
|
3593
|
-
fontWeight: string;
|
|
3594
|
-
fontSize: string;
|
|
3595
|
-
lineHeight: string;
|
|
3596
|
-
letterSpacing: string;
|
|
3597
|
-
};
|
|
3598
|
-
};
|
|
3599
|
-
caption: {
|
|
3600
|
-
md: {
|
|
3601
|
-
fontFamily: string;
|
|
3602
|
-
fontWeight: string;
|
|
3603
|
-
fontSize: string;
|
|
3604
|
-
lineHeight: string;
|
|
3605
|
-
letterSpacing: string;
|
|
3606
|
-
};
|
|
3607
|
-
sm: {
|
|
3608
|
-
fontFamily: string;
|
|
3609
|
-
fontWeight: string;
|
|
3610
|
-
fontSize: string;
|
|
3611
|
-
lineHeight: string;
|
|
3612
|
-
letterSpacing: string;
|
|
3613
|
-
};
|
|
3614
|
-
};
|
|
3615
|
-
};
|
|
3616
|
-
}) => {
|
|
3617
|
-
primary: {
|
|
3618
|
-
background: string;
|
|
3619
|
-
color: string;
|
|
3620
|
-
":not([disabled])": {
|
|
3621
|
-
'@media(hover: hover)': {
|
|
3622
|
-
':hover': {
|
|
3623
|
-
background: string;
|
|
3624
|
-
};
|
|
3625
|
-
};
|
|
3626
|
-
':active': {
|
|
3627
|
-
background: string;
|
|
3628
|
-
};
|
|
3629
|
-
};
|
|
3630
|
-
};
|
|
3631
|
-
secondary: {
|
|
3632
|
-
background: string;
|
|
3633
|
-
color: string;
|
|
3634
|
-
":not([disabled])": {
|
|
3635
|
-
'@media(hover: hover)': {
|
|
3636
|
-
':hover': {
|
|
3637
|
-
background: string;
|
|
3638
|
-
};
|
|
3639
|
-
};
|
|
3640
|
-
':active': {
|
|
3641
|
-
background: string;
|
|
3642
|
-
};
|
|
3643
|
-
};
|
|
3644
|
-
};
|
|
3645
|
-
tertiary: {
|
|
3646
|
-
background: string;
|
|
3647
|
-
color: string;
|
|
3648
|
-
":not([disabled])": {
|
|
3649
|
-
'@media(hover: hover)': {
|
|
3650
|
-
':hover': {
|
|
3651
|
-
background: string;
|
|
3652
|
-
};
|
|
3653
|
-
};
|
|
3654
|
-
':active': {
|
|
3655
|
-
background: string;
|
|
3656
|
-
};
|
|
3657
|
-
};
|
|
3658
|
-
};
|
|
3659
|
-
ghost: {
|
|
3660
|
-
color: string;
|
|
3661
|
-
":not([disabled])": {
|
|
3662
|
-
'@media(hover: hover)': {
|
|
3663
|
-
':hover': {
|
|
3664
|
-
background: string;
|
|
3665
|
-
};
|
|
3666
|
-
};
|
|
3667
|
-
':active': {
|
|
3668
|
-
background: string;
|
|
3669
|
-
};
|
|
3670
|
-
};
|
|
3671
|
-
};
|
|
3672
|
-
white: {
|
|
3673
|
-
background: string;
|
|
3674
|
-
color: string;
|
|
3675
|
-
":not([disabled])": {
|
|
3676
|
-
'@media(hover: hover)': {
|
|
3677
|
-
':hover': {
|
|
3678
|
-
background: string;
|
|
3679
|
-
};
|
|
3680
|
-
};
|
|
3681
|
-
':active': {
|
|
3682
|
-
background: string;
|
|
3683
|
-
};
|
|
3684
|
-
};
|
|
3685
|
-
};
|
|
3686
|
-
};
|
|
3687
|
-
|
|
3688
|
-
type IconButtonSize = VariantProps<typeof getSizeStyles$3>;
|
|
3689
|
-
type IconButtonVariant = VariantProps<typeof getVariantStyles>;
|
|
3690
|
-
interface IconButtonOptions {
|
|
3691
|
-
icon: ElementType<IconProps>;
|
|
3692
|
-
/**
|
|
3693
|
-
* A visually hidden label read by screen readers.
|
|
3694
|
-
*
|
|
3695
|
-
*/
|
|
3696
|
-
label: string;
|
|
3697
|
-
/**
|
|
3698
|
-
* Defines the size of the button
|
|
3699
|
-
*/
|
|
3700
|
-
size?: ResponsiveProp<IconButtonSize>;
|
|
3701
|
-
/**
|
|
3702
|
-
* Sets the style variant of the button
|
|
3703
|
-
*/
|
|
3704
|
-
variant?: IconButtonVariant;
|
|
3705
|
-
/**
|
|
3706
|
-
* If `true` the button will be disabled
|
|
3707
|
-
*/
|
|
3708
|
-
isDisabled?: boolean;
|
|
3709
|
-
}
|
|
3710
|
-
type IconButtonComponent = ForwardRefComponent<'button', IconButtonOptions>;
|
|
3711
|
-
type IconButtonProps = PropsOf<IconButtonComponent>;
|
|
3712
|
-
declare const IconButton: IconButtonComponent;
|
|
3713
|
-
|
|
3714
|
-
interface InputBaseOptions {
|
|
3715
|
-
/**
|
|
3716
|
-
* If `true`, the input will be invalid
|
|
3717
|
-
*/
|
|
3718
|
-
isInvalid?: boolean;
|
|
3719
|
-
/**
|
|
3720
|
-
* If `true`, the input will be disabled
|
|
3721
|
-
*/
|
|
3722
|
-
isDisabled?: boolean;
|
|
3723
|
-
/**
|
|
3724
|
-
* If `true` the input will be required
|
|
3725
|
-
*/
|
|
3726
|
-
isRequired?: boolean;
|
|
3727
|
-
}
|
|
3728
|
-
type OmittedProps$7 = 'children' | 'readOnly' | 'size' | 'disabled' | 'required';
|
|
3729
|
-
interface InputBaseProps extends Omit<HTMLQdsProps<'input'>, OmittedProps$7>, InputBaseOptions {
|
|
3730
|
-
}
|
|
3731
|
-
declare const InputBase: react.ForwardRefExoticComponent<InputBaseProps & react.RefAttributes<HTMLInputElement>>;
|
|
3732
|
-
|
|
3733
|
-
interface TextFieldOptions extends InputBaseOptions {
|
|
3734
|
-
/**
|
|
3735
|
-
* The label for the input
|
|
3736
|
-
*/
|
|
3737
|
-
label: string;
|
|
3738
|
-
/**
|
|
3739
|
-
* The error message to display if `isInvalid` is `true`
|
|
3740
|
-
*/
|
|
3741
|
-
errorMessage?: string;
|
|
3742
|
-
/**
|
|
3743
|
-
* If `true`, the input will display an optional indicator.
|
|
3744
|
-
* If the `isRequired` prop is also `true`, this prop will be ignored.
|
|
3745
|
-
*/
|
|
3746
|
-
isOptional?: boolean;
|
|
3747
|
-
/**
|
|
3748
|
-
* Text that provides additional guidance to the user
|
|
3749
|
-
*/
|
|
3750
|
-
helperText?: string;
|
|
3751
|
-
/**
|
|
3752
|
-
* Suffixed text to display after the input.
|
|
3753
|
-
* This is useful for e.g. displaying units of measurement.
|
|
3754
|
-
*/
|
|
3755
|
-
suffix?: string;
|
|
3756
|
-
}
|
|
3757
|
-
type OmittedProps$6 = 'children' | 'readOnly' | 'size';
|
|
3758
|
-
interface TextFieldProps extends Omit<HTMLQdsProps<'input'>, OmittedProps$6>, TextFieldOptions {
|
|
3759
|
-
}
|
|
3760
|
-
declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
|
|
3761
|
-
|
|
3762
|
-
declare const getSizeStyles$2: (theme: {
|
|
3763
|
-
mediaQueries: {
|
|
3764
|
-
readonly smUp: "@media(min-width: 480px)";
|
|
3765
|
-
readonly mdUp: "@media(min-width: 768px)";
|
|
3766
|
-
readonly lgUp: "@media(min-width: 1024px)";
|
|
3767
|
-
readonly xlUp: "@media(min-width: 1280px)";
|
|
3768
|
-
readonly '2xlUp': "@media(min-width: 1536px)";
|
|
3769
|
-
};
|
|
3770
|
-
spacing: {
|
|
3771
|
-
'0x': string;
|
|
3772
|
-
'1x': string;
|
|
3773
|
-
'2x': string;
|
|
3774
|
-
'3x': string;
|
|
3775
|
-
'4x': string;
|
|
3776
|
-
'5x': string;
|
|
3777
|
-
'6x': string;
|
|
3778
|
-
'8x': string;
|
|
3779
|
-
'10x': string;
|
|
3780
|
-
'12x': string;
|
|
3781
|
-
'14x': string;
|
|
3782
|
-
'16x': string;
|
|
3783
|
-
'20x': string;
|
|
3784
|
-
'24x': string;
|
|
3785
|
-
};
|
|
3786
|
-
breakpoints: {
|
|
3787
|
-
readonly base: 0;
|
|
3788
|
-
readonly sm: 480;
|
|
3789
|
-
readonly md: 768;
|
|
3790
|
-
readonly lg: 1024;
|
|
3791
|
-
readonly xl: 1280;
|
|
3792
|
-
readonly '2xl': 1536;
|
|
3793
|
-
};
|
|
3794
|
-
zIndices: {
|
|
3795
|
-
hide: number;
|
|
3796
|
-
auto: string;
|
|
3797
|
-
base: number;
|
|
3798
|
-
docked: number;
|
|
3799
|
-
dropdown: number;
|
|
3800
|
-
sticky: number;
|
|
3801
|
-
banner: number;
|
|
3802
|
-
overlay: number;
|
|
3803
|
-
modal: number;
|
|
3804
|
-
popover: number;
|
|
3805
|
-
skipLink: number;
|
|
3806
|
-
toast: number;
|
|
3807
|
-
tooltip: number;
|
|
3808
|
-
};
|
|
3809
|
-
colors: {
|
|
3810
|
-
core: {
|
|
3811
|
-
black: string;
|
|
3812
|
-
white: string;
|
|
3813
|
-
gray90: string;
|
|
3814
|
-
gray80: string;
|
|
3815
|
-
gray70: string;
|
|
3816
|
-
gray60: string;
|
|
3817
|
-
gray50: string;
|
|
3818
|
-
gray40: string;
|
|
3819
|
-
gray30: string;
|
|
3820
|
-
gray20: string;
|
|
3821
|
-
gray10: string;
|
|
3822
|
-
pink: string;
|
|
3823
|
-
uiPink: string;
|
|
3824
|
-
uiPinkDark: string;
|
|
3825
|
-
uiPinkLight: string;
|
|
3826
|
-
brown: string;
|
|
3827
|
-
brownDark: string;
|
|
3828
|
-
brownLight: string;
|
|
3829
|
-
offWhite: string;
|
|
3830
|
-
offWhiteDark: string;
|
|
3831
|
-
offWhiteLight: string;
|
|
3832
|
-
softPink: string;
|
|
3833
|
-
warmYellow: string;
|
|
3834
|
-
softYellow: string;
|
|
3835
|
-
red90: string;
|
|
3836
|
-
red80: string;
|
|
3837
|
-
red70: string;
|
|
3838
|
-
red60: string;
|
|
3839
|
-
red50: string;
|
|
3840
|
-
red40: string;
|
|
3841
|
-
red30: string;
|
|
3842
|
-
red20: string;
|
|
3843
|
-
red10: string;
|
|
3844
|
-
green90: string;
|
|
3845
|
-
green80: string;
|
|
3846
|
-
green70: string;
|
|
3847
|
-
green60: string;
|
|
3848
|
-
green50: string;
|
|
3849
|
-
green40: string;
|
|
3850
|
-
green30: string;
|
|
3851
|
-
green20: string;
|
|
3852
|
-
green10: string;
|
|
3853
|
-
blue90: string;
|
|
3854
|
-
blue80: string;
|
|
3855
|
-
blue70: string;
|
|
3856
|
-
blue60: string;
|
|
3857
|
-
blue50: string;
|
|
3858
|
-
blue40: string;
|
|
3859
|
-
blue30: string;
|
|
3860
|
-
blue20: string;
|
|
3861
|
-
blue10: string;
|
|
3862
|
-
yellow90: string;
|
|
3863
|
-
yellow80: string;
|
|
3864
|
-
yellow70: string;
|
|
3865
|
-
yellow60: string;
|
|
3866
|
-
yellow50: string;
|
|
3867
|
-
yellow40: string;
|
|
3868
|
-
yellow30: string;
|
|
3869
|
-
yellow20: string;
|
|
3870
|
-
yellow10: string;
|
|
3871
|
-
blackAlpha5: string;
|
|
3872
|
-
blackAlpha10: string;
|
|
3873
|
-
blackAlpha20: string;
|
|
3874
|
-
};
|
|
3875
|
-
bg: {
|
|
3876
|
-
default: string;
|
|
3877
|
-
brandPrimary: string;
|
|
3878
|
-
brandPrimaryHover: string;
|
|
3879
|
-
brandPrimaryActive: string;
|
|
3880
|
-
brandSecondary: string;
|
|
3881
|
-
brandSecondaryHover: string;
|
|
3882
|
-
brandSecondaryActive: string;
|
|
3883
|
-
brandTertiary: string;
|
|
3884
|
-
brandTertiaryHover: string;
|
|
3885
|
-
brandTertiaryActive: string;
|
|
3886
|
-
negative: string;
|
|
3887
|
-
warning: string;
|
|
3888
|
-
positive: string;
|
|
3889
|
-
inset: string;
|
|
3890
|
-
backdrop: string;
|
|
3891
|
-
};
|
|
3892
|
-
text: {
|
|
3893
|
-
strong: string;
|
|
3894
|
-
default: string;
|
|
3895
|
-
subtle: string;
|
|
3896
|
-
disabled: string;
|
|
3897
|
-
negative: string;
|
|
3898
|
-
warning: string;
|
|
3899
|
-
positive: string;
|
|
3900
|
-
onBrandPrimary: string;
|
|
3901
|
-
onBrandSecondary: string;
|
|
3902
|
-
onBrandTertiary: string;
|
|
3903
|
-
};
|
|
3904
|
-
icon: {
|
|
3905
|
-
default: string;
|
|
3906
|
-
strong: string;
|
|
3907
|
-
subtle: string;
|
|
3908
|
-
disabled: string;
|
|
3909
|
-
negative: string;
|
|
3910
|
-
warning: string;
|
|
3911
|
-
positive: string;
|
|
3912
|
-
onBrandPrimary: string;
|
|
3913
|
-
onBrandSecondary: string;
|
|
3914
|
-
onBrandTertiary: string;
|
|
3915
|
-
};
|
|
3916
|
-
border: {
|
|
3917
|
-
default: string;
|
|
3918
|
-
defaultHover: string;
|
|
3919
|
-
defaultSelected: string;
|
|
3920
|
-
strong: string;
|
|
3921
|
-
subtle: string;
|
|
3922
|
-
negative: string;
|
|
3923
|
-
warning: string;
|
|
3924
|
-
positive: string;
|
|
3925
|
-
};
|
|
3926
|
-
};
|
|
3927
|
-
sizes: {
|
|
3928
|
-
112: string;
|
|
3929
|
-
128: string;
|
|
3930
|
-
144: string;
|
|
3931
|
-
160: string;
|
|
3932
|
-
176: string;
|
|
3933
|
-
192: string;
|
|
3934
|
-
224: string;
|
|
3935
|
-
256: string;
|
|
3936
|
-
288: string;
|
|
3937
|
-
320: string;
|
|
3938
|
-
384: string;
|
|
3939
|
-
448: string;
|
|
3940
|
-
512: string;
|
|
3941
|
-
576: string;
|
|
3942
|
-
672: string;
|
|
3943
|
-
768: string;
|
|
3944
|
-
896: string;
|
|
3945
|
-
1024: string;
|
|
3946
|
-
'0x': string;
|
|
3947
|
-
'1x': string;
|
|
3948
|
-
'2x': string;
|
|
3949
|
-
'3x': string;
|
|
3950
|
-
'4x': string;
|
|
3951
|
-
'5x': string;
|
|
3952
|
-
'6x': string;
|
|
3953
|
-
'8x': string;
|
|
3954
|
-
'10x': string;
|
|
3955
|
-
'12x': string;
|
|
3956
|
-
'14x': string;
|
|
3957
|
-
'16x': string;
|
|
3958
|
-
'20x': string;
|
|
3959
|
-
'24x': string;
|
|
3960
|
-
};
|
|
3961
|
-
radii: {
|
|
3962
|
-
none: string;
|
|
3963
|
-
'2xs': string;
|
|
3964
|
-
xs: string;
|
|
3965
|
-
sm: string;
|
|
3966
|
-
md: string;
|
|
3967
|
-
lg: string;
|
|
3968
|
-
xl: string;
|
|
3969
|
-
'2xl': string;
|
|
3970
|
-
full: string;
|
|
3971
|
-
};
|
|
3972
|
-
shadows: {
|
|
3973
|
-
none: string;
|
|
3974
|
-
sm: string;
|
|
3975
|
-
md: string;
|
|
3976
|
-
lg: string;
|
|
3977
|
-
xl: string;
|
|
3978
|
-
};
|
|
3979
|
-
typography: {
|
|
3980
|
-
display: {
|
|
3981
|
-
'3xl': {
|
|
3982
|
-
fontFamily: string;
|
|
3983
|
-
fontWeight: string;
|
|
3984
|
-
fontSize: string;
|
|
3985
|
-
lineHeight: string;
|
|
3986
|
-
letterSpacing: string;
|
|
3987
|
-
fontFeatureSettings: string;
|
|
3988
|
-
};
|
|
3989
|
-
'2xl': {
|
|
3990
|
-
fontFamily: string;
|
|
3991
|
-
fontWeight: string;
|
|
3992
|
-
fontSize: string;
|
|
3993
|
-
lineHeight: string;
|
|
3994
|
-
letterSpacing: string;
|
|
3995
|
-
fontFeatureSettings: string;
|
|
3996
|
-
};
|
|
3997
|
-
xl: {
|
|
3998
|
-
fontFamily: string;
|
|
3999
|
-
fontWeight: string;
|
|
4000
|
-
fontSize: string;
|
|
4001
|
-
lineHeight: string;
|
|
4002
|
-
letterSpacing: string;
|
|
4003
|
-
fontFeatureSettings: string;
|
|
4004
|
-
};
|
|
4005
|
-
lg: {
|
|
4006
|
-
fontFamily: string;
|
|
4007
|
-
fontWeight: string;
|
|
4008
|
-
fontSize: string;
|
|
4009
|
-
lineHeight: string;
|
|
4010
|
-
letterSpacing: string;
|
|
4011
|
-
fontFeatureSettings: string;
|
|
4012
|
-
};
|
|
4013
|
-
md: {
|
|
4014
|
-
fontFamily: string;
|
|
4015
|
-
fontWeight: string;
|
|
4016
|
-
fontSize: string;
|
|
4017
|
-
lineHeight: string;
|
|
4018
|
-
letterSpacing: string;
|
|
4019
|
-
fontFeatureSettings: string;
|
|
4020
|
-
};
|
|
4021
|
-
sm: {
|
|
4022
|
-
fontFamily: string;
|
|
4023
|
-
fontWeight: string;
|
|
4024
|
-
fontSize: string;
|
|
4025
|
-
lineHeight: string;
|
|
4026
|
-
letterSpacing: string;
|
|
4027
|
-
fontFeatureSettings: string;
|
|
4028
|
-
};
|
|
4029
|
-
xs: {
|
|
4030
|
-
fontFamily: string;
|
|
4031
|
-
fontWeight: string;
|
|
4032
|
-
fontSize: string;
|
|
4033
|
-
lineHeight: string;
|
|
4034
|
-
letterSpacing: string;
|
|
4035
|
-
fontFeatureSettings: string;
|
|
4036
|
-
};
|
|
4037
|
-
'2xs': {
|
|
4038
|
-
fontFamily: string;
|
|
4039
|
-
fontWeight: string;
|
|
4040
|
-
fontSize: string;
|
|
4041
|
-
lineHeight: string;
|
|
4042
|
-
letterSpacing: string;
|
|
4043
|
-
fontFeatureSettings: string;
|
|
4044
|
-
};
|
|
4045
|
-
};
|
|
4046
|
-
title: {
|
|
4047
|
-
lg: {
|
|
4048
|
-
fontFamily: string;
|
|
4049
|
-
fontWeight: string;
|
|
4050
|
-
fontSize: string;
|
|
4051
|
-
lineHeight: string;
|
|
4052
|
-
letterSpacing: string;
|
|
4053
|
-
};
|
|
4054
|
-
md: {
|
|
4055
|
-
fontFamily: string;
|
|
4056
|
-
fontWeight: string;
|
|
4057
|
-
fontSize: string;
|
|
4058
|
-
lineHeight: string;
|
|
4059
|
-
letterSpacing: string;
|
|
4060
|
-
};
|
|
4061
|
-
sm: {
|
|
4062
|
-
fontFamily: string;
|
|
4063
|
-
fontWeight: string;
|
|
4064
|
-
fontSize: string;
|
|
4065
|
-
lineHeight: string;
|
|
4066
|
-
letterSpacing: string;
|
|
4067
|
-
};
|
|
4068
|
-
xs: {
|
|
4069
|
-
fontFamily: string;
|
|
4070
|
-
fontWeight: string;
|
|
4071
|
-
fontSize: string;
|
|
4072
|
-
lineHeight: string;
|
|
4073
|
-
letterSpacing: string;
|
|
4074
|
-
};
|
|
4075
|
-
'2xs': {
|
|
4076
|
-
fontFamily: string;
|
|
4077
|
-
fontWeight: string;
|
|
4078
|
-
fontSize: string;
|
|
4079
|
-
lineHeight: string;
|
|
4080
|
-
letterSpacing: string;
|
|
4081
|
-
};
|
|
4082
|
-
'3xs': {
|
|
4083
|
-
fontFamily: string;
|
|
4084
|
-
fontWeight: string;
|
|
4085
|
-
fontSize: string;
|
|
4086
|
-
lineHeight: string;
|
|
4087
|
-
letterSpacing: string;
|
|
4088
|
-
};
|
|
4089
|
-
};
|
|
4090
|
-
body: {
|
|
4091
|
-
xl: {
|
|
4092
|
-
fontFamily: string;
|
|
4093
|
-
fontWeight: string;
|
|
4094
|
-
fontSize: string;
|
|
4095
|
-
lineHeight: string;
|
|
4096
|
-
letterSpacing: string;
|
|
4097
|
-
};
|
|
4098
|
-
lg: {
|
|
4099
|
-
fontFamily: string;
|
|
4100
|
-
fontWeight: string;
|
|
4101
|
-
fontSize: string;
|
|
4102
|
-
lineHeight: string;
|
|
4103
|
-
letterSpacing: string;
|
|
4104
|
-
};
|
|
4105
|
-
md: {
|
|
4106
|
-
fontFamily: string;
|
|
4107
|
-
fontWeight: string;
|
|
4108
|
-
fontSize: string;
|
|
4109
|
-
lineHeight: string;
|
|
4110
|
-
letterSpacing: string;
|
|
4111
|
-
};
|
|
4112
|
-
sm: {
|
|
4113
|
-
fontFamily: string;
|
|
4114
|
-
fontWeight: string;
|
|
4115
|
-
fontSize: string;
|
|
4116
|
-
lineHeight: string;
|
|
4117
|
-
letterSpacing: string;
|
|
4118
|
-
};
|
|
4119
|
-
xs: {
|
|
4120
|
-
fontFamily: string;
|
|
4121
|
-
fontWeight: string;
|
|
4122
|
-
fontSize: string;
|
|
4123
|
-
lineHeight: string;
|
|
4124
|
-
letterSpacing: string;
|
|
4125
|
-
};
|
|
4126
|
-
};
|
|
4127
|
-
label: {
|
|
4128
|
-
md: {
|
|
4129
|
-
fontFamily: string;
|
|
4130
|
-
fontWeight: string;
|
|
4131
|
-
fontSize: string;
|
|
4132
|
-
lineHeight: string;
|
|
4133
|
-
letterSpacing: string;
|
|
4134
|
-
};
|
|
4135
|
-
sm: {
|
|
4136
|
-
fontFamily: string;
|
|
4137
|
-
fontWeight: string;
|
|
4138
|
-
fontSize: string;
|
|
4139
|
-
lineHeight: string;
|
|
4140
|
-
letterSpacing: string;
|
|
4141
|
-
};
|
|
4142
|
-
};
|
|
4143
|
-
button: {
|
|
4144
|
-
md: {
|
|
4145
|
-
fontFamily: string;
|
|
4146
|
-
fontWeight: string;
|
|
4147
|
-
fontSize: string;
|
|
4148
|
-
lineHeight: string;
|
|
4149
|
-
letterSpacing: string;
|
|
4150
|
-
};
|
|
4151
|
-
sm: {
|
|
4152
|
-
fontFamily: string;
|
|
4153
|
-
fontWeight: string;
|
|
4154
|
-
fontSize: string;
|
|
4155
|
-
lineHeight: string;
|
|
4156
|
-
letterSpacing: string;
|
|
4157
|
-
};
|
|
4158
|
-
};
|
|
4159
|
-
caption: {
|
|
4160
|
-
md: {
|
|
4161
|
-
fontFamily: string;
|
|
4162
|
-
fontWeight: string;
|
|
4163
|
-
fontSize: string;
|
|
4164
|
-
lineHeight: string;
|
|
4165
|
-
letterSpacing: string;
|
|
4166
|
-
};
|
|
4167
|
-
sm: {
|
|
4168
|
-
fontFamily: string;
|
|
4169
|
-
fontWeight: string;
|
|
4170
|
-
fontSize: string;
|
|
4171
|
-
lineHeight: string;
|
|
4172
|
-
letterSpacing: string;
|
|
4173
|
-
};
|
|
4174
|
-
};
|
|
4175
|
-
};
|
|
4176
|
-
}) => {
|
|
4177
|
-
sm: {
|
|
4178
|
-
fontFamily: string;
|
|
4179
|
-
fontWeight: string;
|
|
4180
|
-
fontSize: string;
|
|
4181
|
-
lineHeight: string;
|
|
4182
|
-
letterSpacing: string;
|
|
4183
|
-
};
|
|
4184
|
-
md: {
|
|
4185
|
-
fontFamily: string;
|
|
4186
|
-
fontWeight: string;
|
|
4187
|
-
fontSize: string;
|
|
4188
|
-
lineHeight: string;
|
|
4189
|
-
letterSpacing: string;
|
|
4190
|
-
};
|
|
4191
|
-
};
|
|
4192
|
-
type LabelSize = VariantProps<typeof getSizeStyles$2>;
|
|
4193
|
-
type LabelColor = keyof Theme['colors']['text'];
|
|
4194
|
-
interface LabelOptions {
|
|
4195
|
-
/**
|
|
4196
|
-
* Size of the label
|
|
4197
|
-
*/
|
|
4198
|
-
size?: ResponsiveProp<LabelSize>;
|
|
4199
|
-
/**
|
|
4200
|
-
* Sets the color of the label
|
|
4201
|
-
* @default 'default'
|
|
4202
|
-
*/
|
|
4203
|
-
color?: LabelColor;
|
|
4204
|
-
}
|
|
4205
|
-
type LabelComponent = ForwardRefComponent<'label', LabelOptions>;
|
|
4206
|
-
type LabelProps = PropsOf<LabelComponent>;
|
|
4207
|
-
declare const Label: LabelComponent;
|
|
4208
|
-
|
|
4209
|
-
interface LinkOptions {
|
|
4210
|
-
/**
|
|
4211
|
-
* The URL to link to.
|
|
4212
|
-
*/
|
|
4213
|
-
href?: string;
|
|
4214
|
-
/**
|
|
4215
|
-
* If `true`, the link will open in new tab
|
|
4216
|
-
*/
|
|
4217
|
-
isExternal?: boolean;
|
|
4218
|
-
}
|
|
4219
|
-
type LinkComponent = ForwardRefComponent<'a', LinkOptions>;
|
|
4220
|
-
type LinkProps = PropsOf<LinkComponent>;
|
|
4221
|
-
declare const Link: LinkComponent;
|
|
4222
|
-
|
|
4223
|
-
declare const getSizeStyles$1: (theme: {
|
|
4224
|
-
mediaQueries: {
|
|
4225
|
-
readonly smUp: "@media(min-width: 480px)";
|
|
4226
|
-
readonly mdUp: "@media(min-width: 768px)";
|
|
4227
|
-
readonly lgUp: "@media(min-width: 1024px)";
|
|
4228
|
-
readonly xlUp: "@media(min-width: 1280px)";
|
|
4229
|
-
readonly '2xlUp': "@media(min-width: 1536px)";
|
|
4230
|
-
};
|
|
4231
|
-
spacing: {
|
|
4232
|
-
'0x': string;
|
|
4233
|
-
'1x': string;
|
|
4234
|
-
'2x': string;
|
|
4235
|
-
'3x': string;
|
|
4236
|
-
'4x': string;
|
|
4237
|
-
'5x': string;
|
|
4238
|
-
'6x': string;
|
|
4239
|
-
'8x': string;
|
|
4240
|
-
'10x': string;
|
|
4241
|
-
'12x': string;
|
|
4242
|
-
'14x': string;
|
|
4243
|
-
'16x': string;
|
|
4244
|
-
'20x': string;
|
|
4245
|
-
'24x': string;
|
|
4246
|
-
};
|
|
4247
|
-
breakpoints: {
|
|
4248
|
-
readonly base: 0;
|
|
4249
|
-
readonly sm: 480;
|
|
4250
|
-
readonly md: 768;
|
|
4251
|
-
readonly lg: 1024;
|
|
4252
|
-
readonly xl: 1280;
|
|
4253
|
-
readonly '2xl': 1536;
|
|
4254
|
-
};
|
|
4255
|
-
zIndices: {
|
|
4256
|
-
hide: number;
|
|
4257
|
-
auto: string;
|
|
4258
|
-
base: number;
|
|
4259
|
-
docked: number;
|
|
4260
|
-
dropdown: number;
|
|
4261
|
-
sticky: number;
|
|
4262
|
-
banner: number;
|
|
4263
|
-
overlay: number;
|
|
4264
|
-
modal: number;
|
|
4265
|
-
popover: number;
|
|
4266
|
-
skipLink: number;
|
|
4267
|
-
toast: number;
|
|
4268
|
-
tooltip: number;
|
|
4269
|
-
};
|
|
4270
|
-
colors: {
|
|
4271
|
-
core: {
|
|
4272
|
-
black: string;
|
|
4273
|
-
white: string;
|
|
4274
|
-
gray90: string;
|
|
4275
|
-
gray80: string;
|
|
4276
|
-
gray70: string;
|
|
4277
|
-
gray60: string;
|
|
4278
|
-
gray50: string;
|
|
4279
|
-
gray40: string;
|
|
4280
|
-
gray30: string;
|
|
4281
|
-
gray20: string;
|
|
4282
|
-
gray10: string;
|
|
4283
|
-
pink: string;
|
|
4284
|
-
uiPink: string;
|
|
4285
|
-
uiPinkDark: string;
|
|
4286
|
-
uiPinkLight: string;
|
|
4287
|
-
brown: string;
|
|
4288
|
-
brownDark: string;
|
|
4289
|
-
brownLight: string;
|
|
4290
|
-
offWhite: string;
|
|
4291
|
-
offWhiteDark: string;
|
|
4292
|
-
offWhiteLight: string;
|
|
4293
|
-
softPink: string;
|
|
4294
|
-
warmYellow: string;
|
|
4295
|
-
softYellow: string;
|
|
4296
|
-
red90: string;
|
|
4297
|
-
red80: string;
|
|
4298
|
-
red70: string;
|
|
4299
|
-
red60: string;
|
|
4300
|
-
red50: string;
|
|
4301
|
-
red40: string;
|
|
4302
|
-
red30: string;
|
|
4303
|
-
red20: string;
|
|
4304
|
-
red10: string;
|
|
4305
|
-
green90: string;
|
|
4306
|
-
green80: string;
|
|
4307
|
-
green70: string;
|
|
4308
|
-
green60: string;
|
|
4309
|
-
green50: string;
|
|
4310
|
-
green40: string;
|
|
4311
|
-
green30: string;
|
|
4312
|
-
green20: string;
|
|
4313
|
-
green10: string;
|
|
4314
|
-
blue90: string;
|
|
4315
|
-
blue80: string;
|
|
4316
|
-
blue70: string;
|
|
4317
|
-
blue60: string;
|
|
4318
|
-
blue50: string;
|
|
4319
|
-
blue40: string;
|
|
4320
|
-
blue30: string;
|
|
4321
|
-
blue20: string;
|
|
4322
|
-
blue10: string;
|
|
4323
|
-
yellow90: string;
|
|
4324
|
-
yellow80: string;
|
|
4325
|
-
yellow70: string;
|
|
4326
|
-
yellow60: string;
|
|
4327
|
-
yellow50: string;
|
|
4328
|
-
yellow40: string;
|
|
4329
|
-
yellow30: string;
|
|
4330
|
-
yellow20: string;
|
|
4331
|
-
yellow10: string;
|
|
4332
|
-
blackAlpha5: string;
|
|
4333
|
-
blackAlpha10: string;
|
|
4334
|
-
blackAlpha20: string;
|
|
4335
|
-
};
|
|
4336
|
-
bg: {
|
|
4337
|
-
default: string;
|
|
4338
|
-
brandPrimary: string;
|
|
4339
|
-
brandPrimaryHover: string;
|
|
4340
|
-
brandPrimaryActive: string;
|
|
4341
|
-
brandSecondary: string;
|
|
4342
|
-
brandSecondaryHover: string;
|
|
4343
|
-
brandSecondaryActive: string;
|
|
4344
|
-
brandTertiary: string;
|
|
4345
|
-
brandTertiaryHover: string;
|
|
4346
|
-
brandTertiaryActive: string;
|
|
4347
|
-
negative: string;
|
|
4348
|
-
warning: string;
|
|
4349
|
-
positive: string;
|
|
4350
|
-
inset: string;
|
|
4351
|
-
backdrop: string;
|
|
4352
|
-
};
|
|
4353
|
-
text: {
|
|
4354
|
-
strong: string;
|
|
4355
|
-
default: string;
|
|
4356
|
-
subtle: string;
|
|
4357
|
-
disabled: string;
|
|
4358
|
-
negative: string;
|
|
4359
|
-
warning: string;
|
|
4360
|
-
positive: string;
|
|
4361
|
-
onBrandPrimary: string;
|
|
4362
|
-
onBrandSecondary: string;
|
|
4363
|
-
onBrandTertiary: string;
|
|
4364
|
-
};
|
|
4365
|
-
icon: {
|
|
4366
|
-
default: string;
|
|
4367
|
-
strong: string;
|
|
4368
|
-
subtle: string;
|
|
4369
|
-
disabled: string;
|
|
4370
|
-
negative: string;
|
|
4371
|
-
warning: string;
|
|
4372
|
-
positive: string;
|
|
4373
|
-
onBrandPrimary: string;
|
|
4374
|
-
onBrandSecondary: string;
|
|
4375
|
-
onBrandTertiary: string;
|
|
4376
|
-
};
|
|
4377
|
-
border: {
|
|
4378
|
-
default: string;
|
|
4379
|
-
defaultHover: string;
|
|
4380
|
-
defaultSelected: string;
|
|
4381
|
-
strong: string;
|
|
4382
|
-
subtle: string;
|
|
4383
|
-
negative: string;
|
|
4384
|
-
warning: string;
|
|
4385
|
-
positive: string;
|
|
4386
|
-
};
|
|
4387
|
-
};
|
|
4388
|
-
sizes: {
|
|
4389
|
-
112: string;
|
|
4390
|
-
128: string;
|
|
4391
|
-
144: string;
|
|
4392
|
-
160: string;
|
|
4393
|
-
176: string;
|
|
4394
|
-
192: string;
|
|
4395
|
-
224: string;
|
|
4396
|
-
256: string;
|
|
4397
|
-
288: string;
|
|
4398
|
-
320: string;
|
|
4399
|
-
384: string;
|
|
4400
|
-
448: string;
|
|
4401
|
-
512: string;
|
|
4402
|
-
576: string;
|
|
4403
|
-
672: string;
|
|
4404
|
-
768: string;
|
|
4405
|
-
896: string;
|
|
4406
|
-
1024: string;
|
|
4407
|
-
'0x': string;
|
|
4408
|
-
'1x': string;
|
|
4409
|
-
'2x': string;
|
|
4410
|
-
'3x': string;
|
|
4411
|
-
'4x': string;
|
|
4412
|
-
'5x': string;
|
|
4413
|
-
'6x': string;
|
|
4414
|
-
'8x': string;
|
|
4415
|
-
'10x': string;
|
|
4416
|
-
'12x': string;
|
|
4417
|
-
'14x': string;
|
|
4418
|
-
'16x': string;
|
|
4419
|
-
'20x': string;
|
|
4420
|
-
'24x': string;
|
|
4421
|
-
};
|
|
4422
|
-
radii: {
|
|
4423
|
-
none: string;
|
|
4424
|
-
'2xs': string;
|
|
4425
|
-
xs: string;
|
|
4426
|
-
sm: string;
|
|
4427
|
-
md: string;
|
|
4428
|
-
lg: string;
|
|
4429
|
-
xl: string;
|
|
4430
|
-
'2xl': string;
|
|
4431
|
-
full: string;
|
|
4432
|
-
};
|
|
4433
|
-
shadows: {
|
|
4434
|
-
none: string;
|
|
4435
|
-
sm: string;
|
|
4436
|
-
md: string;
|
|
4437
|
-
lg: string;
|
|
4438
|
-
xl: string;
|
|
4439
|
-
};
|
|
4440
|
-
typography: {
|
|
4441
|
-
display: {
|
|
4442
|
-
'3xl': {
|
|
4443
|
-
fontFamily: string;
|
|
4444
|
-
fontWeight: string;
|
|
4445
|
-
fontSize: string;
|
|
4446
|
-
lineHeight: string;
|
|
4447
|
-
letterSpacing: string;
|
|
4448
|
-
fontFeatureSettings: string;
|
|
4449
|
-
};
|
|
4450
|
-
'2xl': {
|
|
4451
|
-
fontFamily: string;
|
|
4452
|
-
fontWeight: string;
|
|
4453
|
-
fontSize: string;
|
|
4454
|
-
lineHeight: string;
|
|
4455
|
-
letterSpacing: string;
|
|
4456
|
-
fontFeatureSettings: string;
|
|
4457
|
-
};
|
|
4458
|
-
xl: {
|
|
4459
|
-
fontFamily: string;
|
|
4460
|
-
fontWeight: string;
|
|
4461
|
-
fontSize: string;
|
|
4462
|
-
lineHeight: string;
|
|
4463
|
-
letterSpacing: string;
|
|
4464
|
-
fontFeatureSettings: string;
|
|
4465
|
-
};
|
|
4466
|
-
lg: {
|
|
4467
|
-
fontFamily: string;
|
|
4468
|
-
fontWeight: string;
|
|
4469
|
-
fontSize: string;
|
|
4470
|
-
lineHeight: string;
|
|
4471
|
-
letterSpacing: string;
|
|
4472
|
-
fontFeatureSettings: string;
|
|
4473
|
-
};
|
|
4474
|
-
md: {
|
|
4475
|
-
fontFamily: string;
|
|
4476
|
-
fontWeight: string;
|
|
4477
|
-
fontSize: string;
|
|
4478
|
-
lineHeight: string;
|
|
4479
|
-
letterSpacing: string;
|
|
4480
|
-
fontFeatureSettings: string;
|
|
4481
|
-
};
|
|
4482
|
-
sm: {
|
|
4483
|
-
fontFamily: string;
|
|
4484
|
-
fontWeight: string;
|
|
4485
|
-
fontSize: string;
|
|
4486
|
-
lineHeight: string;
|
|
4487
|
-
letterSpacing: string;
|
|
4488
|
-
fontFeatureSettings: string;
|
|
4489
|
-
};
|
|
4490
|
-
xs: {
|
|
4491
|
-
fontFamily: string;
|
|
4492
|
-
fontWeight: string;
|
|
4493
|
-
fontSize: string;
|
|
4494
|
-
lineHeight: string;
|
|
4495
|
-
letterSpacing: string;
|
|
4496
|
-
fontFeatureSettings: string;
|
|
4497
|
-
};
|
|
4498
|
-
'2xs': {
|
|
4499
|
-
fontFamily: string;
|
|
4500
|
-
fontWeight: string;
|
|
4501
|
-
fontSize: string;
|
|
4502
|
-
lineHeight: string;
|
|
4503
|
-
letterSpacing: string;
|
|
4504
|
-
fontFeatureSettings: string;
|
|
4505
|
-
};
|
|
4506
|
-
};
|
|
4507
|
-
title: {
|
|
4508
|
-
lg: {
|
|
4509
|
-
fontFamily: string;
|
|
4510
|
-
fontWeight: string;
|
|
4511
|
-
fontSize: string;
|
|
4512
|
-
lineHeight: string;
|
|
4513
|
-
letterSpacing: string;
|
|
4514
|
-
};
|
|
4515
|
-
md: {
|
|
4516
|
-
fontFamily: string;
|
|
4517
|
-
fontWeight: string;
|
|
4518
|
-
fontSize: string;
|
|
4519
|
-
lineHeight: string;
|
|
4520
|
-
letterSpacing: string;
|
|
4521
|
-
};
|
|
4522
|
-
sm: {
|
|
4523
|
-
fontFamily: string;
|
|
4524
|
-
fontWeight: string;
|
|
4525
|
-
fontSize: string;
|
|
4526
|
-
lineHeight: string;
|
|
4527
|
-
letterSpacing: string;
|
|
4528
|
-
};
|
|
4529
|
-
xs: {
|
|
4530
|
-
fontFamily: string;
|
|
4531
|
-
fontWeight: string;
|
|
4532
|
-
fontSize: string;
|
|
4533
|
-
lineHeight: string;
|
|
4534
|
-
letterSpacing: string;
|
|
4535
|
-
};
|
|
4536
|
-
'2xs': {
|
|
4537
|
-
fontFamily: string;
|
|
4538
|
-
fontWeight: string;
|
|
4539
|
-
fontSize: string;
|
|
4540
|
-
lineHeight: string;
|
|
4541
|
-
letterSpacing: string;
|
|
4542
|
-
};
|
|
4543
|
-
'3xs': {
|
|
4544
|
-
fontFamily: string;
|
|
4545
|
-
fontWeight: string;
|
|
4546
|
-
fontSize: string;
|
|
4547
|
-
lineHeight: string;
|
|
4548
|
-
letterSpacing: string;
|
|
4549
|
-
};
|
|
4550
|
-
};
|
|
4551
|
-
body: {
|
|
4552
|
-
xl: {
|
|
4553
|
-
fontFamily: string;
|
|
4554
|
-
fontWeight: string;
|
|
4555
|
-
fontSize: string;
|
|
4556
|
-
lineHeight: string;
|
|
4557
|
-
letterSpacing: string;
|
|
4558
|
-
};
|
|
4559
|
-
lg: {
|
|
4560
|
-
fontFamily: string;
|
|
4561
|
-
fontWeight: string;
|
|
4562
|
-
fontSize: string;
|
|
4563
|
-
lineHeight: string;
|
|
4564
|
-
letterSpacing: string;
|
|
4565
|
-
};
|
|
4566
|
-
md: {
|
|
4567
|
-
fontFamily: string;
|
|
4568
|
-
fontWeight: string;
|
|
4569
|
-
fontSize: string;
|
|
4570
|
-
lineHeight: string;
|
|
4571
|
-
letterSpacing: string;
|
|
4572
|
-
};
|
|
4573
|
-
sm: {
|
|
4574
|
-
fontFamily: string;
|
|
4575
|
-
fontWeight: string;
|
|
4576
|
-
fontSize: string;
|
|
4577
|
-
lineHeight: string;
|
|
4578
|
-
letterSpacing: string;
|
|
4579
|
-
};
|
|
4580
|
-
xs: {
|
|
4581
|
-
fontFamily: string;
|
|
4582
|
-
fontWeight: string;
|
|
4583
|
-
fontSize: string;
|
|
4584
|
-
lineHeight: string;
|
|
4585
|
-
letterSpacing: string;
|
|
4586
|
-
};
|
|
4587
|
-
};
|
|
4588
|
-
label: {
|
|
4589
|
-
md: {
|
|
4590
|
-
fontFamily: string;
|
|
4591
|
-
fontWeight: string;
|
|
4592
|
-
fontSize: string;
|
|
4593
|
-
lineHeight: string;
|
|
4594
|
-
letterSpacing: string;
|
|
4595
|
-
};
|
|
4596
|
-
sm: {
|
|
4597
|
-
fontFamily: string;
|
|
4598
|
-
fontWeight: string;
|
|
4599
|
-
fontSize: string;
|
|
4600
|
-
lineHeight: string;
|
|
4601
|
-
letterSpacing: string;
|
|
4602
|
-
};
|
|
4603
|
-
};
|
|
4604
|
-
button: {
|
|
4605
|
-
md: {
|
|
4606
|
-
fontFamily: string;
|
|
4607
|
-
fontWeight: string;
|
|
4608
|
-
fontSize: string;
|
|
4609
|
-
lineHeight: string;
|
|
4610
|
-
letterSpacing: string;
|
|
4611
|
-
};
|
|
4612
|
-
sm: {
|
|
4613
|
-
fontFamily: string;
|
|
4614
|
-
fontWeight: string;
|
|
4615
|
-
fontSize: string;
|
|
4616
|
-
lineHeight: string;
|
|
4617
|
-
letterSpacing: string;
|
|
4618
|
-
};
|
|
4619
|
-
};
|
|
4620
|
-
caption: {
|
|
4621
|
-
md: {
|
|
4622
|
-
fontFamily: string;
|
|
4623
|
-
fontWeight: string;
|
|
4624
|
-
fontSize: string;
|
|
4625
|
-
lineHeight: string;
|
|
4626
|
-
letterSpacing: string;
|
|
4627
|
-
};
|
|
4628
|
-
sm: {
|
|
4629
|
-
fontFamily: string;
|
|
4630
|
-
fontWeight: string;
|
|
4631
|
-
fontSize: string;
|
|
4632
|
-
lineHeight: string;
|
|
4633
|
-
letterSpacing: string;
|
|
4634
|
-
};
|
|
4635
|
-
};
|
|
4636
|
-
};
|
|
4637
|
-
}) => {
|
|
4638
|
-
sm: {
|
|
4639
|
-
fontSize: string;
|
|
4640
|
-
};
|
|
4641
|
-
md: {
|
|
4642
|
-
fontSize: string;
|
|
4643
|
-
};
|
|
4644
|
-
};
|
|
4645
|
-
type LoadingDotsSize = VariantProps<typeof getSizeStyles$1>;
|
|
4646
|
-
interface LoadingDotsOptions {
|
|
4647
|
-
size?: ResponsiveProp<LoadingDotsSize>;
|
|
1219
|
+
interface ButtonOptions {
|
|
1220
|
+
/**
|
|
1221
|
+
* Sets the size of the button
|
|
1222
|
+
* @default 'md'
|
|
1223
|
+
*/
|
|
1224
|
+
size?: ResponsiveProp<ButtonSize>;
|
|
1225
|
+
/**
|
|
1226
|
+
* Sets the style variant of the button
|
|
1227
|
+
* @default 'secondary'
|
|
1228
|
+
*/
|
|
1229
|
+
variant?: ButtonVariant;
|
|
1230
|
+
/**
|
|
1231
|
+
* If `true` the button will fill its container
|
|
1232
|
+
* @default false
|
|
1233
|
+
*/
|
|
1234
|
+
isFullWidth?: boolean;
|
|
1235
|
+
/**
|
|
1236
|
+
* If `true` the button will show a spinner
|
|
1237
|
+
* @default false
|
|
1238
|
+
*/
|
|
1239
|
+
isLoading?: boolean;
|
|
1240
|
+
/**
|
|
1241
|
+
* If `true` the button will be disabled
|
|
1242
|
+
* @default false
|
|
1243
|
+
*/
|
|
1244
|
+
isDisabled?: boolean;
|
|
1245
|
+
/**
|
|
1246
|
+
* Icon to display before the button label
|
|
1247
|
+
*/
|
|
1248
|
+
iconLeft?: ElementType<IconProps>;
|
|
1249
|
+
/**
|
|
1250
|
+
* Icon to display after the button label
|
|
1251
|
+
*/
|
|
1252
|
+
iconRight?: ElementType<IconProps>;
|
|
1253
|
+
/**
|
|
1254
|
+
* The HTML `type` attribute
|
|
1255
|
+
* @default 'button'
|
|
1256
|
+
*/
|
|
1257
|
+
type?: 'button' | 'submit' | 'reset';
|
|
1258
|
+
}
|
|
1259
|
+
|
|
1260
|
+
type PolymorphicButton = ForwardRefComponent<'button', ButtonOptions>;
|
|
1261
|
+
type ButtonProps = PropsOf<PolymorphicButton>;
|
|
1262
|
+
declare const Button: PolymorphicButton;
|
|
1263
|
+
|
|
1264
|
+
type DisplaySize = keyof Theme['typography']['display'];
|
|
1265
|
+
type DisplayTextAlign = 'left' | 'center' | 'right';
|
|
1266
|
+
type DisplayTextWrap = 'pretty' | 'balance' | 'wrap' | 'nowrap' | 'stable';
|
|
1267
|
+
interface DisplayTextOptions {
|
|
1268
|
+
/**
|
|
1269
|
+
* Sets the visual size of the display text.
|
|
1270
|
+
* To override the rendered tag, use the `as` prop.
|
|
1271
|
+
*
|
|
1272
|
+
* @default 'md'
|
|
1273
|
+
*/
|
|
1274
|
+
size?: ResponsiveProp<DisplaySize>;
|
|
1275
|
+
/**
|
|
1276
|
+
* Sets the text alignment
|
|
1277
|
+
*
|
|
1278
|
+
* @default 'left'
|
|
1279
|
+
*/
|
|
1280
|
+
textAlign?: DisplayTextAlign;
|
|
1281
|
+
/**
|
|
1282
|
+
* Sets the text wrapping
|
|
1283
|
+
*
|
|
1284
|
+
* See [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap)
|
|
1285
|
+
*
|
|
1286
|
+
* @default 'pretty'
|
|
1287
|
+
*/
|
|
1288
|
+
textWrap?: DisplayTextWrap;
|
|
1289
|
+
}
|
|
1290
|
+
type DisplayTextComponent = ForwardRefComponent<'h2', DisplayTextOptions>;
|
|
1291
|
+
type DisplayTextProps = PropsOf<DisplayTextComponent>;
|
|
1292
|
+
declare const DisplayText: DisplayTextComponent;
|
|
1293
|
+
|
|
1294
|
+
interface CheckboxOptions {
|
|
1295
|
+
/**
|
|
1296
|
+
* The label for the checkbox. Accepts a string, or a React component for rendering links within the label.
|
|
1297
|
+
*
|
|
1298
|
+
* @example
|
|
1299
|
+
* ```jsx
|
|
1300
|
+
* <Checkbox label="I agree to the terms and conditions" />
|
|
1301
|
+
* ```
|
|
1302
|
+
*
|
|
1303
|
+
* @example
|
|
1304
|
+
* ```jsx
|
|
1305
|
+
* <Checkbox
|
|
1306
|
+
* label={
|
|
1307
|
+
* <>
|
|
1308
|
+
* I agree to <Link href="/terms">the terms and conditions</Link>
|
|
1309
|
+
* </>
|
|
1310
|
+
* }
|
|
1311
|
+
* />
|
|
1312
|
+
* ```
|
|
1313
|
+
*/
|
|
1314
|
+
label: string | ReactElement<unknown>;
|
|
1315
|
+
/**
|
|
1316
|
+
* Text that provides additional guidance to the user
|
|
1317
|
+
*/
|
|
1318
|
+
helperText?: string;
|
|
1319
|
+
/**
|
|
1320
|
+
* The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
|
|
1321
|
+
*/
|
|
1322
|
+
isDefaultChecked?: boolean;
|
|
1323
|
+
/**
|
|
1324
|
+
* The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
|
|
1325
|
+
*/
|
|
1326
|
+
defaultChecked?: boolean;
|
|
1327
|
+
/**
|
|
1328
|
+
* The controlled checked state of the checkbox. Must be used in conjunction with `onCheckedChange`.
|
|
1329
|
+
*/
|
|
1330
|
+
isChecked?: boolean;
|
|
1331
|
+
/**
|
|
1332
|
+
* The controlled checked state of the checkbox. Must be used in conjunction with `onCheckedChange`.
|
|
1333
|
+
*/
|
|
1334
|
+
checked?: boolean;
|
|
1335
|
+
/**
|
|
1336
|
+
* Event handler called when the checked state of the checkbox changes.
|
|
1337
|
+
*/
|
|
1338
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
1339
|
+
/**
|
|
1340
|
+
* If `true` the checkbox will render in its invalid state.
|
|
1341
|
+
* @default false
|
|
1342
|
+
*/
|
|
1343
|
+
isInvalid?: boolean;
|
|
1344
|
+
/**
|
|
1345
|
+
* The error message to display if `isInvalid` is `true`
|
|
1346
|
+
*/
|
|
1347
|
+
errorMessage?: string;
|
|
1348
|
+
/**
|
|
1349
|
+
* If `true` it prevents the user from interacting with the checkbox.
|
|
1350
|
+
* @default false
|
|
1351
|
+
*/
|
|
1352
|
+
isDisabled?: boolean;
|
|
1353
|
+
/**
|
|
1354
|
+
* If `true` the user must check the checkbox before the owning form can be submitted.
|
|
1355
|
+
* @default false
|
|
1356
|
+
*/
|
|
1357
|
+
isRequired?: boolean;
|
|
1358
|
+
/**
|
|
1359
|
+
* The name of the checkbox. Submitted with its owning form as part of a name/value pair.
|
|
1360
|
+
*/
|
|
1361
|
+
name?: string;
|
|
1362
|
+
/**
|
|
1363
|
+
* The value given as data when submitted with a `name`.
|
|
1364
|
+
*/
|
|
1365
|
+
value?: string;
|
|
1366
|
+
}
|
|
1367
|
+
type CheckboxProps = Omit<CheckboxPrimitive.CheckboxProps, 'asChild' | 'children' | 'checked' | 'defaultChecked' | keyof CheckboxOptions> & CheckboxOptions;
|
|
1368
|
+
declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps, "children" | "asChild" | keyof CheckboxOptions> & CheckboxOptions & react.RefAttributes<HTMLButtonElement>>;
|
|
1369
|
+
|
|
1370
|
+
interface DividerOptions {
|
|
1371
|
+
/**
|
|
1372
|
+
* The orientation of the divider.
|
|
1373
|
+
*
|
|
1374
|
+
* @default 'horizontal'
|
|
1375
|
+
*/
|
|
1376
|
+
orientation?: 'horizontal' | 'vertical';
|
|
4648
1377
|
}
|
|
4649
|
-
interface
|
|
1378
|
+
interface DividerProps extends HTMLQdsProps<'span'>, DividerOptions {
|
|
4650
1379
|
}
|
|
4651
|
-
declare const
|
|
1380
|
+
declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
|
|
4652
1381
|
|
|
4653
|
-
|
|
4654
|
-
|
|
4655
|
-
|
|
4656
|
-
|
|
4657
|
-
|
|
4658
|
-
|
|
4659
|
-
|
|
4660
|
-
|
|
4661
|
-
|
|
4662
|
-
|
|
4663
|
-
|
|
4664
|
-
|
|
4665
|
-
|
|
4666
|
-
|
|
4667
|
-
|
|
4668
|
-
|
|
4669
|
-
|
|
4670
|
-
|
|
4671
|
-
|
|
4672
|
-
|
|
4673
|
-
|
|
4674
|
-
|
|
4675
|
-
|
|
4676
|
-
|
|
4677
|
-
|
|
4678
|
-
|
|
4679
|
-
|
|
4680
|
-
|
|
4681
|
-
|
|
4682
|
-
|
|
4683
|
-
|
|
4684
|
-
|
|
4685
|
-
|
|
4686
|
-
|
|
4687
|
-
|
|
4688
|
-
|
|
4689
|
-
|
|
4690
|
-
|
|
4691
|
-
|
|
4692
|
-
|
|
4693
|
-
|
|
4694
|
-
|
|
4695
|
-
|
|
4696
|
-
|
|
4697
|
-
|
|
4698
|
-
|
|
4699
|
-
|
|
4700
|
-
|
|
4701
|
-
|
|
4702
|
-
|
|
4703
|
-
|
|
4704
|
-
|
|
4705
|
-
|
|
4706
|
-
|
|
4707
|
-
|
|
4708
|
-
|
|
4709
|
-
|
|
4710
|
-
|
|
4711
|
-
|
|
4712
|
-
|
|
4713
|
-
|
|
4714
|
-
|
|
4715
|
-
|
|
4716
|
-
|
|
4717
|
-
|
|
4718
|
-
|
|
4719
|
-
|
|
4720
|
-
|
|
4721
|
-
|
|
4722
|
-
|
|
4723
|
-
|
|
4724
|
-
|
|
4725
|
-
|
|
4726
|
-
|
|
4727
|
-
|
|
4728
|
-
|
|
4729
|
-
|
|
4730
|
-
|
|
4731
|
-
|
|
4732
|
-
|
|
4733
|
-
|
|
4734
|
-
|
|
4735
|
-
|
|
4736
|
-
|
|
4737
|
-
|
|
4738
|
-
|
|
4739
|
-
|
|
4740
|
-
|
|
4741
|
-
|
|
4742
|
-
|
|
4743
|
-
|
|
4744
|
-
|
|
4745
|
-
|
|
4746
|
-
|
|
4747
|
-
|
|
4748
|
-
|
|
4749
|
-
|
|
4750
|
-
|
|
4751
|
-
|
|
4752
|
-
|
|
4753
|
-
|
|
4754
|
-
|
|
4755
|
-
|
|
4756
|
-
|
|
4757
|
-
|
|
4758
|
-
|
|
4759
|
-
|
|
4760
|
-
|
|
4761
|
-
|
|
4762
|
-
|
|
4763
|
-
|
|
4764
|
-
|
|
4765
|
-
|
|
4766
|
-
|
|
4767
|
-
|
|
4768
|
-
|
|
4769
|
-
|
|
4770
|
-
|
|
4771
|
-
|
|
4772
|
-
|
|
4773
|
-
|
|
4774
|
-
|
|
4775
|
-
|
|
4776
|
-
|
|
4777
|
-
|
|
4778
|
-
|
|
4779
|
-
|
|
4780
|
-
|
|
4781
|
-
|
|
4782
|
-
|
|
4783
|
-
|
|
4784
|
-
|
|
4785
|
-
|
|
4786
|
-
|
|
4787
|
-
|
|
4788
|
-
|
|
4789
|
-
|
|
4790
|
-
|
|
4791
|
-
|
|
4792
|
-
|
|
4793
|
-
|
|
4794
|
-
|
|
4795
|
-
|
|
4796
|
-
|
|
4797
|
-
|
|
4798
|
-
|
|
4799
|
-
|
|
4800
|
-
|
|
4801
|
-
|
|
4802
|
-
|
|
4803
|
-
|
|
4804
|
-
|
|
4805
|
-
|
|
4806
|
-
|
|
4807
|
-
|
|
4808
|
-
|
|
4809
|
-
|
|
4810
|
-
|
|
4811
|
-
strong: string;
|
|
4812
|
-
subtle: string;
|
|
4813
|
-
negative: string;
|
|
4814
|
-
warning: string;
|
|
4815
|
-
positive: string;
|
|
4816
|
-
};
|
|
4817
|
-
};
|
|
4818
|
-
sizes: {
|
|
4819
|
-
112: string;
|
|
4820
|
-
128: string;
|
|
4821
|
-
144: string;
|
|
4822
|
-
160: string;
|
|
4823
|
-
176: string;
|
|
4824
|
-
192: string;
|
|
4825
|
-
224: string;
|
|
4826
|
-
256: string;
|
|
4827
|
-
288: string;
|
|
4828
|
-
320: string;
|
|
4829
|
-
384: string;
|
|
4830
|
-
448: string;
|
|
4831
|
-
512: string;
|
|
4832
|
-
576: string;
|
|
4833
|
-
672: string;
|
|
4834
|
-
768: string;
|
|
4835
|
-
896: string;
|
|
4836
|
-
1024: string;
|
|
4837
|
-
'0x': string;
|
|
4838
|
-
'1x': string;
|
|
4839
|
-
'2x': string;
|
|
4840
|
-
'3x': string;
|
|
4841
|
-
'4x': string;
|
|
4842
|
-
'5x': string;
|
|
4843
|
-
'6x': string;
|
|
4844
|
-
'8x': string;
|
|
4845
|
-
'10x': string;
|
|
4846
|
-
'12x': string;
|
|
4847
|
-
'14x': string;
|
|
4848
|
-
'16x': string;
|
|
4849
|
-
'20x': string;
|
|
4850
|
-
'24x': string;
|
|
1382
|
+
type PrimitiveContentProps = DropdownPrimitive.DropdownMenuContentProps;
|
|
1383
|
+
interface DropdownMenuContentOptions {
|
|
1384
|
+
/**
|
|
1385
|
+
* Event handler called when focus moves to the trigger after closing.
|
|
1386
|
+
* It can be prevented by calling `event.preventDefault`.
|
|
1387
|
+
*/
|
|
1388
|
+
onCloseAutofocus?: PrimitiveContentProps['onCloseAutoFocus'];
|
|
1389
|
+
/**
|
|
1390
|
+
* Event handler called when the escape key is down.
|
|
1391
|
+
* It can be prevented by calling `event.preventDefault`.
|
|
1392
|
+
*/
|
|
1393
|
+
onEscapeKeyDown?: PrimitiveContentProps['onEscapeKeyDown'];
|
|
1394
|
+
/**
|
|
1395
|
+
* Event handler called when a pointer event occurs outside the bounds of the component.
|
|
1396
|
+
* It can be prevented by calling `event.preventDefault`.
|
|
1397
|
+
*/
|
|
1398
|
+
onPointerDownOutside?: PrimitiveContentProps['onPointerDownOutside'];
|
|
1399
|
+
/**
|
|
1400
|
+
* Event handler called when focus moves outside the bounds of the component.
|
|
1401
|
+
* It can be prevented by calling `event.preventDefault`.
|
|
1402
|
+
*/
|
|
1403
|
+
onFocusOutside?: PrimitiveContentProps['onFocusOutside'];
|
|
1404
|
+
/**
|
|
1405
|
+
* Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component.
|
|
1406
|
+
* It can be prevented by calling `event.preventDefault`.
|
|
1407
|
+
*/
|
|
1408
|
+
onInteractOutside?: PrimitiveContentProps['onInteractOutside'];
|
|
1409
|
+
/**
|
|
1410
|
+
* The preferred side of the trigger to render against when open.
|
|
1411
|
+
* Will be reversed when collisions occur and `avoidCollisions` is enabled.
|
|
1412
|
+
*
|
|
1413
|
+
* @default "bottom"
|
|
1414
|
+
*/
|
|
1415
|
+
side?: PrimitiveContentProps['side'];
|
|
1416
|
+
/**
|
|
1417
|
+
* The distance in pixels from the trigger.
|
|
1418
|
+
*
|
|
1419
|
+
* @default 8
|
|
1420
|
+
*/
|
|
1421
|
+
sideOffset?: PrimitiveContentProps['sideOffset'];
|
|
1422
|
+
/**
|
|
1423
|
+
* The preferred alignment against the trigger. May change when collisions occur.
|
|
1424
|
+
*
|
|
1425
|
+
* @default "center"
|
|
1426
|
+
*/
|
|
1427
|
+
align?: PrimitiveContentProps['align'];
|
|
1428
|
+
/**
|
|
1429
|
+
* The element used as the collision boundary.
|
|
1430
|
+
* By default this is the viewport, though you can provide additional element(s) to be included in this check.
|
|
1431
|
+
*
|
|
1432
|
+
* @default []
|
|
1433
|
+
*/
|
|
1434
|
+
collisionBoundary?: PrimitiveContentProps['collisionBoundary'];
|
|
1435
|
+
/**
|
|
1436
|
+
* Whether to hide the content when the trigger becomes fully occluded.
|
|
1437
|
+
*
|
|
1438
|
+
* @default false
|
|
1439
|
+
*/
|
|
1440
|
+
hideWhenDetached?: PrimitiveContentProps['hideWhenDetached'];
|
|
1441
|
+
}
|
|
1442
|
+
interface DropdownMenuContentProps extends HTMLQdsProps<'div'>, DropdownMenuContentOptions {
|
|
1443
|
+
}
|
|
1444
|
+
|
|
1445
|
+
type DropdownMenuDividerProps = HTMLQdsProps<'div'>;
|
|
1446
|
+
|
|
1447
|
+
interface DropdownMenuItemOptions {
|
|
1448
|
+
/**
|
|
1449
|
+
* If `true`, the item will be disabled
|
|
1450
|
+
*/
|
|
1451
|
+
isDisabled?: boolean;
|
|
1452
|
+
/**
|
|
1453
|
+
* Event handler called when the user selects an item (via mouse or keyboard).
|
|
1454
|
+
* Calling `event.preventDefault` in this handler will prevent the dropdown from closing when selecting that item.
|
|
1455
|
+
*/
|
|
1456
|
+
onSelect?: (event: Event) => void;
|
|
1457
|
+
/**
|
|
1458
|
+
* Optional text used for typeahead purposes.
|
|
1459
|
+
* By default the typeahead behavior will use the `.textContent` of the item.
|
|
1460
|
+
* Use this when the content is complex, or you have non-textual content inside.
|
|
1461
|
+
*/
|
|
1462
|
+
textValue?: string;
|
|
1463
|
+
/**
|
|
1464
|
+
* Optional icon to display on the left side of the item content.
|
|
1465
|
+
*/
|
|
1466
|
+
icon?: ElementType<IconProps>;
|
|
1467
|
+
}
|
|
1468
|
+
interface DropdownMenuItemProps extends Omit<DropdownPrimitive.DropdownMenuItemProps, 'asChild' | keyof DropdownMenuItemOptions>, DropdownMenuItemOptions {
|
|
1469
|
+
}
|
|
1470
|
+
|
|
1471
|
+
type DropdownTriggerComponent = ForwardRefComponent<'button'>;
|
|
1472
|
+
type DropdownMenuTriggerProps = PropsOf<DropdownTriggerComponent>;
|
|
1473
|
+
|
|
1474
|
+
interface DropdownMenuRootProps {
|
|
1475
|
+
children: ReactNode;
|
|
1476
|
+
/**
|
|
1477
|
+
* If `true` the dropdown menu will be open
|
|
1478
|
+
*/
|
|
1479
|
+
isOpen?: boolean;
|
|
1480
|
+
/**
|
|
1481
|
+
* The open state of the submenu when it is initially rendered.
|
|
1482
|
+
* Use when you do not need to control its open state.
|
|
1483
|
+
*/
|
|
1484
|
+
defaultOpen?: boolean;
|
|
1485
|
+
/**
|
|
1486
|
+
* Callback invoked open state changes
|
|
1487
|
+
*/
|
|
1488
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
1489
|
+
}
|
|
1490
|
+
declare function DropdownMenuRoot(props: DropdownMenuRootProps): react_jsx_runtime.JSX.Element;
|
|
1491
|
+
declare const DropdownMenu: typeof DropdownMenuRoot & {
|
|
1492
|
+
Trigger: ForwardRefComponent<"button", {}>;
|
|
1493
|
+
Content: react.ForwardRefExoticComponent<DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>>;
|
|
1494
|
+
Item: react.ForwardRefExoticComponent<DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>>;
|
|
1495
|
+
Divider: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1496
|
+
};
|
|
1497
|
+
|
|
1498
|
+
type HeadingSize = keyof Theme['typography']['title'];
|
|
1499
|
+
type HeadingColor = keyof Theme['colors']['text'];
|
|
1500
|
+
interface HeadingOptions {
|
|
1501
|
+
/**
|
|
1502
|
+
* Sets the visual size of the heading.
|
|
1503
|
+
* To override the rendered tag, use the `as` prop.
|
|
1504
|
+
*
|
|
1505
|
+
* @default 'md'
|
|
1506
|
+
*/
|
|
1507
|
+
size?: ResponsiveProp<HeadingSize>;
|
|
1508
|
+
/**
|
|
1509
|
+
* Sets the color of the heading
|
|
1510
|
+
* @default 'default'
|
|
1511
|
+
*/
|
|
1512
|
+
color?: HeadingColor;
|
|
1513
|
+
/**
|
|
1514
|
+
* Truncates the heading after a specific number of lines
|
|
1515
|
+
*/
|
|
1516
|
+
numberOfLines?: number;
|
|
1517
|
+
/**
|
|
1518
|
+
* Alignment of the heading
|
|
1519
|
+
* @default 'left'
|
|
1520
|
+
*/
|
|
1521
|
+
textAlign?: 'left' | 'center' | 'right';
|
|
1522
|
+
}
|
|
1523
|
+
type HeadingComponent = ForwardRefComponent<'h2', HeadingOptions>;
|
|
1524
|
+
type HeadingProps = PropsOf<HeadingComponent>;
|
|
1525
|
+
declare const Heading: HeadingComponent;
|
|
1526
|
+
|
|
1527
|
+
type HintBoxTitleProps = HTMLQdsProps<'span'>;
|
|
1528
|
+
type HintBoxProps = HTMLQdsProps<'aside'>;
|
|
1529
|
+
declare const HintBox: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & react.RefAttributes<HTMLElement>> & {
|
|
1530
|
+
Title: _emotion_styled.StyledComponent<{
|
|
1531
|
+
theme?: _emotion_react.Theme;
|
|
1532
|
+
as?: React.ElementType;
|
|
1533
|
+
}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
|
|
1534
|
+
};
|
|
1535
|
+
|
|
1536
|
+
declare const getSizeStyles$3: (theme: Theme) => {
|
|
1537
|
+
xs: {
|
|
1538
|
+
width: string;
|
|
1539
|
+
height: string;
|
|
4851
1540
|
};
|
|
4852
|
-
|
|
4853
|
-
|
|
4854
|
-
|
|
4855
|
-
xs: string;
|
|
4856
|
-
sm: string;
|
|
4857
|
-
md: string;
|
|
4858
|
-
lg: string;
|
|
4859
|
-
xl: string;
|
|
4860
|
-
'2xl': string;
|
|
4861
|
-
full: string;
|
|
1541
|
+
sm: {
|
|
1542
|
+
width: string;
|
|
1543
|
+
height: string;
|
|
4862
1544
|
};
|
|
4863
|
-
|
|
4864
|
-
|
|
4865
|
-
|
|
4866
|
-
md: string;
|
|
4867
|
-
lg: string;
|
|
4868
|
-
xl: string;
|
|
1545
|
+
md: {
|
|
1546
|
+
width: string;
|
|
1547
|
+
height: string;
|
|
4869
1548
|
};
|
|
4870
|
-
|
|
4871
|
-
|
|
4872
|
-
|
|
4873
|
-
|
|
4874
|
-
|
|
4875
|
-
|
|
4876
|
-
|
|
4877
|
-
|
|
4878
|
-
|
|
4879
|
-
|
|
4880
|
-
'2xl': {
|
|
4881
|
-
fontFamily: string;
|
|
4882
|
-
fontWeight: string;
|
|
4883
|
-
fontSize: string;
|
|
4884
|
-
lineHeight: string;
|
|
4885
|
-
letterSpacing: string;
|
|
4886
|
-
fontFeatureSettings: string;
|
|
4887
|
-
};
|
|
4888
|
-
xl: {
|
|
4889
|
-
fontFamily: string;
|
|
4890
|
-
fontWeight: string;
|
|
4891
|
-
fontSize: string;
|
|
4892
|
-
lineHeight: string;
|
|
4893
|
-
letterSpacing: string;
|
|
4894
|
-
fontFeatureSettings: string;
|
|
4895
|
-
};
|
|
4896
|
-
lg: {
|
|
4897
|
-
fontFamily: string;
|
|
4898
|
-
fontWeight: string;
|
|
4899
|
-
fontSize: string;
|
|
4900
|
-
lineHeight: string;
|
|
4901
|
-
letterSpacing: string;
|
|
4902
|
-
fontFeatureSettings: string;
|
|
4903
|
-
};
|
|
4904
|
-
md: {
|
|
4905
|
-
fontFamily: string;
|
|
4906
|
-
fontWeight: string;
|
|
4907
|
-
fontSize: string;
|
|
4908
|
-
lineHeight: string;
|
|
4909
|
-
letterSpacing: string;
|
|
4910
|
-
fontFeatureSettings: string;
|
|
4911
|
-
};
|
|
4912
|
-
sm: {
|
|
4913
|
-
fontFamily: string;
|
|
4914
|
-
fontWeight: string;
|
|
4915
|
-
fontSize: string;
|
|
4916
|
-
lineHeight: string;
|
|
4917
|
-
letterSpacing: string;
|
|
4918
|
-
fontFeatureSettings: string;
|
|
4919
|
-
};
|
|
4920
|
-
xs: {
|
|
4921
|
-
fontFamily: string;
|
|
4922
|
-
fontWeight: string;
|
|
4923
|
-
fontSize: string;
|
|
4924
|
-
lineHeight: string;
|
|
4925
|
-
letterSpacing: string;
|
|
4926
|
-
fontFeatureSettings: string;
|
|
4927
|
-
};
|
|
4928
|
-
'2xs': {
|
|
4929
|
-
fontFamily: string;
|
|
4930
|
-
fontWeight: string;
|
|
4931
|
-
fontSize: string;
|
|
4932
|
-
lineHeight: string;
|
|
4933
|
-
letterSpacing: string;
|
|
4934
|
-
fontFeatureSettings: string;
|
|
4935
|
-
};
|
|
4936
|
-
};
|
|
4937
|
-
title: {
|
|
4938
|
-
lg: {
|
|
4939
|
-
fontFamily: string;
|
|
4940
|
-
fontWeight: string;
|
|
4941
|
-
fontSize: string;
|
|
4942
|
-
lineHeight: string;
|
|
4943
|
-
letterSpacing: string;
|
|
4944
|
-
};
|
|
4945
|
-
md: {
|
|
4946
|
-
fontFamily: string;
|
|
4947
|
-
fontWeight: string;
|
|
4948
|
-
fontSize: string;
|
|
4949
|
-
lineHeight: string;
|
|
4950
|
-
letterSpacing: string;
|
|
4951
|
-
};
|
|
4952
|
-
sm: {
|
|
4953
|
-
fontFamily: string;
|
|
4954
|
-
fontWeight: string;
|
|
4955
|
-
fontSize: string;
|
|
4956
|
-
lineHeight: string;
|
|
4957
|
-
letterSpacing: string;
|
|
4958
|
-
};
|
|
4959
|
-
xs: {
|
|
4960
|
-
fontFamily: string;
|
|
4961
|
-
fontWeight: string;
|
|
4962
|
-
fontSize: string;
|
|
4963
|
-
lineHeight: string;
|
|
4964
|
-
letterSpacing: string;
|
|
4965
|
-
};
|
|
4966
|
-
'2xs': {
|
|
4967
|
-
fontFamily: string;
|
|
4968
|
-
fontWeight: string;
|
|
4969
|
-
fontSize: string;
|
|
4970
|
-
lineHeight: string;
|
|
4971
|
-
letterSpacing: string;
|
|
4972
|
-
};
|
|
4973
|
-
'3xs': {
|
|
4974
|
-
fontFamily: string;
|
|
4975
|
-
fontWeight: string;
|
|
4976
|
-
fontSize: string;
|
|
4977
|
-
lineHeight: string;
|
|
4978
|
-
letterSpacing: string;
|
|
4979
|
-
};
|
|
4980
|
-
};
|
|
4981
|
-
body: {
|
|
4982
|
-
xl: {
|
|
4983
|
-
fontFamily: string;
|
|
4984
|
-
fontWeight: string;
|
|
4985
|
-
fontSize: string;
|
|
4986
|
-
lineHeight: string;
|
|
4987
|
-
letterSpacing: string;
|
|
4988
|
-
};
|
|
4989
|
-
lg: {
|
|
4990
|
-
fontFamily: string;
|
|
4991
|
-
fontWeight: string;
|
|
4992
|
-
fontSize: string;
|
|
4993
|
-
lineHeight: string;
|
|
4994
|
-
letterSpacing: string;
|
|
1549
|
+
};
|
|
1550
|
+
declare const getVariantStyles$1: (theme: Theme) => {
|
|
1551
|
+
primary: {
|
|
1552
|
+
background: string;
|
|
1553
|
+
color: string;
|
|
1554
|
+
":not([disabled])": {
|
|
1555
|
+
'@media(hover: hover)': {
|
|
1556
|
+
':hover': {
|
|
1557
|
+
background: string;
|
|
1558
|
+
};
|
|
4995
1559
|
};
|
|
4996
|
-
|
|
4997
|
-
|
|
4998
|
-
fontWeight: string;
|
|
4999
|
-
fontSize: string;
|
|
5000
|
-
lineHeight: string;
|
|
5001
|
-
letterSpacing: string;
|
|
1560
|
+
':active': {
|
|
1561
|
+
background: string;
|
|
5002
1562
|
};
|
|
5003
|
-
|
|
5004
|
-
|
|
5005
|
-
|
|
5006
|
-
|
|
5007
|
-
|
|
5008
|
-
|
|
1563
|
+
};
|
|
1564
|
+
};
|
|
1565
|
+
secondary: {
|
|
1566
|
+
background: string;
|
|
1567
|
+
color: string;
|
|
1568
|
+
":not([disabled])": {
|
|
1569
|
+
'@media(hover: hover)': {
|
|
1570
|
+
':hover': {
|
|
1571
|
+
background: string;
|
|
1572
|
+
};
|
|
5009
1573
|
};
|
|
5010
|
-
|
|
5011
|
-
|
|
5012
|
-
fontWeight: string;
|
|
5013
|
-
fontSize: string;
|
|
5014
|
-
lineHeight: string;
|
|
5015
|
-
letterSpacing: string;
|
|
1574
|
+
':active': {
|
|
1575
|
+
background: string;
|
|
5016
1576
|
};
|
|
5017
1577
|
};
|
|
5018
|
-
|
|
5019
|
-
|
|
5020
|
-
|
|
5021
|
-
|
|
5022
|
-
|
|
5023
|
-
|
|
5024
|
-
|
|
1578
|
+
};
|
|
1579
|
+
tertiary: {
|
|
1580
|
+
background: string;
|
|
1581
|
+
color: string;
|
|
1582
|
+
":not([disabled])": {
|
|
1583
|
+
'@media(hover: hover)': {
|
|
1584
|
+
':hover': {
|
|
1585
|
+
background: string;
|
|
1586
|
+
};
|
|
5025
1587
|
};
|
|
5026
|
-
|
|
5027
|
-
|
|
5028
|
-
fontWeight: string;
|
|
5029
|
-
fontSize: string;
|
|
5030
|
-
lineHeight: string;
|
|
5031
|
-
letterSpacing: string;
|
|
1588
|
+
':active': {
|
|
1589
|
+
background: string;
|
|
5032
1590
|
};
|
|
5033
1591
|
};
|
|
5034
|
-
|
|
5035
|
-
|
|
5036
|
-
|
|
5037
|
-
|
|
5038
|
-
|
|
5039
|
-
|
|
5040
|
-
|
|
1592
|
+
};
|
|
1593
|
+
ghost: {
|
|
1594
|
+
color: string;
|
|
1595
|
+
":not([disabled])": {
|
|
1596
|
+
'@media(hover: hover)': {
|
|
1597
|
+
':hover': {
|
|
1598
|
+
background: string;
|
|
1599
|
+
};
|
|
5041
1600
|
};
|
|
5042
|
-
|
|
5043
|
-
|
|
5044
|
-
fontWeight: string;
|
|
5045
|
-
fontSize: string;
|
|
5046
|
-
lineHeight: string;
|
|
5047
|
-
letterSpacing: string;
|
|
1601
|
+
':active': {
|
|
1602
|
+
background: string;
|
|
5048
1603
|
};
|
|
5049
1604
|
};
|
|
5050
|
-
|
|
5051
|
-
|
|
5052
|
-
|
|
5053
|
-
|
|
5054
|
-
|
|
5055
|
-
|
|
5056
|
-
|
|
1605
|
+
};
|
|
1606
|
+
white: {
|
|
1607
|
+
background: string;
|
|
1608
|
+
color: string;
|
|
1609
|
+
":not([disabled])": {
|
|
1610
|
+
'@media(hover: hover)': {
|
|
1611
|
+
':hover': {
|
|
1612
|
+
background: string;
|
|
1613
|
+
};
|
|
5057
1614
|
};
|
|
5058
|
-
|
|
5059
|
-
|
|
5060
|
-
fontWeight: string;
|
|
5061
|
-
fontSize: string;
|
|
5062
|
-
lineHeight: string;
|
|
5063
|
-
letterSpacing: string;
|
|
1615
|
+
':active': {
|
|
1616
|
+
background: string;
|
|
5064
1617
|
};
|
|
5065
1618
|
};
|
|
5066
1619
|
};
|
|
5067
|
-
}
|
|
1620
|
+
};
|
|
1621
|
+
|
|
1622
|
+
type IconButtonSize = VariantProps<typeof getSizeStyles$3>;
|
|
1623
|
+
type IconButtonVariant = VariantProps<typeof getVariantStyles$1>;
|
|
1624
|
+
interface IconButtonOptions {
|
|
1625
|
+
icon: ElementType<IconProps>;
|
|
1626
|
+
/**
|
|
1627
|
+
* A visually hidden label read by screen readers.
|
|
1628
|
+
*
|
|
1629
|
+
*/
|
|
1630
|
+
label: string;
|
|
1631
|
+
/**
|
|
1632
|
+
* Defines the size of the button
|
|
1633
|
+
*/
|
|
1634
|
+
size?: ResponsiveProp<IconButtonSize>;
|
|
1635
|
+
/**
|
|
1636
|
+
* Sets the style variant of the button
|
|
1637
|
+
*/
|
|
1638
|
+
variant?: IconButtonVariant;
|
|
1639
|
+
/**
|
|
1640
|
+
* If `true` the button will be disabled
|
|
1641
|
+
*/
|
|
1642
|
+
isDisabled?: boolean;
|
|
1643
|
+
}
|
|
1644
|
+
type IconButtonComponent = ForwardRefComponent<'button', IconButtonOptions>;
|
|
1645
|
+
type IconButtonProps = PropsOf<IconButtonComponent>;
|
|
1646
|
+
declare const IconButton: IconButtonComponent;
|
|
1647
|
+
|
|
1648
|
+
interface InputBaseOptions {
|
|
1649
|
+
/**
|
|
1650
|
+
* If `true`, the input will be invalid
|
|
1651
|
+
*/
|
|
1652
|
+
isInvalid?: boolean;
|
|
1653
|
+
/**
|
|
1654
|
+
* If `true`, the input will be disabled
|
|
1655
|
+
*/
|
|
1656
|
+
isDisabled?: boolean;
|
|
1657
|
+
/**
|
|
1658
|
+
* If `true` the input will be required
|
|
1659
|
+
*/
|
|
1660
|
+
isRequired?: boolean;
|
|
1661
|
+
}
|
|
1662
|
+
type OmittedProps$8 = 'children' | 'readOnly' | 'size' | 'disabled' | 'required';
|
|
1663
|
+
interface InputBaseProps extends Omit<HTMLQdsProps<'input'>, OmittedProps$8>, InputBaseOptions {
|
|
1664
|
+
}
|
|
1665
|
+
declare const InputBase: react.ForwardRefExoticComponent<InputBaseProps & react.RefAttributes<HTMLInputElement>>;
|
|
1666
|
+
|
|
1667
|
+
interface TextFieldOptions extends InputBaseOptions {
|
|
1668
|
+
/**
|
|
1669
|
+
* The label for the input
|
|
1670
|
+
*/
|
|
1671
|
+
label: string;
|
|
1672
|
+
/**
|
|
1673
|
+
* The error message to display if `isInvalid` is `true`
|
|
1674
|
+
*/
|
|
1675
|
+
errorMessage?: string;
|
|
1676
|
+
/**
|
|
1677
|
+
* If `true`, the input will display an optional indicator.
|
|
1678
|
+
* If the `isRequired` prop is also `true`, this prop will be ignored.
|
|
1679
|
+
*/
|
|
1680
|
+
isOptional?: boolean;
|
|
1681
|
+
/**
|
|
1682
|
+
* Text that provides additional guidance to the user
|
|
1683
|
+
*/
|
|
1684
|
+
helperText?: string;
|
|
1685
|
+
/**
|
|
1686
|
+
* Suffixed text to display after the input.
|
|
1687
|
+
* This is useful for e.g. displaying units of measurement.
|
|
1688
|
+
*/
|
|
1689
|
+
suffix?: string;
|
|
1690
|
+
}
|
|
1691
|
+
type OmittedProps$7 = 'children' | 'readOnly' | 'size';
|
|
1692
|
+
interface TextFieldProps extends Omit<HTMLQdsProps<'input'>, OmittedProps$7>, TextFieldOptions {
|
|
1693
|
+
}
|
|
1694
|
+
declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
|
|
1695
|
+
|
|
1696
|
+
declare const getSizeStyles$2: (theme: Theme) => {
|
|
1697
|
+
sm: {
|
|
1698
|
+
fontFamily: string;
|
|
1699
|
+
fontWeight: string;
|
|
1700
|
+
fontSize: string;
|
|
1701
|
+
lineHeight: string;
|
|
1702
|
+
letterSpacing: string;
|
|
1703
|
+
};
|
|
1704
|
+
md: {
|
|
1705
|
+
fontFamily: string;
|
|
1706
|
+
fontWeight: string;
|
|
1707
|
+
fontSize: string;
|
|
1708
|
+
lineHeight: string;
|
|
1709
|
+
letterSpacing: string;
|
|
1710
|
+
};
|
|
1711
|
+
};
|
|
1712
|
+
type LabelSize = VariantProps<typeof getSizeStyles$2>;
|
|
1713
|
+
type LabelColor = keyof Theme['colors']['text'];
|
|
1714
|
+
interface LabelOptions {
|
|
1715
|
+
/**
|
|
1716
|
+
* Size of the label
|
|
1717
|
+
*/
|
|
1718
|
+
size?: ResponsiveProp<LabelSize>;
|
|
1719
|
+
/**
|
|
1720
|
+
* Sets the color of the label
|
|
1721
|
+
* @default 'default'
|
|
1722
|
+
*/
|
|
1723
|
+
color?: LabelColor;
|
|
1724
|
+
}
|
|
1725
|
+
type LabelComponent = ForwardRefComponent<'label', LabelOptions>;
|
|
1726
|
+
type LabelProps = PropsOf<LabelComponent>;
|
|
1727
|
+
declare const Label: LabelComponent;
|
|
1728
|
+
|
|
1729
|
+
interface LinkOptions {
|
|
1730
|
+
/**
|
|
1731
|
+
* The URL to link to.
|
|
1732
|
+
*/
|
|
1733
|
+
href?: string;
|
|
1734
|
+
/**
|
|
1735
|
+
* If `true`, the link will open in new tab
|
|
1736
|
+
*/
|
|
1737
|
+
isExternal?: boolean;
|
|
1738
|
+
}
|
|
1739
|
+
type LinkComponent = ForwardRefComponent<'a', LinkOptions>;
|
|
1740
|
+
type LinkProps = PropsOf<LinkComponent>;
|
|
1741
|
+
declare const Link: LinkComponent;
|
|
1742
|
+
|
|
1743
|
+
declare const getSizeStyles$1: (theme: Theme) => {
|
|
1744
|
+
sm: {
|
|
1745
|
+
fontSize: string;
|
|
1746
|
+
};
|
|
1747
|
+
md: {
|
|
1748
|
+
fontSize: string;
|
|
1749
|
+
};
|
|
1750
|
+
};
|
|
1751
|
+
type LoadingDotsSize = VariantProps<typeof getSizeStyles$1>;
|
|
1752
|
+
interface LoadingDotsOptions {
|
|
1753
|
+
size?: ResponsiveProp<LoadingDotsSize>;
|
|
1754
|
+
}
|
|
1755
|
+
interface LoadingDotsProps extends HTMLQdsProps<'span'>, LoadingDotsOptions {
|
|
1756
|
+
}
|
|
1757
|
+
declare const LoadingDots: react.ForwardRefExoticComponent<LoadingDotsProps & react.RefAttributes<HTMLSpanElement>>;
|
|
1758
|
+
|
|
1759
|
+
declare const getSizeStyles: (theme: Theme) => {
|
|
5068
1760
|
xs: {
|
|
5069
1761
|
fontFamily: string;
|
|
5070
1762
|
fontWeight: string;
|
|
@@ -5151,8 +1843,8 @@ interface SelectBaseOptions {
|
|
|
5151
1843
|
*/
|
|
5152
1844
|
isRequired?: boolean;
|
|
5153
1845
|
}
|
|
5154
|
-
type OmittedProps$
|
|
5155
|
-
interface SelectBaseProps extends Omit<HTMLQdsProps<'select'>, OmittedProps$
|
|
1846
|
+
type OmittedProps$6 = 'readOnly' | 'size' | 'multiple' | 'disabled' | 'required';
|
|
1847
|
+
interface SelectBaseProps extends Omit<HTMLQdsProps<'select'>, OmittedProps$6>, SelectBaseOptions {
|
|
5156
1848
|
}
|
|
5157
1849
|
declare const SelectBase: react.ForwardRefExoticComponent<SelectBaseProps & react.RefAttributes<HTMLSelectElement>>;
|
|
5158
1850
|
|
|
@@ -5185,8 +1877,8 @@ interface TextareaBaseOptions {
|
|
|
5185
1877
|
*/
|
|
5186
1878
|
minRows?: MinRowsProp;
|
|
5187
1879
|
}
|
|
5188
|
-
type OmittedProps$
|
|
5189
|
-
interface TextareaBaseProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps$
|
|
1880
|
+
type OmittedProps$5 = 'children' | 'readOnly' | 'size' | 'disabled' | 'required' | 'rows' | 'cols';
|
|
1881
|
+
interface TextareaBaseProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps$5>, TextareaBaseOptions {
|
|
5190
1882
|
}
|
|
5191
1883
|
declare const TextareaBase: react.ForwardRefExoticComponent<TextareaBaseProps & react.RefAttributes<HTMLTextAreaElement>>;
|
|
5192
1884
|
|
|
@@ -5284,8 +1976,8 @@ declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & reac
|
|
|
5284
1976
|
interface SelectOptionOptions {
|
|
5285
1977
|
isDisabled?: boolean;
|
|
5286
1978
|
}
|
|
5287
|
-
type OmittedProps$
|
|
5288
|
-
interface SelectOptionProps extends Omit<HTMLQdsProps<'option'>, OmittedProps$
|
|
1979
|
+
type OmittedProps$4 = 'disabled' | 'label';
|
|
1980
|
+
interface SelectOptionProps extends Omit<HTMLQdsProps<'option'>, OmittedProps$4>, SelectOptionOptions {
|
|
5289
1981
|
}
|
|
5290
1982
|
|
|
5291
1983
|
interface SelectOptions extends SelectBaseOptions {
|
|
@@ -5307,8 +1999,8 @@ interface SelectOptions extends SelectBaseOptions {
|
|
|
5307
1999
|
*/
|
|
5308
2000
|
isOptional?: boolean;
|
|
5309
2001
|
}
|
|
5310
|
-
type OmittedProps$
|
|
5311
|
-
interface SelectProps extends Omit<HTMLQdsProps<'select'>, OmittedProps$
|
|
2002
|
+
type OmittedProps$3 = 'readOnly' | 'size';
|
|
2003
|
+
interface SelectProps extends Omit<HTMLQdsProps<'select'>, OmittedProps$3>, SelectOptions {
|
|
5312
2004
|
}
|
|
5313
2005
|
declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>> & {
|
|
5314
2006
|
Option: react.ForwardRefExoticComponent<SelectOptionProps & react.RefAttributes<HTMLOptionElement>>;
|
|
@@ -5419,13 +2111,25 @@ interface TextareaOptions extends TextareaBaseOptions {
|
|
|
5419
2111
|
*/
|
|
5420
2112
|
isOptional?: boolean;
|
|
5421
2113
|
}
|
|
5422
|
-
type OmittedProps$
|
|
5423
|
-
interface TextareaProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps$
|
|
2114
|
+
type OmittedProps$2 = 'children' | 'readOnly' | 'size';
|
|
2115
|
+
interface TextareaProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps$2>, TextareaOptions {
|
|
5424
2116
|
}
|
|
5425
2117
|
declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
|
|
5426
2118
|
|
|
2119
|
+
declare const getVariantStyles: (theme: Theme) => {
|
|
2120
|
+
neutral: {
|
|
2121
|
+
background: string;
|
|
2122
|
+
color: string;
|
|
2123
|
+
};
|
|
2124
|
+
error: {
|
|
2125
|
+
background: string;
|
|
2126
|
+
color: string;
|
|
2127
|
+
};
|
|
2128
|
+
};
|
|
2129
|
+
type ToastVariant = VariantProps<typeof getVariantStyles>;
|
|
2130
|
+
|
|
5427
2131
|
type Id = number | string;
|
|
5428
|
-
interface ToastOptions {
|
|
2132
|
+
interface ToastOptions$1 {
|
|
5429
2133
|
/**
|
|
5430
2134
|
* Unique identifier for the toast (can be used for removing it prematurely). If a toast with this
|
|
5431
2135
|
* identifier already exists it will be removed before the new toast is added.
|
|
@@ -5433,12 +2137,21 @@ interface ToastOptions {
|
|
|
5433
2137
|
*/
|
|
5434
2138
|
id?: Id;
|
|
5435
2139
|
}
|
|
5436
|
-
declare const toast: ((text: string, options?: ToastOptions) => Id) & {
|
|
5437
|
-
error: (text: string, options?: ToastOptions) => Id;
|
|
2140
|
+
declare const toast: ((text: string, options?: ToastOptions$1) => Id) & {
|
|
2141
|
+
error: (text: string, options?: ToastOptions$1) => Id;
|
|
5438
2142
|
remove: (id: Id) => void;
|
|
5439
2143
|
removeAll: () => void;
|
|
5440
2144
|
};
|
|
5441
2145
|
|
|
2146
|
+
interface ToastOptions {
|
|
2147
|
+
text: string;
|
|
2148
|
+
variant?: ToastVariant;
|
|
2149
|
+
}
|
|
2150
|
+
type OmittedProps$1 = 'children';
|
|
2151
|
+
interface ToastProps extends Omit<HTMLQdsProps<'div'>, OmittedProps$1>, ToastOptions {
|
|
2152
|
+
}
|
|
2153
|
+
declare function Toast(props: ToastProps & ToastPrimitive.ToastProps): react_jsx_runtime.JSX.Element;
|
|
2154
|
+
|
|
5442
2155
|
interface UseBreakpointOptions {
|
|
5443
2156
|
/**
|
|
5444
2157
|
* If `true` the initial value will be `base` instead of the current breakpoint.
|
|
@@ -5529,4 +2242,4 @@ declare function useStableId(fixedId?: string | null): string;
|
|
|
5529
2242
|
*/
|
|
5530
2243
|
declare const useSafeLayoutEffect: typeof useLayoutEffect;
|
|
5531
2244
|
|
|
5532
|
-
export { AlertCircleIcon, AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, type AvatarProps, BellIcon, BellOffIcon, BookmarkIcon, Button, type ButtonProps, CalendarIcon, CameraIcon, CheckCircleIcon, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, type CreateIconOptions, DisplayText, type DisplayTextProps, Divider, type DividerProps, DropdownMenu, type DropdownMenuContentProps, type DropdownMenuDividerProps, type DropdownMenuItemProps, type DropdownMenuRootProps, type DropdownMenuTriggerProps, type ForwardRefComponent, GlobeIcon, Heading, type HeadingProps, HeartFilledIcon, HeartIcon, HelpCircleIcon, HintBox, type HintBoxProps, type HintBoxTitleProps, HistoryIcon, HomeIcon, IconButton, type IconButtonProps, type IconProps, ImageIcon, InfoIcon, InputBase, type InputBaseOptions, type InputBaseProps, type IntrinsicElement, Label, type LabelProps, Link, type LinkProps, ListFilterIcon, ListIcon, LoadingDots, type LoadingDotsProps, LogOutIcon, MapIcon, MapPinIcon, MenuIcon, MessageCircleIcon, MinusIcon, MoreHorizontalIcon, MoreVerticalIcon, type OwnProps, Paragraph, type ParagraphProps, PenIcon, PlusIcon, type PropsOf, QdsProvider, type RadioButtonProps, type RadioCardProps, RadioGroup, type RadioGroupLabelProps, type RadioGroupProps, SearchIcon, Select, SelectBase, type SelectBaseOptions, type SelectOptionProps, type SelectProps, SettingsIcon, ShareIcon, SlidersIcon, Spacer, type SpacerProps, Stack, type StackProps, StarFilledIcon, StarIcon, Switch, TextField, type TextFieldProps, Textarea, TextareaBase, type TextareaBaseOptions, type TextareaBaseProps, type TextareaProps, type Theme, type ThemeOverrides, TrashIcon, type UseBreakpointOptions, type UseBreakpointValueProps, type UseFormFieldProps, UserIcon, type VariantProps, XCircleIcon, XIcon, createIcon, createLucideIcon, createStyle, createStyleVariants, getFormFieldBaseStyles, overrideTheme, pxToRem, theme, toast, useBreakpoint, useBreakpointValue, useFormField, useSafeLayoutEffect, useStableId };
|
|
2245
|
+
export { AlertCircleIcon, AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, type AvatarProps, BellIcon, BellOffIcon, BookmarkIcon, Button, type ButtonProps, CalendarIcon, CameraIcon, CheckCircleIcon, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, type CreateIconOptions, DisplayText, type DisplayTextProps, Divider, type DividerProps, DropdownMenu, type DropdownMenuContentProps, type DropdownMenuDividerProps, type DropdownMenuItemProps, type DropdownMenuRootProps, type DropdownMenuTriggerProps, type ForwardRefComponent, GlobeIcon, Heading, type HeadingProps, HeartFilledIcon, HeartIcon, HelpCircleIcon, HintBox, type HintBoxProps, type HintBoxTitleProps, HistoryIcon, HomeIcon, IconButton, type IconButtonProps, type IconProps, ImageIcon, InfoIcon, InputBase, type InputBaseOptions, type InputBaseProps, type IntrinsicElement, Label, type LabelProps, Link, type LinkProps, ListFilterIcon, ListIcon, LoadingDots, type LoadingDotsProps, LogOutIcon, MapIcon, MapPinIcon, MenuIcon, MessageCircleIcon, MinusIcon, MoreHorizontalIcon, MoreVerticalIcon, type OwnProps, Paragraph, type ParagraphProps, PenIcon, PlusIcon, type PropsOf, QdsProvider, type RadioButtonProps, type RadioCardProps, RadioGroup, type RadioGroupLabelProps, type RadioGroupProps, SearchIcon, Select, SelectBase, type SelectBaseOptions, type SelectOptionProps, type SelectProps, SettingsIcon, ShareIcon, SlidersIcon, Spacer, type SpacerProps, Stack, type StackProps, StarFilledIcon, StarIcon, Switch, type SwitchProps, TextField, type TextFieldProps, Textarea, TextareaBase, type TextareaBaseOptions, type TextareaBaseProps, type TextareaProps, type Theme, type ThemeOverrides, Toast, TrashIcon, type UseBreakpointOptions, type UseBreakpointValueProps, type UseFormFieldProps, UserIcon, type VariantProps, XCircleIcon, XIcon, createIcon, createLucideIcon, createStyle, createStyleVariants, getFormFieldBaseStyles, overrideTheme, pxToRem, theme, toast, useBreakpoint, useBreakpointValue, useFormField, useSafeLayoutEffect, useStableId };
|