@vygruppen/spor-react 3.7.3 → 3.7.5

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@3.7.3 build
+> @vygruppen/spor-react@3.7.5 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -10,13 +10,13 @@
 ESM Build start
 DTS Build start
 "toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/index.js".
-"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-D2XVZVE6.mjs".
-CJS dist/index.js 534.96 KB
-CJS ⚡️ Build success in 3732ms
+"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-GIAB4PHV.mjs".
+CJS dist/index.js 539.16 KB
+CJS ⚡️ Build success in 3758ms
 ESM dist/index.mjs                      2.09 KB
-ESM dist/CountryCodeSelect-WGNXQHWO.mjs 1.19 KB
-ESM dist/chunk-D2XVZVE6.mjs             427.44 KB
-ESM ⚡️ Build success in 3733ms
-DTS ⚡️ Build success in 18018ms
-DTS dist/index.d.ts  255.09 KB
-DTS dist/index.d.mts 255.09 KB
+ESM dist/CountryCodeSelect-SNFTRR3O.mjs 1.19 KB
+ESM dist/chunk-GIAB4PHV.mjs             430.78 KB
+ESM ⚡️ Build success in 3759ms
+DTS ⚡️ Build success in 18414ms
+DTS dist/index.d.ts  256.32 KB
+DTS dist/index.d.mts 256.32 KB

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @vygruppen/spor-react
 
+## 3.7.5
+
+### Patch Changes
+
+- fde28bf1: Input: Changed active-color to mint for light mode
+- 6778a4cf: Breadcrumb: Fix focus
+- e9fdce39: Fix bug where you couldn't use FAB as a link
+
+## 3.7.4
+
+### Patch Changes
+
+- 637d713b: Accordion, ExpandableItem: Set the correct minimum height
+- 75971916: Dark mode support for Accordion
+- 6854e54a: Updated buttons to support dark mode with some minor touch ups to the current styles.
+  Variant `tertiary`-buttons are now deprecated as we are updating our visual structure
+  with a more minimalistic selection; please use `secondary` instead.
+- 1a88ad5a: Tweaked ChoiceChip colors, and added dark mode
+- e48e91d5: Breadcrumb: Add dark mode support
+- 5012de56: FloatingActionButton: Make the isTextVisible prop work as expected
+
 ## 3.7.3
 
 ### Patch Changes

package/dist/{CountryCodeSelect-WGNXQHWO.mjs → CountryCodeSelect-SNFTRR3O.mjs}

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

package/dist/{chunk-D2XVZVE6.mjs → chunk-GIAB4PHV.mjs}

@@ -1,10 +1,10 @@
-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, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, useMultiStyleConfig, PopoverAnchor, FormLabel, Flex, useFormControlContext, useBreakpointValue, 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, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, 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, 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, useBreakpointValue, 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, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, 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, Collapse, 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, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
 export { tokens10 as tokens };
 import * as React50 from 'react';
-import React50__default, { createContext, forwardRef as forwardRef$1, useRef, useState, useEffect, useId, Suspense, useMemo, useContext, useCallback } from 'react';
+import React50__default, { createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, useId, Suspense, useMemo, useContext, useCallback } from 'react';
 import { CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, ArrowRightFill18Icon, DropdownLeftFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
 import { inlineLoaderColorData, spinnerColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData, spinnerLightData } from '@vygruppen/spor-loader';
 import { useLottie } from 'lottie-react';
@@ -1284,71 +1284,76 @@ var texts4 = createTexts({
   }
 });
 var MotionBox = motion(Box);
-var FloatingActionButton = ({
-  children,
-  icon,
-  variant,
-  isTextVisible: externalIsTextVisible,
-  placement = "bottom right",
-  ...props
-}) => {
-  const [isTextVisible, setIsTextVisible] = React50__default.useState(
-    externalIsTextVisible !== void 0 ? externalIsTextVisible : true
-  );
-  const scrollDirection = useScrollDirection();
-  React50__default.useEffect(() => {
-    if (externalIsTextVisible !== void 0) {
-      return;
-    }
-    const id = window.setTimeout(
-      () => setIsTextVisible(scrollDirection !== "down"),
-      1e3
-    );
-    return () => window.clearTimeout(id);
-  }, [scrollDirection, externalIsTextVisible]);
-  React50__default.useEffect(() => {
-    setIsTextVisible(!!externalIsTextVisible);
-  }, [externalIsTextVisible]);
-  const style = useMultiStyleConfig("FloatingActionButton", {
+var FloatingActionButton = forwardRef(
+  ({
+    as,
+    children,
+    icon,
     variant,
-    isTextVisible,
-    placement
-  });
-  return /* @__PURE__ */ React50__default.createElement(
-    MotionBox,
-    {
-      __css: style.container,
-      as: "button",
-      "aria-label": children,
-      ...props
-    },
-    /* @__PURE__ */ React50__default.createElement(Box, { __css: style.icon }, icon),
-    /* @__PURE__ */ React50__default.createElement(
+    isTextVisible: externalIsTextVisible,
+    placement = "bottom right",
+    ...props
+  }, ref) => {
+    const [isTextVisible, setIsTextVisible] = React50__default.useState(
+      externalIsTextVisible !== void 0 ? externalIsTextVisible : false
+    );
+    const scrollDirection = useScrollDirection();
+    useEffect(() => {
+      if (externalIsTextVisible !== void 0) {
+        return;
+      }
+      const id = window.setTimeout(
+        () => setIsTextVisible(scrollDirection !== "down"),
+        1e3
+      );
+      return () => window.clearTimeout(id);
+    }, [scrollDirection, externalIsTextVisible]);
+    useEffect(() => {
+      setIsTextVisible(!!externalIsTextVisible);
+    }, [externalIsTextVisible]);
+    const style = useMultiStyleConfig("FloatingActionButton", {
+      variant,
+      isTextVisible,
+      placement
+    });
+    return /* @__PURE__ */ React50__default.createElement(
       MotionBox,
       {
-        animate: isTextVisible ? "show" : "hide",
-        initial: "show",
-        variants: {
-          show: {
-            opacity: 1,
-            width: "auto",
-            visibility: "visible"
+        __css: style.container,
+        "aria-label": children,
+        ref,
+        ...props
+      },
+      /* @__PURE__ */ React50__default.createElement(Box, { __css: style.icon }, icon),
+      /* @__PURE__ */ React50__default.createElement(
+        MotionBox,
+        {
+          animate: isTextVisible ? "show" : "hide",
+          initial: externalIsTextVisible ? "show" : "hide",
+          variants: {
+            show: {
+              opacity: 1,
+              width: "auto",
+              visibility: "visible"
+            },
+            hide: {
+              opacity: 0,
+              width: 0,
+              visibility: "hidden"
+            }
           },
-          hide: {
-            opacity: 0,
-            width: 0,
-            visibility: "hidden"
-          }
+          __css: style.text
         },
-        __css: style.text
-      },
-      children
-    )
-  );
-};
+        children
+      )
+    );
+  }
+);
 var useScrollDirection = () => {
   const [scrollDirection, setScrollDirection] = React50__default.useState(null);
-  const lastScrollPosition = React50__default.useRef(typeof window !== "undefined" ? window.scrollY : 0);
+  const lastScrollPosition = React50__default.useRef(
+    typeof window !== "undefined" ? window.scrollY : 0
+  );
   React50__default.useEffect(() => {
     const onScroll = () => {
       const delta = window.scrollY - lastScrollPosition.current;
@@ -4298,7 +4303,9 @@ var ChoiceChip = forwardRef((props, ref) => {
         __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__default.createElement(chakra.span, { __css: styles3.icon }, state2.isChecked ? icon.checked : icon.default),
       /* @__PURE__ */ React50__default.createElement(chakra.span, { __css: styles3.label, ...getCheckboxProps() }, variant !== "icon" && children),
@@ -5083,7 +5090,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React50__default.lazy(() => import('./CountryCodeSelect-WGNXQHWO.mjs'));
+var LazyCountryCodeSelect = React50__default.lazy(() => import('./CountryCodeSelect-SNFTRR3O.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React50__default.createElement(Radio$1, { ...props, ref });
 });
@@ -11056,11 +11063,9 @@ var styles2 = {
     }
   })
 };
-
-// src/theme/components/accordion.ts
 var helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
 var config3 = helpers.defineMultiStyleConfig({
-  baseStyle: {
+  baseStyle: (props) => ({
     container: {
       border: "none",
       borderRadius: "sm"
@@ -11072,7 +11077,7 @@ var config3 = helpers.defineMultiStyleConfig({
       borderRadius: "sm",
       display: "flex",
       justifyContent: "space-between",
-      color: "darkGrey",
+      color: mode("darkGrey", "white")(props),
       textAlign: "left",
       fontFamily: "body",
       fontWeight: "bold",
@@ -11084,7 +11089,7 @@ var config3 = helpers.defineMultiStyleConfig({
         },
         focus: {
           boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
+            borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2
           })
         }
@@ -11101,23 +11106,26 @@ var config3 = helpers.defineMultiStyleConfig({
     icon: {
       fontSize: "1.25em"
     }
-  },
+  }),
   variants: {
-    list: {
+    list: (props) => ({
       button: {
         boxShadow: "none",
         _hover: {
-          backgroundColor: "seaMist"
+          backgroundColor: mode("seaMist", "pine")(props)
         },
         _active: {
-          backgroundColor: "mint"
+          backgroundColor: mode("mint", "whiteAlpha.200")(props)
         }
       }
-    },
-    outline: {
+    }),
+    outline: (props) => ({
       container: {
         boxShadow: getBoxShadowString({
-          borderColor: colors.blackAlpha["400"]
+          borderColor: mode(
+            colors.blackAlpha["400"],
+            colors.whiteAlpha["400"]
+          )(props)
         })
       },
       button: {
@@ -11126,23 +11134,24 @@ var config3 = helpers.defineMultiStyleConfig({
         },
         _hover: {
           boxShadow: getBoxShadowString({
-            borderColor: "darkGrey",
+            borderColor: mode("darkGrey", "white")(props),
             borderWidth: 2
           })
         },
         _active: {
-          backgroundColor: "mint",
+          backgroundColor: mode("mint", "whiteAlpha.100")(props),
           boxShadow: getBoxShadowString({
-            borderColor: "darkGrey"
+            borderColor: mode("darkGrey", colors.whiteAlpha[400])(props)
           })
         }
       }
-    },
-    card: {
+    }),
+    card: (props) => ({
       container: {
+        backgroundColor: mode("white", "whiteAlpha.100")(props),
         boxShadow: getBoxShadowString({
-          baseShadow: "sm",
-          borderColor: "silver"
+          baseShadow: mode("sm", "none")(props),
+          borderColor: mode("silver", "whiteAlpha.400")(props)
         })
       },
       button: {
@@ -11150,20 +11159,30 @@ var config3 = helpers.defineMultiStyleConfig({
           borderBottomRadius: "none"
         },
         _hover: {
-          backgroundColor: "seaMist"
+          backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
+          boxShadow: getBoxShadowString({
+            borderColor: mode("darkGrey", "white")(props),
+            borderWidth: 1
+          })
         },
         _active: {
-          backgroundColor: "mint"
+          backgroundColor: mode("mint", "inherit")(props),
+          boxShadow: getBoxShadowString({
+            baseShadow: "none",
+            borderWidth: 1,
+            borderColor: 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"],
@@ -11174,7 +11193,8 @@ var config3 = helpers.defineMultiStyleConfig({
       button: {
         fontSize: ["mobile.sm", null, "desktop.sm"],
         paddingX: 3,
-        paddingY: 1
+        paddingY: 1,
+        minHeight: 7
       },
       panel: {
         fontSize: ["mobile.sm", null, "desktop.sm"],
@@ -11185,7 +11205,8 @@ var config3 = helpers.defineMultiStyleConfig({
       button: {
         fontSize: ["mobile.sm", null, "desktop.sm"],
         paddingX: 3,
-        paddingY: 2
+        paddingY: 2,
+        minHeight: 8
       },
       panel: {
         fontSize: ["mobile.sm", null, "desktop.sm"],
@@ -11343,10 +11364,8 @@ var colorCombinations = {
     color: "darkGrey"
   }
 };
-
-// src/theme/components/breadcrumb.ts
 var { defineMultiStyleConfig: defineMultiStyleConfig27, definePartsStyle: definePartsStyle27 } = createMultiStyleConfigHelpers(breadcrumbAnatomy.keys);
-var baseStyleLink2 = defineStyle({
+var baseStyleLink2 = defineStyle((props) => ({
   transitionProperty: "common",
   transitionDuration: "fast",
   transitionTimingFunction: "ease-out",
@@ -11359,26 +11378,31 @@ var baseStyleLink2 = defineStyle({
     paddingX: 0.5,
     borderRadius: "xs",
     _hover: {
-      backgroundColor: "coralGreen"
-    },
-    _focusVisible: {
-      boxShadow: getBoxShadowString({
-        borderColor: "greenHaze",
-        borderWidth: 2
-      })
+      backgroundColor: mode("seaMist", "pine")(props)
     },
+    ...focusVisible({
+      focus: {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2
+        })
+      },
+      notFocus: {
+        notFocus: { boxShadow: "none" }
+      }
+    }),
     _active: {
-      backgroundColor: "mint"
+      backgroundColor: mode("mint", "whiteAlpha.200")(props)
     }
   }
-});
-var baseStyle43 = definePartsStyle27({
-  link: baseStyleLink2,
+}));
+var baseStyle43 = definePartsStyle27((props) => ({
+  link: baseStyleLink2(props),
   list: {
     flexWrap: "wrap",
     alignItems: "flex-start"
   }
-});
+}));
 var breadcrumb_default = defineMultiStyleConfig27({
   baseStyle: baseStyle43
 });
@@ -11407,28 +11431,39 @@ var config6 = defineStyleConfig$1({
     }
   },
   variants: {
-    control: {
-      backgroundColor: "darkTeal",
-      color: "white",
+    control: (props) => ({
+      backgroundColor: mode("darkTeal", "mint")(props),
+      color: 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 ${mode(
+            colors.darkTeal,
+            colors.seaMist
+          )(props)}, inset 0 0 0 6px currentColor`
         },
         notFocus: { boxShadow: "none" }
       }),
       _hover: {
-        backgroundColor: "night"
+        backgroundColor: mode("night", "coralGreen")(props)
       },
       _active: {
-        backgroundColor: "pine"
+        backgroundColor: 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 ${mode(
+            colors.greenHaze,
+            colors.azure
+          )(props)}, inset 0 0 0 4px ${mode(
+            colors.white,
+            colors.darkGrey
+          )(props)}`
         },
         notFocus: { boxShadow: "none" }
       }),
@@ -11438,25 +11473,61 @@ var config6 = defineStyleConfig$1({
       _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: mode("seaMist", "whiteAlpha.100")(props),
+      color: mode("darkTeal", "white")(props),
+      // order is important here for now while we do not have global defined background color for darkMode
+      _hover: {
+        backgroundColor: 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 ${mode(
+            colors.greenHaze,
+            colors.azure
+          )(props)}, inset 0 0 0 4px ${mode(
+            colors.white,
+            colors.blackAlpha[300]
+          )(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"
         }
       }),
-      _hover: {
-        backgroundColor: "blueGreen"
-      },
       _active: {
-        backgroundColor: "mint"
+        backgroundColor: mode("mint", "whiteAlpha.300")(props),
+        boxShadow: `inset 0 0 0 2px ${mode(
+          colors.greenHaze,
+          colors.azure
+        )(props)}, inset 0 0 0 4px ${mode(
+          colors.white,
+          colors.blackAlpha[600]
+        )(props)}`,
+        _hover: {
+          boxShadow: `inset 0 0 0 2px ${mode(
+            colors.greenHaze,
+            colors.azure
+          )(props)}, inset 0 0 0 4px ${mode(
+            colors.white,
+            colors.blackAlpha[600]
+          )(props)}`
+        }
       }
-    },
+    }),
+    /**
+     * @deprecated use `secondary` instead.
+     */
     tertiary: {
       backgroundColor: "mint",
       color: "darkGrey",
@@ -11485,7 +11556,7 @@ var config6 = defineStyleConfig$1({
       ...focusVisible({
         focus: {
           boxShadow: getBoxShadowString({
-            borderWidth: 3,
+            borderWidth: 2,
             borderColor: "greenHaze"
           })
         },
@@ -11992,32 +12063,43 @@ var helpers5 = createMultiStyleConfigHelpers$1(parts3.keys);
 var config10 = helpers5.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
-      backgroundColor: "white",
+      backgroundColor: mode("white", "transparent")(props),
       boxShadow: getBoxShadowString({ borderColor: "celadon" }),
-      color: "darkTeal",
+      color: 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 ${mode(
+          colors.greenHaze,
+          colors.azure
+        )(props)}, inset 0 0 0 4px ${mode(
+          colors.white,
+          colors.darkGrey
+        )(props)}`
       },
       "@media (hover:hover)": {
         _hover: {
+          color: mode("darkTeal", "white")(props),
           boxShadow: getBoxShadowString({
             borderColor: "greenHaze",
             borderWidth: 2
           }),
-          background: "mint",
+          background: mode("coralGreen", "whiteAlpha.200")(props),
           cursor: "pointer"
         }
+      },
+      _active: {
+        backgroundColor: mode("mint", "whiteAlpha.300")(props),
+        boxShadow: getBoxShadowString({
+          borderColor: "pine"
+        })
       }
     },
     icon: {
@@ -13010,7 +13092,7 @@ var config21 = helpers13.defineMultiStyleConfig({
         borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
       }),
       _active: {
-        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+        backgroundColor: mode("mint", "whiteAlpha.100")(props),
         boxShadow: getBoxShadowString({
           borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
         })