@vygruppen/spor-react 12.7.1 → 12.8.1

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var react = require('@chakra-ui/react');
 var sporIconReact = require('@vygruppen/spor-icon-react');
-var React28 = require('react');
+var React27 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var sporLoader = require('@vygruppen/spor-loader');
 var ReactLottie = require('lottie-react');
@@ -40,7 +40,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React28__namespace = /*#__PURE__*/_interopNamespace(React28);
+var React27__namespace = /*#__PURE__*/_interopNamespace(React27);
 var ReactLottie__default = /*#__PURE__*/_interopDefault(ReactLottie);
 var tokens23__namespace = /*#__PURE__*/_interopNamespace(tokens23);
 var tokens4__default = /*#__PURE__*/_interopDefault(tokens4);
@@ -76,7 +76,7 @@ var warnAboutMismatchingIcon = ({
     }
   }
 };
-var Accordion = React28.forwardRef(
+var Accordion = React27.forwardRef(
   (props, ref) => {
     const { variant = "core", children, gap = 2, ...rest } = props;
     const recipe = react.useSlotRecipe({ key: "accordion" });
@@ -93,7 +93,7 @@ var Accordion = React28.forwardRef(
     );
   }
 );
-var AccordionItemTrigger = React28.forwardRef(function AccordionItemTrigger2(props, ref) {
+var AccordionItemTrigger = React27.forwardRef(function AccordionItemTrigger2(props, ref) {
   const {
     startElement,
     children,
@@ -112,7 +112,7 @@ var AccordionItemTrigger = React28.forwardRef(function AccordionItemTrigger2(pro
     showChevron && /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.DropdownDownFill24Icon, {}) })
   ] }) });
 });
-var AccordionItemContent = React28.forwardRef(function AccordionItemContent2(props, ref) {
+var AccordionItemContent = React27.forwardRef(function AccordionItemContent2(props, ref) {
   const { children } = props;
   const recipe = react.useSlotRecipe({ key: "accordion" });
   const styles = recipe();
@@ -120,7 +120,7 @@ var AccordionItemContent = React28.forwardRef(function AccordionItemContent2(pro
 });
 Accordion.displayName = "Accordion";
 var AccordionItem = react.Accordion.Item;
-var Expandable = React28.forwardRef(
+var Expandable = React27.forwardRef(
   (props, ref) => {
     const { title, children, headingLevel, startElement, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(Accordion, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -165,7 +165,7 @@ var Language = /* @__PURE__ */ ((Language3) => {
   Language3["English"] = "en";
   return Language3;
 })(Language || {});
-var LanguageContext = React28.createContext(void 0);
+var LanguageContext = React27.createContext(void 0);
 function LanguageProvider({
   language,
   children
@@ -173,7 +173,7 @@ function LanguageProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(LanguageContext.Provider, { value: language, children });
 }
 function useLanguage() {
-  const language = React28.useContext(LanguageContext);
+  const language = React27.useContext(LanguageContext);
   if (!language) {
     throw new Error("Please wrap your application in a LanguageProvider");
   }
@@ -191,8 +191,8 @@ function createTexts(texts27) {
 }
 var hydrating = true;
 function useHydrated() {
-  const [hydrated, setHydrated] = React28.useState(() => !hydrating);
-  React28.useEffect(function hydrate() {
+  const [hydrated, setHydrated] = React27.useState(() => !hydrating);
+  React27.useEffect(function hydrate() {
     hydrating = false;
     setHydrated(true);
   }, []);
@@ -335,11 +335,11 @@ var LightSpinner = ({
   ] });
 };
 var useRotatingLabel = ({ label, delay }) => {
-  const loadingTextArray = React28.useMemo(
+  const loadingTextArray = React27.useMemo(
     () => Array.isArray(label) ? label : [label],
     [label]
   );
-  const [currentLoadingTextIndex, setCurrentLoadingTextIndex] = React28.useState(0);
+  const [currentLoadingTextIndex, setCurrentLoadingTextIndex] = React27.useState(0);
   usehooksTs.useInterval(() => {
     setCurrentLoadingTextIndex(
       (prevIndex) => (prevIndex + 1) % loadingTextArray.length
@@ -347,7 +347,7 @@ var useRotatingLabel = ({ label, delay }) => {
   }, delay);
   return loadingTextArray[currentLoadingTextIndex];
 };
-var ProgressBar = React28.forwardRef(
+var ProgressBar = React27.forwardRef(
   ({
     value,
     label,
@@ -393,9 +393,9 @@ var progressLoaderRecipe = react.defineRecipe({
   }
 });
 var usePathLength = (value) => {
-  const pathRef = React28.useRef(null);
-  const [pathLength, setPathLength] = React28.useState(0);
-  React28.useEffect(() => {
+  const pathRef = React27.useRef(null);
+  const [pathLength, setPathLength] = React27.useState(0);
+  React27.useEffect(() => {
     if (pathRef.current) {
       const totalLength = pathRef.current.getTotalLength();
       setPathLength(totalLength);
@@ -405,7 +405,7 @@ var usePathLength = (value) => {
   return { pathRef, pathLength, progressOffset };
 };
 var ProgressLoaderWrapper = react.chakra("div", progressLoaderRecipe);
-var ProgressLoader = React28.forwardRef(
+var ProgressLoader = React27.forwardRef(
   ({
     value,
     label,
@@ -429,7 +429,7 @@ var ProgressLoader = React28.forwardRef(
       pathLength: progressPathLength,
       progressOffset
     } = usePathLength(value);
-    const id = React28.useId();
+    const id = React27.useId();
     return /* @__PURE__ */ jsxRuntime.jsxs(
       ProgressLoaderWrapper,
       {
@@ -509,7 +509,7 @@ var texts = createTexts({
     en: `${value}% done`
   })
 });
-var SkeletonCircle = React28__namespace.forwardRef(function SkeletonCircle2(props, ref) {
+var SkeletonCircle = React27__namespace.forwardRef(function SkeletonCircle2(props, ref) {
   const recipe = react.useRecipe({ key: "skeleton" });
   const [recipeProps, restProps] = recipe.splitVariantProps({
     loading: true,
@@ -519,7 +519,7 @@ var SkeletonCircle = React28__namespace.forwardRef(function SkeletonCircle2(prop
   const { size, css, ...rest } = restProps;
   return /* @__PURE__ */ jsxRuntime.jsx(react.Circle, { size, asChild: true, ref, children: /* @__PURE__ */ jsxRuntime.jsx(react.Skeleton, { css: { ...recipe(recipeProps), ...css }, ...rest }) });
 });
-var SkeletonText = React28.forwardRef(
+var SkeletonText = React27.forwardRef(
   function SkeletonText2(props, ref) {
     const recipe = react.useRecipe({ key: "skeleton" });
     const [recipeProps, restProps] = recipe.splitVariantProps({
@@ -540,7 +540,7 @@ var SkeletonText = React28.forwardRef(
     )) });
   }
 );
-var Skeleton = React28.forwardRef(
+var Skeleton = React27.forwardRef(
   function SkeletonText3(props, ref) {
     const recipe = react.useRecipe({ key: "skeleton" });
     const [recipeProps, restProps] = recipe.splitVariantProps({
@@ -578,7 +578,7 @@ var LoadingContent = ({
     loadingText && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: loadingText })
   ] })
 ] });
-var Button = React28.forwardRef(
+var Button = React27.forwardRef(
   ({
     loading,
     disabled,
@@ -611,7 +611,7 @@ var Button = React28.forwardRef(
         variant,
         size,
         ...rest,
-        children: rest.asChild ? React28.cloneElement(children, {
+        children: rest.asChild ? React27.cloneElement(children, {
           children: renderContent()
         }) : renderContent()
       }
@@ -627,7 +627,7 @@ var texts2 = createTexts({
     sv: "Laddar\u2026"
   }
 });
-var ButtonGroup = React28.forwardRef(
+var ButtonGroup = React27.forwardRef(
   (props, ref) => {
     const recipe = react.useRecipe({ key: "buttonGroup" });
     const [recipeProps, restProps] = recipe.splitVariantProps(props);
@@ -636,7 +636,7 @@ var ButtonGroup = React28.forwardRef(
   }
 );
 ButtonGroup.displayName = "ButtonGroup";
-var Badge = React28.forwardRef(function Badge2({ icon, children, ...props }, ref) {
+var Badge = React27.forwardRef(function Badge2({ icon, children, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Badge, { ref, ...props, children: [
     children,
     icon && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: icon })
@@ -759,12 +759,12 @@ var codeRecipie = react.defineRecipe({
   }
 });
 var StyledCode = react.chakra(react.Code, codeRecipie);
-var Code = React28__namespace.default.forwardRef(
+var Code = React27__namespace.default.forwardRef(
   function Code2(props, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(StyledCode, { ...props, ref });
   }
 );
-var Heading = React28.forwardRef(
+var Heading = React27.forwardRef(
   function Heading2(props, ref) {
     const {
       as,
@@ -792,14 +792,14 @@ function resolveTextProps({
     return { fontSize };
   return { fontSize, lineHeight };
 }
-var Text3 = React28.forwardRef(
+var Text3 = React27.forwardRef(
   function Text4(props, ref) {
     const { variant, lineHeight, fontSize, ...rest } = props;
     const resolvedProps = resolveTextProps({ variant, fontSize, lineHeight });
     return /* @__PURE__ */ jsxRuntime.jsx(react.Text, { ...resolvedProps, ...rest, ref });
   }
 );
-var ClipboardIcon = React28__namespace.forwardRef((props, ref) => {
+var ClipboardIcon = React27__namespace.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Clipboard.Indicator,
     {
@@ -811,7 +811,7 @@ var ClipboardIcon = React28__namespace.forwardRef((props, ref) => {
   );
 });
 ClipboardIcon.displayName = "ClipboardIcon";
-var ClipboardCopyText = React28__namespace.forwardRef((props, ref) => {
+var ClipboardCopyText = React27__namespace.forwardRef((props, ref) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Clipboard.Indicator,
@@ -824,7 +824,7 @@ var ClipboardCopyText = React28__namespace.forwardRef((props, ref) => {
   );
 });
 ClipboardCopyText.displayName = "ClipboardCopyText";
-var ClipboardButton = React28__namespace.forwardRef((props, ref) => {
+var ClipboardButton = React27__namespace.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Clipboard.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ref, size: "xs", leftIcon: /* @__PURE__ */ jsxRuntime.jsx(ClipboardIcon, {}), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ClipboardCopyText, {}) }) });
 });
 ClipboardButton.displayName = "ClipboardButton";
@@ -843,7 +843,7 @@ var texts3 = createTexts({
     sv: "Kopierad"
   }
 });
-var IconButton = React28.forwardRef(
+var IconButton = React27.forwardRef(
   (props, ref) => {
     const { icon, size = "sm", loading = false, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -860,7 +860,7 @@ var IconButton = React28.forwardRef(
   }
 );
 IconButton.displayName = "IconButton";
-var CloseButton = React28.forwardRef(
+var CloseButton = React27.forwardRef(
   ({ size = "sm", ...props }, ref) => {
     const { t } = useTranslation();
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -902,7 +902,7 @@ var texts4 = createTexts({
     sv: "St\xE4ng"
   }
 });
-var FloatingActionButton = React28.forwardRef(
+var FloatingActionButton = React27.forwardRef(
   ({
     children,
     icon,
@@ -911,11 +911,11 @@ var FloatingActionButton = React28.forwardRef(
     placement = "bottom right",
     ...props
   }, ref) => {
-    const [isTextVisible, setIsTextVisible] = React28__namespace.default.useState(
+    const [isTextVisible, setIsTextVisible] = React27__namespace.default.useState(
       externalIsTextVisible === void 0 ? false : externalIsTextVisible
     );
     const scrollDirection = useScrollDirection();
-    React28.useEffect(() => {
+    React27.useEffect(() => {
       if (externalIsTextVisible !== void 0) {
         return;
       }
@@ -925,7 +925,7 @@ var FloatingActionButton = React28.forwardRef(
       );
       return () => globalThis.clearTimeout(id);
     }, [scrollDirection, externalIsTextVisible]);
-    React28.useEffect(() => {
+    React27.useEffect(() => {
       setIsTextVisible(!!externalIsTextVisible);
     }, [externalIsTextVisible]);
     const recipe = react.useSlotRecipe({ key: "floatingActionButton" });
@@ -952,11 +952,11 @@ var FloatingActionButton = React28.forwardRef(
 );
 FloatingActionButton.displayName = "FloatingActionButton";
 var useScrollDirection = () => {
-  const [scrollDirection, setScrollDirection] = React28__namespace.default.useState(null);
-  const lastScrollPosition = React28__namespace.default.useRef(
+  const [scrollDirection, setScrollDirection] = React27__namespace.default.useState(null);
+  const lastScrollPosition = React27__namespace.default.useRef(
     globalThis.window === void 0 ? 0 : window.scrollY
   );
-  React28__namespace.default.useEffect(() => {
+  React27__namespace.default.useEffect(() => {
     const onScroll = () => {
       const delta = window.scrollY - lastScrollPosition.current;
       if (delta === 0) {
@@ -972,7 +972,7 @@ var useScrollDirection = () => {
   }, [scrollDirection]);
   return scrollDirection;
 };
-var AlertIcon = React28.forwardRef(
+var AlertIcon = React27.forwardRef(
   ({ variant, customIcon }, ref) => {
     const { t } = useTranslation();
     const Icon2 = customIcon ?? getIcon(variant);
@@ -1066,7 +1066,7 @@ var texts5 = createTexts({
     en: "Service"
   }
 });
-var Alert = React28.forwardRef((props, ref) => {
+var Alert = React27.forwardRef((props, ref) => {
   const {
     title,
     showIndicator = true,
@@ -1113,7 +1113,7 @@ var Alert = React28.forwardRef((props, ref) => {
   ] });
 });
 Alert.displayName = "Alert";
-var ExpandableAlert = React28.forwardRef(
+var ExpandableAlert = React27.forwardRef(
   (props, ref) => {
     const {
       variant = "info",
@@ -1174,7 +1174,7 @@ var ExpandableAlert = React28.forwardRef(
   }
 );
 ExpandableAlert.displayName = "ExpandableAlert";
-var ServiceAlert = React28.forwardRef(
+var ServiceAlert = React27.forwardRef(
   (props, ref) => {
     const {
       variant = "service",
@@ -1276,14 +1276,14 @@ var texts6 = createTexts({
     en: "Traffic announcement"
   }
 });
-var Breadcrumb = React28.forwardRef(
+var Breadcrumb = React27.forwardRef(
   ({ children, ...props }, ref) => {
-    const validChildren = React28__namespace.default.Children.toArray(children).filter(
-      (element) => React28__namespace.default.isValidElement(element)
+    const validChildren = React27__namespace.default.Children.toArray(children).filter(
+      (element) => React27__namespace.default.isValidElement(element)
     );
     return /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.Root, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.List, { children: validChildren.map((child, index) => {
       const isLast = index === validChildren.length - 1;
-      return /* @__PURE__ */ jsxRuntime.jsxs(React28__namespace.default.Fragment, { children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(React27__namespace.default.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.Item, { children: child }),
         !isLast && /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.Separator, { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.DropdownRightFill18Icon, {}) })
       ] }, index);
@@ -1313,7 +1313,7 @@ function ColorModeIcon() {
   const { colorMode } = useColorMode();
   return colorMode === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(lu.LuMoon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lu.LuSun, {});
 }
-var ColorModeButton = React28__namespace.forwardRef(function ColorModeButton2(props, ref) {
+var ColorModeButton = React27__namespace.forwardRef(function ColorModeButton2(props, ref) {
   const { toggleColorMode } = useColorMode();
   return /* @__PURE__ */ jsxRuntime.jsx(react.ClientOnly, { fallback: /* @__PURE__ */ jsxRuntime.jsx(react.Skeleton, { boxSize: "8" }), children: /* @__PURE__ */ jsxRuntime.jsx(
     react.IconButton,
@@ -1334,7 +1334,7 @@ var ColorModeButton = React28__namespace.forwardRef(function ColorModeButton2(pr
     }
   ) });
 });
-var FloatingLabel = React28.forwardRef(
+var FloatingLabel = React27.forwardRef(
   (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(react.Field.Label, { ref, ...props, css: floatingLabelStyles })
 );
 FloatingLabel.displayName = "FloatingLabel";
@@ -1377,7 +1377,7 @@ var labelStyles = react.defineStyle({
     opacity: 0.4
   }
 });
-var Field3 = React28__namespace.forwardRef(
+var Field3 = React27__namespace.forwardRef(
   (props, ref) => {
     const {
       label,
@@ -1394,7 +1394,7 @@ var Field3 = React28__namespace.forwardRef(
     } = props;
     const recipe = react.useSlotRecipe({ key: "field" });
     const styles = recipe();
-    return /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { gap: "2", ref, ...rest, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { gap: "2", ref, width: "100%", ...rest, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         react.Field.Root,
         {
@@ -1417,7 +1417,7 @@ var Field3 = React28__namespace.forwardRef(
   }
 );
 Field3.displayName = "Field";
-var FieldErrorText = React28__namespace.forwardRef((props, ref) => {
+var FieldErrorText = React27__namespace.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Field.ErrorText, { ref, children: props.children });
 });
 FieldErrorText.displayName = "FieldErrorText";
@@ -1428,7 +1428,7 @@ function CalendarCell({
   currentMonth,
   variant
 }) {
-  const ref = React28.useRef(null);
+  const ref = React27.useRef(null);
   const {
     cellProps,
     buttonProps,
@@ -1455,7 +1455,7 @@ function CalendarCell({
   if (isOutsideMonth) {
     stateProps["data-unavailable"] = true;
   }
-  React28.useEffect(() => {
+  React27.useEffect(() => {
     var _a5;
     (_a5 = ref.current) == null ? void 0 : _a5.addEventListener(
       "touchend",
@@ -1565,7 +1565,7 @@ function CalendarNavigationButton({
   "aria-label": ariaLabel,
   ...rest
 }) {
-  const ref = React28.useRef(null);
+  const ref = React27.useRef(null);
   const { buttonProps } = reactAria.useButton(rest, ref);
   return /* @__PURE__ */ jsxRuntime.jsx(
     IconButton,
@@ -1725,7 +1725,7 @@ var texts8 = createTexts({
     en: "Calendar"
   }
 });
-var CalendarTriggerButton = React28.forwardRef(({ variant, disabled, ariaLabelledby, ...buttonProps }, ref) => {
+var CalendarTriggerButton = React27.forwardRef(({ variant, disabled, ariaLabelledby, ...buttonProps }, ref) => {
   const { t } = useTranslation();
   const recipe = react.useSlotRecipe({
     key: "datePicker"
@@ -1752,9 +1752,9 @@ var texts9 = createTexts({
     en: "Open calendar"
   }
 });
-var DateTimeSegment = React28.forwardRef(
+var DateTimeSegment = React27.forwardRef(
   ({ segment, state, ariaLabel, ariaDescription }, externalRef) => {
-    const internalRef = React28.useRef(null);
+    const internalRef = React27.useRef(null);
     const ref = externalRef ?? internalRef;
     const { segmentProps } = reactAria.useDateSegment(
       segment,
@@ -1801,7 +1801,7 @@ function createCalendar2(identifier) {
     }
   }
 }
-var DateField = React28.forwardRef(
+var DateField = React27.forwardRef(
   ({ labelId, ...props }, externalRef) => {
     var _a5;
     const locale = useCurrentLocale();
@@ -1815,7 +1815,7 @@ var DateField = React28.forwardRef(
       createCalendar: createCalendar2
     });
     const { t } = useTranslation();
-    const internalRef = React28.useRef(null);
+    const internalRef = React27.useRef(null);
     const ref = externalRef ?? internalRef;
     const { fieldProps } = reactAria.useDateField(
       props,
@@ -1892,7 +1892,7 @@ var getAriaLabel = (segmentType) => {
     }
   }
 };
-var StyledField = React28.forwardRef(
+var StyledField = React27.forwardRef(
   function StyledField2(props, ref) {
     const { children, variant, isDisabled, ariaLabelledby, ...otherProps } = props;
     const { invalid } = react.useFieldContext() ?? {
@@ -1915,7 +1915,7 @@ var StyledField = React28.forwardRef(
     );
   }
 );
-var DatePicker = React28.forwardRef(
+var DatePicker = React27.forwardRef(
   ({
     variant,
     errorText,
@@ -1936,15 +1936,15 @@ var DatePicker = React28.forwardRef(
       isRequired: props.isRequired ?? (chakraFieldProps == null ? void 0 : chakraFieldProps.required),
       validationState: (chakraFieldProps == null ? void 0 : chakraFieldProps.invalid) ? "invalid" : "valid"
     });
-    const internalRef = React28.useRef(null);
+    const internalRef = React27.useRef(null);
     const ref = externalRef ?? internalRef;
     const { labelProps, fieldProps, buttonProps, dialogProps, calendarProps } = reactAria.useDatePicker(
       props,
       state,
       ref
     );
-    const labelId = `label-${React28.useId()}`;
-    const inputGroupId = `input-group-${React28.useId()}`;
+    const labelId = `label-${React27.useId()}`;
+    const inputGroupId = `input-group-${React27.useId()}`;
     const recipe = react.useSlotRecipe({
       key: "datePicker"
     });
@@ -2033,7 +2033,7 @@ function RangeCalendar(props) {
     key: "datePicker"
   });
   const styles = recipe({});
-  const ref = React28.useRef(null);
+  const ref = React27.useRef(null);
   const { calendarProps, title } = reactAria.useRangeCalendar(props, state, ref);
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { ...calendarProps, ref, css: styles.rangeCalendarPopover, children: [
     /* @__PURE__ */ jsxRuntime.jsx(CalendarHeader, { state, title }),
@@ -2071,7 +2071,7 @@ function DateRangePicker({
     isRequired: props.required ?? (fieldContextPRops == null ? void 0 : fieldContextPRops.required),
     validationState: (fieldContextPRops == null ? void 0 : fieldContextPRops.invalid) ? "invalid" : "valid"
   });
-  const ref = React28.useRef(null);
+  const ref = React27.useRef(null);
   const uniqueId = reactAria.useId();
   const datePickerId = `date-range-picker-${uniqueId}`;
   const {
@@ -2159,7 +2159,7 @@ function DateRangePicker({
   ] }) });
 }
 var TimeField = ({ state, ...props }) => {
-  const ref = React28.useRef(null);
+  const ref = React27.useRef(null);
   const { labelProps, fieldProps } = reactAria.useTimeField(props, state, ref);
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2326,7 +2326,7 @@ var texts11 = createTexts({
     sv: "minuter"
   }
 });
-var DialogContent = React28__namespace.forwardRef((props, ref) => {
+var DialogContent = React27__namespace.forwardRef((props, ref) => {
   const {
     children,
     portalled = true,
@@ -2340,7 +2340,7 @@ var DialogContent = React28__namespace.forwardRef((props, ref) => {
   ] });
 });
 DialogContent.displayName = "DialogContent";
-var DialogCloseTrigger = React28__namespace.forwardRef(function DialogCloseTrigger2(props, ref) {
+var DialogCloseTrigger = React27__namespace.forwardRef(function DialogCloseTrigger2(props, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Dialog.CloseTrigger, { ref, position: "absolute", ...props, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "md" }) });
 });
 var DialogRoot = react.Dialog.Root;
@@ -2355,7 +2355,7 @@ var DialogActionTrigger = react.Dialog.ActionTrigger;
 var [RootDrawerProvider, useRootDrawerProps] = react.createContext({
   name: "RootDrawerProvider"
 });
-var DrawerContent = React28.forwardRef(
+var DrawerContent = React27.forwardRef(
   (props, ref) => {
     const { children, portalled = true, portalRef, ...rest } = props;
     const { size, placement } = useRootDrawerProps();
@@ -2368,7 +2368,7 @@ var DrawerContent = React28.forwardRef(
   }
 );
 DrawerContent.displayName = "DrawerContent";
-var CloseDrawerLine = React28.forwardRef((props, ref) => {
+var CloseDrawerLine = React27.forwardRef((props, ref) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Drawer.CloseTrigger,
@@ -2395,17 +2395,17 @@ var CloseDrawerLine = React28.forwardRef((props, ref) => {
   );
 });
 CloseDrawerLine.displayName = "CloseDrawerLine";
-var DrawerCloseTrigger = React28.forwardRef(function DrawerCloseTrigger2(props, ref) {
+var DrawerCloseTrigger = React27.forwardRef(function DrawerCloseTrigger2(props, ref) {
   const { size } = useRootDrawerProps();
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxRuntime.jsx(react.Drawer.CloseTrigger, { ref, ...props, asChild: true, children: size === "full" ? /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", leftIcon: /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.CloseFill24Icon, {}), children: t(texts12.close) }) : /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "md" }) });
 });
-var DrawerBackTrigger = React28.forwardRef((props, ref) => {
+var DrawerBackTrigger = React27.forwardRef((props, ref) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxRuntime.jsx(react.Drawer.CloseTrigger, { asChild: true, ...props, ref, top: "0", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", leftIcon: /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.ArrowLeftFill24Icon, {}), children: t(texts12.back) }) });
 });
 DrawerBackTrigger.displayName = "DrawerBackTrigger";
-var DrawerFullScreenHeader = React28.forwardRef((props, ref) => {
+var DrawerFullScreenHeader = React27.forwardRef((props, ref) => {
   const { backTrigger = true, title } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(react.Drawer.Header, { ...props, ref, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(react.Grid, { templateColumns: "1fr auto 1fr", height: "auto", paddingX: "8", children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.GridItem, { width: "full", alignSelf: "center", children: backTrigger && /* @__PURE__ */ jsxRuntime.jsx(DrawerBackTrigger, {}) }),
@@ -2442,7 +2442,7 @@ var texts12 = createTexts({
     sv: "St\xE4ng"
   }
 });
-var AttachedInputs = React28.forwardRef(
+var AttachedInputs = React27.forwardRef(
   (props, ref) => {
     const recipe = react.useRecipe({ key: "attachedInputs" });
     const [recipeProps, restProps] = recipe.splitVariantProps(props);
@@ -2454,7 +2454,7 @@ AttachedInputs.displayName = "AttachedInputs";
 var CardSelect = ({ size = "md", ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Root, { size, ...props });
 };
-var CardSelectContent = React28.forwardRef(
+var CardSelectContent = React27.forwardRef(
   ({ children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Content, { ref, padding: 0, bg: "none", children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Body, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
       StaticCard,
@@ -2475,7 +2475,7 @@ var bgActiveStyleMap = {
   ghost: "ghost.surface.active",
   floating: "floating.surface.active"
 };
-var CardSelectTrigger = React28.forwardRef(
+var CardSelectTrigger = React27.forwardRef(
   ({ icon, variant = "core", withChevron = true, size, children, ...props }, ref) => {
     const ChevronIcon = size === "sm" ? sporIconReact.DropdownDownFill18Icon : sporIconReact.DropdownDownFill24Icon;
     const { open } = react.usePopoverContext();
@@ -2500,7 +2500,7 @@ var CardSelectTrigger = React28.forwardRef(
   }
 );
 CardSelectTrigger.displayName = "CardSelectTrigger";
-var Checkbox = React28__namespace.forwardRef(
+var Checkbox = React27__namespace.forwardRef(
   (props, ref) => {
     const { children, inputProps, rootRef, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(react.Checkbox.Root, { ref: rootRef, ...rest, children: [
@@ -2511,14 +2511,12 @@ var Checkbox = React28__namespace.forwardRef(
   }
 );
 Checkbox.displayName = "Checkbox";
-var CheckboxGroup = React28.forwardRef(
-  (props, ref) => {
-    const { direction = "row", children, gap = 1, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxGroup, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { direction, gap, children }) });
-  }
-);
+var CheckboxGroup = (props) => {
+  const { direction = "row", children, gap = 1, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxGroup, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { direction, gap, children }) });
+};
 CheckboxGroup.displayName = "CheckboxGroup";
-var ChoiceChip = React28.forwardRef(
+var ChoiceChip = React27.forwardRef(
   ({ children, icon, onCheckedChange, ...rootProps }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       react.CheckboxCard.Root,
@@ -2540,7 +2538,7 @@ var ChoiceChip = React28.forwardRef(
   }
 );
 ChoiceChip.displayName = "ChoiceChip";
-var Popover = React28.forwardRef(
+var Popover = React27.forwardRef(
   ({
     children,
     state,
@@ -2554,7 +2552,7 @@ var Popover = React28.forwardRef(
     containerPadding = 12
   }, ref) => {
     var _a5;
-    const internalRef = React28.useRef(null);
+    const internalRef = React27.useRef(null);
     const popoverRef = ref ?? internalRef;
     const { popoverProps, underlayProps } = reactAria.usePopover(
       {
@@ -2598,10 +2596,10 @@ var Combobox = (props) => {
     loading,
     leftIcon,
     rightIcon,
-    borderBottomLeftRadius = "sm",
-    borderBottomRightRadius = "sm",
-    borderTopLeftRadius = "sm",
-    borderTopRightRadius = "sm",
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
     marginBottom,
     marginTop,
     marginX,
@@ -2621,11 +2619,11 @@ var Combobox = (props) => {
     ...restProps
   } = props;
   const { contains } = reactAria.useFilter({ sensitivity: "base" });
-  const fallbackInputRef = React28.useRef(null);
+  const fallbackInputRef = React27.useRef(null);
   const inputRef = externalInputRef ?? fallbackInputRef;
-  const listBoxRef = React28.useRef(null);
-  const popoverRef = React28.useRef(null);
-  const listboxId = `${React28.useId()}-listbox`;
+  const listBoxRef = React27.useRef(null);
+  const popoverRef = React27.useRef(null);
+  const listboxId = `${React27.useId()}-listbox`;
   const inputWidth = useInputWidth(inputRef);
   const state = reactStately.useComboBoxState({
     defaultFilter: contains,
@@ -2700,7 +2698,8 @@ var Combobox = (props) => {
             }
           }
         ) : rightIcon,
-        placeholder: ""
+        placeholder: "",
+        "data-attachable": true
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", "data-trigger": "multiselect" }),
@@ -2737,8 +2736,8 @@ var Combobox = (props) => {
 };
 Combobox.displayName = "Combobox";
 var useInputWidth = (inputRef) => {
-  const [inputWidth, setInputWidth] = React28.useState("auto");
-  React28.useEffect(() => {
+  const [inputWidth, setInputWidth] = React27.useState("auto");
+  React27.useEffect(() => {
     const onResize = debounce(() => {
       if (inputRef.current) {
         setInputWidth(`${inputRef.current.offsetWidth}px`);
@@ -2769,7 +2768,7 @@ var FieldsetLegend = react.Fieldset.Legend;
 var FieldsetContent = react.Fieldset.Content;
 var FieldsetHelperText = react.Fieldset.HelperText;
 var FieldsetErrorText = react.Fieldset.ErrorText;
-var Input = React28.forwardRef(
+var Input = React27.forwardRef(
   ({
     startElement,
     endElement,
@@ -2855,7 +2854,7 @@ function ItemDescription({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { ...descriptionProps, css: styles, fontSize: "xs", children });
 }
 function Option({ item, state }) {
-  const ref = React28.useRef(null);
+  const ref = React27.useRef(null);
   const {
     optionProps,
     isSelected,
@@ -2880,7 +2879,7 @@ function Option({ item, state }) {
   if (isFocusVisible) {
     dataFields["data-focus-visible"] = true;
   }
-  React28.useEffect(() => {
+  React27.useEffect(() => {
     var _a5;
     (_a5 = ref == null ? void 0 : ref.current) == null ? void 0 : _a5.addEventListener(
       "touchend",
@@ -2892,12 +2891,12 @@ function Option({ item, state }) {
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(OptionContext.Provider, { value: { labelProps, descriptionProps }, children: /* @__PURE__ */ jsxRuntime.jsx(react.ListItem, { ...optionProps, ...dataFields, ref, css: styles.item, children: item.rendered }) });
 }
-var OptionContext = React28__namespace.default.createContext({
+var OptionContext = React27__namespace.default.createContext({
   labelProps: {},
   descriptionProps: {}
 });
 var useOptionContext = () => {
-  return React28.useContext(OptionContext);
+  return React27.useContext(OptionContext);
 };
 function ListBoxSection({ section, state }) {
   var _a5, _b4;
@@ -2927,7 +2926,7 @@ function ListBoxSection({ section, state }) {
     ) })
   ] }) });
 }
-var NativeSelect = React28__namespace.forwardRef(function NativeSelect2(props, ref) {
+var NativeSelect = React27__namespace.forwardRef(function NativeSelect2(props, ref) {
   const {
     children,
     variant = "core",
@@ -2974,7 +2973,7 @@ var NativeSelect = React28__namespace.forwardRef(function NativeSelect2(props, r
     }
   );
 });
-var NumericStepper = React28__namespace.default.forwardRef((props, ref) => {
+var NumericStepper = React27__namespace.default.forwardRef((props, ref) => {
   const {
     name: nameProp,
     id: idProp,
@@ -2990,7 +2989,7 @@ var NumericStepper = React28__namespace.default.forwardRef((props, ref) => {
     ariaLabelContext = { singular: "", plural: "" },
     ...rest
   } = props;
-  const addButtonRef = React28.useRef(null);
+  const addButtonRef = React27.useRef(null);
   const { t } = useTranslation();
   const recipe = react.useSlotRecipe({ key: "numericStepper" });
   const styles = recipe();
@@ -3081,7 +3080,7 @@ var NumericStepper = React28__namespace.default.forwardRef((props, ref) => {
   ] });
 });
 NumericStepper.displayName = "NumericStepper";
-var VerySmallButton = React28__namespace.default.forwardRef((props, ref) => {
+var VerySmallButton = React27__namespace.default.forwardRef((props, ref) => {
   const recipe = react.useSlotRecipe({ key: "numericStepper" });
   const styles = recipe({ colorPalette: "default" });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3164,7 +3163,7 @@ var texts13 = createTexts({
     };
   }
 });
-var PasswordInput = React28.forwardRef(
+var PasswordInput = React27.forwardRef(
   (props, ref) => {
     const {
       defaultVisible,
@@ -3209,7 +3208,7 @@ var PasswordInput = React28.forwardRef(
   }
 );
 PasswordInput.displayName = "PasswordInput";
-var VisibilityTrigger = React28__namespace.default.forwardRef(
+var VisibilityTrigger = React27__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       react.Button,
@@ -3255,7 +3254,7 @@ var sortedCallingCodes = awesomePhonenumber.getSupportedCallingCodes().sort((a,
 var callingCodes = react.createListCollection({
   items: [...prioritizedCountryCodes, ...sortedCallingCodes]
 });
-var CountryCodeSelect = React28.forwardRef((props, ref) => {
+var CountryCodeSelect = React27.forwardRef((props, ref) => {
   const { t } = useTranslation();
   if (props.allowedCountryCodes) {
     callingCodes.items = callingCodes.items.filter(
@@ -3274,7 +3273,7 @@ var CountryCodeSelect = React28.forwardRef((props, ref) => {
       collection: callingCodes,
       lazyMount: true,
       "aria-label": t(texts15.countryCode),
-      variant: "rightSideSquare",
+      sideRadiusVariant: "rightSideSquare",
       children: callingCodes.items.map((code) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { as: "option", item: code, children: code.label }, code.label))
     }
   );
@@ -3288,7 +3287,7 @@ var texts15 = createTexts({
     sv: "Landskod"
   }
 });
-var PhoneNumberInput = React28.forwardRef((props, ref) => {
+var PhoneNumberInput = React27.forwardRef((props, ref) => {
   const {
     label: externalLabel,
     value: externalValue,
@@ -3386,7 +3385,7 @@ var texts16 = createTexts({
     sv: "Landskod"
   }
 });
-var Radio = React28.forwardRef((props, ref) => {
+var Radio = React27.forwardRef((props, ref) => {
   const { children, inputProps, rootRef, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.RadioGroup.Item, { ref: rootRef, ...rest, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.RadioGroup.ItemHiddenInput, { ref, ...inputProps }),
@@ -3395,13 +3394,13 @@ var Radio = React28.forwardRef((props, ref) => {
   ] });
 });
 Radio.displayName = "Radio";
-var RadioGroup = React28.forwardRef(
+var RadioGroup = React27.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(react.RadioGroup.Root, { ref, ...props, "aria-labelledby": "" });
   }
 );
 RadioGroup.displayName = "RadioGroup";
-var SearchInput = React28.forwardRef(
+var SearchInput = React27.forwardRef(
   (props, ref) => {
     const { t } = useTranslation();
     const { variant = "core", onReset, label, value } = props;
@@ -3445,7 +3444,7 @@ var texts17 = createTexts({
     en: "Reset search field"
   }
 });
-var Select = React28__namespace.forwardRef(
+var Select = React27__namespace.forwardRef(
   (props, ref) => {
     const {
       variant = "core",
@@ -3488,7 +3487,7 @@ var SelectLabel = (props) => {
   );
 };
 Select.displayName = "Select";
-var SelectItem = React28__namespace.forwardRef(
+var SelectItem = React27__namespace.forwardRef(
   (props, ref) => {
     const { item, children, description, ...rest } = props;
     const recipe = react.useSlotRecipe({ key: "select" });
@@ -3503,14 +3502,14 @@ var SelectItem = React28__namespace.forwardRef(
   }
 );
 SelectItem.displayName = "SelectItem";
-var SelectItemGroup = React28__namespace.forwardRef(function SelectItemGroup2(props, ref) {
+var SelectItemGroup = React27__namespace.forwardRef(function SelectItemGroup2(props, ref) {
   const { children, label, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Select.ItemGroup, { ...rest, ref, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.Select.ItemGroupLabel, { children: label }),
     children
   ] });
 });
-var SelectTrigger = React28__namespace.forwardRef(function SelectTrigger2(props, ref) {
+var SelectTrigger = React27__namespace.forwardRef(function SelectTrigger2(props, ref) {
   const { children, clearable, ...rest } = props;
   const recipe = react.useSlotRecipe({ key: "select" });
   const styles = recipe();
@@ -3522,7 +3521,7 @@ var SelectTrigger = React28__namespace.forwardRef(function SelectTrigger2(props,
     ] })
   ] });
 });
-var SelectClearTrigger = React28__namespace.forwardRef(function SelectClearTrigger2(props, ref) {
+var SelectClearTrigger = React27__namespace.forwardRef(function SelectClearTrigger2(props, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Select.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ jsxRuntime.jsx(
     CloseButton,
     {
@@ -3533,11 +3532,11 @@ var SelectClearTrigger = React28__namespace.forwardRef(function SelectClearTrigg
     }
   ) });
 });
-var SelectContent = React28__namespace.forwardRef(function SelectContent2(props, ref) {
+var SelectContent = React27__namespace.forwardRef(function SelectContent2(props, ref) {
   const { portalled = true, portalRef, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsxRuntime.jsx(react.Select.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Select.Content, { ...rest, ref }) }) });
 });
-var SelectValueText = React28__namespace.forwardRef(function SelectValueText2(props, ref) {
+var SelectValueText = React27__namespace.forwardRef(function SelectValueText2(props, ref) {
   const { children, withPlaceholder, placeholder, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Select.ValueText,
@@ -3561,7 +3560,7 @@ var SelectValueText = React28__namespace.forwardRef(function SelectValueText2(pr
 });
 var SelectItemText = react.Select.ItemText;
 var SelectRoot = react.Select.Root;
-var Switch = React28.forwardRef(
+var Switch = React27.forwardRef(
   (props, ref) => {
     const {
       rootRef,
@@ -3601,9 +3600,9 @@ var Switch = React28.forwardRef(
 );
 Switch.displayName = "Switch";
 var useLabelHeight = (label) => {
-  const labelRef = React28.useRef(null);
-  const [labelHeight, setLabelHeight] = React28.useState(0);
-  React28.useLayoutEffect(() => {
+  const labelRef = React27.useRef(null);
+  const [labelHeight, setLabelHeight] = React27.useState(0);
+  React27.useLayoutEffect(() => {
     const updateLabelHeight = () => {
       if (labelRef.current) {
         setLabelHeight(labelRef.current.offsetHeight);
@@ -3623,7 +3622,7 @@ var useLabelHeight = (label) => {
   }, [label]);
   return { labelRef, labelHeight };
 };
-var Textarea = React28.forwardRef(
+var Textarea = React27.forwardRef(
   (props, ref) => {
     const { label, variant = "core", ...fieldProps } = props;
     const recipe = react.useRecipe({ key: "textarea" });
@@ -3646,7 +3645,7 @@ var Textarea = React28.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-var PressableCard = React28.forwardRef(
+var PressableCard = React27.forwardRef(
   (props, ref) => {
     const recipe = react.useRecipe({ key: "pressableCard" });
     const [recipeProps, restProps] = recipe.splitVariantProps(props);
@@ -3655,7 +3654,7 @@ var PressableCard = React28.forwardRef(
   }
 );
 PressableCard.displayName = "PressableCard";
-var RadioCard = React28.forwardRef(
+var RadioCard = React27.forwardRef(
   (props, ref) => {
     const { inputProps, children, value, ariaLabel } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(react.RadioCard.Item, { ...props, children: [
@@ -3672,7 +3671,7 @@ var RadioCard = React28.forwardRef(
   }
 );
 RadioCard.displayName = "RadioCard";
-var RadioCardGroup = React28.forwardRef(
+var RadioCardGroup = React27.forwardRef(
   (props, ref) => {
     const {
       children,
@@ -3701,7 +3700,7 @@ var RadioCardGroup = React28.forwardRef(
 );
 RadioCardGroup.displayName = "RadioCardGroup";
 var RadioCardLabel = react.RadioCard.Label;
-var Separator = React28.forwardRef(
+var Separator = React27.forwardRef(
   (props, ref) => {
     const {
       size = "md",
@@ -3714,7 +3713,7 @@ var Separator = React28.forwardRef(
   }
 );
 Separator.displayName = "Separator";
-var StaticCard = React28.forwardRef(
+var StaticCard = React27.forwardRef(
   (props, ref) => {
     const recipe = react.useRecipe({ key: "staticCard" });
     const [recipeProps, restProps] = recipe.splitVariantProps(props);
@@ -3769,7 +3768,7 @@ var getCorrectIcon = ({ variant, size }) => {
   var _a5;
   return ((_a5 = icons[variant]) == null ? void 0 : _a5[size]) ?? react.Box;
 };
-var LineIcon = React28.forwardRef(
+var LineIcon = React27.forwardRef(
   function LineIcon2({
     variant,
     size = "md",
@@ -3844,7 +3843,7 @@ var InfoTag = ({
     ] })
   ] });
 };
-var TravelTag = React28.forwardRef(
+var TravelTag = React27.forwardRef(
   function TravelTag2({
     variant,
     size = "md",
@@ -3924,13 +3923,13 @@ var ExternalIcon = ({
   size === "lg" || size === "md" ? /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.LinkOutOutline24Icon, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.LinkOutOutline18Icon, { "aria-hidden": true }),
   /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: label })
 ] });
-var TextLink = React28.forwardRef(
+var TextLink = React27.forwardRef(
   ({ children, external, href, ...props }, ref) => {
     const { t } = useTranslation();
     const isExternal = external ?? Boolean((href == null ? void 0 : href.startsWith("http://")) || (href == null ? void 0 : href.startsWith("https://")));
     const externalLabel = t ? t(texts18.externalLink) : texts18.externalLink.en;
-    if (props.asChild && React28.isValidElement(children)) {
-      return /* @__PURE__ */ jsxRuntime.jsx(react.Link, { href, ...props, ref, children: React28.cloneElement(children, {
+    if (props.asChild && React27.isValidElement(children)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(react.Link, { href, ...props, ref, children: React27.cloneElement(children, {
         ...children.props,
         children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           children.props.children,
@@ -3956,7 +3955,7 @@ var texts18 = createTexts({
 var List = react.List.Root;
 var ListItem2 = react.List.Item;
 var ListIndicator = react.List.Indicator;
-var CargonetLogo = React28.forwardRef(
+var CargonetLogo = React27.forwardRef(
   (props, ref) => {
     const { colorPalette } = props;
     const mainColor = "#DF8200";
@@ -4115,8 +4114,8 @@ var fillRecipe = {
 };
 var Path = react.chakra("path", fillRecipe);
 var SVGGroup = react.chakra("g", fillRecipe);
-var VyLogo = React28.forwardRef((props, ref) => {
-  const id = React28.useId();
+var VyLogo = React27.forwardRef((props, ref) => {
+  const id = React27.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs(SvgBox, { ref, viewBox: "0 0 107 54", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Vy logo" }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -4236,7 +4235,7 @@ var VyLogo = React28.forwardRef((props, ref) => {
   ] });
 });
 VyLogo.displayName = "VyLogo";
-var VyLogoPride = React28.forwardRef(
+var VyLogoPride = React27.forwardRef(
   (props, ref) => {
     const pinkColor = "#ED6F99";
     const purpleColor = "#C06CF7";
@@ -4247,7 +4246,7 @@ var VyLogoPride = React28.forwardRef(
     const redColor = "#EA3323";
     const orangeColor = "#F09436";
     const yellowColor = "#FFFF54";
-    const id = React28.useId();
+    const id = React27.useId();
     return (
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       /* @__PURE__ */ jsxRuntime.jsxs(SvgBox, { ref, viewBox: "0 0 107 54", ...props, children: [
@@ -4450,7 +4449,7 @@ var VyLogoPride = React28.forwardRef(
   }
 );
 VyLogoPride.displayName = "VyLogoPride";
-var JumpButton = React28.forwardRef(
+var JumpButton = React27.forwardRef(
   (props, ref) => {
     const { direction, disabled, size = "sm" } = props;
     const { t } = useTranslation();
@@ -4485,7 +4484,7 @@ var texts19 = createTexts({
     en: "15 seconds backward"
   }
 });
-var PlayPauseButton = React28.forwardRef((props, ref) => {
+var PlayPauseButton = React27.forwardRef((props, ref) => {
   const { playing, disabled, size = "sm" } = props;
   const { t } = useTranslation();
   const recipe = react.useSlotRecipe({ key: "mediaControllerButton" });
@@ -4518,7 +4517,7 @@ var texts20 = createTexts({
     en: "Play"
   }
 });
-var SkipButton = React28.forwardRef(
+var SkipButton = React27.forwardRef(
   (props, ref) => {
     const { direction, disabled, size = "sm" } = props;
     const { t } = useTranslation();
@@ -4574,23 +4573,23 @@ var Nudge = (props) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Popover2, { defaultOpen: true, size, ...rest });
 };
-var NudgeTrigger = React28.forwardRef(({ ...props }, ref) => {
+var NudgeTrigger = React27.forwardRef(({ ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { ...props, ref });
 });
 NudgeTrigger.displayName = "NudgeTrigger";
-var NudgeContent = React28.forwardRef(
+var NudgeContent = React27.forwardRef(
   ({ showCloseButton = true, children, ...props }, ref) => {
-    const [currentStep, setCurrentStep] = React28.useState(1);
-    const childrenArray = React28__namespace.default.Children.toArray(children);
+    const [currentStep, setCurrentStep] = React27.useState(1);
+    const childrenArray = React27__namespace.default.Children.toArray(children);
     const { open } = react.usePopoverContext();
-    React28.useEffect(() => {
+    React27.useEffect(() => {
       setCurrentStep(1);
     }, [children, open]);
     const wizardPages = childrenArray.filter(
-      (child) => React28__namespace.default.isValidElement(child) && child.type.displayName === "NudgeWizardStep"
+      (child) => React27__namespace.default.isValidElement(child) && child.type.displayName === "NudgeWizardStep"
     );
     const restChildren = childrenArray.filter(
-      (child) => !React28__namespace.default.isValidElement(child) || child.type.displayName !== "NudgeWizardStep"
+      (child) => !React27__namespace.default.isValidElement(child) || child.type.displayName !== "NudgeWizardStep"
     );
     const totalSteps = wizardPages.length;
     const isLastStep = totalSteps === currentStep;
@@ -4671,7 +4670,7 @@ var NudgeWizardStep = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.chakra.div, { display: "flex", flexDirection: "column", gap: "1rem", width: "100%", children });
 };
 NudgeWizardStep.displayName = "NudgeWizardStep";
-var NudgeCloseTrigger = React28.forwardRef(({ children, ...props }, ref) => {
+var NudgeCloseTrigger = React27.forwardRef(({ children, ...props }, ref) => {
   const isStringChild = typeof children === "string";
   return /* @__PURE__ */ jsxRuntime.jsx(react.Popover.CloseTrigger, { ...props, ref, asChild: !isStringChild, children });
 });
@@ -4679,7 +4678,7 @@ NudgeCloseTrigger.displayName = "NudgeCloseTrigger";
 var [RootPropsProvider, useRootProps] = react.createContext({
   name: "RootPropsProvider"
 });
-var Pagination = React28__namespace.forwardRef(
+var Pagination = React27__namespace.forwardRef(
   (props, ref) => {
     const { getHref, children, ...rest } = props;
     const recipe = react.useSlotRecipe({ key: "pagination" });
@@ -4704,11 +4703,11 @@ var Pagination = React28__namespace.forwardRef(
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationEllipsis = React28__namespace.forwardRef((props, ref) => {
+var PaginationEllipsis = React27__namespace.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(ListItem2, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Pagination.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { cursor: "default", children: "..." }) }) });
 });
 PaginationEllipsis.displayName = "PaginationEllipsis";
-var PaginationItem = React28__namespace.forwardRef((props, ref) => {
+var PaginationItem = React27__namespace.forwardRef((props, ref) => {
   const rootProps = useRootProps();
   const { t } = useTranslation();
   const { page, totalPages } = react.usePaginationContext();
@@ -4741,7 +4740,7 @@ var PaginationItem = React28__namespace.forwardRef((props, ref) => {
   ) });
 });
 PaginationItem.displayName = "PaginationItem";
-var PaginationPrevTrigger = React28__namespace.forwardRef((props, ref) => {
+var PaginationPrevTrigger = React27__namespace.forwardRef((props, ref) => {
   const { page } = react.usePaginationContext();
   const recipe = react.useSlotRecipe({ key: "pagination" });
   const styles = recipe();
@@ -4781,7 +4780,7 @@ var PaginationPrevTrigger = React28__namespace.forwardRef((props, ref) => {
   ) });
 });
 PaginationPrevTrigger.displayName = "PaginationPrevTrigger";
-var PaginationNextTrigger = React28__namespace.forwardRef((props, ref) => {
+var PaginationNextTrigger = React27__namespace.forwardRef((props, ref) => {
   const { page, totalPages } = react.usePaginationContext();
   const recipe = react.useSlotRecipe({ key: "pagination" });
   const styles = recipe();
@@ -4861,17 +4860,17 @@ var texts23 = createTexts({
   }
 });
 var Popover2 = react.Popover.Root;
-var PopoverTrigger = React28.forwardRef(({ children, ...props }, ref) => {
+var PopoverTrigger = React27.forwardRef(({ children, ...props }, ref) => {
   const isStringChild = typeof children === "string";
   return /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Trigger, { ...props, ref, asChild: !isStringChild, children });
 });
 PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverContent = React28.forwardRef(
+var PopoverContent = React27.forwardRef(
   ({ children, showCloseButton = false, ...props }, ref) => {
     const { colorMode } = useColorMode();
-    const closeButtonRef = React28__namespace.default.useRef(null);
+    const closeButtonRef = React27__namespace.default.useRef(null);
     const { open } = react.usePopoverContext();
-    React28.useEffect(() => {
+    React27.useEffect(() => {
       if (showCloseButton && open && closeButtonRef.current) {
         closeButtonRef.current.focus();
       }
@@ -4905,7 +4904,7 @@ var ProgressDot = ({ isActive }) => {
     }
   );
 };
-var ProgressIndicator = React28.forwardRef(({ numberOfSteps, activeStep }, ref) => {
+var ProgressIndicator = React27.forwardRef(({ numberOfSteps, activeStep }, ref) => {
   const { t } = useTranslation();
   const recipe = react.useSlotRecipe({
     key: "progressIndicator"
@@ -5080,7 +5079,7 @@ var SporProvider = ({
     children
   ] }) }) });
 };
-var StepperContext = React28__namespace.default.createContext(null);
+var StepperContext = React27__namespace.default.createContext(null);
 var StepperProvider = ({
   activeStep,
   children,
@@ -5097,7 +5096,7 @@ var StepperProvider = ({
   );
 };
 var useStepper = () => {
-  const context = React28__namespace.default.useContext(StepperContext);
+  const context = React27__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"
@@ -5105,7 +5104,7 @@ var useStepper = () => {
   }
   return context;
 };
-var Stepper = React28.forwardRef(
+var Stepper = React27.forwardRef(
   function Stepper2(props, ref) {
     const {
       onClick = () => {
@@ -5253,7 +5252,7 @@ var getState = (stepNumber, activeStep) => {
   }
   return "disabled";
 };
-var Tabs = React28.forwardRef((props, ref) => {
+var Tabs = React27.forwardRef((props, ref) => {
   const { variant = "core", size = "sm" } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(react.Tabs.Root, { ...props, ref, variant, size });
 });
@@ -5262,7 +5261,7 @@ var TabsList = react.Tabs.List;
 var TabsTrigger = react.Tabs.Trigger;
 var TabsIndicator = react.Tabs.Indicator;
 var TabsContent = react.Tabs.Content;
-var Table = React28.forwardRef((props, ref) => {
+var Table = React27.forwardRef((props, ref) => {
   const { variant = "ghost", size, colorPalette = "green", children } = props;
   const recipe = react.useSlotRecipe({ key: "table" });
   const styles = recipe({ variant, size });
@@ -7624,7 +7623,8 @@ var fieldSlotRecipe = react.defineSlotRecipe({
       textStyle: "xs",
       width: "fit-content",
       position: "absolute",
-      bottom: -5,
+      top: "100%",
+      // position below parent
       left: 3,
       zIndex: "dropdown",
       maxWidth: "50ch",
@@ -9061,7 +9061,9 @@ var selectSlotRecipe = react.defineSlotRecipe({
           outline: "1px solid",
           outlineColor: "floating.outline"
         }
-      },
+      }
+    },
+    sideRadiusVariant: {
       rightSideSquare: {
         control: {
           outline: "1px solid",