@altinn/altinn-components 0.15.5 → 0.17.0

package/dist/types/lib/components/Button/ButtonIcon.d.ts

@@ -1,7 +1,8 @@
-import { IconName } from '../Icon';
+import { SvgElement } from '../Icon';
 import { ButtonSize } from './ButtonBase';
 export interface ButtonIconProps {
-    icon: IconName;
+    icon: SvgElement;
+    iconAltText?: string;
     size: ButtonSize;
 }
-export declare const ButtonIcon: ({ size, icon }: ButtonIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonIcon: ({ size, icon, iconAltText }: ButtonIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Button/ComboButton.d.ts

@@ -1,10 +1,12 @@
 import { MouseEventHandler } from 'react';
-import { IconName } from '../Icon';
+import { SvgElement } from '../Icon';
 import { ButtonBaseProps } from './ButtonBase';
 export interface ComboButtonProps extends Omit<ButtonBaseProps, 'onClick'> {
-    icon: IconName;
+    icon: SvgElement;
+    iconAltText?: string;
+    ariaLabel?: string;
     onIconClick?: MouseEventHandler<HTMLButtonElement>;
     onLabelClick?: MouseEventHandler<HTMLButtonElement>;
     disabled?: boolean;
 }
-export declare const ComboButton: ({ variant, color, size, selected, icon, children, className, onLabelClick, onIconClick, }: ComboButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ComboButton: ({ variant, color, size, selected, icon, children, className, ariaLabel, onLabelClick, onIconClick, }: ComboButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Button/IconButton.d.ts

@@ -1,8 +1,9 @@
 import { MouseEventHandler } from 'react';
-import { IconName } from '../Icon';
+import { SvgElement } from '../Icon';
 import { ButtonColor, ButtonSize, ButtonVariant } from './ButtonBase';
 export interface IconButtonProps {
-    icon: IconName;
+    icon: SvgElement;
+    iconAltText: string;
     color?: ButtonColor;
     size?: ButtonSize;
     iconSize?: ButtonSize;
@@ -11,4 +12,4 @@ export interface IconButtonProps {
     onClick?: MouseEventHandler;
     dataTestId?: string;
 }
-export declare const IconButton: ({ variant, size, icon, color, iconSize, className, onClick, dataTestId, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconButton: ({ variant, size, icon, color, iconSize, className, onClick, dataTestId, iconAltText, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Dialog/DialogListItem.stories.d.ts

@@ -3,6 +3,7 @@ import { DialogListItem, DialogListItemProps } from './DialogListItem';
 declare const meta: Meta<typeof DialogListItem>;
 export default meta;
 export declare const Default: {
+    render: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
     args: {};
 };
 export declare const GroupedAvatars: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
@@ -11,7 +12,7 @@ export declare const SeenBy: (args: DialogListItemProps) => import("react/jsx-ru
 export declare const InboxStatuses: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DraftAndSent: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ArchivedAndTrashed: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Statuses: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Statuses: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element[];
 declare const Loading: {
     (args: DialogListItemProps): import("react/jsx-runtime").JSX.Element;
     parameters: {
@@ -24,5 +25,5 @@ export declare const DueAt: (args: DialogListItemProps) => import("react/jsx-run
 export declare const Attachments: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TouchedBy: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TextLength: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Selectable: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Sizes: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Selectable: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element[];
+export declare const Sizes: (args: DialogListItemProps) => import("react/jsx-runtime").JSX.Element[];

package/dist/types/lib/components/Dialog/DialogSeenBy.d.ts

@@ -11,7 +11,9 @@ export interface DialogSeenByProps {
     label: string;
     /** Render element as a link or button to display more informastion */
     as?: ElementType;
+    /** OnClick handler */
     onClick?: MouseEventHandler;
+    /** Optional link url */
     href?: string;
 }
 /**

package/dist/types/lib/components/Dropdown/DrawerHeader.d.ts

@@ -2,6 +2,7 @@ import { MouseEventHandler } from 'react';
 export interface DrawerHeaderProps {
     className?: string;
     title?: string;
+    closeIconAltText?: string;
     onClose?: MouseEventHandler;
 }
-export declare const DrawerHeader: ({ className, title, onClose }: DrawerHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DrawerHeader: ({ className, title, onClose, closeIconAltText }: DrawerHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Header/HeaderButton.d.ts

@@ -2,7 +2,7 @@ import { ElementType } from 'react';
 import { AvatarProps, AvatarGroupProps } from '../Avatar';
 import { BadgeProps } from '../Badge';
 import { ButtonProps } from '../Button';
-import { IconName } from '../Icon';
+import { SvgElement } from '../Icon';
 export interface HeaderButtonProps extends ButtonProps {
     label?: string;
     avatar?: AvatarProps;
@@ -10,7 +10,7 @@ export interface HeaderButtonProps extends ButtonProps {
     as?: ElementType;
     className?: string;
     expanded?: boolean;
-    icon?: IconName;
+    icon?: SvgElement;
     badge?: BadgeProps | undefined;
     tabIndex?: number;
 }

package/dist/types/lib/components/Icon/Icon.d.ts

@@ -1,15 +1,15 @@
-import { Color, IconName, Size, Theme } from '..';
-export type IconVariant = 'solid' | 'outline';
+import { Color, Size, Theme } from '..';
+export type SvgElement = React.ComponentType<React.SVGProps<SVGSVGElement>>;
 export type IconSize = Size | undefined;
 export type IconColor = Color;
 export type IconTheme = Theme;
 export interface IconProps {
-    name: IconName;
+    svgElement: SvgElement | undefined | null | string;
+    altText?: string;
     loading?: boolean;
     size?: IconSize;
     color?: IconColor;
     theme?: IconTheme;
-    variant?: IconVariant;
     className?: string;
 }
-export declare const Icon: ({ loading, name, size, color, theme, variant, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon: ({ loading, altText, svgElement: SvgElement, size, color, theme, className }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Icon/IconOrAvatar.d.ts

@@ -1,12 +1,12 @@
 import { ReactNode } from 'react';
-import { AvatarGroupProps, AvatarProps, BadgeProps, IconName, IconProps, IconTheme } from '..';
+import { AvatarGroupProps, AvatarProps, BadgeProps, IconProps, IconTheme, SvgElement } from '..';
 export type IconOrAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface IconOrAvatarProps {
     size?: IconOrAvatarSize;
-    icon?: IconProps | IconName | ReactNode;
+    icon?: IconProps | SvgElement | ReactNode;
     iconTheme?: IconTheme;
     avatar?: AvatarProps;
     avatarGroup?: AvatarGroupProps;
     badge?: BadgeProps | undefined;
 }
-export declare const IconOrAvatar: ({ size, icon, iconTheme, avatar, avatarGroup }: IconOrAvatarProps) => import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const IconOrAvatar: ({ size, icon, iconTheme, avatar, avatarGroup }: IconOrAvatarProps) => string | number | true | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;

package/dist/types/lib/components/Icon/index.d.ts

@@ -1,7 +1,5 @@
 export * from './Icon';
-export * from './SvgIcon';
 export * from './CheckboxIcon';
 export * from './RadioIcon';
 export * from './ProgressIcon';
-export * from './iconsMap';
 export * from './IconOrAvatar';

package/dist/types/lib/components/LayoutAction/ActionHeader.d.ts

@@ -2,9 +2,10 @@ import { LayoutActionColor, LayoutActionTheme } from './LayoutAction';
 export interface ActionHeaderProps {
     color?: LayoutActionColor;
     theme?: LayoutActionTheme;
+    dismissIconAltText?: string;
     title: string;
     hidden?: boolean;
     dismissable?: boolean;
     onDismiss?: () => void;
 }
-export declare const ActionHeader: ({ color, theme, hidden, title, dismissable, onDismiss, }: ActionHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionHeader: ({ color, theme, hidden, title, dismissable, dismissIconAltText, onDismiss, }: ActionHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/List/ListBase.stories.d.ts

@@ -4,10 +4,9 @@ declare const meta: {
     component: ({ spacing, children, ...rest }: import('./ListBase').ListBaseProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
-    args: {
-        children: import("react/jsx-runtime").JSX.Element;
-    };
+    args: {};
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const Interactive: Story;
+export declare const NonIteractive: Story;

package/dist/types/lib/components/List/ListItem.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode } from 'react';
 import { AvatarGroupProps, AvatarProps } from '../Avatar';
 import { BadgeProps } from '../Badge';
-import { IconName, IconProps } from '../Icon';
+import { IconProps, SvgElement } from '../Icon';
 import { ListItemBaseProps } from './ListItemBase';
 import { ListItemHeaderProps } from './ListItemHeader';
 export interface ListItemProps extends ListItemBaseProps, ListItemHeaderProps {
@@ -16,7 +16,7 @@ export interface ListItemProps extends ListItemBaseProps, ListItemHeaderProps {
     /** Optional description */
     description?: string;
     /** List item icon */
-    icon?: IconName | IconProps | ReactNode | undefined;
+    icon?: SvgElement | IconProps | ReactNode | undefined;
     /** List item avatar */
     avatar?: AvatarProps;
     /** List item avatarGroup */
@@ -25,6 +25,8 @@ export interface ListItemProps extends ListItemBaseProps, ListItemHeaderProps {
     label?: ReactNode | (() => ReactElement);
     /** Optional badge */
     badge?: BadgeProps | ReactNode | undefined;
+    /** Whether to display the item with a link icon */
+    linkIcon?: boolean;
 }
 export interface ListItemInputProps extends ListItemProps {
     id: string;

package/dist/types/lib/components/List/ListItemBase.d.ts

@@ -1,4 +1,4 @@
-import { ElementType, KeyboardEventHandler, ReactNode } from 'react';
+import { ElementType, HTMLProps, KeyboardEventHandler, ReactNode } from 'react';
 import { Color } from '..';
 export type ListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ListItemVariant = 'solid' | 'dotted';
@@ -6,25 +6,47 @@ export type ListItemShadow = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ListItemColor = Color;
 export type ListItemTheme = 'transparent' | 'default' | 'subtle' | 'surface' | 'base';
 export interface ListItemBaseProps {
+    /** The title of the list item. */
     title?: string;
+    /** If true, the list item is interactive and has a hover state. */
     interactive?: boolean;
+    /** The element type to render as. */
     as?: ElementType;
+    /** The URL to link to if the list item is a link. */
     href?: string;
+    /** Click event handler. */
     onClick?: () => void;
+    /** Key press event handler. */
     onKeyPress?: KeyboardEventHandler;
+    /** The tab index of the list item. */
     tabIndex?: number;
+    /** The color of the list item. */
     color?: ListItemColor;
+    /** The theme of the list item. */
     theme?: ListItemTheme;
+    /** The variant of the list item. */
     variant?: ListItemVariant;
+    /** The size of the list item. */
     size?: ListItemSize;
+    /** The shadow style of the list item. */
     shadow?: ListItemShadow;
+    /** Additional class names for the list item. */
     className?: string;
+    /** If true, the list item shows a loading state. */
     loading?: boolean;
+    /** If true, the list item is disabled. */
     disabled?: boolean;
+    /** If true, the list item is hidden. */
     hidden?: boolean;
+    /** If true, the list item is active. */
     active?: boolean;
+    /** If true, the list item is selected. */
     selected?: boolean;
+    /** If true, the list item is expanded. */
     expanded?: boolean;
+    /** Mouse enter event handler. */
+    onMouseEnter?: HTMLProps<HTMLDivElement>['onMouseEnter'];
+    /** The children elements of the list item. */
     children?: ReactNode;
 }
-export declare const ListItemBase: ({ title, interactive, as, href, onClick, onKeyPress, tabIndex, size, variant, color, theme, shadow, loading, disabled, hidden, active, selected, className, children, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemBase: ({ title, interactive, as, href, onClick, onKeyPress, tabIndex, size, variant, color, theme, shadow, loading, disabled, hidden, active, selected, className, onMouseEnter, children, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/List/ListItemHeader.d.ts

@@ -1,5 +1,6 @@
+import { ChevronDownIcon } from '@navikt/aksel-icons';
 import { ReactNode } from 'react';
-import { AvatarGroupProps, AvatarProps, BadgeProps, IconName, IconProps, ListItemLinkProps, ListItemSelectProps, ListItemSize } from '..';
+import { AvatarGroupProps, AvatarProps, BadgeProps, IconProps, ListItemLinkProps, ListItemSelectProps, ListItemSize, SvgElement } from '..';
 export interface ListItemHeaderProps extends ListItemLinkProps {
     /** Header is loading */
     loading?: boolean;
@@ -9,22 +10,22 @@ export interface ListItemHeaderProps extends ListItemLinkProps {
     className?: string;
     /** Select controls */
     select?: ListItemSelectProps;
-    /** Collapsible item, sets linkIcon to "chevron down" */
+    /** Collapsible item */
     collapsible?: boolean;
-    /** Item is expanded, sets linkIcon to "chevron up" */
+    /** Item is expanded */
     expanded?: boolean;
     /** Title */
     title?: string;
     /** Description */
     description?: string;
     /** List item icon */
-    icon?: IconName | IconProps | ReactNode | undefined;
+    icon?: SvgElement | IconProps | ReactNode | undefined;
     /** List item avatar */
     avatar?: AvatarProps;
     /** List item avatarGroup */
     avatarGroup?: AvatarGroupProps;
-    /** Optional icon indicating behaviour */
-    linkIcon?: IconName | undefined | null;
+    /** Optional chevron icon indicating behaviour */
+    chevron?: typeof ChevronDownIcon;
     /** Optional badge */
     badge?: BadgeProps | ReactNode | undefined;
     /** Custom controls */
@@ -32,4 +33,4 @@ export interface ListItemHeaderProps extends ListItemLinkProps {
     /** Custom label */
     children?: ReactNode;
 }
-export declare const ListItemHeader: ({ as, loading, disabled, select, href, onClick, onKeyPress, tabIndex, size, title, description, icon, avatar, avatarGroup, linkIcon, badge, controls, className, children, }: ListItemHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemHeader: ({ as, loading, disabled, select, href, onClick, onKeyPress, tabIndex, size, title, description, icon, avatar, avatarGroup, chevron, badge, controls, className, children, }: ListItemHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/List/Patterns.stories.d.ts

@@ -5,5 +5,4 @@ export default meta;
 export declare const ListOfPeople: () => import("react/jsx-runtime").JSX.Element;
 export declare const ListOfServices: () => import("react/jsx-runtime").JSX.Element;
 export declare const ListOfCategories: () => import("react/jsx-runtime").JSX.Element;
-export declare const CategoryGrid: () => import("react/jsx-runtime").JSX.Element;
 export declare const MultilevelList: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/List/Specimens.stories.d.ts

@@ -9,5 +9,5 @@ declare const meta: {
     };
 };
 export default meta;
-export declare const Theme: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Size: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Theme: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element[];
+export declare const Size: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element[];

package/dist/types/lib/components/Menu/MenuItem.d.ts

@@ -1,5 +1,5 @@
 import { ElementType, ReactNode } from 'react';
-import { AvatarGroupProps, AvatarProps, BadgeProps, IconName, IconProps, IconTheme } from '..';
+import { AvatarGroupProps, AvatarProps, BadgeProps, IconProps, IconTheme, SvgElement } from '..';
 import { MenuItemColor, MenuItemSize, MenuItemTheme } from './';
 export interface MenuItemProps {
     id: string;
@@ -20,13 +20,13 @@ export interface MenuItemProps {
     groupId?: string | number;
     title?: string;
     description?: string;
-    icon?: IconName | IconProps | ReactNode;
+    icon?: SvgElement | IconProps | ReactNode;
     iconTheme?: IconTheme;
     iconBadge?: BadgeProps | undefined;
     avatar?: AvatarProps;
     avatarGroup?: AvatarGroupProps;
     badge?: BadgeProps | undefined;
-    linkIcon?: IconName;
+    linkIcon?: SvgElement;
     linkText?: string;
     className?: string;
     label?: ReactNode;

package/dist/types/lib/components/Menu/MenuItemBase.d.ts

@@ -1,5 +1,5 @@
 import { ElementType, KeyboardEventHandler, ReactNode } from 'react';
-import { BadgeProps, Color, IconName } from '..';
+import { BadgeProps, Color, SvgElement } from '..';
 export type MenuItemColor = Color;
 export type MenuItemSize = 'xs' | 'sm' | 'md' | 'lg';
 export type MenuItemTheme = 'default' | 'subtle' | 'surface' | 'base';
@@ -20,7 +20,7 @@ export interface MenuItemBaseProps {
     expanded?: boolean;
     children?: ReactNode;
     badge?: BadgeProps | undefined;
-    linkIcon?: IconName;
+    linkIcon?: SvgElement;
     linkText?: string;
 }
 export declare const MenuItemBase: ({ as, color, theme, size, className, href, onClick, onKeyPress, tabIndex, hidden, disabled, linkIcon, linkText, badge, children, }: MenuItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Menu/MenuSearch.d.ts

@@ -2,8 +2,9 @@ import { ChangeEventHandler } from 'react';
 export interface MenuSearchProps {
     placeholder?: string;
     name: string;
+    clearButtonAltText?: string;
     value?: string;
     onChange?: ChangeEventHandler;
     onClear?: () => void;
 }
-export declare const MenuSearch: ({ value, name, placeholder, onChange, onClear }: MenuSearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuSearch: ({ value, name, placeholder, clearButtonAltText, onChange, onClear, }: MenuSearchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Menu/MenuSearch.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ value, name, placeholder, onChange, onClear }: import('./MenuSearch').MenuSearchProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ value, name, placeholder, clearButtonAltText, onChange, onClear, }: import('./MenuSearch').MenuSearchProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/types/lib/components/Meta/MetaItem.d.ts

@@ -1,5 +1,5 @@
 import { ElementType, ReactNode } from 'react';
-import { IconName } from '../Icon';
+import { SvgElement } from '../Icon';
 import { MetaItemSize, MetaItemVariant } from './MetaItemBase';
 export interface MetaItemProps {
     loading?: boolean;
@@ -11,7 +11,7 @@ export interface MetaItemProps {
     /** Variant */
     variant?: MetaItemVariant;
     /** Icon name */
-    icon?: IconName;
+    icon?: SvgElement;
     /** Label */
     children?: ReactNode;
     /** classname */

package/dist/types/lib/components/Meta/MetaItemMedia.d.ts

@@ -1,9 +1,9 @@
-import { IconName } from '../Icon';
+import { SvgElement } from '../Icon';
 import { MetaItemSize } from './MetaItemBase';
 interface MetaItemMediaProps {
     size?: MetaItemSize;
     progress?: number;
-    icon?: IconName;
+    icon?: SvgElement;
 }
 export declare const MetaItemMedia: ({ size, icon, progress }: MetaItemMediaProps) => false | import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/lib/components/Meta/MetaTimestamp.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { IconName } from '../Icon';
+import { SvgElement } from '../Icon';
 import { MetaItemSize, MetaItemVariant } from './MetaItemBase';
 export interface MetaTimestampProps {
     loading?: boolean;
@@ -10,7 +10,7 @@ export interface MetaTimestampProps {
     /** Datetime in ISO format */
     datetime?: string;
     /** Icon name */
-    icon?: IconName;
+    icon?: SvgElement;
     /** Label */
     children?: ReactNode;
 }

package/dist/types/lib/components/Page/BreadcrumbsLink.d.ts

@@ -8,4 +8,4 @@ export interface BreadcrumbsLinkProps extends React.HTMLAttributes<HTMLButtonEle
     className?: string;
     children?: ReactNode;
 }
-export declare const BreadcrumbsLink: ({ as, className, disabled, selected, tabIndex, label, children, ...rest }: BreadcrumbsLinkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BreadcrumbsLink: ({ as, className, disabled, selected, tabIndex, label, children, }: BreadcrumbsLinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Page/Flex.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { Color, Range, Shadow, Theme } from '..';
-export type FlexElement = 'div' | 'section' | 'article' | 'header' | 'footer' | 'nav';
+export type FlexElement = 'div' | 'section' | 'article' | 'header' | 'footer' | 'nav' | 'ul';
 export type FlexDirection = 'col' | 'row';
 export type FlexAlign = 'initial' | 'start' | 'end' | 'center' | 'stretch';
 export type FlexJustify = 'initial' | 'start' | 'end' | 'center' | 'between';

package/dist/types/lib/components/Page/PageHeader.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { AvatarGroupProps, AvatarProps, BackButtonProps, BreadcrumbsLinkProps, IconName, IconProps, PageTabsProps, SectionProps } from '..';
+import { AvatarGroupProps, AvatarProps, BackButtonProps, BreadcrumbsLinkProps, IconProps, PageTabsProps, SectionProps, SvgElement } from '..';
 export type PageHeaderVariant = 'card' | undefined;
 export type PageHeaderSize = 'lg' | 'xl';
 export interface PageHeaderProps extends SectionProps {
@@ -7,7 +7,7 @@ export interface PageHeaderProps extends SectionProps {
     size?: PageHeaderSize;
     title?: string;
     description?: string;
-    icon?: IconName | IconProps;
+    icon?: SvgElement | IconProps;
     avatar?: AvatarProps;
     avatarGroup?: AvatarGroupProps;
     tabs?: PageTabsProps;

package/dist/types/lib/components/Search/SearchField.d.ts

@@ -4,6 +4,8 @@ export interface SearchFieldProps {
     value?: string;
     className?: string;
     expanded?: boolean;
+    closeButtonAltText?: string;
+    clearButtonAltText?: string;
     placeholder?: string;
     onFocus?: FocusEventHandler;
     onBlur?: FocusEventHandler;
@@ -13,4 +15,4 @@ export interface SearchFieldProps {
     onEnter?: () => void;
     tabIndex?: number;
 }
-export declare const SearchField: ({ className, expanded, name, value, placeholder, onFocus, onBlur, onChange, onClear, onClose, onEnter, tabIndex, }: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchField: ({ className, expanded, name, value, placeholder, closeButtonAltText, clearButtonAltText, onFocus, onBlur, onChange, onClear, onClose, onEnter, tabIndex, }: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Skeleton/Skeleton.d.ts

@@ -7,5 +7,5 @@ interface SkeletonProps {
     children?: ReactNode;
     className?: string;
 }
-export declare const Skeleton: ({ loading, size, variant, className, children }: SkeletonProps) => string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const Skeleton: ({ loading, size, variant, className, children }: SkeletonProps) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
 export {};

package/dist/types/lib/components/Snackbar/SnackbarItem.d.ts

@@ -1,5 +1,5 @@
 import { ElementType, ReactNode } from 'react';
-import { IconName } from '..';
+import { SvgElement } from '..';
 export declare enum SnackbarColorEnum {
     accent = "accent",
     neutral = "neutral",
@@ -13,12 +13,13 @@ export type SnackbarColor = keyof typeof SnackbarColorEnum;
 export interface SnackbarItemProps {
     as?: ElementType;
     color?: SnackbarColor;
-    icon?: IconName;
+    icon?: SvgElement;
     message: string | ReactNode;
+    iconAltText?: string;
     href?: string;
     className?: string;
     dismissable?: boolean;
     onDismiss?: () => void;
     children?: ReactNode;
 }
-export declare const SnackbarItem: ({ as, message, className, color, icon, dismissable, onDismiss, ...rest }: SnackbarItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SnackbarItem: ({ as, message, className, color, icon, iconAltText, dismissable, onDismiss, ...rest }: SnackbarItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Snackbar/SnackbarItem.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 import { SnackbarItemProps } from '..';
 declare const meta: {
     title: string;
-    component: ({ as, message, className, color, icon, dismissable, onDismiss, ...rest }: SnackbarItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ as, message, className, color, icon, iconAltText, dismissable, onDismiss, ...rest }: SnackbarItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/types/lib/components/Snackbar/useSnackbar.d.ts

@@ -1,5 +1,5 @@
 import { ElementType, ReactNode } from 'react';
-import { IconName } from '../Icon';
+import { SvgElement } from '../Icon';
 import { SnackbarColor } from './SnackbarItem.tsx';
 export declare enum SnackbarDuration {
     infinite = 0,
@@ -14,7 +14,7 @@ export interface SnackbarQueueItem extends SnackbarItemProps {
     message: string;
     color: SnackbarColor;
     duration?: number;
-    icon?: IconName;
+    icon?: SvgElement;
 }
 interface SnackbarItemProps {
     as?: ElementType;

package/dist/types/lib/components/Timeline/TimelineSection.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { AvatarProps, Color, IconName } from '..';
+import { AvatarProps, Color, SvgElement } from '..';
 export type TimelineSectionSize = 'xs' | 'sm' | 'lg';
 export interface TimelineSectionProps {
     loading?: boolean;
@@ -9,7 +9,7 @@ export interface TimelineSectionProps {
     dateline?: string;
     byline?: ReactNode;
     avatar?: AvatarProps;
-    icon?: IconName;
+    icon?: SvgElement;
     children?: ReactNode;
 }
 export declare const TimelineSection: ({ loading, color, size, datetime, dateline, byline, avatar, children, }: TimelineSectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Toolbar/Toolbar.d.ts

@@ -11,6 +11,7 @@ export interface ToolbarProps {
     getFilterLabel?: (name: string, value: ToolbarFilterProps['value']) => string;
     onFilterStateChange?: (state: FilterState) => void;
     showResultsLabel?: string;
+    removeButtonAltText?: string;
     children?: ReactNode;
 }
-export declare const Toolbar: ({ filters, filterState, onFilterStateChange, search, accountMenu, getFilterLabel, children, showResultsLabel, }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toolbar: ({ filters, filterState, onFilterStateChange, search, accountMenu, getFilterLabel, children, showResultsLabel, removeButtonAltText, }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Toolbar/Toolbar.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 import { Toolbar } from './Toolbar';
 declare const meta: {
     title: string;
-    component: ({ filters, filterState, onFilterStateChange, search, accountMenu, getFilterLabel, children, showResultsLabel, }: import('./Toolbar').ToolbarProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ filters, filterState, onFilterStateChange, search, accountMenu, getFilterLabel, children, showResultsLabel, removeButtonAltText, }: import('./Toolbar').ToolbarProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/types/lib/components/Toolbar/ToolbarButton.d.ts

@@ -3,12 +3,12 @@ export type ToolbarButtonType = 'add' | 'select' | 'switch';
 export interface ToolbarButtonProps {
     as?: ElementType;
     type?: ToolbarButtonType;
+    ariaLabel?: string;
     removable?: boolean;
     selected?: boolean;
-    icon?: string;
     active?: boolean;
     children?: ReactNode;
     onToggle?: MouseEventHandler;
     onRemove?: MouseEventHandler;
 }
-export declare const ToolbarButton: ({ type, selected, removable, active, children, onToggle, onRemove, }: ToolbarButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolbarButton: ({ type, selected, removable, ariaLabel, active, children, onToggle, onRemove, }: ToolbarButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Toolbar/ToolbarButton.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ type, selected, removable, active, children, onToggle, onRemove, }: import('./ToolbarButton').ToolbarButtonProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ type, selected, removable, ariaLabel, active, children, onToggle, onRemove, }: import('./ToolbarButton').ToolbarButtonProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/types/lib/components/Toolbar/ToolbarDate.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ removable, label, name, value, options, optionGroups, onChange, onRemove, getSelectedLabel, showResultsLabel, optionType, id, }: import('./ToolbarFilter').ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ removable, label, name, value, options, optionGroups, onChange, onRemove, buttonAltText, getSelectedLabel, showResultsLabel, optionType, id, }: import('./ToolbarFilter').ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {