@helsenorge/designsystem-react 11.3.0 → 12.0.0-beta.0

package/CHANGELOG.md

@@ -1,14 +1,24 @@
-## [11.3.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv11.2.0&targetVersion=GTv11.3.0) (2025-06-10)
+## 12.0.0-beta.0 (2025-06-10)
 
 
 ### Features
 
+*  helptrigger blir erstattet av helptriggericon helptriggerinline og helptriggerstandalone ([3b0556b](https://github.com/helsenorge/designsystem/commit/3b0556bd5ef225718a28175e42a5e4070c4158e1)), closes [#350475](https://github.com/helsenorge/designsystem/issues/350475)
+*  nye komponenter helpexpanderinline og helpexpanderstandalone ([b38f230](https://github.com/helsenorge/designsystem/commit/b38f2308f4b72756784874e4b49295d9e168e040)), closes [#350484](https://github.com/helsenorge/designsystem/issues/350484)
 *  prosesshjelp fargetokens lagt til ([c70fb44](https://github.com/helsenorge/designsystem/commit/c70fb44c9b95338f1e19563931d707a5921e311b)), closes [#353506](https://github.com/helsenorge/designsystem/issues/353506)
 *  spacers tokens ([575cd80](https://github.com/helsenorge/designsystem/commit/575cd8081ffdb9c96b7df28e85fa4ff3bd4025db)), closes [#351112](https://github.com/helsenorge/designsystem/issues/351112)
 * **drawer:**  flytt lukkekryss til hjørnet ([2b8ff77](https://github.com/helsenorge/designsystem/commit/2b8ff771c5de8bbe7a6f1b257f2df35d8e01bced))
 * **drawer:**  gjør onclose optional ([6eb0bf3](https://github.com/helsenorge/designsystem/commit/6eb0bf3a97b465ba11abba7e4b6b9023130bf788))
 * **drawer:**  legg på shadow ved scroll istedenfor border ([2f3162a](https://github.com/helsenorge/designsystem/commit/2f3162a2903e6e7ce12d95d99b55909282fbcb76))
 * **drawer:**  stopp scrolling bak drawer ([4e5ebe1](https://github.com/helsenorge/designsystem/commit/4e5ebe16b8340c28ea2066d7a63f2065bef19de9))
+* **helpbubble:**  flytt lukkekryss helt til hjørnet ([2b3c54d](https://github.com/helsenorge/designsystem/commit/2b3c54d6aac8bc074eeb6f62ddb0b5bc6c3f421f)), closes [#352915](https://github.com/helsenorge/designsystem/issues/352915)
+* **helppanel:**  ny border og spacing til tittel ([b47870f](https://github.com/helsenorge/designsystem/commit/b47870ff5cb571d09adcc921bbfc7270e640dba0))
+* **helptooltip:**  fjern provider og rydd opp i tooltip role ([37215ca](https://github.com/helsenorge/designsystem/commit/37215cac7626448915020f7d72f5d848dd8bd515)), closes [#350651](https://github.com/helsenorge/designsystem/issues/350651)
+* **helptrigger:**  ny prop weight med extra large størrelse samt nytt uttrykk ([24eaf8d](https://github.com/helsenorge/designsystem/commit/24eaf8d883c9da70ce189b044ad96394df82ab77)), closes [#350475](https://github.com/helsenorge/designsystem/issues/350475)
+* **hightlightpanel:**  size prop er fjernet og spacing oppdatert ([ac14ef0](https://github.com/helsenorge/designsystem/commit/ac14ef0927bb05ea5c62d189edbce46393403a93)), closes [#350938](https://github.com/helsenorge/designsystem/issues/350938)
+* **popover:**  nye visuelle endringer og ta i bruk floating-ui ([3c186d1](https://github.com/helsenorge/designsystem/commit/3c186d1aaccd10d4f9d881bd9ad12266dc4a5c2e)), closes [#350488](https://github.com/helsenorge/designsystem/issues/350488) [#350650](https://github.com/helsenorge/designsystem/issues/350650)
+* **popover:**  satt avstand til kant og maks bredde ([c96d447](https://github.com/helsenorge/designsystem/commit/c96d447623fc9574385ea2f9982da920f53b4518)), closes [#353533](https://github.com/helsenorge/designsystem/issues/353533)
+* **typography:**  nye stiler for help-text pg helt-trigger-text ([9ee09ba](https://github.com/helsenorge/designsystem/commit/9ee09ba5d7815b81c9fd2910f00d667c1d01bfee)), closes [#350872](https://github.com/helsenorge/designsystem/issues/350872)
 
 
 ### Bug Fixes
@@ -16,6 +26,10 @@
 *  drawer og modal får lik overlay ([99efb7b](https://github.com/helsenorge/designsystem/commit/99efb7b9ac463e09678f081417be006cd9954d87)), closes [#352610](https://github.com/helsenorge/designsystem/issues/352610)
 * **close:**  riktig size på inner container for small versjon ([d23f53a](https://github.com/helsenorge/designsystem/commit/d23f53a959e0c2cd17bde70431775a90d0c5382b)), closes [#352915](https://github.com/helsenorge/designsystem/issues/352915)
 * **drawer:**  legg til scroll shadow også på tiny screen query ([1cdf6df](https://github.com/helsenorge/designsystem/commit/1cdf6dfc78b3e71bbebe2d2ad6104e6e36ea5e0a)), closes [#352610](https://github.com/helsenorge/designsystem/issues/352610)
+* **helptriggericon:**  strong focus styling riktig størrelse ([ada7679](https://github.com/helsenorge/designsystem/commit/ada7679c59fe0754d74211f9087d73f504313faf)), closes [#350475](https://github.com/helsenorge/designsystem/issues/350475)
+* **helptriggericon:**  svg får riktig rolle og aria ([e1cac75](https://github.com/helsenorge/designsystem/commit/e1cac758b62fddd560bd21fda2bf4905676292fd)), closes [#350475](https://github.com/helsenorge/designsystem/issues/350475)
+* **popover:**  fiks padding for popover og popmenu ([c4d916c](https://github.com/helsenorge/designsystem/commit/c4d916cc48d2cc95bc7461a43dbe1fbc67c81576)), closes [#350488](https://github.com/helsenorge/designsystem/issues/350488)
+* **popover:**  sett border radius lik som skisser ([d665e38](https://github.com/helsenorge/designsystem/commit/d665e385b5187be9674b35a15fae4dfc3c9055a6)), closes [#350488](https://github.com/helsenorge/designsystem/issues/350488)
 
 ## [11.2.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv11.1.0&targetVersion=GTv11.2.0) (2025-05-27)
 

package/DictionaryTrigger.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "./constants.js";
+import styles from "./components/DictionaryTrigger/styles.module.scss";
+const DictionaryTrigger = React__default.forwardRef(
+  ({ children, selected = false, className, testId, ...rest }, ref) => {
+    const triggerClasses = classNames(styles.dictionarytrigger, className);
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-testid": testId,
+        "data-analyticsid": AnalyticsId.DictionaryTrigger,
+        className: triggerClasses,
+        "aria-expanded": selected,
+        ref,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DictionaryTrigger.displayName = "DictionaryTrigger";
+export {
+  DictionaryTrigger as D
+};
+//# sourceMappingURL=DictionaryTrigger.js.map

package/DictionaryTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DictionaryTrigger.js","sources":["../src/components/DictionaryTrigger/DictionaryTrigger.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 interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {\n  /**\n   * Sets the content of the trigger.\n   */\n  children: React.ReactNode;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n}\n\nconst DictionaryTrigger = React.forwardRef<HTMLButtonElement, DictionaryTriggerProps>(\n  ({ children, selected = false, className, testId, ...rest }, ref) => {\n    const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n    return (\n      <button\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.DictionaryTrigger}\n        className={triggerClasses}\n        aria-expanded={selected}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n"],"names":["React"],"mappings":";;;;;AA2BA,MAAM,oBAAoBA,eAAM;AAAA,EAC9B,CAAC,EAAE,UAAU,WAAW,OAAO,WAAW,QAAQ,GAAG,KAAK,GAAG,QAAQ;AACnE,UAAM,iBAAiB,WAAW,OAAO,mBAAmB,SAAS;AAGnE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAa;AAAA,QACb,oBAAkB,YAAY;AAAA,QAC9B,WAAW;AAAA,QACX,iBAAe;AAAA,QACf;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,kBAAkB,cAAc;"}

package/HelpDetails.js

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default, { useRef, useState } from "react";
+import { u as useFloating, e as FloatingArrow, f as autoUpdate, o as offset, i as arrow, j as size } from "./floating-ui.react.js";
+import classNames from "classnames";
+import styles from "./components/HelpDetails/styles.module.scss";
+const BUBBLE_WIDTH_OFFSET = 26;
+const BUBBLE_Y_OFFSET = 1;
+const HelpDetails = React__default.forwardRef(({ children, controllerRef, testId }, ref) => {
+  const arrowRef = useRef(null);
+  const [bubbleMinWidth, setBubbleMinWidth] = React__default.useState(null);
+  const [arrowYOffsetValue, setArrowYOffsetValue] = useState();
+  const { refs, context, floatingStyles } = useFloating({
+    middleware: [
+      offset(arrowYOffsetValue),
+      controllerRef && arrow({ element: arrowRef }),
+      size({
+        apply({ rects }) {
+          setBubbleMinWidth(rects.reference.x);
+          const { reference, floating } = rects;
+          const controllerBottom = reference.y + reference.height;
+          const bubbleTop = floating.y;
+          const distance = bubbleTop - controllerBottom + BUBBLE_Y_OFFSET;
+          setArrowYOffsetValue(distance);
+        }
+      })
+    ],
+    placement: "bottom",
+    whileElementsMounted: autoUpdate,
+    elements: {
+      reference: controllerRef == null ? void 0 : controllerRef.current
+    }
+  });
+  const helpDetailsClasses = classNames(
+    styles["help-details"],
+    controllerRef ? styles["help-details--inline"] : styles["help-details--standalone"]
+  );
+  const contentClasses = classNames(controllerRef ? styles["help-details__content--inline"] : styles["help-details__content--standalone"]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: helpDetailsClasses,
+      "data-testid": testId,
+      ref,
+      style: { minWidth: bubbleMinWidth ? `${bubbleMinWidth + BUBBLE_WIDTH_OFFSET}px` : void 0 },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: floatingStyles, ref: refs.setFloating, children: controllerRef && typeof arrowYOffsetValue !== "undefined" && /* @__PURE__ */ jsx(
+          FloatingArrow,
+          {
+            ref: arrowRef,
+            context,
+            fill: "var(--core-color-plum-50)",
+            stroke: "var(--core-color-plum-400)",
+            strokeWidth: 1
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: contentClasses, children })
+      ]
+    }
+  );
+});
+HelpDetails.displayName = "HelpDetails";
+export {
+  HelpDetails as H
+};
+//# sourceMappingURL=HelpDetails.js.map

package/HelpDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpDetails.js","sources":["../src/components/HelpDetails/HelpDetails.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport { arrow, FloatingArrow, autoUpdate, useFloating, offset, size } from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nconst BUBBLE_WIDTH_OFFSET = 26;\nconst BUBBLE_Y_OFFSET = 1;\n\nexport interface HelpDetailsProps {\n  /** Sets the text content of the HelpDetails. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpDetails is placed upon */\n  controllerRef?: React.RefObject<HTMLButtonElement>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpDetails = React.forwardRef<HTMLDivElement, HelpDetailsProps>(({ children, controllerRef, testId }, ref) => {\n  const arrowRef = useRef(null);\n  const [bubbleMinWidth, setBubbleMinWidth] = React.useState<number | null>(null);\n  const [arrowYOffsetValue, setArrowYOffsetValue] = useState<number>();\n\n  const { refs, context, floatingStyles } = useFloating({\n    middleware: [\n      offset(arrowYOffsetValue),\n      controllerRef && arrow({ element: arrowRef }),\n      size({\n        apply({ rects }) {\n          // Vi setter minimum bredde på bubble basert på controllerRef sin x posisjon\n          setBubbleMinWidth(rects.reference.x);\n\n          // Vi kalkulerer pilens y-offset basert på avstand mellom controllerRef og bubble\n          const { reference, floating } = rects;\n          const controllerBottom = reference.y + reference.height;\n          const bubbleTop = floating.y;\n          const distance = bubbleTop - controllerBottom + BUBBLE_Y_OFFSET;\n          setArrowYOffsetValue(distance);\n        },\n      }),\n    ],\n    placement: 'bottom',\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: controllerRef?.current,\n    },\n  });\n\n  const helpDetailsClasses = classNames(\n    styles['help-details'],\n    controllerRef ? styles['help-details--inline'] : styles['help-details--standalone']\n  );\n  const contentClasses = classNames(controllerRef ? styles['help-details__content--inline'] : styles['help-details__content--standalone']);\n\n  return (\n    <div\n      className={helpDetailsClasses}\n      data-testid={testId}\n      ref={ref}\n      style={{ minWidth: bubbleMinWidth ? `${bubbleMinWidth + BUBBLE_WIDTH_OFFSET}px` : undefined }}\n    >\n      <div style={floatingStyles} ref={refs.setFloating}>\n        {controllerRef && typeof arrowYOffsetValue !== 'undefined' && (\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            fill={'var(--core-color-plum-50)'}\n            stroke={'var(--core-color-plum-400)'}\n            strokeWidth={1}\n          />\n        )}\n      </div>\n      <div className={contentClasses}>{children}</div>\n    </div>\n  );\n});\n\nHelpDetails.displayName = 'HelpDetails';\n\nexport default HelpDetails;\n"],"names":["React"],"mappings":";;;;;AAOA,MAAM,sBAAsB;AAC5B,MAAM,kBAAkB;AAWlB,MAAA,cAAcA,eAAM,WAA6C,CAAC,EAAE,UAAU,eAAe,OAAO,GAAG,QAAQ;AAC7G,QAAA,WAAW,OAAO,IAAI;AAC5B,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,eAAM,SAAwB,IAAI;AAC9E,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAiB;AAEnE,QAAM,EAAE,MAAM,SAAS,eAAA,IAAmB,YAAY;AAAA,IACpD,YAAY;AAAA,MACV,OAAO,iBAAiB;AAAA,MACxB,iBAAiB,MAAM,EAAE,SAAS,UAAU;AAAA,MAC5C,KAAK;AAAA,QACH,MAAM,EAAE,SAAS;AAEG,4BAAA,MAAM,UAAU,CAAC;AAG7B,gBAAA,EAAE,WAAW,SAAA,IAAa;AAC1B,gBAAA,mBAAmB,UAAU,IAAI,UAAU;AACjD,gBAAM,YAAY,SAAS;AACrB,gBAAA,WAAW,YAAY,mBAAmB;AAChD,+BAAqB,QAAQ;AAAA,QAAA;AAAA,MAEhC,CAAA;AAAA,IACH;AAAA,IACA,WAAW;AAAA,IACX,sBAAsB;AAAA,IACtB,UAAU;AAAA,MACR,WAAW,+CAAe;AAAA,IAAA;AAAA,EAC5B,CACD;AAED,QAAM,qBAAqB;AAAA,IACzB,OAAO,cAAc;AAAA,IACrB,gBAAgB,OAAO,sBAAsB,IAAI,OAAO,0BAA0B;AAAA,EACpF;AACM,QAAA,iBAAiB,WAAW,gBAAgB,OAAO,+BAA+B,IAAI,OAAO,mCAAmC,CAAC;AAGrI,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,eAAa;AAAA,MACb;AAAA,MACA,OAAO,EAAE,UAAU,iBAAiB,GAAG,iBAAiB,mBAAmB,OAAO,OAAU;AAAA,MAE5F,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,OAAO,gBAAgB,KAAK,KAAK,aACnC,UAAA,iBAAiB,OAAO,sBAAsB,eAC7C;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,aAAa;AAAA,UAAA;AAAA,QAAA,GAGnB;AAAA,QACC,oBAAA,OAAA,EAAI,WAAW,gBAAiB,SAAS,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5C;AAEJ,CAAC;AAED,YAAY,cAAc;"}

package/HelpTriggerIcon.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "./constants.js";
+import { useHover } from "./hooks/useHover.js";
+import { getAriaLabelAttributes } from "./utils/accessibility.js";
+import { mergeRefs } from "./utils/refs.js";
+import styles from "./components/HelpTriggerIcon/styles.module.scss";
+const HelpSign = ({ color, weight }) => {
+  const paths = weight === "normal" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clipCircle", clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0"
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M10.0004 0V-2C3.38207 -2 -2 3.38088 -2 9.99961H0H2C2 5.59043 5.5908 2 10.0004 2V0ZM0 9.99961H-2C-2 16.6181 3.38187 22 10.0004 22V20V18C5.59101 18 2 14.409 2 9.99961H0ZM10.0004 20V22C16.6191 22 22 16.6179 22 9.99961H20H18C18 14.4092 14.4096 18 10.0004 18V20ZM20 9.99961H22C22 3.38108 16.6189 -2 10.0004 -2V0V2C14.4098 2 18 5.59022 18 9.99961H20Z",
+        fill: color,
+        clipPath: "url(#clipCircle)"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z",
+        fill: color
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z",
+        fill: color
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0Z"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z",
+        fill: "white"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z",
+        fill: "white"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx("svg", { fill: "none", height: "20", overflow: "visible", role: "presentation", width: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: paths });
+};
+const getIconColor = (hover, weight) => {
+  if (weight === "normal") {
+    return `var(--core-color-plum-${hover ? "900" : "700"})`;
+  }
+};
+const HelpTriggerIcon = React__default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(HelpTriggerIconInternal, { ...props, ref });
+});
+const HelpTriggerIconInternal = React__default.forwardRef(
+  ({ ariaLabel, ariaLabelledById, htmlMarkup = "button", size = "medium", testId, weight = "normal", ...buttonRest }, ref) => {
+    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });
+    const { hoverRef, isHovered } = useHover(ref, false);
+    const helpIcon = /* @__PURE__ */ jsx(HelpSign, { color: getIconColor(isHovered, weight), weight });
+    const isButton = htmlMarkup === "button";
+    const iconClasses = classNames(
+      styles["help-trigger-icon"],
+      {
+        [styles["help-trigger-icon--strong"]]: weight === "strong",
+        [styles["help-trigger-icon--is-button"]]: isButton
+      },
+      styles[`help-trigger-icon--${size}`]
+    );
+    if (isButton) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ...ariaLabelAttributes,
+          type: "button",
+          "data-testid": testId,
+          "data-analyticsid": AnalyticsId.HelpTriggerIcon,
+          className: iconClasses,
+          ref: mergeRefs([hoverRef, ref]),
+          ...buttonRest,
+          children: helpIcon
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("span", { "data-testid": testId, "data-analyticsid": AnalyticsId.HelpTriggerIcon, className: iconClasses, children: helpIcon });
+  }
+);
+HelpTriggerIcon.displayName = "HelpTriggerIcon";
+HelpTriggerIconInternal.displayName = "HelpTriggerIconInternal";
+export {
+  HelpTriggerIconInternal as H,
+  HelpTriggerIcon as a
+};
+//# sourceMappingURL=HelpTriggerIcon.js.map

package/HelpTriggerIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpTriggerIcon.js","sources":["../src/components/HelpTriggerIcon/HelpSign.tsx","../src/components/HelpTriggerIcon/HelpTriggerIcon.tsx"],"sourcesContent":["import React from 'react';\n\nimport { HelpTriggerWeights } from '../HelpTriggerIcon';\n\nexport interface HelpSignProps {\n  color?: string;\n  weight?: HelpTriggerWeights;\n}\n\nconst HelpSign: React.FC<HelpSignProps> = ({ color, weight }: HelpSignProps): React.ReactElement => {\n  const paths =\n    weight === 'normal' ? (\n      <>\n        <defs>\n          <clipPath id=\"clipCircle\" clipPathUnits=\"userSpaceOnUse\">\n            <path\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n              d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0\"\n            />\n          </clipPath>\n        </defs>\n        <path\n          d=\"M10.0004 0V-2C3.38207 -2 -2 3.38088 -2 9.99961H0H2C2 5.59043 5.5908 2 10.0004 2V0ZM0 9.99961H-2C-2 16.6181 3.38187 22 10.0004 22V20V18C5.59101 18 2 14.409 2 9.99961H0ZM10.0004 20V22C16.6191 22 22 16.6179 22 9.99961H20H18C18 14.4092 14.4096 18 10.0004 18V20ZM20 9.99961H22C22 3.38108 16.6189 -2 10.0004 -2V0V2C14.4098 2 18 5.59022 18 9.99961H20Z\"\n          fill={color}\n          clipPath=\"url(#clipCircle)\"\n        />\n        <path\n          d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n          fill={color}\n        />\n        <path\n          d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n          fill={color}\n        />\n      </>\n    ) : (\n      <>\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0Z\"\n        />\n        <path\n          d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n          fill=\"white\"\n        />\n      </>\n    );\n\n  return (\n    <svg fill=\"none\" height=\"20\" overflow=\"visible\" role={'presentation'} width=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      {paths}\n    </svg>\n  );\n};\n\nexport default HelpSign;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport type HelpTriggerIconSizes = 'inherit' | 'medium' | 'large' | 'xlarge';\n\nexport type HelpTriggerIconTags = 'button' | 'span';\n\nexport type HelpTriggerWeights = 'normal' | 'strong';\n\nexport interface HelpTriggerIconProps\n  extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Size of the Icon. Default: medium.\n   */\n\n  size?: HelpTriggerIconSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /**\n   * Sets the colors of the help trigger icon. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n}\n\ninterface HelpTriggerIconInternalProps extends HelpTriggerIconProps {\n  /**\n   * Only use this if the parent wrapper is a Button!\n   * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button\n   */\n  htmlMarkup?: HelpTriggerIconTags;\n}\n\nconst getIconColor = (hover: boolean, weight: HelpTriggerWeights): string | undefined => {\n  if (weight === 'normal') {\n    return `var(--core-color-plum-${hover ? '900' : '700'})`;\n  }\n};\n\nconst HelpTriggerIcon = React.forwardRef<HTMLButtonElement, HelpTriggerIconProps>((props, ref) => {\n  return <HelpTriggerIconInternal {...props} ref={ref} />;\n});\n\nexport const HelpTriggerIconInternal = React.forwardRef<HTMLButtonElement, HelpTriggerIconInternalProps>(\n  ({ ariaLabel, ariaLabelledById, htmlMarkup = 'button', size = 'medium', testId, weight = 'normal', ...buttonRest }, ref) => {\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n    const { hoverRef, isHovered } = useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>, false);\n    const helpIcon = <HelpSign color={getIconColor(isHovered, weight)} weight={weight} />;\n    const isButton = htmlMarkup === 'button';\n    const iconClasses = classNames(\n      styles['help-trigger-icon'],\n      {\n        [styles['help-trigger-icon--strong']]: weight === 'strong',\n        [styles['help-trigger-icon--is-button']]: isButton,\n      },\n      styles[`help-trigger-icon--${size}`]\n    );\n\n    if (isButton) {\n      return (\n        <button\n          {...ariaLabelAttributes}\n          type=\"button\"\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.HelpTriggerIcon}\n          className={iconClasses}\n          ref={mergeRefs([hoverRef, ref])}\n          {...buttonRest}\n        >\n          {helpIcon}\n        </button>\n      );\n    }\n\n    return (\n      <span data-testid={testId} data-analyticsid={AnalyticsId.HelpTriggerIcon} className={iconClasses}>\n        {helpIcon}\n      </span>\n    );\n  }\n);\n\nHelpTriggerIcon.displayName = 'HelpTriggerIcon';\nHelpTriggerIconInternal.displayName = 'HelpTriggerIconInternal';\n\nexport default HelpTriggerIcon;\n"],"names":["React"],"mappings":";;;;;;;;AASA,MAAM,WAAoC,CAAC,EAAE,OAAO,aAAgD;AAC5F,QAAA,QACJ,WAAW,WAEP,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,oBAAC,UACC,UAAC,oBAAA,YAAA,EAAS,IAAG,cAAa,eAAc,kBACtC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,UAAS;AAAA,QACT,GAAE;AAAA,MAAA;AAAA,OAEN,EACF,CAAA;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAM;AAAA,QACN,UAAS;AAAA,MAAA;AAAA,IACX;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACR,EAAA,CACF,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,UAAS;AAAA,QACT,GAAE;AAAA,MAAA;AAAA,IACJ;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,MAAA;AAAA,IACP;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACP,GACF;AAGJ,6BACG,OAAI,EAAA,MAAK,QAAO,QAAO,MAAK,UAAS,WAAU,MAAM,gBAAgB,OAAM,MAAK,SAAQ,aAAY,OAAM,8BACxG,UACH,OAAA;AAEJ;ACVA,MAAM,eAAe,CAAC,OAAgB,WAAmD;AACvF,MAAI,WAAW,UAAU;AAChB,WAAA,yBAAyB,QAAQ,QAAQ,KAAK;AAAA,EAAA;AAEzD;AAEA,MAAM,kBAAkBA,eAAM,WAAoD,CAAC,OAAO,QAAQ;AAChG,SAAQ,oBAAA,yBAAA,EAAyB,GAAG,OAAO,IAAU,CAAA;AACvD,CAAC;AAEM,MAAM,0BAA0BA,eAAM;AAAA,EAC3C,CAAC,EAAE,WAAW,kBAAkB,aAAa,UAAU,OAAO,UAAU,QAAQ,SAAS,UAAU,GAAG,WAAA,GAAc,QAAQ;AAC1H,UAAM,sBAAsB,uBAAuB,EAAE,OAAO,WAAW,IAAI,kBAAkB;AAC7F,UAAM,EAAE,UAAU,UAAA,IAAc,SAA4B,KAA2C,KAAK;AACtG,UAAA,+BAAY,UAAS,EAAA,OAAO,aAAa,WAAW,MAAM,GAAG,QAAgB;AACnF,UAAM,WAAW,eAAe;AAChC,UAAM,cAAc;AAAA,MAClB,OAAO,mBAAmB;AAAA,MAC1B;AAAA,QACE,CAAC,OAAO,2BAA2B,CAAC,GAAG,WAAW;AAAA,QAClD,CAAC,OAAO,8BAA8B,CAAC,GAAG;AAAA,MAC5C;AAAA,MACA,OAAO,sBAAsB,IAAI,EAAE;AAAA,IACrC;AAEA,QAAI,UAAU;AAEV,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,MAAK;AAAA,UACL,eAAa;AAAA,UACb,oBAAkB,YAAY;AAAA,UAC9B,WAAW;AAAA,UACX,KAAK,UAAU,CAAC,UAAU,GAAG,CAAC;AAAA,UAC7B,GAAG;AAAA,UAEH,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAKF,WAAA,oBAAC,UAAK,eAAa,QAAQ,oBAAkB,YAAY,iBAAiB,WAAW,aAClF,UACH,SAAA,CAAA;AAAA,EAAA;AAGN;AAEA,gBAAgB,cAAc;AAC9B,wBAAwB,cAAc;"}

package/HelpTriggerStandalone.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "./constants.js";
+import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
+import { getAriaLabelAttributes } from "./utils/accessibility.js";
+import { H as HelpTriggerIconInternal } from "./HelpTriggerIcon.js";
+import styles from "./components/HelpTriggerStandalone/styles.module.scss";
+const HelpTriggerStandalone = React__default.forwardRef(
+  ({ ariaLabel, ariaLabelledById, children, className, testId, weight = "normal", ...rest }, ref) => {
+    const isMobile = useIsMobileBreakpoint();
+    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });
+    const helpTriggerStandaloneStyles = classNames(styles["help-trigger-standalone"], className);
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": ariaLabel,
+        type: "button",
+        "data-testid": testId,
+        "data-analyticsid": AnalyticsId.HelpTriggerStandalone,
+        className: helpTriggerStandaloneStyles,
+        ref,
+        ...ariaLabelAttributes,
+        ...rest,
+        children: /* @__PURE__ */ jsxs("span", { className: styles["help-trigger-standalone__inner-container"], children: [
+          /* @__PURE__ */ jsx(HelpTriggerIconInternal, { weight, size: isMobile ? "medium" : "large", htmlMarkup: "span" }),
+          /* @__PURE__ */ jsx("span", { className: styles["help-trigger-standalone__children"], children })
+        ] })
+      }
+    );
+  }
+);
+HelpTriggerStandalone.displayName = "HelpTriggerStandalone";
+export {
+  HelpTriggerStandalone as H
+};
+//# sourceMappingURL=HelpTriggerStandalone.js.map

package/HelpTriggerStandalone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpTriggerStandalone.js","sources":["../src/components/HelpTriggerStandalone/HelpTriggerStandalone.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { HelpTriggerIconInternal, HelpTriggerWeights } from '../HelpTriggerIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTriggerStandaloneProps\n  extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Sets the text content of the HelpTriggerStandalone. */\n  children: React.ReactNode;\n  /**\n   * Sets the colors of the help trigger. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n}\n\nconst HelpTriggerStandalone = React.forwardRef<HTMLButtonElement, HelpTriggerStandaloneProps>(\n  ({ ariaLabel, ariaLabelledById, children, className, testId, weight = 'normal', ...rest }, ref) => {\n    const isMobile = useIsMobileBreakpoint();\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n    const helpTriggerStandaloneStyles = classNames(styles['help-trigger-standalone'], className);\n\n    return (\n      <button\n        aria-label={ariaLabel}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.HelpTriggerStandalone}\n        className={helpTriggerStandaloneStyles}\n        ref={ref}\n        {...ariaLabelAttributes}\n        {...rest}\n      >\n        <span className={styles['help-trigger-standalone__inner-container']}>\n          <HelpTriggerIconInternal weight={weight} size={isMobile ? 'medium' : 'large'} htmlMarkup={'span'} />\n          <span className={styles['help-trigger-standalone__children']}>{children}</span>\n        </span>\n      </button>\n    );\n  }\n);\n\nHelpTriggerStandalone.displayName = 'HelpTriggerStandalone';\n\nexport default HelpTriggerStandalone;\n"],"names":["React"],"mappings":";;;;;;;;AAqCA,MAAM,wBAAwBA,eAAM;AAAA,EAClC,CAAC,EAAE,WAAW,kBAAkB,UAAU,WAAW,QAAQ,SAAS,UAAU,GAAG,KAAK,GAAG,QAAQ;AACjG,UAAM,WAAW,sBAAsB;AACvC,UAAM,sBAAsB,uBAAuB,EAAE,OAAO,WAAW,IAAI,kBAAkB;AAC7F,UAAM,8BAA8B,WAAW,OAAO,yBAAyB,GAAG,SAAS;AAGzF,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAY;AAAA,QACZ,MAAK;AAAA,QACL,eAAa;AAAA,QACb,oBAAkB,YAAY;AAAA,QAC9B,WAAW;AAAA,QACX;AAAA,QACC,GAAG;AAAA,QACH,GAAG;AAAA,QAEJ,UAAC,qBAAA,QAAA,EAAK,WAAW,OAAO,0CAA0C,GAChE,UAAA;AAAA,UAAA,oBAAC,2BAAwB,QAAgB,MAAM,WAAW,WAAW,SAAS,YAAY,QAAQ;AAAA,8BACjG,QAAK,EAAA,WAAW,OAAO,mCAAmC,GAAI,SAAS,CAAA;AAAA,QAAA,EAC1E,CAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AAEA,sBAAsB,cAAc;"}

package/HighlightPanel.js

@@ -8,43 +8,19 @@ import { I as Icon } from "./Icon.js";
 import { L as LazyIcon } from "./LazyIcon.js";
 import { T as Title } from "./Title.js";
 import styles from "./components/HighlightPanel/styles.module.scss";
-var HighlightPanelSize = /* @__PURE__ */ ((HighlightPanelSize2) => {
-  HighlightPanelSize2["medium"] = "medium";
-  HighlightPanelSize2["large"] = "large";
-  HighlightPanelSize2["fluid"] = "fluid";
-  return HighlightPanelSize2;
-})(HighlightPanelSize || {});
-const Wrapper = ({ className, size, children }) => /* @__PURE__ */ jsx("div", { className, "data-testid": "highlightpanel-wrapper", children: /* @__PURE__ */ jsx("div", { className: styles.highlightpanel__row, children: /* @__PURE__ */ jsx("div", { className: classNames(styles.highlightpanel__col, size === "medium" && styles["highlightpanel__col--offset"]), children }) }) });
-const ContentWrapper = (props) => {
-  const { children, className } = props;
-  const contentWrapperClasses = classNames(styles["highlightpanel__content-wrapper"], className);
-  return /* @__PURE__ */ jsx("div", { className: contentWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: classNames(styles.highlightpanel__row), children }) });
-};
 const HighlightPanel = (props) => {
-  const {
-    children,
-    color = "white",
-    size = "medium",
-    testId,
-    svgIcon,
-    htmlMarkup = "div",
-    className,
-    contentWrapperClassName,
-    title,
-    titleHtmlMarkup = "h2"
-  } = props;
+  const { children, color = "white", testId, svgIcon, htmlMarkup = "div", className, title, titleHtmlMarkup = "h2" } = props;
   const breakpoint = useBreakpoint();
   const containerClassName = classNames(
+    styles.highlightpanel,
     styles[`highlightpanel--${color}`],
-    styles[`highlightpanel--${size}`],
     svgIcon && styles["highlightpanel--has-icon"],
-    { container: size === "medium" || size === "large" },
     className
   );
   const renderContent = () => {
     const titleElement = title && /* @__PURE__ */ jsx(Title, { testId: "titleId", htmlMarkup: titleHtmlMarkup, appearance: "title4", children: title });
     if (svgIcon) {
-      const iconSize = size === "large" && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;
+      const iconSize = IconSize.Small;
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { className: styles.highlightpanel__icon, children: [
           typeof svgIcon === "string" ? /* @__PURE__ */ jsx(LazyIcon, { iconName: svgIcon, size: iconSize }) : /* @__PURE__ */ jsx(Icon, { svgIcon, size: iconSize }),
@@ -62,39 +38,9 @@ const HighlightPanel = (props) => {
     ] });
   };
   const CustomTag = htmlMarkup;
-  const contentWrapperClasses = classNames(styles["highlightpanel__content-wrapper"], contentWrapperClassName);
-  if (size === "medium") {
-    return /* @__PURE__ */ jsx(Wrapper, { className: containerClassName, size, children: /* @__PURE__ */ jsx(CustomTag, { className: contentWrapperClasses, "data-testid": testId, "data-analyticsid": AnalyticsId.HighlightPanel, children: renderContent() }) });
-  }
-  if (size === "large" && svgIcon) {
-    return /* @__PURE__ */ jsx(Wrapper, { className: containerClassName, size, children: /* @__PURE__ */ jsx(ContentWrapper, { className: contentWrapperClasses, children: /* @__PURE__ */ jsx(
-      CustomTag,
-      {
-        className: classNames(styles.highlightpanel__col, styles["highlightpanel__col--large-with-icon"]),
-        "data-testid": testId,
-        "data-analyticsid": AnalyticsId.HighlightPanel,
-        children: renderContent()
-      }
-    ) }) });
-  }
-  if (size === "large") {
-    return /* @__PURE__ */ jsx(Wrapper, { className: containerClassName, size, children: /* @__PURE__ */ jsx(ContentWrapper, { className: contentWrapperClasses, children: /* @__PURE__ */ jsx(
-      CustomTag,
-      {
-        className: classNames(styles.highlightpanel__col, styles["highlightpanel__col--offset"]),
-        "data-testid": testId,
-        "data-analyticsid": AnalyticsId.HighlightPanel,
-        children: renderContent()
-      }
-    ) }) });
-  }
-  if (size === "fluid") {
-    return /* @__PURE__ */ jsx(CustomTag, { className: containerClassName, "data-testid": testId, children: renderContent() });
-  }
-  return null;
+  return /* @__PURE__ */ jsx(CustomTag, { className: containerClassName, "data-testid": testId, "data-analyticsid": AnalyticsId.HighlightPanel, children: renderContent() });
 };
 export {
-  HighlightPanel as H,
-  HighlightPanelSize as a
+  HighlightPanel as H
 };
 //# sourceMappingURL=HighlightPanel.js.map

package/HighlightPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightPanel.js","sources":["../src/components/HighlightPanel/HighlightPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport enum HighlightPanelSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightPanelTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\n\nexport interface HighlightPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightPanelColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds an icon to the highlightpanel. */\n  svgIcon?: SvgIcon | IconName;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightPanelTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content-wrapper. Not used for fluid size. */\n  contentWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\ninterface WrapperProps {\n  children?: React.ReactNode;\n  className: string;\n  size?: keyof typeof HighlightPanelSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightpanel-wrapper'}>\n    <div className={styles.highlightpanel__row}>\n      <div className={classNames(styles.highlightpanel__col, size === HighlightPanelSize.medium && styles['highlightpanel__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\ninterface ContentWrapperProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst ContentWrapper: React.FC<ContentWrapperProps> = props => {\n  const { children, className } = props;\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], className);\n\n  return (\n    <div className={contentWrapperClasses}>\n      <div className={classNames(styles.highlightpanel__row)}>{children}</div>\n    </div>\n  );\n};\n\nconst HighlightPanel: React.FC<HighlightPanelProps> = props => {\n  const {\n    children,\n    color = 'white',\n    size = HighlightPanelSize.medium,\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    contentWrapperClassName,\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles[`highlightpanel--${color}`],\n    styles[`highlightpanel--${size}`],\n    svgIcon && styles['highlightpanel--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = (): React.ReactNode => {\n    const titleElement = title && (\n      <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\">\n        {title}\n      </Title>\n    );\n\n    if (svgIcon) {\n      const iconSize = size === HighlightPanelSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n\n      return (\n        <>\n          <div className={styles.highlightpanel__icon}>\n            {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            {title && breakpoint < Breakpoint.md && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightpanel__content}>\n            {title && breakpoint >= Breakpoint.md && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return (\n      <>\n        {title && (\n          <div className={styles.highlightpanel__content}>\n            <div>{titleElement}</div>\n          </div>\n        )}\n        {children}\n      </>\n    );\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], contentWrapperClassName);\n\n  if (size === HighlightPanelSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={contentWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.HighlightPanel}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightPanel;\n"],"names":["HighlightPanelSize"],"mappings":"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"}
+{"version":3,"file":"HighlightPanel.js","sources":["../src/components/HighlightPanel/HighlightPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport type HighlightPanelTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\n\nexport interface HighlightPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightPanelColors;\n  /** Adds an icon to the highlightpanel. */\n  svgIcon?: SvgIcon | IconName;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightPanelTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\nconst HighlightPanel: React.FC<HighlightPanelProps> = props => {\n  const { children, color = 'white', testId, svgIcon, htmlMarkup = 'div', className, title, titleHtmlMarkup = 'h2' } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles.highlightpanel,\n    styles[`highlightpanel--${color}`],\n    svgIcon && styles['highlightpanel--has-icon'],\n    className\n  );\n\n  const renderContent = (): React.ReactNode => {\n    const titleElement = title && (\n      <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\">\n        {title}\n      </Title>\n    );\n\n    if (svgIcon) {\n      const iconSize = IconSize.Small;\n\n      return (\n        <>\n          <div className={styles.highlightpanel__icon}>\n            {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            {title && breakpoint < Breakpoint.md && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightpanel__content}>\n            {title && breakpoint >= Breakpoint.md && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return (\n      <>\n        {title && (\n          <div className={styles.highlightpanel__content}>\n            <div>{titleElement}</div>\n          </div>\n        )}\n        {children}\n      </>\n    );\n  };\n\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={containerClassName} data-testid={testId} data-analyticsid={AnalyticsId.HighlightPanel}>\n      {renderContent()}\n    </CustomTag>\n  );\n};\n\nexport default HighlightPanel;\n"],"names":[],"mappings":";;;;;;;;;;AAwCA,MAAM,iBAAgD,CAAS,UAAA;AAC7D,QAAM,EAAE,UAAU,QAAQ,SAAS,QAAQ,SAAS,aAAa,OAAO,WAAW,OAAO,kBAAkB,KAAS,IAAA;AACrH,QAAM,aAAa,cAAc;AAEjC,QAAM,qBAAqB;AAAA,IACzB,OAAO;AAAA,IACP,OAAO,mBAAmB,KAAK,EAAE;AAAA,IACjC,WAAW,OAAO,0BAA0B;AAAA,IAC5C;AAAA,EACF;AAEA,QAAM,gBAAgB,MAAuB;AACrC,UAAA,eAAe,SACnB,oBAAC,OAAM,EAAA,QAAO,WAAU,YAAY,iBAAiB,YAAW,UAC7D,UACH,MAAA,CAAA;AAGF,QAAI,SAAS;AACX,YAAM,WAAW,SAAS;AAE1B,aAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,OAAO,sBACpB,UAAA;AAAA,UAAA,OAAO,YAAY,WAAY,oBAAA,UAAA,EAAS,UAAU,SAAS,MAAM,SAAU,CAAA,IAAK,oBAAC,MAAK,EAAA,SAAkB,MAAM,UAAU;AAAA,UACxH,SAAS,aAAa,WAAW,MAAM,oBAAC,SAAI,WAAW,OAAO,+BAA+B,GAAI,UAAa,aAAA,CAAA;AAAA,QAAA,GACjH;AAAA,QACC,qBAAA,OAAA,EAAI,WAAW,OAAO,yBACpB,UAAA;AAAA,UAAS,SAAA,cAAc,WAAW,MAAM,oBAAC,SAAI,WAAW,OAAO,+BAA+B,GAAI,UAAa,aAAA,CAAA;AAAA,UAC/G;AAAA,QAAA,EACH,CAAA;AAAA,MAAA,GACF;AAAA,IAAA;AAIJ,WAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,MACC,SAAA,oBAAC,SAAI,WAAW,OAAO,yBACrB,UAAC,oBAAA,OAAA,EAAK,wBAAa,EACrB,CAAA;AAAA,MAED;AAAA,IAAA,GACH;AAAA,EAEJ;AAEA,QAAM,YAAY;AAGhB,SAAA,oBAAC,WAAU,EAAA,WAAW,oBAAoB,eAAa,QAAQ,oBAAkB,YAAY,gBAC1F,UAAA,cACH,EAAA,CAAA;AAEJ;"}