@elementor/editor-controls 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1320 @@
+// src/controls/image-control.tsx
+import * as React9 from "react";
+import { Grid, Stack as Stack2 } from "@elementor/ui";
+import { __ as __2 } from "@wordpress/i18n";
+
+// src/bound-prop-context.tsx
+import * as React from "react";
+import { createContext, useContext } from "react";
+var BoundPropContext = createContext(null);
+var BoundPropProvider = ({ children, value, setValue, bind }) => {
+  return /* @__PURE__ */ React.createElement(BoundPropContext.Provider, { value: { value, setValue, bind } }, children);
+};
+function useBoundProp(defaultValue) {
+  const boundPropContext = 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
+import * as React2 from "react";
+import { Typography } from "@elementor/ui";
+var ControlLabel = ({ children }) => {
+  return /* @__PURE__ */ React2.createElement(Typography, { component: "label", variant: "caption", color: "text.secondary" }, children);
+};
+
+// src/create-control.tsx
+import * as React4 from "react";
+import { ErrorBoundary } from "@elementor/ui";
+
+// src/create-control-replacement.tsx
+import * as React3 from "react";
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var ControlReplacementContext = createContext2(void 0);
+var ControlReplacementProvider = ({
+  component,
+  condition,
+  children
+}) => {
+  return /* @__PURE__ */ React3.createElement(ControlReplacementContext.Provider, { value: { component, condition } }, children);
+};
+var useControlReplacement = () => {
+  const { value } = useBoundProp();
+  const controlReplacement = useContext2(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(ErrorBoundary, { fallback: null }, /* @__PURE__ */ React4.createElement(ControlReplacement, { ...props }));
+    }
+    return /* @__PURE__ */ React4.createElement(ErrorBoundary, { fallback: null }, /* @__PURE__ */ React4.createElement(Component, { ...props }));
+  };
+}
+
+// src/controls/image-media-control.tsx
+import * as React7 from "react";
+import { UploadIcon } from "@elementor/icons";
+import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack } from "@elementor/ui";
+import { useWpMediaAttachment, useWpMediaFrame } from "@elementor/wp-media";
+import { __ } from "@wordpress/i18n";
+
+// src/control-actions/control-actions.tsx
+import * as React6 from "react";
+import { styled, UnstableFloatingActionBar } from "@elementor/ui";
+
+// src/control-actions/control-actions-context.tsx
+import * as React5 from "react";
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var Context = createContext3(null);
+var ControlActionsProvider = ({ children, items }) => /* @__PURE__ */ React5.createElement(Context.Provider, { value: { items } }, children);
+var useControlActions = () => {
+  const context = useContext3(Context);
+  if (!context) {
+    throw new Error("useControlActions must be used within a ControlActionsProvider");
+  }
+  return context;
+};
+
+// src/control-actions/control-actions.tsx
+var FloatingBarContainer = 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(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 } = useWpMediaAttachment(id?.value || null);
+  const src = attachment?.url ?? url;
+  const { open } = 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(Card, { variant: "outlined" }, /* @__PURE__ */ React7.createElement(CardMedia, { image: src, sx: { height: 150 } }, isFetching ? /* @__PURE__ */ React7.createElement(Stack, { justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, /* @__PURE__ */ React7.createElement(CircularProgress, null)) : null), /* @__PURE__ */ React7.createElement(CardOverlay, null, /* @__PURE__ */ React7.createElement(ControlActions, null, /* @__PURE__ */ React7.createElement(Stack, { gap: 1 }, /* @__PURE__ */ React7.createElement(
+    Button,
+    {
+      size: "tiny",
+      color: "inherit",
+      variant: "outlined",
+      onClick: () => open({ mode: "browse" })
+    },
+    __("Select Image", "elementor")
+  ), /* @__PURE__ */ React7.createElement(
+    Button,
+    {
+      size: "tiny",
+      variant: "text",
+      color: "inherit",
+      startIcon: /* @__PURE__ */ React7.createElement(UploadIcon, null),
+      onClick: () => open({ mode: "upload" })
+    },
+    __("Upload Image", "elementor")
+  )))));
+});
+
+// src/controls/select-control.tsx
+import * as React8 from "react";
+import { MenuItem, Select } from "@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(Select, { displayEmpty: true, size: "tiny", value: value ?? "", onChange: handleChange, fullWidth: true }, options.map(({ label, ...props }) => /* @__PURE__ */ React8.createElement(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(Stack2, { 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(Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React9.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React9.createElement(ControlLabel, null, " ", __2("Image Resolution", "elementor"))), /* @__PURE__ */ React9.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React9.createElement(SelectControl, { options: props.sizes })))));
+});
+
+// src/controls/text-control.tsx
+import * as React10 from "react";
+import { TextField } from "@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(TextField, { size: "tiny", fullWidth: true, value, onChange: handleChange, placeholder }));
+});
+
+// src/controls/text-area-control.tsx
+import * as React11 from "react";
+import { TextField as TextField2 } from "@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(
+    TextField2,
+    {
+      size: "tiny",
+      multiline: true,
+      fullWidth: true,
+      rows: 5,
+      value,
+      onChange: handleChange,
+      placeholder
+    }
+  ));
+});
+
+// src/controls/size-control.tsx
+import * as React13 from "react";
+import { InputAdornment as InputAdornment2 } from "@elementor/ui";
+
+// src/components/text-field-inner-selection.tsx
+import * as React12 from "react";
+import { forwardRef, useId } from "react";
+import { bindMenu, bindTrigger, Button as Button2, InputAdornment, Menu, MenuItem as MenuItem2, TextField as TextField3, usePopupState } from "@elementor/ui";
+var TextFieldInnerSelection = forwardRef(
+  ({ placeholder, type, value, onChange, endAdornment, startAdornment }, ref) => {
+    return /* @__PURE__ */ React12.createElement(
+      TextField3,
+      {
+        size: "tiny",
+        fullWidth: true,
+        type,
+        value,
+        onChange,
+        placeholder,
+        InputProps: {
+          endAdornment,
+          startAdornment
+        },
+        ref
+      }
+    );
+  }
+);
+var SelectionEndAdornment = ({
+  options,
+  onClick,
+  value
+}) => {
+  const popupState = usePopupState({
+    variant: "popover",
+    popupId: useId()
+  });
+  const handleMenuItemClick = (index) => {
+    onClick(options[index]);
+    popupState.close();
+  };
+  return /* @__PURE__ */ React12.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React12.createElement(
+    Button2,
+    {
+      size: "small",
+      color: "inherit",
+      sx: { font: "inherit", minWidth: "initial" },
+      ...bindTrigger(popupState)
+    },
+    value.toUpperCase()
+  ), /* @__PURE__ */ React12.createElement(Menu, { MenuListProps: { dense: true }, ...bindMenu(popupState) }, options.map((option, index) => /* @__PURE__ */ React12.createElement(MenuItem2, { key: option, onClick: () => handleMenuItemClick(index) }, option.toUpperCase()))));
+};
+
+// src/hooks/use-sync-external-state.tsx
+import { useEffect, useState } from "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] = useState(toInternal(external, void 0));
+  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(InputAdornment2, { position: "start" }, startIcon),
+      type: "number",
+      value: Number.isNaN(state.value.size) ? "" : state.value.size,
+      onChange: handleSizeChange
+    }
+  ));
+});
+
+// src/controls/stroke-control.tsx
+import * as React15 from "react";
+import { Grid as Grid2, Stack as Stack3 } from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
+
+// src/controls/color-control.tsx
+import * as React14 from "react";
+import { UnstableColorField } from "@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(
+      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(Stack3, { gap: 1.5 }, /* @__PURE__ */ React15.createElement(
+    Control,
+    {
+      bind: "width",
+      label: __3("Stroke Width", "elementor"),
+      value: value?.value.width ?? defaultStrokeControlValue.value.width,
+      setValue: setStrokeWidth
+    },
+    /* @__PURE__ */ React15.createElement(SizeControl, { units })
+  ), /* @__PURE__ */ React15.createElement(
+    Control,
+    {
+      bind: "color",
+      label: __3("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(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React15.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React15.createElement(ControlLabel, null, label)), /* @__PURE__ */ React15.createElement(Grid2, { item: true, xs: 6 }, children)));
+
+// src/controls/box-shadow-repeater-control.tsx
+import * as React17 from "react";
+import { Grid as Grid3, Stack as Stack5, Typography as Typography3, UnstableColorIndicator } from "@elementor/ui";
+import { __ as __5 } from "@wordpress/i18n";
+
+// src/components/repeater.tsx
+import * as React16 from "react";
+import { useId as useId2, useRef, useState as useState2 } from "react";
+import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from "@elementor/icons";
+import {
+  bindPopover,
+  bindTrigger as bindTrigger2,
+  Box,
+  IconButton,
+  Popover,
+  Stack as Stack4,
+  Typography as Typography2,
+  UnstableTag,
+  usePopupState as usePopupState2
+} from "@elementor/ui";
+import { __ as __4 } from "@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(Stack4, null, /* @__PURE__ */ React16.createElement(Stack4, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pb: 1 } }, /* @__PURE__ */ React16.createElement(Typography2, { component: "label", variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ React16.createElement(IconButton, { size: SIZE, onClick: addRepeaterItem, "aria-label": __4("Add item", "elementor") }, /* @__PURE__ */ React16.createElement(PlusIcon, { fontSize: SIZE }))), /* @__PURE__ */ React16.createElement(Stack4, { 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 = useId2();
+  const controlRef = useRef(null);
+  const [anchorEl, setAnchorEl] = useState2(null);
+  const popoverState = usePopupState2({ popupId, variant: "popover" });
+  const popoverProps = bindPopover(popoverState);
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
+    UnstableTag,
+    {
+      label,
+      showActionsOnHover: true,
+      ref: controlRef,
+      variant: "outlined",
+      "aria-label": __4("Open item", "elementor"),
+      ...bindTrigger2(popoverState),
+      startIcon,
+      actions: /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
+        IconButton,
+        {
+          size: SIZE,
+          onClick: duplicateItem,
+          "aria-label": __4("Duplicate item", "elementor")
+        },
+        /* @__PURE__ */ React16.createElement(CopyIcon, { fontSize: SIZE })
+      ), /* @__PURE__ */ React16.createElement(
+        IconButton,
+        {
+          size: SIZE,
+          onClick: toggleDisableItem,
+          "aria-label": disabled ? __4("Enable item", "elementor") : __4("Disable item", "elementor")
+        },
+        disabled ? /* @__PURE__ */ React16.createElement(EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React16.createElement(EyeIcon, { fontSize: SIZE })
+      ), /* @__PURE__ */ React16.createElement(
+        IconButton,
+        {
+          size: SIZE,
+          onClick: removeItem,
+          "aria-label": __4("Remove item", "elementor")
+        },
+        /* @__PURE__ */ React16.createElement(XIcon, { fontSize: SIZE })
+      ))
+    }
+  ), /* @__PURE__ */ React16.createElement(
+    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(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: __5("Box shadow", "elementor"),
+      itemSettings: {
+        Icon: ItemIcon,
+        Label: ItemLabel,
+        Content: ItemContent,
+        initialValues: initialShadow
+      }
+    }
+  );
+});
+var ItemIcon = ({ value }) => /* @__PURE__ */ React17.createElement(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(Stack5, { gap: 1.5 }, /* @__PURE__ */ React17.createElement(Grid3, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React17.createElement(
+    Control2,
+    {
+      bind: "color",
+      value: value.value.color,
+      label: __5("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: __5("Position", "elementor"),
+      setValue: (v) => setShadow({ ...value.value, position: v || null })
+    },
+    /* @__PURE__ */ React17.createElement(
+      SelectControl,
+      {
+        options: [
+          { label: __5("Inset", "elementor"), value: "inset" },
+          { label: __5("Outset", "elementor"), value: "" }
+        ]
+      }
+    )
+  )), /* @__PURE__ */ React17.createElement(Grid3, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React17.createElement(
+    Control2,
+    {
+      bind: "hOffset",
+      label: __5("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: __5("Vertical", "elementor"),
+      value: value.value.vOffset,
+      setValue: (v) => setShadow({ ...value.value, vOffset: v })
+    },
+    /* @__PURE__ */ React17.createElement(SizeControl, null)
+  )), /* @__PURE__ */ React17.createElement(Grid3, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React17.createElement(
+    Control2,
+    {
+      bind: "blur",
+      value: value.value.blur,
+      label: __5("Blur", "elementor"),
+      setValue: (v) => setShadow({ ...value.value, blur: v })
+    },
+    /* @__PURE__ */ React17.createElement(SizeControl, null)
+  ), /* @__PURE__ */ React17.createElement(
+    Control2,
+    {
+      bind: "spread",
+      label: __5("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(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React17.createElement(Grid3, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React17.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React17.createElement(Typography3, { component: "label", variant: "caption", color: "text.secondary" }, label)), /* @__PURE__ */ React17.createElement(Grid3, { 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
+import * as React18 from "react";
+import { Grid as Grid4, Stack as Stack6, Typography as Typography4, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
+import { __ as __6 } from "@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: __6("Overlay", "elementor"),
+      itemSettings: {
+        Icon: ItemIcon2,
+        Label: ItemLabel2,
+        Content: ItemContent2,
+        initialValues: initialGradient
+      }
+    }
+  );
+});
+var ItemIcon2 = ({ value }) => /* @__PURE__ */ React18.createElement(UnstableColorIndicator2, { 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(Stack6, { gap: 1.5 }, /* @__PURE__ */ React18.createElement(
+    Control3,
+    {
+      bind: "color",
+      value: value.value.color,
+      label: __6("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(Grid4, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React18.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React18.createElement(Typography4, { component: "label", variant: "caption", color: "text.secondary" }, label)), /* @__PURE__ */ React18.createElement(Grid4, { 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
+import * as React20 from "react";
+
+// src/components/control-toggle-button-group.tsx
+import * as React19 from "react";
+import {
+  styled as styled2,
+  ToggleButton,
+  ToggleButtonGroup,
+  Tooltip
+} from "@elementor/ui";
+var StyledToggleButtonGroup = styled2(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(Tooltip, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React19.createElement(ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React19.createElement(Content, { size }))) : /* @__PURE__ */ React19.createElement(
+      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
+import * as React21 from "react";
+import { TextField as TextField4 } from "@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(
+    TextField4,
+    {
+      size: "tiny",
+      type: "number",
+      fullWidth: true,
+      value: isEmptyOrNaN(value) ? "" : value,
+      onChange: handleChange,
+      placeholder
+    }
+  ));
+});
+
+// src/controls/equal-unequal-sizes-control.tsx
+import * as React22 from "react";
+import { useId as useId3, useRef as useRef2 } from "react";
+import { bindPopover as bindPopover2, bindToggle, Grid as Grid5, Popover as Popover2, Stack as Stack7, ToggleButton as ToggleButton2, usePopupState as usePopupState3 } from "@elementor/ui";
+import { __ as __7 } from "@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 = useId3();
+  const controlRef = useRef2(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 = usePopupState3({
+    variant: "popover",
+    popupId
+  });
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Grid5, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React22.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React22.createElement(ControlLabel, null, label)), /* @__PURE__ */ React22.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React22.createElement(
+    EqualValuesControl,
+    {
+      value: mappedValues,
+      setValue: setControlValue,
+      iconButton: /* @__PURE__ */ React22.createElement(
+        ToggleButton2,
+        {
+          size: "tiny",
+          value: "check",
+          sx: { marginLeft: "auto" },
+          ...bindToggle(popupState),
+          selected: popupState.isOpen
+        },
+        icon
+      )
+    }
+  ))), /* @__PURE__ */ React22.createElement(
+    Popover2,
+    {
+      disablePortal: true,
+      disableScrollLock: true,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      ...bindPopover2(popupState),
+      slotProps: {
+        paper: { sx: { mt: 0.5, p: 2, pt: 1, width: controlRef.current?.getBoundingClientRect().width } }
+      }
+    },
+    /* @__PURE__ */ React22.createElement(Stack7, { gap: 1.5 }, /* @__PURE__ */ React22.createElement(Grid5, { 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(Grid5, { 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(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React22.createElement(Grid5, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React22.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React22.createElement(Grid5, { 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(Stack7, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React22.createElement(SizeControl, { placeholder: __7("MIXED", "elementor") }), iconButton)
+  );
+};
+
+// src/controls/linked-dimensions-control.tsx
+import * as React23 from "react";
+import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
+import { Grid as Grid6, Stack as Stack8, ToggleButton as ToggleButton3 } from "@elementor/ui";
+import { __ as __8 } from "@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 ? LinkIcon : DetachIcon;
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React23.createElement(ControlLabel, null, label), /* @__PURE__ */ React23.createElement(
+    ToggleButton3,
+    {
+      "aria-label": __8("Link Inputs", "elementor"),
+      size: "tiny",
+      value: "check",
+      selected: isLinked,
+      sx: { marginLeft: "auto" },
+      onChange: toggleLinked
+    },
+    /* @__PURE__ */ React23.createElement(LinkedIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React23.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React23.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, __8("Top", "elementor"))), /* @__PURE__ */ React23.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(
+    Control4,
+    {
+      bind: "top",
+      value: top,
+      setValue: setLinkedValue,
+      startIcon: /* @__PURE__ */ React23.createElement(SideTopIcon, { fontSize: "tiny" })
+    }
+  ))), /* @__PURE__ */ React23.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, __8("Right", "elementor"))), /* @__PURE__ */ React23.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(
+    Control4,
+    {
+      bind: "right",
+      value: right,
+      setValue: setLinkedValue,
+      startIcon: /* @__PURE__ */ React23.createElement(SideRightIcon, { fontSize: "tiny" })
+    }
+  )))), /* @__PURE__ */ React23.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React23.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, __8("Bottom", "elementor"))), /* @__PURE__ */ React23.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(
+    Control4,
+    {
+      bind: "bottom",
+      value: bottom,
+      setValue: setLinkedValue,
+      startIcon: /* @__PURE__ */ React23.createElement(SideBottomIcon, { fontSize: "tiny" })
+    }
+  ))), /* @__PURE__ */ React23.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, __8("Left", "elementor"))), /* @__PURE__ */ React23.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(
+    Control4,
+    {
+      bind: "left",
+      value: left,
+      setValue: setLinkedValue,
+      startIcon: /* @__PURE__ */ React23.createElement(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
+import { Fragment as Fragment4, useId as useId4, useState as useState3 } from "react";
+import * as React24 from "react";
+import { ChevronDownIcon, EditIcon, PhotoIcon, SearchIcon, XIcon as XIcon2 } from "@elementor/icons";
+import {
+  bindPopover as bindPopover3,
+  bindTrigger as bindTrigger3,
+  Box as Box2,
+  Divider,
+  IconButton as IconButton2,
+  InputAdornment as InputAdornment3,
+  Link,
+  ListSubheader,
+  MenuItem as MenuItem3,
+  MenuList,
+  Popover as Popover3,
+  Stack as Stack9,
+  TextField as TextField5,
+  Typography as Typography5,
+  UnstableTag as UnstableTag2,
+  usePopupState as usePopupState4
+} from "@elementor/ui";
+import { __ as __10 } from "@wordpress/i18n";
+
+// src/hooks/use-filtered-font-families.ts
+import { __ as __9 } from "@wordpress/i18n";
+var supportedCategories = {
+  system: __9("System", "elementor"),
+  googlefonts: __9("Google Fonts", "elementor"),
+  customfonts: __9("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] = useState3("");
+  const popupId = useId4();
+  const popoverState = usePopupState4({ 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(
+    UnstableTag2,
+    {
+      variant: "outlined",
+      label: fontFamily,
+      endIcon: /* @__PURE__ */ React24.createElement(ChevronDownIcon, { fontSize: "tiny" }),
+      ...bindTrigger3(popoverState),
+      fullWidth: true
+    }
+  ), /* @__PURE__ */ React24.createElement(
+    Popover3,
+    {
+      disablePortal: true,
+      disableScrollLock: true,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      ...bindPopover3(popoverState),
+      onClose: handleClose
+    },
+    /* @__PURE__ */ React24.createElement(Stack9, null, /* @__PURE__ */ React24.createElement(Stack9, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React24.createElement(EditIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React24.createElement(Typography5, { variant: "subtitle2" }, __10("Font Family", "elementor")), /* @__PURE__ */ React24.createElement(IconButton2, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React24.createElement(XIcon2, { fontSize: SIZE2 }))), /* @__PURE__ */ React24.createElement(Box2, { px: 1.5, pb: 1 }, /* @__PURE__ */ React24.createElement(
+      TextField5,
+      {
+        fullWidth: true,
+        size: SIZE2,
+        value: searchValue,
+        placeholder: __10("Search", "elementor"),
+        onChange: handleSearch,
+        InputProps: {
+          startAdornment: /* @__PURE__ */ React24.createElement(InputAdornment3, { position: "start" }, /* @__PURE__ */ React24.createElement(SearchIcon, { fontSize: SIZE2 }))
+        }
+      }
+    )), /* @__PURE__ */ React24.createElement(Divider, null), /* @__PURE__ */ React24.createElement(Box2, { sx: { overflowY: "auto", height: 260, width: 220 } }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React24.createElement(MenuList, { role: "listbox", tabIndex: 0 }, filteredFontFamilies.map(([category, items], index) => /* @__PURE__ */ React24.createElement(Fragment4, { key: index }, /* @__PURE__ */ React24.createElement(ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, category), items.map((item) => {
+      const isSelected = item === fontFamily;
+      return /* @__PURE__ */ React24.createElement(
+        MenuItem3,
+        {
+          key: item,
+          selected: isSelected,
+          autoFocus: isSelected,
+          onClick: () => {
+            setFontFamily(item);
+            handleClose();
+          },
+          sx: { typography: "caption" },
+          style: { fontFamily: item }
+        },
+        item
+      );
+    })))) : /* @__PURE__ */ React24.createElement(Stack9, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React24.createElement(PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React24.createElement(Typography5, { align: "center", variant: "caption", color: "text.secondary" }, __10("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React24.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React24.createElement(Typography5, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React24.createElement(
+      Link,
+      {
+        color: "secondary",
+        variant: "caption",
+        component: "button",
+        onClick: () => setSearchValue("")
+      },
+      __10("Clear the filters", "elementor")
+    ), "\xA0", __10("and try again.", "elementor")))))
+  ));
+});
+export {
+  BackgroundOverlayRepeaterControl,
+  BoundPropProvider,
+  BoxShadowRepeaterControl,
+  ColorControl,
+  ControlActionsProvider,
+  ControlLabel,
+  ControlReplacementProvider,
+  EqualUnequalSizesControl,
+  FontFamilyControl,
+  ImageControl,
+  LinkedDimensionsControl,
+  NumberControl,
+  SelectControl,
+  SizeControl,
+  StrokeControl,
+  TextAreaControl,
+  TextControl,
+  ToggleControl,
+  createControlReplacement,
+  useBoundProp,
+  useControlActions,
+  useSyncExternalState
+};
+//# sourceMappingURL=index.mjs.map