@altinn/altinn-components 0.13.4 → 0.14.0

package/dist/tokens/size/small.json

@@ -0,0 +1,100 @@
+{
+  "line-height": {
+    "sm": {
+      "$type": "lineHeights",
+      "$value": "130%"
+    },
+    "md": {
+      "$type": "lineHeights",
+      "$value": "150%"
+    },
+    "lg": {
+      "$type": "lineHeights",
+      "$value": "170%"
+    }
+  },
+  "font-size": {
+    "1": {
+      "$type": "fontSizes",
+      "$value": "11"
+    },
+    "2": {
+      "$type": "fontSizes",
+      "$value": "12"
+    },
+    "3": {
+      "$type": "fontSizes",
+      "$value": "13"
+    },
+    "4": {
+      "$type": "fontSizes",
+      "$value": "14"
+    },
+    "5": {
+      "$type": "fontSizes",
+      "$value": "16"
+    },
+    "6": {
+      "$type": "fontSizes",
+      "$value": "18"
+    },
+    "7": {
+      "$type": "fontSizes",
+      "$value": "21"
+    },
+    "8": {
+      "$type": "fontSizes",
+      "$value": "24"
+    },
+    "9": {
+      "$type": "fontSizes",
+      "$value": "30"
+    },
+    "10": {
+      "$type": "fontSizes",
+      "$value": "36"
+    },
+    "11": {
+      "$type": "fontSizes",
+      "$value": "48"
+    }
+  },
+  "letter-spacing": {
+    "1": {
+      "$type": "letterSpacing",
+      "$value": "-1%"
+    },
+    "2": {
+      "$type": "letterSpacing",
+      "$value": "-0.5%"
+    },
+    "3": {
+      "$type": "letterSpacing",
+      "$value": "-0.25%"
+    },
+    "4": {
+      "$type": "letterSpacing",
+      "$value": "-0.15%"
+    },
+    "5": {
+      "$type": "letterSpacing",
+      "$value": "0%"
+    },
+    "6": {
+      "$type": "letterSpacing",
+      "$value": "0.15%"
+    },
+    "7": {
+      "$type": "letterSpacing",
+      "$value": "0.25%"
+    },
+    "8": {
+      "$type": "letterSpacing",
+      "$value": "0.5%"
+    },
+    "9": {
+      "$type": "letterSpacing",
+      "$value": "1.5%"
+    }
+  }
+}

package/dist/tokens/small.json

@@ -0,0 +1,100 @@
+{
+  "line-height": {
+    "sm": {
+      "$type": "lineHeights",
+      "$value": "130%"
+    },
+    "md": {
+      "$type": "lineHeights",
+      "$value": "150%"
+    },
+    "lg": {
+      "$type": "lineHeights",
+      "$value": "170%"
+    }
+  },
+  "font-size": {
+    "1": {
+      "$type": "fontSizes",
+      "$value": "11"
+    },
+    "2": {
+      "$type": "fontSizes",
+      "$value": "12"
+    },
+    "3": {
+      "$type": "fontSizes",
+      "$value": "13"
+    },
+    "4": {
+      "$type": "fontSizes",
+      "$value": "14"
+    },
+    "5": {
+      "$type": "fontSizes",
+      "$value": "16"
+    },
+    "6": {
+      "$type": "fontSizes",
+      "$value": "18"
+    },
+    "7": {
+      "$type": "fontSizes",
+      "$value": "21"
+    },
+    "8": {
+      "$type": "fontSizes",
+      "$value": "24"
+    },
+    "9": {
+      "$type": "fontSizes",
+      "$value": "30"
+    },
+    "10": {
+      "$type": "fontSizes",
+      "$value": "36"
+    },
+    "11": {
+      "$type": "fontSizes",
+      "$value": "48"
+    }
+  },
+  "letter-spacing": {
+    "1": {
+      "$type": "letterSpacing",
+      "$value": "-1%"
+    },
+    "2": {
+      "$type": "letterSpacing",
+      "$value": "-0.5%"
+    },
+    "3": {
+      "$type": "letterSpacing",
+      "$value": "-0.25%"
+    },
+    "4": {
+      "$type": "letterSpacing",
+      "$value": "-0.15%"
+    },
+    "5": {
+      "$type": "letterSpacing",
+      "$value": "0%"
+    },
+    "6": {
+      "$type": "letterSpacing",
+      "$value": "0.15%"
+    },
+    "7": {
+      "$type": "letterSpacing",
+      "$value": "0.25%"
+    },
+    "8": {
+      "$type": "letterSpacing",
+      "$value": "0.5%"
+    },
+    "9": {
+      "$type": "letterSpacing",
+      "$value": "1.5%"
+    }
+  }
+}

package/dist/tokens/typography/size/large.json

@@ -0,0 +1,100 @@
+{
+  "line-height": {
+    "sm": {
+      "$type": "lineHeights",
+      "$value": "130%"
+    },
+    "md": {
+      "$type": "lineHeights",
+      "$value": "150%"
+    },
+    "lg": {
+      "$type": "lineHeights",
+      "$value": "170%"
+    }
+  },
+  "font-size": {
+    "1": {
+      "$type": "fontSizes",
+      "$value": "13"
+    },
+    "2": {
+      "$type": "fontSizes",
+      "$value": "14"
+    },
+    "3": {
+      "$type": "fontSizes",
+      "$value": "16"
+    },
+    "4": {
+      "$type": "fontSizes",
+      "$value": "18"
+    },
+    "5": {
+      "$type": "fontSizes",
+      "$value": "21"
+    },
+    "6": {
+      "$type": "fontSizes",
+      "$value": "24"
+    },
+    "7": {
+      "$type": "fontSizes",
+      "$value": "30"
+    },
+    "8": {
+      "$type": "fontSizes",
+      "$value": "36"
+    },
+    "9": {
+      "$type": "fontSizes",
+      "$value": "48"
+    },
+    "10": {
+      "$type": "fontSizes",
+      "$value": "60"
+    },
+    "11": {
+      "$type": "fontSizes",
+      "$value": "72"
+    }
+  },
+  "letter-spacing": {
+    "1": {
+      "$type": "letterSpacing",
+      "$value": "-1%"
+    },
+    "2": {
+      "$type": "letterSpacing",
+      "$value": "-0.5%"
+    },
+    "3": {
+      "$type": "letterSpacing",
+      "$value": "-0.25%"
+    },
+    "4": {
+      "$type": "letterSpacing",
+      "$value": "-0.15%"
+    },
+    "5": {
+      "$type": "letterSpacing",
+      "$value": "0%"
+    },
+    "6": {
+      "$type": "letterSpacing",
+      "$value": "0.15%"
+    },
+    "7": {
+      "$type": "letterSpacing",
+      "$value": "0.25%"
+    },
+    "8": {
+      "$type": "letterSpacing",
+      "$value": "0.5%"
+    },
+    "9": {
+      "$type": "letterSpacing",
+      "$value": "1.5%"
+    }
+  }
+}

package/dist/tokens/typography/size/medium.json

@@ -0,0 +1,100 @@
+{
+  "line-height": {
+    "sm": {
+      "$type": "lineHeights",
+      "$value": "130%"
+    },
+    "md": {
+      "$type": "lineHeights",
+      "$value": "150%"
+    },
+    "lg": {
+      "$type": "lineHeights",
+      "$value": "170%"
+    }
+  },
+  "font-size": {
+    "1": {
+      "$type": "fontSizes",
+      "$value": "12"
+    },
+    "2": {
+      "$type": "fontSizes",
+      "$value": "13"
+    },
+    "3": {
+      "$type": "fontSizes",
+      "$value": "14"
+    },
+    "4": {
+      "$type": "fontSizes",
+      "$value": "16"
+    },
+    "5": {
+      "$type": "fontSizes",
+      "$value": "18"
+    },
+    "6": {
+      "$type": "fontSizes",
+      "$value": "21"
+    },
+    "7": {
+      "$type": "fontSizes",
+      "$value": "24"
+    },
+    "8": {
+      "$type": "fontSizes",
+      "$value": "30"
+    },
+    "9": {
+      "$type": "fontSizes",
+      "$value": "36"
+    },
+    "10": {
+      "$type": "fontSizes",
+      "$value": "48"
+    },
+    "11": {
+      "$type": "fontSizes",
+      "$value": "60"
+    }
+  },
+  "letter-spacing": {
+    "1": {
+      "$type": "letterSpacing",
+      "$value": "-1%"
+    },
+    "2": {
+      "$type": "letterSpacing",
+      "$value": "-0.5%"
+    },
+    "3": {
+      "$type": "letterSpacing",
+      "$value": "-0.25%"
+    },
+    "4": {
+      "$type": "letterSpacing",
+      "$value": "-0.15%"
+    },
+    "5": {
+      "$type": "letterSpacing",
+      "$value": "0%"
+    },
+    "6": {
+      "$type": "letterSpacing",
+      "$value": "0.15%"
+    },
+    "7": {
+      "$type": "letterSpacing",
+      "$value": "0.25%"
+    },
+    "8": {
+      "$type": "letterSpacing",
+      "$value": "0.5%"
+    },
+    "9": {
+      "$type": "letterSpacing",
+      "$value": "1.5%"
+    }
+  }
+}

package/dist/tokens/typography/size/small.json

@@ -0,0 +1,100 @@
+{
+  "line-height": {
+    "sm": {
+      "$type": "lineHeights",
+      "$value": "130%"
+    },
+    "md": {
+      "$type": "lineHeights",
+      "$value": "150%"
+    },
+    "lg": {
+      "$type": "lineHeights",
+      "$value": "170%"
+    }
+  },
+  "font-size": {
+    "1": {
+      "$type": "fontSizes",
+      "$value": "11"
+    },
+    "2": {
+      "$type": "fontSizes",
+      "$value": "12"
+    },
+    "3": {
+      "$type": "fontSizes",
+      "$value": "13"
+    },
+    "4": {
+      "$type": "fontSizes",
+      "$value": "14"
+    },
+    "5": {
+      "$type": "fontSizes",
+      "$value": "16"
+    },
+    "6": {
+      "$type": "fontSizes",
+      "$value": "18"
+    },
+    "7": {
+      "$type": "fontSizes",
+      "$value": "21"
+    },
+    "8": {
+      "$type": "fontSizes",
+      "$value": "24"
+    },
+    "9": {
+      "$type": "fontSizes",
+      "$value": "30"
+    },
+    "10": {
+      "$type": "fontSizes",
+      "$value": "36"
+    },
+    "11": {
+      "$type": "fontSizes",
+      "$value": "48"
+    }
+  },
+  "letter-spacing": {
+    "1": {
+      "$type": "letterSpacing",
+      "$value": "-1%"
+    },
+    "2": {
+      "$type": "letterSpacing",
+      "$value": "-0.5%"
+    },
+    "3": {
+      "$type": "letterSpacing",
+      "$value": "-0.25%"
+    },
+    "4": {
+      "$type": "letterSpacing",
+      "$value": "-0.15%"
+    },
+    "5": {
+      "$type": "letterSpacing",
+      "$value": "0%"
+    },
+    "6": {
+      "$type": "letterSpacing",
+      "$value": "0.15%"
+    },
+    "7": {
+      "$type": "letterSpacing",
+      "$value": "0.25%"
+    },
+    "8": {
+      "$type": "letterSpacing",
+      "$value": "0.5%"
+    },
+    "9": {
+      "$type": "letterSpacing",
+      "$value": "1.5%"
+    }
+  }
+}

package/dist/types/color.js

@@ -0,0 +1 @@
+

package/dist/types/index.js

@@ -0,0 +1,4 @@
+import { SizeEnum as o } from "./size.js";
+export {
+  o as SizeEnum
+};

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

@@ -1,7 +1,7 @@
-import { ListTheme } from '../List';
+import { ListItemColor } from '../List';
 import { AccessAreaListItemProps } from './AccessAreaListItem';
 export interface AccessAreaListProps {
     items: AccessAreaListItemProps[];
-    theme?: ListTheme;
+    color?: ListItemColor;
 }
-export declare const AccessAreaList: ({ items, theme }: AccessAreaListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccessAreaList: ({ items, color }: AccessAreaListProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,11 +1,14 @@
 import { ReactNode } from 'react';
-export type BadgeColor = 'neutral' | 'alert';
+import { Color } from '..';
+export type BadgeColor = Color;
+export type BadgeVariant = 'subtle' | 'strong';
 export type BadgeSize = 'sm' | 'xs';
 export interface BadgeProps {
     label?: string | number;
     color?: BadgeColor;
+    variant?: BadgeVariant;
     size?: BadgeSize;
     className?: string;
     children?: ReactNode;
 }
-export declare const Badge: ({ label, color, size, className, children }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ label, color, variant, size, className, children, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ label, color, size, className, children }: import('./Badge').BadgeProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ label, color, variant, size, className, children, }: import('./Badge').BadgeProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

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

@@ -1,7 +1,8 @@
 import { ElementType, ReactNode } from 'react';
+import { Color } from '..';
 export type ButtonVariant = 'solid' | 'outline' | 'dotted' | 'text';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'custom';
-export type ButtonColor = 'primary' | 'secondary';
+export type ButtonColor = Color | 'inherit';
 export interface ButtonBaseProps extends React.HTMLAttributes<HTMLButtonElement> {
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.

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

@@ -11,4 +11,4 @@ export interface IconButtonProps {
     onClick?: MouseEventHandler;
     dataTestId?: string;
 }
-export declare const IconButton: ({ variant, color, size, icon, iconSize, className, onClick, dataTestId, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconButton: ({ variant, size, icon, color, iconSize, className, onClick, dataTestId, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 import { IconButtonProps } from './IconButton';
 declare const meta: {
     title: string;
-    component: ({ variant, color, size, icon, iconSize, className, onClick, dataTestId, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ variant, size, icon, color, iconSize, className, onClick, dataTestId, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

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

@@ -1,8 +1,10 @@
 import { ReactNode } from 'react';
 import { AvatarGroupProps, AvatarProps } from '..';
+export type BylineColor = 'neutral' | 'company' | 'person';
 export type BylineSize = 'xs' | 'sm' | 'md' | 'lg';
 export interface BylineProps {
     size?: BylineSize;
+    color?: BylineColor;
     avatar?: AvatarProps;
     avatarGroup?: AvatarGroupProps;
     datetime?: string;
@@ -10,4 +12,4 @@ export interface BylineProps {
     children?: ReactNode;
 }
 /** Byline, possible avatar/avatarGroup, name and more info */
-export declare const Byline: ({ loading, size, avatar, avatarGroup, datetime, children }: BylineProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Byline: ({ loading, color, size, avatar, avatarGroup, datetime, children, }: BylineProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ loading, size, avatar, avatarGroup, datetime, children }: import('./Byline').BylineProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ loading, color, size, avatar, avatarGroup, datetime, children, }: import('./Byline').BylineProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

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

@@ -1,4 +1,4 @@
-import { AttachmentLinkProps } from '../Attachment';
+import { AttachmentLinkProps } from '..';
 export interface DialogAttachmentsProps {
     title?: string;
     items?: AttachmentLinkProps[];

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

@@ -1,6 +1,7 @@
 import { AvatarProps, DialogSeenByProps, DialogSelectProps, DialogStatusProps, DialogTouchedByActor, ListItemBaseProps, ListItemLinkProps } from '..';
 export type DialogListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type DialogListItemState = 'normal' | 'trashed' | 'archived';
+export type DialogListItemTheme = 'default' | 'subtle' | 'transparent';
 export interface DialogListItemProps extends ListItemBaseProps, ListItemLinkProps {
     /** Dialog title */
     title: string;
@@ -58,10 +59,12 @@ export interface DialogListItemProps extends ListItemBaseProps, ListItemLinkProp
     attachmentsCount?: number;
     /** Group id */
     groupId?: string;
+    /** Theme */
+    theme?: DialogListItemTheme;
 }
 /**
  * Represents a dialog in list view, displaying information such as the title,
  * summary, sender, and receiver.
  * to mark the item as checked/unchecked and can visually indicate if it is unread.
  */
-export declare const DialogListItem: ({ size, state, loading, select, status, sender, recipient, recipientLabel, recipientGroup, updatedAt, updatedAtLabel, archivedAt, archivedAtLabel, trashedAt, trashedAtLabel, label, dueAt, dueAtLabel, seen, seenBy, touchedBy, attachmentsCount, title, description, summary, ...rest }: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogListItem: ({ size, state, loading, select, selected, status, sender, recipient, recipientLabel, recipientGroup, updatedAt, updatedAtLabel, archivedAt, archivedAtLabel, trashedAt, trashedAtLabel, label, dueAt, dueAtLabel, seen, seenBy, touchedBy, attachmentsCount, title, description, summary, theme, ...rest }: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { MouseEventHandler } from 'react';
-export type BackdropColor = 'transparent' | 'theme';
+export type BackdropColor = 'transparent' | 'inherit';
 export interface BackdropProps {
     className?: string;
     color?: BackdropColor;

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

@@ -14,4 +14,4 @@ export interface HeaderButtonProps extends ButtonProps {
     badge?: BadgeProps | undefined;
     tabIndex?: number;
 }
-export declare const HeaderButton: ({ className, as, avatar, avatarGroup, icon, expanded, label, badge, ...buttonProps }: HeaderButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HeaderButton: ({ className, as, color, variant, avatar, avatarGroup, icon, expanded, label, badge, ...buttonProps }: HeaderButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ className, as, avatar, avatarGroup, icon, expanded, label, badge, ...buttonProps }: import('./HeaderButton').HeaderButtonProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, as, color, variant, avatar, avatarGroup, icon, expanded, label, badge, ...buttonProps }: import('./HeaderButton').HeaderButtonProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

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

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