@elementor/editor-controls 0.1.0

package/dist/index.js

@@ -0,0 +1,1346 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  BackgroundOverlayRepeaterControl: () => BackgroundOverlayRepeaterControl,
+  BoundPropProvider: () => BoundPropProvider,
+  BoxShadowRepeaterControl: () => BoxShadowRepeaterControl,
+  ColorControl: () => ColorControl,
+  ControlActionsProvider: () => ControlActionsProvider,
+  ControlLabel: () => ControlLabel,
+  ControlReplacementProvider: () => ControlReplacementProvider,
+  EqualUnequalSizesControl: () => EqualUnequalSizesControl,
+  FontFamilyControl: () => FontFamilyControl,
+  ImageControl: () => ImageControl,
+  LinkedDimensionsControl: () => LinkedDimensionsControl,
+  NumberControl: () => NumberControl,
+  SelectControl: () => SelectControl,
+  SizeControl: () => SizeControl,
+  StrokeControl: () => StrokeControl,
+  TextAreaControl: () => TextAreaControl,
+  TextControl: () => TextControl,
+  ToggleControl: () => ToggleControl,
+  createControlReplacement: () => createControlReplacement,
+  useBoundProp: () => useBoundProp,
+  useControlActions: () => useControlActions,
+  useSyncExternalState: () => useSyncExternalState
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/controls/image-control.tsx
+var React9 = __toESM(require("react"));
+var import_ui6 = require("@elementor/ui");
+var import_i18n2 = require("@wordpress/i18n");
+
+// src/bound-prop-context.tsx
+var React = __toESM(require("react"));
+var import_react = require("react");
+var BoundPropContext = (0, import_react.createContext)(null);
+var BoundPropProvider = ({ children, value, setValue, bind }) => {
+  return /* @__PURE__ */ React.createElement(BoundPropContext.Provider, { value: { value, setValue, bind } }, children);
+};
+function useBoundProp(defaultValue) {
+  const boundPropContext = (0, import_react.useContext)(BoundPropContext);
+  if (!boundPropContext) {
+    throw new Error("useBoundProp must be used within a BoundPropContext");
+  }
+  return { ...boundPropContext, value: boundPropContext.value ?? defaultValue };
+}
+
+// src/components/control-label.tsx
+var React2 = __toESM(require("react"));
+var import_ui = require("@elementor/ui");
+var ControlLabel = ({ children }) => {
+  return /* @__PURE__ */ React2.createElement(import_ui.Typography, { component: "label", variant: "caption", color: "text.secondary" }, children);
+};
+
+// src/create-control.tsx
+var React4 = __toESM(require("react"));
+var import_ui2 = require("@elementor/ui");
+
+// src/create-control-replacement.tsx
+var React3 = __toESM(require("react"));
+var import_react2 = require("react");
+var ControlReplacementContext = (0, import_react2.createContext)(void 0);
+var ControlReplacementProvider = ({
+  component,
+  condition,
+  children
+}) => {
+  return /* @__PURE__ */ React3.createElement(ControlReplacementContext.Provider, { value: { component, condition } }, children);
+};
+var useControlReplacement = () => {
+  const { value } = useBoundProp();
+  const controlReplacement = (0, import_react2.useContext)(ControlReplacementContext);
+  let shouldReplace = false;
+  try {
+    shouldReplace = !!controlReplacement?.condition({ value }) && !!controlReplacement.component;
+  } catch {
+  }
+  return shouldReplace ? controlReplacement?.component : void 0;
+};
+var createControlReplacement = () => {
+  let controlReplacement;
+  function replaceControl({ component, condition }) {
+    controlReplacement = { component, condition };
+  }
+  function getControlReplacement() {
+    return controlReplacement;
+  }
+  return { replaceControl, getControlReplacement };
+};
+
+// src/create-control.tsx
+var brandSymbol = Symbol("control");
+function createControl(Component, { supportsReplacements = true } = {}) {
+  return (props) => {
+    const ControlReplacement = useControlReplacement();
+    if (ControlReplacement && supportsReplacements) {
+      return /* @__PURE__ */ React4.createElement(import_ui2.ErrorBoundary, { fallback: null }, /* @__PURE__ */ React4.createElement(ControlReplacement, { ...props }));
+    }
+    return /* @__PURE__ */ React4.createElement(import_ui2.ErrorBoundary, { fallback: null }, /* @__PURE__ */ React4.createElement(Component, { ...props }));
+  };
+}
+
+// src/controls/image-media-control.tsx
+var React7 = __toESM(require("react"));
+var import_icons = require("@elementor/icons");
+var import_ui4 = require("@elementor/ui");
+var import_wp_media = require("@elementor/wp-media");
+var import_i18n = require("@wordpress/i18n");
+
+// src/control-actions/control-actions.tsx
+var React6 = __toESM(require("react"));
+var import_ui3 = require("@elementor/ui");
+
+// src/control-actions/control-actions-context.tsx
+var React5 = __toESM(require("react"));
+var import_react3 = require("react");
+var Context = (0, import_react3.createContext)(null);
+var ControlActionsProvider = ({ children, items }) => /* @__PURE__ */ React5.createElement(Context.Provider, { value: { items } }, children);
+var useControlActions = () => {
+  const context = (0, import_react3.useContext)(Context);
+  if (!context) {
+    throw new Error("useControlActions must be used within a ControlActionsProvider");
+  }
+  return context;
+};
+
+// src/control-actions/control-actions.tsx
+var FloatingBarContainer = (0, import_ui3.styled)("span")`
+	display: contents;
+
+	.MuiFloatingActionBar-popper:has( .MuiFloatingActionBar-actions:empty ) {
+		display: none;
+	}
+`;
+function ControlActions({ children }) {
+  const { items } = useControlActions();
+  if (items.length === 0) {
+    return children;
+  }
+  const menuItems = items.map(({ MenuItem: MenuItem4, id }) => /* @__PURE__ */ React6.createElement(MenuItem4, { key: id }));
+  return /* @__PURE__ */ React6.createElement(FloatingBarContainer, null, /* @__PURE__ */ React6.createElement(import_ui3.UnstableFloatingActionBar, { actions: menuItems }, children));
+}
+
+// src/controls/image-media-control.tsx
+var ImageMediaControl = createControl(() => {
+  const { value, setValue } = useBoundProp();
+  const { id, url } = value?.value ?? {};
+  const { data: attachment, isFetching } = (0, import_wp_media.useWpMediaAttachment)(id?.value || null);
+  const src = attachment?.url ?? url;
+  const { open } = (0, import_wp_media.useWpMediaFrame)({
+    types: ["image"],
+    multiple: false,
+    selected: id?.value || null,
+    onSelect: (selectedAttachment) => {
+      setValue({
+        $$type: "image-src",
+        value: {
+          id: {
+            $$type: "image-attachment-id",
+            value: selectedAttachment.id
+          },
+          url: null
+        }
+      });
+    }
+  });
+  return /* @__PURE__ */ React7.createElement(import_ui4.Card, { variant: "outlined" }, /* @__PURE__ */ React7.createElement(import_ui4.CardMedia, { image: src, sx: { height: 150 } }, isFetching ? /* @__PURE__ */ React7.createElement(import_ui4.Stack, { justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, /* @__PURE__ */ React7.createElement(import_ui4.CircularProgress, null)) : null), /* @__PURE__ */ React7.createElement(import_ui4.CardOverlay, null, /* @__PURE__ */ React7.createElement(ControlActions, null, /* @__PURE__ */ React7.createElement(import_ui4.Stack, { gap: 1 }, /* @__PURE__ */ React7.createElement(
+    import_ui4.Button,
+    {
+      size: "tiny",
+      color: "inherit",
+      variant: "outlined",
+      onClick: () => open({ mode: "browse" })
+    },
+    (0, import_i18n.__)("Select Image", "elementor")
+  ), /* @__PURE__ */ React7.createElement(
+    import_ui4.Button,
+    {
+      size: "tiny",
+      variant: "text",
+      color: "inherit",
+      startIcon: /* @__PURE__ */ React7.createElement(import_icons.UploadIcon, null),
+      onClick: () => open({ mode: "upload" })
+    },
+    (0, import_i18n.__)("Upload Image", "elementor")
+  )))));
+});
+
+// src/controls/select-control.tsx
+var React8 = __toESM(require("react"));
+var import_ui5 = require("@elementor/ui");
+var SelectControl = createControl(({ options }) => {
+  const { value, setValue } = useBoundProp();
+  const handleChange = (event) => {
+    setValue(event.target.value);
+  };
+  return /* @__PURE__ */ React8.createElement(ControlActions, null, /* @__PURE__ */ React8.createElement(import_ui5.Select, { displayEmpty: true, size: "tiny", value: value ?? "", onChange: handleChange, fullWidth: true }, options.map(({ label, ...props }) => /* @__PURE__ */ React8.createElement(import_ui5.MenuItem, { key: props.value, ...props }, label))));
+});
+
+// src/controls/image-control.tsx
+var ImageControl = createControl((props) => {
+  const { value, setValue } = useBoundProp();
+  const { src, size } = value?.value || {};
+  const setImageSrc = (newValue) => {
+    setValue({
+      $$type: "image",
+      value: {
+        src: newValue,
+        size
+      }
+    });
+  };
+  const setImageSize = (newValue) => {
+    setValue({
+      $$type: "image",
+      value: {
+        src,
+        size: newValue
+      }
+    });
+  };
+  return /* @__PURE__ */ React9.createElement(import_ui6.Stack, { gap: 1.5 }, /* @__PURE__ */ React9.createElement(BoundPropProvider, { value: src, setValue: setImageSrc, bind: "src" }, /* @__PURE__ */ React9.createElement(ImageMediaControl, null)), /* @__PURE__ */ React9.createElement(BoundPropProvider, { value: size, setValue: setImageSize, bind: "size" }, /* @__PURE__ */ React9.createElement(import_ui6.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React9.createElement(import_ui6.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React9.createElement(ControlLabel, null, " ", (0, import_i18n2.__)("Image Resolution", "elementor"))), /* @__PURE__ */ React9.createElement(import_ui6.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React9.createElement(SelectControl, { options: props.sizes })))));
+});
+
+// src/controls/text-control.tsx
+var React10 = __toESM(require("react"));
+var import_ui7 = require("@elementor/ui");
+var TextControl = createControl(({ placeholder }) => {
+  const { value, setValue } = useBoundProp("");
+  const handleChange = (event) => setValue(event.target.value);
+  return /* @__PURE__ */ React10.createElement(ControlActions, null, /* @__PURE__ */ React10.createElement(import_ui7.TextField, { size: "tiny", fullWidth: true, value, onChange: handleChange, placeholder }));
+});
+
+// src/controls/text-area-control.tsx
+var React11 = __toESM(require("react"));
+var import_ui8 = require("@elementor/ui");
+var TextAreaControl = createControl(({ placeholder }) => {
+  const { value, setValue } = useBoundProp();
+  const handleChange = (event) => {
+    setValue(event.target.value);
+  };
+  return /* @__PURE__ */ React11.createElement(ControlActions, null, /* @__PURE__ */ React11.createElement(
+    import_ui8.TextField,
+    {
+      size: "tiny",
+      multiline: true,
+      fullWidth: true,
+      rows: 5,
+      value,
+      onChange: handleChange,
+      placeholder
+    }
+  ));
+});
+
+// src/controls/size-control.tsx
+var React13 = __toESM(require("react"));
+var import_ui10 = require("@elementor/ui");
+
+// src/components/text-field-inner-selection.tsx
+var React12 = __toESM(require("react"));
+var import_react4 = require("react");
+var import_ui9 = require("@elementor/ui");
+var TextFieldInnerSelection = (0, import_react4.forwardRef)(
+  ({ placeholder, type, value, onChange, endAdornment, startAdornment }, ref) => {
+    return /* @__PURE__ */ React12.createElement(
+      import_ui9.TextField,
+      {
+        size: "tiny",
+        fullWidth: true,
+        type,
+        value,
+        onChange,
+        placeholder,
+        InputProps: {
+          endAdornment,
+          startAdornment
+        },
+        ref
+      }
+    );
+  }
+);
+var SelectionEndAdornment = ({
+  options,
+  onClick,
+  value
+}) => {
+  const popupState = (0, import_ui9.usePopupState)({
+    variant: "popover",
+    popupId: (0, import_react4.useId)()
+  });
+  const handleMenuItemClick = (index) => {
+    onClick(options[index]);
+    popupState.close();
+  };
+  return /* @__PURE__ */ React12.createElement(import_ui9.InputAdornment, { position: "end" }, /* @__PURE__ */ React12.createElement(
+    import_ui9.Button,
+    {
+      size: "small",
+      color: "inherit",
+      sx: { font: "inherit", minWidth: "initial" },
+      ...(0, import_ui9.bindTrigger)(popupState)
+    },
+    value.toUpperCase()
+  ), /* @__PURE__ */ React12.createElement(import_ui9.Menu, { MenuListProps: { dense: true }, ...(0, import_ui9.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React12.createElement(import_ui9.MenuItem, { key: option, onClick: () => handleMenuItemClick(index) }, option.toUpperCase()))));
+};
+
+// src/hooks/use-sync-external-state.tsx
+var import_react5 = require("react");
+var useSyncExternalState = ({
+  external,
+  setExternal,
+  persistWhen,
+  fallback
+}) => {
+  function toExternal(internalValue) {
+    if (persistWhen(internalValue)) {
+      return internalValue;
+    }
+    return void 0;
+  }
+  function toInternal(externalValue, internalValue) {
+    if (!externalValue) {
+      return fallback(internalValue);
+    }
+    return externalValue;
+  }
+  const [internal, setInternal] = (0, import_react5.useState)(toInternal(external, void 0));
+  (0, import_react5.useEffect)(() => {
+    setInternal((prevInternal) => toInternal(external, prevInternal));
+  }, [external]);
+  const setInternalValue = (setter) => {
+    const setterFn = typeof setter === "function" ? setter : () => setter;
+    const updated = setterFn(internal);
+    setInternal(updated);
+    setExternal(toExternal(updated));
+  };
+  return [internal, setInternalValue];
+};
+
+// src/controls/size-control.tsx
+var defaultUnits = ["px", "%", "em", "rem", "vw", "vh"];
+var defaultUnit = "px";
+var defaultSize = NaN;
+var SizeControl = createControl(({ units: units2 = defaultUnits, placeholder, startIcon }) => {
+  const { value, setValue } = useBoundProp();
+  const [state, setState] = useSyncExternalState({
+    external: value,
+    setExternal: setValue,
+    persistWhen: (controlValue) => !!controlValue?.value?.size || controlValue?.value?.size === 0,
+    fallback: (controlValue) => ({
+      $$type: "size",
+      value: { unit: controlValue?.value?.unit || defaultUnit, size: defaultSize }
+    })
+  });
+  const handleUnitChange = (unit) => {
+    setState((prev) => ({
+      ...prev,
+      value: {
+        ...prev.value,
+        unit
+      }
+    }));
+  };
+  const handleSizeChange = (event) => {
+    const { value: size } = event.target;
+    setState((prev) => ({
+      ...prev,
+      value: {
+        ...prev.value,
+        size: size || size === "0" ? parseFloat(size) : defaultSize
+      }
+    }));
+  };
+  return /* @__PURE__ */ React13.createElement(ControlActions, null, /* @__PURE__ */ React13.createElement(
+    TextFieldInnerSelection,
+    {
+      endAdornment: /* @__PURE__ */ React13.createElement(
+        SelectionEndAdornment,
+        {
+          options: units2,
+          onClick: handleUnitChange,
+          value: state.value.unit ?? defaultUnit
+        }
+      ),
+      placeholder,
+      startAdornment: startIcon ?? /* @__PURE__ */ React13.createElement(import_ui10.InputAdornment, { position: "start" }, startIcon),
+      type: "number",
+      value: Number.isNaN(state.value.size) ? "" : state.value.size,
+      onChange: handleSizeChange
+    }
+  ));
+});
+
+// src/controls/stroke-control.tsx
+var React15 = __toESM(require("react"));
+var import_ui12 = require("@elementor/ui");
+var import_i18n3 = require("@wordpress/i18n");
+
+// src/controls/color-control.tsx
+var React14 = __toESM(require("react"));
+var import_ui11 = require("@elementor/ui");
+var ColorControl = createControl(
+  (props) => {
+    const { value, setValue } = useBoundProp();
+    const handleChange = (selectedColor) => {
+      setValue({
+        $$type: "color",
+        value: selectedColor
+      });
+    };
+    return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(
+      import_ui11.UnstableColorField,
+      {
+        size: "tiny",
+        ...props,
+        value: value?.value,
+        onChange: handleChange,
+        fullWidth: true
+      }
+    ));
+  }
+);
+
+// src/controls/stroke-control.tsx
+var defaultStrokeControlValue = {
+  $$type: "stroke",
+  value: {
+    color: {
+      $$type: "color",
+      value: "#000000"
+    },
+    width: {
+      $$type: "size",
+      value: {
+        unit: "px",
+        size: NaN
+      }
+    }
+  }
+};
+var units = ["px", "em", "rem"];
+var StrokeControl = createControl(() => {
+  const { value, setValue } = useBoundProp(defaultStrokeControlValue);
+  const setStrokeWidth = (newValue) => {
+    const updatedValue = {
+      ...value?.value ?? defaultStrokeControlValue.value,
+      width: newValue
+    };
+    setValue({
+      $$type: "stroke",
+      value: updatedValue
+    });
+  };
+  const setStrokeColor = (newValue) => {
+    const updatedValue = {
+      ...value?.value ?? defaultStrokeControlValue.value,
+      color: newValue
+    };
+    setValue({
+      $$type: "stroke",
+      value: updatedValue
+    });
+  };
+  return /* @__PURE__ */ React15.createElement(import_ui12.Stack, { gap: 1.5 }, /* @__PURE__ */ React15.createElement(
+    Control,
+    {
+      bind: "width",
+      label: (0, import_i18n3.__)("Stroke Width", "elementor"),
+      value: value?.value.width ?? defaultStrokeControlValue.value.width,
+      setValue: setStrokeWidth
+    },
+    /* @__PURE__ */ React15.createElement(SizeControl, { units })
+  ), /* @__PURE__ */ React15.createElement(
+    Control,
+    {
+      bind: "color",
+      label: (0, import_i18n3.__)("Stroke Color", "elementor"),
+      value: value?.value.color ?? defaultStrokeControlValue.value.color,
+      setValue: setStrokeColor
+    },
+    /* @__PURE__ */ React15.createElement(ColorControl, null)
+  ));
+});
+var Control = ({
+  bind,
+  value,
+  setValue,
+  label,
+  children
+}) => /* @__PURE__ */ React15.createElement(BoundPropProvider, { bind, value, setValue }, /* @__PURE__ */ React15.createElement(import_ui12.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React15.createElement(import_ui12.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React15.createElement(ControlLabel, null, label)), /* @__PURE__ */ React15.createElement(import_ui12.Grid, { item: true, xs: 6 }, children)));
+
+// src/controls/box-shadow-repeater-control.tsx
+var React17 = __toESM(require("react"));
+var import_ui14 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
+
+// src/components/repeater.tsx
+var React16 = __toESM(require("react"));
+var import_react6 = require("react");
+var import_icons2 = require("@elementor/icons");
+var import_ui13 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
+var SIZE = "tiny";
+var Repeater = ({
+  label,
+  itemSettings,
+  values: repeaterValues = [],
+  setValues: setRepeaterValues
+}) => {
+  const addRepeaterItem = () => {
+    const newItem = structuredClone(itemSettings.initialValues);
+    setRepeaterValues([...repeaterValues, newItem]);
+  };
+  const duplicateRepeaterItem = (index) => {
+    setRepeaterValues([
+      ...repeaterValues.slice(0, index),
+      structuredClone(repeaterValues[index]),
+      ...repeaterValues.slice(index)
+    ]);
+  };
+  const removeRepeaterItem = (index) => {
+    setRepeaterValues(repeaterValues.filter((_, i) => i !== index));
+  };
+  const toggleDisableRepeaterItem = (index) => {
+    setRepeaterValues(
+      repeaterValues.map((value, i) => {
+        if (i === index) {
+          const { disabled, ...rest } = value;
+          return { ...rest, ...disabled ? {} : { disabled: true } };
+        }
+        return value;
+      })
+    );
+  };
+  return /* @__PURE__ */ React16.createElement(import_ui13.Stack, null, /* @__PURE__ */ React16.createElement(import_ui13.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pb: 1 } }, /* @__PURE__ */ React16.createElement(import_ui13.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ React16.createElement(import_ui13.IconButton, { size: SIZE, onClick: addRepeaterItem, "aria-label": (0, import_i18n4.__)("Add item", "elementor") }, /* @__PURE__ */ React16.createElement(import_icons2.PlusIcon, { fontSize: SIZE }))), /* @__PURE__ */ React16.createElement(import_ui13.Stack, { gap: 1 }, repeaterValues.map((value, index) => /* @__PURE__ */ React16.createElement(
+    RepeaterItem,
+    {
+      key: index,
+      disabled: value.disabled,
+      label: /* @__PURE__ */ React16.createElement(itemSettings.Label, { value }),
+      startIcon: /* @__PURE__ */ React16.createElement(itemSettings.Icon, { value }),
+      removeItem: () => removeRepeaterItem(index),
+      duplicateItem: () => duplicateRepeaterItem(index),
+      toggleDisableItem: () => toggleDisableRepeaterItem(index)
+    },
+    (props) => /* @__PURE__ */ React16.createElement(
+      itemSettings.Content,
+      {
+        ...props,
+        value,
+        setValue: (newValue) => setRepeaterValues(
+          repeaterValues.map((item, i) => i === index ? newValue : item)
+        )
+      }
+    )
+  ))));
+};
+var RepeaterItem = ({
+  label,
+  disabled,
+  startIcon,
+  children,
+  removeItem,
+  duplicateItem,
+  toggleDisableItem
+}) => {
+  const popupId = (0, import_react6.useId)();
+  const controlRef = (0, import_react6.useRef)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react6.useState)(null);
+  const popoverState = (0, import_ui13.usePopupState)({ popupId, variant: "popover" });
+  const popoverProps = (0, import_ui13.bindPopover)(popoverState);
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
+    import_ui13.UnstableTag,
+    {
+      label,
+      showActionsOnHover: true,
+      ref: controlRef,
+      variant: "outlined",
+      "aria-label": (0, import_i18n4.__)("Open item", "elementor"),
+      ...(0, import_ui13.bindTrigger)(popoverState),
+      startIcon,
+      actions: /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
+        import_ui13.IconButton,
+        {
+          size: SIZE,
+          onClick: duplicateItem,
+          "aria-label": (0, import_i18n4.__)("Duplicate item", "elementor")
+        },
+        /* @__PURE__ */ React16.createElement(import_icons2.CopyIcon, { fontSize: SIZE })
+      ), /* @__PURE__ */ React16.createElement(
+        import_ui13.IconButton,
+        {
+          size: SIZE,
+          onClick: toggleDisableItem,
+          "aria-label": disabled ? (0, import_i18n4.__)("Enable item", "elementor") : (0, import_i18n4.__)("Disable item", "elementor")
+        },
+        disabled ? /* @__PURE__ */ React16.createElement(import_icons2.EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React16.createElement(import_icons2.EyeIcon, { fontSize: SIZE })
+      ), /* @__PURE__ */ React16.createElement(
+        import_ui13.IconButton,
+        {
+          size: SIZE,
+          onClick: removeItem,
+          "aria-label": (0, import_i18n4.__)("Remove item", "elementor")
+        },
+        /* @__PURE__ */ React16.createElement(import_icons2.XIcon, { fontSize: SIZE })
+      ))
+    }
+  ), /* @__PURE__ */ React16.createElement(
+    import_ui13.Popover,
+    {
+      disablePortal: true,
+      slotProps: {
+        paper: {
+          ref: setAnchorEl,
+          sx: { mt: 0.5, p: 1, pt: 1, width: controlRef.current?.getBoundingClientRect().width }
+        }
+      },
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      ...popoverProps
+    },
+    /* @__PURE__ */ React16.createElement(import_ui13.Box, { p: 0.5 }, children({ anchorEl }))
+  ));
+};
+
+// src/controls/box-shadow-repeater-control.tsx
+var BoxShadowRepeaterControl = createControl(() => {
+  const { value, setValue } = useBoundProp();
+  const boxShadowValues = value?.value;
+  const setBoxShadow = (newValue) => {
+    setValue({
+      $$type: "box-shadow",
+      value: newValue
+    });
+  };
+  return /* @__PURE__ */ React17.createElement(
+    Repeater,
+    {
+      values: boxShadowValues,
+      setValues: setBoxShadow,
+      label: (0, import_i18n5.__)("Box shadow", "elementor"),
+      itemSettings: {
+        Icon: ItemIcon,
+        Label: ItemLabel,
+        Content: ItemContent,
+        initialValues: initialShadow
+      }
+    }
+  );
+});
+var ItemIcon = ({ value }) => /* @__PURE__ */ React17.createElement(import_ui14.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color.value });
+var ItemContent = ({
+  value,
+  setValue,
+  anchorEl
+}) => {
+  const setShadow = (newValue) => {
+    setValue({
+      $$type: "shadow",
+      value: newValue
+    });
+  };
+  return /* @__PURE__ */ React17.createElement(import_ui14.Stack, { gap: 1.5 }, /* @__PURE__ */ React17.createElement(import_ui14.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React17.createElement(
+    Control2,
+    {
+      bind: "color",
+      value: value.value.color,
+      label: (0, import_i18n5.__)("Color", "elementor"),
+      setValue: (v) => setShadow({ ...value.value, color: v })
+    },
+    /* @__PURE__ */ React17.createElement(
+      ColorControl,
+      {
+        slotProps: {
+          colorPicker: {
+            anchorEl,
+            anchorOrigin: {
+              vertical: "top",
+              horizontal: "right"
+            },
+            transformOrigin: {
+              vertical: "top",
+              horizontal: -10
+            }
+          }
+        }
+      }
+    )
+  ), /* @__PURE__ */ React17.createElement(
+    Control2,
+    {
+      bind: "position",
+      value: value.value.position,
+      label: (0, import_i18n5.__)("Position", "elementor"),
+      setValue: (v) => setShadow({ ...value.value, position: v || null })
+    },
+    /* @__PURE__ */ React17.createElement(
+      SelectControl,
+      {
+        options: [
+          { label: (0, import_i18n5.__)("Inset", "elementor"), value: "inset" },
+          { label: (0, import_i18n5.__)("Outset", "elementor"), value: "" }
+        ]
+      }
+    )
+  )), /* @__PURE__ */ React17.createElement(import_ui14.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React17.createElement(
+    Control2,
+    {
+      bind: "hOffset",
+      label: (0, import_i18n5.__)("Horizontal", "elementor"),
+      value: value.value.hOffset,
+      setValue: (v) => setShadow({ ...value.value, hOffset: v })
+    },
+    /* @__PURE__ */ React17.createElement(SizeControl, null)
+  ), /* @__PURE__ */ React17.createElement(
+    Control2,
+    {
+      bind: "vOffset",
+      label: (0, import_i18n5.__)("Vertical", "elementor"),
+      value: value.value.vOffset,
+      setValue: (v) => setShadow({ ...value.value, vOffset: v })
+    },
+    /* @__PURE__ */ React17.createElement(SizeControl, null)
+  )), /* @__PURE__ */ React17.createElement(import_ui14.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React17.createElement(
+    Control2,
+    {
+      bind: "blur",
+      value: value.value.blur,
+      label: (0, import_i18n5.__)("Blur", "elementor"),
+      setValue: (v) => setShadow({ ...value.value, blur: v })
+    },
+    /* @__PURE__ */ React17.createElement(SizeControl, null)
+  ), /* @__PURE__ */ React17.createElement(
+    Control2,
+    {
+      bind: "spread",
+      label: (0, import_i18n5.__)("Spread", "elementor"),
+      value: value.value.spread,
+      setValue: (v) => setShadow({ ...value.value, spread: v })
+    },
+    /* @__PURE__ */ React17.createElement(SizeControl, null)
+  )));
+};
+var Control2 = ({
+  value,
+  setValue,
+  label,
+  bind,
+  children
+}) => /* @__PURE__ */ React17.createElement(BoundPropProvider, { value, setValue, bind }, /* @__PURE__ */ React17.createElement(import_ui14.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React17.createElement(import_ui14.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React17.createElement(import_ui14.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React17.createElement(import_ui14.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label)), /* @__PURE__ */ React17.createElement(import_ui14.Grid, { item: true, xs: 12 }, children))));
+var ItemLabel = ({ value }) => {
+  const { position, hOffset, vOffset, blur, spread } = value.value;
+  const { size: blurSize = "", unit: blurUnit = "" } = blur?.value || {};
+  const { size: spreadSize = "", unit: spreadUnit = "" } = spread?.value || {};
+  const { size: hOffsetSize = "unset", unit: hOffsetUnit = "" } = hOffset?.value || {};
+  const { size: vOffsetSize = "unset", unit: vOffsetUnit = "" } = vOffset?.value || {};
+  const sizes = [
+    hOffsetSize + hOffsetUnit,
+    vOffsetSize + vOffsetUnit,
+    blurSize + blurUnit,
+    spreadSize + spreadUnit
+  ].join(" ");
+  return /* @__PURE__ */ React17.createElement("span", { style: { textTransform: "capitalize" } }, position ?? "outset", ": ", sizes);
+};
+var initialShadow = {
+  $$type: "shadow",
+  value: {
+    hOffset: {
+      $$type: "size",
+      value: { unit: "px", size: 0 }
+    },
+    vOffset: {
+      $$type: "size",
+      value: { unit: "px", size: 0 }
+    },
+    blur: {
+      $$type: "size",
+      value: { unit: "px", size: 10 }
+    },
+    spread: {
+      $$type: "size",
+      value: { unit: "px", size: 0 }
+    },
+    color: {
+      $$type: "color",
+      value: "rgba(0, 0, 0, 1)"
+    },
+    position: null
+  }
+};
+
+// src/controls/background-overlay-repeater-control.tsx
+var React18 = __toESM(require("react"));
+var import_ui15 = require("@elementor/ui");
+var import_i18n6 = require("@wordpress/i18n");
+var BackgroundOverlayRepeaterControl = createControl(() => {
+  const { value, setValue } = useBoundProp();
+  const colorOverlayValues = value?.value;
+  const setColorOverlay = (newValue) => {
+    setValue({
+      $$type: "background-image",
+      value: newValue
+    });
+  };
+  return /* @__PURE__ */ React18.createElement(
+    Repeater,
+    {
+      values: colorOverlayValues,
+      setValues: setColorOverlay,
+      label: (0, import_i18n6.__)("Overlay", "elementor"),
+      itemSettings: {
+        Icon: ItemIcon2,
+        Label: ItemLabel2,
+        Content: ItemContent2,
+        initialValues: initialGradient
+      }
+    }
+  );
+});
+var ItemIcon2 = ({ value }) => /* @__PURE__ */ React18.createElement(import_ui15.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color.value });
+var ItemContent2 = ({
+  value,
+  setValue
+}) => {
+  const setColor = (newValue) => {
+    setValue({
+      $$type: "background-overlay",
+      value: newValue
+    });
+  };
+  return /* @__PURE__ */ React18.createElement(import_ui15.Stack, { gap: 1.5 }, /* @__PURE__ */ React18.createElement(
+    Control3,
+    {
+      bind: "color",
+      value: value.value.color,
+      label: (0, import_i18n6.__)("Color", "elementor"),
+      setValue: (v) => setColor({ ...value.value, color: v })
+    },
+    /* @__PURE__ */ React18.createElement(ColorControl, null)
+  ));
+};
+var Control3 = ({
+  value,
+  setValue,
+  label,
+  bind,
+  children
+}) => /* @__PURE__ */ React18.createElement(BoundPropProvider, { value, setValue, bind }, /* @__PURE__ */ React18.createElement(import_ui15.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React18.createElement(import_ui15.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React18.createElement(import_ui15.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label)), /* @__PURE__ */ React18.createElement(import_ui15.Grid, { item: true, xs: 12 }, children)));
+var ItemLabel2 = ({ value }) => {
+  const color = value.value.color.value;
+  return /* @__PURE__ */ React18.createElement("span", null, color);
+};
+var initialGradient = {
+  $$type: "background-overlay",
+  value: {
+    color: {
+      $$type: "color",
+      value: "rgba(0, 0, 0, 0.2)"
+    }
+  }
+};
+
+// src/controls/toggle-control.tsx
+var React20 = __toESM(require("react"));
+
+// src/components/control-toggle-button-group.tsx
+var React19 = __toESM(require("react"));
+var import_ui16 = require("@elementor/ui");
+var StyledToggleButtonGroup = (0, import_ui16.styled)(import_ui16.ToggleButtonGroup)`
+	${({ justify }) => `justify-content: ${justify};`}
+`;
+var ControlToggleButtonGroup = ({
+  justify = "end",
+  size = "tiny",
+  value,
+  onChange,
+  items,
+  exclusive = false,
+  fullWidth = false
+}) => {
+  const handleChange = (_, newValue) => {
+    onChange(newValue);
+  };
+  return /* @__PURE__ */ React19.createElement(StyledToggleButtonGroup, { justify, value, onChange: handleChange, exclusive }, items.map(
+    ({ label, value: buttonValue, renderContent: Content, showTooltip }) => showTooltip ? /* @__PURE__ */ React19.createElement(import_ui16.Tooltip, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React19.createElement(import_ui16.ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React19.createElement(Content, { size }))) : /* @__PURE__ */ React19.createElement(
+      import_ui16.ToggleButton,
+      {
+        key: buttonValue,
+        value: buttonValue,
+        "aria-label": label,
+        size,
+        fullWidth
+      },
+      /* @__PURE__ */ React19.createElement(Content, { size })
+    )
+  ));
+};
+
+// src/controls/toggle-control.tsx
+var ToggleControl = createControl(
+  ({ options, fullWidth = false, size = "tiny" }) => {
+    const { value, setValue } = useBoundProp();
+    const handleToggle = (option) => {
+      setValue(option);
+    };
+    return /* @__PURE__ */ React20.createElement(
+      ControlToggleButtonGroup,
+      {
+        items: options,
+        value: value || null,
+        onChange: handleToggle,
+        exclusive: true,
+        fullWidth,
+        size
+      }
+    );
+  }
+);
+
+// src/controls/number-control.tsx
+var React21 = __toESM(require("react"));
+var import_ui17 = require("@elementor/ui");
+var isEmptyOrNaN = (value) => value === void 0 || value === "" || Number.isNaN(Number(value));
+var NumberControl = createControl(({ placeholder }) => {
+  const { value, setValue } = useBoundProp();
+  const handleChange = (event) => {
+    const eventValue = event.target.value;
+    setValue(isEmptyOrNaN(eventValue) ? void 0 : Number(eventValue));
+  };
+  return /* @__PURE__ */ React21.createElement(ControlActions, null, /* @__PURE__ */ React21.createElement(
+    import_ui17.TextField,
+    {
+      size: "tiny",
+      type: "number",
+      fullWidth: true,
+      value: isEmptyOrNaN(value) ? "" : value,
+      onChange: handleChange,
+      placeholder
+    }
+  ));
+});
+
+// src/controls/equal-unequal-sizes-control.tsx
+var React22 = __toESM(require("react"));
+var import_react7 = require("react");
+var import_ui18 = require("@elementor/ui");
+var import_i18n7 = require("@wordpress/i18n");
+function hasMixedSizes(values) {
+  const [firstValue, ...restValues] = values;
+  return restValues.some(
+    (value) => value?.value?.size !== firstValue?.value?.size || value?.value?.unit !== firstValue?.value?.unit
+  );
+}
+function getMultiSizeProps(controlValue, items) {
+  return controlValue?.$$type === "size" ? items.reduce((values, item) => {
+    const { bind } = item;
+    values[bind] = controlValue;
+    return values;
+  }, {}) : controlValue?.value ?? {};
+}
+function EqualUnequalSizesControl({ label, icon, items, multiSizeType }) {
+  const popupId = (0, import_react7.useId)();
+  const controlRef = (0, import_react7.useRef)(null);
+  const { value: controlValue, setValue: setControlValue } = useBoundProp();
+  const setMultiSizeValue = (newValue) => {
+    setControlValue({ $$type: multiSizeType, value: newValue });
+  };
+  const mappedValues = getMultiSizeProps(controlValue, items);
+  const setNestedProp = (item, newValue) => {
+    const { bind } = item;
+    const newMappedValues = {
+      ...mappedValues,
+      [bind]: newValue
+    };
+    const sizes = Object.values(newMappedValues);
+    const isMixed = hasMixedSizes(sizes);
+    if (isMixed) {
+      setMultiSizeValue(newMappedValues);
+      return;
+    }
+    setControlValue(newValue);
+  };
+  const popupState = (0, import_ui18.usePopupState)({
+    variant: "popover",
+    popupId
+  });
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React22.createElement(ControlLabel, null, label)), /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React22.createElement(
+    EqualValuesControl,
+    {
+      value: mappedValues,
+      setValue: setControlValue,
+      iconButton: /* @__PURE__ */ React22.createElement(
+        import_ui18.ToggleButton,
+        {
+          size: "tiny",
+          value: "check",
+          sx: { marginLeft: "auto" },
+          ...(0, import_ui18.bindToggle)(popupState),
+          selected: popupState.isOpen
+        },
+        icon
+      )
+    }
+  ))), /* @__PURE__ */ React22.createElement(
+    import_ui18.Popover,
+    {
+      disablePortal: true,
+      disableScrollLock: true,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      ...(0, import_ui18.bindPopover)(popupState),
+      slotProps: {
+        paper: { sx: { mt: 0.5, p: 2, pt: 1, width: controlRef.current?.getBoundingClientRect().width } }
+      }
+    },
+    /* @__PURE__ */ React22.createElement(import_ui18.Stack, { gap: 1.5 }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(
+      NestedValueControl,
+      {
+        item: items[0],
+        value: mappedValues,
+        setNestedProp
+      }
+    ), /* @__PURE__ */ React22.createElement(
+      NestedValueControl,
+      {
+        item: items[1],
+        value: mappedValues,
+        setNestedProp
+      }
+    )), /* @__PURE__ */ React22.createElement(import_ui18.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(
+      NestedValueControl,
+      {
+        item: items[3],
+        value: mappedValues,
+        setNestedProp
+      }
+    ), /* @__PURE__ */ React22.createElement(
+      NestedValueControl,
+      {
+        item: items[2],
+        value: mappedValues,
+        setNestedProp
+      }
+    )))
+  ));
+}
+var NestedValueControl = ({
+  item,
+  value,
+  setNestedProp
+}) => {
+  const { bind } = item;
+  const nestedValue = value?.[bind] ? value[bind] : void 0;
+  return /* @__PURE__ */ React22.createElement(
+    BoundPropProvider,
+    {
+      bind: "",
+      setValue: (val) => setNestedProp(item, val),
+      value: nestedValue
+    },
+    /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(SizeControl, { startIcon: item.icon }))))
+  );
+};
+var EqualValuesControl = ({
+  value,
+  setValue,
+  iconButton
+}) => {
+  const values = Object.values(value ?? {});
+  const isMixed = hasMixedSizes(values);
+  return /* @__PURE__ */ React22.createElement(
+    BoundPropProvider,
+    {
+      bind: "",
+      setValue: (val) => setValue(val),
+      value: isMixed ? void 0 : values[0]
+    },
+    /* @__PURE__ */ React22.createElement(import_ui18.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React22.createElement(SizeControl, { placeholder: (0, import_i18n7.__)("MIXED", "elementor") }), iconButton)
+  );
+};
+
+// src/controls/linked-dimensions-control.tsx
+var React23 = __toESM(require("react"));
+var import_icons3 = require("@elementor/icons");
+var import_ui19 = require("@elementor/ui");
+var import_i18n8 = require("@wordpress/i18n");
+var LinkedDimensionsControl = createControl(({ label }) => {
+  const { value, setValue } = useBoundProp();
+  const { top, right, bottom, left, isLinked = true } = value?.value || {};
+  const setLinkedValue = (position, newValue) => {
+    const updatedValue = {
+      isLinked,
+      top: isLinked ? newValue : top,
+      right: isLinked ? newValue : right,
+      bottom: isLinked ? newValue : bottom,
+      left: isLinked ? newValue : left,
+      [position]: newValue
+    };
+    setValue({
+      $$type: "linked-dimensions",
+      value: updatedValue
+    });
+  };
+  const toggleLinked = () => {
+    const updatedValue = {
+      isLinked: !isLinked,
+      top,
+      right: !isLinked ? top : right,
+      bottom: !isLinked ? top : bottom,
+      left: !isLinked ? top : left
+    };
+    setValue({
+      $$type: "linked-dimensions",
+      value: updatedValue
+    });
+  };
+  const LinkedIcon = isLinked ? import_icons3.LinkIcon : import_icons3.DetachIcon;
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_ui19.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React23.createElement(ControlLabel, null, label), /* @__PURE__ */ React23.createElement(
+    import_ui19.ToggleButton,
+    {
+      "aria-label": (0, import_i18n8.__)("Link Inputs", "elementor"),
+      size: "tiny",
+      value: "check",
+      selected: isLinked,
+      sx: { marginLeft: "auto" },
+      onChange: toggleLinked
+    },
+    /* @__PURE__ */ React23.createElement(LinkedIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React23.createElement(import_ui19.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React23.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, (0, import_i18n8.__)("Top", "elementor"))), /* @__PURE__ */ React23.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(
+    Control4,
+    {
+      bind: "top",
+      value: top,
+      setValue: setLinkedValue,
+      startIcon: /* @__PURE__ */ React23.createElement(import_icons3.SideTopIcon, { fontSize: "tiny" })
+    }
+  ))), /* @__PURE__ */ React23.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, (0, import_i18n8.__)("Right", "elementor"))), /* @__PURE__ */ React23.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(
+    Control4,
+    {
+      bind: "right",
+      value: right,
+      setValue: setLinkedValue,
+      startIcon: /* @__PURE__ */ React23.createElement(import_icons3.SideRightIcon, { fontSize: "tiny" })
+    }
+  )))), /* @__PURE__ */ React23.createElement(import_ui19.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React23.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, (0, import_i18n8.__)("Bottom", "elementor"))), /* @__PURE__ */ React23.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(
+    Control4,
+    {
+      bind: "bottom",
+      value: bottom,
+      setValue: setLinkedValue,
+      startIcon: /* @__PURE__ */ React23.createElement(import_icons3.SideBottomIcon, { fontSize: "tiny" })
+    }
+  ))), /* @__PURE__ */ React23.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, (0, import_i18n8.__)("Left", "elementor"))), /* @__PURE__ */ React23.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(
+    Control4,
+    {
+      bind: "left",
+      value: left,
+      setValue: setLinkedValue,
+      startIcon: /* @__PURE__ */ React23.createElement(import_icons3.SideLeftIcon, { fontSize: "tiny" })
+    }
+  )))));
+});
+var Control4 = ({
+  bind,
+  startIcon,
+  value,
+  setValue
+}) => /* @__PURE__ */ React23.createElement(BoundPropProvider, { setValue: (newValue) => setValue(bind, newValue), value, bind }, /* @__PURE__ */ React23.createElement(SizeControl, { startIcon }));
+
+// src/controls/font-family-control.tsx
+var import_react8 = require("react");
+var React24 = __toESM(require("react"));
+var import_icons4 = require("@elementor/icons");
+var import_ui20 = require("@elementor/ui");
+var import_i18n10 = require("@wordpress/i18n");
+
+// src/hooks/use-filtered-font-families.ts
+var import_i18n9 = require("@wordpress/i18n");
+var supportedCategories = {
+  system: (0, import_i18n9.__)("System", "elementor"),
+  googlefonts: (0, import_i18n9.__)("Google Fonts", "elementor"),
+  customfonts: (0, import_i18n9.__)("Custom Fonts", "elementor")
+};
+var useFilteredFontFamilies = (fontFamilies, searchValue) => {
+  const filteredFontFamilies = Object.entries(fontFamilies).reduce(
+    (acc, [font, category]) => {
+      const isMatch = font.toLowerCase().includes(searchValue.trim().toLowerCase());
+      if (!isMatch) {
+        return acc;
+      }
+      const categoryLabel = supportedCategories[category];
+      if (categoryLabel) {
+        const existingCategory = acc.get(categoryLabel);
+        if (existingCategory) {
+          existingCategory.push(font);
+        } else {
+          acc.set(categoryLabel, [font]);
+        }
+      }
+      return acc;
+    },
+    /* @__PURE__ */ new Map()
+  );
+  return [...filteredFontFamilies];
+};
+
+// src/controls/font-family-control.tsx
+var SIZE2 = "tiny";
+var FontFamilyControl = createControl(({ fontFamilies }) => {
+  const { value: fontFamily, setValue: setFontFamily } = useBoundProp();
+  const [searchValue, setSearchValue] = (0, import_react8.useState)("");
+  const popupId = (0, import_react8.useId)();
+  const popoverState = (0, import_ui20.usePopupState)({ variant: "popover", popupId });
+  const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
+  if (!filteredFontFamilies) {
+    return null;
+  }
+  const handleSearch = (event) => {
+    setSearchValue(event.target.value);
+  };
+  const handleClose = () => {
+    setSearchValue("");
+    popoverState.close();
+  };
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(
+    import_ui20.UnstableTag,
+    {
+      variant: "outlined",
+      label: fontFamily,
+      endIcon: /* @__PURE__ */ React24.createElement(import_icons4.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui20.bindTrigger)(popoverState),
+      fullWidth: true
+    }
+  ), /* @__PURE__ */ React24.createElement(
+    import_ui20.Popover,
+    {
+      disablePortal: true,
+      disableScrollLock: true,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      ...(0, import_ui20.bindPopover)(popoverState),
+      onClose: handleClose
+    },
+    /* @__PURE__ */ React24.createElement(import_ui20.Stack, null, /* @__PURE__ */ React24.createElement(import_ui20.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React24.createElement(import_icons4.EditIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React24.createElement(import_ui20.Typography, { variant: "subtitle2" }, (0, import_i18n10.__)("Font Family", "elementor")), /* @__PURE__ */ React24.createElement(import_ui20.IconButton, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React24.createElement(import_icons4.XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React24.createElement(import_ui20.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React24.createElement(
+      import_ui20.TextField,
+      {
+        fullWidth: true,
+        size: SIZE2,
+        value: searchValue,
+        placeholder: (0, import_i18n10.__)("Search", "elementor"),
+        onChange: handleSearch,
+        InputProps: {
+          startAdornment: /* @__PURE__ */ React24.createElement(import_ui20.InputAdornment, { position: "start" }, /* @__PURE__ */ React24.createElement(import_icons4.SearchIcon, { fontSize: SIZE2 }))
+        }
+      }
+    )), /* @__PURE__ */ React24.createElement(import_ui20.Divider, null), /* @__PURE__ */ React24.createElement(import_ui20.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React24.createElement(import_ui20.MenuList, { role: "listbox", tabIndex: 0 }, filteredFontFamilies.map(([category, items], index) => /* @__PURE__ */ React24.createElement(import_react8.Fragment, { key: index }, /* @__PURE__ */ React24.createElement(import_ui20.ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, category), items.map((item) => {
+      const isSelected = item === fontFamily;
+      return /* @__PURE__ */ React24.createElement(
+        import_ui20.MenuItem,
+        {
+          key: item,
+          selected: isSelected,
+          autoFocus: isSelected,
+          onClick: () => {
+            setFontFamily(item);
+            handleClose();
+          },
+          sx: { typography: "caption" },
+          style: { fontFamily: item }
+        },
+        item
+      );
+    })))) : /* @__PURE__ */ React24.createElement(import_ui20.Stack, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React24.createElement(import_icons4.PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React24.createElement(import_ui20.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n10.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React24.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React24.createElement(import_ui20.Typography, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React24.createElement(
+      import_ui20.Link,
+      {
+        color: "secondary",
+        variant: "caption",
+        component: "button",
+        onClick: () => setSearchValue("")
+      },
+      (0, import_i18n10.__)("Clear the filters", "elementor")
+    ), "\xA0", (0, import_i18n10.__)("and try again.", "elementor")))))
+  ));
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BackgroundOverlayRepeaterControl,
+  BoundPropProvider,
+  BoxShadowRepeaterControl,
+  ColorControl,
+  ControlActionsProvider,
+  ControlLabel,
+  ControlReplacementProvider,
+  EqualUnequalSizesControl,
+  FontFamilyControl,
+  ImageControl,
+  LinkedDimensionsControl,
+  NumberControl,
+  SelectControl,
+  SizeControl,
+  StrokeControl,
+  TextAreaControl,
+  TextControl,
+  ToggleControl,
+  createControlReplacement,
+  useBoundProp,
+  useControlActions,
+  useSyncExternalState
+});
+//# sourceMappingURL=index.js.map