@vygruppen/spor-react 8.2.0 → 8.2.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@8.2.0 build
+> @vygruppen/spor-react@8.2.1 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -10,13 +10,13 @@
 ESM Build start
 "Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/index.js".
 DTS Build start
-"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-D4IHIS3H.mjs".
-CJS dist/index.js 503.28 KB
-CJS ⚡️ Build success in 2095ms
+"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-AKOJGLTQ.mjs".
+CJS dist/index.js 504.49 KB
+CJS ⚡️ Build success in 2019ms
 ESM dist/index.mjs                      2.01 KB
-ESM dist/CountryCodeSelect-POM47KR5.mjs 1.19 KB
-ESM dist/chunk-D4IHIS3H.mjs             395.57 KB
-ESM ⚡️ Build success in 2097ms
-DTS ⚡️ Build success in 10536ms
-DTS dist/index.d.ts  271.35 KB
-DTS dist/index.d.mts 271.35 KB
+ESM dist/CountryCodeSelect-NEASN3EC.mjs 1.19 KB
+ESM dist/chunk-AKOJGLTQ.mjs             396.46 KB
+ESM ⚡️ Build success in 2021ms
+DTS ⚡️ Build success in 10225ms
+DTS dist/index.d.ts  271.48 KB
+DTS dist/index.d.mts 271.48 KB

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @vygruppen/spor-react
 
+## 8.2.1
+
+### Patch Changes
+
+- 6c2a831: Fixes bug where Button component did not have a default type.
+- f259d1d: Checkbox: Facelift and dark mode support
+  Radio: Facelift and dark mode support
+
 ## 8.2.0
 
 ### Minor Changes

package/dist/{CountryCodeSelect-POM47KR5.mjs → CountryCodeSelect-NEASN3EC.mjs}

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

package/dist/{chunk-D4IHIS3H.mjs → chunk-AKOJGLTQ.mjs}

@@ -1163,6 +1163,7 @@ var SkeletonText = (props) => /* @__PURE__ */ React69__default.createElement(Ske
 var Button = forwardRef((props, ref) => {
   const {
     as = "button",
+    type = "button",
     fontWeight,
     size: size2,
     children,
@@ -1191,6 +1192,7 @@ var Button = forwardRef((props, ref) => {
     {
       ...rest,
       as,
+      type,
       sx: { ...styles3, ...sx },
       ref,
       "aria-label": ariaLabel,
@@ -3433,7 +3435,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-POM47KR5.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-NEASN3EC.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -9802,7 +9804,7 @@ function baseBackground(state2, props) {
       };
     case "disabled":
       return {
-        backgroundColor: mode("silver", "whiteAlpha.100")(props)
+        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props)
       };
     case "hover":
       return {
@@ -10872,16 +10874,16 @@ var config9 = helpers4.defineMultiStyleConfig({
     container: {
       _hover: {
         "input:enabled:not([aria-invalid]) + .chakra-checkbox__control": {
-          backgroundColor: "white",
-          borderColor: "primaryGreen"
+          ...baseBackground("hover", props),
+          borderColor: mode("darkGrey", "white")(props)
         },
         "input:enabled[aria-invalid] + .chakra-checkbox__control": {
-          backgroundColor: "white",
+          backgroundColor: mode("white", "inherit")(props),
           borderColor: "brightRed"
         },
         "input:enabled:checked:not([aria-invalid]) + .chakra-checkbox__control": {
-          backgroundColor: "darkTeal",
-          borderColor: "darkTeal"
+          backgroundColor: mode("darkTeal", "blueGreen")(props),
+          borderColor: mode("darkTeal", "blueGreen")(props)
         },
         "input:enabled:checked[aria-invalid] + .chakra-checkbox__control": {
           backgroundColor: "brightRed",
@@ -10901,20 +10903,21 @@ var config9 = helpers4.defineMultiStyleConfig({
       height: 4,
       transitionProperty: "background, border-color",
       transitionDuration: "normal",
-      backgroundColor: "white",
       border: "2px solid",
-      borderColor: "darkTeal",
+      borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
       borderRadius: "xs",
-      color: "white",
+      color: mode("white", "darkTeal")(props),
+      ...baseBackground("default", props),
       _checked: {
-        backgroundColor: "primaryGreen",
-        borderColor: "primaryGreen",
-        color: "white",
+        ...baseBackground("selected", props),
+        borderColor: mode("pine", "coralGreen")(props),
+        ...baseText("default", props),
+        color: mode("white", "darkTeal")(props),
         ...focusVisibleStyles(props),
         _disabled: {
-          backgroundColor: "lightGrey",
-          borderColor: "steel",
-          color: "steel"
+          ...baseBackground("disabled", props),
+          borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
+          color: mode("blackAlpha.200", "whiteAlpha.200")(props)
         },
         _invalid: {
           backgroundColor: "brightRed",
@@ -10922,11 +10925,11 @@ var config9 = helpers4.defineMultiStyleConfig({
         }
       },
       _disabled: {
-        backgroundColor: "lightGrey",
-        borderColor: "steel"
+        ...baseBackground("disabled", props),
+        borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props)
       },
       _invalid: {
-        backgroundColor: "white",
+        ...baseBackground("default", props),
         borderColor: "brightRed"
       }
     },
@@ -12735,11 +12738,12 @@ var config29 = helpers20.defineMultiStyleConfig({
     container: {
       _hover: {
         "input:enabled + .chakra-radio__control": {
-          backgroundColor: "white",
-          borderColor: "primaryGreen"
+          backgroundColor: "inherit",
+          borderColor: mode("darkGrey", "white")(props)
         },
         "input:enabled:checked + .chakra-radio__control": {
-          color: "darkTeal"
+          color: mode("darkTeal", "blueGreen")(props),
+          borderColor: mode("darkTeal", "blueGreen")(props)
         }
       }
     },
@@ -12750,18 +12754,19 @@ var config29 = helpers20.defineMultiStyleConfig({
     control: {
       width: 4,
       height: 4,
-      backgroundColor: "white",
+      backgroundColor: "inherit",
       border: "2px solid",
-      borderColor: "primaryGreen",
+      borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
       borderRadius: "50%",
       ...focusVisibleStyles(props),
       _disabled: {
-        backgroundColor: "lightGrey",
-        borderColor: "steel"
+        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+        borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
+        color: mode("blackAlpha.200", "whiteAlpha.300")(props)
       },
       _checked: {
-        borderColor: "currentColor",
-        color: "primaryGreen",
+        borderColor: mode("pine", "coralGreen")(props),
+        color: mode("pine", "coralGreen")(props),
         _before: {
           content: `""`,
           display: "inline-block",
@@ -12772,8 +12777,9 @@ var config29 = helpers20.defineMultiStyleConfig({
           background: "currentColor"
         },
         _disabled: {
-          backgroundColor: "lightGrey",
-          borderColor: "steel"
+          backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+          borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
+          color: mode("blackAlpha.200", "whiteAlpha.300")(props)
         }
       }
     }

package/dist/index.d.mts

@@ -2791,8 +2791,8 @@ declare const theme: {
                 container: {
                     _hover: {
                         "input:enabled:not([aria-invalid]) + .chakra-checkbox__control": {
-                            backgroundColor: string;
                             borderColor: string;
+                            backgroundColor: string;
                         };
                         "input:enabled[aria-invalid] + .chakra-checkbox__control": {
                             backgroundColor: string;
@@ -2815,20 +2815,11 @@ declare const theme: {
                     strokeWidth: string;
                 };
                 control: {
-                    width: number;
-                    height: number;
-                    transitionProperty: string;
-                    transitionDuration: string;
-                    backgroundColor: string;
-                    border: string;
-                    borderColor: string;
-                    borderRadius: string;
-                    color: string;
                     _checked: {
                         _disabled: {
-                            backgroundColor: string;
                             borderColor: string;
                             color: string;
+                            backgroundColor: string;
                         };
                         _invalid: {
                             backgroundColor: string;
@@ -2840,18 +2831,27 @@ declare const theme: {
                             outlineStyle: string;
                             outlineOffset: string;
                         };
-                        backgroundColor: string;
-                        borderColor: string;
                         color: string;
+                        borderColor: string;
+                        backgroundColor: string;
                     };
                     _disabled: {
-                        backgroundColor: string;
                         borderColor: string;
+                        backgroundColor: string;
                     };
                     _invalid: {
-                        backgroundColor: string;
                         borderColor: string;
+                        backgroundColor: string;
                     };
+                    backgroundColor: string;
+                    width: number;
+                    height: number;
+                    transitionProperty: string;
+                    transitionDuration: string;
+                    border: string;
+                    borderColor: string;
+                    borderRadius: string;
+                    color: string;
                 };
                 label: {
                     userSelect: string;
@@ -4666,6 +4666,7 @@ declare const theme: {
                         };
                         "input:enabled:checked + .chakra-radio__control": {
                             color: string;
+                            borderColor: string;
                         };
                     };
                 };
@@ -4679,6 +4680,7 @@ declare const theme: {
                     _disabled: {
                         backgroundColor: string;
                         borderColor: string;
+                        color: string;
                     };
                     _checked: {
                         borderColor: string;
@@ -4695,6 +4697,7 @@ declare const theme: {
                         _disabled: {
                             backgroundColor: string;
                             borderColor: string;
+                            color: string;
                         };
                     };
                     _focusVisible: {

package/dist/index.d.ts

@@ -2791,8 +2791,8 @@ declare const theme: {
                 container: {
                     _hover: {
                         "input:enabled:not([aria-invalid]) + .chakra-checkbox__control": {
-                            backgroundColor: string;
                             borderColor: string;
+                            backgroundColor: string;
                         };
                         "input:enabled[aria-invalid] + .chakra-checkbox__control": {
                             backgroundColor: string;
@@ -2815,20 +2815,11 @@ declare const theme: {
                     strokeWidth: string;
                 };
                 control: {
-                    width: number;
-                    height: number;
-                    transitionProperty: string;
-                    transitionDuration: string;
-                    backgroundColor: string;
-                    border: string;
-                    borderColor: string;
-                    borderRadius: string;
-                    color: string;
                     _checked: {
                         _disabled: {
-                            backgroundColor: string;
                             borderColor: string;
                             color: string;
+                            backgroundColor: string;
                         };
                         _invalid: {
                             backgroundColor: string;
@@ -2840,18 +2831,27 @@ declare const theme: {
                             outlineStyle: string;
                             outlineOffset: string;
                         };
-                        backgroundColor: string;
-                        borderColor: string;
                         color: string;
+                        borderColor: string;
+                        backgroundColor: string;
                     };
                     _disabled: {
-                        backgroundColor: string;
                         borderColor: string;
+                        backgroundColor: string;
                     };
                     _invalid: {
-                        backgroundColor: string;
                         borderColor: string;
+                        backgroundColor: string;
                     };
+                    backgroundColor: string;
+                    width: number;
+                    height: number;
+                    transitionProperty: string;
+                    transitionDuration: string;
+                    border: string;
+                    borderColor: string;
+                    borderRadius: string;
+                    color: string;
                 };
                 label: {
                     userSelect: string;
@@ -4666,6 +4666,7 @@ declare const theme: {
                         };
                         "input:enabled:checked + .chakra-radio__control": {
                             color: string;
+                            borderColor: string;
                         };
                     };
                 };
@@ -4679,6 +4680,7 @@ declare const theme: {
                     _disabled: {
                         backgroundColor: string;
                         borderColor: string;
+                        color: string;
                     };
                     _checked: {
                         borderColor: string;
@@ -4695,6 +4697,7 @@ declare const theme: {
                         _disabled: {
                             backgroundColor: string;
                             borderColor: string;
+                            color: string;
                         };
                     };
                     _focusVisible: {

package/dist/index.js

@@ -663,6 +663,7 @@ var init_Button = __esm({
     exports.Button = react.forwardRef((props, ref) => {
       const {
         as = "button",
+        type = "button",
         fontWeight,
         size: size2,
         children,
@@ -691,6 +692,7 @@ var init_Button = __esm({
         {
           ...rest,
           as,
+          type,
           sx: { ...styles3, ...sx },
           ref,
           "aria-label": ariaLabel,
@@ -11198,7 +11200,7 @@ function baseBackground(state2, props) {
       };
     case "disabled":
       return {
-        backgroundColor: themeTools.mode("silver", "whiteAlpha.100")(props)
+        backgroundColor: themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props)
       };
     case "hover":
       return {
@@ -12344,22 +12346,24 @@ var init_checkbox = __esm({
   "src/theme/components/checkbox.ts"() {
     init_dist4();
     init_focus_util();
+    init_background_utils();
+    init_text_utils();
     helpers4 = react.createMultiStyleConfigHelpers(checkboxAnatomy.keys);
     config9 = helpers4.defineMultiStyleConfig({
       baseStyle: (props) => ({
         container: {
           _hover: {
             "input:enabled:not([aria-invalid]) + .chakra-checkbox__control": {
-              backgroundColor: "white",
-              borderColor: "primaryGreen"
+              ...baseBackground("hover", props),
+              borderColor: themeTools.mode("darkGrey", "white")(props)
             },
             "input:enabled[aria-invalid] + .chakra-checkbox__control": {
-              backgroundColor: "white",
+              backgroundColor: themeTools.mode("white", "inherit")(props),
               borderColor: "brightRed"
             },
             "input:enabled:checked:not([aria-invalid]) + .chakra-checkbox__control": {
-              backgroundColor: "darkTeal",
-              borderColor: "darkTeal"
+              backgroundColor: themeTools.mode("darkTeal", "blueGreen")(props),
+              borderColor: themeTools.mode("darkTeal", "blueGreen")(props)
             },
             "input:enabled:checked[aria-invalid] + .chakra-checkbox__control": {
               backgroundColor: "brightRed",
@@ -12379,20 +12383,21 @@ var init_checkbox = __esm({
           height: 4,
           transitionProperty: "background, border-color",
           transitionDuration: "normal",
-          backgroundColor: "white",
           border: "2px solid",
-          borderColor: "darkTeal",
+          borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props),
           borderRadius: "xs",
-          color: "white",
+          color: themeTools.mode("white", "darkTeal")(props),
+          ...baseBackground("default", props),
           _checked: {
-            backgroundColor: "primaryGreen",
-            borderColor: "primaryGreen",
-            color: "white",
+            ...baseBackground("selected", props),
+            borderColor: themeTools.mode("pine", "coralGreen")(props),
+            ...baseText("default", props),
+            color: themeTools.mode("white", "darkTeal")(props),
             ...focusVisibleStyles(props),
             _disabled: {
-              backgroundColor: "lightGrey",
-              borderColor: "steel",
-              color: "steel"
+              ...baseBackground("disabled", props),
+              borderColor: themeTools.mode("blackAlpha.200", "whiteAlpha.200")(props),
+              color: themeTools.mode("blackAlpha.200", "whiteAlpha.200")(props)
             },
             _invalid: {
               backgroundColor: "brightRed",
@@ -12400,11 +12405,11 @@ var init_checkbox = __esm({
             }
           },
           _disabled: {
-            backgroundColor: "lightGrey",
-            borderColor: "steel"
+            ...baseBackground("disabled", props),
+            borderColor: themeTools.mode("blackAlpha.200", "whiteAlpha.200")(props)
           },
           _invalid: {
-            backgroundColor: "white",
+            ...baseBackground("default", props),
             borderColor: "brightRed"
           }
         },
@@ -14362,11 +14367,12 @@ var init_radio = __esm({
         container: {
           _hover: {
             "input:enabled + .chakra-radio__control": {
-              backgroundColor: "white",
-              borderColor: "primaryGreen"
+              backgroundColor: "inherit",
+              borderColor: themeTools.mode("darkGrey", "white")(props)
             },
             "input:enabled:checked + .chakra-radio__control": {
-              color: "darkTeal"
+              color: themeTools.mode("darkTeal", "blueGreen")(props),
+              borderColor: themeTools.mode("darkTeal", "blueGreen")(props)
             }
           }
         },
@@ -14377,18 +14383,19 @@ var init_radio = __esm({
         control: {
           width: 4,
           height: 4,
-          backgroundColor: "white",
+          backgroundColor: "inherit",
           border: "2px solid",
-          borderColor: "primaryGreen",
+          borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props),
           borderRadius: "50%",
           ...focusVisibleStyles(props),
           _disabled: {
-            backgroundColor: "lightGrey",
-            borderColor: "steel"
+            backgroundColor: themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props),
+            borderColor: themeTools.mode("blackAlpha.200", "whiteAlpha.200")(props),
+            color: themeTools.mode("blackAlpha.200", "whiteAlpha.300")(props)
           },
           _checked: {
-            borderColor: "currentColor",
-            color: "primaryGreen",
+            borderColor: themeTools.mode("pine", "coralGreen")(props),
+            color: themeTools.mode("pine", "coralGreen")(props),
             _before: {
               content: `""`,
               display: "inline-block",
@@ -14399,8 +14406,9 @@ var init_radio = __esm({
               background: "currentColor"
             },
             _disabled: {
-              backgroundColor: "lightGrey",
-              borderColor: "steel"
+              backgroundColor: themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props),
+              borderColor: themeTools.mode("blackAlpha.200", "whiteAlpha.200")(props),
+              color: themeTools.mode("blackAlpha.200", "whiteAlpha.300")(props)
             }
           }
         }

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, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, 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, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-D4IHIS3H.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, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, 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, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-AKOJGLTQ.mjs';

package/package.json

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

package/src/button/Button.tsx

@@ -65,6 +65,7 @@ export type ButtonProps = Exclude<
 export const Button = forwardRef<ButtonProps, "button">((props, ref) => {
   const {
     as = "button",
+    type = "button",
     fontWeight,
     size,
     children,
@@ -97,6 +98,7 @@ export const Button = forwardRef<ButtonProps, "button">((props, ref) => {
     <Box
       {...rest}
       as={as}
+      type={type}
       sx={{ ...styles, ...sx }}
       ref={ref}
       aria-label={ariaLabel}

package/src/theme/components/checkbox.ts

@@ -1,6 +1,9 @@
 import { checkboxAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { focusVisibleStyles } from "../utils/focus-util";
+import { mode } from "@chakra-ui/theme-tools";
+import { baseBackground } from "../utils/background-utils";
+import { baseText } from "../utils/text-utils";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
@@ -9,17 +12,17 @@ const config = helpers.defineMultiStyleConfig({
     container: {
       _hover: {
         "input:enabled:not([aria-invalid]) + .chakra-checkbox__control": {
-          backgroundColor: "white",
-          borderColor: "primaryGreen",
+          ...baseBackground("hover", props),
+          borderColor: mode("darkGrey", "white")(props),
         },
         "input:enabled[aria-invalid] + .chakra-checkbox__control": {
-          backgroundColor: "white",
+          backgroundColor: mode("white", "inherit")(props),
           borderColor: "brightRed",
         },
         "input:enabled:checked:not([aria-invalid]) + .chakra-checkbox__control":
           {
-            backgroundColor: "darkTeal",
-            borderColor: "darkTeal",
+            backgroundColor: mode("darkTeal", "blueGreen")(props),
+            borderColor: mode("darkTeal", "blueGreen")(props),
           },
         "input:enabled:checked[aria-invalid] + .chakra-checkbox__control": {
           backgroundColor: "brightRed",
@@ -38,23 +41,24 @@ const config = helpers.defineMultiStyleConfig({
       height: 4,
       transitionProperty: "background, border-color",
       transitionDuration: "normal",
-      backgroundColor: "white",
       border: "2px solid",
-      borderColor: "darkTeal",
+      borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
       borderRadius: "xs",
-      color: "white",
+      color: mode("white", "darkTeal")(props),
+      ...baseBackground("default", props),
 
       _checked: {
-        backgroundColor: "primaryGreen",
-        borderColor: "primaryGreen",
-        color: "white",
+        ...baseBackground("selected", props),
+        borderColor: mode("pine", "coralGreen")(props),
+        ...baseText("default", props),
+        color: mode("white", "darkTeal")(props),
 
         ...focusVisibleStyles(props),
 
         _disabled: {
-          backgroundColor: "lightGrey",
-          borderColor: "steel",
-          color: "steel",
+          ...baseBackground("disabled", props),
+          borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
+          color: mode("blackAlpha.200", "whiteAlpha.200")(props),
         },
 
         _invalid: {
@@ -64,11 +68,11 @@ const config = helpers.defineMultiStyleConfig({
       },
 
       _disabled: {
-        backgroundColor: "lightGrey",
-        borderColor: "steel",
+        ...baseBackground("disabled", props),
+        borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
       },
       _invalid: {
-        backgroundColor: "white",
+        ...baseBackground("default", props),
         borderColor: "brightRed",
       },
     },

package/src/theme/components/radio.ts

@@ -1,6 +1,7 @@
 import { radioAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { focusVisibleStyles } from "../utils/focus-util";
+import { mode } from "@chakra-ui/theme-tools";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
@@ -9,11 +10,12 @@ const config = helpers.defineMultiStyleConfig({
     container: {
       _hover: {
         "input:enabled + .chakra-radio__control": {
-          backgroundColor: "white",
-          borderColor: "primaryGreen",
+          backgroundColor: "inherit",
+          borderColor: mode("darkGrey", "white")(props),
         },
         "input:enabled:checked + .chakra-radio__control": {
-          color: "darkTeal",
+          color: mode("darkTeal", "blueGreen")(props),
+          borderColor: mode("darkTeal", "blueGreen")(props),
         },
       },
     },
@@ -24,20 +26,21 @@ const config = helpers.defineMultiStyleConfig({
     control: {
       width: 4,
       height: 4,
-      backgroundColor: "white",
+      backgroundColor: "inherit",
       border: "2px solid",
-      borderColor: "primaryGreen",
+      borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
       borderRadius: "50%",
 
       ...focusVisibleStyles(props),
 
       _disabled: {
-        backgroundColor: "lightGrey",
-        borderColor: "steel",
+        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+        borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
+        color: mode("blackAlpha.200", "whiteAlpha.300")(props),
       },
       _checked: {
-        borderColor: "currentColor",
-        color: "primaryGreen",
+        borderColor: mode("pine", "coralGreen")(props),
+        color: mode("pine", "coralGreen")(props),
         _before: {
           content: `""`,
           display: "inline-block",
@@ -48,8 +51,9 @@ const config = helpers.defineMultiStyleConfig({
           background: "currentColor",
         },
         _disabled: {
-          backgroundColor: "lightGrey",
-          borderColor: "steel",
+          backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+          borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
+          color: mode("blackAlpha.200", "whiteAlpha.300")(props),
         },
       },
     },

package/src/theme/utils/background-utils.ts

@@ -21,7 +21,7 @@ export function baseBackground(
       };
     case "disabled":
       return {
-        backgroundColor: mode("silver", "whiteAlpha.100")(props),
+        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
       };
     case "hover":
       return {