@altinn/altinn-components 0.9.0 → 0.10.0

package/dist/components/Menu/MenuSearch.js

@@ -1,17 +1,17 @@
-import { jsxs as m, jsx as i } from "react/jsx-runtime";
-import { Icon as r } from "../Icon/Icon.js";
+import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { Icon as a } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { IconButton as a } from "../Button/IconButton.js";
+import "../Autocomplete/AutocompleteBase.js";
+import { IconButton as m } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
-import "../Searchbar/AutocompleteBase.js";
-import '../../assets/MenuSearch.css';const l = "_field_mo7y9_1", p = "_icon_mo7y9_5", _ = "_input_mo7y9_14", f = "_clear_mo7y9_31", o = {
-  field: l,
-  icon: p,
+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,
   input: _,
   clear: f
-}, j = ({ value: c, name: n, placeholder: s = "Søk", onChange: e, onClear: t }) => /* @__PURE__ */ m("div", { className: o.field, children: [
+}, j = ({ value: c, name: n, placeholder: s = "Søk", onChange: e, onClear: t }) => /* @__PURE__ */ r("div", { className: o.field, children: [
   /* @__PURE__ */ i(
     "input",
     {
@@ -24,9 +24,9 @@ import '../../assets/MenuSearch.css';const l = "_field_mo7y9_1", p = "_icon_mo7y
       autoComplete: "off"
     }
   ),
-  /* @__PURE__ */ i(r, { name: "magnifying-glass", className: o.icon }),
+  /* @__PURE__ */ i(a, { name: "magnifying-glass", className: o.icon }),
   t && /* @__PURE__ */ i(
-    a,
+    m,
     {
       icon: "x-mark",
       color: "secondary",

package/dist/components/Menu/MenuSearch.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ value, name, placeholder, onChange, onClear }: import('./MenuSearch').MenuSearchProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {
+        name: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -1,17 +1,16 @@
-import { fn as e } from "@storybook/test";
-import { MenuSearch as t } from "./MenuSearch.js";
-const r = {
+import { MenuSearch as e } from "./MenuSearch.js";
+const t = {
   title: "Menu/MenuSearch",
-  component: t,
+  component: e,
   tags: ["autodocs"],
   parameters: {},
-  args: {}
-}, n = {
   args: {
-    onClear: e()
+    name: "search"
   }
+}, r = {
+  args: {}
 };
 export {
-  n as Default,
-  r as default
+  r as Default,
+  t as default
 };

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

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ loading, reverse, size, variant, icon, children, ...rest }: import('./MetaItem').MetaItemProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        children: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Icon: Story;

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/Meta/MetaList.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ size, items }: import('./MetaList').MetaListProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {
+        items: {
+            label: string;
+        }[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ size, variant, progress, children }: import('./MetaProgress').MetaProgressProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const InProgress: Story;
+export declare const ProgressComplete: Story;

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

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ loading, size, variant, datetime, icon, children, }: import('./MetaTimestamp').MetaTimestampProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {
+        children: string;
+        datetime: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Icon: Story;

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 "../Searchbar/AutocompleteBase.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
+};