@biblioteksentralen/react 3.1.0 → 4.0.0-beta.1

package/dist/ButtonStyles-CRAk2YIJ.d.mts

@@ -0,0 +1,3 @@
+type CustomButtonVariants = "primary" | "secondary" | "tertiary";
+
+export type { CustomButtonVariants as C };

package/dist/ButtonStyles-CRAk2YIJ.d.ts

@@ -0,0 +1,3 @@
+type CustomButtonVariants = "primary" | "secondary" | "tertiary";
+
+export type { CustomButtonVariants as C };

package/dist/chunk-2KZDHLEJ.mjs

@@ -0,0 +1,9 @@
+"use client";
+// src/components/ConditionalWrapperBS.tsx
+import React from "react";
+var ConditionalWrapperBS = function(param) {
+    var condition = param.condition, children = param.children, Wrapper = param.wrapper;
+    return condition ? /* @__PURE__ */ React.createElement(Wrapper, null, children) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+};
+export { ConditionalWrapperBS };
+//# sourceMappingURL=chunk-2KZDHLEJ.mjs.map

package/dist/chunk-2KZDHLEJ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/danielwinsvold/Code/js-utils/packages/react/dist/chunk-2KZDHLEJ.mjs","../src/components/ConditionalWrapperBS.tsx"],"names":["React","ConditionalWrapperBS","condition","children","wrapper","Wrapper","createElement","Fragment"],"mappings":"AAAA;AAEA,0CAA0C;ACF1C,OAAOA,WAA6C,QAAA;AAW7C,IAAMC,uBAAiD;QAAGC,kBAAAA,WAAWC,iBAAAA,UAAUC,AAASC,gBAATD;WACpFF,YAAY,aAAA,GAAAF,MAAAM,aAAA,CAACD,SAAA,MAASF,YAAsB,aAAA,GAAAH,MAAAM,aAAA,CAAAN,MAAAO,QAAA,EAAA,MAAGJ;;ADNjD,SACEF,oBAAoB,GACpB","sourcesContent":["\"use client\";\n\n// src/components/ConditionalWrapperBS.tsx\nimport React from \"react\";\nvar ConditionalWrapperBS = ({ condition, children, wrapper: Wrapper }) => condition ? /* @__PURE__ */ React.createElement(Wrapper, null, children) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);\n\nexport {\n  ConditionalWrapperBS\n};\n","import React, { FunctionComponent, ReactNode } from \"react\";\n\ntype Props = {\n  children: ReactNode;\n  wrapper: FunctionComponent<{ children: ReactNode }>;\n  condition: boolean;\n};\n\n/**\n * Conditionally wrapps children with a component. If conditions are not met children mounted without the wrapper.\n */\nexport const ConditionalWrapperBS: FunctionComponent<Props> = ({ condition, children, wrapper: Wrapper }) =>\n  condition ? <Wrapper>{children}</Wrapper> : <>{children}</>;\n"]}

package/dist/chunk-3IJ454KG.mjs

@@ -0,0 +1,185 @@
+"use client";
+function _assert_this_initialized(self) {
+    if (self === void 0) {
+        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+    return self;
+}
+function _class_call_check(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function _defineProperties(target, props) {
+    for(var i = 0; i < props.length; i++){
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+    }
+}
+function _create_class(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _get_prototype_of(o) {
+    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
+        return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _get_prototype_of(o);
+}
+function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
+    }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+            value: subClass,
+            writable: true,
+            configurable: true
+        }
+    });
+    if (superClass) _set_prototype_of(subClass, superClass);
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _possible_constructor_return(self, call) {
+    if (call && (_type_of(call) === "object" || typeof call === "function")) {
+        return call;
+    }
+    return _assert_this_initialized(self);
+}
+function _set_prototype_of(o, p) {
+    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+    };
+    return _set_prototype_of(o, p);
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _is_native_reflect_construct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+        Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
+        return true;
+    } catch (e) {
+        return false;
+    }
+}
+function _create_super(Derived) {
+    var hasNativeReflectConstruct = _is_native_reflect_construct();
+    return function _createSuperInternal() {
+        var Super = _get_prototype_of(Derived), result;
+        if (hasNativeReflectConstruct) {
+            var NewTarget = _get_prototype_of(this).constructor;
+            result = Reflect.construct(Super, arguments, NewTarget);
+        } else {
+            result = Super.apply(this, arguments);
+        }
+        return _possible_constructor_return(this, result);
+    };
+}
+import { AlertBS } from "./chunk-QX75QJ7F.mjs";
+import { isDevelopment } from "./chunk-BN5W6FVN.mjs";
+// src/components/ErrorBoundaryBS.tsx
+import { Box } from "@chakra-ui/react";
+import React from "react";
+var StyledPre = function(props) {
+    return /* @__PURE__ */ React.createElement(Box, _object_spread({
+        as: "pre",
+        paddingTop: "0.5rem",
+        wordBreak: "break-all",
+        whiteSpace: "pre-wrap",
+        fontSize: "0.8rem"
+    }, props));
+};
+var ErrorBoundaryBS = /*#__PURE__*/ function(_React_Component) {
+    "use strict";
+    _inherits(ErrorBoundaryBS, _React_Component);
+    var _super = _create_super(ErrorBoundaryBS);
+    function ErrorBoundaryBS(props) {
+        _class_call_check(this, ErrorBoundaryBS);
+        var _this;
+        _this = _super.call(this, props);
+        _this.state = {
+            hasError: false
+        };
+        return _this;
+    }
+    _create_class(ErrorBoundaryBS, [
+        {
+            key: "componentDidCatch",
+            value: function componentDidCatch(error, errorInfo) {
+                this.setState({
+                    hasError: true,
+                    error: error,
+                    errorInfo: errorInfo
+                });
+                console.error(error, {
+                    errorInfo: errorInfo,
+                    boundaryName: this.props.boundaryName
+                });
+            }
+        },
+        {
+            key: "render",
+            value: function render() {
+                if (this.state.hasError) {
+                    var _this_state_errorInfo, _this_state_error;
+                    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__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(AlertBS, {
+                        status: "error"
+                    }, /* @__PURE__ */ React.createElement("p", null, "Beklager, det skjedde en teknisk feil."), isDevelopment() && (stackTrace || errormsg) && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(StyledPre, null, errormsg || ""), /* @__PURE__ */ React.createElement(StyledPre, null, info || ""), /* @__PURE__ */ React.createElement(StyledPre, null, stackTrace || ""))));
+                }
+                return this.props.children;
+            }
+        }
+    ], [
+        {
+            key: "getDerivedStateFromError",
+            value: function getDerivedStateFromError(error) {
+                return {
+                    hasError: true
+                };
+            }
+        }
+    ]);
+    return ErrorBoundaryBS;
+}(React.Component);
+export { ErrorBoundaryBS };
+//# sourceMappingURL=chunk-3IJ454KG.mjs.map

package/dist/chunk-3IJ454KG.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/danielwinsvold/Code/js-utils/packages/react/dist/chunk-3IJ454KG.mjs","../src/components/ErrorBoundaryBS.tsx"],"names":["AlertBS","isDevelopment","Box","React","StyledPre","props","createElement","as","paddingTop","wordBreak","whiteSpace","fontSize","ErrorBoundaryBS","state","hasError","componentDidCatch","error","errorInfo","setState","console","boundaryName","render","stackTrace","componentStack","errormsg","message","info","status","children","getDerivedStateFromError","Component"],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,SACEA,OAAO,QACF,uBAAuB;AAC9B,SACEC,aAAa,QACR,uBAAuB;AAE9B,qCAAqC;ACPrC,SAASC,GAAA,QAAqB,mBAAA;AAC9B,OAAOC,WAAqC,QAAA;AAc5C,IAAMC,YAAY,SAACC;WACjB,aAAA,GAAAF,MAAAG,aAAA,CAACJ,KAAA;QAAIK,IAAG;QAAMC,YAAW;QAASC,WAAU;QAAYC,YAAW;QAAWC,UAAS;OAAaN;;AAG/F,IAAMO,gCAAN;;;;aAAMA,gBACCP,KAAA;;;kCACJA;QACN,MAAKQ,KAAA,GAAQ;YAAEC,UAAU;QAAM;;;;;YAOjCC,KAAAA;mBAAAA,SAAAA,kBAAkBC,KAAA,EAAYC,SAAA;gBAC5B,IAAA,CAAKC,QAAA,CAAS;oBAAEJ,UAAU;oBAAME,OAAAA;oBAAOC,WAAAA;gBAAU;gBACjDE,QAAQH,KAAA,CAAMA,OAAO;oBAAEC,WAAAA;oBAAWG,cAAc,IAAA,CAAKf,KAAA,CAAMe,YAAA;gBAAa;YAC1E;;;YAEAC,KAAAA;mBAAAA,SAAAA;gBACE,IAAI,IAAA,CAAKR,KAAA,CAAMC,QAAA,EAAU;wBACJ,uBACF;oBADjB,IAAMQ,cAAa,wBAAA,IAAA,CAAKT,KAAA,CAAMI,SAAA,cAAX,4CAAA,sBAAsBM,cAAA;oBACzC,IAAMC,YAAW,oBAAA,IAAA,CAAKX,KAAA,CAAMG,KAAA,cAAX,wCAAA,kBAAkBS,OAAA;oBACnC,IAAMC,OAAO,IAAA,CAAKrB,KAAA,CAAMe,YAAA;oBAExB,OACE,aAAA,GAAAjB,MAAAG,aAAA,CAAC,OAAA,MACC,aAAA,GAAAH,MAAAG,aAAA,CAACN,SAAA;wBAAQ2B,QAAO;oBAAA,GACd,aAAA,GAAAxB,MAAAG,aAAA,CAAC,KAAA,MAAE,2CACFL,mBAAoBqB,CAAAA,cAAcE,QAAA,KACjC,aAAA,GAAArB,MAAAG,aAAA,CAAC,OAAA,MACC,aAAA,GAAAH,MAAAG,aAAA,CAACF,WAAA,MAAWoB,YAAY,KACxB,aAAA,GAAArB,MAAAG,aAAA,CAACF,WAAA,MAAWsB,QAAQ,KACpB,aAAA,GAAAvB,MAAAG,aAAA,CAACF,WAAA,MAAWkB,cAAc;gBAMtC;gBAEA,OAAO,IAAA,CAAKjB,KAAA,CAAMuB,QAAA;YACpB;;;;YAhCOC,KAAAA;mBAAP,SAAOA,yBAAyBb,KAAA;gBAC9B,OAAO;oBAAEF,UAAU;gBAAK;YAC1B;;;;EARmCX,MAAM2B,SAAA;ADe3C,SACElB,eAAe,GACf","sourcesContent":["\"use client\";\nimport {\n  AlertBS\n} from \"./chunk-QX75QJ7F.mjs\";\nimport {\n  isDevelopment\n} from \"./chunk-BN5W6FVN.mjs\";\n\n// src/components/ErrorBoundaryBS.tsx\nimport { Box } from \"@chakra-ui/react\";\nimport React from \"react\";\nvar StyledPre = (props) => /* @__PURE__ */ React.createElement(Box, { as: \"pre\", paddingTop: \"0.5rem\", wordBreak: \"break-all\", whiteSpace: \"pre-wrap\", fontSize: \"0.8rem\", ...props });\nvar ErrorBoundaryBS = class extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false };\n  }\n  static getDerivedStateFromError(error) {\n    return { hasError: true };\n  }\n  componentDidCatch(error, errorInfo) {\n    this.setState({ hasError: true, error, errorInfo });\n    console.error(error, { errorInfo, boundaryName: this.props.boundaryName });\n  }\n  render() {\n    if (this.state.hasError) {\n      const stackTrace = this.state.errorInfo?.componentStack;\n      const errormsg = this.state.error?.message;\n      const info = this.props.boundaryName;\n      return /* @__PURE__ */ React.createElement(\"div\", null, /* @__PURE__ */ React.createElement(AlertBS, { status: \"error\" }, /* @__PURE__ */ React.createElement(\"p\", null, \"Beklager, det skjedde en teknisk feil.\"), isDevelopment() && (stackTrace || errormsg) && /* @__PURE__ */ React.createElement(\"div\", null, /* @__PURE__ */ React.createElement(StyledPre, null, errormsg || \"\"), /* @__PURE__ */ React.createElement(StyledPre, null, info || \"\"), /* @__PURE__ */ React.createElement(StyledPre, null, stackTrace || \"\"))));\n    }\n    return this.props.children;\n  }\n};\n\nexport {\n  ErrorBoundaryBS\n};\n","import { isDevelopment } from \"@biblioteksentralen/utils\";\nimport { Box, BoxProps } from \"@chakra-ui/react\";\nimport React, { ErrorInfo, ReactNode } from \"react\";\nimport { AlertBS } from \"./AlertBS\";\n\ninterface Props {\n  boundaryName?: string;\n  children: ReactNode;\n}\n\ninterface State {\n  hasError: boolean;\n  error?: Error;\n  errorInfo?: ErrorInfo;\n}\n\nconst StyledPre = (props: BoxProps) => (\n  <Box as=\"pre\" paddingTop=\"0.5rem\" wordBreak=\"break-all\" whiteSpace=\"pre-wrap\" fontSize=\"0.8rem\" {...props} />\n);\n\nexport class ErrorBoundaryBS extends React.Component<Props, State> {\n  constructor(props: any) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError(error: any) {\n    return { hasError: true };\n  }\n\n  componentDidCatch(error: any, errorInfo: any) {\n    this.setState({ hasError: true, error, errorInfo });\n    console.error(error, { errorInfo, boundaryName: this.props.boundaryName });\n  }\n\n  render() {\n    if (this.state.hasError) {\n      const stackTrace = this.state.errorInfo?.componentStack;\n      const errormsg = this.state.error?.message;\n      const info = this.props.boundaryName;\n\n      return (\n        <div>\n          <AlertBS status=\"error\">\n            <p>Beklager, det skjedde en teknisk feil.</p>\n            {isDevelopment() && (stackTrace || errormsg) && (\n              <div>\n                <StyledPre>{errormsg || \"\"}</StyledPre>\n                <StyledPre>{info || \"\"}</StyledPre>\n                <StyledPre>{stackTrace || \"\"}</StyledPre>\n              </div>\n            )}\n          </AlertBS>\n        </div>\n      );\n    }\n\n    return this.props.children;\n  }\n}\n"]}

package/dist/chunk-5GJBW3WE.mjs

@@ -0,0 +1,270 @@
+"use client";
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+var _defaultConfig_theme_recipes_button_variants, _defaultConfig_theme_recipes_button, _defaultConfig_theme_recipes, _defaultConfig_theme;
+import { colors } from "./chunk-BN5W6FVN.mjs";
+// src/styles/chakraTheme/biblioteksentralenChakraTheme.ts
+import { defineConfig, defineTokens } from "@chakra-ui/react";
+// src/styles/chakraTheme/ButtonStyles.ts
+import { defaultConfig, defineRecipe } from "@chakra-ui/react";
+var variants = _object_spread({
+    primary: {
+        backgroundColor: colors.black,
+        color: "white",
+        _hover: {
+            backgroundColor: "hsla(0deg, 0%, 70%, 1)",
+            color: "black"
+        }
+    },
+    secondary: {
+        borderColor: "currentColor",
+        color: "currentColor",
+        backgroundColor: "transparent",
+        _hover: {
+            backgroundColor: "currentColor/7"
+        }
+    },
+    tertiary: {
+        color: "currentColor",
+        backgroundColor: "transparent",
+        _hover: {
+            backgroundColor: "currentColor/7"
+        }
+    }
+}, (_defaultConfig_theme = defaultConfig.theme) === null || _defaultConfig_theme === void 0 ? void 0 : (_defaultConfig_theme_recipes = _defaultConfig_theme.recipes) === null || _defaultConfig_theme_recipes === void 0 ? void 0 : (_defaultConfig_theme_recipes_button = _defaultConfig_theme_recipes.button) === null || _defaultConfig_theme_recipes_button === void 0 ? void 0 : (_defaultConfig_theme_recipes_button_variants = _defaultConfig_theme_recipes_button.variants) === null || _defaultConfig_theme_recipes_button_variants === void 0 ? void 0 : _defaultConfig_theme_recipes_button_variants.variant);
+var ButtonStyles = defineRecipe({
+    base: {
+        borderColor: "transparent",
+        borderWidth: "0.1em",
+        fontWeight: 600,
+        _disabled: {
+            backgroundColor: "".concat(colors.grey45),
+            color: "white",
+            opacity: 1
+        }
+    },
+    variants: {
+        variant: variants,
+        size: {
+            sm: {
+                h: "8",
+                px: "2",
+                textStyle: "md"
+            },
+            md: {
+                textStyle: "md"
+            },
+            lg: {
+                h: "12",
+                textStyle: "lg"
+            }
+        }
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "md"
+    }
+});
+// src/styles/chakraTheme/ContainerStyles.ts
+import { defineRecipe as defineRecipe2 } from "@chakra-ui/react";
+var ContainerStyles = defineRecipe2({
+    base: {
+        px: ".75rem"
+    }
+});
+// src/styles/chakraTheme/HeadingStyles.ts
+import { defineRecipe as defineRecipe3 } from "@chakra-ui/react";
+var HeadingStyles = defineRecipe3({
+    base: {
+        fontWeight: "600"
+    }
+});
+// src/styles/chakraTheme/InputStyles.ts
+import { defineRecipe as defineRecipe4 } from "@chakra-ui/react";
+var variants2 = {
+    subtle: {
+        backgroundColor: {
+            _light: "gray.200",
+            _dark: "whiteAlpha.100"
+        },
+        _hover: {
+            bg: {
+                _light: "gray.300",
+                _dark: "whiteAlpha.200"
+            }
+        }
+    },
+    outline: {
+        borderColor: {
+            _light: "gray.300",
+            _dark: "whiteAlpha.300"
+        },
+        _hover: {
+            borderColor: {
+                _light: "gray.400",
+                _dark: "whiteAlpha.400"
+            }
+        }
+    },
+    flushed: {
+        borderColor: {
+            _light: "gray.300",
+            _dark: "whiteAlpha.300"
+        },
+        _hover: {
+            borderColor: {
+                _light: "gray.400",
+                _dark: "whiteAlpha.400"
+            }
+        }
+    }
+};
+var InputStyles = defineRecipe4({
+    base: {
+        _placeholder: {
+            color: {
+                _light: "gray.500",
+                _dark: "whiteAlpha.500"
+            }
+        }
+    },
+    variants: {
+        variant: variants2
+    },
+    defaultVariants: {
+        variant: "subtle"
+    }
+});
+// src/styles/chakraTheme/SpinnerStyles.ts
+import { defineRecipe as defineRecipe5 } from "@chakra-ui/react";
+var SpinnerStyles = defineRecipe5({
+    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: {
+        value: "40rem"
+    },
+    md: {
+        value: "48rem"
+    },
+    lg: {
+        value: "56rem"
+    },
+    // Forsøker 56rem som standardbredde etter testing med Katrine
+    xl: {
+        value: "80rem"
+    }
+};
+var sizes = {
+    container: container
+};
+// src/styles/chakraTheme/LinkStyles.ts
+import { defineRecipe as defineRecipe6 } from "@chakra-ui/react";
+var variants3 = {
+    plain: {
+        color: "currentColor",
+        textDecoration: "none",
+        textDecorationColor: "currentColor",
+        _hover: {
+            textDecorationColor: "currentColor",
+            textDecoration: "underline"
+        }
+    },
+    underline: {
+        color: "currentColor",
+        textDecoration: "underline",
+        textDecorationColor: "currentColor",
+        _hover: {
+            textDecoration: "none"
+        }
+    }
+};
+var LinkStyles = defineRecipe6({
+    base: {
+        _focus: {
+            outline: "none"
+        }
+    },
+    variants: {
+        variant: variants3
+    },
+    defaultVariants: {
+        variant: "underline"
+    }
+});
+// src/styles/chakraTheme/biblioteksentralenChakraTheme.ts
+var tokens = defineTokens({
+    sizes: sizes
+});
+var globalHyphens = {
+    hyphens: "auto",
+    hyphenateLimitChars: "8 5 3"
+};
+var focusStyle = {
+    outline: "none !important",
+    boxShadow: "0 0 0 .05rem ".concat(colors.white, ", 0 0 0 .25rem ").concat(colors.accentBlueMedium, ", 0 0 0 .3rem ").concat(colors.white, " !important"),
+    transition: "box-shadow 0.1s ease-out"
+};
+var biblioteksentralenChakraTheme = 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
+    }
+});
+export { focusStyle, biblioteksentralenChakraTheme };
+//# sourceMappingURL=chunk-5GJBW3WE.mjs.map

package/dist/chunk-5GJBW3WE.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/danielwinsvold/Code/js-utils/packages/react/dist/chunk-5GJBW3WE.mjs","../src/styles/chakraTheme/ButtonStyles.ts","../src/styles/chakraTheme/biblioteksentralenChakraTheme.ts","../src/styles/chakraTheme/ContainerStyles.ts","../src/styles/chakraTheme/HeadingStyles.ts","../src/styles/chakraTheme/InputStyles.ts","../src/styles/chakraTheme/SpinnerStyles.ts","../src/styles/chakraTheme/sizes.ts","../src/styles/chakraTheme/LinkStyles.ts"],"names":["defaultConfig","colors","defineConfig","defineTokens","defineRecipe","variants","primary","backgroundColor","black","color","_hover","secondary","borderColor","tertiary","theme","recipes","button","variant","ButtonStyles","base","borderWidth","fontWeight","_disabled","grey45","opacity","size","sm","h","px","textStyle","md","lg","defaultVariants","ContainerStyles","HeadingStyles","subtle","_light","_dark","bg","outline","flushed","InputStyles","_placeholder","SpinnerStyles","animationDuration","accentBlueMedium","container","value","xl","sizes","plain","textDecoration","textDecorationColor","underline","LinkStyles","_focus","tokens","globalHyphens","hyphens","hyphenateLimitChars","focusStyle","boxShadow","white","transition","biblioteksentralenChakraTheme","heading","input","link","spinner","globalCss","html","fontSize","scrollBehavior","body"],"mappings":"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","sourcesContent":["\"use client\";\nimport {\n  colors\n} from \"./chunk-BN5W6FVN.mjs\";\n\n// src/styles/chakraTheme/biblioteksentralenChakraTheme.ts\nimport { defineConfig, defineTokens } from \"@chakra-ui/react\";\n\n// src/styles/chakraTheme/ButtonStyles.ts\nimport { defaultConfig, defineRecipe } from \"@chakra-ui/react\";\nvar variants = {\n  primary: {\n    backgroundColor: colors.black,\n    color: \"white\",\n    _hover: {\n      backgroundColor: \"hsla(0deg, 0%, 70%, 1)\",\n      color: \"black\"\n    }\n  },\n  secondary: {\n    borderColor: \"currentColor\",\n    color: \"currentColor\",\n    backgroundColor: \"transparent\",\n    _hover: {\n      backgroundColor: \"currentColor/7\"\n    }\n  },\n  tertiary: {\n    color: \"currentColor\",\n    backgroundColor: \"transparent\",\n    _hover: {\n      backgroundColor: \"currentColor/7\"\n    }\n  },\n  // Inherit variants from Chakra's default config. Seems like they are overridden by our custom variants by default.\n  ...defaultConfig.theme?.recipes?.button?.variants?.variant\n};\nvar ButtonStyles = defineRecipe({\n  base: {\n    borderColor: \"transparent\",\n    borderWidth: \"0.1em\",\n    fontWeight: 600,\n    _disabled: {\n      backgroundColor: `${colors.grey45}`,\n      color: \"white\",\n      opacity: 1\n    }\n  },\n  variants: {\n    variant: variants,\n    size: {\n      sm: {\n        h: \"8\",\n        px: \"2\",\n        textStyle: \"md\"\n      },\n      md: {\n        textStyle: \"md\"\n      },\n      lg: {\n        h: \"12\",\n        textStyle: \"lg\"\n      }\n    }\n  },\n  defaultVariants: {\n    variant: \"primary\",\n    size: \"md\"\n  }\n});\n\n// src/styles/chakraTheme/ContainerStyles.ts\nimport { defineRecipe as defineRecipe2 } from \"@chakra-ui/react\";\nvar ContainerStyles = defineRecipe2({\n  base: {\n    px: \".75rem\"\n    // Padding left/right\n  }\n});\n\n// src/styles/chakraTheme/HeadingStyles.ts\nimport { defineRecipe as defineRecipe3 } from \"@chakra-ui/react\";\nvar HeadingStyles = defineRecipe3({\n  base: {\n    fontWeight: \"600\"\n  }\n});\n\n// src/styles/chakraTheme/InputStyles.ts\nimport { defineRecipe as defineRecipe4 } from \"@chakra-ui/react\";\nvar variants2 = {\n  subtle: {\n    backgroundColor: { _light: \"gray.200\", _dark: \"whiteAlpha.100\" },\n    _hover: {\n      bg: { _light: \"gray.300\", _dark: \"whiteAlpha.200\" }\n    }\n  },\n  outline: {\n    borderColor: { _light: \"gray.300\", _dark: \"whiteAlpha.300\" },\n    _hover: {\n      borderColor: { _light: \"gray.400\", _dark: \"whiteAlpha.400\" }\n    }\n  },\n  flushed: {\n    borderColor: { _light: \"gray.300\", _dark: \"whiteAlpha.300\" },\n    _hover: {\n      borderColor: { _light: \"gray.400\", _dark: \"whiteAlpha.400\" }\n    }\n  }\n};\nvar InputStyles = defineRecipe4({\n  base: {\n    _placeholder: {\n      color: { _light: \"gray.500\", _dark: \"whiteAlpha.500\" }\n    }\n  },\n  variants: {\n    variant: variants2\n  },\n  defaultVariants: {\n    variant: \"subtle\"\n  }\n});\n\n// src/styles/chakraTheme/SpinnerStyles.ts\nimport { defineRecipe as defineRecipe5 } from \"@chakra-ui/react\";\nvar SpinnerStyles = defineRecipe5({\n  base: {\n    animationDuration: \".8s\",\n    color: colors.accentBlueMedium,\n    // Todo: Legg til trackColor: https://chakra-ui.com/docs/components/spinner#track-color\n    borderWidth: \".175em\"\n  }\n});\n\n// src/styles/chakraTheme/sizes.ts\nvar container = {\n  sm: { value: \"40rem\" },\n  md: { value: \"48rem\" },\n  lg: { value: \"56rem\" },\n  // Forsøker 56rem som standardbredde etter testing med Katrine\n  xl: { value: \"80rem\" }\n};\nvar sizes = {\n  container\n};\n\n// src/styles/chakraTheme/LinkStyles.ts\nimport { defineRecipe as defineRecipe6 } from \"@chakra-ui/react\";\nvar variants3 = {\n  plain: {\n    color: \"currentColor\",\n    textDecoration: \"none\",\n    textDecorationColor: \"currentColor\",\n    _hover: {\n      textDecorationColor: \"currentColor\",\n      textDecoration: \"underline\"\n    }\n  },\n  underline: {\n    color: \"currentColor\",\n    textDecoration: \"underline\",\n    textDecorationColor: \"currentColor\",\n    _hover: {\n      textDecoration: \"none\"\n    }\n  }\n};\nvar LinkStyles = defineRecipe6({\n  base: {\n    _focus: {\n      outline: \"none\"\n    }\n  },\n  variants: {\n    variant: variants3\n  },\n  defaultVariants: {\n    variant: \"underline\"\n  }\n});\n\n// src/styles/chakraTheme/biblioteksentralenChakraTheme.ts\nvar tokens = defineTokens({\n  sizes\n});\nvar globalHyphens = {\n  hyphens: \"auto\",\n  hyphenateLimitChars: \"8 5 3\"\n  // minimum word-length / min letters first line / min letters second line\n};\nvar focusStyle = {\n  outline: \"none !important\",\n  boxShadow: `0 0 0 .05rem ${colors.white}, 0 0 0 .25rem ${colors.accentBlueMedium}, 0 0 0 .3rem ${colors.white} !important`,\n  transition: \"box-shadow 0.1s ease-out\"\n  // Transition makes the newly focused element \"pop in\" and easier to spot\n};\nvar biblioteksentralenChakraTheme = defineConfig({\n  theme: {\n    tokens,\n    recipes: {\n      heading: HeadingStyles,\n      button: ButtonStyles,\n      input: InputStyles,\n      link: LinkStyles,\n      container: ContainerStyles,\n      spinner: SpinnerStyles\n    }\n  },\n  globalCss: {\n    html: {\n      fontSize: { base: \"112.5%\", md: \"120%\" },\n      // Sørger for smooth scrolling for interne lenker som scroller til annet sted på siden,\n      // men ikke hvis fokus er utenfor viduet, feks ved søk i tekst (ctrl + f)\n      \"&:focus-within\": { scrollBehavior: \"smooth !important\" }\n    },\n    body: {\n      ...globalHyphens\n    },\n    // Felles fokus-styling for alle elementer for å sikre at de har en tydelig og uniform visuell indikasjon når de er i fokus\n    \"*:focus-visible\": focusStyle\n  }\n});\n\nexport {\n  focusStyle,\n  biblioteksentralenChakraTheme\n};\n","import { colors } from \"@biblioteksentralen/utils\";\nimport { defaultConfig, defineRecipe, SystemStyleObject } from \"@chakra-ui/react\";\n\nexport type CustomButtonVariants = \"primary\" | \"secondary\" | \"tertiary\";\n\nconst variants: Record<CustomButtonVariants, SystemStyleObject> = {\n  primary: {\n    backgroundColor: colors.black,\n    color: \"white\",\n    _hover: {\n      backgroundColor: \"hsla(0deg, 0%, 70%, 1)\",\n      color: \"black\",\n    },\n  },\n  secondary: {\n    borderColor: \"currentColor\",\n    color: \"currentColor\",\n    backgroundColor: \"transparent\",\n    _hover: {\n      backgroundColor: \"currentColor/7\",\n    },\n  },\n  tertiary: {\n    color: \"currentColor\",\n    backgroundColor: \"transparent\",\n    _hover: {\n      backgroundColor: \"currentColor/7\",\n    },\n  },\n  // Inherit variants from Chakra's default config. Seems like they are overridden by our custom variants by default.\n  ...defaultConfig.theme?.recipes?.button?.variants?.variant,\n};\n\nexport const ButtonStyles = defineRecipe({\n  base: {\n    borderColor: \"transparent\",\n    borderWidth: \"0.1em\",\n    fontWeight: 600,\n    _disabled: {\n      backgroundColor: `${colors.grey45}`,\n      color: \"white\",\n      opacity: 1,\n    },\n  },\n  variants: {\n    variant: variants,\n    size: {\n      sm: {\n        h: \"8\",\n        px: \"2\",\n        textStyle: \"md\",\n      },\n      md: {\n        textStyle: \"md\",\n      },\n      lg: {\n        h: \"12\",\n        textStyle: \"lg\",\n      },\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n    size: \"md\",\n  },\n});\n","import { defineConfig, defineTokens } from \"@chakra-ui/react\";\nimport { ButtonStyles } from \"./ButtonStyles\";\nimport { ContainerStyles } from \"./ContainerStyles\";\nimport { HeadingStyles } from \"./HeadingStyles\";\nimport { InputStyles } from \"./InputStyles\";\nimport { SpinnerStyles } from \"./SpinnerStyles\";\nimport { sizes } from \"./sizes\";\nimport { LinkStyles } from \"./LinkStyles\";\nimport { colors } from \"@biblioteksentralen/utils\";\n\nconst tokens = defineTokens({\n  sizes,\n});\n\n// https://blog.logrocket.com/guide-css-word-wrap-overflow-wrap-word-break/\n// https://medium.com/clear-left-thinking/all-you-need-to-know-about-hyphenation-in-css-2baee2d89179\n// Skrur på hyphens auto som default fordi vi har masse mikrotekster og små elementer der layout knekker uten dette, og vi lager stadig nye og glemmer å ta hensyn til dette.\n// Så kan man optionaly sette hyphens: none de stedene man ikke ønsker det, men har ikke sett noe som knekker/blir rart pga dette enda\nconst globalHyphens = {\n  hyphens: \"auto\",\n  hyphenateLimitChars: \"8 5 3\", // minimum word-length / min letters first line / min letters second line\n};\n\nexport const focusStyle = {\n  outline: \"none !important\",\n  boxShadow: `0 0 0 .05rem ${colors.white}, 0 0 0 .25rem ${colors.accentBlueMedium}, 0 0 0 .3rem ${colors.white} !important`,\n  transition: \"box-shadow 0.1s ease-out\", // Transition makes the newly focused element \"pop in\" and easier to spot\n};\n\nexport const biblioteksentralenChakraTheme = defineConfig({\n  theme: {\n    tokens,\n    recipes: {\n      heading: HeadingStyles,\n      button: ButtonStyles,\n      input: InputStyles,\n      link: LinkStyles,\n      container: ContainerStyles,\n      spinner: SpinnerStyles,\n    },\n  },\n  globalCss: {\n    html: {\n      fontSize: { base: \"112.5%\", md: \"120%\" },\n      // Sørger for smooth scrolling for interne lenker som scroller til annet sted på siden,\n      // men ikke hvis fokus er utenfor viduet, feks ved søk i tekst (ctrl + f)\n      \"&:focus-within\": { scrollBehavior: \"smooth !important\" },\n    },\n    body: {\n      ...globalHyphens,\n    },\n    // Felles fokus-styling for alle elementer for å sikre at de har en tydelig og uniform visuell indikasjon når de er i fokus\n    \"*:focus-visible\": focusStyle,\n  },\n});\n","import { defineRecipe } from \"@chakra-ui/react\";\n\nexport const ContainerStyles = defineRecipe({\n  base: {\n    px: \".75rem\", // Padding left/right\n  },\n});\n","import { defineRecipe } from \"@chakra-ui/react\";\n\nexport const HeadingStyles = defineRecipe({\n  base: {\n    fontWeight: \"600\",\n  },\n});\n","import { defineRecipe, SystemStyleObject } from \"@chakra-ui/react\";\n\nconst variants: Record<string, SystemStyleObject> = {\n  subtle: {\n    backgroundColor: { _light: \"gray.200\", _dark: \"whiteAlpha.100\" },\n    _hover: {\n      bg: { _light: \"gray.300\", _dark: \"whiteAlpha.200\" },\n    },\n  },\n  outline: {\n    borderColor: { _light: \"gray.300\", _dark: \"whiteAlpha.300\" },\n    _hover: {\n      borderColor: { _light: \"gray.400\", _dark: \"whiteAlpha.400\" },\n    },\n  },\n  flushed: {\n    borderColor: { _light: \"gray.300\", _dark: \"whiteAlpha.300\" },\n    _hover: {\n      borderColor: { _light: \"gray.400\", _dark: \"whiteAlpha.400\" },\n    },\n  },\n};\n\nexport const InputStyles = defineRecipe({\n  base: {\n    _placeholder: {\n      color: { _light: \"gray.500\", _dark: \"whiteAlpha.500\" },\n    },\n  },\n  variants: {\n    variant: variants,\n  },\n  defaultVariants: {\n    variant: \"subtle\",\n  },\n});\n","import { colors } from \"@biblioteksentralen/utils\";\nimport { defineRecipe } from \"@chakra-ui/react\";\n\nexport const SpinnerStyles = defineRecipe({\n  base: {\n    animationDuration: \".8s\",\n    color: colors.accentBlueMedium,\n    // Todo: Legg til trackColor: https://chakra-ui.com/docs/components/spinner#track-color\n    borderWidth: \".175em\",\n  },\n});\n","const container = {\n  sm: { value: \"40rem\" },\n  md: { value: \"48rem\" },\n  lg: { value: \"56rem\" }, // Forsøker 56rem som standardbredde etter testing med Katrine\n  xl: { value: \"80rem\" },\n};\n\nexport const sizes = {\n  container,\n};\n","import { defineRecipe, SystemStyleObject } from \"@chakra-ui/react\";\n\nexport type CustomLinkVariants = \"plain\" | \"underline\";\n\nconst variants: Record<CustomLinkVariants, SystemStyleObject> = {\n  plain: {\n    color: \"currentColor\",\n    textDecoration: \"none\",\n    textDecorationColor: \"currentColor\",\n    _hover: {\n      textDecorationColor: \"currentColor\",\n      textDecoration: \"underline\",\n    },\n  },\n  underline: {\n    color: \"currentColor\",\n    textDecoration: \"underline\",\n    textDecorationColor: \"currentColor\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n  },\n};\n\nexport const LinkStyles = defineRecipe({\n  base: {\n    _focus: {\n      outline: \"none\",\n    },\n  },\n  variants: {\n    variant: variants,\n  },\n  defaultVariants: {\n    variant: \"underline\",\n  },\n});\n"]}

package/dist/chunk-7MKFY66H.mjs

@@ -0,0 +1,65 @@
+"use client";
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+import { focusStyle } from "./chunk-5GJBW3WE.mjs";
+// src/components/HashLinkTargetBS.tsx
+import { Box } from "@chakra-ui/react";
+import React from "react";
+var focusOnRelativeParentStyle = {
+    _focusWithin: {
+        position: "static",
+        boxShadow: "none",
+        "&::after": _object_spread({
+            content: '""',
+            position: "absolute",
+            top: 0,
+            left: 0,
+            height: "100%",
+            width: "100%",
+            pointerEvents: "none",
+            borderRadius: "0.25rem"
+        }, focusStyle)
+    }
+};
+function HashLinkTargetBS(props) {
+    return /* @__PURE__ */ React.createElement(Box, {
+        position: "relative",
+        css: props.focusOnParent ? focusOnRelativeParentStyle : void 0
+    }, /* @__PURE__ */ React.createElement(Box, {
+        id: props.id,
+        tabIndex: props.focusOnParent ? -1 : void 0,
+        position: "absolute",
+        top: "-".concat(props.spaceAbove || "2.5rem"),
+        _focus: {
+            boxShadow: "none !important"
+        }
+    }));
+}
+export { HashLinkTargetBS };
+//# sourceMappingURL=chunk-7MKFY66H.mjs.map

package/dist/chunk-7MKFY66H.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/danielwinsvold/Code/js-utils/packages/react/dist/chunk-7MKFY66H.mjs","../src/components/HashLinkTargetBS.tsx"],"names":["focusStyle","Box","React","focusOnRelativeParentStyle","_focusWithin","position","boxShadow","content","top","left","height","width","pointerEvents","borderRadius","HashLinkTargetBS","props","createElement","css","focusOnParent","id","tabIndex","spaceAbove","_focus"],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,SACEA,UAAU,QACL,uBAAuB;AAE9B,sCAAsC;ACLtC,SAASC,GAAA,QAAW,mBAAA;AACpB,OAAOC,WAAW,QAAA;AAelB,IAAMC,6BAA6B;IACjCC,cAAc;QACZC,UAAU;QACVC,WAAW;QACX,YAAY;YACVC,SAAS;YACTF,UAAU;YACVG,KAAK;YACLC,MAAM;YACNC,QAAQ;YACRC,OAAO;YACPC,eAAe;YACfC,cAAc;WACXb;IAEP;AACF;AAKO,SAASc,iBAAiBC,KAAA;IAC/B,OACE,aAAA,GAAAb,MAAAc,aAAA,CAACf,KAAA;QAAII,UAAS;QAAWY,KAAKF,MAAMG,aAAA,GAAgBf,6BAA6B,KAAA;IAAA,GAC/E,aAAA,GAAAD,MAAAc,aAAA,CAACf,KAAA;QACCkB,IAAIJ,MAAMI,EAAA;QACVC,UAAUL,MAAMG,aAAA,GAAgB,CAAA,IAAK,KAAA;QACrCb,UAAS;QACTG,KAAK,IAAgC,OAA5BO,MAAMM,UAAA,IAAc;QAC7BC,QAAQ;YACNhB,WAAW;QACb;IAAA;AAIR;ADXA,SACEQ,gBAAgB,GAChB","sourcesContent":["\"use client\";\nimport {\n  focusStyle\n} from \"./chunk-5GJBW3WE.mjs\";\n\n// src/components/HashLinkTargetBS.tsx\nimport { Box } from \"@chakra-ui/react\";\nimport React from \"react\";\nvar focusOnRelativeParentStyle = {\n  _focusWithin: {\n    position: \"static\",\n    boxShadow: \"none\",\n    \"&::after\": {\n      content: '\"\"',\n      position: \"absolute\",\n      top: 0,\n      left: 0,\n      height: \"100%\",\n      width: \"100%\",\n      pointerEvents: \"none\",\n      borderRadius: \"0.25rem\",\n      ...focusStyle\n    }\n  }\n};\nfunction HashLinkTargetBS(props) {\n  return /* @__PURE__ */ React.createElement(Box, { position: \"relative\", css: props.focusOnParent ? focusOnRelativeParentStyle : void 0 }, /* @__PURE__ */ React.createElement(\n    Box,\n    {\n      id: props.id,\n      tabIndex: props.focusOnParent ? -1 : void 0,\n      position: \"absolute\",\n      top: `-${props.spaceAbove || \"2.5rem\"}`,\n      _focus: {\n        boxShadow: \"none !important\"\n      }\n    }\n  ));\n}\n\nexport {\n  HashLinkTargetBS\n};\n","import { Box } from \"@chakra-ui/react\";\nimport React from \"react\";\nimport { focusStyle } from \"../styles/chakraTheme/biblioteksentralenChakraTheme\";\n\ninterface Props {\n  id: string;\n  /**\n   * angir hvor mye luft til vil ha over HashLinkTarget ved bruk av hash-lenke, eks '4rem'\n   */\n  spaceAbove?: string;\n  /**\n   * angir om du vil ha fokusramme rundt komponenten som mounter HashLinkTarget. Da må komponenten du wrapper med ha position: relative | absolute el\n   */\n  focusOnParent?: boolean;\n}\n\nconst focusOnRelativeParentStyle = {\n  _focusWithin: {\n    position: \"static\",\n    boxShadow: \"none\",\n    \"&::after\": {\n      content: '\"\"',\n      position: \"absolute\",\n      top: 0,\n      left: 0,\n      height: \"100%\",\n      width: \"100%\",\n      pointerEvents: \"none\",\n      borderRadius: \"0.25rem\",\n      ...focusStyle,\n    },\n  },\n};\n\n/*\n * Komponent som sørger for luft over anchors (elementer man kan lenke til med hash-lenker feks <a href=\"#min-overskrift\">Ta meg til overskrift</a>)\n */\nexport function HashLinkTargetBS(props: Props) {\n  return (\n    <Box position=\"relative\" css={props.focusOnParent ? focusOnRelativeParentStyle : undefined}>\n      <Box\n        id={props.id}\n        tabIndex={props.focusOnParent ? -1 : undefined}\n        position=\"absolute\"\n        top={`-${props.spaceAbove || \"2.5rem\"}`}\n        _focus={{\n          boxShadow: \"none !important\",\n        }}\n      />\n    </Box>\n  );\n}\n"]}