@biblioteksentralen/react 1.0.0-beta.6 → 1.0.0-beta.7

package/dist/index.mjs

@@ -0,0 +1,558 @@
+// src/index.ts
+export * from "@chakra-ui/react";
+
+// ../icons/dist/index.mjs
+import React from "react";
+import React2 from "react";
+import React3 from "react";
+import React4 from "react";
+import React5 from "react";
+import React6 from "react";
+import React7 from "react";
+import React8 from "react";
+import * as React9 from "react";
+import * as React10 from "react";
+import * as React11 from "react";
+import * as React12 from "react";
+import React13 from "react";
+import React14 from "react";
+import React15 from "react";
+import React16 from "react";
+import React17 from "react";
+import React18 from "react";
+import React19 from "react";
+import React20 from "react";
+import React21 from "react";
+import React22 from "react";
+import React23 from "react";
+import React24 from "react";
+import React25 from "react";
+import React26 from "react";
+import React27 from "react";
+import React28 from "react";
+import React29 from "react";
+import React30 from "react";
+import React31 from "react";
+import React32 from "react";
+import * as React33 from "react";
+import React34 from "react";
+import React35 from "react";
+import React36 from "react";
+import React37 from "react";
+import React38 from "react";
+import React39 from "react";
+import React40 from "react";
+import React41 from "react";
+import React42 from "react";
+import * as React43 from "react";
+import React44 from "react";
+import React45 from "react";
+import React46 from "react";
+import React47 from "react";
+import React48 from "react";
+import React49 from "react";
+import React50 from "react";
+import React51 from "react";
+import React52 from "react";
+import React53 from "react";
+import React54 from "react";
+import React55 from "react";
+import React56 from "react";
+import React57 from "react";
+import React58 from "react";
+import React59 from "react";
+import React60 from "react";
+import React61 from "react";
+import React62 from "react";
+import React63 from "react";
+import React64 from "react";
+import React65 from "react";
+import React66 from "react";
+import React67 from "react";
+import React68 from "react";
+import * as React69 from "react";
+import React70 from "react";
+import React71 from "react";
+import React72 from "react";
+import React73 from "react";
+import React74 from "react";
+import React75 from "react";
+import React76 from "react";
+import React77 from "react";
+import React78 from "react";
+import React79 from "react";
+import * as React80 from "react";
+import React81 from "react";
+import React82 from "react";
+import React83 from "react";
+import React84 from "react";
+import React85 from "react";
+import React86 from "react";
+import React87 from "react";
+import React88 from "react";
+import React89 from "react";
+import React90 from "react";
+import React91 from "react";
+import React92 from "react";
+import React93 from "react";
+var BsCheckCircle = (props) => /* @__PURE__ */ React16.createElement("svg", { fill: "currentColor", viewBox: "0 0 16 16", height: "1em", width: "1em", ...props }, /* @__PURE__ */ React16.createElement("path", { d: "M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" }), /* @__PURE__ */ React16.createElement("path", { d: "M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z" }));
+var BsExclamationCircle = (props) => /* @__PURE__ */ React21.createElement("svg", { fill: "currentColor", viewBox: "0 0 16 16", height: "1em", width: "1em", ...props }, /* @__PURE__ */ React21.createElement("path", { d: "M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" }), /* @__PURE__ */ React21.createElement("path", { d: "M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z" }));
+var BsXCircle = (props) => /* @__PURE__ */ React31.createElement("svg", { fill: "currentColor", viewBox: "0 0 16 16", height: "1em", width: "1em", ...props }, /* @__PURE__ */ React31.createElement("path", { d: "M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" }), /* @__PURE__ */ React31.createElement("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }));
+var InformationIcon = (props) => /* @__PURE__ */ React69.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", ...props, viewBox: "2 2 20 20" }, /* @__PURE__ */ React69.createElement(
+  "path",
+  {
+    d: "M12 2.25c5.385 0 9.75 4.365 9.75 9.75s-4.365 9.75-9.75 9.75c-5.384 0-9.75-4.365-9.75-9.75S6.616 2.25 12 2.25zm0 1.5a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5zm0 6.5a.75.75 0 0 1 .75.75v4.971l-.007.102a.75.75 0 0 1-1.493-.102V11l.007-.102A.75.75 0 0 1 12 10.25zm0-2.75A.75.75 0 1 1 12 9a.75.75 0 0 1 0-1.5z",
+    fill: "currentColor"
+  }
+));
+
+// ../utils/dist/index.mjs
+import { format } from "date-fns";
+import { nb } from "date-fns/locale";
+var colors = {
+  black: "#000000",
+  grey90: "#181818",
+  grey80: "#333333",
+  grey60: "#585858",
+  grey45: "#8c8c8c",
+  grey30: "#b2b2b2",
+  grey15: "#d9d9d9",
+  grey10: "#e5e5e5",
+  grey05: "#f2f2f2",
+  white: "#ffffff",
+  bsR\u00F8dDark: "#870010",
+  bsR\u00F8dMedium: "#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",
+  alertRed: "#f8efef",
+  alertYellow: "#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/Alert.tsx
+import { Box, Flex } from "@chakra-ui/react";
+import React94 from "react";
+var colorLookup = {
+  info: { bg: colors.lightBlue, color: colors.accentBlueMedium },
+  warning: { bg: colors.alertYellow, color: colors.statusYellow },
+  success: { bg: "green.100", color: "green.600" },
+  error: { bg: colors.alertRed, color: colors.statusRed }
+};
+var iconLookup = {
+  info: /* @__PURE__ */ React94.createElement(InformationIcon, { role: "img", "aria-label": "Informasjon" }),
+  warning: /* @__PURE__ */ React94.createElement(BsExclamationCircle, { role: "img", "aria-label": "Advarsel" }),
+  success: /* @__PURE__ */ React94.createElement(BsCheckCircle, { role: "img", "aria-label": "Suksess" }),
+  error: /* @__PURE__ */ React94.createElement(BsXCircle, { role: "img", "aria-label": "Feil" })
+};
+var variantStyles = {
+  inline: {
+    borderColor: "transparent",
+    backgroundColor: "transparent",
+    padding: "0"
+  }
+};
+function Alert({ status, children, variant, ...rest }) {
+  const colors2 = colorLookup[status];
+  return /* @__PURE__ */ React94.createElement(
+    Flex,
+    {
+      role: "alert",
+      flexWrap: "wrap",
+      alignItems: "center",
+      gridGap: "0.5rem 1rem",
+      background: "white",
+      border: `0.1rem solid`,
+      borderColor: colors2.color,
+      backgroundColor: colors2.bg,
+      padding: "0.75rem",
+      borderRadius: "0.3rem",
+      ...variant ? variantStyles[variant] : {},
+      ...rest
+    },
+    /* @__PURE__ */ React94.createElement(Box, { color: colors2.color, flex: "0 0", marginLeft: "auto", marginRight: "auto", lineHeight: "1", fontSize: "1.5em" }, iconLookup[status]),
+    /* @__PURE__ */ React94.createElement(Box, { flex: "1" }, children)
+  );
+}
+
+// src/components/Button.tsx
+import { Button as ChakraButton } from "@chakra-ui/react";
+var Button = ChakraButton;
+
+// src/components/ConditionalWrapper.tsx
+import React95 from "react";
+var ConditionalWrapper = ({ condition, children, wrapper: Wrapper }) => condition ? /* @__PURE__ */ React95.createElement(Wrapper, null, children) : /* @__PURE__ */ React95.createElement(React95.Fragment, null, children);
+
+// src/components/HideWithCSS.tsx
+import { Box as Box2 } from "@chakra-ui/react";
+import React96 from "react";
+var HideWithCSS = ({ children, above, below, ...chakraProps }) => {
+  const display = {
+    ...!!below ? { base: "none", [below]: "block" } : {},
+    ...!!above ? { [above]: "none" } : {}
+  };
+  return /* @__PURE__ */ React96.createElement(Box2, { ...chakraProps, display }, children);
+};
+
+// src/components/Input.tsx
+import {
+  FormControl,
+  FormErrorMessage,
+  FormHelperText,
+  FormLabel,
+  Input as ChakraInput
+} from "@chakra-ui/react";
+import React98, { forwardRef } from "react";
+
+// src/components/VisuallyHidden.tsx
+import React97, { useEffect } from "react";
+import { VisuallyHidden as ChakraVisuallyHidden } from "@chakra-ui/react";
+function VisuallyHidden({ children, ...rest }) {
+  const [forceShow, setForceShow] = React97.useState(false);
+  useEffect(() => {
+    if (isDevelopment()) {
+      const handleKeyDown = (ev) => {
+        if (ev.key === "Alt") {
+          setForceShow(true);
+        }
+      };
+      const handleKeyUp = (ev) => {
+        if (ev.key === "Alt") {
+          setForceShow(false);
+        }
+      };
+      window.addEventListener("keydown", handleKeyDown);
+      window.addEventListener("keyup", handleKeyUp);
+      return () => {
+        window.removeEventListener("keydown", handleKeyDown);
+        window.removeEventListener("keyup", handleKeyUp);
+      };
+    }
+  }, []);
+  return forceShow ? /* @__PURE__ */ React97.createElement("span", null, children) : /* @__PURE__ */ React97.createElement(ChakraVisuallyHidden, { position: "fixed" }, children);
+}
+
+// src/components/Input.tsx
+var Input = forwardRef((props, ref) => {
+  const { labelProps, label, helperText, errorMessage, hideLabel, ...inputProps } = props;
+  return /* @__PURE__ */ React98.createElement(FormControl, { isInvalid: !!errorMessage }, /* @__PURE__ */ React98.createElement(FormLabel, { marginBottom: ".25em", ...labelProps }, hideLabel ? /* @__PURE__ */ React98.createElement(VisuallyHidden, null, label) : label), /* @__PURE__ */ React98.createElement(ChakraInput, { ref, ...inputProps }), errorMessage && /* @__PURE__ */ React98.createElement(FormErrorMessage, null, errorMessage), helperText && /* @__PURE__ */ React98.createElement(FormHelperText, null, helperText));
+});
+
+// src/components/Link.tsx
+import { Link as ChakraLink } from "@chakra-ui/react";
+var Link = ChakraLink;
+
+// src/BiblioteksentralenProvider.tsx
+import { ChakraProvider, extendTheme } from "@chakra-ui/react";
+import React99 from "react";
+
+// src/styles/chakraTheme/ButtonStyles.ts
+var variants = {
+  primary: {
+    backgroundColor: colors.black,
+    color: "white",
+    _hover: {
+      backgroundColor: "hsla(0deg, 0%, 70%, 1)",
+      color: "black"
+    }
+  },
+  secondary: {
+    borderColor: "currentColor",
+    backgroundColor: "transparent",
+    color: "currentColor",
+    _hover: {
+      backgroundColor: "hsla(0deg, 0%, 50%, 0.15)"
+    }
+  },
+  tertiary: {
+    backgroundColor: "transparent",
+    color: "currentColor",
+    _hover: {
+      backgroundColor: "hsla(0deg, 0%, 50%, 0.15)",
+      color: "currentColor"
+    }
+  }
+};
+var ButtonStyles = {
+  baseStyle: {
+    border: "transparent 0.1em solid",
+    borderRadius: "0.35em",
+    fontWeight: 600,
+    _disabled: {
+      backgroundColor: `${colors.grey45} !important`,
+      color: "white !important",
+      opacity: 1
+    }
+  },
+  sizes: {
+    sm: {
+      padding: "0.2em 0.5em",
+      fontSize: "1rem"
+    }
+  },
+  variants,
+  defaultProps: {
+    variant: "primary"
+  }
+};
+
+// src/styles/chakraTheme/CheckboxStyles.ts
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+import { checkboxAnatomy } from "@chakra-ui/anatomy";
+var { definePartsStyle, defineMultiStyleConfig: defineMultiStyleConfigWithTypeIssue } = createMultiStyleConfigHelpers(
+  checkboxAnatomy.keys
+);
+var defineMultiStyleConfig = defineMultiStyleConfigWithTypeIssue;
+var baseStyle = definePartsStyle({
+  control: {
+    background: "white"
+  }
+});
+var CheckboxStyles = defineMultiStyleConfig({ baseStyle });
+
+// src/styles/chakraTheme/ContainerStyles.ts
+var ContainerStyles = {
+  baseStyle: {
+    px: ".75rem"
+    // Padding left/right
+  }
+};
+
+// src/styles/chakraTheme/HeadingStyles.ts
+var HeadingStyles = {
+  baseStyle: {
+    fontWeight: "600"
+  }
+};
+
+// src/styles/chakraTheme/InputStyles.ts
+import { mode } from "@chakra-ui/theme-tools";
+var InputStyles = {
+  baseStyle: (props) => ({
+    field: {
+      _placeholder: {
+        color: mode("gray.500", "whiteAlpha.500")(props)
+      }
+    }
+  }),
+  variants: {
+    filled: (props) => ({
+      field: {
+        bg: mode("gray.200", "whiteAlpha.100")(props),
+        _hover: {
+          bg: mode("gray.300", "whiteAlpha.200")(props)
+        }
+      }
+    }),
+    outline: (props) => ({
+      field: {
+        borderColor: mode("gray.300", "whiteAlpha.300")(props),
+        _hover: {
+          borderColor: mode("gray.400", "whiteAlpha.400")(props)
+        }
+      }
+    }),
+    flushed: (props) => ({
+      field: {
+        borderColor: mode("gray.300", "whiteAlpha.300")(props),
+        _hover: {
+          borderColor: mode("gray.400", "whiteAlpha.400")(props)
+        }
+      }
+    })
+  },
+  defaultProps: {
+    variant: "filled"
+  }
+};
+
+// src/styles/chakraTheme/LinkStyles.ts
+var variants2 = {
+  plain: {
+    textDecoration: "none",
+    _hover: {
+      textDecoration: "underline"
+    }
+  }
+};
+var LinkStyles = {
+  baseStyle: {
+    textDecoration: "underline",
+    _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%"
+    }
+  }
+};
+
+// src/styles/chakraTheme/SpinnerStyles.ts
+import { Spinner } from "@chakra-ui/react";
+var SpinnerStyles = {};
+Spinner.defaultProps = {
+  ...Spinner.defaultProps,
+  speed: ".8s",
+  color: colors.accentBlueMedium,
+  emptyColor: "rgba(0,0,0,.2)",
+  thickness: ".175em"
+};
+
+// src/styles/chakraTheme/sizes.ts
+var container = {
+  sm: "40rem",
+  md: "48rem",
+  lg: "56rem",
+  // Forsøker 56rem som standardbredde etter testing med Katrine
+  xl: "80rem"
+};
+var sizes = {
+  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
+  },
+  sizes
+};
+
+// src/BiblioteksentralenProvider.tsx
+var emptyTheme = {};
+var BiblioteksentralenProvider = (props) => /* @__PURE__ */ React99.createElement(ChakraProvider, { theme: extendTheme(biblioteksentralenChakraTheme, props.customTheme ?? emptyTheme) }, props.children);
+
+// src/components/ErrorBoundary.tsx
+import { Box as Box3 } from "@chakra-ui/react";
+import React100 from "react";
+var StyledPre = (props) => /* @__PURE__ */ React100.createElement(Box3, { as: "pre", paddingTop: "0.5rem", wordBreak: "break-all", whiteSpace: "pre-wrap", fontSize: "0.8rem", ...props });
+var ErrorBoundary = class extends React100.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.setState({ hasError: true, error, errorInfo });
+    console.error(error, { errorInfo, boundaryName: this.props.boundaryName });
+  }
+  render() {
+    if (this.state.hasError) {
+      const stackTrace = this.state.errorInfo?.componentStack;
+      const errormsg = this.state.error?.message;
+      const info = this.props.boundaryName;
+      return /* @__PURE__ */ React100.createElement("div", null, /* @__PURE__ */ React100.createElement(Alert, { status: "error" }, /* @__PURE__ */ React100.createElement("p", null, "Beklager, det skjedde en teknisk feil."), isDevelopment() && (stackTrace || errormsg) && /* @__PURE__ */ React100.createElement("div", null, /* @__PURE__ */ React100.createElement(StyledPre, null, errormsg || ""), /* @__PURE__ */ React100.createElement(StyledPre, null, info || ""), /* @__PURE__ */ React100.createElement(StyledPre, null, stackTrace || ""))));
+    }
+    return this.props.children;
+  }
+};
+
+// src/components/HashLinkTarget.tsx
+import { Box as Box4 } from "@chakra-ui/react";
+import React101 from "react";
+var focusOnRelativeParentStyle = {
+  "&:focus-within": {
+    position: "static",
+    boxShadow: "none",
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      height: "100%",
+      width: "100%",
+      pointerEvents: "none",
+      borderRadius: "0.25rem",
+      boxShadow: "var(--chakra-shadows-outline)"
+    }
+  }
+};
+function HashLinkTarget(props) {
+  return /* @__PURE__ */ React101.createElement(Box4, { position: "relative", sx: props.focusOnParent ? focusOnRelativeParentStyle : void 0 }, /* @__PURE__ */ React101.createElement(
+    Box4,
+    {
+      id: props.id,
+      tabIndex: props.focusOnParent ? -1 : void 0,
+      position: "absolute",
+      top: `-${props.spaceAbove || "2.5rem"}`,
+      _focus: {
+        boxShadow: "none !important"
+      }
+    }
+  ));
+}
+
+// src/components/withErrorBoundary.tsx
+import React102 from "react";
+var withErrorBoundary = (Component, boundaryName) => {
+  return React102.forwardRef((props, ref) => /* @__PURE__ */ React102.createElement(ErrorBoundary, { boundaryName }, /* @__PURE__ */ React102.createElement(Component, { ...props, ref })));
+};
+export {
+  Alert,
+  BiblioteksentralenProvider,
+  Button,
+  ConditionalWrapper,
+  ErrorBoundary,
+  HashLinkTarget,
+  HideWithCSS,
+  Input,
+  Link,
+  VisuallyHidden,
+  biblioteksentralenChakraTheme,
+  colors,
+  withErrorBoundary
+};
+//# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biblioteksentralen/react",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.7",
   "description": "React library for reusable code in Biblioteksentralens js-apps",
   "keywords": [],
   "author": "Biblioteksentralen",
@@ -9,7 +9,7 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "./dist/*.{js,d.ts,map}",
+    "./dist/*.{js,mjs,d.ts,map}",
     "*.md",
     "LICENSE"
   ],
@@ -39,9 +39,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tsup": "^8.0.1",
-    "@biblioteksentralen/icons": "1.0.0-beta.8",
-    "@biblioteksentralen/types": "1.0.0-beta.6",
-    "@biblioteksentralen/utils": "1.0.0-beta.8"
+    "@biblioteksentralen/icons": "1.0.0-beta.9",
+    "@biblioteksentralen/utils": "1.0.0-beta.9",
+    "@biblioteksentralen/types": "1.0.0-beta.7"
   },
   "peerDependencies": {
     "react": "^18.2.0",