@helsenorge/designsystem-react 14.10.0 → 14.11.0

package/lib/IllustrationNames.js

@@ -2,10 +2,12 @@ const IllustrationList = [
 	"BabyMobile",
 	"Child",
 	"Doctor",
+	"EyeContact",
 	"FacialRecognitionFingerprint",
 	"GiveBabyFood",
 	"HealthcarePersonnel",
 	"ReadLetters",
+	"SkinToSkin",
 	"Stork",
 	"Stroller",
 	"Support2",
@@ -18,6 +20,7 @@ const IllustrationSizeList = {
 		small: "DoctorSmall",
 		medium: "DoctorMedium"
 	},
+	EyeContact: { medium: "EyeContactMedium" },
 	FacialRecognitionFingerprint: { medium: "FacialRecognitionFingerprintMedium" },
 	GiveBabyFood: { medium: "GiveBabyFoodMedium" },
 	HealthcarePersonnel: {
@@ -25,6 +28,7 @@ const IllustrationSizeList = {
 		medium: "HealthcarePersonnelMedium"
 	},
 	ReadLetters: { medium: "ReadLettersMedium" },
+	SkinToSkin: { medium: "SkinToSkinMedium" },
 	Stork: { medium: "StorkMedium" },
 	Stroller: { medium: "StrollerMedium" },
 	Support2: { medium: "Support2Medium" },

package/lib/IllustrationNames.js.map

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

package/lib/LazyIllustration.js

@@ -1,6 +1,6 @@
 import { n as ErrorBoundary_default, t as __rolldown_dynamic_import_helper_default } from "./_rolldown_dynamic_import_helper.js";
 import { t as useIsServerSide } from "./useIsServerSide.js";
-import { n as getIllustration } from "./utils4.js";
+import { n as getIllustration } from "./utils3.js";
 import { t as Illustration_default } from "./Illustration.js";
 import { n as IllustrationSizeList } from "./IllustrationNames.js";
 import { Suspense, lazy, useMemo } from "react";
@@ -20,6 +20,8 @@ const LazyIllustration = ({ illustrationName, size = 512, ...rest }) => {
 			"../Illustrations/Doctor.tsx": () => import("./components/Illustrations/Doctor.js"),
 			"../Illustrations/DoctorMedium.tsx": () => import("./components/Illustrations/DoctorMedium.js"),
 			"../Illustrations/DoctorSmall.tsx": () => import("./components/Illustrations/DoctorSmall.js"),
+			"../Illustrations/EyeContact.tsx": () => import("./components/Illustrations/EyeContact.js"),
+			"../Illustrations/EyeContactMedium.tsx": () => import("./components/Illustrations/EyeContactMedium.js"),
 			"../Illustrations/FacialRecognitionFingerprint.tsx": () => import("./components/Illustrations/FacialRecognitionFingerprint.js"),
 			"../Illustrations/FacialRecognitionFingerprintMedium.tsx": () => import("./components/Illustrations/FacialRecognitionFingerprintMedium.js"),
 			"../Illustrations/GiveBabyFood.tsx": () => import("./components/Illustrations/GiveBabyFood.js"),
@@ -29,6 +31,8 @@ const LazyIllustration = ({ illustrationName, size = 512, ...rest }) => {
 			"../Illustrations/HealthcarePersonnelSmall.tsx": () => import("./components/Illustrations/HealthcarePersonnelSmall.js"),
 			"../Illustrations/ReadLetters.tsx": () => import("./components/Illustrations/ReadLetters.js"),
 			"../Illustrations/ReadLettersMedium.tsx": () => import("./components/Illustrations/ReadLettersMedium.js"),
+			"../Illustrations/SkinToSkin.tsx": () => import("./components/Illustrations/SkinToSkin.js"),
+			"../Illustrations/SkinToSkinMedium.tsx": () => import("./components/Illustrations/SkinToSkinMedium.js"),
 			"../Illustrations/Stork.tsx": () => import("./components/Illustrations/Stork.js"),
 			"../Illustrations/StorkMedium.tsx": () => import("./components/Illustrations/StorkMedium.js"),
 			"../Illustrations/Stroller.tsx": () => import("./components/Illustrations/Stroller.js"),

package/lib/LazyIllustration.js.map

@@ -1 +1 @@
-{"version":3,"file":"LazyIllustration.js","names":["LazyIllustration: React.FC<LazyIllustrationProps>"],"sources":["../src/components/LazyIllustration/LazyIllustration.tsx","../src/components/LazyIllustration/index.ts"],"sourcesContent":["import { lazy, Suspense, useMemo } from 'react';\n\nimport type { BaseIllustrationProps, SvgIllustration } from '../Illustration';\nimport type { IllustrationName } from '../Illustrations/IllustrationNames';\n\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Illustration from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\nimport { IllustrationSizeList } from '../Illustrations/IllustrationNames';\nimport ErrorBoundary from '../LazyIcon/ErrorBoundary';\n\nexport interface LazyIllustrationProps extends BaseIllustrationProps {\n  // Navnet på illustrasjonen som skal vises. Tilsvarer filnavnet til illustrasjonen i Icons-mappen\n  illustrationName: IllustrationName;\n}\n\nexport const LazyIllustration: React.FC<LazyIllustrationProps> = ({ illustrationName, size = 512, ...rest }) => {\n  const lazyLoadIllustration = (illustrationName: IllustrationName, size: number): React.LazyExoticComponent<SvgIllustration> => {\n    const sizes = IllustrationSizeList[illustrationName];\n    const illustrationFileName = getIllustration({ size, ...sizes });\n\n    return lazy<SvgIllustration>(() => import(`../Illustrations/${illustrationFileName}.tsx`));\n  };\n\n  const illustration = useMemo(() => lazyLoadIllustration(illustrationName, size), [illustrationName, size]);\n  const isServerSide = useIsServerSide();\n\n  if (isServerSide) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 512 512\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={illustrationName}>\n      <Suspense fallback={fallback}>\n        <Illustration illustration={illustration} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIllustration;\n","import LazyIllustration from './LazyIllustration';\nexport * from './LazyIllustration';\nexport default LazyIllustration;\n"],"mappings":";;;;;;;AAgBA,MAAaA,oBAAqD,EAAE,kBAAkB,OAAO,KAAK,GAAG,WAAW;CAC9G,MAAM,wBAAwB,oBAAoC,WAA6D;EAC7H,MAAM,QAAQ,qBAAqB;EACnC,MAAM,uBAAuB,gBAAgB;GAAE,MAAA;GAAM,GAAG;GAAO,CAAC;AAEhE,SAAO,WAAA,yCAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAAmC,oBAAoB,qBAAqB,OAAA,EAAA,CAAO;;CAG5F,MAAM,eAAe,cAAc,qBAAqB,kBAAkB,KAAK,EAAE,CAAC,kBAAkB,KAAK,CAAC;AAG1G,KAFqB,iBAAiB,CAGpC,QAAO;CAGT,MAAM,WACJ,oBAAC,OAAA;EACC,eAAa;EACb,MAAM;EACN,WAAW;EACX,eAAa;EACb,SAAQ;EACR,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;GACR;AAGJ,QACE,oBAAC,uBAAA;EAAwB;EAAU,OAAO;YACxC,oBAAC,UAAA;GAAmB;aAClB,oBAAC,sBAAA;IAA2B;IAAoB;IAAM,GAAI;KAAQ;IACzD;GACG;;AC/CpB,IAAA,6BDmDe"}
+{"version":3,"file":"LazyIllustration.js","names":["LazyIllustration: React.FC<LazyIllustrationProps>"],"sources":["../src/components/LazyIllustration/LazyIllustration.tsx","../src/components/LazyIllustration/index.ts"],"sourcesContent":["import { lazy, Suspense, useMemo } from 'react';\n\nimport type { BaseIllustrationProps, SvgIllustration } from '../Illustration';\nimport type { IllustrationName } from '../Illustrations/IllustrationNames';\n\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Illustration from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\nimport { IllustrationSizeList } from '../Illustrations/IllustrationNames';\nimport ErrorBoundary from '../LazyIcon/ErrorBoundary';\n\nexport interface LazyIllustrationProps extends BaseIllustrationProps {\n  // Navnet på illustrasjonen som skal vises. Tilsvarer filnavnet til illustrasjonen i Icons-mappen\n  illustrationName: IllustrationName;\n}\n\nexport const LazyIllustration: React.FC<LazyIllustrationProps> = ({ illustrationName, size = 512, ...rest }) => {\n  const lazyLoadIllustration = (illustrationName: IllustrationName, size: number): React.LazyExoticComponent<SvgIllustration> => {\n    const sizes = IllustrationSizeList[illustrationName];\n    const illustrationFileName = getIllustration({ size, ...sizes });\n\n    return lazy<SvgIllustration>(() => import(`../Illustrations/${illustrationFileName}.tsx`));\n  };\n\n  const illustration = useMemo(() => lazyLoadIllustration(illustrationName, size), [illustrationName, size]);\n  const isServerSide = useIsServerSide();\n\n  if (isServerSide) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 512 512\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={illustrationName}>\n      <Suspense fallback={fallback}>\n        <Illustration illustration={illustration} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIllustration;\n","import LazyIllustration from './LazyIllustration';\nexport * from './LazyIllustration';\nexport default LazyIllustration;\n"],"mappings":";;;;;;;AAgBA,MAAaA,oBAAqD,EAAE,kBAAkB,OAAO,KAAK,GAAG,WAAW;CAC9G,MAAM,wBAAwB,oBAAoC,WAA6D;EAC7H,MAAM,QAAQ,qBAAqB;EACnC,MAAM,uBAAuB,gBAAgB;GAAE,MAAA;GAAM,GAAG;GAAO,CAAC;AAEhE,SAAO,WAAA,yCAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAAmC,oBAAoB,qBAAqB,OAAA,EAAA,CAAO;;CAG5F,MAAM,eAAe,cAAc,qBAAqB,kBAAkB,KAAK,EAAE,CAAC,kBAAkB,KAAK,CAAC;AAG1G,KAFqB,iBAAiB,CAGpC,QAAO;CAGT,MAAM,WACJ,oBAAC,OAAA;EACC,eAAa;EACb,MAAM;EACN,WAAW;EACX,eAAa;EACb,SAAQ;EACR,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;GACR;AAGJ,QACE,oBAAC,uBAAA;EAAwB;EAAU,OAAO;YACxC,oBAAC,UAAA;GAAmB;aAClB,oBAAC,sBAAA;IAA2B;IAAoB;IAAM,GAAI;KAAQ;IACzD;GACG;;AC/CpB,IAAA,6BDmDe"}

package/lib/Radio.js

@@ -0,0 +1,73 @@
+import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
+import { t as useIdWithFallback } from "./useIdWithFallback.js";
+import { t as getAriaDescribedBy } from "./accessibility.js";
+import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
+import classNames from "classnames";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/VisualRadioCloud/Radio/styles.module.scss";
+var Radio = (props) => {
+	const { className, checked, defaultChecked, children, inputId: inputIdProp, errorText, error = !!errorText, errorTextId: errorTextIdProp, errorWrapperClassName, testId, onChange, ref, ...rest } = props;
+	const inputId = useIdWithFallback(inputIdProp);
+	const errorTextId = useIdWithFallback(errorTextIdProp);
+	const isMobile = useIsMobileBreakpoint();
+	const [isChecked, setIsChecked] = useState(!!(checked ?? defaultChecked));
+	const [prevChecked, setPrevChecked] = useState(checked);
+	if (prevChecked !== checked) {
+		setPrevChecked(checked);
+		if (checked !== void 0 && checked !== isChecked) setIsChecked(checked);
+	}
+	const handleChange = (e) => {
+		setIsChecked(e.target.checked);
+		onChange?.(e);
+	};
+	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
+		className: errorWrapperClassName,
+		errorText,
+		errorTextId,
+		children: /* @__PURE__ */ jsxs("label", {
+			className: classNames(styles["visual-radio"], {
+				[styles["visual-radio--checked"]]: isChecked,
+				[styles["visual-radio--invalid"]]: error
+			}, className),
+			htmlFor: inputId,
+			"data-testid": testId,
+			children: [/* @__PURE__ */ jsx("input", {
+				...rest,
+				id: inputId,
+				ref,
+				className: styles["visual-radio__input"],
+				type: "radio",
+				checked: isChecked,
+				"aria-describedby": getAriaDescribedBy(props, errorTextId),
+				onChange: handleChange
+			}), /* @__PURE__ */ jsxs("span", {
+				className: styles["visual-radio__pill"],
+				children: [isChecked && /* @__PURE__ */ jsx("span", {
+					className: styles["visual-radio__icon"],
+					"aria-hidden": "true",
+					children: isMobile ? /* @__PURE__ */ jsx("svg", {
+						width: "8",
+						height: "8",
+						fill: "none",
+						xmlns: "http://www.w3.org/2000/svg",
+						children: /* @__PURE__ */ jsx("path", { d: "M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" })
+					}) : /* @__PURE__ */ jsx("svg", {
+						width: "12",
+						height: "12",
+						fill: "none",
+						xmlns: "http://www.w3.org/2000/svg",
+						children: /* @__PURE__ */ jsx("path", { d: "M6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12Z" })
+					})
+				}), /* @__PURE__ */ jsx("span", {
+					className: styles["visual-radio__label"],
+					children
+				})]
+			})]
+		})
+	});
+};
+var Radio_default = Radio;
+export { Radio_default as t };
+
+//# sourceMappingURL=Radio.js.map

package/lib/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","names":["Radio: React.FC<RadioProps>"],"sources":["../src/components/VisualRadioCloud/Radio/Radio.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../../ErrorWrapper';\n\nimport { useIdWithFallback } from '../../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../../hooks/useIsMobileBreakpoint';\nimport { getAriaDescribedBy } from '../../../utils/accessibility';\nimport ErrorWrapper from '../../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface RadioProps\n  extends\n    ErrorWrapperClassNameProps,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'className' | 'children' | 'size' | 'value'> {\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Label text shown inside the pill. */\n  children: React.ReactNode;\n  /** Value identifying this radio inside its group. Required. */\n  value: string;\n  /** input id of the underlying radio */\n  inputId?: string;\n  /** Activates error styling. Can be true while errorText is empty (e.g. when used in a cloud). */\n  error?: boolean;\n  /** Error text to show above the component. */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref forwarded to the underlying input element. */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst Radio: React.FC<RadioProps> = props => {\n  const {\n    className,\n    checked,\n    defaultChecked,\n    children,\n    inputId: inputIdProp,\n    errorText,\n    error = !!errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    testId,\n    onChange,\n    ref,\n    ...rest\n  } = props;\n\n  const inputId = useIdWithFallback(inputIdProp);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const isMobile = useIsMobileBreakpoint();\n  const [isChecked, setIsChecked] = useState<boolean>(!!(checked ?? defaultChecked));\n  const [prevChecked, setPrevChecked] = useState<boolean | undefined>(checked);\n  if (prevChecked !== checked) {\n    setPrevChecked(checked);\n    if (checked !== undefined && checked !== isChecked) {\n      setIsChecked(checked);\n    }\n  }\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    setIsChecked(e.target.checked);\n    onChange?.(e);\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <label\n        className={classNames(\n          styles['visual-radio'],\n          {\n            [styles['visual-radio--checked']]: isChecked,\n            [styles['visual-radio--invalid']]: error,\n          },\n          className\n        )}\n        htmlFor={inputId}\n        data-testid={testId}\n      >\n        <input\n          {...rest}\n          id={inputId}\n          ref={ref}\n          className={styles['visual-radio__input']}\n          type=\"radio\"\n          checked={isChecked}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n          onChange={handleChange}\n        />\n        <span className={styles['visual-radio__pill']}>\n          {isChecked && (\n            <span className={styles['visual-radio__icon']} aria-hidden=\"true\">\n              {isMobile ? (\n                <svg width=\"8\" height=\"8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z\" />\n                </svg>\n              ) : (\n                <svg width=\"12\" height=\"12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12Z\" />\n                </svg>\n              )}\n            </span>\n          )}\n          <span className={styles['visual-radio__label']}>{children}</span>\n        </span>\n      </label>\n    </ErrorWrapper>\n  );\n};\n\nexport default Radio;\n"],"mappings":";;;;;;;;AAqCA,IAAMA,SAA8B,UAAS;CAC3C,MAAM,EACJ,WACA,SACA,gBACA,UACA,SAAS,aACT,WACA,QAAQ,CAAC,CAAC,WACV,aAAa,iBACb,uBACA,QACA,UACA,KACA,GAAG,SACD;CAEJ,MAAM,UAAU,kBAAkB,YAAY;CAC9C,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,WAAW,uBAAuB;CACxC,MAAM,CAAC,WAAW,gBAAgB,SAAkB,CAAC,EAAE,WAAW,gBAAgB;CAClF,MAAM,CAAC,aAAa,kBAAkB,SAA8B,QAAQ;AAC5E,KAAI,gBAAgB,SAAS;AAC3B,iBAAe,QAAQ;AACvB,MAAI,YAAY,KAAA,KAAa,YAAY,UACvC,cAAa,QAAQ;;CAIzB,MAAM,gBAAgB,MAAiD;AACrE,eAAa,EAAE,OAAO,QAAQ;AAC9B,aAAW,EAAE;;AAGf,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,qBAAC,SAAA;GACC,WAAW,WACT,OAAO,iBACP;KACG,OAAO,2BAA2B;KAClC,OAAO,2BAA2B;IACpC,EACD,UACD;GACD,SAAS;GACT,eAAa;cAEb,oBAAC,SAAA;IACC,GAAI;IACJ,IAAI;IACC;IACL,WAAW,OAAO;IAClB,MAAK;IACL,SAAS;IACT,oBAAkB,mBAAmB,OAAO,YAAY;IACxD,UAAU;KACV,EACF,qBAAC,QAAA;IAAK,WAAW,OAAO;eACrB,aACC,oBAAC,QAAA;KAAK,WAAW,OAAO;KAAuB,eAAY;eACxD,WACC,oBAAC,OAAA;MAAI,OAAM;MAAI,QAAO;MAAI,MAAK;MAAO,OAAM;gBAC1C,oBAAC,QAAA,EAAK,GAAE,qCAAA,CAAsC;OAC1C,GAEN,oBAAC,OAAA;MAAI,OAAM;MAAK,QAAO;MAAK,MAAK;MAAO,OAAM;gBAC5C,oBAAC,QAAA,EAAK,GAAE,uCAAA,CAAwC;OAC5C;MAEH,EAET,oBAAC,QAAA;KAAK,WAAW,OAAO;KAAyB;MAAgB,CAAA;KAC5D,CAAA;IACD;GACK;;AAInB,IAAA,gBAAe"}

package/lib/RadioButton.js

@@ -1,5 +1,97 @@
-import { r as RadioButton_default } from "./utils3.js";
-var RadioButton_default$1 = RadioButton_default;
-export { RadioButton_default$1 as t };
+import { t as uuid } from "./uuid.js";
+import { i as FormSize, n as AnalyticsId, r as FormOnColor } from "./constants2.js";
+import { t as useIdWithFallback } from "./useIdWithFallback.js";
+import { t as getAriaDescribedBy } from "./accessibility.js";
+import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
+import { r as renderLabelAsParent, t as getLabelText } from "./utils2.js";
+import { t as RadioMarker_default } from "./RadioMarker.js";
+import classNames from "classnames";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import radioButtonStyles from "./components/RadioButton/styles.module.scss";
+const RadioButton = (props) => {
+	const { className, defaultChecked, onChange, disabled, label, inputId = uuid(), onColor = FormOnColor.onwhite, name = inputId, size, errorText, errorTextId: errorTextIdProp, error = !!errorText, errorWrapperClassName, value = getLabelText(label), testId, required, labelClassNames, ref, ...rest } = props;
+	const invalid = error || onColor === FormOnColor.oninvalid;
+	const onDark = onColor === FormOnColor.ondark;
+	const onGrey = onColor === FormOnColor.ongrey;
+	const onBlueberry = onColor === FormOnColor.onblueberry;
+	const onCherry = onColor === FormOnColor.oninvalid;
+	const isLarge = size === FormSize.large;
+	const [isChecked, setIsChecked] = useState(!!(props.checked ?? defaultChecked));
+	const [prevChecked, setPrevChecked] = useState(props.checked);
+	if (prevChecked !== props.checked) {
+		setPrevChecked(props.checked);
+		if (props.checked !== void 0 && props.checked !== isChecked) setIsChecked(props.checked);
+	}
+	const errorTextId = useIdWithFallback(errorTextIdProp);
+	const radioButtonWrapperClasses = classNames(radioButtonStyles["radio-button-wrapper"], {
+		[radioButtonStyles["radio-button-wrapper__large"]]: isLarge,
+		[radioButtonStyles["radio-button-wrapper__large--selected"]]: isLarge && isChecked,
+		[radioButtonStyles["radio-button-wrapper__large--invalid"]]: isLarge && onCherry,
+		[radioButtonStyles["radio-button-wrapper__large--on-blueberry"]]: isLarge && onBlueberry
+	});
+	const radioButtonLabelClasses = classNames(radioButtonStyles["radio-button-label"], {
+		[radioButtonStyles["radio-button-label--disabled"]]: disabled,
+		[radioButtonStyles["radio-button-label--on-dark"]]: onDark,
+		[radioButtonStyles["radio-button-label--invalid"]]: invalid,
+		[radioButtonStyles["radio-button-label__large"]]: isLarge,
+		[radioButtonStyles["radio-button-label__large--disabled"]]: isLarge && disabled,
+		[radioButtonStyles["radio-button-label__large--on-grey"]]: isLarge && onGrey && !isChecked,
+		[radioButtonStyles["radio-button-label__large--on-blueberry"]]: isLarge && onBlueberry && !isChecked,
+		[radioButtonStyles["radio-button-label__large--selected"]]: isLarge && isChecked && !onCherry,
+		[radioButtonStyles["radio-button-label__large--selected-invalid"]]: isLarge && isChecked && onCherry
+	}, labelClassNames);
+	const radioButtonClasses = classNames(radioButtonStyles["radio-button"], className);
+	const change = (e) => {
+		setIsChecked(e.target.checked);
+		if (onChange) onChange(e);
+	};
+	const getLabelContent = () => /* @__PURE__ */ jsxs("span", {
+		className: radioButtonStyles["radio-button__marker-wrapper"],
+		children: [/* @__PURE__ */ jsx("input", {
+			...rest,
+			id: inputId,
+			name,
+			className: radioButtonClasses,
+			type: "radio",
+			disabled,
+			value,
+			ref,
+			defaultChecked,
+			"aria-describedby": getAriaDescribedBy(props, errorTextId),
+			required,
+			onChange: (e) => change(e)
+		}), /* @__PURE__ */ jsx(RadioMarker_default, {
+			checked: isChecked,
+			disabled,
+			error: invalid,
+			onColor,
+			size
+		})]
+	});
+	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
+		className: errorWrapperClassName,
+		errorText,
+		errorTextId,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-testid": testId,
+			"data-analyticsid": AnalyticsId.RadioButton,
+			className: radioButtonWrapperClasses,
+			children: renderLabelAsParent({
+				label,
+				children: getLabelContent(),
+				inputId,
+				onColor,
+				labelClassName: radioButtonLabelClasses,
+				sublabelWrapperClassName: radioButtonStyles["radiobutton-sublabel-wrapper"],
+				large: isLarge,
+				afterLabelChildrenClassName: radioButtonStyles["radiobutton-afterlabelchildren-wrapper"]
+			})
+		})
+	});
+};
+RadioButton.displayName = "RadioButton";
+var RadioButton_default = RadioButton;
+export { RadioButton_default as n, RadioButton as t };
 
 //# sourceMappingURL=RadioButton.js.map

package/lib/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":[],"sources":["../src/components/RadioButton/index.ts"],"sourcesContent":["import RadioButton from './RadioButton';\nexport * from './RadioButton';\nexport * from './utils';\nexport default RadioButton;\n"],"mappings":";AAGA,IAAA,wBAAe"}
+{"version":3,"file":"RadioButton.js","names":["RadioButton: React.FC<RadioButtonProps>"],"sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport RadioMarker from './RadioMarker/RadioMarker';\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const RadioButton: React.FC<RadioButtonProps> = props => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    errorTextId: errorTextIdProp,\n    error = !!errorText,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ref,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [isChecked, setIsChecked] = useState<boolean>(!!(props.checked ?? defaultChecked));\n  const [prevChecked, setPrevChecked] = useState<boolean | undefined>(props.checked);\n  if (prevChecked !== props.checked) {\n    setPrevChecked(props.checked);\n    if (props.checked !== undefined && props.checked !== isChecked) {\n      setIsChecked(props.checked);\n    }\n  }\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && isChecked,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button-label__large--on-grey']]: isLarge && onGrey && !isChecked,\n      [radioButtonStyles['radio-button-label__large--on-blueberry']]: isLarge && onBlueberry && !isChecked,\n      [radioButtonStyles['radio-button-label__large--selected']]: isLarge && isChecked && !onCherry,\n      [radioButtonStyles['radio-button-label__large--selected-invalid']]: isLarge && isChecked && onCherry,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(radioButtonStyles['radio-button'], className);\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    setIsChecked(e.target.checked);\n    if (onChange) onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <span className={radioButtonStyles['radio-button__marker-wrapper']}>\n      <input\n        {...rest}\n        id={inputId}\n        name={name}\n        className={radioButtonClasses}\n        type=\"radio\"\n        disabled={disabled}\n        value={value}\n        ref={ref}\n        defaultChecked={defaultChecked}\n        aria-describedby={getAriaDescribedBy(props, errorTextId)}\n        required={required}\n        onChange={(e): void => change(e)}\n      />\n      <RadioMarker checked={isChecked} disabled={disabled} error={invalid} onColor={onColor} size={size} />\n    </span>\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: radioButtonLabelClasses,\n          sublabelWrapperClassName: radioButtonStyles['radiobutton-sublabel-wrapper'],\n          large: isLarge,\n          afterLabelChildrenClassName: radioButtonStyles['radiobutton-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":";;;;;;;;;;;AA+CA,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EACJ,WACA,gBACA,UACA,UACA,OACA,UAAU,MAAM,EAChB,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,aAAa,iBACb,QAAQ,CAAC,CAAC,WACV,uBACA,QAAQ,aAAa,MAAM,EAC3B,QACA,UACA,iBACA,KACA,GAAG,SACD;CACJ,MAAM,UAAU,SAAS,YAAY,YAAY;CACjD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,WAAW,YAAY,YAAY;CACzC,MAAM,UAAU,SAAS,SAAS;CAClC,MAAM,CAAC,WAAW,gBAAgB,SAAkB,CAAC,EAAE,MAAM,WAAW,gBAAgB;CACxF,MAAM,CAAC,aAAa,kBAAkB,SAA8B,MAAM,QAAQ;AAClF,KAAI,gBAAgB,MAAM,SAAS;AACjC,iBAAe,MAAM,QAAQ;AAC7B,MAAI,MAAM,YAAY,KAAA,KAAa,MAAM,YAAY,UACnD,cAAa,MAAM,QAAQ;;CAG/B,MAAM,cAAc,kBAAkB,gBAAgB;CAEtD,MAAM,4BAA4B,WAAW,kBAAkB,yBAAyB;GACrF,kBAAkB,iCAAiC;GACnD,kBAAkB,2CAA2C,WAAW;GACxE,kBAAkB,0CAA0C,WAAW;GACvE,kBAAkB,+CAA+C,WAAW;EAC9E,CAAC;CACF,MAAM,0BAA0B,WAC9B,kBAAkB,uBAClB;GACG,kBAAkB,kCAAkC;GACpD,kBAAkB,iCAAiC;GACnD,kBAAkB,iCAAiC;GACnD,kBAAkB,+BAA+B;GACjD,kBAAkB,yCAAyC,WAAW;GACtE,kBAAkB,wCAAwC,WAAW,UAAU,CAAC;GAChF,kBAAkB,6CAA6C,WAAW,eAAe,CAAC;GAC1F,kBAAkB,yCAAyC,WAAW,aAAa,CAAC;GACpF,kBAAkB,iDAAiD,WAAW,aAAa;EAC7F,EACD,gBACD;CACD,MAAM,qBAAqB,WAAW,kBAAkB,iBAAiB,UAAU;CAEnF,MAAM,UAAU,MAAiD;AAC/D,eAAa,EAAE,OAAO,QAAQ;AAC9B,MAAI,SAAU,UAAS,EAAE;;CAG3B,MAAM,wBACJ,qBAAC,QAAA;EAAK,WAAW,kBAAkB;aACjC,oBAAC,SAAA;GACC,GAAI;GACJ,IAAI;GACE;GACN,WAAW;GACX,MAAK;GACK;GACH;GACF;GACW;GAChB,oBAAkB,mBAAmB,OAAO,YAAY;GAC9C;GACV,WAAW,MAAY,OAAO,EAAE;IAChC,EACF,oBAAC,qBAAA;GAAY,SAAS;GAAqB;GAAU,OAAO;GAAkB;GAAe;IAAQ,CAAA;GAChG;AAGT,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,oBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAa,WAAW;aAC7E,oBAAoB;IACZ;IACP,UAAU,iBAAiB;IAClB;IACA;IACT,gBAAgB;IAChB,0BAA0B,kBAAkB;IAC5C,OAAO;IACP,6BAA6B,kBAAkB;IAChD,CAAC;IACE;GACO;;AAInB,YAAY,cAAc;AAE1B,IAAA,sBAAe"}

package/lib/RadioButton2.js

@@ -1,75 +1,5 @@
-import { n as AnalyticsId } from "./constants2.js";
-import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
-import { t as useIdWithFallback } from "./useIdWithFallback.js";
-import { t as getAriaDescribedBy } from "./accessibility.js";
-import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
-import classNames from "classnames";
-import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import styles from "./components/VisualRadioButtonCloud/RadioButton/styles.module.scss";
-var RadioButton = (props) => {
-	const { className, checked, defaultChecked, children, inputId: inputIdProp, errorText, error = !!errorText, errorTextId: errorTextIdProp, errorWrapperClassName, testId, onChange, ref, ...rest } = props;
-	const inputId = useIdWithFallback(inputIdProp);
-	const errorTextId = useIdWithFallback(errorTextIdProp);
-	const isMobile = useIsMobileBreakpoint();
-	const [isChecked, setIsChecked] = useState(!!(checked ?? defaultChecked));
-	const [prevChecked, setPrevChecked] = useState(checked);
-	if (prevChecked !== checked) {
-		setPrevChecked(checked);
-		if (checked !== void 0 && checked !== isChecked) setIsChecked(checked);
-	}
-	const handleChange = (e) => {
-		setIsChecked(e.target.checked);
-		onChange?.(e);
-	};
-	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
-		className: errorWrapperClassName,
-		errorText,
-		errorTextId,
-		children: /* @__PURE__ */ jsxs("label", {
-			className: classNames(styles["visual-radio-button"], {
-				[styles["visual-radio-button--checked"]]: isChecked,
-				[styles["visual-radio-button--invalid"]]: error
-			}, className),
-			htmlFor: inputId,
-			"data-testid": testId,
-			"data-analyticsid": AnalyticsId.RadioButton,
-			children: [/* @__PURE__ */ jsx("input", {
-				...rest,
-				id: inputId,
-				ref,
-				className: styles["visual-radio-button__input"],
-				type: "radio",
-				checked: isChecked,
-				"aria-describedby": getAriaDescribedBy(props, errorTextId),
-				onChange: handleChange
-			}), /* @__PURE__ */ jsxs("span", {
-				className: styles["visual-radio-button__pill"],
-				children: [isChecked && /* @__PURE__ */ jsx("span", {
-					className: styles["visual-radio-button__icon"],
-					"aria-hidden": "true",
-					children: isMobile ? /* @__PURE__ */ jsx("svg", {
-						width: "8",
-						height: "8",
-						fill: "none",
-						xmlns: "http://www.w3.org/2000/svg",
-						children: /* @__PURE__ */ jsx("path", { d: "M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" })
-					}) : /* @__PURE__ */ jsx("svg", {
-						width: "12",
-						height: "12",
-						fill: "none",
-						xmlns: "http://www.w3.org/2000/svg",
-						children: /* @__PURE__ */ jsx("path", { d: "M6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12Z" })
-					})
-				}), /* @__PURE__ */ jsx("span", {
-					className: styles["visual-radio-button__label"],
-					children
-				})]
-			})]
-		})
-	});
-};
-var RadioButton_default = RadioButton;
-export { RadioButton_default as t };
+import { n as RadioButton_default } from "./RadioButton.js";
+var RadioButton_default$1 = RadioButton_default;
+export { RadioButton_default$1 as t };
 
 //# sourceMappingURL=RadioButton2.js.map

package/lib/RadioButton2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton2.js","names":["RadioButton: React.FC<RadioButtonProps>"],"sources":["../src/components/VisualRadioButtonCloud/RadioButton/RadioButton.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../../ErrorWrapper';\n\nimport { AnalyticsId } from '../../../constants';\nimport { useIdWithFallback } from '../../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../../hooks/useIsMobileBreakpoint';\nimport { getAriaDescribedBy } from '../../../utils/accessibility';\nimport ErrorWrapper from '../../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends\n    ErrorWrapperClassNameProps,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'className' | 'children' | 'size' | 'value'> {\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Label text shown inside the pill. */\n  children: React.ReactNode;\n  /** Value identifying this radio inside its group. Required. */\n  value: string;\n  /** input id of the underlying radio */\n  inputId?: string;\n  /** Activates error styling. Can be true while errorText is empty (e.g. when used in a cloud). */\n  error?: boolean;\n  /** Error text to show above the component. */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref forwarded to the underlying input element. */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst RadioButton: React.FC<RadioButtonProps> = props => {\n  const {\n    className,\n    checked,\n    defaultChecked,\n    children,\n    inputId: inputIdProp,\n    errorText,\n    error = !!errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    testId,\n    onChange,\n    ref,\n    ...rest\n  } = props;\n\n  const inputId = useIdWithFallback(inputIdProp);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const isMobile = useIsMobileBreakpoint();\n  const [isChecked, setIsChecked] = useState<boolean>(!!(checked ?? defaultChecked));\n  const [prevChecked, setPrevChecked] = useState<boolean | undefined>(checked);\n  if (prevChecked !== checked) {\n    setPrevChecked(checked);\n    if (checked !== undefined && checked !== isChecked) {\n      setIsChecked(checked);\n    }\n  }\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    setIsChecked(e.target.checked);\n    onChange?.(e);\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <label\n        className={classNames(\n          styles['visual-radio-button'],\n          {\n            [styles['visual-radio-button--checked']]: isChecked,\n            [styles['visual-radio-button--invalid']]: error,\n          },\n          className\n        )}\n        htmlFor={inputId}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.RadioButton}\n      >\n        <input\n          {...rest}\n          id={inputId}\n          ref={ref}\n          className={styles['visual-radio-button__input']}\n          type=\"radio\"\n          checked={isChecked}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n          onChange={handleChange}\n        />\n        <span className={styles['visual-radio-button__pill']}>\n          {isChecked && (\n            <span className={styles['visual-radio-button__icon']} aria-hidden=\"true\">\n              {isMobile ? (\n                <svg width=\"8\" height=\"8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z\" />\n                </svg>\n              ) : (\n                <svg width=\"12\" height=\"12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12Z\" />\n                </svg>\n              )}\n            </span>\n          )}\n          <span className={styles['visual-radio-button__label']}>{children}</span>\n        </span>\n      </label>\n    </ErrorWrapper>\n  );\n};\n\nexport default RadioButton;\n"],"mappings":";;;;;;;;;AAsCA,IAAMA,eAA0C,UAAS;CACvD,MAAM,EACJ,WACA,SACA,gBACA,UACA,SAAS,aACT,WACA,QAAQ,CAAC,CAAC,WACV,aAAa,iBACb,uBACA,QACA,UACA,KACA,GAAG,SACD;CAEJ,MAAM,UAAU,kBAAkB,YAAY;CAC9C,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,WAAW,uBAAuB;CACxC,MAAM,CAAC,WAAW,gBAAgB,SAAkB,CAAC,EAAE,WAAW,gBAAgB;CAClF,MAAM,CAAC,aAAa,kBAAkB,SAA8B,QAAQ;AAC5E,KAAI,gBAAgB,SAAS;AAC3B,iBAAe,QAAQ;AACvB,MAAI,YAAY,KAAA,KAAa,YAAY,UACvC,cAAa,QAAQ;;CAIzB,MAAM,gBAAgB,MAAiD;AACrE,eAAa,EAAE,OAAO,QAAQ;AAC9B,aAAW,EAAE;;AAGf,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,qBAAC,SAAA;GACC,WAAW,WACT,OAAO,wBACP;KACG,OAAO,kCAAkC;KACzC,OAAO,kCAAkC;IAC3C,EACD,UACD;GACD,SAAS;GACT,eAAa;GACb,oBAAkB,YAAY;cAE9B,oBAAC,SAAA;IACC,GAAI;IACJ,IAAI;IACC;IACL,WAAW,OAAO;IAClB,MAAK;IACL,SAAS;IACT,oBAAkB,mBAAmB,OAAO,YAAY;IACxD,UAAU;KACV,EACF,qBAAC,QAAA;IAAK,WAAW,OAAO;eACrB,aACC,oBAAC,QAAA;KAAK,WAAW,OAAO;KAA8B,eAAY;eAC/D,WACC,oBAAC,OAAA;MAAI,OAAM;MAAI,QAAO;MAAI,MAAK;MAAO,OAAM;gBAC1C,oBAAC,QAAA,EAAK,GAAE,qCAAA,CAAsC;OAC1C,GAEN,oBAAC,OAAA;MAAI,OAAM;MAAK,QAAO;MAAK,MAAK;MAAO,OAAM;gBAC5C,oBAAC,QAAA,EAAK,GAAE,uCAAA,CAAwC;OAC5C;MAEH,EAET,oBAAC,QAAA;KAAK,WAAW,OAAO;KAAgC;MAAgB,CAAA;KACnE,CAAA;IACD;GACK;;AAInB,IAAA,sBAAe"}
+{"version":3,"file":"RadioButton2.js","names":[],"sources":["../src/components/RadioButton/index.ts"],"sourcesContent":["import RadioButton from './RadioButton';\nexport * from './RadioButton';\nexport default RadioButton;\n"],"mappings":";AAEA,IAAA,wBAAe"}

package/lib/RadioMarker.js

@@ -0,0 +1,37 @@
+import { i as FormSize, r as FormOnColor } from "./constants2.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/RadioButton/RadioMarker/styles.module.scss";
+const RadioMarker = (props) => {
+	const { checked = false, disabled = false, error = false, onColor = FormOnColor.onwhite, size, className } = props;
+	const onWhite = onColor === FormOnColor.onwhite;
+	const onGrey = onColor === FormOnColor.ongrey;
+	const onBlueberry = onColor === FormOnColor.onblueberry;
+	const onInvalid = error || onColor === FormOnColor.oninvalid;
+	const onDark = onColor === FormOnColor.ondark;
+	const large = size === FormSize.large;
+	return /* @__PURE__ */ jsx("span", {
+		className: classNames(styles["radio__marker"], {
+			[styles["radio__marker--on-white"]]: onWhite,
+			[styles["radio__marker--on-grey"]]: onGrey,
+			[styles["radio__marker--on-blueberry"]]: onBlueberry,
+			[styles["radio__marker--on-dark"]]: onDark,
+			[styles["radio__marker--on-invalid"]]: onInvalid,
+			[styles["radio__marker--invalid"]]: onInvalid,
+			[styles["radio__marker--disabled"]]: disabled,
+			[styles["radio__marker__regular--checked"]]: !large && checked,
+			[styles["radio__marker__regular--checked--invalid"]]: !large && checked && onInvalid,
+			[styles["radio__marker__regular--checked--on-dark"]]: !large && checked && onDark,
+			[styles["radio__marker__regular--checked--disabled"]]: !large && checked && disabled,
+			[styles["radio__marker__large--checked"]]: large && checked,
+			[styles["radio__marker__large--checked--invalid"]]: large && checked && onInvalid,
+			[styles["radio__marker__large--checked--disabled"]]: large && checked && disabled
+		}, className),
+		"aria-hidden": "true",
+		children: checked && /* @__PURE__ */ jsx("span", { className: styles["radio__marker-dot"] })
+	});
+};
+var RadioMarker_default = RadioMarker;
+export { RadioMarker_default as t };
+
+//# sourceMappingURL=RadioMarker.js.map

package/lib/RadioMarker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioMarker.js","names":["RadioMarker: React.FC<RadioMarkerProps>"],"sources":["../src/components/RadioButton/RadioMarker/RadioMarker.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { FormOnColor, FormSize } from '../../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface RadioMarkerProps {\n  /** Whether the radio is checked. Controls the inner dot visibility. */\n  checked?: boolean;\n  /** Disables the visual state of the marker. */\n  disabled?: boolean;\n  /** Activates error styling. */\n  error?: boolean;\n  /** Background context the marker is rendered on. */\n  onColor?: keyof typeof FormOnColor;\n  /** Size variant of the marker. */\n  size?: keyof typeof FormSize;\n  /** Adds custom classes to the marker wrapper. */\n  className?: string;\n}\n\n/**\n * Does not render an <input>; consumers render this on their end.\n */\nexport const RadioMarker: React.FC<RadioMarkerProps> = props => {\n  const { checked = false, disabled = false, error = false, onColor = FormOnColor.onwhite, size, className } = props;\n\n  const onWhite = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const large = size === FormSize.large;\n\n  const markerClasses = classNames(\n    styles['radio__marker'],\n    {\n      [styles['radio__marker--on-white']]: onWhite,\n      [styles['radio__marker--on-grey']]: onGrey,\n      [styles['radio__marker--on-blueberry']]: onBlueberry,\n      [styles['radio__marker--on-dark']]: onDark,\n      [styles['radio__marker--on-invalid']]: onInvalid,\n      [styles['radio__marker--invalid']]: onInvalid,\n      [styles['radio__marker--disabled']]: disabled,\n      [styles['radio__marker__regular--checked']]: !large && checked,\n      [styles['radio__marker__regular--checked--invalid']]: !large && checked && onInvalid,\n      [styles['radio__marker__regular--checked--on-dark']]: !large && checked && onDark,\n      [styles['radio__marker__regular--checked--disabled']]: !large && checked && disabled,\n      [styles['radio__marker__large--checked']]: large && checked,\n      [styles['radio__marker__large--checked--invalid']]: large && checked && onInvalid,\n      [styles['radio__marker__large--checked--disabled']]: large && checked && disabled,\n    },\n    className\n  );\n\n  return (\n    <span className={markerClasses} aria-hidden=\"true\">\n      {checked && <span className={styles['radio__marker-dot']} />}\n    </span>\n  );\n};\n\nexport default RadioMarker;\n"],"mappings":";;;;AAwBA,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EAAE,UAAU,OAAO,WAAW,OAAO,QAAQ,OAAO,UAAU,YAAY,SAAS,MAAM,cAAc;CAE7G,MAAM,UAAU,YAAY,YAAY;CACxC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,YAAY,SAAS,YAAY,YAAY;CACnD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,QAAQ,SAAS,SAAS;AAuBhC,QACE,oBAAC,QAAA;EAAK,WAtBc,WACpB,OAAO,kBACP;IACG,OAAO,6BAA6B;IACpC,OAAO,4BAA4B;IACnC,OAAO,iCAAiC;IACxC,OAAO,4BAA4B;IACnC,OAAO,+BAA+B;IACtC,OAAO,4BAA4B;IACnC,OAAO,6BAA6B;IACpC,OAAO,qCAAqC,CAAC,SAAS;IACtD,OAAO,8CAA8C,CAAC,SAAS,WAAW;IAC1E,OAAO,8CAA8C,CAAC,SAAS,WAAW;IAC1E,OAAO,+CAA+C,CAAC,SAAS,WAAW;IAC3E,OAAO,mCAAmC,SAAS;IACnD,OAAO,4CAA4C,SAAS,WAAW;IACvE,OAAO,6CAA6C,SAAS,WAAW;GAC1E,EACD,UACD;EAGiC,eAAY;YACzC,WAAW,oBAAC,QAAA,EAAK,WAAW,OAAO,sBAAA,CAAwB;GACvD;;AAIX,IAAA,sBAAe"}

package/lib/ReadLettersMedium.js

@@ -1,4 +1,4 @@
-import { t as ViewBoxSize } from "./utils4.js";
+import { t as ViewBoxSize } from "./utils3.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ReadLettersMedium = ({ color, svgProperties, title }) => {
 	const palette = (() => {