@vygruppen/spor-react 3.7.2 → 3.7.4

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,8 +12560,9 @@ 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",
           ...focusVisible({
             notFocus: {
@@ -12569,7 +12572,7 @@ var init_accordion2 = __esm({
             },
             focus: {
               boxShadow: getBoxShadowString({
-                borderColor: "greenHaze",
+                borderColor: themeTools.mode("greenHaze", "azure")(props),
                 borderWidth: 2
               })
             }
@@ -12586,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: {
@@ -12611,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: {
@@ -12635,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"],
@@ -12659,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"],
@@ -12670,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"],
@@ -12842,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"() {
@@ -12851,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",
@@ -12864,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
     });
@@ -12920,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" }
           }),
@@ -12951,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",
@@ -12998,7 +13065,7 @@ var init_button2 = __esm({
           ...focusVisible({
             focus: {
               boxShadow: getBoxShadowString({
-                borderWidth: 3,
+                borderWidth: 2,
                 borderColor: "greenHaze"
               })
             },
@@ -13529,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: {
@@ -14869,80 +14948,79 @@ var init_link2 = __esm({
         }
       },
       variants: {
-        primary: {
-          color: "pine",
+        primary: (props) => ({
+          color: themeTools.mode("pine", "seaMist")(props),
           ...focusVisible({
             focus: {
-              color: "white",
-              backgroundColor: "pine",
+              backgroundColor: "transparent",
               boxShadow: getBoxShadowString({
-                borderColor: "pine",
-                borderWidth: 3,
+                borderColor: "azure",
+                borderWidth: 2,
                 isInset: false
               })
             },
             notFocus: {
               color: "pine",
-              boxShadow: "none",
-              backgroundColor: "transparent"
+              backgroundColor: "transparent",
+              boxShadow: "none"
             }
           }),
           _hover: {
-            backgroundColor: "coralGreen",
-            color: "darkTeal",
+            color: "white",
+            backgroundColor: "pine",
             boxShadow: getBoxShadowString({
-              borderColor: "coralGreen",
-              borderWidth: 3,
+              borderColor: "pine",
+              borderWidth: 2,
               isInset: false
             })
           },
           _active: {
-            backgroundColor: "mint",
+            color: "white",
+            backgroundColor: "azure",
             boxShadow: getBoxShadowString({
-              borderColor: "mint",
-              borderWidth: 3,
+              borderColor: "azure",
+              borderWidth: 2,
               isInset: false
-            }),
-            color: "pine"
+            })
           }
-        },
+        }),
         secondary: (props) => ({
-          color: "darkGrey",
+          color: themeTools.mode("darkGrey", "white")(props),
           ...focusVisible({
             focus: {
-              color: "white",
-              backgroundColor: "darkGrey",
+              backgroundColor: "transparent",
               boxShadow: getBoxShadowString({
-                borderColor: "darkGrey",
-                borderWidth: 3,
+                borderColor: "azure",
+                borderWidth: 2,
                 isInset: false
               })
             },
             notFocus: {
-              color: "darkGrey",
               boxShadow: "none",
               backgroundColor: "transparent"
             }
           }),
           _hover: {
-            color: "darkGrey",
-            backgroundColor: "blackAlpha.100",
+            backgroundColor: themeTools.mode("seaMist", "pine")(props),
             boxShadow: getBoxShadowString({
-              borderColor: props.theme.colors.blackAlpha[100],
-              borderWidth: 3,
+              borderColor: themeTools.mode("seaMist", "pine")(props),
+              borderWidth: 2,
               isInset: false
             })
           },
           _active: {
-            color: "darkTeal",
-            backgroundColor: "mint",
+            backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props),
             boxShadow: getBoxShadowString({
-              borderColor: "mint",
-              borderWidth: 3,
+              borderColor: themeTools.mode("mint", "whiteAlpha.200")(props),
+              borderWidth: 2,
               isInset: false
             })
           }
         }),
+        /**
+         * @deprecated tertiary style will be deprecated in the future.
+         * Please use the secondary style instead.
+         */
         tertiary: (props) => ({
           color: "white",
           ...focusVisible({
@@ -14988,6 +15066,28 @@ var init_link2 = __esm({
     link_default = config23;
   }
 });
+
+// src/theme/components/list.ts
+var defineMultiStyleConfig28, definePartsStyle28, baseStyleIcon8, baseStyle45, list_default;
+var init_list2 = __esm({
+  "src/theme/components/list.ts"() {
+    init_dist4();
+    init_dist3();
+    ({ defineMultiStyleConfig: defineMultiStyleConfig28, definePartsStyle: definePartsStyle28 } = createMultiStyleConfigHelpers(listAnatomy.keys));
+    baseStyleIcon8 = defineStyle({
+      marginEnd: "2",
+      display: "inline",
+      verticalAlign: "text-bottom",
+      fontFamily: "body"
+    });
+    baseStyle45 = definePartsStyle28({
+      icon: baseStyleIcon8
+    });
+    list_default = defineMultiStyleConfig28({
+      baseStyle: baseStyle45
+    });
+  }
+});
 var parts10, helpers15, config24, listbox_default;
 var init_listbox = __esm({
   "src/theme/components/listbox.ts"() {
@@ -16455,6 +16555,7 @@ __export(components_exports, {
   Input: () => input_default,
   LineIcon: () => line_icon_default,
   Link: () => link_default,
+  List: () => list_default,
   ListBox: () => listbox_default,
   MediaControllerButton: () => media_controller_button_default,
   Modal: () => modal_default,
@@ -16494,6 +16595,7 @@ var init_components = __esm({
     init_input2();
     init_line_icon();
     init_link2();
+    init_list2();
     init_listbox();
     init_media_controller_button();
     init_modal2();

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-YVEFEGE4.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.2",
+  "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"