@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/dist/index.d.mts 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$8 = 'color' | 'onClick' | 'width' | 'height' | 'fontSize';
966
- interface IconProps extends Omit<SVGAttributes<SVGElement>, OmittedProps$8>, IconOptions {
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
- mediaQueries: {
1074
- readonly smUp: "@media(min-width: 480px)";
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
- breakpoints: {
1097
- readonly base: 0;
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
- zIndices: {
1105
- hide: number;
1106
- auto: string;
1107
- base: number;
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
- colors: {
1120
- core: {
1121
- black: string;
1122
- white: string;
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
- sizes: {
1238
- 112: string;
1239
- 128: string;
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
- radii: {
1272
- none: string;
1273
- '2xs': string;
1274
- xs: string;
1275
- sm: string;
1276
- md: string;
1277
- lg: string;
1278
- xl: string;
1279
- '2xl': string;
1280
- full: string;
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
- shadows: {
1283
- none: string;
1284
- sm: string;
1285
- md: string;
1286
- lg: string;
1287
- xl: string;
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
- typography: {
1290
- display: {
1291
- '3xl': {
1292
- fontFamily: string;
1293
- fontWeight: string;
1294
- fontSize: string;
1295
- lineHeight: string;
1296
- letterSpacing: string;
1297
- fontFeatureSettings: string;
1298
- };
1299
- '2xl': {
1300
- fontFamily: string;
1301
- fontWeight: string;
1302
- fontSize: string;
1303
- lineHeight: string;
1304
- letterSpacing: string;
1305
- fontFeatureSettings: string;
1306
- };
1307
- xl: {
1308
- fontFamily: string;
1309
- fontWeight: string;
1310
- fontSize: string;
1311
- lineHeight: string;
1312
- letterSpacing: string;
1313
- fontFeatureSettings: string;
1314
- };
1315
- lg: {
1316
- fontFamily: string;
1317
- fontWeight: string;
1318
- fontSize: string;
1319
- lineHeight: string;
1320
- letterSpacing: string;
1321
- fontFeatureSettings: string;
1322
- };
1323
- md: {
1324
- fontFamily: string;
1325
- fontWeight: string;
1326
- fontSize: string;
1327
- lineHeight: string;
1328
- letterSpacing: string;
1329
- fontFeatureSettings: string;
1330
- };
1331
- sm: {
1332
- fontFamily: string;
1333
- fontWeight: string;
1334
- fontSize: string;
1335
- lineHeight: string;
1336
- letterSpacing: string;
1337
- fontFeatureSettings: string;
1338
- };
1339
- xs: {
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
- xs: {
1430
- fontFamily: string;
1431
- fontWeight: string;
1432
- fontSize: string;
1433
- lineHeight: string;
1434
- letterSpacing: string;
1183
+ ':active': {
1184
+ background: string;
1435
1185
  };
1436
1186
  };
1437
- label: {
1438
- md: {
1439
- fontFamily: string;
1440
- fontWeight: string;
1441
- fontSize: string;
1442
- lineHeight: string;
1443
- letterSpacing: string;
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
- sm: {
1446
- fontFamily: string;
1447
- fontWeight: string;
1448
- fontSize: string;
1449
- lineHeight: string;
1450
- letterSpacing: string;
1197
+ ':active': {
1198
+ background: string;
1451
1199
  };
1452
1200
  };
1453
- button: {
1454
- md: {
1455
- fontFamily: string;
1456
- fontWeight: string;
1457
- fontSize: string;
1458
- lineHeight: string;
1459
- letterSpacing: string;
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
- sm: {
1462
- fontFamily: string;
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
- declare const getSizeStyles$4: (theme: {
1534
- mediaQueries: {
1535
- readonly smUp: "@media(min-width: 480px)";
1536
- readonly mdUp: "@media(min-width: 768px)";
1537
- readonly lgUp: "@media(min-width: 1024px)";
1538
- readonly xlUp: "@media(min-width: 1280px)";
1539
- readonly '2xlUp': "@media(min-width: 1536px)";
1540
- };
1541
- spacing: {
1542
- '0x': string;
1543
- '1x': string;
1544
- '2x': string;
1545
- '3x': string;
1546
- '4x': string;
1547
- '5x': string;
1548
- '6x': string;
1549
- '8x': string;
1550
- '10x': string;
1551
- '12x': string;
1552
- '14x': string;
1553
- '16x': string;
1554
- '20x': string;
1555
- '24x': string;
1556
- };
1557
- breakpoints: {
1558
- readonly base: 0;
1559
- readonly sm: 480;
1560
- readonly md: 768;
1561
- readonly lg: 1024;
1562
- readonly xl: 1280;
1563
- readonly '2xl': 1536;
1564
- };
1565
- zIndices: {
1566
- hide: number;
1567
- auto: string;
1568
- base: number;
1569
- docked: number;
1570
- dropdown: number;
1571
- sticky: number;
1572
- banner: number;
1573
- overlay: number;
1574
- modal: number;
1575
- popover: number;
1576
- skipLink: number;
1577
- toast: number;
1578
- tooltip: number;
1579
- };
1580
- colors: {
1581
- core: {
1582
- black: string;
1583
- white: string;
1584
- gray90: string;
1585
- gray80: string;
1586
- gray70: string;
1587
- gray60: string;
1588
- gray50: string;
1589
- gray40: string;
1590
- gray30: string;
1591
- gray20: string;
1592
- gray10: string;
1593
- pink: string;
1594
- uiPink: string;
1595
- uiPinkDark: string;
1596
- uiPinkLight: string;
1597
- brown: string;
1598
- brownDark: string;
1599
- brownLight: string;
1600
- offWhite: string;
1601
- offWhiteDark: string;
1602
- offWhiteLight: string;
1603
- softPink: string;
1604
- warmYellow: string;
1605
- softYellow: string;
1606
- red90: string;
1607
- red80: string;
1608
- red70: string;
1609
- red60: string;
1610
- red50: string;
1611
- red40: string;
1612
- red30: string;
1613
- red20: string;
1614
- red10: string;
1615
- green90: string;
1616
- green80: string;
1617
- green70: string;
1618
- green60: string;
1619
- green50: string;
1620
- green40: string;
1621
- green30: string;
1622
- green20: string;
1623
- green10: string;
1624
- blue90: string;
1625
- blue80: string;
1626
- blue70: string;
1627
- blue60: string;
1628
- blue50: string;
1629
- blue40: string;
1630
- blue30: string;
1631
- blue20: string;
1632
- blue10: string;
1633
- yellow90: string;
1634
- yellow80: string;
1635
- yellow70: string;
1636
- yellow60: string;
1637
- yellow50: string;
1638
- yellow40: string;
1639
- yellow30: string;
1640
- yellow20: string;
1641
- yellow10: string;
1642
- blackAlpha5: string;
1643
- blackAlpha10: string;
1644
- blackAlpha20: string;
1645
- };
1646
- bg: {
1647
- default: string;
1648
- brandPrimary: string;
1649
- brandPrimaryHover: string;
1650
- brandPrimaryActive: string;
1651
- brandSecondary: string;
1652
- brandSecondaryHover: string;
1653
- brandSecondaryActive: string;
1654
- brandTertiary: string;
1655
- brandTertiaryHover: string;
1656
- brandTertiaryActive: string;
1657
- negative: string;
1658
- warning: string;
1659
- positive: string;
1660
- inset: string;
1661
- backdrop: string;
1662
- };
1663
- text: {
1664
- strong: string;
1665
- default: string;
1666
- subtle: string;
1667
- disabled: string;
1668
- negative: string;
1669
- warning: string;
1670
- positive: string;
1671
- onBrandPrimary: string;
1672
- onBrandSecondary: string;
1673
- onBrandTertiary: string;
1674
- };
1675
- icon: {
1676
- default: string;
1677
- strong: string;
1678
- subtle: string;
1679
- disabled: string;
1680
- negative: string;
1681
- warning: string;
1682
- positive: string;
1683
- onBrandPrimary: string;
1684
- onBrandSecondary: string;
1685
- onBrandTertiary: string;
1686
- };
1687
- border: {
1688
- default: string;
1689
- defaultHover: string;
1690
- defaultSelected: string;
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 LoadingDotsProps extends HTMLQdsProps<'span'>, LoadingDotsOptions {
1378
+ interface DividerProps extends HTMLQdsProps<'span'>, DividerOptions {
4650
1379
  }
4651
- declare const LoadingDots: react.ForwardRefExoticComponent<LoadingDotsProps & react.RefAttributes<HTMLSpanElement>>;
1380
+ declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
4652
1381
 
4653
- declare const getSizeStyles: (theme: {
4654
- mediaQueries: {
4655
- readonly smUp: "@media(min-width: 480px)";
4656
- readonly mdUp: "@media(min-width: 768px)";
4657
- readonly lgUp: "@media(min-width: 1024px)";
4658
- readonly xlUp: "@media(min-width: 1280px)";
4659
- readonly '2xlUp': "@media(min-width: 1536px)";
4660
- };
4661
- spacing: {
4662
- '0x': string;
4663
- '1x': string;
4664
- '2x': string;
4665
- '3x': string;
4666
- '4x': string;
4667
- '5x': string;
4668
- '6x': string;
4669
- '8x': string;
4670
- '10x': string;
4671
- '12x': string;
4672
- '14x': string;
4673
- '16x': string;
4674
- '20x': string;
4675
- '24x': string;
4676
- };
4677
- breakpoints: {
4678
- readonly base: 0;
4679
- readonly sm: 480;
4680
- readonly md: 768;
4681
- readonly lg: 1024;
4682
- readonly xl: 1280;
4683
- readonly '2xl': 1536;
4684
- };
4685
- zIndices: {
4686
- hide: number;
4687
- auto: string;
4688
- base: number;
4689
- docked: number;
4690
- dropdown: number;
4691
- sticky: number;
4692
- banner: number;
4693
- overlay: number;
4694
- modal: number;
4695
- popover: number;
4696
- skipLink: number;
4697
- toast: number;
4698
- tooltip: number;
4699
- };
4700
- colors: {
4701
- core: {
4702
- black: string;
4703
- white: string;
4704
- gray90: string;
4705
- gray80: string;
4706
- gray70: string;
4707
- gray60: string;
4708
- gray50: string;
4709
- gray40: string;
4710
- gray30: string;
4711
- gray20: string;
4712
- gray10: string;
4713
- pink: string;
4714
- uiPink: string;
4715
- uiPinkDark: string;
4716
- uiPinkLight: string;
4717
- brown: string;
4718
- brownDark: string;
4719
- brownLight: string;
4720
- offWhite: string;
4721
- offWhiteDark: string;
4722
- offWhiteLight: string;
4723
- softPink: string;
4724
- warmYellow: string;
4725
- softYellow: string;
4726
- red90: string;
4727
- red80: string;
4728
- red70: string;
4729
- red60: string;
4730
- red50: string;
4731
- red40: string;
4732
- red30: string;
4733
- red20: string;
4734
- red10: string;
4735
- green90: string;
4736
- green80: string;
4737
- green70: string;
4738
- green60: string;
4739
- green50: string;
4740
- green40: string;
4741
- green30: string;
4742
- green20: string;
4743
- green10: string;
4744
- blue90: string;
4745
- blue80: string;
4746
- blue70: string;
4747
- blue60: string;
4748
- blue50: string;
4749
- blue40: string;
4750
- blue30: string;
4751
- blue20: string;
4752
- blue10: string;
4753
- yellow90: string;
4754
- yellow80: string;
4755
- yellow70: string;
4756
- yellow60: string;
4757
- yellow50: string;
4758
- yellow40: string;
4759
- yellow30: string;
4760
- yellow20: string;
4761
- yellow10: string;
4762
- blackAlpha5: string;
4763
- blackAlpha10: string;
4764
- blackAlpha20: string;
4765
- };
4766
- bg: {
4767
- default: string;
4768
- brandPrimary: string;
4769
- brandPrimaryHover: string;
4770
- brandPrimaryActive: string;
4771
- brandSecondary: string;
4772
- brandSecondaryHover: string;
4773
- brandSecondaryActive: string;
4774
- brandTertiary: string;
4775
- brandTertiaryHover: string;
4776
- brandTertiaryActive: string;
4777
- negative: string;
4778
- warning: string;
4779
- positive: string;
4780
- inset: string;
4781
- backdrop: string;
4782
- };
4783
- text: {
4784
- strong: string;
4785
- default: string;
4786
- subtle: string;
4787
- disabled: string;
4788
- negative: string;
4789
- warning: string;
4790
- positive: string;
4791
- onBrandPrimary: string;
4792
- onBrandSecondary: string;
4793
- onBrandTertiary: string;
4794
- };
4795
- icon: {
4796
- default: string;
4797
- strong: string;
4798
- subtle: string;
4799
- disabled: string;
4800
- negative: string;
4801
- warning: string;
4802
- positive: string;
4803
- onBrandPrimary: string;
4804
- onBrandSecondary: string;
4805
- onBrandTertiary: string;
4806
- };
4807
- border: {
4808
- default: string;
4809
- defaultHover: string;
4810
- defaultSelected: string;
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
- radii: {
4853
- none: string;
4854
- '2xs': string;
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
- shadows: {
4864
- none: string;
4865
- sm: string;
4866
- md: string;
4867
- lg: string;
4868
- xl: string;
1545
+ md: {
1546
+ width: string;
1547
+ height: string;
4869
1548
  };
4870
- typography: {
4871
- display: {
4872
- '3xl': {
4873
- fontFamily: string;
4874
- fontWeight: string;
4875
- fontSize: string;
4876
- lineHeight: string;
4877
- letterSpacing: string;
4878
- fontFeatureSettings: string;
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
- md: {
4997
- fontFamily: string;
4998
- fontWeight: string;
4999
- fontSize: string;
5000
- lineHeight: string;
5001
- letterSpacing: string;
1560
+ ':active': {
1561
+ background: string;
5002
1562
  };
5003
- sm: {
5004
- fontFamily: string;
5005
- fontWeight: string;
5006
- fontSize: string;
5007
- lineHeight: string;
5008
- letterSpacing: string;
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
- xs: {
5011
- fontFamily: string;
5012
- fontWeight: string;
5013
- fontSize: string;
5014
- lineHeight: string;
5015
- letterSpacing: string;
1574
+ ':active': {
1575
+ background: string;
5016
1576
  };
5017
1577
  };
5018
- label: {
5019
- md: {
5020
- fontFamily: string;
5021
- fontWeight: string;
5022
- fontSize: string;
5023
- lineHeight: string;
5024
- letterSpacing: string;
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
- sm: {
5027
- fontFamily: string;
5028
- fontWeight: string;
5029
- fontSize: string;
5030
- lineHeight: string;
5031
- letterSpacing: string;
1588
+ ':active': {
1589
+ background: string;
5032
1590
  };
5033
1591
  };
5034
- button: {
5035
- md: {
5036
- fontFamily: string;
5037
- fontWeight: string;
5038
- fontSize: string;
5039
- lineHeight: string;
5040
- letterSpacing: string;
1592
+ };
1593
+ ghost: {
1594
+ color: string;
1595
+ ":not([disabled])": {
1596
+ '@media(hover: hover)': {
1597
+ ':hover': {
1598
+ background: string;
1599
+ };
5041
1600
  };
5042
- sm: {
5043
- fontFamily: string;
5044
- fontWeight: string;
5045
- fontSize: string;
5046
- lineHeight: string;
5047
- letterSpacing: string;
1601
+ ':active': {
1602
+ background: string;
5048
1603
  };
5049
1604
  };
5050
- caption: {
5051
- md: {
5052
- fontFamily: string;
5053
- fontWeight: string;
5054
- fontSize: string;
5055
- lineHeight: string;
5056
- letterSpacing: string;
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
- sm: {
5059
- fontFamily: string;
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$5 = 'readOnly' | 'size' | 'multiple' | 'disabled' | 'required';
5155
- interface SelectBaseProps extends Omit<HTMLQdsProps<'select'>, OmittedProps$5>, SelectBaseOptions {
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$4 = 'children' | 'readOnly' | 'size' | 'disabled' | 'required' | 'rows' | 'cols';
5189
- interface TextareaBaseProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps$4>, TextareaBaseOptions {
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$3 = 'disabled' | 'label';
5288
- interface SelectOptionProps extends Omit<HTMLQdsProps<'option'>, OmittedProps$3>, SelectOptionOptions {
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$2 = 'readOnly' | 'size';
5311
- interface SelectProps extends Omit<HTMLQdsProps<'select'>, OmittedProps$2>, SelectOptions {
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$1 = 'children' | 'readOnly' | 'size';
5423
- interface TextareaProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps$1>, TextareaOptions {
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 };