@wix/editor-react-components 1.2326.0 → 1.2328.0

package/dist/site/components/AccordionComponent/component.js

@@ -8,7 +8,7 @@ import { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";
 import { a as requireEq, d as requireIsFunction, r as requireIsObject, e as requireIsLength, c as require_isIndex, b as requireIsArrayLike } from "../chunks/isArrayLike.js";
 import { c as require_root, r as require_Symbol, a as require_baseGetTag, b as requireIsObjectLike, d as require_freeGlobal } from "../chunks/isObjectLike.js";
 import { r as requireIsArray } from "../chunks/isArray.js";
-import { D as DEFAULT_PROPS } from "../chunks/constants37.js";
+import { D as DEFAULT_PROPS } from "../chunks/constants38.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 var _overArg;
 var hasRequired_overArg;

package/dist/site/components/AccordionComponent/manifest.js

@@ -1,5 +1,5 @@
 import { C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, L as LAYOUT, c as ContainerType, a as ACTIONS, E as ELEMENTS, N as NativeStateType, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
-import { a as DesignStates, b as DISPLAY_NAMES, c as accordionManifestDefaults, C as CONTAINER_INITIAL_HEIGHT } from "../chunks/constants37.js";
+import { a as DesignStates, b as DISPLAY_NAMES, c as accordionManifestDefaults, C as CONTAINER_INITIAL_HEIGHT } from "../chunks/constants38.js";
 import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";

package/dist/site/components/AudioPlayer/component.js

@@ -7,7 +7,7 @@ import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import Image3 from "../Image3/component.js";
-import { A as ARIA_LABELS, s as selectors, d as dataDefaults } from "../chunks/constants36.js";
+import { A as ARIA_LABELS, s as selectors, d as dataDefaults } from "../chunks/constants37.js";
 import { c as commonjsGlobal } from "../chunks/_commonjsHelpers.js";
 import { g as $cbf007e418543821$export$b0d6fa1ab32e3295, h as $cbf007e418543821$export$16a4697467175487, a as $1dfb119a85e764e5$export$cc77c4ff7e8673c5, c as $240e9101ba2842f5$export$7d15b64cf5a3a4c4, i as $240e9101ba2842f5$export$cb6e0bb50bc19463, $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../chunks/Button.js";
 import { b as $64fa3d84918910a7$export$29f1550f4b0d4415, d as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, f as $64fa3d84918910a7$export$4d86445c2cf5e3, g as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, h as $64fa3d84918910a7$export$2881499e37b75b9a, c as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../chunks/filterDOMProps.js";

package/dist/site/components/AudioPlayer/manifest.js

@@ -1,6 +1,6 @@
 import { b as DISPLAY_GROUPS, N as NativeStateType, C as CSS_PROPERTIES, E as ELEMENTS, D as DATA, I as INTERACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
 import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
-import { D as DesignStates, a as DisplayNames, s as selectors, b as borderDefaultValue } from "../chunks/constants36.js";
+import { D as DesignStates, a as DisplayNames, s as selectors, b as borderDefaultValue } from "../chunks/constants37.js";
 import manifest$1 from "../Image3/manifest.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";

package/dist/site/components/Breadcrumbs/component.js

@@ -6,7 +6,7 @@ import { $ as $cf2482eff2eeeec2$export$f12b703ca79dfbb1 } from "../chunks/useLoc
 import { createPortal } from "react-dom";
 import { f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
-import { s as semanticClassNames } from "../chunks/constants35.js";
+import { s as semanticClassNames } from "../chunks/constants36.js";
 import { A as AnimatedIcon } from "../chunks/AnimatedIcon.js";
 import { useService } from "@wix/services-manager-react";
 import { d as defineService } from "../chunks/index7.js";

package/dist/site/components/Breadcrumbs/manifest.js

@@ -1,7 +1,7 @@
 import { L as LAYOUT, a as ACTIONS, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, E as ELEMENTS, N as NativeStateType, D as DATA, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
 import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
-import { D as DesignStates, a as DisplayNames, h as homepageModeValues, d as defaultStateValues, b as separatorValues, c as componentMetadata, s as semanticClassNames } from "../chunks/constants35.js";
+import { D as DesignStates, a as DisplayNames, h as homepageModeValues, d as defaultStateValues, b as separatorValues, c as componentMetadata, s as semanticClassNames } from "../chunks/constants36.js";
 import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
 const manifest = {
   id: componentMetadata.id,

package/dist/site/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { CheckboxGroupProps } from './CheckboxGroup.types';
+export default function CheckboxGroupComponent(props: CheckboxGroupProps): React.JSX.Element;

package/dist/site/components/CheckboxGroup/CheckboxGroup.types.d.ts

@@ -0,0 +1,24 @@
+import { A11y, Direction } from '@wix/editor-react-types';
+import { SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+import { CheckboxGroupOption } from './constants';
+export type { CheckboxGroupOption } from './constants';
+export type CheckboxGroupProps = SdkFunctionFocusableProps & {
+    id: string;
+    className: string;
+    options: Array<CheckboxGroupOption>;
+    value?: Array<string>;
+    onChange?: (value: Array<string>) => void;
+    label: string;
+    tooltip?: string;
+    displayLabel?: boolean;
+    selectAll?: boolean;
+    selectAllLabel?: string;
+    required?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    direction?: Direction;
+    a11y?: Pick<A11y, 'ariaLabel'>;
+    wix?: {
+        presetsWrapperProps?: Record<string, unknown>;
+    };
+};

package/dist/site/components/CheckboxGroup/component.d.ts

@@ -0,0 +1,2 @@
+import { default as CheckboxGroup } from './CheckboxGroup';
+export default CheckboxGroup;

package/dist/site/components/CheckboxGroup/component.js

@@ -0,0 +1,269 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c as clsx } from "../chunks/clsx.js";
+import { a as Fieldset, T as Tooltip, b as CheckboxGroup_CheckboxGroup_CheckboxGroup, c as Checkbox } from "../chunks/index10.js";
+import * as React from "react";
+import { useService } from "@wix/services-manager-react";
+import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { f as formatClassNames } from "../chunks/classNames.js";
+import { a as getDataAttributes } from "../chunks/dataUtils.js";
+import { d as directionStyles } from "../chunks/direction.module.js";
+import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
+import { d as defaultValues, a as defaultOptions, s as selectors, T as TestIds, b as semanticClassNames } from "../chunks/constants35.js";
+import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
+const Asterisk = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 7 7", fill: "currentColor", width: size || "7", height: size || "7", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M1.809 7 1 6.397 2.74 3.94 0 3.026l.31-.974L3 2.948V0h1v2.976l2.69-.924.31.975-2.719.934L6 6.397 5.19 7 3.503 4.609 1.809 7Z" }));
+Asterisk.displayName = "Asterisk";
+var Asterisk_default = Asterisk;
+const requiredIndicator = "requiredIndicator__j5mIH";
+const styles$1 = {
+  requiredIndicator
+};
+const RequiredIndicator = ({
+  className,
+  "data-testid": dataTestId
+}) => /* @__PURE__ */ jsx(
+  Asterisk_default,
+  {
+    className: clsx(styles$1.requiredIndicator, className),
+    "data-testid": dataTestId,
+    "aria-hidden": "true",
+    focusable: "false"
+  }
+);
+const root = "root__raraS";
+const fieldset = "fieldset__pDERL";
+const labelRow = "labelRow__CTw2X";
+const groupLabel = "groupLabel__gW0O8";
+const tooltipButton = "tooltipButton__9ySi3";
+const tooltip = "tooltip__xXd2k";
+const group = "group__5et8j";
+const option = "option__mUn-C";
+const control = "control__MMIkR";
+const indicator = "indicator__mDg93";
+const checkmark = "checkmark__YItvi";
+const label = "label__aznPH";
+const styles = {
+  root,
+  fieldset,
+  labelRow,
+  groupLabel,
+  tooltipButton,
+  tooltip,
+  group,
+  option,
+  control,
+  indicator,
+  checkmark,
+  label
+};
+const noop = () => {
+};
+const CheckmarkIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: styles.checkmark,
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsx("path", { d: "M6.667 11.333 3.333 8l1.18-1.18 2.154 2.146 4.82-4.819 1.18 1.187z" })
+  }
+);
+function CheckboxGroupComponent(props) {
+  const environmentService = useService(EnvironmentDefinition);
+  const {
+    id,
+    className = "",
+    label: label2 = defaultValues.label,
+    tooltip: tooltip2 = defaultValues.tooltip,
+    displayLabel = defaultValues.displayLabel,
+    selectAll = defaultValues.selectAll,
+    selectAllLabel = defaultValues.selectAllLabel,
+    required = defaultValues.required,
+    readOnly = defaultValues.readOnly,
+    disabled = defaultValues.disabled,
+    value,
+    direction,
+    a11y,
+    onChange = noop,
+    onFocus = noop,
+    onBlur = noop,
+    wix
+  } = props;
+  const sourceOptions = Array.isArray(props.options) && props.options.length ? props.options : defaultOptions;
+  const options = sourceOptions.filter((option2) => !!option2).map((option2) => ({
+    ...option2,
+    value: typeof option2.value === "string" && option2.value !== "" ? option2.value : option2.label
+  })).filter((option2) => typeof option2.value === "string" && option2.value !== "");
+  const allValues = options.map((option2) => option2.value);
+  const keepKnownOptions = (values) => values.filter((optionValue) => allValues.includes(optionValue));
+  const defaultChecked = options.filter((option2) => option2.checked).map((option2) => option2.value);
+  const valueProps = value !== void 0 ? { value: keepKnownOptions(value) } : { defaultValue: keepKnownOptions(defaultChecked) };
+  const handleValueChange = (next) => {
+    onChange(next);
+  };
+  const hasLegend = displayLabel && !!label2;
+  const showLabelRow = hasLegend || !!tooltip2;
+  const ariaLabel = !hasLegend ? (a11y == null ? void 0 : a11y.ariaLabel) || void 0 : void 0;
+  const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
+  const rootClassName = clsx(
+    className,
+    styles.root,
+    selectors.root,
+    !direction && directionStyles.fallbackDirection
+  );
+  const renderCheckbox = (key, {
+    name,
+    parent,
+    optionDisabled
+  }) => /* @__PURE__ */ jsx(
+    Checkbox.Root,
+    {
+      name,
+      parent,
+      readOnly,
+      disabled: disabled || !!optionDisabled,
+      className: clsx(
+        styles.control,
+        formatClassNames(semanticClassNames.control)
+      ),
+      "data-testid": TestIds.control,
+      children: /* @__PURE__ */ jsx(
+        Checkbox.Indicator,
+        {
+          keepMounted: true,
+          className: clsx(
+            styles.indicator,
+            selectors.indicator,
+            formatClassNames(semanticClassNames.indicator)
+          ),
+          "data-testid": TestIds.indicator,
+          children: /* @__PURE__ */ jsx(CheckmarkIcon, {})
+        }
+      )
+    },
+    key
+  );
+  return /* @__PURE__ */ jsx("div", { className: presetWrapperStyles.presetWrapper, ...presetsWrapperProps, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      ...getDataAttributes(props),
+      className: rootClassName,
+      dir: direction,
+      lang: environmentService.language,
+      "data-testid": TestIds.root,
+      children: /* @__PURE__ */ jsxs(Fieldset.Root, { className: styles.fieldset, children: [
+        showLabelRow && /* @__PURE__ */ jsxs("div", { className: styles.labelRow, children: [
+          hasLegend && /* @__PURE__ */ jsxs(
+            Fieldset.Legend,
+            {
+              className: clsx(
+                styles.groupLabel,
+                selectors.groupLabel,
+                formatClassNames(semanticClassNames.groupLabel)
+              ),
+              "data-testid": TestIds.legend,
+              children: [
+                label2,
+                required && /* @__PURE__ */ jsx(
+                  RequiredIndicator,
+                  {
+                    className: formatClassNames(
+                      semanticClassNames.requiredIndicator
+                    ),
+                    "data-testid": TestIds.requiredIndicator
+                  }
+                )
+              ]
+            }
+          ),
+          tooltip2 && /* @__PURE__ */ jsx(Tooltip.Provider, { delay: 0, children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
+            /* @__PURE__ */ jsx(
+              Tooltip.Trigger,
+              {
+                type: "button",
+                className: styles.tooltipButton,
+                "data-testid": TestIds.tooltipButton,
+                "aria-label": tooltip2,
+                children: /* @__PURE__ */ jsx(InfoCircleSmall_default, { "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { sideOffset: 6, children: /* @__PURE__ */ jsx(Tooltip.Popup, { className: styles.tooltip, children: tooltip2 }) }) })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          CheckboxGroup_CheckboxGroup_CheckboxGroup,
+          {
+            ...valueProps,
+            onValueChange: handleValueChange,
+            allValues,
+            disabled,
+            "aria-required": required || void 0,
+            "aria-label": ariaLabel,
+            className: styles.group,
+            "data-testid": TestIds.group,
+            onFocus,
+            onBlur,
+            children: [
+              selectAll && /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  className: clsx(
+                    styles.option,
+                    formatClassNames(semanticClassNames.option)
+                  ),
+                  "data-testid": TestIds.selectAll,
+                  children: [
+                    renderCheckbox("__select-all__", { parent: true }),
+                    selectAllLabel && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: clsx(
+                          styles.label,
+                          selectors.label,
+                          formatClassNames(semanticClassNames.label)
+                        ),
+                        children: selectAllLabel
+                      }
+                    )
+                  ]
+                }
+              ),
+              options.map((option2, index) => /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  className: clsx(
+                    styles.option,
+                    formatClassNames(semanticClassNames.option)
+                  ),
+                  "data-testid": TestIds.option,
+                  children: [
+                    renderCheckbox(option2.value, {
+                      name: option2.value,
+                      optionDisabled: option2.disabled
+                    }),
+                    option2.label && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: clsx(
+                          styles.label,
+                          selectors.label,
+                          formatClassNames(semanticClassNames.label)
+                        ),
+                        "data-testid": TestIds.optionLabel,
+                        children: option2.label
+                      }
+                    )
+                  ]
+                },
+                option2.value || index
+              ))
+            ]
+          }
+        )
+      ] })
+    }
+  ) });
+}
+export {
+  CheckboxGroupComponent as default
+};

package/dist/site/components/CheckboxGroup/component.preview.d.ts

@@ -0,0 +1,4 @@
+import { ResolveManifestOverrides } from '../../../utils/ResolveManifestOverrides';
+import { default as CheckboxGroup } from './CheckboxGroup';
+export default CheckboxGroup;
+export declare const resolveManifestOverrides: ResolveManifestOverrides;

package/dist/site/components/CheckboxGroup/constants.d.ts

@@ -0,0 +1,112 @@
+export declare const DisplayNames: {
+    root: {
+        elementDisplayName: string;
+        data: {
+            options: string;
+            option: string;
+            optionLabel: string;
+            optionValue: string;
+            optionChecked: string;
+            optionDisabled: string;
+            value: string;
+            label: string;
+            tooltip: string;
+            displayLabel: string;
+            required: string;
+            readOnly: string;
+            disabled: string;
+            selectAll: string;
+            selectAllLabel: string;
+        };
+        cssCustomProperties: {
+            checkboxesSpacing: string;
+            labelSpacing: string;
+            checkboxTextSpacing: string;
+            alignment: string;
+            labelAlignment: string;
+        };
+    };
+    indicator: {
+        elementDisplayName: string;
+        cssCustomProperties: {
+            backgroundColor: string;
+            borderColor: string;
+            borderWidth: string;
+            checkMarkColor: string;
+            size: string;
+        };
+        displayGroups: {
+            borderGroup: string;
+        };
+    };
+    optionLabel: {
+        elementDisplayName: string;
+    };
+    groupLabel: {
+        elementDisplayName: string;
+    };
+};
+export declare const DesignStates: {
+    readonly indicator: {
+        readonly hover: {
+            readonly displayName: "Hover";
+            readonly className: "checkbox-group__indicator--hover";
+        };
+        readonly focus: {
+            readonly displayName: "Focus";
+            readonly className: "checkbox-group__indicator--focus";
+        };
+        readonly disabled: {
+            readonly displayName: "Disabled";
+            readonly className: "checkbox-group__indicator--disabled";
+        };
+        readonly invalid: {
+            readonly displayName: "Invalid";
+            readonly className: "checkbox-group__indicator--invalid";
+        };
+    };
+};
+export type CheckboxGroupOption = {
+    value: string;
+    label: string;
+    checked?: boolean;
+    disabled?: boolean;
+};
+export declare const defaultOptions: ReadonlyArray<CheckboxGroupOption>;
+export declare const defaultValues: {
+    readonly label: "Label";
+    readonly tooltip: "";
+    readonly displayLabel: true;
+    readonly selectAllLabel: "Select all";
+    readonly required: false;
+    readonly readOnly: false;
+    readonly disabled: false;
+    readonly selectAll: false;
+};
+export declare const TestIds: {
+    readonly root: "checkbox-group-root";
+    readonly group: "checkbox-group-group";
+    readonly legend: "checkbox-group-legend";
+    readonly requiredIndicator: "checkbox-group-required-indicator";
+    readonly selectAll: "checkbox-group-select-all";
+    readonly option: "checkbox-group-option";
+    readonly control: "checkbox-group-control";
+    readonly indicator: "checkbox-group-indicator";
+    readonly optionLabel: "checkbox-group-option-label";
+    readonly tooltipButton: "checkbox-group-tooltip-button";
+};
+export declare const selectors: {
+    readonly root: "checkbox-group";
+    readonly indicator: "checkbox-group__indicator";
+    readonly label: "checkbox-group__label";
+    readonly groupLabel: "checkbox-group__group-label";
+};
+export declare const semanticClassNames: {
+    readonly root: "checkbox-group";
+    readonly groupLabel: "checkbox-group__group-label";
+    readonly option: "checkbox-group__option";
+    readonly control: "checkbox-group__control";
+    readonly indicator: "checkbox-group__indicator";
+    readonly label: "checkbox-group__label";
+    readonly requiredIndicator: "checkbox-group__required-indicator";
+};

package/dist/site/components/CheckboxGroup/css.css

@@ -0,0 +1,212 @@
+.requiredIndicator__j5mIH {
+  display: inline-block;
+  width: 0.7em;
+  height: 0.7em;
+  margin-inline-start: 0.4em;
+  vertical-align: baseline;
+  color: inherit;
+}.root__raraS {
+  box-sizing: border-box;
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.fieldset__pDERL {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--labelSpacing, 16px);
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.labelRow__CTw2X {
+  display: inline-flex;
+  align-items: center;
+  align-self: var(--labelAlignment, flex-start);
+  gap: 6px;
+  max-width: 100%;
+}
+
+.groupLabel__gW0O8 {
+  margin: 0;
+  padding: 0;
+}
+
+.fieldset__pDERL .groupLabel__gW0O8 {
+  width: fit-content;
+  max-width: 100%;
+}
+
+.tooltipButton__9ySi3 {
+  flex: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.65;
+}
+.tooltipButton__9ySi3:hover, .tooltipButton__9ySi3:focus-visible {
+  opacity: 1;
+}
+.tooltipButton__9ySi3:focus-visible {
+  outline: none;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px #116dff;
+}
+.tooltipButton__9ySi3 svg {
+  width: 16px;
+  height: 16px;
+}
+
+.tooltip__xXd2k {
+  max-width: 220px;
+  padding: 6px 10px;
+  font: var(--wst-paragraph-2-font, normal normal normal 12px/1.4em madefor-text, sans-serif);
+  color: var(--wst-primary-background-color, #fff);
+  background: var(--wst-paragraph-2-color, #2b2b2b);
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+}
+
+.group__5et8j {
+  display: flex;
+  flex-direction: column;
+  align-items: var(--alignment, flex-start);
+  row-gap: var(--checkboxesSpacing, 6px);
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.option__mUn-C {
+  display: inline-flex;
+  align-items: center;
+  column-gap: var(--checkboxTextSpacing, 13px);
+}
+
+.control__MMIkR {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+.control__MMIkR:hover, .control__MMIkR:focus-within {
+  outline: none;
+}
+.control__MMIkR[data-disabled] {
+  cursor: default;
+  pointer-events: none;
+}
+
+.control__MMIkR:focus-visible .indicator__mDg93,
+.control__MMIkR:has(:focus-visible) .indicator__mDg93,
+.indicator__mDg93.checkbox-group__indicator--focus {
+  outline: 2px solid #116dff;
+  outline-offset: 2px;
+}
+
+.indicator__mDg93 {
+  box-sizing: content-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--checkboxSize, 16px);
+  height: var(--checkboxSize, 16px);
+  border-style: solid;
+  border-color: var(--indicator-border);
+  border-width: var(--borderWidth, 1px);
+  background-color: var(--indicator-bg);
+  transition: background-color 0.2s linear, border-color 0.2s linear;
+  --indicator-bg: var(--backgroundColor, #fff);
+  --indicator-border: var(
+    --borderColor,
+    color-mix(in srgb, #000 60%, transparent)
+  );
+}
+
+.control__MMIkR:hover .indicator__mDg93,
+.control__MMIkR:focus-within .indicator__mDg93,
+.indicator__mDg93.checkbox-group__indicator--hover {
+  --indicator-border: var(--borderColor, #000);
+}
+
+.control__MMIkR[data-checked] .indicator__mDg93,
+.control__MMIkR[data-indeterminate] .indicator__mDg93 {
+  --indicator-bg: var(--backgroundColor, #116dff);
+  --indicator-border: var(--borderColor, var(--backgroundColor, #116dff));
+}
+
+.control__MMIkR[data-disabled] .indicator__mDg93,
+.indicator__mDg93.checkbox-group__indicator--disabled {
+  opacity: 0.55;
+}
+
+.control__MMIkR[data-invalid] .indicator__mDg93,
+.indicator__mDg93.checkbox-group__indicator--invalid {
+  --indicator-border: var(--borderColor, #e62214);
+}
+
+.checkmark__YItvi {
+  width: 70%;
+  height: 70%;
+}
+.checkmark__YItvi path {
+  fill: transparent;
+  transition: fill 0.2s linear;
+}
+
+.control__MMIkR[data-checked] .checkmark__YItvi path {
+  fill: var(--checkmarkColor, #fff);
+}
+
+.control__MMIkR[data-indeterminate] .checkmark__YItvi {
+  display: none;
+}
+
+.control__MMIkR[data-indeterminate] .indicator__mDg93::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 60%;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--checkmarkColor, #fff);
+}
+
+.label__aznPH {
+  cursor: pointer;
+  margin-bottom: 0;
+}.checkbox-group {
+  --checkboxesSpacing: 6px;
+  --labelSpacing: 16px;
+  --checkboxTextSpacing: 13px;
+}
+
+.checkbox-group__indicator {
+  border-radius: 2px;
+}
+.fallbackDirection__HeRgn:not([dir]) {
+  direction: var(--wix-opt-in-direction);
+}
+.presetWrapper__J1yzj {
+  display: contents;
+}