@vygruppen/spor-react 12.2.0 → 12.3.0

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
 
-> @vygruppen/spor-react@12.2.0 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.3.0 build /home/runner/work/spor/spor/packages/spor-react
 > pnpm typegen && tsup
 
 
-> @vygruppen/spor-react@12.2.0 typegen /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.3.0 typegen /home/runner/work/spor/spor/packages/spor-react
 > npx @chakra-ui/cli typegen src/theme/index.ts
 
 ┌  Chakra CLI ⚡️
@@ -31,12 +31,12 @@ CLI Target: node16
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.js     312.95 KB
-CJS dist/index.js.map 629.56 KB
-CJS ⚡️ Build success in 2012ms
-ESM dist/index.mjs     292.49 KB
-ESM dist/index.mjs.map 629.56 KB
-ESM ⚡️ Build success in 2013ms
-DTS ⚡️ Build success in 22093ms
-DTS dist/index.d.ts  132.32 KB
-DTS dist/index.d.mts 132.32 KB
+CJS dist/index.js     315.30 KB
+CJS dist/index.js.map 633.21 KB
+CJS ⚡️ Build success in 2044ms
+ESM dist/index.mjs     294.71 KB
+ESM dist/index.mjs.map 633.21 KB
+ESM ⚡️ Build success in 2045ms
+DTS ⚡️ Build success in 20410ms
+DTS dist/index.d.ts  129.93 KB
+DTS dist/index.d.mts 129.93 KB

package/.turbo/turbo-typegen.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.2.0 typegen /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.3.0 typegen /home/runner/work/spor/spor/packages/spor-react
 > npx @chakra-ui/cli typegen src/theme/index.ts
 
 ┌  Chakra CLI ⚡️

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @vygruppen/spor-react
 
+## 12.3.0
+
+### Minor Changes
+
+- d7eabb1: Enhance form components to accept `invalid` and `errorText` props, leveraging Chakra UI's `Field` component for improved validation and error handling.
+
+### Patch Changes
+
+- 0087607: Fix lint issues
+- Updated dependencies [0087607]
+  - @vygruppen/spor-design-tokens@4.0.6
+
+## 12.2.1
+
+### Patch Changes
+
+- 9bc98dd: Rewrite choice-chip. Fixes error where it stalls applications. No breaking changes to props.
+- Updated dependencies [04498c3]
+  - @vygruppen/spor-icon-react@4.0.4
+
 ## 12.2.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
-import React__default, { PropsWithChildren, ReactNode, ChangeEvent } from 'react';
+import React__default, { PropsWithChildren, ReactNode } from 'react';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, Breadcrumb as Breadcrumb$1, RecipeVariantProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, Dialog, Drawer as Drawer$1, InputElementProps, PopoverRootProps, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, Field as Field$1, Fieldset as Fieldset$1, InputProps as InputProps$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, RadioCard as RadioCard$1, SeparatorProps, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, Table as Table$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+import { Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, Breadcrumb as Breadcrumb$1, RecipeVariantProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, Field as Field$1, Dialog, Drawer as Drawer$1, PopoverRootProps, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, CheckboxCardRootProps, CheckboxCard, Fieldset as Fieldset$1, InputProps as InputProps$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, RadioCard as RadioCard$1, SeparatorProps, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, Table as Table$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
 export { Box, BoxProps, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, CenterProps, Collapsible, CollapsibleRootProps, Container, ContainerProps, Em, Flex, FlexProps, For, FormatByte, FormatNumber, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Kbd, LocaleProvider, Portal, PortalProps, Show, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Span, Stack, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColumn, TableColumnHeader, TableColumnHeaderProps, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useToken } from '@chakra-ui/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconComponent } from '@vygruppen/spor-icon-react';
@@ -492,6 +492,43 @@ declare function ColorModeIcon(): react_jsx_runtime.JSX.Element;
 type ColorModeButtonProps = Omit<IconButtonProps$1, "aria-label">;
 declare const ColorModeButton: React$1.ForwardRefExoticComponent<ColorModeButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
+declare const fieldSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "label" | "requiredIndicator" | "helperText" | "errorText", _chakra_ui_react.SlotRecipeVariantRecord<"root" | "label" | "requiredIndicator" | "helperText" | "errorText">>;
+
+type FieldVariantProps = RecipeVariantProps<typeof fieldSlotRecipe>;
+type FieldBaseProps = {
+    direction?: "row" | "column";
+    disabled?: boolean;
+    invalid?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    label?: React$1.ReactNode;
+    helperText?: React$1.ReactNode;
+    errorText?: React$1.ReactNode;
+    floatingLabel?: boolean;
+};
+type FieldProps = Omit<Field$1.RootProps, "label"> & React$1.PropsWithChildren<FieldVariantProps> & FieldBaseProps;
+/**
+ *
+ * Field is a component that wraps around other input components, like `Input` and `Select`.
+ *
+ * It can have a label, helper text, and error text.
+ *
+ * ```tsx
+ *
+ * <Field label="E-mail">
+ *  <Input />
+ * </Field>
+ *
+ * ```
+ *
+ * This component is not exported and should be used as a wrapper for other input components.
+ */
+declare const Field: React$1.ForwardRefExoticComponent<Omit<Field$1.RootProps, "label"> & {
+    children?: React$1.ReactNode | undefined;
+} & FieldBaseProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const FieldErrorText: React$1.ForwardRefExoticComponent<Field$1.ErrorTextProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const FieldLabel: React$1.ForwardRefExoticComponent<Field$1.LabelProps & React$1.RefAttributes<HTMLLabelElement>>;
+
 declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell" | "arrow" | "wrapper" | "calendarTriggerButton" | "calendarPopover" | "calendar" | "weekdays" | "weekend" | "dateCell" | "inputLabel" | "dateTimeSegment" | "box" | "rangeCalendarPopover", {
     variant: {
         core: {
@@ -575,16 +612,15 @@ type DatePickerVariantProps = RecipeVariantProps<typeof datePickerSlotRecipe>;
 declare const DatePicker: React__default.ForwardRefExoticComponent<Omit<AriaDatePickerProps<DateValue>, "onChange"> & Pick<BoxProps, "minHeight" | "width"> & {
     variant?: _chakra_ui_react.ConditionalValue<"floating" | "ghost" | "core" | undefined>;
 } & {
-    children?: ReactNode | undefined;
+    children?: React__default.ReactNode | undefined;
 } & CalendarVariants & {
     name?: string;
     showYearNavigation?: boolean;
     withPortal?: boolean;
     onChange?: (value: DateValue | null) => void;
-    errorMessage?: ReactNode;
-} & React__default.RefAttributes<HTMLDivElement>>;
+} & FieldBaseProps & React__default.RefAttributes<HTMLDivElement>>;
 
-type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue$1>, "onChange"> & Pick<BoxProps, "minHeight"> & PropsWithChildren<DatePickerVariantProps> & CalendarVariants & {
+type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue$1>, "onChange" | "errorMessage" | "isInvalid" | "isRequired"> & Pick<BoxProps, "minHeight"> & PropsWithChildren<DatePickerVariantProps> & CalendarVariants & {
     startLabel?: string;
     startName?: string;
     endLabel?: string;
@@ -594,7 +630,7 @@ type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue$1>, "onChang
         start: DateValue$1 | null;
         end: DateValue$1 | null;
     } | null) => void;
-};
+} & FieldBaseProps;
 /**
  * A date range picker component.
  *
@@ -603,9 +639,9 @@ type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue$1>, "onChang
  * ```tsx
  * <DateRangePicker startLabel="From" startName="from" endLabel="To" endName="to" variant="core" />
  * ```
- */ declare function DateRangePicker({ variant, minHeight, startName, endName, withPortal, ...props }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
+ */ declare function DateRangePicker({ variant, minHeight, startName, endName, withPortal, errorText, helperText, invalid, ...props }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
 
-type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
+type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & FieldBaseProps & {
     /** The label. Defaults to a localized version of "Time" */
     label?: string;
     /** The name of the form field, if used in a regular form */
@@ -946,15 +982,6 @@ declare const attachedInputsRecipe: _chakra_ui_react.RecipeDefinition<{
     };
 }>;
 
-type InputGroupProps = GroupProps & {
-    startElementProps?: InputElementProps;
-    endElementProps?: InputElementProps;
-    startElement?: React$1.ReactNode;
-    endElement?: React$1.ReactNode;
-    children: React$1.ReactElement;
-    label?: string;
-};
-
 /**
  * Attaches several inputs together, so that they look like one input.
  *
@@ -967,17 +994,10 @@ type InputGroupProps = GroupProps & {
  * </AttachedInputs>
  * ```
  */
-type AttachedInputsProps = RecipeVariantProps<typeof attachedInputsRecipe> & InputGroupProps;
+type AttachedInputsProps = RecipeVariantProps<typeof attachedInputsRecipe> & GroupProps;
 declare const AttachedInputs: React$1.ForwardRefExoticComponent<{
     orientation?: _chakra_ui_react.ConditionalValue<"horizontal" | "vertical" | undefined>;
-} & _chakra_ui_react.GroupProps & {
-    startElementProps?: _chakra_ui_react.InputElementProps;
-    endElementProps?: _chakra_ui_react.InputElementProps;
-    startElement?: React.ReactNode;
-    endElement?: React.ReactNode;
-    children: React.ReactElement;
-    label?: string;
-} & React$1.RefAttributes<HTMLDivElement>>;
+} & GroupProps & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const CardSelect: ({ size, ...props }: PopoverRootProps) => react_jsx_runtime.JSX.Element;
 declare const CardSelectContent: React$1.ForwardRefExoticComponent<{
@@ -1058,98 +1078,51 @@ type CheckboxGroupProps = Exclude<CheckboxGroupProps$1, "colorPalette" | "size"
  */
 declare const CheckboxGroup: React__default.ForwardRefExoticComponent<Omit<CheckboxGroupProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
-declare const choiceChipRecipe: _chakra_ui_react.RecipeDefinition<{
-    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: number;
-            paddingX: number;
-        };
-        sm: {
-            _checked: {
-                borderRadius: "sm";
-            };
-            height: number;
-            paddingX: number;
-        };
-        md: {
-            _checked: {
-                borderRadius: "sm";
-            };
-            height: number;
-            paddingX: number;
-        };
-        lg: {
-            _checked: {
-                borderRadius: "md";
-            };
-            height: number;
-            paddingX: number;
-        };
-    };
-}>;
-
-type ChoiceChipVariantProps = RecipeVariantProps<typeof choiceChipRecipe>;
-type ChoiceChipProps = PropsWithChildren<ChoiceChipVariantProps> & {
-    onChange?: (value: ChangeEvent<HTMLInputElement>) => void;
-    checked?: boolean;
-    disabled?: boolean;
-    defaultChecked?: boolean;
-    /** The button text */
-    children: React__default.ReactNode;
-    icon?: {
-        default: React__default.ReactNode;
-        checked: React__default.ReactNode;
-    };
-    chipType?: "icon" | "choice" | "filter";
-    "aria-label"?: string;
+type CheckBoxIcon = {
+    default: React__default.ReactNode;
+    checked: React__default.ReactNode;
+};
+type ChoiceChipProps = Omit<CheckboxCardRootProps, "onCheckedChange" | "checked"> & {
+    icon?: CheckBoxIcon;
+    onCheckedChange?: (checked: boolean) => void;
+    checked: boolean;
 };
-declare const ChoiceChip: ({ children, icon, size, chipType, variant, ...props }: ChoiceChipProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Choice chips are checkboxes that look like selectable buttons.
+ *
+ * Choice chips are available in four different sizes - `xs`, `sm`, `md` and `lg`.
+ *
+ * ```tsx
+ * <Stack flexDirection="row">
+ *   <ChoiceChip size="lg">Bus</ChoiceChip>
+ *   <ChoiceChip size="lg">Train</ChoiceChip>
+ * </Stack>
+ * ```
+ *
+ * There are also three different chipType - `icon`, `choice` and `filter`.
+ *
+ * ```tsx
+ * <Stack flexDirection="row">
+ *  <ChoiceChip chipType="icon" icon={<Bus24Icon />}>Bus</ChoiceChip>
+ *  <ChoiceChip chipType="choice" icon={<Bus24Icon />}>Bus</ChoiceChip>
+ *  <ChoiceChip chipType="filter" icon={<Bus24Icon />}>Bus</ChoiceChip>
+ * </Stack>
+ *
+ * There are also three different variants - `core`, `accent` and `floating`.
+ *
+ * ```tsx
+ * <Stack flexDirection="row">
+ *   <ChoiceChip variant="core">Bus</ChoiceChip>
+ *   <ChoiceChip variant="accent">Boat</ChoiceChip>
+ *   <ChoiceChip variant="floating">Train</ChoiceChip>
+ * </Stack>
+ * ```
+ */
+declare const ChoiceChip: React__default.ForwardRefExoticComponent<Omit<CheckboxCard.RootProps, "checked" | "onCheckedChange"> & {
+    icon?: CheckBoxIcon;
+    onCheckedChange?: (checked: boolean) => void;
+    checked: boolean;
+} & React__default.RefAttributes<HTMLInputElement>>;
 
 type ComboboxProps<T> = Exclude<InputProps, "variant" | "colorPalette" | "size"> & AriaComboBoxProps<T> & {
     /** The label of the combobox */
@@ -1192,12 +1165,8 @@ type ComboboxProps<T> = Exclude<InputProps, "variant" | "colorPalette" | "size">
  */
 declare const Combobox: React__default.ForwardRefExoticComponent<_chakra_ui_react.InputProps & Omit<_chakra_ui_react.FieldRootProps, "label"> & {
     children?: ReactNode | undefined;
-} & {
-    label?: React__default.ReactNode;
-    helperText?: React__default.ReactNode;
-    errorText?: React__default.ReactNode /** Optional UI to show when there are no matching items */;
-} & {
-    label: string;
+} & FieldBaseProps & {
+    label: ReactNode;
     startElement?: React__default.ReactNode;
     endElement?: React__default.ReactNode;
 } & AriaComboBoxProps<object> & {
@@ -1217,69 +1186,25 @@ declare const Combobox: React__default.ForwardRefExoticComponent<_chakra_ui_reac
     children?: React__default.ReactNode;
 } & React__default.RefAttributes<HTMLDivElement>>;
 
-declare const fieldSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "label" | "requiredIndicator" | "helperText" | "errorText", _chakra_ui_react.SlotRecipeVariantRecord<"root" | "label" | "requiredIndicator" | "helperText" | "errorText">>;
-
-type FieldVariantProps = RecipeVariantProps<typeof fieldSlotRecipe>;
-type FieldProps = Omit<Field$1.RootProps, "label"> & React$1.PropsWithChildren<FieldVariantProps> & {
-    /** Label for the component */
-    label?: React$1.ReactNode;
-    /** Add helpertext underneath the input */
-    helperText?: React$1.ReactNode;
-    /** Add error text underneath the input */
-    errorText?: React$1.ReactNode;
-};
-/**
- *
- * Field is a component that wraps around other input components, like `Input` and `Select`.
- *
- * It can have a label, helper text, and error text.
- *
- * ```tsx
- *
- * <Field label="E-mail">
- *  <Input />
- * </Field>
- *
- * ```
- *
- * This component is not exported and should be used as a wrapper for other input components.
- */
-declare const Field: React$1.ForwardRefExoticComponent<Omit<Field$1.RootProps, "label"> & {
-    children?: React$1.ReactNode | undefined;
-} & {
-    /** Label for the component */
-    label?: React$1.ReactNode;
-    /** Add helpertext underneath the input */
-    helperText?: React$1.ReactNode;
-    /** Add error text underneath the input */
-    errorText?: React$1.ReactNode;
-} & React$1.RefAttributes<HTMLDivElement>>;
-declare const FieldErrorText: React$1.ForwardRefExoticComponent<Field$1.ErrorTextProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const FieldLabel: React$1.ForwardRefExoticComponent<Field$1.LabelProps & React$1.RefAttributes<HTMLLabelElement>>;
-
 declare const Fieldset: React$1.ForwardRefExoticComponent<Fieldset$1.RootProps & React$1.RefAttributes<HTMLFieldSetElement>>;
 declare const FieldsetLegend: React$1.ForwardRefExoticComponent<Fieldset$1.LegendProps & React$1.RefAttributes<HTMLLegendElement>>;
 declare const FieldsetContent: React$1.ForwardRefExoticComponent<Fieldset$1.ContentProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const FieldsetHelperText: React$1.ForwardRefExoticComponent<Fieldset$1.HelperTextProps & React$1.RefAttributes<HTMLSpanElement>>;
 declare const FieldsetErrorText: React$1.ForwardRefExoticComponent<Fieldset$1.ErrorTextProps & React$1.RefAttributes<HTMLSpanElement>>;
 
-type InputProps = Exclude<InputProps$1, "size" | "label" | "colorPalette"> & FieldProps & {
+type InputProps = Exclude<InputProps$1, "size" | "label" | "colorPalette" | "placeholder"> & FieldProps & {
     /** The input's label */
-    label: string;
+    label: ReactNode;
     /** Element that shows up to the left */
     startElement?: React__default.ReactNode;
     /** Element that shows up to the right */
     endElement?: React__default.ReactNode;
 };
 declare const Input: React__default.ForwardRefExoticComponent<InputProps$1 & Omit<_chakra_ui_react.FieldRootProps, "label"> & {
-    children?: React__default.ReactNode | undefined;
-} & {
-    label?: React__default.ReactNode;
-    helperText?: React__default.ReactNode;
-    errorText?: React__default.ReactNode;
-} & {
+    children?: ReactNode | undefined;
+} & FieldBaseProps & {
     /** The input's label */
-    label: string;
+    label: ReactNode;
     /** Element that shows up to the left */
     startElement?: React__default.ReactNode;
     /** Element that shows up to the right */
@@ -1402,11 +1327,8 @@ declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"ico
 }>;
 
 type NativeSelectVariantProps = RecipeVariantProps<typeof nativeSelectSlotRecipe>;
-type NativeSelectdProps = React$1.PropsWithChildren<NativeSelectVariantProps> & NativeSelectFieldProps & {
+type NativeSelectdProps = React$1.PropsWithChildren<NativeSelectVariantProps> & FieldBaseProps & NativeSelectFieldProps & {
     icon?: React$1.ReactNode;
-    label: string;
-    invalid?: boolean;
-    disabled?: boolean;
 };
 /**
  * Selects let you choose between several options
@@ -1428,17 +1350,14 @@ declare const NativeSelect: React$1.ForwardRefExoticComponent<{
     variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | undefined>;
 } & {
     children?: React$1.ReactNode | undefined;
-} & NativeSelect$1.FieldProps & {
+} & FieldBaseProps & NativeSelect$1.FieldProps & {
     icon?: React$1.ReactNode;
-    label: string;
-    invalid?: boolean;
-    disabled?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const numericStepperRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "container" | "input" | "text" | "button", _chakra_ui_react.SlotRecipeVariantRecord<"root" | "container" | "input" | "text" | "button">>;
 
 type NumericStepperVariants = RecipeVariantProps<typeof numericStepperRecipe>;
-type NumericStepperProps = BoxProps & PropsWithChildren<NumericStepperVariants> & {
+type NumericStepperProps = BoxProps & FieldBaseProps & PropsWithChildren<NumericStepperVariants> & {
     children: React__default.ReactNode;
     /** The name of the input field */
     name?: string;
@@ -1489,7 +1408,7 @@ type NumericStepperProps = BoxProps & PropsWithChildren<NumericStepperVariants>
  * ```
  * @see https://spor.vy.no/components/numeric-stepper
  */
-declare const NumericStepper: React__default.ForwardRefExoticComponent<BoxProps & {
+declare const NumericStepper: React__default.ForwardRefExoticComponent<BoxProps & FieldBaseProps & {
     children?: React__default.ReactNode | undefined;
 } & {
     children: React__default.ReactNode;
@@ -1529,7 +1448,7 @@ interface PasswordVisibilityProps {
     onVisibleChange?: (visible: boolean) => void;
 }
 interface PasswordInputProps extends InputProps, PasswordVisibilityProps {
-    rootProps?: InputGroupProps;
+    rootProps?: InputProps;
 }
 /**
  * A password input field with a visibility toggle.
@@ -1577,12 +1496,8 @@ type CountryCodeAndPhoneNumber = {
  */
 declare const PhoneNumberInput: React$1.ForwardRefExoticComponent<_chakra_ui_react.InputProps & Omit<_chakra_ui_react.FieldRootProps, "label"> & {
     children?: React$1.ReactNode | undefined;
-} & {
-    label?: React.ReactNode;
-    helperText?: React.ReactNode;
-    errorText?: React.ReactNode;
-} & {
-    label: string;
+} & FieldBaseProps & {
+    label: React$1.ReactNode;
     startElement?: React.ReactNode;
     endElement?: React.ReactNode;
 } & {
@@ -1648,12 +1563,8 @@ type SearchInputProps = InputProps & {
  */
 declare const SearchInput: React$1.ForwardRefExoticComponent<_chakra_ui_react.InputProps & Omit<_chakra_ui_react.FieldRootProps, "label"> & {
     children?: React$1.ReactNode | undefined;
-} & {
-    label?: React.ReactNode;
-    helperText?: React.ReactNode;
-    errorText?: React.ReactNode;
-} & {
-    label: string;
+} & FieldBaseProps & {
+    label: React$1.ReactNode;
     startElement?: React.ReactNode;
     endElement?: React.ReactNode;
 } & {
@@ -1674,10 +1585,6 @@ declare const selectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "
                 _active: {
                     backgroundColor: "brand.surface.active";
                 };
-                _invalid: {
-                    outline: "2px solid";
-                    outlineColor: "outline.error";
-                };
                 _disabled: {
                     pointerEvents: "none";
                     color: "text.disabled";
@@ -1738,7 +1645,7 @@ declare const selectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "
 }>;
 
 type SelectVariantProps = RecipeVariantProps<typeof selectSlotRecipe>;
-type SelectProps = SelectRootProps & PropsWithChildren<SelectVariantProps> & {
+type SelectProps = SelectRootProps & FieldProps & PropsWithChildren<SelectVariantProps> & {
     label?: string;
 };
 /**
@@ -1768,10 +1675,10 @@ type SelectProps = SelectRootProps & PropsWithChildren<SelectVariantProps> & {
  * @see https://spor.vy.no/components/select
  *
  */
-declare const Select: React$1.ForwardRefExoticComponent<SelectRootProps<any> & {
-    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | "rightSideSquare" | "leftSideSquare" | undefined>;
-} & {
+declare const Select: React$1.ForwardRefExoticComponent<SelectRootProps<any> & Omit<_chakra_ui_react.FieldRootProps, "label"> & {
     children?: React$1.ReactNode | undefined;
+} & FieldBaseProps & {
+    variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | "rightSideSquare" | "leftSideSquare" | undefined>;
 } & {
     label?: string;
 } & React$1.RefAttributes<HTMLDivElement>>;
@@ -1856,7 +1763,7 @@ declare const switchSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "
 }>;
 
 type SwitchVariants = RecipeVariantProps<typeof switchSlotRecipe>;
-type SwitchProps = Exclude<Switch$1.RootProps, "size" | "colorPalette"> & PropsWithChildren<SwitchVariants> & {
+type SwitchProps = Exclude<Switch$1.RootProps, "size" | "colorPalette"> & FieldBaseProps & PropsWithChildren<SwitchVariants> & {
     inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
     rootRef?: React__default.Ref<HTMLLabelElement>;
     trackLabel?: {
@@ -1888,7 +1795,7 @@ type SwitchProps = Exclude<Switch$1.RootProps, "size" | "colorPalette"> & PropsW
  *
  * ```
  */
-declare const Switch: React__default.ForwardRefExoticComponent<Switch$1.RootProps & {
+declare const Switch: React__default.ForwardRefExoticComponent<Switch$1.RootProps & FieldBaseProps & {
     size?: ConditionalValue<"sm" | "md" | "lg" | undefined>;
 } & {
     children?: React__default.ReactNode | undefined;
@@ -1967,11 +1874,7 @@ type TextareaProps = Exclude<TextareaProps$1, "size" | "colorPalette"> & FieldPr
  */
 declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps$1 & Omit<_chakra_ui_react.FieldRootProps, "label"> & {
     children?: ReactNode | undefined;
-} & {
-    label?: React__default.ReactNode;
-    helperText?: React__default.ReactNode;
-    errorText?: React__default.ReactNode;
-} & {
+} & FieldBaseProps & {
     variant?: _chakra_ui_react.ConditionalValue<"floating" | "core" | undefined>;
 } & {
     label: ReactNode;
@@ -3763,4 +3666,4 @@ declare const Text: React$1.ForwardRefExoticComponent<Omit<TextProps$1, "textSty
  **/
 declare function slugify(text: string | string[], maxLength?: number): string;
 
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, type AlertProps, AttachedInputs, type AttachedInputsProps, Badge, type BadgeProps, Brand, Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonVariantProps, CardSelect, CardSelectContent, CardSelectTrigger, type CardSelectTriggerProps, CargonetLogo, type CargonetLogoProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, ChoiceChip, type ChoiceChipProps, Clipboard, ClipboardButton, CloseButton, type CloseButtonProps, CloseDrawerLine, Code, ColorInlineLoader, type ColorInlineLoaderProps, type ColorMode, ColorModeButton, ColorModeIcon, ColorModeProvider, type ColorModeProviderProps, ColorSpinner, type ColorSpinnerProps, Combobox, type ComboboxProps, ContentLoader, type ContentLoaderProps, type CountryCodeAndPhoneNumber, DarkFullScreenLoader, DarkInlineLoader, type DarkInlineLoaderProps, DarkSpinner, type DarkSpinnerProps, DatePicker, type DatePickerVariantProps, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field, FieldErrorText, FieldLabel, type FieldProps, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, type GroupVariantProps, Heading, type HeadingProps, IconButton, type IconButtonProps, InfoTag, type InfoTagProps, Input, type InputProps, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, type LightInlineLoaderProps, LightSpinner, type LightSpinnerProps, LineIcon, type LineIconProps, type LinkProps, List, ListBox, ListIndicator, ListItem, type MediaControllerVariantProps, NativeSelect, type NativeSelectdProps, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, type NudgeProps, NudgeTrigger, NudgeWizardStep, NumericStepper, type NumericStepperProps, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, type PasswordInputProps, type PasswordVisibilityProps, PhoneNumberInput, PlayPauseButton, Popover, PopoverContent, type PopoverProps, PopoverTrigger, PressableCard, ProgressBar, type ProgressBarProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorVariantProps, ProgressLoader, type ProgressLoaderProps, type ProgressLoaderVariantProps, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, type RadioProps, SearchInput, type SearchInputProps, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, type SelectProps, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, SkipButton, type SpinnerProps, SporProvider, StaticCard, type StaticCardProps, Stepper, StepperStep, type StepperVariantProps, SvgBox, Switch, type SwitchProps, Table, type TableProps, Tabs, TabsContent, TabsIndicator, TabsList, type TabsProps, TabsTrigger, Text, TextLink, type TextProps, Textarea, type TextareaProps, TimePicker, type TranslationObject, type Translations, TravelTag, type TravelTagProps, type UseColorModeReturn, VyLogo, VyLogoPride, type VyLogoPrideProps, createTexts, createToast, fontFaces, slugify, system, themes, useColorMode, useColorModeValue, useTranslation };
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, type AlertProps, AttachedInputs, type AttachedInputsProps, Badge, type BadgeProps, Brand, Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonVariantProps, CardSelect, CardSelectContent, CardSelectTrigger, type CardSelectTriggerProps, CargonetLogo, type CargonetLogoProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, ChoiceChip, type ChoiceChipProps, Clipboard, ClipboardButton, CloseButton, type CloseButtonProps, CloseDrawerLine, Code, ColorInlineLoader, type ColorInlineLoaderProps, type ColorMode, ColorModeButton, ColorModeIcon, ColorModeProvider, type ColorModeProviderProps, ColorSpinner, type ColorSpinnerProps, Combobox, type ComboboxProps, ContentLoader, type ContentLoaderProps, type CountryCodeAndPhoneNumber, DarkFullScreenLoader, DarkInlineLoader, type DarkInlineLoaderProps, DarkSpinner, type DarkSpinnerProps, DatePicker, type DatePickerVariantProps, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field, type FieldBaseProps, FieldErrorText, FieldLabel, type FieldProps, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, type GroupVariantProps, Heading, type HeadingProps, IconButton, type IconButtonProps, InfoTag, type InfoTagProps, Input, type InputProps, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, type LightInlineLoaderProps, LightSpinner, type LightSpinnerProps, LineIcon, type LineIconProps, type LinkProps, List, ListBox, ListIndicator, ListItem, type MediaControllerVariantProps, NativeSelect, type NativeSelectdProps, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, type NudgeProps, NudgeTrigger, NudgeWizardStep, NumericStepper, type NumericStepperProps, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, type PasswordInputProps, type PasswordVisibilityProps, PhoneNumberInput, PlayPauseButton, Popover, PopoverContent, type PopoverProps, PopoverTrigger, PressableCard, ProgressBar, type ProgressBarProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorVariantProps, ProgressLoader, type ProgressLoaderProps, type ProgressLoaderVariantProps, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, type RadioProps, SearchInput, type SearchInputProps, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, type SelectProps, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, SkipButton, type SpinnerProps, SporProvider, StaticCard, type StaticCardProps, Stepper, StepperStep, type StepperVariantProps, SvgBox, Switch, type SwitchProps, Table, type TableProps, Tabs, TabsContent, TabsIndicator, TabsList, type TabsProps, TabsTrigger, Text, TextLink, type TextProps, Textarea, type TextareaProps, TimePicker, type TranslationObject, type Translations, TravelTag, type TravelTagProps, type UseColorModeReturn, VyLogo, VyLogoPride, type VyLogoPrideProps, createTexts, createToast, fontFaces, slugify, system, themes, useColorMode, useColorModeValue, useTranslation };