@helsenorge/designsystem-react 15.7.1 → 16.0.0

package/lib/components/Illustrations/IllustrationNames.js

@@ -8,6 +8,7 @@ var IllustrationList = [
 	"FacialRecognitionFingerprint",
 	"GiveBabyFood",
 	"HealthcarePersonnel",
+	"MoveAway",
 	"ReadLetters",
 	"SkinToSkin",
 	"Stork",
@@ -29,6 +30,7 @@ var IllustrationSizeList = {
 		small: "HealthcarePersonnelSmall",
 		medium: "HealthcarePersonnelMedium"
 	},
+	MoveAway: { medium: "MoveAwayMedium" },
 	ReadLetters: { medium: "ReadLettersMedium" },
 	SkinToSkin: { medium: "SkinToSkinMedium" },
 	Stork: { medium: "StorkMedium" },

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

@@ -1 +1 @@
-{"version":3,"file":"IllustrationNames.js","names":[],"sources":["../../../src/components/Illustrations/IllustrationNames.ts"],"sourcesContent":["/** AUTO-GENERATED - DO NOT CHANGE MANUALLY **/\n\nexport const IllustrationList = [\n  'BabyMobile',\n  'Child',\n  'Doctor',\n  'EyeContact',\n  'FacialRecognitionFingerprint',\n  'GiveBabyFood',\n  'HealthcarePersonnel',\n  'ReadLetters',\n  'SkinToSkin',\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  EyeContact: { medium: 'EyeContactMedium' },\n  FacialRecognitionFingerprint: { medium: 'FacialRecognitionFingerprintMedium' },\n  GiveBabyFood: { medium: 'GiveBabyFoodMedium' },\n  HealthcarePersonnel: { small: 'HealthcarePersonnelSmall', medium: 'HealthcarePersonnelMedium' },\n  ReadLetters: { medium: 'ReadLettersMedium' },\n  SkinToSkin: { medium: 'SkinToSkinMedium' },\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,IAAa,mBAAmB;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAQA,IAAa,uBAAmE;CAC9E,YAAY,EAAE,QAAQ,mBAAmB;CACzC,OAAO,EAAE,QAAQ,cAAc;CAC/B,QAAQ;EAAE,OAAO;EAAe,QAAQ;CAAe;CACvD,YAAY,EAAE,QAAQ,mBAAmB;CACzC,8BAA8B,EAAE,QAAQ,qCAAqC;CAC7E,cAAc,EAAE,QAAQ,qBAAqB;CAC7C,qBAAqB;EAAE,OAAO;EAA4B,QAAQ;CAA4B;CAC9F,aAAa,EAAE,QAAQ,oBAAoB;CAC3C,YAAY,EAAE,QAAQ,mBAAmB;CACzC,OAAO,EAAE,QAAQ,cAAc;CAC/B,UAAU,EAAE,QAAQ,iBAAiB;CACrC,UAAU,EAAE,QAAQ,iBAAiB;CACrC,UAAU,EAAE,QAAQ,iBAAiB;AACvC"}
+{"version":3,"file":"IllustrationNames.js","names":[],"sources":["../../../src/components/Illustrations/IllustrationNames.ts"],"sourcesContent":["/** AUTO-GENERATED - DO NOT CHANGE MANUALLY **/\n\nexport const IllustrationList = [\n  'BabyMobile',\n  'Child',\n  'Doctor',\n  'EyeContact',\n  'FacialRecognitionFingerprint',\n  'GiveBabyFood',\n  'HealthcarePersonnel',\n  'MoveAway',\n  'ReadLetters',\n  'SkinToSkin',\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  EyeContact: { medium: 'EyeContactMedium' },\n  FacialRecognitionFingerprint: { medium: 'FacialRecognitionFingerprintMedium' },\n  GiveBabyFood: { medium: 'GiveBabyFoodMedium' },\n  HealthcarePersonnel: { small: 'HealthcarePersonnelSmall', medium: 'HealthcarePersonnelMedium' },\n  MoveAway: { medium: 'MoveAwayMedium' },\n  ReadLetters: { medium: 'ReadLettersMedium' },\n  SkinToSkin: { medium: 'SkinToSkinMedium' },\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,IAAa,mBAAmB;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAQA,IAAa,uBAAmE;CAC9E,YAAY,EAAE,QAAQ,mBAAmB;CACzC,OAAO,EAAE,QAAQ,cAAc;CAC/B,QAAQ;EAAE,OAAO;EAAe,QAAQ;CAAe;CACvD,YAAY,EAAE,QAAQ,mBAAmB;CACzC,8BAA8B,EAAE,QAAQ,qCAAqC;CAC7E,cAAc,EAAE,QAAQ,qBAAqB;CAC7C,qBAAqB;EAAE,OAAO;EAA4B,QAAQ;CAA4B;CAC9F,UAAU,EAAE,QAAQ,iBAAiB;CACrC,aAAa,EAAE,QAAQ,oBAAoB;CAC3C,YAAY,EAAE,QAAQ,mBAAmB;CACzC,OAAO,EAAE,QAAQ,cAAc;CAC/B,UAAU,EAAE,QAAQ,iBAAiB;CACrC,UAAU,EAAE,QAAQ,iBAAiB;CACrC,UAAU,EAAE,QAAQ,iBAAiB;AACvC"}

package/lib/components/Illustrations/MoveAway.d.ts

@@ -0,0 +1,11 @@
+import { SvgIllustrationProps } from '../Illustration';
+export interface Palette {
+    background: string;
+    door: string;
+    sweater: string;
+    pants: string;
+    arrow: string;
+    skin: string;
+}
+declare const MoveAway: React.FC<SvgIllustrationProps>;
+export default MoveAway;

package/lib/components/Illustrations/MoveAway.js

@@ -0,0 +1,18 @@
+import { n as getIllustration } from "../../utils3.js";
+import MoveAwayMedium from "./MoveAwayMedium.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Illustrations/MoveAway.tsx
+var MoveAway = ({ size = 512, color, ...rest }) => {
+	const medium = /* @__PURE__ */ jsx(MoveAwayMedium, {
+		color,
+		...rest
+	});
+	return getIllustration({
+		size,
+		medium
+	});
+};
+//#endregion
+export { MoveAway as default };
+
+//# sourceMappingURL=MoveAway.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MoveAway.js","names":[],"sources":["../../../src/components/Illustrations/MoveAway.tsx"],"sourcesContent":["import type { SvgIllustrationProps } from '../Illustration';\n\nimport MoveAwayMedium from './MoveAwayMedium';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  background: string;\n  door: string;\n  sweater: string;\n  pants: string;\n  arrow: string;\n  skin: string;\n}\n\nconst MoveAway: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <MoveAwayMedium color={color} {...rest} />;\n\n  return getIllustration({ size, medium });\n};\n\nexport default MoveAway;\n"],"mappings":";;;;AAcA,IAAM,YAA4C,EAAE,OAAO,KAAK,OAAO,GAAG,WAAW;CACnF,MAAM,SAAS,oBAAC,gBAAD;EAAuB;EAAO,GAAI;CAAO,CAAA;CAExD,OAAO,gBAAgB;EAAE;EAAM;CAAO,CAAC;AACzC"}

package/lib/components/Illustrations/MoveAwayMedium.d.ts

@@ -0,0 +1,3 @@
+import { BaseSvgIllustrationProps } from '../Illustration';
+declare const MoveAwayMedium: React.FC<BaseSvgIllustrationProps>;
+export default MoveAwayMedium;

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);