@helsenorge/designsystem-react 14.9.1 → 14.10.0

package/lib/CHANGELOG.md

@@ -1,4 +1,18 @@
 
+## [14.10.0](https://github.com/helsenorge/designsystem/compare/v14.9.2...v14.10.0) (2026-05-18)
+
+### Features
+
+*  ny komponent visualcheckboxcloud ([4e6ea9c](https://github.com/helsenorge/designsystem/commit/4e6ea9c904f65cf4aedf2cc3f474cbff117c080a)), closes [#376757](https://github.com/helsenorge/designsystem/issues/376757)
+*  ny komponent visualradiobuttoncloud ([d14fce7](https://github.com/helsenorge/designsystem/commit/d14fce7e75b9f22397288defc51bfc6158595199)), closes [#376757](https://github.com/helsenorge/designsystem/issues/376757)
+
+## [14.9.2](https://github.com/helsenorge/designsystem/compare/v14.9.1...v14.9.2) (2026-05-13)
+
+### Bug Fixes
+
+* **dateandtime:**  softerror skal spre seg uten å påvirke naboer ([27db71b](https://github.com/helsenorge/designsystem/commit/27db71b8e65f4d062da6b87f66147451d78be64f)), closes [#377339](https://github.com/helsenorge/designsystem/issues/377339)
+* **filtersort:**  første child skal være høyrestilt ([a9acf73](https://github.com/helsenorge/designsystem/commit/a9acf73ff4e65c267025535ec1d9f0ef78545b55)), closes [#376682](https://github.com/helsenorge/designsystem/issues/376682)
+
 ## [14.9.1](https://github.com/helsenorge/designsystem/compare/v14.9.0...v14.9.1) (2026-05-12)
 
 ### Bug Fixes

package/lib/Checkbox3.js

@@ -0,0 +1,68 @@
+import { n as AnalyticsId } 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 classNames from "classnames";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/VisualCheckboxCloud/Checkbox/styles.module.scss";
+var Checkbox = (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 [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-checkbox"], {
+				[styles["visual-checkbox--checked"]]: isChecked,
+				[styles["visual-checkbox--invalid"]]: error
+			}, className),
+			htmlFor: inputId,
+			"data-testid": testId,
+			"data-analyticsid": AnalyticsId.Checkbox,
+			children: [/* @__PURE__ */ jsx("input", {
+				...rest,
+				id: inputId,
+				ref,
+				className: styles["visual-checkbox__input"],
+				type: "checkbox",
+				checked: isChecked,
+				"aria-invalid": error,
+				"aria-describedby": getAriaDescribedBy(props, errorTextId),
+				onChange: handleChange
+			}), /* @__PURE__ */ jsxs("span", {
+				className: styles["visual-checkbox__pill"],
+				children: [isChecked && /* @__PURE__ */ jsx("span", {
+					className: styles["visual-checkbox__icon"],
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("svg", {
+						width: "16",
+						height: "12",
+						fill: "none",
+						xmlns: "http://www.w3.org/2000/svg",
+						children: /* @__PURE__ */ jsx("path", { d: "m14.754.165 1.08 1.074.166.164-.16.17L6.13 12 .159 5.59 0 5.42l.166-.164 1.08-1.075.165-.164.16.17 4.558 4.896 8.3-8.913.16-.17.165.165Z" })
+					})
+				}), /* @__PURE__ */ jsx("span", {
+					className: styles["visual-checkbox__label"],
+					children
+				})]
+			})]
+		})
+	});
+};
+var Checkbox_default = Checkbox;
+export { Checkbox_default as t };
+
+//# sourceMappingURL=Checkbox3.js.map

package/lib/Checkbox3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox3.js","names":["Checkbox: React.FC<CheckboxProps>"],"sources":["../src/components/VisualCheckboxCloud/Checkbox/Checkbox.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 { getAriaDescribedBy } from '../../../utils/accessibility';\nimport ErrorWrapper from '../../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface CheckboxProps\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 text shown inside the pill. */\n  children: React.ReactNode;\n  /** input id of the underlying checkbox */\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 Checkbox: React.FC<CheckboxProps> = 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 [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-checkbox'],\n          {\n            [styles['visual-checkbox--checked']]: isChecked,\n            [styles['visual-checkbox--invalid']]: error,\n          },\n          className\n        )}\n        htmlFor={inputId}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Checkbox}\n      >\n        <input\n          {...rest}\n          id={inputId}\n          ref={ref}\n          className={styles['visual-checkbox__input']}\n          type=\"checkbox\"\n          checked={isChecked}\n          aria-invalid={error}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n          onChange={handleChange}\n        />\n        <span className={styles['visual-checkbox__pill']}>\n          {isChecked && (\n            <span className={styles['visual-checkbox__icon']} aria-hidden=\"true\">\n              <svg width=\"16\" height=\"12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"m14.754.165 1.08 1.074.166.164-.16.17L6.13 12 .159 5.59 0 5.42l.166-.164 1.08-1.075.165-.164.16.17 4.558 4.896 8.3-8.913.16-.17.165.165Z\" />\n              </svg>\n            </span>\n          )}\n          <span className={styles['visual-checkbox__label']}>{children}</span>\n        </span>\n      </label>\n    </ErrorWrapper>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;AAiCA,IAAMA,YAAoC,UAAS;CACjD,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,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,oBACP;KACG,OAAO,8BAA8B;KACrC,OAAO,8BAA8B;IACvC,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,gBAAc;IACd,oBAAkB,mBAAmB,OAAO,YAAY;IACxD,UAAU;KACV,EACF,qBAAC,QAAA;IAAK,WAAW,OAAO;eACrB,aACC,oBAAC,QAAA;KAAK,WAAW,OAAO;KAA0B,eAAY;eAC5D,oBAAC,OAAA;MAAI,OAAM;MAAK,QAAO;MAAK,MAAK;MAAO,OAAM;gBAC5C,oBAAC,QAAA,EAAK,GAAE,4IAAA,CAA6I;OACjJ;MACD,EAET,oBAAC,QAAA;KAAK,WAAW,OAAO;KAA4B;MAAgB,CAAA;KAC/D,CAAA;IACD;GACK;;AAInB,IAAA,mBAAe"}

package/lib/RadioButton2.js

@@ -0,0 +1,75 @@
+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 };
+
+//# sourceMappingURL=RadioButton2.js.map

package/lib/RadioButton2.js.map

@@ -0,0 +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"}

package/lib/components/Filter/FilterSort/styles.module.scss

@@ -6,6 +6,7 @@
   select {
     outline: none;
     text-align: right;
+    text-align-last: right;
     color: var(--color-action-text-onlight);
     padding-right: 3rem;
     height: 2.75rem;
@@ -17,6 +18,7 @@
 
   select option {
     text-align: left;
+    direction: ltr;
   }
 
   &__wrapper {

package/lib/components/VisualCheckboxCloud/Checkbox/Checkbox.d.ts

@@ -0,0 +1,21 @@
+import { ErrorWrapperClassNameProps } from '../../ErrorWrapper';
+export interface CheckboxProps extends ErrorWrapperClassNameProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'className' | 'children' | 'size'> {
+    /** Adds custom classes to the root element. */
+    className?: string;
+    /** Label text shown inside the pill. */
+    children: React.ReactNode;
+    /** input id of the underlying checkbox */
+    inputId?: string;
+    /** Activates error styling. Can be true while errorText is empty (e.g. when used in a FormGroup). */
+    error?: boolean;
+    /** Error text to show above the component. */
+    errorText?: string;
+    /** Error text id */
+    errorTextId?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Ref forwarded to the underlying input element. */
+    ref?: React.Ref<HTMLInputElement | null>;
+}
+declare const Checkbox: React.FC<CheckboxProps>;
+export default Checkbox;

package/lib/components/VisualCheckboxCloud/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Checkbox } from './Checkbox';
+export * from './Checkbox';
+export default Checkbox;

package/lib/components/VisualCheckboxCloud/Checkbox/index.js

@@ -0,0 +1,5 @@
+import { t as Checkbox_default$1 } from "../../../Checkbox3.js";
+var Checkbox_default = Checkbox_default$1;
+export { Checkbox_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/components/VisualCheckboxCloud/Checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/VisualCheckboxCloud/Checkbox/index.ts"],"sourcesContent":["import Checkbox from './Checkbox';\nexport * from './Checkbox';\nexport default Checkbox;\n"],"mappings":";AAEA,IAAA,mBAAe"}

package/lib/components/VisualCheckboxCloud/Checkbox/styles.module.scss

@@ -0,0 +1,133 @@
+@use 'sass:map';
+@use '../../../scss/screen-reader' as *;
+@use '../../../scss/breakpoints' as breakpoints;
+@use '../../../scss/font-mixins' as fonts;
+@import '../../../scss/supernova/styles/colors.css';
+@import '../../../scss/supernova/styles/spacers.css';
+
+.visual-checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+  min-height: 2.75rem;
+  padding: 0.313rem 0;
+  cursor: pointer;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    padding: 0;
+  }
+
+  &__input {
+    // Hides input while making sure screen reader outline wraps the entire component
+    cursor: pointer;
+    position: absolute;
+    z-index: 0;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    appearance: none;
+  }
+
+  &__pill {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--core-space-2xs);
+    box-sizing: border-box;
+    min-height: var(--core-space-l);
+    padding: var(--core-space-3xs) 1.75rem;
+    border-radius: 100px;
+    background-color: var(--color-action-background-ondark);
+    border: 1px solid var(--color-action-border-onlight);
+    color: var(--color-base-text-onlight);
+
+    @include fonts.title6;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      min-height: var(--core-space-xl);
+      padding: var(--core-space-3xs) var(--core-space-l);
+    }
+  }
+
+  &:hover &__pill {
+    background-color: var(--color-action-background-ondark-hover);
+    border-color: var(--color-action-border-onlight-hover);
+  }
+
+  &:active &__pill {
+    background-color: var(--color-action-background-ondark-selected);
+    border-color: var(--color-action-border-onlight-hover);
+  }
+
+  &--checked &__pill {
+    background-color: var(--color-action-background-onlight);
+    color: var(--color-action-text-ondark);
+    border-color: var(--color-action-background-onlight);
+    padding: var(--core-space-3xs) var(--core-space-s);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      padding: var(--core-space-3xs) 1.25rem;
+    }
+  }
+
+  &--checked:hover &__pill {
+    background-color: var(--color-action-graphics-onlight-hover);
+    border-color: var(--color-action-graphics-onlight-hover);
+  }
+
+  &--checked:active &__pill {
+    background-color: var(--color-action-background-onlight-active);
+    border-color: var(--color-action-background-onlight-active);
+  }
+
+  &--invalid &__pill {
+    background-color: var(--color-action-background-ondark);
+    border-color: var(--color-destructive-border-normal);
+  }
+
+  &--invalid:hover &__pill {
+    background-color: var(--color-destructive-background-normal);
+    border-color: var(--color-destructive-border-normal);
+  }
+
+  &--invalid:active &__pill {
+    background-color: var(--color-destructive-background-emphasized);
+    border-color: var(--color-destructive-border-normal);
+  }
+
+  &--invalid#{&}--checked &__pill {
+    background-color: var(--color-destructive-graphics-normal);
+    border-color: var(--color-destructive-graphics-normal);
+  }
+
+  &--invalid#{&}--checked:hover &__pill {
+    background-color: var(--color-destructive-graphics-hover);
+    border-color: var(--color-destructive-graphics-hover);
+  }
+
+  &--invalid#{&}--checked:active &__pill {
+    background-color: var(--color-destructive-graphics-emphasized-onlight);
+    border-color: var(--color-destructive-graphics-emphasized-onlight);
+  }
+
+  &__input:focus-visible + &__pill {
+    outline: 3px solid var(--color-action-border-onlight-focus);
+    border-color: var(--color-action-border-ondark);
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      fill: var(--color-action-graphics-ondark);
+    }
+  }
+
+  &__label {
+    text-box: trim-both cap alphabetic;
+  }
+}

package/lib/components/VisualCheckboxCloud/Checkbox/styles.module.scss.d.ts

@@ -0,0 +1,15 @@
+export type Styles = {
+  'visual-checkbox': string;
+  'visual-checkbox__icon': string;
+  'visual-checkbox__input': string;
+  'visual-checkbox__label': string;
+  'visual-checkbox__pill': string;
+  'visual-checkbox--checked': string;
+  'visual-checkbox--invalid': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/VisualCheckboxCloud/VisualCheckboxCloud.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { default as Checkbox } from './Checkbox/Checkbox';
+export interface VisualCheckboxCloudProps {
+    /** Items in the cloud. Should be VisualCheckboxCloud.Checkbox elements. */
+    children?: React.ReactNode;
+    /** Name shared by all child Checkbox elements (overridable per child) */
+    name?: string;
+    /** Error message shown above the cloud */
+    error?: string;
+    /** Error text id (auto-generated if omitted) */
+    errorTextId?: string;
+    /** Renders the error component (Default: true) */
+    renderError?: boolean;
+    /** Ref passed to the error message element */
+    errorMessageRef?: React.Ref<HTMLDivElement | null>;
+    /** Adds custom classes to the root element. */
+    className?: string;
+    /** Adds custom classes to the errorWrapper */
+    errorWrapperClassName?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Sets the data-testid attribute for the error wrapper */
+    errorWrapperTestId?: string;
+}
+interface VisualCheckboxCloudComponent extends React.FC<VisualCheckboxCloudProps> {
+    Checkbox: typeof Checkbox;
+}
+export declare const VisualCheckboxCloud: VisualCheckboxCloudComponent;
+export default VisualCheckboxCloud;

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

@@ -0,0 +1,3 @@
+import { default as VisualCheckboxCloud } from './VisualCheckboxCloud';
+export * from './VisualCheckboxCloud';
+export default VisualCheckboxCloud;

package/lib/components/VisualCheckboxCloud/index.js

@@ -0,0 +1,38 @@
+import { t as isComponent } from "../../component.js";
+import { t as useIdWithFallback } from "../../useIdWithFallback.js";
+import { t as ErrorWrapper_default } from "../../ErrorWrapper.js";
+import { t as Checkbox_default } from "../../Checkbox3.js";
+import classNames from "classnames";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import styles from "./styles.module.scss";
+const VisualCheckboxCloud = (props) => {
+	const { children, name, error, errorTextId: errorTextIdProp, renderError = true, errorMessageRef, className, errorWrapperClassName, testId, errorWrapperTestId } = props;
+	const errorTextId = useIdWithFallback(errorTextIdProp);
+	const mapChild = (child) => {
+		if (isComponent(child, Checkbox_default)) return React.cloneElement(child, {
+			name: child.props.name ?? name,
+			error: !!error || child.props.error,
+			errorTextId: child.props.errorTextId ?? errorTextId
+		});
+		return child;
+	};
+	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
+		className: classNames(errorWrapperClassName, className),
+		errorText: error,
+		errorTextId,
+		renderError,
+		errorMessageRef,
+		testId: errorWrapperTestId,
+		children: /* @__PURE__ */ jsx("div", {
+			className: styles["visual-checkbox-cloud"],
+			"data-testid": testId,
+			children: React.Children.map(children, mapChild)
+		})
+	});
+};
+VisualCheckboxCloud.Checkbox = Checkbox_default;
+var VisualCheckboxCloud_default = VisualCheckboxCloud;
+export { VisualCheckboxCloud, VisualCheckboxCloud_default as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["VisualCheckboxCloud: VisualCheckboxCloudComponent"],"sources":["../../../src/components/VisualCheckboxCloud/VisualCheckboxCloud.tsx","../../../src/components/VisualCheckboxCloud/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { CheckboxProps } from './Checkbox/Checkbox';\n\nimport Checkbox from './Checkbox/Checkbox';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualCheckboxCloudProps {\n  /** Items in the cloud. Should be VisualCheckboxCloud.Checkbox elements. */\n  children?: React.ReactNode;\n  /** Name shared by all child Checkbox elements (overridable per child) */\n  name?: string;\n  /** Error message shown above the cloud */\n  error?: string;\n  /** Error text id (auto-generated if omitted) */\n  errorTextId?: string;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Ref passed to the error message element */\n  errorMessageRef?: React.Ref<HTMLDivElement | null>;\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper */\n  errorWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error wrapper */\n  errorWrapperTestId?: string;\n}\n\ninterface VisualCheckboxCloudComponent extends React.FC<VisualCheckboxCloudProps> {\n  Checkbox: typeof Checkbox;\n}\n\nexport const VisualCheckboxCloud: VisualCheckboxCloudComponent = props => {\n  const {\n    children,\n    name,\n    error,\n    errorTextId: errorTextIdProp,\n    renderError = true,\n    errorMessageRef,\n    className,\n    errorWrapperClassName,\n    testId,\n    errorWrapperTestId,\n  } = props;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n\n  const mapChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: child.props.name ?? name,\n        error: !!error || child.props.error,\n        errorTextId: child.props.errorTextId ?? errorTextId,\n      });\n    }\n    return child;\n  };\n\n  return (\n    <ErrorWrapper\n      className={classNames(errorWrapperClassName, className)}\n      errorText={error}\n      errorTextId={errorTextId}\n      renderError={renderError}\n      errorMessageRef={errorMessageRef}\n      testId={errorWrapperTestId}\n    >\n      <div className={styles['visual-checkbox-cloud']} data-testid={testId}>\n        {React.Children.map(children, mapChild)}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nVisualCheckboxCloud.Checkbox = Checkbox;\n\nexport default VisualCheckboxCloud;\n","import VisualCheckboxCloud from './VisualCheckboxCloud';\nexport * from './VisualCheckboxCloud';\nexport default VisualCheckboxCloud;\n"],"mappings":";;;;;;;;AAwCA,MAAaA,uBAAoD,UAAS;CACxE,MAAM,EACJ,UACA,MACA,OACA,aAAa,iBACb,cAAc,MACd,iBACA,WACA,uBACA,QACA,uBACE;CAEJ,MAAM,cAAc,kBAAkB,gBAAgB;CAEtD,MAAM,YAAY,UAA4C;AAC5D,MAAI,YAA2B,OAAO,iBAAS,CAC7C,QAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,MAAM,MAAM,QAAQ;GAC1B,OAAO,CAAC,CAAC,SAAS,MAAM,MAAM;GAC9B,aAAa,MAAM,MAAM,eAAe;GACzC,CAAC;AAEJ,SAAO;;AAGT,QACE,oBAAC,sBAAA;EACC,WAAW,WAAW,uBAAuB,UAAU;EACvD,WAAW;EACE;EACA;EACI;EACjB,QAAQ;YAER,oBAAC,OAAA;GAAI,WAAW,OAAO;GAA0B,eAAa;aAC3D,MAAM,SAAS,IAAI,UAAU,SAAS;IACnC;GACO;;AAInB,oBAAoB,WAAW;ACjF/B,IAAA,8BDmFe"}

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

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/spacers.css';
+
+.visual-checkbox-cloud {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--core-space-4xs) var(--core-space-xs);
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    gap: var(--core-space-m) var(--core-space-s);
+  }
+}

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

@@ -0,0 +1,9 @@
+export type Styles = {
+  'visual-checkbox-cloud': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

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

@@ -0,0 +1,23 @@
+import { ErrorWrapperClassNameProps } from '../../ErrorWrapper';
+export interface RadioButtonProps extends ErrorWrapperClassNameProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'className' | 'children' | 'size' | 'value'> {
+    /** Adds custom classes to the root element. */
+    className?: string;
+    /** Label text shown inside the pill. */
+    children: React.ReactNode;
+    /** Value identifying this radio inside its group. Required. */
+    value: string;
+    /** input id of the underlying radio */
+    inputId?: string;
+    /** Activates error styling. Can be true while errorText is empty (e.g. when used in a cloud). */
+    error?: boolean;
+    /** Error text to show above the component. */
+    errorText?: string;
+    /** Error text id */
+    errorTextId?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Ref forwarded to the underlying input element. */
+    ref?: React.Ref<HTMLInputElement | null>;
+}
+declare const RadioButton: React.FC<RadioButtonProps>;
+export default RadioButton;

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

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

package/lib/components/VisualRadioButtonCloud/RadioButton/index.js

@@ -0,0 +1,5 @@
+import { t as RadioButton_default$1 } from "../../../RadioButton2.js";
+var RadioButton_default = RadioButton_default$1;
+export { RadioButton_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/components/VisualRadioButtonCloud/RadioButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/VisualRadioButtonCloud/RadioButton/index.ts"],"sourcesContent":["import RadioButton from './RadioButton';\nexport * from './RadioButton';\nexport default RadioButton;\n"],"mappings":";AAEA,IAAA,sBAAe"}

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

@@ -0,0 +1,133 @@
+@use 'sass:map';
+@use '../../../scss/screen-reader' as *;
+@use '../../../scss/breakpoints' as breakpoints;
+@use '../../../scss/font-mixins' as fonts;
+@import '../../../scss/supernova/styles/colors.css';
+@import '../../../scss/supernova/styles/spacers.css';
+
+.visual-radio-button {
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+  min-height: 2.75rem;
+  padding: 0.313rem 0;
+  cursor: pointer;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    padding: 0;
+  }
+
+  &__input {
+    // Hides input while making sure screen reader outline wraps the entire component
+    cursor: pointer;
+    position: absolute;
+    z-index: 0;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    appearance: none;
+  }
+
+  &__pill {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--core-space-2xs);
+    box-sizing: border-box;
+    min-height: var(--core-space-l);
+    padding: var(--core-space-3xs) var(--core-space-m);
+    border-radius: 100px;
+    background-color: var(--color-action-background-ondark);
+    border: 1px solid var(--color-action-border-onlight);
+    color: var(--color-base-text-onlight);
+
+    @include fonts.title6;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      min-height: var(--core-space-xl);
+      padding: var(--core-space-3xs) var(--core-space-l);
+    }
+  }
+
+  &:hover &__pill {
+    background-color: var(--color-action-background-ondark-hover);
+    border-color: var(--color-action-border-onlight-hover);
+  }
+
+  &:active &__pill {
+    background-color: var(--color-action-background-ondark-selected);
+    border-color: var(--color-action-border-onlight-hover);
+  }
+
+  &--checked &__pill {
+    background-color: var(--color-action-background-onlight);
+    color: var(--color-action-text-ondark);
+    border-color: var(--color-action-background-onlight);
+    padding: var(--core-space-3xs) var(--core-space-s);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      padding: var(--core-space-3xs) var(--core-space-m) var(--core-space-3xs) 1.25rem;
+    }
+  }
+
+  &--checked:hover &__pill {
+    background-color: var(--color-action-graphics-onlight-hover);
+    border-color: var(--color-action-graphics-onlight-hover);
+  }
+
+  &--checked:active &__pill {
+    background-color: var(--color-action-background-onlight-active);
+    border-color: var(--color-action-background-onlight-active);
+  }
+
+  &--invalid &__pill {
+    background-color: var(--color-action-background-ondark);
+    border-color: var(--color-destructive-border-normal);
+  }
+
+  &--invalid:hover &__pill {
+    background-color: var(--color-destructive-background-normal);
+    border-color: var(--color-destructive-border-normal);
+  }
+
+  &--invalid:active &__pill {
+    background-color: var(--color-destructive-background-emphasized);
+    border-color: var(--color-destructive-border-normal);
+  }
+
+  &--invalid#{&}--checked &__pill {
+    background-color: var(--color-destructive-graphics-normal);
+    border-color: var(--color-destructive-graphics-normal);
+  }
+
+  &--invalid#{&}--checked:hover &__pill {
+    background-color: var(--color-destructive-graphics-hover);
+    border-color: var(--color-destructive-graphics-hover);
+  }
+
+  &--invalid#{&}--checked:active &__pill {
+    background-color: var(--color-destructive-graphics-emphasized-onlight);
+    border-color: var(--color-destructive-graphics-emphasized-onlight);
+  }
+
+  &__input:focus-visible + &__pill {
+    outline: 3px solid var(--color-action-border-onlight-focus);
+    border-color: var(--color-action-border-ondark);
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      fill: var(--color-action-graphics-ondark);
+    }
+  }
+
+  &__label {
+    text-box: trim-both cap alphabetic;
+  }
+}

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

@@ -0,0 +1,15 @@
+export type Styles = {
+  'visual-radio-button': string;
+  'visual-radio-button__icon': string;
+  'visual-radio-button__input': string;
+  'visual-radio-button__label': string;
+  'visual-radio-button__pill': string;
+  'visual-radio-button--checked': string;
+  'visual-radio-button--invalid': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/VisualRadioButtonCloud/VisualRadioButtonCloud.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+import { default as RadioButton } from './RadioButton/RadioButton';
+export interface VisualRadioButtonCloudProps {
+    /** Items in the cloud. Should be VisualRadioButtonCloud.RadioButton elements. */
+    children?: React.ReactNode;
+    /** Name shared by all child RadioButton elements (overridable per child). Required for native form grouping. */
+    name?: string;
+    /** Selected value (controlled). */
+    value?: string;
+    /** Initial selected value (uncontrolled). */
+    defaultValue?: string;
+    /** Called when the selected value changes. */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;
+    /** Error message shown above the cloud */
+    error?: string;
+    /** Error text id (auto-generated if omitted) */
+    errorTextId?: string;
+    /** Renders the error component (Default: true) */
+    renderError?: boolean;
+    /** Ref passed to the error message element */
+    errorMessageRef?: React.Ref<HTMLDivElement | null>;
+    /** Adds custom classes to the root element. */
+    className?: string;
+    /** Adds custom classes to the errorWrapper */
+    errorWrapperClassName?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Sets the data-testid attribute for the error wrapper */
+    errorWrapperTestId?: string;
+    /** Accessible label for the radiogroup. Use this or `aria-labelledby` when no external `<legend>` labels the group. */
+    'aria-label'?: string;
+    /** Id of element labelling the radiogroup (e.g. an external Title/legend). */
+    'aria-labelledby'?: string;
+}
+interface VisualRadioButtonCloudComponent extends React.FC<VisualRadioButtonCloudProps> {
+    RadioButton: typeof RadioButton;
+}
+export declare const VisualRadioButtonCloud: VisualRadioButtonCloudComponent;
+export default VisualRadioButtonCloud;

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

@@ -0,0 +1,3 @@
+import { default as VisualRadioButtonCloud } from './VisualRadioButtonCloud';
+export * from './VisualRadioButtonCloud';
+export default VisualRadioButtonCloud;

package/lib/components/VisualRadioButtonCloud/index.js

@@ -0,0 +1,58 @@
+import { t as isComponent } from "../../component.js";
+import { t as useIdWithFallback } from "../../useIdWithFallback.js";
+import { t as ErrorWrapper_default } from "../../ErrorWrapper.js";
+import { t as RadioButton_default } from "../../RadioButton2.js";
+import classNames from "classnames";
+import React, { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import styles from "./styles.module.scss";
+const VisualRadioButtonCloud = (props) => {
+	const { children, name, value, defaultValue, onChange, error, errorTextId: errorTextIdProp, renderError = true, errorMessageRef, className, errorWrapperClassName, testId, errorWrapperTestId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = props;
+	const errorTextId = useIdWithFallback(errorTextIdProp);
+	const [selectedValue, setSelectedValue] = useState(value ?? defaultValue);
+	const [prevValue, setPrevValue] = useState(value);
+	if (prevValue !== value) {
+		setPrevValue(value);
+		if (value !== void 0 && value !== selectedValue) setSelectedValue(value);
+	}
+	const mapChild = (child) => {
+		if (isComponent(child, RadioButton_default)) {
+			const isSelected = selectedValue !== void 0 && child.props.value === selectedValue;
+			return React.cloneElement(child, {
+				name: child.props.name ?? name,
+				checked: isSelected,
+				error: !!error || child.props.error,
+				errorTextId: child.props.errorTextId ?? errorTextId,
+				onChange: (e) => {
+					setSelectedValue(child.props.value);
+					child.props.onChange?.(e);
+					onChange?.(e, child.props.value);
+				}
+			});
+		}
+		return child;
+	};
+	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
+		className: classNames(errorWrapperClassName, className),
+		errorText: error,
+		errorTextId,
+		renderError,
+		errorMessageRef,
+		testId: errorWrapperTestId,
+		children: /* @__PURE__ */ jsx("div", {
+			role: "radiogroup",
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			"aria-invalid": error ? true : void 0,
+			"aria-describedby": error ? errorTextId : void 0,
+			className: styles["visual-radio-button-cloud"],
+			"data-testid": testId,
+			children: React.Children.map(children, mapChild)
+		})
+	});
+};
+VisualRadioButtonCloud.RadioButton = RadioButton_default;
+var VisualRadioButtonCloud_default = VisualRadioButtonCloud;
+export { VisualRadioButtonCloud, VisualRadioButtonCloud_default as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["VisualRadioButtonCloud: VisualRadioButtonCloudComponent"],"sources":["../../../src/components/VisualRadioButtonCloud/VisualRadioButtonCloud.tsx","../../../src/components/VisualRadioButtonCloud/index.ts"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { RadioButtonProps } from './RadioButton/RadioButton';\n\nimport RadioButton from './RadioButton/RadioButton';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualRadioButtonCloudProps {\n  /** Items in the cloud. Should be VisualRadioButtonCloud.RadioButton elements. */\n  children?: React.ReactNode;\n  /** Name shared by all child RadioButton elements (overridable per child). Required for native form grouping. */\n  name?: string;\n  /** Selected value (controlled). */\n  value?: string;\n  /** Initial selected value (uncontrolled). */\n  defaultValue?: string;\n  /** Called when the selected value changes. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n  /** Error message shown above the cloud */\n  error?: string;\n  /** Error text id (auto-generated if omitted) */\n  errorTextId?: string;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Ref passed to the error message element */\n  errorMessageRef?: React.Ref<HTMLDivElement | null>;\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper */\n  errorWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error wrapper */\n  errorWrapperTestId?: string;\n  /** Accessible label for the radiogroup. Use this or `aria-labelledby` when no external `<legend>` labels the group. */\n  'aria-label'?: string;\n  /** Id of element labelling the radiogroup (e.g. an external Title/legend). */\n  'aria-labelledby'?: string;\n}\n\ninterface VisualRadioButtonCloudComponent extends React.FC<VisualRadioButtonCloudProps> {\n  RadioButton: typeof RadioButton;\n}\n\nexport const VisualRadioButtonCloud: VisualRadioButtonCloudComponent = props => {\n  const {\n    children,\n    name,\n    value,\n    defaultValue,\n    onChange,\n    error,\n    errorTextId: errorTextIdProp,\n    renderError = true,\n    errorMessageRef,\n    className,\n    errorWrapperClassName,\n    testId,\n    errorWrapperTestId,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n  } = props;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const [selectedValue, setSelectedValue] = useState<string | undefined>(value ?? defaultValue);\n  const [prevValue, setPrevValue] = useState<string | undefined>(value);\n  if (prevValue !== value) {\n    setPrevValue(value);\n    if (value !== undefined && value !== selectedValue) {\n      setSelectedValue(value);\n    }\n  }\n\n  const mapChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      const isSelected = selectedValue !== undefined && child.props.value === selectedValue;\n      return React.cloneElement(child, {\n        name: child.props.name ?? name,\n        checked: isSelected,\n        error: !!error || child.props.error,\n        errorTextId: child.props.errorTextId ?? errorTextId,\n        onChange: (e: React.ChangeEvent<HTMLInputElement>) => {\n          setSelectedValue(child.props.value);\n          child.props.onChange?.(e);\n          onChange?.(e, child.props.value);\n        },\n      });\n    }\n    return child;\n  };\n\n  return (\n    <ErrorWrapper\n      className={classNames(errorWrapperClassName, className)}\n      errorText={error}\n      errorTextId={errorTextId}\n      renderError={renderError}\n      errorMessageRef={errorMessageRef}\n      testId={errorWrapperTestId}\n    >\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-invalid={error ? true : undefined}\n        aria-describedby={error ? errorTextId : undefined}\n        className={styles['visual-radio-button-cloud']}\n        data-testid={testId}\n      >\n        {React.Children.map(children, mapChild)}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nVisualRadioButtonCloud.RadioButton = RadioButton;\n\nexport default VisualRadioButtonCloud;\n","import VisualRadioButtonCloud from './VisualRadioButtonCloud';\nexport * from './VisualRadioButtonCloud';\nexport default VisualRadioButtonCloud;\n"],"mappings":";;;;;;;;AAkDA,MAAaA,0BAA0D,UAAS;CAC9E,MAAM,EACJ,UACA,MACA,OACA,cACA,UACA,OACA,aAAa,iBACb,cAAc,MACd,iBACA,WACA,uBACA,QACA,oBACA,cAAc,WACd,mBAAmB,mBACjB;CAEJ,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,CAAC,eAAe,oBAAoB,SAA6B,SAAS,aAAa;CAC7F,MAAM,CAAC,WAAW,gBAAgB,SAA6B,MAAM;AACrE,KAAI,cAAc,OAAO;AACvB,eAAa,MAAM;AACnB,MAAI,UAAU,KAAA,KAAa,UAAU,cACnC,kBAAiB,MAAM;;CAI3B,MAAM,YAAY,UAA4C;AAC5D,MAAI,YAA8B,OAAO,oBAAY,EAAE;GACrD,MAAM,aAAa,kBAAkB,KAAA,KAAa,MAAM,MAAM,UAAU;AACxE,UAAO,MAAM,aAAa,OAAO;IAC/B,MAAM,MAAM,MAAM,QAAQ;IAC1B,SAAS;IACT,OAAO,CAAC,CAAC,SAAS,MAAM,MAAM;IAC9B,aAAa,MAAM,MAAM,eAAe;IACxC,WAAW,MAA2C;AACpD,sBAAiB,MAAM,MAAM,MAAM;AACnC,WAAM,MAAM,WAAW,EAAE;AACzB,gBAAW,GAAG,MAAM,MAAM,MAAM;;IAEnC,CAAC;;AAEJ,SAAO;;AAGT,QACE,oBAAC,sBAAA;EACC,WAAW,WAAW,uBAAuB,UAAU;EACvD,WAAW;EACE;EACA;EACI;EACjB,QAAQ;YAER,oBAAC,OAAA;GACC,MAAK;GACL,cAAY;GACZ,mBAAiB;GACjB,gBAAc,QAAQ,OAAO,KAAA;GAC7B,oBAAkB,QAAQ,cAAc,KAAA;GACxC,WAAW,OAAO;GAClB,eAAa;aAEZ,MAAM,SAAS,IAAI,UAAU,SAAS;IACnC;GACO;;AAInB,uBAAuB,cAAc;ACvHrC,IAAA,iCDyHe"}

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

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/spacers.css';
+
+.visual-radio-button-cloud {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--core-space-4xs) var(--core-space-xs);
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    gap: var(--core-space-m) var(--core-space-s);
+  }
+}

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

@@ -0,0 +1,9 @@
+export type Styles = {
+  'visual-radio-button-cloud': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
   "private": false,
-  "version": "14.9.1",
+  "version": "14.10.0",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "git",