@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/checkbox/parts/CheckboxIndicator.js

@@ -0,0 +1,163 @@
+import { jsx as e } from "react/jsx-runtime";
+import { uyTv as u } from "@payfit/unity-themes";
+const b = u({
+  slots: {
+    base: [
+      "uy:flex uy:items-center uy:justify-center uy:rounded-50 uy:m-25 uy:w-200 uy:h-200 uy:text-content-inverted uy:border uy:border-solid uy:transition-all uy:duration-100"
+    ],
+    checkmark: [
+      "uy:w-[16px] uy:fill-none uy:stroke-[2px] uy:stroke-content-inverted uy:transition-all uy:duration-500"
+    ]
+  },
+  variants: {
+    isSelected: {
+      true: ""
+    },
+    isDisabled: {
+      true: ""
+    },
+    isReadOnly: {
+      true: ""
+    },
+    isInvalid: {
+      true: ""
+    }
+  },
+  defaultVariants: {
+    isSelected: !1,
+    isDisabled: !1,
+    isInvalid: !1,
+    isReadOnly: !1
+  },
+  compoundVariants: [
+    {
+      isSelected: !1,
+      isDisabled: !1,
+      isInvalid: !1,
+      isReadOnly: !1,
+      className: {
+        base: "uy:border-border-form-enabled uy:hover:border-border-form-hover uy:group-data-[hovered=true]:border-border-form-hover uy:group-hover:border-border-form-hover uy:focus-visible:border-border-form-focus uy:group-data-[focus-visible=true]:border-border-form-focus uy:bg-surface-form-enabled"
+      }
+    },
+    {
+      isSelected: !0,
+      isDisabled: !1,
+      isInvalid: !1,
+      isReadOnly: !1,
+      className: {
+        base: [
+          "uy:bg-surface-form-active",
+          "uy:theme-legacy:border-border-form-selected uy:theme-legacy:hover:border-border-form-active",
+          "uy:theme-rebrand:border-transparent uy:theme-rebrand:hover:border-transparent"
+        ]
+      }
+    },
+    {
+      isSelected: !1,
+      isDisabled: !0,
+      className: {
+        base: "uy:bg-surface-form-disabled! uy:border-border-form-disabled",
+        checkmark: "uy:text-transparent"
+      }
+    },
+    {
+      isSelected: !0,
+      isDisabled: !0,
+      className: {
+        base: "uy:bg-surface-form-disabled! uy:border-border-form-disabled!",
+        checkmark: "uy:text-border-form-disabled"
+      }
+    },
+    {
+      isSelected: !1,
+      isInvalid: !0,
+      className: {
+        base: "uy:border-border-form-error uy:bg-surface-form-enabled",
+        checkmark: "uy:text-transparent"
+      }
+    },
+    {
+      isSelected: !0,
+      isDisabled: !1,
+      isInvalid: !0,
+      isReadOnly: !1,
+      className: {
+        base: [
+          "uy:bg-surface-danger!",
+          "uy:theme-legacy:border-border-form-error!",
+          "uy:theme-rebrand:border-transparent!"
+        ],
+        checkmark: "uy:text-content-inverted"
+      }
+    },
+    {
+      isSelected: !1,
+      isReadOnly: !0,
+      className: {
+        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        checkmark: "uy:text-transparent"
+      }
+    },
+    {
+      isSelected: !0,
+      isReadOnly: !0,
+      className: {
+        base: "uy:bg-surface-form-disabled! uy:border-border-form-disabled!",
+        checkmark: "uy:text-surface-form-read-only!"
+      }
+    }
+  ]
+});
+function c({
+  isSelected: r,
+  isDisabled: s,
+  isIndeterminate: a,
+  isInvalid: o,
+  isReadOnly: t,
+  className: d
+}) {
+  const { base: l, checkmark: i } = b({
+    isSelected: r || a,
+    isDisabled: s,
+    isInvalid: o,
+    isReadOnly: t
+  });
+  return /* @__PURE__ */ e("div", { className: l({ className: d }), "data-dd-privacy": "mask", children: /* @__PURE__ */ e(
+    "svg",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 16 16",
+      "aria-hidden": "true",
+      className: i(),
+      style: {
+        strokeDashoffset: r ? 44 : 66
+      },
+      children: a ? /* @__PURE__ */ e(
+        "rect",
+        {
+          x: "3",
+          y: "7",
+          width: "10",
+          height: "2",
+          rx: "0.5",
+          stroke: "none",
+          fill: "currentColor"
+        }
+      ) : /* @__PURE__ */ e(
+        "polyline",
+        {
+          points: "3.5,8 6.5,11 12.5,5",
+          stroke: "currentColor",
+          strokeDasharray: "22",
+          strokeLinecap: "butt",
+          strokeLinejoin: "bevel"
+        }
+      )
+    }
+  ) });
+}
+c.displayName = "CheckboxIndicator";
+export {
+  c as CheckboxIndicator
+};

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

@@ -0,0 +1,76 @@
+import { StandardSchemaV1 } from '@standard-schema/spec';
+import { ForwardedRef, JSX, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { Schema } from '../../hooks/use-form.types.js';
+import { LabelProps } from '../label/Label.js';
+interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the checkbox. */
+    children: ReactNode;
+    /** Helper text to display below the checkbox. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the checkbox. */
+    contextualLink?: ReactNode;
+    /** The default selected value of the checkbox. */
+    defaultSelected?: boolean;
+    /** Whether the checkbox is disabled. */
+    isDisabled?: boolean;
+    /** Whether the checkbox is read-only. */
+    isReadOnly?: boolean;
+    /** Whether the checkbox is invalid. */
+    isInvalid?: boolean;
+    /** Whether the checkbox is loading. */
+    isLoading?: boolean;
+}
+export type CheckboxFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName>;
+type CheckboxFieldComponent = (<TSchema extends Schema>(props: CheckboxFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
+    ref?: ForwardedRef<HTMLLabelElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `CheckboxField` component enhances the base Checkbox with form integration capabilities,
+ * making it easy to handle boolean values in forms with proper validation and feedback.
+ *
+ * It provides form validation, helper text, and error feedback while maintaining the same
+ * API as the base Checkbox component. The component automatically integrates with Unity's
+ * form context and handles value updates through the form's state management.
+ * @param {CheckboxFieldProps} props - Props for the CheckboxField component
+ * @see {@link CheckboxFieldProps} for all available props
+ * @example
+ * ```tsx
+ * import { useUnityForm, CheckboxField } from '@payfit/unity-components'
+ * import * as z from 'zod'
+ *
+ * function Example() {
+ *   const schema = z.object({
+ *     acceptTerms: z.boolean().refine(Boolean, {
+ *       message: 'You must accept the terms',
+ *     }),
+ *   })
+ *
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *     <Form action={handleSubmit}>
+ *       <CheckboxField<typeof schema>
+ *         name="acceptTerms"
+ *         helperText="Please read our terms carefully"
+ *       >
+ *         Accept terms and conditions
+ *       </CheckboxField>
+ *     </Form>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](/?path=/docs/forms-checkboxfield--docs) • [Demo](/?path=/story/forms-checkboxfield--primary)
+ * @note The schema type parameter is needed to ensure type safety with the form's
+ schema.
+ * If you omit it, the `name` prop will not be type-safe.
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
+ */
+declare const CheckboxField: CheckboxFieldComponent;
+export { CheckboxField };

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

@@ -0,0 +1,67 @@
+import { jsxs as k, jsx as m } from "react/jsx-runtime";
+import { forwardRef as C, useMemo as y } from "react";
+import { useFormContext as R } from "react-hook-form";
+import { createSchemaAdapter as q } from "../../utils/createSchemaAdapter.js";
+import { Checkbox as P } from "../checkbox/Checkbox.js";
+import { FormField as S } from "../form-field/FormField.js";
+import { FormControl as j } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as v } from "../form-field/parts/FormFeedbackText.js";
+import { isFieldRequired as w } from "../form-field/utils/isFieldRequired.js";
+import { useUnityFormProvider as N } from "../form/Form.context.js";
+function T({
+  name: o,
+  children: e,
+  defaultSelected: r,
+  helperText: t,
+  contextualLink: c,
+  isRequired: s,
+  isInvalid: d,
+  isLoading: l,
+  isDisabled: n,
+  isReadOnly: f,
+  requiredVariant: p,
+  ...u
+}, x) {
+  const { control: F, watch: a } = R(), { schema: i } = N(), h = y(
+    () => w(q(i), o),
+    [i, o]
+  ), b = a(o);
+  return /* @__PURE__ */ k(
+    S,
+    {
+      control: F,
+      name: o,
+      className: "uy:flex uy:flex-col uy:gap-100",
+      ...{
+        isInvalid: d,
+        isLoading: l,
+        isDisabled: n,
+        isReadOnly: f
+      },
+      children: [
+        /* @__PURE__ */ m(j, { children: /* @__PURE__ */ m(
+          P,
+          {
+            ref: x,
+            defaultSelected: r,
+            isSelected: b,
+            requiredVariant: p,
+            helperText: t,
+            feedbackText: /* @__PURE__ */ m(v, {}),
+            ...u,
+            isRequired: h ?? s,
+            children: e
+          }
+        ) }),
+        c
+      ]
+    }
+  );
+}
+const U = C(function(e, r) {
+  return T(e, r);
+});
+U.displayName = "CheckboxField";
+export {
+  U as CheckboxField
+};

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { TanstackCheckboxProps } from '../checkbox/TanstackCheckbox.js';
+import { LabelProps } from '../label/Label.js';
+export interface FieldProps extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
+    /** The label for the checkbox. */
+    children: ReactNode;
+    /** Helper text to display below the checkbox. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the checkbox. */
+    contextualLink?: ReactNode;
+}
+export type TanstackCheckboxFieldProps = FieldProps & TanstackCheckboxProps;
+declare const TanstackCheckboxField: import('react').ForwardRefExoticComponent<FieldProps & TanstackCheckboxProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { TanstackCheckboxField };

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

@@ -0,0 +1,40 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { TanstackCheckbox as x } from "../checkbox/TanstackCheckbox.js";
+import { TanstackFormFeedbackText as p } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormField as l } from "../form-field/TanstackFormField.js";
+function F({
+  children: o,
+  helperText: r,
+  contextualLink: i,
+  isRequired: t,
+  isDisabled: a,
+  isReadOnly: c,
+  requiredVariant: m,
+  value: s,
+  ...d
+}, k) {
+  return /* @__PURE__ */ n(l, { children: [
+    /* @__PURE__ */ e(
+      x,
+      {
+        ref: k,
+        value: s,
+        requiredVariant: m,
+        helperText: r,
+        feedbackText: /* @__PURE__ */ e(p, {}),
+        ...d,
+        isDisabled: a,
+        isReadOnly: c,
+        isRequired: t,
+        children: o
+      }
+    ),
+    i
+  ] });
+}
+const T = f(F);
+T.displayName = "TanstackCheckboxField";
+export {
+  T as TanstackCheckboxField
+};

package/dist/esm/components/checkbox-group/CheckboxGroup.d.ts

@@ -0,0 +1,65 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ReactNode } from 'react';
+import { CheckboxGroupProps as AriaCheckboxGroupProps } from 'react-aria-components/CheckboxGroup';
+export declare const checkboxGroup: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:flex uy:flex-col uy:gap-50", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:flex uy:flex-col uy:gap-50", unknown, unknown, undefined>>;
+export interface CheckboxGroupProps extends VariantProps<typeof checkboxGroup>, Omit<AriaCheckboxGroupProps, 'className' | 'class'> {
+    /** The label for the checkbox group. */
+    label: string;
+    /** Helper text to display below the checkbox group. */
+    helperText?: ReactNode;
+    /** Feedback text to display below the checkbox group. */
+    feedbackText?: ReactNode;
+    /** The default selected values of the checkbox group. */
+    defaultValue?: string[];
+    /** The current selected values of the checkbox group (controlled). */
+    value?: string[];
+    /** Whether the checkbox group is disabled. */
+    isDisabled?: boolean;
+    /** Whether the checkbox group is read-only. */
+    isReadOnly?: boolean;
+    /** Whether the checkbox group is invalid. */
+    isInvalid?: boolean;
+    /** Whether the checkbox group is required. */
+    isRequired?: boolean;
+    /** Whether the checkbox group is loading. */
+    isLoading?: boolean;
+    /** The variant of the required indicator. */
+    requiredVariant?: 'required' | 'optional';
+    /** Callback when the selection changes. */
+    onChange?: (value: string[]) => void;
+    /**
+     * Handler called when the checkbox receives focus.
+     */
+    onFocus?: AriaCheckboxGroupProps['onFocus'];
+    /**
+     * Handler called when the checkbox loses focus.
+     */
+    onBlur?: AriaCheckboxGroupProps['onBlur'];
+    /**
+     * Handler that is called when the element's focus status changes.
+     * @param isFocused
+     */
+    onFocusChange?: (isFocused: boolean) => void;
+    children: ReactNode;
+}
+/**
+ * The `CheckboxGroup` component is an accessible group of related checkboxes.
+ * It provides a way to select multiple options from a list of choices.
+ * @param {CheckboxGroupProps} props - The props for the `CheckboxGroup` component
+ * @example
+ * ```tsx
+ * import { CheckboxGroup, Checkbox } from '@payfit/unity-components'
+ *
+ * <CheckboxGroup
+ *   label="Notification preferences"
+ *   helperText="Choose how you want to receive notifications"
+ * >
+ *   <Checkbox value="email">Email notifications</Checkbox>
+ *   <Checkbox value="sms">SMS notifications</Checkbox>
+ *   <Checkbox value="push">Push notifications</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ * @see {@link CheckboxProps} for all available props
+ */
+declare const CheckboxGroup: import('react').ForwardRefExoticComponent<CheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { CheckboxGroup };

package/dist/esm/components/checkbox-group/CheckboxGroup.js

@@ -0,0 +1,73 @@
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { forwardRef as d, isValidElement as x, cloneElement as h } from "react";
+import { uyTv as g } from "@payfit/unity-themes";
+import { CheckboxGroup as b } from "react-aria-components/CheckboxGroup";
+import { Label as v } from "../label/Label.js";
+import { Text as c } from "../text/Text.js";
+const G = g({
+  base: "uy:flex uy:flex-col uy:gap-50"
+}), C = d(
+  ({
+    label: l,
+    helperText: m,
+    feedbackText: o,
+    isDisabled: e,
+    isReadOnly: n,
+    isInvalid: t,
+    isRequired: s,
+    isLoading: a,
+    children: p,
+    requiredVariant: i,
+    ...u
+  }, y) => /* @__PURE__ */ f(
+    b,
+    {
+      ...{
+        isDisabled: e,
+        isReadOnly: n,
+        isInvalid: t,
+        isRequired: s,
+        isLoading: a
+      },
+      ...u,
+      ref: y,
+      className: G(),
+      children: [
+        l && /* @__PURE__ */ r(v, { isRequired: s, requiredVariant: i, children: l }),
+        m && /* @__PURE__ */ r(
+          c,
+          {
+            variant: "bodySmall",
+            color: "content.neutral.low",
+            slot: "description",
+            children: m
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: "uy:mt-100 uy:flex uy:flex-col uy:gap-150 uy:py-25",
+            "data-dd-privacy": "mask",
+            children: p
+          }
+        ),
+        t && (typeof o == "string" ? /* @__PURE__ */ r(
+          c,
+          {
+            variant: "bodySmallStrong",
+            color: "content.form.invalid",
+            slot: "errorMessage",
+            children: o
+          }
+        ) : x(o) && h(o, {
+          slot: "errorMessage"
+        }))
+      ]
+    }
+  )
+);
+C.displayName = "CheckboxGroup";
+export {
+  C as CheckboxGroup,
+  G as checkboxGroup
+};

package/dist/esm/components/checkbox-group/TanstackCheckboxGroup.d.ts

@@ -0,0 +1,4 @@
+import { CheckboxGroupProps } from './CheckboxGroup.js';
+export type TanstackCheckboxGroupProps = Omit<CheckboxGroupProps, 'name' | 'value' | 'defaultValue' | 'isInvalid'>;
+declare const TanstackCheckboxGroup: import('react').ForwardRefExoticComponent<TanstackCheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackCheckboxGroup };

package/dist/esm/components/checkbox-group/TanstackCheckboxGroup.js

@@ -0,0 +1,37 @@
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import { useFieldContext as f } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as h } from "../form-field/TanstackFormField.context.js";
+import { CheckboxGroup as x } from "./CheckboxGroup.js";
+const k = b(
+  ({ onChange: r, onBlur: i, isReadOnly: d, isDisabled: n, children: l, label: s, ...c }, m) => {
+    const e = f(), a = h(), p = e.state.meta.isTouched && !e.state.meta.isValid, o = [a.helperTextId, a.feedbackTextId].filter(Boolean).join(" ");
+    return /* @__PURE__ */ u(
+      x,
+      {
+        ...c,
+        ref: m,
+        id: a.inputId,
+        label: s,
+        value: e.state.value,
+        onChange: (t) => {
+          e.handleChange(t), r?.(t);
+        },
+        onBlur: (t) => {
+          e.handleBlur(), i?.(t);
+        },
+        isReadOnly: d,
+        isDisabled: n,
+        isInvalid: p,
+        "aria-labelledby": a.labelId,
+        "aria-describedby": o.length > 0 ? o : void 0,
+        "aria-details": a.contextualLinkId,
+        children: l
+      }
+    );
+  }
+);
+k.displayName = "TanstackCheckboxGroup";
+export {
+  k as TanstackCheckboxGroup
+};

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

@@ -0,0 +1,81 @@
+import { StandardSchemaV1 } from '@standard-schema/spec';
+import { ForwardedRef, JSX, PropsWithChildren, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { Schema } from '../../hooks/use-form.types.js';
+import { CheckboxGroupProps } from '../checkbox-group/CheckboxGroup.js';
+import { LabelProps } from '../label/Label.js';
+interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the checkbox group. */
+    label: string;
+    /** Helper text to display below the checkbox group. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the checkbox group. */
+    contextualLink?: ReactNode;
+    /** The default selected values of the checkbox group. */
+    defaultValue?: string[];
+    /** Whether the checkbox group is disabled. */
+    isDisabled?: boolean;
+    /** Whether the checkbox group is read-only. */
+    isReadOnly?: boolean;
+    /** Whether the checkbox group is invalid. */
+    isInvalid?: boolean;
+    /** Whether the checkbox group is loading. */
+    isLoading?: boolean;
+    /** Callback when the selection changes. */
+    onChange?: (value: string[]) => void;
+    /**
+     * Handler called when the checkbox receives focus.
+     */
+    onFocus?: CheckboxGroupProps['onFocus'];
+    /**
+     * Handler called when the checkbox loses focus.
+     */
+    onBlur?: CheckboxGroupProps['onBlur'];
+    /**
+     * Handler that is called when the element's focus status changes.
+     * @param isFocused
+     */
+    onFocusChange?: (isFocused: boolean) => void;
+}
+export type CheckboxGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName>;
+type CheckboxGroupFieldComponent = (<TSchema extends Schema>(props: CheckboxGroupFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `CheckboxGroupField` component renders a group of related checkboxes that can be used in forms.
+ * It integrates with the `Form` component automatically and provides form validation, helper text,
+ * and error feedback.
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *   preferences: z.array(z.string())
+ * })
+ *
+ * function MyForm() {
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *     <Form action={handleSubmit}>
+ *       <CheckboxGroupField<typeof schema>
+ *         name="preferences"
+ *         label="Select your preferences"
+ *         helperText="Choose all that apply"
+ *       >
+ *         <Checkbox value="email">Email notifications</Checkbox>
+ *         <Checkbox value="sms">SMS notifications</Checkbox>
+ *       </CheckboxGroupField>
+ *     </Form>
+ *   )
+ * }
+ * ```
+ * @note The schema type parameter is needed to ensure type safety with the form's schema.
+ * If you omit it, the `name` prop will not be type-safe.
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
+ */
+declare const CheckboxGroupField: CheckboxGroupFieldComponent;
+export { CheckboxGroupField };

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

@@ -0,0 +1,57 @@
+import { jsxs as k, jsx as t } from "react/jsx-runtime";
+import { forwardRef as C } from "react";
+import { useFormContext as a } from "react-hook-form";
+import { CheckboxGroup as G } from "../checkbox-group/CheckboxGroup.js";
+import { FormField as j } from "../form-field/FormField.js";
+import { FormControl as w } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as y } from "../form-field/parts/FormFeedbackText.js";
+function P({
+  name: o,
+  label: r,
+  defaultValue: e,
+  helperText: m,
+  contextualLink: c,
+  isRequired: i,
+  isInvalid: n,
+  isLoading: p,
+  isDisabled: f,
+  isReadOnly: l,
+  requiredVariant: d,
+  children: s,
+  ...u
+}, x) {
+  const { control: F, watch: h } = a(), b = h(o);
+  return /* @__PURE__ */ k(j, { control: F, name: o, ...{
+    isRequired: i,
+    isInvalid: n,
+    isLoading: p,
+    isDisabled: f,
+    isReadOnly: l
+  }, children: [
+    /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t(
+      G,
+      {
+        ref: x,
+        label: r,
+        defaultValue: e,
+        value: b,
+        helperText: m,
+        feedbackText: /* @__PURE__ */ t(y, {}),
+        requiredVariant: d,
+        ...u,
+        children: s
+      }
+    ) }),
+    c
+  ] });
+}
+const T = C(function(r, e) {
+  return P(
+    r,
+    e
+  );
+});
+T.displayName = "CheckboxGroupField";
+export {
+  T as CheckboxGroupField
+};