@obosbbl/grunnmuren-react 1.6.2 → 1.8.0

package/dist/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type ButtonColor = 'standard' | 'white' | 'light-green';
+export type ButtonColor = 'standard' | 'white' | 'light-green';
 export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
     children: React.ReactNode;
     className?: string;

package/dist/Chip/Chip.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type ChipColor = 'blue-light' | 'green-light' | 'red-light' | 'orange-light';
+export type ChipColor = 'blue-light' | 'green-light' | 'red-light' | 'orange-light';
 export interface ChipProps {
     icon?: React.ReactNode;
     color?: ChipColor;

package/dist/Hero/Hero.d.ts

@@ -4,8 +4,8 @@ export declare const HeroContext: import("react").Context<{
     contentPosition: HeroContentPosition;
     hasImage: boolean;
 }>;
-export declare type HeroColor = 'green' | 'blue' | 'white';
-export declare type HeroContentPosition = 'below-center' | 'below-left' | 'top-left' | 'bottom-left' | 'top-right' | 'bottom-right' | 'center' | 'vertical-split';
+export type HeroColor = 'green' | 'blue' | 'white';
+export type HeroContentPosition = 'below-center' | 'below-left' | 'top-left' | 'bottom-left' | 'top-right' | 'bottom-right' | 'center' | 'vertical-split';
 export interface HeroProps {
     /** @default white */
     bgColor?: HeroColor;

package/dist/Pagination/Pagination.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { RequireAtLeastOne } from 'type-fest';
+interface BasePaginationProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'> {
+    /** The current page number.
+     * @note Starts at 1
+     */
+    page: number;
+    /** The total number of pages. */
+    count: number;
+    /**  Given a page number, should return a valid href string. */
+    getItemHref: (page: number) => string;
+    /**  Given a page number, should return a valid href string. */
+    getItemAriaLabel: (page: number) => string;
+    /** Aria label for the next page button link */
+    nextPageAriaLabel: string;
+    /** Aria label for the previous page button link */
+    prevPageAriaLabel: string;
+    /** Handler that is called with the page number to navigate to. `event.preventDefault` is called for you. Fallbacks to default browser behavior if undefined. */
+    onChange?: (page: number) => void;
+}
+type PaginationProps = RequireAtLeastOne<BasePaginationProps, 'aria-label' | 'aria-labelledby'>;
+export declare const Pagination: (props: PaginationProps) => JSX.Element;
+export {};

package/dist/Pagination/index.d.ts

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

package/dist/Select/Select.d.ts

@@ -1,7 +1,21 @@
 /// <reference types="react" />
-export interface SelectProps extends React.ComponentPropsWithoutRef<'select'> {
+export interface SelectProps extends Omit<React.ComponentPropsWithoutRef<'select'>, 'size'> {
+    /**
+     * Collection of <option />-elements
+     */
     children: React.ReactNode;
-    id?: string;
-    className?: string;
+    /** Help text for the form control */
+    description?: React.ReactNode;
+    /** Disables the built in HTML5 validation. If using custom validation for an entire form, consider setting `noValidate` on the form element instead. @default false */
+    disableValidation?: boolean;
+    /** Error message for the form control */
+    error?: string;
+    /**  Label for the form control */
+    label: string;
+    /**
+     * Changes font-size, padding and gaps
+     * @default medium
+     */
+    size?: 'medium' | 'small';
 }
 export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/Select/SelectPlain.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export interface SelectPlainProps extends Omit<React.ComponentPropsWithoutRef<'select'>, 'size'> {
+    /**
+     * Collection of <option />-elements
+     */
+    children: React.ReactNode;
+    /** Render select as invalid. Sets `aria-invalid` to true */
+    isInvalid?: boolean;
+    /**
+     * Changes font-size, padding and gaps
+     * @default medium
+     */
+    size?: 'medium' | 'small';
+}
+export declare const SelectPlain: import("react").ForwardRefExoticComponent<SelectPlainProps & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/StepList/StepList.d.ts

@@ -1,13 +1,25 @@
 /// <reference types="react" />
-interface StepListProps extends React.ComponentPropsWithoutRef<'ol'> {
+type Alignment = 'center' | 'top';
+export interface StepListProps extends React.ComponentPropsWithoutRef<'ol'> {
+    /**
+     * Determines the vertical alignment of the bullets
+     * @default 'center'
+     */
+    align?: Alignment;
+    /**
+     * <StepList> items
+     */
+    children: React.ReactNode;
 }
 declare const StepList: {
     (props: StepListProps): JSX.Element;
     Item: (props: StepListItemProps) => JSX.Element;
 };
-interface StepListItemProps extends React.ComponentPropsWithoutRef<'li'> {
+export interface StepListItemProps extends React.ComponentPropsWithoutRef<'li'> {
     /** Content for the StepListItem's bullet */
     bullet: React.ReactNode;
+    /** @private this is set by the parent StepList component */
+    align?: Alignment;
 }
 export declare const StepListItem: (props: StepListItemProps) => JSX.Element;
 export { StepList };

package/dist/grunnmuren.es.js

@@ -68,6 +68,32 @@ const ChevronDown = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__sprea
     d: "M0 4.31662L4.31662 0L14.3752 10.0484L24.4337 0L28.7503 4.31662L17.2563 15.8106C16.4929 16.5722 15.4586 16.9999 14.3803 16.9999C13.3019 16.9999 12.2676 16.5722 11.5042 15.8106L0 4.31662Z"
   })
 }));
+const ChevronLeft = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
+  width: "1.25em",
+  height: "1.25em",
+  fill: "none",
+  viewBox: "0 0 17 29",
+  role: "img",
+  "aria-hidden": props["aria-label"] == null
+}, props), {
+  children: /* @__PURE__ */ jsx("path", {
+    fill: "currentColor",
+    d: "M12.6771 0L17 4.31278L6.95043 14.3624L17 24.4119L12.6771 28.7247L1.19328 17.2409C0.814993 16.8631 0.514893 16.4143 0.310141 15.9204C0.105389 15.4265 0 14.897 0 14.3624C0 13.8277 0.105389 13.2982 0.310141 12.8043C0.514893 12.3104 0.814993 11.8616 1.19328 11.4838L12.6771 0Z"
+  })
+}));
+const ChevronRight = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
+  width: "1.25em",
+  height: "1.25em",
+  fill: "none",
+  viewBox: "0 0 17 29",
+  role: "img",
+  "aria-hidden": props["aria-label"] == null
+}, props), {
+  children: /* @__PURE__ */ jsx("path", {
+    fill: "currentColor",
+    d: "M4.32295 28.7247L0 24.4119L10.0496 14.3624L0 4.31278L4.32295 0L15.8067 11.4838C16.185 11.8616 16.4851 12.3104 16.6899 12.8043C16.8946 13.2982 17 13.8277 17 14.3624C17 14.897 16.8946 15.4265 16.6899 15.9204C16.4851 16.4143 16.185 16.8631 15.8067 17.2409L4.32295 28.7247Z"
+  })
+}));
 const Close = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
   width: "1.25em",
   height: "1.25em",
@@ -607,10 +633,10 @@ const Checkbox = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxs("div", {
     className: "grid gap-2",
     children: [/* @__PURE__ */ jsxs("label", {
-      className: cx(className, "inline-flex cursor-pointer items-center"),
+      className: cx(className, "flex cursor-pointer gap-2.5"),
       children: [/* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({
         id,
-        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", {
+        className: cx("checkbox checked:bg-green checked:border-green grid h-[1.25em] w-[1.25em] flex-none translate-y-[0.1em] 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
         }),
@@ -734,7 +760,7 @@ const FormErrorMessage = (props) => {
     "className"
   ]);
   return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({
-    className: cx(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 py-1 px-2 text-sm"),
     "aria-live": "polite"
   }, rest), {
     children: [/* @__PURE__ */ jsx(Warning, {
@@ -959,7 +985,7 @@ const Input = forwardRef((props, ref) => {
   const Component = as != null ? as : "input";
   const type = getType(Component, typeProp);
   return /* @__PURE__ */ jsxs("div", {
-    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", {
+    className: cx(className, "relative flex items-center rounded-lg border 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,
@@ -970,7 +996,7 @@ const Input = forwardRef((props, ref) => {
     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.5 focus:outline-none",
+      className: "focus:none placeholder-gray w-full rounded-lg border-none px-4 py-3.5 focus:outline-none",
       size,
       type
     }, rest)), rightAddon]
@@ -1138,6 +1164,150 @@ const NavbarExpandedMobileContent = (props) => {
     children: props.children
   });
 };
+const SIBLING_COUNT = 2;
+const PaginationContext = createContext({
+  currentPage: 0,
+  pageCount: 0
+});
+const Pagination = (props) => {
+  const _a = props, {
+    className,
+    page: currentPage,
+    count: pageCount,
+    onChange,
+    getItemHref,
+    getItemAriaLabel,
+    nextPageAriaLabel,
+    prevPageAriaLabel
+  } = _a, rest = __objRest(_a, [
+    "className",
+    "page",
+    "count",
+    "onChange",
+    "getItemHref",
+    "getItemAriaLabel",
+    "nextPageAriaLabel",
+    "prevPageAriaLabel"
+  ]);
+  const context = useMemo(() => ({
+    currentPage: Math.max(1, Math.min(currentPage, pageCount)),
+    pageCount: Math.max(1, pageCount)
+  }), [currentPage, pageCount]);
+  const handleClick = (page) => (event) => {
+    if (onChange) {
+      event.preventDefault();
+      onChange(page);
+    }
+  };
+  return /* @__PURE__ */ jsx(PaginationContext.Provider, {
+    value: context,
+    children: /* @__PURE__ */ jsxs("nav", __spreadProps(__spreadValues({
+      className: cx("flex justify-center gap-2 sm:gap-4", className)
+    }, rest), {
+      children: [/* @__PURE__ */ jsx(PrevPage, {
+        "aria-label": prevPageAriaLabel,
+        href: getItemHref(currentPage - 1),
+        onClick: handleClick(currentPage - 1)
+      }), /* @__PURE__ */ jsx(PageItem, {
+        page: 1,
+        href: getItemHref(1),
+        onClick: handleClick(1),
+        "aria-label": getItemAriaLabel(1),
+        selected: currentPage === 1
+      }), pageCount > 2 + SIBLING_COUNT * 2 && currentPage > SIBLING_COUNT + 2 && /* @__PURE__ */ jsx(PaginationEllipsis, {}), /* @__PURE__ */ jsx(Pages, {
+        children: (page) => /* @__PURE__ */ jsx(PageItem, {
+          href: getItemHref(page),
+          onClick: handleClick(page),
+          "aria-label": getItemAriaLabel(page),
+          page,
+          selected: page === currentPage
+        }, page)
+      }), /* @__PURE__ */ jsx(NextPage, {
+        "aria-label": nextPageAriaLabel,
+        href: getItemHref(currentPage + 1),
+        onClick: handleClick(currentPage + 1)
+      })]
+    }))
+  });
+};
+const NextPage = forwardRef((props, ref) => {
+  const {
+    currentPage,
+    pageCount
+  } = useContext(PaginationContext);
+  const hide = currentPage >= pageCount;
+  return /* @__PURE__ */ jsx(PageLink, __spreadProps(__spreadValues({
+    "aria-hidden": hide,
+    className: hide ? "invisible" : void 0,
+    ref,
+    rel: "next"
+  }, props), {
+    children: /* @__PURE__ */ jsx(ChevronRight, {})
+  }));
+});
+const PrevPage = forwardRef((props, ref) => {
+  const {
+    currentPage
+  } = useContext(PaginationContext);
+  const hide = currentPage <= 1;
+  return /* @__PURE__ */ jsx(PageLink, __spreadProps(__spreadValues({
+    "aria-hidden": hide,
+    className: hide ? "invisible" : void 0,
+    ref,
+    rel: "prev"
+  }, props), {
+    children: /* @__PURE__ */ jsx(ChevronLeft, {})
+  }));
+});
+const PageLink = forwardRef((props, ref) => {
+  const _a = props, {
+    className
+  } = _a, rest = __objRest(_a, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({
+    className: cx(className, "aria-[current]:border-green hover:bg-gray-concrete flex h-9 w-9 items-center justify-center rounded-lg border-2 border-transparent no-underline sm:h-10 sm:w-10"),
+    ref
+  }, rest));
+});
+const PaginationEllipsis = () => {
+  return /* @__PURE__ */ jsx("span", {
+    className: "flex h-9 w-9 cursor-default items-center justify-center border-2 border-transparent sm:h-10 sm:w-10",
+    children: "..."
+  });
+};
+const Pages = ({
+  children
+}) => {
+  const {
+    currentPage,
+    pageCount
+  } = useContext(PaginationContext);
+  const end = Math.min(Math.max(2 + SIBLING_COUNT * 2, currentPage + SIBLING_COUNT), pageCount);
+  let start = Math.max(Math.min(currentPage - SIBLING_COUNT, end - SIBLING_COUNT * 2), 1);
+  if (start - SIBLING_COUNT === 0) {
+    start = start - 1;
+  }
+  const pages = Array.from({
+    length: end - start
+  }, (_, i) => start + i + 1);
+  return pages.map((page) => children(page));
+};
+const PageItem = forwardRef((props, ref) => {
+  const _a = props, {
+    page,
+    selected
+  } = _a, rest = __objRest(_a, [
+    "page",
+    "selected"
+  ]);
+  return /* @__PURE__ */ jsx(PageLink, __spreadProps(__spreadValues({
+    "aria-current": selected ? "page" : void 0,
+    ref
+  }, rest), {
+    children: page
+  }));
+});
 const RadioContext = createContext({
   defaultValue: void 0,
   isControlled: false,
@@ -1163,7 +1333,7 @@ const Radio = forwardRef((props, ref) => {
     value
   } = useContext(RadioContext);
   return /* @__PURE__ */ jsxs("label", {
-    className: cx(className, "cursor-pointer"),
+    className: cx(className, "flex cursor-pointer gap-2.5"),
     children: [/* @__PURE__ */ jsx("input", __spreadValues({
       className: "radio",
       defaultChecked: !isControlled ? rest.value === defaultValue : void 0,
@@ -1234,22 +1404,77 @@ const RadioGroup = forwardRef((props, ref) => {
     }))
   });
 });
-const Select = forwardRef((props, ref) => {
+const SelectPlain = forwardRef((props, ref) => {
   const _a = props, {
     children,
-    className
+    className,
+    isInvalid,
+    size
   } = _a, rest = __objRest(_a, [
     "children",
-    "className"
+    "className",
+    "isInvalid",
+    "size"
   ]);
+  const isSmall = size === "small";
   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",
+    className: cx(className, "relative", isSmall && "text-sm"),
+    children: [/* @__PURE__ */ jsx("select", __spreadProps(__spreadValues({
+      "aria-invalid": isInvalid
+    }, rest), {
+      className: cx("w-full cursor-pointer appearance-none border border-b-[3px] bg-white focus:-mt-0.5 focus:-ml-0.5 focus:border-[3px] focus:shadow focus:outline-none", isSmall ? "rounded px-3.5 py-2" : "rounded-lg px-4 py-3.5", isInvalid ? "border-red focus:border-red" : "focus:border-blue-dark border-black"),
       ref,
       children
     })), /* @__PURE__ */ jsx(ChevronDown, {
-      className: "absolute top-4 right-4"
+      className: cx("pointer-events-none absolute top-0 bottom-0 my-auto", isSmall ? "right-3.5" : "right-4")
+    })]
+  });
+});
+const Select = forwardRef((props, ref) => {
+  const _a = props, {
+    description,
+    error,
+    id: idProp,
+    label,
+    disableValidation = false
+  } = _a, rest = __objRest(_a, [
+    "description",
+    "error",
+    "id",
+    "label",
+    "disableValidation"
+  ]);
+  const ownRef = useRef(null);
+  const {
+    validity,
+    validationMessage
+  } = useFormControlValidity(ownRef, !disableValidation);
+  const id = useFallbackId(idProp);
+  const helpTextId = id + "help";
+  const errorMsgId = id + "err";
+  const errorMsg = error || validationMessage;
+  return /* @__PURE__ */ jsxs("div", {
+    className: "grid gap-2",
+    children: [/* @__PURE__ */ jsx(FormLabel, {
+      htmlFor: id,
+      isRequired: props.required,
+      isInvalid: !!error || validity === "invalid",
+      children: label
+    }), description && /* @__PURE__ */ jsx(FormHelperText, {
+      id: helpTextId,
+      children: description
+    }), /* @__PURE__ */ jsx(SelectPlain, __spreadProps(__spreadValues({
+      id,
+      ref: composeRefs(ownRef, ref)
+    }, rest), {
+      isInvalid: !!error || validity === "invalid",
+      "aria-describedby": cx({
+        [errorMsgId]: errorMsg,
+        [helpTextId]: description
+      }) || void 0
+    })), errorMsg && /* @__PURE__ */ jsx(FormErrorMessage, {
+      id: errorMsgId,
+      children: errorMsg
     })]
   });
 });
@@ -1301,30 +1526,60 @@ const SnackbarContent = (props) => {
   }));
 };
 const StepList = (props) => {
-  return /* @__PURE__ */ jsx("ol", __spreadValues({}, props));
+  const _a = props, {
+    align = "center",
+    children,
+    className
+  } = _a, rest = __objRest(_a, [
+    "align",
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx("ol", __spreadProps(__spreadValues({
+    className: cx(className, "flex flex-col gap-8 md:gap-12")
+  }, rest), {
+    children: Children.map(children, (child) => {
+      return cloneElement(child, {
+        align
+      });
+    })
+  }));
 };
 const StepListItem = (props) => {
   const _a = props, {
     className,
     children,
-    bullet
+    bullet,
+    align = "center"
   } = _a, rest = __objRest(_a, [
     "className",
     "children",
-    "bullet"
+    "bullet",
+    "align"
   ]);
   return /* @__PURE__ */ jsxs("li", __spreadProps(__spreadValues({
-    className: cx(className, "group relative flex items-center 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 text-sm md:gap-8 md:text-base", {
+      "items-center": align === "center"
+    })
   }, rest), {
     children: [/* @__PURE__ */ jsx(StepListBullet, {
+      align,
       children: bullet
     }), children]
   }));
 };
-const StepListBullet = (props) => {
+const StepListBullet = (_a) => {
+  var _b = _a, {
+    align
+  } = _b, props = __objRest(_b, [
+    "align"
+  ]);
   return /* @__PURE__ */ jsx("span", __spreadValues({
     "aria-hidden": true,
-    className: "text-green after:bg-gray-light grid h-10 w-10 flex-none place-content-center justify-items-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"
+    className: cx("text-green after:bg-gray-light before:bg-gray-light grid h-10 w-10 flex-none place-content-center justify-items-center rounded-full border-2 text-sm font-bold after:absolute after:bottom-0 after:w-0.5 after:translate-x-1/2 group-last:after:hidden md:h-20 md:w-20 md:text-xl", {
+      "before:absolute before:top-0 before:bottom-1/2 before:w-0.5 before:-translate-y-5 before:translate-x-1/2 after:top-1/2 after:translate-y-5 group-first:before:hidden before:md:-translate-y-10 after:md:translate-y-10": align === "center",
+      "after:top-10 after:-bottom-8 after:md:-bottom-12 after:md:top-20": align === "top"
+    })
   }, props));
 };
 StepList.Item = StepListItem;
@@ -1428,4 +1683,4 @@ const TextField = forwardRef((props, ref) => {
     })]
   });
 });
-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 };
+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, Pagination, Radio, RadioGroup, Select, Snackbar, SnackbarButton, SnackbarContent, StepList, StepListItem, TextArea, TextField, useBlockBackgroundColor, useFallbackId, useFormControlValidity, usePrefersReducedMotion, useScreenMaxWidthMd };

package/dist/hooks/useBlockBackgroundColor.d.ts

@@ -1,2 +1,2 @@
-export declare type BlockBackgroundColor = 'yellow' | 'gray' | 'blue' | 'green';
+export type BlockBackgroundColor = 'yellow' | 'gray' | 'blue' | 'green';
 export declare function useBlockBackgroundColor(blockBgColor: BlockBackgroundColor | undefined): string | undefined;

package/dist/hooks/useFormControlValidity.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-declare type Validity = 'indeterminate' | 'invalid' | 'valid';
+type Validity = 'indeterminate' | 'invalid' | 'valid';
 /**
  * Browser validation as it should be. "Invalid" only triggers after the user has blurred an input, or attempted
  * to submit the form.

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export * from './Hero';
 export * from './Input';
 export * from './Link';
 export * from './Navbar';
+export * from './Pagination';
 export * from './Radio';
 export * from './Select';
 export * from './Snackbar';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "1.6.2",
+  "version": "1.8.0",
   "description": "OBOS Grunnmuren design system React components",
   "license": "MIT",
   "repository": {
@@ -17,25 +17,26 @@
   ],
   "types": "./dist/index.d.ts",
   "devDependencies": {
-    "@babel/core": "7.19.6",
-    "@storybook/addon-controls": "6.5.13",
-    "@storybook/addon-docs": "6.5.13",
+    "@babel/core": "7.20.5",
+    "@storybook/addon-controls": "6.5.14",
+    "@storybook/addon-docs": "6.5.14",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/builder-webpack5": "6.5.13",
-    "@storybook/manager-webpack5": "6.5.13",
-    "@storybook/react": "6.5.13",
-    "@types/react": "18.0.25",
-    "@types/react-dom": "18.0.8",
+    "@storybook/builder-webpack5": "6.5.14",
+    "@storybook/manager-webpack5": "6.5.14",
+    "@storybook/react": "6.5.14",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
     "@vitejs/plugin-react": "1.3.2",
-    "postcss": "8.4.18",
+    "postcss": "8.4.19",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "require-from-string": "2.0.2",
     "rimraf": "3.0.2",
     "tailwindcss": "3.2.4",
+    "type-fest": "3.3.0",
     "vite": "2.9.15",
-    "webpack": "5.74.0",
-    "@obosbbl/grunnmuren-tailwind": "0.8.3"
+    "webpack": "5.75.0",
+    "@obosbbl/grunnmuren-tailwind": "0.8.4"
   },
   "dependencies": {
     "@seznam/compose-react-refs": "1.0.6",
@@ -45,7 +46,7 @@
     "@obosbbl/grunnmuren-icons": "^0.5.1"
   },
   "peerDependencies": {
-    "@obosbbl/grunnmuren-tailwind": "^0.8.3",
+    "@obosbbl/grunnmuren-tailwind": "^0.8.4",
     "react": "^18"
   },
   "peerDependenciesMeta": {