@usefidel/design-system 0.16.0 → 0.17.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/icons.cjs +33 -1
- package/dist/icons.d.cts +11 -1
- package/dist/icons.d.ts +11 -1
- package/dist/icons.js +31 -2
- package/dist/index.cjs +240 -186
- package/dist/index.css +97 -0
- package/dist/index.d.cts +43 -2
- package/dist/index.d.ts +43 -2
- package/dist/index.js +238 -186
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -23,9 +23,33 @@ function Button({
|
|
|
23
23
|
] });
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
+
// src/components/Button/ButtonLink.tsx
|
|
27
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
28
|
+
function ButtonLink({
|
|
29
|
+
variant = "primary",
|
|
30
|
+
size = "medium",
|
|
31
|
+
leftIcon,
|
|
32
|
+
rightIcon,
|
|
33
|
+
className,
|
|
34
|
+
children,
|
|
35
|
+
...rest
|
|
36
|
+
}) {
|
|
37
|
+
const classes = [
|
|
38
|
+
"fds-button",
|
|
39
|
+
`fds-button--${variant}`,
|
|
40
|
+
`fds-button--${size}`,
|
|
41
|
+
className
|
|
42
|
+
].filter(Boolean).join(" ");
|
|
43
|
+
return /* @__PURE__ */ jsxs2("a", { className: classes, ...rest, children: [
|
|
44
|
+
leftIcon != null && /* @__PURE__ */ jsx2("span", { className: "fds-button__icon", "aria-hidden": "true", children: leftIcon }),
|
|
45
|
+
children != null && /* @__PURE__ */ jsx2("span", { className: "fds-button__label", children }),
|
|
46
|
+
rightIcon != null && /* @__PURE__ */ jsx2("span", { className: "fds-button__icon", "aria-hidden": "true", children: rightIcon })
|
|
47
|
+
] });
|
|
48
|
+
}
|
|
49
|
+
|
|
26
50
|
// src/components/MismatchCard/MismatchCard.tsx
|
|
27
51
|
import { useState } from "react";
|
|
28
|
-
import { jsx as
|
|
52
|
+
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
29
53
|
function MismatchCard({
|
|
30
54
|
title,
|
|
31
55
|
properties,
|
|
@@ -39,18 +63,18 @@ function MismatchCard({
|
|
|
39
63
|
const visible = expanded || !canToggle ? properties : properties.slice(0, collapsedCount);
|
|
40
64
|
const hiddenCount = properties.length - collapsedCount;
|
|
41
65
|
const classes = ["fds-mismatch-card", className].filter(Boolean).join(" ");
|
|
42
|
-
return /* @__PURE__ */
|
|
43
|
-
/* @__PURE__ */
|
|
44
|
-
/* @__PURE__ */
|
|
45
|
-
/* @__PURE__ */
|
|
46
|
-
/* @__PURE__ */
|
|
47
|
-
/* @__PURE__ */
|
|
48
|
-
/* @__PURE__ */
|
|
49
|
-
/* @__PURE__ */
|
|
66
|
+
return /* @__PURE__ */ jsxs3("div", { className: classes, ...rest, children: [
|
|
67
|
+
/* @__PURE__ */ jsxs3("div", { className: "fds-mismatch-card__content", children: [
|
|
68
|
+
/* @__PURE__ */ jsx3("p", { className: "fds-mismatch-card__title", title, children: title }),
|
|
69
|
+
/* @__PURE__ */ jsx3("div", { className: "fds-mismatch-card__rows", children: visible.map((prop, i) => /* @__PURE__ */ jsxs3("div", { className: "fds-mismatch-card__row", children: [
|
|
70
|
+
/* @__PURE__ */ jsx3("span", { className: "fds-mismatch-card__label", children: prop.label }),
|
|
71
|
+
/* @__PURE__ */ jsxs3("div", { className: "fds-mismatch-card__values", children: [
|
|
72
|
+
/* @__PURE__ */ jsx3("span", { className: "fds-mismatch-card__live", children: prop.live }),
|
|
73
|
+
/* @__PURE__ */ jsx3("span", { className: "fds-mismatch-card__design", children: prop.design })
|
|
50
74
|
] })
|
|
51
75
|
] }, `${prop.label}-${i}`)) })
|
|
52
76
|
] }),
|
|
53
|
-
canToggle && /* @__PURE__ */
|
|
77
|
+
canToggle && /* @__PURE__ */ jsxs3(
|
|
54
78
|
"button",
|
|
55
79
|
{
|
|
56
80
|
type: "button",
|
|
@@ -58,8 +82,8 @@ function MismatchCard({
|
|
|
58
82
|
"aria-expanded": expanded,
|
|
59
83
|
onClick: () => setExpanded((v) => !v),
|
|
60
84
|
children: [
|
|
61
|
-
/* @__PURE__ */
|
|
62
|
-
/* @__PURE__ */
|
|
85
|
+
/* @__PURE__ */ jsx3(Chevron, { direction: expanded ? "up" : "down" }),
|
|
86
|
+
/* @__PURE__ */ jsx3("span", { className: "fds-mismatch-card__toggle-label", children: expanded ? "Show less" : showMoreLabel(hiddenCount) })
|
|
63
87
|
]
|
|
64
88
|
}
|
|
65
89
|
)
|
|
@@ -69,7 +93,7 @@ function showMoreLabel(hiddenCount) {
|
|
|
69
93
|
return `Show ${hiddenCount} more ${hiddenCount === 1 ? "mismatch" : "mismatches"}`;
|
|
70
94
|
}
|
|
71
95
|
function Chevron({ direction }) {
|
|
72
|
-
return /* @__PURE__ */
|
|
96
|
+
return /* @__PURE__ */ jsx3(
|
|
73
97
|
"svg",
|
|
74
98
|
{
|
|
75
99
|
className: `fds-mismatch-card__chevron fds-mismatch-card__chevron--${direction}`,
|
|
@@ -78,7 +102,7 @@ function Chevron({ direction }) {
|
|
|
78
102
|
viewBox: "0 0 20 20",
|
|
79
103
|
fill: "none",
|
|
80
104
|
"aria-hidden": "true",
|
|
81
|
-
children: /* @__PURE__ */
|
|
105
|
+
children: /* @__PURE__ */ jsx3(
|
|
82
106
|
"path",
|
|
83
107
|
{
|
|
84
108
|
d: "M6 8.5 10 12l4-3.5",
|
|
@@ -94,7 +118,7 @@ function Chevron({ direction }) {
|
|
|
94
118
|
|
|
95
119
|
// src/components/DiffSection/DiffSection.tsx
|
|
96
120
|
import { useState as useState2 } from "react";
|
|
97
|
-
import { Fragment, jsx as
|
|
121
|
+
import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
98
122
|
function plural(n, one, many) {
|
|
99
123
|
return `${n} ${n === 1 ? one : many}`;
|
|
100
124
|
}
|
|
@@ -118,7 +142,7 @@ function DiffSection({
|
|
|
118
142
|
headerless && "fds-diff-section--flat",
|
|
119
143
|
className
|
|
120
144
|
].filter(Boolean).join(" ");
|
|
121
|
-
return /* @__PURE__ */
|
|
145
|
+
return /* @__PURE__ */ jsxs4(
|
|
122
146
|
"div",
|
|
123
147
|
{
|
|
124
148
|
className: classes,
|
|
@@ -126,7 +150,7 @@ function DiffSection({
|
|
|
126
150
|
"data-flat": headerless ? "true" : void 0,
|
|
127
151
|
...rest,
|
|
128
152
|
children: [
|
|
129
|
-
!headerless && /* @__PURE__ */
|
|
153
|
+
!headerless && /* @__PURE__ */ jsxs4(
|
|
130
154
|
"button",
|
|
131
155
|
{
|
|
132
156
|
type: "button",
|
|
@@ -134,18 +158,18 @@ function DiffSection({
|
|
|
134
158
|
"aria-expanded": expanded,
|
|
135
159
|
onClick: () => setExpanded((v) => !v),
|
|
136
160
|
children: [
|
|
137
|
-
/* @__PURE__ */
|
|
138
|
-
number != null && /* @__PURE__ */
|
|
139
|
-
name != null && /* @__PURE__ */
|
|
161
|
+
/* @__PURE__ */ jsxs4("span", { className: "fds-diff-section__head-left", children: [
|
|
162
|
+
number != null && /* @__PURE__ */ jsx4("span", { className: "fds-diff-section__number", children: number }),
|
|
163
|
+
name != null && /* @__PURE__ */ jsx4("span", { className: "fds-diff-section__name", children: name })
|
|
140
164
|
] }),
|
|
141
|
-
/* @__PURE__ */
|
|
142
|
-
/* @__PURE__ */
|
|
143
|
-
/* @__PURE__ */
|
|
165
|
+
/* @__PURE__ */ jsxs4("span", { className: "fds-diff-section__head-right", children: [
|
|
166
|
+
/* @__PURE__ */ jsx4("span", { className: "fds-diff-section__count", children: plural(count, "mismatch", "mismatches") }),
|
|
167
|
+
/* @__PURE__ */ jsx4(HeaderChevron, { expanded })
|
|
144
168
|
] })
|
|
145
169
|
]
|
|
146
170
|
}
|
|
147
171
|
),
|
|
148
|
-
open && /* @__PURE__ */
|
|
172
|
+
open && /* @__PURE__ */ jsx4("div", { className: "fds-diff-section__body", children: elements.map((el, ei) => /* @__PURE__ */ jsx4(
|
|
149
173
|
ElementRow,
|
|
150
174
|
{
|
|
151
175
|
element: el,
|
|
@@ -174,15 +198,15 @@ function ElementRow({
|
|
|
174
198
|
if (!isControlled) setInternalOpen(next);
|
|
175
199
|
onToggle?.(index, next);
|
|
176
200
|
};
|
|
177
|
-
const lines = /* @__PURE__ */
|
|
178
|
-
/* @__PURE__ */
|
|
179
|
-
/* @__PURE__ */
|
|
180
|
-
/* @__PURE__ */
|
|
181
|
-
hasDetail && /* @__PURE__ */
|
|
201
|
+
const lines = /* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
202
|
+
/* @__PURE__ */ jsxs4("div", { className: "fds-diff-section__element-head-inner", children: [
|
|
203
|
+
/* @__PURE__ */ jsx4("span", { className: "fds-diff-section__element-name", children: element.name }),
|
|
204
|
+
/* @__PURE__ */ jsx4("span", { className: "fds-diff-section__element-count", children: plural(element.properties.length, "property", "properties") }),
|
|
205
|
+
hasDetail && /* @__PURE__ */ jsx4(Chevron2, { open, className: "fds-diff-section__element-caret" })
|
|
182
206
|
] }),
|
|
183
|
-
/* @__PURE__ */
|
|
207
|
+
/* @__PURE__ */ jsx4(DiffPropertyList, { properties: element.properties })
|
|
184
208
|
] });
|
|
185
|
-
return /* @__PURE__ */
|
|
209
|
+
return /* @__PURE__ */ jsxs4(
|
|
186
210
|
"div",
|
|
187
211
|
{
|
|
188
212
|
className: "fds-diff-section__element",
|
|
@@ -192,7 +216,7 @@ function ElementRow({
|
|
|
192
216
|
onMouseEnter: onHover ? () => onHover(index, true) : void 0,
|
|
193
217
|
onMouseLeave: onHover ? () => onHover(index, false) : void 0,
|
|
194
218
|
children: [
|
|
195
|
-
hasDetail ? /* @__PURE__ */
|
|
219
|
+
hasDetail ? /* @__PURE__ */ jsx4(
|
|
196
220
|
"button",
|
|
197
221
|
{
|
|
198
222
|
type: "button",
|
|
@@ -201,27 +225,27 @@ function ElementRow({
|
|
|
201
225
|
onClick: toggle,
|
|
202
226
|
children: lines
|
|
203
227
|
}
|
|
204
|
-
) : /* @__PURE__ */
|
|
205
|
-
element.sourceUrl != null && /* @__PURE__ */
|
|
206
|
-
hasDetail && open && /* @__PURE__ */
|
|
228
|
+
) : /* @__PURE__ */ jsx4("div", { className: "fds-diff-section__element-head", children: lines }),
|
|
229
|
+
element.sourceUrl != null && /* @__PURE__ */ jsx4(ViewSource, { href: element.sourceUrl, label: element.sourceLabel ?? "View source" }),
|
|
230
|
+
hasDetail && open && /* @__PURE__ */ jsx4("div", { className: "fds-diff-section__detail", children: element.detail })
|
|
207
231
|
]
|
|
208
232
|
}
|
|
209
233
|
);
|
|
210
234
|
}
|
|
211
235
|
function DiffPropertyList({ properties, className, ...rest }) {
|
|
212
236
|
const classes = ["fds-diff-section__lines", className].filter(Boolean).join(" ");
|
|
213
|
-
return /* @__PURE__ */
|
|
214
|
-
/* @__PURE__ */
|
|
215
|
-
/* @__PURE__ */
|
|
216
|
-
/* @__PURE__ */
|
|
217
|
-
/* @__PURE__ */
|
|
218
|
-
/* @__PURE__ */
|
|
237
|
+
return /* @__PURE__ */ jsx4("div", { className: classes, ...rest, children: properties.map((line, li) => /* @__PURE__ */ jsxs4("div", { className: "fds-diff-section__line", children: [
|
|
238
|
+
/* @__PURE__ */ jsx4("span", { className: "fds-diff-section__prop", children: line.property }),
|
|
239
|
+
/* @__PURE__ */ jsxs4("span", { className: "fds-diff-section__delta", children: [
|
|
240
|
+
/* @__PURE__ */ jsx4("span", { className: "fds-diff-section__live", children: line.live }),
|
|
241
|
+
/* @__PURE__ */ jsx4(Arrow, {}),
|
|
242
|
+
/* @__PURE__ */ jsx4("span", { className: "fds-diff-section__design", children: line.design })
|
|
219
243
|
] }),
|
|
220
|
-
line.trailing != null && /* @__PURE__ */
|
|
244
|
+
line.trailing != null && /* @__PURE__ */ jsx4("span", { className: "fds-diff-section__trailing", children: line.trailing })
|
|
221
245
|
] }, `${line.property}-${li}`)) });
|
|
222
246
|
}
|
|
223
247
|
function ViewSource({ href, label }) {
|
|
224
|
-
return /* @__PURE__ */
|
|
248
|
+
return /* @__PURE__ */ jsxs4(
|
|
225
249
|
"a",
|
|
226
250
|
{
|
|
227
251
|
className: "fds-diff-section__source",
|
|
@@ -230,8 +254,8 @@ function ViewSource({ href, label }) {
|
|
|
230
254
|
rel: "noreferrer noopener",
|
|
231
255
|
onClick: (e) => e.stopPropagation(),
|
|
232
256
|
children: [
|
|
233
|
-
/* @__PURE__ */
|
|
234
|
-
/* @__PURE__ */
|
|
257
|
+
/* @__PURE__ */ jsx4("span", { className: "fds-diff-section__source-label", children: label }),
|
|
258
|
+
/* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx4(
|
|
235
259
|
"path",
|
|
236
260
|
{
|
|
237
261
|
d: "M7.5 12.5 12.5 7.5M8 7.5h4.5V12",
|
|
@@ -250,7 +274,7 @@ function HeaderChevron({ expanded }) {
|
|
|
250
274
|
"fds-diff-section__header-chevron",
|
|
251
275
|
expanded && "fds-diff-section__header-chevron--expanded"
|
|
252
276
|
].filter(Boolean).join(" ");
|
|
253
|
-
return /* @__PURE__ */
|
|
277
|
+
return /* @__PURE__ */ jsx4("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", className: classes, children: /* @__PURE__ */ jsx4(
|
|
254
278
|
"path",
|
|
255
279
|
{
|
|
256
280
|
d: "M5 11 9 7l4 4",
|
|
@@ -267,7 +291,7 @@ function Chevron2({ open, className }) {
|
|
|
267
291
|
open && "fds-diff-section__chevron--open",
|
|
268
292
|
className
|
|
269
293
|
].filter(Boolean).join(" ");
|
|
270
|
-
return /* @__PURE__ */
|
|
294
|
+
return /* @__PURE__ */ jsx4("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", className: classes, children: /* @__PURE__ */ jsx4(
|
|
271
295
|
"path",
|
|
272
296
|
{
|
|
273
297
|
d: "M4.5 3 8 6l-3.5 3",
|
|
@@ -279,7 +303,7 @@ function Chevron2({ open, className }) {
|
|
|
279
303
|
) });
|
|
280
304
|
}
|
|
281
305
|
function Arrow() {
|
|
282
|
-
return /* @__PURE__ */
|
|
306
|
+
return /* @__PURE__ */ jsx4(
|
|
283
307
|
"svg",
|
|
284
308
|
{
|
|
285
309
|
className: "fds-diff-section__arrow",
|
|
@@ -288,7 +312,7 @@ function Arrow() {
|
|
|
288
312
|
viewBox: "0 0 10 10",
|
|
289
313
|
fill: "none",
|
|
290
314
|
"aria-hidden": "true",
|
|
291
|
-
children: /* @__PURE__ */
|
|
315
|
+
children: /* @__PURE__ */ jsx4(
|
|
292
316
|
"path",
|
|
293
317
|
{
|
|
294
318
|
d: "M1.5 5h6.5M5.5 2.5 8 5 5.5 7.5",
|
|
@@ -312,12 +336,12 @@ import {
|
|
|
312
336
|
useRef,
|
|
313
337
|
useState as useState3
|
|
314
338
|
} from "react";
|
|
315
|
-
import { jsx as
|
|
339
|
+
import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
316
340
|
function ChevronIcon() {
|
|
317
|
-
return /* @__PURE__ */
|
|
341
|
+
return /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 20 20", width: "18", height: "18", fill: "none", "aria-hidden": "true", className: "fds-select__chevronIcon", children: /* @__PURE__ */ jsx5("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
318
342
|
}
|
|
319
343
|
function CheckIcon() {
|
|
320
|
-
return /* @__PURE__ */
|
|
344
|
+
return /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 20 20", width: "18", height: "18", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("path", { d: "M4.5 10.5l3 3 8-8.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
321
345
|
}
|
|
322
346
|
var Select = forwardRef(function Select2({
|
|
323
347
|
options,
|
|
@@ -440,15 +464,15 @@ var Select = forwardRef(function Select2({
|
|
|
440
464
|
open ? "fds-select__trigger--open" : "",
|
|
441
465
|
className
|
|
442
466
|
].filter(Boolean).join(" ");
|
|
443
|
-
return /* @__PURE__ */
|
|
467
|
+
return /* @__PURE__ */ jsxs5(
|
|
444
468
|
"div",
|
|
445
469
|
{
|
|
446
470
|
ref: rootRef,
|
|
447
471
|
className: ["fds-select-field", containerClassName].filter(Boolean).join(" "),
|
|
448
472
|
children: [
|
|
449
|
-
label != null && /* @__PURE__ */
|
|
450
|
-
/* @__PURE__ */
|
|
451
|
-
/* @__PURE__ */
|
|
473
|
+
label != null && /* @__PURE__ */ jsx5("label", { htmlFor: triggerId, className: "fds-select__label", children: label }),
|
|
474
|
+
/* @__PURE__ */ jsxs5("div", { className: "fds-select", children: [
|
|
475
|
+
/* @__PURE__ */ jsxs5(
|
|
452
476
|
"button",
|
|
453
477
|
{
|
|
454
478
|
type: "button",
|
|
@@ -464,20 +488,20 @@ var Select = forwardRef(function Select2({
|
|
|
464
488
|
onClick: () => !disabled && setOpen((o) => !o),
|
|
465
489
|
onKeyDown,
|
|
466
490
|
children: [
|
|
467
|
-
(selected?.avatar ?? leadingIcon) != null && /* @__PURE__ */
|
|
468
|
-
/* @__PURE__ */
|
|
491
|
+
(selected?.avatar ?? leadingIcon) != null && /* @__PURE__ */ jsx5("span", { className: "fds-select__lead", children: selected?.avatar ?? leadingIcon }),
|
|
492
|
+
/* @__PURE__ */ jsx5(
|
|
469
493
|
"span",
|
|
470
494
|
{
|
|
471
495
|
className: `fds-select__value${selected ? "" : " fds-select__value--placeholder"}`,
|
|
472
496
|
children: selected ? selected.label : placeholder
|
|
473
497
|
}
|
|
474
498
|
),
|
|
475
|
-
/* @__PURE__ */
|
|
499
|
+
/* @__PURE__ */ jsx5("span", { className: "fds-select__chevron", children: /* @__PURE__ */ jsx5(ChevronIcon, {}) })
|
|
476
500
|
]
|
|
477
501
|
}
|
|
478
502
|
),
|
|
479
|
-
open && /* @__PURE__ */
|
|
480
|
-
searchable && /* @__PURE__ */
|
|
503
|
+
open && /* @__PURE__ */ jsxs5("div", { className: "fds-select__popover", children: [
|
|
504
|
+
searchable && /* @__PURE__ */ jsx5("div", { className: "fds-select__search", children: /* @__PURE__ */ jsx5(
|
|
481
505
|
"input",
|
|
482
506
|
{
|
|
483
507
|
ref: searchRef,
|
|
@@ -492,7 +516,7 @@ var Select = forwardRef(function Select2({
|
|
|
492
516
|
"aria-autocomplete": "list"
|
|
493
517
|
}
|
|
494
518
|
) }),
|
|
495
|
-
/* @__PURE__ */
|
|
519
|
+
/* @__PURE__ */ jsxs5(
|
|
496
520
|
"div",
|
|
497
521
|
{
|
|
498
522
|
ref: listRef,
|
|
@@ -503,8 +527,8 @@ var Select = forwardRef(function Select2({
|
|
|
503
527
|
"aria-activedescendant": activeIndex >= 0 ? `${listId}-opt-${activeIndex}` : void 0,
|
|
504
528
|
onKeyDown: searchable ? void 0 : onKeyDown,
|
|
505
529
|
children: [
|
|
506
|
-
filtered.length === 0 && /* @__PURE__ */
|
|
507
|
-
filtered.map((o, i) => /* @__PURE__ */
|
|
530
|
+
filtered.length === 0 && /* @__PURE__ */ jsx5("div", { className: "fds-select__empty", children: "No results" }),
|
|
531
|
+
filtered.map((o, i) => /* @__PURE__ */ jsxs5(
|
|
508
532
|
"div",
|
|
509
533
|
{
|
|
510
534
|
id: `${listId}-opt-${i}`,
|
|
@@ -520,12 +544,12 @@ var Select = forwardRef(function Select2({
|
|
|
520
544
|
onMouseDown: (e) => e.preventDefault(),
|
|
521
545
|
onClick: () => choose(i),
|
|
522
546
|
children: [
|
|
523
|
-
o.avatar != null && /* @__PURE__ */
|
|
524
|
-
/* @__PURE__ */
|
|
525
|
-
/* @__PURE__ */
|
|
526
|
-
o.secondary != null && /* @__PURE__ */
|
|
547
|
+
o.avatar != null && /* @__PURE__ */ jsx5("span", { className: "fds-select__optAvatar", children: o.avatar }),
|
|
548
|
+
/* @__PURE__ */ jsxs5("span", { className: "fds-select__optText", children: [
|
|
549
|
+
/* @__PURE__ */ jsx5("span", { className: "fds-select__optLabel", children: o.label }),
|
|
550
|
+
o.secondary != null && /* @__PURE__ */ jsx5("span", { className: "fds-select__optSecondary", children: o.secondary })
|
|
527
551
|
] }),
|
|
528
|
-
o.value === value && /* @__PURE__ */
|
|
552
|
+
o.value === value && /* @__PURE__ */ jsx5("span", { className: "fds-select__check", children: /* @__PURE__ */ jsx5(CheckIcon, {}) })
|
|
529
553
|
]
|
|
530
554
|
},
|
|
531
555
|
o.value
|
|
@@ -535,8 +559,8 @@ var Select = forwardRef(function Select2({
|
|
|
535
559
|
)
|
|
536
560
|
] })
|
|
537
561
|
] }),
|
|
538
|
-
hasMessage && /* @__PURE__ */
|
|
539
|
-
name != null && /* @__PURE__ */
|
|
562
|
+
hasMessage && /* @__PURE__ */ jsx5("p", { id: msgId, className: error ? "fds-select__error" : "fds-select__hint", children: error ?? hint }),
|
|
563
|
+
name != null && /* @__PURE__ */ jsx5("input", { type: "hidden", name, value: value ?? "" })
|
|
540
564
|
]
|
|
541
565
|
}
|
|
542
566
|
);
|
|
@@ -544,13 +568,13 @@ var Select = forwardRef(function Select2({
|
|
|
544
568
|
|
|
545
569
|
// src/components/Toggle/Toggle.tsx
|
|
546
570
|
import { forwardRef as forwardRef2, useId as useId2 } from "react";
|
|
547
|
-
import { jsx as
|
|
571
|
+
import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
548
572
|
var Toggle = forwardRef2(function Toggle2({ size = "medium", label, description, className, id, disabled, ...rest }, ref) {
|
|
549
573
|
const generatedId = useId2();
|
|
550
574
|
const inputId = id ?? generatedId;
|
|
551
575
|
const classes = ["fds-toggle", `fds-toggle--${size}`, className].filter(Boolean).join(" ");
|
|
552
|
-
return /* @__PURE__ */
|
|
553
|
-
/* @__PURE__ */
|
|
576
|
+
return /* @__PURE__ */ jsxs6("div", { className: classes, "data-disabled": disabled ? "" : void 0, children: [
|
|
577
|
+
/* @__PURE__ */ jsx6(
|
|
554
578
|
"input",
|
|
555
579
|
{
|
|
556
580
|
...rest,
|
|
@@ -562,11 +586,11 @@ var Toggle = forwardRef2(function Toggle2({ size = "medium", label, description,
|
|
|
562
586
|
className: "fds-toggle__input"
|
|
563
587
|
}
|
|
564
588
|
),
|
|
565
|
-
/* @__PURE__ */
|
|
566
|
-
/* @__PURE__ */
|
|
567
|
-
(label != null || description != null) && /* @__PURE__ */
|
|
568
|
-
label != null && /* @__PURE__ */
|
|
569
|
-
description != null && /* @__PURE__ */
|
|
589
|
+
/* @__PURE__ */ jsxs6("label", { htmlFor: inputId, className: "fds-toggle__control", children: [
|
|
590
|
+
/* @__PURE__ */ jsx6("span", { className: "fds-toggle__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx6("span", { className: "fds-toggle__thumb" }) }),
|
|
591
|
+
(label != null || description != null) && /* @__PURE__ */ jsxs6("span", { className: "fds-toggle__text", children: [
|
|
592
|
+
label != null && /* @__PURE__ */ jsx6("span", { className: "fds-toggle__label", children: label }),
|
|
593
|
+
description != null && /* @__PURE__ */ jsx6("span", { className: "fds-toggle__description", children: description })
|
|
570
594
|
] })
|
|
571
595
|
] })
|
|
572
596
|
] });
|
|
@@ -574,7 +598,7 @@ var Toggle = forwardRef2(function Toggle2({ size = "medium", label, description,
|
|
|
574
598
|
|
|
575
599
|
// src/components/AppNav/AppNav.tsx
|
|
576
600
|
import { useEffect as useEffect2, useId as useId3, useRef as useRef2, useState as useState4 } from "react";
|
|
577
|
-
import { jsx as
|
|
601
|
+
import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
578
602
|
function AppNav({
|
|
579
603
|
logo,
|
|
580
604
|
actions,
|
|
@@ -606,9 +630,9 @@ function AppNav({
|
|
|
606
630
|
};
|
|
607
631
|
}, [open]);
|
|
608
632
|
const classes = ["fds-app-nav", className].filter(Boolean).join(" ");
|
|
609
|
-
return /* @__PURE__ */
|
|
610
|
-
/* @__PURE__ */
|
|
611
|
-
/* @__PURE__ */
|
|
633
|
+
return /* @__PURE__ */ jsxs7("nav", { ref: navRef, className: classes, ...rest, children: [
|
|
634
|
+
/* @__PURE__ */ jsx7("div", { className: "fds-app-nav__logo", children: logo }),
|
|
635
|
+
/* @__PURE__ */ jsx7(
|
|
612
636
|
"div",
|
|
613
637
|
{
|
|
614
638
|
id: linksId,
|
|
@@ -620,8 +644,8 @@ function AppNav({
|
|
|
620
644
|
children
|
|
621
645
|
}
|
|
622
646
|
),
|
|
623
|
-
actions != null && /* @__PURE__ */
|
|
624
|
-
/* @__PURE__ */
|
|
647
|
+
actions != null && /* @__PURE__ */ jsx7("div", { className: "fds-app-nav__actions", children: actions }),
|
|
648
|
+
/* @__PURE__ */ jsx7(
|
|
625
649
|
"button",
|
|
626
650
|
{
|
|
627
651
|
ref: toggleRef,
|
|
@@ -631,22 +655,22 @@ function AppNav({
|
|
|
631
655
|
"aria-expanded": open,
|
|
632
656
|
"aria-controls": linksId,
|
|
633
657
|
onClick: () => setOpen((v) => !v),
|
|
634
|
-
children: /* @__PURE__ */
|
|
658
|
+
children: /* @__PURE__ */ jsx7("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: open ? /* @__PURE__ */ jsx7("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) : /* @__PURE__ */ jsx7("path", { d: "M3 6h14M3 10h14M3 14h14", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) })
|
|
635
659
|
}
|
|
636
660
|
)
|
|
637
661
|
] });
|
|
638
662
|
}
|
|
639
663
|
|
|
640
664
|
// src/components/TabNav/TabNav.tsx
|
|
641
|
-
import { jsx as
|
|
665
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
642
666
|
function TabNav({ children, className, ...rest }) {
|
|
643
667
|
const classes = ["fds-tab-nav", className].filter(Boolean).join(" ");
|
|
644
|
-
return /* @__PURE__ */
|
|
668
|
+
return /* @__PURE__ */ jsx8("nav", { className: classes, ...rest, children });
|
|
645
669
|
}
|
|
646
670
|
|
|
647
671
|
// src/components/SettingsSection/SettingsSection.tsx
|
|
648
672
|
import { useId as useId4 } from "react";
|
|
649
|
-
import { jsx as
|
|
673
|
+
import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
650
674
|
function SettingsSection({
|
|
651
675
|
title,
|
|
652
676
|
description,
|
|
@@ -656,19 +680,19 @@ function SettingsSection({
|
|
|
656
680
|
}) {
|
|
657
681
|
const titleId = useId4();
|
|
658
682
|
const classes = ["fds-settings-section", className].filter(Boolean).join(" ");
|
|
659
|
-
return /* @__PURE__ */
|
|
660
|
-
/* @__PURE__ */
|
|
661
|
-
/* @__PURE__ */
|
|
662
|
-
description != null && /* @__PURE__ */
|
|
683
|
+
return /* @__PURE__ */ jsxs8("section", { className: classes, "aria-labelledby": titleId, ...rest, children: [
|
|
684
|
+
/* @__PURE__ */ jsxs8("div", { className: "fds-settings-section__head", children: [
|
|
685
|
+
/* @__PURE__ */ jsx9("h2", { id: titleId, className: "fds-settings-section__title", children: title }),
|
|
686
|
+
description != null && /* @__PURE__ */ jsx9("p", { className: "fds-settings-section__description", children: description })
|
|
663
687
|
] }),
|
|
664
|
-
/* @__PURE__ */
|
|
688
|
+
/* @__PURE__ */ jsx9("div", { className: "fds-settings-section__body", children })
|
|
665
689
|
] });
|
|
666
690
|
}
|
|
667
691
|
|
|
668
692
|
// src/components/Modal/Modal.tsx
|
|
669
693
|
import { useEffect as useEffect3, useId as useId5, useRef as useRef3 } from "react";
|
|
670
694
|
import { createPortal } from "react-dom";
|
|
671
|
-
import { jsx as
|
|
695
|
+
import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
672
696
|
var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
673
697
|
function Modal({
|
|
674
698
|
open,
|
|
@@ -730,14 +754,14 @@ function Modal({
|
|
|
730
754
|
if (!open || typeof document === "undefined") return null;
|
|
731
755
|
const classes = ["fds-modal", `fds-modal--${size}`, tone === "danger" && "fds-modal--danger", className].filter(Boolean).join(" ");
|
|
732
756
|
return createPortal(
|
|
733
|
-
/* @__PURE__ */
|
|
757
|
+
/* @__PURE__ */ jsx10(
|
|
734
758
|
"div",
|
|
735
759
|
{
|
|
736
760
|
className: "fds-modal__scrim",
|
|
737
761
|
onMouseDown: (e) => {
|
|
738
762
|
if (e.target === e.currentTarget && dismissible) onClose();
|
|
739
763
|
},
|
|
740
|
-
children: /* @__PURE__ */
|
|
764
|
+
children: /* @__PURE__ */ jsxs9(
|
|
741
765
|
"div",
|
|
742
766
|
{
|
|
743
767
|
ref: dialogRef,
|
|
@@ -748,7 +772,7 @@ function Modal({
|
|
|
748
772
|
"aria-describedby": description != null ? descriptionId : void 0,
|
|
749
773
|
tabIndex: -1,
|
|
750
774
|
children: [
|
|
751
|
-
/* @__PURE__ */
|
|
775
|
+
/* @__PURE__ */ jsx10(
|
|
752
776
|
"button",
|
|
753
777
|
{
|
|
754
778
|
type: "button",
|
|
@@ -756,18 +780,18 @@ function Modal({
|
|
|
756
780
|
onClick: onClose,
|
|
757
781
|
disabled: !dismissible,
|
|
758
782
|
"aria-label": "Close",
|
|
759
|
-
children: /* @__PURE__ */
|
|
783
|
+
children: /* @__PURE__ */ jsx10("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx10("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
|
|
760
784
|
}
|
|
761
785
|
),
|
|
762
|
-
tone === "danger" && /* @__PURE__ */
|
|
763
|
-
/* @__PURE__ */
|
|
764
|
-
/* @__PURE__ */
|
|
765
|
-
/* @__PURE__ */
|
|
786
|
+
tone === "danger" && /* @__PURE__ */ jsx10("div", { className: "fds-modal__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxs9("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
|
|
787
|
+
/* @__PURE__ */ jsx10("path", { d: "M10 3.5L17.5 16.5H2.5L10 3.5z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
|
|
788
|
+
/* @__PURE__ */ jsx10("path", { d: "M10 8.5v3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
|
|
789
|
+
/* @__PURE__ */ jsx10("circle", { cx: "10", cy: "14.25", r: "0.9", fill: "currentColor" })
|
|
766
790
|
] }) }),
|
|
767
|
-
/* @__PURE__ */
|
|
768
|
-
description != null && /* @__PURE__ */
|
|
769
|
-
children != null && /* @__PURE__ */
|
|
770
|
-
actions != null && /* @__PURE__ */
|
|
791
|
+
/* @__PURE__ */ jsx10("h2", { id: titleId, className: "fds-modal__title", children: title }),
|
|
792
|
+
description != null && /* @__PURE__ */ jsx10("p", { id: descriptionId, className: "fds-modal__description", children: description }),
|
|
793
|
+
children != null && /* @__PURE__ */ jsx10("div", { className: "fds-modal__content", children }),
|
|
794
|
+
actions != null && /* @__PURE__ */ jsx10("div", { className: "fds-modal__actions", children: actions })
|
|
771
795
|
]
|
|
772
796
|
}
|
|
773
797
|
)
|
|
@@ -779,7 +803,7 @@ function Modal({
|
|
|
779
803
|
|
|
780
804
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
781
805
|
import { useRef as useRef4 } from "react";
|
|
782
|
-
import { jsx as
|
|
806
|
+
import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
783
807
|
function SegmentedControl({
|
|
784
808
|
options,
|
|
785
809
|
value,
|
|
@@ -802,9 +826,9 @@ function SegmentedControl({
|
|
|
802
826
|
refs.current[next]?.focus();
|
|
803
827
|
};
|
|
804
828
|
const classes = ["fds-segmented", className].filter(Boolean).join(" ");
|
|
805
|
-
return /* @__PURE__ */
|
|
829
|
+
return /* @__PURE__ */ jsx11("div", { role: "tablist", "aria-label": ariaLabel, className: classes, children: options.map((option, i) => {
|
|
806
830
|
const selected = option.value === value;
|
|
807
|
-
return /* @__PURE__ */
|
|
831
|
+
return /* @__PURE__ */ jsxs10(
|
|
808
832
|
"button",
|
|
809
833
|
{
|
|
810
834
|
ref: (el) => {
|
|
@@ -821,7 +845,7 @@ function SegmentedControl({
|
|
|
821
845
|
onKeyDown: (e) => onKeyDown(e, i),
|
|
822
846
|
children: [
|
|
823
847
|
option.label,
|
|
824
|
-
option.count != null && /* @__PURE__ */
|
|
848
|
+
option.count != null && /* @__PURE__ */ jsx11("span", { className: "fds-segmented__count", children: option.count })
|
|
825
849
|
]
|
|
826
850
|
},
|
|
827
851
|
option.value
|
|
@@ -841,7 +865,7 @@ var breakpoints = {
|
|
|
841
865
|
|
|
842
866
|
// src/components/Avatar/Avatar.tsx
|
|
843
867
|
import { useState as useState5 } from "react";
|
|
844
|
-
import { jsx as
|
|
868
|
+
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
845
869
|
function initialsFor(name) {
|
|
846
870
|
const words = name.trim().split(/[\s._@-]+/).filter(Boolean);
|
|
847
871
|
if (words.length === 0) return "?";
|
|
@@ -852,11 +876,11 @@ function Avatar({ name, src, size = "medium", className, ...rest }) {
|
|
|
852
876
|
const [failedSrc, setFailedSrc] = useState5(null);
|
|
853
877
|
const showImage = !!src && src !== failedSrc;
|
|
854
878
|
const classes = ["fds-avatar", `fds-avatar--${size}`, className].filter(Boolean).join(" ");
|
|
855
|
-
return /* @__PURE__ */
|
|
879
|
+
return /* @__PURE__ */ jsx12("span", { className: classes, role: "img", "aria-label": name, ...rest, children: showImage ? /* @__PURE__ */ jsx12("img", { className: "fds-avatar__img", src, alt: "", onError: () => setFailedSrc(src) }) : /* @__PURE__ */ jsx12("span", { "aria-hidden": "true", children: initialsFor(name) }) });
|
|
856
880
|
}
|
|
857
881
|
|
|
858
882
|
// src/components/SectionHeader/SectionHeader.tsx
|
|
859
|
-
import { jsx as
|
|
883
|
+
import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
860
884
|
function SectionHeader({
|
|
861
885
|
title,
|
|
862
886
|
description,
|
|
@@ -866,14 +890,14 @@ function SectionHeader({
|
|
|
866
890
|
...rest
|
|
867
891
|
}) {
|
|
868
892
|
const classes = ["fds-section-header", className].filter(Boolean).join(" ");
|
|
869
|
-
return /* @__PURE__ */
|
|
870
|
-
/* @__PURE__ */
|
|
871
|
-
description != null && /* @__PURE__ */
|
|
893
|
+
return /* @__PURE__ */ jsxs11("div", { className: classes, ...rest, children: [
|
|
894
|
+
/* @__PURE__ */ jsx13(Heading, { id: titleId, className: "fds-section-header__title", children: title }),
|
|
895
|
+
description != null && /* @__PURE__ */ jsx13("p", { className: "fds-section-header__description", children: description })
|
|
872
896
|
] });
|
|
873
897
|
}
|
|
874
898
|
|
|
875
899
|
// src/components/Split/Split.tsx
|
|
876
|
-
import { jsx as
|
|
900
|
+
import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
877
901
|
function Split({
|
|
878
902
|
aside,
|
|
879
903
|
children,
|
|
@@ -890,47 +914,47 @@ function Split({
|
|
|
890
914
|
sticky && "fds-split--sticky",
|
|
891
915
|
className
|
|
892
916
|
].filter(Boolean).join(" ");
|
|
893
|
-
return /* @__PURE__ */
|
|
917
|
+
return /* @__PURE__ */ jsxs12(
|
|
894
918
|
"div",
|
|
895
919
|
{
|
|
896
920
|
className: classes,
|
|
897
921
|
style: { "--fds-split-aside": asideWidth, ...style },
|
|
898
922
|
...rest,
|
|
899
923
|
children: [
|
|
900
|
-
/* @__PURE__ */
|
|
901
|
-
/* @__PURE__ */
|
|
924
|
+
/* @__PURE__ */ jsx14("div", { className: "fds-split__aside", children: aside }),
|
|
925
|
+
/* @__PURE__ */ jsx14("div", { className: "fds-split__main", children })
|
|
902
926
|
]
|
|
903
927
|
}
|
|
904
928
|
);
|
|
905
929
|
}
|
|
906
930
|
|
|
907
931
|
// src/components/Badge/Badge.tsx
|
|
908
|
-
import { jsx as
|
|
932
|
+
import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
909
933
|
function Badge({ tone = "neutral", icon, className, children, ...rest }) {
|
|
910
934
|
const classes = ["fds-badge", `fds-badge--${tone}`, className].filter(Boolean).join(" ");
|
|
911
|
-
return /* @__PURE__ */
|
|
912
|
-
icon != null && /* @__PURE__ */
|
|
935
|
+
return /* @__PURE__ */ jsxs13("span", { className: classes, ...rest, children: [
|
|
936
|
+
icon != null && /* @__PURE__ */ jsx15("span", { className: "fds-badge__icon", "aria-hidden": "true", children: icon }),
|
|
913
937
|
children
|
|
914
938
|
] });
|
|
915
939
|
}
|
|
916
940
|
|
|
917
941
|
// src/components/Tag/Tag.tsx
|
|
918
|
-
import { jsx as
|
|
942
|
+
import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
919
943
|
function Tag({ dot, className, children, ...rest }) {
|
|
920
|
-
return /* @__PURE__ */
|
|
921
|
-
dot && /* @__PURE__ */
|
|
944
|
+
return /* @__PURE__ */ jsxs14("span", { className: ["fds-tag", className].filter(Boolean).join(" "), ...rest, children: [
|
|
945
|
+
dot && /* @__PURE__ */ jsx16("span", { className: `fds-dot fds-dot--${dot}`, "aria-hidden": "true" }),
|
|
922
946
|
children
|
|
923
947
|
] });
|
|
924
948
|
}
|
|
925
949
|
|
|
926
950
|
// src/components/MultiSelect/MultiSelect.tsx
|
|
927
951
|
import { useEffect as useEffect4, useId as useId6, useRef as useRef5, useState as useState6 } from "react";
|
|
928
|
-
import { jsx as
|
|
952
|
+
import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
929
953
|
function ChevronIcon2() {
|
|
930
|
-
return /* @__PURE__ */
|
|
954
|
+
return /* @__PURE__ */ jsx17("svg", { viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", "aria-hidden": "true", className: "fds-multiselect__chevronIcon", children: /* @__PURE__ */ jsx17("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
931
955
|
}
|
|
932
956
|
function CheckIcon2() {
|
|
933
|
-
return /* @__PURE__ */
|
|
957
|
+
return /* @__PURE__ */ jsx17("svg", { viewBox: "0 0 12 12", width: "12", height: "12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx17("path", { d: "M10 3L4.5 8.5 2 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
934
958
|
}
|
|
935
959
|
function MultiSelect({
|
|
936
960
|
label,
|
|
@@ -1004,8 +1028,8 @@ function MultiSelect({
|
|
|
1004
1028
|
}
|
|
1005
1029
|
};
|
|
1006
1030
|
const triggerClasses = ["fds-multiselect__trigger", open ? "fds-multiselect__trigger--open" : ""].filter(Boolean).join(" ");
|
|
1007
|
-
return /* @__PURE__ */
|
|
1008
|
-
/* @__PURE__ */
|
|
1031
|
+
return /* @__PURE__ */ jsxs15("div", { ref: rootRef, className: ["fds-multiselect", className].filter(Boolean).join(" "), children: [
|
|
1032
|
+
/* @__PURE__ */ jsxs15(
|
|
1009
1033
|
"button",
|
|
1010
1034
|
{
|
|
1011
1035
|
type: "button",
|
|
@@ -1019,18 +1043,18 @@ function MultiSelect({
|
|
|
1019
1043
|
onClick: () => setOpen((o) => !o),
|
|
1020
1044
|
onKeyDown: onTriggerKeyDown,
|
|
1021
1045
|
children: [
|
|
1022
|
-
/* @__PURE__ */
|
|
1023
|
-
value.length > 0 && /* @__PURE__ */
|
|
1046
|
+
/* @__PURE__ */ jsx17("span", { className: "fds-multiselect__label", children: label }),
|
|
1047
|
+
value.length > 0 && /* @__PURE__ */ jsxs15("span", { className: "fds-multiselect__count", "aria-label": `${value.length} of ${options.length} selected`, children: [
|
|
1024
1048
|
value.length,
|
|
1025
1049
|
"/",
|
|
1026
1050
|
options.length
|
|
1027
1051
|
] }),
|
|
1028
|
-
/* @__PURE__ */
|
|
1052
|
+
/* @__PURE__ */ jsx17("span", { className: `fds-multiselect__chevron${open ? " fds-multiselect__chevron--open" : ""}`, children: /* @__PURE__ */ jsx17(ChevronIcon2, {}) })
|
|
1029
1053
|
]
|
|
1030
1054
|
}
|
|
1031
1055
|
),
|
|
1032
|
-
open && /* @__PURE__ */
|
|
1033
|
-
/* @__PURE__ */
|
|
1056
|
+
open && /* @__PURE__ */ jsxs15("div", { className: "fds-multiselect__popover", children: [
|
|
1057
|
+
/* @__PURE__ */ jsx17(
|
|
1034
1058
|
"div",
|
|
1035
1059
|
{
|
|
1036
1060
|
ref: listRef,
|
|
@@ -1044,7 +1068,7 @@ function MultiSelect({
|
|
|
1044
1068
|
onKeyDown: onListKeyDown,
|
|
1045
1069
|
children: options.map((o, i) => {
|
|
1046
1070
|
const checked = selected.has(o.value);
|
|
1047
|
-
return /* @__PURE__ */
|
|
1071
|
+
return /* @__PURE__ */ jsxs15(
|
|
1048
1072
|
"div",
|
|
1049
1073
|
{
|
|
1050
1074
|
id: `${listId}-opt-${i}`,
|
|
@@ -1060,10 +1084,10 @@ function MultiSelect({
|
|
|
1060
1084
|
onMouseDown: (e) => e.preventDefault(),
|
|
1061
1085
|
onClick: () => toggle(o),
|
|
1062
1086
|
children: [
|
|
1063
|
-
/* @__PURE__ */
|
|
1064
|
-
o.dot && /* @__PURE__ */
|
|
1065
|
-
/* @__PURE__ */
|
|
1066
|
-
o.count != null && /* @__PURE__ */
|
|
1087
|
+
/* @__PURE__ */ jsx17("span", { className: `fds-multiselect__box${checked ? " fds-multiselect__box--checked" : ""}`, "aria-hidden": "true", children: checked && /* @__PURE__ */ jsx17(CheckIcon2, {}) }),
|
|
1088
|
+
o.dot && /* @__PURE__ */ jsx17("span", { className: `fds-dot fds-dot--${o.dot}`, "aria-hidden": "true" }),
|
|
1089
|
+
/* @__PURE__ */ jsx17("span", { className: "fds-multiselect__optLabel", children: o.label }),
|
|
1090
|
+
o.count != null && /* @__PURE__ */ jsx17("span", { className: "fds-multiselect__optCount", children: o.count })
|
|
1067
1091
|
]
|
|
1068
1092
|
},
|
|
1069
1093
|
o.value
|
|
@@ -1071,9 +1095,9 @@ function MultiSelect({
|
|
|
1071
1095
|
})
|
|
1072
1096
|
}
|
|
1073
1097
|
),
|
|
1074
|
-
/* @__PURE__ */
|
|
1075
|
-
/* @__PURE__ */
|
|
1076
|
-
/* @__PURE__ */
|
|
1098
|
+
/* @__PURE__ */ jsxs15("div", { className: "fds-multiselect__footer", children: [
|
|
1099
|
+
/* @__PURE__ */ jsx17("button", { type: "button", className: "fds-multiselect__action", onClick: () => onChange(enabled.map((o) => o.value)), children: selectAllLabel }),
|
|
1100
|
+
/* @__PURE__ */ jsx17("button", { type: "button", className: "fds-multiselect__action", onClick: () => onChange([]), children: clearLabel })
|
|
1077
1101
|
] })
|
|
1078
1102
|
] })
|
|
1079
1103
|
] });
|
|
@@ -1081,21 +1105,21 @@ function MultiSelect({
|
|
|
1081
1105
|
|
|
1082
1106
|
// src/components/SearchInput/SearchInput.tsx
|
|
1083
1107
|
import { forwardRef as forwardRef3 } from "react";
|
|
1084
|
-
import { jsx as
|
|
1108
|
+
import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1085
1109
|
var SearchInput = forwardRef3(function SearchInput2({ shortcut, containerClassName, className, value, ...rest }, ref) {
|
|
1086
1110
|
const empty = value === void 0 || value === "";
|
|
1087
|
-
return /* @__PURE__ */
|
|
1088
|
-
/* @__PURE__ */
|
|
1089
|
-
/* @__PURE__ */
|
|
1090
|
-
/* @__PURE__ */
|
|
1111
|
+
return /* @__PURE__ */ jsxs16("div", { className: ["fds-search", containerClassName].filter(Boolean).join(" "), children: [
|
|
1112
|
+
/* @__PURE__ */ jsxs16("svg", { className: "fds-search__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: [
|
|
1113
|
+
/* @__PURE__ */ jsx18("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
|
|
1114
|
+
/* @__PURE__ */ jsx18("path", { d: "m21 21-4.3-4.3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
|
|
1091
1115
|
] }),
|
|
1092
|
-
/* @__PURE__ */
|
|
1093
|
-
shortcut && empty && /* @__PURE__ */
|
|
1116
|
+
/* @__PURE__ */ jsx18("input", { ref, type: "search", value, className: ["fds-search__input", className].filter(Boolean).join(" "), ...rest }),
|
|
1117
|
+
shortcut && empty && /* @__PURE__ */ jsx18("kbd", { className: "fds-search__kbd", "aria-hidden": "true", children: shortcut })
|
|
1094
1118
|
] });
|
|
1095
1119
|
});
|
|
1096
1120
|
|
|
1097
1121
|
// src/components/Pagination/Pagination.tsx
|
|
1098
|
-
import { jsx as
|
|
1122
|
+
import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1099
1123
|
function pageItems(page, pageCount) {
|
|
1100
1124
|
if (pageCount <= 7) return Array.from({ length: pageCount }, (_, i) => i + 1);
|
|
1101
1125
|
const start = Math.max(2, Math.min(page - 1, pageCount - 4));
|
|
@@ -1108,7 +1132,7 @@ function pageItems(page, pageCount) {
|
|
|
1108
1132
|
return items;
|
|
1109
1133
|
}
|
|
1110
1134
|
function Arrow2({ dir }) {
|
|
1111
|
-
return /* @__PURE__ */
|
|
1135
|
+
return /* @__PURE__ */ jsx19("svg", { viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx19("path", { d: dir === "prev" ? "M12 15l-5-5 5-5" : "M8 5l5 5-5 5", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
1112
1136
|
}
|
|
1113
1137
|
function Pagination({ page, pageCount, onPageChange, total, pageSize, variant = "full", className }) {
|
|
1114
1138
|
if (pageCount <= 1) return null;
|
|
@@ -1118,8 +1142,8 @@ function Pagination({ page, pageCount, onPageChange, total, pageSize, variant =
|
|
|
1118
1142
|
const showRange = variant === "full" && total != null && pageSize != null;
|
|
1119
1143
|
const from = (page - 1) * (pageSize ?? 0) + 1;
|
|
1120
1144
|
const to = Math.min(page * (pageSize ?? 0), total ?? 0);
|
|
1121
|
-
return /* @__PURE__ */
|
|
1122
|
-
showRange && /* @__PURE__ */
|
|
1145
|
+
return /* @__PURE__ */ jsxs17("nav", { className: ["fds-pagination", `fds-pagination--${variant}`, className].filter(Boolean).join(" "), "aria-label": "Pagination", children: [
|
|
1146
|
+
showRange && /* @__PURE__ */ jsxs17("p", { className: "fds-pagination__range", children: [
|
|
1123
1147
|
"Showing ",
|
|
1124
1148
|
from,
|
|
1125
1149
|
"\u2013",
|
|
@@ -1127,15 +1151,15 @@ function Pagination({ page, pageCount, onPageChange, total, pageSize, variant =
|
|
|
1127
1151
|
" of ",
|
|
1128
1152
|
total
|
|
1129
1153
|
] }),
|
|
1130
|
-
/* @__PURE__ */
|
|
1131
|
-
/* @__PURE__ */
|
|
1132
|
-
variant === "compact" ? /* @__PURE__ */
|
|
1154
|
+
/* @__PURE__ */ jsxs17("div", { className: "fds-pagination__controls", children: [
|
|
1155
|
+
/* @__PURE__ */ jsx19("button", { type: "button", className: "fds-pagination__arrow", onClick: () => go(page - 1), disabled: page <= 1, "aria-label": "Previous page", children: /* @__PURE__ */ jsx19(Arrow2, { dir: "prev" }) }),
|
|
1156
|
+
variant === "compact" ? /* @__PURE__ */ jsxs17("span", { className: "fds-pagination__status", "aria-live": "polite", children: [
|
|
1133
1157
|
"Page ",
|
|
1134
1158
|
page,
|
|
1135
1159
|
" of ",
|
|
1136
1160
|
pageCount
|
|
1137
1161
|
] }) : pageItems(page, pageCount).map(
|
|
1138
|
-
(p, i) => p === null ? /* @__PURE__ */
|
|
1162
|
+
(p, i) => p === null ? /* @__PURE__ */ jsx19("span", { className: "fds-pagination__gap", "aria-hidden": "true", children: "\u2026" }, `gap-${i}`) : /* @__PURE__ */ jsx19(
|
|
1139
1163
|
"button",
|
|
1140
1164
|
{
|
|
1141
1165
|
type: "button",
|
|
@@ -1148,54 +1172,80 @@ function Pagination({ page, pageCount, onPageChange, total, pageSize, variant =
|
|
|
1148
1172
|
p
|
|
1149
1173
|
)
|
|
1150
1174
|
),
|
|
1151
|
-
/* @__PURE__ */
|
|
1175
|
+
/* @__PURE__ */ jsx19("button", { type: "button", className: "fds-pagination__arrow", onClick: () => go(page + 1), disabled: page >= pageCount, "aria-label": "Next page", children: /* @__PURE__ */ jsx19(Arrow2, { dir: "next" }) })
|
|
1152
1176
|
] })
|
|
1153
1177
|
] });
|
|
1154
1178
|
}
|
|
1155
1179
|
|
|
1156
1180
|
// src/components/EmptyState/EmptyState.tsx
|
|
1157
|
-
import { jsx as
|
|
1181
|
+
import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1158
1182
|
function EmptyState({ illustration, title, description, action, footer, className, ...rest }) {
|
|
1159
|
-
return /* @__PURE__ */
|
|
1160
|
-
illustration != null && /* @__PURE__ */
|
|
1161
|
-
/* @__PURE__ */
|
|
1162
|
-
/* @__PURE__ */
|
|
1163
|
-
description != null && /* @__PURE__ */
|
|
1183
|
+
return /* @__PURE__ */ jsxs18("div", { className: ["fds-empty", className].filter(Boolean).join(" "), ...rest, children: [
|
|
1184
|
+
illustration != null && /* @__PURE__ */ jsx20("div", { className: "fds-empty__illustration", children: illustration }),
|
|
1185
|
+
/* @__PURE__ */ jsxs18("div", { className: "fds-empty__text", children: [
|
|
1186
|
+
/* @__PURE__ */ jsx20("h2", { className: "fds-empty__title", children: title }),
|
|
1187
|
+
description != null && /* @__PURE__ */ jsx20("p", { className: "fds-empty__description", children: description })
|
|
1164
1188
|
] }),
|
|
1165
|
-
(action != null || footer != null) && /* @__PURE__ */
|
|
1189
|
+
(action != null || footer != null) && /* @__PURE__ */ jsxs18("div", { className: "fds-empty__actions", children: [
|
|
1166
1190
|
action,
|
|
1167
|
-
footer != null && /* @__PURE__ */
|
|
1191
|
+
footer != null && /* @__PURE__ */ jsx20("div", { className: "fds-empty__footer", children: footer })
|
|
1168
1192
|
] })
|
|
1169
1193
|
] });
|
|
1170
1194
|
}
|
|
1171
1195
|
function StackedCardsIllustration({ className }) {
|
|
1172
|
-
return /* @__PURE__ */
|
|
1173
|
-
/* @__PURE__ */
|
|
1174
|
-
/* @__PURE__ */
|
|
1175
|
-
/* @__PURE__ */
|
|
1176
|
-
/* @__PURE__ */
|
|
1177
|
-
/* @__PURE__ */
|
|
1178
|
-
/* @__PURE__ */
|
|
1196
|
+
return /* @__PURE__ */ jsxs18("div", { className: ["fds-stacked-cards", className].filter(Boolean).join(" "), "aria-hidden": "true", children: [
|
|
1197
|
+
/* @__PURE__ */ jsx20("div", { className: "fds-stacked-cards__card fds-stacked-cards__card--back" }),
|
|
1198
|
+
/* @__PURE__ */ jsxs18("div", { className: "fds-stacked-cards__card fds-stacked-cards__card--front", children: [
|
|
1199
|
+
/* @__PURE__ */ jsxs18("div", { className: "fds-stacked-cards__lines", children: [
|
|
1200
|
+
/* @__PURE__ */ jsx20("span", {}),
|
|
1201
|
+
/* @__PURE__ */ jsx20("span", {}),
|
|
1202
|
+
/* @__PURE__ */ jsx20("span", {})
|
|
1179
1203
|
] }),
|
|
1180
|
-
/* @__PURE__ */
|
|
1181
|
-
/* @__PURE__ */
|
|
1182
|
-
/* @__PURE__ */
|
|
1204
|
+
/* @__PURE__ */ jsxs18("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", className: "fds-stacked-cards__status", children: [
|
|
1205
|
+
/* @__PURE__ */ jsx20("rect", { x: "0.75", y: "0.75", width: "16.5", height: "16.5", rx: "8.25", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
1206
|
+
/* @__PURE__ */ jsx20("circle", { cx: "9", cy: "9", r: "3", className: "fds-stacked-cards__statusDot" })
|
|
1183
1207
|
] })
|
|
1184
1208
|
] }),
|
|
1185
|
-
/* @__PURE__ */
|
|
1186
|
-
/* @__PURE__ */
|
|
1187
|
-
/* @__PURE__ */
|
|
1209
|
+
/* @__PURE__ */ jsx20("div", { className: "fds-stacked-cards__badge", children: /* @__PURE__ */ jsxs18("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", children: [
|
|
1210
|
+
/* @__PURE__ */ jsx20("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
|
|
1211
|
+
/* @__PURE__ */ jsx20("path", { d: "m21 21-4.3-4.3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
|
|
1188
1212
|
] }) })
|
|
1189
1213
|
] });
|
|
1190
1214
|
}
|
|
1191
1215
|
|
|
1216
|
+
// src/components/Callout/Callout.tsx
|
|
1217
|
+
import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1218
|
+
function Callout({
|
|
1219
|
+
tone = "neutral",
|
|
1220
|
+
icon,
|
|
1221
|
+
title,
|
|
1222
|
+
titleAside,
|
|
1223
|
+
children,
|
|
1224
|
+
action,
|
|
1225
|
+
className,
|
|
1226
|
+
...rest
|
|
1227
|
+
}) {
|
|
1228
|
+
const classes = ["fds-callout", `fds-callout--${tone}`, className].filter(Boolean).join(" ");
|
|
1229
|
+
return /* @__PURE__ */ jsxs19("div", { className: classes, ...rest, children: [
|
|
1230
|
+
icon != null && /* @__PURE__ */ jsx21("span", { className: "fds-callout__icon", "aria-hidden": "true", children: icon }),
|
|
1231
|
+
/* @__PURE__ */ jsxs19("div", { className: "fds-callout__body", children: [
|
|
1232
|
+
/* @__PURE__ */ jsxs19("p", { className: "fds-callout__title", children: [
|
|
1233
|
+
/* @__PURE__ */ jsx21("span", { children: title }),
|
|
1234
|
+
titleAside != null && /* @__PURE__ */ jsx21("span", { className: "fds-callout__aside", children: titleAside })
|
|
1235
|
+
] }),
|
|
1236
|
+
children != null && /* @__PURE__ */ jsx21("div", { className: "fds-callout__text", children })
|
|
1237
|
+
] }),
|
|
1238
|
+
action != null && /* @__PURE__ */ jsx21("div", { className: "fds-callout__action", children: action })
|
|
1239
|
+
] });
|
|
1240
|
+
}
|
|
1241
|
+
|
|
1192
1242
|
// src/components/Skeleton/Skeleton.tsx
|
|
1193
|
-
import { jsx as
|
|
1243
|
+
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
1194
1244
|
var px = (v) => typeof v === "number" ? `${v}px` : v;
|
|
1195
1245
|
function Skeleton({ shape = "rect", width, height, lines = 1, className, style, ...rest }) {
|
|
1196
1246
|
const classes = ["fds-skeleton", `fds-skeleton--${shape}`, className].filter(Boolean).join(" ");
|
|
1197
1247
|
if (shape === "text" && lines > 1) {
|
|
1198
|
-
return /* @__PURE__ */
|
|
1248
|
+
return /* @__PURE__ */ jsx22("span", { className: "fds-skeleton-lines", style: { width: px(width) }, "aria-hidden": "true", children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx22(
|
|
1199
1249
|
"span",
|
|
1200
1250
|
{
|
|
1201
1251
|
className: classes,
|
|
@@ -1206,16 +1256,18 @@ function Skeleton({ shape = "rect", width, height, lines = 1, className, style,
|
|
|
1206
1256
|
)) });
|
|
1207
1257
|
}
|
|
1208
1258
|
const size = shape === "circle" ? { width: px(width ?? height ?? 16), height: px(height ?? width ?? 16) } : { width: px(width), height: px(height) };
|
|
1209
|
-
return /* @__PURE__ */
|
|
1259
|
+
return /* @__PURE__ */ jsx22("span", { className: classes, style: { ...size, ...style }, "aria-hidden": "true", ...rest });
|
|
1210
1260
|
}
|
|
1211
1261
|
function SkeletonGroup({ label = "Loading", className, children, ...rest }) {
|
|
1212
|
-
return /* @__PURE__ */
|
|
1262
|
+
return /* @__PURE__ */ jsx22("div", { role: "status", "aria-busy": "true", "aria-label": label, className, ...rest, children });
|
|
1213
1263
|
}
|
|
1214
1264
|
export {
|
|
1215
1265
|
AppNav,
|
|
1216
1266
|
Avatar,
|
|
1217
1267
|
Badge,
|
|
1218
1268
|
Button,
|
|
1269
|
+
ButtonLink,
|
|
1270
|
+
Callout,
|
|
1219
1271
|
DiffPropertyList,
|
|
1220
1272
|
DiffSection,
|
|
1221
1273
|
EmptyState,
|