@obosbbl/grunnmuren-react 0.3.0 → 1.1.0

package/dist/Campaign/Campaign.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+interface CampaignProps<T extends React.ElementType> {
+    /** @default div */
+    as?: T;
+    body: React.ReactElement;
+    /** Use the `body` and `image` props. */
+    children?: never;
+    image: React.ReactElement;
+    /**
+     * Setting this to false changes the ordering of the body and the image on >= medium sceens.
+     * Use this to alternate the image's positon with lists of Campaigns.
+     * @default true
+     */
+    rightAlignBody?: boolean;
+}
+declare const Campaign: {
+    <T extends import("react").ElementType<any> = "div">(props: CampaignProps<T> & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<T>>, keyof CampaignProps<T>>): JSX.Element;
+    Body: (props: CampaignBodyProps) => JSX.Element;
+    Image: (props: CampaignImageProps) => JSX.Element;
+};
+interface CampaignBodyProps extends React.ComponentPropsWithoutRef<'div'> {
+}
+interface CampaignImageProps extends React.ComponentPropsWithoutRef<'img'> {
+}
+export { Campaign };

package/dist/Campaign/index.d.ts

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

package/dist/Checkbox/Checkbox.d.ts

@@ -5,5 +5,7 @@
 export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
     children: React.ReactNode;
     className?: string;
+    /** 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" | "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" | "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" | "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, "className" | "children" | "form" | "slot" | "style" | "title" | "pattern" | "list" | "role" | "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" | "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" | "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>>;

package/dist/StepList/StepList.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+interface StepListProps extends React.ComponentPropsWithoutRef<'ol'> {
+}
+declare const StepList: {
+    (props: StepListProps): JSX.Element;
+    Item: (props: StepListItemProps) => JSX.Element;
+};
+interface StepListItemProps extends React.ComponentPropsWithoutRef<'li'> {
+    /** Content for the StepListItem's bullet */
+    bullet: React.ReactNode;
+}
+export declare const StepListItem: (props: StepListItemProps) => JSX.Element;
+export { StepList };

package/dist/StepList/index.d.ts

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

package/dist/grunnmuren.es.js

@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
 };
 import classNames from "clsx";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useCallback, useState, useEffect, useId, forwardRef, useContext, createContext, useMemo, useRef } from "react";
+import { useCallback, useState, useEffect, useId, forwardRef, useContext, createContext, isValidElement, Children, cloneElement, useMemo, useRef } from "react";
 var __defProp2 = Object.defineProperty;
 var __defProps2 = Object.defineProperties;
 var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
@@ -77,36 +77,6 @@ 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 Mail = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
-  width: "1.25em",
-  height: "1.25em",
-  fill: "none",
-  viewBox: "0 0 28 22",
-  role: "img",
-  "aria-hidden": props["aria-label"] == null
-}, props), {
-  children: /* @__PURE__ */ jsx("path", {
-    fill: "currentColor",
-    fillRule: "evenodd",
-    d: "M28 4L15.984 10.866C15.3797 11.2112 14.6959 11.3927 14 11.3927C13.3041 11.3927 12.6203 11.2112 12.016 10.866L0 4C0 2.93913 0.421427 1.92172 1.17157 1.17157C1.92172 0.421427 2.93913 0 4 0H24C25.0609 0 26.0783 0.421427 26.8284 1.17157C27.5786 1.92172 28 2.93913 28 4ZM0 9L12 16H16L28 9V18C28 19.0609 27.5786 20.0783 26.8284 20.8284C26.0783 21.5786 25.0609 22 24 22H4C2.93913 22 1.92172 21.5786 1.17157 20.8284C0.421427 20.0783 0 19.0609 0 18V9Z",
-    clipRule: "evenodd"
-  })
-}));
-const MapPin = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
-  width: "1.25em",
-  height: "1.25em",
-  fill: "none",
-  viewBox: "0 0 22 35",
-  role: "img",
-  "aria-hidden": props["aria-label"] == null
-}, props), {
-  children: /* @__PURE__ */ jsx("path", {
-    fill: "currentColor",
-    fillRule: "evenodd",
-    d: "M2.51 17.205L2.28 16.915H2.24C1.09834 15.315 0.41945 13.4314 0.277819 11.471C0.136187 9.51058 0.537288 7.54902 1.43711 5.80154C2.33694 4.05407 3.70071 2.58821 5.37881 1.56481C7.0569 0.541404 8.98446 0 10.95 0C12.9155 0 14.8431 0.541404 16.5212 1.56481C18.1993 2.58821 19.5631 4.05407 20.4629 5.80154C21.3627 7.54902 21.7638 9.51058 21.6222 11.471C21.4806 13.4314 20.8017 15.315 19.66 16.915L19.43 17.215L19.43 17.215C19.33 17.345 19.23 17.475 19.12 17.595L14.12 24.015C13.828 24.6005 13.3785 25.0931 12.8221 25.4374C12.2657 25.7816 11.6243 25.964 10.97 25.964C10.3157 25.964 9.67431 25.7816 9.11789 25.4374C8.56147 25.0931 8.11202 24.6005 7.82 24.015L2.82 17.605C2.74304 17.514 2.67097 17.4182 2.60037 17.3243C2.57007 17.284 2.54004 17.244 2.51 17.205ZM14 8.00497H8V14.005H14V8.00497ZM4 30.005H18L22 34.005H0L4 30.005Z",
-    clipRule: "evenodd"
-  })
-}));
 const MenuAlt = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
   width: "1.25em",
   height: "1.25em",
@@ -122,19 +92,6 @@ const MenuAlt = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadVal
     clipRule: "evenodd"
   })
 }));
-const Mobile = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
-  width: "1.25em",
-  height: "1.25em",
-  fill: "none",
-  viewBox: "0 0 22 32",
-  role: "img",
-  "aria-hidden": props["aria-label"] == null
-}, props), {
-  children: /* @__PURE__ */ jsx("path", {
-    fill: "currentColor",
-    d: "M18 0H4C2.93914 0 1.92172 0.421427 1.17157 1.17157C0.421427 1.92172 0 2.93913 0 4V28C0 29.0609 0.421427 30.0783 1.17157 30.8284C1.92172 31.5786 2.93914 32 4 32H18C19.0609 32 20.0783 31.5786 20.8284 30.8284C21.5786 30.0783 22 29.0609 22 28V4C22 2.93913 21.5786 1.92172 20.8284 1.17157C20.0783 0.421427 19.0609 0 18 0ZM13.036 28H9.036V24H13.036V28ZM16.036 20H6.036V6H16.036V20Z"
-  })
-}));
 const Warning = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
   width: "1.25em",
   height: "1.25em",
@@ -368,6 +325,62 @@ const Button = forwardRef((props, ref) => {
   });
 });
 const ButtonColorContext = createContext("standard");
+const CampaignContext = createContext(true);
+const Campaign = (props) => {
+  const _a = props, {
+    as: Component = "div",
+    body: Body,
+    className,
+    image: Image,
+    rightAlignBody = true
+  } = _a, rest = __objRest(_a, [
+    "as",
+    "body",
+    "className",
+    "image",
+    "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")
+  }, rest), {
+    children: [/* @__PURE__ */ jsx(CampaignContext.Provider, {
+      value: rightAlignBody,
+      children: Image
+    }), Body]
+  }));
+};
+const CampaignBody = (props) => {
+  const _a = props, {
+    className
+  } = _a, rest = __objRest(_a, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({
+    className: classNames(className, "md:mx-18 self-center")
+  }, rest));
+};
+const CampaignImage = (props) => {
+  const _a = props, {
+    className: classNameProp,
+    children
+  } = _a, rest = __objRest(_a, [
+    "className",
+    "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");
+  if (isValidElement(children)) {
+    const child = Children.only(children);
+    return cloneElement(child, __spreadValues({
+      className
+    }, rest));
+  }
+  return /* @__PURE__ */ jsx("img", __spreadValues({
+    className
+  }, rest));
+};
+Campaign.Body = CampaignBody;
+Campaign.Image = CampaignImage;
 const Card = (props) => {
   const _a = props, {
     as: Component = "div",
@@ -423,26 +436,52 @@ const CardContent = (props) => {
   }, rest));
 };
 const CardLinkOverlay = forwardRef((props, ref) => {
+  const _a = props, {
+    className
+  } = _a, rest = __objRest(_a, [
+    "className"
+  ]);
   return /* @__PURE__ */ jsx("a", __spreadValues({
-    className: "no-underline before:absolute before:top-0 before:left-0 before:block before:h-full before:w-full before:content-[''] hover:underline",
+    className: classNames(className, "no-underline before:absolute before:top-0 before:left-0 before:block before:h-full before:w-full hover:underline"),
     ref
-  }, props));
+  }, rest));
 });
 const Checkbox = forwardRef((props, ref) => {
   const _a = props, {
     children,
-    className
+    className,
+    error,
+    id: idProp
   } = _a, rest = __objRest(_a, [
     "children",
-    "className"
+    "className",
+    "error",
+    "id"
   ]);
-  return /* @__PURE__ */ jsxs("label", {
-    className: classNames(className, "inline-flex cursor-pointer items-center"),
-    children: [/* @__PURE__ */ jsx("input", __spreadValues({
-      className: "checkbox border-gray-dark checked:bg-green checked:border-green mr-3 grid h-[1.25em] w-[1.25em] cursor-pointer appearance-none place-content-center rounded border-2 border-solid bg-white text-white focus:outline-none focus:ring-2 focus:ring-black",
-      ref,
-      type: "checkbox"
-    }, rest)), children]
+  const id = useFallbackId(idProp);
+  const errorMsgId = id + "err";
+  return /* @__PURE__ */ jsxs("div", {
+    className: "grid gap-2",
+    children: [/* @__PURE__ */ jsxs("label", {
+      className: classNames(className, "inline-flex cursor-pointer items-center"),
+      children: [/* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({
+        id,
+        className: classNames("checkbox checked:bg-green checked:border-green bg-whit mr-3 grid h-[1.25em] w-[1.25em] flex-none cursor-pointer appearance-none place-content-center rounded border-2 border-solid 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({
+          [errorMsgId]: !!error
+        }),
+        "aria-invalid": !!error
+      })), children]
+    }), !!error && /* @__PURE__ */ jsx(FormErrorMessage, {
+      id: errorMsgId,
+      children: error
+    })]
   });
 });
 const Footer = (props) => {
@@ -722,30 +761,6 @@ const HeroActions = (props) => {
     })
   }, rest));
 };
-const IconLegacy = (props) => {
-  var _b;
-  const _a = props, {
-    className,
-    name
-  } = _a, rest = __objRest(_a, [
-    "className",
-    "name"
-  ]);
-  const IconComponent = (_b = iconMap[name]) != null ? _b : IconFallback;
-  return /* @__PURE__ */ jsx(IconComponent, __spreadValues({
-    className: classNames(className, "inline")
-  }, rest));
-};
-const IconFallback = (props) => /* @__PURE__ */ jsx("svg", __spreadValues({
-  "aria-hidden": props["aria-label"] == null,
-  height: "1.25em",
-  width: "1.25em"
-}, props));
-const iconMap = {
-  mapmarker: MapPin,
-  smartphone: Mobile,
-  envelope: Mail
-};
 const Input = forwardRef((props, ref) => {
   const _a = props, {
     className,
@@ -993,10 +1008,10 @@ const SnackbarContent = (props) => {
     children: props.children
   }));
 };
-const Stepper = (props) => {
+const StepList = (props) => {
   return /* @__PURE__ */ jsx("ol", __spreadValues({}, props));
 };
-const Step = (props) => {
+const StepListItem = (props) => {
   const _a = props, {
     className,
     children,
@@ -1009,22 +1024,18 @@ const Step = (props) => {
   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")
   }, rest), {
-    children: [/* @__PURE__ */ jsx(StepBullet, {
+    children: [/* @__PURE__ */ jsx(StepListBullet, {
       children: bullet
     }), children]
   }));
 };
-const StepBullet = (props) => {
-  const _a = props, {
-    className
-  } = _a, rest = __objRest(_a, [
-    "className"
-  ]);
+const StepListBullet = (props) => {
   return /* @__PURE__ */ jsx("span", __spreadValues({
     "aria-hidden": true,
-    className: classNames(className, "text-green border-gray-light after:bg-gray-light grid h-10 w-10 flex-none place-content-center rounded-full border-2 text-sm font-bold after:absolute after:left-5 after:top-10 after:bottom-0 after:w-0.5 group-last:after:hidden md:h-20 md:w-20 md:text-xl md:after:left-10 md:after:top-20")
-  }, rest));
+    className: "text-green border-gray-light after:bg-gray-light grid h-10 w-10 flex-none place-content-center rounded-full border-2 text-sm font-bold after:absolute after:left-5 after:top-10 after:bottom-0 after:w-0.5 group-last:after:hidden md:h-20 md:w-20 md:text-xl md:after:left-10 md:after:top-20"
+  }, props));
 };
+StepList.Item = StepListItem;
 const TextArea = forwardRef((props, ref) => {
   const _a = props, {
     description,
@@ -1129,4 +1140,4 @@ const TextField = forwardRef((props, ref) => {
     })]
   });
 });
-export { Alert, Banner, BannerImage, Button, ButtonColorContext, Card, CardContent, CardImage, CardLinkOverlay, CardList, Checkbox, Footer, Form, FormError, FormErrorMessage, FormHeading, FormHelperText, FormLabel, FormSuccess, Hero, HeroActions, HeroContent, HeroContext, HeroImage, IconLegacy, Input, Link, Navbar, NavbarCollapsible, NavbarContent, NavbarExpandedMobileContent, NavbarItem, NavbarItems, Snackbar, SnackbarButton, SnackbarContent, Step, StepBullet, Stepper, TextArea, TextField, assignRef, useBlockBackgroundColor, useComposedRefs, useFallbackId, useFormControlValidity, useMedia, usePrefersReducedMotion, useScreenMaxWidthMd };
+export { Alert, Banner, BannerImage, Button, ButtonColorContext, Campaign, Card, CardContent, CardImage, CardLinkOverlay, CardList, Checkbox, Footer, Form, FormError, FormErrorMessage, FormHeading, FormHelperText, FormLabel, FormSuccess, Hero, HeroActions, HeroContent, HeroContext, HeroImage, Input, Link, Navbar, NavbarCollapsible, NavbarContent, NavbarExpandedMobileContent, NavbarItem, NavbarItems, Snackbar, SnackbarButton, SnackbarContent, StepList, StepListItem, TextArea, TextField, assignRef, useBlockBackgroundColor, useComposedRefs, useFallbackId, useFormControlValidity, useMedia, usePrefersReducedMotion, useScreenMaxWidthMd };

package/dist/index.d.ts

@@ -1,17 +1,17 @@
 export * from './Alert';
 export * from './Banner';
 export * from './Button';
+export * from './Campaign';
 export * from './Card';
 export * from './Checkbox';
 export * from './Footer';
 export * from './Form';
 export * from './Hero';
-export * from './IconLegacy';
 export * from './Input';
 export * from './Link';
 export * from './Navbar';
 export * from './Snackbar';
-export * from './Stepper';
+export * from './StepList';
 export * from './TextArea';
 export * from './TextField';
 export * from './hooks';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "0.3.0",
+  "version": "1.1.0",
   "description": "OBOS Grunnmuren design system React components",
   "license": "MIT",
   "repository": {
@@ -17,32 +17,32 @@
   ],
   "types": "./dist/index.d.ts",
   "devDependencies": {
-    "@babel/core": "7.18.2",
-    "@obosbbl/grunnmuren-tailwind": "^0.3.1",
-    "@storybook/addon-controls": "6.5.5",
-    "@storybook/addon-docs": "6.5.5",
+    "@babel/core": "7.18.6",
+    "@obosbbl/grunnmuren-tailwind": "^0.4.1",
+    "@storybook/addon-controls": "6.5.9",
+    "@storybook/addon-docs": "6.5.9",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/builder-webpack5": "6.5.5",
-    "@storybook/manager-webpack5": "6.5.5",
-    "@storybook/react": "6.5.5",
-    "@types/react": "18.0.9",
+    "@storybook/builder-webpack5": "6.5.9",
+    "@storybook/manager-webpack5": "6.5.9",
+    "@storybook/react": "6.5.9",
+    "@types/react": "18.0.14",
     "@types/react-dom": "18.0.5",
     "@vitejs/plugin-react": "1.3.2",
     "postcss": "8.4.14",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "require-from-string": "2.0.2",
-    "tailwindcss": "3.0.24",
-    "vite": "2.9.9",
-    "webpack": "5.72.1"
+    "tailwindcss": "3.1.4",
+    "vite": "2.9.13",
+    "webpack": "5.73.0"
   },
   "dependencies": {
     "@obosbbl/grunnmuren-icons": "^0.3.0",
-    "clsx": "1.1.1"
+    "clsx": "1.2.0"
   },
   "peerDependencies": {
     "react": "^18",
-    "@obosbbl/grunnmuren-tailwind": "^0.3.1"
+    "@obosbbl/grunnmuren-tailwind": "^0.4.1"
   },
   "peerDependenciesMeta": {
     "@obosbbl/grunnmuren-tailwind": {

package/dist/IconLegacy/IconLegacy.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-export declare type IconName = keyof typeof iconMap;
-interface IconLegacyProps {
-    className?: string;
-    name: IconName;
-    children?: never;
-}
-/**
- *
- * NB! This component should only be used for compatibility reasons.
- * It uses old icon names and it causes all the referenced icons to be inluded in the application bundle.
- * Import icons from @obosbbl/grunnmuren-icons instead.
- */
-export declare const IconLegacy: (props: IconLegacyProps) => JSX.Element;
-declare const iconMap: {
-    readonly mapmarker: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
-    readonly smartphone: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
-    readonly envelope: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
-};
-export {};

package/dist/IconLegacy/index.d.ts

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

package/dist/Stepper/Stepper.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-interface StepperProps extends React.ComponentPropsWithoutRef<'ol'> {
-}
-export declare const Stepper: (props: StepperProps) => JSX.Element;
-interface StepProps extends React.ComponentPropsWithoutRef<'li'> {
-    /** Content for the Step item's bullet */
-    bullet: React.ReactNode;
-}
-export declare const Step: (props: StepProps) => JSX.Element;
-interface StepBulletProps extends React.ComponentPropsWithoutRef<'span'> {
-}
-export declare const StepBullet: (props: StepBulletProps) => JSX.Element;
-export {};

package/dist/Stepper/index.d.ts

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