@biblioteksentralen/react 2.0.1 → 3.0.0-beta.10

package/dist/index.js

@@ -209,6 +209,7 @@ function _create_super(Derived) {
         return _possible_constructor_return(this, result);
     };
 }
+var _import_react13_defaultConfig_theme_recipes_button_variants, _import_react13_defaultConfig_theme_recipes_button, _import_react13_defaultConfig_theme_recipes, _import_react13_defaultConfig_theme;
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -294,21 +295,27 @@ __export(src_exports, {
     HideWithCSS: function() {
         return HideWithCSS;
     },
+    IconButton: function() {
+        return IconButton;
+    },
     Input: function() {
         return Input;
     },
     Link: function() {
         return Link;
     },
+    Toaster: function() {
+        return Toaster;
+    },
     VisuallyHidden: function() {
         return VisuallyHidden;
     },
-    biblioteksentralenChakraTheme: function() {
-        return biblioteksentralenChakraTheme;
-    },
     colors: function() {
         return colors;
     },
+    toaster: function() {
+        return toaster;
+    },
     withErrorBoundary: function() {
         return withErrorBoundary;
     }
@@ -414,46 +421,42 @@ var variantStyles = {
     }
 };
 function Alert(_param) {
-    var status = _param.status, children = _param.children, variant = _param.variant, rest = _object_without_properties(_param, [
+    var status = _param.status, children = _param.children, variant = _param.variant, header = _param.header, rest = _object_without_properties(_param, [
         "status",
         "children",
-        "variant"
+        "variant",
+        "header"
     ]);
     var colors2 = colorLookup[status];
-    return /* @__PURE__ */ import_react2.default.createElement(import_react.Flex, _object_spread({
-        role: "alert",
-        flexWrap: "wrap",
-        alignItems: "center",
-        gridGap: "0.5em 0.6em",
-        background: "white",
+    return /* @__PURE__ */ import_react2.default.createElement(import_react.Alert.Root, _object_spread({
+        status: status,
+        fontSize: "md",
         border: "0.1rem solid",
         borderColor: colors2.color,
         backgroundColor: colors2.bg,
-        padding: "0.75rem",
-        borderRadius: "0.3rem"
-    }, variant ? variantStyles[variant] : {}, rest), /* @__PURE__ */ import_react2.default.createElement(import_react.Box, {
-        color: colors2.color,
-        flex: "0 0",
-        marginLeft: "auto",
-        marginRight: "auto",
-        lineHeight: "1",
-        fontSize: "1.5em"
-    }, iconLookup[status]), /* @__PURE__ */ import_react2.default.createElement(import_react.Box, {
-        flex: "1"
-    }, children));
+        display: "flex",
+        flexWrap: "wrap"
+    }, variant === "inline" ? variantStyles[variant] : {}, rest), /* @__PURE__ */ import_react2.default.createElement(import_react.Alert.Indicator, {
+        marginX: "auto"
+    }, iconLookup[status]), /* @__PURE__ */ import_react2.default.createElement(import_react.Alert.Content, {
+        color: "black"
+    }, header && /* @__PURE__ */ import_react2.default.createElement(import_react.Alert.Title, null, header), /* @__PURE__ */ import_react2.default.createElement(import_react.Alert.Description, null, children)));
 }
 // src/components/Button.tsx
 var import_react3 = require("@chakra-ui/react");
 var Button = import_react3.Button;
+// src/components/IconButton.tsx
+var import_react4 = require("@chakra-ui/react");
+var IconButton = import_react4.IconButton;
 // src/components/ConditionalWrapper.tsx
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var ConditionalWrapper = function(param) {
     var condition = param.condition, children = param.children, Wrapper = param.wrapper;
-    return condition ? /* @__PURE__ */ import_react4.default.createElement(Wrapper, null, children) : /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, children);
+    return condition ? /* @__PURE__ */ import_react5.default.createElement(Wrapper, null, children) : /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, children);
 };
 // src/components/HideWithCSS.tsx
-var import_react5 = require("@chakra-ui/react");
-var import_react6 = __toESM(require("react"));
+var import_react6 = require("@chakra-ui/react");
+var import_react7 = __toESM(require("react"));
 var HideWithCSS = function(_param) {
     var children = _param.children, above = _param.above, below = _param.below, chakraProps = _object_without_properties(_param, [
         "children",
@@ -463,22 +466,22 @@ var HideWithCSS = function(_param) {
     var display = _object_spread({}, !!below ? _define_property({
         base: "none"
     }, below, "block") : {}, !!above ? _define_property({}, above, "none") : {});
-    return /* @__PURE__ */ import_react6.default.createElement(import_react5.Box, _object_spread_props(_object_spread({}, chakraProps), {
+    return /* @__PURE__ */ import_react7.default.createElement(import_react6.Box, _object_spread_props(_object_spread({}, chakraProps), {
         display: display
     }), children);
 };
 // src/components/Input.tsx
-var import_react9 = require("@chakra-ui/react");
-var import_react10 = __toESM(require("react"));
+var import_react10 = require("@chakra-ui/react");
+var import_react11 = __toESM(require("react"));
 // src/components/VisuallyHidden.tsx
-var import_react7 = __toESM(require("react"));
-var import_react8 = require("@chakra-ui/react");
+var import_react8 = __toESM(require("react"));
+var import_react9 = require("@chakra-ui/react");
 function VisuallyHidden(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
     ]);
-    var _import_react7_default_useState = _sliced_to_array(import_react7.default.useState(false), 2), forceShow = _import_react7_default_useState[0], setForceShow = _import_react7_default_useState[1];
-    (0, import_react7.useEffect)(function() {
+    var _import_react8_default_useState = _sliced_to_array(import_react8.default.useState(false), 2), forceShow = _import_react8_default_useState[0], setForceShow = _import_react8_default_useState[1];
+    (0, import_react8.useEffect)(function() {
         if (isDevelopment()) {
             var handleKeyDown = function(ev) {
                 if (ev.key === "Alt") {
@@ -498,12 +501,12 @@ function VisuallyHidden(_param) {
             };
         }
     }, []);
-    return forceShow ? /* @__PURE__ */ import_react7.default.createElement("span", null, children) : /* @__PURE__ */ import_react7.default.createElement(import_react8.VisuallyHidden, {
+    return forceShow ? /* @__PURE__ */ import_react8.default.createElement("span", null, children) : /* @__PURE__ */ import_react8.default.createElement(import_react9.VisuallyHidden, {
         position: "fixed"
     }, children);
 }
 // src/components/Input.tsx
-var Input = (0, import_react10.forwardRef)(function(props, ref) {
+var Input = function(props) {
     var labelProps = props.labelProps, label = props.label, helperText = props.helperText, errorMessage = props.errorMessage, hideLabel = props.hideLabel, inputProps = _object_without_properties(props, [
         "labelProps",
         "label",
@@ -511,27 +514,22 @@ var Input = (0, import_react10.forwardRef)(function(props, ref) {
         "errorMessage",
         "hideLabel"
     ]);
-    var formLabel = /* @__PURE__ */ import_react10.default.createElement(import_react9.FormLabel, _object_spread({}, labelProps), label);
-    return /* @__PURE__ */ import_react10.default.createElement(import_react9.FormControl, {
-        isInvalid: !!errorMessage
-    }, hideLabel ? /* @__PURE__ */ import_react10.default.createElement(VisuallyHidden, null, formLabel) : formLabel, helperText && /* @__PURE__ */ import_react10.default.createElement(import_react9.FormHelperText, {
-        marginTop: "-0.25em",
-        marginBottom: "0.25em"
-    }, helperText), /* @__PURE__ */ import_react10.default.createElement(import_react9.Input, _object_spread({
-        ref: ref
-    }, inputProps)), errorMessage && /* @__PURE__ */ import_react10.default.createElement(import_react9.FormErrorMessage, {
-        color: colors.statusRed,
-        fontWeight: 600
-    }, errorMessage));
-});
+    var formLabel = /* @__PURE__ */ import_react11.default.createElement(import_react10.Field.Label, _object_spread({}, labelProps), label);
+    return /* @__PURE__ */ import_react11.default.createElement(import_react10.Field.Root, {
+        invalid: !!errorMessage
+    }, hideLabel ? /* @__PURE__ */ import_react11.default.createElement(VisuallyHidden, null, formLabel) : formLabel, helperText && /* @__PURE__ */ import_react11.default.createElement(import_react10.Field.HelperText, null, helperText), /* @__PURE__ */ import_react11.default.createElement(import_react10.Input, _object_spread({}, inputProps)), errorMessage && /* @__PURE__ */ import_react11.default.createElement(import_react10.Field.ErrorText, null, errorMessage));
+};
 // src/components/Link.tsx
-var import_react11 = require("@chakra-ui/react");
-var Link = import_react11.Link;
+var import_react12 = require("@chakra-ui/react");
+var Link = import_react12.Link;
 // src/BiblioteksentralenProvider.tsx
-var import_react14 = require("@chakra-ui/react");
-var import_react15 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
+var import_react21 = require("@chakra-ui/react");
+// src/styles/chakraTheme/biblioteksentralenChakraTheme.ts
+var import_react19 = require("@chakra-ui/react");
 // src/styles/chakraTheme/ButtonStyles.ts
-var variants = {
+var import_react13 = require("@chakra-ui/react");
+var variants = _object_spread({
     primary: {
         backgroundColor: colors.black,
         color: "white",
@@ -541,208 +539,229 @@ var variants = {
         }
     },
     secondary: {
-        borderColor: "currentColor",
-        backgroundColor: "transparent",
-        color: "currentColor",
-        _hover: {
-            backgroundColor: "hsla(0deg, 0%, 50%, 0.15)"
-        }
+        borderColor: "currentColor"
     },
-    tertiary: {
-        backgroundColor: "transparent",
+    tertiary: {}
+}, (_import_react13_defaultConfig_theme = import_react13.defaultConfig.theme) === null || _import_react13_defaultConfig_theme === void 0 ? void 0 : (_import_react13_defaultConfig_theme_recipes = _import_react13_defaultConfig_theme.recipes) === null || _import_react13_defaultConfig_theme_recipes === void 0 ? void 0 : (_import_react13_defaultConfig_theme_recipes_button = _import_react13_defaultConfig_theme_recipes.button) === null || _import_react13_defaultConfig_theme_recipes_button === void 0 ? void 0 : (_import_react13_defaultConfig_theme_recipes_button_variants = _import_react13_defaultConfig_theme_recipes_button.variants) === null || _import_react13_defaultConfig_theme_recipes_button_variants === void 0 ? void 0 : _import_react13_defaultConfig_theme_recipes_button_variants.variant);
+var ButtonStyles = (0, import_react13.defineRecipe)({
+    base: {
+        borderColor: "transparent",
+        borderWidth: "0.1em",
+        fontWeight: 600,
         color: "currentColor",
+        backgroundColor: "transparent",
         _hover: {
-            backgroundColor: "hsla(0deg, 0%, 50%, 0.15)",
-            color: "currentColor"
-        }
-    }
-};
-var ButtonStyles = {
-    baseStyle: {
-        border: "transparent 0.1em solid",
-        borderRadius: "0.35em",
-        fontWeight: 600,
+            backgroundColor: "currentColor/7"
+        },
         _disabled: {
-            backgroundColor: "".concat(colors.grey45, " !important"),
-            color: "white !important",
+            backgroundColor: "".concat(colors.grey45),
+            color: "white",
             opacity: 1
         }
     },
-    sizes: {
-        sm: {
-            padding: "0.2em 0.5em",
-            fontSize: "1rem"
+    variants: {
+        variant: variants,
+        size: {
+            sm: {
+                h: "8",
+                px: "2",
+                textStyle: "md"
+            },
+            md: {
+                textStyle: "md"
+            },
+            lg: {
+                h: "12",
+                textStyle: "lg"
+            }
         }
     },
-    variants: variants,
-    defaultProps: {
-        variant: "primary"
-    }
-};
-// src/styles/chakraTheme/CheckboxStyles.ts
-var import_react12 = require("@chakra-ui/react");
-var import_anatomy = require("@chakra-ui/anatomy");
-var _ref = (0, import_react12.createMultiStyleConfigHelpers)(import_anatomy.checkboxAnatomy.keys), definePartsStyle = _ref.definePartsStyle, defineMultiStyleConfigWithTypeIssue = _ref.defineMultiStyleConfig;
-var defineMultiStyleConfig = defineMultiStyleConfigWithTypeIssue;
-var baseStyle = definePartsStyle({
-    control: {
-        background: "white"
+    defaultVariants: {
+        variant: "primary",
+        size: "md"
     }
 });
-var CheckboxStyles = defineMultiStyleConfig({
-    baseStyle: baseStyle
-});
 // src/styles/chakraTheme/ContainerStyles.ts
-var ContainerStyles = {
-    baseStyle: {
+var import_react14 = require("@chakra-ui/react");
+var ContainerStyles = (0, import_react14.defineRecipe)({
+    base: {
         px: ".75rem"
     }
-};
+});
 // src/styles/chakraTheme/HeadingStyles.ts
-var HeadingStyles = {
-    baseStyle: {
+var import_react15 = require("@chakra-ui/react");
+var HeadingStyles = (0, import_react15.defineRecipe)({
+    base: {
         fontWeight: "600"
     }
-};
+});
 // src/styles/chakraTheme/InputStyles.ts
-var import_theme_tools = require("@chakra-ui/theme-tools");
-var InputStyles = {
-    baseStyle: function(props) {
-        return {
-            field: {
-                _placeholder: {
-                    color: (0, import_theme_tools.mode)("gray.500", "whiteAlpha.500")(props)
-                }
+var import_react16 = require("@chakra-ui/react");
+var variants2 = {
+    subtle: {
+        backgroundColor: {
+            _light: "gray.200",
+            _dark: "whiteAlpha.100"
+        },
+        _hover: {
+            bg: {
+                _light: "gray.300",
+                _dark: "whiteAlpha.200"
             }
-        };
+        }
     },
-    variants: {
-        filled: function(props) {
-            return {
-                field: {
-                    bg: (0, import_theme_tools.mode)("gray.200", "whiteAlpha.100")(props),
-                    _hover: {
-                        bg: (0, import_theme_tools.mode)("gray.300", "whiteAlpha.200")(props)
-                    }
-                }
-            };
-        },
-        outline: function(props) {
-            return {
-                field: {
-                    borderColor: (0, import_theme_tools.mode)("gray.300", "whiteAlpha.300")(props),
-                    _hover: {
-                        borderColor: (0, import_theme_tools.mode)("gray.400", "whiteAlpha.400")(props)
-                    }
-                }
-            };
+    outline: {
+        borderColor: {
+            _light: "gray.300",
+            _dark: "whiteAlpha.300"
         },
-        flushed: function(props) {
-            return {
-                field: {
-                    borderColor: (0, import_theme_tools.mode)("gray.300", "whiteAlpha.300")(props),
-                    _hover: {
-                        borderColor: (0, import_theme_tools.mode)("gray.400", "whiteAlpha.400")(props)
-                    }
-                }
-            };
+        _hover: {
+            borderColor: {
+                _light: "gray.400",
+                _dark: "whiteAlpha.400"
+            }
         }
     },
-    defaultProps: {
-        variant: "filled"
+    flushed: {
+        borderColor: {
+            _light: "gray.300",
+            _dark: "whiteAlpha.300"
+        },
+        _hover: {
+            borderColor: {
+                _light: "gray.400",
+                _dark: "whiteAlpha.400"
+            }
+        }
     }
 };
+var InputStyles = (0, import_react16.defineRecipe)({
+    base: {
+        _placeholder: {
+            color: {
+                _light: "gray.500",
+                _dark: "whiteAlpha.500"
+            }
+        }
+    },
+    variants: {
+        variant: variants2
+    },
+    defaultVariants: {
+        variant: "subtle"
+    }
+});
 // src/styles/chakraTheme/LinkStyles.ts
-var variants2 = {
+var import_react17 = require("@chakra-ui/react");
+var variants3 = {
     plain: {
+        color: "currentColor",
         textDecoration: "none",
+        textDecorationColor: "currentColor/30",
         _hover: {
             textDecoration: "underline"
         }
-    }
-};
-var LinkStyles = {
-    baseStyle: {
+    },
+    underline: {
+        color: "currentColor",
         textDecoration: "underline",
+        textDecorationColor: "currentColor/30",
         _hover: {
             textDecoration: "none"
         }
-    },
-    variants: variants2
-};
-// src/styles/chakraTheme/ModalStyles.ts
-var ModalStyles = {
-    baseStyle: {
-        // Fix for modal height on Safari iOS:
-        // https://github.com/chakra-ui/chakra-ui/issues/4680#issuecomment-1301640929
-        dialogContainer: {
-            "@supports(height: -webkit-fill-available)": {},
-            height: "100%"
-        }
     }
 };
+var LinkStyles = (0, import_react17.defineRecipe)({
+    variants: {
+        variant: variants3
+    },
+    defaultVariants: {
+        variant: "underline"
+    }
+});
 // src/styles/chakraTheme/SpinnerStyles.ts
-var import_react13 = require("@chakra-ui/react");
-var SpinnerStyles = {};
-import_react13.Spinner.defaultProps = _object_spread_props(_object_spread({}, import_react13.Spinner.defaultProps), {
-    speed: ".8s",
-    color: colors.accentBlueMedium,
-    emptyColor: "rgba(0,0,0,.2)",
-    thickness: ".175em"
+var import_react18 = require("@chakra-ui/react");
+var SpinnerStyles = (0, import_react18.defineRecipe)({
+    base: {
+        animationDuration: ".8s",
+        color: colors.accentBlueMedium,
+        // Todo: Legg til trackColor: https://chakra-ui.com/docs/components/spinner#track-color
+        borderWidth: ".175em"
+    }
 });
 // src/styles/chakraTheme/sizes.ts
 var container = {
-    sm: "40rem",
-    md: "48rem",
-    lg: "56rem",
+    sm: {
+        value: "40rem"
+    },
+    md: {
+        value: "48rem"
+    },
+    lg: {
+        value: "56rem"
+    },
     // Forsøker 56rem som standardbredde etter testing med Katrine
-    xl: "80rem"
+    xl: {
+        value: "80rem"
+    }
 };
 var sizes = {
     container: container
 };
 // src/styles/chakraTheme/biblioteksentralenChakraTheme.ts
-var biblioteksentralenChakraTheme = {
-    styles: {
-        global: {
-            html: {
-                fontSize: {
-                    base: "112.5%",
-                    md: "120%"
-                },
-                // Sørger for smooth scrolling for interne lenker som scroller til annet sted på siden,
-                // men ikke hvis fokus er utenfor viduet, feks ved søk i tekst (ctrl + f)
-                "&:focus-within": {
-                    scrollBehavior: "smooth !important"
-                }
-            }
-        }
-    },
-    components: {
-        Heading: HeadingStyles,
-        Spinner: SpinnerStyles,
-        Link: LinkStyles,
-        Button: ButtonStyles,
-        Input: InputStyles,
-        Container: ContainerStyles,
-        Modal: ModalStyles,
-        Checkbox: CheckboxStyles
-    },
+var tokens = (0, import_react19.defineTokens)({
     sizes: sizes
+});
+var globalHyphens = {
+    hyphens: "auto",
+    hyphenateLimitChars: "8 5 3"
+};
+var focusStyle = {
+    outline: "none !important",
+    boxShadow: "0 0 0 .1rem white, 0 0 0 .2rem black, 0 0 0 .3rem white !important",
+    transition: "box-shadow 0.1s ease-out"
 };
+var biblioteksentralenChakraTheme = (0, import_react19.defineConfig)({
+    theme: {
+        tokens: tokens,
+        recipes: {
+            heading: HeadingStyles,
+            button: ButtonStyles,
+            input: InputStyles,
+            link: LinkStyles,
+            container: ContainerStyles,
+            spinner: SpinnerStyles
+        }
+    },
+    globalCss: {
+        html: {
+            fontSize: {
+                base: "112.5%",
+                md: "120%"
+            },
+            // Sørger for smooth scrolling for interne lenker som scroller til annet sted på siden,
+            // men ikke hvis fokus er utenfor viduet, feks ved søk i tekst (ctrl + f)
+            "&:focus-within": {
+                scrollBehavior: "smooth !important"
+            }
+        },
+        body: _object_spread({}, globalHyphens),
+        // Felles fokus-styling for alle elementer for å sikre at de har en tydelig og uniform visuell indikasjon når de er i fokus
+        "*:focus-visible": focusStyle
+    }
+});
 // src/BiblioteksentralenProvider.tsx
-var emptyTheme = {};
-var BiblioteksentralenProvider = function(props) /* @__PURE__ */ {
-    var _props_customTheme;
-    return import_react15.default.createElement(import_react14.ChakraProvider, {
-        theme: (0, import_react14.extendTheme)(biblioteksentralenChakraTheme, (_props_customTheme = props.customTheme) !== null && _props_customTheme !== void 0 ? _props_customTheme : emptyTheme)
-    }, props.children);
+var import_system = require("@chakra-ui/system");
+var BiblioteksentralenProvider = function(props) {
+    return /* @__PURE__ */ import_react20.default.createElement(import_react21.ChakraProvider, {
+        value: (0, import_react21.createSystem)(import_react21.defaultConfig, biblioteksentralenChakraTheme, props.customTheme || {})
+    }, /* @__PURE__ */ import_react20.default.createElement(import_system.ColorModeProvider, _object_spread({}, props)));
 };
 // src/components/ErrorBoundary.tsx
-var import_react16 = require("@chakra-ui/react");
-var import_react17 = __toESM(require("react"));
+var import_react22 = require("@chakra-ui/react");
+var import_react23 = __toESM(require("react"));
 var StyledPre = function(props) {
-    return /* @__PURE__ */ import_react17.default.createElement(import_react16.Box, _object_spread({
+    return /* @__PURE__ */ import_react23.default.createElement(import_react22.Box, _object_spread({
         as: "pre",
         paddingTop: "0.5rem",
         wordBreak: "break-all",
@@ -750,8 +769,8 @@ var StyledPre = function(props) {
         fontSize: "0.8rem"
     }, props));
 };
-var ErrorBoundary = /*#__PURE__*/ function(_import_react17_default_Component) {
-    _inherits(ErrorBoundary, _import_react17_default_Component);
+var ErrorBoundary = /*#__PURE__*/ function(_import_react23_default_Component) {
+    _inherits(ErrorBoundary, _import_react23_default_Component);
     var _super = _create_super(ErrorBoundary);
     function ErrorBoundary(props) {
         _class_call_check(this, ErrorBoundary);
@@ -785,9 +804,9 @@ var ErrorBoundary = /*#__PURE__*/ function(_import_react17_default_Component) {
                     var stackTrace = (_this_state_errorInfo = this.state.errorInfo) === null || _this_state_errorInfo === void 0 ? void 0 : _this_state_errorInfo.componentStack;
                     var errormsg = (_this_state_error = this.state.error) === null || _this_state_error === void 0 ? void 0 : _this_state_error.message;
                     var info = this.props.boundaryName;
-                    return /* @__PURE__ */ import_react17.default.createElement("div", null, /* @__PURE__ */ import_react17.default.createElement(Alert, {
+                    return /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement(Alert, {
                         status: "error"
-                    }, /* @__PURE__ */ import_react17.default.createElement("p", null, "Beklager, det skjedde en teknisk feil."), isDevelopment() && (stackTrace || errormsg) && /* @__PURE__ */ import_react17.default.createElement("div", null, /* @__PURE__ */ import_react17.default.createElement(StyledPre, null, errormsg || ""), /* @__PURE__ */ import_react17.default.createElement(StyledPre, null, info || ""), /* @__PURE__ */ import_react17.default.createElement(StyledPre, null, stackTrace || ""))));
+                    }, /* @__PURE__ */ import_react23.default.createElement("p", null, "Beklager, det skjedde en teknisk feil."), isDevelopment() && (stackTrace || errormsg) && /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement(StyledPre, null, errormsg || ""), /* @__PURE__ */ import_react23.default.createElement(StyledPre, null, info || ""), /* @__PURE__ */ import_react23.default.createElement(StyledPre, null, stackTrace || ""))));
                 }
                 return this.props.children;
             }
@@ -803,15 +822,15 @@ var ErrorBoundary = /*#__PURE__*/ function(_import_react17_default_Component) {
         }
     ]);
     return ErrorBoundary;
-}(import_react17.default.Component);
+}(import_react23.default.Component);
 // src/components/HashLinkTarget.tsx
-var import_react18 = require("@chakra-ui/react");
-var import_react19 = __toESM(require("react"));
+var import_react24 = require("@chakra-ui/react");
+var import_react25 = __toESM(require("react"));
 var focusOnRelativeParentStyle = {
-    "&:focus-within": {
+    _focusWithin: {
         position: "static",
         boxShadow: "none",
-        "&::after": {
+        "&::after": _object_spread({
             content: '""',
             position: "absolute",
             top: 0,
@@ -819,16 +838,15 @@ var focusOnRelativeParentStyle = {
             height: "100%",
             width: "100%",
             pointerEvents: "none",
-            borderRadius: "0.25rem",
-            boxShadow: "var(--chakra-shadows-outline)"
-        }
+            borderRadius: "0.25rem"
+        }, focusStyle)
     }
 };
 function HashLinkTarget(props) {
-    return /* @__PURE__ */ import_react19.default.createElement(import_react18.Box, {
+    return /* @__PURE__ */ import_react25.default.createElement(import_react24.Box, {
         position: "relative",
-        sx: props.focusOnParent ? focusOnRelativeParentStyle : void 0
-    }, /* @__PURE__ */ import_react19.default.createElement(import_react18.Box, {
+        css: props.focusOnParent ? focusOnRelativeParentStyle : void 0
+    }, /* @__PURE__ */ import_react25.default.createElement(import_react24.Box, {
         id: props.id,
         tabIndex: props.focusOnParent ? -1 : void 0,
         position: "absolute",
@@ -839,15 +857,49 @@ function HashLinkTarget(props) {
     }));
 }
 // src/components/withErrorBoundary.tsx
-var import_react20 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var withErrorBoundary = function(Component, boundaryName) {
-    return import_react20.default.forwardRef(function(props, ref) {
-        return /* @__PURE__ */ import_react20.default.createElement(ErrorBoundary, {
+    return function(props) {
+        return /* @__PURE__ */ import_react26.default.createElement(ErrorBoundary, {
             boundaryName: boundaryName
-        }, /* @__PURE__ */ import_react20.default.createElement(Component, _object_spread_props(_object_spread({}, props), {
-            ref: ref
-        })));
-    });
+        }, /* @__PURE__ */ import_react26.default.createElement(Component, _object_spread({}, props)));
+    };
+};
+// src/components/ui/toaster.tsx
+var import_react27 = require("@chakra-ui/react");
+var import_react28 = __toESM(require("react"));
+var toaster = (0, import_react27.createToaster)({
+    pauseOnPageIdle: true,
+    offsets: {
+        left: "50%",
+        top: "50%",
+        right: "50%",
+        bottom: "50%"
+    }
+});
+var Toaster = function() {
+    return /* @__PURE__ */ import_react28.default.createElement(import_react27.Portal, null, /* @__PURE__ */ import_react28.default.createElement(import_react27.Toaster, {
+        toaster: toaster,
+        insetInline: {
+            mdDown: "4"
+        }
+    }, function(toast) {
+        if (typeof toast.render === "function") {
+            return /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, toast.render());
+        }
+        return /* @__PURE__ */ import_react28.default.createElement(import_react27.Toast.Root, {
+            width: {
+                md: "sm"
+            }
+        }, toast.type === "loading" ? /* @__PURE__ */ import_react28.default.createElement(import_react27.Spinner, {
+            size: "sm",
+            color: "blue.solid"
+        }) : /* @__PURE__ */ import_react28.default.createElement(import_react27.Toast.Indicator, null), /* @__PURE__ */ import_react28.default.createElement(import_react27.Stack, {
+            gap: "1",
+            flex: "1",
+            maxWidth: "100%"
+        }, toast.title && /* @__PURE__ */ import_react28.default.createElement(import_react27.Toast.Title, null, toast.title), toast.description && /* @__PURE__ */ import_react28.default.createElement(import_react27.Toast.Description, null, toast.description)), toast.action && /* @__PURE__ */ import_react28.default.createElement(import_react27.Toast.ActionTrigger, null, toast.action.label), toast.closable && /* @__PURE__ */ import_react28.default.createElement(import_react27.Toast.CloseTrigger, null));
+    }));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = _object_spread({
@@ -858,11 +910,13 @@ var withErrorBoundary = function(Component, boundaryName) {
     ErrorBoundary: ErrorBoundary,
     HashLinkTarget: HashLinkTarget,
     HideWithCSS: HideWithCSS,
+    IconButton: IconButton,
     Input: Input,
     Link: Link,
+    Toaster: Toaster,
     VisuallyHidden: VisuallyHidden,
-    biblioteksentralenChakraTheme: biblioteksentralenChakraTheme,
     colors: colors,
+    toaster: toaster,
     withErrorBoundary: withErrorBoundary
 }, require("@chakra-ui/react")));
 //# sourceMappingURL=index.js.map