@vygruppen/spor-react 12.7.1 → 12.8.1

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import React__default, { ReactNode, PropsWithChildren, ComponentProps } 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, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, CheckboxCardRootProps, CheckboxCard, Fieldset as Fieldset$1, Input as Input$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, SelectLabelProps, 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, PopoverRootProps, Dialog, Drawer as Drawer$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCardRootProps, CheckboxCard, Fieldset as Fieldset$1, Input as Input$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, SelectLabelProps, 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, ClientOnly, 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, TableColumnGroup, TableColumnHeader, TableColumnHeaderProps, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, chakra as spor, 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';
@@ -543,7 +543,7 @@ type FieldBaseProps = {
     errorText?: React$1.ReactNode;
     floatingLabel?: boolean;
 };
-type FieldProps = Omit<Field$1.RootProps, "label" | "onChange"> & React$1.PropsWithChildren<FieldVariantProps> & FieldBaseProps;
+type FieldProps = Omit<Field$1.RootProps, "label" | "onChange" | "onBlur" | "onFocus" | "onClick" | "children"> & React$1.PropsWithChildren<FieldVariantProps> & FieldBaseProps;
 /**
  *
  * Field is a component that wraps around other input components, like `Input` and `Select`.
@@ -560,7 +560,7 @@ type FieldProps = Omit<Field$1.RootProps, "label" | "onChange"> & React$1.PropsW
  *
  * 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" | "onChange"> & {
+declare const Field: React$1.ForwardRefExoticComponent<Omit<Field$1.RootProps, "label" | "children" | "onFocus" | "onBlur" | "onChange" | "onClick"> & {
     children?: React$1.ReactNode | undefined;
 } & FieldBaseProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const FieldErrorText: React$1.ForwardRefExoticComponent<Field$1.ErrorTextProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -1097,11 +1097,8 @@ declare const Checkbox: React$1.ForwardRefExoticComponent<Checkbox$1.RootProps &
     rootRef?: React$1.Ref<HTMLLabelElement>;
 } & React$1.RefAttributes<HTMLInputElement>>;
 
-type CheckboxGroupProps = Exclude<CheckboxGroupProps$1, "colorPalette" | "size" | "variant"> & {
-    direction?: "row" | "column";
-    children: React__default.ReactNode;
-    gap?: number | string;
-    [key: string]: any;
+type CheckboxGroupProps = React__default.ComponentProps<typeof CheckboxGroup$1> & {
+    direction: "row" | "column";
 };
 /**
  * Used to group several checkboxes together. You can pass the default value, as well as whether or not they're all disabled
@@ -1122,8 +1119,12 @@ type CheckboxGroupProps = Exclude<CheckboxGroupProps$1, "colorPalette" | "size"
  *   <Checkbox>Business</Checkbox>
  *   <Checkbox>First Class</Checkbox>
  * </CheckboxGroup>
+ * ```
  */
-declare const CheckboxGroup: React__default.ForwardRefExoticComponent<Omit<CheckboxGroupProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const CheckboxGroup: {
+    (props: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 type CheckBoxIcon = {
     default: React__default.ReactNode;
@@ -1631,8 +1632,9 @@ type SelectProps = SelectRootProps & FieldProps & {
 /**
  * A Select component.
  *
- * This component is useful to choose an item from a dropdown list of items. The list has four different variants, core, floating, rightSideSquare, leftSideSquare.
- * The last two variants are useful in attachecdInput for example in the PhoneNumberInput and CountryCodeSelect components.
+ * This component is useful to choose an item from a dropdown list of items. The list has two different variants, core, floating and floating.
+ * It also has a sideRadiusVariant that can be used to make the sides square, rightSideSquare, leftSideSquare.
+ * The sideRadiusVariant is useful in attachecdInput for example in the PhoneNumberInput and CountryCodeSelect components.
  *
  * @example
  * ```tsx
@@ -1655,7 +1657,7 @@ type SelectProps = SelectRootProps & FieldProps & {
  * @see https://spor.vy.no/components/select
  *
  */
-declare const Select: React$1.ForwardRefExoticComponent<SelectRootProps<any> & Omit<_chakra_ui_react.FieldRootProps, "label" | "onChange"> & {
+declare const Select: React$1.ForwardRefExoticComponent<SelectRootProps<any> & Omit<_chakra_ui_react.FieldRootProps, "label" | "children" | "onFocus" | "onBlur" | "onChange" | "onClick"> & {
     children?: React$1.ReactNode | undefined;
 } & FieldBaseProps & {
     label?: string;
@@ -1830,7 +1832,7 @@ type TextareaProps = Exclude<TextareaProps$1, "size" | "colorPalette"> & FieldPr
  * Textarea has two variants core, and floating.
  *
  */
-declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps$1 & Omit<_chakra_ui_react.FieldRootProps, "label" | "onChange"> & {
+declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps$1 & Omit<_chakra_ui_react.FieldRootProps, "label" | "children" | "onFocus" | "onBlur" | "onChange" | "onClick"> & {
     children?: ReactNode | undefined;
 } & FieldBaseProps & {
     variant?: _chakra_ui_react.ConditionalValue<"core" | "floating" | undefined>;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import React__default, { ReactNode, PropsWithChildren, ComponentProps } 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, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, CheckboxCardRootProps, CheckboxCard, Fieldset as Fieldset$1, Input as Input$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, SelectLabelProps, 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, PopoverRootProps, Dialog, Drawer as Drawer$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCardRootProps, CheckboxCard, Fieldset as Fieldset$1, Input as Input$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, SelectLabelProps, 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, ClientOnly, 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, TableColumnGroup, TableColumnHeader, TableColumnHeaderProps, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, chakra as spor, 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';
@@ -543,7 +543,7 @@ type FieldBaseProps = {
     errorText?: React$1.ReactNode;
     floatingLabel?: boolean;
 };
-type FieldProps = Omit<Field$1.RootProps, "label" | "onChange"> & React$1.PropsWithChildren<FieldVariantProps> & FieldBaseProps;
+type FieldProps = Omit<Field$1.RootProps, "label" | "onChange" | "onBlur" | "onFocus" | "onClick" | "children"> & React$1.PropsWithChildren<FieldVariantProps> & FieldBaseProps;
 /**
  *
  * Field is a component that wraps around other input components, like `Input` and `Select`.
@@ -560,7 +560,7 @@ type FieldProps = Omit<Field$1.RootProps, "label" | "onChange"> & React$1.PropsW
  *
  * 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" | "onChange"> & {
+declare const Field: React$1.ForwardRefExoticComponent<Omit<Field$1.RootProps, "label" | "children" | "onFocus" | "onBlur" | "onChange" | "onClick"> & {
     children?: React$1.ReactNode | undefined;
 } & FieldBaseProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const FieldErrorText: React$1.ForwardRefExoticComponent<Field$1.ErrorTextProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -1097,11 +1097,8 @@ declare const Checkbox: React$1.ForwardRefExoticComponent<Checkbox$1.RootProps &
     rootRef?: React$1.Ref<HTMLLabelElement>;
 } & React$1.RefAttributes<HTMLInputElement>>;
 
-type CheckboxGroupProps = Exclude<CheckboxGroupProps$1, "colorPalette" | "size" | "variant"> & {
-    direction?: "row" | "column";
-    children: React__default.ReactNode;
-    gap?: number | string;
-    [key: string]: any;
+type CheckboxGroupProps = React__default.ComponentProps<typeof CheckboxGroup$1> & {
+    direction: "row" | "column";
 };
 /**
  * Used to group several checkboxes together. You can pass the default value, as well as whether or not they're all disabled
@@ -1122,8 +1119,12 @@ type CheckboxGroupProps = Exclude<CheckboxGroupProps$1, "colorPalette" | "size"
  *   <Checkbox>Business</Checkbox>
  *   <Checkbox>First Class</Checkbox>
  * </CheckboxGroup>
+ * ```
  */
-declare const CheckboxGroup: React__default.ForwardRefExoticComponent<Omit<CheckboxGroupProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const CheckboxGroup: {
+    (props: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 type CheckBoxIcon = {
     default: React__default.ReactNode;
@@ -1631,8 +1632,9 @@ type SelectProps = SelectRootProps & FieldProps & {
 /**
  * A Select component.
  *
- * This component is useful to choose an item from a dropdown list of items. The list has four different variants, core, floating, rightSideSquare, leftSideSquare.
- * The last two variants are useful in attachecdInput for example in the PhoneNumberInput and CountryCodeSelect components.
+ * This component is useful to choose an item from a dropdown list of items. The list has two different variants, core, floating and floating.
+ * It also has a sideRadiusVariant that can be used to make the sides square, rightSideSquare, leftSideSquare.
+ * The sideRadiusVariant is useful in attachecdInput for example in the PhoneNumberInput and CountryCodeSelect components.
  *
  * @example
  * ```tsx
@@ -1655,7 +1657,7 @@ type SelectProps = SelectRootProps & FieldProps & {
  * @see https://spor.vy.no/components/select
  *
  */
-declare const Select: React$1.ForwardRefExoticComponent<SelectRootProps<any> & Omit<_chakra_ui_react.FieldRootProps, "label" | "onChange"> & {
+declare const Select: React$1.ForwardRefExoticComponent<SelectRootProps<any> & Omit<_chakra_ui_react.FieldRootProps, "label" | "children" | "onFocus" | "onBlur" | "onChange" | "onClick"> & {
     children?: React$1.ReactNode | undefined;
 } & FieldBaseProps & {
     label?: string;
@@ -1830,7 +1832,7 @@ type TextareaProps = Exclude<TextareaProps$1, "size" | "colorPalette"> & FieldPr
  * Textarea has two variants core, and floating.
  *
  */
-declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps$1 & Omit<_chakra_ui_react.FieldRootProps, "label" | "onChange"> & {
+declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps$1 & Omit<_chakra_ui_react.FieldRootProps, "label" | "children" | "onFocus" | "onBlur" | "onChange" | "onClick"> & {
     children?: ReactNode | undefined;
 } & FieldBaseProps & {
     variant?: _chakra_ui_react.ConditionalValue<"core" | "floating" | undefined>;

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, ClientOnly as ClientOnly$1, Field, defineStyle, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, Drawer as Drawer$1, Grid, GridItem, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCard, Fieldset as Fieldset$1, InputElement, Input as Input$1, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, List as List$1, Center, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineSlotRecipe, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, VisuallyHidden, defineConfig, ListItem, ChakraProvider, Toaster as Toaster$1, Toast, Icon } from '@chakra-ui/react';
+import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, ClientOnly as ClientOnly$1, Field, defineStyle, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, Drawer as Drawer$1, Grid, GridItem, usePopoverContext, Checkbox as Checkbox$1, CheckboxCard, Fieldset as Fieldset$1, InputElement, Input as Input$1, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, List as List$1, Center, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineSlotRecipe, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, VisuallyHidden, defineConfig, CheckboxGroup as CheckboxGroup$1, ListItem, ChakraProvider, Toaster as Toaster$1, Toast, Icon } from '@chakra-ui/react';
 export { Box, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, ClientOnly, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableBody, TableCaption, TableCell, TableColumn, TableColumnGroup, TableColumnHeader, TableFooter, TableHeader, TableRoot, TableRow, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, chakra as spor, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useToken } from '@chakra-ui/react';
 import { DropdownDownFill24Icon, CopyOutline18Icon, CheckmarkFill18Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, ServiceFill24Icon, QuestionFill24Icon, ErrorOutline24Icon, ErrorFill24Icon, AltTransportFill24Icon, WarningFill24Icon, SuccessFill24Icon, InformationFill24Icon, DropdownDownFill18Icon, DropdownRightFill18Icon, CalendarOutline24Icon, ArrowLeftFill24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, LinkOutOutline24Icon, LinkOutOutline18Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon, SuccessFill18Icon } from '@vygruppen/spor-icon-react';
-import * as React28 from 'react';
-import React28__default, { forwardRef, createContext, useId, cloneElement, useEffect, useRef, isValidElement, useState, useMemo, useLayoutEffect, useContext } from 'react';
+import * as React27 from 'react';
+import React27__default, { forwardRef, createContext, useId, cloneElement, useEffect, useRef, isValidElement, useState, useMemo, useLayoutEffect, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { spinnerColorData, inlineLoaderColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerLightData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData } from '@vygruppen/spor-loader';
 import ReactLottie from 'lottie-react';
@@ -489,7 +489,7 @@ var texts = createTexts({
     en: `${value}% done`
   })
 });
-var SkeletonCircle = React28.forwardRef(function SkeletonCircle2(props, ref) {
+var SkeletonCircle = React27.forwardRef(function SkeletonCircle2(props, ref) {
   const recipe = useRecipe({ key: "skeleton" });
   const [recipeProps, restProps] = recipe.splitVariantProps({
     loading: true,
@@ -739,7 +739,7 @@ var codeRecipie = defineRecipe({
   }
 });
 var StyledCode = chakra(Code$1, codeRecipie);
-var Code = React28__default.forwardRef(
+var Code = React27__default.forwardRef(
   function Code2(props, ref) {
     return /* @__PURE__ */ jsx(StyledCode, { ...props, ref });
   }
@@ -779,7 +779,7 @@ var Text3 = forwardRef(
     return /* @__PURE__ */ jsx(Text, { ...resolvedProps, ...rest, ref });
   }
 );
-var ClipboardIcon = React28.forwardRef((props, ref) => {
+var ClipboardIcon = React27.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     Clipboard$1.Indicator,
     {
@@ -791,7 +791,7 @@ var ClipboardIcon = React28.forwardRef((props, ref) => {
   );
 });
 ClipboardIcon.displayName = "ClipboardIcon";
-var ClipboardCopyText = React28.forwardRef((props, ref) => {
+var ClipboardCopyText = React27.forwardRef((props, ref) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsx(
     Clipboard$1.Indicator,
@@ -804,7 +804,7 @@ var ClipboardCopyText = React28.forwardRef((props, ref) => {
   );
 });
 ClipboardCopyText.displayName = "ClipboardCopyText";
-var ClipboardButton = React28.forwardRef((props, ref) => {
+var ClipboardButton = React27.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(Clipboard$1.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { ref, size: "xs", leftIcon: /* @__PURE__ */ jsx(ClipboardIcon, {}), ...props, children: /* @__PURE__ */ jsx(ClipboardCopyText, {}) }) });
 });
 ClipboardButton.displayName = "ClipboardButton";
@@ -891,7 +891,7 @@ var FloatingActionButton = forwardRef(
     placement = "bottom right",
     ...props
   }, ref) => {
-    const [isTextVisible, setIsTextVisible] = React28__default.useState(
+    const [isTextVisible, setIsTextVisible] = React27__default.useState(
       externalIsTextVisible === void 0 ? false : externalIsTextVisible
     );
     const scrollDirection = useScrollDirection();
@@ -932,11 +932,11 @@ var FloatingActionButton = forwardRef(
 );
 FloatingActionButton.displayName = "FloatingActionButton";
 var useScrollDirection = () => {
-  const [scrollDirection, setScrollDirection] = React28__default.useState(null);
-  const lastScrollPosition = React28__default.useRef(
+  const [scrollDirection, setScrollDirection] = React27__default.useState(null);
+  const lastScrollPosition = React27__default.useRef(
     globalThis.window === void 0 ? 0 : window.scrollY
   );
-  React28__default.useEffect(() => {
+  React27__default.useEffect(() => {
     const onScroll = () => {
       const delta = window.scrollY - lastScrollPosition.current;
       if (delta === 0) {
@@ -1258,12 +1258,12 @@ var texts6 = createTexts({
 });
 var Breadcrumb = forwardRef(
   ({ children, ...props }, ref) => {
-    const validChildren = React28__default.Children.toArray(children).filter(
-      (element) => React28__default.isValidElement(element)
+    const validChildren = React27__default.Children.toArray(children).filter(
+      (element) => React27__default.isValidElement(element)
     );
     return /* @__PURE__ */ jsx(Breadcrumb$1.Root, { ref, ...props, children: /* @__PURE__ */ jsx(Breadcrumb$1.List, { children: validChildren.map((child, index) => {
       const isLast = index === validChildren.length - 1;
-      return /* @__PURE__ */ jsxs(React28__default.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React27__default.Fragment, { children: [
         /* @__PURE__ */ jsx(Breadcrumb$1.Item, { children: child }),
         !isLast && /* @__PURE__ */ jsx(Breadcrumb$1.Separator, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(DropdownRightFill18Icon, {}) })
       ] }, index);
@@ -1293,7 +1293,7 @@ function ColorModeIcon() {
   const { colorMode } = useColorMode();
   return colorMode === "dark" ? /* @__PURE__ */ jsx(LuMoon, {}) : /* @__PURE__ */ jsx(LuSun, {});
 }
-var ColorModeButton = React28.forwardRef(function ColorModeButton2(props, ref) {
+var ColorModeButton = React27.forwardRef(function ColorModeButton2(props, ref) {
   const { toggleColorMode } = useColorMode();
   return /* @__PURE__ */ jsx(ClientOnly$1, { fallback: /* @__PURE__ */ jsx(Skeleton$1, { boxSize: "8" }), children: /* @__PURE__ */ jsx(
     IconButton$1,
@@ -1357,7 +1357,7 @@ var labelStyles = defineStyle({
     opacity: 0.4
   }
 });
-var Field3 = React28.forwardRef(
+var Field3 = React27.forwardRef(
   (props, ref) => {
     const {
       label,
@@ -1374,7 +1374,7 @@ var Field3 = React28.forwardRef(
     } = props;
     const recipe = useSlotRecipe({ key: "field" });
     const styles = recipe();
-    return /* @__PURE__ */ jsxs(Stack, { gap: "2", ref, ...rest, children: [
+    return /* @__PURE__ */ jsxs(Stack, { gap: "2", ref, width: "100%", ...rest, children: [
       /* @__PURE__ */ jsxs(
         Field.Root,
         {
@@ -1397,7 +1397,7 @@ var Field3 = React28.forwardRef(
   }
 );
 Field3.displayName = "Field";
-var FieldErrorText = React28.forwardRef((props, ref) => {
+var FieldErrorText = React27.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(Field.ErrorText, { ref, children: props.children });
 });
 FieldErrorText.displayName = "FieldErrorText";
@@ -2306,7 +2306,7 @@ var texts11 = createTexts({
     sv: "minuter"
   }
 });
-var DialogContent = React28.forwardRef((props, ref) => {
+var DialogContent = React27.forwardRef((props, ref) => {
   const {
     children,
     portalled = true,
@@ -2320,7 +2320,7 @@ var DialogContent = React28.forwardRef((props, ref) => {
   ] });
 });
 DialogContent.displayName = "DialogContent";
-var DialogCloseTrigger = React28.forwardRef(function DialogCloseTrigger2(props, ref) {
+var DialogCloseTrigger = React27.forwardRef(function DialogCloseTrigger2(props, ref) {
   return /* @__PURE__ */ jsx(Dialog.CloseTrigger, { ref, position: "absolute", ...props, asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { size: "md" }) });
 });
 var DialogRoot = Dialog.Root;
@@ -2480,7 +2480,7 @@ var CardSelectTrigger = forwardRef(
   }
 );
 CardSelectTrigger.displayName = "CardSelectTrigger";
-var Checkbox = React28.forwardRef(
+var Checkbox = React27.forwardRef(
   (props, ref) => {
     const { children, inputProps, rootRef, ...rest } = props;
     return /* @__PURE__ */ jsxs(Checkbox$1.Root, { ref: rootRef, ...rest, children: [
@@ -2491,12 +2491,10 @@ var Checkbox = React28.forwardRef(
   }
 );
 Checkbox.displayName = "Checkbox";
-var CheckboxGroup = forwardRef(
-  (props, ref) => {
-    const { direction = "row", children, gap = 1, ...rest } = props;
-    return /* @__PURE__ */ jsx(CheckboxGroup$1, { ref, ...rest, children: /* @__PURE__ */ jsx(Stack, { direction, gap, children }) });
-  }
-);
+var CheckboxGroup = (props) => {
+  const { direction = "row", children, gap = 1, ...rest } = props;
+  return /* @__PURE__ */ jsx(CheckboxGroup$1, { ...rest, children: /* @__PURE__ */ jsx(Stack, { direction, gap, children }) });
+};
 CheckboxGroup.displayName = "CheckboxGroup";
 var ChoiceChip = forwardRef(
   ({ children, icon, onCheckedChange, ...rootProps }, ref) => {
@@ -2578,10 +2576,10 @@ var Combobox = (props) => {
     loading,
     leftIcon,
     rightIcon,
-    borderBottomLeftRadius = "sm",
-    borderBottomRightRadius = "sm",
-    borderTopLeftRadius = "sm",
-    borderTopRightRadius = "sm",
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
     marginBottom,
     marginTop,
     marginX,
@@ -2680,7 +2678,8 @@ var Combobox = (props) => {
             }
           }
         ) : rightIcon,
-        placeholder: ""
+        placeholder: "",
+        "data-attachable": true
       }
     ),
     /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-trigger": "multiselect" }),
@@ -2872,7 +2871,7 @@ function Option({ item, state }) {
   }, []);
   return /* @__PURE__ */ jsx(OptionContext.Provider, { value: { labelProps, descriptionProps }, children: /* @__PURE__ */ jsx(ListItem, { ...optionProps, ...dataFields, ref, css: styles.item, children: item.rendered }) });
 }
-var OptionContext = React28__default.createContext({
+var OptionContext = React27__default.createContext({
   labelProps: {},
   descriptionProps: {}
 });
@@ -2907,7 +2906,7 @@ function ListBoxSection({ section, state }) {
     ) })
   ] }) });
 }
-var NativeSelect = React28.forwardRef(function NativeSelect2(props, ref) {
+var NativeSelect = React27.forwardRef(function NativeSelect2(props, ref) {
   const {
     children,
     variant = "core",
@@ -2954,7 +2953,7 @@ var NativeSelect = React28.forwardRef(function NativeSelect2(props, ref) {
     }
   );
 });
-var NumericStepper = React28__default.forwardRef((props, ref) => {
+var NumericStepper = React27__default.forwardRef((props, ref) => {
   const {
     name: nameProp,
     id: idProp,
@@ -3061,7 +3060,7 @@ var NumericStepper = React28__default.forwardRef((props, ref) => {
   ] });
 });
 NumericStepper.displayName = "NumericStepper";
-var VerySmallButton = React28__default.forwardRef((props, ref) => {
+var VerySmallButton = React27__default.forwardRef((props, ref) => {
   const recipe = useSlotRecipe({ key: "numericStepper" });
   const styles = recipe({ colorPalette: "default" });
   return /* @__PURE__ */ jsx(
@@ -3189,7 +3188,7 @@ var PasswordInput = forwardRef(
   }
 );
 PasswordInput.displayName = "PasswordInput";
-var VisibilityTrigger = React28__default.forwardRef(
+var VisibilityTrigger = React27__default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(
       Button$1,
@@ -3254,7 +3253,7 @@ var CountryCodeSelect = forwardRef((props, ref) => {
       collection: callingCodes,
       lazyMount: true,
       "aria-label": t(texts15.countryCode),
-      variant: "rightSideSquare",
+      sideRadiusVariant: "rightSideSquare",
       children: callingCodes.items.map((code) => /* @__PURE__ */ jsx(SelectItem, { as: "option", item: code, children: code.label }, code.label))
     }
   );
@@ -3425,7 +3424,7 @@ var texts17 = createTexts({
     en: "Reset search field"
   }
 });
-var Select = React28.forwardRef(
+var Select = React27.forwardRef(
   (props, ref) => {
     const {
       variant = "core",
@@ -3468,7 +3467,7 @@ var SelectLabel = (props) => {
   );
 };
 Select.displayName = "Select";
-var SelectItem = React28.forwardRef(
+var SelectItem = React27.forwardRef(
   (props, ref) => {
     const { item, children, description, ...rest } = props;
     const recipe = useSlotRecipe({ key: "select" });
@@ -3483,14 +3482,14 @@ var SelectItem = React28.forwardRef(
   }
 );
 SelectItem.displayName = "SelectItem";
-var SelectItemGroup = React28.forwardRef(function SelectItemGroup2(props, ref) {
+var SelectItemGroup = React27.forwardRef(function SelectItemGroup2(props, ref) {
   const { children, label, ...rest } = props;
   return /* @__PURE__ */ jsxs(Select$1.ItemGroup, { ...rest, ref, children: [
     /* @__PURE__ */ jsx(Select$1.ItemGroupLabel, { children: label }),
     children
   ] });
 });
-var SelectTrigger = React28.forwardRef(function SelectTrigger2(props, ref) {
+var SelectTrigger = React27.forwardRef(function SelectTrigger2(props, ref) {
   const { children, clearable, ...rest } = props;
   const recipe = useSlotRecipe({ key: "select" });
   const styles = recipe();
@@ -3502,7 +3501,7 @@ var SelectTrigger = React28.forwardRef(function SelectTrigger2(props, ref) {
     ] })
   ] });
 });
-var SelectClearTrigger = React28.forwardRef(function SelectClearTrigger2(props, ref) {
+var SelectClearTrigger = React27.forwardRef(function SelectClearTrigger2(props, ref) {
   return /* @__PURE__ */ jsx(Select$1.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ jsx(
     CloseButton,
     {
@@ -3513,11 +3512,11 @@ var SelectClearTrigger = React28.forwardRef(function SelectClearTrigger2(props,
     }
   ) });
 });
-var SelectContent = React28.forwardRef(function SelectContent2(props, ref) {
+var SelectContent = React27.forwardRef(function SelectContent2(props, ref) {
   const { portalled = true, portalRef, ...rest } = props;
   return /* @__PURE__ */ jsx(Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsx(Select$1.Positioner, { children: /* @__PURE__ */ jsx(Select$1.Content, { ...rest, ref }) }) });
 });
-var SelectValueText = React28.forwardRef(function SelectValueText2(props, ref) {
+var SelectValueText = React27.forwardRef(function SelectValueText2(props, ref) {
   const { children, withPlaceholder, placeholder, ...rest } = props;
   return /* @__PURE__ */ jsx(
     Select$1.ValueText,
@@ -4561,16 +4560,16 @@ NudgeTrigger.displayName = "NudgeTrigger";
 var NudgeContent = forwardRef(
   ({ showCloseButton = true, children, ...props }, ref) => {
     const [currentStep, setCurrentStep] = useState(1);
-    const childrenArray = React28__default.Children.toArray(children);
+    const childrenArray = React27__default.Children.toArray(children);
     const { open } = usePopoverContext();
     useEffect(() => {
       setCurrentStep(1);
     }, [children, open]);
     const wizardPages = childrenArray.filter(
-      (child) => React28__default.isValidElement(child) && child.type.displayName === "NudgeWizardStep"
+      (child) => React27__default.isValidElement(child) && child.type.displayName === "NudgeWizardStep"
     );
     const restChildren = childrenArray.filter(
-      (child) => !React28__default.isValidElement(child) || child.type.displayName !== "NudgeWizardStep"
+      (child) => !React27__default.isValidElement(child) || child.type.displayName !== "NudgeWizardStep"
     );
     const totalSteps = wizardPages.length;
     const isLastStep = totalSteps === currentStep;
@@ -4659,7 +4658,7 @@ NudgeCloseTrigger.displayName = "NudgeCloseTrigger";
 var [RootPropsProvider, useRootProps] = createContext$1({
   name: "RootPropsProvider"
 });
-var Pagination = React28.forwardRef(
+var Pagination = React27.forwardRef(
   (props, ref) => {
     const { getHref, children, ...rest } = props;
     const recipe = useSlotRecipe({ key: "pagination" });
@@ -4684,11 +4683,11 @@ var Pagination = React28.forwardRef(
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationEllipsis = React28.forwardRef((props, ref) => {
+var PaginationEllipsis = React27.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(ListItem2, { children: /* @__PURE__ */ jsx(Pagination$1.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsx(Box, { cursor: "default", children: "..." }) }) });
 });
 PaginationEllipsis.displayName = "PaginationEllipsis";
-var PaginationItem = React28.forwardRef((props, ref) => {
+var PaginationItem = React27.forwardRef((props, ref) => {
   const rootProps = useRootProps();
   const { t } = useTranslation();
   const { page, totalPages } = usePaginationContext();
@@ -4721,7 +4720,7 @@ var PaginationItem = React28.forwardRef((props, ref) => {
   ) });
 });
 PaginationItem.displayName = "PaginationItem";
-var PaginationPrevTrigger = React28.forwardRef((props, ref) => {
+var PaginationPrevTrigger = React27.forwardRef((props, ref) => {
   const { page } = usePaginationContext();
   const recipe = useSlotRecipe({ key: "pagination" });
   const styles = recipe();
@@ -4761,7 +4760,7 @@ var PaginationPrevTrigger = React28.forwardRef((props, ref) => {
   ) });
 });
 PaginationPrevTrigger.displayName = "PaginationPrevTrigger";
-var PaginationNextTrigger = React28.forwardRef((props, ref) => {
+var PaginationNextTrigger = React27.forwardRef((props, ref) => {
   const { page, totalPages } = usePaginationContext();
   const recipe = useSlotRecipe({ key: "pagination" });
   const styles = recipe();
@@ -4849,7 +4848,7 @@ PopoverTrigger.displayName = "PopoverTrigger";
 var PopoverContent = forwardRef(
   ({ children, showCloseButton = false, ...props }, ref) => {
     const { colorMode } = useColorMode();
-    const closeButtonRef = React28__default.useRef(null);
+    const closeButtonRef = React27__default.useRef(null);
     const { open } = usePopoverContext();
     useEffect(() => {
       if (showCloseButton && open && closeButtonRef.current) {
@@ -5060,7 +5059,7 @@ var SporProvider = ({
     children
   ] }) }) });
 };
-var StepperContext = React28__default.createContext(null);
+var StepperContext = React27__default.createContext(null);
 var StepperProvider = ({
   activeStep,
   children,
@@ -5077,7 +5076,7 @@ var StepperProvider = ({
   );
 };
 var useStepper = () => {
-  const context = React28__default.useContext(StepperContext);
+  const context = React27__default.useContext(StepperContext);
   if (!context) {
     throw new Error(
       "useStepper must be used within a StepperProvider. Most likely, you forgot to wrap your StepperStep in a Stepper component"
@@ -7604,7 +7603,8 @@ var fieldSlotRecipe = defineSlotRecipe({
       textStyle: "xs",
       width: "fit-content",
       position: "absolute",
-      bottom: -5,
+      top: "100%",
+      // position below parent
       left: 3,
       zIndex: "dropdown",
       maxWidth: "50ch",
@@ -9041,7 +9041,9 @@ var selectSlotRecipe = defineSlotRecipe({
           outline: "1px solid",
           outlineColor: "floating.outline"
         }
-      },
+      }
+    },
+    sideRadiusVariant: {
       rightSideSquare: {
         control: {
           outline: "1px solid",