@obosbbl/grunnmuren-react 3.7.0 → 3.8.1

package/README.md

@@ -1,19 +1,33 @@
 # @obosbbl/grunnmuren-react
 
-[![npm canary version](https://img.shields.io/npm/v/@obosbbl%2Fgrunnmuren-react/canary.svg)](https://www.npmjs.com/package/@obosbbl/grunnmuren-react)
+[![npm version](https://img.shields.io/npm/v/@obosbbl%2Fgrunnmuren-react.svg)](https://www.npmjs.com/package/@obosbbl/grunnmuren-react)
 
 Grunnmuren React components.
 
 ## Install
 
+`@obosbbl/grunnmuren-react` declares `@obosbbl/grunnmuren-tailwind` as a peer dependency — the components rely on Tailwind tokens and utilities defined in that package. Install both:
+
 ```sh
 # npm
-npm install @obosbbl/grunnmuren-react@canary
+npm install @obosbbl/grunnmuren-react @obosbbl/grunnmuren-tailwind
 
 # pnpm
-pnpm add @obosbbl/grunnmuren-react@canary
+pnpm add @obosbbl/grunnmuren-react @obosbbl/grunnmuren-tailwind
 ```
 
+Then import the Tailwind preset in your global stylesheet. The preset already does `@import 'tailwindcss';` internally, so you should **not** import Tailwind separately:
+
+```css
+/* globals.css */
+@import '@obosbbl/grunnmuren-tailwind';
+
+/* Register the React package as a Tailwind source so the utilities used by the components are emitted. */
+@source "../../node_modules/@obosbbl/grunnmuren-react/dist";
+```
+
+See [`@obosbbl/grunnmuren-tailwind`](../tailwind/) for the full preset documentation.
+
 ## Setup
 
 ### Internationalization
@@ -200,8 +214,6 @@ The plugin works with several different bundlers. See [React Aria's bundle size
 
 ## Usage
 
-Before you start using the components you need to configure the [Tailwind preset](../tailwind/). Remember to add this package to the content scan.
-
 ```js
 import { Button } from '@obosbbl/grunnmuren-react';
 

package/dist/__stories__/form-validation.stories.cjs

@@ -215,11 +215,13 @@ function Button({ ref = null, ...props }) {
     return isLinkProps(restProps) ? /*#__PURE__*/ jsxRuntime.jsx(Link.Link, {
         ...restProps,
         className: className,
+        "data-slot": "button",
         ref: ref,
         children: children
     }) : /*#__PURE__*/ jsxRuntime.jsx(Button$1.Button, {
         ...restProps,
         className: className,
+        "data-slot": "button",
         isPending: isPending,
         ref: ref,
         children: children

package/dist/__stories__/form-validation.stories.d.cts

@@ -1,11 +1,11 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { Meta } from '@storybook/react-vite';
 
 declare const meta: Meta;
 
-declare const NativeValidation: () => react_jsx_runtime.JSX.Element;
-declare const RealtimeValidation: () => react_jsx_runtime.JSX.Element;
-declare const ServerSideValidation: () => react_jsx_runtime.JSX.Element;
-declare const ControlledValidation: () => react_jsx_runtime.JSX.Element;
+declare const NativeValidation: () => react.JSX.Element;
+declare const RealtimeValidation: () => react.JSX.Element;
+declare const ServerSideValidation: () => react.JSX.Element;
+declare const ControlledValidation: () => react.JSX.Element;
 
 export { ControlledValidation, NativeValidation, RealtimeValidation, ServerSideValidation, meta as default };

package/dist/__stories__/form-validation.stories.d.ts

@@ -1,11 +1,11 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { Meta } from '@storybook/react-vite';
 
 declare const meta: Meta;
 
-declare const NativeValidation: () => react_jsx_runtime.JSX.Element;
-declare const RealtimeValidation: () => react_jsx_runtime.JSX.Element;
-declare const ServerSideValidation: () => react_jsx_runtime.JSX.Element;
-declare const ControlledValidation: () => react_jsx_runtime.JSX.Element;
+declare const NativeValidation: () => react.JSX.Element;
+declare const RealtimeValidation: () => react.JSX.Element;
+declare const ServerSideValidation: () => react.JSX.Element;
+declare const ControlledValidation: () => react.JSX.Element;
 
 export { ControlledValidation, NativeValidation, RealtimeValidation, ServerSideValidation, meta as default };

package/dist/__stories__/form-validation.stories.js

@@ -213,11 +213,13 @@ function Button({ ref = null, ...props }) {
     return isLinkProps(restProps) ? /*#__PURE__*/ jsx(Link, {
         ...restProps,
         className: className,
+        "data-slot": "button",
         ref: ref,
         children: children
     }) : /*#__PURE__*/ jsx(Button$1, {
         ...restProps,
         className: className,
+        "data-slot": "button",
         isPending: isPending,
         ref: ref,
         children: children

package/dist/__stories__/home.stories.d.cts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { Meta } from '@storybook/react-vite';
 
 declare const meta: Meta;
 
 declare const Page: {
-    render: () => react_jsx_runtime.JSX.Element;
+    render: () => react.JSX.Element;
 };
 
 export { Page, meta as default };

package/dist/__stories__/home.stories.d.ts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { Meta } from '@storybook/react-vite';
 
 declare const meta: Meta;
 
 declare const Page: {
-    render: () => react_jsx_runtime.JSX.Element;
+    render: () => react.JSX.Element;
 };
 
 export { Page, meta as default };

package/dist/__stories__/icons.stories.d.cts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { Meta } from '@storybook/react-vite';
 
 declare const meta: Meta;
 
-declare const Icons: () => react_jsx_runtime.JSX.Element;
+declare const Icons: () => react.JSX.Element;
 
 export { Icons, meta as default };

package/dist/__stories__/icons.stories.d.ts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { Meta } from '@storybook/react-vite';
 
 declare const meta: Meta;
 
-declare const Icons: () => react_jsx_runtime.JSX.Element;
+declare const Icons: () => react.JSX.Element;
 
 export { Icons, meta as default };

package/dist/__stories__/layout.stories.cjs

@@ -307,7 +307,11 @@ const oneColumnLayout = [
     // Aligns <Content> and any element beside it (e.g. <Media>, <Badge>, <CTA> etc.) to the bottom of the <Content> container
     'lg:items-end'
 ];
-const nonFullBleedAspectRatiosForSmallScreens = '*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-[1/1] sm:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-4/3 md:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-3/2';
+// Use `not-has-[video]` (tag selector) so that aspect-ratio rules also skip for video players
+// that don't expose `data-slot="video"` (e.g., MuxPlayer).
+// Aspect-ratio is applied to the `<Media>` element itself (not the img inside) so that the
+// Media box fills the grid column and consumers don't need `!important` overrides when nesting.
+const nonFullBleedAspectRatiosForSmallScreens = '*:data-[slot=media]:not-has-[video]:aspect-[1/1] sm:*:data-[slot=media]:not-has-[video]:aspect-4/3 md:*:data-[slot=media]:not-has-[video]:aspect-3/2';
 const variants = cva.cva({
     base: [
         'container px-0',
@@ -332,7 +336,7 @@ const variants = cva.cva({
             standard: [
                 oneColumnLayout,
                 nonFullBleedAspectRatiosForSmallScreens,
-                'lg:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-2/1'
+                'lg:*:data-[slot=media]:not-has-[video]:aspect-2/1'
             ],
             'full-bleed': [
                 oneColumnLayout,
@@ -361,7 +365,7 @@ const variants = cva.cva({
                 'lg:*:data-[slot=content]:gap-y-7',
                 nonFullBleedAspectRatiosForSmallScreens,
                 // Set media aspect ratio to 1:1 (square)
-                'lg:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-square'
+                'lg:*:data-[slot=media]:not-has-[video]:aspect-square'
             ]
         }
     },
@@ -373,6 +377,8 @@ const variants = cva.cva({
             ],
             className: [
                 '*:data-[slot=media]:*:rounded-3xl',
+                // Make non-video media (image/picture) fill the aspect-ratio-constrained Media box
+                '*:data-[slot=media]:not-has-[video]:*:size-full',
                 '*:data-[slot=carousel]:relative **:data-[slot=carousel-container]:rounded-3xl **:data-[slot=carousel-controls]:absolute **:data-[slot=carousel-controls]:right-4 **:data-[slot=carousel-controls]:bottom-4'
             ]
         }

package/dist/__stories__/layout.stories.d.cts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { Meta } from '@storybook/react-vite';
 
 declare const meta: Meta;
 
-declare const GridContainer: () => react_jsx_runtime.JSX.Element;
-declare const GridContainerWithSubGrids: () => react_jsx_runtime.JSX.Element;
-declare const OverridedColSpans: () => react_jsx_runtime.JSX.Element;
+declare const GridContainer: () => react.JSX.Element;
+declare const GridContainerWithSubGrids: () => react.JSX.Element;
+declare const OverridedColSpans: () => react.JSX.Element;
 
 export { GridContainer, GridContainerWithSubGrids, OverridedColSpans, meta as default };

package/dist/__stories__/layout.stories.d.ts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { Meta } from '@storybook/react-vite';
 
 declare const meta: Meta;
 
-declare const GridContainer: () => react_jsx_runtime.JSX.Element;
-declare const GridContainerWithSubGrids: () => react_jsx_runtime.JSX.Element;
-declare const OverridedColSpans: () => react_jsx_runtime.JSX.Element;
+declare const GridContainer: () => react.JSX.Element;
+declare const GridContainerWithSubGrids: () => react.JSX.Element;
+declare const OverridedColSpans: () => react.JSX.Element;
 
 export { GridContainer, GridContainerWithSubGrids, OverridedColSpans, meta as default };

package/dist/__stories__/layout.stories.js

@@ -305,7 +305,11 @@ const oneColumnLayout = [
     // Aligns <Content> and any element beside it (e.g. <Media>, <Badge>, <CTA> etc.) to the bottom of the <Content> container
     'lg:items-end'
 ];
-const nonFullBleedAspectRatiosForSmallScreens = '*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-[1/1] sm:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-4/3 md:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-3/2';
+// Use `not-has-[video]` (tag selector) so that aspect-ratio rules also skip for video players
+// that don't expose `data-slot="video"` (e.g., MuxPlayer).
+// Aspect-ratio is applied to the `<Media>` element itself (not the img inside) so that the
+// Media box fills the grid column and consumers don't need `!important` overrides when nesting.
+const nonFullBleedAspectRatiosForSmallScreens = '*:data-[slot=media]:not-has-[video]:aspect-[1/1] sm:*:data-[slot=media]:not-has-[video]:aspect-4/3 md:*:data-[slot=media]:not-has-[video]:aspect-3/2';
 const variants = cva({
     base: [
         'container px-0',
@@ -330,7 +334,7 @@ const variants = cva({
             standard: [
                 oneColumnLayout,
                 nonFullBleedAspectRatiosForSmallScreens,
-                'lg:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-2/1'
+                'lg:*:data-[slot=media]:not-has-[video]:aspect-2/1'
             ],
             'full-bleed': [
                 oneColumnLayout,
@@ -359,7 +363,7 @@ const variants = cva({
                 'lg:*:data-[slot=content]:gap-y-7',
                 nonFullBleedAspectRatiosForSmallScreens,
                 // Set media aspect ratio to 1:1 (square)
-                'lg:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-square'
+                'lg:*:data-[slot=media]:not-has-[video]:aspect-square'
             ]
         }
     },
@@ -371,6 +375,8 @@ const variants = cva({
             ],
             className: [
                 '*:data-[slot=media]:*:rounded-3xl',
+                // Make non-video media (image/picture) fill the aspect-ratio-constrained Media box
+                '*:data-[slot=media]:not-has-[video]:*:size-full',
                 '*:data-[slot=carousel]:relative **:data-[slot=carousel-container]:rounded-3xl **:data-[slot=carousel-controls]:absolute **:data-[slot=carousel-controls]:right-4 **:data-[slot=carousel-controls]:bottom-4'
             ]
         }

package/dist/__stories__/typography.stories.d.cts

@@ -1,14 +1,14 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { Meta } from '@storybook/react-vite';
 
-declare const Default: () => react_jsx_runtime.JSX.Element;
-declare const Headings: () => react_jsx_runtime.JSX.Element;
-declare const Lead: () => react_jsx_runtime.JSX.Element;
-declare const Body: () => react_jsx_runtime.JSX.Element;
-declare const Blockquote: () => react_jsx_runtime.JSX.Element;
-declare const Description: () => react_jsx_runtime.JSX.Element;
-declare const Prose: () => react_jsx_runtime.JSX.Element;
-declare const ProseWhite: () => react_jsx_runtime.JSX.Element;
+declare const Default: () => react.JSX.Element;
+declare const Headings: () => react.JSX.Element;
+declare const Lead: () => react.JSX.Element;
+declare const Body: () => react.JSX.Element;
+declare const Blockquote: () => react.JSX.Element;
+declare const Description: () => react.JSX.Element;
+declare const Prose: () => react.JSX.Element;
+declare const ProseWhite: () => react.JSX.Element;
 declare const meta: Meta;
 
 export { Blockquote, Body, Default, Description, Headings, Lead, Prose, ProseWhite, meta as default };

package/dist/__stories__/typography.stories.d.ts

@@ -1,14 +1,14 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { Meta } from '@storybook/react-vite';
 
-declare const Default: () => react_jsx_runtime.JSX.Element;
-declare const Headings: () => react_jsx_runtime.JSX.Element;
-declare const Lead: () => react_jsx_runtime.JSX.Element;
-declare const Body: () => react_jsx_runtime.JSX.Element;
-declare const Blockquote: () => react_jsx_runtime.JSX.Element;
-declare const Description: () => react_jsx_runtime.JSX.Element;
-declare const Prose: () => react_jsx_runtime.JSX.Element;
-declare const ProseWhite: () => react_jsx_runtime.JSX.Element;
+declare const Default: () => react.JSX.Element;
+declare const Headings: () => react.JSX.Element;
+declare const Lead: () => react.JSX.Element;
+declare const Body: () => react.JSX.Element;
+declare const Blockquote: () => react.JSX.Element;
+declare const Description: () => react.JSX.Element;
+declare const Prose: () => react.JSX.Element;
+declare const ProseWhite: () => react.JSX.Element;
 declare const meta: Meta;
 
 export { Blockquote, Body, Default, Description, Headings, Lead, Prose, ProseWhite, meta as default };

package/dist/index.d.mts

@@ -1,6 +1,5 @@
 import { RouterProvider } from 'react-aria-components';
 export { Form, Group } from 'react-aria-components';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { RefAttributes, HTMLAttributes, HTMLProps, ComponentProps, Ref, ReactNode, RefObject, Dispatch, SetStateAction, JSX } from 'react';
 import * as cva from 'cva';
@@ -31,6 +30,7 @@ import { ColumnResizerProps, TableProps as TableProps$1, TableBodyProps as Table
 import { TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1 } from 'react-aria-components/Tabs';
 import { TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TagProps as TagProps$1 } from 'react-aria-components/TagGroup';
 import { TextFieldProps as TextFieldProps$1 } from 'react-aria-components/TextField';
+import { PopoverProps } from 'react-aria-components/Popover';
 import { HeaderProps } from 'react-aria-components/Header';
 import { ListBoxItemProps, ListBoxSectionProps } from 'react-aria-components/ListBox';
 export { ListBoxItemProps as ComboboxItemProps, ListBoxItemProps as SelectItemProps } from 'react-aria-components/ListBox';
@@ -48,17 +48,17 @@ declare const disclosureButtonVariants: (props?: ({
 type DisclosureButtonProps = Omit<ButtonProps$1, 'children'> & VariantProps<typeof disclosureButtonVariants> & {
     children?: React.ReactNode;
 } & RefAttributes<HTMLButtonElement>;
-declare const DisclosureButton: ({ className, withChevron, isIconOnly, children, ref: _ref, ...restProps }: DisclosureButtonProps) => react_jsx_runtime.JSX.Element;
+declare const DisclosureButton: ({ className, withChevron, isIconOnly, children, ref: _ref, ...restProps }: DisclosureButtonProps) => react.JSX.Element;
 type DisclosureProps = DisclosureProps$1 & RefAttributes<HTMLDivElement> & {
     className?: string;
 };
 declare const DisclosureStateContext: react.Context<DisclosureState | null>;
-declare const Disclosure: ({ ref: _ref, ..._props }: DisclosureProps) => react_jsx_runtime.JSX.Element;
+declare const Disclosure: ({ ref: _ref, ..._props }: DisclosureProps) => react.JSX.Element;
 type DisclosurePanelProps = Omit<HTMLAttributes<HTMLDivElement>, 'role'> & {
     children: React.ReactNode;
     role?: 'group' | 'region' | 'none';
 } & RefAttributes<HTMLDivElement>;
-declare const DisclosurePanel: ({ ref, children, ...props }: DisclosurePanelProps) => react_jsx_runtime.JSX.Element;
+declare const DisclosurePanel: ({ ref, children, ...props }: DisclosurePanelProps) => react.JSX.Element;
 
 type AccordionProps = HTMLProps<HTMLDivElement> & {
     children: React.ReactNode;
@@ -72,8 +72,8 @@ type AccordionItemProps = DisclosureProps & {
     /** @deprecated use onExpandedChange instead */
     onOpenChange?: (isOpen: boolean) => void;
 };
-declare function Accordion(props: AccordionProps): react_jsx_runtime.JSX.Element;
-declare function AccordionItem(props: AccordionItemProps): react_jsx_runtime.JSX.Element;
+declare function Accordion(props: AccordionProps): react.JSX.Element;
+declare function AccordionItem(props: AccordionItemProps): react.JSX.Element;
 
 declare const alertVariants: (props?: ({
     variant?: "info" | "success" | "warning" | "danger" | undefined;
@@ -116,10 +116,10 @@ type Props = VariantProps<typeof alertVariants> & {
      */
     onDismiss?: () => void;
 };
-declare const Alertbox: ({ children, role, className, icon, variant, isDismissable, isDismissed, onDismiss, isExpandable, }: Props) => react_jsx_runtime.JSX.Element | undefined;
+declare const Alertbox: ({ children, role, className, icon, variant, isDismissable, isDismissed, onDismiss, isExpandable, }: Props) => react.JSX.Element | undefined;
 
 type AvatarProps = ComponentProps<'img'>;
-declare const Avatar: ({ src, alt, className, onError, loading, ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
+declare const Avatar: ({ src, alt, className, onError, loading, ...rest }: AvatarProps) => react.JSX.Element;
 
 type ButtonOrLinkProps$1 = {
     children?: React.ReactNode;
@@ -135,7 +135,7 @@ type ButtonOrLinkProps$1 = {
     ref?: Ref<HTMLAnchorElement | HTMLButtonElement>;
 };
 type BacklinkProps = (ButtonProps$1 | LinkProps$1) & ButtonOrLinkProps$1;
-declare function Backlink(props: BacklinkProps): react_jsx_runtime.JSX.Element;
+declare function Backlink(props: BacklinkProps): react.JSX.Element;
 
 type BadgeProps = VariantProps<typeof badgeVariants> & {
     children?: React.ReactNode;
@@ -154,7 +154,7 @@ declare const badgeVariants: (props?: ({
     class?: never;
     className?: cva.ClassValue;
 })) | undefined) => string;
-declare function Badge(props: BadgeProps): react_jsx_runtime.JSX.Element;
+declare function Badge(props: BadgeProps): react.JSX.Element;
 
 declare const linkVariants: (props?: (((VariantProps<(props?: ({
     animateIcon?: "right" | "left" | "down" | "up" | "up-right" | undefined;
@@ -180,7 +180,7 @@ declare const linkVariants: (props?: (((VariantProps<(props?: ({
 type LinkProps = VariantProps<typeof linkVariants> & LinkProps$1 & React.RefAttributes<HTMLAnchorElement> & {
     children?: React.ReactNode;
 };
-declare const Link: ({ animateIcon, children, className, ...props }: LinkProps) => react_jsx_runtime.JSX.Element;
+declare const Link: ({ animateIcon, children, className, ...props }: LinkProps) => react.JSX.Element;
 
 type BreadcrumbProps = {
     /** Additional CSS className for the element. */
@@ -193,7 +193,7 @@ type BreadcrumbProps = {
     /** Ref to the element. */
     ref?: Ref<HTMLLIElement>;
 } & Omit<BreadcrumbProps$1, 'className' | 'style'>;
-declare function Breadcrumb(props: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+declare function Breadcrumb(props: BreadcrumbProps): react.JSX.Element;
 
 type BreadcrumbsProps = {
     /** Additional CSS className for the element. */
@@ -203,7 +203,7 @@ type BreadcrumbsProps = {
     /** Ref to the element. */
     ref?: Ref<HTMLOListElement>;
 } & Omit<BreadcrumbsProps$1<BreadcrumbProps>, 'className' | 'style'>;
-declare function Breadcrumbs(props: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
+declare function Breadcrumbs(props: BreadcrumbsProps): react.JSX.Element;
 
 /**
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
@@ -244,7 +244,7 @@ type ButtonOrLinkProps = VariantProps<typeof buttonVariants> & {
 };
 type ButtonProps = (ButtonProps$1 | LinkProps$1) & ButtonOrLinkProps;
 declare const ButtonContext: react.Context<ContextValue<ButtonProps, HTMLButtonElement | HTMLAnchorElement>>;
-declare function Button({ ref, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ ref, ...props }: ButtonProps): react.JSX.Element;
 
 type CardProps = VariantProps<typeof cardVariants> & HTMLAttributes<HTMLDivElement> & {
     children?: React.ReactNode;
@@ -259,7 +259,7 @@ declare const cardVariants: (props?: ({
     class?: never;
     className?: cva.ClassValue;
 })) | undefined) => string;
-declare const Card: ({ children, className, variant, layout, ...restProps }: CardProps) => react_jsx_runtime.JSX.Element;
+declare const Card: ({ children, className, variant, layout, ...restProps }: CardProps) => react.JSX.Element;
 type CardLinkWrapperProps = {
     children?: React.ReactNode;
     className?: string;
@@ -271,7 +271,7 @@ type CardLinkProps = (Omit<LinkProps$1, 'href'> & Required<Pick<LinkProps$1, 'hr
  * A component that creates a clickable area on a card.
  * It can be used either as a wrapper around a link or as a standalone link.
  */
-declare const CardLink: ({ className: _className, href, ...restProps }: CardLinkProps) => react_jsx_runtime.JSX.Element;
+declare const CardLink: ({ className: _className, href, ...restProps }: CardLinkProps) => react.JSX.Element;
 
 type CarouselMethods = {
     /** Navigate to a specific slide by index. */
@@ -321,7 +321,7 @@ type CarouselProps = Omit<HTMLProps<HTMLDivElement>, 'onChange' | 'onSelect' | '
      */
     scrollGestures?: boolean;
 };
-declare const Carousel: ({ autoPlayDelay, align, children, initialIndex, orientation, onSelect, onSettled, loop, scrollGestures, ref, ...rest }: CarouselProps) => react_jsx_runtime.JSX.Element;
+declare const Carousel: ({ autoPlayDelay, align, children, initialIndex, orientation, onSelect, onSettled, loop, scrollGestures, ref, ...rest }: CarouselProps) => react.JSX.Element;
 type CarouselContextValue = {
     slidesInView: number[];
     orientation: 'horizontal' | 'vertical';
@@ -335,12 +335,12 @@ declare const CarouselContext: react.Context<CarouselContextValue>;
 type CarouselItemsContainer = HTMLProps<HTMLDivElement> & {
     children: React.ReactNode;
 };
-declare const CarouselItemsContainer: ({ children, className, ...rest }: CarouselItemsContainer) => react_jsx_runtime.JSX.Element;
+declare const CarouselItemsContainer: ({ children, className, ...rest }: CarouselItemsContainer) => react.JSX.Element;
 type CarouselItemsProps = HTMLProps<HTMLDivElement> & {
     /** The <CarouselItem/> components to be displayed within the carousel. */
     children: React.ReactNode;
 };
-declare const CarouselItems: ({ className, children, ...restProps }: CarouselItemsProps) => react_jsx_runtime.JSX.Element;
+declare const CarouselItems: ({ className, children, ...restProps }: CarouselItemsProps) => react.JSX.Element;
 type CarouselControlsProps = HTMLProps<HTMLDivElement> & {
     /** The <CarouselItem/> components to be displayed within the carousel. */
     children: React.ReactNode;
@@ -349,16 +349,16 @@ type CarouselControlsProps = HTMLProps<HTMLDivElement> & {
  * This is internal for now, but we will expose it in the future when we support more flexible positioning of prev/next and other actions.
  * It is used to render the prev/next buttons in the carousel for now.
  */
-declare const CarouselControls: ({ children, className, ...rest }: CarouselControlsProps) => react_jsx_runtime.JSX.Element;
+declare const CarouselControls: ({ children, className, ...rest }: CarouselControlsProps) => react.JSX.Element;
 type CarouselButtonProps = ButtonProps & {
     slot: 'next' | 'prev';
 };
-declare const CarouselButton: ({ className, isIconOnly, slot, ...rest }: CarouselButtonProps) => react_jsx_runtime.JSX.Element;
+declare const CarouselButton: ({ className, isIconOnly, slot, ...rest }: CarouselButtonProps) => react.JSX.Element;
 type CarouselItemProps = HTMLProps<HTMLDivElement> & {
     /** The component/components to display as the <CarouselItem/>. */
     children: React.ReactNode;
 };
-declare const CarouselItem: ({ className, children, ...rest }: CarouselItemProps) => react_jsx_runtime.JSX.Element;
+declare const CarouselItem: ({ className, children, ...rest }: CarouselItemProps) => react.JSX.Element;
 
 type CheckboxProps = {
     children: React.ReactNode;
@@ -373,7 +373,7 @@ type CheckboxProps = {
     /** Ref for the element. */
     ref?: Ref<HTMLLabelElement>;
 } & Omit<CheckboxProps$1, 'isDisabled' | 'style' | 'children' | 'isIndeterminate' | 'isReadOnly'>;
-declare function Checkbox(props: CheckboxProps): react_jsx_runtime.JSX.Element;
+declare function Checkbox(props: CheckboxProps): react.JSX.Element;
 
 type CheckboxGroupProps = {
     children: React.ReactNode;
@@ -390,17 +390,17 @@ type CheckboxGroupProps = {
     /** Ref to the element. */
     ref?: Ref<HTMLDivElement>;
 } & Omit<CheckboxGroupProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'orientation'>;
-declare function CheckboxGroup(props: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+declare function CheckboxGroup(props: CheckboxGroupProps): react.JSX.Element;
 
-declare const ListBoxItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
+declare const ListBoxItem: (props: ListBoxItemProps) => react.JSX.Element;
 /**
  * This component can be used to group items in a listbox
  */
-declare const ListBoxSection: <T extends object>({ className, ...restProps }: ListBoxSectionProps<T>) => react_jsx_runtime.JSX.Element;
+declare const ListBoxSection: <T extends object>({ className, ...restProps }: ListBoxSectionProps<T>) => react.JSX.Element;
 /**
  * This component can be used to label grouped items in a `ListBoxSection` with a heading
  */
-declare const ListBoxHeader: (props: HeaderProps) => react_jsx_runtime.JSX.Element;
+declare const ListBoxHeader: (props: HeaderProps) => react.JSX.Element;
 
 type ComboboxProps<T extends object> = {
     children: React.ReactNode;
@@ -424,7 +424,7 @@ type ComboboxProps<T extends object> = {
     /** Ref for the input element. */
     ref?: Ref<HTMLInputElement>;
 } & Omit<ComboBoxProps<T>, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
-declare function Combobox<T extends object>(props: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
+declare function Combobox<T extends object>(props: ComboboxProps<T>): react.JSX.Element;
 
 type HeadingProps = Omit<HTMLProps<HTMLHeadingElement>, 'size'> & VariantProps<typeof headingVariants> & {
     children?: React.ReactNode;
@@ -447,7 +447,7 @@ declare const headingVariants: (props?: ({
     class?: never;
     className?: cva.ClassValue;
 })) | undefined) => string;
-declare const Heading: ({ ref, ...props }: HeadingProps) => string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | null | undefined;
+declare const Heading: ({ ref, ...props }: HeadingProps) => string | number | bigint | boolean | react.JSX.Element | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | null | undefined;
 declare const ContentContext: react.Context<ContextValue<Partial<ContentProps>, HTMLDivElement>>;
 type ContentProps = HTMLProps<HTMLDivElement> & {
     children: React.ReactNode;
@@ -456,7 +456,7 @@ type ContentProps = HTMLProps<HTMLDivElement> & {
     /** Ref for the element. */
     ref?: Ref<HTMLDivElement>;
 };
-declare const Content: ({ ref, ...props }: ContentProps) => string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | null | undefined;
+declare const Content: ({ ref, ...props }: ContentProps) => string | number | bigint | boolean | react.JSX.Element | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | null | undefined;
 type MediaProps = HTMLProps<HTMLDivElement> & VariantProps<typeof mediaVariant> & {
     children: React.ReactNode;
     /** Ref for the element. */
@@ -472,15 +472,15 @@ declare const mediaVariant: (props?: ({
     className?: cva.ClassValue;
 })) | undefined) => string;
 declare const MediaContext: react.Context<ContextValue<Partial<MediaProps>, HTMLDivElement>>;
-declare const Media: ({ ref, ...props }: MediaProps) => react_jsx_runtime.JSX.Element;
+declare const Media: ({ ref, ...props }: MediaProps) => react.JSX.Element;
 type FooterProps = HTMLProps<HTMLDivElement> & {
     children: React.ReactNode;
 };
 type CaptionProps = HTMLProps<HTMLDivElement> & {
     children: React.ReactNode;
 };
-declare const Caption: ({ className, ...restProps }: CaptionProps) => react_jsx_runtime.JSX.Element;
-declare const Footer: (props: FooterProps) => react_jsx_runtime.JSX.Element;
+declare const Caption: ({ className, ...restProps }: CaptionProps) => react.JSX.Element;
+declare const Footer: (props: FooterProps) => react.JSX.Element;
 
 type DateFormatterProps = {
     value: Date | string;
@@ -514,7 +514,7 @@ type DrawerProps = Omit<ModalOverlayProps$1, 'isDismissable' | 'style'> & Pick<V
     /** @default true Makes the drawer dismissable */
     isDismissable?: boolean;
 };
-declare const Drawer: ({ isDismissable, isOpen, onOpenChange, defaultOpen, className, zIndex, placement, style, ...restProps }: DrawerProps) => react_jsx_runtime.JSX.Element;
+declare const Drawer: ({ isDismissable, isOpen, onOpenChange, defaultOpen, className, zIndex, placement, style, ...restProps }: DrawerProps) => react.JSX.Element;
 
 type FormValidationProps<T> = Parameters<typeof useFormValidationState<T>>[0];
 type FileTriggerProps = Partial<Omit<FormValidationProps<File>, 'value'>> & FileTriggerProps$1 & Omit<HTMLAttributes<HTMLInputElement>, 'onSelect' | 'onChange' | 'required' | 'className'> & {
@@ -532,7 +532,7 @@ type FileUploadProps = Omit<FileTriggerProps, 'onSelect'> & {
     isInvalid?: boolean;
     errorMessage?: string;
 };
-declare const FileUpload: ({ children, files: _files, onChange, validate, isInvalid: _isInvalid, errorMessage, isRequired, allowsMultiple, ref, ...fileTriggerProps }: FileUploadProps) => react_jsx_runtime.JSX.Element;
+declare const FileUpload: ({ children, files: _files, onChange, validate, isInvalid: _isInvalid, errorMessage, isRequired, allowsMultiple, ref, ...fileTriggerProps }: FileUploadProps) => react.JSX.Element;
 
 type Locale = 'nb' | 'sv' | 'en';
 /**
@@ -553,7 +553,7 @@ type GrunnmurenProviderProps = {
     /** Converts a router-specific href to a native HTML href, e.g. prepending a base path */
     useHref?: RouterProviderProps['useHref'];
 };
-declare function GrunnmurenProvider({ children, locale, navigate, useHref, }: GrunnmurenProviderProps): react_jsx_runtime.JSX.Element;
+declare function GrunnmurenProvider({ children, locale, navigate, useHref, }: GrunnmurenProviderProps): react.JSX.Element;
 
 type HeroProps = HTMLProps<HTMLDivElement> & VariantProps<typeof variants> & {
     children: React.ReactNode;
@@ -571,15 +571,15 @@ declare const variants: (props?: ({
     class?: never;
     className?: cva.ClassValue;
 })) | undefined) => string;
-declare const Hero: ({ variant, className, children, ...rest }: HeroProps) => react_jsx_runtime.JSX.Element;
+declare const Hero: ({ variant, className, children, ...rest }: HeroProps) => react.JSX.Element;
 
 type DescriptionProps = TextProps;
-declare function Description(props: DescriptionProps): react_jsx_runtime.JSX.Element;
+declare function Description(props: DescriptionProps): react.JSX.Element;
 
 type ErrorMessageProps = TextProps;
-declare function ErrorMessage(props: ErrorMessageProps): react_jsx_runtime.JSX.Element;
+declare function ErrorMessage(props: ErrorMessageProps): react.JSX.Element;
 
-declare function Label(props: LabelProps): react_jsx_runtime.JSX.Element;
+declare function Label(props: LabelProps): react.JSX.Element;
 
 type LinkListContextValue = {
     shouldRenderAutoIcons: boolean;
@@ -597,18 +597,18 @@ declare const linkListContainerVariants: (props?: ({
 type LinkListContainerProps = VariantProps<typeof linkListContainerVariants> & React.HTMLProps<HTMLDivElement> & {
     children: JSX.Element | JSX.Element[];
 };
-declare const LinkListContainer: ({ className, layout, ...props }: LinkListContainerProps) => react_jsx_runtime.JSX.Element;
+declare const LinkListContainer: ({ className, layout, ...props }: LinkListContainerProps) => JSX.Element;
 type LinkListProps = React.HTMLProps<HTMLUListElement> & {
     children: JSX.Element | JSX.Element[];
 };
-declare const LinkList: ({ className, children, ...restProps }: LinkListProps) => react_jsx_runtime.JSX.Element;
+declare const LinkList: ({ className, children, ...restProps }: LinkListProps) => JSX.Element;
 type LinkListItemProps = React.HTMLProps<HTMLLIElement> & {
     children: ReactNode;
 };
-declare const LinkListItem: ({ children, className, ...props }: LinkListItemProps) => react_jsx_runtime.JSX.Element;
+declare const LinkListItem: ({ children, className, ...props }: LinkListItemProps) => JSX.Element;
 
 type DialogTriggerProps = DialogTriggerProps$1;
-declare const DialogTrigger: (props: DialogTriggerProps) => react_jsx_runtime.JSX.Element;
+declare const DialogTrigger: (props: DialogTriggerProps) => react.JSX.Element;
 type ModalOverlayProps = Omit<ModalOverlayProps$1, 'isDismissable' | 'style'> & {
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
@@ -620,11 +620,11 @@ type ModalOverlayProps = Omit<ModalOverlayProps$1, 'isDismissable' | 'style'> &
     fullscreen?: boolean;
 };
 type ModalProps = ModalOverlayProps;
-declare const Modal: ({ isDismissable, isOpen, onOpenChange, defaultOpen, className, zIndex, fullscreen, ...restProps }: ModalProps) => react_jsx_runtime.JSX.Element;
+declare const Modal: ({ isDismissable, isOpen, onOpenChange, defaultOpen, className, zIndex, fullscreen, ...restProps }: ModalProps) => react.JSX.Element;
 type DialogProps = DialogProps$1 & {
     children: React.ReactNode;
 };
-declare const Dialog: ({ className, children, ...restProps }: DialogProps) => react_jsx_runtime.JSX.Element;
+declare const Dialog: ({ className, children, ...restProps }: DialogProps) => react.JSX.Element;
 
 type NumberFieldProps = {
     /** Additional CSS className for the element. */
@@ -659,7 +659,26 @@ type NumberFieldProps = {
     /** Ref for the input element. */
     ref?: Ref<HTMLInputElement>;
 } & Omit<NumberFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'hideStepper'>;
-declare function NumberField(props: NumberFieldProps): react_jsx_runtime.JSX.Element;
+declare function NumberField(props: NumberFieldProps): react.JSX.Element;
+
+type PaginationProps = {
+    /** The current page (1-indexed). */
+    page: number;
+    /** The total number of pages. */
+    count: number;
+    /** Given a page number, returns the href for navigating to that page. The
+     * value is set as the `href` attribute on the rendered link, enabling
+     * right-click, middle-click and SEO. Client-side routing is set up via
+     * `routerOptions` on `<GrunnmurenProvider />`. */
+    getItemHref: (page: number) => string;
+    /** Optional callback fired when the user activates a page link. Useful for
+     * keeping local state in sync with the URL. Navigation still happens via
+     * the link's href. */
+    onChange?: (page: number) => void;
+    /** Additional class name for the root `<ol>`. */
+    className?: string;
+};
+declare const Pagination: (props: PaginationProps) => react.JSX.Element;
 
 type RadioProps = {
     children: React.ReactNode;
@@ -672,7 +691,7 @@ type RadioProps = {
     /** Ref for the element. */
     ref?: Ref<HTMLLabelElement>;
 } & Omit<RadioProps$1, 'isDisabled' | 'children' | 'style'>;
-declare function Radio(props: RadioProps): react_jsx_runtime.JSX.Element;
+declare function Radio(props: RadioProps): react.JSX.Element;
 
 type RadioGroupProps = {
     children: React.ReactNode;
@@ -689,7 +708,7 @@ type RadioGroupProps = {
     /** Ref for the element. */
     ref?: Ref<HTMLDivElement>;
 } & Omit<RadioGroupProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'orientation'>;
-declare function RadioGroup(props: RadioGroupProps): react_jsx_runtime.JSX.Element;
+declare function RadioGroup(props: RadioGroupProps): react.JSX.Element;
 
 type SelectProps<T extends object> = {
     children: React.ReactNode;
@@ -708,7 +727,7 @@ type SelectProps<T extends object> = {
     /** Ref for the button element. */
     ref?: Ref<HTMLButtonElement>;
 } & Omit<SelectProps$1<T>, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
-declare function Select<T extends object>(props: SelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function Select<T extends object>(props: SelectProps<T>): react.JSX.Element;
 
 type StepperProps = HTMLAttributes<HTMLDivElement> & {
     children: React.ReactNode;
@@ -717,7 +736,7 @@ type StepperProps = HTMLAttributes<HTMLDivElement> & {
     /** Handler that is called when the step changes. */
     onStepChange?: (step: number) => void;
 };
-declare const Stepper: ({ children, activeStep, onStepChange, ...restProps }: StepperProps) => react_jsx_runtime.JSX.Element;
+declare const Stepper: ({ children, activeStep, onStepChange, ...restProps }: StepperProps) => react.JSX.Element;
 type StepProps = HTMLProps<HTMLLIElement> & {
     /**
      * The state fo the step, whether the step is completed or not.
@@ -733,7 +752,7 @@ type StepProps = HTMLProps<HTMLLIElement> & {
     /** @private */
     '~stepIndex'?: number;
 };
-declare const Step: ({ isDisabled, state, children, "~stepIndex": stepIndex, progress, ...restProps }: StepProps) => react_jsx_runtime.JSX.Element;
+declare const Step: ({ isDisabled, state, children, "~stepIndex": stepIndex, progress, ...restProps }: StepProps) => react.JSX.Element;
 
 type TableVariant = 'default' | 'zebra-striped';
 type TableProps = Omit<TableProps$1, 'aria-label' | 'aria-labelledby'> & RefAttributes<HTMLTableElement> & {
@@ -763,25 +782,25 @@ type ResizableTableContainerProps = ResizableTableContainerProps$1;
 /**
  * A container component for displaying tabular data with horizontal scrolling support.
  */
-declare function Table(props: TableProps): react_jsx_runtime.JSX.Element;
+declare function Table(props: TableProps): react.JSX.Element;
 /**
  * Container that enables column resizing and horizontal scrolling for the
  * nested <Table>. Use when you want resizable columns or want to apply
  * `maxWidth`/`minWidth` truncation on columns.
  */
-declare function ResizableTableContainer({ className, children, ...restProps }: ResizableTableContainerProps): react_jsx_runtime.JSX.Element;
+declare function ResizableTableContainer({ className, children, ...restProps }: ResizableTableContainerProps): react.JSX.Element;
 /**
  * Container for table column headers.
  */
-declare function TableHeader({ className, children, ...restProps }: TableHeaderProps): react_jsx_runtime.JSX.Element;
-declare function TableColumn(props: TableColumnProps): react_jsx_runtime.JSX.Element;
-declare const TableColumnResizer: ({ className, ...restProps }: TableColumnResizerProps) => react_jsx_runtime.JSX.Element;
+declare function TableHeader({ className, children, ...restProps }: TableHeaderProps): react.JSX.Element;
+declare function TableColumn(props: TableColumnProps): react.JSX.Element;
+declare const TableColumnResizer: ({ className, ...restProps }: TableColumnResizerProps) => react.JSX.Element;
 /**
  * Container for table rows.
  */
-declare function TableBody({ className, children, ...restProps }: TableBodyProps): react_jsx_runtime.JSX.Element;
-declare function TableRow(props: TableRowProps): react_jsx_runtime.JSX.Element;
-declare function TableCell(props: TableCellProps): react_jsx_runtime.JSX.Element;
+declare function TableBody({ className, children, ...restProps }: TableBodyProps): react.JSX.Element;
+declare function TableRow(props: TableRowProps): react.JSX.Element;
+declare function TableCell(props: TableCellProps): react.JSX.Element;
 /** @deprecated Use `UNSAFE_ResizableTableContainer` instead. */
 declare const UNSAFE_TableContainer: typeof ResizableTableContainer;
 /** @deprecated Use `UNSAFE_ResizableTableContainerProps` instead. */
@@ -818,19 +837,19 @@ type TabPanelProps = Omit<TabPanelProps$1, 'className'> & RefAttributes<HTMLDivE
  * A container component that organizes content into multiple sections
  * and allows users to navigate between them.
  */
-declare function Tabs(props: TabsProps): react_jsx_runtime.JSX.Element;
+declare function Tabs(props: TabsProps): react.JSX.Element;
 /**
  * A container component for Tab components within Tabs.
  */
-declare function TabList({ className, children, ...restProps }: TabListProps): react_jsx_runtime.JSX.Element;
+declare function TabList({ className, children, ...restProps }: TabListProps): react.JSX.Element;
 /**
  * An individual tab that can be selected to display its associated content.
  */
-declare function Tab(props: TabProps): react_jsx_runtime.JSX.Element;
+declare function Tab(props: TabProps): react.JSX.Element;
 /**
  * The content area that displays the selected tab's content.
  */
-declare function TabPanel(props: TabPanelProps): react_jsx_runtime.JSX.Element;
+declare function TabPanel(props: TabPanelProps): react.JSX.Element;
 
 type TagGroupProps = Omit<TagGroupProps$1, 'className'> & RefAttributes<HTMLDivElement> & {
     /**
@@ -863,15 +882,15 @@ type TagProps = Omit<TagProps$1, 'className'> & RefAttributes<HTMLDivElement> &
 /**
  * A group component for Tag components that enables selection and organization of options.
  */
-declare function TagGroup(props: TagGroupProps): react_jsx_runtime.JSX.Element;
+declare function TagGroup(props: TagGroupProps): react.JSX.Element;
 /**
  * A container component for Tag components within a TagGroup.
  */
-declare function TagList(props: TagListProps): react_jsx_runtime.JSX.Element;
+declare function TagList(props: TagListProps): react.JSX.Element;
 /**
  * Interactive tag component for selections, filtering, and categorization.
  */
-declare function Tag(props: TagProps): react_jsx_runtime.JSX.Element;
+declare function Tag(props: TagProps): react.JSX.Element;
 
 type TextAreaProps = {
     /** Additional CSS className for the element. */
@@ -894,7 +913,7 @@ type TextAreaProps = {
     /** Ref for the textarea element. */
     ref?: Ref<HTMLTextAreaElement>;
 } & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
-declare function TextArea(props: TextAreaProps): react_jsx_runtime.JSX.Element;
+declare function TextArea(props: TextAreaProps): react.JSX.Element;
 
 type TextFieldProps = {
     /** Additional CSS className for the element. */
@@ -925,7 +944,36 @@ type TextFieldProps = {
     /** Ref for the input element. */
     ref?: Ref<HTMLInputElement>;
 } & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
-declare function TextField(props: TextFieldProps): react_jsx_runtime.JSX.Element;
+declare function TextField(props: TextFieldProps): react.JSX.Element;
+
+type ToggletipProps = DialogTriggerProps$1;
+/** Root of the toggletip. Wraps a `<ToggletipTrigger>` and a `<ToggletipContent>`. */
+declare const Toggletip: (props: ToggletipProps) => react.JSX.Element;
+type ToggletipTriggerProps = Omit<ButtonProps$1, 'children' | 'className'> & {
+    children: React.ReactNode;
+    /**
+     * Visual preset: `definition` (an inline, dashed-underlined term) or `info`
+     * (a 44x44 icon button). Omit it to style the trigger yourself — children and
+     * appearance are then up to you.
+     */
+    variant?: 'definition' | 'info';
+    /** Additional class name for the trigger button. */
+    className?: string;
+};
+/**
+ * The button that toggles the toggletip. Needs an accessible name — `aria-label`
+ * for an icon, or the visible text for a definition term.
+ */
+declare const ToggletipTrigger: ({ variant, className, ...restProps }: ToggletipTriggerProps) => react.JSX.Element;
+type ToggletipContentProps = Omit<PopoverProps, 'children' | 'className'> & {
+    /** Accessible label for the dialog. Required, since the content has no heading. */
+    'aria-label': string;
+    children: React.ReactNode;
+    /** Additional class name for the popover. */
+    className?: string;
+};
+/** The popover content of the toggletip: a `Dialog` (with `aria-label`) and a close button. */
+declare const ToggletipContent: ({ "aria-label": ariaLabel, children, className, ...restProps }: ToggletipContentProps) => react.JSX.Element;
 
 type VideoLoopProps = {
     /** The video url */
@@ -941,7 +989,7 @@ type VideoLoopProps = {
     alt?: string;
     className?: string;
 };
-declare const VideoLoop: ({ src, format, alt, className }: VideoLoopProps) => react_jsx_runtime.JSX.Element;
+declare const VideoLoop: ({ src, format, alt, className }: VideoLoopProps) => react.JSX.Element;
 
-export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, Disclosure, DisclosureButton, DisclosurePanel, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, Link, LinkList, LinkListContainer, LinkListContext, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tab, TabList, TabPanel, Tabs, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselContext as UNSAFE_CarouselContext, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, CarouselItemsContainer as UNSAFE_CarouselItemsContainerProps, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Drawer as UNSAFE_Drawer, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, HeroContext as UNSAFE_HeroContext, Modal as UNSAFE_Modal, ResizableTableContainer as UNSAFE_ResizableTableContainer, Step as UNSAFE_Step, Stepper as UNSAFE_Stepper, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, VideoLoop, _useLocale as useLocale };
-export type { AccordionItemProps, AccordionProps, Props as AlertboxProps, AvatarProps, BacklinkProps, BadgeProps, BreadcrumbProps, BreadcrumbsProps, ButtonProps, CaptionProps, CardLinkProps, CardProps, CheckboxGroupProps, CheckboxProps, ComboboxProps, ContentProps, DateFormatterProps, DescriptionProps, DisclosureButtonProps, DisclosurePanelProps, DisclosureProps, ErrorMessageProps, FooterProps, GrunnmurenProviderProps, HeadingProps, LinkListContainerProps, LinkListContextValue, LinkListItemProps, LinkListProps, LinkProps, Locale, MediaProps, NumberFieldProps, RadioGroupProps, RadioProps, SelectProps, TabListProps, TabPanelProps, TabProps, TabsProps, TagGroupProps, TagListProps, TagProps, TextAreaProps, TextFieldProps, CarouselButtonProps as UNSAFE_CarouselButtonProps, CarouselContextValue as UNSAFE_CarouselContextValue, CarouselControlsProps as UNSAFE_CarouselControlsProps, CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItemsProps as UNSAFE_CarouselItemsProps, CarouselProps as UNSAFE_CarouselProps, CarouselElement as UNSAFE_CarouselRef, DialogProps as UNSAFE_DialogProps, DialogTriggerProps as UNSAFE_DialogTriggerProps, DrawerProps as UNSAFE_DrawerProps, FileUploadProps as UNSAFE_FileUploadProps, HeroContextValue as UNSAFE_HeroContextValue, HeroProps as UNSAFE_HeroProps, ModalProps as UNSAFE_ModalProps, ResizableTableContainerProps as UNSAFE_ResizableTableContainerProps, StepProps as UNSAFE_StepProps, StepperProps as UNSAFE_StepperProps, TableBodyProps as UNSAFE_TableBodyProps, TableCellProps as UNSAFE_TableCellProps, TableColumnProps as UNSAFE_TableColumnProps, TableColumnResizerProps as UNSAFE_TableColumnResizerProps, UNSAFE_TableContainerProps, TableHeaderProps as UNSAFE_TableHeaderProps, TableProps as UNSAFE_TableProps, TableRowProps as UNSAFE_TableRowProps };
+export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, Disclosure, DisclosureButton, DisclosurePanel, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Hero, HeroContext, Label, Link, LinkList, LinkListContainer, LinkListContext, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tab, TabList, TabPanel, Tabs, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselContext as UNSAFE_CarouselContext, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, CarouselItemsContainer as UNSAFE_CarouselItemsContainerProps, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Drawer as UNSAFE_Drawer, FileUpload as UNSAFE_FileUpload, Modal as UNSAFE_Modal, Pagination as UNSAFE_Pagination, ResizableTableContainer as UNSAFE_ResizableTableContainer, Step as UNSAFE_Step, Stepper as UNSAFE_Stepper, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Toggletip as UNSAFE_Toggletip, ToggletipContent as UNSAFE_ToggletipContent, ToggletipTrigger as UNSAFE_ToggletipTrigger, VideoLoop, _useLocale as useLocale };
+export type { AccordionItemProps, AccordionProps, Props as AlertboxProps, AvatarProps, BacklinkProps, BadgeProps, BreadcrumbProps, BreadcrumbsProps, ButtonProps, CaptionProps, CardLinkProps, CardProps, CheckboxGroupProps, CheckboxProps, ComboboxProps, ContentProps, DateFormatterProps, DescriptionProps, DisclosureButtonProps, DisclosurePanelProps, DisclosureProps, ErrorMessageProps, FooterProps, GrunnmurenProviderProps, HeadingProps, HeroContextValue, HeroProps, LinkListContainerProps, LinkListContextValue, LinkListItemProps, LinkListProps, LinkProps, Locale, MediaProps, NumberFieldProps, RadioGroupProps, RadioProps, SelectProps, TabListProps, TabPanelProps, TabProps, TabsProps, TagGroupProps, TagListProps, TagProps, TextAreaProps, TextFieldProps, CarouselButtonProps as UNSAFE_CarouselButtonProps, CarouselContextValue as UNSAFE_CarouselContextValue, CarouselControlsProps as UNSAFE_CarouselControlsProps, CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItemsProps as UNSAFE_CarouselItemsProps, CarouselProps as UNSAFE_CarouselProps, CarouselElement as UNSAFE_CarouselRef, DialogProps as UNSAFE_DialogProps, DialogTriggerProps as UNSAFE_DialogTriggerProps, DrawerProps as UNSAFE_DrawerProps, FileUploadProps as UNSAFE_FileUploadProps, ModalProps as UNSAFE_ModalProps, PaginationProps as UNSAFE_PaginationProps, ResizableTableContainerProps as UNSAFE_ResizableTableContainerProps, StepProps as UNSAFE_StepProps, StepperProps as UNSAFE_StepperProps, TableBodyProps as UNSAFE_TableBodyProps, TableCellProps as UNSAFE_TableCellProps, TableColumnProps as UNSAFE_TableColumnProps, TableColumnResizerProps as UNSAFE_TableColumnResizerProps, UNSAFE_TableContainerProps, TableHeaderProps as UNSAFE_TableHeaderProps, TableProps as UNSAFE_TableProps, TableRowProps as UNSAFE_TableRowProps, ToggletipContentProps as UNSAFE_ToggletipContentProps, ToggletipProps as UNSAFE_ToggletipProps, ToggletipTriggerProps as UNSAFE_ToggletipTriggerProps };

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { RouterProvider } from 'react-aria-components';
 export { Form, Group } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva, cx, compose } from 'cva';
-import { createContext, useContext, useId, useRef, Children, useState, useEffect, useMemo, useCallback, useImperativeHandle, isValidElement, use, cloneElement } from 'react';
+import { createContext, useContext, useId, useRef, Children, useState, useEffect, useMemo, useCallback, useImperativeHandle, isValidElement, useLayoutEffect, use, cloneElement } from 'react';
 import { useContextProps, Provider, DEFAULT_SLOT, useSlottedContext } from 'react-aria-components/slots';
 import { ChevronDown, Error, Warning, CheckCircle, InfoCircle, Close, User, ChevronLeft, Download, LinkExternal, ArrowRight, ChevronRight, LoadingSpinner, Check, Trash, Edit, PlayerPause, PlayerPlay } from '@obosbbl/grunnmuren-icons-react';
 import { ButtonContext as ButtonContext$1, Button as Button$1 } from 'react-aria-components/Button';
@@ -32,7 +32,7 @@ import { FieldError, FieldErrorContext } from 'react-aria-components/FieldError'
 import { Label as Label$1, LabelContext } from 'react-aria-components/Label';
 import { ComboBox } from 'react-aria-components/ComboBox';
 import { Input, InputContext } from 'react-aria-components/Input';
-import { Popover } from 'react-aria-components/Popover';
+import { Popover, OverlayArrow } from 'react-aria-components/Popover';
 import { Header } from 'react-aria-components/Header';
 import { ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, ListBox as ListBox$1 } from 'react-aria-components/ListBox';
 import { useDateFormatter } from 'react-aria/useDateFormatter';
@@ -397,6 +397,21 @@ const translations$1 = {
         sv: 'Nästa',
         en: 'Next'
     },
+    pagination: {
+        nb: 'Paginering',
+        sv: 'Paginering',
+        en: 'Pagination'
+    },
+    previousPage: {
+        nb: 'Forrige side',
+        sv: 'Föregående sida',
+        en: 'Previous page'
+    },
+    nextPage: {
+        nb: 'Neste side',
+        sv: 'Nästa sida',
+        en: 'Next page'
+    },
     externalLink: {
         nb: '(ekstern lenke)',
         sv: '(extern länk)',
@@ -945,11 +960,13 @@ function Button({ ref = null, ...props }) {
     return isLinkProps(restProps) ? /*#__PURE__*/ jsx(Link$1, {
         ...restProps,
         className: className,
+        "data-slot": "button",
         ref: ref,
         children: children
     }) : /*#__PURE__*/ jsx(Button$1, {
         ...restProps,
         className: className,
+        "data-slot": "button",
         isPending: isPending,
         ref: ref,
         children: children
@@ -1188,7 +1205,11 @@ const oneColumnLayout = [
     // Aligns <Content> and any element beside it (e.g. <Media>, <Badge>, <CTA> etc.) to the bottom of the <Content> container
     'lg:items-end'
 ];
-const nonFullBleedAspectRatiosForSmallScreens = '*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-[1/1] sm:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-4/3 md:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-3/2';
+// Use `not-has-[video]` (tag selector) so that aspect-ratio rules also skip for video players
+// that don't expose `data-slot="video"` (e.g., MuxPlayer).
+// Aspect-ratio is applied to the `<Media>` element itself (not the img inside) so that the
+// Media box fills the grid column and consumers don't need `!important` overrides when nesting.
+const nonFullBleedAspectRatiosForSmallScreens = '*:data-[slot=media]:not-has-[video]:aspect-[1/1] sm:*:data-[slot=media]:not-has-[video]:aspect-4/3 md:*:data-[slot=media]:not-has-[video]:aspect-3/2';
 const variants = cva({
     base: [
         'container px-0',
@@ -1213,7 +1234,7 @@ const variants = cva({
             standard: [
                 oneColumnLayout,
                 nonFullBleedAspectRatiosForSmallScreens,
-                'lg:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-2/1'
+                'lg:*:data-[slot=media]:not-has-[video]:aspect-2/1'
             ],
             'full-bleed': [
                 oneColumnLayout,
@@ -1242,7 +1263,7 @@ const variants = cva({
                 'lg:*:data-[slot=content]:gap-y-7',
                 nonFullBleedAspectRatiosForSmallScreens,
                 // Set media aspect ratio to 1:1 (square)
-                'lg:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-square'
+                'lg:*:data-[slot=media]:not-has-[video]:aspect-square'
             ]
         }
     },
@@ -1254,6 +1275,8 @@ const variants = cva({
             ],
             className: [
                 '*:data-[slot=media]:*:rounded-3xl',
+                // Make non-video media (image/picture) fill the aspect-ratio-constrained Media box
+                '*:data-[slot=media]:not-has-[video]:*:size-full',
                 '*:data-[slot=carousel]:relative **:data-[slot=carousel-container]:rounded-3xl **:data-[slot=carousel-controls]:absolute **:data-[slot=carousel-controls]:right-4 **:data-[slot=carousel-controls]:bottom-4'
             ]
         }
@@ -1354,7 +1377,7 @@ const Modal = ({ isDismissable = true, isOpen, onOpenChange, defaultOpen, classN
             fullscreen: fullscreen,
             children: /*#__PURE__*/ jsx(Modal$1, {
                 ...restProps,
-                className: ({ isEntering, isExiting })=>cx(className, 'overflow-auto bg-white text-left shadow-xl', fullscreen ? 'fixed inset-0' : 'w-full max-w-md rounded-2xl p-4 align-middle', isEntering && 'zoom-in-95 animate-in duration-300 ease-out', isExiting && 'zoom-out-95 animate-out duration-200 ease-in', // Using the motion-safe class does not work, so we use motion-reduce to overwrite instead
+                className: ({ isEntering, isExiting })=>cx(className, 'overflow-auto bg-white text-left shadow-xl', fullscreen ? 'fixed inset-0' : 'w-full max-w-md rounded-2xl align-middle', isEntering && 'zoom-in-95 animate-in duration-300 ease-out', isExiting && 'zoom-out-95 animate-out duration-200 ease-in', // Using the motion-safe class does not work, so we use motion-reduce to overwrite instead
                     'motion-reduce:animate-none')
             })
         })
@@ -1362,7 +1385,7 @@ const Modal = ({ isDismissable = true, isOpen, onOpenChange, defaultOpen, classN
 };
 const Dialog = ({ className, children, ...restProps })=>/*#__PURE__*/ jsx(Dialog$1, {
         ...restProps,
-        className: cx(className, 'relative flex flex-col gap-y-5 outline-none', // Footer
+        className: cx(className, 'relative flex flex-col gap-y-5 p-4 outline-none', // Footer
         '**:data-[slot="footer"]:flex **:data-[slot="footer"]:gap-x-2'),
         children: ({ close })=>/*#__PURE__*/ jsx(Provider, {
                 values: [
@@ -2059,10 +2082,10 @@ const drawerVariants = cva({
     ],
     variants: {
         placement: {
-            right: 'top-0 right-0 h-dvh w-full max-w-md rounded-l-2xl p-4',
-            left: 'top-0 left-0 h-dvh w-full max-w-md rounded-r-2xl p-4',
-            top: 'inset-x-0 top-0 max-h-[80dvh] w-full rounded-b-2xl p-4',
-            bottom: 'inset-x-0 bottom-0 max-h-[80dvh] w-full rounded-t-2xl p-4'
+            right: 'top-0 right-0 h-dvh w-full max-w-md rounded-l-2xl',
+            left: 'top-0 left-0 h-dvh w-full max-w-md rounded-r-2xl',
+            top: 'inset-x-0 top-0 max-h-[80dvh] w-full rounded-b-2xl',
+            bottom: 'inset-x-0 bottom-0 max-h-[80dvh] w-full rounded-t-2xl'
         },
         isEntering: {
             true: 'animate-in duration-300 ease-out'
@@ -2571,6 +2594,157 @@ function NumberField(props) {
     });
 }
 
+// Lives here, not in `translations`, because it interpolates the hidden range
+// — the static-string `translations` map doesn't support function values.
+const HIDDEN_PAGES_LABEL = {
+    nb: (start, end)=>start === end ? `Skjuler side ${start}` : `Skjuler side ${start} til ${end}`,
+    sv: (start, end)=>start === end ? `Döljer sida ${start}` : `Döljer sida ${start} till ${end}`,
+    en: (start, end)=>start === end ? `Hides page ${start}` : `Hides pages ${start} to ${end}`
+};
+// Number of pages shown on each side of the current page on desktop. On
+// narrow containers, CSS hides the outermost visible pages via the
+// `data-outer` attribute so the entire pagination fits a 320px viewport
+// without changing the rendered DOM.
+const SIBLING_COUNT = 2;
+/**
+ * Returns the page numbers (1-indexed) that should be rendered between the
+ * always-visible first page and the next/prev buttons. Mirrors v1's ellipsis
+ * behaviour: only a single (left) ellipsis is ever shown, and the last page
+ * is not guaranteed to be rendered.
+ *
+ * Page 1 is filtered out because it's rendered separately as a fixed slot —
+ * keeping it here would duplicate when the special-case extension lands the
+ * window on it.
+ */ function getVisiblePages(currentPage, pageCount) {
+    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);
+    // When `start` lands exactly SIBLING_COUNT pages past page 1, we have room
+    // to render one extra page to the left without needing an ellipsis.
+    if (start - SIBLING_COUNT === 0) {
+        start = start - 1;
+    }
+    const pages = Array.from({
+        length: end - start
+    }, (_, i)=>start + i + 1);
+    return pages.filter((p)=>p > 1);
+}
+/**
+ * Returns the indices of the two visible pages farthest from `currentPage`.
+ * These get marked with `data-outer` so the CSS container query can hide them
+ * on narrow viewports, dropping the slot count from 8 to 6 without changing
+ * the rendered DOM. Returns an empty set when there's nothing to gain.
+ */ function getOuterIndices(visiblePages, currentPage) {
+    if (visiblePages.length <= 3) {
+        return new Set();
+    }
+    return new Set(visiblePages.map((p, i)=>({
+            i,
+            distance: Math.abs(p - currentPage)
+        })).sort((a, b)=>b.distance - a.distance).slice(0, 2).map((entry)=>entry.i));
+}
+const Pagination = (props)=>{
+    const { page, count, getItemHref, onChange, className } = props;
+    const locale = _useLocale();
+    const currentPage = Math.max(1, Math.min(page, Math.max(1, count)));
+    const pageCount = Math.max(1, count);
+    const visiblePages = getVisiblePages(currentPage, pageCount);
+    const outerIndices = getOuterIndices(visiblePages, currentPage);
+    // Show the left ellipsis whenever there's a gap between page 1 and the
+    // first visible page. This matches v1 for SIBLING_COUNT=2.
+    const showLeftEllipsis = visiblePages.length > 0 && visiblePages[0] > 2;
+    const canGoPrev = currentPage > 1;
+    const canGoNext = currentPage < pageCount;
+    // Prev/next switches element type (<a> with href ↔ <button> without) when
+    // crossing a boundary. React replaces the DOM node, so the browser blurs
+    // the focused element — restore it manually after the re-render.
+    const prevButtonRef = useRef(null);
+    const nextButtonRef = useRef(null);
+    const restoreFocusToRef = useRef(null);
+    useLayoutEffect(()=>{
+        if (restoreFocusToRef.current === 'prev') {
+            prevButtonRef.current?.focus();
+        } else if (restoreFocusToRef.current === 'next') {
+            nextButtonRef.current?.focus();
+        }
+        restoreFocusToRef.current = null;
+    }, [
+        currentPage
+    ]);
+    return /*#__PURE__*/ jsxs("ol", {
+        "aria-label": translations$1.pagination[locale],
+        className: cx('gm-pagination', className),
+        children: [
+            /*#__PURE__*/ jsx("li", {
+                children: /*#__PURE__*/ jsx(Button, {
+                    "aria-disabled": !canGoPrev,
+                    "aria-label": translations$1.previousPage[locale],
+                    color: "white",
+                    href: canGoPrev ? getItemHref(currentPage - 1) : undefined,
+                    isIconOnly: true,
+                    onPress: canGoPrev ? ()=>{
+                        restoreFocusToRef.current = 'prev';
+                        onChange?.(currentPage - 1);
+                    } : undefined,
+                    ref: prevButtonRef,
+                    children: /*#__PURE__*/ jsx(ChevronLeft, {})
+                })
+            }),
+            /*#__PURE__*/ jsx(PageItem, {
+                getItemHref: getItemHref,
+                isActive: currentPage === 1,
+                onChange: onChange,
+                page: 1
+            }),
+            showLeftEllipsis && /*#__PURE__*/ jsxs("li", {
+                "data-slot": "ellipsis",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        "aria-hidden": "true",
+                        children: "…"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        children: HIDDEN_PAGES_LABEL[locale](2, visiblePages[0] - 1)
+                    })
+                ]
+            }),
+            visiblePages.map((p, i)=>/*#__PURE__*/ jsx(PageItem, {
+                    getItemHref: getItemHref,
+                    isActive: p === currentPage,
+                    isOuter: outerIndices.has(i),
+                    onChange: onChange,
+                    page: p
+                }, p)),
+            /*#__PURE__*/ jsx("li", {
+                children: /*#__PURE__*/ jsx(Button, {
+                    "aria-disabled": !canGoNext,
+                    "aria-label": translations$1.nextPage[locale],
+                    color: "white",
+                    href: canGoNext ? getItemHref(currentPage + 1) : undefined,
+                    isIconOnly: true,
+                    onPress: canGoNext ? ()=>{
+                        restoreFocusToRef.current = 'next';
+                        onChange?.(currentPage + 1);
+                    } : undefined,
+                    ref: nextButtonRef,
+                    children: /*#__PURE__*/ jsx(ChevronRight, {})
+                })
+            })
+        ]
+    });
+};
+const PageItem = ({ page, isActive, isOuter, getItemHref, onChange })=>{
+    return /*#__PURE__*/ jsx("li", {
+        "data-outer": isOuter || undefined,
+        children: /*#__PURE__*/ jsx(Button, {
+            "aria-current": isActive ? 'page' : undefined,
+            color: isActive ? 'blue' : 'white',
+            href: getItemHref(page),
+            onPress: ()=>onChange?.(page),
+            children: page
+        })
+    });
+};
+
 const defaultClasses = cx([
     'relative -ml-2.5 inline-flex max-w-fit cursor-pointer items-start gap-4 py-2.5 pl-2.5 leading-7',
     // the radio button itself
@@ -3395,6 +3569,48 @@ function TextField(props) {
     });
 }
 
+/** Root of the toggletip. Wraps a `<ToggletipTrigger>` and a `<ToggletipContent>`. */ const Toggletip = (props)=>/*#__PURE__*/ jsx(DialogTrigger$1, {
+        ...props
+    });
+/**
+ * The button that toggles the toggletip. Needs an accessible name — `aria-label`
+ * for an icon, or the visible text for a definition term.
+ */ const ToggletipTrigger = ({ variant, className, ...restProps })=>/*#__PURE__*/ jsx(Button$1, {
+        ...restProps,
+        className: cx('gm-toggletip-trigger', className),
+        "data-variant": variant
+    });
+/** The popover content of the toggletip: a `Dialog` (with `aria-label`) and a close button. */ const ToggletipContent = ({ 'aria-label': ariaLabel, children, className, ...restProps })=>{
+    const locale = _useLocale();
+    return /*#__PURE__*/ jsxs(Popover, {
+        ...restProps,
+        className: cx('gm-toggletip', className),
+        offset: 8,
+        children: [
+            /*#__PURE__*/ jsx(OverlayArrow, {
+                "data-slot": "toggletip-arrow"
+            }),
+            /*#__PURE__*/ jsx(Dialog$1, {
+                "aria-label": ariaLabel,
+                "data-slot": "toggletip-dialog",
+                children: ({ close })=>/*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                "aria-label": translations$1.close[locale],
+                                color: "white",
+                                isIconOnly: true,
+                                onPress: close,
+                                variant: "tertiary",
+                                children: /*#__PURE__*/ jsx(Close, {})
+                            }),
+                            children
+                        ]
+                    })
+            })
+        ]
+    });
+};
+
 const VideoLoop = ({ src, format, alt, className })=>{
     // Control the video playback state, so that the user can pause and play the video at will, also control the video autoplay
     const [shouldPlay, setShouldPlay] = useState(false);
@@ -3476,4 +3692,4 @@ const VideoLoop = ({ src, format, alt, className })=>{
     });
 };
 
-export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, Disclosure, DisclosureButton, DisclosurePanel, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, Link, LinkList, LinkListContainer, LinkListContext, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tab, TabList, TabPanel, Tabs, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselContext as UNSAFE_CarouselContext, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Drawer as UNSAFE_Drawer, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, HeroContext as UNSAFE_HeroContext, Modal as UNSAFE_Modal, ResizableTableContainer as UNSAFE_ResizableTableContainer, Step as UNSAFE_Step, Stepper as UNSAFE_Stepper, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, VideoLoop, _useLocale as useLocale };
+export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, Disclosure, DisclosureButton, DisclosurePanel, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Hero, HeroContext, Label, Link, LinkList, LinkListContainer, LinkListContext, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tab, TabList, TabPanel, Tabs, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselContext as UNSAFE_CarouselContext, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Drawer as UNSAFE_Drawer, FileUpload as UNSAFE_FileUpload, Modal as UNSAFE_Modal, Pagination as UNSAFE_Pagination, ResizableTableContainer as UNSAFE_ResizableTableContainer, Step as UNSAFE_Step, Stepper as UNSAFE_Stepper, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Toggletip as UNSAFE_Toggletip, ToggletipContent as UNSAFE_ToggletipContent, ToggletipTrigger as UNSAFE_ToggletipTrigger, VideoLoop, _useLocale as useLocale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "3.7.0",
+  "version": "3.8.1",
   "description": "Grunnmuren components in React",
   "license": "MIT",
   "repository": {
@@ -33,7 +33,8 @@
     "tailwindcss": "4.2.2"
   },
   "peerDependencies": {
-    "react": "^19"
+    "react": "^19",
+    "@obosbbl/grunnmuren-tailwind": "^2.4.12"
   },
   "scripts": {
     "build": "bunchee"