@vygruppen/spor-react 2.3.0 → 2.3.3

package/dist/index.js

@@ -1,8 +1,7 @@
 'use strict';
 
-var React48 = require('react');
+var React49 = require('react');
 var react = require('@chakra-ui/react');
-var loboT = require('@leile/lobo-t');
 var lottieReact = require('lottie-react');
 var sporLoader = require('@vygruppen/spor-loader');
 var reactAria = require('react-aria');
@@ -33,7 +32,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React48__namespace = /*#__PURE__*/_interopNamespace(React48);
+var React49__namespace = /*#__PURE__*/_interopNamespace(React49);
 var tokens10__namespace = /*#__PURE__*/_interopNamespace(tokens10);
 
 var __create = Object.create;
@@ -71,15 +70,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var AccordionContext, AccordionProvider, useAccordionContext;
 var init_AccordionContext = __esm({
   "src/accordion/AccordionContext.tsx"() {
-    AccordionContext = React48__namespace.default.createContext(null);
+    AccordionContext = React49__namespace.default.createContext(null);
     AccordionProvider = ({
       size: size2,
       ...props
     }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(AccordionContext.Provider, { value: { size: size2 }, ...props });
+      return /* @__PURE__ */ React49__namespace.default.createElement(AccordionContext.Provider, { value: { size: size2 }, ...props });
     };
     useAccordionContext = () => {
-      const context = React48__namespace.default.useContext(AccordionContext);
+      const context = React49__namespace.default.useContext(AccordionContext);
       if (context === null) {
         throw new Error(
           "useAccordionContext must be used within AccordionProvider"
@@ -95,7 +94,7 @@ var init_Accordion = __esm({
     init_AccordionContext();
     exports.Accordion = react.forwardRef((props, ref) => {
       const defaultIndex = typeof props.defaultIndex === "number" && props.allowMultiple ? [props.defaultIndex] : props.defaultIndex;
-      return /* @__PURE__ */ React48__namespace.default.createElement(AccordionProvider, { size: props.size }, /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(AccordionProvider, { size: props.size }, /* @__PURE__ */ React49__namespace.default.createElement(
         react.Accordion,
         {
           ...props,
@@ -119,7 +118,7 @@ var init_Expandable = __esm({
       size: size2 = "md",
       ...rest
     }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(exports.Accordion, { ...rest, size: size2 }, /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(exports.Accordion, { ...rest, size: size2 }, /* @__PURE__ */ React49__namespace.default.createElement(
         exports.ExpandableItem,
         {
           headingLevel,
@@ -138,7 +137,7 @@ var init_Expandable = __esm({
     }) => {
       const { size: size2 } = useAccordionContext();
       warnAboutMismatchingIcon({ icon: leftIcon, size: size2 });
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.AccordionItem, { ...rest }, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { as: headingLevel }, /* @__PURE__ */ React48__namespace.default.createElement(react.AccordionButton, null, /* @__PURE__ */ React48__namespace.default.createElement(react.Flex, { alignItems: "center" }, leftIcon && /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { mr: 2 }, leftIcon), title), /* @__PURE__ */ React48__namespace.default.createElement(react.AccordionIcon, null))), /* @__PURE__ */ React48__namespace.default.createElement(react.AccordionPanel, null, children));
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.AccordionItem, { ...rest }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { as: headingLevel }, /* @__PURE__ */ React49__namespace.default.createElement(react.AccordionButton, null, /* @__PURE__ */ React49__namespace.default.createElement(react.Flex, { alignItems: "center" }, leftIcon && /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { mr: 2 }, leftIcon), title), /* @__PURE__ */ React49__namespace.default.createElement(react.AccordionIcon, null))), /* @__PURE__ */ React49__namespace.default.createElement(react.AccordionPanel, null, children));
     };
     warnAboutMismatchingIcon = ({ icon, size: size2 }) => {
       var _a6, _b5;
@@ -185,10 +184,30 @@ var init_accordion = __esm({
     init_Expandable();
   }
 });
+function LanguageProvider({
+  language,
+  children
+}) {
+  return /* @__PURE__ */ React49__namespace.default.createElement(LanguageContext.Provider, { value: language }, children);
+}
+function useLanguage() {
+  const language = React49.useContext(LanguageContext);
+  if (!language) {
+    throw new Error("Please wrap your application in a LanguageProvider");
+  }
+  return language;
+}
+function useTranslation() {
+  const language = useLanguage();
+  const t2 = (text) => {
+    return text[language];
+  };
+  return { t: t2, language };
+}
 function createTexts(texts24) {
   return texts24;
 }
-exports.Language = void 0; exports.LanguageProvider = void 0; exports.useTranslation = void 0;
+exports.Language = void 0; var LanguageContext;
 var init_i18n = __esm({
   "src/i18n/index.tsx"() {
     exports.Language = /* @__PURE__ */ ((Language3) => {
@@ -198,14 +217,12 @@ var init_i18n = __esm({
       Language3["English"] = "en";
       return Language3;
     })(exports.Language || {});
-    ({ LanguageProvider: exports.LanguageProvider, useTranslation: exports.useTranslation } = loboT.initLobot(
-      "nb" /* NorwegianBokmal */
-    ));
+    LanguageContext = React49.createContext(void 0);
   }
 });
 function useHydrated() {
-  let [hydrated, setHydrated] = React48.useState(() => !hydrating);
-  React48.useEffect(function hydrate() {
+  let [hydrated, setHydrated] = React49.useState(() => !hydrating);
+  React49.useEffect(function hydrate() {
     hydrating = false;
     setHydrated(true);
   }, []);
@@ -223,13 +240,13 @@ var init_ClientOnly = __esm({
     init_useHydrated();
     ClientOnly = ({ children, fallback = null }) => {
       const isHydrated = useHydrated();
-      return /* @__PURE__ */ React48__namespace.default.createElement(React48__namespace.default.Fragment, null, isHydrated ? children() : fallback);
+      return /* @__PURE__ */ React49__namespace.default.createElement(React49__namespace.default.Fragment, null, isHydrated ? children() : fallback);
     };
   }
 });
 function Lottie({ animationData }) {
   const { View } = lottieReact.useLottie({ animationData, loop: true });
-  return /* @__PURE__ */ React48__namespace.default.createElement(React48__namespace.default.Fragment, null, View);
+  return /* @__PURE__ */ React49__namespace.default.createElement(React49__namespace.default.Fragment, null, View);
 }
 var init_Lottie = __esm({
   "src/loader/Lottie.tsx"() {
@@ -245,7 +262,7 @@ var init_ColorInlineLoader = __esm({
       maxWidth,
       ...props
     }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Center, { ...props }, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React48__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React48__namespace.default.createElement(Lottie, { animationData: sporLoader.inlineLoaderColorData }))));
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Center, { ...props }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React49__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React49__namespace.default.createElement(Lottie, { animationData: sporLoader.inlineLoaderColorData }))));
     };
   }
 });
@@ -260,7 +277,7 @@ var init_ColorSpinner = __esm({
       maxWidth,
       ...props
     }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React48__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React48__namespace.default.createElement(Lottie, { animationData: sporLoader.spinnerColorData }))), children && /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { mt: 3, fontWeight: "bold" }, children));
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React49__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React49__namespace.default.createElement(Lottie, { animationData: sporLoader.spinnerColorData }))), children && /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { mt: 3, fontWeight: "bold" }, children));
     };
   }
 });
@@ -270,7 +287,7 @@ var init_ContentLoader = __esm({
     init_ClientOnly();
     init_Lottie();
     exports.ContentLoader = ({ children, ...props }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { ...props }, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { maxWidth: "140px", mx: "auto" }, /* @__PURE__ */ React48__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React48__namespace.default.createElement(Lottie, { animationData: sporLoader.contentLoaderData }))), children && /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { textAlign: "center", fontWeight: "bold" }, children));
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...props }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { maxWidth: "140px", mx: "auto" }, /* @__PURE__ */ React49__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React49__namespace.default.createElement(Lottie, { animationData: sporLoader.contentLoaderData }))), children && /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { textAlign: "center", fontWeight: "bold" }, children));
     };
   }
 });
@@ -284,7 +301,7 @@ var init_DarkFullScreenLoader = __esm({
       maxWidth,
       ...props
     }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Center, { height: "100%", background: "darkTeal", ...props }, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React48__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React48__namespace.default.createElement(Lottie, { animationData: sporLoader.fullScreenLoaderWhiteData }))));
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Center, { height: "100%", background: "darkTeal", ...props }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React49__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React49__namespace.default.createElement(Lottie, { animationData: sporLoader.fullScreenLoaderWhiteData }))));
     };
   }
 });
@@ -298,7 +315,7 @@ var init_DarkInlineLoader = __esm({
       maxWidth,
       ...props
     }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Center, { ...props }, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React48__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React48__namespace.default.createElement(Lottie, { animationData: sporLoader.inlineLoaderDarkData }))));
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Center, { ...props }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React49__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React49__namespace.default.createElement(Lottie, { animationData: sporLoader.inlineLoaderDarkData }))));
     };
   }
 });
@@ -313,7 +330,7 @@ var init_DarkSpinner = __esm({
       maxWidth,
       ...props
     }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React48__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React48__namespace.default.createElement(Lottie, { animationData: sporLoader.spinnerDarkData }))), children && /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { mt: 3, fontWeight: "bold" }, children));
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React49__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React49__namespace.default.createElement(Lottie, { animationData: sporLoader.spinnerDarkData }))), children && /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { mt: 3, fontWeight: "bold" }, children));
     };
   }
 });
@@ -327,7 +344,7 @@ var init_LightFullScreenLoader = __esm({
       maxWidth,
       ...props
     }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Center, { height: "100%", background: "white", ...props }, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React48__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React48__namespace.default.createElement(Lottie, { animationData: sporLoader.fullScreenLoaderBlackData }))));
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Center, { height: "100%", background: "white", ...props }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React49__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React49__namespace.default.createElement(Lottie, { animationData: sporLoader.fullScreenLoaderBlackData }))));
     };
   }
 });
@@ -341,7 +358,7 @@ var init_LightInlineLoader = __esm({
       maxWidth,
       ...props
     }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Center, { ...props }, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React48__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React48__namespace.default.createElement(Lottie, { animationData: sporLoader.inlineLoaderLightData }))));
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Center, { ...props }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React49__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React49__namespace.default.createElement(Lottie, { animationData: sporLoader.inlineLoaderLightData }))));
     };
   }
 });
@@ -356,7 +373,7 @@ var init_LightSpinner = __esm({
       maxWidth,
       ...props
     }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React48__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React48__namespace.default.createElement(Lottie, { animationData: sporLoader.spinnerLightData }))), children && /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { mt: 3, fontWeight: "bold" }, children));
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React49__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React49__namespace.default.createElement(Lottie, { animationData: sporLoader.spinnerLightData }))), children && /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { mt: 3, fontWeight: "bold" }, children));
     };
   }
 });
@@ -364,11 +381,11 @@ var useRotatingLabel;
 var init_useRotatingLabel = __esm({
   "src/loader/useRotatingLabel.tsx"() {
     useRotatingLabel = ({ label, delay }) => {
-      const loadingTextArray = React48.useMemo(
+      const loadingTextArray = React49.useMemo(
         () => Array.isArray(label) ? label : [label],
         [label]
       );
-      const [currentLoadingTextIndex, setCurrentLoadingTextIndex] = React48.useState(0);
+      const [currentLoadingTextIndex, setCurrentLoadingTextIndex] = React49.useState(0);
       react.useInterval(() => {
         setCurrentLoadingTextIndex(
           (prevIndex) => (prevIndex + 1) % loadingTextArray.length
@@ -392,7 +409,7 @@ var init_ProgressBar = __esm({
       "aria-label": ariaLabel,
       ...rest
     }) => {
-      const { t: t2 } = exports.useTranslation();
+      const { t: t2 } = useTranslation();
       const currentLoadingText = useRotatingLabel({
         label,
         delay: labelRotationDelay
@@ -402,7 +419,7 @@ var init_ProgressBar = __esm({
         value,
         "aria-label": ariaLabel || t2(texts.label(value))
       });
-      return /* @__PURE__ */ React48__namespace.default.createElement(React48__namespace.default.Fragment, null, /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(React49__namespace.default.Fragment, null, /* @__PURE__ */ React49__namespace.default.createElement(
         react.Box,
         {
           ...progressBarProps,
@@ -410,7 +427,7 @@ var init_ProgressBar = __esm({
           minWidth: "100px",
           ...rest
         },
-        /* @__PURE__ */ React48__namespace.default.createElement(
+        /* @__PURE__ */ React49__namespace.default.createElement(
           react.Flex,
           {
             backgroundColor: "coralGreen",
@@ -419,7 +436,7 @@ var init_ProgressBar = __esm({
             justifyContent: "flex-start",
             marginX: "auto"
           },
-          /* @__PURE__ */ React48__namespace.default.createElement(
+          /* @__PURE__ */ React49__namespace.default.createElement(
             react.Box,
             {
               backgroundColor: "greenHaze",
@@ -431,7 +448,7 @@ var init_ProgressBar = __esm({
             }
           )
         ),
-        currentLoadingText && /* @__PURE__ */ React48__namespace.default.createElement(
+        currentLoadingText && /* @__PURE__ */ React49__namespace.default.createElement(
           react.Text,
           {
             textAlign: "center",
@@ -467,7 +484,7 @@ var init_ProgressLoader = __esm({
       ...rest
     }) => {
       var _a6;
-      const { t: t2 } = exports.useTranslation();
+      const { t: t2 } = useTranslation();
       const currentLoadingText = useRotatingLabel({
         label,
         delay: labelRotationDelay
@@ -477,11 +494,11 @@ var init_ProgressLoader = __esm({
         value,
         "aria-label": ariaLabel ?? t2(texts2.fallbackLabel(value ?? "?"))
       });
-      const pathRef = React48.useRef(null);
+      const pathRef = React49.useRef(null);
       const progressPathLength = ((_a6 = pathRef.current) == null ? void 0 : _a6.getTotalLength()) ?? 0;
       const progress = (value - 100) / 100 * progressPathLength;
-      const id = React48.useId();
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { ...progressBarProps, minWidth: "100px", width, ...rest }, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { as: "svg", viewBox: "0 0 246 78", fill: "none" }, /* @__PURE__ */ React48__namespace.default.createElement(
+      const id = React49.useId();
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...progressBarProps, minWidth: "100px", width, ...rest }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { as: "svg", viewBox: "0 0 246 78", fill: "none" }, /* @__PURE__ */ React49__namespace.default.createElement(
         react.Box,
         {
           as: "path",
@@ -489,7 +506,7 @@ var init_ProgressLoader = __esm({
           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",
           fill: "#FFB466"
         }
-      ), /* @__PURE__ */ React48__namespace.default.createElement(
+      ), /* @__PURE__ */ React49__namespace.default.createElement(
         react.Box,
         {
           as: "path",
@@ -500,7 +517,7 @@ var init_ProgressLoader = __esm({
           strokeLinecap: "round",
           strokeLinejoin: "round"
         }
-      ), /* @__PURE__ */ React48__namespace.default.createElement(
+      ), /* @__PURE__ */ React49__namespace.default.createElement(
         react.Box,
         {
           as: "path",
@@ -515,7 +532,7 @@ var init_ProgressLoader = __esm({
           transition: "stroke-dashoffset .2s ease-out",
           ref: pathRef
         }
-      ), /* @__PURE__ */ React48__namespace.default.createElement(
+      ), /* @__PURE__ */ React49__namespace.default.createElement(
         react.Box,
         {
           as: "path",
@@ -523,7 +540,7 @@ var init_ProgressLoader = __esm({
           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",
           fill: "#688CBA"
         }
-      )), currentLoadingText && /* @__PURE__ */ React48__namespace.default.createElement(
+      )), currentLoadingText && /* @__PURE__ */ React49__namespace.default.createElement(
         react.Text,
         {
           textAlign: "center",
@@ -547,19 +564,19 @@ var init_ProgressLoader = __esm({
 exports.Skeleton = void 0;
 var init_Skeleton = __esm({
   "src/loader/Skeleton.tsx"() {
-    exports.Skeleton = react.forwardRef((props, ref) => /* @__PURE__ */ React48__namespace.default.createElement(react.Skeleton, { ...props, ref }));
+    exports.Skeleton = react.forwardRef((props, ref) => /* @__PURE__ */ React49__namespace.default.createElement(react.Skeleton, { ...props, ref }));
   }
 });
 exports.SkeletonCircle = void 0;
 var init_SkeletonCircle = __esm({
   "src/loader/SkeletonCircle.tsx"() {
-    exports.SkeletonCircle = (props) => /* @__PURE__ */ React48__namespace.default.createElement(react.SkeletonCircle, { boxSize: 6, borderRadius: "50%", ...props });
+    exports.SkeletonCircle = (props) => /* @__PURE__ */ React49__namespace.default.createElement(react.SkeletonCircle, { boxSize: 6, borderRadius: "50%", ...props });
   }
 });
 exports.SkeletonText = void 0;
 var init_SkeletonText = __esm({
   "src/loader/SkeletonText.tsx"() {
-    exports.SkeletonText = (props) => /* @__PURE__ */ React48__namespace.default.createElement(react.SkeletonText, { boxSize: 6, ...props });
+    exports.SkeletonText = (props) => /* @__PURE__ */ React49__namespace.default.createElement(react.SkeletonText, { boxSize: 6, ...props });
   }
 });
 
@@ -596,7 +613,7 @@ function getLoaderWidth(size2) {
   }
 }
 function useCorrectAriaLabel(props) {
-  const { t: t2 } = exports.useTranslation();
+  const { t: t2 } = useTranslation();
   if (props.isLoading) {
     return String(props.loadingText) ?? t2(texts3.loadingText);
   }
@@ -621,7 +638,7 @@ var init_Button = __esm({
       const buttonGroup = react.useButtonGroup();
       const finalVariant = variant ?? (buttonGroup == null ? void 0 : buttonGroup.variant) ?? "primary";
       const finalSize = size2 ?? (buttonGroup == null ? void 0 : buttonGroup.size) ?? "md";
-      return /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(
         react.Button,
         {
           size: finalSize,
@@ -631,11 +648,11 @@ var init_Button = __esm({
           "aria-label": ariaLabel,
           "aria-busy": isLoading,
           isDisabled: isDisabled || isLoading,
-          leftIcon: isLoading && leftIcon ? /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { visibility: isLoading ? "hidden" : "visible", "aria-hidden": "true" }, leftIcon) : leftIcon,
-          rightIcon: isLoading && rightIcon ? /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { visibility: isLoading ? "hidden" : "visible", "aria-hidden": "true" }, rightIcon) : rightIcon,
+          leftIcon: isLoading && leftIcon ? /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { visibility: isLoading ? "hidden" : "visible", "aria-hidden": "true" }, leftIcon) : leftIcon,
+          rightIcon: isLoading && rightIcon ? /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { visibility: isLoading ? "hidden" : "visible", "aria-hidden": "true" }, rightIcon) : rightIcon,
           position: "relative"
         },
-        isLoading && /* @__PURE__ */ React48__namespace.default.createElement(
+        isLoading && /* @__PURE__ */ React49__namespace.default.createElement(
           react.Center,
           {
             position: "absolute",
@@ -644,7 +661,7 @@ var init_Button = __esm({
             left: "0",
             paddingTop: 2
           },
-          /* @__PURE__ */ React48__namespace.default.createElement(
+          /* @__PURE__ */ React49__namespace.default.createElement(
             exports.ColorInlineLoader,
             {
               maxWidth: getLoaderWidth(finalSize),
@@ -653,7 +670,7 @@ var init_Button = __esm({
             }
           )
         ),
-        /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { visibility: isLoading ? "hidden" : "visible" }, children)
+        /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { visibility: isLoading ? "hidden" : "visible" }, children)
       );
     });
     texts3 = createTexts({
@@ -669,7 +686,7 @@ var init_Button = __esm({
 exports.ButtonGroup = void 0;
 var init_ButtonGroup = __esm({
   "src/button/ButtonGroup.tsx"() {
-    exports.ButtonGroup = react.forwardRef((props, ref) => /* @__PURE__ */ React48__namespace.default.createElement(react.ButtonGroup, { ...props, ref }));
+    exports.ButtonGroup = react.forwardRef((props, ref) => /* @__PURE__ */ React49__namespace.default.createElement(react.ButtonGroup, { ...props, ref }));
   }
 });
 exports.IconButton = void 0;
@@ -677,12 +694,12 @@ var init_IconButton = __esm({
   "src/button/IconButton.tsx"() {
     init_src();
     exports.IconButton = react.forwardRef(
-      ({ ...props }, ref) => /* @__PURE__ */ React48__namespace.default.createElement(
+      ({ ...props }, ref) => /* @__PURE__ */ React49__namespace.default.createElement(
         react.IconButton,
         {
           title: props["aria-label"],
           ...props,
-          spinner: /* @__PURE__ */ React48__namespace.default.createElement(exports.ColorSpinner, { m: 1 }),
+          spinner: /* @__PURE__ */ React49__namespace.default.createElement(exports.ColorSpinner, { m: 1 }),
           ref
         }
       )
@@ -696,8 +713,8 @@ var init_CloseButton = __esm({
     init_IconButton();
     exports.CloseButton = react.forwardRef(
       ({ size: size2 = "sm", ...props }, ref) => {
-        const { t: t2 } = exports.useTranslation();
-        return /* @__PURE__ */ React48__namespace.default.createElement(
+        const { t: t2 } = useTranslation();
+        return /* @__PURE__ */ React49__namespace.default.createElement(
           exports.IconButton,
           {
             ref,
@@ -714,11 +731,11 @@ var init_CloseButton = __esm({
       switch (size2) {
         case "xs":
         case "sm":
-          return /* @__PURE__ */ React48__namespace.default.createElement(sporIconReact.CloseFill18Icon, null);
+          return /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.CloseFill18Icon, null);
         case "md":
-          return /* @__PURE__ */ React48__namespace.default.createElement(sporIconReact.CloseFill24Icon, null);
+          return /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.CloseFill24Icon, null);
         case "lg":
-          return /* @__PURE__ */ React48__namespace.default.createElement(sporIconReact.CloseFill30Icon, null);
+          return /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.CloseFill30Icon, null);
       }
     };
     texts4 = createTexts({
@@ -743,11 +760,11 @@ var init_FloatingActionButton = __esm({
       placement = "bottom right",
       ...props
     }) => {
-      const [isTextVisible, setIsTextVisible] = React48__namespace.default.useState(
+      const [isTextVisible, setIsTextVisible] = React49__namespace.default.useState(
         externalIsTextVisible !== void 0 ? externalIsTextVisible : true
       );
       const scrollDirection = useScrollDirection();
-      React48__namespace.default.useEffect(() => {
+      React49__namespace.default.useEffect(() => {
         if (externalIsTextVisible !== void 0) {
           return;
         }
@@ -757,7 +774,7 @@ var init_FloatingActionButton = __esm({
         );
         return () => window.clearTimeout(id);
       }, [scrollDirection, externalIsTextVisible]);
-      React48__namespace.default.useEffect(() => {
+      React49__namespace.default.useEffect(() => {
         setIsTextVisible(!!externalIsTextVisible);
       }, [externalIsTextVisible]);
       const style = react.useMultiStyleConfig("FloatingActionButton", {
@@ -765,7 +782,7 @@ var init_FloatingActionButton = __esm({
         isTextVisible,
         placement
       });
-      return /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(
         MotionBox,
         {
           __css: style.container,
@@ -773,8 +790,8 @@ var init_FloatingActionButton = __esm({
           "aria-label": children,
           ...props
         },
-        /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { __css: style.icon }, icon),
-        /* @__PURE__ */ React48__namespace.default.createElement(
+        /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { __css: style.icon }, icon),
+        /* @__PURE__ */ React49__namespace.default.createElement(
           MotionBox,
           {
             animate: isTextVisible ? "show" : "hide",
@@ -798,9 +815,9 @@ var init_FloatingActionButton = __esm({
       );
     };
     useScrollDirection = () => {
-      const [scrollDirection, setScrollDirection] = React48__namespace.default.useState(null);
-      const lastScrollPosition = React48__namespace.default.useRef(window.scrollY);
-      React48__namespace.default.useEffect(() => {
+      const [scrollDirection, setScrollDirection] = React49__namespace.default.useState(null);
+      const lastScrollPosition = React49__namespace.default.useRef(window.scrollY);
+      React49__namespace.default.useEffect(() => {
         const onScroll = () => {
           const delta = window.scrollY - lastScrollPosition.current;
           if (delta === 0) {
@@ -835,8 +852,8 @@ var init_AlertIcon = __esm({
     init_i18n();
     AlertIcon = ({ variant }) => {
       const Icon = getIcon2(variant);
-      const { t: t2 } = exports.useTranslation();
-      return /* @__PURE__ */ React48__namespace.default.createElement(
+      const { t: t2 } = useTranslation();
+      return /* @__PURE__ */ React49__namespace.default.createElement(
         Icon,
         {
           flexShrink: 0,
@@ -899,7 +916,7 @@ var init_BaseAlert = __esm({
   "src/alert/BaseAlert.tsx"() {
     BaseAlert = ({ variant, children, ...boxProps }) => {
       const styles2 = react.useMultiStyleConfig("Alert", { variant });
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { sx: styles2.container, ...boxProps }, children);
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { sx: styles2.container, ...boxProps }, children);
     };
   }
 });
@@ -918,7 +935,7 @@ var init_ClosableAlert = __esm({
     }) => {
       const { isOpen, onClose } = react.useDisclosure({ defaultIsOpen: true });
       const styles2 = react.useMultiStyleConfig("Alert", { variant });
-      const { t: t2 } = exports.useTranslation();
+      const { t: t2 } = useTranslation();
       if (!isOpen) {
         return null;
       }
@@ -926,17 +943,17 @@ var init_ClosableAlert = __esm({
         externalOnClose();
         onClose();
       };
-      return /* @__PURE__ */ React48__namespace.default.createElement(BaseAlert, { variant }, /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(BaseAlert, { variant }, /* @__PURE__ */ React49__namespace.default.createElement(
         exports.IconButton,
         {
           variant: "ghost",
           size: "sm",
           onClick: handleClose,
-          icon: /* @__PURE__ */ React48__namespace.default.createElement(sporIconReact.CloseFill18Icon, null),
+          icon: /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.CloseFill18Icon, null),
           "aria-label": t2(texts6.close),
           sx: styles2.closeButton
         }
-      ), /* @__PURE__ */ React48__namespace.default.createElement(AlertIcon, { variant }), children);
+      ), /* @__PURE__ */ React49__namespace.default.createElement(AlertIcon, { variant }), children);
     };
     texts6 = createTexts({
       close: {
@@ -962,7 +979,7 @@ var init_ExpandableAlert = __esm({
       onToggle = () => {
       }
     }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(BaseAlert, { variant, paddingX: 0, paddingY: 0, padding: 0 }, /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(BaseAlert, { variant, paddingX: 0, paddingY: 0, padding: 0 }, /* @__PURE__ */ React49__namespace.default.createElement(
         react.Accordion,
         {
           onChange: (expandedIndex) => onToggle(expandedIndex === 0),
@@ -970,14 +987,14 @@ var init_ExpandableAlert = __esm({
           allowToggle: true,
           flexGrow: "1"
         },
-        /* @__PURE__ */ React48__namespace.default.createElement(react.AccordionItem, null, /* @__PURE__ */ React48__namespace.default.createElement(react.AccordionButton, { paddingX: 3, paddingY: 2 }, /* @__PURE__ */ React48__namespace.default.createElement(
+        /* @__PURE__ */ React49__namespace.default.createElement(react.AccordionItem, null, /* @__PURE__ */ React49__namespace.default.createElement(react.AccordionButton, { paddingX: 3, paddingY: 2 }, /* @__PURE__ */ React49__namespace.default.createElement(
           react.Flex,
           {
             justifyContent: "space-between",
             alignItems: "center",
             flexGrow: "1"
           },
-          /* @__PURE__ */ React48__namespace.default.createElement(react.Flex, { as: headingLevel }, /* @__PURE__ */ React48__namespace.default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React48__namespace.default.createElement(
+          /* @__PURE__ */ React49__namespace.default.createElement(react.Flex, { as: headingLevel }, /* @__PURE__ */ React49__namespace.default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React49__namespace.default.createElement(
             react.Box,
             {
               as: "span",
@@ -991,8 +1008,8 @@ var init_ExpandableAlert = __esm({
             },
             title
           )),
-          /* @__PURE__ */ React48__namespace.default.createElement(react.AccordionIcon, null)
-        )), /* @__PURE__ */ React48__namespace.default.createElement(react.AccordionPanel, null, children))
+          /* @__PURE__ */ React49__namespace.default.createElement(react.AccordionIcon, null)
+        )), /* @__PURE__ */ React49__namespace.default.createElement(react.AccordionPanel, null, children))
       ));
     };
   }
@@ -1003,7 +1020,7 @@ var init_StaticAlert = __esm({
     init_AlertIcon();
     init_BaseAlert();
     exports.StaticAlert = ({ children, ...props }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(BaseAlert, { ...props }, /* @__PURE__ */ React48__namespace.default.createElement(AlertIcon, { variant: props.variant }), children);
+      return /* @__PURE__ */ React49__namespace.default.createElement(BaseAlert, { ...props }, /* @__PURE__ */ React49__namespace.default.createElement(AlertIcon, { variant: props.variant }), children);
     };
   }
 });
@@ -1020,7 +1037,7 @@ exports.Divider = void 0;
 var init_Divider = __esm({
   "src/layout/Divider.tsx"() {
     exports.Divider = react.forwardRef((props, ref) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(
         react.Box,
         {
           as: "hr",
@@ -1041,7 +1058,7 @@ var init_Stack = __esm({
   "src/layout/Stack.tsx"() {
     exports.Stack = react.forwardRef(
       ({ flexDirection, ...props }, ref) => {
-        return /* @__PURE__ */ React48__namespace.default.createElement(react.Stack, { ...props, direction: flexDirection, ref });
+        return /* @__PURE__ */ React49__namespace.default.createElement(react.Stack, { ...props, direction: flexDirection, ref });
       }
     );
   }
@@ -1062,7 +1079,7 @@ var init_Card = __esm({
           colorScheme,
           size: size2
         });
-        return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { __css: styles2, ...props, ref }, children);
+        return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { __css: styles2, ...props, ref }, children);
       }
     );
   }
@@ -1075,15 +1092,15 @@ var init_card = __esm({
   }
 });
 function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {
-  let [stateValue, setStateValue] = (React48.useState)(value || defaultValue);
-  let ref = (React48.useRef)(value !== void 0);
+  let [stateValue, setStateValue] = (React49.useState)(value || defaultValue);
+  let ref = (React49.useRef)(value !== void 0);
   let wasControlled = ref.current;
   let isControlled = value !== void 0;
-  let stateRef = (React48.useRef)(stateValue);
+  let stateRef = (React49.useRef)(stateValue);
   if (wasControlled !== isControlled)
     console.warn(`WARN: A component changed from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`);
   ref.current = isControlled;
-  let setValue = (React48.useCallback)((value2, ...args) => {
+  let setValue = (React49.useCallback)((value2, ...args) => {
     let onChangeCaller = (value3, ...onChangeArgs) => {
       if (onChange) {
         if (!Object.is(stateRef.current, value3))
@@ -1252,7 +1269,7 @@ function $35a22f14a1f04b11$export$66aa2b09de4b1ea5(placeholderValue, granularity
   return date$1;
 }
 function $35a22f14a1f04b11$export$2440da353cedad43(v, granularity) {
-  let lastValue = (React48.useRef)(v);
+  let lastValue = (React49.useRef)(v);
   if (v)
     lastValue.current = v;
   v = lastValue.current;
@@ -1275,8 +1292,8 @@ function $ab5bf3f618090389$export$87194bb378cc3ac2(props) {
   let hasTime = granularity === "hour" || granularity === "minute" || granularity === "second";
   var _props_shouldCloseOnSelect;
   let shouldCloseOnSelect = (_props_shouldCloseOnSelect = props.shouldCloseOnSelect) !== null && _props_shouldCloseOnSelect !== void 0 ? _props_shouldCloseOnSelect : true;
-  let [selectedDate, setSelectedDate] = (React48.useState)(null);
-  let [selectedTime, setSelectedTime] = (React48.useState)(null);
+  let [selectedDate, setSelectedDate] = (React49.useState)(null);
+  let [selectedTime, setSelectedTime] = (React49.useState)(null);
   if (value) {
     selectedDate = value;
     if ("hour" in value)
@@ -1353,23 +1370,23 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
   let timeZone = defaultTimeZone || "UTC";
   if (v && !(granularity in v))
     throw new Error("Invalid granularity " + granularity + " for value " + v.toString());
-  let defaultFormatter = (React48.useMemo)(() => new (date.DateFormatter)(locale), [
+  let defaultFormatter = (React49.useMemo)(() => new (date.DateFormatter)(locale), [
     locale
   ]);
-  let calendar = (React48.useMemo)(() => createCalendar4(defaultFormatter.resolvedOptions().calendar), [
+  let calendar = (React49.useMemo)(() => createCalendar4(defaultFormatter.resolvedOptions().calendar), [
     createCalendar4,
     defaultFormatter
   ]);
   let [value, setDate] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.value, props.defaultValue, props.onChange);
-  let calendarValue = (React48.useMemo)(() => ($35a22f14a1f04b11$export$61a490a80c552550)(value, calendar), [
+  let calendarValue = (React49.useMemo)(() => ($35a22f14a1f04b11$export$61a490a80c552550)(value, calendar), [
     value,
     calendar
   ]);
-  let [placeholderDate, setPlaceholderDate] = (React48.useState)(() => ($35a22f14a1f04b11$export$66aa2b09de4b1ea5)(props.placeholderValue, granularity, calendar, defaultTimeZone));
+  let [placeholderDate, setPlaceholderDate] = (React49.useState)(() => ($35a22f14a1f04b11$export$66aa2b09de4b1ea5)(props.placeholderValue, granularity, calendar, defaultTimeZone));
   let val = calendarValue || placeholderDate;
   let showEra = calendar.identifier === "gregory" && val.era === "BC";
   var _props_maxGranularity;
-  let formatOpts = (React48.useMemo)(() => ({
+  let formatOpts = (React49.useMemo)(() => ({
     granularity,
     maxGranularity: (_props_maxGranularity = props.maxGranularity) !== null && _props_maxGranularity !== void 0 ? _props_maxGranularity : "year",
     timeZone: defaultTimeZone,
@@ -1384,24 +1401,24 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
     hideTimeZone,
     showEra
   ]);
-  let opts = (React48.useMemo)(() => ($35a22f14a1f04b11$export$7e319ea407e63bc0)({}, formatOpts), [
+  let opts = (React49.useMemo)(() => ($35a22f14a1f04b11$export$7e319ea407e63bc0)({}, formatOpts), [
     formatOpts
   ]);
-  let dateFormatter = (React48.useMemo)(() => new (date.DateFormatter)(locale, opts), [
+  let dateFormatter = (React49.useMemo)(() => new (date.DateFormatter)(locale, opts), [
     locale,
     opts
   ]);
-  let resolvedOptions = (React48.useMemo)(() => dateFormatter.resolvedOptions(), [
+  let resolvedOptions = (React49.useMemo)(() => dateFormatter.resolvedOptions(), [
     dateFormatter
   ]);
-  let allSegments = (React48.useMemo)(() => dateFormatter.formatToParts(/* @__PURE__ */ new Date()).filter((seg) => $3c0fc76039f1c516$var$EDITABLE_SEGMENTS[seg.type]).reduce((p, seg) => (p[seg.type] = true, p), {}), [
+  let allSegments = (React49.useMemo)(() => dateFormatter.formatToParts(/* @__PURE__ */ new Date()).filter((seg) => $3c0fc76039f1c516$var$EDITABLE_SEGMENTS[seg.type]).reduce((p, seg) => (p[seg.type] = true, p), {}), [
     dateFormatter
   ]);
-  let [validSegments, setValidSegments] = (React48.useState)(() => props.value || props.defaultValue ? {
+  let [validSegments, setValidSegments] = (React49.useState)(() => props.value || props.defaultValue ? {
     ...allSegments
   } : {});
-  let lastCalendarIdentifier = (React48.useRef)(calendar.identifier);
-  (React48.useEffect)(() => {
+  let lastCalendarIdentifier = (React49.useRef)(calendar.identifier);
+  (React49.useEffect)(() => {
     if (calendar.identifier !== lastCalendarIdentifier.current) {
       lastCalendarIdentifier.current = calendar.identifier;
       setPlaceholderDate((placeholder) => Object.keys(validSegments).length > 0 ? (date.toCalendar)(placeholder, calendar) : ($35a22f14a1f04b11$export$66aa2b09de4b1ea5)(props.placeholderValue, granularity, calendar, defaultTimeZone));
@@ -1434,11 +1451,11 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
     } else
       setPlaceholderDate(newValue);
   };
-  let dateValue = (React48.useMemo)(() => displayValue.toDate(timeZone), [
+  let dateValue = (React49.useMemo)(() => displayValue.toDate(timeZone), [
     displayValue,
     timeZone
   ]);
-  let segments = (React48.useMemo)(() => dateFormatter.formatToParts(dateValue).map((segment) => {
+  let segments = (React49.useMemo)(() => dateFormatter.formatToParts(dateValue).map((segment) => {
     let isEditable = $3c0fc76039f1c516$var$EDITABLE_SEGMENTS[segment.type];
     if (segment.type === "era" && calendar.getEras().length === 1)
       isEditable = false;
@@ -1702,7 +1719,7 @@ function $93c38a5e28be6249$export$e50a61c1de9f574(props) {
   var _props_isDateUnavailable, _props_isDateUnavailable1;
   let overlayState = ($fc909762b330b746$export$61c6a8c84e605fb6)(props);
   let [controlledValue, setControlledValue] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.value, props.defaultValue || null, props.onChange);
-  let [placeholderValue, setPlaceholderValue] = (React48.useState)(() => controlledValue || {
+  let [placeholderValue, setPlaceholderValue] = (React49.useState)(() => controlledValue || {
     start: null,
     end: null
   });
@@ -1726,8 +1743,8 @@ function $93c38a5e28be6249$export$e50a61c1de9f574(props) {
   let hasTime = granularity === "hour" || granularity === "minute" || granularity === "second";
   var _props_shouldCloseOnSelect;
   let shouldCloseOnSelect = (_props_shouldCloseOnSelect = props.shouldCloseOnSelect) !== null && _props_shouldCloseOnSelect !== void 0 ? _props_shouldCloseOnSelect : true;
-  let [dateRange, setSelectedDateRange] = (React48.useState)(null);
-  let [timeRange, setSelectedTimeRange] = (React48.useState)(null);
+  let [dateRange, setSelectedDateRange] = (React49.useState)(null);
+  let [timeRange, setSelectedTimeRange] = (React49.useState)(null);
   if (value && value.start && value.end) {
     dateRange = value;
     if ("hour" in value.start)
@@ -2339,35 +2356,35 @@ function $f62d864046160412$export$a1d3911297b952d7(date, minValue, isDateUnavail
     return date;
 }
 function $131cf43a05231e1e$export$6d095e787d2b5e1f(props) {
-  let defaultFormatter = (React48.useMemo)(() => new (date.DateFormatter)(props.locale), [
+  let defaultFormatter = (React49.useMemo)(() => new (date.DateFormatter)(props.locale), [
     props.locale
   ]);
-  let resolvedOptions = (React48.useMemo)(() => defaultFormatter.resolvedOptions(), [
+  let resolvedOptions = (React49.useMemo)(() => defaultFormatter.resolvedOptions(), [
     defaultFormatter
   ]);
   let { locale, createCalendar: createCalendar4, visibleDuration = {
     months: 1
   }, minValue, maxValue, selectionAlignment, isDateUnavailable } = props;
-  let calendar = (React48.useMemo)(() => createCalendar4(resolvedOptions.calendar), [
+  let calendar = (React49.useMemo)(() => createCalendar4(resolvedOptions.calendar), [
     createCalendar4,
     resolvedOptions.calendar
   ]);
   let [value, setControlledValue] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.value, props.defaultValue, props.onChange);
-  let calendarDateValue = (React48.useMemo)(() => value ? (date.toCalendar)((date.toCalendarDate)(value), calendar) : null, [
+  let calendarDateValue = (React49.useMemo)(() => value ? (date.toCalendar)((date.toCalendarDate)(value), calendar) : null, [
     value,
     calendar
   ]);
-  let timeZone = (React48.useMemo)(() => value && "timeZone" in value ? value.timeZone : resolvedOptions.timeZone, [
+  let timeZone = (React49.useMemo)(() => value && "timeZone" in value ? value.timeZone : resolvedOptions.timeZone, [
     value,
     resolvedOptions.timeZone
   ]);
-  let focusedCalendarDate = (React48.useMemo)(() => props.focusedValue ? ($f62d864046160412$export$4f5203c0d889109e)((date.toCalendar)((date.toCalendarDate)(props.focusedValue), calendar), minValue, maxValue) : void 0, [
+  let focusedCalendarDate = (React49.useMemo)(() => props.focusedValue ? ($f62d864046160412$export$4f5203c0d889109e)((date.toCalendar)((date.toCalendarDate)(props.focusedValue), calendar), minValue, maxValue) : void 0, [
     props.focusedValue,
     calendar,
     minValue,
     maxValue
   ]);
-  let defaultFocusedCalendarDate = (React48.useMemo)(() => ($f62d864046160412$export$4f5203c0d889109e)(props.defaultFocusedValue ? (date.toCalendar)((date.toCalendarDate)(props.defaultFocusedValue), calendar) : calendarDateValue || (date.toCalendar)((date.today)(timeZone), calendar), minValue, maxValue), [
+  let defaultFocusedCalendarDate = (React49.useMemo)(() => ($f62d864046160412$export$4f5203c0d889109e)(props.defaultFocusedValue ? (date.toCalendar)((date.toCalendarDate)(props.defaultFocusedValue), calendar) : calendarDateValue || (date.toCalendar)((date.today)(timeZone), calendar), minValue, maxValue), [
     props.defaultFocusedValue,
     calendarDateValue,
     timeZone,
@@ -2376,7 +2393,7 @@ function $131cf43a05231e1e$export$6d095e787d2b5e1f(props) {
     maxValue
   ]);
   let [focusedDate, setFocusedDate] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(focusedCalendarDate, defaultFocusedCalendarDate, props.onFocusChange);
-  let [startDate, setStartDate] = (React48.useState)(() => {
+  let [startDate, setStartDate] = (React49.useState)(() => {
     switch (selectionAlignment) {
       case "start":
         return ($f62d864046160412$export$144a00ba6044eb9)(focusedDate, visibleDuration, locale, minValue, maxValue);
@@ -2387,8 +2404,8 @@ function $131cf43a05231e1e$export$6d095e787d2b5e1f(props) {
         return ($f62d864046160412$export$f4a51ff076cc9a09)(focusedDate, visibleDuration, locale, minValue, maxValue);
     }
   });
-  let [isFocused, setFocused] = (React48.useState)(props.autoFocus || false);
-  let endDate = (React48.useMemo)(() => {
+  let [isFocused, setFocused] = (React49.useState)(props.autoFocus || false);
+  let endDate = (React49.useMemo)(() => {
     let duration = {
       ...visibleDuration
     };
@@ -2401,7 +2418,7 @@ function $131cf43a05231e1e$export$6d095e787d2b5e1f(props) {
     startDate,
     visibleDuration
   ]);
-  let lastCalendarIdentifier = (React48.useRef)(calendar.identifier);
+  let lastCalendarIdentifier = (React49.useRef)(calendar.identifier);
   if (calendar.identifier !== lastCalendarIdentifier.current) {
     let newFocusedDate = (date.toCalendar)(focusedDate, calendar);
     setStartDate(($f62d864046160412$export$f4a51ff076cc9a09)(newFocusedDate, visibleDuration, locale, minValue, maxValue));
@@ -2431,7 +2448,7 @@ function $131cf43a05231e1e$export$6d095e787d2b5e1f(props) {
         setControlledValue(newValue);
     }
   }
-  let isUnavailable = (React48.useMemo)(() => {
+  let isUnavailable = (React49.useMemo)(() => {
     if (!calendarDateValue)
       return false;
     if (isDateUnavailable && isDateUnavailable(calendarDateValue))
@@ -2618,7 +2635,7 @@ function $9a36b6ba2fb1a7c5$export$9a987164d97ecc90(props) {
     months: 1
   }, minValue, maxValue, ...calendarProps } = props;
   let [value, setValue] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(valueProp, defaultValue || null, onChange);
-  let [anchorDate, setAnchorDateState] = (React48.useState)(null);
+  let [anchorDate, setAnchorDateState] = (React49.useState)(null);
   let alignment = "center";
   if (value && value.start && value.end) {
     let start = ($f62d864046160412$export$f4a51ff076cc9a09)((date.toCalendarDate)(value.start), visibleDuration, locale, minValue, maxValue);
@@ -2628,15 +2645,15 @@ function $9a36b6ba2fb1a7c5$export$9a987164d97ecc90(props) {
     if (value.end.compare(end) > 0)
       alignment = "start";
   }
-  let availableRangeRef = (React48.useRef)(null);
-  let [availableRange, setAvailableRange] = (React48.useState)(null);
-  let min = (React48.useMemo)(() => {
+  let availableRangeRef = (React49.useRef)(null);
+  let [availableRange, setAvailableRange] = (React49.useState)(null);
+  let min = (React49.useMemo)(() => {
     return (date.maxDate)(minValue, availableRange === null || availableRange === void 0 ? void 0 : availableRange.start);
   }, [
     minValue,
     availableRange
   ]);
-  let max = (React48.useMemo)(() => {
+  let max = (React49.useMemo)(() => {
     return (date.minDate)(maxValue, availableRange === null || availableRange === void 0 ? void 0 : availableRange.end);
   }, [
     maxValue,
@@ -2664,7 +2681,7 @@ function $9a36b6ba2fb1a7c5$export$9a987164d97ecc90(props) {
       setAvailableRange(null);
     }
   };
-  let lastVisibleRange = (React48.useRef)(calendar.visibleRange);
+  let lastVisibleRange = (React49.useRef)(calendar.visibleRange);
   if (!(date.isEqualDay)(calendar.visibleRange.start, lastVisibleRange.current.start) || !(date.isEqualDay)(calendar.visibleRange.end, lastVisibleRange.current.end)) {
     updateAvailableRange(anchorDate);
     lastVisibleRange.current = calendar.visibleRange;
@@ -2697,9 +2714,9 @@ function $9a36b6ba2fb1a7c5$export$9a987164d97ecc90(props) {
       setAnchorDate(null);
     }
   };
-  let [isDragging, setDragging] = (React48.useState)(false);
+  let [isDragging, setDragging] = (React49.useState)(false);
   let { isDateUnavailable } = props;
-  let isInvalidSelection = (React48.useMemo)(() => {
+  let isInvalidSelection = (React49.useMemo)(() => {
     if (!value || anchorDate)
       return false;
     if (isDateUnavailable && (isDateUnavailable(value.start) || isDateUnavailable(value.end)))
@@ -2783,7 +2800,7 @@ var init_Badge = __esm({
   "src/typography/Badge.tsx"() {
     exports.Badge = react.forwardRef(
       ({ icon, colorScheme = "grey", children, ...props }, ref) => {
-        return /* @__PURE__ */ React48__namespace.default.createElement(
+        return /* @__PURE__ */ React49__namespace.default.createElement(
           react.Badge,
           {
             colorScheme,
@@ -2791,7 +2808,7 @@ var init_Badge = __esm({
             paddingLeft: icon ? 1 : void 0,
             ref
           },
-          icon && React48__namespace.default.cloneElement(icon, { marginRight: 1 }),
+          icon && React49__namespace.default.cloneElement(icon, { marginRight: 1 }),
           children
         );
       }
@@ -2801,7 +2818,7 @@ var init_Badge = __esm({
 exports.Code = void 0;
 var init_Code = __esm({
   "src/typography/Code.tsx"() {
-    exports.Code = react.forwardRef((props, ref) => /* @__PURE__ */ React48__namespace.default.createElement(react.Code, { ...props, ref }));
+    exports.Code = react.forwardRef((props, ref) => /* @__PURE__ */ React49__namespace.default.createElement(react.Code, { ...props, ref }));
   }
 });
 exports.Heading = void 0;
@@ -2812,7 +2829,7 @@ var init_Heading = __esm({
       as = "h2",
       ...props
     }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Text, { as, textStyle: variant, ...props });
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Text, { as, textStyle: variant, ...props });
     };
   }
 });
@@ -2821,7 +2838,7 @@ var init_Text = __esm({
   "src/typography/Text.tsx"() {
     exports.Text = react.forwardRef(
       ({ variant = "sm", ...props }, ref) => {
-        return /* @__PURE__ */ React48__namespace.default.createElement(react.Text, { ...props, textStyle: variant, ref });
+        return /* @__PURE__ */ React49__namespace.default.createElement(react.Text, { ...props, textStyle: variant, ref });
       }
     );
   }
@@ -2837,7 +2854,7 @@ var init_typography = __esm({
   }
 });
 function CalendarCell({ state: state2, date: date$1, currentMonth }) {
-  const ref = React48.useRef(null);
+  const ref = React49.useRef(null);
   const { cellProps, buttonProps, isSelected, isDisabled, isUnavailable } = reactAria.useCalendarCell({ date: date$1 }, state2, ref);
   const isOutsideMonth = !date.isSameMonth(currentMonth, date$1);
   const styles2 = react.useMultiStyleConfig("Datepicker", {});
@@ -2854,7 +2871,7 @@ function CalendarCell({ state: state2, date: date$1, currentMonth }) {
   if (isOutsideMonth) {
     stateProps["data-unavailable"] = true;
   }
-  return /* @__PURE__ */ React48__namespace.default.createElement(
+  return /* @__PURE__ */ React49__namespace.default.createElement(
     react.Box,
     {
       as: "td",
@@ -2877,7 +2894,7 @@ function CalendarCell({ state: state2, date: date$1, currentMonth }) {
         }
       }
     },
-    /* @__PURE__ */ React48__namespace.default.createElement(
+    /* @__PURE__ */ React49__namespace.default.createElement(
       react.Box,
       {
         as: "button",
@@ -2901,7 +2918,7 @@ var init_utils = __esm({
   "src/datepicker/utils.ts"() {
     init_src();
     useCurrentLocale = () => {
-      const { language } = exports.useTranslation();
+      const { language } = useTranslation();
       switch (language) {
         case "nb":
           return "no";
@@ -2925,7 +2942,7 @@ var init_utils = __esm({
   }
 });
 function CalendarGrid({ state: state2, offset = {} }) {
-  const { language } = exports.useTranslation();
+  const { language } = useTranslation();
   const locale = useCurrentLocale();
   const startDate = state2.visibleRange.start.add(offset);
   const endDate = date.endOfMonth(startDate);
@@ -2939,8 +2956,8 @@ function CalendarGrid({ state: state2, offset = {} }) {
   const weeksInMonth = date.getWeeksInMonth(state2.visibleRange.start, locale);
   const weeksInMonthRange = new Array(weeksInMonth).fill(0).map((_, i) => i);
   const styles2 = react.useMultiStyleConfig("Datepicker", {});
-  return /* @__PURE__ */ React48__namespace.default.createElement("table", { ...gridProps }, /* @__PURE__ */ React48__namespace.default.createElement("thead", { ...headerProps }, /* @__PURE__ */ React48__namespace.default.createElement("tr", null, weekDays[language].map((day, index2) => {
-    return /* @__PURE__ */ React48__namespace.default.createElement(
+  return /* @__PURE__ */ React49__namespace.default.createElement("table", { ...gridProps }, /* @__PURE__ */ React49__namespace.default.createElement("thead", { ...headerProps }, /* @__PURE__ */ React49__namespace.default.createElement("tr", null, weekDays[language].map((day, index2) => {
+    return /* @__PURE__ */ React49__namespace.default.createElement(
       exports.Text,
       {
         as: "th",
@@ -2950,8 +2967,8 @@ function CalendarGrid({ state: state2, offset = {} }) {
       },
       day
     );
-  }))), /* @__PURE__ */ React48__namespace.default.createElement("tbody", null, weeksInMonthRange.map((weekIndex) => /* @__PURE__ */ React48__namespace.default.createElement("tr", { key: weekIndex }, state2.getDatesInWeek(weekIndex, startDate).map(
-    (date, dayIndex) => date ? /* @__PURE__ */ React48__namespace.default.createElement(
+  }))), /* @__PURE__ */ React49__namespace.default.createElement("tbody", null, weeksInMonthRange.map((weekIndex) => /* @__PURE__ */ React49__namespace.default.createElement("tr", { key: weekIndex }, state2.getDatesInWeek(weekIndex, startDate).map(
+    (date, dayIndex) => date ? /* @__PURE__ */ React49__namespace.default.createElement(
       CalendarCell,
       {
         key: dayIndex,
@@ -2959,7 +2976,7 @@ function CalendarGrid({ state: state2, offset = {} }) {
         date,
         currentMonth: startDate
       }
-    ) : /* @__PURE__ */ React48__namespace.default.createElement("td", { key: dayIndex })
+    ) : /* @__PURE__ */ React49__namespace.default.createElement("td", { key: dayIndex })
   )))));
 }
 var weekDays;
@@ -2982,9 +2999,9 @@ function CalendarNavigationButton({
   "aria-label": ariaLabel,
   ...rest
 }) {
-  const ref = React48.useRef(null);
+  const ref = React49.useRef(null);
   const { buttonProps } = reactAria.useButton(rest, ref);
-  return /* @__PURE__ */ React48__namespace.default.createElement(
+  return /* @__PURE__ */ React49__namespace.default.createElement(
     exports.IconButton,
     {
       ...buttonProps,
@@ -3021,7 +3038,7 @@ function CalendarHeader({
   );
   const areAllOtherYearsDisabled = isPreviousYearDisabled && isNextYearDisabled;
   const isYearPickerVisible = showYearNavigation && !areAllOtherYearsDisabled;
-  return /* @__PURE__ */ React48__namespace.default.createElement(react.Flex, { alignItems: "center", paddingBottom: "4", justifyContent: "space-between" }, /* @__PURE__ */ React48__namespace.default.createElement(
+  return /* @__PURE__ */ React49__namespace.default.createElement(react.Flex, { alignItems: "center", paddingBottom: "4", justifyContent: "space-between" }, /* @__PURE__ */ React49__namespace.default.createElement(
     CalendarNavigator,
     {
       title: title ? title : isYearPickerVisible ? monthTitle : monthAndYearTitle,
@@ -3031,7 +3048,7 @@ function CalendarHeader({
       isNextDisabled: !state2.isPreviousVisibleRangeInvalid,
       isPreviousDisabled: !state2.isNextVisibleRangeInvalid
     }
-  ), isYearPickerVisible && /* @__PURE__ */ React48__namespace.default.createElement(
+  ), isYearPickerVisible && /* @__PURE__ */ React49__namespace.default.createElement(
     CalendarNavigator,
     {
       title: jsDate.getFullYear().toString(),
@@ -3059,16 +3076,16 @@ var init_CalendarHeader = __esm({
       onNext,
       isNextDisabled
     }) => {
-      const { t: t2 } = exports.useTranslation();
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Flex, { alignItems: "center", flexGrow: 1 }, /* @__PURE__ */ React48__namespace.default.createElement(
+      const { t: t2 } = useTranslation();
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Flex, { alignItems: "center", flexGrow: 1 }, /* @__PURE__ */ React49__namespace.default.createElement(
         CalendarNavigationButton,
         {
           onPress: onPrevious,
           isDisabled: isPreviousDisabled,
-          icon: /* @__PURE__ */ React48__namespace.default.createElement(sporIconReact.ArrowLeftOutline24Icon, null),
+          icon: /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.ArrowLeftOutline24Icon, null),
           "aria-label": `${t2(texts7.previous)} ${t2(texts7[unit])}`
         }
-      ), /* @__PURE__ */ React48__namespace.default.createElement(
+      ), /* @__PURE__ */ React49__namespace.default.createElement(
         exports.Heading,
         {
           as: "div",
@@ -3079,12 +3096,12 @@ var init_CalendarHeader = __esm({
           textAlign: "center"
         },
         capitalize(title)
-      ), /* @__PURE__ */ React48__namespace.default.createElement(
+      ), /* @__PURE__ */ React49__namespace.default.createElement(
         CalendarNavigationButton,
         {
           onPress: onNext,
           isDisabled: isNextDisabled,
-          icon: /* @__PURE__ */ React48__namespace.default.createElement(sporIconReact.ArrowRightOutline24Icon, null),
+          icon: /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.ArrowRightOutline24Icon, null),
           "aria-label": `${t2(texts7.next)} ${t2(texts7[unit])}`
         }
       ));
@@ -3125,7 +3142,7 @@ function Calendar({ showYearNavigation, ...props }) {
     createCalendar: date.createCalendar
   });
   const { calendarProps } = reactAria.useCalendar(props, state2);
-  return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { ...calendarProps }, /* @__PURE__ */ React48__namespace.default.createElement(CalendarHeader, { state: state2, showYearNavigation }), /* @__PURE__ */ React48__namespace.default.createElement(CalendarGrid, { state: state2 }));
+  return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...calendarProps }, /* @__PURE__ */ React49__namespace.default.createElement(CalendarHeader, { state: state2, showYearNavigation }), /* @__PURE__ */ React49__namespace.default.createElement(CalendarGrid, { state: state2 }));
 }
 var init_Calendar = __esm({
   "src/datepicker/Calendar.tsx"() {
@@ -3140,11 +3157,11 @@ var init_CalendarTriggerButton = __esm({
   "src/datepicker/CalendarTriggerButton.tsx"() {
     init_src();
     CalendarTriggerButton = (props) => {
-      const { t: t2 } = exports.useTranslation();
+      const { t: t2 } = useTranslation();
       const styles2 = react.useMultiStyleConfig("Datepicker", {});
-      const ref = React48.useRef(null);
+      const ref = React49.useRef(null);
       const { buttonProps } = reactAria.useButton(props, ref);
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React49__namespace.default.createElement(
         react.Box,
         {
           ref,
@@ -3154,7 +3171,7 @@ var init_CalendarTriggerButton = __esm({
           sx: styles2.calendarTriggerButton,
           ...buttonProps
         },
-        /* @__PURE__ */ React48__namespace.default.createElement(sporIconReact.CalendarOutline24Icon, null)
+        /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.CalendarOutline24Icon, null)
       ));
     };
     texts8 = createTexts({
@@ -3171,13 +3188,13 @@ var DateTimeSegment, isPaddable;
 var init_DateTimeSegment = __esm({
   "src/datepicker/DateTimeSegment.tsx"() {
     DateTimeSegment = ({ segment, state: state2 }) => {
-      const ref = React48.useRef(null);
+      const ref = React49.useRef(null);
       const { segmentProps } = reactAria.useDateSegment(segment, state2, ref);
       const styles2 = react.useMultiStyleConfig("Datepicker", {
         isPlaceholder: segment.isPlaceholder,
         isEditable: segment.isEditable
       });
-      return /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(
         react.Box,
         {
           ...segmentProps,
@@ -3221,9 +3238,9 @@ function DateField(props) {
     locale,
     createCalendar: createCalendar2
   });
-  const ref = React48.useRef(null);
+  const ref = React49.useRef(null);
   const { fieldProps, labelProps } = reactAria.useDateField(props, state2, ref);
-  return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { minWidth: "6rem" }, props.label && /* @__PURE__ */ React48__namespace.default.createElement(react.FormLabel, { ...props.labelProps, ...labelProps, sx: styles2.inputLabel }, props.label), /* @__PURE__ */ React48__namespace.default.createElement(react.Flex, { ...fieldProps, ref }, state2.segments.map((segment, i) => /* @__PURE__ */ React48__namespace.default.createElement(DateTimeSegment, { key: i, segment, state: state2 }))), /* @__PURE__ */ React48__namespace.default.createElement("input", { type: "hidden", value: (_a6 = state2.value) == null ? void 0 : _a6.toString(), name: props.name }));
+  return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { minWidth: "6rem" }, props.label && /* @__PURE__ */ React49__namespace.default.createElement(react.FormLabel, { ...props.labelProps, ...labelProps, sx: styles2.inputLabel }, props.label), /* @__PURE__ */ React49__namespace.default.createElement(react.Flex, { ...fieldProps, ref }, state2.segments.map((segment, i) => /* @__PURE__ */ React49__namespace.default.createElement(DateTimeSegment, { key: i, segment, state: state2 }))), /* @__PURE__ */ React49__namespace.default.createElement("input", { type: "hidden", value: (_a6 = state2.value) == null ? void 0 : _a6.toString(), name: props.name }));
 }
 var init_DateField = __esm({
   "src/datepicker/DateField.tsx"() {
@@ -3241,7 +3258,7 @@ var init_StyledField = __esm({
           isInvalid: false
         };
         const styles2 = react.useMultiStyleConfig("Datepicker", { variant });
-        return /* @__PURE__ */ React48__namespace.default.createElement(
+        return /* @__PURE__ */ React49__namespace.default.createElement(
           react.Box,
           {
             ...otherProps,
@@ -3270,7 +3287,7 @@ function DatePicker({
     isRequired: props.isRequired ?? (formControlProps == null ? void 0 : formControlProps.isRequired),
     validationState: (formControlProps == null ? void 0 : formControlProps.isInvalid) ? "invalid" : "valid"
   });
-  const ref = React48.useRef(null);
+  const ref = React49.useRef(null);
   const {
     groupProps,
     labelProps,
@@ -3295,7 +3312,7 @@ function DatePicker({
   };
   const hasTrigger = responsiveVariant === "with-trigger";
   const styles2 = react.useMultiStyleConfig("Datepicker", {});
-  return /* @__PURE__ */ React48__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, /* @__PURE__ */ React48__namespace.default.createElement(
+  return /* @__PURE__ */ React49__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, /* @__PURE__ */ React49__namespace.default.createElement(
     react.Popover,
     {
       ...dialogProps,
@@ -3306,7 +3323,7 @@ function DatePicker({
       closeOnEsc: true,
       returnFocusOnClose: true
     },
-    /* @__PURE__ */ React48__namespace.default.createElement(
+    /* @__PURE__ */ React49__namespace.default.createElement(
       react.InputGroup,
       {
         ...groupProps,
@@ -3314,7 +3331,7 @@ function DatePicker({
         width: "auto",
         display: "inline-flex"
       },
-      /* @__PURE__ */ React48__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React48__namespace.default.createElement(
+      /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React49__namespace.default.createElement(
         StyledField,
         {
           variant: responsiveVariant,
@@ -3323,8 +3340,8 @@ function DatePicker({
           paddingX: 3,
           minHeight
         },
-        !hasTrigger && /* @__PURE__ */ React48__namespace.default.createElement(sporIconReact.CalendarOutline24Icon, { marginRight: 2, alignSelf: "center" }),
-        /* @__PURE__ */ React48__namespace.default.createElement(
+        !hasTrigger && /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.CalendarOutline24Icon, { marginRight: 2, alignSelf: "center" }),
+        /* @__PURE__ */ React49__namespace.default.createElement(
           DateField,
           {
             label: props.label,
@@ -3334,18 +3351,18 @@ function DatePicker({
           }
         )
       )),
-      hasTrigger && /* @__PURE__ */ React48__namespace.default.createElement(CalendarTriggerButton, { ...buttonProps })
+      hasTrigger && /* @__PURE__ */ React49__namespace.default.createElement(CalendarTriggerButton, { ...buttonProps })
     ),
-    /* @__PURE__ */ React48__namespace.default.createElement(exports.FormErrorMessage, { ...errorMessageProps }, errorMessage),
-    state2.isOpen && !props.isDisabled && /* @__PURE__ */ React48__namespace.default.createElement(react.Portal, null, /* @__PURE__ */ React48__namespace.default.createElement(
+    /* @__PURE__ */ React49__namespace.default.createElement(exports.FormErrorMessage, { ...errorMessageProps }, errorMessage),
+    state2.isOpen && !props.isDisabled && /* @__PURE__ */ React49__namespace.default.createElement(react.Portal, null, /* @__PURE__ */ React49__namespace.default.createElement(
       react.PopoverContent,
       {
         color: "darkGrey",
         boxShadow: "md",
         sx: styles2.calendar
       },
-      /* @__PURE__ */ React48__namespace.default.createElement(react.PopoverArrow, { sx: styles2.arrow }),
-      /* @__PURE__ */ React48__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React48__namespace.default.createElement(
+      /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverArrow, { sx: styles2.arrow }),
+      /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React49__namespace.default.createElement(
         Calendar,
         {
           ...calendarProps,
@@ -3374,9 +3391,9 @@ function RangeCalendar(props) {
     locale,
     createCalendar: date.createCalendar
   });
-  const ref = React48.useRef(null);
+  const ref = React49.useRef(null);
   const { calendarProps, title } = reactAria.useRangeCalendar(props, state2, ref);
-  return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { ...calendarProps, ref }, /* @__PURE__ */ React48__namespace.default.createElement(CalendarHeader, { state: state2, title }), /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { display: "flex", gap: "8" }, /* @__PURE__ */ React48__namespace.default.createElement(CalendarGrid, { state: state2 }), /* @__PURE__ */ React48__namespace.default.createElement(CalendarGrid, { state: state2, offset: { months: 1 } })));
+  return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...calendarProps, ref }, /* @__PURE__ */ React49__namespace.default.createElement(CalendarHeader, { state: state2, title }), /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { display: "flex", gap: "8" }, /* @__PURE__ */ React49__namespace.default.createElement(CalendarGrid, { state: state2 }), /* @__PURE__ */ React49__namespace.default.createElement(CalendarGrid, { state: state2, offset: { months: 1 } })));
 }
 var init_RangeCalendar = __esm({
   "src/datepicker/RangeCalendar.tsx"() {
@@ -3400,7 +3417,7 @@ function DateRangePicker({
     isRequired: props.isRequired ?? (formControlProps == null ? void 0 : formControlProps.isRequired),
     validationState: formControlProps.isInvalid ? "invalid" : "valid"
   });
-  const ref = React48.useRef(null);
+  const ref = React49.useRef(null);
   const {
     groupProps,
     labelProps,
@@ -3427,7 +3444,7 @@ function DateRangePicker({
     }
   };
   const hasTrigger = responsiveVariant === "with-trigger";
-  return /* @__PURE__ */ React48__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, props.label && /* @__PURE__ */ React48__namespace.default.createElement(react.FormLabel, { ...labelProps, sx: styles2.inputLabel }, props.label), /* @__PURE__ */ React48__namespace.default.createElement(
+  return /* @__PURE__ */ React49__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, props.label && /* @__PURE__ */ React49__namespace.default.createElement(react.FormLabel, { ...labelProps, sx: styles2.inputLabel }, props.label), /* @__PURE__ */ React49__namespace.default.createElement(
     react.Popover,
     {
       ...dialogProps,
@@ -3437,7 +3454,7 @@ function DateRangePicker({
       closeOnEsc: true,
       returnFocusOnClose: true
     },
-    /* @__PURE__ */ React48__namespace.default.createElement(
+    /* @__PURE__ */ React49__namespace.default.createElement(
       react.InputGroup,
       {
         ...groupProps,
@@ -3445,7 +3462,7 @@ function DateRangePicker({
         width: "auto",
         display: "inline-flex"
       },
-      /* @__PURE__ */ React48__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React48__namespace.default.createElement(
+      /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React49__namespace.default.createElement(
         StyledField,
         {
           alignItems: "center",
@@ -3455,8 +3472,8 @@ function DateRangePicker({
           onKeyPress: handleEnterClick,
           minHeight
         },
-        !hasTrigger && /* @__PURE__ */ React48__namespace.default.createElement(sporIconReact.CalendarOutline24Icon, { mr: 2, alignSelf: "center" }),
-        /* @__PURE__ */ React48__namespace.default.createElement(
+        !hasTrigger && /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.CalendarOutline24Icon, { mr: 2, alignSelf: "center" }),
+        /* @__PURE__ */ React49__namespace.default.createElement(
           DateField,
           {
             ...startFieldProps,
@@ -3465,8 +3482,8 @@ function DateRangePicker({
             labelProps
           }
         ),
-        /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { as: "span", "aria-hidden": "true", px: "2" }, "\u2013"),
-        /* @__PURE__ */ React48__namespace.default.createElement(
+        /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { as: "span", "aria-hidden": "true", px: "2" }, "\u2013"),
+        /* @__PURE__ */ React49__namespace.default.createElement(
           DateField,
           {
             ...endFieldProps,
@@ -3476,17 +3493,17 @@ function DateRangePicker({
           }
         )
       )),
-      hasTrigger && /* @__PURE__ */ React48__namespace.default.createElement(CalendarTriggerButton, { ...buttonProps })
+      hasTrigger && /* @__PURE__ */ React49__namespace.default.createElement(CalendarTriggerButton, { ...buttonProps })
     ),
-    state2.isOpen && /* @__PURE__ */ React48__namespace.default.createElement(react.Portal, null, /* @__PURE__ */ React48__namespace.default.createElement(
+    state2.isOpen && /* @__PURE__ */ React49__namespace.default.createElement(react.Portal, null, /* @__PURE__ */ React49__namespace.default.createElement(
       react.PopoverContent,
       {
         sx: styles2.calendar,
         boxShadow: "md",
         maxWidth: "none"
       },
-      /* @__PURE__ */ React48__namespace.default.createElement(react.PopoverArrow, { sx: styles2.arrow }),
-      /* @__PURE__ */ React48__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React48__namespace.default.createElement(RangeCalendar, { ...calendarProps }))
+      /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverArrow, { sx: styles2.arrow }),
+      /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React49__namespace.default.createElement(RangeCalendar, { ...calendarProps }))
     ))
   )));
 }
@@ -3507,9 +3524,9 @@ var init_TimeField = __esm({
     init_DateTimeSegment();
     init_utils();
     TimeField = ({ state: state2, ...props }) => {
-      const ref = React48.useRef(null);
+      const ref = React49.useRef(null);
       const { labelProps, fieldProps } = reactAria.useTimeField(props, state2, ref);
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, null, /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, null, /* @__PURE__ */ React49__namespace.default.createElement(
         exports.FormLabel,
         {
           ...labelProps,
@@ -3518,7 +3535,7 @@ var init_TimeField = __esm({
           fontSize: "mobile.xs"
         },
         props.label
-      ), /* @__PURE__ */ React48__namespace.default.createElement(react.Flex, { ...fieldProps, ref }, state2.segments.map((segment) => /* @__PURE__ */ React48__namespace.default.createElement(DateTimeSegment, { key: segment.type, segment, state: state2 }))), /* @__PURE__ */ React48__namespace.default.createElement(
+      ), /* @__PURE__ */ React49__namespace.default.createElement(react.Flex, { ...fieldProps, ref }, state2.segments.map((segment) => /* @__PURE__ */ React49__namespace.default.createElement(DateTimeSegment, { key: segment.type, segment, state: state2 }))), /* @__PURE__ */ React49__namespace.default.createElement(
         "input",
         {
           type: "hidden",
@@ -3549,7 +3566,7 @@ var init_TimePicker = __esm({
     }) => {
       const { isDisabled: isFormControlDisabled, isInvalid: isFormControlInvalid } = react.useFormControlContext() ?? {};
       const isDisabled = isDisabledExternally ?? isFormControlDisabled ?? false;
-      const { t: t2 } = exports.useTranslation();
+      const { t: t2 } = useTranslation();
       const locale = useCurrentLocale();
       const label = externalLabel ?? t2(texts9.time);
       const state2 = reactStately.useTimeFieldState({
@@ -3594,7 +3611,7 @@ var init_TimePicker = __esm({
       const ariaLabel = `${inputLabel} \u2013 ${t2(
         texts9.selectedTimeIs(`${(dateTime == null ? void 0 : dateTime.hour) ?? 0} ${(dateTime == null ? void 0 : dateTime.minute) ?? 0}`)
       )}`;
-      return /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(
         StyledField,
         {
           variant: "simple",
@@ -3610,7 +3627,7 @@ var init_TimePicker = __esm({
           "aria-label": ariaLabel,
           ...boxProps
         },
-        /* @__PURE__ */ React48__namespace.default.createElement(
+        /* @__PURE__ */ React49__namespace.default.createElement(
           exports.IconButton,
           {
             variant: "ghost",
@@ -3618,14 +3635,14 @@ var init_TimePicker = __esm({
             borderRadius: "xs",
             "aria-label": backwardsLabel,
             title: backwardsLabel,
-            icon: /* @__PURE__ */ React48__namespace.default.createElement(sporIconReact.DropdownLeftFill24Icon, null),
+            icon: /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.DropdownLeftFill24Icon, null),
             onClick: handleBackwardsClick,
             isDisabled,
             style: isDisabled ? { backgroundColor: "transparent" } : {}
           }
         ),
-        /* @__PURE__ */ React48__namespace.default.createElement(TimeField, { label, state: state2, name }),
-        /* @__PURE__ */ React48__namespace.default.createElement(
+        /* @__PURE__ */ React49__namespace.default.createElement(TimeField, { label, state: state2, name }),
+        /* @__PURE__ */ React49__namespace.default.createElement(
           exports.IconButton,
           {
             variant: "ghost",
@@ -3633,7 +3650,7 @@ var init_TimePicker = __esm({
             borderRadius: "xs",
             "aria-label": forwardsLabel,
             title: forwardsLabel,
-            icon: /* @__PURE__ */ React48__namespace.default.createElement(sporIconReact.DropdownRightFill24Icon, null),
+            icon: /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.DropdownRightFill24Icon, null),
             onClick: handleForwardClick,
             isDisabled,
             style: isDisabled ? { backgroundColor: "transparent" } : {}
@@ -3719,7 +3736,7 @@ var init_AttachedInputs = __esm({
         }
       };
       const direction2 = flexDirection === "row" ? "horizontal" : "vertical";
-      return /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(
         react.Flex,
         {
           role: "group",
@@ -3736,9 +3753,9 @@ var Dialog;
 var init_Dialog = __esm({
   "src/input/Dialog.tsx"() {
     Dialog = ({ title, children, ...props }) => {
-      const ref = React48.useRef(null);
+      const ref = React49.useRef(null);
       const { dialogProps, titleProps } = reactAria.useDialog(props, ref);
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { ...dialogProps, ref, outline: "none" }, title && /* @__PURE__ */ React48__namespace.default.createElement(react.Heading, { as: "h3", ...titleProps }, title), children);
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...dialogProps, ref, outline: "none" }, title && /* @__PURE__ */ React49__namespace.default.createElement(react.Heading, { as: "h3", ...titleProps }, title), children);
     };
   }
 });
@@ -3754,7 +3771,7 @@ var init_Popover = __esm({
       placement = "bottom"
     }) => {
       var _a6;
-      const popoverRef = React48.useRef(null);
+      const popoverRef = React49.useRef(null);
       const { popoverProps, underlayProps } = reactAria.usePopover(
         {
           triggerRef,
@@ -3765,23 +3782,23 @@ var init_Popover = __esm({
         },
         state2
       );
-      return /* @__PURE__ */ React48__namespace.default.createElement(reactAria.Overlay, null, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { ...underlayProps, position: "fixed", inset: "0" }), /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(reactAria.Overlay, null, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...underlayProps, position: "fixed", inset: "0" }), /* @__PURE__ */ React49__namespace.default.createElement(
         react.Box,
         {
           ...popoverProps,
           ref: popoverRef,
           minWidth: ((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? "auto"
         },
-        /* @__PURE__ */ React48__namespace.default.createElement(reactAria.DismissButton, { onDismiss: state2.close }),
+        /* @__PURE__ */ React49__namespace.default.createElement(reactAria.DismissButton, { onDismiss: state2.close }),
         children,
-        /* @__PURE__ */ React48__namespace.default.createElement(reactAria.DismissButton, { onDismiss: state2.close })
+        /* @__PURE__ */ React49__namespace.default.createElement(reactAria.DismissButton, { onDismiss: state2.close })
       ));
     };
   }
 });
 function useForceRerender(shouldRerender) {
-  const [_, update] = React48.useState(false);
-  React48.useEffect(() => {
+  const [_, update] = React49.useState(false);
+  React49.useEffect(() => {
     if (shouldRerender) {
       update((x) => !x);
     }
@@ -3809,7 +3826,7 @@ var init_CardSelect = __esm({
         withChevron = true,
         ...props
       }, externalRef) => {
-        const internalRef = React48.useRef(null);
+        const internalRef = React49.useRef(null);
         const triggerRef = externalRef ?? internalRef;
         const state2 = reactStately.useOverlayTriggerState({
           isOpen: externalIsOpen,
@@ -3825,7 +3842,7 @@ var init_CardSelect = __esm({
         const styles2 = react.useMultiStyleConfig("CardSelect", { variant, size: size2 });
         useForceRerender(state2.isOpen);
         const ChevronIcon = size2 === "sm" ? sporIconReact.DropdownDownFill18Icon : sporIconReact.DropdownDownFill24Icon;
-        return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { ...props }, /* @__PURE__ */ React48__namespace.default.createElement(
+        return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...props }, /* @__PURE__ */ React49__namespace.default.createElement(
           react.chakra.button,
           {
             type: "button",
@@ -3835,13 +3852,13 @@ var init_CardSelect = __esm({
             width,
             "data-attachable": true
           },
-          /* @__PURE__ */ React48__namespace.default.createElement(react.Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { as: "span" }, label), withChevron ? /* @__PURE__ */ React48__namespace.default.createElement(
+          /* @__PURE__ */ React49__namespace.default.createElement(react.Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { as: "span" }, label), withChevron ? /* @__PURE__ */ React49__namespace.default.createElement(
             ChevronIcon,
             {
               transform: state2.isOpen ? "rotate(180deg)" : "none"
             }
           ) : null)
-        ), state2.isOpen && /* @__PURE__ */ React48__namespace.default.createElement(
+        ), state2.isOpen && /* @__PURE__ */ React49__namespace.default.createElement(
           Popover3,
           {
             state: state2,
@@ -3850,7 +3867,7 @@ var init_CardSelect = __esm({
             crossOffset,
             placement
           },
-          /* @__PURE__ */ React48__namespace.default.createElement(
+          /* @__PURE__ */ React49__namespace.default.createElement(
             exports.Card,
             {
               colorScheme: "white",
@@ -3858,7 +3875,7 @@ var init_CardSelect = __esm({
               sx: styles2.card,
               ...overlayProps
             },
-            /* @__PURE__ */ React48__namespace.default.createElement(Dialog, { "aria-label": label }, children)
+            /* @__PURE__ */ React49__namespace.default.createElement(Dialog, { "aria-label": label }, children)
           )
         ));
       }
@@ -3869,7 +3886,7 @@ exports.Checkbox = void 0;
 var init_Checkbox = __esm({
   "src/input/Checkbox.tsx"() {
     exports.Checkbox = react.forwardRef((props, ref) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Checkbox, { ...props, ref });
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Checkbox, { ...props, ref });
     });
   }
 });
@@ -3881,7 +3898,7 @@ var init_CheckboxGroup = __esm({
       children,
       ...props
     }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.CheckboxGroup, { ...props }, /* @__PURE__ */ React48__namespace.default.createElement(react.Stack, { direction: direction2 }, children));
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.CheckboxGroup, { ...props }, /* @__PURE__ */ React49__namespace.default.createElement(react.Stack, { direction: direction2 }, children));
     };
   }
 });
@@ -4654,16 +4671,16 @@ var init_ChoiceChip = __esm({
         icon,
         hasLabel: Boolean(children)
       });
-      const id = `choice-chip-${React48.useId()}`;
-      return /* @__PURE__ */ React48__namespace.default.createElement(
+      const id = `choice-chip-${React49.useId()}`;
+      return /* @__PURE__ */ React49__namespace.default.createElement(
         react.chakra.label,
         {
           htmlFor: id,
           ...getRootProps(),
           "aria-label": String(children)
         },
-        /* @__PURE__ */ React48__namespace.default.createElement(react.chakra.input, { ...getInputProps({}, ref), id }),
-        /* @__PURE__ */ React48__namespace.default.createElement(
+        /* @__PURE__ */ React49__namespace.default.createElement(react.chakra.input, { ...getInputProps({}, ref), id }),
+        /* @__PURE__ */ React49__namespace.default.createElement(
           react.chakra.div,
           {
             ...getLabelProps(),
@@ -4672,9 +4689,9 @@ var init_ChoiceChip = __esm({
             "data-hover": dataAttr(state2.isHovered),
             "data-focus": dataAttr(state2.isFocused)
           },
-          icon && /* @__PURE__ */ React48__namespace.default.createElement(react.chakra.span, { __css: styles2.icon }, state2.isChecked ? icon.checked : icon.default),
-          /* @__PURE__ */ React48__namespace.default.createElement(react.chakra.span, { __css: styles2.label, ...getCheckboxProps() }, variant !== "icon" && children),
-          variant === "filter" && state2.isChecked && /* @__PURE__ */ React48__namespace.default.createElement(sporIconReact.CloseOutline24Icon, { ml: 1.5 })
+          icon && /* @__PURE__ */ React49__namespace.default.createElement(react.chakra.span, { __css: styles2.icon }, state2.isChecked ? icon.checked : icon.default),
+          /* @__PURE__ */ React49__namespace.default.createElement(react.chakra.span, { __css: styles2.label, ...getCheckboxProps() }, variant !== "icon" && children),
+          variant === "filter" && state2.isChecked && /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.CloseOutline24Icon, { ml: 1.5 })
         )
       );
     });
@@ -4749,7 +4766,7 @@ var init_focus_utils = __esm({
     });
   }
 });
-function Counter({
+function NumericStepper({
   name: nameProp,
   id: idProp,
   value: valueProp,
@@ -4760,7 +4777,7 @@ function Counter({
   isDisabled,
   ...boxProps
 }) {
-  const { t: t2 } = exports.useTranslation();
+  const { t: t2 } = useTranslation();
   const [value, onChange] = react.useControllableState({
     value: valueProp,
     onChange: onChangeProp,
@@ -4770,16 +4787,16 @@ function Counter({
   const textColor = react.useColorModeValue("darkGrey", "white");
   const backgroundColor = react.useColorModeValue("white", "darkGrey");
   const focusColor = react.useColorModeValue("greenHaze", "azure");
-  return /* @__PURE__ */ React48__namespace.default.createElement(react.Flex, { alignItems: "center", ...boxProps }, /* @__PURE__ */ React48__namespace.default.createElement(
+  return /* @__PURE__ */ React49__namespace.default.createElement(react.Flex, { alignItems: "center", ...boxProps }, /* @__PURE__ */ React49__namespace.default.createElement(
     VerySmallButton,
     {
-      icon: /* @__PURE__ */ React48__namespace.default.createElement(SubtractIcon, { color: "white" }),
+      icon: /* @__PURE__ */ React49__namespace.default.createElement(SubtractIcon, { color: "white" }),
       "aria-label": t2(texts10.decrementButtonAriaLabel),
       onClick: () => onChange(value - 1),
       visibility: value <= minValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled
     }
-  ), /* @__PURE__ */ React48__namespace.default.createElement(
+  ), /* @__PURE__ */ React49__namespace.default.createElement(
     react.chakra.input,
     {
       type: "number",
@@ -4797,7 +4814,10 @@ function Counter({
       textAlign: "center",
       backgroundColor,
       color: textColor,
-      transition: "all .1s ease-out",
+      transition: "box-shadow .1s ease-out",
+      visibility: value === 0 ? "hidden" : "visible",
+      "aria-live": "assertive",
+      "aria-label": value.toString(),
       _hover: {
         boxShadow: getBoxShadowString({
           borderColor: "currentColor",
@@ -4825,10 +4845,10 @@ function Counter({
         onChange(numericInput);
       }
     }
-  ), /* @__PURE__ */ React48__namespace.default.createElement(
+  ), /* @__PURE__ */ React49__namespace.default.createElement(
     VerySmallButton,
     {
-      icon: /* @__PURE__ */ React48__namespace.default.createElement(AddIcon, { color: "white" }),
+      icon: /* @__PURE__ */ React49__namespace.default.createElement(AddIcon, { color: "white" }),
       "aria-label": t2(texts10.incrementButtonAriaLabel),
       onClick: () => onChange(value + 1),
       visibility: value >= maxValue ? "hidden" : "visible",
@@ -4837,13 +4857,13 @@ function Counter({
   ));
 }
 var VerySmallButton, SubtractIcon, AddIcon, texts10;
-var init_Counter = __esm({
-  "src/input/Counter.tsx"() {
+var init_NumericStepper = __esm({
+  "src/input/NumericStepper.tsx"() {
     init_src();
     init_box_shadow_utils();
     init_focus_utils();
     VerySmallButton = (props) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(
         exports.IconButton,
         {
           variant: "primary",
@@ -4860,7 +4880,7 @@ var init_Counter = __esm({
         }
       );
     };
-    SubtractIcon = (props) => /* @__PURE__ */ React48__namespace.default.createElement(
+    SubtractIcon = (props) => /* @__PURE__ */ React49__namespace.default.createElement(
       react.Box,
       {
         as: "svg",
@@ -4870,7 +4890,7 @@ var init_Counter = __esm({
         stroke: "currentColor",
         ...props
       },
-      /* @__PURE__ */ React48__namespace.default.createElement(
+      /* @__PURE__ */ React49__namespace.default.createElement(
         "line",
         {
           x1: "9",
@@ -4882,7 +4902,7 @@ var init_Counter = __esm({
         }
       )
     );
-    AddIcon = (props) => /* @__PURE__ */ React48__namespace.default.createElement(
+    AddIcon = (props) => /* @__PURE__ */ React49__namespace.default.createElement(
       react.Box,
       {
         as: "svg",
@@ -4892,7 +4912,7 @@ var init_Counter = __esm({
         stroke: "currentColor",
         ...props
       },
-      /* @__PURE__ */ React48__namespace.default.createElement(
+      /* @__PURE__ */ React49__namespace.default.createElement(
         "line",
         {
           x1: "9",
@@ -4903,7 +4923,7 @@ var init_Counter = __esm({
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ React48__namespace.default.createElement(
+      /* @__PURE__ */ React49__namespace.default.createElement(
         "line",
         {
           x1: "15",
@@ -4935,7 +4955,7 @@ exports.FormControl = void 0;
 var init_FormControl = __esm({
   "src/input/FormControl.tsx"() {
     exports.FormControl = react.forwardRef((props, ref) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.FormControl, { ...props, ref });
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.FormControl, { ...props, ref });
     });
   }
 });
@@ -4956,7 +4976,7 @@ var init_FormErrorMessage = __esm({
         return null;
       }
       const { ref, ...errorMessageProps } = formControlContext.getErrorMessageProps();
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { position: "relative", ref }, /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { position: "relative", ref }, /* @__PURE__ */ React49__namespace.default.createElement(
         react.Box,
         {
           borderRadius: "xs",
@@ -4974,12 +4994,12 @@ var init_FormErrorMessage = __esm({
           ...errorMessageProps,
           ...boxProps
         },
-        /* @__PURE__ */ React48__namespace.default.createElement(Arrow, { position: "absolute", top: "-0.25em", left: "1em" }),
+        /* @__PURE__ */ React49__namespace.default.createElement(Arrow, { position: "absolute", top: "-0.25em", left: "1em" }),
         children
       ));
     };
     Arrow = (props) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(
         react.Box,
         {
           ...props,
@@ -4990,7 +5010,7 @@ var init_FormErrorMessage = __esm({
           fill: "none",
           transform: "rotate(45deg)"
         },
-        /* @__PURE__ */ React48__namespace.default.createElement(
+        /* @__PURE__ */ React49__namespace.default.createElement(
           react.Box,
           {
             as: "path",
@@ -5006,21 +5026,21 @@ exports.FormLabel = void 0;
 var init_FormLabel = __esm({
   "src/input/FormLabel.tsx"() {
     exports.FormLabel = react.forwardRef((props, ref) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.FormLabel, { ...props, ref });
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.FormLabel, { ...props, ref });
     });
   }
 });
 function SelectItemLabel({ children }) {
   let { labelProps } = useOptionContext();
   const styles2 = react.useMultiStyleConfig("ListBox", {});
-  return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { ...labelProps, sx: styles2.label }, children);
+  return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...labelProps, sx: styles2.label }, children);
 }
 function SelectItemDescription({
   children
 }) {
   let { descriptionProps } = useOptionContext();
   const styles2 = react.useMultiStyleConfig("ListBox", {});
-  return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { ...descriptionProps, sx: styles2.description }, children);
+  return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...descriptionProps, sx: styles2.description }, children);
 }
 exports.ListBox = void 0; var OptionContext, useOptionContext, Option;
 var init_ListBox = __esm({
@@ -5028,10 +5048,10 @@ var init_ListBox = __esm({
     exports.ListBox = react.forwardRef((props, ref) => {
       const { state: state2, listBoxOptions, ...rest } = props;
       const styles2 = react.useMultiStyleConfig("ListBox", {});
-      const internalRef = React48.useRef(null);
+      const internalRef = React49.useRef(null);
       const listBoxRef = ref ?? internalRef;
       const { listBoxProps } = reactAria.useListBox(listBoxOptions, state2, listBoxRef);
-      return /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(
         react.Box,
         {
           as: "ul",
@@ -5040,25 +5060,25 @@ var init_ListBox = __esm({
           ref: listBoxRef,
           ...rest
         },
-        Array.from(state2.collection).map((item) => /* @__PURE__ */ React48__namespace.default.createElement(Option, { key: item.key, item, state: state2 }))
+        Array.from(state2.collection).map((item) => /* @__PURE__ */ React49__namespace.default.createElement(Option, { key: item.key, item, state: state2 }))
       );
     });
-    OptionContext = React48__namespace.default.createContext({
+    OptionContext = React49__namespace.default.createContext({
       labelProps: {},
       descriptionProps: {}
     });
     useOptionContext = () => {
-      return React48.useContext(OptionContext);
+      return React49.useContext(OptionContext);
     };
     Option = ({ item, state: state2 }) => {
-      const ref = React48.useRef(null);
+      const ref = React49.useRef(null);
       const styles2 = react.useMultiStyleConfig("ListBox", {});
       const { optionProps, labelProps, descriptionProps } = reactAria.useOption(
         { key: item.key },
         state2,
         ref
       );
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.chakra.li, { ...optionProps, ref, sx: styles2.item }, /* @__PURE__ */ React48__namespace.default.createElement(OptionContext.Provider, { value: { labelProps, descriptionProps } }, item.rendered));
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.chakra.li, { ...optionProps, ref, sx: styles2.item }, /* @__PURE__ */ React49__namespace.default.createElement(OptionContext.Provider, { value: { labelProps, descriptionProps } }, item.rendered));
     };
   }
 });
@@ -5079,7 +5099,7 @@ function InfoSelect({
     ...props
   };
   const state2 = reactStately.useSelectState(renamedProps);
-  const triggerRef = React48.useRef(null);
+  const triggerRef = React49.useRef(null);
   const { labelProps, triggerProps, valueProps, menuProps } = reactAria.useSelect(
     renamedProps,
     state2,
@@ -5090,9 +5110,9 @@ function InfoSelect({
     isLabelSrOnly
   });
   const { buttonProps } = reactAria.useButton(triggerProps, triggerRef);
-  const { t: t2 } = exports.useTranslation();
+  const { t: t2 } = useTranslation();
   const formControl = react.useFormControlProps(props);
-  return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { sx: styles2.container }, /* @__PURE__ */ React48__namespace.default.createElement(react.chakra.div, { ...labelProps, sx: styles2.label }, props.label), /* @__PURE__ */ React48__namespace.default.createElement(
+  return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { sx: styles2.container }, /* @__PURE__ */ React49__namespace.default.createElement(react.chakra.div, { ...labelProps, sx: styles2.label }, props.label), /* @__PURE__ */ React49__namespace.default.createElement(
     reactAria.HiddenSelect,
     {
       state: state2,
@@ -5100,7 +5120,7 @@ function InfoSelect({
       label: props.label,
       name: props.name
     }
-  ), /* @__PURE__ */ React48__namespace.default.createElement(
+  ), /* @__PURE__ */ React49__namespace.default.createElement(
     react.chakra.button,
     {
       type: "button",
@@ -5113,9 +5133,9 @@ function InfoSelect({
       "aria-invalid": formControl.isInvalid,
       "aria-describedby": formControl["aria-describedby"]
     },
-    /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts11.selectAnOption)),
-    /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { sx: styles2.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React48__namespace.default.createElement(sporIconReact.DropdownUpFill24Icon, null) : /* @__PURE__ */ React48__namespace.default.createElement(sporIconReact.DropdownDownFill24Icon, null))
-  ), state2.isOpen && /* @__PURE__ */ React48__namespace.default.createElement(Popover3, { state: state2, triggerRef }, /* @__PURE__ */ React48__namespace.default.createElement(
+    /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts11.selectAnOption)),
+    /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { sx: styles2.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.DropdownUpFill24Icon, null) : /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.DropdownDownFill24Icon, null))
+  ), state2.isOpen && /* @__PURE__ */ React49__namespace.default.createElement(Popover3, { state: state2, triggerRef }, /* @__PURE__ */ React49__namespace.default.createElement(
     exports.ListBox,
     {
       listBoxOptions: menuProps,
@@ -5146,9 +5166,9 @@ var init_Input = __esm({
     exports.Input = react.forwardRef(
       ({ label, leftIcon, rightIcon, id, ...props }, ref) => {
         const formControlProps = react.useFormControlContext();
-        const fallbackId = `input-${React48.useId()}`;
+        const fallbackId = `input-${React49.useId()}`;
         const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
-        return /* @__PURE__ */ React48__namespace.default.createElement(react.InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React48__namespace.default.createElement(react.InputLeftElement, null, leftIcon), /* @__PURE__ */ React48__namespace.default.createElement(
+        return /* @__PURE__ */ React49__namespace.default.createElement(react.InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React49__namespace.default.createElement(react.InputLeftElement, null, leftIcon), /* @__PURE__ */ React49__namespace.default.createElement(
           react.Input,
           {
             "data-attachable": true,
@@ -5159,7 +5179,7 @@ var init_Input = __esm({
             ref,
             placeholder: " "
           }
-        ), /* @__PURE__ */ React48__namespace.default.createElement(react.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label), rightIcon && /* @__PURE__ */ React48__namespace.default.createElement(react.InputRightElement, null, rightIcon));
+        ), /* @__PURE__ */ React49__namespace.default.createElement(react.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label), rightIcon && /* @__PURE__ */ React49__namespace.default.createElement(react.InputRightElement, null, rightIcon));
       }
     );
   }
@@ -5168,10 +5188,10 @@ exports.InputLeftElement = void 0; exports.InputRightElement = void 0;
 var init_InputElement = __esm({
   "src/input/InputElement.tsx"() {
     exports.InputLeftElement = react.forwardRef(
-      (props, ref) => /* @__PURE__ */ React48__namespace.default.createElement(react.InputLeftElement, { ...props, ref })
+      (props, ref) => /* @__PURE__ */ React49__namespace.default.createElement(react.InputLeftElement, { ...props, ref })
     );
     exports.InputRightElement = react.forwardRef(
-      (props, ref) => /* @__PURE__ */ React48__namespace.default.createElement(react.InputRightElement, { ...props, ref })
+      (props, ref) => /* @__PURE__ */ React49__namespace.default.createElement(react.InputRightElement, { ...props, ref })
     );
   }
 });
@@ -5182,7 +5202,7 @@ var init_NativeSelect = __esm({
     exports.NativeSelect = react.forwardRef(
       ({ label, ...props }, ref) => {
         const styles2 = react.useMultiStyleConfig("Select", props);
-        return /* @__PURE__ */ React48__namespace.default.createElement(exports.FormControl, null, /* @__PURE__ */ React48__namespace.default.createElement(
+        return /* @__PURE__ */ React49__namespace.default.createElement(exports.FormControl, null, /* @__PURE__ */ React49__namespace.default.createElement(
           react.Select,
           {
             "data-attachable": true,
@@ -5190,7 +5210,7 @@ var init_NativeSelect = __esm({
             rootProps: { __css: styles2.root },
             ref
           }
-        ), label && /* @__PURE__ */ React48__namespace.default.createElement(exports.FormLabel, null, label));
+        ), label && /* @__PURE__ */ React49__namespace.default.createElement(exports.FormLabel, null, label));
       }
     );
   }
@@ -5203,11 +5223,11 @@ var init_PasswordInput = __esm({
     exports.PasswordInput = react.forwardRef(
       ({ leftIcon, id, label, ...props }, ref) => {
         const { isOpen: isShowingPassword, onToggle } = react.useDisclosure();
-        const { t: t2 } = exports.useTranslation();
+        const { t: t2 } = useTranslation();
         const formControlProps = react.useFormControlContext();
-        const autoGeneratedId = `password-input-${React48.useId()}`;
+        const autoGeneratedId = `password-input-${React49.useId()}`;
         const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? autoGeneratedId;
-        return /* @__PURE__ */ React48__namespace.default.createElement(react.InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React48__namespace.default.createElement(exports.InputLeftElement, null, leftIcon), /* @__PURE__ */ React48__namespace.default.createElement(
+        return /* @__PURE__ */ React49__namespace.default.createElement(react.InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React49__namespace.default.createElement(exports.InputLeftElement, null, leftIcon), /* @__PURE__ */ React49__namespace.default.createElement(
           react.Input,
           {
             ...props,
@@ -5219,7 +5239,7 @@ var init_PasswordInput = __esm({
             ref,
             "data-attachable": true
           }
-        ), /* @__PURE__ */ React48__namespace.default.createElement(exports.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label), /* @__PURE__ */ React48__namespace.default.createElement(exports.InputRightElement, { width: "fit-content" }, /* @__PURE__ */ React48__namespace.default.createElement(
+        ), /* @__PURE__ */ React49__namespace.default.createElement(exports.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label), /* @__PURE__ */ React49__namespace.default.createElement(exports.InputRightElement, { width: "fit-content" }, /* @__PURE__ */ React49__namespace.default.createElement(
           react.Button,
           {
             variant: "ghost",
@@ -11875,8 +11895,8 @@ var init_CountryCodeSelect = __esm({
     );
     callingCodes = [...prioritizedCountryCodes, ...sortedCallingCodes];
     CountryCodeSelect = (props) => {
-      const { t: t2 } = exports.useTranslation();
-      return /* @__PURE__ */ React48__namespace.default.createElement(
+      const { t: t2 } = useTranslation();
+      return /* @__PURE__ */ React49__namespace.default.createElement(
         InfoSelect,
         {
           label: t2(texts13.countryCode),
@@ -11884,7 +11904,7 @@ var init_CountryCodeSelect = __esm({
           items: callingCodes,
           ...props
         },
-        (item) => /* @__PURE__ */ React48__namespace.default.createElement(reactStately.Item, { key: item.key }, item.key)
+        (item) => /* @__PURE__ */ React49__namespace.default.createElement(reactStately.Item, { key: item.key }, item.key)
       );
     };
     CountryCodeSelect_default = CountryCodeSelect;
@@ -11905,7 +11925,7 @@ var init_PhoneNumberInput = __esm({
     init_AttachedInputs();
     exports.PhoneNumberInput = react.forwardRef(
       ({ name, value: externalValue, onChange: externalOnChange, ...boxProps }, ref) => {
-        const { t: t2 } = exports.useTranslation();
+        const { t: t2 } = useTranslation();
         const [value, onChange] = react.useControllableState({
           value: externalValue,
           onChange: externalOnChange,
@@ -11914,10 +11934,10 @@ var init_PhoneNumberInput = __esm({
             nationalNumber: ""
           }
         });
-        return /* @__PURE__ */ React48__namespace.default.createElement(exports.AttachedInputs, { ...boxProps }, /* @__PURE__ */ React48__namespace.default.createElement(
-          React48.Suspense,
+        return /* @__PURE__ */ React49__namespace.default.createElement(exports.AttachedInputs, { ...boxProps }, /* @__PURE__ */ React49__namespace.default.createElement(
+          React49.Suspense,
           {
-            fallback: /* @__PURE__ */ React48__namespace.default.createElement(
+            fallback: /* @__PURE__ */ React49__namespace.default.createElement(
               InfoSelect,
               {
                 isLabelSrOnly: true,
@@ -11926,10 +11946,10 @@ var init_PhoneNumberInput = __esm({
                 height: "100%",
                 value: "+47"
               },
-              /* @__PURE__ */ React48__namespace.default.createElement(reactStately.Item, { key: "+47" }, "+47")
+              /* @__PURE__ */ React49__namespace.default.createElement(reactStately.Item, { key: "+47" }, "+47")
             )
           },
-          /* @__PURE__ */ React48__namespace.default.createElement(
+          /* @__PURE__ */ React49__namespace.default.createElement(
             LazyCountryCodeSelect,
             {
               value: value.countryCode,
@@ -11942,7 +11962,7 @@ var init_PhoneNumberInput = __esm({
               width: "6.25rem"
             }
           )
-        ), /* @__PURE__ */ React48__namespace.default.createElement(
+        ), /* @__PURE__ */ React49__namespace.default.createElement(
           exports.Input,
           {
             ref,
@@ -11971,14 +11991,14 @@ var init_PhoneNumberInput = __esm({
         sv: "Telefonnummer"
       }
     });
-    LazyCountryCodeSelect = React48__namespace.default.lazy(() => Promise.resolve().then(() => (init_CountryCodeSelect(), CountryCodeSelect_exports)));
+    LazyCountryCodeSelect = React49__namespace.default.lazy(() => Promise.resolve().then(() => (init_CountryCodeSelect(), CountryCodeSelect_exports)));
   }
 });
 exports.Radio = void 0;
 var init_Radio = __esm({
   "src/input/Radio.tsx"() {
     exports.Radio = react.forwardRef((props, ref) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Radio, { ...props, ref });
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Radio, { ...props, ref });
     });
   }
 });
@@ -11987,7 +12007,7 @@ var init_RadioGroup = __esm({
   "src/input/RadioGroup.tsx"() {
     exports.RadioGroup = react.forwardRef(
       ({ children, direction: direction2 = "row", ...rest }, ref) => {
-        return /* @__PURE__ */ React48__namespace.default.createElement(react.RadioGroup, { ...rest, ref }, /* @__PURE__ */ React48__namespace.default.createElement(react.Stack, { direction: direction2 }, children));
+        return /* @__PURE__ */ React49__namespace.default.createElement(react.RadioGroup, { ...rest, ref }, /* @__PURE__ */ React49__namespace.default.createElement(react.Stack, { direction: direction2 }, children));
       }
     );
   }
@@ -11999,12 +12019,12 @@ var init_SearchInput = __esm({
     init_src();
     exports.SearchInput = react.forwardRef(
       ({ label, onReset, ...props }, ref) => {
-        const { t: t2 } = exports.useTranslation();
+        const { t: t2 } = useTranslation();
         const showClearButton = onReset && Boolean(props.value);
         const formControlProps = react.useFormControlContext();
-        const autoGeneratedId = React48.useId();
+        const autoGeneratedId = React49.useId();
         const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? autoGeneratedId;
-        return /* @__PURE__ */ React48__namespace.default.createElement(react.InputGroup, { position: "relative" }, /* @__PURE__ */ React48__namespace.default.createElement(exports.InputLeftElement, null, /* @__PURE__ */ React48__namespace.default.createElement(sporIconReact.SearchOutline24Icon, null)), /* @__PURE__ */ React48__namespace.default.createElement(
+        return /* @__PURE__ */ React49__namespace.default.createElement(react.InputGroup, { position: "relative" }, /* @__PURE__ */ React49__namespace.default.createElement(exports.InputLeftElement, null, /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.SearchOutline24Icon, null)), /* @__PURE__ */ React49__namespace.default.createElement(
           react.Input,
           {
             pl: 7,
@@ -12021,7 +12041,7 @@ var init_SearchInput = __esm({
             placeholder: " ",
             "data-attachable": true
           }
-        ), /* @__PURE__ */ React48__namespace.default.createElement(exports.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label ?? t2(texts15.label)), showClearButton && /* @__PURE__ */ React48__namespace.default.createElement(exports.InputRightElement, { width: "fit-content" }, /* @__PURE__ */ React48__namespace.default.createElement(
+        ), /* @__PURE__ */ React49__namespace.default.createElement(exports.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label ?? t2(texts15.label)), showClearButton && /* @__PURE__ */ React49__namespace.default.createElement(exports.InputRightElement, { width: "fit-content" }, /* @__PURE__ */ React49__namespace.default.createElement(
           react.IconButton,
           {
             variant: "ghost",
@@ -12029,7 +12049,7 @@ var init_SearchInput = __esm({
             size: "sm",
             mr: 1,
             "aria-label": t2(texts15.reset),
-            icon: /* @__PURE__ */ React48__namespace.default.createElement(sporIconReact.CloseOutline24Icon, null),
+            icon: /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.CloseOutline24Icon, null),
             onClick: onReset
           }
         )));
@@ -12056,7 +12076,7 @@ var init_Switch = __esm({
   "src/input/Switch.tsx"() {
     exports.Switch = react.forwardRef(
       ({ size: size2 = "md", ...props }, ref) => {
-        return /* @__PURE__ */ React48__namespace.default.createElement(react.Switch, { variant: "solid", size: size2, ...props, ref });
+        return /* @__PURE__ */ React49__namespace.default.createElement(react.Switch, { variant: "solid", size: size2, ...props, ref });
       }
     );
   }
@@ -12128,9 +12148,9 @@ var init_Textarea = __esm({
         remainingProps: { label, ...rest }
       } = getSpacingProps(props);
       const formControlProps = react.useFormControlContext();
-      const fallbackId = `textarea-${React48.useId()}`;
+      const fallbackId = `textarea-${React49.useId()}`;
       const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { ...spacingProps }, /* @__PURE__ */ React48__namespace.default.createElement(react.FormLabel, { htmlFor: inputId }, label), /* @__PURE__ */ React48__namespace.default.createElement(react.Textarea, { ...rest, id: inputId, ref }));
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...spacingProps }, /* @__PURE__ */ React49__namespace.default.createElement(react.FormLabel, { htmlFor: inputId }, label), /* @__PURE__ */ React49__namespace.default.createElement(react.Textarea, { ...rest, id: inputId, ref }));
     });
   }
 });
@@ -12141,7 +12161,7 @@ var init_input = __esm({
     init_Checkbox();
     init_CheckboxGroup();
     init_ChoiceChip();
-    init_Counter();
+    init_NumericStepper();
     init_FormControl();
     init_FormErrorMessage();
     init_FormLabel();
@@ -12225,7 +12245,7 @@ var init_LineIcon = __esm({
       if (!Icon) {
         return null;
       }
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { sx: { ...styles2.iconContainer, ...sx }, ...rest }, /* @__PURE__ */ React48__namespace.default.createElement(Icon, { sx: styles2.icon }));
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { sx: { ...styles2.iconContainer, ...sx }, ...rest }, /* @__PURE__ */ React49__namespace.default.createElement(Icon, { sx: styles2.icon }));
     };
   }
 });
@@ -12240,7 +12260,7 @@ var init_InfoTag = __esm({
       description
     }) => {
       const styles2 = react.useMultiStyleConfig("InfoTag", { variant, size: size2 });
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { sx: styles2.container }, /* @__PURE__ */ React48__namespace.default.createElement(exports.LineIcon, { variant, size: size2, sx: styles2.iconContainer }), /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { sx: styles2.textContainer }, title && /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { as: "span", sx: styles2.title }, title), title && description && " ", description && /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { as: "span", sx: styles2.description }, description)));
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { sx: styles2.container }, /* @__PURE__ */ React49__namespace.default.createElement(exports.LineIcon, { variant, size: size2, sx: styles2.iconContainer }), /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { sx: styles2.textContainer }, title && /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { as: "span", sx: styles2.title }, title), title && description && " ", description && /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { as: "span", sx: styles2.description }, description)));
     };
   }
 });
@@ -12264,7 +12284,7 @@ var init_TravelTag = __esm({
           deviationLevel
         });
         const DeviationLevelIcon = getDeviationLevelIcon({ deviationLevel, size: size2 });
-        return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { sx: styles2.container, "aria-disabled": isDisabled, ref, ...rest }, /* @__PURE__ */ React48__namespace.default.createElement(exports.LineIcon, { variant, size: size2, sx: styles2.iconContainer }), /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { sx: styles2.textContainer }, title && /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { as: "span", sx: styles2.title }, title), title && description && " ", description && /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { as: "span", sx: styles2.description }, description)), DeviationLevelIcon && /* @__PURE__ */ React48__namespace.default.createElement(DeviationLevelIcon, { sx: styles2.deviationIcon }));
+        return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { sx: styles2.container, "aria-disabled": isDisabled, ref, ...rest }, /* @__PURE__ */ React49__namespace.default.createElement(exports.LineIcon, { variant, size: size2, sx: styles2.iconContainer }), /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { sx: styles2.textContainer }, title && /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { as: "span", sx: styles2.title }, title), title && description && " ", description && /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { as: "span", sx: styles2.description }, description)), DeviationLevelIcon && /* @__PURE__ */ React49__namespace.default.createElement(DeviationLevelIcon, { sx: styles2.deviationIcon }));
       }
     );
     getDeviationLevelIcon = ({
@@ -12301,9 +12321,9 @@ var init_TextLink = __esm({
     exports.TextLink = react.forwardRef(
       ({ children, ...props }, ref) => {
         var _a6;
-        const { t: t2 } = exports.useTranslation();
+        const { t: t2 } = useTranslation();
         const isExternal = props.isExternal !== void 0 ? props.isExternal : Boolean((_a6 = props.href) == null ? void 0 : _a6.match(/^https?:\/\//));
-        return /* @__PURE__ */ React48__namespace.default.createElement(react.Link, { ...props, ref, isExternal }, children, isExternal && /* @__PURE__ */ React48__namespace.default.createElement(
+        return /* @__PURE__ */ React49__namespace.default.createElement(react.Link, { ...props, ref, isExternal }, children, isExternal && /* @__PURE__ */ React49__namespace.default.createElement(
           sporIconReact.LinkOutOutline24Icon,
           {
             marginLeft: 0.5,
@@ -12335,8 +12355,8 @@ var init_VyLogo = __esm({
     exports.VyLogo = ({ colorScheme, ...boxProps }) => {
       const mainColor = colorScheme === "light" ? "#1d211c" : "#ffffff";
       const accentColor = colorScheme === "light" ? "#138c6e" : "#ffffff";
-      const id = React48.useId();
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { as: "svg", viewBox: "0 0 107 54", ...boxProps }, /* @__PURE__ */ React48__namespace.default.createElement("title", null, "Vy logo"), /* @__PURE__ */ React48__namespace.default.createElement(
+      const id = React49.useId();
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { as: "svg", viewBox: "0 0 107 54", ...boxProps }, /* @__PURE__ */ React49__namespace.default.createElement("title", null, "Vy logo"), /* @__PURE__ */ React49__namespace.default.createElement(
         "path",
         {
           fillRule: "evenodd",
@@ -12344,7 +12364,7 @@ var init_VyLogo = __esm({
           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",
           fill: mainColor
         }
-      ), /* @__PURE__ */ React48__namespace.default.createElement(
+      ), /* @__PURE__ */ React49__namespace.default.createElement(
         "mask",
         {
           id: `${id}-a`,
@@ -12355,7 +12375,7 @@ var init_VyLogo = __esm({
           width: "94",
           height: "54"
         },
-        /* @__PURE__ */ React48__namespace.default.createElement(
+        /* @__PURE__ */ React49__namespace.default.createElement(
           "path",
           {
             fillRule: "evenodd",
@@ -12364,7 +12384,7 @@ var init_VyLogo = __esm({
             fill: mainColor
           }
         )
-      ), /* @__PURE__ */ React48__namespace.default.createElement(
+      ), /* @__PURE__ */ React49__namespace.default.createElement(
         "g",
         {
           mask: `url(#${id}-a)`,
@@ -12372,9 +12392,9 @@ var init_VyLogo = __esm({
           clipRule: "evenodd",
           fill: mainColor
         },
-        /* @__PURE__ */ React48__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" }),
-        /* @__PURE__ */ React48__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" })
-      ), /* @__PURE__ */ React48__namespace.default.createElement(
+        /* @__PURE__ */ React49__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" }),
+        /* @__PURE__ */ React49__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" })
+      ), /* @__PURE__ */ React49__namespace.default.createElement(
         "path",
         {
           fillRule: "evenodd",
@@ -12382,7 +12402,7 @@ var init_VyLogo = __esm({
           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",
           fill: accentColor
         }
-      ), /* @__PURE__ */ React48__namespace.default.createElement(
+      ), /* @__PURE__ */ React49__namespace.default.createElement(
         "path",
         {
           fillRule: "evenodd",
@@ -12390,7 +12410,7 @@ var init_VyLogo = __esm({
           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",
           fill: mainColor
         }
-      ), /* @__PURE__ */ React48__namespace.default.createElement(
+      ), /* @__PURE__ */ React49__namespace.default.createElement(
         "mask",
         {
           id: `${id}-b`,
@@ -12401,7 +12421,7 @@ var init_VyLogo = __esm({
           width: "78",
           height: "54"
         },
-        /* @__PURE__ */ React48__namespace.default.createElement(
+        /* @__PURE__ */ React49__namespace.default.createElement(
           "path",
           {
             fillRule: "evenodd",
@@ -12410,25 +12430,25 @@ var init_VyLogo = __esm({
             fill: mainColor
           }
         )
-      ), /* @__PURE__ */ React48__namespace.default.createElement("g", { mask: `url(#${id}-b)`, fillRule: "evenodd", clipRule: "evenodd" }, /* @__PURE__ */ React48__namespace.default.createElement(
+      ), /* @__PURE__ */ React49__namespace.default.createElement("g", { mask: `url(#${id}-b)`, fillRule: "evenodd", clipRule: "evenodd" }, /* @__PURE__ */ React49__namespace.default.createElement(
         "path",
         {
           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",
           fill: mainColor
         }
-      ), /* @__PURE__ */ React48__namespace.default.createElement(
+      ), /* @__PURE__ */ React49__namespace.default.createElement(
         "path",
         {
           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",
           fill: mainColor
         }
-      ), /* @__PURE__ */ React48__namespace.default.createElement(
+      ), /* @__PURE__ */ React49__namespace.default.createElement(
         "path",
         {
           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",
           fill: accentColor
         }
-      )), /* @__PURE__ */ React48__namespace.default.createElement(
+      )), /* @__PURE__ */ React49__namespace.default.createElement(
         "path",
         {
           fillRule: "evenodd",
@@ -12450,7 +12470,7 @@ var init_logo = __esm({
 var JumpForwardIcon, JumpBackwardIcon, PlayIcon, PauseIcon, SkipNextIcon, SkipPreviousIcon;
 var init_icons2 = __esm({
   "src/media-controller/icons.tsx"() {
-    JumpForwardIcon = (props) => /* @__PURE__ */ React48__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 32 30", fill: "none" }, /* @__PURE__ */ React48__namespace.createElement(
+    JumpForwardIcon = (props) => /* @__PURE__ */ React49__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 32 30", fill: "none" }, /* @__PURE__ */ React49__namespace.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -12458,7 +12478,7 @@ var init_icons2 = __esm({
         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",
         fill: "currentColor"
       }
-    ), /* @__PURE__ */ React48__namespace.createElement(
+    ), /* @__PURE__ */ React49__namespace.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -12467,7 +12487,7 @@ var init_icons2 = __esm({
         fill: "currentColor"
       }
     ));
-    JumpBackwardIcon = (props) => /* @__PURE__ */ React48__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 32 30", fill: "none" }, /* @__PURE__ */ React48__namespace.createElement(
+    JumpBackwardIcon = (props) => /* @__PURE__ */ React49__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 32 30", fill: "none" }, /* @__PURE__ */ React49__namespace.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -12475,7 +12495,7 @@ var init_icons2 = __esm({
         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",
         fill: "currentColor"
       }
-    ), /* @__PURE__ */ React48__namespace.createElement(
+    ), /* @__PURE__ */ React49__namespace.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -12484,7 +12504,7 @@ var init_icons2 = __esm({
         fill: "currentColor"
       }
     ));
-    PlayIcon = (props) => /* @__PURE__ */ React48__namespace.createElement(react.Box, { as: "svg", ...props, fill: "none", viewBox: "0 0 60 60" }, /* @__PURE__ */ React48__namespace.createElement(
+    PlayIcon = (props) => /* @__PURE__ */ React49__namespace.createElement(react.Box, { as: "svg", ...props, fill: "none", viewBox: "0 0 60 60" }, /* @__PURE__ */ React49__namespace.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -12493,7 +12513,7 @@ var init_icons2 = __esm({
         fill: "currentColor"
       }
     ));
-    PauseIcon = (props) => /* @__PURE__ */ React48__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 60 60", fill: "none" }, /* @__PURE__ */ React48__namespace.createElement(
+    PauseIcon = (props) => /* @__PURE__ */ React49__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 60 60", fill: "none" }, /* @__PURE__ */ React49__namespace.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -12502,7 +12522,7 @@ var init_icons2 = __esm({
         fill: "currentColor"
       }
     ));
-    SkipNextIcon = (props) => /* @__PURE__ */ React48__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 30 30", fill: "none" }, /* @__PURE__ */ React48__namespace.createElement(
+    SkipNextIcon = (props) => /* @__PURE__ */ React49__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 30 30", fill: "none" }, /* @__PURE__ */ React49__namespace.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -12511,7 +12531,7 @@ var init_icons2 = __esm({
         fill: "currentColor"
       }
     ));
-    SkipPreviousIcon = (props) => /* @__PURE__ */ React48__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 30 30", fill: "none" }, /* @__PURE__ */ React48__namespace.createElement(
+    SkipPreviousIcon = (props) => /* @__PURE__ */ React49__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 30 30", fill: "none" }, /* @__PURE__ */ React49__namespace.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -12533,12 +12553,12 @@ var init_JumpButton = __esm({
       size: size2 = "sm",
       ...props
     }) => {
-      const { t: t2 } = exports.useTranslation();
+      const { t: t2 } = useTranslation();
       const styles2 = react.useMultiStyleConfig("MediaControllerButton", {
         variant: "jumpSkip",
         size: size2
       });
-      return /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(
         react.Center,
         {
           as: "button",
@@ -12547,7 +12567,7 @@ var init_JumpButton = __esm({
           disabled: isDisabled,
           ...props
         },
-        direction2 === "forward" ? /* @__PURE__ */ React48__namespace.default.createElement(JumpForwardIcon, { sx: styles2.icon }) : /* @__PURE__ */ React48__namespace.default.createElement(JumpBackwardIcon, { sx: styles2.icon })
+        direction2 === "forward" ? /* @__PURE__ */ React49__namespace.default.createElement(JumpForwardIcon, { sx: styles2.icon }) : /* @__PURE__ */ React49__namespace.default.createElement(JumpBackwardIcon, { sx: styles2.icon })
       );
     };
     texts17 = createTexts({
@@ -12577,12 +12597,12 @@ var init_PlayPauseButton = __esm({
       isDisabled,
       ...props
     }) => {
-      const { t: t2 } = exports.useTranslation();
+      const { t: t2 } = useTranslation();
       const styles2 = react.useMultiStyleConfig("MediaControllerButton", {
         variant: "play",
         size: size2
       });
-      return /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(
         react.Center,
         {
           as: "button",
@@ -12591,7 +12611,7 @@ var init_PlayPauseButton = __esm({
           disabled: isDisabled,
           ...props
         },
-        isPlaying ? /* @__PURE__ */ React48__namespace.default.createElement(PauseIcon, { sx: styles2.icon }) : /* @__PURE__ */ React48__namespace.default.createElement(PlayIcon, { sx: styles2.icon })
+        isPlaying ? /* @__PURE__ */ React49__namespace.default.createElement(PauseIcon, { sx: styles2.icon }) : /* @__PURE__ */ React49__namespace.default.createElement(PlayIcon, { sx: styles2.icon })
       );
     };
     texts18 = createTexts({
@@ -12621,12 +12641,12 @@ var init_SkipButton = __esm({
       size: size2 = "sm",
       ...props
     }) => {
-      const { t: t2 } = exports.useTranslation();
+      const { t: t2 } = useTranslation();
       const styles2 = react.useMultiStyleConfig("MediaControllerButton", {
         variant: "jumpSkip",
         size: size2
       });
-      return /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(
         react.Center,
         {
           as: "button",
@@ -12635,7 +12655,7 @@ var init_SkipButton = __esm({
           disabled: isDisabled,
           ...props
         },
-        direction2 === "forward" ? /* @__PURE__ */ React48__namespace.default.createElement(SkipNextIcon, { sx: styles2.icon }) : /* @__PURE__ */ React48__namespace.default.createElement(SkipPreviousIcon, { sx: styles2.icon })
+        direction2 === "forward" ? /* @__PURE__ */ React49__namespace.default.createElement(SkipNextIcon, { sx: styles2.icon }) : /* @__PURE__ */ React49__namespace.default.createElement(SkipPreviousIcon, { sx: styles2.icon })
       );
     };
     texts19 = createTexts({
@@ -12672,7 +12692,7 @@ var init_ModalHeader = __esm({
           fontSize: size2 === "lg" ? ["mobile.lg", "desktop.lg"] : ["mobile.md", "desktop.md"],
           textAlign: size2 === "lg" ? "center" : "left"
         };
-        return /* @__PURE__ */ React48__namespace.default.createElement(react.ModalHeader, { ...props, ref, ...styles2 });
+        return /* @__PURE__ */ React49__namespace.default.createElement(react.ModalHeader, { ...props, ref, ...styles2 });
       }
     );
   }
@@ -12682,7 +12702,7 @@ var init_Drawer = __esm({
   "src/modal/Drawer.tsx"() {
     init_ModalHeader();
     exports.Drawer = (props) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(DrawerProvider, { placement: props.placement }, /* @__PURE__ */ React48__namespace.default.createElement(react.Drawer, { ...props }));
+      return /* @__PURE__ */ React49__namespace.default.createElement(DrawerProvider, { placement: props.placement }, /* @__PURE__ */ React49__namespace.default.createElement(react.Drawer, { ...props }));
     };
     exports.DrawerContent = react.forwardRef(
       ({ children, ...props }, ref) => {
@@ -12699,7 +12719,7 @@ var init_Drawer = __esm({
         });
         const isTopOrBottom = placement === "top" || placement === "bottom";
         const widthConstraits = isTopOrBottom ? { width: ["100%", "37.5rem"], mx: "auto" } : {};
-        return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { ...handlers }, /* @__PURE__ */ React48__namespace.default.createElement(
+        return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...handlers }, /* @__PURE__ */ React49__namespace.default.createElement(
           react.DrawerContent,
           {
             ...widthConstraits,
@@ -12708,13 +12728,13 @@ var init_Drawer = __esm({
             ...props,
             ref
           },
-          /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { position: "relative" }, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { maxHeight: "100vh", maxWidth: "100vw", overflow: "auto" }, isTopOrBottom && /* @__PURE__ */ React48__namespace.default.createElement(Notch, null), /* @__PURE__ */ React48__namespace.default.createElement(react.Box, null, children)))
+          /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { position: "relative" }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { maxHeight: "100vh", maxWidth: "100vw", overflow: "auto" }, isTopOrBottom && /* @__PURE__ */ React49__namespace.default.createElement(Notch, null), /* @__PURE__ */ React49__namespace.default.createElement(react.Box, null, children)))
         ));
       }
     );
     Notch = react.forwardRef((props, ref) => {
       const placement = useDrawerContext();
-      return /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(
         react.Box,
         {
           position: "absolute",
@@ -12726,14 +12746,14 @@ var init_Drawer = __esm({
           ...props,
           ref
         },
-        /* @__PURE__ */ React48__namespace.default.createElement(
+        /* @__PURE__ */ React49__namespace.default.createElement(
           react.Center,
           {
             background: `linear-gradient(to ${placement === "bottom" ? "bottom" : "top"}, white 0%, white 60%, transparent)`,
             padding: 2,
             borderRadius: "md"
           },
-          /* @__PURE__ */ React48__namespace.default.createElement(
+          /* @__PURE__ */ React49__namespace.default.createElement(
             react.Box,
             {
               width: "2.265rem",
@@ -12745,10 +12765,10 @@ var init_Drawer = __esm({
         )
       );
     });
-    DrawerContext = React48__namespace.default.createContext(void 0);
-    DrawerProvider = (props) => /* @__PURE__ */ React48__namespace.default.createElement(DrawerContext.Provider, { value: props.placement }, props.children);
+    DrawerContext = React49__namespace.default.createContext(void 0);
+    DrawerProvider = (props) => /* @__PURE__ */ React49__namespace.default.createElement(DrawerContext.Provider, { value: props.placement }, props.children);
     useDrawerContext = () => {
-      return React48__namespace.default.useContext(DrawerContext);
+      return React49__namespace.default.useContext(DrawerContext);
     };
   }
 });
@@ -12766,7 +12786,7 @@ var init_SimpleDrawer = __esm({
       title,
       ...props
     }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(exports.Drawer, { placement, ...props }, /* @__PURE__ */ React48__namespace.default.createElement(react.DrawerOverlay, null), /* @__PURE__ */ React48__namespace.default.createElement(exports.DrawerContent, null, /* @__PURE__ */ React48__namespace.default.createElement(react.DrawerCloseButton, null), title && /* @__PURE__ */ React48__namespace.default.createElement(exports.ModalHeader, null, title), /* @__PURE__ */ React48__namespace.default.createElement(react.DrawerBody, null, children)));
+      return /* @__PURE__ */ React49__namespace.default.createElement(exports.Drawer, { placement, ...props }, /* @__PURE__ */ React49__namespace.default.createElement(react.DrawerOverlay, null), /* @__PURE__ */ React49__namespace.default.createElement(exports.DrawerContent, null, /* @__PURE__ */ React49__namespace.default.createElement(react.DrawerCloseButton, null), title && /* @__PURE__ */ React49__namespace.default.createElement(exports.ModalHeader, null, title), /* @__PURE__ */ React49__namespace.default.createElement(react.DrawerBody, null, children)));
     };
   }
 });
@@ -12785,16 +12805,16 @@ var init_PopoverWizardBody = __esm({
   "src/popover/PopoverWizardBody.tsx"() {
     init_src();
     exports.PopoverWizardBody = ({ children }) => {
-      const [currentStep, setCurrentStep] = React48__namespace.useState(1);
-      const totalSteps = React48__namespace.Children.count(children);
+      const [currentStep, setCurrentStep] = React49__namespace.useState(1);
+      const totalSteps = React49__namespace.Children.count(children);
       const { isOpen } = react.usePopoverContext();
-      React48__namespace.useEffect(() => {
+      React49__namespace.useEffect(() => {
         if (!isOpen && currentStep > 1) {
           const id = setTimeout(() => setCurrentStep(1), 500);
           return () => clearTimeout(id);
         }
       }, [isOpen, currentStep]);
-      return /* @__PURE__ */ React48__namespace.createElement(react.PopoverBody, null, /* @__PURE__ */ React48__namespace.createElement(exports.Stack, { spacing: 1.5 }, /* @__PURE__ */ React48__namespace.createElement(react.Box, null, React48__namespace.Children.toArray(children)[currentStep - 1]), /* @__PURE__ */ React48__namespace.createElement(react.Flex, { gap: 3 }, /* @__PURE__ */ React48__namespace.createElement(StepIndicator, { totalSteps, currentStep }), /* @__PURE__ */ React48__namespace.createElement(
+      return /* @__PURE__ */ React49__namespace.createElement(react.PopoverBody, null, /* @__PURE__ */ React49__namespace.createElement(exports.Stack, { spacing: 1.5 }, /* @__PURE__ */ React49__namespace.createElement(react.Box, null, React49__namespace.Children.toArray(children)[currentStep - 1]), /* @__PURE__ */ React49__namespace.createElement(react.Flex, { gap: 3 }, /* @__PURE__ */ React49__namespace.createElement(StepIndicator, { totalSteps, currentStep }), /* @__PURE__ */ React49__namespace.createElement(
         NextStepButton,
         {
           isLastStep: totalSteps === currentStep,
@@ -12804,7 +12824,7 @@ var init_PopoverWizardBody = __esm({
     };
     StepIndicator = ({ totalSteps, currentStep }) => {
       const steps = createRange(1, totalSteps);
-      return /* @__PURE__ */ React48__namespace.createElement(react.Flex, { gap: 1, alignItems: "center" }, steps.map((step) => /* @__PURE__ */ React48__namespace.createElement(
+      return /* @__PURE__ */ React49__namespace.createElement(react.Flex, { gap: 1, alignItems: "center" }, steps.map((step) => /* @__PURE__ */ React49__namespace.createElement(
         react.Box,
         {
           key: step,
@@ -12822,14 +12842,14 @@ var init_PopoverWizardBody = __esm({
     };
     NextStepButton = ({ isLastStep, onNext }) => {
       const { onClose } = react.usePopoverContext();
-      const { t: t2 } = exports.useTranslation();
-      return /* @__PURE__ */ React48__namespace.createElement(
+      const { t: t2 } = useTranslation();
+      return /* @__PURE__ */ React49__namespace.createElement(
         exports.Button,
         {
           variant: "additional",
           size: "sm",
           color: "white",
-          leftIcon: isLastStep ? void 0 : /* @__PURE__ */ React48__namespace.createElement(sporIconReact.ArrowRightFill18Icon, null),
+          leftIcon: isLastStep ? void 0 : /* @__PURE__ */ React49__namespace.createElement(sporIconReact.ArrowRightFill18Icon, null),
           onClick: isLastStep ? onClose : onNext
         },
         t2(isLastStep ? texts20.finish : texts20.nextStep)
@@ -12866,7 +12886,7 @@ var init_SimplePopover = __esm({
       borderRadius,
       ...props
     }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.DarkMode, null, /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.DarkMode, null, /* @__PURE__ */ React49__namespace.default.createElement(
         react.Popover,
         {
           onClose,
@@ -12878,8 +12898,8 @@ var init_SimplePopover = __esm({
           arrowShadowColor: "none",
           ...props
         },
-        triggerElement && /* @__PURE__ */ React48__namespace.default.createElement(react.PopoverTrigger, null, triggerElement),
-        /* @__PURE__ */ React48__namespace.default.createElement(react.PopoverContent, { borderRadius }, /* @__PURE__ */ React48__namespace.default.createElement(react.PopoverArrow, null), withCloseButton && /* @__PURE__ */ React48__namespace.default.createElement(react.PopoverCloseButton, null), /* @__PURE__ */ React48__namespace.default.createElement(react.PopoverBody, null, children))
+        triggerElement && /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverTrigger, null, triggerElement),
+        /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverContent, { borderRadius }, /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverArrow, null), withCloseButton && /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverCloseButton, null), /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverBody, null, children))
       ));
     };
   }
@@ -12893,7 +12913,7 @@ var init_WizardPopover = __esm({
       triggerElement,
       withCloseButton = false
     }) => {
-      return /* @__PURE__ */ React48__namespace.createElement(react.DarkMode, null, /* @__PURE__ */ React48__namespace.createElement(react.Popover, { size: "lg" }, /* @__PURE__ */ React48__namespace.createElement(react.PopoverTrigger, null, triggerElement), /* @__PURE__ */ React48__namespace.createElement(react.PopoverContent, null, /* @__PURE__ */ React48__namespace.createElement(react.PopoverArrow, null), withCloseButton && /* @__PURE__ */ React48__namespace.createElement(react.PopoverCloseButton, null), /* @__PURE__ */ React48__namespace.createElement(exports.PopoverWizardBody, null, children))));
+      return /* @__PURE__ */ React49__namespace.createElement(react.DarkMode, null, /* @__PURE__ */ React49__namespace.createElement(react.Popover, { size: "lg" }, /* @__PURE__ */ React49__namespace.createElement(react.PopoverTrigger, null, triggerElement), /* @__PURE__ */ React49__namespace.createElement(react.PopoverContent, null, /* @__PURE__ */ React49__namespace.createElement(react.PopoverArrow, null), withCloseButton && /* @__PURE__ */ React49__namespace.createElement(react.PopoverCloseButton, null), /* @__PURE__ */ React49__namespace.createElement(exports.PopoverWizardBody, null, children))));
     };
   }
 });
@@ -12915,7 +12935,7 @@ var init_SporProvider = __esm({
       children,
       ...props
     }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(exports.LanguageProvider, { value: language }, /* @__PURE__ */ React48__namespace.default.createElement(react.ChakraProvider, { theme: theme3, ...props }, /* @__PURE__ */ React48__namespace.default.createElement(react$1.Global, { styles: exports.fontFaces }), /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(LanguageProvider, { language }, /* @__PURE__ */ React49__namespace.default.createElement(react.ChakraProvider, { theme: theme3, ...props }, /* @__PURE__ */ React49__namespace.default.createElement(react$1.Global, { styles: exports.fontFaces }), /* @__PURE__ */ React49__namespace.default.createElement(
         react$1.Global,
         {
           styles: `
@@ -12937,7 +12957,7 @@ var init_provider = __esm({
 var StepperContext, StepperProvider, useStepper;
 var init_StepperContext = __esm({
   "src/stepper/StepperContext.tsx"() {
-    StepperContext = React48__namespace.default.createContext(null);
+    StepperContext = React49__namespace.default.createContext(null);
     StepperProvider = ({
       activeStep,
       children,
@@ -12945,7 +12965,7 @@ var init_StepperContext = __esm({
       colorScheme,
       numberOfSteps
     }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(
         StepperContext.Provider,
         {
           value: { activeStep, onClick, colorScheme, numberOfSteps }
@@ -12954,7 +12974,7 @@ var init_StepperContext = __esm({
       );
     };
     useStepper = () => {
-      const context = React48__namespace.default.useContext(StepperContext);
+      const context = React49__namespace.default.useContext(StepperContext);
       if (!context) {
         throw new Error(
           "useStepper must be used within a StepperProvider. Most likely, you forgot to wrap your StepperStep in a Stepper component"
@@ -12981,8 +13001,8 @@ var init_Stepper = __esm({
       const style = react.useMultiStyleConfig("Stepper", { colorScheme });
       const numberOfSteps = steps.length;
       const activeStep = Number(activeStepAsStringOrNumber);
-      const { t: t2 } = exports.useTranslation();
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { __css: style.root }, /* @__PURE__ */ React48__namespace.default.createElement(
+      const { t: t2 } = useTranslation();
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { __css: style.root }, /* @__PURE__ */ React49__namespace.default.createElement(
         StepperProvider,
         {
           onClick,
@@ -12990,24 +13010,24 @@ var init_Stepper = __esm({
           colorScheme,
           numberOfSteps
         },
-        /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { __css: style.container }, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { __css: style.innerContainer }, /* @__PURE__ */ React48__namespace.default.createElement(react.HStack, null, activeStep > 1 && /* @__PURE__ */ React48__namespace.default.createElement(
+        /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { __css: style.container }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { __css: style.innerContainer }, /* @__PURE__ */ React49__namespace.default.createElement(react.HStack, null, activeStep > 1 && /* @__PURE__ */ React49__namespace.default.createElement(
           exports.IconButton,
           {
             "aria-label": t2(texts21.back),
-            icon: /* @__PURE__ */ React48__namespace.default.createElement(sporIconReact.DropdownLeftFill24Icon, null),
+            icon: /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.DropdownLeftFill24Icon, null),
             variant: "ghost",
             size: "sm",
             onClick: () => onClick(activeStep - 1),
             __css: style.backButton
           }
-        ), /* @__PURE__ */ React48__namespace.default.createElement(
+        ), /* @__PURE__ */ React49__namespace.default.createElement(
           exports.SimplePopover,
           {
-            triggerElement: /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { as: "button", __css: style.stepCounter }, t2(texts21.stepsOf(activeStep, numberOfSteps))),
+            triggerElement: /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { as: "button", __css: style.stepCounter }, t2(texts21.stepsOf(activeStep, numberOfSteps))),
             borderRadius: "xs"
           },
-          steps.map((step, index2) => /* @__PURE__ */ React48__namespace.default.createElement(exports.StepperStep, { key: step, stepNumber: index2 + 1 }, step))
-        )), title && /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React48__namespace.default.createElement(react.Flex, { justifyContent: "center", display: ["none", "flex"] }, steps.map((step, index2) => /* @__PURE__ */ React48__namespace.default.createElement(exports.StepperStep, { key: index2, stepNumber: index2 + 1 }, step))))
+          steps.map((step, index2) => /* @__PURE__ */ React49__namespace.default.createElement(exports.StepperStep, { key: step, stepNumber: index2 + 1 }, step))
+        )), title && /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React49__namespace.default.createElement(react.Flex, { justifyContent: "center", display: ["none", "flex"] }, steps.map((step, index2) => /* @__PURE__ */ React49__namespace.default.createElement(exports.StepperStep, { key: index2, stepNumber: index2 + 1 }, step))))
       ));
     };
     texts21 = createTexts({
@@ -13038,7 +13058,7 @@ var init_StepperStep = __esm({
         variant,
         colorScheme
       });
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { __css: style.stepContainer }, stepNumber > 1 && /* @__PURE__ */ React48__namespace.default.createElement(sporIconReact.DropdownRightFill18Icon, { mx: 5, display: ["none", "block"] }), /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { __css: style.stepContainer }, stepNumber > 1 && /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.DropdownRightFill18Icon, { mx: 5, display: ["none", "block"] }), /* @__PURE__ */ React49__namespace.default.createElement(
         react.Flex,
         {
           __css: style.stepButton,
@@ -13048,8 +13068,8 @@ var init_StepperStep = __esm({
           disabled: variant === "disabled" || variant === "active",
           onClick: () => onClick(stepNumber)
         },
-        /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { __css: style.stepNumber }, stepNumber),
-        /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { __css: style.stepTitle }, children)
+        /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { __css: style.stepNumber }, stepNumber),
+        /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { __css: style.stepTitle }, children)
       ));
     };
     getVariant = (stepNumber, activeStep) => {
@@ -13075,7 +13095,7 @@ exports.Tabs = void 0;
 var init_Tabs = __esm({
   "src/tab/Tabs.tsx"() {
     exports.Tabs = react.forwardRef((props, ref) => {
-      return /* @__PURE__ */ React48__namespace.createElement(react.Tabs, { ...props, ref });
+      return /* @__PURE__ */ React49__namespace.createElement(react.Tabs, { ...props, ref });
     });
   }
 });
@@ -13097,7 +13117,7 @@ var init_Table = __esm({
   "src/table/Table.tsx"() {
     exports.Table = react.forwardRef((props, ref) => {
       const { variant, size: size2, colorScheme, children, ...rest } = props;
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { ...rest, ...getStyleProps(props) }, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { overflowX: "auto" }, /* @__PURE__ */ React48__namespace.default.createElement(
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...rest, ...getStyleProps(props) }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { overflowX: "auto" }, /* @__PURE__ */ React49__namespace.default.createElement(
         react.Table,
         {
           variant,
@@ -22550,12 +22570,12 @@ var init_BaseToast = __esm({
     init_src();
     BaseToast = ({ children, variant, id }) => {
       const styles2 = react.useStyleConfig("Toast", { variant });
-      return /* @__PURE__ */ React48__namespace.default.createElement(react.Flex, { sx: styles2, id }, /* @__PURE__ */ React48__namespace.default.createElement(ToastIcon, { variant }), children);
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Flex, { sx: styles2, id }, /* @__PURE__ */ React49__namespace.default.createElement(ToastIcon, { variant }), children);
     };
     ToastIcon = ({ variant }) => {
       const Icon = getIcon3(variant);
-      const { t: t2 } = exports.useTranslation();
-      return /* @__PURE__ */ React48__namespace.default.createElement(
+      const { t: t2 } = useTranslation();
+      return /* @__PURE__ */ React49__namespace.default.createElement(
         Icon,
         {
           flexShrink: 0,
@@ -22610,7 +22630,7 @@ var init_ActionToast = __esm({
       buttonText,
       id
     }) => {
-      return /* @__PURE__ */ React48__namespace.default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { marginRight: 2, flexGrow: "1" }, children), /* @__PURE__ */ React48__namespace.default.createElement(exports.Button, { variant: "additional", size: "sm", onClick }, buttonText));
+      return /* @__PURE__ */ React49__namespace.default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { marginRight: 2, flexGrow: "1" }, children), /* @__PURE__ */ React49__namespace.default.createElement(exports.Button, { variant: "additional", size: "sm", onClick }, buttonText));
     };
   }
 });
@@ -22626,14 +22646,14 @@ var init_ClosableToast = __esm({
       id
     }) => {
       const styles2 = react.useMultiStyleConfig("Toast", { variant });
-      const { t: t2 } = exports.useTranslation();
-      return /* @__PURE__ */ React48__namespace.default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React48__namespace.default.createElement(react.Box, { flexGrow: "1" }, children), /* @__PURE__ */ React48__namespace.default.createElement(
+      const { t: t2 } = useTranslation();
+      return /* @__PURE__ */ React49__namespace.default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { flexGrow: "1" }, children), /* @__PURE__ */ React49__namespace.default.createElement(
         exports.IconButton,
         {
           sx: styles2.dismissButton,
           variant: "ghost",
           "aria-label": t2(texts23.dismiss),
-          icon: /* @__PURE__ */ React48__namespace.default.createElement(sporIconReact.CloseFill18Icon, null),
+          icon: /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.CloseFill18Icon, null),
           onClick: onClose
         }
       ));
@@ -22656,7 +22676,7 @@ var init_useToast = __esm({
     init_ClosableToast();
     exports.useToast = () => {
       const toast = react.useToast();
-      const wrappedToast = React48.useCallback((opts) => {
+      const wrappedToast = React49.useCallback((opts) => {
         const Toast = getToastComponent(opts);
         toast({
           ...opts,
@@ -22667,7 +22687,7 @@ var init_useToast = __esm({
     };
     getToastComponent = (opts) => {
       if ("isClosable" in opts && opts.isClosable) {
-        return ({ onClose, id }) => /* @__PURE__ */ React48__namespace.default.createElement(
+        return ({ onClose, id }) => /* @__PURE__ */ React49__namespace.default.createElement(
           ClosableToast,
           {
             id,
@@ -22683,7 +22703,7 @@ var init_useToast = __esm({
         );
       }
       if ("buttonText" in opts) {
-        return ({ id }) => /* @__PURE__ */ React48__namespace.default.createElement(
+        return ({ id }) => /* @__PURE__ */ React49__namespace.default.createElement(
           ActionToast,
           {
             id,
@@ -22694,7 +22714,7 @@ var init_useToast = __esm({
           opts.text
         );
       }
-      return ({ id }) => /* @__PURE__ */ React48__namespace.default.createElement(BaseToast, { id, variant: opts.variant }, opts.text);
+      return ({ id }) => /* @__PURE__ */ React49__namespace.default.createElement(BaseToast, { id, variant: opts.variant }, opts.text);
     };
   }
 });
@@ -23044,11 +23064,13 @@ Object.defineProperty(exports, 'SelectItem', {
   get: function () { return reactStately.Item; }
 });
 exports.tokens = tokens10__namespace;
-exports.Counter = Counter;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
 exports.DrawerHeader = exports.ModalHeader;
 exports.InfoSelect = InfoSelect;
+exports.LanguageProvider = LanguageProvider;
+exports.NumericStepper = NumericStepper;
 exports.SelectItemDescription = SelectItemDescription;
 exports.SelectItemLabel = SelectItemLabel;
 exports.createTexts = createTexts;
+exports.useTranslation = useTranslation;