@altinn/altinn-components 0.19.3 → 0.19.4

package/dist/assets/Flex.css

@@ -1 +1 @@
-._flex_1e7ut_1{display:flex;list-style:none;padding:0}._flex_1e7ut_1[data-direction=col]{flex-direction:column}._flex_1e7ut_1[data-direction=row]{flex-direction:row}._flex_1e7ut_1[data-align=center]{align-items:center}._flex_1e7ut_1[data-align=start]{align-items:flex-start}._flex_1e7ut_1[data-align=end]{align-items:flex-end}._flex_1e7ut_1[data-justify=start]{justify-content:flex-start}._flex_1e7ut_1[data-justify=end]{justify-content:flex-end}._flex_1e7ut_1[data-justify=center]{justify-content:center}._flex_1e7ut_1[data-justify=between]{justify-content:space-between}@media (max-width: 1023px){._flex_1e7ut_1[data-bleed=true]{margin-left:-1rem;margin-right:-1rem}}._flex_1e7ut_1[data-padding=page]{padding:var(--ds-spacing-6)}@media (max-width: 1023px){._flex_1e7ut_1[data-padding=page]{padding-left:var(--ds-spacing-4);padding-right:var(--ds-spacing-4)}}._flex_1e7ut_1[data-spacing=xs]{gap:.125rem}._flex_1e7ut_1[data-spacing=page]{gap:1.5rem}._flex_1e7ut_1{margin:0}._flex_1e7ut_1[data-margin=section]{margin:.625rem 0}._flex_1e7ut_1[data-margin=page]{margin:1.125rem 0}
+._flex_165ub_1{display:flex;list-style:none;padding:0}._flex_165ub_1[data-direction=col]{flex-direction:column}._flex_165ub_1[data-direction=row]{flex-direction:row}._flex_165ub_1[data-align=center]{align-items:center}._flex_165ub_1[data-align=start]{align-items:flex-start}._flex_165ub_1[data-align=end]{align-items:flex-end}._flex_165ub_1[data-justify=start]{justify-content:flex-start}._flex_165ub_1[data-justify=end]{justify-content:flex-end}._flex_165ub_1[data-justify=center]{justify-content:center}._flex_165ub_1[data-justify=between]{justify-content:space-between}@media (max-width: 1023px){._flex_165ub_1[data-bleed=true]{margin-left:-1rem;margin-right:-1rem}}._flex_165ub_1[data-padding=page]{padding:var(--ds-spacing-6)}@media (max-width: 1023px){._flex_165ub_1[data-padding=page]{padding-left:var(--ds-spacing-4);padding-right:var(--ds-spacing-4)}}._flex_165ub_1[data-spacing=xs]{gap:.125rem}._flex_165ub_1[data-spacing=page]{gap:1.5rem}._flex_165ub_1{margin:0}._flex_165ub_1[data-margin=section]{margin:.625rem 0}._flex_165ub_1[data-margin=page]{margin:1.125rem 0}._flex_165ub_1[data-margin=bottom]{margin:0 0 1em}

package/dist/assets/Typography.css

@@ -1 +1 @@
-._typography_gmmcy_1{width:100%;max-width:45rem;line-height:1.5}._typography_gmmcy_1[data-variant=default]{color:var(--ds-color-text-default)}._typography_gmmcy_1[data-variant=subtle]{color:var(--ds-color-text-subtle)}._typography_gmmcy_1[data-size=xs]{font-size:.875rem}._typography_gmmcy_1[data-size=sm]{font-size:1rem}._typography_gmmcy_1[data-size=md]{font-size:1.125rem}._typography_gmmcy_1[data-size=lg]{font-size:1.25rem}._typography_gmmcy_1[data-size=xl]{font-size:1.5rem}._typography_gmmcy_1>*:first-child{margin-top:0}._typography_gmmcy_1>*:last-child{margin-bottom:0}._typography_gmmcy_1 strong{font-weight:500}._typography_gmmcy_1 a{color:var(--ds-color-base-default)}._typography_gmmcy_1 a:hover{color:var(--ds-color-base-hover)}._typography_gmmcy_1>p{font-size:1em;margin:1em 0}._typography_gmmcy_1>h1{font-size:1.5rem;font-weight:500;margin-top:1.5em;margin-bottom:0}._typography_gmmcy_1>h2{font-size:1.25rem;font-weight:600;margin-top:1.5em;margin-bottom:0}._typography_gmmcy_1>h3{font-size:1em;font-weight:600;margin:1em 0}._typography_gmmcy_1>h4{font-size:1em;font-weight:600;margin:1em 0 0}._typography_gmmcy_1>h5,._typography_gmmcy_1>h6{font-size:.875rem;margin:1em 0 0}._typography_gmmcy_1>h6{font-weight:500;color:var(--ds-color-text-subtle)}._typography_gmmcy_1>h6{font-weight:400;color:var(--ds-color-text-subtle)}._typography_gmmcy_1>h5+*,._typography_gmmcy_1>h6+*{margin-top:0}._typography_gmmcy_1>section{margin:1em 0}._typography_gmmcy_1 ul:not([class]),._typography_gmmcy_1 ol:not([class]){list-style-position:inside;padding-left:1rem;margin:1em 0}
+._typography_15g2t_1{width:100%;max-width:45rem;line-height:1.5}p._typography_15g2t_1{margin:0}._typography_15g2t_1[data-variant=default]{color:var(--ds-color-text-default)}._typography_15g2t_1[data-variant=subtle]{color:var(--ds-color-text-subtle)}._typography_15g2t_1[data-size=xs]{font-size:.875rem}._typography_15g2t_1[data-size=sm]{font-size:1rem}._typography_15g2t_1[data-size=md]{font-size:1.125rem}._typography_15g2t_1[data-size=lg]{font-size:1.25rem}._typography_15g2t_1[data-size=xl]{font-size:1.5rem}._typography_15g2t_1>*:first-child{margin-top:0}._typography_15g2t_1>*:last-child{margin-bottom:0}._typography_15g2t_1 strong{font-weight:500}._typography_15g2t_1 a{color:var(--ds-color-base-default)}._typography_15g2t_1 a:hover{color:var(--ds-color-base-hover)}._typography_15g2t_1>p{font-size:1em;margin:1em 0}._typography_15g2t_1>h1{font-size:1.5rem;font-weight:500;margin-top:1.5em;margin-bottom:0}._typography_15g2t_1>h2{font-size:1.25rem;font-weight:600;margin-top:1.5em;margin-bottom:0}._typography_15g2t_1>h3{font-size:1em;font-weight:600;margin:1em 0}._typography_15g2t_1>h4{font-size:1em;font-weight:600;margin:1em 0 0}._typography_15g2t_1>h5,._typography_15g2t_1>h6{font-size:.875rem;margin:1em 0 0}._typography_15g2t_1>h6{font-weight:500;color:var(--ds-color-text-subtle)}._typography_15g2t_1>h6{font-weight:400;color:var(--ds-color-text-subtle)}._typography_15g2t_1>h5+*,._typography_15g2t_1>h6+*{margin-top:0}._typography_15g2t_1>section{margin:1em 0}._typography_15g2t_1 ul:not([class]),._typography_15g2t_1 ol:not([class]){list-style-position:inside;padding-left:1rem;margin:1em 0}

package/dist/components/Page/Flex.js

@@ -1,8 +1,8 @@
 import { jsx as u } from "react/jsx-runtime";
 import { c as _ } from "../../index-L8X2o7IH.js";
-import '../../assets/Flex.css';const h = "_flex_1e7ut_1", j = {
-  flex: h
-}, C = ({
+import '../../assets/Flex.css';const b = "_flex_165ub_1", h = {
+  flex: b
+}, y = ({
   as: a = "div",
   color: t,
   theme: e = "transparent",
@@ -22,7 +22,7 @@ import '../../assets/Flex.css';const h = "_flex_1e7ut_1", j = {
 }) => /* @__PURE__ */ u(
   a,
   {
-    className: _(j.flex, m),
+    className: _(h.flex, m),
     style: p,
     "data-color": t,
     "data-theme": e,
@@ -40,5 +40,5 @@ import '../../assets/Flex.css';const h = "_flex_1e7ut_1", j = {
   }
 );
 export {
-  C as Flex
+  y as Flex
 };

package/dist/components/Timeline/Timeline.js

@@ -1,11 +1,11 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { Section as i } from "../Page/Section.js";
-const f = ({ children: o }) => /* @__PURE__ */ r(i, { spacing: 2, children: o });
+const x = ({ spacing: o = 2, children: r }) => /* @__PURE__ */ t(i, { spacing: o, children: r });
 export {
-  f as Timeline
+  x as Timeline
 };

package/dist/components/Timeline/TimelineActivity.js

@@ -1,33 +1,29 @@
-import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { Byline as x } from "../Byline/Byline.js";
+import { Byline as n } from "../Byline/Byline.js";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { TimelineBase as y } from "./TimelineBase.js";
-import { Section as S } from "../Page/Section.js";
-import { Typography as T } from "../Typography/Typography.js";
+import { Section as l } from "../Page/Section.js";
+import { Typography as y } from "../Typography/Typography.js";
 import { S as a } from "../../CircleFill-IZdiBc_K.js";
-const q = ({
+const k = ({
   loading: r,
-  byline: i,
-  icon: p = a,
-  color: e = "neutral",
-  typographyProps: s = {},
-  margin: c,
-  spacing: f,
-  datetime: l,
-  children: m,
-  footer: n,
-  ...h
-}) => /* @__PURE__ */ o(y, { loading: r, color: e, icon: p, ...h, children: [
-  i && /* @__PURE__ */ t(x, { loading: r, datetime: l, children: i }),
-  /* @__PURE__ */ o(S, { margin: c, spacing: f, children: [
-    m && /* @__PURE__ */ t(T, { loading: r, size: "md", ...s, children: m }),
-    n
-  ] })
+  byline: t,
+  icon: x = a,
+  color: S = "neutral",
+  typographyProps: m = {},
+  margin: p,
+  spacing: e,
+  datetime: s,
+  children: o,
+  footer: g,
+  ...f
+}) => /* @__PURE__ */ c(l, { margin: p, spacing: e, ...f, children: [
+  t && /* @__PURE__ */ i(n, { loading: r, datetime: s, children: t }),
+  o && typeof o == "string" ? /* @__PURE__ */ i(y, { as: "p", loading: r, size: "md", ...m, children: o }) : o
 ] });
 export {
-  q as TimelineActivity
+  k as TimelineActivity
 };

package/dist/components/Timeline/TimelineSegment.js

@@ -0,0 +1,28 @@
+import { jsx as i, jsxs as f } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "react";
+import { Byline as s } from "../Byline/Byline.js";
+import "../RootProvider/RootProvider.js";
+import "../Search/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import { TimelineBase as S } from "./TimelineBase.js";
+import { Section as h } from "../Page/Section.js";
+import { S as x } from "../../CircleFill-IZdiBc_K.js";
+const k = ({
+  loading: r,
+  datetime: m,
+  byline: o,
+  icon: t = x,
+  color: e = "neutral",
+  spacing: p = 2,
+  margin: n = "bottom",
+  children: l,
+  footer: a,
+  ...c
+}) => /* @__PURE__ */ i(S, { loading: r, color: e, icon: t, ...c, children: /* @__PURE__ */ f(h, { margin: n, spacing: p, children: [
+  o && /* @__PURE__ */ i(s, { loading: r, datetime: m, children: o }),
+  l
+] }) });
+export {
+  k as TimelineSegment
+};

package/dist/components/Timeline/index.js

@@ -1,14 +1,16 @@
 import { Timeline as o } from "./Timeline.js";
-import { TimelineBase as m } from "./TimelineBase.js";
-import { TimelineSection as n } from "./TimelineSection.js";
-import { TimelineHeader as l } from "./TimelineHeader.js";
-import { TimelineFooter as x } from "./TimelineFooter.js";
-import { TimelineActivity as a } from "./TimelineActivity.js";
+import { TimelineSegment as m } from "./TimelineSegment.js";
+import { TimelineActivity as n } from "./TimelineActivity.js";
+import { TimelineBase as l } from "./TimelineBase.js";
+import { TimelineSection as x } from "./TimelineSection.js";
+import { TimelineHeader as a } from "./TimelineHeader.js";
+import { TimelineFooter as S } from "./TimelineFooter.js";
 export {
   o as Timeline,
-  a as TimelineActivity,
-  m as TimelineBase,
-  x as TimelineFooter,
-  l as TimelineHeader,
-  n as TimelineSection
+  n as TimelineActivity,
+  l as TimelineBase,
+  S as TimelineFooter,
+  a as TimelineHeader,
+  x as TimelineSection,
+  m as TimelineSegment
 };

package/dist/components/Typography/Typography.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
-import { c as s } from "../../index-L8X2o7IH.js";
+import { c as m } from "../../index-L8X2o7IH.js";
 import { Skeleton as i } from "../Skeleton/Skeleton.js";
-import '../../assets/Typography.css';const d = "_typography_gmmcy_1", h = {
+import '../../assets/Typography.css';const d = "_typography_15g2t_1", h = {
   typography: d
 }, _ = ({
   loading: o,
@@ -9,19 +9,19 @@ import '../../assets/Typography.css';const d = "_typography_gmmcy_1", h = {
   as: a = "div",
   size: p = "md",
   color: n,
-  variant: m,
-  className: y,
-  children: c,
-  ...e
+  variant: e,
+  className: s,
+  children: y,
+  ...c
 }) => /* @__PURE__ */ t(
   a,
   {
-    className: s(h.typography, y),
+    className: m(h.typography, s),
     "data-size": p,
     "data-color": n,
-    "data-variant": m,
-    ...e,
-    children: o && /* @__PURE__ */ t(i, { loading: o, children: r }) || c
+    "data-variant": e,
+    ...c,
+    children: o && /* @__PURE__ */ t(i, { loading: o, children: r }) || y
   }
 );
 export {

package/dist/components/index.js

@@ -112,52 +112,53 @@ import { SnackbarColorEnum as ut, SnackbarItem as lt } from "./Snackbar/Snackbar
 import { SnackbarDuration as Bt, SnackbarProvider as gt, useSnackbar as It } from "./Snackbar/useSnackbar.js";
 import { Skeleton as Dt } from "./Skeleton/Skeleton.js";
 import { Timeline as Mt } from "./Timeline/Timeline.js";
-import { TimelineBase as At } from "./Timeline/TimelineBase.js";
-import { TimelineSection as kt } from "./Timeline/TimelineSection.js";
-import { TimelineHeader as Ht } from "./Timeline/TimelineHeader.js";
-import { TimelineFooter as Pt } from "./Timeline/TimelineFooter.js";
-import { TimelineActivity as vt } from "./Timeline/TimelineActivity.js";
-import { ToolbarBase as Ct } from "./Toolbar/ToolbarBase.js";
-import { ToolbarButton as Rt } from "./Toolbar/ToolbarButton.js";
-import { Toolbar as Ot } from "./Toolbar/Toolbar.js";
-import { ToolbarSearch as zt } from "./Toolbar/ToolbarSearch.js";
-import { ToolbarFilter as jt } from "./Toolbar/ToolbarFilter.js";
-import { ToolbarDaterange as Jt } from "./Toolbar/ToolbarDaterange.js";
-import { PageBase as Ut } from "./Page/PageBase.js";
-import { PageNav as Wt } from "./Page/PageNav.js";
-import { PageMenu as Yt } from "./Page/PageMenu.js";
-import { PageTabs as _t } from "./Page/PageTabs.js";
-import { PageHeader as om } from "./Page/PageHeader.js";
-import { Article as em } from "./Page/Article.js";
-import { Section as mm } from "./Page/Section.js";
-import { Flex as xm } from "./Page/Flex.js";
-import { Grid as fm } from "./Page/Grid.js";
-import { Breadcrumbs as nm } from "./Page/Breadcrumbs.js";
-import { BreadcrumbsLink as cm } from "./Page/BreadcrumbsLink.js";
-import { ContactSection as lm } from "./Page/ContactSection.js";
-import { Transmission as Bm } from "./Transmission/Transmission.js";
-import { TransmissionList as Im } from "./Transmission/TransmissionList.js";
-import { Typography as Dm } from "./Typography/Typography.js";
-import { Heading as Mm } from "./Typography/Heading.js";
-import { ResourceList as Am } from "./ResourceList/ResourceList.js";
-import { ResourceListItem as km } from "./ResourceList/ResourceListItem.js";
-import { AccessAreaListItem as Hm } from "./AccessAreaList/AccessAreaListItem.js";
-import { AccessAreaList as Pm } from "./AccessAreaList/AccessAreaList.js";
-import { AccessPackageListItem as vm } from "./AccessPackageList/AccessPackageListItem.js";
-import { AccessPackageList as Cm } from "./AccessPackageList/AccessPackageList.js";
-import { FieldBase as Rm } from "./TextField/FieldBase.js";
-import { InputBase as Om } from "./TextField/InputBase.js";
-import { TextField as zm } from "./TextField/TextField.js";
+import { TimelineSegment as At } from "./Timeline/TimelineSegment.js";
+import { TimelineActivity as kt } from "./Timeline/TimelineActivity.js";
+import { TimelineBase as Ht } from "./Timeline/TimelineBase.js";
+import { TimelineSection as Pt } from "./Timeline/TimelineSection.js";
+import { TimelineHeader as vt } from "./Timeline/TimelineHeader.js";
+import { TimelineFooter as Ct } from "./Timeline/TimelineFooter.js";
+import { ToolbarBase as Rt } from "./Toolbar/ToolbarBase.js";
+import { ToolbarButton as Ot } from "./Toolbar/ToolbarButton.js";
+import { Toolbar as zt } from "./Toolbar/Toolbar.js";
+import { ToolbarSearch as jt } from "./Toolbar/ToolbarSearch.js";
+import { ToolbarFilter as Jt } from "./Toolbar/ToolbarFilter.js";
+import { ToolbarDaterange as Ut } from "./Toolbar/ToolbarDaterange.js";
+import { PageBase as Wt } from "./Page/PageBase.js";
+import { PageNav as Yt } from "./Page/PageNav.js";
+import { PageMenu as _t } from "./Page/PageMenu.js";
+import { PageTabs as om } from "./Page/PageTabs.js";
+import { PageHeader as em } from "./Page/PageHeader.js";
+import { Article as mm } from "./Page/Article.js";
+import { Section as xm } from "./Page/Section.js";
+import { Flex as fm } from "./Page/Flex.js";
+import { Grid as nm } from "./Page/Grid.js";
+import { Breadcrumbs as cm } from "./Page/Breadcrumbs.js";
+import { BreadcrumbsLink as lm } from "./Page/BreadcrumbsLink.js";
+import { ContactSection as Bm } from "./Page/ContactSection.js";
+import { Transmission as Im } from "./Transmission/Transmission.js";
+import { TransmissionList as Dm } from "./Transmission/TransmissionList.js";
+import { Typography as Mm } from "./Typography/Typography.js";
+import { Heading as Am } from "./Typography/Heading.js";
+import { ResourceList as km } from "./ResourceList/ResourceList.js";
+import { ResourceListItem as Hm } from "./ResourceList/ResourceListItem.js";
+import { AccessAreaListItem as Pm } from "./AccessAreaList/AccessAreaListItem.js";
+import { AccessAreaList as vm } from "./AccessAreaList/AccessAreaList.js";
+import { AccessPackageListItem as Cm } from "./AccessPackageList/AccessPackageListItem.js";
+import { AccessPackageList as Rm } from "./AccessPackageList/AccessPackageList.js";
+import { FieldBase as Om } from "./TextField/FieldBase.js";
+import { InputBase as zm } from "./TextField/InputBase.js";
+import { TextField as jm } from "./TextField/TextField.js";
 export {
-  Pm as AccessAreaList,
-  Hm as AccessAreaListItem,
-  Cm as AccessPackageList,
-  vm as AccessPackageListItem,
+  vm as AccessAreaList,
+  Pm as AccessAreaListItem,
+  Rm as AccessPackageList,
+  Cm as AccessPackageListItem,
   Wo as AccountButton,
   Jo as AccountMenu,
   Pr as ActionFooter,
   Hr as ActionHeader,
-  em as Article,
+  mm as Article,
   m as AttachmentLink,
   x as AttachmentList,
   ot as Autocomplete,
@@ -171,8 +172,8 @@ export {
   c as Badge,
   l as BookmarksListItem,
   I as BookmarksSection,
-  nm as Breadcrumbs,
-  cm as BreadcrumbsLink,
+  cm as Breadcrumbs,
+  lm as BreadcrumbsLink,
   k as Button,
   D as ButtonBase,
   A as ButtonIcon,
@@ -180,7 +181,7 @@ export {
   v as Byline,
   nr as CheckboxIcon,
   H as ComboButton,
-  lm as ContactSection,
+  Bm as ContactSection,
   C as ContextMenu,
   R as Dialog,
   _ as DialogActions,
@@ -211,20 +212,20 @@ export {
   zo as DrawerOrDropdown,
   ko as DropdownBase,
   B as EditableBookmark,
-  Rm as FieldBase,
-  xm as Flex,
+  Om as FieldBase,
+  fm as Flex,
   jo as Footer,
   Uo as GlobalMenu,
-  fm as Grid,
+  nm as Grid,
   or as Header,
   er as HeaderBase,
   xr as HeaderButton,
   mr as HeaderLogo,
-  Mm as Heading,
+  Am as Heading,
   fr as Icon,
   P as IconButton,
   Br as IconOrAvatar,
-  Om as InputBase,
+  zm as InputBase,
   kr as Layout,
   vr as LayoutAction,
   Ir as LayoutBase,
@@ -264,23 +265,23 @@ export {
   Te as MetaListItem,
   Ee as MetaProgress,
   Qe as MetaTimestamp,
-  Ut as PageBase,
-  om as PageHeader,
-  Yt as PageMenu,
-  Wt as PageNav,
-  _t as PageTabs,
+  Wt as PageBase,
+  em as PageHeader,
+  _t as PageMenu,
+  Yt as PageNav,
+  om as PageTabs,
   lr as ProgressIcon,
   ft as QueryItem,
   it as QueryLabel,
   cr as RadioIcon,
-  Am as ResourceList,
-  km as ResourceListItem,
+  km as ResourceList,
+  Hm as ResourceListItem,
   Ne as RootProvider,
   mt as ScopeListItem,
   We as SearchField,
   Je as Searchbar,
   Ue as SearchbarBase,
-  mm as Section,
+  xm as Section,
   Ao as SeenByLog,
   e as SizeEnum,
   Dt as Skeleton,
@@ -290,22 +291,23 @@ export {
   lt as SnackbarItem,
   gt as SnackbarProvider,
   xt as SuggestListItem,
-  zm as TextField,
+  jm as TextField,
   Mt as Timeline,
-  vt as TimelineActivity,
-  At as TimelineBase,
-  Pt as TimelineFooter,
-  Ht as TimelineHeader,
-  kt as TimelineSection,
-  Ot as Toolbar,
-  Ct as ToolbarBase,
-  Rt as ToolbarButton,
-  Jt as ToolbarDaterange,
-  jt as ToolbarFilter,
-  zt as ToolbarSearch,
-  Bm as Transmission,
-  Im as TransmissionList,
-  Dm as Typography,
+  kt as TimelineActivity,
+  Ht as TimelineBase,
+  Ct as TimelineFooter,
+  vt as TimelineHeader,
+  Pt as TimelineSection,
+  At as TimelineSegment,
+  zt as Toolbar,
+  Rt as ToolbarBase,
+  Ot as ToolbarButton,
+  Ut as ToolbarDaterange,
+  Jt as ToolbarFilter,
+  jt as ToolbarSearch,
+  Im as Transmission,
+  Dm as TransmissionList,
+  Mm as Typography,
   je as useRootContext,
   It as useSnackbar
 };

package/dist/index.js

@@ -112,55 +112,56 @@ import { SnackbarColorEnum as ut, SnackbarItem as lt } from "./components/Snackb
 import { SnackbarDuration as Bt, SnackbarProvider as gt, useSnackbar as It } from "./components/Snackbar/useSnackbar.js";
 import { Skeleton as Dt } from "./components/Skeleton/Skeleton.js";
 import { Timeline as bt } from "./components/Timeline/Timeline.js";
-import { TimelineBase as At } from "./components/Timeline/TimelineBase.js";
-import { TimelineSection as kt } from "./components/Timeline/TimelineSection.js";
-import { TimelineHeader as Ht } from "./components/Timeline/TimelineHeader.js";
-import { TimelineFooter as Pt } from "./components/Timeline/TimelineFooter.js";
-import { TimelineActivity as vt } from "./components/Timeline/TimelineActivity.js";
-import { ToolbarBase as wt } from "./components/Toolbar/ToolbarBase.js";
-import { ToolbarButton as Gt } from "./components/Toolbar/ToolbarButton.js";
-import { Toolbar as Ot } from "./components/Toolbar/Toolbar.js";
-import { ToolbarSearch as zt } from "./components/Toolbar/ToolbarSearch.js";
-import { ToolbarFilter as Nt } from "./components/Toolbar/ToolbarFilter.js";
-import { ToolbarDaterange as qt } from "./components/Toolbar/ToolbarDaterange.js";
-import { PageBase as Ut } from "./components/Page/PageBase.js";
-import { PageNav as Wt } from "./components/Page/PageNav.js";
-import { PageMenu as Yt } from "./components/Page/PageMenu.js";
-import { PageTabs as _t } from "./components/Page/PageTabs.js";
-import { PageHeader as om } from "./components/Page/PageHeader.js";
-import { Article as em } from "./components/Page/Article.js";
-import { Section as mm } from "./components/Page/Section.js";
-import { Flex as xm } from "./components/Page/Flex.js";
-import { Grid as fm } from "./components/Page/Grid.js";
-import { Breadcrumbs as nm } from "./components/Page/Breadcrumbs.js";
-import { BreadcrumbsLink as cm } from "./components/Page/BreadcrumbsLink.js";
-import { ContactSection as lm } from "./components/Page/ContactSection.js";
-import { Transmission as Bm } from "./components/Transmission/Transmission.js";
-import { TransmissionList as Im } from "./components/Transmission/TransmissionList.js";
-import { Typography as Dm } from "./components/Typography/Typography.js";
-import { Heading as bm } from "./components/Typography/Heading.js";
-import { ResourceList as Am } from "./components/ResourceList/ResourceList.js";
-import { ResourceListItem as km } from "./components/ResourceList/ResourceListItem.js";
-import { AccessAreaListItem as Hm } from "./components/AccessAreaList/AccessAreaListItem.js";
-import { AccessAreaList as Pm } from "./components/AccessAreaList/AccessAreaList.js";
-import { AccessPackageListItem as vm } from "./components/AccessPackageList/AccessPackageListItem.js";
-import { AccessPackageList as wm } from "./components/AccessPackageList/AccessPackageList.js";
-import { FieldBase as Gm } from "./components/TextField/FieldBase.js";
-import { InputBase as Om } from "./components/TextField/InputBase.js";
-import { TextField as zm } from "./components/TextField/TextField.js";
-import { useClickOutside as Nm } from "./hooks/useClickOutside.js";
-import { useEscapeKey as qm } from "./hooks/useEscapeKey.js";
-import { useMenu as Um } from "./hooks/useMenu.js";
+import { TimelineSegment as At } from "./components/Timeline/TimelineSegment.js";
+import { TimelineActivity as kt } from "./components/Timeline/TimelineActivity.js";
+import { TimelineBase as Ht } from "./components/Timeline/TimelineBase.js";
+import { TimelineSection as Pt } from "./components/Timeline/TimelineSection.js";
+import { TimelineHeader as vt } from "./components/Timeline/TimelineHeader.js";
+import { TimelineFooter as wt } from "./components/Timeline/TimelineFooter.js";
+import { ToolbarBase as Gt } from "./components/Toolbar/ToolbarBase.js";
+import { ToolbarButton as Ot } from "./components/Toolbar/ToolbarButton.js";
+import { Toolbar as zt } from "./components/Toolbar/Toolbar.js";
+import { ToolbarSearch as Nt } from "./components/Toolbar/ToolbarSearch.js";
+import { ToolbarFilter as qt } from "./components/Toolbar/ToolbarFilter.js";
+import { ToolbarDaterange as Ut } from "./components/Toolbar/ToolbarDaterange.js";
+import { PageBase as Wt } from "./components/Page/PageBase.js";
+import { PageNav as Yt } from "./components/Page/PageNav.js";
+import { PageMenu as _t } from "./components/Page/PageMenu.js";
+import { PageTabs as om } from "./components/Page/PageTabs.js";
+import { PageHeader as em } from "./components/Page/PageHeader.js";
+import { Article as mm } from "./components/Page/Article.js";
+import { Section as xm } from "./components/Page/Section.js";
+import { Flex as fm } from "./components/Page/Flex.js";
+import { Grid as nm } from "./components/Page/Grid.js";
+import { Breadcrumbs as cm } from "./components/Page/Breadcrumbs.js";
+import { BreadcrumbsLink as lm } from "./components/Page/BreadcrumbsLink.js";
+import { ContactSection as Bm } from "./components/Page/ContactSection.js";
+import { Transmission as Im } from "./components/Transmission/Transmission.js";
+import { TransmissionList as Dm } from "./components/Transmission/TransmissionList.js";
+import { Typography as bm } from "./components/Typography/Typography.js";
+import { Heading as Am } from "./components/Typography/Heading.js";
+import { ResourceList as km } from "./components/ResourceList/ResourceList.js";
+import { ResourceListItem as Hm } from "./components/ResourceList/ResourceListItem.js";
+import { AccessAreaListItem as Pm } from "./components/AccessAreaList/AccessAreaListItem.js";
+import { AccessAreaList as vm } from "./components/AccessAreaList/AccessAreaList.js";
+import { AccessPackageListItem as wm } from "./components/AccessPackageList/AccessPackageListItem.js";
+import { AccessPackageList as Gm } from "./components/AccessPackageList/AccessPackageList.js";
+import { FieldBase as Om } from "./components/TextField/FieldBase.js";
+import { InputBase as zm } from "./components/TextField/InputBase.js";
+import { TextField as Nm } from "./components/TextField/TextField.js";
+import { useClickOutside as qm } from "./hooks/useClickOutside.js";
+import { useEscapeKey as Um } from "./hooks/useEscapeKey.js";
+import { useMenu as Wm } from "./hooks/useMenu.js";
 export {
-  Pm as AccessAreaList,
-  Hm as AccessAreaListItem,
-  wm as AccessPackageList,
-  vm as AccessPackageListItem,
+  vm as AccessAreaList,
+  Pm as AccessAreaListItem,
+  Gm as AccessPackageList,
+  wm as AccessPackageListItem,
   Wo as AccountButton,
   qo as AccountMenu,
   Pr as ActionFooter,
   Hr as ActionHeader,
-  em as Article,
+  mm as Article,
   m as AttachmentLink,
   x as AttachmentList,
   ot as Autocomplete,
@@ -174,8 +175,8 @@ export {
   c as Badge,
   l as BookmarksListItem,
   I as BookmarksSection,
-  nm as Breadcrumbs,
-  cm as BreadcrumbsLink,
+  cm as Breadcrumbs,
+  lm as BreadcrumbsLink,
   k as Button,
   D as ButtonBase,
   A as ButtonIcon,
@@ -183,7 +184,7 @@ export {
   v as Byline,
   nr as CheckboxIcon,
   H as ComboButton,
-  lm as ContactSection,
+  Bm as ContactSection,
   w as ContextMenu,
   G as Dialog,
   _ as DialogActions,
@@ -214,20 +215,20 @@ export {
   zo as DrawerOrDropdown,
   ko as DropdownBase,
   B as EditableBookmark,
-  Gm as FieldBase,
-  xm as Flex,
+  Om as FieldBase,
+  fm as Flex,
   No as Footer,
   Uo as GlobalMenu,
-  fm as Grid,
+  nm as Grid,
   or as Header,
   er as HeaderBase,
   xr as HeaderButton,
   mr as HeaderLogo,
-  bm as Heading,
+  Am as Heading,
   fr as Icon,
   P as IconButton,
   Br as IconOrAvatar,
-  Om as InputBase,
+  zm as InputBase,
   kr as Layout,
   vr as LayoutAction,
   Ir as LayoutBase,
@@ -267,23 +268,23 @@ export {
   Te as MetaListItem,
   Re as MetaProgress,
   Qe as MetaTimestamp,
-  Ut as PageBase,
-  om as PageHeader,
-  Yt as PageMenu,
-  Wt as PageNav,
-  _t as PageTabs,
+  Wt as PageBase,
+  em as PageHeader,
+  _t as PageMenu,
+  Yt as PageNav,
+  om as PageTabs,
   lr as ProgressIcon,
   ft as QueryItem,
   it as QueryLabel,
   cr as RadioIcon,
-  Am as ResourceList,
-  km as ResourceListItem,
+  km as ResourceList,
+  Hm as ResourceListItem,
   Ke as RootProvider,
   mt as ScopeListItem,
   We as SearchField,
   qe as Searchbar,
   Ue as SearchbarBase,
-  mm as Section,
+  xm as Section,
   Ao as SeenByLog,
   e as SizeEnum,
   Dt as Skeleton,
@@ -293,25 +294,26 @@ export {
   lt as SnackbarItem,
   gt as SnackbarProvider,
   xt as SuggestListItem,
-  zm as TextField,
+  Nm as TextField,
   bt as Timeline,
-  vt as TimelineActivity,
-  At as TimelineBase,
-  Pt as TimelineFooter,
-  Ht as TimelineHeader,
-  kt as TimelineSection,
-  Ot as Toolbar,
-  wt as ToolbarBase,
-  Gt as ToolbarButton,
-  qt as ToolbarDaterange,
-  Nt as ToolbarFilter,
-  zt as ToolbarSearch,
-  Bm as Transmission,
-  Im as TransmissionList,
-  Dm as Typography,
-  Nm as useClickOutside,
-  qm as useEscapeKey,
-  Um as useMenu,
+  kt as TimelineActivity,
+  Ht as TimelineBase,
+  wt as TimelineFooter,
+  vt as TimelineHeader,
+  Pt as TimelineSection,
+  At as TimelineSegment,
+  zt as Toolbar,
+  Gt as ToolbarBase,
+  Ot as ToolbarButton,
+  Ut as ToolbarDaterange,
+  qt as ToolbarFilter,
+  Nt as ToolbarSearch,
+  Im as Transmission,
+  Dm as TransmissionList,
+  bm as Typography,
+  qm as useClickOutside,
+  Um as useEscapeKey,
+  Wm as useMenu,
   Ne as useRootContext,
   It as useSnackbar
 };

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

@@ -6,7 +6,7 @@ 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 FlexPadding = 'page' | Range<11>;
-export type FlexMargin = 'page' | 'section';
+export type FlexMargin = 0 | 'page' | 'section' | 'bottom';
 export interface FlexProps {
     as?: FlexElement;
     shadow?: Shadow;

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

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
+import { SectionProps } from '..';
 export interface TimelineProps {
+    spacing?: SectionProps['spacing'];
     children?: ReactNode;
 }
-export declare const Timeline: ({ children }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Timeline: ({ spacing, children }: TimelineProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,12 +1,13 @@
 declare const meta: {
     title: string;
-    component: ({ children }: import('./Timeline').TimelineProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ spacing, children }: import('./Timeline').TimelineProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {};
 };
 export default meta;
 export declare const ActivityLog: () => import("react/jsx-runtime").JSX.Element;
+export declare const GroupedLog: () => import("react/jsx-runtime").JSX.Element;
 export declare const UsingAvatars: () => import("react/jsx-runtime").JSX.Element;
 export declare const CollapsingElements: () => import("react/jsx-runtime").JSX.Element;
 export declare const DialogHistory: () => import("react/jsx-runtime").JSX.Element;

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

@@ -6,7 +6,7 @@ export interface TimelineActivityProps extends TimelineBaseProps {
     datetime?: string;
     border?: TimelineBorder;
     byline?: ReactNode;
-    children?: ReactNode;
+    children?: string | ReactNode;
     footer?: ReactNode;
     typographyProps?: TypographyProps;
     margin?: SectionProps['margin'];

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

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { SectionProps, SvgElement, TimelineBaseProps, TimelineBorder, TypographyProps } from '..';
+export interface TimelineSegmentProps extends TimelineBaseProps {
+    loading?: boolean;
+    icon?: SvgElement;
+    datetime?: string;
+    border?: TimelineBorder;
+    byline?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    typographyProps?: TypographyProps;
+    margin?: SectionProps['margin'];
+    spacing?: SectionProps['spacing'];
+}
+export declare const TimelineSegment: ({ loading, datetime, byline, icon, color, spacing, margin, children, footer, ...props }: TimelineSegmentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,7 @@
 export * from './Timeline';
+export * from './TimelineSegment';
+export * from './TimelineActivity';
 export * from './TimelineBase';
 export * from './TimelineSection';
 export * from './TimelineHeader';
 export * from './TimelineFooter';
-export * from './TimelineActivity';

package/package.json

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