@vygruppen/spor-react 12.2.1 → 12.3.0

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group as Group$1, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, ClientOnly as ClientOnly$1, Field as Field$1, defineSlotRecipe, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, Drawer as Drawer$1, Grid, GridItem, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCard, Fieldset as Fieldset$1, InputElement, Input as Input$1, List as List$1, ListItem, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, Switch as Switch$1, Textarea as Textarea$1, FieldLabel as FieldLabel$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, Center, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, VisuallyHidden, defineConfig, ChakraProvider, Toaster as Toaster$1, Toast, Icon } from '@chakra-ui/react';
+import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group as Group$1, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, ClientOnly as ClientOnly$1, Field, defineStyle, defineSlotRecipe, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, Drawer as Drawer$1, Grid, GridItem, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCard, Fieldset as Fieldset$1, Input as Input$1, InputElement, List as List$1, ListItem, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, Switch as Switch$1, Textarea as Textarea$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, Center, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, VisuallyHidden, defineConfig, ChakraProvider, Toaster as Toaster$1, Toast, Icon } from '@chakra-ui/react';
 export { Box, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableBody, TableCaption, TableCell, TableColumn, TableColumnHeader, TableFooter, TableHeader, TableRoot, TableRow, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useToken } from '@chakra-ui/react';
 import { DropdownDownFill24Icon, CopyOutline18Icon, CheckmarkFill18Icon, CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, DropdownDownFill18Icon, ServiceFill24Icon, WarningFill24Icon, DropdownRightFill18Icon, CalendarOutline24Icon, ArrowLeftFill24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill24Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, LinkOutOutline24Icon, QuestionFill24Icon, ErrorOutline24Icon, SuccessFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon, SuccessFill18Icon } from '@vygruppen/spor-icon-react';
-import * as React29 from 'react';
-import React29__default, { forwardRef, createContext, useId, cloneElement, useEffect, useRef, useState, isValidElement, useMemo, useLayoutEffect, useContext } from 'react';
+import * as React28 from 'react';
+import React28__default, { forwardRef, createContext, useId, cloneElement, useEffect, useRef, useState, isValidElement, useMemo, useLayoutEffect, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { spinnerColorData, inlineLoaderColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerLightData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData } from '@vygruppen/spor-loader';
 import ReactLottie from 'lottie-react';
@@ -540,7 +540,7 @@ var skeletonRecipe = defineRecipe({
     }
   }
 });
-var SkeletonCircle = React29.forwardRef(function SkeletonCircle2(props, ref) {
+var SkeletonCircle = React28.forwardRef(function SkeletonCircle2(props, ref) {
   const recipe = useRecipe({ recipe: skeletonRecipe });
   const [recipeProps, restProps] = recipe.splitVariantProps({
     loading: true,
@@ -816,7 +816,7 @@ var codeRecipie = defineRecipe({
   }
 });
 var StyledCode = chakra(Code$1, codeRecipie);
-var Code = React29__default.forwardRef(
+var Code = React28__default.forwardRef(
   function Code2(props, ref) {
     return /* @__PURE__ */ jsx(StyledCode, { ...props, ref });
   }
@@ -850,7 +850,7 @@ var Text3 = forwardRef(
     return /* @__PURE__ */ jsx(Text, { ...rest, textStyle: variant, ref });
   }
 );
-var ClipboardIcon = React29.forwardRef((props, ref) => {
+var ClipboardIcon = React28.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     Clipboard$1.Indicator,
     {
@@ -862,7 +862,7 @@ var ClipboardIcon = React29.forwardRef((props, ref) => {
   );
 });
 ClipboardIcon.displayName = "ClipboardIcon";
-var ClipboardCopyText = React29.forwardRef((props, ref) => {
+var ClipboardCopyText = React28.forwardRef((props, ref) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsx(
     Clipboard$1.Indicator,
@@ -875,7 +875,7 @@ var ClipboardCopyText = React29.forwardRef((props, ref) => {
   );
 });
 ClipboardCopyText.displayName = "ClipboardCopyText";
-var ClipboardButton = React29.forwardRef((props, ref) => {
+var ClipboardButton = React28.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(Clipboard$1.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { ref, size: "xs", leftIcon: /* @__PURE__ */ jsx(ClipboardIcon, {}), ...props, children: /* @__PURE__ */ jsx(ClipboardCopyText, {}) }) });
 });
 ClipboardButton.displayName = "ClipboardButton";
@@ -959,7 +959,7 @@ var FloatingActionButton = forwardRef(
     placement = "bottom right",
     ...props
   }, ref) => {
-    const [isTextVisible, setIsTextVisible] = React29__default.useState(
+    const [isTextVisible, setIsTextVisible] = React28__default.useState(
       externalIsTextVisible === void 0 ? false : externalIsTextVisible
     );
     const scrollDirection = useScrollDirection();
@@ -1000,11 +1000,11 @@ var FloatingActionButton = forwardRef(
 );
 FloatingActionButton.displayName = "FloatingActionButton";
 var useScrollDirection = () => {
-  const [scrollDirection, setScrollDirection] = React29__default.useState(null);
-  const lastScrollPosition = React29__default.useRef(
+  const [scrollDirection, setScrollDirection] = React28__default.useState(null);
+  const lastScrollPosition = React28__default.useRef(
     globalThis.window === void 0 ? 0 : window.scrollY
   );
-  React29__default.useEffect(() => {
+  React28__default.useEffect(() => {
     const onScroll = () => {
       const delta = window.scrollY - lastScrollPosition.current;
       if (delta === 0) {
@@ -1322,12 +1322,12 @@ var texts6 = createTexts({
 });
 var Breadcrumb = forwardRef(
   ({ children, ...props }, ref) => {
-    const validChildren = React29__default.Children.toArray(children).filter(
-      (element) => React29__default.isValidElement(element)
+    const validChildren = React28__default.Children.toArray(children).filter(
+      (element) => React28__default.isValidElement(element)
     );
     return /* @__PURE__ */ jsx(Breadcrumb$1.Root, { ref, ...props, children: /* @__PURE__ */ jsx(Breadcrumb$1.List, { children: validChildren.map((child, index) => {
       const isLast = index === validChildren.length - 1;
-      return /* @__PURE__ */ jsxs(React29__default.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React28__default.Fragment, { children: [
         /* @__PURE__ */ jsx(Breadcrumb$1.Item, { children: child }),
         !isLast && /* @__PURE__ */ jsx(Breadcrumb$1.Separator, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(DropdownRightFill18Icon, {}) })
       ] }, index);
@@ -1357,7 +1357,7 @@ function ColorModeIcon() {
   const { colorMode } = useColorMode();
   return colorMode === "dark" ? /* @__PURE__ */ jsx(LuMoon, {}) : /* @__PURE__ */ jsx(LuSun, {});
 }
-var ColorModeButton = React29.forwardRef(function ColorModeButton2(props, ref) {
+var ColorModeButton = React28.forwardRef(function ColorModeButton2(props, ref) {
   const { toggleColorMode } = useColorMode();
   return /* @__PURE__ */ jsx(ClientOnly$1, { fallback: /* @__PURE__ */ jsx(Skeleton$1, { boxSize: "8" }), children: /* @__PURE__ */ jsx(
     IconButton$1,
@@ -1378,25 +1378,94 @@ var ColorModeButton = React29.forwardRef(function ColorModeButton2(props, ref) {
     }
   ) });
 });
-var Field = React29.forwardRef(
+var FloatingLabel = forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(Field.Label, { ref, ...props, css: floatingLabelStyles })
+);
+FloatingLabel.displayName = "FloatingLabel";
+var floatingLabelStyles = defineStyle({
+  paddingX: 3,
+  fontWeight: "normal",
+  fontSize: ["mobile.xs", "desktop.xs"],
+  color: "text",
+  pointerEvents: "none",
+  zIndex: "docked",
+  _disabled: {
+    opacity: 0.4
+  },
+  pos: "absolute",
+  top: "0.3rem",
+  transition: "position",
+  _peerPlaceholderShown: {
+    /* For when input is not in focus */
+    top: "0.9rem",
+    color: "text",
+    fontSize: ["mobile.sm", "desktop.sm"]
+  },
+  _peerFocusVisible: {
+    /* For when input is in focus */
+    fontSize: ["mobile.xs", "desktop.xs"],
+    color: "text",
+    top: "0.3rem"
+  }
+});
+var Label = (props) => /* @__PURE__ */ jsx(Field.Label, { ...props, css: labelStyles });
+var labelStyles = defineStyle({
+  fontWeight: "normal",
+  paddingBottom: 1,
+  paddingX: 1,
+  fontSize: ["mobile.xs", "desktop.xs"],
+  color: "text",
+  pointerEvents: "none",
+  zIndex: "docked",
+  _disabled: {
+    opacity: 0.4
+  }
+});
+var Field3 = React28.forwardRef(
   (props, ref) => {
-    const { label, children, helperText, errorText, ...rest } = props;
-    const recipe = useSlotRecipe({ key: "field" });
-    const styles = recipe({ label, helperText, errorText });
-    return /* @__PURE__ */ jsxs(Field$1.Root, { ref, ...rest, css: styles.root, children: [
+    const {
+      label,
       children,
-      helperText && /* @__PURE__ */ jsx(Field$1.HelperText, { children: helperText }),
-      label && /* @__PURE__ */ jsx(Field$1.Label, { css: styles.label, children: label }),
-      errorText && /* @__PURE__ */ jsx(Field$1.ErrorText, { children: errorText })
+      helperText,
+      errorText,
+      floatingLabel = false,
+      disabled,
+      invalid,
+      readOnly,
+      required,
+      direction,
+      ...rest
+    } = props;
+    const recipe = useSlotRecipe({ key: "field" });
+    const styles = recipe();
+    return /* @__PURE__ */ jsxs(Stack, { gap: "2", ref, ...rest, width: "100%", children: [
+      /* @__PURE__ */ jsxs(
+        Field.Root,
+        {
+          disabled,
+          invalid,
+          readOnly,
+          required,
+          css: styles.root,
+          direction,
+          children: [
+            label && !floatingLabel && /* @__PURE__ */ jsx(Label, { children: label }),
+            children,
+            label && floatingLabel && /* @__PURE__ */ jsx(FloatingLabel, { children: label }),
+            errorText && /* @__PURE__ */ jsx(Field.ErrorText, { children: errorText })
+          ]
+        }
+      ),
+      helperText && /* @__PURE__ */ jsx(Text3, { fontSize: "sm", color: "text.tertiary", children: helperText })
     ] });
   }
 );
-Field.displayName = "Field";
-var FieldErrorText = React29.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(Field$1.ErrorText, { ref, children: props.children });
+Field3.displayName = "Field";
+var FieldErrorText = React28.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Field.ErrorText, { ref, children: props.children });
 });
 FieldErrorText.displayName = "FieldErrorText";
-var FieldLabel = Field$1.Label;
+var FieldLabel = Field.Label;
 var accordionAnatomy = createAnatomy("accordion").parts(
   "root",
   "itemTrigger",
@@ -2357,18 +2426,20 @@ var StyledField = forwardRef(
 var DatePicker = forwardRef(
   ({
     variant,
-    errorMessage,
+    errorText,
     minHeight,
     showYearNavigation,
     withPortal = true,
     width = "auto",
+    invalid = false,
+    helperText,
     ...props
   }, externalRef) => {
     const chakraFieldProps = useFieldContext();
     const state = useDatePickerState({
       ...props,
       shouldCloseOnSelect: true,
-      errorMessage,
+      errorMessage: errorText,
       isRequired: props.isRequired ?? (chakraFieldProps == null ? void 0 : chakraFieldProps.required),
       validationState: (chakraFieldProps == null ? void 0 : chakraFieldProps.invalid) ? "invalid" : "valid"
     });
@@ -2407,12 +2478,14 @@ var DatePicker = forwardRef(
         width,
         children: /* @__PURE__ */ jsxs(Popover$1.Root, { ...dialogProps, children: [
           /* @__PURE__ */ jsx(
-            Field,
+            Field3,
             {
               display: "inline-flex",
               id: inputGroupId,
               "aria-labelledby": labelId,
-              errorText: errorMessage,
+              errorText,
+              invalid,
+              helperText,
               children: /* @__PURE__ */ jsx(PopoverAnchor, { children: /* @__PURE__ */ jsxs(
                 StyledField,
                 {
@@ -2492,13 +2565,18 @@ function DateRangePicker({
   startName,
   endName,
   withPortal = true,
+  errorText,
+  helperText,
+  invalid,
   ...props
 }) {
   const fieldContextPRops = useFieldContext();
   const state = useDateRangePickerState({
     ...props,
     shouldCloseOnSelect: true,
-    isRequired: props.isRequired ?? (fieldContextPRops == null ? void 0 : fieldContextPRops.required),
+    isInvalid: invalid,
+    errorMessage: errorText,
+    isRequired: props.required ?? (fieldContextPRops == null ? void 0 : fieldContextPRops.required),
     validationState: (fieldContextPRops == null ? void 0 : fieldContextPRops.invalid) ? "invalid" : "valid"
   });
   const ref = useRef(null);
@@ -2525,54 +2603,65 @@ function DateRangePicker({
   return /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsxs(Box, { position: "relative", display: "inline-flex", flexDirection: "column", children: [
     props.label && /* @__PURE__ */ jsx("label", { ...labelProps, htmlFor: datePickerId, children: props.label }),
     /* @__PURE__ */ jsxs(Popover$1.Root, { ...dialogProps, children: [
-      /* @__PURE__ */ jsx(Field, { width: "auto", display: "inline-flex", id: datePickerId, children: /* @__PURE__ */ jsx(PopoverAnchor, { children: /* @__PURE__ */ jsxs(
-        StyledField,
+      /* @__PURE__ */ jsx(
+        Field3,
         {
-          alignItems: "center",
-          paddingX: 3,
-          variant,
-          onClick: onFieldClick,
-          minHeight,
-          children: [
-            variant && /* @__PURE__ */ jsx(Popover$1.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
-              CalendarTriggerButton,
-              {
-                variant,
-                ref,
-                ...buttonProps
-              }
-            ) }),
-            /* @__PURE__ */ jsx(
-              DateField,
-              {
-                ...startFieldProps,
-                name: startName,
-                label: props.startLabel,
-                labelProps
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                as: "span",
-                "aria-hidden": "true",
-                paddingRight: "2",
-                paddingLeft: "2",
-                children: "\u2013"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              DateField,
-              {
-                ...endFieldProps,
-                name: endName,
-                label: props.endLabel,
-                labelProps
-              }
-            )
-          ]
+          width: "auto",
+          display: "inline-flex",
+          id: datePickerId,
+          errorText,
+          helperText,
+          invalid,
+          children: /* @__PURE__ */ jsx(PopoverAnchor, { children: /* @__PURE__ */ jsxs(
+            StyledField,
+            {
+              alignItems: "center",
+              paddingX: 3,
+              variant,
+              onClick: onFieldClick,
+              minHeight,
+              children: [
+                variant && /* @__PURE__ */ jsx(Popover$1.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  CalendarTriggerButton,
+                  {
+                    variant,
+                    ref,
+                    ...buttonProps
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  DateField,
+                  {
+                    ...startFieldProps,
+                    name: startName,
+                    label: props.startLabel,
+                    labelProps
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    as: "span",
+                    "aria-hidden": "true",
+                    paddingRight: "2",
+                    paddingLeft: "2",
+                    children: "\u2013"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  DateField,
+                  {
+                    ...endFieldProps,
+                    name: endName,
+                    label: props.endLabel,
+                    labelProps
+                  }
+                )
+              ]
+            }
+          ) })
         }
-      ) }) }),
+      ),
       state.isOpen && withPortal && /* @__PURE__ */ jsx(Portal, { children: popoverContent }),
       state.isOpen && !withPortal && popoverContent
     ] })
@@ -2619,7 +2708,7 @@ var TimePicker = ({
   name,
   ...boxProps
 }) => {
-  const { disabled: fieldDisabled, invalid: fieldInvalid } = useFieldContext4() ?? {};
+  const { disabled: fieldDisabled, invalid: fieldInvalid } = useFieldContext() ?? {};
   const isDisabled = isDisabledExternally ?? fieldDisabled ?? false;
   const { t } = useTranslation();
   const locale = useCurrentLocale();
@@ -2666,7 +2755,7 @@ var TimePicker = ({
   const ariaLabel = `${inputLabel} \u2013 ${t(
     texts11.selectedTimeIs(`${(dateTime == null ? void 0 : dateTime.hour) ?? 0} ${(dateTime == null ? void 0 : dateTime.minute) ?? 0}`)
   )}`;
-  return /* @__PURE__ */ jsx(Field, { as: "time", ...boxProps, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Field3, { as: "time", ...boxProps, children: /* @__PURE__ */ jsxs(
     StyledField,
     {
       width: "fit-content",
@@ -2746,10 +2835,7 @@ var texts11 = createTexts({
     sv: "minuter"
   }
 });
-function useFieldContext4() {
-  throw new Error("Function not implemented.");
-}
-var DialogContent = React29.forwardRef((props, ref) => {
+var DialogContent = React28.forwardRef((props, ref) => {
   const {
     children,
     portalled = true,
@@ -2763,7 +2849,7 @@ var DialogContent = React29.forwardRef((props, ref) => {
   ] });
 });
 DialogContent.displayName = "DialogContent";
-var DialogCloseTrigger = React29.forwardRef(function DialogCloseTrigger2(props, ref) {
+var DialogCloseTrigger = React28.forwardRef(function DialogCloseTrigger2(props, ref) {
   return /* @__PURE__ */ jsx(Dialog.CloseTrigger, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { size: "md" }) });
 });
 var DialogRoot = Dialog.Root;
@@ -2962,7 +3048,7 @@ var CardSelectTrigger = forwardRef(
   }
 );
 CardSelectTrigger.displayName = "CardSelectTrigger";
-var Checkbox = React29.forwardRef(
+var Checkbox = React28.forwardRef(
   (props, ref) => {
     const { children, inputProps, rootRef, ...rest } = props;
     return /* @__PURE__ */ jsxs(Checkbox$1.Root, { ref: rootRef, ...rest, children: [
@@ -2981,15 +3067,24 @@ var CheckboxGroup = forwardRef(
 );
 CheckboxGroup.displayName = "CheckboxGroup";
 var ChoiceChip = forwardRef(
-  ({ children, icon, ...rootProps }, ref) => {
-    return /* @__PURE__ */ jsx(CheckboxCard.Root, { ...rootProps, children: /* @__PURE__ */ jsx(CheckboxCard.Context, { children: ({ checked }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(CheckboxCard.HiddenInput, { ref }),
-      /* @__PURE__ */ jsx(CheckboxCard.Control, { children: /* @__PURE__ */ jsx(CheckboxCard.Content, { children: /* @__PURE__ */ jsxs(CheckboxCard.Label, { children: [
-        icon && /* @__PURE__ */ jsx(Span, { width: "24px", children: checked ? icon.checked : icon.default }),
-        rootProps.chipType !== "icon" && children,
-        rootProps.chipType === "filter" && checked && /* @__PURE__ */ jsx(CloseOutline24Icon, {})
-      ] }) }) })
-    ] }) }) });
+  ({ children, icon, onCheckedChange, ...rootProps }, ref) => {
+    return /* @__PURE__ */ jsx(
+      CheckboxCard.Root,
+      {
+        ...rootProps,
+        ...onCheckedChange && {
+          onCheckedChange: (details) => onCheckedChange(!!details.checked)
+        },
+        children: /* @__PURE__ */ jsx(CheckboxCard.Context, { children: ({ checked }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(CheckboxCard.HiddenInput, { ref }),
+          /* @__PURE__ */ jsx(CheckboxCard.Control, { children: /* @__PURE__ */ jsx(CheckboxCard.Content, { children: /* @__PURE__ */ jsxs(CheckboxCard.Label, { children: [
+            icon && /* @__PURE__ */ jsx(Span, { width: "24px", children: checked ? icon.checked : icon.default }),
+            rootProps.chipType !== "icon" && children,
+            rootProps.chipType === "filter" && checked && /* @__PURE__ */ jsx(CloseOutline24Icon, {})
+          ] }) }) })
+        ] }) })
+      }
+    );
   }
 );
 ChoiceChip.displayName = "ChoiceChip";
@@ -3123,6 +3218,11 @@ var Combobox = forwardRef(
           "aria-haspopup": "listbox",
           ref: inputRef,
           role: "combobox",
+          errorText: props.errorText,
+          helperText: props.helperText,
+          required: props.required,
+          disabled: props.disabled,
+          invalid: props.invalid,
           label,
           variant,
           "aria-expanded": state.isOpen,
@@ -3297,36 +3397,6 @@ var inputRecipe = defineRecipe({
     variant: "core"
   }
 });
-var InputGroup = React29.forwardRef(
-  (props, ref) => {
-    const {
-      startElement,
-      startElementProps,
-      endElement,
-      endElementProps,
-      label,
-      children,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsxs(Group$1, { ref, ...rest, children: [
-      startElement && /* @__PURE__ */ jsx(
-        InputElement,
-        {
-          pointerEvents: "none",
-          paddingX: 2,
-          ...startElementProps,
-          children: startElement
-        }
-      ),
-      React29.cloneElement(children, {
-        ...children.props
-      }),
-      label && /* @__PURE__ */ jsx(FieldLabel, { left: startElement ? 4 : "0", right: endElement ? 4 : 0, children: label }),
-      endElement && /* @__PURE__ */ jsx(InputElement, { placement: "end", paddingX: 2, ...endElementProps, children: endElement })
-    ] });
-  }
-);
-InputGroup.displayName = "InputGroup";
 var StyledInput = chakra(Input$1, inputRecipe);
 var Input = forwardRef(
   ({
@@ -3338,29 +3408,40 @@ var Input = forwardRef(
     errorText,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx(Field, { invalid, helperText, errorText, children: /* @__PURE__ */ jsx(
-      InputGroup,
+    return /* @__PURE__ */ jsxs(
+      Field3,
       {
-        endElement: endElement && endElement,
-        startElement: startElement && startElement,
-        width: "100%",
-        position: "relative",
-        label,
-        children: /* @__PURE__ */ jsx(
-          StyledInput,
-          {
-            "data-attachable": true,
-            ref,
-            className: "peer",
-            overflow: "hidden",
-            paddingLeft: startElement ? "2.6rem" : void 0,
-            paddingRight: endElement ? "2.6rem" : void 0,
-            placeholder: "",
-            ...props
-          }
-        )
+        invalid,
+        helperText,
+        errorText,
+        label: (
+          // Render startElement invisibly to align label text with input content when an icon is present
+          /* @__PURE__ */ jsxs(Flex, { children: [
+            /* @__PURE__ */ jsx(Box, { visibility: "hidden", children: startElement }),
+            label
+          ] })
+        ),
+        floatingLabel: true,
+        children: [
+          startElement && /* @__PURE__ */ jsx(InputElement, { pointerEvents: "none", paddingX: 2, children: startElement }),
+          /* @__PURE__ */ jsx(
+            StyledInput,
+            {
+              "data-attachable": true,
+              ref,
+              focusVisibleRing: "outside",
+              overflow: "hidden",
+              paddingLeft: startElement ? "2.6rem" : void 0,
+              paddingRight: endElement ? "2.6rem" : void 0,
+              ...props,
+              className: `peer ${props.className}`,
+              placeholder: ""
+            }
+          ),
+          endElement && /* @__PURE__ */ jsx(InputElement, { placement: "end", paddingX: 2, children: endElement })
+        ]
       }
-    ) });
+    );
   }
 );
 Input.displayName = "Input";
@@ -3438,7 +3519,7 @@ function Option({ item, state }) {
   }, []);
   return /* @__PURE__ */ jsx(OptionContext.Provider, { value: { labelProps, descriptionProps }, children: /* @__PURE__ */ jsx(ListItem, { ...optionProps, ...dataFields, ref, css: styles.item, children: item.rendered }) });
 }
-var OptionContext = React29__default.createContext({
+var OptionContext = React28__default.createContext({
   labelProps: {},
   descriptionProps: {}
 });
@@ -3658,53 +3739,73 @@ var nativeSelectSlotRecipe = defineSlotRecipe({
     }
   }
 });
-var NativeSelect = React29.forwardRef(function NativeSelect2(props, ref) {
+var NativeSelect = React28.forwardRef(function NativeSelect2(props, ref) {
   const {
     children,
     variant = "core",
     label,
     invalid,
     disabled,
+    required,
+    helperText,
+    errorText,
     ...rest
   } = props;
   const recipe = useSlotRecipe({ recipe: nativeSelectSlotRecipe });
   const styles = recipe({ variant });
-  return /* @__PURE__ */ jsx(Field, { label, invalid, disabled, children: /* @__PURE__ */ jsxs(
-    NativeSelect$1.Root,
+  return /* @__PURE__ */ jsx(
+    Field3,
     {
-      ref,
-      css: styles.root,
-      "aria-disabled": disabled,
-      children: [
-        /* @__PURE__ */ jsx(
-          NativeSelect$1.Field,
-          {
-            css: styles.field,
-            "aria-invalid": invalid,
-            ...rest,
-            children
-          }
-        ),
-        /* @__PURE__ */ jsx(NativeSelect$1.Indicator, { css: styles.icon, children: /* @__PURE__ */ jsx(DropdownDownFill18Icon, {}) })
-      ]
+      label,
+      invalid,
+      disabled,
+      required,
+      helperText,
+      errorText,
+      floatingLabel: true,
+      children: /* @__PURE__ */ jsxs(
+        NativeSelect$1.Root,
+        {
+          ref,
+          css: styles.root,
+          "aria-disabled": disabled,
+          children: [
+            /* @__PURE__ */ jsx(
+              NativeSelect$1.Field,
+              {
+                css: styles.field,
+                "aria-invalid": invalid,
+                ...rest,
+                children
+              }
+            ),
+            /* @__PURE__ */ jsx(NativeSelect$1.Indicator, { css: styles.icon, children: /* @__PURE__ */ jsx(DropdownDownFill18Icon, {}) })
+          ]
+        }
+      )
     }
-  ) });
+  );
 });
 var numericStepperRecipe = defineSlotRecipe({
   slots: numericStepperAnatomy.keys(),
   className: "spor-numeric-stepper",
   base: {
     root: {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center"
+      "& > div": {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center"
+      }
     },
     input: {
       fontSize: "sm",
       fontWeight: "bold",
       marginX: 0.5,
+      padding: 0,
       paddingX: 0.5,
       borderRadius: "xs",
+      outline: "none",
+      height: "auto",
       textAlign: "center",
       transitionProperty: "common",
       transitionDuration: "fast",
@@ -3748,8 +3849,8 @@ var numericStepperRecipe = defineSlotRecipe({
     }
   }
 });
-var NumericStepper = React29__default.forwardRef(
-  ({
+var NumericStepper = React28__default.forwardRef((props) => {
+  const {
     name: nameProp,
     id: idProp,
     value: valueProp,
@@ -3761,101 +3862,101 @@ var NumericStepper = React29__default.forwardRef(
     withInput = true,
     stepSize = 1,
     showZero = false,
-    ariaLabelContext = { singular: "", plural: "" }
-  }) => {
-    const addButtonRef = useRef(null);
-    const { t } = useTranslation();
-    const recipe = useSlotRecipe({ recipe: numericStepperRecipe });
-    const styles = recipe();
-    const [value, onChange] = useControllableState({
-      value: valueProp,
-      onChange: onChangeProp,
-      defaultValue
-    });
-    const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
-    const focusOnAddButton = () => {
-      var _a5;
-      (_a5 = addButtonRef.current) == null ? void 0 : _a5.focus();
-    };
-    return /* @__PURE__ */ jsxs(Field, { css: styles.root, flexDirection: "row", width: "auto", children: [
-      /* @__PURE__ */ jsx(
-        VerySmallButton,
-        {
-          icon: /* @__PURE__ */ jsx(SubtractIcon, { stepLabel: clampedStepSize }),
-          "aria-label": t(
-            texts13.decrementButtonAriaLabel(
-              clampedStepSize,
-              stepSize === 1 ? ariaLabelContext.singular : ariaLabelContext.plural
-            )
-          ),
-          onClick: () => {
-            onChange(Math.max(value - clampedStepSize, minValue));
-            if (Math.max(value - clampedStepSize, minValue) <= minValue) {
-              focusOnAddButton();
-            }
-          },
-          visibility: value <= minValue ? "hidden" : "visible",
-          disabled,
-          id: value <= minValue ? void 0 : idProp
-        }
-      ),
-      withInput ? /* @__PURE__ */ jsx(
-        chakra.input,
-        {
-          min: minValue,
-          max: maxValue,
-          name: nameProp,
-          value,
-          disabled,
-          id: !showZero && value === 0 ? void 0 : idProp,
-          css: styles.input,
-          width: `${Math.max(value.toString().length + 1, 3)}ch`,
-          visibility: !showZero && value === 0 ? "hidden" : "visible",
-          "aria-live": "assertive",
-          "aria-label": ariaLabelContext.plural === "" ? "" : t(texts13.currentNumberAriaLabel(ariaLabelContext.plural)),
-          onChange: (e) => {
-            const numericInput = Number(e.target.value);
-            if (Number.isNaN(numericInput)) {
-              return;
-            }
-            onChange(Math.max(Math.min(numericInput, maxValue), minValue));
-            if (!showZero && Math.max(Math.min(numericInput, maxValue), minValue) === 0) {
-              focusOnAddButton();
-            }
+    ariaLabelContext = { singular: "", plural: "" },
+    ...rest
+  } = props;
+  const addButtonRef = useRef(null);
+  const { t } = useTranslation();
+  const recipe = useSlotRecipe({ recipe: numericStepperRecipe });
+  const styles = recipe();
+  const [value, onChange] = useControllableState({
+    value: valueProp,
+    onChange: onChangeProp,
+    defaultValue
+  });
+  const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
+  const focusOnAddButton = () => {
+    var _a5;
+    (_a5 = addButtonRef.current) == null ? void 0 : _a5.focus();
+  };
+  return /* @__PURE__ */ jsxs(Field3, { css: styles.root, width: "auto", ...rest, children: [
+    /* @__PURE__ */ jsx(
+      VerySmallButton,
+      {
+        icon: /* @__PURE__ */ jsx(SubtractIcon, { stepLabel: clampedStepSize }),
+        "aria-label": t(
+          texts13.decrementButtonAriaLabel(
+            clampedStepSize,
+            stepSize === 1 ? ariaLabelContext.singular : ariaLabelContext.plural
+          )
+        ),
+        onClick: () => {
+          onChange(Math.max(value - clampedStepSize, minValue));
+          if (Math.max(value - clampedStepSize, minValue) <= minValue) {
+            focusOnAddButton();
+          }
+        },
+        visibility: value <= minValue ? "hidden" : "visible",
+        disabled,
+        id: value <= minValue ? void 0 : idProp
+      }
+    ),
+    withInput ? /* @__PURE__ */ jsx(
+      Input$1,
+      {
+        min: minValue,
+        max: maxValue,
+        name: nameProp,
+        value,
+        disabled,
+        id: !showZero && value === 0 ? void 0 : idProp,
+        css: styles.input,
+        width: `${Math.max(value.toString().length + 1, 3)}ch`,
+        visibility: !showZero && value === 0 ? "hidden" : "visible",
+        "aria-live": "assertive",
+        "aria-label": ariaLabelContext.plural === "" ? "" : t(texts13.currentNumberAriaLabel(ariaLabelContext.plural)),
+        onChange: (e) => {
+          const numericInput = Number(e.target.value);
+          if (Number.isNaN(numericInput)) {
+            return;
+          }
+          onChange(Math.max(Math.min(numericInput, maxValue), minValue));
+          if (!showZero && Math.max(Math.min(numericInput, maxValue), minValue) === 0) {
+            focusOnAddButton();
           }
         }
-      ) : /* @__PURE__ */ jsx(
-        chakra.text,
-        {
-          css: styles,
-          visibility: !showZero && value === 0 ? "hidden" : "visible",
-          "aria-live": "assertive",
-          "aria-label": ariaLabelContext.plural === "" ? "" : t(texts13.currentNumberAriaLabel(ariaLabelContext.plural)),
-          children: value
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        VerySmallButton,
-        {
-          ref: addButtonRef,
-          icon: /* @__PURE__ */ jsx(AddIcon, { stepLabel: clampedStepSize }),
-          "aria-label": t(
-            texts13.incrementButtonAriaLabel(
-              clampedStepSize,
-              stepSize === 1 ? ariaLabelContext.singular : ariaLabelContext.plural
-            )
-          ),
-          onClick: () => onChange(Math.min(value + clampedStepSize, maxValue)),
-          visibility: value >= maxValue ? "hidden" : "visible",
-          disabled,
-          id: value >= maxValue ? void 0 : idProp
-        }
-      )
-    ] });
-  }
-);
+      }
+    ) : /* @__PURE__ */ jsx(
+      chakra.text,
+      {
+        css: styles,
+        visibility: !showZero && value === 0 ? "hidden" : "visible",
+        "aria-live": "assertive",
+        "aria-label": ariaLabelContext.plural === "" ? "" : t(texts13.currentNumberAriaLabel(ariaLabelContext.plural)),
+        children: value
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      VerySmallButton,
+      {
+        ref: addButtonRef,
+        icon: /* @__PURE__ */ jsx(AddIcon, { stepLabel: clampedStepSize }),
+        "aria-label": t(
+          texts13.incrementButtonAriaLabel(
+            clampedStepSize,
+            stepSize === 1 ? ariaLabelContext.singular : ariaLabelContext.plural
+          )
+        ),
+        onClick: () => onChange(Math.min(value + clampedStepSize, maxValue)),
+        visibility: value >= maxValue ? "hidden" : "visible",
+        disabled,
+        id: value >= maxValue ? void 0 : idProp
+      }
+    )
+  ] });
+});
 NumericStepper.displayName = "NumericStepper";
-var VerySmallButton = React29__default.forwardRef((props, ref) => {
+var VerySmallButton = React28__default.forwardRef((props, ref) => {
   const recipe = useSlotRecipe({ recipe: numericStepperRecipe });
   const styles = recipe({ colorPalette: "default" });
   return /* @__PURE__ */ jsx(
@@ -3983,7 +4084,7 @@ var PasswordInput = forwardRef(
   }
 );
 PasswordInput.displayName = "PasswordInput";
-var VisibilityTrigger = React29__default.forwardRef(
+var VisibilityTrigger = React28__default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(
       Button$1,
@@ -4217,12 +4318,21 @@ var texts17 = createTexts({
     en: "Reset search field"
   }
 });
-var Select = React29.forwardRef(
+var Select = React28.forwardRef(
   (props, ref) => {
-    const { variant = "core", children, positioning, label, ...rest } = props;
+    const {
+      variant = "core",
+      children,
+      positioning,
+      label,
+      errorText,
+      invalid,
+      helperText,
+      ...rest
+    } = props;
     const recipe = useSlotRecipe({ key: "select" });
     const styles = recipe({ variant });
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(Field3, { errorText, invalid, helperText, children: /* @__PURE__ */ jsxs(
       Select$1.Root,
       {
         ...rest,
@@ -4237,11 +4347,11 @@ var Select = React29.forwardRef(
           /* @__PURE__ */ jsx(SelectContent, { css: styles.selectContent, children })
         ]
       }
-    );
+    ) });
   }
 );
 Select.displayName = "Select";
-var SelectItem = React29.forwardRef(
+var SelectItem = React28.forwardRef(
   (props, ref) => {
     const { item, children, description, ...rest } = props;
     const recipe = useSlotRecipe({ key: "select" });
@@ -4256,14 +4366,14 @@ var SelectItem = React29.forwardRef(
   }
 );
 SelectItem.displayName = "SelectItem";
-var SelectItemGroup = React29.forwardRef(function SelectItemGroup2(props, ref) {
+var SelectItemGroup = React28.forwardRef(function SelectItemGroup2(props, ref) {
   const { children, label, ...rest } = props;
   return /* @__PURE__ */ jsxs(Select$1.ItemGroup, { ...rest, ref, children: [
     /* @__PURE__ */ jsx(Select$1.ItemGroupLabel, { children: label }),
     children
   ] });
 });
-var SelectTrigger = React29.forwardRef(function SelectTrigger2(props, ref) {
+var SelectTrigger = React28.forwardRef(function SelectTrigger2(props, ref) {
   const { children, clearable, ...rest } = props;
   const recipe = useSlotRecipe({ key: "select" });
   const styles = recipe();
@@ -4275,7 +4385,7 @@ var SelectTrigger = React29.forwardRef(function SelectTrigger2(props, ref) {
     ] })
   ] });
 });
-var SelectClearTrigger = React29.forwardRef(function SelectClearTrigger2(props, ref) {
+var SelectClearTrigger = React28.forwardRef(function SelectClearTrigger2(props, ref) {
   return /* @__PURE__ */ jsx(Select$1.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ jsx(
     CloseButton,
     {
@@ -4286,11 +4396,11 @@ var SelectClearTrigger = React29.forwardRef(function SelectClearTrigger2(props,
     }
   ) });
 });
-var SelectContent = React29.forwardRef(function SelectContent2(props, ref) {
+var SelectContent = React28.forwardRef(function SelectContent2(props, ref) {
   const { portalled = true, portalRef, ...rest } = props;
   return /* @__PURE__ */ jsx(Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsx(Select$1.Positioner, { children: /* @__PURE__ */ jsx(Select$1.Content, { ...rest, ref }) }) });
 });
-var SelectValueText = React29.forwardRef(function SelectValueText2(props, ref) {
+var SelectValueText = React28.forwardRef(function SelectValueText2(props, ref) {
   const { children, withPlaceholder, placeholder, ...rest } = props;
   return /* @__PURE__ */ jsx(
     Select$1.ValueText,
@@ -4316,23 +4426,40 @@ var SelectLabel = Select$1.Label;
 var SelectItemText = Select$1.ItemText;
 var SelectRoot = Select$1.Root;
 var Switch = forwardRef((props) => {
-  const { rootRef, size = "md", label, ...rest } = props;
+  const {
+    rootRef,
+    size = "md",
+    label,
+    invalid,
+    errorText,
+    helperText,
+    ...rest
+  } = props;
   const recipe = useSlotRecipe({ key: "switch" });
   const styles = recipe({ size });
-  return /* @__PURE__ */ jsx(Field, { style: { width: "auto" }, children: /* @__PURE__ */ jsxs(
-    Switch$1.Root,
+  return /* @__PURE__ */ jsx(
+    Field3,
     {
-      ref: rootRef,
-      ...rest,
-      checked: props.checked,
-      css: styles.root,
-      children: [
-        /* @__PURE__ */ jsx(Switch$1.Label, { children: label }),
-        /* @__PURE__ */ jsx(Switch$1.HiddenInput, {}),
-        /* @__PURE__ */ jsx(Switch$1.Control, { css: styles.control, children: /* @__PURE__ */ jsx(Switch$1.Thumb, {}) })
-      ]
+      style: { width: "auto" },
+      invalid,
+      errorText,
+      helperText,
+      children: /* @__PURE__ */ jsxs(
+        Switch$1.Root,
+        {
+          ref: rootRef,
+          ...rest,
+          checked: props.checked,
+          css: styles.root,
+          children: [
+            /* @__PURE__ */ jsx(Switch$1.Label, { children: label }),
+            /* @__PURE__ */ jsx(Switch$1.HiddenInput, {}),
+            /* @__PURE__ */ jsx(Switch$1.Control, { css: styles.control, children: /* @__PURE__ */ jsx(Switch$1.Thumb, {}) })
+          ]
+        }
+      )
     }
-  ) });
+  );
 });
 Switch.displayName = "Switch";
 var useLabelHeight = (label) => {
@@ -4364,7 +4491,7 @@ var Textarea = forwardRef(
     const recipe = useRecipe({ key: "textarea" });
     const styles = recipe({ variant });
     const { labelRef, labelHeight } = useLabelHeight(label);
-    return /* @__PURE__ */ jsxs(Field, { ...fieldProps, position: "relative", children: [
+    return /* @__PURE__ */ jsxs(Field3, { ...fieldProps, position: "relative", children: [
       /* @__PURE__ */ jsx(
         Textarea$1,
         {
@@ -4376,7 +4503,7 @@ var Textarea = forwardRef(
           placeholder: " "
         }
       ),
-      /* @__PURE__ */ jsx(FieldLabel$1, { ref: labelRef, children: label })
+      /* @__PURE__ */ jsx(FloatingLabel, { ref: labelRef, children: label })
     ] });
   }
 );
@@ -5513,16 +5640,16 @@ NudgeTrigger.displayName = "NudgeTrigger";
 var NudgeContent = forwardRef(
   ({ showCloseButton = true, children, ...props }, ref) => {
     const [currentStep, setCurrentStep] = useState(1);
-    const childrenArray = React29__default.Children.toArray(children);
+    const childrenArray = React28__default.Children.toArray(children);
     const { open } = usePopoverContext$1();
     useEffect(() => {
       setCurrentStep(1);
     }, [children, open]);
     const wizardPages = childrenArray.filter(
-      (child) => React29__default.isValidElement(child) && child.type.displayName === "NudgeWizardStep"
+      (child) => React28__default.isValidElement(child) && child.type.displayName === "NudgeWizardStep"
     );
     const restChildren = childrenArray.filter(
-      (child) => !React29__default.isValidElement(child) || child.type.displayName !== "NudgeWizardStep"
+      (child) => !React28__default.isValidElement(child) || child.type.displayName !== "NudgeWizardStep"
     );
     const totalSteps = wizardPages.length;
     const isLastStep = totalSteps === currentStep;
@@ -5611,7 +5738,7 @@ NudgeCloseTrigger.displayName = "NudgeCloseTrigger";
 var [RootPropsProvider, useRootProps] = createContext$1({
   name: "RootPropsProvider"
 });
-var Pagination = React29.forwardRef(
+var Pagination = React28.forwardRef(
   (props, ref) => {
     const { getHref, children, ...rest } = props;
     const recipe = useSlotRecipe({ key: "pagination" });
@@ -5636,11 +5763,11 @@ var Pagination = React29.forwardRef(
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationEllipsis = React29.forwardRef((props, ref) => {
+var PaginationEllipsis = React28.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(ListItem2, { children: /* @__PURE__ */ jsx(Pagination$1.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsx(Box, { cursor: "default", children: "..." }) }) });
 });
 PaginationEllipsis.displayName = "PaginationEllipsis";
-var PaginationItem = React29.forwardRef((props, ref) => {
+var PaginationItem = React28.forwardRef((props, ref) => {
   const rootProps = useRootProps();
   const { t } = useTranslation();
   const { page, totalPages } = usePaginationContext();
@@ -5673,7 +5800,7 @@ var PaginationItem = React29.forwardRef((props, ref) => {
   ) });
 });
 PaginationItem.displayName = "PaginationItem";
-var PaginationPrevTrigger = React29.forwardRef((props, ref) => {
+var PaginationPrevTrigger = React28.forwardRef((props, ref) => {
   const { page } = usePaginationContext();
   const recipe = useSlotRecipe({ key: "pagination" });
   const styles = recipe();
@@ -5713,7 +5840,7 @@ var PaginationPrevTrigger = React29.forwardRef((props, ref) => {
   ) });
 });
 PaginationPrevTrigger.displayName = "PaginationPrevTrigger";
-var PaginationNextTrigger = React29.forwardRef((props, ref) => {
+var PaginationNextTrigger = React28.forwardRef((props, ref) => {
   const { page, totalPages } = usePaginationContext();
   const recipe = useSlotRecipe({ key: "pagination" });
   const styles = recipe();
@@ -5801,7 +5928,7 @@ PopoverTrigger.displayName = "PopoverTrigger";
 var PopoverContent = forwardRef(
   ({ children, showCloseButton = false, ...props }, ref) => {
     const { colorMode } = useColorMode();
-    const closeButtonRef = React29__default.useRef(null);
+    const closeButtonRef = React28__default.useRef(null);
     const { open } = usePopoverContext();
     useEffect(() => {
       if (showCloseButton && open && closeButtonRef.current) {
@@ -6011,7 +6138,7 @@ var SporProvider = ({
     children
   ] }) }) });
 };
-var StepperContext = React29__default.createContext(null);
+var StepperContext = React28__default.createContext(null);
 var StepperProvider = ({
   activeStep,
   children,
@@ -6028,7 +6155,7 @@ var StepperProvider = ({
   );
 };
 var useStepper = () => {
-  const context = React29__default.useContext(StepperContext);
+  const context = React28__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"
@@ -7927,33 +8054,6 @@ var fieldSlotRecipe = defineSlotRecipe({
       position: "relative",
       flexDirection: "column"
     },
-    label: {
-      /* For when input is filled */
-      pos: "absolute",
-      paddingX: 3,
-      top: "0.3rem",
-      fontWeight: "normal",
-      fontSize: ["mobile.xs", "desktop.xs"],
-      color: "text",
-      pointerEvents: "none",
-      transition: "position",
-      zIndex: "docked",
-      _peerPlaceholderShown: {
-        /* For when input is not in focus */
-        top: "0.9rem",
-        color: "text",
-        fontSize: ["mobile.sm", "desktop.sm"]
-      },
-      _peerFocusVisible: {
-        /* For when input is in focus */
-        fontSize: ["mobile.xs", "desktop.xs"],
-        color: "text",
-        top: "0.3rem"
-      },
-      _disabled: {
-        opacity: 0.4
-      }
-    },
     requiredIndicator: {
       marginStart: 1,
       color: "brightRed"
@@ -7973,7 +8073,7 @@ var fieldSlotRecipe = defineSlotRecipe({
       textStyle: "xs",
       width: "fit-content",
       position: "absolute",
-      bottom: -4,
+      bottom: -5,
       left: 3,
       zIndex: "dropdown",
       maxWidth: "50ch",
@@ -9219,6 +9319,10 @@ var selectSlotRecipe = defineSlotRecipe({
       },
       _open: {
         borderBottomRadius: 0
+      },
+      _invalid: {
+        outline: "2px solid",
+        outlineColor: "outline.error"
       }
     },
     itemText: {
@@ -9253,10 +9357,6 @@ var selectSlotRecipe = defineSlotRecipe({
           _active: {
             backgroundColor: "brand.surface.active"
           },
-          _invalid: {
-            outline: "2px solid",
-            outlineColor: "outline.error"
-          },
           _disabled: {
             pointerEvents: "none",
             color: "text.disabled",
@@ -10646,6 +10746,6 @@ var themes = {
 };
 var system = themes["VyDigital" /* VyDigital */];
 
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, AttachedInputs, Badge, Brand, Breadcrumb, Button, ButtonGroup, CardSelect, CardSelectContent, CardSelectTrigger, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, Clipboard, ClipboardButton, CloseButton, CloseDrawerLine, Code, ColorInlineLoader, ColorModeButton, ColorModeIcon, ColorModeProvider, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field, FieldErrorText, FieldLabel, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, Heading, IconButton, InfoTag, Input, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, List, ListBox, ListIndicator, ListItem2 as ListItem, NativeSelect, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, NudgeTrigger, NudgeWizardStep, NumericStepper, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover2 as Popover, PopoverContent, PopoverTrigger, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, SearchInput, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, StaticCard, Stepper, StepperStep, SvgBox, Switch, Table, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Text3 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useColorMode, useColorModeValue, useTranslation };
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, AttachedInputs, Badge, Brand, Breadcrumb, Button, ButtonGroup, CardSelect, CardSelectContent, CardSelectTrigger, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, Clipboard, ClipboardButton, CloseButton, CloseDrawerLine, Code, ColorInlineLoader, ColorModeButton, ColorModeIcon, ColorModeProvider, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field3 as Field, FieldErrorText, FieldLabel, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, Heading, IconButton, InfoTag, Input, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, List, ListBox, ListIndicator, ListItem2 as ListItem, NativeSelect, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, NudgeTrigger, NudgeWizardStep, NumericStepper, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover2 as Popover, PopoverContent, PopoverTrigger, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, SearchInput, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, StaticCard, Stepper, StepperStep, SvgBox, Switch, Table, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Text3 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useColorMode, useColorModeValue, useTranslation };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map