@vygruppen/spor-react 8.0.0 → 8.1.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@8.0.0 build
+> @vygruppen/spor-react@8.1.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -10,13 +10,13 @@
 ESM Build start
 "Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/index.js".
 DTS Build start
-"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-EGC6XZHT.mjs".
-CJS dist/index.js 500.06 KB
-CJS ⚡️ Build success in 2156ms
+"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-JUNOSADJ.mjs".
+CJS dist/index.js 502.62 KB
+CJS ⚡️ Build success in 2210ms
 ESM dist/index.mjs                      2.01 KB
-ESM dist/CountryCodeSelect-NCM6JIBM.mjs 1.19 KB
-ESM dist/chunk-EGC6XZHT.mjs             392.96 KB
-ESM ⚡️ Build success in 2158ms
-DTS ⚡️ Build success in 10577ms
-DTS dist/index.d.ts  268.53 KB
-DTS dist/index.d.mts 268.53 KB
+ESM dist/CountryCodeSelect-X4ONXTIF.mjs 1.19 KB
+ESM dist/chunk-JUNOSADJ.mjs             394.94 KB
+ESM ⚡️ Build success in 2211ms
+DTS ⚡️ Build success in 11198ms
+DTS dist/index.d.ts  271.10 KB
+DTS dist/index.d.mts 271.10 KB

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @vygruppen/spor-react
 
+## 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
+
+- 0488e4a: Tooltip, Nudge: Fix some bugs
+
 ## 8.0.0
 
 ### Major Changes

package/dist/{CountryCodeSelect-NCM6JIBM.mjs → CountryCodeSelect-X4ONXTIF.mjs}

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

package/dist/{chunk-EGC6XZHT.mjs → chunk-JUNOSADJ.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,10 +2668,12 @@ function Combobox({
   paddingX,
   paddingY,
   emptyContent,
+  inputRef: externalInputRef,
   ...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);
@@ -3429,7 +3432,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-NCM6JIBM.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-X4ONXTIF.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -4115,7 +4118,7 @@ var Nudge = ({
     }
     return null;
   }
-  return /* @__PURE__ */ React69__default.createElement(DarkMode, null, /* @__PURE__ */ React69__default.createElement(
+  return /* @__PURE__ */ React69__default.createElement(
     Popover,
     {
       arrowSize: 12,
@@ -4124,8 +4127,8 @@ var Nudge = ({
       ...props
     },
     /* @__PURE__ */ React69__default.createElement(PopoverAnchor, null, children),
-    /* @__PURE__ */ React69__default.createElement(PopoverContent, { borderRadius: "sm" }, /* @__PURE__ */ React69__default.createElement(PopoverArrow, null), /* @__PURE__ */ React69__default.createElement(PopoverCloseButton, null), /* @__PURE__ */ React69__default.createElement(PopoverBody, { margin: 1 }, /* @__PURE__ */ React69__default.createElement(Box, { marginRight: 4 }, content), /* @__PURE__ */ React69__default.createElement(Box, { marginTop: 1.5 }, actions ?? /* @__PURE__ */ React69__default.createElement(ButtonGroup, null, /* @__PURE__ */ React69__default.createElement(Button, { variant: "tertiary", size: "xs" }, t2(texts20.close)), /* @__PURE__ */ React69__default.createElement(Button, { variant: "secondary", size: "xs", fontWeight: "bold" }, t2(texts20.showMe))))))
-  ));
+    /* @__PURE__ */ React69__default.createElement(PopoverContent, { borderRadius: "sm" }, /* @__PURE__ */ React69__default.createElement(DarkMode, null, /* @__PURE__ */ React69__default.createElement(PopoverArrow, null), /* @__PURE__ */ React69__default.createElement(PopoverCloseButton, null), /* @__PURE__ */ React69__default.createElement(PopoverBody, { margin: 1 }, /* @__PURE__ */ React69__default.createElement(Box, { marginRight: 4 }, content), /* @__PURE__ */ React69__default.createElement(Box, { marginTop: 1.5 }, actions ?? /* @__PURE__ */ React69__default.createElement(ButtonGroup, null, /* @__PURE__ */ React69__default.createElement(Button, { variant: "tertiary", size: "xs" }, t2(texts20.close)), /* @__PURE__ */ React69__default.createElement(Button, { variant: "secondary", size: "xs", fontWeight: "bold" }, t2(texts20.showMe)))))))
+  );
 };
 var texts20 = createTexts({
   close: {
@@ -6246,16 +6249,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 +6421,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 +6461,7 @@ function anatomy(name, map = {}) {
   }
   const __type = {};
   return {
-    parts: parts15,
+    parts: parts16,
     toPart,
     extend,
     selectors,
@@ -9512,6 +9515,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,
@@ -12611,10 +12615,10 @@ var config27 = helpers18.defineMultiStyleConfig({
       zIndex: "popover"
     },
     content: {
-      [$popperBg2.variable]: `colors.darkTeal`,
+      [$popperBg2.variable]: mode("colors.darkTeal", "colors.pine")(props),
       backgroundColor: $popperBg2.reference,
       [$arrowBg3.variable]: $popperBg2.reference,
-      [$arrowShadowColor2.variable]: `colors.blackAlpha.300`,
+      [$arrowShadowColor2.variable]: "blackAlpha.300",
       color: "white",
       borderRadius: "sm",
       padding: 1.5,
@@ -12634,15 +12638,15 @@ var config27 = helpers18.defineMultiStyleConfig({
       position: "absolute",
       color: "white",
       ...focusVisibleStyles(props),
+      _hover: {
+        backgroundColor: "whiteAlpha.100"
+      },
       _active: {
         backgroundColor: "whiteAlpha.200"
       },
       borderRadius: "sm",
       top: 2,
-      right: 2,
-      width: 2,
-      height: 2,
-      padding: 1
+      right: 1
     }
   }),
   sizes: {
@@ -13581,6 +13585,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,8 @@ 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>;
 } & 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 +800,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, ...rest }: ComboboxProps<T>): React.JSX.Element;
 
 type FormControlProps = FormControlProps$1;
 declare const FormControl: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", FormControlProps$1>;
@@ -4563,15 +4565,15 @@ declare const theme: {
                     clipPath: string;
                 };
                 closeButton: {
+                    _hover: {
+                        backgroundColor: string;
+                    };
                     _active: {
                         backgroundColor: string;
                     };
                     borderRadius: string;
                     top: number;
                     right: number;
-                    width: number;
-                    height: number;
-                    padding: number;
                     _focusVisible: {
                         outlineWidth: string;
                         outlineColor: string;
@@ -5807,6 +5809,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,8 @@ 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>;
 } & 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 +800,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, ...rest }: ComboboxProps<T>): React.JSX.Element;
 
 type FormControlProps = FormControlProps$1;
 declare const FormControl: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", FormControlProps$1>;
@@ -4563,15 +4565,15 @@ declare const theme: {
                     clipPath: string;
                 };
                 closeButton: {
+                    _hover: {
+                        backgroundColor: string;
+                    };
                     _active: {
                         backgroundColor: string;
                     };
                     borderRadius: string;
                     top: number;
                     right: number;
-                    width: number;
-                    height: number;
-                    padding: number;
                     _focusVisible: {
                         outlineWidth: string;
                         outlineColor: string;
@@ -5807,6 +5809,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,10 +3172,12 @@ function Combobox({
   paddingX,
   paddingY,
   emptyContent,
+  inputRef: externalInputRef,
   ...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);
@@ -4927,7 +4930,7 @@ var init_Nudge = __esm({
         }
         return null;
       }
-      return /* @__PURE__ */ React69__namespace.default.createElement(react.DarkMode, null, /* @__PURE__ */ React69__namespace.default.createElement(
+      return /* @__PURE__ */ React69__namespace.default.createElement(
         react.Popover,
         {
           arrowSize: 12,
@@ -4936,8 +4939,8 @@ var init_Nudge = __esm({
           ...props
         },
         /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverAnchor, null, children),
-        /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverContent, { borderRadius: "sm" }, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverArrow, null), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverCloseButton, null), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverBody, { margin: 1 }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginRight: 4 }, content), /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginTop: 1.5 }, actions ?? /* @__PURE__ */ React69__namespace.default.createElement(exports.ButtonGroup, null, /* @__PURE__ */ React69__namespace.default.createElement(exports.Button, { variant: "tertiary", size: "xs" }, t2(texts21.close)), /* @__PURE__ */ React69__namespace.default.createElement(exports.Button, { variant: "secondary", size: "xs", fontWeight: "bold" }, t2(texts21.showMe))))))
-      ));
+        /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverContent, { borderRadius: "sm" }, /* @__PURE__ */ React69__namespace.default.createElement(react.DarkMode, null, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverArrow, null), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverCloseButton, null), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverBody, { margin: 1 }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginRight: 4 }, content), /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginTop: 1.5 }, actions ?? /* @__PURE__ */ React69__namespace.default.createElement(exports.ButtonGroup, null, /* @__PURE__ */ React69__namespace.default.createElement(exports.Button, { variant: "tertiary", size: "xs" }, t2(texts21.close)), /* @__PURE__ */ React69__namespace.default.createElement(exports.Button, { variant: "secondary", size: "xs", fontWeight: "bold" }, t2(texts21.showMe)))))))
+      );
     };
     texts21 = createTexts({
       close: {
@@ -6081,16 +6084,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 +7416,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 +7456,7 @@ function anatomy(name, map = {}) {
   }
   const __type = {};
   return {
-    parts: parts15,
+    parts: parts16,
     toPart,
     extend,
     selectors,
@@ -14226,10 +14229,10 @@ var init_popover = __esm({
           zIndex: "popover"
         },
         content: {
-          [$popperBg2.variable]: `colors.darkTeal`,
+          [$popperBg2.variable]: themeTools.mode("colors.darkTeal", "colors.pine")(props),
           backgroundColor: $popperBg2.reference,
           [$arrowBg3.variable]: $popperBg2.reference,
-          [$arrowShadowColor2.variable]: `colors.blackAlpha.300`,
+          [$arrowShadowColor2.variable]: "blackAlpha.300",
           color: "white",
           borderRadius: "sm",
           padding: 1.5,
@@ -14249,15 +14252,15 @@ var init_popover = __esm({
           position: "absolute",
           color: "white",
           ...focusVisibleStyles(props),
+          _hover: {
+            backgroundColor: "whiteAlpha.100"
+          },
           _active: {
             backgroundColor: "whiteAlpha.200"
           },
           borderRadius: "sm",
           top: 2,
-          right: 2,
-          width: 2,
-          height: 2,
-          padding: 1
+          right: 1
         }
       }),
       sizes: {
@@ -15276,11 +15279,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 +15457,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-EGC6XZHT.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-JUNOSADJ.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "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,8 @@ 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>;
 } & Pick<
     InputProps,
     | "marginTop"
@@ -78,11 +80,13 @@ export function Combobox<T extends object>({
   paddingX,
   paddingY,
   emptyContent,
+  inputRef: externalInputRef,
   ...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);
 

package/src/nudge/Nudge.tsx

@@ -98,15 +98,15 @@ export const Nudge = ({
     return null;
   }
   return (
-    <DarkMode>
-      <Popover
-        arrowSize={12}
-        arrowShadowColor="none"
-        defaultIsOpen={true}
-        {...props}
-      >
-        <PopoverAnchor>{children}</PopoverAnchor>
-        <PopoverContent borderRadius="sm">
+    <Popover
+      arrowSize={12}
+      arrowShadowColor="none"
+      defaultIsOpen={true}
+      {...props}
+    >
+      <PopoverAnchor>{children}</PopoverAnchor>
+      <PopoverContent borderRadius="sm">
+        <DarkMode>
           <PopoverArrow />
           <PopoverCloseButton />
           <PopoverBody margin={1}>
@@ -124,9 +124,9 @@ export const Nudge = ({
               )}
             </Box>
           </PopoverBody>
-        </PopoverContent>
-      </Popover>
-    </DarkMode>
+        </DarkMode>
+      </PopoverContent>
+    </Popover>
   );
 };
 

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/popover.ts

@@ -1,6 +1,6 @@
 import { popoverAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { cssVar } from "@chakra-ui/theme-tools";
+import { cssVar, mode } from "@chakra-ui/theme-tools";
 import { focusVisibleStyles } from "../utils/focus-util";
 
 const $popperBg = cssVar("popper-bg");
@@ -15,10 +15,10 @@ const config = helpers.defineMultiStyleConfig({
       zIndex: "popover",
     },
     content: {
-      [$popperBg.variable]: `colors.darkTeal`,
+      [$popperBg.variable]: mode("colors.darkTeal", "colors.pine")(props),
       backgroundColor: $popperBg.reference,
       [$arrowBg.variable]: $popperBg.reference,
-      [$arrowShadowColor.variable]: `colors.blackAlpha.300`,
+      [$arrowShadowColor.variable]: "blackAlpha.300",
       color: "white",
       borderRadius: "sm",
       padding: 1.5,
@@ -39,15 +39,15 @@ const config = helpers.defineMultiStyleConfig({
       position: "absolute",
       color: "white",
       ...focusVisibleStyles(props),
+      _hover: {
+        backgroundColor: "whiteAlpha.100",
+      },
       _active: {
         backgroundColor: "whiteAlpha.200",
       },
       borderRadius: "sm",
       top: 2,
-      right: 2,
-      width: 2,
-      height: 2,
-      padding: 1,
+      right: 1,
     },
   }),
   sizes: {