@vygruppen/spor-react 3.7.4 → 3.7.5

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@3.7.4 build
+> @vygruppen/spor-react@3.7.5 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,14 +9,14 @@
 CJS Build start
 ESM Build start
 DTS Build start
-"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-TMLJPE4H.mjs".
 "toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/index.js".
+"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-GIAB4PHV.mjs".
+CJS dist/index.js 539.16 KB
+CJS ⚡️ Build success in 3758ms
 ESM dist/index.mjs                      2.09 KB
-ESM dist/CountryCodeSelect-FLRREZ6C.mjs 1.19 KB
-ESM dist/chunk-TMLJPE4H.mjs             430.62 KB
-ESM ⚡️ Build success in 3863ms
-CJS dist/index.js 538.95 KB
-CJS ⚡️ Build success in 3864ms
-DTS ⚡️ Build success in 18236ms
-DTS dist/index.d.ts  256.42 KB
-DTS dist/index.d.mts 256.42 KB
+ESM dist/CountryCodeSelect-SNFTRR3O.mjs 1.19 KB
+ESM dist/chunk-GIAB4PHV.mjs             430.78 KB
+ESM ⚡️ Build success in 3759ms
+DTS ⚡️ Build success in 18414ms
+DTS dist/index.d.ts  256.32 KB
+DTS dist/index.d.mts 256.32 KB

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @vygruppen/spor-react
 
+## 3.7.5
+
+### Patch Changes
+
+- fde28bf1: Input: Changed active-color to mint for light mode
+- 6778a4cf: Breadcrumb: Fix focus
+- e9fdce39: Fix bug where you couldn't use FAB as a link
+
 ## 3.7.4
 
 ### Patch Changes

package/dist/{CountryCodeSelect-FLRREZ6C.mjs → CountryCodeSelect-SNFTRR3O.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-TMLJPE4H.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-GIAB4PHV.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-TMLJPE4H.mjs → chunk-GIAB4PHV.mjs}

@@ -1,10 +1,10 @@
-import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, useMultiStyleConfig, PopoverAnchor, FormLabel, Flex, useFormControlContext, useBreakpointValue, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, Flex, useFormControlContext, useBreakpointValue, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
 export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
 export { tokens10 as tokens };
 import * as React50 from 'react';
-import React50__default, { createContext, forwardRef as forwardRef$1, useRef, useState, useEffect, useId, Suspense, useMemo, useContext, useCallback } from 'react';
+import React50__default, { createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, useId, Suspense, useMemo, useContext, useCallback } from 'react';
 import { CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, ArrowRightFill18Icon, DropdownLeftFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
 import { inlineLoaderColorData, spinnerColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData, spinnerLightData } from '@vygruppen/spor-loader';
 import { useLottie } from 'lottie-react';
@@ -1284,68 +1284,71 @@ var texts4 = createTexts({
   }
 });
 var MotionBox = motion(Box);
-var FloatingActionButton = ({
-  children,
-  icon,
-  variant,
-  isTextVisible: externalIsTextVisible,
-  placement = "bottom right",
-  ...props
-}) => {
-  const [isTextVisible, setIsTextVisible] = React50__default.useState(
-    externalIsTextVisible !== void 0 ? externalIsTextVisible : false
-  );
-  const scrollDirection = useScrollDirection();
-  useEffect(() => {
-    if (externalIsTextVisible !== void 0) {
-      return;
-    }
-    const id = window.setTimeout(
-      () => setIsTextVisible(scrollDirection !== "down"),
-      1e3
-    );
-    return () => window.clearTimeout(id);
-  }, [scrollDirection, externalIsTextVisible]);
-  useEffect(() => {
-    setIsTextVisible(!!externalIsTextVisible);
-  }, [externalIsTextVisible]);
-  const style = useMultiStyleConfig("FloatingActionButton", {
+var FloatingActionButton = forwardRef(
+  ({
+    as,
+    children,
+    icon,
     variant,
-    isTextVisible,
-    placement
-  });
-  return /* @__PURE__ */ React50__default.createElement(
-    MotionBox,
-    {
-      __css: style.container,
-      as: "button",
-      "aria-label": children,
-      ...props
-    },
-    /* @__PURE__ */ React50__default.createElement(Box, { __css: style.icon }, icon),
-    /* @__PURE__ */ React50__default.createElement(
+    isTextVisible: externalIsTextVisible,
+    placement = "bottom right",
+    ...props
+  }, ref) => {
+    const [isTextVisible, setIsTextVisible] = React50__default.useState(
+      externalIsTextVisible !== void 0 ? externalIsTextVisible : false
+    );
+    const scrollDirection = useScrollDirection();
+    useEffect(() => {
+      if (externalIsTextVisible !== void 0) {
+        return;
+      }
+      const id = window.setTimeout(
+        () => setIsTextVisible(scrollDirection !== "down"),
+        1e3
+      );
+      return () => window.clearTimeout(id);
+    }, [scrollDirection, externalIsTextVisible]);
+    useEffect(() => {
+      setIsTextVisible(!!externalIsTextVisible);
+    }, [externalIsTextVisible]);
+    const style = useMultiStyleConfig("FloatingActionButton", {
+      variant,
+      isTextVisible,
+      placement
+    });
+    return /* @__PURE__ */ React50__default.createElement(
       MotionBox,
       {
-        animate: isTextVisible ? "show" : "hide",
-        initial: externalIsTextVisible ? "show" : "hide",
-        variants: {
-          show: {
-            opacity: 1,
-            width: "auto",
-            visibility: "visible"
+        __css: style.container,
+        "aria-label": children,
+        ref,
+        ...props
+      },
+      /* @__PURE__ */ React50__default.createElement(Box, { __css: style.icon }, icon),
+      /* @__PURE__ */ React50__default.createElement(
+        MotionBox,
+        {
+          animate: isTextVisible ? "show" : "hide",
+          initial: externalIsTextVisible ? "show" : "hide",
+          variants: {
+            show: {
+              opacity: 1,
+              width: "auto",
+              visibility: "visible"
+            },
+            hide: {
+              opacity: 0,
+              width: 0,
+              visibility: "hidden"
+            }
           },
-          hide: {
-            opacity: 0,
-            width: 0,
-            visibility: "hidden"
-          }
+          __css: style.text
         },
-        __css: style.text
-      },
-      children
-    )
-  );
-};
+        children
+      )
+    );
+  }
+);
 var useScrollDirection = () => {
   const [scrollDirection, setScrollDirection] = React50__default.useState(null);
   const lastScrollPosition = React50__default.useRef(
@@ -5087,7 +5090,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React50__default.lazy(() => import('./CountryCodeSelect-FLRREZ6C.mjs'));
+var LazyCountryCodeSelect = React50__default.lazy(() => import('./CountryCodeSelect-SNFTRR3O.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React50__default.createElement(Radio$1, { ...props, ref });
 });
@@ -11377,15 +11380,17 @@ var baseStyleLink2 = defineStyle((props) => ({
     _hover: {
       backgroundColor: mode("seaMist", "pine")(props)
     },
-    _focusVisible: {
-      boxShadow: getBoxShadowString({
-        borderColor: mode("greenHaze", "azure")(props),
-        borderWidth: 2
-      }),
+    ...focusVisible({
+      focus: {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2
+        })
+      },
       notFocus: {
         notFocus: { boxShadow: "none" }
       }
-    },
+    }),
     _active: {
       backgroundColor: mode("mint", "whiteAlpha.200")(props)
     }
@@ -13087,7 +13092,7 @@ var config21 = helpers13.defineMultiStyleConfig({
         borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
       }),
       _active: {
-        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+        backgroundColor: mode("mint", "whiteAlpha.100")(props),
         boxShadow: getBoxShadowString({
           borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
         })

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { DividerProps as DividerProps$1, As, BoxProps, StackProps as StackProps$1, AccordionProps as AccordionProps$1, AccordionItemProps, BreadcrumbProps as BreadcrumbProps$1, ButtonProps as ButtonProps$1, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, SkeletonTextProps as SkeletonTextProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+import { DividerProps as DividerProps$1, As, BoxProps, StackProps as StackProps$1, AccordionProps as AccordionProps$1, AccordionItemProps, BreadcrumbProps as BreadcrumbProps$1, ButtonProps as ButtonProps$1, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, ComponentWithAs, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, SkeletonTextProps as SkeletonTextProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
 export { AccordionButton, AccordionButtonProps, AccordionIcon, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, Box, BoxProps, Center, CenterProps, Collapse, CollapseProps, Container, ContainerProps, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, DrawerProps, Fade, FadeProps, Flex, FlexProps, FormHelperText, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Img, ImgProps, InputGroup, InputGroupProps, LightMode, ListItem, ListItemProps, ListProps, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, OrderedList, Popover, PopoverAnchor, PopoverArrow, PopoverArrowProps, PopoverBody, PopoverBodyProps, PopoverCloseButton, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTrigger, ScaleFade, ScaleFadeProps, SimpleGrid, SimpleGridProps, Slide, SlideFade, SlideFadeProps, SlideProps, Spacer, SpacerProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableFooterProps, TableHeadProps, TableRowProps, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens__default from '@vygruppen/spor-design-tokens';
 import * as tokens from '@vygruppen/spor-design-tokens';
@@ -411,7 +411,7 @@ type FloatingActionButtonProps = BoxProps & {
  *  placement="bottom right"
  * />
  */
-declare const FloatingActionButton: ({ children, icon, variant, isTextVisible: externalIsTextVisible, placement, ...props }: FloatingActionButtonProps) => React__default.JSX.Element;
+declare const FloatingActionButton: ComponentWithAs<ComponentWithAs<"a" | "button">, FloatingActionButtonProps>;
 
 type CardProps = Exclude<BoxProps, "size"> & {
     size?: "sm" | "lg";
@@ -2194,23 +2194,18 @@ declare const theme: {
                     textDecoration: string;
                     textStyle: string;
                     "&:not([aria-current=page])": {
+                        _active: {
+                            backgroundColor: string;
+                        };
+                        _focus: _chakra_ui_styled_system.SystemStyleObject;
+                        _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
+                        "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
                         cursor: string;
                         paddingX: number;
                         borderRadius: string;
                         _hover: {
                             backgroundColor: string;
                         };
-                        _focusVisible: {
-                            boxShadow: string;
-                            notFocus: {
-                                notFocus: {
-                                    boxShadow: string;
-                                };
-                            };
-                        };
-                        _active: {
-                            backgroundColor: string;
-                        };
                     };
                 };
                 list: {

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { DividerProps as DividerProps$1, As, BoxProps, StackProps as StackProps$1, AccordionProps as AccordionProps$1, AccordionItemProps, BreadcrumbProps as BreadcrumbProps$1, ButtonProps as ButtonProps$1, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, SkeletonTextProps as SkeletonTextProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+import { DividerProps as DividerProps$1, As, BoxProps, StackProps as StackProps$1, AccordionProps as AccordionProps$1, AccordionItemProps, BreadcrumbProps as BreadcrumbProps$1, ButtonProps as ButtonProps$1, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, ComponentWithAs, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, SkeletonTextProps as SkeletonTextProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
 export { AccordionButton, AccordionButtonProps, AccordionIcon, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, Box, BoxProps, Center, CenterProps, Collapse, CollapseProps, Container, ContainerProps, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, DrawerProps, Fade, FadeProps, Flex, FlexProps, FormHelperText, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Img, ImgProps, InputGroup, InputGroupProps, LightMode, ListItem, ListItemProps, ListProps, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, OrderedList, Popover, PopoverAnchor, PopoverArrow, PopoverArrowProps, PopoverBody, PopoverBodyProps, PopoverCloseButton, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTrigger, ScaleFade, ScaleFadeProps, SimpleGrid, SimpleGridProps, Slide, SlideFade, SlideFadeProps, SlideProps, Spacer, SpacerProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableFooterProps, TableHeadProps, TableRowProps, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens__default from '@vygruppen/spor-design-tokens';
 import * as tokens from '@vygruppen/spor-design-tokens';
@@ -411,7 +411,7 @@ type FloatingActionButtonProps = BoxProps & {
  *  placement="bottom right"
  * />
  */
-declare const FloatingActionButton: ({ children, icon, variant, isTextVisible: externalIsTextVisible, placement, ...props }: FloatingActionButtonProps) => React__default.JSX.Element;
+declare const FloatingActionButton: ComponentWithAs<ComponentWithAs<"a" | "button">, FloatingActionButtonProps>;
 
 type CardProps = Exclude<BoxProps, "size"> & {
     size?: "sm" | "lg";
@@ -2194,23 +2194,18 @@ declare const theme: {
                     textDecoration: string;
                     textStyle: string;
                     "&:not([aria-current=page])": {
+                        _active: {
+                            backgroundColor: string;
+                        };
+                        _focus: _chakra_ui_styled_system.SystemStyleObject;
+                        _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
+                        "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
                         cursor: string;
                         paddingX: number;
                         borderRadius: string;
                         _hover: {
                             backgroundColor: string;
                         };
-                        _focusVisible: {
-                            boxShadow: string;
-                            notFocus: {
-                                notFocus: {
-                                    boxShadow: string;
-                                };
-                            };
-                        };
-                        _active: {
-                            backgroundColor: string;
-                        };
                     };
                 };
                 list: {

package/dist/index.js

@@ -782,68 +782,71 @@ var MotionBox; exports.FloatingActionButton = void 0; var useScrollDirection;
 var init_FloatingActionButton = __esm({
   "src/button/FloatingActionButton.tsx"() {
     MotionBox = framerMotion.motion(react.Box);
-    exports.FloatingActionButton = ({
-      children,
-      icon,
-      variant,
-      isTextVisible: externalIsTextVisible,
-      placement = "bottom right",
-      ...props
-    }) => {
-      const [isTextVisible, setIsTextVisible] = React50__namespace.default.useState(
-        externalIsTextVisible !== void 0 ? externalIsTextVisible : false
-      );
-      const scrollDirection = useScrollDirection();
-      React50.useEffect(() => {
-        if (externalIsTextVisible !== void 0) {
-          return;
-        }
-        const id = window.setTimeout(
-          () => setIsTextVisible(scrollDirection !== "down"),
-          1e3
-        );
-        return () => window.clearTimeout(id);
-      }, [scrollDirection, externalIsTextVisible]);
-      React50.useEffect(() => {
-        setIsTextVisible(!!externalIsTextVisible);
-      }, [externalIsTextVisible]);
-      const style = react.useMultiStyleConfig("FloatingActionButton", {
+    exports.FloatingActionButton = react.forwardRef(
+      ({
+        as,
+        children,
+        icon,
         variant,
-        isTextVisible,
-        placement
-      });
-      return /* @__PURE__ */ React50__namespace.default.createElement(
-        MotionBox,
-        {
-          __css: style.container,
-          as: "button",
-          "aria-label": children,
-          ...props
-        },
-        /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { __css: style.icon }, icon),
-        /* @__PURE__ */ React50__namespace.default.createElement(
+        isTextVisible: externalIsTextVisible,
+        placement = "bottom right",
+        ...props
+      }, ref) => {
+        const [isTextVisible, setIsTextVisible] = React50__namespace.default.useState(
+          externalIsTextVisible !== void 0 ? externalIsTextVisible : false
+        );
+        const scrollDirection = useScrollDirection();
+        React50.useEffect(() => {
+          if (externalIsTextVisible !== void 0) {
+            return;
+          }
+          const id = window.setTimeout(
+            () => setIsTextVisible(scrollDirection !== "down"),
+            1e3
+          );
+          return () => window.clearTimeout(id);
+        }, [scrollDirection, externalIsTextVisible]);
+        React50.useEffect(() => {
+          setIsTextVisible(!!externalIsTextVisible);
+        }, [externalIsTextVisible]);
+        const style = react.useMultiStyleConfig("FloatingActionButton", {
+          variant,
+          isTextVisible,
+          placement
+        });
+        return /* @__PURE__ */ React50__namespace.default.createElement(
           MotionBox,
           {
-            animate: isTextVisible ? "show" : "hide",
-            initial: externalIsTextVisible ? "show" : "hide",
-            variants: {
-              show: {
-                opacity: 1,
-                width: "auto",
-                visibility: "visible"
+            __css: style.container,
+            "aria-label": children,
+            ref,
+            ...props
+          },
+          /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { __css: style.icon }, icon),
+          /* @__PURE__ */ React50__namespace.default.createElement(
+            MotionBox,
+            {
+              animate: isTextVisible ? "show" : "hide",
+              initial: externalIsTextVisible ? "show" : "hide",
+              variants: {
+                show: {
+                  opacity: 1,
+                  width: "auto",
+                  visibility: "visible"
+                },
+                hide: {
+                  opacity: 0,
+                  width: 0,
+                  visibility: "hidden"
+                }
               },
-              hide: {
-                opacity: 0,
-                width: 0,
-                visibility: "hidden"
-              }
+              __css: style.text
             },
-            __css: style.text
-          },
-          children
-        )
-      );
-    };
+            children
+          )
+        );
+      }
+    );
     useScrollDirection = () => {
       const [scrollDirection, setScrollDirection] = React50__namespace.default.useState(null);
       const lastScrollPosition = React50__namespace.default.useRef(
@@ -12867,6 +12870,7 @@ var init_breadcrumb2 = __esm({
     init_dist4();
     init_dist3();
     init_box_shadow_utils();
+    init_focus_utils();
     ({ defineMultiStyleConfig: defineMultiStyleConfig27, definePartsStyle: definePartsStyle27 } = createMultiStyleConfigHelpers(breadcrumbAnatomy.keys));
     baseStyleLink2 = defineStyle((props) => ({
       transitionProperty: "common",
@@ -12883,15 +12887,17 @@ var init_breadcrumb2 = __esm({
         _hover: {
           backgroundColor: themeTools.mode("seaMist", "pine")(props)
         },
-        _focusVisible: {
-          boxShadow: getBoxShadowString({
-            borderColor: themeTools.mode("greenHaze", "azure")(props),
-            borderWidth: 2
-          }),
+        ...focusVisible({
+          focus: {
+            boxShadow: getBoxShadowString({
+              borderColor: themeTools.mode("greenHaze", "azure")(props),
+              borderWidth: 2
+            })
+          },
           notFocus: {
             notFocus: { boxShadow: "none" }
           }
-        },
+        }),
         _active: {
           backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props)
         }
@@ -14713,7 +14719,7 @@ var init_input2 = __esm({
             borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
           }),
           _active: {
-            backgroundColor: themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props),
+            backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props),
             boxShadow: getBoxShadowString({
               borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
             })

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, 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, 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, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-TMLJPE4H.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, 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, 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, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-GIAB4PHV.mjs';

package/package.json

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

package/src/button/FloatingActionButton.tsx

@@ -1,4 +1,10 @@
-import { Box, BoxProps, useMultiStyleConfig } from "@chakra-ui/react";
+import {
+  Box,
+  BoxProps,
+  ComponentWithAs,
+  forwardRef,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
 import { motion } from "framer-motion";
 import React, { useEffect } from "react";
 
@@ -24,68 +30,77 @@ type FloatingActionButtonProps = BoxProps & {
  *  placement="bottom right"
  * />
  */
-export const FloatingActionButton = ({
-  children,
-  icon,
-  variant,
-  isTextVisible: externalIsTextVisible,
-  placement = "bottom right",
-  ...props
-}: FloatingActionButtonProps) => {
-  const [isTextVisible, setIsTextVisible] = React.useState(
-    externalIsTextVisible !== undefined ? externalIsTextVisible : false
-  );
-  const scrollDirection = useScrollDirection();
-  useEffect(() => {
-    if (externalIsTextVisible !== undefined) {
-      return;
-    }
-    const id = window.setTimeout(
-      () => setIsTextVisible(scrollDirection !== "down"),
-      1000
+export const FloatingActionButton = forwardRef<
+  FloatingActionButtonProps,
+  ComponentWithAs<"a" | "button">
+>(
+  (
+    {
+      as,
+      children,
+      icon,
+      variant,
+      isTextVisible: externalIsTextVisible,
+      placement = "bottom right",
+      ...props
+    },
+    ref
+  ) => {
+    const [isTextVisible, setIsTextVisible] = React.useState(
+      externalIsTextVisible !== undefined ? externalIsTextVisible : false
     );
-    return () => window.clearTimeout(id);
-  }, [scrollDirection, externalIsTextVisible]);
+    const scrollDirection = useScrollDirection();
+    useEffect(() => {
+      if (externalIsTextVisible !== undefined) {
+        return;
+      }
+      const id = window.setTimeout(
+        () => setIsTextVisible(scrollDirection !== "down"),
+        1000
+      );
+      return () => window.clearTimeout(id);
+    }, [scrollDirection, externalIsTextVisible]);
 
-  useEffect(() => {
-    setIsTextVisible(!!externalIsTextVisible);
-  }, [externalIsTextVisible]);
+    useEffect(() => {
+      setIsTextVisible(!!externalIsTextVisible);
+    }, [externalIsTextVisible]);
 
-  const style = useMultiStyleConfig("FloatingActionButton", {
-    variant,
-    isTextVisible,
-    placement,
-  });
-  return (
-    <MotionBox
-      __css={style.container}
-      as="button"
-      aria-label={children}
-      {...props}
-    >
-      <Box __css={style.icon}>{icon}</Box>
+    const style = useMultiStyleConfig("FloatingActionButton", {
+      variant,
+      isTextVisible,
+      placement,
+    });
+    return (
       <MotionBox
-        animate={isTextVisible ? "show" : "hide"}
-        initial={externalIsTextVisible ? "show" : "hide"}
-        variants={{
-          show: {
-            opacity: 1,
-            width: "auto",
-            visibility: "visible",
-          },
-          hide: {
-            opacity: 0,
-            width: 0,
-            visibility: "hidden",
-          },
-        }}
-        __css={style.text}
+        __css={style.container}
+        aria-label={children}
+        ref={ref}
+        {...props}
       >
-        {children}
+        <Box __css={style.icon}>{icon}</Box>
+        <MotionBox
+          animate={isTextVisible ? "show" : "hide"}
+          initial={externalIsTextVisible ? "show" : "hide"}
+          variants={{
+            show: {
+              opacity: 1,
+              width: "auto",
+              visibility: "visible",
+            },
+            hide: {
+              opacity: 0,
+              width: 0,
+              visibility: "hidden",
+            },
+          }}
+          __css={style.text}
+        >
+          {children}
+        </MotionBox>
       </MotionBox>
-    </MotionBox>
-  );
-};
+    );
+  }
+);
 
 type ScrollDirection = "up" | "down" | null;
 const useScrollDirection = () => {

package/src/theme/components/breadcrumb.ts

@@ -2,6 +2,7 @@ import { breadcrumbAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/styled-system";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
 import { mode } from "@chakra-ui/theme-tools";
+import { focusVisible } from "../utils/focus-utils";
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
@@ -21,15 +22,17 @@ const baseStyleLink = defineStyle((props) => ({
     _hover: {
       backgroundColor: mode("seaMist", "pine")(props),
     },
-    _focusVisible: {
-      boxShadow: getBoxShadowString({
-        borderColor: mode("greenHaze", "azure")(props),
-        borderWidth: 2,
-      }),
-       notFocus: {
-       notFocus: { boxShadow: "none" },
-     }
-    },
+    ...focusVisible({
+      focus: {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2,
+        }),
+      },
+      notFocus: {
+        notFocus: { boxShadow: "none" },
+      }
+    }),
     _active: {
       backgroundColor: mode("mint", "whiteAlpha.200")(props),
     },

package/src/theme/components/input.ts

@@ -26,7 +26,7 @@ const config = helpers.defineMultiStyleConfig({
         borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
       }),
       _active: {
-        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+        backgroundColor: mode("mint", "whiteAlpha.100")(props),
         boxShadow: getBoxShadowString({
           borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
         }),