@vygruppen/spor-react 3.7.3 → 3.7.5

package/dist/index.js

@@ -782,71 +782,76 @@ 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 : true
-      );
-      const scrollDirection = useScrollDirection();
-      React50__namespace.default.useEffect(() => {
-        if (externalIsTextVisible !== void 0) {
-          return;
-        }
-        const id = window.setTimeout(
-          () => setIsTextVisible(scrollDirection !== "down"),
-          1e3
-        );
-        return () => window.clearTimeout(id);
-      }, [scrollDirection, externalIsTextVisible]);
-      React50__namespace.default.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: "show",
-            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(typeof window !== "undefined" ? window.scrollY : 0);
+      const lastScrollPosition = React50__namespace.default.useRef(
+        typeof window !== "undefined" ? window.scrollY : 0
+      );
       React50__namespace.default.useEffect(() => {
         const onScroll = () => {
           const delta = window.scrollY - lastScrollPosition.current;
@@ -4824,7 +4829,9 @@ var init_ChoiceChip = __esm({
             __css: styles3.container,
             "data-checked": dataAttr(state2.isChecked),
             "data-hover": dataAttr(state2.isHovered),
-            "data-focus": dataAttr(state2.isFocused)
+            "data-focus": dataAttr(state2.isFocused),
+            "data-active": dataAttr(state2.isActive),
+            "data-disabled": dataAttr(state2.isDisabled)
           },
           icon && /* @__PURE__ */ React50__namespace.default.createElement(react.chakra.span, { __css: styles3.icon }, state2.isChecked ? icon.checked : icon.default),
           /* @__PURE__ */ React50__namespace.default.createElement(react.chakra.span, { __css: styles3.label, ...getCheckboxProps() }, variant !== "icon" && children),
@@ -12534,8 +12541,6 @@ var init_foundations = __esm({
     init_styles();
   }
 });
-
-// src/theme/components/accordion.ts
 var helpers, config3, accordion_default;
 var init_accordion2 = __esm({
   "src/theme/components/accordion.ts"() {
@@ -12546,7 +12551,7 @@ var init_accordion2 = __esm({
     init_focus_utils();
     helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
     config3 = helpers.defineMultiStyleConfig({
-      baseStyle: {
+      baseStyle: (props) => ({
         container: {
           border: "none",
           borderRadius: "sm"
@@ -12558,7 +12563,7 @@ var init_accordion2 = __esm({
           borderRadius: "sm",
           display: "flex",
           justifyContent: "space-between",
-          color: "darkGrey",
+          color: themeTools.mode("darkGrey", "white")(props),
           textAlign: "left",
           fontFamily: "body",
           fontWeight: "bold",
@@ -12570,7 +12575,7 @@ var init_accordion2 = __esm({
             },
             focus: {
               boxShadow: getBoxShadowString({
-                borderColor: "greenHaze",
+                borderColor: themeTools.mode("greenHaze", "azure")(props),
                 borderWidth: 2
               })
             }
@@ -12587,23 +12592,26 @@ var init_accordion2 = __esm({
         icon: {
           fontSize: "1.25em"
         }
-      },
+      }),
       variants: {
-        list: {
+        list: (props) => ({
           button: {
             boxShadow: "none",
             _hover: {
-              backgroundColor: "seaMist"
+              backgroundColor: themeTools.mode("seaMist", "pine")(props)
             },
             _active: {
-              backgroundColor: "mint"
+              backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props)
             }
           }
-        },
-        outline: {
+        }),
+        outline: (props) => ({
           container: {
             boxShadow: getBoxShadowString({
-              borderColor: colors.blackAlpha["400"]
+              borderColor: themeTools.mode(
+                colors.blackAlpha["400"],
+                colors.whiteAlpha["400"]
+              )(props)
             })
           },
           button: {
@@ -12612,23 +12620,24 @@ var init_accordion2 = __esm({
             },
             _hover: {
               boxShadow: getBoxShadowString({
-                borderColor: "darkGrey",
+                borderColor: themeTools.mode("darkGrey", "white")(props),
                 borderWidth: 2
               })
             },
             _active: {
-              backgroundColor: "mint",
+              backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props),
               boxShadow: getBoxShadowString({
-                borderColor: "darkGrey"
+                borderColor: themeTools.mode("darkGrey", colors.whiteAlpha[400])(props)
               })
             }
           }
-        },
-        card: {
+        }),
+        card: (props) => ({
           container: {
+            backgroundColor: themeTools.mode("white", "whiteAlpha.100")(props),
             boxShadow: getBoxShadowString({
-              baseShadow: "sm",
-              borderColor: "silver"
+              baseShadow: themeTools.mode("sm", "none")(props),
+              borderColor: themeTools.mode("silver", "whiteAlpha.400")(props)
             })
           },
           button: {
@@ -12636,20 +12645,30 @@ var init_accordion2 = __esm({
               borderBottomRadius: "none"
             },
             _hover: {
-              backgroundColor: "seaMist"
+              backgroundColor: themeTools.mode("seaMist", "whiteAlpha.200")(props),
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("darkGrey", "white")(props),
+                borderWidth: 1
+              })
             },
             _active: {
-              backgroundColor: "mint"
+              backgroundColor: themeTools.mode("mint", "inherit")(props),
+              boxShadow: getBoxShadowString({
+                baseShadow: "none",
+                borderWidth: 1,
+                borderColor: themeTools.mode("darkGrey", "whiteAlpha.400")(props)
+              })
             }
           }
-        }
+        })
       },
       sizes: {
         sm: {
           button: {
             fontSize: ["mobile.xs", null, "desktop.xs"],
             paddingX: 2,
-            paddingY: 1
+            paddingY: 1,
+            minHeight: 6
           },
           panel: {
             fontSize: ["mobile.xs", null, "desktop.xs"],
@@ -12660,7 +12679,8 @@ var init_accordion2 = __esm({
           button: {
             fontSize: ["mobile.sm", null, "desktop.sm"],
             paddingX: 3,
-            paddingY: 1
+            paddingY: 1,
+            minHeight: 7
           },
           panel: {
             fontSize: ["mobile.sm", null, "desktop.sm"],
@@ -12671,7 +12691,8 @@ var init_accordion2 = __esm({
           button: {
             fontSize: ["mobile.sm", null, "desktop.sm"],
             paddingX: 3,
-            paddingY: 2
+            paddingY: 2,
+            minHeight: 8
           },
           panel: {
             fontSize: ["mobile.sm", null, "desktop.sm"],
@@ -12843,16 +12864,15 @@ var init_badge = __esm({
     };
   }
 });
-
-// src/theme/components/breadcrumb.ts
 var defineMultiStyleConfig27, definePartsStyle27, baseStyleLink2, baseStyle43, breadcrumb_default;
 var init_breadcrumb2 = __esm({
   "src/theme/components/breadcrumb.ts"() {
     init_dist4();
     init_dist3();
     init_box_shadow_utils();
+    init_focus_utils();
     ({ defineMultiStyleConfig: defineMultiStyleConfig27, definePartsStyle: definePartsStyle27 } = createMultiStyleConfigHelpers(breadcrumbAnatomy.keys));
-    baseStyleLink2 = defineStyle({
+    baseStyleLink2 = defineStyle((props) => ({
       transitionProperty: "common",
       transitionDuration: "fast",
       transitionTimingFunction: "ease-out",
@@ -12865,26 +12885,31 @@ var init_breadcrumb2 = __esm({
         paddingX: 0.5,
         borderRadius: "xs",
         _hover: {
-          backgroundColor: "coralGreen"
-        },
-        _focusVisible: {
-          boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
-            borderWidth: 2
-          })
+          backgroundColor: themeTools.mode("seaMist", "pine")(props)
         },
+        ...focusVisible({
+          focus: {
+            boxShadow: getBoxShadowString({
+              borderColor: themeTools.mode("greenHaze", "azure")(props),
+              borderWidth: 2
+            })
+          },
+          notFocus: {
+            notFocus: { boxShadow: "none" }
+          }
+        }),
         _active: {
-          backgroundColor: "mint"
+          backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props)
         }
       }
-    });
-    baseStyle43 = definePartsStyle27({
-      link: baseStyleLink2,
+    }));
+    baseStyle43 = definePartsStyle27((props) => ({
+      link: baseStyleLink2(props),
       list: {
         flexWrap: "wrap",
         alignItems: "flex-start"
       }
-    });
+    }));
     breadcrumb_default = defineMultiStyleConfig27({
       baseStyle: baseStyle43
     });
@@ -12921,28 +12946,39 @@ var init_button2 = __esm({
         }
       },
       variants: {
-        control: {
-          backgroundColor: "darkTeal",
-          color: "white",
+        control: (props) => ({
+          backgroundColor: themeTools.mode("darkTeal", "mint")(props),
+          color: themeTools.mode("white", "darkTeal")(props),
           ...focusVisible({
             focus: {
-              boxShadow: `inset 0 0 0 4px ${colors.darkTeal}, inset 0 0 0 6px currentColor`
+              boxShadow: `inset 0 0 0 4px ${themeTools.mode(
+                colors.darkTeal,
+                colors.seaMist
+              )(props)}, inset 0 0 0 6px currentColor`
             },
             notFocus: { boxShadow: "none" }
           }),
           _hover: {
-            backgroundColor: "night"
+            backgroundColor: themeTools.mode("night", "coralGreen")(props)
           },
           _active: {
-            backgroundColor: "pine"
+            backgroundColor: themeTools.mode("pine", "white")(props)
           }
-        },
-        primary: {
+        }),
+        primary: (props) => ({
+          // FIXME: Update to use a global defined background color for darkMode whenever it is available.
+          // hardcoded background color as alpha-"hack" below is not feasible for dark mode with solid background color
           backgroundColor: "primaryGreen",
           color: "white",
           ...focusVisible({
             focus: {
-              boxShadow: `inset 0 0 0 4px ${colors.primaryGreen}, inset 0 0 0 4px ${colors.primaryGreen}, inset 0 0 0 6px currentColor`
+              boxShadow: `inset 0 0 0 2px ${themeTools.mode(
+                colors.greenHaze,
+                colors.azure
+              )(props)}, inset 0 0 0 4px ${themeTools.mode(
+                colors.white,
+                colors.darkGrey
+              )(props)}`
             },
             notFocus: { boxShadow: "none" }
           }),
@@ -12952,25 +12988,61 @@ var init_button2 = __esm({
           _active: {
             backgroundColor: "azure"
           }
-        },
-        secondary: {
-          backgroundColor: "coralGreen",
-          color: "darkTeal",
+        }),
+        secondary: (props) => ({
+          // FIXME: Update to use global defined background color for darkMode whenever it is available instead of alpha
+          backgroundColor: themeTools.mode("seaMist", "whiteAlpha.100")(props),
+          color: themeTools.mode("darkTeal", "white")(props),
+          // order is important here for now while we do not have global defined background color for darkMode
+          _hover: {
+            backgroundColor: themeTools.mode("coralGreen", "whiteAlpha.200")(props)
+          },
           ...focusVisible({
             focus: {
-              boxShadow: `inset 0 0 0 4px ${colors.coralGreen}, inset 0 0 0 4px ${colors.coralGreen}, inset 0 0 0 6px currentColor`
+              boxShadow: `inset 0 0 0 2px ${themeTools.mode(
+                colors.greenHaze,
+                colors.azure
+              )(props)}, inset 0 0 0 4px ${themeTools.mode(
+                colors.white,
+                colors.blackAlpha[300]
+              )(props)}`,
+              _hover: {
+                boxShadow: `inset 0 0 0 2px ${themeTools.mode(
+                  colors.greenHaze,
+                  colors.azure
+                )(props)}, inset 0 0 0 4px ${themeTools.mode(
+                  colors.white,
+                  colors.blackAlpha[500]
+                )(props)}`
+              }
             },
             notFocus: {
               boxShadow: "none"
             }
           }),
-          _hover: {
-            backgroundColor: "blueGreen"
-          },
           _active: {
-            backgroundColor: "mint"
+            backgroundColor: themeTools.mode("mint", "whiteAlpha.300")(props),
+            boxShadow: `inset 0 0 0 2px ${themeTools.mode(
+              colors.greenHaze,
+              colors.azure
+            )(props)}, inset 0 0 0 4px ${themeTools.mode(
+              colors.white,
+              colors.blackAlpha[600]
+            )(props)}`,
+            _hover: {
+              boxShadow: `inset 0 0 0 2px ${themeTools.mode(
+                colors.greenHaze,
+                colors.azure
+              )(props)}, inset 0 0 0 4px ${themeTools.mode(
+                colors.white,
+                colors.blackAlpha[600]
+              )(props)}`
+            }
           }
-        },
+        }),
+        /**
+         * @deprecated use `secondary` instead.
+         */
         tertiary: {
           backgroundColor: "mint",
           color: "darkGrey",
@@ -12999,7 +13071,7 @@ var init_button2 = __esm({
           ...focusVisible({
             focus: {
               boxShadow: getBoxShadowString({
-                borderWidth: 3,
+                borderWidth: 2,
                 borderColor: "greenHaze"
               })
             },
@@ -13530,37 +13602,49 @@ var parts3, helpers5, config10, choice_chip_default;
 var init_choice_chip = __esm({
   "src/theme/components/choice-chip.ts"() {
     init_box_shadow_utils();
+    init_foundations();
     parts3 = themeTools.anatomy("choice-chip").parts("container", "icon", "label");
     helpers5 = react.createMultiStyleConfigHelpers(parts3.keys);
     config10 = helpers5.defineMultiStyleConfig({
       baseStyle: (props) => ({
         container: {
-          backgroundColor: "white",
+          backgroundColor: themeTools.mode("white", "transparent")(props),
           boxShadow: getBoxShadowString({ borderColor: "celadon" }),
-          color: "darkTeal",
+          color: themeTools.mode("darkTeal", "white")(props),
           display: "inline-flex",
           alignItems: "center",
           fontSize: "16px",
           px: 1,
           _checked: {
-            background: "seaMist",
+            color: "white",
+            background: "pine",
             boxShadow: getBoxShadowString({ borderColor: "celadon" })
           },
           "input:focus-visible + &": {
-            boxShadow: getBoxShadowString({
-              borderColor: "greenHaze",
-              borderWidth: 2
-            })
+            boxShadow: `inset 0 0 0 2px ${themeTools.mode(
+              colors.greenHaze,
+              colors.azure
+            )(props)}, inset 0 0 0 4px ${themeTools.mode(
+              colors.white,
+              colors.darkGrey
+            )(props)}`
           },
           "@media (hover:hover)": {
             _hover: {
+              color: themeTools.mode("darkTeal", "white")(props),
               boxShadow: getBoxShadowString({
                 borderColor: "greenHaze",
                 borderWidth: 2
               }),
-              background: "mint",
+              background: themeTools.mode("coralGreen", "whiteAlpha.200")(props),
               cursor: "pointer"
             }
+          },
+          _active: {
+            backgroundColor: themeTools.mode("mint", "whiteAlpha.300")(props),
+            boxShadow: getBoxShadowString({
+              borderColor: "pine"
+            })
           }
         },
         icon: {
@@ -14635,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-D2XVZVE6.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.3",
+  "version": "3.7.5",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/button/Button.tsx

@@ -28,6 +28,7 @@ export type ButtonProps = Exclude<
     | "control"
     | "primary"
     | "secondary"
+    /** @deprecated Use `secondary` instead */
     | "tertiary"
     | "additional"
     | "ghost"