@helsenorge/designsystem-react 14.9.2 → 14.11.0

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

@@ -1,42 +1,13 @@
 @use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/breakpoints' as breakpoints;
+@use '../../scss/screen-reader' as *;
 
 $padding-clickable-area-top-bottom: 8px;
 $padding-clickable-area-left: 8px;
 
-@mixin dashed-border() {
-  box-shadow: none;
-  position: relative;
-
-  &::after {
-    position: absolute;
-    content: '';
-
-    $encoded-color: string.slice(meta.inspect(palette.$neutral600), 2);
-
-    // Variabler for å lettere styre dashen i background-imaget under
-    $stroke: 4;
-    $dash: 0.2;
-    $gap: 7;
-    $scale: 1;
-    $stroke-scaled: $stroke * $scale;
-    $dash-scaled: $dash * $scale;
-    $gap-scaled: $gap * $scale;
-
-    border-radius: 100px;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23#{$encoded-color}' stroke-width='#{$stroke-scaled}' stroke-dasharray='#{$dash-scaled},#{$gap-scaled}' stroke-linecap='square'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    width: 28px;
-    height: 28px;
-    inset: -2px;
-  }
-}
-
 .radio-button-errors {
   font-size: font-settings.$font-size-sm;
   font-weight: 600;
@@ -50,20 +21,20 @@ $padding-clickable-area-left: 8px;
   &__large {
     margin: spacers.getSpacer(2xs) 0;
 
-    &--focused {
+    &:has(input:focus-visible) {
       box-shadow: 0 0 0 spacers.getSpacer(3xs);
       color: palette.$neutral500;
     }
 
-    &--focused#{&}--on-blueberry {
+    &--on-blueberry:has(input:focus-visible) {
       color: palette.$blueberry500;
     }
 
-    &--focused#{&}--selected {
+    &--selected:has(input:focus-visible) {
       color: palette.$blueberry900;
     }
 
-    &--focused#{&}--invalid {
+    &--invalid:has(input:focus-visible) {
       color: palette.$cherry400;
     }
   }
@@ -86,7 +57,7 @@ $padding-clickable-area-left: 8px;
   }
 
   &--disabled {
-    cursor: default;
+    cursor: not-allowed;
     color: palette.$neutral700;
   }
 
@@ -99,7 +70,7 @@ $padding-clickable-area-left: 8px;
       background-color: palette.$neutral100;
     }
 
-    &--focused {
+    &:has(input:focus-visible) {
       border: 1px solid var(--color-action-border-ondark-focus);
     }
 
@@ -203,244 +174,11 @@ $padding-clickable-area-left: 8px;
 }
 
 .radio-button {
-  appearance: none;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10rem;
-  margin: 0 spacers.getSpacer(s) 0 0;
-  height: 1.5rem;
-  width: 1.5rem;
-  min-height: 1.5rem;
-  min-width: 1.5rem;
-  color: palette.$neutral700;
-  box-shadow: 0 0 0 spacers.getSpacer(4xs);
-  outline: none;
-
-  &:focus {
-    box-shadow: 0 0 0 spacers.getSpacer(3xs);
-    color: palette.$black;
-  }
-
-  &:hover {
-    box-shadow: 0 0 0 spacers.getSpacer(3xs);
-    background-color: palette.$neutral100;
-  }
-
-  :active > & {
-    box-shadow: 0 0 0 spacers.getSpacer(3xs);
-    color: palette.$black;
-  }
-
-  &:checked {
-    color: palette.$blueberry500;
-
-    &:hover {
-      box-shadow: 0 0 0 spacers.getSpacer(4xs);
-      background-color: palette.$blueberry50;
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-      color: palette.$black;
-    }
-  }
-
-  &--on-blueberry {
-    color: palette.$blueberry500;
-
-    :hover > & {
-      background-color: palette.$blueberry100;
-    }
-  }
-
-  &--on-dark {
-    color: palette.$neutral200;
-
-    &:hover {
-      background-color: palette.$inverted-hover-old;
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-    }
-
-    &:focus {
-      color: palette.$white;
-    }
-
-    :active > & {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-      color: palette.$white;
-    }
-
-    &:checked {
-      color: palette.$blueberry200;
-
-      &:hover {
-        background-color: palette.$inverted-hover-old;
-      }
-
-      &:focus {
-        color: palette.$white;
-      }
-    }
-  }
-
-  &--invalid {
-    color: palette.$cherry600;
-
-    &:hover {
-      background-color: palette.$cherry100;
-    }
-
-    &:active {
-      color: palette.$black;
-    }
-
-    &:focus {
-      color: palette.$black;
-    }
-
-    &:checked {
-      color: palette.$cherry600;
-
-      &:hover {
-        background-color: palette.$cherry100;
-      }
-    }
-  }
-
-  &--disabled {
-    cursor: default;
-
-    @include dashed-border;
-
-    background-color: transparent;
-
-    &:hover {
-      box-shadow: none;
-      background-color: transparent;
-    }
-
-    :hover > & {
-      background-color: transparent;
-    }
-
-    &:active {
-      color: palette.$neutral600;
-    }
-
-    &:checked {
-      color: palette.$neutral600;
-
-      &:hover {
-        box-shadow: none;
-        background-color: transparent;
-      }
-    }
-  }
-
-  // :before er dot i RadioButton
-  &:checked::before {
-    content: '';
-    display: flex;
-    background-color: palette.$blueberry500;
-    width: 0.875rem;
-    height: 0.875rem;
-    border-radius: 10rem;
-
-    // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
-    @media (forced-colors: active) {
-      forced-color-adjust: none;
-      background-color: #fff !important;
-    }
-  }
-
-  &--on-dark:checked::before {
-    background-color: palette.$blueberry200;
-  }
-
-  &--invalid:checked::before {
-    background-color: palette.$cherry600;
-  }
-
-  &--disabled:checked::before {
-    background-color: palette.$neutral600;
-  }
-
-  &__large {
-    &:checked {
-      outline: none;
-      color: palette.$blueberry100;
-    }
-
-    &:hover {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-      color: palette.$black;
-    }
-
-    &:focus:checked {
-      color: palette.$white;
-    }
-
-    &:checked::before {
-      background-color: palette.$blueberry100;
-    }
-
-    &:checked:hover {
-      box-shadow: 0 0 0 spacers.getSpacer(4xs);
-      background-color: unset;
-    }
-
-    &:checked:hover:focus {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-      color: palette.$white;
-    }
-
-    &--invalid {
-      &:checked {
-        color: palette.$cherry500;
-      }
-
-      &:checked::before {
-        background-color: palette.$cherry500;
-      }
-
-      &:checked:hover {
-        background-color: transparent;
-      }
-
-      &:checked:focus {
-        color: palette.$black;
-      }
-
-      &:checked:focus:hover {
-        color: palette.$black;
-      }
-    }
-
-    &--disabled {
-      &:hover,
-      &:focus,
-      &:checked:hover {
-        box-shadow: none;
-      }
-
-      &:checked::before {
-        background-color: palette.$neutral600;
-      }
-    }
-  }
+  @include sr-only;
+}
 
-  // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
-  @media (forced-colors: active) {
-    forced-color-adjust: none;
-    color: #fff !important;
-    background-color: transparent !important;
-  }
+.radio-button__marker-wrapper {
+  margin-right: spacers.getSpacer(s);
 }
 
 .radiobutton-sublabel-wrapper {

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

@@ -1,17 +1,10 @@
 export type Styles = {
   'radio-button': string;
-  'radio-button__large': string;
-  'radio-button__large--disabled': string;
-  'radio-button__large--invalid': string;
-  'radio-button--disabled': string;
-  'radio-button--invalid': string;
-  'radio-button--on-blueberry': string;
-  'radio-button--on-dark': string;
+  'radio-button__marker-wrapper': string;
   'radio-button-errors': string;
   'radio-button-label': string;
   'radio-button-label__large': string;
   'radio-button-label__large--disabled': string;
-  'radio-button-label__large--focused': string;
   'radio-button-label__large--on-blueberry': string;
   'radio-button-label__large--on-grey': string;
   'radio-button-label__large--selected': string;
@@ -21,7 +14,6 @@ export type Styles = {
   'radio-button-label--on-dark': string;
   'radio-button-wrapper': string;
   'radio-button-wrapper__large': string;
-  'radio-button-wrapper__large--focused': string;
   'radio-button-wrapper__large--invalid': string;
   'radio-button-wrapper__large--on-blueberry': string;
   'radio-button-wrapper__large--selected': string;

package/lib/components/Table/index.js

@@ -5,7 +5,7 @@ import { t as useIsVisible } from "../../useIsVisible.js";
 import { t as useLayoutEvent } from "../../useLayoutEvent.js";
 import { t as HorizontalScroll_default } from "../../HorizontalScroll.js";
 import { a as TextAlign, i as SortDirection, n as ModeType, o as defaultConfig, r as ResponsiveTableVariant, s as simpleConfig, t as HeaderCategory } from "../../constants3.js";
-import { a as omitProps, i as mapChildrenWithMode, n as getCenteredOverflowTableStyle, r as getCurrentConfig, t as getBreakpointClass } from "../../utils6.js";
+import { a as omitProps, i as mapChildrenWithMode, n as getCenteredOverflowTableStyle, r as getCurrentConfig, t as getBreakpointClass } from "../../utils5.js";
 import { n as TableBody } from "../../TableBody.js";
 import { n as TableCell } from "../../TableCell.js";
 import { n as TableExpandedRow } from "../../TableExpandedRow.js";

package/lib/components/Validation/index.js

@@ -9,7 +9,7 @@ import { t as Textarea_default } from "../../Textarea.js";
 import { n as FormGroup_default } from "../../FormGroup.js";
 import { t as Input_default } from "../../Input2.js";
 import { t as List_default } from "../../List.js";
-import { t as RadioButton_default } from "../../RadioButton.js";
+import { t as RadioButton_default } from "../../RadioButton2.js";
 import classNames from "classnames";
 import React, { useId } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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,10 @@
+@use '../../../scss/visual-form' as visual-form;
+@import '../../../scss/supernova/styles/colors.css';
+@import '../../../scss/supernova/styles/spacers.css';
+
+.visual-checkbox {
+  @include visual-form.visual-form-pill(
+    $pill-padding-mobile: var(--core-space-3xs) 1.75rem,
+    $checked-pill-padding-md: var(--core-space-3xs) 1.25rem
+  );
+}

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,6 @@
+@use '../../scss/visual-form' as visual-form;
+@import '../../scss/supernova/styles/spacers.css';
+
+.visual-checkbox-cloud {
+  @include visual-form.visual-form-cloud;
+}

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/VisualCheckboxGroup/VisualCheckbox/VisualCheckbox.d.ts

@@ -0,0 +1,26 @@
+import { ErrorWrapperClassNameProps } from '../../ErrorWrapper';
+export type VisualCheckboxVariant = 'line' | 'rectangle';
+export interface VisualCheckboxProps extends ErrorWrapperClassNameProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'className' | 'children' | 'size'> {
+    /** Adds custom classes to the root element. */
+    className?: string;
+    /** Label rendered inside the checkbox frame. */
+    children: string;
+    /** Content rendered inside the circular visual slot. */
+    visualContent: React.ReactNode;
+    /** Layout variant. `line` is a thin horizontal pill, `rectangle` is a vertical card. */
+    variant?: VisualCheckboxVariant;
+    /** 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 VisualCheckbox: React.FC<VisualCheckboxProps>;
+export default VisualCheckbox;

package/lib/components/VisualCheckboxGroup/VisualCheckbox/VisualContent.d.ts

@@ -0,0 +1,10 @@
+export interface VisualContentProps {
+    /** Content rendered inside the circular area – typically an <img> or illustration component. */
+    children: React.ReactNode;
+    /** Adds custom classes to the root element. */
+    className?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const VisualContent: React.FC<VisualContentProps>;
+export default VisualContent;

package/lib/components/VisualCheckboxGroup/VisualCheckbox/index.d.ts

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

package/lib/components/VisualCheckboxGroup/VisualCheckbox/index.js

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

package/lib/components/VisualCheckboxGroup/VisualCheckbox/index.js.map

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

package/lib/components/VisualCheckboxGroup/VisualCheckbox/styles.module.scss

@@ -0,0 +1,7 @@
+@use '../../../scss/visual-form' as visual-form;
+@import '../../../scss/supernova/styles/colors.css';
+@import '../../../scss/supernova/styles/spacers.css';
+
+.visual-checkbox {
+  @include visual-form.visual-form-card;
+}

package/lib/components/VisualCheckboxGroup/VisualCheckbox/styles.module.scss.d.ts

@@ -0,0 +1,18 @@
+export type Styles = {
+  'visual-checkbox': string;
+  'visual-checkbox__frame': string;
+  'visual-checkbox__icon': string;
+  'visual-checkbox__input': string;
+  'visual-checkbox__label': string;
+  'visual-checkbox__visual-content': string;
+  'visual-checkbox--checked': string;
+  'visual-checkbox--invalid': string;
+  'visual-checkbox--variant-line': string;
+  'visual-checkbox--variant-rectangle': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/VisualCheckboxGroup/VisualCheckboxGroup.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+import { VisualCheckboxVariant, default as VisualCheckbox } from './VisualCheckbox/VisualCheckbox';
+export interface VisualCheckboxGroupProps {
+    /** Items in the group. Should be VisualCheckboxGroup.VisualCheckbox elements. */
+    children?: React.ReactNode;
+    /** Name shared by all child VisualCheckbox elements (overridable per child) */
+    name?: string;
+    /** Variant applied to all child VisualCheckbox elements (overridable per child). */
+    variant?: VisualCheckboxVariant;
+    /** When set and the number of VisualCheckbox children exceeds this limit on the mobile breakpoint, the variant is forced to `line`. */
+    mobileLineVariantLimit?: number;
+    /** Error message shown above the group */
+    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 VisualCheckboxGroupComponent extends React.FC<VisualCheckboxGroupProps> {
+    VisualCheckbox: typeof VisualCheckbox;
+}
+export declare const VisualCheckboxGroup: VisualCheckboxGroupComponent;
+export default VisualCheckboxGroup;

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

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