@vygruppen/spor-react 12.2.0 → 12.3.0

package/dist/index.js

@@ -1403,20 +1403,89 @@ var ColorModeButton = React28__namespace.forwardRef(function ColorModeButton2(pr
     }
   ) });
 });
-var Field = React28__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";
+Field3.displayName = "Field";
 var FieldErrorText = React28__namespace.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Field.ErrorText, { ref, children: props.children });
 });
@@ -1662,6 +1731,15 @@ var datepickerAnatomy = anatomy.createAnatomy("datepicker").parts(
   "box",
   "rangeCalendarPopover"
 );
+var checkboxCardAnatomy = anatomy.createAnatomy("checkbox-card", [
+  "root",
+  "control",
+  "label",
+  "description",
+  "addon",
+  "indicator",
+  "content"
+]);
 
 // src/theme/slot-recipes/datepicker.ts
 var datePickerSlotRecipe = react.defineSlotRecipe({
@@ -2373,18 +2451,20 @@ var StyledField = React28.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"
     });
@@ -2423,12 +2503,14 @@ var DatePicker = React28.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,
                 {
@@ -2508,13 +2590,18 @@ 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 = React28.useRef(null);
@@ -2541,54 +2628,65 @@ 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
     ] })
@@ -2635,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();
@@ -2682,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",
@@ -2762,9 +2860,6 @@ var texts11 = createTexts({
     sv: "minuter"
   }
 });
-function useFieldContext4() {
-  throw new Error("Function not implemented.");
-}
 var DialogContent = React28__namespace.forwardRef((props, ref) => {
   const {
     children,
@@ -2996,184 +3091,28 @@ var CheckboxGroup = React28.forwardRef(
   }
 );
 CheckboxGroup.displayName = "CheckboxGroup";
-var choiceChipRecipe = react.defineRecipe({
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    boxAlign: "center",
-    fontSize: "xs",
-    cursor: "pointer",
-    transitionProperty: "all",
-    borderRadius: "xl",
-    transitionDuration: "fast",
-    height: 6,
-    paddingInlineStart: "2",
-    paddingInlineEnd: "2",
-    outline: "1px solid",
-    outlineColor: "base.outline",
-    _checked: {
-      backgroundColor: "brand.surface",
-      borderRadius: "sm",
-      outline: "none",
-      color: "brand.text",
-      _hover: {
-        backgroundColor: "brand.surface.hover",
-        _active: {
-          backgroundColor: "brand.surface.active"
-        }
-      }
-    },
-    _focusVisible: {
-      outline: "2px solid",
-      outlineColor: "outline.focus",
-      outlineOffset: "1px"
-    },
-    _disabled: {
-      pointerEvents: "none",
-      boxShadow: "none",
-      backgroundColor: "surface.disabled",
-      color: "text.disabled",
-      outline: "none",
-      _hover: {
-        backgroundColor: "core.surface.disabled",
-        boxShadow: "none",
-        color: "core.text.disabled"
-      },
-      _checked: {
-        cursor: "not-allowed",
-        boxShadow: "none",
-        color: "core.text.disabled",
-        backgroundColor: "core.surface.disabled",
-        _hover: {
-          backgroundColor: "core.surface.disabled",
-          boxShadow: "none",
-          color: "core.text.disabled"
-        }
-      }
-    }
-  },
-  variants: {
-    variant: {
-      core: {
-        color: "core.text",
-        outlineColor: "core.outline",
-        _hover: {
-          outline: "2px solid",
-          outlineColor: "core.outline.hover",
-          _active: {
-            outline: "1px solid",
-            outlineColor: "core.outline",
-            backgroundColor: "core.surface.active"
-          }
-        }
-      },
-      accent: {
-        backgroundColor: "accent.surface",
-        color: "accent.text",
-        outline: "none",
-        _hover: {
-          backgroundColor: "accent.surface.hover",
-          _active: {
-            backgroundColor: "accent.surface.active"
-          }
-        }
-      },
-      floating: {
-        backgroundColor: "floating.surface",
-        outline: "1px solid",
-        outlineColor: "floating.outline",
-        color: "floating.text",
-        boxShadow: "sm",
-        _hover: {
-          backgroundColor: "floating.surface.hover",
-          outline: "1px solid",
-          outlineColor: "floating.outline.hover",
-          _active: {
-            backgroundColor: "floating.surface.active",
-            outline: "1px solid",
-            outlineColor: "floating.outline"
-          }
-        }
-      }
-    },
-    size: {
-      xs: {
-        _checked: {
-          borderRadius: "0.563rem"
-        },
-        height: 5,
-        paddingX: 1.5
-      },
-      sm: {
-        _checked: {
-          borderRadius: "sm"
-        },
-        height: 6,
-        paddingX: 2
-      },
-      md: {
-        _checked: {
-          borderRadius: "sm"
-        },
-        height: 7,
-        paddingX: 2
-      },
-      lg: {
-        _checked: {
-          borderRadius: "md"
+var ChoiceChip = React28.forwardRef(
+  ({ children, icon, onCheckedChange, ...rootProps }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      react.CheckboxCard.Root,
+      {
+        ...rootProps,
+        ...onCheckedChange && {
+          onCheckedChange: (details) => onCheckedChange(!!details.checked)
         },
-        height: 8,
-        paddingX: 3
+        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 ChoiceChipStyledDiv = react.chakra("div", choiceChipRecipe);
-var ChoiceChip = ({
-  children,
-  icon,
-  size = "sm",
-  chipType = "choice",
-  variant = "core",
-  ...props
-}) => {
-  const {
-    getControlProps,
-    disabled,
-    getLabelProps,
-    getHiddenInputProps,
-    setChecked,
-    checked
-  } = react.useCheckbox(props);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    react.chakra.label,
-    {
-      ...getLabelProps(),
-      "aria-label": props["aria-label"] ?? String(children),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          react.chakra.input,
-          {
-            ...getHiddenInputProps(),
-            disabled,
-            defaultChecked: checked,
-            value: checked ? "on" : "off",
-            type: "checkbox",
-            "aria-checked": checked,
-            onClick: () => {
-              setChecked(!checked);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(ChoiceChipStyledDiv, { ...getControlProps(), size, variant, children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { children: checked ? icon.checked : icon.default }),
-          chipType !== "icon" && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { children }),
-          chipType === "filter" && checked && /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.CloseOutline24Icon, { marginLeft: 1.5 })
-        ] })
-      ]
-    }
-  );
-};
+);
+ChoiceChip.displayName = "ChoiceChip";
 var Popover = React28.forwardRef(
   ({
     children,
@@ -3304,6 +3243,11 @@ var Combobox = React28.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,
@@ -3478,36 +3422,6 @@ var inputRecipe = react.defineRecipe({
     variant: "core"
   }
 });
-var InputGroup = React28__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
-        }
-      ),
-      React28__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 = React28.forwardRef(
   ({
@@ -3519,29 +3433,40 @@ var Input = React28.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";
@@ -3846,46 +3771,66 @@ var NativeSelect = React28__namespace.forwardRef(function NativeSelect2(props, r
     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",
@@ -3929,8 +3874,8 @@ var numericStepperRecipe = react.defineSlotRecipe({
     }
   }
 });
-var NumericStepper = React28__namespace.default.forwardRef(
-  ({
+var NumericStepper = React28__namespace.default.forwardRef((props) => {
+  const {
     name: nameProp,
     id: idProp,
     value: valueProp,
@@ -3942,99 +3887,99 @@ var NumericStepper = React28__namespace.default.forwardRef(
     withInput = true,
     stepSize = 1,
     showZero = false,
-    ariaLabelContext = { singular: "", plural: "" }
-  }) => {
-    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(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 = React28__namespace.default.forwardRef((props, ref) => {
   const recipe = react.useSlotRecipe({ recipe: numericStepperRecipe });
@@ -4400,10 +4345,19 @@ var texts17 = createTexts({
 });
 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,
@@ -4418,7 +4372,7 @@ var Select = React28__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { css: styles.selectContent, children })
         ]
       }
-    );
+    ) });
   }
 );
 Select.displayName = "Select";
@@ -4497,23 +4451,40 @@ var SelectLabel = react.Select.Label;
 var SelectItemText = react.Select.ItemText;
 var SelectRoot = react.Select.Root;
 var Switch = React28.forwardRef((props) => {
-  const { rootRef, size = "md", label, ...rest } = 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) => {
@@ -4545,7 +4516,7 @@ var Textarea = React28.forwardRef(
     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,
         {
@@ -4557,7 +4528,7 @@ var Textarea = React28.forwardRef(
           placeholder: " "
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(react.FieldLabel, { ref: labelRef, children: label })
+      /* @__PURE__ */ jsxRuntime.jsx(FloatingLabel, { ref: labelRef, children: label })
     ] });
   }
 );
@@ -7522,6 +7493,170 @@ var checkboxSlotRecipe = react.defineSlotRecipe({
     }
   }
 });
+var choiceChipSlotRecipe = react.defineSlotRecipe({
+  slots: checkboxCardAnatomy.keys(),
+  className: "chakra-checkbox-card",
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      boxAlign: "center",
+      fontSize: "xs",
+      cursor: "pointer",
+      transitionProperty: "all",
+      borderRadius: "xl",
+      transitionDuration: "fast",
+      paddingInlineStart: "2",
+      paddingInlineEnd: "2",
+      outline: "1px solid",
+      outlineColor: "base.outline",
+      _checked: {
+        backgroundColor: "brand.surface",
+        borderRadius: "sm",
+        outline: "none",
+        color: "brand.text",
+        _hover: {
+          backgroundColor: "brand.surface.hover",
+          _active: {
+            backgroundColor: "brand.surface.active"
+          }
+        }
+      },
+      _focusVisible: {
+        outline: "2px solid",
+        outlineColor: "outline.focus",
+        outlineOffset: "1px"
+      },
+      _disabled: {
+        pointerEvents: "none",
+        boxShadow: "none",
+        backgroundColor: "surface.disabled",
+        color: "text.disabled",
+        outline: "none",
+        _hover: {
+          backgroundColor: "core.surface.disabled",
+          boxShadow: "none",
+          color: "core.text.disabled"
+        },
+        _checked: {
+          cursor: "not-allowed",
+          boxShadow: "none",
+          color: "core.text.disabled",
+          backgroundColor: "core.surface.disabled",
+          _hover: {
+            backgroundColor: "core.surface.disabled",
+            boxShadow: "none",
+            color: "core.text.disabled"
+          }
+        }
+      }
+    },
+    label: {
+      display: "flex",
+      alignItems: "center",
+      fontSize: "xs"
+    }
+  },
+  variants: {
+    size: {
+      xs: {
+        root: {
+          _checked: {
+            borderRadius: "0.563rem"
+          },
+          height: 5,
+          paddingX: 1.5
+        }
+      },
+      sm: {
+        root: {
+          _checked: {
+            borderRadius: "sm"
+          },
+          height: 6,
+          paddingX: 2
+        }
+      },
+      md: {
+        root: {
+          _checked: {
+            borderRadius: "sm"
+          },
+          height: 7,
+          paddingX: 2
+        }
+      },
+      lg: {
+        root: {
+          _checked: {
+            borderRadius: "md"
+          },
+          height: 8,
+          paddingX: 3
+        }
+      }
+    },
+    variant: {
+      core: {
+        root: {
+          color: "core.text",
+          outlineColor: "core.outline",
+          _hover: {
+            outline: "2px solid",
+            outlineColor: "core.outline.hover",
+            _active: {
+              outline: "1px solid",
+              outlineColor: "core.outline",
+              backgroundColor: "core.surface.active"
+            }
+          }
+        }
+      },
+      accent: {
+        root: {
+          backgroundColor: "accent.surface",
+          color: "accent.text",
+          outline: "none",
+          _hover: {
+            backgroundColor: "accent.surface.hover",
+            _active: {
+              backgroundColor: "accent.surface.active"
+            }
+          }
+        }
+      },
+      floating: {
+        root: {
+          backgroundColor: "floating.surface",
+          outline: "1px solid",
+          outlineColor: "floating.outline",
+          color: "floating.text",
+          boxShadow: "sm",
+          _hover: {
+            backgroundColor: "floating.surface.hover",
+            outline: "1px solid",
+            outlineColor: "floating.outline.hover",
+            _active: {
+              backgroundColor: "floating.surface.active",
+              outline: "1px solid",
+              outlineColor: "floating.outline"
+            }
+          }
+        }
+      }
+    },
+    chipType: {
+      icon: {},
+      choice: {},
+      filter: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "core",
+    chipType: "choice"
+  }
+});
 var dialogSlotRecipe = react.defineSlotRecipe({
   slots: dialogAnatomy.keys(),
   className: "spor-dialog",
@@ -7944,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"
@@ -7990,7 +8098,7 @@ var fieldSlotRecipe = react.defineSlotRecipe({
       textStyle: "xs",
       width: "fit-content",
       position: "absolute",
-      bottom: -4,
+      bottom: -5,
       left: 3,
       zIndex: "dropdown",
       maxWidth: "50ch",
@@ -9236,6 +9344,10 @@ var selectSlotRecipe = react.defineSlotRecipe({
       },
       _open: {
         borderBottomRadius: 0
+      },
+      _invalid: {
+        outline: "2px solid",
+        outlineColor: "outline.error"
       }
     },
     itemText: {
@@ -9270,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",
@@ -9844,7 +9952,8 @@ var slotRecipes = {
   table: tableSlotRecipe,
   tabs: tabsSlotRecipe,
   travelTag: travelTagSlotRecipe,
-  toast: toastSlotRecipe
+  toast: toastSlotRecipe,
+  checkboxCard: choiceChipSlotRecipe
 };
 var animations = react.defineTokens.animations({
   spin: {
@@ -10936,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;