@vygruppen/spor-react 3.7.3 → 3.7.4

package/dist/index.d.ts

@@ -266,7 +266,9 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
      *
      * Defaults to "primary"
      */
-    variant?: "control" | "primary" | "secondary" | "tertiary" | "additional" | "ghost" | "floating";
+    variant?: "control" | "primary" | "secondary"
+    /** @deprecated Use `secondary` instead */
+     | "tertiary" | "additional" | "ghost" | "floating";
 };
 /**
  * Buttons are used to trigger actions.
@@ -1963,7 +1965,7 @@ declare const fontFaces: string;
 declare const theme: {
     components: {
         Accordion: {
-            baseStyle?: {
+            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 container: {
                     border: string;
                     borderRadius: string;
@@ -1994,13 +1996,14 @@ declare const theme: {
                 icon: {
                     fontSize: string;
                 };
-            } | undefined;
+            }) | undefined;
             sizes?: {
                 sm: {
                     button: {
                         fontSize: ("mobile.xs" | "desktop.xs" | null)[];
                         paddingX: number;
                         paddingY: number;
+                        minHeight: number;
                     };
                     panel: {
                         fontSize: ("mobile.xs" | "desktop.xs" | null)[];
@@ -2012,6 +2015,7 @@ declare const theme: {
                         fontSize: ("mobile.sm" | "desktop.sm" | null)[];
                         paddingX: number;
                         paddingY: number;
+                        minHeight: number;
                     };
                     panel: {
                         fontSize: ("mobile.sm" | "desktop.sm" | null)[];
@@ -2023,6 +2027,7 @@ declare const theme: {
                         fontSize: ("mobile.sm" | "desktop.sm" | null)[];
                         paddingX: number;
                         paddingY: number;
+                        minHeight: number;
                     };
                     panel: {
                         fontSize: ("mobile.sm" | "desktop.sm" | null)[];
@@ -2031,7 +2036,7 @@ declare const theme: {
                 };
             } | undefined;
             variants?: {
-                list: {
+                list: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     button: {
                         boxShadow: string;
                         _hover: {
@@ -2042,7 +2047,7 @@ declare const theme: {
                         };
                     };
                 };
-                outline: {
+                outline: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
                         boxShadow: string;
                     };
@@ -2059,8 +2064,9 @@ declare const theme: {
                         };
                     };
                 };
-                card: {
+                card: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
+                        backgroundColor: string;
                         boxShadow: string;
                     };
                     button: {
@@ -2069,9 +2075,11 @@ declare const theme: {
                         };
                         _hover: {
                             backgroundColor: string;
+                            boxShadow: string;
                         };
                         _active: {
                             backgroundColor: string;
+                            boxShadow: string;
                         };
                     };
                 };
@@ -2176,7 +2184,7 @@ declare const theme: {
             } | undefined;
         };
         Breadcrumb: {
-            baseStyle?: {
+            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 link: {
                     transitionProperty: string;
                     transitionDuration: string;
@@ -2194,6 +2202,11 @@ declare const theme: {
                         };
                         _focusVisible: {
                             boxShadow: string;
+                            notFocus: {
+                                notFocus: {
+                                    boxShadow: string;
+                                };
+                            };
                         };
                         _active: {
                             backgroundColor: string;
@@ -2204,7 +2217,7 @@ declare const theme: {
                     flexWrap: string;
                     alignItems: string;
                 };
-            } | undefined;
+            }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
                     keys: ("link" | "container" | "separator" | "item")[];
@@ -2270,7 +2283,7 @@ declare const theme: {
                 };
             } | undefined;
             variants?: {
-                control: {
+                control: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _hover: {
                         backgroundColor: string;
                     };
@@ -2283,7 +2296,7 @@ declare const theme: {
                     backgroundColor: string;
                     color: string;
                 };
-                primary: {
+                primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _hover: {
                         backgroundColor: string;
                     };
@@ -2296,18 +2309,22 @@ declare const theme: {
                     backgroundColor: string;
                     color: string;
                 };
-                secondary: {
-                    _hover: {
-                        backgroundColor: string;
-                    };
+                secondary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _active: {
                         backgroundColor: string;
+                        boxShadow: string;
+                        _hover: {
+                            boxShadow: string;
+                        };
                     };
                     _focus: _chakra_ui_styled_system.SystemStyleObject;
                     _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
                     "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
                     backgroundColor: string;
                     color: string;
+                    _hover: {
+                        backgroundColor: string;
+                    };
                 };
                 tertiary: {
                     _hover: {
@@ -2668,6 +2685,7 @@ declare const theme: {
                     fontSize: string;
                     px: number;
                     _checked: {
+                        color: string;
                         background: string;
                         boxShadow: string;
                     };
@@ -2676,11 +2694,16 @@ declare const theme: {
                     };
                     "@media (hover:hover)": {
                         _hover: {
+                            color: string;
                             boxShadow: string;
                             background: string;
                             cursor: string;
                         };
                     };
+                    _active: {
+                        backgroundColor: string;
+                        boxShadow: string;
+                    };
                 };
                 icon: {
                     mr: number;

package/dist/index.js

@@ -791,10 +791,10 @@ var init_FloatingActionButton = __esm({
       ...props
     }) => {
       const [isTextVisible, setIsTextVisible] = React50__namespace.default.useState(
-        externalIsTextVisible !== void 0 ? externalIsTextVisible : true
+        externalIsTextVisible !== void 0 ? externalIsTextVisible : false
       );
       const scrollDirection = useScrollDirection();
-      React50__namespace.default.useEffect(() => {
+      React50.useEffect(() => {
         if (externalIsTextVisible !== void 0) {
           return;
         }
@@ -804,7 +804,7 @@ var init_FloatingActionButton = __esm({
         );
         return () => window.clearTimeout(id);
       }, [scrollDirection, externalIsTextVisible]);
-      React50__namespace.default.useEffect(() => {
+      React50.useEffect(() => {
         setIsTextVisible(!!externalIsTextVisible);
       }, [externalIsTextVisible]);
       const style = react.useMultiStyleConfig("FloatingActionButton", {
@@ -825,7 +825,7 @@ var init_FloatingActionButton = __esm({
           MotionBox,
           {
             animate: isTextVisible ? "show" : "hide",
-            initial: "show",
+            initial: externalIsTextVisible ? "show" : "hide",
             variants: {
               show: {
                 opacity: 1,
@@ -846,7 +846,9 @@ var init_FloatingActionButton = __esm({
     };
     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 +4826,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 +12538,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 +12548,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 +12560,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 +12572,7 @@ var init_accordion2 = __esm({
             },
             focus: {
               boxShadow: getBoxShadowString({
-                borderColor: "greenHaze",
+                borderColor: themeTools.mode("greenHaze", "azure")(props),
                 borderWidth: 2
               })
             }
@@ -12587,23 +12589,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 +12617,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 +12642,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 +12676,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 +12688,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,8 +12861,6 @@ 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"() {
@@ -12852,7 +12868,7 @@ var init_breadcrumb2 = __esm({
     init_dist3();
     init_box_shadow_utils();
     ({ defineMultiStyleConfig: defineMultiStyleConfig27, definePartsStyle: definePartsStyle27 } = createMultiStyleConfigHelpers(breadcrumbAnatomy.keys));
-    baseStyleLink2 = defineStyle({
+    baseStyleLink2 = defineStyle((props) => ({
       transitionProperty: "common",
       transitionDuration: "fast",
       transitionTimingFunction: "ease-out",
@@ -12865,26 +12881,29 @@ var init_breadcrumb2 = __esm({
         paddingX: 0.5,
         borderRadius: "xs",
         _hover: {
-          backgroundColor: "coralGreen"
+          backgroundColor: themeTools.mode("seaMist", "pine")(props)
         },
         _focusVisible: {
           boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
+            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 +12940,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 +12982,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 +13065,7 @@ var init_button2 = __esm({
           ...focusVisible({
             focus: {
               boxShadow: getBoxShadowString({
-                borderWidth: 3,
+                borderWidth: 2,
                 borderColor: "greenHaze"
               })
             },
@@ -13530,37 +13596,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: {

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-TMLJPE4H.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "3.7.3",
+  "version": "3.7.4",
   "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"