@helsenorge/designsystem-react 9.4.0 → 9.4.3

package/Panel.js

@@ -1,255 +1,325 @@
-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"
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import classNames from "classnames";
+import { AnalyticsId, IconSize } from "./constants.js";
+import { useExpand } from "./hooks/useExpand.js";
+import { useUuid } from "./hooks/useUuid.js";
+import { palette } from "./theme/palette.js";
+import { getAriaLabelAttributes } from "./utils/accessibility.js";
+import { B as Badge } from "./Badge.js";
+import { B as Button } from "./Button.js";
+import { I as Icon } from "./Icon.js";
+import AlertSignFill from "./components/Icons/AlertSignFill.js";
+import ArrowRight from "./components/Icons/ArrowRight.js";
+import Calendar from "./components/Icons/Calendar.js";
+import ChevronDown from "./components/Icons/ChevronDown.js";
+import ChevronUp from "./components/Icons/ChevronUp.js";
+import Pencil from "./components/Icons/Pencil.js";
+import Watch from "./components/Icons/Watch.js";
+import { T as Title } from "./Title.js";
+import panelStyles from "./components/Panel/styles.module.scss";
+var PanelStatus = /* @__PURE__ */ ((PanelStatus2) => {
+  PanelStatus2["normal"] = "normal";
+  PanelStatus2["new"] = "new";
+  PanelStatus2["error"] = "error";
+  PanelStatus2["draft"] = "draft";
+  return PanelStatus2;
+})(PanelStatus || {});
+var PanelVariant = /* @__PURE__ */ ((PanelVariant2) => {
+  PanelVariant2["fill"] = "fill";
+  PanelVariant2["white"] = "white";
+  PanelVariant2["stroke"] = "stroke";
+  PanelVariant2["line"] = "line";
+  return PanelVariant2;
+})(PanelVariant || {});
+var PanelLayout = /* @__PURE__ */ ((PanelLayout4) => {
+  PanelLayout4["layout1"] = "layout1";
+  PanelLayout4["layout2"] = "layout2";
+  PanelLayout4["layout3a"] = "layout3a";
+  PanelLayout4["layout3b"] = "layout3b";
+  PanelLayout4["layout3c"] = "layout3c";
+  return PanelLayout4;
+})(PanelLayout || {});
+const StatusText = ({ status, statusMessage }) => {
+  const statusIcon = () => {
+    if (status === "error") {
+      return { color: palette.cherry500, svgIcon: AlertSignFill };
+    }
+    return { color: palette.black, svgIcon: Pencil };
+  };
+  const statusMessageClass = classNames(panelStyles["status-message"], {
+    [panelStyles["status-message--new"]]: status === "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: _
+  if ((status === "error" || status === "draft") && statusMessage) {
+    return /* @__PURE__ */ jsxs("div", { className: statusMessageClass, "data-testid": "display-status", children: [
+      /* @__PURE__ */ jsx(Icon, { ...statusIcon(), size: IconSize.XSmall }),
+      " ",
+      /* @__PURE__ */ jsx("span", { children: statusMessage })
+    ] });
+  }
+  return null;
+};
+const PreContainer = ({ children }) => {
+  if (typeof children === "undefined") return null;
+  return /* @__PURE__ */ jsx("div", { className: panelStyles["header-container"], children });
+};
+const DateTime = ({ date, time }) => {
+  if (date || time) {
+    return /* @__PURE__ */ jsxs("div", { className: panelStyles["datetime-container"], "data-testid": "datetime", children: [
+      date && /* @__PURE__ */ jsxs("div", { className: panelStyles["datetime-container__icon"], children: [
+        /* @__PURE__ */ jsx(Icon, { svgIcon: Calendar, size: IconSize.XSmall }),
+        /* @__PURE__ */ jsx("span", { children: date })
+      ] }),
+      time && /* @__PURE__ */ jsxs("div", { className: panelStyles["datetime-container__icon"], children: [
+        /* @__PURE__ */ jsx(Icon, { svgIcon: Watch, size: IconSize.XSmall }),
+        /* @__PURE__ */ jsx("span", { children: time })
+      ] })
+    ] });
+  }
+  return null;
+};
+const PanelLayout1 = ({
+  contentA,
+  contentB,
+  contentHeader,
+  ctaContainer,
+  icon,
+  status,
+  statusMessage,
+  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
+  const panelLayoutClasses = classNames(panelStyles["panel__layout-1"], {
+    [panelStyles["panel__layout-1--with-icon"]]: icon
+  });
+  const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-1"], {
+    [panelStyles["panel__icon--no-content"]]: !contentA && !contentB
   });
-  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
+  return /* @__PURE__ */ jsxs("div", { className: panelLayoutClasses, children: [
+    /* @__PURE__ */ jsx(StatusText, { status, statusMessage }),
+    /* @__PURE__ */ jsx(PreContainer, { children: contentHeader }),
+    icon && /* @__PURE__ */ jsx("div", { className: iconClasses, children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: panelStyles["panel__layout-1__content-a"], children: [
+      titleElement,
+      contentA
     ] }),
-    n && /* @__PURE__ */ t("div", { children: n }),
-    i
+    contentB && /* @__PURE__ */ jsx("div", { children: contentB }),
+    ctaContainer
   ] });
-}, xe = ({
-  contentA: a,
-  contentB: n,
-  contentHeader: p,
-  ctaContainer: i,
-  icon: o,
-  status: c,
-  statusMessage: m,
-  titleElement: _
+};
+const PanelLayout2 = ({
+  contentA,
+  contentB,
+  contentHeader,
+  ctaContainer,
+  icon,
+  status,
+  statusMessage,
+  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
+  const panelLayoutClasses = classNames(panelStyles["panel__layout-2"], {
+    [panelStyles["panel__layout-2--with-icon"]]: icon
+  });
+  const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-2"], {
+    [panelStyles["panel__icon--no-content"]]: !contentA && !contentB
+  });
+  const lastColumnClass = panelStyles["panel__layout-2__last-column"];
+  return /* @__PURE__ */ jsxs("div", { className: panelLayoutClasses, children: [
+    /* @__PURE__ */ jsx(StatusText, { status, statusMessage }),
+    /* @__PURE__ */ jsx(PreContainer, { children: contentHeader }),
+    icon && /* @__PURE__ */ jsx("div", { className: iconClasses, children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: panelStyles["panel__layout-2__content-a"], children: [
+      titleElement,
+      contentA
     ] }),
-    n && /* @__PURE__ */ t("div", { className: v, children: n }),
-    i && /* @__PURE__ */ t("div", { className: v, children: i })
+    contentB && /* @__PURE__ */ jsx("div", { className: lastColumnClass, children: contentB }),
+    ctaContainer && /* @__PURE__ */ jsx("div", { className: lastColumnClass, children: ctaContainer })
   ] });
-}, ke = ({
-  contentA: a,
-  contentB: n,
-  contentHeader: p,
-  ctaContainer: i,
-  icon: o,
-  layout: c,
-  status: m,
-  statusMessage: _,
-  titleElement: d
+};
+const PanelLayout3 = ({
+  contentA,
+  contentB,
+  contentHeader,
+  ctaContainer,
+  icon,
+  layout,
+  status,
+  statusMessage,
+  titleElement
 }) => {
-  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"
+  const layoutClasses = classNames(panelStyles["panel__layout-3"], {
+    [panelStyles["panel__layout-3--with-icon"]]: icon,
+    [panelStyles["panel__layout-3--a"]]: layout === "layout3a",
+    [panelStyles["panel__layout-3--b"]]: layout === "layout3b",
+    [panelStyles["panel__layout-3--c"]]: layout === "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
+  const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-3"], {
+    [panelStyles["panel__icon--no-content"]]: !contentA && !contentB
+  });
+  return /* @__PURE__ */ jsxs("div", { className: layoutClasses, children: [
+    /* @__PURE__ */ jsx(StatusText, { status, statusMessage }),
+    /* @__PURE__ */ jsx(PreContainer, { children: contentHeader }),
+    icon && /* @__PURE__ */ jsx("div", { className: iconClasses, children: icon }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      titleElement,
+      contentA
     ] }),
-    /* @__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
+    /* @__PURE__ */ jsxs("div", { className: panelStyles["panel__layout-3__last-column"], children: [
+      contentB && /* @__PURE__ */ jsx("div", { className: panelStyles["panel__layout-3__last-column__content-b"], children: contentB }),
+      ctaContainer
     ] })
   ] });
-}, Ge = se.forwardRef(function(n, p) {
+};
+const Panel = React.forwardRef(function PanelForwardedRef(props, ref) {
   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"
+    buttonAriaLabel,
+    buttonAriaLabelledById,
+    buttonText = "Se detaljer",
+    buttonTextClose = "Skjul detaljer",
+    buttonHtmlMarkup = "a",
+    buttonOnClick,
+    children,
+    className,
+    containerAsButton = false,
+    contentA,
+    contentB,
+    contentHeader,
+    date,
+    expanded = false,
+    focusable = false,
+    icon,
+    layout = "layout2",
+    noTopBorder,
+    onExpand,
+    renderChildrenWhenClosed = false,
+    status = "normal",
+    statusMessage,
+    target = "_self",
+    testId,
+    time,
+    title,
+    titleHtmlMarkup = "h2",
+    url,
+    variant = "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
+  } = props;
+  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);
+  const titleId = useUuid();
+  const buttonTextId = useUuid();
+  const hasBadge = statusMessage && status === "new";
+  const noContentB = typeof contentB === "undefined";
+  const layout1 = layout === "layout1" || noContentB;
+  const layout2 = !noContentB && layout === "layout2";
+  const layout3 = !noContentB && (layout === "layout3a" || layout === "layout3b" || layout === "layout3c");
+  const panelWrapperClasses = classNames(panelStyles["panel-wrapper"], className);
+  const panelClasses = classNames(panelStyles.panel, {
+    [panelStyles["panel--fill"]]: variant === "fill",
+    [panelStyles["panel--stroke"]]: variant === "stroke",
+    [panelStyles["panel--white"]]: variant === "white",
+    [panelStyles["panel--line"]]: variant === "line",
+    [panelStyles["panel--no-top-border"]]: variant === "line" && noTopBorder,
+    [panelStyles["panel--selected"]]: isExpanded,
+    [panelStyles["panel--new"]]: status === "new",
+    [panelStyles["panel--draft"]]: status === "draft",
+    [panelStyles["panel--error"]]: status === "error",
+    [panelStyles["panel--status"]]: status && status !== "normal",
+    [panelStyles["panel--with-icon"]]: icon,
+    [panelStyles["panel--button"]]: containerAsButton,
+    [panelStyles["panel--clickable"]]: children || url || onExpand || buttonOnClick || containerAsButton
+  });
+  const renderCTAContainer = () => {
+    const hasButton = children || url || buttonOnClick;
+    const btnContainerClasses = classNames(panelStyles["panel__btn-container"], {
+      [panelStyles["panel__btn-container--no-content-b"]]: noContentB,
+      [panelStyles["panel__btn-container--no-button"]]: !hasButton
     });
-    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() })
+    return (hasButton || date || time) && /* @__PURE__ */ jsxs("div", { className: btnContainerClasses, children: [
+      /* @__PURE__ */ jsx(DateTime, { date, time }),
+      hasButton && /* @__PURE__ */ jsx("div", { className: panelStyles["panel__details-btn"], children: renderDetailsButton() })
     ] });
-  }, le = () => {
-    const u = de({
-      label: i,
-      id: o && `${w} ${o}` || k && A && `${w} ${A}`,
+  };
+  const renderDetailsButton = () => {
+    const ariaLabelAttributes = getAriaLabelAttributes({
+      label: buttonAriaLabel,
+      id: buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}` || title && titleId && `${buttonTextId} ${titleId}`,
       prefer: "label"
-    }), C = {
-      onClick: d || (() => Y(!y)),
-      className: g ? e.panel__expand : void 0,
+    });
+    const commonProps = {
+      onClick: buttonOnClick ? buttonOnClick : () => setIsExpanded(!isExpanded),
+      className: containerAsButton ? panelStyles["panel__expand"] : void 0,
       variant: "borderless",
-      ellipsis: !0,
-      ...u
+      ellipsis: true,
+      ...ariaLabelAttributes
     };
-    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 })
+    if (children) {
+      return /* @__PURE__ */ jsxs(Button, { testId: "expand", "aria-expanded": isExpanded, ...commonProps, children: [
+        /* @__PURE__ */ jsx("span", { id: buttonTextId, children: isExpanded ? buttonTextClose : buttonText }),
+        /* @__PURE__ */ jsx(Icon, { svgIcon: isExpanded ? ChevronUp : ChevronDown })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Button, { testId: "url", htmlMarkup: buttonHtmlMarkup, href: url, target, ...commonProps, children: [
+      /* @__PURE__ */ jsx("span", { id: buttonTextId, children: buttonText }),
+      /* @__PURE__ */ jsx(Icon, { svgIcon: ArrowRight })
     ] });
-  }, oe = () => {
-    if (!s || !G && !y)
+  };
+  const renderContent = () => {
+    if (!children || !renderChildrenWhenClosed && !isExpanded) {
       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"
+    }
+    const panelDetailsClasses = classNames(panelStyles["panel-details"], {
+      [panelStyles["panel-details--open"]]: isExpanded,
+      [panelStyles["panel-details--line"]]: variant === "line",
+      [panelStyles["panel-details--white"]]: variant === "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 /* @__PURE__ */ jsx("div", { className: panelDetailsClasses, "data-testid": "panel-details", children: /* @__PURE__ */ jsx("div", { children }) });
+  };
+  const renderTitle = () => {
+    const titleContainerClasses = classNames(panelStyles["title-container"], {
+      [panelStyles["title-container--no-content-a"]]: !contentA
     });
-    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 }) })
+    const titleClasses = classNames(panelStyles["title-container__title"], {
+      [panelStyles["title-container__title--badge"]]: hasBadge
+    });
+    return title && /* @__PURE__ */ jsxs("div", { className: titleContainerClasses, children: [
+      /* @__PURE__ */ jsx(Title, { appearance: "title3", htmlMarkup: titleHtmlMarkup, id: titleId, className: titleClasses, children: title }),
+      hasBadge && /* @__PURE__ */ jsx("div", { className: panelStyles.panel__badge, children: /* @__PURE__ */ jsx(Badge, { color: "blueberry", testId: "badge-status", children: statusMessage }) })
     ] });
-  }, B = {
-    contentA: L,
-    contentB: M,
-    contentHeader: U,
-    ctaContainer: ne(),
-    icon: D,
-    status: h,
-    statusMessage: x,
-    titleElement: re()
   };
-  return /* @__PURE__ */ l(
+  const layoutProps = {
+    contentA,
+    contentB,
+    contentHeader,
+    ctaContainer: renderCTAContainer(),
+    icon,
+    status,
+    statusMessage,
+    titleElement: renderTitle()
+  };
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      tabIndex: P ? -1 : void 0,
-      ref: p,
-      "data-testid": K,
-      className: ae,
-      "data-analyticsid": ie.Panel,
+      tabIndex: focusable ? -1 : void 0,
+      ref,
+      "data-testid": testId,
+      className: panelWrapperClasses,
+      "data-analyticsid": AnalyticsId.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 })
+        /* @__PURE__ */ jsxs("div", { className: panelClasses, children: [
+          layout1 && /* @__PURE__ */ jsx(PanelLayout1, { ...layoutProps }),
+          layout2 && /* @__PURE__ */ jsx(PanelLayout2, { ...layoutProps }),
+          layout3 && /* @__PURE__ */ jsx(PanelLayout3, { ...layoutProps, layout })
         ] }),
-        oe()
+        renderContent()
       ]
     }
   );
 });
 export {
-  Ge as P,
-  Ce as a,
-  Ne as b,
-  we as c
+  Panel as P,
+  PanelStatus as a,
+  PanelVariant as b,
+  PanelLayout as c
 };
 //# sourceMappingURL=Panel.js.map