@usefidel/design-system 0.21.0 → 0.23.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/fidel.manifest.json +2 -2
- package/dist/index.cjs +138 -89
- package/dist/index.css +173 -5
- package/dist/index.d.cts +42 -6
- package/dist/index.d.ts +42 -6
- package/dist/index.js +129 -82
- package/package.json +1 -1
package/dist/fidel.manifest.json
CHANGED
package/dist/index.cjs
CHANGED
|
@@ -41,6 +41,7 @@ __export(index_exports, {
|
|
|
41
41
|
Pagination: () => Pagination,
|
|
42
42
|
PricingCard: () => PricingCard,
|
|
43
43
|
Radio: () => Radio,
|
|
44
|
+
RadioCard: () => RadioCard,
|
|
44
45
|
SearchInput: () => SearchInput,
|
|
45
46
|
SectionHeader: () => SectionHeader,
|
|
46
47
|
SegmentedControl: () => SegmentedControl,
|
|
@@ -52,6 +53,7 @@ __export(index_exports, {
|
|
|
52
53
|
StackedCardsIllustration: () => StackedCardsIllustration,
|
|
53
54
|
Stat: () => Stat,
|
|
54
55
|
StepList: () => StepList,
|
|
56
|
+
Swatch: () => Swatch,
|
|
55
57
|
TabNav: () => TabNav,
|
|
56
58
|
Table: () => Table,
|
|
57
59
|
Tag: () => Tag,
|
|
@@ -1402,9 +1404,22 @@ function Stat({ label, value, children, className, ...rest }) {
|
|
|
1402
1404
|
] });
|
|
1403
1405
|
}
|
|
1404
1406
|
|
|
1407
|
+
// src/components/Swatch/Swatch.tsx
|
|
1408
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1409
|
+
function Swatch({ color, name, value, children, className, ...rest }) {
|
|
1410
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: ["fds-swatch", className].filter(Boolean).join(" "), ...rest, children: [
|
|
1411
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fds-swatch__color", style: { "--fds-swatch-color": color }, "aria-hidden": "true" }),
|
|
1412
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "fds-swatch__body", children: [
|
|
1413
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "fds-swatch__name", children: name }),
|
|
1414
|
+
value != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "fds-swatch__value", children: value }),
|
|
1415
|
+
children != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fds-swatch__detail", children })
|
|
1416
|
+
] })
|
|
1417
|
+
] });
|
|
1418
|
+
}
|
|
1419
|
+
|
|
1405
1420
|
// src/components/Checkbox/Checkbox.tsx
|
|
1406
1421
|
var import_react12 = require("react");
|
|
1407
|
-
var
|
|
1422
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1408
1423
|
var Checkbox = (0, import_react12.forwardRef)(function Checkbox2({ label, description, indeterminate = false, className, id, disabled, ...rest }, ref) {
|
|
1409
1424
|
const generatedId = (0, import_react12.useId)();
|
|
1410
1425
|
const inputId = id ?? generatedId;
|
|
@@ -1413,13 +1428,13 @@ var Checkbox = (0, import_react12.forwardRef)(function Checkbox2({ label, descri
|
|
|
1413
1428
|
(0, import_react12.useEffect)(() => {
|
|
1414
1429
|
if (inputRef.current) inputRef.current.indeterminate = indeterminate;
|
|
1415
1430
|
}, [indeterminate]);
|
|
1416
|
-
return /* @__PURE__ */ (0,
|
|
1431
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1417
1432
|
"div",
|
|
1418
1433
|
{
|
|
1419
1434
|
className: ["fds-checkbox", className].filter(Boolean).join(" "),
|
|
1420
1435
|
"data-disabled": disabled ? "" : void 0,
|
|
1421
1436
|
children: [
|
|
1422
|
-
/* @__PURE__ */ (0,
|
|
1437
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1423
1438
|
"input",
|
|
1424
1439
|
{
|
|
1425
1440
|
...rest,
|
|
@@ -1430,14 +1445,14 @@ var Checkbox = (0, import_react12.forwardRef)(function Checkbox2({ label, descri
|
|
|
1430
1445
|
className: "fds-checkbox__input"
|
|
1431
1446
|
}
|
|
1432
1447
|
),
|
|
1433
|
-
/* @__PURE__ */ (0,
|
|
1434
|
-
/* @__PURE__ */ (0,
|
|
1435
|
-
/* @__PURE__ */ (0,
|
|
1436
|
-
/* @__PURE__ */ (0,
|
|
1448
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { htmlFor: inputId, className: "fds-checkbox__control", children: [
|
|
1449
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "fds-checkbox__box", "aria-hidden": "true", children: [
|
|
1450
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { className: "fds-checkbox__tick", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M10 3L4.5 8.5 2 6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
1451
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { className: "fds-checkbox__dash", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M3 6h6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) })
|
|
1437
1452
|
] }),
|
|
1438
|
-
(label != null || description != null) && /* @__PURE__ */ (0,
|
|
1439
|
-
label != null && /* @__PURE__ */ (0,
|
|
1440
|
-
description != null && /* @__PURE__ */ (0,
|
|
1453
|
+
(label != null || description != null) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "fds-checkbox__text", children: [
|
|
1454
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fds-checkbox__label", children: label }),
|
|
1455
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fds-checkbox__description", children: description })
|
|
1441
1456
|
] })
|
|
1442
1457
|
] })
|
|
1443
1458
|
]
|
|
@@ -1447,25 +1462,57 @@ var Checkbox = (0, import_react12.forwardRef)(function Checkbox2({ label, descri
|
|
|
1447
1462
|
|
|
1448
1463
|
// src/components/Radio/Radio.tsx
|
|
1449
1464
|
var import_react13 = require("react");
|
|
1450
|
-
var
|
|
1465
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1451
1466
|
var Radio = (0, import_react13.forwardRef)(function Radio2({ label, description, className, id, disabled, ...rest }, ref) {
|
|
1452
1467
|
const generatedId = (0, import_react13.useId)();
|
|
1453
1468
|
const inputId = id ?? generatedId;
|
|
1454
|
-
return /* @__PURE__ */ (0,
|
|
1455
|
-
/* @__PURE__ */ (0,
|
|
1456
|
-
/* @__PURE__ */ (0,
|
|
1457
|
-
/* @__PURE__ */ (0,
|
|
1458
|
-
(label != null || description != null) && /* @__PURE__ */ (0,
|
|
1459
|
-
label != null && /* @__PURE__ */ (0,
|
|
1460
|
-
description != null && /* @__PURE__ */ (0,
|
|
1469
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: ["fds-radio", className].filter(Boolean).join(" "), "data-disabled": disabled ? "" : void 0, children: [
|
|
1470
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("input", { ...rest, id: inputId, ref, type: "radio", disabled, className: "fds-radio__input" }),
|
|
1471
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { htmlFor: inputId, className: "fds-radio__control", children: [
|
|
1472
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fds-radio__circle", "aria-hidden": "true" }),
|
|
1473
|
+
(label != null || description != null) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "fds-radio__text", children: [
|
|
1474
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fds-radio__label", children: label }),
|
|
1475
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fds-radio__description", children: description })
|
|
1461
1476
|
] })
|
|
1462
1477
|
] })
|
|
1463
1478
|
] });
|
|
1464
1479
|
});
|
|
1465
1480
|
|
|
1466
|
-
// src/components/
|
|
1481
|
+
// src/components/RadioCard/RadioCard.tsx
|
|
1467
1482
|
var import_react14 = require("react");
|
|
1468
|
-
var
|
|
1483
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1484
|
+
var RadioCard = (0, import_react14.forwardRef)(function RadioCard2({ label, description, icon, meta, className, id, disabled, ...rest }, ref) {
|
|
1485
|
+
const generatedId = (0, import_react14.useId)();
|
|
1486
|
+
const inputId = id ?? generatedId;
|
|
1487
|
+
const descriptionId = description != null ? `${inputId}-description` : void 0;
|
|
1488
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: ["fds-radio-card", className].filter(Boolean).join(" "), "data-disabled": disabled ? "" : void 0, children: [
|
|
1489
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1490
|
+
"input",
|
|
1491
|
+
{
|
|
1492
|
+
...rest,
|
|
1493
|
+
id: inputId,
|
|
1494
|
+
ref,
|
|
1495
|
+
type: "radio",
|
|
1496
|
+
disabled,
|
|
1497
|
+
"aria-describedby": descriptionId,
|
|
1498
|
+
className: "fds-radio-card__input"
|
|
1499
|
+
}
|
|
1500
|
+
),
|
|
1501
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { htmlFor: inputId, className: "fds-radio-card__body", children: [
|
|
1502
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-radio-card__icon", "aria-hidden": "true", children: icon }),
|
|
1503
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "fds-radio-card__text", children: [
|
|
1504
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-radio-card__label", children: label }),
|
|
1505
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { id: descriptionId, className: "fds-radio-card__description", children: description }),
|
|
1506
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-radio-card__meta", children: meta })
|
|
1507
|
+
] }),
|
|
1508
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-radio-card__circle", "aria-hidden": "true" })
|
|
1509
|
+
] })
|
|
1510
|
+
] });
|
|
1511
|
+
});
|
|
1512
|
+
|
|
1513
|
+
// src/components/Accordion/Accordion.tsx
|
|
1514
|
+
var import_react15 = require("react");
|
|
1515
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1469
1516
|
function Accordion({
|
|
1470
1517
|
summary,
|
|
1471
1518
|
actions,
|
|
@@ -1476,23 +1523,23 @@ function Accordion({
|
|
|
1476
1523
|
className,
|
|
1477
1524
|
...rest
|
|
1478
1525
|
}) {
|
|
1479
|
-
const [openState, setOpenState] = (0,
|
|
1526
|
+
const [openState, setOpenState] = (0, import_react15.useState)(defaultOpen);
|
|
1480
1527
|
const open = openProp ?? openState;
|
|
1481
|
-
const bodyId = (0,
|
|
1528
|
+
const bodyId = (0, import_react15.useId)();
|
|
1482
1529
|
const toggle = () => {
|
|
1483
1530
|
const next = !open;
|
|
1484
1531
|
if (openProp === void 0) setOpenState(next);
|
|
1485
1532
|
onOpenChange?.(next);
|
|
1486
1533
|
};
|
|
1487
|
-
return /* @__PURE__ */ (0,
|
|
1534
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
1488
1535
|
"div",
|
|
1489
1536
|
{
|
|
1490
1537
|
className: ["fds-accordion", className].filter(Boolean).join(" "),
|
|
1491
1538
|
"data-open": open ? "" : void 0,
|
|
1492
1539
|
...rest,
|
|
1493
1540
|
children: [
|
|
1494
|
-
/* @__PURE__ */ (0,
|
|
1495
|
-
/* @__PURE__ */ (0,
|
|
1541
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "fds-accordion__header", children: [
|
|
1542
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1496
1543
|
"button",
|
|
1497
1544
|
{
|
|
1498
1545
|
type: "button",
|
|
@@ -1503,17 +1550,17 @@ function Accordion({
|
|
|
1503
1550
|
children: summary
|
|
1504
1551
|
}
|
|
1505
1552
|
),
|
|
1506
|
-
actions != null && /* @__PURE__ */ (0,
|
|
1507
|
-
/* @__PURE__ */ (0,
|
|
1553
|
+
actions != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "fds-accordion__actions", children: actions }),
|
|
1554
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fds-accordion__chevron", "aria-hidden": "true", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
|
|
1508
1555
|
] }),
|
|
1509
|
-
/* @__PURE__ */ (0,
|
|
1556
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { id: bodyId, className: "fds-accordion__body", hidden: !open, children })
|
|
1510
1557
|
]
|
|
1511
1558
|
}
|
|
1512
1559
|
);
|
|
1513
1560
|
}
|
|
1514
1561
|
|
|
1515
1562
|
// src/components/StepList/StepList.tsx
|
|
1516
|
-
var
|
|
1563
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1517
1564
|
var STATUS_TEXT = {
|
|
1518
1565
|
done: "Done",
|
|
1519
1566
|
active: "In progress",
|
|
@@ -1523,32 +1570,32 @@ var STATUS_TEXT = {
|
|
|
1523
1570
|
function StepIcon({ status }) {
|
|
1524
1571
|
const common = { viewBox: "0 0 24 24", width: 18, height: 18, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
|
|
1525
1572
|
if (status === "done") {
|
|
1526
|
-
return /* @__PURE__ */ (0,
|
|
1527
|
-
/* @__PURE__ */ (0,
|
|
1528
|
-
/* @__PURE__ */ (0,
|
|
1573
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("svg", { ...common, children: [
|
|
1574
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
|
|
1575
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M8 12.5l2.5 2.5 5-5.5" })
|
|
1529
1576
|
] });
|
|
1530
1577
|
}
|
|
1531
1578
|
if (status === "active") {
|
|
1532
|
-
return /* @__PURE__ */ (0,
|
|
1579
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { ...common, className: "fds-steps__spinner", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" }) });
|
|
1533
1580
|
}
|
|
1534
1581
|
if (status === "failed") {
|
|
1535
|
-
return /* @__PURE__ */ (0,
|
|
1536
|
-
/* @__PURE__ */ (0,
|
|
1537
|
-
/* @__PURE__ */ (0,
|
|
1582
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("svg", { ...common, children: [
|
|
1583
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
|
|
1584
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M12 7.5v5.5M12 16.5v.01" })
|
|
1538
1585
|
] });
|
|
1539
1586
|
}
|
|
1540
|
-
return /* @__PURE__ */ (0,
|
|
1587
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { ...common, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "12", cy: "12", r: "9" }) });
|
|
1541
1588
|
}
|
|
1542
1589
|
function StepList({ steps, className, ...rest }) {
|
|
1543
|
-
return /* @__PURE__ */ (0,
|
|
1590
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("ol", { className: ["fds-steps", className].filter(Boolean).join(" "), ...rest, children: steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
1544
1591
|
"li",
|
|
1545
1592
|
{
|
|
1546
1593
|
className: `fds-steps__step fds-steps__step--${step.status}`,
|
|
1547
1594
|
"aria-current": step.status === "active" ? "step" : void 0,
|
|
1548
1595
|
children: [
|
|
1549
|
-
/* @__PURE__ */ (0,
|
|
1550
|
-
/* @__PURE__ */ (0,
|
|
1551
|
-
/* @__PURE__ */ (0,
|
|
1596
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "fds-steps__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StepIcon, { status: step.status }) }),
|
|
1597
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "fds-steps__label", children: step.label }),
|
|
1598
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "fds-steps__sr", children: [
|
|
1552
1599
|
", ",
|
|
1553
1600
|
STATUS_TEXT[step.status]
|
|
1554
1601
|
] })
|
|
@@ -1559,10 +1606,10 @@ function StepList({ steps, className, ...rest }) {
|
|
|
1559
1606
|
}
|
|
1560
1607
|
|
|
1561
1608
|
// src/components/Input/Input.tsx
|
|
1562
|
-
var
|
|
1563
|
-
var
|
|
1564
|
-
var Input = (0,
|
|
1565
|
-
const genId = (0,
|
|
1609
|
+
var import_react16 = require("react");
|
|
1610
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1611
|
+
var Input = (0, import_react16.forwardRef)(function Input2({ label, hint, error, leadingIcon, trailing, id, className, containerClassName, readOnly, disabled, ...rest }, ref) {
|
|
1612
|
+
const genId = (0, import_react16.useId)();
|
|
1566
1613
|
const inputId = id ?? genId;
|
|
1567
1614
|
const msgId = `${genId}-msg`;
|
|
1568
1615
|
const message = error ?? hint;
|
|
@@ -1571,11 +1618,11 @@ var Input = (0, import_react15.forwardRef)(function Input2({ label, hint, error,
|
|
|
1571
1618
|
error ? "fds-input__box--error" : "",
|
|
1572
1619
|
readOnly || disabled ? "fds-input__box--locked" : ""
|
|
1573
1620
|
].filter(Boolean).join(" ");
|
|
1574
|
-
return /* @__PURE__ */ (0,
|
|
1575
|
-
label != null && /* @__PURE__ */ (0,
|
|
1576
|
-
/* @__PURE__ */ (0,
|
|
1577
|
-
leadingIcon != null && /* @__PURE__ */ (0,
|
|
1578
|
-
/* @__PURE__ */ (0,
|
|
1621
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: ["fds-input", containerClassName].filter(Boolean).join(" "), children: [
|
|
1622
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", { htmlFor: inputId, className: "fds-input__label", children: label }),
|
|
1623
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: boxClasses, children: [
|
|
1624
|
+
leadingIcon != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fds-input__icon", "aria-hidden": "true", children: leadingIcon }),
|
|
1625
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
1579
1626
|
"input",
|
|
1580
1627
|
{
|
|
1581
1628
|
ref,
|
|
@@ -1588,14 +1635,14 @@ var Input = (0, import_react15.forwardRef)(function Input2({ label, hint, error,
|
|
|
1588
1635
|
...rest
|
|
1589
1636
|
}
|
|
1590
1637
|
),
|
|
1591
|
-
trailing != null && /* @__PURE__ */ (0,
|
|
1638
|
+
trailing != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fds-input__trailing", children: trailing })
|
|
1592
1639
|
] }),
|
|
1593
|
-
message != null && /* @__PURE__ */ (0,
|
|
1640
|
+
message != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { id: msgId, className: error ? "fds-input__error" : "fds-input__hint", children: message })
|
|
1594
1641
|
] });
|
|
1595
1642
|
});
|
|
1596
1643
|
|
|
1597
1644
|
// src/components/IconButton/IconButton.tsx
|
|
1598
|
-
var
|
|
1645
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1599
1646
|
function IconButton({
|
|
1600
1647
|
icon,
|
|
1601
1648
|
variant = "outlined",
|
|
@@ -1605,20 +1652,20 @@ function IconButton({
|
|
|
1605
1652
|
...rest
|
|
1606
1653
|
}) {
|
|
1607
1654
|
const classes = ["fds-icon-button", `fds-icon-button--${variant}`, `fds-icon-button--${size}`, className].filter(Boolean).join(" ");
|
|
1608
|
-
return /* @__PURE__ */ (0,
|
|
1655
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { type, className: classes, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fds-icon-button__icon", "aria-hidden": "true", children: icon }) });
|
|
1609
1656
|
}
|
|
1610
1657
|
|
|
1611
1658
|
// src/components/Menu/Menu.tsx
|
|
1612
|
-
var
|
|
1613
|
-
var
|
|
1659
|
+
var import_react17 = require("react");
|
|
1660
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1614
1661
|
function Menu({ trigger, items, align = "end", className }) {
|
|
1615
|
-
const listId = (0,
|
|
1616
|
-
const rootRef = (0,
|
|
1617
|
-
const listRef = (0,
|
|
1618
|
-
const [open, setOpen] = (0,
|
|
1619
|
-
const [active, setActive] = (0,
|
|
1662
|
+
const listId = (0, import_react17.useId)();
|
|
1663
|
+
const rootRef = (0, import_react17.useRef)(null);
|
|
1664
|
+
const listRef = (0, import_react17.useRef)(null);
|
|
1665
|
+
const [open, setOpen] = (0, import_react17.useState)(false);
|
|
1666
|
+
const [active, setActive] = (0, import_react17.useState)(0);
|
|
1620
1667
|
const enabled = items.map((it, i) => it.disabled ? -1 : i).filter((i) => i >= 0);
|
|
1621
|
-
(0,
|
|
1668
|
+
(0, import_react17.useEffect)(() => {
|
|
1622
1669
|
if (!open) return;
|
|
1623
1670
|
const onDown = (e) => {
|
|
1624
1671
|
if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
|
|
@@ -1672,7 +1719,7 @@ function Menu({ trigger, items, align = "end", className }) {
|
|
|
1672
1719
|
} else if (e.key === "Tab") setOpen(false);
|
|
1673
1720
|
};
|
|
1674
1721
|
const own = trigger.props;
|
|
1675
|
-
const wired = (0,
|
|
1722
|
+
const wired = (0, import_react17.cloneElement)(trigger, {
|
|
1676
1723
|
"aria-haspopup": "menu",
|
|
1677
1724
|
"aria-expanded": open,
|
|
1678
1725
|
"aria-controls": open ? listId : void 0,
|
|
@@ -1692,9 +1739,9 @@ function Menu({ trigger, items, align = "end", className }) {
|
|
|
1692
1739
|
}
|
|
1693
1740
|
}
|
|
1694
1741
|
});
|
|
1695
|
-
return /* @__PURE__ */ (0,
|
|
1742
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ref: rootRef, className: ["fds-menu", className].filter(Boolean).join(" "), children: [
|
|
1696
1743
|
wired,
|
|
1697
|
-
open && /* @__PURE__ */ (0,
|
|
1744
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1698
1745
|
"div",
|
|
1699
1746
|
{
|
|
1700
1747
|
ref: listRef,
|
|
@@ -1704,7 +1751,7 @@ function Menu({ trigger, items, align = "end", className }) {
|
|
|
1704
1751
|
className: `fds-menu__list fds-menu__list--${align}`,
|
|
1705
1752
|
"aria-activedescendant": `${listId}-item-${active}`,
|
|
1706
1753
|
onKeyDown: onListKeyDown,
|
|
1707
|
-
children: items.map((it, i) => /* @__PURE__ */ (0,
|
|
1754
|
+
children: items.map((it, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
1708
1755
|
"div",
|
|
1709
1756
|
{
|
|
1710
1757
|
id: `${listId}-item-${i}`,
|
|
@@ -1720,7 +1767,7 @@ function Menu({ trigger, items, align = "end", className }) {
|
|
|
1720
1767
|
onMouseDown: (e) => e.preventDefault(),
|
|
1721
1768
|
onClick: () => choose(i),
|
|
1722
1769
|
children: [
|
|
1723
|
-
it.icon != null && /* @__PURE__ */ (0,
|
|
1770
|
+
it.icon != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fds-menu__icon", "aria-hidden": "true", children: it.icon }),
|
|
1724
1771
|
it.label
|
|
1725
1772
|
]
|
|
1726
1773
|
},
|
|
@@ -1732,10 +1779,10 @@ function Menu({ trigger, items, align = "end", className }) {
|
|
|
1732
1779
|
}
|
|
1733
1780
|
|
|
1734
1781
|
// src/components/Table/Table.tsx
|
|
1735
|
-
var
|
|
1782
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1736
1783
|
function Table({ columns, rows, rowKey, empty, className, "aria-label": ariaLabel, ...rest }) {
|
|
1737
|
-
return /* @__PURE__ */ (0,
|
|
1738
|
-
/* @__PURE__ */ (0,
|
|
1784
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: ["fds-table", className].filter(Boolean).join(" "), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("table", { className: "fds-table__table", "aria-label": ariaLabel, children: [
|
|
1785
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tr", { children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
1739
1786
|
"th",
|
|
1740
1787
|
{
|
|
1741
1788
|
scope: "col",
|
|
@@ -1745,17 +1792,17 @@ function Table({ columns, rows, rowKey, empty, className, "aria-label": ariaLabe
|
|
|
1745
1792
|
},
|
|
1746
1793
|
c.key
|
|
1747
1794
|
)) }) }),
|
|
1748
|
-
/* @__PURE__ */ (0,
|
|
1749
|
-
rows.map((row) => /* @__PURE__ */ (0,
|
|
1750
|
-
rows.length === 0 && empty != null && /* @__PURE__ */ (0,
|
|
1795
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("tbody", { children: [
|
|
1796
|
+
rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tr", { children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("td", { className: c.align === "end" ? "fds-table__cell--end" : void 0, children: c.cell(row) }, c.key)) }, rowKey(row))),
|
|
1797
|
+
rows.length === 0 && empty != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("td", { colSpan: columns.length, className: "fds-table__empty", children: empty }) })
|
|
1751
1798
|
] })
|
|
1752
1799
|
] }) });
|
|
1753
1800
|
}
|
|
1754
1801
|
|
|
1755
1802
|
// src/components/PricingCard/PricingCard.tsx
|
|
1756
|
-
var
|
|
1803
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1757
1804
|
function CheckIcon3() {
|
|
1758
|
-
return /* @__PURE__ */ (0,
|
|
1805
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { viewBox: "0 0 16 16", width: "12", height: "12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M3.5 8.5l3 3 6-7", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
1759
1806
|
}
|
|
1760
1807
|
function PricingCard({
|
|
1761
1808
|
eyebrow,
|
|
@@ -1773,25 +1820,25 @@ function PricingCard({
|
|
|
1773
1820
|
...rest
|
|
1774
1821
|
}) {
|
|
1775
1822
|
const classes = ["fds-pricing-card", highlighted ? "fds-pricing-card--highlighted" : "", className].filter(Boolean).join(" ");
|
|
1776
|
-
return /* @__PURE__ */ (0,
|
|
1777
|
-
/* @__PURE__ */ (0,
|
|
1778
|
-
eyebrow != null && /* @__PURE__ */ (0,
|
|
1779
|
-
/* @__PURE__ */ (0,
|
|
1823
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("article", { className: classes, ...rest, children: [
|
|
1824
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "fds-pricing-card__top", children: [
|
|
1825
|
+
eyebrow != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fds-pricing-card__eyebrow", children: eyebrow }),
|
|
1826
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("h3", { className: "fds-pricing-card__title", children: [
|
|
1780
1827
|
title,
|
|
1781
1828
|
badge
|
|
1782
1829
|
] }),
|
|
1783
|
-
/* @__PURE__ */ (0,
|
|
1784
|
-
/* @__PURE__ */ (0,
|
|
1785
|
-
period != null && /* @__PURE__ */ (0,
|
|
1830
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "fds-pricing-card__price", children: [
|
|
1831
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fds-pricing-card__amount", children: price }),
|
|
1832
|
+
period != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fds-pricing-card__period", children: period })
|
|
1786
1833
|
] }),
|
|
1787
|
-
description != null && /* @__PURE__ */ (0,
|
|
1788
|
-
action != null && /* @__PURE__ */ (0,
|
|
1834
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "fds-pricing-card__description", children: description }),
|
|
1835
|
+
action != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "fds-pricing-card__action", children: action })
|
|
1789
1836
|
] }),
|
|
1790
|
-
features.length > 0 && /* @__PURE__ */ (0,
|
|
1791
|
-
/* @__PURE__ */ (0,
|
|
1792
|
-
featuresIntro != null && /* @__PURE__ */ (0,
|
|
1793
|
-
/* @__PURE__ */ (0,
|
|
1794
|
-
/* @__PURE__ */ (0,
|
|
1837
|
+
features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "fds-pricing-card__features", children: [
|
|
1838
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "fds-pricing-card__featuresTitle", children: featuresTitle }),
|
|
1839
|
+
featuresIntro != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "fds-pricing-card__intro", children: featuresIntro }),
|
|
1840
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: "fds-pricing-card__list", children: features.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: "fds-pricing-card__feature", children: [
|
|
1841
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fds-pricing-card__check", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CheckIcon3, {}) }),
|
|
1795
1842
|
f
|
|
1796
1843
|
] }, i)) })
|
|
1797
1844
|
] })
|
|
@@ -1820,6 +1867,7 @@ function PricingCard({
|
|
|
1820
1867
|
Pagination,
|
|
1821
1868
|
PricingCard,
|
|
1822
1869
|
Radio,
|
|
1870
|
+
RadioCard,
|
|
1823
1871
|
SearchInput,
|
|
1824
1872
|
SectionHeader,
|
|
1825
1873
|
SegmentedControl,
|
|
@@ -1831,6 +1879,7 @@ function PricingCard({
|
|
|
1831
1879
|
StackedCardsIllustration,
|
|
1832
1880
|
Stat,
|
|
1833
1881
|
StepList,
|
|
1882
|
+
Swatch,
|
|
1834
1883
|
TabNav,
|
|
1835
1884
|
Table,
|
|
1836
1885
|
Tag,
|