From 16e0adf0429c00666788e06b7ab556ddd0eb60cc Mon Sep 17 00:00:00 2001
From: Inge Fossland <inge@fosslandfoss.no>
Date: Wed, 30 Oct 2024 08:37:17 +0100
Subject: [PATCH] feat: add meta fields

---
 .storybook/ThemeProvider.tsx                 |  16 +
 .storybook/main.ts                           |   5 +
 .storybook/preview.tsx                       |  99 +++
 .storybook/theme.module.css                  |   3 +
 lib/components/.DS_Store                     | Bin 0 -> 8196 bytes
 lib/components/Avatar/avatar.module.css      |   2 +
 lib/components/Badge/Badge.stories.ts        |  34 +
 lib/components/Badge/Badge.tsx               |  81 +-
 lib/components/Badge/badge.module.css        |  45 +-
 lib/components/Button/ButtonBase.tsx         |  12 +-
 lib/components/Button/button.module.css      |  19 -
 lib/components/Button/buttonBase.module.css  |  42 +-
 lib/components/Button/comboButton.module.css |   6 +-
 lib/components/Icon/ProgressIcon.stories.ts  |  25 +
 lib/components/Icon/ProgressIcon.tsx         |  77 ++
 lib/components/Icon/index.ts                 |  21 +
 lib/components/Icon/progressIcon.module.css  |  17 +
 lib/components/Layout/Layout.stories.ts      |  30 +
 lib/components/List/List.tsx                 |  41 +
 lib/components/List/ListBase.tsx             |  33 +
 lib/components/List/ListItem.stories.tsx     | 304 +++++++
 lib/components/List/ListItem.tsx             | 158 ++++
 lib/components/List/ListItemBase.tsx         | 131 +++
 lib/components/List/ListItemLabel.tsx        |  56 ++
 lib/components/List/ListItemMedia.tsx        | 137 ++++
 lib/components/List/index.ts                 |  31 +
 lib/components/List/listItemBase.module.css  |  77 ++
 lib/components/Menu/Menu.stories.ts          | 227 +++++-
 lib/components/Menu/Menu.tsx                 |  20 +
 lib/components/Menu/MenuItem.stories.ts      |  47 +-
 lib/components/Menu/MenuItem.tsx             |  25 +-
 lib/components/Menu/MenuItemBase.tsx         |  31 +-
 lib/components/Menu/MenuItemLabel.tsx        |  12 +
 lib/components/Menu/MenuItemMedia.tsx        |  21 +
 lib/components/Menu/menuItemBase.module.css  |  72 ++
 lib/components/Menu/menuItemLabel.module.css |  22 +
 lib/components/Menu/menuItemMedia.module.css |  36 +
 lib/components/Meta/MetaBase.tsx             |  51 ++
 lib/components/Meta/MetaItem.stories.ts      |  44 ++
 lib/components/Meta/MetaItem.tsx             |  82 ++
 lib/components/Meta/MetaItemBase.tsx         |  86 ++
 lib/components/Meta/MetaItemLabel.tsx        |  56 ++
 lib/components/Meta/MetaItemMedia.tsx        |  56 ++
 lib/components/Meta/MetaList.stories.ts      |  51 ++
 lib/components/Meta/MetaList.tsx             |  91 +++
 lib/components/Meta/MetaProgress.stories.ts  |  53 ++
 lib/components/Meta/MetaProgress.tsx         |  42 +
 lib/components/Meta/MetaTimestamp.stories.ts |  74 ++
 lib/components/Meta/MetaTimestamp.tsx        |  63 ++
 lib/components/Meta/index.ts                 |  32 +
 lib/components/Meta/metaItem.module.css      |  82 ++
 lib/components/Meta/metaList.module.css      |  15 +
 lib/css/global.css                           |   1 +
 lib/css/shadows.css                          |  23 +
 lib/css/theme-article.css                    |  15 +
 lib/css/theme.css                            |  21 +-
 package.json                                 |   3 +-
 pnpm-lock.yaml                               | 787 +++++++++++++++++++
 58 files changed, 3666 insertions(+), 77 deletions(-)
 create mode 100644 .storybook/ThemeProvider.tsx
 create mode 100644 .storybook/theme.module.css
 create mode 100644 lib/components/.DS_Store
 create mode 100644 lib/components/Badge/Badge.stories.ts
 create mode 100644 lib/components/Menu/menuItemBase.module.css
 create mode 100644 lib/components/Menu/menuItemLabel.module.css
 create mode 100644 lib/components/Menu/menuItemMedia.module.css
 create mode 100644 lib/css/theme-article.css

diff --git a/.storybook/ThemeProvider.tsx b/.storybook/ThemeProvider.tsx
new file mode 100644
index 0000000..5d91dec
--- /dev/null
+++ b/.storybook/ThemeProvider.tsx
@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+import styles from "./theme.module.css";
+
+export const ThemeProvider = <Theme,>({
+  children,
+  theme,
+}: {
+  children?: ReactNode;
+  theme?: Theme;
+}) => {
+  return (
+    <div className={styles.theme} data-theme={theme}>
+      {children}
+    </div>
+  );
+};
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 5ed61fe..747df83 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -6,9 +6,14 @@ const config: StorybookConfig = {
     "@storybook/addon-onboarding",
     "@storybook/addon-links",
     "@storybook/addon-essentials",
+    "@storybook/addon-themes",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
+<<<<<<< HEAD
     "@storybook/addon-themes",
+=======
+    "storybook-addon-theme-provider",
+>>>>>>> 6c519e8 (theming etc)
   ],
   framework: {
     name: "@storybook/react-vite",
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 66dd712..ebd3f38 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,3 +1,8 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
 import React from "react";
 import { withThemeByDataAttribute } from "@storybook/addon-themes";
 import { Preview, StoryFn } from "@storybook/react";
@@ -6,6 +11,18 @@ import "../lib/css/global.css";
 
 /** @type { import('@storybook/react').Preview } */
 const preview: Preview = {
+=======
+import type { Preview } from "@storybook/react";
+=======
+import { Preview } from "@storybook/react";
+>>>>>>> 6df61e2 (etc)
+import { withThemeFromJSXProvider } from "@storybook/addon-themes";
+import { ThemeProvider } from "./ThemeProvider";
+import "../lib/css/global.css";
+
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+>>>>>>> 269fc2e (list item)
   parameters: {
     controls: {
       matchers: {
@@ -13,17 +30,65 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+<<<<<<< HEAD
+<<<<<<< HEAD
   },
   decorators: [
     (Story: StoryFn, data) => {
       const { tags, globals } = data;
 
+<<<<<<< HEAD
+      return (
+        <StoryDecorator tags={tags} theme={globals?.theme}>
+          <Story />
+        </StoryDecorator>
+      );
+    },
+=======
+  } /*
+=======
+  },
+  decorators: [
+    /*
+    withThemeFromJSXProvider({
+      themes: {
+        global: "global",
+        neutral: "neutral",
+        company: "company",
+        person: "person",
+      },
+      defaultTheme: "neutral",
+      Provider: ThemeProvider,
+    }),
+  */
+    (Story: StoryFn, data) => {
+      const { tags, parameters } = data;
+
+      console.log("DATA", data);
+
+      const isStable = (tags || []).includes("stable");
+      const state = isStable ? "stable" : "experimental";
+      return (
+        <>
+          <span className="preview-container-stage-tag" data-tag={state}>
+            {state}
+          </span>
+          <Story />
+        </>
+=======
       return (
         <StoryDecorator tags={tags} theme={globals?.theme}>
           <Story />
         </StoryDecorator>
+>>>>>>> bfd012c (feat: list item + meta tags)
       );
     },
+  ],
+<<<<<<< HEAD
+  /*
+>>>>>>> 1b23eba (push it)
+  decorators: [
+>>>>>>> 269fc2e (list item)
     withThemeByDataAttribute({
       themes: {
         global: "global",
@@ -32,8 +97,42 @@ const preview: Preview = {
         person: "person",
       },
       defaultTheme: "neutral",
+<<<<<<< HEAD
+    }),
+=======
+      attributeName: "data-theme",
     }),
   ],
+  /*
+  decorators: [
+    // 👇 Defining the decorator in the preview file applies it to all stories
+    (Story, { parameters }) => {
+      // 👇 Make it configurable by reading from parameters
+      const { pageLayout } = parameters;
+      switch (pageLayout) {
+        case "page":
+          return (
+            // Your page layout is probably a little more complex than this ;)
+            <div className="page-layout">
+              <Story />
+            </div>
+          );
+        case "page-mobile":
+          return (
+            <div className="page-mobile-layout">
+              <Story />
+            </div>
+          );
+        default:
+          // In the default case, don't apply a layout
+          return <Story />;
+      }
+    },
+>>>>>>> 269fc2e (list item)
+  ],
+  */
+=======
+>>>>>>> 6c519e8 (theming etc)
 };
 
 export default preview;
diff --git a/.storybook/theme.module.css b/.storybook/theme.module.css
new file mode 100644
index 0000000..ab7ac6f
--- /dev/null
+++ b/.storybook/theme.module.css
@@ -0,0 +1,3 @@
+.theme[data-theme] {
+  background: var(--theme-background-subtle);
+}
diff --git a/lib/components/.DS_Store b/lib/components/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..2a1513c3f80c7fdc1d41386d0ffecad471b02d8f
GIT binary patch
literal 8196
zcmeHM&1w`u5U$p7vmk<?NI--Zd;oLw<YZYPN}`8&5cHs%T@qn86GB$ZZO9AgBY4n*
z7lqusDgK;&06`FsK7;sGcQaExJ%gu6z-s8OrK_sHZ@%80rh19U4Cdn{qD3O=qq9AG
z8beECKlh}a2s2k;4f2T|(e89}X?>%Z?Ih7Up$e!1s(>n>3aA3dK>?iE-1;5ozW3^=
z3aA4Ar2_nZu;^^_U`ub^s{?~80bnysyN1uG16+;`HV?M+)}>-iUp<(RYC?%&d^-G=
z!(sDaOK*KT8J|ujAe&I37>ABL>%z(8-s-3dr~;`1T)X#ZnVz6_-%IQF>$d5i6~p0Z
zT8uE?-+g!c?dz>C%W2H`uQ5AY@}A%YmY`EK0E01Y(j>k`$bQFO$zkPF#X;oHikd-t
zM2vrx@q56ZLxnvmXgg+bxoG+&hY#N?4$&HtMORGB<GJUtLKCONq<NpRcG2+=e#ztT
z{GEC~qL^BZu9%32vCJc*o3xQ=Va#XgllTiiKfXEl*nJ<WT&Y2uKgRvaxIJ3M)9(Wr
zyAkihrE5*U#6K8`=ND^84qY)34|>l$GFrnvY|}jEu>V8)B>v&c3ct#g*lqp@*OWCb
zevL8inO7Aqd=mHGucsGo-4D7mXXmf?yv-lslEYn~yU@I#DUH%M!GmW&Z$wBAtKX_;
zPoioj-BA%AKD90I^!#@s=%5N5fdVJ}nu}cj-{`*oKLTW3QWa1Ij*9{&8?FxrU=wQV
xgcsM^7X2YQH;ya4btxD)gy&s34qN?Uh|f0o@?cAE;X%`j04IYEs=z;0;17FnAE*ET

literal 0
HcmV?d00001

diff --git a/lib/components/Avatar/avatar.module.css b/lib/components/Avatar/avatar.module.css
index b76d9e0..9896f0c 100644
--- a/lib/components/Avatar/avatar.module.css
+++ b/lib/components/Avatar/avatar.module.css
@@ -1,4 +1,6 @@
 .avatar {
+  flex-grow: 0;
+  flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/lib/components/Badge/Badge.stories.ts b/lib/components/Badge/Badge.stories.ts
new file mode 100644
index 0000000..443b9fa
--- /dev/null
+++ b/lib/components/Badge/Badge.stories.ts
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { Badge } from './Badge';
+
+const meta = {
+  title: 'Atoms/Badge/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    label: 'Badge',
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Alert: Story = {
+  args: {
+    color: 'alert',
+  },
+};
+
+export const UnreadCount: Story = {
+  args: {
+    label: '2',
+    color: 'alert',
+  },
+};
diff --git a/lib/components/Badge/Badge.tsx b/lib/components/Badge/Badge.tsx
index 53cb7a5..93086d1 100644
--- a/lib/components/Badge/Badge.tsx
+++ b/lib/components/Badge/Badge.tsx
@@ -1,19 +1,82 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 import cx from 'classnames';
 import type { ReactNode } from 'react';
 import styles from './badge.module.css';
+=======
+import cx from "classnames";
+import styles from "./badge.module.css";
+import type { ReactNode } from "react";
 
+export type BadgeColor = "subtle" | "alert";
+export type BadgeSize = "sm";
+>>>>>>> 5a289ef (badge fixes restored)
+
+=======
+import cx from "classnames";
+import styles from "./badge.module.css";
+import type { ReactNode } from "react";
+=======
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './badge.module.css';
+>>>>>>> 058ad14 (list + dialogs)
+
+export type BadgeColor = 'subtle' | 'alert';
+export type BadgeSize = 'sm';
+
+>>>>>>> 1b23eba (push it)
+=======
+import cx from "classnames";
+import styles from "./badge.module.css";
+import type { ReactNode } from "react";
+=======
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './badge.module.css';
+>>>>>>> 722d2dc (badge biome fix)
+
+export type BadgeColor = 'subtle' | 'alert';
+export type BadgeSize = 'sm';
+
+>>>>>>> 5364fc1 (badge fixes)
 export interface BadgeProps {
   label?: string | number;
-  variant?: 'neutral' | 'strong';
-  size?: 'medium' | 'small';
+  color?: BadgeColor;
+  size?: BadgeSize;
+  className?: string;
   children?: ReactNode;
 }
 
-// TODO: add aria-label to the badge
-export const Badge = ({ label, variant = 'neutral', size = 'medium', children }: BadgeProps) => {
-  const classNames = cx(styles.badge, {
-    [styles.strong]: variant === 'strong',
-    [styles.small]: size === 'small',
-  });
-  return <span className={classNames}>{label || children}</span>;
+<<<<<<< HEAD
+<<<<<<< HEAD
+export const Badge = ({ label, color = 'subtle', size = 'sm', className, children }: BadgeProps) => {
+  return (
+    <span className={cx(styles.badge, className)} data-color={color} data-size={size}>
+=======
+export const Badge = ({
+  label,
+  color = "subtle",
+  size = "sm",
+  className,
+  children,
+}: BadgeProps) => {
+  return (
+    <span
+      className={cx(styles.badge, className)}
+      data-color={color}
+      data-size={size}
+    >
+>>>>>>> 5a289ef (badge fixes restored)
+=======
+export const Badge = ({ label, color = 'subtle', size = 'sm', className, children }: BadgeProps) => {
+  return (
+    <span className={cx(styles.badge, className)} data-color={color} data-size={size}>
+>>>>>>> 722d2dc (badge biome fix)
+      <span className={styles.label}>{label || children}</span>
+    </span>
+  );
 };
diff --git a/lib/components/Badge/badge.module.css b/lib/components/Badge/badge.module.css
index a754ed5..4ea50a0 100644
--- a/lib/components/Badge/badge.module.css
+++ b/lib/components/Badge/badge.module.css
@@ -1,36 +1,27 @@
 .badge {
   display: inline-flex;
-  box-sizing: border-box;
-  padding: 4px 8px;
-  justify-content: center;
-  min-height: 24px;
-  min-width: 24px;
-  width: auto;
-  height: 24px;
   align-items: center;
-  flex-shrink: 0;
-  background: var(--black-5, rgba(0, 0, 0, 0.05));
-  color: var(--black-100, #000);
+  justify-content: center;
+  white-space: nowrap;
+
+  font-weight: 500;
+  line-height: 1;
+  padding: 0.5em 0.5em;
+
+  min-width: 2em;
+  border-radius: 2em;
+}
+
+.badge[data-size="sm"] {
   font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1rem;
-  border-radius: 12px;
 }
 
-.strong {
-  font-weight: 700;
-  background: var(--Action-Important, #e02e49);
-  color: #ffffff;
+.badge[data-color="subtle"] {
+  background-color: var(--theme-surface-default);
+  color: var(--theme-text-subtle);
 }
 
-.small {
-  display: flex;
-  width: 12px;
-  height: 12px;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 4px;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
+.badge[data-color="alert"] {
+  background-color: #e02e49;
+  color: white;
 }
diff --git a/lib/components/Button/ButtonBase.tsx b/lib/components/Button/ButtonBase.tsx
index 1c480d9..a0ccf05 100644
--- a/lib/components/Button/ButtonBase.tsx
+++ b/lib/components/Button/ButtonBase.tsx
@@ -1,11 +1,21 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
 import cx from 'classnames';
 import type { ElementType, ReactNode } from 'react';
+=======
+import type { ElementType, ReactNode } from "react";
+import cx from "classnames";
+>>>>>>> df5a3c6 (button colors)
+=======
+import cx from 'classnames';
+import type { ElementType, ReactNode } from 'react';
+>>>>>>> 058ad14 (list + dialogs)
 
 import styles from './buttonBase.module.css';
 
 export type ButtonVariant = 'solid' | 'outline' | 'dotted' | 'text';
 export type ButtonSize = 'sm' | 'md' | 'lg';
-export type ButtonColor = 'primary' | 'link';
+export type ButtonColor = 'primary' | 'secondary';
 
 export interface ButtonBaseProps extends React.HTMLAttributes<HTMLButtonElement> {
   /**
diff --git a/lib/components/Button/button.module.css b/lib/components/Button/button.module.css
index 18d36d8..08b222f 100644
--- a/lib/components/Button/button.module.css
+++ b/lib/components/Button/button.module.css
@@ -1,31 +1,12 @@
 .button {
   display: inline-flex;
   align-items: center;
-  border: 1px solid;
-  border-color: var(--link-base-default);
-}
-
-.button:focus {
-  border-color: var(--link-base-active);
-}
-
-.button:hover {
-  border-color: var(--link-base-hover);
-}
-
-.button:active {
-  border-color: var(--link-base-active);
 }
 
 .reverse {
   flex-direction: row-reverse;
 }
 
-.button[aria-selected="true"] {
-  background-color: var(--theme-background-subtle);
-  color: var(--theme-text-default);
-}
-
 .label {
   line-height: 1rem;
   font-weight: 600;
diff --git a/lib/components/Button/buttonBase.module.css b/lib/components/Button/buttonBase.module.css
index 21afee8..1b54aa4 100644
--- a/lib/components/Button/buttonBase.module.css
+++ b/lib/components/Button/buttonBase.module.css
@@ -1,5 +1,6 @@
 .button {
-  border: none;
+  border: 1px solid;
+  border-color: transparent;
   margin: 0;
   padding: 0;
   width: auto;
@@ -32,11 +33,23 @@
   pointer-events: none;
 }
 
+.button:focus {
+  border-color: var(--theme-base-active);
+}
+
+.button:hover {
+  border-color: var(--theme-base-hover);
+}
+
+.button:active {
+  border-color: var(--theme-base-active);
+}
+
 /* solid */
 
 .button[data-variant="solid"] {
-  border-color: var(--theme-base-hover);
-  background-color: var(--theme-base-hover);
+  border-color: var(--theme-base-default);
+  background-color: var(--theme-base-default);
   color: white;
 }
 
@@ -60,18 +73,23 @@
   border-color: transparent;
 }
 
-/* solid + link
+.button[aria-selected="true"] {
+  background-color: var(--theme-background-subtle);
+  color: var(--theme-text-default);
+}
 
-.button[data-color="link"][data-variant="solid"] {
-  background-color: var(--link-base-default);
-  color: white;
+/* secondary color */
+
+.button[data-color="secondary"] {
+  color: var(--theme-text-subtle);
 }
 
-.button[data-color="link"][data-variant="solid"]:hover {
-  background-color: var(--link-base-hover);
+.button[data-color="secondary"]:hover {
+  border-color: var(--theme-surface-hover);
 }
 
-.button[data-color="link"][data-variant="active"]:hover {
-  background-color: var(--link-base-active);
+.button[data-color="secondary"][data-variant="solid"],
+.button[data-color="secondary"][data-variant="solid"] {
+  border-color: var(--theme-surface-default);
+  background-color: var(--theme-surface-default);
 }
- */
diff --git a/lib/components/Button/comboButton.module.css b/lib/components/Button/comboButton.module.css
index c5e0a5d..d84be06 100644
--- a/lib/components/Button/comboButton.module.css
+++ b/lib/components/Button/comboButton.module.css
@@ -6,10 +6,12 @@
   border-radius: 2px;
 }
 
+/*
 .button[aria-selected="true"] {
   background-color: var(--theme-background-subtle);
   color: var(--theme-text-default);
 }
+  */
 
 .label {
   line-height: 1rem;
@@ -40,7 +42,7 @@
 
 .label[data-size="sm"] {
   font-size: 0.875rem;
-  padding: 9px 10px;
+  padding: 8px 10px;
 }
 
 .divider[data-size="sm"] {
@@ -49,7 +51,7 @@
 
 .icon[data-size="sm"] {
   font-size: 1.25rem;
-  padding: 7px 5px;
+  padding: 6px 5px;
 }
 
 /* md 44px */
diff --git a/lib/components/Icon/ProgressIcon.stories.ts b/lib/components/Icon/ProgressIcon.stories.ts
index 68f1dd5..e8e286c 100644
--- a/lib/components/Icon/ProgressIcon.stories.ts
+++ b/lib/components/Icon/ProgressIcon.stories.ts
@@ -1,3 +1,6 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 import type { Meta, StoryObj } from '@storybook/react';
 import { ProgressIcon } from './ProgressIcon';
 
@@ -5,6 +8,28 @@ const meta = {
   title: 'Atoms/Icon/ProgressIcon',
   component: ProgressIcon,
   tags: ['autodocs'],
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProgressIcon } from "./ProgressIcon";
+=======
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProgressIcon } from './ProgressIcon';
+>>>>>>> 058ad14 (list + dialogs)
+
+const meta = {
+  title: 'Atoms/Icon/ProgressIcon',
+  component: ProgressIcon,
+<<<<<<< HEAD
+  tags: ["autodocs"],
+<<<<<<< HEAD
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+  tags: ['autodocs'],
+>>>>>>> 058ad14 (list + dialogs)
   parameters: {},
   args: {},
 } satisfies Meta<typeof ProgressIcon>;
diff --git a/lib/components/Icon/ProgressIcon.tsx b/lib/components/Icon/ProgressIcon.tsx
index 3615430..c1fdab4 100644
--- a/lib/components/Icon/ProgressIcon.tsx
+++ b/lib/components/Icon/ProgressIcon.tsx
@@ -1,16 +1,51 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 import cx from 'classnames';
 import type { CSSProperties } from 'react';
 import styles from './progressIcon.module.css';
 export interface ProgressIconProps {
+=======
+import cx from "classnames";
+import styles from "./progressIcon.module.css";
+=======
+import cx from 'classnames';
+import styles from './progressIcon.module.css';
+>>>>>>> 058ad14 (list + dialogs)
+export interface ProgressIconsProps {
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+import cx from "classnames";
+import styles from "./progressIcon.module.css";
+export interface ProgressIconsProps {
+>>>>>>> bfd012c (feat: list item + meta tags)
   value?: number;
   total?: number;
   className?: string;
 }
 
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 interface CustomCSSProperties extends CSSProperties {
   '--progress'?: string;
 }
 export const ProgressIcon = ({ value = 0, total = 100, className }: ProgressIconProps) => {
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+export const ProgressIcon = ({
+  value = 0,
+  total = 100,
+  className,
+}: ProgressIconsProps) => {
+<<<<<<< HEAD
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+export const ProgressIcon = ({ value = 0, total = 100, className }: ProgressIconsProps) => {
+>>>>>>> 058ad14 (list + dialogs)
   const percentage = Math.round((value / total) * 100);
 
   if (value === total) {
@@ -23,9 +58,21 @@ export const ProgressIcon = ({ value = 0, total = 100, className }: ProgressIcon
         xmlns="http://www.w3.org/2000/svg"
         className={styles.complete}
       >
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+        <title>
+          Progress {value} of {total}
+        </title>
+=======
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
         <title>
           Progress {value} of {total}
         </title>
+>>>>>>> 058ad14 (list + dialogs)
         <path
           fill="currentColor"
           fillRule="evenodd"
@@ -36,9 +83,39 @@ export const ProgressIcon = ({ value = 0, total = 100, className }: ProgressIcon
     );
   }
 
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
   const progressStyle: CustomCSSProperties = {
     '--progress': `${percentage}%`,
   };
 
   return <div className={cx(styles.progress, className)} style={progressStyle} data-value={`${percentage}%`} />;
+=======
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+  const progressStyle = {
+    '--progress': percentage + '%',
+  };
+
+<<<<<<< HEAD
+<<<<<<< HEAD
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+  return (
+    <div
+      className={cx(styles.progress, className)}
+      style={progressStyle}
+      data-value={`${percentage}%`}
+    />
+  );
+<<<<<<< HEAD
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+  return <div className={cx(styles.progress, className)} style={progressStyle} data-value={`${percentage}%`} />;
+>>>>>>> 058ad14 (list + dialogs)
 };
diff --git a/lib/components/Icon/index.ts b/lib/components/Icon/index.ts
index e2e38dc..6a6c647 100644
--- a/lib/components/Icon/index.ts
+++ b/lib/components/Icon/index.ts
@@ -1,6 +1,27 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 058ad14 (list + dialogs)
 export * from './Icon';
 export * from './SvgIcon';
 export * from './CheckboxIcon';
 export * from './RadioIcon';
 export * from './ProgressIcon';
 export * from './iconsMap';
+<<<<<<< HEAD
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+export * from "./Icon";
+export * from "./SvgIcon";
+export * from "./CheckboxIcon";
+export * from "./RadioIcon";
+export * from "./ProgressIcon";
+export * from "./iconsMap";
+<<<<<<< HEAD
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+>>>>>>> 058ad14 (list + dialogs)
diff --git a/lib/components/Icon/progressIcon.module.css b/lib/components/Icon/progressIcon.module.css
index 6ec2868..e9bae97 100644
--- a/lib/components/Icon/progressIcon.module.css
+++ b/lib/components/Icon/progressIcon.module.css
@@ -4,7 +4,24 @@
   height: var(--size);
   aspect-ratio: 1;
   border-radius: 50%;
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
   background: conic-gradient(var(--theme-border-strong) var(--progress, 0), var(--theme-surface-default) 0);
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+  background: conic-gradient(
+    var(--theme-border-strong) var(--progress, 0),
+    var(--theme-surface-default) 0
+  );
+<<<<<<< HEAD
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+  background: conic-gradient(var(--theme-border-strong) var(--progress, 0), var(--theme-surface-default) 0);
+>>>>>>> 058ad14 (list + dialogs)
   display: grid;
   place-content: center;
   transform: scaleX(-1);
diff --git a/lib/components/Layout/Layout.stories.ts b/lib/components/Layout/Layout.stories.ts
index 0df2ad4..e8fd9dd 100644
--- a/lib/components/Layout/Layout.stories.ts
+++ b/lib/components/Layout/Layout.stories.ts
@@ -8,10 +8,22 @@ const menu: MenuProps = {
     {
       id: '1',
       group: 1,
+<<<<<<< HEAD
+<<<<<<< HEAD
       size: 'lg',
       icon: 'inbox',
       title: 'Innboks',
       badge: '4',
+=======
+      size: "lg",
+      icon: "inbox",
+      title: "Innboks",
+>>>>>>> 1b23eba (push it)
+=======
+      size: 'lg',
+      icon: 'inbox',
+      title: 'Innboks',
+>>>>>>> 058ad14 (list + dialogs)
     },
     {
       id: '2',
@@ -24,15 +36,33 @@ const menu: MenuProps = {
       group: 2,
       icon: 'file-checkmark',
       selected: true,
+<<<<<<< HEAD
+<<<<<<< HEAD
       title: 'Sendt',
       badge: '2',
+=======
+      title: "Sendt",
+>>>>>>> 1b23eba (push it)
+=======
+      title: 'Sendt',
+>>>>>>> 058ad14 (list + dialogs)
     },
     {
       id: '4',
       group: 3,
+<<<<<<< HEAD
+<<<<<<< HEAD
       icon: 'bookmark',
       title: 'Lagrede søk',
       badge: '11',
+=======
+      icon: "bookmark",
+      title: "Lagrede søk",
+>>>>>>> 1b23eba (push it)
+=======
+      icon: 'bookmark',
+      title: 'Lagrede søk',
+>>>>>>> 058ad14 (list + dialogs)
     },
     {
       id: '5',
diff --git a/lib/components/List/List.tsx b/lib/components/List/List.tsx
index e118fb6..d830b00 100644
--- a/lib/components/List/List.tsx
+++ b/lib/components/List/List.tsx
@@ -1,7 +1,26 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 058ad14 (list + dialogs)
 import type { LayoutTheme } from '../Layout';
 import { ListBase } from '../List';
 import { ListItem, type ListItemProps } from './ListItem';
 import type { ListItemSize } from './ListItemBase';
+<<<<<<< HEAD
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+import { ListBase } from "../List";
+import { ListItem, type ListItemProps } from "./ListItem";
+import type { ListItemSize } from "./ListItemBase";
+import type { LayoutTheme } from "../Layout";
+<<<<<<< HEAD
+>>>>>>> 1b23eba (push it)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+>>>>>>> 058ad14 (list + dialogs)
 
 export interface ListProps {
   size?: ListItemSize;
@@ -9,11 +28,33 @@ export interface ListProps {
   items?: ListItemProps[];
 }
 
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 export const List = ({ theme, size = 'md', items }: ListProps) => {
   return (
     <ListBase theme={theme} size={size}>
       {items?.map((item, index) => {
         return <ListItem {...item} size={size} key={'item' + index} />;
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+export const List = ({ theme, size = "md", items }: ListProps) => {
+  return (
+    <ListBase theme={theme} size={size}>
+      {items?.map((item, index) => {
+        return <ListItem {...item} size={size} key={"item" + index} />;
+<<<<<<< HEAD
+>>>>>>> 1b23eba (push it)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+export const List = ({ theme, size = 'md', items }: ListProps) => {
+  return (
+    <ListBase theme={theme} size={size}>
+      {items?.map((item, index) => {
+        return <ListItem {...item} size={size} key={'item' + index} />;
+>>>>>>> 058ad14 (list + dialogs)
       })}
     </ListBase>
   );
diff --git a/lib/components/List/ListBase.tsx b/lib/components/List/ListBase.tsx
index c54fe61..2a466ba 100644
--- a/lib/components/List/ListBase.tsx
+++ b/lib/components/List/ListBase.tsx
@@ -1,3 +1,6 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 import type { ReactNode } from 'react';
 import styles from './listBase.module.css';
 
@@ -5,12 +8,42 @@ import type { LayoutTheme } from '../Layout';
 import type { ListItemSize } from './ListItemBase';
 
 export interface ListBaseProps {
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+import { ReactNode } from "react";
+import styles from "./listBase.module.css";
+=======
+import type { ReactNode } from 'react';
+import styles from './listBase.module.css';
+>>>>>>> 058ad14 (list + dialogs)
+
+import type { LayoutTheme } from '../Layout';
+import type { ListItemSize } from './ListItemBase';
+
+export interface ListProps {
+<<<<<<< HEAD
+>>>>>>> 67770b5 (dialog list)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
   size?: ListItemSize;
   theme?: LayoutTheme;
   children?: ReactNode;
 }
 
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 export const ListBase = ({ size = 'md', theme, children }: ListBaseProps) => {
+=======
+export const ListBase = ({ size = "md", theme, children }: ListProps) => {
+>>>>>>> 67770b5 (dialog list)
+=======
+export const ListBase = ({ size = "md", theme, children }: ListProps) => {
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+export const ListBase = ({ size = 'md', theme, children }: ListProps) => {
+>>>>>>> 058ad14 (list + dialogs)
   return (
     <div className={styles?.list} data-theme={theme} data-size={size}>
       {children}
diff --git a/lib/components/List/ListItem.stories.tsx b/lib/components/List/ListItem.stories.tsx
index 91a4d70..919f2c8 100644
--- a/lib/components/List/ListItem.stories.tsx
+++ b/lib/components/List/ListItem.stories.tsx
@@ -1,3 +1,7 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import { Fragment, useState } from 'react';
@@ -17,6 +21,48 @@ const meta = {
     description: 'Description',
     size: 'md',
     href: '#',
+=======
+import { Fragment } from "react";
+=======
+import { Fragment, useState } from "react";
+>>>>>>> 269fc2e (list item)
+=======
+import { Fragment, useState } from "react";
+>>>>>>> bfd012c (feat: list item + meta tags)
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+=======
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { Fragment, useState } from 'react';
+>>>>>>> 058ad14 (list + dialogs)
+
+import { MetaItem } from '../Meta';
+import { List, ListBase, ListItem } from './';
+
+const sizes = ['lg', 'md', 'sm', 'xs'];
+
+const meta = {
+  title: 'List/ListItem',
+  component: ListItem,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+<<<<<<< HEAD
+    title: "Title",
+    description: "Description",
+    size: "md",
+    href: "#",
+<<<<<<< HEAD
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+    title: 'Title',
+    description: 'Description',
+    size: 'md',
+    href: '#',
+>>>>>>> 058ad14 (list + dialogs)
   },
 } satisfies Meta<typeof ListItem>;
 
@@ -29,22 +75,75 @@ export const Default: Story = {
 
 export const Icon: Story = {
   args: {
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
     icon: 'teddy-bear',
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+    icon: "teddy-bear",
+=======
+    icon: 'teddy-bear',
+>>>>>>> 058ad14 (list + dialogs)
+  },
+};
+
+<<<<<<< HEAD
+<<<<<<< HEAD
+export const IconSubtle: Story = {
+  args: {
+    color: "subtle",
+    icon: "teddy-bear",
+>>>>>>> 7eee1f8 (list item 0.1)
   },
 };
 
+=======
+>>>>>>> 5f2ea80 (dialog list item sizes)
 export const IconAccent: Story = {
   args: {
+<<<<<<< HEAD
     color: 'accent',
     icon: 'teddy-bear',
+=======
+    color: "accent",
+    icon: "teddy-bear",
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+export const IconAccent: Story = {
+  args: {
+<<<<<<< HEAD
+    color: "accent",
+    icon: "teddy-bear",
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+    color: 'accent',
+    icon: 'teddy-bear',
+>>>>>>> 058ad14 (list + dialogs)
   },
 };
 
 export const Person: Story = {
   args: {
     avatar: {
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
       type: 'person',
       name: 'Erik Huseklepp',
+=======
+      type: "person",
+      name: "Erik Huseklepp",
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+      type: "person",
+      name: "Erik Huseklepp",
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+      type: 'person',
+      name: 'Erik Huseklepp',
+>>>>>>> 058ad14 (list + dialogs)
     },
   },
 };
@@ -52,8 +151,23 @@ export const Person: Story = {
 export const Company: Story = {
   args: {
     avatar: {
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+      type: 'company',
+      name: 'Sportsklubben Brann',
+=======
+      type: "company",
+      name: "Sportsklubben Brann",
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+      type: "company",
+      name: "Sportsklubben Brann",
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
       type: 'company',
       name: 'Sportsklubben Brann',
+>>>>>>> 058ad14 (list + dialogs)
     },
   },
 };
@@ -61,10 +175,30 @@ export const Company: Story = {
 export const Logo: Story = {
   args: {
     avatar: {
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
       type: 'company',
       name: 'Politiets sikkerhetstjeneste',
       imageUrl:
         'https://media.licdn.com/dms/image/v2/D4D0BAQH7Yv86kmHN5g/company-logo_200_200/company-logo_200_200/0/1688735908848?e=1738195200&v=beta&t=f-Mkzd03bqzdQN4IT0h89VQ9_Jri1iJ6XphYYnjsgEo',
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+      type: "company",
+      name: "Politiets sikkerhetstjeneste",
+      imageUrl:
+        "https://media.licdn.com/dms/image/v2/D4D0BAQH7Yv86kmHN5g/company-logo_200_200/company-logo_200_200/0/1688735908848?e=1738195200&v=beta&t=f-Mkzd03bqzdQN4IT0h89VQ9_Jri1iJ6XphYYnjsgEo",
+<<<<<<< HEAD
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+      type: 'company',
+      name: 'Politiets sikkerhetstjeneste',
+      imageUrl:
+        'https://media.licdn.com/dms/image/v2/D4D0BAQH7Yv86kmHN5g/company-logo_200_200/company-logo_200_200/0/1688735908848?e=1738195200&v=beta&t=f-Mkzd03bqzdQN4IT0h89VQ9_Jri1iJ6XphYYnjsgEo',
+>>>>>>> 058ad14 (list + dialogs)
     },
   },
 };
@@ -74,6 +208,9 @@ export const PeopleGroup: Story = {
     avatarGroup: {
       items: [
         {
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
           type: 'person',
           name: 'Albert Åberg',
         },
@@ -84,6 +221,32 @@ export const PeopleGroup: Story = {
         {
           type: 'person',
           name: 'Celine Dion',
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+          type: "person",
+          name: "Albert Åberg",
+=======
+          type: 'person',
+          name: 'Albert Åberg',
+>>>>>>> 058ad14 (list + dialogs)
+        },
+        {
+          type: 'person',
+          name: 'Birger Meling',
+        },
+        {
+<<<<<<< HEAD
+          type: "person",
+          name: "Celine Dion",
+<<<<<<< HEAD
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+          type: 'person',
+          name: 'Celine Dion',
+>>>>>>> 058ad14 (list + dialogs)
         },
       ],
     },
@@ -95,16 +258,45 @@ export const CompanyGroup: Story = {
     avatarGroup: {
       items: [
         {
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+          type: 'company',
+          name: 'Albert Åberg',
+        },
+        {
+          type: 'company',
+          name: 'Birger Meling',
+        },
+        {
+          type: 'company',
+          name: 'Celine Dion',
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+          type: "company",
+          name: "Albert Åberg",
+=======
           type: 'company',
           name: 'Albert Åberg',
+>>>>>>> 058ad14 (list + dialogs)
         },
         {
           type: 'company',
           name: 'Birger Meling',
         },
         {
+<<<<<<< HEAD
+          type: "company",
+          name: "Celine Dion",
+<<<<<<< HEAD
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
           type: 'company',
           name: 'Celine Dion',
+>>>>>>> 058ad14 (list + dialogs)
         },
       ],
     },
@@ -114,8 +306,110 @@ export const CompanyGroup: Story = {
 export const LongTitle: Story = {
   args: {
     avatar: {
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+      type: 'company',
+      name: 'Direktoratet for samfunnssikkerhet og beredskap',
+      imageUrl:
+        'https://media.licdn.com/dms/image/v2/C510BAQHlQiOWI4f45w/company-logo_200_200/company-logo_200_200/0/1631389121726?e=1738195200&v=beta&t=Q1P8kOwpgLvoqHBxyrHCaYd2upNkPQVi2zSSxJzbdCA',
+    },
+    title:
+      'Samtykke for å reparere elektrisk utstyr hvis bruk er forbundet med særlig risiko, herunder elektromedisinsk utstyr',
+    description: 'Direktoratet for samfunnssikkerhet og beredskap',
+  },
+};
+
+export const Sizes = (args) => {
+  return (
+    <ListBase>
+      {sizes?.map((size) => {
+        return (
+          <Fragment key={size}>
+            <ListItem {...args} size={size} selected={size === args?.size} />
+            <MetaItem>{size}</MetaItem>
+          </Fragment>
+        );
+      })}
+    </ListBase>
+  );
+};
+
+export const Collapsible = (args) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const onToggle = () => {
+    setExpanded((prevState) => !prevState);
+  };
+
+  const people = [
+    {
+      name: 'Per Ove Ludvigsen',
+      role: 'Sportlig leder',
+      rights: 'Admin',
+    },
+    {
+      name: 'Eirik Horneland',
+      role: 'Trener',
+      rights: 'Admin',
+    },
+    {
+      name: 'Erik Huseklepp',
+      role: 'Assistenttrener',
+      rights: 'Lese og skrive',
+    },
+    {
+      name: 'Hassan El Fakiri',
+      role: 'Toppspillerutvikler',
+      rights: 'Ingen rettigheter',
+    },
+  ];
+
+  const items = people?.map((item) => {
+    return {
+      avatar: {
+        ...item,
+        type: 'person',
+      },
+      title: item?.name,
+      description: item?.role,
+      badge: { label: item?.rights },
+      linkIcon: 'menu-elipsis-horizontal',
+    };
+  });
+
+  const avatarGroup = {
+    items: people?.map((item) => {
+      return {
+        name: item?.name,
+        type: 'person',
+      };
+    }),
+  };
+
+  return (
+    <Fragment>
+      <ListItem
+        {...args}
+        avatarGroup={avatarGroup}
+        collapsible={true}
+        expanded={expanded}
+        onClick={onToggle}
+        as="button"
+      />
+      {expanded && <List size="xs" items={items} />}
+    </Fragment>
+  );
+};
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+      type: "company",
+      name: "Direktoratet for samfunnssikkerhet og beredskap",
+=======
       type: 'company',
       name: 'Direktoratet for samfunnssikkerhet og beredskap',
+>>>>>>> 058ad14 (list + dialogs)
       imageUrl:
         'https://media.licdn.com/dms/image/v2/C510BAQHlQiOWI4f45w/company-logo_200_200/company-logo_200_200/0/1631389121726?e=1738195200&v=beta&t=Q1P8kOwpgLvoqHBxyrHCaYd2upNkPQVi2zSSxJzbdCA',
     },
@@ -124,6 +418,12 @@ export const LongTitle: Story = {
     description: 'Direktoratet for samfunnssikkerhet og beredskap',
   },
 };
+<<<<<<< HEAD
+<<<<<<< HEAD
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
 
 export const Sizes = (args) => {
   return (
@@ -206,3 +506,7 @@ export const Collapsible = (args) => {
     </Fragment>
   );
 };
+<<<<<<< HEAD
+>>>>>>> 269fc2e (list item)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
diff --git a/lib/components/List/ListItem.tsx b/lib/components/List/ListItem.tsx
index dfb442c..fa1a31e 100644
--- a/lib/components/List/ListItem.tsx
+++ b/lib/components/List/ListItem.tsx
@@ -1,20 +1,65 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 import type { ElementType, ReactNode } from 'react';
 import type { AvatarGroupProps, AvatarProps } from '../Avatar';
 import type { BadgeProps } from '../Badge';
+=======
+import type { ElementType, ReactNode } from 'react';
+import type { AvatarGroupProps, AvatarProps } from '../Avatar';
+import type { BadgeProps } from '../Avatar';
+>>>>>>> 058ad14 (list + dialogs)
 import type { IconName } from '../Icon';
 import { ListItemBase, type ListItemColor, type ListItemSize } from './ListItemBase';
 import { ListItemLabel } from './ListItemLabel';
 import { ListItemMedia } from './ListItemMedia';
+<<<<<<< HEAD
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+import type { ElementType, ReactNode } from "react";
+import type { AvatarGroupProps, AvatarProps } from "../Avatar";
+import type { BadgeProps } from "../Avatar";
+import {
+  ListItemBase,
+  type ListItemSize,
+  type ListItemColor,
+} from "./ListItemBase";
+import { ListItemMedia } from "./ListItemMedia";
+import { ListItemLabel } from "./ListItemLabel";
+import type { IconName } from "../Icon";
+<<<<<<< HEAD
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+>>>>>>> 058ad14 (list + dialogs)
 
 export interface ListItemProps {
   id: string;
   type?: string;
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+  /** Element type to render */
+=======
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+  /** Element type to render */
+>>>>>>> 269fc2e (list item)
+=======
   /** Element type to render */
+>>>>>>> bfd012c (feat: list item + meta tags)
   as?: ElementType;
   color?: ListItemColor;
   href?: string;
   onClick?: () => void;
   hidden?: boolean;
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
   /** Collapsible item, sets linkIcon to "chevron down" */
   collapsible?: boolean;
   /** Item is expanded, sets linkIcon to "chevron up" */
@@ -34,10 +79,53 @@ export interface ListItemProps {
   /** Optional badge */
   badge?: BadgeProps;
   /** List item icon */
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+  icon?: IconName;
+  /** List item avatar */
+  avatar?: AvatarProps;
+  /** List item avatarGroup */
+<<<<<<< HEAD
+=======
+=======
+  /** Collapsible item, sets linkIcon to "chevron down" */
+>>>>>>> 269fc2e (list item)
+  collapsible?: boolean;
+  /** Item is expanded, sets linkIcon to "chevron up" */
+  expanded?: boolean;
+  /** Item is selected */
+  selected?: boolean;
+  /** Item is disabled, should disable mouse events */
+  disabled?: boolean;
+  /** Display an icon indicating behaviour */
+  linkIcon?: IconName;
+  /** Size of list item */
+  size?: ListItemSize;
+  /** Title */
+  title?: string;
+  /** Optional description */
+  description?: string;
+  /** Optional badge */
+  badge?: string;
+  /** List item media, icon */
+=======
+>>>>>>> 1b23eba (push it)
   icon?: IconName;
   /** List item avatar */
   avatar?: AvatarProps;
+<<<<<<< HEAD
+<<<<<<< HEAD
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+  /** List item media, avatarGroup */
+>>>>>>> 269fc2e (list item)
+=======
   /** List item avatarGroup */
+>>>>>>> 1b23eba (push it)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
   avatarGroup?: AvatarGroupProps;
   children?: ReactNode;
   items?: ListItemProps[];
@@ -45,25 +133,95 @@ export interface ListItemProps {
 }
 
 export const ListItem = ({
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+  as = 'a',
+=======
+  as = "a",
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+  as = "a",
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
   as = 'a',
+>>>>>>> 058ad14 (list + dialogs)
   color,
   children,
   selected,
   disabled,
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
   size = 'sm',
+=======
+  size = "sm",
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+  size = "sm",
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+  size = 'sm',
+>>>>>>> 058ad14 (list + dialogs)
   icon,
   avatar,
   avatarGroup,
   badge,
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+  label,
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+>>>>>>> 269fc2e (list item)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
   title,
   description,
   ...rest
 }: ListItemProps) => {
   return (
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+    <ListItemBase as={as} size={size} badge={badge} color={color} selected={selected} {...rest}>
+      <ListItemMedia color={color} size={size} icon={icon} avatar={avatar} avatarGroup={avatarGroup} />
+      <ListItemLabel title={title} description={description} size={size}>
+        {children}
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+    <ListItemBase
+      as={as}
+      size={size}
+      badge={badge}
+      color={color}
+      selected={selected}
+      {...rest}
+    >
+      <ListItemMedia
+        color={color}
+        size={size}
+        icon={icon}
+        avatar={avatar}
+        avatarGroup={avatarGroup}
+      />
+=======
     <ListItemBase as={as} size={size} badge={badge} color={color} selected={selected} {...rest}>
       <ListItemMedia color={color} size={size} icon={icon} avatar={avatar} avatarGroup={avatarGroup} />
+>>>>>>> 058ad14 (list + dialogs)
       <ListItemLabel title={title} description={description} size={size}>
+<<<<<<< HEAD
+<<<<<<< HEAD
+        {label || children}
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+        {children}
+>>>>>>> 269fc2e (list item)
+=======
         {children}
+>>>>>>> bfd012c (feat: list item + meta tags)
       </ListItemLabel>
     </ListItemBase>
   );
diff --git a/lib/components/List/ListItemBase.tsx b/lib/components/List/ListItemBase.tsx
index de8ebb1..08f84fa 100644
--- a/lib/components/List/ListItemBase.tsx
+++ b/lib/components/List/ListItemBase.tsx
@@ -1,15 +1,46 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 058ad14 (list + dialogs)
 import cx from 'classnames';
 import type { ElementType, ReactNode } from 'react';
 import { Badge, type BadgeProps } from '../Badge';
 import { Icon, type IconName } from '../Icon';
 import styles from './listItemBase.module.css';
+<<<<<<< HEAD
 
 export type ListItemColor = 'default' | 'accent';
 export type ListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+import { ReactNode, ElementType } from "react";
+import { Icon, type IconName } from "../Icon";
+import { Badge, type BadgeProps } from "../Badge";
+import styles from "./listItemBase.module.css";
+import cx from "classnames";
+
+export type ListItemColor = "default" | "accent";
+export type ListItemSize = "xs" | "sm" | "md" | "lg" | "xl";
+<<<<<<< HEAD
+>>>>>>> 67770b5 (dialog list)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+
+export type ListItemColor = 'default' | 'accent';
+export type ListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+>>>>>>> 058ad14 (list + dialogs)
 
 interface ListItemBaseProps {
   as?: ElementType;
   size?: ListItemSize;
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
   linkIcon?: IconName;
   color?: ListItemColor;
   badge?: BadgeProps;
@@ -17,6 +48,24 @@ interface ListItemBaseProps {
   className?: string;
   collapsible?: boolean;
   selected?: boolean;
+<<<<<<< HEAD
+=======
+  icon?: IconName;
+=======
+  linkIcon?: IconName;
+  color?: ListItemColor;
+>>>>>>> 7eee1f8 (list item 0.1)
+  badge?: string;
+  href?: string;
+  className?: string;
+  collapsible?: boolean;
+<<<<<<< HEAD
+>>>>>>> 67770b5 (dialog list)
+=======
+  selected?: boolean;
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
   expanded?: boolean;
   children?: ReactNode;
 }
@@ -29,23 +78,77 @@ export const ListItemBase = ({
   size,
   color,
   collapsible,
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
   selected,
   expanded,
   linkIcon,
   badge,
   ...rest
 }: ListItemBaseProps) => {
+<<<<<<< HEAD
+<<<<<<< HEAD
   const Component = as || 'a';
 
   const applicableIcon =
     collapsible && expanded ? 'chevron-up' : collapsible ? 'chevron-down' : href ? 'chevron-right' : linkIcon;
+=======
+=======
+  selected,
+>>>>>>> 7eee1f8 (list item 0.1)
+  expanded,
+  linkIcon,
+  badge,
+  ...rest
+}: ListItemBaseProps) => {
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+  const Component = as || "a";
+
+  const applicableIcon =
+    collapsible && expanded
+      ? "chevron-up"
+      : collapsible
+      ? "chevron-down"
+      : href
+      ? "chevron-right"
+<<<<<<< HEAD
+<<<<<<< HEAD
+      : icon;
+>>>>>>> 67770b5 (dialog list)
+=======
+      : linkIcon;
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+      : linkIcon;
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+  const Component = as || 'a';
+
+  const applicableIcon =
+    collapsible && expanded ? 'chevron-up' : collapsible ? 'chevron-down' : href ? 'chevron-right' : linkIcon;
+>>>>>>> 058ad14 (list + dialogs)
 
   return (
     <Component
       className={cx(styles?.item, className)}
       data-color={color}
       data-size={size}
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+      aria-selected={selected}
+=======
+>>>>>>> 67770b5 (dialog list)
+=======
+      aria-selected={selected}
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
       aria-selected={selected}
+>>>>>>> bfd012c (feat: list item + meta tags)
       aria-expanded={expanded}
       href={href}
       {...rest}
@@ -53,9 +156,37 @@ export const ListItemBase = ({
       <div className={styles.content} data-size={size}>
         {children}
       </div>
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+      <div className={styles.action}>
+        {badge && <Badge {...badge} />}
+        {applicableIcon && <Icon name={applicableIcon} className={styles.linkIcon} />}
+=======
+      <div className={styles?.action}>
+        {badge ? <Badge>{badge}</Badge> : ""}
+        {applicableIcon ? (
+          <Icon name={applicableIcon} className={styles?.actionIcon} />
+        ) : (
+          ""
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
       <div className={styles.action}>
         {badge && <Badge {...badge} />}
+<<<<<<< HEAD
+        {applicableIcon && (
+          <Icon name={applicableIcon} className={styles.linkIcon} />
+<<<<<<< HEAD
+>>>>>>> 1b23eba (push it)
+        )}
+>>>>>>> 67770b5 (dialog list)
+=======
+        )}
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
         {applicableIcon && <Icon name={applicableIcon} className={styles.linkIcon} />}
+>>>>>>> 058ad14 (list + dialogs)
       </div>
     </Component>
   );
diff --git a/lib/components/List/ListItemLabel.tsx b/lib/components/List/ListItemLabel.tsx
index 82952fa..45fcb36 100644
--- a/lib/components/List/ListItemLabel.tsx
+++ b/lib/components/List/ListItemLabel.tsx
@@ -1,15 +1,59 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 import type { ReactNode } from 'react';
 import type { ListItemSize } from './ListItemBase';
 import styles from './listItemLabel.module.css';
 
 export interface ListItemLabelProps {
   size?: ListItemSize;
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+import type { ReactNode } from "react";
+import styles from "./listItemLabel.module.css";
+import type { ListItemSize } from "./ListItemBase";
+=======
+import type { ReactNode } from 'react';
+import type { ListItemSize } from './ListItemBase';
+import styles from './listItemLabel.module.css';
+>>>>>>> 058ad14 (list + dialogs)
+
+export interface ListItemLabelProps {
+  size?: ListItemSize;
+<<<<<<< HEAD
+<<<<<<< HEAD
+  label?: string;
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+>>>>>>> 269fc2e (list item)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
   title?: string;
   description?: string;
   children?: ReactNode;
 }
 
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+export const ListItemLabel = ({ size = 'sm', title, description, children }: ListItemLabelProps) => {
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+export const ListItemLabel = ({
+  size = "sm",
+  title,
+  description,
+  children,
+}: ListItemLabelProps) => {
+<<<<<<< HEAD
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
 export const ListItemLabel = ({ size = 'sm', title, description, children }: ListItemLabelProps) => {
+>>>>>>> 058ad14 (list + dialogs)
   return (
     <span className={styles?.label} data-size={size}>
       {children ? (
@@ -17,7 +61,19 @@ export const ListItemLabel = ({ size = 'sm', title, description, children }: Lis
       ) : (
         <>
           <strong className={styles?.title} data-size={size}>
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+            {title}
+=======
+            {title || label}
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+            {title}
+>>>>>>> 269fc2e (list item)
+=======
             {title}
+>>>>>>> bfd012c (feat: list item + meta tags)
           </strong>
           <span className={styles?.description} data-size={size}>
             {description}
diff --git a/lib/components/List/ListItemMedia.tsx b/lib/components/List/ListItemMedia.tsx
index b435c3e..b653186 100644
--- a/lib/components/List/ListItemMedia.tsx
+++ b/lib/components/List/ListItemMedia.tsx
@@ -1,8 +1,39 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 058ad14 (list + dialogs)
 import type { ReactNode } from 'react';
 import { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize } from '../Avatar';
 import { Icon, type IconName } from '../Icon';
 import type { ListItemColor, ListItemSize } from './ListItemBase';
 import styles from './listItemMedia.module.css';
+<<<<<<< HEAD
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+import type { ReactNode } from "react";
+import type { ListItemSize, ListItemColor } from "./ListItemBase";
+import {
+  Avatar,
+  AvatarGroup,
+  type AvatarGroupProps,
+  type AvatarProps,
+  type AvatarSize,
+} from "../Avatar";
+import { Icon, type IconName } from "../Icon";
+<<<<<<< HEAD
+<<<<<<< HEAD
+import styles from "./listItem.module.css";
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+import styles from "./listItemMedia.module.css";
+>>>>>>> 269fc2e (list item)
+=======
+import styles from "./listItemMedia.module.css";
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+>>>>>>> 058ad14 (list + dialogs)
 
 interface ListItemMediaProps {
   color?: ListItemColor;
@@ -15,11 +46,17 @@ interface ListItemMediaProps {
 
 const sizeMap = {
   avatar: {
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 058ad14 (list + dialogs)
     xs: 'xs',
     sm: 'sm',
     md: 'md',
     lg: 'lg',
     xl: 'xl',
+<<<<<<< HEAD
   },
   avatarGroup: {
     xs: 'xs',
@@ -27,12 +64,55 @@ const sizeMap = {
     md: 'sm',
     lg: 'md',
     xl: 'lg',
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+    xs: "xs",
+    sm: "sm",
+    md: "md",
+    lg: "lg",
+    xl: "xl",
+  },
+  avatarGroup: {
+    xs: "xs",
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+    xl: "lg",
+<<<<<<< HEAD
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+  },
+  avatarGroup: {
+    xs: 'xs',
+    sm: 'xs',
+    md: 'sm',
+    lg: 'md',
+    xl: 'lg',
+>>>>>>> 058ad14 (list + dialogs)
   },
 };
 
 export const ListItemMedia = ({
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+  size = 'sm',
+  color = 'default',
+=======
+  size = "sm",
+  color = "default",
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+  size = "sm",
+  color = "default",
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
   size = 'sm',
   color = 'default',
+>>>>>>> 058ad14 (list + dialogs)
   icon,
   avatar,
   avatarGroup,
@@ -43,9 +123,62 @@ export const ListItemMedia = ({
   }
 
   return (
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+    <div className={styles.media} data-size={size} data-color={!icon ? null : color}>
+      {(icon && <Icon name={icon} variant="outline" className={styles.icon} />) ||
+        (avatar && <Avatar {...avatar} size={sizeMap?.avatar[size] as AvatarSize} className={styles.avatar} />) ||
+        (avatarGroup && (
+          <AvatarGroup
+            {...avatarGroup}
+            size={sizeMap?.avatarGroup[size] as AvatarSize}
+            className={styles.avatarGroup}
+          />
+        ))}
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+    <div
+      className={styles.media}
+      data-size={size}
+      data-color={!icon ? null : color}
+    >
+<<<<<<< HEAD
+<<<<<<< HEAD
+      {icon ? (
+        <Icon name={icon} variant="outline" className={styles?.icon} />
+      ) : (
+        ""
+      )}
+      {avatar && (
+        <Avatar {...avatar} size={sizeMap?.avatar[size] as AvatarSize} />
+      )}
+      {avatarGroup && (
+        <AvatarGroup
+          {...avatarGroup}
+          size={sizeMap?.avatarGroup[size] as AvatarSize}
+        />
+      )}
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+      {(icon && (
+        <Icon name={icon} variant="outline" className={styles.icon} />
+      )) ||
+        (avatar && (
+          <Avatar
+            {...avatar}
+            size={sizeMap?.avatar[size] as AvatarSize}
+            className={styles.avatar}
+          />
+        )) ||
+=======
     <div className={styles.media} data-size={size} data-color={!icon ? null : color}>
       {(icon && <Icon name={icon} variant="outline" className={styles.icon} />) ||
         (avatar && <Avatar {...avatar} size={sizeMap?.avatar[size] as AvatarSize} className={styles.avatar} />) ||
+>>>>>>> 058ad14 (list + dialogs)
         (avatarGroup && (
           <AvatarGroup
             {...avatarGroup}
@@ -53,6 +186,10 @@ export const ListItemMedia = ({
             className={styles.avatarGroup}
           />
         ))}
+<<<<<<< HEAD
+>>>>>>> 269fc2e (list item)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
       {children}
     </div>
   );
diff --git a/lib/components/List/index.ts b/lib/components/List/index.ts
index 1e478c5..2a12db4 100644
--- a/lib/components/List/index.ts
+++ b/lib/components/List/index.ts
@@ -1,4 +1,35 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 058ad14 (list + dialogs)
 export * from './ListItemBase';
 export * from './ListItem';
 export * from './ListBase';
 export * from './List';
+<<<<<<< HEAD
+=======
+export * from "./ListBase";
+//export * from "./List";
+=======
+>>>>>>> 1b23eba (push it)
+export * from "./ListItemBase";
+<<<<<<< HEAD
+>>>>>>> 67770b5 (dialog list)
+=======
+export * from "./ListItem";
+<<<<<<< HEAD
+>>>>>>> 7eee1f8 (list item 0.1)
+=======
+export * from "./ListBase";
+export * from "./List";
+>>>>>>> 1b23eba (push it)
+=======
+export * from "./ListItemBase";
+export * from "./ListItem";
+export * from "./ListBase";
+export * from "./List";
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+>>>>>>> 058ad14 (list + dialogs)
diff --git a/lib/components/List/listItemBase.module.css b/lib/components/List/listItemBase.module.css
index 95d982a..068e7b4 100644
--- a/lib/components/List/listItemBase.module.css
+++ b/lib/components/List/listItemBase.module.css
@@ -1,3 +1,8 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
 /* reset */
 
 .item {
@@ -18,16 +23,61 @@
 
 .item {
   width: 100%;
+<<<<<<< HEAD
+=======
+.item {
+  background-color: var(--theme-background-default);
+  box-shadow: var(--ds-shadow-xs);
+>>>>>>> 269fc2e (list item)
+=======
+/* reset */
+
+.item {
+  border: none;
+
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+
+  line-height: normal;
+
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+
+  user-select: none;
+  cursor: pointer;
+}
+
+.item {
+  width: 100%;
+>>>>>>> 1b23eba (push it)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
   position: relative;
   display: flex;
   align-items: center;
   text-decoration: none;
   color: inherit;
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 1b23eba (push it)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
 }
 
 /* sizes */
 
 .item[data-size="xs"] {
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 269fc2e (list item)
+=======
+>>>>>>> 1b23eba (push it)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
   min-height: 36px;
 }
 
@@ -66,17 +116,44 @@
   padding: 0.625rem;
 }
 
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+.linkIcon {
+=======
+.actionIcon {
+>>>>>>> 269fc2e (list item)
+=======
+.linkIcon {
+>>>>>>> 1b23eba (push it)
+=======
 .linkIcon {
+>>>>>>> bfd012c (feat: list item + meta tags)
   font-size: 1.5rem;
 }
 
 /* colors */
 
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 1b23eba (push it)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
 .item {
   background-color: var(--theme-background-default);
   box-shadow: var(--ds-shadow-xs);
 }
 
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 269fc2e (list item)
+=======
+>>>>>>> 1b23eba (push it)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
 .item[data-color="accent"] {
   background-color: var(--theme-surface-default);
 }
diff --git a/lib/components/Menu/Menu.stories.ts b/lib/components/Menu/Menu.stories.ts
index dae3f5e..5b221df 100644
--- a/lib/components/Menu/Menu.stories.ts
+++ b/lib/components/Menu/Menu.stories.ts
@@ -14,7 +14,10 @@ type Story = StoryObj<typeof meta>;
 
 export const GlobalMenu: Story = {
   args: {
+<<<<<<< HEAD
     theme: 'global',
+=======
+>>>>>>> 1b23eba (push it)
     groups: {
       settings: {
         defaultItemColor: 'default',
@@ -33,11 +36,16 @@ export const GlobalMenu: Story = {
         description: 'Fødselsnr: XX.XX.XXXX',
       },
       {
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 058ad14 (list + dialogs)
         id: 'inbox',
         group: 'apps',
         size: 'lg',
         icon: 'inbox',
         title: 'Innboks',
+<<<<<<< HEAD
       },
       {
         id: 'access',
@@ -45,6 +53,30 @@ export const GlobalMenu: Story = {
         size: 'lg',
         icon: 'bookmark',
         title: 'Tilganger',
+=======
+        id: "inbox",
+        group: "apps",
+        size: "lg",
+        icon: "inbox",
+        title: "Innboks",
+=======
+>>>>>>> 058ad14 (list + dialogs)
+        badge: {
+          color: 'alert',
+          label: '4',
+        },
+      },
+      {
+        id: 'access',
+        group: 'apps',
+        size: 'lg',
+        icon: 'bookmark',
+        title: 'Tilganger',
+        badge: {
+          color: 'alert',
+          label: '2',
+        },
+>>>>>>> 1b23eba (push it)
       },
       {
         id: 'access',
@@ -65,7 +97,10 @@ export const GlobalMenu: Story = {
 
 export const CollapsibleGlobalMenu: Story = {
   args: {
+<<<<<<< HEAD
     theme: 'global',
+=======
+>>>>>>> 1b23eba (push it)
     groups: {
       settings: {
         defaultItemColor: 'default',
@@ -84,12 +119,26 @@ export const CollapsibleGlobalMenu: Story = {
         description: 'Fødselsnr: XX.XX.XXXX',
       },
       {
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 058ad14 (list + dialogs)
         id: 'innboks',
         group: 'apps',
         size: 'lg',
         icon: 'inbox',
         title: 'Innboks',
+<<<<<<< HEAD
         badge: '4',
+=======
+        id: "innboks",
+        group: "apps",
+        size: "lg",
+        icon: "inbox",
+        title: "Innboks",
+>>>>>>> 1b23eba (push it)
+=======
+>>>>>>> 058ad14 (list + dialogs)
         collapsible: true,
         items: [
           {
@@ -103,6 +152,8 @@ export const CollapsibleGlobalMenu: Story = {
             group: '1',
             icon: 'file-checkmark',
             selected: true,
+<<<<<<< HEAD
+<<<<<<< HEAD
             title: 'Sendt',
             badge: 2,
           },
@@ -112,6 +163,24 @@ export const CollapsibleGlobalMenu: Story = {
             icon: 'bookmark',
             title: 'Lagrede søk',
             badge: 11,
+=======
+            title: "Sendt",
+          },
+          {
+            id: "bookmarks",
+            group: "3",
+            icon: "bookmark",
+            title: "Lagrede søk",
+>>>>>>> 1b23eba (push it)
+=======
+            title: 'Sendt',
+          },
+          {
+            id: 'bookmarks',
+            group: '3',
+            icon: 'bookmark',
+            title: 'Lagrede søk',
+>>>>>>> 058ad14 (list + dialogs)
           },
           {
             id: 'arkiv',
@@ -169,8 +238,16 @@ export const ExpandedGlobalMenu: Story = {
 
 export const DrilldownMenu: Story = {
   args: {
+<<<<<<< HEAD
+<<<<<<< HEAD
     theme: 'global',
     color: 'subtle',
+=======
+    color: "subtle",
+>>>>>>> 1b23eba (push it)
+=======
+    color: 'subtle',
+>>>>>>> 058ad14 (list + dialogs)
     groups: {
       'level-1': {
         divider: true,
@@ -220,17 +297,24 @@ export const DrilldownMenu: Story = {
 
 export const InboxMenu: Story = {
   args: {
+<<<<<<< HEAD
     theme: 'global',
+=======
+>>>>>>> 1b23eba (push it)
     groups: {},
-
     items: [
       {
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 058ad14 (list + dialogs)
         id: 'innboks',
         group: '1',
         size: 'lg',
         icon: 'inbox',
         title: 'Innboks',
         color: 'strong',
+<<<<<<< HEAD
         badge: 4,
       },
       {
@@ -238,12 +322,35 @@ export const InboxMenu: Story = {
         group: '2',
         icon: 'doc-pencil',
         title: 'Utkast',
+=======
+        id: "innboks",
+        group: "1",
+        size: "lg",
+        icon: "inbox",
+        title: "Innboks",
+        color: "strong",
+        badge: { color: "alert", label: "4" },
+=======
+        badge: { color: 'alert', label: '4' },
+>>>>>>> 058ad14 (list + dialogs)
+      },
+      {
+        id: 'utkast',
+        group: '2',
+        icon: 'doc-pencil',
+        title: 'Utkast',
+        badge: {
+          label: '3',
+        },
+>>>>>>> 1b23eba (push it)
       },
       {
         id: 'sendt',
         group: '2',
         icon: 'file-checkmark',
         selected: true,
+<<<<<<< HEAD
+<<<<<<< HEAD
         title: 'Sendt',
         badge: 2,
       },
@@ -259,13 +366,53 @@ export const InboxMenu: Story = {
         group: '4',
         icon: 'archive',
         title: 'Arkivert',
+=======
+        title: "Sendt",
+=======
+        title: 'Sendt',
+>>>>>>> 058ad14 (list + dialogs)
+        badge: {
+          label: '2',
+        },
+      },
+      {
+        id: 'lagret',
+        group: '3',
+        icon: 'bookmark',
+        title: 'Lagrede søk',
+        badge: {
+          label: '5',
+        },
+      },
+      {
+        id: 'arkivert',
+        group: '4',
+        icon: 'archive',
+        title: 'Arkivert',
+        badge: {
+          label: '100+',
+        },
+>>>>>>> 1b23eba (push it)
       },
       {
         id: 'papirkurv',
         group: '4',
         disabled: true,
+<<<<<<< HEAD
+<<<<<<< HEAD
+        icon: 'trash',
+        title: 'Papirkurv',
+=======
+        icon: "trash",
+        title: "Papirkurv",
+=======
         icon: 'trash',
         title: 'Papirkurv',
+>>>>>>> 058ad14 (list + dialogs)
+        badge: {
+          label: '45',
+        },
+>>>>>>> 1b23eba (push it)
       },
     ],
 
@@ -275,7 +422,10 @@ export const InboxMenu: Story = {
 
 export const InboxMenuWithShortcuts = {
   args: {
+<<<<<<< HEAD
     theme: 'global',
+=======
+>>>>>>> 1b23eba (push it)
     groups: {
       ...InboxMenu.args?.groups,
       shortcuts: {
@@ -284,7 +434,11 @@ export const InboxMenuWithShortcuts = {
       },
     },
     items: [
+<<<<<<< HEAD
       ...(InboxMenu.args?.items ?? []),
+=======
+      ...(InboxMenu?.args?.items ?? []),
+>>>>>>> 058ad14 (list + dialogs)
       {
         id: 'users',
         group: 'shortcuts',
@@ -303,7 +457,10 @@ export const InboxMenuWithShortcuts = {
 
 export const PersonMenu: Story = {
   args: {
+<<<<<<< HEAD
     theme: 'global',
+=======
+>>>>>>> 1b23eba (push it)
     groups: {},
     items: [
       {
@@ -352,7 +509,10 @@ export const PersonMenu: Story = {
 
 export const CompanyMenu: Story = {
   args: {
+<<<<<<< HEAD
     theme: 'global',
+=======
+>>>>>>> 1b23eba (push it)
     groups: {},
     items: [
       {
@@ -395,12 +555,19 @@ export const CompanyMenu: Story = {
 
 export const AccountMenu: Story = {
   args: {
+<<<<<<< HEAD
     theme: 'global',
+=======
+>>>>>>> 1b23eba (push it)
     groups: {
       a1: {
         title: 'Deg selv, favoritter og grupper',
       },
       b1: {
+<<<<<<< HEAD
+=======
+        id: 'companies',
+>>>>>>> 058ad14 (list + dialogs)
         title: 'Andre kontoer',
       },
     },
@@ -412,8 +579,19 @@ export const AccountMenu: Story = {
           type: 'person',
           name: 'Dolly Duck',
         },
+<<<<<<< HEAD
+<<<<<<< HEAD
         title: 'Dolly Duck',
         badge: '15',
+=======
+        title: "Dolly Duck",
+=======
+        title: 'Dolly Duck',
+>>>>>>> 058ad14 (list + dialogs)
+        badge: {
+          label: '15',
+        },
+>>>>>>> 1b23eba (push it)
       },
       {
         id: '2',
@@ -422,8 +600,19 @@ export const AccountMenu: Story = {
           type: 'company',
           name: 'Bergen Bar',
         },
+<<<<<<< HEAD
+<<<<<<< HEAD
         title: 'Bergen Bar',
         badge: 21,
+=======
+        title: "Bergen Bar",
+=======
+        title: 'Bergen Bar',
+>>>>>>> 058ad14 (list + dialogs)
+        badge: {
+          label: '21',
+        },
+>>>>>>> 1b23eba (push it)
       },
       {
         id: '3',
@@ -432,8 +621,19 @@ export const AccountMenu: Story = {
           type: 'company',
           name: 'Sportsklubben Brann',
         },
+<<<<<<< HEAD
+<<<<<<< HEAD
         title: 'Sportsklubben Brann',
         badge: '4',
+=======
+        title: "Sportsklubben Brann",
+=======
+        title: 'Sportsklubben Brann',
+>>>>>>> 058ad14 (list + dialogs)
+        badge: {
+          label: '4',
+        },
+>>>>>>> 1b23eba (push it)
       },
       {
         id: '4',
@@ -449,7 +649,18 @@ export const AccountMenu: Story = {
             },
           ],
         },
+<<<<<<< HEAD
+<<<<<<< HEAD
+        title: 'Alle virksomheter',
+=======
+        title: "Alle virksomheter",
+=======
         title: 'Alle virksomheter',
+>>>>>>> 058ad14 (list + dialogs)
+        badge: {
+          label: '45',
+        },
+>>>>>>> 1b23eba (push it)
       },
       {
         id: '5',
@@ -467,7 +678,18 @@ export const AccountMenu: Story = {
           type: 'company',
           name: 'Haralds gym',
         },
+<<<<<<< HEAD
+<<<<<<< HEAD
+        title: 'Haralds gym',
+=======
+        title: "Haralds gym",
+=======
         title: 'Haralds gym',
+>>>>>>> 058ad14 (list + dialogs)
+        badge: {
+          label: '2',
+        },
+>>>>>>> 1b23eba (push it)
       },
       {
         id: '7',
@@ -487,9 +709,12 @@ export const AccountMenuWithSearch: Story = {
     ...AccountMenu.args,
     search: {
       placeholder: 'Søk i kontoer',
+<<<<<<< HEAD
       name: 'search',
       value: '',
       onChange: () => {},
+=======
+>>>>>>> 058ad14 (list + dialogs)
     },
   },
 };
diff --git a/lib/components/Menu/Menu.tsx b/lib/components/Menu/Menu.tsx
index cc4c4b5..daae2e6 100644
--- a/lib/components/Menu/Menu.tsx
+++ b/lib/components/Menu/Menu.tsx
@@ -8,7 +8,15 @@ import type { MenuItemColor, MenuItemSize } from './MenuItemBase';
 import { MenuItem, type MenuItemProps } from './MenuItem';
 import styles from './menu.module.css';
 
+<<<<<<< HEAD
+<<<<<<< HEAD
 export type MenuTheme = 'global' | 'neutral' | 'company' | 'person';
+=======
+export type MenuTheme = "inherit" | "global" | "neutral" | "company" | "person";
+>>>>>>> 1b23eba (push it)
+=======
+export type MenuTheme = 'inherit' | 'global' | 'neutral' | 'company' | 'person';
+>>>>>>> 058ad14 (list + dialogs)
 
 interface MenuItemsGroupProps {
   title?: string;
@@ -107,9 +115,21 @@ export const MenuItems = ({
 };
 
 export const Menu = ({
+<<<<<<< HEAD
+<<<<<<< HEAD
   theme,
   defaultItemColor = 'subtle',
   defaultItemSize = 'sm',
+=======
+  theme = "inherit",
+  defaultItemColor = "subtle",
+  defaultItemSize = "sm",
+>>>>>>> 1b23eba (push it)
+=======
+  theme = 'inherit',
+  defaultItemColor = 'subtle',
+  defaultItemSize = 'sm',
+>>>>>>> 058ad14 (list + dialogs)
   groups,
   items = [],
   search,
diff --git a/lib/components/Menu/MenuItem.stories.ts b/lib/components/Menu/MenuItem.stories.ts
index 6c6ba7d..dea72dc 100644
--- a/lib/components/Menu/MenuItem.stories.ts
+++ b/lib/components/Menu/MenuItem.stories.ts
@@ -1,4 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
+<<<<<<< HEAD
+=======
+import { fn } from '@storybook/test';
+
+>>>>>>> 058ad14 (list + dialogs)
 import { MenuItem } from './MenuItem';
 
 const meta = {
@@ -21,9 +26,22 @@ export const Default: Story = {
 
 export const DefaultBadge: Story = {
   args: {
+<<<<<<< HEAD
+<<<<<<< HEAD
     icon: 'inbox',
     title: 'Innboks',
     badge: 4,
+=======
+    icon: "inbox",
+    title: "Innboks",
+=======
+    icon: 'inbox',
+    title: 'Innboks',
+>>>>>>> 058ad14 (list + dialogs)
+    badge: {
+      label: '4',
+    },
+>>>>>>> 1b23eba (push it)
   },
 };
 
@@ -36,13 +54,31 @@ export const Large: Story = {
   },
 };
 
-export const LargeBadge: Story = {
+export const AlertBadge: Story = {
   args: {
+<<<<<<< HEAD
+<<<<<<< HEAD
     size: 'lg',
     icon: 'inbox',
     title: 'Innboks',
     badge: 4,
     color: 'strong',
+=======
+    size: "lg",
+    icon: "inbox",
+    title: "Innboks",
+    color: "strong",
+=======
+    size: 'lg',
+    icon: 'inbox',
+    title: 'Innboks',
+    color: 'strong',
+>>>>>>> 058ad14 (list + dialogs)
+    badge: {
+      color: 'alert',
+      label: '4',
+    },
+>>>>>>> 1b23eba (push it)
   },
 };
 
@@ -81,8 +117,13 @@ export const PersonGroup: Story = {
 export const Company: Story = {
   args: {
     avatar: {
+<<<<<<< HEAD
       name: 'Sportsklubben Brann',
       type: 'company',
+=======
+      type: 'company',
+      name: 'Sportsklubben Brann',
+>>>>>>> 058ad14 (list + dialogs)
     },
     title: 'Sportsklubben Brann',
   },
@@ -91,7 +132,11 @@ export const Company: Story = {
 export const CompanyGroup: Story = {
   args: {
     avatarGroup: {
+<<<<<<< HEAD
       defaultType: 'company',
+=======
+      type: 'company',
+>>>>>>> 058ad14 (list + dialogs)
       items: [
         {
           name: 'Sportsklubben Brann',
diff --git a/lib/components/Menu/MenuItem.tsx b/lib/components/Menu/MenuItem.tsx
index 4f68920..4e0b309 100644
--- a/lib/components/Menu/MenuItem.tsx
+++ b/lib/components/Menu/MenuItem.tsx
@@ -1,9 +1,32 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
 import type { ElementType, ReactNode } from 'react';
 import type { AvatarGroupProps, AvatarProps } from '../Avatar';
+=======
+import type { ElementType, ReactNode } from 'react';
+import type { AvatarGroupProps, AvatarProps } from '../Avatar';
+import type { BadgeProps } from '../Badge';
+>>>>>>> 058ad14 (list + dialogs)
 import type { IconName } from '../Icon';
 import { MenuItemBase, type MenuItemColor, type MenuItemSize } from './MenuItemBase';
 import { MenuItemLabel } from './MenuItemLabel';
 import { MenuItemMedia } from './MenuItemMedia';
+<<<<<<< HEAD
+=======
+import type { ElementType, ReactNode } from "react";
+import type { AvatarGroupProps, AvatarProps } from "../Avatar";
+import type { BadgeProps } from "../Badge";
+import {
+  MenuItemBase,
+  type MenuItemSize,
+  type MenuItemColor,
+} from "./MenuItemBase";
+import { MenuItemMedia } from "./MenuItemMedia";
+import { MenuItemLabel } from "./MenuItemLabel";
+import type { IconName } from "../Icon";
+>>>>>>> 1b23eba (push it)
+=======
+>>>>>>> 058ad14 (list + dialogs)
 
 export interface MenuItemProps {
   id: string;
@@ -22,7 +45,7 @@ export interface MenuItemProps {
   title?: string;
   description?: string;
   label?: string;
-  badge?: string;
+  badge?: BadgeProps;
   icon?: IconName;
   avatar?: AvatarProps;
   avatarGroup?: AvatarGroupProps;
diff --git a/lib/components/Menu/MenuItemBase.tsx b/lib/components/Menu/MenuItemBase.tsx
index 1c76fe3..1104ac2 100644
--- a/lib/components/Menu/MenuItemBase.tsx
+++ b/lib/components/Menu/MenuItemBase.tsx
@@ -1,8 +1,24 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
 import cx from 'classnames';
 import type { ElementType, ReactNode } from 'react';
 import { Badge } from '../Badge';
 import { Icon, type IconName } from '../Icon';
 import styles from './menuItem.module.css';
+=======
+import type { ElementType, ReactNode } from "react";
+import { Badge, type BadgeProps } from "../Badge";
+import { Icon, type IconName } from "../Icon";
+import styles from "./menuItemBase.module.css";
+import cx from "classnames";
+>>>>>>> 1b23eba (push it)
+=======
+import cx from 'classnames';
+import type { ElementType, ReactNode } from 'react';
+import { Badge, type BadgeProps } from '../Badge';
+import { Icon, type IconName } from '../Icon';
+import styles from './menuItemBase.module.css';
+>>>>>>> 058ad14 (list + dialogs)
 
 export type MenuItemColor = 'default' | 'subtle' | 'strong' | 'company' | 'person';
 export type MenuItemSize = 'sm' | 'md' | 'lg';
@@ -13,7 +29,7 @@ export interface MenuItemBaseProps {
   children?: ReactNode;
   size?: MenuItemSize;
   linkIcon?: IconName;
-  badge?: string | number | undefined;
+  badge?: BadgeProps;
   collapsible?: boolean;
   expanded?: boolean;
   selected?: boolean;
@@ -52,10 +68,21 @@ export const MenuItemBase = ({
     >
       <div className={styles.content}>
         {children}
-        {badge && <Badge>{badge}</Badge>}
+        {badge && <Badge {...badge} />}
       </div>
+<<<<<<< HEAD
       <div className={styles?.action}>
         {applicableIcon && <Icon name={applicableIcon} className={styles?.actionIcon} />}
+=======
+      <div className={styles.action}>
+<<<<<<< HEAD
+        {applicableIcon && (
+          <Icon name={applicableIcon} className={styles.actionIcon} />
+        )}
+>>>>>>> 1b23eba (push it)
+=======
+        {applicableIcon && <Icon name={applicableIcon} className={styles.actionIcon} />}
+>>>>>>> 058ad14 (list + dialogs)
       </div>
     </Component>
   );
diff --git a/lib/components/Menu/MenuItemLabel.tsx b/lib/components/Menu/MenuItemLabel.tsx
index 7a7655f..80c4cc3 100644
--- a/lib/components/Menu/MenuItemLabel.tsx
+++ b/lib/components/Menu/MenuItemLabel.tsx
@@ -1,6 +1,18 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
 import type { ReactNode } from 'react';
 import type { MenuItemSize } from './MenuItemBase';
 import styles from './menuItem.module.css';
+=======
+import type { ReactNode } from "react";
+import styles from "./menuItemLabel.module.css";
+import type { MenuItemSize } from "./MenuItemBase";
+>>>>>>> 1b23eba (push it)
+=======
+import type { ReactNode } from 'react';
+import type { MenuItemSize } from './MenuItemBase';
+import styles from './menuItemLabel.module.css';
+>>>>>>> 058ad14 (list + dialogs)
 
 export interface MenuItemLabelProps {
   size?: MenuItemSize;
diff --git a/lib/components/Menu/MenuItemMedia.tsx b/lib/components/Menu/MenuItemMedia.tsx
index da4db67..224fecf 100644
--- a/lib/components/Menu/MenuItemMedia.tsx
+++ b/lib/components/Menu/MenuItemMedia.tsx
@@ -1,8 +1,29 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 058ad14 (list + dialogs)
 import type { ReactNode } from 'react';
 import { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize } from '../Avatar';
 import { Icon, type IconName } from '../Icon';
 import type { MenuItemColor, MenuItemSize } from './MenuItemBase';
+<<<<<<< HEAD
 import styles from './menuItem.module.css';
+=======
+import type { ReactNode } from "react";
+import type { MenuItemSize, MenuItemColor } from "./MenuItemBase";
+import {
+  Avatar,
+  AvatarGroup,
+  type AvatarGroupProps,
+  type AvatarProps,
+  type AvatarSize,
+} from "../Avatar";
+import { Icon, type IconName } from "../Icon";
+import styles from "./menuItemMedia.module.css";
+>>>>>>> 1b23eba (push it)
+=======
+import styles from './menuItemMedia.module.css';
+>>>>>>> 058ad14 (list + dialogs)
 
 interface MenuItemMediaProps {
   color?: MenuItemColor;
diff --git a/lib/components/Menu/menuItemBase.module.css b/lib/components/Menu/menuItemBase.module.css
new file mode 100644
index 0000000..bb81858
--- /dev/null
+++ b/lib/components/Menu/menuItemBase.module.css
@@ -0,0 +1,72 @@
+.item {
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  border: 0;
+  user-select: none;
+  cursor: pointer;
+  margin: 0.5rem 0;
+}
+
+.item[aria-disabled="true"] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* size */
+
+.item[data-size="sm"] {
+  min-height: 44px;
+}
+
+/* content */
+
+.content {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  column-gap: 6px;
+  padding: 6px;
+}
+
+.action {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+}
+
+.actionIcon {
+  font-size: 1.5rem;
+}
+
+/* colors */
+
+.item:hover {
+  background-color: var(--theme-background-default);
+}
+
+.item[aria-selected="true"] {
+  background-color: var(--theme-background-default);
+}
+
+/* company */
+
+.item[data-color="company"]:hover {
+  background-color: var(--company-background-subtle);
+}
+
+.item[data-color="company"][aria-selected="true"] {
+  background-color: var(--company-surface-default);
+}
+
+/* person */
+
+.item[data-color="person"]:hover {
+  background-color: var(--person-background-subtle);
+}
+
+.item[data-color="person"][aria-selected="true"] {
+  background-color: var(--person-surface-default);
+}
diff --git a/lib/components/Menu/menuItemLabel.module.css b/lib/components/Menu/menuItemLabel.module.css
new file mode 100644
index 0000000..c0d2bfb
--- /dev/null
+++ b/lib/components/Menu/menuItemLabel.module.css
@@ -0,0 +1,22 @@
+.label {
+  display: flex;
+  flex-direction: column;
+  padding: 0 0.25rem;
+}
+
+.title[data-size="lg"] {
+  font-size: 1.125rem;
+  line-height: 1.25;
+  font-weight: 500;
+}
+
+.title[data-size="sm"] {
+  font-size: 1rem;
+  line-height: 1.25;
+  font-weight: 400;
+}
+
+.description {
+  font-size: 14px;
+  color: var(--theme-text-subtle);
+}
diff --git a/lib/components/Menu/menuItemMedia.module.css b/lib/components/Menu/menuItemMedia.module.css
new file mode 100644
index 0000000..a93a441
--- /dev/null
+++ b/lib/components/Menu/menuItemMedia.module.css
@@ -0,0 +1,36 @@
+.media {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5%;
+  width: 2rem;
+  height: 2rem;
+}
+
+.media[data-size="lg"] {
+  width: 44px;
+  height: 44px;
+}
+
+.icon {
+  font-size: 1.5rem;
+}
+
+.media[data-color="subtle"] {
+  background-color: var(--theme-background-default);
+  color: var(--theme-text-default);
+}
+
+.media[data-color="strong"] {
+  background-color: var(--theme-base-default);
+  color: var(--theme-background-default);
+}
+
+.media[data-color="company"] {
+  background-color: var(--company-surface-default);
+}
+
+.media[data-color="person"] {
+  background-color: var(--person-surface-default);
+}
diff --git a/lib/components/Meta/MetaBase.tsx b/lib/components/Meta/MetaBase.tsx
index d5bee2a..ebf0679 100644
--- a/lib/components/Meta/MetaBase.tsx
+++ b/lib/components/Meta/MetaBase.tsx
@@ -1,15 +1,66 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 import type { ReactNode } from 'react';
 import type { MetaItemSize } from './MetaItemBase';
 import styles from './meta.module.css';
+=======
+import { ReactNode } from "react";
+import type { MetaItemSize } from "./MetaItemBase";
+import styles from "./meta.module.css";
+>>>>>>> 9644be5 (dialog støff)
+=======
+import { ReactNode } from "react";
+import type { MetaItemSize } from "./MetaItemBase";
+import styles from "./meta.module.css";
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+import type { ReactNode } from 'react';
+import type { MetaItemSize } from './MetaItemBase';
+import styles from './meta.module.css';
+>>>>>>> 058ad14 (list + dialogs)
 export interface MetaBaseProps {
   size?: MetaItemSize;
   children?: ReactNode;
 }
 
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 export const MetaBase = ({ size = 'xs', children }: MetaBaseProps) => {
+=======
+export const MetaBase = ({ size = "xs", children }: MetaBaseProps) => {
+>>>>>>> 9644be5 (dialog støff)
+=======
+export const MetaBase = ({ size = "xs", children }: MetaBaseProps) => {
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+export const MetaBase = ({ size = 'xs', children }: MetaBaseProps) => {
+>>>>>>> 058ad14 (list + dialogs)
   return (
     <div className={styles.meta} data-size={size}>
       {children}
     </div>
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+import { ReactNode } from "react";
+import styles from "./metaBase.module.css";
+export interface MetaBaseProps {
+  size?: string;
+  children?: ReactNode;
+}
+
+export const MetaBase = ({ size = "sm", children }: MetaBaseProps) => {
+  return (
+    <span className={styles.meta} data-size={size}>
+      {children}
+    </span>
+>>>>>>> 951f8f8 (meta label + timestamp)
+=======
+>>>>>>> 9644be5 (dialog støff)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
   );
 };
diff --git a/lib/components/Meta/MetaItem.stories.ts b/lib/components/Meta/MetaItem.stories.ts
index 7c10b02..8029dc8 100644
--- a/lib/components/Meta/MetaItem.stories.ts
+++ b/lib/components/Meta/MetaItem.stories.ts
@@ -1,3 +1,6 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 
@@ -12,6 +15,35 @@ const meta = {
   },
   args: {
     children: 'Label',
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+=======
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+>>>>>>> 058ad14 (list + dialogs)
+
+import { MetaItem } from './MetaItem';
+
+const meta = {
+  title: 'Meta/MetaItem',
+  component: MetaItem,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+<<<<<<< HEAD
+    children: "Label",
+<<<<<<< HEAD
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+    children: 'Label',
+>>>>>>> 058ad14 (list + dialogs)
   },
 } satisfies Meta<typeof MetaItem>;
 
@@ -23,5 +55,17 @@ export const Default: Story = {
 };
 
 export const Icon: Story = {
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+  args: { icon: 'clock-dashed' },
+=======
+  args: { icon: "clock-dashed" },
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+  args: { icon: "clock-dashed" },
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
   args: { icon: 'clock-dashed' },
+>>>>>>> 058ad14 (list + dialogs)
 };
diff --git a/lib/components/Meta/MetaItem.tsx b/lib/components/Meta/MetaItem.tsx
index c28aecb..0e2c991 100644
--- a/lib/components/Meta/MetaItem.tsx
+++ b/lib/components/Meta/MetaItem.tsx
@@ -1,28 +1,110 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 import type { ReactNode } from 'react';
 
 import type { IconName } from '../Icon';
 import { MetaItemBase, type MetaItemSize, type MetaItemVariant } from './MetaItemBase';
 import { MetaItemLabel } from './MetaItemLabel';
 import { MetaItemMedia } from './MetaItemMedia';
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+import type { ReactNode } from "react";
+
+import {
+  MetaItemBase,
+  type MetaItemSize,
+  type MetaItemVariant,
+} from "./MetaItemBase";
+import { MetaItemLabel } from "./MetaItemLabel";
+<<<<<<< HEAD
+<<<<<<< HEAD
+import { Icon, type IconName } from "../Icon";
+import styles from "./metaItem.module.css";
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+import { MetaItemMedia } from "./MetaItemMedia";
+import type { IconName } from "../Icon";
+>>>>>>> 6032d41 (dialog + meta)
+=======
+import { MetaItemMedia } from "./MetaItemMedia";
+import type { IconName } from "../Icon";
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+import type { ReactNode } from 'react';
+
+import type { IconName } from '../Icon';
+import { MetaItemBase, type MetaItemSize, type MetaItemVariant } from './MetaItemBase';
+import { MetaItemLabel } from './MetaItemLabel';
+import { MetaItemMedia } from './MetaItemMedia';
+>>>>>>> 058ad14 (list + dialogs)
 
 export interface MetaItemProps {
   /** Meta size */
   size?: MetaItemSize;
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
   /** Variant */
   variant?: MetaItemVariant;
+=======
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+  /** Variant */
+  variant?: MetaItemVariant;
+>>>>>>> 6032d41 (dialog + meta)
+=======
+  /** Variant */
+  variant?: MetaItemVariant;
+>>>>>>> bfd012c (feat: list item + meta tags)
   /** Icon name */
   icon?: IconName;
   /** Label */
   children?: ReactNode;
 }
 
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+export const MetaItem = ({ size = 'xs', variant = 'text', icon, children, ...rest }: MetaItemProps) => {
+  return (
+    <MetaItemBase variant={variant} size={size} {...rest}>
+      {icon ? <MetaItemMedia icon={icon} size={size} /> : ''}
+      <MetaItemLabel variant={variant} size={size}>
+        {children}
+      </MetaItemLabel>
+=======
+export const MetaItem = ({ size = "sm", icon, children }: MetaItemProps) => {
+  return (
+    <MetaItemBase size={size}>
+      {icon ? <Icon name={icon} className={styles.icon} /> : ""}
+      <MetaItemLabel size={size}>{children}</MetaItemLabel>
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+export const MetaItem = ({
+  size = "xs",
+  variant = "text",
+  icon,
+  children,
+  ...rest
+}: MetaItemProps) => {
+=======
 export const MetaItem = ({ size = 'xs', variant = 'text', icon, children, ...rest }: MetaItemProps) => {
+>>>>>>> 058ad14 (list + dialogs)
   return (
     <MetaItemBase variant={variant} size={size} {...rest}>
       {icon ? <MetaItemMedia icon={icon} size={size} /> : ''}
       <MetaItemLabel variant={variant} size={size}>
         {children}
       </MetaItemLabel>
+<<<<<<< HEAD
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
     </MetaItemBase>
   );
 };
diff --git a/lib/components/Meta/MetaItemBase.tsx b/lib/components/Meta/MetaItemBase.tsx
index 4270c6c..4134b99 100644
--- a/lib/components/Meta/MetaItemBase.tsx
+++ b/lib/components/Meta/MetaItemBase.tsx
@@ -1,3 +1,6 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 import cx from 'classnames';
 import type { ElementType, ReactNode } from 'react';
 import styles from './metaItem.module.css';
@@ -13,30 +16,113 @@ export interface MetaItemBaseProps {
   color?: MetaItemColor;
   datetime?: string;
   progress?: number;
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+import type { ElementType, ReactNode } from "react";
+import styles from "./metaItem.module.css";
+import cx from "classnames";
+=======
+import cx from 'classnames';
+import type { ElementType, ReactNode } from 'react';
+import styles from './metaItem.module.css';
+>>>>>>> 058ad14 (list + dialogs)
+
+export type MetaItemVariant = 'solid' | 'outline' | 'dotted' | 'text';
+export type MetaItemSize = 'xs' | 'sm' | 'md';
+export type MetaItemColor = 'subtle';
+
+export interface MetaItemBaseProps {
+  as?: ElementType;
+  variant?: MetaItemVariant;
+  size?: MetaItemSize;
+<<<<<<< HEAD
+<<<<<<< HEAD
+  dateTime?: string;
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+  color?: MetaItemColor;
+  datetime?: string;
+  progress?: number;
+>>>>>>> 6032d41 (dialog + meta)
+=======
+  color?: MetaItemColor;
+  datetime?: string;
+  progress?: number;
+>>>>>>> bfd012c (feat: list item + meta tags)
   className?: string;
   children?: ReactNode;
 }
 
 export const MetaItemBase = ({
   as,
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+  variant = 'text',
+=======
+  variant = "text",
+>>>>>>> 6032d41 (dialog + meta)
+=======
+  variant = "text",
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
   variant = 'text',
+>>>>>>> 058ad14 (list + dialogs)
   size,
   color,
   progress,
   datetime,
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+  size,
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
   className,
   children,
   ...rest
 }: MetaItemBaseProps) => {
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+  const Component = as || 'span';
+=======
+  const Component = as || "span";
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+  const Component = as || "span";
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
   const Component = as || 'span';
+>>>>>>> 058ad14 (list + dialogs)
 
   return (
     <Component
       data-size={size}
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
       data-color={color}
       data-variant={variant}
       data-progress={progress}
       dateTime={datetime}
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
       className={cx(styles?.item, className)}
       {...rest}
     >
diff --git a/lib/components/Meta/MetaItemLabel.tsx b/lib/components/Meta/MetaItemLabel.tsx
index 60f6d03..df7633a 100644
--- a/lib/components/Meta/MetaItemLabel.tsx
+++ b/lib/components/Meta/MetaItemLabel.tsx
@@ -1,19 +1,75 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 import type { ReactNode } from 'react';
 import type { MetaItemSize, MetaItemVariant } from './MetaItemBase';
 import styles from './metaItem.module.css';
+=======
+import type { ReactNode } from "react";
+import type { MetaItemSize, MetaItemVariant } from "./MetaItemBase";
+import styles from "./metaItem.module.css";
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+import type { ReactNode } from "react";
+import type { MetaItemSize, MetaItemVariant } from "./MetaItemBase";
+import styles from "./metaItem.module.css";
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+import type { ReactNode } from 'react';
+import type { MetaItemSize, MetaItemVariant } from './MetaItemBase';
+import styles from './metaItem.module.css';
+>>>>>>> 058ad14 (list + dialogs)
 
 export interface MetaItemLabelProps {
   /** Meta size */
   size?: MetaItemSize;
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
   /** Variant */
   variant?: MetaItemVariant;
+=======
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+  /** Variant */
+  variant?: MetaItemVariant;
+>>>>>>> 6032d41 (dialog + meta)
+=======
+  /** Variant */
+  variant?: MetaItemVariant;
+>>>>>>> bfd012c (feat: list item + meta tags)
   /** Label */
   children?: ReactNode;
 }
 
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 export const MetaItemLabel = ({ size = 'sm', variant = 'text', children }: MetaItemLabelProps) => {
   return (
     <span className={styles.label} data-variant={variant} data-size={size}>
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+export const MetaItemLabel = ({
+  size = "sm",
+  variant = "text",
+  children,
+}: MetaItemLabelProps) => {
+=======
+export const MetaItemLabel = ({ size = 'sm', variant = 'text', children }: MetaItemLabelProps) => {
+>>>>>>> 058ad14 (list + dialogs)
+  return (
+<<<<<<< HEAD
+<<<<<<< HEAD
+    <span className={styles.label} data-size={size}>
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+    <span className={styles.label} data-variant={variant} data-size={size}>
+>>>>>>> 6032d41 (dialog + meta)
+=======
+    <span className={styles.label} data-variant={variant} data-size={size}>
+>>>>>>> bfd012c (feat: list item + meta tags)
       {children}
     </span>
   );
diff --git a/lib/components/Meta/MetaItemMedia.tsx b/lib/components/Meta/MetaItemMedia.tsx
index 43598a2..107ea1c 100644
--- a/lib/components/Meta/MetaItemMedia.tsx
+++ b/lib/components/Meta/MetaItemMedia.tsx
@@ -1,6 +1,24 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 import { Icon, type IconName, ProgressIcon } from '../Icon';
 import type { MetaItemSize } from './MetaItemBase';
 import styles from './metaItem.module.css';
+=======
+import type { MetaItemSize } from "./MetaItemBase";
+import { Icon, ProgressIcon, type IconName } from "../Icon";
+import styles from "./metaItem.module.css";
+>>>>>>> 6032d41 (dialog + meta)
+=======
+import type { MetaItemSize } from "./MetaItemBase";
+import { Icon, ProgressIcon, type IconName } from "../Icon";
+import styles from "./metaItem.module.css";
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+import { Icon, type IconName, ProgressIcon } from '../Icon';
+import type { MetaItemSize } from './MetaItemBase';
+import styles from './metaItem.module.css';
+>>>>>>> 058ad14 (list + dialogs)
 
 interface MetaItemMediaProps {
   size?: MetaItemSize;
@@ -8,15 +26,53 @@ interface MetaItemMediaProps {
   icon?: IconName;
 }
 
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 export const MetaItemMedia = ({ size = 'sm', icon, progress }: MetaItemMediaProps) => {
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+export const MetaItemMedia = ({
+  size = "sm",
+  icon,
+  progress,
+}: MetaItemMediaProps) => {
+<<<<<<< HEAD
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+export const MetaItemMedia = ({ size = 'sm', icon, progress }: MetaItemMediaProps) => {
+>>>>>>> 058ad14 (list + dialogs)
   if (!icon && !progress) {
     return false;
   }
 
   return (
     <span className={styles.media} data-size={size}>
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+      {icon ? <Icon name={icon} className={styles?.icon} /> : ''}
+      {progress ? <ProgressIcon value={progress} className={styles?.icon} /> : ''}
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+      {icon ? <Icon name={icon} className={styles?.icon} /> : ""}
+      {progress ? (
+        <ProgressIcon value={progress} className={styles?.icon} />
+      ) : (
+        ""
+      )}
+<<<<<<< HEAD
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
       {icon ? <Icon name={icon} className={styles?.icon} /> : ''}
       {progress ? <ProgressIcon value={progress} className={styles?.icon} /> : ''}
+>>>>>>> 058ad14 (list + dialogs)
     </span>
   );
 };
diff --git a/lib/components/Meta/MetaList.stories.ts b/lib/components/Meta/MetaList.stories.ts
index af8b2c3..4d59c38 100644
--- a/lib/components/Meta/MetaList.stories.ts
+++ b/lib/components/Meta/MetaList.stories.ts
@@ -1,3 +1,6 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 
@@ -7,17 +10,65 @@ const meta = {
   title: 'Meta/MetaList',
   component: MetaList,
   tags: ['autodocs'],
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+=======
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+>>>>>>> 058ad14 (list + dialogs)
+
+import { MetaList } from './MetaList';
+
+const meta = {
+  title: 'Meta/MetaList',
+  component: MetaList,
+<<<<<<< HEAD
+  tags: ["autodocs"],
+<<<<<<< HEAD
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+  tags: ['autodocs'],
+>>>>>>> 058ad14 (list + dialogs)
   parameters: {},
   args: {
     items: [
       {
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+        label: 'Meta 1',
+      },
+      {
+        label: 'Meta 2',
+      },
+      {
+        label: 'Meta 3',
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+        label: "Meta 1",
+=======
         label: 'Meta 1',
+>>>>>>> 058ad14 (list + dialogs)
       },
       {
         label: 'Meta 2',
       },
       {
+<<<<<<< HEAD
+        label: "Meta 3",
+<<<<<<< HEAD
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
         label: 'Meta 3',
+>>>>>>> 058ad14 (list + dialogs)
       },
     ],
   },
diff --git a/lib/components/Meta/MetaList.tsx b/lib/components/Meta/MetaList.tsx
index e2124cc..55ae1a8 100644
--- a/lib/components/Meta/MetaList.tsx
+++ b/lib/components/Meta/MetaList.tsx
@@ -1,11 +1,41 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 058ad14 (list + dialogs)
 import { MetaBase } from './MetaBase';
 import { MetaItem } from './MetaItem';
 import type { MetaItemBaseProps, MetaItemSize } from './MetaItemBase';
 import { MetaProgress } from './MetaProgress';
 import { MetaTimestamp } from './MetaTimestamp';
 import styles from './metaList.module.css';
+<<<<<<< HEAD
 
 export type MetaListItemType = 'default' | 'progress' | 'timestamp';
+=======
+import { MetaListBase } from "./MetaListBase";
+=======
+import { MetaBase } from "./MetaBase";
+>>>>>>> 9644be5 (dialog støff)
+=======
+import { MetaBase } from "./MetaBase";
+>>>>>>> bfd012c (feat: list item + meta tags)
+import type { MetaItemBaseProps, MetaItemSize } from "./MetaItemBase";
+import { MetaItem } from "./MetaItem";
+import { MetaProgress } from "./MetaProgress";
+import { MetaTimestamp } from "./MetaTimestamp";
+import styles from "./metaList.module.css";
+
+export type MetaListItemType = "default" | "progress" | "timestamp";
+<<<<<<< HEAD
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+
+export type MetaListItemType = 'default' | 'progress' | 'timestamp';
+>>>>>>> 058ad14 (list + dialogs)
 
 export interface MetaListItemProps extends MetaItemBaseProps {
   type?: MetaListItemType;
@@ -17,17 +47,47 @@ export interface MetaListProps {
   items?: MetaListItemProps[];
 }
 
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 export const MetaListItem = ({ type = 'default', label, ...rest }: MetaListItemProps) => {
   switch (type) {
     case 'progress':
       return <MetaProgress {...rest}>{label}</MetaProgress>;
     case 'timestamp':
       return <MetaTimestamp {...rest}>{label}</MetaTimestamp>;
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+export const MetaListItem = ({
+  type = "default",
+  label,
+  ...rest
+}: MetaListItemProps) => {
+=======
+export const MetaListItem = ({ type = 'default', label, ...rest }: MetaListItemProps) => {
+>>>>>>> 058ad14 (list + dialogs)
+  switch (type) {
+    case 'progress':
+      return <MetaProgress {...rest}>{label}</MetaProgress>;
+    case 'timestamp':
+      return <MetaTimestamp {...rest}>{label}</MetaTimestamp>;
+<<<<<<< HEAD
+      break;
+<<<<<<< HEAD
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+>>>>>>> 058ad14 (list + dialogs)
     default:
       return <MetaItem {...rest}>{label}</MetaItem>;
   }
 };
 
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 export const MetaList = ({ size = 'xs', items = [] }: MetaListProps) => {
   return (
     <MetaBase size={size}>
@@ -39,5 +99,36 @@ export const MetaList = ({ size = 'xs', items = [] }: MetaListProps) => {
         ))}
       </ul>
     </MetaBase>
+=======
+export const MetaList = ({ size = "xs", items = [] }: MetaListProps) => {
+=======
+export const MetaList = ({ size = 'xs', items = [] }: MetaListProps) => {
+>>>>>>> 058ad14 (list + dialogs)
+  return (
+<<<<<<< HEAD
+    <MetaListBase size={size}>
+      {items?.map((item, index) => (
+        <MetaListItem {...item} key={"meta-" + index} />
+      ))}
+    </MetaListBase>
+>>>>>>> 6032d41 (dialog + meta)
+=======
+=======
+export const MetaList = ({ size = "xs", items = [] }: MetaListProps) => {
+  return (
+>>>>>>> bfd012c (feat: list item + meta tags)
+    <MetaBase size={size}>
+      <ul className={styles?.list}>
+        {items?.map((item, index) => (
+          <li className={styles?.item} key={'meta-' + index}>
+            <MetaListItem {...item} />
+          </li>
+        ))}
+      </ul>
+    </MetaBase>
+<<<<<<< HEAD
+>>>>>>> 9644be5 (dialog støff)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
   );
 };
diff --git a/lib/components/Meta/MetaProgress.stories.ts b/lib/components/Meta/MetaProgress.stories.ts
index 2ab58da..4f7dd7d 100644
--- a/lib/components/Meta/MetaProgress.stories.ts
+++ b/lib/components/Meta/MetaProgress.stories.ts
@@ -1,3 +1,6 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 
@@ -9,6 +12,32 @@ const meta = {
   tags: ['autodocs'],
   parameters: {
     layout: 'centered',
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+=======
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+>>>>>>> 058ad14 (list + dialogs)
+
+import { MetaProgress } from './MetaProgress';
+
+const meta = {
+  title: 'Meta/MetaProgress',
+  component: MetaProgress,
+  tags: ['autodocs'],
+  parameters: {
+<<<<<<< HEAD
+    layout: "centered",
+<<<<<<< HEAD
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+    layout: 'centered',
+>>>>>>> 058ad14 (list + dialogs)
   },
   args: {},
 } satisfies Meta<typeof MetaProgress>;
@@ -19,13 +48,37 @@ type Story = StoryObj<typeof meta>;
 export const InProgress: Story = {
   args: {
     progress: 75,
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+    children: 'Under arbeid',
+=======
+    children: "Under arbeid",
+>>>>>>> 6032d41 (dialog + meta)
+=======
+    children: "Under arbeid",
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
     children: 'Under arbeid',
+>>>>>>> 058ad14 (list + dialogs)
   },
 };
 
 export const ProgressComplete: Story = {
   args: {
     progress: 100,
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+    children: 'Avsluttet',
+=======
+    children: "Avsluttet",
+>>>>>>> 6032d41 (dialog + meta)
+=======
+    children: "Avsluttet",
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
     children: 'Avsluttet',
+>>>>>>> 058ad14 (list + dialogs)
   },
 };
diff --git a/lib/components/Meta/MetaProgress.tsx b/lib/components/Meta/MetaProgress.tsx
index 3a19ee5..8b29944 100644
--- a/lib/components/Meta/MetaProgress.tsx
+++ b/lib/components/Meta/MetaProgress.tsx
@@ -1,7 +1,30 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 058ad14 (list + dialogs)
 import type { ReactNode } from 'react';
 import { MetaItemBase, type MetaItemSize, type MetaItemVariant } from './MetaItemBase';
 import { MetaItemLabel } from './MetaItemLabel';
 import { MetaItemMedia } from './MetaItemMedia';
+<<<<<<< HEAD
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+import type { ReactNode } from "react";
+import {
+  MetaItemBase,
+  type MetaItemSize,
+  type MetaItemVariant,
+} from "./MetaItemBase";
+import { MetaItemLabel } from "./MetaItemLabel";
+import { MetaItemMedia } from "./MetaItemMedia";
+<<<<<<< HEAD
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+>>>>>>> 058ad14 (list + dialogs)
 
 export interface MetaProgressProps {
   /** Meta size */
@@ -14,7 +37,26 @@ export interface MetaProgressProps {
   children?: ReactNode;
 }
 
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 export const MetaProgress = ({ size = 'xs', variant = 'text', progress = 0, children }: MetaProgressProps) => {
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+export const MetaProgress = ({
+  size = "xs",
+  variant = "text",
+  progress = 0,
+  children,
+}: MetaProgressProps) => {
+<<<<<<< HEAD
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+export const MetaProgress = ({ size = 'xs', variant = 'text', progress = 0, children }: MetaProgressProps) => {
+>>>>>>> 058ad14 (list + dialogs)
   return (
     <MetaItemBase variant={variant} size={size}>
       <MetaItemMedia size={size} progress={progress} />
diff --git a/lib/components/Meta/MetaTimestamp.stories.ts b/lib/components/Meta/MetaTimestamp.stories.ts
index b1bd1cd..28e9309 100644
--- a/lib/components/Meta/MetaTimestamp.stories.ts
+++ b/lib/components/Meta/MetaTimestamp.stories.ts
@@ -1,3 +1,6 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 
@@ -14,6 +17,40 @@ const meta = {
     children: '26. mai 1999',
     datetime: '1999-05-26',
   },
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+=======
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+>>>>>>> 058ad14 (list + dialogs)
+
+import { MetaTimestamp } from './MetaTimestamp';
+
+const meta = {
+  title: 'Meta/MetaTimestamp',
+  component: MetaTimestamp,
+  tags: ['autodocs'],
+  parameters: {
+    //    layout: "fullscreen",
+  },
+<<<<<<< HEAD
+<<<<<<< HEAD
+  args: {},
+>>>>>>> 951f8f8 (meta label + timestamp)
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+  args: {
+    children: '26. mai 1999',
+    datetime: '1999-05-26',
+  },
+<<<<<<< HEAD
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
 } satisfies Meta<typeof MetaTimestamp>;
 
 export default meta;
@@ -21,15 +58,52 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
     children: '26. mai 1999',
     datetime: '1999-05-26',
+=======
+    children: "26. mai 1999",
+    datetime: "1999-05-26",
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+    children: "26. mai 1999",
+    datetime: "1999-05-26",
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+    children: '26. mai 1999',
+    datetime: '1999-05-26',
+>>>>>>> 058ad14 (list + dialogs)
   },
 };
 
 export const Icon: Story = {
   args: {
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+    icon: 'clock',
+    children: 'Frist: 26. mai 1999',
+    datetime: '1999-05-26',
+=======
+    datetime: "1999-05-26",
+>>>>>>> 951f8f8 (meta label + timestamp)
+=======
+    icon: "clock",
+    children: "Frist: 26. mai 1999",
+    datetime: "1999-05-26",
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+    icon: "clock",
+    children: "Frist: 26. mai 1999",
+    datetime: "1999-05-26",
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
     icon: 'clock',
     children: 'Frist: 26. mai 1999',
     datetime: '1999-05-26',
+>>>>>>> 058ad14 (list + dialogs)
   },
 };
diff --git a/lib/components/Meta/MetaTimestamp.tsx b/lib/components/Meta/MetaTimestamp.tsx
index e02044e..19c2df7 100644
--- a/lib/components/Meta/MetaTimestamp.tsx
+++ b/lib/components/Meta/MetaTimestamp.tsx
@@ -1,3 +1,7 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
 import type { ReactNode } from 'react';
 
 import type { IconName } from '../Icon';
@@ -26,5 +30,64 @@ export const MetaTimestamp = ({ size = 'xs', variant = 'text', datetime, icon, c
         {children}
       </MetaItemLabel>
     </MetaItemBase>
+=======
+import { ReactNode } from "react";
+import { Icon, type IconName } from "../Icon";
+import styles from "./metaLabel.module.css";
+=======
+import type { ReactNode } from "react";
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+import type { ReactNode } from "react";
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+import type { ReactNode } from 'react';
+>>>>>>> 058ad14 (list + dialogs)
+
+import type { IconName } from '../Icon';
+import { MetaItemBase, type MetaItemSize, type MetaItemVariant } from './MetaItemBase';
+import { MetaItemLabel } from './MetaItemLabel';
+import { MetaItemMedia } from './MetaItemMedia';
+
+export interface MetaTimestampProps {
+  /** Meta size */
+  size?: MetaItemSize;
+  /** Variant */
+  variant?: MetaItemVariant;
+  /** Datetime in ISO format */
+  datetime?: string;
+  /** Icon name */
+  icon?: IconName;
+  /** Label */
+  children?: ReactNode;
+}
+
+export const MetaTimestamp = ({ size = 'xs', variant = 'text', datetime, icon, children }: MetaTimestampProps) => {
+  return (
+<<<<<<< HEAD
+<<<<<<< HEAD
+    <MetaItemBase as="time" dateTime={datetime} size={size}>
+      {icon ? <Icon name={icon} className={styles.icon} /> : ""}
+<<<<<<< HEAD
+      <span className={styles.label}>{children}</span>
+    </time>
+>>>>>>> 951f8f8 (meta label + timestamp)
+=======
+      <MetaItemLabel size={size}>{children}</MetaItemLabel>
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+    <MetaItemBase as="time" variant={variant} datetime={datetime} size={size}>
+      {icon ? <MetaItemMedia size={size} icon={icon} /> : ''}
+      <MetaItemLabel variant={variant} size={size}>
+        {children}
+      </MetaItemLabel>
+<<<<<<< HEAD
+>>>>>>> 6032d41 (dialog + meta)
+    </MetaItemBase>
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+    </MetaItemBase>
+>>>>>>> bfd012c (feat: list item + meta tags)
   );
 };
diff --git a/lib/components/Meta/index.ts b/lib/components/Meta/index.ts
index 04c3aee..1f88f51 100644
--- a/lib/components/Meta/index.ts
+++ b/lib/components/Meta/index.ts
@@ -1,6 +1,38 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 058ad14 (list + dialogs)
 export * from './MetaBase';
 export * from './MetaList';
 export * from './MetaItemBase';
 export * from './MetaItem';
 export * from './MetaProgress';
 export * from './MetaTimestamp';
+<<<<<<< HEAD
+=======
+export * from "./MetaBase";
+export * from "./MetaLabel";
+=======
+export * from "./MetaListBase";
+=======
+export * from "./MetaBase";
+>>>>>>> 9644be5 (dialog støff)
+=======
+export * from "./MetaBase";
+>>>>>>> bfd012c (feat: list item + meta tags)
+export * from "./MetaList";
+export * from "./MetaItemBase";
+export * from "./MetaItem";
+export * from "./MetaProgress";
+<<<<<<< HEAD
+>>>>>>> 6032d41 (dialog + meta)
+export * from "./MetaTimestamp";
+>>>>>>> 951f8f8 (meta label + timestamp)
+=======
+export * from "./MetaTimestamp";
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+>>>>>>> 058ad14 (list + dialogs)
diff --git a/lib/components/Meta/metaItem.module.css b/lib/components/Meta/metaItem.module.css
index 3965e2d..8d86786 100644
--- a/lib/components/Meta/metaItem.module.css
+++ b/lib/components/Meta/metaItem.module.css
@@ -1,4 +1,9 @@
 .item {
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
   border: 1px;
   border-radius: 2px;
   color: var(--neutral-text-subtle);
@@ -12,6 +17,34 @@
 button.item:hover,
 a.item:hover {
   color: var(--theme-base-hover);
+<<<<<<< HEAD
+<<<<<<< HEAD
+}
+
+.item {
+  line-height: 1;
+}
+
+/* xs = 24, sm = 30, md = 36? */
+
+.item[data-size="xs"] {
+  font-size: 0.875rem;
+  height: 1.5rem;
+=======
+=======
+  border: 1px;
+  border-radius: 2px;
+>>>>>>> 6032d41 (dialog + meta)
+  color: var(--neutral-text-subtle);
+  display: inline-flex;
+  align-items: center;
+  column-gap: 0.25em;
+  white-space: nowrap;
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+>>>>>>> aae8681 (props og rydding dialog)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
 }
 
 .item {
@@ -29,6 +62,13 @@ a.item:hover {
   font-size: 1rem;
 }
 
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
 .item[data-size="md"] {
   font-size: 1.125rem;
 }
@@ -83,11 +123,50 @@ a.item:hover {
 
 /* xs */
 
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
 .item[data-size="xs"] {
   font-size: 0.875rem;
 }
 
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+.media[data-size="xs"] {
+  font-size: 1rem;
+}
+
+/* sm */
+
+.item[data-size="sm"] {
+  font-size: 1rem;
+}
+
+.media[data-size="sm"] {
+  font-size: 1.25rem;
+}
+
+.label[data-size="sm"] {
+  font-size: 1rem;
+}
+<<<<<<< HEAD
+=======
+.icon[data-size="sm"] {
+  font-size: 1.25rem;
+}
+
+.icon[data-size="xs"] {
+=======
 .media[data-size="xs"] {
+>>>>>>> 6032d41 (dialog + meta)
   font-size: 1rem;
 }
 
@@ -104,3 +183,6 @@ a.item:hover {
 .label[data-size="sm"] {
   font-size: 1rem;
 }
+>>>>>>> fac8d9f (metaItem + metaTimestamp)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
diff --git a/lib/components/Meta/metaList.module.css b/lib/components/Meta/metaList.module.css
index 792ae2a..5b88fde 100644
--- a/lib/components/Meta/metaList.module.css
+++ b/lib/components/Meta/metaList.module.css
@@ -9,7 +9,22 @@
   flex-wrap: wrap;
   column-gap: 0.5rem;
 }
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 9644be5 (dialog støff)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
 
 .item {
   margin: 0;
 }
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 6032d41 (dialog + meta)
+=======
+>>>>>>> 9644be5 (dialog støff)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
diff --git a/lib/css/global.css b/lib/css/global.css
index 532bd09..ab0d836 100644
--- a/lib/css/global.css
+++ b/lib/css/global.css
@@ -2,6 +2,7 @@
 @import "./colors.css";
 @import "./shadows.css";
 @import "./theme-global.css";
+@import "./theme-article.css";
 @import "./theme-neutral.css";
 @import "./theme-company.css";
 @import "./theme-person.css";
diff --git a/lib/css/shadows.css b/lib/css/shadows.css
index aac9ae1..0d8622c 100644
--- a/lib/css/shadows.css
+++ b/lib/css/shadows.css
@@ -1,7 +1,30 @@
 :root {
   --ds-shadow-xs: 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
+<<<<<<< HEAD
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 058ad14 (list + dialogs)
   --ds-shadow-sm: 0 0 1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
   --ds-shadow-md: 0 0 1px 0 rgba(0, 0, 0, 0.14), 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.12);
   --ds-shadow-lg: 0 0 1px 0 rgba(0, 0, 0, 0.13), 0 3px 5px 0 rgba(0, 0, 0, 0.13), 0 6px 12px 0 rgba(0, 0, 0, 0.14);
   --ds-shadow-xl: 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.16), 0 12px 24px 0 rgba(0, 0, 0, 0.16);
+<<<<<<< HEAD
+=======
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+  --ds-shadow-sm: 0 0 1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.12),
+    0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --ds-shadow-md: 0 0 1px 0 rgba(0, 0, 0, 0.14), 0 2px 4px 0 rgba(0, 0, 0, 0.12),
+    0 4px 8px 0 rgba(0, 0, 0, 0.12);
+  --ds-shadow-lg: 0 0 1px 0 rgba(0, 0, 0, 0.13), 0 3px 5px 0 rgba(0, 0, 0, 0.13),
+    0 6px 12px 0 rgba(0, 0, 0, 0.14);
+  --ds-shadow-xl: 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.16),
+    0 12px 24px 0 rgba(0, 0, 0, 0.16);
+<<<<<<< HEAD
+>>>>>>> 1e1bf1d (storybook theming)
+=======
+>>>>>>> bfd012c (feat: list item + meta tags)
+=======
+>>>>>>> 058ad14 (list + dialogs)
 }
diff --git a/lib/css/theme-article.css b/lib/css/theme-article.css
new file mode 100644
index 0000000..c2e6d37
--- /dev/null
+++ b/lib/css/theme-article.css
@@ -0,0 +1,15 @@
+[data-theme="article"] {
+  --theme-background-default: var(--neutral-background-subtle);
+  --theme-background-subtle: var(--neutral-background-default);
+  --theme-base-active: var(--link-base-active);
+  --theme-base-default: var(--link-base-default);
+  --theme-base-hover: var(--link-base-hover);
+  --theme-border-default: var(--neutral-border-default);
+  --theme-border-strong: var(--neutral-border-strong);
+  --theme-border-subtle: var(--neutral-border-subtle);
+  --theme-surface-active: var(--neutral-surface-active);
+  --theme-surface-default: var(--neutral-surface-default);
+  --theme-surface-hover: var(--neutral-surface-hover);
+  --theme-text-default: var(--neutral-text-default);
+  --theme-text-subtle: var(--neutral-text-subtle);
+}
diff --git a/lib/css/theme.css b/lib/css/theme.css
index 5e6c73c..512aaac 100644
--- a/lib/css/theme.css
+++ b/lib/css/theme.css
@@ -1,4 +1,5 @@
-html {
+/*
+:root {
   --theme-background-default: var(--global-background-default);
   --theme-background-subtle: var(--global-background-subtle);
   --theme-base-active: var(--global-base-active);
@@ -14,6 +15,8 @@ html {
   --theme-text-subtle: var(--global-text-subtle);
 }
 
+<<<<<<< HEAD
+<<<<<<< HEAD
 html[data-theme] {
   background: var(--theme-background-subtle);
   color: var(--neutral-text-default);
@@ -21,4 +24,20 @@ html[data-theme] {
 
 body {
   background-color: inherit;
+=======
+html {
+  background: var(--neutral-background-default);
+  color: var(--neutral-text-default);
+}
+=======
+*/
+>>>>>>> 1b23eba (push it)
+
+html[data-theme] {
+  background: var(--theme-background-subtle);
+>>>>>>> 1e1bf1d (storybook theming)
+}
+
+.theme[data-theme] {
+  background: var(--theme-background-subtle);
 }
diff --git a/package.json b/package.json
index c973879..d8edd44 100644
--- a/package.json
+++ b/package.json
@@ -25,11 +25,11 @@
   "devDependencies": {
     "@biomejs/biome": "1.9.3",
     "@chromatic-com/storybook": "^1.9.0",
+    "@storybook/addon-themes": "^8.3.5",
     "@storybook/addon-essentials": "^8.3.5",
     "@storybook/addon-interactions": "^8.3.5",
     "@storybook/addon-links": "^8.3.5",
     "@storybook/addon-onboarding": "^8.3.5",
-    "@storybook/addon-themes": "^8.4.1",
     "@storybook/blocks": "^8.3.5",
     "@storybook/react": "^8.3.5",
     "@storybook/react-vite": "^8.3.5",
@@ -40,6 +40,7 @@
     "lint-staged": "^15.2.10",
     "prop-types": "^15.8.1",
     "storybook": "^8.3.5",
+    "storybook-addon-theme-provider": "^0.2.6",
     "storybook-css-modules": "^1.0.8",
     "typescript": "^5.6.3",
     "vite": "^5.4.9"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d7be5a5..db96568 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,13 +10,26 @@ importers:
     dependencies:
       '@navikt/aksel-icons':
         specifier: ^7.2.1
+<<<<<<< HEAD
         version: 7.4.1
+=======
+        version: 7.2.1
+<<<<<<< HEAD
+      '@storybook/addon-themes':
+        specifier: ^8.4.0
+        version: 8.4.0(storybook@8.3.5)
+>>>>>>> 1e1bf1d (storybook theming)
+=======
+>>>>>>> 1b23eba (push it)
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
       react:
         specifier: ^18.3.1
         version: 18.3.1
+      react-markdown:
+        specifier: ^9.0.1
+        version: 9.0.1(@types/react@18.3.11)(react@18.3.1)
     devDependencies:
       '@biomejs/biome':
         specifier: 1.9.3
@@ -35,10 +48,17 @@ importers:
         version: 8.3.6(react@18.3.1)(storybook@8.3.6)
       '@storybook/addon-onboarding':
         specifier: ^8.3.5
+<<<<<<< HEAD
         version: 8.3.6(react@18.3.1)(storybook@8.3.6)
       '@storybook/addon-themes':
         specifier: ^8.4.1
         version: 8.4.1(storybook@8.3.6)
+=======
+        version: 8.3.5(react@18.3.1)(storybook@8.3.5)
+      '@storybook/addon-themes':
+        specifier: ^8.3.5
+        version: 8.4.0(storybook@8.3.5)
+>>>>>>> 1b23eba (push it)
       '@storybook/blocks':
         specifier: ^8.3.5
         version: 8.3.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.6)
@@ -68,7 +88,14 @@ importers:
         version: 15.8.1
       storybook:
         specifier: ^8.3.5
+<<<<<<< HEAD
         version: 8.3.6
+=======
+        version: 8.3.5
+      storybook-addon-theme-provider:
+        specifier: ^0.2.6
+        version: 0.2.6(@storybook/blocks@8.3.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.5))(@storybook/components@8.3.5(storybook@8.3.5))(@storybook/manager-api@8.3.5(storybook@8.3.5))(@storybook/preview-api@8.3.5(storybook@8.3.5))(@storybook/theming@8.3.5(storybook@8.3.5))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+>>>>>>> 1b23eba (push it)
       storybook-css-modules:
         specifier: ^1.0.8
         version: 1.0.8
@@ -533,8 +560,20 @@ packages:
   '@navikt/aksel-icons@7.4.1':
     resolution: {integrity: sha512-s1TcZIXkpfHM2e662WNCW1F1VtjvDv8aZyz5ahn6bcVRphdnrGYUcO+O4Lg5avgLGRzvLGeDxFbU9yFc+R1RDQ==}
 
+<<<<<<< HEAD
   '@rollup/pluginutils@5.1.3':
     resolution: {integrity: sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==}
+=======
+  '@phosphor-icons/react@2.1.7':
+    resolution: {integrity: sha512-g2e2eVAn1XG2a+LI09QU3IORLhnFNAFkNbo2iwbX6NOKSLOwvEMmTa7CgOzEbgNWR47z8i8kwjdvYZ5fkGx1mQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>= 16.8'
+      react-dom: '>= 16.8'
+
+  '@rollup/pluginutils@5.1.2':
+    resolution: {integrity: sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw==}
+>>>>>>> 1b23eba (push it)
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
@@ -691,8 +730,18 @@ packages:
     peerDependencies:
       storybook: ^8.3.6
 
+<<<<<<< HEAD
   '@storybook/addon-themes@8.4.1':
     resolution: {integrity: sha512-yfJ0NbXdLGGM0dUSJNPtSvHznTFSfsyAEJwpslJfqJ9q03Z/mMct8SfXesg7VFLNP0Uxgv+KG4+E0+Dcjv/V1g==}
+=======
+  '@storybook/addon-themes@8.4.0':
+    resolution: {integrity: sha512-hgNcSI3SBJXZkxbOz36lmapxA9HAFILZlkCptRLMMSKbJsHwMLbn6Zc66Gyr8lP3Pv5SZ0OVy5AzLezr2d6f1w==}
+    peerDependencies:
+      storybook: ^8.4.0
+
+  '@storybook/addon-toolbars@8.3.5':
+    resolution: {integrity: sha512-Ml2gc9q8WbteDvmuAZGgBxt5SqWMXzuTkMjlsA8EB53hlkN1w9esX4s8YtBeNqC3HKoUzcdq8uexSBqU8fDbSA==}
+>>>>>>> 1e1bf1d (storybook theming)
     peerDependencies:
       storybook: ^8.4.1
 
@@ -926,12 +975,18 @@ packages:
   '@types/connect@3.4.38':
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
 
+  '@types/debug@4.1.12':
+    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
+
   '@types/doctrine@0.0.9':
     resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==}
 
   '@types/escodegen@0.0.6':
     resolution: {integrity: sha512-AjwI4MvWx3HAOaZqYsjKWyEObT9lcVV0Y0V8nXo6cXzN8ZiMxVhf6F3d/UNvXVGKrEzL/Dluc5p+y9GkzlTWig==}
 
+  '@types/estree-jsx@1.0.5':
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+
   '@types/estree@0.0.51':
     resolution: {integrity: sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==}
 
@@ -959,6 +1014,9 @@ packages:
   '@types/lodash@4.17.13':
     resolution: {integrity: sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==}
 
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
   '@types/mdx@2.0.13':
     resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
 
@@ -968,8 +1026,16 @@ packages:
   '@types/minimatch@5.1.2':
     resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==}
 
+<<<<<<< HEAD
   '@types/node@22.8.4':
     resolution: {integrity: sha512-SpNNxkftTJOPk0oN+y2bIqurEXHTA2AOZ3EJDDKeJ5VzkvvORSvmQXGQarcOzWV1ac7DCaPBEdMDxBsM+d8jWw==}
+=======
+  '@types/ms@0.7.34':
+    resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}
+
+  '@types/node@22.7.5':
+    resolution: {integrity: sha512-jML7s2NAzMWc//QSJ1a3prpk78cOPchGvXJsC3C6R6PSMoooztvRVQEz89gmBTBY1SPMaqo5teB4uNHPdetShQ==}
+>>>>>>> 9644be5 (dialog støff)
 
   '@types/prop-types@15.7.13':
     resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==}
@@ -995,6 +1061,9 @@ packages:
   '@types/serve-static@1.15.7':
     resolution: {integrity: sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==}
 
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
@@ -1096,6 +1165,9 @@ packages:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
+  bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -1133,8 +1205,16 @@ packages:
   caniuse-lite@1.0.30001675:
     resolution: {integrity: sha512-/wV1bQwPrkLiQMjaJF5yUMVM/VdRPOCU8QZ+PmG6uW6DvYSrNY1bpwHI/3mOcUosLaJCzYDi5o91IQB51ft6cg==}
 
+<<<<<<< HEAD
   chai@5.1.2:
     resolution: {integrity: sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==}
+=======
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
+  chai@5.1.1:
+    resolution: {integrity: sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==}
+>>>>>>> 9644be5 (dialog støff)
     engines: {node: '>=12'}
 
   chalk@3.0.0:
@@ -1145,9 +1225,23 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+<<<<<<< HEAD
   chalk@5.3.0:
     resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+=======
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
+  character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+
+  character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+>>>>>>> 9644be5 (dialog støff)
 
   check-error@2.1.1:
     resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
@@ -1183,12 +1277,17 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+<<<<<<< HEAD
   colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
 
   commander@12.1.0:
     resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
     engines: {node: '>=18'}
+=======
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+>>>>>>> 9644be5 (dialog støff)
 
   commondir@1.0.1:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
@@ -1241,6 +1340,9 @@ packages:
       supports-color:
         optional: true
 
+  decode-named-character-reference@1.0.2:
+    resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}
+
   deep-eql@5.0.2:
     resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
     engines: {node: '>=6'}
@@ -1265,6 +1367,9 @@ packages:
     resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
 
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
   doctrine@3.0.0:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
@@ -1343,6 +1448,9 @@ packages:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
 
+  estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
+
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
@@ -1368,6 +1476,9 @@ packages:
     resolution: {integrity: sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==}
     engines: {node: '>= 0.10.0'}
 
+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
   filesize@10.1.6:
     resolution: {integrity: sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w==}
     engines: {node: '>= 10.4.0'}
@@ -1486,13 +1597,22 @@ packages:
   hast-util-is-element@3.0.0:
     resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
 
+  hast-util-to-jsx-runtime@2.3.2:
+    resolution: {integrity: sha512-1ngXYb+V9UT5h+PxNRa1O1FYguZK/XL+gkeqvp7EdHlB9oHUG0eYRo/vY5inBdcqo3RkPMC58/H94HvkbfGdyg==}
+
   hast-util-to-string@3.0.1:
     resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==}
 
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
   html-tags@3.3.1:
     resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
     engines: {node: '>=8'}
 
+  html-url-attributes@3.0.1:
+    resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
+
   http-errors@2.0.0:
     resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
     engines: {node: '>= 0.8'}
@@ -1516,6 +1636,9 @@ packages:
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
+  inline-style-parser@0.2.4:
+    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
+
   ipaddr.js@1.9.1:
     resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
     engines: {node: '>= 0.10'}
@@ -1524,6 +1647,12 @@ packages:
     resolution: {integrity: sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+
+  is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+
   is-arguments@1.1.1:
     resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
     engines: {node: '>= 0.4'}
@@ -1536,6 +1665,9 @@ packages:
     resolution: {integrity: sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==}
     engines: {node: '>= 0.4'}
 
+  is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+
   is-docker@2.2.1:
     resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
     engines: {node: '>=8'}
@@ -1553,9 +1685,18 @@ packages:
     resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
     engines: {node: '>= 0.4'}
 
+<<<<<<< HEAD
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
+=======
+  is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+>>>>>>> 9644be5 (dialog støff)
 
   is-plain-object@5.0.0:
     resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
@@ -1620,9 +1761,14 @@ packages:
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
+<<<<<<< HEAD
   log-update@6.1.0:
     resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
     engines: {node: '>=18'}
+=======
+  longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+>>>>>>> 9644be5 (dialog støff)
 
   loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
@@ -1658,6 +1804,30 @@ packages:
     peerDependencies:
       react: '>= 0.14.0'
 
+  mdast-util-from-markdown@2.0.2:
+    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
+
+  mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+
+  mdast-util-mdx-jsx@3.1.3:
+    resolution: {integrity: sha512-bfOjvNt+1AcbPLTFMFWY149nJz0OjmewJs3LQQ5pIyVGxP4CdOqNVJL6kTaM5c68p8q82Xv3nCyFfUnuEcH3UQ==}
+
+  mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+
+  mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+
+  mdast-util-to-hast@13.2.0:
+    resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
+
+  mdast-util-to-markdown@2.1.1:
+    resolution: {integrity: sha512-OrkcCoqAkEg9b1ykXBrA0ehRc8H4fGU/03cACmW2xXzau1+dIdS+qJugh1Cqex3hMumSBgSE/5pc7uqP12nLAw==}
+
+  mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+
   media-typer@0.3.0:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
     engines: {node: '>= 0.6'}
@@ -1675,9 +1845,74 @@ packages:
     resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
     engines: {node: '>= 0.6'}
 
+<<<<<<< HEAD
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
+=======
+  micromark-core-commonmark@2.0.1:
+    resolution: {integrity: sha512-CUQyKr1e///ZODyD1U3xit6zXwy1a8q2a1S1HKtIlmgvurrEpaw/Y9y6KSIbF8P59cn/NjzHyO+Q2fAyYLQrAA==}
+
+  micromark-factory-destination@2.0.0:
+    resolution: {integrity: sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==}
+
+  micromark-factory-label@2.0.0:
+    resolution: {integrity: sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==}
+
+  micromark-factory-space@2.0.0:
+    resolution: {integrity: sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==}
+
+  micromark-factory-title@2.0.0:
+    resolution: {integrity: sha512-jY8CSxmpWLOxS+t8W+FG3Xigc0RDQA9bKMY/EwILvsesiRniiVMejYTE4wumNc2f4UbAa4WsHqe3J1QS1sli+A==}
+
+  micromark-factory-whitespace@2.0.0:
+    resolution: {integrity: sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==}
+
+  micromark-util-character@2.1.0:
+    resolution: {integrity: sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==}
+
+  micromark-util-chunked@2.0.0:
+    resolution: {integrity: sha512-anK8SWmNphkXdaKgz5hJvGa7l00qmcaUQoMYsBwDlSKFKjc6gjGXPDw3FNL3Nbwq5L8gE+RCbGqTw49FK5Qyvg==}
+
+  micromark-util-classify-character@2.0.0:
+    resolution: {integrity: sha512-S0ze2R9GH+fu41FA7pbSqNWObo/kzwf8rN/+IGlW/4tC6oACOs8B++bh+i9bVyNnwCcuksbFwsBme5OCKXCwIw==}
+
+  micromark-util-combine-extensions@2.0.0:
+    resolution: {integrity: sha512-vZZio48k7ON0fVS3CUgFatWHoKbbLTK/rT7pzpJ4Bjp5JjkZeasRfrS9wsBdDJK2cJLHMckXZdzPSSr1B8a4oQ==}
+
+  micromark-util-decode-numeric-character-reference@2.0.1:
+    resolution: {integrity: sha512-bmkNc7z8Wn6kgjZmVHOX3SowGmVdhYS7yBpMnuMnPzDq/6xwVA604DuOXMZTO1lvq01g+Adfa0pE2UKGlxL1XQ==}
+
+  micromark-util-decode-string@2.0.0:
+    resolution: {integrity: sha512-r4Sc6leeUTn3P6gk20aFMj2ntPwn6qpDZqWvYmAG6NgvFTIlj4WtrAudLi65qYoaGdXYViXYw2pkmn7QnIFasA==}
+
+  micromark-util-encode@2.0.0:
+    resolution: {integrity: sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==}
+
+  micromark-util-html-tag-name@2.0.0:
+    resolution: {integrity: sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==}
+
+  micromark-util-normalize-identifier@2.0.0:
+    resolution: {integrity: sha512-2xhYT0sfo85FMrUPtHcPo2rrp1lwbDEEzpx7jiH2xXJLqBuy4H0GgXk5ToU8IEwoROtXuL8ND0ttVa4rNqYK3w==}
+
+  micromark-util-resolve-all@2.0.0:
+    resolution: {integrity: sha512-6KU6qO7DZ7GJkaCgwBNtplXCvGkJToU86ybBAUdavvgsCiG8lSSvYxr9MhwmQ+udpzywHsl4RpGJsYWG1pDOcA==}
+
+  micromark-util-sanitize-uri@2.0.0:
+    resolution: {integrity: sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==}
+
+  micromark-util-subtokenize@2.0.1:
+    resolution: {integrity: sha512-jZNtiFl/1aY73yS3UGQkutD0UbhTt68qnRpw2Pifmz5wV9h8gOVsN70v+Lq/f1rKaU/W8pxRe8y8Q9FX1AOe1Q==}
+
+  micromark-util-symbol@2.0.0:
+    resolution: {integrity: sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==}
+
+  micromark-util-types@2.0.0:
+    resolution: {integrity: sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==}
+
+  micromark@4.0.0:
+    resolution: {integrity: sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==}
+>>>>>>> 9644be5 (dialog støff)
 
   mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
@@ -1779,6 +2014,9 @@ packages:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
+  parse-entities@4.0.1:
+    resolution: {integrity: sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==}
+
   parseurl@1.3.3:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
@@ -1852,6 +2090,9 @@ packages:
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
+  property-information@6.5.0:
+    resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
+
   proxy-addr@2.0.7:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
@@ -1909,6 +2150,12 @@ packages:
   react-is@18.1.0:
     resolution: {integrity: sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==}
 
+  react-markdown@9.0.1:
+    resolution: {integrity: sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==}
+    peerDependencies:
+      '@types/react': '>=18'
+      react: '>=18'
+
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -1930,6 +2177,12 @@ packages:
   rehype-slug@6.0.0:
     resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==}
 
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+
+  remark-rehype@11.1.1:
+    resolution: {integrity: sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==}
+
   resolve@1.22.8:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
@@ -2018,6 +2271,38 @@ packages:
     resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
     engines: {node: '>= 0.8'}
 
+  storybook-addon-theme-provider@0.2.6:
+    resolution: {integrity: sha512-opkC7MwMrjpcOd9NJl6MpwfFM8kwwMLUoPK0aLMfBUJycyHrpJ4krRSOfB/BHY6bkdJjJQGpFBQHOSpb8ij3Gg==}
+    peerDependencies:
+      '@storybook/blocks': '>=7.0.0'
+      '@storybook/components': '>=7.0.0'
+      '@storybook/core-events': '>=7.0.0'
+      '@storybook/manager-api': '>=7.0.0'
+      '@storybook/preview-api': '>=7.0.0'
+      '@storybook/theming': '>=7.0.0'
+      '@storybook/types': '>=7.0.0'
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    peerDependenciesMeta:
+      '@storybook/blocks':
+        optional: true
+      '@storybook/components':
+        optional: true
+      '@storybook/core-events':
+        optional: true
+      '@storybook/manager-api':
+        optional: true
+      '@storybook/preview-api':
+        optional: true
+      '@storybook/theming':
+        optional: true
+      '@storybook/types':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   storybook-css-modules@1.0.8:
     resolution: {integrity: sha512-anITwllH6nLw0quPElVBLRrE8QDbcRv0Dgl8sKLOc4uiqw+g1GE2l21Stjx3Wyv2O6ZKJScbyOpOuuz3SmeaOQ==}
     engines: {node: '>=14'}
@@ -2026,6 +2311,7 @@ packages:
     resolution: {integrity: sha512-9GVbtej6ZzPRUM7KRQ7848506FfHrUiJGqPuIQdoSJd09EmuEoLjmLAgEOmrHBQKgGYMaM7Vh9GsTLim6vwZTQ==}
     hasBin: true
 
+<<<<<<< HEAD
   string-argv@0.3.2:
     resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
     engines: {node: '>=0.6.19'}
@@ -2033,6 +2319,10 @@ packages:
   string-width@7.2.0:
     resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
     engines: {node: '>=18'}
+=======
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+>>>>>>> 9644be5 (dialog støff)
 
   strip-ansi@7.1.0:
     resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
@@ -2054,6 +2344,16 @@ packages:
     resolution: {integrity: sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==}
     engines: {node: '>=12'}
 
+<<<<<<< HEAD
+=======
+  style-to-object@1.0.8:
+    resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
+
+  supports-color@5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+
+>>>>>>> 9644be5 (dialog støff)
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -2084,6 +2384,12 @@ packages:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
 
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
+  trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+
   ts-dedent@2.2.0:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
     engines: {node: '>=6.10'}
@@ -2114,9 +2420,18 @@ packages:
   undici-types@6.19.8:
     resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
 
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+
   unist-util-is@6.0.0:
     resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
 
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
   unist-util-visit-parents@6.0.1:
     resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
 
@@ -2164,8 +2479,19 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+<<<<<<< HEAD
   vite@5.4.10:
     resolution: {integrity: sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==}
+=======
+  vfile-message@4.0.2:
+    resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
+  vite@5.4.9:
+    resolution: {integrity: sha512-20OVpJHh0PAM0oSOELa5GaZNWeDjcAvQjGXy2Uyr+Tp+/D2/Hdz6NLgpJLsarPTA2QJ6v8mX2P1ZfbsSKvdMkg==}
+>>>>>>> 9644be5 (dialog støff)
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -2238,6 +2564,9 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
 snapshots:
 
   '@adobe/css-tools@4.4.0': {}
@@ -2574,7 +2903,16 @@ snapshots:
 
   '@navikt/aksel-icons@7.4.1': {}
 
+<<<<<<< HEAD
   '@rollup/pluginutils@5.1.3(rollup@4.24.3)':
+=======
+  '@phosphor-icons/react@2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@rollup/pluginutils@5.1.2(rollup@4.24.0)':
+>>>>>>> 1b23eba (push it)
     dependencies:
       '@types/estree': 1.0.6
       estree-walker: 2.0.2
@@ -2736,7 +3074,16 @@ snapshots:
       storybook: 8.3.6
       ts-dedent: 2.2.0
 
+<<<<<<< HEAD
   '@storybook/addon-themes@8.4.1(storybook@8.3.6)':
+=======
+  '@storybook/addon-themes@8.4.0(storybook@8.3.5)':
+    dependencies:
+      storybook: 8.3.5
+      ts-dedent: 2.2.0
+
+  '@storybook/addon-toolbars@8.3.5(storybook@8.3.5)':
+>>>>>>> 1e1bf1d (storybook theming)
     dependencies:
       storybook: 8.3.6
       ts-dedent: 2.2.0
@@ -3032,10 +3379,18 @@ snapshots:
     dependencies:
       '@types/node': 22.8.4
 
+  '@types/debug@4.1.12':
+    dependencies:
+      '@types/ms': 0.7.34
+
   '@types/doctrine@0.0.9': {}
 
   '@types/escodegen@0.0.6': {}
 
+  '@types/estree-jsx@1.0.5':
+    dependencies:
+      '@types/estree': 1.0.6
+
   '@types/estree@0.0.51': {}
 
   '@types/estree@1.0.6': {}
@@ -3069,13 +3424,23 @@ snapshots:
 
   '@types/lodash@4.17.13': {}
 
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/mdx@2.0.13': {}
 
   '@types/mime@1.3.5': {}
 
   '@types/minimatch@5.1.2': {}
 
+<<<<<<< HEAD
   '@types/node@22.8.4':
+=======
+  '@types/ms@0.7.34': {}
+
+  '@types/node@22.7.5':
+>>>>>>> 9644be5 (dialog støff)
     dependencies:
       undici-types: 6.19.8
 
@@ -3107,6 +3472,8 @@ snapshots:
       '@types/node': 22.8.4
       '@types/send': 0.17.4
 
+  '@types/unist@2.0.11': {}
+
   '@types/unist@3.0.3': {}
 
   '@types/uuid@9.0.8': {}
@@ -3201,6 +3568,8 @@ snapshots:
     dependencies:
       possible-typed-array-names: 1.0.0
 
+  bail@2.0.2: {}
+
   balanced-match@1.0.2: {}
 
   better-opn@3.0.2:
@@ -3254,7 +3623,13 @@ snapshots:
 
   caniuse-lite@1.0.30001675: {}
 
+<<<<<<< HEAD
   chai@5.1.2:
+=======
+  ccount@2.0.1: {}
+
+  chai@5.1.1:
+>>>>>>> 9644be5 (dialog støff)
     dependencies:
       assertion-error: 2.0.1
       check-error: 2.1.1
@@ -3272,7 +3647,17 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+<<<<<<< HEAD
   chalk@5.3.0: {}
+=======
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
+  character-entities@2.0.2: {}
+
+  character-reference-invalid@2.0.1: {}
+>>>>>>> 9644be5 (dialog støff)
 
   check-error@2.1.1: {}
 
@@ -3295,9 +3680,13 @@ snapshots:
 
   color-name@1.1.4: {}
 
+<<<<<<< HEAD
   colorette@2.0.20: {}
 
   commander@12.1.0: {}
+=======
+  comma-separated-tokens@2.0.3: {}
+>>>>>>> 9644be5 (dialog støff)
 
   commondir@1.0.1: {}
 
@@ -3333,6 +3722,10 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  decode-named-character-reference@1.0.2:
+    dependencies:
+      character-entities: 2.0.2
+
   deep-eql@5.0.2: {}
 
   define-data-property@1.1.4:
@@ -3349,6 +3742,10 @@ snapshots:
 
   destroy@1.2.0: {}
 
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
   doctrine@3.0.0:
     dependencies:
       esutils: 2.0.3
@@ -3453,6 +3850,8 @@ snapshots:
 
   estraverse@5.3.0: {}
 
+  estree-util-is-identifier-name@3.0.0: {}
+
   estree-walker@2.0.2: {}
 
   estree-walker@3.0.3:
@@ -3513,6 +3912,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  extend@3.0.2: {}
+
   filesize@10.1.6: {}
 
   fill-range@7.1.1:
@@ -3632,12 +4033,38 @@ snapshots:
     dependencies:
       '@types/hast': 3.0.4
 
+  hast-util-to-jsx-runtime@2.3.2:
+    dependencies:
+      '@types/estree': 1.0.6
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.1.3
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 6.5.0
+      space-separated-tokens: 2.0.2
+      style-to-object: 1.0.8
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   hast-util-to-string@3.0.1:
     dependencies:
       '@types/hast': 3.0.4
 
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
   html-tags@3.3.1: {}
 
+  html-url-attributes@3.0.1: {}
+
   http-errors@2.0.0:
     dependencies:
       depd: 2.0.0
@@ -3661,10 +4088,19 @@ snapshots:
 
   inherits@2.0.4: {}
 
+  inline-style-parser@0.2.4: {}
+
   ipaddr.js@1.9.1: {}
 
   is-absolute-url@4.0.1: {}
 
+  is-alphabetical@2.0.1: {}
+
+  is-alphanumerical@2.0.1:
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+
   is-arguments@1.1.1:
     dependencies:
       call-bind: 1.0.7
@@ -3676,6 +4112,8 @@ snapshots:
     dependencies:
       hasown: 2.0.2
 
+  is-decimal@2.0.1: {}
+
   is-docker@2.2.1: {}
 
   is-fullwidth-code-point@4.0.0: {}
@@ -3688,7 +4126,13 @@ snapshots:
     dependencies:
       has-tostringtag: 1.0.2
 
+<<<<<<< HEAD
   is-number@7.0.0: {}
+=======
+  is-hexadecimal@2.0.1: {}
+
+  is-plain-obj@4.1.0: {}
+>>>>>>> 9644be5 (dialog støff)
 
   is-plain-object@5.0.0: {}
 
@@ -3754,6 +4198,7 @@ snapshots:
 
   lodash@4.17.21: {}
 
+<<<<<<< HEAD
   log-update@6.1.0:
     dependencies:
       ansi-escapes: 7.0.0
@@ -3761,6 +4206,9 @@ snapshots:
       slice-ansi: 7.1.0
       strip-ansi: 7.1.0
       wrap-ansi: 9.0.0
+=======
+  longest-streak@3.1.0: {}
+>>>>>>> 9644be5 (dialog støff)
 
   loose-envify@1.4.0:
     dependencies:
@@ -3792,6 +4240,95 @@ snapshots:
     dependencies:
       react: 18.3.1
 
+  mdast-util-from-markdown@2.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.0.2
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.0
+      micromark-util-decode-numeric-character-reference: 2.0.1
+      micromark-util-decode-string: 2.0.0
+      micromark-util-normalize-identifier: 2.0.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-expression@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-jsx@3.1.3:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.1
+      parse-entities: 4.0.1
+      stringify-entities: 4.0.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdxjs-esm@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-phrasing@4.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.0
+
+  mdast-util-to-hast@13.2.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.2.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.0
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+
+  mdast-util-to-markdown@2.1.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.0
+      micromark-util-decode-string: 2.0.0
+      unist-util-visit: 5.0.0
+      zwitch: 2.0.4
+
+  mdast-util-to-string@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+
   media-typer@0.3.0: {}
 
   memoizerific@1.11.3:
@@ -3804,10 +4341,145 @@ snapshots:
 
   methods@1.1.2: {}
 
+<<<<<<< HEAD
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
       picomatch: 2.3.1
+=======
+  micromark-core-commonmark@2.0.1:
+    dependencies:
+      decode-named-character-reference: 1.0.2
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.0
+      micromark-factory-label: 2.0.0
+      micromark-factory-space: 2.0.0
+      micromark-factory-title: 2.0.0
+      micromark-factory-whitespace: 2.0.0
+      micromark-util-character: 2.1.0
+      micromark-util-chunked: 2.0.0
+      micromark-util-classify-character: 2.0.0
+      micromark-util-html-tag-name: 2.0.0
+      micromark-util-normalize-identifier: 2.0.0
+      micromark-util-resolve-all: 2.0.0
+      micromark-util-subtokenize: 2.0.1
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+
+  micromark-factory-destination@2.0.0:
+    dependencies:
+      micromark-util-character: 2.1.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+
+  micromark-factory-label@2.0.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+
+  micromark-factory-space@2.0.0:
+    dependencies:
+      micromark-util-character: 2.1.0
+      micromark-util-types: 2.0.0
+
+  micromark-factory-title@2.0.0:
+    dependencies:
+      micromark-factory-space: 2.0.0
+      micromark-util-character: 2.1.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+
+  micromark-factory-whitespace@2.0.0:
+    dependencies:
+      micromark-factory-space: 2.0.0
+      micromark-util-character: 2.1.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+
+  micromark-util-character@2.1.0:
+    dependencies:
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+
+  micromark-util-chunked@2.0.0:
+    dependencies:
+      micromark-util-symbol: 2.0.0
+
+  micromark-util-classify-character@2.0.0:
+    dependencies:
+      micromark-util-character: 2.1.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+
+  micromark-util-combine-extensions@2.0.0:
+    dependencies:
+      micromark-util-chunked: 2.0.0
+      micromark-util-types: 2.0.0
+
+  micromark-util-decode-numeric-character-reference@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.0
+
+  micromark-util-decode-string@2.0.0:
+    dependencies:
+      decode-named-character-reference: 1.0.2
+      micromark-util-character: 2.1.0
+      micromark-util-decode-numeric-character-reference: 2.0.1
+      micromark-util-symbol: 2.0.0
+
+  micromark-util-encode@2.0.0: {}
+
+  micromark-util-html-tag-name@2.0.0: {}
+
+  micromark-util-normalize-identifier@2.0.0:
+    dependencies:
+      micromark-util-symbol: 2.0.0
+
+  micromark-util-resolve-all@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.0
+
+  micromark-util-sanitize-uri@2.0.0:
+    dependencies:
+      micromark-util-character: 2.1.0
+      micromark-util-encode: 2.0.0
+      micromark-util-symbol: 2.0.0
+
+  micromark-util-subtokenize@2.0.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+
+  micromark-util-symbol@2.0.0: {}
+
+  micromark-util-types@2.0.0: {}
+
+  micromark@4.0.0:
+    dependencies:
+      '@types/debug': 4.1.12
+      debug: 4.3.7
+      decode-named-character-reference: 1.0.2
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.1
+      micromark-factory-space: 2.0.0
+      micromark-util-character: 2.1.0
+      micromark-util-chunked: 2.0.0
+      micromark-util-combine-extensions: 2.0.0
+      micromark-util-decode-numeric-character-reference: 2.0.1
+      micromark-util-encode: 2.0.0
+      micromark-util-normalize-identifier: 2.0.0
+      micromark-util-resolve-all: 2.0.0
+      micromark-util-sanitize-uri: 2.0.0
+      micromark-util-subtokenize: 2.0.1
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    transitivePeerDependencies:
+      - supports-color
+>>>>>>> 9644be5 (dialog støff)
 
   mime-db@1.52.0: {}
 
@@ -3887,6 +4559,17 @@ snapshots:
 
   p-try@2.2.0: {}
 
+  parse-entities@4.0.1:
+    dependencies:
+      '@types/unist': 2.0.11
+      character-entities: 2.0.2
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.0.2
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+
   parseurl@1.3.3: {}
 
   path-exists@4.0.0: {}
@@ -3941,6 +4624,8 @@ snapshots:
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  property-information@6.5.0: {}
+
   proxy-addr@2.0.7:
     dependencies:
       forwarded: 0.2.0
@@ -4008,6 +4693,23 @@ snapshots:
 
   react-is@18.1.0: {}
 
+  react-markdown@9.0.1(@types/react@18.3.11)(react@18.3.1):
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/react': 18.3.11
+      devlop: 1.1.0
+      hast-util-to-jsx-runtime: 2.3.2
+      html-url-attributes: 3.0.1
+      mdast-util-to-hast: 13.2.0
+      react: 18.3.1
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.1
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
@@ -4044,6 +4746,23 @@ snapshots:
       hast-util-to-string: 3.0.1
       unist-util-visit: 5.0.0
 
+  remark-parse@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.2
+      micromark-util-types: 2.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-rehype@11.1.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      mdast-util-to-hast: 13.2.0
+      unified: 11.0.5
+      vfile: 6.0.3
+
   resolve@1.22.8:
     dependencies:
       is-core-module: 2.15.1
@@ -4164,6 +4883,18 @@ snapshots:
 
   statuses@2.0.1: {}
 
+  storybook-addon-theme-provider@0.2.6(@storybook/blocks@8.3.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.5))(@storybook/components@8.3.5(storybook@8.3.5))(@storybook/manager-api@8.3.5(storybook@8.3.5))(@storybook/preview-api@8.3.5(storybook@8.3.5))(@storybook/theming@8.3.5(storybook@8.3.5))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@phosphor-icons/react': 2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+    optionalDependencies:
+      '@storybook/blocks': 8.3.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.5)
+      '@storybook/components': 8.3.5(storybook@8.3.5)
+      '@storybook/manager-api': 8.3.5(storybook@8.3.5)
+      '@storybook/preview-api': 8.3.5(storybook@8.3.5)
+      '@storybook/theming': 8.3.5(storybook@8.3.5)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   storybook-css-modules@1.0.8: {}
 
   storybook@8.3.6:
@@ -4174,6 +4905,7 @@ snapshots:
       - supports-color
       - utf-8-validate
 
+<<<<<<< HEAD
   string-argv@0.3.2: {}
 
   string-width@7.2.0:
@@ -4181,6 +4913,12 @@ snapshots:
       emoji-regex: 10.4.0
       get-east-asian-width: 1.3.0
       strip-ansi: 7.1.0
+=======
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+>>>>>>> 9644be5 (dialog støff)
 
   strip-ansi@7.1.0:
     dependencies:
@@ -4198,6 +4936,17 @@ snapshots:
     dependencies:
       min-indent: 1.0.1
 
+<<<<<<< HEAD
+=======
+  style-to-object@1.0.8:
+    dependencies:
+      inline-style-parser: 0.2.4
+
+  supports-color@5.5.0:
+    dependencies:
+      has-flag: 3.0.0
+
+>>>>>>> 9644be5 (dialog støff)
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -4220,6 +4969,10 @@ snapshots:
 
   toidentifier@1.0.1: {}
 
+  trim-lines@3.0.1: {}
+
+  trough@2.2.0: {}
+
   ts-dedent@2.2.0: {}
 
   tsconfig-paths@4.2.0:
@@ -4243,10 +4996,28 @@ snapshots:
 
   undici-types@6.19.8: {}
 
+  unified@11.0.5:
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+
   unist-util-is@6.0.0:
     dependencies:
       '@types/unist': 3.0.3
 
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
   unist-util-visit-parents@6.0.1:
     dependencies:
       '@types/unist': 3.0.3
@@ -4289,7 +5060,21 @@ snapshots:
 
   vary@1.1.2: {}
 
+<<<<<<< HEAD
   vite@5.4.10(@types/node@22.8.4):
+=======
+  vfile-message@4.0.2:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.2
+
+  vite@5.4.9(@types/node@22.7.5):
+>>>>>>> 9644be5 (dialog støff)
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.47
@@ -4327,3 +5112,5 @@ snapshots:
   yaml@2.5.1: {}
 
   yocto-queue@0.1.0: {}
+
+  zwitch@2.0.4: {}