@vygruppen/spor-react 11.3.2 → 11.3.4
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/.turbo/turbo-build.log +8 -8
- package/CHANGELOG.md +12 -0
- package/dist/index.js +415 -417
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +352 -354
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
- package/src/input/Checkbox.tsx +1 -3
package/dist/index.js
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
|
3
3
|
var tokens12 = require('@vygruppen/spor-design-tokens');
|
4
4
|
var react = require('@chakra-ui/react');
|
5
|
-
var
|
5
|
+
var React85 = require('react');
|
6
6
|
var sporIconReact = require('@vygruppen/spor-icon-react');
|
7
7
|
var reactAria = require('react-aria');
|
8
8
|
var reactStately = require('react-stately');
|
@@ -43,7 +43,7 @@ function _interopNamespace(e) {
|
|
43
43
|
}
|
44
44
|
|
45
45
|
var tokens12__namespace = /*#__PURE__*/_interopNamespace(tokens12);
|
46
|
-
var
|
46
|
+
var React85__namespace = /*#__PURE__*/_interopNamespace(React85);
|
47
47
|
var deepmerge__default = /*#__PURE__*/_interopDefault(deepmerge);
|
48
48
|
|
49
49
|
var __defProp = Object.defineProperty;
|
@@ -52,11 +52,11 @@ var __export = (target, all) => {
|
|
52
52
|
__defProp(target, name, { get: all[name], enumerable: true });
|
53
53
|
};
|
54
54
|
var Divider = react.forwardRef((props, ref) => {
|
55
|
-
return /* @__PURE__ */
|
55
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Divider, { ...props, ref });
|
56
56
|
});
|
57
57
|
var Stack = react.forwardRef(
|
58
58
|
({ flexDirection, ...props }, ref) => {
|
59
|
-
return /* @__PURE__ */
|
59
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Stack, { ...props, direction: flexDirection, ref });
|
60
60
|
}
|
61
61
|
);
|
62
62
|
var AttachedInputs = ({
|
@@ -88,7 +88,7 @@ var AttachedInputs = ({
|
|
88
88
|
}
|
89
89
|
};
|
90
90
|
const direction = flexDirection === "row" ? "horizontal" : "vertical";
|
91
|
-
return /* @__PURE__ */
|
91
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
92
92
|
react.Flex,
|
93
93
|
{
|
94
94
|
role: "group",
|
@@ -100,11 +100,11 @@ var AttachedInputs = ({
|
|
100
100
|
);
|
101
101
|
};
|
102
102
|
var Dialog = ({ title, children, ...props }) => {
|
103
|
-
const ref =
|
103
|
+
const ref = React85.useRef(null);
|
104
104
|
const { dialogProps, titleProps } = reactAria.useDialog(props, ref);
|
105
|
-
return /* @__PURE__ */
|
105
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { ...dialogProps, ref, outline: "none" }, title && /* @__PURE__ */ React85__namespace.default.createElement(react.Heading, { as: "h3", ...titleProps }, title), children);
|
106
106
|
};
|
107
|
-
var Popover =
|
107
|
+
var Popover = React85.forwardRef(
|
108
108
|
({
|
109
109
|
children,
|
110
110
|
state,
|
@@ -118,7 +118,7 @@ var Popover = React86.forwardRef(
|
|
118
118
|
containerPadding = 12
|
119
119
|
}, ref) => {
|
120
120
|
var _a;
|
121
|
-
const internalRef =
|
121
|
+
const internalRef = React85.useRef(null);
|
122
122
|
const popoverRef = ref ?? internalRef;
|
123
123
|
const { popoverProps, underlayProps } = reactAria.usePopover(
|
124
124
|
{
|
@@ -133,21 +133,21 @@ var Popover = React86.forwardRef(
|
|
133
133
|
},
|
134
134
|
state
|
135
135
|
);
|
136
|
-
const popoverBox = /* @__PURE__ */
|
136
|
+
const popoverBox = /* @__PURE__ */ React85__namespace.default.createElement(
|
137
137
|
react.Box,
|
138
138
|
{
|
139
139
|
...popoverProps,
|
140
140
|
ref: popoverRef,
|
141
141
|
minWidth: ((_a = triggerRef.current) == null ? void 0 : _a.clientWidth) ?? "auto"
|
142
142
|
},
|
143
|
-
/* @__PURE__ */
|
143
|
+
/* @__PURE__ */ React85__namespace.default.createElement(reactAria.DismissButton, { onDismiss: state.close }),
|
144
144
|
children,
|
145
|
-
/* @__PURE__ */
|
145
|
+
/* @__PURE__ */ React85__namespace.default.createElement(reactAria.DismissButton, { onDismiss: state.close })
|
146
146
|
);
|
147
147
|
if (isNonModal) {
|
148
148
|
return popoverBox;
|
149
149
|
}
|
150
|
-
return /* @__PURE__ */
|
150
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(reactAria.Overlay, null, hasBackdrop && /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { ...underlayProps, position: "fixed", inset: "0" }), popoverBox);
|
151
151
|
}
|
152
152
|
);
|
153
153
|
|
@@ -170,7 +170,7 @@ var CardSelect = react.forwardRef(
|
|
170
170
|
}, externalRef) => {
|
171
171
|
var _a;
|
172
172
|
const label = "label" in props ? props.label : props["aria-label"];
|
173
|
-
const internalRef =
|
173
|
+
const internalRef = React85.useRef(null);
|
174
174
|
const triggerRef = externalRef ?? internalRef;
|
175
175
|
const state = reactStately.useOverlayTriggerState({
|
176
176
|
isOpen: externalIsOpen,
|
@@ -189,7 +189,7 @@ var CardSelect = react.forwardRef(
|
|
189
189
|
});
|
190
190
|
useForceRerender(state.isOpen);
|
191
191
|
const ChevronIcon = size === "sm" ? sporIconReact.DropdownDownFill18Icon : sporIconReact.DropdownDownFill24Icon;
|
192
|
-
return /* @__PURE__ */
|
192
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { ...props }, /* @__PURE__ */ React85__namespace.default.createElement(
|
193
193
|
react.chakra.button,
|
194
194
|
{
|
195
195
|
type: "button",
|
@@ -200,13 +200,13 @@ var CardSelect = react.forwardRef(
|
|
200
200
|
width,
|
201
201
|
"data-attachable": true
|
202
202
|
},
|
203
|
-
/* @__PURE__ */
|
203
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { as: "span", display: props["aria-label"] ? "none" : "inline" }, label), withChevron ? /* @__PURE__ */ React85__namespace.default.createElement(
|
204
204
|
ChevronIcon,
|
205
205
|
{
|
206
206
|
transform: state.isOpen ? "rotate(180deg)" : "none"
|
207
207
|
}
|
208
208
|
) : null)
|
209
|
-
), state.isOpen && /* @__PURE__ */
|
209
|
+
), state.isOpen && /* @__PURE__ */ React85__namespace.default.createElement(
|
210
210
|
Popover,
|
211
211
|
{
|
212
212
|
state,
|
@@ -216,7 +216,7 @@ var CardSelect = react.forwardRef(
|
|
216
216
|
placement,
|
217
217
|
containerPadding: 0
|
218
218
|
},
|
219
|
-
/* @__PURE__ */
|
219
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
220
220
|
StaticCard,
|
221
221
|
{
|
222
222
|
colorScheme: "white",
|
@@ -228,28 +228,26 @@ var CardSelect = react.forwardRef(
|
|
228
228
|
...overlayProps,
|
229
229
|
maxWidth: (((_a = triggerRef.current) == null ? void 0 : _a.clientWidth) ?? 1) * 2
|
230
230
|
},
|
231
|
-
/* @__PURE__ */
|
231
|
+
/* @__PURE__ */ React85__namespace.default.createElement(Dialog, { "aria-label": label }, children)
|
232
232
|
)
|
233
233
|
));
|
234
234
|
}
|
235
235
|
);
|
236
236
|
function useForceRerender(shouldRerender) {
|
237
|
-
const [_, update] =
|
238
|
-
|
237
|
+
const [_, update] = React85.useState(false);
|
238
|
+
React85.useEffect(() => {
|
239
239
|
if (shouldRerender) {
|
240
240
|
update((x) => !x);
|
241
241
|
}
|
242
242
|
}, [shouldRerender]);
|
243
243
|
}
|
244
|
-
var Checkbox = react.
|
245
|
-
return /* @__PURE__ */ React86__namespace.default.createElement(react.Checkbox, { ...props, ref });
|
246
|
-
});
|
244
|
+
var Checkbox = react.Checkbox;
|
247
245
|
var CheckboxGroup = ({
|
248
246
|
direction = "row",
|
249
247
|
children,
|
250
248
|
...props
|
251
249
|
}) => {
|
252
|
-
return /* @__PURE__ */
|
250
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.CheckboxGroup, { ...props }, /* @__PURE__ */ React85__namespace.default.createElement(react.Stack, { direction }, children));
|
253
251
|
};
|
254
252
|
var ChoiceChip = react.forwardRef(
|
255
253
|
({
|
@@ -275,15 +273,15 @@ var ChoiceChip = react.forwardRef(
|
|
275
273
|
icon,
|
276
274
|
hasLabel: chipType !== "icon"
|
277
275
|
});
|
278
|
-
const id = `choice-chip-${
|
279
|
-
return /* @__PURE__ */
|
276
|
+
const id = `choice-chip-${React85.useId()}`;
|
277
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
280
278
|
react.chakra.label,
|
281
279
|
{
|
282
280
|
...getRootProps(),
|
283
281
|
htmlFor: id,
|
284
282
|
"aria-label": String(children)
|
285
283
|
},
|
286
|
-
/* @__PURE__ */
|
284
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
287
285
|
react.chakra.input,
|
288
286
|
{
|
289
287
|
...getInputProps({}, ref),
|
@@ -291,7 +289,7 @@ var ChoiceChip = react.forwardRef(
|
|
291
289
|
disabled: isDisabled || state.isDisabled
|
292
290
|
}
|
293
291
|
),
|
294
|
-
/* @__PURE__ */
|
292
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
295
293
|
react.chakra.div,
|
296
294
|
{
|
297
295
|
...getLabelProps(),
|
@@ -302,9 +300,9 @@ var ChoiceChip = react.forwardRef(
|
|
302
300
|
"data-active": utils.dataAttr(state.isActive),
|
303
301
|
"data-disabled": utils.dataAttr(isDisabled || state.isDisabled)
|
304
302
|
},
|
305
|
-
icon && /* @__PURE__ */
|
306
|
-
chipType !== "icon" && /* @__PURE__ */
|
307
|
-
chipType === "filter" && state.isChecked && /* @__PURE__ */
|
303
|
+
icon && /* @__PURE__ */ React85__namespace.default.createElement(react.chakra.span, { __css: styles2.icon }, state.isChecked ? icon.checked : icon.default),
|
304
|
+
chipType !== "icon" && /* @__PURE__ */ React85__namespace.default.createElement(react.chakra.span, { __css: styles2.label, ...getCheckboxProps() }, children),
|
305
|
+
chipType === "filter" && state.isChecked && /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.CloseOutline24Icon, { marginLeft: 1.5 })
|
308
306
|
)
|
309
307
|
);
|
310
308
|
}
|
@@ -337,11 +335,11 @@ function Combobox({
|
|
337
335
|
...rest
|
338
336
|
}) {
|
339
337
|
const { contains } = reactAria.useFilter({ sensitivity: "base" });
|
340
|
-
const fallbackInputRef =
|
338
|
+
const fallbackInputRef = React85.useRef(null);
|
341
339
|
const inputRef = externalInputRef ?? fallbackInputRef;
|
342
|
-
const listBoxRef =
|
343
|
-
const popoverRef =
|
344
|
-
const listboxId = `${
|
340
|
+
const listBoxRef = React85.useRef(null);
|
341
|
+
const popoverRef = React85.useRef(null);
|
342
|
+
const listboxId = `${React85.useId()}-listbox`;
|
345
343
|
const inputWidth = useInputWidth(inputRef);
|
346
344
|
const state = reactStately.useComboBoxState({
|
347
345
|
allowsEmptyCollection: Boolean(emptyContent),
|
@@ -379,7 +377,7 @@ function Combobox({
|
|
379
377
|
},
|
380
378
|
state
|
381
379
|
);
|
382
|
-
return /* @__PURE__ */
|
380
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(React85__namespace.default.Fragment, null, /* @__PURE__ */ React85__namespace.default.createElement(
|
383
381
|
Input,
|
384
382
|
{
|
385
383
|
...styleProps(comboBoxProps),
|
@@ -394,7 +392,7 @@ function Combobox({
|
|
394
392
|
borderBottomLeftRadius: state.isOpen && !isLoading ? 0 : borderBottomLeftRadius,
|
395
393
|
borderBottomRightRadius: state.isOpen && !isLoading ? 0 : borderBottomRightRadius,
|
396
394
|
...inputProps,
|
397
|
-
rightIcon: isLoading ? /* @__PURE__ */
|
395
|
+
rightIcon: isLoading ? /* @__PURE__ */ React85__namespace.default.createElement(
|
398
396
|
ColorSpinner,
|
399
397
|
{
|
400
398
|
width: "1.5rem",
|
@@ -409,7 +407,7 @@ function Combobox({
|
|
409
407
|
}
|
410
408
|
) : rightIcon
|
411
409
|
}
|
412
|
-
), /* @__PURE__ */
|
410
|
+
), /* @__PURE__ */ React85__namespace.default.createElement("span", { "aria-hidden": "true", "data-trigger": "multiselect" }), state.isOpen && !isLoading && /* @__PURE__ */ React85__namespace.default.createElement(
|
413
411
|
Popover,
|
414
412
|
{
|
415
413
|
state,
|
@@ -421,7 +419,7 @@ function Combobox({
|
|
421
419
|
hasBackdrop: false,
|
422
420
|
containerPadding: 0
|
423
421
|
},
|
424
|
-
/* @__PURE__ */
|
422
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
425
423
|
ListBox,
|
426
424
|
{
|
427
425
|
...listBoxProps,
|
@@ -437,8 +435,8 @@ function Combobox({
|
|
437
435
|
));
|
438
436
|
}
|
439
437
|
var useInputWidth = (inputRef) => {
|
440
|
-
const [inputWidth, setInputWidth] =
|
441
|
-
|
438
|
+
const [inputWidth, setInputWidth] = React85.useState("auto");
|
439
|
+
React85.useEffect(() => {
|
442
440
|
const onResize = debounce(() => {
|
443
441
|
if (inputRef.current) {
|
444
442
|
setInputWidth(`${inputRef.current.offsetWidth}px`);
|
@@ -465,7 +463,7 @@ var debounce = (fn, ms = 100) => {
|
|
465
463
|
};
|
466
464
|
};
|
467
465
|
var FormControl = react.forwardRef((props, ref) => {
|
468
|
-
return /* @__PURE__ */
|
466
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.FormControl, { ...props, ref });
|
469
467
|
});
|
470
468
|
var FormErrorMessage = ({
|
471
469
|
children,
|
@@ -481,7 +479,7 @@ var FormErrorMessage = ({
|
|
481
479
|
return null;
|
482
480
|
}
|
483
481
|
const { ref, ...errorMessageProps } = formControlContext.getErrorMessageProps();
|
484
|
-
return /* @__PURE__ */
|
482
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { position: "relative", ref }, /* @__PURE__ */ React85__namespace.default.createElement(
|
485
483
|
react.Box,
|
486
484
|
{
|
487
485
|
borderRadius: "xs",
|
@@ -499,12 +497,12 @@ var FormErrorMessage = ({
|
|
499
497
|
...errorMessageProps,
|
500
498
|
...boxProps
|
501
499
|
},
|
502
|
-
/* @__PURE__ */
|
500
|
+
/* @__PURE__ */ React85__namespace.default.createElement(Arrow, { position: "absolute", top: "-0.25em", left: "1em" }),
|
503
501
|
children
|
504
502
|
));
|
505
503
|
};
|
506
504
|
var Arrow = (props) => {
|
507
|
-
return /* @__PURE__ */
|
505
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
508
506
|
react.Box,
|
509
507
|
{
|
510
508
|
...props,
|
@@ -515,7 +513,7 @@ var Arrow = (props) => {
|
|
515
513
|
fill: "none",
|
516
514
|
transform: "rotate(45deg)"
|
517
515
|
},
|
518
|
-
/* @__PURE__ */
|
516
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
519
517
|
react.Box,
|
520
518
|
{
|
521
519
|
as: "path",
|
@@ -526,7 +524,7 @@ var Arrow = (props) => {
|
|
526
524
|
);
|
527
525
|
};
|
528
526
|
var FormLabel = react.forwardRef((props, ref) => {
|
529
|
-
return /* @__PURE__ */
|
527
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.FormLabel, { ...props, ref });
|
530
528
|
});
|
531
529
|
function ListBox({
|
532
530
|
isLoading,
|
@@ -538,7 +536,7 @@ function ListBox({
|
|
538
536
|
}) {
|
539
537
|
const { listBoxProps } = reactAria.useListBox(props, state, listBoxRef);
|
540
538
|
const styles2 = react.useMultiStyleConfig("ListBox", { variant });
|
541
|
-
return /* @__PURE__ */
|
539
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
542
540
|
react.List,
|
543
541
|
{
|
544
542
|
...listBoxProps,
|
@@ -550,22 +548,22 @@ function ListBox({
|
|
550
548
|
},
|
551
549
|
state.collection.size === 0 && props.emptyContent,
|
552
550
|
Array.from(state.collection).map(
|
553
|
-
(item) => item.type === "section" ? /* @__PURE__ */
|
551
|
+
(item) => item.type === "section" ? /* @__PURE__ */ React85__namespace.default.createElement(ListBoxSection, { key: item.key, section: item, state }) : /* @__PURE__ */ React85__namespace.default.createElement(Option, { key: item.key, item, state })
|
554
552
|
)
|
555
553
|
);
|
556
554
|
}
|
557
555
|
function ItemLabel({ children }) {
|
558
556
|
let { labelProps } = useOptionContext();
|
559
557
|
const styles2 = react.useMultiStyleConfig("ListBox", {});
|
560
|
-
return /* @__PURE__ */
|
558
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { ...labelProps, sx: styles2.label }, children);
|
561
559
|
}
|
562
560
|
function ItemDescription({ children }) {
|
563
561
|
let { descriptionProps } = useOptionContext();
|
564
562
|
const styles2 = react.useMultiStyleConfig("ListBox", {});
|
565
|
-
return /* @__PURE__ */
|
563
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { ...descriptionProps, sx: styles2.description }, children);
|
566
564
|
}
|
567
565
|
function Option({ item, state }) {
|
568
|
-
const ref =
|
566
|
+
const ref = React85.useRef(null);
|
569
567
|
const {
|
570
568
|
optionProps,
|
571
569
|
isSelected,
|
@@ -589,7 +587,7 @@ function Option({ item, state }) {
|
|
589
587
|
if (isFocusVisible) {
|
590
588
|
dataFields["data-focus-visible"] = true;
|
591
589
|
}
|
592
|
-
|
590
|
+
React85.useEffect(() => {
|
593
591
|
var _a;
|
594
592
|
(_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.addEventListener(
|
595
593
|
"touchend",
|
@@ -599,14 +597,14 @@ function Option({ item, state }) {
|
|
599
597
|
{ passive: false, once: true }
|
600
598
|
);
|
601
599
|
}, []);
|
602
|
-
return /* @__PURE__ */
|
600
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(OptionContext.Provider, { value: { labelProps, descriptionProps } }, /* @__PURE__ */ React85__namespace.default.createElement(react.ListItem, { ...optionProps, ...dataFields, ref, sx: styles2.item }, item.rendered));
|
603
601
|
}
|
604
|
-
var OptionContext =
|
602
|
+
var OptionContext = React85__namespace.default.createContext({
|
605
603
|
labelProps: {},
|
606
604
|
descriptionProps: {}
|
607
605
|
});
|
608
606
|
var useOptionContext = () => {
|
609
|
-
return
|
607
|
+
return React85.useContext(OptionContext);
|
610
608
|
};
|
611
609
|
function ListBoxSection({ section, state }) {
|
612
610
|
const { itemProps, headingProps, groupProps } = reactAria.useListBoxSection({
|
@@ -615,7 +613,7 @@ function ListBoxSection({ section, state }) {
|
|
615
613
|
});
|
616
614
|
const isFirstSection = section.key === state.collection.getFirstKey();
|
617
615
|
const titleColor = react.useColorModeValue("darkGrey", "white");
|
618
|
-
return /* @__PURE__ */
|
616
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.ListItem, { ...itemProps }, section.rendered && /* @__PURE__ */ React85__namespace.default.createElement(
|
619
617
|
react.Box,
|
620
618
|
{
|
621
619
|
fontSize: "mobile.xs",
|
@@ -628,8 +626,8 @@ function ListBoxSection({ section, state }) {
|
|
628
626
|
...headingProps
|
629
627
|
},
|
630
628
|
section.rendered
|
631
|
-
), /* @__PURE__ */
|
632
|
-
(item) => /* @__PURE__ */
|
629
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(react.List, { ...groupProps, padding: 0, listStyleType: "none" }, Array.from(state.collection.getChildren(section.key)).map(
|
630
|
+
(item) => /* @__PURE__ */ React85__namespace.default.createElement(Option, { key: item.key, item, state })
|
633
631
|
)));
|
634
632
|
}
|
635
633
|
|
@@ -650,8 +648,8 @@ function InfoSelect({
|
|
650
648
|
...props
|
651
649
|
};
|
652
650
|
const state = reactStately.useSelectState(renamedProps);
|
653
|
-
const triggerRef =
|
654
|
-
const listboxRef =
|
651
|
+
const triggerRef = React85.useRef(null);
|
652
|
+
const listboxRef = React85.useRef(null);
|
655
653
|
const { labelProps, triggerProps, valueProps, menuProps } = reactAria.useSelect(
|
656
654
|
renamedProps,
|
657
655
|
state,
|
@@ -669,7 +667,7 @@ function InfoSelect({
|
|
669
667
|
const { buttonProps } = reactAria.useButton(triggerProps, triggerRef);
|
670
668
|
const { t } = useTranslation();
|
671
669
|
const formControl = react.useFormControlProps(props);
|
672
|
-
return /* @__PURE__ */
|
670
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { sx: styles2.container }, /* @__PURE__ */ React85__namespace.default.createElement(
|
673
671
|
reactAria.HiddenSelect,
|
674
672
|
{
|
675
673
|
state,
|
@@ -677,7 +675,7 @@ function InfoSelect({
|
|
677
675
|
label: props.label,
|
678
676
|
name: props.name
|
679
677
|
}
|
680
|
-
), /* @__PURE__ */
|
678
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
681
679
|
react.chakra.button,
|
682
680
|
{
|
683
681
|
type: "button",
|
@@ -688,7 +686,7 @@ function InfoSelect({
|
|
688
686
|
"aria-invalid": formControl.isInvalid,
|
689
687
|
"aria-describedby": formControl["aria-describedby"]
|
690
688
|
},
|
691
|
-
/* @__PURE__ */
|
689
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.chakra.div, { sx: styles2.innerButton }, /* @__PURE__ */ React85__namespace.default.createElement(
|
692
690
|
react.chakra.div,
|
693
691
|
{
|
694
692
|
...labelProps,
|
@@ -702,7 +700,7 @@ function InfoSelect({
|
|
702
700
|
}
|
703
701
|
},
|
704
702
|
props.label
|
705
|
-
), /* @__PURE__ */
|
703
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
706
704
|
react.Box,
|
707
705
|
{
|
708
706
|
...valueProps,
|
@@ -714,15 +712,15 @@ function InfoSelect({
|
|
714
712
|
},
|
715
713
|
state.selectedItem ? state.selectedItem.textValue ?? state.selectedItem.rendered : placeholder ?? t(texts.selectAnOption)
|
716
714
|
)),
|
717
|
-
/* @__PURE__ */
|
718
|
-
), state.isOpen && /* @__PURE__ */
|
715
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.Box, { sx: styles2.arrowIcon }, state.isOpen ? /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.DropdownUpFill24Icon, null) : /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.DropdownDownFill24Icon, null))
|
716
|
+
), state.isOpen && /* @__PURE__ */ React85__namespace.default.createElement(
|
719
717
|
Popover,
|
720
718
|
{
|
721
719
|
state,
|
722
720
|
triggerRef,
|
723
721
|
containerPadding: 0
|
724
722
|
},
|
725
|
-
/* @__PURE__ */
|
723
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
726
724
|
ListBox,
|
727
725
|
{
|
728
726
|
...menuProps,
|
@@ -746,10 +744,10 @@ var texts = createTexts({
|
|
746
744
|
var Input = react.forwardRef(
|
747
745
|
({ label, leftIcon, rightIcon, id, size, ...props }, ref) => {
|
748
746
|
const formControlProps = react.useFormControlContext();
|
749
|
-
const fallbackId = `input-${
|
747
|
+
const fallbackId = `input-${React85.useId()}`;
|
750
748
|
const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
|
751
|
-
const labelId = `${
|
752
|
-
return /* @__PURE__ */
|
749
|
+
const labelId = `${React85.useId()}-label`;
|
750
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React85__namespace.default.createElement(react.InputLeftElement, { pointerEvents: "none" }, leftIcon), /* @__PURE__ */ React85__namespace.default.createElement(
|
753
751
|
react.Input,
|
754
752
|
{
|
755
753
|
"data-attachable": true,
|
@@ -767,7 +765,7 @@ var Input = react.forwardRef(
|
|
767
765
|
}
|
768
766
|
}
|
769
767
|
}
|
770
|
-
), /* @__PURE__ */
|
768
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
771
769
|
react.FormLabel,
|
772
770
|
{
|
773
771
|
htmlFor: inputId,
|
@@ -790,19 +788,19 @@ var Input = react.forwardRef(
|
|
790
788
|
}
|
791
789
|
},
|
792
790
|
label
|
793
|
-
), rightIcon && /* @__PURE__ */
|
791
|
+
), rightIcon && /* @__PURE__ */ React85__namespace.default.createElement(react.InputRightElement, { pointerEvents: "none" }, rightIcon));
|
794
792
|
}
|
795
793
|
);
|
796
794
|
var InputLeftElement2 = react.forwardRef(
|
797
|
-
(props, ref) => /* @__PURE__ */
|
795
|
+
(props, ref) => /* @__PURE__ */ React85__namespace.default.createElement(react.InputLeftElement, { ...props, ref })
|
798
796
|
);
|
799
797
|
var InputRightElement2 = react.forwardRef(
|
800
|
-
(props, ref) => /* @__PURE__ */
|
798
|
+
(props, ref) => /* @__PURE__ */ React85__namespace.default.createElement(react.InputRightElement, { ...props, ref })
|
801
799
|
);
|
802
800
|
var NativeSelect = react.forwardRef(
|
803
801
|
({ label, ...props }, ref) => {
|
804
802
|
const styles2 = react.useMultiStyleConfig("Select", props);
|
805
|
-
return /* @__PURE__ */
|
803
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(FormControl, null, /* @__PURE__ */ React85__namespace.default.createElement(
|
806
804
|
react.Select,
|
807
805
|
{
|
808
806
|
"data-attachable": true,
|
@@ -810,7 +808,7 @@ var NativeSelect = react.forwardRef(
|
|
810
808
|
rootProps: { __css: styles2.root },
|
811
809
|
ref
|
812
810
|
}
|
813
|
-
), label && /* @__PURE__ */
|
811
|
+
), label && /* @__PURE__ */ React85__namespace.default.createElement(FormLabel, null, label));
|
814
812
|
}
|
815
813
|
);
|
816
814
|
function NumericStepper({
|
@@ -828,7 +826,7 @@ function NumericStepper({
|
|
828
826
|
ariaLabelContext = { singular: "", plural: "" },
|
829
827
|
...boxProps
|
830
828
|
}) {
|
831
|
-
const addButtonRef =
|
829
|
+
const addButtonRef = React85.useRef(null);
|
832
830
|
const { t } = useTranslation();
|
833
831
|
const styles2 = react.useMultiStyleConfig("NumericStepper", {});
|
834
832
|
const [value, onChange] = react.useControllableState({
|
@@ -842,10 +840,10 @@ function NumericStepper({
|
|
842
840
|
var _a;
|
843
841
|
(_a = addButtonRef.current) == null ? void 0 : _a.focus();
|
844
842
|
};
|
845
|
-
return /* @__PURE__ */
|
843
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Flex, { __css: styles2.container, ...boxProps }, /* @__PURE__ */ React85__namespace.default.createElement(
|
846
844
|
VerySmallButton,
|
847
845
|
{
|
848
|
-
icon: /* @__PURE__ */
|
846
|
+
icon: /* @__PURE__ */ React85__namespace.default.createElement(SubtractIcon, { stepLabel: clampedStepSize }),
|
849
847
|
"aria-label": t(
|
850
848
|
texts2.decrementButtonAriaLabel(
|
851
849
|
clampedStepSize,
|
@@ -862,7 +860,7 @@ function NumericStepper({
|
|
862
860
|
isDisabled: formControlProps.disabled,
|
863
861
|
id: value <= minValue ? void 0 : formControlProps.id
|
864
862
|
}
|
865
|
-
), withInput ? /* @__PURE__ */
|
863
|
+
), withInput ? /* @__PURE__ */ React85__namespace.default.createElement(
|
866
864
|
react.chakra.input,
|
867
865
|
{
|
868
866
|
type: "number",
|
@@ -888,7 +886,7 @@ function NumericStepper({
|
|
888
886
|
}
|
889
887
|
}
|
890
888
|
}
|
891
|
-
) : /* @__PURE__ */
|
889
|
+
) : /* @__PURE__ */ React85__namespace.default.createElement(
|
892
890
|
react.chakra.text,
|
893
891
|
{
|
894
892
|
sx: styles2.text,
|
@@ -897,11 +895,11 @@ function NumericStepper({
|
|
897
895
|
"aria-label": ariaLabelContext.plural !== "" ? t(texts2.currentNumberAriaLabel(ariaLabelContext.plural)) : ""
|
898
896
|
},
|
899
897
|
value
|
900
|
-
), /* @__PURE__ */
|
898
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
901
899
|
VerySmallButton,
|
902
900
|
{
|
903
901
|
ref: addButtonRef,
|
904
|
-
icon: /* @__PURE__ */
|
902
|
+
icon: /* @__PURE__ */ React85__namespace.default.createElement(AddIcon, { stepLabel: clampedStepSize }),
|
905
903
|
"aria-label": t(
|
906
904
|
texts2.incrementButtonAriaLabel(
|
907
905
|
clampedStepSize,
|
@@ -915,9 +913,9 @@ function NumericStepper({
|
|
915
913
|
}
|
916
914
|
));
|
917
915
|
}
|
918
|
-
var VerySmallButton =
|
916
|
+
var VerySmallButton = React85__namespace.default.forwardRef((props, ref) => {
|
919
917
|
const styles2 = react.useMultiStyleConfig("NumericStepper", {});
|
920
|
-
return /* @__PURE__ */
|
918
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
921
919
|
IconButton,
|
922
920
|
{
|
923
921
|
variant: "primary",
|
@@ -928,7 +926,7 @@ var VerySmallButton = React86__namespace.default.forwardRef((props, ref) => {
|
|
928
926
|
}
|
929
927
|
);
|
930
928
|
});
|
931
|
-
var SubtractIcon = ({ stepLabel, ...props }) => /* @__PURE__ */
|
929
|
+
var SubtractIcon = ({ stepLabel, ...props }) => /* @__PURE__ */ React85__namespace.default.createElement(React85__namespace.default.Fragment, null, /* @__PURE__ */ React85__namespace.default.createElement(
|
932
930
|
react.Box,
|
933
931
|
{
|
934
932
|
as: "svg",
|
@@ -938,7 +936,7 @@ var SubtractIcon = ({ stepLabel, ...props }) => /* @__PURE__ */ React86__namespa
|
|
938
936
|
stroke: "currentColor",
|
939
937
|
...props
|
940
938
|
},
|
941
|
-
/* @__PURE__ */
|
939
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
942
940
|
"line",
|
943
941
|
{
|
944
942
|
x1: "9",
|
@@ -949,8 +947,8 @@ var SubtractIcon = ({ stepLabel, ...props }) => /* @__PURE__ */ React86__namespa
|
|
949
947
|
strokeLinecap: "round"
|
950
948
|
}
|
951
949
|
)
|
952
|
-
), stepLabel > 1 && /* @__PURE__ */
|
953
|
-
var AddIcon = ({ stepLabel, ...props }) => /* @__PURE__ */
|
950
|
+
), stepLabel > 1 && /* @__PURE__ */ React85__namespace.default.createElement(react.chakra.span, { paddingRight: "1" }, stepLabel.toString()));
|
951
|
+
var AddIcon = ({ stepLabel, ...props }) => /* @__PURE__ */ React85__namespace.default.createElement(React85__namespace.default.Fragment, null, /* @__PURE__ */ React85__namespace.default.createElement(
|
954
952
|
react.Box,
|
955
953
|
{
|
956
954
|
as: "svg",
|
@@ -960,7 +958,7 @@ var AddIcon = ({ stepLabel, ...props }) => /* @__PURE__ */ React86__namespace.de
|
|
960
958
|
stroke: "currentColor",
|
961
959
|
...props
|
962
960
|
},
|
963
|
-
/* @__PURE__ */
|
961
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
964
962
|
"line",
|
965
963
|
{
|
966
964
|
x1: "9",
|
@@ -971,7 +969,7 @@ var AddIcon = ({ stepLabel, ...props }) => /* @__PURE__ */ React86__namespace.de
|
|
971
969
|
strokeLinecap: "round"
|
972
970
|
}
|
973
971
|
),
|
974
|
-
/* @__PURE__ */
|
972
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
975
973
|
"line",
|
976
974
|
{
|
977
975
|
x1: "15",
|
@@ -982,7 +980,7 @@ var AddIcon = ({ stepLabel, ...props }) => /* @__PURE__ */ React86__namespace.de
|
|
982
980
|
strokeLinecap: "round"
|
983
981
|
}
|
984
982
|
)
|
985
|
-
), stepLabel > 1 && /* @__PURE__ */
|
983
|
+
), stepLabel > 1 && /* @__PURE__ */ React85__namespace.default.createElement(react.chakra.span, { paddingRight: "1" }, stepLabel.toString()));
|
986
984
|
var texts2 = createTexts({
|
987
985
|
currentNumberAriaLabel(ariaContext) {
|
988
986
|
return {
|
@@ -1014,9 +1012,9 @@ var PasswordInput = react.forwardRef(
|
|
1014
1012
|
const { isOpen: isShowingPassword, onToggle } = react.useDisclosure();
|
1015
1013
|
const { t } = useTranslation();
|
1016
1014
|
const formControlProps = react.useFormControlContext();
|
1017
|
-
const autoGeneratedId = `password-input-${
|
1015
|
+
const autoGeneratedId = `password-input-${React85.useId()}`;
|
1018
1016
|
const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? autoGeneratedId;
|
1019
|
-
return /* @__PURE__ */
|
1017
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React85__namespace.default.createElement(InputLeftElement2, { pointerEvents: "none" }, leftIcon), /* @__PURE__ */ React85__namespace.default.createElement(
|
1020
1018
|
react.Input,
|
1021
1019
|
{
|
1022
1020
|
...props,
|
@@ -1028,7 +1026,7 @@ var PasswordInput = react.forwardRef(
|
|
1028
1026
|
ref,
|
1029
1027
|
"data-attachable": true
|
1030
1028
|
}
|
1031
|
-
), /* @__PURE__ */
|
1029
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label), /* @__PURE__ */ React85__namespace.default.createElement(InputRightElement2, { width: "fit-content" }, /* @__PURE__ */ React85__namespace.default.createElement(
|
1032
1030
|
react.Button,
|
1033
1031
|
{
|
1034
1032
|
variant: "ghost",
|
@@ -1072,7 +1070,7 @@ var sortedCallingCodes = awesomePhonenumber.getSupportedCallingCodes().sort((a,
|
|
1072
1070
|
var callingCodes = [...prioritizedCountryCodes, ...sortedCallingCodes];
|
1073
1071
|
var CountryCodeSelect = (props) => {
|
1074
1072
|
const { t } = useTranslation();
|
1075
|
-
return /* @__PURE__ */
|
1073
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
1076
1074
|
InfoSelect,
|
1077
1075
|
{
|
1078
1076
|
label: t(texts4.countryCode),
|
@@ -1081,7 +1079,7 @@ var CountryCodeSelect = (props) => {
|
|
1081
1079
|
variant: props.variant,
|
1082
1080
|
...props
|
1083
1081
|
},
|
1084
|
-
(item) => /* @__PURE__ */
|
1082
|
+
(item) => /* @__PURE__ */ React85__namespace.default.createElement(reactStately.Item, { key: item.key }, item.key)
|
1085
1083
|
);
|
1086
1084
|
};
|
1087
1085
|
var texts4 = createTexts({
|
@@ -1114,7 +1112,7 @@ var PhoneNumberInput = react.forwardRef(
|
|
1114
1112
|
nationalNumber: ""
|
1115
1113
|
}
|
1116
1114
|
});
|
1117
|
-
return /* @__PURE__ */
|
1115
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(AttachedInputs, { ...boxProps }, /* @__PURE__ */ React85__namespace.default.createElement(
|
1118
1116
|
CountryCodeSelect,
|
1119
1117
|
{
|
1120
1118
|
value: value.countryCode,
|
@@ -1127,7 +1125,7 @@ var PhoneNumberInput = react.forwardRef(
|
|
1127
1125
|
width: "6.25rem",
|
1128
1126
|
variant
|
1129
1127
|
}
|
1130
|
-
), /* @__PURE__ */
|
1128
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
1131
1129
|
Input,
|
1132
1130
|
{
|
1133
1131
|
ref,
|
@@ -1170,11 +1168,11 @@ var texts5 = createTexts({
|
|
1170
1168
|
}
|
1171
1169
|
});
|
1172
1170
|
var Radio = react.forwardRef((props, ref) => {
|
1173
|
-
return /* @__PURE__ */
|
1171
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Radio, { ...props, ref });
|
1174
1172
|
});
|
1175
1173
|
var RadioGroup = react.forwardRef(
|
1176
1174
|
({ children, direction = "row", ...rest }, ref) => {
|
1177
|
-
return /* @__PURE__ */
|
1175
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.RadioGroup, { ...rest, ref }, /* @__PURE__ */ React85__namespace.default.createElement(react.Stack, { direction }, children));
|
1178
1176
|
}
|
1179
1177
|
);
|
1180
1178
|
var SearchInput = react.forwardRef(
|
@@ -1182,10 +1180,10 @@ var SearchInput = react.forwardRef(
|
|
1182
1180
|
const { t } = useTranslation();
|
1183
1181
|
const showClearButton = onReset && Boolean(props.value);
|
1184
1182
|
const formControlProps = react.useFormControlContext();
|
1185
|
-
const autoGeneratedId =
|
1183
|
+
const autoGeneratedId = React85.useId();
|
1186
1184
|
const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? autoGeneratedId;
|
1187
1185
|
const { outerProps, innerProps } = getOuterProps(props);
|
1188
|
-
return /* @__PURE__ */
|
1186
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.InputGroup, { position: "relative", ...outerProps }, /* @__PURE__ */ React85__namespace.default.createElement(InputLeftElement2, { pointerEvents: "none" }, /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.SearchOutline24Icon, null)), /* @__PURE__ */ React85__namespace.default.createElement(
|
1189
1187
|
react.Input,
|
1190
1188
|
{
|
1191
1189
|
paddingLeft: 7,
|
@@ -1202,7 +1200,7 @@ var SearchInput = react.forwardRef(
|
|
1202
1200
|
ref,
|
1203
1201
|
"data-attachable": true
|
1204
1202
|
}
|
1205
|
-
), /* @__PURE__ */
|
1203
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
1206
1204
|
FormLabel,
|
1207
1205
|
{
|
1208
1206
|
htmlFor: inputId,
|
@@ -1223,7 +1221,7 @@ var SearchInput = react.forwardRef(
|
|
1223
1221
|
}
|
1224
1222
|
},
|
1225
1223
|
label ?? t(texts6.label)
|
1226
|
-
), showClearButton && /* @__PURE__ */
|
1224
|
+
), showClearButton && /* @__PURE__ */ React85__namespace.default.createElement(InputRightElement2, { width: "fit-content" }, /* @__PURE__ */ React85__namespace.default.createElement(
|
1227
1225
|
react.IconButton,
|
1228
1226
|
{
|
1229
1227
|
variant: "ghost",
|
@@ -1231,7 +1229,7 @@ var SearchInput = react.forwardRef(
|
|
1231
1229
|
size: "sm",
|
1232
1230
|
marginRight: 1,
|
1233
1231
|
"aria-label": t(texts6.reset),
|
1234
|
-
icon: /* @__PURE__ */
|
1232
|
+
icon: /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.CloseOutline24Icon, null),
|
1235
1233
|
onClick: onReset
|
1236
1234
|
}
|
1237
1235
|
)));
|
@@ -1266,13 +1264,13 @@ var texts6 = createTexts({
|
|
1266
1264
|
});
|
1267
1265
|
var Switch = react.forwardRef(
|
1268
1266
|
({ size = "md", as, ...props }, ref) => {
|
1269
|
-
return /* @__PURE__ */
|
1267
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Switch, { as, size, ...props, ref });
|
1270
1268
|
}
|
1271
1269
|
);
|
1272
1270
|
var useLabelHeight = (label) => {
|
1273
|
-
const labelRef =
|
1274
|
-
const [labelHeight, setLabelHeight] =
|
1275
|
-
|
1271
|
+
const labelRef = React85.useRef(null);
|
1272
|
+
const [labelHeight, setLabelHeight] = React85.useState(0);
|
1273
|
+
React85.useLayoutEffect(() => {
|
1276
1274
|
const updateLabelHeight = () => {
|
1277
1275
|
if (labelRef.current) {
|
1278
1276
|
setLabelHeight(labelRef.current.offsetHeight);
|
@@ -1297,18 +1295,18 @@ var Textarea = react.forwardRef((props, ref) => {
|
|
1297
1295
|
remainingProps: { label, ...rest }
|
1298
1296
|
} = getSpacingProps(props);
|
1299
1297
|
const formControlProps = react.useFormControlContext();
|
1300
|
-
const fallbackId = `textarea-${
|
1298
|
+
const fallbackId = `textarea-${React85.useId()}`;
|
1301
1299
|
const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
|
1302
1300
|
const { labelRef, labelHeight } = useLabelHeight(label);
|
1303
|
-
return /* @__PURE__ */
|
1301
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
1304
1302
|
react.InputGroup,
|
1305
1303
|
{
|
1306
1304
|
position: "relative",
|
1307
1305
|
...spacingProps,
|
1308
1306
|
style: { "--label-height": `${labelHeight}px` }
|
1309
1307
|
},
|
1310
|
-
/* @__PURE__ */
|
1311
|
-
label && /* @__PURE__ */
|
1308
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.Textarea, { ...rest, id: inputId, ref, placeholder: " " }),
|
1309
|
+
label && /* @__PURE__ */ React85__namespace.default.createElement(
|
1312
1310
|
react.FormLabel,
|
1313
1311
|
{
|
1314
1312
|
ref: labelRef,
|
@@ -1380,7 +1378,7 @@ function getSpacingProps(props) {
|
|
1380
1378
|
}
|
1381
1379
|
|
1382
1380
|
// src/layout/RadioCardGroup.tsx
|
1383
|
-
var RadioCardGroupContext =
|
1381
|
+
var RadioCardGroupContext = React85__namespace.default.createContext(null);
|
1384
1382
|
var RadioCardGroup = ({
|
1385
1383
|
children,
|
1386
1384
|
name,
|
@@ -1391,14 +1389,14 @@ var RadioCardGroup = ({
|
|
1391
1389
|
onChange,
|
1392
1390
|
...props
|
1393
1391
|
}) => {
|
1394
|
-
const [selectedValue, setSelectedValue] =
|
1392
|
+
const [selectedValue, setSelectedValue] = React85.useState(
|
1395
1393
|
defaultValue || ""
|
1396
1394
|
);
|
1397
1395
|
const handleChange = (value) => {
|
1398
1396
|
setSelectedValue(value);
|
1399
1397
|
onChange && onChange(value);
|
1400
1398
|
};
|
1401
|
-
return /* @__PURE__ */
|
1399
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
1402
1400
|
RadioCardGroupContext.Provider,
|
1403
1401
|
{
|
1404
1402
|
value: {
|
@@ -1409,12 +1407,12 @@ var RadioCardGroup = ({
|
|
1409
1407
|
defaultValue: defaultValue || ""
|
1410
1408
|
}
|
1411
1409
|
},
|
1412
|
-
/* @__PURE__ */
|
1410
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.Stack, { as: "fieldset", direction, ...props }, groupLabel && /* @__PURE__ */ React85__namespace.default.createElement(FormLabel, { as: "legend", id: groupLabel }, groupLabel), children)
|
1413
1411
|
);
|
1414
1412
|
};
|
1415
1413
|
var RadioCard = react.forwardRef(
|
1416
1414
|
({ children, value, isDisabled, ...props }, ref) => {
|
1417
|
-
const context =
|
1415
|
+
const context = React85.useContext(RadioCardGroupContext);
|
1418
1416
|
if (!context) {
|
1419
1417
|
throw new Error(
|
1420
1418
|
"RadioCard components must be wrapped in a RadioCardGroup component"
|
@@ -1422,10 +1420,10 @@ var RadioCard = react.forwardRef(
|
|
1422
1420
|
}
|
1423
1421
|
const { name, selectedValue, onChange, variant } = context;
|
1424
1422
|
const styles2 = react.useMultiStyleConfig("RadioCard", { variant });
|
1425
|
-
const [isKeyboardUser, setKeyboardUser] =
|
1426
|
-
const [isFocused, setFocus] =
|
1423
|
+
const [isKeyboardUser, setKeyboardUser] = React85.useState(false);
|
1424
|
+
const [isFocused, setFocus] = React85.useState(false);
|
1427
1425
|
const isChecked = selectedValue === value;
|
1428
|
-
|
1426
|
+
React85.useEffect(() => {
|
1429
1427
|
const handleMouseDown = () => setKeyboardUser(false);
|
1430
1428
|
const handleKeyDown = (event) => {
|
1431
1429
|
if (event.key === " ") {
|
@@ -1441,21 +1439,21 @@ var RadioCard = react.forwardRef(
|
|
1441
1439
|
window.removeEventListener("keydown", handleKeyDown);
|
1442
1440
|
};
|
1443
1441
|
}, []);
|
1444
|
-
|
1442
|
+
React85.useEffect(() => {
|
1445
1443
|
if (isKeyboardUser && isChecked) {
|
1446
1444
|
setFocus(true);
|
1447
1445
|
} else {
|
1448
1446
|
setFocus(false);
|
1449
1447
|
}
|
1450
1448
|
}, [isKeyboardUser, isChecked]);
|
1451
|
-
const inputId = `radio-card-${
|
1452
|
-
return /* @__PURE__ */
|
1449
|
+
const inputId = `radio-card-${React85.useId()}`;
|
1450
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
1453
1451
|
react.Box,
|
1454
1452
|
{
|
1455
1453
|
onFocus: () => isKeyboardUser && setFocus(true),
|
1456
1454
|
onBlur: () => setFocus(false)
|
1457
1455
|
},
|
1458
|
-
/* @__PURE__ */
|
1456
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
1459
1457
|
react.chakra.input,
|
1460
1458
|
{
|
1461
1459
|
type: "radio",
|
@@ -1468,7 +1466,7 @@ var RadioCard = react.forwardRef(
|
|
1468
1466
|
__css: styles2.radioInput
|
1469
1467
|
}
|
1470
1468
|
),
|
1471
|
-
/* @__PURE__ */
|
1469
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
1472
1470
|
react.Box,
|
1473
1471
|
{
|
1474
1472
|
as: "label",
|
@@ -1495,7 +1493,7 @@ var StaticCard = react.forwardRef(
|
|
1495
1493
|
const styles2 = react.useStyleConfig("StaticCard", {
|
1496
1494
|
colorScheme
|
1497
1495
|
});
|
1498
|
-
return /* @__PURE__ */
|
1496
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { __css: styles2, ...props, ref }, children);
|
1499
1497
|
}
|
1500
1498
|
);
|
1501
1499
|
var PressableCard = react.forwardRef(
|
@@ -1503,20 +1501,20 @@ var PressableCard = react.forwardRef(
|
|
1503
1501
|
const styles2 = react.useStyleConfig("PressableCard", {
|
1504
1502
|
variant
|
1505
1503
|
});
|
1506
|
-
return /* @__PURE__ */
|
1504
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { __css: styles2, ...props, ref }, children);
|
1507
1505
|
}
|
1508
1506
|
);
|
1509
1507
|
var Accordion = react.forwardRef(
|
1510
1508
|
({ children, spacing: spacing2 = 2, ...props }, ref) => {
|
1511
1509
|
const defaultIndex = typeof props.defaultIndex === "number" && props.allowMultiple ? [props.defaultIndex] : props.defaultIndex;
|
1512
|
-
return /* @__PURE__ */
|
1510
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
1513
1511
|
react.Accordion,
|
1514
1512
|
{
|
1515
1513
|
...props,
|
1516
1514
|
ref,
|
1517
1515
|
defaultIndex
|
1518
1516
|
},
|
1519
|
-
/* @__PURE__ */
|
1517
|
+
/* @__PURE__ */ React85__namespace.default.createElement(Stack, { spacing: spacing2 }, children)
|
1520
1518
|
);
|
1521
1519
|
}
|
1522
1520
|
);
|
@@ -1531,7 +1529,7 @@ var Expandable = ({
|
|
1531
1529
|
},
|
1532
1530
|
...rest
|
1533
1531
|
}) => {
|
1534
|
-
return /* @__PURE__ */
|
1532
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
1535
1533
|
Accordion,
|
1536
1534
|
{
|
1537
1535
|
...rest,
|
@@ -1539,7 +1537,7 @@ var Expandable = ({
|
|
1539
1537
|
defaultIndex: defaultOpen ? 0 : void 0,
|
1540
1538
|
onChange: (expandedIndex) => onChange(expandedIndex === 0)
|
1541
1539
|
},
|
1542
|
-
/* @__PURE__ */
|
1540
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
1543
1541
|
ExpandableItem,
|
1544
1542
|
{
|
1545
1543
|
headingLevel,
|
@@ -1558,7 +1556,7 @@ var ExpandableItem = ({
|
|
1558
1556
|
...rest
|
1559
1557
|
}) => {
|
1560
1558
|
warnAboutMismatchingIcon({ icon: leftIcon });
|
1561
|
-
return /* @__PURE__ */
|
1559
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.AccordionItem, { ...rest }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { as: headingLevel }, /* @__PURE__ */ React85__namespace.default.createElement(react.AccordionButton, null, /* @__PURE__ */ React85__namespace.default.createElement(react.Flex, { alignItems: "center" }, leftIcon && /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { marginRight: 1 }, leftIcon), title), /* @__PURE__ */ React85__namespace.default.createElement(react.AccordionIcon, null))), /* @__PURE__ */ React85__namespace.default.createElement(react.AccordionPanel, null, children));
|
1562
1560
|
};
|
1563
1561
|
var warnAboutMismatchingIcon = ({ icon }) => {
|
1564
1562
|
var _a, _b;
|
@@ -1593,15 +1591,15 @@ var Language = /* @__PURE__ */ ((Language3) => {
|
|
1593
1591
|
Language3["English"] = "en";
|
1594
1592
|
return Language3;
|
1595
1593
|
})(Language || {});
|
1596
|
-
var LanguageContext =
|
1594
|
+
var LanguageContext = React85.createContext(void 0);
|
1597
1595
|
function LanguageProvider({
|
1598
1596
|
language,
|
1599
1597
|
children
|
1600
1598
|
}) {
|
1601
|
-
return /* @__PURE__ */
|
1599
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(LanguageContext.Provider, { value: language }, children);
|
1602
1600
|
}
|
1603
1601
|
function useLanguage() {
|
1604
|
-
const language =
|
1602
|
+
const language = React85.useContext(LanguageContext);
|
1605
1603
|
if (!language) {
|
1606
1604
|
throw new Error("Please wrap your application in a LanguageProvider");
|
1607
1605
|
}
|
@@ -1619,8 +1617,8 @@ function createTexts(texts31) {
|
|
1619
1617
|
}
|
1620
1618
|
var hydrating = true;
|
1621
1619
|
function useHydrated() {
|
1622
|
-
let [hydrated, setHydrated] =
|
1623
|
-
|
1620
|
+
let [hydrated, setHydrated] = React85.useState(() => !hydrating);
|
1621
|
+
React85.useEffect(function hydrate() {
|
1624
1622
|
hydrating = false;
|
1625
1623
|
setHydrated(true);
|
1626
1624
|
}, []);
|
@@ -1630,11 +1628,11 @@ function useHydrated() {
|
|
1630
1628
|
// src/loader/ClientOnly.tsx
|
1631
1629
|
var ClientOnly = ({ children, fallback = null }) => {
|
1632
1630
|
const isHydrated = useHydrated();
|
1633
|
-
return /* @__PURE__ */
|
1631
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(React85__namespace.default.Fragment, null, isHydrated ? children() : fallback);
|
1634
1632
|
};
|
1635
1633
|
function Lottie({ animationData }) {
|
1636
1634
|
const { View } = lottieReact.useLottie({ animationData, loop: true });
|
1637
|
-
return /* @__PURE__ */
|
1635
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(React85__namespace.default.Fragment, null, View);
|
1638
1636
|
}
|
1639
1637
|
|
1640
1638
|
// src/loader/ColorInlineLoader.tsx
|
@@ -1643,7 +1641,7 @@ var ColorInlineLoader = ({
|
|
1643
1641
|
maxWidth,
|
1644
1642
|
...props
|
1645
1643
|
}) => {
|
1646
|
-
return /* @__PURE__ */
|
1644
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Center, { ...props }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React85__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React85__namespace.default.createElement(Lottie, { animationData: sporLoader.inlineLoaderColorData }))));
|
1647
1645
|
};
|
1648
1646
|
var ColorSpinner = ({
|
1649
1647
|
children,
|
@@ -1651,24 +1649,24 @@ var ColorSpinner = ({
|
|
1651
1649
|
maxWidth,
|
1652
1650
|
...props
|
1653
1651
|
}) => {
|
1654
|
-
return /* @__PURE__ */
|
1652
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React85__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React85__namespace.default.createElement(Lottie, { animationData: sporLoader.spinnerColorData }))), children && /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { marginTop: 3, fontWeight: "bold" }, children));
|
1655
1653
|
};
|
1656
1654
|
var ContentLoader = ({ children, ...props }) => {
|
1657
|
-
return /* @__PURE__ */
|
1655
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { ...props }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { maxWidth: "140px", marginX: "auto" }, /* @__PURE__ */ React85__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React85__namespace.default.createElement(Lottie, { animationData: sporLoader.contentLoaderData }))), children && /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { textAlign: "center", fontWeight: "bold" }, children));
|
1658
1656
|
};
|
1659
1657
|
var DarkFullScreenLoader = ({
|
1660
1658
|
width,
|
1661
1659
|
maxWidth,
|
1662
1660
|
...props
|
1663
1661
|
}) => {
|
1664
|
-
return /* @__PURE__ */
|
1662
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Center, { height: "100%", background: "darkTeal", ...props }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React85__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React85__namespace.default.createElement(Lottie, { animationData: sporLoader.fullScreenLoaderWhiteData }))));
|
1665
1663
|
};
|
1666
1664
|
var DarkInlineLoader = ({
|
1667
1665
|
width,
|
1668
1666
|
maxWidth,
|
1669
1667
|
...props
|
1670
1668
|
}) => {
|
1671
|
-
return /* @__PURE__ */
|
1669
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Center, { ...props }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React85__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React85__namespace.default.createElement(Lottie, { animationData: sporLoader.inlineLoaderDarkData }))));
|
1672
1670
|
};
|
1673
1671
|
var DarkSpinner = ({
|
1674
1672
|
children,
|
@@ -1678,21 +1676,21 @@ var DarkSpinner = ({
|
|
1678
1676
|
}) => {
|
1679
1677
|
const { colorMode } = react.useColorMode();
|
1680
1678
|
const spinnerData = colorMode === "dark" ? sporLoader.spinnerLightData : sporLoader.spinnerDarkData;
|
1681
|
-
return /* @__PURE__ */
|
1679
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React85__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React85__namespace.default.createElement(Lottie, { animationData: spinnerData }))), children && /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { marginTop: 3, fontWeight: "bold" }, children));
|
1682
1680
|
};
|
1683
1681
|
var LightFullScreenLoader = ({
|
1684
1682
|
width,
|
1685
1683
|
maxWidth,
|
1686
1684
|
...props
|
1687
1685
|
}) => {
|
1688
|
-
return /* @__PURE__ */
|
1686
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Center, { height: "100%", background: "white", ...props }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React85__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React85__namespace.default.createElement(Lottie, { animationData: sporLoader.fullScreenLoaderBlackData }))));
|
1689
1687
|
};
|
1690
1688
|
var LightInlineLoader = ({
|
1691
1689
|
width,
|
1692
1690
|
maxWidth,
|
1693
1691
|
...props
|
1694
1692
|
}) => {
|
1695
|
-
return /* @__PURE__ */
|
1693
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Center, { ...props }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React85__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React85__namespace.default.createElement(Lottie, { animationData: sporLoader.inlineLoaderLightData }))));
|
1696
1694
|
};
|
1697
1695
|
var LightSpinner = ({
|
1698
1696
|
children,
|
@@ -1700,14 +1698,14 @@ var LightSpinner = ({
|
|
1700
1698
|
maxWidth,
|
1701
1699
|
...props
|
1702
1700
|
}) => {
|
1703
|
-
return /* @__PURE__ */
|
1701
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React85__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React85__namespace.default.createElement(Lottie, { animationData: sporLoader.spinnerLightData }))), children && /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { marginTop: 3, fontWeight: "bold" }, children));
|
1704
1702
|
};
|
1705
1703
|
var useRotatingLabel = ({ label, delay }) => {
|
1706
|
-
const loadingTextArray =
|
1704
|
+
const loadingTextArray = React85.useMemo(
|
1707
1705
|
() => Array.isArray(label) ? label : [label],
|
1708
1706
|
[label]
|
1709
1707
|
);
|
1710
|
-
const [currentLoadingTextIndex, setCurrentLoadingTextIndex] =
|
1708
|
+
const [currentLoadingTextIndex, setCurrentLoadingTextIndex] = React85.useState(0);
|
1711
1709
|
react.useInterval(() => {
|
1712
1710
|
setCurrentLoadingTextIndex(
|
1713
1711
|
(prevIndex) => (prevIndex + 1) % loadingTextArray.length
|
@@ -1738,7 +1736,7 @@ var ProgressBar = ({
|
|
1738
1736
|
"aria-label": ariaLabel || t(texts7.label(value))
|
1739
1737
|
});
|
1740
1738
|
const styles2 = react.useMultiStyleConfig("ProgressBar", { isActive });
|
1741
|
-
return /* @__PURE__ */
|
1739
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(React85__namespace.default.Fragment, null, /* @__PURE__ */ React85__namespace.default.createElement(
|
1742
1740
|
react.Box,
|
1743
1741
|
{
|
1744
1742
|
...progressBarProps,
|
@@ -1746,7 +1744,7 @@ var ProgressBar = ({
|
|
1746
1744
|
__css: styles2.container,
|
1747
1745
|
...rest
|
1748
1746
|
},
|
1749
|
-
/* @__PURE__ */
|
1747
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.Box, { width, __css: styles2.background }, /* @__PURE__ */ React85__namespace.default.createElement(
|
1750
1748
|
react.Box,
|
1751
1749
|
{
|
1752
1750
|
__css: styles2.progress,
|
@@ -1754,7 +1752,7 @@ var ProgressBar = ({
|
|
1754
1752
|
width: isActive ? `${value}%` : "100%"
|
1755
1753
|
}
|
1756
1754
|
)),
|
1757
|
-
currentLoadingText && /* @__PURE__ */
|
1755
|
+
currentLoadingText && /* @__PURE__ */ React85__namespace.default.createElement(react.Text, { sx: styles2.description, ...labelProps }, currentLoadingText)
|
1758
1756
|
));
|
1759
1757
|
};
|
1760
1758
|
var texts7 = createTexts({
|
@@ -1784,11 +1782,11 @@ var ProgressLoader = ({
|
|
1784
1782
|
value,
|
1785
1783
|
"aria-label": ariaLabel ?? t(texts8.fallbackLabel(value ?? "?"))
|
1786
1784
|
});
|
1787
|
-
const pathRef =
|
1785
|
+
const pathRef = React85.useRef(null);
|
1788
1786
|
const progressPathLength = ((_a = pathRef.current) == null ? void 0 : _a.getTotalLength()) ?? 0;
|
1789
1787
|
const progress = (value - 100) / 100 * progressPathLength;
|
1790
|
-
const id =
|
1791
|
-
return /* @__PURE__ */
|
1788
|
+
const id = React85.useId();
|
1789
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { ...progressBarProps, minWidth: "100px", width, ...rest }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { as: "svg", viewBox: "0 0 246 78", fill: "none" }, /* @__PURE__ */ React85__namespace.default.createElement(
|
1792
1790
|
react.Box,
|
1793
1791
|
{
|
1794
1792
|
as: "path",
|
@@ -1796,7 +1794,7 @@ var ProgressLoader = ({
|
|
1796
1794
|
d: "M14.0479 44.8251C19.4332 44.8251 23.7988 40.5242 23.7988 35.2187C23.7988 29.9133 19.4332 25.6124 14.0479 25.6124C8.66254 25.6124 4.29688 29.9133 4.29688 35.2187C4.29688 40.5242 8.66254 44.8251 14.0479 44.8251Z",
|
1797
1795
|
fill: "#FFB466"
|
1798
1796
|
}
|
1799
|
-
), /* @__PURE__ */
|
1797
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
1800
1798
|
react.Box,
|
1801
1799
|
{
|
1802
1800
|
as: "path",
|
@@ -1807,7 +1805,7 @@ var ProgressLoader = ({
|
|
1807
1805
|
strokeLinecap: "round",
|
1808
1806
|
strokeLinejoin: "round"
|
1809
1807
|
}
|
1810
|
-
), /* @__PURE__ */
|
1808
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
1811
1809
|
react.Box,
|
1812
1810
|
{
|
1813
1811
|
as: "path",
|
@@ -1822,7 +1820,7 @@ var ProgressLoader = ({
|
|
1822
1820
|
transition: "stroke-dashoffset .2s ease-out",
|
1823
1821
|
ref: pathRef
|
1824
1822
|
}
|
1825
|
-
), /* @__PURE__ */
|
1823
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
1826
1824
|
react.Box,
|
1827
1825
|
{
|
1828
1826
|
as: "path",
|
@@ -1830,7 +1828,7 @@ var ProgressLoader = ({
|
|
1830
1828
|
d: "M226.025 44.8251C231.411 44.8251 235.776 40.5242 235.776 35.2187C235.776 29.9133 231.411 25.6124 226.025 25.6124C220.64 25.6124 216.274 29.9133 216.274 35.2187C216.274 40.5242 220.64 44.8251 226.025 44.8251Z",
|
1831
1829
|
fill: "#688CBA"
|
1832
1830
|
}
|
1833
|
-
)), currentLoadingText && /* @__PURE__ */
|
1831
|
+
)), currentLoadingText && /* @__PURE__ */ React85__namespace.default.createElement(
|
1834
1832
|
react.Text,
|
1835
1833
|
{
|
1836
1834
|
textAlign: "center",
|
@@ -1849,7 +1847,7 @@ var texts8 = createTexts({
|
|
1849
1847
|
en: `${value}% done`
|
1850
1848
|
})
|
1851
1849
|
});
|
1852
|
-
var Skeleton = react.forwardRef((props, ref) => /* @__PURE__ */
|
1850
|
+
var Skeleton = react.forwardRef((props, ref) => /* @__PURE__ */ React85__namespace.default.createElement(
|
1853
1851
|
react.Skeleton,
|
1854
1852
|
{
|
1855
1853
|
...props,
|
@@ -1859,8 +1857,8 @@ var Skeleton = react.forwardRef((props, ref) => /* @__PURE__ */ React86__namespa
|
|
1859
1857
|
role: "alert"
|
1860
1858
|
}
|
1861
1859
|
));
|
1862
|
-
var SkeletonCircle = (props) => /* @__PURE__ */
|
1863
|
-
var SkeletonText = (props) => /* @__PURE__ */
|
1860
|
+
var SkeletonCircle = (props) => /* @__PURE__ */ React85__namespace.default.createElement(react.SkeletonCircle, { boxSize: 6, borderRadius: "50%", ...props });
|
1861
|
+
var SkeletonText = (props) => /* @__PURE__ */ React85__namespace.default.createElement(react.SkeletonText, { boxSize: 6, ...props });
|
1864
1862
|
|
1865
1863
|
// src/button/Button.tsx
|
1866
1864
|
var Button2 = react.forwardRef((props, ref) => {
|
@@ -1890,7 +1888,7 @@ var Button2 = react.forwardRef((props, ref) => {
|
|
1890
1888
|
if (fontWeight) {
|
1891
1889
|
styles2.fontWeight = fontWeight;
|
1892
1890
|
}
|
1893
|
-
return /* @__PURE__ */
|
1891
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
1894
1892
|
react.Box,
|
1895
1893
|
{
|
1896
1894
|
...rest,
|
@@ -1904,7 +1902,7 @@ var Button2 = react.forwardRef((props, ref) => {
|
|
1904
1902
|
position: "relative",
|
1905
1903
|
fontFamily: "Vy Sans"
|
1906
1904
|
},
|
1907
|
-
isLoading && /* @__PURE__ */
|
1905
|
+
isLoading && /* @__PURE__ */ React85__namespace.default.createElement(react.Center, { position: "absolute", right: 0, left: 0, top: 1, bottom: 0 }, /* @__PURE__ */ React85__namespace.default.createElement(
|
1908
1906
|
ColorInlineLoader,
|
1909
1907
|
{
|
1910
1908
|
maxWidth: getLoaderWidth(finalSize),
|
@@ -1913,7 +1911,7 @@ var Button2 = react.forwardRef((props, ref) => {
|
|
1913
1911
|
marginY: 2
|
1914
1912
|
}
|
1915
1913
|
)),
|
1916
|
-
/* @__PURE__ */
|
1914
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
1917
1915
|
react.Flex,
|
1918
1916
|
{
|
1919
1917
|
gap: 1,
|
@@ -1923,7 +1921,7 @@ var Button2 = react.forwardRef((props, ref) => {
|
|
1923
1921
|
visibility: isLoading ? "hidden" : "visible",
|
1924
1922
|
"aria-hidden": isLoading
|
1925
1923
|
},
|
1926
|
-
/* @__PURE__ */
|
1924
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.Flex, { gap: 1, alignItems: "center" }, leftIcon, /* @__PURE__ */ React85__namespace.default.createElement(
|
1927
1925
|
react.Box,
|
1928
1926
|
{
|
1929
1927
|
visibility: isLoading ? "hidden" : "visible",
|
@@ -1964,14 +1962,14 @@ var texts9 = createTexts({
|
|
1964
1962
|
sv: "Laddar\u2026"
|
1965
1963
|
}
|
1966
1964
|
});
|
1967
|
-
var ButtonGroup = react.forwardRef((props, ref) => /* @__PURE__ */
|
1965
|
+
var ButtonGroup = react.forwardRef((props, ref) => /* @__PURE__ */ React85__namespace.default.createElement(react.ButtonGroup, { ...props, ref }));
|
1968
1966
|
var IconButton = react.forwardRef(
|
1969
|
-
({ ...props }, ref) => /* @__PURE__ */
|
1967
|
+
({ ...props }, ref) => /* @__PURE__ */ React85__namespace.default.createElement(
|
1970
1968
|
react.IconButton,
|
1971
1969
|
{
|
1972
1970
|
title: props["aria-label"],
|
1973
1971
|
...props,
|
1974
|
-
spinner: /* @__PURE__ */
|
1972
|
+
spinner: /* @__PURE__ */ React85__namespace.default.createElement(ColorSpinner, { width: "80%", height: "80%", marginX: 1, marginTop: 1 }),
|
1975
1973
|
ref
|
1976
1974
|
}
|
1977
1975
|
)
|
@@ -1981,7 +1979,7 @@ var IconButton = react.forwardRef(
|
|
1981
1979
|
var CloseButton = react.forwardRef(
|
1982
1980
|
({ size = "sm", ...props }, ref) => {
|
1983
1981
|
const { t } = useTranslation();
|
1984
|
-
return /* @__PURE__ */
|
1982
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
1985
1983
|
IconButton,
|
1986
1984
|
{
|
1987
1985
|
ref,
|
@@ -1998,11 +1996,11 @@ var getIcon = (size) => {
|
|
1998
1996
|
switch (size) {
|
1999
1997
|
case "xs":
|
2000
1998
|
case "sm":
|
2001
|
-
return /* @__PURE__ */
|
1999
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.CloseFill18Icon, null);
|
2002
2000
|
case "md":
|
2003
|
-
return /* @__PURE__ */
|
2001
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.CloseFill24Icon, null);
|
2004
2002
|
case "lg":
|
2005
|
-
return /* @__PURE__ */
|
2003
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.CloseFill30Icon, null);
|
2006
2004
|
}
|
2007
2005
|
};
|
2008
2006
|
var texts10 = createTexts({
|
@@ -2024,11 +2022,11 @@ var FloatingActionButton = react.forwardRef(
|
|
2024
2022
|
placement = "bottom right",
|
2025
2023
|
...props
|
2026
2024
|
}, ref) => {
|
2027
|
-
const [isTextVisible, setIsTextVisible] =
|
2025
|
+
const [isTextVisible, setIsTextVisible] = React85__namespace.default.useState(
|
2028
2026
|
externalIsTextVisible !== void 0 ? externalIsTextVisible : false
|
2029
2027
|
);
|
2030
2028
|
const scrollDirection = useScrollDirection();
|
2031
|
-
|
2029
|
+
React85.useEffect(() => {
|
2032
2030
|
if (externalIsTextVisible !== void 0) {
|
2033
2031
|
return;
|
2034
2032
|
}
|
@@ -2038,7 +2036,7 @@ var FloatingActionButton = react.forwardRef(
|
|
2038
2036
|
);
|
2039
2037
|
return () => window.clearTimeout(id);
|
2040
2038
|
}, [scrollDirection, externalIsTextVisible]);
|
2041
|
-
|
2039
|
+
React85.useEffect(() => {
|
2042
2040
|
setIsTextVisible(!!externalIsTextVisible);
|
2043
2041
|
}, [externalIsTextVisible]);
|
2044
2042
|
const style = react.useMultiStyleConfig("FloatingActionButton", {
|
@@ -2046,7 +2044,7 @@ var FloatingActionButton = react.forwardRef(
|
|
2046
2044
|
isTextVisible,
|
2047
2045
|
placement
|
2048
2046
|
});
|
2049
|
-
return /* @__PURE__ */
|
2047
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
2050
2048
|
MotionBox,
|
2051
2049
|
{
|
2052
2050
|
__css: style.container,
|
@@ -2054,8 +2052,8 @@ var FloatingActionButton = react.forwardRef(
|
|
2054
2052
|
ref,
|
2055
2053
|
...props
|
2056
2054
|
},
|
2057
|
-
/* @__PURE__ */
|
2058
|
-
/* @__PURE__ */
|
2055
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.Box, { __css: style.icon }, icon),
|
2056
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
2059
2057
|
MotionBox,
|
2060
2058
|
{
|
2061
2059
|
animate: isTextVisible ? "show" : "hide",
|
@@ -2080,11 +2078,11 @@ var FloatingActionButton = react.forwardRef(
|
|
2080
2078
|
}
|
2081
2079
|
);
|
2082
2080
|
var useScrollDirection = () => {
|
2083
|
-
const [scrollDirection, setScrollDirection] =
|
2084
|
-
const lastScrollPosition =
|
2081
|
+
const [scrollDirection, setScrollDirection] = React85__namespace.default.useState(null);
|
2082
|
+
const lastScrollPosition = React85__namespace.default.useRef(
|
2085
2083
|
typeof window !== "undefined" ? window.scrollY : 0
|
2086
2084
|
);
|
2087
|
-
|
2085
|
+
React85__namespace.default.useEffect(() => {
|
2088
2086
|
const onScroll = () => {
|
2089
2087
|
const delta = window.scrollY - lastScrollPosition.current;
|
2090
2088
|
if (delta === 0) {
|
@@ -2103,7 +2101,7 @@ var useScrollDirection = () => {
|
|
2103
2101
|
var AlertIcon = ({ variant }) => {
|
2104
2102
|
const Icon = getIcon2(variant);
|
2105
2103
|
const { t } = useTranslation();
|
2106
|
-
return /* @__PURE__ */
|
2104
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
2107
2105
|
Icon,
|
2108
2106
|
{
|
2109
2107
|
flexShrink: 0,
|
@@ -2181,7 +2179,7 @@ var BaseAlert = ({
|
|
2181
2179
|
...boxProps
|
2182
2180
|
}) => {
|
2183
2181
|
const styles2 = react.useMultiStyleConfig("Alert", { variant });
|
2184
|
-
return /* @__PURE__ */
|
2182
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { __css: styles2.container, ...boxProps }, children);
|
2185
2183
|
};
|
2186
2184
|
|
2187
2185
|
// src/alert/ClosableAlert.tsx
|
@@ -2203,17 +2201,17 @@ var ClosableAlert = ({
|
|
2203
2201
|
externalOnClose();
|
2204
2202
|
onClose();
|
2205
2203
|
};
|
2206
|
-
return /* @__PURE__ */
|
2204
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(BaseAlert, { variant, ...boxProps }, /* @__PURE__ */ React85__namespace.default.createElement(
|
2207
2205
|
IconButton,
|
2208
2206
|
{
|
2209
2207
|
variant: "ghost",
|
2210
2208
|
size: "sm",
|
2211
2209
|
onClick: handleClose,
|
2212
|
-
icon: /* @__PURE__ */
|
2210
|
+
icon: /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.CloseFill18Icon, null),
|
2213
2211
|
"aria-label": t(texts12.close),
|
2214
2212
|
sx: styles2.closeButton
|
2215
2213
|
}
|
2216
|
-
), /* @__PURE__ */
|
2214
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React85__namespace.default.createElement(react.Flex, { direction: "column", gap: title ? 2 : void 0, textAlign: "left" }, title && /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { fontWeight: "bold" }, title), /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { marginRight: 1 }, children)));
|
2217
2215
|
};
|
2218
2216
|
var texts12 = createTexts({
|
2219
2217
|
close: {
|
@@ -2234,7 +2232,7 @@ var ExpandableAlert = ({
|
|
2234
2232
|
...boxProps
|
2235
2233
|
}) => {
|
2236
2234
|
const styles2 = react.useMultiStyleConfig("AlertExpandable", { variant });
|
2237
|
-
return /* @__PURE__ */
|
2235
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(BaseAlert, { variant, ...boxProps, paddingX: 0, paddingY: 0 }, /* @__PURE__ */ React85__namespace.default.createElement(
|
2238
2236
|
react.Accordion,
|
2239
2237
|
{
|
2240
2238
|
onChange: (expandedIndex) => onToggle(expandedIndex === 0),
|
@@ -2242,14 +2240,14 @@ var ExpandableAlert = ({
|
|
2242
2240
|
allowToggle: true,
|
2243
2241
|
flexGrow: "1"
|
2244
2242
|
},
|
2245
|
-
/* @__PURE__ */
|
2243
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.AccordionItem, { sx: styles2.accordion }, /* @__PURE__ */ React85__namespace.default.createElement(react.AccordionButton, { sx: styles2.container }, /* @__PURE__ */ React85__namespace.default.createElement(
|
2246
2244
|
react.Flex,
|
2247
2245
|
{
|
2248
2246
|
justifyContent: "space-between",
|
2249
2247
|
alignItems: "center",
|
2250
2248
|
flexGrow: "1"
|
2251
2249
|
},
|
2252
|
-
/* @__PURE__ */
|
2250
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.Flex, { as: headingLevel, alignItems: "center" }, /* @__PURE__ */ React85__namespace.default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React85__namespace.default.createElement(
|
2253
2251
|
react.Box,
|
2254
2252
|
{
|
2255
2253
|
as: "span",
|
@@ -2264,13 +2262,13 @@ var ExpandableAlert = ({
|
|
2264
2262
|
},
|
2265
2263
|
title
|
2266
2264
|
)),
|
2267
|
-
/* @__PURE__ */
|
2265
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
2268
2266
|
react.AccordionIcon,
|
2269
2267
|
{
|
2270
2268
|
color: variant === "service" ? "white" : "darkGrey"
|
2271
2269
|
}
|
2272
2270
|
)
|
2273
|
-
)), /* @__PURE__ */
|
2271
|
+
)), /* @__PURE__ */ React85__namespace.default.createElement(react.AccordionPanel, { color: variant === "service" ? "white" : "darkGrey" }, children))
|
2274
2272
|
));
|
2275
2273
|
};
|
2276
2274
|
var StaticAlert = ({
|
@@ -2278,7 +2276,7 @@ var StaticAlert = ({
|
|
2278
2276
|
title,
|
2279
2277
|
...props
|
2280
2278
|
}) => {
|
2281
|
-
return /* @__PURE__ */
|
2279
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(BaseAlert, { ...props }, /* @__PURE__ */ React85__namespace.default.createElement(AlertIcon, { variant: props.variant }), /* @__PURE__ */ React85__namespace.default.createElement(react.Flex, { direction: "column", gap: title ? 2 : void 0, textAlign: "left" }, title && /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { fontWeight: "bold" }, title), /* @__PURE__ */ React85__namespace.default.createElement(react.Box, null, children)));
|
2282
2280
|
};
|
2283
2281
|
var ServiceAlert = ({
|
2284
2282
|
variant = "service",
|
@@ -2294,7 +2292,7 @@ var ServiceAlert = ({
|
|
2294
2292
|
}) => {
|
2295
2293
|
const { t } = useTranslation();
|
2296
2294
|
const styles2 = react.useMultiStyleConfig("AlertService", { variant });
|
2297
|
-
return /* @__PURE__ */
|
2295
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
2298
2296
|
BaseAlert,
|
2299
2297
|
{
|
2300
2298
|
variant,
|
@@ -2303,7 +2301,7 @@ var ServiceAlert = ({
|
|
2303
2301
|
paddingY: 0,
|
2304
2302
|
sx: styles2.outerBox
|
2305
2303
|
},
|
2306
|
-
/* @__PURE__ */
|
2304
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
2307
2305
|
react.Accordion,
|
2308
2306
|
{
|
2309
2307
|
onChange: (expandedIndex) => onToggle(expandedIndex === 0),
|
@@ -2313,7 +2311,7 @@ var ServiceAlert = ({
|
|
2313
2311
|
sx: { outline: "none" },
|
2314
2312
|
variant
|
2315
2313
|
},
|
2316
|
-
/* @__PURE__ */
|
2314
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.AccordionItem, null, /* @__PURE__ */ React85__namespace.default.createElement(react.AccordionButton, { sx: styles2.container }, /* @__PURE__ */ React85__namespace.default.createElement(
|
2317
2315
|
react.Stack,
|
2318
2316
|
{
|
2319
2317
|
flexDirection: "row",
|
@@ -2321,7 +2319,7 @@ var ServiceAlert = ({
|
|
2321
2319
|
width: "100%",
|
2322
2320
|
paddingX: 2
|
2323
2321
|
},
|
2324
|
-
/* @__PURE__ */
|
2322
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
2325
2323
|
react.Flex,
|
2326
2324
|
{
|
2327
2325
|
justifyContent: "space-between",
|
@@ -2329,7 +2327,7 @@ var ServiceAlert = ({
|
|
2329
2327
|
flexGrow: 1,
|
2330
2328
|
maxWidth: contentWidth
|
2331
2329
|
},
|
2332
|
-
/* @__PURE__ */
|
2330
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.Flex, { as: headingLevel, alignItems: "center" }, /* @__PURE__ */ React85__namespace.default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React85__namespace.default.createElement(
|
2333
2331
|
react.Box,
|
2334
2332
|
{
|
2335
2333
|
as: "span",
|
@@ -2343,9 +2341,9 @@ var ServiceAlert = ({
|
|
2343
2341
|
},
|
2344
2342
|
title
|
2345
2343
|
)),
|
2346
|
-
/* @__PURE__ */
|
2344
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.Flex, { alignItems: "center" }, notification && /* @__PURE__ */ React85__namespace.default.createElement(react.Text, { sx: styles2.notificationText }, t(texts13.notification(notification))), /* @__PURE__ */ React85__namespace.default.createElement(react.AccordionIcon, null))
|
2347
2345
|
)
|
2348
|
-
)), /* @__PURE__ */
|
2346
|
+
)), /* @__PURE__ */ React85__namespace.default.createElement(react.AccordionPanel, { sx: styles2.serviceMessageContent }, /* @__PURE__ */ React85__namespace.default.createElement(react.Stack, { flexDirection: "row", justifyContent: "center", width: "100%" }, /* @__PURE__ */ React85__namespace.default.createElement(
|
2349
2347
|
react.Stack,
|
2350
2348
|
{
|
2351
2349
|
justifyContent: "center",
|
@@ -2383,10 +2381,10 @@ var texts13 = createTexts({
|
|
2383
2381
|
});
|
2384
2382
|
var Breadcrumb = (props) => {
|
2385
2383
|
const iconColor = react.useColorModeValue("blackAlpha.400", "whiteAlpha.400");
|
2386
|
-
return /* @__PURE__ */
|
2384
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
2387
2385
|
react.Breadcrumb,
|
2388
2386
|
{
|
2389
|
-
separator: /* @__PURE__ */
|
2387
|
+
separator: /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.DropdownRightFill18Icon, { color: iconColor }),
|
2390
2388
|
...props
|
2391
2389
|
}
|
2392
2390
|
);
|
@@ -2395,7 +2393,7 @@ var BreadcrumbItem = react.BreadcrumbItem;
|
|
2395
2393
|
var BreadcrumbLink = react.BreadcrumbLink;
|
2396
2394
|
var Badge = react.forwardRef(
|
2397
2395
|
({ icon, colorScheme = "grey", children, ...props }, ref) => {
|
2398
|
-
return /* @__PURE__ */
|
2396
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
2399
2397
|
react.Badge,
|
2400
2398
|
{
|
2401
2399
|
colorScheme,
|
@@ -2403,12 +2401,12 @@ var Badge = react.forwardRef(
|
|
2403
2401
|
paddingLeft: icon ? 1 : void 0,
|
2404
2402
|
ref
|
2405
2403
|
},
|
2406
|
-
icon &&
|
2404
|
+
icon && React85__namespace.default.cloneElement(icon, { marginRight: 1 }),
|
2407
2405
|
children
|
2408
2406
|
);
|
2409
2407
|
}
|
2410
2408
|
);
|
2411
|
-
var Code = react.forwardRef((props, ref) => /* @__PURE__ */
|
2409
|
+
var Code = react.forwardRef((props, ref) => /* @__PURE__ */ React85__namespace.default.createElement(react.Code, { ...props, ref }));
|
2412
2410
|
var Heading2 = ({
|
2413
2411
|
as,
|
2414
2412
|
variant = "xl-display",
|
@@ -2418,11 +2416,11 @@ var Heading2 = ({
|
|
2418
2416
|
}) => {
|
2419
2417
|
const id = externalId ?? (autoId && typeof props.children === "string" ? slugify(props.children) : void 0);
|
2420
2418
|
const color = react.useColorModeValue("text.primary.light", "text.primary.dark");
|
2421
|
-
return /* @__PURE__ */
|
2419
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Text, { as, textStyle: variant, id, color, ...props });
|
2422
2420
|
};
|
2423
2421
|
var Text5 = react.forwardRef(
|
2424
2422
|
({ variant = "sm", ...props }, ref) => {
|
2425
|
-
return /* @__PURE__ */
|
2423
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Text, { ...props, textStyle: variant, ref });
|
2426
2424
|
}
|
2427
2425
|
);
|
2428
2426
|
function CalendarCell({
|
@@ -2431,7 +2429,7 @@ function CalendarCell({
|
|
2431
2429
|
currentMonth,
|
2432
2430
|
variant
|
2433
2431
|
}) {
|
2434
|
-
const ref =
|
2432
|
+
const ref = React85.useRef(null);
|
2435
2433
|
const {
|
2436
2434
|
cellProps,
|
2437
2435
|
buttonProps,
|
@@ -2455,7 +2453,7 @@ function CalendarCell({
|
|
2455
2453
|
if (isOutsideMonth) {
|
2456
2454
|
stateProps["data-unavailable"] = true;
|
2457
2455
|
}
|
2458
|
-
|
2456
|
+
React85.useEffect(() => {
|
2459
2457
|
var _a;
|
2460
2458
|
(_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.addEventListener(
|
2461
2459
|
"touchend",
|
@@ -2465,7 +2463,7 @@ function CalendarCell({
|
|
2465
2463
|
{ passive: false, once: true }
|
2466
2464
|
);
|
2467
2465
|
}, []);
|
2468
|
-
return /* @__PURE__ */
|
2466
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { as: "td", ...cellProps, textAlign: "center", sx: styles2.cell }, /* @__PURE__ */ React85__namespace.default.createElement(
|
2469
2467
|
react.Box,
|
2470
2468
|
{
|
2471
2469
|
as: "button",
|
@@ -2527,8 +2525,8 @@ function CalendarGrid({
|
|
2527
2525
|
const weeksInMonth = date.getWeeksInMonth(state.visibleRange.start, locale);
|
2528
2526
|
const weeksInMonthRange = new Array(weeksInMonth).fill(0).map((_, i) => i);
|
2529
2527
|
const styles2 = react.useMultiStyleConfig("Datepicker", { variant });
|
2530
|
-
return /* @__PURE__ */
|
2531
|
-
return /* @__PURE__ */
|
2528
|
+
return /* @__PURE__ */ React85__namespace.default.createElement("table", { ...gridProps }, /* @__PURE__ */ React85__namespace.default.createElement("thead", { ...headerProps }, /* @__PURE__ */ React85__namespace.default.createElement("tr", null, weekDays[language].map((day, index) => {
|
2529
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
2532
2530
|
Text5,
|
2533
2531
|
{
|
2534
2532
|
as: "th",
|
@@ -2538,8 +2536,8 @@ function CalendarGrid({
|
|
2538
2536
|
},
|
2539
2537
|
day
|
2540
2538
|
);
|
2541
|
-
}))), /* @__PURE__ */
|
2542
|
-
(date, dayIndex) => date ? /* @__PURE__ */
|
2539
|
+
}))), /* @__PURE__ */ React85__namespace.default.createElement("tbody", null, weeksInMonthRange.map((weekIndex) => /* @__PURE__ */ React85__namespace.default.createElement("tr", { key: weekIndex }, state.getDatesInWeek(weekIndex, startDate).map(
|
2540
|
+
(date, dayIndex) => date ? /* @__PURE__ */ React85__namespace.default.createElement(
|
2543
2541
|
CalendarCell,
|
2544
2542
|
{
|
2545
2543
|
variant,
|
@@ -2548,7 +2546,7 @@ function CalendarGrid({
|
|
2548
2546
|
date,
|
2549
2547
|
currentMonth: startDate
|
2550
2548
|
}
|
2551
|
-
) : /* @__PURE__ */
|
2549
|
+
) : /* @__PURE__ */ React85__namespace.default.createElement("td", { key: dayIndex })
|
2552
2550
|
)))));
|
2553
2551
|
}
|
2554
2552
|
function CalendarNavigationButton({
|
@@ -2556,9 +2554,9 @@ function CalendarNavigationButton({
|
|
2556
2554
|
"aria-label": ariaLabel,
|
2557
2555
|
...rest
|
2558
2556
|
}) {
|
2559
|
-
const ref =
|
2557
|
+
const ref = React85.useRef(null);
|
2560
2558
|
const { buttonProps } = reactAria.useButton(rest, ref);
|
2561
|
-
return /* @__PURE__ */
|
2559
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
2562
2560
|
IconButton,
|
2563
2561
|
{
|
2564
2562
|
...buttonProps,
|
@@ -2592,7 +2590,7 @@ function CalendarHeader({
|
|
2592
2590
|
);
|
2593
2591
|
const areAllOtherYearsDisabled = isPreviousYearDisabled && isNextYearDisabled;
|
2594
2592
|
const isYearPickerVisible = showYearNavigation && !areAllOtherYearsDisabled;
|
2595
|
-
return /* @__PURE__ */
|
2593
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Flex, { alignItems: "center", paddingBottom: "4", justifyContent: "space-between" }, /* @__PURE__ */ React85__namespace.default.createElement(
|
2596
2594
|
CalendarNavigator,
|
2597
2595
|
{
|
2598
2596
|
title: title ? title : isYearPickerVisible ? monthTitle : monthAndYearTitle,
|
@@ -2602,7 +2600,7 @@ function CalendarHeader({
|
|
2602
2600
|
isNextDisabled: !state.isPreviousVisibleRangeInvalid,
|
2603
2601
|
isPreviousDisabled: !state.isNextVisibleRangeInvalid
|
2604
2602
|
}
|
2605
|
-
), isYearPickerVisible && /* @__PURE__ */
|
2603
|
+
), isYearPickerVisible && /* @__PURE__ */ React85__namespace.default.createElement(
|
2606
2604
|
CalendarNavigator,
|
2607
2605
|
{
|
2608
2606
|
title: jsDate.getFullYear().toString(),
|
@@ -2624,15 +2622,15 @@ var CalendarNavigator = ({
|
|
2624
2622
|
isNextDisabled
|
2625
2623
|
}) => {
|
2626
2624
|
const { t } = useTranslation();
|
2627
|
-
return /* @__PURE__ */
|
2625
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Flex, { alignItems: "center", flexGrow: 1 }, /* @__PURE__ */ React85__namespace.default.createElement(
|
2628
2626
|
CalendarNavigationButton,
|
2629
2627
|
{
|
2630
2628
|
onPress: onPrevious,
|
2631
2629
|
isDisabled: isPreviousDisabled,
|
2632
|
-
icon: /* @__PURE__ */
|
2630
|
+
icon: /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.ArrowLeftOutline24Icon, null),
|
2633
2631
|
"aria-label": `${t(texts14.previous)} ${t(texts14[unit])}`
|
2634
2632
|
}
|
2635
|
-
), /* @__PURE__ */
|
2633
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
2636
2634
|
react.Box,
|
2637
2635
|
{
|
2638
2636
|
role: "heading",
|
@@ -2642,12 +2640,12 @@ var CalendarNavigator = ({
|
|
2642
2640
|
textAlign: "center"
|
2643
2641
|
},
|
2644
2642
|
capitalize(title)
|
2645
|
-
), /* @__PURE__ */
|
2643
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
2646
2644
|
CalendarNavigationButton,
|
2647
2645
|
{
|
2648
2646
|
onPress: onNext,
|
2649
2647
|
isDisabled: isNextDisabled,
|
2650
|
-
icon: /* @__PURE__ */
|
2648
|
+
icon: /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.ArrowRightOutline24Icon, null),
|
2651
2649
|
"aria-label": `${t(texts14.next)} ${t(texts14[unit])}`
|
2652
2650
|
}
|
2653
2651
|
));
|
@@ -2695,7 +2693,7 @@ function Calendar({
|
|
2695
2693
|
const { calendarProps } = reactAria.useCalendar(props, state);
|
2696
2694
|
const calendarAriaLabel = calendarProps["aria-label"];
|
2697
2695
|
const ariaLabel = t(texts15.calendar) + (calendarAriaLabel ? ` ${calendarAriaLabel}` : "");
|
2698
|
-
return /* @__PURE__ */
|
2696
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { ...calendarProps, "aria-label": ariaLabel }, /* @__PURE__ */ React85__namespace.default.createElement(CalendarHeader, { state, showYearNavigation }), /* @__PURE__ */ React85__namespace.default.createElement(CalendarGrid, { variant, state }));
|
2699
2697
|
}
|
2700
2698
|
var texts15 = createTexts({
|
2701
2699
|
calendar: {
|
@@ -2716,12 +2714,12 @@ var CalendarTriggerButton = react.forwardRef(
|
|
2716
2714
|
onPress == null ? void 0 : onPress(event);
|
2717
2715
|
}
|
2718
2716
|
};
|
2719
|
-
return /* @__PURE__ */
|
2717
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React85__namespace.default.createElement(
|
2720
2718
|
IconButton,
|
2721
2719
|
{
|
2722
2720
|
ref,
|
2723
2721
|
role: "button",
|
2724
|
-
icon: /* @__PURE__ */
|
2722
|
+
icon: /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.CalendarOutline24Icon, null),
|
2725
2723
|
"aria-label": t(texts16.openCalendar),
|
2726
2724
|
sx: styles2.calendarTriggerButton,
|
2727
2725
|
variant: "ghost",
|
@@ -2741,9 +2739,9 @@ var texts16 = createTexts({
|
|
2741
2739
|
en: "Open calendar"
|
2742
2740
|
}
|
2743
2741
|
});
|
2744
|
-
var DateTimeSegment =
|
2742
|
+
var DateTimeSegment = React85.forwardRef(
|
2745
2743
|
({ segment, state, ariaLabel, ariaDescription }, externalRef) => {
|
2746
|
-
const internalRef =
|
2744
|
+
const internalRef = React85.useRef(null);
|
2747
2745
|
const ref = externalRef ?? internalRef;
|
2748
2746
|
const { segmentProps } = reactAria.useDateSegment(
|
2749
2747
|
segment,
|
@@ -2754,7 +2752,7 @@ var DateTimeSegment = React86.forwardRef(
|
|
2754
2752
|
isPlaceholder: segment.isPlaceholder,
|
2755
2753
|
isEditable: segment.isEditable
|
2756
2754
|
});
|
2757
|
-
return /* @__PURE__ */
|
2755
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
2758
2756
|
react.Box,
|
2759
2757
|
{
|
2760
2758
|
...segmentProps,
|
@@ -2786,7 +2784,7 @@ function createCalendar2(identifier) {
|
|
2786
2784
|
throw new Error(`Unsupported calendar ${identifier}`);
|
2787
2785
|
}
|
2788
2786
|
}
|
2789
|
-
var DateField =
|
2787
|
+
var DateField = React85.forwardRef(
|
2790
2788
|
({ labelId, ...props }, externalRef) => {
|
2791
2789
|
var _a;
|
2792
2790
|
const locale = useCurrentLocale();
|
@@ -2797,14 +2795,14 @@ var DateField = React86.forwardRef(
|
|
2797
2795
|
createCalendar: createCalendar2
|
2798
2796
|
});
|
2799
2797
|
const { t } = useTranslation();
|
2800
|
-
const internalRef =
|
2798
|
+
const internalRef = React85.useRef(null);
|
2801
2799
|
const ref = externalRef ?? internalRef;
|
2802
2800
|
const { fieldProps } = reactAria.useDateField(
|
2803
2801
|
props,
|
2804
2802
|
state,
|
2805
2803
|
ref
|
2806
2804
|
);
|
2807
|
-
return /* @__PURE__ */
|
2805
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { minWidth: "6rem", width: "100%" }, props.label && /* @__PURE__ */ React85__namespace.default.createElement(
|
2808
2806
|
react.FormLabel,
|
2809
2807
|
{
|
2810
2808
|
sx: styles2.inputLabel,
|
@@ -2813,7 +2811,7 @@ var DateField = React86.forwardRef(
|
|
2813
2811
|
id: labelId
|
2814
2812
|
},
|
2815
2813
|
props.label
|
2816
|
-
), /* @__PURE__ */
|
2814
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5" }, state.segments.map((segment, i) => /* @__PURE__ */ React85__namespace.default.createElement(
|
2817
2815
|
DateTimeSegment,
|
2818
2816
|
{
|
2819
2817
|
key: i,
|
@@ -2822,7 +2820,7 @@ var DateField = React86.forwardRef(
|
|
2822
2820
|
ariaLabel: labelId,
|
2823
2821
|
state
|
2824
2822
|
}
|
2825
|
-
))), /* @__PURE__ */
|
2823
|
+
))), /* @__PURE__ */ React85__namespace.default.createElement(
|
2826
2824
|
"input",
|
2827
2825
|
{
|
2828
2826
|
type: "hidden",
|
@@ -2870,7 +2868,7 @@ var StyledField = react.forwardRef(
|
|
2870
2868
|
isInvalid: false
|
2871
2869
|
};
|
2872
2870
|
const styles2 = react.useMultiStyleConfig("Datepicker", { variant });
|
2873
|
-
return /* @__PURE__ */
|
2871
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
2874
2872
|
react.Box,
|
2875
2873
|
{
|
2876
2874
|
...otherProps,
|
@@ -2886,7 +2884,7 @@ var StyledField = react.forwardRef(
|
|
2886
2884
|
);
|
2887
2885
|
|
2888
2886
|
// src/datepicker/DatePicker.tsx
|
2889
|
-
var DatePicker =
|
2887
|
+
var DatePicker = React85.forwardRef(
|
2890
2888
|
({
|
2891
2889
|
variant,
|
2892
2890
|
errorMessage,
|
@@ -2904,7 +2902,7 @@ var DatePicker = React86.forwardRef(
|
|
2904
2902
|
isRequired: props.isRequired ?? (formControlProps == null ? void 0 : formControlProps.isRequired),
|
2905
2903
|
validationState: (formControlProps == null ? void 0 : formControlProps.isInvalid) ? "invalid" : "valid"
|
2906
2904
|
});
|
2907
|
-
const internalRef =
|
2905
|
+
const internalRef = React85.useRef(null);
|
2908
2906
|
const ref = externalRef ?? internalRef;
|
2909
2907
|
const {
|
2910
2908
|
labelProps,
|
@@ -2918,14 +2916,14 @@ var DatePicker = React86.forwardRef(
|
|
2918
2916
|
state,
|
2919
2917
|
ref
|
2920
2918
|
);
|
2921
|
-
const labelId = `label-${
|
2922
|
-
const inputGroupId = `input-group-${
|
2919
|
+
const labelId = `label-${React85.useId()}`;
|
2920
|
+
const inputGroupId = `input-group-${React85.useId()}`;
|
2923
2921
|
const styles2 = react.useMultiStyleConfig("Datepicker", { variant });
|
2924
2922
|
const locale = useCurrentLocale();
|
2925
2923
|
const onFieldClick = () => {
|
2926
2924
|
state.setOpen(true);
|
2927
2925
|
};
|
2928
|
-
const popoverContent = /* @__PURE__ */
|
2926
|
+
const popoverContent = /* @__PURE__ */ React85__namespace.default.createElement(react.PopoverContent, { color: "darkGrey", sx: styles2.calendarPopover }, /* @__PURE__ */ React85__namespace.default.createElement(react.PopoverArrow, { sx: styles2.arrow }), /* @__PURE__ */ React85__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React85__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React85__namespace.default.createElement(
|
2929
2927
|
Calendar,
|
2930
2928
|
{
|
2931
2929
|
...calendarProps,
|
@@ -2933,7 +2931,7 @@ var DatePicker = React86.forwardRef(
|
|
2933
2931
|
showYearNavigation
|
2934
2932
|
}
|
2935
2933
|
))));
|
2936
|
-
return /* @__PURE__ */
|
2934
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React85__namespace.default.createElement(
|
2937
2935
|
react.Box,
|
2938
2936
|
{
|
2939
2937
|
position: "relative",
|
@@ -2941,7 +2939,7 @@ var DatePicker = React86.forwardRef(
|
|
2941
2939
|
flexDirection: "column",
|
2942
2940
|
width
|
2943
2941
|
},
|
2944
|
-
/* @__PURE__ */
|
2942
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
2945
2943
|
react.Popover,
|
2946
2944
|
{
|
2947
2945
|
...dialogProps,
|
@@ -2950,14 +2948,14 @@ var DatePicker = React86.forwardRef(
|
|
2950
2948
|
onClose: state.close,
|
2951
2949
|
flip: false
|
2952
2950
|
},
|
2953
|
-
/* @__PURE__ */
|
2951
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
2954
2952
|
react.InputGroup,
|
2955
2953
|
{
|
2956
2954
|
display: "inline-flex",
|
2957
2955
|
id: inputGroupId,
|
2958
2956
|
"aria-labelledby": labelId
|
2959
2957
|
},
|
2960
|
-
/* @__PURE__ */
|
2958
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React85__namespace.default.createElement(
|
2961
2959
|
StyledField,
|
2962
2960
|
{
|
2963
2961
|
variant,
|
@@ -2967,7 +2965,7 @@ var DatePicker = React86.forwardRef(
|
|
2967
2965
|
isDisabled: props.isDisabled,
|
2968
2966
|
ariaLabelledby: labelId
|
2969
2967
|
},
|
2970
|
-
/* @__PURE__ */
|
2968
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.PopoverTrigger, null, /* @__PURE__ */ React85__namespace.default.createElement(
|
2971
2969
|
CalendarTriggerButton,
|
2972
2970
|
{
|
2973
2971
|
variant,
|
@@ -2977,7 +2975,7 @@ var DatePicker = React86.forwardRef(
|
|
2977
2975
|
...buttonProps
|
2978
2976
|
}
|
2979
2977
|
)),
|
2980
|
-
/* @__PURE__ */
|
2978
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
2981
2979
|
DateField,
|
2982
2980
|
{
|
2983
2981
|
label: props.label,
|
@@ -2989,8 +2987,8 @@ var DatePicker = React86.forwardRef(
|
|
2989
2987
|
)
|
2990
2988
|
))
|
2991
2989
|
),
|
2992
|
-
/* @__PURE__ */
|
2993
|
-
state.isOpen && !props.isDisabled && withPortal && /* @__PURE__ */
|
2990
|
+
/* @__PURE__ */ React85__namespace.default.createElement(FormErrorMessage, { ...errorMessageProps }, errorMessage),
|
2991
|
+
state.isOpen && !props.isDisabled && withPortal && /* @__PURE__ */ React85__namespace.default.createElement(react.Portal, null, popoverContent),
|
2994
2992
|
state.isOpen && !props.isDisabled && !withPortal && popoverContent
|
2995
2993
|
)
|
2996
2994
|
));
|
@@ -3004,9 +3002,9 @@ function RangeCalendar(props) {
|
|
3004
3002
|
locale,
|
3005
3003
|
createCalendar: date.createCalendar
|
3006
3004
|
});
|
3007
|
-
const ref =
|
3005
|
+
const ref = React85.useRef(null);
|
3008
3006
|
const { calendarProps, title } = reactAria.useRangeCalendar(props, state, ref);
|
3009
|
-
return /* @__PURE__ */
|
3007
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { ...calendarProps, ref }, /* @__PURE__ */ React85__namespace.default.createElement(CalendarHeader, { state, title }), /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { display: "flex", gap: "8" }, /* @__PURE__ */ React85__namespace.default.createElement(CalendarGrid, { variant: props.variant, state }), /* @__PURE__ */ React85__namespace.default.createElement(
|
3010
3008
|
CalendarGrid,
|
3011
3009
|
{
|
3012
3010
|
variant: props.variant,
|
@@ -3032,7 +3030,7 @@ function DateRangePicker({
|
|
3032
3030
|
isRequired: props.isRequired ?? (formControlProps == null ? void 0 : formControlProps.isRequired),
|
3033
3031
|
validationState: formControlProps.isInvalid ? "invalid" : "valid"
|
3034
3032
|
});
|
3035
|
-
const ref =
|
3033
|
+
const ref = React85.useRef(null);
|
3036
3034
|
const {
|
3037
3035
|
groupProps,
|
3038
3036
|
labelProps,
|
@@ -3053,8 +3051,8 @@ function DateRangePicker({
|
|
3053
3051
|
const onFieldClick = () => {
|
3054
3052
|
state.setOpen(true);
|
3055
3053
|
};
|
3056
|
-
const popoverContent = /* @__PURE__ */
|
3057
|
-
return /* @__PURE__ */
|
3054
|
+
const popoverContent = /* @__PURE__ */ React85__namespace.default.createElement(react.PopoverContent, { sx: styles2.calendarPopover, maxWidth: "none" }, /* @__PURE__ */ React85__namespace.default.createElement(react.PopoverArrow, { sx: styles2.arrow }), /* @__PURE__ */ React85__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React85__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React85__namespace.default.createElement(RangeCalendar, { variant: "base", ...calendarProps }))));
|
3055
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, props.label && /* @__PURE__ */ React85__namespace.default.createElement(react.FormLabel, { ...labelProps, sx: styles2.inputLabel }, props.label), /* @__PURE__ */ React85__namespace.default.createElement(
|
3058
3056
|
react.Popover,
|
3059
3057
|
{
|
3060
3058
|
...dialogProps,
|
@@ -3063,7 +3061,7 @@ function DateRangePicker({
|
|
3063
3061
|
onClose: state.close,
|
3064
3062
|
flip: false
|
3065
3063
|
},
|
3066
|
-
/* @__PURE__ */
|
3064
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.InputGroup, { ...groupProps, width: "auto", display: "inline-flex" }, /* @__PURE__ */ React85__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React85__namespace.default.createElement(
|
3067
3065
|
StyledField,
|
3068
3066
|
{
|
3069
3067
|
alignItems: "center",
|
@@ -3073,7 +3071,7 @@ function DateRangePicker({
|
|
3073
3071
|
onKeyPress: handleEnterClick,
|
3074
3072
|
minHeight
|
3075
3073
|
},
|
3076
|
-
variant && /* @__PURE__ */
|
3074
|
+
variant && /* @__PURE__ */ React85__namespace.default.createElement(react.PopoverTrigger, null, /* @__PURE__ */ React85__namespace.default.createElement(
|
3077
3075
|
CalendarTriggerButton,
|
3078
3076
|
{
|
3079
3077
|
paddingLeft: 1,
|
@@ -3083,7 +3081,7 @@ function DateRangePicker({
|
|
3083
3081
|
...buttonProps
|
3084
3082
|
}
|
3085
3083
|
)),
|
3086
|
-
/* @__PURE__ */
|
3084
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
3087
3085
|
DateField,
|
3088
3086
|
{
|
3089
3087
|
...startFieldProps,
|
@@ -3092,8 +3090,8 @@ function DateRangePicker({
|
|
3092
3090
|
labelProps
|
3093
3091
|
}
|
3094
3092
|
),
|
3095
|
-
/* @__PURE__ */
|
3096
|
-
/* @__PURE__ */
|
3093
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.Box, { as: "span", "aria-hidden": "true", paddingRight: "2" }, "\u2013"),
|
3094
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
3097
3095
|
DateField,
|
3098
3096
|
{
|
3099
3097
|
...endFieldProps,
|
@@ -3103,14 +3101,14 @@ function DateRangePicker({
|
|
3103
3101
|
}
|
3104
3102
|
)
|
3105
3103
|
))),
|
3106
|
-
state.isOpen && withPortal && /* @__PURE__ */
|
3104
|
+
state.isOpen && withPortal && /* @__PURE__ */ React85__namespace.default.createElement(react.Portal, null, popoverContent),
|
3107
3105
|
state.isOpen && !withPortal && popoverContent
|
3108
3106
|
)));
|
3109
3107
|
}
|
3110
3108
|
var TimeField = ({ state, ...props }) => {
|
3111
|
-
const ref =
|
3109
|
+
const ref = React85.useRef(null);
|
3112
3110
|
const { labelProps, fieldProps } = reactAria.useTimeField(props, state, ref);
|
3113
|
-
return /* @__PURE__ */
|
3111
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, null, /* @__PURE__ */ React85__namespace.default.createElement(
|
3114
3112
|
FormLabel,
|
3115
3113
|
{
|
3116
3114
|
...labelProps,
|
@@ -3122,7 +3120,7 @@ var TimeField = ({ state, ...props }) => {
|
|
3122
3120
|
paddingTop: "2px"
|
3123
3121
|
},
|
3124
3122
|
props.label
|
3125
|
-
), /* @__PURE__ */
|
3123
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5" }, state.segments.map((segment) => /* @__PURE__ */ React85__namespace.default.createElement(DateTimeSegment, { key: segment.type, segment, state }))), /* @__PURE__ */ React85__namespace.default.createElement(
|
3126
3124
|
"input",
|
3127
3125
|
{
|
3128
3126
|
type: "hidden",
|
@@ -3191,7 +3189,7 @@ var TimePicker = ({
|
|
3191
3189
|
const ariaLabel = `${inputLabel} \u2013 ${t(
|
3192
3190
|
texts18.selectedTimeIs(`${(dateTime == null ? void 0 : dateTime.hour) ?? 0} ${(dateTime == null ? void 0 : dateTime.minute) ?? 0}`)
|
3193
3191
|
)}`;
|
3194
|
-
return /* @__PURE__ */
|
3192
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
3195
3193
|
StyledField,
|
3196
3194
|
{
|
3197
3195
|
variant: "base",
|
@@ -3207,7 +3205,7 @@ var TimePicker = ({
|
|
3207
3205
|
"aria-label": ariaLabel,
|
3208
3206
|
...boxProps
|
3209
3207
|
},
|
3210
|
-
/* @__PURE__ */
|
3208
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
3211
3209
|
IconButton,
|
3212
3210
|
{
|
3213
3211
|
variant: "ghost",
|
@@ -3215,14 +3213,14 @@ var TimePicker = ({
|
|
3215
3213
|
borderRadius: "xs",
|
3216
3214
|
"aria-label": backwardsLabel,
|
3217
3215
|
title: backwardsLabel,
|
3218
|
-
icon: /* @__PURE__ */
|
3216
|
+
icon: /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.DropdownLeftFill18Icon, null),
|
3219
3217
|
onClick: handleBackwardsClick,
|
3220
3218
|
isDisabled,
|
3221
3219
|
style: isDisabled ? { backgroundColor: "transparent" } : {}
|
3222
3220
|
}
|
3223
3221
|
),
|
3224
|
-
/* @__PURE__ */
|
3225
|
-
/* @__PURE__ */
|
3222
|
+
/* @__PURE__ */ React85__namespace.default.createElement(TimeField, { label, state, name }),
|
3223
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
3226
3224
|
IconButton,
|
3227
3225
|
{
|
3228
3226
|
variant: "ghost",
|
@@ -3230,7 +3228,7 @@ var TimePicker = ({
|
|
3230
3228
|
borderRadius: "xs",
|
3231
3229
|
"aria-label": forwardsLabel,
|
3232
3230
|
title: forwardsLabel,
|
3233
|
-
icon: /* @__PURE__ */
|
3231
|
+
icon: /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.DropdownRightFill18Icon, null),
|
3234
3232
|
onClick: handleForwardClick,
|
3235
3233
|
isDisabled,
|
3236
3234
|
style: isDisabled ? { backgroundColor: "transparent" } : {}
|
@@ -3332,7 +3330,7 @@ var LineIcon = ({
|
|
3332
3330
|
if (!Icon) {
|
3333
3331
|
return null;
|
3334
3332
|
}
|
3335
|
-
return /* @__PURE__ */
|
3333
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { sx: { ...styles2.iconContainer, ...sx } }, /* @__PURE__ */ React85__namespace.default.createElement(Icon, { sx: styles2.icon }));
|
3336
3334
|
};
|
3337
3335
|
|
3338
3336
|
// src/linjetag/InfoTag.tsx
|
@@ -3348,7 +3346,7 @@ var InfoTag = ({
|
|
3348
3346
|
size,
|
3349
3347
|
...customProps
|
3350
3348
|
});
|
3351
|
-
return /* @__PURE__ */
|
3349
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { sx: styles2.container }, /* @__PURE__ */ React85__namespace.default.createElement(
|
3352
3350
|
LineIcon,
|
3353
3351
|
{
|
3354
3352
|
variant,
|
@@ -3356,7 +3354,7 @@ var InfoTag = ({
|
|
3356
3354
|
sx: styles2.iconContainer,
|
3357
3355
|
...customProps
|
3358
3356
|
}
|
3359
|
-
), /* @__PURE__ */
|
3357
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { sx: styles2.textContainer }, title && /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { as: "span", sx: styles2.title }, title), title && description && " ", description && /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { as: "span", sx: styles2.description }, description)));
|
3360
3358
|
};
|
3361
3359
|
var TravelTag = react.forwardRef(
|
3362
3360
|
({
|
@@ -3379,7 +3377,7 @@ var TravelTag = react.forwardRef(
|
|
3379
3377
|
backgroundColor: variant === "custom" ? backgroundColor : void 0
|
3380
3378
|
});
|
3381
3379
|
const DeviationLevelIcon = getDeviationLevelIcon({ deviationLevel, size });
|
3382
|
-
return /* @__PURE__ */
|
3380
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { sx: styles2.container, "aria-disabled": isDisabled, ref, ...rest }, /* @__PURE__ */ React85__namespace.default.createElement(
|
3383
3381
|
LineIcon,
|
3384
3382
|
{
|
3385
3383
|
variant,
|
@@ -3390,7 +3388,7 @@ var TravelTag = react.forwardRef(
|
|
3390
3388
|
customIconVariant,
|
3391
3389
|
...rest
|
3392
3390
|
}
|
3393
|
-
), /* @__PURE__ */
|
3391
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { sx: styles2.textContainer }, title && /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { as: "span", sx: styles2.title }, title), title && description && " ", description && /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { as: "span", sx: styles2.description }, description)), DeviationLevelIcon && /* @__PURE__ */ React85__namespace.default.createElement(DeviationLevelIcon, { sx: styles2.deviationIcon }));
|
3394
3392
|
}
|
3395
3393
|
);
|
3396
3394
|
var getDeviationLevelIcon = ({
|
@@ -3414,7 +3412,7 @@ var TextLink = react.forwardRef(
|
|
3414
3412
|
var _a;
|
3415
3413
|
const { t } = useTranslation();
|
3416
3414
|
const isExternal = props.isExternal !== void 0 ? props.isExternal : Boolean((_a = props.href) == null ? void 0 : _a.match(/^https?:\/\//));
|
3417
|
-
return /* @__PURE__ */
|
3415
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Link, { ...props, ref, isExternal }, children, isExternal && /* @__PURE__ */ React85__namespace.default.createElement(
|
3418
3416
|
sporIconReact.LinkOutOutline24Icon,
|
3419
3417
|
{
|
3420
3418
|
marginLeft: 0.5,
|
@@ -3434,8 +3432,8 @@ var texts19 = createTexts({
|
|
3434
3432
|
var VyLogo = ({ colorScheme, ...boxProps }) => {
|
3435
3433
|
const mainColor = colorScheme === "light" ? "#1d211c" : "#ffffff";
|
3436
3434
|
const accentColor = colorScheme === "light" ? "#138c6e" : "#ffffff";
|
3437
|
-
const id =
|
3438
|
-
return /* @__PURE__ */
|
3435
|
+
const id = React85.useId();
|
3436
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { as: "svg", viewBox: "0 0 107 54", ...boxProps }, /* @__PURE__ */ React85__namespace.default.createElement("title", null, "Vy logo"), /* @__PURE__ */ React85__namespace.default.createElement(
|
3439
3437
|
"path",
|
3440
3438
|
{
|
3441
3439
|
fillRule: "evenodd",
|
@@ -3443,7 +3441,7 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
|
|
3443
3441
|
d: "M79.97 33.44a.04.04 0 0 0 0-.08 5.76 5.76 0 0 1-2.32-.85c-1.56-1-2.79-2.9-3.83-6.07L68.14 7.16c-1.18-4.04-3.42-5.85-5.48-6.6a8.36 8.36 0 0 0-2.88-.52h-1.44a.04.04 0 0 0 0 .08c.57.09 1.18.24 1.8.5 1.92.8 3.92 2.63 5.06 6.54l5.61 19.07c1.06 3.3 2.31 5.27 3.92 6.3 1.01.64 2.17.9 3.5.9h1.74Z",
|
3444
3442
|
fill: mainColor
|
3445
3443
|
}
|
3446
|
-
), /* @__PURE__ */
|
3444
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3447
3445
|
"mask",
|
3448
3446
|
{
|
3449
3447
|
id: `${id}-a`,
|
@@ -3454,7 +3452,7 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
|
|
3454
3452
|
width: "94",
|
3455
3453
|
height: "54"
|
3456
3454
|
},
|
3457
|
-
/* @__PURE__ */
|
3455
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
3458
3456
|
"path",
|
3459
3457
|
{
|
3460
3458
|
fillRule: "evenodd",
|
@@ -3463,7 +3461,7 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
|
|
3463
3461
|
fill: mainColor
|
3464
3462
|
}
|
3465
3463
|
)
|
3466
|
-
), /* @__PURE__ */
|
3464
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3467
3465
|
"g",
|
3468
3466
|
{
|
3469
3467
|
mask: `url(#${id}-a)`,
|
@@ -3471,9 +3469,9 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
|
|
3471
3469
|
clipRule: "evenodd",
|
3472
3470
|
fill: mainColor
|
3473
3471
|
},
|
3474
|
-
/* @__PURE__ */
|
3475
|
-
/* @__PURE__ */
|
3476
|
-
), /* @__PURE__ */
|
3472
|
+
/* @__PURE__ */ React85__namespace.default.createElement("path", { d: "M84.57 33.44a.04.04 0 0 0 .01-.08c-2.34-.3-3.85-3.59-4.68-6.38-.88-2.93-4.04-13.63-5.92-19.82C72.08.94 66.2.05 63.54.04a.04.04 0 0 0-.01.08c2.49.34 6.02 1.85 7.55 7.04 1.34 4.55 5.6 19.03 5.76 19.51 1.02 3.03 2.22 4.85 3.73 5.83a6.3 6.3 0 0 0 3.54.94h.46ZM23.28 53.68h-.72c-2.12 0-4.68-1.08-6.09-6.04L3.8 4.37C3.04 1.77 1.93.47.03.15A.04.04 0 0 1 .04.07h1.9c2.54 0 3.92 1.27 4.8 4.3 0 0 11.72 39.78 12.79 43.54.78 2.78 1.7 4.67 3.13 5.43.23.13.42.2.62.26a.04.04 0 0 1 0 .08ZM18.99 5.99C17.77 1.79 15.87.04 12.37.04h-1.71a.04.04 0 0 0 0 .08c2.73.39 4.32 2.19 5.39 5.87 0 0 10.49 35.72 11.85 40.4l1.44-4.87L18.99 6Z" }),
|
3473
|
+
/* @__PURE__ */ React85__namespace.default.createElement("path", { d: "M24.26 53.68h1.24c1.57 0 2.69-.41 3.52-1.1 1.37-1.1 1.99-2.93 2.56-4.86.09-.29 11.2-37.95 11.59-39.42 1.32-4.97 4.27-7.13 7.43-7.9a12.2 12.2 0 0 1 1.58-.28.04.04 0 0 0 0-.08h-1.4c-4.15 0-8.8 1.65-10.56 8.26-.63 2.38-11.5 39.13-11.58 39.42-.57 1.93-1.23 3.96-2.59 5.07-.56.45-1.06.7-1.8.81a.04.04 0 0 0 0 .08ZM81.3 27.76l6.53-21.78C88.89 2.3 90.49.5 93.23.11a.04.04 0 0 0-.01-.08H91.5c-3.5 0-5.4 1.76-6.62 5.95l-5.05 16.97s1.33 4.46 1.46 4.8Z" })
|
3474
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3477
3475
|
"path",
|
3478
3476
|
{
|
3479
3477
|
fillRule: "evenodd",
|
@@ -3481,7 +3479,7 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
|
|
3481
3479
|
d: "M98.49.07h-1.82c-2.98 0-4.6 1.49-5.63 5.06l-6.52 21.79a18.22 18.22 0 0 1-1.67 3.96c.57.78 1.17 1.26 1.76 1.38 1.13-.96 2.06-2.75 2.89-5.46l6.49-21.67c.9-3.1 2.23-4.63 4.5-4.98a.04.04 0 0 0 0-.08Z",
|
3482
3480
|
fill: accentColor
|
3483
3481
|
}
|
3484
|
-
), /* @__PURE__ */
|
3482
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3485
3483
|
"path",
|
3486
3484
|
{
|
3487
3485
|
fillRule: "evenodd",
|
@@ -3489,7 +3487,7 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
|
|
3489
3487
|
d: "M85.25 34.53h-2.93L78.58 46.9c-1.82 6.1 1.05 6.73 2.15 6.73h2.31a.04.04 0 0 0 .01-.09c-1.25-.3-2.96-1.6-1.45-6.64l3.65-12.37ZM102.35.11c.02 0 .03-.02.03-.04a.04.04 0 0 0-.04-.04h-.4c-2.54 0-3.92 1.27-4.8 4.3 0 0-5 16.82-6.57 22.03-1.57 5.2-2.65 6.6-4.78 6.97l-.11.03a.04.04 0 0 0 0 .08h1.45c3.72 0 5.1-2.48 6.41-6.84l7.5-25.07c.19-.6.7-1.23 1.31-1.42Z",
|
3490
3488
|
fill: mainColor
|
3491
3489
|
}
|
3492
|
-
), /* @__PURE__ */
|
3490
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3493
3491
|
"mask",
|
3494
3492
|
{
|
3495
3493
|
id: `${id}-b`,
|
@@ -3500,7 +3498,7 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
|
|
3500
3498
|
width: "78",
|
3501
3499
|
height: "54"
|
3502
3500
|
},
|
3503
|
-
/* @__PURE__ */
|
3501
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
3504
3502
|
"path",
|
3505
3503
|
{
|
3506
3504
|
fillRule: "evenodd",
|
@@ -3509,25 +3507,25 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
|
|
3509
3507
|
fill: mainColor
|
3510
3508
|
}
|
3511
3509
|
)
|
3512
|
-
), /* @__PURE__ */
|
3510
|
+
), /* @__PURE__ */ React85__namespace.default.createElement("g", { mask: `url(#${id}-b)`, fillRule: "evenodd", clipRule: "evenodd" }, /* @__PURE__ */ React85__namespace.default.createElement(
|
3513
3511
|
"path",
|
3514
3512
|
{
|
3515
3513
|
d: "m88.2 34.45-3.96 13.46c-1.54 5.18.9 5.72 1.83 5.72h2.26a.04.04 0 0 0 0-.09c-1.05-.27-2.44-1.4-1.18-5.63l4.43-15.02c-.7.71-1.88 1.37-3.38 1.56ZM93.71 53.63c.02 0 .04-.02.04-.05a.04.04 0 0 0-.03-.04c-.9-.25-2.02-1.24-.96-4.77 0 0 12.4-42.2 13.08-44.6a3.1 3.1 0 0 0-2.47-4.1c-.02 0-.06-.02-.07.01-.01.04.03.06.04.06.3.16.63.52.45 1.14L89.84 48.77c-1.32 4.4.76 4.86 1.55 4.86h2.32ZM74.1 33.44a.04.04 0 0 0 0-.08 5.77 5.77 0 0 1-2.3-.83c-1.64-1.04-2.9-3.06-3.98-6.5-.1-.29-5.37-18.25-5.55-18.87-1.12-3.8-2.91-5.63-4.68-6.46a7.06 7.06 0 0 0-3.04-.66H53a.04.04 0 0 0-.02.08c.3.05 4.32.17 6.35 7.04 2.03 6.86 4.46 15.07 5.28 17.97 1.77 6.26 4.07 8.3 7.75 8.3h1.73Z",
|
3516
3514
|
fill: mainColor
|
3517
3515
|
}
|
3518
|
-
), /* @__PURE__ */
|
3516
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3519
3517
|
"path",
|
3520
3518
|
{
|
3521
3519
|
d: "M55.43 2.4c-1.48 1.27-2.7 3.16-3.44 5.9-.07.29-11.08 37.74-11.32 38.55-.93 3.12-1.7 6.21-5.2 6.75a.04.04 0 0 0 0 .08h.7l.6-.01c3.56-.14 5.33-1.66 6.85-6.82L54.94 8.3c.44-1.44.96-3.08 1.7-4.52-.15-.25-.7-.96-1.2-1.38Z",
|
3522
3520
|
fill: mainColor
|
3523
3521
|
}
|
3524
|
-
), /* @__PURE__ */
|
3522
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3525
3523
|
"path",
|
3526
3524
|
{
|
3527
3525
|
d: "M53.78 1.44a4.64 4.64 0 0 0-4.17.93A10.79 10.79 0 0 0 46.19 8L34.53 47.72c-.58 1.93-1.2 3.75-2.56 4.87-.62.5-1.4.86-2.39 1.01a.04.04 0 0 0 0 .08h1.8c1.57 0 2.69-.41 3.53-1.1 1.36-1.1 1.98-2.93 2.56-4.86L49.05 8.3c.73-2.74 1.95-4.63 3.43-5.9.43-.36.88-.68 1.35-.95l-.05-.01Z",
|
3528
3526
|
fill: accentColor
|
3529
3527
|
}
|
3530
|
-
)), /* @__PURE__ */
|
3528
|
+
)), /* @__PURE__ */ React85__namespace.default.createElement(
|
3531
3529
|
"path",
|
3532
3530
|
{
|
3533
3531
|
fillRule: "evenodd",
|
@@ -3547,8 +3545,8 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3547
3545
|
const redColor = colorScheme === "light" ? "#EA3323" : "#ffffff";
|
3548
3546
|
const orangeColor = colorScheme === "light" ? "#F09436" : "#ffffff";
|
3549
3547
|
const yellowColor = colorScheme === "light" ? "#FFFF54" : "#ffffff";
|
3550
|
-
const id =
|
3551
|
-
return /* @__PURE__ */
|
3548
|
+
const id = React85.useId();
|
3549
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { as: "svg", viewBox: "0 0 107 54", ...boxProps }, /* @__PURE__ */ React85__namespace.default.createElement("title", null, "Vy logo pride"), /* @__PURE__ */ React85__namespace.default.createElement(
|
3552
3550
|
"svg",
|
3553
3551
|
{
|
3554
3552
|
width: "108",
|
@@ -3557,7 +3555,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3557
3555
|
fill: "none",
|
3558
3556
|
xmlns: "http://www.w3.org/2000/svg"
|
3559
3557
|
},
|
3560
|
-
/* @__PURE__ */
|
3558
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
3561
3559
|
"path",
|
3562
3560
|
{
|
3563
3561
|
fillRule: "evenodd",
|
@@ -3566,7 +3564,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3566
3564
|
fill: pinkColor
|
3567
3565
|
}
|
3568
3566
|
),
|
3569
|
-
/* @__PURE__ */
|
3567
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
3570
3568
|
"mask",
|
3571
3569
|
{
|
3572
3570
|
id: `${id}-a-pride`,
|
@@ -3577,7 +3575,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3577
3575
|
width: "95",
|
3578
3576
|
height: "55"
|
3579
3577
|
},
|
3580
|
-
/* @__PURE__ */
|
3578
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
3581
3579
|
"path",
|
3582
3580
|
{
|
3583
3581
|
fillRule: "evenodd",
|
@@ -3587,7 +3585,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3587
3585
|
}
|
3588
3586
|
)
|
3589
3587
|
),
|
3590
|
-
/* @__PURE__ */
|
3588
|
+
/* @__PURE__ */ React85__namespace.default.createElement("g", { mask: `url(#${id}-a-pride)` }, /* @__PURE__ */ React85__namespace.default.createElement(
|
3591
3589
|
"path",
|
3592
3590
|
{
|
3593
3591
|
fillRule: "evenodd",
|
@@ -3595,7 +3593,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3595
3593
|
d: "M86.1392 34.0577C86.1622 34.0577 86.1809 34.0389 86.1809 34.0158C86.1809 33.9951 86.1658 33.9779 86.146 33.9747V33.9745C83.7657 33.6665 82.2265 30.3247 81.3764 27.4799C80.4843 24.4948 77.2629 13.5951 75.3455 7.29056C73.4194 0.957342 67.4267 0.0485861 64.7129 0.0441895H64.7137C64.6906 0.0441895 64.6719 0.0629034 64.6719 0.0859014C64.6719 0.106645 64.6869 0.123893 64.7068 0.127162L64.7067 0.127388C67.2413 0.468862 70.8417 2.00375 72.3953 7.29056C73.7591 11.9308 78.0927 26.6723 78.2592 27.1656C79.2998 30.2466 80.5197 32.1068 82.0639 33.1046C83.1032 33.776 84.2891 34.0577 85.6664 34.0577H86.1392",
|
3596
3594
|
fill: purpleColor
|
3597
3595
|
}
|
3598
|
-
), /* @__PURE__ */
|
3596
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3599
3597
|
"path",
|
3600
3598
|
{
|
3601
3599
|
fillRule: "evenodd",
|
@@ -3603,7 +3601,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3603
3601
|
d: "M23.7089 54.6763C23.4058 54.6763 23.1352 54.6763 22.9803 54.6763C20.8144 54.6763 18.2099 53.5754 16.7766 48.5188L3.8641 4.45414C3.09965 1.80939 1.96226 0.481143 0.0347223 0.151506C0.014881 0.148237 0 0.131101 0 0.110245C0 0.0871344 0.018714 0.0684204 0.0418246 0.0684204H1.98402C4.56565 0.0684204 5.96987 1.36104 6.86386 4.45414C6.86386 4.45414 18.8019 44.9686 19.8869 48.7964C20.6896 51.628 21.628 53.5542 23.0795 54.3328C23.3142 54.4587 23.5119 54.5409 23.7154 54.5932C23.7352 54.5965 23.7506 54.6138 23.7506 54.6345C23.7506 54.6576 23.7319 54.6763 23.7089 54.6763Z",
|
3604
3602
|
fill: darkPurpleColor
|
3605
3603
|
}
|
3606
|
-
), /* @__PURE__ */
|
3604
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3607
3605
|
"path",
|
3608
3606
|
{
|
3609
3607
|
fillRule: "evenodd",
|
@@ -3611,7 +3609,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3611
3609
|
d: "M19.3365 6.09794C18.1013 1.82472 16.1613 0.0390015 12.5947 0.0390015H10.8543C10.8312 0.0390015 10.8125 0.0577155 10.8125 0.0808261C10.8125 0.101569 10.8277 0.118818 10.8476 0.122087V0.121974C13.6341 0.517899 15.2582 2.35232 16.341 6.09794C16.341 6.09794 27.027 42.4871 28.4146 47.2512C28.7189 46.2219 29.2327 44.4828 29.8791 42.2935C28.6038 37.9117 19.3365 6.09794 19.3365 6.09794",
|
3612
3610
|
fill: greenColor
|
3613
3611
|
}
|
3614
|
-
), /* @__PURE__ */
|
3612
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3615
3613
|
"path",
|
3616
3614
|
{
|
3617
3615
|
fillRule: "evenodd",
|
@@ -3619,7 +3617,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3619
3617
|
d: "M24.7059 54.6763H25.9753C27.5661 54.6763 28.7056 54.2553 29.5596 53.5597C30.9494 52.4272 31.5822 50.5663 32.1676 48.6028C32.2552 48.309 43.5646 9.95201 43.9629 8.45455C45.3098 3.39196 48.3208 1.18687 51.5334 0.404941C52.0668 0.275183 52.6055 0.184995 53.1431 0.127162H53.1439C53.1638 0.123893 53.1789 0.106645 53.1789 0.0859014C53.1789 0.0629034 53.1602 0.0441895 53.1371 0.0441895H51.7232C47.4872 0.0441895 42.7565 1.72507 40.9662 8.45455C40.3206 10.8814 29.2585 48.309 29.1709 48.6028C28.5854 50.5663 27.9202 52.6362 26.5303 53.7687C25.9647 54.2295 25.4469 54.4781 24.6995 54.5933H24.699C24.6792 54.5966 24.6641 54.614 24.6641 54.6346C24.6641 54.6577 24.6828 54.6764 24.7059 54.6764V54.6763",
|
3620
3618
|
fill: darkGreenColor
|
3621
3619
|
}
|
3622
|
-
), /* @__PURE__ */
|
3620
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3623
3621
|
"path",
|
3624
3622
|
{
|
3625
3623
|
fillRule: "evenodd",
|
@@ -3628,7 +3626,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3628
3626
|
fill: darkPurpleColor
|
3629
3627
|
}
|
3630
3628
|
)),
|
3631
|
-
/* @__PURE__ */
|
3629
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
3632
3630
|
"path",
|
3633
3631
|
{
|
3634
3632
|
fillRule: "evenodd",
|
@@ -3637,7 +3635,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3637
3635
|
fill: blueColor
|
3638
3636
|
}
|
3639
3637
|
),
|
3640
|
-
/* @__PURE__ */
|
3638
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
3641
3639
|
"path",
|
3642
3640
|
{
|
3643
3641
|
fillRule: "evenodd",
|
@@ -3646,7 +3644,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3646
3644
|
fill: blueColor
|
3647
3645
|
}
|
3648
3646
|
),
|
3649
|
-
/* @__PURE__ */
|
3647
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
3650
3648
|
"path",
|
3651
3649
|
{
|
3652
3650
|
fillRule: "evenodd",
|
@@ -3655,7 +3653,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3655
3653
|
fill: greenColor
|
3656
3654
|
}
|
3657
3655
|
),
|
3658
|
-
/* @__PURE__ */
|
3656
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
3659
3657
|
"mask",
|
3660
3658
|
{
|
3661
3659
|
id: `${id}-b-pride`,
|
@@ -3666,7 +3664,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3666
3664
|
width: "78",
|
3667
3665
|
height: "55"
|
3668
3666
|
},
|
3669
|
-
/* @__PURE__ */
|
3667
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
3670
3668
|
"path",
|
3671
3669
|
{
|
3672
3670
|
fillRule: "evenodd",
|
@@ -3676,7 +3674,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3676
3674
|
}
|
3677
3675
|
)
|
3678
3676
|
),
|
3679
|
-
/* @__PURE__ */
|
3677
|
+
/* @__PURE__ */ React85__namespace.default.createElement("g", { mask: `url(#${id}-b-pride)` }, /* @__PURE__ */ React85__namespace.default.createElement(
|
3680
3678
|
"path",
|
3681
3679
|
{
|
3682
3680
|
fillRule: "evenodd",
|
@@ -3684,7 +3682,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3684
3682
|
d: "M89.8289 35.0891C88.7828 38.6493 85.8015 48.8015 85.8015 48.8015C84.2266 54.076 86.7112 54.6188 87.6599 54.6188H89.9623C89.9855 54.6188 90.0042 54.6001 90.0042 54.577C90.0042 54.5571 89.9903 54.5403 89.9717 54.5362V54.5363C88.8916 54.2553 87.4798 53.0991 88.7632 48.8015C88.7632 48.8015 92.0286 37.7282 93.2719 33.5031C92.561 34.2226 91.3615 34.8917 89.8289 35.0891",
|
3685
3683
|
fill: greenColor
|
3686
3684
|
}
|
3687
|
-
), /* @__PURE__ */
|
3685
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3688
3686
|
"path",
|
3689
3687
|
{
|
3690
3688
|
fillRule: "evenodd",
|
@@ -3692,7 +3690,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3692
3690
|
d: "M95.4467 54.6188C95.4698 54.6188 95.4885 54.6001 95.4885 54.577C95.4885 54.557 95.4747 54.5403 95.4561 54.5362H95.4558C94.5434 54.2765 93.3986 53.2655 94.4728 49.6684C94.4728 49.6684 107.101 6.68958 107.804 4.25563C108.507 1.82169 106.809 0.298979 105.28 0.0692254C105.269 0.0676471 105.219 0.0537807 105.209 0.0862483C105.199 0.118716 105.241 0.138557 105.249 0.143179C105.553 0.303376 105.894 0.672244 105.708 1.30469C105.522 1.93713 91.499 49.6684 91.499 49.6684C90.1586 54.1569 92.273 54.6188 93.0802 54.6188H95.4467",
|
3693
3691
|
fill: darkGreenColor
|
3694
3692
|
}
|
3695
|
-
), /* @__PURE__ */
|
3693
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3696
3694
|
"path",
|
3697
3695
|
{
|
3698
3696
|
fillRule: "evenodd",
|
@@ -3700,7 +3698,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3700
3698
|
d: "M75.4659 34.0577C75.4889 34.0577 75.5076 34.0389 75.5076 34.0158C75.5076 33.9951 75.4925 33.9778 75.4726 33.9746H75.4723C74.6146 33.8501 73.8387 33.5807 73.1306 33.1321C71.4607 32.0744 70.1687 30.0201 69.0737 26.521C68.9798 26.2215 63.6049 7.92165 63.4194 7.29056C62.2821 3.42105 60.4546 1.5616 58.6517 0.708874C57.557 0.191083 56.4715 0.0441895 55.5553 0.0441895C54.9539 0.0441895 54.4151 0.0441895 53.9784 0.0441895H53.9715C53.9484 0.0441895 53.9297 0.0629034 53.9297 0.0859014C53.9297 0.106645 53.9448 0.123893 53.9646 0.127162V0.127275C54.26 0.171918 58.362 0.298745 60.4275 7.29056C62.493 14.2825 64.9683 22.6405 65.8045 25.5908C67.6133 31.9722 69.9469 34.0577 73.6985 34.0577H75.4659",
|
3701
3699
|
fill: redColor
|
3702
3700
|
}
|
3703
|
-
), /* @__PURE__ */
|
3701
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3704
3702
|
"path",
|
3705
3703
|
{
|
3706
3704
|
fillRule: "evenodd",
|
@@ -3708,7 +3706,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3708
3706
|
d: "M56.4576 2.44421C56.4559 2.44568 56.4541 2.44703 56.4524 2.4485C54.944 3.74292 53.6961 5.66449 52.9539 8.45445C52.8754 8.74959 41.6662 46.889 41.4206 47.7167C40.4784 50.8926 39.6893 54.0469 36.1209 54.5932C36.101 54.5965 36.0859 54.6138 36.0859 54.6345C36.0859 54.6576 36.1047 54.6763 36.1278 54.6763H36.8373C36.8373 54.6763 37.3489 54.6683 37.4515 54.6642C41.0756 54.5179 42.8818 52.978 44.4271 47.7167C45.5556 43.8746 55.8691 8.75883 55.9604 8.45445C56.4006 6.98517 56.9293 5.3123 57.6882 3.84641C57.53 3.59208 56.9713 2.87385 56.4576 2.44421",
|
3709
3707
|
fill: orangeColor
|
3710
3708
|
}
|
3711
|
-
), /* @__PURE__ */
|
3709
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3712
3710
|
"path",
|
3713
3711
|
{
|
3714
3712
|
fillRule: "evenodd",
|
@@ -3717,7 +3715,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
|
|
3717
3715
|
fill: yellowColor
|
3718
3716
|
}
|
3719
3717
|
)),
|
3720
|
-
/* @__PURE__ */
|
3718
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
3721
3719
|
"path",
|
3722
3720
|
{
|
3723
3721
|
fillRule: "evenodd",
|
@@ -3734,109 +3732,109 @@ var CargonetLogo = ({
|
|
3734
3732
|
}) => {
|
3735
3733
|
const mainColor = "#DF8200";
|
3736
3734
|
const accentColor = colorScheme === "light" ? "#383E42" : "#ffffff";
|
3737
|
-
return /* @__PURE__ */
|
3735
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { as: "svg", viewBox: "0 0 251 52", ...boxProps }, /* @__PURE__ */ React85__namespace.default.createElement("title", null, "Cargonet logo"), /* @__PURE__ */ React85__namespace.default.createElement(
|
3738
3736
|
"path",
|
3739
3737
|
{
|
3740
3738
|
d: "M87.9222 14.602L84.3862 18.7417C81.1953 15.9821 79.1685 15.2914 76.5379 15.2914C70.933 15.2914 67.4398 19.5609 67.4398 26.029C67.4398 32.5834 71.0186 36.8523 76.4089 36.8523C79.6855 36.8523 81.6694 35.6447 84.9038 32.9285L88.3969 36.982C84.645 40.5608 81.1524 42.1134 76.4951 42.1134C66.9651 42.1134 61.2733 35.214 61.2733 25.9856C61.2733 16.9732 66.7492 10.0309 76.5379 10.0309C81.2387 10.0309 84.3 11.4533 87.9222 14.602Z",
|
3741
3739
|
fill: accentColor
|
3742
3740
|
}
|
3743
|
-
), /* @__PURE__ */
|
3741
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3744
3742
|
"path",
|
3745
3743
|
{
|
3746
3744
|
d: "M106.461 41.3802C106.159 40.5604 105.986 39.5259 105.857 38.4046C104.693 40.6038 102.408 42.1131 98.6988 42.1131C94.4299 42.1131 90.8511 40.216 90.8511 35.774C90.8511 30.9013 95.1628 29.1333 100.812 28.1417L105.598 27.3225V26.7187C105.598 24.3903 103.917 23.1399 101.416 23.1399C98.4829 23.1399 96.5858 24.476 94.4734 26.6759L91.0231 23.5712C93.9124 20.2934 97.1468 18.6117 101.373 18.6117C107.754 18.6117 110.946 21.846 110.946 26.5028V35.9037C110.946 38.448 111.118 40.216 111.506 41.3802H106.461ZM105.598 32.6265V31.1607L101.373 31.9364C98.0093 32.5836 96.2414 33.4022 96.2414 35.3861C96.2414 36.9388 97.5346 37.9299 99.8202 37.9299C102.666 37.9299 105.598 36.4647 105.598 32.6265Z",
|
3747
3745
|
fill: accentColor
|
3748
3746
|
}
|
3749
|
-
), /* @__PURE__ */
|
3747
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3750
3748
|
"path",
|
3751
3749
|
{
|
3752
3750
|
d: "M130.65 19.6469L129.572 24.5625C128.537 24.2614 127.373 24.0455 126.295 24.0455C123.233 24.0455 121.422 26.4601 121.422 30.5565V41.3803H115.816V25.8563C115.816 22.8813 115.644 20.8111 115.385 19.3448H120.603C120.818 20.1645 120.991 21.4578 121.034 23.0967C122.112 20.5524 123.88 18.9569 126.812 18.9569C128.192 18.9569 129.529 19.2157 130.65 19.6469Z",
|
3753
3751
|
fill: accentColor
|
3754
3752
|
}
|
3755
|
-
), /* @__PURE__ */
|
3753
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3756
3754
|
"path",
|
3757
3755
|
{
|
3758
3756
|
d: "M152.813 19.3447V40.6896C152.813 46.9859 148.156 50.1768 142.075 50.1768C138.669 50.1768 135.219 49.3142 132.028 47.4172L134.745 43.3202C137.289 44.8729 139.532 45.692 141.99 45.692C145.008 45.692 147.336 44.269 147.336 40.3018V37.4993C146.043 39.5255 143.93 40.8199 140.911 40.8199C135.349 40.8199 131.209 36.3779 131.209 29.7373C131.209 23.0966 135.349 18.6118 140.911 18.6118C144.188 18.6118 146.345 20.0782 147.639 22.3631V19.3447H152.813ZM147.509 29.7373C147.509 25.9425 145.267 23.3988 142.162 23.3988C138.971 23.3988 136.858 25.9425 136.858 29.7373C136.858 33.5314 138.971 36.0763 142.162 36.0763C145.267 36.0763 147.509 33.5314 147.509 29.7373Z",
|
3759
3757
|
fill: accentColor
|
3760
3758
|
}
|
3761
|
-
), /* @__PURE__ */
|
3759
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3762
3760
|
"path",
|
3763
3761
|
{
|
3764
3762
|
d: "M178.72 30.341C178.72 37.3267 173.976 42.0702 167.292 42.0702C160.609 42.0702 155.866 37.3267 155.866 30.341C155.866 23.3553 160.609 18.6117 167.292 18.6117C173.976 18.6117 178.72 23.3553 178.72 30.341ZM161.557 30.341C161.557 34.6967 163.886 37.4992 167.292 37.4992C170.699 37.4992 173.028 34.6967 173.028 30.341C173.028 26.0721 170.699 23.1828 167.292 23.1828C163.886 23.1828 161.557 26.0721 161.557 30.341Z",
|
3765
3763
|
fill: accentColor
|
3766
3764
|
}
|
3767
|
-
), /* @__PURE__ */
|
3765
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3768
3766
|
"path",
|
3769
3767
|
{
|
3770
3768
|
d: "M208.903 10.7638V41.38H202.478L194.673 28.9612C192.516 25.5115 190.403 22.1046 188.635 18.8274C188.851 22.4497 188.937 26.4598 188.937 30.8155V41.38H183.029V10.7638H189.585L197.82 23.9589C199.717 26.9773 201.616 29.9529 203.21 32.8851C203.081 29.6507 203.038 26.0719 203.038 21.8893V10.7638H208.903Z",
|
3771
3769
|
fill: mainColor
|
3772
3770
|
}
|
3773
|
-
), /* @__PURE__ */
|
3771
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3774
3772
|
"path",
|
3775
3773
|
{
|
3776
3774
|
d: "M233.663 37.7578C230.386 41.035 227.324 42.0707 223.788 42.0707C216.672 42.0707 212.231 37.499 212.231 30.4705C212.231 23.6573 216.371 18.6116 223.313 18.6116C230.041 18.6116 233.619 22.8376 233.619 29.6079C233.619 30.2546 233.577 31.2897 233.534 31.6781H217.578C218.009 35.0844 220.08 37.499 223.917 37.499C226.505 37.499 228.144 36.5936 230.6 34.4378L233.663 37.7578ZM217.708 27.9262H228.359C228.144 24.8644 226.376 22.881 223.227 22.881C220.123 22.881 218.311 24.8644 217.708 27.9262Z",
|
3777
3775
|
fill: mainColor
|
3778
3776
|
}
|
3779
|
-
), /* @__PURE__ */
|
3777
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3780
3778
|
"path",
|
3781
3779
|
{
|
3782
3780
|
d: "M250.41 41.0785C248.556 41.6817 246.789 41.8976 245.538 41.8976C240.88 41.8976 239.198 39.8709 239.198 35.7739V23.4415H235.275V19.3445H239.198V12.6182H244.805V19.3445H250.066V23.4415H244.805V34.8257C244.805 36.5937 245.624 37.0244 247.047 37.0244C247.651 37.0244 248.47 36.9387 249.721 36.6365L250.41 41.0785Z",
|
3783
3781
|
fill: mainColor
|
3784
3782
|
}
|
3785
|
-
), /* @__PURE__ */
|
3783
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3786
3784
|
"path",
|
3787
3785
|
{
|
3788
3786
|
d: "M21.4911 10.2565H31.1579V0.589175H21.4911V10.2565Z",
|
3789
3787
|
fill: mainColor
|
3790
3788
|
}
|
3791
|
-
), /* @__PURE__ */
|
3789
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3792
3790
|
"path",
|
3793
3791
|
{
|
3794
3792
|
d: "M41.3861 10.8855H31.7757V20.5528H41.3861V10.8855Z",
|
3795
3793
|
fill: mainColor
|
3796
3794
|
}
|
3797
|
-
), /* @__PURE__ */
|
3795
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3798
3796
|
"path",
|
3799
3797
|
{
|
3800
3798
|
d: "M42.0022 10.2547H51.6126V0.587402H42.0022V10.2547Z",
|
3801
3799
|
fill: mainColor
|
3802
3800
|
}
|
3803
|
-
), /* @__PURE__ */
|
3801
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3804
3802
|
"path",
|
3805
3803
|
{
|
3806
3804
|
d: "M21.477 30.7758H31.1431V21.1654H21.477V30.7758Z",
|
3807
3805
|
fill: mainColor
|
3808
3806
|
}
|
3809
|
-
), /* @__PURE__ */
|
3807
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3810
3808
|
"path",
|
3811
3809
|
{
|
3812
3810
|
d: "M11.2124 20.5493H20.8791V10.8826H11.2124V20.5493Z",
|
3813
3811
|
fill: mainColor
|
3814
3812
|
}
|
3815
|
-
), /* @__PURE__ */
|
3813
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3816
3814
|
"path",
|
3817
3815
|
{
|
3818
3816
|
d: "M0.910156 30.7911H10.5775V21.1801H0.910156V30.7911Z",
|
3819
3817
|
fill: mainColor
|
3820
3818
|
}
|
3821
|
-
), /* @__PURE__ */
|
3819
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3822
3820
|
"path",
|
3823
3821
|
{
|
3824
3822
|
d: "M11.1948 41.0258H20.8615V31.4154H11.1948V41.0258Z",
|
3825
3823
|
fill: mainColor
|
3826
3824
|
}
|
3827
|
-
), /* @__PURE__ */
|
3825
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3828
3826
|
"path",
|
3829
3827
|
{
|
3830
3828
|
d: "M31.7669 41.0581H41.4336V31.3908H31.7669V41.0581Z",
|
3831
3829
|
fill: mainColor
|
3832
3830
|
}
|
3833
|
-
), /* @__PURE__ */
|
3831
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3834
3832
|
"path",
|
3835
3833
|
{
|
3836
3834
|
d: "M21.4776 51.2277H31.1443V41.656H21.4776V51.2277Z",
|
3837
3835
|
fill: mainColor
|
3838
3836
|
}
|
3839
|
-
), /* @__PURE__ */
|
3837
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(
|
3840
3838
|
"path",
|
3841
3839
|
{
|
3842
3840
|
d: "M42.0615 51.2283H51.7282V41.6989H42.0615V51.2283Z",
|
@@ -3855,7 +3853,7 @@ var JumpButton = ({
|
|
3855
3853
|
variant: "jumpSkip",
|
3856
3854
|
size
|
3857
3855
|
});
|
3858
|
-
return /* @__PURE__ */
|
3856
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
3859
3857
|
react.Center,
|
3860
3858
|
{
|
3861
3859
|
as: "button",
|
@@ -3864,7 +3862,7 @@ var JumpButton = ({
|
|
3864
3862
|
disabled: isDisabled,
|
3865
3863
|
...props
|
3866
3864
|
},
|
3867
|
-
direction === "forward" ? /* @__PURE__ */
|
3865
|
+
direction === "forward" ? /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.Forward15MediaControllerFill30Icon, { sx: styles2.icon }) : /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.Backward15MediaControllerFill30Icon, { sx: styles2.icon })
|
3868
3866
|
);
|
3869
3867
|
};
|
3870
3868
|
var texts20 = createTexts({
|
@@ -3892,7 +3890,7 @@ var PlayPauseButton = ({
|
|
3892
3890
|
variant: "play",
|
3893
3891
|
size
|
3894
3892
|
});
|
3895
|
-
return /* @__PURE__ */
|
3893
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
3896
3894
|
react.Center,
|
3897
3895
|
{
|
3898
3896
|
as: "button",
|
@@ -3901,7 +3899,7 @@ var PlayPauseButton = ({
|
|
3901
3899
|
disabled: isDisabled,
|
3902
3900
|
...props
|
3903
3901
|
},
|
3904
|
-
isPlaying ? /* @__PURE__ */
|
3902
|
+
isPlaying ? /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.PauseMediaControllerFill24Icon, { sx: styles2.icon }) : /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.PlayMediaControllerFill24Icon, { sx: styles2.icon })
|
3905
3903
|
);
|
3906
3904
|
};
|
3907
3905
|
var texts21 = createTexts({
|
@@ -3929,7 +3927,7 @@ var SkipButton = ({
|
|
3929
3927
|
variant: "jumpSkip",
|
3930
3928
|
size
|
3931
3929
|
});
|
3932
|
-
return /* @__PURE__ */
|
3930
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
3933
3931
|
react.Center,
|
3934
3932
|
{
|
3935
3933
|
as: "button",
|
@@ -3938,7 +3936,7 @@ var SkipButton = ({
|
|
3938
3936
|
disabled: isDisabled,
|
3939
3937
|
...props
|
3940
3938
|
},
|
3941
|
-
direction === "forward" ? /* @__PURE__ */
|
3939
|
+
direction === "forward" ? /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.NextMediaControllerFill30Icon, { sx: styles2.icon }) : /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.PreviousMediaControllerFill30Icon, { sx: styles2.icon })
|
3942
3940
|
);
|
3943
3941
|
};
|
3944
3942
|
var texts22 = createTexts({
|
@@ -3961,13 +3959,13 @@ var ModalHeader = react.forwardRef(
|
|
3961
3959
|
fontSize: size === "lg" ? ["mobile.lg", "desktop.lg"] : ["mobile.md", "desktop.md"],
|
3962
3960
|
textAlign: size === "lg" ? "center" : "left"
|
3963
3961
|
};
|
3964
|
-
return /* @__PURE__ */
|
3962
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.ModalHeader, { as: "h1", ...props, ref, ...styles2 });
|
3965
3963
|
}
|
3966
3964
|
);
|
3967
3965
|
|
3968
3966
|
// src/modal/Drawer.tsx
|
3969
3967
|
var Drawer = (props) => {
|
3970
|
-
return /* @__PURE__ */
|
3968
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(DrawerProvider, { placement: props.placement }, /* @__PURE__ */ React85__namespace.default.createElement(react.Drawer, { ...props }));
|
3971
3969
|
};
|
3972
3970
|
var DrawerContent = react.forwardRef(
|
3973
3971
|
({ children, ...props }, ref) => {
|
@@ -3984,7 +3982,7 @@ var DrawerContent = react.forwardRef(
|
|
3984
3982
|
});
|
3985
3983
|
const isTopOrBottom = placement === "top" || placement === "bottom";
|
3986
3984
|
const widthConstraits = isTopOrBottom ? { width: ["100%", "37.5rem"], mx: "auto" } : {};
|
3987
|
-
return /* @__PURE__ */
|
3985
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { ...handlers }, /* @__PURE__ */ React85__namespace.default.createElement(
|
3988
3986
|
react.DrawerContent,
|
3989
3987
|
{
|
3990
3988
|
...widthConstraits,
|
@@ -3993,13 +3991,13 @@ var DrawerContent = react.forwardRef(
|
|
3993
3991
|
...props,
|
3994
3992
|
ref
|
3995
3993
|
},
|
3996
|
-
/* @__PURE__ */
|
3994
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.Box, { position: "relative" }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { maxHeight: "100vh", maxWidth: "100vw", overflow: "auto" }, isTopOrBottom && /* @__PURE__ */ React85__namespace.default.createElement(Notch, null), /* @__PURE__ */ React85__namespace.default.createElement(react.Box, null, children)))
|
3997
3995
|
));
|
3998
3996
|
}
|
3999
3997
|
);
|
4000
3998
|
var Notch = react.forwardRef((props, ref) => {
|
4001
3999
|
const placement = useDrawerContext();
|
4002
|
-
return /* @__PURE__ */
|
4000
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
4003
4001
|
react.Box,
|
4004
4002
|
{
|
4005
4003
|
position: "absolute",
|
@@ -4011,14 +4009,14 @@ var Notch = react.forwardRef((props, ref) => {
|
|
4011
4009
|
...props,
|
4012
4010
|
ref
|
4013
4011
|
},
|
4014
|
-
/* @__PURE__ */
|
4012
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
4015
4013
|
react.Center,
|
4016
4014
|
{
|
4017
4015
|
background: placement === "bottom" ? "bottom" : "top",
|
4018
4016
|
padding: 2,
|
4019
4017
|
borderRadius: "md"
|
4020
4018
|
},
|
4021
|
-
/* @__PURE__ */
|
4019
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
4022
4020
|
react.Box,
|
4023
4021
|
{
|
4024
4022
|
width: "2.265rem",
|
@@ -4030,22 +4028,22 @@ var Notch = react.forwardRef((props, ref) => {
|
|
4030
4028
|
)
|
4031
4029
|
);
|
4032
4030
|
});
|
4033
|
-
var DrawerContext =
|
4034
|
-
var DrawerProvider = (props) => /* @__PURE__ */
|
4031
|
+
var DrawerContext = React85__namespace.default.createContext(void 0);
|
4032
|
+
var DrawerProvider = (props) => /* @__PURE__ */ React85__namespace.default.createElement(DrawerContext.Provider, { value: props.placement }, props.children);
|
4035
4033
|
var useDrawerContext = () => {
|
4036
|
-
return
|
4034
|
+
return React85__namespace.default.useContext(DrawerContext);
|
4037
4035
|
};
|
4038
4036
|
var FullScreenDrawer = ({
|
4039
4037
|
children,
|
4040
4038
|
title,
|
4041
4039
|
placement = "bottom",
|
4042
|
-
leftButton = /* @__PURE__ */
|
4043
|
-
rightButton = /* @__PURE__ */
|
4040
|
+
leftButton = /* @__PURE__ */ React85__namespace.default.createElement(DrawerBackButton, null),
|
4041
|
+
rightButton = /* @__PURE__ */ React85__namespace.default.createElement(DrawerCloseButton2, null),
|
4044
4042
|
isOpen,
|
4045
4043
|
onClose,
|
4046
4044
|
body
|
4047
4045
|
}) => {
|
4048
|
-
const [isContentBoxScrolled, setContentBoxScrolled] =
|
4046
|
+
const [isContentBoxScrolled, setContentBoxScrolled] = React85.useState(false);
|
4049
4047
|
const onContentScroll = (e) => {
|
4050
4048
|
const target = e.target;
|
4051
4049
|
if (target.scrollTop <= 0) {
|
@@ -4054,10 +4052,10 @@ var FullScreenDrawer = ({
|
|
4054
4052
|
}
|
4055
4053
|
setContentBoxScrolled(true);
|
4056
4054
|
};
|
4057
|
-
|
4055
|
+
React85.useEffect(() => {
|
4058
4056
|
setContentBoxScrolled(false);
|
4059
4057
|
}, [isOpen]);
|
4060
|
-
return /* @__PURE__ */
|
4058
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(Drawer, { isOpen, onClose, placement, size: "full" }, /* @__PURE__ */ React85__namespace.default.createElement(react.DrawerOverlay, null), /* @__PURE__ */ React85__namespace.default.createElement(
|
4061
4059
|
react.DrawerContent,
|
4062
4060
|
{
|
4063
4061
|
height: "100vh",
|
@@ -4065,7 +4063,7 @@ var FullScreenDrawer = ({
|
|
4065
4063
|
backgroundPosition: "top",
|
4066
4064
|
backgroundRepeat: "no-repeat"
|
4067
4065
|
},
|
4068
|
-
/* @__PURE__ */
|
4066
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
4069
4067
|
DrawerTopMenu,
|
4070
4068
|
{
|
4071
4069
|
isScrolled: isContentBoxScrolled,
|
@@ -4074,7 +4072,7 @@ var FullScreenDrawer = ({
|
|
4074
4072
|
rightButton
|
4075
4073
|
}
|
4076
4074
|
),
|
4077
|
-
/* @__PURE__ */
|
4075
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.DrawerBody, { overflow: "auto", onScroll: onContentScroll, ...body }, children)
|
4078
4076
|
));
|
4079
4077
|
};
|
4080
4078
|
var DrawerTopMenu = ({
|
@@ -4087,7 +4085,7 @@ var DrawerTopMenu = ({
|
|
4087
4085
|
"bg.default.light",
|
4088
4086
|
"bg.default.dark"
|
4089
4087
|
);
|
4090
|
-
return /* @__PURE__ */
|
4088
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
4091
4089
|
react.Flex,
|
4092
4090
|
{
|
4093
4091
|
width: "100%",
|
@@ -4100,8 +4098,8 @@ var DrawerTopMenu = ({
|
|
4100
4098
|
transition: "box-shadow 0.2s",
|
4101
4099
|
boxShadow: isScrolled ? "md" : void 0
|
4102
4100
|
},
|
4103
|
-
/* @__PURE__ */
|
4104
|
-
/* @__PURE__ */
|
4101
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.Box, { flex: "1" }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { width: "fit-content" }, leftButton)),
|
4102
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
4105
4103
|
react.DrawerHeader,
|
4106
4104
|
{
|
4107
4105
|
as: "h2",
|
@@ -4114,7 +4112,7 @@ var DrawerTopMenu = ({
|
|
4114
4112
|
},
|
4115
4113
|
title
|
4116
4114
|
),
|
4117
|
-
/* @__PURE__ */
|
4115
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.Box, { flex: "1" }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { width: "fit-content", marginLeft: "auto" }, rightButton))
|
4118
4116
|
);
|
4119
4117
|
};
|
4120
4118
|
var DrawerCloseButton2 = () => {
|
@@ -4124,11 +4122,11 @@ var DrawerCloseButton2 = () => {
|
|
4124
4122
|
`(min-width: ${tokens12__namespace.default.size.breakpoint.sm})`
|
4125
4123
|
);
|
4126
4124
|
if (isScreenSizeMinSm) {
|
4127
|
-
return /* @__PURE__ */
|
4125
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
4128
4126
|
Button2,
|
4129
4127
|
{
|
4130
4128
|
variant: "ghost",
|
4131
|
-
leftIcon: /* @__PURE__ */
|
4129
|
+
leftIcon: /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.CloseFill24Icon, null),
|
4132
4130
|
onClick: onClose,
|
4133
4131
|
"aria-label": t(texts23.close),
|
4134
4132
|
width: "fit-content"
|
@@ -4136,11 +4134,11 @@ var DrawerCloseButton2 = () => {
|
|
4136
4134
|
t(texts23.close)
|
4137
4135
|
);
|
4138
4136
|
}
|
4139
|
-
return /* @__PURE__ */
|
4137
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
4140
4138
|
IconButton,
|
4141
4139
|
{
|
4142
4140
|
variant: "ghost",
|
4143
|
-
icon: /* @__PURE__ */
|
4141
|
+
icon: /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.CloseFill30Icon, null),
|
4144
4142
|
onClick: onClose,
|
4145
4143
|
"aria-label": t(texts23.close)
|
4146
4144
|
}
|
@@ -4153,11 +4151,11 @@ var DrawerBackButton = () => {
|
|
4153
4151
|
`(min-width: ${tokens12__namespace.default.size.breakpoint.sm})`
|
4154
4152
|
);
|
4155
4153
|
if (isScreenSizeMinSm) {
|
4156
|
-
return /* @__PURE__ */
|
4154
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
4157
4155
|
Button2,
|
4158
4156
|
{
|
4159
4157
|
variant: "ghost",
|
4160
|
-
leftIcon: /* @__PURE__ */
|
4158
|
+
leftIcon: /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.ArrowLeftFill24Icon, null),
|
4161
4159
|
onClick: onClose,
|
4162
4160
|
"aria-label": t(texts23.backAriaLabel),
|
4163
4161
|
width: "fit-content"
|
@@ -4165,11 +4163,11 @@ var DrawerBackButton = () => {
|
|
4165
4163
|
t(texts23.back)
|
4166
4164
|
);
|
4167
4165
|
}
|
4168
|
-
return /* @__PURE__ */
|
4166
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
4169
4167
|
IconButton,
|
4170
4168
|
{
|
4171
4169
|
variant: "ghost",
|
4172
|
-
icon: /* @__PURE__ */
|
4170
|
+
icon: /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.ArrowLeftFill30Icon, null),
|
4173
4171
|
onClick: onClose,
|
4174
4172
|
"aria-label": t(texts23.close)
|
4175
4173
|
}
|
@@ -4208,7 +4206,7 @@ var SimpleDrawer = ({
|
|
4208
4206
|
body,
|
4209
4207
|
...props
|
4210
4208
|
}) => {
|
4211
|
-
return /* @__PURE__ */
|
4209
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(Drawer, { placement, ...props }, /* @__PURE__ */ React85__namespace.default.createElement(react.DrawerOverlay, null), /* @__PURE__ */ React85__namespace.default.createElement(DrawerContent, null, /* @__PURE__ */ React85__namespace.default.createElement(react.DrawerCloseButton, null), title && /* @__PURE__ */ React85__namespace.default.createElement(ModalHeader, null, title), /* @__PURE__ */ React85__namespace.default.createElement(react.DrawerBody, { ...body }, children)));
|
4212
4210
|
};
|
4213
4211
|
var EXPIRATION_DELAY = 1e3 * 60 * 60 * 24 * 30;
|
4214
4212
|
var Nudge = ({
|
@@ -4230,7 +4228,7 @@ var Nudge = ({
|
|
4230
4228
|
}
|
4231
4229
|
return null;
|
4232
4230
|
}
|
4233
|
-
return /* @__PURE__ */
|
4231
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
4234
4232
|
react.Popover,
|
4235
4233
|
{
|
4236
4234
|
arrowSize: 12,
|
@@ -4238,8 +4236,8 @@ var Nudge = ({
|
|
4238
4236
|
defaultIsOpen: true,
|
4239
4237
|
...props
|
4240
4238
|
},
|
4241
|
-
/* @__PURE__ */
|
4242
|
-
/* @__PURE__ */
|
4239
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.PopoverAnchor, null, children),
|
4240
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.PopoverContent, { borderRadius: "sm" }, /* @__PURE__ */ React85__namespace.default.createElement(react.DarkMode, null, /* @__PURE__ */ React85__namespace.default.createElement(react.PopoverArrow, null), /* @__PURE__ */ React85__namespace.default.createElement(react.PopoverCloseButton, null), /* @__PURE__ */ React85__namespace.default.createElement(react.PopoverBody, { margin: 1 }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { marginRight: 4 }, content), /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { marginTop: 1.5 }, actions ?? /* @__PURE__ */ React85__namespace.default.createElement(ButtonGroup, null, /* @__PURE__ */ React85__namespace.default.createElement(Button2, { variant: "tertiary", size: "xs" }, t(texts24.close)), /* @__PURE__ */ React85__namespace.default.createElement(Button2, { variant: "secondary", size: "xs", fontWeight: "bold" }, t(texts24.showMe)))))))
|
4243
4241
|
);
|
4244
4242
|
};
|
4245
4243
|
var texts24 = createTexts({
|
@@ -4263,23 +4261,23 @@ var WizardNudge = ({
|
|
4263
4261
|
content,
|
4264
4262
|
...props
|
4265
4263
|
}) => {
|
4266
|
-
const [currentStep, setCurrentStep] =
|
4264
|
+
const [currentStep, setCurrentStep] = React85.useState(1);
|
4267
4265
|
const totalSteps = content.length;
|
4268
4266
|
const isLastStep = totalSteps === currentStep;
|
4269
4267
|
const onNext = () => setCurrentStep((prev) => prev + 1);
|
4270
|
-
return /* @__PURE__ */
|
4268
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
4271
4269
|
Nudge,
|
4272
4270
|
{
|
4273
4271
|
onClose,
|
4274
4272
|
name,
|
4275
4273
|
content: content[currentStep - 1],
|
4276
|
-
actions: /* @__PURE__ */
|
4274
|
+
actions: /* @__PURE__ */ React85__namespace.default.createElement(react.Flex, { gap: 3, alignItems: "center" }, /* @__PURE__ */ React85__namespace.default.createElement(
|
4277
4275
|
ProgressIndicator,
|
4278
4276
|
{
|
4279
4277
|
activeStep: currentStep,
|
4280
4278
|
numberOfSteps: totalSteps
|
4281
4279
|
}
|
4282
|
-
), /* @__PURE__ */
|
4280
|
+
), /* @__PURE__ */ React85__namespace.default.createElement(react.Box, null, /* @__PURE__ */ React85__namespace.default.createElement(NextOrCloseButton, { isLastStep, onNext }))),
|
4283
4281
|
...props
|
4284
4282
|
},
|
4285
4283
|
children
|
@@ -4288,12 +4286,12 @@ var WizardNudge = ({
|
|
4288
4286
|
var NextOrCloseButton = ({ isLastStep, onNext }) => {
|
4289
4287
|
const { onClose } = react.usePopoverContext();
|
4290
4288
|
const { t } = useTranslation();
|
4291
|
-
return /* @__PURE__ */
|
4289
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
4292
4290
|
Button2,
|
4293
4291
|
{
|
4294
4292
|
variant: "tertiary",
|
4295
4293
|
size: "xs",
|
4296
|
-
leftIcon: isLastStep ? void 0 : /* @__PURE__ */
|
4294
|
+
leftIcon: isLastStep ? void 0 : /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.ArrowRightFill18Icon, null),
|
4297
4295
|
onClick: isLastStep ? onClose : onNext,
|
4298
4296
|
width: "fit-content"
|
4299
4297
|
},
|
@@ -4357,7 +4355,7 @@ var Pagination = ({
|
|
4357
4355
|
}
|
4358
4356
|
}
|
4359
4357
|
return displayPageNumbers.map(
|
4360
|
-
(pageNumber, index) => pageNumber === "..." ? /* @__PURE__ */
|
4358
|
+
(pageNumber, index) => pageNumber === "..." ? /* @__PURE__ */ React85__namespace.default.createElement(react.ListItem, { key: index, sx: style.listItem }, /* @__PURE__ */ React85__namespace.default.createElement(react.Center, null, "...")) : /* @__PURE__ */ React85__namespace.default.createElement(
|
4361
4359
|
react.Link,
|
4362
4360
|
{
|
4363
4361
|
key: index,
|
@@ -4374,7 +4372,7 @@ var Pagination = ({
|
|
4374
4372
|
)
|
4375
4373
|
);
|
4376
4374
|
};
|
4377
|
-
return /* @__PURE__ */
|
4375
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Flex, { as: "nav", "aria-label": "pagination" }, /* @__PURE__ */ React85__namespace.default.createElement(
|
4378
4376
|
react.UnorderedList,
|
4379
4377
|
{
|
4380
4378
|
display: "flex",
|
@@ -4383,22 +4381,22 @@ var Pagination = ({
|
|
4383
4381
|
padding: 0,
|
4384
4382
|
margin: 0
|
4385
4383
|
},
|
4386
|
-
/* @__PURE__ */
|
4384
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.ListItem, { "aria-label": t(texts26.previousPage) }, /* @__PURE__ */ React85__namespace.default.createElement(
|
4387
4385
|
TextLink,
|
4388
4386
|
{
|
4389
4387
|
onClick: () => onPageChange(selectedPage - 1),
|
4390
4388
|
sx: hasPreviousPage ? style.link : style.disabled
|
4391
4389
|
},
|
4392
|
-
/* @__PURE__ */
|
4390
|
+
/* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.DropdownLeftFill18Icon, { sx: style.icon })
|
4393
4391
|
)),
|
4394
4392
|
renderPaginationButtons(),
|
4395
|
-
/* @__PURE__ */
|
4393
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.ListItem, { "aria-label": t(texts26.nextPage) }, /* @__PURE__ */ React85__namespace.default.createElement(
|
4396
4394
|
TextLink,
|
4397
4395
|
{
|
4398
4396
|
onClick: () => onPageChange(selectedPage + 1),
|
4399
4397
|
sx: hasNextPage ? style.link : style.disabled
|
4400
4398
|
},
|
4401
|
-
/* @__PURE__ */
|
4399
|
+
/* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.DropdownRightFill18Icon, { sx: style.icon })
|
4402
4400
|
))
|
4403
4401
|
));
|
4404
4402
|
};
|
@@ -4418,7 +4416,7 @@ var texts26 = createTexts({
|
|
4418
4416
|
});
|
4419
4417
|
var ProgressDot = ({ isActive }) => {
|
4420
4418
|
const style = react.useMultiStyleConfig("ProgressIndicator");
|
4421
|
-
return /* @__PURE__ */
|
4419
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
4422
4420
|
react.Box,
|
4423
4421
|
{
|
4424
4422
|
as: "svg",
|
@@ -4428,7 +4426,7 @@ var ProgressDot = ({ isActive }) => {
|
|
4428
4426
|
viewBox: "0 0 100 100",
|
4429
4427
|
"aria-current": isActive ? "step" : void 0
|
4430
4428
|
},
|
4431
|
-
/* @__PURE__ */
|
4429
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.Box, { as: "circle", cx: "50", cy: "50", r: "50" })
|
4432
4430
|
);
|
4433
4431
|
};
|
4434
4432
|
|
@@ -4439,7 +4437,7 @@ var ProgressIndicator = ({
|
|
4439
4437
|
}) => {
|
4440
4438
|
const { t } = useTranslation();
|
4441
4439
|
const style = react.useMultiStyleConfig("ProgressIndicator");
|
4442
|
-
return /* @__PURE__ */
|
4440
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
4443
4441
|
react.Box,
|
4444
4442
|
{
|
4445
4443
|
__css: style.root,
|
@@ -4449,7 +4447,7 @@ var ProgressIndicator = ({
|
|
4449
4447
|
"aria-valuenow": activeStep,
|
4450
4448
|
"aria-valuetext": t(texts27.stepsOf(activeStep, numberOfSteps))
|
4451
4449
|
},
|
4452
|
-
/* @__PURE__ */
|
4450
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.Box, { __css: style.container }, Array.from({ length: numberOfSteps }, (_, i) => /* @__PURE__ */ React85__namespace.default.createElement(
|
4453
4451
|
ProgressDot,
|
4454
4452
|
{
|
4455
4453
|
key: i,
|
@@ -4476,9 +4474,9 @@ var SporProvider = ({
|
|
4476
4474
|
}) => {
|
4477
4475
|
const brandCustomizations = brandTheme[brand] ?? {};
|
4478
4476
|
const extendedTheme = deepmerge__default.default(theme2, brandCustomizations);
|
4479
|
-
return /* @__PURE__ */
|
4477
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(LanguageProvider, { language }, /* @__PURE__ */ React85__namespace.default.createElement(react.ChakraProvider, { theme: extendedTheme, ...props }, /* @__PURE__ */ React85__namespace.default.createElement(react$1.Global, { styles: fontFaces }), children));
|
4480
4478
|
};
|
4481
|
-
var StepperContext =
|
4479
|
+
var StepperContext = React85__namespace.default.createContext(null);
|
4482
4480
|
var StepperProvider = ({
|
4483
4481
|
activeStep,
|
4484
4482
|
children,
|
@@ -4486,7 +4484,7 @@ var StepperProvider = ({
|
|
4486
4484
|
numberOfSteps,
|
4487
4485
|
variant
|
4488
4486
|
}) => {
|
4489
|
-
return /* @__PURE__ */
|
4487
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
4490
4488
|
StepperContext.Provider,
|
4491
4489
|
{
|
4492
4490
|
value: { activeStep, onClick, numberOfSteps, variant }
|
@@ -4495,7 +4493,7 @@ var StepperProvider = ({
|
|
4495
4493
|
);
|
4496
4494
|
};
|
4497
4495
|
var useStepper = () => {
|
4498
|
-
const context =
|
4496
|
+
const context = React85__namespace.default.useContext(StepperContext);
|
4499
4497
|
if (!context) {
|
4500
4498
|
throw new Error(
|
4501
4499
|
"useStepper must be used within a StepperProvider. Most likely, you forgot to wrap your StepperStep in a Stepper component"
|
@@ -4523,7 +4521,7 @@ var Stepper = ({
|
|
4523
4521
|
const { t } = useTranslation();
|
4524
4522
|
const hideBackButtonOnFirstStep = activeStep === 1 && !onBackButtonClick;
|
4525
4523
|
const shownHeading = heading || title;
|
4526
|
-
return /* @__PURE__ */
|
4524
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { sx: style.root }, /* @__PURE__ */ React85__namespace.default.createElement(
|
4527
4525
|
StepperProvider,
|
4528
4526
|
{
|
4529
4527
|
onClick,
|
@@ -4531,7 +4529,7 @@ var Stepper = ({
|
|
4531
4529
|
variant,
|
4532
4530
|
numberOfSteps
|
4533
4531
|
},
|
4534
|
-
/* @__PURE__ */
|
4532
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.Box, { sx: style.container }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { sx: style.innerContainer }, /* @__PURE__ */ React85__namespace.default.createElement(
|
4535
4533
|
react.Flex,
|
4536
4534
|
{
|
4537
4535
|
justifyContent: "space-between",
|
@@ -4539,11 +4537,11 @@ var Stepper = ({
|
|
4539
4537
|
gap: 2,
|
4540
4538
|
flex: 1
|
4541
4539
|
},
|
4542
|
-
/* @__PURE__ */
|
4540
|
+
/* @__PURE__ */ React85__namespace.default.createElement(
|
4543
4541
|
IconButton,
|
4544
4542
|
{
|
4545
4543
|
"aria-label": t(texts28.back),
|
4546
|
-
icon: /* @__PURE__ */
|
4544
|
+
icon: /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.ArrowLeftFill24Icon, null),
|
4547
4545
|
variant: "ghost",
|
4548
4546
|
size: "sm",
|
4549
4547
|
visibility: hideBackButtonOnFirstStep ? "hidden" : "visible",
|
@@ -4556,9 +4554,9 @@ var Stepper = ({
|
|
4556
4554
|
}
|
4557
4555
|
}
|
4558
4556
|
),
|
4559
|
-
shownHeading && /* @__PURE__ */
|
4560
|
-
/* @__PURE__ */
|
4561
|
-
)), /* @__PURE__ */
|
4557
|
+
shownHeading && /* @__PURE__ */ React85__namespace.default.createElement(Text5, { flex: 1, variant: "sm", as: headingLevel, sx: style.title }, shownHeading),
|
4558
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.Box, { sx: style.stepCounter }, t(texts28.stepsOf(activeStep, numberOfSteps)))
|
4559
|
+
)), /* @__PURE__ */ React85__namespace.default.createElement(react.Flex, { justifyContent: "center", display: ["none", null, "flex"] }, steps.map((step, index) => /* @__PURE__ */ React85__namespace.default.createElement(
|
4562
4560
|
StepperStep,
|
4563
4561
|
{
|
4564
4562
|
key: index,
|
@@ -4603,14 +4601,14 @@ var StepperStep = ({
|
|
4603
4601
|
);
|
4604
4602
|
const iconColor = react.useColorModeValue("blackAlpha.200", "whiteAlpha.200");
|
4605
4603
|
const isDisabled = state !== "active" && isDisabledOverride || state === "disabled";
|
4606
|
-
return /* @__PURE__ */
|
4604
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { sx: style.stepContainer }, stepNumber > 1 && /* @__PURE__ */ React85__namespace.default.createElement(
|
4607
4605
|
sporIconReact.DropdownRightFill18Icon,
|
4608
4606
|
{
|
4609
4607
|
marginX: 5,
|
4610
4608
|
display: ["none", null, "block"],
|
4611
4609
|
color: iconColor
|
4612
4610
|
}
|
4613
|
-
), isDisabled ? /* @__PURE__ */
|
4611
|
+
), isDisabled ? /* @__PURE__ */ React85__namespace.default.createElement(
|
4614
4612
|
Text5,
|
4615
4613
|
{
|
4616
4614
|
variant: "xs",
|
@@ -4620,7 +4618,7 @@ var StepperStep = ({
|
|
4620
4618
|
paddingX: 2
|
4621
4619
|
},
|
4622
4620
|
children
|
4623
|
-
) : /* @__PURE__ */
|
4621
|
+
) : /* @__PURE__ */ React85__namespace.default.createElement(
|
4624
4622
|
Button2,
|
4625
4623
|
{
|
4626
4624
|
size: "xs",
|
@@ -4643,11 +4641,11 @@ var getState = (stepNumber, activeStep) => {
|
|
4643
4641
|
return "disabled";
|
4644
4642
|
};
|
4645
4643
|
var Tabs = react.forwardRef((props, ref) => {
|
4646
|
-
return /* @__PURE__ */
|
4644
|
+
return /* @__PURE__ */ React85__namespace.createElement(react.Tabs, { ...props, ref });
|
4647
4645
|
});
|
4648
4646
|
var Table = react.forwardRef((props, ref) => {
|
4649
4647
|
const { variant, size, colorScheme, children, ...rest } = props;
|
4650
|
-
return /* @__PURE__ */
|
4648
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { ...rest, ...getStyleProps(props) }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { overflowX: "auto", role: "region" }, /* @__PURE__ */ React85__namespace.default.createElement(
|
4651
4649
|
react.Table,
|
4652
4650
|
{
|
4653
4651
|
variant,
|
@@ -8992,12 +8990,12 @@ var brandTheme = {
|
|
8992
8990
|
};
|
8993
8991
|
var BaseToast = ({ children, variant, id }) => {
|
8994
8992
|
const styles2 = react.useStyleConfig("Toast", { variant });
|
8995
|
-
return /* @__PURE__ */
|
8993
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(react.Flex, { sx: styles2, id }, /* @__PURE__ */ React85__namespace.default.createElement(ToastIcon, { variant }), children);
|
8996
8994
|
};
|
8997
8995
|
var ToastIcon = ({ variant }) => {
|
8998
8996
|
const Icon = getIcon3(variant);
|
8999
8997
|
const { t } = useTranslation();
|
9000
|
-
return /* @__PURE__ */
|
8998
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
9001
8999
|
Icon,
|
9002
9000
|
{
|
9003
9001
|
flexShrink: 0,
|
@@ -9047,7 +9045,7 @@ var ActionToast = ({
|
|
9047
9045
|
buttonText,
|
9048
9046
|
id
|
9049
9047
|
}) => {
|
9050
|
-
return /* @__PURE__ */
|
9048
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { marginRight: 2, flexGrow: "1" }, children), /* @__PURE__ */ React85__namespace.default.createElement(Button2, { variant: "tertiary", size: "sm", onClick }, buttonText));
|
9051
9049
|
};
|
9052
9050
|
var ClosableToast = ({
|
9053
9051
|
children,
|
@@ -9057,13 +9055,13 @@ var ClosableToast = ({
|
|
9057
9055
|
}) => {
|
9058
9056
|
const styles2 = react.useMultiStyleConfig("Toast", { variant });
|
9059
9057
|
const { t } = useTranslation();
|
9060
|
-
return /* @__PURE__ */
|
9058
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React85__namespace.default.createElement(react.Box, { flexGrow: "1" }, children), /* @__PURE__ */ React85__namespace.default.createElement(
|
9061
9059
|
IconButton,
|
9062
9060
|
{
|
9063
9061
|
sx: styles2.dismissButton,
|
9064
9062
|
variant: "ghost",
|
9065
9063
|
"aria-label": t(texts30.dismiss),
|
9066
|
-
icon: /* @__PURE__ */
|
9064
|
+
icon: /* @__PURE__ */ React85__namespace.default.createElement(sporIconReact.CloseFill18Icon, null),
|
9067
9065
|
onClick: onClose
|
9068
9066
|
}
|
9069
9067
|
));
|
@@ -9080,7 +9078,7 @@ var texts30 = createTexts({
|
|
9080
9078
|
// src/toast/useToast.tsx
|
9081
9079
|
var useToast = () => {
|
9082
9080
|
const toast = react.useToast();
|
9083
|
-
const wrappedToast =
|
9081
|
+
const wrappedToast = React85.useCallback(
|
9084
9082
|
(opts) => {
|
9085
9083
|
const Toast = getToastComponent(opts);
|
9086
9084
|
toast({
|
@@ -9098,7 +9096,7 @@ var getToastComponent = (opts) => {
|
|
9098
9096
|
if (id === void 0) {
|
9099
9097
|
return null;
|
9100
9098
|
}
|
9101
|
-
return /* @__PURE__ */
|
9099
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
9102
9100
|
ClosableToast,
|
9103
9101
|
{
|
9104
9102
|
id: id.toString(),
|
@@ -9119,7 +9117,7 @@ var getToastComponent = (opts) => {
|
|
9119
9117
|
if (id === void 0) {
|
9120
9118
|
return null;
|
9121
9119
|
}
|
9122
|
-
return /* @__PURE__ */
|
9120
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
9123
9121
|
ActionToast,
|
9124
9122
|
{
|
9125
9123
|
id: id.toString(),
|
@@ -9135,7 +9133,7 @@ var getToastComponent = (opts) => {
|
|
9135
9133
|
if (id === void 0) {
|
9136
9134
|
return null;
|
9137
9135
|
}
|
9138
|
-
return /* @__PURE__ */
|
9136
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(BaseToast, { id: id.toString(), variant: opts.variant }, opts.text);
|
9139
9137
|
};
|
9140
9138
|
};
|
9141
9139
|
var Tooltip = ({
|
@@ -9149,7 +9147,7 @@ var Tooltip = ({
|
|
9149
9147
|
withCloseButton = false,
|
9150
9148
|
...props
|
9151
9149
|
}) => {
|
9152
|
-
return /* @__PURE__ */
|
9150
|
+
return /* @__PURE__ */ React85__namespace.default.createElement(
|
9153
9151
|
react.Popover,
|
9154
9152
|
{
|
9155
9153
|
onClose,
|
@@ -9161,8 +9159,8 @@ var Tooltip = ({
|
|
9161
9159
|
arrowShadowColor: "none",
|
9162
9160
|
...props
|
9163
9161
|
},
|
9164
|
-
/* @__PURE__ */
|
9165
|
-
/* @__PURE__ */
|
9162
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.PopoverTrigger, null, children),
|
9163
|
+
/* @__PURE__ */ React85__namespace.default.createElement(react.PopoverContent, null, /* @__PURE__ */ React85__namespace.default.createElement(react.PopoverArrow, null), withCloseButton && /* @__PURE__ */ React85__namespace.default.createElement(react.PopoverCloseButton, null), /* @__PURE__ */ React85__namespace.default.createElement(react.PopoverBody, null, content))
|
9166
9164
|
);
|
9167
9165
|
};
|
9168
9166
|
var useMediaQuery2 = react.useMediaQuery;
|