@obosbbl/grunnmuren-react 1.3.0 → 1.4.0

package/dist/Accordion/Accordion.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export declare const Accordion: {
+    (): void;
+    Item: (props: AccordionItemProps) => JSX.Element;
+    Header: <T extends React.ElementType<any> = "h3">(props: AccordionHeaderProps<T> & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "as">) => JSX.Element;
+    Content: (props: AccordionContentProps) => JSX.Element;
+};
+export interface AccordionItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onChange?: (open: boolean) => void;
+}
+export declare const AccordionItem: (props: AccordionItemProps) => JSX.Element;
+interface AccordionHeaderProps<T extends React.ElementType> {
+    /**
+     * The heading element that wraps the accordion item's button. Should always be an element with `role="heading"`
+     * or a HTML heading tag. Change this to an appropriate heading level for your page.
+     * @default h3 */
+    as?: T;
+}
+export declare const AccordionHeader: <T extends React.ElementType<any> = "h3">(props: AccordionHeaderProps<T> & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "as">) => JSX.Element;
+interface AccordionContentProps extends React.ComponentPropsWithoutRef<'div'> {
+}
+export declare const AccordionContent: (props: AccordionContentProps) => JSX.Element;
+export {};

package/dist/Accordion/index.d.ts

@@ -0,0 +1 @@
+export * from './Accordion';

package/dist/Form/FormLabel.d.ts

@@ -2,5 +2,6 @@
 export interface LabelProps extends React.ComponentPropsWithoutRef<'label'> {
     children: React.ReactNode;
     isRequired?: boolean;
+    isInvalid?: boolean;
 }
 export declare const FormLabel: (props: LabelProps) => JSX.Element;

package/dist/Input/Input.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="react" />
 export interface InputProps extends React.ComponentPropsWithoutRef<'input'> {
     as?: string;
-    prefix?: string;
+    /** React node on the left (ex. icon, text, component) */
+    leftAddon?: React.ReactNode;
+    /** React node on the left (ex. icon, text, component) */
+    rightAddon?: React.ReactNode;
     /** Render input as invalid. Sets `aria-invalid` to true */
     isInvalid?: boolean;
 }

package/dist/TextField/TextField.d.ts

@@ -7,7 +7,10 @@ export interface TextFieldProps extends React.ComponentPropsWithoutRef<'input'>
     error?: string;
     /**  Label for the form control */
     label: string;
-    prefix?: string;
+    /** React node on the left (ex. icon, text, component) */
+    leftAddon?: React.ReactNode;
+    /** React node on the left (ex. icon, text, component) */
+    rightAddon?: React.ReactNode;
     /** Automatically valdiate the form control using the HTML constraint validation API. @default true */
     validate?: boolean;
 }

package/dist/grunnmuren.es.js

@@ -29,9 +29,14 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import classNames from "clsx";
+import cx from "clsx";
+import composeRefs from "@seznam/compose-react-refs";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useCallback, useState, useEffect, useId, forwardRef, useContext, Children, isValidElement, cloneElement, createContext, useMemo, useRef } from "react";
+import { useMedia } from "react-use";
+export { useMedia } from "react-use";
+import { useState, useCallback, useEffect, useId, forwardRef, useContext, Children, isValidElement, cloneElement, createContext, useMemo, useRef } from "react";
+const noop = () => {
+};
 var __defProp2 = Object.defineProperty;
 var __defProps2 = Object.defineProperties;
 var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
@@ -90,6 +95,21 @@ const InfoCircle = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spread
     d: "M16 0C12.8355 0 9.74207 0.938384 7.11088 2.69649C4.4797 4.45459 2.42894 6.95345 1.21793 9.87707C0.0069325 12.8007 -0.309921 16.0177 0.307443 19.1214C0.924806 22.2251 2.44866 25.0761 4.6863 27.3137C6.92394 29.5513 9.77487 31.0752 12.8786 31.6926C15.9823 32.3099 19.1993 31.9931 22.1229 30.7821C25.0466 29.5711 27.5454 27.5203 29.3035 24.8891C31.0616 22.2579 32 19.1645 32 16C32 11.7565 30.3143 7.68687 27.3137 4.68629C24.3131 1.68571 20.2435 0 16 0ZM18 26H14V15H18V26ZM18 11H14V7H18V11Z"
   })
 }));
+const LoadingSpinner = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
+  width: "1.25em",
+  height: "1.25em",
+  fill: "none",
+  viewBox: "0 0 33 30",
+  role: "img",
+  "aria-hidden": props["aria-label"] == null
+}, props), {
+  children: /* @__PURE__ */ jsx("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M16.954 0.0129699C14.1678 -0.0982239 11.3996 0.507048 8.91404 1.77093C6.42847 3.03482 4.30859 4.91508 2.75703 7.23199C1.20546 9.54891 0.274066 12.2251 0.0518554 15.0046C-0.170355 17.7842 0.324049 20.5743 1.48781 23.1083C2.65158 25.6423 4.44581 27.8355 6.69901 29.4782C7.91167 30.3623 9.61144 30.096 10.4955 28.8833C11.3796 27.6706 11.1133 25.9709 9.90064 25.0868C8.3985 23.9916 7.20235 22.5295 6.42651 20.8402C5.65066 19.1509 5.32106 17.2908 5.4692 15.4377C5.61734 13.5847 6.23827 11.8006 7.27265 10.256C8.30703 8.71135 9.72027 7.45784 11.3773 6.61525C13.0344 5.77266 14.8798 5.36915 16.7373 5.44328C18.5948 5.51741 20.4022 6.0667 21.9869 7.03866C23.5715 8.01062 24.8804 9.37276 25.7884 10.9949C26.6964 12.617 27.1731 14.4449 27.1731 16.3039C27.1731 17.8046 28.3897 19.0212 29.8905 19.0212C31.3912 19.0212 32.6078 17.8046 32.6078 16.3039C32.6078 13.5154 31.8926 10.7736 30.5306 8.34039C29.1686 5.9072 27.2053 3.86399 24.8284 2.40605C22.4514 0.948106 19.7403 0.124164 16.954 0.0129699ZM28.5318 27.1732C30.0325 27.1732 31.2491 25.9566 31.2491 24.4558C31.2491 22.9551 30.0325 21.7385 28.5318 21.7385C27.031 21.7385 25.8145 22.9551 25.8145 24.4558C25.8145 25.9566 27.031 27.1732 28.5318 27.1732Z",
+    clipRule: "evenodd"
+  })
+}));
 const MenuAlt = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
   width: "1.25em",
   height: "1.25em",
@@ -131,7 +151,7 @@ const Alert = (props) => {
     "severity"
   ]);
   return /* @__PURE__ */ jsx("section", __spreadProps(__spreadValues({
-    className: classNames(className, "p-4 md:py-8", {
+    className: cx(className, "p-4 md:py-8", {
       "bg-orange-light": severity === "info",
       "bg-red-light": severity === "alert"
     }),
@@ -158,11 +178,11 @@ const AlertIcon = ({
 }) => {
   if (severity === "alert") {
     return /* @__PURE__ */ jsx(Warning, {
-      className: classNames(className, "text-red")
+      className: cx(className, "text-red")
     });
   }
   return /* @__PURE__ */ jsx(InfoCircle, {
-    className: classNames(className, "text-orange")
+    className: cx(className, "text-orange")
   });
 };
 const chipVariations = {
@@ -188,43 +208,20 @@ const Chip = (props) => {
   const chipVariation = color && chipVariations[color];
   const iconColor = color && iconColors[color];
   return /* @__PURE__ */ jsxs("div", {
-    className: classNames("inline-flex items-center overflow-hidden rounded-lg border-2 font-medium", chipVariation, className),
+    className: cx("inline-flex items-center overflow-hidden rounded-lg border-2 font-medium", chipVariation, className),
     children: [icon && /* @__PURE__ */ jsx("div", {
-      className: classNames("px-3 py-2", iconColor),
+      className: cx("px-3 py-2", iconColor),
       children: icon
     }), /* @__PURE__ */ jsx("div", {
-      className: classNames("flex-1 py-2 px-3", {
+      className: cx("flex-1 py-2 px-3", {
         "bg-white": variant === "outline"
       }),
       children
     })]
   });
 };
-function assignRef(ref, value) {
-  if (ref == null)
-    return;
-  if (isFunction(ref)) {
-    ref(value);
-  } else {
-    try {
-      ref.current = value;
-    } catch (error) {
-      throw new Error(`Cannot assign value "${value}" to ref "${ref}"`);
-    }
-  }
-}
-function useComposedRefs(...refs) {
-  return useCallback((node) => {
-    for (const ref of refs) {
-      assignRef(ref, node);
-    }
-  }, refs);
-}
-function isFunction(value) {
-  return !!(value && {}.toString.call(value) == "[object Function]");
-}
-const QUERY = "(prefers-reduced-motion: no-preference)";
-const usePrefersReducedMotion = () => !useMedia(QUERY);
+const QUERY = "(prefers-reduced-motion: reduce)";
+const usePrefersReducedMotion = (defaultState = false) => useMedia(QUERY, defaultState);
 function useBlockBackgroundColor(blockBgColor) {
   switch (blockBgColor) {
     case "gray":
@@ -237,21 +234,6 @@ function useBlockBackgroundColor(blockBgColor) {
       return "bg-blue-lightest";
   }
 }
-function useMedia(query) {
-  const [matches, setMatches] = useState(false);
-  useEffect(() => {
-    const mediaQueryList = window.matchMedia(query);
-    setMatches(mediaQueryList.matches);
-    const listener = (event) => {
-      setMatches(event.matches);
-    };
-    mediaQueryList.addEventListener("change", listener);
-    return () => {
-      mediaQueryList.removeEventListener("change", listener);
-    };
-  }, [query]);
-  return matches;
-}
 const useScreenMaxWidthMd = () => useMedia("(max-width: 767.9px)");
 function useFormControlValidity(ref, enabled = true) {
   const [validity, setValidity] = useState("indeterminate");
@@ -313,7 +295,7 @@ const Banner = (props) => {
   ]);
   const bgColor = useBlockBackgroundColor(bgColorProp);
   return /* @__PURE__ */ jsx("article", __spreadProps(__spreadValues({
-    className: classNames(className, bgColor, "py-8 px-4 md:py-14")
+    className: cx(className, bgColor, "py-8 px-4 md:py-14")
   }, rest), {
     children: /* @__PURE__ */ jsxs("div", {
       className: "<md:flex-wrap container flex gap-4 md:flex-row md:gap-12",
@@ -363,7 +345,7 @@ const Button = forwardRef((props, ref) => {
   const colorFromContext = useContext(ButtonColorContext);
   const color = colorFromProp != null ? colorFromProp : colorFromContext;
   const buttonVariation = buttonVariations[`${color}-${variant}`];
-  const classes = classNames(className, buttonVariation, "button");
+  const classes = cx(className, buttonVariation, "button");
   const children = loading ? /* @__PURE__ */ jsx(Loader, {
     children: childrenFromProp
   }) : childrenFromProp;
@@ -390,30 +372,12 @@ const Loader = (props) => {
     children: [deeplyWrapStrings(props.children), /* @__PURE__ */ jsx("span", {
       className: "!visible absolute top-1 bottom-1 left-1 right-1 grid place-items-center overflow-hidden bg-inherit",
       "aria-hidden": true,
-      children: /* @__PURE__ */ jsx(LoadingIcon, {
+      children: /* @__PURE__ */ jsx(LoadingSpinner, {
         className: "animate-spin"
       })
     })]
   });
 };
-const LoadingIcon = (props) => /* @__PURE__ */ jsxs("svg", __spreadProps(__spreadValues({
-  width: "1.25em",
-  height: "1.25em",
-  fill: "none",
-  viewBox: "0 0 24 24"
-}, props), {
-  children: [/* @__PURE__ */ jsx("path", {
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeWidth: 4,
-    d: "M22 12C22 10.2897 21.5613 8.60798 20.726 7.11558C19.8906 5.62318 18.6864 4.36998 17.2285 3.47575C15.7706 2.58152 14.1077 2.07615 12.3988 2.00795C10.6898 1.93975 8.99195 2.311 7.46743 3.0862C5.9429 3.86141 4.64268 5.01466 3.69102 6.43575C2.73937 7.85683 2.1681 9.49824 2.0318 11.2031C1.89551 12.908 2.19875 14.6193 2.91255 16.1735C3.62634 17.7277 4.72684 19.0729 6.10884 20.0805"
-  }), /* @__PURE__ */ jsx("circle", {
-    cx: 21,
-    cy: 18,
-    r: 2,
-    fill: "currentColor"
-  })]
-}));
 function deeplyWrapStrings(children) {
   return Children.map(children, (child) => {
     if (!isValidElement(child)) {
@@ -447,7 +411,7 @@ const Campaign = (props) => {
     "rightAlignBody"
   ]);
   return /* @__PURE__ */ jsxs(Component, __spreadProps(__spreadValues({
-    className: classNames(className, "grid gap-8 md:grid-flow-col md:grid-cols-[50%,50%] md:gap-0")
+    className: cx(className, "grid gap-8 md:grid-flow-col md:grid-cols-[50%,50%] md:gap-0")
   }, rest), {
     children: [/* @__PURE__ */ jsx(CampaignContext.Provider, {
       value: rightAlignBody,
@@ -462,7 +426,7 @@ const CampaignBody = (props) => {
     "className"
   ]);
   return /* @__PURE__ */ jsx("div", __spreadValues({
-    className: classNames(className, "md:mx-18 self-center")
+    className: cx(className, "md:mx-18 self-center")
   }, rest));
 };
 const CampaignImage = (props) => {
@@ -474,7 +438,7 @@ const CampaignImage = (props) => {
     "children"
   ]);
   const bodyIsRightAligned = useContext(CampaignContext);
-  const className = classNames(classNameProp, "<md:rounded-b-3xl w-full", bodyIsRightAligned ? "md:rounded-r-3xl" : "md:rounded-l-3xl md:order-1");
+  const className = cx(classNameProp, "<md:rounded-b-3xl w-full", bodyIsRightAligned ? "md:rounded-r-3xl" : "md:rounded-l-3xl md:order-1");
   if (isValidElement(children)) {
     const child = Children.only(children);
     return cloneElement(child, __spreadValues({
@@ -498,7 +462,7 @@ const Card = (props) => {
     "bgColor"
   ]);
   return /* @__PURE__ */ jsx(Component, __spreadValues({
-    className: classNames(className, "relative overflow-hidden rounded-3xl", {
+    className: cx(className, "relative overflow-hidden rounded-3xl", {
       "border-gray-concrete border-2 border-solid bg-white": bgColor === "white",
       "bg-gray-light": bgColor === "gray"
     })
@@ -511,7 +475,7 @@ const CardImage = (props) => {
     "className"
   ]);
   return /* @__PURE__ */ jsx("img", __spreadValues({
-    className: classNames(className, "w-full object-cover"),
+    className: cx(className, "w-full object-cover"),
     loading: "lazy"
   }, rest));
 };
@@ -525,7 +489,7 @@ const CardList = (props) => {
   ]);
   const bgColor = useBlockBackgroundColor(bgColorProp);
   return /* @__PURE__ */ jsx("div", {
-    className: classNames(bgColor, className),
+    className: cx(bgColor, className),
     children: /* @__PURE__ */ jsx("div", __spreadValues({
       className: "container grid grid-cols-1 gap-12 py-16 md:grid-cols-2 md:py-20 lg:py-24"
     }, rest))
@@ -538,7 +502,7 @@ const CardContent = (props) => {
     "className"
   ]);
   return /* @__PURE__ */ jsx("div", __spreadValues({
-    className: classNames(className, "p-8 md:p-10")
+    className: cx(className, "p-8 md:p-10")
   }, rest));
 };
 const CardLinkOverlay = forwardRef((props, ref) => {
@@ -548,7 +512,7 @@ const CardLinkOverlay = forwardRef((props, ref) => {
     "className"
   ]);
   return /* @__PURE__ */ jsx("a", __spreadValues({
-    className: classNames(className, "no-underline before:absolute before:top-0 before:left-0 before:block before:h-full before:w-full hover:underline"),
+    className: cx(className, "no-underline before:absolute before:top-0 before:left-0 before:block before:h-full before:w-full hover:underline"),
     ref
   }, rest));
 });
@@ -569,17 +533,17 @@ const Checkbox = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxs("div", {
     className: "grid gap-2",
     children: [/* @__PURE__ */ jsxs("label", {
-      className: classNames(className, "inline-flex cursor-pointer items-center"),
+      className: cx(className, "inline-flex cursor-pointer items-center"),
       children: [/* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({
         id,
-        className: classNames("checkbox checked:bg-green checked:border-green mr-3 grid h-[1.25em] w-[1.25em] flex-none cursor-pointer appearance-none place-content-center rounded border-2 border-solid bg-white text-white focus:outline-none focus:ring-2", {
+        className: cx("checkbox checked:bg-green checked:border-green mr-3 grid h-[1.25em] w-[1.25em] flex-none cursor-pointer appearance-none place-content-center rounded border-2 border-solid bg-white text-white focus:outline-none focus:ring-2", {
           "border-gray-dark focus:ring-black": !error,
           "border-red focus:ring-red": !!error
         }),
         ref,
         type: "checkbox"
       }, rest), {
-        "aria-describedby": classNames({
+        "aria-describedby": cx({
           [errorMsgId]: !!error
         }),
         "aria-invalid": !!error
@@ -601,7 +565,7 @@ const Footer = (props) => {
   return /* @__PURE__ */ jsx(ButtonColorContext.Provider, {
     value: "white",
     children: /* @__PURE__ */ jsx("footer", __spreadProps(__spreadValues({
-      className: classNames(className, "bg-blue py-12 text-white")
+      className: cx(className, "bg-blue pt-18 relative pb-12 text-white before:absolute before:top-0 before:left-0 before:right-0 before:h-6 before:rounded-b-3xl before:bg-white")
     }, rest), {
       children: /* @__PURE__ */ jsx("div", {
         className: "container",
@@ -621,7 +585,7 @@ const Form = (props) => {
     "className"
   ]);
   return /* @__PURE__ */ jsxs("form", __spreadProps(__spreadValues({
-    className: classNames(className, "border-blue-dark block overflow-hidden rounded-t-3xl rounded-b-lg border-2")
+    className: cx(className, "border-blue-dark block overflow-hidden rounded-t-3xl rounded-b-lg border-2")
   }, rest), {
     children: [heading && /* @__PURE__ */ jsx(FormHeading, {
       children: heading
@@ -638,7 +602,7 @@ const FormHeading = (props) => {
     "className"
   ]);
   return /* @__PURE__ */ jsx("h2", __spreadValues({
-    className: classNames(className, "bg-blue-dark p-6 text-xl font-bold text-white md:px-10 md:py-8 md:text-2xl")
+    className: cx(className, "bg-blue-dark p-6 text-xl font-bold text-white md:px-10 md:py-8 md:text-2xl")
   }, rest));
 };
 const FormError = (props) => {
@@ -649,7 +613,7 @@ const FormError = (props) => {
   ]);
   return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({
     "aria-live": "polite",
-    className: classNames(className, "border-red bg-red-light rounded-lg border-2 p-6 text-sm")
+    className: cx(className, "border-red bg-red-light rounded-lg border-2 p-6 text-sm")
   }, rest), {
     children: "Beklager! Noe gikk dessverre galt under innesendingen av skjemaet. Pr\xF8v gjerne igjen om en stund."
   }));
@@ -663,7 +627,7 @@ const FormErrorMessage = (props) => {
     "className"
   ]);
   return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({
-    className: classNames(className, "bg-red-light text-red flex items-center gap-2 rounded-lg py-1 px-4 text-sm"),
+    className: cx(className, "bg-red-light text-red flex items-center gap-2 rounded-lg py-1 px-4 text-sm"),
     "aria-live": "polite"
   }, rest), {
     children: [/* @__PURE__ */ jsx(Warning, {
@@ -680,7 +644,7 @@ const FormHelperText = (props) => {
     "children"
   ]);
   return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({
-    className: classNames(className, "text-gray-dark text-sm")
+    className: cx(className, "text-gray-dark text-sm")
   }, rest), {
     children
   }));
@@ -689,20 +653,22 @@ const FormLabel = (props) => {
   const _a = props, {
     className,
     children,
-    isRequired
+    isRequired,
+    isInvalid
   } = _a, rest = __objRest(_a, [
     "className",
     "children",
-    "isRequired"
+    "isRequired",
+    "isInvalid"
   ]);
   return /* @__PURE__ */ jsxs("label", __spreadProps(__spreadValues({
-    className: classNames(className, "block cursor-pointer font-medium")
+    className: cx(className, "block cursor-pointer font-semibold")
   }, rest), {
-    children: [children, isRequired && /* @__PURE__ */ jsx("span", {
+    children: [isRequired && /* @__PURE__ */ jsx("span", {
       "aria-hidden": true,
-      className: "ml-px select-none",
+      className: cx("mr-px select-none", isInvalid ? "text-red" : "text-blue"),
       children: "*"
-    })]
+    }), children]
   }));
 };
 const FormSuccess = (props) => {
@@ -716,7 +682,7 @@ const FormSuccess = (props) => {
     "text"
   ]);
   return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({
-    className: classNames(className, "bg-gray-concrete flex flex-col gap-8 p-8 text-center")
+    className: cx(className, "bg-gray-concrete flex flex-col gap-8 p-8 text-center")
   }, rest), {
     children: [/* @__PURE__ */ jsx("img", {
       className: "mx-auto",
@@ -767,7 +733,7 @@ const Hero = (props) => {
     children: /* @__PURE__ */ jsx(HeroContext.Provider, {
       value: context,
       children: /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({
-        className: classNames(className, "<md:px-0 container md:grid", {
+        className: cx(className, "<md:px-0 container md:grid", {
           "md:grid-cols-[50%,50%]": contentPosition === "vertical-split"
         }),
         style: usesGridAreaPlacement(contentPosition) ? {
@@ -784,7 +750,7 @@ const HeroImage = (props) => {
     contentPosition
   } = useContext(HeroContext);
   return /* @__PURE__ */ jsxs("picture", {
-    className: classNames("aspect-w-6 aspect-h-7 block", {
+    className: cx("aspect-w-6 aspect-h-7 block", {
       "sm:aspect-w-8 sm:aspect-h-4": contentPosition !== "vertical-split",
       "sm:aspect-w-8 sm:aspect-h-8": contentPosition === "vertical-split"
     }),
@@ -795,9 +761,7 @@ const HeroImage = (props) => {
       media: "(min-width: 768px)",
       srcSet: props.mdSrc
     }), /* @__PURE__ */ jsx("img", {
-      className: classNames("overflow-hidden rounded-t-3xl object-cover md:rounded-3xl", {
-        "md:rounded-l-none": contentPosition === "vertical-split"
-      }),
+      className: "object-cover",
       decoding: "async",
       src: props.src,
       alt: props.alt
@@ -823,13 +787,13 @@ const HeroContent = (props) => {
   ]);
   const usesGridArea = usesGridAreaPlacement(contentPosition);
   return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({
-    className: classNames(className, "<md:mx-4 relative grid grid-flow-row grid-cols-[minmax(auto,_37rem)]  content-center gap-6 rounded-3xl py-10 px-6 text-center md:p-12", {
+    className: cx(className, "<md:mx-4 relative grid grid-flow-row grid-cols-[minmax(auto,_37rem)] content-center gap-6 rounded-3xl py-10 px-6 text-center md:p-12", {
       "<md:-mt-18": hasImage,
       "text-white": bgColor !== "white",
       "bg-green-dark": bgColor === "green",
       "bg-blue-dark": bgColor === "blue",
       "bg-white": bgColor === "white",
-      "md:-order-1 md:mt-0 md:justify-center md:rounded-r-none md:text-left": contentPosition === "vertical-split",
+      "md:z-10 md:-order-1 md:mt-0 md:-mr-5 md:justify-center md:rounded-l-none md:text-left": contentPosition === "vertical-split",
       "justify-center md:mx-auto md:w-4/5": contentPosition === "below-center",
       "md:-mt-18": hasImage && contentPosition === "below-center",
       "md:ml-[8%] md:-mt-32 md:max-w-[58%] md:text-left": contentPosition === "below-left",
@@ -862,7 +826,7 @@ const HeroActions = (props) => {
     contentPosition
   } = useContext(HeroContext);
   return /* @__PURE__ */ jsx("div", __spreadValues({
-    className: classNames(className, "grid items-center justify-center justify-items-center gap-4 md:grid-flow-col", {
+    className: cx(className, "grid items-center justify-center justify-items-center gap-4 md:grid-flow-col", {
       "md:justify-start": contentPosition === "vertical-split" || contentPosition === "below-left"
     })
   }, rest));
@@ -872,36 +836,37 @@ const Input = forwardRef((props, ref) => {
     className,
     isInvalid,
     size,
-    prefix,
     as,
-    type: typeProp
+    type: typeProp,
+    rightAddon,
+    leftAddon
   } = _a, rest = __objRest(_a, [
     "className",
     "isInvalid",
     "size",
-    "prefix",
     "as",
-    "type"
+    "type",
+    "rightAddon",
+    "leftAddon"
   ]);
   const Component = as != null ? as : "input";
   const type = getType(Component, typeProp);
   return /* @__PURE__ */ jsxs("div", {
-    className: classNames(className, "relative flex items-center rounded-md border-[1px] border-b-[3px] focus-within:-ml-[2px] focus-within:-mt-[2px] focus-within:border-[3px] focus-within:shadow", {
-      "border-gray-dark focus-within:border-blue": !isInvalid,
+    className: cx(className, "relative flex items-center rounded-md border-[1px] border-b-[3px] focus-within:-ml-[2px] focus-within:-mt-[2px] focus-within:border-[3px] focus-within:shadow", {
+      "focus-within:border-blue-dark border-black": !isInvalid,
       "border-red focus-within:border-red": isInvalid,
       "w-fit": size != null,
-      "w-full": size == null
+      "w-full": size == null,
+      "pl-4": leftAddon,
+      "pr-4": rightAddon
     }),
-    children: [prefix && /* @__PURE__ */ jsx("span", {
-      className: "text-gray pl-4",
-      children: prefix
-    }), /* @__PURE__ */ jsx(Component, __spreadValues({
+    children: [leftAddon, /* @__PURE__ */ jsx(Component, __spreadValues({
       "aria-invalid": isInvalid,
       ref,
-      className: "focus:none placeholder-gray w-full rounded-md border-none px-4 py-3 outline-none",
+      className: "focus:none placeholder-gray w-full rounded-md border-none px-4 py-3.5 focus:outline-none",
       size,
       type
-    }, rest))]
+    }, rest)), rightAddon]
   });
 });
 function getType(Component, type) {
@@ -922,8 +887,7 @@ const Link = (props) => {
   });
 };
 const NavbarContext = createContext({
-  setIsExpanded: () => {
-  },
+  setIsExpanded: noop,
   isExpanded: false,
   collapsibleId: ""
 });
@@ -947,7 +911,7 @@ const Navbar = (props) => {
     children: /* @__PURE__ */ jsx(NavbarContext.Provider, {
       value: expandedContext,
       children: /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({
-        className: classNames(className, "bg-blue py-6 text-white md:py-8")
+        className: cx(className, "bg-blue relative pt-6 pb-12 text-white before:absolute before:bottom-0 before:left-0 before:right-0 before:h-6 before:rounded-t-3xl before:bg-white md:pt-8 md:pb-14")
       }, rest), {
         children: /* @__PURE__ */ jsx("div", {
           className: "container",
@@ -969,7 +933,7 @@ const NavbarItems = (props) => {
     isExpanded
   } = useContext(NavbarContext);
   return /* @__PURE__ */ jsx("nav", __spreadProps(__spreadValues({
-    className: classNames(className, "my-8 flex flex-col md:mb-0 md:flex md:flex-row md:flex-wrap md:gap-x-8", {
+    className: cx(className, "my-8 flex flex-col md:mb-0 md:flex md:flex-row md:flex-wrap md:gap-x-8", {
       hidden: !isExpanded
     })
   }, rest), {
@@ -988,7 +952,7 @@ const NavbarItem = forwardRef((props, ref) => {
   ]);
   return /* @__PURE__ */ jsx("a", __spreadProps(__spreadValues({
     "aria-current": active ? "page" : void 0,
-    className: classNames(className, "border-b border-[#0156E0] py-3 no-underline md:border-b-2 md:border-transparent md:py-2 md:hover:border-white", {
+    className: cx(className, "border-b border-[#0156E0] py-3 no-underline md:border-b-2 md:border-transparent md:py-2 md:hover:border-white", {
       "fake-font-bold md:bg-blue-dark md:-mx-3 md:rounded-t-lg md:px-3": active
     }),
     ref
@@ -1027,7 +991,7 @@ const NavbarContent = (props) => {
     "logo"
   ]);
   return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({
-    className: classNames(className, "flex items-center justify-between gap-8")
+    className: cx(className, "flex items-center justify-between gap-8")
   }, rest), {
     children: [logo, /* @__PURE__ */ jsx("div", {
       className: "hidden md:block",
@@ -1049,7 +1013,7 @@ const NavbarCollapsible = (props) => {
   } = useContext(NavbarContext);
   return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, rest), {
     "aria-hidden": !isExpanded,
-    className: classNames(className, "md:-mb-8 md:block", {
+    className: cx(className, "md:-mb-8 md:block", {
       hidden: !isExpanded
     }),
     id: collapsibleId,
@@ -1071,8 +1035,7 @@ const RadioContext = createContext({
   defaultValue: void 0,
   isControlled: false,
   name: void 0,
-  onChange() {
-  },
+  onChange: noop,
   required: false,
   value: void 0
 });
@@ -1093,7 +1056,7 @@ const Radio = forwardRef((props, ref) => {
     value
   } = useContext(RadioContext);
   return /* @__PURE__ */ jsxs("label", {
-    className: classNames(className, "cursor-pointer"),
+    className: cx(className, "cursor-pointer"),
     children: [/* @__PURE__ */ jsx("input", __spreadValues({
       className: "radio",
       defaultChecked: !isControlled ? rest.value === defaultValue : void 0,
@@ -1149,7 +1112,7 @@ const RadioGroup = forwardRef((props, ref) => {
     children: /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({
       "aria-describedby": description ? helpId : void 0,
       "aria-labelledby": label ? labelId : void 0,
-      className: classNames(className, "flex flex-col gap-4"),
+      className: cx(className, "flex flex-col gap-4"),
       role: "radiogroup",
       ref
     }, rest), {
@@ -1180,7 +1143,7 @@ const Snackbar = (props) => {
         children: [/* @__PURE__ */ jsx(InfoCircle, {
           className: "text-orange snackbar-icon mr-4 md:mr-8 md:text-2xl"
         }), /* @__PURE__ */ jsx("h3", {
-          className: classNames("snackbar-header min-w-0 max-w-prose text-base font-medium", {
+          className: cx("snackbar-header min-w-0 max-w-prose text-base font-medium", {
             "overflow-hidden overflow-ellipsis whitespace-nowrap": !isExpanded
           }),
           children: heading
@@ -1200,7 +1163,7 @@ const Snackbar = (props) => {
   });
 };
 const SnackbarButton = (props) => /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues({
-  className: classNames(props.className, "focus-visible:ring-offset flex-shrink-0 underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black")
+  className: cx(props.className, "focus-visible:ring-offset flex-shrink-0 underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black")
 }, props), {
   children: props.children
 }));
@@ -1225,7 +1188,7 @@ const StepListItem = (props) => {
     "bullet"
   ]);
   return /* @__PURE__ */ jsxs("li", __spreadProps(__spreadValues({
-    className: classNames(className, "group relative flex gap-4 pb-8 text-sm last:pb-0 md:gap-8 md:pb-12 md:text-base")
+    className: cx(className, "group relative flex gap-4 pb-8 text-sm last:pb-0 md:gap-8 md:pb-12 md:text-base")
   }, rest), {
     children: [/* @__PURE__ */ jsx(StepListBullet, {
       children: bullet
@@ -1269,22 +1232,23 @@ const TextArea = forwardRef((props, ref) => {
     children: [/* @__PURE__ */ jsx(FormLabel, {
       htmlFor: id,
       isRequired: required,
+      isInvalid: !!error || validity === "invalid",
       children: label
+    }), description && /* @__PURE__ */ jsx(FormHelperText, {
+      id: helpTextId,
+      children: description
     }), /* @__PURE__ */ jsx(Input, __spreadProps(__spreadValues({
       as: "textarea",
-      ref: useComposedRefs(ownRef, ref),
+      ref: composeRefs(ownRef, ref),
       id,
       required
     }, rest), {
       isInvalid: !!error || validity === "invalid",
-      "aria-describedby": classNames({
+      "aria-describedby": cx({
         [errorMsgId]: !!error,
         [helpTextId]: description
       })
-    })), description && /* @__PURE__ */ jsx(FormHelperText, {
-      id: helpTextId,
-      children: description
-    }), errorMsg && /* @__PURE__ */ jsx(FormErrorMessage, {
+    })), errorMsg && /* @__PURE__ */ jsx(FormErrorMessage, {
       id: errorMsgId,
       children: errorMsg
     })]
@@ -1322,22 +1286,23 @@ const TextField = forwardRef((props, ref) => {
     children: [/* @__PURE__ */ jsx(FormLabel, {
       htmlFor: id,
       isRequired: required,
+      isInvalid: !!error || validity === "invalid",
       children: label
+    }), description && /* @__PURE__ */ jsx(FormHelperText, {
+      id: helpTextId,
+      children: description
     }), /* @__PURE__ */ jsx(Input, __spreadProps(__spreadValues({
       id,
       required,
-      ref: useComposedRefs(ownRef, ref),
+      ref: composeRefs(ownRef, ref),
       type
     }, rest), {
       isInvalid: !!error || validity === "invalid",
-      "aria-describedby": classNames({
+      "aria-describedby": cx({
         [errorMsgId]: !!error,
         [helpTextId]: description
       })
-    })), description && /* @__PURE__ */ jsx(FormHelperText, {
-      id: helpTextId,
-      children: description
-    }), errorMsg && /* @__PURE__ */ jsx(FormErrorMessage, {
+    })), errorMsg && /* @__PURE__ */ jsx(FormErrorMessage, {
       id: errorMsgId,
       children: errorMsg
     })]
@@ -1352,7 +1317,7 @@ const Select = forwardRef((props, ref) => {
     "className"
   ]);
   return /* @__PURE__ */ jsxs("div", {
-    className: classNames("relative", className),
+    className: cx("relative", className),
     children: [/* @__PURE__ */ jsx("select", __spreadProps(__spreadValues({}, rest), {
       className: "focus:border-blue border-gray-dark w-full appearance-none rounded-lg border-2 border-solid bg-white px-4 py-3 focus:outline-none",
       ref,
@@ -1362,4 +1327,4 @@ const Select = forwardRef((props, ref) => {
     })]
   });
 });
-export { Alert, Banner, BannerImage, Button, ButtonColorContext, Campaign, Card, CardContent, CardImage, CardLinkOverlay, CardList, Checkbox, Chip, Footer, Form, FormError, FormErrorMessage, FormHeading, FormHelperText, FormLabel, FormSuccess, Hero, HeroActions, HeroContent, HeroContext, HeroImage, Input, Link, Navbar, NavbarCollapsible, NavbarContent, NavbarExpandedMobileContent, NavbarItem, NavbarItems, Radio, RadioGroup, Select, Snackbar, SnackbarButton, SnackbarContent, StepList, StepListItem, TextArea, TextField, assignRef, useBlockBackgroundColor, useComposedRefs, useFallbackId, useFormControlValidity, useMedia, usePrefersReducedMotion, useScreenMaxWidthMd };
+export { Alert, Banner, BannerImage, Button, ButtonColorContext, Campaign, Card, CardContent, CardImage, CardLinkOverlay, CardList, Checkbox, Chip, Footer, Form, FormError, FormErrorMessage, FormHeading, FormHelperText, FormLabel, FormSuccess, Hero, HeroActions, HeroContent, HeroContext, HeroImage, Input, Link, Navbar, NavbarCollapsible, NavbarContent, NavbarExpandedMobileContent, NavbarItem, NavbarItems, Radio, RadioGroup, Select, Snackbar, SnackbarButton, SnackbarContent, StepList, StepListItem, TextArea, TextField, useBlockBackgroundColor, useFallbackId, useFormControlValidity, usePrefersReducedMotion, useScreenMaxWidthMd };

package/dist/hooks/index.d.ts

@@ -1,7 +1,6 @@
-export * from './useComposedRefs';
+export { useMedia } from 'react-use';
 export * from './usePrefersReducedMotion';
 export * from './useBlockBackgroundColor';
-export * from './useMedia';
 export * from './useScreenMaxWidthMd';
 export * from './useFormControlValidity';
 export * from './useFallbackId';

package/dist/hooks/usePrefersReducedMotion.d.ts

@@ -1 +1 @@
-export declare const usePrefersReducedMotion: () => boolean;
+export declare const usePrefersReducedMotion: (defaultState?: boolean) => boolean;

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { default as cx } from 'clsx';
+export { default as composeRefs } from '@seznam/compose-react-refs';
+export declare const noop: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "OBOS Grunnmuren design system React components",
   "license": "MIT",
   "repository": {
@@ -17,19 +17,20 @@
   ],
   "types": "./dist/index.d.ts",
   "devDependencies": {
-    "@babel/core": "7.18.10",
-    "@obosbbl/grunnmuren-tailwind": "0.6.0",
-    "@storybook/addon-controls": "6.5.10",
-    "@storybook/addon-docs": "6.5.10",
+    "@babel/core": "7.19.1",
+    "@obosbbl/grunnmuren-tailwind": "0.7.0",
+    "@storybook/addon-controls": "6.5.12",
+    "@storybook/addon-docs": "6.5.12",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/builder-webpack5": "6.5.10",
-    "@storybook/manager-webpack5": "6.5.10",
-    "@storybook/react": "6.5.10",
-    "@types/react": "18.0.17",
+    "@storybook/builder-webpack5": "6.5.12",
+    "@storybook/manager-webpack5": "6.5.12",
+    "@storybook/react": "6.5.12",
+    "@types/react": "18.0.20",
     "@types/react-dom": "18.0.6",
     "@vitejs/plugin-react": "1.3.2",
     "postcss": "8.4.16",
     "react": "18.2.0",
+    "react-collapsed": "3.4.0",
     "react-dom": "18.2.0",
     "require-from-string": "2.0.2",
     "rimraf": "3.0.2",
@@ -38,11 +39,13 @@
     "webpack": "5.74.0"
   },
   "dependencies": {
-    "@obosbbl/grunnmuren-icons": "^0.4.0",
-    "clsx": "1.2.1"
+    "@obosbbl/grunnmuren-icons": "^0.5.0",
+    "@seznam/compose-react-refs": "1.0.6",
+    "clsx": "1.2.1",
+    "react-use": "17.4.0"
   },
   "peerDependencies": {
-    "@obosbbl/grunnmuren-tailwind": "^0.6.0",
+    "@obosbbl/grunnmuren-tailwind": "^0.7.0",
     "react": "^18"
   },
   "peerDependenciesMeta": {

package/dist/hooks/useComposedRefs.d.ts

@@ -1,25 +0,0 @@
-/// <reference types="react" />
-/**
- * React.Ref uses the readonly type `React.RefObject` instead of
- * `React.MutableRefObject`, We pretty much always assume ref objects are
- * mutable (at least when we create them), so this type is a workaround so some
- * of the weird mechanics of using refs with TS.
- */
-export declare type AssignableRef<ValueType> = {
-    bivarianceHack(instance: ValueType | null): void;
-}['bivarianceHack'] | React.MutableRefObject<ValueType | null>;
-/**
- * Passes or assigns an arbitrary value to a ref function or object.
- *
- * @param ref
- * @param value
- */
-export declare function assignRef<RefValueType = unknown>(ref: AssignableRef<RefValueType> | null | undefined, value: any): void;
-/**
- * Passes or assigns a value to multiple refs (typically a DOM node). Useful for
- * dealing with components that need an explicit ref for DOM calculations but
- * also forwards refs assigned by an app.
- *
- * @param refs Refs to fork
- */
-export declare function useComposedRefs<RefValueType = unknown>(...refs: (AssignableRef<RefValueType> | null | undefined)[]): (node: unknown) => void;

package/dist/hooks/useMedia.d.ts

@@ -1 +0,0 @@
-export declare function useMedia(query: string): boolean;