@wix/site-ui 1.108.0 → 1.110.0

package/dist/CheckboxGroupField/index.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { CheckboxGroup as CheckboxGroup_CheckboxGroup_CheckboxGroup } from "../CheckboxGroup/index.js";
+import { Field } from "../Field/index.js";
+import { toCssLength } from "../8027.js";
+import * as __rspack_external_react from "react";
+const CheckboxGroupField_module = {
+    field: "field-Tx5eMP",
+    label: "label-E_rDm0",
+    items: "items-lFFDGE"
+};
+const CheckboxGroupField = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, style, children, label, layout = 'vertical', fluid = false, error = false, errorMessage, required = false, width, disabled = false, 'aria-labelledby': ariaLabelledBy, 'aria-required': ariaRequired, ...props }, ref)=>{
+    const generatedLabelId = __rspack_external_react.useId();
+    const isError = error || Boolean(errorMessage);
+    const labelId = label ? generatedLabelId : void 0;
+    const labelledBy = labelId && ariaLabelledBy ? `${ariaLabelledBy} ${labelId}` : labelId ?? ariaLabelledBy;
+    const groupWidth = toCssLength(width);
+    const groupStyle = {
+        ...style,
+        ...groupWidth ? {
+            '--checkbox-group-width': groupWidth
+        } : null
+    };
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        className: clsx(CheckboxGroupField_module.field, className),
+        style: groupStyle,
+        invalid: isError,
+        disabled: disabled,
+        "data-fluid": fluid ? '' : void 0,
+        children: [
+            label ? /*#__PURE__*/ jsx("span", {
+                id: labelId,
+                className: CheckboxGroupField_module.label,
+                children: label
+            }) : null,
+            /*#__PURE__*/ jsx(CheckboxGroup_CheckboxGroup_CheckboxGroup, {
+                ref: ref,
+                className: CheckboxGroupField_module.items,
+                disabled: disabled,
+                "data-layout": layout,
+                "data-fluid": fluid ? '' : void 0,
+                "aria-labelledby": labelledBy,
+                "aria-required": required ? true : ariaRequired,
+                ...props,
+                children: children
+            }),
+            isError && errorMessage ? /*#__PURE__*/ jsx(Field.Error, {
+                match: true,
+                children: errorMessage
+            }) : null
+        ]
+    });
+});
+CheckboxGroupField.displayName = 'CheckboxGroupField';
+export { CheckboxGroupField };

package/dist/Field/index.css

@@ -33,6 +33,11 @@
   color: var(--wst-shade-3-color, #767676);
 }
 
+.descriptionEnd-O3mOtW {
+  text-align: end;
+  align-self: flex-end;
+}
+
 .control-fRhDZ8 {
   width: 100%;
 }
@@ -61,6 +66,15 @@
   padding-block: 24px 6px;
 }
 
+.root-ECdHfF:has(.labelFloating-io8BLN) .group-XazO1A {
+  align-items: end;
+  padding-block: 0;
+}
+
+.root-ECdHfF:has(.labelFloating-io8BLN) .adornment-Z1N0NF {
+  padding-block-end: 6px;
+}
+
 .labelFloating-io8BLN {
   z-index: 2;
   color: var(--wst-shade-3-color, #767676);
@@ -73,7 +87,7 @@
   transform: translateY(-50%);
 }
 
-.labelFloating-io8BLN[data-filled], .labelFloating-io8BLN[data-focused] {
+.labelFloating-io8BLN[data-filled], .labelFloating-io8BLN[data-focused], .root-ECdHfF:has(.control-fRhDZ8[placeholder]:not([placeholder=""])) .labelFloating-io8BLN, .root-ECdHfF:has(.labelFloating-io8BLN):has(.adornment-Z1N0NF) .labelFloating-io8BLN {
   font-size: 12px;
   inset-block-start: 8px;
   transform: translateY(0);
@@ -83,3 +97,78 @@
   width: 100%;
 }
 
+div.group-XazO1A {
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+.group-XazO1A:focus-within {
+  border-color: var(--wst-system-line-1-color, #000);
+}
+
+.group-XazO1A:has(.control-fRhDZ8:focus) {
+  box-shadow: 0 0 0 2px var(--wst-links-and-actions-color, #116dff);
+}
+
+.group-XazO1A:has(.control-fRhDZ8[aria-invalid="true"]) {
+  border-color: color-mix(in srgb,
+    var(--wst-system-error-color, #df3131) 60%,
+    transparent);
+}
+
+.group-XazO1A:has(.control-fRhDZ8[aria-invalid="true"]):hover, .group-XazO1A:has(.control-fRhDZ8[aria-invalid="true"]):focus-within {
+  border-color: var(--wst-system-error-color, #df3131);
+}
+
+.group-XazO1A:has(.control-fRhDZ8[data-valid]) {
+  border-color: color-mix(in srgb,
+    var(--wst-system-success-color, #008250) 60%,
+    transparent);
+}
+
+.group-XazO1A:has(.control-fRhDZ8:disabled) {
+  cursor: not-allowed;
+}
+
+.group-XazO1A:has(.control-fRhDZ8:disabled):hover {
+  border-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, #000) 60%,
+    transparent);
+}
+
+.group-XazO1A:has(.control-fRhDZ8:disabled) .adornment-Z1N0NF {
+  color: var(--wst-system-disabled-color, #939393);
+}
+
+.group-XazO1A.groupLine-vlna4V {
+  border-width: 0;
+  border-block-end-width: var(--wst-system-line-1-width, 1px);
+  border-radius: 0;
+  padding-inline: 0;
+}
+
+.group-XazO1A .control-fRhDZ8 {
+  background-color: #0000;
+  border: 0;
+  flex: auto;
+  width: auto;
+  min-width: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.adornment-Z1N0NF {
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-shade-3-color, #767676);
+  flex-shrink: 0;
+  align-items: center;
+  display: inline-flex;
+}
+
+.adornment-Z1N0NF > svg {
+  width: 20px;
+  height: 20px;
+  display: block;
+}
+

package/dist/Field/index.d.ts

@@ -110,6 +110,8 @@ declare type ControlVariant = 'box' | 'line';
 
 declare const decrementPress: "decrement-press";
 
+declare type DescriptionAlign = 'start' | 'end';
+
 declare const disabled: "disabled";
 
 declare const drag: "drag";
@@ -133,12 +135,17 @@ export declare const Field: {
     } & React_2.RefAttributes<HTMLDivElement>>;
     Description: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldDescriptionProps_2, "ref"> & React_2.RefAttributes<HTMLParagraphElement>, "ref">, "className"> & {
         className?: string | undefined;
-    } & React_2.RefAttributes<HTMLParagraphElement>>;
-    Control: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldControlProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
-        className?: string | undefined;
     } & {
+        /** Horizontal alignment of the text. */
+        align?: DescriptionAlign | undefined;
+    } & React_2.RefAttributes<HTMLParagraphElement>>;
+    Control: React_2.ForwardRefExoticComponent<Omit<WithStringClassName<Omit<Omit<FieldControlProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">>, "prefix" | "suffix"> & {
         /** `line` swaps the boxed border for a single bottom border. */
         variant?: ControlVariant | undefined;
+        /** Content shown inside the field before the input. */
+        prefix?: React_2.ReactNode;
+        /** Content shown inside the field after the input. */
+        suffix?: React_2.ReactNode;
     } & React_2.RefAttributes<HTMLElement>>;
     Item: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldItemProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -682,4 +689,8 @@ declare type WithBaseUIEvent<T> = { [K in keyof T]: WithPreventBaseUIHandler<T[K
 
 declare type WithPreventBaseUIHandler<T> = T extends ((event: infer E) => any) ? E extends React_2.SyntheticEvent<Element, Event> ? (event: BaseUIEvent<E>) => ReturnType<T> : T : T extends undefined ? undefined : T;
 
+declare type WithStringClassName<P> = Omit<P, 'className'> & {
+    className?: string;
+};
+
 export { }

package/dist/Field/index.js

@@ -675,10 +675,14 @@ const Field_module = {
     label: "label-YSWZBs",
     error: "error-BUDKWp",
     description: "description-IVviYU",
+    descriptionEnd: "descriptionEnd-O3mOtW",
     control: "control-fRhDZ8",
     controlLine: "controlLine-cAw0CF",
     labelFloating: "labelFloating-io8BLN",
-    item: "item-kQeHOQ"
+    group: "group-XazO1A",
+    adornment: "adornment-Z1N0NF",
+    item: "item-kQeHOQ",
+    groupLine: "groupLine-vlna4V"
 };
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldRoot_FieldRoot, {
         ref: ref,
@@ -706,9 +710,11 @@ const Error = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...
             }),
         ...props
     }));
-const Description = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldDescription_FieldDescription, {
+const Description = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, align = 'start', ...props }, ref)=>/*#__PURE__*/ jsx(FieldDescription_FieldDescription, {
         ref: ref,
-        className: clsx(Field_module.description, className),
+        className: clsx(Field_module.description, {
+            [Field_module.descriptionEnd]: 'end' === align
+        }, className),
         ...props
     }));
 const TEXT_INPUT_TYPES = new Set([
@@ -725,16 +731,41 @@ const TEXT_INPUT_TYPES = new Set([
     'week',
     'time'
 ]);
-const Control = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, type = 'text', variant = 'box', ...props }, ref)=>/*#__PURE__*/ jsx(FieldControl_FieldControl, {
+const hasAdornment = (node)=>null != node && 'boolean' != typeof node;
+const Control = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, type = 'text', variant = 'box', prefix, suffix, ...props }, ref)=>{
+    const showPrefix = hasAdornment(prefix);
+    const showSuffix = hasAdornment(suffix);
+    const adorned = showPrefix || showSuffix;
+    const control = /*#__PURE__*/ jsx(FieldControl_FieldControl, {
         ref: ref,
         type: type,
         className: clsx({
             [Input_module.root]: TEXT_INPUT_TYPES.has(type)
         }, Field_module.control, {
             [Field_module.controlLine]: 'line' === variant
+        }, {
+            'has-custom-focus': adorned
         }, className),
         ...props
-    }));
+    });
+    if (!adorned) return control;
+    return /*#__PURE__*/ jsxs("div", {
+        className: clsx(Input_module.root, Field_module.group, {
+            [Field_module.groupLine]: 'line' === variant
+        }),
+        children: [
+            showPrefix && /*#__PURE__*/ jsx("span", {
+                className: Field_module.adornment,
+                children: prefix
+            }),
+            control,
+            showSuffix && /*#__PURE__*/ jsx("span", {
+                className: Field_module.adornment,
+                children: suffix
+            })
+        ]
+    });
+});
 const Item = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldItem_FieldItem, {
         ref: ref,
         className: clsx(Field_module.item, className),

package/dist/RadioField/index.d.ts

@@ -1,3 +1,4 @@
+import { DescriptionAlign } from '../Field/Field';
 import { FieldControlProps } from '@base-ui/react/field';
 import { FieldDescriptionProps } from '../Field';
 import { FieldDescriptionProps as FieldDescriptionProps_2 } from '@base-ui/react/field';
@@ -54,6 +55,8 @@ declare type ComponentRenderFn<Props, State> = (props: Props, state: State) => R
 
 declare type ControlVariant = 'box' | 'line';
 
+declare type DescriptionAlign_2 = 'start' | 'end';
+
 declare const Field: {
     Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldRootProps_3, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -69,12 +72,17 @@ declare const Field: {
     } & React_2.RefAttributes<HTMLDivElement>>;
     Description: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldDescriptionProps_2, "ref"> & React_2.RefAttributes<HTMLParagraphElement>, "ref">, "className"> & {
         className?: string | undefined;
-    } & React_2.RefAttributes<HTMLParagraphElement>>;
-    Control: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldControlProps, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
-        className?: string | undefined;
     } & {
+        /** Horizontal alignment of the text. */
+        align?: DescriptionAlign_2 | undefined;
+    } & React_2.RefAttributes<HTMLParagraphElement>>;
+    Control: React_2.ForwardRefExoticComponent<Omit<WithStringClassName<Omit<Omit<FieldControlProps, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">>, "prefix" | "suffix"> & {
         /** `line` swaps the boxed border for a single bottom border. */
         variant?: ControlVariant | undefined;
+        /** Content shown inside the field before the input. */
+        prefix?: React_2.ReactNode;
+        /** Content shown inside the field after the input. */
+        suffix?: React_2.ReactNode;
     } & React_2.RefAttributes<HTMLElement>>;
     Item: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldItemProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -185,6 +193,8 @@ export declare const RadioField: React_2.ForwardRefExoticComponent<Omit<Omit<Omi
     /** Props forwarded to the `Field.Description`. */
     descriptionProps?: Omit<Omit<Omit<Omit<Omit<FieldDescriptionProps, "ref"> & React_2.RefAttributes<HTMLParagraphElement>, "ref">, "className"> & {
         className?: string | undefined;
+    } & {
+        align?: DescriptionAlign | undefined;
     } & React_2.RefAttributes<HTMLParagraphElement>, "ref">, "children"> | undefined;
     /** Props forwarded to the `Field.Error`. */
     errorProps?: Omit<Omit<Omit<Omit<Omit<FieldErrorProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {

package/dist/index.d.ts

@@ -73,6 +73,7 @@ import { ContextMenuRadioItemIndicatorProps as ContextMenuRadioItemIndicatorProp
 import { ContextMenuRadioItemProps as ContextMenuRadioItemProps_2 } from '@base-ui/react/context-menu';
 import { ContextMenuSubmenuTriggerProps as ContextMenuSubmenuTriggerProps_2 } from '@base-ui/react/context-menu';
 import { ContextMenuTriggerProps as ContextMenuTriggerProps_2 } from '@base-ui/react/context-menu';
+import { DescriptionAlign as DescriptionAlign_2 } from '../Field/Field';
 import { DialogBackdropProps as DialogBackdropProps_2 } from '@base-ui/react/dialog';
 import { DialogCloseProps as DialogCloseProps_2 } from '@base-ui/react/dialog';
 import { DialogDescriptionProps as DialogDescriptionProps_2 } from '@base-ui/react/dialog';
@@ -1148,7 +1149,9 @@ declare type BaseListProps = WithStringClassName<React_2.ComponentPropsWithoutRe
 
 declare type BaseProps = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Button_2>>;
 
-declare type BaseProps_2 = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Separator_2>>;
+declare type BaseProps_2 = React_2.ComponentPropsWithoutRef<typeof CheckboxGroup>;
+
+declare type BaseProps_3 = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Separator_2>>;
 
 declare type BaseUIChangeEventDetail<Reason extends string, CustomProperties extends object> = {
     /**
@@ -1311,6 +1314,42 @@ export declare const Checkbox: {
     } & React_2.RefAttributes<HTMLSpanElement>>;
 };
 
+export declare namespace Checkbox_2 {
+    export {
+        CheckboxRoot as Root,
+        CheckboxIndicator as Indicator
+    }
+}
+
+export declare const CheckboxField: React_2.ForwardRefExoticComponent<CheckboxFieldProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface CheckboxFieldProps extends Omit<RootProps, 'children' | 'className' | 'style' | 'render' | 'nativeButton' | 'size'> {
+    /** Visible label rendered beside the checkbox. */
+    label: React_2.ReactNode;
+    /** Extra inline content rendered after the label (e.g. a price or badge). */
+    suffix?: React_2.ReactNode;
+    /** Visual style: a plain checkbox row or a selectable `box` tile. */
+    variant?: CheckboxFieldVariant;
+    /** Marks the field invalid, colouring the control and revealing `errorMessage`. */
+    error?: boolean;
+    /** Error message rendered below the option; also marks the field invalid. */
+    errorMessage?: React_2.ReactNode;
+    /** Aligns the control with the first line (`top`) or the label's centre. */
+    verticalAlignment?: CheckboxFieldVerticalAlignment;
+    /** Size of the checkbox control in pixels. */
+    size?: number;
+    /** Fixed width of the option; accepts a number (px) or any CSS length. */
+    width?: number | string;
+    /** Class applied to the field root. */
+    className?: string;
+    /** Inline styles applied to the field root. */
+    style?: React_2.CSSProperties;
+}
+
+export declare type CheckboxFieldVariant = 'default' | 'box';
+
+export declare type CheckboxFieldVerticalAlignment = 'center' | 'top';
+
 export declare const CheckboxGroup: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<CheckboxGroupProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
     className?: string | undefined;
 } & React_2.RefAttributes<HTMLDivElement>>;
@@ -1333,6 +1372,29 @@ export declare type CheckboxGroupChangeEventDetails = BaseUIChangeEventDetails<C
 
 export declare type CheckboxGroupChangeEventReason = typeof REASONS.none;
 
+export declare const CheckboxGroupField: React_2.ForwardRefExoticComponent<CheckboxGroupFieldProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare type CheckboxGroupFieldLayout = 'vertical' | 'horizontal';
+
+export declare interface CheckboxGroupFieldProps extends WithStringClassName<Omit<BaseProps_2, 'style'>> {
+    /** Accessible label rendered above the group. */
+    label?: React_2.ReactNode;
+    /** Arranges the options in a column (`vertical`) or wrapping row (`horizontal`). */
+    layout?: CheckboxGroupFieldLayout;
+    /** Stretches the group and its options to the available width. */
+    fluid?: boolean;
+    /** Marks the group invalid and reveals `errorMessage`. */
+    error?: boolean;
+    /** Error message rendered below the group; also marks it invalid. */
+    errorMessage?: React_2.ReactNode;
+    /** Sets `aria-required` on the group for assistive tech. */
+    required?: boolean;
+    /** Fixed width of the group; accepts a number (px) or any CSS length. */
+    width?: number | string;
+    /** Inline styles applied to the field root. */
+    style?: React_2.CSSProperties;
+}
+
 export declare interface CheckboxGroupProps extends BaseUIComponentProps<'div', CheckboxGroupState> {
     /**
      * Names of the checkboxes in the group that should be ticked.
@@ -1516,7 +1578,7 @@ export declare interface CheckboxRootState extends FieldRootState {
 
 export declare const CheckboxSize: {
     readonly small: 12;
-    readonly medium: 16;
+    readonly medium: 14;
     readonly large: 20;
 };
 
@@ -3103,6 +3165,8 @@ declare const DEFAULT_SIZE: {
 
 declare function Description({ className, ...props }: WithStringClassName<Drawer_2.Description.Props>): JSX_2.Element;
 
+declare type DescriptionAlign = 'start' | 'end';
+
 export declare const Dialog: {
     Backdrop: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<DialogBackdropProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -4197,12 +4261,17 @@ export declare const Field: {
     } & React_2.RefAttributes<HTMLDivElement>>;
     Description: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldDescriptionProps_2, "ref"> & React_2.RefAttributes<HTMLParagraphElement>, "ref">, "className"> & {
         className?: string | undefined;
-    } & React_2.RefAttributes<HTMLParagraphElement>>;
-    Control: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldControlProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
-        className?: string | undefined;
     } & {
+        /** Horizontal alignment of the text. */
+        align?: DescriptionAlign | undefined;
+    } & React_2.RefAttributes<HTMLParagraphElement>>;
+    Control: React_2.ForwardRefExoticComponent<Omit<WithStringClassName<Omit<Omit<FieldControlProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">>, "prefix" | "suffix"> & {
         /** `line` swaps the boxed border for a single bottom border. */
         variant?: ControlVariant | undefined;
+        /** Content shown inside the field before the input. */
+        prefix?: React_2.ReactNode;
+        /** Content shown inside the field after the input. */
+        suffix?: React_2.ReactNode;
     } & React_2.RefAttributes<HTMLElement>>;
     Item: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldItemProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -8350,6 +8419,8 @@ export declare const RadioField: React_2.ForwardRefExoticComponent<Omit<Omit<Omi
     /** Props forwarded to the `Field.Description`. */
     descriptionProps?: Omit<Omit<Omit<Omit<Omit<FieldDescriptionProps_3, "ref"> & React_2.RefAttributes<HTMLParagraphElement>, "ref">, "className"> & {
         className?: string | undefined;
+    } & {
+        align?: DescriptionAlign_2 | undefined;
     } & React_2.RefAttributes<HTMLParagraphElement>, "ref">, "children"> | undefined;
     /** Props forwarded to the `Field.Error`. */
     errorProps?: Omit<Omit<Omit<Omit<Omit<FieldErrorProps_3, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
@@ -8724,17 +8795,21 @@ declare function Root_2<Value = any>({ className, dir, separator, 'aria-label':
 
 declare function Root_3<Value = any>({ className, orientation, ...props }: WithStringClassName<NavigationMenu_2.Root.Props<Value>>): JSX_2.Element;
 
-declare function Root_4<Value>({ className, size, style, ...props }: RootProps<Value>): JSX_2.Element;
+declare function Root_4<Value>({ className, size, style, ...props }: RootProps_2<Value>): JSX_2.Element;
 
-declare function Root_5<Value extends number | ReadonlyArray<number>>({ className, size, style, ...props }: RootProps_2<Value>): JSX_2.Element;
+declare function Root_5<Value extends number | ReadonlyArray<number>>({ className, size, style, ...props }: RootProps_3<Value>): JSX_2.Element;
 
 declare type RootOwnProps = Omit<React_2.ComponentProps<typeof Select.Root>, 'children'>;
 
-declare type RootProps<Value> = WithStringClassName<Radio_2.Root.Props<Value>> & {
+export declare type RootProps = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Checkbox_2.Root>> & {
+    size?: number;
+};
+
+declare type RootProps_2<Value> = WithStringClassName<Radio_2.Root.Props<Value>> & {
     size?: number;
 };
 
-declare type RootProps_2<Value extends number | ReadonlyArray<number>> = WithStringClassName<Slider_2.Root.Props<Value>> & {
+declare type RootProps_3<Value extends number | ReadonlyArray<number>> = WithStringClassName<Slider_2.Root.Props<Value>> & {
     size?: number;
 };
 
@@ -11589,7 +11664,7 @@ export declare interface SeparatorProps extends BaseUIComponentProps<'div', Sepa
     orientation?: Orientation | undefined;
 }
 
-declare interface SeparatorProps_3 extends BaseProps_2 {
+declare interface SeparatorProps_3 extends BaseProps_3 {
     variant?: SeparatorVariant;
 }
 

package/dist/index.js

@@ -7,7 +7,9 @@ export { Box } from "./Box/index.js";
 export { Breadcrumbs } from "./Breadcrumbs/index.js";
 export { Button } from "./Button/index.js";
 export { Checkbox, CheckboxSize } from "./Checkbox/index.js";
+export { CheckboxField } from "./CheckboxField/index.js";
 export { CheckboxGroup } from "./CheckboxGroup/index.js";
+export { CheckboxGroupField } from "./CheckboxGroupField/index.js";
 export { Collapsible } from "./Collapsible/index.js";
 export { Combobox } from "./Combobox/index.js";
 export { ContextMenu } from "./ContextMenu/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/site-ui",
-  "version": "1.108.0",
+  "version": "1.110.0",
   "description": "Pure UI components for the Wix site builder",
   "license": "MIT",
   "type": "module",
@@ -95,5 +95,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "e22003e7c6447123ccbcc80fde0fcb53c406d849da0df1dbcc927c91"
+  "falconPackageHash": "e915d0e03facd56b79682806f5724da5224732c987bb2cdce48058c8"
 }

package/dist/CheckboxGroup/index.css

@@ -1,9 +0,0 @@
-.root-ZCRH6j {
-  border: none;
-  flex-direction: column;
-  gap: 12px;
-  margin: 0;
-  padding: 0;
-  display: flex;
-}
-