@vygruppen/spor-react 6.1.0 → 6.2.0

package/dist/index.js

@@ -662,60 +662,70 @@ var init_Button = __esm({
     init_loader();
     exports.Button = react.forwardRef((props, ref) => {
       const {
+        as = "button",
+        fontWeight,
         size: size2,
-        variant,
         children,
         isLoading,
         isDisabled,
         leftIcon,
         rightIcon,
+        sx,
         ...rest
       } = props;
       const ariaLabel = useCorrectAriaLabel(props);
       const buttonGroup = react.useButtonGroup();
-      const finalVariant = variant ?? (buttonGroup == null ? void 0 : buttonGroup.variant) ?? "primary";
       const finalSize = size2 ?? (buttonGroup == null ? void 0 : buttonGroup.size) ?? "md";
+      const styles3 = react.useStyleConfig("Button", {
+        ...buttonGroup,
+        ...rest,
+        size: finalSize,
+        leftIcon,
+        rightIcon
+      });
+      if (fontWeight) {
+        styles3.fontWeight = fontWeight;
+      }
       return /* @__PURE__ */ React69__namespace.default.createElement(
-        react.Button,
+        react.Box,
         {
-          size: finalSize,
-          variant: finalVariant,
           ...rest,
+          as,
+          sx: { ...styles3, ...sx },
           ref,
           "aria-label": ariaLabel,
           "aria-busy": isLoading,
-          isDisabled: isDisabled || isLoading,
-          leftIcon: isLoading && leftIcon ? /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { visibility: isLoading ? "hidden" : "visible", "aria-hidden": "true" }, leftIcon) : leftIcon,
-          rightIcon: isLoading && rightIcon ? /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { visibility: isLoading ? "hidden" : "visible", "aria-hidden": "true" }, rightIcon) : rightIcon,
+          disabled: isDisabled || isLoading,
           position: "relative"
         },
-        isLoading && /* @__PURE__ */ React69__namespace.default.createElement(
-          react.Center,
+        isLoading && /* @__PURE__ */ React69__namespace.default.createElement(react.Center, { position: "absolute", right: 0, left: 0, top: 1, bottom: 0 }, /* @__PURE__ */ React69__namespace.default.createElement(
+          exports.ColorInlineLoader,
           {
-            position: "absolute",
-            right: "0",
-            paddingBottom: 1,
-            left: "0",
-            paddingTop: 2
-          },
-          /* @__PURE__ */ React69__namespace.default.createElement(
-            exports.ColorInlineLoader,
-            {
-              maxWidth: getLoaderWidth(finalSize),
-              width: "80%",
-              marginX: 2,
-              marginY: 2
-            }
-          )
-        ),
+            maxWidth: getLoaderWidth(finalSize),
+            width: "80%",
+            marginX: 2,
+            marginY: 2
+          }
+        )),
         /* @__PURE__ */ React69__namespace.default.createElement(
-          react.Box,
+          react.Flex,
           {
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: 1,
             visibility: isLoading ? "hidden" : "visible",
-            whiteSpace: "normal",
-            textAlign: "left"
+            "aria-hidden": isLoading
           },
-          children
+          /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { justifyContent: "center", alignItems: "center", gap: 1 }, leftIcon, /* @__PURE__ */ React69__namespace.default.createElement(
+            react.Box,
+            {
+              visibility: isLoading ? "hidden" : "visible",
+              whiteSpace: "normal",
+              textAlign: "left"
+            },
+            children
+          )),
+          rightIcon
         )
       );
     });
@@ -4316,8 +4326,11 @@ var init_LineIcon = __esm({
       sx,
       ...rest
     }) => {
-      const styles3 = react.useMultiStyleConfig("LineIcon", { variant, size: size2 });
-      const Icon = getCorrectIcon({ variant, size: size2 });
+      const styles3 = react.useMultiStyleConfig("LineIcon", { variant, size: size2, ...rest });
+      const Icon = getCorrectIcon({
+        variant: variant === "custom" && "customIconVariant" in rest ? rest.customIconVariant : variant === "custom" ? "local-train" : variant,
+        size: size2
+      });
       if (!Icon) {
         return null;
       }
@@ -4333,10 +4346,23 @@ var init_InfoTag = __esm({
       variant,
       size: size2 = "md",
       title,
-      description
+      description,
+      ...customProps
     }) => {
-      const styles3 = react.useMultiStyleConfig("InfoTag", { variant, size: size2 });
-      return /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: styles3.container }, /* @__PURE__ */ React69__namespace.default.createElement(exports.LineIcon, { variant, size: size2, sx: styles3.iconContainer }), /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: styles3.textContainer }, title && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "span", sx: styles3.title }, title), title && description && " ", description && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "span", sx: styles3.description }, description)));
+      const styles3 = react.useMultiStyleConfig("InfoTag", {
+        variant,
+        size: size2,
+        ...customProps
+      });
+      return /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: styles3.container }, /* @__PURE__ */ React69__namespace.default.createElement(
+        exports.LineIcon,
+        {
+          variant,
+          size: size2,
+          sx: styles3.iconContainer,
+          ...customProps
+        }
+      ), /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: styles3.textContainer }, title && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "span", sx: styles3.title }, title), title && description && " ", description && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "span", sx: styles3.description }, description)));
     };
   }
 });
@@ -4357,10 +4383,20 @@ var init_TravelTag = __esm({
         const styles3 = react.useMultiStyleConfig("TravelTag", {
           variant,
           size: size2,
-          deviationLevel
+          deviationLevel,
+          foregroundColor: variant === "custom" ? rest.foregroundColor : void 0,
+          backgroundColor: variant === "custom" ? rest.backgroundColor : void 0
         });
         const DeviationLevelIcon = getDeviationLevelIcon({ deviationLevel, size: size2 });
-        return /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: styles3.container, "aria-disabled": isDisabled, ref, ...rest }, /* @__PURE__ */ React69__namespace.default.createElement(exports.LineIcon, { variant, size: size2, sx: styles3.iconContainer }), /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: styles3.textContainer }, title && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "span", sx: styles3.title }, title), title && description && " ", description && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "span", sx: styles3.description }, description)), DeviationLevelIcon && /* @__PURE__ */ React69__namespace.default.createElement(DeviationLevelIcon, { sx: styles3.deviationIcon }));
+        return /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: styles3.container, "aria-disabled": isDisabled, ref, ...rest }, /* @__PURE__ */ React69__namespace.default.createElement(
+          exports.LineIcon,
+          {
+            variant,
+            size: size2,
+            sx: styles3.iconContainer,
+            ...rest
+          }
+        ), /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: styles3.textContainer }, title && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "span", sx: styles3.title }, title), title && description && " ", description && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "span", sx: styles3.description }, description)), DeviationLevelIcon && /* @__PURE__ */ React69__namespace.default.createElement(DeviationLevelIcon, { sx: styles3.deviationIcon }));
       }
     );
     getDeviationLevelIcon = ({
@@ -11515,12 +11551,10 @@ var init_button2 = __esm({
   "src/theme/components/button.ts"() {
     init_foundations();
     init_box_shadow_utils();
-    init_focus_utils();
     config6 = react.defineStyleConfig({
       baseStyle: {
         border: 0,
         borderRadius: "xl",
-        fontWeight: "bold",
         transitionProperty: "common",
         transitionDuration: "normal",
         textWrap: "wrap",
@@ -11548,18 +11582,15 @@ var init_button2 = __esm({
           // hardcoded background color as alpha-"hack" below is not feasible for dark mode with solid background color
           backgroundColor: themeTools.mode("pine", "coralGreen")(props),
           color: themeTools.mode("white", "darkTeal")(props),
-          ...focusVisible({
-            focus: {
-              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" }
-          }),
+          _focusVisible: {
+            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)}`
+          },
           _hover: {
             backgroundColor: themeTools.mode("darkTeal", "blueGreen")(props)
           },
@@ -11570,34 +11601,29 @@ var init_button2 = __esm({
         secondary: (props) => ({
           // FIXME: Update to use global defined background color for darkMode whenever it is available instead of alpha
           backgroundColor: themeTools.mode("seaMist", "primaryGreen")(props),
-          color: themeTools.mode("darkTeal", "white")(props),
+          color: themeTools.mode("darkTeal", "seaMist")(props),
           // order is important here for now while we do not have global defined background color for darkMode
           _hover: {
             backgroundColor: themeTools.mode("coralGreen", "greenHaze")(props)
           },
-          ...focusVisible({
-            focus: {
+          _focusVisible: {
+            boxShadow: `inset 0 0 0 2px ${themeTools.mode(
+              colors.greenHaze,
+              colors.primaryGreen
+            )(props)}, inset 0 0 0 4px ${themeTools.mode(
+              colors.white,
+              colors.darkTeal
+            )(props)}`,
+            _hover: {
               boxShadow: `inset 0 0 0 2px ${themeTools.mode(
                 colors.greenHaze,
-                colors.primaryGreen
+                colors.azure
               )(props)}, inset 0 0 0 4px ${themeTools.mode(
                 colors.white,
-                colors.darkTeal
-              )(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"
+                colors.blackAlpha[500]
+              )(props)}`
             }
-          }),
+          },
           _active: {
             backgroundColor: themeTools.mode("mint", "darkTeal")(props),
             boxShadow: `inset 0 0 0 2px ${themeTools.mode(
@@ -11621,25 +11647,16 @@ var init_button2 = __esm({
         tertiary: (props) => ({
           backgroundColor: "transparent",
           color: themeTools.mode("darkGrey", "white")(props),
-          fontWeight: "normal",
           boxShadow: `inset 0 0 0 1px ${themeTools.mode(
             colors.blackAlpha[400],
             colors.whiteAlpha[400]
           )(props)}`,
-          ...focusVisible({
-            focus: {
-              boxShadow: getBoxShadowString({
-                borderWidth: 2,
-                borderColor: "azure"
-              })
-            },
-            notFocus: {
-              boxShadow: `inset 0 0 0 1px ${themeTools.mode(
-                colors.blackAlpha[400],
-                colors.whiteAlpha[400]
-              )(props)}`
-            }
-          }),
+          _focusVisible: {
+            boxShadow: getBoxShadowString({
+              borderWidth: 2,
+              borderColor: "azure"
+            })
+          },
           _hover: {
             boxShadow: `inset 0 0 0 2px currentColor`
           },
@@ -11654,18 +11671,12 @@ var init_button2 = __esm({
         ghost: (props) => ({
           backgroundColor: "transparent",
           color: themeTools.mode("darkGrey", "white")(props),
-          fontWeight: "normal",
-          ...focusVisible({
-            focus: {
-              boxShadow: getBoxShadowString({
-                borderColor: themeTools.mode("greenHaze", "azure")(props),
-                borderWidth: 2
-              })
-            },
-            notFocus: {
-              outline: "none"
-            }
-          }),
+          _focusVisible: {
+            boxShadow: getBoxShadowString({
+              borderColor: themeTools.mode("greenHaze", "azure")(props),
+              borderWidth: 2
+            })
+          },
           _hover: {
             backgroundColor: themeTools.mode("seaMist", "whiteAlpha.200")(props),
             _disabled: {
@@ -11693,49 +11704,47 @@ var init_button2 = __esm({
               borderWidth: 2
             })
           },
-          ...focusVisible({
-            focus: {
+          _focusVisible: {
+            boxShadow: getBoxShadowString({
+              borderColor: themeTools.mode("greenHaze", "azure")(props),
+              borderWidth: 2,
+              baseShadow: "sm"
+            }),
+            _hover: {
               boxShadow: getBoxShadowString({
                 borderColor: themeTools.mode("greenHaze", "azure")(props),
                 borderWidth: 2,
-                baseShadow: "sm"
-              }),
-              _hover: {
-                boxShadow: getBoxShadowString({
-                  borderColor: themeTools.mode("greenHaze", "azure")(props),
-                  borderWidth: 2,
-                  baseShadow: "md"
-                })
-              }
-            },
-            notFocus: {
-              outline: "none",
-              boxShadow: "sm"
+                baseShadow: "md"
+              })
             }
-          })
+          }
         })
       },
       sizes: {
         lg: {
           minHeight: 8,
           minWidth: 8,
-          fontSize: "18px"
+          fontSize: "18px",
+          fontWeight: "bold"
         },
         md: {
           minHeight: 7,
           minWidth: 7,
-          fontSize: "18px"
+          fontSize: "18px",
+          fontWeight: "bold"
         },
         sm: {
           minHeight: 6,
           minWidth: 6,
-          fontSize: "16px"
+          fontSize: "16px",
+          fontWeight: "normal"
         },
         xs: {
           minHeight: 5,
           minWidth: 5,
           fontSize: "16px",
-          paddingX: 2
+          paddingX: 2,
+          fontWeight: "normal"
         }
       },
       defaultProps: {
@@ -13529,6 +13538,11 @@ var init_travel_tag = __esm({
           description: {
             display: "none"
           }
+        }),
+        custom: (props) => ({
+          container: {
+            backgroundColor: props.foregroundColor
+          }
         })
       },
       sizes: {
@@ -13889,6 +13903,11 @@ var init_line_icon = __esm({
               color: "osloGrey"
             }
           }
+        }),
+        custom: (props) => ({
+          iconContainer: {
+            backgroundColor: props.backgroundColor
+          }
         })
       },
       sizes: {

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, 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, Portal, ProgressBar, ProgressIndicator, 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, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-2L6AHVGG.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, 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, Portal, ProgressBar, ProgressIndicator, 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, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-UIM4MXLY.mjs';

package/package.json

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

package/src/button/Button.tsx

@@ -1,10 +1,11 @@
 import {
   Box,
   Center,
-  Button as ChakraButton,
   ButtonProps as ChakraButtonProps,
+  Flex,
   forwardRef,
   useButtonGroup,
+  useStyleConfig,
 } from "@chakra-ui/react";
 import React from "react";
 import { createTexts, useTranslation } from "../i18n";
@@ -22,7 +23,9 @@ export type ButtonProps = Exclude<
   size?: "xs" | "sm" | "md" | "lg";
   /** The different variants of a button
    *
-   * Defaults to "primary"
+   * Defaults to "primary".
+   *
+   * "control" is deprecated, and will be removed in a future version
    */
   variant?:
     | "control"
@@ -37,7 +40,6 @@ export type ButtonProps = Exclude<
  *
  * There are several button variants. You can specify which one you want with the `variant` prop. The available variants are:
  *
- * - `control`: This button is used for ticket controls only.
  * - `primary`: This is our main button. It's used for the main actions in a view, like a call to action. There should only be a single primary button in each view.
  * - `secondary`: Used for secondary actions in a view, and when you need to make several actions available at the same time.
  * - `tertiary`: Used for additional choices, like a less important secondary action.
@@ -62,61 +64,48 @@ export type ButtonProps = Exclude<
  */
 export const Button = forwardRef<ButtonProps, "button">((props, ref) => {
   const {
+    as = "button",
+    fontWeight,
     size,
-    variant,
     children,
     isLoading,
     isDisabled,
     leftIcon,
     rightIcon,
+    sx,
     ...rest
   } = props;
   const ariaLabel = useCorrectAriaLabel(props);
   const buttonGroup = useButtonGroup();
-  const finalVariant = (variant ??
-    buttonGroup?.variant ??
-    "primary") as Required<ButtonProps["variant"]>;
   const finalSize = (size ?? buttonGroup?.size ?? "md") as Required<
     ButtonProps["size"]
   >;
+  const styles = useStyleConfig("Button", {
+    ...buttonGroup,
+    ...rest,
+    size: finalSize,
+    leftIcon,
+    rightIcon,
+  });
+
+  // We want to explicitly allow to override the fontWeight prop
+  if (fontWeight) {
+    styles.fontWeight = fontWeight;
+  }
 
   return (
-    <ChakraButton
-      size={finalSize}
-      variant={finalVariant}
+    <Box
       {...rest}
+      as={as}
+      sx={{ ...styles, ...sx }}
       ref={ref}
       aria-label={ariaLabel}
       aria-busy={isLoading}
-      isDisabled={isDisabled || isLoading}
-      leftIcon={
-        isLoading && leftIcon ? (
-          <Box visibility={isLoading ? "hidden" : "visible"} aria-hidden="true">
-            {leftIcon}
-          </Box>
-        ) : (
-          leftIcon
-        )
-      }
-      rightIcon={
-        isLoading && rightIcon ? (
-          <Box visibility={isLoading ? "hidden" : "visible"} aria-hidden="true">
-            {rightIcon}
-          </Box>
-        ) : (
-          rightIcon
-        )
-      }
+      disabled={isDisabled || isLoading}
       position="relative"
     >
       {isLoading && (
-        <Center
-          position="absolute"
-          right="0"
-          paddingBottom={1}
-          left="0"
-          paddingTop={2}
-        >
+        <Center position="absolute" right={0} left={0} top={1} bottom={0}>
           <ColorInlineLoader
             maxWidth={getLoaderWidth(finalSize)}
             width="80%"
@@ -125,18 +114,30 @@ export const Button = forwardRef<ButtonProps, "button">((props, ref) => {
           />
         </Center>
       )}
-      <Box
+      <Flex
+        justifyContent="space-between"
+        alignItems="center"
+        gap={1}
         visibility={isLoading ? "hidden" : "visible"}
-        whiteSpace="normal"
-        textAlign="left"
+        aria-hidden={isLoading}
       >
-        {children}
-      </Box>
-    </ChakraButton>
+        <Flex justifyContent="center" alignItems="center" gap={1}>
+          {leftIcon}
+          <Box
+            visibility={isLoading ? "hidden" : "visible"}
+            whiteSpace="normal"
+            textAlign="left"
+          >
+            {children}
+          </Box>
+        </Flex>
+        {rightIcon}
+      </Flex>
+    </Box>
   );
 });
 
-function getLoaderWidth(size: any) {
+function getLoaderWidth(size: Required<ButtonProps["size"]>) {
   switch (size) {
     case "xs":
       return "4rem";

package/src/button/IconButton.tsx

@@ -8,6 +8,10 @@ import React from "react";
 import { ColorSpinner } from "..";
 
 export type IconButtonProps = Omit<ChakraIconButtonProps, "variant"> & {
+  /** The button variant.
+   *
+   * "control" is deprecated
+   */
   variant:
     | "control"
     | "primary"

package/src/linjetag/InfoTag.tsx

@@ -24,6 +24,17 @@ export type InfoTagProps = TagProps;
  * />
  * ```
  *
+ * If required, you can also override the colors and icons in these line tags:
+ *
+ * ```tsx
+ * <InfoTag
+ *  variant="custom"
+ *  customIconVariant="ferry"
+ *  foregroundColor="#b4da55"
+ *  backgroundColor="#c0ffee"
+ * />
+ * ```
+ *
  * @see https://spor.vy.no/components/line-tags
  */
 export const InfoTag = ({
@@ -31,11 +42,21 @@ export const InfoTag = ({
   size = "md",
   title,
   description,
+  ...customProps
 }: InfoTagProps) => {
-  const styles = useMultiStyleConfig("InfoTag", { variant, size });
+  const styles = useMultiStyleConfig("InfoTag", {
+    variant,
+    size,
+    ...customProps,
+  });
   return (
     <Box sx={styles.container}>
-      <LineIcon variant={variant} size={size} sx={styles.iconContainer} />
+      <LineIcon
+        variant={variant}
+        size={size}
+        sx={styles.iconContainer}
+        {...(customProps as any)} // TODO: Fix this
+      />
       <Box sx={styles.textContainer}>
         {title && (
           <Box as="span" sx={styles.title}>