@obosbbl/grunnmuren-react 3.6.0 → 3.8.0

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.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__/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.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/index.d.mts

@@ -17,13 +17,13 @@ import { CheckboxProps as CheckboxProps$1 } from 'react-aria-components/Checkbox
 import { CheckboxGroupProps as CheckboxGroupProps$1 } from 'react-aria-components/CheckboxGroup';
 import { ComboBoxProps } from 'react-aria-components/ComboBox';
 import { DateFormatterOptions } from 'react-aria/useDateFormatter';
+import { ModalOverlayProps as ModalOverlayProps$1 } from 'react-aria-components/Modal';
 import { FileTriggerProps as FileTriggerProps$1 } from 'react-aria-components/FileTrigger';
 import { useFormValidationState } from 'react-stately/private/form/useFormValidationState';
 import { TextProps } from 'react-aria-components/Text';
 import { LabelProps } from 'react-aria-components/Label';
 export { LabelProps } from 'react-aria-components/Label';
 import { DialogProps as DialogProps$1, DialogTriggerProps as DialogTriggerProps$1 } from 'react-aria-components/Dialog';
-import { ModalOverlayProps as ModalOverlayProps$1 } from 'react-aria-components/Modal';
 import { NumberFieldProps as NumberFieldProps$1 } from 'react-aria-components/NumberField';
 import { RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1 } from 'react-aria-components/RadioGroup';
 import { SelectProps as SelectProps$1 } from 'react-aria-components/Select';
@@ -495,6 +495,27 @@ type DateFormatterProps = {
  */
 declare const DateFormatter: ({ options: _options, value, children: render }: DateFormatterProps) => ReactNode;
 
+declare const drawerVariants: (props?: ({
+    placement?: "right" | "left" | "top" | "bottom" | undefined;
+    isEntering?: boolean | undefined;
+    isExiting?: boolean | undefined;
+} & ({
+    class?: cva.ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: cva.ClassValue;
+})) | undefined) => string;
+type DrawerProps = Omit<ModalOverlayProps$1, 'isDismissable' | 'style'> & Pick<VariantProps<typeof drawerVariants>, 'placement'> & {
+    /** Additional style properties for the element. */
+    style?: React.CSSProperties;
+    /** @default 10 Controls the z-index of the drawer overlay */
+    zIndex?: number;
+    /** @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;
+
 type FormValidationProps<T> = Parameters<typeof useFormValidationState<T>>[0];
 type FileTriggerProps = Partial<Omit<FormValidationProps<File>, 'value'>> & FileTriggerProps$1 & Omit<HTMLAttributes<HTMLInputElement>, 'onSelect' | 'onChange' | 'required' | 'className'> & {
     ref?: RefObject<HTMLInputElement | null>;
@@ -640,6 +661,25 @@ type NumberFieldProps = {
 } & Omit<NumberFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'hideStepper'>;
 declare function NumberField(props: NumberFieldProps): react_jsx_runtime.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_runtime.JSX.Element;
+
 type RadioProps = {
     children: React.ReactNode;
     /** Additional CSS className for the element. */
@@ -922,5 +962,5 @@ type VideoLoopProps = {
 };
 declare const VideoLoop: ({ src, format, alt, className }: VideoLoopProps) => react_jsx_runtime.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, 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, 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, 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 };

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';
@@ -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'
             ]
         }
@@ -1349,11 +1372,12 @@ const Modal = ({ isDismissable = true, isOpen, onOpenChange, defaultOpen, classN
             onOpenChange: onOpenChange,
             defaultOpen: defaultOpen,
             isDismissable: isDismissable,
+            isKeyboardDismissDisabled: !isDismissable,
             zIndex: zIndex,
             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')
             })
         })
@@ -1361,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: [
@@ -2051,6 +2075,123 @@ function Combobox(props) {
     return render ? render(formatted) : formatted;
 };
 
+const drawerVariants = cva({
+    base: [
+        'fixed overflow-auto bg-white text-left shadow-xl',
+        'motion-reduce:animate-none'
+    ],
+    variants: {
+        placement: {
+            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'
+        },
+        isExiting: {
+            true: 'animate-out duration-200 ease-in'
+        }
+    },
+    compoundVariants: [
+        {
+            placement: 'right',
+            isEntering: true,
+            className: 'slide-in-from-right'
+        },
+        {
+            placement: 'right',
+            isExiting: true,
+            className: 'slide-out-to-right'
+        },
+        {
+            placement: 'left',
+            isEntering: true,
+            className: 'slide-in-from-left'
+        },
+        {
+            placement: 'left',
+            isExiting: true,
+            className: 'slide-out-to-left'
+        },
+        {
+            placement: 'top',
+            isEntering: true,
+            className: 'slide-in-from-top'
+        },
+        {
+            placement: 'top',
+            isExiting: true,
+            className: 'slide-out-to-top'
+        },
+        {
+            placement: 'bottom',
+            isEntering: true,
+            className: 'slide-in-from-bottom'
+        },
+        {
+            placement: 'bottom',
+            isExiting: true,
+            className: 'slide-out-to-bottom'
+        }
+    ]
+});
+const Drawer = ({ isDismissable = true, isOpen, onOpenChange, defaultOpen, className, zIndex = 10, placement = 'right', style = {}, ...restProps })=>{
+    const locale = _useLocale();
+    return /*#__PURE__*/ jsx(Provider, {
+        values: [
+            [
+                HeadingContext,
+                {
+                    slots: {
+                        [DEFAULT_SLOT]: {},
+                        title: {
+                            className: 'heading-s',
+                            _outerWrapper: (children)=>/*#__PURE__*/ jsxs("div", {
+                                    className: "flex items-center justify-between gap-x-2",
+                                    children: [
+                                        children,
+                                        isDismissable && /*#__PURE__*/ jsx(Button, {
+                                            slot: "close",
+                                            variant: "tertiary",
+                                            className: "data-focus-visible:outline-focus-inset px-2.5!",
+                                            "aria-label": translations$1.close[locale],
+                                            onPress: ()=>onOpenChange?.(false),
+                                            children: /*#__PURE__*/ jsx(Close, {})
+                                        })
+                                    ]
+                                })
+                        }
+                    }
+                }
+            ]
+        ],
+        children: /*#__PURE__*/ jsx(ModalOverlay, {
+            isOpen: isOpen,
+            onOpenChange: onOpenChange,
+            defaultOpen: defaultOpen,
+            isDismissable: isDismissable,
+            isKeyboardDismissDisabled: !isDismissable,
+            style: {
+                zIndex,
+                ...style
+            },
+            className: ({ isEntering, isExiting })=>cx('fixed inset-0 bg-black/25 backdrop-blur-sm', isEntering && 'fade-in animate-in duration-300 ease-out', isExiting && 'fade-out 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'),
+            children: /*#__PURE__*/ jsx(Modal$1, {
+                ...restProps,
+                className: ({ isEntering, isExiting })=>drawerVariants({
+                        placement,
+                        isEntering,
+                        isExiting,
+                        className
+                    })
+            })
+        })
+    });
+};
+
 /**
  * A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.
  */ const FileTrigger = (props)=>{
@@ -2453,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
@@ -3358,4 +3650,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, 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, VideoLoop, _useLocale as useLocale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "3.6.0",
+  "version": "3.8.0",
   "description": "Grunnmuren components in React",
   "license": "MIT",
   "repository": {
@@ -26,14 +26,15 @@
     "react-aria-components": "^1.17.0",
     "react-stately": "^3.46.0",
     "use-debounce": "^10.0.4",
-    "@obosbbl/grunnmuren-icons-react": "^2.2.0"
+    "@obosbbl/grunnmuren-icons-react": "^2.2.1"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",
     "tailwindcss": "4.2.2"
   },
   "peerDependencies": {
-    "react": "^19"
+    "react": "^19",
+    "@obosbbl/grunnmuren-tailwind": "^2.4.11"
   },
   "scripts": {
     "build": "bunchee"