@igne-agency/react-web-ui 0.4.0 → 0.6.0

package/dist/components/checkbox-field/checkbox.css

@@ -1,119 +1,168 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_oql8l_3 {
+  ._root_1hxbi_3 {
     display: inline-flex;
     flex-direction: column;
     align-items: flex-start;
     gap: var(--checkbox-gap, var(--sys-unit-8));
   }
-  ._label_oql8l_9 {
+  ._label_1hxbi_9 {
     cursor: pointer;
   }
-  ._label_oql8l_9:hover ._control_oql8l_12 {
-    border-color: var(--sys-color-primary);
+  ._label_1hxbi_9:hover ._control_1hxbi_12 {
+    border-color: var(--checkbox-hover-border, var(--sys-color-primary));
   }
-  :where([data-readonly], [data-disabled]) ._label_oql8l_9 {
+  :where([data-readonly], [data-disabled]) ._label_1hxbi_9 {
     cursor: default;
   }
-  :where([data-readonly], [data-disabled]) ._label_oql8l_9:hover ._control_oql8l_12:not([data-checked]) {
-    border-color: var(--box-border, var(--sys-color-border));
+  :where([data-readonly], [data-disabled]) ._label_1hxbi_9:hover ._control_1hxbi_12:not([data-checked]) {
+    border-color: var(--_checkbox-border, var(--checkbox-border, var(--sys-color-border)));
   }
-  ._label_oql8l_9 {
+  ._label_1hxbi_9 {
     display: inline-grid;
     grid-template-columns: auto 1fr;
     grid-template-areas: "control text";
     align-items: center;
-    gap: var(--sys-unit-1) var(--sys-unit-6);
+    gap: var(--checkbox-label-row-gap, var(--sys-unit-1)) var(--checkbox-label-gap, var(--sys-unit-6));
+    font: var(--checkbox-label-font, inherit);
   }
-  ._label_oql8l_9:has(> [data-optional-suffix]) {
+  ._label_1hxbi_9:has(> [data-optional-suffix]) {
     grid-template-areas: "control text" "control optional";
   }
-  ._control_oql8l_12 {
-    --box-border: var(--sys-color-border);
-    --box-bg: var(--sys-color-surface);
-    --box-fg: var(--sys-color-on-primary);
-    --box-checked-bg: var(--sys-color-primary);
+  ._control_1hxbi_12 {
+    --_checkbox-border: var(
+    	--checkbox-border,
+    	var(--sys-color-border)
+    );
+    --_checkbox-bg: var(
+    	--checkbox-bg,
+    	var(--sys-color-surface)
+    );
+    --_checkbox-fg: var(
+    	--checkbox-fg,
+    	var(--sys-color-on-primary)
+    );
+    --_checkbox-checked-bg: var(
+    	--checkbox-checked-bg,
+    	var(--sys-color-primary)
+    );
     display: grid;
     flex: 0 0 auto;
     place-items: center;
     box-sizing: border-box;
     inline-size: var(--checkbox-size, var(--sys-unit-16));
     block-size: var(--checkbox-size, var(--sys-unit-16));
-    border: 1px solid var(--box-border);
-    border-radius: var(--sys-radius-sm);
-    background: var(--box-bg);
-    color: var(--box-fg);
+    border: var(--checkbox-border-width, 1px) solid var(--_checkbox-border);
+    border-radius: var(--checkbox-radius, var(--sys-radius-sm));
+    background: var(--_checkbox-bg);
+    color: var(--_checkbox-fg);
   }
   @media not (prefers-reduced-motion) {
-    ._control_oql8l_12 {
+    ._control_1hxbi_12 {
       transition: background var(--sys-motion-instant) var(--sys-motion-standard), border-color var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._control_oql8l_12:focus-visible {
-    border-color: var(--sys-color-primary);
+  ._control_1hxbi_12:focus-visible {
+    border-color: var(--checkbox-focus-border, var(--sys-color-primary));
   }
-  ._control_oql8l_12 {
+  ._control_1hxbi_12 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._control_oql8l_12[data-focus-visible] {
+  ._control_1hxbi_12[data-focus-visible] {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._control_oql8l_12 {
+  ._control_1hxbi_12 {
     position: relative;
     grid-area: control;
     align-self: center;
     justify-self: center;
   }
-  ._control_oql8l_12[data-invalid], ._control_oql8l_12[aria-invalid=true] {
-    --box-border: var(--sys-color-error-fg);
-    --box-bg: var(--sys-color-error-bg);
-    --box-checked-bg: var(--sys-color-error-fg);
-    --box-fg: var(--sys-color-error-bg);
-  }
-  ._control_oql8l_12[data-readonly] {
-    --box-border: var(--sys-color-outline);
-    --box-bg: var(--sys-color-surface-high);
-    --box-checked-bg: var(--sys-color-primary-container);
-    --box-fg: var(--sys-color-on-primary-container);
-    border-style: dashed;
-  }
-  ._control_oql8l_12[data-checked], ._control_oql8l_12[data-indeterminate] {
-    --box-border: var(--box-checked-bg);
-    --box-bg: var(--box-checked-bg);
-  }
-  ._control_oql8l_12[data-disabled], ._control_oql8l_12:has(~ :disabled) {
-    --box-bg: var(--sys-color-disabled-bg);
-    --box-checked-bg: var(--sys-color-disabled-bg);
-    --box-fg: var(--sys-color-disabled-fg);
+  ._control_1hxbi_12[data-invalid], ._control_1hxbi_12[aria-invalid=true] {
+    --_checkbox-border: var(
+    	--checkbox-invalid-border,
+    	var(--sys-color-error-fg)
+    );
+    --_checkbox-bg: var(
+    	--checkbox-invalid-bg,
+    	var(--sys-color-error-bg)
+    );
+    --_checkbox-checked-bg: var(
+    	--checkbox-invalid-checked-bg,
+    	var(--sys-color-error-fg)
+    );
+    --_checkbox-fg: var(
+    	--checkbox-invalid-fg,
+    	var(--sys-color-error-bg)
+    );
+  }
+  ._control_1hxbi_12[data-readonly] {
+    --_checkbox-border: var(
+    	--checkbox-readonly-border,
+    	var(--sys-color-outline)
+    );
+    --_checkbox-bg: var(
+    	--checkbox-readonly-bg,
+    	var(--sys-color-surface-high)
+    );
+    --_checkbox-checked-bg: var(
+    	--checkbox-readonly-checked-bg,
+    	var(--sys-color-primary-container)
+    );
+    --_checkbox-fg: var(
+    	--checkbox-readonly-fg,
+    	var(--sys-color-on-primary-container)
+    );
+    border-style: var(--checkbox-readonly-border-style, dashed);
+  }
+  ._control_1hxbi_12[data-checked], ._control_1hxbi_12[data-indeterminate] {
+    --_checkbox-border: var(
+    	--checkbox-checked-border,
+    	var(--_checkbox-checked-bg)
+    );
+    --_checkbox-bg: var(--_checkbox-checked-bg);
+  }
+  ._control_1hxbi_12[data-disabled], ._control_1hxbi_12:has(~ :disabled) {
+    --_checkbox-bg: var(
+    	--checkbox-disabled-bg,
+    	var(--sys-color-disabled-bg)
+    );
+    --_checkbox-checked-bg: var(
+    	--checkbox-disabled-checked-bg,
+    	var(--sys-color-disabled-bg)
+    );
+    --_checkbox-fg: var(
+    	--checkbox-disabled-fg,
+    	var(--sys-color-disabled-fg)
+    );
     cursor: not-allowed;
   }
-  ._indicator_oql8l_91 {
+  ._indicator_1hxbi_140 {
     display: grid;
     place-items: center;
   }
-  ._indicator_oql8l_91 svg {
-    inline-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7);
-    block-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7);
+  ._indicator_1hxbi_140 svg {
+    inline-size: var(--checkbox-indicator-size, calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7));
+    block-size: var(--checkbox-indicator-size, calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7));
   }
-  ._indicator_oql8l_91 {
+  ._indicator_1hxbi_140 {
     opacity: 0;
     scale: 0;
   }
   @media not (prefers-reduced-motion) {
-    ._indicator_oql8l_91 {
+    ._indicator_1hxbi_140 {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._indicator_oql8l_91 {
-    font-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7);
+  ._indicator_1hxbi_140 {
+    font-size: var(--checkbox-indicator-size, calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7));
   }
-  ._indicator_oql8l_91[data-checked], ._indicator_oql8l_91[data-indeterminate] {
+  ._indicator_1hxbi_140[data-checked], ._indicator_1hxbi_140[data-indeterminate] {
     opacity: 1;
     scale: 1;
   }
   @media not (prefers-reduced-motion) {
-    ._indicator_oql8l_91[data-checked], ._indicator_oql8l_91[data-indeterminate] {
+    ._indicator_1hxbi_140[data-checked], ._indicator_1hxbi_140[data-indeterminate] {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-overshoot);
     }
   }

package/dist/components/checkbox-field/checkbox.d.ts

@@ -44,12 +44,13 @@ export type CheckboxParts = Readonly<{
  * `CheckboxField`.
  *
  * @example
- * <Checkbox.Root filled={agreed}>
+ * <Checkbox.Root filled={agreed} requiredness="required">
  * 	<Checkbox.Label>
  * 		<Checkbox.Control checked={agreed} onCheckedChange={setAgreed}>
  * 			<Checkbox.Indicator><CheckIcon /></Checkbox.Indicator>
  * 		</Checkbox.Control>
- * 		I agree to the terms
+ * 		<Field.InlineLabelText>I agree to the terms <Field.RequiredMark /></Field.InlineLabelText>
+ * 		<Field.InlineOptional optionalLabel="optional" />
  * 	</Checkbox.Label>
  * </Checkbox.Root>
  */

package/dist/components/checkbox-field/checkbox.js

@@ -12,7 +12,7 @@ import { Field } from "@base-ui/react/field";
 // src/components/checkbox-field/checkbox.tsx
 /** The field around one checkbox, which projects its state as `data-*` attributes. */
 var CheckboxRoot = (t0) => {
-	const $ = c(32);
+	const $ = c(33);
 	let className;
 	let dirty;
 	let disabled;
@@ -86,11 +86,12 @@ var CheckboxRoot = (t0) => {
 		$[23] = t5;
 	} else t5 = $[23];
 	let t6;
-	if ($[24] !== dirty || $[25] !== field.disabled || $[26] !== field.invalid || $[27] !== props || $[28] !== t2 || $[29] !== t5 || $[30] !== touched) {
+	if ($[24] !== dirty || $[25] !== field.disabled || $[26] !== field.invalid || $[27] !== props || $[28] !== requiredness || $[29] !== t2 || $[30] !== t5 || $[31] !== touched) {
 		t6 = /* @__PURE__ */ jsx(Field$1.Root, {
 			className: t2,
 			disabled: t3,
 			invalid: t4,
+			requiredness,
 			dirty,
 			touched,
 			...t5,
@@ -100,11 +101,12 @@ var CheckboxRoot = (t0) => {
 		$[25] = field.disabled;
 		$[26] = field.invalid;
 		$[27] = props;
-		$[28] = t2;
-		$[29] = t5;
-		$[30] = touched;
-		$[31] = t6;
-	} else t6 = $[31];
+		$[28] = requiredness;
+		$[29] = t2;
+		$[30] = t5;
+		$[31] = touched;
+		$[32] = t6;
+	} else t6 = $[32];
 	return t6;
 };
 /** The label beside the box, which wraps the control and its text so the two share one hit area. */
@@ -235,12 +237,13 @@ var CheckboxIndicator = (t0) => {
 * `CheckboxField`.
 *
 * @example
-* <Checkbox.Root filled={agreed}>
+* <Checkbox.Root filled={agreed} requiredness="required">
 * 	<Checkbox.Label>
 * 		<Checkbox.Control checked={agreed} onCheckedChange={setAgreed}>
 * 			<Checkbox.Indicator><CheckIcon /></Checkbox.Indicator>
 * 		</Checkbox.Control>
-* 		I agree to the terms
+* 		<Field.InlineLabelText>I agree to the terms <Field.RequiredMark /></Field.InlineLabelText>
+* 		<Field.InlineOptional optionalLabel="optional" />
 * 	</Checkbox.Label>
 * </Checkbox.Root>
 */

package/dist/components/checkbox-field/checkbox.module.js

@@ -1,8 +1,8 @@
 import './checkbox.css';// src/components/checkbox-field/checkbox.module.scss
-var root = "_root_oql8l_3";
-var label = "_label_oql8l_9";
-var control = "_control_oql8l_12";
-var indicator = "_indicator_oql8l_91";
+var root = "_root_1hxbi_3";
+var label = "_label_1hxbi_9";
+var control = "_control_1hxbi_12";
+var indicator = "_indicator_1hxbi_140";
 var checkbox_module_default = {
 	root,
 	label,

package/dist/components/checkbox-group-field/checkbox-group-field.js

@@ -1,3 +1,4 @@
+import { Field } from "../field/field.js";
 import { detachHiddenInput } from "../field/hidden-input.js";
 import { CheckboxGroup } from "./checkbox-group.js";
 import { c } from "react/compiler-runtime";
@@ -19,28 +20,33 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * />
 */
 var CheckboxGroupField = (t0) => {
-	const $ = c(40);
+	const $ = c(41);
 	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, items, checkIcon, readOnly, name, onBlur, className, value, defaultValue, onValueChange, disabled } = t0;
 	const { controlId } = CheckboxGroup.useIds();
 	const prefix = name ?? controlId;
 	const t1 = value !== void 0 && value.length > 0;
 	let t2;
-	if ($[0] !== label || $[1] !== optionalLabel || $[2] !== requiredness) {
-		t2 = /* @__PURE__ */ jsx(CheckboxGroup.Legend, {
-			requiredness,
-			optionalLabel,
-			children: label
-		});
-		$[0] = label;
-		$[1] = optionalLabel;
-		$[2] = requiredness;
-		$[3] = t2;
-	} else t2 = $[3];
+	if ($[0] !== optionalLabel) {
+		t2 = /* @__PURE__ */ jsx(Field.Requiredness, { optionalLabel });
+		$[0] = optionalLabel;
+		$[1] = t2;
+	} else t2 = $[1];
 	let t3;
-	if ($[4] !== checkIcon || $[5] !== items || $[6] !== onBlur || $[7] !== prefix || $[8] !== readOnly) {
-		let t4;
-		if ($[10] !== checkIcon || $[11] !== onBlur || $[12] !== prefix || $[13] !== readOnly) {
-			t4 = (item) => /* @__PURE__ */ jsxs(CheckboxGroup.Item, { children: [/* @__PURE__ */ jsx(CheckboxGroup.Control, {
+	if ($[2] !== label || $[3] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(CheckboxGroup.Legend, { children: [
+			label,
+			" ",
+			t2
+		] });
+		$[2] = label;
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== checkIcon || $[6] !== items || $[7] !== onBlur || $[8] !== prefix || $[9] !== readOnly) {
+		let t5;
+		if ($[11] !== checkIcon || $[12] !== onBlur || $[13] !== prefix || $[14] !== readOnly) {
+			t5 = (item) => /* @__PURE__ */ jsxs(CheckboxGroup.Item, { children: [/* @__PURE__ */ jsx(CheckboxGroup.Control, {
 				id: `${prefix}-${item.value}`,
 				name: prefix,
 				inputRef: detachHiddenInput,
@@ -49,51 +55,51 @@ var CheckboxGroupField = (t0) => {
 				readOnly,
 				children: /* @__PURE__ */ jsx(CheckboxGroup.Indicator, { children: checkIcon })
 			}), item.label] }, item.value);
-			$[10] = checkIcon;
-			$[11] = onBlur;
-			$[12] = prefix;
-			$[13] = readOnly;
-			$[14] = t4;
-		} else t4 = $[14];
-		t3 = items.map(t4);
-		$[4] = checkIcon;
-		$[5] = items;
-		$[6] = onBlur;
-		$[7] = prefix;
-		$[8] = readOnly;
-		$[9] = t3;
-	} else t3 = $[9];
-	let t4;
-	if ($[15] !== defaultValue || $[16] !== disabled || $[17] !== onValueChange || $[18] !== t3 || $[19] !== value) {
-		t4 = /* @__PURE__ */ jsx(CheckboxGroup.Group, {
+			$[11] = checkIcon;
+			$[12] = onBlur;
+			$[13] = prefix;
+			$[14] = readOnly;
+			$[15] = t5;
+		} else t5 = $[15];
+		t4 = items.map(t5);
+		$[5] = checkIcon;
+		$[6] = items;
+		$[7] = onBlur;
+		$[8] = prefix;
+		$[9] = readOnly;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[16] !== defaultValue || $[17] !== disabled || $[18] !== onValueChange || $[19] !== t4 || $[20] !== value) {
+		t5 = /* @__PURE__ */ jsx(CheckboxGroup.Group, {
 			value,
 			defaultValue,
 			onValueChange,
 			disabled,
-			children: t3
+			children: t4
 		});
-		$[15] = defaultValue;
-		$[16] = disabled;
-		$[17] = onValueChange;
-		$[18] = t3;
-		$[19] = value;
-		$[20] = t4;
-	} else t4 = $[20];
-	let t5;
-	if ($[21] !== description) {
-		t5 = /* @__PURE__ */ jsx(CheckboxGroup.Description, { children: description });
-		$[21] = description;
-		$[22] = t5;
-	} else t5 = $[22];
+		$[16] = defaultValue;
+		$[17] = disabled;
+		$[18] = onValueChange;
+		$[19] = t4;
+		$[20] = value;
+		$[21] = t5;
+	} else t5 = $[21];
 	let t6;
-	if ($[23] !== errors) {
-		t6 = /* @__PURE__ */ jsx(CheckboxGroup.Error, { children: errors });
-		$[23] = errors;
-		$[24] = t6;
-	} else t6 = $[24];
+	if ($[22] !== description) {
+		t6 = /* @__PURE__ */ jsx(CheckboxGroup.Description, { children: description });
+		$[22] = description;
+		$[23] = t6;
+	} else t6 = $[23];
 	let t7;
-	if ($[25] !== className || $[26] !== dirty || $[27] !== disabled || $[28] !== errors || $[29] !== name || $[30] !== pending || $[31] !== readOnly || $[32] !== requiredness || $[33] !== t1 || $[34] !== t2 || $[35] !== t4 || $[36] !== t5 || $[37] !== t6 || $[38] !== touched) {
-		t7 = /* @__PURE__ */ jsxs(CheckboxGroup.Root, {
+	if ($[24] !== errors) {
+		t7 = /* @__PURE__ */ jsx(CheckboxGroup.Error, { children: errors });
+		$[24] = errors;
+		$[25] = t7;
+	} else t7 = $[25];
+	let t8;
+	if ($[26] !== className || $[27] !== dirty || $[28] !== disabled || $[29] !== errors || $[30] !== name || $[31] !== pending || $[32] !== readOnly || $[33] !== requiredness || $[34] !== t1 || $[35] !== t3 || $[36] !== t5 || $[37] !== t6 || $[38] !== t7 || $[39] !== touched) {
+		t8 = /* @__PURE__ */ jsxs(CheckboxGroup.Root, {
 			name,
 			className,
 			disabled,
@@ -105,28 +111,28 @@ var CheckboxGroupField = (t0) => {
 			pending,
 			filled: t1,
 			children: [
-				t2,
-				t4,
+				t3,
 				t5,
-				t6
+				t6,
+				t7
 			]
 		});
-		$[25] = className;
-		$[26] = dirty;
-		$[27] = disabled;
-		$[28] = errors;
-		$[29] = name;
-		$[30] = pending;
-		$[31] = readOnly;
-		$[32] = requiredness;
-		$[33] = t1;
-		$[34] = t2;
-		$[35] = t4;
+		$[26] = className;
+		$[27] = dirty;
+		$[28] = disabled;
+		$[29] = errors;
+		$[30] = name;
+		$[31] = pending;
+		$[32] = readOnly;
+		$[33] = requiredness;
+		$[34] = t1;
+		$[35] = t3;
 		$[36] = t5;
 		$[37] = t6;
-		$[38] = touched;
-		$[39] = t7;
-	} else t7 = $[39];
-	return t7;
+		$[38] = t7;
+		$[39] = touched;
+		$[40] = t8;
+	} else t8 = $[40];
+	return t8;
 };
 export { CheckboxGroupField };

package/dist/components/checkbox-group-field/checkbox-group.css

@@ -1,31 +1,35 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._group_126dd_3 {
+  ._group_42ue7_3 {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: var(--checkbox-group-gap, var(--sys-unit-6));
   }
-  ._label_126dd_9 {
+  ._label_42ue7_9 {
     cursor: pointer;
   }
-  ._label_126dd_9:hover [role=checkbox] {
-    border-color: var(--sys-color-primary);
+  ._label_42ue7_9:hover [role=checkbox] {
+    border-color: var(--checkbox-hover-border, var(--sys-color-primary));
   }
-  :where([data-readonly], [data-disabled]) ._label_126dd_9 {
+  :where([data-readonly], [data-disabled]) ._label_42ue7_9 {
     cursor: default;
   }
-  :where([data-readonly], [data-disabled]) ._label_126dd_9:hover [role=checkbox]:not([data-checked]) {
-    border-color: var(--box-border, var(--sys-color-border));
+  :where([data-readonly], [data-disabled]) ._label_42ue7_9:hover [role=checkbox]:not([data-checked]) {
+    border-color: var(--_checkbox-border, var(--checkbox-border, var(--sys-color-border)));
   }
-  ._label_126dd_9 {
+  ._label_42ue7_9 {
     display: inline-grid;
     grid-template-columns: auto 1fr;
     grid-template-areas: "control text";
     align-items: center;
-    gap: var(--sys-unit-1) var(--sys-unit-6);
+    gap: var(--checkbox-label-row-gap, var(--sys-unit-1)) var(--checkbox-label-gap, var(--sys-unit-6));
+    font: var(--checkbox-label-font, inherit);
   }
-  ._label_126dd_9:has(> [data-optional-suffix]) {
+  ._label_42ue7_9:has(> [data-optional-suffix]) {
     grid-template-areas: "control text" "control optional";
   }
+  ._label_42ue7_9[data-disabled]:not([data-disabled] ._label_42ue7_9) {
+    opacity: var(--checkbox-group-item-disabled-opacity, 1);
+  }
 }

package/dist/components/checkbox-group-field/checkbox-group.d.ts

@@ -27,8 +27,8 @@ export type CheckboxGroupParts = Readonly<{
  * `CheckboxGroupField`.
  *
  * @example
- * <CheckboxGroup.Root filled={values.length > 0}>
- * 	<CheckboxGroup.Legend optionalLabel="optional">Statuses</CheckboxGroup.Legend>
+ * <CheckboxGroup.Root filled={values.length > 0} requiredness="optional">
+ * 	<CheckboxGroup.Legend>Statuses <Field.Requiredness optionalLabel="optional" /></CheckboxGroup.Legend>
  * 	<CheckboxGroup.Group value={values} onValueChange={setValues}>
  * 		<CheckboxGroup.Item>
  * 			<CheckboxGroup.Control value="open">

package/dist/components/checkbox-group-field/checkbox-group.js

@@ -81,8 +81,8 @@ var CheckboxGroupItem = (t0) => {
 * `CheckboxGroupField`.
 *
 * @example
-* <CheckboxGroup.Root filled={values.length > 0}>
-* 	<CheckboxGroup.Legend optionalLabel="optional">Statuses</CheckboxGroup.Legend>
+* <CheckboxGroup.Root filled={values.length > 0} requiredness="optional">
+* 	<CheckboxGroup.Legend>Statuses <Field.Requiredness optionalLabel="optional" /></CheckboxGroup.Legend>
 * 	<CheckboxGroup.Group value={values} onValueChange={setValues}>
 * 		<CheckboxGroup.Item>
 * 			<CheckboxGroup.Control value="open">

package/dist/components/checkbox-group-field/checkbox-group.module.js

@@ -1,6 +1,6 @@
 import './checkbox-group.css';// src/components/checkbox-group-field/checkbox-group.module.scss
-var group = "_group_126dd_3";
-var label = "_label_126dd_9";
+var group = "_group_42ue7_3";
+var label = "_label_42ue7_9";
 var checkbox_group_module_default = {
 	group,
 	label