@vygruppen/spor-react 9.13.1 → 9.13.3

package/dist/index.d.ts

@@ -88,13 +88,19 @@ declare const Stack: _chakra_ui_system_dist_system_types.ComponentWithAs<"div",
  * @see Docs https://spor.vy.no/components/radiocard
  */
 type RadioCardProps = BoxProps & {
+    /** The value that will be passed to the `RadioCardGroup`'s `onChange` function if this `RadioCard` is selected.. */
     value: string;
+    /** The content of the RadioCard. */
     children: React.ReactNode;
+    /** Determines if the RadioCard is disabled. */
     isDisabled?: boolean;
 };
 declare const RadioCard: _chakra_ui_system_dist_system_types.ComponentWithAs<_chakra_ui_system_dist_system_types.As, BoxProps & {
+    /** The value that will be passed to the `RadioCardGroup`'s `onChange` function if this `RadioCard` is selected.. */
     value: string;
+    /** The content of the RadioCard. */
     children: React.ReactNode;
+    /** Determines if the RadioCard is disabled. */
     isDisabled?: boolean | undefined;
 }>;
 
@@ -109,15 +115,23 @@ type RadioGroupContextProps = {
     onChange: (value: string) => void;
     variant?: "base" | "floating";
     defaultValue?: string;
+    value?: string;
 };
 declare const RadioCardGroupContext: React.Context<RadioGroupContextProps | null>;
 type RadioCardGroupProps = BoxProps & {
+    /** A string that will be assigned as the name attribute to all RadioCard components within the group. */
     name: string;
+    /** The RadioCard components that make up the group. */
     children: React.ReactNode;
+    /** Optional. Determines the style of the RadioCard. Can be either "base" or "floating". */
     variant?: "base" | "floating";
+    /** Optional. Determines the direction of the group. Can be either "row" or "column". */
     direction?: "row" | "column";
+    /** Optional. A label for the group. */
     groupLabel?: string;
+    /** Optional. The default value of the RadioCard group. */
     defaultValue?: string;
+    /** Optional. A function that will be called when the selected value changes. The function receives the value of the selected RadioCard. */
     onChange?: (value: string) => void;
 };
 declare const RadioCardGroup: React.FC<RadioCardGroupProps>;
@@ -1966,31 +1980,17 @@ type DrawerProps = DrawerProps$1;
 declare const Drawer: (props: DrawerProps) => React.JSX.Element;
 declare const DrawerContent: _chakra_ui_system_dist_system_types.ComponentWithAs<any, DrawerContentProps>;
 
-type DrawerPlacement = "top" | "right" | "bottom" | "left";
-type FullScreenDrawerProps = {
-    /** The content inside the drawer */
-    children: React.ReactNode;
-    /** The title in the middle of the top menu */
-    title?: String;
-    /** Determines which side the drawer slides from */
-    placement?: DrawerPlacement;
-    /** A React component that will be placed to the left in the modal header */
-    leftButton?: React.ReactNode;
-    /** A React component that will be placed to the right in the modal header */
-    rightButton?: React.ReactNode;
-    /** Determines if the drawer is open or closed */
-    isOpen: boolean;
-    /** Function that will be called when the drawer closes */
-    onClose: () => void;
+type DrawerBodyProps = {
+    id?: string;
 };
-declare const FullScreenDrawer: ({ children, title, placement, leftButton, rightButton, isOpen, onClose, }: FullScreenDrawerProps) => React.JSX.Element;
-
 type SimpleDrawerProps = {
     children: React.ReactNode;
     title?: React.ReactNode;
     placement: "top" | "right" | "bottom" | "left";
     isOpen: boolean;
     onClose: () => void;
+    /** Props for drawer body */
+    body?: DrawerBodyProps;
 };
 /** A very basic drawer component that's easy to use
  *
@@ -2002,7 +2002,28 @@ type SimpleDrawerProps = {
  *
  * For more advanced use cases, see the [Drawer](./Drawer.tsx) component.
  */
-declare const SimpleDrawer: ({ placement, children, title, ...props }: SimpleDrawerProps) => React.JSX.Element;
+declare const SimpleDrawer: ({ placement, children, title, body, ...props }: SimpleDrawerProps) => React.JSX.Element;
+
+type DrawerPlacement = "top" | "right" | "bottom" | "left";
+type FullScreenDrawerProps = {
+    /** The content inside the drawer */
+    children: React.ReactNode;
+    /** The title in the middle of the top menu */
+    title?: String;
+    /** Determines which side the drawer slides from */
+    placement?: DrawerPlacement;
+    /** A React component that will be placed to the left in the modal header */
+    leftButton?: React.ReactNode;
+    /** A React component that will be placed to the right in the modal header */
+    rightButton?: React.ReactNode;
+    /** Determines if the drawer is open or closed */
+    isOpen: boolean;
+    /** Function that will be called when the drawer closes */
+    onClose: () => void;
+    /** Props for drawer body */
+    body?: DrawerBodyProps;
+};
+declare const FullScreenDrawer: ({ children, title, placement, leftButton, rightButton, isOpen, onClose, body, }: FullScreenDrawerProps) => React.JSX.Element;
 
 type TooltipProps = PopoverProps & {
     /**
@@ -5908,6 +5929,11 @@ declare const theme: {
         RadioCard: {
             baseStyle?: ((props: any) => {
                 container: {
+                    overflow: string;
+                    fontSize: string;
+                    display: string;
+                    cursor: string;
+                    borderRadius: string;
                     transitionProperty: string;
                     transitionDuration: string;
                     _disabled: {
@@ -5925,18 +5951,6 @@ declare const theme: {
                         backgroundColor: string;
                         pointerEvents: string;
                     };
-                    _focusVisible: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    };
-                    border: string;
-                    overflow: string;
-                    fontSize: string;
-                    display: string;
-                    cursor: string;
-                    borderRadius: string;
                 };
                 checked: {
                     backgroundColor: string;
@@ -5952,7 +5966,7 @@ declare const theme: {
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("container" | "checked" | "radioInput")[];
+                    keys: ("container" | "checked" | "radioInput" | "focused" | "focusedChecked")[];
                 }>;
             } | undefined;
             variants?: {
@@ -5980,9 +5994,6 @@ declare const theme: {
                             outlineColor: string;
                             backgroundColor: string;
                         };
-                        _focus: {
-                            outlineColor: string;
-                        };
                         outlineWidth: string;
                         outlineColor: string;
                         outlineStyle: string;
@@ -6012,9 +6023,6 @@ declare const theme: {
                             outlineColor: string;
                             backgroundColor: string;
                         };
-                        _focus: {
-                            outlineColor: string;
-                        };
                         outline: string;
                         outlineColor: string;
                         backgroundColor: string;
@@ -6041,12 +6049,30 @@ declare const theme: {
                             outlineColor: string;
                             backgroundColor: string;
                         };
-                        _focus: {
+                    };
+                    focusedChecked: {
+                        outlineOffset: string;
+                        outlineColor: string;
+                        outline: string;
+                        outlineStyle: string;
+                    };
+                    focused: {
+                        outlineOffset: string;
+                        boxShadow: string;
+                        _hover: {
+                            boxShadow: string;
                             outlineOffset: string;
+                            outlineWidth: string;
                             outlineColor: string;
-                            outline: string;
                             outlineStyle: string;
+                        } | {
+                            boxShadow: string;
+                            outlineOffset: string;
+                            outline: string;
+                            outlineColor: string;
                         };
+                        outlineColor: string;
+                        outline: string;
                     };
                 };
                 floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -6063,9 +6089,6 @@ declare const theme: {
                             outlineColor: string;
                             backgroundColor: string;
                         };
-                        _focus: {
-                            outlineColor: string;
-                        };
                         outline: string;
                         outlineColor: string;
                         backgroundColor: string;
@@ -6081,12 +6104,24 @@ declare const theme: {
                             outlineColor: string;
                             backgroundColor: string;
                         };
-                        _focus: {
+                    };
+                    focusedChecked: {
+                        outlineOffset: string;
+                        outlineColor: string;
+                        outline: string;
+                        outlineStyle: string;
+                    };
+                    focused: {
+                        outlineOffset: string;
+                        boxShadow: string;
+                        _hover: {
+                            boxShadow: string;
                             outlineOffset: string;
-                            outlineColor: string;
                             outline: string;
-                            outlineStyle: string;
+                            outlineColor: string;
                         };
+                        outlineColor: string;
+                        outline: string;
                     };
                 };
             } | undefined;
@@ -6095,7 +6130,7 @@ declare const theme: {
                 variant?: "base" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: ("container" | "checked" | "radioInput")[];
+            parts: ("container" | "checked" | "radioInput" | "focused" | "focusedChecked")[];
         };
         Radio: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -9550,4 +9585,4 @@ declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", Tex
  **/
 declare function slugify(text: string | string[], maxLength?: number): string;
 
-export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, TogglePride, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoDefault, VyLogoDefaultProps, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useToast, useTranslation };
+export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerBodyProps, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, TogglePride, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoDefault, VyLogoDefaultProps, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useToast, useTranslation };

package/dist/index.js

@@ -2191,19 +2191,7 @@ var init_RadioCardGroup = __esm({
             defaultValue: defaultValue || ""
           }
         },
-        /* @__PURE__ */ React88__namespace.default.createElement(
-          react.Stack,
-          {
-            as: "fieldset",
-            direction: direction2,
-            "aria-labelledby": groupLabel || name,
-            role: "radiogroup",
-            tabIndex: 0,
-            ...props
-          },
-          groupLabel && /* @__PURE__ */ React88__namespace.default.createElement(exports.FormLabel, { as: "legend", id: groupLabel }, groupLabel),
-          children
-        )
+        /* @__PURE__ */ React88__namespace.default.createElement(react.Stack, { as: "fieldset", direction: direction2, ...props }, groupLabel && /* @__PURE__ */ React88__namespace.default.createElement(exports.FormLabel, { as: "legend", id: groupLabel }, groupLabel), children)
       );
     };
   }
@@ -2213,7 +2201,7 @@ var init_RadioCard = __esm({
   "src/layout/RadioCard.tsx"() {
     init_RadioCardGroup();
     exports.RadioCard = react.forwardRef(
-      ({ children, value = "base", isDisabled, ...props }, ref) => {
+      ({ children, value, isDisabled, ...props }, ref) => {
         const context = React88.useContext(exports.RadioCardGroupContext);
         if (!context) {
           throw new Error(
@@ -2222,52 +2210,72 @@ var init_RadioCard = __esm({
         }
         const { name, selectedValue, onChange, variant } = context;
         const styles3 = react.useMultiStyleConfig("RadioCard", { variant });
+        const [isKeyboardUser, setKeyboardUser] = React88.useState(false);
+        const [isFocused, setFocus] = React88.useState(false);
         const isChecked = selectedValue === value;
-        const radioCardId = `radio-card-${React88.useId()}`;
         React88.useEffect(() => {
-          if (isChecked && typeof ref !== "function" && (ref == null ? void 0 : ref.current)) {
-            ref.current.focus();
-          }
-        }, [isChecked]);
-        const handleKeyDown = (event) => {
-          if (event.key === "Enter" || event.key === " ") {
-            onChange(value);
-          }
-          if (event.key === "ArrowRight" || event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "ArrowUp") {
-            const nextRadioCard = event.currentTarget.nextElementSibling;
-            if (nextRadioCard) {
-              nextRadioCard.focus();
+          const handleMouseDown = () => setKeyboardUser(false);
+          const handleKeyDown = (event) => {
+            if (event.key === " ") {
+              setFocus(false);
+            } else {
+              setKeyboardUser(true);
             }
+          };
+          window.addEventListener("mousedown", handleMouseDown);
+          window.addEventListener("keydown", handleKeyDown);
+          return () => {
+            window.removeEventListener("mousedown", handleMouseDown);
+            window.removeEventListener("keydown", handleKeyDown);
+          };
+        }, []);
+        React88.useEffect(() => {
+          if (isKeyboardUser && isChecked) {
+            setFocus(true);
+          } else {
+            setFocus(false);
           }
-        };
-        return /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { as: "label", "aria-label": String(children), onKeyDown: handleKeyDown }, /* @__PURE__ */ React88__namespace.default.createElement(
-          react.chakra.input,
-          {
-            type: "radio",
-            id: radioCardId,
-            ref,
-            value,
-            name,
-            checked: isChecked,
-            onChange: () => onChange(value),
-            disabled: isDisabled,
-            __css: styles3.radioInput
-          }
-        ), /* @__PURE__ */ React88__namespace.default.createElement(
+        }, [isKeyboardUser, isChecked]);
+        const inputId = `radio-card-${React88.useId()}`;
+        return /* @__PURE__ */ React88__namespace.default.createElement(
           react.Box,
           {
-            ...props,
-            tabIndex: 0,
-            ref,
-            role: "radio",
-            "aria-checked": isChecked,
-            "aria-labelledby": radioCardId,
-            __css: { ...styles3.container, ...isChecked && styles3.checked },
-            "data-checked": isChecked,
-            "data-disabled": isDisabled
+            onFocus: () => isKeyboardUser && setFocus(true),
+            onBlur: () => setFocus(false)
           },
-          children
-        ));
+          /* @__PURE__ */ React88__namespace.default.createElement(
+            react.chakra.input,
+            {
+              type: "radio",
+              id: inputId,
+              name,
+              ref,
+              checked: isChecked,
+              onChange: () => onChange(value),
+              disabled: isDisabled,
+              __css: styles3.radioInput
+            }
+          ),
+          /* @__PURE__ */ React88__namespace.default.createElement(
+            react.Box,
+            {
+              as: "label",
+              name,
+              htmlFor: inputId,
+              "aria-checked": isChecked,
+              "data-checked": isChecked,
+              "data-disabled": isDisabled,
+              ...props,
+              __css: {
+                ...styles3.container,
+                ...isChecked && styles3.checked,
+                ...isFocused && !isChecked && styles3.focused,
+                ...isChecked && isFocused && styles3.focusedChecked
+              }
+            },
+            children
+          )
+        );
       }
     );
   }
@@ -3009,7 +3017,8 @@ var init_Button = __esm({
           "aria-label": ariaLabel,
           "aria-busy": isLoading,
           disabled: isDisabled || isLoading,
-          position: "relative"
+          position: "relative",
+          fontFamily: "Vy Sans"
         },
         isLoading && /* @__PURE__ */ React88__namespace.default.createElement(react.Center, { position: "absolute", right: 0, left: 0, top: 1, bottom: 0 }, /* @__PURE__ */ React88__namespace.default.createElement(
           exports.ColorInlineLoader,
@@ -5196,7 +5205,8 @@ var init_FullScreenDrawer = __esm({
       leftButton = null,
       rightButton = /* @__PURE__ */ React88__namespace.default.createElement(DrawerCloseButton2, null),
       isOpen,
-      onClose
+      onClose,
+      body
     }) => {
       const [isContentBoxScrolled, setContentBoxScrolled] = React88.useState(false);
       const onContentScroll = (e) => {
@@ -5227,7 +5237,7 @@ var init_FullScreenDrawer = __esm({
             rightButton
           }
         ),
-        /* @__PURE__ */ React88__namespace.default.createElement(react.DrawerBody, { overflow: "auto", onScroll: onContentScroll }, children)
+        /* @__PURE__ */ React88__namespace.default.createElement(react.DrawerBody, { overflow: "auto", onScroll: onContentScroll, ...body }, children)
       ));
     };
     DrawerTopMenu = ({
@@ -5322,9 +5332,10 @@ var init_SimpleDrawer = __esm({
       placement,
       children,
       title,
+      body,
       ...props
     }) => {
-      return /* @__PURE__ */ React88__namespace.default.createElement(exports.Drawer, { placement, ...props }, /* @__PURE__ */ React88__namespace.default.createElement(react.DrawerOverlay, null), /* @__PURE__ */ React88__namespace.default.createElement(exports.DrawerContent, null, /* @__PURE__ */ React88__namespace.default.createElement(react.DrawerCloseButton, null), title && /* @__PURE__ */ React88__namespace.default.createElement(exports.ModalHeader, null, title), /* @__PURE__ */ React88__namespace.default.createElement(react.DrawerBody, null, children)));
+      return /* @__PURE__ */ React88__namespace.default.createElement(exports.Drawer, { placement, ...props }, /* @__PURE__ */ React88__namespace.default.createElement(react.DrawerOverlay, null), /* @__PURE__ */ React88__namespace.default.createElement(exports.DrawerContent, null, /* @__PURE__ */ React88__namespace.default.createElement(react.DrawerCloseButton, null), title && /* @__PURE__ */ React88__namespace.default.createElement(exports.ModalHeader, null, title), /* @__PURE__ */ React88__namespace.default.createElement(react.DrawerBody, { ...body }, children)));
     };
   }
 });
@@ -15038,20 +15049,23 @@ var init_radio_card = __esm({
   "src/theme/components/radio-card.ts"() {
     init_base_utils();
     init_floating_utils();
-    init_focus_utils();
     init_outline_utils();
-    parts17 = themeTools.anatomy("radio-card").parts("container", "checked", "radioInput");
+    parts17 = themeTools.anatomy("radio-card").parts(
+      "container",
+      "checked",
+      "radioInput",
+      "focused",
+      "focusedChecked"
+    );
     helpers24 = react.createMultiStyleConfigHelpers(parts17.keys);
     config33 = helpers24.defineMultiStyleConfig({
       baseStyle: (props) => ({
         container: {
-          border: "none",
           overflow: "hidden",
           fontSize: "inherit",
           display: "block",
           cursor: "pointer",
           borderRadius: "sm",
-          ...focusVisibleStyles(props),
           transitionProperty: "common",
           transitionDuration: "fast",
           _disabled: {
@@ -15086,9 +15100,6 @@ var init_radio_card = __esm({
             _active: {
               ...baseBackground("active", props),
               ...baseBorder("active", props)
-            },
-            _focus: {
-              ...outlineBorder("focus", props)
             }
           },
           checked: {
@@ -15098,12 +15109,23 @@ var init_radio_card = __esm({
             _active: {
               ...baseBackground("active", props),
               ...baseBorder("active", props)
-            },
-            _focus: {
-              outline: "4px solid",
-              outlineStyle: "double",
-              ...outlineBorder("focus", props),
-              outlineOffset: "-1px"
+            }
+          },
+          focusedChecked: {
+            outline: "4px solid",
+            outlineStyle: "double",
+            ...outlineBorder("focus", props),
+            outlineOffset: "-1px"
+          },
+          focused: {
+            outline: "2px solid",
+            ...outlineBorder("focus", props),
+            outlineOffset: "1px",
+            boxShadow: `inset 0 0 0 1px rgba(0, 0, 0, 0.40)`,
+            _hover: {
+              ...baseBorder("hover", props),
+              boxShadow: "none",
+              outlineOffset: "0px"
             }
           }
         }),
@@ -15120,9 +15142,6 @@ var init_radio_card = __esm({
             _active: {
               ...floatingBackground("active", props),
               ...floatingBorder("active", props)
-            },
-            _focus: {
-              ...outlineBorder("focus", props)
             }
           },
           checked: {
@@ -15133,12 +15152,23 @@ var init_radio_card = __esm({
             _active: {
               ...floatingBackground("active", props),
               ...floatingBorder("active", props)
-            },
-            _focus: {
-              outline: "4px solid",
-              outlineStyle: "double",
-              ...outlineBorder("focus", props),
-              outlineOffset: "-1px"
+            }
+          },
+          focusedChecked: {
+            outline: "4px solid",
+            outlineStyle: "double",
+            ...outlineBorder("focus", props),
+            outlineOffset: "-1px"
+          },
+          focused: {
+            outline: "2px solid",
+            ...outlineBorder("focus", props),
+            outlineOffset: "1px",
+            boxShadow: `inset 0 0 0 1px rgba(0, 0, 0, 0.10)`,
+            _hover: {
+              ...floatingBorder("hover", props),
+              boxShadow: "md",
+              outlineOffset: "0px"
             }
           }
         })
@@ -16168,6 +16198,9 @@ var init_font_faces = __esm({
   font-weight: 400;
   font-display: swap
 }
+  body {
+    font-family: "Vy Sans", sans-serif;
+  }
 `;
   }
 });

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, TogglePride, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoDefault, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, usePride, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-NMEIV2NI.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, TogglePride, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoDefault, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, usePride, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-Y56HXMZC.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "9.13.1",
+  "version": "9.13.3",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/button/Button.tsx

@@ -105,6 +105,7 @@ export const Button = forwardRef<ButtonProps, "button">((props, ref) => {
       aria-busy={isLoading}
       disabled={isDisabled || isLoading}
       position="relative"
+      fontFamily={"Vy Sans"}
     >
       {isLoading && (
         <Center position="absolute" right={0} left={0} top={1} bottom={0}>