@usefidel/design-system 0.16.0 → 0.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/fidel.manifest.json +2 -2
- package/dist/icons.cjs +33 -1
- package/dist/icons.d.cts +11 -1
- package/dist/icons.d.ts +11 -1
- package/dist/icons.js +31 -2
- package/dist/index.cjs +240 -186
- package/dist/index.css +97 -0
- package/dist/index.d.cts +43 -2
- package/dist/index.d.ts +43 -2
- package/dist/index.js +238 -186
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -24,6 +24,8 @@ __export(index_exports, {
|
|
|
24
24
|
Avatar: () => Avatar,
|
|
25
25
|
Badge: () => Badge,
|
|
26
26
|
Button: () => Button,
|
|
27
|
+
ButtonLink: () => ButtonLink,
|
|
28
|
+
Callout: () => Callout,
|
|
27
29
|
DiffPropertyList: () => DiffPropertyList,
|
|
28
30
|
DiffSection: () => DiffSection,
|
|
29
31
|
EmptyState: () => EmptyState,
|
|
@@ -72,9 +74,33 @@ function Button({
|
|
|
72
74
|
] });
|
|
73
75
|
}
|
|
74
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
|
+
|
|
75
101
|
// src/components/MismatchCard/MismatchCard.tsx
|
|
76
102
|
var import_react = require("react");
|
|
77
|
-
var
|
|
103
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
78
104
|
function MismatchCard({
|
|
79
105
|
title,
|
|
80
106
|
properties,
|
|
@@ -88,18 +114,18 @@ function MismatchCard({
|
|
|
88
114
|
const visible = expanded || !canToggle ? properties : properties.slice(0, collapsedCount);
|
|
89
115
|
const hiddenCount = properties.length - collapsedCount;
|
|
90
116
|
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,
|
|
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 })
|
|
99
125
|
] })
|
|
100
126
|
] }, `${prop.label}-${i}`)) })
|
|
101
127
|
] }),
|
|
102
|
-
canToggle && /* @__PURE__ */ (0,
|
|
128
|
+
canToggle && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
103
129
|
"button",
|
|
104
130
|
{
|
|
105
131
|
type: "button",
|
|
@@ -107,8 +133,8 @@ function MismatchCard({
|
|
|
107
133
|
"aria-expanded": expanded,
|
|
108
134
|
onClick: () => setExpanded((v) => !v),
|
|
109
135
|
children: [
|
|
110
|
-
/* @__PURE__ */ (0,
|
|
111
|
-
/* @__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) })
|
|
112
138
|
]
|
|
113
139
|
}
|
|
114
140
|
)
|
|
@@ -118,7 +144,7 @@ function showMoreLabel(hiddenCount) {
|
|
|
118
144
|
return `Show ${hiddenCount} more ${hiddenCount === 1 ? "mismatch" : "mismatches"}`;
|
|
119
145
|
}
|
|
120
146
|
function Chevron({ direction }) {
|
|
121
|
-
return /* @__PURE__ */ (0,
|
|
147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
122
148
|
"svg",
|
|
123
149
|
{
|
|
124
150
|
className: `fds-mismatch-card__chevron fds-mismatch-card__chevron--${direction}`,
|
|
@@ -127,7 +153,7 @@ function Chevron({ direction }) {
|
|
|
127
153
|
viewBox: "0 0 20 20",
|
|
128
154
|
fill: "none",
|
|
129
155
|
"aria-hidden": "true",
|
|
130
|
-
children: /* @__PURE__ */ (0,
|
|
156
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
131
157
|
"path",
|
|
132
158
|
{
|
|
133
159
|
d: "M6 8.5 10 12l4-3.5",
|
|
@@ -143,7 +169,7 @@ function Chevron({ direction }) {
|
|
|
143
169
|
|
|
144
170
|
// src/components/DiffSection/DiffSection.tsx
|
|
145
171
|
var import_react2 = require("react");
|
|
146
|
-
var
|
|
172
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
147
173
|
function plural(n, one, many) {
|
|
148
174
|
return `${n} ${n === 1 ? one : many}`;
|
|
149
175
|
}
|
|
@@ -167,7 +193,7 @@ function DiffSection({
|
|
|
167
193
|
headerless && "fds-diff-section--flat",
|
|
168
194
|
className
|
|
169
195
|
].filter(Boolean).join(" ");
|
|
170
|
-
return /* @__PURE__ */ (0,
|
|
196
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
171
197
|
"div",
|
|
172
198
|
{
|
|
173
199
|
className: classes,
|
|
@@ -175,7 +201,7 @@ function DiffSection({
|
|
|
175
201
|
"data-flat": headerless ? "true" : void 0,
|
|
176
202
|
...rest,
|
|
177
203
|
children: [
|
|
178
|
-
!headerless && /* @__PURE__ */ (0,
|
|
204
|
+
!headerless && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
179
205
|
"button",
|
|
180
206
|
{
|
|
181
207
|
type: "button",
|
|
@@ -183,18 +209,18 @@ function DiffSection({
|
|
|
183
209
|
"aria-expanded": expanded,
|
|
184
210
|
onClick: () => setExpanded((v) => !v),
|
|
185
211
|
children: [
|
|
186
|
-
/* @__PURE__ */ (0,
|
|
187
|
-
number != null && /* @__PURE__ */ (0,
|
|
188
|
-
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 })
|
|
189
215
|
] }),
|
|
190
|
-
/* @__PURE__ */ (0,
|
|
191
|
-
/* @__PURE__ */ (0,
|
|
192
|
-
/* @__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 })
|
|
193
219
|
] })
|
|
194
220
|
]
|
|
195
221
|
}
|
|
196
222
|
),
|
|
197
|
-
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)(
|
|
198
224
|
ElementRow,
|
|
199
225
|
{
|
|
200
226
|
element: el,
|
|
@@ -223,15 +249,15 @@ function ElementRow({
|
|
|
223
249
|
if (!isControlled) setInternalOpen(next);
|
|
224
250
|
onToggle?.(index, next);
|
|
225
251
|
};
|
|
226
|
-
const lines = /* @__PURE__ */ (0,
|
|
227
|
-
/* @__PURE__ */ (0,
|
|
228
|
-
/* @__PURE__ */ (0,
|
|
229
|
-
/* @__PURE__ */ (0,
|
|
230
|
-
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" })
|
|
231
257
|
] }),
|
|
232
|
-
/* @__PURE__ */ (0,
|
|
258
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DiffPropertyList, { properties: element.properties })
|
|
233
259
|
] });
|
|
234
|
-
return /* @__PURE__ */ (0,
|
|
260
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
235
261
|
"div",
|
|
236
262
|
{
|
|
237
263
|
className: "fds-diff-section__element",
|
|
@@ -241,7 +267,7 @@ function ElementRow({
|
|
|
241
267
|
onMouseEnter: onHover ? () => onHover(index, true) : void 0,
|
|
242
268
|
onMouseLeave: onHover ? () => onHover(index, false) : void 0,
|
|
243
269
|
children: [
|
|
244
|
-
hasDetail ? /* @__PURE__ */ (0,
|
|
270
|
+
hasDetail ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
245
271
|
"button",
|
|
246
272
|
{
|
|
247
273
|
type: "button",
|
|
@@ -250,27 +276,27 @@ function ElementRow({
|
|
|
250
276
|
onClick: toggle,
|
|
251
277
|
children: lines
|
|
252
278
|
}
|
|
253
|
-
) : /* @__PURE__ */ (0,
|
|
254
|
-
element.sourceUrl != null && /* @__PURE__ */ (0,
|
|
255
|
-
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 })
|
|
256
282
|
]
|
|
257
283
|
}
|
|
258
284
|
);
|
|
259
285
|
}
|
|
260
286
|
function DiffPropertyList({ properties, className, ...rest }) {
|
|
261
287
|
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,
|
|
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 })
|
|
268
294
|
] }),
|
|
269
|
-
line.trailing != null && /* @__PURE__ */ (0,
|
|
295
|
+
line.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fds-diff-section__trailing", children: line.trailing })
|
|
270
296
|
] }, `${line.property}-${li}`)) });
|
|
271
297
|
}
|
|
272
298
|
function ViewSource({ href, label }) {
|
|
273
|
-
return /* @__PURE__ */ (0,
|
|
299
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
274
300
|
"a",
|
|
275
301
|
{
|
|
276
302
|
className: "fds-diff-section__source",
|
|
@@ -279,8 +305,8 @@ function ViewSource({ href, label }) {
|
|
|
279
305
|
rel: "noreferrer noopener",
|
|
280
306
|
onClick: (e) => e.stopPropagation(),
|
|
281
307
|
children: [
|
|
282
|
-
/* @__PURE__ */ (0,
|
|
283
|
-
/* @__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)(
|
|
284
310
|
"path",
|
|
285
311
|
{
|
|
286
312
|
d: "M7.5 12.5 12.5 7.5M8 7.5h4.5V12",
|
|
@@ -299,7 +325,7 @@ function HeaderChevron({ expanded }) {
|
|
|
299
325
|
"fds-diff-section__header-chevron",
|
|
300
326
|
expanded && "fds-diff-section__header-chevron--expanded"
|
|
301
327
|
].filter(Boolean).join(" ");
|
|
302
|
-
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)(
|
|
303
329
|
"path",
|
|
304
330
|
{
|
|
305
331
|
d: "M5 11 9 7l4 4",
|
|
@@ -316,7 +342,7 @@ function Chevron2({ open, className }) {
|
|
|
316
342
|
open && "fds-diff-section__chevron--open",
|
|
317
343
|
className
|
|
318
344
|
].filter(Boolean).join(" ");
|
|
319
|
-
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)(
|
|
320
346
|
"path",
|
|
321
347
|
{
|
|
322
348
|
d: "M4.5 3 8 6l-3.5 3",
|
|
@@ -328,7 +354,7 @@ function Chevron2({ open, className }) {
|
|
|
328
354
|
) });
|
|
329
355
|
}
|
|
330
356
|
function Arrow() {
|
|
331
|
-
return /* @__PURE__ */ (0,
|
|
357
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
332
358
|
"svg",
|
|
333
359
|
{
|
|
334
360
|
className: "fds-diff-section__arrow",
|
|
@@ -337,7 +363,7 @@ function Arrow() {
|
|
|
337
363
|
viewBox: "0 0 10 10",
|
|
338
364
|
fill: "none",
|
|
339
365
|
"aria-hidden": "true",
|
|
340
|
-
children: /* @__PURE__ */ (0,
|
|
366
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
341
367
|
"path",
|
|
342
368
|
{
|
|
343
369
|
d: "M1.5 5h6.5M5.5 2.5 8 5 5.5 7.5",
|
|
@@ -353,12 +379,12 @@ function Arrow() {
|
|
|
353
379
|
|
|
354
380
|
// src/components/Select/Select.tsx
|
|
355
381
|
var import_react3 = require("react");
|
|
356
|
-
var
|
|
382
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
357
383
|
function ChevronIcon() {
|
|
358
|
-
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" }) });
|
|
359
385
|
}
|
|
360
386
|
function CheckIcon() {
|
|
361
|
-
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" }) });
|
|
362
388
|
}
|
|
363
389
|
var Select = (0, import_react3.forwardRef)(function Select2({
|
|
364
390
|
options,
|
|
@@ -481,15 +507,15 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
481
507
|
open ? "fds-select__trigger--open" : "",
|
|
482
508
|
className
|
|
483
509
|
].filter(Boolean).join(" ");
|
|
484
|
-
return /* @__PURE__ */ (0,
|
|
510
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
485
511
|
"div",
|
|
486
512
|
{
|
|
487
513
|
ref: rootRef,
|
|
488
514
|
className: ["fds-select-field", containerClassName].filter(Boolean).join(" "),
|
|
489
515
|
children: [
|
|
490
|
-
label != null && /* @__PURE__ */ (0,
|
|
491
|
-
/* @__PURE__ */ (0,
|
|
492
|
-
/* @__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)(
|
|
493
519
|
"button",
|
|
494
520
|
{
|
|
495
521
|
type: "button",
|
|
@@ -505,20 +531,20 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
505
531
|
onClick: () => !disabled && setOpen((o) => !o),
|
|
506
532
|
onKeyDown,
|
|
507
533
|
children: [
|
|
508
|
-
(selected?.avatar ?? leadingIcon) != null && /* @__PURE__ */ (0,
|
|
509
|
-
/* @__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)(
|
|
510
536
|
"span",
|
|
511
537
|
{
|
|
512
538
|
className: `fds-select__value${selected ? "" : " fds-select__value--placeholder"}`,
|
|
513
539
|
children: selected ? selected.label : placeholder
|
|
514
540
|
}
|
|
515
541
|
),
|
|
516
|
-
/* @__PURE__ */ (0,
|
|
542
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__chevron", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronIcon, {}) })
|
|
517
543
|
]
|
|
518
544
|
}
|
|
519
545
|
),
|
|
520
|
-
open && /* @__PURE__ */ (0,
|
|
521
|
-
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)(
|
|
522
548
|
"input",
|
|
523
549
|
{
|
|
524
550
|
ref: searchRef,
|
|
@@ -533,7 +559,7 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
533
559
|
"aria-autocomplete": "list"
|
|
534
560
|
}
|
|
535
561
|
) }),
|
|
536
|
-
/* @__PURE__ */ (0,
|
|
562
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
537
563
|
"div",
|
|
538
564
|
{
|
|
539
565
|
ref: listRef,
|
|
@@ -544,8 +570,8 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
544
570
|
"aria-activedescendant": activeIndex >= 0 ? `${listId}-opt-${activeIndex}` : void 0,
|
|
545
571
|
onKeyDown: searchable ? void 0 : onKeyDown,
|
|
546
572
|
children: [
|
|
547
|
-
filtered.length === 0 && /* @__PURE__ */ (0,
|
|
548
|
-
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)(
|
|
549
575
|
"div",
|
|
550
576
|
{
|
|
551
577
|
id: `${listId}-opt-${i}`,
|
|
@@ -561,12 +587,12 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
561
587
|
onMouseDown: (e) => e.preventDefault(),
|
|
562
588
|
onClick: () => choose(i),
|
|
563
589
|
children: [
|
|
564
|
-
o.avatar != null && /* @__PURE__ */ (0,
|
|
565
|
-
/* @__PURE__ */ (0,
|
|
566
|
-
/* @__PURE__ */ (0,
|
|
567
|
-
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 })
|
|
568
594
|
] }),
|
|
569
|
-
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, {}) })
|
|
570
596
|
]
|
|
571
597
|
},
|
|
572
598
|
o.value
|
|
@@ -576,8 +602,8 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
576
602
|
)
|
|
577
603
|
] })
|
|
578
604
|
] }),
|
|
579
|
-
hasMessage && /* @__PURE__ */ (0,
|
|
580
|
-
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 ?? "" })
|
|
581
607
|
]
|
|
582
608
|
}
|
|
583
609
|
);
|
|
@@ -585,13 +611,13 @@ var Select = (0, import_react3.forwardRef)(function Select2({
|
|
|
585
611
|
|
|
586
612
|
// src/components/Toggle/Toggle.tsx
|
|
587
613
|
var import_react4 = require("react");
|
|
588
|
-
var
|
|
614
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
589
615
|
var Toggle = (0, import_react4.forwardRef)(function Toggle2({ size = "medium", label, description, className, id, disabled, ...rest }, ref) {
|
|
590
616
|
const generatedId = (0, import_react4.useId)();
|
|
591
617
|
const inputId = id ?? generatedId;
|
|
592
618
|
const classes = ["fds-toggle", `fds-toggle--${size}`, className].filter(Boolean).join(" ");
|
|
593
|
-
return /* @__PURE__ */ (0,
|
|
594
|
-
/* @__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)(
|
|
595
621
|
"input",
|
|
596
622
|
{
|
|
597
623
|
...rest,
|
|
@@ -603,11 +629,11 @@ var Toggle = (0, import_react4.forwardRef)(function Toggle2({ size = "medium", l
|
|
|
603
629
|
className: "fds-toggle__input"
|
|
604
630
|
}
|
|
605
631
|
),
|
|
606
|
-
/* @__PURE__ */ (0,
|
|
607
|
-
/* @__PURE__ */ (0,
|
|
608
|
-
(label != null || description != null) && /* @__PURE__ */ (0,
|
|
609
|
-
label != null && /* @__PURE__ */ (0,
|
|
610
|
-
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 })
|
|
611
637
|
] })
|
|
612
638
|
] })
|
|
613
639
|
] });
|
|
@@ -615,7 +641,7 @@ var Toggle = (0, import_react4.forwardRef)(function Toggle2({ size = "medium", l
|
|
|
615
641
|
|
|
616
642
|
// src/components/AppNav/AppNav.tsx
|
|
617
643
|
var import_react5 = require("react");
|
|
618
|
-
var
|
|
644
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
619
645
|
function AppNav({
|
|
620
646
|
logo,
|
|
621
647
|
actions,
|
|
@@ -647,9 +673,9 @@ function AppNav({
|
|
|
647
673
|
};
|
|
648
674
|
}, [open]);
|
|
649
675
|
const classes = ["fds-app-nav", className].filter(Boolean).join(" ");
|
|
650
|
-
return /* @__PURE__ */ (0,
|
|
651
|
-
/* @__PURE__ */ (0,
|
|
652
|
-
/* @__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)(
|
|
653
679
|
"div",
|
|
654
680
|
{
|
|
655
681
|
id: linksId,
|
|
@@ -661,8 +687,8 @@ function AppNav({
|
|
|
661
687
|
children
|
|
662
688
|
}
|
|
663
689
|
),
|
|
664
|
-
actions != null && /* @__PURE__ */ (0,
|
|
665
|
-
/* @__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)(
|
|
666
692
|
"button",
|
|
667
693
|
{
|
|
668
694
|
ref: toggleRef,
|
|
@@ -672,22 +698,22 @@ function AppNav({
|
|
|
672
698
|
"aria-expanded": open,
|
|
673
699
|
"aria-controls": linksId,
|
|
674
700
|
onClick: () => setOpen((v) => !v),
|
|
675
|
-
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" }) })
|
|
676
702
|
}
|
|
677
703
|
)
|
|
678
704
|
] });
|
|
679
705
|
}
|
|
680
706
|
|
|
681
707
|
// src/components/TabNav/TabNav.tsx
|
|
682
|
-
var
|
|
708
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
683
709
|
function TabNav({ children, className, ...rest }) {
|
|
684
710
|
const classes = ["fds-tab-nav", className].filter(Boolean).join(" ");
|
|
685
|
-
return /* @__PURE__ */ (0,
|
|
711
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("nav", { className: classes, ...rest, children });
|
|
686
712
|
}
|
|
687
713
|
|
|
688
714
|
// src/components/SettingsSection/SettingsSection.tsx
|
|
689
715
|
var import_react6 = require("react");
|
|
690
|
-
var
|
|
716
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
691
717
|
function SettingsSection({
|
|
692
718
|
title,
|
|
693
719
|
description,
|
|
@@ -697,19 +723,19 @@ function SettingsSection({
|
|
|
697
723
|
}) {
|
|
698
724
|
const titleId = (0, import_react6.useId)();
|
|
699
725
|
const classes = ["fds-settings-section", className].filter(Boolean).join(" ");
|
|
700
|
-
return /* @__PURE__ */ (0,
|
|
701
|
-
/* @__PURE__ */ (0,
|
|
702
|
-
/* @__PURE__ */ (0,
|
|
703
|
-
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 })
|
|
704
730
|
] }),
|
|
705
|
-
/* @__PURE__ */ (0,
|
|
731
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fds-settings-section__body", children })
|
|
706
732
|
] });
|
|
707
733
|
}
|
|
708
734
|
|
|
709
735
|
// src/components/Modal/Modal.tsx
|
|
710
736
|
var import_react7 = require("react");
|
|
711
737
|
var import_react_dom = require("react-dom");
|
|
712
|
-
var
|
|
738
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
713
739
|
var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
714
740
|
function Modal({
|
|
715
741
|
open,
|
|
@@ -771,14 +797,14 @@ function Modal({
|
|
|
771
797
|
if (!open || typeof document === "undefined") return null;
|
|
772
798
|
const classes = ["fds-modal", `fds-modal--${size}`, tone === "danger" && "fds-modal--danger", className].filter(Boolean).join(" ");
|
|
773
799
|
return (0, import_react_dom.createPortal)(
|
|
774
|
-
/* @__PURE__ */ (0,
|
|
800
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
775
801
|
"div",
|
|
776
802
|
{
|
|
777
803
|
className: "fds-modal__scrim",
|
|
778
804
|
onMouseDown: (e) => {
|
|
779
805
|
if (e.target === e.currentTarget && dismissible) onClose();
|
|
780
806
|
},
|
|
781
|
-
children: /* @__PURE__ */ (0,
|
|
807
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
782
808
|
"div",
|
|
783
809
|
{
|
|
784
810
|
ref: dialogRef,
|
|
@@ -789,7 +815,7 @@ function Modal({
|
|
|
789
815
|
"aria-describedby": description != null ? descriptionId : void 0,
|
|
790
816
|
tabIndex: -1,
|
|
791
817
|
children: [
|
|
792
|
-
/* @__PURE__ */ (0,
|
|
818
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
793
819
|
"button",
|
|
794
820
|
{
|
|
795
821
|
type: "button",
|
|
@@ -797,18 +823,18 @@ function Modal({
|
|
|
797
823
|
onClick: onClose,
|
|
798
824
|
disabled: !dismissible,
|
|
799
825
|
"aria-label": "Close",
|
|
800
|
-
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" }) })
|
|
801
827
|
}
|
|
802
828
|
),
|
|
803
|
-
tone === "danger" && /* @__PURE__ */ (0,
|
|
804
|
-
/* @__PURE__ */ (0,
|
|
805
|
-
/* @__PURE__ */ (0,
|
|
806
|
-
/* @__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" })
|
|
807
833
|
] }) }),
|
|
808
|
-
/* @__PURE__ */ (0,
|
|
809
|
-
description != null && /* @__PURE__ */ (0,
|
|
810
|
-
children != null && /* @__PURE__ */ (0,
|
|
811
|
-
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 })
|
|
812
838
|
]
|
|
813
839
|
}
|
|
814
840
|
)
|
|
@@ -820,7 +846,7 @@ function Modal({
|
|
|
820
846
|
|
|
821
847
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
822
848
|
var import_react8 = require("react");
|
|
823
|
-
var
|
|
849
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
824
850
|
function SegmentedControl({
|
|
825
851
|
options,
|
|
826
852
|
value,
|
|
@@ -843,9 +869,9 @@ function SegmentedControl({
|
|
|
843
869
|
refs.current[next]?.focus();
|
|
844
870
|
};
|
|
845
871
|
const classes = ["fds-segmented", className].filter(Boolean).join(" ");
|
|
846
|
-
return /* @__PURE__ */ (0,
|
|
872
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { role: "tablist", "aria-label": ariaLabel, className: classes, children: options.map((option, i) => {
|
|
847
873
|
const selected = option.value === value;
|
|
848
|
-
return /* @__PURE__ */ (0,
|
|
874
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
849
875
|
"button",
|
|
850
876
|
{
|
|
851
877
|
ref: (el) => {
|
|
@@ -862,7 +888,7 @@ function SegmentedControl({
|
|
|
862
888
|
onKeyDown: (e) => onKeyDown(e, i),
|
|
863
889
|
children: [
|
|
864
890
|
option.label,
|
|
865
|
-
option.count != null && /* @__PURE__ */ (0,
|
|
891
|
+
option.count != null && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "fds-segmented__count", children: option.count })
|
|
866
892
|
]
|
|
867
893
|
},
|
|
868
894
|
option.value
|
|
@@ -882,7 +908,7 @@ var breakpoints = {
|
|
|
882
908
|
|
|
883
909
|
// src/components/Avatar/Avatar.tsx
|
|
884
910
|
var import_react9 = require("react");
|
|
885
|
-
var
|
|
911
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
886
912
|
function initialsFor(name) {
|
|
887
913
|
const words = name.trim().split(/[\s._@-]+/).filter(Boolean);
|
|
888
914
|
if (words.length === 0) return "?";
|
|
@@ -893,11 +919,11 @@ function Avatar({ name, src, size = "medium", className, ...rest }) {
|
|
|
893
919
|
const [failedSrc, setFailedSrc] = (0, import_react9.useState)(null);
|
|
894
920
|
const showImage = !!src && src !== failedSrc;
|
|
895
921
|
const classes = ["fds-avatar", `fds-avatar--${size}`, className].filter(Boolean).join(" ");
|
|
896
|
-
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) }) });
|
|
897
923
|
}
|
|
898
924
|
|
|
899
925
|
// src/components/SectionHeader/SectionHeader.tsx
|
|
900
|
-
var
|
|
926
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
901
927
|
function SectionHeader({
|
|
902
928
|
title,
|
|
903
929
|
description,
|
|
@@ -907,14 +933,14 @@ function SectionHeader({
|
|
|
907
933
|
...rest
|
|
908
934
|
}) {
|
|
909
935
|
const classes = ["fds-section-header", className].filter(Boolean).join(" ");
|
|
910
|
-
return /* @__PURE__ */ (0,
|
|
911
|
-
/* @__PURE__ */ (0,
|
|
912
|
-
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 })
|
|
913
939
|
] });
|
|
914
940
|
}
|
|
915
941
|
|
|
916
942
|
// src/components/Split/Split.tsx
|
|
917
|
-
var
|
|
943
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
918
944
|
function Split({
|
|
919
945
|
aside,
|
|
920
946
|
children,
|
|
@@ -931,47 +957,47 @@ function Split({
|
|
|
931
957
|
sticky && "fds-split--sticky",
|
|
932
958
|
className
|
|
933
959
|
].filter(Boolean).join(" ");
|
|
934
|
-
return /* @__PURE__ */ (0,
|
|
960
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
935
961
|
"div",
|
|
936
962
|
{
|
|
937
963
|
className: classes,
|
|
938
964
|
style: { "--fds-split-aside": asideWidth, ...style },
|
|
939
965
|
...rest,
|
|
940
966
|
children: [
|
|
941
|
-
/* @__PURE__ */ (0,
|
|
942
|
-
/* @__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 })
|
|
943
969
|
]
|
|
944
970
|
}
|
|
945
971
|
);
|
|
946
972
|
}
|
|
947
973
|
|
|
948
974
|
// src/components/Badge/Badge.tsx
|
|
949
|
-
var
|
|
975
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
950
976
|
function Badge({ tone = "neutral", icon, className, children, ...rest }) {
|
|
951
977
|
const classes = ["fds-badge", `fds-badge--${tone}`, className].filter(Boolean).join(" ");
|
|
952
|
-
return /* @__PURE__ */ (0,
|
|
953
|
-
icon != null && /* @__PURE__ */ (0,
|
|
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 }),
|
|
954
980
|
children
|
|
955
981
|
] });
|
|
956
982
|
}
|
|
957
983
|
|
|
958
984
|
// src/components/Tag/Tag.tsx
|
|
959
|
-
var
|
|
985
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
960
986
|
function Tag({ dot, className, children, ...rest }) {
|
|
961
|
-
return /* @__PURE__ */ (0,
|
|
962
|
-
dot && /* @__PURE__ */ (0,
|
|
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" }),
|
|
963
989
|
children
|
|
964
990
|
] });
|
|
965
991
|
}
|
|
966
992
|
|
|
967
993
|
// src/components/MultiSelect/MultiSelect.tsx
|
|
968
994
|
var import_react10 = require("react");
|
|
969
|
-
var
|
|
995
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
970
996
|
function ChevronIcon2() {
|
|
971
|
-
return /* @__PURE__ */ (0,
|
|
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" }) });
|
|
972
998
|
}
|
|
973
999
|
function CheckIcon2() {
|
|
974
|
-
return /* @__PURE__ */ (0,
|
|
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" }) });
|
|
975
1001
|
}
|
|
976
1002
|
function MultiSelect({
|
|
977
1003
|
label,
|
|
@@ -1045,8 +1071,8 @@ function MultiSelect({
|
|
|
1045
1071
|
}
|
|
1046
1072
|
};
|
|
1047
1073
|
const triggerClasses = ["fds-multiselect__trigger", open ? "fds-multiselect__trigger--open" : ""].filter(Boolean).join(" ");
|
|
1048
|
-
return /* @__PURE__ */ (0,
|
|
1049
|
-
/* @__PURE__ */ (0,
|
|
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)(
|
|
1050
1076
|
"button",
|
|
1051
1077
|
{
|
|
1052
1078
|
type: "button",
|
|
@@ -1060,18 +1086,18 @@ function MultiSelect({
|
|
|
1060
1086
|
onClick: () => setOpen((o) => !o),
|
|
1061
1087
|
onKeyDown: onTriggerKeyDown,
|
|
1062
1088
|
children: [
|
|
1063
|
-
/* @__PURE__ */ (0,
|
|
1064
|
-
value.length > 0 && /* @__PURE__ */ (0,
|
|
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: [
|
|
1065
1091
|
value.length,
|
|
1066
1092
|
"/",
|
|
1067
1093
|
options.length
|
|
1068
1094
|
] }),
|
|
1069
|
-
/* @__PURE__ */ (0,
|
|
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, {}) })
|
|
1070
1096
|
]
|
|
1071
1097
|
}
|
|
1072
1098
|
),
|
|
1073
|
-
open && /* @__PURE__ */ (0,
|
|
1074
|
-
/* @__PURE__ */ (0,
|
|
1099
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fds-multiselect__popover", children: [
|
|
1100
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1075
1101
|
"div",
|
|
1076
1102
|
{
|
|
1077
1103
|
ref: listRef,
|
|
@@ -1085,7 +1111,7 @@ function MultiSelect({
|
|
|
1085
1111
|
onKeyDown: onListKeyDown,
|
|
1086
1112
|
children: options.map((o, i) => {
|
|
1087
1113
|
const checked = selected.has(o.value);
|
|
1088
|
-
return /* @__PURE__ */ (0,
|
|
1114
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1089
1115
|
"div",
|
|
1090
1116
|
{
|
|
1091
1117
|
id: `${listId}-opt-${i}`,
|
|
@@ -1101,10 +1127,10 @@ function MultiSelect({
|
|
|
1101
1127
|
onMouseDown: (e) => e.preventDefault(),
|
|
1102
1128
|
onClick: () => toggle(o),
|
|
1103
1129
|
children: [
|
|
1104
|
-
/* @__PURE__ */ (0,
|
|
1105
|
-
o.dot && /* @__PURE__ */ (0,
|
|
1106
|
-
/* @__PURE__ */ (0,
|
|
1107
|
-
o.count != null && /* @__PURE__ */ (0,
|
|
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 })
|
|
1108
1134
|
]
|
|
1109
1135
|
},
|
|
1110
1136
|
o.value
|
|
@@ -1112,9 +1138,9 @@ function MultiSelect({
|
|
|
1112
1138
|
})
|
|
1113
1139
|
}
|
|
1114
1140
|
),
|
|
1115
|
-
/* @__PURE__ */ (0,
|
|
1116
|
-
/* @__PURE__ */ (0,
|
|
1117
|
-
/* @__PURE__ */ (0,
|
|
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 })
|
|
1118
1144
|
] })
|
|
1119
1145
|
] })
|
|
1120
1146
|
] });
|
|
@@ -1122,21 +1148,21 @@ function MultiSelect({
|
|
|
1122
1148
|
|
|
1123
1149
|
// src/components/SearchInput/SearchInput.tsx
|
|
1124
1150
|
var import_react11 = require("react");
|
|
1125
|
-
var
|
|
1151
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1126
1152
|
var SearchInput = (0, import_react11.forwardRef)(function SearchInput2({ shortcut, containerClassName, className, value, ...rest }, ref) {
|
|
1127
1153
|
const empty = value === void 0 || value === "";
|
|
1128
|
-
return /* @__PURE__ */ (0,
|
|
1129
|
-
/* @__PURE__ */ (0,
|
|
1130
|
-
/* @__PURE__ */ (0,
|
|
1131
|
-
/* @__PURE__ */ (0,
|
|
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" })
|
|
1132
1158
|
] }),
|
|
1133
|
-
/* @__PURE__ */ (0,
|
|
1134
|
-
shortcut && empty && /* @__PURE__ */ (0,
|
|
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 })
|
|
1135
1161
|
] });
|
|
1136
1162
|
});
|
|
1137
1163
|
|
|
1138
1164
|
// src/components/Pagination/Pagination.tsx
|
|
1139
|
-
var
|
|
1165
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1140
1166
|
function pageItems(page, pageCount) {
|
|
1141
1167
|
if (pageCount <= 7) return Array.from({ length: pageCount }, (_, i) => i + 1);
|
|
1142
1168
|
const start = Math.max(2, Math.min(page - 1, pageCount - 4));
|
|
@@ -1149,7 +1175,7 @@ function pageItems(page, pageCount) {
|
|
|
1149
1175
|
return items;
|
|
1150
1176
|
}
|
|
1151
1177
|
function Arrow2({ dir }) {
|
|
1152
|
-
return /* @__PURE__ */ (0,
|
|
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" }) });
|
|
1153
1179
|
}
|
|
1154
1180
|
function Pagination({ page, pageCount, onPageChange, total, pageSize, variant = "full", className }) {
|
|
1155
1181
|
if (pageCount <= 1) return null;
|
|
@@ -1159,8 +1185,8 @@ function Pagination({ page, pageCount, onPageChange, total, pageSize, variant =
|
|
|
1159
1185
|
const showRange = variant === "full" && total != null && pageSize != null;
|
|
1160
1186
|
const from = (page - 1) * (pageSize ?? 0) + 1;
|
|
1161
1187
|
const to = Math.min(page * (pageSize ?? 0), total ?? 0);
|
|
1162
|
-
return /* @__PURE__ */ (0,
|
|
1163
|
-
showRange && /* @__PURE__ */ (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: [
|
|
1164
1190
|
"Showing ",
|
|
1165
1191
|
from,
|
|
1166
1192
|
"\u2013",
|
|
@@ -1168,15 +1194,15 @@ function Pagination({ page, pageCount, onPageChange, total, pageSize, variant =
|
|
|
1168
1194
|
" of ",
|
|
1169
1195
|
total
|
|
1170
1196
|
] }),
|
|
1171
|
-
/* @__PURE__ */ (0,
|
|
1172
|
-
/* @__PURE__ */ (0,
|
|
1173
|
-
variant === "compact" ? /* @__PURE__ */ (0,
|
|
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: [
|
|
1174
1200
|
"Page ",
|
|
1175
1201
|
page,
|
|
1176
1202
|
" of ",
|
|
1177
1203
|
pageCount
|
|
1178
1204
|
] }) : pageItems(page, pageCount).map(
|
|
1179
|
-
(p, i) => p === null ? /* @__PURE__ */ (0,
|
|
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)(
|
|
1180
1206
|
"button",
|
|
1181
1207
|
{
|
|
1182
1208
|
type: "button",
|
|
@@ -1189,54 +1215,80 @@ function Pagination({ page, pageCount, onPageChange, total, pageSize, variant =
|
|
|
1189
1215
|
p
|
|
1190
1216
|
)
|
|
1191
1217
|
),
|
|
1192
|
-
/* @__PURE__ */ (0,
|
|
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" }) })
|
|
1193
1219
|
] })
|
|
1194
1220
|
] });
|
|
1195
1221
|
}
|
|
1196
1222
|
|
|
1197
1223
|
// src/components/EmptyState/EmptyState.tsx
|
|
1198
|
-
var
|
|
1224
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1199
1225
|
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,
|
|
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 })
|
|
1205
1231
|
] }),
|
|
1206
|
-
(action != null || footer != null) && /* @__PURE__ */ (0,
|
|
1232
|
+
(action != null || footer != null) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fds-empty__actions", children: [
|
|
1207
1233
|
action,
|
|
1208
|
-
footer != null && /* @__PURE__ */ (0,
|
|
1234
|
+
footer != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fds-empty__footer", children: footer })
|
|
1209
1235
|
] })
|
|
1210
1236
|
] });
|
|
1211
1237
|
}
|
|
1212
1238
|
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,
|
|
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", {})
|
|
1220
1246
|
] }),
|
|
1221
|
-
/* @__PURE__ */ (0,
|
|
1222
|
-
/* @__PURE__ */ (0,
|
|
1223
|
-
/* @__PURE__ */ (0,
|
|
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" })
|
|
1224
1250
|
] })
|
|
1225
1251
|
] }),
|
|
1226
|
-
/* @__PURE__ */ (0,
|
|
1227
|
-
/* @__PURE__ */ (0,
|
|
1228
|
-
/* @__PURE__ */ (0,
|
|
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" })
|
|
1229
1255
|
] }) })
|
|
1230
1256
|
] });
|
|
1231
1257
|
}
|
|
1232
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
|
+
|
|
1233
1285
|
// src/components/Skeleton/Skeleton.tsx
|
|
1234
|
-
var
|
|
1286
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1235
1287
|
var px = (v) => typeof v === "number" ? `${v}px` : v;
|
|
1236
1288
|
function Skeleton({ shape = "rect", width, height, lines = 1, className, style, ...rest }) {
|
|
1237
1289
|
const classes = ["fds-skeleton", `fds-skeleton--${shape}`, className].filter(Boolean).join(" ");
|
|
1238
1290
|
if (shape === "text" && lines > 1) {
|
|
1239
|
-
return /* @__PURE__ */ (0,
|
|
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)(
|
|
1240
1292
|
"span",
|
|
1241
1293
|
{
|
|
1242
1294
|
className: classes,
|
|
@@ -1247,10 +1299,10 @@ function Skeleton({ shape = "rect", width, height, lines = 1, className, style,
|
|
|
1247
1299
|
)) });
|
|
1248
1300
|
}
|
|
1249
1301
|
const size = shape === "circle" ? { width: px(width ?? height ?? 16), height: px(height ?? width ?? 16) } : { width: px(width), height: px(height) };
|
|
1250
|
-
return /* @__PURE__ */ (0,
|
|
1302
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: classes, style: { ...size, ...style }, "aria-hidden": "true", ...rest });
|
|
1251
1303
|
}
|
|
1252
1304
|
function SkeletonGroup({ label = "Loading", className, children, ...rest }) {
|
|
1253
|
-
return /* @__PURE__ */ (0,
|
|
1305
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { role: "status", "aria-busy": "true", "aria-label": label, className, ...rest, children });
|
|
1254
1306
|
}
|
|
1255
1307
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1256
1308
|
0 && (module.exports = {
|
|
@@ -1258,6 +1310,8 @@ function SkeletonGroup({ label = "Loading", className, children, ...rest }) {
|
|
|
1258
1310
|
Avatar,
|
|
1259
1311
|
Badge,
|
|
1260
1312
|
Button,
|
|
1313
|
+
ButtonLink,
|
|
1314
|
+
Callout,
|
|
1261
1315
|
DiffPropertyList,
|
|
1262
1316
|
DiffSection,
|
|
1263
1317
|
EmptyState,
|