@ttoss/fsl-ui 0.2.4

package/dist/components/Button/Button.d.mts

@@ -0,0 +1,68 @@
+
+import { CompositionsFor, ConsequencesFor, EvaluationsFor } from "../../semantics/taxonomy.mjs";
+import { ButtonProps } from "react-aria-components";
+
+//#region src/components/Button/Button.d.ts
+/**
+ * Formal semantic identity — what this component *is* (Layer 1).
+ */
+declare const buttonMeta: {
+  readonly displayName: "Button";
+  readonly entity: "Action";
+  readonly structure: "root";
+};
+/**
+ * Displays a semantic action trigger (entity: Action).
+ *
+ * Entity = Action → colors: `action`, radii: `control`, border: `outline.control`,
+ * sizing: `hit.base`, spacing: `inset.control.md`, typography: `label.md`, motion: `feedback`.
+ */
+interface ButtonProps$1 extends Omit<ButtonProps, 'style'> {
+  /**
+   * Semantic emphasis.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<(typeof buttonMeta)['entity']>;
+  /**
+   * Effect on state this button's action produces. Emitted as
+   * `data-consequence` on the DOM so host integrations (confirm wrappers,
+   * telemetry, undo/redo hooks) and tests can observe the contract.
+   *
+   * NOT used for coloring — visual distinction (if any) is a theme /
+   * host-CSS concern, matching the same contract as `MenuItem`.
+   *
+   * @default 'neutral'
+   */
+  consequence?: ConsequencesFor<(typeof buttonMeta)['entity']>;
+  /**
+   * Slot this button occupies inside a parent composite (FSL §4).
+   * Emitted as `data-composition` on the DOM and consumed at runtime by
+   * composites that need to reorder or style actions by role — notably
+   * `DialogActions`, which reorders children per platform convention
+   * (iOS vs Windows).
+   *
+   * Orthogonal to `evaluation` (authorial voice) and `consequence`
+   * (effect on state): composition is purely *positional* semantics.
+   */
+  composition?: CompositionsFor<(typeof buttonMeta)['entity']>;
+  /**
+   * Data scope identifier for the button.
+   * @default 'button'
+   */
+  'data-scope'?: string;
+}
+/**
+ * A semantic action button built on React Aria.
+ */
+declare const Button$1: {
+  ({
+    evaluation,
+    consequence,
+    composition,
+    "data-scope": dataScope,
+    ...props
+  }: ButtonProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Button";
+};
+//#endregion
+export { Button$1 as Button, ButtonProps$1 as ButtonProps, buttonMeta };

package/dist/components/Button/Button.mjs

@@ -0,0 +1,79 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { focusRingOutline } from "../../tokens/focusRing.mjs";
+import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { Button } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Button/Button.tsx
+/**
+* Formal semantic identity — what this component *is* (Layer 1).
+*/
+var buttonMeta = {
+  displayName: "Button",
+  entity: "Action",
+  structure: "root"
+};
+/**
+* A semantic action button built on React Aria.
+*/
+var Button$1 = ({
+  evaluation = "primary",
+  consequence = "neutral",
+  composition,
+  "data-scope": dataScope = "button",
+  ...props
+}) => {
+  const colors = vars.colors.action[evaluation];
+  return /* @__PURE__ */jsx(Button, {
+    ...props,
+    "data-scope": dataScope,
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    "data-consequence": consequence,
+    "data-composition": composition,
+    style: ({
+      isHovered,
+      isPressed,
+      isDisabled,
+      isFocusVisible
+    }) => {
+      return {
+        boxSizing: "border-box",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        borderRadius: vars.radii.control,
+        borderWidth: vars.border.outline.control.width,
+        borderStyle: vars.border.outline.control.style,
+        minHeight: vars.sizing.hit.base,
+        paddingBlock: vars.spacing.inset.control.sm,
+        paddingInline: vars.spacing.inset.control.lg,
+        ...vars.text.label.md,
+        transitionDuration: vars.motion.feedback.duration,
+        transitionTimingFunction: vars.motion.feedback.easing,
+        transitionProperty: "background-color, border-color, color",
+        backgroundColor: resolveInteractiveStyle(colors?.background, {
+          isHovered,
+          isPressed,
+          isDisabled
+        }),
+        borderColor: resolveInteractiveStyle(colors?.border, {
+          isDisabled,
+          isFocusVisible
+        }),
+        color: resolveInteractiveStyle(colors?.text, {
+          isHovered,
+          isPressed,
+          isDisabled
+        }) ?? colors?.text?.default,
+        outline: focusRingOutline(isFocusVisible)
+      };
+    }
+  });
+};
+Button$1.displayName = buttonMeta.displayName;
+
+//#endregion
+export { Button$1 as Button, buttonMeta };

package/dist/components/Checkbox/Checkbox.cjs

@@ -0,0 +1,183 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_focusRing = require('../../tokens/focusRing.cjs');
+const require_resolveInteractiveStyle = require('../../tokens/resolveInteractiveStyle.cjs');
+const require_Icon = require('../Icon/Icon.cjs');
+let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
+let react_aria_components = require("react-aria-components");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Checkbox/Checkbox.tsx
+/** Formal semantic identity — Checkbox root (Selection entity, toggle.binary). */
+var checkboxMeta = {
+  displayName: "Checkbox",
+  entity: "Selection",
+  structure: "root"
+};
+var BOX_STYLE_STATIC = {
+  boxSizing: "border-box",
+  flexShrink: 0,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "1.125rem",
+  height: "1.125rem",
+  borderRadius: _ttoss_fsl_theme_vars.vars.radii.control,
+  borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.control.style,
+  transitionProperty: "background-color, border-color, border-width",
+  transitionDuration: _ttoss_fsl_theme_vars.vars.motion.feedback.duration,
+  transitionTimingFunction: _ttoss_fsl_theme_vars.vars.motion.feedback.easing,
+  outlineOffset: "2px"
+};
+/** Box (selectionControl) style — the visual checkbox square. */
+var buildBoxStyle = ({
+  c,
+  isSelected,
+  isIndeterminate,
+  isInvalid,
+  isDisabled,
+  isHovered,
+  isPressed,
+  isFocusVisible
+}) => {
+  const checkedLike = isSelected || isIndeterminate;
+  return {
+    ...BOX_STYLE_STATIC,
+    borderWidth: checkedLike ? _ttoss_fsl_theme_vars.vars.border.outline.selected.width : _ttoss_fsl_theme_vars.vars.border.outline.control.width,
+    backgroundColor: require_resolveInteractiveStyle.resolveInteractiveStyle(c?.background, {
+      isDisabled,
+      isInvalid,
+      isSelected,
+      isIndeterminate,
+      isHovered,
+      isPressed
+    }),
+    borderColor: require_resolveInteractiveStyle.resolveInteractiveStyle(c?.border, {
+      isDisabled,
+      isInvalid,
+      isSelected,
+      isIndeterminate,
+      isFocusVisible
+    }),
+    outline: require_focusRing.focusRingOutline(isFocusVisible)
+  };
+};
+/** Indicator glyph color — a theme may omit the dimension; degrade to undefined. */
+var resolveIndicatorColor = ({
+  text,
+  isIndeterminate
+}) => {
+  return isIndeterminate ? text?.indeterminate ?? text?.checked ?? text?.default : text?.checked ?? text?.default;
+};
+/** Label color — invalid dominates disabled dominates default. */
+var resolveLabelColor = ({
+  text,
+  isInvalid,
+  isDisabled
+}) => {
+  if (isInvalid) return text?.invalid;
+  if (isDisabled) return text?.disabled;
+  return text?.default;
+};
+/**
+* A semantic selection checkbox built on React Aria.
+*
+* Entity = Selection → reads `vars.colors.input.primary.*`. Validation
+* feedback is rendered via the `invalid` State (driven by React Aria's
+* `isInvalid` prop or form-library validation), not via an Evaluation
+* variant.
+*
+* @example
+* ```tsx
+* <Checkbox>Accept terms</Checkbox>
+* <Checkbox isInvalid>Accept terms (must be checked)</Checkbox>
+* <Checkbox isIndeterminate>Partially selected</Checkbox>
+* ```
+*/
+var Checkbox = ({
+  children,
+  ...props
+}) => {
+  const c = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Checkbox, {
+    ...props,
+    "data-scope": "checkbox",
+    "data-part": "root",
+    style: ({
+      isDisabled
+    }) => {
+      return {
+        boxSizing: "border-box",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: _ttoss_fsl_theme_vars.vars.spacing.gap.inline.sm,
+        minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit.base,
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? _ttoss_fsl_theme_vars.vars.opacity.disabled : void 0,
+        ..._ttoss_fsl_theme_vars.vars.text.label.md,
+        color: isDisabled ? c?.text?.disabled : c?.text?.default
+      };
+    },
+    children: ({
+      isHovered,
+      isPressed,
+      isDisabled,
+      isFocusVisible,
+      isSelected,
+      isIndeterminate,
+      isInvalid
+    }) => {
+      const text = c?.text;
+      const showIndicator = isSelected || isIndeterminate;
+      return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
+        children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+          "data-scope": "checkbox",
+          "data-part": "selectionControl",
+          "aria-hidden": true,
+          style: buildBoxStyle({
+            c,
+            isSelected,
+            isIndeterminate,
+            isInvalid,
+            isDisabled,
+            isHovered,
+            isPressed,
+            isFocusVisible
+          }),
+          children: showIndicator && /* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+            "data-scope": "checkbox",
+            "data-part": "indicator",
+            "aria-hidden": true,
+            style: {
+              color: resolveIndicatorColor({
+                text,
+                isIndeterminate
+              }),
+              lineHeight: 1,
+              userSelect: "none"
+            },
+            children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+              intent: isIndeterminate ? "selection.indeterminate" : "selection.checked",
+              size: "sm"
+            })
+          })
+        }), children != null && /* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+          "data-scope": "checkbox",
+          "data-part": "label",
+          style: {
+            color: resolveLabelColor({
+              text,
+              isInvalid,
+              isDisabled
+            })
+          },
+          children
+        })]
+      });
+    }
+  });
+};
+Checkbox.displayName = checkboxMeta.displayName;
+
+//#endregion
+exports.Checkbox = Checkbox;
+exports.checkboxMeta = checkboxMeta;

package/dist/components/Checkbox/Checkbox.d.cts

@@ -0,0 +1,45 @@
+
+import * as React from "react";
+import { CheckboxProps } from "react-aria-components";
+
+//#region src/components/Checkbox/Checkbox.d.ts
+/** Formal semantic identity — Checkbox root (Selection entity, toggle.binary). */
+declare const checkboxMeta: {
+  readonly displayName: "Checkbox";
+  readonly entity: "Selection";
+  readonly structure: "root";
+};
+/**
+ * Props for the Checkbox component.
+ */
+interface CheckboxProps$1 extends Omit<CheckboxProps, 'style' | 'children'> {
+  /**
+   * Label content displayed next to the checkbox indicator.
+   * Rendered inside a `data-part="label"` span.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic selection checkbox built on React Aria.
+ *
+ * Entity = Selection → reads `vars.colors.input.primary.*`. Validation
+ * feedback is rendered via the `invalid` State (driven by React Aria's
+ * `isInvalid` prop or form-library validation), not via an Evaluation
+ * variant.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox>Accept terms</Checkbox>
+ * <Checkbox isInvalid>Accept terms (must be checked)</Checkbox>
+ * <Checkbox isIndeterminate>Partially selected</Checkbox>
+ * ```
+ */
+declare const Checkbox: {
+  ({
+    children,
+    ...props
+  }: CheckboxProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Checkbox";
+};
+//#endregion
+export { Checkbox, CheckboxProps$1 as CheckboxProps, checkboxMeta };

package/dist/components/Checkbox/Checkbox.d.mts

@@ -0,0 +1,45 @@
+
+import { CheckboxProps } from "react-aria-components";
+import * as React from "react";
+
+//#region src/components/Checkbox/Checkbox.d.ts
+/** Formal semantic identity — Checkbox root (Selection entity, toggle.binary). */
+declare const checkboxMeta: {
+  readonly displayName: "Checkbox";
+  readonly entity: "Selection";
+  readonly structure: "root";
+};
+/**
+ * Props for the Checkbox component.
+ */
+interface CheckboxProps$1 extends Omit<CheckboxProps, 'style' | 'children'> {
+  /**
+   * Label content displayed next to the checkbox indicator.
+   * Rendered inside a `data-part="label"` span.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic selection checkbox built on React Aria.
+ *
+ * Entity = Selection → reads `vars.colors.input.primary.*`. Validation
+ * feedback is rendered via the `invalid` State (driven by React Aria's
+ * `isInvalid` prop or form-library validation), not via an Evaluation
+ * variant.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox>Accept terms</Checkbox>
+ * <Checkbox isInvalid>Accept terms (must be checked)</Checkbox>
+ * <Checkbox isIndeterminate>Partially selected</Checkbox>
+ * ```
+ */
+declare const Checkbox$1: {
+  ({
+    children,
+    ...props
+  }: CheckboxProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Checkbox";
+};
+//#endregion
+export { Checkbox$1 as Checkbox, CheckboxProps$1 as CheckboxProps, checkboxMeta };

package/dist/components/Checkbox/Checkbox.mjs

@@ -0,0 +1,182 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { focusRingOutline } from "../../tokens/focusRing.mjs";
+import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
+import { Icon } from "../Icon/Icon.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { Checkbox } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Checkbox/Checkbox.tsx
+/** Formal semantic identity — Checkbox root (Selection entity, toggle.binary). */
+var checkboxMeta = {
+  displayName: "Checkbox",
+  entity: "Selection",
+  structure: "root"
+};
+var BOX_STYLE_STATIC = {
+  boxSizing: "border-box",
+  flexShrink: 0,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "1.125rem",
+  height: "1.125rem",
+  borderRadius: vars.radii.control,
+  borderStyle: vars.border.outline.control.style,
+  transitionProperty: "background-color, border-color, border-width",
+  transitionDuration: vars.motion.feedback.duration,
+  transitionTimingFunction: vars.motion.feedback.easing,
+  outlineOffset: "2px"
+};
+/** Box (selectionControl) style — the visual checkbox square. */
+var buildBoxStyle = ({
+  c,
+  isSelected,
+  isIndeterminate,
+  isInvalid,
+  isDisabled,
+  isHovered,
+  isPressed,
+  isFocusVisible
+}) => {
+  const checkedLike = isSelected || isIndeterminate;
+  return {
+    ...BOX_STYLE_STATIC,
+    borderWidth: checkedLike ? vars.border.outline.selected.width : vars.border.outline.control.width,
+    backgroundColor: resolveInteractiveStyle(c?.background, {
+      isDisabled,
+      isInvalid,
+      isSelected,
+      isIndeterminate,
+      isHovered,
+      isPressed
+    }),
+    borderColor: resolveInteractiveStyle(c?.border, {
+      isDisabled,
+      isInvalid,
+      isSelected,
+      isIndeterminate,
+      isFocusVisible
+    }),
+    outline: focusRingOutline(isFocusVisible)
+  };
+};
+/** Indicator glyph color — a theme may omit the dimension; degrade to undefined. */
+var resolveIndicatorColor = ({
+  text,
+  isIndeterminate
+}) => {
+  return isIndeterminate ? text?.indeterminate ?? text?.checked ?? text?.default : text?.checked ?? text?.default;
+};
+/** Label color — invalid dominates disabled dominates default. */
+var resolveLabelColor = ({
+  text,
+  isInvalid,
+  isDisabled
+}) => {
+  if (isInvalid) return text?.invalid;
+  if (isDisabled) return text?.disabled;
+  return text?.default;
+};
+/**
+* A semantic selection checkbox built on React Aria.
+*
+* Entity = Selection → reads `vars.colors.input.primary.*`. Validation
+* feedback is rendered via the `invalid` State (driven by React Aria's
+* `isInvalid` prop or form-library validation), not via an Evaluation
+* variant.
+*
+* @example
+* ```tsx
+* <Checkbox>Accept terms</Checkbox>
+* <Checkbox isInvalid>Accept terms (must be checked)</Checkbox>
+* <Checkbox isIndeterminate>Partially selected</Checkbox>
+* ```
+*/
+var Checkbox$1 = ({
+  children,
+  ...props
+}) => {
+  const c = vars.colors.input.primary;
+  return /* @__PURE__ */jsx(Checkbox, {
+    ...props,
+    "data-scope": "checkbox",
+    "data-part": "root",
+    style: ({
+      isDisabled
+    }) => {
+      return {
+        boxSizing: "border-box",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: vars.spacing.gap.inline.sm,
+        minHeight: vars.sizing.hit.base,
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? vars.opacity.disabled : void 0,
+        ...vars.text.label.md,
+        color: isDisabled ? c?.text?.disabled : c?.text?.default
+      };
+    },
+    children: ({
+      isHovered,
+      isPressed,
+      isDisabled,
+      isFocusVisible,
+      isSelected,
+      isIndeterminate,
+      isInvalid
+    }) => {
+      const text = c?.text;
+      const showIndicator = isSelected || isIndeterminate;
+      return /* @__PURE__ */jsxs(Fragment, {
+        children: [/* @__PURE__ */jsx("span", {
+          "data-scope": "checkbox",
+          "data-part": "selectionControl",
+          "aria-hidden": true,
+          style: buildBoxStyle({
+            c,
+            isSelected,
+            isIndeterminate,
+            isInvalid,
+            isDisabled,
+            isHovered,
+            isPressed,
+            isFocusVisible
+          }),
+          children: showIndicator && /* @__PURE__ */jsx("span", {
+            "data-scope": "checkbox",
+            "data-part": "indicator",
+            "aria-hidden": true,
+            style: {
+              color: resolveIndicatorColor({
+                text,
+                isIndeterminate
+              }),
+              lineHeight: 1,
+              userSelect: "none"
+            },
+            children: /* @__PURE__ */jsx(Icon, {
+              intent: isIndeterminate ? "selection.indeterminate" : "selection.checked",
+              size: "sm"
+            })
+          })
+        }), children != null && /* @__PURE__ */jsx("span", {
+          "data-scope": "checkbox",
+          "data-part": "label",
+          style: {
+            color: resolveLabelColor({
+              text,
+              isInvalid,
+              isDisabled
+            })
+          },
+          children
+        })]
+      });
+    }
+  });
+};
+Checkbox$1.displayName = checkboxMeta.displayName;
+
+//#endregion
+export { Checkbox$1 as Checkbox, checkboxMeta };

package/dist/components/CheckboxGroup/CheckboxGroup.cjs

@@ -0,0 +1,97 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
+let react_aria_components = require("react-aria-components");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/CheckboxGroup/CheckboxGroup.tsx
+/** Formal semantic identity — CheckboxGroup root (Selection entity, multi-choice). */
+var checkboxGroupMeta = {
+  displayName: "CheckboxGroup",
+  entity: "Selection",
+  structure: "root"
+};
+/**
+* Resolve the group's text colors once (default for label/description, invalid
+* for the validation message). Hoisted out of the render so the optional-chain
+* reads live here and keep the component's cyclomatic complexity low.
+*/
+var resolveGroupTextColors = c => {
+  const text = c?.text;
+  return {
+    base: text?.default,
+    invalid: text?.invalid ?? text?.default
+  };
+};
+/**
+* A semantic checkbox group built on React Aria's `CheckboxGroup`.
+*
+* Orchestrates a set of independently-selectable `Checkbox` options (multi
+* select — the counterpart of the single-select `RadioGroup`). Group-level
+* validation set via `isInvalid` (or React Aria's `validate`) propagates to
+* every child Checkbox, which surfaces the `invalid` State.
+*
+* Entity = Selection → reads `vars.colors.input.primary.*`. Validation is the
+* `invalid` State, never an `evaluation` variant.
+*
+* @example
+* ```tsx
+* <CheckboxGroup label="Notifications" description="Pick at least one">
+*   <Checkbox value="email">Email</Checkbox>
+*   <Checkbox value="sms">SMS</Checkbox>
+* </CheckboxGroup>
+* ```
+*/
+var CheckboxGroup = ({
+  label,
+  description,
+  errorMessage,
+  children,
+  ...props
+}) => {
+  const {
+    base,
+    invalid
+  } = resolveGroupTextColors(_ttoss_fsl_theme_vars.vars.colors.input.primary);
+  return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(react_aria_components.CheckboxGroup, {
+    ...props,
+    "data-scope": "checkbox-group",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.sm
+    },
+    children: [label != null && /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Label, {
+      "data-scope": "checkbox-group",
+      "data-part": "label",
+      style: {
+        ..._ttoss_fsl_theme_vars.vars.text.label.md,
+        color: base
+      },
+      children: label
+    }), children, description != null && /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Text, {
+      slot: "description",
+      "data-scope": "checkbox-group",
+      "data-part": "description",
+      style: {
+        ..._ttoss_fsl_theme_vars.vars.text.label.sm,
+        color: base
+      },
+      children: description
+    }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.FieldError, {
+      "data-scope": "checkbox-group",
+      "data-part": "validationMessage",
+      style: {
+        ..._ttoss_fsl_theme_vars.vars.text.label.sm,
+        color: invalid
+      },
+      children: errorMessage
+    })]
+  });
+};
+CheckboxGroup.displayName = checkboxGroupMeta.displayName;
+
+//#endregion
+exports.CheckboxGroup = CheckboxGroup;
+exports.checkboxGroupMeta = checkboxGroupMeta;