@vygruppen/spor-react 3.7.5 → 3.7.7

package/dist/index.js

@@ -700,7 +700,15 @@ var init_Button = __esm({
             }
           )
         ),
-        /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { visibility: isLoading ? "hidden" : "visible" }, children)
+        /* @__PURE__ */ React50__namespace.default.createElement(
+          react.Box,
+          {
+            visibility: isLoading ? "hidden" : "visible",
+            whiteSpace: "normal",
+            textAlign: "left"
+          },
+          children
+        )
       );
     });
     texts3 = createTexts({
@@ -12880,10 +12888,10 @@ var init_breadcrumb2 = __esm({
       color: "inherit",
       textDecoration: "none",
       textStyle: "xs",
+      paddingX: 0.5,
+      borderRadius: "xs",
       "&:not([aria-current=page])": {
         cursor: "pointer",
-        paddingX: 0.5,
-        borderRadius: "xs",
         _hover: {
           backgroundColor: themeTools.mode("seaMist", "pine")(props)
         },
@@ -12895,7 +12903,7 @@ var init_breadcrumb2 = __esm({
             })
           },
           notFocus: {
-            notFocus: { boxShadow: "none" }
+            boxShadow: "none"
           }
         }),
         _active: {
@@ -12928,7 +12936,9 @@ var init_button2 = __esm({
         fontWeight: "bold",
         transitionProperty: "common",
         transitionDuration: "normal",
-        px: 3,
+        textWrap: "wrap",
+        paddingX: 3,
+        paddingY: 1,
         _focus: {
           boxShadow: 0,
           outline: 0
@@ -13177,7 +13187,7 @@ var init_button2 = __esm({
           minHeight: 5,
           minWidth: 5,
           fontSize: "16px",
-          px: 2
+          paddingX: 2
         }
       },
       defaultProps: {
@@ -13188,28 +13198,6 @@ var init_button2 = __esm({
     button_default = config6;
   }
 });
-function getColorSchemeBaseProps({ colorScheme }) {
-  var _a6;
-  switch (colorScheme) {
-    case "white":
-      return {
-        backgroundColor: "white"
-      };
-    case "grey":
-      return {
-        backgroundColor: "lightGrey"
-      };
-    case "green": {
-      return {
-        backgroundColor: "seaMist"
-      };
-    }
-    default:
-      return {
-        backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum"
-      };
-  }
-}
 function getColorSchemeClickableProps({ colorScheme, size: size2 }) {
   var _a6, _b5;
   const baseShadow = size2 === "lg" ? "md" : "sm";
@@ -13241,71 +13229,7 @@ function getColorSchemeClickableProps({ colorScheme, size: size2 }) {
       };
   }
 }
-function getColorSchemeHoverProps({ colorScheme, size: size2 }) {
-  var _a6, _b5;
-  const baseShadow = size2 === "lg" ? "lg" : "md";
-  switch (colorScheme) {
-    case "white":
-      return {
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: colors.steel,
-          isInset: false
-        })
-      };
-    case "grey":
-      return {
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: colors.osloGrey,
-          isInset: false
-        })
-      };
-    default:
-      return {
-        backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[200]) ?? "silver",
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[400]) ?? colors.silver,
-          isInset: false
-        })
-      };
-  }
-}
-function getColorSchemeActiveProps({ colorScheme, size: size2 }) {
-  var _a6, _b5;
-  const baseShadow = size2 === "lg" ? "sm" : "none";
-  switch (colorScheme) {
-    case "white":
-      return {
-        backgroundColor: "mint",
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: colors.silver,
-          isInset: false
-        })
-      };
-    case "grey":
-      return {
-        backgroundColor: "white",
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: colors.steel,
-          isInset: false
-        })
-      };
-    default:
-      return {
-        backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[50]) ?? "lightGrey",
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[100]) ?? colors.silver,
-          isInset: false
-        })
-      };
-  }
-}
-var config7, card_default;
+var config7, card_default, getColorSchemeBaseProps, getColorSchemeHoverProps, getColorSchemeActiveProps;
 var init_card2 = __esm({
   "src/theme/components/card.ts"() {
     init_foundations();
@@ -13329,7 +13253,7 @@ var init_card2 = __esm({
           ...focusVisible({
             focus: {
               boxShadow: getBoxShadowString({
-                borderColor: "greenHaze",
+                borderColor: themeTools.mode("greenHaze", "azure")(props),
                 borderWidth: 2,
                 isInset: false
               }),
@@ -13354,6 +13278,102 @@ var init_card2 = __esm({
       })
     });
     card_default = config7;
+    getColorSchemeBaseProps = (props) => {
+      var _a6;
+      const { colorScheme, size: size2 } = props;
+      const baseShadow = size2 === "lg" ? "md" : "sm";
+      switch (colorScheme) {
+        case "white":
+          return {
+            backgroundColor: themeTools.mode("white", "whiteAlpha.100")(props),
+            boxShadow: getBoxShadowString({
+              baseShadow,
+              borderColor: "silver",
+              isInset: false
+            })
+          };
+        case "grey":
+          return {
+            backgroundColor: "lightGrey"
+          };
+        case "green": {
+          return {
+            backgroundColor: "seaMist"
+          };
+        }
+        default:
+          return {
+            backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum"
+          };
+      }
+    };
+    getColorSchemeHoverProps = (props) => {
+      var _a6, _b5;
+      const { colorScheme, size: size2 } = props;
+      const baseShadow = size2 === "lg" ? "lg" : "md";
+      switch (colorScheme) {
+        case "white":
+          return {
+            backgroundColor: themeTools.mode("white", "whiteAlpha.200")(props),
+            boxShadow: getBoxShadowString({
+              baseShadow,
+              borderColor: colors.steel,
+              isInset: false
+            })
+          };
+        case "grey":
+          return {
+            boxShadow: getBoxShadowString({
+              baseShadow,
+              borderColor: colors.osloGrey,
+              isInset: false
+            })
+          };
+        default:
+          return {
+            backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[200]) ?? "silver",
+            boxShadow: getBoxShadowString({
+              baseShadow,
+              borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[400]) ?? colors.silver,
+              isInset: false
+            })
+          };
+      }
+    };
+    getColorSchemeActiveProps = (props) => {
+      var _a6, _b5;
+      const { colorScheme, size: size2 } = props;
+      const baseShadow = size2 === "lg" ? "sm" : "none";
+      switch (colorScheme) {
+        case "white":
+          return {
+            backgroundColor: themeTools.mode("mint", "teal")(props),
+            boxShadow: getBoxShadowString({
+              baseShadow,
+              borderColor: colors.silver,
+              isInset: false
+            })
+          };
+        case "grey":
+          return {
+            backgroundColor: "white",
+            boxShadow: getBoxShadowString({
+              baseShadow,
+              borderColor: colors.steel,
+              isInset: false
+            })
+          };
+        default:
+          return {
+            backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[50]) ?? "lightGrey",
+            boxShadow: getBoxShadowString({
+              baseShadow,
+              borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[100]) ?? colors.silver,
+              isInset: false
+            })
+          };
+      }
+    };
   }
 });
 var parts2, helpers3, config8, card_select_default;
@@ -14205,7 +14225,82 @@ var init_fab = __esm({
             color: "darkTeal",
             _active: { color: "darkTeal", backgroundColor: "lightGrey" }
           }
-        }
+        },
+        brand: (props) => ({
+          container: {
+            backgroundColor: themeTools.mode("darkTeal", "mint")(props),
+            color: themeTools.mode("white", "darkTeal")(props),
+            _active: { backgroundColor: themeTools.mode("pine", "white")(props) },
+            _hover: {
+              backgroundColor: themeTools.mode("night", "seaMist")(props)
+            },
+            ...focusVisible({
+              focus: {
+                boxShadow: themeTools.mode(
+                  `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.darkTeal}, inset 0 0 0 6px ${props.theme.colors.white}`,
+                  `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.mint}, inset 0 0 0 6px ${props.theme.colors.darkTeal}`
+                )(props),
+                outline: "none"
+              },
+              notFocus: {
+                boxShadow: "md"
+              }
+            })
+          }
+        }),
+        base: (props) => ({
+          container: {
+            backgroundColor: themeTools.mode("white", "whiteAlpha.100")(props),
+            color: themeTools.mode("darkGrey", "white")(props),
+            _active: {
+              backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props),
+              color: themeTools.mode("darkGrey", "white")(props)
+            },
+            _hover: {
+              backgroundColor: themeTools.mode("white", "transparent")(props),
+              boxShadow: themeTools.mode(`inset 0 0 0 2px ${props.theme.colors.darkGrey}`, `inset 0 0 0 2px ${props.theme.colors.white}`)(props),
+              color: themeTools.mode("darkGrey", "white")(props)
+            },
+            ...focusVisible({
+              focus: {
+                boxShadow: themeTools.mode(
+                  `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.white}, inset 0 0 0 6px ${props.theme.colors.darkGrey}`,
+                  `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.brightRed}, inset 0 0 0 6px ${props.theme.colors.white}`
+                )(props),
+                outline: "none"
+              },
+              notFocus: {
+                boxShadow: "md"
+              }
+            })
+          }
+        }),
+        accent: (props) => ({
+          container: {
+            backgroundColor: themeTools.mode("mint", "pine")(props),
+            color: themeTools.mode("darkTeal", "white")(props),
+            _active: {
+              backgroundColor: themeTools.mode("seaMist", "whiteAlpha.100")(props),
+              color: themeTools.mode("darkTeal", "white")(props)
+            },
+            _hover: {
+              backgroundColor: themeTools.mode("coralGreen", "whiteAlpha.200")(props),
+              color: themeTools.mode("darkTeal", "white")(props)
+            },
+            ...focusVisible({
+              focus: {
+                boxShadow: themeTools.mode(
+                  `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.mint}, inset 0 0 0 6px ${props.theme.colors.azure}`,
+                  `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.pine}, inset 0 0 0 6px ${props.theme.colors.azure}`
+                )(props),
+                outline: "none"
+              },
+              notFocus: {
+                boxShadow: "md"
+              }
+            })
+          }
+        })
       },
       defaultProps: {
         variant: "dark"
@@ -14521,9 +14616,9 @@ var init_travel_tag = __esm({
             backgroundColor: "linjetag.altTransportLight"
           }
         },
-        walk: {
+        walk: (props) => ({
           container: {
-            backgroundColor: "white",
+            backgroundColor: themeTools.mode("white", "transparent")(props),
             _disabled: {
               backgroundColor: "white"
             }
@@ -14532,6 +14627,7 @@ var init_travel_tag = __esm({
             border: "none",
             position: "relative",
             left: -1,
+            backgroundColor: themeTools.mode("white", "transparent")(props),
             "[aria-disabled=true] &": {
               backgroundColor: "transparent",
               color: "osloGrey"
@@ -14547,12 +14643,13 @@ var init_travel_tag = __esm({
           },
           title: {
             fontSize: "mobile.xs",
-            fontWeight: "normal"
+            fontWeight: "normal",
+            color: themeTools.mode("black", "white")(props)
           },
           description: {
             display: "none"
           }
-        }
+        })
       },
       sizes: {
         sm: {
@@ -14663,6 +14760,9 @@ var init_info_tag = __esm({
         iconContainer: {
           ...travel_tag_default.baseStyle(props).iconContainer,
           padding: 1
+        },
+        textContainer: {
+          color: themeTools.mode("darkGrey", "white")(props)
         }
       }),
       sizes: {
@@ -14688,6 +14788,17 @@ var init_info_tag = __esm({
       },
       defaultProps: {
         size: "md"
+      },
+      variants: {
+        "walk": (props) => ({
+          iconContainer: {
+            backgroundColor: themeTools.mode("white", "transparent")(props),
+            boxShadow: themeTools.mode(
+              `${props.theme.shadows.md}, inset 0 0 0 2px ${props.theme.colors.black[200]}`,
+              `${props.theme.shadows.md}, inset 0 0 0 2px ${props.theme.colors.whiteAlpha[400]}`
+            )(props)
+          }
+        })
       }
     });
     info_tag_default = config20;
@@ -14876,7 +14987,7 @@ var init_line_icon = __esm({
             }
           }
         },
-        walk: {
+        walk: (props) => ({
           iconContainer: {
             backgroundColor: "white",
             borderWidth: 1,
@@ -14884,12 +14995,12 @@ var init_line_icon = __esm({
             borderColor: "blackAlpha.200"
           },
           icon: {
-            color: "darkGrey",
+            color: themeTools.mode("darkGrey", "white")(props),
             "[aria-disabled=true] &": {
               color: "osloGrey"
             }
           }
-        }
+        })
       },
       sizes: {
         sm: {
@@ -14934,7 +15045,7 @@ var init_link2 = __esm({
         backgroundPosition: "0 100%",
         backgroundRepeat: "no-repeat",
         borderRadius: "none",
-        pb: "2px",
+        padding: "2px",
         color: "inherit",
         display: "inline",
         position: "relative",
@@ -14955,12 +15066,12 @@ var init_link2 = __esm({
       },
       variants: {
         primary: (props) => ({
-          color: themeTools.mode("pine", "seaMist")(props),
+          color: themeTools.mode("pine", "coralGreen")(props),
           ...focusVisible({
             focus: {
-              backgroundColor: "transparent",
+              backgroundColor: themeTools.mode("pine", "white")(props),
+              color: themeTools.mode("white", "pine")(props),
               boxShadow: getBoxShadowString({
-                borderColor: "azure",
                 borderWidth: 2,
                 isInset: false
               })
@@ -14972,34 +15083,20 @@ var init_link2 = __esm({
             }
           }),
           _hover: {
-            color: "white",
-            backgroundColor: "pine",
-            boxShadow: getBoxShadowString({
-              borderColor: "pine",
-              borderWidth: 2,
-              isInset: false
-            })
+            color: themeTools.mode("darkTeal", "white")(props),
+            backgroundColor: themeTools.mode("coralGreen", "whiteAlpha.200")(props)
           },
           _active: {
-            color: "white",
-            backgroundColor: "azure",
-            boxShadow: getBoxShadowString({
-              borderColor: "azure",
-              borderWidth: 2,
-              isInset: false
-            })
+            color: themeTools.mode("pine", "white")(props),
+            backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props)
           }
         }),
         secondary: (props) => ({
           color: themeTools.mode("darkGrey", "white")(props),
           ...focusVisible({
             focus: {
-              backgroundColor: "transparent",
-              boxShadow: getBoxShadowString({
-                borderColor: "azure",
-                borderWidth: 2,
-                isInset: false
-              })
+              backgroundColor: themeTools.mode("darkGrey", "white")(props),
+              color: themeTools.mode("white", "darkTeal")(props)
             },
             notFocus: {
               boxShadow: "none",
@@ -15007,20 +15104,12 @@ var init_link2 = __esm({
             }
           }),
           _hover: {
-            backgroundColor: themeTools.mode("seaMist", "pine")(props),
-            boxShadow: getBoxShadowString({
-              borderColor: themeTools.mode("seaMist", "pine")(props),
-              borderWidth: 2,
-              isInset: false
-            })
+            backgroundColor: themeTools.mode("blackAlpha.100", "whiteAlpha.200")(props),
+            color: themeTools.mode("darkGrey", "white")(props)
           },
           _active: {
-            backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props),
-            boxShadow: getBoxShadowString({
-              borderColor: themeTools.mode("mint", "whiteAlpha.200")(props),
-              borderWidth: 2,
-              isInset: false
-            })
+            backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props),
+            color: themeTools.mode("darkGrey", "white")(props)
           }
         }),
         /**
@@ -16333,6 +16422,14 @@ var init_tabs = __esm({
           return {
             color: "darkGrey"
           };
+        case "base":
+          return {
+            color: themeTools.mode("darkGrey", "white")(props)
+          };
+        case "accent":
+          return {
+            color: themeTools.mode("darkTeal", "white")(props)
+          };
         default:
           return {};
       }
@@ -16361,6 +16458,32 @@ var init_tabs = __esm({
               color: "darkTeal"
             }
           };
+        case "base":
+          return {
+            backgroundColor: "pine",
+            color: "white",
+            _hover: {
+              backgroundColor: "darkTeal",
+              color: "white"
+            },
+            _active: {
+              backgroundColor: "darkTeal",
+              color: "white"
+            }
+          };
+        case "accent":
+          return {
+            backgroundColor: "pine",
+            color: "white",
+            _hover: {
+              backgroundColor: "darkTeal",
+              color: "white"
+            },
+            _active: {
+              backgroundColor: "darkTeal",
+              color: "white"
+            }
+          };
         default:
           return {
             backgroundColor: "darkTeal",
@@ -16382,6 +16505,14 @@ var init_tabs = __esm({
           return {
             boxShadow: `inset 0 0 0 2px ${props.theme.colors.white}`
           };
+        case "base":
+          return {
+            boxShadow: `inset 0 0 0 2px ${props.theme.colors.azure}`
+          };
+        case "accent":
+          return {
+            boxShadow: `inset 0 0 0 2px ${props.theme.colors.azure}`
+          };
         default:
           return {
             boxShadow: `inset 0 0 0 2px ${props.theme.colors.greenHaze}`
@@ -16406,6 +16537,16 @@ var init_tabs = __esm({
           return {
             backgroundColor: "silver"
           };
+        case "base":
+          return {
+            boxShadow: themeTools.mode(`inset 0 0 0 2px ${props.theme.colors.darkGrey}`, `inset 0 0 0 2px ${props.theme.colors.white}`)(props),
+            color: themeTools.mode("darkGrey", "white")(props)
+          };
+        case "accent":
+          return {
+            backgroundColor: themeTools.mode("seaMist", "whiteAlpha.200")(props),
+            color: themeTools.mode("darkTeal", "white")(props)
+          };
         default:
           return {};
       }
@@ -16432,6 +16573,16 @@ var init_tabs = __esm({
             backgroundColor: "lightGrey",
             color: "darkGrey"
           };
+        case "base":
+          return {
+            backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props),
+            color: themeTools.mode("darkGrey", "white")(props)
+          };
+        case "accent":
+          return {
+            backgroundColor: themeTools.mode("seaMist", "whiteAlpha.100")(props),
+            color: themeTools.mode("darkTeal", "white")(props)
+          };
         default:
           return {};
       }
@@ -16454,6 +16605,14 @@ var init_tabs = __esm({
           return {
             color: "steel"
           };
+        case "base":
+          return {
+            color: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
+          };
+        case "accent":
+          return {
+            color: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
+          };
         default:
           return {};
       }
@@ -16475,6 +16634,17 @@ var init_tabs = __esm({
             backgroundColor: "platinum",
             color: "darkGrey"
           };
+        case "base":
+          return {
+            backgroundColor: themeTools.mode("white", "transparent")(props),
+            color: "darkGrey",
+            boxShadow: themeTools.mode(`inset 0 0 0 1px ${props.theme.colors.blackAlpha["400"]}`, `inset 0 0 0 1px ${props.theme.colors.whiteAlpha["400"]}`)(props)
+          };
+        case "accent":
+          return {
+            backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props),
+            color: "darkTeal"
+          };
         default:
           return {};
       }

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

package/package.json

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

package/src/button/Button.tsx

@@ -126,7 +126,13 @@ export const Button = forwardRef<ButtonProps, "button">((props, ref) => {
           />
         </Center>
       )}
-      <Box visibility={isLoading ? "hidden" : "visible"}>{children}</Box>
+      <Box
+        visibility={isLoading ? "hidden" : "visible"}
+        whiteSpace="normal"
+        textAlign="left"
+      >
+        {children}
+      </Box>
     </ChakraButton>
   );
 });