@helsenorge/designsystem-react 14.10.0 → 14.11.1

package/lib/components/Icons/Sort.js

@@ -8,35 +8,35 @@ var Sort = ({ size, isHovered }) => {
 		normalHover: /* @__PURE__ */ jsx("path", { d: "m41.592 14.255-1.237 1.237-6.172-6.172v24.703h-1.75V9.32l-6.172 6.172-1.238-1.237 8.285-8.285 8.284 8.285ZM15.679 38.572l6.003-6.003 1.237 1.238-8.114 8.115-.003-.003H14.8l-8.114-8.112 1.238-1.238 6.004 6.004V14.018h1.75v24.554Z" }),
 		xSmall: /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx("path", {
-				"fill-rule": "evenodd",
-				"clip-rule": "evenodd",
+				fillRule: "evenodd",
+				clipRule: "evenodd",
 				d: "M31.905 12.936h-1.894v20.013h1.895V12.936Zm-13.913 2.219h-1.895v19.793h1.895V15.155Z"
 			}),
 			/* @__PURE__ */ jsx("path", {
-				"fill-rule": "evenodd",
-				"clip-rule": "evenodd",
+				fillRule: "evenodd",
+				clipRule: "evenodd",
 				d: "m32.296 11.918-1.34-1.34-6.77 6.77 1.34 1.34 6.77-6.77ZM15.707 36.096l1.34 1.34 6.77-6.771-1.34-1.34-6.77 6.771Z"
 			}),
 			/* @__PURE__ */ jsx("path", {
-				"fill-rule": "evenodd",
-				"clip-rule": "evenodd",
+				fillRule: "evenodd",
+				clipRule: "evenodd",
 				d: "m36.39 18.686 1.34-1.34-6.77-6.769-1.34 1.34 6.77 6.77ZM11.611 29.324l-1.34 1.34 6.771 6.77 1.34-1.34-6.77-6.77Z"
 			})
 		] }),
 		xSmallHover: /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx("path", {
-				"fill-rule": "evenodd",
-				"clip-rule": "evenodd",
+				fillRule: "evenodd",
+				clipRule: "evenodd",
 				d: "M31.905 11.673h-1.894v20.013h1.895V11.673Zm-13.913 4.744h-1.895v19.794h1.895V16.417Z"
 			}),
 			/* @__PURE__ */ jsx("path", {
-				"fill-rule": "evenodd",
-				"clip-rule": "evenodd",
+				fillRule: "evenodd",
+				clipRule: "evenodd",
 				d: "m32.296 10.654-1.34-1.34-6.77 6.77 1.34 1.34 6.77-6.77ZM15.707 37.36l1.34 1.34 6.77-6.771-1.34-1.34-6.77 6.77Z"
 			}),
 			/* @__PURE__ */ jsx("path", {
-				"fill-rule": "evenodd",
-				"clip-rule": "evenodd",
+				fillRule: "evenodd",
+				clipRule: "evenodd",
 				d: "m36.39 17.424 1.34-1.34-6.77-6.77-1.34 1.34 6.77 6.77ZM11.611 30.588l-1.34 1.34 6.771 6.77 1.34-1.34-6.77-6.77Z"
 			})
 		] })

package/lib/components/Icons/Sort.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sort.js","names":["Sort: React.FC<SvgPathProps>"],"sources":["../../../src/components/Icons/Sort.tsx"],"sourcesContent":["import type { SvgPathProps } from '../Icon';\n\nimport { getIcon } from '../Icon/utils';\n\nconst Sort: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n  const normal = (\n    <path d=\"m15.679 36.574 6.002-6.003 1.238 1.238-8.114 8.115-.003-.003H14.8L6.687 31.81l1.238-1.238 6.004 6.004V12.02h1.75v24.555Zm25.913-20.317-1.238 1.237-6.172-6.172v24.703h-1.75V11.322l-6.171 6.172-1.238-1.237 8.284-8.285 8.285 8.285Z\" />\n  );\n\n  const normalHover = (\n    <path d=\"m41.592 14.255-1.237 1.237-6.172-6.172v24.703h-1.75V9.32l-6.172 6.172-1.238-1.237 8.285-8.285 8.284 8.285ZM15.679 38.572l6.003-6.003 1.237 1.238-8.114 8.115-.003-.003H14.8l-8.114-8.112 1.238-1.238 6.004 6.004V14.018h1.75v24.554Z\" />\n  );\n\n  const xSmall = (\n    <>\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M31.905 12.936h-1.894v20.013h1.895V12.936Zm-13.913 2.219h-1.895v19.793h1.895V15.155Z\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"m32.296 11.918-1.34-1.34-6.77 6.77 1.34 1.34 6.77-6.77ZM15.707 36.096l1.34 1.34 6.77-6.771-1.34-1.34-6.77 6.771Z\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"m36.39 18.686 1.34-1.34-6.77-6.769-1.34 1.34 6.77 6.77ZM11.611 29.324l-1.34 1.34 6.771 6.77 1.34-1.34-6.77-6.77Z\"\n      />\n    </>\n  );\n\n  const xSmallHover = (\n    <>\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M31.905 11.673h-1.894v20.013h1.895V11.673Zm-13.913 4.744h-1.895v19.794h1.895V16.417Z\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"m32.296 10.654-1.34-1.34-6.77 6.77 1.34 1.34 6.77-6.77ZM15.707 37.36l1.34 1.34 6.77-6.771-1.34-1.34-6.77 6.77Z\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"m36.39 17.424 1.34-1.34-6.77-6.77-1.34 1.34 6.77 6.77ZM11.611 30.588l-1.34 1.34 6.771 6.77 1.34-1.34-6.77-6.77Z\"\n      />\n    </>\n  );\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover });\n};\n\nexport default Sort;\n"],"mappings":";;AAIA,IAAMA,QAAgC,EAAE,MAAM,gBAAkD;AAiD9F,QAAO,QAAQ;EAAE;EAAM;EAAW,QA/ChC,oBAAC,QAAA,EAAK,GAAE,wOAAA,CAAyO;EA+CzM,aA3CxC,oBAAC,QAAA,EAAK,GAAE,wOAAA,CAAyO;EA2C5L,QAvCrD,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAA;IACC,aAAU;IACV,aAAU;IACV,GAAE;KACF;GACF,oBAAC,QAAA;IACC,aAAU;IACV,aAAU;IACV,GAAE;KACF;GACF,oBAAC,QAAA;IACC,aAAU;IACV,aAAU;IACV,GAAE;KACF;MACD;EAuB0D,aAnB7D,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAA;IACC,aAAU;IACV,aAAU;IACV,GAAE;KACF;GACF,oBAAC,QAAA;IACC,aAAU;IACV,aAAU;IACV,GAAE;KACF;GACF,oBAAC,QAAA;IACC,aAAU;IACV,aAAU;IACV,GAAE;KACF;MACD;EAGuE,CAAC;;AAG/E,IAAA,eAAe"}
+{"version":3,"file":"Sort.js","names":["Sort: React.FC<SvgPathProps>"],"sources":["../../../src/components/Icons/Sort.tsx"],"sourcesContent":["import type { SvgPathProps } from '../Icon';\n\nimport { getIcon } from '../Icon/utils';\n\nconst Sort: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n  const normal = (\n    <path d=\"m15.679 36.574 6.002-6.003 1.238 1.238-8.114 8.115-.003-.003H14.8L6.687 31.81l1.238-1.238 6.004 6.004V12.02h1.75v24.555Zm25.913-20.317-1.238 1.237-6.172-6.172v24.703h-1.75V11.322l-6.171 6.172-1.238-1.237 8.284-8.285 8.285 8.285Z\" />\n  );\n\n  const normalHover = (\n    <path d=\"m41.592 14.255-1.237 1.237-6.172-6.172v24.703h-1.75V9.32l-6.172 6.172-1.238-1.237 8.285-8.285 8.284 8.285ZM15.679 38.572l6.003-6.003 1.237 1.238-8.114 8.115-.003-.003H14.8l-8.114-8.112 1.238-1.238 6.004 6.004V14.018h1.75v24.554Z\" />\n  );\n\n  const xSmall = (\n    <>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M31.905 12.936h-1.894v20.013h1.895V12.936Zm-13.913 2.219h-1.895v19.793h1.895V15.155Z\"\n      />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"m32.296 11.918-1.34-1.34-6.77 6.77 1.34 1.34 6.77-6.77ZM15.707 36.096l1.34 1.34 6.77-6.771-1.34-1.34-6.77 6.771Z\"\n      />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"m36.39 18.686 1.34-1.34-6.77-6.769-1.34 1.34 6.77 6.77ZM11.611 29.324l-1.34 1.34 6.771 6.77 1.34-1.34-6.77-6.77Z\"\n      />\n    </>\n  );\n\n  const xSmallHover = (\n    <>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M31.905 11.673h-1.894v20.013h1.895V11.673Zm-13.913 4.744h-1.895v19.794h1.895V16.417Z\"\n      />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"m32.296 10.654-1.34-1.34-6.77 6.77 1.34 1.34 6.77-6.77ZM15.707 37.36l1.34 1.34 6.77-6.771-1.34-1.34-6.77 6.77Z\"\n      />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"m36.39 17.424 1.34-1.34-6.77-6.77-1.34 1.34 6.77 6.77ZM11.611 30.588l-1.34 1.34 6.771 6.77 1.34-1.34-6.77-6.77Z\"\n      />\n    </>\n  );\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover });\n};\n\nexport default Sort;\n"],"mappings":";;AAIA,IAAMA,QAAgC,EAAE,MAAM,gBAAkD;AAiD9F,QAAO,QAAQ;EAAE;EAAM;EAAW,QA/ChC,oBAAC,QAAA,EAAK,GAAE,wOAAA,CAAyO;EA+CzM,aA3CxC,oBAAC,QAAA,EAAK,GAAE,wOAAA,CAAyO;EA2C5L,QAvCrD,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAA;IACC,UAAS;IACT,UAAS;IACT,GAAE;KACF;GACF,oBAAC,QAAA;IACC,UAAS;IACT,UAAS;IACT,GAAE;KACF;GACF,oBAAC,QAAA;IACC,UAAS;IACT,UAAS;IACT,GAAE;KACF;MACD;EAuB0D,aAnB7D,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAA;IACC,UAAS;IACT,UAAS;IACT,GAAE;KACF;GACF,oBAAC,QAAA;IACC,UAAS;IACT,UAAS;IACT,GAAE;KACF;GACF,oBAAC,QAAA;IACC,UAAS;IACT,UAAS;IACT,GAAE;KACF;MACD;EAGuE,CAAC;;AAG/E,IAAA,eAAe"}

package/lib/components/Illustration/index.js

@@ -1,3 +1,3 @@
-import { n as getIllustration, t as ViewBoxSize } from "../../utils4.js";
+import { n as getIllustration, t as ViewBoxSize } from "../../utils3.js";
 import { n as Illustration, t as Illustration_default } from "../../Illustration.js";
 export { Illustration, ViewBoxSize, Illustration_default as default, getIllustration };

package/lib/components/Illustrations/BabyMobile.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as BabyMobileMedium_default } from "../../BabyMobileMedium.js";
 import { jsx } from "react/jsx-runtime";
 var BabyMobile = ({ size = 512, color, ...rest }) => {

package/lib/components/Illustrations/Child.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as ChildMedium_default } from "../../ChildMedium.js";
 import { jsx } from "react/jsx-runtime";
 var Child = ({ size = 512, color, ...rest }) => {

package/lib/components/Illustrations/Doctor.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as DoctorMedium_default } from "../../DoctorMedium.js";
 import { t as DoctorSmall_default } from "../../DoctorSmall.js";
 import { jsx } from "react/jsx-runtime";

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

@@ -0,0 +1,8 @@
+import { SvgIllustrationProps } from '../Illustration';
+export interface Palette {
+    skin: string;
+    mother: string;
+    baby: string;
+}
+declare const EyeContact: React.FC<SvgIllustrationProps>;
+export default EyeContact;

package/lib/components/Illustrations/EyeContact.js

@@ -0,0 +1,16 @@
+import { n as getIllustration } from "../../utils3.js";
+import { t as EyeContactMedium_default } from "../../EyeContactMedium.js";
+import { jsx } from "react/jsx-runtime";
+var EyeContact = ({ size = 512, color, ...rest }) => {
+	return getIllustration({
+		size,
+		medium: /* @__PURE__ */ jsx(EyeContactMedium_default, {
+			color,
+			...rest
+		})
+	});
+};
+var EyeContact_default = EyeContact;
+export { EyeContact_default as default };
+
+//# sourceMappingURL=EyeContact.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EyeContact.js","names":["EyeContact: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/EyeContact.tsx"],"sourcesContent":["import type { SvgIllustrationProps } from '../Illustration';\n\nimport EyeContactMedium from './EyeContactMedium';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  skin: string;\n  mother: string;\n  baby: string;\n}\n\nconst EyeContact: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <EyeContactMedium color={color} {...rest} />;\n\n  return getIllustration({ size, medium });\n};\n\nexport default EyeContact;\n"],"mappings":";;;AAWA,IAAMA,cAA8C,EAAE,OAAO,KAAK,OAAO,GAAG,WAAW;AAGrF,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,0BAAA;GAAwB;GAAO,GAAI;IAAQ;EAEpB,CAAC;;AAG1C,IAAA,qBAAe"}

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

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

package/lib/components/Illustrations/EyeContactMedium.js

@@ -0,0 +1,2 @@
+import { t as EyeContactMedium_default } from "../../EyeContactMedium.js";
+export { EyeContactMedium_default as default };

package/lib/components/Illustrations/FacialRecognitionFingerprint.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as FacialRecognitionFingerprintMedium_default } from "../../FacialRecognitionFingerprintMedium.js";
 import { jsx } from "react/jsx-runtime";
 var FacialRecognitionFingerprint = ({ size = 512, color, ...rest }) => {

package/lib/components/Illustrations/GiveBabyFood.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as GiveBabyFoodMedium_default } from "../../GiveBabyFoodMedium.js";
 import { jsx } from "react/jsx-runtime";
 var GiveBabyFood = ({ size = 512, color, ...rest }) => {

package/lib/components/Illustrations/HealthcarePersonnel.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as HealthcarePersonnelMedium_default } from "../../HealthcarePersonnelMedium.js";
 import { t as HealthcarePersonnelSmall_default } from "../../HealthcarePersonnelSmall.js";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,5 +1,5 @@
 /** AUTO-GENERATED - DO NOT CHANGE MANUALLY **/
-export declare const IllustrationList: readonly ["BabyMobile", "Child", "Doctor", "FacialRecognitionFingerprint", "GiveBabyFood", "HealthcarePersonnel", "ReadLetters", "Stork", "Stroller", "Support2", "Thinking"];
+export declare const IllustrationList: readonly ["BabyMobile", "Child", "Doctor", "EyeContact", "FacialRecognitionFingerprint", "GiveBabyFood", "HealthcarePersonnel", "ReadLetters", "SkinToSkin", "Stork", "Stroller", "Support2", "Thinking"];
 export interface IllustrationSize {
     small?: string;
     medium?: string;

package/lib/components/Illustrations/ReadLetters.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as ReadLettersMedium_default } from "../../ReadLettersMedium.js";
 import { jsx } from "react/jsx-runtime";
 var ReadLetters = ({ size = 512, color, ...rest }) => {

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

@@ -0,0 +1,8 @@
+import { SvgIllustrationProps } from '../Illustration';
+export interface Palette {
+    hair: string;
+    skin: string;
+    clothes: string;
+}
+declare const SkinToSkin: React.FC<SvgIllustrationProps>;
+export default SkinToSkin;

package/lib/components/Illustrations/SkinToSkin.js

@@ -0,0 +1,16 @@
+import { n as getIllustration } from "../../utils3.js";
+import { t as SkinToSkinMedium_default } from "../../SkinToSkinMedium.js";
+import { jsx } from "react/jsx-runtime";
+var SkinToSkin = ({ size = 512, color, ...rest }) => {
+	return getIllustration({
+		size,
+		medium: /* @__PURE__ */ jsx(SkinToSkinMedium_default, {
+			color,
+			...rest
+		})
+	});
+};
+var SkinToSkin_default = SkinToSkin;
+export { SkinToSkin_default as default };
+
+//# sourceMappingURL=SkinToSkin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkinToSkin.js","names":["SkinToSkin: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/SkinToSkin.tsx"],"sourcesContent":["import type { SvgIllustrationProps } from '../Illustration';\n\nimport SkinToSkinMedium from './SkinToSkinMedium';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n  hair: string;\n  skin: string;\n  clothes: string;\n}\n\nconst SkinToSkin: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n  const medium = <SkinToSkinMedium color={color} {...rest} />;\n\n  return getIllustration({ size, medium });\n};\n\nexport default SkinToSkin;\n"],"mappings":";;;AAWA,IAAMA,cAA8C,EAAE,OAAO,KAAK,OAAO,GAAG,WAAW;AAGrF,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,0BAAA;GAAwB;GAAO,GAAI;IAAQ;EAEpB,CAAC;;AAG1C,IAAA,qBAAe"}

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

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

package/lib/components/Illustrations/SkinToSkinMedium.js

@@ -0,0 +1,2 @@
+import { t as SkinToSkinMedium_default } from "../../SkinToSkinMedium.js";
+export { SkinToSkinMedium_default as default };

package/lib/components/Illustrations/Stork.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as StorkMedium_default } from "../../StorkMedium.js";
 import { jsx } from "react/jsx-runtime";
 var Stork = ({ size = 512, color, ...rest }) => {

package/lib/components/Illustrations/Stroller.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as StrollerMedium_default } from "../../StrollerMedium.js";
 import { jsx } from "react/jsx-runtime";
 var Stroller = ({ size = 512, color, ...rest }) => {

package/lib/components/Illustrations/Support2.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as Support2Medium_default } from "../../Support2Medium.js";
 import { jsx } from "react/jsx-runtime";
 var Support2 = ({ size = 512, color, ...rest }) => {

package/lib/components/Illustrations/Thinking.js

@@ -1,4 +1,4 @@
-import { n as getIllustration } from "../../utils4.js";
+import { n as getIllustration } from "../../utils3.js";
 import { t as ThinkingMedium_default } from "../../ThinkingMedium.js";
 import { jsx } from "react/jsx-runtime";
 var Thinking = ({ size = 512, color, ...rest }) => {

package/lib/components/Panel/index.js

@@ -8,7 +8,7 @@ import { t as ChevronUp_default } from "../../ChevronUp.js";
 import { t as Highlighter_default } from "../../Highlighter.js";
 import { t as useExpand } from "../../useExpand.js";
 import { t as ChevronRight_default } from "../../ChevronRight.js";
-import { a as PanelVariant, i as PanelStatus, n as PanelLayout, r as PanelStacking, t as PanelListContext } from "../../utils5.js";
+import { a as PanelVariant, i as PanelStatus, n as PanelLayout, r as PanelStacking, t as PanelListContext } from "../../utils4.js";
 import { t as PanelTitle_default } from "../../PanelTitle.js";
 import classNames from "classnames";
 import React from "react";

package/lib/components/PanelList/index.js

@@ -1,5 +1,5 @@
 import { n as AnalyticsId } from "../../constants2.js";
-import { a as PanelVariant, t as PanelListContext } from "../../utils5.js";
+import { a as PanelVariant, t as PanelListContext } from "../../utils4.js";
 import classNames from "classnames";
 import React from "react";
 import { jsx } from "react/jsx-runtime";

package/lib/components/RadioButton/RadioMarker/RadioMarker.d.ts

@@ -0,0 +1,20 @@
+import { FormOnColor, FormSize } from '../../../constants';
+export interface RadioMarkerProps {
+    /** Whether the radio is checked. Controls the inner dot visibility. */
+    checked?: boolean;
+    /** Disables the visual state of the marker. */
+    disabled?: boolean;
+    /** Activates error styling. */
+    error?: boolean;
+    /** Background context the marker is rendered on. */
+    onColor?: keyof typeof FormOnColor;
+    /** Size variant of the marker. */
+    size?: keyof typeof FormSize;
+    /** Adds custom classes to the marker wrapper. */
+    className?: string;
+}
+/**
+ * Does not render an <input>; consumers render this on their end.
+ */
+export declare const RadioMarker: React.FC<RadioMarkerProps>;
+export default RadioMarker;

package/lib/components/RadioButton/RadioMarker/styles.module.scss

@@ -0,0 +1,288 @@
+@use '../../../scss/spacers' as spacers;
+@use '../../../scss/palette' as palette;
+@use 'sass:meta';
+@use 'sass:string';
+
+@mixin dashed-border() {
+  box-shadow: none;
+  position: relative;
+
+  &::after {
+    position: absolute;
+    content: '';
+
+    $encoded-color: string.slice(meta.inspect(palette.$neutral600), 2);
+
+    // Variabler for å lettere styre dashen i background-imaget under
+    $stroke: 4;
+    $dash: 0.2;
+    $gap: 7;
+    $scale: 1;
+    $stroke-scaled: $stroke * $scale;
+    $dash-scaled: $dash * $scale;
+    $gap-scaled: $gap * $scale;
+
+    border-radius: 100px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23#{$encoded-color}' stroke-width='#{$stroke-scaled}' stroke-dasharray='#{$dash-scaled},#{$gap-scaled}' stroke-linecap='square'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    width: 28px;
+    height: 28px;
+    inset: -2px;
+  }
+}
+
+.radio {
+  &__marker {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 10rem;
+    height: 1.5rem;
+    width: 1.5rem;
+    min-height: 1.5rem;
+    min-width: 1.5rem;
+    color: palette.$neutral700;
+    box-shadow: 0 0 0 spacers.getSpacer(4xs);
+
+    // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      background-color: transparent !important;
+      color: #fff !important;
+    }
+
+    &--on-blueberry {
+      color: palette.$blueberry500;
+    }
+
+    &--on-dark {
+      color: palette.$neutral200;
+    }
+
+    &--invalid {
+      color: palette.$cherry600;
+    }
+
+    &__regular#{&}--checked,
+    label:has(input:checked) &__regular {
+      color: palette.$blueberry500;
+    }
+
+    &__regular#{&}--checked#{&}--invalid,
+    label:has(input:checked) &__regular#{&}--invalid {
+      color: palette.$cherry600;
+    }
+
+    &__regular#{&}--checked#{&}--on-dark,
+    label:has(input:checked) &__regular#{&}--on-dark {
+      color: palette.$blueberry200;
+    }
+
+    &__regular#{&}--checked#{&}--disabled,
+    label:has(input:checked) &__regular#{&}--disabled {
+      color: palette.$neutral600;
+    }
+
+    &__large {
+      // empty stub — checked-state rules live at the &__marker level below
+    }
+
+    // Large size — checked appearance.
+    &__large#{&}--checked,
+    label:has(input:checked) &__large {
+      color: palette.$blueberry100;
+    }
+
+    &__large#{&}--checked#{&}--invalid,
+    label:has(input:checked) &__large#{&}--invalid {
+      color: palette.$cherry500;
+    }
+
+    &__large#{&}--checked#{&}--disabled,
+    label:has(input:checked) &__large#{&}--disabled {
+      color: palette.$neutral600;
+    }
+
+    &--disabled,
+    &--disabled#{&}--invalid,
+    &--disabled#{&}--on-dark {
+      @include dashed-border;
+
+      background-color: transparent;
+    }
+
+    // Focus styles when an input inside the wrapping label is focus-visible
+    label:has(:focus-visible) &#{&} {
+      box-shadow: 0 0 0 spacers.getSpacer(3xs);
+      color: palette.$black;
+
+      &--on-dark {
+        color: palette.$white;
+      }
+    }
+
+    label:has(:focus-visible) &__regular#{&}--checked,
+    label:has(input:checked:focus-visible) &__regular {
+      color: palette.$black;
+    }
+
+    label:has(:focus-visible) &__regular#{&}--checked#{&}--on-dark,
+    label:has(input:checked:focus-visible) &__regular#{&}--on-dark {
+      color: palette.$white;
+    }
+
+    label:has(:focus-visible) &__large#{&}--checked,
+    label:has(input:checked:focus-visible) &__large {
+      color: palette.$white;
+    }
+
+    label:has(:focus-visible) &__large#{&}--checked#{&}--invalid,
+    label:has(input:checked:focus-visible) &__large#{&}--invalid {
+      color: palette.$black;
+    }
+
+    // Hover styles via wrapping label
+    label:hover &,
+    label:active & {
+      box-shadow: 0 0 0 spacers.getSpacer(3xs);
+    }
+
+    label:hover &--on-white,
+    label:hover &--on-grey {
+      background-color: palette.$neutral100;
+    }
+
+    label:active &--on-white,
+    label:active &--on-grey {
+      background-color: palette.$blueberry100;
+    }
+
+    label:hover &--on-blueberry {
+      background-color: palette.$blueberry100;
+    }
+
+    label:active &--on-blueberry {
+      background-color: palette.$blueberry200;
+    }
+
+    label:hover &--on-invalid {
+      background-color: palette.$cherry100;
+    }
+
+    label:active &--on-invalid {
+      background-color: palette.$cherry200;
+    }
+
+    label:hover &--on-dark {
+      background-color: palette.$inverted-hover-old;
+    }
+
+    label:hover &__regular#{&}--checked,
+    label:has(input:checked):hover &__regular {
+      background-color: palette.$blueberry50;
+    }
+
+    label:active &__regular#{&}--checked,
+    label:has(input:checked):active &__regular {
+      background-color: palette.$blueberry100;
+    }
+
+    label:hover &__regular#{&}--checked#{&}--invalid,
+    label:has(input:checked):hover &__regular#{&}--invalid {
+      background-color: palette.$cherry100;
+    }
+
+    label:active &__regular#{&}--checked#{&}--invalid,
+    label:has(input:checked):active &__regular#{&}--invalid {
+      background-color: palette.$cherry200;
+    }
+
+    label:hover &__regular#{&}--checked#{&}--on-dark,
+    label:has(input:checked):hover &__regular#{&}--on-dark {
+      background-color: palette.$inverted-hover-old;
+    }
+
+    label:hover &__large#{&}--checked,
+    label:has(input:checked):hover &__large {
+      background-color: unset;
+    }
+
+    label:hover &__large#{&}--checked#{&}--invalid,
+    label:has(input:checked):hover &__large#{&}--invalid {
+      background-color: transparent;
+    }
+
+    label:hover &--disabled,
+    label:hover &--disabled#{&}--invalid,
+    label:hover &--disabled#{&}--on-dark {
+      box-shadow: none;
+      background-color: transparent;
+    }
+  }
+
+  &__marker-dot {
+    display: none;
+    background-color: palette.$blueberry500;
+    width: 0.875rem;
+    height: 0.875rem;
+    border-radius: 10rem;
+
+    // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      background-color: #fff !important;
+    }
+  }
+
+  // Show the dot visually
+  &__marker#{&}__marker--checked &__marker-dot,
+  label:has(input:checked) &__marker &__marker-dot {
+    display: block;
+  }
+
+  // Dot color follows the marker state (so the focus ring can turn black
+  // without recoloring the dot).
+  &__marker--on-dark &__marker-dot {
+    background-color: palette.$blueberry200;
+  }
+
+  &__marker--invalid &__marker-dot {
+    background-color: palette.$cherry600;
+  }
+
+  &__marker--disabled &__marker-dot {
+    background-color: palette.$neutral600;
+  }
+
+  &__marker__large#{&}__marker--checked &__marker-dot,
+  label:has(input:checked) &__marker__large &__marker-dot {
+    background-color: palette.$blueberry100;
+  }
+
+  &__marker__large#{&}__marker--checked#{&}__marker--invalid &__marker-dot,
+  label:has(input:checked) &__marker__large#{&}__marker--invalid &__marker-dot {
+    background-color: palette.$cherry500;
+  }
+
+  label:active &__marker-dot {
+    background-color: palette.$blueberry800;
+  }
+
+  label:active &__marker--on-dark &__marker-dot {
+    background-color: palette.$blueberry300;
+  }
+
+  label:active &__marker--invalid &__marker-dot {
+    background-color: palette.$cherry800;
+  }
+
+  label:active &__marker__large#{&}__marker--checked &__marker-dot,
+  label:has(input:checked):active &__marker__large &__marker-dot {
+    background-color: palette.$blueberry200;
+  }
+
+  label:active &__marker__large#{&}__marker--checked#{&}__marker--invalid &__marker-dot,
+  label:has(input:checked):active &__marker__large#{&}__marker--invalid &__marker-dot {
+    background-color: palette.$cherry700;
+  }
+}

package/lib/components/RadioButton/RadioMarker/styles.module.scss.d.ts

@@ -0,0 +1,20 @@
+export type Styles = {
+  radio__marker: string;
+  radio__marker__large: string;
+  radio__marker__regular: string;
+  'radio__marker--checked': string;
+  'radio__marker--disabled': string;
+  'radio__marker--invalid': string;
+  'radio__marker--on-blueberry': string;
+  'radio__marker--on-dark': string;
+  'radio__marker--on-grey': string;
+  'radio__marker--on-invalid': string;
+  'radio__marker--on-white': string;
+  'radio__marker-dot': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/RadioButton/index.d.ts

@@ -1,4 +1,3 @@
 import { default as RadioButton } from './RadioButton';
 export * from './RadioButton';
-export * from './utils';
 export default RadioButton;

package/lib/components/RadioButton/index.js

@@ -1,3 +1,3 @@
-import { n as RadioButton, t as getRadioLabelClasses } from "../../utils3.js";
-import { t as RadioButton_default } from "../../RadioButton.js";
-export { RadioButton, RadioButton_default as default, getRadioLabelClasses };
+import { t as RadioButton } from "../../RadioButton.js";
+import { t as RadioButton_default } from "../../RadioButton2.js";
+export { RadioButton, RadioButton_default as default };