@wix/editor-react-components 1.2745.0 → 1.2747.0

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef } from "react";
 import { c as clsx } from "../chunks/clsx.js";
-import { a as Fieldset, T as Tooltip, c as InfoCircle_default, d as CheckboxGroup_CheckboxGroup_CheckboxGroup, e as Checkbox } from "../chunks/index12.js";
+import { a as Fieldset, T as Tooltip, b as InfoCircle_default, d as CheckboxGroup_CheckboxGroup_CheckboxGroup, e as Checkbox } from "../chunks/index12.js";
 import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as formatClassNames } from "../chunks/classNames.js";

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { c as clsx } from "../chunks/clsx.js";
-import { a as Fieldset, T as Tooltip, R as RadioGroup_RadioGroup_RadioGroup, b as Radio, c as InfoCircle_default } from "../chunks/index12.js";
+import { a as Fieldset, T as Tooltip, R as Radio, b as InfoCircle_default, c as RadioGroup_RadioGroup_RadioGroup } from "../chunks/index12.js";
 import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
@@ -104,6 +104,7 @@ function RadioButtonsComponent(props) {
     }
   };
   const hasLegend = !!label2;
+  const groupLabelId = hasLegend ? `${id}-group-label` : void 0;
   const ariaLabel = (a11y == null ? void 0 : a11y.ariaLabel) || void 0;
   const customAccessibleNameId = hasLegend && ariaLabel ? `${id}-accessible-name` : void 0;
   const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
@@ -122,71 +123,78 @@ function RadioButtonsComponent(props) {
       dir: direction,
       lang: environmentService.language,
       "data-testid": TestIds.root,
-      children: /* @__PURE__ */ jsxs(Fieldset.Root, { className: styles.fieldset, children: [
-        customAccessibleNameId && /* @__PURE__ */ jsx(
-          "span",
-          {
-            id: customAccessibleNameId,
-            className: accessibilityStyles.visuallyHidden,
-            children: ariaLabel
-          }
-        ),
-        (hasLegend || tooltip2) && /* @__PURE__ */ jsxs("div", { className: styles.labelRow, children: [
-          hasLegend && /* @__PURE__ */ jsxs(
-            Fieldset.Legend,
+      children: /* @__PURE__ */ jsxs(
+        Fieldset.Root,
+        {
+          className: styles.fieldset,
+          render: /* @__PURE__ */ jsx(
+            RadioGroup_RadioGroup_RadioGroup,
             {
-              className: clsx(
-                styles.groupLabel,
-                selectors.groupLabel,
-                formatClassNames(semanticClassNames.groupLabel),
-                (_b = elementProps == null ? void 0 : elementProps.groupLabel) == null ? void 0 : _b.className
-              ),
-              "data-testid": TestIds.legend,
-              children: [
-                label2,
-                required && /* @__PURE__ */ jsx(
-                  RequiredIndicator,
-                  {
-                    className: formatClassNames(
-                      semanticClassNames.requiredIndicator
-                    ),
-                    "data-testid": TestIds.requiredIndicator
-                  }
-                )
-              ]
+              ...selectionProps,
+              onValueChange: (value) => handleValueChange(value),
+              disabled,
+              readOnly,
+              "aria-required": required || void 0,
+              "aria-invalid": isInvalid || void 0,
+              "aria-describedby": isInvalid && validity.validationMessage ? errorId : void 0,
+              "aria-label": ariaLabel,
+              "aria-labelledby": customAccessibleNameId ?? groupLabelId,
+              render: /* @__PURE__ */ jsx("fieldset", {}),
+              "data-testid": TestIds.group,
+              onFocus,
+              onBlur: handleBlur
             }
           ),
-          tooltip2 && /* @__PURE__ */ jsx(Tooltip.Provider, { delay: 0, children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
-            /* @__PURE__ */ jsx(
-              Tooltip.Trigger,
+          children: [
+            customAccessibleNameId && /* @__PURE__ */ jsx(
+              "span",
               {
-                type: "button",
-                className: styles.tooltipButton,
-                "data-testid": TestIds.tooltipButton,
-                "aria-label": tooltip2,
-                children: /* @__PURE__ */ jsx(InfoCircleSmall_default, { "aria-hidden": "true" })
+                id: customAccessibleNameId,
+                className: accessibilityStyles.visuallyHidden,
+                children: ariaLabel
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { sideOffset: 6, children: /* @__PURE__ */ jsx(Tooltip.Popup, { className: styles.tooltip, children: tooltip2 }) }) })
-          ] }) })
-        ] }),
-        /* @__PURE__ */ jsx(
-          RadioGroup_RadioGroup_RadioGroup,
-          {
-            ...selectionProps,
-            onValueChange: (value) => handleValueChange(value),
-            disabled,
-            readOnly,
-            "aria-required": required || void 0,
-            "aria-invalid": isInvalid || void 0,
-            "aria-describedby": isInvalid && validity.validationMessage ? errorId : void 0,
-            "aria-label": ariaLabel,
-            "aria-labelledby": customAccessibleNameId,
-            className: styles.group,
-            "data-testid": TestIds.group,
-            onFocus,
-            onBlur: handleBlur,
-            children: options.map((option2, index) => {
+            (hasLegend || tooltip2) && /* @__PURE__ */ jsxs("div", { className: styles.labelRow, children: [
+              hasLegend && /* @__PURE__ */ jsxs(
+                Fieldset.Legend,
+                {
+                  id: groupLabelId,
+                  className: clsx(
+                    styles.groupLabel,
+                    selectors.groupLabel,
+                    formatClassNames(semanticClassNames.groupLabel),
+                    (_b = elementProps == null ? void 0 : elementProps.groupLabel) == null ? void 0 : _b.className
+                  ),
+                  "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__ */ jsx("div", { className: styles.group, children: options.map((option2, index) => {
               var _a2, _b2;
               return /* @__PURE__ */ jsxs(
                 "label",
@@ -242,25 +250,25 @@ function RadioButtonsComponent(props) {
                 },
                 option2.value || index
               );
-            })
-          }
-        ),
-        isInvalid && validity.validationMessage && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            id: errorId,
-            className: clsx(
-              styles.errorMessage,
-              formatClassNames(semanticClassNames.errorMessage)
-            ),
-            "data-testid": TestIds.errorMessage,
-            children: [
-              /* @__PURE__ */ jsx(InfoCircle_default, { "aria-hidden": "true" }),
-              validity.validationMessage
-            ]
-          }
-        )
-      ] })
+            }) }),
+            isInvalid && validity.validationMessage && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                id: errorId,
+                className: clsx(
+                  styles.errorMessage,
+                  formatClassNames(semanticClassNames.errorMessage)
+                ),
+                "data-testid": TestIds.errorMessage,
+                children: [
+                  /* @__PURE__ */ jsx(InfoCircle_default, { "aria-hidden": "true" }),
+                  validity.validationMessage
+                ]
+              }
+            )
+          ]
+        }
+      )
     }
   ) });
 }

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

@@ -177,10 +177,8 @@ function getFilterValue(key, value, overrides) {
       light: "duotoneLight" in overrides && overrides.duotoneLight || value.light,
       dark: "duotoneDark" in overrides && overrides.duotoneDark || value.dark
     };
-  } else if (key in overrides) {
-    return overrides[key];
   }
-  return value;
+  return overrides[key] ?? value;
 }
 function interpolate(id, filterDefinition, overrides, attrs) {
   const content = filterDefinition.map((effect) => {

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

@@ -63,6 +63,7 @@ const manifest = {
     },
     data: {
       filterEffectRecolorVideo: {
+        description: "Must be true for the effectType color filter to show; false shows the original colors.",
         displayName: "Filter Effect Recolor",
         dataType: DATA.DATA_TYPE.booleanValue,
         defaultValue: false

package/dist/site/components/VideoUpload/css.css

@@ -336,6 +336,7 @@
     stroke-dashoffset: -124;
   }
 }.root__UidXn {
+  --maskImage: initial;
   --boxShadow: initial;
   --border-color: black;
   --border-width: initial;
@@ -363,6 +364,13 @@
   box-sizing: border-box;
 }
 
+.videoContainer__y-jQ5 {
+  mask-image: var(--maskImage, none);
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+  mask-position: center;
+}
+
 .videoPlayerContainer__GA-EV {
   box-shadow: var(--boxShadow, none);
   border-color: var(--border-color, transparent);

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

@@ -1,4 +1,4 @@
-import { a as ACTIONS, D as DATA, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, I as INTERACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
+import { a as ACTIONS, D as DATA, C as CSS_PROPERTIES, M as MEDIA, b as DISPLAY_GROUPS, I as INTERACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
 const manifest = {
   id: "8441a520-52ed-4c32-9b9d-0aa8c2604b01",
   type: "wixEditorElements.VideoUpload",
@@ -79,6 +79,14 @@ const manifest = {
       }
     },
     cssCustomProperties: {
+      maskImage: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.maskImage,
+        defaultValue: "none",
+        maskImage: {
+          vectorArtCategory: MEDIA.VECTOR_ART_CATEGORY.SHAPE_LOCATION,
+          imageTypes: [CSS_PROPERTIES.IMAGE_TYPE.url]
+        }
+      },
       boxShadow: {
         cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.boxShadow,
         defaultValue: "none"

package/dist/site/components/chunks/index12.js

@@ -31183,11 +31183,11 @@ export {
   Combobox as C,
   Field as F,
   Input_Input_Input as I,
-  RadioGroup_RadioGroup_RadioGroup as R,
+  Radio as R,
   Tooltip as T,
   Fieldset as a,
-  Radio as b,
-  InfoCircle_default as c,
+  InfoCircle_default as b,
+  RadioGroup_RadioGroup_RadioGroup as c,
   CheckboxGroup_CheckboxGroup_CheckboxGroup as d,
   Checkbox as e
 };

package/dist/site/components/mask-presets.cjs

@@ -0,0 +1,286 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var presetCatalog_exports = {};
+__export(presetCatalog_exports, {
+  MASK_PRESET_CLEAR_ID: () => MASK_PRESET_CLEAR_ID,
+  MASK_PRESET_UPLOAD_ID: () => MASK_PRESET_UPLOAD_ID,
+  builtInMaskPresets: () => builtInMaskPresets,
+  maskPresetCatalog: () => maskPresetCatalog,
+  safeMaskPresetIds: () => safeMaskPresetIds
+});
+module.exports = __toCommonJS(presetCatalog_exports);
+const MASK_PRESET_CLEAR_ID = "clear";
+const MASK_PRESET_UPLOAD_ID = "upload";
+const safeMaskPresetIds = [
+  "preset-26",
+  // Pebble A
+  "preset-22",
+  // Tile Grid
+  "preset-29",
+  // Pinched Square
+  "preset-8",
+  // Notched Block
+  "preset-11",
+  // Ellipse Slices
+  "preset-41",
+  // Scanline Squircle
+  "preset-33",
+  // Pixel Scatter
+  "preset-1",
+  // Circle
+  "preset-2"
+  // Arch
+];
+const PRESET_SHAPES = [
+  {
+    id: "preset-1",
+    shapeUri: "417ddd_00f94d35a8f84b959241a5d4293ee772.svg",
+    label: "Circle"
+  },
+  {
+    id: "preset-2",
+    shapeUri: "417ddd_3d6ddf28b43e45499ea8557b8d963c79.svg",
+    label: "Arch"
+  },
+  {
+    id: "preset-3",
+    shapeUri: "417ddd_c4e65c20d3844ffd97c9b2551ce7d269.svg",
+    label: "Heptagon"
+  },
+  {
+    id: "preset-4",
+    shapeUri: "417ddd_c294e9b039624dfea42fe295339ee9aa.svg",
+    label: "Cut Corners"
+  },
+  {
+    id: "preset-5",
+    shapeUri: "417ddd_41fc44e9075a4e269bfe6e6f12d1caa4.svg",
+    label: "Splat"
+  },
+  {
+    id: "preset-6",
+    shapeUri: "417ddd_22bf952b30c84fbd838b01399e4d363f.svg",
+    label: "Cloud Flower"
+  },
+  {
+    id: "preset-7",
+    shapeUri: "417ddd_a4e6448c5d144c8888fb7bc4b07ef160.svg",
+    label: "Burst"
+  },
+  {
+    id: "preset-8",
+    shapeUri: "417ddd_d3fda4cc71b64116a59d3a68df598bab.svg",
+    label: "Notched Block"
+  },
+  {
+    id: "preset-9",
+    shapeUri: "417ddd_67e5a948b54646ad94d5cfe512bef2ec.svg",
+    label: "Explosion"
+  },
+  {
+    id: "preset-10",
+    shapeUri: "417ddd_2db4918ba64042bdb8ee489c8aeaa0f5.svg",
+    label: "Twin Arches"
+  },
+  {
+    id: "preset-11",
+    shapeUri: "417ddd_5358f38c9acf4445a18213e7e4026440.svg",
+    label: "Ellipse Slices"
+  },
+  {
+    id: "preset-12",
+    shapeUri: "417ddd_baba4105d5f74c9b92687c46f3c25547.svg",
+    label: "Bowtie Arches"
+  },
+  {
+    id: "preset-13",
+    shapeUri: "417ddd_afb67cc936294377b797ad58eb9e2732.svg",
+    label: "Sparkle Rounded"
+  },
+  {
+    id: "preset-14",
+    shapeUri: "417ddd_bceedaf6180e4a2fbc2962431557915b.svg",
+    label: "Brush Swirl"
+  },
+  {
+    id: "preset-15",
+    shapeUri: "417ddd_ecc8d1d82e354afd830f3d0b64154767.svg",
+    label: "Brush Scatter"
+  },
+  {
+    id: "preset-16",
+    shapeUri: "417ddd_ea7b2c520c0b4d5b8ca201eb2b9fdd39.svg",
+    label: "Brush Blob"
+  },
+  {
+    id: "preset-17",
+    shapeUri: "417ddd_dc1ec3f79b2f4fe5b86497eb19454a38.svg",
+    label: "Rough Rock A"
+  },
+  {
+    id: "preset-18",
+    shapeUri: "417ddd_5e19c3659643489b88e12db71e37d589.svg",
+    label: "Rough Rock B"
+  },
+  {
+    id: "preset-19",
+    shapeUri: "417ddd_d89b6776c98042928e6ea0507e9560ab.svg",
+    label: "Rough Rock C"
+  },
+  {
+    id: "preset-20",
+    shapeUri: "417ddd_b05ceb2c9b7f43838c4307c03ee06145.svg",
+    label: "Checker Diamonds"
+  },
+  {
+    id: "preset-21",
+    shapeUri: "417ddd_90e28735cfd54ba1b561a58e02d89a31.svg",
+    label: "Quatrefoil Dots"
+  },
+  {
+    id: "preset-22",
+    shapeUri: "417ddd_88a9b0886325450aa9162edcc090da06.svg",
+    label: "Tile Grid"
+  },
+  {
+    id: "preset-23",
+    shapeUri: "417ddd_14a3e15604fa4d589db43de0eebc9f97.svg",
+    label: "Leaf Drop"
+  },
+  {
+    id: "preset-24",
+    shapeUri: "417ddd_c6ae63be3c53476f86264b7ca2bcd644.svg",
+    label: "Horse"
+  },
+  {
+    id: "preset-25",
+    shapeUri: "417ddd_a4510a7999a04ab69eeae575a81ae2f8.svg",
+    label: "Slashed Leaf"
+  },
+  {
+    id: "preset-26",
+    shapeUri: "417ddd_484eacf7f40b4f758b416a97e1e920e1.svg",
+    label: "Pebble A"
+  },
+  {
+    id: "preset-27",
+    shapeUri: "417ddd_8be6e0becc044a01b2ef43359a7d4125.svg",
+    label: "Pebble B"
+  },
+  {
+    id: "preset-28",
+    shapeUri: "417ddd_f8aaf3bed8574e76ac3d1a1aa7deb3bc.svg",
+    label: "Pebble C"
+  },
+  {
+    id: "preset-29",
+    shapeUri: "417ddd_0177915bb2f34218866d13535b32ec71.svg",
+    label: "Pinched Square"
+  },
+  {
+    id: "preset-30",
+    shapeUri: "417ddd_41173ac915f248a19fefc8348177c395.svg",
+    label: "Slanted Corner"
+  },
+  {
+    id: "preset-31",
+    shapeUri: "417ddd_63e54c886aab41feb751d0bfa25c6b11.svg",
+    label: "Offset Squares"
+  },
+  {
+    id: "preset-32",
+    shapeUri: "417ddd_095a703ff056498ab0492d14d3d7675b.svg",
+    label: "Dot Scatter"
+  },
+  {
+    id: "preset-33",
+    shapeUri: "417ddd_ffab6ea4463e4b97b86fe19b33da8ec6.svg",
+    label: "Pixel Scatter"
+  },
+  {
+    id: "preset-34",
+    shapeUri: "417ddd_859d4e478cfe491b8ea77d0b27ae3775.svg",
+    label: "Dash Lines"
+  },
+  {
+    id: "preset-35",
+    shapeUri: "417ddd_c2ca04bfcd11488db7176a8265e1d9ae.svg",
+    label: "Zigzag Slash"
+  },
+  {
+    id: "preset-36",
+    shapeUri: "417ddd_292facf173a64321af917ae8eac90110.svg",
+    label: "Star Notch"
+  },
+  {
+    id: "preset-37",
+    shapeUri: "417ddd_dcaa2647695a4738a200f3f984e045d1.svg",
+    label: "Ribbon Wave"
+  },
+  {
+    id: "preset-38",
+    shapeUri: "417ddd_ad09ab69bb8b4734aaef5e3388a9d599.svg",
+    label: "Speech Bubble"
+  },
+  {
+    id: "preset-39",
+    shapeUri: "417ddd_509553d69ebd4b588feee44a42901fe9.svg",
+    label: "Ornate Badge"
+  },
+  {
+    id: "preset-40",
+    shapeUri: "417ddd_702afa88c9554731a2384ac446f4bee3.svg",
+    label: "Heart Bubble"
+  },
+  {
+    id: "preset-41",
+    shapeUri: "417ddd_c4e3cd986a3045e4b23601779de2f0f3.svg",
+    label: "Scanline Squircle"
+  },
+  {
+    id: "preset-42",
+    shapeUri: "417ddd_34cd438ff0324ac885bfecc1d3bebcfe.svg",
+    label: "Fade Circle"
+  },
+  {
+    id: "preset-43",
+    shapeUri: "417ddd_8baabe8dfce3464a84fb6708ef08b16f.svg",
+    label: "Fade Blob"
+  }
+];
+const builtInMaskPresets = PRESET_SHAPES.map(
+  ({ id, shapeUri, label }) => ({
+    id,
+    kind: "preset",
+    label,
+    shapeUri
+  })
+);
+const maskPresetCatalog = [
+  {
+    id: MASK_PRESET_CLEAR_ID,
+    kind: "clear",
+    label: "Clear selection"
+  },
+  {
+    id: MASK_PRESET_UPLOAD_ID,
+    kind: "upload",
+    label: "Choose a shape"
+  },
+  ...builtInMaskPresets
+];

package/dist/site/components/mask-presets.js

@@ -0,0 +1,267 @@
+const MASK_PRESET_CLEAR_ID = "clear";
+const MASK_PRESET_UPLOAD_ID = "upload";
+const safeMaskPresetIds = [
+  "preset-26",
+  // Pebble A
+  "preset-22",
+  // Tile Grid
+  "preset-29",
+  // Pinched Square
+  "preset-8",
+  // Notched Block
+  "preset-11",
+  // Ellipse Slices
+  "preset-41",
+  // Scanline Squircle
+  "preset-33",
+  // Pixel Scatter
+  "preset-1",
+  // Circle
+  "preset-2"
+  // Arch
+];
+const PRESET_SHAPES = [
+  {
+    id: "preset-1",
+    shapeUri: "417ddd_00f94d35a8f84b959241a5d4293ee772.svg",
+    label: "Circle"
+  },
+  {
+    id: "preset-2",
+    shapeUri: "417ddd_3d6ddf28b43e45499ea8557b8d963c79.svg",
+    label: "Arch"
+  },
+  {
+    id: "preset-3",
+    shapeUri: "417ddd_c4e65c20d3844ffd97c9b2551ce7d269.svg",
+    label: "Heptagon"
+  },
+  {
+    id: "preset-4",
+    shapeUri: "417ddd_c294e9b039624dfea42fe295339ee9aa.svg",
+    label: "Cut Corners"
+  },
+  {
+    id: "preset-5",
+    shapeUri: "417ddd_41fc44e9075a4e269bfe6e6f12d1caa4.svg",
+    label: "Splat"
+  },
+  {
+    id: "preset-6",
+    shapeUri: "417ddd_22bf952b30c84fbd838b01399e4d363f.svg",
+    label: "Cloud Flower"
+  },
+  {
+    id: "preset-7",
+    shapeUri: "417ddd_a4e6448c5d144c8888fb7bc4b07ef160.svg",
+    label: "Burst"
+  },
+  {
+    id: "preset-8",
+    shapeUri: "417ddd_d3fda4cc71b64116a59d3a68df598bab.svg",
+    label: "Notched Block"
+  },
+  {
+    id: "preset-9",
+    shapeUri: "417ddd_67e5a948b54646ad94d5cfe512bef2ec.svg",
+    label: "Explosion"
+  },
+  {
+    id: "preset-10",
+    shapeUri: "417ddd_2db4918ba64042bdb8ee489c8aeaa0f5.svg",
+    label: "Twin Arches"
+  },
+  {
+    id: "preset-11",
+    shapeUri: "417ddd_5358f38c9acf4445a18213e7e4026440.svg",
+    label: "Ellipse Slices"
+  },
+  {
+    id: "preset-12",
+    shapeUri: "417ddd_baba4105d5f74c9b92687c46f3c25547.svg",
+    label: "Bowtie Arches"
+  },
+  {
+    id: "preset-13",
+    shapeUri: "417ddd_afb67cc936294377b797ad58eb9e2732.svg",
+    label: "Sparkle Rounded"
+  },
+  {
+    id: "preset-14",
+    shapeUri: "417ddd_bceedaf6180e4a2fbc2962431557915b.svg",
+    label: "Brush Swirl"
+  },
+  {
+    id: "preset-15",
+    shapeUri: "417ddd_ecc8d1d82e354afd830f3d0b64154767.svg",
+    label: "Brush Scatter"
+  },
+  {
+    id: "preset-16",
+    shapeUri: "417ddd_ea7b2c520c0b4d5b8ca201eb2b9fdd39.svg",
+    label: "Brush Blob"
+  },
+  {
+    id: "preset-17",
+    shapeUri: "417ddd_dc1ec3f79b2f4fe5b86497eb19454a38.svg",
+    label: "Rough Rock A"
+  },
+  {
+    id: "preset-18",
+    shapeUri: "417ddd_5e19c3659643489b88e12db71e37d589.svg",
+    label: "Rough Rock B"
+  },
+  {
+    id: "preset-19",
+    shapeUri: "417ddd_d89b6776c98042928e6ea0507e9560ab.svg",
+    label: "Rough Rock C"
+  },
+  {
+    id: "preset-20",
+    shapeUri: "417ddd_b05ceb2c9b7f43838c4307c03ee06145.svg",
+    label: "Checker Diamonds"
+  },
+  {
+    id: "preset-21",
+    shapeUri: "417ddd_90e28735cfd54ba1b561a58e02d89a31.svg",
+    label: "Quatrefoil Dots"
+  },
+  {
+    id: "preset-22",
+    shapeUri: "417ddd_88a9b0886325450aa9162edcc090da06.svg",
+    label: "Tile Grid"
+  },
+  {
+    id: "preset-23",
+    shapeUri: "417ddd_14a3e15604fa4d589db43de0eebc9f97.svg",
+    label: "Leaf Drop"
+  },
+  {
+    id: "preset-24",
+    shapeUri: "417ddd_c6ae63be3c53476f86264b7ca2bcd644.svg",
+    label: "Horse"
+  },
+  {
+    id: "preset-25",
+    shapeUri: "417ddd_a4510a7999a04ab69eeae575a81ae2f8.svg",
+    label: "Slashed Leaf"
+  },
+  {
+    id: "preset-26",
+    shapeUri: "417ddd_484eacf7f40b4f758b416a97e1e920e1.svg",
+    label: "Pebble A"
+  },
+  {
+    id: "preset-27",
+    shapeUri: "417ddd_8be6e0becc044a01b2ef43359a7d4125.svg",
+    label: "Pebble B"
+  },
+  {
+    id: "preset-28",
+    shapeUri: "417ddd_f8aaf3bed8574e76ac3d1a1aa7deb3bc.svg",
+    label: "Pebble C"
+  },
+  {
+    id: "preset-29",
+    shapeUri: "417ddd_0177915bb2f34218866d13535b32ec71.svg",
+    label: "Pinched Square"
+  },
+  {
+    id: "preset-30",
+    shapeUri: "417ddd_41173ac915f248a19fefc8348177c395.svg",
+    label: "Slanted Corner"
+  },
+  {
+    id: "preset-31",
+    shapeUri: "417ddd_63e54c886aab41feb751d0bfa25c6b11.svg",
+    label: "Offset Squares"
+  },
+  {
+    id: "preset-32",
+    shapeUri: "417ddd_095a703ff056498ab0492d14d3d7675b.svg",
+    label: "Dot Scatter"
+  },
+  {
+    id: "preset-33",
+    shapeUri: "417ddd_ffab6ea4463e4b97b86fe19b33da8ec6.svg",
+    label: "Pixel Scatter"
+  },
+  {
+    id: "preset-34",
+    shapeUri: "417ddd_859d4e478cfe491b8ea77d0b27ae3775.svg",
+    label: "Dash Lines"
+  },
+  {
+    id: "preset-35",
+    shapeUri: "417ddd_c2ca04bfcd11488db7176a8265e1d9ae.svg",
+    label: "Zigzag Slash"
+  },
+  {
+    id: "preset-36",
+    shapeUri: "417ddd_292facf173a64321af917ae8eac90110.svg",
+    label: "Star Notch"
+  },
+  {
+    id: "preset-37",
+    shapeUri: "417ddd_dcaa2647695a4738a200f3f984e045d1.svg",
+    label: "Ribbon Wave"
+  },
+  {
+    id: "preset-38",
+    shapeUri: "417ddd_ad09ab69bb8b4734aaef5e3388a9d599.svg",
+    label: "Speech Bubble"
+  },
+  {
+    id: "preset-39",
+    shapeUri: "417ddd_509553d69ebd4b588feee44a42901fe9.svg",
+    label: "Ornate Badge"
+  },
+  {
+    id: "preset-40",
+    shapeUri: "417ddd_702afa88c9554731a2384ac446f4bee3.svg",
+    label: "Heart Bubble"
+  },
+  {
+    id: "preset-41",
+    shapeUri: "417ddd_c4e3cd986a3045e4b23601779de2f0f3.svg",
+    label: "Scanline Squircle"
+  },
+  {
+    id: "preset-42",
+    shapeUri: "417ddd_34cd438ff0324ac885bfecc1d3bebcfe.svg",
+    label: "Fade Circle"
+  },
+  {
+    id: "preset-43",
+    shapeUri: "417ddd_8baabe8dfce3464a84fb6708ef08b16f.svg",
+    label: "Fade Blob"
+  }
+];
+const builtInMaskPresets = PRESET_SHAPES.map(
+  ({ id, shapeUri, label }) => ({
+    id,
+    kind: "preset",
+    label,
+    shapeUri
+  })
+);
+const maskPresetCatalog = [
+  {
+    id: MASK_PRESET_CLEAR_ID,
+    kind: "clear",
+    label: "Clear selection"
+  },
+  {
+    id: MASK_PRESET_UPLOAD_ID,
+    kind: "upload",
+    label: "Choose a shape"
+  },
+  ...builtInMaskPresets
+];
+export {
+  MASK_PRESET_CLEAR_ID,
+  MASK_PRESET_UPLOAD_ID,
+  builtInMaskPresets,
+  maskPresetCatalog,
+  safeMaskPresetIds
+};

package/dist/site/components/presetCatalog.d.cts

@@ -0,0 +1,16 @@
+export type MaskPresetKind = 'clear' | 'upload' | 'preset';
+export type MaskPresetDefinition = {
+    id: string;
+    kind: MaskPresetKind;
+    label: string;
+    shapeUri?: string;
+};
+export type BuiltInMaskPreset = MaskPresetDefinition & {
+    kind: 'preset';
+    shapeUri: string;
+};
+export declare const MASK_PRESET_CLEAR_ID = "clear";
+export declare const MASK_PRESET_UPLOAD_ID = "upload";
+export declare const safeMaskPresetIds: ReadonlyArray<string>;
+export declare const builtInMaskPresets: Array<BuiltInMaskPreset>;
+export declare const maskPresetCatalog: Array<MaskPresetDefinition>;

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

@@ -0,0 +1,16 @@
+export type MaskPresetKind = 'clear' | 'upload' | 'preset';
+export type MaskPresetDefinition = {
+    id: string;
+    kind: MaskPresetKind;
+    label: string;
+    shapeUri?: string;
+};
+export type BuiltInMaskPreset = MaskPresetDefinition & {
+    kind: 'preset';
+    shapeUri: string;
+};
+export declare const MASK_PRESET_CLEAR_ID = "clear";
+export declare const MASK_PRESET_UPLOAD_ID = "upload";
+export declare const safeMaskPresetIds: ReadonlyArray<string>;
+export declare const builtInMaskPresets: Array<BuiltInMaskPreset>;
+export declare const maskPresetCatalog: Array<MaskPresetDefinition>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2745.0",
+  "version": "1.2747.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -8,6 +8,16 @@
     "dist/site"
   ],
   "exports": {
+    "./mask-presets": {
+      "import": {
+        "types": "./dist/site/components/presetCatalog.d.ts",
+        "default": "./dist/site/components/mask-presets.js"
+      },
+      "require": {
+        "types": "./dist/site/components/presetCatalog.d.cts",
+        "default": "./dist/site/components/mask-presets.cjs"
+      }
+    },
     "./*": {
       "types": "./dist/site/components/*/index.d.ts",
       "import": "./dist/site/components/*/index.js"
@@ -32,7 +42,7 @@
   "scripts": {
     "astro": "astro",
     "build": "yarn build:lite && yarn build:janet && yarn build:package",
-    "build:package": "vite build && yarn check:npm-bundle-secrets && yarn check:dist-deps",
+    "build:package": "vite build && node scripts/check-mask-preset-exports.mjs && yarn check:npm-bundle-secrets && yarn check:dist-deps",
     "check:npm-bundle-secrets": "node scripts/check-npm-bundle-secrets.mjs",
     "check:public-deps": "node scripts/check-public-deps.mjs",
     "check:dist-deps": "node scripts/check-dist-deps.mjs",
@@ -212,5 +222,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "060737f31dea6d85a10cdfe8f9cb31aec25d640f11562f294ad1e8c9"
+  "falconPackageHash": "f5b0ee95fa88e0d111bf5af6485d76c7e88ea2863896a437aa511f30"
 }