@obosbbl/grunnmuren-react 1.4.1 → 1.4.3

package/dist/Accordion/Accordion.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+interface AccordionProps extends React.ComponentPropsWithoutRef<'div'> {
+}
 export declare const Accordion: {
-    (): void;
+    (props: AccordionProps): JSX.Element;
     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;

package/dist/Checkbox/Checkbox.d.ts

@@ -8,4 +8,4 @@ export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
     /** Error message for the form control */
     error?: string;
 }
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Pick<CheckboxProps, "className" | "children" | "form" | "slot" | "style" | "title" | "pattern" | "list" | "role" | "color" | "error" | "key" | "alt" | "crossOrigin" | "height" | "src" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "autoComplete" | "accept" | "capture" | "checked" | "multiple" | "maxLength" | "minLength" | "enterKeyHint" | "max" | "min" | "readOnly" | "required" | "size"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Pick<CheckboxProps, "error" | "form" | "slot" | "style" | "title" | "pattern" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "value" | "list" | "step" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "disabled" | "multiple" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "maxLength" | "minLength" | "src" | "crossOrigin" | "height" | "width" | "name" | "type" | "enterKeyHint" | "max" | "min" | "readOnly" | "required" | "size"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/grunnmuren.es.js

@@ -29,14 +29,13 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { useState, useCallback, useEffect, useId, createContext, useContext, forwardRef, Children, isValidElement, cloneElement, useMemo, useRef } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import useCollapse from "react-collapsed";
 import cx from "clsx";
 import composeRefs from "@seznam/compose-react-refs";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 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;
@@ -138,87 +137,7 @@ const Warning = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadVal
     d: "M31.549 24.132L20.12 2.155C19.7824 1.50555 19.273 0.961197 18.6474 0.581216C18.0218 0.201234 17.304 0.000197802 16.572 0H15.428C14.696 0.000197802 13.9782 0.201234 13.3526 0.581216C12.727 0.961197 12.2176 1.50555 11.88 2.155L0.451 24.132C0.154748 24.7022 6.05376e-05 25.3354 0 25.978V26C0 27.0609 0.421427 28.0783 1.17157 28.8284C1.92172 29.5786 2.93913 30 4 30H28C29.0609 30 30.0783 29.5786 30.8284 28.8284C31.5786 28.0783 32 27.0609 32 26V25.978C31.9999 25.3354 31.8453 24.7022 31.549 24.132ZM18 26H14V22H18V26ZM18 18H14V7H18V18Z"
   })
 }));
-const Alert = (props) => {
-  const _a = props, {
-    className,
-    children,
-    heading,
-    severity = "alert"
-  } = _a, rest = __objRest(_a, [
-    "className",
-    "children",
-    "heading",
-    "severity"
-  ]);
-  return /* @__PURE__ */ jsx("section", __spreadProps(__spreadValues({
-    className: cx(className, "p-4 md:py-8", {
-      "bg-orange-light": severity === "info",
-      "bg-red-light": severity === "alert"
-    }),
-    role: "alert"
-  }, rest), {
-    children: /* @__PURE__ */ jsxs("div", {
-      className: "flex justify-center",
-      children: [/* @__PURE__ */ jsx(AlertIcon, {
-        className: "mr-4 flex-none md:mr-8 md:text-2xl",
-        severity
-      }), /* @__PURE__ */ jsxs("div", {
-        className: "w-prose flex-initial",
-        children: [/* @__PURE__ */ jsx("h2", {
-          className: "h4 mb-2",
-          children: heading
-        }), children]
-      })]
-    })
-  }));
-};
-const AlertIcon = ({
-  severity,
-  className
-}) => {
-  if (severity === "alert") {
-    return /* @__PURE__ */ jsx(Warning, {
-      className: cx(className, "text-red")
-    });
-  }
-  return /* @__PURE__ */ jsx(InfoCircle, {
-    className: cx(className, "text-orange")
-  });
-};
-const chipVariations = {
-  "blue-light": "bg-blue-light border-blue-light",
-  "red-light": "bg-red-light border-red-light",
-  "green-light": "bg-green-light border-green-light",
-  "orange-light": "bg-orange-light border-orange-light"
-};
-const iconColors = {
-  "blue-light": "text-blue-dark",
-  "red-light": "text-red",
-  "green-light": "text-green",
-  "orange-light": "text-black"
-};
-const Chip = (props) => {
-  const {
-    className,
-    color,
-    icon,
-    children,
-    variant = "filled"
-  } = props;
-  const chipVariation = color && chipVariations[color];
-  const iconColor = color && iconColors[color];
-  return /* @__PURE__ */ jsxs("div", {
-    className: cx("inline-flex items-center overflow-hidden rounded-lg border-2 font-medium", chipVariation, className),
-    children: [icon && /* @__PURE__ */ jsx("div", {
-      className: cx("px-3 py-2", iconColor),
-      children: icon
-    }), /* @__PURE__ */ jsx("div", {
-      className: cx("flex-1 py-2 px-3", {
-        "bg-white": variant === "outline"
-      }),
-      children
-    })]
-  });
+const noop = () => {
 };
 const QUERY = "(prefers-reduced-motion: reduce)";
 const usePrefersReducedMotion = (defaultState = false) => useMedia(QUERY, defaultState);
@@ -234,7 +153,7 @@ function useBlockBackgroundColor(blockBgColor) {
       return "bg-blue-lightest";
   }
 }
-const useScreenMaxWidthMd = () => useMedia("(max-width: 767.9px)");
+const useScreenMaxWidthMd = (defaultState) => useMedia("(max-width: 767.9px)", defaultState);
 function useFormControlValidity(ref, enabled = true) {
   const [validity, setValidity] = useState("indeterminate");
   const [validationMessage, setValidationMessage] = useState();
@@ -279,6 +198,152 @@ function useFallbackId(id) {
   const generatedId = useId();
   return id != null ? id : generatedId;
 }
+const DURATION_MS = 300;
+const DURATION_TW = "duration-300";
+const Accordion = (props) => {
+  const _a = props, {
+    className
+  } = _a, rest = __objRest(_a, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({
+    className: cx(className, "flex flex-col gap-2")
+  }, rest));
+};
+const AccordionContext = createContext({
+  isExpanded: false,
+  setExpanded: noop,
+  getCollapseProps: noop,
+  getToggleProps: noop,
+  onChange: noop
+});
+const AccordionItem = (props) => {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const _a = props, {
+    className,
+    defaultOpen,
+    onChange = noop,
+    open
+  } = _a, rest = __objRest(_a, [
+    "className",
+    "defaultOpen",
+    "onChange",
+    "open"
+  ]);
+  const collapseContext = useCollapse({
+    defaultExpanded: defaultOpen,
+    isExpanded: open,
+    duration: DURATION_MS,
+    hasDisabledAnimation: prefersReducedMotion,
+    easing: "cubic-bezier(0.25, 0.1, 0.25, 1)"
+  });
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, {
+    value: __spreadValues({
+      onChange
+    }, collapseContext),
+    children: /* @__PURE__ */ jsx("div", __spreadValues({
+      className: cx(className, "border-b-gray-concrete overflow-hidden rounded-sm border-b-2 border-l-4 border-solid", collapseContext.isExpanded ? "border-l-green-dark" : "border-l-green")
+    }, rest))
+  });
+};
+const AccordionHeader = (props) => {
+  const _a = props, {
+    children,
+    className,
+    as: Heading = "h3"
+  } = _a, rest = __objRest(_a, [
+    "children",
+    "className",
+    "as"
+  ]);
+  const {
+    getToggleProps,
+    onChange,
+    isExpanded
+  } = useContext(AccordionContext);
+  const toggleProps = getToggleProps({
+    onClick: () => onChange(!isExpanded)
+  });
+  return /* @__PURE__ */ jsx(Heading, {
+    children: /* @__PURE__ */ jsxs("button", __spreadProps(__spreadValues(__spreadValues({
+      className: cx(className, "focus-visible:outline-blue-dark flex min-h-[4rem] w-full items-center justify-between px-5 py-4 text-left text-lg font-semibold focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-0", isExpanded ? "bg-green-dark text-white" : void 0)
+    }, rest), toggleProps), {
+      id: getToggleId(toggleProps["aria-controls"]),
+      children: [children, /* @__PURE__ */ jsx(ChevronDown, {
+        className: cx("shrink-0 text-sm", DURATION_TW, isExpanded ? "rotate-180" : void 0)
+      })]
+    }))
+  });
+};
+const AccordionContent = (props) => {
+  const {
+    getCollapseProps
+  } = useContext(AccordionContext);
+  const _a = props, {
+    className
+  } = _a, rest = __objRest(_a, [
+    "className"
+  ]);
+  const collapseProps = getCollapseProps();
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, collapseProps), {
+    role: "region",
+    "aria-labelledby": getToggleId(collapseProps.id),
+    children: /* @__PURE__ */ jsx("div", __spreadValues({
+      className: cx(className, "p-5 pb-10")
+    }, rest))
+  }));
+};
+const getToggleId = (id) => id + "toggle";
+Accordion.Item = AccordionItem;
+Accordion.Header = AccordionHeader;
+Accordion.Content = AccordionContent;
+const Alert = (props) => {
+  const _a = props, {
+    className,
+    children,
+    heading,
+    severity = "alert"
+  } = _a, rest = __objRest(_a, [
+    "className",
+    "children",
+    "heading",
+    "severity"
+  ]);
+  return /* @__PURE__ */ jsx("section", __spreadProps(__spreadValues({
+    className: cx(className, "p-4 md:py-8", {
+      "bg-orange-light": severity === "info",
+      "bg-red-light": severity === "alert"
+    }),
+    role: "alert"
+  }, rest), {
+    children: /* @__PURE__ */ jsxs("div", {
+      className: "flex justify-center",
+      children: [/* @__PURE__ */ jsx(AlertIcon, {
+        className: "mr-4 flex-none md:mr-8 md:text-2xl",
+        severity
+      }), /* @__PURE__ */ jsxs("div", {
+        className: "w-prose flex-initial",
+        children: [/* @__PURE__ */ jsx("h2", {
+          className: "h4 mb-2",
+          children: heading
+        }), children]
+      })]
+    })
+  }));
+};
+const AlertIcon = ({
+  severity,
+  className
+}) => {
+  if (severity === "alert") {
+    return /* @__PURE__ */ jsx(Warning, {
+      className: cx(className, "text-red")
+    });
+  }
+  return /* @__PURE__ */ jsx(InfoCircle, {
+    className: cx(className, "text-orange")
+  });
+};
 const Banner = (props) => {
   const _a = props, {
     bgColor: bgColorProp,
@@ -554,6 +619,41 @@ const Checkbox = forwardRef((props, ref) => {
     })]
   });
 });
+const chipVariations = {
+  "blue-light": "bg-blue-light border-blue-light",
+  "red-light": "bg-red-light border-red-light",
+  "green-light": "bg-green-light border-green-light",
+  "orange-light": "bg-orange-light border-orange-light"
+};
+const iconColors = {
+  "blue-light": "text-blue-dark",
+  "red-light": "text-red",
+  "green-light": "text-green",
+  "orange-light": "text-black"
+};
+const Chip = (props) => {
+  const {
+    className,
+    color,
+    icon,
+    children,
+    variant = "filled"
+  } = props;
+  const chipVariation = color && chipVariations[color];
+  const iconColor = color && iconColors[color];
+  return /* @__PURE__ */ jsxs("div", {
+    className: cx("inline-flex items-center overflow-hidden rounded-lg border-2 font-medium", chipVariation, className),
+    children: [icon && /* @__PURE__ */ jsx("div", {
+      className: cx("px-3 py-2", iconColor),
+      children: icon
+    }), /* @__PURE__ */ jsx("div", {
+      className: cx("flex-1 py-2 px-3", {
+        "bg-white": variant === "outline"
+      }),
+      children
+    })]
+  });
+};
 const Footer = (props) => {
   const _a = props, {
     className,
@@ -1024,7 +1124,7 @@ const NavbarExpandedMobileContent = (props) => {
   const {
     isExpanded
   } = useContext(NavbarContext);
-  const isMobileScreen = useScreenMaxWidthMd();
+  const isMobileScreen = useScreenMaxWidthMd(false);
   if (!isExpanded || !isMobileScreen)
     return null;
   return /* @__PURE__ */ jsx(Fragment, {
@@ -1127,6 +1227,25 @@ const RadioGroup = forwardRef((props, ref) => {
     }))
   });
 });
+const Select = forwardRef((props, ref) => {
+  const _a = props, {
+    children,
+    className
+  } = _a, rest = __objRest(_a, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs("div", {
+    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,
+      children
+    })), /* @__PURE__ */ jsx(ChevronDown, {
+      className: "absolute top-4 right-4"
+    })]
+  });
+});
 const Snackbar = (props) => {
   const {
     heading,
@@ -1308,23 +1427,4 @@ const TextField = forwardRef((props, ref) => {
     })]
   });
 });
-const Select = forwardRef((props, ref) => {
-  const _a = props, {
-    children,
-    className
-  } = _a, rest = __objRest(_a, [
-    "children",
-    "className"
-  ]);
-  return /* @__PURE__ */ jsxs("div", {
-    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,
-      children
-    })), /* @__PURE__ */ jsx(ChevronDown, {
-      className: "absolute top-4 right-4"
-    })]
-  });
-});
-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 };
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, 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/useScreenMaxWidthMd.d.ts

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

package/dist/index.d.ts

@@ -1,10 +1,11 @@
+export * from './Accordion';
 export * from './Alert';
-export * from './Chip';
 export * from './Banner';
 export * from './Button';
 export * from './Campaign';
 export * from './Card';
 export * from './Checkbox';
+export * from './Chip';
 export * from './Footer';
 export * from './Form';
 export * from './Hero';
@@ -12,9 +13,9 @@ export * from './Input';
 export * from './Link';
 export * from './Navbar';
 export * from './Radio';
+export * from './Select';
 export * from './Snackbar';
 export * from './StepList';
 export * from './TextArea';
 export * from './TextField';
 export * from './hooks';
-export * from './Select';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "OBOS Grunnmuren design system React components",
   "license": "MIT",
   "repository": {