@vygruppen/spor-react 12.2.1 → 12.3.1

package/.turbo/turbo-build.log

@@ -1,30 +1,12 @@
 
-> @vygruppen/spor-react@12.2.1 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.3.1 build /home/runner/work/spor/spor/packages/spor-react
 > pnpm typegen && tsup
 
 
-> @vygruppen/spor-react@12.2.1 typegen /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.3.1 typegen /home/runner/work/spor/spor/packages/spor-react
 > npx @chakra-ui/cli typegen src/theme/index.ts
 
 ┌  Chakra CLI ⚡️
-▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
-
-    ../spor-design-tokens/package.json:15:6:
-      15 │       "types": "./dist/tokens.d.ts"
-         ╵       ~~~~~~~
-
-  The "import" condition comes earlier and will be used for all "import" statements:
-
-    ../spor-design-tokens/package.json:13:6:
-      13 │       "import": "./dist/tokens.mjs",
-         ╵       ~~~~~~~~
-
-  The "require" condition comes earlier and will be used for all "require" calls:
-
-    ../spor-design-tokens/package.json:14:6:
-      14 │       "require": "./dist/tokens.js",
-         ╵       ~~~~~~~~~
-
 [?25l│
 ◒  Generating conditions types...
 ◇  ✅ Generated conditions typings
@@ -34,8 +16,7 @@
 [?25h[?25l│
 ◇  ✅ Generated utility typings
 [?25h[?25l│
-◒  Generating token types...
-◇  ✅ Generated token typings
+◇  ✅ Generated token typings
 [?25h[?25l│
 ◒  Generating system types...
 ◇  ✅ Generated system types
@@ -50,12 +31,12 @@ CLI Target: node16
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.js     313.49 KB
-CJS dist/index.js.map 630.43 KB
-CJS ⚡️ Build success in 2275ms
-ESM dist/index.mjs     292.98 KB
-ESM dist/index.mjs.map 630.43 KB
-ESM ⚡️ Build success in 2276ms
-DTS ⚡️ Build success in 25335ms
-DTS dist/index.d.ts  130.88 KB
-DTS dist/index.d.mts 130.88 KB
+ESM dist/index.mjs     294.73 KB
+ESM dist/index.mjs.map 633.25 KB
+ESM ⚡️ Build success in 2095ms
+CJS dist/index.js     315.33 KB
+CJS dist/index.js.map 633.25 KB
+CJS ⚡️ Build success in 2098ms
+DTS ⚡️ Build success in 21036ms
+DTS dist/index.d.ts  129.93 KB
+DTS dist/index.d.mts 129.93 KB

package/.turbo/turbo-typegen.log

@@ -1,26 +1,8 @@
 
-> @vygruppen/spor-react@12.2.1 typegen /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.3.1 typegen /home/runner/work/spor/spor/packages/spor-react
 > npx @chakra-ui/cli typegen src/theme/index.ts
 
 ┌  Chakra CLI ⚡️
-▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
-
-    ../spor-design-tokens/package.json:15:6:
-      15 │       "types": "./dist/tokens.d.ts"
-         ╵       ~~~~~~~
-
-  The "import" condition comes earlier and will be used for all "import" statements:
-
-    ../spor-design-tokens/package.json:13:6:
-      13 │       "import": "./dist/tokens.mjs",
-         ╵       ~~~~~~~~
-
-  The "require" condition comes earlier and will be used for all "require" calls:
-
-    ../spor-design-tokens/package.json:14:6:
-      14 │       "require": "./dist/tokens.js",
-         ╵       ~~~~~~~~~
-
 [?25l│
 ◒  Generating conditions types...
 ◇  ✅ Generated conditions typings

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @vygruppen/spor-react
 
+## 12.3.1
+
+### Patch Changes
+
+- d137429: Table: Fix width styling on tableCell.
+
+## 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

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as React$1 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, CheckboxCardRootProps, CheckboxCard, 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<{
@@ -1062,8 +1082,10 @@ type CheckBoxIcon = {
     default: React__default.ReactNode;
     checked: React__default.ReactNode;
 };
-type ChoiceChipProps = CheckboxCardRootProps & {
+type ChoiceChipProps = Omit<CheckboxCardRootProps, "onCheckedChange" | "checked"> & {
     icon?: CheckBoxIcon;
+    onCheckedChange?: (checked: boolean) => void;
+    checked: boolean;
 };
 /**
  * Choice chips are checkboxes that look like selectable buttons.
@@ -1096,8 +1118,10 @@ type ChoiceChipProps = CheckboxCardRootProps & {
  * </Stack>
  * ```
  */
-declare const ChoiceChip: React__default.ForwardRefExoticComponent<CheckboxCard.RootProps & {
+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> & {
@@ -1141,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> & {
@@ -1166,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 */
@@ -1351,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
@@ -1377,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;
@@ -1438,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;
@@ -1478,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.
@@ -1526,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;
 } & {
@@ -1597,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;
 } & {
@@ -1623,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";
@@ -1687,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;
 };
 /**
@@ -1717,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>>;
@@ -1805,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?: {
@@ -1837,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;
@@ -1916,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;
@@ -3626,7 +3580,7 @@ type ToastProps = {
     variant: Variant;
     id?: string;
 };
-declare const createToast: ({ text, variant, id, duration, }: ToastProps) => string;
+declare const createToast: ({ text, variant, id, duration, }: ToastProps) => string | undefined;
 
 type BadgeProps = BadgeProps$1 & {
     icon?: IconComponent;
@@ -3712,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 };