@helsenorge/designsystem-react 15.7.2 → 16.1.0

package/lib/components/Illustrations/MoveAwayMedium.js

@@ -0,0 +1,114 @@
+import { t as ViewBoxSize } from "../../utils3.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Illustrations/MoveAwayMedium.tsx
+var MoveAwayMedium = ({ color, svgProperties, title }) => {
+	const palette = (() => {
+		switch (color) {
+			case "blueberry": return {
+				background: "var(--brandcolor-blueberry-verylight, #E4F7F9)",
+				door: "var(--brandcolor-blueberry-medium, #188097)",
+				sweater: "var(--brandcolor-blueberry-mediumlight, #AFDAE3)",
+				pants: "var(--brandcolor-blueberry-dark, #08667C)",
+				arrow: "var(--brandcolor-blueberry-medium, #188097)",
+				skin: "var(--brandcolor-blueberry-verylight, #E4F7F9)"
+			};
+			case "cherry": return {
+				background: "var(--brandcolor-cherry-verylight, #FFF2EA)",
+				door: "var(--brandcolor-cherry-medium, #C83521)",
+				sweater: "#B69079",
+				pants: "var(--brandcolor-cherry-dark, #A31F0E)",
+				arrow: "var(--brandcolor-cherry-medium, #C83521)",
+				skin: "var(--brandcolor-cherry-verylight, #FFF2EA)"
+			};
+			default: return {
+				background: "var(--brandcolor-neutral-verylight, #F5F3F3)",
+				door: "var(--brandcolor-neutral-medium, #989693)",
+				sweater: "var(--brandcolor-neutral-verylight, #F5F3F3)",
+				pants: "var(--brandcolor-neutral-dark, #62625F)",
+				arrow: "var(--brandcolor-neutral-verydark, #2B2C2B)",
+				skin: "var(--brandcolor-neutral-light, #EAE7E7)"
+			};
+		}
+	})();
+	return /* @__PURE__ */ jsxs("svg", {
+		...svgProperties,
+		viewBox: ViewBoxSize.Medium,
+		children: [
+			title,
+			/* @__PURE__ */ jsx("path", {
+				fill: palette.background,
+				d: "M0 0h512v512H0z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fill: "#fff",
+				d: "M184.571 78.379h139.787v344.188H184.571z"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M324.358 460.404V51.757l106.461 26.69v343.998l-106.461 37.959Z",
+				fill: palette.door
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "m106.104 306.548 3.249-13.158 10.375 2.358 1.953 5.463 2.942 5.337v3.495l-1.762 1.469-2.801-3.454-1.986-3.188-1.934 2.718 1.14 6.432-1.14 5.956-3.45 3.084-4.129-.313-2.457-3.892-1.359-4.835 1.359-7.472Zm147.847-37.089-4.44 1.573-2.357 10.397 15.572 4.29 5.682.58 5.325-1.623 2.214-4.244-.881-3.231-2.84-2.546-3.818-.587-7.203.587-2.384-1.646 2.384-1.977 2.796-1.573 1.312-2.181-3.246-1.522-3.957 1.522-4.159 2.181Z",
+				fill: palette.skin
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "m132.583 362.267 7.472-63.191 7.635 1.137 12.671 2.274 14.457.975h12.833l8.935-.975 6.498-2.274 20.63 54.094-11.696 74.4h-26.154l2.762-68.877-11.534-15.432-9.746 24.692-37.037 53.444-23.392-12.021 25.666-48.246Z",
+				fill: palette.pants
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M164.422 200.796v-6.335l29.24 6.335-3.412 7.635 3.412 9.747 21.28 34.276 34.847 12.379-4.386 20.467-37.121-12.379 6.66 21.768-4.711 2.762-10.884 4.061-9.097 2.599h-12.183l-14.782-.975-10.884-1.624-8.61-1.95-7.797-2.111-4.711-2.762 18.519-51.495-13.808 10.559-11.209 42.398-21.118-3.249 13.808-53.769 46.947-38.337Z",
+				fill: palette.sweater
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "m173.044 179.775.28-2.923-2.319-2.338-1.849-2.541-1.144-2.922.61-2.593 1.855-1.601 2.567-.286 2.033 1.176 1.245 2.268.89 1.62 2.007-1.804 1.83-2.77 3.202-3.177 3.405-1.474 4.283.174 3.2.317 3.056-.317 2.882-.907 2.128-1.428 1.551-2.084.504-2.394v-3.014l-.858-2.66-2.04-3.458-3.083-3.358-4.44-1.903-5.845-1.314h-6.402l-6.074 1.876-4.521 2.558-4.987 5.998-4.012.709s-4.676 2.561-4.821 2.743l-2.566 3.481-1.423 3.838-.502 4.548.502 5.236 1.965 5.658 3.769 4.217 3.364 1.929 2.592 2.249 2.363 3.227.737 1.957 1.779-2.694c.604-1.087 1.445-2.991 1.626-3.1l.661-2.719Z",
+				fill: "#000"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M168.539 188.565v6.978l5.019.866 7.333 1.8 6.533 1.2-.484-2.525-.441-4.242v-3.195c.753.239 2.325.716 2.59.716.33 0 2.865.551 3.195.551.265 0 1.433-.367 1.984-.551l1.928-2.038 1.267-3.802.716-3.636v-2.92l6.171-1.873-5.675-14.71h-4.022l-3.911-.606-2.887.315-2.791 1.083-2.874 3.285-2.333 2.534-2.503 1.818-.937-1.818-1.432-1.928-2.479-1.377-2.424.771-1.543 1.763-.441 2.204.937 2.644 2.204 2.7 1.928 2.038v3.14l-1.212 3.581-1.873 3.031-1.543 2.203Z",
+				fill: palette.skin
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "m198.486 160.996 5.9 14.904-6.163 1.811c0 4.104-1.087 12.421-5.438 12.855-1.835.184-4.145-.357-6.423-1.185m-7.896-3.885c1.711 1.082 4.775 2.752 7.896 3.885m0 0s.064 3.727.778 9.002m-18.478-3.109v-6.55c1.508-1.768 4.543-6.64 4.622-11.984-4.622-4.125-6.982-9.135-3.147-11.394 3.835-2.259 6.028 1.964 7.179 4.224 2.95-.197 3.798-8.738 11.864-9.225 3.085.71 12.997 1.699 15.206-4.407 2.217-6.129-1.528-13.289-9.566-16.132-8.458-2.991-20.584-2.462-28.228 8.901-6.473-.413-11.255 5.744-12.533 10.95-1.279 5.206.745 13.883 5.027 18.054 3.581 3.488 8.867 5.005 9.576 10.702m-18.446 54.5-18.677 51.968c5.558 5.009 26.89 9.149 45.776 9.149 21.55 0 31.207-5.741 37.148-9.149l-23.804-85.706 2.126-8.699-28.24-6.028.14 7.202",
+				fill: "none",
+				stroke: "#000",
+				"stroke-width": "4"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "m172.123 226.152-21.369 16.266-14.352 11.162-11.41 42.864-21.228-3.616 14.14-54.238 47.244-37.965m27.433 15.739 23.478 37.021 34.015 11.63-4.859 20.979-37.153-12.634",
+				fill: "none",
+				stroke: "#000",
+				"stroke-width": "4"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M108.901 293.317a710.121 710.121 0 0 0-2.082 9.247c-.923 4.312-2.39 8.839-2.185 11.845.192 2.835 2.109 8.472 5.698 8.911 4.079.498 6.974-4.484 6.808-7.451-.254-4.543-1.19-9.14.134-10.746 1.736-.255 1.931.558 2.534 2.104 3.725 7.562 6.404 4.269 4.572-.917-1.202-2.565-5.268-9.28-5.057-11.319m127.035-13.79c1.419.427 6.75 1.969 8.993 2.589 4.196 1.161 8.573 2.869 11.548 2.842 2.805-.025 8.473-1.586 9.114-5.099.728-3.991-4.014-7.134-6.949-7.143-4.492-.013-9.078.642-10.584-.756-.149-1.726.662-1.871 2.221-2.375 7.671-3.233 4.58-6.064-.638-4.56-2.598 1.036-9.452 4.654-11.45 4.328m-104.792 29.13 44.815 59.556-3.058 69.052h26.508l11.503-74.171-20.631-54.437",
+				fill: "none",
+				stroke: "#000",
+				"stroke-width": "4"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "m140.378 299.409-7.86 62.836-25.526 48.212 23.62 12.11 36.211-52.596 10.411-24.957m11.839 84.453-1.397 19.17h33.023c6.133-.943 5.304-10.225-3.396-10.805-10.456-.697-14.29-5.228-14.29-8.365m-91.964-16.171-8.602 17.132 28.887 14.714c4.626 1.75 9.664-6.824 2.438-11.076-9.032-5.315-10.425-11.085-9.018-13.888m59.48-294.606v-47.55h139.447m0 344.7V51.291l106.928 26.732v344.699L323.681 460.71v-37.988Zm0 0h-88.844",
+				fill: "none",
+				stroke: "#000",
+				"stroke-width": "4"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M343.583 248.592c2.129 0 4.668 2.312 4.668 6.272 0 3.961-2.539 6.274-4.668 6.274s-4.667-2.313-4.667-6.274c0-3.96 2.538-6.272 4.667-6.272Z",
+				fill: "none",
+				stroke: "#000",
+				"stroke-width": "5"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "m110.978 412.299 13.645 6.66v6.01l3.574 5.524 6.985 3.898c1.354 1.571 3.606 5.426 1.787 8.285-1.82 2.859-5.415 2.491-6.985 1.949l-27.616-14.132 8.61-18.194Zm77.323 35.9.975-19.006h13.808l2.924 4.386 4.873 3.086c2.599.325 7.797 1.008 7.797 1.138 0 .129 2.924 1.57 4.386 2.274l1.625 4.548-1.625 3.574h-34.763Z",
+				fill: "#000"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M272.728 195.828h-42.607v17.866h42.607v10.069l28.167-19.327-28.167-19.327v10.719Z",
+				fill: palette.arrow
+			})
+		]
+	});
+};
+//#endregion
+export { MoveAwayMedium as default };
+
+//# sourceMappingURL=MoveAwayMedium.js.map

package/lib/components/Illustrations/MoveAwayMedium.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoveAwayMedium.js","names":[],"sources":["../../../src/components/Illustrations/MoveAwayMedium.tsx"],"sourcesContent":["import type { Palette } from './MoveAway';\nimport type { BaseSvgIllustrationProps } from '../Illustration';\n\nimport { ViewBoxSize } from '../Illustration/utils';\n\nconst MoveAwayMedium: React.FC<BaseSvgIllustrationProps> = ({ color, svgProperties, title }) => {\n  const palette = ((): Palette => {\n    switch (color) {\n      case 'blueberry':\n        return {\n          background: 'var(--brandcolor-blueberry-verylight, #E4F7F9)',\n          door: 'var(--brandcolor-blueberry-medium, #188097)',\n          sweater: 'var(--brandcolor-blueberry-mediumlight, #AFDAE3)',\n          pants: 'var(--brandcolor-blueberry-dark, #08667C)',\n          arrow: 'var(--brandcolor-blueberry-medium, #188097)',\n          skin: 'var(--brandcolor-blueberry-verylight, #E4F7F9)',\n        };\n      case 'cherry':\n        return {\n          background: 'var(--brandcolor-cherry-verylight, #FFF2EA)',\n          door: 'var(--brandcolor-cherry-medium, #C83521)',\n          sweater: '#B69079',\n          pants: 'var(--brandcolor-cherry-dark, #A31F0E)',\n          arrow: 'var(--brandcolor-cherry-medium, #C83521)',\n          skin: 'var(--brandcolor-cherry-verylight, #FFF2EA)',\n        };\n      default:\n        return {\n          background: 'var(--brandcolor-neutral-verylight, #F5F3F3)',\n          door: 'var(--brandcolor-neutral-medium, #989693)',\n          sweater: 'var(--brandcolor-neutral-verylight, #F5F3F3)',\n          pants: 'var(--brandcolor-neutral-dark, #62625F)',\n          arrow: 'var(--brandcolor-neutral-verydark, #2B2C2B)',\n          skin: 'var(--brandcolor-neutral-light, #EAE7E7)',\n        };\n    }\n  })();\n\n  return (\n    <svg {...svgProperties} viewBox={ViewBoxSize.Medium}>\n      {title}\n      <path fill={palette.background} d=\"M0 0h512v512H0z\" />\n      <path fill=\"#fff\" d=\"M184.571 78.379h139.787v344.188H184.571z\" />\n      <path d=\"M324.358 460.404V51.757l106.461 26.69v343.998l-106.461 37.959Z\" fill={palette.door} />\n      <path\n        d=\"m106.104 306.548 3.249-13.158 10.375 2.358 1.953 5.463 2.942 5.337v3.495l-1.762 1.469-2.801-3.454-1.986-3.188-1.934 2.718 1.14 6.432-1.14 5.956-3.45 3.084-4.129-.313-2.457-3.892-1.359-4.835 1.359-7.472Zm147.847-37.089-4.44 1.573-2.357 10.397 15.572 4.29 5.682.58 5.325-1.623 2.214-4.244-.881-3.231-2.84-2.546-3.818-.587-7.203.587-2.384-1.646 2.384-1.977 2.796-1.573 1.312-2.181-3.246-1.522-3.957 1.522-4.159 2.181Z\"\n        fill={palette.skin}\n      />\n      <path\n        d=\"m132.583 362.267 7.472-63.191 7.635 1.137 12.671 2.274 14.457.975h12.833l8.935-.975 6.498-2.274 20.63 54.094-11.696 74.4h-26.154l2.762-68.877-11.534-15.432-9.746 24.692-37.037 53.444-23.392-12.021 25.666-48.246Z\"\n        fill={palette.pants}\n      />\n      <path\n        d=\"M164.422 200.796v-6.335l29.24 6.335-3.412 7.635 3.412 9.747 21.28 34.276 34.847 12.379-4.386 20.467-37.121-12.379 6.66 21.768-4.711 2.762-10.884 4.061-9.097 2.599h-12.183l-14.782-.975-10.884-1.624-8.61-1.95-7.797-2.111-4.711-2.762 18.519-51.495-13.808 10.559-11.209 42.398-21.118-3.249 13.808-53.769 46.947-38.337Z\"\n        fill={palette.sweater}\n      />\n      <path\n        d=\"m173.044 179.775.28-2.923-2.319-2.338-1.849-2.541-1.144-2.922.61-2.593 1.855-1.601 2.567-.286 2.033 1.176 1.245 2.268.89 1.62 2.007-1.804 1.83-2.77 3.202-3.177 3.405-1.474 4.283.174 3.2.317 3.056-.317 2.882-.907 2.128-1.428 1.551-2.084.504-2.394v-3.014l-.858-2.66-2.04-3.458-3.083-3.358-4.44-1.903-5.845-1.314h-6.402l-6.074 1.876-4.521 2.558-4.987 5.998-4.012.709s-4.676 2.561-4.821 2.743l-2.566 3.481-1.423 3.838-.502 4.548.502 5.236 1.965 5.658 3.769 4.217 3.364 1.929 2.592 2.249 2.363 3.227.737 1.957 1.779-2.694c.604-1.087 1.445-2.991 1.626-3.1l.661-2.719Z\"\n        fill=\"#000\"\n      />\n      <path\n        d=\"M168.539 188.565v6.978l5.019.866 7.333 1.8 6.533 1.2-.484-2.525-.441-4.242v-3.195c.753.239 2.325.716 2.59.716.33 0 2.865.551 3.195.551.265 0 1.433-.367 1.984-.551l1.928-2.038 1.267-3.802.716-3.636v-2.92l6.171-1.873-5.675-14.71h-4.022l-3.911-.606-2.887.315-2.791 1.083-2.874 3.285-2.333 2.534-2.503 1.818-.937-1.818-1.432-1.928-2.479-1.377-2.424.771-1.543 1.763-.441 2.204.937 2.644 2.204 2.7 1.928 2.038v3.14l-1.212 3.581-1.873 3.031-1.543 2.203Z\"\n        fill={palette.skin}\n      />\n      <path\n        d=\"m198.486 160.996 5.9 14.904-6.163 1.811c0 4.104-1.087 12.421-5.438 12.855-1.835.184-4.145-.357-6.423-1.185m-7.896-3.885c1.711 1.082 4.775 2.752 7.896 3.885m0 0s.064 3.727.778 9.002m-18.478-3.109v-6.55c1.508-1.768 4.543-6.64 4.622-11.984-4.622-4.125-6.982-9.135-3.147-11.394 3.835-2.259 6.028 1.964 7.179 4.224 2.95-.197 3.798-8.738 11.864-9.225 3.085.71 12.997 1.699 15.206-4.407 2.217-6.129-1.528-13.289-9.566-16.132-8.458-2.991-20.584-2.462-28.228 8.901-6.473-.413-11.255 5.744-12.533 10.95-1.279 5.206.745 13.883 5.027 18.054 3.581 3.488 8.867 5.005 9.576 10.702m-18.446 54.5-18.677 51.968c5.558 5.009 26.89 9.149 45.776 9.149 21.55 0 31.207-5.741 37.148-9.149l-23.804-85.706 2.126-8.699-28.24-6.028.14 7.202\"\n        fill=\"none\"\n        stroke=\"#000\"\n        stroke-width=\"4\"\n      />\n      <path\n        d=\"m172.123 226.152-21.369 16.266-14.352 11.162-11.41 42.864-21.228-3.616 14.14-54.238 47.244-37.965m27.433 15.739 23.478 37.021 34.015 11.63-4.859 20.979-37.153-12.634\"\n        fill=\"none\"\n        stroke=\"#000\"\n        stroke-width=\"4\"\n      />\n      <path\n        d=\"M108.901 293.317a710.121 710.121 0 0 0-2.082 9.247c-.923 4.312-2.39 8.839-2.185 11.845.192 2.835 2.109 8.472 5.698 8.911 4.079.498 6.974-4.484 6.808-7.451-.254-4.543-1.19-9.14.134-10.746 1.736-.255 1.931.558 2.534 2.104 3.725 7.562 6.404 4.269 4.572-.917-1.202-2.565-5.268-9.28-5.057-11.319m127.035-13.79c1.419.427 6.75 1.969 8.993 2.589 4.196 1.161 8.573 2.869 11.548 2.842 2.805-.025 8.473-1.586 9.114-5.099.728-3.991-4.014-7.134-6.949-7.143-4.492-.013-9.078.642-10.584-.756-.149-1.726.662-1.871 2.221-2.375 7.671-3.233 4.58-6.064-.638-4.56-2.598 1.036-9.452 4.654-11.45 4.328m-104.792 29.13 44.815 59.556-3.058 69.052h26.508l11.503-74.171-20.631-54.437\"\n        fill=\"none\"\n        stroke=\"#000\"\n        stroke-width=\"4\"\n      />\n      <path\n        d=\"m140.378 299.409-7.86 62.836-25.526 48.212 23.62 12.11 36.211-52.596 10.411-24.957m11.839 84.453-1.397 19.17h33.023c6.133-.943 5.304-10.225-3.396-10.805-10.456-.697-14.29-5.228-14.29-8.365m-91.964-16.171-8.602 17.132 28.887 14.714c4.626 1.75 9.664-6.824 2.438-11.076-9.032-5.315-10.425-11.085-9.018-13.888m59.48-294.606v-47.55h139.447m0 344.7V51.291l106.928 26.732v344.699L323.681 460.71v-37.988Zm0 0h-88.844\"\n        fill=\"none\"\n        stroke=\"#000\"\n        stroke-width=\"4\"\n      />\n      <path\n        d=\"M343.583 248.592c2.129 0 4.668 2.312 4.668 6.272 0 3.961-2.539 6.274-4.668 6.274s-4.667-2.313-4.667-6.274c0-3.96 2.538-6.272 4.667-6.272Z\"\n        fill=\"none\"\n        stroke=\"#000\"\n        stroke-width=\"5\"\n      />\n      <path\n        d=\"m110.978 412.299 13.645 6.66v6.01l3.574 5.524 6.985 3.898c1.354 1.571 3.606 5.426 1.787 8.285-1.82 2.859-5.415 2.491-6.985 1.949l-27.616-14.132 8.61-18.194Zm77.323 35.9.975-19.006h13.808l2.924 4.386 4.873 3.086c2.599.325 7.797 1.008 7.797 1.138 0 .129 2.924 1.57 4.386 2.274l1.625 4.548-1.625 3.574h-34.763Z\"\n        fill=\"#000\"\n      />\n      <path d=\"M272.728 195.828h-42.607v17.866h42.607v10.069l28.167-19.327-28.167-19.327v10.719Z\" fill={palette.arrow} />\n    </svg>\n  );\n};\n\nexport default MoveAwayMedium;\n"],"mappings":";;;AAKA,IAAM,kBAAsD,EAAE,OAAO,eAAe,YAAY;CAC9F,MAAM,iBAA0B;EAC9B,QAAQ,OAAR;GACE,KAAK,aACH,OAAO;IACL,YAAY;IACZ,MAAM;IACN,SAAS;IACT,OAAO;IACP,OAAO;IACP,MAAM;GACR;GACF,KAAK,UACH,OAAO;IACL,YAAY;IACZ,MAAM;IACN,SAAS;IACT,OAAO;IACP,OAAO;IACP,MAAM;GACR;GACF,SACE,OAAO;IACL,YAAY;IACZ,MAAM;IACN,SAAS;IACT,OAAO;IACP,OAAO;IACP,MAAM;GACR;EACJ;CACF,EAAA,CAAG;CAEH,OACE,qBAAC,OAAD;EAAK,GAAI;EAAe,SAAS,YAAY;EAA7C,UAAA;GACG;GACD,oBAAC,QAAD;IAAM,MAAM,QAAQ;IAAY,GAAE;GAAmB,CAAA;GACrD,oBAAC,QAAD;IAAM,MAAK;IAAO,GAAE;GAA4C,CAAA;GAChE,oBAAC,QAAD;IAAM,GAAE;IAAiE,MAAM,QAAQ;GAAO,CAAA;GAC9F,oBAAC,QAAD;IACE,GAAE;IACF,MAAM,QAAQ;GACf,CAAA;GACD,oBAAC,QAAD;IACE,GAAE;IACF,MAAM,QAAQ;GACf,CAAA;GACD,oBAAC,QAAD;IACE,GAAE;IACF,MAAM,QAAQ;GACf,CAAA;GACD,oBAAC,QAAD;IACE,GAAE;IACF,MAAK;GACN,CAAA;GACD,oBAAC,QAAD;IACE,GAAE;IACF,MAAM,QAAQ;GACf,CAAA;GACD,oBAAC,QAAD;IACE,GAAE;IACF,MAAK;IACL,QAAO;IACP,gBAAa;GACd,CAAA;GACD,oBAAC,QAAD;IACE,GAAE;IACF,MAAK;IACL,QAAO;IACP,gBAAa;GACd,CAAA;GACD,oBAAC,QAAD;IACE,GAAE;IACF,MAAK;IACL,QAAO;IACP,gBAAa;GACd,CAAA;GACD,oBAAC,QAAD;IACE,GAAE;IACF,MAAK;IACL,QAAO;IACP,gBAAa;GACd,CAAA;GACD,oBAAC,QAAD;IACE,GAAE;IACF,MAAK;IACL,QAAO;IACP,gBAAa;GACd,CAAA;GACD,oBAAC,QAAD;IACE,GAAE;IACF,MAAK;GACN,CAAA;GACD,oBAAC,QAAD;IAAM,GAAE;IAAoF,MAAM,QAAQ;GAAQ,CAAA;EAC/G;;AAET"}

package/lib/components/InfoTeaser/styles.module.scss

@@ -1,7 +1,5 @@
 @use 'sass:map';
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
-@import '../../scss/supernova/styles/spacers.css';
 
 .wrapper {
   position: relative;
@@ -12,8 +10,8 @@
   grid-template-columns: [icon] auto [content] 1fr;
   width: 100%;
   overflow: hidden;
-  background-color: var(--color-base-background-blueberry);
-  border: 1px solid var(--color-base-border-blueberry);
+  background-color: var(--color-base-blueberry-background-light);
+  border: 1px solid var(--color-base-blueberry-border-light);
   padding: var(--core-space-m) var(--core-space-s) var(--core-space-l) var(--core-space-s);
   row-gap: var(--core-space-2xs);
 
@@ -61,7 +59,7 @@
     width: fit-content;
     white-space: nowrap;
     border-radius: 1.25rem;
-    background: var(--color-action-graphics-onlight, #188097);
+    background: var(--color-action-graphics-dark-normal, #188097);
     color: var(--core-color-white, #fff);
     padding: 0.375rem 1rem;
     bottom: 0;
@@ -76,13 +74,13 @@
     line-height: 120%; // 1.2rem
 
     &:hover {
-      background-color: var(--color-action-graphics-onlight-hover);
+      background-color: var(--color-action-graphics-dark-hover);
     }
 
     &:focus-visible {
-      border: 1px solid var(--color-base-graphics-ondark);
+      border: 1px solid var(--color-base-graphics-light);
       outline: none;
-      box-shadow: 0 0 0 3px var(--color-base-graphics-onlight);
+      box-shadow: 0 0 0 3px var(--color-base-graphics-dark);
     }
 
     &:active {

package/lib/components/Label/styles.module.scss

@@ -51,7 +51,7 @@
 .sublabel {
   @include fonts.sublabel;
 
-  color: var(--color-base-text-onlight-subdued);
+  color: var(--color-base-subdued-text-dark);
 
   &--subdued {
     @include fonts.sublabel-subdued;

package/lib/components/LinkList/LinkList.d.ts

@@ -3,7 +3,7 @@ import { HNDesignsystemLinkList } from '../../resources/Resources';
 import { PaletteNames } from '../../theme/palette';
 import { ElementHeaderType } from '../ElementHeader/ElementHeader';
 import { ListEditModeItemProps } from '../ListEditMode';
-export type LinkListSize = 'small' | 'medium' | 'large';
+export type LinkListSize = 'small' | 'normal' | 'large';
 export type LinkListStatus = 'none' | 'new';
 export type LinkAnchorTargets = '_self' | '_blank' | '_parent';
 export type LinkListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;

package/lib/components/LinkList/styles.module.scss

@@ -3,8 +3,6 @@
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/palette' as palette;
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
-@import '../../scss/supernova/styles/spacers.css';
 
 .link-list {
   list-style: none;
@@ -73,7 +71,7 @@
     display: flex;
     min-height: 4rem;
     text-decoration: none;
-    color: var(--color-base-text-onlight);
+    color: var(--color-base-text-dark);
 
     // listeelement settes til div om man er i edit mode, og skal da ikke ha interactive effekter
     &:not(div) {
@@ -92,7 +90,7 @@
     &--fill,
     &--line {
       &--white {
-        background-color: var(--color-base-background-white);
+        background-color: var(--color-base-background-light);
       }
 
       &--blueberry {
@@ -109,7 +107,7 @@
     }
 
     &--fill-negative {
-      background-color: var(--color-base-background-white);
+      background-color: var(--color-base-background-light);
     }
 
     &--fill,
@@ -146,7 +144,7 @@
       line-height: font-settings.$lineheight-size-xs;
     }
 
-    &--medium {
+    &--normal {
       font-size: font-settings.$font-size-sm;
       line-height: font-settings.$lineheight-size-sm;
     }
@@ -162,7 +160,7 @@
         line-height: font-settings.$lineheight-size-sm;
       }
 
-      &--medium {
+      &--normal {
         font-size: font-settings.$font-size-md;
         line-height: font-settings.$lineheight-size-md;
       }
@@ -215,17 +213,17 @@
     }
 
     &:focus-visible {
-      outline: 4px solid var(--color-action-border-onlight-focus);
+      outline: 4px solid var(--color-action-border-dark-focus);
       outline-offset: 0; // Override user agent default
       position: relative;
       z-index: 1;
     }
 
     &--outline {
-      background-color: var(--color-base-background-white);
+      background-color: var(--color-base-background-light);
 
       &--white {
-        background-color: var(--color-base-background-white);
+        background-color: var(--color-base-background-light);
       }
 
       &--blueberry {
@@ -304,7 +302,7 @@
     background-color: transparent;
 
     &--new {
-      background-color: var(--color-notification-status-info);
+      background-color: var(--color-notification-info);
     }
   }
 }

package/lib/components/LinkList/styles.module.scss.d.ts

@@ -19,9 +19,9 @@ export type Styles = {
   'link-list__anchor--line--cherry': string;
   'link-list__anchor--line--neutral': string;
   'link-list__anchor--line--white': string;
-  'link-list__anchor--medium': string;
   'link-list__anchor--neutral': string;
   'link-list__anchor--new': string;
+  'link-list__anchor--normal': string;
   'link-list__anchor--outline': string;
   'link-list__anchor--outline--blueberry': string;
   'link-list__anchor--outline--cherry': string;

package/lib/components/ListEditMode/styles.module.scss

@@ -3,8 +3,6 @@
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/palette' as palette;
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
-@import '../../scss/supernova/styles/spacers.css';
 
 .list-edit-mode {
   border: none !important;
@@ -21,15 +19,15 @@
     cursor: pointer;
 
     &:hover {
-      background-color: var(--color-action-background-transparent-onmulticolor-hover);
+      background-color: var(--color-action-background-transparent-multi-onlight-hover);
     }
 
     &:active {
-      background-color: var(--color-action-background-transparent-onmulticolor-active);
+      background-color: var(--color-action-background-transparent-multi-ondark-hover);
     }
 
     &:focus-visible {
-      outline: 4px solid var(--color-action-border-onlight-focus);
+      outline: 4px solid var(--color-action-border-dark-focus);
     }
   }
 
@@ -41,10 +39,10 @@
 
     &--neutral,
     &--white {
-      border-bottom: 1px solid var(--color-base-border-onlight);
+      border-bottom: 1px solid var(--color-base-border-dark);
 
       &:first-of-type {
-        border-top: 1px solid var(--color-base-border-onlight);
+        border-top: 1px solid var(--color-base-border-dark);
       }
     }
 

package/lib/components/Loader/Loader.d.ts

@@ -1,7 +1,7 @@
 import { PaletteNames } from '../../theme/palette';
 import { Overlay } from './constants';
 export type LoaderColors = PaletteNames;
-export type LoaderSizes = 'tiny' | 'small' | 'medium' | 'large';
+export type LoaderSizes = 'tiny' | 'normal' | 'medium' | 'large';
 export interface LoaderProps {
     /** Sets the color of the loader. If overlay is used, the color will always be white.  */
     color?: LoaderColors;

package/lib/components/Loader/index.js

@@ -13,7 +13,7 @@ var Overlay = /* @__PURE__ */ function(Overlay) {
 //#endregion
 //#region src/components/Loader/Loader.tsx
 var Loader = (props) => {
-	const { overlay, size = "small", className = "", labelId = uuid(), testId, center, inline, ariaLabelledById, ariaLabel = "Laster inn" } = props;
+	const { overlay, size = "normal", className = "", labelId = uuid(), testId, center, inline, ariaLabelledById, ariaLabel = "Laster inn" } = props;
 	const color = props.overlay ? "white" : props.color || "neutral";
 	const showLoader = () => {
 		if (overlay === Overlay.parent || inline) return false;
@@ -21,7 +21,7 @@ var Loader = (props) => {
 	};
 	const [display, setDisplay] = useState(showLoader());
 	const hasInitializedRef = useRef(false);
-	const isSmall = size === "small";
+	const isNormal = size === "normal";
 	const isMedium = size === "medium";
 	const isLarge = size === "large";
 	const loaderWrapperClasses = classNames({
@@ -32,12 +32,12 @@ var Loader = (props) => {
 		[loaderStyles["loader-wrapper--inline"]]: inline && display
 	});
 	const loaderClasses = classNames(loaderStyles.loader, {
-		[loaderStyles["loader--small"]]: isSmall,
+		[loaderStyles["loader--normal"]]: isNormal,
 		[loaderStyles["loader--medium"]]: isMedium,
 		[loaderStyles["loader--large"]]: isLarge
 	}, className);
 	const loaderDotClasses = classNames(loaderStyles.loader__dot, {
-		[loaderStyles["loader__dot--small"]]: isSmall,
+		[loaderStyles["loader__dot--normal"]]: isNormal,
 		[loaderStyles["loader__dot--medium"]]: isMedium,
 		[loaderStyles["loader__dot--large"]]: isLarge,
 		[loaderStyles["loader__dot--banana"]]: color === "banana",

package/lib/components/Loader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Loader/constants.ts","../../../src/components/Loader/Loader.tsx","../../../src/components/Loader/index.ts"],"sourcesContent":["export enum Overlay {\n  screen = 'screen',\n  parent = 'parent',\n}\n","import { useCallback, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\n\nimport { Overlay } from './constants';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { uuid } from '../../utils/uuid';\n\nimport loaderStyles from './styles.module.scss';\n\nexport type LoaderColors = PaletteNames;\nexport type LoaderSizes = 'tiny' | 'small' | 'medium' | 'large';\n\nexport interface LoaderProps {\n  /** Sets the color of the loader. If overlay is used, the color will always be white.  */\n  color?: LoaderColors;\n  /**\tAdds custom classes to the element. */\n  className?: string;\n  /** Changes the size of the loader. */\n  size?: LoaderSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** id of the label */\n  labelId?: string;\n  /** Centers the loader in a container */\n  center?: boolean;\n  /** Inline the loader so it can be used in a span or paragraph */\n  inline?: boolean;\n  /** Loader is displayed with grey background covering the entire screen */\n  overlay?: keyof typeof Overlay;\n  /** Individual id for loading icon (aria-labelledby).  */\n  ariaLabelledById?: string;\n  /** String that labels the current loading element  */\n  ariaLabel?: string;\n}\n\nconst Loader: React.FC<LoaderProps> = props => {\n  const {\n    overlay,\n    size = 'small',\n    className = '',\n    labelId = uuid(),\n    testId,\n    center,\n    inline,\n    ariaLabelledById,\n    ariaLabel = 'Laster inn',\n  } = props;\n  const color = props.overlay ? 'white' : props.color || 'neutral';\n\n  const showLoader = (): boolean => {\n    if (overlay === Overlay.parent || inline) {\n      return false;\n    }\n\n    return true;\n  };\n\n  const [display, setDisplay] = useState(showLoader());\n  const hasInitializedRef = useRef(false);\n\n  const isSmall = size === 'small';\n  const isMedium = size === 'medium';\n  const isLarge = size === 'large';\n\n  const loaderWrapperClasses = classNames({\n    [loaderStyles['loader-wrapper--center']]: center,\n    [loaderStyles['loader-wrapper--overlay']]: overlay,\n    [loaderStyles['loader-wrapper--overlay-screen']]: overlay === Overlay.screen,\n    [loaderStyles['loader-wrapper--overlay-parent']]: overlay === Overlay.parent && display,\n    [loaderStyles['loader-wrapper--inline']]: inline && display,\n  });\n  const loaderClasses = classNames(\n    loaderStyles.loader,\n    {\n      [loaderStyles['loader--small']]: isSmall,\n      [loaderStyles['loader--medium']]: isMedium,\n      [loaderStyles['loader--large']]: isLarge,\n    },\n    className\n  );\n  const loaderDotClasses = classNames(loaderStyles.loader__dot, {\n    [loaderStyles['loader__dot--small']]: isSmall,\n    [loaderStyles['loader__dot--medium']]: isMedium,\n    [loaderStyles['loader__dot--large']]: isLarge,\n    [loaderStyles['loader__dot--banana']]: color === 'banana',\n    [loaderStyles['loader__dot--cherry']]: color === 'cherry',\n    [loaderStyles['loader__dot--kiwi']]: color === 'kiwi',\n    [loaderStyles['loader__dot--neutral']]: color === 'neutral',\n    [loaderStyles['loader__dot--plum']]: color === 'plum',\n    [loaderStyles['loader__dot--black']]: color === 'black',\n    [loaderStyles['loader__dot--white']]: color === 'white',\n  });\n\n  const wrapperRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      if (node && !hasInitializedRef.current) {\n        hasInitializedRef.current = true;\n        if (overlay === Overlay.parent && node.parentElement?.style) {\n          node.parentElement.style.position = 'relative';\n          setDisplay(true);\n        }\n        if (inline && node.parentElement?.style) {\n          node.parentElement.style.display = 'flex';\n          setDisplay(true);\n        }\n      }\n    },\n    [overlay, inline]\n  );\n\n  return (\n    <div className={loaderWrapperClasses} ref={wrapperRef} style={overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {}}>\n      {display && (\n        <div\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Loader}\n          role=\"progressbar\"\n          aria-labelledby={ariaLabelledById || labelId}\n          className={loaderClasses}\n        >\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          {!ariaLabelledById && (\n            <span id={labelId} className={loaderStyles['loader__hidden-text']}>\n              {ariaLabel}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Loader;\n","import Loader from './Loader';\nexport { Overlay } from './constants';\nexport * from './Loader';\nexport default Loader;\n"],"mappings":";;;;;;;AAAA,IAAY,UAAL,yBAAA,SAAA;CACL,QAAA,YAAA;CACA,QAAA,YAAA;;AACF,EAAA,CAAA,CAAA;;;ACmCA,IAAM,UAAgC,UAAS;CAC7C,MAAM,EACJ,SACA,OAAO,SACP,YAAY,IACZ,UAAU,KAAK,GACf,QACA,QACA,QACA,kBACA,YAAY,iBACV;CACJ,MAAM,QAAQ,MAAM,UAAU,UAAU,MAAM,SAAS;CAEvD,MAAM,mBAA4B;EAChC,IAAI,YAAY,QAAQ,UAAU,QAChC,OAAO;EAGT,OAAO;CACT;CAEA,MAAM,CAAC,SAAS,cAAc,SAAS,WAAW,CAAC;CACnD,MAAM,oBAAoB,OAAO,KAAK;CAEtC,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CAEzB,MAAM,uBAAuB,WAAW;GACrC,aAAa,4BAA4B;GACzC,aAAa,6BAA6B;GAC1C,aAAa,oCAAoC,YAAY,QAAQ;GACrE,aAAa,oCAAoC,YAAY,QAAQ,UAAU;GAC/E,aAAa,4BAA4B,UAAU;CACtD,CAAC;CACD,MAAM,gBAAgB,WACpB,aAAa,QACb;GACG,aAAa,mBAAmB;GAChC,aAAa,oBAAoB;GACjC,aAAa,mBAAmB;CACnC,GACA,SACF;CACA,MAAM,mBAAmB,WAAW,aAAa,aAAa;GAC3D,aAAa,wBAAwB;GACrC,aAAa,yBAAyB;GACtC,aAAa,wBAAwB;GACrC,aAAa,yBAAyB,UAAU;GAChD,aAAa,yBAAyB,UAAU;GAChD,aAAa,uBAAuB,UAAU;GAC9C,aAAa,0BAA0B,UAAU;GACjD,aAAa,uBAAuB,UAAU;GAC9C,aAAa,wBAAwB,UAAU;GAC/C,aAAa,wBAAwB,UAAU;CAClD,CAAC;CAED,MAAM,aAAa,aAChB,SAAgC;EAC/B,IAAI,QAAQ,CAAC,kBAAkB,SAAS;GACtC,kBAAkB,UAAU;GAC5B,IAAI,YAAY,QAAQ,UAAU,KAAK,eAAe,OAAO;IAC3D,KAAK,cAAc,MAAM,WAAW;IACpC,WAAW,IAAI;GACjB;GACA,IAAI,UAAU,KAAK,eAAe,OAAO;IACvC,KAAK,cAAc,MAAM,UAAU;IACnC,WAAW,IAAI;GACjB;EACF;CACF,GACA,CAAC,SAAS,MAAM,CAClB;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EAAsB,KAAK;EAAY,OAAO,YAAY,QAAQ,SAAS,EAAE,QAAQ,OAAO,cAAc,IAAI,CAAC;EAC5H,UAAA,WACC,qBAAC,OAAD;GACE,eAAa;GACb,oBAAkB,YAAY;GAC9B,MAAK;GACL,mBAAiB,oBAAoB;GACrC,WAAW;GALb,UAAA;IAOE,oBAAC,OAAD,EAAK,WAAW,iBAAmB,CAAA;IACnC,oBAAC,OAAD,EAAK,WAAW,iBAAmB,CAAA;IACnC,oBAAC,OAAD,EAAK,WAAW,iBAAmB,CAAA;IACnC,oBAAC,OAAD,EAAK,WAAW,iBAAmB,CAAA;IAClC,CAAC,oBACA,oBAAC,QAAD;KAAM,IAAI;KAAS,WAAW,aAAa;KACxC,UAAA;IACG,CAAA;GAEL;;CAEJ,CAAA;AAET;;;ACrIA,IAAA,iBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Loader/constants.ts","../../../src/components/Loader/Loader.tsx","../../../src/components/Loader/index.ts"],"sourcesContent":["export enum Overlay {\n  screen = 'screen',\n  parent = 'parent',\n}\n","import { useCallback, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\n\nimport { Overlay } from './constants';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { uuid } from '../../utils/uuid';\n\nimport loaderStyles from './styles.module.scss';\n\nexport type LoaderColors = PaletteNames;\nexport type LoaderSizes = 'tiny' | 'normal' | 'medium' | 'large';\n\nexport interface LoaderProps {\n  /** Sets the color of the loader. If overlay is used, the color will always be white.  */\n  color?: LoaderColors;\n  /**\tAdds custom classes to the element. */\n  className?: string;\n  /** Changes the size of the loader. */\n  size?: LoaderSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** id of the label */\n  labelId?: string;\n  /** Centers the loader in a container */\n  center?: boolean;\n  /** Inline the loader so it can be used in a span or paragraph */\n  inline?: boolean;\n  /** Loader is displayed with grey background covering the entire screen */\n  overlay?: keyof typeof Overlay;\n  /** Individual id for loading icon (aria-labelledby).  */\n  ariaLabelledById?: string;\n  /** String that labels the current loading element  */\n  ariaLabel?: string;\n}\n\nconst Loader: React.FC<LoaderProps> = props => {\n  const {\n    overlay,\n    size = 'normal',\n    className = '',\n    labelId = uuid(),\n    testId,\n    center,\n    inline,\n    ariaLabelledById,\n    ariaLabel = 'Laster inn',\n  } = props;\n  const color = props.overlay ? 'white' : props.color || 'neutral';\n\n  const showLoader = (): boolean => {\n    if (overlay === Overlay.parent || inline) {\n      return false;\n    }\n\n    return true;\n  };\n\n  const [display, setDisplay] = useState(showLoader());\n  const hasInitializedRef = useRef(false);\n\n  const isNormal = size === 'normal';\n  const isMedium = size === 'medium';\n  const isLarge = size === 'large';\n\n  const loaderWrapperClasses = classNames({\n    [loaderStyles['loader-wrapper--center']]: center,\n    [loaderStyles['loader-wrapper--overlay']]: overlay,\n    [loaderStyles['loader-wrapper--overlay-screen']]: overlay === Overlay.screen,\n    [loaderStyles['loader-wrapper--overlay-parent']]: overlay === Overlay.parent && display,\n    [loaderStyles['loader-wrapper--inline']]: inline && display,\n  });\n  const loaderClasses = classNames(\n    loaderStyles.loader,\n    {\n      [loaderStyles['loader--normal']]: isNormal,\n      [loaderStyles['loader--medium']]: isMedium,\n      [loaderStyles['loader--large']]: isLarge,\n    },\n    className\n  );\n  const loaderDotClasses = classNames(loaderStyles.loader__dot, {\n    [loaderStyles['loader__dot--normal']]: isNormal,\n    [loaderStyles['loader__dot--medium']]: isMedium,\n    [loaderStyles['loader__dot--large']]: isLarge,\n    [loaderStyles['loader__dot--banana']]: color === 'banana',\n    [loaderStyles['loader__dot--cherry']]: color === 'cherry',\n    [loaderStyles['loader__dot--kiwi']]: color === 'kiwi',\n    [loaderStyles['loader__dot--neutral']]: color === 'neutral',\n    [loaderStyles['loader__dot--plum']]: color === 'plum',\n    [loaderStyles['loader__dot--black']]: color === 'black',\n    [loaderStyles['loader__dot--white']]: color === 'white',\n  });\n\n  const wrapperRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      if (node && !hasInitializedRef.current) {\n        hasInitializedRef.current = true;\n        if (overlay === Overlay.parent && node.parentElement?.style) {\n          node.parentElement.style.position = 'relative';\n          setDisplay(true);\n        }\n        if (inline && node.parentElement?.style) {\n          node.parentElement.style.display = 'flex';\n          setDisplay(true);\n        }\n      }\n    },\n    [overlay, inline]\n  );\n\n  return (\n    <div className={loaderWrapperClasses} ref={wrapperRef} style={overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {}}>\n      {display && (\n        <div\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Loader}\n          role=\"progressbar\"\n          aria-labelledby={ariaLabelledById || labelId}\n          className={loaderClasses}\n        >\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          {!ariaLabelledById && (\n            <span id={labelId} className={loaderStyles['loader__hidden-text']}>\n              {ariaLabel}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Loader;\n","import Loader from './Loader';\nexport { Overlay } from './constants';\nexport * from './Loader';\nexport default Loader;\n"],"mappings":";;;;;;;AAAA,IAAY,UAAL,yBAAA,SAAA;CACL,QAAA,YAAA;CACA,QAAA,YAAA;;AACF,EAAA,CAAA,CAAA;;;ACmCA,IAAM,UAAgC,UAAS;CAC7C,MAAM,EACJ,SACA,OAAO,UACP,YAAY,IACZ,UAAU,KAAK,GACf,QACA,QACA,QACA,kBACA,YAAY,iBACV;CACJ,MAAM,QAAQ,MAAM,UAAU,UAAU,MAAM,SAAS;CAEvD,MAAM,mBAA4B;EAChC,IAAI,YAAY,QAAQ,UAAU,QAChC,OAAO;EAGT,OAAO;CACT;CAEA,MAAM,CAAC,SAAS,cAAc,SAAS,WAAW,CAAC;CACnD,MAAM,oBAAoB,OAAO,KAAK;CAEtC,MAAM,WAAW,SAAS;CAC1B,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CAEzB,MAAM,uBAAuB,WAAW;GACrC,aAAa,4BAA4B;GACzC,aAAa,6BAA6B;GAC1C,aAAa,oCAAoC,YAAY,QAAQ;GACrE,aAAa,oCAAoC,YAAY,QAAQ,UAAU;GAC/E,aAAa,4BAA4B,UAAU;CACtD,CAAC;CACD,MAAM,gBAAgB,WACpB,aAAa,QACb;GACG,aAAa,oBAAoB;GACjC,aAAa,oBAAoB;GACjC,aAAa,mBAAmB;CACnC,GACA,SACF;CACA,MAAM,mBAAmB,WAAW,aAAa,aAAa;GAC3D,aAAa,yBAAyB;GACtC,aAAa,yBAAyB;GACtC,aAAa,wBAAwB;GACrC,aAAa,yBAAyB,UAAU;GAChD,aAAa,yBAAyB,UAAU;GAChD,aAAa,uBAAuB,UAAU;GAC9C,aAAa,0BAA0B,UAAU;GACjD,aAAa,uBAAuB,UAAU;GAC9C,aAAa,wBAAwB,UAAU;GAC/C,aAAa,wBAAwB,UAAU;CAClD,CAAC;CAED,MAAM,aAAa,aAChB,SAAgC;EAC/B,IAAI,QAAQ,CAAC,kBAAkB,SAAS;GACtC,kBAAkB,UAAU;GAC5B,IAAI,YAAY,QAAQ,UAAU,KAAK,eAAe,OAAO;IAC3D,KAAK,cAAc,MAAM,WAAW;IACpC,WAAW,IAAI;GACjB;GACA,IAAI,UAAU,KAAK,eAAe,OAAO;IACvC,KAAK,cAAc,MAAM,UAAU;IACnC,WAAW,IAAI;GACjB;EACF;CACF,GACA,CAAC,SAAS,MAAM,CAClB;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EAAsB,KAAK;EAAY,OAAO,YAAY,QAAQ,SAAS,EAAE,QAAQ,OAAO,cAAc,IAAI,CAAC;EAC5H,UAAA,WACC,qBAAC,OAAD;GACE,eAAa;GACb,oBAAkB,YAAY;GAC9B,MAAK;GACL,mBAAiB,oBAAoB;GACrC,WAAW;GALb,UAAA;IAOE,oBAAC,OAAD,EAAK,WAAW,iBAAmB,CAAA;IACnC,oBAAC,OAAD,EAAK,WAAW,iBAAmB,CAAA;IACnC,oBAAC,OAAD,EAAK,WAAW,iBAAmB,CAAA;IACnC,oBAAC,OAAD,EAAK,WAAW,iBAAmB,CAAA;IAClC,CAAC,oBACA,oBAAC,QAAD;KAAM,IAAI;KAAS,WAAW,aAAa;KACxC,UAAA;IACG,CAAA;GAEL;;CAEJ,CAAA;AAET;;;ACrIA,IAAA,iBAAe"}

package/lib/components/Loader/styles.module.scss

@@ -79,7 +79,7 @@
   width: 8 * 5px;
   height: 8px;
 
-  &--small {
+  &--normal {
     width: 12 * 5px;
     height: 12px;
   }
@@ -108,7 +108,7 @@
     // Sets a form of easing animation curve
     animation-timing-function: cubic-bezier(0, 1, 1, 0);
 
-    &--small {
+    &--normal {
       width: 12px;
       height: 12px;
     }
@@ -166,9 +166,9 @@
       left: 16px;
     }
 
-    &--small:nth-child(2),
-    &--small:nth-child(3) {
-      @include loader-dot-translate(translate-small, 24px);
+    &--normal:nth-child(2),
+    &--normal:nth-child(3) {
+      @include loader-dot-translate(translate-normal, 24px);
     }
 
     &--medium:nth-child(2),
@@ -181,7 +181,7 @@
       @include loader-dot-translate(translate-large, 48px);
     }
 
-    &--small:nth-child(3) {
+    &--normal:nth-child(3) {
       left: 24px;
     }
 
@@ -200,7 +200,7 @@
       @include loader-dot-scale(scale-reverse, 1, 0);
     }
 
-    &--small:nth-child(4) {
+    &--normal:nth-child(4) {
       left: 48px;
     }
 

package/lib/components/Loader/styles.module.scss.d.ts

@@ -8,13 +8,13 @@ export type Styles = {
   'loader__dot--large': string;
   'loader__dot--medium': string;
   'loader__dot--neutral': string;
+  'loader__dot--normal': string;
   'loader__dot--plum': string;
-  'loader__dot--small': string;
   'loader__dot--white': string;
   'loader__hidden-text': string;
   'loader--large': string;
   'loader--medium': string;
-  'loader--small': string;
+  'loader--normal': string;
   'loader-wrapper--center': string;
   'loader-wrapper--inline': string;
   'loader-wrapper--overlay': string;
@@ -26,7 +26,7 @@ export type Styles = {
   translate: string;
   'translate-large': string;
   'translate-medium': string;
-  'translate-small': string;
+  'translate-normal': string;
   'translate-tiny': string;
 };
 

package/lib/components/Modal/constants.d.ts

@@ -5,6 +5,6 @@ export declare enum ModalVariants {
     success = "success"
 }
 export declare enum ModalSize {
-    large = "large",
+    normal = "normal",
     medium = "medium"
 }

package/lib/components/Modal/index.js

@@ -28,7 +28,7 @@ var ModalVariants = /* @__PURE__ */ function(ModalVariants) {
 	return ModalVariants;
 }({});
 var ModalSize = /* @__PURE__ */ function(ModalSize) {
-	ModalSize["large"] = "large";
+	ModalSize["normal"] = "normal";
 	ModalSize["medium"] = "medium";
 	return ModalSize;
 }({});
@@ -65,7 +65,7 @@ var getIcon = (variant, icon) => {
 	return null;
 };
 var Modal = (props) => {
-	const { footerContent, variant = ModalVariants.normal, primaryButtonText = "OK", titleId = uuid(), className = "", size = ModalSize.large, zIndex = ZIndex.OverlayScreen, role = "dialog" } = props;
+	const { footerContent, variant = ModalVariants.normal, primaryButtonText = "OK", titleId = uuid(), className = "", size = ModalSize.normal, zIndex = ZIndex.OverlayScreen, role = "dialog" } = props;
 	const topContent = React.useRef(null);
 	const modalContentRef = React.useRef(null);
 	const dialogRef = React.useRef(null);
@@ -172,7 +172,10 @@ var Modal = (props) => {
 											})
 										]
 									}),
-									props.children && /* @__PURE__ */ jsx("div", { children: props.children }),
+									props.children && /* @__PURE__ */ jsx("div", {
+										"data-overflow-boundary": true,
+										children: props.children
+									}),
 									!props.children && /* @__PURE__ */ jsx("p", {
 										className: styles.modal__description,
 										children: props.description

package/lib/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Modal/constants.ts","../../../src/components/Modal/Modal.tsx","../../../src/components/Modal/index.ts"],"sourcesContent":["export enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n","import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport type { IconProps } from '../Icon';\n\nimport { ModalSize, ModalVariants } from './constants';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isComponent } from '../../utils/component';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n  /** Aria role used for the Modal. Default is dialog */\n  role?: 'dialog' | 'alertdialog';\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): React.JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): React.JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {isComponent<IconProps>(icon, Icon) &&\n          React.cloneElement(icon, {\n            size: IconSize.Small,\n          })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    footerContent,\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.large,\n    zIndex = ZIndex.OverlayScreen,\n    role = 'dialog',\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n  useReturnFocusOnUnmount(dialogRef);\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess || footerContent;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: props.ariaLabel, id: props.ariaLabelledBy, fallbackId: titleId });\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div className={dialogClasses} role={role} aria-modal=\"true\" tabIndex={-1} {...ariaLabelAttributes} ref={dialogRef}>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper)}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              {...(contentIsScrollable ? ariaLabelAttributes : {})}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div className={cn(size && styles[`modal__contentWrapper__scroll--${size}`])}>\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {props.children && <div>{props.children}</div>}\n                {!props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && primaryButtonText && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n                {footerContent}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n","import Modal from './Modal';\nexport { ModalVariants, ModalSize } from './constants';\nexport * from './Modal';\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Modal/constants.ts","../../../src/components/Modal/Modal.tsx","../../../src/components/Modal/index.ts"],"sourcesContent":["export enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n}\n\nexport enum ModalSize {\n  normal = 'normal',\n  medium = 'medium',\n}\n","import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport type { IconProps } from '../Icon';\n\nimport { ModalSize, ModalVariants } from './constants';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isComponent } from '../../utils/component';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n  /** Aria role used for the Modal. Default is dialog */\n  role?: 'dialog' | 'alertdialog';\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): React.JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): React.JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {isComponent<IconProps>(icon, Icon) &&\n          React.cloneElement(icon, {\n            size: IconSize.Small,\n          })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    footerContent,\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.normal,\n    zIndex = ZIndex.OverlayScreen,\n    role = 'dialog',\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n  useReturnFocusOnUnmount(dialogRef);\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess || footerContent;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: props.ariaLabel, id: props.ariaLabelledBy, fallbackId: titleId });\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div className={dialogClasses} role={role} aria-modal=\"true\" tabIndex={-1} {...ariaLabelAttributes} ref={dialogRef}>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper)}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              {...(contentIsScrollable ? ariaLabelAttributes : {})}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div className={cn(size && styles[`modal__contentWrapper__scroll--${size}`])}>\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {props.children && <div data-overflow-boundary>{props.children}</div>}\n                {!props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && primaryButtonText && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n                {footerContent}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n","import Modal from './Modal';\nexport { ModalVariants, ModalSize } from './constants';\nexport * from './Modal';\nexport default Modal;\n"],"mappings":"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"}