@helsenorge/designsystem-react 8.5.0 → 8.5.1

package/LinkList.js

@@ -0,0 +1,63 @@
+import { jsxs as H, jsx as p } from "react/jsx-runtime";
+import l from "react";
+import L from "classnames";
+import { AnalyticsId as C } from "./constants.js";
+import { useHover as I } from "./hooks/useHover.js";
+import R from "./components/Icons/ChevronRight.js";
+import { r as b } from "./ListHeader.js";
+import i from "./components/LinkList/styles.module.scss";
+const h = l.forwardRef((u, a) => {
+  const {
+    children: n,
+    className: o = "",
+    color: c = "neutral",
+    icon: s,
+    size: t = "medium",
+    chevron: r = !1,
+    linkRef: m,
+    testId: d,
+    target: e,
+    variant: f,
+    htmlMarkup: k = "a",
+    ..._
+  } = u, { hoverRef: v, isHovered: N } = I(m), x = L({
+    [i["link-list__list-item--line"]]: f === "line",
+    [i["link-list__list-item--outline"]]: f === "outline"
+  }), y = L(
+    i["link-list__anchor"],
+    i[`link-list__anchor--${c}`],
+    {
+      [i["link-list__anchor--fill"]]: f === "fill",
+      [i[`link-list__anchor--${t}`]]: t,
+      [i["link-list__anchor--button"]]: k === "button"
+    },
+    o
+  );
+  return /* @__PURE__ */ H("li", { className: x, ref: a, "data-testid": d, "data-analyticsid": C.Link, children: [
+    k === "a" && /* @__PURE__ */ p(
+      "a",
+      {
+        className: y,
+        ref: v,
+        rel: e === "_blank" ? "noopener noreferrer" : void 0,
+        target: e,
+        ..._,
+        children: b(n, "span", N, t, r ? R : void 0, s)
+      }
+    ),
+    k === "button" && /* @__PURE__ */ p("button", { className: y, ref: v, type: "button", ..._, children: b(n, "span", N, t, r ? R : void 0, s) })
+  ] });
+}), w = l.forwardRef(function(a, n) {
+  const { children: o, className: c = "", chevron: s = !1, size: t = "medium", color: r, testId: m, variant: d = "line" } = a;
+  return /* @__PURE__ */ p("ul", { ref: n, className: L(i["link-list"], c), "data-testid": m, "data-analyticsid": C.LinkList, children: l.Children.map(o, (e) => {
+    if (e.type === h)
+      return l.cloneElement(e, { color: r, size: t, chevron: s, variant: d });
+  }) });
+});
+w.displayName = "LinkList";
+w.Link = h;
+h.displayName = "LinkList.Link";
+export {
+  w as L
+};
+//# sourceMappingURL=LinkList.js.map

package/LinkList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkList.js","sources":["../src/components/LinkList/LinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { PaletteNames } from '../../theme/palette';\nimport ChevronRight from '../Icons/ChevronRight';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = PaletteNames;\nexport type LinkListVariant = 'line' | 'outline' | 'fill';\n\nexport interface LinkType extends React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>> {\n  ListHeader?: ListHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the link list background color on hover. */\n  color?: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: LinkListVariant;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    children: React.ReactNode;\n    chevron?: boolean;\n    className?: string;\n    icon?: React.ReactElement;\n    href?: string;\n    target?: LinkAnchorTargets;\n    /** HTML markup for link. Default: a */\n    htmlMarkup?: LinkTags;\n    /**\n     * Ref for lenke/knapp\n     */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'>;\n\nconst Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    children,\n    className = '',\n    color = 'neutral',\n    icon,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    ...restProps\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(linkRef);\n\n  const liClasses = cn({\n    [LinkListStyles['link-list__list-item--line']]: variant === 'line',\n    [LinkListStyles['link-list__list-item--outline']]: variant === 'outline',\n  });\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles[`link-list__anchor--${color}`],\n    {\n      [LinkListStyles['link-list__anchor--fill']]: variant === 'fill',\n      [LinkListStyles[`link-list__anchor--${size}`]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n    },\n    className\n  );\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {htmlMarkup === 'a' && (\n        <a\n          className={linkClasses}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          {renderListHeader(children, 'span', isHovered, size, chevron ? ChevronRight : undefined, icon)}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button className={linkClasses} ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n          {renderListHeader(children, 'span', isHovered, size, chevron ? ChevronRight : undefined, icon)}\n        </button>\n      )}\n    </li>\n  );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n  const { children, className = '', chevron = false, size = 'medium', color, testId, variant = 'line' } = props;\n  return (\n    <ul ref={ref} className={cn(LinkListStyles['link-list'], className)} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode | React.ReactElement<LinkProps>) => {\n        if ((child as React.ReactElement<LinkProps>).type === Link) {\n          return React.cloneElement(child as React.ReactElement<LinkProps>, { color, size, chevron, variant });\n        }\n      })}\n    </ul>\n  );\n}) as CompoundComponent;\n\nLinkList.displayName = 'LinkList';\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n"],"names":["Link","React","props","ref","children","className","color","icon","size","chevron","linkRef","testId","target","variant","htmlMarkup","restProps","hoverRef","isHovered","useHover","liClasses","cn","LinkListStyles","linkClasses","jsxs","AnalyticsId","jsx","renderListHeader","ChevronRight","LinkList","child"],"mappings":";;;;;;;;AAoEA,MAAMA,IAAiBC,EAAM,WAAW,CAACC,GAAkBC,MAAkC;AACrF,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,GAAGC;AAAA,EACD,IAAAb,GACE,EAAE,UAAAc,GAAU,WAAAC,EAAU,IAAIC,EAAgDR,CAAO,GAEjFS,IAAYC,EAAG;AAAA,IACnB,CAACC,EAAe,4BAA4B,CAAC,GAAGR,MAAY;AAAA,IAC5D,CAACQ,EAAe,+BAA+B,CAAC,GAAGR,MAAY;AAAA,EAAA,CAChE,GACKS,IAAcF;AAAAA,IAClBC,EAAe,mBAAmB;AAAA,IAClCA,EAAe,sBAAsBf,CAAK,EAAE;AAAA,IAC5C;AAAA,MACE,CAACe,EAAe,yBAAyB,CAAC,GAAGR,MAAY;AAAA,MACzD,CAACQ,EAAe,sBAAsBb,CAAI,EAAE,CAAC,GAAGA;AAAA,MAChD,CAACa,EAAe,2BAA2B,CAAC,GAAGP,MAAe;AAAA,IAChE;AAAA,IACAT;AAAA,EAAA;AAGA,SAAA,gBAAAkB,EAAC,QAAG,WAAWJ,GAAW,KAAAhB,GAAU,eAAaQ,GAAQ,oBAAkBa,EAAY,MACpF,UAAA;AAAA,IAAAV,MAAe,OACd,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH;AAAA,QACX,KAAKN;AAAA,QACL,KAAKJ,MAAW,WAAW,wBAAwB;AAAA,QACnD,QAAAA;AAAA,QACC,GAAGG;AAAA,QAEH,UAAAW,EAAiBtB,GAAU,QAAQa,GAAWT,GAAMC,IAAUkB,IAAe,QAAWpB,CAAI;AAAA,MAAA;AAAA,IAC/F;AAAA,IAEDO,MAAe,YACb,gBAAAW,EAAA,UAAA,EAAO,WAAWH,GAAa,KAAKN,GAAgD,MAAK,UAAU,GAAGD,GACpG,UAAAW,EAAiBtB,GAAU,QAAQa,GAAWT,GAAMC,IAAUkB,IAAe,QAAWpB,CAAI,EAC/F,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC,GAEYqB,IAAW3B,EAAM,WAAW,SAA8BC,GAAsBC,GAAkC;AAC7H,QAAM,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAI,SAAAI,IAAU,IAAO,MAAAD,IAAO,UAAU,OAAAF,GAAO,QAAAK,GAAQ,SAAAE,IAAU,OAAA,IAAWX;AAEtG,SAAA,gBAAAuB,EAAC,QAAG,KAAAtB,GAAU,WAAWiB,EAAGC,EAAe,WAAW,GAAGhB,CAAS,GAAG,eAAaM,GAAQ,oBAAkBa,EAAY,UACrH,UAAAvB,EAAM,SAAS,IAAIG,GAAU,CAACyB,MAA2D;AACnF,QAAAA,EAAwC,SAAS7B;AAC7C,aAAAC,EAAM,aAAa4B,GAAwC,EAAE,OAAAvB,GAAO,MAAAE,GAAM,SAAAC,GAAS,SAAAI,GAAS;AAAA,EAEtG,CAAA,EACH,CAAA;AAEJ,CAAC;AAEDe,EAAS,cAAc;AACvBA,EAAS,OAAO5B;AAChBA,EAAK,cAAc;"}

package/List.js

@@ -0,0 +1,13 @@
+import { jsx as i } from "react/jsx-runtime";
+import c from "classnames";
+import { AnalyticsId as n } from "./constants.js";
+import s from "./components/List/styles.module.scss";
+const d = ({ children: t }) => /* @__PURE__ */ i("li", { className: s.list__item, children: t }), p = ({ children: t, className: a, testId: m, variant: l = "bullet", margin: e }) => {
+  const o = ["numbered", "alphabetical"].includes(l) ? "ol" : "ul", r = c(s.list, s[`list--${l}`], e && s["list--margin"], a);
+  return /* @__PURE__ */ i(o, { className: r, "data-testid": m, "data-analyticsid": n.List, children: t });
+};
+p.Item = d;
+export {
+  p as L
+};
+//# sourceMappingURL=List.js.map

package/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sources":["../src/components/List/List.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport type ListVariant = 'bullet' | 'dashed' | 'numbered' | 'alphabetical';\n\nexport interface ItemProps {\n  children: React.ReactNode;\n}\n\ntype ItemType = React.FC<ItemProps>;\n\nconst Item: ItemType = ({ children }: ItemProps) => <li className={styles.list__item}>{children}</li>;\n\nexport interface ListProps {\n  /** List contents */\n  children: React.ReactNode;\n  /** Changes the visual representation of the list. */\n  variant?: ListVariant;\n  /** Adds margin above/below list */\n  margin?: boolean;\n  /** Adds className to list element */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface ListCompound extends React.FC<ListProps> {\n  Item: ItemType;\n}\n\nconst List: ListCompound = ({ children, className, testId, variant = 'bullet', margin }: ListProps) => {\n  const CustomTag = ['numbered', 'alphabetical'].includes(variant) ? 'ol' : 'ul';\n\n  const listClasses = classNames(styles.list, styles[`list--${variant}`], margin && styles['list--margin'], className);\n\n  return (\n    <CustomTag className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.List}>\n      {children}\n    </CustomTag>\n  );\n};\n\nList.Item = Item;\n\nexport default List;\n"],"names":["Item","children","styles","List","className","testId","variant","margin","CustomTag","listClasses","classNames","jsx","AnalyticsId"],"mappings":";;;;AAgBA,MAAMA,IAAiB,CAAC,EAAE,UAAAC,EAAS,wBAAkB,MAAG,EAAA,WAAWC,EAAO,YAAa,UAAAD,EAAS,CAAA,GAmB1FE,IAAqB,CAAC,EAAE,UAAAF,GAAU,WAAAG,GAAW,QAAAC,GAAQ,SAAAC,IAAU,UAAU,QAAAC,QAAwB;AAC/F,QAAAC,IAAY,CAAC,YAAY,cAAc,EAAE,SAASF,CAAO,IAAI,OAAO,MAEpEG,IAAcC,EAAWR,EAAO,MAAMA,EAAO,SAASI,CAAO,EAAE,GAAGC,KAAUL,EAAO,cAAc,GAAGE,CAAS;AAGjH,SAAA,gBAAAO,EAACH,KAAU,WAAWC,GAAa,eAAaJ,GAAQ,oBAAkBO,EAAY,MACnF,UAAAX,EACH,CAAA;AAEJ;AAEAE,EAAK,OAAOH;"}

package/ListHeader.js

@@ -0,0 +1,94 @@
+import { jsx as m, jsxs as b } from "react/jsx-runtime";
+import v from "react";
+import d from "classnames";
+import { L as E } from "./ListHeaderText.js";
+import { useBreakpoint as $, Breakpoint as R } from "./hooks/useBreakpoint.js";
+import { isComponent as u, isComponentWithChildren as H } from "./utils/component.js";
+import { u as j } from "./uuid.js";
+import { A as X, a as w } from "./Avatar.js";
+import { B as M } from "./Badge.js";
+import { I as W } from "./Icon.js";
+import { IconSize as x } from "./constants.js";
+import t from "./components/ListHeader/styles.module.scss";
+const Z = (c, f, h, i, l, a) => {
+  if (u(c, N))
+    return v.cloneElement(c, {
+      chevronIcon: l,
+      icon: a,
+      isHovered: h,
+      size: i
+    });
+  if (c)
+    return /* @__PURE__ */ m(N, { titleHtmlMarkup: f, chevronIcon: l, icon: a, isHovered: h, size: i, children: c });
+}, I = (c, f = !1) => {
+  var g, _, n, e;
+  let h;
+  const i = [], l = [], a = [], o = [];
+  v.Children.forEach(c, (r) => {
+    r === null || typeof r > "u" || (u(r, X) ? h = r : u(r, E) ? l.push(r) : u(r, M) ? i.push(r) : typeof r == "string" ? a.push(r) : o.push(r));
+  });
+  const s = h !== void 0 || l.length > 0 || i !== void 0 && a.length > 0, C = o.length === 0 || H(o[0]) && typeof ((_ = (g = o[0]) == null ? void 0 : g.props) == null ? void 0 : _.children) > "u";
+  if (f || s || C)
+    return { avatarChild: h, listHeaderTextChildren: l, badgeChildren: i, stringChildren: a, remainingChildren: o };
+  if (H(o[0]))
+    return I((e = (n = o[0]) == null ? void 0 : n.props) == null ? void 0 : e.children, !0);
+}, N = (c) => {
+  const { className: f = "", titleHtmlMarkup: h = "h2", chevronIcon: i, children: l, icon: a, isHovered: o, size: s, testId: C } = c, g = $(), _ = s !== "small" && !!(i || a), n = typeof l == "string", e = I(l), r = (e == null ? void 0 : e.avatarChild) || (e == null ? void 0 : e.listHeaderTextChildren) && e.listHeaderTextChildren.length > 0 || (e == null ? void 0 : e.remainingChildren) && (e == null ? void 0 : e.remainingChildren.length) > 0, L = d(
+    t["list-header"],
+    {
+      [t["list-header--for-element-content"]]: !n,
+      [t["list-header--top-align-content"]]: r
+    },
+    f
+  ), S = d(
+    t["list-header__badge"],
+    {
+      [t["list-header__badge--for-string-content"]]: n
+    },
+    !n && s && t[`list-header__badge--${s}`]
+  ), p = d(t["list-header__chevron"], !n && s && t[`list-header__chevron--${s}`], {
+    [t["list-header__chevron--for-string-content"]]: n
+  }), y = d(t["list-header__content"], {
+    [t["list-header__content--string"]]: n,
+    [t["list-header__content--element"]]: !n,
+    [t["list-header__content--spacing"]]: !(e != null && e.avatarChild) && !a
+  }), T = d(
+    t["list-header__icon"],
+    !n && s && (s === "medium" || s === "large") && t[`list-header__icon--for-element-content--${s}`],
+    {
+      [t["list-header__icon--for-string-content"]]: n,
+      [t["list-header__icon--for-element-content"]]: !n
+    }
+  ), z = d(
+    t["list-header__avatar"],
+    !n && s && (s === "medium" || s === "large") && t[`list-header__avatar--for-element-content--${s}`],
+    {
+      [t["list-header__avatar--for-string-content"]]: n,
+      [t["list-header__avatar--for-element-content"]]: !n
+    }
+  ), A = h;
+  return /* @__PURE__ */ b("span", { "data-testid": C, className: L, children: [
+    _ && a && /* @__PURE__ */ m("span", { className: T, children: v.cloneElement(a, {
+      size: g === R.xs ? x.XSmall : x.Small,
+      isHovered: o
+    }) }),
+    s !== "small" && (e == null ? void 0 : e.avatarChild) && /* @__PURE__ */ m("span", { className: z, children: v.cloneElement(e.avatarChild, { size: w.xsmall }) }),
+    /* @__PURE__ */ b("span", { className: y, children: [
+      e == null ? void 0 : e.listHeaderTextChildren,
+      !!(e != null && e.stringChildren.length) && /* @__PURE__ */ m(A, { className: t["list-header__title"], children: e.stringChildren }),
+      e == null ? void 0 : e.remainingChildren
+    ] }),
+    (e == null ? void 0 : e.badgeChildren) && e.badgeChildren.map((k) => {
+      const B = j();
+      return /* @__PURE__ */ m("span", { className: S, children: k }, B);
+    }),
+    _ && i && /* @__PURE__ */ m("span", { className: p, children: /* @__PURE__ */ m(W, { svgIcon: i, isHovered: o, size: x.XSmall }) })
+  ] });
+};
+N.displayName = "ListHeader";
+export {
+  N as L,
+  I as m,
+  Z as r
+};
+//# sourceMappingURL=ListHeader.js.map

package/ListHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport uuid from '../../utils/uuid';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.FC<ListHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  chevronIcon?: SvgIcon,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface ListHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];\n  badgeChildren?: React.ReactElement<BadgeProps>[];\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n  const listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChildren.push(child);\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChildren !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return { avatarChild, listHeaderTextChildren, badgeChildren, stringChildren, remainingChildren };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ListHeader: ListHeaderType = props => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren?.avatarChild ||\n    (mappedChildren?.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren?.remainingChildren && mappedChildren?.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(\n    styles['list-header__badge'],\n    {\n      [styles['list-header__badge--for-string-content']]: contentIsString,\n    },\n    !contentIsString && size && styles[`list-header__badge--${size}`]\n  );\n  const chevronClasses = cn(styles['list-header__chevron'], !contentIsString && size && styles[`list-header__chevron--${size}`], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren?.avatarChild && !icon,\n  });\n  const iconClasses = cn(\n    styles['list-header__icon'],\n    !contentIsString && size && (size === 'medium' || size === 'large') && styles[`list-header__icon--for-element-content--${size}`],\n    {\n      [styles['list-header__icon--for-string-content']]: contentIsString,\n      [styles['list-header__icon--for-element-content']]: !contentIsString,\n    }\n  );\n  const avatarClasses = cn(\n    styles['list-header__avatar'],\n    !contentIsString && size && (size === 'medium' || size === 'large') && styles[`list-header__avatar--for-element-content--${size}`],\n    {\n      [styles['list-header__avatar--for-string-content']]: contentIsString,\n      [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    }\n  );\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <span className={contentClasses}>\n        {mappedChildren?.listHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren?.remainingChildren}\n      </span>\n\n      {mappedChildren?.badgeChildren &&\n        mappedChildren.badgeChildren.map(badgeChild => {\n          const id = uuid();\n          return (\n            <span key={id} className={badgeClasses}>\n              {badgeChild}\n            </span>\n          );\n        })}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </span>\n  );\n};\n\nListHeader.displayName = 'ListHeader';\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","titleHtmlMarkup","isHovered","size","chevronIcon","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","badgeChildren","listHeaderTextChildren","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","noRemainingRecursiveChildren","isComponentWithChildren","_b","_a","_d","_c","props","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","CustomTag","jsxs","jsx","Breakpoint","IconSize","AvatarSize","badgeChild","id","uuid","Icon"],"mappings":"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"}

package/ListHeaderText.js

@@ -0,0 +1,35 @@
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import t from "classnames";
+import { S as u } from "./StatusDot.js";
+import e from "./components/ListHeader/styles.module.scss";
+const N = (p) => {
+  const {
+    firstText: l,
+    firstTextEmphasised: d = !1,
+    secondText: a = void 0,
+    secondTextEmphasised: m = !1,
+    subText: n = !1,
+    statusDotVariant: r,
+    className: o = "",
+    testId: c,
+    titleHtmlMarkup: x = "span"
+  } = p, T = t(o, e["text-wrapper"], {
+    [e["text-wrapper--sub-level"]]: n
+  }), h = t({
+    [e["text-wrapper__text--emphasised"]]: d
+  }), f = t({
+    [e["text-wrapper__text--emphasised"]]: m
+  });
+  return /* @__PURE__ */ i("span", { "data-testid": c, className: T, children: [
+    r !== void 0 && /* @__PURE__ */ s("span", { children: /* @__PURE__ */ s(u, { text: "", variant: r }) }),
+    /* @__PURE__ */ i(x, { className: e["list-header__title"], children: [
+      /* @__PURE__ */ s("span", { className: h, children: l }),
+      a && /* @__PURE__ */ s("span", { className: f, children: a })
+    ] })
+  ] });
+};
+N.displayName = "ListHeaderText";
+export {
+  N as L
+};
+//# sourceMappingURL=ListHeaderText.js.map

package/ListHeaderText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListHeaderText.js","sources":["../src/components/ListHeader/ListHeaderText/ListHeaderText.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport StatusDot, { StatusDotVariant } from '../../StatusDot';\nimport { TitleTags } from '../../Title';\nimport styles from '../styles.module.scss';\n\nexport type ListHeaderTextType = React.FC<ListHeaderTextProps>;\n\nexport interface ListHeaderTextProps {\n  /** The first text in the ListHeaderText Component */\n  firstText: string;\n  /** Will style the first text as bold */\n  firstTextEmphasised?: boolean;\n  /** The second text in the ListHeaderText Component */\n  secondText?: string;\n  /** Will style the second text as bold */\n  secondTextEmphasised?: boolean;\n  /** Whether or not this ListHeaderText is a sub text */\n  subText?: boolean;\n  /** Decides the variant for the StatusDot */\n  statusDotVariant?: StatusDotVariant;\n  /** Adds custom classes to the ListHeaderText component. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the underlying element of the title. Default: span*/\n  titleHtmlMarkup?: TitleTags;\n}\n\nexport const ListHeaderText: ListHeaderTextType = props => {\n  const {\n    firstText,\n    firstTextEmphasised = false,\n    secondText = undefined,\n    secondTextEmphasised = false,\n    subText = false,\n    statusDotVariant,\n    className = '',\n    testId,\n    titleHtmlMarkup = 'span',\n  } = props;\n\n  const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n    [styles['text-wrapper--sub-level']]: subText,\n  });\n  const firstHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n  });\n  const secondHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n  });\n  const CustomTag = titleHtmlMarkup;\n\n  return (\n    <span data-testid={testId} className={headerTextWrapperClasses}>\n      {statusDotVariant !== undefined && (\n        <span>\n          <StatusDot text={''} variant={statusDotVariant} />\n        </span>\n      )}\n      <CustomTag className={styles['list-header__title']}>\n        <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n        {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n      </CustomTag>\n    </span>\n  );\n};\n\nListHeaderText.displayName = 'ListHeaderText';\n\nexport default ListHeaderText;\n"],"names":["ListHeaderText","props","firstText","firstTextEmphasised","secondText","secondTextEmphasised","subText","statusDotVariant","className","testId","titleHtmlMarkup","headerTextWrapperClasses","cn","styles","firstHeaderTextSegmentClasses","secondHeaderTextSegmentClasses","jsxs","jsx","StatusDot"],"mappings":";;;;AA+BO,MAAMA,IAAqC,CAASC,MAAA;AACnD,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,qBAAAC,IAAsB;AAAA,IACtB,YAAAC,IAAa;AAAA,IACb,sBAAAC,IAAuB;AAAA,IACvB,SAAAC,IAAU;AAAA,IACV,kBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,QAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,EAChB,IAAAT,GAEEU,IAA2BC,EAAGJ,GAAWK,EAAO,cAAc,GAAG;AAAA,IACrE,CAACA,EAAO,yBAAyB,CAAC,GAAGP;AAAA,EAAA,CACtC,GACKQ,IAAgCF,EAAG;AAAA,IACvC,CAACC,EAAO,gCAAgC,CAAC,GAAGV;AAAA,EAAA,CAC7C,GACKY,IAAiCH,EAAG;AAAA,IACxC,CAACC,EAAO,gCAAgC,CAAC,GAAGR;AAAA,EAAA,CAC7C;AAGD,SACG,gBAAAW,EAAA,QAAA,EAAK,eAAaP,GAAQ,WAAWE,GACnC,UAAA;AAAA,IAAqBJ,MAAA,4BACnB,QACC,EAAA,UAAA,gBAAAU,EAACC,KAAU,MAAM,IAAI,SAASX,EAAA,CAAkB,EAClD,CAAA;AAAA,IAED,gBAAAS,EATaN,GASb,EAAU,WAAWG,EAAO,oBAAoB,GAC/C,UAAA;AAAA,MAAC,gBAAAI,EAAA,QAAA,EAAK,WAAWH,GAAgC,UAAUZ,GAAA;AAAA,MAC1DE,KAAc,gBAAAa,EAAC,QAAK,EAAA,WAAWF,GAAiC,UAAWX,GAAA;AAAA,IAAA,GAC9E;AAAA,EACF,EAAA,CAAA;AAEJ;AAEAJ,EAAe,cAAc;"}

package/MaxCharacters.js

@@ -0,0 +1,15 @@
+import { jsx as n } from "react/jsx-runtime";
+import l from "classnames";
+import { FormMode as p } from "./constants.js";
+import r from "./components/MaxCharacters/styles.module.scss";
+const h = ({ maxCharacters: a, maxText: o, length: s, mode: e, maxWidth: c }) => {
+  const t = s / a, i = l(r["max-characters"], {
+    [r["max-characters--on-dark"]]: e === p.ondark,
+    [r["max-characters--invalid"]]: t > 1
+  }), m = t > 0.95 ? "polite" : "off";
+  return /* @__PURE__ */ n("div", { "aria-live": m, "aria-atomic": "true", className: i, style: { maxWidth: c }, children: `${s}/${a} ${o || "tegn"}` });
+};
+export {
+  h as M
+};
+//# sourceMappingURL=MaxCharacters.js.map

package/MaxCharacters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaxCharacters.js","sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { FormMode } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface MaxCharactersProps {\n  /** Current input length */\n  length: number;\n  /** max character limit in textarea  */\n  maxCharacters: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Max width of the component */\n  maxWidth?: string;\n}\n\nconst MaxCharacters: React.FC<MaxCharactersProps> = ({ maxCharacters, maxText, length, mode, maxWidth }) => {\n  const progress = length / maxCharacters;\n\n  const counterTextClass = classNames(styles['max-characters'], {\n    [styles[`max-characters--on-dark`]]: mode === FormMode.ondark,\n    [styles[`max-characters--invalid`]]: progress > 1,\n  });\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n\n  return (\n    <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n      {`${length}/${maxCharacters} ${maxText ? maxText : 'tegn'}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"names":["MaxCharacters","maxCharacters","maxText","length","mode","maxWidth","progress","counterTextClass","classNames","styles","FormMode","ariaLevel","jsx"],"mappings":";;;;AAqBM,MAAAA,IAA8C,CAAC,EAAE,eAAAC,GAAe,SAAAC,GAAS,QAAAC,GAAQ,MAAAC,GAAM,UAAAC,QAAe;AAC1G,QAAMC,IAAWH,IAASF,GAEpBM,IAAmBC,EAAWC,EAAO,gBAAgB,GAAG;AAAA,IAC5D,CAACA,EAAO,yBAAyB,CAAC,GAAGL,MAASM,EAAS;AAAA,IACvD,CAACD,EAAO,yBAAyB,CAAC,GAAGH,IAAW;AAAA,EAAA,CACjD,GAEKK,IAAYL,IAAW,OAAO,WAAW;AAG7C,SAAA,gBAAAM,EAAC,SAAI,aAAWD,GAAW,eAAa,QAAQ,WAAWJ,GAAkB,OAAO,EAAE,UAAAF,KACnF,UAAA,GAAGF,CAAM,IAAIF,CAAa,IAAIC,KAAoB,MAAM,GAC3D,CAAA;AAEJ;"}

package/NotificationBadge.js

@@ -0,0 +1,68 @@
+import { jsx as n } from "react/jsx-runtime";
+import { palette as r } from "./theme/palette.js";
+import { I as s } from "./Icon.js";
+import l from "./components/Icons/CheckFill.js";
+import m from "./components/Icons/ErrorSignFill.js";
+import f from "./components/Icons/InfoSignFill.js";
+import v from "./components/Icons/TriangleX.js";
+const w = (a) => {
+  const { variant: t, size: o, className: e = "", testId: i, isHovered: c = !1 } = a;
+  switch (t) {
+    case "info":
+      return /* @__PURE__ */ n(
+        s,
+        {
+          svgIcon: f,
+          color: r.blueberry700,
+          hoverColor: r.blueberry700,
+          size: o,
+          className: e,
+          testId: i,
+          isHovered: c
+        }
+      );
+    case "warn":
+      return /* @__PURE__ */ n(
+        s,
+        {
+          svgIcon: m,
+          color: r.banana700,
+          hoverColor: r.banana700,
+          size: o,
+          className: e,
+          testId: i,
+          isHovered: c
+        }
+      );
+    case "error":
+      return /* @__PURE__ */ n(
+        s,
+        {
+          svgIcon: v,
+          color: r.cherry700,
+          hoverColor: r.cherry700,
+          size: o,
+          className: e,
+          testId: i,
+          isHovered: c
+        }
+      );
+    case "success":
+      return /* @__PURE__ */ n(
+        s,
+        {
+          svgIcon: l,
+          color: r.kiwi900,
+          hoverColor: r.kiwi900,
+          size: o,
+          className: e,
+          testId: i,
+          isHovered: c
+        }
+      );
+  }
+};
+export {
+  w as N
+};
+//# sourceMappingURL=NotificationBadge.js.map

package/NotificationBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBadge.js","sources":["../src/components/Badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react';\n\nimport { IconSize } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nexport type BadgeNotificationVariant = 'info' | 'warn' | 'error' | 'success';\n\nexport interface NotificationBadgeProps {\n  /** Changes the type of the badge */\n  variant: BadgeNotificationVariant;\n  /** Sets the size of the badge */\n  size: IconSize;\n  /** Adds custom classes to the element */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets hover state */\n  isHovered?: boolean;\n}\n\nconst NotificationBadge = (props: NotificationBadgeProps): React.JSX.Element => {\n  const { variant, size, className = '', testId, isHovered = false } = props;\n  switch (variant) {\n    case 'info':\n      return (\n        <Icon\n          svgIcon={InfoSignFill}\n          color={palette.blueberry700}\n          hoverColor={palette.blueberry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'warn':\n      return (\n        <Icon\n          svgIcon={ErrorSignFill}\n          color={palette.banana700}\n          hoverColor={palette.banana700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'error':\n      return (\n        <Icon\n          svgIcon={TriangleX}\n          color={palette.cherry700}\n          hoverColor={palette.cherry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'success':\n      return (\n        <Icon\n          svgIcon={CheckFill}\n          color={palette.kiwi900}\n          hoverColor={palette.kiwi900}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n  }\n};\n\nexport default NotificationBadge;\n"],"names":["NotificationBadge","props","variant","size","className","testId","isHovered","jsx","Icon","InfoSignFill","palette","ErrorSignFill","TriangleX","CheckFill"],"mappings":";;;;;;;AAyBM,MAAAA,IAAoB,CAACC,MAAqD;AACxE,QAAA,EAAE,SAAAC,GAAS,MAAAC,GAAM,WAAAC,IAAY,IAAI,QAAAC,GAAQ,WAAAC,IAAY,GAAU,IAAAL;AACrE,UAAQC,GAAS;AAAA,IACf,KAAK;AAED,aAAA,gBAAAK;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASC;AAAA,UACT,OAAOC,EAAQ;AAAA,UACf,YAAYA,EAAQ;AAAA,UACpB,MAAAP;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AAED,aAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASG;AAAA,UACT,OAAOD,EAAQ;AAAA,UACf,YAAYA,EAAQ;AAAA,UACpB,MAAAP;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AAED,aAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASI;AAAA,UACT,OAAOF,EAAQ;AAAA,UACf,YAAYA,EAAQ;AAAA,UACpB,MAAAP;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AAED,aAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASK;AAAA,UACT,OAAOH,EAAQ;AAAA,UACf,YAAYA,EAAQ;AAAA,UACpB,MAAAP;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,EAGR;AACF;"}

package/Panel.js

@@ -0,0 +1,255 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import se from "react";
+import r from "classnames";
+import { AnalyticsId as ie, IconSize as S } from "./constants.js";
+import { useExpand as ce } from "./hooks/useExpand.js";
+import { useUuid as W } from "./hooks/useUuid.js";
+import { palette as X } from "./theme/palette.js";
+import { getAriaLabelAttributes as de } from "./utils/accessibility.js";
+import { B as pe } from "./Badge.js";
+import { B as F } from "./Button.js";
+import { I as N } from "./Icon.js";
+import ue from "./components/Icons/AlertSignFill.js";
+import me from "./components/Icons/ArrowRight.js";
+import _e from "./components/Icons/Calendar.js";
+import he from "./components/Icons/ChevronDown.js";
+import fe from "./components/Icons/ChevronUp.js";
+import ye from "./components/Icons/Pencil.js";
+import ve from "./components/Icons/Watch.js";
+import { T as be } from "./Title.js";
+import e from "./components/Panel/styles.module.scss";
+var Ce = /* @__PURE__ */ ((a) => (a.normal = "normal", a.new = "new", a.error = "error", a.draft = "draft", a))(Ce || {}), Ne = /* @__PURE__ */ ((a) => (a.fill = "fill", a.white = "white", a.stroke = "stroke", a.line = "line", a))(Ne || {}), we = /* @__PURE__ */ ((a) => (a.layout1 = "layout1", a.layout2 = "layout2", a.layout3a = "layout3a", a.layout3b = "layout3b", a.layout3c = "layout3c", a))(we || {});
+const j = ({ status: a, statusMessage: n }) => {
+  const p = () => a === "error" ? { color: X.cherry500, svgIcon: ue } : { color: X.black, svgIcon: ye }, i = r(e["status-message"], {
+    [e["status-message--new"]]: a === "new"
+    /* new */
+  });
+  return (a === "error" || a === "draft") && n ? /* @__PURE__ */ l("div", { className: i, "data-testid": "display-status", children: [
+    /* @__PURE__ */ t(N, { ...p(), size: S.XSmall }),
+    " ",
+    /* @__PURE__ */ t("span", { children: n })
+  ] }) : null;
+}, E = ({ children: a }) => typeof a > "u" ? null : /* @__PURE__ */ t("div", { className: e["header-container"], children: a }), Ie = ({ date: a, time: n }) => a || n ? /* @__PURE__ */ l("div", { className: e["datetime-container"], "data-testid": "datetime", children: [
+  a && /* @__PURE__ */ l("div", { className: e["datetime-container__icon"], children: [
+    /* @__PURE__ */ t(N, { svgIcon: _e, size: S.XSmall }),
+    /* @__PURE__ */ t("span", { children: a })
+  ] }),
+  n && /* @__PURE__ */ l("div", { className: e["datetime-container__icon"], children: [
+    /* @__PURE__ */ t(N, { svgIcon: ve, size: S.XSmall }),
+    /* @__PURE__ */ t("span", { children: n })
+  ] })
+] }) : null, ge = ({
+  contentA: a,
+  contentB: n,
+  contentHeader: p,
+  ctaContainer: i,
+  icon: o,
+  status: c,
+  statusMessage: m,
+  titleElement: _
+}) => {
+  const d = r(e["panel__layout-1"], {
+    [e["panel__layout-1--with-icon"]]: o
+  }), s = r(e.panel__icon, e["panel__icon--layout-1"], {
+    [e["panel__icon--no-content"]]: !a && !n
+  });
+  return /* @__PURE__ */ l("div", { className: d, children: [
+    /* @__PURE__ */ t(j, { status: c, statusMessage: m }),
+    /* @__PURE__ */ t(E, { children: p }),
+    o && /* @__PURE__ */ t("div", { className: s, children: o }),
+    /* @__PURE__ */ l("div", { className: e["panel__layout-1__content-a"], children: [
+      _,
+      a
+    ] }),
+    n && /* @__PURE__ */ t("div", { children: n }),
+    i
+  ] });
+}, xe = ({
+  contentA: a,
+  contentB: n,
+  contentHeader: p,
+  ctaContainer: i,
+  icon: o,
+  status: c,
+  statusMessage: m,
+  titleElement: _
+}) => {
+  const d = r(e["panel__layout-2"], {
+    [e["panel__layout-2--with-icon"]]: o
+  }), s = r(e.panel__icon, e["panel__icon--layout-2"], {
+    [e["panel__icon--no-content"]]: !a && !n
+  }), v = e["panel__layout-2__last-column"];
+  return /* @__PURE__ */ l("div", { className: d, children: [
+    /* @__PURE__ */ t(j, { status: c, statusMessage: m }),
+    /* @__PURE__ */ t(E, { children: p }),
+    o && /* @__PURE__ */ t("div", { className: s, children: o }),
+    /* @__PURE__ */ l("div", { className: e["panel__layout-2__content-a"], children: [
+      _,
+      a
+    ] }),
+    n && /* @__PURE__ */ t("div", { className: v, children: n }),
+    i && /* @__PURE__ */ t("div", { className: v, children: i })
+  ] });
+}, ke = ({
+  contentA: a,
+  contentB: n,
+  contentHeader: p,
+  ctaContainer: i,
+  icon: o,
+  layout: c,
+  status: m,
+  statusMessage: _,
+  titleElement: d
+}) => {
+  const s = r(e["panel__layout-3"], {
+    [e["panel__layout-3--with-icon"]]: o,
+    [e["panel__layout-3--a"]]: c === "layout3a",
+    [e["panel__layout-3--b"]]: c === "layout3b",
+    [e["panel__layout-3--c"]]: c === "layout3c"
+    /* layout3c */
+  }), v = r(e.panel__icon, e["panel__icon--layout-3"], {
+    [e["panel__icon--no-content"]]: !a && !n
+  });
+  return /* @__PURE__ */ l("div", { className: s, children: [
+    /* @__PURE__ */ t(j, { status: m, statusMessage: _ }),
+    /* @__PURE__ */ t(E, { children: p }),
+    o && /* @__PURE__ */ t("div", { className: v, children: o }),
+    /* @__PURE__ */ l("div", { children: [
+      d,
+      a
+    ] }),
+    /* @__PURE__ */ l("div", { className: e["panel__layout-3__last-column"], children: [
+      n && /* @__PURE__ */ t("div", { className: e["panel__layout-3__last-column__content-b"], children: n }),
+      i
+    ] })
+  ] });
+}, Ge = se.forwardRef(function(n, p) {
+  const {
+    buttonAriaLabel: i,
+    buttonAriaLabelledById: o,
+    buttonText: c = "Se detaljer",
+    buttonTextClose: m = "Skjul detaljer",
+    buttonHtmlMarkup: _ = "a",
+    buttonOnClick: d,
+    children: s,
+    className: v,
+    containerAsButton: g = !1,
+    contentA: L,
+    contentB: M,
+    contentHeader: U,
+    date: z,
+    expanded: O = !1,
+    focusable: P = !1,
+    icon: D,
+    layout: b = "layout2",
+    noTopBorder: q,
+    onExpand: R,
+    renderChildrenWhenClosed: G = !1,
+    status: h = "normal",
+    statusMessage: x,
+    target: J = "_self",
+    testId: K,
+    time: $,
+    title: k,
+    titleHtmlMarkup: Q = "h2",
+    url: T,
+    variant: f = "fill"
+    /* fill */
+  } = n, [y, Y] = ce(O, R), A = W(), w = W(), H = x && h === "new", I = typeof M > "u", Z = b === "layout1" || I, V = !I && b === "layout2", ee = !I && (b === "layout3a" || b === "layout3b" || b === "layout3c"), ae = r(e["panel-wrapper"], v), te = r(e.panel, {
+    [e["panel--fill"]]: f === "fill",
+    [e["panel--stroke"]]: f === "stroke",
+    [e["panel--white"]]: f === "white",
+    [e["panel--line"]]: f === "line",
+    [e["panel--no-top-border"]]: f === "line" && q,
+    [e["panel--selected"]]: y,
+    [e["panel--new"]]: h === "new",
+    [e["panel--draft"]]: h === "draft",
+    [e["panel--error"]]: h === "error",
+    [e["panel--status"]]: h && h !== "normal",
+    [e["panel--with-icon"]]: D,
+    [e["panel--button"]]: g,
+    [e["panel--clickable"]]: s || T || R || d || g
+  }), ne = () => {
+    const u = s || T || d, C = r(e["panel__btn-container"], {
+      [e["panel__btn-container--no-content-b"]]: I,
+      [e["panel__btn-container--no-button"]]: !u
+    });
+    return (u || z || $) && /* @__PURE__ */ l("div", { className: C, children: [
+      /* @__PURE__ */ t(Ie, { date: z, time: $ }),
+      u && /* @__PURE__ */ t("div", { className: e["panel__details-btn"], children: le() })
+    ] });
+  }, le = () => {
+    const u = de({
+      label: i,
+      id: o && `${w} ${o}` || k && A && `${w} ${A}`,
+      prefer: "label"
+    }), C = {
+      onClick: d || (() => Y(!y)),
+      className: g ? e.panel__expand : void 0,
+      variant: "borderless",
+      ellipsis: !0,
+      ...u
+    };
+    return s ? /* @__PURE__ */ l(F, { testId: "expand", "aria-expanded": y, ...C, children: [
+      /* @__PURE__ */ t("span", { id: w, children: y ? m : c }),
+      /* @__PURE__ */ t(N, { svgIcon: y ? fe : he })
+    ] }) : /* @__PURE__ */ l(F, { testId: "url", htmlMarkup: _, href: T, target: J, ...C, children: [
+      /* @__PURE__ */ t("span", { id: w, children: c }),
+      /* @__PURE__ */ t(N, { svgIcon: me })
+    ] });
+  }, oe = () => {
+    if (!s || !G && !y)
+      return null;
+    const u = r(e["panel-details"], {
+      [e["panel-details--open"]]: y,
+      [e["panel-details--line"]]: f === "line",
+      [e["panel-details--white"]]: f === "white"
+      /* white */
+    });
+    return /* @__PURE__ */ t("div", { className: u, "data-testid": "panel-details", children: /* @__PURE__ */ t("div", { children: s }) });
+  }, re = () => {
+    const u = r(e["title-container"], {
+      [e["title-container--no-content-a"]]: !L
+    }), C = r(e["title-container__title"], {
+      [e["title-container__title--badge"]]: H
+    });
+    return k && /* @__PURE__ */ l("div", { className: u, children: [
+      /* @__PURE__ */ t(be, { appearance: "title3", htmlMarkup: Q, id: A, className: C, children: k }),
+      H && /* @__PURE__ */ t("div", { className: e.panel__badge, children: /* @__PURE__ */ t(pe, { color: "blueberry", testId: "badge-status", children: x }) })
+    ] });
+  }, B = {
+    contentA: L,
+    contentB: M,
+    contentHeader: U,
+    ctaContainer: ne(),
+    icon: D,
+    status: h,
+    statusMessage: x,
+    titleElement: re()
+  };
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      tabIndex: P ? -1 : void 0,
+      ref: p,
+      "data-testid": K,
+      className: ae,
+      "data-analyticsid": ie.Panel,
+      children: [
+        /* @__PURE__ */ l("div", { className: te, children: [
+          Z && /* @__PURE__ */ t(ge, { ...B }),
+          V && /* @__PURE__ */ t(xe, { ...B }),
+          ee && /* @__PURE__ */ t(ke, { ...B, layout: b })
+        ] }),
+        oe()
+      ]
+    }
+  );
+});
+export {
+  Ge as P,
+  Ce as a,
+  Ne as b,
+  we as c
+};
+//# sourceMappingURL=Panel.js.map