@biblioteksentralen/react 4.0.0-beta.1 → 4.0.0-beta.3

package/dist/index.mjs

@@ -1,16 +1,648 @@
 "use client";
-import { InputBS } from "./chunk-RZUGRIUF.mjs";
-import { withErrorBoundaryBS } from "./chunk-CGCBID7S.mjs";
-import { BiblioteksentralenProvider } from "./chunk-PQLTQYZ3.mjs";
-import { ButtonBS } from "./chunk-WYQNSPEX.mjs";
-import { ConditionalWrapperBS } from "./chunk-2KZDHLEJ.mjs";
-import { ErrorBoundaryBS } from "./chunk-3IJ454KG.mjs";
-import { AlertBS } from "./chunk-QX75QJ7F.mjs";
-import { HashLinkTargetBS } from "./chunk-7MKFY66H.mjs";
-import "./chunk-5GJBW3WE.mjs";
-import { colors } from "./chunk-BN5W6FVN.mjs";
-import { IconButtonBS } from "./chunk-BZS3AX26.mjs";
-// src/index.ts
-export * from "@chakra-ui/react";
-export { AlertBS, BiblioteksentralenProvider, ButtonBS, ConditionalWrapperBS, ErrorBoundaryBS, HashLinkTargetBS, IconButtonBS, InputBS, colors, withErrorBoundaryBS };
+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 _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        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);
+    };
+}
+var _defaultConfig_theme_recipes_button_variants, _defaultConfig_theme_recipes_button, _defaultConfig_theme_recipes, _defaultConfig_theme;
+// ../utils/dist/index.mjs
+import { format } from "date-fns/format";
+import { nb } from "date-fns/locale/nb";
+var colors = {
+    black: "#000000",
+    grey90: "#181818",
+    grey80: "#333333",
+    grey60: "#585858",
+    grey45: "#8c8c8c",
+    grey30: "#b2b2b2",
+    grey15: "#d9d9d9",
+    grey10: "#e5e5e5",
+    grey05: "#f2f2f2",
+    white: "#ffffff",
+    bsRødDark: "#870010",
+    bsRødMedium: "#d53d40",
+    accentPurple: "#331433",
+    accentPeach: "#ffba99",
+    accentGreen: "#003b29",
+    accentBlueDark: "#001740",
+    accentBlueMedium: "#5996de",
+    accentYellow: "#ffc970",
+    lightBlue: "#dbe8ef",
+    lightGreen: "#dbe0db",
+    lightPeach: "#f4e7de",
+    lightPurple: "#ece8f3",
+    statusRed: "#ad313c",
+    statusYellow: "#bc5600",
+    statusGreen: "#24845b",
+    statusGreenLight: "#edf4f1",
+    statusRedLight: "#f8efef",
+    statusYellowLight: "#fff6e4",
+    neptune: {
+        "100": "#CFE6E8",
+        "200": "#9FCDD2",
+        "300": "#6FB5BB",
+        "400": "#3F9CA5",
+        "500": "#0F838E",
+        "600": "#0C6972",
+        "700": "#094F55",
+        "800": "#063439",
+        "900": "#031A1C"
+    }
+};
+function isDevelopment() {
+    return process.env.NODE_ENV === "development";
+}
+// src/components/AlertBS.tsx
+import { Alert as ChakraAlert } from "@chakra-ui/react";
+import React from "react";
+import { AlertCircle, CheckCircle, Info, XCircle } from "react-feather";
+var colorLookup = {
+    info: {
+        bg: colors.lightBlue,
+        color: colors.accentBlueMedium
+    },
+    warning: {
+        bg: colors.statusYellowLight,
+        color: colors.statusYellow
+    },
+    success: {
+        bg: colors.statusGreenLight,
+        color: colors.statusGreen
+    },
+    error: {
+        bg: colors.statusRedLight,
+        color: colors.statusRed
+    }
+};
+var iconLookup = {
+    info: /* @__PURE__ */ React.createElement(Info, {
+        strokeWidth: 1.75,
+        role: "img",
+        "aria-label": "Informasjon"
+    }),
+    warning: /* @__PURE__ */ React.createElement(AlertCircle, {
+        strokeWidth: 1.75,
+        role: "img",
+        "aria-label": "Advarsel"
+    }),
+    success: /* @__PURE__ */ React.createElement(CheckCircle, {
+        strokeWidth: 1.75,
+        role: "img",
+        "aria-label": "Suksess"
+    }),
+    error: /* @__PURE__ */ React.createElement(XCircle, {
+        strokeWidth: 1.75,
+        role: "img",
+        "aria-label": "Feil"
+    })
+};
+var variantStyles = {
+    inline: {
+        borderColor: "transparent",
+        backgroundColor: "transparent",
+        padding: "0"
+    }
+};
+function AlertBS(_param) {
+    var status = _param.status, children = _param.children, variant = _param.variant, header = _param.header, rest = _object_without_properties(_param, [
+        "status",
+        "children",
+        "variant",
+        "header"
+    ]);
+    var colors2 = colorLookup[status];
+    return /* @__PURE__ */ React.createElement(ChakraAlert.Root, _object_spread({
+        status: status,
+        fontSize: "md",
+        border: "0.1rem solid",
+        borderColor: colors2.color,
+        backgroundColor: colors2.bg,
+        display: "flex",
+        flexWrap: "wrap"
+    }, variant === "inline" ? variantStyles[variant] : {}, rest), /* @__PURE__ */ React.createElement(ChakraAlert.Indicator, {
+        marginX: "auto"
+    }, iconLookup[status]), /* @__PURE__ */ React.createElement(ChakraAlert.Content, {
+        color: "black"
+    }, header && /* @__PURE__ */ React.createElement(ChakraAlert.Title, null, header), /* @__PURE__ */ React.createElement(ChakraAlert.Description, null, children)));
+}
+// src/components/ButtonBS.tsx
+import { Button as ChakraButton } from "@chakra-ui/react";
+var ButtonBS = ChakraButton;
+// src/components/IconButtonBS.tsx
+import { IconButton as ChakraIconButton } from "@chakra-ui/react";
+var IconButtonBS = ChakraIconButton;
+// src/components/InputBS.tsx
+import { Input as ChakraInput, Field, VisuallyHidden } from "@chakra-ui/react";
+import React2 from "react";
+var InputBS = 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",
+        "helperText",
+        "errorMessage",
+        "hideLabel"
+    ]);
+    var formLabel = /* @__PURE__ */ React2.createElement(Field.Label, _object_spread({}, labelProps), label);
+    return /* @__PURE__ */ React2.createElement(Field.Root, {
+        invalid: !!errorMessage
+    }, hideLabel ? /* @__PURE__ */ React2.createElement(VisuallyHidden, null, formLabel) : formLabel, helperText && /* @__PURE__ */ React2.createElement(FieldHelperText, null, helperText), /* @__PURE__ */ React2.createElement(ChakraInput, _object_spread({}, inputProps)), errorMessage && /* @__PURE__ */ React2.createElement(FieldErrorText, null, errorMessage));
+};
+// src/components/ConditionalWrapperBS.tsx
+import React3 from "react";
+var ConditionalWrapperBS = function(param) {
+    var condition = param.condition, children = param.children, Wrapper = param.wrapper;
+    return condition ? /* @__PURE__ */ React3.createElement(Wrapper, null, children) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, children);
+};
+// src/components/ErrorBoundaryBS.tsx
+import { Box } from "@chakra-ui/react";
+import React4 from "react";
+var StyledPre = function(props) {
+    return /* @__PURE__ */ React4.createElement(Box, _object_spread({
+        as: "pre",
+        paddingTop: "0.5rem",
+        wordBreak: "break-all",
+        whiteSpace: "pre-wrap",
+        fontSize: "0.8rem"
+    }, props));
+};
+var ErrorBoundaryBS = /*#__PURE__*/ function(_React4_Component) {
+    "use strict";
+    _inherits(ErrorBoundaryBS, _React4_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__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement(AlertBS, {
+                        status: "error"
+                    }, /* @__PURE__ */ React4.createElement("p", null, "Beklager, det skjedde en teknisk feil."), isDevelopment() && (stackTrace || errormsg) && /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement(StyledPre, null, errormsg || ""), /* @__PURE__ */ React4.createElement(StyledPre, null, info || ""), /* @__PURE__ */ React4.createElement(StyledPre, null, stackTrace || ""))));
+                }
+                return this.props.children;
+            }
+        }
+    ], [
+        {
+            key: "getDerivedStateFromError",
+            value: function getDerivedStateFromError(error) {
+                return {
+                    hasError: true
+                };
+            }
+        }
+    ]);
+    return ErrorBoundaryBS;
+}(React4.Component);
+// src/components/HashLinkTargetBS.tsx
+import { Box as Box2 } from "@chakra-ui/react";
+import React5 from "react";
+// 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
+    }
+});
+// src/components/HashLinkTargetBS.tsx
+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__ */ React5.createElement(Box2, {
+        position: "relative",
+        css: props.focusOnParent ? focusOnRelativeParentStyle : void 0
+    }, /* @__PURE__ */ React5.createElement(Box2, {
+        id: props.id,
+        tabIndex: props.focusOnParent ? -1 : void 0,
+        position: "absolute",
+        top: "-".concat(props.spaceAbove || "2.5rem"),
+        _focus: {
+            boxShadow: "none !important"
+        }
+    }));
+}
+// src/components/withErrorBoundaryBS.tsx
+import React6 from "react";
+var withErrorBoundaryBS = function(Component, boundaryName) {
+    return function(props) {
+        return /* @__PURE__ */ React6.createElement(ErrorBoundaryBS, {
+            boundaryName: boundaryName
+        }, /* @__PURE__ */ React6.createElement(Component, _object_spread({}, props)));
+    };
+};
+// src/components/BiblioteksentralenProvider.tsx
+import React7 from "react";
+import { ChakraProvider, createSystem, defaultConfig as defaultConfig2 } from "@chakra-ui/react";
+import { ColorModeProvider } from "@chakra-ui/system";
+var BiblioteksentralenProvider = function(props) {
+    return /* @__PURE__ */ React7.createElement(ChakraProvider, {
+        value: createSystem(defaultConfig2, biblioteksentralenChakraTheme, props.customTheme || {})
+    }, /* @__PURE__ */ React7.createElement(ColorModeProvider, _object_spread({}, props)));
+};
+export { AlertBS, BiblioteksentralenProvider, ButtonBS, ConditionalWrapperBS, ErrorBoundaryBS, HashLinkTargetBS, IconButtonBS, InputBS, withErrorBoundaryBS };
 //# sourceMappingURL=index.mjs.map