@vygruppen/spor-react 8.2.0 → 8.3.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@8.2.0 build
+> @vygruppen/spor-react@8.3.0 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-42ZK3WXN.mjs".
+CJS dist/index.js 504.82 KB
+CJS ⚡️ Build success in 2190ms
 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-DYAFPSID.mjs 1.19 KB
+ESM dist/chunk-42ZK3WXN.mjs             396.72 KB
+ESM ⚡️ Build success in 2192ms
+DTS ⚡️ Build success in 10757ms
+DTS dist/index.d.ts  271.82 KB
+DTS dist/index.d.mts 271.82 KB

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @vygruppen/spor-react
 
+## 8.3.0
+
+### Minor Changes
+
+- f984752: Expandable: Add defaultOpen, isOpen and onChange props, and remove undocumented defaultIndex and index props.
+
+  This might be breaking if you were using these props, so make sure to double check while updating.
+
+## 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-DYAFPSID.mjs}

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

package/dist/{chunk-D4IHIS3H.mjs → chunk-42ZK3WXN.mjs}

@@ -814,17 +814,32 @@ var Expandable = ({
   title,
   leftIcon,
   size: size2 = "md",
+  defaultOpen,
+  isOpen,
+  onChange = () => {
+  },
   ...rest
 }) => {
-  return /* @__PURE__ */ React69__default.createElement(Accordion, { ...rest, size: size2 }, /* @__PURE__ */ React69__default.createElement(
-    ExpandableItem,
+  return /* @__PURE__ */ React69__default.createElement(
+    Accordion,
     {
-      headingLevel,
-      title,
-      leftIcon
+      ...rest,
+      index: isOpen ? 0 : void 0,
+      defaultIndex: defaultOpen ? 0 : void 0,
+      allowMultiple: true,
+      size: size2,
+      onChange: (expandedIndex) => onChange(expandedIndex === 0)
     },
-    children
-  ));
+    /* @__PURE__ */ React69__default.createElement(
+      ExpandableItem,
+      {
+        headingLevel,
+        title,
+        leftIcon
+      },
+      children
+    )
+  );
 };
 var ExpandableItem = ({
   children,
@@ -1163,6 +1178,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 +1207,7 @@ var Button = forwardRef((props, ref) => {
     {
       ...rest,
       as,
+      type,
       sx: { ...styles3, ...sx },
       ref,
       "aria-label": ariaLabel,
@@ -3433,7 +3450,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-POM47KR5.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-DYAFPSID.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -9802,7 +9819,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 +10889,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 +10918,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 +10940,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 +12753,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 +12769,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 +12792,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

@@ -81,7 +81,7 @@ type AccordionProps = Omit<AccordionProps$1, "variant" | "size"> & {
 declare const Accordion: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", AccordionProps>;
 
 type HeadingLevel = "h2" | "h3" | "h4" | "h5" | "h6";
-type ExpandableProps = Omit<AccordionProps, "title"> & {
+type ExpandableProps = Omit<AccordionProps, "title" | "index" | "defaultIndex" | "onChange"> & {
     /** The hidden content */
     children: React.ReactNode;
     /** The title that's shown inside the toggle button */
@@ -97,6 +97,12 @@ type ExpandableProps = Omit<AccordionProps, "title"> & {
      * If the size is set to `lg`, the icon should be 30px.
      */
     leftIcon?: React.ReactNode;
+    /** Controlled value of whether the accordion is open or not */
+    isOpen?: boolean;
+    /** Default value of when the accordion is open or not */
+    defaultOpen?: boolean;
+    /** Callback for when the expandable opens or closes */
+    onChange?: (isOpen: boolean) => void;
 };
 /**
  * A standalone expandable component.
@@ -110,7 +116,7 @@ type ExpandableProps = Omit<AccordionProps, "title"> & {
  * </Expandable>
  * ```
  */
-declare const Expandable: ({ children, headingLevel, title, leftIcon, size, ...rest }: ExpandableProps) => React.JSX.Element;
+declare const Expandable: ({ children, headingLevel, title, leftIcon, size, defaultOpen, isOpen, onChange, ...rest }: ExpandableProps) => React.JSX.Element;
 type ExpandableItemProps = Omit<AccordionItemProps, "title"> & {
     /** The hidden content */
     children: React.ReactNode;
@@ -2791,8 +2797,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 +2821,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 +2837,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 +4672,7 @@ declare const theme: {
                         };
                         "input:enabled:checked + .chakra-radio__control": {
                             color: string;
+                            borderColor: string;
                         };
                     };
                 };
@@ -4679,6 +4686,7 @@ declare const theme: {
                     _disabled: {
                         backgroundColor: string;
                         borderColor: string;
+                        color: string;
                     };
                     _checked: {
                         borderColor: string;
@@ -4695,6 +4703,7 @@ declare const theme: {
                         _disabled: {
                             backgroundColor: string;
                             borderColor: string;
+                            color: string;
                         };
                     };
                     _focusVisible: {

package/dist/index.d.ts

@@ -81,7 +81,7 @@ type AccordionProps = Omit<AccordionProps$1, "variant" | "size"> & {
 declare const Accordion: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", AccordionProps>;
 
 type HeadingLevel = "h2" | "h3" | "h4" | "h5" | "h6";
-type ExpandableProps = Omit<AccordionProps, "title"> & {
+type ExpandableProps = Omit<AccordionProps, "title" | "index" | "defaultIndex" | "onChange"> & {
     /** The hidden content */
     children: React.ReactNode;
     /** The title that's shown inside the toggle button */
@@ -97,6 +97,12 @@ type ExpandableProps = Omit<AccordionProps, "title"> & {
      * If the size is set to `lg`, the icon should be 30px.
      */
     leftIcon?: React.ReactNode;
+    /** Controlled value of whether the accordion is open or not */
+    isOpen?: boolean;
+    /** Default value of when the accordion is open or not */
+    defaultOpen?: boolean;
+    /** Callback for when the expandable opens or closes */
+    onChange?: (isOpen: boolean) => void;
 };
 /**
  * A standalone expandable component.
@@ -110,7 +116,7 @@ type ExpandableProps = Omit<AccordionProps, "title"> & {
  * </Expandable>
  * ```
  */
-declare const Expandable: ({ children, headingLevel, title, leftIcon, size, ...rest }: ExpandableProps) => React.JSX.Element;
+declare const Expandable: ({ children, headingLevel, title, leftIcon, size, defaultOpen, isOpen, onChange, ...rest }: ExpandableProps) => React.JSX.Element;
 type ExpandableItemProps = Omit<AccordionItemProps, "title"> & {
     /** The hidden content */
     children: React.ReactNode;
@@ -2791,8 +2797,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 +2821,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 +2837,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 +4672,7 @@ declare const theme: {
                         };
                         "input:enabled:checked + .chakra-radio__control": {
                             color: string;
+                            borderColor: string;
                         };
                     };
                 };
@@ -4679,6 +4686,7 @@ declare const theme: {
                     _disabled: {
                         backgroundColor: string;
                         borderColor: string;
+                        color: string;
                     };
                     _checked: {
                         borderColor: string;
@@ -4695,6 +4703,7 @@ declare const theme: {
                         _disabled: {
                             backgroundColor: string;
                             borderColor: string;
+                            color: string;
                         };
                     };
                     _focusVisible: {

package/dist/index.js

@@ -149,17 +149,32 @@ var init_Expandable = __esm({
       title,
       leftIcon,
       size: size2 = "md",
+      defaultOpen,
+      isOpen,
+      onChange = () => {
+      },
       ...rest
     }) => {
-      return /* @__PURE__ */ React69__namespace.default.createElement(exports.Accordion, { ...rest, size: size2 }, /* @__PURE__ */ React69__namespace.default.createElement(
-        exports.ExpandableItem,
+      return /* @__PURE__ */ React69__namespace.default.createElement(
+        exports.Accordion,
         {
-          headingLevel,
-          title,
-          leftIcon
+          ...rest,
+          index: isOpen ? 0 : void 0,
+          defaultIndex: defaultOpen ? 0 : void 0,
+          allowMultiple: true,
+          size: size2,
+          onChange: (expandedIndex) => onChange(expandedIndex === 0)
         },
-        children
-      ));
+        /* @__PURE__ */ React69__namespace.default.createElement(
+          exports.ExpandableItem,
+          {
+            headingLevel,
+            title,
+            leftIcon
+          },
+          children
+        )
+      );
     };
     exports.ExpandableItem = ({
       children,
@@ -663,6 +678,7 @@ var init_Button = __esm({
     exports.Button = react.forwardRef((props, ref) => {
       const {
         as = "button",
+        type = "button",
         fontWeight,
         size: size2,
         children,
@@ -691,6 +707,7 @@ var init_Button = __esm({
         {
           ...rest,
           as,
+          type,
           sx: { ...styles3, ...sx },
           ref,
           "aria-label": ariaLabel,
@@ -11198,7 +11215,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 +12361,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 +12398,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 +12420,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 +14382,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 +14398,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 +14421,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-42ZK3WXN.mjs';

package/package.json

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

package/src/accordion/Expandable.tsx

@@ -12,7 +12,10 @@ import { Accordion, AccordionProps } from "./Accordion";
 import { useAccordionContext } from "./AccordionContext";
 
 type HeadingLevel = "h2" | "h3" | "h4" | "h5" | "h6";
-type ExpandableProps = Omit<AccordionProps, "title"> & {
+type ExpandableProps = Omit<
+  AccordionProps,
+  "title" | "index" | "defaultIndex" | "onChange"
+> & {
   /** The hidden content */
   children: React.ReactNode;
   /** The title that's shown inside the toggle button */
@@ -28,6 +31,13 @@ type ExpandableProps = Omit<AccordionProps, "title"> & {
    * If the size is set to `lg`, the icon should be 30px.
    */
   leftIcon?: React.ReactNode;
+
+  /** Controlled value of whether the accordion is open or not */
+  isOpen?: boolean;
+  /** Default value of when the accordion is open or not */
+  defaultOpen?: boolean;
+  /** Callback for when the expandable opens or closes */
+  onChange?: (isOpen: boolean) => void;
 };
 /**
  * A standalone expandable component.
@@ -47,10 +57,20 @@ export const Expandable = ({
   title,
   leftIcon,
   size = "md",
+  defaultOpen,
+  isOpen,
+  onChange = () => {},
   ...rest
 }: ExpandableProps) => {
   return (
-    <Accordion {...rest} size={size}>
+    <Accordion
+      {...rest}
+      index={isOpen ? 0 : undefined}
+      defaultIndex={defaultOpen ? 0 : undefined}
+      allowMultiple={true}
+      size={size}
+      onChange={(expandedIndex) => onChange(expandedIndex === 0)}
+    >
       <ExpandableItem
         headingLevel={headingLevel}
         title={title}

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 {