@vygruppen/spor-react 6.1.0 → 6.2.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@6.1.0 build
+> @vygruppen/spor-react@6.2.1 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -8,15 +8,15 @@
 CLI Target: node16
 CJS Build start
 ESM Build start
-"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-2L6AHVGG.mjs".
+"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-UHSKIIAP.mjs".
 "Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/index.js".
 DTS Build start
 ESM dist/index.mjs                      2.16 KB
-ESM dist/CountryCodeSelect-KRCJWBUE.mjs 1.19 KB
-ESM dist/chunk-2L6AHVGG.mjs             397.95 KB
-ESM ⚡️ Build success in 2136ms
-CJS dist/index.js 507.36 KB
-CJS ⚡️ Build success in 2136ms
-DTS ⚡️ Build success in 12626ms
-DTS dist/index.d.ts  265.22 KB
-DTS dist/index.d.mts 265.22 KB
+ESM dist/CountryCodeSelect-CJUALQVN.mjs 1.19 KB
+ESM dist/chunk-UHSKIIAP.mjs             397.75 KB
+ESM ⚡️ Build success in 2305ms
+CJS dist/index.js 507.10 KB
+CJS ⚡️ Build success in 2306ms
+DTS ⚡️ Build success in 12726ms
+DTS dist/index.d.ts  267.02 KB
+DTS dist/index.d.mts 267.02 KB

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @vygruppen/spor-react
 
+## 6.2.1
+
+### Patch Changes
+
+- e97dddd: Card, NumericStepper: Fix a bug with the focus styles that showed up when it shouldn't have.
+
+  DatePicker, DateRangePicker: Fix a bug where you wouldn't automatically jump to the next field once a field was filled out
+
+## 6.2.0
+
+### Minor Changes
+
+- 51b98a9: LineTag, TravelTag, LineIcon: Add new variant="custom" option.
+
+  This new variant lets you specify custom foreground and background colors, as well as an icon variant.
+
+- 5c729e5: Button: The Button component is all new and shiny – and with no breaking changes at all. However, since the implementation is completely different, you might want to double check that everything looks as it should.
+
+  A new feature is that the right icon is now always right aligned, which makes this component much more versatile than before. The variant="control" is now deprecated as well.
+
 ## 6.1.0
 
 ### Minor Changes

package/dist/{CountryCodeSelect-KRCJWBUE.mjs → CountryCodeSelect-CJUALQVN.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-2L6AHVGG.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-UHSKIIAP.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-2L6AHVGG.mjs → chunk-UHSKIIAP.mjs}

@@ -1,7 +1,7 @@
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
 export { tokens10 as tokens };
-import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, Flex, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, useStyleConfig, Box, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button as Button$1, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
 export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import * as React69 from 'react';
 import React69__default, { createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, useId, Suspense, useContext, useCallback, useMemo, useLayoutEffect } from 'react';
@@ -1162,60 +1162,70 @@ var SkeletonText = (props) => /* @__PURE__ */ React69__default.createElement(Ske
 // src/button/Button.tsx
 var Button = forwardRef((props, ref) => {
   const {
+    as = "button",
+    fontWeight,
     size: size2,
-    variant,
     children,
     isLoading,
     isDisabled,
     leftIcon,
     rightIcon,
+    sx,
     ...rest
   } = props;
   const ariaLabel = useCorrectAriaLabel(props);
   const buttonGroup = useButtonGroup();
-  const finalVariant = variant ?? (buttonGroup == null ? void 0 : buttonGroup.variant) ?? "primary";
   const finalSize = size2 ?? (buttonGroup == null ? void 0 : buttonGroup.size) ?? "md";
+  const styles3 = useStyleConfig("Button", {
+    ...buttonGroup,
+    ...rest,
+    size: finalSize,
+    leftIcon,
+    rightIcon
+  });
+  if (fontWeight) {
+    styles3.fontWeight = fontWeight;
+  }
   return /* @__PURE__ */ React69__default.createElement(
-    Button$1,
+    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__default.createElement(Box, { visibility: isLoading ? "hidden" : "visible", "aria-hidden": "true" }, leftIcon) : leftIcon,
-      rightIcon: isLoading && rightIcon ? /* @__PURE__ */ React69__default.createElement(Box, { visibility: isLoading ? "hidden" : "visible", "aria-hidden": "true" }, rightIcon) : rightIcon,
+      disabled: isDisabled || isLoading,
       position: "relative"
     },
-    isLoading && /* @__PURE__ */ React69__default.createElement(
-      Center,
+    isLoading && /* @__PURE__ */ React69__default.createElement(Center, { position: "absolute", right: 0, left: 0, top: 1, bottom: 0 }, /* @__PURE__ */ React69__default.createElement(
+      ColorInlineLoader,
       {
-        position: "absolute",
-        right: "0",
-        paddingBottom: 1,
-        left: "0",
-        paddingTop: 2
-      },
-      /* @__PURE__ */ React69__default.createElement(
-        ColorInlineLoader,
-        {
-          maxWidth: getLoaderWidth(finalSize),
-          width: "80%",
-          marginX: 2,
-          marginY: 2
-        }
-      )
-    ),
+        maxWidth: getLoaderWidth(finalSize),
+        width: "80%",
+        marginX: 2,
+        marginY: 2
+      }
+    )),
     /* @__PURE__ */ React69__default.createElement(
-      Box,
+      Flex,
       {
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: 1,
         visibility: isLoading ? "hidden" : "visible",
-        whiteSpace: "normal",
-        textAlign: "left"
+        "aria-hidden": isLoading
       },
-      children
+      /* @__PURE__ */ React69__default.createElement(Flex, { justifyContent: "center", alignItems: "center", gap: 1 }, leftIcon, /* @__PURE__ */ React69__default.createElement(
+        Box,
+        {
+          visibility: isLoading ? "hidden" : "visible",
+          whiteSpace: "normal",
+          textAlign: "left"
+        },
+        children
+      )),
+      rightIcon
     )
   );
 });
@@ -1996,15 +2006,7 @@ var DateField = forwardRef$1(
         paddingTop: "2px"
       },
       props.label
-    ), /* @__PURE__ */ React69__default.createElement(Flex, { ...fieldProps, paddingTop: "3", paddingBottom: "0.5" }, state2.segments.map((segment, i) => /* @__PURE__ */ React69__default.createElement(
-      DateTimeSegment,
-      {
-        ref: i === 0 ? ref : void 0,
-        key: i,
-        segment,
-        state: state2
-      }
-    ))), /* @__PURE__ */ React69__default.createElement(
+    ), /* @__PURE__ */ React69__default.createElement(Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5" }, state2.segments.map((segment, i) => /* @__PURE__ */ React69__default.createElement(DateTimeSegment, { key: i, segment, state: state2 }))), /* @__PURE__ */ React69__default.createElement(
       "input",
       {
         type: "hidden",
@@ -3094,13 +3096,6 @@ var getBoxShadowString = (args) => {
   return allShadows.join(", ");
 };
 
-// src/theme/utils/focus-utils.ts
-var focusVisible = ({ notFocus, focus }) => ({
-  _focus: focus,
-  _focusVisible: focus,
-  "&[data-focus]:not([data-focus-visible])": notFocus
-});
-
 // src/input/NumericStepper.tsx
 function NumericStepper({
   name: nameProp,
@@ -3222,12 +3217,9 @@ var VerySmallButton = (props) => {
       size: "xs",
       minWidth: "24px",
       minHeight: "24px",
-      sx: focusVisible({
-        notFocus: { boxShadow: "none" },
-        focus: {
-          boxShadow: "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white"
-        }
-      }),
+      _focusVisible: {
+        boxShadow: "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white"
+      },
       ...props
     }
   );
@@ -3427,7 +3419,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-KRCJWBUE.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-CJUALQVN.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -3615,8 +3607,11 @@ var LineIcon = ({
   sx,
   ...rest
 }) => {
-  const styles3 = useMultiStyleConfig("LineIcon", { variant, size: size2 });
-  const Icon = getCorrectIcon({ variant, size: size2 });
+  const styles3 = 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;
   }
@@ -3628,10 +3623,23 @@ var InfoTag = ({
   variant,
   size: size2 = "md",
   title,
-  description
+  description,
+  ...customProps
 }) => {
-  const styles3 = useMultiStyleConfig("InfoTag", { variant, size: size2 });
-  return /* @__PURE__ */ React69__default.createElement(Box, { sx: styles3.container }, /* @__PURE__ */ React69__default.createElement(LineIcon, { variant, size: size2, sx: styles3.iconContainer }), /* @__PURE__ */ React69__default.createElement(Box, { sx: styles3.textContainer }, title && /* @__PURE__ */ React69__default.createElement(Box, { as: "span", sx: styles3.title }, title), title && description && " ", description && /* @__PURE__ */ React69__default.createElement(Box, { as: "span", sx: styles3.description }, description)));
+  const styles3 = useMultiStyleConfig("InfoTag", {
+    variant,
+    size: size2,
+    ...customProps
+  });
+  return /* @__PURE__ */ React69__default.createElement(Box, { sx: styles3.container }, /* @__PURE__ */ React69__default.createElement(
+    LineIcon,
+    {
+      variant,
+      size: size2,
+      sx: styles3.iconContainer,
+      ...customProps
+    }
+  ), /* @__PURE__ */ React69__default.createElement(Box, { sx: styles3.textContainer }, title && /* @__PURE__ */ React69__default.createElement(Box, { as: "span", sx: styles3.title }, title), title && description && " ", description && /* @__PURE__ */ React69__default.createElement(Box, { as: "span", sx: styles3.description }, description)));
 };
 var TravelTag = forwardRef(
   ({
@@ -3646,10 +3654,20 @@ var TravelTag = forwardRef(
     const styles3 = 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__default.createElement(Box, { sx: styles3.container, "aria-disabled": isDisabled, ref, ...rest }, /* @__PURE__ */ React69__default.createElement(LineIcon, { variant, size: size2, sx: styles3.iconContainer }), /* @__PURE__ */ React69__default.createElement(Box, { sx: styles3.textContainer }, title && /* @__PURE__ */ React69__default.createElement(Box, { as: "span", sx: styles3.title }, title), title && description && " ", description && /* @__PURE__ */ React69__default.createElement(Box, { as: "span", sx: styles3.description }, description)), DeviationLevelIcon && /* @__PURE__ */ React69__default.createElement(DeviationLevelIcon, { sx: styles3.deviationIcon }));
+    return /* @__PURE__ */ React69__default.createElement(Box, { sx: styles3.container, "aria-disabled": isDisabled, ref, ...rest }, /* @__PURE__ */ React69__default.createElement(
+      LineIcon,
+      {
+        variant,
+        size: size2,
+        sx: styles3.iconContainer,
+        ...rest
+      }
+    ), /* @__PURE__ */ React69__default.createElement(Box, { sx: styles3.textContainer }, title && /* @__PURE__ */ React69__default.createElement(Box, { as: "span", sx: styles3.title }, title), title && description && " ", description && /* @__PURE__ */ React69__default.createElement(Box, { as: "span", sx: styles3.description }, description)), DeviationLevelIcon && /* @__PURE__ */ React69__default.createElement(DeviationLevelIcon, { sx: styles3.deviationIcon }));
   }
 );
 var getDeviationLevelIcon = ({
@@ -9728,6 +9746,13 @@ var styles2 = {
     }
   })
 };
+
+// src/theme/utils/focus-utils.ts
+var focusVisible = ({ notFocus, focus }) => ({
+  _focus: focus,
+  _focusVisible: focus,
+  "&[data-focus]:not([data-focus-visible])": notFocus
+});
 var helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
 var config3 = helpers.defineMultiStyleConfig({
   baseStyle: (props) => ({
@@ -10075,7 +10100,6 @@ var config6 = defineStyleConfig$1({
   baseStyle: {
     border: 0,
     borderRadius: "xl",
-    fontWeight: "bold",
     transitionProperty: "common",
     transitionDuration: "normal",
     textWrap: "wrap",
@@ -10103,18 +10127,15 @@ var config6 = defineStyleConfig$1({
       // hardcoded background color as alpha-"hack" below is not feasible for dark mode with solid background color
       backgroundColor: mode("pine", "coralGreen")(props),
       color: mode("white", "darkTeal")(props),
-      ...focusVisible({
-        focus: {
-          boxShadow: `inset 0 0 0 2px ${mode(
-            colors.greenHaze,
-            colors.azure
-          )(props)}, inset 0 0 0 4px ${mode(
-            colors.white,
-            colors.darkGrey
-          )(props)}`
-        },
-        notFocus: { boxShadow: "none" }
-      }),
+      _focusVisible: {
+        boxShadow: `inset 0 0 0 2px ${mode(
+          colors.greenHaze,
+          colors.azure
+        )(props)}, inset 0 0 0 4px ${mode(
+          colors.white,
+          colors.darkGrey
+        )(props)}`
+      },
       _hover: {
         backgroundColor: mode("darkTeal", "blueGreen")(props)
       },
@@ -10125,34 +10146,29 @@ var config6 = defineStyleConfig$1({
     secondary: (props) => ({
       // FIXME: Update to use global defined background color for darkMode whenever it is available instead of alpha
       backgroundColor: mode("seaMist", "primaryGreen")(props),
-      color: mode("darkTeal", "white")(props),
+      color: mode("darkTeal", "seaMist")(props),
       // order is important here for now while we do not have global defined background color for darkMode
       _hover: {
         backgroundColor: mode("coralGreen", "greenHaze")(props)
       },
-      ...focusVisible({
-        focus: {
+      _focusVisible: {
+        boxShadow: `inset 0 0 0 2px ${mode(
+          colors.greenHaze,
+          colors.primaryGreen
+        )(props)}, inset 0 0 0 4px ${mode(
+          colors.white,
+          colors.darkTeal
+        )(props)}`,
+        _hover: {
           boxShadow: `inset 0 0 0 2px ${mode(
             colors.greenHaze,
-            colors.primaryGreen
+            colors.azure
           )(props)}, inset 0 0 0 4px ${mode(
             colors.white,
-            colors.darkTeal
-          )(props)}`,
-          _hover: {
-            boxShadow: `inset 0 0 0 2px ${mode(
-              colors.greenHaze,
-              colors.azure
-            )(props)}, inset 0 0 0 4px ${mode(
-              colors.white,
-              colors.blackAlpha[500]
-            )(props)}`
-          }
-        },
-        notFocus: {
-          boxShadow: "none"
+            colors.blackAlpha[500]
+          )(props)}`
         }
-      }),
+      },
       _active: {
         backgroundColor: mode("mint", "darkTeal")(props),
         boxShadow: `inset 0 0 0 2px ${mode(
@@ -10176,25 +10192,16 @@ var config6 = defineStyleConfig$1({
     tertiary: (props) => ({
       backgroundColor: "transparent",
       color: mode("darkGrey", "white")(props),
-      fontWeight: "normal",
       boxShadow: `inset 0 0 0 1px ${mode(
         colors.blackAlpha[400],
         colors.whiteAlpha[400]
       )(props)}`,
-      ...focusVisible({
-        focus: {
-          boxShadow: getBoxShadowString({
-            borderWidth: 2,
-            borderColor: "azure"
-          })
-        },
-        notFocus: {
-          boxShadow: `inset 0 0 0 1px ${mode(
-            colors.blackAlpha[400],
-            colors.whiteAlpha[400]
-          )(props)}`
-        }
-      }),
+      _focusVisible: {
+        boxShadow: getBoxShadowString({
+          borderWidth: 2,
+          borderColor: "azure"
+        })
+      },
       _hover: {
         boxShadow: `inset 0 0 0 2px currentColor`
       },
@@ -10209,18 +10216,12 @@ var config6 = defineStyleConfig$1({
     ghost: (props) => ({
       backgroundColor: "transparent",
       color: mode("darkGrey", "white")(props),
-      fontWeight: "normal",
-      ...focusVisible({
-        focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("greenHaze", "azure")(props),
-            borderWidth: 2
-          })
-        },
-        notFocus: {
-          outline: "none"
-        }
-      }),
+      _focusVisible: {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2
+        })
+      },
       _hover: {
         backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
         _disabled: {
@@ -10248,49 +10249,47 @@ var config6 = defineStyleConfig$1({
           borderWidth: 2
         })
       },
-      ...focusVisible({
-        focus: {
+      _focusVisible: {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2,
+          baseShadow: "sm"
+        }),
+        _hover: {
           boxShadow: getBoxShadowString({
             borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2,
-            baseShadow: "sm"
-          }),
-          _hover: {
-            boxShadow: getBoxShadowString({
-              borderColor: 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: {
@@ -10314,21 +10313,15 @@ var config7 = defineStyleConfig$1({
       ...getColorSchemeClickableProps(props),
       _hover: getColorSchemeHoverProps(props),
       _active: getColorSchemeActiveProps(props),
-      ...focusVisible({
-        focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("greenHaze", "azure")(props),
-            borderWidth: 2,
-            isInset: false
-          }),
-          outline: "none",
-          _active: getColorSchemeActiveProps(props)
-        },
-        notFocus: {
-          ...getColorSchemeClickableProps(props),
-          _active: getColorSchemeActiveProps(props)
-        }
-      }),
+      _focusVisible: {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2,
+          isInset: false
+        }),
+        outline: "none",
+        _active: getColorSchemeActiveProps(props)
+      },
       _disabled: {
         backgroundColor: "platinum",
         boxShadow: getBoxShadowString({
@@ -11974,6 +11967,11 @@ var config19 = helpers11.defineMultiStyleConfig({
       description: {
         display: "none"
       }
+    }),
+    custom: (props) => ({
+      container: {
+        backgroundColor: props.foregroundColor
+      }
     })
   },
   sizes: {
@@ -12317,6 +12315,11 @@ var config22 = helpers14.defineMultiStyleConfig({
           color: "osloGrey"
         }
       }
+    }),
+    custom: (props) => ({
+      iconContainer: {
+        backgroundColor: props.backgroundColor
+      }
     })
   },
   sizes: {