@wix/site-ui 1.109.0 → 1.110.0

package/dist/8027.js

@@ -0,0 +1,4 @@
+function toCssLength(value) {
+    return 'number' == typeof value ? `${value}px` : value;
+}
+export { toCssLength };

package/dist/Checkbox/index.css

@@ -1,94 +1,86 @@
 .root-OrOWpu {
+  --checkbox-size: 14px;
+  --checkbox-border-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, black) 60%,
+    transparent);
+  --checkbox-icon-color: var(--wst-links-and-actions-color, #116dff);
   box-sizing: border-box;
   cursor: pointer;
-  font: var(--wst-paragraph-2-font);
-  color: var(--wst-paragraph-2-color, #000);
-  --indicator-bg: var(--wst-primary-background-color, #fff);
-  --indicator-border: color-mix(in srgb,
-    var(--wst-system-line-1-color, #000) 60%,
-    transparent);
   align-items: center;
-  gap: 8px;
-  transition: color .2s linear;
+  transition: background-color .2s linear, border-color .2s linear, color .2s linear;
   display: inline-flex;
+  position: relative;
 }
 
 .root-OrOWpu:hover, .root-OrOWpu:focus-within {
-  --indicator-border: var(--wst-system-line-1-color, #000);
-  outline: none;
+  --checkbox-border-color: var(--wst-system-line-1-color, black);
 }
 
-.root-OrOWpu[data-checked]:not([data-disabled]) {
-  --indicator-bg: var(--wst-links-and-actions-color, #116dff);
-  --indicator-border: var(--wst-links-and-actions-color, #116dff);
-}
-
-.root-OrOWpu[data-checked]:hover {
-  --indicator-bg: color-mix(in srgb,
-    var(--wst-links-and-actions-color, #116dff) 85%,
-    #000);
-  --indicator-border: color-mix(in srgb,
-    var(--wst-links-and-actions-color, #116dff) 85%,
-    #000);
-}
-
-.root-OrOWpu[data-disabled] {
-  cursor: default;
-  pointer-events: none;
-  color: var(--wst-system-disabled-color, #939393);
-  --indicator-bg: var(--wst-primary-background-color, #fff);
-  --indicator-border: color-mix(in srgb,
-    var(--wst-system-disabled-color, #939393) 60%,
-    transparent);
+.root-OrOWpu:focus-visible {
+  z-index: 1;
+  box-shadow: var(--wst-primary-background-color, white) 0 0 0 1px,
+    var(--wst-links-and-actions-color, #116dff) 0 0 0 3px;
+  outline: none;
 }
 
 .root-OrOWpu[data-invalid]:not([data-checked]) {
-  --indicator-border: var(--wst-system-error-color, #df3131);
+  --checkbox-border-color: var(--wst-system-error-color, #df3131);
 }
 
-.root-OrOWpu[data-invalid]:not([data-checked]):hover, .root-OrOWpu[data-invalid]:not([data-checked]):focus-within {
-  --indicator-border: color-mix(in srgb,
+.root-OrOWpu[data-invalid][data-checked] {
+  --checkbox-icon-color: var(--wst-system-error-color, #df3131);
+  --checkbox-border-color: color-mix(in srgb,
     var(--wst-system-error-color, #df3131) 70%,
     transparent);
 }
 
-.root-OrOWpu[data-invalid][data-checked] {
-  --indicator-bg: var(--wst-system-error-color, #df3131);
-  --indicator-border: var(--wst-system-error-color, #df3131);
+.root-OrOWpu[data-disabled] {
+  --checkbox-border-color: color-mix(in srgb,
+    var(--wst-system-disabled-color, #939393) 60%,
+    transparent);
+  --checkbox-icon-color: var(--wst-system-disabled-color, #939393);
+  cursor: default;
+  pointer-events: none;
 }
 
 .indicator-g_8JYy {
   box-sizing: content-box;
-  width: var(--checkbox-size, 16px);
-  height: var(--checkbox-size, 16px);
-  border: var(--wst-system-line-1-width, 1px) solid var(--indicator-border);
-  background-color: var(--indicator-bg);
-  border-radius: 2px;
+  width: var(--checkbox-size, 14px);
+  height: var(--checkbox-size, 14px);
+  border: var(--wst-system-line-1-width, 1px) solid var(--checkbox-border-color);
+  background-color: var(--wst-primary-background-color, white);
+  color: #0000;
+  border-radius: 4px;
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  transition: background-color .2s linear, border-color .2s linear;
+  transition: background-color .2s linear, border-color .2s linear, color .2s linear;
   display: inline-flex;
+  position: relative;
 }
 
-.indicator-g_8JYy path {
-  fill: #0000;
-  transition: fill .2s linear;
+.indicator-g_8JYy svg {
+  width: calc(var(--checkbox-size, 14px) * .72);
+  height: auto;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
-.root-OrOWpu[data-checked]:not([data-disabled]) .indicator-g_8JYy path, .root-OrOWpu[data-checked]:hover .indicator-g_8JYy path {
-  fill: var(--wst-primary-background-color, #fff);
+.indicator-g_8JYy path {
+  fill: currentColor;
 }
 
-.root-OrOWpu:hover .indicator-g_8JYy path, .root-OrOWpu:focus-within .indicator-g_8JYy path {
-  fill: #0000;
+.indicatorIcon-6oqHA9 {
+  opacity: 0;
 }
 
-.root-OrOWpu[data-disabled] .indicator-g_8JYy path {
-  fill: var(--wst-system-disabled-color, #939393);
+.root-OrOWpu[data-checked] .indicator-g_8JYy, .root-OrOWpu[data-indeterminate] .indicator-g_8JYy {
+  color: var(--checkbox-icon-color);
 }
 
-.root-OrOWpu[data-invalid][data-checked] .indicator-g_8JYy path {
-  fill: var(--wst-primary-background-color, #fff);
+.root-OrOWpu[data-checked]:not([data-indeterminate]) .checkmarkIcon-MX0Ccp, .root-OrOWpu[data-indeterminate] .indeterminateIcon-_b18QI {
+  opacity: 1;
 }
 

package/dist/Checkbox/index.d.ts

@@ -80,6 +80,13 @@ export declare const Checkbox: {
     } & React_2.RefAttributes<HTMLSpanElement>>;
 };
 
+export declare namespace Checkbox_2 {
+    export {
+        CheckboxRoot as Root,
+        CheckboxIndicator as Indicator
+    }
+}
+
 /**
  * Indicates whether the checkbox is ticked.
  * Renders a `<span>` element.
@@ -227,7 +234,7 @@ export declare interface CheckboxRootState extends FieldRootState {
 
 export declare const CheckboxSize: {
     readonly small: 12;
-    readonly medium: 16;
+    readonly medium: 14;
     readonly large: 20;
 };
 
@@ -415,6 +422,10 @@ declare interface ReasonToEventMap {
     [REASONS.windowResize]: UIEvent;
 }
 
+export declare type RootProps = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Checkbox_2.Root>> & {
+    size?: number;
+};
+
 declare const scrub: "scrub";
 
 declare const siblingOpen: "sibling-open";
@@ -442,4 +453,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/Checkbox/index.js

@@ -1,4 +1,5 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckboxChecked, CheckboxIndeterminate } from "@wix/wix-ui-icons-common/system";
 import clsx from "clsx";
 import { CheckboxRoot_CheckboxRoot, useCheckboxRootContext, useStateAttributesMapping } from "../3248.js";
 import { useOpenChangeComplete, transitionStatusMapping, useTransitionStatus } from "../880.js";
@@ -44,27 +45,45 @@ const CheckboxIndicator_CheckboxIndicator = /*#__PURE__*/ __rspack_external_reac
 if ("production" !== process.env.NODE_ENV) CheckboxIndicator_CheckboxIndicator.displayName = "CheckboxIndicator";
 const Checkbox_module = {
     root: "root-OrOWpu",
-    indicator: "indicator-g_8JYy"
+    indicator: "indicator-g_8JYy",
+    indicatorIcon: "indicatorIcon-6oqHA9",
+    checkmarkIcon: "checkmarkIcon-MX0Ccp",
+    indeterminateIcon: "indeterminateIcon-_b18QI"
 };
 const CheckboxSize = {
     small: 12,
-    medium: 16,
+    medium: 14,
     large: 20
 };
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, size = CheckboxSize.medium, style, ...props }, ref)=>/*#__PURE__*/ jsx(CheckboxRoot_CheckboxRoot, {
         ref: ref,
-        className: clsx(Checkbox_module.root, className),
+        className: clsx(Checkbox_module.root, className, 'has-custom-focus'),
         style: {
             '--checkbox-size': `${size}px`,
             ...style
         },
         ...props
     }));
-const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(CheckboxIndicator_CheckboxIndicator, {
+Root.displayName = 'Checkbox.Root';
+const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ jsx(CheckboxIndicator_CheckboxIndicator, {
         ref: ref,
+        keepMounted: true,
         className: clsx(Checkbox_module.indicator, className),
-        ...props
+        ...props,
+        children: children ?? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(CheckboxChecked, {
+                    "aria-hidden": "true",
+                    className: clsx(Checkbox_module.indicatorIcon, Checkbox_module.checkmarkIcon)
+                }),
+                /*#__PURE__*/ jsx(CheckboxIndeterminate, {
+                    "aria-hidden": "true",
+                    className: clsx(Checkbox_module.indicatorIcon, Checkbox_module.indeterminateIcon)
+                })
+            ]
+        })
     }));
+Indicator.displayName = 'Checkbox.Indicator';
 const Checkbox = {
     Root: Root,
     Indicator: Indicator

package/dist/CheckboxField/index.css

@@ -0,0 +1,93 @@
+.option-o8pAcb {
+  width: var(--checkbox-option-width, auto);
+  gap: 8px;
+  max-width: 100%;
+  display: inline-block;
+}
+
+.option-o8pAcb[data-variant="box"], .option-o8pAcb[data-has-error-message] {
+  width: var(--checkbox-option-width, 100%);
+  display: flex;
+}
+
+.root-tqmYsF {
+  --checkbox-box-border-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, black) 60%,
+    transparent);
+  max-width: 100%;
+  color: var(--wst-paragraph-2-color, black);
+  font: var(--wst-paragraph-2-font, normal normal 400 16px / 24px Madefor,
+    "Helvetica Neue",
+    Arial,
+    sans-serif);
+  user-select: none;
+  gap: 12px;
+  line-height: 24px;
+  text-decoration: none;
+}
+
+.root-tqmYsF[data-vertical-alignment="top"] {
+  align-items: flex-start;
+}
+
+.root-tqmYsF[data-vertical-alignment="top"] .indicator-_WzHbq {
+  margin-top: calc((
+        24px - var(--checkbox-size, 14px) - 2 *
+          var(--wst-system-line-1-width, 1px)
+      ) /
+      2);
+}
+
+.root-tqmYsF[data-variant="box"] {
+  width: var(--checkbox-option-width, 100%);
+  border: var(--wst-system-line-1-width, 1px) solid
+    var(--checkbox-box-border-color);
+  background-color: var(--wst-primary-background-color, white);
+  border-radius: 4px;
+  padding: 15px 16px;
+  display: flex;
+}
+
+.root-tqmYsF[data-variant="box"]:hover, .root-tqmYsF[data-variant="box"]:focus-within {
+  --checkbox-box-border-color: var(--wst-system-line-1-color, black);
+}
+
+.root-tqmYsF[data-variant="box"][data-checked]:not([data-disabled]) {
+  --checkbox-box-border-color: var(--wst-links-and-actions-color, #116dff);
+  background-color: color-mix(in srgb,
+    var(--wst-links-and-actions-color, #116dff) 10%,
+    transparent);
+}
+
+.root-tqmYsF[data-variant="box"][data-invalid]:not([data-checked]) {
+  --checkbox-box-border-color: var(--wst-system-error-color, #df3131);
+}
+
+.root-tqmYsF[data-variant="box"][data-disabled] {
+  --checkbox-box-border-color: var(--wst-system-disabled-color, #939393);
+}
+
+.root-tqmYsF[data-disabled] {
+  color: var(--wst-system-disabled-color, #939393);
+}
+
+.optionContent-inaJL9 {
+  flex: auto;
+  align-items: center;
+  min-width: 0;
+  display: flex;
+}
+
+.optionLabel-fJWxkM {
+  overflow-wrap: anywhere;
+  flex: auto;
+  min-width: 0;
+  display: block;
+}
+
+.optionSuffix-AJytXe {
+  white-space: nowrap;
+  flex: none;
+  margin-inline-start: 5px;
+}
+

package/dist/CheckboxField/index.d.ts

@@ -0,0 +1,468 @@
+import * as React_2 from 'react';
+
+declare type BaseUIChangeEventDetail<Reason extends string, CustomProperties extends object> = {
+    /**
+     * The reason for the event.
+     */
+    reason: Reason;
+    /**
+     * The native event associated with the custom event.
+     */
+    event: ReasonToEvent<Reason>;
+    /**
+     * Cancels Base UI from handling the event.
+     */
+    cancel: () => void;
+    /**
+     * Allows the event to propagate in cases where Base UI will stop the propagation.
+     */
+    allowPropagation: () => void;
+    /**
+     * Indicates whether the event has been canceled.
+     */
+    isCanceled: boolean;
+    /**
+     * Indicates whether the event is allowed to propagate.
+     */
+    isPropagationAllowed: boolean;
+    /**
+     * The element that triggered the event, if applicable.
+     */
+    trigger: Element | undefined;
+} & CustomProperties;
+
+/**
+ * Details of custom change events emitted by Base UI components.
+ */
+declare type BaseUIChangeEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIChangeEventDetail<Reason, CustomProperties> & {} : never;
+
+/**
+ * Props shared by all Base UI components.
+ * Contains `className` (string or callback taking the component's state as an argument) and `render` (function to customize rendering).
+ */
+declare type BaseUIComponentProps<ElementType extends React_2.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<WithBaseUIEvent<React_2.ComponentPropsWithRef<ElementType>>, 'className' | 'color' | 'defaultValue' | 'defaultChecked' | 'style'> & {
+    /**
+     * CSS class applied to the element, or a function that
+     * returns a class based on the component's state.
+     */
+    className?: string | ((state: State) => string | undefined) | undefined;
+    /**
+     * Allows you to replace the component's HTML element
+     * with a different tag, or compose it with another component.
+     *
+     * Accepts a `ReactElement` or a function that returns the element to render.
+     */
+    render?: React_2.ReactElement | ComponentRenderFn<RenderFunctionProps, State> | undefined;
+    /**
+     * Style applied to the element, or a function that
+     * returns a style object based on the component's state.
+     */
+    style?: React_2.CSSProperties | ((state: State) => React_2.CSSProperties | undefined) | undefined;
+};
+
+declare type BaseUIEvent<E extends React_2.SyntheticEvent<Element, Event>> = E & {
+    preventBaseUIHandler: () => void;
+    readonly baseUIHandlerPrevented?: boolean | undefined;
+};
+
+declare const cancelOpen: "cancel-open";
+
+export declare namespace Checkbox {
+    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';
+
+/**
+ * Indicates whether the checkbox is ticked.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
+ */
+declare const CheckboxIndicator: React_2.ForwardRefExoticComponent<Omit<CheckboxIndicatorProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
+
+declare namespace CheckboxIndicator {
+    type State = CheckboxIndicatorState;
+    type Props = CheckboxIndicatorProps;
+}
+
+declare interface CheckboxIndicatorProps extends BaseUIComponentProps<'span', CheckboxIndicatorState> {
+    /**
+     * Whether to keep the element in the DOM when the checkbox is not checked.
+     * @default false
+     */
+    keepMounted?: boolean | undefined;
+}
+
+declare interface CheckboxIndicatorState extends CheckboxRootState {
+    /**
+     * The transition status of the component.
+     */
+    transitionStatus: TransitionStatus;
+}
+
+/**
+ * Represents the checkbox itself.
+ * Renders a `<span>` element and a hidden `<input>` beside.
+ *
+ * Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
+ */
+declare const CheckboxRoot: React_2.ForwardRefExoticComponent<Omit<CheckboxRootProps, "ref"> & React_2.RefAttributes<HTMLElement>>;
+
+declare namespace CheckboxRoot {
+    type State = CheckboxRootState;
+    type Props = CheckboxRootProps;
+    type ChangeEventReason = CheckboxRootChangeEventReason;
+    type ChangeEventDetails = CheckboxRootChangeEventDetails;
+}
+
+declare type CheckboxRootChangeEventDetails = BaseUIChangeEventDetails<CheckboxRoot.ChangeEventReason>;
+
+declare type CheckboxRootChangeEventReason = typeof REASONS.none;
+
+declare interface CheckboxRootProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', CheckboxRootState>, 'onChange' | 'value'> {
+    /**
+     * The id of the input element.
+     */
+    id?: string | undefined;
+    /**
+     * Identifies the field when a form is submitted.
+     * @default undefined
+     */
+    name?: string | undefined;
+    /**
+     * Identifies the form that owns the hidden input.
+     * Useful when the checkbox is rendered outside the form.
+     */
+    form?: string | undefined;
+    /**
+     * Whether the checkbox is currently ticked.
+     *
+     * To render an uncontrolled checkbox, use the `defaultChecked` prop instead.
+     * @default undefined
+     */
+    checked?: boolean | undefined;
+    /**
+     * Whether the checkbox is initially ticked.
+     *
+     * To render a controlled checkbox, use the `checked` prop instead.
+     * @default false
+     */
+    defaultChecked?: boolean | undefined;
+    /**
+     * Whether the component should ignore user interaction.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Event handler called when the checkbox is ticked or unticked.
+     */
+    onCheckedChange?: ((checked: boolean, eventDetails: CheckboxRootChangeEventDetails) => void) | undefined;
+    /**
+     * Whether the user should be unable to tick or untick the checkbox.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Whether the user must tick the checkbox before submitting a form.
+     * @default false
+     */
+    required?: boolean | undefined;
+    /**
+     * Whether the checkbox is in a mixed state: neither ticked, nor unticked.
+     * @default false
+     */
+    indeterminate?: boolean | undefined;
+    /**
+     * A ref to access the hidden `<input>` element.
+     */
+    inputRef?: React_2.Ref<HTMLInputElement> | undefined;
+    /**
+     * Whether the checkbox controls a group of child checkboxes.
+     *
+     * Must be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group).
+     * @default false
+     */
+    parent?: boolean | undefined;
+    /**
+     * The value submitted with the form when the checkbox is unchecked.
+     * By default, unchecked checkboxes do not submit any value, matching native checkbox behavior.
+     */
+    uncheckedValue?: string | undefined;
+    /**
+     * The value of the selected checkbox.
+     */
+    value?: string | undefined;
+}
+
+declare interface CheckboxRootState extends FieldRootState {
+    /**
+     * Whether the checkbox is currently ticked.
+     */
+    checked: boolean;
+    /**
+     * Whether the component should ignore user interaction.
+     */
+    disabled: boolean;
+    /**
+     * Whether the user should be unable to tick or untick the checkbox.
+     */
+    readOnly: boolean;
+    /**
+     * Whether the user must tick the checkbox before submitting a form.
+     */
+    required: boolean;
+    /**
+     * Whether the checkbox is in a mixed state: neither ticked, nor unticked.
+     */
+    indeterminate: boolean;
+}
+
+declare const chipRemovePress: "chip-remove-press";
+
+declare const clearPress: "clear-press";
+
+declare const closePress: "close-press";
+
+declare const closeWatcher: "close-watcher";
+
+/**
+ * Shape of the render prop: a function that takes props to be spread on the element and component's state and returns a React element.
+ *
+ * @template Props Props to be spread on the rendered element.
+ * @template State Component's internal state.
+ */
+declare type ComponentRenderFn<Props, State> = (props: Props, state: State) => React_2.ReactElement<unknown>;
+
+declare const decrementPress: "decrement-press";
+
+declare const disabled: "disabled";
+
+declare const drag: "drag";
+
+declare const escapeKey: "escape-key";
+
+declare interface FieldRootState {
+    /**
+     * Whether the component should ignore user interaction.
+     */
+    disabled: boolean;
+    /**
+     * Whether the field has been touched.
+     */
+    touched: boolean;
+    /**
+     * Whether the field value has changed from its initial value.
+     */
+    dirty: boolean;
+    /**
+     * Whether the field is valid.
+     */
+    valid: boolean | null;
+    /**
+     * Whether the field has a value.
+     */
+    filled: boolean;
+    /**
+     * Whether the field is focused.
+     */
+    focused: boolean;
+}
+
+declare const focusOut: "focus-out";
+
+declare type HTMLProps<T = any> = React_2.HTMLAttributes<T> & {
+    ref?: React_2.Ref<T> | undefined;
+};
+
+declare const imperativeAction: "imperative-action";
+
+declare const incrementPress: "increment-press";
+
+declare const initial: "initial";
+
+declare const inputBlur: "input-blur";
+
+declare const inputChange: "input-change";
+
+declare const inputClear: "input-clear";
+
+declare const inputPaste: "input-paste";
+
+declare const inputPress: "input-press";
+
+declare const itemPress: "item-press";
+
+declare const keyboard: "keyboard";
+
+declare const linkPress: "link-press";
+
+declare const listNavigation: "list-navigation";
+
+declare const missing: "missing";
+
+declare const none: "none";
+
+declare interface NonNativeButtonProps {
+    /**
+     * Whether the component renders a native `<button>` element when replacing it
+     * via the `render` prop.
+     * Set to `true` if the rendered element is a native button.
+     * @default false
+     */
+    nativeButton?: boolean | undefined;
+}
+
+declare const outsidePress: "outside-press";
+
+declare const pointer: "pointer";
+
+declare namespace REASONS {
+    export {
+        none,
+        triggerPress,
+        triggerHover,
+        triggerFocus,
+        outsidePress,
+        itemPress,
+        closePress,
+        linkPress,
+        clearPress,
+        chipRemovePress,
+        trackPress,
+        incrementPress,
+        decrementPress,
+        inputChange,
+        inputClear,
+        inputBlur,
+        inputPaste,
+        inputPress,
+        focusOut,
+        escapeKey,
+        closeWatcher,
+        listNavigation,
+        keyboard,
+        pointer,
+        drag,
+        wheel,
+        scrub,
+        cancelOpen,
+        siblingOpen,
+        disabled,
+        missing,
+        initial,
+        imperativeAction,
+        swipe,
+        windowResize
+    }
+}
+
+/**
+ * Maps a change `reason` string to the corresponding native event type.
+ */
+declare type ReasonToEvent<Reason extends string> = Reason extends keyof ReasonToEventMap ? ReasonToEventMap[Reason] : Event;
+
+declare interface ReasonToEventMap {
+    [REASONS.none]: Event;
+    [REASONS.triggerPress]: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent;
+    [REASONS.triggerHover]: MouseEvent;
+    [REASONS.triggerFocus]: FocusEvent;
+    [REASONS.outsidePress]: MouseEvent | PointerEvent | TouchEvent;
+    [REASONS.itemPress]: MouseEvent | KeyboardEvent | PointerEvent;
+    [REASONS.closePress]: MouseEvent | KeyboardEvent | PointerEvent;
+    [REASONS.linkPress]: MouseEvent | PointerEvent;
+    [REASONS.clearPress]: PointerEvent | MouseEvent | KeyboardEvent;
+    [REASONS.chipRemovePress]: PointerEvent | MouseEvent | KeyboardEvent;
+    [REASONS.trackPress]: PointerEvent | MouseEvent | TouchEvent;
+    [REASONS.incrementPress]: PointerEvent | MouseEvent | TouchEvent;
+    [REASONS.decrementPress]: PointerEvent | MouseEvent | TouchEvent;
+    [REASONS.inputChange]: InputEvent | Event;
+    [REASONS.inputClear]: InputEvent | FocusEvent | Event;
+    [REASONS.inputBlur]: FocusEvent;
+    [REASONS.inputPaste]: ClipboardEvent;
+    [REASONS.inputPress]: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent;
+    [REASONS.focusOut]: FocusEvent | KeyboardEvent;
+    [REASONS.escapeKey]: KeyboardEvent;
+    [REASONS.closeWatcher]: Event;
+    [REASONS.listNavigation]: KeyboardEvent;
+    [REASONS.keyboard]: KeyboardEvent;
+    [REASONS.pointer]: PointerEvent;
+    [REASONS.drag]: PointerEvent | TouchEvent;
+    [REASONS.swipe]: PointerEvent | TouchEvent;
+    [REASONS.wheel]: WheelEvent;
+    [REASONS.scrub]: PointerEvent;
+    [REASONS.cancelOpen]: MouseEvent;
+    [REASONS.siblingOpen]: Event;
+    [REASONS.disabled]: Event;
+    [REASONS.missing]: Event;
+    [REASONS.initial]: Event;
+    [REASONS.imperativeAction]: Event;
+    [REASONS.windowResize]: UIEvent;
+}
+
+declare type RootProps = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Checkbox.Root>> & {
+    size?: number;
+};
+
+declare const scrub: "scrub";
+
+declare const siblingOpen: "sibling-open";
+
+declare const swipe: "swipe";
+
+declare const trackPress: "track-press";
+
+declare type TransitionStatus = 'starting' | 'ending' | 'idle' | undefined;
+
+declare const triggerFocus: "trigger-focus";
+
+declare const triggerHover: "trigger-hover";
+
+declare const triggerPress: "trigger-press";
+
+declare const wheel: "wheel";
+
+declare const windowResize: "window-resize";
+
+/**
+ * Adds a `preventBaseUIHandler` method to all event handlers.
+ */
+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/CheckboxField/index.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { CheckboxSize, Checkbox } from "../Checkbox/index.js";
+import { Field } from "../Field/index.js";
+import { toCssLength } from "../8027.js";
+import * as __rspack_external_react from "react";
+const CheckboxField_module = {
+    option: "option-o8pAcb",
+    root: "root-tqmYsF",
+    indicator: "indicator-_WzHbq",
+    optionContent: "optionContent-inaJL9",
+    optionLabel: "optionLabel-fJWxkM",
+    optionSuffix: "optionSuffix-AJytXe"
+};
+const CheckboxField = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, style, label, suffix, variant = 'default', error = false, errorMessage, verticalAlignment = 'center', size = CheckboxSize.medium, width, indeterminate = false, disabled = false, ...props }, ref)=>{
+    const isError = error || Boolean(errorMessage);
+    const optionWidth = toCssLength(width);
+    const optionStyle = {
+        ...style,
+        ...optionWidth ? {
+            '--checkbox-option-width': optionWidth
+        } : null
+    };
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        ref: ref,
+        className: clsx(CheckboxField_module.option, className),
+        style: optionStyle,
+        invalid: isError,
+        disabled: disabled,
+        "data-variant": variant,
+        "data-has-error-message": errorMessage ? '' : void 0,
+        children: [
+            /*#__PURE__*/ jsxs(Checkbox.Root, {
+                ...props,
+                className: CheckboxField_module.root,
+                indeterminate: indeterminate,
+                disabled: disabled,
+                "data-variant": variant,
+                "data-vertical-alignment": verticalAlignment,
+                render: /*#__PURE__*/ jsx("label", {}),
+                size: size,
+                children: [
+                    /*#__PURE__*/ jsx(Checkbox.Indicator, {
+                        className: CheckboxField_module.indicator
+                    }),
+                    /*#__PURE__*/ jsxs("span", {
+                        className: CheckboxField_module.optionContent,
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: CheckboxField_module.optionLabel,
+                                children: label
+                            }),
+                            suffix ? /*#__PURE__*/ jsx("span", {
+                                className: CheckboxField_module.optionSuffix,
+                                children: suffix
+                            }) : null
+                        ]
+                    })
+                ]
+            }),
+            isError && errorMessage ? /*#__PURE__*/ jsx(Field.Error, {
+                match: true,
+                children: errorMessage
+            }) : null
+        ]
+    });
+});
+CheckboxField.displayName = 'CheckboxField';
+export { CheckboxField };

package/dist/CheckboxGroup/index.js

@@ -1,5 +1,4 @@
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
 import { useBaseUiId } from "../6046.js";
 import { useStableCallback } from "../7541.js";
 import { useLabelableContext, useFieldRootContext, fieldValidityMapping } from "../1477.js";
@@ -165,12 +164,8 @@ const CheckboxGroup_CheckboxGroup = /*#__PURE__*/ __rspack_external_react.forwar
     });
 });
 if ("production" !== process.env.NODE_ENV) CheckboxGroup_CheckboxGroup.displayName = "CheckboxGroup";
-const CheckboxGroup_module = {
-    root: "root-ZCRH6j"
-};
-const CheckboxGroup_CheckboxGroup_CheckboxGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(CheckboxGroup_CheckboxGroup, {
+const CheckboxGroup_CheckboxGroup_CheckboxGroup = /*#__PURE__*/ __rspack_external_react.forwardRef((props, ref)=>/*#__PURE__*/ jsx(CheckboxGroup_CheckboxGroup, {
         ref: ref,
-        className: clsx(CheckboxGroup_module.root, className),
         ...props
     }));
 export { CheckboxGroup_CheckboxGroup_CheckboxGroup as CheckboxGroup };

package/dist/CheckboxGroupField/index.css

@@ -0,0 +1,60 @@
+.field-Tx5eMP {
+  --checkbox-group-width: auto;
+  box-sizing: border-box;
+  width: var(--checkbox-group-width);
+  max-width: 100%;
+  color: var(--wst-paragraph-2-color, black);
+  display: inline-flex;
+}
+
+.field-Tx5eMP[data-fluid] {
+  width: 100%;
+  display: flex;
+}
+
+.label-E_rDm0 {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-paragraph-2-color, black);
+}
+
+.field-Tx5eMP[data-disabled] .label-E_rDm0 {
+  color: var(--wst-system-disabled-color, #939393);
+}
+
+.items-lFFDGE {
+  box-sizing: border-box;
+  max-width: 100%;
+  display: flex;
+}
+
+.items-lFFDGE[data-layout="vertical"] {
+  flex-direction: column;
+  gap: 12px;
+}
+
+.items-lFFDGE[data-layout="vertical"]:not([data-fluid]) > * {
+  max-width: 328px;
+}
+
+.items-lFFDGE[data-layout="horizontal"] {
+  flex-flow: wrap;
+  gap: 12px 30px;
+}
+
+.items-lFFDGE[data-layout="horizontal"] > * {
+  flex: 0 auto;
+  width: auto;
+}
+
+.items-lFFDGE[data-layout="horizontal"]:not([data-fluid]) {
+  max-width: 990px;
+}
+
+.items-lFFDGE[data-layout="horizontal"]:not([data-fluid]) > * {
+  max-width: 300px;
+}
+
+.items-lFFDGE[data-fluid] > * {
+  width: 100%;
+}
+

package/dist/CheckboxGroupField/index.d.ts

@@ -0,0 +1,37 @@
+import { CheckboxGroupProps } from '@base-ui/react/checkbox-group';
+import * as React_2 from 'react';
+
+declare type BaseProps = React_2.ComponentPropsWithoutRef<typeof CheckboxGroup>;
+
+declare const CheckboxGroup: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<CheckboxGroupProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    className?: string | undefined;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
+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, '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;
+}
+
+declare type WithStringClassName<P> = Omit<P, 'className'> & {
+    className?: string;
+};
+
+export { }

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

@@ -1149,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> = {
     /**
@@ -1312,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>>;
@@ -1334,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.
@@ -1517,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;
 };
 
@@ -8734,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;
 };
 
@@ -11599,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.109.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": "5921866bf296b91546f45790116e4a0e544eb65d57c1c94ad19e9f2e"
+  "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;
-}
-