@altinn/altinn-components 0.13.4 → 0.14.0

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

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { AvatarProps, BylineSize, IconName } from '..';
+import { AvatarProps, BylineSize, Color, IconName } from '..';
 export interface TimelineSectionProps {
     loading?: boolean;
-    seen?: boolean;
+    color?: Color;
     size?: BylineSize;
     datetime?: string;
     dateline?: string;
@@ -11,4 +11,4 @@ export interface TimelineSectionProps {
     icon?: IconName;
     children?: ReactNode;
 }
-export declare const TimelineSection: ({ loading, size, seen, datetime, dateline, byline, avatar, children, }: TimelineSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimelineSection: ({ loading, color, size, datetime, dateline, byline, avatar, children, }: TimelineSectionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,11 @@
 import { AvatarProps } from '../Avatar';
 import { BadgeProps } from '../Badge';
 import { DialogAttachmentsProps } from '../Dialog';
+import { ListItemColor, ListItemTheme } from '../List';
 import { TransmissionTypeProps } from './TransmissionType';
 export interface TransmissionItemProps {
+    color?: ListItemColor;
+    theme?: ListItemTheme;
     type?: TransmissionTypeProps;
     loading?: boolean;
     expanded?: boolean;
@@ -15,4 +18,4 @@ export interface TransmissionItemProps {
     summary?: string;
     attachments?: DialogAttachmentsProps;
 }
-export declare const TransmissionItem: ({ type, loading, sender, createdAt, createdAtLabel, title, description, summary, attachments, }: TransmissionItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TransmissionItem: ({ theme, type, loading, sender, createdAt, createdAtLabel, title, description, summary, attachments, }: TransmissionItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ type, loading, sender, createdAt, createdAtLabel, title, description, summary, attachments, }: import('./TransmissionItem').TransmissionItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ theme, type, loading, sender, createdAt, createdAtLabel, title, description, summary, attachments, }: import('./TransmissionItem').TransmissionItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

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

@@ -1,12 +1,12 @@
 import { ElementType, ReactNode } from 'react';
-export type TypographyTheme = 'inherit' | 'neutral' | 'company' | 'person' | 'article';
+export type TypographyColor = 'neutral' | 'company' | 'person' | 'article';
 export type TypographySize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface TypographyProps {
     as?: ElementType;
     size?: TypographySize;
-    theme?: TypographyTheme;
+    color?: TypographyColor;
     className?: string;
     children?: ReactNode;
     href?: string;
 }
-export declare const Typography: ({ as, size, theme, className, children, ...restProps }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Typography: ({ as, size, color, className, children, ...restProps }: TypographyProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
+export * from '../types/';
 export * from './Attachment';
 export * from './Autocomplete';
 export * from './Avatar';

package/dist/types/lib/types/color.d.ts

@@ -0,0 +1,2 @@
+export type Color = 'accent' | 'company' | 'person' | 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'alert';
+export type Theme = 'transparent' | 'default' | 'subtle' | 'surface-default' | 'surface-hover' | 'surface-active' | 'border-subtle' | 'border-default' | 'border-strong' | 'base-default' | 'base-hover' | 'base-active';

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

@@ -0,0 +1,4 @@
+export * from './color';
+export * from './shadow';
+export * from './range';
+export * from './size';

package/dist/types/lib/types/range.d.ts

@@ -0,0 +1 @@
+export type Range<N extends number, T extends number[] = []> = T['length'] extends N ? T[number] : Range<N, [...T, T['length']]>;

package/dist/types/lib/types/shadow.d.ts

@@ -0,0 +1 @@
+export type Shadow = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/dist/types/lib/types/size.d.ts

@@ -0,0 +1,8 @@
+export declare enum SizeEnum {
+    xs = "XSmall",
+    sm = "Small",
+    md = "Medium",
+    lg = "Large",
+    xl = "XL"
+}
+export type Size = keyof typeof SizeEnum;

package/dist/types/range.js

@@ -0,0 +1 @@
+

package/dist/types/shadow.js

@@ -0,0 +1 @@
+

package/dist/types/size.js

@@ -0,0 +1,4 @@
+var r = /* @__PURE__ */ ((l) => (l.xs = "XSmall", l.sm = "Small", l.md = "Medium", l.lg = "Large", l.xl = "XL", l))(r || {});
+export {
+  r as SizeEnum
+};

package/package.json

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

package/dist/assets/ActionMenu.css

@@ -1 +0,0 @@
-._menu_12gbo_1{padding:0 .5rem;border-radius:.375rem}._menu_12gbo_1[data-theme]{background-color:var(--theme-background-subtle)}._menu_12gbo_1[data-theme=inherit]{background-color:inherit}._list_12gbo_14{display:flex;flex-direction:column;list-style:none;padding:0;margin:0}@media (min-width: 1024px){._list_12gbo_14{flex-direction:row;align-items:center;justify-content:start;column-gap:.5rem;width:auto}}

package/dist/assets/ListBase.css

@@ -1 +0,0 @@
-._list_1xr8s_1{display:flex;flex-direction:column;width:100%}._list_1xr8s_1[data-spacing=xs]{row-gap:2px}._list_1xr8s_1[data-spacing=sm]{row-gap:4px}._list_1xr8s_1[data-spacing=md]{row-gap:8px}._list_1xr8s_1[data-spacing=lg]{row-gap:16px}._list_1xr8s_1[data-color=white]{background-color:#fff}._list_1xr8s_1[data-shadow=xs]{box-shadow:var(--ds-shadow-xs)}

package/dist/assets/Section.css

@@ -1 +0,0 @@
-._section_1u2zl_1[data-bg=default]{background-color:var(--theme-background-default)}._section_1u2zl_1[data-bg=subtle]{background-color:var(--theme-background-subtle)}._section_1u2zl_1[data-bg=surface]{background-color:var(--theme-surface-default)}._section_1u2zl_1[data-bg=border]{background-color:var(--theme-border-default)}._section_1u2zl_1[data-bg=base]{background-color:var(--theme-base-default);color:var(--theme-contrast-default)}._section_1u2zl_1[data-shadow=xs]{box-shadow:var(--ds-shadow-xs)}._section_1u2zl_1[data-shadow=sm]{box-shadow:var(--ds-shadow-sm)}._section_1u2zl_1[data-shadow=md]{box-shadow:var(--ds-shadow-md)}._section_1u2zl_1[data-shadow=lg]{box-shadow:var(--ds-shadow-lg)}._section_1u2zl_1[data-shadow=xl]{box-shadow:var(--ds-shadow-xl)}

package/dist/assets/Swatches.css

@@ -1 +0,0 @@
-._swatch_7wpu2_1{width:4rem;height:4rem;border:1px solid}._row_7wpu2_7{display:flex}._col_7wpu2_11{display:flex;flex-direction:column}

package/dist/colors.css

@@ -1,113 +0,0 @@
-:root {
-  --colors-neutral-1: #ffffff;
-  --colors-neutral-2: #f3f4f5;
-  --colors-neutral-3: #e2e3e5;
-  --colors-neutral-4: #cfd1d4;
-  --colors-neutral-5: #bec1c6;
-  --colors-neutral-6: #b9bcc1;
-  --colors-neutral-7: #7c818b;
-  --colors-neutral-8: #464e5c;
-  --colors-neutral-9: #212b3b;
-  --colors-neutral-10: #333c4a;
-  --colors-neutral-11: #464e5c;
-  --colors-neutral-12: #5d6470;
-  --colors-neutral-13: #232c3c;
-
-  --colors-company-1: #ffffff;
-  --colors-company-2: #e9f5ff;
-  --colors-company-3: #d3eafd;
-  --colors-company-4: #a5d6fb;
-  --colors-company-5: #78c1f9;
-  --colors-company-6: #4badf7;
-  --colors-company-7: #1e98f5;
-  --colors-company-8: #4086d7;
-  --colors-company-9: #111d46;
-  --colors-company-10: #364163;
-  --colors-company-11: #166aac;
-  --colors-company-12: #5a637f;
-  --colors-company-13: #1e2950;
-
-  --colors-person-1: #ffffff;
-  --colors-person-2: #eaf7ef;
-  --colors-person-3: #a8f3d0;
-  --colors-person-4: #6ee7b7;
-  --colors-person-5: #34d399;
-  --colors-person-6: #10b981;
-  --colors-person-7: #079669;
-  --colors-person-8: #347659;
-  --colors-person-9: #084826;
-  --colors-person-10: #076046;
-  --colors-person-11: #3b6d52;
-  --colors-person-12: #3b6d52;
-  --colors-person-13: #06331b;
-
-  /* link **/
-
-  --link-base-default: #2a4dd0;
-  --link-base-hover: #213ca3;
-  --link-base-active: #192d7b;
-
-  /* global */
-
-  --global-background-default: var(--colors-neutral-2);
-  --global-background-subtle: var(--colors-neutral-1);
-  --global-base-default: var(--colors-neutral-9);
-  --global-base-hover: var(--colors-neutral-10);
-  --global-base-active: var(--colors-neutral-11);
-  --global-border-default: var(--colors-neutral-7);
-  --global-border-strong: var(--colors-neutral-8);
-  --global-border-subtle: var(--colors-neutral-6);
-  --global-surface-active: var(--colors-neutral-5);
-  --global-surface-default: var(--colors-neutral-3);
-  --global-surface-hover: var(--colors-neutral-4);
-  --global-text-default: var(--colors-neutral-13);
-  --global-text-subtle: var(--colors-neutral-12);
-
-  /* neutral */
-
-  --neutral-background-default: var(--colors-neutral-1);
-  --neutral-background-subtle: var(--colors-neutral-2);
-  --neutral-base-default: var(--colors-neutral-9);
-  --neutral-base-hover: var(--colors-neutral-10);
-  --neutral-base-active: var(--colors-neutral-11);
-  --neutral-border-default: var(--colors-neutral-7);
-  --neutral-border-strong: var(--colors-neutral-8);
-  --neutral-border-subtle: var(--colors-neutral-6);
-  --neutral-surface-active: var(--colors-neutral-5);
-  --neutral-surface-default: var(--colors-neutral-3);
-  --neutral-surface-hover: var(--colors-neutral-4);
-  --neutral-text-default: var(--colors-neutral-13);
-  --neutral-text-subtle: var(--colors-neutral-12);
-
-  /* company */
-
-  --company-background-default: var(--colors-company-1);
-  --company-background-subtle: var(--colors-company-2);
-  --company-base-default: var(--colors-company-9);
-  --company-base-hover: var(--colors-company-10);
-  --company-base-active: var(--colors-company-11);
-  --company-border-default: var(--colors-company-7);
-  --company-border-strong: var(--colors-company-8);
-  --company-border-subtle: var(--colors-company-6);
-  --company-surface-active: var(--colors-company-5);
-  --company-surface-default: var(--colors-company-3);
-  --company-surface-hover: var(--colors-company-4);
-  --company-text-default: var(--colors-company-13);
-  --company-text-subtle: var(--colors-company-12);
-
-  /* person */
-
-  --person-background-default: var(--colors-person-1);
-  --person-background-subtle: var(--colors-person-2);
-  --person-base-default: var(--colors-person-9);
-  --person-base-hover: var(--colors-person-10);
-  --person-base-active: var(--colors-person-11);
-  --person-border-default: var(--colors-person-7);
-  --person-border-strong: var(--colors-person-8);
-  --person-border-subtle: var(--colors-person-6);
-  --person-surface-active: var(--colors-person-5);
-  --person-surface-default: var(--colors-person-3);
-  --person-surface-hover: var(--colors-person-4);
-  --person-text-default: var(--colors-person-13);
-  --person-text-subtle: var(--colors-person-12);
-}

package/dist/components/LayoutAction/ActionMenu.js

@@ -1,16 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
-import "react";
-import "../Autocomplete/AutocompleteBase.js";
-import "../RootProvider/RootProvider.js";
-import "../Snackbar/useSnackbar.js";
-import { MenuItem as o } from "../Menu/MenuItem.js";
-import { MenuBase as n } from "../Menu/MenuBase.js";
-import '../../assets/ActionMenu.css';const s = "_menu_12gbo_1", l = "_list_12gbo_14", i = {
-  menu: s,
-  list: l
-}, N = ({ theme: r = "inherit", items: e = [] }) => /* @__PURE__ */ t(n, { theme: r, className: i.menu, children: /* @__PURE__ */ t("ul", { className: i.list, children: e.map((m) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(o, { ...m, className: i.item }) }, m.id)) }) });
-export {
-  N as ActionMenu
-};

package/dist/shadows.css

@@ -1,7 +0,0 @@
-:root {
-  --ds-shadow-xs: 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
-  --ds-shadow-sm: 0 0 1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-  --ds-shadow-md: 0 0 1px 0 rgba(0, 0, 0, 0.14), 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.12);
-  --ds-shadow-lg: 0 0 1px 0 rgba(0, 0, 0, 0.13), 0 3px 5px 0 rgba(0, 0, 0, 0.13), 0 6px 12px 0 rgba(0, 0, 0, 0.14);
-  --ds-shadow-xl: 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.16), 0 12px 24px 0 rgba(0, 0, 0, 0.16);
-}

package/dist/theme-article.css

@@ -1,15 +0,0 @@
-[data-theme="article"] {
-  --theme-background-default: var(--neutral-background-subtle);
-  --theme-background-subtle: var(--neutral-background-default);
-  --theme-base-active: var(--link-base-active);
-  --theme-base-default: var(--link-base-default);
-  --theme-base-hover: var(--link-base-hover);
-  --theme-border-default: var(--neutral-border-default);
-  --theme-border-strong: var(--neutral-border-strong);
-  --theme-border-subtle: var(--neutral-border-subtle);
-  --theme-surface-active: var(--company-surface-active);
-  --theme-surface-default: var(--company-surface-default);
-  --theme-surface-hover: var(--neutral-surface-hover);
-  --theme-text-default: var(--neutral-text-default);
-  --theme-text-subtle: var(--neutral-text-subtle);
-}

package/dist/theme-company.css

@@ -1,15 +0,0 @@
-[data-theme="company"] {
-  --theme-background-default: var(--company-background-default);
-  --theme-background-subtle: var(--company-background-subtle);
-  --theme-base-active: var(--company-base-active);
-  --theme-base-default: var(--company-base-default);
-  --theme-base-hover: var(--company-base-hover);
-  --theme-border-default: var(--company-border-default);
-  --theme-border-strong: var(--company-border-strong);
-  --theme-border-subtle: var(--company-border-subtle);
-  --theme-surface-active: var(--company-surface-active);
-  --theme-surface-default: var(--company-surface-default);
-  --theme-surface-hover: var(--company-surface-hover);
-  --theme-text-default: var(--company-text-default);
-  --theme-text-subtle: var(--company-text-subtle);
-}

package/dist/theme-global-dark.css

@@ -1,19 +0,0 @@
-[data-theme="global-dark"] {
-  --theme-background-default: var(--company-base-hover);
-  --theme-background-subtle: var(--company-base-default);
-
-  --theme-base-default: var(--company-background-subtle);
-  --theme-base-hover: var(--company-base-hover);
-  --theme-base-active: var(--company-base-active);
-
-  --theme-border-default: var(--neutral-border-default);
-  --theme-border-strong: var(--neutral-border-strong);
-  --theme-border-subtle: var(--neutral-border-subtle);
-
-  --theme-surface-default: var(--company-base-default);
-  --theme-surface-hover: var(--company-base-hover);
-  --theme-surface-active: var(--company-base-active);
-
-  --theme-text-default: var(--company-background-default);
-  --theme-text-subtle: var(--company-background-subtle);
-}

package/dist/theme-global.css

@@ -1,15 +0,0 @@
-[data-theme="global"] {
-  --theme-background-default: var(--neutral-background-subtle);
-  --theme-background-subtle: var(--neutral-background-default);
-  --theme-base-active: var(--company-base-active);
-  --theme-base-default: var(--company-base-default);
-  --theme-base-hover: var(--company-base-hover);
-  --theme-border-default: var(--neutral-border-default);
-  --theme-border-strong: var(--neutral-border-strong);
-  --theme-border-subtle: var(--neutral-border-subtle);
-  --theme-surface-active: var(--neutral-surface-active);
-  --theme-surface-default: var(--neutral-surface-default);
-  --theme-surface-hover: var(--neutral-surface-hover);
-  --theme-text-default: var(--neutral-text-default);
-  --theme-text-subtle: var(--neutral-text-subtle);
-}

package/dist/theme-neutral.css

@@ -1,15 +0,0 @@
-[data-theme="neutral"] {
-  --theme-background-default: var(--neutral-background-default);
-  --theme-background-subtle: var(--neutral-background-subtle);
-  --theme-base-active: var(--neutral-base-active);
-  --theme-base-default: var(--neutral-base-default);
-  --theme-base-hover: var(--neutral-base-hover);
-  --theme-border-default: var(--neutral-border-default);
-  --theme-border-strong: var(--neutral-border-strong);
-  --theme-border-subtle: var(--neutral-border-subtle);
-  --theme-surface-active: var(--neutral-surface-active);
-  --theme-surface-default: var(--neutral-surface-default);
-  --theme-surface-hover: var(--neutral-surface-hover);
-  --theme-text-default: var(--neutral-text-default);
-  --theme-text-subtle: var(--neutral-text-subtle);
-}

package/dist/theme-person.css

@@ -1,15 +0,0 @@
-[data-theme="person"] {
-  --theme-background-default: var(--person-background-default);
-  --theme-background-subtle: var(--person-background-subtle);
-  --theme-base-active: var(--person-base-active);
-  --theme-base-default: var(--person-base-default);
-  --theme-base-hover: var(--person-base-hover);
-  --theme-border-default: var(--person-border-default);
-  --theme-border-strong: var(--person-border-strong);
-  --theme-border-subtle: var(--person-border-subtle);
-  --theme-surface-active: var(--person-surface-active);
-  --theme-surface-default: var(--person-surface-default);
-  --theme-surface-hover: var(--person-surface-hover);
-  --theme-text-default: var(--person-text-default);
-  --theme-text-subtle: var(--person-text-subtle);
-}

package/dist/theme.css

@@ -1,22 +0,0 @@
-html {
-  --theme-background-default: var(--global-background-default);
-  --theme-background-subtle: var(--global-background-subtle);
-  --theme-base-active: var(--global-base-active);
-  --theme-base-default: var(--global-base-default);
-  --theme-base-hover: var(--global-base-hover);
-  --theme-border-default: var(--global-border-default);
-  --theme-border-strong: var(--global-border-strong);
-  --theme-border-subtle: var(--global-border-subtle);
-  --theme-surface-active: var(--global-surface-active);
-  --theme-surface-default: var(--global-surface-default);
-  --theme-surface-hover: var(--global-surface-hover);
-  --theme-text-default: var(--global-text-default);
-  --theme-text-subtle: var(--global-text-subtle);
-}
-html[data-theme] {
-  background: var(--theme-background-subtle);
-  color: var(--neutral-text-default);
-}
-body {
-  background-color: inherit;
-}

package/dist/types/lib/components/LayoutAction/ActionFooter.stories.d.ts

@@ -1,11 +0,0 @@
-import { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: ({ hidden, children }: import('./ActionFooter').ActionFooterProps) => import("react/jsx-runtime").JSX.Element;
-    tags: string[];
-    parameters: {};
-    args: {};
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Menu: Story;

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

@@ -1,11 +0,0 @@
-import { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: ({ hidden, title, dismissable, onDismiss }: import('./ActionHeader').ActionHeaderProps) => import("react/jsx-runtime").JSX.Element;
-    tags: string[];
-    parameters: {};
-    args: {};
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;

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

@@ -1,6 +0,0 @@
-import { MenuItemProps, MenuTheme } from '../Menu';
-export interface ActionMenuProps {
-    theme?: MenuTheme;
-    items?: MenuItemProps[];
-}
-export declare const ActionMenu: ({ theme, items }: ActionMenuProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,17 +0,0 @@
-import { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: ({ level, expanded, search, items, groups, defaultItemColor, defaultItemSize, }: import('./MenuItems').MenuItemsProps) => import("react/jsx-runtime").JSX.Element;
-    tags: string[];
-    parameters: {};
-    args: {};
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const InboxMenu: Story;
-export declare const PersonMenu: Story;
-export declare const CompanyMenu: Story;
-export declare const AccountMenu: Story;
-export declare const CollapsibleGlobalMenu: Story;
-export declare const ExpandedGlobalMenu: Story;
-export declare const DrilldownMenu: Story;

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

@@ -1,12 +0,0 @@
-declare const meta: {
-    title: string;
-    component: ({ children, ...props }: import('./PageBase').PageBaseProps) => import("react/jsx-runtime").JSX.Element;
-    tags: string[];
-    parameters: {};
-    args: {};
-};
-export default meta;
-export declare const Frontpage: () => import("react/jsx-runtime").JSX.Element;
-export declare const ArticlePage: () => import("react/jsx-runtime").JSX.Element;
-export declare const DialogPage: () => import("react/jsx-runtime").JSX.Element;
-export declare const ProfilePage: () => import("react/jsx-runtime").JSX.Element;