@vygruppen/spor-react 8.0.1 → 8.1.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@8.0.1 build
+> @vygruppen/spor-react@8.1.1 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -8,15 +8,15 @@
 CLI Target: node16
 CJS Build start
 ESM Build start
-"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-5VZ5S46A.mjs".
 "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-RKXDHLUI.mjs".
+CJS dist/index.js 503.36 KB
+CJS ⚡️ Build success in 2174ms
 ESM dist/index.mjs                      2.01 KB
-ESM dist/CountryCodeSelect-SCMCRKY4.mjs 1.19 KB
-ESM dist/chunk-5VZ5S46A.mjs             393.00 KB
-ESM ⚡️ Build success in 2110ms
-CJS dist/index.js 500.11 KB
-CJS ⚡️ Build success in 2110ms
-DTS ⚡️ Build success in 10383ms
-DTS dist/index.d.ts  268.53 KB
-DTS dist/index.d.mts 268.53 KB
+ESM dist/CountryCodeSelect-SJXGMMQ7.mjs 1.19 KB
+ESM dist/chunk-RKXDHLUI.mjs             395.62 KB
+ESM ⚡️ Build success in 2176ms
+DTS ⚡️ Build success in 10811ms
+DTS dist/index.d.ts  271.53 KB
+DTS dist/index.d.mts 271.53 KB

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @vygruppen/spor-react
 
+## 8.1.1
+
+### Patch Changes
+
+- 5c87f0c: ListBox: Fix focus styles for listbox
+- 7011328: TextLink: Updated colors for primary and secondary variants to align with Figma
+
+## 8.1.0
+
+### Minor Changes
+
+- 3c599d7: Combobox: Add inputRef prop
+
+### Patch Changes
+
+- c084847: ExpandableAlerts: added new hover and active styling for this component
+
 ## 8.0.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-SCMCRKY4.mjs → CountryCodeSelect-SJXGMMQ7.mjs}

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

package/dist/{chunk-5VZ5S46A.mjs → chunk-RKXDHLUI.mjs}

@@ -1509,6 +1509,7 @@ var ExpandableAlert = ({
   },
   ...boxProps
 }) => {
+  const styles3 = useMultiStyleConfig("AlertExpandable", { variant });
   return /* @__PURE__ */ React69__default.createElement(BaseAlert, { variant, ...boxProps, paddingX: 0, paddingY: 0 }, /* @__PURE__ */ React69__default.createElement(
     Accordion$1,
     {
@@ -1517,7 +1518,7 @@ var ExpandableAlert = ({
       allowToggle: true,
       flexGrow: "1"
     },
-    /* @__PURE__ */ React69__default.createElement(AccordionItem, null, /* @__PURE__ */ React69__default.createElement(AccordionButton, { paddingX: 3, paddingY: 2, fontSize: "inherit" }, /* @__PURE__ */ React69__default.createElement(
+    /* @__PURE__ */ React69__default.createElement(AccordionItem, null, /* @__PURE__ */ React69__default.createElement(AccordionButton, { sx: styles3.container }, /* @__PURE__ */ React69__default.createElement(
       Flex,
       {
         justifyContent: "space-between",
@@ -2667,19 +2668,22 @@ function Combobox({
   paddingX,
   paddingY,
   emptyContent,
+  inputRef: externalInputRef,
+  allowsEmptyCollection,
   ...rest
 }) {
   const { contains: contains2 } = useFilter({ sensitivity: "base" });
-  const inputRef = useRef(null);
+  const fallbackInputRef = useRef(null);
+  const inputRef = externalInputRef ?? fallbackInputRef;
   const listBoxRef = useRef(null);
   const popoverRef = useRef(null);
   const inputWidth = useInputWidth(inputRef);
   const state2 = useComboBoxState({
-    ...rest,
-    defaultFilter: contains2,
     allowsEmptyCollection: Boolean(emptyContent),
+    defaultFilter: contains2,
     shouldCloseOnBlur: true,
-    label
+    label,
+    ...rest
   });
   const {
     inputProps: { size: size2, ...inputProps },
@@ -3429,7 +3433,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-SCMCRKY4.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-SJXGMMQ7.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -6246,16 +6250,16 @@ Object.assign({}, space, layout, flexbox, grid, position);
 function defineStyle(styles3) {
   return styles3;
 }
-function defineStyleConfig(config38) {
-  return config38;
+function defineStyleConfig(config39) {
+  return config39;
 }
-function createMultiStyleConfigHelpers(parts15) {
+function createMultiStyleConfigHelpers(parts16) {
   return {
-    definePartsStyle(config38) {
-      return config38;
+    definePartsStyle(config39) {
+      return config39;
     },
-    defineMultiStyleConfig(config38) {
-      return { parts: parts15, ...config38 };
+    defineMultiStyleConfig(config39) {
+      return { parts: parts16, ...config39 };
     }
   };
 }
@@ -6418,7 +6422,7 @@ function anatomy(name, map = {}) {
       "[anatomy] .part(...) should only be called once. Did you mean to use .extend(...) ?"
     );
   }
-  function parts15(...values) {
+  function parts16(...values) {
     assert();
     for (const part of values) {
       map[part] = toPart(part);
@@ -6458,7 +6462,7 @@ function anatomy(name, map = {}) {
   }
   const __type = {};
   return {
-    parts: parts15,
+    parts: parts16,
     toPart,
     extend,
     selectors,
@@ -9512,6 +9516,7 @@ var components_exports = {};
 __export(components_exports, {
   Accordion: () => accordion_default,
   Alert: () => alert_default,
+  AlertExpandable: () => alert_expandable_default,
   Badge: () => badge_default,
   Breadcrumb: () => breadcrumb_default,
   Button: () => button_default,
@@ -10099,6 +10104,23 @@ function accentText(state2, props) {
       };
   }
 }
+function brandText(state2, props) {
+  switch (state2) {
+    case "hover":
+      return {
+        color: mode("white", "darkTeal")(props)
+      };
+    case "active":
+      return {
+        color: mode("white", "darkTeal")(props)
+      };
+    case "default":
+    default:
+      return {
+        color: mode("pine", "coralGreen")(props)
+      };
+  }
+}
 
 // src/theme/components/accordion.ts
 var helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
@@ -12334,25 +12356,34 @@ var config23 = defineStyleConfig$1({
   }),
   variants: {
     primary: (props) => ({
-      color: mode("pine", "coralGreen")(props),
+      ...brandText("default", props),
       _hover: {
-        color: mode("darkTeal", "white")(props),
-        backgroundColor: mode("coralGreen", "whiteAlpha.200")(props)
+        ...brandText("hover", props),
+        ...brandBackground("hover", props)
       },
       _active: {
-        color: mode("pine", "white")(props),
-        backgroundColor: mode("mint", "whiteAlpha.100")(props)
+        ...brandText("active", props),
+        ...brandBackground("active", props)
       }
     }),
     secondary: (props) => ({
-      color: mode("darkGrey", "white")(props),
+      backgroundImage: `linear-gradient(${mode(
+        "blackAlpha.400",
+        "whiteAlpha.400"
+      )(props)}, ${mode("blackAlpha.400", "whiteAlpha.400")(props)})`,
+      ...baseText("default", props),
+      "&:focus, &:focus-visible, &:active, &:hover": {
+        outline: "solid",
+        outlineWidth: "1px"
+      },
+      ...baseBackground("default", props),
       _hover: {
-        backgroundColor: mode("blackAlpha.100", "whiteAlpha.200")(props),
-        color: mode("darkGrey", "white")(props)
+        outlineColor: mode("darkGrey", "white")(props),
+        ...baseBackground("hover", props)
       },
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.100")(props),
-        color: mode("darkGrey", "white")(props)
+        outlineColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+        ...baseBackground("active", props)
       }
     })
   },
@@ -12417,7 +12448,10 @@ var config24 = helpers15.defineMultiStyleConfig({
       _hover: {
         ...ghostBackground("hover", props)
       },
-      ...focusVisibleStyles(props),
+      _focus: {
+        ...ghostBackground("selected", props),
+        ...focusVisibleStyles(props)._focusVisible
+      },
       _selected: {
         ...ghostBackground("selected", props)
       }
@@ -13581,6 +13615,93 @@ var config37 = defineStyleConfig$1({
   }
 });
 var toast_default = config37;
+
+// src/theme/components/alert-expandable.ts
+var parts15 = anatomy("alertExpandable").parts("container");
+var helpers26 = createMultiStyleConfigHelpers(parts15.keys);
+var config38 = helpers26.defineMultiStyleConfig({
+  baseStyle: {
+    container: {
+      paddingX: 3,
+      paddingY: 2,
+      fontSize: "inherit",
+      _expanded: {
+        borderBottomRadius: "none"
+      }
+    }
+  },
+  variants: {
+    info: {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "sky",
+            borderWidth: 2
+          })
+        },
+        _active: {
+          backgroundColor: "icyBlue"
+        }
+      }
+    },
+    success: {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "blueGreen",
+            borderWidth: 2
+          })
+        },
+        _active: {
+          backgroundColor: "mint"
+        }
+      }
+    },
+    warning: {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "sunshine",
+            borderWidth: 2
+          })
+        },
+        _active: {
+          backgroundColor: "cornSilk"
+        }
+      }
+    },
+    "alt-transport": {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "golden",
+            borderWidth: 2
+          })
+        },
+        _active: {
+          backgroundColor: "sunshine"
+        }
+      }
+    },
+    error: {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "apricot",
+            borderWidth: 2
+          })
+        },
+        _active: {
+          backgroundColor: "pink"
+        }
+      }
+    }
+  },
+  defaultProps: {
+    variant: "info"
+  }
+});
+var alert_expandable_default = config38;
 var fontFaces = `
 @font-face {
   font-family: ${tokens10__default.asset.font["vy-sans"]["light"].name};

package/dist/index.d.mts

@@ -774,6 +774,10 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
     isLoading?: boolean;
     /** Optional UI to show when there are no matching items */
     emptyContent?: React.ReactNode;
+    /** A ref to the input field */
+    inputRef?: React.RefObject<HTMLInputElement>;
+    /** If you want to allow an empty collection */
+    allowsEmptyCollection?: boolean;
 } & Pick<InputProps, "marginTop" | "marginBottom" | "marginRight" | "marginLeft" | "marginY" | "marginX" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingY" | "paddingX" | "leftIcon" | "rightIcon" | "borderTopRightRadius" | "borderTopLeftRadius" | "borderBottomRightRadius" | "borderBottomLeftRadius" | "onFocus">;
 /**
  * A combobox is a combination of an input and a list of suggestions.
@@ -798,7 +802,7 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
  * </Combobox>
  * ```
  */
-declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, emptyContent, ...rest }: ComboboxProps<T>): React.JSX.Element;
+declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, emptyContent, inputRef: externalInputRef, allowsEmptyCollection, ...rest }: ComboboxProps<T>): React.JSX.Element;
 
 type FormControlProps = FormControlProps$1;
 declare const FormControl: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", FormControlProps$1>;
@@ -4250,26 +4254,32 @@ declare const theme: {
             } | undefined;
             variants?: {
                 primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    color: string;
                     _hover: {
-                        color: string;
                         backgroundColor: string;
+                        color: string;
                     };
                     _active: {
-                        color: string;
                         backgroundColor: string;
+                        color: string;
                     };
+                    color: string;
                 };
                 secondary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    color: string;
                     _hover: {
                         backgroundColor: string;
-                        color: string;
+                        outlineColor: string;
                     };
                     _active: {
                         backgroundColor: string;
-                        color: string;
+                        outlineColor: string;
+                    };
+                    backgroundColor: string;
+                    "&:focus, &:focus-visible, &:active, &:hover": {
+                        outline: string;
+                        outlineWidth: string;
                     };
+                    color: string;
+                    backgroundImage: string;
                 };
             } | undefined;
             defaultProps?: {
@@ -4321,15 +4331,6 @@ declare const theme: {
                     borderBottomRadius: string;
                 };
                 item: {
-                    _selected: {
-                        backgroundColor: string;
-                    };
-                    _focusVisible: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    };
                     paddingX: number;
                     paddingY: number;
                     marginY: number;
@@ -4344,6 +4345,16 @@ declare const theme: {
                     _hover: {
                         backgroundColor: string;
                     };
+                    _focus: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    };
+                    _selected: {
+                        backgroundColor: string;
+                    };
                 };
                 label: {};
                 description: {
@@ -5807,6 +5818,81 @@ declare const theme: {
             } | undefined;
             parts: ("title" | "container" | "icon" | "description" | "iconContainer" | "textContainer" | "deviationIcon")[];
         };
+        AlertExpandable: {
+            baseStyle?: {
+                container: {
+                    paddingX: number;
+                    paddingY: number;
+                    fontSize: string;
+                    _expanded: {
+                        borderBottomRadius: string;
+                    };
+                };
+            } | undefined;
+            sizes?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: "container"[];
+                }>;
+            } | undefined;
+            variants?: {
+                info: {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                success: {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                warning: {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                "alt-transport": {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                error: {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+            } | undefined;
+            defaultProps?: {
+                size?: string | number | undefined;
+                variant?: "error" | "info" | "success" | "warning" | "alt-transport" | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+            parts: "container"[];
+        };
         Avatar: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 badge: {

package/dist/index.d.ts

@@ -774,6 +774,10 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
     isLoading?: boolean;
     /** Optional UI to show when there are no matching items */
     emptyContent?: React.ReactNode;
+    /** A ref to the input field */
+    inputRef?: React.RefObject<HTMLInputElement>;
+    /** If you want to allow an empty collection */
+    allowsEmptyCollection?: boolean;
 } & Pick<InputProps, "marginTop" | "marginBottom" | "marginRight" | "marginLeft" | "marginY" | "marginX" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingY" | "paddingX" | "leftIcon" | "rightIcon" | "borderTopRightRadius" | "borderTopLeftRadius" | "borderBottomRightRadius" | "borderBottomLeftRadius" | "onFocus">;
 /**
  * A combobox is a combination of an input and a list of suggestions.
@@ -798,7 +802,7 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
  * </Combobox>
  * ```
  */
-declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, emptyContent, ...rest }: ComboboxProps<T>): React.JSX.Element;
+declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, emptyContent, inputRef: externalInputRef, allowsEmptyCollection, ...rest }: ComboboxProps<T>): React.JSX.Element;
 
 type FormControlProps = FormControlProps$1;
 declare const FormControl: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", FormControlProps$1>;
@@ -4250,26 +4254,32 @@ declare const theme: {
             } | undefined;
             variants?: {
                 primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    color: string;
                     _hover: {
-                        color: string;
                         backgroundColor: string;
+                        color: string;
                     };
                     _active: {
-                        color: string;
                         backgroundColor: string;
+                        color: string;
                     };
+                    color: string;
                 };
                 secondary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    color: string;
                     _hover: {
                         backgroundColor: string;
-                        color: string;
+                        outlineColor: string;
                     };
                     _active: {
                         backgroundColor: string;
-                        color: string;
+                        outlineColor: string;
+                    };
+                    backgroundColor: string;
+                    "&:focus, &:focus-visible, &:active, &:hover": {
+                        outline: string;
+                        outlineWidth: string;
                     };
+                    color: string;
+                    backgroundImage: string;
                 };
             } | undefined;
             defaultProps?: {
@@ -4321,15 +4331,6 @@ declare const theme: {
                     borderBottomRadius: string;
                 };
                 item: {
-                    _selected: {
-                        backgroundColor: string;
-                    };
-                    _focusVisible: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    };
                     paddingX: number;
                     paddingY: number;
                     marginY: number;
@@ -4344,6 +4345,16 @@ declare const theme: {
                     _hover: {
                         backgroundColor: string;
                     };
+                    _focus: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                        backgroundColor: string;
+                    };
+                    _selected: {
+                        backgroundColor: string;
+                    };
                 };
                 label: {};
                 description: {
@@ -5807,6 +5818,81 @@ declare const theme: {
             } | undefined;
             parts: ("title" | "container" | "icon" | "description" | "iconContainer" | "textContainer" | "deviationIcon")[];
         };
+        AlertExpandable: {
+            baseStyle?: {
+                container: {
+                    paddingX: number;
+                    paddingY: number;
+                    fontSize: string;
+                    _expanded: {
+                        borderBottomRadius: string;
+                    };
+                };
+            } | undefined;
+            sizes?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: "container"[];
+                }>;
+            } | undefined;
+            variants?: {
+                info: {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                success: {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                warning: {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                "alt-transport": {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                error: {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+            } | undefined;
+            defaultProps?: {
+                size?: string | number | undefined;
+                variant?: "error" | "info" | "success" | "warning" | "alt-transport" | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+            parts: "container"[];
+        };
         Avatar: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 badge: {

package/dist/index.js

@@ -1046,6 +1046,7 @@ var init_ExpandableAlert = __esm({
       },
       ...boxProps
     }) => {
+      const styles3 = react.useMultiStyleConfig("AlertExpandable", { variant });
       return /* @__PURE__ */ React69__namespace.default.createElement(BaseAlert, { variant, ...boxProps, paddingX: 0, paddingY: 0 }, /* @__PURE__ */ React69__namespace.default.createElement(
         react.Accordion,
         {
@@ -1054,7 +1055,7 @@ var init_ExpandableAlert = __esm({
           allowToggle: true,
           flexGrow: "1"
         },
-        /* @__PURE__ */ React69__namespace.default.createElement(react.AccordionItem, null, /* @__PURE__ */ React69__namespace.default.createElement(react.AccordionButton, { paddingX: 3, paddingY: 2, fontSize: "inherit" }, /* @__PURE__ */ React69__namespace.default.createElement(
+        /* @__PURE__ */ React69__namespace.default.createElement(react.AccordionItem, null, /* @__PURE__ */ React69__namespace.default.createElement(react.AccordionButton, { sx: styles3.container }, /* @__PURE__ */ React69__namespace.default.createElement(
           react.Flex,
           {
             justifyContent: "space-between",
@@ -3171,19 +3172,22 @@ function Combobox({
   paddingX,
   paddingY,
   emptyContent,
+  inputRef: externalInputRef,
+  allowsEmptyCollection,
   ...rest
 }) {
   const { contains: contains2 } = reactAria.useFilter({ sensitivity: "base" });
-  const inputRef = React69.useRef(null);
+  const fallbackInputRef = React69.useRef(null);
+  const inputRef = externalInputRef ?? fallbackInputRef;
   const listBoxRef = React69.useRef(null);
   const popoverRef = React69.useRef(null);
   const inputWidth = useInputWidth(inputRef);
   const state2 = reactStately.useComboBoxState({
-    ...rest,
-    defaultFilter: contains2,
     allowsEmptyCollection: Boolean(emptyContent),
+    defaultFilter: contains2,
     shouldCloseOnBlur: true,
-    label
+    label,
+    ...rest
   });
   const {
     inputProps: { size: size2, ...inputProps },
@@ -6081,16 +6085,16 @@ function defineCssVars(scope, keys2) {
 function defineStyle(styles3) {
   return styles3;
 }
-function defineStyleConfig(config38) {
-  return config38;
+function defineStyleConfig(config39) {
+  return config39;
 }
-function createMultiStyleConfigHelpers(parts15) {
+function createMultiStyleConfigHelpers(parts16) {
   return {
-    definePartsStyle(config38) {
-      return config38;
+    definePartsStyle(config39) {
+      return config39;
     },
-    defineMultiStyleConfig(config38) {
-      return { parts: parts15, ...config38 };
+    defineMultiStyleConfig(config39) {
+      return { parts: parts16, ...config39 };
     }
   };
 }
@@ -7413,7 +7417,7 @@ function anatomy(name, map = {}) {
       "[anatomy] .part(...) should only be called once. Did you mean to use .extend(...) ?"
     );
   }
-  function parts15(...values) {
+  function parts16(...values) {
     assert();
     for (const part of values) {
       map[part] = toPart(part);
@@ -7453,7 +7457,7 @@ function anatomy(name, map = {}) {
   }
   const __type = {};
   return {
-    parts: parts15,
+    parts: parts16,
     toPart,
     extend,
     selectors,
@@ -11511,6 +11515,23 @@ function accentText(state2, props) {
       };
   }
 }
+function brandText(state2, props) {
+  switch (state2) {
+    case "hover":
+      return {
+        color: themeTools.mode("white", "darkTeal")(props)
+      };
+    case "active":
+      return {
+        color: themeTools.mode("white", "darkTeal")(props)
+      };
+    case "default":
+    default:
+      return {
+        color: themeTools.mode("pine", "coralGreen")(props)
+      };
+  }
+}
 var init_text_utils = __esm({
   "src/theme/utils/text-utils.ts"() {
     init_foundations();
@@ -13881,6 +13902,8 @@ var config23, link_default;
 var init_link2 = __esm({
   "src/theme/components/link.ts"() {
     init_focus_util();
+    init_background_utils();
+    init_text_utils();
     config23 = react.defineStyleConfig({
       baseStyle: (props) => ({
         transitionProperty: "common",
@@ -13914,25 +13937,34 @@ var init_link2 = __esm({
       }),
       variants: {
         primary: (props) => ({
-          color: themeTools.mode("pine", "coralGreen")(props),
+          ...brandText("default", props),
           _hover: {
-            color: themeTools.mode("darkTeal", "white")(props),
-            backgroundColor: themeTools.mode("coralGreen", "whiteAlpha.200")(props)
+            ...brandText("hover", props),
+            ...brandBackground("hover", props)
           },
           _active: {
-            color: themeTools.mode("pine", "white")(props),
-            backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props)
+            ...brandText("active", props),
+            ...brandBackground("active", props)
           }
         }),
         secondary: (props) => ({
-          color: themeTools.mode("darkGrey", "white")(props),
+          backgroundImage: `linear-gradient(${themeTools.mode(
+            "blackAlpha.400",
+            "whiteAlpha.400"
+          )(props)}, ${themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)})`,
+          ...baseText("default", props),
+          "&:focus, &:focus-visible, &:active, &:hover": {
+            outline: "solid",
+            outlineWidth: "1px"
+          },
+          ...baseBackground("default", props),
           _hover: {
-            backgroundColor: themeTools.mode("blackAlpha.100", "whiteAlpha.200")(props),
-            color: themeTools.mode("darkGrey", "white")(props)
+            outlineColor: themeTools.mode("darkGrey", "white")(props),
+            ...baseBackground("hover", props)
           },
           _active: {
-            backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props),
-            color: themeTools.mode("darkGrey", "white")(props)
+            outlineColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props),
+            ...baseBackground("active", props)
           }
         })
       },
@@ -14013,7 +14045,10 @@ var init_listbox = __esm({
           _hover: {
             ...ghostBackground("hover", props)
           },
-          ...focusVisibleStyles(props),
+          _focus: {
+            ...ghostBackground("selected", props),
+            ...focusVisibleStyles(props)._focusVisible
+          },
           _selected: {
             ...ghostBackground("selected", props)
           }
@@ -15276,11 +15311,107 @@ var init_toast = __esm({
   }
 });
 
+// src/theme/components/alert-expandable.ts
+var parts15, helpers26, config38, alert_expandable_default;
+var init_alert_expandable = __esm({
+  "src/theme/components/alert-expandable.ts"() {
+    init_dist4();
+    init_dist3();
+    init_box_shadow_utils();
+    parts15 = anatomy("alertExpandable").parts("container");
+    helpers26 = createMultiStyleConfigHelpers(parts15.keys);
+    config38 = helpers26.defineMultiStyleConfig({
+      baseStyle: {
+        container: {
+          paddingX: 3,
+          paddingY: 2,
+          fontSize: "inherit",
+          _expanded: {
+            borderBottomRadius: "none"
+          }
+        }
+      },
+      variants: {
+        info: {
+          container: {
+            _hover: {
+              boxShadow: getBoxShadowString({
+                borderColor: "sky",
+                borderWidth: 2
+              })
+            },
+            _active: {
+              backgroundColor: "icyBlue"
+            }
+          }
+        },
+        success: {
+          container: {
+            _hover: {
+              boxShadow: getBoxShadowString({
+                borderColor: "blueGreen",
+                borderWidth: 2
+              })
+            },
+            _active: {
+              backgroundColor: "mint"
+            }
+          }
+        },
+        warning: {
+          container: {
+            _hover: {
+              boxShadow: getBoxShadowString({
+                borderColor: "sunshine",
+                borderWidth: 2
+              })
+            },
+            _active: {
+              backgroundColor: "cornSilk"
+            }
+          }
+        },
+        "alt-transport": {
+          container: {
+            _hover: {
+              boxShadow: getBoxShadowString({
+                borderColor: "golden",
+                borderWidth: 2
+              })
+            },
+            _active: {
+              backgroundColor: "sunshine"
+            }
+          }
+        },
+        error: {
+          container: {
+            _hover: {
+              boxShadow: getBoxShadowString({
+                borderColor: "apricot",
+                borderWidth: 2
+              })
+            },
+            _active: {
+              backgroundColor: "pink"
+            }
+          }
+        }
+      },
+      defaultProps: {
+        variant: "info"
+      }
+    });
+    alert_expandable_default = config38;
+  }
+});
+
 // src/theme/components/index.ts
 var components_exports = {};
 __export(components_exports, {
   Accordion: () => accordion_default,
   Alert: () => alert_default,
+  AlertExpandable: () => alert_expandable_default,
   Badge: () => badge_default,
   Breadcrumb: () => breadcrumb_default,
   Button: () => button_default,
@@ -15358,6 +15489,7 @@ var init_components = __esm({
     init_textarea();
     init_toast();
     init_travel_tag();
+    init_alert_expandable();
   }
 });
 exports.fontFaces = void 0;

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-5VZ5S46A.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-RKXDHLUI.mjs';

package/package.json

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

package/src/alert/ExpandableAlert.tsx

@@ -6,6 +6,7 @@ import {
   AccordionPanel,
   Box,
   Flex,
+  useMultiStyleConfig,
 } from "@chakra-ui/react";
 import React from "react";
 import { AlertIcon } from "./AlertIcon";
@@ -44,6 +45,7 @@ export const ExpandableAlert = ({
   onToggle = () => {},
   ...boxProps
 }: ExpandableAlertProps) => {
+  const styles = useMultiStyleConfig("AlertExpandable", { variant });
   return (
     <BaseAlert variant={variant} {...boxProps} paddingX={0} paddingY={0}>
       <Accordion
@@ -53,7 +55,7 @@ export const ExpandableAlert = ({
         flexGrow="1"
       >
         <AccordionItem>
-          <AccordionButton paddingX={3} paddingY={2} fontSize="inherit">
+          <AccordionButton sx={styles.container}>
             <Flex
               justifyContent="space-between"
               alignItems="center"

package/src/input/Combobox.tsx

@@ -11,6 +11,10 @@ export type ComboboxProps<T> = AriaComboBoxProps<T> & {
   isLoading?: boolean;
   /** Optional UI to show when there are no matching items */
   emptyContent?: React.ReactNode;
+  /** A ref to the input field */
+  inputRef?: React.RefObject<HTMLInputElement>;
+  /** If you want to allow an empty collection */
+  allowsEmptyCollection?: boolean;
 } & Pick<
     InputProps,
     | "marginTop"
@@ -78,22 +82,25 @@ export function Combobox<T extends object>({
   paddingX,
   paddingY,
   emptyContent,
+  inputRef: externalInputRef,
+  allowsEmptyCollection,
   ...rest
 }: ComboboxProps<T>) {
   const { contains } = useFilter({ sensitivity: "base" });
 
-  const inputRef = useRef<HTMLInputElement>(null);
+  const fallbackInputRef = useRef<HTMLInputElement>(null);
+  const inputRef = externalInputRef ?? fallbackInputRef;
   const listBoxRef = useRef(null);
   const popoverRef = useRef(null);
 
   const inputWidth = useInputWidth(inputRef);
 
   const state = useComboBoxState({
-    ...rest,
-    defaultFilter: contains,
     allowsEmptyCollection: Boolean(emptyContent),
+    defaultFilter: contains,
     shouldCloseOnBlur: true,
     label,
+    ...rest,
   });
 
   const {

package/src/theme/components/alert-expandable.ts

@@ -0,0 +1,91 @@
+import { anatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
+import { getBoxShadowString } from "../utils/box-shadow-utils";
+
+const parts = anatomy("alertExpandable").parts("container");
+const helpers = createMultiStyleConfigHelpers(parts.keys);
+
+const config = helpers.defineMultiStyleConfig({
+  baseStyle: {
+    container: {
+      paddingX: 3,
+      paddingY: 2,
+      fontSize: "inherit",
+      _expanded: {
+        borderBottomRadius: "none",
+      },
+    },
+  },
+  variants: {
+    info: {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "sky",
+            borderWidth: 2,
+          }),
+        },
+        _active: {
+          backgroundColor: "icyBlue",
+        },
+      },
+    },
+    success: {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "blueGreen",
+            borderWidth: 2,
+          }),
+        },
+        _active: {
+          backgroundColor: "mint",
+        },
+      },
+    },
+    warning: {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "sunshine",
+            borderWidth: 2,
+          }),
+        },
+        _active: {
+          backgroundColor: "cornSilk",
+        },
+      },
+    },
+    "alt-transport": {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "golden",
+            borderWidth: 2,
+          }),
+        },
+        _active: {
+          backgroundColor: "sunshine",
+        },
+      },
+    },
+    error: {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "apricot",
+            borderWidth: 2,
+          }),
+        },
+        _active: {
+          backgroundColor: "pink",
+        },
+      },
+    },
+  },
+  defaultProps: {
+    variant: "info",
+  },
+});
+
+export default config;

package/src/theme/components/index.ts

@@ -36,3 +36,4 @@ 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";
+export { default as AlertExpandable } from "./alert-expandable";

package/src/theme/components/link.ts

@@ -1,6 +1,8 @@
 import { defineStyleConfig } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { focusVisibleStyles } from "../utils/focus-util";
+import { baseBackground, brandBackground } from "../utils/background-utils";
+import { baseText, brandText } from "../utils/text-utils";
 
 const config = defineStyleConfig({
   baseStyle: (props) => ({
@@ -38,25 +40,34 @@ const config = defineStyleConfig({
   }),
   variants: {
     primary: (props) => ({
-      color: mode("pine", "coralGreen")(props),
+      ...brandText("default", props),
       _hover: {
-        color: mode("darkTeal", "white")(props),
-        backgroundColor: mode("coralGreen", "whiteAlpha.200")(props),
+        ...brandText("hover", props),
+        ...brandBackground("hover", props),
       },
       _active: {
-        color: mode("pine", "white")(props),
-        backgroundColor: mode("mint", "whiteAlpha.100")(props),
+        ...brandText("active", props),
+        ...brandBackground("active", props),
       },
     }),
     secondary: (props) => ({
-      color: mode("darkGrey", "white")(props),
+      backgroundImage: `linear-gradient(${mode(
+        "blackAlpha.400",
+        "whiteAlpha.400",
+      )(props)}, ${mode("blackAlpha.400", "whiteAlpha.400")(props)})`,
+      ...baseText("default", props),
+      "&:focus, &:focus-visible, &:active, &:hover": {
+        outline: "solid",
+        outlineWidth: "1px",
+      },
+      ...baseBackground("default", props),
       _hover: {
-        backgroundColor: mode("blackAlpha.100", "whiteAlpha.200")(props),
-        color: mode("darkGrey", "white")(props),
+        outlineColor: mode("darkGrey", "white")(props),
+        ...baseBackground("hover", props),
       },
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.100")(props),
-        color: mode("darkGrey", "white")(props),
+        outlineColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+        ...baseBackground("active", props),
       },
     }),
   },

package/src/theme/components/listbox.ts

@@ -44,7 +44,10 @@ const config = helpers.defineMultiStyleConfig({
       _hover: {
         ...ghostBackground("hover", props),
       },
-      ...focusVisibleStyles(props),
+      _focus: {
+        ...ghostBackground("selected", props),
+        ...focusVisibleStyles(props)._focusVisible,
+      },
       _selected: {
         ...ghostBackground("selected", props),
       },

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

@@ -38,3 +38,23 @@ export function accentText(state: AccentTextState, props: StyleFunctionProps) {
       };
   }
 }
+
+type BrandTextState = Subset<State, "hover" | "active" | "default">;
+
+export function brandText(state: BrandTextState, props: StyleFunctionProps) {
+  switch (state) {
+    case "hover":
+      return {
+        color: mode("white", "darkTeal")(props),
+      };
+    case "active":
+      return {
+        color: mode("white", "darkTeal")(props),
+      };
+    case "default":
+    default:
+      return {
+        color: mode("pine", "coralGreen")(props),
+      };
+  }
+}