@vygruppen/spor-react 3.7.1 → 3.7.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@3.7.1 build
+> @vygruppen/spor-react@3.7.3 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,14 +9,14 @@
 CJS Build start
 ESM Build start
 DTS Build start
-"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-IP63HI2Y.mjs".
 "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
 ESM dist/index.mjs                      2.09 KB
-ESM dist/CountryCodeSelect-3P7RFAM2.mjs 1.19 KB
-ESM dist/chunk-IP63HI2Y.mjs             426.15 KB
-ESM ⚡️ Build success in 3846ms
-CJS dist/index.js 533.19 KB
-CJS ⚡️ Build success in 3846ms
-DTS ⚡️ Build success in 17440ms
-DTS dist/index.d.ts  254.47 KB
-DTS dist/index.d.mts 254.47 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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @vygruppen/spor-react
 
+## 3.7.3
+
+### Patch Changes
+
+- 05f55861: Updated styles for TextLink, and added dark mode support.
+  Variant `tertiary` is now deprecated as we are updating our visual structure
+  with a more minimalistic selection; please use `secondary` instead.
+- 6cef81ca: Add font family to list and accordion button
+
+## 3.7.2
+
+### Patch Changes
+
+- 0e5ef35c: Adjust active color on Ghost-btn and add dark mode to Floating-btn
+- bd1c6655: Added missing colors for Input in darkmode
+- Updated dependencies [88d6fc75]
+  - @vygruppen/spor-icon-react@3.3.0
+
 ## 3.7.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-3P7RFAM2.mjs → CountryCodeSelect-WGNXQHWO.mjs}

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

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

@@ -5083,7 +5083,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React50__default.lazy(() => import('./CountryCodeSelect-3P7RFAM2.mjs'));
+var LazyCountryCodeSelect = React50__default.lazy(() => import('./CountryCodeSelect-WGNXQHWO.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React50__default.createElement(Radio$1, { ...props, ref });
 });
@@ -10806,6 +10806,7 @@ __export(components_exports, {
   Input: () => input_default,
   LineIcon: () => line_icon_default,
   Link: () => link_default,
+  List: () => list_default,
   ListBox: () => listbox_default,
   MediaControllerButton: () => media_controller_button_default,
   Modal: () => modal_default,
@@ -11073,6 +11074,7 @@ var config3 = helpers.defineMultiStyleConfig({
       justifyContent: "space-between",
       color: "darkGrey",
       textAlign: "left",
+      fontFamily: "body",
       fontWeight: "bold",
       ...focusVisible({
         notFocus: {
@@ -11502,7 +11504,7 @@ var config6 = defineStyleConfig$1({
           colors.blackAlpha[400],
           colors.whiteAlpha[300]
         )(props)}`,
-        backgroundColor: mode("mint", "whiteAlpha.300")(props)
+        backgroundColor: mode("mint", "whiteAlpha.200")(props)
       }
     }),
     ghost: (props) => ({
@@ -11527,28 +11529,36 @@ var config6 = defineStyleConfig$1({
         }
       },
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.300")(props)
+        backgroundColor: mode("mint", "whiteAlpha.200")(props)
       }
     }),
-    floating: {
-      backgroundColor: "white",
-      boxShadow: "sm",
+    floating: (props) => ({
+      backgroundColor: mode("white", "whiteAlpha.100")(props),
+      boxShadow: getBoxShadowString({
+        borderColor: mode("grey.200", "whiteAlpha.400")(props),
+        baseShadow: "sm"
+      }),
       _active: {
-        backgroundColor: "mint"
+        backgroundColor: mode("mint", "whiteAlpha.300")(props)
       },
       _hover: {
-        boxShadow: "md"
+        backgroundColor: mode("white", "whiteAlpha.200")(props),
+        boxShadow: getBoxShadowString({
+          borderColor: mode("grey.300", "white")(props),
+          baseShadow: "md",
+          borderWidth: 2
+        })
       },
       ...focusVisible({
         focus: {
           boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
+            borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2,
             baseShadow: "sm"
           }),
           _hover: {
             boxShadow: getBoxShadowString({
-              borderColor: "greenHaze",
+              borderColor: mode("greenHaze", "azure")(props),
               borderWidth: 2,
               baseShadow: "md"
             })
@@ -11559,7 +11569,7 @@ var config6 = defineStyleConfig$1({
           boxShadow: "sm"
         }
       })
-    }
+    })
   },
   sizes: {
     lg: {
@@ -12999,16 +13009,22 @@ var config21 = helpers13.defineMultiStyleConfig({
       boxShadow: getBoxShadowString({
         borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
       }),
+      _active: {
+        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
+        })
+      },
       _hover: {
         boxShadow: getBoxShadowString({
-          borderColor: mode("darkGrey", "whiteAlpha.600")(props),
+          borderColor: mode("darkGrey", "white")(props),
           borderWidth: 2
         })
       },
       ...focusVisible({
         focus: {
           boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
+            borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2
           })
         },
@@ -13035,7 +13051,7 @@ var config21 = helpers13.defineMultiStyleConfig({
         ...focusVisible({
           focus: {
             boxShadow: getBoxShadowString({
-              borderColor: "greenHaze",
+              borderColor: mode("greenHaze", "azure")(props),
               borderWidth: 2
             })
           },
@@ -13217,80 +13233,79 @@ var config23 = defineStyleConfig$1({
     }
   },
   variants: {
-    primary: {
-      color: "pine",
+    primary: (props) => ({
+      color: mode("pine", "seaMist")(props),
       ...focusVisible({
         focus: {
-          color: "white",
-          backgroundColor: "pine",
+          backgroundColor: "transparent",
           boxShadow: getBoxShadowString({
-            borderColor: "pine",
-            borderWidth: 3,
+            borderColor: "azure",
+            borderWidth: 2,
             isInset: false
           })
         },
         notFocus: {
           color: "pine",
-          boxShadow: "none",
-          backgroundColor: "transparent"
+          backgroundColor: "transparent",
+          boxShadow: "none"
         }
       }),
       _hover: {
-        backgroundColor: "coralGreen",
-        color: "darkTeal",
+        color: "white",
+        backgroundColor: "pine",
         boxShadow: getBoxShadowString({
-          borderColor: "coralGreen",
-          borderWidth: 3,
+          borderColor: "pine",
+          borderWidth: 2,
           isInset: false
         })
       },
       _active: {
-        backgroundColor: "mint",
+        color: "white",
+        backgroundColor: "azure",
         boxShadow: getBoxShadowString({
-          borderColor: "mint",
-          borderWidth: 3,
+          borderColor: "azure",
+          borderWidth: 2,
           isInset: false
-        }),
-        color: "pine"
+        })
       }
-    },
+    }),
     secondary: (props) => ({
-      color: "darkGrey",
+      color: mode("darkGrey", "white")(props),
       ...focusVisible({
         focus: {
-          color: "white",
-          backgroundColor: "darkGrey",
+          backgroundColor: "transparent",
           boxShadow: getBoxShadowString({
-            borderColor: "darkGrey",
-            borderWidth: 3,
+            borderColor: "azure",
+            borderWidth: 2,
             isInset: false
           })
         },
         notFocus: {
-          color: "darkGrey",
           boxShadow: "none",
           backgroundColor: "transparent"
         }
       }),
       _hover: {
-        color: "darkGrey",
-        backgroundColor: "blackAlpha.100",
+        backgroundColor: mode("seaMist", "pine")(props),
         boxShadow: getBoxShadowString({
-          borderColor: props.theme.colors.blackAlpha[100],
-          borderWidth: 3,
+          borderColor: mode("seaMist", "pine")(props),
+          borderWidth: 2,
           isInset: false
         })
       },
       _active: {
-        color: "darkTeal",
-        backgroundColor: "mint",
+        backgroundColor: mode("mint", "whiteAlpha.200")(props),
         boxShadow: getBoxShadowString({
-          borderColor: "mint",
-          borderWidth: 3,
+          borderColor: mode("mint", "whiteAlpha.200")(props),
+          borderWidth: 2,
           isInset: false
         })
       }
     }),
+    /**
+     * @deprecated tertiary style will be deprecated in the future.
+     * Please use the secondary style instead.
+     */
     tertiary: (props) => ({
       color: "white",
       ...focusVisible({
@@ -13334,6 +13349,21 @@ var config23 = defineStyleConfig$1({
   }
 });
 var link_default = config23;
+
+// src/theme/components/list.ts
+var { defineMultiStyleConfig: defineMultiStyleConfig28, definePartsStyle: definePartsStyle28 } = createMultiStyleConfigHelpers(listAnatomy.keys);
+var baseStyleIcon8 = defineStyle({
+  marginEnd: "2",
+  display: "inline",
+  verticalAlign: "text-bottom",
+  fontFamily: "body"
+});
+var baseStyle45 = definePartsStyle28({
+  icon: baseStyleIcon8
+});
+var list_default = defineMultiStyleConfig28({
+  baseStyle: baseStyle45
+});
 var parts10 = anatomy("ListBox").parts(
   "container",
   "item",

package/dist/index.d.mts

@@ -1412,7 +1412,9 @@ type TravelTagProps = TagProps & BoxProps & {
 declare const TravelTag: _chakra_ui_system_dist_system_types.ComponentWithAs<As, TravelTagProps>;
 
 type LinkProps = Omit<LinkProps$1, "variant"> & {
-    variant?: "primary" | "secondary" | "tertiary";
+    variant?: "primary" | "secondary"
+    /** @deprecated Use `secondary` instead */
+     | "tertiary";
 };
 /** Link to different sites or parts of site
  *
@@ -1982,6 +1984,7 @@ declare const theme: {
                     justifyContent: string;
                     color: string;
                     textAlign: string;
+                    fontFamily: string;
                     fontWeight: string;
                 };
                 panel: {
@@ -2353,7 +2356,7 @@ declare const theme: {
                     color: string;
                     fontWeight: string;
                 };
-                floating: {
+                floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _focus: _chakra_ui_styled_system.SystemStyleObject;
                     _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
                     "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
@@ -2363,6 +2366,7 @@ declare const theme: {
                         backgroundColor: string;
                     };
                     _hover: {
+                        backgroundColor: string;
                         boxShadow: string;
                     };
                 };
@@ -3565,6 +3569,10 @@ declare const theme: {
                     height: string;
                     fontSize: string;
                     boxShadow: string;
+                    _active: {
+                        backgroundColor: string;
+                        boxShadow: string;
+                    };
                     _hover: {
                         boxShadow: string;
                     };
@@ -3739,16 +3747,16 @@ declare const theme: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
             } | undefined;
             variants?: {
-                primary: {
+                primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _hover: {
-                        backgroundColor: string;
                         color: string;
+                        backgroundColor: string;
                         boxShadow: string;
                     };
                     _active: {
+                        color: string;
                         backgroundColor: string;
                         boxShadow: string;
-                        color: string;
                     };
                     _focus: _chakra_ui_styled_system.SystemStyleObject;
                     _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
@@ -3757,12 +3765,10 @@ declare const theme: {
                 };
                 secondary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _hover: {
-                        color: string;
                         backgroundColor: string;
                         boxShadow: string;
                     };
                     _active: {
-                        color: string;
                         backgroundColor: string;
                         boxShadow: string;
                     };
@@ -3794,6 +3800,32 @@ declare const theme: {
                 colorScheme?: string | undefined;
             } | undefined;
         };
+        List: {
+            baseStyle?: {
+                icon: {
+                    marginEnd: string;
+                    display: string;
+                    verticalAlign: string;
+                    fontFamily: string;
+                };
+            } | undefined;
+            sizes?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: ("container" | "icon" | "item")[];
+                }>;
+            } | undefined;
+            variants?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: ("container" | "icon" | "item")[];
+                }>;
+            } | undefined;
+            defaultProps?: {
+                size?: string | number | undefined;
+                variant?: string | number | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+            parts: ("container" | "icon" | "item")[];
+        };
         ListBox: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 container: {
@@ -4229,6 +4261,10 @@ declare const theme: {
                     height: string;
                     fontSize: string;
                     boxShadow: string;
+                    _active: {
+                        backgroundColor: string;
+                        boxShadow: string;
+                    };
                     _hover: {
                         boxShadow: string;
                     };
@@ -5012,6 +5048,10 @@ declare const theme: {
                 height: string;
                 fontSize: string;
                 boxShadow: string;
+                _active: {
+                    backgroundColor: string;
+                    boxShadow: string;
+                };
                 _hover: {
                     boxShadow: string;
                 };
@@ -5676,31 +5716,6 @@ declare const theme: {
                 colorScheme?: string | undefined;
             } | undefined;
         };
-        List: {
-            baseStyle?: {
-                icon: {
-                    marginEnd: string;
-                    display: string;
-                    verticalAlign: string;
-                };
-            } | undefined;
-            sizes?: {
-                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("container" | "icon" | "item")[];
-                }>;
-            } | undefined;
-            variants?: {
-                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("container" | "icon" | "item")[];
-                }>;
-            } | undefined;
-            defaultProps?: {
-                size?: string | number | undefined;
-                variant?: string | number | undefined;
-                colorScheme?: string | undefined;
-            } | undefined;
-            parts: ("container" | "icon" | "item")[];
-        };
         Menu: {
             baseStyle?: {
                 button: {

package/dist/index.d.ts

@@ -1412,7 +1412,9 @@ type TravelTagProps = TagProps & BoxProps & {
 declare const TravelTag: _chakra_ui_system_dist_system_types.ComponentWithAs<As, TravelTagProps>;
 
 type LinkProps = Omit<LinkProps$1, "variant"> & {
-    variant?: "primary" | "secondary" | "tertiary";
+    variant?: "primary" | "secondary"
+    /** @deprecated Use `secondary` instead */
+     | "tertiary";
 };
 /** Link to different sites or parts of site
  *
@@ -1982,6 +1984,7 @@ declare const theme: {
                     justifyContent: string;
                     color: string;
                     textAlign: string;
+                    fontFamily: string;
                     fontWeight: string;
                 };
                 panel: {
@@ -2353,7 +2356,7 @@ declare const theme: {
                     color: string;
                     fontWeight: string;
                 };
-                floating: {
+                floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _focus: _chakra_ui_styled_system.SystemStyleObject;
                     _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
                     "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
@@ -2363,6 +2366,7 @@ declare const theme: {
                         backgroundColor: string;
                     };
                     _hover: {
+                        backgroundColor: string;
                         boxShadow: string;
                     };
                 };
@@ -3565,6 +3569,10 @@ declare const theme: {
                     height: string;
                     fontSize: string;
                     boxShadow: string;
+                    _active: {
+                        backgroundColor: string;
+                        boxShadow: string;
+                    };
                     _hover: {
                         boxShadow: string;
                     };
@@ -3739,16 +3747,16 @@ declare const theme: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
             } | undefined;
             variants?: {
-                primary: {
+                primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _hover: {
-                        backgroundColor: string;
                         color: string;
+                        backgroundColor: string;
                         boxShadow: string;
                     };
                     _active: {
+                        color: string;
                         backgroundColor: string;
                         boxShadow: string;
-                        color: string;
                     };
                     _focus: _chakra_ui_styled_system.SystemStyleObject;
                     _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
@@ -3757,12 +3765,10 @@ declare const theme: {
                 };
                 secondary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _hover: {
-                        color: string;
                         backgroundColor: string;
                         boxShadow: string;
                     };
                     _active: {
-                        color: string;
                         backgroundColor: string;
                         boxShadow: string;
                     };
@@ -3794,6 +3800,32 @@ declare const theme: {
                 colorScheme?: string | undefined;
             } | undefined;
         };
+        List: {
+            baseStyle?: {
+                icon: {
+                    marginEnd: string;
+                    display: string;
+                    verticalAlign: string;
+                    fontFamily: string;
+                };
+            } | undefined;
+            sizes?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: ("container" | "icon" | "item")[];
+                }>;
+            } | undefined;
+            variants?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: ("container" | "icon" | "item")[];
+                }>;
+            } | undefined;
+            defaultProps?: {
+                size?: string | number | undefined;
+                variant?: string | number | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+            parts: ("container" | "icon" | "item")[];
+        };
         ListBox: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 container: {
@@ -4229,6 +4261,10 @@ declare const theme: {
                     height: string;
                     fontSize: string;
                     boxShadow: string;
+                    _active: {
+                        backgroundColor: string;
+                        boxShadow: string;
+                    };
                     _hover: {
                         boxShadow: string;
                     };
@@ -5012,6 +5048,10 @@ declare const theme: {
                 height: string;
                 fontSize: string;
                 boxShadow: string;
+                _active: {
+                    backgroundColor: string;
+                    boxShadow: string;
+                };
                 _hover: {
                     boxShadow: string;
                 };
@@ -5676,31 +5716,6 @@ declare const theme: {
                 colorScheme?: string | undefined;
             } | undefined;
         };
-        List: {
-            baseStyle?: {
-                icon: {
-                    marginEnd: string;
-                    display: string;
-                    verticalAlign: string;
-                };
-            } | undefined;
-            sizes?: {
-                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("container" | "icon" | "item")[];
-                }>;
-            } | undefined;
-            variants?: {
-                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("container" | "icon" | "item")[];
-                }>;
-            } | undefined;
-            defaultProps?: {
-                size?: string | number | undefined;
-                variant?: string | number | undefined;
-                colorScheme?: string | undefined;
-            } | undefined;
-            parts: ("container" | "icon" | "item")[];
-        };
         Menu: {
             baseStyle?: {
                 button: {

package/dist/index.js

@@ -12560,6 +12560,7 @@ var init_accordion2 = __esm({
           justifyContent: "space-between",
           color: "darkGrey",
           textAlign: "left",
+          fontFamily: "body",
           fontWeight: "bold",
           ...focusVisible({
             notFocus: {
@@ -13017,7 +13018,7 @@ var init_button2 = __esm({
               colors.blackAlpha[400],
               colors.whiteAlpha[300]
             )(props)}`,
-            backgroundColor: themeTools.mode("mint", "whiteAlpha.300")(props)
+            backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props)
           }
         }),
         ghost: (props) => ({
@@ -13042,28 +13043,36 @@ var init_button2 = __esm({
             }
           },
           _active: {
-            backgroundColor: themeTools.mode("mint", "whiteAlpha.300")(props)
+            backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props)
           }
         }),
-        floating: {
-          backgroundColor: "white",
-          boxShadow: "sm",
+        floating: (props) => ({
+          backgroundColor: themeTools.mode("white", "whiteAlpha.100")(props),
+          boxShadow: getBoxShadowString({
+            borderColor: themeTools.mode("grey.200", "whiteAlpha.400")(props),
+            baseShadow: "sm"
+          }),
           _active: {
-            backgroundColor: "mint"
+            backgroundColor: themeTools.mode("mint", "whiteAlpha.300")(props)
           },
           _hover: {
-            boxShadow: "md"
+            backgroundColor: themeTools.mode("white", "whiteAlpha.200")(props),
+            boxShadow: getBoxShadowString({
+              borderColor: themeTools.mode("grey.300", "white")(props),
+              baseShadow: "md",
+              borderWidth: 2
+            })
           },
           ...focusVisible({
             focus: {
               boxShadow: getBoxShadowString({
-                borderColor: "greenHaze",
+                borderColor: themeTools.mode("greenHaze", "azure")(props),
                 borderWidth: 2,
                 baseShadow: "sm"
               }),
               _hover: {
                 boxShadow: getBoxShadowString({
-                  borderColor: "greenHaze",
+                  borderColor: themeTools.mode("greenHaze", "azure")(props),
                   borderWidth: 2,
                   baseShadow: "md"
                 })
@@ -13074,7 +13083,7 @@ var init_button2 = __esm({
               boxShadow: "sm"
             }
           })
-        }
+        })
       },
       sizes: {
         lg: {
@@ -14625,16 +14634,22 @@ var init_input2 = __esm({
           boxShadow: getBoxShadowString({
             borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
           }),
+          _active: {
+            backgroundColor: themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props),
+            boxShadow: getBoxShadowString({
+              borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
+            })
+          },
           _hover: {
             boxShadow: getBoxShadowString({
-              borderColor: themeTools.mode("darkGrey", "whiteAlpha.600")(props),
+              borderColor: themeTools.mode("darkGrey", "white")(props),
               borderWidth: 2
             })
           },
           ...focusVisible({
             focus: {
               boxShadow: getBoxShadowString({
-                borderColor: "greenHaze",
+                borderColor: themeTools.mode("greenHaze", "azure")(props),
                 borderWidth: 2
               })
             },
@@ -14661,7 +14676,7 @@ var init_input2 = __esm({
             ...focusVisible({
               focus: {
                 boxShadow: getBoxShadowString({
-                  borderColor: "greenHaze",
+                  borderColor: themeTools.mode("greenHaze", "azure")(props),
                   borderWidth: 2
                 })
               },
@@ -14855,80 +14870,79 @@ var init_link2 = __esm({
         }
       },
       variants: {
-        primary: {
-          color: "pine",
+        primary: (props) => ({
+          color: themeTools.mode("pine", "seaMist")(props),
           ...focusVisible({
             focus: {
-              color: "white",
-              backgroundColor: "pine",
+              backgroundColor: "transparent",
               boxShadow: getBoxShadowString({
-                borderColor: "pine",
-                borderWidth: 3,
+                borderColor: "azure",
+                borderWidth: 2,
                 isInset: false
               })
             },
             notFocus: {
               color: "pine",
-              boxShadow: "none",
-              backgroundColor: "transparent"
+              backgroundColor: "transparent",
+              boxShadow: "none"
             }
           }),
           _hover: {
-            backgroundColor: "coralGreen",
-            color: "darkTeal",
+            color: "white",
+            backgroundColor: "pine",
             boxShadow: getBoxShadowString({
-              borderColor: "coralGreen",
-              borderWidth: 3,
+              borderColor: "pine",
+              borderWidth: 2,
               isInset: false
             })
           },
           _active: {
-            backgroundColor: "mint",
+            color: "white",
+            backgroundColor: "azure",
             boxShadow: getBoxShadowString({
-              borderColor: "mint",
-              borderWidth: 3,
+              borderColor: "azure",
+              borderWidth: 2,
               isInset: false
-            }),
-            color: "pine"
+            })
           }
-        },
+        }),
         secondary: (props) => ({
-          color: "darkGrey",
+          color: themeTools.mode("darkGrey", "white")(props),
           ...focusVisible({
             focus: {
-              color: "white",
-              backgroundColor: "darkGrey",
+              backgroundColor: "transparent",
               boxShadow: getBoxShadowString({
-                borderColor: "darkGrey",
-                borderWidth: 3,
+                borderColor: "azure",
+                borderWidth: 2,
                 isInset: false
               })
             },
             notFocus: {
-              color: "darkGrey",
               boxShadow: "none",
               backgroundColor: "transparent"
             }
           }),
           _hover: {
-            color: "darkGrey",
-            backgroundColor: "blackAlpha.100",
+            backgroundColor: themeTools.mode("seaMist", "pine")(props),
             boxShadow: getBoxShadowString({
-              borderColor: props.theme.colors.blackAlpha[100],
-              borderWidth: 3,
+              borderColor: themeTools.mode("seaMist", "pine")(props),
+              borderWidth: 2,
               isInset: false
             })
           },
           _active: {
-            color: "darkTeal",
-            backgroundColor: "mint",
+            backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props),
             boxShadow: getBoxShadowString({
-              borderColor: "mint",
-              borderWidth: 3,
+              borderColor: themeTools.mode("mint", "whiteAlpha.200")(props),
+              borderWidth: 2,
               isInset: false
             })
           }
         }),
+        /**
+         * @deprecated tertiary style will be deprecated in the future.
+         * Please use the secondary style instead.
+         */
         tertiary: (props) => ({
           color: "white",
           ...focusVisible({
@@ -14974,6 +14988,28 @@ var init_link2 = __esm({
     link_default = config23;
   }
 });
+
+// src/theme/components/list.ts
+var defineMultiStyleConfig28, definePartsStyle28, baseStyleIcon8, baseStyle45, list_default;
+var init_list2 = __esm({
+  "src/theme/components/list.ts"() {
+    init_dist4();
+    init_dist3();
+    ({ defineMultiStyleConfig: defineMultiStyleConfig28, definePartsStyle: definePartsStyle28 } = createMultiStyleConfigHelpers(listAnatomy.keys));
+    baseStyleIcon8 = defineStyle({
+      marginEnd: "2",
+      display: "inline",
+      verticalAlign: "text-bottom",
+      fontFamily: "body"
+    });
+    baseStyle45 = definePartsStyle28({
+      icon: baseStyleIcon8
+    });
+    list_default = defineMultiStyleConfig28({
+      baseStyle: baseStyle45
+    });
+  }
+});
 var parts10, helpers15, config24, listbox_default;
 var init_listbox = __esm({
   "src/theme/components/listbox.ts"() {
@@ -16441,6 +16477,7 @@ __export(components_exports, {
   Input: () => input_default,
   LineIcon: () => line_icon_default,
   Link: () => link_default,
+  List: () => list_default,
   ListBox: () => listbox_default,
   MediaControllerButton: () => media_controller_button_default,
   Modal: () => modal_default,
@@ -16480,6 +16517,7 @@ var init_components = __esm({
     init_input2();
     init_line_icon();
     init_link2();
+    init_list2();
     init_listbox();
     init_media_controller_button();
     init_modal2();

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-IP63HI2Y.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-D2XVZVE6.mjs';

package/package.json

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

package/src/link/TextLink.tsx

@@ -8,7 +8,11 @@ import React from "react";
 import { createTexts, useTranslation } from "..";
 
 type LinkProps = Omit<ChakraLinkProps, "variant"> & {
-  variant?: "primary" | "secondary" | "tertiary";
+  variant?:
+    | "primary"
+    | "secondary"
+    /** @deprecated Use `secondary` instead */
+    | "tertiary";
 };
 /** Link to different sites or parts of site
  *

package/src/theme/components/accordion.ts

@@ -21,6 +21,7 @@ const config = helpers.defineMultiStyleConfig({
       justifyContent: "space-between",
       color: "darkGrey",
       textAlign: "left",
+      fontFamily: "body",
       fontWeight: "bold",
       ...focusVisible({
         notFocus: {

package/src/theme/components/button.ts

@@ -126,7 +126,7 @@ const config = defineStyleConfig({
           colors.blackAlpha[400],
           colors.whiteAlpha[300]
         )(props)}`,
-        backgroundColor: mode("mint", "whiteAlpha.300")(props),
+        backgroundColor: mode("mint", "whiteAlpha.200")(props),
       },
     }),
     ghost: (props) => ({
@@ -151,30 +151,38 @@ const config = defineStyleConfig({
         },
       },
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.300")(props),
+        backgroundColor: mode("mint", "whiteAlpha.200")(props),
       },
     }),
-    floating: {
-      backgroundColor: "white",
-      boxShadow: "sm",
+    floating: (props) => ({
+      backgroundColor: mode("white", "whiteAlpha.100")(props),
+      boxShadow: getBoxShadowString({
+        borderColor: mode("grey.200", "whiteAlpha.400")(props),
+        baseShadow: "sm",
+      }),
       _active: {
-        backgroundColor: "mint",
+        backgroundColor: mode("mint", "whiteAlpha.300")(props),
       },
       _hover: {
-        boxShadow: "md",
+        backgroundColor: mode("white", "whiteAlpha.200")(props),
+        boxShadow: getBoxShadowString({
+          borderColor: mode("grey.300", "white")(props),
+          baseShadow: "md",
+          borderWidth: 2,
+        }),
       },
       ...focusVisible({
         focus: {
           boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
+            borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2,
             baseShadow: "sm",
           }),
           _hover: {
             boxShadow: getBoxShadowString({
-              borderColor: "greenHaze",
+              borderColor: mode("greenHaze", "azure")(props),
               borderWidth: 2,
-              baseShadow: "md",
+              baseShadow: "md"
             }),
           },
         },
@@ -183,7 +191,7 @@ const config = defineStyleConfig({
           boxShadow: "sm",
         },
       }),
-    },
+    }),
   },
   sizes: {
     lg: {

package/src/theme/components/index.ts

@@ -20,6 +20,7 @@ export { default as InfoTag } from "./info-tag";
 export { default as Input } from "./input";
 export { default as LineIcon } from "./line-icon";
 export { default as Link } from "./link";
+export { default as List } from "./list";
 export { default as ListBox } from "./listbox";
 export { default as MediaControllerButton } from "./media-controller-button";
 export { default as Modal } from "./modal";
@@ -34,4 +35,3 @@ export { default as Tabs } from "./tabs";
 export { default as Textarea } from "./textarea";
 export { default as Toast } from "./toast";
 export { default as TravelTag } from "./travel-tag";
-

package/src/theme/components/input.ts

@@ -25,16 +25,22 @@ const config = helpers.defineMultiStyleConfig({
       boxShadow: getBoxShadowString({
         borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
       }),
+      _active: {
+        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+        }),
+      },
       _hover: {
         boxShadow: getBoxShadowString({
-          borderColor: mode("darkGrey", "whiteAlpha.600")(props),
+          borderColor: mode("darkGrey", "white")(props),
           borderWidth: 2,
         }),
       },
       ...focusVisible({
         focus: {
           boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
+            borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2,
           }),
         },
@@ -61,7 +67,7 @@ const config = helpers.defineMultiStyleConfig({
         ...focusVisible({
           focus: {
             boxShadow: getBoxShadowString({
-              borderColor: "greenHaze",
+              borderColor: mode("greenHaze", "azure")(props),
               borderWidth: 2,
             }),
           },

package/src/theme/components/link.ts

@@ -1,6 +1,7 @@
 import { defineStyleConfig } from "@chakra-ui/react";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
 import { focusVisible } from "../utils/focus-utils";
+import { mode } from "@chakra-ui/theme-tools";
 
 const config = defineStyleConfig({
   baseStyle: {
@@ -35,80 +36,79 @@ const config = defineStyleConfig({
     },
   },
   variants: {
-    primary: {
-      color: "pine",
+    primary: (props) => ({
+      color: mode("pine", "seaMist")(props),
       ...focusVisible({
         focus: {
-          color: "white",
-          backgroundColor: "pine",
+          backgroundColor: "transparent",
           boxShadow: getBoxShadowString({
-            borderColor: "pine",
-            borderWidth: 3,
+            borderColor: "azure",
+            borderWidth: 2,
             isInset: false,
           }),
         },
         notFocus: {
           color: "pine",
-          boxShadow: "none",
           backgroundColor: "transparent",
+          boxShadow: "none",
         },
       }),
       _hover: {
-        backgroundColor: "coralGreen",
-        color: "darkTeal",
+        color: "white",
+        backgroundColor: "pine",
         boxShadow: getBoxShadowString({
-          borderColor: "coralGreen",
-          borderWidth: 3,
+          borderColor: "pine",
+          borderWidth: 2,
           isInset: false,
         }),
       },
       _active: {
-        backgroundColor: "mint",
+        color: "white",
+        backgroundColor: "azure",
         boxShadow: getBoxShadowString({
-          borderColor: "mint",
-          borderWidth: 3,
+          borderColor: "azure",
+          borderWidth: 2,
           isInset: false,
         }),
-        color: "pine",
       },
-    },
+    }),
     secondary: (props) => ({
-      color: "darkGrey",
+      color: mode("darkGrey", "white")(props),
       ...focusVisible({
         focus: {
-          color: "white",
-          backgroundColor: "darkGrey",
+          backgroundColor: "transparent",
           boxShadow: getBoxShadowString({
-            borderColor: "darkGrey",
-            borderWidth: 3,
+            borderColor: "azure",
+            borderWidth: 2,
             isInset: false,
           }),
         },
         notFocus: {
-          color: "darkGrey",
           boxShadow: "none",
           backgroundColor: "transparent",
         },
       }),
       _hover: {
-        color: "darkGrey",
-        backgroundColor: "blackAlpha.100",
+        backgroundColor: mode("seaMist", "pine")(props),
         boxShadow: getBoxShadowString({
-          borderColor: props.theme.colors.blackAlpha[100],
-          borderWidth: 3,
+          borderColor: mode("seaMist", "pine")(props),
+          borderWidth: 2,
           isInset: false,
         }),
       },
       _active: {
-        color: "darkTeal",
-        backgroundColor: "mint",
+        backgroundColor: mode("mint", "whiteAlpha.200")(props),
         boxShadow: getBoxShadowString({
-          borderColor: "mint",
-          borderWidth: 3,
+          borderColor: mode("mint", "whiteAlpha.200")(props),
+          borderWidth: 2,
           isInset: false,
         }),
       },
     }),
+    /**
+     * @deprecated tertiary style will be deprecated in the future.
+     * Please use the secondary style instead.
+     */
     tertiary: (props) => ({
       color: "white",
       ...focusVisible({

package/src/theme/components/list.ts

@@ -0,0 +1,23 @@
+import { listAnatomy as parts } from "@chakra-ui/anatomy";
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from "@chakra-ui/styled-system";
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const baseStyleIcon = defineStyle({
+  marginEnd: "2",
+  display: "inline",
+  verticalAlign: "text-bottom",
+  fontFamily: "body",
+});
+
+const baseStyle = definePartsStyle({
+  icon: baseStyleIcon,
+});
+
+export default defineMultiStyleConfig({
+  baseStyle,
+});