@elementor/editor-controls 4.0.0-535 → 4.0.0-536

package/dist/index.d.mts

@@ -394,13 +394,15 @@ declare const ControlFormLabel: (props: FormLabelProps) => React$1.JSX.Element;
 
 declare const DisplayConditionsControl: ControlComponent$1<() => React$1.JSX.Element>;
 
+declare const AttributesControl: ControlComponent$1<() => React$1.JSX.Element>;
+
 type V4PromotionData = {
     title: string;
     content: string;
     image: string;
     ctaUrl: string;
 };
-type V4PromotionKey = 'displayConditions' | 'customCss';
+type V4PromotionKey = 'displayConditions' | 'customCss' | 'attributes';
 
 type PromotionTriggerProps = {
     promotionKey: V4PromotionKey;
@@ -697,4 +699,4 @@ declare const useElementCanHaveChildren: () => boolean;
 
 declare const useFontFamilies: () => FontCategory[];
 
-export { type AdornmentComponent, type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, DisplayConditionsControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, type InlineEditorToolbarProps, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PopoverGridContainer, PositionControl, PromotionTrigger, type PromotionTriggerRef, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UnstableSizeField, UrlControl, type V4PromotionData, type V4PromotionKey, createControl, createControlReplacementsRegistry, enqueueFont, getControlReplacements, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, registerControlReplacement, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useElementCanHaveChildren, useFontFamilies, useSyncExternalState };
+export { type AdornmentComponent, type AngleUnit, AspectRatioControl, AttributesControl, BackgroundControl, BoxShadowRepeaterControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, DisplayConditionsControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, type InlineEditorToolbarProps, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PopoverGridContainer, PositionControl, PromotionTrigger, type PromotionTriggerRef, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UnstableSizeField, UrlControl, type V4PromotionData, type V4PromotionKey, createControl, createControlReplacementsRegistry, enqueueFont, getControlReplacements, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, registerControlReplacement, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useElementCanHaveChildren, useFontFamilies, useSyncExternalState };

package/dist/index.d.ts

@@ -394,13 +394,15 @@ declare const ControlFormLabel: (props: FormLabelProps) => React$1.JSX.Element;
 
 declare const DisplayConditionsControl: ControlComponent$1<() => React$1.JSX.Element>;
 
+declare const AttributesControl: ControlComponent$1<() => React$1.JSX.Element>;
+
 type V4PromotionData = {
     title: string;
     content: string;
     image: string;
     ctaUrl: string;
 };
-type V4PromotionKey = 'displayConditions' | 'customCss';
+type V4PromotionKey = 'displayConditions' | 'customCss' | 'attributes';
 
 type PromotionTriggerProps = {
     promotionKey: V4PromotionKey;
@@ -697,4 +699,4 @@ declare const useElementCanHaveChildren: () => boolean;
 
 declare const useFontFamilies: () => FontCategory[];
 
-export { type AdornmentComponent, type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, DisplayConditionsControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, type InlineEditorToolbarProps, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PopoverGridContainer, PositionControl, PromotionTrigger, type PromotionTriggerRef, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UnstableSizeField, UrlControl, type V4PromotionData, type V4PromotionKey, createControl, createControlReplacementsRegistry, enqueueFont, getControlReplacements, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, registerControlReplacement, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useElementCanHaveChildren, useFontFamilies, useSyncExternalState };
+export { type AdornmentComponent, type AngleUnit, AspectRatioControl, AttributesControl, BackgroundControl, BoxShadowRepeaterControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, DisplayConditionsControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, type InlineEditorToolbarProps, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PopoverGridContainer, PositionControl, PromotionTrigger, type PromotionTriggerRef, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UnstableSizeField, UrlControl, type V4PromotionData, type V4PromotionKey, createControl, createControlReplacementsRegistry, enqueueFont, getControlReplacements, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, registerControlReplacement, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useElementCanHaveChildren, useFontFamilies, useSyncExternalState };

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   AspectRatioControl: () => AspectRatioControl,
+  AttributesControl: () => AttributesControl,
   BackgroundControl: () => BackgroundControl,
   BoxShadowRepeaterControl: () => BoxShadowRepeaterControl,
   ClearIconButton: () => ClearIconButton,
@@ -6533,22 +6534,55 @@ var DisplayConditionsControl = createControl(() => {
   );
 });
 
-// src/components/icon-buttons/clear-icon-button.tsx
+// src/components/promotions/attributes-control.tsx
 var React102 = __toESM(require("react"));
+var import_react56 = require("react");
 var import_icons34 = require("@elementor/icons");
 var import_ui88 = require("@elementor/ui");
-var CustomIconButton = (0, import_ui88.styled)(import_ui88.IconButton)(({ theme }) => ({
+var import_i18n51 = require("@wordpress/i18n");
+var ARIA_LABEL2 = (0, import_i18n51.__)("Attributes", "elementor");
+var AttributesControl = createControl(() => {
+  const triggerRef = (0, import_react56.useRef)(null);
+  return /* @__PURE__ */ React102.createElement(
+    import_ui88.Stack,
+    {
+      direction: "row",
+      spacing: 2,
+      sx: {
+        justifyContent: "flex-end",
+        alignItems: "center"
+      }
+    },
+    /* @__PURE__ */ React102.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes" }),
+    /* @__PURE__ */ React102.createElement(import_ui88.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React102.createElement(
+      import_icons34.PlusIcon,
+      {
+        "aria-label": ARIA_LABEL2,
+        fontSize: "tiny",
+        color: "disabled",
+        onClick: () => triggerRef.current?.toggle(),
+        sx: { cursor: "pointer" }
+      }
+    ))
+  );
+});
+
+// src/components/icon-buttons/clear-icon-button.tsx
+var React103 = __toESM(require("react"));
+var import_icons35 = require("@elementor/icons");
+var import_ui89 = require("@elementor/ui");
+var CustomIconButton = (0, import_ui89.styled)(import_ui89.IconButton)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React102.createElement(import_ui88.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React102.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React102.createElement(import_icons34.BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React103.createElement(import_ui89.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React103.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React103.createElement(import_icons35.BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
-var React103 = __toESM(require("react"));
-var import_react56 = require("react");
-var import_icons35 = require("@elementor/icons");
-var import_ui89 = require("@elementor/ui");
-var import_i18n51 = require("@wordpress/i18n");
+var React104 = __toESM(require("react"));
+var import_react57 = require("react");
+var import_icons36 = require("@elementor/icons");
+var import_ui90 = require("@elementor/ui");
+var import_i18n52 = require("@wordpress/i18n");
 var SIZE9 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
 var Repeater3 = ({
@@ -6566,7 +6600,7 @@ var Repeater3 = ({
   openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
   isSortable = true
 }) => {
-  const [openItem, setOpenItem] = (0, import_react56.useState)(initialOpenItem);
+  const [openItem, setOpenItem] = (0, import_react57.useState)(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -6629,8 +6663,8 @@ var Repeater3 = ({
   };
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
-  const addButton = /* @__PURE__ */ React103.createElement(
-    import_ui89.IconButton,
+  const addButton = /* @__PURE__ */ React104.createElement(
+    import_ui90.IconButton,
     {
       size: SIZE9,
       sx: {
@@ -6638,32 +6672,32 @@ var Repeater3 = ({
       },
       disabled: isButtonDisabled,
       onClick: addRepeaterItem,
-      "aria-label": (0, import_i18n51.__)("Add item", "elementor")
+      "aria-label": (0, import_i18n52.__)("Add item", "elementor")
     },
-    /* @__PURE__ */ React103.createElement(import_icons35.PlusIcon, { fontSize: SIZE9 })
+    /* @__PURE__ */ React104.createElement(import_icons36.PlusIcon, { fontSize: SIZE9 })
   );
-  return /* @__PURE__ */ React103.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React103.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React103.createElement(
-    import_ui89.Infotip,
+  return /* @__PURE__ */ React104.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React104.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React104.createElement(
+    import_ui90.Infotip,
     {
       placement: "right",
       content: addButtonInfotipContent,
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React103.createElement(import_ui89.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
-  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React103.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
+    /* @__PURE__ */ React104.createElement(import_ui90.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React104.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React103.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React103.createElement(
+    return /* @__PURE__ */ React104.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React104.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React103.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React103.createElement(itemSettings.Label, { value, index })),
-        startIcon: /* @__PURE__ */ React103.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React103.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React104.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React104.createElement(itemSettings.Label, { value, index })),
+        startIcon: /* @__PURE__ */ React104.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React104.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -6675,7 +6709,7 @@ var Repeater3 = ({
         actions: itemSettings.actions,
         value
       },
-      (props) => /* @__PURE__ */ React103.createElement(
+      (props) => /* @__PURE__ */ React104.createElement(
         itemSettings.Content,
         {
           ...props,
@@ -6705,27 +6739,27 @@ var RepeaterItem = ({
   value
 }) => {
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
-  const duplicateLabel = (0, import_i18n51.__)("Duplicate", "elementor");
-  const toggleLabel = propDisabled ? (0, import_i18n51.__)("Show", "elementor") : (0, import_i18n51.__)("Hide", "elementor");
-  const removeLabel = (0, import_i18n51.__)("Remove", "elementor");
-  return /* @__PURE__ */ React103.createElement(React103.Fragment, null, /* @__PURE__ */ React103.createElement(
+  const duplicateLabel = (0, import_i18n52.__)("Duplicate", "elementor");
+  const toggleLabel = propDisabled ? (0, import_i18n52.__)("Show", "elementor") : (0, import_i18n52.__)("Hide", "elementor");
+  const removeLabel = (0, import_i18n52.__)("Remove", "elementor");
+  return /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(
     RepeaterTag,
     {
       disabled,
       label,
       ref: setRef,
-      "aria-label": (0, import_i18n51.__)("Open item", "elementor"),
-      ...(0, import_ui89.bindTrigger)(popoverState),
+      "aria-label": (0, import_i18n52.__)("Open item", "elementor"),
+      ...(0, import_ui90.bindTrigger)(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React103.createElement(React103.Fragment, null, showDuplicate && /* @__PURE__ */ React103.createElement(import_ui89.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React103.createElement(import_ui89.IconButton, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React103.createElement(import_icons35.CopyIcon, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React103.createElement(import_ui89.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React103.createElement(import_ui89.IconButton, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React103.createElement(import_icons35.EyeOffIcon, { fontSize: SIZE9 }) : /* @__PURE__ */ React103.createElement(import_icons35.EyeIcon, { fontSize: SIZE9 }))), actions?.(value), showRemove && /* @__PURE__ */ React103.createElement(import_ui89.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React103.createElement(import_ui89.IconButton, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React103.createElement(import_icons35.XIcon, { fontSize: SIZE9 }))))
+      actions: /* @__PURE__ */ React104.createElement(React104.Fragment, null, showDuplicate && /* @__PURE__ */ React104.createElement(import_ui90.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(import_ui90.IconButton, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React104.createElement(import_icons36.CopyIcon, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React104.createElement(import_ui90.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(import_ui90.IconButton, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React104.createElement(import_icons36.EyeOffIcon, { fontSize: SIZE9 }) : /* @__PURE__ */ React104.createElement(import_icons36.EyeIcon, { fontSize: SIZE9 }))), actions?.(value), showRemove && /* @__PURE__ */ React104.createElement(import_ui90.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React104.createElement(import_ui90.IconButton, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React104.createElement(import_icons36.XIcon, { fontSize: SIZE9 }))))
     }
-  ), /* @__PURE__ */ React103.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React103.createElement(import_ui89.Box, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React104.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React104.createElement(import_ui90.Box, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = (0, import_react56.useState)(null);
-  const popoverState = (0, import_ui89.usePopupState)({ variant: "popover" });
-  const popoverProps = (0, import_ui89.bindPopover)(popoverState);
-  (0, import_react56.useEffect)(() => {
+  const [ref, setRef] = (0, import_react57.useState)(null);
+  const popoverState = (0, import_ui90.usePopupState)({ variant: "popover" });
+  const popoverProps = (0, import_ui90.bindPopover)(popoverState);
+  (0, import_react57.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -6740,20 +6774,20 @@ var usePopover = (openOnMount, onOpen) => {
 };
 
 // src/components/inline-editor-toolbar.tsx
+var React106 = __toESM(require("react"));
+var import_react59 = require("react");
+var import_editor_elements6 = require("@elementor/editor-elements");
+var import_icons38 = require("@elementor/icons");
+var import_ui92 = require("@elementor/ui");
+var import_react60 = require("@tiptap/react");
+var import_i18n54 = require("@wordpress/i18n");
+
+// src/components/url-popover.tsx
 var React105 = __toESM(require("react"));
 var import_react58 = require("react");
-var import_editor_elements6 = require("@elementor/editor-elements");
 var import_icons37 = require("@elementor/icons");
 var import_ui91 = require("@elementor/ui");
-var import_react59 = require("@tiptap/react");
 var import_i18n53 = require("@wordpress/i18n");
-
-// src/components/url-popover.tsx
-var React104 = __toESM(require("react"));
-var import_react57 = require("react");
-var import_icons36 = require("@elementor/icons");
-var import_ui90 = require("@elementor/ui");
-var import_i18n52 = require("@wordpress/i18n");
 var UrlPopover = ({
   popupState,
   restoreValue,
@@ -6763,8 +6797,8 @@ var UrlPopover = ({
   openInNewTab,
   onToggleNewTab
 }) => {
-  const inputRef = (0, import_react57.useRef)(null);
-  (0, import_react57.useEffect)(() => {
+  const inputRef = (0, import_react58.useRef)(null);
+  (0, import_react58.useEffect)(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -6773,57 +6807,57 @@ var UrlPopover = ({
     restoreValue();
     popupState.close();
   };
-  return /* @__PURE__ */ React104.createElement(
-    import_ui90.Popover,
+  return /* @__PURE__ */ React105.createElement(
+    import_ui91.Popover,
     {
       slotProps: {
         paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
       },
-      ...(0, import_ui90.bindPopover)(popupState),
+      ...(0, import_ui91.bindPopover)(popupState),
       anchorOrigin: { vertical: "top", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "left" },
       onClose: handleClose
     },
-    /* @__PURE__ */ React104.createElement(import_ui90.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React104.createElement(
-      import_ui90.TextField,
+    /* @__PURE__ */ React105.createElement(import_ui91.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React105.createElement(
+      import_ui91.TextField,
       {
         value,
         onChange,
         size: "tiny",
         fullWidth: true,
-        placeholder: (0, import_i18n52.__)("Type a URL", "elementor"),
+        placeholder: (0, import_i18n53.__)("Type a URL", "elementor"),
         inputProps: { ref: inputRef },
         color: "secondary",
         InputProps: { sx: { borderRadius: "8px" } },
         onKeyUp: (event) => event.key === "Enter" && handleClose()
       }
-    ), /* @__PURE__ */ React104.createElement(import_ui90.Tooltip, { title: (0, import_i18n52.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React104.createElement(
-      import_ui90.ToggleButton,
+    ), /* @__PURE__ */ React105.createElement(import_ui91.Tooltip, { title: (0, import_i18n53.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React105.createElement(
+      import_ui91.ToggleButton,
       {
         size: "tiny",
         value: "newTab",
         selected: openInNewTab,
         onClick: onToggleNewTab,
-        "aria-label": (0, import_i18n52.__)("Open in a new tab", "elementor"),
+        "aria-label": (0, import_i18n53.__)("Open in a new tab", "elementor"),
         sx: { borderRadius: "8px" }
       },
-      /* @__PURE__ */ React104.createElement(import_icons36.ExternalLinkIcon, { fontSize: "tiny" })
+      /* @__PURE__ */ React105.createElement(import_icons37.ExternalLinkIcon, { fontSize: "tiny" })
     )))
   );
 };
 
 // src/components/inline-editor-toolbar.tsx
 var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
-  const [urlValue, setUrlValue] = (0, import_react58.useState)("");
-  const [openInNewTab, setOpenInNewTab] = (0, import_react58.useState)(false);
-  const toolbarRef = (0, import_react58.useRef)(null);
-  const linkPopupState = (0, import_ui91.usePopupState)({ variant: "popover" });
+  const [urlValue, setUrlValue] = (0, import_react59.useState)("");
+  const [openInNewTab, setOpenInNewTab] = (0, import_react59.useState)(false);
+  const toolbarRef = (0, import_react59.useRef)(null);
+  const linkPopupState = (0, import_ui92.usePopupState)({ variant: "popover" });
   const hasLinkOnElement = elementId ? checkIfElementHasLink(elementId) : false;
-  const editorState = (0, import_react59.useEditorState)({
+  const editorState = (0, import_react60.useEditorState)({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = (0, import_react58.useMemo)(() => {
+  const formatButtonsList = (0, import_react59.useMemo)(() => {
     const buttons = Object.values(formatButtons);
     if (hasLinkOnElement) {
       return buttons.filter((button) => button.action !== "link");
@@ -6860,11 +6894,11 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     }
     linkPopupState.close();
   };
-  React105.useEffect(() => {
+  React106.useEffect(() => {
     editor?.commands?.focus();
   }, [editor]);
-  return /* @__PURE__ */ React105.createElement(
-    import_ui91.Box,
+  return /* @__PURE__ */ React106.createElement(
+    import_ui92.Box,
     {
       ref: toolbarRef,
       sx: {
@@ -6880,9 +6914,9 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
         ...sx
       }
     },
-    /* @__PURE__ */ React105.createElement(import_ui91.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React105.createElement(import_ui91.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
-    /* @__PURE__ */ React105.createElement(
-      import_ui91.ToggleButtonGroup,
+    /* @__PURE__ */ React106.createElement(import_ui92.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React106.createElement(import_ui92.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
+    /* @__PURE__ */ React106.createElement(
+      import_ui92.ToggleButtonGroup,
       {
         value: editorState,
         size: "tiny",
@@ -6890,7 +6924,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
           display: "flex",
           gap: 0.5,
           border: "none",
-          [`& .${import_ui91.toggleButtonGroupClasses.firstButton}, & .${import_ui91.toggleButtonGroupClasses.middleButton}, & .${import_ui91.toggleButtonGroupClasses.lastButton}`]: {
+          [`& .${import_ui92.toggleButtonGroupClasses.firstButton}, & .${import_ui92.toggleButtonGroupClasses.middleButton}, & .${import_ui92.toggleButtonGroupClasses.lastButton}`]: {
             borderRadius: "8px",
             border: "none",
             marginLeft: 0,
@@ -6903,8 +6937,8 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
           }
         }
       },
-      formatButtonsList.map((button) => /* @__PURE__ */ React105.createElement(import_ui91.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React105.createElement(
-        import_ui91.ToggleButton,
+      formatButtonsList.map((button) => /* @__PURE__ */ React106.createElement(import_ui92.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React106.createElement(
+        import_ui92.ToggleButton,
         {
           value: button.action,
           "aria-label": button.label,
@@ -6921,7 +6955,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
         button.icon
       )))
     ),
-    /* @__PURE__ */ React105.createElement(
+    /* @__PURE__ */ React106.createElement(
       UrlPopover,
       {
         popupState: linkPopupState,
@@ -6938,64 +6972,64 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
 var checkIfElementHasLink = (elementId) => !!(0, import_editor_elements6.getElementSetting)(elementId, "link")?.value?.destination;
 var toolbarButtons = {
   clear: {
-    label: (0, import_i18n53.__)("Clear", "elementor"),
-    icon: /* @__PURE__ */ React105.createElement(import_icons37.MinusIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n54.__)("Clear", "elementor"),
+    icon: /* @__PURE__ */ React106.createElement(import_icons38.MinusIcon, { fontSize: "tiny" }),
     action: "clear",
     method: (editor) => {
       editor.chain().focus().clearNodes().unsetAllMarks().run();
     }
   },
   bold: {
-    label: (0, import_i18n53.__)("Bold", "elementor"),
-    icon: /* @__PURE__ */ React105.createElement(import_icons37.BoldIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n54.__)("Bold", "elementor"),
+    icon: /* @__PURE__ */ React106.createElement(import_icons38.BoldIcon, { fontSize: "tiny" }),
     action: "bold",
     method: (editor) => {
       editor.chain().focus().toggleBold().run();
     }
   },
   italic: {
-    label: (0, import_i18n53.__)("Italic", "elementor"),
-    icon: /* @__PURE__ */ React105.createElement(import_icons37.ItalicIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n54.__)("Italic", "elementor"),
+    icon: /* @__PURE__ */ React106.createElement(import_icons38.ItalicIcon, { fontSize: "tiny" }),
     action: "italic",
     method: (editor) => {
       editor.chain().focus().toggleItalic().run();
     }
   },
   underline: {
-    label: (0, import_i18n53.__)("Underline", "elementor"),
-    icon: /* @__PURE__ */ React105.createElement(import_icons37.UnderlineIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n54.__)("Underline", "elementor"),
+    icon: /* @__PURE__ */ React106.createElement(import_icons38.UnderlineIcon, { fontSize: "tiny" }),
     action: "underline",
     method: (editor) => {
       editor.chain().focus().toggleUnderline().run();
     }
   },
   strike: {
-    label: (0, import_i18n53.__)("Strikethrough", "elementor"),
-    icon: /* @__PURE__ */ React105.createElement(import_icons37.StrikethroughIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n54.__)("Strikethrough", "elementor"),
+    icon: /* @__PURE__ */ React106.createElement(import_icons38.StrikethroughIcon, { fontSize: "tiny" }),
     action: "strike",
     method: (editor) => {
       editor.chain().focus().toggleStrike().run();
     }
   },
   superscript: {
-    label: (0, import_i18n53.__)("Superscript", "elementor"),
-    icon: /* @__PURE__ */ React105.createElement(import_icons37.SuperscriptIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n54.__)("Superscript", "elementor"),
+    icon: /* @__PURE__ */ React106.createElement(import_icons38.SuperscriptIcon, { fontSize: "tiny" }),
     action: "superscript",
     method: (editor) => {
       editor.chain().focus().toggleSuperscript().run();
     }
   },
   subscript: {
-    label: (0, import_i18n53.__)("Subscript", "elementor"),
-    icon: /* @__PURE__ */ React105.createElement(import_icons37.SubscriptIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n54.__)("Subscript", "elementor"),
+    icon: /* @__PURE__ */ React106.createElement(import_icons38.SubscriptIcon, { fontSize: "tiny" }),
     action: "subscript",
     method: (editor) => {
       editor.chain().focus().toggleSubscript().run();
     }
   },
   link: {
-    label: (0, import_i18n53.__)("Link", "elementor"),
-    icon: /* @__PURE__ */ React105.createElement(import_icons37.LinkIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n54.__)("Link", "elementor"),
+    icon: /* @__PURE__ */ React106.createElement(import_icons38.LinkIcon, { fontSize: "tiny" }),
     action: "link",
     method: null
   }
@@ -7004,8 +7038,8 @@ var { clear: clearButton, ...formatButtons } = toolbarButtons;
 var possibleFormats = Object.keys(formatButtons);
 
 // src/components/size/unstable-size-field.tsx
-var React108 = __toESM(require("react"));
-var import_ui93 = require("@elementor/ui");
+var React109 = __toESM(require("react"));
+var import_ui94 = require("@elementor/ui");
 
 // src/hooks/use-size-value.ts
 var useSizeValue = (externalValue, onChange, defaultValue) => {
@@ -7045,25 +7079,25 @@ var differsFromExternal = (newState, externalState) => {
 };
 
 // src/components/size/unit-select.tsx
-var React106 = __toESM(require("react"));
-var import_react60 = require("react");
+var React107 = __toESM(require("react"));
+var import_react61 = require("react");
 var import_editor_ui14 = require("@elementor/editor-ui");
-var import_ui92 = require("@elementor/ui");
+var import_ui93 = require("@elementor/ui");
 var menuItemContentStyles = {
   display: "flex",
   flexDirection: "column",
   justifyContent: "center"
 };
 var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
-  const popupState = (0, import_ui92.usePopupState)({
+  const popupState = (0, import_ui93.usePopupState)({
     variant: "popover",
-    popupId: (0, import_react60.useId)()
+    popupId: (0, import_react61.useId)()
   });
   const handleMenuItemClick = (index) => {
     onClick(options[index]);
     popupState.close();
   };
-  return /* @__PURE__ */ React106.createElement(React106.Fragment, null, /* @__PURE__ */ React106.createElement(StyledButton2, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui92.bindTrigger)(popupState) }, value), /* @__PURE__ */ React106.createElement(import_ui92.Menu, { MenuListProps: { dense: true }, ...(0, import_ui92.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React106.createElement(
+  return /* @__PURE__ */ React107.createElement(React107.Fragment, null, /* @__PURE__ */ React107.createElement(StyledButton2, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui93.bindTrigger)(popupState) }, value), /* @__PURE__ */ React107.createElement(import_ui93.Menu, { MenuListProps: { dense: true }, ...(0, import_ui93.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React107.createElement(
     import_editor_ui14.MenuListItem,
     {
       key: option,
@@ -7082,7 +7116,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
     option.toUpperCase()
   ))));
 };
-var StyledButton2 = (0, import_ui92.styled)(import_ui92.Button, {
+var StyledButton2 = (0, import_ui93.styled)(import_ui93.Button, {
   shouldForwardProp: (prop) => prop !== "isPrimaryColor"
 })(({ isPrimaryColor, theme }) => ({
   color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
@@ -7092,11 +7126,11 @@ var StyledButton2 = (0, import_ui92.styled)(import_ui92.Button, {
 }));
 
 // src/components/size/unstable-size-input.tsx
-var React107 = __toESM(require("react"));
-var import_react61 = require("react");
-var UnstableSizeInput = (0, import_react61.forwardRef)(
+var React108 = __toESM(require("react"));
+var import_react62 = require("react");
+var UnstableSizeInput = (0, import_react62.forwardRef)(
   ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
-    return /* @__PURE__ */ React107.createElement(
+    return /* @__PURE__ */ React108.createElement(
       NumberInput,
       {
         ref,
@@ -7140,7 +7174,7 @@ var UnstableSizeField = ({
   const shouldHighlightUnit = () => {
     return hasValue(size);
   };
-  return /* @__PURE__ */ React108.createElement(
+  return /* @__PURE__ */ React109.createElement(
     UnstableSizeInput,
     {
       type: "number",
@@ -7149,7 +7183,7 @@ var UnstableSizeField = ({
       onChange: (event) => setSize(event.target.value),
       InputProps: {
         ...InputProps,
-        endAdornment: /* @__PURE__ */ React108.createElement(import_ui93.InputAdornment, { position: "end" }, /* @__PURE__ */ React108.createElement(
+        endAdornment: /* @__PURE__ */ React109.createElement(import_ui94.InputAdornment, { position: "end" }, /* @__PURE__ */ React109.createElement(
           UnitSelect,
           {
             options: units2,
@@ -7167,13 +7201,13 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-var import_react62 = require("react");
+var import_react63 = require("react");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
-var import_i18n54 = require("@wordpress/i18n");
+var import_i18n55 = require("@wordpress/i18n");
 var supportedCategories = {
-  system: (0, import_i18n54.__)("System", "elementor"),
-  custom: (0, import_i18n54.__)("Custom Fonts", "elementor"),
-  googlefonts: (0, import_i18n54.__)("Google Fonts", "elementor")
+  system: (0, import_i18n55.__)("System", "elementor"),
+  custom: (0, import_i18n55.__)("Custom Fonts", "elementor"),
+  googlefonts: (0, import_i18n55.__)("Google Fonts", "elementor")
 };
 var getFontFamilies = () => {
   const { controls } = (0, import_editor_v1_adapters.getElementorConfig)();
@@ -7185,7 +7219,7 @@ var getFontFamilies = () => {
 };
 var useFontFamilies = () => {
   const fontFamilies = getFontFamilies();
-  return (0, import_react62.useMemo)(() => {
+  return (0, import_react63.useMemo)(() => {
     const categoriesOrder = ["system", "custom", "googlefonts"];
     return Object.entries(fontFamilies || {}).reduce((acc, [font, category]) => {
       if (!supportedCategories[category]) {
@@ -7206,6 +7240,7 @@ var useFontFamilies = () => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AspectRatioControl,
+  AttributesControl,
   BackgroundControl,
   BoxShadowRepeaterControl,
   ClearIconButton,