@helsenorge/designsystem-react 15.7.2 → 16.0.0

package/lib/Radio.js

@@ -1,73 +1,83 @@
-import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
+import uuid from "./utils/uuid.js";
+import { AnalyticsId, FormOnColor, FormSize } from "./constants.js";
 import { useIdWithFallback } from "./hooks/useIdWithFallback.js";
 import { getAriaDescribedBy } from "./utils/accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
+import { r as renderLabelAsParent, t as getLabelText } from "./utils2.js";
+import { t as RadioMarker } from "./RadioMarker.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";
-//#region src/components/VisualRadioCloud/Radio/Radio.tsx
+import radioStyles from "./components/Radio/styles.module.scss";
+//#region src/components/Radio/Radio.tsx
 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 { 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 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);
-	};
+	const radioWrapperClasses = classNames(radioStyles["radio-wrapper"], {
+		[radioStyles["radio-wrapper__large"]]: isLarge,
+		[radioStyles["radio-wrapper__large--invalid"]]: isLarge && onCherry,
+		[radioStyles["radio-wrapper__large--on-blueberry"]]: isLarge && onBlueberry
+	});
+	const radioLabelClasses = classNames(radioStyles["radio-label"], {
+		[radioStyles["radio-label--disabled"]]: disabled,
+		[radioStyles["radio-label--on-dark"]]: onDark,
+		[radioStyles["radio-label--invalid"]]: invalid,
+		[radioStyles["radio-label__large"]]: isLarge,
+		[radioStyles["radio-label__large--disabled"]]: isLarge && disabled,
+		[radioStyles["radio-label__large--on-grey"]]: isLarge && onGrey,
+		[radioStyles["radio-label__large--on-blueberry"]]: isLarge && onBlueberry,
+		[radioStyles["radio-label__large--invalid"]]: isLarge && onCherry
+	}, labelClassNames);
+	const radioClasses = classNames(radioStyles["radio"], className);
+	const getLabelContent = () => /* @__PURE__ */ jsxs("span", {
+		className: radioStyles["radio__marker-wrapper"],
+		children: [/* @__PURE__ */ jsx("input", {
+			...rest,
+			id: inputId,
+			name,
+			className: radioClasses,
+			type: "radio",
+			disabled,
+			value,
+			ref,
+			defaultChecked,
+			"aria-describedby": getAriaDescribedBy(props, errorTextId),
+			required,
+			onChange
+		}), /* @__PURE__ */ jsx(RadioMarker, {
+			disabled,
+			error: invalid,
+			onColor,
+			size
+		})]
+	});
 	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,
+		children: /* @__PURE__ */ jsx("div", {
 			"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
-				})]
-			})]
+			"data-analyticsid": AnalyticsId.Radio,
+			className: radioWrapperClasses,
+			children: renderLabelAsParent({
+				label,
+				children: getLabelContent(),
+				inputId,
+				onColor,
+				labelClassName: radioLabelClasses,
+				sublabelWrapperClassName: radioStyles["radio-sublabel-wrapper"],
+				large: isLarge,
+				afterLabelChildrenClassName: radioStyles["radio-afterlabelchildren-wrapper"]
+			})
 		})
 	});
 };
+Radio.displayName = "Radio";
 //#endregion
 export { Radio as t };
 

package/lib/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":[],"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,IAAM,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,WAAW;CAC7C,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,WAAW,sBAAsB;CACvC,MAAM,CAAC,WAAW,gBAAgB,SAAkB,CAAC,EAAE,WAAW,eAAe;CACjF,MAAM,CAAC,aAAa,kBAAkB,SAA8B,OAAO;CAC3E,IAAI,gBAAgB,SAAS;EAC3B,eAAe,OAAO;EACtB,IAAI,YAAY,KAAA,KAAa,YAAY,WACvC,aAAa,OAAO;CAExB;CAEA,MAAM,gBAAgB,MAAiD;EACrE,aAAa,EAAE,OAAO,OAAO;EAC7B,WAAW,CAAC;CACd;CAEA,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;EACjF,UAAA,qBAAC,SAAD;GACE,WAAW,WACT,OAAO,iBACP;KACG,OAAO,2BAA2B;KAClC,OAAO,2BAA2B;GACrC,GACA,SACF;GACA,SAAS;GACT,eAAa;GAVf,UAAA,CAYE,oBAAC,SAAD;IACE,GAAI;IACJ,IAAI;IACC;IACL,WAAW,OAAO;IAClB,MAAK;IACL,SAAS;IACT,oBAAkB,mBAAmB,OAAO,WAAW;IACvD,UAAU;GACX,CAAA,GACD,qBAAC,QAAD;IAAM,WAAW,OAAO;IAAxB,UAAA,CACG,aACC,oBAAC,QAAD;KAAM,WAAW,OAAO;KAAuB,eAAY;KACxD,UAAA,WACC,oBAAC,OAAD;MAAK,OAAM;MAAI,QAAO;MAAI,MAAK;MAAO,OAAM;MAC1C,UAAA,oBAAC,QAAD,EAAM,GAAE,oCAAqC,CAAA;KAC1C,CAAA,IAEL,oBAAC,OAAD;MAAK,OAAM;MAAK,QAAO;MAAK,MAAK;MAAO,OAAM;MAC5C,UAAA,oBAAC,QAAD,EAAM,GAAE,sCAAuC,CAAA;KAC5C,CAAA;IAEH,CAAA,GAER,oBAAC,QAAD;KAAM,WAAW,OAAO;KAAyB;IAAe,CAAA,CAC5D;GACD,CAAA,CAAA;;CACK,CAAA;AAElB"}
+{"version":3,"file":"Radio.js","names":[],"sources":["../src/components/Radio/Radio.tsx"],"sourcesContent":["import 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 radioStyles from './styles.module.scss';\n\nexport interface RadioProps\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 radio - 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 radio */\n  inputId?: string;\n  /** Changes the visuals of the radio */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radio. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radio - 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 Radio: React.FC<RadioProps> = 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\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n\n  const radioWrapperClasses = classNames(radioStyles['radio-wrapper'], {\n    [radioStyles['radio-wrapper__large']]: isLarge,\n    [radioStyles['radio-wrapper__large--invalid']]: isLarge && onCherry,\n    [radioStyles['radio-wrapper__large--on-blueberry']]: isLarge && onBlueberry,\n  });\n  const radioLabelClasses = classNames(\n    radioStyles['radio-label'],\n    {\n      [radioStyles['radio-label--disabled']]: disabled,\n      [radioStyles['radio-label--on-dark']]: onDark,\n      [radioStyles['radio-label--invalid']]: invalid,\n      [radioStyles['radio-label__large']]: isLarge,\n      [radioStyles['radio-label__large--disabled']]: isLarge && disabled,\n      [radioStyles['radio-label__large--on-grey']]: isLarge && onGrey,\n      [radioStyles['radio-label__large--on-blueberry']]: isLarge && onBlueberry,\n      [radioStyles['radio-label__large--invalid']]: isLarge && onCherry,\n    },\n    labelClassNames\n  );\n  const radioClasses = classNames(radioStyles['radio'], className);\n\n  const getLabelContent = (): React.ReactNode => (\n    <span className={radioStyles['radio__marker-wrapper']}>\n      <input\n        {...rest}\n        id={inputId}\n        name={name}\n        className={radioClasses}\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={onChange}\n      />\n      <RadioMarker 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.Radio} className={radioWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: radioLabelClasses,\n          sublabelWrapperClassName: radioStyles['radio-sublabel-wrapper'],\n          large: isLarge,\n          afterLabelChildrenClassName: radioStyles['radio-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;AA6CA,IAAa,SAA8B,UAAS;CAClD,MAAM,EACJ,WACA,gBACA,UACA,UACA,OACA,UAAU,KAAK,GACf,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,aAAa,iBACb,QAAQ,CAAC,CAAC,WACV,uBACA,QAAQ,aAAa,KAAK,GAC1B,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;CAElC,MAAM,cAAc,kBAAkB,eAAe;CAErD,MAAM,sBAAsB,WAAW,YAAY,kBAAkB;GAClE,YAAY,0BAA0B;GACtC,YAAY,mCAAmC,WAAW;GAC1D,YAAY,wCAAwC,WAAW;CAClE,CAAC;CACD,MAAM,oBAAoB,WACxB,YAAY,gBACZ;GACG,YAAY,2BAA2B;GACvC,YAAY,0BAA0B;GACtC,YAAY,0BAA0B;GACtC,YAAY,wBAAwB;GACpC,YAAY,kCAAkC,WAAW;GACzD,YAAY,iCAAiC,WAAW;GACxD,YAAY,sCAAsC,WAAW;GAC7D,YAAY,iCAAiC,WAAW;CAC3D,GACA,eACF;CACA,MAAM,eAAe,WAAW,YAAY,UAAU,SAAS;CAE/D,MAAM,wBACJ,qBAAC,QAAD;EAAM,WAAW,YAAY;EAA7B,UAAA,CACE,oBAAC,SAAD;GACE,GAAI;GACJ,IAAI;GACE;GACN,WAAW;GACX,MAAK;GACK;GACH;GACF;GACW;GAChB,oBAAkB,mBAAmB,OAAO,WAAW;GAC7C;GACA;EACX,CAAA,GACD,oBAAC,aAAD;GAAuB;GAAU,OAAO;GAAkB;GAAe;EAAO,CAAA,CAC5E;;CAGR,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;EACjF,UAAA,oBAAC,OAAD;GAAK,eAAa;GAAQ,oBAAkB,YAAY;GAAO,WAAW;GACvE,UAAA,oBAAoB;IACZ;IACP,UAAU,gBAAgB;IACjB;IACA;IACT,gBAAgB;IAChB,0BAA0B,YAAY;IACtC,OAAO;IACP,6BAA6B,YAAY;GAC3C,CAAC;EACE,CAAA;CACO,CAAA;AAElB;AAEA,MAAM,cAAc"}

package/lib/Radio2.js

@@ -0,0 +1,74 @@
+import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
+import { useIdWithFallback } from "./hooks/useIdWithFallback.js";
+import { getAriaDescribedBy } from "./utils/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";
+//#region src/components/VisualRadioCloud/Radio/Radio.tsx
+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
+				})]
+			})]
+		})
+	});
+};
+//#endregion
+export { Radio as t };
+
+//# sourceMappingURL=Radio2.js.map

package/lib/Radio2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio2.js","names":[],"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,IAAM,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,WAAW;CAC7C,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,WAAW,sBAAsB;CACvC,MAAM,CAAC,WAAW,gBAAgB,SAAkB,CAAC,EAAE,WAAW,eAAe;CACjF,MAAM,CAAC,aAAa,kBAAkB,SAA8B,OAAO;CAC3E,IAAI,gBAAgB,SAAS;EAC3B,eAAe,OAAO;EACtB,IAAI,YAAY,KAAA,KAAa,YAAY,WACvC,aAAa,OAAO;CAExB;CAEA,MAAM,gBAAgB,MAAiD;EACrE,aAAa,EAAE,OAAO,OAAO;EAC7B,WAAW,CAAC;CACd;CAEA,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;EACjF,UAAA,qBAAC,SAAD;GACE,WAAW,WACT,OAAO,iBACP;KACG,OAAO,2BAA2B;KAClC,OAAO,2BAA2B;GACrC,GACA,SACF;GACA,SAAS;GACT,eAAa;GAVf,UAAA,CAYE,oBAAC,SAAD;IACE,GAAI;IACJ,IAAI;IACC;IACL,WAAW,OAAO;IAClB,MAAK;IACL,SAAS;IACT,oBAAkB,mBAAmB,OAAO,WAAW;IACvD,UAAU;GACX,CAAA,GACD,qBAAC,QAAD;IAAM,WAAW,OAAO;IAAxB,UAAA,CACG,aACC,oBAAC,QAAD;KAAM,WAAW,OAAO;KAAuB,eAAY;KACxD,UAAA,WACC,oBAAC,OAAD;MAAK,OAAM;MAAI,QAAO;MAAI,MAAK;MAAO,OAAM;MAC1C,UAAA,oBAAC,QAAD,EAAM,GAAE,oCAAqC,CAAA;KAC1C,CAAA,IAEL,oBAAC,OAAD;MAAK,OAAM;MAAK,QAAO;MAAK,MAAK;MAAO,OAAM;MAC5C,UAAA,oBAAC,QAAD,EAAM,GAAE,sCAAuC,CAAA;KAC5C,CAAA;IAEH,CAAA,GAER,oBAAC,QAAD;KAAM,WAAW,OAAO;KAAyB;IAAe,CAAA,CAC5D;GACD,CAAA,CAAA;;CACK,CAAA;AAElB"}

package/lib/RadioMarker.js

@@ -1,8 +1,8 @@
 import { FormOnColor, FormSize } from "./constants.js";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
-import styles from "./components/RadioButton/RadioMarker/styles.module.scss";
-//#region src/components/RadioButton/RadioMarker/RadioMarker.tsx
+import styles from "./components/Radio/RadioMarker/styles.module.scss";
+//#region src/components/Radio/RadioMarker/RadioMarker.tsx
 /**
 * Does not render an <input>; consumers render this on their end.
 */

package/lib/RadioMarker.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioMarker.js","names":[],"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    large ? styles['radio__marker__large'] : styles['radio__marker__regular'],\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--checked']]: checked,\n    },\n    className\n  );\n\n  return (\n    <span className={markerClasses} aria-hidden=\"true\">\n      <span className={styles['radio__marker-dot']} />\n    </span>\n  );\n};\n\nexport default RadioMarker;\n"],"mappings":";;;;;;;;AAwBA,IAAa,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;CAEhC,MAAM,gBAAgB,WACpB,OAAO,kBACP,QAAQ,OAAO,0BAA0B,OAAO,2BAChD;GACG,OAAO,6BAA6B;GACpC,OAAO,4BAA4B;GACnC,OAAO,iCAAiC;GACxC,OAAO,4BAA4B;GACnC,OAAO,+BAA+B;GACtC,OAAO,4BAA4B;GACnC,OAAO,6BAA6B;GACpC,OAAO,4BAA4B;CACtC,GACA,SACF;CAEA,OACE,oBAAC,QAAD;EAAM,WAAW;EAAe,eAAY;EAC1C,UAAA,oBAAC,QAAD,EAAM,WAAW,OAAO,qBAAuB,CAAA;CAC3C,CAAA;AAEV"}
+{"version":3,"file":"RadioMarker.js","names":[],"sources":["../src/components/Radio/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    large ? styles['radio__marker__large'] : styles['radio__marker__regular'],\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--checked']]: checked,\n    },\n    className\n  );\n\n  return (\n    <span className={markerClasses} aria-hidden=\"true\">\n      <span className={styles['radio__marker-dot']} />\n    </span>\n  );\n};\n\nexport default RadioMarker;\n"],"mappings":";;;;;;;;AAwBA,IAAa,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;CAEhC,MAAM,gBAAgB,WACpB,OAAO,kBACP,QAAQ,OAAO,0BAA0B,OAAO,2BAChD;GACG,OAAO,6BAA6B;GACpC,OAAO,4BAA4B;GACnC,OAAO,iCAAiC;GACxC,OAAO,4BAA4B;GACnC,OAAO,+BAA+B;GACtC,OAAO,4BAA4B;GACnC,OAAO,6BAA6B;GACpC,OAAO,4BAA4B;CACtC,GACA,SACF;CAEA,OACE,oBAAC,QAAD;EAAM,WAAW;EAAe,eAAY;EAC1C,UAAA,oBAAC,QAAD,EAAM,WAAW,OAAO,qBAAuB,CAAA;CAC3C,CAAA;AAEV"}

package/lib/TabList.js

@@ -29,12 +29,12 @@ var TabChevron = ({ direction, onClick, backgroundColor, ariaLabel }) => {
 		"aria-label": ariaLabel,
 		style: { backgroundColor },
 		children: direction === "left" ? /* @__PURE__ */ jsx(Icon_default, {
-			color: "var(--color-action-graphics-onlight)",
+			color: "var(--color-action-graphics-dark-normal)",
 			isHovered,
 			svgIcon: ChevronLeft,
 			size: IconSize.XSmall
 		}) : /* @__PURE__ */ jsx(Icon_default, {
-			color: "var(--color-action-graphics-onlight)",
+			color: "var(--color-action-graphics-dark-normal)",
 			isHovered,
 			svgIcon: ChevronRight,
 			size: IconSize.XSmall
@@ -103,9 +103,9 @@ var TabList = (props) => {
 	const tablistClasses = classNames(styles["tab-list"], styles[`tab-list--${onColor}`]);
 	const getBackgroundColor = (onColor) => {
 		switch (onColor) {
-			case "onwhite": return "var(--color-base-background-white)";
-			case "onblueberry": return "var(--color-base-background-blueberry)";
-			case "onneutral": return "var(--color-base-background-neutral)";
+			case "onwhite": return "var(--color-base-background-light)";
+			case "onblueberry": return "var(--color-base-blueberry-background-light)";
+			case "onneutral": return "var(--color-base-neutral-background-light)";
 		}
 	};
 	const firstTab = tabRefs.current && tabRefs.current[0];

package/lib/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","names":[],"sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabChevron.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabList.tsx","../src/components/Tabs/TabList/index.ts"],"sourcesContent":["import type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n  /** Sets the tab panel content */\n  children?: React.ReactNode;\n  /** Optional icon on the tab */\n  icon?: SvgIcon | IconName;\n  /** Called when tab is selected */\n  onTabClick?: (index: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title on the tab */\n  title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n  return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n","import React from 'react';\n\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../../Icon';\nimport ChevronLeft from '../../Icons/ChevronLeft';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './styles.module.scss';\n\ninterface TabChevronProps {\n  direction: 'left' | 'right';\n  onClick: () => void;\n  backgroundColor?: string;\n  ariaLabel?: string;\n}\n\nconst TabChevron: React.FC<TabChevronProps> = ({ direction, onClick, backgroundColor, ariaLabel }) => {\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses<HTMLButtonElement | null>(buttonRef);\n\n  return (\n    <button\n      type=\"button\"\n      ref={buttonRef}\n      className={styles['tab-list__button']}\n      onClick={onClick}\n      aria-label={ariaLabel}\n      style={{ backgroundColor: backgroundColor }}\n    >\n      {direction === 'left' ? (\n        <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronLeft} size={IconSize.XSmall} />\n      ) : (\n        <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronRight} size={IconSize.XSmall} />\n      )}\n    </button>\n  );\n};\n\nexport default TabChevron;\n","import { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { IconName } from '../../Icons/IconNames';\nimport type { TabProps } from '../Tab';\nimport type { TabsColors } from '../Tabs';\n\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport LazyIcon from '../../LazyIcon';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n  tabProps: TabProps;\n  index: number;\n  color: TabsColors;\n  selectedTab: number;\n  tabRefs: React.RefObject<React.RefObject<HTMLButtonElement | null>[] | null | undefined>;\n  tabListVisible: boolean;\n  onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n  const isSelected = props.index === props.selectedTab;\n  const { title, onTabClick, icon, testId } = props.tabProps;\n  const handleClick = (): void => {\n    if (onTabClick) onTabClick(props.index);\n    props.onTabListClick(props.index);\n    scrollToTab(props.index);\n  };\n  const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n    [styles['tab-list__tab--selected']]: isSelected,\n    [styles['tab-list__tab--not-selected']]: !isSelected,\n  });\n\n  const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n  const scrollToTab = (index: number): void => {\n    const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n\n    if (currentRef?.current?.scrollIntoView) {\n      currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: 'nearest' });\n    }\n  };\n\n  const itemRef = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (isSelected && props.tabListVisible) {\n      scrollToTab(props.index);\n    }\n  }, [isSelected]);\n\n  return (\n    <li role=\"presentation\" ref={itemRef}>\n      <button\n        role=\"tab\"\n        aria-selected={isSelected}\n        onClick={handleClick}\n        className={tabButtonClasses}\n        data-testid={testId}\n        ref={currentRef as React.RefObject<HTMLButtonElement>}\n      >\n        <span className={styles['tab-list__tab__title-and-icon']}>\n          {icon &&\n            (typeof icon === 'string' ? (\n              <LazyIcon\n                iconName={icon as IconName}\n                size={IconSize.XSmall}\n                color={isSelected ? palette[`black`] : palette['blueberry500']}\n              />\n            ) : (\n              <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n            ))}\n          {title}\n        </span>\n      </button>\n    </li>\n  );\n};\n\nexport default TabItem;\n","import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TabProps } from '../Tab';\nimport type { TabsColors, TabsOnColor } from '../Tabs';\n\nimport TabChevron from './TabChevron';\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab from '../Tab';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color: TabsColors;\n  onColor: TabsOnColor;\n  ariaLabelRightButton?: string;\n  ariaLabelLeftButton?: string;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color, onColor, ariaLabelLeftButton, ariaLabelRightButton } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()) || []);\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${onColor}`]);\n\n  const getBackgroundColor = (onColor: TabsOnColor): string => {\n    switch (onColor) {\n      case 'onwhite':\n        return 'var(--color-base-background-white)';\n      case 'onblueberry':\n        return 'var(--color-base-background-blueberry)';\n      case 'onneutral':\n        return 'var(--color-base-background-neutral)';\n    }\n  };\n  const firstTab = tabRefs.current && tabRefs.current[0];\n  const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];\n\n  const firstTabVisible = useIsVisible(firstTab);\n  const lastTabVisible = useIsVisible(lastTab);\n  const tabListVisible = useIsVisible(listRef);\n\n  const shouldShowFadeStart = (): boolean => {\n    return !firstTabVisible;\n  };\n\n  const shouldShowFadeEnd = (): boolean => {\n    return !lastTabVisible;\n  };\n\n  const scrollInList = (direction: string): void => {\n    if (listRef.current) {\n      const listWidth = listRef.current.clientWidth;\n      const listScrollLeft = listRef.current.scrollLeft;\n      const maxScrollLeft = listRef.current.scrollWidth - listWidth;\n\n      if (direction === 'right' && !lastTabVisible) {\n        const scrollAmount = Math.min(listWidth / 2, maxScrollLeft - listScrollLeft);\n        listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n      } else if (direction === 'left' && !firstTabVisible) {\n        const scrollAmount = -Math.min(listWidth / 2, listScrollLeft);\n        listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n      }\n    }\n  };\n\n  return (\n    <div className={styles['tab-list-wrapper']}>\n      {shouldShowFadeStart() && (\n        <div className={classNames(styles['tab-list__start-wrapper'])}>\n          <TabChevron\n            onClick={() => scrollInList('left')}\n            direction=\"left\"\n            backgroundColor={`${getBackgroundColor(onColor)}`}\n            ariaLabel={ariaLabelLeftButton}\n          />\n          <div\n            className={classNames(styles['tab-list__fade-start'])}\n            style={{\n              backgroundColor: `${getBackgroundColor(onColor)}`,\n            }}\n          ></div>\n        </div>\n      )}\n      <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n        {React.Children.map(children, (child, index) => {\n          if (isComponent<TabProps>(child, Tab)) {\n            return (\n              <TabItem\n                tabRefs={tabRefs}\n                tabListVisible={tabListVisible}\n                key={child.props.title}\n                index={index}\n                selectedTab={selectedTab}\n                onTabListClick={onTabListClick}\n                tabProps={child.props}\n                color={color}\n              />\n            );\n          }\n          return null;\n        })}\n      </ul>\n      {shouldShowFadeEnd() && (\n        <div className={classNames(styles['tab-list__end-wrapper'])}>\n          <div\n            className={classNames(styles['tab-list__fade-end'])}\n            style={{\n              backgroundColor: `${getBackgroundColor(onColor)}`,\n            }}\n          ></div>\n          <TabChevron\n            onClick={() => scrollInList('right')}\n            direction=\"right\"\n            backgroundColor={`${getBackgroundColor(onColor)}`}\n            ariaLabel={ariaLabelRightButton}\n          />\n        </div>\n      )}\n      <div className={classNames(styles['tab-list__border'])}></div>\n    </div>\n  );\n};\n\nexport default TabList;\n","import TabList from './TabList';\nexport * from './TabList';\nexport default TabList;\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,IAAM,OAA0B,UAAS;CACvC,OAAO,oBAAA,UAAA,EAAA,UAAG,MAAM,YAAY,KAAO,CAAA;AACrC;;;ACFA,IAAM,cAAyC,EAAE,WAAW,SAAS,iBAAiB,gBAAgB;CACpG,MAAM,YAAY,MAAM,OAA0B,IAAI;CACtD,MAAM,EAAE,cAAc,iBAA2C,SAAS;CAE1E,OACE,oBAAC,UAAD;EACE,MAAK;EACL,KAAK;EACL,WAAW,OAAO;EACT;EACT,cAAY;EACZ,OAAO,EAAmB,gBAAgB;EAEzC,UAAA,cAAc,SACb,oBAAC,cAAD;GAAM,OAAO;GAAmD;GAAW,SAAS;GAAa,MAAM,SAAS;EAAS,CAAA,IAEzH,oBAAC,cAAD;GAAM,OAAO;GAAmD;GAAW,SAAS;GAAc,MAAM,SAAS;EAAS,CAAA;CAEtH,CAAA;AAEZ;;;ACZA,IAAM,WAAkC,UAAS;CAC/C,MAAM,aAAa,MAAM,UAAU,MAAM;CACzC,MAAM,EAAE,OAAO,YAAY,MAAM,WAAW,MAAM;CAClD,MAAM,oBAA0B;EAC9B,IAAI,YAAY,WAAW,MAAM,KAAK;EACtC,MAAM,eAAe,MAAM,KAAK;EAChC,YAAY,MAAM,KAAK;CACzB;CACA,MAAM,mBAAmB,WAAW,OAAO,kBAAkB,OAAO,kBAAkB,MAAM,UAAU;GACnG,OAAO,6BAA6B;GACpC,OAAO,iCAAiC,CAAC;CAC5C,CAAC;CAED,MAAM,aAAa,MAAM,QAAQ,WAAW,MAAM,QAAQ,QAAQ,MAAM;CAExE,MAAM,eAAe,UAAwB;EAC3C,MAAM,aAAa,MAAM,QAAQ,WAAW,MAAM,QAAQ,QAAQ;EAElE,IAAI,YAAY,SAAS,gBACvB,YAAY,SAAS,eAAe;GAAE,UAAU;GAAU,QAAQ;GAAW,OAAO;EAAU,CAAC;CAEnG;CAEA,MAAM,UAAU,OAAsB,IAAI;CAE1C,gBAAgB;EACd,IAAI,cAAc,MAAM,gBACtB,YAAY,MAAM,KAAK;CAE3B,GAAG,CAAC,UAAU,CAAC;CAEf,OACE,oBAAC,MAAD;EAAI,MAAK;EAAe,KAAK;EAC3B,UAAA,oBAAC,UAAD;GACE,MAAK;GACL,iBAAe;GACf,SAAS;GACT,WAAW;GACX,eAAa;GACb,KAAK;GAEL,UAAA,qBAAC,QAAD;IAAM,WAAW,OAAO;IAAxB,UAAA,CACG,SACE,OAAO,SAAS,WACf,oBAAC,kBAAD;KACE,UAAU;KACV,MAAM,SAAS;KACf,OAAO,aAAa,QAAQ,WAAW,QAAQ;IAChD,CAAA,IAED,oBAAC,cAAD;KAAM,SAAS;KAAM,MAAM,SAAS;KAAQ,OAAO,aAAa,QAAQ,WAAW,QAAQ;IAAkB,CAAA,IAEhH,KACG;;EACA,CAAA;CACN,CAAA;AAER;;;ACxDA,IAAM,WAAkC,UAAS;CAC/C,MAAM,EAAE,aAAa,gBAAgB,UAAU,OAAO,SAAS,qBAAqB,yBAAyB;CAE7G,MAAM,UAAU,OAAyB,IAAI;CAE7C,MAAM,UAAU,OAAO,MAAM,SAAS,IAAI,gBAAgB,MAAM,UAA6B,CAAC,KAAK,CAAC,CAAC;CACrG,eAAe,gBAAgB,SAAS,SAAS,IAAI;CAErD,MAAM,iBAAiB,WAAW,OAAO,aAAa,OAAO,aAAa,UAAU;CAEpF,MAAM,sBAAsB,YAAiC;EAC3D,QAAQ,SAAR;GACE,KAAK,WACH,OAAO;GACT,KAAK,eACH,OAAO;GACT,KAAK,aACH,OAAO;EACX;CACF;CACA,MAAM,WAAW,QAAQ,WAAW,QAAQ,QAAQ;CACpD,MAAM,UAAU,QAAQ,WAAW,QAAQ,QAAQ,QAAQ,QAAQ,SAAS;CAE5E,MAAM,kBAAkB,aAAa,QAAQ;CAC7C,MAAM,iBAAiB,aAAa,OAAO;CAC3C,MAAM,iBAAiB,aAAa,OAAO;CAE3C,MAAM,4BAAqC;EACzC,OAAO,CAAC;CACV;CAEA,MAAM,0BAAmC;EACvC,OAAO,CAAC;CACV;CAEA,MAAM,gBAAgB,cAA4B;EAChD,IAAI,QAAQ,SAAS;GACnB,MAAM,YAAY,QAAQ,QAAQ;GAClC,MAAM,iBAAiB,QAAQ,QAAQ;GACvC,MAAM,gBAAgB,QAAQ,QAAQ,cAAc;GAEpD,IAAI,cAAc,WAAW,CAAC,gBAAgB;IAC5C,MAAM,eAAe,KAAK,IAAI,YAAY,GAAG,gBAAgB,cAAc;IAC3E,QAAQ,QAAQ,SAAS;KAAE,MAAM;KAAc,UAAU;IAAS,CAAC;GACrE,OAAO,IAAI,cAAc,UAAU,CAAC,iBAAiB;IACnD,MAAM,eAAe,CAAC,KAAK,IAAI,YAAY,GAAG,cAAc;IAC5D,QAAQ,QAAQ,SAAS;KAAE,MAAM;KAAc,UAAU;IAAS,CAAC;GACrE;EACF;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA;GACG,oBAAoB,KACnB,qBAAC,OAAD;IAAK,WAAW,WAAW,OAAO,0BAA0B;IAA5D,UAAA,CACE,oBAAC,YAAD;KACE,eAAe,aAAa,MAAM;KAClC,WAAU;KACV,iBAAiB,GAAG,mBAAmB,OAAO;KAC9C,WAAW;IACZ,CAAA,GACD,oBAAC,OAAD;KACE,WAAW,WAAW,OAAO,uBAAuB;KACpD,OAAO,EACL,iBAAiB,GAAG,mBAAmB,OAAO,IAChD;IACI,CAAA,CACH;;GAEP,oBAAC,MAAD;IAAI,WAAW;IAAgB,KAAK;IAAS,MAAK;IAAU,oBAAiB;IAC1E,UAAA,MAAM,SAAS,IAAI,WAAW,OAAO,UAAU;KAC9C,IAAI,YAAsB,OAAO,GAAG,GAClC,OACE,oBAAC,SAAD;MACW;MACO;MAET;MACM;MACG;MAChB,UAAU,MAAM;MACT;KACR,GANM,MAAM,MAAM,KAMlB;KAGL,OAAO;IACT,CAAC;GACC,CAAA;GACH,kBAAkB,KACjB,qBAAC,OAAD;IAAK,WAAW,WAAW,OAAO,wBAAwB;IAA1D,UAAA,CACE,oBAAC,OAAD;KACE,WAAW,WAAW,OAAO,qBAAqB;KAClD,OAAO,EACL,iBAAiB,GAAG,mBAAmB,OAAO,IAChD;IACI,CAAA,GACN,oBAAC,YAAD;KACE,eAAe,aAAa,OAAO;KACnC,WAAU;KACV,iBAAiB,GAAG,mBAAmB,OAAO;KAC9C,WAAW;IACZ,CAAA,CACE;;GAEP,oBAAC,OAAD,EAAK,WAAW,WAAW,OAAO,mBAAmB,EAAQ,CAAA;EAC1D;;AAET;;;AClIA,IAAA,kBAAe"}
+{"version":3,"file":"TabList.js","names":[],"sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabChevron.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabList.tsx","../src/components/Tabs/TabList/index.ts"],"sourcesContent":["import type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n  /** Sets the tab panel content */\n  children?: React.ReactNode;\n  /** Optional icon on the tab */\n  icon?: SvgIcon | IconName;\n  /** Called when tab is selected */\n  onTabClick?: (index: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title on the tab */\n  title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n  return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n","import React from 'react';\n\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../../Icon';\nimport ChevronLeft from '../../Icons/ChevronLeft';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './styles.module.scss';\n\ninterface TabChevronProps {\n  direction: 'left' | 'right';\n  onClick: () => void;\n  backgroundColor?: string;\n  ariaLabel?: string;\n}\n\nconst TabChevron: React.FC<TabChevronProps> = ({ direction, onClick, backgroundColor, ariaLabel }) => {\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses<HTMLButtonElement | null>(buttonRef);\n\n  return (\n    <button\n      type=\"button\"\n      ref={buttonRef}\n      className={styles['tab-list__button']}\n      onClick={onClick}\n      aria-label={ariaLabel}\n      style={{ backgroundColor: backgroundColor }}\n    >\n      {direction === 'left' ? (\n        <Icon color={'var(--color-action-graphics-dark-normal)'} isHovered={isHovered} svgIcon={ChevronLeft} size={IconSize.XSmall} />\n      ) : (\n        <Icon color={'var(--color-action-graphics-dark-normal)'} isHovered={isHovered} svgIcon={ChevronRight} size={IconSize.XSmall} />\n      )}\n    </button>\n  );\n};\n\nexport default TabChevron;\n","import { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { IconName } from '../../Icons/IconNames';\nimport type { TabProps } from '../Tab';\nimport type { TabsColors } from '../Tabs';\n\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport LazyIcon from '../../LazyIcon';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n  tabProps: TabProps;\n  index: number;\n  color: TabsColors;\n  selectedTab: number;\n  tabRefs: React.RefObject<React.RefObject<HTMLButtonElement | null>[] | null | undefined>;\n  tabListVisible: boolean;\n  onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n  const isSelected = props.index === props.selectedTab;\n  const { title, onTabClick, icon, testId } = props.tabProps;\n  const handleClick = (): void => {\n    if (onTabClick) onTabClick(props.index);\n    props.onTabListClick(props.index);\n    scrollToTab(props.index);\n  };\n  const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n    [styles['tab-list__tab--selected']]: isSelected,\n    [styles['tab-list__tab--not-selected']]: !isSelected,\n  });\n\n  const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n  const scrollToTab = (index: number): void => {\n    const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n\n    if (currentRef?.current?.scrollIntoView) {\n      currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: 'nearest' });\n    }\n  };\n\n  const itemRef = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (isSelected && props.tabListVisible) {\n      scrollToTab(props.index);\n    }\n  }, [isSelected]);\n\n  return (\n    <li role=\"presentation\" ref={itemRef}>\n      <button\n        role=\"tab\"\n        aria-selected={isSelected}\n        onClick={handleClick}\n        className={tabButtonClasses}\n        data-testid={testId}\n        ref={currentRef as React.RefObject<HTMLButtonElement>}\n      >\n        <span className={styles['tab-list__tab__title-and-icon']}>\n          {icon &&\n            (typeof icon === 'string' ? (\n              <LazyIcon\n                iconName={icon as IconName}\n                size={IconSize.XSmall}\n                color={isSelected ? palette[`black`] : palette['blueberry500']}\n              />\n            ) : (\n              <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n            ))}\n          {title}\n        </span>\n      </button>\n    </li>\n  );\n};\n\nexport default TabItem;\n","import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TabProps } from '../Tab';\nimport type { TabsColors, TabsOnColor } from '../Tabs';\n\nimport TabChevron from './TabChevron';\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab from '../Tab';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color: TabsColors;\n  onColor: TabsOnColor;\n  ariaLabelRightButton?: string;\n  ariaLabelLeftButton?: string;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color, onColor, ariaLabelLeftButton, ariaLabelRightButton } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()) || []);\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${onColor}`]);\n\n  const getBackgroundColor = (onColor: TabsOnColor): string => {\n    switch (onColor) {\n      case 'onwhite':\n        return 'var(--color-base-background-light)';\n      case 'onblueberry':\n        return 'var(--color-base-blueberry-background-light)';\n      case 'onneutral':\n        return 'var(--color-base-neutral-background-light)';\n    }\n  };\n  const firstTab = tabRefs.current && tabRefs.current[0];\n  const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];\n\n  const firstTabVisible = useIsVisible(firstTab);\n  const lastTabVisible = useIsVisible(lastTab);\n  const tabListVisible = useIsVisible(listRef);\n\n  const shouldShowFadeStart = (): boolean => {\n    return !firstTabVisible;\n  };\n\n  const shouldShowFadeEnd = (): boolean => {\n    return !lastTabVisible;\n  };\n\n  const scrollInList = (direction: string): void => {\n    if (listRef.current) {\n      const listWidth = listRef.current.clientWidth;\n      const listScrollLeft = listRef.current.scrollLeft;\n      const maxScrollLeft = listRef.current.scrollWidth - listWidth;\n\n      if (direction === 'right' && !lastTabVisible) {\n        const scrollAmount = Math.min(listWidth / 2, maxScrollLeft - listScrollLeft);\n        listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n      } else if (direction === 'left' && !firstTabVisible) {\n        const scrollAmount = -Math.min(listWidth / 2, listScrollLeft);\n        listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n      }\n    }\n  };\n\n  return (\n    <div className={styles['tab-list-wrapper']}>\n      {shouldShowFadeStart() && (\n        <div className={classNames(styles['tab-list__start-wrapper'])}>\n          <TabChevron\n            onClick={() => scrollInList('left')}\n            direction=\"left\"\n            backgroundColor={`${getBackgroundColor(onColor)}`}\n            ariaLabel={ariaLabelLeftButton}\n          />\n          <div\n            className={classNames(styles['tab-list__fade-start'])}\n            style={{\n              backgroundColor: `${getBackgroundColor(onColor)}`,\n            }}\n          ></div>\n        </div>\n      )}\n      <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n        {React.Children.map(children, (child, index) => {\n          if (isComponent<TabProps>(child, Tab)) {\n            return (\n              <TabItem\n                tabRefs={tabRefs}\n                tabListVisible={tabListVisible}\n                key={child.props.title}\n                index={index}\n                selectedTab={selectedTab}\n                onTabListClick={onTabListClick}\n                tabProps={child.props}\n                color={color}\n              />\n            );\n          }\n          return null;\n        })}\n      </ul>\n      {shouldShowFadeEnd() && (\n        <div className={classNames(styles['tab-list__end-wrapper'])}>\n          <div\n            className={classNames(styles['tab-list__fade-end'])}\n            style={{\n              backgroundColor: `${getBackgroundColor(onColor)}`,\n            }}\n          ></div>\n          <TabChevron\n            onClick={() => scrollInList('right')}\n            direction=\"right\"\n            backgroundColor={`${getBackgroundColor(onColor)}`}\n            ariaLabel={ariaLabelRightButton}\n          />\n        </div>\n      )}\n      <div className={classNames(styles['tab-list__border'])}></div>\n    </div>\n  );\n};\n\nexport default TabList;\n","import TabList from './TabList';\nexport * from './TabList';\nexport default TabList;\n"],"mappings":"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"}

package/lib/Toggle.js

@@ -35,7 +35,7 @@ var Toggle = ({ checked = false, disabled, label, onChange, onColor = ToggleOnCo
 	const showHoveredStyling = isHovered && !showToggleAnimation;
 	const isOnWhite = onColor === ToggleOnColor.onwhite;
 	const animationDuration = disabled ? 0 : .2;
-	const dotBackgroundColor = disabled ? "var(--color-disabled-graphics)" : checkedState ? "var(--color-action-graphics-ondark)" : "var(--core-color-neutral-700)";
+	const dotBackgroundColor = disabled ? "var(--color-disabled-graphics-dark)" : checkedState ? "var(--color-action-graphics-light-normal)" : "var(--core-color-neutral-700)";
 	if (checked !== checkedControlledState && typeof checked !== "undefined") {
 		setCheckedControlledState(checked);
 		setCheckedState(checked);
@@ -43,7 +43,7 @@ var Toggle = ({ checked = false, disabled, label, onChange, onColor = ToggleOnCo
 	const getBackgroundColor = () => {
 		if (disabled) return "transparent";
 		else if (checkedState && isActive) return "var(--core-color-blueberry-800)";
-		else if (checkedState) return showHoveredStyling ? "var(--color-action-graphics-onlight-hover)" : "var(--color-action-graphics-onlight)";
+		else if (checkedState) return showHoveredStyling ? "var(--color-action-graphics-dark-hover)" : "var(--color-action-graphics-dark-normal)";
 		else if (isOnWhite && isActive) return "var(--core-color-neutral-400)";
 		else if (isOnWhite) return showHoveredStyling ? "var(--core-color-neutral-200)" : "var(--core-color-neutral-50)";
 		else if (isActive) return "var(--core-color-neutral-200)";

package/lib/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":[],"sources":["../src/components/Toggle/constants.ts","../src/components/Toggle/Toggle.tsx","../src/components/Toggle/index.ts"],"sourcesContent":["export enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n","import React, { useState, useEffect, useId } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { ToggleOnColor, TogglePosition } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\n\nimport styles from './styles.module.scss';\n\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport type StatusTextType = {\n  checked: string;\n  unchecked: string;\n};\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'disabled'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** A text that is shown under the Toggle switch */\n  statusText?: StatusTextType;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  disabled,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  statusText,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedControlledState, setCheckedControlledState] = useState(checked);\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const baseId = useId();\n  const toggleId = 'toggle-' + baseId;\n  const inputId = 'input-' + baseId;\n  const labelId = 'label-' + baseId;\n  const subLabelId = 'sublabel-' + baseId;\n  const toggleRef = React.useRef<HTMLSpanElement>(null);\n  const toggleDotRef = React.useRef<HTMLSpanElement>(null);\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n  const animationDuration = disabled ? 0 : 0.2;\n  const dotBackgroundColor = disabled\n    ? 'var(--color-disabled-graphics)'\n    : checkedState\n      ? 'var(--color-action-graphics-ondark)'\n      : 'var(--core-color-neutral-700)';\n\n  if (checked !== checkedControlledState && typeof checked !== 'undefined') {\n    setCheckedControlledState(checked);\n    setCheckedState(checked);\n  }\n\n  const getBackgroundColor = (): string => {\n    if (disabled) {\n      return 'transparent';\n    } else if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    if (!toggleRef.current || !toggleDotRef.current) return;\n    animate(toggleRef.current, { background: getBackgroundColor() }, { duration: animationDuration, ease: 'easeInOut' });\n    animate(\n      toggleDotRef.current,\n      {\n        background: dotBackgroundColor,\n      },\n      { duration: animationDuration, ease: 'easeInOut' }\n    );\n    animate(toggleDotRef.current, { x: checkedState ? 16 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive, disabled]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container'], {\n    [styles['toggle-container--position-right']]: togglePosition === TogglePosition.right,\n    [styles['toggle-container--with-status']]: statusText !== undefined && statusText !== null,\n    [styles['toggle-container--disabled']]: disabled,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel']);\n\n  const statusTextClassNames = classNames(styles['toggle-container__status'], {\n    [styles['toggle-container__status--checked']]: checkedState,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <div className={styles['toggle-container__outer-toggle']}>\n      <label ref={refObject} className={styles['toggle-container__toggle-group']}>\n        <input\n          disabled={disabled}\n          id={inputId}\n          type=\"checkbox\"\n          checked={checkedState}\n          onChange={handleChange}\n          className={styles['toggle-container__input']}\n          aria-label={label.map(l => l.text).join(' ')}\n          aria-describedby={[subLabel ? subLabelId : null, statusText ? toggleId + '-status' : null].filter(Boolean).join(' ') || undefined}\n          role=\"switch\"\n        />\n        <span id={toggleId} ref={toggleRef} className={toggleClassNames} aria-hidden=\"true\">\n          <span ref={toggleDotRef} className={toggleDotClassNames} aria-hidden=\"true\">\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={styles['toggle-container__toggle__dot__icon']}\n            >\n              <path d=\"M11 2.65247L4.69877 9.34741L1 5.41836\" strokeWidth=\"2.2\" />\n            </svg>\n          </span>\n        </span>\n      </label>\n      {statusText && (\n        <span className={statusTextClassNames} id={toggleId + '-status'}>\n          {checkedState ? statusText.checked : statusText.unchecked}\n        </span>\n      )}\n    </div>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <div className={styles['toggle-container__outer-label']}>\n        <span id={labelId} className={styles['toggle-container__label']}>\n          {label.map(labelText => {\n            const labelClassNames = classNames({\n              [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n            });\n\n            return (\n              <span key={labelId + labelText.text} className={labelClassNames}>\n                {labelText.text}\n              </span>\n            );\n          })}\n        </span>\n        {subLabel && (\n          <div id={subLabelId} className={subLabelClassNames}>\n            {subLabel}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      {togglePosition === TogglePosition.left && (\n        <>\n          {renderToggle()}\n          {renderLabelText()}\n        </>\n      )}\n      {togglePosition === TogglePosition.right && (\n        <>\n          {renderLabelText()}\n          {renderToggle()}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n","import Toggle from './Toggle';\nexport { TogglePosition, ToggleOnColor } from './constants';\nexport * from './Toggle';\nexport default Toggle;\n"],"mappings":"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"}
+{"version":3,"file":"Toggle.js","names":[],"sources":["../src/components/Toggle/constants.ts","../src/components/Toggle/Toggle.tsx","../src/components/Toggle/index.ts"],"sourcesContent":["export enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n","import React, { useState, useEffect, useId } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { ToggleOnColor, TogglePosition } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport type StatusTextType = {\n  checked: string;\n  unchecked: string;\n};\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'disabled'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** A text that is shown under the Toggle switch */\n  statusText?: StatusTextType;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  disabled,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  statusText,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedControlledState, setCheckedControlledState] = useState(checked);\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const baseId = useId();\n  const toggleId = 'toggle-' + baseId;\n  const inputId = 'input-' + baseId;\n  const labelId = 'label-' + baseId;\n  const subLabelId = 'sublabel-' + baseId;\n  const toggleRef = React.useRef<HTMLSpanElement>(null);\n  const toggleDotRef = React.useRef<HTMLSpanElement>(null);\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n  const animationDuration = disabled ? 0 : 0.2;\n  const dotBackgroundColor = disabled\n    ? 'var(--color-disabled-graphics-dark)'\n    : checkedState\n      ? 'var(--color-action-graphics-light-normal)'\n      : 'var(--core-color-neutral-700)';\n\n  if (checked !== checkedControlledState && typeof checked !== 'undefined') {\n    setCheckedControlledState(checked);\n    setCheckedState(checked);\n  }\n\n  const getBackgroundColor = (): string => {\n    if (disabled) {\n      return 'transparent';\n    } else if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-dark-hover)' : 'var(--color-action-graphics-dark-normal)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    if (!toggleRef.current || !toggleDotRef.current) return;\n    animate(toggleRef.current, { background: getBackgroundColor() }, { duration: animationDuration, ease: 'easeInOut' });\n    animate(\n      toggleDotRef.current,\n      {\n        background: dotBackgroundColor,\n      },\n      { duration: animationDuration, ease: 'easeInOut' }\n    );\n    animate(toggleDotRef.current, { x: checkedState ? 16 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive, disabled]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container'], {\n    [styles['toggle-container--position-right']]: togglePosition === TogglePosition.right,\n    [styles['toggle-container--with-status']]: statusText !== undefined && statusText !== null,\n    [styles['toggle-container--disabled']]: disabled,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel']);\n\n  const statusTextClassNames = classNames(styles['toggle-container__status'], {\n    [styles['toggle-container__status--checked']]: checkedState,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <div className={styles['toggle-container__outer-toggle']}>\n      <label ref={refObject} className={styles['toggle-container__toggle-group']}>\n        <input\n          disabled={disabled}\n          id={inputId}\n          type=\"checkbox\"\n          checked={checkedState}\n          onChange={handleChange}\n          className={styles['toggle-container__input']}\n          aria-label={label.map(l => l.text).join(' ')}\n          aria-describedby={[subLabel ? subLabelId : null, statusText ? toggleId + '-status' : null].filter(Boolean).join(' ') || undefined}\n          role=\"switch\"\n        />\n        <span id={toggleId} ref={toggleRef} className={toggleClassNames} aria-hidden=\"true\">\n          <span ref={toggleDotRef} className={toggleDotClassNames} aria-hidden=\"true\">\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={styles['toggle-container__toggle__dot__icon']}\n            >\n              <path d=\"M11 2.65247L4.69877 9.34741L1 5.41836\" strokeWidth=\"2.2\" />\n            </svg>\n          </span>\n        </span>\n      </label>\n      {statusText && (\n        <span className={statusTextClassNames} id={toggleId + '-status'}>\n          {checkedState ? statusText.checked : statusText.unchecked}\n        </span>\n      )}\n    </div>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <div className={styles['toggle-container__outer-label']}>\n        <span id={labelId} className={styles['toggle-container__label']}>\n          {label.map(labelText => {\n            const labelClassNames = classNames({\n              [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n            });\n\n            return (\n              <span key={labelId + labelText.text} className={labelClassNames}>\n                {labelText.text}\n              </span>\n            );\n          })}\n        </span>\n        {subLabel && (\n          <div id={subLabelId} className={subLabelClassNames}>\n            {subLabel}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      {togglePosition === TogglePosition.left && (\n        <>\n          {renderToggle()}\n          {renderLabelText()}\n        </>\n      )}\n      {togglePosition === TogglePosition.right && (\n        <>\n          {renderLabelText()}\n          {renderToggle()}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n","import Toggle from './Toggle';\nexport { TogglePosition, ToggleOnColor } from './constants';\nexport * from './Toggle';\nexport default Toggle;\n"],"mappings":";;;;;;;;AAAA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,UAAA;CACA,eAAA,WAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,gBAAL,yBAAA,eAAA;CACL,cAAA,aAAA;CACA,cAAA,eAAA;CACA,cAAA,iBAAA;;AACF,EAAA,CAAA,CAAA;;;AC6BA,IAAM,UAAiC,EACrC,UAAU,OACV,UACA,OACA,UACA,UAAU,cAAc,SACxB,YACA,UACA,iBAAiB,eAAe,MAChC,aACiB;CACjB,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,OAAO;CAC5E,MAAM,CAAC,cAAc,mBAAmB,SAAS,OAAO;CACxD,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,KAAK;CACpE,MAAM,CAAC,OAAO,WAAW,WAAW;CACpC,MAAM,SAAS,MAAM;CACrB,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,WAAW;CAC3B,MAAM,UAAU,WAAW;CAC3B,MAAM,aAAa,cAAc;CACjC,MAAM,YAAY,MAAM,OAAwB,IAAI;CACpD,MAAM,eAAe,MAAM,OAAwB,IAAI;CACvD,MAAM,EAAE,WAAW,WAAW,aAAa,iBAAmC,KAAK;CACnF,MAAM,qBAAqB,aAAa,CAAC;CACzC,MAAM,YAAY,YAAY,cAAc;CAC5C,MAAM,oBAAoB,WAAW,IAAI;CACzC,MAAM,qBAAqB,WACvB,wCACA,eACE,8CACA;CAEN,IAAI,YAAY,0BAA0B,OAAO,YAAY,aAAa;EACxE,0BAA0B,OAAO;EACjC,gBAAgB,OAAO;CACzB;CAEA,MAAM,2BAAmC;EACvC,IAAI,UACF,OAAO;OACF,IAAI,gBAAgB,UACzB,OAAO;OACF,IAAI,cACT,OAAO,qBAAqB,4CAA4C;OACnE,IAAI,aAAa,UACtB,OAAO;OACF,IAAI,WACT,OAAO,qBAAqB,kCAAkC;OACzD,IAAI,UACT,OAAO;OAEP,OAAO,qBAAqB,iCAAiC;CAEjE;CAEA,gBAAgB;EACd,IAAI,qBAAqB;GACvB,MAAM,QAAQ,iBAAiB,uBAAuB,KAAK,GAAG,GAAG;GACjE,aAAmB,aAAa,KAAK;EACvC;CACF,GAAG,CAAC,mBAAmB,CAAC;CAExB,gBAAgB;EACd,IAAI,CAAC,UAAU,WAAW,CAAC,aAAa,SAAS;EACjD,QAAQ,UAAU,SAAS,EAAE,YAAY,mBAAmB,EAAE,GAAG;GAAE,UAAU;GAAmB,MAAM;EAAY,CAAC;EACnH,QACE,aAAa,SACb,EACE,YAAY,mBACd,GACA;GAAE,UAAU;GAAmB,MAAM;EAAY,CACnD;EACA,QAAQ,aAAa,SAAS,EAAE,GAAG,eAAe,KAAK,EAAE,GAAG;GAAE,UAAU;GAAmB,MAAM;EAAY,CAAC;EAC9G,QAAQ,OAAO,EAAE,SAAS,eAAe,IAAI,EAAE,GAAG;GAAE,UAAU;GAAmB,MAAM;EAAY,CAAC;CACtG,GAAG;EAAC;EAAc;EAAoB;EAAU;CAAQ,CAAC;CAEzD,MAAM,gBAAgB,UAAqD;EACzE,gBAAgB,MAAM,OAAO,OAAO;EACpC,uBAAuB,IAAI;EAC3B,WAAW,KAAK;CAClB;CAEA,MAAM,4BAA4B,WAAW,OAAO,qBAAqB;GACtE,OAAO,sCAAsC,mBAAmB,eAAe;GAC/E,OAAO,mCAAmC,eAAe,KAAA,KAAa,eAAe;GACrF,OAAO,gCAAgC;CAC1C,CAAC;CAED,MAAM,qBAAqB,WAAW,OAAO,6BAA6B;CAE1E,MAAM,uBAAuB,WAAW,OAAO,6BAA6B,GACzE,OAAO,uCAAuC,aACjD,CAAC;CAED,MAAM,mBAAmB,WAAW,OAAO,6BAA6B;GACrE,OAAO,4CAA4C;GACnD,OAAO,wCAAwC,YAAY,cAAc;CAC5E,CAAC;CAED,MAAM,sBAAsB,WAAW,OAAO,kCAAkC,GAC7E,OAAO,iDAAiD,oBAC3D,CAAC;CAED,MAAM,qBACJ,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACE,qBAAC,SAAD;GAAO,KAAK;GAAW,WAAW,OAAO;GAAzC,UAAA,CACE,oBAAC,SAAD;IACY;IACV,IAAI;IACJ,MAAK;IACL,SAAS;IACT,UAAU;IACV,WAAW,OAAO;IAClB,cAAY,MAAM,KAAI,MAAK,EAAE,IAAI,CAAC,CAAC,KAAK,GAAG;IAC3C,oBAAkB,CAAC,WAAW,aAAa,MAAM,aAAa,WAAW,YAAY,IAAI,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;IACxH,MAAK;GACN,CAAA,GACD,oBAAC,QAAD;IAAM,IAAI;IAAU,KAAK;IAAW,WAAW;IAAkB,eAAY;IAC3E,UAAA,oBAAC,QAAD;KAAM,KAAK;KAAc,WAAW;KAAqB,eAAY;KACnE,UAAA,oBAAC,OAAD;MACE,OAAM;MACN,QAAO;MACP,SAAQ;MACR,MAAK;MACL,OAAM;MACN,WAAW,OAAO;MAElB,UAAA,oBAAC,QAAD;OAAM,GAAE;OAAwC,aAAY;MAAO,CAAA;KAChE,CAAA;IACD,CAAA;GACF,CAAA,CACD;EACN,CAAA,GAAA,cACC,oBAAC,QAAD;GAAM,WAAW;GAAsB,IAAI,WAAW;GACnD,UAAA,eAAe,WAAW,UAAU,WAAW;EAC5C,CAAA,CAEL;;CAGP,MAAM,wBAA4C;EAChD,OACE,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACE,oBAAC,QAAD;IAAM,IAAI;IAAS,WAAW,OAAO;IAClC,UAAA,MAAM,KAAI,cAAa;KACtB,MAAM,kBAAkB,WAAW,GAChC,OAAO,4CAA4C,UAAU,SAAS,UACzE,CAAC;KAED,OACE,oBAAC,QAAD;MAAqC,WAAW;MAC7C,UAAA,UAAU;KACP,GAFK,UAAU,UAAU,IAEzB;IAEV,CAAC;GACG,CAAA,GACL,YACC,oBAAC,OAAD;IAAK,IAAI;IAAY,WAAW;IAC7B,UAAA;GACE,CAAA,CAEJ;;CAET;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW;EAA2B,eAAa;EAAQ,oBAAkB,YAAY;EAA9F,UAAA,CACG,mBAAmB,eAAe,QACjC,qBAAA,UAAA,EAAA,UAAA,CACG,aAAa,GACb,gBAAgB,CACjB,EAAA,CAAA,GAEH,mBAAmB,eAAe,SACjC,qBAAA,UAAA,EAAA,UAAA,CACG,gBAAgB,GAChB,aAAa,CACd,EAAA,CAAA,CAED;;AAET;;;ACxNA,IAAA,iBAAe"}

package/lib/VisualRadio.js

@@ -30,7 +30,7 @@ var VisualRadio = (props) => {
 			className: classNames(styles["visual-radio"], styles[`visual-radio--variant-${variant}`], { [styles["visual-radio--invalid"]]: error }, className),
 			htmlFor: inputId,
 			"data-testid": testId,
-			"data-analyticsid": AnalyticsId.RadioButton,
+			"data-analyticsid": AnalyticsId.Radio,
 			children: [
 				visualContent !== void 0 && /* @__PURE__ */ jsx(VisualContent, { children: visualContent }),
 				/* @__PURE__ */ jsx("input", {

package/lib/VisualRadio.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisualRadio.js","names":[],"sources":["../src/components/VisualRadioGroup/VisualRadio/VisualContent.tsx","../src/components/VisualRadioGroup/VisualRadio/VisualRadio.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualContentProps {\n  /** Content rendered inside the circular area – typically an <img> or illustration component. */\n  children: React.ReactNode;\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const VisualContent: React.FC<VisualContentProps> = props => {\n  const { children, className, testId } = props;\n\n  return (\n    <span className={classNames(styles['visual-radio__visual-content'], className)} data-testid={testId} aria-hidden=\"true\">\n      {children}\n    </span>\n  );\n};\n\nexport default VisualContent;\n","import classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../../ErrorWrapper';\n\nimport VisualContent from './VisualContent';\nimport { AnalyticsId } from '../../../constants';\nimport { useIdWithFallback } from '../../../hooks/useIdWithFallback';\nimport { getAriaDescribedBy } from '../../../utils/accessibility';\nimport ErrorWrapper from '../../ErrorWrapper';\nimport RadioMarker from '../../RadioButton/RadioMarker/RadioMarker';\n\nimport styles from './styles.module.scss';\n\nexport type VisualRadioVariant = 'line' | 'rectangle';\n\nexport interface VisualRadioProps\n  extends ErrorWrapperClassNameProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'className' | 'children' | 'size'> {\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Label rendered inside the radio frame. */\n  children: string;\n  /** Content rendered inside the circular visual slot. */\n  visualContent?: React.ReactNode;\n  /** Layout variant. `line` is a thin horizontal pill, `rectangle` is a vertical card. */\n  variant?: VisualRadioVariant;\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 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 forwarded to the underlying input element. */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst VisualRadio: React.FC<VisualRadioProps> = props => {\n  const {\n    className,\n    children,\n    visualContent,\n    variant = 'line',\n    inputId: inputIdProp,\n    errorText,\n    error = !!errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    testId,\n    ref,\n    ...rest\n  } = props;\n\n  const inputId = useIdWithFallback(inputIdProp);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <label\n        className={classNames(\n          styles['visual-radio'],\n          styles[`visual-radio--variant-${variant}`],\n          { [styles['visual-radio--invalid']]: error },\n          className\n        )}\n        htmlFor={inputId}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.RadioButton}\n      >\n        {visualContent !== undefined && <VisualContent>{visualContent}</VisualContent>}\n        {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props -- aria-invalid is a global ARIA state, valid on radio inputs */}\n        <input\n          {...rest}\n          id={inputId}\n          ref={ref}\n          className={styles['visual-radio__input']}\n          type=\"radio\"\n          checked={rest.checked}\n          aria-invalid={error}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n          onChange={rest.onChange}\n        />\n        <span className={styles['visual-radio__frame']}>\n          <span className={styles['visual-radio__label']}>{children}</span>\n          <RadioMarker error={error} size={'large'} />\n        </span>\n      </label>\n    </ErrorWrapper>\n  );\n};\n\nexport default VisualRadio;\n"],"mappings":";;;;;;;;;AAaA,IAAa,iBAA8C,UAAS;CAClE,MAAM,EAAE,UAAU,WAAW,WAAW;CAExC,OACE,oBAAC,QAAD;EAAM,WAAW,WAAW,OAAO,iCAAiC,SAAS;EAAG,eAAa;EAAQ,eAAY;EAC9G;CACG,CAAA;AAEV;;;ACkBA,IAAM,eAA0C,UAAS;CACvD,MAAM,EACJ,WACA,UACA,eACA,UAAU,QACV,SAAS,aACT,WACA,QAAQ,CAAC,CAAC,WACV,aAAa,iBACb,uBACA,QACA,KACA,GAAG,SACD;CAEJ,MAAM,UAAU,kBAAkB,WAAW;CAC7C,MAAM,cAAc,kBAAkB,eAAe;CAErD,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;EACjF,UAAA,qBAAC,SAAD;GACE,WAAW,WACT,OAAO,iBACP,OAAO,yBAAyB,YAChC,GAAG,OAAO,2BAA2B,MAAM,GAC3C,SACF;GACA,SAAS;GACT,eAAa;GACb,oBAAkB,YAAY;GAThC,UAAA;IAWG,kBAAkB,KAAA,KAAa,oBAAC,eAAD,EAAA,UAAgB,cAA6B,CAAA;IAE7E,oBAAC,SAAD;KACE,GAAI;KACJ,IAAI;KACC;KACL,WAAW,OAAO;KAClB,MAAK;KACL,SAAS,KAAK;KACd,gBAAc;KACd,oBAAkB,mBAAmB,OAAO,WAAW;KACvD,UAAU,KAAK;IAChB,CAAA;IACD,qBAAC,QAAD;KAAM,WAAW,OAAO;KAAxB,UAAA,CACE,oBAAC,QAAD;MAAM,WAAW,OAAO;MAAyB;KAAe,CAAA,GAChE,oBAAC,aAAD;MAAoB;MAAO,MAAM;KAAU,CAAA,CACvC;;GACD;;CACK,CAAA;AAElB"}
+{"version":3,"file":"VisualRadio.js","names":[],"sources":["../src/components/VisualRadioGroup/VisualRadio/VisualContent.tsx","../src/components/VisualRadioGroup/VisualRadio/VisualRadio.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualContentProps {\n  /** Content rendered inside the circular area – typically an <img> or illustration component. */\n  children: React.ReactNode;\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const VisualContent: React.FC<VisualContentProps> = props => {\n  const { children, className, testId } = props;\n\n  return (\n    <span className={classNames(styles['visual-radio__visual-content'], className)} data-testid={testId} aria-hidden=\"true\">\n      {children}\n    </span>\n  );\n};\n\nexport default VisualContent;\n","import classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../../ErrorWrapper';\n\nimport VisualContent from './VisualContent';\nimport { AnalyticsId } from '../../../constants';\nimport { useIdWithFallback } from '../../../hooks/useIdWithFallback';\nimport { getAriaDescribedBy } from '../../../utils/accessibility';\nimport ErrorWrapper from '../../ErrorWrapper';\nimport RadioMarker from '../../Radio/RadioMarker/RadioMarker';\n\nimport styles from './styles.module.scss';\n\nexport type VisualRadioVariant = 'line' | 'rectangle';\n\nexport interface VisualRadioProps\n  extends ErrorWrapperClassNameProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'className' | 'children' | 'size'> {\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Label rendered inside the radio frame. */\n  children: string;\n  /** Content rendered inside the circular visual slot. */\n  visualContent?: React.ReactNode;\n  /** Layout variant. `line` is a thin horizontal pill, `rectangle` is a vertical card. */\n  variant?: VisualRadioVariant;\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 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 forwarded to the underlying input element. */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst VisualRadio: React.FC<VisualRadioProps> = props => {\n  const {\n    className,\n    children,\n    visualContent,\n    variant = 'line',\n    inputId: inputIdProp,\n    errorText,\n    error = !!errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    testId,\n    ref,\n    ...rest\n  } = props;\n\n  const inputId = useIdWithFallback(inputIdProp);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <label\n        className={classNames(\n          styles['visual-radio'],\n          styles[`visual-radio--variant-${variant}`],\n          { [styles['visual-radio--invalid']]: error },\n          className\n        )}\n        htmlFor={inputId}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Radio}\n      >\n        {visualContent !== undefined && <VisualContent>{visualContent}</VisualContent>}\n        {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props -- aria-invalid is a global ARIA state, valid on radio inputs */}\n        <input\n          {...rest}\n          id={inputId}\n          ref={ref}\n          className={styles['visual-radio__input']}\n          type=\"radio\"\n          checked={rest.checked}\n          aria-invalid={error}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n          onChange={rest.onChange}\n        />\n        <span className={styles['visual-radio__frame']}>\n          <span className={styles['visual-radio__label']}>{children}</span>\n          <RadioMarker error={error} size={'large'} />\n        </span>\n      </label>\n    </ErrorWrapper>\n  );\n};\n\nexport default VisualRadio;\n"],"mappings":";;;;;;;;;AAaA,IAAa,iBAA8C,UAAS;CAClE,MAAM,EAAE,UAAU,WAAW,WAAW;CAExC,OACE,oBAAC,QAAD;EAAM,WAAW,WAAW,OAAO,iCAAiC,SAAS;EAAG,eAAa;EAAQ,eAAY;EAC9G;CACG,CAAA;AAEV;;;ACkBA,IAAM,eAA0C,UAAS;CACvD,MAAM,EACJ,WACA,UACA,eACA,UAAU,QACV,SAAS,aACT,WACA,QAAQ,CAAC,CAAC,WACV,aAAa,iBACb,uBACA,QACA,KACA,GAAG,SACD;CAEJ,MAAM,UAAU,kBAAkB,WAAW;CAC7C,MAAM,cAAc,kBAAkB,eAAe;CAErD,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;EACjF,UAAA,qBAAC,SAAD;GACE,WAAW,WACT,OAAO,iBACP,OAAO,yBAAyB,YAChC,GAAG,OAAO,2BAA2B,MAAM,GAC3C,SACF;GACA,SAAS;GACT,eAAa;GACb,oBAAkB,YAAY;GAThC,UAAA;IAWG,kBAAkB,KAAA,KAAa,oBAAC,eAAD,EAAA,UAAgB,cAA6B,CAAA;IAE7E,oBAAC,SAAD;KACE,GAAI;KACJ,IAAI;KACC;KACL,WAAW,OAAO;KAClB,MAAK;KACL,SAAS,KAAK;KACd,gBAAc;KACd,oBAAkB,mBAAmB,OAAO,WAAW;KACvD,UAAU,KAAK;IAChB,CAAA;IACD,qBAAC,QAAD;KAAM,WAAW,OAAO;KAAxB,UAAA,CACE,oBAAC,QAAD;MAAM,WAAW,OAAO;MAAyB;KAAe,CAAA,GAChE,oBAAC,aAAD;MAAoB;MAAO,MAAM;KAAU,CAAA,CACvC;;GACD;;CACK,CAAA;AAElB"}

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

@@ -1,19 +1,18 @@
 @use 'sass:map';
-@import '../../scss/supernova/styles/colors.css';
 
 $underline-width: 0.0625rem;
 $focus-width: 0.15rem;
 
 @mixin anchorlink-hover {
   cursor: pointer;
-  color: var(--color-action-text-onlight-hover);
+  color: var(--color-action-text-dark-hover);
   background-color: var(--color-action-background-transparent-onlight-hover);
   text-decoration-color: var(--color-action-border-hover);
 }
 
 @mixin anchorlink-focus {
   outline: none;
-  border: $focus-width solid var(--color-action-border-onlight-focus);
+  border: $focus-width solid var(--color-action-border-dark-focus);
 }
 
 @mixin anchorlink {
@@ -22,7 +21,7 @@ $focus-width: 0.15rem;
   overflow-wrap: break-word;
   word-break: normal;
   text-align: left;
-  color: var(--color-action-text-onlight);
+  color: var(--color-action-text-dark-normal);
   border: $focus-width solid transparent;
   text-decoration: underline;
   text-underline-offset: 0.16rem;