@altinn/altinn-components 0.9.1 → 0.10.0

package/dist/components/List/ListItemMedia.js

@@ -1,12 +1,12 @@
 import { jsx as r, jsxs as d } from "react/jsx-runtime";
 import { Avatar as x } from "../Avatar/Avatar.js";
-import { AvatarGroup as f } from "../Avatar/AvatarGroup.js";
+import { AvatarGroup as p } from "../Avatar/AvatarGroup.js";
 import { Icon as n } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
-import { Skeleton as u } from "../Skeleton/Skeleton.js";
-import '../../assets/ListItemMedia.css';const p = "_media_14b0z_3", v = "_icon_14b0z_24", a = {
-  media: p,
+import { Skeleton as f } from "../Skeleton/Skeleton.js";
+import '../../assets/ListItemMedia.css';const u = "_media_14b0z_3", v = "_icon_14b0z_24", a = {
+  media: u,
   icon: v
 }, m = {
   avatar: {
@@ -24,23 +24,23 @@ import '../../assets/ListItemMedia.css';const p = "_media_14b0z_3", v = "_icon_1
     xl: "lg"
   }
 }, I = ({
-  loading: l,
+  loading: i,
   size: t = "sm",
-  color: c = "default",
+  color: c = "transparent",
   icon: s,
   avatar: o,
   avatarGroup: e,
-  children: i
-}) => !s && !o && !e && !i ? !1 : l ? /* @__PURE__ */ r(u, { loading: l, variant: "circle", size: t, className: a.media, children: /* @__PURE__ */ r(n, { name: "airplane", variant: "outline", className: a.icon }) }) : /* @__PURE__ */ d("div", { className: a.media, "data-size": t, "data-color": s ? c : null, children: [
+  children: l
+}) => !s && !o && !e && !l ? !1 : i ? /* @__PURE__ */ r(f, { loading: i, variant: "circle", size: t, className: a.media, children: /* @__PURE__ */ r(n, { name: "airplane", variant: "outline", className: a.icon }) }) : /* @__PURE__ */ d("div", { className: a.media, "data-size": t, "data-color": s ? c : null, children: [
   s && /* @__PURE__ */ r(n, { name: s, variant: "outline", className: a.icon }) || o && /* @__PURE__ */ r(x, { ...o, size: m == null ? void 0 : m.avatar[t], className: a.avatar }) || e && /* @__PURE__ */ r(
-    f,
+    p,
     {
       ...e,
       size: m == null ? void 0 : m.avatarGroup[t],
       className: a.avatarGroup
     }
   ),
-  i
+  l
 ] });
 export {
   I as ListItemMedia

package/dist/components/List/ListItemSelect.js

@@ -1,15 +1,15 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { c as a } from "../../index-L8X2o7IH.js";
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { c as l } from "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { CheckboxIcon as i } from "../Icon/CheckboxIcon.js";
-import '../../assets/ListItemSelect.css';const r = "_label_hd89l_1", m = "_input_hd89l_38", p = "_icon_hd89l_43", t = {
+import { CheckboxIcon as a } from "../Icon/CheckboxIcon.js";
+import '../../assets/ListItemSelect.css';const r = "_label_1niu5_1", m = "_input_1niu5_39", p = "_icon_1niu5_44", t = {
   label: r,
   input: m,
   icon: p
-}, h = ({ size: l, checked: e = !1, onChange: s, className: c }) => /* @__PURE__ */ n("label", { className: a(t.label, c), "data-size": l, children: [
-  /* @__PURE__ */ o("input", { type: "checkbox", checked: e, onChange: s, className: t.input, tabIndex: -1 }),
-  /* @__PURE__ */ o(i, { hover: !0, checked: e, className: t.icon })
+}, f = ({ size: o, checked: e = !1, onChange: s, className: i }) => /* @__PURE__ */ c("label", { className: l(t.label, i), "data-size": o, children: [
+  /* @__PURE__ */ n("input", { type: "checkbox", checked: e, onChange: s, className: t.input, tabIndex: -1 }),
+  /* @__PURE__ */ n(a, { hover: !0, checked: e, className: t.icon })
 ] });
 export {
-  h as ListItemSelect
+  f as ListItemSelect
 };

package/dist/components/Menu/MenuItem.stories.js

@@ -5,10 +5,10 @@ import "../../index-L8X2o7IH.js";
 import "react";
 import "../Icon/SvgIcon.js";
 import "../Autocomplete/AutocompleteBase.js";
-import { MetaItem as p } from "../Meta/MetaItem.js";
-import "../RootProvider/RootProvider.js";
 import { MenuItem as o } from "./MenuItem.js";
-import { MenuBase as m } from "./MenuBase.js";
+import { MenuBase as p } from "./MenuBase.js";
+import { MetaItem as m } from "../Meta/MetaItem.js";
+import "../RootProvider/RootProvider.js";
 const I = {
   title: "Menu/MenuItem",
   component: o,
@@ -117,9 +117,9 @@ const I = {
   }
 }, L = () => {
   const t = ["global", "neutral", "company", "person", "global-dark"], a = ["neutral", "subtle", "strong", "company", "person"];
-  return /* @__PURE__ */ n("div", { style: { display: "flex", width: "100%" }, children: t.map((e) => /* @__PURE__ */ n("div", { style: { flexGrow: 1 }, children: /* @__PURE__ */ n(l, { theme: e, children: /* @__PURE__ */ n(m, { children: a.map((r) => /* @__PURE__ */ s("div", { children: [
+  return /* @__PURE__ */ n("div", { style: { display: "flex", width: "100%" }, children: t.map((e) => /* @__PURE__ */ n("div", { style: { flexGrow: 1 }, children: /* @__PURE__ */ n(l, { theme: e, children: /* @__PURE__ */ n(p, { children: a.map((r) => /* @__PURE__ */ s("div", { children: [
     /* @__PURE__ */ n(o, { icon: "inbox", title: "Title", color: r, id: "inbox" }),
-    /* @__PURE__ */ n(p, { children: e + "/" + r })
+    /* @__PURE__ */ n(m, { children: e + "/" + r })
   ] }, r)) }) }) }, e)) });
 };
 export {

package/dist/components/Menu/MenuItems.js

@@ -5,11 +5,11 @@ import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import { useMenu as B } from "../../hooks/useMenu.js";
 import "../Autocomplete/AutocompleteBase.js";
-import "../RootProvider/RootProvider.js";
 import { MenuItem as E } from "./MenuItem.js";
 import { MenuSearch as G } from "./MenuSearch.js";
 import { MenuHeader as H } from "./MenuHeader.js";
 import { MenuList as K, MenuListItem as d } from "./MenuBase.js";
+import "../RootProvider/RootProvider.js";
 const S = ({
   level: l = 0,
   expanded: v,
@@ -30,7 +30,7 @@ const S = ({
     h.map((t, s) => {
       const n = (t == null ? void 0 : t.props) || {}, { title: I, divider: y = !0 } = n, F = h[s + 1];
       return /* @__PURE__ */ a(k, { children: [
-        (l ?? s) > 0 && y ? /* @__PURE__ */ i(d, { role: "separator" }) : "",
+        (l > 0 || s) && y ? /* @__PURE__ */ i(d, { role: "separator" }) : "",
         I && /* @__PURE__ */ i(d, { children: /* @__PURE__ */ i(H, { title: I }) }),
         t == null ? void 0 : t.items.filter((r) => {
           var m;

package/dist/components/Menu/MenuSearch.js

@@ -4,8 +4,8 @@ import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
-import "../RootProvider/RootProvider.js";
 import { IconButton as m } from "../Button/IconButton.js";
+import "../RootProvider/RootProvider.js";
 import '../../assets/MenuSearch.css';const p = "_field_10py0_2", l = "_icon_10py0_7", _ = "_input_10py0_16", f = "_clear_10py0_33", o = {
   field: p,
   icon: l,

package/dist/components/Meta/MetaBase.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import { MetaItemSize } from './MetaItemBase';
 export interface MetaBaseProps {
     size?: MetaItemSize;
+    className?: string;
     children?: ReactNode;
 }
-export declare const MetaBase: ({ size, children }: MetaBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetaBase: ({ size, className, children }: MetaBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Meta/MetaBase.js

@@ -1,7 +1,8 @@
-import { jsx as s } from "react/jsx-runtime";
-import '../../assets/MetaBase.css';const a = "_meta_1hcve_1", m = {
-  meta: a
-}, c = ({ size: t = "xs", children: e }) => /* @__PURE__ */ s("div", { className: m.meta, "data-size": t, children: e });
+import { jsx as a } from "react/jsx-runtime";
+import { c as m } from "../../index-L8X2o7IH.js";
+import '../../assets/MetaBase.css';const o = "_meta_17kd2_1", c = {
+  meta: o
+}, i = ({ size: t = "xs", className: s, children: e }) => /* @__PURE__ */ a("section", { className: m(c.meta, s), "data-size": t, children: e });
 export {
-  c as MetaBase
+  i as MetaBase
 };

package/dist/components/Meta/MetaItem.d.ts

@@ -3,6 +3,7 @@ import { IconName } from '../Icon';
 import { MetaItemSize, MetaItemVariant } from './MetaItemBase';
 export interface MetaItemProps {
     loading?: boolean;
+    reverse?: boolean;
     /**  Render as element */
     as?: ElementType;
     /** Meta size */
@@ -18,4 +19,4 @@ export interface MetaItemProps {
     /** OnClick handler */
     onClick?: () => void;
 }
-export declare const MetaItem: ({ loading, size, variant, icon, children, ...rest }: MetaItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetaItem: ({ loading, reverse, size, variant, icon, children, ...rest }: MetaItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Meta/MetaItem.js

@@ -1,12 +1,20 @@
-import { jsx as e, jsxs as x } from "react/jsx-runtime";
-import { Skeleton as M } from "../Skeleton/Skeleton.js";
-import { MetaItemBase as a } from "./MetaItemBase.js";
-import { MetaItemLabel as s } from "./MetaItemLabel.js";
-import { MetaItemMedia as I } from "./MetaItemMedia.js";
-const j = ({ loading: m, size: t = "xs", variant: r = "text", icon: o, children: p, ...f }) => /* @__PURE__ */ e(a, { variant: r, size: t, ...f, children: /* @__PURE__ */ x(M, { loading: m, children: [
-  !m && o && /* @__PURE__ */ e(I, { size: t, icon: o }),
-  /* @__PURE__ */ e(s, { variant: r, size: t, children: p })
+import { jsx as e, jsxs as M } from "react/jsx-runtime";
+import { Skeleton as a } from "../Skeleton/Skeleton.js";
+import { MetaItemBase as s } from "./MetaItemBase.js";
+import { MetaItemLabel as I } from "./MetaItemLabel.js";
+import { MetaItemMedia as i } from "./MetaItemMedia.js";
+const n = ({
+  loading: m,
+  reverse: p,
+  size: t = "xs",
+  variant: r = "text",
+  icon: o,
+  children: f,
+  ...x
+}) => /* @__PURE__ */ e(s, { reverse: p, variant: r, size: t, ...x, children: /* @__PURE__ */ M(a, { loading: m, children: [
+  !m && o && /* @__PURE__ */ e(i, { size: t, icon: o }),
+  /* @__PURE__ */ e(I, { variant: r, size: t, children: f })
 ] }) });
 export {
-  j as MetaItem
+  n as MetaItem
 };

package/dist/components/Meta/MetaItem.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ loading, size, variant, icon, children, ...rest }: import('./MetaItem').MetaItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ loading, reverse, size, variant, icon, children, ...rest }: import('./MetaItem').MetaItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

package/dist/components/Meta/MetaItemBase.d.ts

@@ -4,6 +4,7 @@ export type MetaItemSize = 'xs';
 export type MetaItemColor = 'subtle';
 export interface MetaItemBaseProps {
     as?: ElementType;
+    reverse?: boolean;
     variant?: MetaItemVariant;
     size?: MetaItemSize;
     color?: MetaItemColor;
@@ -12,4 +13,4 @@ export interface MetaItemBaseProps {
     className?: string;
     children?: ReactNode;
 }
-export declare const MetaItemBase: ({ as, variant, size, color, progress, datetime, className, children, ...rest }: MetaItemBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetaItemBase: ({ as, reverse, variant, size, color, progress, datetime, className, children, ...rest }: MetaItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Meta/MetaItemBase.js

@@ -1,30 +1,32 @@
-import { jsx as i } from "react/jsx-runtime";
-import { c as p } from "../../index-L8X2o7IH.js";
-import '../../assets/MetaItemBase.css';const d = "_item_2agc0_1", x = {
-  item: d
-}, g = ({
+import { jsx as _ } from "react/jsx-runtime";
+import { c as d } from "../../index-L8X2o7IH.js";
+import '../../assets/MetaItemBase.css';const v = "_item_suzps_1", x = "_reverse_suzps_27", e = {
+  item: v,
+  reverse: x
+}, f = ({
   as: t,
-  variant: a = "text",
-  size: e,
+  reverse: s,
+  variant: r = "text",
+  size: a,
   color: o,
-  progress: s,
-  datetime: m,
-  className: n,
-  children: r,
-  ...c
-}) => /* @__PURE__ */ i(
+  progress: m,
+  datetime: n,
+  className: c,
+  children: i,
+  ...p
+}) => /* @__PURE__ */ _(
   t || "span",
   {
-    "data-size": e,
+    "data-size": a,
     "data-color": o,
-    "data-variant": a,
-    "data-progress": s,
-    dateTime: m,
-    className: p(x.item, n),
-    ...c,
-    children: r
+    "data-variant": r,
+    "data-progress": m,
+    dateTime: n,
+    className: d(e.item, { [e.reverse]: s }, c),
+    ...p,
+    children: i
   }
 );
 export {
-  g as MetaItemBase
+  f as MetaItemBase
 };

package/dist/components/Meta/MetaItemLabel.js

@@ -1,7 +1,7 @@
 import { jsx as l } from "react/jsx-runtime";
-import '../../assets/MetaItemLabel.css';const s = "_label_8r5nb_1", n = {
+import '../../assets/MetaItemLabel.css';const s = "_label_g4t18_1", n = {
   label: s
-}, b = ({ size: a = "xs", variant: t = "text", children: e }) => /* @__PURE__ */ l("span", { className: n.label, "data-variant": t, "data-size": a, children: e });
+}, r = ({ size: a = "xs", variant: t = "text", children: e }) => /* @__PURE__ */ l("span", { className: n.label, "data-variant": t, "data-size": a, children: e });
 export {
-  b as MetaItemLabel
+  r as MetaItemLabel
 };

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

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

package/dist/components/Page/Article.js

@@ -0,0 +1,6 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Section as i } from "./Section.js";
+const a = ({ theme: r = "article", children: t, ...o }) => /* @__PURE__ */ e(i, { as: "article", theme: r, ...o, children: t });
+export {
+  a as Article
+};

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
 };