@usefidel/design-system 0.16.0 → 0.18.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 +427 -187
- package/dist/index.css +477 -0
- package/dist/index.d.cts +147 -3
- package/dist/index.d.ts +147 -3
- package/dist/index.js +425 -187
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -20,10 +20,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/index.ts
|
|
21
21
|
var index_exports = {};
|
|
22
22
|
__export(index_exports, {
|
|
23
|
+
Accordion: () => Accordion,
|
|
23
24
|
AppNav: () => AppNav,
|
|
24
25
|
Avatar: () => Avatar,
|
|
25
26
|
Badge: () => Badge,
|
|
26
27
|
Button: () => Button,
|
|
28
|
+
ButtonLink: () => ButtonLink,
|
|
29
|
+
Callout: () => Callout,
|
|
30
|
+
Card: () => Card,
|
|
31
|
+
Checkbox: () => Checkbox,
|
|
27
32
|
DiffPropertyList: () => DiffPropertyList,
|
|
28
33
|
DiffSection: () => DiffSection,
|
|
29
34
|
EmptyState: () => EmptyState,
|
|
@@ -31,6 +36,7 @@ __export(index_exports, {
|
|
|
31
36
|
Modal: () => Modal,
|
|
32
37
|
MultiSelect: () => MultiSelect,
|
|
33
38
|
Pagination: () => Pagination,
|
|
39
|
+
Radio: () => Radio,
|
|
34
40
|
SearchInput: () => SearchInput,
|
|
35
41
|
SectionHeader: () => SectionHeader,
|
|
36
42
|
SegmentedControl: () => SegmentedControl,
|
|
@@ -40,6 +46,8 @@ __export(index_exports, {
|
|
|
40
46
|
SkeletonGroup: () => SkeletonGroup,
|
|
41
47
|
Split: () => Split,
|
|
42
48
|
StackedCardsIllustration: () => StackedCardsIllustration,
|
|
49
|
+
Stat: () => Stat,
|
|
50
|
+
StepList: () => StepList,
|
|
43
51
|
TabNav: () => TabNav,
|
|
44
52
|
Tag: () => Tag,
|
|
45
53
|
Toggle: () => Toggle,
|
|
@@ -72,9 +80,33 @@ function Button({
|
|
|
72
80
|
] });
|
|
73
81
|
}
|
|
74
82
|
|
|
83
|
+
// src/components/Button/ButtonLink.tsx
|
|
84
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
85
|
+
function ButtonLink({
|
|
86
|
+
variant = "primary",
|
|
87
|
+
size = "medium",
|
|
88
|
+
leftIcon,
|
|
89
|
+
rightIcon,
|
|
90
|
+
className,
|
|
91
|
+
children,
|
|
92
|
+
...rest
|
|
93
|
+
}) {
|
|
94
|
+
const classes = [
|
|
95
|
+
"fds-button",
|
|
96
|
+
`fds-button--${variant}`,
|
|
97
|
+
`fds-button--${size}`,
|
|
98
|
+
className
|
|
99
|
+
].filter(Boolean).join(" ");
|
|
100
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("a", { className: classes, ...rest, children: [
|
|
101
|
+
leftIcon != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fds-button__icon", "aria-hidden": "true", children: leftIcon }),
|
|
102
|
+
children != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fds-button__label", children }),
|
|
103
|
+
rightIcon != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fds-button__icon", "aria-hidden": "true", children: rightIcon })
|
|
104
|
+
] });
|
|
105
|
+
}
|
|
106
|
+
|
|
75
107
|
// src/components/MismatchCard/MismatchCard.tsx
|
|
76
108
|
var import_react = require("react");
|
|
77
|
-
var
|
|
109
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
78
110
|
function MismatchCard({
|
|
79
111
|
title,
|
|
80
112
|
properties,
|
|
@@ -88,18 +120,18 @@ function MismatchCard({
|
|
|
88
120
|
const visible = expanded || !canToggle ? properties : properties.slice(0, collapsedCount);
|
|
89
121
|
const hiddenCount = properties.length - collapsedCount;
|
|
90
122
|
const classes = ["fds-mismatch-card", className].filter(Boolean).join(" ");
|
|
91
|
-
return /* @__PURE__ */ (0,
|
|
92
|
-
/* @__PURE__ */ (0,
|
|
93
|
-
/* @__PURE__ */ (0,
|
|
94
|
-
/* @__PURE__ */ (0,
|
|
95
|
-
/* @__PURE__ */ (0,
|
|
96
|
-
/* @__PURE__ */ (0,
|
|
97
|
-
/* @__PURE__ */ (0,
|
|
98
|
-
/* @__PURE__ */ (0,
|
|
123
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: classes, ...rest, children: [
|
|
124
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fds-mismatch-card__content", children: [
|
|
125
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "fds-mismatch-card__title", title, children: title }),
|
|
126
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fds-mismatch-card__rows", children: visible.map((prop, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fds-mismatch-card__row", children: [
|
|
127
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-mismatch-card__label", children: prop.label }),
|
|
128
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fds-mismatch-card__values", children: [
|
|
129
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-mismatch-card__live", children: prop.live }),
|
|
130
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-mismatch-card__design", children: prop.design })
|
|
99
131
|
] })
|
|
100
132
|
] }, `${prop.label}-${i}`)) })
|
|
101
133
|
] }),
|
|
102
|
-
canToggle && /* @__PURE__ */ (0,
|
|
134
|
+
canToggle && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
103
135
|
"button",
|
|
104
136
|
{
|
|
105
137
|
type: "button",
|
|
@@ -107,8 +139,8 @@ function MismatchCard({
|
|
|
107
139
|
"aria-expanded": expanded,
|
|
108
140
|
onClick: () => setExpanded((v) => !v),
|
|
109
141
|
children: [
|
|
110
|
-
/* @__PURE__ */ (0,
|
|
111
|
-
/* @__PURE__ */ (0,
|
|
142
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chevron, { direction: expanded ? "up" : "down" }),
|
|
143
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-mismatch-card__toggle-label", children: expanded ? "Show less" : showMoreLabel(hiddenCount) })
|
|
112
144
|
]
|
|
113
145
|
}
|
|
114
146
|
)
|
|
@@ -118,7 +150,7 @@ function showMoreLabel(hiddenCount) {
|
|
|
118
150
|
return `Show ${hiddenCount} more ${hiddenCount === 1 ? "mismatch" : "mismatches"}`;
|
|
119
151
|
}
|
|
120
152
|
function Chevron({ direction }) {
|
|
121
|
-
return /* @__PURE__ */ (0,
|
|
153
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
122
154
|
"svg",
|
|
123
155
|
{
|
|
124
156
|
className: `fds-mismatch-card__chevron fds-mismatch-card__chevron--${direction}`,
|
|
@@ -127,7 +159,7 @@ function Chevron({ direction }) {
|
|
|
127
159
|
viewBox: "0 0 20 20",
|
|
128
160
|
fill: "none",
|
|
129
161
|
"aria-hidden": "true",
|
|
130
|
-
children: /* @__PURE__ */ (0,
|
|
162
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
131
163
|
"path",
|
|
132
164
|
{
|
|
133
165
|
d: "M6 8.5 10 12l4-3.5",
|
|
@@ -143,7 +175,7 @@ function Chevron({ direction }) {
|
|
|
143
175
|
|
|
144
176
|
// src/components/DiffSection/DiffSection.tsx
|
|
145
177
|
var import_react2 = require("react");
|
|
146
|
-
var
|
|
178
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
147
179
|
function plural(n, one, many) {
|
|
148
180
|
return `${n} ${n === 1 ? one : many}`;
|
|
149
181
|
}
|
|
@@ -167,7 +199,7 @@ function DiffSection({
|
|
|
167
199
|
headerless && "fds-diff-section--flat",
|
|
168
200
|
className
|
|
169
201
|
].filter(Boolean).join(" ");
|
|
170
|
-
return /* @__PURE__ */ (0,
|
|
202
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
171
203
|
"div",
|
|
172
204
|
{
|
|
173
205
|
className: classes,
|
|
@@ -175,7 +207,7 @@ function DiffSection({
|
|
|
175
207
|
"data-flat": headerless ? "true" : void 0,
|
|
176
208
|
...rest,
|
|
177
209
|
children: [
|
|
178
|
-
!headerless && /* @__PURE__ */ (0,
|
|
210
|
+
!headerless && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
179
211
|
"button",
|
|
180
212
|
{
|
|
181
213
|
type: "button",
|
|
@@ -183,18 +215,18 @@ function DiffSection({
|
|
|
183
215
|
"aria-expanded": expanded,
|
|
184
216
|
onClick: () => setExpanded((v) => !v),
|
|
185
217
|
children: [
|
|
186
|
-
/* @__PURE__ */ (0,
|
|
187
|
-
number != null && /* @__PURE__ */ (0,
|
|
188
|
-
name != null && /* @__PURE__ */ (0,
|
|
218
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "fds-diff-section__head-left", children: [
|
|
219
|
+
number != null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__number", children: number }),
|
|
220
|
+
name != null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__name", children: name })
|
|
189
221
|
] }),
|
|
190
|
-
/* @__PURE__ */ (0,
|
|
191
|
-
/* @__PURE__ */ (0,
|
|
192
|
-
/* @__PURE__ */ (0,
|
|
222
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "fds-diff-section__head-right", children: [
|
|
223
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__count", children: plural(count, "mismatch", "mismatches") }),
|
|
224
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HeaderChevron, { expanded })
|
|
193
225
|
] })
|
|
194
226
|
]
|
|
195
227
|
}
|
|
196
228
|
),
|
|
197
|
-
open && /* @__PURE__ */ (0,
|
|
229
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fds-diff-section__body", children: elements.map((el, ei) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
198
230
|
ElementRow,
|
|
199
231
|
{
|
|
200
232
|
element: el,
|
|
@@ -223,15 +255,15 @@ function ElementRow({
|
|
|
223
255
|
if (!isControlled) setInternalOpen(next);
|
|
224
256
|
onToggle?.(index, next);
|
|
225
257
|
};
|
|
226
|
-
const lines = /* @__PURE__ */ (0,
|
|
227
|
-
/* @__PURE__ */ (0,
|
|
228
|
-
/* @__PURE__ */ (0,
|
|
229
|
-
/* @__PURE__ */ (0,
|
|
230
|
-
hasDetail && /* @__PURE__ */ (0,
|
|
258
|
+
const lines = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
259
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fds-diff-section__element-head-inner", children: [
|
|
260
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__element-name", children: element.name }),
|
|
261
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__element-count", children: plural(element.properties.length, "property", "properties") }),
|
|
262
|
+
hasDetail && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chevron2, { open, className: "fds-diff-section__element-caret" })
|
|
231
263
|
] }),
|
|
232
|
-
/* @__PURE__ */ (0,
|
|
264
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DiffPropertyList, { properties: element.properties })
|
|
233
265
|
] });
|
|
234
|
-
return /* @__PURE__ */ (0,
|
|
266
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
235
267
|
"div",
|
|
236
268
|
{
|
|
237
269
|
className: "fds-diff-section__element",
|
|
@@ -241,7 +273,7 @@ function ElementRow({
|
|
|
241
273
|
onMouseEnter: onHover ? () => onHover(index, true) : void 0,
|
|
242
274
|
onMouseLeave: onHover ? () => onHover(index, false) : void 0,
|
|
243
275
|
children: [
|
|
244
|
-
hasDetail ? /* @__PURE__ */ (0,
|
|
276
|
+
hasDetail ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
245
277
|
"button",
|
|
246
278
|
{
|
|
247
279
|
type: "button",
|
|
@@ -250,27 +282,27 @@ function ElementRow({
|
|
|
250
282
|
onClick: toggle,
|
|
251
283
|
children: lines
|
|
252
284
|
}
|
|
253
|
-
) : /* @__PURE__ */ (0,
|
|
254
|
-
element.sourceUrl != null && /* @__PURE__ */ (0,
|
|
255
|
-
hasDetail && open && /* @__PURE__ */ (0,
|
|
285
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fds-diff-section__element-head", children: lines }),
|
|
286
|
+
element.sourceUrl != null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ViewSource, { href: element.sourceUrl, label: element.sourceLabel ?? "View source" }),
|
|
287
|
+
hasDetail && open && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fds-diff-section__detail", children: element.detail })
|
|
256
288
|
]
|
|
257
289
|
}
|
|
258
290
|
);
|
|
259
291
|
}
|
|
260
292
|
function DiffPropertyList({ properties, className, ...rest }) {
|
|
261
293
|
const classes = ["fds-diff-section__lines", className].filter(Boolean).join(" ");
|
|
262
|
-
return /* @__PURE__ */ (0,
|
|
263
|
-
/* @__PURE__ */ (0,
|
|
264
|
-
/* @__PURE__ */ (0,
|
|
265
|
-
/* @__PURE__ */ (0,
|
|
266
|
-
/* @__PURE__ */ (0,
|
|
267
|
-
/* @__PURE__ */ (0,
|
|
294
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: classes, ...rest, children: properties.map((line, li) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fds-diff-section__line", children: [
|
|
295
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__prop", children: line.property }),
|
|
296
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "fds-diff-section__delta", children: [
|
|
297
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__live", children: line.live }),
|
|
298
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Arrow, {}),
|
|
299
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__design", children: line.design })
|
|
268
300
|
] }),
|
|
269
|
-
line.trailing != null && /* @__PURE__ */ (0,
|
|
301
|
+
line.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__trailing", children: line.trailing })
|
|
270
302
|
] }, `${line.property}-${li}`)) });
|
|
271
303
|
}
|
|
272
304
|
function ViewSource({ href, label }) {
|
|
273
|
-
return /* @__PURE__ */ (0,
|
|
305
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
274
306
|
"a",
|
|
275
307
|
{
|
|
276
308
|
className: "fds-diff-section__source",
|
|
@@ -279,8 +311,8 @@ function ViewSource({ href, label }) {
|
|
|
279
311
|
rel: "noreferrer noopener",
|
|
280
312
|
onClick: (e) => e.stopPropagation(),
|
|
281
313
|
children: [
|
|
282
|
-
/* @__PURE__ */ (0,
|
|
283
|
-
/* @__PURE__ */ (0,
|
|
314
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__source-label", children: label }),
|
|
315
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
284
316
|
"path",
|
|
285
317
|
{
|
|
286
318
|
d: "M7.5 12.5 12.5 7.5M8 7.5h4.5V12",
|
|
@@ -299,7 +331,7 @@ function HeaderChevron({ expanded }) {
|
|
|
299
331
|
"fds-diff-section__header-chevron",
|
|
300
332
|
expanded && "fds-diff-section__header-chevron--expanded"
|
|
301
333
|
].filter(Boolean).join(" ");
|
|
302
|
-
return /* @__PURE__ */ (0,
|
|
334
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
303
335
|
"path",
|
|
304
336
|
{
|
|
305
337
|
d: "M5 11 9 7l4 4",
|
|
@@ -316,7 +348,7 @@ function Chevron2({ open, className }) {
|
|
|
316
348
|
open && "fds-diff-section__chevron--open",
|
|
317
349
|
className
|
|
318
350
|
].filter(Boolean).join(" ");
|
|
319
|
-
return /* @__PURE__ */ (0,
|
|
351
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
320
352
|
"path",
|
|
321
353
|
{
|
|
322
354
|
d: "M4.5 3 8 6l-3.5 3",
|
|
@@ -328,7 +360,7 @@ function Chevron2({ open, className }) {
|
|
|
328
360
|
) });
|
|
329
361
|
}
|
|
330
362
|
function Arrow() {
|
|
331
|
-
return /* @__PURE__ */ (0,
|
|
363
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
332
364
|
"svg",
|
|
333
365
|
{
|
|
334
366
|
className: "fds-diff-section__arrow",
|
|
@@ -337,7 +369,7 @@ function Arrow() {
|
|
|
337
369
|
viewBox: "0 0 10 10",
|
|
338
370
|
fill: "none",
|
|
339
371
|
"aria-hidden": "true",
|
|
340
|
-
children: /* @__PURE__ */ (0,
|
|
372
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
341
373
|
"path",
|
|
342
374
|
{
|
|
343
375
|
d: "M1.5 5h6.5M5.5 2.5 8 5 5.5 7.5",
|
|
@@ -353,12 +385,12 @@ function Arrow() {
|
|
|
353
385
|
|
|
354
386
|
// src/components/Select/Select.tsx
|
|
355
387
|
var import_react3 = require("react");
|
|
356
|
-
var
|
|
388
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
357
389
|
function ChevronIcon() {
|
|
358
|
-
return /* @__PURE__ */ (0,
|
|
390
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 20 20", width: "18", height: "18", fill: "none", "aria-hidden": "true", className: "fds-select__chevronIcon", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
359
391
|
}
|
|
360
392
|
function CheckIcon() {
|
|
361
|
-
return /* @__PURE__ */ (0,
|
|
393
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 20 20", width: "18", height: "18", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M4.5 10.5l3 3 8-8.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
362
394
|
}
|
|
363
395
|
var Select = (0, import_react3.forwardRef)(function Select2({
|
|
364
396
|
options,
|
|
@@ -481,15 +513,15 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
481
513
|
open ? "fds-select__trigger--open" : "",
|
|
482
514
|
className
|
|
483
515
|
].filter(Boolean).join(" ");
|
|
484
|
-
return /* @__PURE__ */ (0,
|
|
516
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
485
517
|
"div",
|
|
486
518
|
{
|
|
487
519
|
ref: rootRef,
|
|
488
520
|
className: ["fds-select-field", containerClassName].filter(Boolean).join(" "),
|
|
489
521
|
children: [
|
|
490
|
-
label != null && /* @__PURE__ */ (0,
|
|
491
|
-
/* @__PURE__ */ (0,
|
|
492
|
-
/* @__PURE__ */ (0,
|
|
522
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: triggerId, className: "fds-select__label", children: label }),
|
|
523
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "fds-select", children: [
|
|
524
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
493
525
|
"button",
|
|
494
526
|
{
|
|
495
527
|
type: "button",
|
|
@@ -505,20 +537,20 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
505
537
|
onClick: () => !disabled && setOpen((o) => !o),
|
|
506
538
|
onKeyDown,
|
|
507
539
|
children: [
|
|
508
|
-
(selected?.avatar ?? leadingIcon) != null && /* @__PURE__ */ (0,
|
|
509
|
-
/* @__PURE__ */ (0,
|
|
540
|
+
(selected?.avatar ?? leadingIcon) != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__lead", children: selected?.avatar ?? leadingIcon }),
|
|
541
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
510
542
|
"span",
|
|
511
543
|
{
|
|
512
544
|
className: `fds-select__value${selected ? "" : " fds-select__value--placeholder"}`,
|
|
513
545
|
children: selected ? selected.label : placeholder
|
|
514
546
|
}
|
|
515
547
|
),
|
|
516
|
-
/* @__PURE__ */ (0,
|
|
548
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__chevron", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronIcon, {}) })
|
|
517
549
|
]
|
|
518
550
|
}
|
|
519
551
|
),
|
|
520
|
-
open && /* @__PURE__ */ (0,
|
|
521
|
-
searchable && /* @__PURE__ */ (0,
|
|
552
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "fds-select__popover", children: [
|
|
553
|
+
searchable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "fds-select__search", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
522
554
|
"input",
|
|
523
555
|
{
|
|
524
556
|
ref: searchRef,
|
|
@@ -533,7 +565,7 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
533
565
|
"aria-autocomplete": "list"
|
|
534
566
|
}
|
|
535
567
|
) }),
|
|
536
|
-
/* @__PURE__ */ (0,
|
|
568
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
537
569
|
"div",
|
|
538
570
|
{
|
|
539
571
|
ref: listRef,
|
|
@@ -544,8 +576,8 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
544
576
|
"aria-activedescendant": activeIndex >= 0 ? `${listId}-opt-${activeIndex}` : void 0,
|
|
545
577
|
onKeyDown: searchable ? void 0 : onKeyDown,
|
|
546
578
|
children: [
|
|
547
|
-
filtered.length === 0 && /* @__PURE__ */ (0,
|
|
548
|
-
filtered.map((o, i) => /* @__PURE__ */ (0,
|
|
579
|
+
filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "fds-select__empty", children: "No results" }),
|
|
580
|
+
filtered.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
549
581
|
"div",
|
|
550
582
|
{
|
|
551
583
|
id: `${listId}-opt-${i}`,
|
|
@@ -561,12 +593,12 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
561
593
|
onMouseDown: (e) => e.preventDefault(),
|
|
562
594
|
onClick: () => choose(i),
|
|
563
595
|
children: [
|
|
564
|
-
o.avatar != null && /* @__PURE__ */ (0,
|
|
565
|
-
/* @__PURE__ */ (0,
|
|
566
|
-
/* @__PURE__ */ (0,
|
|
567
|
-
o.secondary != null && /* @__PURE__ */ (0,
|
|
596
|
+
o.avatar != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__optAvatar", children: o.avatar }),
|
|
597
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "fds-select__optText", children: [
|
|
598
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__optLabel", children: o.label }),
|
|
599
|
+
o.secondary != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__optSecondary", children: o.secondary })
|
|
568
600
|
] }),
|
|
569
|
-
o.value === value && /* @__PURE__ */ (0,
|
|
601
|
+
o.value === value && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__check", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckIcon, {}) })
|
|
570
602
|
]
|
|
571
603
|
},
|
|
572
604
|
o.value
|
|
@@ -576,8 +608,8 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
576
608
|
)
|
|
577
609
|
] })
|
|
578
610
|
] }),
|
|
579
|
-
hasMessage && /* @__PURE__ */ (0,
|
|
580
|
-
name != null && /* @__PURE__ */ (0,
|
|
611
|
+
hasMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { id: msgId, className: error ? "fds-select__error" : "fds-select__hint", children: error ?? hint }),
|
|
612
|
+
name != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "hidden", name, value: value ?? "" })
|
|
581
613
|
]
|
|
582
614
|
}
|
|
583
615
|
);
|
|
@@ -585,13 +617,13 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
585
617
|
|
|
586
618
|
// src/components/Toggle/Toggle.tsx
|
|
587
619
|
var import_react4 = require("react");
|
|
588
|
-
var
|
|
620
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
589
621
|
var Toggle = (0, import_react4.forwardRef)(function Toggle2({ size = "medium", label, description, className, id, disabled, ...rest }, ref) {
|
|
590
622
|
const generatedId = (0, import_react4.useId)();
|
|
591
623
|
const inputId = id ?? generatedId;
|
|
592
624
|
const classes = ["fds-toggle", `fds-toggle--${size}`, className].filter(Boolean).join(" ");
|
|
593
|
-
return /* @__PURE__ */ (0,
|
|
594
|
-
/* @__PURE__ */ (0,
|
|
625
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: classes, "data-disabled": disabled ? "" : void 0, children: [
|
|
626
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
595
627
|
"input",
|
|
596
628
|
{
|
|
597
629
|
...rest,
|
|
@@ -603,11 +635,11 @@ var Toggle = (0, import_react4.forwardRef)(function Toggle2({ size = "medium", l
|
|
|
603
635
|
className: "fds-toggle__input"
|
|
604
636
|
}
|
|
605
637
|
),
|
|
606
|
-
/* @__PURE__ */ (0,
|
|
607
|
-
/* @__PURE__ */ (0,
|
|
608
|
-
(label != null || description != null) && /* @__PURE__ */ (0,
|
|
609
|
-
label != null && /* @__PURE__ */ (0,
|
|
610
|
-
description != null && /* @__PURE__ */ (0,
|
|
638
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { htmlFor: inputId, className: "fds-toggle__control", children: [
|
|
639
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fds-toggle__track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fds-toggle__thumb" }) }),
|
|
640
|
+
(label != null || description != null) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "fds-toggle__text", children: [
|
|
641
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fds-toggle__label", children: label }),
|
|
642
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fds-toggle__description", children: description })
|
|
611
643
|
] })
|
|
612
644
|
] })
|
|
613
645
|
] });
|
|
@@ -615,7 +647,7 @@ var Toggle = (0, import_react4.forwardRef)(function Toggle2({ size = "medium", l
|
|
|
615
647
|
|
|
616
648
|
// src/components/AppNav/AppNav.tsx
|
|
617
649
|
var import_react5 = require("react");
|
|
618
|
-
var
|
|
650
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
619
651
|
function AppNav({
|
|
620
652
|
logo,
|
|
621
653
|
actions,
|
|
@@ -647,9 +679,9 @@ function AppNav({
|
|
|
647
679
|
};
|
|
648
680
|
}, [open]);
|
|
649
681
|
const classes = ["fds-app-nav", className].filter(Boolean).join(" ");
|
|
650
|
-
return /* @__PURE__ */ (0,
|
|
651
|
-
/* @__PURE__ */ (0,
|
|
652
|
-
/* @__PURE__ */ (0,
|
|
682
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("nav", { ref: navRef, className: classes, ...rest, children: [
|
|
683
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "fds-app-nav__logo", children: logo }),
|
|
684
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
653
685
|
"div",
|
|
654
686
|
{
|
|
655
687
|
id: linksId,
|
|
@@ -661,8 +693,8 @@ function AppNav({
|
|
|
661
693
|
children
|
|
662
694
|
}
|
|
663
695
|
),
|
|
664
|
-
actions != null && /* @__PURE__ */ (0,
|
|
665
|
-
/* @__PURE__ */ (0,
|
|
696
|
+
actions != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "fds-app-nav__actions", children: actions }),
|
|
697
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
666
698
|
"button",
|
|
667
699
|
{
|
|
668
700
|
ref: toggleRef,
|
|
@@ -672,22 +704,22 @@ function AppNav({
|
|
|
672
704
|
"aria-expanded": open,
|
|
673
705
|
"aria-controls": linksId,
|
|
674
706
|
onClick: () => setOpen((v) => !v),
|
|
675
|
-
children: /* @__PURE__ */ (0,
|
|
707
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: open ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M3 6h14M3 10h14M3 14h14", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) })
|
|
676
708
|
}
|
|
677
709
|
)
|
|
678
710
|
] });
|
|
679
711
|
}
|
|
680
712
|
|
|
681
713
|
// src/components/TabNav/TabNav.tsx
|
|
682
|
-
var
|
|
714
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
683
715
|
function TabNav({ children, className, ...rest }) {
|
|
684
716
|
const classes = ["fds-tab-nav", className].filter(Boolean).join(" ");
|
|
685
|
-
return /* @__PURE__ */ (0,
|
|
717
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("nav", { className: classes, ...rest, children });
|
|
686
718
|
}
|
|
687
719
|
|
|
688
720
|
// src/components/SettingsSection/SettingsSection.tsx
|
|
689
721
|
var import_react6 = require("react");
|
|
690
|
-
var
|
|
722
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
691
723
|
function SettingsSection({
|
|
692
724
|
title,
|
|
693
725
|
description,
|
|
@@ -697,19 +729,19 @@ function SettingsSection({
|
|
|
697
729
|
}) {
|
|
698
730
|
const titleId = (0, import_react6.useId)();
|
|
699
731
|
const classes = ["fds-settings-section", className].filter(Boolean).join(" ");
|
|
700
|
-
return /* @__PURE__ */ (0,
|
|
701
|
-
/* @__PURE__ */ (0,
|
|
702
|
-
/* @__PURE__ */ (0,
|
|
703
|
-
description != null && /* @__PURE__ */ (0,
|
|
732
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { className: classes, "aria-labelledby": titleId, ...rest, children: [
|
|
733
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "fds-settings-section__head", children: [
|
|
734
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { id: titleId, className: "fds-settings-section__title", children: title }),
|
|
735
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "fds-settings-section__description", children: description })
|
|
704
736
|
] }),
|
|
705
|
-
/* @__PURE__ */ (0,
|
|
737
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fds-settings-section__body", children })
|
|
706
738
|
] });
|
|
707
739
|
}
|
|
708
740
|
|
|
709
741
|
// src/components/Modal/Modal.tsx
|
|
710
742
|
var import_react7 = require("react");
|
|
711
743
|
var import_react_dom = require("react-dom");
|
|
712
|
-
var
|
|
744
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
713
745
|
var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
714
746
|
function Modal({
|
|
715
747
|
open,
|
|
@@ -771,14 +803,14 @@ function Modal({
|
|
|
771
803
|
if (!open || typeof document === "undefined") return null;
|
|
772
804
|
const classes = ["fds-modal", `fds-modal--${size}`, tone === "danger" && "fds-modal--danger", className].filter(Boolean).join(" ");
|
|
773
805
|
return (0, import_react_dom.createPortal)(
|
|
774
|
-
/* @__PURE__ */ (0,
|
|
806
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
775
807
|
"div",
|
|
776
808
|
{
|
|
777
809
|
className: "fds-modal__scrim",
|
|
778
810
|
onMouseDown: (e) => {
|
|
779
811
|
if (e.target === e.currentTarget && dismissible) onClose();
|
|
780
812
|
},
|
|
781
|
-
children: /* @__PURE__ */ (0,
|
|
813
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
782
814
|
"div",
|
|
783
815
|
{
|
|
784
816
|
ref: dialogRef,
|
|
@@ -789,7 +821,7 @@ function Modal({
|
|
|
789
821
|
"aria-describedby": description != null ? descriptionId : void 0,
|
|
790
822
|
tabIndex: -1,
|
|
791
823
|
children: [
|
|
792
|
-
/* @__PURE__ */ (0,
|
|
824
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
793
825
|
"button",
|
|
794
826
|
{
|
|
795
827
|
type: "button",
|
|
@@ -797,18 +829,18 @@ function Modal({
|
|
|
797
829
|
onClick: onClose,
|
|
798
830
|
disabled: !dismissible,
|
|
799
831
|
"aria-label": "Close",
|
|
800
|
-
children: /* @__PURE__ */ (0,
|
|
832
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
|
|
801
833
|
}
|
|
802
834
|
),
|
|
803
|
-
tone === "danger" && /* @__PURE__ */ (0,
|
|
804
|
-
/* @__PURE__ */ (0,
|
|
805
|
-
/* @__PURE__ */ (0,
|
|
806
|
-
/* @__PURE__ */ (0,
|
|
835
|
+
tone === "danger" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fds-modal__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
|
|
836
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M10 3.5L17.5 16.5H2.5L10 3.5z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
|
|
837
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M10 8.5v3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
|
|
838
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "10", cy: "14.25", r: "0.9", fill: "currentColor" })
|
|
807
839
|
] }) }),
|
|
808
|
-
/* @__PURE__ */ (0,
|
|
809
|
-
description != null && /* @__PURE__ */ (0,
|
|
810
|
-
children != null && /* @__PURE__ */ (0,
|
|
811
|
-
actions != null && /* @__PURE__ */ (0,
|
|
840
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { id: titleId, className: "fds-modal__title", children: title }),
|
|
841
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { id: descriptionId, className: "fds-modal__description", children: description }),
|
|
842
|
+
children != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fds-modal__content", children }),
|
|
843
|
+
actions != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fds-modal__actions", children: actions })
|
|
812
844
|
]
|
|
813
845
|
}
|
|
814
846
|
)
|
|
@@ -820,7 +852,7 @@ function Modal({
|
|
|
820
852
|
|
|
821
853
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
822
854
|
var import_react8 = require("react");
|
|
823
|
-
var
|
|
855
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
824
856
|
function SegmentedControl({
|
|
825
857
|
options,
|
|
826
858
|
value,
|
|
@@ -843,9 +875,9 @@ function SegmentedControl({
|
|
|
843
875
|
refs.current[next]?.focus();
|
|
844
876
|
};
|
|
845
877
|
const classes = ["fds-segmented", className].filter(Boolean).join(" ");
|
|
846
|
-
return /* @__PURE__ */ (0,
|
|
878
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { role: "tablist", "aria-label": ariaLabel, className: classes, children: options.map((option, i) => {
|
|
847
879
|
const selected = option.value === value;
|
|
848
|
-
return /* @__PURE__ */ (0,
|
|
880
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
849
881
|
"button",
|
|
850
882
|
{
|
|
851
883
|
ref: (el) => {
|
|
@@ -862,7 +894,7 @@ function SegmentedControl({
|
|
|
862
894
|
onKeyDown: (e) => onKeyDown(e, i),
|
|
863
895
|
children: [
|
|
864
896
|
option.label,
|
|
865
|
-
option.count != null && /* @__PURE__ */ (0,
|
|
897
|
+
option.count != null && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "fds-segmented__count", children: option.count })
|
|
866
898
|
]
|
|
867
899
|
},
|
|
868
900
|
option.value
|
|
@@ -882,7 +914,7 @@ var breakpoints = {
|
|
|
882
914
|
|
|
883
915
|
// src/components/Avatar/Avatar.tsx
|
|
884
916
|
var import_react9 = require("react");
|
|
885
|
-
var
|
|
917
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
886
918
|
function initialsFor(name) {
|
|
887
919
|
const words = name.trim().split(/[\s._@-]+/).filter(Boolean);
|
|
888
920
|
if (words.length === 0) return "?";
|
|
@@ -893,11 +925,11 @@ function Avatar({ name, src, size = "medium", className, ...rest }) {
|
|
|
893
925
|
const [failedSrc, setFailedSrc] = (0, import_react9.useState)(null);
|
|
894
926
|
const showImage = !!src && src !== failedSrc;
|
|
895
927
|
const classes = ["fds-avatar", `fds-avatar--${size}`, className].filter(Boolean).join(" ");
|
|
896
|
-
return /* @__PURE__ */ (0,
|
|
928
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: classes, role: "img", "aria-label": name, ...rest, children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { className: "fds-avatar__img", src, alt: "", onError: () => setFailedSrc(src) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { "aria-hidden": "true", children: initialsFor(name) }) });
|
|
897
929
|
}
|
|
898
930
|
|
|
899
931
|
// src/components/SectionHeader/SectionHeader.tsx
|
|
900
|
-
var
|
|
932
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
901
933
|
function SectionHeader({
|
|
902
934
|
title,
|
|
903
935
|
description,
|
|
@@ -907,14 +939,14 @@ function SectionHeader({
|
|
|
907
939
|
...rest
|
|
908
940
|
}) {
|
|
909
941
|
const classes = ["fds-section-header", className].filter(Boolean).join(" ");
|
|
910
|
-
return /* @__PURE__ */ (0,
|
|
911
|
-
/* @__PURE__ */ (0,
|
|
912
|
-
description != null && /* @__PURE__ */ (0,
|
|
942
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: classes, ...rest, children: [
|
|
943
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Heading, { id: titleId, className: "fds-section-header__title", children: title }),
|
|
944
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "fds-section-header__description", children: description })
|
|
913
945
|
] });
|
|
914
946
|
}
|
|
915
947
|
|
|
916
948
|
// src/components/Split/Split.tsx
|
|
917
|
-
var
|
|
949
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
918
950
|
function Split({
|
|
919
951
|
aside,
|
|
920
952
|
children,
|
|
@@ -931,47 +963,48 @@ function Split({
|
|
|
931
963
|
sticky && "fds-split--sticky",
|
|
932
964
|
className
|
|
933
965
|
].filter(Boolean).join(" ");
|
|
934
|
-
return /* @__PURE__ */ (0,
|
|
966
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
935
967
|
"div",
|
|
936
968
|
{
|
|
937
969
|
className: classes,
|
|
938
970
|
style: { "--fds-split-aside": asideWidth, ...style },
|
|
939
971
|
...rest,
|
|
940
972
|
children: [
|
|
941
|
-
/* @__PURE__ */ (0,
|
|
942
|
-
/* @__PURE__ */ (0,
|
|
973
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fds-split__aside", children: aside }),
|
|
974
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fds-split__main", children })
|
|
943
975
|
]
|
|
944
976
|
}
|
|
945
977
|
);
|
|
946
978
|
}
|
|
947
979
|
|
|
948
980
|
// src/components/Badge/Badge.tsx
|
|
949
|
-
var
|
|
981
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
950
982
|
function Badge({ tone = "neutral", icon, className, children, ...rest }) {
|
|
951
983
|
const classes = ["fds-badge", `fds-badge--${tone}`, className].filter(Boolean).join(" ");
|
|
952
|
-
return /* @__PURE__ */ (0,
|
|
953
|
-
icon != null && /* @__PURE__ */ (0,
|
|
984
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: classes, ...rest, children: [
|
|
985
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fds-badge__icon", "aria-hidden": "true", children: icon }),
|
|
954
986
|
children
|
|
955
987
|
] });
|
|
956
988
|
}
|
|
957
989
|
|
|
958
990
|
// src/components/Tag/Tag.tsx
|
|
959
|
-
var
|
|
960
|
-
function Tag({ dot, className, children, ...rest }) {
|
|
961
|
-
return /* @__PURE__ */ (0,
|
|
962
|
-
dot && /* @__PURE__ */ (0,
|
|
991
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
992
|
+
function Tag({ dot, icon, className, children, ...rest }) {
|
|
993
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: ["fds-tag", className].filter(Boolean).join(" "), ...rest, children: [
|
|
994
|
+
dot && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `fds-dot fds-dot--${dot}`, "aria-hidden": "true" }),
|
|
995
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fds-tag__icon", "aria-hidden": "true", children: icon }),
|
|
963
996
|
children
|
|
964
997
|
] });
|
|
965
998
|
}
|
|
966
999
|
|
|
967
1000
|
// src/components/MultiSelect/MultiSelect.tsx
|
|
968
1001
|
var import_react10 = require("react");
|
|
969
|
-
var
|
|
1002
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
970
1003
|
function ChevronIcon2() {
|
|
971
|
-
return /* @__PURE__ */ (0,
|
|
1004
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", "aria-hidden": "true", className: "fds-multiselect__chevronIcon", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
972
1005
|
}
|
|
973
1006
|
function CheckIcon2() {
|
|
974
|
-
return /* @__PURE__ */ (0,
|
|
1007
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { viewBox: "0 0 12 12", width: "12", height: "12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M10 3L4.5 8.5 2 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
975
1008
|
}
|
|
976
1009
|
function MultiSelect({
|
|
977
1010
|
label,
|
|
@@ -1045,8 +1078,8 @@ function MultiSelect({
|
|
|
1045
1078
|
}
|
|
1046
1079
|
};
|
|
1047
1080
|
const triggerClasses = ["fds-multiselect__trigger", open ? "fds-multiselect__trigger--open" : ""].filter(Boolean).join(" ");
|
|
1048
|
-
return /* @__PURE__ */ (0,
|
|
1049
|
-
/* @__PURE__ */ (0,
|
|
1081
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref: rootRef, className: ["fds-multiselect", className].filter(Boolean).join(" "), children: [
|
|
1082
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1050
1083
|
"button",
|
|
1051
1084
|
{
|
|
1052
1085
|
type: "button",
|
|
@@ -1060,18 +1093,18 @@ function MultiSelect({
|
|
|
1060
1093
|
onClick: () => setOpen((o) => !o),
|
|
1061
1094
|
onKeyDown: onTriggerKeyDown,
|
|
1062
1095
|
children: [
|
|
1063
|
-
/* @__PURE__ */ (0,
|
|
1064
|
-
value.length > 0 && /* @__PURE__ */ (0,
|
|
1096
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "fds-multiselect__label", children: label }),
|
|
1097
|
+
value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "fds-multiselect__count", "aria-label": `${value.length} of ${options.length} selected`, children: [
|
|
1065
1098
|
value.length,
|
|
1066
1099
|
"/",
|
|
1067
1100
|
options.length
|
|
1068
1101
|
] }),
|
|
1069
|
-
/* @__PURE__ */ (0,
|
|
1102
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: `fds-multiselect__chevron${open ? " fds-multiselect__chevron--open" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronIcon2, {}) })
|
|
1070
1103
|
]
|
|
1071
1104
|
}
|
|
1072
1105
|
),
|
|
1073
|
-
open && /* @__PURE__ */ (0,
|
|
1074
|
-
/* @__PURE__ */ (0,
|
|
1106
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fds-multiselect__popover", children: [
|
|
1107
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1075
1108
|
"div",
|
|
1076
1109
|
{
|
|
1077
1110
|
ref: listRef,
|
|
@@ -1085,7 +1118,7 @@ function MultiSelect({
|
|
|
1085
1118
|
onKeyDown: onListKeyDown,
|
|
1086
1119
|
children: options.map((o, i) => {
|
|
1087
1120
|
const checked = selected.has(o.value);
|
|
1088
|
-
return /* @__PURE__ */ (0,
|
|
1121
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1089
1122
|
"div",
|
|
1090
1123
|
{
|
|
1091
1124
|
id: `${listId}-opt-${i}`,
|
|
@@ -1101,10 +1134,10 @@ function MultiSelect({
|
|
|
1101
1134
|
onMouseDown: (e) => e.preventDefault(),
|
|
1102
1135
|
onClick: () => toggle(o),
|
|
1103
1136
|
children: [
|
|
1104
|
-
/* @__PURE__ */ (0,
|
|
1105
|
-
o.dot && /* @__PURE__ */ (0,
|
|
1106
|
-
/* @__PURE__ */ (0,
|
|
1107
|
-
o.count != null && /* @__PURE__ */ (0,
|
|
1137
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: `fds-multiselect__box${checked ? " fds-multiselect__box--checked" : ""}`, "aria-hidden": "true", children: checked && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CheckIcon2, {}) }),
|
|
1138
|
+
o.dot && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: `fds-dot fds-dot--${o.dot}`, "aria-hidden": "true" }),
|
|
1139
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "fds-multiselect__optLabel", children: o.label }),
|
|
1140
|
+
o.count != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "fds-multiselect__optCount", children: o.count })
|
|
1108
1141
|
]
|
|
1109
1142
|
},
|
|
1110
1143
|
o.value
|
|
@@ -1112,9 +1145,9 @@ function MultiSelect({
|
|
|
1112
1145
|
})
|
|
1113
1146
|
}
|
|
1114
1147
|
),
|
|
1115
|
-
/* @__PURE__ */ (0,
|
|
1116
|
-
/* @__PURE__ */ (0,
|
|
1117
|
-
/* @__PURE__ */ (0,
|
|
1148
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fds-multiselect__footer", children: [
|
|
1149
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "fds-multiselect__action", onClick: () => onChange(enabled.map((o) => o.value)), children: selectAllLabel }),
|
|
1150
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "fds-multiselect__action", onClick: () => onChange([]), children: clearLabel })
|
|
1118
1151
|
] })
|
|
1119
1152
|
] })
|
|
1120
1153
|
] });
|
|
@@ -1122,21 +1155,21 @@ function MultiSelect({
|
|
|
1122
1155
|
|
|
1123
1156
|
// src/components/SearchInput/SearchInput.tsx
|
|
1124
1157
|
var import_react11 = require("react");
|
|
1125
|
-
var
|
|
1158
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1126
1159
|
var SearchInput = (0, import_react11.forwardRef)(function SearchInput2({ shortcut, containerClassName, className, value, ...rest }, ref) {
|
|
1127
1160
|
const empty = value === void 0 || value === "";
|
|
1128
|
-
return /* @__PURE__ */ (0,
|
|
1129
|
-
/* @__PURE__ */ (0,
|
|
1130
|
-
/* @__PURE__ */ (0,
|
|
1131
|
-
/* @__PURE__ */ (0,
|
|
1161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: ["fds-search", containerClassName].filter(Boolean).join(" "), children: [
|
|
1162
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { className: "fds-search__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: [
|
|
1163
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
|
|
1164
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "m21 21-4.3-4.3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
|
|
1132
1165
|
] }),
|
|
1133
|
-
/* @__PURE__ */ (0,
|
|
1134
|
-
shortcut && empty && /* @__PURE__ */ (0,
|
|
1166
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("input", { ref, type: "search", value, className: ["fds-search__input", className].filter(Boolean).join(" "), ...rest }),
|
|
1167
|
+
shortcut && empty && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("kbd", { className: "fds-search__kbd", "aria-hidden": "true", children: shortcut })
|
|
1135
1168
|
] });
|
|
1136
1169
|
});
|
|
1137
1170
|
|
|
1138
1171
|
// src/components/Pagination/Pagination.tsx
|
|
1139
|
-
var
|
|
1172
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1140
1173
|
function pageItems(page, pageCount) {
|
|
1141
1174
|
if (pageCount <= 7) return Array.from({ length: pageCount }, (_, i) => i + 1);
|
|
1142
1175
|
const start = Math.max(2, Math.min(page - 1, pageCount - 4));
|
|
@@ -1149,7 +1182,7 @@ function pageItems(page, pageCount) {
|
|
|
1149
1182
|
return items;
|
|
1150
1183
|
}
|
|
1151
1184
|
function Arrow2({ dir }) {
|
|
1152
|
-
return /* @__PURE__ */ (0,
|
|
1185
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: dir === "prev" ? "M12 15l-5-5 5-5" : "M8 5l5 5-5 5", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
1153
1186
|
}
|
|
1154
1187
|
function Pagination({ page, pageCount, onPageChange, total, pageSize, variant = "full", className }) {
|
|
1155
1188
|
if (pageCount <= 1) return null;
|
|
@@ -1159,8 +1192,8 @@ function Pagination({ page, pageCount, onPageChange, total, pageSize, variant =
|
|
|
1159
1192
|
const showRange = variant === "full" && total != null && pageSize != null;
|
|
1160
1193
|
const from = (page - 1) * (pageSize ?? 0) + 1;
|
|
1161
1194
|
const to = Math.min(page * (pageSize ?? 0), total ?? 0);
|
|
1162
|
-
return /* @__PURE__ */ (0,
|
|
1163
|
-
showRange && /* @__PURE__ */ (0,
|
|
1195
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("nav", { className: ["fds-pagination", `fds-pagination--${variant}`, className].filter(Boolean).join(" "), "aria-label": "Pagination", children: [
|
|
1196
|
+
showRange && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { className: "fds-pagination__range", children: [
|
|
1164
1197
|
"Showing ",
|
|
1165
1198
|
from,
|
|
1166
1199
|
"\u2013",
|
|
@@ -1168,15 +1201,15 @@ function Pagination({ page, pageCount, onPageChange, total, pageSize, variant =
|
|
|
1168
1201
|
" of ",
|
|
1169
1202
|
total
|
|
1170
1203
|
] }),
|
|
1171
|
-
/* @__PURE__ */ (0,
|
|
1172
|
-
/* @__PURE__ */ (0,
|
|
1173
|
-
variant === "compact" ? /* @__PURE__ */ (0,
|
|
1204
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "fds-pagination__controls", children: [
|
|
1205
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: "fds-pagination__arrow", onClick: () => go(page - 1), disabled: page <= 1, "aria-label": "Previous page", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Arrow2, { dir: "prev" }) }),
|
|
1206
|
+
variant === "compact" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "fds-pagination__status", "aria-live": "polite", children: [
|
|
1174
1207
|
"Page ",
|
|
1175
1208
|
page,
|
|
1176
1209
|
" of ",
|
|
1177
1210
|
pageCount
|
|
1178
1211
|
] }) : pageItems(page, pageCount).map(
|
|
1179
|
-
(p, i) => p === null ? /* @__PURE__ */ (0,
|
|
1212
|
+
(p, i) => p === null ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fds-pagination__gap", "aria-hidden": "true", children: "\u2026" }, `gap-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1180
1213
|
"button",
|
|
1181
1214
|
{
|
|
1182
1215
|
type: "button",
|
|
@@ -1189,54 +1222,80 @@ function Pagination({ page, pageCount, onPageChange, total, pageSize, variant =
|
|
|
1189
1222
|
p
|
|
1190
1223
|
)
|
|
1191
1224
|
),
|
|
1192
|
-
/* @__PURE__ */ (0,
|
|
1225
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: "fds-pagination__arrow", onClick: () => go(page + 1), disabled: page >= pageCount, "aria-label": "Next page", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Arrow2, { dir: "next" }) })
|
|
1193
1226
|
] })
|
|
1194
1227
|
] });
|
|
1195
1228
|
}
|
|
1196
1229
|
|
|
1197
1230
|
// src/components/EmptyState/EmptyState.tsx
|
|
1198
|
-
var
|
|
1231
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1199
1232
|
function EmptyState({ illustration, title, description, action, footer, className, ...rest }) {
|
|
1200
|
-
return /* @__PURE__ */ (0,
|
|
1201
|
-
illustration != null && /* @__PURE__ */ (0,
|
|
1202
|
-
/* @__PURE__ */ (0,
|
|
1203
|
-
/* @__PURE__ */ (0,
|
|
1204
|
-
description != null && /* @__PURE__ */ (0,
|
|
1233
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: ["fds-empty", className].filter(Boolean).join(" "), ...rest, children: [
|
|
1234
|
+
illustration != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fds-empty__illustration", children: illustration }),
|
|
1235
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fds-empty__text", children: [
|
|
1236
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { className: "fds-empty__title", children: title }),
|
|
1237
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "fds-empty__description", children: description })
|
|
1205
1238
|
] }),
|
|
1206
|
-
(action != null || footer != null) && /* @__PURE__ */ (0,
|
|
1239
|
+
(action != null || footer != null) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fds-empty__actions", children: [
|
|
1207
1240
|
action,
|
|
1208
|
-
footer != null && /* @__PURE__ */ (0,
|
|
1241
|
+
footer != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fds-empty__footer", children: footer })
|
|
1209
1242
|
] })
|
|
1210
1243
|
] });
|
|
1211
1244
|
}
|
|
1212
1245
|
function StackedCardsIllustration({ className }) {
|
|
1213
|
-
return /* @__PURE__ */ (0,
|
|
1214
|
-
/* @__PURE__ */ (0,
|
|
1215
|
-
/* @__PURE__ */ (0,
|
|
1216
|
-
/* @__PURE__ */ (0,
|
|
1217
|
-
/* @__PURE__ */ (0,
|
|
1218
|
-
/* @__PURE__ */ (0,
|
|
1219
|
-
/* @__PURE__ */ (0,
|
|
1246
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: ["fds-stacked-cards", className].filter(Boolean).join(" "), "aria-hidden": "true", children: [
|
|
1247
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fds-stacked-cards__card fds-stacked-cards__card--back" }),
|
|
1248
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fds-stacked-cards__card fds-stacked-cards__card--front", children: [
|
|
1249
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fds-stacked-cards__lines", children: [
|
|
1250
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", {}),
|
|
1251
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", {}),
|
|
1252
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", {})
|
|
1220
1253
|
] }),
|
|
1221
|
-
/* @__PURE__ */ (0,
|
|
1222
|
-
/* @__PURE__ */ (0,
|
|
1223
|
-
/* @__PURE__ */ (0,
|
|
1254
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", className: "fds-stacked-cards__status", children: [
|
|
1255
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("rect", { x: "0.75", y: "0.75", width: "16.5", height: "16.5", rx: "8.25", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
1256
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("circle", { cx: "9", cy: "9", r: "3", className: "fds-stacked-cards__statusDot" })
|
|
1224
1257
|
] })
|
|
1225
1258
|
] }),
|
|
1226
|
-
/* @__PURE__ */ (0,
|
|
1227
|
-
/* @__PURE__ */ (0,
|
|
1228
|
-
/* @__PURE__ */ (0,
|
|
1259
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fds-stacked-cards__badge", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", children: [
|
|
1260
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
|
|
1261
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "m21 21-4.3-4.3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
|
|
1229
1262
|
] }) })
|
|
1230
1263
|
] });
|
|
1231
1264
|
}
|
|
1232
1265
|
|
|
1266
|
+
// src/components/Callout/Callout.tsx
|
|
1267
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1268
|
+
function Callout({
|
|
1269
|
+
tone = "neutral",
|
|
1270
|
+
icon,
|
|
1271
|
+
title,
|
|
1272
|
+
titleAside,
|
|
1273
|
+
children,
|
|
1274
|
+
action,
|
|
1275
|
+
className,
|
|
1276
|
+
...rest
|
|
1277
|
+
}) {
|
|
1278
|
+
const classes = ["fds-callout", `fds-callout--${tone}`, className].filter(Boolean).join(" ");
|
|
1279
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: classes, ...rest, children: [
|
|
1280
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fds-callout__icon", "aria-hidden": "true", children: icon }),
|
|
1281
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "fds-callout__body", children: [
|
|
1282
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "fds-callout__title", children: [
|
|
1283
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: title }),
|
|
1284
|
+
titleAside != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fds-callout__aside", children: titleAside })
|
|
1285
|
+
] }),
|
|
1286
|
+
children != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fds-callout__text", children })
|
|
1287
|
+
] }),
|
|
1288
|
+
action != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fds-callout__action", children: action })
|
|
1289
|
+
] });
|
|
1290
|
+
}
|
|
1291
|
+
|
|
1233
1292
|
// src/components/Skeleton/Skeleton.tsx
|
|
1234
|
-
var
|
|
1293
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1235
1294
|
var px = (v) => typeof v === "number" ? `${v}px` : v;
|
|
1236
1295
|
function Skeleton({ shape = "rect", width, height, lines = 1, className, style, ...rest }) {
|
|
1237
1296
|
const classes = ["fds-skeleton", `fds-skeleton--${shape}`, className].filter(Boolean).join(" ");
|
|
1238
1297
|
if (shape === "text" && lines > 1) {
|
|
1239
|
-
return /* @__PURE__ */ (0,
|
|
1298
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fds-skeleton-lines", style: { width: px(width) }, "aria-hidden": "true", children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1240
1299
|
"span",
|
|
1241
1300
|
{
|
|
1242
1301
|
className: classes,
|
|
@@ -1247,17 +1306,195 @@ function Skeleton({ shape = "rect", width, height, lines = 1, className, style,
|
|
|
1247
1306
|
)) });
|
|
1248
1307
|
}
|
|
1249
1308
|
const size = shape === "circle" ? { width: px(width ?? height ?? 16), height: px(height ?? width ?? 16) } : { width: px(width), height: px(height) };
|
|
1250
|
-
return /* @__PURE__ */ (0,
|
|
1309
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: classes, style: { ...size, ...style }, "aria-hidden": "true", ...rest });
|
|
1251
1310
|
}
|
|
1252
1311
|
function SkeletonGroup({ label = "Loading", className, children, ...rest }) {
|
|
1253
|
-
return /* @__PURE__ */ (0,
|
|
1312
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { role: "status", "aria-busy": "true", "aria-label": label, className, ...rest, children });
|
|
1313
|
+
}
|
|
1314
|
+
|
|
1315
|
+
// src/components/Card/Card.tsx
|
|
1316
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1317
|
+
function Card({ tone = "default", padding = "md", className, children, ...rest }) {
|
|
1318
|
+
const classes = ["fds-card", `fds-card--${tone}`, `fds-card--pad-${padding}`, className].filter(Boolean).join(" ");
|
|
1319
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: classes, ...rest, children });
|
|
1320
|
+
}
|
|
1321
|
+
|
|
1322
|
+
// src/components/Stat/Stat.tsx
|
|
1323
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1324
|
+
function Stat({ label, value, children, className, ...rest }) {
|
|
1325
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: ["fds-stat", className].filter(Boolean).join(" "), ...rest, children: [
|
|
1326
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "fds-stat__label", children: label }),
|
|
1327
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "fds-stat__value", children: value }),
|
|
1328
|
+
children != null && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fds-stat__detail", children })
|
|
1329
|
+
] });
|
|
1330
|
+
}
|
|
1331
|
+
|
|
1332
|
+
// src/components/Checkbox/Checkbox.tsx
|
|
1333
|
+
var import_react12 = require("react");
|
|
1334
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1335
|
+
var Checkbox = (0, import_react12.forwardRef)(function Checkbox2({ label, description, indeterminate = false, className, id, disabled, ...rest }, ref) {
|
|
1336
|
+
const generatedId = (0, import_react12.useId)();
|
|
1337
|
+
const inputId = id ?? generatedId;
|
|
1338
|
+
const inputRef = (0, import_react12.useRef)(null);
|
|
1339
|
+
(0, import_react12.useImperativeHandle)(ref, () => inputRef.current);
|
|
1340
|
+
(0, import_react12.useEffect)(() => {
|
|
1341
|
+
if (inputRef.current) inputRef.current.indeterminate = indeterminate;
|
|
1342
|
+
}, [indeterminate]);
|
|
1343
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
1344
|
+
"div",
|
|
1345
|
+
{
|
|
1346
|
+
className: ["fds-checkbox", className].filter(Boolean).join(" "),
|
|
1347
|
+
"data-disabled": disabled ? "" : void 0,
|
|
1348
|
+
children: [
|
|
1349
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1350
|
+
"input",
|
|
1351
|
+
{
|
|
1352
|
+
...rest,
|
|
1353
|
+
id: inputId,
|
|
1354
|
+
ref: inputRef,
|
|
1355
|
+
type: "checkbox",
|
|
1356
|
+
disabled,
|
|
1357
|
+
className: "fds-checkbox__input"
|
|
1358
|
+
}
|
|
1359
|
+
),
|
|
1360
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { htmlFor: inputId, className: "fds-checkbox__control", children: [
|
|
1361
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "fds-checkbox__box", "aria-hidden": "true", children: [
|
|
1362
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { className: "fds-checkbox__tick", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M10 3L4.5 8.5 2 6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
1363
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { className: "fds-checkbox__dash", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M3 6h6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) })
|
|
1364
|
+
] }),
|
|
1365
|
+
(label != null || description != null) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "fds-checkbox__text", children: [
|
|
1366
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fds-checkbox__label", children: label }),
|
|
1367
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fds-checkbox__description", children: description })
|
|
1368
|
+
] })
|
|
1369
|
+
] })
|
|
1370
|
+
]
|
|
1371
|
+
}
|
|
1372
|
+
);
|
|
1373
|
+
});
|
|
1374
|
+
|
|
1375
|
+
// src/components/Radio/Radio.tsx
|
|
1376
|
+
var import_react13 = require("react");
|
|
1377
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1378
|
+
var Radio = (0, import_react13.forwardRef)(function Radio2({ label, description, className, id, disabled, ...rest }, ref) {
|
|
1379
|
+
const generatedId = (0, import_react13.useId)();
|
|
1380
|
+
const inputId = id ?? generatedId;
|
|
1381
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: ["fds-radio", className].filter(Boolean).join(" "), "data-disabled": disabled ? "" : void 0, children: [
|
|
1382
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("input", { ...rest, id: inputId, ref, type: "radio", disabled, className: "fds-radio__input" }),
|
|
1383
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { htmlFor: inputId, className: "fds-radio__control", children: [
|
|
1384
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fds-radio__circle", "aria-hidden": "true" }),
|
|
1385
|
+
(label != null || description != null) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "fds-radio__text", children: [
|
|
1386
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fds-radio__label", children: label }),
|
|
1387
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fds-radio__description", children: description })
|
|
1388
|
+
] })
|
|
1389
|
+
] })
|
|
1390
|
+
] });
|
|
1391
|
+
});
|
|
1392
|
+
|
|
1393
|
+
// src/components/Accordion/Accordion.tsx
|
|
1394
|
+
var import_react14 = require("react");
|
|
1395
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1396
|
+
function Accordion({
|
|
1397
|
+
summary,
|
|
1398
|
+
actions,
|
|
1399
|
+
open: openProp,
|
|
1400
|
+
defaultOpen = false,
|
|
1401
|
+
onOpenChange,
|
|
1402
|
+
children,
|
|
1403
|
+
className,
|
|
1404
|
+
...rest
|
|
1405
|
+
}) {
|
|
1406
|
+
const [openState, setOpenState] = (0, import_react14.useState)(defaultOpen);
|
|
1407
|
+
const open = openProp ?? openState;
|
|
1408
|
+
const bodyId = (0, import_react14.useId)();
|
|
1409
|
+
const toggle = () => {
|
|
1410
|
+
const next = !open;
|
|
1411
|
+
if (openProp === void 0) setOpenState(next);
|
|
1412
|
+
onOpenChange?.(next);
|
|
1413
|
+
};
|
|
1414
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1415
|
+
"div",
|
|
1416
|
+
{
|
|
1417
|
+
className: ["fds-accordion", className].filter(Boolean).join(" "),
|
|
1418
|
+
"data-open": open ? "" : void 0,
|
|
1419
|
+
...rest,
|
|
1420
|
+
children: [
|
|
1421
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "fds-accordion__header", children: [
|
|
1422
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1423
|
+
"button",
|
|
1424
|
+
{
|
|
1425
|
+
type: "button",
|
|
1426
|
+
className: "fds-accordion__trigger",
|
|
1427
|
+
"aria-expanded": open,
|
|
1428
|
+
"aria-controls": bodyId,
|
|
1429
|
+
onClick: toggle,
|
|
1430
|
+
children: summary
|
|
1431
|
+
}
|
|
1432
|
+
),
|
|
1433
|
+
actions != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "fds-accordion__actions", children: actions }),
|
|
1434
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fds-accordion__chevron", "aria-hidden": "true", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
|
|
1435
|
+
] }),
|
|
1436
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { id: bodyId, className: "fds-accordion__body", hidden: !open, children })
|
|
1437
|
+
]
|
|
1438
|
+
}
|
|
1439
|
+
);
|
|
1440
|
+
}
|
|
1441
|
+
|
|
1442
|
+
// src/components/StepList/StepList.tsx
|
|
1443
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1444
|
+
var STATUS_TEXT = {
|
|
1445
|
+
done: "Done",
|
|
1446
|
+
active: "In progress",
|
|
1447
|
+
pending: "Not started",
|
|
1448
|
+
failed: "Failed"
|
|
1449
|
+
};
|
|
1450
|
+
function StepIcon({ status }) {
|
|
1451
|
+
const common = { viewBox: "0 0 24 24", width: 18, height: 18, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
|
|
1452
|
+
if (status === "done") {
|
|
1453
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { ...common, children: [
|
|
1454
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
|
|
1455
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M8 12.5l2.5 2.5 5-5.5" })
|
|
1456
|
+
] });
|
|
1457
|
+
}
|
|
1458
|
+
if (status === "active") {
|
|
1459
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", { ...common, className: "fds-steps__spinner", children: /* @__PURE__ */ (0, import_jsx_runtime28.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" }) });
|
|
1460
|
+
}
|
|
1461
|
+
if (status === "failed") {
|
|
1462
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { ...common, children: [
|
|
1463
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
|
|
1464
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M12 7.5v5.5M12 16.5v.01" })
|
|
1465
|
+
] });
|
|
1466
|
+
}
|
|
1467
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", { ...common, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "12", cy: "12", r: "9" }) });
|
|
1468
|
+
}
|
|
1469
|
+
function StepList({ steps, className, ...rest }) {
|
|
1470
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ol", { className: ["fds-steps", className].filter(Boolean).join(" "), ...rest, children: steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
1471
|
+
"li",
|
|
1472
|
+
{
|
|
1473
|
+
className: `fds-steps__step fds-steps__step--${step.status}`,
|
|
1474
|
+
"aria-current": step.status === "active" ? "step" : void 0,
|
|
1475
|
+
children: [
|
|
1476
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-steps__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StepIcon, { status: step.status }) }),
|
|
1477
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-steps__label", children: step.label }),
|
|
1478
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "fds-steps__sr", children: [
|
|
1479
|
+
", ",
|
|
1480
|
+
STATUS_TEXT[step.status]
|
|
1481
|
+
] })
|
|
1482
|
+
]
|
|
1483
|
+
},
|
|
1484
|
+
step.id
|
|
1485
|
+
)) });
|
|
1254
1486
|
}
|
|
1255
1487
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1256
1488
|
0 && (module.exports = {
|
|
1489
|
+
Accordion,
|
|
1257
1490
|
AppNav,
|
|
1258
1491
|
Avatar,
|
|
1259
1492
|
Badge,
|
|
1260
1493
|
Button,
|
|
1494
|
+
ButtonLink,
|
|
1495
|
+
Callout,
|
|
1496
|
+
Card,
|
|
1497
|
+
Checkbox,
|
|
1261
1498
|
DiffPropertyList,
|
|
1262
1499
|
DiffSection,
|
|
1263
1500
|
EmptyState,
|
|
@@ -1265,6 +1502,7 @@ function SkeletonGroup({ label = "Loading", className, children, ...rest }) {
|
|
|
1265
1502
|
Modal,
|
|
1266
1503
|
MultiSelect,
|
|
1267
1504
|
Pagination,
|
|
1505
|
+
Radio,
|
|
1268
1506
|
SearchInput,
|
|
1269
1507
|
SectionHeader,
|
|
1270
1508
|
SegmentedControl,
|
|
@@ -1274,6 +1512,8 @@ function SkeletonGroup({ label = "Loading", className, children, ...rest }) {
|
|
|
1274
1512
|
SkeletonGroup,
|
|
1275
1513
|
Split,
|
|
1276
1514
|
StackedCardsIllustration,
|
|
1515
|
+
Stat,
|
|
1516
|
+
StepList,
|
|
1277
1517
|
TabNav,
|
|
1278
1518
|
Tag,
|
|
1279
1519
|
Toggle,
|