@obosbbl/grunnmuren-react 3.8.0 → 3.8.2

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__/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

@@ -340,8 +340,11 @@ const variants = cva.cva({
             ],
             'full-bleed': [
                 oneColumnLayout,
-                // Position the media and carousel content to fill the entire viewport width
-                '*:data-[slot=media]:*:absolute *:data-[slot=media]:*:left-0',
+                // Break media out to full viewport width — except the VideoLoop wrapper (`:has(video)`), which
+                // stays container-width so its play button anchors to the grid container (see the video rule below).
+                '*:data-[slot=media]:*:not-has-[video]:absolute *:data-[slot=media]:*:not-has-[video]:left-0',
+                // Break only the VideoLoop's video out to full width; the wrapper (and its button) stay in the container.
+                '**:data-[slot=video]:relative **:data-[slot=video]:left-1/2 **:data-[slot=video]:min-w-screen **:data-[slot=video]:-translate-x-1/2',
                 // Special case for Carousel, where the Media is nested inside a CarouselItem
                 '*:data-[slot=carousel]:**:data-[slot=media]:w-full',
                 // Match the heights of the <Media> or <Carousel> wrapper for the Media content (e.g. image, VideoLoop, video etc.)

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

@@ -338,8 +338,11 @@ const variants = cva({
             ],
             'full-bleed': [
                 oneColumnLayout,
-                // Position the media and carousel content to fill the entire viewport width
-                '*:data-[slot=media]:*:absolute *:data-[slot=media]:*:left-0',
+                // Break media out to full viewport width — except the VideoLoop wrapper (`:has(video)`), which
+                // stays container-width so its play button anchors to the grid container (see the video rule below).
+                '*:data-[slot=media]:*:not-has-[video]:absolute *:data-[slot=media]:*:not-has-[video]:left-0',
+                // Break only the VideoLoop's video out to full width; the wrapper (and its button) stay in the container.
+                '**:data-[slot=video]:relative **:data-[slot=video]:left-1/2 **:data-[slot=video]:min-w-screen **:data-[slot=video]:-translate-x-1/2',
                 // Special case for Carousel, where the Media is nested inside a CarouselItem
                 '*:data-[slot=carousel]:**:data-[slot=media]:w-full',
                 // Match the heights of the <Media> or <Carousel> wrapper for the Media content (e.g. image, VideoLoop, video etc.)

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,7 @@ 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). */
@@ -678,7 +678,7 @@ type PaginationProps = {
     /** Additional class name for the root `<ol>`. */
     className?: string;
 };
-declare const Pagination: (props: PaginationProps) => react_jsx_runtime.JSX.Element;
+declare const Pagination: (props: PaginationProps) => react.JSX.Element;
 
 type RadioProps = {
     children: React.ReactNode;
@@ -691,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;
@@ -708,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;
@@ -727,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;
@@ -736,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.
@@ -752,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> & {
@@ -782,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. */
@@ -837,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> & {
     /**
@@ -882,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. */
@@ -913,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. */
@@ -944,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 */
@@ -960,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, 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 };
+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

@@ -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';
@@ -426,6 +426,16 @@ const translations$1 = {
         nb: 'Fullført',
         sv: 'Slutförd',
         en: 'Completed'
+    },
+    playAnimation: {
+        nb: 'Spill av animasjon',
+        sv: 'Spela upp animation',
+        en: 'Play animation'
+    },
+    pauseAnimation: {
+        nb: 'Pause animasjon',
+        sv: 'Pausa animation',
+        en: 'Pause animation'
     }
 };
 
@@ -1238,8 +1248,11 @@ const variants = cva({
             ],
             'full-bleed': [
                 oneColumnLayout,
-                // Position the media and carousel content to fill the entire viewport width
-                '*:data-[slot=media]:*:absolute *:data-[slot=media]:*:left-0',
+                // Break media out to full viewport width — except the VideoLoop wrapper (`:has(video)`), which
+                // stays container-width so its play button anchors to the grid container (see the video rule below).
+                '*:data-[slot=media]:*:not-has-[video]:absolute *:data-[slot=media]:*:not-has-[video]:left-0',
+                // Break only the VideoLoop's video out to full width; the wrapper (and its button) stay in the container.
+                '**:data-[slot=video]:relative **:data-[slot=video]:left-1/2 **:data-[slot=video]:min-w-screen **:data-[slot=video]:-translate-x-1/2',
                 // Special case for Carousel, where the Media is nested inside a CarouselItem
                 '*:data-[slot=carousel]:**:data-[slot=media]:w-full',
                 // Match the heights of the <Media> or <Carousel> wrapper for the Media content (e.g. image, VideoLoop, video etc.)
@@ -3569,6 +3582,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);
@@ -3597,19 +3652,23 @@ const VideoLoop = ({ src, format, alt, className })=>{
     }, [
         shouldPlay
     ]);
+    const togglePlayback = ()=>setShouldPlay((prevState)=>!prevState);
+    const locale = _useLocale();
     return /*#__PURE__*/ jsxs("div", {
-        className: cx(className, 'relative', prefersReducedMotion === null && 'opacity-0'),
+        className: cx(className, // group: hover anywhere reveals the button. @container: corner placement only when large.
+        'group @container relative', prefersReducedMotion === null && 'opacity-0'),
         "data-slot": "video-loop",
         children: [
             /*#__PURE__*/ jsx("video", {
                 "aria-hidden": true,
                 ref: videoRef,
-                // cursor-pointer is not working on the button below, so we add it here for the same effect
+                // Click anywhere on the video to toggle playback (in addition to the button)
                 className: "size-full max-h-[inherit] cursor-pointer rounded-[inherit] object-cover",
                 playsInline: true,
                 loop: prefersReducedMotion === false,
                 autoPlay: prefersReducedMotion === false,
                 muted: true,
+                onClick: togglePlayback,
                 onEnded: (event)=>{
                     if (prefersReducedMotion) {
                         // Reset the video to the beginning if the user prefers reduced motion, since the video will not loop
@@ -3624,30 +3683,28 @@ const VideoLoop = ({ src, format, alt, className })=>{
                     type: `video/${format}`
                 })
             }),
-            prefersReducedMotion !== null && /*#__PURE__*/ jsx("button", {
-                "data-slot": "video-loop-button",
-                // oxlint-disable-next-line jsx-a11y/no-aria-hidden-on-focusable
-                "aria-hidden": true,
-                type: "button",
-                onClick: ()=>setShouldPlay((prevState)=>!prevState),
-                className: cx('absolute inset-0 m-auto grid place-items-center', 'focus-visible:outline-focus focus-visible:outline-focus-offset', 'rounded-[inherit]', // Setting the opacity to 0 before applying the transition below will ensure the button only fades in after the video has started playing
+            alt && /*#__PURE__*/ jsx("p", {
+                className: "sr-only",
+                children: alt
+            }),
+            prefersReducedMotion !== null && /*#__PURE__*/ jsx(Button, {
+                "aria-label": isPlaying ? translations$1.pauseAnimation[locale] : translations$1.playAnimation[locale],
+                isIconOnly: true,
+                variant: "primary",
+                color: "white",
+                onPress: togglePlayback,
+                className: cx(// Centered in small containers; moved to the bottom-left corner in larger ones
+                'absolute inset-0 m-auto size-fit', '@md:inset-auto @md:bottom-4 @md:left-4', // Opacity-only transition; overrides Button's `transition-colors` so the focus outline doesn't flash black→white
+                'transition-opacity duration-200', // Start hidden so the button fades in once the video plays
                 shouldPlay && 'opacity-0', isPlaying && [
-                    'transition-opacity duration-200',
                     // Only show the pause button when the video is hovered or focused
                     'focus-visible:opacity-100',
-                    'hover:opacity-100'
+                    'group-hover:opacity-100'
                 ]),
-                children: /*#__PURE__*/ jsx("span", {
-                    className: "grid size-12 place-items-center rounded-full bg-white outline-hidden",
-                    children: isPlaying ? /*#__PURE__*/ jsx(PlayerPause, {}) : /*#__PURE__*/ jsx(PlayerPlay, {})
-                })
-            }),
-            alt && /*#__PURE__*/ jsx("p", {
-                className: "sr-only",
-                children: alt
+                children: isPlaying ? /*#__PURE__*/ jsx(PlayerPause, {}) : /*#__PURE__*/ jsx(PlayerPlay, {})
             })
         ]
     });
 };
 
-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 };
+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.8.0",
+  "version": "3.8.2",
   "description": "Grunnmuren components in React",
   "license": "MIT",
   "repository": {
@@ -34,7 +34,7 @@
   },
   "peerDependencies": {
     "react": "^19",
-    "@obosbbl/grunnmuren-tailwind": "^2.4.11"
+    "@obosbbl/grunnmuren-tailwind": "^2.4.12"
   },
   "scripts": {
     "build": "bunchee"