@altinn/altinn-components 0.9.1 → 0.10.1

package/dist/components/Page/PageBase.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { SectionBaseProps } from './SectionBase';
-export interface PageBaseProps extends SectionBaseProps {
+import { SectionProps } from './Section';
+export interface PageBaseProps extends SectionProps {
     children?: ReactNode;
 }
 export declare const PageBase: ({ children, ...props }: PageBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Page/PageBase.js

@@ -1,6 +1,6 @@
-import { jsx as e } from "react/jsx-runtime";
-import { SectionBase as t } from "./SectionBase.js";
-const s = ({ children: o, ...r }) => /* @__PURE__ */ e(t, { as: "main", ...r, children: o });
+import { jsx as t } from "react/jsx-runtime";
+import { Section as e } from "./Section.js";
+const s = ({ children: o, ...r }) => /* @__PURE__ */ t(e, { as: "div", ...r, children: o });
 export {
   s as PageBase
 };

package/dist/components/Page/PageBase.stories.js

@@ -0,0 +1,54 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { Typography as t } from "../Typography/Typography.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import { Button as s } from "../Button/Button.js";
+import "../RootProvider/RootProvider.js";
+import { Byline as g } from "../Byline/Byline.js";
+import { PageBase as i } from "./PageBase.js";
+import { PageNav as o } from "./PageNav.js";
+import { PageHeader as a } from "./PageHeader.js";
+import { Section as n } from "./Section.js";
+import { Article as l } from "./Article.js";
+import { nav as m } from "../../examples/avatar/nav.js";
+const N = {
+  title: "Page/PageBase",
+  component: i,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, w = () => /* @__PURE__ */ r(i, { color: "subtle", shadow: "xs", children: [
+  /* @__PURE__ */ e(o, { padding: "sm" }),
+  /* @__PURE__ */ e(l, { padding: "lg", children: /* @__PURE__ */ e(a, { title: "Article", children: /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e("p", { children: "Some text" }) }) }) })
+] }), z = () => /* @__PURE__ */ r(i, { spacing: "lg", children: [
+  /* @__PURE__ */ r(n, { color: "subtle", shadow: "xs", children: [
+    /* @__PURE__ */ e(o, { padding: "sm" }),
+    /* @__PURE__ */ e(a, { avatar: { name: "Zulu Salamander" }, title: "Zulu Salamander", padding: "lg", children: "Tabs?" })
+  ] }),
+  /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e("p", { children: "Lorem ipsum dolor sit amet" }) }) })
+] }), D = ({ args: d }) => /* @__PURE__ */ r(i, { spacing: "lg", children: [
+  /* @__PURE__ */ e(o, {}),
+  /* @__PURE__ */ r(l, { spacing: "lg", children: [
+    /* @__PURE__ */ r(a, { icon: "teddy-bear", title: "Barneoppdragelse i hjemmet", children: [
+      /* @__PURE__ */ e(t, { size: "lg", children: "Når du har unger som ikke gjør som du sier kan du bruke dette skjemaet." }),
+      /* @__PURE__ */ r(g, { avatar: m, children: [
+        /* @__PURE__ */ e("strong", { children: "NAV, " }),
+        " 14. oktober 2024"
+      ] }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(s, { children: "Start skjema" }) })
+    ] }),
+    /* @__PURE__ */ e(n, { children: /* @__PURE__ */ r(t, { size: "lg", children: [
+      /* @__PURE__ */ e("p", { children: "Barneoppdragelse i hjemmet handler om å skape en balanse mellom kjærlighet, grenser og respekt. Det er viktig å vise barna ubetinget kjærlighet og støtte, samtidig som man setter tydelige og konsistente grenser som hjelper dem å forstå hva som er akseptabel oppførsel." }),
+      /* @__PURE__ */ e("h2", { children: "Nøkkelen" }),
+      /* @__PURE__ */ e("p", { children: "Kommunikasjon er nøkkelen: lytte til barnas tanker og følelser, og gi dem mulighet til å uttrykke seg, samtidig som man forklarer hvorfor regler og forventninger finnes. Positiv forsterkning, som ros og anerkjennelse av gode handlinger, fremmer ønsket adferd, mens konstruktiv veiledning bør erstatte streng straff. Ved å være en god rollemodell og skape et trygt, strukturert og kjærlig miljø, gir man barna de beste forutsetninger for å utvikle seg til trygge, ansvarlige og empatiske individer." })
+    ] }) })
+  ] })
+] });
+export {
+  D as ArticlePage,
+  w as DialogPage,
+  z as ProfilePage,
+  N as default
+};

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

@@ -1,7 +1,9 @@
-import { PageHeaderMediaProps } from './PageHeaderMedia';
-import { SectionBaseProps } from './SectionBase';
-export interface PageHeaderProps extends SectionBaseProps, PageHeaderMediaProps {
+import { AvatarGroupProps, AvatarProps, IconName, SectionProps } from '..';
+export interface PageHeaderProps extends SectionProps {
     title?: string;
     description?: string;
+    icon?: IconName;
+    avatar?: AvatarProps;
+    avatarGroup?: AvatarGroupProps;
 }
-export declare const PageHeader: ({ title, description, icon, avatar, avatarGroup, children, ...props }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PageHeader: ({ title, icon, avatar, avatarGroup, children, ...rest }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Page/PageHeader.js

@@ -1,23 +1,19 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as r, jsx as i } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { Heading as c } from "../Typography/Heading.js";
+import { Heading as a } from "../Typography/Heading.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import { SectionBase as n } from "./SectionBase.js";
-import { P as p, s as i } from "../../PageHeaderMedia-DpZ09tLD.js";
-import { PageNav as l } from "./PageNav.js";
-const z = ({ title: a, description: o, icon: s, avatar: m, avatarGroup: t, children: h, ...d }) => /* @__PURE__ */ r(n, { as: "header", ...d, children: [
-  /* @__PURE__ */ e(l, {}),
-  /* @__PURE__ */ r("section", { className: i.header, children: [
-    /* @__PURE__ */ e(p, { icon: s, avatar: m, avatarGroup: t }),
-    /* @__PURE__ */ r("div", { className: i.title, children: [
-      /* @__PURE__ */ e(c, { size: "md", children: a }),
-      /* @__PURE__ */ e("div", { className: "description", children: o })
-    ] })
-  ] })
+import { ListItemMedia as d } from "../List/ListItemMedia.js";
+import { Section as e } from "./Section.js";
+const u = ({ title: o, icon: m, avatar: t, avatarGroup: p, children: n, ...s }) => /* @__PURE__ */ r(e, { as: "header", spacing: "md", ...s, children: [
+  /* @__PURE__ */ r(e, { flex: "row", align: "center", spacing: "md", children: [
+    /* @__PURE__ */ i(d, { avatar: t, avatarGroup: p, icon: m, size: "lg" }),
+    /* @__PURE__ */ i(a, { size: "lg", children: o })
+  ] }),
+  n
 ] });
 export {
-  z as PageHeader
+  u as PageHeader
 };

package/dist/components/Page/PageHeader.stories.js

@@ -0,0 +1,91 @@
+import { PageHeader as e } from "./PageHeader.js";
+const t = {
+  title: "Page/PageHeader",
+  component: e,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    title: "Page title"
+  }
+}, r = {
+  args: {}
+}, n = {
+  args: {
+    avatar: {
+      type: "company",
+      name: "Zero Zulu"
+    },
+    title: "Zero Zulu"
+  }
+}, o = {
+  args: {
+    avatar: {
+      name: "Zero Zulu"
+    },
+    title: "Zero Zulu"
+  }
+}, s = {
+  args: {
+    icon: "teddy-bear",
+    title: "Zero Zulu"
+  }
+}, l = {
+  args: {
+    avatarGroup: {
+      defaultType: "person",
+      items: [
+        {
+          name: "Albert Åberg"
+        },
+        {
+          name: "Birger Meling"
+        },
+        {
+          name: "Celine Dion"
+        }
+      ]
+    }
+  }
+}, m = {
+  args: {
+    avatarGroup: {
+      defaultType: "company",
+      items: [
+        {
+          name: "Albert Åberg"
+        },
+        {
+          name: "Birger Meling"
+        },
+        {
+          name: "Celine Dion"
+        }
+      ]
+    }
+  }
+}, g = {
+  args: {
+    avatarGroup: {
+      items: [
+        {
+          type: "company",
+          name: "Albert Åberg"
+        },
+        {
+          type: "person",
+          name: "Birger Meling"
+        }
+      ]
+    }
+  }
+};
+export {
+  m as Companies,
+  n as Company,
+  g as CompanyAndPerson,
+  r as Default,
+  s as Icon,
+  l as People,
+  o as Person,
+  t as default
+};

package/dist/components/Page/PageNav.d.ts

@@ -1,14 +1,13 @@
-import { ElementType, ReactNode } from 'react';
-export interface PageBackButtonProps {
-    as?: ElementType;
-    href?: string;
-    label?: string;
-}
-export interface PageNavProps {
-    backButton?: PageBackButtonProps;
+import { ReactNode } from 'react';
+import { BackButtonProps, ContextMenuProps, SectionProps } from '../';
+export type PageNavPadding = 'none' | 'sm';
+export interface PageNavProps extends SectionProps {
+    padding?: PageNavPadding;
+    backButton?: BackButtonProps;
+    menu?: ContextMenuProps;
     children?: ReactNode;
 }
 /**
- * Page navigation bar with back button or breadcrumbs.
+ * Page navigation bar with Back button and controls.
  */
-export declare const PageNav: ({ backButton, children, }: PageNavProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PageNav: ({ padding, backButton, menu, children, }: PageNavProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Page/PageNav.js

@@ -1,20 +1,30 @@
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { Button as e } from "../Button/Button.js";
-import '../../assets/DialogNav.css';const i = "_nav_678a5_1", c = "_action_678a5_8", r = {
-  nav: i,
-  action: c
-}, _ = ({
-  backButton: a = {
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import { Button as s } from "../Button/Button.js";
+import "../RootProvider/RootProvider.js";
+import { ContextMenu as l } from "../ContextMenu/ContextMenu.js";
+import { Section as c } from "./Section.js";
+import '../../assets/PageNav.css';const a = "_nav_9bu1z_1", m = "_controls_9bu1z_7", p = {
+  nav: a,
+  controls: m
+}, g = ({
+  padding: n = "none",
+  backButton: o = {
     as: "a",
     label: "Back"
   },
-  children: n
-}) => /* @__PURE__ */ s("nav", { className: r.nav, children: [
-  /* @__PURE__ */ o(e, { ...a, variant: "text", color: "secondary", icon: "arrow-left", children: (a == null ? void 0 : a.label) || "Back" }),
-  /* @__PURE__ */ o("div", { className: r.action, children: n })
+  menu: r,
+  children: i
+}) => /* @__PURE__ */ e(c, { flex: "row", align: "center", justify: "between", padding: n, children: [
+  /* @__PURE__ */ t(s, { ...o, variant: "text", color: "secondary", icon: "arrow-left", children: (o == null ? void 0 : o.label) || "Back" }),
+  /* @__PURE__ */ e("div", { className: p.controls, children: [
+    i,
+    r && /* @__PURE__ */ t(l, { ...r })
+  ] })
 ] });
 export {
-  _ as PageNav
+  g as PageNav
 };

package/dist/components/Page/PageNav.stories.js

@@ -0,0 +1,41 @@
+import "../../examples/globalMenu.js";
+import "../../examples/inboxFilters.js";
+import "react/jsx-runtime";
+import "react";
+import { dialogContextMenu as t } from "../../examples/dialog/dialogContextMenu.js";
+import "../../examples/dialog/reportingDraftDialog.js";
+import "../../examples/dialog/reportingInProgressDialog.js";
+import "../../examples/dialog/reportingCompletedDialog.js";
+import "../../examples/dialog/transmissionsTimeline.js";
+import "../../examples/dialog/transmissionsInProgressDialog.js";
+import "../../examples/dialog/transmissionsCompletedDialog.js";
+import { PageNav as o } from "./PageNav.js";
+const g = {
+  title: "Page/PageNav",
+  component: o,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    backButton: {
+      label: "Tilbake"
+    }
+  }
+}, k = {
+  args: {
+    backButton: {
+      label: "Tilbake"
+    }
+  }
+}, B = {
+  args: {
+    backButton: {
+      label: "Tilbake"
+    },
+    menu: t
+  }
+};
+export {
+  B as BackAndContextMenu,
+  k as BackButton,
+  g as default
+};

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

@@ -0,0 +1,29 @@
+import { CSSProperties, ReactNode } from 'react';
+export type SectionTheme = 'inherit' | 'global' | 'neutral' | 'article';
+export type SectionColor = 'transparent' | 'subtle' | 'surface' | 'accent';
+export type SectionElement = 'section' | 'article' | 'header' | 'footer' | 'div';
+export type SectionSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SectionPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SectionMargin = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SectionShadow = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SectionFlex = 'col' | 'row';
+export type SectionAlign = 'initial' | 'start' | 'end' | 'center' | 'stretch';
+export type SectionJustify = 'initial' | 'start' | 'end' | 'center' | 'between';
+export interface SectionProps {
+    as?: SectionElement;
+    theme?: SectionTheme;
+    color?: SectionColor;
+    flex?: SectionFlex;
+    align?: SectionAlign;
+    justify?: SectionJustify;
+    reverse?: boolean;
+    padding?: SectionPadding;
+    spacing?: SectionSpacing;
+    margin?: SectionMargin;
+    shadow?: SectionShadow;
+    inset?: boolean;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const Section: ({ as, theme, color, flex, reverse, align, justify, padding, spacing, margin, shadow, inset, className, style, children, }: SectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Page/Section.js

@@ -0,0 +1,42 @@
+import { jsx as x } from "react/jsx-runtime";
+import { c as h } from "../../index-L8X2o7IH.js";
+import '../../assets/Section.css';const _ = "_section_1qkfl_1", j = {
+  section: _
+}, k = ({
+  as: a = "section",
+  theme: t = "inherit",
+  color: n = "transparent",
+  flex: e = "col",
+  reverse: o = !1,
+  align: s = "initial",
+  justify: i = "initial",
+  padding: c = "none",
+  spacing: d = "none",
+  margin: r = "none",
+  shadow: l = "none",
+  inset: m = !1,
+  className: p,
+  style: f,
+  children: g
+}) => /* @__PURE__ */ x(
+  a,
+  {
+    className: h(j.section, p),
+    style: f,
+    "data-flex": e,
+    "data-reverse": o,
+    "data-align": s,
+    "data-justify": i,
+    "data-theme": t,
+    "data-color": n,
+    "data-inset": m,
+    "data-padding": c,
+    "data-spacing": d,
+    "data-margin": r,
+    "data-shadow": l,
+    children: g
+  }
+);
+export {
+  k as Section
+};

package/dist/components/Page/SectionHeader.d.ts

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
-export interface SectionHeaderProps {
-    padding?: boolean;
-    margin?: boolean;
+import { SectionProps } from './Section';
+export interface SectionHeaderProps extends SectionProps {
     children?: ReactNode;
 }
-export declare const SectionHeader: ({ margin, children }: SectionHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SectionHeader: ({ flex, align, justify, children, ...rest }: SectionHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Page/SectionHeader.js

@@ -1,7 +1,12 @@
-import { jsx as r } from "react/jsx-runtime";
-import '../../assets/SectionHeader.css';const s = "_header_77w1b_1", t = {
-  header: s
-}, o = ({ margin: e = !1, children: a }) => /* @__PURE__ */ r("header", { "data-margin": e, className: t.header, children: a });
+import { jsx as c } from "react/jsx-runtime";
+import { Section as i } from "./Section.js";
+const p = ({
+  flex: e = "row",
+  align: r = "center",
+  justify: o = "between",
+  children: t,
+  ...n
+}) => /* @__PURE__ */ c(i, { as: "header", flex: e, align: r, justify: o, ...n, children: t });
 export {
-  o as SectionHeader
+  p as SectionHeader
 };

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

@@ -1,5 +1,7 @@
 export * from './PageBase';
+export * from './PageNav';
 export * from './PageHeader';
-export * from './SectionBase';
 export * from './SectionHeader';
 export * from './SectionFooter';
+export * from './Article';
+export * from './Section';

package/dist/components/Page/index.js

@@ -1,12 +1,16 @@
 import { PageBase as r } from "./PageBase.js";
-import { PageHeader as a } from "./PageHeader.js";
-import { SectionBase as m } from "./SectionBase.js";
+import { PageNav as a } from "./PageNav.js";
+import { PageHeader as m } from "./PageHeader.js";
 import { SectionHeader as x } from "./SectionHeader.js";
 import { SectionFooter as i } from "./SectionFooter.js";
+import { Article as n } from "./Article.js";
+import { Section as S } from "./Section.js";
 export {
+  n as Article,
   r as PageBase,
-  a as PageHeader,
-  m as SectionBase,
+  m as PageHeader,
+  a as PageNav,
+  S as Section,
   i as SectionFooter,
   x as SectionHeader
 };

package/dist/components/ResourceList/ResourceList.d.ts

@@ -3,4 +3,4 @@ import { ResourceListItemProps } from './ResourceListItem';
 export interface ResourceListProps extends Omit<ListProps, 'items'> {
     items: ResourceListItemProps[];
 }
-export declare const ResourceList: ({ items, size, ...props }: ResourceListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ResourceList: ({ items, defaultItemSize, ...props }: ResourceListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ResourceList/ResourceList.js

@@ -6,7 +6,7 @@ import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
 import { ResourceListItem as p } from "./ResourceListItem.js";
 import { ListBase as s } from "../List/ListBase.js";
-const x = ({ items: o, size: t = "md", ...m }) => /* @__PURE__ */ e(s, { ...m, children: o.map((r) => /* @__PURE__ */ i(p, { ...r, key: r.id, size: t })) });
+const x = ({ items: o, defaultItemSize: t = "md", ...m }) => /* @__PURE__ */ e(s, { ...m, children: o.map((r) => /* @__PURE__ */ i(p, { ...r, key: r.id, size: t })) });
 export {
   x as ResourceList
 };

package/dist/components/ResourceList/ResourceList.stories.js

@@ -245,10 +245,10 @@ const o = [
   args: {
     spacing: "md",
     items: r,
-    size: "md"
+    defaultItemSize: "md"
   },
   argTypes: {
-    size: {
+    defaultItemSize: {
       options: ["sm", "md", "lg"],
       control: {
         type: "inline-radio"

package/dist/components/ResourceList/ResourceListItem.d.ts

@@ -1,11 +1,9 @@
-import { ListItemSize } from '../List';
-export interface ResourceListItemProps {
+import { ListItemProps } from '../List';
+export interface ResourceListItemProps extends Pick<ListItemProps, 'size' | 'controls' | 'as' | 'onClick'> {
     id: string;
     ownerName: string;
     resourceName: string;
     ownerLogoUrl?: string;
     ownerLogoUrlAlt?: string;
-    size?: ListItemSize;
-    controls?: React.ReactNode;
 }
-export declare const ResourceListItem: ({ ownerName, resourceName, ownerLogoUrlAlt, ownerLogoUrl, size, controls, }: ResourceListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ResourceListItem: ({ ownerName, resourceName, ownerLogoUrlAlt, ownerLogoUrl, ...props }: ResourceListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ResourceList/ResourceListItem.js

@@ -1,30 +1,28 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as p } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
+import "../Icon/SvgIcon.js";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import { ListItem as a } from "../List/ListItem.js";
+import { ListItem as e } from "../List/ListItem.js";
 const u = ({
   ownerName: t,
   resourceName: r,
-  ownerLogoUrlAlt: m,
-  ownerLogoUrl: i,
-  size: o = "md",
-  controls: p
-}) => /* @__PURE__ */ e(
-  a,
+  ownerLogoUrlAlt: i,
+  ownerLogoUrl: m,
+  ...o
+}) => /* @__PURE__ */ p(
+  e,
   {
     avatar: {
       name: t,
-      imageUrl: i,
-      imageUrlAlt: m,
+      imageUrl: m,
+      imageUrlAlt: i,
       type: "company"
     },
     title: r,
     description: t,
-    size: o,
-    controls: p
+    ...o
   }
 );
 export {

package/dist/components/Searchbar/Searchbar.stories.js

@@ -1,4 +1,4 @@
-import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
 import { useState as s } from "react";
 import { Searchbar as i } from "./Searchbar.js";
 const S = {
@@ -66,22 +66,22 @@ const S = {
     }
   }
 }, C = (d) => {
-  const [t, o] = s(""), [p, a] = s(!1), c = (e) => {
-    o(e.target.value);
+  const [t, n] = s(""), [p, a] = s(!1), c = (e) => {
+    n(e.target.value);
   }, u = () => {
-    o("");
+    n("");
   }, g = [
     {
       id: "inbox",
       label: t ? () => /* @__PURE__ */ l("span", { children: [
-        /* @__PURE__ */ n("mark", { children: t }),
+        /* @__PURE__ */ o("mark", { children: t }),
         " i innboksen"
       ] }) : "Alt i innboksen"
     },
     {
       id: "global",
       label: t ? () => /* @__PURE__ */ l("span", { children: [
-        /* @__PURE__ */ n("mark", { children: t }),
+        /* @__PURE__ */ o("mark", { children: t }),
         " i hele Altinn"
       ] }) : "Alt i hele Altinn"
     }
@@ -91,10 +91,12 @@ const S = {
     type: "scope"
   })), r = t ? [
     {
+      type: "dialog",
       href: "#skatt-2024",
       title: "Skattemelding 2024"
     },
     {
+      type: "dialog",
       href: "#skatt-2024",
       title: "Skattemelding 2025"
     }
@@ -105,7 +107,7 @@ const S = {
   })) : [], m = [...g, ...r].map((e) => ({
     ...e,
     onClick: () => {
-      console.log(JSON.stringify(e));
+      console.info("clicked", JSON.stringify(e));
     }
   })), h = {
     groups: {
@@ -115,7 +117,7 @@ const S = {
     },
     items: m
   };
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ o(
     i,
     {
       ...d,

package/dist/components/Timeline/Timeline.d.ts

@@ -0,0 +1,5 @@
+import { TimelineSectionProps } from '.';
+export interface TimelineProps {
+    items: TimelineSectionProps[];
+}
+export declare const Timeline: ({ items }: TimelineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Timeline/Timeline.js

@@ -0,0 +1,8 @@
+import { jsx as n } from "react/jsx-runtime";
+import { createElement as i } from "react";
+import { TimelineBase as m } from "./TimelineBase.js";
+import { TimelineSection as l } from "./TimelineSection.js";
+const a = ({ items: r }) => /* @__PURE__ */ n(m, { children: r == null ? void 0 : r.map((e, o) => /* @__PURE__ */ i(l, { ...e, key: o }, e.children)) });
+export {
+  a as Timeline
+};