@vygruppen/spor-react 12.2.1 → 12.3.0

package/dist/index.js

@@ -2,7 +2,7 @@
 
 var react = require('@chakra-ui/react');
 var sporIconReact = require('@vygruppen/spor-icon-react');
-var React29 = require('react');
+var React28 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var sporLoader = require('@vygruppen/spor-loader');
 var ReactLottie = require('lottie-react');
@@ -45,7 +45,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React29__namespace = /*#__PURE__*/_interopNamespace(React29);
+var React28__namespace = /*#__PURE__*/_interopNamespace(React28);
 var ReactLottie__default = /*#__PURE__*/_interopDefault(ReactLottie);
 var tokens20__namespace = /*#__PURE__*/_interopNamespace(tokens20);
 var cargonetJson__default = /*#__PURE__*/_interopDefault(cargonetJson);
@@ -86,7 +86,7 @@ var warnAboutMismatchingIcon = ({
     }
   }
 };
-var Accordion = React29.forwardRef(
+var Accordion = React28.forwardRef(
   (props, ref) => {
     const { variant = "core", children, gap = 2, ...rest } = props;
     const recipe = react.useSlotRecipe({ key: "accordion" });
@@ -103,7 +103,7 @@ var Accordion = React29.forwardRef(
     );
   }
 );
-var AccordionItemTrigger = React29.forwardRef(function AccordionItemTrigger2(props, ref) {
+var AccordionItemTrigger = React28.forwardRef(function AccordionItemTrigger2(props, ref) {
   const { startElement, children, headingLevel, ...rest } = props;
   warnAboutMismatchingIcon({ icon: startElement });
   const recipe = react.useSlotRecipe({ key: "accordion" });
@@ -116,7 +116,7 @@ var AccordionItemTrigger = React29.forwardRef(function AccordionItemTrigger2(pro
     /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.DropdownDownFill24Icon, {}) })
   ] }) });
 });
-var AccordionItemContent = React29.forwardRef(function AccordionItemContent2(props, ref) {
+var AccordionItemContent = React28.forwardRef(function AccordionItemContent2(props, ref) {
   const { children } = props;
   const recipe = react.useSlotRecipe({ key: "accordion" });
   const styles = recipe();
@@ -124,7 +124,7 @@ var AccordionItemContent = React29.forwardRef(function AccordionItemContent2(pro
 });
 Accordion.displayName = "Accordion";
 var AccordionItem = react.Accordion.Item;
-var Expandable = React29.forwardRef(
+var Expandable = React28.forwardRef(
   (props, ref) => {
     const { title, children, headingLevel, startElement, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(Accordion, { ...props, ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -169,7 +169,7 @@ var Language = /* @__PURE__ */ ((Language3) => {
   Language3["English"] = "en";
   return Language3;
 })(Language || {});
-var LanguageContext = React29.createContext(void 0);
+var LanguageContext = React28.createContext(void 0);
 function LanguageProvider({
   language,
   children
@@ -177,7 +177,7 @@ function LanguageProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(LanguageContext.Provider, { value: language, children });
 }
 function useLanguage() {
-  const language = React29.useContext(LanguageContext);
+  const language = React28.useContext(LanguageContext);
   if (!language) {
     throw new Error("Please wrap your application in a LanguageProvider");
   }
@@ -195,8 +195,8 @@ function createTexts(texts27) {
 }
 var hydrating = true;
 function useHydrated() {
-  const [hydrated, setHydrated] = React29.useState(() => !hydrating);
-  React29.useEffect(function hydrate() {
+  const [hydrated, setHydrated] = React28.useState(() => !hydrating);
+  React28.useEffect(function hydrate() {
     hydrating = false;
     setHydrated(true);
   }, []);
@@ -339,11 +339,11 @@ var LightSpinner = ({
   ] });
 };
 var useRotatingLabel = ({ label, delay }) => {
-  const loadingTextArray = React29.useMemo(
+  const loadingTextArray = React28.useMemo(
     () => Array.isArray(label) ? label : [label],
     [label]
   );
-  const [currentLoadingTextIndex, setCurrentLoadingTextIndex] = React29.useState(0);
+  const [currentLoadingTextIndex, setCurrentLoadingTextIndex] = React28.useState(0);
   usehooksTs.useInterval(() => {
     setCurrentLoadingTextIndex(
       (prevIndex) => (prevIndex + 1) % loadingTextArray.length
@@ -351,7 +351,7 @@ var useRotatingLabel = ({ label, delay }) => {
   }, delay);
   return loadingTextArray[currentLoadingTextIndex];
 };
-var ProgressBar = React29.forwardRef(
+var ProgressBar = React28.forwardRef(
   ({
     value,
     label,
@@ -397,9 +397,9 @@ var progressLoaderRecipe = react.defineRecipe({
   }
 });
 var usePathLength = (value) => {
-  const pathRef = React29.useRef(null);
-  const [pathLength, setPathLength] = React29.useState(0);
-  React29.useEffect(() => {
+  const pathRef = React28.useRef(null);
+  const [pathLength, setPathLength] = React28.useState(0);
+  React28.useEffect(() => {
     if (pathRef.current) {
       const totalLength = pathRef.current.getTotalLength();
       setPathLength(totalLength);
@@ -409,7 +409,7 @@ var usePathLength = (value) => {
   return { pathRef, pathLength, progressOffset };
 };
 var ProgressLoaderWrapper = react.chakra("div", progressLoaderRecipe);
-var ProgressLoader = React29.forwardRef(
+var ProgressLoader = React28.forwardRef(
   ({
     value,
     label,
@@ -433,7 +433,7 @@ var ProgressLoader = React29.forwardRef(
       pathLength: progressPathLength,
       progressOffset
     } = usePathLength(value);
-    const id = React29.useId();
+    const id = React28.useId();
     return /* @__PURE__ */ jsxRuntime.jsxs(
       ProgressLoaderWrapper,
       {
@@ -565,7 +565,7 @@ var skeletonRecipe = react.defineRecipe({
     }
   }
 });
-var SkeletonCircle = React29__namespace.forwardRef(function SkeletonCircle2(props, ref) {
+var SkeletonCircle = React28__namespace.forwardRef(function SkeletonCircle2(props, ref) {
   const recipe = react.useRecipe({ recipe: skeletonRecipe });
   const [recipeProps, restProps] = recipe.splitVariantProps({
     loading: true,
@@ -575,7 +575,7 @@ var SkeletonCircle = React29__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 = React29.forwardRef(
+var SkeletonText = React28.forwardRef(
   function SkeletonText2(props, ref) {
     const recipe = react.useRecipe({ recipe: skeletonRecipe });
     const [recipeProps, restProps] = recipe.splitVariantProps({
@@ -596,7 +596,7 @@ var SkeletonText = React29.forwardRef(
     )) });
   }
 );
-var Skeleton = React29.forwardRef(
+var Skeleton = React28.forwardRef(
   function SkeletonText3(props, ref) {
     const recipe = react.useRecipe({ recipe: skeletonRecipe });
     const [recipeProps, restProps] = recipe.splitVariantProps({
@@ -634,7 +634,7 @@ var LoadingContent = ({
     loadingText && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: loadingText })
   ] })
 ] });
-var Button = React29.forwardRef(
+var Button = React28.forwardRef(
   ({
     loading,
     disabled,
@@ -667,7 +667,7 @@ var Button = React29.forwardRef(
         variant,
         size,
         ...rest,
-        children: rest.asChild ? React29.cloneElement(children, {
+        children: rest.asChild ? React28.cloneElement(children, {
           children: renderContent()
         }) : renderContent()
       }
@@ -701,7 +701,7 @@ var groupRecipe = react.defineRecipe({
   }
 });
 var Group = react.chakra(react.Group, groupRecipe);
-var ButtonGroup = React29.forwardRef(
+var ButtonGroup = React28.forwardRef(
   (props, ref) => {
     const { children, disabled, grow, attached, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -718,7 +718,7 @@ var ButtonGroup = React29.forwardRef(
   }
 );
 ButtonGroup.displayName = "ButtonGroup";
-var Badge = React29.forwardRef(function Badge2({ icon, children, ...props }, ref) {
+var Badge = React28.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 })
@@ -841,12 +841,12 @@ var codeRecipie = react.defineRecipe({
   }
 });
 var StyledCode = react.chakra(react.Code, codeRecipie);
-var Code = React29__namespace.default.forwardRef(
+var Code = React28__namespace.default.forwardRef(
   function Code2(props, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(StyledCode, { ...props, ref });
   }
 );
-var Heading = React29.forwardRef(
+var Heading = React28.forwardRef(
   function Heading2(props, ref) {
     const {
       as,
@@ -869,13 +869,13 @@ var Heading = React29.forwardRef(
     );
   }
 );
-var Text3 = React29.forwardRef(
+var Text3 = React28.forwardRef(
   function Text4(props, ref) {
     const { variant = "sm", ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(react.Text, { ...rest, textStyle: variant, ref });
   }
 );
-var ClipboardIcon = React29__namespace.forwardRef((props, ref) => {
+var ClipboardIcon = React28__namespace.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Clipboard.Indicator,
     {
@@ -887,7 +887,7 @@ var ClipboardIcon = React29__namespace.forwardRef((props, ref) => {
   );
 });
 ClipboardIcon.displayName = "ClipboardIcon";
-var ClipboardCopyText = React29__namespace.forwardRef((props, ref) => {
+var ClipboardCopyText = React28__namespace.forwardRef((props, ref) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Clipboard.Indicator,
@@ -900,7 +900,7 @@ var ClipboardCopyText = React29__namespace.forwardRef((props, ref) => {
   );
 });
 ClipboardCopyText.displayName = "ClipboardCopyText";
-var ClipboardButton = React29__namespace.forwardRef((props, ref) => {
+var ClipboardButton = React28__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";
@@ -919,7 +919,7 @@ var texts3 = createTexts({
     sv: "Kopierad"
   }
 });
-var IconButton = React29.forwardRef(
+var IconButton = React28.forwardRef(
   (props, ref) => {
     const { icon, size = "sm", loading = false, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -936,7 +936,7 @@ var IconButton = React29.forwardRef(
   }
 );
 IconButton.displayName = "IconButton";
-var CloseButton = React29.forwardRef(
+var CloseButton = React28.forwardRef(
   ({ size = "sm", ...props }, ref) => {
     const { t } = useTranslation();
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -975,7 +975,7 @@ var texts4 = createTexts({
     sv: "St\xE4ng"
   }
 });
-var FloatingActionButton = React29.forwardRef(
+var FloatingActionButton = React28.forwardRef(
   ({
     children,
     icon,
@@ -984,11 +984,11 @@ var FloatingActionButton = React29.forwardRef(
     placement = "bottom right",
     ...props
   }, ref) => {
-    const [isTextVisible, setIsTextVisible] = React29__namespace.default.useState(
+    const [isTextVisible, setIsTextVisible] = React28__namespace.default.useState(
       externalIsTextVisible === void 0 ? false : externalIsTextVisible
     );
     const scrollDirection = useScrollDirection();
-    React29.useEffect(() => {
+    React28.useEffect(() => {
       if (externalIsTextVisible !== void 0) {
         return;
       }
@@ -998,7 +998,7 @@ var FloatingActionButton = React29.forwardRef(
       );
       return () => globalThis.clearTimeout(id);
     }, [scrollDirection, externalIsTextVisible]);
-    React29.useEffect(() => {
+    React28.useEffect(() => {
       setIsTextVisible(!!externalIsTextVisible);
     }, [externalIsTextVisible]);
     const recipe = react.useSlotRecipe({ key: "floatingActionButton" });
@@ -1025,11 +1025,11 @@ var FloatingActionButton = React29.forwardRef(
 );
 FloatingActionButton.displayName = "FloatingActionButton";
 var useScrollDirection = () => {
-  const [scrollDirection, setScrollDirection] = React29__namespace.default.useState(null);
-  const lastScrollPosition = React29__namespace.default.useRef(
+  const [scrollDirection, setScrollDirection] = React28__namespace.default.useState(null);
+  const lastScrollPosition = React28__namespace.default.useRef(
     globalThis.window === void 0 ? 0 : window.scrollY
   );
-  React29__namespace.default.useEffect(() => {
+  React28__namespace.default.useEffect(() => {
     const onScroll = () => {
       const delta = window.scrollY - lastScrollPosition.current;
       if (delta === 0) {
@@ -1135,7 +1135,7 @@ var texts5 = createTexts({
     en: "Service"
   }
 });
-var Alert = React29.forwardRef((props, ref) => {
+var Alert = React28.forwardRef((props, ref) => {
   const {
     title,
     showIndicator = true,
@@ -1182,7 +1182,7 @@ var Alert = React29.forwardRef((props, ref) => {
   ] });
 });
 Alert.displayName = "Alert";
-var ExpandableAlert = React29.forwardRef(
+var ExpandableAlert = React28.forwardRef(
   (props, ref) => {
     const {
       variant = "info",
@@ -1243,7 +1243,7 @@ var ExpandableAlert = React29.forwardRef(
   }
 );
 ExpandableAlert.displayName = "ExpandableAlert";
-var ServiceAlert = React29.forwardRef(
+var ServiceAlert = React28.forwardRef(
   (props, ref) => {
     const {
       variant = "service",
@@ -1345,14 +1345,14 @@ var texts6 = createTexts({
     en: "Traffic announcement"
   }
 });
-var Breadcrumb = React29.forwardRef(
+var Breadcrumb = React28.forwardRef(
   ({ children, ...props }, ref) => {
-    const validChildren = React29__namespace.default.Children.toArray(children).filter(
-      (element) => React29__namespace.default.isValidElement(element)
+    const validChildren = React28__namespace.default.Children.toArray(children).filter(
+      (element) => React28__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(React29__namespace.default.Fragment, { children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(React28__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);
@@ -1382,7 +1382,7 @@ function ColorModeIcon() {
   const { colorMode } = useColorMode();
   return colorMode === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(lu.LuMoon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lu.LuSun, {});
 }
-var ColorModeButton = React29__namespace.forwardRef(function ColorModeButton2(props, ref) {
+var ColorModeButton = React28__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,
@@ -1403,21 +1403,90 @@ var ColorModeButton = React29__namespace.forwardRef(function ColorModeButton2(pr
     }
   ) });
 });
-var Field = React29__namespace.forwardRef(
+var FloatingLabel = React28.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(react.Field.Label, { ref, ...props, css: floatingLabelStyles })
+);
+FloatingLabel.displayName = "FloatingLabel";
+var floatingLabelStyles = react.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__ */ jsxRuntime.jsx(react.Field.Label, { ...props, css: labelStyles });
+var labelStyles = react.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__namespace.forwardRef(
   (props, ref) => {
-    const { label, children, helperText, errorText, ...rest } = props;
-    const recipe = react.useSlotRecipe({ key: "field" });
-    const styles = recipe({ label, helperText, errorText });
-    return /* @__PURE__ */ jsxRuntime.jsxs(react.Field.Root, { ref, ...rest, css: styles.root, children: [
+    const {
+      label,
       children,
-      helperText && /* @__PURE__ */ jsxRuntime.jsx(react.Field.HelperText, { children: helperText }),
-      label && /* @__PURE__ */ jsxRuntime.jsx(react.Field.Label, { css: styles.label, children: label }),
-      errorText && /* @__PURE__ */ jsxRuntime.jsx(react.Field.ErrorText, { children: errorText })
+      helperText,
+      errorText,
+      floatingLabel = false,
+      disabled,
+      invalid,
+      readOnly,
+      required,
+      direction,
+      ...rest
+    } = props;
+    const recipe = react.useSlotRecipe({ key: "field" });
+    const styles = recipe();
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { gap: "2", ref, ...rest, width: "100%", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        react.Field.Root,
+        {
+          disabled,
+          invalid,
+          readOnly,
+          required,
+          css: styles.root,
+          direction,
+          children: [
+            label && !floatingLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { children: label }),
+            children,
+            label && floatingLabel && /* @__PURE__ */ jsxRuntime.jsx(FloatingLabel, { children: label }),
+            errorText && /* @__PURE__ */ jsxRuntime.jsx(react.Field.ErrorText, { children: errorText })
+          ]
+        }
+      ),
+      helperText && /* @__PURE__ */ jsxRuntime.jsx(Text3, { fontSize: "sm", color: "text.tertiary", children: helperText })
     ] });
   }
 );
-Field.displayName = "Field";
-var FieldErrorText = React29__namespace.forwardRef((props, ref) => {
+Field3.displayName = "Field";
+var FieldErrorText = React28__namespace.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Field.ErrorText, { ref, children: props.children });
 });
 FieldErrorText.displayName = "FieldErrorText";
@@ -1885,7 +1954,7 @@ function CalendarCell({
   currentMonth,
   variant
 }) {
-  const ref = React29.useRef(null);
+  const ref = React28.useRef(null);
   const {
     cellProps,
     buttonProps,
@@ -1913,7 +1982,7 @@ function CalendarCell({
   if (isOutsideMonth) {
     stateProps["data-unavailable"] = true;
   }
-  React29.useEffect(() => {
+  React28.useEffect(() => {
     var _a5;
     (_a5 = ref.current) == null ? void 0 : _a5.addEventListener(
       "touchend",
@@ -2024,7 +2093,7 @@ function CalendarNavigationButton({
   "aria-label": ariaLabel,
   ...rest
 }) {
-  const ref = React29.useRef(null);
+  const ref = React28.useRef(null);
   const { buttonProps } = reactAria.useButton(rest, ref);
   return /* @__PURE__ */ jsxRuntime.jsx(
     IconButton,
@@ -2185,7 +2254,7 @@ var texts8 = createTexts({
     en: "Calendar"
   }
 });
-var CalendarTriggerButton = React29.forwardRef(({ variant, disabled, ariaLabelledby, ...buttonProps }) => {
+var CalendarTriggerButton = React28.forwardRef(({ variant, disabled, ariaLabelledby, ...buttonProps }) => {
   const { t } = useTranslation();
   const recipe = react.useSlotRecipe({
     key: "datePicker",
@@ -2213,9 +2282,9 @@ var texts9 = createTexts({
     en: "Open calendar"
   }
 });
-var DateTimeSegment = React29.forwardRef(
+var DateTimeSegment = React28.forwardRef(
   ({ segment, state, ariaLabel, ariaDescription }, externalRef) => {
-    const internalRef = React29.useRef(null);
+    const internalRef = React28.useRef(null);
     const ref = externalRef ?? internalRef;
     const { segmentProps } = reactAria.useDateSegment(
       segment,
@@ -2263,7 +2332,7 @@ function createCalendar2(identifier) {
     }
   }
 }
-var DateField = React29.forwardRef(
+var DateField = React28.forwardRef(
   ({ labelId, ...props }, externalRef) => {
     var _a5;
     const locale = useCurrentLocale();
@@ -2278,7 +2347,7 @@ var DateField = React29.forwardRef(
       createCalendar: createCalendar2
     });
     const { t } = useTranslation();
-    const internalRef = React29.useRef(null);
+    const internalRef = React28.useRef(null);
     const ref = externalRef ?? internalRef;
     const { fieldProps } = reactAria.useDateField(
       props,
@@ -2355,7 +2424,7 @@ var getAriaLabel = (segmentType) => {
     }
   }
 };
-var StyledField = React29.forwardRef(
+var StyledField = React28.forwardRef(
   function StyledField2(props, ref) {
     const { children, variant, isDisabled, ariaLabelledby, ...otherProps } = props;
     const { invalid } = react.useFieldContext() ?? {
@@ -2379,33 +2448,35 @@ var StyledField = React29.forwardRef(
     );
   }
 );
-var DatePicker = React29.forwardRef(
+var DatePicker = React28.forwardRef(
   ({
     variant,
-    errorMessage,
+    errorText,
     minHeight,
     showYearNavigation,
     withPortal = true,
     width = "auto",
+    invalid = false,
+    helperText,
     ...props
   }, externalRef) => {
     const chakraFieldProps = react.useFieldContext();
     const state = reactStately.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"
     });
-    const internalRef = React29.useRef(null);
+    const internalRef = React28.useRef(null);
     const ref = externalRef ?? internalRef;
     const { labelProps, fieldProps, buttonProps, dialogProps, calendarProps } = reactAria.useDatePicker(
       props,
       state,
       ref
     );
-    const labelId = `label-${React29.useId()}`;
-    const inputGroupId = `input-group-${React29.useId()}`;
+    const labelId = `label-${React28.useId()}`;
+    const inputGroupId = `input-group-${React28.useId()}`;
     const recipe = react.useSlotRecipe({
       key: "datePicker",
       recipe: datePickerSlotRecipe
@@ -2432,12 +2503,14 @@ var DatePicker = React29.forwardRef(
         width,
         children: /* @__PURE__ */ jsxRuntime.jsxs(react.Popover.Root, { ...dialogProps, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            Field,
+            Field3,
             {
               display: "inline-flex",
               id: inputGroupId,
               "aria-labelledby": labelId,
-              errorText: errorMessage,
+              errorText,
+              invalid,
+              helperText,
               children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverAnchor, { children: /* @__PURE__ */ jsxRuntime.jsxs(
                 StyledField,
                 {
@@ -2494,7 +2567,7 @@ function RangeCalendar(props) {
     recipe: datePickerSlotRecipe
   });
   const styles = recipe({});
-  const ref = React29.useRef(null);
+  const ref = React28.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 }),
@@ -2517,16 +2590,21 @@ function DateRangePicker({
   startName,
   endName,
   withPortal = true,
+  errorText,
+  helperText,
+  invalid,
   ...props
 }) {
   const fieldContextPRops = react.useFieldContext();
   const state = reactStately.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 = React29.useRef(null);
+  const ref = React28.useRef(null);
   const uniqueId = reactAria.useId();
   const datePickerId = `date-range-picker-${uniqueId}`;
   const {
@@ -2550,61 +2628,72 @@ function DateRangePicker({
   return /* @__PURE__ */ jsxRuntime.jsx(reactAria.I18nProvider, { locale, children: /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { position: "relative", display: "inline-flex", flexDirection: "column", children: [
     props.label && /* @__PURE__ */ jsxRuntime.jsx("label", { ...labelProps, htmlFor: datePickerId, children: props.label }),
     /* @__PURE__ */ jsxRuntime.jsxs(react.Popover.Root, { ...dialogProps, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Field, { width: "auto", display: "inline-flex", id: datePickerId, children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverAnchor, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-        StyledField,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Field3,
         {
-          alignItems: "center",
-          paddingX: 3,
-          variant,
-          onClick: onFieldClick,
-          minHeight,
-          children: [
-            variant && /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              CalendarTriggerButton,
-              {
-                variant,
-                ref,
-                ...buttonProps
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              DateField,
-              {
-                ...startFieldProps,
-                name: startName,
-                label: props.startLabel,
-                labelProps
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              react.Box,
-              {
-                as: "span",
-                "aria-hidden": "true",
-                paddingRight: "2",
-                paddingLeft: "2",
-                children: "\u2013"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              DateField,
-              {
-                ...endFieldProps,
-                name: endName,
-                label: props.endLabel,
-                labelProps
-              }
-            )
-          ]
+          width: "auto",
+          display: "inline-flex",
+          id: datePickerId,
+          errorText,
+          helperText,
+          invalid,
+          children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverAnchor, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            StyledField,
+            {
+              alignItems: "center",
+              paddingX: 3,
+              variant,
+              onClick: onFieldClick,
+              minHeight,
+              children: [
+                variant && /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  CalendarTriggerButton,
+                  {
+                    variant,
+                    ref,
+                    ...buttonProps
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  DateField,
+                  {
+                    ...startFieldProps,
+                    name: startName,
+                    label: props.startLabel,
+                    labelProps
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  react.Box,
+                  {
+                    as: "span",
+                    "aria-hidden": "true",
+                    paddingRight: "2",
+                    paddingLeft: "2",
+                    children: "\u2013"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  DateField,
+                  {
+                    ...endFieldProps,
+                    name: endName,
+                    label: props.endLabel,
+                    labelProps
+                  }
+                )
+              ]
+            }
+          ) })
         }
-      ) }) }),
+      ),
       state.isOpen && withPortal && /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: popoverContent }),
       state.isOpen && !withPortal && popoverContent
     ] })
   ] }) });
 }
 var TimeField = ({ state, ...props }) => {
-  const ref = React29.useRef(null);
+  const ref = React28.useRef(null);
   const { labelProps, fieldProps } = reactAria.useTimeField(props, state, ref);
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2644,7 +2733,7 @@ var TimePicker = ({
   name,
   ...boxProps
 }) => {
-  const { disabled: fieldDisabled, invalid: fieldInvalid } = useFieldContext4() ?? {};
+  const { disabled: fieldDisabled, invalid: fieldInvalid } = react.useFieldContext() ?? {};
   const isDisabled = isDisabledExternally ?? fieldDisabled ?? false;
   const { t } = useTranslation();
   const locale = useCurrentLocale();
@@ -2691,7 +2780,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__ */ jsxRuntime.jsx(Field, { as: "time", ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(Field3, { as: "time", ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
     StyledField,
     {
       width: "fit-content",
@@ -2771,10 +2860,7 @@ var texts11 = createTexts({
     sv: "minuter"
   }
 });
-function useFieldContext4() {
-  throw new Error("Function not implemented.");
-}
-var DialogContent = React29__namespace.forwardRef((props, ref) => {
+var DialogContent = React28__namespace.forwardRef((props, ref) => {
   const {
     children,
     portalled = true,
@@ -2788,7 +2874,7 @@ var DialogContent = React29__namespace.forwardRef((props, ref) => {
   ] });
 });
 DialogContent.displayName = "DialogContent";
-var DialogCloseTrigger = React29__namespace.forwardRef(function DialogCloseTrigger2(props, ref) {
+var DialogCloseTrigger = React28__namespace.forwardRef(function DialogCloseTrigger2(props, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Dialog.CloseTrigger, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "md" }) });
 });
 var DialogRoot = react.Dialog.Root;
@@ -2803,7 +2889,7 @@ var DialogActionTrigger = react.Dialog.ActionTrigger;
 var [RootDrawerProvider, useRootDrawerProps] = react.createContext({
   name: "RootDrawerProvider"
 });
-var DrawerContent = React29.forwardRef(
+var DrawerContent = React28.forwardRef(
   (props, ref) => {
     const { children, portalled = true, portalRef, ...rest } = props;
     const { size, placement } = useRootDrawerProps();
@@ -2816,7 +2902,7 @@ var DrawerContent = React29.forwardRef(
   }
 );
 DrawerContent.displayName = "DrawerContent";
-var CloseDrawerLine = React29.forwardRef((props, ref) => {
+var CloseDrawerLine = React28.forwardRef((props, ref) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Drawer.CloseTrigger,
@@ -2843,17 +2929,17 @@ var CloseDrawerLine = React29.forwardRef((props, ref) => {
   );
 });
 CloseDrawerLine.displayName = "CloseDrawerLine";
-var DrawerCloseTrigger = React29.forwardRef(function DrawerCloseTrigger2(props, ref) {
+var DrawerCloseTrigger = React28.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 = React29.forwardRef((props, ref) => {
+var DrawerBackTrigger = React28.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 = React29.forwardRef((props, ref) => {
+var DrawerFullScreenHeader = React28.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, {}) }),
@@ -2932,7 +3018,7 @@ var attachedInputsRecipe = react.defineRecipe({
   }
 });
 var StyledGroup = react.chakra(react.Group, attachedInputsRecipe);
-var AttachedInputs = React29.forwardRef(
+var AttachedInputs = React28.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(StyledGroup, { ref, attached: true, ...props });
   }
@@ -2941,7 +3027,7 @@ AttachedInputs.displayName = "AttachedInputs";
 var CardSelect = ({ size = "md", ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Root, { size, ...props });
 };
-var CardSelectContent = React29.forwardRef(
+var CardSelectContent = React28.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,
@@ -2962,7 +3048,7 @@ var bgActiveStyleMap = {
   ghost: "ghost.surface.active",
   floating: "floating.surface.active"
 };
-var CardSelectTrigger = React29.forwardRef(
+var CardSelectTrigger = React28.forwardRef(
   ({ icon, variant = "core", withChevron = true, size, children, ...props }, ref) => {
     const ChevronIcon = size === "sm" ? sporIconReact.DropdownDownFill18Icon : sporIconReact.DropdownDownFill24Icon;
     const { open } = react.usePopoverContext();
@@ -2987,7 +3073,7 @@ var CardSelectTrigger = React29.forwardRef(
   }
 );
 CardSelectTrigger.displayName = "CardSelectTrigger";
-var Checkbox = React29__namespace.forwardRef(
+var Checkbox = React28__namespace.forwardRef(
   (props, ref) => {
     const { children, inputProps, rootRef, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(react.Checkbox.Root, { ref: rootRef, ...rest, children: [
@@ -2998,27 +3084,36 @@ var Checkbox = React29__namespace.forwardRef(
   }
 );
 Checkbox.displayName = "Checkbox";
-var CheckboxGroup = React29.forwardRef(
+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 }) });
   }
 );
 CheckboxGroup.displayName = "CheckboxGroup";
-var ChoiceChip = React29.forwardRef(
-  ({ children, icon, ...rootProps }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Root, { ...rootProps, children: /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Context, { children: ({ checked }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.HiddenInput, { ref }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.CheckboxCard.Label, { children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { width: "24px", children: checked ? icon.checked : icon.default }),
-        rootProps.chipType !== "icon" && children,
-        rootProps.chipType === "filter" && checked && /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.CloseOutline24Icon, {})
-      ] }) }) })
-    ] }) }) });
+var ChoiceChip = React28.forwardRef(
+  ({ children, icon, onCheckedChange, ...rootProps }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      react.CheckboxCard.Root,
+      {
+        ...rootProps,
+        ...onCheckedChange && {
+          onCheckedChange: (details) => onCheckedChange(!!details.checked)
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Context, { children: ({ checked }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.HiddenInput, { ref }),
+          /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.CheckboxCard.Label, { children: [
+            icon && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { width: "24px", children: checked ? icon.checked : icon.default }),
+            rootProps.chipType !== "icon" && children,
+            rootProps.chipType === "filter" && checked && /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.CloseOutline24Icon, {})
+          ] }) }) })
+        ] }) })
+      }
+    );
   }
 );
 ChoiceChip.displayName = "ChoiceChip";
-var Popover = React29.forwardRef(
+var Popover = React28.forwardRef(
   ({
     children,
     state,
@@ -3032,7 +3127,7 @@ var Popover = React29.forwardRef(
     containerPadding = 12
   }, ref) => {
     var _a5;
-    const internalRef = React29.useRef(null);
+    const internalRef = React28.useRef(null);
     const popoverRef = ref ?? internalRef;
     const { popoverProps, underlayProps } = reactAria.usePopover(
       {
@@ -3070,7 +3165,7 @@ var Popover = React29.forwardRef(
   }
 );
 Popover.displayName = "Popover";
-var Combobox = React29.forwardRef(
+var Combobox = React28.forwardRef(
   (props) => {
     const {
       label,
@@ -3099,11 +3194,11 @@ var Combobox = React29.forwardRef(
       variant
     } = props;
     const { contains } = reactAria.useFilter({ sensitivity: "base" });
-    const fallbackInputRef = React29.useRef(null);
+    const fallbackInputRef = React28.useRef(null);
     const inputRef = externalInputRef ?? fallbackInputRef;
-    const listBoxRef = React29.useRef(null);
-    const popoverRef = React29.useRef(null);
-    const listboxId = `${React29.useId()}-listbox`;
+    const listBoxRef = React28.useRef(null);
+    const popoverRef = React28.useRef(null);
+    const listboxId = `${React28.useId()}-listbox`;
     const inputWidth = useInputWidth(inputRef);
     const state = reactStately.useComboBoxState({
       defaultFilter: contains,
@@ -3148,6 +3243,11 @@ var Combobox = React29.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,
@@ -3208,8 +3308,8 @@ var Combobox = React29.forwardRef(
 );
 Combobox.displayName = "Combobox";
 var useInputWidth = (inputRef) => {
-  const [inputWidth, setInputWidth] = React29.useState("auto");
-  React29.useEffect(() => {
+  const [inputWidth, setInputWidth] = React28.useState("auto");
+  React28.useEffect(() => {
     const onResize = debounce(() => {
       if (inputRef.current) {
         setInputWidth(`${inputRef.current.offsetWidth}px`);
@@ -3322,38 +3422,8 @@ var inputRecipe = react.defineRecipe({
     variant: "core"
   }
 });
-var InputGroup = React29__namespace.forwardRef(
-  (props, ref) => {
-    const {
-      startElement,
-      startElementProps,
-      endElement,
-      endElementProps,
-      label,
-      children,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsxRuntime.jsxs(react.Group, { ref, ...rest, children: [
-      startElement && /* @__PURE__ */ jsxRuntime.jsx(
-        react.InputElement,
-        {
-          pointerEvents: "none",
-          paddingX: 2,
-          ...startElementProps,
-          children: startElement
-        }
-      ),
-      React29__namespace.cloneElement(children, {
-        ...children.props
-      }),
-      label && /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { left: startElement ? 4 : "0", right: endElement ? 4 : 0, children: label }),
-      endElement && /* @__PURE__ */ jsxRuntime.jsx(react.InputElement, { placement: "end", paddingX: 2, ...endElementProps, children: endElement })
-    ] });
-  }
-);
-InputGroup.displayName = "InputGroup";
 var StyledInput = react.chakra(react.Input, inputRecipe);
-var Input = React29.forwardRef(
+var Input = React28.forwardRef(
   ({
     startElement,
     endElement,
@@ -3363,33 +3433,44 @@ var Input = React29.forwardRef(
     errorText,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Field, { invalid, helperText, errorText, children: /* @__PURE__ */ jsxRuntime.jsx(
-      InputGroup,
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Field3,
       {
-        endElement: endElement && endElement,
-        startElement: startElement && startElement,
-        width: "100%",
-        position: "relative",
-        label,
-        children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(react.Flex, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.Box, { visibility: "hidden", children: startElement }),
+            label
+          ] })
+        ),
+        floatingLabel: true,
+        children: [
+          startElement && /* @__PURE__ */ jsxRuntime.jsx(react.InputElement, { pointerEvents: "none", paddingX: 2, children: startElement }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(react.InputElement, { placement: "end", paddingX: 2, children: endElement })
+        ]
       }
-    ) });
+    );
   }
 );
 Input.displayName = "Input";
-var ListBox = React29.forwardRef(
+var ListBox = React28.forwardRef(
   (props) => {
     const { loading, listBoxRef, state, maxWidth, variant, children } = props;
     const { listBoxProps } = reactAria.useListBox(props, state, listBoxRef);
@@ -3426,7 +3507,7 @@ function ItemDescription({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { ...descriptionProps, css: styles, fontSize: "xs", children });
 }
 function Option({ item, state }) {
-  const ref = React29.useRef(null);
+  const ref = React28.useRef(null);
   const {
     optionProps,
     isSelected,
@@ -3451,7 +3532,7 @@ function Option({ item, state }) {
   if (isFocusVisible) {
     dataFields["data-focus-visible"] = true;
   }
-  React29.useEffect(() => {
+  React28.useEffect(() => {
     var _a5;
     (_a5 = ref == null ? void 0 : ref.current) == null ? void 0 : _a5.addEventListener(
       "touchend",
@@ -3463,12 +3544,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 = React29__namespace.default.createContext({
+var OptionContext = React28__namespace.default.createContext({
   labelProps: {},
   descriptionProps: {}
 });
 var useOptionContext = () => {
-  return React29.useContext(OptionContext);
+  return React28.useContext(OptionContext);
 };
 function ListBoxSection({ section, state }) {
   var _a5, _b4;
@@ -3683,53 +3764,73 @@ var nativeSelectSlotRecipe = react.defineSlotRecipe({
     }
   }
 });
-var NativeSelect = React29__namespace.forwardRef(function NativeSelect2(props, ref) {
+var NativeSelect = React28__namespace.forwardRef(function NativeSelect2(props, ref) {
   const {
     children,
     variant = "core",
     label,
     invalid,
     disabled,
+    required,
+    helperText,
+    errorText,
     ...rest
   } = props;
   const recipe = react.useSlotRecipe({ recipe: nativeSelectSlotRecipe });
   const styles = recipe({ variant });
-  return /* @__PURE__ */ jsxRuntime.jsx(Field, { label, invalid, disabled, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    react.NativeSelect.Root,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Field3,
     {
-      ref,
-      css: styles.root,
-      "aria-disabled": disabled,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          react.NativeSelect.Field,
-          {
-            css: styles.field,
-            "aria-invalid": invalid,
-            ...rest,
-            children
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(react.NativeSelect.Indicator, { css: styles.icon, children: /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.DropdownDownFill18Icon, {}) })
-      ]
+      label,
+      invalid,
+      disabled,
+      required,
+      helperText,
+      errorText,
+      floatingLabel: true,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        react.NativeSelect.Root,
+        {
+          ref,
+          css: styles.root,
+          "aria-disabled": disabled,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.NativeSelect.Field,
+              {
+                css: styles.field,
+                "aria-invalid": invalid,
+                ...rest,
+                children
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(react.NativeSelect.Indicator, { css: styles.icon, children: /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.DropdownDownFill18Icon, {}) })
+          ]
+        }
+      )
     }
-  ) });
+  );
 });
 var numericStepperRecipe = react.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",
@@ -3773,8 +3874,8 @@ var numericStepperRecipe = react.defineSlotRecipe({
     }
   }
 });
-var NumericStepper = React29__namespace.default.forwardRef(
-  ({
+var NumericStepper = React28__namespace.default.forwardRef((props) => {
+  const {
     name: nameProp,
     id: idProp,
     value: valueProp,
@@ -3786,101 +3887,101 @@ var NumericStepper = React29__namespace.default.forwardRef(
     withInput = true,
     stepSize = 1,
     showZero = false,
-    ariaLabelContext = { singular: "", plural: "" }
-  }) => {
-    const addButtonRef = React29.useRef(null);
-    const { t } = useTranslation();
-    const recipe = react.useSlotRecipe({ recipe: numericStepperRecipe });
-    const styles = recipe();
-    const [value, onChange] = react.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__ */ jsxRuntime.jsxs(Field, { css: styles.root, flexDirection: "row", width: "auto", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        VerySmallButton,
-        {
-          icon: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-        react.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 = React28.useRef(null);
+  const { t } = useTranslation();
+  const recipe = react.useSlotRecipe({ recipe: numericStepperRecipe });
+  const styles = recipe();
+  const [value, onChange] = react.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__ */ jsxRuntime.jsxs(Field3, { css: styles.root, width: "auto", ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      VerySmallButton,
+      {
+        icon: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      react.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();
           }
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
-        react.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__ */ jsxRuntime.jsx(
-        VerySmallButton,
-        {
-          ref: addButtonRef,
-          icon: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      react.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__ */ jsxRuntime.jsx(
+      VerySmallButton,
+      {
+        ref: addButtonRef,
+        icon: /* @__PURE__ */ jsxRuntime.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__namespace.default.forwardRef((props, ref) => {
+var VerySmallButton = React28__namespace.default.forwardRef((props, ref) => {
   const recipe = react.useSlotRecipe({ recipe: numericStepperRecipe });
   const styles = recipe({ colorPalette: "default" });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3963,7 +4064,7 @@ var texts13 = createTexts({
     };
   }
 });
-var PasswordInput = React29.forwardRef(
+var PasswordInput = React28.forwardRef(
   (props, ref) => {
     const {
       defaultVisible,
@@ -4008,7 +4109,7 @@ var PasswordInput = React29.forwardRef(
   }
 );
 PasswordInput.displayName = "PasswordInput";
-var VisibilityTrigger = React29__namespace.default.forwardRef(
+var VisibilityTrigger = React28__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       react.Button,
@@ -4054,7 +4155,7 @@ var sortedCallingCodes = awesomePhonenumber.getSupportedCallingCodes().sort((a,
 var callingCodes = react.createListCollection({
   items: [...prioritizedCountryCodes, ...sortedCallingCodes]
 });
-var CountryCodeSelect = React29.forwardRef((props, ref) => {
+var CountryCodeSelect = React28.forwardRef((props, ref) => {
   const { t } = useTranslation();
   if (props.allowedCountryCodes) {
     callingCodes.items = callingCodes.items.filter(
@@ -4087,7 +4188,7 @@ var texts15 = createTexts({
     sv: "Landskod"
   }
 });
-var PhoneNumberInput = React29.forwardRef((props, ref) => {
+var PhoneNumberInput = React28.forwardRef((props, ref) => {
   const {
     label: externalLabel,
     value: externalValue,
@@ -4183,7 +4284,7 @@ var texts16 = createTexts({
     sv: "Landskod"
   }
 });
-var Radio = React29.forwardRef((props, ref) => {
+var Radio = React28.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 }),
@@ -4192,13 +4293,13 @@ var Radio = React29.forwardRef((props, ref) => {
   ] });
 });
 Radio.displayName = "Radio";
-var RadioGroup = React29.forwardRef(
+var RadioGroup = React28.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(react.RadioGroup.Root, { ref, ...props, "aria-labelledby": "" });
   }
 );
 RadioGroup.displayName = "RadioGroup";
-var SearchInput = React29.forwardRef(
+var SearchInput = React28.forwardRef(
   (props, ref) => {
     const { t } = useTranslation();
     const { variant = "core", onReset, label, value } = props;
@@ -4242,12 +4343,21 @@ var texts17 = createTexts({
     en: "Reset search field"
   }
 });
-var Select = React29__namespace.forwardRef(
+var Select = React28__namespace.forwardRef(
   (props, ref) => {
-    const { variant = "core", children, positioning, label, ...rest } = props;
+    const {
+      variant = "core",
+      children,
+      positioning,
+      label,
+      errorText,
+      invalid,
+      helperText,
+      ...rest
+    } = props;
     const recipe = react.useSlotRecipe({ key: "select" });
     const styles = recipe({ variant });
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(Field3, { errorText, invalid, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
       react.Select.Root,
       {
         ...rest,
@@ -4262,11 +4372,11 @@ var Select = React29__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { css: styles.selectContent, children })
         ]
       }
-    );
+    ) });
   }
 );
 Select.displayName = "Select";
-var SelectItem = React29__namespace.forwardRef(
+var SelectItem = React28__namespace.forwardRef(
   (props, ref) => {
     const { item, children, description, ...rest } = props;
     const recipe = react.useSlotRecipe({ key: "select" });
@@ -4281,14 +4391,14 @@ var SelectItem = React29__namespace.forwardRef(
   }
 );
 SelectItem.displayName = "SelectItem";
-var SelectItemGroup = React29__namespace.forwardRef(function SelectItemGroup2(props, ref) {
+var SelectItemGroup = React28__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 = React29__namespace.forwardRef(function SelectTrigger2(props, ref) {
+var SelectTrigger = React28__namespace.forwardRef(function SelectTrigger2(props, ref) {
   const { children, clearable, ...rest } = props;
   const recipe = react.useSlotRecipe({ key: "select" });
   const styles = recipe();
@@ -4300,7 +4410,7 @@ var SelectTrigger = React29__namespace.forwardRef(function SelectTrigger2(props,
     ] })
   ] });
 });
-var SelectClearTrigger = React29__namespace.forwardRef(function SelectClearTrigger2(props, ref) {
+var SelectClearTrigger = React28__namespace.forwardRef(function SelectClearTrigger2(props, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Select.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ jsxRuntime.jsx(
     CloseButton,
     {
@@ -4311,11 +4421,11 @@ var SelectClearTrigger = React29__namespace.forwardRef(function SelectClearTrigg
     }
   ) });
 });
-var SelectContent = React29__namespace.forwardRef(function SelectContent2(props, ref) {
+var SelectContent = React28__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 = React29__namespace.forwardRef(function SelectValueText2(props, ref) {
+var SelectValueText = React28__namespace.forwardRef(function SelectValueText2(props, ref) {
   const { children, withPlaceholder, placeholder, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Select.ValueText,
@@ -4340,30 +4450,47 @@ var SelectValueText = React29__namespace.forwardRef(function SelectValueText2(pr
 var SelectLabel = react.Select.Label;
 var SelectItemText = react.Select.ItemText;
 var SelectRoot = react.Select.Root;
-var Switch = React29.forwardRef((props) => {
-  const { rootRef, size = "md", label, ...rest } = props;
+var Switch = React28.forwardRef((props) => {
+  const {
+    rootRef,
+    size = "md",
+    label,
+    invalid,
+    errorText,
+    helperText,
+    ...rest
+  } = props;
   const recipe = react.useSlotRecipe({ key: "switch" });
   const styles = recipe({ size });
-  return /* @__PURE__ */ jsxRuntime.jsx(Field, { style: { width: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    react.Switch.Root,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Field3,
     {
-      ref: rootRef,
-      ...rest,
-      checked: props.checked,
-      css: styles.root,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Label, { children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Switch.HiddenInput, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Control, { css: styles.control, children: /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Thumb, {}) })
-      ]
+      style: { width: "auto" },
+      invalid,
+      errorText,
+      helperText,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        react.Switch.Root,
+        {
+          ref: rootRef,
+          ...rest,
+          checked: props.checked,
+          css: styles.root,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Label, { children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx(react.Switch.HiddenInput, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Control, { css: styles.control, children: /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Thumb, {}) })
+          ]
+        }
+      )
     }
-  ) });
+  );
 });
 Switch.displayName = "Switch";
 var useLabelHeight = (label) => {
-  const labelRef = React29.useRef(null);
-  const [labelHeight, setLabelHeight] = React29.useState(0);
-  React29.useLayoutEffect(() => {
+  const labelRef = React28.useRef(null);
+  const [labelHeight, setLabelHeight] = React28.useState(0);
+  React28.useLayoutEffect(() => {
     const updateLabelHeight = () => {
       if (labelRef.current) {
         setLabelHeight(labelRef.current.offsetHeight);
@@ -4383,13 +4510,13 @@ var useLabelHeight = (label) => {
   }, [label]);
   return { labelRef, labelHeight };
 };
-var Textarea = React29.forwardRef(
+var Textarea = React28.forwardRef(
   (props, ref) => {
     const { label, variant = "core", ...fieldProps } = props;
     const recipe = react.useRecipe({ key: "textarea" });
     const styles = recipe({ variant });
     const { labelRef, labelHeight } = useLabelHeight(label);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Field, { ...fieldProps, position: "relative", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Field3, { ...fieldProps, position: "relative", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         react.Textarea,
         {
@@ -4401,7 +4528,7 @@ var Textarea = React29.forwardRef(
           placeholder: " "
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(react.FieldLabel, { ref: labelRef, children: label })
+      /* @__PURE__ */ jsxRuntime.jsx(FloatingLabel, { ref: labelRef, children: label })
     ] });
   }
 );
@@ -4494,13 +4621,13 @@ var pressableCardRecipe = react.defineRecipe({
   }
 });
 var PressableCardButton = react.chakra("button", pressableCardRecipe);
-var PressableCard = React29.forwardRef(
+var PressableCard = React28.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(PressableCardButton, { ...props, ref });
   }
 );
 PressableCard.displayName = "PressableCard";
-var RadioCard = React29.forwardRef(
+var RadioCard = React28.forwardRef(
   (props, ref) => {
     const { inputProps, children, value, ariaLabel } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(react.RadioCard.Item, { ...props, children: [
@@ -4517,7 +4644,7 @@ var RadioCard = React29.forwardRef(
   }
 );
 RadioCard.displayName = "RadioCard";
-var RadioCardGroup = React29.forwardRef(
+var RadioCardGroup = React28.forwardRef(
   (props, ref) => {
     const {
       children,
@@ -4626,7 +4753,7 @@ var separatorRecipe = react.defineRecipe({
     }
   ]
 });
-var Separator = React29.forwardRef(
+var Separator = React28.forwardRef(
   (props, ref) => {
     const {
       size = "md",
@@ -4677,7 +4804,7 @@ var staticCardRecipe = react.defineRecipe({
   }
 });
 var StyledCardBox = react.chakra("div", staticCardRecipe);
-var StaticCard = React29.forwardRef(
+var StaticCard = React28.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(StyledCardBox, { ...props, ref });
   }
@@ -4729,7 +4856,7 @@ var getCorrectIcon = ({ variant, size }) => {
   var _a5;
   return ((_a5 = icons[variant]) == null ? void 0 : _a5[size]) ?? react.Box;
 };
-var LineIcon = React29.forwardRef(
+var LineIcon = React28.forwardRef(
   function LineIcon2({
     variant,
     size = "md",
@@ -4804,7 +4931,7 @@ var InfoTag = ({
     ] })
   ] });
 };
-var TravelTag = React29.forwardRef(
+var TravelTag = React28.forwardRef(
   function TravelTag2({
     variant,
     size = "md",
@@ -4881,13 +5008,13 @@ var ExternalIcon = ({ label }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fra
   /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.LinkOutOutline24Icon, { "aria-hidden": true }),
   /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: label })
 ] });
-var TextLink = React29.forwardRef(
+var TextLink = React28.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 && React29.isValidElement(children)) {
-      return /* @__PURE__ */ jsxRuntime.jsx(react.Link, { href, ...props, ref, children: React29.cloneElement(children, {
+    if (props.asChild && React28.isValidElement(children)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(react.Link, { href, ...props, ref, children: React28.cloneElement(children, {
         ...children.props,
         children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           children.props.children,
@@ -4913,7 +5040,7 @@ var texts18 = createTexts({
 var List = react.List.Root;
 var ListItem2 = react.List.Item;
 var ListIndicator = react.List.Indicator;
-var CargonetLogo = React29.forwardRef(
+var CargonetLogo = React28.forwardRef(
   (props, ref) => {
     const { colorPalette } = props;
     const mainColor = "#DF8200";
@@ -5072,8 +5199,8 @@ var fillRecipe = {
 };
 var Path = react.chakra("path", fillRecipe);
 var SVGGroup = react.chakra("g", fillRecipe);
-var VyLogo = React29.forwardRef((props, ref) => {
-  const id = React29.useId();
+var VyLogo = React28.forwardRef((props, ref) => {
+  const id = React28.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs(SvgBox, { ref, viewBox: "0 0 107 54", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Vy logo" }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -5193,7 +5320,7 @@ var VyLogo = React29.forwardRef((props, ref) => {
   ] });
 });
 VyLogo.displayName = "VyLogo";
-var VyLogoPride = React29.forwardRef(
+var VyLogoPride = React28.forwardRef(
   (props, ref) => {
     const pinkColor = "#ED6F99";
     const purpleColor = "#C06CF7";
@@ -5204,7 +5331,7 @@ var VyLogoPride = React29.forwardRef(
     const redColor = "#EA3323";
     const orangeColor = "#F09436";
     const yellowColor = "#FFFF54";
-    const id = React29.useId();
+    const id = React28.useId();
     return (
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       /* @__PURE__ */ jsxRuntime.jsxs(SvgBox, { ref, viewBox: "0 0 107 54", ...props, children: [
@@ -5407,7 +5534,7 @@ var VyLogoPride = React29.forwardRef(
   }
 );
 VyLogoPride.displayName = "VyLogoPride";
-var JumpButton = React29.forwardRef(
+var JumpButton = React28.forwardRef(
   (props, ref) => {
     const { direction, disabled, size = "sm" } = props;
     const { t } = useTranslation();
@@ -5442,7 +5569,7 @@ var texts19 = createTexts({
     en: "15 seconds backward"
   }
 });
-var PlayPauseButton = React29.forwardRef((props, ref) => {
+var PlayPauseButton = React28.forwardRef((props, ref) => {
   const { playing, disabled, size = "sm" } = props;
   const { t } = useTranslation();
   const recipe = react.useSlotRecipe({ key: "mediaControllerButton" });
@@ -5475,7 +5602,7 @@ var texts20 = createTexts({
     en: "Play"
   }
 });
-var SkipButton = React29.forwardRef(
+var SkipButton = React28.forwardRef(
   (props, ref) => {
     const { direction, disabled, size = "sm" } = props;
     const { t } = useTranslation();
@@ -5531,23 +5658,23 @@ var Nudge = (props) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Popover2, { defaultOpen: true, size, ...rest });
 };
-var NudgeTrigger = React29.forwardRef(({ ...props }, ref) => {
+var NudgeTrigger = React28.forwardRef(({ ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { ...props, ref });
 });
 NudgeTrigger.displayName = "NudgeTrigger";
-var NudgeContent = React29.forwardRef(
+var NudgeContent = React28.forwardRef(
   ({ showCloseButton = true, children, ...props }, ref) => {
-    const [currentStep, setCurrentStep] = React29.useState(1);
-    const childrenArray = React29__namespace.default.Children.toArray(children);
+    const [currentStep, setCurrentStep] = React28.useState(1);
+    const childrenArray = React28__namespace.default.Children.toArray(children);
     const { open } = react$1.usePopoverContext();
-    React29.useEffect(() => {
+    React28.useEffect(() => {
       setCurrentStep(1);
     }, [children, open]);
     const wizardPages = childrenArray.filter(
-      (child) => React29__namespace.default.isValidElement(child) && child.type.displayName === "NudgeWizardStep"
+      (child) => React28__namespace.default.isValidElement(child) && child.type.displayName === "NudgeWizardStep"
     );
     const restChildren = childrenArray.filter(
-      (child) => !React29__namespace.default.isValidElement(child) || child.type.displayName !== "NudgeWizardStep"
+      (child) => !React28__namespace.default.isValidElement(child) || child.type.displayName !== "NudgeWizardStep"
     );
     const totalSteps = wizardPages.length;
     const isLastStep = totalSteps === currentStep;
@@ -5628,7 +5755,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 = React29.forwardRef(({ children, ...props }, ref) => {
+var NudgeCloseTrigger = React28.forwardRef(({ children, ...props }, ref) => {
   const isStringChild = typeof children === "string";
   return /* @__PURE__ */ jsxRuntime.jsx(react.Popover.CloseTrigger, { ...props, ref, asChild: !isStringChild, children });
 });
@@ -5636,7 +5763,7 @@ NudgeCloseTrigger.displayName = "NudgeCloseTrigger";
 var [RootPropsProvider, useRootProps] = react.createContext({
   name: "RootPropsProvider"
 });
-var Pagination = React29__namespace.forwardRef(
+var Pagination = React28__namespace.forwardRef(
   (props, ref) => {
     const { getHref, children, ...rest } = props;
     const recipe = react.useSlotRecipe({ key: "pagination" });
@@ -5661,11 +5788,11 @@ var Pagination = React29__namespace.forwardRef(
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationEllipsis = React29__namespace.forwardRef((props, ref) => {
+var PaginationEllipsis = React28__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 = React29__namespace.forwardRef((props, ref) => {
+var PaginationItem = React28__namespace.forwardRef((props, ref) => {
   const rootProps = useRootProps();
   const { t } = useTranslation();
   const { page, totalPages } = react.usePaginationContext();
@@ -5698,7 +5825,7 @@ var PaginationItem = React29__namespace.forwardRef((props, ref) => {
   ) });
 });
 PaginationItem.displayName = "PaginationItem";
-var PaginationPrevTrigger = React29__namespace.forwardRef((props, ref) => {
+var PaginationPrevTrigger = React28__namespace.forwardRef((props, ref) => {
   const { page } = react.usePaginationContext();
   const recipe = react.useSlotRecipe({ key: "pagination" });
   const styles = recipe();
@@ -5738,7 +5865,7 @@ var PaginationPrevTrigger = React29__namespace.forwardRef((props, ref) => {
   ) });
 });
 PaginationPrevTrigger.displayName = "PaginationPrevTrigger";
-var PaginationNextTrigger = React29__namespace.forwardRef((props, ref) => {
+var PaginationNextTrigger = React28__namespace.forwardRef((props, ref) => {
   const { page, totalPages } = react.usePaginationContext();
   const recipe = react.useSlotRecipe({ key: "pagination" });
   const styles = recipe();
@@ -5818,17 +5945,17 @@ var texts23 = createTexts({
   }
 });
 var Popover2 = react.Popover.Root;
-var PopoverTrigger = React29.forwardRef(({ children, ...props }, ref) => {
+var PopoverTrigger = React28.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 = React29.forwardRef(
+var PopoverContent = React28.forwardRef(
   ({ children, showCloseButton = false, ...props }, ref) => {
     const { colorMode } = useColorMode();
-    const closeButtonRef = React29__namespace.default.useRef(null);
+    const closeButtonRef = React28__namespace.default.useRef(null);
     const { open } = react.usePopoverContext();
-    React29.useEffect(() => {
+    React28.useEffect(() => {
       if (showCloseButton && open && closeButtonRef.current) {
         closeButtonRef.current.focus();
       }
@@ -5862,7 +5989,7 @@ var ProgressDot = ({ isActive }) => {
     }
   );
 };
-var ProgressIndicator = React29.forwardRef(({ numberOfSteps, activeStep }) => {
+var ProgressIndicator = React28.forwardRef(({ numberOfSteps, activeStep }) => {
   const { t } = useTranslation();
   const recipe = react.useSlotRecipe({
     key: "progressIndicator"
@@ -6036,7 +6163,7 @@ var SporProvider = ({
     children
   ] }) }) });
 };
-var StepperContext = React29__namespace.default.createContext(null);
+var StepperContext = React28__namespace.default.createContext(null);
 var StepperProvider = ({
   activeStep,
   children,
@@ -6053,7 +6180,7 @@ var StepperProvider = ({
   );
 };
 var useStepper = () => {
-  const context = React29__namespace.default.useContext(StepperContext);
+  const context = React28__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"
@@ -6061,7 +6188,7 @@ var useStepper = () => {
   }
   return context;
 };
-var Stepper = React29.forwardRef(
+var Stepper = React28.forwardRef(
   function Stepper2(props, ref) {
     const {
       onClick = () => {
@@ -6209,7 +6336,7 @@ var getState = (stepNumber, activeStep) => {
   }
   return "disabled";
 };
-var Tabs = React29.forwardRef((props, ref) => {
+var Tabs = React28.forwardRef((props, ref) => {
   const { variant = "core", size = "sm" } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(react.Tabs.Root, { ...props, ref, variant, size });
 });
@@ -6411,7 +6538,7 @@ var tableSlotRecipe = react.defineSlotRecipe({
     }
   }
 });
-var Table = React29.forwardRef((props, ref) => {
+var Table = React28.forwardRef((props, ref) => {
   const { variant = "ghost", size, colorPalette = "green", children } = props;
   const recipe = react.useSlotRecipe({ recipe: tableSlotRecipe });
   const styles = recipe({ variant, size });
@@ -7952,33 +8079,6 @@ var fieldSlotRecipe = react.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"
@@ -7998,7 +8098,7 @@ var fieldSlotRecipe = react.defineSlotRecipe({
       textStyle: "xs",
       width: "fit-content",
       position: "absolute",
-      bottom: -4,
+      bottom: -5,
       left: 3,
       zIndex: "dropdown",
       maxWidth: "50ch",
@@ -9244,6 +9344,10 @@ var selectSlotRecipe = react.defineSlotRecipe({
       },
       _open: {
         borderBottomRadius: 0
+      },
+      _invalid: {
+        outline: "2px solid",
+        outlineColor: "outline.error"
       }
     },
     itemText: {
@@ -9278,10 +9382,6 @@ var selectSlotRecipe = react.defineSlotRecipe({
           _active: {
             backgroundColor: "brand.surface.active"
           },
-          _invalid: {
-            outline: "2px solid",
-            outlineColor: "outline.error"
-          },
           _disabled: {
             pointerEvents: "none",
             color: "text.disabled",
@@ -10945,7 +11045,7 @@ exports.DrawerTrigger = DrawerTrigger;
 exports.Expandable = Expandable;
 exports.ExpandableAlert = ExpandableAlert;
 exports.ExpandableItem = ExpandableItem;
-exports.Field = Field;
+exports.Field = Field3;
 exports.FieldErrorText = FieldErrorText;
 exports.FieldLabel = FieldLabel;
 exports.Fieldset = Fieldset;