@altinn/altinn-components 0.28.1 → 0.29.0

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

@@ -31,4 +31,27 @@ export interface ListItemInputProps extends ListItemProps {
     /** Child items */
     items?: ListItemProps[];
 }
-export declare const ListItem: ({ className, color, variant, shadow, border, loading, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * `ListItem` is a compound component that combines `ListItemBase` and `ListItemHeader`
+ * to render a stylized, optionally interactive list item with support for various visual states
+ * such as loading, selection, and expansion. It supports customization of appearance through variants,
+ * shadows, borders, and iconography.
+ *
+ * @param {Object} props - Component props
+ * @param {string} [props.id] - Unique identifier for the list item.
+ * @param {'default' | 'subtle' | 'tinted'} [props.variant='default'] - Visual style variant of the item.
+ * @param {string} [props.className] - Custom class name for additional styling.
+ * @param {boolean} [props.loading] - Whether to show a loading placeholder.
+ * @param {ReactNode | () => ReactElement} [props.label] - Custom label, can be a node or a function returning a ReactElement.
+ * @param {ReactNode} [props.title] - Title content of the item.
+ * @param {ReactNode} [props.description] - Optional description beneath the title.
+ * @param {string} [props.ariaLabel] - ARIA label used for accessibility, defaults to `title` if not provided.
+ * @param {ReactNode} [props.icon] - Icon element displayed alongside the content.
+ * @param {ReactNode} [props.badge] - Optional badge displayed near the title.
+ * @param {boolean} [props.linkIcon=false] - Whether to display a link icon.
+ * @param {...ListItemBaseProps} props - Additional props inherited from `ListItemBase` for layout and interaction.
+ * @param {...ListItemHeaderProps} props - Additional props inherited from `ListItemHeader` for header controls and behavior.
+ *
+ * @returns {ReactElement} Rendered ListItem component.
+ */
+export declare const ListItem: ({ className, color, variant, shadow, border, loading, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, ...rest }: ListItemProps) => ReactElement;

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

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 import { ListItemProps } from '../';
 declare const meta: {
     title: string;
-    component: ({ className, color, variant, shadow, border, loading, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, color, variant, shadow, border, loading, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, ...rest }: ListItemProps) => React.ReactElement;
     parameters: {};
     args: {
         id: string;

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

@@ -6,8 +6,9 @@ export interface ListItemLabelProps {
     loading?: boolean;
     size?: ListItemSize;
     title?: HeadingProps | ReactNode | string;
+    value?: HeadingProps | ReactNode | string;
     description?: HeadingProps | ReactNode | string;
     children?: ReactNode;
     className?: string;
 }
-export declare const ListItemLabel: ({ loading, size, title, description, children, id, className, }: ListItemLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemLabel: ({ loading, size, title, value, description, children, id, className, }: ListItemLabelProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,17 +1,15 @@
-import { ElementType, KeyboardEventHandler, ReactNode } from 'react';
+import { ElementType, KeyboardEventHandler } from 'react';
 export interface ListItemLinkProps {
-    interactive?: boolean;
     as?: ElementType;
     href?: string;
     onClick?: () => void;
     onKeyPress?: KeyboardEventHandler;
+    ariaLabel?: string;
     tabIndex?: number;
     loading?: boolean;
     disabled?: boolean;
     selected?: boolean;
     className?: string;
-    children?: ReactNode;
     active?: boolean;
-    describedby?: string;
 }
-export declare const ListItemLink: ({ interactive, as, loading, disabled, selected, href, onClick, onKeyPress, className, children, active, describedby, }: ListItemLinkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemLink: ({ as, loading, disabled, selected, href, onClick, onKeyPress, className, active, ariaLabel, }: ListItemLinkProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { ListItemProps } from '../';
 declare const meta: {
     title: string;
-    component: ({ className, color, variant, shadow, border, loading, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, color, variant, shadow, border, loading, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, ...rest }: ListItemProps) => React.ReactElement;
     parameters: {};
     args: {
         id: string;

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

@@ -9,4 +9,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const CreatingHiearchy: Story;
+export declare const AddingBadges: Story;
 export declare const NestingItems: Story;
+export declare const AccountRelationships: Story;
+export declare const PersonMenu: Story;
+export declare const InboxMenu: Story;
+export declare const CompanyMenu: Story;

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

@@ -1,6 +1,5 @@
 import { ElementType, ReactNode } from 'react';
-import { AvatarGroupProps, AvatarProps, BadgeProps, SvgElement } from '..';
-import { MenuItemColor, MenuItemIconProps, MenuItemSize, MenuItemTheme } from './';
+import { BadgeProps, MenuItemColor, MenuItemIconProps, MenuItemLabelProps, MenuItemSize, MenuItemTheme } from '../';
 export interface MenuItemProps {
     id: string;
     type?: string;
@@ -18,18 +17,17 @@ export interface MenuItemProps {
     selected?: boolean;
     disabled?: boolean;
     groupId?: string | number;
-    title?: string;
-    description?: string;
+    title?: MenuItemLabelProps['title'];
+    description?: MenuItemLabelProps['description'];
     icon?: MenuItemIconProps['icon'];
     iconTheme?: MenuItemIconProps['theme'];
     iconBadge?: MenuItemIconProps['badge'];
-    avatar?: AvatarProps;
-    avatarGroup?: AvatarGroupProps;
     badge?: BadgeProps | undefined;
-    linkIcon?: SvgElement;
-    linkText?: string;
+    /** Custom controls */
+    controls?: ReactNode;
+    linkIcon?: boolean;
     className?: string;
     label?: ReactNode;
     items?: MenuItemProps[];
 }
-export declare const MenuItem: ({ as, size, color, theme, collapsible, expanded, icon, iconTheme, iconBadge, avatar, avatarGroup, title, description, badge, linkText, linkIcon, label, ...rest }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: ({ as, size, color, theme, collapsible, expanded, icon, iconTheme, iconBadge, title, description, badge, controls, linkIcon, label, ...rest }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,12 +1,14 @@
 import { ReactNode } from 'react';
+import { BadgeProps, HeadingProps } from '..';
 import { MenuItemSize } from './MenuItemBase';
 export interface MenuItemLabelProps {
     className?: string;
     size?: MenuItemSize;
     label?: string;
-    title?: string;
-    weight?: 'medium' | 'normal';
-    description?: string;
+    title?: HeadingProps | ReactNode | string;
+    description?: HeadingProps | ReactNode | string;
+    badge?: BadgeProps;
     children?: ReactNode;
 }
-export declare const MenuItemLabel: ({ className, size, label, title, weight, description, children, }: MenuItemLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare function getAriaLabelFromTitle(title: HeadingProps | ReactNode | string): string | undefined;
+export declare const MenuItemLabel: ({ className, size, title, badge, description, children }: MenuItemLabelProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

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

package/dist/types/lib/components/Page/Breadcrumbs.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ items }: import('./Breadcrumbs').BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {
+        items: ({
+            label: string;
+            href: string;
+        } | {
+            label: string;
+            href?: undefined;
+        })[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -4,7 +4,7 @@ export interface BreadcrumbsLinkProps extends React.HTMLAttributes<HTMLButtonEle
     selected?: boolean;
     disabled?: boolean;
     href?: string;
-    label?: string;
+    label?: ReactNode | string;
     className?: string;
     children?: ReactNode;
 }

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

@@ -3,7 +3,7 @@ import { Color, Range, Shadow, Theme } from '..';
 export type FlexDirection = 'col' | 'row';
 export type FlexAlign = 'initial' | 'start' | 'end' | 'center' | 'stretch';
 export type FlexJustify = 'initial' | 'start' | 'end' | 'center' | 'between';
-export type FlexSpacing = 'page' | 'xs' | Range<11>;
+export type FlexSpacing = 'page' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | Range<11>;
 export type FlexPadding = 'page' | Range<11>;
 export type FlexMargin = 0 | 'page' | 'section' | 'bottom';
 export type FlexSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

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

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ as, color, size, theme, shadow, direction, reverse, align, justify, spacing, padding, margin, bleed, className, style, children, ...rest }: import('./Flex').FlexProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Size: Story;
+export declare const Spacing: Story;
+export declare const Column: Story;
+export declare const ColumnSpacing: Story;

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

@@ -1,21 +1,18 @@
 import { CSSProperties, ReactNode } from 'react';
-import { Color, Range, Theme } from '..';
-export type GridElement = 'div' | 'section' | 'article' | 'header' | 'footer' | 'ul';
+import { Color, Range, Size, Theme } from '..';
+export type GridElement = 'div' | 'section' | 'article' | 'header' | 'footer' | 'ol' | 'ul';
 export type GridCols = 2 | 3 | 4;
-export type GridSpacing = 'xs' | Range<11>;
-export type GridPadding = 'page' | Range<11>;
-export type GridMargin = 'page' | 'section';
+export type GridSpacing = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | Range<11>;
 export interface GridProps {
     as?: GridElement;
     color?: Color;
     theme?: Theme;
+    size?: Size;
     cols?: GridCols;
     reverse?: boolean;
     spacing?: GridSpacing;
-    padding?: GridPadding;
-    margin?: GridMargin;
     children?: ReactNode;
     className?: string;
     style?: CSSProperties;
 }
-export declare const Grid: ({ as, theme, color, cols, reverse, spacing, padding, margin, className, style, children, }: GridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Grid: ({ as, size, theme, color, cols, reverse, spacing, className, style, children, }: GridProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Page/Grid.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ as, size, theme, color, cols, reverse, spacing, className, style, children, }: import('./Grid').GridProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {
+        as: "ul";
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Large: Story;
+export declare const Small: Story;

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

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ children, className, spacing, items, ...rest }: import('../List').ListProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const XSmall: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const XLarge: Story;

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

@@ -3,6 +3,7 @@ import { FlexProps } from '..';
  * Section component. Use to divide pages into sections. Should renders a flex column by default.
  */
 export interface SectionProps extends FlexProps {
+    variant?: 'default' | 'subtle' | 'tinted';
     bleed?: boolean;
 }
-export declare const Section: ({ as, direction, children, ...rest }: FlexProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Section: ({ as, direction, variant, className, children, ...rest }: SectionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,6 @@ export * from './PageBase';
 export * from './PageNav';
 export * from './PageMenu';
 export * from './PageTabs';
-export * from './PageHeader';
 export * from './PageDetails';
 export * from './Flex';
 export * from './Grid';

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

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
-import { AvatarProps, IconProps, ListItemBaseProps, ListItemHeaderProps } from '..';
+import { AvatarProps, IconProps, ListItemBaseProps, ListItemLinkProps } from '..';
 export interface SearchCategory {
     name?: string;
     icon?: IconProps;
 }
-export interface SearchItemProps extends ListItemBaseProps, ListItemHeaderProps {
+export interface SearchItemProps extends ListItemBaseProps, ListItemLinkProps {
     id?: string;
     title?: ReactNode;
     summary?: ReactNode;

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

@@ -1,5 +1,5 @@
-import { AutocompleteProps, SearchFieldProps } from '..';
-export interface SearchbarProps extends SearchFieldProps {
+import { AutocompleteProps, SearchbarFieldProps } from '..';
+export interface SearchbarProps extends SearchbarFieldProps {
     className?: string;
     autocomplete?: AutocompleteProps;
     expanded?: boolean;

package/dist/types/lib/components/Searchbar/{SearchField.d.ts → SearchbarField.d.ts}

@@ -1,5 +1,5 @@
 import { ChangeEventHandler, FocusEventHandler } from 'react';
-export interface SearchFieldProps {
+export interface SearchbarFieldProps {
     name: string;
     value?: string;
     className?: string;
@@ -15,4 +15,4 @@ export interface SearchFieldProps {
     onEnter?: () => void;
     tabIndex?: number;
 }
-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;
+export declare const SearchbarField: ({ className, expanded, name, value, placeholder, closeButtonAltText, clearButtonAltText, onFocus, onBlur, onChange, onClear, onClose, onEnter, tabIndex, }: SearchbarFieldProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 export * from './Searchbar';
 export * from './SearchbarBase';
-export * from './SearchField';
+export * from './SearchbarField';
 export * from './AutocompleteBase';
 export * from './AutocompleteGroup';
 export * from './Autocomplete';

package/dist/types/lib/components/Settings/SettingsItem.d.ts

@@ -1,12 +1,11 @@
-import { ListItemBaseProps, ListItemHeaderProps } from '..';
+import { ListItemBaseProps, ListItemHeaderProps, ListItemLabelProps } from '..';
 export interface SettingsItemProps extends ListItemBaseProps, ListItemHeaderProps {
     id?: string;
     collapsible?: boolean;
     expanded?: boolean;
-    icon?: ListItemHeaderProps['icon'];
     label?: ListItemHeaderProps['children'];
-    value?: string | number;
-    title?: string;
-    description?: string;
+    title?: ListItemLabelProps['title'];
+    value?: ListItemLabelProps['value'];
+    description?: ListItemLabelProps['description'];
 }
-export declare const SettingsItem: ({ color, size, expanded, icon, label, title, value, description, children, ...item }: SettingsItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SettingsItem: ({ color, size, expanded, icon, label, title, value, description, children, ...props }: SettingsItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Settings/SettingsItem.stories.d.ts

@@ -1,19 +1,20 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ color, size, expanded, icon, label, title, value, description, children, ...item }: import('./SettingsItem').SettingsItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ color, size, expanded, icon, label, title, value, description, children, ...props }: import('./SettingsItem').SettingsItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
-    args: {};
+    args: {
+        ariaLabel: string;
+    };
     decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         id?: string | undefined;
         collapsible?: boolean | undefined;
         expanded?: boolean | undefined;
-        icon?: import('..').SvgElement | import('..').IconProps | React.ReactNode | import('..').AvatarProps | import('..').AvatarGroupProps;
         label?: React.ReactNode;
-        value?: string | number | undefined;
-        title?: string | undefined;
-        description?: string | undefined;
+        title?: React.ReactNode | import('..').HeadingProps;
+        value?: React.ReactNode | import('..').HeadingProps;
+        description?: React.ReactNode | import('..').HeadingProps;
         interactive?: boolean | undefined;
         as?: React.ElementType | undefined;
         tabIndex?: number | undefined;
@@ -32,13 +33,13 @@ declare const meta: {
         children?: React.ReactNode;
         select?: import('..').ListItemSelectProps | undefined;
         linkIcon?: boolean | undefined;
+        icon?: import('..').SvgElement | import('..').IconProps | React.ReactNode | import('..').AvatarProps | import('..').AvatarGroupProps;
         badge?: React.ReactNode | import('..').BadgeProps;
         controls?: React.ReactNode;
         ariaLabel?: string | undefined;
         href?: string | undefined;
         onClick?: (() => void) | undefined;
         onKeyPress?: React.KeyboardEventHandler | undefined;
-        describedby?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

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

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

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

@@ -1,10 +1,7 @@
-import { ChangeEventHandler } from 'react';
-export interface ToolbarSearchProps {
+import { SearchFieldProps } from '../';
+export interface ToolbarSearchProps extends SearchFieldProps {
     placeholder?: string;
-    clearButtonAltText?: string;
     name: string;
     value?: string;
-    onChange?: ChangeEventHandler;
-    onClear?: () => void;
 }
 export declare const ToolbarSearch: ({ value, name, placeholder, clearButtonAltText, onChange, onClear, }: ToolbarSearchProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -11,3 +11,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;

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

@@ -19,7 +19,6 @@ declare const meta: {
         children?: React.ReactNode | (() => React.ReactElement);
         border?: import('..').ListItemBorder | undefined;
         loading?: boolean | undefined;
-        variant?: import('..').ListItemVariant | undefined;
         size?: import('..').ListItemSize | undefined;
         color?: import('..').ListItemColor | undefined;
         className?: string | undefined;
@@ -27,6 +26,7 @@ declare const meta: {
         as?: React.ElementType | undefined;
         label?: React.ReactNode | (() => React.ReactElement);
         select?: import('..').ListItemSelectProps | undefined;
+        variant?: import('..').ListItemVariant | undefined;
         hidden?: boolean | undefined;
         expanded?: boolean | undefined;
         active?: boolean | undefined;
@@ -34,17 +34,16 @@ declare const meta: {
         href?: string | undefined;
         controls?: React.ReactNode;
         selected?: boolean | undefined;
-        ariaLabel?: string | undefined;
+        tabIndex?: number | undefined;
+        onKeyPress?: React.KeyboardEventHandler | undefined;
+        onClick?: (() => void) | undefined;
+        onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        collapsible?: boolean | undefined;
         description?: React.ReactNode | import('..').HeadingProps;
         linkIcon?: boolean | undefined;
         interactive?: boolean | undefined;
-        tabIndex?: number | undefined;
+        ariaLabel?: string | undefined;
         shadow?: import('..').Shadow | undefined;
-        onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
-        collapsible?: boolean | undefined;
-        onClick?: (() => void) | undefined;
-        onKeyPress?: React.KeyboardEventHandler | undefined;
-        describedby?: string | undefined;
     };
 };
 export default meta;

package/dist/types/lib/components/Typography/Heading.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { TypographyProps } from '..';
-export type HeadingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'inherit';
+export type HeadingSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'inherit';
 export type HeadingWeight = 'normal' | 'medium' | 'bold';
 export type HeadingLeading = 'none' | 'tight' | 'normal';
 export type HeadingComponent = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';

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

@@ -1,6 +1,7 @@
 export * from '../types/';
 export * from './Attachment';
 export * from './Avatar';
+export * from './Account';
 export * from './Badge';
 export * from './Bookmarks';
 export * from './Button';
@@ -18,7 +19,6 @@ export * from './LayoutAction';
 export * from './List';
 export * from './Menu';
 export * from './Metadata';
-export * from './Profile';
 export * from './RootProvider';
 export * from './Search';
 export * from './Searchbar';

package/dist/types/lib/stories/Profile/Accounts.stories.d.ts

@@ -3,17 +3,12 @@ declare const meta: {
     title: string;
     tags: string[];
     parameters: {};
-    args: {
-        items: AccountListItemProps[];
-    };
+    args: {};
 };
 export default meta;
 export declare const Accounts: () => import("react/jsx-runtime").JSX.Element;
-interface AccountDetailsProps {
-    type?: AccountListItemProps["type"];
-    favourite?: AccountListItemProps["favourite"];
-}
-export declare const AccountDetails: ({ type, favourite }: AccountDetailsProps) => import("react/jsx-runtime").JSX.Element;
-export declare const CompanyDetails: () => import("react/jsx-runtime").JSX.Element;
-export declare const PersonDetails: () => import("react/jsx-runtime").JSX.Element;
-export declare const GroupDetails: () => import("react/jsx-runtime").JSX.Element;
+export declare const AccountDetails: ({ type, ...props }: AccountListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccountToolbar: ({ id, isCurrentEndUser, favourite, onToggleFavourite, }: AccountListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CompanyDetails: ({ id, parentId, uniqueId, ...props }: AccountListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PersonDetails: ({ id, ...props }: AccountListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GroupDetails: ({ accountIds }: AccountListItemProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.28.1",
+  "version": "0.29.0",
   "main": "dist/index.js",
   "files": [
     "dist/",

package/dist/assets/AccountButton.css

@@ -1 +0,0 @@
-._label_1dcj3_1{display:flex;flex-direction:column;padding:0 .25rem}._title_1dcj3_7[data-size=lg]{font-size:1rem;line-height:1.25;font-weight:500}._description_1dcj3_13{font-size:.875rem;color:var(--ds-color-text-subtle)}

package/dist/assets/IconButton.css

@@ -1 +0,0 @@
-._button_hmev5_1{display:flex;align-items:center;justify-content:center;border-radius:2px}._button_hmev5_1[data-size=xs]{width:2.25rem;height:2.25rem}._button_hmev5_1[data-size=sm]{width:2.625rem;height:2.625rem}._button_hmev5_1[data-size=md]{width:3rem;height:3rem}._button_hmev5_1[data-size=lg]{width:3.5rem;height:3.5rem}

package/dist/assets/MenuOption.css

@@ -1 +0,0 @@
-._base_igy0i_1{padding-left:6px}._base_igy0i_1:hover [data-hover=true]{opacity:1}._label_igy0i_9{display:block;white-space:nowrap;text-overflow:ellipsis;width:max-content;overflow:hidden;max-width:240px}._input_igy0i_18{position:absolute;opacity:0}._icon_igy0i_23{flex-shrink:0;font-size:1rem;display:flex;align-items:center;justify-content:center}._icon_igy0i_23{color:var(--ds-color-base-default)}._icon_igy0i_23 [data-hover=true]{opacity:0}

package/dist/assets/ToolbarSearch.css

@@ -1 +0,0 @@
-._field_3uyps_1{position:relative}._icon_3uyps_5{position:absolute;top:0;left:0;font-size:1.25rem;color:var(--ds-color-text-subtle);margin:8px}._input_3uyps_14{width:100%;font-size:.875rem;line-height:1rem;font-weight:500;padding:9px 32px;border-radius:2px;border:1px solid;border-color:var(--ds-color-border-default);background-color:var(--ds-color-background-default)}._input_3uyps_14[type=search]::-webkit-search-decoration,._input_3uyps_14[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}._clear_3uyps_31{position:absolute;top:0;right:0;margin:8px;border-radius:100%;width:1.25rem;height:1.25rem}