@vygruppen/spor-react 9.6.1 → 9.6.2
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 +10 -10
- package/CHANGELOG.md +6 -0
- package/dist/{CountryCodeSelect-2KOFVXIQ.mjs → CountryCodeSelect-EZTV452W.mjs} +1 -1
- package/dist/{chunk-XXA3IGVH.mjs → chunk-7VZBL2PP.mjs} +479 -309
- package/dist/index.d.mts +694 -1
- package/dist/index.d.ts +694 -1
- package/dist/index.js +548 -362
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/src/card/PressableCard.tsx +52 -0
- package/src/card/index.tsx +1 -0
- package/src/theme/components/index.ts +1 -0
- package/src/theme/components/pressable-card.ts +179 -0
- package/src/theme/components/static-card.ts +3 -2
package/dist/index.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
'use strict';
|
2
2
|
|
3
3
|
var react = require('@chakra-ui/react');
|
4
|
-
var
|
4
|
+
var React71 = require('react');
|
5
5
|
var lottieReact = require('lottie-react');
|
6
6
|
var sporLoader = require('@vygruppen/spor-loader');
|
7
7
|
var reactAria = require('react-aria');
|
@@ -36,7 +36,7 @@ function _interopNamespace(e) {
|
|
36
36
|
return Object.freeze(n);
|
37
37
|
}
|
38
38
|
|
39
|
-
var
|
39
|
+
var React71__namespace = /*#__PURE__*/_interopNamespace(React71);
|
40
40
|
var tokens11__namespace = /*#__PURE__*/_interopNamespace(tokens11);
|
41
41
|
var deepmerge__default = /*#__PURE__*/_interopDefault(deepmerge);
|
42
42
|
|
@@ -76,7 +76,7 @@ exports.Divider = void 0;
|
|
76
76
|
var init_Divider = __esm({
|
77
77
|
"src/layout/Divider.tsx"() {
|
78
78
|
exports.Divider = react.forwardRef((props, ref) => {
|
79
|
-
return /* @__PURE__ */
|
79
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Divider, { ...props, ref });
|
80
80
|
});
|
81
81
|
}
|
82
82
|
});
|
@@ -85,7 +85,7 @@ var init_Stack = __esm({
|
|
85
85
|
"src/layout/Stack.tsx"() {
|
86
86
|
exports.Stack = react.forwardRef(
|
87
87
|
({ flexDirection, ...props }, ref) => {
|
88
|
-
return /* @__PURE__ */
|
88
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Stack, { ...props, direction: flexDirection, ref });
|
89
89
|
}
|
90
90
|
);
|
91
91
|
}
|
@@ -99,15 +99,15 @@ var init_layout = __esm({
|
|
99
99
|
var AccordionContext, AccordionProvider, useAccordionContext;
|
100
100
|
var init_AccordionContext = __esm({
|
101
101
|
"src/accordion/AccordionContext.tsx"() {
|
102
|
-
AccordionContext =
|
102
|
+
AccordionContext = React71__namespace.default.createContext(null);
|
103
103
|
AccordionProvider = ({
|
104
104
|
size: size2,
|
105
105
|
...props
|
106
106
|
}) => {
|
107
|
-
return /* @__PURE__ */
|
107
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(AccordionContext.Provider, { value: { size: size2 }, ...props });
|
108
108
|
};
|
109
109
|
useAccordionContext = () => {
|
110
|
-
const context =
|
110
|
+
const context = React71__namespace.default.useContext(AccordionContext);
|
111
111
|
if (context === null) {
|
112
112
|
throw new Error(
|
113
113
|
"useAccordionContext must be used within AccordionProvider"
|
@@ -125,14 +125,14 @@ var init_Accordion = __esm({
|
|
125
125
|
exports.Accordion = react.forwardRef(
|
126
126
|
({ children, spacing: spacing3 = 2, ...props }, ref) => {
|
127
127
|
const defaultIndex = typeof props.defaultIndex === "number" && props.allowMultiple ? [props.defaultIndex] : props.defaultIndex;
|
128
|
-
return /* @__PURE__ */
|
128
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(AccordionProvider, { size: props.size }, /* @__PURE__ */ React71__namespace.default.createElement(
|
129
129
|
react.Accordion,
|
130
130
|
{
|
131
131
|
...props,
|
132
132
|
ref,
|
133
133
|
defaultIndex
|
134
134
|
},
|
135
|
-
/* @__PURE__ */
|
135
|
+
/* @__PURE__ */ React71__namespace.default.createElement(exports.Stack, { spacing: spacing3 }, children)
|
136
136
|
));
|
137
137
|
}
|
138
138
|
);
|
@@ -155,7 +155,7 @@ var init_Expandable = __esm({
|
|
155
155
|
},
|
156
156
|
...rest
|
157
157
|
}) => {
|
158
|
-
return /* @__PURE__ */
|
158
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
159
159
|
exports.Accordion,
|
160
160
|
{
|
161
161
|
...rest,
|
@@ -165,7 +165,7 @@ var init_Expandable = __esm({
|
|
165
165
|
size: size2,
|
166
166
|
onChange: (expandedIndex) => onChange(expandedIndex === 0)
|
167
167
|
},
|
168
|
-
/* @__PURE__ */
|
168
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
169
169
|
exports.ExpandableItem,
|
170
170
|
{
|
171
171
|
headingLevel,
|
@@ -185,7 +185,7 @@ var init_Expandable = __esm({
|
|
185
185
|
}) => {
|
186
186
|
const { size: size2 } = useAccordionContext();
|
187
187
|
warnAboutMismatchingIcon({ icon: leftIcon, size: size2 });
|
188
|
-
return /* @__PURE__ */
|
188
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.AccordionItem, { ...rest }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { as: headingLevel }, /* @__PURE__ */ React71__namespace.default.createElement(react.AccordionButton, null, /* @__PURE__ */ React71__namespace.default.createElement(react.Flex, { alignItems: "center" }, leftIcon && /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { marginRight: 1 }, leftIcon), title), /* @__PURE__ */ React71__namespace.default.createElement(react.AccordionIcon, null))), /* @__PURE__ */ React71__namespace.default.createElement(react.AccordionPanel, null, children));
|
189
189
|
};
|
190
190
|
warnAboutMismatchingIcon = ({ icon, size: size2 }) => {
|
191
191
|
var _a6, _b5;
|
@@ -236,10 +236,10 @@ function LanguageProvider({
|
|
236
236
|
language,
|
237
237
|
children
|
238
238
|
}) {
|
239
|
-
return /* @__PURE__ */
|
239
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(LanguageContext.Provider, { value: language }, children);
|
240
240
|
}
|
241
241
|
function useLanguage() {
|
242
|
-
const language =
|
242
|
+
const language = React71.useContext(LanguageContext);
|
243
243
|
if (!language) {
|
244
244
|
throw new Error("Please wrap your application in a LanguageProvider");
|
245
245
|
}
|
@@ -265,12 +265,12 @@ var init_i18n = __esm({
|
|
265
265
|
Language3["English"] = "en";
|
266
266
|
return Language3;
|
267
267
|
})(exports.Language || {});
|
268
|
-
LanguageContext =
|
268
|
+
LanguageContext = React71.createContext(void 0);
|
269
269
|
}
|
270
270
|
});
|
271
271
|
function useHydrated() {
|
272
|
-
let [hydrated, setHydrated] =
|
273
|
-
|
272
|
+
let [hydrated, setHydrated] = React71.useState(() => !hydrating);
|
273
|
+
React71.useEffect(function hydrate() {
|
274
274
|
hydrating = false;
|
275
275
|
setHydrated(true);
|
276
276
|
}, []);
|
@@ -288,13 +288,13 @@ var init_ClientOnly = __esm({
|
|
288
288
|
init_useHydrated();
|
289
289
|
ClientOnly = ({ children, fallback = null }) => {
|
290
290
|
const isHydrated = useHydrated();
|
291
|
-
return /* @__PURE__ */
|
291
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(React71__namespace.default.Fragment, null, isHydrated ? children() : fallback);
|
292
292
|
};
|
293
293
|
}
|
294
294
|
});
|
295
295
|
function Lottie({ animationData }) {
|
296
296
|
const { View } = lottieReact.useLottie({ animationData, loop: true });
|
297
|
-
return /* @__PURE__ */
|
297
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(React71__namespace.default.Fragment, null, View);
|
298
298
|
}
|
299
299
|
var init_Lottie = __esm({
|
300
300
|
"src/loader/Lottie.tsx"() {
|
@@ -310,7 +310,7 @@ var init_ColorInlineLoader = __esm({
|
|
310
310
|
maxWidth,
|
311
311
|
...props
|
312
312
|
}) => {
|
313
|
-
return /* @__PURE__ */
|
313
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Center, { ...props }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React71__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React71__namespace.default.createElement(Lottie, { animationData: sporLoader.inlineLoaderColorData }))));
|
314
314
|
};
|
315
315
|
}
|
316
316
|
});
|
@@ -325,7 +325,7 @@ var init_ColorSpinner = __esm({
|
|
325
325
|
maxWidth,
|
326
326
|
...props
|
327
327
|
}) => {
|
328
|
-
return /* @__PURE__ */
|
328
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React71__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React71__namespace.default.createElement(Lottie, { animationData: sporLoader.spinnerColorData }))), children && /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { marginTop: 3, fontWeight: "bold" }, children));
|
329
329
|
};
|
330
330
|
}
|
331
331
|
});
|
@@ -335,7 +335,7 @@ var init_ContentLoader = __esm({
|
|
335
335
|
init_ClientOnly();
|
336
336
|
init_Lottie();
|
337
337
|
exports.ContentLoader = ({ children, ...props }) => {
|
338
|
-
return /* @__PURE__ */
|
338
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { ...props }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { maxWidth: "140px", marginX: "auto" }, /* @__PURE__ */ React71__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React71__namespace.default.createElement(Lottie, { animationData: sporLoader.contentLoaderData }))), children && /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { textAlign: "center", fontWeight: "bold" }, children));
|
339
339
|
};
|
340
340
|
}
|
341
341
|
});
|
@@ -349,7 +349,7 @@ var init_DarkFullScreenLoader = __esm({
|
|
349
349
|
maxWidth,
|
350
350
|
...props
|
351
351
|
}) => {
|
352
|
-
return /* @__PURE__ */
|
352
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Center, { height: "100%", background: "darkTeal", ...props }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React71__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React71__namespace.default.createElement(Lottie, { animationData: sporLoader.fullScreenLoaderWhiteData }))));
|
353
353
|
};
|
354
354
|
}
|
355
355
|
});
|
@@ -363,7 +363,7 @@ var init_DarkInlineLoader = __esm({
|
|
363
363
|
maxWidth,
|
364
364
|
...props
|
365
365
|
}) => {
|
366
|
-
return /* @__PURE__ */
|
366
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Center, { ...props }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React71__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React71__namespace.default.createElement(Lottie, { animationData: sporLoader.inlineLoaderDarkData }))));
|
367
367
|
};
|
368
368
|
}
|
369
369
|
});
|
@@ -381,7 +381,7 @@ var init_DarkSpinner = __esm({
|
|
381
381
|
}) => {
|
382
382
|
const { colorMode } = react.useColorMode();
|
383
383
|
const spinnerData = colorMode === "dark" ? sporLoader.spinnerLightData : sporLoader.spinnerDarkData;
|
384
|
-
return /* @__PURE__ */
|
384
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React71__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React71__namespace.default.createElement(Lottie, { animationData: spinnerData }))), children && /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { marginTop: 3, fontWeight: "bold" }, children));
|
385
385
|
};
|
386
386
|
}
|
387
387
|
});
|
@@ -395,7 +395,7 @@ var init_LightFullScreenLoader = __esm({
|
|
395
395
|
maxWidth,
|
396
396
|
...props
|
397
397
|
}) => {
|
398
|
-
return /* @__PURE__ */
|
398
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Center, { height: "100%", background: "white", ...props }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React71__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React71__namespace.default.createElement(Lottie, { animationData: sporLoader.fullScreenLoaderBlackData }))));
|
399
399
|
};
|
400
400
|
}
|
401
401
|
});
|
@@ -409,7 +409,7 @@ var init_LightInlineLoader = __esm({
|
|
409
409
|
maxWidth,
|
410
410
|
...props
|
411
411
|
}) => {
|
412
|
-
return /* @__PURE__ */
|
412
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Center, { ...props }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React71__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React71__namespace.default.createElement(Lottie, { animationData: sporLoader.inlineLoaderLightData }))));
|
413
413
|
};
|
414
414
|
}
|
415
415
|
});
|
@@ -424,7 +424,7 @@ var init_LightSpinner = __esm({
|
|
424
424
|
maxWidth,
|
425
425
|
...props
|
426
426
|
}) => {
|
427
|
-
return /* @__PURE__ */
|
427
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React71__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React71__namespace.default.createElement(Lottie, { animationData: sporLoader.spinnerLightData }))), children && /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { marginTop: 3, fontWeight: "bold" }, children));
|
428
428
|
};
|
429
429
|
}
|
430
430
|
});
|
@@ -432,11 +432,11 @@ var useRotatingLabel;
|
|
432
432
|
var init_useRotatingLabel = __esm({
|
433
433
|
"src/loader/useRotatingLabel.tsx"() {
|
434
434
|
useRotatingLabel = ({ label, delay }) => {
|
435
|
-
const loadingTextArray =
|
435
|
+
const loadingTextArray = React71.useMemo(
|
436
436
|
() => Array.isArray(label) ? label : [label],
|
437
437
|
[label]
|
438
438
|
);
|
439
|
-
const [currentLoadingTextIndex, setCurrentLoadingTextIndex] =
|
439
|
+
const [currentLoadingTextIndex, setCurrentLoadingTextIndex] = React71.useState(0);
|
440
440
|
react.useInterval(() => {
|
441
441
|
setCurrentLoadingTextIndex(
|
442
442
|
(prevIndex) => (prevIndex + 1) % loadingTextArray.length
|
@@ -471,7 +471,7 @@ var init_ProgressBar = __esm({
|
|
471
471
|
"aria-label": ariaLabel || t2(texts.label(value))
|
472
472
|
});
|
473
473
|
const styles3 = react.useMultiStyleConfig("ProgressBar", {});
|
474
|
-
return /* @__PURE__ */
|
474
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(React71__namespace.default.Fragment, null, /* @__PURE__ */ React71__namespace.default.createElement(
|
475
475
|
react.Box,
|
476
476
|
{
|
477
477
|
...progressBarProps,
|
@@ -479,8 +479,8 @@ var init_ProgressBar = __esm({
|
|
479
479
|
__css: styles3.container,
|
480
480
|
...rest
|
481
481
|
},
|
482
|
-
/* @__PURE__ */
|
483
|
-
currentLoadingText && /* @__PURE__ */
|
482
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.Box, { width, __css: styles3.background }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { __css: styles3.progress, height, width: `${value}%` })),
|
483
|
+
currentLoadingText && /* @__PURE__ */ React71__namespace.default.createElement(react.Text, { sx: styles3.description, ...labelProps }, currentLoadingText)
|
484
484
|
));
|
485
485
|
};
|
486
486
|
texts = createTexts({
|
@@ -517,11 +517,11 @@ var init_ProgressLoader = __esm({
|
|
517
517
|
value,
|
518
518
|
"aria-label": ariaLabel ?? t2(texts2.fallbackLabel(value ?? "?"))
|
519
519
|
});
|
520
|
-
const pathRef =
|
520
|
+
const pathRef = React71.useRef(null);
|
521
521
|
const progressPathLength = ((_a6 = pathRef.current) == null ? void 0 : _a6.getTotalLength()) ?? 0;
|
522
522
|
const progress = (value - 100) / 100 * progressPathLength;
|
523
|
-
const id =
|
524
|
-
return /* @__PURE__ */
|
523
|
+
const id = React71.useId();
|
524
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { ...progressBarProps, minWidth: "100px", width, ...rest }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { as: "svg", viewBox: "0 0 246 78", fill: "none" }, /* @__PURE__ */ React71__namespace.default.createElement(
|
525
525
|
react.Box,
|
526
526
|
{
|
527
527
|
as: "path",
|
@@ -529,7 +529,7 @@ var init_ProgressLoader = __esm({
|
|
529
529
|
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",
|
530
530
|
fill: "#FFB466"
|
531
531
|
}
|
532
|
-
), /* @__PURE__ */
|
532
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(
|
533
533
|
react.Box,
|
534
534
|
{
|
535
535
|
as: "path",
|
@@ -540,7 +540,7 @@ var init_ProgressLoader = __esm({
|
|
540
540
|
strokeLinecap: "round",
|
541
541
|
strokeLinejoin: "round"
|
542
542
|
}
|
543
|
-
), /* @__PURE__ */
|
543
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(
|
544
544
|
react.Box,
|
545
545
|
{
|
546
546
|
as: "path",
|
@@ -555,7 +555,7 @@ var init_ProgressLoader = __esm({
|
|
555
555
|
transition: "stroke-dashoffset .2s ease-out",
|
556
556
|
ref: pathRef
|
557
557
|
}
|
558
|
-
), /* @__PURE__ */
|
558
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(
|
559
559
|
react.Box,
|
560
560
|
{
|
561
561
|
as: "path",
|
@@ -563,7 +563,7 @@ var init_ProgressLoader = __esm({
|
|
563
563
|
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",
|
564
564
|
fill: "#688CBA"
|
565
565
|
}
|
566
|
-
)), currentLoadingText && /* @__PURE__ */
|
566
|
+
)), currentLoadingText && /* @__PURE__ */ React71__namespace.default.createElement(
|
567
567
|
react.Text,
|
568
568
|
{
|
569
569
|
textAlign: "center",
|
@@ -587,19 +587,19 @@ var init_ProgressLoader = __esm({
|
|
587
587
|
exports.Skeleton = void 0;
|
588
588
|
var init_Skeleton = __esm({
|
589
589
|
"src/loader/Skeleton.tsx"() {
|
590
|
-
exports.Skeleton = react.forwardRef((props, ref) => /* @__PURE__ */
|
590
|
+
exports.Skeleton = react.forwardRef((props, ref) => /* @__PURE__ */ React71__namespace.default.createElement(react.Skeleton, { ...props, ref }));
|
591
591
|
}
|
592
592
|
});
|
593
593
|
exports.SkeletonCircle = void 0;
|
594
594
|
var init_SkeletonCircle = __esm({
|
595
595
|
"src/loader/SkeletonCircle.tsx"() {
|
596
|
-
exports.SkeletonCircle = (props) => /* @__PURE__ */
|
596
|
+
exports.SkeletonCircle = (props) => /* @__PURE__ */ React71__namespace.default.createElement(react.SkeletonCircle, { boxSize: 6, borderRadius: "50%", ...props });
|
597
597
|
}
|
598
598
|
});
|
599
599
|
exports.SkeletonText = void 0;
|
600
600
|
var init_SkeletonText = __esm({
|
601
601
|
"src/loader/SkeletonText.tsx"() {
|
602
|
-
exports.SkeletonText = (props) => /* @__PURE__ */
|
602
|
+
exports.SkeletonText = (props) => /* @__PURE__ */ React71__namespace.default.createElement(react.SkeletonText, { boxSize: 6, ...props });
|
603
603
|
}
|
604
604
|
});
|
605
605
|
|
@@ -674,7 +674,7 @@ var init_Button = __esm({
|
|
674
674
|
if (fontWeight) {
|
675
675
|
styles3.fontWeight = fontWeight;
|
676
676
|
}
|
677
|
-
return /* @__PURE__ */
|
677
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
678
678
|
react.Box,
|
679
679
|
{
|
680
680
|
...rest,
|
@@ -687,7 +687,7 @@ var init_Button = __esm({
|
|
687
687
|
disabled: isDisabled || isLoading,
|
688
688
|
position: "relative"
|
689
689
|
},
|
690
|
-
isLoading && /* @__PURE__ */
|
690
|
+
isLoading && /* @__PURE__ */ React71__namespace.default.createElement(react.Center, { position: "absolute", right: 0, left: 0, top: 1, bottom: 0 }, /* @__PURE__ */ React71__namespace.default.createElement(
|
691
691
|
exports.ColorInlineLoader,
|
692
692
|
{
|
693
693
|
maxWidth: getLoaderWidth(finalSize),
|
@@ -696,7 +696,7 @@ var init_Button = __esm({
|
|
696
696
|
marginY: 2
|
697
697
|
}
|
698
698
|
)),
|
699
|
-
/* @__PURE__ */
|
699
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
700
700
|
react.Flex,
|
701
701
|
{
|
702
702
|
gap: 1,
|
@@ -706,7 +706,7 @@ var init_Button = __esm({
|
|
706
706
|
visibility: isLoading ? "hidden" : "visible",
|
707
707
|
"aria-hidden": isLoading
|
708
708
|
},
|
709
|
-
/* @__PURE__ */
|
709
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.Flex, { gap: 1, alignItems: "center" }, leftIcon, /* @__PURE__ */ React71__namespace.default.createElement(
|
710
710
|
react.Box,
|
711
711
|
{
|
712
712
|
visibility: isLoading ? "hidden" : "visible",
|
@@ -732,7 +732,7 @@ var init_Button = __esm({
|
|
732
732
|
exports.ButtonGroup = void 0;
|
733
733
|
var init_ButtonGroup = __esm({
|
734
734
|
"src/button/ButtonGroup.tsx"() {
|
735
|
-
exports.ButtonGroup = react.forwardRef((props, ref) => /* @__PURE__ */
|
735
|
+
exports.ButtonGroup = react.forwardRef((props, ref) => /* @__PURE__ */ React71__namespace.default.createElement(react.ButtonGroup, { ...props, ref }));
|
736
736
|
}
|
737
737
|
});
|
738
738
|
exports.IconButton = void 0;
|
@@ -740,12 +740,12 @@ var init_IconButton = __esm({
|
|
740
740
|
"src/button/IconButton.tsx"() {
|
741
741
|
init_src();
|
742
742
|
exports.IconButton = react.forwardRef(
|
743
|
-
({ ...props }, ref) => /* @__PURE__ */
|
743
|
+
({ ...props }, ref) => /* @__PURE__ */ React71__namespace.default.createElement(
|
744
744
|
react.IconButton,
|
745
745
|
{
|
746
746
|
title: props["aria-label"],
|
747
747
|
...props,
|
748
|
-
spinner: /* @__PURE__ */
|
748
|
+
spinner: /* @__PURE__ */ React71__namespace.default.createElement(exports.ColorSpinner, { width: "80%", height: "80%", marginX: 1, marginTop: 1 }),
|
749
749
|
ref
|
750
750
|
}
|
751
751
|
)
|
@@ -760,7 +760,7 @@ var init_CloseButton = __esm({
|
|
760
760
|
exports.CloseButton = react.forwardRef(
|
761
761
|
({ size: size2 = "sm", ...props }, ref) => {
|
762
762
|
const { t: t2 } = useTranslation();
|
763
|
-
return /* @__PURE__ */
|
763
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
764
764
|
exports.IconButton,
|
765
765
|
{
|
766
766
|
ref,
|
@@ -777,11 +777,11 @@ var init_CloseButton = __esm({
|
|
777
777
|
switch (size2) {
|
778
778
|
case "xs":
|
779
779
|
case "sm":
|
780
|
-
return /* @__PURE__ */
|
780
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.CloseFill18Icon, null);
|
781
781
|
case "md":
|
782
|
-
return /* @__PURE__ */
|
782
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.CloseFill24Icon, null);
|
783
783
|
case "lg":
|
784
|
-
return /* @__PURE__ */
|
784
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.CloseFill30Icon, null);
|
785
785
|
}
|
786
786
|
};
|
787
787
|
texts4 = createTexts({
|
@@ -808,11 +808,11 @@ var init_FloatingActionButton = __esm({
|
|
808
808
|
placement = "bottom right",
|
809
809
|
...props
|
810
810
|
}, ref) => {
|
811
|
-
const [isTextVisible, setIsTextVisible] =
|
811
|
+
const [isTextVisible, setIsTextVisible] = React71__namespace.default.useState(
|
812
812
|
externalIsTextVisible !== void 0 ? externalIsTextVisible : false
|
813
813
|
);
|
814
814
|
const scrollDirection = useScrollDirection();
|
815
|
-
|
815
|
+
React71.useEffect(() => {
|
816
816
|
if (externalIsTextVisible !== void 0) {
|
817
817
|
return;
|
818
818
|
}
|
@@ -822,7 +822,7 @@ var init_FloatingActionButton = __esm({
|
|
822
822
|
);
|
823
823
|
return () => window.clearTimeout(id);
|
824
824
|
}, [scrollDirection, externalIsTextVisible]);
|
825
|
-
|
825
|
+
React71.useEffect(() => {
|
826
826
|
setIsTextVisible(!!externalIsTextVisible);
|
827
827
|
}, [externalIsTextVisible]);
|
828
828
|
const style = react.useMultiStyleConfig("FloatingActionButton", {
|
@@ -830,7 +830,7 @@ var init_FloatingActionButton = __esm({
|
|
830
830
|
isTextVisible,
|
831
831
|
placement
|
832
832
|
});
|
833
|
-
return /* @__PURE__ */
|
833
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
834
834
|
MotionBox,
|
835
835
|
{
|
836
836
|
__css: style.container,
|
@@ -838,8 +838,8 @@ var init_FloatingActionButton = __esm({
|
|
838
838
|
ref,
|
839
839
|
...props
|
840
840
|
},
|
841
|
-
/* @__PURE__ */
|
842
|
-
/* @__PURE__ */
|
841
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.Box, { __css: style.icon }, icon),
|
842
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
843
843
|
MotionBox,
|
844
844
|
{
|
845
845
|
animate: isTextVisible ? "show" : "hide",
|
@@ -864,11 +864,11 @@ var init_FloatingActionButton = __esm({
|
|
864
864
|
}
|
865
865
|
);
|
866
866
|
useScrollDirection = () => {
|
867
|
-
const [scrollDirection, setScrollDirection] =
|
868
|
-
const lastScrollPosition =
|
867
|
+
const [scrollDirection, setScrollDirection] = React71__namespace.default.useState(null);
|
868
|
+
const lastScrollPosition = React71__namespace.default.useRef(
|
869
869
|
typeof window !== "undefined" ? window.scrollY : 0
|
870
870
|
);
|
871
|
-
|
871
|
+
React71__namespace.default.useEffect(() => {
|
872
872
|
const onScroll = () => {
|
873
873
|
const delta = window.scrollY - lastScrollPosition.current;
|
874
874
|
if (delta === 0) {
|
@@ -904,7 +904,7 @@ var init_AlertIcon = __esm({
|
|
904
904
|
AlertIcon = ({ variant }) => {
|
905
905
|
const Icon = getIcon2(variant);
|
906
906
|
const { t: t2 } = useTranslation();
|
907
|
-
return /* @__PURE__ */
|
907
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
908
908
|
Icon,
|
909
909
|
{
|
910
910
|
flexShrink: 0,
|
@@ -971,7 +971,7 @@ var init_BaseAlert = __esm({
|
|
971
971
|
...boxProps
|
972
972
|
}) => {
|
973
973
|
const styles3 = react.useMultiStyleConfig("Alert", { variant });
|
974
|
-
return /* @__PURE__ */
|
974
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { __css: styles3.container, ...boxProps }, children);
|
975
975
|
};
|
976
976
|
}
|
977
977
|
});
|
@@ -998,17 +998,17 @@ var init_ClosableAlert = __esm({
|
|
998
998
|
externalOnClose();
|
999
999
|
onClose();
|
1000
1000
|
};
|
1001
|
-
return /* @__PURE__ */
|
1001
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(BaseAlert, { variant }, /* @__PURE__ */ React71__namespace.default.createElement(
|
1002
1002
|
exports.IconButton,
|
1003
1003
|
{
|
1004
1004
|
variant: "ghost",
|
1005
1005
|
size: "sm",
|
1006
1006
|
onClick: handleClose,
|
1007
|
-
icon: /* @__PURE__ */
|
1007
|
+
icon: /* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.CloseFill18Icon, null),
|
1008
1008
|
"aria-label": t2(texts6.close),
|
1009
1009
|
sx: styles3.closeButton
|
1010
1010
|
}
|
1011
|
-
), /* @__PURE__ */
|
1011
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(AlertIcon, { variant }), children);
|
1012
1012
|
};
|
1013
1013
|
texts6 = createTexts({
|
1014
1014
|
close: {
|
@@ -1036,7 +1036,7 @@ var init_ExpandableAlert = __esm({
|
|
1036
1036
|
...boxProps
|
1037
1037
|
}) => {
|
1038
1038
|
const styles3 = react.useMultiStyleConfig("AlertExpandable", { variant });
|
1039
|
-
return /* @__PURE__ */
|
1039
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(BaseAlert, { variant, ...boxProps, paddingX: 0, paddingY: 0 }, /* @__PURE__ */ React71__namespace.default.createElement(
|
1040
1040
|
react.Accordion,
|
1041
1041
|
{
|
1042
1042
|
onChange: (expandedIndex) => onToggle(expandedIndex === 0),
|
@@ -1044,14 +1044,14 @@ var init_ExpandableAlert = __esm({
|
|
1044
1044
|
allowToggle: true,
|
1045
1045
|
flexGrow: "1"
|
1046
1046
|
},
|
1047
|
-
/* @__PURE__ */
|
1047
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.AccordionItem, null, /* @__PURE__ */ React71__namespace.default.createElement(react.AccordionButton, { sx: styles3.container }, /* @__PURE__ */ React71__namespace.default.createElement(
|
1048
1048
|
react.Flex,
|
1049
1049
|
{
|
1050
1050
|
justifyContent: "space-between",
|
1051
1051
|
alignItems: "center",
|
1052
1052
|
flexGrow: "1"
|
1053
1053
|
},
|
1054
|
-
/* @__PURE__ */
|
1054
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.Flex, { as: headingLevel, alignItems: "center" }, /* @__PURE__ */ React71__namespace.default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React71__namespace.default.createElement(
|
1055
1055
|
react.Box,
|
1056
1056
|
{
|
1057
1057
|
as: "span",
|
@@ -1065,8 +1065,8 @@ var init_ExpandableAlert = __esm({
|
|
1065
1065
|
},
|
1066
1066
|
title
|
1067
1067
|
)),
|
1068
|
-
/* @__PURE__ */
|
1069
|
-
)), /* @__PURE__ */
|
1068
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.AccordionIcon, null)
|
1069
|
+
)), /* @__PURE__ */ React71__namespace.default.createElement(react.AccordionPanel, null, children))
|
1070
1070
|
));
|
1071
1071
|
};
|
1072
1072
|
}
|
@@ -1077,7 +1077,7 @@ var init_StaticAlert = __esm({
|
|
1077
1077
|
init_AlertIcon();
|
1078
1078
|
init_BaseAlert();
|
1079
1079
|
exports.StaticAlert = ({ children, ...props }) => {
|
1080
|
-
return /* @__PURE__ */
|
1080
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(BaseAlert, { ...props }, /* @__PURE__ */ React71__namespace.default.createElement(AlertIcon, { variant: props.variant }), children);
|
1081
1081
|
};
|
1082
1082
|
}
|
1083
1083
|
});
|
@@ -1095,10 +1095,10 @@ var init_Breadcrumb = __esm({
|
|
1095
1095
|
"src/breadcrumb/Breadcrumb.tsx"() {
|
1096
1096
|
exports.Breadcrumb = (props) => {
|
1097
1097
|
const iconColor = react.useColorModeValue("blackAlpha.400", "whiteAlpha.400");
|
1098
|
-
return /* @__PURE__ */
|
1098
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
1099
1099
|
react.Breadcrumb,
|
1100
1100
|
{
|
1101
|
-
separator: /* @__PURE__ */
|
1101
|
+
separator: /* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.DropdownRightFill18Icon, { color: iconColor }),
|
1102
1102
|
...props
|
1103
1103
|
}
|
1104
1104
|
);
|
@@ -1123,7 +1123,7 @@ var init_Card = __esm({
|
|
1123
1123
|
colorScheme,
|
1124
1124
|
size: size2
|
1125
1125
|
});
|
1126
|
-
return /* @__PURE__ */
|
1126
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.chakra.div, { sx: styles3, ...props, ref }, children);
|
1127
1127
|
}
|
1128
1128
|
);
|
1129
1129
|
}
|
@@ -1133,7 +1133,22 @@ var init_StaticCard = __esm({
|
|
1133
1133
|
"src/card/StaticCard.tsx"() {
|
1134
1134
|
exports.StaticCard = ({ colorScheme, ...props }) => {
|
1135
1135
|
const styles3 = react.useStyleConfig("StaticCard", { colorScheme });
|
1136
|
-
return /* @__PURE__ */
|
1136
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { __css: styles3, ...props });
|
1137
|
+
};
|
1138
|
+
}
|
1139
|
+
});
|
1140
|
+
exports.PressableCard = void 0;
|
1141
|
+
var init_PressableCard = __esm({
|
1142
|
+
"src/card/PressableCard.tsx"() {
|
1143
|
+
exports.PressableCard = ({
|
1144
|
+
children,
|
1145
|
+
as = "button",
|
1146
|
+
size: size2 = "sm",
|
1147
|
+
variant = "base",
|
1148
|
+
...props
|
1149
|
+
}) => {
|
1150
|
+
const styles3 = react.useStyleConfig("PressableCard", { variant, size: size2 });
|
1151
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { as, __css: styles3, ...props }, children);
|
1137
1152
|
};
|
1138
1153
|
}
|
1139
1154
|
});
|
@@ -1143,6 +1158,7 @@ var init_card = __esm({
|
|
1143
1158
|
"src/card/index.tsx"() {
|
1144
1159
|
init_Card();
|
1145
1160
|
init_StaticCard();
|
1161
|
+
init_PressableCard();
|
1146
1162
|
}
|
1147
1163
|
});
|
1148
1164
|
exports.Badge = void 0;
|
@@ -1150,7 +1166,7 @@ var init_Badge = __esm({
|
|
1150
1166
|
"src/typography/Badge.tsx"() {
|
1151
1167
|
exports.Badge = react.forwardRef(
|
1152
1168
|
({ icon, colorScheme = "grey", children, ...props }, ref) => {
|
1153
|
-
return /* @__PURE__ */
|
1169
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
1154
1170
|
react.Badge,
|
1155
1171
|
{
|
1156
1172
|
colorScheme,
|
@@ -1158,7 +1174,7 @@ var init_Badge = __esm({
|
|
1158
1174
|
paddingLeft: icon ? 1 : void 0,
|
1159
1175
|
ref
|
1160
1176
|
},
|
1161
|
-
icon &&
|
1177
|
+
icon && React71__namespace.default.cloneElement(icon, { marginRight: 1 }),
|
1162
1178
|
children
|
1163
1179
|
);
|
1164
1180
|
}
|
@@ -1168,7 +1184,7 @@ var init_Badge = __esm({
|
|
1168
1184
|
exports.Code = void 0;
|
1169
1185
|
var init_Code = __esm({
|
1170
1186
|
"src/typography/Code.tsx"() {
|
1171
|
-
exports.Code = react.forwardRef((props, ref) => /* @__PURE__ */
|
1187
|
+
exports.Code = react.forwardRef((props, ref) => /* @__PURE__ */ React71__namespace.default.createElement(react.Code, { ...props, ref }));
|
1172
1188
|
}
|
1173
1189
|
});
|
1174
1190
|
exports.Heading = void 0;
|
@@ -1184,7 +1200,7 @@ var init_Heading = __esm({
|
|
1184
1200
|
}) => {
|
1185
1201
|
const id = externalId ?? (autoId && typeof props.children === "string") ? slugify(props.children) : void 0;
|
1186
1202
|
const color2 = react.useColorModeValue("text.primary.light", "text.primary.dark");
|
1187
|
-
return /* @__PURE__ */
|
1203
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Text, { as, textStyle: variant, id, color: color2, ...props });
|
1188
1204
|
};
|
1189
1205
|
}
|
1190
1206
|
});
|
@@ -1193,7 +1209,7 @@ var init_Text = __esm({
|
|
1193
1209
|
"src/typography/Text.tsx"() {
|
1194
1210
|
exports.Text = react.forwardRef(
|
1195
1211
|
({ variant = "sm", ...props }, ref) => {
|
1196
|
-
return /* @__PURE__ */
|
1212
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Text, { ...props, textStyle: variant, ref });
|
1197
1213
|
}
|
1198
1214
|
);
|
1199
1215
|
}
|
@@ -1214,7 +1230,7 @@ function CalendarCell({
|
|
1214
1230
|
currentMonth,
|
1215
1231
|
variant
|
1216
1232
|
}) {
|
1217
|
-
const ref =
|
1233
|
+
const ref = React71.useRef(null);
|
1218
1234
|
const {
|
1219
1235
|
cellProps,
|
1220
1236
|
buttonProps,
|
@@ -1238,7 +1254,7 @@ function CalendarCell({
|
|
1238
1254
|
if (isOutsideMonth) {
|
1239
1255
|
stateProps["data-unavailable"] = true;
|
1240
1256
|
}
|
1241
|
-
|
1257
|
+
React71.useEffect(() => {
|
1242
1258
|
var _a6;
|
1243
1259
|
(_a6 = ref == null ? void 0 : ref.current) == null ? void 0 : _a6.addEventListener(
|
1244
1260
|
"touchend",
|
@@ -1248,7 +1264,7 @@ function CalendarCell({
|
|
1248
1264
|
{ passive: false, once: true }
|
1249
1265
|
);
|
1250
1266
|
}, []);
|
1251
|
-
return /* @__PURE__ */
|
1267
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
1252
1268
|
react.Box,
|
1253
1269
|
{
|
1254
1270
|
as: "td",
|
@@ -1271,7 +1287,7 @@ function CalendarCell({
|
|
1271
1287
|
}
|
1272
1288
|
}
|
1273
1289
|
},
|
1274
|
-
/* @__PURE__ */
|
1290
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
1275
1291
|
react.Box,
|
1276
1292
|
{
|
1277
1293
|
as: "button",
|
@@ -1338,8 +1354,8 @@ function CalendarGrid({
|
|
1338
1354
|
const weeksInMonth = date.getWeeksInMonth(state2.visibleRange.start, locale);
|
1339
1355
|
const weeksInMonthRange = new Array(weeksInMonth).fill(0).map((_, i) => i);
|
1340
1356
|
const styles3 = react.useMultiStyleConfig("Datepicker", { variant });
|
1341
|
-
return /* @__PURE__ */
|
1342
|
-
return /* @__PURE__ */
|
1357
|
+
return /* @__PURE__ */ React71__namespace.default.createElement("table", { ...gridProps }, /* @__PURE__ */ React71__namespace.default.createElement("thead", { ...headerProps }, /* @__PURE__ */ React71__namespace.default.createElement("tr", null, weekDays[language].map((day, index) => {
|
1358
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
1343
1359
|
exports.Text,
|
1344
1360
|
{
|
1345
1361
|
as: "th",
|
@@ -1349,8 +1365,8 @@ function CalendarGrid({
|
|
1349
1365
|
},
|
1350
1366
|
day
|
1351
1367
|
);
|
1352
|
-
}))), /* @__PURE__ */
|
1353
|
-
(date, dayIndex) => date ? /* @__PURE__ */
|
1368
|
+
}))), /* @__PURE__ */ React71__namespace.default.createElement("tbody", null, weeksInMonthRange.map((weekIndex) => /* @__PURE__ */ React71__namespace.default.createElement("tr", { key: weekIndex }, state2.getDatesInWeek(weekIndex, startDate).map(
|
1369
|
+
(date, dayIndex) => date ? /* @__PURE__ */ React71__namespace.default.createElement(
|
1354
1370
|
CalendarCell,
|
1355
1371
|
{
|
1356
1372
|
variant,
|
@@ -1359,7 +1375,7 @@ function CalendarGrid({
|
|
1359
1375
|
date,
|
1360
1376
|
currentMonth: startDate
|
1361
1377
|
}
|
1362
|
-
) : /* @__PURE__ */
|
1378
|
+
) : /* @__PURE__ */ React71__namespace.default.createElement("td", { key: dayIndex })
|
1363
1379
|
)))));
|
1364
1380
|
}
|
1365
1381
|
var weekDays;
|
@@ -1382,9 +1398,9 @@ function CalendarNavigationButton({
|
|
1382
1398
|
"aria-label": ariaLabel,
|
1383
1399
|
...rest
|
1384
1400
|
}) {
|
1385
|
-
const ref =
|
1401
|
+
const ref = React71.useRef(null);
|
1386
1402
|
const { buttonProps } = reactAria.useButton(rest, ref);
|
1387
|
-
return /* @__PURE__ */
|
1403
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
1388
1404
|
exports.IconButton,
|
1389
1405
|
{
|
1390
1406
|
...buttonProps,
|
@@ -1421,7 +1437,7 @@ function CalendarHeader({
|
|
1421
1437
|
);
|
1422
1438
|
const areAllOtherYearsDisabled = isPreviousYearDisabled && isNextYearDisabled;
|
1423
1439
|
const isYearPickerVisible = showYearNavigation && !areAllOtherYearsDisabled;
|
1424
|
-
return /* @__PURE__ */
|
1440
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Flex, { alignItems: "center", paddingBottom: "4", justifyContent: "space-between" }, /* @__PURE__ */ React71__namespace.default.createElement(
|
1425
1441
|
CalendarNavigator,
|
1426
1442
|
{
|
1427
1443
|
title: title ? title : isYearPickerVisible ? monthTitle : monthAndYearTitle,
|
@@ -1431,7 +1447,7 @@ function CalendarHeader({
|
|
1431
1447
|
isNextDisabled: !state2.isPreviousVisibleRangeInvalid,
|
1432
1448
|
isPreviousDisabled: !state2.isNextVisibleRangeInvalid
|
1433
1449
|
}
|
1434
|
-
), isYearPickerVisible && /* @__PURE__ */
|
1450
|
+
), isYearPickerVisible && /* @__PURE__ */ React71__namespace.default.createElement(
|
1435
1451
|
CalendarNavigator,
|
1436
1452
|
{
|
1437
1453
|
title: jsDate.getFullYear().toString(),
|
@@ -1460,15 +1476,15 @@ var init_CalendarHeader = __esm({
|
|
1460
1476
|
isNextDisabled
|
1461
1477
|
}) => {
|
1462
1478
|
const { t: t2 } = useTranslation();
|
1463
|
-
return /* @__PURE__ */
|
1479
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Flex, { alignItems: "center", flexGrow: 1 }, /* @__PURE__ */ React71__namespace.default.createElement(
|
1464
1480
|
CalendarNavigationButton,
|
1465
1481
|
{
|
1466
1482
|
onPress: onPrevious,
|
1467
1483
|
isDisabled: isPreviousDisabled,
|
1468
|
-
icon: /* @__PURE__ */
|
1484
|
+
icon: /* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.ArrowLeftOutline24Icon, null),
|
1469
1485
|
"aria-label": `${t2(texts7.previous)} ${t2(texts7[unit])}`
|
1470
1486
|
}
|
1471
|
-
), /* @__PURE__ */
|
1487
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(
|
1472
1488
|
exports.Heading,
|
1473
1489
|
{
|
1474
1490
|
as: "div",
|
@@ -1479,12 +1495,12 @@ var init_CalendarHeader = __esm({
|
|
1479
1495
|
textAlign: "center"
|
1480
1496
|
},
|
1481
1497
|
capitalize(title)
|
1482
|
-
), /* @__PURE__ */
|
1498
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(
|
1483
1499
|
CalendarNavigationButton,
|
1484
1500
|
{
|
1485
1501
|
onPress: onNext,
|
1486
1502
|
isDisabled: isNextDisabled,
|
1487
|
-
icon: /* @__PURE__ */
|
1503
|
+
icon: /* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.ArrowRightOutline24Icon, null),
|
1488
1504
|
"aria-label": `${t2(texts7.next)} ${t2(texts7[unit])}`
|
1489
1505
|
}
|
1490
1506
|
));
|
@@ -1532,7 +1548,7 @@ function Calendar({
|
|
1532
1548
|
const { calendarProps } = reactAria.useCalendar(props, state2);
|
1533
1549
|
const calendarAriaLabel = calendarProps["aria-label"];
|
1534
1550
|
const ariaLabel = t2(texts8.calendar) + (calendarAriaLabel ? ` ${calendarAriaLabel}` : "");
|
1535
|
-
return /* @__PURE__ */
|
1551
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { ...calendarProps, "aria-label": ariaLabel }, /* @__PURE__ */ React71__namespace.default.createElement(CalendarHeader, { state: state2, showYearNavigation }), /* @__PURE__ */ React71__namespace.default.createElement(CalendarGrid, { variant, state: state2 }));
|
1536
1552
|
}
|
1537
1553
|
var texts8;
|
1538
1554
|
var init_Calendar = __esm({
|
@@ -1566,7 +1582,7 @@ var init_CalendarTriggerButton = __esm({
|
|
1566
1582
|
onPress(event);
|
1567
1583
|
}
|
1568
1584
|
};
|
1569
|
-
return /* @__PURE__ */
|
1585
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React71__namespace.default.createElement(
|
1570
1586
|
react.Box,
|
1571
1587
|
{
|
1572
1588
|
ref,
|
@@ -1577,7 +1593,7 @@ var init_CalendarTriggerButton = __esm({
|
|
1577
1593
|
...filteredButtonProps,
|
1578
1594
|
onKeyUp: handleOnPress
|
1579
1595
|
},
|
1580
|
-
/* @__PURE__ */
|
1596
|
+
/* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.CalendarOutline24Icon, null)
|
1581
1597
|
));
|
1582
1598
|
}
|
1583
1599
|
);
|
@@ -1594,9 +1610,9 @@ var init_CalendarTriggerButton = __esm({
|
|
1594
1610
|
var DateTimeSegment, isPaddable;
|
1595
1611
|
var init_DateTimeSegment = __esm({
|
1596
1612
|
"src/datepicker/DateTimeSegment.tsx"() {
|
1597
|
-
DateTimeSegment =
|
1613
|
+
DateTimeSegment = React71.forwardRef(
|
1598
1614
|
({ segment, state: state2 }, externalRef) => {
|
1599
|
-
const internalRef =
|
1615
|
+
const internalRef = React71.useRef(null);
|
1600
1616
|
const ref = externalRef ?? internalRef;
|
1601
1617
|
const { segmentProps } = reactAria.useDateSegment(
|
1602
1618
|
segment,
|
@@ -1607,7 +1623,7 @@ var init_DateTimeSegment = __esm({
|
|
1607
1623
|
isPlaceholder: segment.isPlaceholder,
|
1608
1624
|
isEditable: segment.isEditable
|
1609
1625
|
});
|
1610
|
-
return /* @__PURE__ */
|
1626
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
1611
1627
|
react.Box,
|
1612
1628
|
{
|
1613
1629
|
...segmentProps,
|
@@ -1646,7 +1662,7 @@ var init_DateField = __esm({
|
|
1646
1662
|
"src/datepicker/DateField.tsx"() {
|
1647
1663
|
init_DateTimeSegment();
|
1648
1664
|
init_utils();
|
1649
|
-
DateField =
|
1665
|
+
DateField = React71.forwardRef(
|
1650
1666
|
(props, externalRef) => {
|
1651
1667
|
var _a6;
|
1652
1668
|
const locale = useCurrentLocale();
|
@@ -1656,14 +1672,14 @@ var init_DateField = __esm({
|
|
1656
1672
|
locale,
|
1657
1673
|
createCalendar: createCalendar2
|
1658
1674
|
});
|
1659
|
-
const internalRef =
|
1675
|
+
const internalRef = React71.useRef(null);
|
1660
1676
|
const ref = externalRef ?? internalRef;
|
1661
1677
|
const { fieldProps, labelProps } = reactAria.useDateField(
|
1662
1678
|
props,
|
1663
1679
|
state2,
|
1664
1680
|
ref
|
1665
1681
|
);
|
1666
|
-
return /* @__PURE__ */
|
1682
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { minWidth: "6rem", width: "100%" }, props.label && /* @__PURE__ */ React71__namespace.default.createElement(
|
1667
1683
|
react.FormLabel,
|
1668
1684
|
{
|
1669
1685
|
...props.labelProps,
|
@@ -1673,7 +1689,7 @@ var init_DateField = __esm({
|
|
1673
1689
|
paddingTop: "2px"
|
1674
1690
|
},
|
1675
1691
|
props.label
|
1676
|
-
), /* @__PURE__ */
|
1692
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5" }, state2.segments.map((segment, i) => /* @__PURE__ */ React71__namespace.default.createElement(DateTimeSegment, { key: i, segment, state: state2 }))), /* @__PURE__ */ React71__namespace.default.createElement(
|
1677
1693
|
"input",
|
1678
1694
|
{
|
1679
1695
|
type: "hidden",
|
@@ -1694,7 +1710,7 @@ var init_StyledField = __esm({
|
|
1694
1710
|
isInvalid: false
|
1695
1711
|
};
|
1696
1712
|
const styles3 = react.useMultiStyleConfig("Datepicker", { variant });
|
1697
|
-
return /* @__PURE__ */
|
1713
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
1698
1714
|
react.Box,
|
1699
1715
|
{
|
1700
1716
|
...otherProps,
|
@@ -1717,7 +1733,7 @@ var init_DatePicker = __esm({
|
|
1717
1733
|
init_DateField();
|
1718
1734
|
init_StyledField();
|
1719
1735
|
init_utils();
|
1720
|
-
exports.DatePicker =
|
1736
|
+
exports.DatePicker = React71.forwardRef(
|
1721
1737
|
({
|
1722
1738
|
variant,
|
1723
1739
|
errorMessage,
|
@@ -1735,7 +1751,7 @@ var init_DatePicker = __esm({
|
|
1735
1751
|
isRequired: props.isRequired ?? (formControlProps == null ? void 0 : formControlProps.isRequired),
|
1736
1752
|
validationState: (formControlProps == null ? void 0 : formControlProps.isInvalid) ? "invalid" : "valid"
|
1737
1753
|
});
|
1738
|
-
const internalRef =
|
1754
|
+
const internalRef = React71.useRef(null);
|
1739
1755
|
const ref = externalRef ?? internalRef;
|
1740
1756
|
const {
|
1741
1757
|
groupProps,
|
@@ -1755,7 +1771,7 @@ var init_DatePicker = __esm({
|
|
1755
1771
|
const onFieldClick = () => {
|
1756
1772
|
state2.setOpen(true);
|
1757
1773
|
};
|
1758
|
-
const popoverContent = /* @__PURE__ */
|
1774
|
+
const popoverContent = /* @__PURE__ */ React71__namespace.default.createElement(react.PopoverContent, { color: "darkGrey", sx: styles3.calendarPopover }, /* @__PURE__ */ React71__namespace.default.createElement(react.PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React71__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React71__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React71__namespace.default.createElement(
|
1759
1775
|
Calendar,
|
1760
1776
|
{
|
1761
1777
|
...calendarProps,
|
@@ -1763,7 +1779,7 @@ var init_DatePicker = __esm({
|
|
1763
1779
|
showYearNavigation
|
1764
1780
|
}
|
1765
1781
|
))));
|
1766
|
-
return /* @__PURE__ */
|
1782
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React71__namespace.default.createElement(
|
1767
1783
|
react.Box,
|
1768
1784
|
{
|
1769
1785
|
position: "relative",
|
@@ -1771,7 +1787,7 @@ var init_DatePicker = __esm({
|
|
1771
1787
|
flexDirection: "column",
|
1772
1788
|
width
|
1773
1789
|
},
|
1774
|
-
/* @__PURE__ */
|
1790
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
1775
1791
|
react.Popover,
|
1776
1792
|
{
|
1777
1793
|
...dialogProps,
|
@@ -1780,7 +1796,7 @@ var init_DatePicker = __esm({
|
|
1780
1796
|
onClose: state2.close,
|
1781
1797
|
flip: false
|
1782
1798
|
},
|
1783
|
-
/* @__PURE__ */
|
1799
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.InputGroup, { ...groupProps, display: "inline-flex" }, /* @__PURE__ */ React71__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React71__namespace.default.createElement(
|
1784
1800
|
StyledField,
|
1785
1801
|
{
|
1786
1802
|
variant,
|
@@ -1788,7 +1804,7 @@ var init_DatePicker = __esm({
|
|
1788
1804
|
paddingX: 3,
|
1789
1805
|
minHeight
|
1790
1806
|
},
|
1791
|
-
/* @__PURE__ */
|
1807
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.PopoverTrigger, null, /* @__PURE__ */ React71__namespace.default.createElement(
|
1792
1808
|
CalendarTriggerButton,
|
1793
1809
|
{
|
1794
1810
|
variant,
|
@@ -1796,7 +1812,7 @@ var init_DatePicker = __esm({
|
|
1796
1812
|
...buttonProps
|
1797
1813
|
}
|
1798
1814
|
)),
|
1799
|
-
/* @__PURE__ */
|
1815
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
1800
1816
|
DateField,
|
1801
1817
|
{
|
1802
1818
|
label: props.label,
|
@@ -1806,8 +1822,8 @@ var init_DatePicker = __esm({
|
|
1806
1822
|
}
|
1807
1823
|
)
|
1808
1824
|
))),
|
1809
|
-
/* @__PURE__ */
|
1810
|
-
state2.isOpen && !props.isDisabled && withPortal && /* @__PURE__ */
|
1825
|
+
/* @__PURE__ */ React71__namespace.default.createElement(exports.FormErrorMessage, { ...errorMessageProps }, errorMessage),
|
1826
|
+
state2.isOpen && !props.isDisabled && withPortal && /* @__PURE__ */ React71__namespace.default.createElement(react.Portal, null, popoverContent),
|
1811
1827
|
state2.isOpen && !props.isDisabled && !withPortal && popoverContent
|
1812
1828
|
)
|
1813
1829
|
));
|
@@ -1823,9 +1839,9 @@ function RangeCalendar(props) {
|
|
1823
1839
|
locale,
|
1824
1840
|
createCalendar: date.createCalendar
|
1825
1841
|
});
|
1826
|
-
const ref =
|
1842
|
+
const ref = React71.useRef(null);
|
1827
1843
|
const { calendarProps, title } = reactAria.useRangeCalendar(props, state2, ref);
|
1828
|
-
return /* @__PURE__ */
|
1844
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { ...calendarProps, ref }, /* @__PURE__ */ React71__namespace.default.createElement(CalendarHeader, { state: state2, title }), /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { display: "flex", gap: "8" }, /* @__PURE__ */ React71__namespace.default.createElement(CalendarGrid, { variant: props.variant, state: state2 }), /* @__PURE__ */ React71__namespace.default.createElement(
|
1829
1845
|
CalendarGrid,
|
1830
1846
|
{
|
1831
1847
|
variant: props.variant,
|
@@ -1856,7 +1872,7 @@ function DateRangePicker({
|
|
1856
1872
|
isRequired: props.isRequired ?? (formControlProps == null ? void 0 : formControlProps.isRequired),
|
1857
1873
|
validationState: formControlProps.isInvalid ? "invalid" : "valid"
|
1858
1874
|
});
|
1859
|
-
const ref =
|
1875
|
+
const ref = React71.useRef(null);
|
1860
1876
|
const {
|
1861
1877
|
groupProps,
|
1862
1878
|
labelProps,
|
@@ -1877,8 +1893,8 @@ function DateRangePicker({
|
|
1877
1893
|
const onFieldClick = () => {
|
1878
1894
|
state2.setOpen(true);
|
1879
1895
|
};
|
1880
|
-
const popoverContent = /* @__PURE__ */
|
1881
|
-
return /* @__PURE__ */
|
1896
|
+
const popoverContent = /* @__PURE__ */ React71__namespace.default.createElement(react.PopoverContent, { sx: styles3.calendarPopover, maxWidth: "none" }, /* @__PURE__ */ React71__namespace.default.createElement(react.PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React71__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React71__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React71__namespace.default.createElement(RangeCalendar, { variant: "base", ...calendarProps }))));
|
1897
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, props.label && /* @__PURE__ */ React71__namespace.default.createElement(react.FormLabel, { ...labelProps, sx: styles3.inputLabel }, props.label), /* @__PURE__ */ React71__namespace.default.createElement(
|
1882
1898
|
react.Popover,
|
1883
1899
|
{
|
1884
1900
|
...dialogProps,
|
@@ -1887,7 +1903,7 @@ function DateRangePicker({
|
|
1887
1903
|
onClose: state2.close,
|
1888
1904
|
flip: false
|
1889
1905
|
},
|
1890
|
-
/* @__PURE__ */
|
1906
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.InputGroup, { ...groupProps, width: "auto", display: "inline-flex" }, /* @__PURE__ */ React71__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React71__namespace.default.createElement(
|
1891
1907
|
StyledField,
|
1892
1908
|
{
|
1893
1909
|
alignItems: "center",
|
@@ -1897,7 +1913,7 @@ function DateRangePicker({
|
|
1897
1913
|
onKeyPress: handleEnterClick,
|
1898
1914
|
minHeight
|
1899
1915
|
},
|
1900
|
-
variant && /* @__PURE__ */
|
1916
|
+
variant && /* @__PURE__ */ React71__namespace.default.createElement(react.PopoverTrigger, null, /* @__PURE__ */ React71__namespace.default.createElement(
|
1901
1917
|
CalendarTriggerButton,
|
1902
1918
|
{
|
1903
1919
|
paddingLeft: 1,
|
@@ -1907,7 +1923,7 @@ function DateRangePicker({
|
|
1907
1923
|
...buttonProps
|
1908
1924
|
}
|
1909
1925
|
)),
|
1910
|
-
/* @__PURE__ */
|
1926
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
1911
1927
|
DateField,
|
1912
1928
|
{
|
1913
1929
|
...startFieldProps,
|
@@ -1916,8 +1932,8 @@ function DateRangePicker({
|
|
1916
1932
|
labelProps
|
1917
1933
|
}
|
1918
1934
|
),
|
1919
|
-
/* @__PURE__ */
|
1920
|
-
/* @__PURE__ */
|
1935
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.Box, { as: "span", "aria-hidden": "true", paddingRight: "2" }, "\u2013"),
|
1936
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
1921
1937
|
DateField,
|
1922
1938
|
{
|
1923
1939
|
...endFieldProps,
|
@@ -1927,7 +1943,7 @@ function DateRangePicker({
|
|
1927
1943
|
}
|
1928
1944
|
)
|
1929
1945
|
))),
|
1930
|
-
state2.isOpen && withPortal && /* @__PURE__ */
|
1946
|
+
state2.isOpen && withPortal && /* @__PURE__ */ React71__namespace.default.createElement(react.Portal, null, popoverContent),
|
1931
1947
|
state2.isOpen && !withPortal && popoverContent
|
1932
1948
|
)));
|
1933
1949
|
}
|
@@ -1947,9 +1963,9 @@ var init_TimeField = __esm({
|
|
1947
1963
|
init_DateTimeSegment();
|
1948
1964
|
init_utils();
|
1949
1965
|
TimeField = ({ state: state2, ...props }) => {
|
1950
|
-
const ref =
|
1966
|
+
const ref = React71.useRef(null);
|
1951
1967
|
const { labelProps, fieldProps } = reactAria.useTimeField(props, state2, ref);
|
1952
|
-
return /* @__PURE__ */
|
1968
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, null, /* @__PURE__ */ React71__namespace.default.createElement(
|
1953
1969
|
exports.FormLabel,
|
1954
1970
|
{
|
1955
1971
|
...labelProps,
|
@@ -1961,7 +1977,7 @@ var init_TimeField = __esm({
|
|
1961
1977
|
paddingTop: "2px"
|
1962
1978
|
},
|
1963
1979
|
props.label
|
1964
|
-
), /* @__PURE__ */
|
1980
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5" }, state2.segments.map((segment) => /* @__PURE__ */ React71__namespace.default.createElement(DateTimeSegment, { key: segment.type, segment, state: state2 }))), /* @__PURE__ */ React71__namespace.default.createElement(
|
1965
1981
|
"input",
|
1966
1982
|
{
|
1967
1983
|
type: "hidden",
|
@@ -2037,7 +2053,7 @@ var init_TimePicker = __esm({
|
|
2037
2053
|
const ariaLabel = `${inputLabel} \u2013 ${t2(
|
2038
2054
|
texts10.selectedTimeIs(`${(dateTime == null ? void 0 : dateTime.hour) ?? 0} ${(dateTime == null ? void 0 : dateTime.minute) ?? 0}`)
|
2039
2055
|
)}`;
|
2040
|
-
return /* @__PURE__ */
|
2056
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
2041
2057
|
StyledField,
|
2042
2058
|
{
|
2043
2059
|
variant: "base",
|
@@ -2053,7 +2069,7 @@ var init_TimePicker = __esm({
|
|
2053
2069
|
"aria-label": ariaLabel,
|
2054
2070
|
...boxProps
|
2055
2071
|
},
|
2056
|
-
/* @__PURE__ */
|
2072
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
2057
2073
|
exports.IconButton,
|
2058
2074
|
{
|
2059
2075
|
variant: "ghost",
|
@@ -2061,14 +2077,14 @@ var init_TimePicker = __esm({
|
|
2061
2077
|
borderRadius: "xs",
|
2062
2078
|
"aria-label": backwardsLabel,
|
2063
2079
|
title: backwardsLabel,
|
2064
|
-
icon: /* @__PURE__ */
|
2080
|
+
icon: /* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.DropdownLeftFill18Icon, null),
|
2065
2081
|
onClick: handleBackwardsClick,
|
2066
2082
|
isDisabled,
|
2067
2083
|
style: isDisabled ? { backgroundColor: "transparent" } : {}
|
2068
2084
|
}
|
2069
2085
|
),
|
2070
|
-
/* @__PURE__ */
|
2071
|
-
/* @__PURE__ */
|
2086
|
+
/* @__PURE__ */ React71__namespace.default.createElement(TimeField, { label, state: state2, name }),
|
2087
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
2072
2088
|
exports.IconButton,
|
2073
2089
|
{
|
2074
2090
|
variant: "ghost",
|
@@ -2076,7 +2092,7 @@ var init_TimePicker = __esm({
|
|
2076
2092
|
borderRadius: "xs",
|
2077
2093
|
"aria-label": forwardsLabel,
|
2078
2094
|
title: forwardsLabel,
|
2079
|
-
icon: /* @__PURE__ */
|
2095
|
+
icon: /* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.DropdownRightFill18Icon, null),
|
2080
2096
|
onClick: handleForwardClick,
|
2081
2097
|
isDisabled,
|
2082
2098
|
style: isDisabled ? { backgroundColor: "transparent" } : {}
|
@@ -2162,7 +2178,7 @@ var init_AttachedInputs = __esm({
|
|
2162
2178
|
}
|
2163
2179
|
};
|
2164
2180
|
const direction2 = flexDirection === "row" ? "horizontal" : "vertical";
|
2165
|
-
return /* @__PURE__ */
|
2181
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
2166
2182
|
react.Flex,
|
2167
2183
|
{
|
2168
2184
|
role: "group",
|
@@ -2179,16 +2195,16 @@ var Dialog;
|
|
2179
2195
|
var init_Dialog = __esm({
|
2180
2196
|
"src/input/Dialog.tsx"() {
|
2181
2197
|
Dialog = ({ title, children, ...props }) => {
|
2182
|
-
const ref =
|
2198
|
+
const ref = React71.useRef(null);
|
2183
2199
|
const { dialogProps, titleProps } = reactAria.useDialog(props, ref);
|
2184
|
-
return /* @__PURE__ */
|
2200
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { ...dialogProps, ref, outline: "none" }, title && /* @__PURE__ */ React71__namespace.default.createElement(react.Heading, { as: "h3", ...titleProps }, title), children);
|
2185
2201
|
};
|
2186
2202
|
}
|
2187
2203
|
});
|
2188
2204
|
var Popover3;
|
2189
2205
|
var init_Popover = __esm({
|
2190
2206
|
"src/input/Popover.tsx"() {
|
2191
|
-
Popover3 =
|
2207
|
+
Popover3 = React71.forwardRef(
|
2192
2208
|
({
|
2193
2209
|
children,
|
2194
2210
|
state: state2,
|
@@ -2202,7 +2218,7 @@ var init_Popover = __esm({
|
|
2202
2218
|
containerPadding = 12
|
2203
2219
|
}, ref) => {
|
2204
2220
|
var _a6;
|
2205
|
-
const internalRef =
|
2221
|
+
const internalRef = React71.useRef(null);
|
2206
2222
|
const popoverRef = ref ?? internalRef;
|
2207
2223
|
const { popoverProps, underlayProps } = reactAria.usePopover(
|
2208
2224
|
{
|
@@ -2217,28 +2233,28 @@ var init_Popover = __esm({
|
|
2217
2233
|
},
|
2218
2234
|
state2
|
2219
2235
|
);
|
2220
|
-
const popoverBox = /* @__PURE__ */
|
2236
|
+
const popoverBox = /* @__PURE__ */ React71__namespace.default.createElement(
|
2221
2237
|
react.Box,
|
2222
2238
|
{
|
2223
2239
|
...popoverProps,
|
2224
2240
|
ref: popoverRef,
|
2225
2241
|
minWidth: ((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? "auto"
|
2226
2242
|
},
|
2227
|
-
/* @__PURE__ */
|
2243
|
+
/* @__PURE__ */ React71__namespace.default.createElement(reactAria.DismissButton, { onDismiss: state2.close }),
|
2228
2244
|
children,
|
2229
|
-
/* @__PURE__ */
|
2245
|
+
/* @__PURE__ */ React71__namespace.default.createElement(reactAria.DismissButton, { onDismiss: state2.close })
|
2230
2246
|
);
|
2231
2247
|
if (isNonModal) {
|
2232
2248
|
return popoverBox;
|
2233
2249
|
}
|
2234
|
-
return /* @__PURE__ */
|
2250
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(reactAria.Overlay, null, hasBackdrop && /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { ...underlayProps, position: "fixed", inset: "0" }), popoverBox);
|
2235
2251
|
}
|
2236
2252
|
);
|
2237
2253
|
}
|
2238
2254
|
});
|
2239
2255
|
function useForceRerender(shouldRerender) {
|
2240
|
-
const [_, update] =
|
2241
|
-
|
2256
|
+
const [_, update] = React71.useState(false);
|
2257
|
+
React71.useEffect(() => {
|
2242
2258
|
if (shouldRerender) {
|
2243
2259
|
update((x) => !x);
|
2244
2260
|
}
|
@@ -2267,7 +2283,7 @@ var init_CardSelect = __esm({
|
|
2267
2283
|
...props
|
2268
2284
|
}, externalRef) => {
|
2269
2285
|
const label = "label" in props ? props.label : props["aria-label"];
|
2270
|
-
const internalRef =
|
2286
|
+
const internalRef = React71.useRef(null);
|
2271
2287
|
const triggerRef = externalRef ?? internalRef;
|
2272
2288
|
const state2 = reactStately.useOverlayTriggerState({
|
2273
2289
|
isOpen: externalIsOpen,
|
@@ -2286,7 +2302,7 @@ var init_CardSelect = __esm({
|
|
2286
2302
|
});
|
2287
2303
|
useForceRerender(state2.isOpen);
|
2288
2304
|
const ChevronIcon = size2 === "sm" ? sporIconReact.DropdownDownFill18Icon : sporIconReact.DropdownDownFill24Icon;
|
2289
|
-
return /* @__PURE__ */
|
2305
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { ...props }, /* @__PURE__ */ React71__namespace.default.createElement(
|
2290
2306
|
react.chakra.button,
|
2291
2307
|
{
|
2292
2308
|
type: "button",
|
@@ -2298,13 +2314,13 @@ var init_CardSelect = __esm({
|
|
2298
2314
|
width,
|
2299
2315
|
"data-attachable": true
|
2300
2316
|
},
|
2301
|
-
/* @__PURE__ */
|
2317
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { as: "span", display: props["aria-label"] ? "none" : "inline" }, label), withChevron ? /* @__PURE__ */ React71__namespace.default.createElement(
|
2302
2318
|
ChevronIcon,
|
2303
2319
|
{
|
2304
2320
|
transform: state2.isOpen ? "rotate(180deg)" : "none"
|
2305
2321
|
}
|
2306
2322
|
) : null)
|
2307
|
-
), state2.isOpen && /* @__PURE__ */
|
2323
|
+
), state2.isOpen && /* @__PURE__ */ React71__namespace.default.createElement(
|
2308
2324
|
Popover3,
|
2309
2325
|
{
|
2310
2326
|
state: state2,
|
@@ -2313,7 +2329,7 @@ var init_CardSelect = __esm({
|
|
2313
2329
|
crossOffset,
|
2314
2330
|
placement
|
2315
2331
|
},
|
2316
|
-
/* @__PURE__ */
|
2332
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
2317
2333
|
exports.Card,
|
2318
2334
|
{
|
2319
2335
|
colorScheme: "white",
|
@@ -2321,7 +2337,7 @@ var init_CardSelect = __esm({
|
|
2321
2337
|
sx: styles3.card,
|
2322
2338
|
...overlayProps
|
2323
2339
|
},
|
2324
|
-
/* @__PURE__ */
|
2340
|
+
/* @__PURE__ */ React71__namespace.default.createElement(Dialog, { "aria-label": label }, children)
|
2325
2341
|
)
|
2326
2342
|
));
|
2327
2343
|
}
|
@@ -2332,7 +2348,7 @@ exports.Checkbox = void 0;
|
|
2332
2348
|
var init_Checkbox = __esm({
|
2333
2349
|
"src/input/Checkbox.tsx"() {
|
2334
2350
|
exports.Checkbox = react.forwardRef((props, ref) => {
|
2335
|
-
return /* @__PURE__ */
|
2351
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Checkbox, { ...props, ref });
|
2336
2352
|
});
|
2337
2353
|
}
|
2338
2354
|
});
|
@@ -2344,7 +2360,7 @@ var init_CheckboxGroup = __esm({
|
|
2344
2360
|
children,
|
2345
2361
|
...props
|
2346
2362
|
}) => {
|
2347
|
-
return /* @__PURE__ */
|
2363
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.CheckboxGroup, { ...props }, /* @__PURE__ */ React71__namespace.default.createElement(react.Stack, { direction: direction2 }, children));
|
2348
2364
|
};
|
2349
2365
|
}
|
2350
2366
|
});
|
@@ -3125,16 +3141,16 @@ var init_ChoiceChip = __esm({
|
|
3125
3141
|
icon,
|
3126
3142
|
hasLabel: Boolean(children)
|
3127
3143
|
});
|
3128
|
-
const id = `choice-chip-${
|
3129
|
-
return /* @__PURE__ */
|
3144
|
+
const id = `choice-chip-${React71.useId()}`;
|
3145
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
3130
3146
|
react.chakra.label,
|
3131
3147
|
{
|
3132
3148
|
htmlFor: id,
|
3133
3149
|
...getRootProps(),
|
3134
3150
|
"aria-label": String(children)
|
3135
3151
|
},
|
3136
|
-
/* @__PURE__ */
|
3137
|
-
/* @__PURE__ */
|
3152
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.chakra.input, { ...getInputProps({}, ref), id, disabled: isDisabled }),
|
3153
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
3138
3154
|
react.chakra.div,
|
3139
3155
|
{
|
3140
3156
|
...getLabelProps(),
|
@@ -3145,9 +3161,9 @@ var init_ChoiceChip = __esm({
|
|
3145
3161
|
"data-active": dataAttr(state2.isActive),
|
3146
3162
|
"data-disabled": dataAttr(state2.isDisabled)
|
3147
3163
|
},
|
3148
|
-
icon && /* @__PURE__ */
|
3149
|
-
/* @__PURE__ */
|
3150
|
-
chipType === "filter" && state2.isChecked && /* @__PURE__ */
|
3164
|
+
icon && /* @__PURE__ */ React71__namespace.default.createElement(react.chakra.span, { __css: styles3.icon }, state2.isChecked ? icon.checked : icon.default),
|
3165
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.chakra.span, { __css: styles3.label, ...getCheckboxProps() }, chipType !== "icon" && children),
|
3166
|
+
chipType === "filter" && state2.isChecked && /* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.CloseOutline24Icon, { marginLeft: 1.5 })
|
3151
3167
|
)
|
3152
3168
|
);
|
3153
3169
|
});
|
@@ -3180,10 +3196,10 @@ function Combobox({
|
|
3180
3196
|
...rest
|
3181
3197
|
}) {
|
3182
3198
|
const { contains: contains2 } = reactAria.useFilter({ sensitivity: "base" });
|
3183
|
-
const fallbackInputRef =
|
3199
|
+
const fallbackInputRef = React71.useRef(null);
|
3184
3200
|
const inputRef = externalInputRef ?? fallbackInputRef;
|
3185
|
-
const listBoxRef =
|
3186
|
-
const popoverRef =
|
3201
|
+
const listBoxRef = React71.useRef(null);
|
3202
|
+
const popoverRef = React71.useRef(null);
|
3187
3203
|
const inputWidth = useInputWidth(inputRef);
|
3188
3204
|
const state2 = reactStately.useComboBoxState({
|
3189
3205
|
allowsEmptyCollection: Boolean(emptyContent),
|
@@ -3221,7 +3237,7 @@ function Combobox({
|
|
3221
3237
|
},
|
3222
3238
|
state2
|
3223
3239
|
);
|
3224
|
-
return /* @__PURE__ */
|
3240
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(React71__namespace.default.Fragment, null, /* @__PURE__ */ React71__namespace.default.createElement(
|
3225
3241
|
exports.Input,
|
3226
3242
|
{
|
3227
3243
|
...styleProps(comboBoxProps),
|
@@ -3231,7 +3247,7 @@ function Combobox({
|
|
3231
3247
|
borderBottomLeftRadius: state2.isOpen && !isLoading ? 0 : borderBottomLeftRadius,
|
3232
3248
|
borderBottomRightRadius: state2.isOpen && !isLoading ? 0 : borderBottomRightRadius,
|
3233
3249
|
...inputProps,
|
3234
|
-
rightIcon: isLoading ? /* @__PURE__ */
|
3250
|
+
rightIcon: isLoading ? /* @__PURE__ */ React71__namespace.default.createElement(
|
3235
3251
|
exports.ColorSpinner,
|
3236
3252
|
{
|
3237
3253
|
width: "1.5rem",
|
@@ -3246,7 +3262,7 @@ function Combobox({
|
|
3246
3262
|
}
|
3247
3263
|
) : rightIcon
|
3248
3264
|
}
|
3249
|
-
), state2.isOpen && !isLoading && /* @__PURE__ */
|
3265
|
+
), state2.isOpen && !isLoading && /* @__PURE__ */ React71__namespace.default.createElement(
|
3250
3266
|
Popover3,
|
3251
3267
|
{
|
3252
3268
|
state: state2,
|
@@ -3258,7 +3274,7 @@ function Combobox({
|
|
3258
3274
|
hasBackdrop: false,
|
3259
3275
|
containerPadding: 0
|
3260
3276
|
},
|
3261
|
-
/* @__PURE__ */
|
3277
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
3262
3278
|
ListBox,
|
3263
3279
|
{
|
3264
3280
|
...listBoxProps,
|
@@ -3282,8 +3298,8 @@ var init_Combobox = __esm({
|
|
3282
3298
|
init_src();
|
3283
3299
|
init_Popover();
|
3284
3300
|
useInputWidth = (inputRef) => {
|
3285
|
-
const [inputWidth, setInputWidth] =
|
3286
|
-
|
3301
|
+
const [inputWidth, setInputWidth] = React71.useState("auto");
|
3302
|
+
React71.useEffect(() => {
|
3287
3303
|
const onResize = debounce(() => {
|
3288
3304
|
if (inputRef.current) {
|
3289
3305
|
setInputWidth(`${inputRef.current.offsetWidth}px`);
|
@@ -3310,7 +3326,7 @@ exports.FormControl = void 0;
|
|
3310
3326
|
var init_FormControl = __esm({
|
3311
3327
|
"src/input/FormControl.tsx"() {
|
3312
3328
|
exports.FormControl = react.forwardRef((props, ref) => {
|
3313
|
-
return /* @__PURE__ */
|
3329
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.FormControl, { ...props, ref });
|
3314
3330
|
});
|
3315
3331
|
}
|
3316
3332
|
});
|
@@ -3331,7 +3347,7 @@ var init_FormErrorMessage = __esm({
|
|
3331
3347
|
return null;
|
3332
3348
|
}
|
3333
3349
|
const { ref, ...errorMessageProps } = formControlContext.getErrorMessageProps();
|
3334
|
-
return /* @__PURE__ */
|
3350
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { position: "relative", ref }, /* @__PURE__ */ React71__namespace.default.createElement(
|
3335
3351
|
react.Box,
|
3336
3352
|
{
|
3337
3353
|
borderRadius: "xs",
|
@@ -3349,12 +3365,12 @@ var init_FormErrorMessage = __esm({
|
|
3349
3365
|
...errorMessageProps,
|
3350
3366
|
...boxProps
|
3351
3367
|
},
|
3352
|
-
/* @__PURE__ */
|
3368
|
+
/* @__PURE__ */ React71__namespace.default.createElement(Arrow, { position: "absolute", top: "-0.25em", left: "1em" }),
|
3353
3369
|
children
|
3354
3370
|
));
|
3355
3371
|
};
|
3356
3372
|
Arrow = (props) => {
|
3357
|
-
return /* @__PURE__ */
|
3373
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
3358
3374
|
react.Box,
|
3359
3375
|
{
|
3360
3376
|
...props,
|
@@ -3365,7 +3381,7 @@ var init_FormErrorMessage = __esm({
|
|
3365
3381
|
fill: "none",
|
3366
3382
|
transform: "rotate(45deg)"
|
3367
3383
|
},
|
3368
|
-
/* @__PURE__ */
|
3384
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
3369
3385
|
react.Box,
|
3370
3386
|
{
|
3371
3387
|
as: "path",
|
@@ -3381,7 +3397,7 @@ exports.FormLabel = void 0;
|
|
3381
3397
|
var init_FormLabel = __esm({
|
3382
3398
|
"src/input/FormLabel.tsx"() {
|
3383
3399
|
exports.FormLabel = react.forwardRef((props, ref) => {
|
3384
|
-
return /* @__PURE__ */
|
3400
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.FormLabel, { ...props, ref });
|
3385
3401
|
});
|
3386
3402
|
}
|
3387
3403
|
});
|
@@ -3394,7 +3410,7 @@ function ListBox({
|
|
3394
3410
|
}) {
|
3395
3411
|
const { listBoxProps } = reactAria.useListBox(props, state2, listBoxRef);
|
3396
3412
|
const styles3 = react.useMultiStyleConfig("ListBox", {});
|
3397
|
-
return /* @__PURE__ */
|
3413
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
3398
3414
|
react.List,
|
3399
3415
|
{
|
3400
3416
|
...listBoxProps,
|
@@ -3405,22 +3421,22 @@ function ListBox({
|
|
3405
3421
|
},
|
3406
3422
|
state2.collection.size === 0 && props.emptyContent,
|
3407
3423
|
Array.from(state2.collection).map(
|
3408
|
-
(item) => item.type === "section" ? /* @__PURE__ */
|
3424
|
+
(item) => item.type === "section" ? /* @__PURE__ */ React71__namespace.default.createElement(ListBoxSection, { key: item.key, section: item, state: state2 }) : /* @__PURE__ */ React71__namespace.default.createElement(Option, { key: item.key, item, state: state2 })
|
3409
3425
|
)
|
3410
3426
|
);
|
3411
3427
|
}
|
3412
3428
|
function ItemLabel({ children }) {
|
3413
3429
|
let { labelProps } = useOptionContext();
|
3414
3430
|
const styles3 = react.useMultiStyleConfig("ListBox", {});
|
3415
|
-
return /* @__PURE__ */
|
3431
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { ...labelProps, sx: styles3.label }, children);
|
3416
3432
|
}
|
3417
3433
|
function ItemDescription({ children }) {
|
3418
3434
|
let { descriptionProps } = useOptionContext();
|
3419
3435
|
const styles3 = react.useMultiStyleConfig("ListBox", {});
|
3420
|
-
return /* @__PURE__ */
|
3436
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { ...descriptionProps, sx: styles3.description }, children);
|
3421
3437
|
}
|
3422
3438
|
function Option({ item, state: state2 }) {
|
3423
|
-
const ref =
|
3439
|
+
const ref = React71.useRef(null);
|
3424
3440
|
const {
|
3425
3441
|
optionProps,
|
3426
3442
|
isSelected,
|
@@ -3440,7 +3456,7 @@ function Option({ item, state: state2 }) {
|
|
3440
3456
|
if (isFocused) {
|
3441
3457
|
dataFields["data-focus"] = true;
|
3442
3458
|
}
|
3443
|
-
|
3459
|
+
React71.useEffect(() => {
|
3444
3460
|
var _a6;
|
3445
3461
|
(_a6 = ref == null ? void 0 : ref.current) == null ? void 0 : _a6.addEventListener(
|
3446
3462
|
"touchend",
|
@@ -3450,7 +3466,7 @@ function Option({ item, state: state2 }) {
|
|
3450
3466
|
{ passive: false, once: true }
|
3451
3467
|
);
|
3452
3468
|
}, []);
|
3453
|
-
return /* @__PURE__ */
|
3469
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(OptionContext.Provider, { value: { labelProps, descriptionProps } }, /* @__PURE__ */ React71__namespace.default.createElement(react.ListItem, { ...optionProps, ...dataFields, ref, sx: styles3.item }, item.rendered));
|
3454
3470
|
}
|
3455
3471
|
function ListBoxSection({ section, state: state2 }) {
|
3456
3472
|
const { itemProps, headingProps, groupProps } = reactAria.useListBoxSection({
|
@@ -3459,7 +3475,7 @@ function ListBoxSection({ section, state: state2 }) {
|
|
3459
3475
|
});
|
3460
3476
|
const isFirstSection = section.key === state2.collection.getFirstKey();
|
3461
3477
|
const titleColor = react.useColorModeValue("darkGrey", "white");
|
3462
|
-
return /* @__PURE__ */
|
3478
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.ListItem, { ...itemProps }, section.rendered && /* @__PURE__ */ React71__namespace.default.createElement(
|
3463
3479
|
react.Box,
|
3464
3480
|
{
|
3465
3481
|
fontSize: "mobile.xs",
|
@@ -3472,19 +3488,19 @@ function ListBoxSection({ section, state: state2 }) {
|
|
3472
3488
|
...headingProps
|
3473
3489
|
},
|
3474
3490
|
section.rendered
|
3475
|
-
), /* @__PURE__ */
|
3476
|
-
(item) => /* @__PURE__ */
|
3491
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(react.List, { ...groupProps, padding: 0, listStyleType: "none" }, Array.from(state2.collection.getChildren(section.key)).map(
|
3492
|
+
(item) => /* @__PURE__ */ React71__namespace.default.createElement(Option, { key: item.key, item, state: state2 })
|
3477
3493
|
)));
|
3478
3494
|
}
|
3479
3495
|
var OptionContext, useOptionContext;
|
3480
3496
|
var init_ListBox = __esm({
|
3481
3497
|
"src/input/ListBox.tsx"() {
|
3482
|
-
OptionContext =
|
3498
|
+
OptionContext = React71__namespace.default.createContext({
|
3483
3499
|
labelProps: {},
|
3484
3500
|
descriptionProps: {}
|
3485
3501
|
});
|
3486
3502
|
useOptionContext = () => {
|
3487
|
-
return
|
3503
|
+
return React71.useContext(OptionContext);
|
3488
3504
|
};
|
3489
3505
|
}
|
3490
3506
|
});
|
@@ -3506,8 +3522,8 @@ function InfoSelect({
|
|
3506
3522
|
...props
|
3507
3523
|
};
|
3508
3524
|
const state2 = reactStately.useSelectState(renamedProps);
|
3509
|
-
const triggerRef =
|
3510
|
-
const listboxRef =
|
3525
|
+
const triggerRef = React71.useRef(null);
|
3526
|
+
const listboxRef = React71.useRef(null);
|
3511
3527
|
const { labelProps, triggerProps, valueProps, menuProps } = reactAria.useSelect(
|
3512
3528
|
renamedProps,
|
3513
3529
|
state2,
|
@@ -3523,7 +3539,7 @@ function InfoSelect({
|
|
3523
3539
|
const { buttonProps } = reactAria.useButton(triggerProps, triggerRef);
|
3524
3540
|
const { t: t2 } = useTranslation();
|
3525
3541
|
const formControl = react.useFormControlProps(props);
|
3526
|
-
return /* @__PURE__ */
|
3542
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { sx: styles3.container }, /* @__PURE__ */ React71__namespace.default.createElement(react.chakra.div, { ...labelProps, sx: styles3.label }, props.label), /* @__PURE__ */ React71__namespace.default.createElement(
|
3527
3543
|
reactAria.HiddenSelect,
|
3528
3544
|
{
|
3529
3545
|
state: state2,
|
@@ -3531,7 +3547,7 @@ function InfoSelect({
|
|
3531
3547
|
label: props.label,
|
3532
3548
|
name: props.name
|
3533
3549
|
}
|
3534
|
-
), /* @__PURE__ */
|
3550
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(
|
3535
3551
|
react.chakra.button,
|
3536
3552
|
{
|
3537
3553
|
type: "button",
|
@@ -3544,16 +3560,16 @@ function InfoSelect({
|
|
3544
3560
|
"aria-invalid": formControl.isInvalid,
|
3545
3561
|
"aria-describedby": formControl["aria-describedby"]
|
3546
3562
|
},
|
3547
|
-
/* @__PURE__ */
|
3548
|
-
/* @__PURE__ */
|
3549
|
-
), state2.isOpen && /* @__PURE__ */
|
3563
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts11.selectAnOption)),
|
3564
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.Box, { sx: styles3.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.DropdownUpFill24Icon, null) : /* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.DropdownDownFill24Icon, null))
|
3565
|
+
), state2.isOpen && /* @__PURE__ */ React71__namespace.default.createElement(
|
3550
3566
|
Popover3,
|
3551
3567
|
{
|
3552
3568
|
state: state2,
|
3553
3569
|
triggerRef,
|
3554
3570
|
containerPadding: 0
|
3555
3571
|
},
|
3556
|
-
/* @__PURE__ */
|
3572
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
3557
3573
|
ListBox,
|
3558
3574
|
{
|
3559
3575
|
...menuProps,
|
@@ -3587,9 +3603,9 @@ var init_Input = __esm({
|
|
3587
3603
|
exports.Input = react.forwardRef(
|
3588
3604
|
({ label, leftIcon, rightIcon, id, size: size2, ...props }, ref) => {
|
3589
3605
|
const formControlProps = react.useFormControlContext();
|
3590
|
-
const fallbackId = `input-${
|
3606
|
+
const fallbackId = `input-${React71.useId()}`;
|
3591
3607
|
const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
|
3592
|
-
return /* @__PURE__ */
|
3608
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React71__namespace.default.createElement(react.InputLeftElement, { pointerEvents: "none" }, leftIcon), /* @__PURE__ */ React71__namespace.default.createElement(
|
3593
3609
|
react.Input,
|
3594
3610
|
{
|
3595
3611
|
"data-attachable": true,
|
@@ -3600,7 +3616,7 @@ var init_Input = __esm({
|
|
3600
3616
|
ref,
|
3601
3617
|
placeholder: " "
|
3602
3618
|
}
|
3603
|
-
), /* @__PURE__ */
|
3619
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(react.FormLabel, { htmlFor: inputId }, label), rightIcon && /* @__PURE__ */ React71__namespace.default.createElement(react.InputRightElement, { pointerEvents: "none" }, rightIcon));
|
3604
3620
|
}
|
3605
3621
|
);
|
3606
3622
|
}
|
@@ -3609,10 +3625,10 @@ exports.InputLeftElement = void 0; exports.InputRightElement = void 0;
|
|
3609
3625
|
var init_InputElement = __esm({
|
3610
3626
|
"src/input/InputElement.tsx"() {
|
3611
3627
|
exports.InputLeftElement = react.forwardRef(
|
3612
|
-
(props, ref) => /* @__PURE__ */
|
3628
|
+
(props, ref) => /* @__PURE__ */ React71__namespace.default.createElement(react.InputLeftElement, { ...props, ref })
|
3613
3629
|
);
|
3614
3630
|
exports.InputRightElement = react.forwardRef(
|
3615
|
-
(props, ref) => /* @__PURE__ */
|
3631
|
+
(props, ref) => /* @__PURE__ */ React71__namespace.default.createElement(react.InputRightElement, { ...props, ref })
|
3616
3632
|
);
|
3617
3633
|
}
|
3618
3634
|
});
|
@@ -3623,7 +3639,7 @@ var init_NativeSelect = __esm({
|
|
3623
3639
|
exports.NativeSelect = react.forwardRef(
|
3624
3640
|
({ label, ...props }, ref) => {
|
3625
3641
|
const styles3 = react.useMultiStyleConfig("Select", props);
|
3626
|
-
return /* @__PURE__ */
|
3642
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(exports.FormControl, null, /* @__PURE__ */ React71__namespace.default.createElement(
|
3627
3643
|
react.Select,
|
3628
3644
|
{
|
3629
3645
|
"data-attachable": true,
|
@@ -3631,7 +3647,7 @@ var init_NativeSelect = __esm({
|
|
3631
3647
|
rootProps: { __css: styles3.root },
|
3632
3648
|
ref
|
3633
3649
|
}
|
3634
|
-
), label && /* @__PURE__ */
|
3650
|
+
), label && /* @__PURE__ */ React71__namespace.default.createElement(exports.FormLabel, null, label));
|
3635
3651
|
}
|
3636
3652
|
);
|
3637
3653
|
}
|
@@ -3659,17 +3675,17 @@ function NumericStepper({
|
|
3659
3675
|
});
|
3660
3676
|
const formControlProps = react.useFormControl({ id: idProp, isDisabled });
|
3661
3677
|
const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
|
3662
|
-
return /* @__PURE__ */
|
3678
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Flex, { __css: styles3.container, ...boxProps }, /* @__PURE__ */ React71__namespace.default.createElement(
|
3663
3679
|
VerySmallButton,
|
3664
3680
|
{
|
3665
|
-
icon: /* @__PURE__ */
|
3681
|
+
icon: /* @__PURE__ */ React71__namespace.default.createElement(SubtractIcon, { stepLabel: clampedStepSize }),
|
3666
3682
|
"aria-label": t2(texts12.decrementButtonAriaLabel(clampedStepSize)),
|
3667
3683
|
onClick: () => onChange(Math.max(value - clampedStepSize, minValue)),
|
3668
3684
|
visibility: value <= minValue ? "hidden" : "visible",
|
3669
3685
|
isDisabled: formControlProps.disabled,
|
3670
3686
|
id: value <= minValue ? void 0 : formControlProps.id
|
3671
3687
|
}
|
3672
|
-
), withInput ? /* @__PURE__ */
|
3688
|
+
), withInput ? /* @__PURE__ */ React71__namespace.default.createElement(
|
3673
3689
|
react.chakra.input,
|
3674
3690
|
{
|
3675
3691
|
type: "number",
|
@@ -3692,7 +3708,7 @@ function NumericStepper({
|
|
3692
3708
|
onChange(Math.max(Math.min(numericInput, maxValue), minValue));
|
3693
3709
|
}
|
3694
3710
|
}
|
3695
|
-
) : /* @__PURE__ */
|
3711
|
+
) : /* @__PURE__ */ React71__namespace.default.createElement(
|
3696
3712
|
react.chakra.text,
|
3697
3713
|
{
|
3698
3714
|
sx: styles3.text,
|
@@ -3700,10 +3716,10 @@ function NumericStepper({
|
|
3700
3716
|
"aria-label": value.toString()
|
3701
3717
|
},
|
3702
3718
|
value
|
3703
|
-
), /* @__PURE__ */
|
3719
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(
|
3704
3720
|
VerySmallButton,
|
3705
3721
|
{
|
3706
|
-
icon: /* @__PURE__ */
|
3722
|
+
icon: /* @__PURE__ */ React71__namespace.default.createElement(AddIcon, { stepLabel: clampedStepSize }),
|
3707
3723
|
"aria-label": t2(texts12.incrementButtonAriaLabel(clampedStepSize)),
|
3708
3724
|
onClick: () => onChange(Math.min(value + clampedStepSize, maxValue)),
|
3709
3725
|
visibility: value >= maxValue ? "hidden" : "visible",
|
@@ -3718,9 +3734,9 @@ var init_NumericStepper = __esm({
|
|
3718
3734
|
init_src();
|
3719
3735
|
VerySmallButton = (props) => {
|
3720
3736
|
const styles3 = react.useMultiStyleConfig("NumericStepper", {});
|
3721
|
-
return /* @__PURE__ */
|
3737
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(exports.IconButton, { variant: "primary", size: "xs", sx: styles3.button, ...props });
|
3722
3738
|
};
|
3723
|
-
SubtractIcon = (props) => /* @__PURE__ */
|
3739
|
+
SubtractIcon = (props) => /* @__PURE__ */ React71__namespace.default.createElement(React71__namespace.default.Fragment, null, /* @__PURE__ */ React71__namespace.default.createElement(
|
3724
3740
|
react.Box,
|
3725
3741
|
{
|
3726
3742
|
as: "svg",
|
@@ -3730,7 +3746,7 @@ var init_NumericStepper = __esm({
|
|
3730
3746
|
stroke: "currentColor",
|
3731
3747
|
...props
|
3732
3748
|
},
|
3733
|
-
/* @__PURE__ */
|
3749
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
3734
3750
|
"line",
|
3735
3751
|
{
|
3736
3752
|
x1: "9",
|
@@ -3741,8 +3757,8 @@ var init_NumericStepper = __esm({
|
|
3741
3757
|
strokeLinecap: "round"
|
3742
3758
|
}
|
3743
3759
|
)
|
3744
|
-
), props.stepLabel > 1 && /* @__PURE__ */
|
3745
|
-
AddIcon = (props) => /* @__PURE__ */
|
3760
|
+
), props.stepLabel > 1 && /* @__PURE__ */ React71__namespace.default.createElement(react.chakra.span, { paddingRight: "1" }, props.stepLabel.toString()));
|
3761
|
+
AddIcon = (props) => /* @__PURE__ */ React71__namespace.default.createElement(React71__namespace.default.Fragment, null, /* @__PURE__ */ React71__namespace.default.createElement(
|
3746
3762
|
react.Box,
|
3747
3763
|
{
|
3748
3764
|
as: "svg",
|
@@ -3752,7 +3768,7 @@ var init_NumericStepper = __esm({
|
|
3752
3768
|
stroke: "currentColor",
|
3753
3769
|
...props
|
3754
3770
|
},
|
3755
|
-
/* @__PURE__ */
|
3771
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
3756
3772
|
"line",
|
3757
3773
|
{
|
3758
3774
|
x1: "9",
|
@@ -3763,7 +3779,7 @@ var init_NumericStepper = __esm({
|
|
3763
3779
|
strokeLinecap: "round"
|
3764
3780
|
}
|
3765
3781
|
),
|
3766
|
-
/* @__PURE__ */
|
3782
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
3767
3783
|
"line",
|
3768
3784
|
{
|
3769
3785
|
x1: "15",
|
@@ -3774,7 +3790,7 @@ var init_NumericStepper = __esm({
|
|
3774
3790
|
strokeLinecap: "round"
|
3775
3791
|
}
|
3776
3792
|
)
|
3777
|
-
), props.stepLabel > 1 && /* @__PURE__ */
|
3793
|
+
), props.stepLabel > 1 && /* @__PURE__ */ React71__namespace.default.createElement(react.chakra.span, { paddingRight: "1" }, props.stepLabel.toString()));
|
3778
3794
|
texts12 = createTexts({
|
3779
3795
|
decrementButtonAriaLabel(stepSize) {
|
3780
3796
|
return {
|
@@ -3805,9 +3821,9 @@ var init_PasswordInput = __esm({
|
|
3805
3821
|
const { isOpen: isShowingPassword, onToggle } = react.useDisclosure();
|
3806
3822
|
const { t: t2 } = useTranslation();
|
3807
3823
|
const formControlProps = react.useFormControlContext();
|
3808
|
-
const autoGeneratedId = `password-input-${
|
3824
|
+
const autoGeneratedId = `password-input-${React71.useId()}`;
|
3809
3825
|
const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? autoGeneratedId;
|
3810
|
-
return /* @__PURE__ */
|
3826
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React71__namespace.default.createElement(exports.InputLeftElement, null, leftIcon), /* @__PURE__ */ React71__namespace.default.createElement(
|
3811
3827
|
react.Input,
|
3812
3828
|
{
|
3813
3829
|
...props,
|
@@ -3819,7 +3835,7 @@ var init_PasswordInput = __esm({
|
|
3819
3835
|
ref,
|
3820
3836
|
"data-attachable": true
|
3821
3837
|
}
|
3822
|
-
), /* @__PURE__ */
|
3838
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(exports.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label), /* @__PURE__ */ React71__namespace.default.createElement(exports.InputRightElement, { width: "fit-content" }, /* @__PURE__ */ React71__namespace.default.createElement(
|
3823
3839
|
react.Button,
|
3824
3840
|
{
|
3825
3841
|
variant: "ghost",
|
@@ -3876,7 +3892,7 @@ var init_CountryCodeSelect = __esm({
|
|
3876
3892
|
callingCodes = [...prioritizedCountryCodes, ...sortedCallingCodes];
|
3877
3893
|
CountryCodeSelect = (props) => {
|
3878
3894
|
const { t: t2 } = useTranslation();
|
3879
|
-
return /* @__PURE__ */
|
3895
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
3880
3896
|
InfoSelect,
|
3881
3897
|
{
|
3882
3898
|
label: t2(texts14.countryCode),
|
@@ -3884,7 +3900,7 @@ var init_CountryCodeSelect = __esm({
|
|
3884
3900
|
items: callingCodes,
|
3885
3901
|
...props
|
3886
3902
|
},
|
3887
|
-
(item) => /* @__PURE__ */
|
3903
|
+
(item) => /* @__PURE__ */ React71__namespace.default.createElement(reactStately.Item, { key: item.key }, item.key)
|
3888
3904
|
);
|
3889
3905
|
};
|
3890
3906
|
CountryCodeSelect_default = CountryCodeSelect;
|
@@ -3921,10 +3937,10 @@ var init_PhoneNumberInput = __esm({
|
|
3921
3937
|
nationalNumber: ""
|
3922
3938
|
}
|
3923
3939
|
});
|
3924
|
-
return /* @__PURE__ */
|
3925
|
-
|
3940
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(exports.AttachedInputs, { ...boxProps }, /* @__PURE__ */ React71__namespace.default.createElement(
|
3941
|
+
React71.Suspense,
|
3926
3942
|
{
|
3927
|
-
fallback: /* @__PURE__ */
|
3943
|
+
fallback: /* @__PURE__ */ React71__namespace.default.createElement(
|
3928
3944
|
InfoSelect,
|
3929
3945
|
{
|
3930
3946
|
isLabelSrOnly: true,
|
@@ -3933,10 +3949,10 @@ var init_PhoneNumberInput = __esm({
|
|
3933
3949
|
height: "100%",
|
3934
3950
|
value: "+47"
|
3935
3951
|
},
|
3936
|
-
/* @__PURE__ */
|
3952
|
+
/* @__PURE__ */ React71__namespace.default.createElement(reactStately.Item, { key: "+47" }, "+47")
|
3937
3953
|
)
|
3938
3954
|
},
|
3939
|
-
/* @__PURE__ */
|
3955
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
3940
3956
|
LazyCountryCodeSelect,
|
3941
3957
|
{
|
3942
3958
|
value: value.countryCode,
|
@@ -3949,7 +3965,7 @@ var init_PhoneNumberInput = __esm({
|
|
3949
3965
|
width: "6.25rem"
|
3950
3966
|
}
|
3951
3967
|
)
|
3952
|
-
), /* @__PURE__ */
|
3968
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(
|
3953
3969
|
exports.Input,
|
3954
3970
|
{
|
3955
3971
|
ref,
|
@@ -3978,14 +3994,14 @@ var init_PhoneNumberInput = __esm({
|
|
3978
3994
|
sv: "Telefonnummer"
|
3979
3995
|
}
|
3980
3996
|
});
|
3981
|
-
LazyCountryCodeSelect =
|
3997
|
+
LazyCountryCodeSelect = React71__namespace.default.lazy(() => Promise.resolve().then(() => (init_CountryCodeSelect(), CountryCodeSelect_exports)));
|
3982
3998
|
}
|
3983
3999
|
});
|
3984
4000
|
exports.Radio = void 0;
|
3985
4001
|
var init_Radio = __esm({
|
3986
4002
|
"src/input/Radio.tsx"() {
|
3987
4003
|
exports.Radio = react.forwardRef((props, ref) => {
|
3988
|
-
return /* @__PURE__ */
|
4004
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Radio, { ...props, ref });
|
3989
4005
|
});
|
3990
4006
|
}
|
3991
4007
|
});
|
@@ -3994,7 +4010,7 @@ var init_RadioGroup = __esm({
|
|
3994
4010
|
"src/input/RadioGroup.tsx"() {
|
3995
4011
|
exports.RadioGroup = react.forwardRef(
|
3996
4012
|
({ children, direction: direction2 = "row", ...rest }, ref) => {
|
3997
|
-
return /* @__PURE__ */
|
4013
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.RadioGroup, { ...rest, ref }, /* @__PURE__ */ React71__namespace.default.createElement(react.Stack, { direction: direction2 }, children));
|
3998
4014
|
}
|
3999
4015
|
);
|
4000
4016
|
}
|
@@ -4009,9 +4025,9 @@ var init_SearchInput = __esm({
|
|
4009
4025
|
const { t: t2 } = useTranslation();
|
4010
4026
|
const showClearButton = onReset && Boolean(props.value);
|
4011
4027
|
const formControlProps = react.useFormControlContext();
|
4012
|
-
const autoGeneratedId =
|
4028
|
+
const autoGeneratedId = React71.useId();
|
4013
4029
|
const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? autoGeneratedId;
|
4014
|
-
return /* @__PURE__ */
|
4030
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.InputGroup, { position: "relative" }, /* @__PURE__ */ React71__namespace.default.createElement(exports.InputLeftElement, null, /* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.SearchOutline24Icon, null)), /* @__PURE__ */ React71__namespace.default.createElement(
|
4015
4031
|
react.Input,
|
4016
4032
|
{
|
4017
4033
|
paddingLeft: 7,
|
@@ -4028,7 +4044,7 @@ var init_SearchInput = __esm({
|
|
4028
4044
|
placeholder: " ",
|
4029
4045
|
"data-attachable": true
|
4030
4046
|
}
|
4031
|
-
), /* @__PURE__ */
|
4047
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(exports.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label ?? t2(texts16.label)), showClearButton && /* @__PURE__ */ React71__namespace.default.createElement(exports.InputRightElement, { width: "fit-content" }, /* @__PURE__ */ React71__namespace.default.createElement(
|
4032
4048
|
react.IconButton,
|
4033
4049
|
{
|
4034
4050
|
variant: "ghost",
|
@@ -4036,7 +4052,7 @@ var init_SearchInput = __esm({
|
|
4036
4052
|
size: "sm",
|
4037
4053
|
marginRight: 1,
|
4038
4054
|
"aria-label": t2(texts16.reset),
|
4039
|
-
icon: /* @__PURE__ */
|
4055
|
+
icon: /* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.CloseOutline24Icon, null),
|
4040
4056
|
onClick: onReset
|
4041
4057
|
}
|
4042
4058
|
)));
|
@@ -4063,7 +4079,7 @@ var init_Switch = __esm({
|
|
4063
4079
|
"src/input/Switch.tsx"() {
|
4064
4080
|
exports.Switch = react.forwardRef(
|
4065
4081
|
({ size: size2 = "md", ...props }, ref) => {
|
4066
|
-
return /* @__PURE__ */
|
4082
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Switch, { size: size2, ...props, ref });
|
4067
4083
|
}
|
4068
4084
|
);
|
4069
4085
|
}
|
@@ -4135,9 +4151,9 @@ var init_Textarea = __esm({
|
|
4135
4151
|
remainingProps: { label, ...rest }
|
4136
4152
|
} = getSpacingProps(props);
|
4137
4153
|
const formControlProps = react.useFormControlContext();
|
4138
|
-
const fallbackId = `textarea-${
|
4154
|
+
const fallbackId = `textarea-${React71.useId()}`;
|
4139
4155
|
const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
|
4140
|
-
return /* @__PURE__ */
|
4156
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.InputGroup, { position: "relative", ...spacingProps }, /* @__PURE__ */ React71__namespace.default.createElement(react.Textarea, { ...rest, id: inputId, ref, placeholder: " " }), label && /* @__PURE__ */ React71__namespace.default.createElement(react.FormLabel, { htmlFor: inputId, id: `${inputId}-label` }, label));
|
4141
4157
|
});
|
4142
4158
|
}
|
4143
4159
|
});
|
@@ -4236,7 +4252,7 @@ var init_LineIcon = __esm({
|
|
4236
4252
|
if (!Icon) {
|
4237
4253
|
return null;
|
4238
4254
|
}
|
4239
|
-
return /* @__PURE__ */
|
4255
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { sx: { ...styles3.iconContainer, ...sx }, ...rest }, /* @__PURE__ */ React71__namespace.default.createElement(Icon, { sx: styles3.icon }));
|
4240
4256
|
};
|
4241
4257
|
}
|
4242
4258
|
});
|
@@ -4256,7 +4272,7 @@ var init_InfoTag = __esm({
|
|
4256
4272
|
size: size2,
|
4257
4273
|
...customProps
|
4258
4274
|
});
|
4259
|
-
return /* @__PURE__ */
|
4275
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { sx: styles3.container }, /* @__PURE__ */ React71__namespace.default.createElement(
|
4260
4276
|
exports.LineIcon,
|
4261
4277
|
{
|
4262
4278
|
variant,
|
@@ -4264,7 +4280,7 @@ var init_InfoTag = __esm({
|
|
4264
4280
|
sx: styles3.iconContainer,
|
4265
4281
|
...customProps
|
4266
4282
|
}
|
4267
|
-
), /* @__PURE__ */
|
4283
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { sx: styles3.textContainer }, title && /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { as: "span", sx: styles3.title }, title), title && description && " ", description && /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { as: "span", sx: styles3.description }, description)));
|
4268
4284
|
};
|
4269
4285
|
}
|
4270
4286
|
});
|
@@ -4290,7 +4306,7 @@ var init_TravelTag = __esm({
|
|
4290
4306
|
backgroundColor: variant === "custom" ? rest.backgroundColor : void 0
|
4291
4307
|
});
|
4292
4308
|
const DeviationLevelIcon = getDeviationLevelIcon({ deviationLevel, size: size2 });
|
4293
|
-
return /* @__PURE__ */
|
4309
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { sx: styles3.container, "aria-disabled": isDisabled, ref, ...rest }, /* @__PURE__ */ React71__namespace.default.createElement(
|
4294
4310
|
exports.LineIcon,
|
4295
4311
|
{
|
4296
4312
|
variant,
|
@@ -4298,7 +4314,7 @@ var init_TravelTag = __esm({
|
|
4298
4314
|
sx: styles3.iconContainer,
|
4299
4315
|
...rest
|
4300
4316
|
}
|
4301
|
-
), /* @__PURE__ */
|
4317
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { sx: styles3.textContainer }, title && /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { as: "span", sx: styles3.title }, title), title && description && " ", description && /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { as: "span", sx: styles3.description }, description)), DeviationLevelIcon && /* @__PURE__ */ React71__namespace.default.createElement(DeviationLevelIcon, { sx: styles3.deviationIcon }));
|
4302
4318
|
}
|
4303
4319
|
);
|
4304
4320
|
getDeviationLevelIcon = ({
|
@@ -4337,7 +4353,7 @@ var init_TextLink = __esm({
|
|
4337
4353
|
var _a6;
|
4338
4354
|
const { t: t2 } = useTranslation();
|
4339
4355
|
const isExternal = props.isExternal !== void 0 ? props.isExternal : Boolean((_a6 = props.href) == null ? void 0 : _a6.match(/^https?:\/\//));
|
4340
|
-
return /* @__PURE__ */
|
4356
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Link, { ...props, ref, isExternal }, children, isExternal && /* @__PURE__ */ React71__namespace.default.createElement(
|
4341
4357
|
sporIconReact.LinkOutOutline24Icon,
|
4342
4358
|
{
|
4343
4359
|
marginLeft: 0.5,
|
@@ -4373,8 +4389,8 @@ var init_VyLogo = __esm({
|
|
4373
4389
|
exports.VyLogo = ({ colorScheme, ...boxProps }) => {
|
4374
4390
|
const mainColor = colorScheme === "light" ? "#1d211c" : "#ffffff";
|
4375
4391
|
const accentColor = colorScheme === "light" ? "#138c6e" : "#ffffff";
|
4376
|
-
const id =
|
4377
|
-
return /* @__PURE__ */
|
4392
|
+
const id = React71.useId();
|
4393
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { as: "svg", viewBox: "0 0 107 54", ...boxProps }, /* @__PURE__ */ React71__namespace.default.createElement("title", null, "Vy logo"), /* @__PURE__ */ React71__namespace.default.createElement(
|
4378
4394
|
"path",
|
4379
4395
|
{
|
4380
4396
|
fillRule: "evenodd",
|
@@ -4382,7 +4398,7 @@ var init_VyLogo = __esm({
|
|
4382
4398
|
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",
|
4383
4399
|
fill: mainColor
|
4384
4400
|
}
|
4385
|
-
), /* @__PURE__ */
|
4401
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(
|
4386
4402
|
"mask",
|
4387
4403
|
{
|
4388
4404
|
id: `${id}-a`,
|
@@ -4393,7 +4409,7 @@ var init_VyLogo = __esm({
|
|
4393
4409
|
width: "94",
|
4394
4410
|
height: "54"
|
4395
4411
|
},
|
4396
|
-
/* @__PURE__ */
|
4412
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
4397
4413
|
"path",
|
4398
4414
|
{
|
4399
4415
|
fillRule: "evenodd",
|
@@ -4402,7 +4418,7 @@ var init_VyLogo = __esm({
|
|
4402
4418
|
fill: mainColor
|
4403
4419
|
}
|
4404
4420
|
)
|
4405
|
-
), /* @__PURE__ */
|
4421
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(
|
4406
4422
|
"g",
|
4407
4423
|
{
|
4408
4424
|
mask: `url(#${id}-a)`,
|
@@ -4410,9 +4426,9 @@ var init_VyLogo = __esm({
|
|
4410
4426
|
clipRule: "evenodd",
|
4411
4427
|
fill: mainColor
|
4412
4428
|
},
|
4413
|
-
/* @__PURE__ */
|
4414
|
-
/* @__PURE__ */
|
4415
|
-
), /* @__PURE__ */
|
4429
|
+
/* @__PURE__ */ React71__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" }),
|
4430
|
+
/* @__PURE__ */ React71__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" })
|
4431
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(
|
4416
4432
|
"path",
|
4417
4433
|
{
|
4418
4434
|
fillRule: "evenodd",
|
@@ -4420,7 +4436,7 @@ var init_VyLogo = __esm({
|
|
4420
4436
|
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",
|
4421
4437
|
fill: accentColor
|
4422
4438
|
}
|
4423
|
-
), /* @__PURE__ */
|
4439
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(
|
4424
4440
|
"path",
|
4425
4441
|
{
|
4426
4442
|
fillRule: "evenodd",
|
@@ -4428,7 +4444,7 @@ var init_VyLogo = __esm({
|
|
4428
4444
|
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",
|
4429
4445
|
fill: mainColor
|
4430
4446
|
}
|
4431
|
-
), /* @__PURE__ */
|
4447
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(
|
4432
4448
|
"mask",
|
4433
4449
|
{
|
4434
4450
|
id: `${id}-b`,
|
@@ -4439,7 +4455,7 @@ var init_VyLogo = __esm({
|
|
4439
4455
|
width: "78",
|
4440
4456
|
height: "54"
|
4441
4457
|
},
|
4442
|
-
/* @__PURE__ */
|
4458
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
4443
4459
|
"path",
|
4444
4460
|
{
|
4445
4461
|
fillRule: "evenodd",
|
@@ -4448,25 +4464,25 @@ var init_VyLogo = __esm({
|
|
4448
4464
|
fill: mainColor
|
4449
4465
|
}
|
4450
4466
|
)
|
4451
|
-
), /* @__PURE__ */
|
4467
|
+
), /* @__PURE__ */ React71__namespace.default.createElement("g", { mask: `url(#${id}-b)`, fillRule: "evenodd", clipRule: "evenodd" }, /* @__PURE__ */ React71__namespace.default.createElement(
|
4452
4468
|
"path",
|
4453
4469
|
{
|
4454
4470
|
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",
|
4455
4471
|
fill: mainColor
|
4456
4472
|
}
|
4457
|
-
), /* @__PURE__ */
|
4473
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(
|
4458
4474
|
"path",
|
4459
4475
|
{
|
4460
4476
|
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",
|
4461
4477
|
fill: mainColor
|
4462
4478
|
}
|
4463
|
-
), /* @__PURE__ */
|
4479
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(
|
4464
4480
|
"path",
|
4465
4481
|
{
|
4466
4482
|
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",
|
4467
4483
|
fill: accentColor
|
4468
4484
|
}
|
4469
|
-
)), /* @__PURE__ */
|
4485
|
+
)), /* @__PURE__ */ React71__namespace.default.createElement(
|
4470
4486
|
"path",
|
4471
4487
|
{
|
4472
4488
|
fillRule: "evenodd",
|
@@ -4488,7 +4504,7 @@ var init_logo = __esm({
|
|
4488
4504
|
var JumpForwardIcon, JumpBackwardIcon, PlayIcon, PauseIcon, SkipNextIcon, SkipPreviousIcon;
|
4489
4505
|
var init_icons2 = __esm({
|
4490
4506
|
"src/media-controller/icons.tsx"() {
|
4491
|
-
JumpForwardIcon = (props) => /* @__PURE__ */
|
4507
|
+
JumpForwardIcon = (props) => /* @__PURE__ */ React71__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 32 30", fill: "none" }, /* @__PURE__ */ React71__namespace.createElement(
|
4492
4508
|
"path",
|
4493
4509
|
{
|
4494
4510
|
fillRule: "evenodd",
|
@@ -4496,7 +4512,7 @@ var init_icons2 = __esm({
|
|
4496
4512
|
d: "M22.388 7.5C20.567 5.967 18.251 5 15.75 5 9.951 5 5.25 9.701 5.25 15.5S9.951 26 15.75 26s10.5-4.701 10.5-10.5a1 1 0 1 1 2 0c0 6.904-5.596 12.5-12.5 12.5s-12.5-5.596-12.5-12.5S8.846 3 15.75 3c3.206 0 6.11 1.31 8.304 3.3l.206-1.441a1 1 0 0 1 1.98.282L25.617 9.5H21.25a1 1 0 1 1 0-2h1.138Z",
|
4497
4513
|
fill: "currentColor"
|
4498
4514
|
}
|
4499
|
-
), /* @__PURE__ */
|
4515
|
+
), /* @__PURE__ */ React71__namespace.createElement(
|
4500
4516
|
"path",
|
4501
4517
|
{
|
4502
4518
|
fillRule: "evenodd",
|
@@ -4505,7 +4521,7 @@ var init_icons2 = __esm({
|
|
4505
4521
|
fill: "currentColor"
|
4506
4522
|
}
|
4507
4523
|
));
|
4508
|
-
JumpBackwardIcon = (props) => /* @__PURE__ */
|
4524
|
+
JumpBackwardIcon = (props) => /* @__PURE__ */ React71__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 32 30", fill: "none" }, /* @__PURE__ */ React71__namespace.createElement(
|
4509
4525
|
"path",
|
4510
4526
|
{
|
4511
4527
|
fillRule: "evenodd",
|
@@ -4513,7 +4529,7 @@ var init_icons2 = __esm({
|
|
4513
4529
|
d: "M9.612 7.5C11.433 5.967 13.749 5 16.25 5c5.799 0 10.5 4.701 10.5 10.5S22.049 26 16.25 26s-10.5-4.701-10.5-10.5a1 1 0 1 0-2 0c0 6.904 5.596 12.5 12.5 12.5s12.5-5.596 12.5-12.5S23.154 3 16.25 3c-3.206 0-6.11 1.31-8.304 3.3L7.74 4.86a1 1 0 0 0-1.98.282L6.383 9.5h4.367a1 1 0 1 0 0-2H9.612Z",
|
4514
4530
|
fill: "currentColor"
|
4515
4531
|
}
|
4516
|
-
), /* @__PURE__ */
|
4532
|
+
), /* @__PURE__ */ React71__namespace.createElement(
|
4517
4533
|
"path",
|
4518
4534
|
{
|
4519
4535
|
fillRule: "evenodd",
|
@@ -4522,7 +4538,7 @@ var init_icons2 = __esm({
|
|
4522
4538
|
fill: "currentColor"
|
4523
4539
|
}
|
4524
4540
|
));
|
4525
|
-
PlayIcon = (props) => /* @__PURE__ */
|
4541
|
+
PlayIcon = (props) => /* @__PURE__ */ React71__namespace.createElement(react.Box, { as: "svg", ...props, fill: "none", viewBox: "0 0 60 60" }, /* @__PURE__ */ React71__namespace.createElement(
|
4526
4542
|
"path",
|
4527
4543
|
{
|
4528
4544
|
fillRule: "evenodd",
|
@@ -4531,7 +4547,7 @@ var init_icons2 = __esm({
|
|
4531
4547
|
fill: "currentColor"
|
4532
4548
|
}
|
4533
4549
|
));
|
4534
|
-
PauseIcon = (props) => /* @__PURE__ */
|
4550
|
+
PauseIcon = (props) => /* @__PURE__ */ React71__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 60 60", fill: "none" }, /* @__PURE__ */ React71__namespace.createElement(
|
4535
4551
|
"path",
|
4536
4552
|
{
|
4537
4553
|
fillRule: "evenodd",
|
@@ -4540,7 +4556,7 @@ var init_icons2 = __esm({
|
|
4540
4556
|
fill: "currentColor"
|
4541
4557
|
}
|
4542
4558
|
));
|
4543
|
-
SkipNextIcon = (props) => /* @__PURE__ */
|
4559
|
+
SkipNextIcon = (props) => /* @__PURE__ */ React71__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 30 30", fill: "none" }, /* @__PURE__ */ React71__namespace.createElement(
|
4544
4560
|
"path",
|
4545
4561
|
{
|
4546
4562
|
fillRule: "evenodd",
|
@@ -4549,7 +4565,7 @@ var init_icons2 = __esm({
|
|
4549
4565
|
fill: "currentColor"
|
4550
4566
|
}
|
4551
4567
|
));
|
4552
|
-
SkipPreviousIcon = (props) => /* @__PURE__ */
|
4568
|
+
SkipPreviousIcon = (props) => /* @__PURE__ */ React71__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 30 30", fill: "none" }, /* @__PURE__ */ React71__namespace.createElement(
|
4553
4569
|
"path",
|
4554
4570
|
{
|
4555
4571
|
fillRule: "evenodd",
|
@@ -4576,7 +4592,7 @@ var init_JumpButton = __esm({
|
|
4576
4592
|
variant: "jumpSkip",
|
4577
4593
|
size: size2
|
4578
4594
|
});
|
4579
|
-
return /* @__PURE__ */
|
4595
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
4580
4596
|
react.Center,
|
4581
4597
|
{
|
4582
4598
|
as: "button",
|
@@ -4585,7 +4601,7 @@ var init_JumpButton = __esm({
|
|
4585
4601
|
disabled: isDisabled,
|
4586
4602
|
...props
|
4587
4603
|
},
|
4588
|
-
direction2 === "forward" ? /* @__PURE__ */
|
4604
|
+
direction2 === "forward" ? /* @__PURE__ */ React71__namespace.default.createElement(JumpForwardIcon, { sx: styles3.icon }) : /* @__PURE__ */ React71__namespace.default.createElement(JumpBackwardIcon, { sx: styles3.icon })
|
4589
4605
|
);
|
4590
4606
|
};
|
4591
4607
|
texts18 = createTexts({
|
@@ -4620,7 +4636,7 @@ var init_PlayPauseButton = __esm({
|
|
4620
4636
|
variant: "play",
|
4621
4637
|
size: size2
|
4622
4638
|
});
|
4623
|
-
return /* @__PURE__ */
|
4639
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
4624
4640
|
react.Center,
|
4625
4641
|
{
|
4626
4642
|
as: "button",
|
@@ -4629,7 +4645,7 @@ var init_PlayPauseButton = __esm({
|
|
4629
4645
|
disabled: isDisabled,
|
4630
4646
|
...props
|
4631
4647
|
},
|
4632
|
-
isPlaying ? /* @__PURE__ */
|
4648
|
+
isPlaying ? /* @__PURE__ */ React71__namespace.default.createElement(PauseIcon, { sx: styles3.icon }) : /* @__PURE__ */ React71__namespace.default.createElement(PlayIcon, { sx: styles3.icon })
|
4633
4649
|
);
|
4634
4650
|
};
|
4635
4651
|
texts19 = createTexts({
|
@@ -4664,7 +4680,7 @@ var init_SkipButton = __esm({
|
|
4664
4680
|
variant: "jumpSkip",
|
4665
4681
|
size: size2
|
4666
4682
|
});
|
4667
|
-
return /* @__PURE__ */
|
4683
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
4668
4684
|
react.Center,
|
4669
4685
|
{
|
4670
4686
|
as: "button",
|
@@ -4673,7 +4689,7 @@ var init_SkipButton = __esm({
|
|
4673
4689
|
disabled: isDisabled,
|
4674
4690
|
...props
|
4675
4691
|
},
|
4676
|
-
direction2 === "forward" ? /* @__PURE__ */
|
4692
|
+
direction2 === "forward" ? /* @__PURE__ */ React71__namespace.default.createElement(SkipNextIcon, { sx: styles3.icon }) : /* @__PURE__ */ React71__namespace.default.createElement(SkipPreviousIcon, { sx: styles3.icon })
|
4677
4693
|
);
|
4678
4694
|
};
|
4679
4695
|
texts20 = createTexts({
|
@@ -4710,7 +4726,7 @@ var init_ModalHeader = __esm({
|
|
4710
4726
|
fontSize: size2 === "lg" ? ["mobile.lg", "desktop.lg"] : ["mobile.md", "desktop.md"],
|
4711
4727
|
textAlign: size2 === "lg" ? "center" : "left"
|
4712
4728
|
};
|
4713
|
-
return /* @__PURE__ */
|
4729
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.ModalHeader, { ...props, ref, ...styles3 });
|
4714
4730
|
}
|
4715
4731
|
);
|
4716
4732
|
}
|
@@ -4720,7 +4736,7 @@ var init_Drawer = __esm({
|
|
4720
4736
|
"src/modal/Drawer.tsx"() {
|
4721
4737
|
init_ModalHeader();
|
4722
4738
|
exports.Drawer = (props) => {
|
4723
|
-
return /* @__PURE__ */
|
4739
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(DrawerProvider, { placement: props.placement }, /* @__PURE__ */ React71__namespace.default.createElement(react.Drawer, { ...props }));
|
4724
4740
|
};
|
4725
4741
|
exports.DrawerContent = react.forwardRef(
|
4726
4742
|
({ children, ...props }, ref) => {
|
@@ -4737,7 +4753,7 @@ var init_Drawer = __esm({
|
|
4737
4753
|
});
|
4738
4754
|
const isTopOrBottom = placement === "top" || placement === "bottom";
|
4739
4755
|
const widthConstraits = isTopOrBottom ? { width: ["100%", "37.5rem"], mx: "auto" } : {};
|
4740
|
-
return /* @__PURE__ */
|
4756
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { ...handlers }, /* @__PURE__ */ React71__namespace.default.createElement(
|
4741
4757
|
react.DrawerContent,
|
4742
4758
|
{
|
4743
4759
|
...widthConstraits,
|
@@ -4746,13 +4762,13 @@ var init_Drawer = __esm({
|
|
4746
4762
|
...props,
|
4747
4763
|
ref
|
4748
4764
|
},
|
4749
|
-
/* @__PURE__ */
|
4765
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.Box, { position: "relative" }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { maxHeight: "100vh", maxWidth: "100vw", overflow: "auto" }, isTopOrBottom && /* @__PURE__ */ React71__namespace.default.createElement(Notch, null), /* @__PURE__ */ React71__namespace.default.createElement(react.Box, null, children)))
|
4750
4766
|
));
|
4751
4767
|
}
|
4752
4768
|
);
|
4753
4769
|
Notch = react.forwardRef((props, ref) => {
|
4754
4770
|
const placement = useDrawerContext();
|
4755
|
-
return /* @__PURE__ */
|
4771
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
4756
4772
|
react.Box,
|
4757
4773
|
{
|
4758
4774
|
position: "absolute",
|
@@ -4764,14 +4780,14 @@ var init_Drawer = __esm({
|
|
4764
4780
|
...props,
|
4765
4781
|
ref
|
4766
4782
|
},
|
4767
|
-
/* @__PURE__ */
|
4783
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
4768
4784
|
react.Center,
|
4769
4785
|
{
|
4770
4786
|
background: placement === "bottom" ? "bottom" : "top",
|
4771
4787
|
padding: 2,
|
4772
4788
|
borderRadius: "md"
|
4773
4789
|
},
|
4774
|
-
/* @__PURE__ */
|
4790
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
4775
4791
|
react.Box,
|
4776
4792
|
{
|
4777
4793
|
width: "2.265rem",
|
@@ -4783,10 +4799,10 @@ var init_Drawer = __esm({
|
|
4783
4799
|
)
|
4784
4800
|
);
|
4785
4801
|
});
|
4786
|
-
DrawerContext =
|
4787
|
-
DrawerProvider = (props) => /* @__PURE__ */
|
4802
|
+
DrawerContext = React71__namespace.default.createContext(void 0);
|
4803
|
+
DrawerProvider = (props) => /* @__PURE__ */ React71__namespace.default.createElement(DrawerContext.Provider, { value: props.placement }, props.children);
|
4788
4804
|
useDrawerContext = () => {
|
4789
|
-
return
|
4805
|
+
return React71__namespace.default.useContext(DrawerContext);
|
4790
4806
|
};
|
4791
4807
|
}
|
4792
4808
|
});
|
@@ -4801,11 +4817,11 @@ var init_FullScreenDrawer = __esm({
|
|
4801
4817
|
title,
|
4802
4818
|
placement = "bottom",
|
4803
4819
|
leftButton = null,
|
4804
|
-
rightButton = /* @__PURE__ */
|
4820
|
+
rightButton = /* @__PURE__ */ React71__namespace.default.createElement(DrawerCloseButton2, null),
|
4805
4821
|
isOpen,
|
4806
4822
|
onClose
|
4807
4823
|
}) => {
|
4808
|
-
const [isContentBoxScrolled, setContentBoxScrolled] =
|
4824
|
+
const [isContentBoxScrolled, setContentBoxScrolled] = React71.useState(false);
|
4809
4825
|
const onContentScroll = (e) => {
|
4810
4826
|
const target = e.target;
|
4811
4827
|
if (target.scrollTop <= 0) {
|
@@ -4814,10 +4830,10 @@ var init_FullScreenDrawer = __esm({
|
|
4814
4830
|
}
|
4815
4831
|
setContentBoxScrolled(true);
|
4816
4832
|
};
|
4817
|
-
|
4833
|
+
React71.useEffect(() => {
|
4818
4834
|
setContentBoxScrolled(false);
|
4819
4835
|
}, [isOpen]);
|
4820
|
-
return /* @__PURE__ */
|
4836
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(exports.Drawer, { isOpen, onClose, placement, size: "full" }, /* @__PURE__ */ React71__namespace.default.createElement(react.DrawerOverlay, null), /* @__PURE__ */ React71__namespace.default.createElement(
|
4821
4837
|
react.DrawerContent,
|
4822
4838
|
{
|
4823
4839
|
height: "100vh",
|
@@ -4825,7 +4841,7 @@ var init_FullScreenDrawer = __esm({
|
|
4825
4841
|
backgroundPosition: "top",
|
4826
4842
|
backgroundRepeat: "no-repeat"
|
4827
4843
|
},
|
4828
|
-
/* @__PURE__ */
|
4844
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
4829
4845
|
DrawerTopMenu,
|
4830
4846
|
{
|
4831
4847
|
isScrolled: isContentBoxScrolled,
|
@@ -4834,7 +4850,7 @@ var init_FullScreenDrawer = __esm({
|
|
4834
4850
|
rightButton
|
4835
4851
|
}
|
4836
4852
|
),
|
4837
|
-
/* @__PURE__ */
|
4853
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.DrawerBody, { overflow: "auto", onScroll: onContentScroll }, children)
|
4838
4854
|
));
|
4839
4855
|
};
|
4840
4856
|
DrawerTopMenu = ({
|
@@ -4847,7 +4863,7 @@ var init_FullScreenDrawer = __esm({
|
|
4847
4863
|
"bg.default.light",
|
4848
4864
|
"bg.default.dark"
|
4849
4865
|
);
|
4850
|
-
return /* @__PURE__ */
|
4866
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
4851
4867
|
react.Flex,
|
4852
4868
|
{
|
4853
4869
|
width: "100%",
|
@@ -4860,8 +4876,8 @@ var init_FullScreenDrawer = __esm({
|
|
4860
4876
|
transition: "box-shadow 0.2s",
|
4861
4877
|
boxShadow: isScrolled ? "md" : void 0
|
4862
4878
|
},
|
4863
|
-
/* @__PURE__ */
|
4864
|
-
/* @__PURE__ */
|
4879
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.Box, { flex: "1" }, leftButton),
|
4880
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
4865
4881
|
react.DrawerHeader,
|
4866
4882
|
{
|
4867
4883
|
as: "h2",
|
@@ -4874,7 +4890,7 @@ var init_FullScreenDrawer = __esm({
|
|
4874
4890
|
},
|
4875
4891
|
title
|
4876
4892
|
),
|
4877
|
-
/* @__PURE__ */
|
4893
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.Box, { flex: "1" }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { width: "fit-content", marginLeft: "auto" }, rightButton))
|
4878
4894
|
);
|
4879
4895
|
};
|
4880
4896
|
DrawerCloseButton2 = () => {
|
@@ -4884,11 +4900,11 @@ var init_FullScreenDrawer = __esm({
|
|
4884
4900
|
`(min-width: ${tokens11__namespace.default.size.breakpoint.sm})`
|
4885
4901
|
);
|
4886
4902
|
if (isScreenSizeMinSm) {
|
4887
|
-
return /* @__PURE__ */
|
4903
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
4888
4904
|
exports.Button,
|
4889
4905
|
{
|
4890
4906
|
variant: "ghost",
|
4891
|
-
leftIcon: /* @__PURE__ */
|
4907
|
+
leftIcon: /* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.CloseFill24Icon, null),
|
4892
4908
|
onClick: onClose,
|
4893
4909
|
"aria-label": t2(texts21.close),
|
4894
4910
|
width: "fit-content",
|
@@ -4897,11 +4913,11 @@ var init_FullScreenDrawer = __esm({
|
|
4897
4913
|
t2(texts21.close)
|
4898
4914
|
);
|
4899
4915
|
}
|
4900
|
-
return /* @__PURE__ */
|
4916
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
4901
4917
|
exports.IconButton,
|
4902
4918
|
{
|
4903
4919
|
variant: "ghost",
|
4904
|
-
icon: /* @__PURE__ */
|
4920
|
+
icon: /* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.CloseFill30Icon, null),
|
4905
4921
|
onClick: onClose,
|
4906
4922
|
"aria-label": t2(texts21.close)
|
4907
4923
|
}
|
@@ -4931,7 +4947,7 @@ var init_SimpleDrawer = __esm({
|
|
4931
4947
|
title,
|
4932
4948
|
...props
|
4933
4949
|
}) => {
|
4934
|
-
return /* @__PURE__ */
|
4950
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(exports.Drawer, { placement, ...props }, /* @__PURE__ */ React71__namespace.default.createElement(react.DrawerOverlay, null), /* @__PURE__ */ React71__namespace.default.createElement(exports.DrawerContent, null, /* @__PURE__ */ React71__namespace.default.createElement(react.DrawerCloseButton, null), title && /* @__PURE__ */ React71__namespace.default.createElement(exports.ModalHeader, null, title), /* @__PURE__ */ React71__namespace.default.createElement(react.DrawerBody, null, children)));
|
4935
4951
|
};
|
4936
4952
|
}
|
4937
4953
|
});
|
@@ -4970,7 +4986,7 @@ var init_Nudge = __esm({
|
|
4970
4986
|
}
|
4971
4987
|
return null;
|
4972
4988
|
}
|
4973
|
-
return /* @__PURE__ */
|
4989
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
4974
4990
|
react.Popover,
|
4975
4991
|
{
|
4976
4992
|
arrowSize: 12,
|
@@ -4978,8 +4994,8 @@ var init_Nudge = __esm({
|
|
4978
4994
|
defaultIsOpen: true,
|
4979
4995
|
...props
|
4980
4996
|
},
|
4981
|
-
/* @__PURE__ */
|
4982
|
-
/* @__PURE__ */
|
4997
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.PopoverAnchor, null, children),
|
4998
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.PopoverContent, { borderRadius: "sm" }, /* @__PURE__ */ React71__namespace.default.createElement(react.DarkMode, null, /* @__PURE__ */ React71__namespace.default.createElement(react.PopoverArrow, null), /* @__PURE__ */ React71__namespace.default.createElement(react.PopoverCloseButton, null), /* @__PURE__ */ React71__namespace.default.createElement(react.PopoverBody, { margin: 1 }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { marginRight: 4 }, content), /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { marginTop: 1.5 }, actions ?? /* @__PURE__ */ React71__namespace.default.createElement(exports.ButtonGroup, null, /* @__PURE__ */ React71__namespace.default.createElement(exports.Button, { variant: "tertiary", size: "xs" }, t2(texts22.close)), /* @__PURE__ */ React71__namespace.default.createElement(exports.Button, { variant: "secondary", size: "xs", fontWeight: "bold" }, t2(texts22.showMe)))))))
|
4983
4999
|
);
|
4984
5000
|
};
|
4985
5001
|
texts22 = createTexts({
|
@@ -5009,23 +5025,23 @@ var init_WizardNudge = __esm({
|
|
5009
5025
|
content,
|
5010
5026
|
...props
|
5011
5027
|
}) => {
|
5012
|
-
const [currentStep, setCurrentStep] =
|
5028
|
+
const [currentStep, setCurrentStep] = React71.useState(1);
|
5013
5029
|
const totalSteps = content.length;
|
5014
5030
|
const isLastStep = totalSteps === currentStep;
|
5015
5031
|
const onNext = () => setCurrentStep((prev) => prev + 1);
|
5016
|
-
return /* @__PURE__ */
|
5032
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
5017
5033
|
exports.Nudge,
|
5018
5034
|
{
|
5019
5035
|
onClose,
|
5020
5036
|
name,
|
5021
5037
|
content: content[currentStep - 1],
|
5022
|
-
actions: /* @__PURE__ */
|
5038
|
+
actions: /* @__PURE__ */ React71__namespace.default.createElement(react.Flex, { gap: 3, alignItems: "center" }, /* @__PURE__ */ React71__namespace.default.createElement(
|
5023
5039
|
exports.ProgressIndicator,
|
5024
5040
|
{
|
5025
5041
|
activeStep: currentStep,
|
5026
5042
|
numberOfSteps: totalSteps
|
5027
5043
|
}
|
5028
|
-
), /* @__PURE__ */
|
5044
|
+
), /* @__PURE__ */ React71__namespace.default.createElement(react.Box, null, /* @__PURE__ */ React71__namespace.default.createElement(NextOrCloseButton, { isLastStep, onNext }))),
|
5029
5045
|
...props
|
5030
5046
|
},
|
5031
5047
|
children
|
@@ -5034,12 +5050,12 @@ var init_WizardNudge = __esm({
|
|
5034
5050
|
NextOrCloseButton = ({ isLastStep, onNext }) => {
|
5035
5051
|
const { onClose } = react.usePopoverContext();
|
5036
5052
|
const { t: t2 } = useTranslation();
|
5037
|
-
return /* @__PURE__ */
|
5053
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
5038
5054
|
exports.Button,
|
5039
5055
|
{
|
5040
5056
|
variant: "tertiary",
|
5041
5057
|
size: "xs",
|
5042
|
-
leftIcon: isLastStep ? void 0 : /* @__PURE__ */
|
5058
|
+
leftIcon: isLastStep ? void 0 : /* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.ArrowRightFill18Icon, null),
|
5043
5059
|
onClick: isLastStep ? onClose : onNext,
|
5044
5060
|
width: "fit-content"
|
5045
5061
|
},
|
@@ -5117,7 +5133,7 @@ var init_Pagination = __esm({
|
|
5117
5133
|
}
|
5118
5134
|
}
|
5119
5135
|
return displayPageNumbers.map(
|
5120
|
-
(pageNumber, index) => pageNumber === "..." ? /* @__PURE__ */
|
5136
|
+
(pageNumber, index) => pageNumber === "..." ? /* @__PURE__ */ React71__namespace.default.createElement(react.ListItem, { key: index, sx: style.listItem }, /* @__PURE__ */ React71__namespace.default.createElement(react.Center, null, "...")) : /* @__PURE__ */ React71__namespace.default.createElement(
|
5121
5137
|
react.Link,
|
5122
5138
|
{
|
5123
5139
|
key: index,
|
@@ -5134,7 +5150,7 @@ var init_Pagination = __esm({
|
|
5134
5150
|
)
|
5135
5151
|
);
|
5136
5152
|
};
|
5137
|
-
return /* @__PURE__ */
|
5153
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Flex, { as: "nav", "aria-label": "pagination" }, /* @__PURE__ */ React71__namespace.default.createElement(
|
5138
5154
|
react.UnorderedList,
|
5139
5155
|
{
|
5140
5156
|
display: "flex",
|
@@ -5143,22 +5159,22 @@ var init_Pagination = __esm({
|
|
5143
5159
|
padding: 0,
|
5144
5160
|
margin: 0
|
5145
5161
|
},
|
5146
|
-
/* @__PURE__ */
|
5162
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.ListItem, { "aria-label": t2(texts24.previousPage) }, /* @__PURE__ */ React71__namespace.default.createElement(
|
5147
5163
|
exports.TextLink,
|
5148
5164
|
{
|
5149
5165
|
onClick: () => onPageChange(selectedPage - 1),
|
5150
5166
|
sx: hasPreviousPage ? style.link : style.disabled
|
5151
5167
|
},
|
5152
|
-
/* @__PURE__ */
|
5168
|
+
/* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.DropdownLeftFill18Icon, { sx: style.icon })
|
5153
5169
|
)),
|
5154
5170
|
renderPaginationButtons(),
|
5155
|
-
/* @__PURE__ */
|
5171
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.ListItem, { "aria-label": t2(texts24.nextPage) }, /* @__PURE__ */ React71__namespace.default.createElement(
|
5156
5172
|
exports.TextLink,
|
5157
5173
|
{
|
5158
5174
|
onClick: () => onPageChange(selectedPage + 1),
|
5159
5175
|
sx: hasNextPage ? style.link : style.disabled
|
5160
5176
|
},
|
5161
|
-
/* @__PURE__ */
|
5177
|
+
/* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.DropdownRightFill18Icon, { sx: style.icon })
|
5162
5178
|
))
|
5163
5179
|
));
|
5164
5180
|
};
|
@@ -5191,7 +5207,7 @@ var init_ProgressDot = __esm({
|
|
5191
5207
|
init_src();
|
5192
5208
|
ProgressDot = ({ isActive }) => {
|
5193
5209
|
const style = react.useMultiStyleConfig("ProgressIndicator");
|
5194
|
-
return /* @__PURE__ */
|
5210
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
5195
5211
|
react.Box,
|
5196
5212
|
{
|
5197
5213
|
as: "svg",
|
@@ -5201,7 +5217,7 @@ var init_ProgressDot = __esm({
|
|
5201
5217
|
viewBox: "0 0 100 100",
|
5202
5218
|
"aria-current": isActive ? "step" : void 0
|
5203
5219
|
},
|
5204
|
-
/* @__PURE__ */
|
5220
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.Box, { as: "circle", cx: "50", cy: "50", r: "50" })
|
5205
5221
|
);
|
5206
5222
|
};
|
5207
5223
|
}
|
@@ -5217,7 +5233,7 @@ var init_ProgressIndicator = __esm({
|
|
5217
5233
|
}) => {
|
5218
5234
|
const { t: t2 } = useTranslation();
|
5219
5235
|
const style = react.useMultiStyleConfig("ProgressIndicator");
|
5220
|
-
return /* @__PURE__ */
|
5236
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
5221
5237
|
react.Box,
|
5222
5238
|
{
|
5223
5239
|
__css: style.root,
|
@@ -5227,7 +5243,7 @@ var init_ProgressIndicator = __esm({
|
|
5227
5243
|
"aria-valuenow": activeStep,
|
5228
5244
|
"aria-valuetext": t2(texts25.stepsOf(activeStep, numberOfSteps))
|
5229
5245
|
},
|
5230
|
-
/* @__PURE__ */
|
5246
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.Box, { __css: style.container }, Array.from({ length: numberOfSteps }, (_, i) => /* @__PURE__ */ React71__namespace.default.createElement(
|
5231
5247
|
ProgressDot,
|
5232
5248
|
{
|
5233
5249
|
key: i,
|
@@ -5268,7 +5284,7 @@ var init_SporProvider = __esm({
|
|
5268
5284
|
}) => {
|
5269
5285
|
const brandCustomizations = exports.brandTheme[brand] ?? {};
|
5270
5286
|
const extendedTheme = deepmerge__default.default(theme3, brandCustomizations);
|
5271
|
-
return /* @__PURE__ */
|
5287
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(LanguageProvider, { language }, /* @__PURE__ */ React71__namespace.default.createElement(react.ChakraProvider, { theme: extendedTheme, ...props }, /* @__PURE__ */ React71__namespace.default.createElement(react$1.Global, { styles: exports.fontFaces }), children));
|
5272
5288
|
};
|
5273
5289
|
}
|
5274
5290
|
});
|
@@ -5282,7 +5298,7 @@ var init_provider = __esm({
|
|
5282
5298
|
var StepperContext, StepperProvider, useStepper;
|
5283
5299
|
var init_StepperContext = __esm({
|
5284
5300
|
"src/stepper/StepperContext.tsx"() {
|
5285
|
-
StepperContext =
|
5301
|
+
StepperContext = React71__namespace.default.createContext(null);
|
5286
5302
|
StepperProvider = ({
|
5287
5303
|
activeStep,
|
5288
5304
|
children,
|
@@ -5290,7 +5306,7 @@ var init_StepperContext = __esm({
|
|
5290
5306
|
numberOfSteps,
|
5291
5307
|
variant
|
5292
5308
|
}) => {
|
5293
|
-
return /* @__PURE__ */
|
5309
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
5294
5310
|
StepperContext.Provider,
|
5295
5311
|
{
|
5296
5312
|
value: { activeStep, onClick, numberOfSteps, variant }
|
@@ -5299,7 +5315,7 @@ var init_StepperContext = __esm({
|
|
5299
5315
|
);
|
5300
5316
|
};
|
5301
5317
|
useStepper = () => {
|
5302
|
-
const context =
|
5318
|
+
const context = React71__namespace.default.useContext(StepperContext);
|
5303
5319
|
if (!context) {
|
5304
5320
|
throw new Error(
|
5305
5321
|
"useStepper must be used within a StepperProvider. Most likely, you forgot to wrap your StepperStep in a Stepper component"
|
@@ -5333,7 +5349,7 @@ var init_Stepper = __esm({
|
|
5333
5349
|
const { t: t2 } = useTranslation();
|
5334
5350
|
const hideBackButtonOnFirstStep = activeStep === 1 && !onBackButtonClick;
|
5335
5351
|
const shownHeading = heading || title;
|
5336
|
-
return /* @__PURE__ */
|
5352
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { sx: style.root }, /* @__PURE__ */ React71__namespace.default.createElement(
|
5337
5353
|
StepperProvider,
|
5338
5354
|
{
|
5339
5355
|
onClick,
|
@@ -5341,7 +5357,7 @@ var init_Stepper = __esm({
|
|
5341
5357
|
variant,
|
5342
5358
|
numberOfSteps
|
5343
5359
|
},
|
5344
|
-
/* @__PURE__ */
|
5360
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.Box, { sx: style.container }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { sx: style.innerContainer }, /* @__PURE__ */ React71__namespace.default.createElement(
|
5345
5361
|
react.Flex,
|
5346
5362
|
{
|
5347
5363
|
justifyContent: "space-between",
|
@@ -5349,11 +5365,11 @@ var init_Stepper = __esm({
|
|
5349
5365
|
gap: 2,
|
5350
5366
|
flex: 1
|
5351
5367
|
},
|
5352
|
-
/* @__PURE__ */
|
5368
|
+
/* @__PURE__ */ React71__namespace.default.createElement(
|
5353
5369
|
exports.IconButton,
|
5354
5370
|
{
|
5355
5371
|
"aria-label": t2(texts26.back),
|
5356
|
-
icon: /* @__PURE__ */
|
5372
|
+
icon: /* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.ArrowLeftFill24Icon, null),
|
5357
5373
|
variant: "ghost",
|
5358
5374
|
size: "sm",
|
5359
5375
|
visibility: hideBackButtonOnFirstStep ? "hidden" : "visible",
|
@@ -5366,9 +5382,9 @@ var init_Stepper = __esm({
|
|
5366
5382
|
}
|
5367
5383
|
}
|
5368
5384
|
),
|
5369
|
-
shownHeading && /* @__PURE__ */
|
5370
|
-
/* @__PURE__ */
|
5371
|
-
)), /* @__PURE__ */
|
5385
|
+
shownHeading && /* @__PURE__ */ React71__namespace.default.createElement(exports.Text, { flex: 1, variant: "sm", as: headingLevel, sx: style.title }, shownHeading),
|
5386
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.Box, { sx: style.stepCounter }, t2(texts26.stepsOf(activeStep, numberOfSteps)))
|
5387
|
+
)), /* @__PURE__ */ React71__namespace.default.createElement(react.Flex, { justifyContent: "center", display: ["none", null, "flex"] }, steps.map((step, index) => /* @__PURE__ */ React71__namespace.default.createElement(
|
5372
5388
|
exports.StepperStep,
|
5373
5389
|
{
|
5374
5390
|
key: index,
|
@@ -5420,14 +5436,14 @@ var init_StepperStep = __esm({
|
|
5420
5436
|
);
|
5421
5437
|
const iconColor = react.useColorModeValue("blackAlpha.200", "whiteAlpha.200");
|
5422
5438
|
const isDisabled = state2 !== "active" && isDisabledOverride || state2 === "disabled";
|
5423
|
-
return /* @__PURE__ */
|
5439
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { sx: style.stepContainer }, stepNumber > 1 && /* @__PURE__ */ React71__namespace.default.createElement(
|
5424
5440
|
sporIconReact.DropdownRightFill18Icon,
|
5425
5441
|
{
|
5426
5442
|
marginX: 5,
|
5427
5443
|
display: ["none", null, "block"],
|
5428
5444
|
color: iconColor
|
5429
5445
|
}
|
5430
|
-
), isDisabled ? /* @__PURE__ */
|
5446
|
+
), isDisabled ? /* @__PURE__ */ React71__namespace.default.createElement(
|
5431
5447
|
exports.Text,
|
5432
5448
|
{
|
5433
5449
|
variant: "xs",
|
@@ -5437,7 +5453,7 @@ var init_StepperStep = __esm({
|
|
5437
5453
|
paddingX: 2
|
5438
5454
|
},
|
5439
5455
|
children
|
5440
|
-
) : /* @__PURE__ */
|
5456
|
+
) : /* @__PURE__ */ React71__namespace.default.createElement(
|
5441
5457
|
exports.Button,
|
5442
5458
|
{
|
5443
5459
|
size: "xs",
|
@@ -5473,7 +5489,7 @@ exports.Tabs = void 0;
|
|
5473
5489
|
var init_Tabs = __esm({
|
5474
5490
|
"src/tab/Tabs.tsx"() {
|
5475
5491
|
exports.Tabs = react.forwardRef((props, ref) => {
|
5476
|
-
return /* @__PURE__ */
|
5492
|
+
return /* @__PURE__ */ React71__namespace.createElement(react.Tabs, { ...props, ref });
|
5477
5493
|
});
|
5478
5494
|
}
|
5479
5495
|
});
|
@@ -5495,7 +5511,7 @@ var init_Table = __esm({
|
|
5495
5511
|
"src/table/Table.tsx"() {
|
5496
5512
|
exports.Table = react.forwardRef((props, ref) => {
|
5497
5513
|
const { variant, size: size2, colorScheme, children, ...rest } = props;
|
5498
|
-
return /* @__PURE__ */
|
5514
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { ...rest, ...getStyleProps(props) }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { overflowX: "auto" }, /* @__PURE__ */ React71__namespace.default.createElement(
|
5499
5515
|
react.Table,
|
5500
5516
|
{
|
5501
5517
|
variant,
|
@@ -6239,16 +6255,16 @@ function defineCssVars(scope, keys2) {
|
|
6239
6255
|
function defineStyle(styles3) {
|
6240
6256
|
return styles3;
|
6241
6257
|
}
|
6242
|
-
function defineStyleConfig(
|
6243
|
-
return
|
6258
|
+
function defineStyleConfig(config44) {
|
6259
|
+
return config44;
|
6244
6260
|
}
|
6245
6261
|
function createMultiStyleConfigHelpers(parts19) {
|
6246
6262
|
return {
|
6247
|
-
definePartsStyle(
|
6248
|
-
return
|
6263
|
+
definePartsStyle(config44) {
|
6264
|
+
return config44;
|
6249
6265
|
},
|
6250
|
-
defineMultiStyleConfig(
|
6251
|
-
return { parts: parts19, ...
|
6266
|
+
defineMultiStyleConfig(config44) {
|
6267
|
+
return { parts: parts19, ...config44 };
|
6252
6268
|
}
|
6253
6269
|
};
|
6254
6270
|
}
|
@@ -15326,7 +15342,175 @@ var init_static_card = __esm({
|
|
15326
15342
|
}
|
15327
15343
|
default:
|
15328
15344
|
return {
|
15329
|
-
backgroundColor: ((_a6 = colors2[props.colorScheme]) == null ? void 0 : _a6[100]) ?? "
|
15345
|
+
backgroundColor: ((_a6 = colors2[props.colorScheme]) == null ? void 0 : _a6[100]) ?? "default",
|
15346
|
+
...baseText("default", props)
|
15347
|
+
};
|
15348
|
+
}
|
15349
|
+
};
|
15350
|
+
}
|
15351
|
+
});
|
15352
|
+
function getColorSchemeClickableProps2(props) {
|
15353
|
+
switch (props.colorScheme) {
|
15354
|
+
case "default":
|
15355
|
+
return {
|
15356
|
+
...floatingBorder("default", props)
|
15357
|
+
};
|
15358
|
+
case "accent":
|
15359
|
+
return {
|
15360
|
+
...accentBackground("default", props),
|
15361
|
+
...accentText("default", props),
|
15362
|
+
_hover: {
|
15363
|
+
...accentBackground("hover", props)
|
15364
|
+
},
|
15365
|
+
_active: {
|
15366
|
+
...accentBackground("active", props)
|
15367
|
+
}
|
15368
|
+
};
|
15369
|
+
}
|
15370
|
+
}
|
15371
|
+
var config43, pressable_card_default, getColorSchemeBaseProps3, getColorSchemeHoverProps2, getColorSchemeActiveProps2;
|
15372
|
+
var init_pressable_card = __esm({
|
15373
|
+
"src/theme/components/pressable-card.ts"() {
|
15374
|
+
init_base_utils();
|
15375
|
+
init_floating_utils();
|
15376
|
+
init_focus_utils();
|
15377
|
+
init_accent_utils();
|
15378
|
+
config43 = react.defineStyleConfig({
|
15379
|
+
baseStyle: (props) => ({
|
15380
|
+
appearance: "none",
|
15381
|
+
border: "none",
|
15382
|
+
overflow: "hidden",
|
15383
|
+
fontSize: "inherit",
|
15384
|
+
display: "block",
|
15385
|
+
borderRadius: "md",
|
15386
|
+
...getColorSchemeBaseProps3(props),
|
15387
|
+
...getColorSchemeClickableProps2(props),
|
15388
|
+
...focusVisibleStyles(props),
|
15389
|
+
...getColorSchemeActiveProps2(props),
|
15390
|
+
_hover: getColorSchemeHoverProps2(props),
|
15391
|
+
_disabled: {
|
15392
|
+
...baseBackground("disabled", props),
|
15393
|
+
...baseBorder("disabled", props),
|
15394
|
+
...baseText("disabled", props),
|
15395
|
+
pointerEvents: "none"
|
15396
|
+
}
|
15397
|
+
}),
|
15398
|
+
variants: {
|
15399
|
+
base: (props) => ({
|
15400
|
+
...baseBackground("default", props),
|
15401
|
+
_hover: {
|
15402
|
+
...baseBackground("hover", props)
|
15403
|
+
},
|
15404
|
+
_active: {
|
15405
|
+
...baseBackground("active", props)
|
15406
|
+
}
|
15407
|
+
}),
|
15408
|
+
accent: (props) => ({
|
15409
|
+
...accentBackground("default", props),
|
15410
|
+
_hover: {
|
15411
|
+
...accentBackground("hover", props)
|
15412
|
+
},
|
15413
|
+
_active: {
|
15414
|
+
...accentBackground("active", props)
|
15415
|
+
}
|
15416
|
+
}),
|
15417
|
+
floating: (props) => ({
|
15418
|
+
...floatingBackground("default", props),
|
15419
|
+
_hover: {
|
15420
|
+
...floatingBackground("hover", props)
|
15421
|
+
},
|
15422
|
+
_active: {
|
15423
|
+
...floatingBackground("active", props)
|
15424
|
+
}
|
15425
|
+
})
|
15426
|
+
},
|
15427
|
+
sizes: {
|
15428
|
+
sm: {
|
15429
|
+
boxShadow: "sm",
|
15430
|
+
_hover: {
|
15431
|
+
boxShadow: "md"
|
15432
|
+
},
|
15433
|
+
_active: {
|
15434
|
+
boxShadow: "none"
|
15435
|
+
}
|
15436
|
+
},
|
15437
|
+
lg: {
|
15438
|
+
boxShadow: "md",
|
15439
|
+
_hover: {
|
15440
|
+
boxShadow: "lg"
|
15441
|
+
},
|
15442
|
+
_active: {
|
15443
|
+
boxShadow: "sm"
|
15444
|
+
}
|
15445
|
+
}
|
15446
|
+
}
|
15447
|
+
});
|
15448
|
+
pressable_card_default = config43;
|
15449
|
+
getColorSchemeBaseProps3 = (props) => {
|
15450
|
+
switch (props.colorScheme) {
|
15451
|
+
case "default":
|
15452
|
+
return {
|
15453
|
+
...baseBorder("default", props),
|
15454
|
+
backgroundColor: themeTools.mode(
|
15455
|
+
"white",
|
15456
|
+
`color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
|
15457
|
+
)(props),
|
15458
|
+
color: "inherit"
|
15459
|
+
};
|
15460
|
+
case "accent":
|
15461
|
+
return {
|
15462
|
+
...accentBackground("default", props),
|
15463
|
+
...accentText("default", props),
|
15464
|
+
_hover: {
|
15465
|
+
...accentBackground("hover", props)
|
15466
|
+
},
|
15467
|
+
_active: {
|
15468
|
+
...accentBackground("active", props)
|
15469
|
+
}
|
15470
|
+
};
|
15471
|
+
}
|
15472
|
+
};
|
15473
|
+
getColorSchemeHoverProps2 = (props) => {
|
15474
|
+
switch (props.colorScheme) {
|
15475
|
+
case "default":
|
15476
|
+
return {
|
15477
|
+
backgroundColor: themeTools.mode(
|
15478
|
+
"white",
|
15479
|
+
`color-mix(in srgb, white 20%, var(--spor-colors-bg-default-dark))`
|
15480
|
+
)(props),
|
15481
|
+
...floatingBorder("hover", props)
|
15482
|
+
};
|
15483
|
+
case "accent":
|
15484
|
+
return {
|
15485
|
+
...accentBackground("default", props),
|
15486
|
+
...accentText("default", props),
|
15487
|
+
_hover: {
|
15488
|
+
...accentBackground("hover", props)
|
15489
|
+
},
|
15490
|
+
_active: {
|
15491
|
+
...accentBackground("active", props)
|
15492
|
+
}
|
15493
|
+
};
|
15494
|
+
}
|
15495
|
+
};
|
15496
|
+
getColorSchemeActiveProps2 = (props) => {
|
15497
|
+
const { colorScheme } = props;
|
15498
|
+
switch (colorScheme) {
|
15499
|
+
case "default":
|
15500
|
+
return {
|
15501
|
+
backgroundColor: themeTools.mode("bg.tertiary.light", `bg.default.dark`)(props),
|
15502
|
+
...floatingBorder("active", props)
|
15503
|
+
};
|
15504
|
+
case "accent":
|
15505
|
+
return {
|
15506
|
+
...accentBackground("default", props),
|
15507
|
+
...accentText("default", props),
|
15508
|
+
_hover: {
|
15509
|
+
...accentBackground("hover", props)
|
15510
|
+
},
|
15511
|
+
_active: {
|
15512
|
+
...accentBackground("active", props)
|
15513
|
+
}
|
15330
15514
|
};
|
15331
15515
|
}
|
15332
15516
|
};
|
@@ -15366,6 +15550,7 @@ __export(components_exports, {
|
|
15366
15550
|
NumericStepper: () => numeric_stepper_default,
|
15367
15551
|
Pagination: () => pagination_default,
|
15368
15552
|
Popover: () => popover_default,
|
15553
|
+
PressableCard: () => pressable_card_default,
|
15369
15554
|
ProgressBar: () => progress_bar_default,
|
15370
15555
|
ProgressIndicator: () => progress_indicator_default,
|
15371
15556
|
Radio: () => radio_default,
|
@@ -15424,6 +15609,7 @@ var init_components = __esm({
|
|
15424
15609
|
init_textarea();
|
15425
15610
|
init_toast();
|
15426
15611
|
init_static_card();
|
15612
|
+
init_pressable_card();
|
15427
15613
|
init_travel_tag();
|
15428
15614
|
}
|
15429
15615
|
});
|
@@ -15544,12 +15730,12 @@ var init_BaseToast = __esm({
|
|
15544
15730
|
init_src();
|
15545
15731
|
BaseToast = ({ children, variant, id }) => {
|
15546
15732
|
const styles3 = react.useStyleConfig("Toast", { variant });
|
15547
|
-
return /* @__PURE__ */
|
15733
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(react.Flex, { sx: styles3, id }, /* @__PURE__ */ React71__namespace.default.createElement(ToastIcon, { variant }), children);
|
15548
15734
|
};
|
15549
15735
|
ToastIcon = ({ variant }) => {
|
15550
15736
|
const Icon = getIcon3(variant);
|
15551
15737
|
const { t: t2 } = useTranslation();
|
15552
|
-
return /* @__PURE__ */
|
15738
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
15553
15739
|
Icon,
|
15554
15740
|
{
|
15555
15741
|
flexShrink: 0,
|
@@ -15604,7 +15790,7 @@ var init_ActionToast = __esm({
|
|
15604
15790
|
buttonText,
|
15605
15791
|
id
|
15606
15792
|
}) => {
|
15607
|
-
return /* @__PURE__ */
|
15793
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { marginRight: 2, flexGrow: "1" }, children), /* @__PURE__ */ React71__namespace.default.createElement(exports.Button, { variant: "tertiary", size: "sm", onClick }, buttonText));
|
15608
15794
|
};
|
15609
15795
|
}
|
15610
15796
|
});
|
@@ -15621,13 +15807,13 @@ var init_ClosableToast = __esm({
|
|
15621
15807
|
}) => {
|
15622
15808
|
const styles3 = react.useMultiStyleConfig("Toast", { variant });
|
15623
15809
|
const { t: t2 } = useTranslation();
|
15624
|
-
return /* @__PURE__ */
|
15810
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React71__namespace.default.createElement(react.Box, { flexGrow: "1" }, children), /* @__PURE__ */ React71__namespace.default.createElement(
|
15625
15811
|
exports.IconButton,
|
15626
15812
|
{
|
15627
15813
|
sx: styles3.dismissButton,
|
15628
15814
|
variant: "ghost",
|
15629
15815
|
"aria-label": t2(texts28.dismiss),
|
15630
|
-
icon: /* @__PURE__ */
|
15816
|
+
icon: /* @__PURE__ */ React71__namespace.default.createElement(sporIconReact.CloseFill18Icon, null),
|
15631
15817
|
onClick: onClose
|
15632
15818
|
}
|
15633
15819
|
));
|
@@ -15650,7 +15836,7 @@ var init_useToast = __esm({
|
|
15650
15836
|
init_ClosableToast();
|
15651
15837
|
exports.useToast = () => {
|
15652
15838
|
const toast = react.useToast();
|
15653
|
-
const wrappedToast =
|
15839
|
+
const wrappedToast = React71.useCallback((opts) => {
|
15654
15840
|
const Toast = getToastComponent(opts);
|
15655
15841
|
toast({
|
15656
15842
|
...opts,
|
@@ -15661,7 +15847,7 @@ var init_useToast = __esm({
|
|
15661
15847
|
};
|
15662
15848
|
getToastComponent = (opts) => {
|
15663
15849
|
if ("isClosable" in opts && opts.isClosable) {
|
15664
|
-
return ({ onClose, id }) => /* @__PURE__ */
|
15850
|
+
return ({ onClose, id }) => /* @__PURE__ */ React71__namespace.default.createElement(
|
15665
15851
|
ClosableToast,
|
15666
15852
|
{
|
15667
15853
|
id,
|
@@ -15677,7 +15863,7 @@ var init_useToast = __esm({
|
|
15677
15863
|
);
|
15678
15864
|
}
|
15679
15865
|
if ("buttonText" in opts) {
|
15680
|
-
return ({ id }) => /* @__PURE__ */
|
15866
|
+
return ({ id }) => /* @__PURE__ */ React71__namespace.default.createElement(
|
15681
15867
|
ActionToast,
|
15682
15868
|
{
|
15683
15869
|
id,
|
@@ -15688,7 +15874,7 @@ var init_useToast = __esm({
|
|
15688
15874
|
opts.text
|
15689
15875
|
);
|
15690
15876
|
}
|
15691
|
-
return ({ id }) => /* @__PURE__ */
|
15877
|
+
return ({ id }) => /* @__PURE__ */ React71__namespace.default.createElement(BaseToast, { id, variant: opts.variant }, opts.text);
|
15692
15878
|
};
|
15693
15879
|
}
|
15694
15880
|
});
|
@@ -15713,7 +15899,7 @@ var init_Tooltip = __esm({
|
|
15713
15899
|
withCloseButton = false,
|
15714
15900
|
...props
|
15715
15901
|
}) => {
|
15716
|
-
return /* @__PURE__ */
|
15902
|
+
return /* @__PURE__ */ React71__namespace.default.createElement(
|
15717
15903
|
react.Popover,
|
15718
15904
|
{
|
15719
15905
|
onClose,
|
@@ -15725,8 +15911,8 @@ var init_Tooltip = __esm({
|
|
15725
15911
|
arrowShadowColor: "none",
|
15726
15912
|
...props
|
15727
15913
|
},
|
15728
|
-
/* @__PURE__ */
|
15729
|
-
/* @__PURE__ */
|
15914
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.PopoverTrigger, null, children),
|
15915
|
+
/* @__PURE__ */ React71__namespace.default.createElement(react.PopoverContent, null, /* @__PURE__ */ React71__namespace.default.createElement(react.PopoverArrow, null), withCloseButton && /* @__PURE__ */ React71__namespace.default.createElement(react.PopoverCloseButton, null), /* @__PURE__ */ React71__namespace.default.createElement(react.PopoverBody, null, content))
|
15730
15916
|
);
|
15731
15917
|
};
|
15732
15918
|
}
|
@@ -15799,8 +15985,8 @@ function useSizes({
|
|
15799
15985
|
getNodes,
|
15800
15986
|
observeMutation = true
|
15801
15987
|
}) {
|
15802
|
-
const [sizes26, setSizes] =
|
15803
|
-
const [count, setCount] =
|
15988
|
+
const [sizes26, setSizes] = React71.useState([]);
|
15989
|
+
const [count, setCount] = React71.useState(0);
|
15804
15990
|
useSafeLayoutEffect(() => {
|
15805
15991
|
const elements = getNodes();
|
15806
15992
|
const cleanups = elements.map(
|
@@ -15848,7 +16034,7 @@ var init_dist9 = __esm({
|
|
15848
16034
|
"../../node_modules/@chakra-ui/react-use-size/dist/index.mjs"() {
|
15849
16035
|
"use client";
|
15850
16036
|
init_dist8();
|
15851
|
-
useSafeLayoutEffect = Boolean(globalThis == null ? void 0 : globalThis.document) ?
|
16037
|
+
useSafeLayoutEffect = Boolean(globalThis == null ? void 0 : globalThis.document) ? React71.useLayoutEffect : React71.useEffect;
|
15852
16038
|
}
|
15853
16039
|
});
|
15854
16040
|
var init_externals = __esm({
|