@usefidel/design-system 0.15.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 +66 -0
- package/dist/icons.d.cts +21 -0
- package/dist/icons.d.ts +21 -0
- package/dist/icons.js +57 -0
- package/dist/index.cjs +501 -121
- package/dist/index.css +628 -0
- package/dist/index.d.cts +184 -2
- package/dist/index.d.ts +184 -2
- package/dist/index.js +490 -121
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -22,17 +22,28 @@ var index_exports = {};
|
|
|
22
22
|
__export(index_exports, {
|
|
23
23
|
AppNav: () => AppNav,
|
|
24
24
|
Avatar: () => Avatar,
|
|
25
|
+
Badge: () => Badge,
|
|
25
26
|
Button: () => Button,
|
|
27
|
+
ButtonLink: () => ButtonLink,
|
|
28
|
+
Callout: () => Callout,
|
|
26
29
|
DiffPropertyList: () => DiffPropertyList,
|
|
27
30
|
DiffSection: () => DiffSection,
|
|
31
|
+
EmptyState: () => EmptyState,
|
|
28
32
|
MismatchCard: () => MismatchCard,
|
|
29
33
|
Modal: () => Modal,
|
|
34
|
+
MultiSelect: () => MultiSelect,
|
|
35
|
+
Pagination: () => Pagination,
|
|
36
|
+
SearchInput: () => SearchInput,
|
|
30
37
|
SectionHeader: () => SectionHeader,
|
|
31
38
|
SegmentedControl: () => SegmentedControl,
|
|
32
39
|
Select: () => Select,
|
|
33
40
|
SettingsSection: () => SettingsSection,
|
|
41
|
+
Skeleton: () => Skeleton,
|
|
42
|
+
SkeletonGroup: () => SkeletonGroup,
|
|
34
43
|
Split: () => Split,
|
|
44
|
+
StackedCardsIllustration: () => StackedCardsIllustration,
|
|
35
45
|
TabNav: () => TabNav,
|
|
46
|
+
Tag: () => Tag,
|
|
36
47
|
Toggle: () => Toggle,
|
|
37
48
|
breakpoints: () => breakpoints
|
|
38
49
|
});
|
|
@@ -63,9 +74,33 @@ function Button({
|
|
|
63
74
|
] });
|
|
64
75
|
}
|
|
65
76
|
|
|
77
|
+
// src/components/Button/ButtonLink.tsx
|
|
78
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
79
|
+
function ButtonLink({
|
|
80
|
+
variant = "primary",
|
|
81
|
+
size = "medium",
|
|
82
|
+
leftIcon,
|
|
83
|
+
rightIcon,
|
|
84
|
+
className,
|
|
85
|
+
children,
|
|
86
|
+
...rest
|
|
87
|
+
}) {
|
|
88
|
+
const classes = [
|
|
89
|
+
"fds-button",
|
|
90
|
+
`fds-button--${variant}`,
|
|
91
|
+
`fds-button--${size}`,
|
|
92
|
+
className
|
|
93
|
+
].filter(Boolean).join(" ");
|
|
94
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("a", { className: classes, ...rest, children: [
|
|
95
|
+
leftIcon != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fds-button__icon", "aria-hidden": "true", children: leftIcon }),
|
|
96
|
+
children != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fds-button__label", children }),
|
|
97
|
+
rightIcon != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fds-button__icon", "aria-hidden": "true", children: rightIcon })
|
|
98
|
+
] });
|
|
99
|
+
}
|
|
100
|
+
|
|
66
101
|
// src/components/MismatchCard/MismatchCard.tsx
|
|
67
102
|
var import_react = require("react");
|
|
68
|
-
var
|
|
103
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
69
104
|
function MismatchCard({
|
|
70
105
|
title,
|
|
71
106
|
properties,
|
|
@@ -79,18 +114,18 @@ function MismatchCard({
|
|
|
79
114
|
const visible = expanded || !canToggle ? properties : properties.slice(0, collapsedCount);
|
|
80
115
|
const hiddenCount = properties.length - collapsedCount;
|
|
81
116
|
const classes = ["fds-mismatch-card", className].filter(Boolean).join(" ");
|
|
82
|
-
return /* @__PURE__ */ (0,
|
|
83
|
-
/* @__PURE__ */ (0,
|
|
84
|
-
/* @__PURE__ */ (0,
|
|
85
|
-
/* @__PURE__ */ (0,
|
|
86
|
-
/* @__PURE__ */ (0,
|
|
87
|
-
/* @__PURE__ */ (0,
|
|
88
|
-
/* @__PURE__ */ (0,
|
|
89
|
-
/* @__PURE__ */ (0,
|
|
117
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: classes, ...rest, children: [
|
|
118
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fds-mismatch-card__content", children: [
|
|
119
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "fds-mismatch-card__title", title, children: title }),
|
|
120
|
+
/* @__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: [
|
|
121
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-mismatch-card__label", children: prop.label }),
|
|
122
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fds-mismatch-card__values", children: [
|
|
123
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-mismatch-card__live", children: prop.live }),
|
|
124
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-mismatch-card__design", children: prop.design })
|
|
90
125
|
] })
|
|
91
126
|
] }, `${prop.label}-${i}`)) })
|
|
92
127
|
] }),
|
|
93
|
-
canToggle && /* @__PURE__ */ (0,
|
|
128
|
+
canToggle && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
94
129
|
"button",
|
|
95
130
|
{
|
|
96
131
|
type: "button",
|
|
@@ -98,8 +133,8 @@ function MismatchCard({
|
|
|
98
133
|
"aria-expanded": expanded,
|
|
99
134
|
onClick: () => setExpanded((v) => !v),
|
|
100
135
|
children: [
|
|
101
|
-
/* @__PURE__ */ (0,
|
|
102
|
-
/* @__PURE__ */ (0,
|
|
136
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chevron, { direction: expanded ? "up" : "down" }),
|
|
137
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-mismatch-card__toggle-label", children: expanded ? "Show less" : showMoreLabel(hiddenCount) })
|
|
103
138
|
]
|
|
104
139
|
}
|
|
105
140
|
)
|
|
@@ -109,7 +144,7 @@ function showMoreLabel(hiddenCount) {
|
|
|
109
144
|
return `Show ${hiddenCount} more ${hiddenCount === 1 ? "mismatch" : "mismatches"}`;
|
|
110
145
|
}
|
|
111
146
|
function Chevron({ direction }) {
|
|
112
|
-
return /* @__PURE__ */ (0,
|
|
147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
113
148
|
"svg",
|
|
114
149
|
{
|
|
115
150
|
className: `fds-mismatch-card__chevron fds-mismatch-card__chevron--${direction}`,
|
|
@@ -118,7 +153,7 @@ function Chevron({ direction }) {
|
|
|
118
153
|
viewBox: "0 0 20 20",
|
|
119
154
|
fill: "none",
|
|
120
155
|
"aria-hidden": "true",
|
|
121
|
-
children: /* @__PURE__ */ (0,
|
|
156
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
122
157
|
"path",
|
|
123
158
|
{
|
|
124
159
|
d: "M6 8.5 10 12l4-3.5",
|
|
@@ -134,7 +169,7 @@ function Chevron({ direction }) {
|
|
|
134
169
|
|
|
135
170
|
// src/components/DiffSection/DiffSection.tsx
|
|
136
171
|
var import_react2 = require("react");
|
|
137
|
-
var
|
|
172
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
138
173
|
function plural(n, one, many) {
|
|
139
174
|
return `${n} ${n === 1 ? one : many}`;
|
|
140
175
|
}
|
|
@@ -158,7 +193,7 @@ function DiffSection({
|
|
|
158
193
|
headerless && "fds-diff-section--flat",
|
|
159
194
|
className
|
|
160
195
|
].filter(Boolean).join(" ");
|
|
161
|
-
return /* @__PURE__ */ (0,
|
|
196
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
162
197
|
"div",
|
|
163
198
|
{
|
|
164
199
|
className: classes,
|
|
@@ -166,7 +201,7 @@ function DiffSection({
|
|
|
166
201
|
"data-flat": headerless ? "true" : void 0,
|
|
167
202
|
...rest,
|
|
168
203
|
children: [
|
|
169
|
-
!headerless && /* @__PURE__ */ (0,
|
|
204
|
+
!headerless && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
170
205
|
"button",
|
|
171
206
|
{
|
|
172
207
|
type: "button",
|
|
@@ -174,18 +209,18 @@ function DiffSection({
|
|
|
174
209
|
"aria-expanded": expanded,
|
|
175
210
|
onClick: () => setExpanded((v) => !v),
|
|
176
211
|
children: [
|
|
177
|
-
/* @__PURE__ */ (0,
|
|
178
|
-
number != null && /* @__PURE__ */ (0,
|
|
179
|
-
name != null && /* @__PURE__ */ (0,
|
|
212
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "fds-diff-section__head-left", children: [
|
|
213
|
+
number != null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__number", children: number }),
|
|
214
|
+
name != null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__name", children: name })
|
|
180
215
|
] }),
|
|
181
|
-
/* @__PURE__ */ (0,
|
|
182
|
-
/* @__PURE__ */ (0,
|
|
183
|
-
/* @__PURE__ */ (0,
|
|
216
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "fds-diff-section__head-right", children: [
|
|
217
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__count", children: plural(count, "mismatch", "mismatches") }),
|
|
218
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HeaderChevron, { expanded })
|
|
184
219
|
] })
|
|
185
220
|
]
|
|
186
221
|
}
|
|
187
222
|
),
|
|
188
|
-
open && /* @__PURE__ */ (0,
|
|
223
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fds-diff-section__body", children: elements.map((el, ei) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
189
224
|
ElementRow,
|
|
190
225
|
{
|
|
191
226
|
element: el,
|
|
@@ -214,15 +249,15 @@ function ElementRow({
|
|
|
214
249
|
if (!isControlled) setInternalOpen(next);
|
|
215
250
|
onToggle?.(index, next);
|
|
216
251
|
};
|
|
217
|
-
const lines = /* @__PURE__ */ (0,
|
|
218
|
-
/* @__PURE__ */ (0,
|
|
219
|
-
/* @__PURE__ */ (0,
|
|
220
|
-
/* @__PURE__ */ (0,
|
|
221
|
-
hasDetail && /* @__PURE__ */ (0,
|
|
252
|
+
const lines = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
253
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fds-diff-section__element-head-inner", children: [
|
|
254
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__element-name", children: element.name }),
|
|
255
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__element-count", children: plural(element.properties.length, "property", "properties") }),
|
|
256
|
+
hasDetail && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chevron2, { open, className: "fds-diff-section__element-caret" })
|
|
222
257
|
] }),
|
|
223
|
-
/* @__PURE__ */ (0,
|
|
258
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DiffPropertyList, { properties: element.properties })
|
|
224
259
|
] });
|
|
225
|
-
return /* @__PURE__ */ (0,
|
|
260
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
226
261
|
"div",
|
|
227
262
|
{
|
|
228
263
|
className: "fds-diff-section__element",
|
|
@@ -232,7 +267,7 @@ function ElementRow({
|
|
|
232
267
|
onMouseEnter: onHover ? () => onHover(index, true) : void 0,
|
|
233
268
|
onMouseLeave: onHover ? () => onHover(index, false) : void 0,
|
|
234
269
|
children: [
|
|
235
|
-
hasDetail ? /* @__PURE__ */ (0,
|
|
270
|
+
hasDetail ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
236
271
|
"button",
|
|
237
272
|
{
|
|
238
273
|
type: "button",
|
|
@@ -241,27 +276,27 @@ function ElementRow({
|
|
|
241
276
|
onClick: toggle,
|
|
242
277
|
children: lines
|
|
243
278
|
}
|
|
244
|
-
) : /* @__PURE__ */ (0,
|
|
245
|
-
element.sourceUrl != null && /* @__PURE__ */ (0,
|
|
246
|
-
hasDetail && open && /* @__PURE__ */ (0,
|
|
279
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fds-diff-section__element-head", children: lines }),
|
|
280
|
+
element.sourceUrl != null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ViewSource, { href: element.sourceUrl, label: element.sourceLabel ?? "View source" }),
|
|
281
|
+
hasDetail && open && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fds-diff-section__detail", children: element.detail })
|
|
247
282
|
]
|
|
248
283
|
}
|
|
249
284
|
);
|
|
250
285
|
}
|
|
251
286
|
function DiffPropertyList({ properties, className, ...rest }) {
|
|
252
287
|
const classes = ["fds-diff-section__lines", className].filter(Boolean).join(" ");
|
|
253
|
-
return /* @__PURE__ */ (0,
|
|
254
|
-
/* @__PURE__ */ (0,
|
|
255
|
-
/* @__PURE__ */ (0,
|
|
256
|
-
/* @__PURE__ */ (0,
|
|
257
|
-
/* @__PURE__ */ (0,
|
|
258
|
-
/* @__PURE__ */ (0,
|
|
288
|
+
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: [
|
|
289
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__prop", children: line.property }),
|
|
290
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "fds-diff-section__delta", children: [
|
|
291
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__live", children: line.live }),
|
|
292
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Arrow, {}),
|
|
293
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__design", children: line.design })
|
|
259
294
|
] }),
|
|
260
|
-
line.trailing != null && /* @__PURE__ */ (0,
|
|
295
|
+
line.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__trailing", children: line.trailing })
|
|
261
296
|
] }, `${line.property}-${li}`)) });
|
|
262
297
|
}
|
|
263
298
|
function ViewSource({ href, label }) {
|
|
264
|
-
return /* @__PURE__ */ (0,
|
|
299
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
265
300
|
"a",
|
|
266
301
|
{
|
|
267
302
|
className: "fds-diff-section__source",
|
|
@@ -270,8 +305,8 @@ function ViewSource({ href, label }) {
|
|
|
270
305
|
rel: "noreferrer noopener",
|
|
271
306
|
onClick: (e) => e.stopPropagation(),
|
|
272
307
|
children: [
|
|
273
|
-
/* @__PURE__ */ (0,
|
|
274
|
-
/* @__PURE__ */ (0,
|
|
308
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__source-label", children: label }),
|
|
309
|
+
/* @__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)(
|
|
275
310
|
"path",
|
|
276
311
|
{
|
|
277
312
|
d: "M7.5 12.5 12.5 7.5M8 7.5h4.5V12",
|
|
@@ -290,7 +325,7 @@ function HeaderChevron({ expanded }) {
|
|
|
290
325
|
"fds-diff-section__header-chevron",
|
|
291
326
|
expanded && "fds-diff-section__header-chevron--expanded"
|
|
292
327
|
].filter(Boolean).join(" ");
|
|
293
|
-
return /* @__PURE__ */ (0,
|
|
328
|
+
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)(
|
|
294
329
|
"path",
|
|
295
330
|
{
|
|
296
331
|
d: "M5 11 9 7l4 4",
|
|
@@ -307,7 +342,7 @@ function Chevron2({ open, className }) {
|
|
|
307
342
|
open && "fds-diff-section__chevron--open",
|
|
308
343
|
className
|
|
309
344
|
].filter(Boolean).join(" ");
|
|
310
|
-
return /* @__PURE__ */ (0,
|
|
345
|
+
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)(
|
|
311
346
|
"path",
|
|
312
347
|
{
|
|
313
348
|
d: "M4.5 3 8 6l-3.5 3",
|
|
@@ -319,7 +354,7 @@ function Chevron2({ open, className }) {
|
|
|
319
354
|
) });
|
|
320
355
|
}
|
|
321
356
|
function Arrow() {
|
|
322
|
-
return /* @__PURE__ */ (0,
|
|
357
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
323
358
|
"svg",
|
|
324
359
|
{
|
|
325
360
|
className: "fds-diff-section__arrow",
|
|
@@ -328,7 +363,7 @@ function Arrow() {
|
|
|
328
363
|
viewBox: "0 0 10 10",
|
|
329
364
|
fill: "none",
|
|
330
365
|
"aria-hidden": "true",
|
|
331
|
-
children: /* @__PURE__ */ (0,
|
|
366
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
332
367
|
"path",
|
|
333
368
|
{
|
|
334
369
|
d: "M1.5 5h6.5M5.5 2.5 8 5 5.5 7.5",
|
|
@@ -344,12 +379,12 @@ function Arrow() {
|
|
|
344
379
|
|
|
345
380
|
// src/components/Select/Select.tsx
|
|
346
381
|
var import_react3 = require("react");
|
|
347
|
-
var
|
|
382
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
348
383
|
function ChevronIcon() {
|
|
349
|
-
return /* @__PURE__ */ (0,
|
|
384
|
+
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" }) });
|
|
350
385
|
}
|
|
351
386
|
function CheckIcon() {
|
|
352
|
-
return /* @__PURE__ */ (0,
|
|
387
|
+
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" }) });
|
|
353
388
|
}
|
|
354
389
|
var Select = (0, import_react3.forwardRef)(function Select2({
|
|
355
390
|
options,
|
|
@@ -472,15 +507,15 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
472
507
|
open ? "fds-select__trigger--open" : "",
|
|
473
508
|
className
|
|
474
509
|
].filter(Boolean).join(" ");
|
|
475
|
-
return /* @__PURE__ */ (0,
|
|
510
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
476
511
|
"div",
|
|
477
512
|
{
|
|
478
513
|
ref: rootRef,
|
|
479
514
|
className: ["fds-select-field", containerClassName].filter(Boolean).join(" "),
|
|
480
515
|
children: [
|
|
481
|
-
label != null && /* @__PURE__ */ (0,
|
|
482
|
-
/* @__PURE__ */ (0,
|
|
483
|
-
/* @__PURE__ */ (0,
|
|
516
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: triggerId, className: "fds-select__label", children: label }),
|
|
517
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "fds-select", children: [
|
|
518
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
484
519
|
"button",
|
|
485
520
|
{
|
|
486
521
|
type: "button",
|
|
@@ -496,20 +531,20 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
496
531
|
onClick: () => !disabled && setOpen((o) => !o),
|
|
497
532
|
onKeyDown,
|
|
498
533
|
children: [
|
|
499
|
-
(selected?.avatar ?? leadingIcon) != null && /* @__PURE__ */ (0,
|
|
500
|
-
/* @__PURE__ */ (0,
|
|
534
|
+
(selected?.avatar ?? leadingIcon) != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__lead", children: selected?.avatar ?? leadingIcon }),
|
|
535
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
501
536
|
"span",
|
|
502
537
|
{
|
|
503
538
|
className: `fds-select__value${selected ? "" : " fds-select__value--placeholder"}`,
|
|
504
539
|
children: selected ? selected.label : placeholder
|
|
505
540
|
}
|
|
506
541
|
),
|
|
507
|
-
/* @__PURE__ */ (0,
|
|
542
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__chevron", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronIcon, {}) })
|
|
508
543
|
]
|
|
509
544
|
}
|
|
510
545
|
),
|
|
511
|
-
open && /* @__PURE__ */ (0,
|
|
512
|
-
searchable && /* @__PURE__ */ (0,
|
|
546
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "fds-select__popover", children: [
|
|
547
|
+
searchable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "fds-select__search", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
513
548
|
"input",
|
|
514
549
|
{
|
|
515
550
|
ref: searchRef,
|
|
@@ -524,7 +559,7 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
524
559
|
"aria-autocomplete": "list"
|
|
525
560
|
}
|
|
526
561
|
) }),
|
|
527
|
-
/* @__PURE__ */ (0,
|
|
562
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
528
563
|
"div",
|
|
529
564
|
{
|
|
530
565
|
ref: listRef,
|
|
@@ -535,8 +570,8 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
535
570
|
"aria-activedescendant": activeIndex >= 0 ? `${listId}-opt-${activeIndex}` : void 0,
|
|
536
571
|
onKeyDown: searchable ? void 0 : onKeyDown,
|
|
537
572
|
children: [
|
|
538
|
-
filtered.length === 0 && /* @__PURE__ */ (0,
|
|
539
|
-
filtered.map((o, i) => /* @__PURE__ */ (0,
|
|
573
|
+
filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "fds-select__empty", children: "No results" }),
|
|
574
|
+
filtered.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
540
575
|
"div",
|
|
541
576
|
{
|
|
542
577
|
id: `${listId}-opt-${i}`,
|
|
@@ -552,12 +587,12 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
552
587
|
onMouseDown: (e) => e.preventDefault(),
|
|
553
588
|
onClick: () => choose(i),
|
|
554
589
|
children: [
|
|
555
|
-
o.avatar != null && /* @__PURE__ */ (0,
|
|
556
|
-
/* @__PURE__ */ (0,
|
|
557
|
-
/* @__PURE__ */ (0,
|
|
558
|
-
o.secondary != null && /* @__PURE__ */ (0,
|
|
590
|
+
o.avatar != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__optAvatar", children: o.avatar }),
|
|
591
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "fds-select__optText", children: [
|
|
592
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__optLabel", children: o.label }),
|
|
593
|
+
o.secondary != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__optSecondary", children: o.secondary })
|
|
559
594
|
] }),
|
|
560
|
-
o.value === value && /* @__PURE__ */ (0,
|
|
595
|
+
o.value === value && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__check", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckIcon, {}) })
|
|
561
596
|
]
|
|
562
597
|
},
|
|
563
598
|
o.value
|
|
@@ -567,8 +602,8 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
567
602
|
)
|
|
568
603
|
] })
|
|
569
604
|
] }),
|
|
570
|
-
hasMessage && /* @__PURE__ */ (0,
|
|
571
|
-
name != null && /* @__PURE__ */ (0,
|
|
605
|
+
hasMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { id: msgId, className: error ? "fds-select__error" : "fds-select__hint", children: error ?? hint }),
|
|
606
|
+
name != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "hidden", name, value: value ?? "" })
|
|
572
607
|
]
|
|
573
608
|
}
|
|
574
609
|
);
|
|
@@ -576,13 +611,13 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
576
611
|
|
|
577
612
|
// src/components/Toggle/Toggle.tsx
|
|
578
613
|
var import_react4 = require("react");
|
|
579
|
-
var
|
|
614
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
580
615
|
var Toggle = (0, import_react4.forwardRef)(function Toggle2({ size = "medium", label, description, className, id, disabled, ...rest }, ref) {
|
|
581
616
|
const generatedId = (0, import_react4.useId)();
|
|
582
617
|
const inputId = id ?? generatedId;
|
|
583
618
|
const classes = ["fds-toggle", `fds-toggle--${size}`, className].filter(Boolean).join(" ");
|
|
584
|
-
return /* @__PURE__ */ (0,
|
|
585
|
-
/* @__PURE__ */ (0,
|
|
619
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: classes, "data-disabled": disabled ? "" : void 0, children: [
|
|
620
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
586
621
|
"input",
|
|
587
622
|
{
|
|
588
623
|
...rest,
|
|
@@ -594,11 +629,11 @@ var Toggle = (0, import_react4.forwardRef)(function Toggle2({ size = "medium", l
|
|
|
594
629
|
className: "fds-toggle__input"
|
|
595
630
|
}
|
|
596
631
|
),
|
|
597
|
-
/* @__PURE__ */ (0,
|
|
598
|
-
/* @__PURE__ */ (0,
|
|
599
|
-
(label != null || description != null) && /* @__PURE__ */ (0,
|
|
600
|
-
label != null && /* @__PURE__ */ (0,
|
|
601
|
-
description != null && /* @__PURE__ */ (0,
|
|
632
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { htmlFor: inputId, className: "fds-toggle__control", children: [
|
|
633
|
+
/* @__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" }) }),
|
|
634
|
+
(label != null || description != null) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "fds-toggle__text", children: [
|
|
635
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fds-toggle__label", children: label }),
|
|
636
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fds-toggle__description", children: description })
|
|
602
637
|
] })
|
|
603
638
|
] })
|
|
604
639
|
] });
|
|
@@ -606,7 +641,7 @@ var Toggle = (0, import_react4.forwardRef)(function Toggle2({ size = "medium", l
|
|
|
606
641
|
|
|
607
642
|
// src/components/AppNav/AppNav.tsx
|
|
608
643
|
var import_react5 = require("react");
|
|
609
|
-
var
|
|
644
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
610
645
|
function AppNav({
|
|
611
646
|
logo,
|
|
612
647
|
actions,
|
|
@@ -638,9 +673,9 @@ function AppNav({
|
|
|
638
673
|
};
|
|
639
674
|
}, [open]);
|
|
640
675
|
const classes = ["fds-app-nav", className].filter(Boolean).join(" ");
|
|
641
|
-
return /* @__PURE__ */ (0,
|
|
642
|
-
/* @__PURE__ */ (0,
|
|
643
|
-
/* @__PURE__ */ (0,
|
|
676
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("nav", { ref: navRef, className: classes, ...rest, children: [
|
|
677
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "fds-app-nav__logo", children: logo }),
|
|
678
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
644
679
|
"div",
|
|
645
680
|
{
|
|
646
681
|
id: linksId,
|
|
@@ -652,8 +687,8 @@ function AppNav({
|
|
|
652
687
|
children
|
|
653
688
|
}
|
|
654
689
|
),
|
|
655
|
-
actions != null && /* @__PURE__ */ (0,
|
|
656
|
-
/* @__PURE__ */ (0,
|
|
690
|
+
actions != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "fds-app-nav__actions", children: actions }),
|
|
691
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
657
692
|
"button",
|
|
658
693
|
{
|
|
659
694
|
ref: toggleRef,
|
|
@@ -663,22 +698,22 @@ function AppNav({
|
|
|
663
698
|
"aria-expanded": open,
|
|
664
699
|
"aria-controls": linksId,
|
|
665
700
|
onClick: () => setOpen((v) => !v),
|
|
666
|
-
children: /* @__PURE__ */ (0,
|
|
701
|
+
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" }) })
|
|
667
702
|
}
|
|
668
703
|
)
|
|
669
704
|
] });
|
|
670
705
|
}
|
|
671
706
|
|
|
672
707
|
// src/components/TabNav/TabNav.tsx
|
|
673
|
-
var
|
|
708
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
674
709
|
function TabNav({ children, className, ...rest }) {
|
|
675
710
|
const classes = ["fds-tab-nav", className].filter(Boolean).join(" ");
|
|
676
|
-
return /* @__PURE__ */ (0,
|
|
711
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("nav", { className: classes, ...rest, children });
|
|
677
712
|
}
|
|
678
713
|
|
|
679
714
|
// src/components/SettingsSection/SettingsSection.tsx
|
|
680
715
|
var import_react6 = require("react");
|
|
681
|
-
var
|
|
716
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
682
717
|
function SettingsSection({
|
|
683
718
|
title,
|
|
684
719
|
description,
|
|
@@ -688,19 +723,19 @@ function SettingsSection({
|
|
|
688
723
|
}) {
|
|
689
724
|
const titleId = (0, import_react6.useId)();
|
|
690
725
|
const classes = ["fds-settings-section", className].filter(Boolean).join(" ");
|
|
691
|
-
return /* @__PURE__ */ (0,
|
|
692
|
-
/* @__PURE__ */ (0,
|
|
693
|
-
/* @__PURE__ */ (0,
|
|
694
|
-
description != null && /* @__PURE__ */ (0,
|
|
726
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { className: classes, "aria-labelledby": titleId, ...rest, children: [
|
|
727
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "fds-settings-section__head", children: [
|
|
728
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { id: titleId, className: "fds-settings-section__title", children: title }),
|
|
729
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "fds-settings-section__description", children: description })
|
|
695
730
|
] }),
|
|
696
|
-
/* @__PURE__ */ (0,
|
|
731
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fds-settings-section__body", children })
|
|
697
732
|
] });
|
|
698
733
|
}
|
|
699
734
|
|
|
700
735
|
// src/components/Modal/Modal.tsx
|
|
701
736
|
var import_react7 = require("react");
|
|
702
737
|
var import_react_dom = require("react-dom");
|
|
703
|
-
var
|
|
738
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
704
739
|
var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
705
740
|
function Modal({
|
|
706
741
|
open,
|
|
@@ -762,14 +797,14 @@ function Modal({
|
|
|
762
797
|
if (!open || typeof document === "undefined") return null;
|
|
763
798
|
const classes = ["fds-modal", `fds-modal--${size}`, tone === "danger" && "fds-modal--danger", className].filter(Boolean).join(" ");
|
|
764
799
|
return (0, import_react_dom.createPortal)(
|
|
765
|
-
/* @__PURE__ */ (0,
|
|
800
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
766
801
|
"div",
|
|
767
802
|
{
|
|
768
803
|
className: "fds-modal__scrim",
|
|
769
804
|
onMouseDown: (e) => {
|
|
770
805
|
if (e.target === e.currentTarget && dismissible) onClose();
|
|
771
806
|
},
|
|
772
|
-
children: /* @__PURE__ */ (0,
|
|
807
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
773
808
|
"div",
|
|
774
809
|
{
|
|
775
810
|
ref: dialogRef,
|
|
@@ -780,7 +815,7 @@ function Modal({
|
|
|
780
815
|
"aria-describedby": description != null ? descriptionId : void 0,
|
|
781
816
|
tabIndex: -1,
|
|
782
817
|
children: [
|
|
783
|
-
/* @__PURE__ */ (0,
|
|
818
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
784
819
|
"button",
|
|
785
820
|
{
|
|
786
821
|
type: "button",
|
|
@@ -788,18 +823,18 @@ function Modal({
|
|
|
788
823
|
onClick: onClose,
|
|
789
824
|
disabled: !dismissible,
|
|
790
825
|
"aria-label": "Close",
|
|
791
|
-
children: /* @__PURE__ */ (0,
|
|
826
|
+
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" }) })
|
|
792
827
|
}
|
|
793
828
|
),
|
|
794
|
-
tone === "danger" && /* @__PURE__ */ (0,
|
|
795
|
-
/* @__PURE__ */ (0,
|
|
796
|
-
/* @__PURE__ */ (0,
|
|
797
|
-
/* @__PURE__ */ (0,
|
|
829
|
+
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: [
|
|
830
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M10 3.5L17.5 16.5H2.5L10 3.5z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
|
|
831
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M10 8.5v3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
|
|
832
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "10", cy: "14.25", r: "0.9", fill: "currentColor" })
|
|
798
833
|
] }) }),
|
|
799
|
-
/* @__PURE__ */ (0,
|
|
800
|
-
description != null && /* @__PURE__ */ (0,
|
|
801
|
-
children != null && /* @__PURE__ */ (0,
|
|
802
|
-
actions != null && /* @__PURE__ */ (0,
|
|
834
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { id: titleId, className: "fds-modal__title", children: title }),
|
|
835
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { id: descriptionId, className: "fds-modal__description", children: description }),
|
|
836
|
+
children != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fds-modal__content", children }),
|
|
837
|
+
actions != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fds-modal__actions", children: actions })
|
|
803
838
|
]
|
|
804
839
|
}
|
|
805
840
|
)
|
|
@@ -811,7 +846,7 @@ function Modal({
|
|
|
811
846
|
|
|
812
847
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
813
848
|
var import_react8 = require("react");
|
|
814
|
-
var
|
|
849
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
815
850
|
function SegmentedControl({
|
|
816
851
|
options,
|
|
817
852
|
value,
|
|
@@ -834,9 +869,9 @@ function SegmentedControl({
|
|
|
834
869
|
refs.current[next]?.focus();
|
|
835
870
|
};
|
|
836
871
|
const classes = ["fds-segmented", className].filter(Boolean).join(" ");
|
|
837
|
-
return /* @__PURE__ */ (0,
|
|
872
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { role: "tablist", "aria-label": ariaLabel, className: classes, children: options.map((option, i) => {
|
|
838
873
|
const selected = option.value === value;
|
|
839
|
-
return /* @__PURE__ */ (0,
|
|
874
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
840
875
|
"button",
|
|
841
876
|
{
|
|
842
877
|
ref: (el) => {
|
|
@@ -853,7 +888,7 @@ function SegmentedControl({
|
|
|
853
888
|
onKeyDown: (e) => onKeyDown(e, i),
|
|
854
889
|
children: [
|
|
855
890
|
option.label,
|
|
856
|
-
option.count != null && /* @__PURE__ */ (0,
|
|
891
|
+
option.count != null && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "fds-segmented__count", children: option.count })
|
|
857
892
|
]
|
|
858
893
|
},
|
|
859
894
|
option.value
|
|
@@ -873,7 +908,7 @@ var breakpoints = {
|
|
|
873
908
|
|
|
874
909
|
// src/components/Avatar/Avatar.tsx
|
|
875
910
|
var import_react9 = require("react");
|
|
876
|
-
var
|
|
911
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
877
912
|
function initialsFor(name) {
|
|
878
913
|
const words = name.trim().split(/[\s._@-]+/).filter(Boolean);
|
|
879
914
|
if (words.length === 0) return "?";
|
|
@@ -884,11 +919,11 @@ function Avatar({ name, src, size = "medium", className, ...rest }) {
|
|
|
884
919
|
const [failedSrc, setFailedSrc] = (0, import_react9.useState)(null);
|
|
885
920
|
const showImage = !!src && src !== failedSrc;
|
|
886
921
|
const classes = ["fds-avatar", `fds-avatar--${size}`, className].filter(Boolean).join(" ");
|
|
887
|
-
return /* @__PURE__ */ (0,
|
|
922
|
+
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) }) });
|
|
888
923
|
}
|
|
889
924
|
|
|
890
925
|
// src/components/SectionHeader/SectionHeader.tsx
|
|
891
|
-
var
|
|
926
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
892
927
|
function SectionHeader({
|
|
893
928
|
title,
|
|
894
929
|
description,
|
|
@@ -898,14 +933,14 @@ function SectionHeader({
|
|
|
898
933
|
...rest
|
|
899
934
|
}) {
|
|
900
935
|
const classes = ["fds-section-header", className].filter(Boolean).join(" ");
|
|
901
|
-
return /* @__PURE__ */ (0,
|
|
902
|
-
/* @__PURE__ */ (0,
|
|
903
|
-
description != null && /* @__PURE__ */ (0,
|
|
936
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: classes, ...rest, children: [
|
|
937
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Heading, { id: titleId, className: "fds-section-header__title", children: title }),
|
|
938
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "fds-section-header__description", children: description })
|
|
904
939
|
] });
|
|
905
940
|
}
|
|
906
941
|
|
|
907
942
|
// src/components/Split/Split.tsx
|
|
908
|
-
var
|
|
943
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
909
944
|
function Split({
|
|
910
945
|
aside,
|
|
911
946
|
children,
|
|
@@ -922,34 +957,379 @@ function Split({
|
|
|
922
957
|
sticky && "fds-split--sticky",
|
|
923
958
|
className
|
|
924
959
|
].filter(Boolean).join(" ");
|
|
925
|
-
return /* @__PURE__ */ (0,
|
|
960
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
926
961
|
"div",
|
|
927
962
|
{
|
|
928
963
|
className: classes,
|
|
929
964
|
style: { "--fds-split-aside": asideWidth, ...style },
|
|
930
965
|
...rest,
|
|
931
966
|
children: [
|
|
932
|
-
/* @__PURE__ */ (0,
|
|
933
|
-
/* @__PURE__ */ (0,
|
|
967
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fds-split__aside", children: aside }),
|
|
968
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fds-split__main", children })
|
|
934
969
|
]
|
|
935
970
|
}
|
|
936
971
|
);
|
|
937
972
|
}
|
|
973
|
+
|
|
974
|
+
// src/components/Badge/Badge.tsx
|
|
975
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
976
|
+
function Badge({ tone = "neutral", icon, className, children, ...rest }) {
|
|
977
|
+
const classes = ["fds-badge", `fds-badge--${tone}`, className].filter(Boolean).join(" ");
|
|
978
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: classes, ...rest, children: [
|
|
979
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fds-badge__icon", "aria-hidden": "true", children: icon }),
|
|
980
|
+
children
|
|
981
|
+
] });
|
|
982
|
+
}
|
|
983
|
+
|
|
984
|
+
// src/components/Tag/Tag.tsx
|
|
985
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
986
|
+
function Tag({ dot, className, children, ...rest }) {
|
|
987
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: ["fds-tag", className].filter(Boolean).join(" "), ...rest, children: [
|
|
988
|
+
dot && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `fds-dot fds-dot--${dot}`, "aria-hidden": "true" }),
|
|
989
|
+
children
|
|
990
|
+
] });
|
|
991
|
+
}
|
|
992
|
+
|
|
993
|
+
// src/components/MultiSelect/MultiSelect.tsx
|
|
994
|
+
var import_react10 = require("react");
|
|
995
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
996
|
+
function ChevronIcon2() {
|
|
997
|
+
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" }) });
|
|
998
|
+
}
|
|
999
|
+
function CheckIcon2() {
|
|
1000
|
+
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" }) });
|
|
1001
|
+
}
|
|
1002
|
+
function MultiSelect({
|
|
1003
|
+
label,
|
|
1004
|
+
options,
|
|
1005
|
+
value,
|
|
1006
|
+
onChange,
|
|
1007
|
+
disabled = false,
|
|
1008
|
+
selectAllLabel = "Select all",
|
|
1009
|
+
clearLabel = "Clear",
|
|
1010
|
+
id,
|
|
1011
|
+
className
|
|
1012
|
+
}) {
|
|
1013
|
+
const genId = (0, import_react10.useId)();
|
|
1014
|
+
const triggerId = id ?? genId;
|
|
1015
|
+
const listId = `${genId}-list`;
|
|
1016
|
+
const rootRef = (0, import_react10.useRef)(null);
|
|
1017
|
+
const triggerRef = (0, import_react10.useRef)(null);
|
|
1018
|
+
const listRef = (0, import_react10.useRef)(null);
|
|
1019
|
+
const [open, setOpen] = (0, import_react10.useState)(false);
|
|
1020
|
+
const [activeIndex, setActiveIndex] = (0, import_react10.useState)(0);
|
|
1021
|
+
const selected = new Set(value);
|
|
1022
|
+
const enabled = options.filter((o) => !o.disabled);
|
|
1023
|
+
(0, import_react10.useEffect)(() => {
|
|
1024
|
+
if (!open) return;
|
|
1025
|
+
const onDown = (e) => {
|
|
1026
|
+
if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
|
|
1027
|
+
};
|
|
1028
|
+
document.addEventListener("mousedown", onDown);
|
|
1029
|
+
const raf = requestAnimationFrame(() => listRef.current?.focus());
|
|
1030
|
+
return () => {
|
|
1031
|
+
document.removeEventListener("mousedown", onDown);
|
|
1032
|
+
cancelAnimationFrame(raf);
|
|
1033
|
+
};
|
|
1034
|
+
}, [open]);
|
|
1035
|
+
const close = () => {
|
|
1036
|
+
setOpen(false);
|
|
1037
|
+
triggerRef.current?.focus();
|
|
1038
|
+
};
|
|
1039
|
+
const toggle = (o) => {
|
|
1040
|
+
if (!o || o.disabled) return;
|
|
1041
|
+
const next = selected.has(o.value) ? value.filter((v) => v !== o.value) : options.filter((x) => x.value === o.value || selected.has(x.value)).map((x) => x.value);
|
|
1042
|
+
onChange(next);
|
|
1043
|
+
};
|
|
1044
|
+
const onTriggerKeyDown = (e) => {
|
|
1045
|
+
if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
|
|
1046
|
+
e.preventDefault();
|
|
1047
|
+
setActiveIndex(0);
|
|
1048
|
+
setOpen(true);
|
|
1049
|
+
}
|
|
1050
|
+
};
|
|
1051
|
+
const onListKeyDown = (e) => {
|
|
1052
|
+
const last = options.length - 1;
|
|
1053
|
+
if (e.key === "ArrowDown") {
|
|
1054
|
+
e.preventDefault();
|
|
1055
|
+
setActiveIndex((i) => i >= last ? 0 : i + 1);
|
|
1056
|
+
} else if (e.key === "ArrowUp") {
|
|
1057
|
+
e.preventDefault();
|
|
1058
|
+
setActiveIndex((i) => i <= 0 ? last : i - 1);
|
|
1059
|
+
} else if (e.key === "Home") {
|
|
1060
|
+
e.preventDefault();
|
|
1061
|
+
setActiveIndex(0);
|
|
1062
|
+
} else if (e.key === "End") {
|
|
1063
|
+
e.preventDefault();
|
|
1064
|
+
setActiveIndex(last);
|
|
1065
|
+
} else if (e.key === "Enter" || e.key === " ") {
|
|
1066
|
+
e.preventDefault();
|
|
1067
|
+
toggle(options[activeIndex]);
|
|
1068
|
+
} else if (e.key === "Escape" || e.key === "Tab") {
|
|
1069
|
+
if (e.key === "Escape") e.preventDefault();
|
|
1070
|
+
close();
|
|
1071
|
+
}
|
|
1072
|
+
};
|
|
1073
|
+
const triggerClasses = ["fds-multiselect__trigger", open ? "fds-multiselect__trigger--open" : ""].filter(Boolean).join(" ");
|
|
1074
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref: rootRef, className: ["fds-multiselect", className].filter(Boolean).join(" "), children: [
|
|
1075
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1076
|
+
"button",
|
|
1077
|
+
{
|
|
1078
|
+
type: "button",
|
|
1079
|
+
id: triggerId,
|
|
1080
|
+
ref: triggerRef,
|
|
1081
|
+
className: triggerClasses,
|
|
1082
|
+
disabled,
|
|
1083
|
+
"aria-haspopup": "listbox",
|
|
1084
|
+
"aria-expanded": open,
|
|
1085
|
+
"aria-controls": open ? listId : void 0,
|
|
1086
|
+
onClick: () => setOpen((o) => !o),
|
|
1087
|
+
onKeyDown: onTriggerKeyDown,
|
|
1088
|
+
children: [
|
|
1089
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "fds-multiselect__label", children: label }),
|
|
1090
|
+
value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "fds-multiselect__count", "aria-label": `${value.length} of ${options.length} selected`, children: [
|
|
1091
|
+
value.length,
|
|
1092
|
+
"/",
|
|
1093
|
+
options.length
|
|
1094
|
+
] }),
|
|
1095
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: `fds-multiselect__chevron${open ? " fds-multiselect__chevron--open" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronIcon2, {}) })
|
|
1096
|
+
]
|
|
1097
|
+
}
|
|
1098
|
+
),
|
|
1099
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fds-multiselect__popover", children: [
|
|
1100
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1101
|
+
"div",
|
|
1102
|
+
{
|
|
1103
|
+
ref: listRef,
|
|
1104
|
+
id: listId,
|
|
1105
|
+
role: "listbox",
|
|
1106
|
+
"aria-multiselectable": "true",
|
|
1107
|
+
"aria-label": label,
|
|
1108
|
+
tabIndex: 0,
|
|
1109
|
+
className: "fds-multiselect__list",
|
|
1110
|
+
"aria-activedescendant": `${listId}-opt-${activeIndex}`,
|
|
1111
|
+
onKeyDown: onListKeyDown,
|
|
1112
|
+
children: options.map((o, i) => {
|
|
1113
|
+
const checked = selected.has(o.value);
|
|
1114
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1115
|
+
"div",
|
|
1116
|
+
{
|
|
1117
|
+
id: `${listId}-opt-${i}`,
|
|
1118
|
+
role: "option",
|
|
1119
|
+
"aria-selected": checked,
|
|
1120
|
+
"aria-disabled": o.disabled || void 0,
|
|
1121
|
+
className: [
|
|
1122
|
+
"fds-multiselect__option",
|
|
1123
|
+
i === activeIndex ? "fds-multiselect__option--active" : "",
|
|
1124
|
+
o.disabled ? "fds-multiselect__option--disabled" : ""
|
|
1125
|
+
].filter(Boolean).join(" "),
|
|
1126
|
+
onMouseEnter: () => setActiveIndex(i),
|
|
1127
|
+
onMouseDown: (e) => e.preventDefault(),
|
|
1128
|
+
onClick: () => toggle(o),
|
|
1129
|
+
children: [
|
|
1130
|
+
/* @__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, {}) }),
|
|
1131
|
+
o.dot && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: `fds-dot fds-dot--${o.dot}`, "aria-hidden": "true" }),
|
|
1132
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "fds-multiselect__optLabel", children: o.label }),
|
|
1133
|
+
o.count != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "fds-multiselect__optCount", children: o.count })
|
|
1134
|
+
]
|
|
1135
|
+
},
|
|
1136
|
+
o.value
|
|
1137
|
+
);
|
|
1138
|
+
})
|
|
1139
|
+
}
|
|
1140
|
+
),
|
|
1141
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fds-multiselect__footer", children: [
|
|
1142
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "fds-multiselect__action", onClick: () => onChange(enabled.map((o) => o.value)), children: selectAllLabel }),
|
|
1143
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "fds-multiselect__action", onClick: () => onChange([]), children: clearLabel })
|
|
1144
|
+
] })
|
|
1145
|
+
] })
|
|
1146
|
+
] });
|
|
1147
|
+
}
|
|
1148
|
+
|
|
1149
|
+
// src/components/SearchInput/SearchInput.tsx
|
|
1150
|
+
var import_react11 = require("react");
|
|
1151
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1152
|
+
var SearchInput = (0, import_react11.forwardRef)(function SearchInput2({ shortcut, containerClassName, className, value, ...rest }, ref) {
|
|
1153
|
+
const empty = value === void 0 || value === "";
|
|
1154
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: ["fds-search", containerClassName].filter(Boolean).join(" "), children: [
|
|
1155
|
+
/* @__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: [
|
|
1156
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
|
|
1157
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "m21 21-4.3-4.3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
|
|
1158
|
+
] }),
|
|
1159
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("input", { ref, type: "search", value, className: ["fds-search__input", className].filter(Boolean).join(" "), ...rest }),
|
|
1160
|
+
shortcut && empty && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("kbd", { className: "fds-search__kbd", "aria-hidden": "true", children: shortcut })
|
|
1161
|
+
] });
|
|
1162
|
+
});
|
|
1163
|
+
|
|
1164
|
+
// src/components/Pagination/Pagination.tsx
|
|
1165
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1166
|
+
function pageItems(page, pageCount) {
|
|
1167
|
+
if (pageCount <= 7) return Array.from({ length: pageCount }, (_, i) => i + 1);
|
|
1168
|
+
const start = Math.max(2, Math.min(page - 1, pageCount - 4));
|
|
1169
|
+
const end = Math.min(pageCount - 1, Math.max(page + 1, 5));
|
|
1170
|
+
const items = [1];
|
|
1171
|
+
if (start > 2) items.push(null);
|
|
1172
|
+
for (let p = start; p <= end; p++) items.push(p);
|
|
1173
|
+
if (end < pageCount - 1) items.push(null);
|
|
1174
|
+
items.push(pageCount);
|
|
1175
|
+
return items;
|
|
1176
|
+
}
|
|
1177
|
+
function Arrow2({ dir }) {
|
|
1178
|
+
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" }) });
|
|
1179
|
+
}
|
|
1180
|
+
function Pagination({ page, pageCount, onPageChange, total, pageSize, variant = "full", className }) {
|
|
1181
|
+
if (pageCount <= 1) return null;
|
|
1182
|
+
const go = (p) => {
|
|
1183
|
+
if (p >= 1 && p <= pageCount && p !== page) onPageChange(p);
|
|
1184
|
+
};
|
|
1185
|
+
const showRange = variant === "full" && total != null && pageSize != null;
|
|
1186
|
+
const from = (page - 1) * (pageSize ?? 0) + 1;
|
|
1187
|
+
const to = Math.min(page * (pageSize ?? 0), total ?? 0);
|
|
1188
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("nav", { className: ["fds-pagination", `fds-pagination--${variant}`, className].filter(Boolean).join(" "), "aria-label": "Pagination", children: [
|
|
1189
|
+
showRange && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { className: "fds-pagination__range", children: [
|
|
1190
|
+
"Showing ",
|
|
1191
|
+
from,
|
|
1192
|
+
"\u2013",
|
|
1193
|
+
to,
|
|
1194
|
+
" of ",
|
|
1195
|
+
total
|
|
1196
|
+
] }),
|
|
1197
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "fds-pagination__controls", children: [
|
|
1198
|
+
/* @__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" }) }),
|
|
1199
|
+
variant === "compact" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "fds-pagination__status", "aria-live": "polite", children: [
|
|
1200
|
+
"Page ",
|
|
1201
|
+
page,
|
|
1202
|
+
" of ",
|
|
1203
|
+
pageCount
|
|
1204
|
+
] }) : pageItems(page, pageCount).map(
|
|
1205
|
+
(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)(
|
|
1206
|
+
"button",
|
|
1207
|
+
{
|
|
1208
|
+
type: "button",
|
|
1209
|
+
className: `fds-pagination__page${p === page ? " fds-pagination__page--current" : ""}`,
|
|
1210
|
+
"aria-current": p === page ? "page" : void 0,
|
|
1211
|
+
"aria-label": `Page ${p}`,
|
|
1212
|
+
onClick: () => go(p),
|
|
1213
|
+
children: p
|
|
1214
|
+
},
|
|
1215
|
+
p
|
|
1216
|
+
)
|
|
1217
|
+
),
|
|
1218
|
+
/* @__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" }) })
|
|
1219
|
+
] })
|
|
1220
|
+
] });
|
|
1221
|
+
}
|
|
1222
|
+
|
|
1223
|
+
// src/components/EmptyState/EmptyState.tsx
|
|
1224
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1225
|
+
function EmptyState({ illustration, title, description, action, footer, className, ...rest }) {
|
|
1226
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: ["fds-empty", className].filter(Boolean).join(" "), ...rest, children: [
|
|
1227
|
+
illustration != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fds-empty__illustration", children: illustration }),
|
|
1228
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fds-empty__text", children: [
|
|
1229
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { className: "fds-empty__title", children: title }),
|
|
1230
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "fds-empty__description", children: description })
|
|
1231
|
+
] }),
|
|
1232
|
+
(action != null || footer != null) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fds-empty__actions", children: [
|
|
1233
|
+
action,
|
|
1234
|
+
footer != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fds-empty__footer", children: footer })
|
|
1235
|
+
] })
|
|
1236
|
+
] });
|
|
1237
|
+
}
|
|
1238
|
+
function StackedCardsIllustration({ className }) {
|
|
1239
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: ["fds-stacked-cards", className].filter(Boolean).join(" "), "aria-hidden": "true", children: [
|
|
1240
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fds-stacked-cards__card fds-stacked-cards__card--back" }),
|
|
1241
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fds-stacked-cards__card fds-stacked-cards__card--front", children: [
|
|
1242
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fds-stacked-cards__lines", children: [
|
|
1243
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", {}),
|
|
1244
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", {}),
|
|
1245
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", {})
|
|
1246
|
+
] }),
|
|
1247
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", className: "fds-stacked-cards__status", children: [
|
|
1248
|
+
/* @__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" }),
|
|
1249
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("circle", { cx: "9", cy: "9", r: "3", className: "fds-stacked-cards__statusDot" })
|
|
1250
|
+
] })
|
|
1251
|
+
] }),
|
|
1252
|
+
/* @__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: [
|
|
1253
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
|
|
1254
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "m21 21-4.3-4.3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
|
|
1255
|
+
] }) })
|
|
1256
|
+
] });
|
|
1257
|
+
}
|
|
1258
|
+
|
|
1259
|
+
// src/components/Callout/Callout.tsx
|
|
1260
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1261
|
+
function Callout({
|
|
1262
|
+
tone = "neutral",
|
|
1263
|
+
icon,
|
|
1264
|
+
title,
|
|
1265
|
+
titleAside,
|
|
1266
|
+
children,
|
|
1267
|
+
action,
|
|
1268
|
+
className,
|
|
1269
|
+
...rest
|
|
1270
|
+
}) {
|
|
1271
|
+
const classes = ["fds-callout", `fds-callout--${tone}`, className].filter(Boolean).join(" ");
|
|
1272
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: classes, ...rest, children: [
|
|
1273
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fds-callout__icon", "aria-hidden": "true", children: icon }),
|
|
1274
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "fds-callout__body", children: [
|
|
1275
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "fds-callout__title", children: [
|
|
1276
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: title }),
|
|
1277
|
+
titleAside != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fds-callout__aside", children: titleAside })
|
|
1278
|
+
] }),
|
|
1279
|
+
children != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fds-callout__text", children })
|
|
1280
|
+
] }),
|
|
1281
|
+
action != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fds-callout__action", children: action })
|
|
1282
|
+
] });
|
|
1283
|
+
}
|
|
1284
|
+
|
|
1285
|
+
// src/components/Skeleton/Skeleton.tsx
|
|
1286
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1287
|
+
var px = (v) => typeof v === "number" ? `${v}px` : v;
|
|
1288
|
+
function Skeleton({ shape = "rect", width, height, lines = 1, className, style, ...rest }) {
|
|
1289
|
+
const classes = ["fds-skeleton", `fds-skeleton--${shape}`, className].filter(Boolean).join(" ");
|
|
1290
|
+
if (shape === "text" && lines > 1) {
|
|
1291
|
+
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)(
|
|
1292
|
+
"span",
|
|
1293
|
+
{
|
|
1294
|
+
className: classes,
|
|
1295
|
+
style: { height: px(height), width: i === lines - 1 ? "60%" : void 0, ...style },
|
|
1296
|
+
...rest
|
|
1297
|
+
},
|
|
1298
|
+
i
|
|
1299
|
+
)) });
|
|
1300
|
+
}
|
|
1301
|
+
const size = shape === "circle" ? { width: px(width ?? height ?? 16), height: px(height ?? width ?? 16) } : { width: px(width), height: px(height) };
|
|
1302
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: classes, style: { ...size, ...style }, "aria-hidden": "true", ...rest });
|
|
1303
|
+
}
|
|
1304
|
+
function SkeletonGroup({ label = "Loading", className, children, ...rest }) {
|
|
1305
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { role: "status", "aria-busy": "true", "aria-label": label, className, ...rest, children });
|
|
1306
|
+
}
|
|
938
1307
|
// Annotate the CommonJS export names for ESM import in node:
|
|
939
1308
|
0 && (module.exports = {
|
|
940
1309
|
AppNav,
|
|
941
1310
|
Avatar,
|
|
1311
|
+
Badge,
|
|
942
1312
|
Button,
|
|
1313
|
+
ButtonLink,
|
|
1314
|
+
Callout,
|
|
943
1315
|
DiffPropertyList,
|
|
944
1316
|
DiffSection,
|
|
1317
|
+
EmptyState,
|
|
945
1318
|
MismatchCard,
|
|
946
1319
|
Modal,
|
|
1320
|
+
MultiSelect,
|
|
1321
|
+
Pagination,
|
|
1322
|
+
SearchInput,
|
|
947
1323
|
SectionHeader,
|
|
948
1324
|
SegmentedControl,
|
|
949
1325
|
Select,
|
|
950
1326
|
SettingsSection,
|
|
1327
|
+
Skeleton,
|
|
1328
|
+
SkeletonGroup,
|
|
951
1329
|
Split,
|
|
1330
|
+
StackedCardsIllustration,
|
|
952
1331
|
TabNav,
|
|
1332
|
+
Tag,
|
|
953
1333
|
Toggle,
|
|
954
1334
|
breakpoints
|
|
955
1335
|
});
|