@helsenorge/designsystem-react 14.0.0-beta.7 → 14.0.0

package/lib/HelpTriggerIcon.js

@@ -3,14 +3,18 @@ import { t as usePseudoClasses } from "./usePseudoClasses.js";
 import { n as mergeRefs, t as isMutableRefObject } from "./refs.js";
 import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
 import { n as getAriaLabelAttributes } from "./accessibility.js";
-import cn from "classnames";
+import classNames from "classnames";
+import { useId } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/HelpTriggerIcon/styles.module.scss";
 var HelpSign = ({ color, weight, size }) => {
 	const isMobile = useIsMobileBreakpoint();
+	const uniqueId = useId();
+	const maskIdNormal = `${uniqueId}-mask-normal`;
+	const maskIdMobile = `${uniqueId}-mask-mobile`;
 	const normalSizeNormalWeight = /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
-			id: "clipCircle",
+			id: uniqueId,
 			clipPathUnits: "userSpaceOnUse",
 			children: /* @__PURE__ */ jsx("path", {
 				fillRule: "evenodd",
@@ -21,7 +25,7 @@ var HelpSign = ({ color, weight, size }) => {
 		/* @__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)"
+			clipPath: `url(#${uniqueId})`
 		}),
 		/* @__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",
@@ -49,7 +53,7 @@ var HelpSign = ({ color, weight, size }) => {
 	] });
 	const xlSizeNormalWeight = /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("mask", {
-			id: "path-1-inside-1_4778_485",
+			id: maskIdNormal,
 			fill: "white",
 			children: /* @__PURE__ */ jsx("path", {
 				fillRule: "evenodd",
@@ -60,7 +64,7 @@ var HelpSign = ({ color, weight, size }) => {
 		/* @__PURE__ */ jsx("path", {
 			d: "M16.0006 0V-2.5C5.79784 -2.5 -2.5 5.79607 -2.5 15.9994H0H2.5C2.5 8.55801 8.55876 2.5 16.0006 2.5V0ZM0 15.9994H-2.5C-2.5 26.2024 5.79759 34.5 16.0006 34.5V32V29.5C8.55901 29.5 2.5 23.441 2.5 15.9994H0ZM16.0006 32V34.5C26.2039 34.5 34.5 26.2022 34.5 15.9994H32H29.5C29.5 23.4412 23.442 29.5 16.0006 29.5V32ZM32 15.9994H34.5C34.5 5.79633 26.2037 -2.5 16.0006 -2.5V0V2.5C23.4422 2.5 29.5 8.55775 29.5 15.9994H32Z",
 			fill: color,
-			mask: "url(#path-1-inside-1_4778_485)"
+			mask: `url(#${maskIdNormal})`
 		}),
 		/* @__PURE__ */ jsx("path", {
 			d: "M17.4163 22.5791C17.346 21.8763 16.7971 21.2926 16.1229 21.2178L15.9768 21.21C15.1652 21.21 14.527 21.9087 14.527 22.7314L14.5345 22.8838C14.6074 23.6343 15.2122 24.2295 15.9768 24.2295L16.1229 24.2217C16.8485 24.1441 17.4235 23.499 17.4238 22.7314L17.4163 22.5791ZM20.8 12.2422C20.7999 9.96839 19.0841 7.77051 15.8775 7.77051C12.6128 7.77074 11.0003 10.2117 11 12.4473L11.0084 12.7139C11.0234 12.9568 11.06 13.1939 11.1143 13.4111L13.4088 13.5801C13.3619 13.3918 13.3316 13.1536 13.3179 12.9258L13.3095 12.6514C13.3097 11.9825 13.5283 11.3114 13.9632 10.8047C14.4018 10.2939 15.0496 9.96302 15.8775 9.96289L16.1763 9.97559C16.8509 10.0367 17.3678 10.3057 17.7272 10.6973L17.8714 10.8721C18.1839 11.2942 18.3369 11.8198 18.3369 12.3564L18.3331 12.5059C18.2951 13.2469 17.9677 13.8808 17.272 14.4082L17.273 14.4092L17.2692 14.4131C17.266 14.4157 17.26 14.4194 17.2533 14.4248C17.2399 14.4357 17.22 14.4522 17.1943 14.4736C17.1425 14.5169 17.0672 14.5812 16.9761 14.6631C16.7936 14.8271 16.5476 15.0619 16.2933 15.3438C15.8449 15.8409 15.4379 16.4338 15.2351 16.9404L15.1611 17.1523C15.0753 17.4427 15.035 17.615 15.014 17.793C14.9926 17.9752 14.9906 18.1713 14.9906 18.5146V19.2705H17.036C17.0332 18.9144 17.0171 18.8806 17.0782 18.4756L17.1081 18.3047C17.1447 18.1284 17.1994 17.9383 17.2702 17.7568C17.3585 17.5304 17.4807 17.301 17.6401 17.1289C17.6424 17.1254 17.6454 17.1217 17.6485 17.1172C17.6585 17.1027 17.6727 17.0824 17.6916 17.0576C17.7294 17.0082 17.7859 16.9393 17.8649 16.8545C18.0232 16.6846 18.2716 16.451 18.6413 16.1826C18.9712 15.9431 19.517 15.3982 19.9787 14.6826C20.4117 14.0113 20.7551 13.215 20.7963 12.4043L20.8 12.2422Z",
@@ -69,7 +73,7 @@ var HelpSign = ({ color, weight, size }) => {
 	] });
 	const xlSizeOnMobileNormalWeight = /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("mask", {
-			id: "path-1-inside-1_4778_1054",
+			id: maskIdMobile,
 			fill: "white",
 			children: /* @__PURE__ */ jsx("path", {
 				fillRule: "evenodd",
@@ -80,7 +84,7 @@ var HelpSign = ({ color, weight, size }) => {
 		/* @__PURE__ */ jsx("path", {
 			d: "M12.0005 0V-2.2C4.16892 -2.2 -2.2 4.16753 -2.2 11.9995H0H2.2C2.2 6.59803 6.59853 2.2 12.0005 2.2V0ZM0 11.9995H-2.2C-2.2 19.8313 4.1687 26.2 12.0005 26.2V24V21.8C6.59875 21.8 2.2 17.4012 2.2 11.9995H0ZM12.0005 24V26.2C19.8325 26.2 26.2 19.8311 26.2 11.9995H24H21.8C21.8 17.4015 17.402 21.8 12.0005 21.8V24ZM24 11.9995H26.2C26.2 4.16775 19.8322 -2.2 12.0005 -2.2V0V2.2C17.4022 2.2 21.8 6.59781 21.8 11.9995H24Z",
 			fill: color,
-			mask: "url(#path-1-inside-1_4778_1054)"
+			mask: `url(#${maskIdMobile})`
 		}),
 		/* @__PURE__ */ jsx("path", {
 			d: "M11.9229 5.28027C14.5275 5.28027 15.96 7.00613 15.96 8.82168C15.9599 10.2243 14.7509 11.5413 14.1916 11.9307C13.6323 12.3201 13.451 12.5998 13.451 12.5998C13.2342 12.8105 13.0943 13.2232 13.0467 13.5256C12.9982 13.8341 13.0174 13.8161 13.0174 14.1596V14.2803H11.0416V13.5256C11.0416 13.0154 11.0469 12.8918 11.1834 12.4486C11.322 11.9989 11.7025 11.4537 12.1115 11.0189C12.5205 10.5842 12.9014 10.2971 12.9014 10.2971C13.4382 9.90771 13.6584 9.44814 13.6584 8.90723C13.6584 8.48881 13.5167 8.08818 13.2342 7.79277C12.953 7.49879 12.5222 7.29941 11.9229 7.29941C10.7307 7.2996 10.1019 8.20752 10.1018 9.12871C10.1018 9.38096 10.137 9.68958 10.1979 9.85879L10.26 10.0322L8.13535 9.88223L8.05098 9.87637L8.02871 9.79551C7.95745 9.54366 7.9209 9.25834 7.9209 8.9752C7.92117 7.20416 9.25715 5.28045 11.9229 5.28027Z",
@@ -148,7 +152,7 @@ const HelpTriggerIconInternal = (props) => {
 		weight
 	});
 	const isButton = htmlMarkup === "button";
-	const iconClasses = cn(styles["help-trigger-icon"], {
+	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}`], className);

package/lib/HelpTriggerIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpTriggerIcon.js","names":["HelpSign: React.FC<HelpSignProps>","HelpTriggerIcon: React.FC<HelpTriggerIconProps>","HelpTriggerIconInternal: React.FC<HelpTriggerIconInternalProps>"],"sources":["../src/components/HelpTriggerIcon/HelpSign.tsx","../src/components/HelpTriggerIcon/HelpTriggerIcon.tsx","../src/components/HelpTriggerIcon/index.ts"],"sourcesContent":["import type React from 'react';\n\nimport type { HelpTriggerWeights, HelpTriggerIconSizes } from '../HelpTriggerIcon';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\n\nexport interface HelpSignProps {\n  color?: string;\n  weight?: HelpTriggerWeights;\n  size?: HelpTriggerIconSizes;\n}\n\nconst HelpSign: React.FC<HelpSignProps> = ({ color, weight, size }: HelpSignProps): React.ReactElement => {\n  const isMobile = useIsMobileBreakpoint();\n\n  const normalSizeNormalWeight = (\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  const normalSizeStrongWeight = (\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  const xlSizeNormalWeight = (\n    <>\n      <mask id=\"path-1-inside-1_4778_485\" fill=\"white\">\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M16.0006 0C7.1783 0 0 7.17704 0 15.9994C0 24.8217 7.1783 32 16.0006 32C24.823 32 32 24.8217 32 15.9994C32 7.17704 24.823 0 16.0006 0Z\"\n        />\n      </mask>\n      <path\n        d=\"M16.0006 0V-2.5C5.79784 -2.5 -2.5 5.79607 -2.5 15.9994H0H2.5C2.5 8.55801 8.55876 2.5 16.0006 2.5V0ZM0 15.9994H-2.5C-2.5 26.2024 5.79759 34.5 16.0006 34.5V32V29.5C8.55901 29.5 2.5 23.441 2.5 15.9994H0ZM16.0006 32V34.5C26.2039 34.5 34.5 26.2022 34.5 15.9994H32H29.5C29.5 23.4412 23.442 29.5 16.0006 29.5V32ZM32 15.9994H34.5C34.5 5.79633 26.2037 -2.5 16.0006 -2.5V0V2.5C23.4422 2.5 29.5 8.55775 29.5 15.9994H32Z\"\n        fill={color}\n        mask=\"url(#path-1-inside-1_4778_485)\"\n      />\n      <path\n        d=\"M17.4163 22.5791C17.346 21.8763 16.7971 21.2926 16.1229 21.2178L15.9768 21.21C15.1652 21.21 14.527 21.9087 14.527 22.7314L14.5345 22.8838C14.6074 23.6343 15.2122 24.2295 15.9768 24.2295L16.1229 24.2217C16.8485 24.1441 17.4235 23.499 17.4238 22.7314L17.4163 22.5791ZM20.8 12.2422C20.7999 9.96839 19.0841 7.77051 15.8775 7.77051C12.6128 7.77074 11.0003 10.2117 11 12.4473L11.0084 12.7139C11.0234 12.9568 11.06 13.1939 11.1143 13.4111L13.4088 13.5801C13.3619 13.3918 13.3316 13.1536 13.3179 12.9258L13.3095 12.6514C13.3097 11.9825 13.5283 11.3114 13.9632 10.8047C14.4018 10.2939 15.0496 9.96302 15.8775 9.96289L16.1763 9.97559C16.8509 10.0367 17.3678 10.3057 17.7272 10.6973L17.8714 10.8721C18.1839 11.2942 18.3369 11.8198 18.3369 12.3564L18.3331 12.5059C18.2951 13.2469 17.9677 13.8808 17.272 14.4082L17.273 14.4092L17.2692 14.4131C17.266 14.4157 17.26 14.4194 17.2533 14.4248C17.2399 14.4357 17.22 14.4522 17.1943 14.4736C17.1425 14.5169 17.0672 14.5812 16.9761 14.6631C16.7936 14.8271 16.5476 15.0619 16.2933 15.3438C15.8449 15.8409 15.4379 16.4338 15.2351 16.9404L15.1611 17.1523C15.0753 17.4427 15.035 17.615 15.014 17.793C14.9926 17.9752 14.9906 18.1713 14.9906 18.5146V19.2705H17.036C17.0332 18.9144 17.0171 18.8806 17.0782 18.4756L17.1081 18.3047C17.1447 18.1284 17.1994 17.9383 17.2702 17.7568C17.3585 17.5304 17.4807 17.301 17.6401 17.1289C17.6424 17.1254 17.6454 17.1217 17.6485 17.1172C17.6585 17.1027 17.6727 17.0824 17.6916 17.0576C17.7294 17.0082 17.7859 16.9393 17.8649 16.8545C18.0232 16.6846 18.2716 16.451 18.6413 16.1826C18.9712 15.9431 19.517 15.3982 19.9787 14.6826C20.4117 14.0113 20.7551 13.215 20.7963 12.4043L20.8 12.2422Z\"\n        fill={color}\n      />\n    </>\n  );\n\n  const xlSizeOnMobileNormalWeight = (\n    <>\n      <mask id=\"path-1-inside-1_4778_1054\" fill=\"white\">\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M12.0005 0C5.38373 0 0 5.38278 0 11.9995C0 18.6163 5.38373 24 12.0005 24C18.6172 24 24 18.6163 24 11.9995C24 5.38278 18.6172 0 12.0005 0Z\"\n        />\n      </mask>\n      <path\n        d=\"M12.0005 0V-2.2C4.16892 -2.2 -2.2 4.16753 -2.2 11.9995H0H2.2C2.2 6.59803 6.59853 2.2 12.0005 2.2V0ZM0 11.9995H-2.2C-2.2 19.8313 4.1687 26.2 12.0005 26.2V24V21.8C6.59875 21.8 2.2 17.4012 2.2 11.9995H0ZM12.0005 24V26.2C19.8325 26.2 26.2 19.8311 26.2 11.9995H24H21.8C21.8 17.4015 17.402 21.8 12.0005 21.8V24ZM24 11.9995H26.2C26.2 4.16775 19.8322 -2.2 12.0005 -2.2V0V2.2C17.4022 2.2 21.8 6.59781 21.8 11.9995H24Z\"\n        fill={color}\n        mask=\"url(#path-1-inside-1_4778_1054)\"\n      />\n      <path\n        d=\"M11.9229 5.28027C14.5275 5.28027 15.96 7.00613 15.96 8.82168C15.9599 10.2243 14.7509 11.5413 14.1916 11.9307C13.6323 12.3201 13.451 12.5998 13.451 12.5998C13.2342 12.8105 13.0943 13.2232 13.0467 13.5256C12.9982 13.8341 13.0174 13.8161 13.0174 14.1596V14.2803H11.0416V13.5256C11.0416 13.0154 11.0469 12.8918 11.1834 12.4486C11.322 11.9989 11.7025 11.4537 12.1115 11.0189C12.5205 10.5842 12.9014 10.2971 12.9014 10.2971C13.4382 9.90771 13.6584 9.44814 13.6584 8.90723C13.6584 8.48881 13.5167 8.08818 13.2342 7.79277C12.953 7.49879 12.5222 7.29941 11.9229 7.29941C10.7307 7.2996 10.1019 8.20752 10.1018 9.12871C10.1018 9.38096 10.137 9.68958 10.1979 9.85879L10.26 10.0322L8.13535 9.88223L8.05098 9.87637L8.02871 9.79551C7.95745 9.54366 7.9209 9.25834 7.9209 8.9752C7.92117 7.20416 9.25715 5.28045 11.9229 5.28027Z\"\n        fill={color}\n      />\n      <path\n        d=\"M12.0002 15.3596C12.7231 15.3596 13.3197 15.9718 13.3197 16.6885C13.3195 17.407 12.7229 17.9997 12.0002 17.9998C11.2583 17.9998 10.6797 17.407 10.6795 16.6885C10.6795 15.9717 11.2581 15.3596 12.0002 15.3596Z\"\n        fill={color}\n      />\n    </>\n  );\n\n  function getPaths(): React.ReactNode {\n    if (size === 'xlarge') {\n      if (weight === 'normal') {\n        return isMobile ? xlSizeOnMobileNormalWeight : xlSizeNormalWeight;\n      } else if (weight === 'strong') {\n        return normalSizeStrongWeight;\n      }\n    } else {\n      if (weight === 'normal') {\n        return normalSizeNormalWeight;\n      } else if (weight === 'strong') {\n        return normalSizeStrongWeight;\n      }\n    }\n    return null;\n  }\n  const paths = getPaths();\n\n  function getSizesAndViewbox(): { widthAndHeight: number; viewBox: string } {\n    if (size === 'xlarge') {\n      if (isMobile) {\n        return { widthAndHeight: 24, viewBox: '0 0 24 24' };\n      }\n      return { widthAndHeight: 32, viewBox: '0 0 32 32' };\n    }\n    return { widthAndHeight: 20, viewBox: '0 0 20 20' };\n  }\n  const { widthAndHeight, viewBox } = getSizesAndViewbox();\n\n  return (\n    <svg\n      fill=\"none\"\n      width={widthAndHeight}\n      height={widthAndHeight}\n      overflow=\"visible\"\n      role={'presentation'}\n      viewBox={viewBox}\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      {paths}\n    </svg>\n  );\n};\n\nexport default HelpSign;\n","import classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, 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 extends Pick<\n  React.InputHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'\n> {\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  /** Adds custom classes to the element. */\n  className?: string;\n  /**\n   * Size of the Icon. Default: medium.\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  /** Ref passed to the component */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\ninterface HelpTriggerIconInternalProps extends HelpTriggerIconProps {\n  /**\n   * Sets the hover styling of the trigger. Intended for use when wrapped by a parent button.\n   */\n  isHovered?: boolean;\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 hover ? 'var(--color-help-graphics-verydark)' : 'var(--color-help-graphics-normal)';\n  }\n};\n\nconst HelpTriggerIcon: React.FC<HelpTriggerIconProps> = props => {\n  return <HelpTriggerIconInternal {...props} />;\n};\n\nexport const HelpTriggerIconInternal: React.FC<HelpTriggerIconInternalProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledById,\n    className,\n    htmlMarkup = 'button',\n    isHovered = false,\n    size = 'medium',\n    testId,\n    weight = 'normal',\n    ref,\n    ...buttonRest\n  } = props;\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n  const { refObject, isHovered: interalIsHovered } = usePseudoClasses<HTMLButtonElement>(isMutableRefObject(ref) ? ref : null);\n  const helpIcon = <HelpSign color={getIconColor(interalIsHovered || isHovered, weight)} size={size} 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    className\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([refObject, 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\nHelpTriggerIcon.displayName = 'HelpTriggerIcon';\nHelpTriggerIconInternal.displayName = 'HelpTriggerIconInternal';\n\nexport default HelpTriggerIcon;\n","import HelpTriggerIcon from './HelpTriggerIcon';\nexport * from './HelpTriggerIcon';\nexport default HelpTriggerIcon;\n"],"mappings":"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"}
+{"version":3,"file":"HelpTriggerIcon.js","names":["HelpSign: React.FC<HelpSignProps>","HelpTriggerIcon: React.FC<HelpTriggerIconProps>","HelpTriggerIconInternal: React.FC<HelpTriggerIconInternalProps>"],"sources":["../src/components/HelpTriggerIcon/HelpSign.tsx","../src/components/HelpTriggerIcon/HelpTriggerIcon.tsx","../src/components/HelpTriggerIcon/index.ts"],"sourcesContent":["import { useId } from 'react';\n\nimport type { HelpTriggerWeights, HelpTriggerIconSizes } from '../HelpTriggerIcon';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\n\nexport interface HelpSignProps {\n  color?: string;\n  weight?: HelpTriggerWeights;\n  size?: HelpTriggerIconSizes;\n}\n\nconst HelpSign: React.FC<HelpSignProps> = ({ color, weight, size }: HelpSignProps): React.ReactElement => {\n  const isMobile = useIsMobileBreakpoint();\n  const uniqueId = useId();\n  const maskIdNormal = `${uniqueId}-mask-normal`;\n  const maskIdMobile = `${uniqueId}-mask-mobile`;\n\n  const normalSizeNormalWeight = (\n    <>\n      <defs>\n        <clipPath id={uniqueId} 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(#${uniqueId})`}\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  const normalSizeStrongWeight = (\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  const xlSizeNormalWeight = (\n    <>\n      <mask id={maskIdNormal} fill=\"white\">\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M16.0006 0C7.1783 0 0 7.17704 0 15.9994C0 24.8217 7.1783 32 16.0006 32C24.823 32 32 24.8217 32 15.9994C32 7.17704 24.823 0 16.0006 0Z\"\n        />\n      </mask>\n      <path\n        d=\"M16.0006 0V-2.5C5.79784 -2.5 -2.5 5.79607 -2.5 15.9994H0H2.5C2.5 8.55801 8.55876 2.5 16.0006 2.5V0ZM0 15.9994H-2.5C-2.5 26.2024 5.79759 34.5 16.0006 34.5V32V29.5C8.55901 29.5 2.5 23.441 2.5 15.9994H0ZM16.0006 32V34.5C26.2039 34.5 34.5 26.2022 34.5 15.9994H32H29.5C29.5 23.4412 23.442 29.5 16.0006 29.5V32ZM32 15.9994H34.5C34.5 5.79633 26.2037 -2.5 16.0006 -2.5V0V2.5C23.4422 2.5 29.5 8.55775 29.5 15.9994H32Z\"\n        fill={color}\n        mask={`url(#${maskIdNormal})`}\n      />\n      <path\n        d=\"M17.4163 22.5791C17.346 21.8763 16.7971 21.2926 16.1229 21.2178L15.9768 21.21C15.1652 21.21 14.527 21.9087 14.527 22.7314L14.5345 22.8838C14.6074 23.6343 15.2122 24.2295 15.9768 24.2295L16.1229 24.2217C16.8485 24.1441 17.4235 23.499 17.4238 22.7314L17.4163 22.5791ZM20.8 12.2422C20.7999 9.96839 19.0841 7.77051 15.8775 7.77051C12.6128 7.77074 11.0003 10.2117 11 12.4473L11.0084 12.7139C11.0234 12.9568 11.06 13.1939 11.1143 13.4111L13.4088 13.5801C13.3619 13.3918 13.3316 13.1536 13.3179 12.9258L13.3095 12.6514C13.3097 11.9825 13.5283 11.3114 13.9632 10.8047C14.4018 10.2939 15.0496 9.96302 15.8775 9.96289L16.1763 9.97559C16.8509 10.0367 17.3678 10.3057 17.7272 10.6973L17.8714 10.8721C18.1839 11.2942 18.3369 11.8198 18.3369 12.3564L18.3331 12.5059C18.2951 13.2469 17.9677 13.8808 17.272 14.4082L17.273 14.4092L17.2692 14.4131C17.266 14.4157 17.26 14.4194 17.2533 14.4248C17.2399 14.4357 17.22 14.4522 17.1943 14.4736C17.1425 14.5169 17.0672 14.5812 16.9761 14.6631C16.7936 14.8271 16.5476 15.0619 16.2933 15.3438C15.8449 15.8409 15.4379 16.4338 15.2351 16.9404L15.1611 17.1523C15.0753 17.4427 15.035 17.615 15.014 17.793C14.9926 17.9752 14.9906 18.1713 14.9906 18.5146V19.2705H17.036C17.0332 18.9144 17.0171 18.8806 17.0782 18.4756L17.1081 18.3047C17.1447 18.1284 17.1994 17.9383 17.2702 17.7568C17.3585 17.5304 17.4807 17.301 17.6401 17.1289C17.6424 17.1254 17.6454 17.1217 17.6485 17.1172C17.6585 17.1027 17.6727 17.0824 17.6916 17.0576C17.7294 17.0082 17.7859 16.9393 17.8649 16.8545C18.0232 16.6846 18.2716 16.451 18.6413 16.1826C18.9712 15.9431 19.517 15.3982 19.9787 14.6826C20.4117 14.0113 20.7551 13.215 20.7963 12.4043L20.8 12.2422Z\"\n        fill={color}\n      />\n    </>\n  );\n\n  const xlSizeOnMobileNormalWeight = (\n    <>\n      <mask id={maskIdMobile} fill=\"white\">\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M12.0005 0C5.38373 0 0 5.38278 0 11.9995C0 18.6163 5.38373 24 12.0005 24C18.6172 24 24 18.6163 24 11.9995C24 5.38278 18.6172 0 12.0005 0Z\"\n        />\n      </mask>\n      <path\n        d=\"M12.0005 0V-2.2C4.16892 -2.2 -2.2 4.16753 -2.2 11.9995H0H2.2C2.2 6.59803 6.59853 2.2 12.0005 2.2V0ZM0 11.9995H-2.2C-2.2 19.8313 4.1687 26.2 12.0005 26.2V24V21.8C6.59875 21.8 2.2 17.4012 2.2 11.9995H0ZM12.0005 24V26.2C19.8325 26.2 26.2 19.8311 26.2 11.9995H24H21.8C21.8 17.4015 17.402 21.8 12.0005 21.8V24ZM24 11.9995H26.2C26.2 4.16775 19.8322 -2.2 12.0005 -2.2V0V2.2C17.4022 2.2 21.8 6.59781 21.8 11.9995H24Z\"\n        fill={color}\n        mask={`url(#${maskIdMobile})`}\n      />\n      <path\n        d=\"M11.9229 5.28027C14.5275 5.28027 15.96 7.00613 15.96 8.82168C15.9599 10.2243 14.7509 11.5413 14.1916 11.9307C13.6323 12.3201 13.451 12.5998 13.451 12.5998C13.2342 12.8105 13.0943 13.2232 13.0467 13.5256C12.9982 13.8341 13.0174 13.8161 13.0174 14.1596V14.2803H11.0416V13.5256C11.0416 13.0154 11.0469 12.8918 11.1834 12.4486C11.322 11.9989 11.7025 11.4537 12.1115 11.0189C12.5205 10.5842 12.9014 10.2971 12.9014 10.2971C13.4382 9.90771 13.6584 9.44814 13.6584 8.90723C13.6584 8.48881 13.5167 8.08818 13.2342 7.79277C12.953 7.49879 12.5222 7.29941 11.9229 7.29941C10.7307 7.2996 10.1019 8.20752 10.1018 9.12871C10.1018 9.38096 10.137 9.68958 10.1979 9.85879L10.26 10.0322L8.13535 9.88223L8.05098 9.87637L8.02871 9.79551C7.95745 9.54366 7.9209 9.25834 7.9209 8.9752C7.92117 7.20416 9.25715 5.28045 11.9229 5.28027Z\"\n        fill={color}\n      />\n      <path\n        d=\"M12.0002 15.3596C12.7231 15.3596 13.3197 15.9718 13.3197 16.6885C13.3195 17.407 12.7229 17.9997 12.0002 17.9998C11.2583 17.9998 10.6797 17.407 10.6795 16.6885C10.6795 15.9717 11.2581 15.3596 12.0002 15.3596Z\"\n        fill={color}\n      />\n    </>\n  );\n\n  function getPaths(): React.ReactNode {\n    if (size === 'xlarge') {\n      if (weight === 'normal') {\n        return isMobile ? xlSizeOnMobileNormalWeight : xlSizeNormalWeight;\n      } else if (weight === 'strong') {\n        return normalSizeStrongWeight;\n      }\n    } else {\n      if (weight === 'normal') {\n        return normalSizeNormalWeight;\n      } else if (weight === 'strong') {\n        return normalSizeStrongWeight;\n      }\n    }\n    return null;\n  }\n  const paths = getPaths();\n\n  function getSizesAndViewbox(): { widthAndHeight: number; viewBox: string } {\n    if (size === 'xlarge') {\n      if (isMobile) {\n        return { widthAndHeight: 24, viewBox: '0 0 24 24' };\n      }\n      return { widthAndHeight: 32, viewBox: '0 0 32 32' };\n    }\n    return { widthAndHeight: 20, viewBox: '0 0 20 20' };\n  }\n  const { widthAndHeight, viewBox } = getSizesAndViewbox();\n\n  return (\n    <svg\n      fill=\"none\"\n      width={widthAndHeight}\n      height={widthAndHeight}\n      overflow=\"visible\"\n      role={'presentation'}\n      viewBox={viewBox}\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      {paths}\n    </svg>\n  );\n};\n\nexport default HelpSign;\n","import classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, 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 extends Pick<\n  React.InputHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'\n> {\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  /** Adds custom classes to the element. */\n  className?: string;\n  /**\n   * Size of the Icon. Default: medium.\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  /** Ref passed to the component */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\ninterface HelpTriggerIconInternalProps extends HelpTriggerIconProps {\n  /**\n   * Sets the hover styling of the trigger. Intended for use when wrapped by a parent button.\n   */\n  isHovered?: boolean;\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 hover ? 'var(--color-help-graphics-verydark)' : 'var(--color-help-graphics-normal)';\n  }\n};\n\nconst HelpTriggerIcon: React.FC<HelpTriggerIconProps> = props => {\n  return <HelpTriggerIconInternal {...props} />;\n};\n\nexport const HelpTriggerIconInternal: React.FC<HelpTriggerIconInternalProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledById,\n    className,\n    htmlMarkup = 'button',\n    isHovered = false,\n    size = 'medium',\n    testId,\n    weight = 'normal',\n    ref,\n    ...buttonRest\n  } = props;\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n  const { refObject, isHovered: interalIsHovered } = usePseudoClasses<HTMLButtonElement>(isMutableRefObject(ref) ? ref : null);\n  const helpIcon = <HelpSign color={getIconColor(interalIsHovered || isHovered, weight)} size={size} 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    className\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([refObject, 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\nHelpTriggerIcon.displayName = 'HelpTriggerIcon';\nHelpTriggerIconInternal.displayName = 'HelpTriggerIconInternal';\n\nexport default HelpTriggerIcon;\n","import HelpTriggerIcon from './HelpTriggerIcon';\nexport * from './HelpTriggerIcon';\nexport default HelpTriggerIcon;\n"],"mappings":"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"}

package/lib/HelpTriggerStandalone.js

@@ -4,7 +4,7 @@ import { n as mergeRefs, t as isMutableRefObject } from "./refs.js";
 import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
 import { n as getAriaLabelAttributes } from "./accessibility.js";
 import { n as HelpTriggerIconInternal } from "./HelpTriggerIcon.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/HelpTriggerStandalone/styles.module.scss";
 var HelpTriggerStandalone = (props) => {
@@ -14,7 +14,7 @@ var HelpTriggerStandalone = (props) => {
 		label: ariaLabel,
 		id: ariaLabelledById
 	});
-	const helpTriggerStandaloneStyles = cn(styles["help-trigger-standalone"], className);
+	const helpTriggerStandaloneStyles = classNames(styles["help-trigger-standalone"], className);
 	const { refObject, isHovered } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
 	return /* @__PURE__ */ jsxs("button", {
 		"aria-label": ariaLabel,

package/lib/HelpTriggerStandalone.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpTriggerStandalone.js","names":["HelpTriggerStandalone: React.FC<HelpTriggerStandaloneProps>"],"sources":["../src/components/HelpTriggerStandalone/HelpTriggerStandalone.tsx","../src/components/HelpTriggerStandalone/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { HelpTriggerWeights } from '../HelpTriggerIcon';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { HelpTriggerIconInternal } from '../HelpTriggerIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTriggerStandaloneProps extends Pick<\n  React.InputHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'\n> {\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  /** Ref passed to the component */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst HelpTriggerStandalone: React.FC<HelpTriggerStandaloneProps> = props => {\n  const { ariaLabel, ariaLabelledById, children, className, testId, weight = 'normal', ref, ...rest } = props;\n  const isMobile = useIsMobileBreakpoint();\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n  const helpTriggerStandaloneStyles = classNames(styles['help-trigger-standalone'], className);\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>(isMutableRefObject(ref) ? ref : null);\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={mergeRefs([refObject, ref])}\n      {...ariaLabelAttributes}\n      {...rest}\n    >\n      <HelpTriggerIconInternal weight={weight} size={isMobile ? 'medium' : 'large'} htmlMarkup={'span'} isHovered={isHovered} />\n      <span className={styles['help-trigger-standalone__children']}>{children}</span>\n    </button>\n  );\n};\n\nHelpTriggerStandalone.displayName = 'HelpTriggerStandalone';\n\nexport default HelpTriggerStandalone;\n","import HelpTriggerStandalone from './HelpTriggerStandalone';\nexport * from './HelpTriggerStandalone';\nexport default HelpTriggerStandalone;\n"],"mappings":";;;;;;;;;AA2CA,IAAMA,yBAA8D,UAAS;CAC3E,MAAM,EAAE,WAAW,kBAAkB,UAAU,WAAW,QAAQ,SAAS,UAAU,KAAK,GAAG,SAAS;CACtG,MAAM,WAAW,uBAAuB;CACxC,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAC9F,MAAM,8BAA8B,GAAW,OAAO,4BAA4B,UAAU;CAC5F,MAAM,EAAE,WAAW,cAAc,iBAAoC,mBAAmB,IAAI,GAAG,MAAM,KAAK;AAE1G,QACE,qBAAC,UAAA;EACC,cAAY;EACZ,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,KAAK,UAAU,CAAC,WAAW,IAAI,CAAC;EAChC,GAAI;EACJ,GAAI;aAEJ,oBAAC,yBAAA;GAAgC;GAAQ,MAAM,WAAW,WAAW;GAAS,YAAY;GAAmB;IAAa,EAC1H,oBAAC,QAAA;GAAK,WAAW,OAAO;GAAuC;IAAgB,CAAA;GACxE;;AAIb,sBAAsB,cAAc;ACjEpC,IAAA,kCDmEe"}
+{"version":3,"file":"HelpTriggerStandalone.js","names":["HelpTriggerStandalone: React.FC<HelpTriggerStandaloneProps>"],"sources":["../src/components/HelpTriggerStandalone/HelpTriggerStandalone.tsx","../src/components/HelpTriggerStandalone/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { HelpTriggerWeights } from '../HelpTriggerIcon';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { HelpTriggerIconInternal } from '../HelpTriggerIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTriggerStandaloneProps extends Pick<\n  React.InputHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'\n> {\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  /** Ref passed to the component */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst HelpTriggerStandalone: React.FC<HelpTriggerStandaloneProps> = props => {\n  const { ariaLabel, ariaLabelledById, children, className, testId, weight = 'normal', ref, ...rest } = props;\n  const isMobile = useIsMobileBreakpoint();\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n  const helpTriggerStandaloneStyles = classNames(styles['help-trigger-standalone'], className);\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>(isMutableRefObject(ref) ? ref : null);\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={mergeRefs([refObject, ref])}\n      {...ariaLabelAttributes}\n      {...rest}\n    >\n      <HelpTriggerIconInternal weight={weight} size={isMobile ? 'medium' : 'large'} htmlMarkup={'span'} isHovered={isHovered} />\n      <span className={styles['help-trigger-standalone__children']}>{children}</span>\n    </button>\n  );\n};\n\nHelpTriggerStandalone.displayName = 'HelpTriggerStandalone';\n\nexport default HelpTriggerStandalone;\n","import HelpTriggerStandalone from './HelpTriggerStandalone';\nexport * from './HelpTriggerStandalone';\nexport default HelpTriggerStandalone;\n"],"mappings":";;;;;;;;;AA2CA,IAAMA,yBAA8D,UAAS;CAC3E,MAAM,EAAE,WAAW,kBAAkB,UAAU,WAAW,QAAQ,SAAS,UAAU,KAAK,GAAG,SAAS;CACtG,MAAM,WAAW,uBAAuB;CACxC,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAC9F,MAAM,8BAA8B,WAAW,OAAO,4BAA4B,UAAU;CAC5F,MAAM,EAAE,WAAW,cAAc,iBAAoC,mBAAmB,IAAI,GAAG,MAAM,KAAK;AAE1G,QACE,qBAAC,UAAA;EACC,cAAY;EACZ,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,KAAK,UAAU,CAAC,WAAW,IAAI,CAAC;EAChC,GAAI;EACJ,GAAI;aAEJ,oBAAC,yBAAA;GAAgC;GAAQ,MAAM,WAAW,WAAW;GAAS,YAAY;GAAmB;IAAa,EAC1H,oBAAC,QAAA;GAAK,WAAW,OAAO;GAAuC;IAAgB,CAAA;GACxE;;AAIb,sBAAsB,cAAc;ACjEpC,IAAA,kCDmEe"}

package/lib/HighlightPanel.js

@@ -3,13 +3,13 @@ import { t as Icon_default } from "./Icon.js";
 import { t as LazyIcon_default } from "./LazyIcon.js";
 import { n as useBreakpoint, t as Breakpoint } from "./useBreakpoint.js";
 import { t as Title_default } from "./Title2.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/HighlightPanel/styles.module.scss";
 var HighlightPanel = (props) => {
 	const { children, color = "white", testId, svgIcon, htmlMarkup = "div", className, variant = "normal", title, titleHtmlMarkup = "h2" } = props;
 	const breakpoint = useBreakpoint();
-	const containerClassName = cn(styles.highlightpanel, styles[`highlightpanel--${color}`], svgIcon && styles["highlightpanel--has-icon"], className, { [styles["highlightpanel--compact"]]: variant === "compact" });
+	const containerClassName = classNames(styles.highlightpanel, styles[`highlightpanel--${color}`], svgIcon && styles["highlightpanel--has-icon"], className, { [styles["highlightpanel--compact"]]: variant === "compact" });
 	const renderContent = () => {
 		const titleElement = title && /* @__PURE__ */ jsx(Title_default, {
 			testId: "titleId",
@@ -20,7 +20,7 @@ var HighlightPanel = (props) => {
 		if (svgIcon) {
 			const iconSize = IconSize.Small;
 			if (variant === "compact") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-				className: cn(styles.highlightpanel__icon, styles["highlightpanel__icon--compact"]),
+				className: classNames(styles.highlightpanel__icon, styles["highlightpanel__icon--compact"]),
 				children: typeof svgIcon === "string" ? /* @__PURE__ */ jsx(LazyIcon_default, {
 					iconName: svgIcon,
 					size: iconSize

package/lib/HighlightPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightPanel.js","names":["HighlightPanel: React.FC<HighlightPanelProps>"],"sources":["../src/components/HighlightPanel/HighlightPanel.tsx","../src/components/HighlightPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { TitleTags } from '../Title';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport Icon, { IconSize } from '../Icon';\nimport LazyIcon from '../LazyIcon';\nimport Title 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 type HighlightPanelVariants = 'normal' | 'compact';\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  /** Uses the compact styling if set to compact */\n  variant?: HighlightPanelVariants;\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 {\n    children,\n    color = 'white',\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    variant = 'normal',\n    title,\n    titleHtmlMarkup = 'h2',\n  } = 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    { [styles['highlightpanel--compact']]: variant === 'compact' }\n  );\n\n  const renderContent = (): React.ReactNode => {\n    const titleElement = title && (\n      <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance={variant === 'compact' ? 'title6' : 'title4'}>\n        {title}\n      </Title>\n    );\n\n    if (svgIcon) {\n      const iconSize = IconSize.Small;\n\n      if (variant === 'compact') {\n        return (\n          <>\n            <div className={classNames(styles.highlightpanel__icon, styles['highlightpanel__icon--compact'])}>\n              {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            </div>\n            <div className={(styles.highlightpanel__content, styles['highlightpanel__content--compact'])}>\n              {title && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n              <div className={styles['highlightpanel__content__children--compact']}>{children}</div>\n            </div>\n          </>\n        );\n      }\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","import HighlightPanel from './HighlightPanel';\nexport * from './HighlightPanel';\nexport default HighlightPanel;\n"],"mappings":";;;;;;;;AA6CA,IAAMA,kBAAgD,UAAS;CAC7D,MAAM,EACJ,UACA,QAAQ,SACR,QACA,SACA,aAAa,OACb,WACA,UAAU,UACV,OACA,kBAAkB,SAChB;CACJ,MAAM,aAAa,eAAe;CAElC,MAAM,qBAAqB,GACzB,OAAO,gBACP,OAAO,mBAAmB,UAC1B,WAAW,OAAO,6BAClB,WACA,GAAG,OAAO,6BAA6B,YAAY,WAAW,CAC/D;CAED,MAAM,sBAAuC;EAC3C,MAAM,eAAe,SACnB,oBAAC,eAAA;GAAM,QAAO;GAAU,YAAY;GAAiB,YAAY,YAAY,YAAY,WAAW;aACjG;IACK;AAGV,MAAI,SAAS;GACX,MAAM,WAAW,SAAS;AAE1B,OAAI,YAAY,UACd,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAA;IAAI,WAAW,GAAW,OAAO,sBAAsB,OAAO,iCAAiC;cAC7F,OAAO,YAAY,WAAW,oBAAC,kBAAA;KAAS,UAAU;KAAS,MAAM;MAAY,GAAG,oBAAC,cAAA;KAAc;KAAS,MAAM;MAAY;KACvH,EACN,qBAAC,OAAA;IAAI,YAAY,OAAO,yBAAyB,OAAO;eACrD,SAAS,oBAAC,OAAA;KAAI,WAAW,OAAO;eAAmC;MAAmB,EACvF,oBAAC,OAAA;KAAI,WAAW,OAAO;KAAgD;MAAe,CAAA;KAClF,CAAA,EAAA,CACL;AAIP,UACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAA;IAAI,WAAW,OAAO;eACpB,OAAO,YAAY,WAAW,oBAAC,kBAAA;KAAS,UAAU;KAAS,MAAM;MAAY,GAAG,oBAAC,cAAA;KAAc;KAAS,MAAM;MAAY,EAC1H,SAAS,aAAa,WAAW,MAAM,oBAAC,OAAA;KAAI,WAAW,OAAO;eAAmC;MAAmB,CAAA;KACjH,EACN,qBAAC,OAAA;IAAI,WAAW,OAAO;eACpB,SAAS,cAAc,WAAW,MAAM,oBAAC,OAAA;KAAI,WAAW,OAAO;eAAmC;MAAmB,EACrH,SAAA;KACG,CAAA,EAAA,CACL;;AAIP,SACE,qBAAA,UAAA,EAAA,UAAA,CACG,SACC,oBAAC,OAAA;GAAI,WAAW,OAAO;aACrB,oBAAC,OAAA,EAAA,UAAK,cAAA,CAAmB;IACrB,EAEP,SAAA,EAAA,CACA;;AAMP,QACE,oBAHgB,YAGf;EAAU,WAAW;EAAoB,eAAa;EAAQ,oBAAkB,YAAY;YAC1F,eAAe;GACN;;ACxHhB,IAAA,2BD4He"}
+{"version":3,"file":"HighlightPanel.js","names":["HighlightPanel: React.FC<HighlightPanelProps>"],"sources":["../src/components/HighlightPanel/HighlightPanel.tsx","../src/components/HighlightPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { TitleTags } from '../Title';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport Icon, { IconSize } from '../Icon';\nimport LazyIcon from '../LazyIcon';\nimport Title 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 type HighlightPanelVariants = 'normal' | 'compact';\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  /** Uses the compact styling if set to compact */\n  variant?: HighlightPanelVariants;\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 {\n    children,\n    color = 'white',\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    variant = 'normal',\n    title,\n    titleHtmlMarkup = 'h2',\n  } = 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    { [styles['highlightpanel--compact']]: variant === 'compact' }\n  );\n\n  const renderContent = (): React.ReactNode => {\n    const titleElement = title && (\n      <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance={variant === 'compact' ? 'title6' : 'title4'}>\n        {title}\n      </Title>\n    );\n\n    if (svgIcon) {\n      const iconSize = IconSize.Small;\n\n      if (variant === 'compact') {\n        return (\n          <>\n            <div className={classNames(styles.highlightpanel__icon, styles['highlightpanel__icon--compact'])}>\n              {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            </div>\n            <div className={(styles.highlightpanel__content, styles['highlightpanel__content--compact'])}>\n              {title && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n              <div className={styles['highlightpanel__content__children--compact']}>{children}</div>\n            </div>\n          </>\n        );\n      }\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","import HighlightPanel from './HighlightPanel';\nexport * from './HighlightPanel';\nexport default HighlightPanel;\n"],"mappings":";;;;;;;;AA6CA,IAAMA,kBAAgD,UAAS;CAC7D,MAAM,EACJ,UACA,QAAQ,SACR,QACA,SACA,aAAa,OACb,WACA,UAAU,UACV,OACA,kBAAkB,SAChB;CACJ,MAAM,aAAa,eAAe;CAElC,MAAM,qBAAqB,WACzB,OAAO,gBACP,OAAO,mBAAmB,UAC1B,WAAW,OAAO,6BAClB,WACA,GAAG,OAAO,6BAA6B,YAAY,WAAW,CAC/D;CAED,MAAM,sBAAuC;EAC3C,MAAM,eAAe,SACnB,oBAAC,eAAA;GAAM,QAAO;GAAU,YAAY;GAAiB,YAAY,YAAY,YAAY,WAAW;aACjG;IACK;AAGV,MAAI,SAAS;GACX,MAAM,WAAW,SAAS;AAE1B,OAAI,YAAY,UACd,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAA;IAAI,WAAW,WAAW,OAAO,sBAAsB,OAAO,iCAAiC;cAC7F,OAAO,YAAY,WAAW,oBAAC,kBAAA;KAAS,UAAU;KAAS,MAAM;MAAY,GAAG,oBAAC,cAAA;KAAc;KAAS,MAAM;MAAY;KACvH,EACN,qBAAC,OAAA;IAAI,YAAY,OAAO,yBAAyB,OAAO;eACrD,SAAS,oBAAC,OAAA;KAAI,WAAW,OAAO;eAAmC;MAAmB,EACvF,oBAAC,OAAA;KAAI,WAAW,OAAO;KAAgD;MAAe,CAAA;KAClF,CAAA,EAAA,CACL;AAIP,UACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAA;IAAI,WAAW,OAAO;eACpB,OAAO,YAAY,WAAW,oBAAC,kBAAA;KAAS,UAAU;KAAS,MAAM;MAAY,GAAG,oBAAC,cAAA;KAAc;KAAS,MAAM;MAAY,EAC1H,SAAS,aAAa,WAAW,MAAM,oBAAC,OAAA;KAAI,WAAW,OAAO;eAAmC;MAAmB,CAAA;KACjH,EACN,qBAAC,OAAA;IAAI,WAAW,OAAO;eACpB,SAAS,cAAc,WAAW,MAAM,oBAAC,OAAA;KAAI,WAAW,OAAO;eAAmC;MAAmB,EACrH,SAAA;KACG,CAAA,EAAA,CACL;;AAIP,SACE,qBAAA,UAAA,EAAA,UAAA,CACG,SACC,oBAAC,OAAA;GAAI,WAAW,OAAO;aACrB,oBAAC,OAAA,EAAA,UAAK,cAAA,CAAmB;IACrB,EAEP,SAAA,EAAA,CACA;;AAMP,QACE,oBAHgB,YAGf;EAAU,WAAW;EAAoB,eAAa;EAAQ,oBAAkB,YAAY;YAC1F,eAAe;GACN;;ACxHhB,IAAA,2BD4He"}

package/lib/HorizontalScroll.js

@@ -1,7 +1,7 @@
 import { t as useIsVisible } from "./useIsVisible.js";
 import { t as useSize } from "./useSize.js";
 import { t as useStopPropagation } from "./usestopPropagation.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/HorizontalScroll/styles.module.scss";
@@ -20,7 +20,7 @@ const HorizontalScroll = ({ children, childWidth, testId, ...rest }) => {
 	}, true);
 	const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};
 	const isOverflowing = childWidth > viewPortWidth;
-	const viewportClasses = cn(styles.horizontalscroll__viewport, isOverflowing && styles["horizontalscroll__viewport--overflow"]);
+	const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles["horizontalscroll__viewport--overflow"]);
 	const hasAriaAttributes = rest["aria-label"] || rest["aria-labelledby"];
 	useStopPropagation(viewportRef, ["touchstart", "touchmove"]);
 	return /* @__PURE__ */ jsx("div", {
@@ -33,8 +33,8 @@ const HorizontalScroll = ({ children, childWidth, testId, ...rest }) => {
 			role: hasAriaAttributes ? "region" : void 0,
 			...rest,
 			children: [
-				/* @__PURE__ */ jsx("div", { className: cn(styles.horizontalscroll__indicator, styles["horizontalscroll__indicator--left"], !leftIsVisible && styles["horizontalscroll__indicator--visible"]) }),
-				/* @__PURE__ */ jsx("div", { className: cn(styles.horizontalscroll__indicator, styles["horizontalscroll__indicator--right"], !rightIsVisible && styles["horizontalscroll__indicator--visible"]) }),
+				/* @__PURE__ */ jsx("div", { className: classNames(styles.horizontalscroll__indicator, styles["horizontalscroll__indicator--left"], !leftIsVisible && styles["horizontalscroll__indicator--visible"]) }),
+				/* @__PURE__ */ jsx("div", { className: classNames(styles.horizontalscroll__indicator, styles["horizontalscroll__indicator--right"], !rightIsVisible && styles["horizontalscroll__indicator--visible"]) }),
 				/* @__PURE__ */ jsx("div", { ref: leftRef }),
 				children,
 				/* @__PURE__ */ jsx("div", { ref: rightRef })

package/lib/HorizontalScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.js","names":["HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes>"],"sources":["../src/components/HorizontalScroll/HorizontalScroll.tsx","../src/components/HorizontalScroll/index.ts"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AriaLabelAttributes } from '../../utils/accessibility';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport { useStopPropagation } from '../../hooks/usestopPropagation';\n\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  children?: React.ReactNode;\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes> = ({ children, childWidth, testId, ...rest }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n  const hasAriaAttributes = rest['aria-label'] || rest['aria-labelledby'];\n\n  useStopPropagation(viewportRef, ['touchstart', 'touchmove']);\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      {/* viewport-diven må ta tabIndex for å løse et annet UU-problem, at div med overflow: scroll må kunne navigeres med keyboard. */}\n      {/* Enten aria-label eller aria-labelledbyid må settes */}\n      <div\n        className={viewportClasses}\n        ref={viewportRef}\n        tabIndex={hasAriaAttributes ? 0 : undefined}\n        role={hasAriaAttributes ? 'region' : undefined}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n","import HorizontalScroll from './HorizontalScroll';\nexport * from './HorizontalScroll';\nexport default HorizontalScroll;\n"],"mappings":";;;;;;;AAaA,IAAM,qBAAqB;AAY3B,MAAaA,oBAA2E,EAAE,UAAU,YAAY,QAAQ,GAAG,WAAW;CACpI,MAAM,cAAc,OAAuB,KAAK;CAChD,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,gBAAgB,aAAa,SAAS,GAAG;EAAE,MAAM,aAAa;EAAS,YAAY;EAAoB,EAAE,KAAK;CACpH,MAAM,iBAAiB,aAAa,UAAU,GAAG;EAAE,MAAM,aAAa;EAAS,YAAY;EAAoB,EAAE,KAAK;CACtH,MAAM,EAAE,OAAO,gBAAgB,MAAM,QAAQ,YAAY,IAAI,EAAE;CAE/D,MAAM,gBAAgB,aAAa;CACnC,MAAM,kBAAkB,GAAW,OAAO,4BAA4B,iBAAiB,OAAO,wCAAwC;CACtI,MAAM,oBAAoB,KAAK,iBAAiB,KAAK;AAErD,oBAAmB,aAAa,CAAC,cAAc,YAAY,CAAC;AAE5D,QACE,oBAAC,OAAA;EAAI,WAAW,OAAO;EAAkB,eAAa;YAGpD,qBAAC,OAAA;GACC,WAAW;GACX,KAAK;GACL,UAAU,oBAAoB,IAAI,KAAA;GAClC,MAAM,oBAAoB,WAAW,KAAA;GACrC,GAAI;;IAEJ,oBAAC,OAAA,EACC,WAAW,GACT,OAAO,6BACP,OAAO,sCACP,CAAC,iBAAiB,OAAO,wCAC1B,EAAA,CACD;IACF,oBAAC,OAAA,EACC,WAAW,GACT,OAAO,6BACP,OAAO,uCACP,CAAC,kBAAkB,OAAO,wCAC3B,EAAA,CACD;IACF,oBAAC,OAAA,EAAI,KAAK,SAAA,CAAW;IACpB;IACD,oBAAC,OAAA,EAAI,KAAK,UAAA,CAAY;;IAClB;GACF;;AClEV,IAAA,6BDsEe"}
+{"version":3,"file":"HorizontalScroll.js","names":["HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes>"],"sources":["../src/components/HorizontalScroll/HorizontalScroll.tsx","../src/components/HorizontalScroll/index.ts"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AriaLabelAttributes } from '../../utils/accessibility';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport { useStopPropagation } from '../../hooks/usestopPropagation';\n\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  children?: React.ReactNode;\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes> = ({ children, childWidth, testId, ...rest }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n  const hasAriaAttributes = rest['aria-label'] || rest['aria-labelledby'];\n\n  useStopPropagation(viewportRef, ['touchstart', 'touchmove']);\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      {/* viewport-diven må ta tabIndex for å løse et annet UU-problem, at div med overflow: scroll må kunne navigeres med keyboard. */}\n      {/* Enten aria-label eller aria-labelledbyid må settes */}\n      <div\n        className={viewportClasses}\n        ref={viewportRef}\n        tabIndex={hasAriaAttributes ? 0 : undefined}\n        role={hasAriaAttributes ? 'region' : undefined}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n","import HorizontalScroll from './HorizontalScroll';\nexport * from './HorizontalScroll';\nexport default HorizontalScroll;\n"],"mappings":";;;;;;;AAaA,IAAM,qBAAqB;AAY3B,MAAaA,oBAA2E,EAAE,UAAU,YAAY,QAAQ,GAAG,WAAW;CACpI,MAAM,cAAc,OAAuB,KAAK;CAChD,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,gBAAgB,aAAa,SAAS,GAAG;EAAE,MAAM,aAAa;EAAS,YAAY;EAAoB,EAAE,KAAK;CACpH,MAAM,iBAAiB,aAAa,UAAU,GAAG;EAAE,MAAM,aAAa;EAAS,YAAY;EAAoB,EAAE,KAAK;CACtH,MAAM,EAAE,OAAO,gBAAgB,MAAM,QAAQ,YAAY,IAAI,EAAE;CAE/D,MAAM,gBAAgB,aAAa;CACnC,MAAM,kBAAkB,WAAW,OAAO,4BAA4B,iBAAiB,OAAO,wCAAwC;CACtI,MAAM,oBAAoB,KAAK,iBAAiB,KAAK;AAErD,oBAAmB,aAAa,CAAC,cAAc,YAAY,CAAC;AAE5D,QACE,oBAAC,OAAA;EAAI,WAAW,OAAO;EAAkB,eAAa;YAGpD,qBAAC,OAAA;GACC,WAAW;GACX,KAAK;GACL,UAAU,oBAAoB,IAAI,KAAA;GAClC,MAAM,oBAAoB,WAAW,KAAA;GACrC,GAAI;;IAEJ,oBAAC,OAAA,EACC,WAAW,WACT,OAAO,6BACP,OAAO,sCACP,CAAC,iBAAiB,OAAO,wCAC1B,EAAA,CACD;IACF,oBAAC,OAAA,EACC,WAAW,WACT,OAAO,6BACP,OAAO,uCACP,CAAC,kBAAkB,OAAO,wCAC3B,EAAA,CACD;IACF,oBAAC,OAAA,EAAI,KAAK,SAAA,CAAW;IACpB;IACD,oBAAC,OAAA,EAAI,KAAK,UAAA,CAAY;;IAClB;GACF;;AClEV,IAAA,6BDsEe"}

package/lib/Icon.js

@@ -1,5 +1,5 @@
 import { a as IconSize, n as AnalyticsId } from "./constants2.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React, { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 const Icon = (props) => {
@@ -15,7 +15,7 @@ const Icon = (props) => {
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.Icon,
 		ref,
-		className: cn(`hnds-style-icon`, className),
+		className: classNames(`hnds-style-icon`, className),
 		role: ariaLabel ? "img" : "presentation",
 		"aria-labelledby": ariaLabel ? titleId : void 0,
 		focusable: false,

package/lib/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["Icon: React.FC<IconProps>"],"sources":["../src/components/Icon/Icon.tsx","../src/components/Icon/index.ts"],"sourcesContent":["import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { FormOnColor } from '../../constants';\nimport type { StatusDotOnColor } from '../StatusDot';\n\nimport { AnalyticsId, IconSize } from '../../constants';\n\nexport type SvgIcon = React.FC<SvgPathProps>;\n\nexport interface BaseIconProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the icon. */\n  size?: number;\n  /* Changes the color of the icon. */\n  color?: string;\n  /* Changes the hover color of the icon. */\n  hoverColor?: string;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /* Swaps the displayed icon to the hover version and changes its color. */\n  isHovered?: boolean;\n  /** Defines the color of the icon */\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<SVGSVGElement>;\n}\n\nexport interface IconProps extends BaseIconProps {\n  /* Sets which icon should be displayed. */\n  svgIcon: SvgIcon;\n}\n\nexport interface SvgPathProps {\n  size: IconSize;\n  isHovered: boolean;\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n}\n\nexport interface IconConfig {\n  size: IconSize;\n  isHovered: boolean;\n  normal: React.ReactElement;\n  normalHover: React.ReactElement;\n  xSmall?: React.ReactElement;\n  xSmallHover?: React.ReactElement;\n  xxSmall?: React.ReactElement;\n  xxSmallHover?: React.ReactElement;\n}\n\nexport const Icon: React.FC<IconProps> = props => {\n  const {\n    svgIcon,\n    ariaLabel,\n    className = '',\n    size = IconSize.Small,\n    color = 'black',\n    hoverColor = color || 'black',\n    isHovered = false,\n    onColor,\n    testId,\n    ref,\n    ...other\n  } = props;\n  const svgRaw = React.createElement(svgIcon, {\n    size,\n    isHovered,\n    onColor,\n  });\n\n  const titleId = useId();\n  const svgColor = isHovered ? hoverColor : color;\n\n  return (\n    <svg\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Icon}\n      ref={ref}\n      className={classNames(`hnds-style-icon`, className)}\n      role={ariaLabel ? 'img' : 'presentation'}\n      aria-labelledby={ariaLabel ? titleId : undefined}\n      focusable={false}\n      aria-hidden={ariaLabel ? undefined : true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n      fill={svgColor}\n      color={svgColor}\n      {...other}\n    >\n      {ariaLabel && <title id={titleId}>{ariaLabel}</title>}\n      {svgRaw}\n    </svg>\n  );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n","export * from './Icon';\nexport * from './utils';\nexport { IconSize } from '../../constants';\n\nimport { Icon } from './Icon';\nexport default Icon;\n"],"mappings":";;;;AAsDA,MAAaA,QAA4B,UAAS;CAChD,MAAM,EACJ,SACA,WACA,YAAY,IACZ,OAAO,SAAS,OAChB,QAAQ,SACR,aAAa,SAAS,SACtB,YAAY,OACZ,SACA,QACA,KACA,GAAG,UACD;CACJ,MAAM,SAAS,MAAM,cAAc,SAAS;EAC1C;EACA;EACA;EACD,CAAC;CAEF,MAAM,UAAU,OAAO;CACvB,MAAM,WAAW,YAAY,aAAa;AAE1C,QACE,qBAAC,OAAA;EACC,eAAa;EACb,oBAAkB,YAAY;EACzB;EACL,WAAW,GAAW,mBAAmB,UAAU;EACnD,MAAM,YAAY,QAAQ;EAC1B,mBAAiB,YAAY,UAAU,KAAA;EACvC,WAAW;EACX,eAAa,YAAY,KAAA,IAAY;EACrC,SAAQ;EACR,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;EACR,MAAM;EACN,OAAO;EACP,GAAI;aAEH,aAAa,oBAAC,SAAA;GAAM,IAAI;aAAU;IAAkB,EACpD,OAAA;GACG;;AAIV,KAAK,cAAc;AChGnB,IAAA,eAAe"}
+{"version":3,"file":"Icon.js","names":["Icon: React.FC<IconProps>"],"sources":["../src/components/Icon/Icon.tsx","../src/components/Icon/index.ts"],"sourcesContent":["import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { FormOnColor } from '../../constants';\nimport type { StatusDotOnColor } from '../StatusDot';\n\nimport { AnalyticsId, IconSize } from '../../constants';\n\nexport type SvgIcon = React.FC<SvgPathProps>;\n\nexport interface BaseIconProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the icon. */\n  size?: number;\n  /* Changes the color of the icon. */\n  color?: string;\n  /* Changes the hover color of the icon. */\n  hoverColor?: string;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /* Swaps the displayed icon to the hover version and changes its color. */\n  isHovered?: boolean;\n  /** Defines the color of the icon */\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<SVGSVGElement>;\n}\n\nexport interface IconProps extends BaseIconProps {\n  /* Sets which icon should be displayed. */\n  svgIcon: SvgIcon;\n}\n\nexport interface SvgPathProps {\n  size: IconSize;\n  isHovered: boolean;\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n}\n\nexport interface IconConfig {\n  size: IconSize;\n  isHovered: boolean;\n  normal: React.ReactElement;\n  normalHover: React.ReactElement;\n  xSmall?: React.ReactElement;\n  xSmallHover?: React.ReactElement;\n  xxSmall?: React.ReactElement;\n  xxSmallHover?: React.ReactElement;\n}\n\nexport const Icon: React.FC<IconProps> = props => {\n  const {\n    svgIcon,\n    ariaLabel,\n    className = '',\n    size = IconSize.Small,\n    color = 'black',\n    hoverColor = color || 'black',\n    isHovered = false,\n    onColor,\n    testId,\n    ref,\n    ...other\n  } = props;\n  const svgRaw = React.createElement(svgIcon, {\n    size,\n    isHovered,\n    onColor,\n  });\n\n  const titleId = useId();\n  const svgColor = isHovered ? hoverColor : color;\n\n  return (\n    <svg\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Icon}\n      ref={ref}\n      className={classNames(`hnds-style-icon`, className)}\n      role={ariaLabel ? 'img' : 'presentation'}\n      aria-labelledby={ariaLabel ? titleId : undefined}\n      focusable={false}\n      aria-hidden={ariaLabel ? undefined : true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n      fill={svgColor}\n      color={svgColor}\n      {...other}\n    >\n      {ariaLabel && <title id={titleId}>{ariaLabel}</title>}\n      {svgRaw}\n    </svg>\n  );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n","export * from './Icon';\nexport * from './utils';\nexport { IconSize } from '../../constants';\n\nimport { Icon } from './Icon';\nexport default Icon;\n"],"mappings":";;;;AAsDA,MAAaA,QAA4B,UAAS;CAChD,MAAM,EACJ,SACA,WACA,YAAY,IACZ,OAAO,SAAS,OAChB,QAAQ,SACR,aAAa,SAAS,SACtB,YAAY,OACZ,SACA,QACA,KACA,GAAG,UACD;CACJ,MAAM,SAAS,MAAM,cAAc,SAAS;EAC1C;EACA;EACA;EACD,CAAC;CAEF,MAAM,UAAU,OAAO;CACvB,MAAM,WAAW,YAAY,aAAa;AAE1C,QACE,qBAAC,OAAA;EACC,eAAa;EACb,oBAAkB,YAAY;EACzB;EACL,WAAW,WAAW,mBAAmB,UAAU;EACnD,MAAM,YAAY,QAAQ;EAC1B,mBAAiB,YAAY,UAAU,KAAA;EACvC,WAAW;EACX,eAAa,YAAY,KAAA,IAAY;EACrC,SAAQ;EACR,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;EACR,MAAM;EACN,OAAO;EACP,GAAI;aAEH,aAAa,oBAAC,SAAA;GAAM,IAAI;aAAU;IAAkB,EACpD,OAAA;GACG;;AAIV,KAAK,cAAc;AChGnB,IAAA,eAAe"}

package/lib/IllustrationNames.js

@@ -6,8 +6,10 @@ const IllustrationList = [
 	"GiveBabyFood",
 	"HealthcarePersonnel",
 	"ReadLetters",
+	"Stork",
 	"Stroller",
-	"Support2"
+	"Support2",
+	"Thinking"
 ];
 const IllustrationSizeList = {
 	BabyMobile: { medium: "BabyMobileMedium" },
@@ -23,8 +25,10 @@ const IllustrationSizeList = {
 		medium: "HealthcarePersonnelMedium"
 	},
 	ReadLetters: { medium: "ReadLettersMedium" },
+	Stork: { medium: "StorkMedium" },
 	Stroller: { medium: "StrollerMedium" },
-	Support2: { medium: "Support2Medium" }
+	Support2: { medium: "Support2Medium" },
+	Thinking: { medium: "ThinkingMedium" }
 };
 export { IllustrationSizeList as n, IllustrationList as t };
 

package/lib/IllustrationNames.js.map

@@ -1 +1 @@
-{"version":3,"file":"IllustrationNames.js","names":["IllustrationSizeList: Record<IllustrationName, IllustrationSize>"],"sources":["../src/components/Illustrations/IllustrationNames.ts"],"sourcesContent":["/** AUTO-GENERATED - DO NOT CHANGE MANUALLY **/\n\nexport const IllustrationList = [\n  'BabyMobile',\n  'Child',\n  'Doctor',\n  'FacialRecognitionFingerprint',\n  'GiveBabyFood',\n  'HealthcarePersonnel',\n  'ReadLetters',\n  'Stroller',\n  'Support2',\n] as const;\n\nexport interface IllustrationSize {\n  small?: string;\n  medium?: string;\n  large?: string;\n}\n\nexport const IllustrationSizeList: Record<IllustrationName, IllustrationSize> = {\n  BabyMobile: { medium: 'BabyMobileMedium' },\n  Child: { medium: 'ChildMedium' },\n  Doctor: { small: 'DoctorSmall', medium: 'DoctorMedium' },\n  FacialRecognitionFingerprint: { medium: 'FacialRecognitionFingerprintMedium' },\n  GiveBabyFood: { medium: 'GiveBabyFoodMedium' },\n  HealthcarePersonnel: { small: 'HealthcarePersonnelSmall', medium: 'HealthcarePersonnelMedium' },\n  ReadLetters: { medium: 'ReadLettersMedium' },\n  Stroller: { medium: 'StrollerMedium' },\n  Support2: { medium: 'Support2Medium' },\n};\n\nexport type IllustrationName = (typeof IllustrationList)[number];\n"],"mappings":"AAEA,MAAa,mBAAmB;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAQD,MAAaA,uBAAmE;CAC9E,YAAY,EAAE,QAAQ,oBAAoB;CAC1C,OAAO,EAAE,QAAQ,eAAe;CAChC,QAAQ;EAAE,OAAO;EAAe,QAAQ;EAAgB;CACxD,8BAA8B,EAAE,QAAQ,sCAAsC;CAC9E,cAAc,EAAE,QAAQ,sBAAsB;CAC9C,qBAAqB;EAAE,OAAO;EAA4B,QAAQ;EAA6B;CAC/F,aAAa,EAAE,QAAQ,qBAAqB;CAC5C,UAAU,EAAE,QAAQ,kBAAkB;CACtC,UAAU,EAAE,QAAQ,kBAAkB;CACvC"}
+{"version":3,"file":"IllustrationNames.js","names":["IllustrationSizeList: Record<IllustrationName, IllustrationSize>"],"sources":["../src/components/Illustrations/IllustrationNames.ts"],"sourcesContent":["/** AUTO-GENERATED - DO NOT CHANGE MANUALLY **/\n\nexport const IllustrationList = [\n  'BabyMobile',\n  'Child',\n  'Doctor',\n  'FacialRecognitionFingerprint',\n  'GiveBabyFood',\n  'HealthcarePersonnel',\n  'ReadLetters',\n  'Stork',\n  'Stroller',\n  'Support2',\n  'Thinking',\n] as const;\n\nexport interface IllustrationSize {\n  small?: string;\n  medium?: string;\n  large?: string;\n}\n\nexport const IllustrationSizeList: Record<IllustrationName, IllustrationSize> = {\n  BabyMobile: { medium: 'BabyMobileMedium' },\n  Child: { medium: 'ChildMedium' },\n  Doctor: { small: 'DoctorSmall', medium: 'DoctorMedium' },\n  FacialRecognitionFingerprint: { medium: 'FacialRecognitionFingerprintMedium' },\n  GiveBabyFood: { medium: 'GiveBabyFoodMedium' },\n  HealthcarePersonnel: { small: 'HealthcarePersonnelSmall', medium: 'HealthcarePersonnelMedium' },\n  ReadLetters: { medium: 'ReadLettersMedium' },\n  Stork: { medium: 'StorkMedium' },\n  Stroller: { medium: 'StrollerMedium' },\n  Support2: { medium: 'Support2Medium' },\n  Thinking: { medium: 'ThinkingMedium' },\n};\n\nexport type IllustrationName = (typeof IllustrationList)[number];\n"],"mappings":"AAEA,MAAa,mBAAmB;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAQD,MAAaA,uBAAmE;CAC9E,YAAY,EAAE,QAAQ,oBAAoB;CAC1C,OAAO,EAAE,QAAQ,eAAe;CAChC,QAAQ;EAAE,OAAO;EAAe,QAAQ;EAAgB;CACxD,8BAA8B,EAAE,QAAQ,sCAAsC;CAC9E,cAAc,EAAE,QAAQ,sBAAsB;CAC9C,qBAAqB;EAAE,OAAO;EAA4B,QAAQ;EAA6B;CAC/F,aAAa,EAAE,QAAQ,qBAAqB;CAC5C,OAAO,EAAE,QAAQ,eAAe;CAChC,UAAU,EAAE,QAAQ,kBAAkB;CACtC,UAAU,EAAE,QAAQ,kBAAkB;CACtC,UAAU,EAAE,QAAQ,kBAAkB;CACvC"}

package/lib/InfoTeaser.js

@@ -3,7 +3,7 @@ import { t as Icon_default } from "./Icon.js";
 import { n as useLanguage } from "./useLanguage.js";
 import { t as LazyIcon_default } from "./LazyIcon.js";
 import { t as Title_default } from "./Title2.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/InfoTeaser/styles.module.scss";
@@ -37,7 +37,7 @@ var InfoTeaser = (props) => {
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.InfoTeaser,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cn(styles.infoteaser, className, { [styles["infoteaser--collapsed"]]: !expanded }),
+			className: classNames(styles.infoteaser, className, { [styles["infoteaser--collapsed"]]: !expanded }),
 			style: { maxHeight: !expanded ? collapsedMaxHeight ? collapsedMaxHeight : "12.25rem" : void 0 },
 			children: [
 				svgIcon && (typeof svgIcon === "string" ? /* @__PURE__ */ jsx(LazyIcon_default, {
@@ -65,7 +65,7 @@ var InfoTeaser = (props) => {
 			]
 		}), /* @__PURE__ */ jsx("button", {
 			type: "button",
-			className: cn(styles.infoteaser__button, buttonClassName),
+			className: classNames(styles.infoteaser__button, buttonClassName),
 			onClick: () => {
 				setExpanded(!expanded);
 			},

package/lib/InfoTeaser.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoTeaser.js","names":["InfoTeaser: React.FC<InfoTeaserProps>","mergedResources: HNDesignsystemInfoTeaser"],"sources":["../src/resources/HN.Designsystem.InfoTeaser.en-GB.json","../src/resources/HN.Designsystem.InfoTeaser.nb-NO.json","../src/components/InfoTeaser/resourceHelper.ts","../src/components/InfoTeaser/InfoTeaser.tsx","../src/components/InfoTeaser/index.ts"],"sourcesContent":["{\n  \"expandButtonOpen\": \"Show less\",\n  \"expandButtonClose\": \"Show more\"\n}\n","{\n  \"expandButtonOpen\": \"Vis mindre\",\n  \"expandButtonClose\": \"Vis mer\"\n}\n","import type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.InfoTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.InfoTeaser.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInfoTeaser => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { TitleTags } from '../Title';\n\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport Icon, { IconSize } from '../Icon';\nimport LazyIcon from '../LazyIcon';\nimport Title from '../Title';\nimport { getResources } from './resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport type InfoTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface InfoTeaserProps {\n  /** For overriding styling on the button */\n  buttonClassName?: string;\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Override the default max height for collapsed teaser. Default is 12.25rem */\n  collapsedMaxHeight?: string;\n  /** For overriding styling on infoteaser box */\n  className?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: InfoTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInfoTeaser>;\n  /** Adds an icon */\n  svgIcon?: SvgIcon | IconName;\n  /** Sets the data-testid attribute */\n  testId?: string;\n  /** Title on top of the component */\n  title: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\nconst InfoTeaser: React.FC<InfoTeaserProps> = props => {\n  const {\n    buttonClassName,\n    children,\n    className,\n    htmlMarkup = 'div',\n    resources,\n    svgIcon,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    collapsedMaxHeight,\n  } = props;\n  const [expanded, setExpanded] = useState(false);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const infoteaserTextId = useId();\n\n  const mergedResources: HNDesignsystemInfoTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const WrapperTag = htmlMarkup;\n\n  return (\n    <WrapperTag className={styles.wrapper} data-testid={testId} data-analyticsid={AnalyticsId.InfoTeaser}>\n      <div\n        className={classNames(styles.infoteaser, className, {\n          [styles['infoteaser--collapsed']]: !expanded,\n        })}\n        style={{ maxHeight: !expanded ? (collapsedMaxHeight ? collapsedMaxHeight : '12.25rem') : undefined }}\n      >\n        {svgIcon &&\n          (typeof svgIcon === 'string' ? (\n            <LazyIcon iconName={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n          ) : (\n            <Icon svgIcon={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n          ))}\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\" className={styles.infoteaser__title}>\n          {title}\n        </Title>\n        <div className={styles.infoteaser__text} aria-hidden={expanded ? false : true} id={infoteaserTextId}>\n          {children}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        className={classNames(styles.infoteaser__button, buttonClassName)}\n        onClick={() => {\n          setExpanded(!expanded);\n        }}\n        aria-expanded={expanded}\n        aria-controls={infoteaserTextId}\n      >\n        {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default InfoTeaser;\n","import InfoTeaser from './InfoTeaser';\nexport * from './InfoTeaser';\nexport default InfoTeaser;\n"],"mappings":";;;;;;;;;;;;;;;;;AEMA,MAAa,gBAAgB,aAAwD;AACnF,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;AC+Bb,IAAMA,cAAwC,UAAS;CACrD,MAAM,EACJ,iBACA,UACA,WACA,aAAa,OACb,WACA,SACA,QACA,OACA,kBAAkB,MAClB,uBACE;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAC5E,MAAM,mBAAmB,aAAa,SAAS;CAC/C,MAAM,mBAAmB,OAAO;CAEhC,MAAMC,kBAA4C;EAChD,GAAG;EACH,GAAG;EACJ;AAID,QACE,qBAHiB,YAGhB;EAAW,WAAW,OAAO;EAAS,eAAa;EAAQ,oBAAkB,YAAY;aACxF,qBAAC,OAAA;GACC,WAAW,GAAW,OAAO,YAAY,WAAW,GACjD,OAAO,2BAA2B,CAAC,UACrC,CAAC;GACF,OAAO,EAAE,WAAW,CAAC,WAAY,qBAAqB,qBAAqB,aAAc,KAAA,GAAW;;IAEnG,YACE,OAAO,YAAY,WAClB,oBAAC,kBAAA;KAAS,UAAU;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;MAAoB,GAEzF,oBAAC,cAAA;KAAc;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;MAAoB;IAExF,oBAAC,eAAA;KAAM,QAAO;KAAU,YAAY;KAAiB,YAAW;KAAS,WAAW,OAAO;eACxF;MACK;IACR,oBAAC,OAAA;KAAI,WAAW,OAAO;KAAkB,eAAa,WAAW,QAAQ;KAAM,IAAI;KAChF;MACG;;IACF,EACN,oBAAC,UAAA;GACC,MAAK;GACL,WAAW,GAAW,OAAO,oBAAoB,gBAAgB;GACjE,eAAe;AACb,gBAAY,CAAC,SAAS;;GAExB,iBAAe;GACf,iBAAe;aAEd,WAAW,gBAAgB,mBAAmB,gBAAgB;IACxD,CAAA;GACE;;AClGjB,IAAA,uBDsGe"}
+{"version":3,"file":"InfoTeaser.js","names":["InfoTeaser: React.FC<InfoTeaserProps>","mergedResources: HNDesignsystemInfoTeaser"],"sources":["../src/resources/HN.Designsystem.InfoTeaser.en-GB.json","../src/resources/HN.Designsystem.InfoTeaser.nb-NO.json","../src/components/InfoTeaser/resourceHelper.ts","../src/components/InfoTeaser/InfoTeaser.tsx","../src/components/InfoTeaser/index.ts"],"sourcesContent":["{\n  \"expandButtonOpen\": \"Show less\",\n  \"expandButtonClose\": \"Show more\"\n}\n","{\n  \"expandButtonOpen\": \"Vis mindre\",\n  \"expandButtonClose\": \"Vis mer\"\n}\n","import type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.InfoTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.InfoTeaser.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInfoTeaser => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { TitleTags } from '../Title';\n\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport Icon, { IconSize } from '../Icon';\nimport LazyIcon from '../LazyIcon';\nimport Title from '../Title';\nimport { getResources } from './resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport type InfoTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface InfoTeaserProps {\n  /** For overriding styling on the button */\n  buttonClassName?: string;\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Override the default max height for collapsed teaser. Default is 12.25rem */\n  collapsedMaxHeight?: string;\n  /** For overriding styling on infoteaser box */\n  className?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: InfoTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInfoTeaser>;\n  /** Adds an icon */\n  svgIcon?: SvgIcon | IconName;\n  /** Sets the data-testid attribute */\n  testId?: string;\n  /** Title on top of the component */\n  title: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\nconst InfoTeaser: React.FC<InfoTeaserProps> = props => {\n  const {\n    buttonClassName,\n    children,\n    className,\n    htmlMarkup = 'div',\n    resources,\n    svgIcon,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    collapsedMaxHeight,\n  } = props;\n  const [expanded, setExpanded] = useState(false);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const infoteaserTextId = useId();\n\n  const mergedResources: HNDesignsystemInfoTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const WrapperTag = htmlMarkup;\n\n  return (\n    <WrapperTag className={styles.wrapper} data-testid={testId} data-analyticsid={AnalyticsId.InfoTeaser}>\n      <div\n        className={classNames(styles.infoteaser, className, {\n          [styles['infoteaser--collapsed']]: !expanded,\n        })}\n        style={{ maxHeight: !expanded ? (collapsedMaxHeight ? collapsedMaxHeight : '12.25rem') : undefined }}\n      >\n        {svgIcon &&\n          (typeof svgIcon === 'string' ? (\n            <LazyIcon iconName={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n          ) : (\n            <Icon svgIcon={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n          ))}\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\" className={styles.infoteaser__title}>\n          {title}\n        </Title>\n        <div className={styles.infoteaser__text} aria-hidden={expanded ? false : true} id={infoteaserTextId}>\n          {children}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        className={classNames(styles.infoteaser__button, buttonClassName)}\n        onClick={() => {\n          setExpanded(!expanded);\n        }}\n        aria-expanded={expanded}\n        aria-controls={infoteaserTextId}\n      >\n        {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default InfoTeaser;\n","import InfoTeaser from './InfoTeaser';\nexport * from './InfoTeaser';\nexport default InfoTeaser;\n"],"mappings":";;;;;;;;;;;;;;;;;AEMA,MAAa,gBAAgB,aAAwD;AACnF,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;AC+Bb,IAAMA,cAAwC,UAAS;CACrD,MAAM,EACJ,iBACA,UACA,WACA,aAAa,OACb,WACA,SACA,QACA,OACA,kBAAkB,MAClB,uBACE;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAC5E,MAAM,mBAAmB,aAAa,SAAS;CAC/C,MAAM,mBAAmB,OAAO;CAEhC,MAAMC,kBAA4C;EAChD,GAAG;EACH,GAAG;EACJ;AAID,QACE,qBAHiB,YAGhB;EAAW,WAAW,OAAO;EAAS,eAAa;EAAQ,oBAAkB,YAAY;aACxF,qBAAC,OAAA;GACC,WAAW,WAAW,OAAO,YAAY,WAAW,GACjD,OAAO,2BAA2B,CAAC,UACrC,CAAC;GACF,OAAO,EAAE,WAAW,CAAC,WAAY,qBAAqB,qBAAqB,aAAc,KAAA,GAAW;;IAEnG,YACE,OAAO,YAAY,WAClB,oBAAC,kBAAA;KAAS,UAAU;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;MAAoB,GAEzF,oBAAC,cAAA;KAAc;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;MAAoB;IAExF,oBAAC,eAAA;KAAM,QAAO;KAAU,YAAY;KAAiB,YAAW;KAAS,WAAW,OAAO;eACxF;MACK;IACR,oBAAC,OAAA;KAAI,WAAW,OAAO;KAAkB,eAAa,WAAW,QAAQ;KAAM,IAAI;KAChF;MACG;;IACF,EACN,oBAAC,UAAA;GACC,MAAK;GACL,WAAW,WAAW,OAAO,oBAAoB,gBAAgB;GACjE,eAAe;AACb,gBAAY,CAAC,SAAS;;GAExB,iBAAe;GACf,iBAAe;aAEd,WAAW,gBAAgB,mBAAmB,gBAAgB;IACxD,CAAA;GACE;;AClGjB,IAAA,uBDsGe"}

package/lib/Input.js

@@ -10,8 +10,8 @@ import { t as getAriaDescribedBy } from "./accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { n as renderLabel } from "./utils2.js";
 import { t as MaxCharacters_default } from "./MaxCharacters.js";
-import cn from "classnames";
-import { useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Input/styles.module.scss";
 let InputTypes = /* @__PURE__ */ function(InputTypes$1) {
@@ -53,21 +53,23 @@ var Input = (props) => {
 	const inputContainerRefLocal = useRef(null);
 	const inputId = useIdWithFallback(inputIdProp);
 	const [input, setInput] = useState(defaultValue || "");
+	const [prevDefaultValue, setPrevDefaultValue] = useState(defaultValue);
 	const [prevValue, setPrevValue] = useState(void 0);
 	const numKeyPressed = useRef(false);
 	const errorTextId = useIdWithFallback(errorTextIdProp);
 	const numRegex = /^[0-9]$/;
-	useEffect(() => {
+	if (defaultValue !== prevDefaultValue) {
+		setPrevDefaultValue(defaultValue);
 		setInput(defaultValue || "");
-	}, [defaultValue]);
+	}
 	const onDark = onColor === FormOnColor.ondark;
 	const onBlueberry = onColor === FormOnColor.onblueberry;
 	const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;
 	const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;
 	const isLarge = size === FormSize.large;
 	const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;
-	const inputWrapperClass = cn(styles["input-wrapper"], className);
-	const inputContainer = cn(styles["input-container"], {
+	const inputWrapperClass = classNames(styles["input-wrapper"], className);
+	const inputContainer = classNames(styles["input-container"], {
 		[styles["input-container--transparent"]]: isTransparent,
 		[styles["input-container--on-blueberry"]]: onBlueberry,
 		[styles["input-container--on-dark"]]: onDark,
@@ -76,7 +78,7 @@ var Input = (props) => {
 		[styles["input-container--with-icon"]]: icon,
 		[styles["input-container--with-icon--right"]]: icon && iconRight
 	});
-	const inputClass = cn(styles["input-container__input"], {
+	const inputClass = classNames(styles["input-container__input"], {
 		[styles["input-container__input--large"]]: isLarge,
 		[styles["input-container__input--disabled"]]: disabled
 	});

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["Input: React.FC<InputProps>","mergedResources: HNDesignsystemInput"],"sources":["../src/components/Input/constants.ts","../src/resources/HN.Designsystem.Input.en-GB.json","../src/resources/HN.Designsystem.Input.nb-NO.json","../src/resources/HN.Designsystem.Input.nn-NO.json","../src/components/Input/resourceHelper.ts","../src/components/Input/Input.tsx"],"sourcesContent":["export enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n","{\n  \"characters\": \"characters\"\n}\n","{\n  \"characters\": \"tegn\"\n}\n","{\n  \"characters\": \"teikn\"\n}\n","import type { HNDesignsystemInput } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Input.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Input.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Input.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInput => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemInput } from '../../resources/Resources';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { InputTypes } from './constants';\nimport { getResources } from './resourceHelper';\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, LanguageLocales } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize } from '../Icon';\nimport { renderLabel } from '../Label/utils';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      | 'disabled'\n      | 'readOnly'\n      | 'autoComplete'\n      | 'name'\n      | 'placeholder'\n      | 'defaultValue'\n      | 'required'\n      | 'value'\n      | 'min'\n      | 'max'\n      | 'aria-describedby'\n      | 'aria-labelledby'\n      | 'onBlur'\n      | 'onClick'\n      | 'onChange'\n      | 'onFocus'\n      | 'onKeyDown'\n      | 'autoFocus'\n      | 'inputMode'\n    > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputContainerRef */\n  inputContainerRef?: React.RefObject<HTMLDivElement | null>;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement | null>;\n  /** Changes the color profile of the input */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInput>;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input: React.FC<InputProps> = props => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputWrapperRef,\n    onColor = FormOnColor.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    inputId: inputIdProp,\n    errorWrapperClassName,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    inputContainerRef,\n    resources,\n    ref,\n    ...rest\n  } = props;\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemInput = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const breakpoint = useBreakpoint();\n  const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n  const inputId = useIdWithFallback(inputIdProp);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const numRegex = /^[0-9]$/;\n\n  useEffect(() => {\n    setInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n    [styles['input-container--with-icon--right']]: icon && iconRight,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRefLocal.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      if (props.onClick) props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    if (onKeyDown) onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel({ label: label, inputId: inputId, onColor: onColor as FormOnColor })}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            onClick={handleClick}\n            ref={mergeRefs([inputContainerRefLocal, inputContainerRef])}\n            className={inputContainer}\n            style={{ maxWidth }}\n          >\n            {!iconRight && renderIcon()}\n            <input\n              {...rest}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputId}\n              className={inputClass}\n              ref={ref}\n              aria-describedby={getAriaDescribedBy(props, errorTextId)}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={input.toString().length}\n            maxText={mergedResources.characters}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":["Input: React.FC<InputProps>","mergedResources: HNDesignsystemInput"],"sources":["../src/components/Input/constants.ts","../src/resources/HN.Designsystem.Input.en-GB.json","../src/resources/HN.Designsystem.Input.nb-NO.json","../src/resources/HN.Designsystem.Input.nn-NO.json","../src/components/Input/resourceHelper.ts","../src/components/Input/Input.tsx"],"sourcesContent":["export enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n","{\n  \"characters\": \"characters\"\n}\n","{\n  \"characters\": \"tegn\"\n}\n","{\n  \"characters\": \"teikn\"\n}\n","import type { HNDesignsystemInput } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Input.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Input.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Input.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInput => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemInput } from '../../resources/Resources';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { InputTypes } from './constants';\nimport { getResources } from './resourceHelper';\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, LanguageLocales } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize } from '../Icon';\nimport { renderLabel } from '../Label/utils';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      | 'disabled'\n      | 'readOnly'\n      | 'autoComplete'\n      | 'name'\n      | 'placeholder'\n      | 'defaultValue'\n      | 'required'\n      | 'value'\n      | 'min'\n      | 'max'\n      | 'aria-describedby'\n      | 'aria-labelledby'\n      | 'onBlur'\n      | 'onClick'\n      | 'onChange'\n      | 'onFocus'\n      | 'onKeyDown'\n      | 'autoFocus'\n      | 'inputMode'\n    > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputContainerRef */\n  inputContainerRef?: React.RefObject<HTMLDivElement | null>;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement | null>;\n  /** Changes the color profile of the input */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInput>;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input: React.FC<InputProps> = props => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputWrapperRef,\n    onColor = FormOnColor.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    inputId: inputIdProp,\n    errorWrapperClassName,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    inputContainerRef,\n    resources,\n    ref,\n    ...rest\n  } = props;\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemInput = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const breakpoint = useBreakpoint();\n  const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n  const inputId = useIdWithFallback(inputIdProp);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevDefaultValue, setPrevDefaultValue] = useState(defaultValue);\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const numRegex = /^[0-9]$/;\n\n  if (defaultValue !== prevDefaultValue) {\n    setPrevDefaultValue(defaultValue);\n    setInput(defaultValue || '');\n  }\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n    [styles['input-container--with-icon--right']]: icon && iconRight,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRefLocal.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      if (props.onClick) props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    if (onKeyDown) onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel({ label: label, inputId: inputId, onColor: onColor as FormOnColor })}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            onClick={handleClick}\n            ref={mergeRefs([inputContainerRefLocal, inputContainerRef])}\n            className={inputContainer}\n            style={{ maxWidth }}\n          >\n            {!iconRight && renderIcon()}\n            <input\n              {...rest}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputId}\n              className={inputClass}\n              ref={ref}\n              aria-describedby={getAriaDescribedBy(props, errorTextId)}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={input.toString().length}\n            maxText={mergedResources.characters}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}