@obosbbl/grunnmuren-react 3.4.0 → 3.4.1

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

@@ -253,7 +253,7 @@ function ErrorMessage(props) {
 function Label(props) {
     const { children, className, ...restProps } = props;
     return /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Label, {
-        className: cva.cx(className, 'font-semibold leading-7'),
+        className: cva.cx(className, 'font-medium leading-7'),
         ...restProps,
         children: children
     });

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

@@ -251,7 +251,7 @@ function ErrorMessage(props) {
 function Label(props) {
     const { children, className, ...restProps } = props;
     return /*#__PURE__*/ jsx(Label$1, {
-        className: cx(className, 'font-semibold leading-7'),
+        className: cx(className, 'font-medium leading-7'),
         ...restProps,
         children: children
     });

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { DisclosureProps as DisclosureProps$1, ButtonProps as ButtonProps$1, LinkProps as LinkProps$1, ContextValue, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, HeadingProps as HeadingProps$1, ListBoxItemProps, ListBoxSectionProps, ComboBoxProps, FileTriggerProps as FileTriggerProps$1, RouterProvider, TextProps, LabelProps, DialogProps as DialogProps$1, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps as ModalOverlayProps$1, NumberFieldProps as NumberFieldProps$1, ProgressBarProps as ProgressBarProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SelectProps as SelectProps$1, ColumnResizerProps, TableProps as TableProps$1, TableBodyProps as TableBodyProps$1, CellProps, ColumnProps, ResizableTableContainerProps, TableHeaderProps as TableHeaderProps$1, RowProps, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TagProps as TagProps$1, TextFieldProps as TextFieldProps$1 } from 'react-aria-components';
+import { DisclosureProps as DisclosureProps$1, ButtonProps as ButtonProps$1, LinkProps as LinkProps$1, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, ContextValue, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, HeadingProps as HeadingProps$1, ListBoxItemProps, ListBoxSectionProps, ComboBoxProps, FileTriggerProps as FileTriggerProps$1, RouterProvider, TextProps, LabelProps, DialogProps as DialogProps$1, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps as ModalOverlayProps$1, NumberFieldProps as NumberFieldProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SelectProps as SelectProps$1, ColumnResizerProps, TableProps as TableProps$1, TableBodyProps as TableBodyProps$1, CellProps, ColumnProps, ResizableTableContainerProps, TableHeaderProps as TableHeaderProps$1, RowProps, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TagProps as TagProps$1, TextFieldProps as TextFieldProps$1 } from 'react-aria-components';
 export { ListBoxItemProps as ComboboxItemProps, DisclosureGroup, DisclosureGroupProps, Form, Group, LabelProps, ListBoxItemProps as SelectItemProps } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
@@ -131,7 +131,6 @@ declare const badgeVariants: (props?: ({
 })) | undefined) => string;
 declare function Badge(props: BadgeProps): react_jsx_runtime.JSX.Element;
 
-declare const _LinkContext: react.Context<ContextValue<Partial<LinkProps>, HTMLAnchorElement>>;
 declare const linkVariants: (props?: (((VariantProps<(props?: ({
     animateIcon?: "right" | "left" | "down" | "up" | "up-right" | undefined;
 } & ({
@@ -154,10 +153,11 @@ declare const linkVariants: (props?: (((VariantProps<(props?: ({
     className?: cva.ClassValue;
 })) | undefined) => string;
 type LinkProps = VariantProps<typeof linkVariants> & LinkProps$1 & React.RefAttributes<HTMLAnchorElement> & {
-    /** @private Used internally for slotted components */
-    _innerWrapper?: (props: LinkProps$1) => LinkProps['children'];
+    children?: React.ReactNode;
+    /** @private Internal use */
+    '~iconRight'?: React.ReactNode;
 };
-declare const Link: ({ ref: _ref, animateIcon, ..._props }: LinkProps) => react_jsx_runtime.JSX.Element;
+declare const Link: ({ animateIcon, children, className, "~iconRight": iconRight, ...props }: LinkProps) => react_jsx_runtime.JSX.Element;
 
 type BreadcrumbProps = {
     /** Additional CSS className for the element. */
@@ -525,18 +525,27 @@ declare function ErrorMessage(props: ErrorMessageProps): react_jsx_runtime.JSX.E
 
 declare function Label(props: LabelProps): react_jsx_runtime.JSX.Element;
 
-type LinkListContainerProps = React.HTMLProps<HTMLDivElement> & {
+declare const linkListContainerVariants: (props?: ({
+    layout?: "stack" | "grid" | undefined;
+} & ({
+    class?: cva.ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: cva.ClassValue;
+})) | undefined) => string;
+type LinkListContainerProps = VariantProps<typeof linkListContainerVariants> & React.HTMLProps<HTMLDivElement> & {
     children: JSX.Element | JSX.Element[];
 };
-declare const LinkListContainer: ({ className, ...restProps }: LinkListContainerProps) => react_jsx_runtime.JSX.Element;
+declare const LinkListContainer: ({ className, layout, ...props }: LinkListContainerProps) => react_jsx_runtime.JSX.Element;
 type LinkListProps = React.HTMLProps<HTMLUListElement> & {
     children: JSX.Element | JSX.Element[];
 };
-declare const LinkList: (props: LinkListProps) => react_jsx_runtime.JSX.Element;
+declare const LinkList: ({ className, ...restProps }: LinkListProps) => react_jsx_runtime.JSX.Element;
 type LinkListItemProps = React.HTMLProps<HTMLLIElement> & {
     children: ReactNode;
 };
-declare const LinkListItem: (props: LinkListItemProps) => react_jsx_runtime.JSX.Element;
+declare const LinkListItem: ({ children, className, ...props }: LinkListItemProps) => react_jsx_runtime.JSX.Element;
 
 type DialogTriggerProps = DialogTriggerProps$1;
 declare const DialogTrigger: (props: DialogTriggerProps) => react_jsx_runtime.JSX.Element;
@@ -588,13 +597,6 @@ type NumberFieldProps = {
 } & Omit<NumberFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'hideStepper'>;
 declare function NumberField(props: NumberFieldProps): react_jsx_runtime.JSX.Element;
 
-type ProgressBarProps = ProgressBarProps$1;
-type ProgressBarValueTextProps = Omit<HTMLProps<HTMLSpanElement>, 'children'> & {
-    className?: string;
-};
-declare const ProgressBarValueText: ({ className, ...restProps }: ProgressBarValueTextProps) => react_jsx_runtime.JSX.Element;
-declare const ProgressBar: ({ children, className, ...restProps }: ProgressBarProps) => react_jsx_runtime.JSX.Element;
-
 type RadioProps = {
     children: React.ReactNode;
     /** Additional CSS className for the element. */
@@ -644,6 +646,31 @@ type SelectProps<T extends object> = {
 } & Omit<SelectProps$1<T>, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
 declare function Select<T extends object>(props: SelectProps<T>): react_jsx_runtime.JSX.Element;
 
+type StepperProps = HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactNode;
+    /** The active step, zero indexed.  */
+    activeStep: number;
+    /** 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;
+type StepProps = HTMLProps<HTMLLIElement> & {
+    /**
+     * The state fo the step, whether the step is completed or not.
+     */
+    state?: 'completed';
+    /**
+     * Whether the step is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /** The current progress of the step, between 0 and 100. */
+    progress?: number;
+    /** @private */
+    '~stepIndex'?: number;
+};
+declare const Step: ({ isDisabled, state, children, "~stepIndex": stepIndex, progress, ...restProps }: StepProps) => react_jsx_runtime.JSX.Element;
+
 type TableProps = Omit<TableProps$1, 'aria-label' | 'aria-labelledby'> & RefAttributes<HTMLTableElement> & {
     /**
      * Visual variant of the table
@@ -842,5 +869,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, LinkList, LinkListContainer, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, 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, Link as UNSAFE_Link, Modal as UNSAFE_Modal, ProgressBar as UNSAFE_ProgressBar, ProgressBarValueText as UNSAFE_ProgressBarValueText, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, TabPanel as UNSAFE_TabPanel, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, TableContainer as UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Tabs as UNSAFE_Tabs, VideoLoop, _LinkContext, _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, LinkListItemProps, LinkListProps, Locale, MediaProps, NumberFieldProps, RadioGroupProps, RadioProps, SelectProps, 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, DialogProps as UNSAFE_DialogProps, DialogTriggerProps as UNSAFE_DialogTriggerProps, FileUploadProps as UNSAFE_FileUploadProps, HeroContextValue as UNSAFE_HeroContextValue, HeroProps as UNSAFE_HeroProps, LinkProps as UNSAFE_LinkProps, ModalProps as UNSAFE_ModalProps, ProgressBarProps as UNSAFE_ProgressBarProps, ProgressBarValueTextProps as UNSAFE_ProgressBarValueTextProps, TabListProps as UNSAFE_TabListProps, TabPanelProps as UNSAFE_TabPanelProps, TabProps as UNSAFE_TabProps, TableBodyProps as UNSAFE_TableBodyProps, TableCellProps as UNSAFE_TableCellProps, TableColumnProps as UNSAFE_TableColumnProps, TableColumnResizerProps as UNSAFE_TableColumnResizerProps, TableContainerProps as UNSAFE_TableContainerProps, TableHeaderProps as UNSAFE_TableHeaderProps, TableProps as UNSAFE_TableProps, TableRowProps as UNSAFE_TableRowProps, TabsProps as UNSAFE_TabsProps };
+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, LinkList, LinkListContainer, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, 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, Link as UNSAFE_Link, Modal as UNSAFE_Modal, Step as UNSAFE_Step, Stepper as UNSAFE_Stepper, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, TabPanel as UNSAFE_TabPanel, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, TableContainer as UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Tabs as UNSAFE_Tabs, 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, LinkListItemProps, LinkListProps, Locale, MediaProps, NumberFieldProps, RadioGroupProps, RadioProps, SelectProps, 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, DialogProps as UNSAFE_DialogProps, DialogTriggerProps as UNSAFE_DialogTriggerProps, FileUploadProps as UNSAFE_FileUploadProps, HeroContextValue as UNSAFE_HeroContextValue, HeroProps as UNSAFE_HeroProps, LinkProps as UNSAFE_LinkProps, ModalProps as UNSAFE_ModalProps, StepProps as UNSAFE_StepProps, StepperProps as UNSAFE_StepperProps, TabListProps as UNSAFE_TabListProps, TabPanelProps as UNSAFE_TabPanelProps, TabProps as UNSAFE_TabProps, TableBodyProps as UNSAFE_TableBodyProps, TableCellProps as UNSAFE_TableCellProps, TableColumnProps as UNSAFE_TableColumnProps, TableColumnResizerProps as UNSAFE_TableColumnResizerProps, TableContainerProps as UNSAFE_TableContainerProps, TableHeaderProps as UNSAFE_TableHeaderProps, TableProps as UNSAFE_TableProps, TableRowProps as UNSAFE_TableRowProps, TabsProps as UNSAFE_TabsProps };

package/dist/index.mjs

@@ -1,10 +1,10 @@
 'use client';
-import { useContextProps, DisclosureContext, DisclosureGroupStateContext, Provider, ButtonContext as ButtonContext$1, DEFAULT_SLOT, Button as Button$1, useLocale, Link as Link$1, Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, GroupContext, Text, CheckboxContext, Checkbox as Checkbox$1, FieldError, Label as Label$1, CheckboxGroup as CheckboxGroup$1, Header, ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, ListBox as ListBox$1, ComboBox, Group, Input, Popover, useSlottedContext, FormContext, FieldErrorContext, LabelContext, InputContext, I18nProvider, RouterProvider, Dialog as Dialog$1, DialogTrigger as DialogTrigger$1, Modal as Modal$1, ModalOverlay, NumberField as NumberField$1, ProgressBar as ProgressBar$1, Radio as Radio$1, RadioGroup as RadioGroup$1, Select as Select$1, SelectValue, ColumnResizer, Table as Table$1, TableBody as TableBody$1, Cell, Column, ResizableTableContainer, TableHeader as TableHeader$1, Row, Tab as Tab$1, TabListStateContext, TabList as TabList$1, TabPanel as TabPanel$1, Tabs as Tabs$1, TagGroup as TagGroup$1, TagList as TagList$1, Tag as Tag$1, TextField as TextField$1, TextArea as TextArea$1 } from 'react-aria-components';
+import { useContextProps, DisclosureContext, DisclosureGroupStateContext, Provider, ButtonContext as ButtonContext$1, DEFAULT_SLOT, Button as Button$1, useLocale, Link as Link$1, Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, GroupContext, Text, CheckboxContext, Checkbox as Checkbox$1, FieldError, Label as Label$1, CheckboxGroup as CheckboxGroup$1, Header, ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, ListBox as ListBox$1, ComboBox, Group, Input, Popover, useSlottedContext, FormContext, FieldErrorContext, LabelContext, InputContext, I18nProvider, RouterProvider, Dialog as Dialog$1, DialogTrigger as DialogTrigger$1, Modal as Modal$1, ModalOverlay, NumberField as NumberField$1, Radio as Radio$1, RadioGroup as RadioGroup$1, Select as Select$1, SelectValue, ProgressBar as ProgressBar$1, LinkContext, ColumnResizer, Table as Table$1, TableBody as TableBody$1, Cell, Column, ResizableTableContainer, TableHeader as TableHeader$1, Row, Tab as Tab$1, TabListStateContext, TabList as TabList$1, TabPanel as TabPanel$1, Tabs as Tabs$1, TagGroup as TagGroup$1, TagList as TagList$1, Tag as Tag$1, TextField as TextField$1, TextArea as TextArea$1 } from 'react-aria-components';
 export { DisclosureGroup, 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 } from 'react';
-import { ChevronDown, Error, Warning, CheckCircle, InfoCircle, Close, User, ChevronLeft, ChevronRight, LoadingSpinner, Check, Trash, ArrowRight, Download, LinkExternal, PlayerPause, PlayerPlay } from '@obosbbl/grunnmuren-icons-react';
+import { createContext, useContext, useId, useRef, Children, useState, useEffect, useMemo, useCallback, isValidElement, cloneElement, use } from 'react';
+import { ChevronDown, Error, Warning, CheckCircle, InfoCircle, Close, User, ChevronLeft, ChevronRight, LoadingSpinner, Check, Trash, Download, LinkExternal, ArrowRight, Edit, PlayerPause, PlayerPlay } from '@obosbbl/grunnmuren-icons-react';
 import { filterDOMProps, mergeProps, mergeRefs, useObjectRef, useFormReset, useUpdateEffect } from '@react-aria/utils';
 import { useFocusRing, useDisclosure, useProgressBar, useDateFormatter, useField } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
@@ -361,6 +361,16 @@ const translations$1 = {
         nb: '(ekstern lenke)',
         sv: '(extern länk)',
         en: '(external link)'
+    },
+    stepper: {
+        nb: 'Steg',
+        sv: 'Steg',
+        en: 'Steps'
+    },
+    completed: {
+        nb: 'Fullført',
+        sv: 'Slutförd',
+        en: 'Completed'
     }
 };
 
@@ -619,37 +629,27 @@ function Badge(props) {
     });
 }
 
-const _LinkContext = /*#__PURE__*/ createContext({});
 const linkVariants = compose(animateIconVariants, cva({
-    base: 'inline-flex cursor-pointer items-center gap-1 font-medium hover:no-underline focus-visible:outline-current focus-visible:outline-focus-offset data-disabled:cursor-default'
+    base: 'inline-flex cursor-pointer items-center gap-1 font-medium hover:no-underline focus-visible:outline-current focus-visible:outline-focus-offset data-disabled:cursor-default data-disabled:font-normal data-disabled:no-underline'
 }));
-const Link = ({ ref: _ref, animateIcon, ..._props })=>{
-    const [props, ref] = useContextProps(_props, _ref, _LinkContext);
-    const { className, _innerWrapper, children: _children, ...restProps } = props;
+const Link = ({ animateIcon, children, className, '~iconRight': iconRight, ...props })=>{
     const locale = _useLocale();
-    const externalLinkSR = props.rel?.includes('external') ? /*#__PURE__*/ jsx("span", {
-        className: "sr-only",
-        children: translations$1.externalLink[locale]
-    }) : null;
-    const reactNodeChildren = /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            _children,
-            externalLinkSR
-        ]
-    });
-    const children = _innerWrapper ? _innerWrapper({
-        ...restProps,
-        children: typeof _children === 'function' ? (values)=>_children(values) : reactNodeChildren
-    }) : reactNodeChildren;
-    return /*#__PURE__*/ jsx(Link$1, {
-        ...restProps,
-        ref: ref,
+    const externalLinkText = translations$1.externalLink[locale];
+    return /*#__PURE__*/ jsxs(Link$1, {
+        ...props,
         "data-slot": "link",
         className: linkVariants({
             className,
             animateIcon
         }),
-        children: children
+        children: [
+            children,
+            props.rel?.includes('external') && /*#__PURE__*/ jsx("span", {
+                className: "sr-only",
+                children: externalLinkText
+            }),
+            iconRight
+        ]
     });
 };
 
@@ -1628,7 +1628,7 @@ function Description(props) {
 function Label(props) {
     const { children, className, ...restProps } = props;
     return /*#__PURE__*/ jsx(Label$1, {
-        className: cx(className, 'font-semibold leading-7'),
+        className: cx(className, 'font-medium leading-7'),
         ...restProps,
         children: children
     });
@@ -2111,61 +2111,77 @@ function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
     });
 }
 
-// Sets the correct icons for each link in the link list
-const _LinkProvider = ({ children })=>/*#__PURE__*/ jsx(Provider, {
-        values: [
-            [
-                _LinkContext,
-                {
-                    _innerWrapper: ({ children, download, rel })=>(values)=>{
-                            let Icon = ArrowRight;
-                            if (download) {
-                                Icon = Download;
-                            } else if (rel?.includes('external')) {
-                                Icon = LinkExternal;
-                            }
-                            return /*#__PURE__*/ jsxs(Fragment, {
-                                children: [
-                                    typeof children === 'function' ? children({
-                                        ...values,
-                                        defaultChildren: null
-                                    }) : children,
-                                    /*#__PURE__*/ jsx(Icon, {})
-                                ]
-                            });
-                        }
-                }
-            ]
-        ],
-        children: children
-    });
-const LinkListContainer = ({ className, ...restProps })=>// Dual providers makes for easier typing and more readable code
-    /*#__PURE__*/ jsx(Provider, {
+const linkStyles = [
+    '*:data-[slot=link]:flex',
+    '*:data-[slot=link]:w-full',
+    '*:data-[slot=link]:justify-between',
+    '*:data-[slot=link]:gap-x-2',
+    '*:data-[slot=link]:py-3.5',
+    '*:data-[slot=link]:no-underline',
+    '*:data-[slot=link]:focus-visible:outline-focus'
+];
+const linkListContainerVariants = cva({
+    base: [
+        '*:data-[slot=link-list]:overflow-visible',
+        '*:data-[slot=heading]:p-1.25',
+        '*:data-[slot=heading]:*:data-[slot=link]:py-2.25',
+        '**:[svg]:text-base',
+        'has-data-[slot=heading]:*:data-[slot=link-list]:overflow-visible',
+        '*:data-[slot=heading]:has-not:*:data-[slot=link]:my-2.25'
+    ],
+    variants: {
+        layout: {
+            stack: null,
+            grid: '@container'
+        }
+    },
+    defaultVariants: {
+        layout: 'stack'
+    }
+});
+const LinkListContainer = ({ className, layout = 'stack', ...props })=>/*#__PURE__*/ jsx(Provider, {
         values: [
             [
                 HeadingContext,
                 {
-                    size: 'm'
+                    size: 'm',
+                    className: cx(linkStyles)
                 }
             ]
         ],
-        children: /*#__PURE__*/ jsx(_LinkProvider, {
-            children: /*#__PURE__*/ jsx("div", {
-                className: cx(className, 'link-list-container'),
-                ...restProps
-            })
-        })
-    });
-const LinkList = (props)=>/*#__PURE__*/ jsx(_LinkProvider, {
-        children: /*#__PURE__*/ jsx("ul", {
+        children: /*#__PURE__*/ jsx("div", {
             ...props,
-            "data-slot": "link-list"
+            className: linkListContainerVariants({
+                className,
+                layout
+            }),
+            "data-layout": layout,
+            "data-slot": "link-list-container"
         })
     });
-const LinkListItem = (props)=>/*#__PURE__*/ jsx("li", {
+const LinkList = ({ className, ...restProps })=>/*#__PURE__*/ jsx("ul", {
+        ...restProps,
+        "data-slot": "link-list",
+        className: cx(/**
+       * Hides dividers at the top of the list (overflow-y)
+       * while preventing arrow icons from overflowing container when animated to the right (overflow-x)
+       */ 'grid min-w-fit auto-rows-max gap-y-px overflow-hidden', className)
+    });
+const LinkListItem = ({ children, className, ...props })=>{
+    const child = Children.only(children);
+    const childProps = /*#__PURE__*/ isValidElement(child) ? child.props : {};
+    const animateIcon = childProps.animateIcon || childProps.download ? 'down' : childProps.rel?.includes('external') ? 'up-right' : 'right';
+    const iconRight = childProps['~iconRight'] || childProps.download ? /*#__PURE__*/ jsx(Download, {}) : childProps.rel?.includes('external') ? /*#__PURE__*/ jsx(LinkExternal, {}) : /*#__PURE__*/ jsx(ArrowRight, {});
+    return /*#__PURE__*/ jsx("li", {
         ...props,
-        "data-slot": "link-list-item"
+        className: cx(className, 'after:-top-px relative p-1.25 after:absolute after:right-0 after:left-0 after:h-px after:w-full after:bg-gray-light', '*:data-[slot=link]:paragraph', ...linkStyles),
+        "data-slot": "link-list-item",
+        children: /*#__PURE__*/ isValidElement(child) && /*#__PURE__*/ cloneElement(child, {
+            animateIcon,
+            '~iconRight': iconRight
+        })
     });
+};
 
 const DialogTrigger = (props)=>/*#__PURE__*/ jsx(DialogTrigger$1, {
         ...props
@@ -2314,44 +2330,6 @@ function NumberField(props) {
     });
 }
 
-const _ProgressBarValueTextContext = /*#__PURE__*/ createContext(undefined);
-const _ProgressBarValueTextProvider = _ProgressBarValueTextContext.Provider;
-const ProgressBarValueText = ({ className, ...restProps })=>{
-    const value = useContext(_ProgressBarValueTextContext);
-    return /*#__PURE__*/ jsx("span", {
-        ...restProps,
-        className: cx(className, 'px-2 leading-7'),
-        "data-slot": "progress-bar-value-text",
-        children: value
-    });
-};
-const ProgressBar = ({ children, className, ...restProps })=>{
-    return /*#__PURE__*/ jsx(ProgressBar$1, {
-        "data-slot": "progress-bar",
-        ...restProps,
-        className: cx(className, 'max-w-full'),
-        children: ({ percentage, valueText, ...restArgs })=>/*#__PURE__*/ jsxs(_ProgressBarValueTextProvider, {
-                value: valueText,
-                children: [
-                    typeof children === 'function' ? children({
-                        percentage,
-                        valueText,
-                        ...restArgs
-                    }) : children,
-                    /*#__PURE__*/ jsx("div", {
-                        className: "relative h-0.75 rounded bg-gray-light",
-                        children: /*#__PURE__*/ jsx("div", {
-                            className: "h-0.75 rounded bg-blue-dark transition-all duration-300 ease-in-out",
-                            style: {
-                                width: `${percentage}%`
-                            }
-                        })
-                    })
-                ]
-            })
-    });
-};
-
 const defaultClasses = cx([
     '-ml-2.5 relative inline-flex max-w-fit cursor-pointer items-start gap-4 py-2.5 pl-2.5 leading-7',
     // the radio button itself
@@ -2461,18 +2439,47 @@ function Select(props) {
     });
 }
 
-function ScrollButton({ direction, onClick, isVisible, hasScrollingOccurred, className, iconClassName }) {
+const _ProgressBarValueTextContext = /*#__PURE__*/ createContext(undefined);
+const _ProgressBarValueTextProvider = _ProgressBarValueTextContext.Provider;
+const ProgressBar = ({ children, className, ...restProps })=>{
+    return /*#__PURE__*/ jsx(ProgressBar$1, {
+        "data-slot": "progress-bar",
+        ...restProps,
+        className: cx(className, 'max-w-full'),
+        children: ({ percentage, valueText, ...restArgs })=>/*#__PURE__*/ jsxs(_ProgressBarValueTextProvider, {
+                value: valueText,
+                children: [
+                    typeof children === 'function' ? children({
+                        percentage,
+                        valueText,
+                        ...restArgs
+                    }) : children,
+                    /*#__PURE__*/ jsx("div", {
+                        className: "relative rounded border border-blue-dark bg-gray-light",
+                        children: /*#__PURE__*/ jsx("div", {
+                            className: "h-1 rounded bg-blue-dark transition-all duration-300 ease-in-out",
+                            style: {
+                                width: `${percentage}%`
+                            }
+                        })
+                    })
+                ]
+            })
+    });
+};
+
+function ScrollButton({ direction, onClick, isVisible, hasScrollingOccurred, className }) {
     const Icon = direction === 'left' ? ChevronLeft : ChevronRight;
     return(// biome-ignore lint/a11y/useKeyWithClickEvents: This button is only for mouse interaction to help users scroll. Keyboard and screen reader users can navigate the content directly without needing these scroll helpers.
     // biome-ignore lint/a11y/noStaticElementInteractions: This button is only for mouse interaction to help users scroll. Keyboard and screen reader users can navigate the content directly without needing these scroll helpers.
     /*#__PURE__*/ jsx("div", {
         onClick: onClick,
         className: cx(// Base scroll button styling
-        'flex cursor-pointer items-center justify-center', 'text-black hover:bg-white', direction === 'left' ? 'bg-[linear-gradient(90deg,white,white_calc(100%-10px),transparent)]' : 'bg-[linear-gradient(90deg,transparent,white_calc(10px),white)]', // Animation
+        'flex cursor-pointer items-center justify-center', 'absolute top-0 size-11', 'group/scroll-button text-black', direction === 'left' ? 'bg-[linear-gradient(90deg,white,white_calc(100%-10px),transparent)]' : 'bg-[linear-gradient(90deg,transparent,white_calc(10px),white)]', // Animation
         hasScrollingOccurred && 'duration-100 ease-in motion-safe:transition-transform', // Hide/show animation
         direction === 'left' ? !isVisible && '-translate-x-full pointer-events-none' : !isVisible && 'pointer-events-none translate-x-full', direction === 'left' ? '-left-3' : '-right-3', className),
         children: /*#__PURE__*/ jsx(Icon, {
-            className: iconClassName
+            className: cx('motion-safe:transition-all', direction === 'left' ? 'group-hover/scroll-button:-translate-x-1' : 'group-hover/scroll-button:translate-x-1')
         })
     }));
 }
@@ -2529,6 +2536,132 @@ function ScrollButton({ direction, onClick, isVisible, hasScrollingOccurred, cla
     };
 }
 
+const StepperContext = /*#__PURE__*/ createContext({
+    activeStep: 0,
+    stepsCount: 0
+});
+const Stepper = ({ children, activeStep, onStepChange, ...restProps })=>{
+    const locale = _useLocale();
+    const stepsCount = Children.count(children);
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        startIndex: activeStep,
+        dragFree: true,
+        breakpoints: {
+            // disable the carousel on large screens
+            '(width >= 64rem)': {
+                active: false
+            }
+        }
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        ...restProps,
+        "data-slot": "stepper-container",
+        ref: emblaRef,
+        children: [
+            /*#__PURE__*/ jsx("ol", {
+                "aria-label": translations$1.stepper[locale],
+                "data-slot": "stepper",
+                children: /*#__PURE__*/ jsx(StepperContext.Provider, {
+                    value: {
+                        onStepChange,
+                        activeStep,
+                        stepsCount
+                    },
+                    children: Children.map(children, (child, index)=>{
+                        return /*#__PURE__*/ isValidElement(child) && /*#__PURE__*/ cloneElement(child, {
+                            '~stepIndex': index
+                        });
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(MobileScrollButtons, {
+                emblaApi: emblaApi
+            })
+        ]
+    });
+};
+const MobileScrollButtons = ({ emblaApi })=>{
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
+    useEffect(()=>{
+        if (!emblaApi) {
+            return;
+        }
+        const handleSlidesInView = ()=>{
+            setCanScrollLeft(emblaApi.canScrollPrev());
+            setCanScrollRight(emblaApi.canScrollNext());
+        };
+        emblaApi.on('slidesInView', handleSlidesInView);
+        return ()=>{
+            emblaApi.off('slidesInView', handleSlidesInView);
+        };
+    }, [
+        emblaApi
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(ScrollButton, {
+                className: "lg:hidden",
+                direction: "left",
+                onClick: ()=>emblaApi?.scrollPrev(),
+                isVisible: canScrollLeft,
+                hasScrollingOccurred: false
+            }),
+            /*#__PURE__*/ jsx(ScrollButton, {
+                className: "lg:hidden",
+                direction: "right",
+                isVisible: canScrollRight,
+                onClick: ()=>emblaApi?.scrollNext(),
+                hasScrollingOccurred: false
+            })
+        ]
+    });
+};
+const Step = ({ isDisabled = false, state, children, '~stepIndex': stepIndex, progress, ...restProps })=>{
+    const locale = _useLocale();
+    const id = useId();
+    const { onStepChange, activeStep, stepsCount } = use(StepperContext);
+    const isLastStep = stepIndex === stepsCount - 1;
+    const isCurrent = stepIndex === activeStep;
+    const iconText = state === 'completed' ? translations$1.completed[locale] : undefined;
+    const icon = isCurrent ? /*#__PURE__*/ jsx(Edit, {
+        "aria-label": iconText
+    }) : state === 'completed' && /*#__PURE__*/ jsx(Check, {
+        "aria-label": iconText
+    });
+    return /*#__PURE__*/ jsx("li", {
+        ...restProps,
+        "data-slot": "step",
+        "data-state": state,
+        "data-current": isCurrent ? true : undefined,
+        "data-disabled": isDisabled ? true : undefined,
+        id: id,
+        children: /*#__PURE__*/ jsxs(Provider, {
+            values: [
+                [
+                    LinkContext,
+                    {
+                        // @ts-expect-error this works even though it's a type error
+                        'aria-current': isCurrent ? 'step' : undefined,
+                        isDisabled,
+                        className: 'underline',
+                        onPress: ()=>onStepChange?.(stepIndex)
+                    }
+                ]
+            ],
+            children: [
+                icon,
+                children,
+                !isLastStep && /*#__PURE__*/ jsx(ProgressBar, {
+                    "aria-labelledby": id,
+                    // Make sure that if the step is completed, the progress value is 100%
+                    value: state === 'completed' ? 100 : progress
+                })
+            ]
+        })
+    });
+};
+
 const tableVariants = cva({
     base: [
         'relative'
@@ -2578,22 +2711,6 @@ const TableScrollContainerContext = /*#__PURE__*/ createContext({
         children: /*#__PURE__*/ jsxs("div", {
             className: "relative overflow-hidden",
             children: [
-                /*#__PURE__*/ jsx(ScrollButton, {
-                    direction: "left",
-                    onClick: ()=>handleScroll('left'),
-                    isVisible: canScrollLeft,
-                    hasScrollingOccurred: hasScrollingOccurred,
-                    className: "-translate-y-1/2 absolute top-5 z-10 h-11 w-11",
-                    iconClassName: "h-5 w-5"
-                }),
-                /*#__PURE__*/ jsx(ScrollButton, {
-                    direction: "right",
-                    onClick: ()=>handleScroll('right'),
-                    isVisible: canScrollRight,
-                    hasScrollingOccurred: hasScrollingOccurred,
-                    className: "-translate-y-1/2 absolute top-5 z-10 h-11 w-11",
-                    iconClassName: "h-5 w-5"
-                }),
                 /*#__PURE__*/ jsx("div", {
                     ref: scrollContainerRef,
                     className: "scrollbar-hidden overflow-x-auto",
@@ -2606,6 +2723,18 @@ const TableScrollContainerContext = /*#__PURE__*/ createContext({
                         "data-variant": variant,
                         children: children
                     })
+                }),
+                /*#__PURE__*/ jsx(ScrollButton, {
+                    direction: "left",
+                    onClick: ()=>handleScroll('left'),
+                    isVisible: canScrollLeft,
+                    hasScrollingOccurred: hasScrollingOccurred
+                }),
+                /*#__PURE__*/ jsx(ScrollButton, {
+                    direction: "right",
+                    onClick: ()=>handleScroll('right'),
+                    isVisible: canScrollRight,
+                    hasScrollingOccurred: hasScrollingOccurred
                 })
             ]
         })
@@ -2793,17 +2922,13 @@ const tabsVariants = cva({
                 direction: "left",
                 onClick: onPrev,
                 isVisible: canScrollLeft,
-                hasScrollingOccurred: hasScrollingOccurred,
-                className: "absolute bottom-0.25 size-11",
-                iconClassName: "mt-0.25 h-6 w-full text-black"
+                hasScrollingOccurred: hasScrollingOccurred
             }),
             /*#__PURE__*/ jsx(ScrollButton, {
                 direction: "right",
                 onClick: onNext,
                 isVisible: canScrollRight,
-                hasScrollingOccurred: hasScrollingOccurred,
-                className: "absolute bottom-0.25 size-11",
-                iconClassName: "mt-0.25 h-6 w-full text-black"
+                hasScrollingOccurred: hasScrollingOccurred
             })
         ]
     });
@@ -2814,7 +2939,7 @@ const tabsVariants = cva({
     const { className, children, ...restProps } = props;
     return /*#__PURE__*/ jsx(Tab$1, {
         ...restProps,
-        className: cx(className, 'data-focus-visible:-outline-offset-10 data-focus-visible:outline-2 data-focus-visible:outline-black', 'description cursor-pointer border-transparent px-4 py-2 font-light', // Transition
+        className: cx(className, 'data-focus-visible:-outline-offset-10 data-focus-visible:outline-2 data-focus-visible:outline-black', 'description h-11 cursor-pointer border-transparent px-4 py-[0.71875rem] font-light', // Transition
         'transition-colors duration-150 ease-out', // TODO: Should disabled tabs just be hidden?
         'data-disabled:cursor-not-allowed data-disabled:opacity-50', // Selection
         'data-selected:font-medium data-selected:text-blue-dark', // Hover with layout shift prevention using pseudo-element
@@ -3075,4 +3200,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, LinkList, LinkListContainer, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, 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, Link as UNSAFE_Link, Modal as UNSAFE_Modal, ProgressBar as UNSAFE_ProgressBar, ProgressBarValueText as UNSAFE_ProgressBarValueText, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, TabPanel as UNSAFE_TabPanel, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, TableContainer as UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Tabs as UNSAFE_Tabs, VideoLoop, _LinkContext, _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, Label, LinkList, LinkListContainer, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, 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, Link as UNSAFE_Link, Modal as UNSAFE_Modal, Step as UNSAFE_Step, Stepper as UNSAFE_Stepper, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, TabPanel as UNSAFE_TabPanel, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, TableContainer as UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Tabs as UNSAFE_Tabs, VideoLoop, _useLocale as useLocale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"