@elementor/editor-editing-panel 3.35.0-374 → 3.35.0-376

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/index.d.mts +2 -1
  2. package/dist/index.d.ts +2 -1
  3. package/dist/index.js +305 -238
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +230 -163
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +20 -20
  8. package/src/components/promotions/custom-css.tsx +48 -0
  9. package/src/components/promotions/init.tsx +13 -0
  10. package/src/components/section.tsx +8 -3
  11. package/src/components/style-tab-section.tsx +5 -3
  12. package/src/init.ts +3 -0
package/dist/index.js CHANGED
@@ -48,7 +48,7 @@ __export(index_exports, {
48
48
  doUnapplyClass: () => doUnapplyClass,
49
49
  getSubtitle: () => getSubtitle,
50
50
  getTitle: () => getTitle,
51
- init: () => init3,
51
+ init: () => init4,
52
52
  injectIntoClassSelectorActions: () => injectIntoClassSelectorActions,
53
53
  injectIntoCssClassConvert: () => injectIntoCssClassConvert,
54
54
  injectIntoPanelHeaderTop: () => injectIntoPanelHeaderTop,
@@ -2007,11 +2007,14 @@ function getCollapsibleValue(value, isOpen) {
2007
2007
  }
2008
2008
 
2009
2009
  // src/components/section.tsx
2010
- function Section({ title, children, defaultExpanded = false, titleEnd, unmountOnExit = true }) {
2010
+ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOnExit = true, action }) {
2011
2011
  const [isOpen, setIsOpen] = useStateByElement(title, !!defaultExpanded);
2012
2012
  const ref = (0, import_react19.useRef)(null);
2013
+ const isDisabled = !!action;
2013
2014
  const handleClick = () => {
2014
- setIsOpen(!isOpen);
2015
+ if (!isDisabled) {
2016
+ setIsOpen(!isOpen);
2017
+ }
2015
2018
  };
2016
2019
  const id = (0, import_react19.useId)();
2017
2020
  const labelId = `label-${id}`;
@@ -2033,7 +2036,8 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
2033
2036
  sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
2034
2037
  }
2035
2038
  ), getCollapsibleValue(titleEnd, isOpen)),
2036
- /* @__PURE__ */ React19.createElement(import_editor_ui5.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
2039
+ action,
2040
+ /* @__PURE__ */ React19.createElement(import_editor_ui5.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny", disabled: isDisabled })
2037
2041
  ), /* @__PURE__ */ React19.createElement(
2038
2042
  import_ui14.Collapse,
2039
2043
  {
@@ -4634,9 +4638,9 @@ var TypographySection = () => {
4634
4638
  // src/components/style-tab-section.tsx
4635
4639
  var React81 = __toESM(require("react"));
4636
4640
  var StyleTabSection = ({ section, fields = [], unmountOnExit = true }) => {
4637
- const { component, name, title } = section;
4641
+ const { component, name, title, action } = section;
4638
4642
  const tabDefaults = useDefaultPanelSettings();
4639
- const SectionComponent = component;
4643
+ const SectionComponent = component || (() => /* @__PURE__ */ React81.createElement(React81.Fragment, null));
4640
4644
  const isExpanded = tabDefaults.defaultSectionsExpanded.style?.includes(name);
4641
4645
  return /* @__PURE__ */ React81.createElement(
4642
4646
  Section,
@@ -4644,7 +4648,8 @@ var StyleTabSection = ({ section, fields = [], unmountOnExit = true }) => {
4644
4648
  title,
4645
4649
  defaultExpanded: isExpanded,
4646
4650
  titleEnd: getStylesInheritanceIndicators(fields),
4647
- unmountOnExit
4651
+ unmountOnExit,
4652
+ action
4648
4653
  },
4649
4654
  /* @__PURE__ */ React81.createElement(SectionComponent, null)
4650
4655
  );
@@ -4925,14 +4930,75 @@ var EditingPanelHooks = () => {
4925
4930
  return null;
4926
4931
  };
4927
4932
 
4928
- // src/controls-registry/element-controls/tabs-control/tabs-control.tsx
4933
+ // src/components/promotions/custom-css.tsx
4929
4934
  var React86 = __toESM(require("react"));
4935
+ var import_react38 = require("react");
4936
+ var import_editor_ui8 = require("@elementor/editor-ui");
4937
+ var import_icons22 = require("@elementor/icons");
4938
+ var import_ui40 = require("@elementor/ui");
4939
+ var import_i18n58 = require("@wordpress/i18n");
4940
+ var CustomCssSection = () => {
4941
+ const [showInfoTip, sethSowInfoTip] = (0, import_react38.useState)(false);
4942
+ return /* @__PURE__ */ React86.createElement(
4943
+ StyleTabSection,
4944
+ {
4945
+ section: {
4946
+ name: "Custom CSS",
4947
+ title: (0, import_i18n58.__)("Custom CSS", "elementor"),
4948
+ action: /* @__PURE__ */ React86.createElement(
4949
+ import_editor_ui8.PromotionInfotip,
4950
+ {
4951
+ title: (0, import_i18n58.__)("Custom CSS", "elementor"),
4952
+ content: (0, import_i18n58.__)(
4953
+ "Add custom CSS to refine and enrich the appearance of any element on your site.",
4954
+ "elementor"
4955
+ ),
4956
+ assetUrl: "https://assets.elementor.com/packages/v1/images/custom-css-promotion.png",
4957
+ ctaUrl: "https://go.elementor.com/go-pro-style-custom-css/",
4958
+ open: showInfoTip,
4959
+ setOpen: sethSowInfoTip
4960
+ },
4961
+ /* @__PURE__ */ React86.createElement(
4962
+ import_ui40.Chip,
4963
+ {
4964
+ size: "tiny",
4965
+ color: "promotion",
4966
+ variant: "standard",
4967
+ icon: /* @__PURE__ */ React86.createElement(import_icons22.CrownFilledIcon, null),
4968
+ sx: {
4969
+ mr: 1,
4970
+ "& .MuiChip-label": {
4971
+ display: "none"
4972
+ }
4973
+ },
4974
+ onClick: () => sethSowInfoTip(true)
4975
+ }
4976
+ )
4977
+ )
4978
+ }
4979
+ }
4980
+ );
4981
+ };
4982
+
4983
+ // src/components/promotions/init.tsx
4984
+ var init = () => {
4985
+ if (!window.elementorPro) {
4986
+ injectIntoStyleTab({
4987
+ id: "custom-css",
4988
+ component: CustomCssSection,
4989
+ options: { overwrite: true }
4990
+ });
4991
+ }
4992
+ };
4993
+
4994
+ // src/controls-registry/element-controls/tabs-control/tabs-control.tsx
4995
+ var React87 = __toESM(require("react"));
4930
4996
  var import_editor_controls53 = require("@elementor/editor-controls");
4931
4997
  var import_editor_elements17 = require("@elementor/editor-elements");
4932
4998
  var import_editor_props16 = require("@elementor/editor-props");
4933
- var import_icons22 = require("@elementor/icons");
4934
- var import_ui40 = require("@elementor/ui");
4935
- var import_i18n59 = require("@wordpress/i18n");
4999
+ var import_icons23 = require("@elementor/icons");
5000
+ var import_ui41 = require("@elementor/ui");
5001
+ var import_i18n60 = require("@wordpress/i18n");
4936
5002
 
4937
5003
  // src/controls-registry/element-controls/get-element-by-type.ts
4938
5004
  var import_editor_elements15 = require("@elementor/editor-elements");
@@ -4955,7 +5021,7 @@ var getElementByType = (elementId, type) => {
4955
5021
  var import_editor_controls52 = require("@elementor/editor-controls");
4956
5022
  var import_editor_elements16 = require("@elementor/editor-elements");
4957
5023
  var import_editor_props15 = require("@elementor/editor-props");
4958
- var import_i18n58 = require("@wordpress/i18n");
5024
+ var import_i18n59 = require("@wordpress/i18n");
4959
5025
  var TAB_ELEMENT_TYPE = "e-tab";
4960
5026
  var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
4961
5027
  var useActions = () => {
@@ -4978,7 +5044,7 @@ var useActions = () => {
4978
5044
  }
4979
5045
  (0, import_editor_elements16.duplicateElements)({
4980
5046
  elementIds: [tabId, tabContentId],
4981
- title: (0, import_i18n58.__)("Duplicate Tab", "elementor"),
5047
+ title: (0, import_i18n59.__)("Duplicate Tab", "elementor"),
4982
5048
  onDuplicateElements: () => {
4983
5049
  if (newDefault !== defaultActiveTab) {
4984
5050
  setDefaultActiveTab(newDefault, {}, { withHistory: false });
@@ -5010,7 +5076,7 @@ var useActions = () => {
5010
5076
  defaultActiveTab
5011
5077
  });
5012
5078
  (0, import_editor_elements16.moveElements)({
5013
- title: (0, import_i18n58.__)("Reorder Tabs", "elementor"),
5079
+ title: (0, import_i18n59.__)("Reorder Tabs", "elementor"),
5014
5080
  moves: [
5015
5081
  {
5016
5082
  elementId: movedElementId,
@@ -5044,7 +5110,7 @@ var useActions = () => {
5044
5110
  defaultActiveTab
5045
5111
  });
5046
5112
  (0, import_editor_elements16.removeElements)({
5047
- title: (0, import_i18n58.__)("Tabs", "elementor"),
5113
+ title: (0, import_i18n59.__)("Tabs", "elementor"),
5048
5114
  elementIds: items3.flatMap(({ item, index }) => {
5049
5115
  const tabId = item.id;
5050
5116
  const tabContentContainer = (0, import_editor_elements16.getContainer)(tabContentAreaId);
@@ -5074,7 +5140,7 @@ var useActions = () => {
5074
5140
  items3.forEach(({ index }) => {
5075
5141
  const position = index + 1;
5076
5142
  (0, import_editor_elements16.createElements)({
5077
- title: (0, import_i18n58.__)("Tabs", "elementor"),
5143
+ title: (0, import_i18n59.__)("Tabs", "elementor"),
5078
5144
  elements: [
5079
5145
  {
5080
5146
  containerId: tabContentAreaId,
@@ -5143,7 +5209,7 @@ var calculateDefaultOnDuplicate = ({
5143
5209
  var TAB_MENU_ELEMENT_TYPE = "e-tabs-menu";
5144
5210
  var TAB_CONTENT_AREA_ELEMENT_TYPE = "e-tabs-content-area";
5145
5211
  var TabsControl = ({ label }) => {
5146
- return /* @__PURE__ */ React86.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n59.__)("Tabs", "elementor") }, /* @__PURE__ */ React86.createElement(TabsControlContent, { label }));
5212
+ return /* @__PURE__ */ React87.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n60.__)("Tabs", "elementor") }, /* @__PURE__ */ React87.createElement(TabsControlContent, { label }));
5147
5213
  };
5148
5214
  var TabsControlContent = ({ label }) => {
5149
5215
  const { element } = useElement();
@@ -5188,7 +5254,7 @@ var TabsControlContent = ({ label }) => {
5188
5254
  });
5189
5255
  }
5190
5256
  };
5191
- return /* @__PURE__ */ React86.createElement(
5257
+ return /* @__PURE__ */ React87.createElement(
5192
5258
  import_editor_controls53.Repeater,
5193
5259
  {
5194
5260
  showToggle: false,
@@ -5210,7 +5276,7 @@ var ItemLabel = ({ value, index }) => {
5210
5276
  const id = value.id ?? "";
5211
5277
  const editorSettings = (0, import_editor_elements17.useElementEditorSettings)(id);
5212
5278
  const elementTitle = editorSettings?.title;
5213
- return /* @__PURE__ */ React86.createElement(import_ui40.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React86.createElement("span", null, elementTitle), /* @__PURE__ */ React86.createElement(ItemDefaultTab, { index }));
5279
+ return /* @__PURE__ */ React87.createElement(import_ui41.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React87.createElement("span", null, elementTitle), /* @__PURE__ */ React87.createElement(ItemDefaultTab, { index }));
5214
5280
  };
5215
5281
  var ItemDefaultTab = ({ index }) => {
5216
5282
  const { value: defaultItem } = (0, import_editor_controls53.useBoundProp)(import_editor_props16.numberPropTypeUtil);
@@ -5218,19 +5284,19 @@ var ItemDefaultTab = ({ index }) => {
5218
5284
  if (!isDefault) {
5219
5285
  return null;
5220
5286
  }
5221
- return /* @__PURE__ */ React86.createElement(import_ui40.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n59.__)("Default", "elementor") });
5287
+ return /* @__PURE__ */ React87.createElement(import_ui41.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n60.__)("Default", "elementor") });
5222
5288
  };
5223
5289
  var ItemContent = ({ value, index }) => {
5224
5290
  if (!value.id) {
5225
5291
  return null;
5226
5292
  }
5227
- return /* @__PURE__ */ React86.createElement(import_ui40.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React86.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React86.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n59.__)("Tabs", "elementor") }, /* @__PURE__ */ React86.createElement(DefaultTabControl, { tabIndex: index })));
5293
+ return /* @__PURE__ */ React87.createElement(import_ui41.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React87.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React87.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n60.__)("Tabs", "elementor") }, /* @__PURE__ */ React87.createElement(DefaultTabControl, { tabIndex: index })));
5228
5294
  };
5229
5295
  var DefaultTabControl = ({ tabIndex }) => {
5230
5296
  const { value, setValue } = (0, import_editor_controls53.useBoundProp)(import_editor_props16.numberPropTypeUtil);
5231
5297
  const isDefault = value === tabIndex;
5232
- return /* @__PURE__ */ React86.createElement(import_ui40.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React86.createElement(import_editor_controls53.ControlFormLabel, null, (0, import_i18n59.__)("Set as default tab", "elementor")), /* @__PURE__ */ React86.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React86.createElement(
5233
- import_ui40.Switch,
5298
+ return /* @__PURE__ */ React87.createElement(import_ui41.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React87.createElement(import_editor_controls53.ControlFormLabel, null, (0, import_i18n60.__)("Set as default tab", "elementor")), /* @__PURE__ */ React87.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React87.createElement(
5299
+ import_ui41.Switch,
5234
5300
  {
5235
5301
  size: "small",
5236
5302
  checked: isDefault,
@@ -5247,8 +5313,8 @@ var DefaultTabControl = ({ tabIndex }) => {
5247
5313
  var TabLabelControl = ({ elementId }) => {
5248
5314
  const editorSettings = (0, import_editor_elements17.useElementEditorSettings)(elementId);
5249
5315
  const label = editorSettings?.title ?? "";
5250
- return /* @__PURE__ */ React86.createElement(import_ui40.Stack, { gap: 1 }, /* @__PURE__ */ React86.createElement(import_editor_controls53.ControlFormLabel, null, (0, import_i18n59.__)("Tab name", "elementor")), /* @__PURE__ */ React86.createElement(
5251
- import_ui40.TextField,
5316
+ return /* @__PURE__ */ React87.createElement(import_ui41.Stack, { gap: 1 }, /* @__PURE__ */ React87.createElement(import_editor_controls53.ControlFormLabel, null, (0, import_i18n60.__)("Tab name", "elementor")), /* @__PURE__ */ React87.createElement(
5317
+ import_ui41.TextField,
5252
5318
  {
5253
5319
  size: "tiny",
5254
5320
  value: label,
@@ -5268,22 +5334,22 @@ var ConditionalTooltip = ({
5268
5334
  if (!showTooltip) {
5269
5335
  return children;
5270
5336
  }
5271
- return /* @__PURE__ */ React86.createElement(
5272
- import_ui40.Infotip,
5337
+ return /* @__PURE__ */ React87.createElement(
5338
+ import_ui41.Infotip,
5273
5339
  {
5274
5340
  arrow: false,
5275
- content: /* @__PURE__ */ React86.createElement(
5276
- import_ui40.Alert,
5341
+ content: /* @__PURE__ */ React87.createElement(
5342
+ import_ui41.Alert,
5277
5343
  {
5278
5344
  color: "secondary",
5279
- icon: /* @__PURE__ */ React86.createElement(import_icons22.InfoCircleFilledIcon, { fontSize: "tiny" }),
5345
+ icon: /* @__PURE__ */ React87.createElement(import_icons23.InfoCircleFilledIcon, { fontSize: "tiny" }),
5280
5346
  size: "small",
5281
5347
  sx: { width: 288 }
5282
5348
  },
5283
- /* @__PURE__ */ React86.createElement(import_ui40.Typography, { variant: "body2" }, (0, import_i18n59.__)("To change the default tab, simply set another tab as default.", "elementor"))
5349
+ /* @__PURE__ */ React87.createElement(import_ui41.Typography, { variant: "body2" }, (0, import_i18n60.__)("To change the default tab, simply set another tab as default.", "elementor"))
5284
5350
  )
5285
5351
  },
5286
- /* @__PURE__ */ React86.createElement("span", null, children)
5352
+ /* @__PURE__ */ React87.createElement("span", null, children)
5287
5353
  );
5288
5354
  };
5289
5355
 
@@ -5304,16 +5370,16 @@ var import_editor_canvas3 = require("@elementor/editor-canvas");
5304
5370
  var import_editor_controls60 = require("@elementor/editor-controls");
5305
5371
 
5306
5372
  // src/dynamics/components/background-control-dynamic-tag.tsx
5307
- var React87 = __toESM(require("react"));
5373
+ var React88 = __toESM(require("react"));
5308
5374
  var import_editor_controls55 = require("@elementor/editor-controls");
5309
5375
  var import_editor_props18 = require("@elementor/editor-props");
5310
- var import_icons23 = require("@elementor/icons");
5376
+ var import_icons24 = require("@elementor/icons");
5311
5377
 
5312
5378
  // src/dynamics/hooks/use-dynamic-tag.ts
5313
- var import_react39 = require("react");
5379
+ var import_react40 = require("react");
5314
5380
 
5315
5381
  // src/dynamics/hooks/use-prop-dynamic-tags.ts
5316
- var import_react38 = require("react");
5382
+ var import_react39 = require("react");
5317
5383
  var import_editor_controls54 = require("@elementor/editor-controls");
5318
5384
 
5319
5385
  // src/dynamics/sync/get-elementor-config.ts
@@ -5366,7 +5432,7 @@ var usePropDynamicTags = () => {
5366
5432
  const propDynamicType = getDynamicPropType(propType);
5367
5433
  categories = propDynamicType?.settings.categories || [];
5368
5434
  }
5369
- return (0, import_react38.useMemo)(() => getDynamicTagsByCategories(categories), [categories.join()]);
5435
+ return (0, import_react39.useMemo)(() => getDynamicTagsByCategories(categories), [categories.join()]);
5370
5436
  };
5371
5437
  var getDynamicTagsByCategories = (categories) => {
5372
5438
  const { tags, groups } = getAtomicDynamicTags() || {};
@@ -5396,33 +5462,33 @@ var getDynamicTagsByCategories = (categories) => {
5396
5462
  // src/dynamics/hooks/use-dynamic-tag.ts
5397
5463
  var useDynamicTag = (tagName) => {
5398
5464
  const dynamicTags = usePropDynamicTags();
5399
- return (0, import_react39.useMemo)(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
5465
+ return (0, import_react40.useMemo)(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
5400
5466
  };
5401
5467
 
5402
5468
  // src/dynamics/components/background-control-dynamic-tag.tsx
5403
- var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React87.createElement(import_icons23.DatabaseIcon, { fontSize: "tiny" });
5469
+ var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React88.createElement(import_icons24.DatabaseIcon, { fontSize: "tiny" });
5404
5470
  var BackgroundControlDynamicTagLabel = ({ value }) => {
5405
5471
  const context = (0, import_editor_controls55.useBoundProp)(import_editor_props18.backgroundImageOverlayPropTypeUtil);
5406
- return /* @__PURE__ */ React87.createElement(import_editor_controls55.PropProvider, { ...context, value: value.value }, /* @__PURE__ */ React87.createElement(import_editor_controls55.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React87.createElement(Wrapper2, { rawValue: value.value })));
5472
+ return /* @__PURE__ */ React88.createElement(import_editor_controls55.PropProvider, { ...context, value: value.value }, /* @__PURE__ */ React88.createElement(import_editor_controls55.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React88.createElement(Wrapper2, { rawValue: value.value })));
5407
5473
  };
5408
5474
  var Wrapper2 = ({ rawValue }) => {
5409
5475
  const { propType } = (0, import_editor_controls55.useBoundProp)();
5410
5476
  const imageOverlayPropType = propType.prop_types["background-image-overlay"];
5411
- return /* @__PURE__ */ React87.createElement(import_editor_controls55.PropProvider, { propType: imageOverlayPropType.shape.image, value: rawValue, setValue: () => void 0 }, /* @__PURE__ */ React87.createElement(import_editor_controls55.PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React87.createElement(Content, { rawValue: rawValue.image })));
5477
+ return /* @__PURE__ */ React88.createElement(import_editor_controls55.PropProvider, { propType: imageOverlayPropType.shape.image, value: rawValue, setValue: () => void 0 }, /* @__PURE__ */ React88.createElement(import_editor_controls55.PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React88.createElement(Content, { rawValue: rawValue.image })));
5412
5478
  };
5413
5479
  var Content = ({ rawValue }) => {
5414
5480
  const src = rawValue.value.src;
5415
5481
  const dynamicTag = useDynamicTag(src.value.name || "");
5416
- return /* @__PURE__ */ React87.createElement(React87.Fragment, null, dynamicTag?.label);
5482
+ return /* @__PURE__ */ React88.createElement(React88.Fragment, null, dynamicTag?.label);
5417
5483
  };
5418
5484
 
5419
5485
  // src/dynamics/components/dynamic-selection-control.tsx
5420
- var React91 = __toESM(require("react"));
5486
+ var React92 = __toESM(require("react"));
5421
5487
  var import_editor_controls58 = require("@elementor/editor-controls");
5422
- var import_editor_ui9 = require("@elementor/editor-ui");
5423
- var import_icons25 = require("@elementor/icons");
5424
- var import_ui42 = require("@elementor/ui");
5425
- var import_i18n61 = require("@wordpress/i18n");
5488
+ var import_editor_ui10 = require("@elementor/editor-ui");
5489
+ var import_icons26 = require("@elementor/icons");
5490
+ var import_ui43 = require("@elementor/ui");
5491
+ var import_i18n62 = require("@wordpress/i18n");
5426
5492
 
5427
5493
  // src/hooks/use-persist-dynamic-value.ts
5428
5494
  var import_session9 = require("@elementor/session");
@@ -5433,11 +5499,11 @@ var usePersistDynamicValue = (propKey) => {
5433
5499
  };
5434
5500
 
5435
5501
  // src/dynamics/dynamic-control.tsx
5436
- var React89 = __toESM(require("react"));
5502
+ var React90 = __toESM(require("react"));
5437
5503
  var import_editor_controls56 = require("@elementor/editor-controls");
5438
5504
 
5439
5505
  // src/dynamics/components/dynamic-conditional-control.tsx
5440
- var React88 = __toESM(require("react"));
5506
+ var React89 = __toESM(require("react"));
5441
5507
  var import_editor_props19 = require("@elementor/editor-props");
5442
5508
  var DynamicConditionalControl = ({
5443
5509
  children,
@@ -5445,7 +5511,7 @@ var DynamicConditionalControl = ({
5445
5511
  propsSchema,
5446
5512
  dynamicSettings
5447
5513
  }) => {
5448
- const defaults = React88.useMemo(() => {
5514
+ const defaults = React89.useMemo(() => {
5449
5515
  if (!propsSchema) {
5450
5516
  return {};
5451
5517
  }
@@ -5455,7 +5521,7 @@ var DynamicConditionalControl = ({
5455
5521
  return result;
5456
5522
  }, {});
5457
5523
  }, [propsSchema]);
5458
- const convertedSettings = React88.useMemo(() => {
5524
+ const convertedSettings = React89.useMemo(() => {
5459
5525
  if (!dynamicSettings) {
5460
5526
  return {};
5461
5527
  }
@@ -5474,14 +5540,14 @@ var DynamicConditionalControl = ({
5474
5540
  {}
5475
5541
  );
5476
5542
  }, [dynamicSettings]);
5477
- const effectiveSettings = React88.useMemo(() => {
5543
+ const effectiveSettings = React89.useMemo(() => {
5478
5544
  return { ...defaults, ...convertedSettings };
5479
5545
  }, [defaults, convertedSettings]);
5480
5546
  if (!propType?.dependencies?.terms.length) {
5481
- return /* @__PURE__ */ React88.createElement(React88.Fragment, null, children);
5547
+ return /* @__PURE__ */ React89.createElement(React89.Fragment, null, children);
5482
5548
  }
5483
5549
  const isHidden = !(0, import_editor_props19.isDependencyMet)(propType?.dependencies, effectiveSettings).isMet;
5484
- return isHidden ? null : /* @__PURE__ */ React88.createElement(React88.Fragment, null, children);
5550
+ return isHidden ? null : /* @__PURE__ */ React89.createElement(React89.Fragment, null, children);
5485
5551
  };
5486
5552
 
5487
5553
  // src/dynamics/dynamic-control.tsx
@@ -5506,7 +5572,7 @@ var DynamicControl = ({ bind, children }) => {
5506
5572
  });
5507
5573
  };
5508
5574
  const propType = createTopLevelObjectType({ schema: dynamicTag.props_schema });
5509
- return /* @__PURE__ */ React89.createElement(import_editor_controls56.PropProvider, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React89.createElement(import_editor_controls56.PropKeyProvider, { bind }, /* @__PURE__ */ React89.createElement(
5575
+ return /* @__PURE__ */ React90.createElement(import_editor_controls56.PropProvider, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React90.createElement(import_editor_controls56.PropKeyProvider, { bind }, /* @__PURE__ */ React90.createElement(
5510
5576
  DynamicConditionalControl,
5511
5577
  {
5512
5578
  propType: dynamicPropType,
@@ -5518,18 +5584,18 @@ var DynamicControl = ({ bind, children }) => {
5518
5584
  };
5519
5585
 
5520
5586
  // src/dynamics/components/dynamic-selection.tsx
5521
- var import_react40 = require("react");
5522
- var React90 = __toESM(require("react"));
5587
+ var import_react41 = require("react");
5588
+ var React91 = __toESM(require("react"));
5523
5589
  var import_editor_controls57 = require("@elementor/editor-controls");
5524
- var import_editor_ui8 = require("@elementor/editor-ui");
5525
- var import_icons24 = require("@elementor/icons");
5526
- var import_ui41 = require("@elementor/ui");
5527
- var import_i18n60 = require("@wordpress/i18n");
5590
+ var import_editor_ui9 = require("@elementor/editor-ui");
5591
+ var import_icons25 = require("@elementor/icons");
5592
+ var import_ui42 = require("@elementor/ui");
5593
+ var import_i18n61 = require("@wordpress/i18n");
5528
5594
  var SIZE4 = "tiny";
5529
5595
  var DynamicSelection = ({ close: closePopover }) => {
5530
- const [searchValue, setSearchValue] = (0, import_react40.useState)("");
5596
+ const [searchValue, setSearchValue] = (0, import_react41.useState)("");
5531
5597
  const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
5532
- const theme = (0, import_ui41.useTheme)();
5598
+ const theme = (0, import_ui42.useTheme)();
5533
5599
  const { value: anyValue } = (0, import_editor_controls57.useBoundProp)();
5534
5600
  const { bind, value: dynamicValue, setValue } = (0, import_editor_controls57.useBoundProp)(dynamicPropTypeUtil);
5535
5601
  const [, updatePropValueHistory] = usePersistDynamicValue(bind);
@@ -5559,34 +5625,34 @@ var DynamicSelection = ({ close: closePopover }) => {
5559
5625
  label: item.label
5560
5626
  }))
5561
5627
  ]);
5562
- return /* @__PURE__ */ React90.createElement(PopoverBody, { "aria-label": (0, import_i18n60.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React90.createElement(
5563
- import_editor_ui8.PopoverHeader,
5628
+ return /* @__PURE__ */ React91.createElement(PopoverBody, { "aria-label": (0, import_i18n61.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React91.createElement(
5629
+ import_editor_ui9.PopoverHeader,
5564
5630
  {
5565
- title: (0, import_i18n60.__)("Dynamic tags", "elementor"),
5631
+ title: (0, import_i18n61.__)("Dynamic tags", "elementor"),
5566
5632
  onClose: closePopover,
5567
- icon: /* @__PURE__ */ React90.createElement(import_icons24.DatabaseIcon, { fontSize: SIZE4 })
5633
+ icon: /* @__PURE__ */ React91.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE4 })
5568
5634
  }
5569
- ), hasNoDynamicTags ? /* @__PURE__ */ React90.createElement(NoDynamicTags, null) : /* @__PURE__ */ React90.createElement(import_react40.Fragment, null, /* @__PURE__ */ React90.createElement(
5570
- import_editor_ui8.SearchField,
5635
+ ), hasNoDynamicTags ? /* @__PURE__ */ React91.createElement(NoDynamicTags, null) : /* @__PURE__ */ React91.createElement(import_react41.Fragment, null, /* @__PURE__ */ React91.createElement(
5636
+ import_editor_ui9.SearchField,
5571
5637
  {
5572
5638
  value: searchValue,
5573
5639
  onSearch: handleSearch,
5574
- placeholder: (0, import_i18n60.__)("Search dynamic tags\u2026", "elementor")
5640
+ placeholder: (0, import_i18n61.__)("Search dynamic tags\u2026", "elementor")
5575
5641
  }
5576
- ), /* @__PURE__ */ React90.createElement(import_ui41.Divider, null), /* @__PURE__ */ React90.createElement(
5577
- import_editor_ui8.PopoverMenuList,
5642
+ ), /* @__PURE__ */ React91.createElement(import_ui42.Divider, null), /* @__PURE__ */ React91.createElement(
5643
+ import_editor_ui9.PopoverMenuList,
5578
5644
  {
5579
5645
  items: virtualizedItems,
5580
5646
  onSelect: handleSetDynamicTag,
5581
5647
  onClose: closePopover,
5582
5648
  selectedValue: dynamicValue?.name,
5583
5649
  itemStyle: (item) => item.type === "item" ? { paddingInlineStart: theme.spacing(3.5) } : {},
5584
- noResultsComponent: /* @__PURE__ */ React90.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") })
5650
+ noResultsComponent: /* @__PURE__ */ React91.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") })
5585
5651
  }
5586
5652
  )));
5587
5653
  };
5588
- var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React90.createElement(
5589
- import_ui41.Stack,
5654
+ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React91.createElement(
5655
+ import_ui42.Stack,
5590
5656
  {
5591
5657
  gap: 1,
5592
5658
  alignItems: "center",
@@ -5596,12 +5662,12 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React90.createElem
5596
5662
  color: "text.secondary",
5597
5663
  sx: { pb: 3.5 }
5598
5664
  },
5599
- /* @__PURE__ */ React90.createElement(import_icons24.DatabaseIcon, { fontSize: "large" }),
5600
- /* @__PURE__ */ React90.createElement(import_ui41.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n60.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React90.createElement("br", null), "\u201C", searchValue, "\u201D."),
5601
- /* @__PURE__ */ React90.createElement(import_ui41.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n60.__)("Try something else.", "elementor"), /* @__PURE__ */ React90.createElement(import_ui41.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n60.__)("Clear & try again", "elementor")))
5665
+ /* @__PURE__ */ React91.createElement(import_icons25.DatabaseIcon, { fontSize: "large" }),
5666
+ /* @__PURE__ */ React91.createElement(import_ui42.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n61.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React91.createElement("br", null), "\u201C", searchValue, "\u201D."),
5667
+ /* @__PURE__ */ React91.createElement(import_ui42.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n61.__)("Try something else.", "elementor"), /* @__PURE__ */ React91.createElement(import_ui42.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n61.__)("Clear & try again", "elementor")))
5602
5668
  );
5603
- var NoDynamicTags = () => /* @__PURE__ */ React90.createElement(React90.Fragment, null, /* @__PURE__ */ React90.createElement(import_ui41.Divider, null), /* @__PURE__ */ React90.createElement(
5604
- import_ui41.Stack,
5669
+ var NoDynamicTags = () => /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(import_ui42.Divider, null), /* @__PURE__ */ React91.createElement(
5670
+ import_ui42.Stack,
5605
5671
  {
5606
5672
  gap: 1,
5607
5673
  alignItems: "center",
@@ -5611,9 +5677,9 @@ var NoDynamicTags = () => /* @__PURE__ */ React90.createElement(React90.Fragment
5611
5677
  color: "text.secondary",
5612
5678
  sx: { pb: 3.5 }
5613
5679
  },
5614
- /* @__PURE__ */ React90.createElement(import_icons24.DatabaseIcon, { fontSize: "large" }),
5615
- /* @__PURE__ */ React90.createElement(import_ui41.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n60.__)("Streamline your workflow with dynamic tags", "elementor")),
5616
- /* @__PURE__ */ React90.createElement(import_ui41.Typography, { align: "center", variant: "caption" }, (0, import_i18n60.__)("You'll need Elementor Pro to use this feature.", "elementor"))
5680
+ /* @__PURE__ */ React91.createElement(import_icons25.DatabaseIcon, { fontSize: "large" }),
5681
+ /* @__PURE__ */ React91.createElement(import_ui42.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n61.__)("Streamline your workflow with dynamic tags", "elementor")),
5682
+ /* @__PURE__ */ React91.createElement(import_ui42.Typography, { align: "center", variant: "caption" }, (0, import_i18n61.__)("You'll need Elementor Pro to use this feature.", "elementor"))
5617
5683
  ));
5618
5684
  var useFilteredOptions = (searchValue) => {
5619
5685
  const dynamicTags = usePropDynamicTags();
@@ -5638,7 +5704,7 @@ var DynamicSelectionControl = () => {
5638
5704
  const { setValue: setAnyValue } = (0, import_editor_controls58.useBoundProp)();
5639
5705
  const { bind, value } = (0, import_editor_controls58.useBoundProp)(dynamicPropTypeUtil);
5640
5706
  const [propValueFromHistory] = usePersistDynamicValue(bind);
5641
- const selectionPopoverState = (0, import_ui42.usePopupState)({ variant: "popover" });
5707
+ const selectionPopoverState = (0, import_ui43.usePopupState)({ variant: "popover" });
5642
5708
  const { name: tagName = "" } = value;
5643
5709
  const dynamicTag = useDynamicTag(tagName);
5644
5710
  const removeDynamicTag = () => {
@@ -5647,26 +5713,26 @@ var DynamicSelectionControl = () => {
5647
5713
  if (!dynamicTag) {
5648
5714
  throw new Error(`Dynamic tag ${tagName} not found`);
5649
5715
  }
5650
- return /* @__PURE__ */ React91.createElement(import_ui42.Box, null, /* @__PURE__ */ React91.createElement(
5651
- import_ui42.UnstableTag,
5716
+ return /* @__PURE__ */ React92.createElement(import_ui43.Box, null, /* @__PURE__ */ React92.createElement(
5717
+ import_ui43.UnstableTag,
5652
5718
  {
5653
5719
  fullWidth: true,
5654
5720
  showActionsOnHover: true,
5655
5721
  label: dynamicTag.label,
5656
- startIcon: /* @__PURE__ */ React91.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE5 }),
5657
- ...(0, import_ui42.bindTrigger)(selectionPopoverState),
5658
- actions: /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React91.createElement(
5659
- import_ui42.IconButton,
5722
+ startIcon: /* @__PURE__ */ React92.createElement(import_icons26.DatabaseIcon, { fontSize: SIZE5 }),
5723
+ ...(0, import_ui43.bindTrigger)(selectionPopoverState),
5724
+ actions: /* @__PURE__ */ React92.createElement(React92.Fragment, null, /* @__PURE__ */ React92.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React92.createElement(
5725
+ import_ui43.IconButton,
5660
5726
  {
5661
5727
  size: SIZE5,
5662
5728
  onClick: removeDynamicTag,
5663
- "aria-label": (0, import_i18n61.__)("Remove dynamic value", "elementor")
5729
+ "aria-label": (0, import_i18n62.__)("Remove dynamic value", "elementor")
5664
5730
  },
5665
- /* @__PURE__ */ React91.createElement(import_icons25.XIcon, { fontSize: SIZE5 })
5731
+ /* @__PURE__ */ React92.createElement(import_icons26.XIcon, { fontSize: SIZE5 })
5666
5732
  ))
5667
5733
  }
5668
- ), /* @__PURE__ */ React91.createElement(
5669
- import_ui42.Popover,
5734
+ ), /* @__PURE__ */ React92.createElement(
5735
+ import_ui43.Popover,
5670
5736
  {
5671
5737
  disablePortal: true,
5672
5738
  disableScrollLock: true,
@@ -5675,27 +5741,27 @@ var DynamicSelectionControl = () => {
5675
5741
  PaperProps: {
5676
5742
  sx: { my: 1 }
5677
5743
  },
5678
- ...(0, import_ui42.bindPopover)(selectionPopoverState)
5744
+ ...(0, import_ui43.bindPopover)(selectionPopoverState)
5679
5745
  },
5680
- /* @__PURE__ */ React91.createElement(PopoverBody, { "aria-label": (0, import_i18n61.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React91.createElement(DynamicSelection, { close: selectionPopoverState.close }))
5746
+ /* @__PURE__ */ React92.createElement(PopoverBody, { "aria-label": (0, import_i18n62.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React92.createElement(DynamicSelection, { close: selectionPopoverState.close }))
5681
5747
  ));
5682
5748
  };
5683
5749
  var DynamicSettingsPopover = ({ dynamicTag }) => {
5684
- const popupState = (0, import_ui42.usePopupState)({ variant: "popover" });
5750
+ const popupState = (0, import_ui43.usePopupState)({ variant: "popover" });
5685
5751
  const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
5686
5752
  if (!hasDynamicSettings) {
5687
5753
  return null;
5688
5754
  }
5689
- return /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(
5690
- import_ui42.IconButton,
5755
+ return /* @__PURE__ */ React92.createElement(React92.Fragment, null, /* @__PURE__ */ React92.createElement(
5756
+ import_ui43.IconButton,
5691
5757
  {
5692
5758
  size: SIZE5,
5693
- ...(0, import_ui42.bindTrigger)(popupState),
5694
- "aria-label": (0, import_i18n61.__)("Dynamic settings", "elementor")
5759
+ ...(0, import_ui43.bindTrigger)(popupState),
5760
+ "aria-label": (0, import_i18n62.__)("Dynamic settings", "elementor")
5695
5761
  },
5696
- /* @__PURE__ */ React91.createElement(import_icons25.SettingsIcon, { fontSize: SIZE5 })
5697
- ), /* @__PURE__ */ React91.createElement(
5698
- import_ui42.Popover,
5762
+ /* @__PURE__ */ React92.createElement(import_icons26.SettingsIcon, { fontSize: SIZE5 })
5763
+ ), /* @__PURE__ */ React92.createElement(
5764
+ import_ui43.Popover,
5699
5765
  {
5700
5766
  disablePortal: true,
5701
5767
  disableScrollLock: true,
@@ -5704,45 +5770,45 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
5704
5770
  PaperProps: {
5705
5771
  sx: { my: 1 }
5706
5772
  },
5707
- ...(0, import_ui42.bindPopover)(popupState)
5773
+ ...(0, import_ui43.bindPopover)(popupState)
5708
5774
  },
5709
- /* @__PURE__ */ React91.createElement(PopoverBody, { "aria-label": (0, import_i18n61.__)("Dynamic settings", "elementor") }, /* @__PURE__ */ React91.createElement(
5710
- import_editor_ui9.PopoverHeader,
5775
+ /* @__PURE__ */ React92.createElement(PopoverBody, { "aria-label": (0, import_i18n62.__)("Dynamic settings", "elementor") }, /* @__PURE__ */ React92.createElement(
5776
+ import_editor_ui10.PopoverHeader,
5711
5777
  {
5712
5778
  title: dynamicTag.label,
5713
5779
  onClose: popupState.close,
5714
- icon: /* @__PURE__ */ React91.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE5 })
5780
+ icon: /* @__PURE__ */ React92.createElement(import_icons26.DatabaseIcon, { fontSize: SIZE5 })
5715
5781
  }
5716
- ), /* @__PURE__ */ React91.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls, tagName: dynamicTag.name }))
5782
+ ), /* @__PURE__ */ React92.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls, tagName: dynamicTag.name }))
5717
5783
  ));
5718
5784
  };
5719
5785
  var DynamicSettings = ({ controls, tagName }) => {
5720
5786
  const tabs = controls.filter(({ type }) => type === "section");
5721
- const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui42.useTabs)(0);
5787
+ const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui43.useTabs)(0);
5722
5788
  if (!tabs.length) {
5723
5789
  return null;
5724
5790
  }
5725
5791
  if (tagsWithoutTabs.includes(tagName)) {
5726
5792
  const singleTab = tabs[0];
5727
- return /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(import_ui42.Divider, null), /* @__PURE__ */ React91.createElement(ControlsItemsStack, { items: singleTab.value.items }));
5793
+ return /* @__PURE__ */ React92.createElement(React92.Fragment, null, /* @__PURE__ */ React92.createElement(import_ui43.Divider, null), /* @__PURE__ */ React92.createElement(ControlsItemsStack, { items: singleTab.value.items }));
5728
5794
  }
5729
- return /* @__PURE__ */ React91.createElement(React91.Fragment, null, tabs.length > 1 && /* @__PURE__ */ React91.createElement(import_ui42.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React91.createElement(
5730
- import_ui42.Tab,
5795
+ return /* @__PURE__ */ React92.createElement(React92.Fragment, null, tabs.length > 1 && /* @__PURE__ */ React92.createElement(import_ui43.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React92.createElement(
5796
+ import_ui43.Tab,
5731
5797
  {
5732
5798
  key: index,
5733
5799
  label: value.label,
5734
5800
  sx: { px: 1, py: 0.5 },
5735
5801
  ...getTabProps(index)
5736
5802
  }
5737
- ))), /* @__PURE__ */ React91.createElement(import_ui42.Divider, null), tabs.map(({ value }, index) => {
5738
- return /* @__PURE__ */ React91.createElement(
5739
- import_ui42.TabPanel,
5803
+ ))), /* @__PURE__ */ React92.createElement(import_ui43.Divider, null), tabs.map(({ value }, index) => {
5804
+ return /* @__PURE__ */ React92.createElement(
5805
+ import_ui43.TabPanel,
5740
5806
  {
5741
5807
  key: index,
5742
5808
  sx: { flexGrow: 1, py: 0, overflowY: "auto" },
5743
5809
  ...getTabPanelProps(index)
5744
5810
  },
5745
- /* @__PURE__ */ React91.createElement(ControlsItemsStack, { items: value.items })
5811
+ /* @__PURE__ */ React92.createElement(ControlsItemsStack, { items: value.items })
5746
5812
  );
5747
5813
  }));
5748
5814
  };
@@ -5784,11 +5850,11 @@ var Control2 = ({ control }) => {
5784
5850
  display: "grid",
5785
5851
  gridTemplateColumns: isSwitchControl ? "minmax(0, 1fr) max-content" : "1fr 1fr"
5786
5852
  } : {};
5787
- return /* @__PURE__ */ React91.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React91.createElement(import_ui42.Grid, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React91.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React91.createElement(import_editor_controls58.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React91.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React91.createElement(Control, { type: control.type, props: controlProps }))));
5853
+ return /* @__PURE__ */ React92.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React92.createElement(import_ui43.Grid, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React92.createElement(import_ui43.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(import_editor_controls58.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React92.createElement(import_ui43.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(Control, { type: control.type, props: controlProps }))));
5788
5854
  };
5789
5855
  function ControlsItemsStack({ items: items3 }) {
5790
- return /* @__PURE__ */ React91.createElement(import_ui42.Stack, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
5791
- (item) => item.type === "control" ? /* @__PURE__ */ React91.createElement(Control2, { key: item.value.bind, control: item.value }) : null
5856
+ return /* @__PURE__ */ React92.createElement(import_ui43.Stack, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
5857
+ (item) => item.type === "control" ? /* @__PURE__ */ React92.createElement(Control2, { key: item.value.bind, control: item.value }) : null
5792
5858
  ));
5793
5859
  }
5794
5860
 
@@ -5842,24 +5908,24 @@ function getDynamicValue(name, settings) {
5842
5908
  }
5843
5909
 
5844
5910
  // src/dynamics/hooks/use-prop-dynamic-action.tsx
5845
- var React92 = __toESM(require("react"));
5911
+ var React93 = __toESM(require("react"));
5846
5912
  var import_editor_controls59 = require("@elementor/editor-controls");
5847
- var import_icons26 = require("@elementor/icons");
5848
- var import_i18n62 = require("@wordpress/i18n");
5913
+ var import_icons27 = require("@elementor/icons");
5914
+ var import_i18n63 = require("@wordpress/i18n");
5849
5915
  var usePropDynamicAction = () => {
5850
5916
  const { propType } = (0, import_editor_controls59.useBoundProp)();
5851
5917
  const visible = !!propType && supportsDynamic(propType);
5852
5918
  return {
5853
5919
  visible,
5854
- icon: import_icons26.DatabaseIcon,
5855
- title: (0, import_i18n62.__)("Dynamic tags", "elementor"),
5856
- content: ({ close }) => /* @__PURE__ */ React92.createElement(DynamicSelection, { close })
5920
+ icon: import_icons27.DatabaseIcon,
5921
+ title: (0, import_i18n63.__)("Dynamic tags", "elementor"),
5922
+ content: ({ close }) => /* @__PURE__ */ React93.createElement(DynamicSelection, { close })
5857
5923
  };
5858
5924
  };
5859
5925
 
5860
5926
  // src/dynamics/init.ts
5861
5927
  var { registerPopoverAction } = controlActionsMenu;
5862
- var init = () => {
5928
+ var init2 = () => {
5863
5929
  registerControlReplacement({
5864
5930
  component: DynamicSelectionControl,
5865
5931
  condition: ({ value }) => isDynamicPropValue(value)
@@ -5884,8 +5950,8 @@ var init = () => {
5884
5950
 
5885
5951
  // src/reset-style-props.tsx
5886
5952
  var import_editor_controls61 = require("@elementor/editor-controls");
5887
- var import_icons27 = require("@elementor/icons");
5888
- var import_i18n63 = require("@wordpress/i18n");
5953
+ var import_icons28 = require("@elementor/icons");
5954
+ var import_i18n64 = require("@wordpress/i18n");
5889
5955
 
5890
5956
  // src/utils/is-equal.ts
5891
5957
  function isEqual(a, b) {
@@ -5957,44 +6023,44 @@ function useResetStyleValueProps() {
5957
6023
  const visible = calculateVisibility();
5958
6024
  return {
5959
6025
  visible,
5960
- title: (0, import_i18n63.__)("Clear", "elementor"),
5961
- icon: import_icons27.BrushBigIcon,
6026
+ title: (0, import_i18n64.__)("Clear", "elementor"),
6027
+ icon: import_icons28.BrushBigIcon,
5962
6028
  onClick: () => resetValue()
5963
6029
  };
5964
6030
  }
5965
6031
 
5966
6032
  // src/styles-inheritance/components/styles-inheritance-indicator.tsx
5967
- var React98 = __toESM(require("react"));
6033
+ var React99 = __toESM(require("react"));
5968
6034
  var import_editor_controls62 = require("@elementor/editor-controls");
5969
6035
  var import_editor_props21 = require("@elementor/editor-props");
5970
6036
  var import_editor_styles_repository16 = require("@elementor/editor-styles-repository");
5971
- var import_i18n67 = require("@wordpress/i18n");
6037
+ var import_i18n68 = require("@wordpress/i18n");
5972
6038
 
5973
6039
  // src/styles-inheritance/components/styles-inheritance-infotip.tsx
5974
- var React97 = __toESM(require("react"));
5975
- var import_react42 = require("react");
6040
+ var React98 = __toESM(require("react"));
6041
+ var import_react43 = require("react");
5976
6042
  var import_editor_canvas6 = require("@elementor/editor-canvas");
5977
- var import_editor_ui10 = require("@elementor/editor-ui");
5978
- var import_ui47 = require("@elementor/ui");
5979
- var import_i18n66 = require("@wordpress/i18n");
6043
+ var import_editor_ui11 = require("@elementor/editor-ui");
6044
+ var import_ui48 = require("@elementor/ui");
6045
+ var import_i18n67 = require("@wordpress/i18n");
5980
6046
 
5981
6047
  // src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
5982
- var import_react41 = require("react");
6048
+ var import_react42 = require("react");
5983
6049
  var import_editor_canvas4 = require("@elementor/editor-canvas");
5984
6050
  var import_editor_styles8 = require("@elementor/editor-styles");
5985
6051
  var import_editor_styles_repository14 = require("@elementor/editor-styles-repository");
5986
- var import_i18n64 = require("@wordpress/i18n");
6052
+ var import_i18n65 = require("@wordpress/i18n");
5987
6053
  var MAXIMUM_ITEMS = 2;
5988
6054
  var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
5989
- const [items3, setItems] = (0, import_react41.useState)([]);
5990
- (0, import_react41.useEffect)(() => {
6055
+ const [items3, setItems] = (0, import_react42.useState)([]);
6056
+ (0, import_react42.useEffect)(() => {
5991
6057
  (async () => {
5992
6058
  const normalizedItems = await Promise.all(
5993
6059
  inheritanceChain.filter(({ style }) => style).map((item, index) => normalizeInheritanceItem(item, index, bind, resolve))
5994
6060
  );
5995
6061
  const validItems = normalizedItems.map((item) => ({
5996
6062
  ...item,
5997
- displayLabel: import_editor_styles_repository14.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0, import_i18n64.__)("Base", "elementor")
6063
+ displayLabel: import_editor_styles_repository14.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0, import_i18n65.__)("Base", "elementor")
5998
6064
  })).filter((item) => !item.value || item.displayLabel !== "").slice(0, MAXIMUM_ITEMS);
5999
6065
  setItems(validItems);
6000
6066
  })();
@@ -6038,7 +6104,7 @@ var getTransformedValue = async (item, bind, resolve) => {
6038
6104
  }
6039
6105
  });
6040
6106
  const value = result?.[bind] ?? result;
6041
- if ((0, import_react41.isValidElement)(value)) {
6107
+ if ((0, import_react42.isValidElement)(value)) {
6042
6108
  return value;
6043
6109
  }
6044
6110
  if (typeof value === "object") {
@@ -6055,20 +6121,20 @@ var import_editor_canvas5 = require("@elementor/editor-canvas");
6055
6121
  var stylesInheritanceTransformersRegistry = (0, import_editor_canvas5.createTransformersRegistry)();
6056
6122
 
6057
6123
  // src/styles-inheritance/components/infotip/breakpoint-icon.tsx
6058
- var React93 = __toESM(require("react"));
6124
+ var React94 = __toESM(require("react"));
6059
6125
  var import_editor_responsive4 = require("@elementor/editor-responsive");
6060
- var import_icons28 = require("@elementor/icons");
6061
- var import_ui43 = require("@elementor/ui");
6126
+ var import_icons29 = require("@elementor/icons");
6127
+ var import_ui44 = require("@elementor/ui");
6062
6128
  var SIZE6 = "tiny";
6063
6129
  var DEFAULT_BREAKPOINT3 = "desktop";
6064
6130
  var breakpointIconMap = {
6065
- widescreen: import_icons28.WidescreenIcon,
6066
- desktop: import_icons28.DesktopIcon,
6067
- laptop: import_icons28.LaptopIcon,
6068
- tablet_extra: import_icons28.TabletLandscapeIcon,
6069
- tablet: import_icons28.TabletPortraitIcon,
6070
- mobile_extra: import_icons28.MobileLandscapeIcon,
6071
- mobile: import_icons28.MobilePortraitIcon
6131
+ widescreen: import_icons29.WidescreenIcon,
6132
+ desktop: import_icons29.DesktopIcon,
6133
+ laptop: import_icons29.LaptopIcon,
6134
+ tablet_extra: import_icons29.TabletLandscapeIcon,
6135
+ tablet: import_icons29.TabletPortraitIcon,
6136
+ mobile_extra: import_icons29.MobileLandscapeIcon,
6137
+ mobile: import_icons29.MobilePortraitIcon
6072
6138
  };
6073
6139
  var BreakpointIcon = ({ breakpoint }) => {
6074
6140
  const breakpoints = (0, import_editor_responsive4.useBreakpoints)();
@@ -6078,21 +6144,21 @@ var BreakpointIcon = ({ breakpoint }) => {
6078
6144
  return null;
6079
6145
  }
6080
6146
  const breakpointLabel = breakpoints.find((breakpointItem) => breakpointItem.id === currentBreakpoint)?.label;
6081
- return /* @__PURE__ */ React93.createElement(import_ui43.Tooltip, { title: breakpointLabel, placement: "top" }, /* @__PURE__ */ React93.createElement(IconComponent, { fontSize: SIZE6, sx: { mt: "2px" } }));
6147
+ return /* @__PURE__ */ React94.createElement(import_ui44.Tooltip, { title: breakpointLabel, placement: "top" }, /* @__PURE__ */ React94.createElement(IconComponent, { fontSize: SIZE6, sx: { mt: "2px" } }));
6082
6148
  };
6083
6149
 
6084
6150
  // src/styles-inheritance/components/infotip/label-chip.tsx
6085
- var React94 = __toESM(require("react"));
6151
+ var React95 = __toESM(require("react"));
6086
6152
  var import_editor_styles_repository15 = require("@elementor/editor-styles-repository");
6087
- var import_icons29 = require("@elementor/icons");
6088
- var import_ui44 = require("@elementor/ui");
6089
- var import_i18n65 = require("@wordpress/i18n");
6153
+ var import_icons30 = require("@elementor/icons");
6154
+ var import_ui45 = require("@elementor/ui");
6155
+ var import_i18n66 = require("@wordpress/i18n");
6090
6156
  var SIZE7 = "tiny";
6091
6157
  var LabelChip = ({ displayLabel, provider }) => {
6092
6158
  const isBaseStyle = provider === import_editor_styles_repository15.ELEMENTS_BASE_STYLES_PROVIDER_KEY;
6093
- const chipIcon = isBaseStyle ? /* @__PURE__ */ React94.createElement(import_ui44.Tooltip, { title: (0, import_i18n65.__)("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React94.createElement(import_icons29.InfoCircleIcon, { fontSize: SIZE7 })) : void 0;
6094
- return /* @__PURE__ */ React94.createElement(
6095
- import_ui44.Chip,
6159
+ const chipIcon = isBaseStyle ? /* @__PURE__ */ React95.createElement(import_ui45.Tooltip, { title: (0, import_i18n66.__)("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React95.createElement(import_icons30.InfoCircleIcon, { fontSize: SIZE7 })) : void 0;
6160
+ return /* @__PURE__ */ React95.createElement(
6161
+ import_ui45.Chip,
6096
6162
  {
6097
6163
  label: displayLabel,
6098
6164
  size: SIZE7,
@@ -6117,11 +6183,11 @@ var LabelChip = ({ displayLabel, provider }) => {
6117
6183
  };
6118
6184
 
6119
6185
  // src/styles-inheritance/components/infotip/value-component.tsx
6120
- var React95 = __toESM(require("react"));
6121
- var import_ui45 = require("@elementor/ui");
6186
+ var React96 = __toESM(require("react"));
6187
+ var import_ui46 = require("@elementor/ui");
6122
6188
  var ValueComponent = ({ index, value }) => {
6123
- return /* @__PURE__ */ React95.createElement(
6124
- import_ui45.Typography,
6189
+ return /* @__PURE__ */ React96.createElement(
6190
+ import_ui46.Typography,
6125
6191
  {
6126
6192
  variant: "caption",
6127
6193
  color: "text.tertiary",
@@ -6141,9 +6207,9 @@ var ValueComponent = ({ index, value }) => {
6141
6207
  };
6142
6208
 
6143
6209
  // src/styles-inheritance/components/infotip/action-icons.tsx
6144
- var React96 = __toESM(require("react"));
6145
- var import_ui46 = require("@elementor/ui");
6146
- var ActionIcons = () => /* @__PURE__ */ React96.createElement(import_ui46.Box, { display: "flex", gap: 0.5, alignItems: "center" });
6210
+ var React97 = __toESM(require("react"));
6211
+ var import_ui47 = require("@elementor/ui");
6212
+ var ActionIcons = () => /* @__PURE__ */ React97.createElement(import_ui47.Box, { display: "flex", gap: 0.5, alignItems: "center" });
6147
6213
 
6148
6214
  // src/styles-inheritance/components/styles-inheritance-infotip.tsx
6149
6215
  var SECTION_PADDING_INLINE = 32;
@@ -6155,7 +6221,7 @@ var StylesInheritanceInfotip = ({
6155
6221
  children,
6156
6222
  isDisabled
6157
6223
  }) => {
6158
- const [showInfotip, setShowInfotip] = (0, import_react42.useState)(false);
6224
+ const [showInfotip, setShowInfotip] = (0, import_react43.useState)(false);
6159
6225
  const toggleInfotip = () => {
6160
6226
  if (isDisabled) {
6161
6227
  return;
@@ -6170,15 +6236,15 @@ var StylesInheritanceInfotip = ({
6170
6236
  };
6171
6237
  const key = path.join(".");
6172
6238
  const sectionWidth = useSectionWidth();
6173
- const resolve = (0, import_react42.useMemo)(() => {
6239
+ const resolve = (0, import_react43.useMemo)(() => {
6174
6240
  return (0, import_editor_canvas6.createPropsResolver)({
6175
6241
  transformers: stylesInheritanceTransformersRegistry,
6176
6242
  schema: { [key]: propType }
6177
6243
  });
6178
6244
  }, [key, propType]);
6179
6245
  const items3 = useNormalizedInheritanceChainItems(inheritanceChain, key, resolve);
6180
- const infotipContent = /* @__PURE__ */ React97.createElement(import_ui47.ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React97.createElement(
6181
- import_ui47.Card,
6246
+ const infotipContent = /* @__PURE__ */ React98.createElement(import_ui48.ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React98.createElement(
6247
+ import_ui48.Card,
6182
6248
  {
6183
6249
  elevation: 0,
6184
6250
  sx: {
@@ -6190,8 +6256,8 @@ var StylesInheritanceInfotip = ({
6190
6256
  flexDirection: "column"
6191
6257
  }
6192
6258
  },
6193
- /* @__PURE__ */ React97.createElement(
6194
- import_ui47.Box,
6259
+ /* @__PURE__ */ React98.createElement(
6260
+ import_ui48.Box,
6195
6261
  {
6196
6262
  sx: {
6197
6263
  position: "sticky",
@@ -6200,10 +6266,10 @@ var StylesInheritanceInfotip = ({
6200
6266
  backgroundColor: "background.paper"
6201
6267
  }
6202
6268
  },
6203
- /* @__PURE__ */ React97.createElement(import_editor_ui10.PopoverHeader, { title: (0, import_i18n66.__)("Style origin", "elementor"), onClose: closeInfotip })
6269
+ /* @__PURE__ */ React98.createElement(import_editor_ui11.PopoverHeader, { title: (0, import_i18n67.__)("Style origin", "elementor"), onClose: closeInfotip })
6204
6270
  ),
6205
- /* @__PURE__ */ React97.createElement(
6206
- import_ui47.CardContent,
6271
+ /* @__PURE__ */ React98.createElement(
6272
+ import_ui48.CardContent,
6207
6273
  {
6208
6274
  sx: {
6209
6275
  display: "flex",
@@ -6216,39 +6282,39 @@ var StylesInheritanceInfotip = ({
6216
6282
  }
6217
6283
  }
6218
6284
  },
6219
- /* @__PURE__ */ React97.createElement(import_ui47.Stack, { gap: 1.5, sx: { pl: 3, pr: 1, pb: 2 }, role: "list" }, items3.map((item, index) => {
6220
- return /* @__PURE__ */ React97.createElement(
6221
- import_ui47.Box,
6285
+ /* @__PURE__ */ React98.createElement(import_ui48.Stack, { gap: 1.5, sx: { pl: 3, pr: 1, pb: 2 }, role: "list" }, items3.map((item, index) => {
6286
+ return /* @__PURE__ */ React98.createElement(
6287
+ import_ui48.Box,
6222
6288
  {
6223
6289
  key: item.id,
6224
6290
  display: "flex",
6225
6291
  gap: 0.5,
6226
6292
  role: "listitem",
6227
- "aria-label": (0, import_i18n66.__)("Inheritance item: %s", "elementor").replace(
6293
+ "aria-label": (0, import_i18n67.__)("Inheritance item: %s", "elementor").replace(
6228
6294
  "%s",
6229
6295
  item.displayLabel
6230
6296
  )
6231
6297
  },
6232
- /* @__PURE__ */ React97.createElement(
6233
- import_ui47.Box,
6298
+ /* @__PURE__ */ React98.createElement(
6299
+ import_ui48.Box,
6234
6300
  {
6235
6301
  display: "flex",
6236
6302
  gap: 0.5,
6237
6303
  sx: { flexWrap: "wrap", width: "100%", alignItems: "flex-start" }
6238
6304
  },
6239
- /* @__PURE__ */ React97.createElement(BreakpointIcon, { breakpoint: item.breakpoint }),
6240
- /* @__PURE__ */ React97.createElement(LabelChip, { displayLabel: item.displayLabel, provider: item.provider }),
6241
- /* @__PURE__ */ React97.createElement(ValueComponent, { index, value: item.value })
6305
+ /* @__PURE__ */ React98.createElement(BreakpointIcon, { breakpoint: item.breakpoint }),
6306
+ /* @__PURE__ */ React98.createElement(LabelChip, { displayLabel: item.displayLabel, provider: item.provider }),
6307
+ /* @__PURE__ */ React98.createElement(ValueComponent, { index, value: item.value })
6242
6308
  ),
6243
- /* @__PURE__ */ React97.createElement(ActionIcons, null)
6309
+ /* @__PURE__ */ React98.createElement(ActionIcons, null)
6244
6310
  );
6245
6311
  }))
6246
6312
  )
6247
6313
  ));
6248
6314
  if (isDisabled) {
6249
- return /* @__PURE__ */ React97.createElement(import_ui47.Box, { sx: { display: "inline-flex" } }, children);
6315
+ return /* @__PURE__ */ React98.createElement(import_ui48.Box, { sx: { display: "inline-flex" } }, children);
6250
6316
  }
6251
- return /* @__PURE__ */ React97.createElement(
6317
+ return /* @__PURE__ */ React98.createElement(
6252
6318
  TooltipOrInfotip,
6253
6319
  {
6254
6320
  showInfotip,
@@ -6256,7 +6322,7 @@ var StylesInheritanceInfotip = ({
6256
6322
  infotipContent,
6257
6323
  isDisabled
6258
6324
  },
6259
- /* @__PURE__ */ React97.createElement(import_ui47.IconButton, { onClick: toggleInfotip, "aria-label": label, sx: { my: "-1px" }, disabled: isDisabled }, children)
6325
+ /* @__PURE__ */ React98.createElement(import_ui48.IconButton, { onClick: toggleInfotip, "aria-label": label, sx: { my: "-1px" }, disabled: isDisabled }, children)
6260
6326
  );
6261
6327
  };
6262
6328
  function TooltipOrInfotip({
@@ -6270,11 +6336,11 @@ function TooltipOrInfotip({
6270
6336
  const isSiteRtl = direction.isSiteRtl;
6271
6337
  const forceInfotipAlignLeft = isSiteRtl ? 9999999 : -9999999;
6272
6338
  if (isDisabled) {
6273
- return /* @__PURE__ */ React97.createElement(import_ui47.Box, { sx: { display: "inline-flex" } }, children);
6339
+ return /* @__PURE__ */ React98.createElement(import_ui48.Box, { sx: { display: "inline-flex" } }, children);
6274
6340
  }
6275
6341
  if (showInfotip) {
6276
- return /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(
6277
- import_ui47.Backdrop,
6342
+ return /* @__PURE__ */ React98.createElement(React98.Fragment, null, /* @__PURE__ */ React98.createElement(
6343
+ import_ui48.Backdrop,
6278
6344
  {
6279
6345
  open: showInfotip,
6280
6346
  onClick: onClose,
@@ -6283,8 +6349,8 @@ function TooltipOrInfotip({
6283
6349
  zIndex: (theme) => theme.zIndex.modal - 1
6284
6350
  }
6285
6351
  }
6286
- ), /* @__PURE__ */ React97.createElement(
6287
- import_ui47.Infotip,
6352
+ ), /* @__PURE__ */ React98.createElement(
6353
+ import_ui48.Infotip,
6288
6354
  {
6289
6355
  placement: "top",
6290
6356
  content: infotipContent,
@@ -6310,7 +6376,7 @@ function TooltipOrInfotip({
6310
6376
  children
6311
6377
  ));
6312
6378
  }
6313
- return /* @__PURE__ */ React97.createElement(import_ui47.Tooltip, { title: (0, import_i18n66.__)("Style origin", "elementor"), placement: "top" }, children);
6379
+ return /* @__PURE__ */ React98.createElement(import_ui48.Tooltip, { title: (0, import_i18n67.__)("Style origin", "elementor"), placement: "top" }, children);
6314
6380
  }
6315
6381
 
6316
6382
  // src/styles-inheritance/components/styles-inheritance-indicator.tsx
@@ -6323,7 +6389,7 @@ var StylesInheritanceIndicator = ({
6323
6389
  if (!path || !inheritanceChain.length) {
6324
6390
  return null;
6325
6391
  }
6326
- return /* @__PURE__ */ React98.createElement(Indicator, { inheritanceChain, path, propType });
6392
+ return /* @__PURE__ */ React99.createElement(Indicator, { inheritanceChain, path, propType });
6327
6393
  };
6328
6394
  var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
6329
6395
  const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
@@ -6339,7 +6405,7 @@ var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
6339
6405
  getColor: isFinalValue && currentStyleProvider ? getStylesProviderThemeColor(currentStyleProvider.getKey()) : void 0,
6340
6406
  isOverridden: hasValue && !isFinalValue ? true : void 0
6341
6407
  };
6342
- return /* @__PURE__ */ React98.createElement(
6408
+ return /* @__PURE__ */ React99.createElement(
6343
6409
  StylesInheritanceInfotip,
6344
6410
  {
6345
6411
  inheritanceChain,
@@ -6348,17 +6414,17 @@ var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
6348
6414
  label,
6349
6415
  isDisabled
6350
6416
  },
6351
- /* @__PURE__ */ React98.createElement(StyleIndicator, { ...styleIndicatorProps })
6417
+ /* @__PURE__ */ React99.createElement(StyleIndicator, { ...styleIndicatorProps })
6352
6418
  );
6353
6419
  };
6354
6420
  var getLabel = ({ isFinalValue, hasValue }) => {
6355
6421
  if (isFinalValue) {
6356
- return (0, import_i18n67.__)("This is the final value", "elementor");
6422
+ return (0, import_i18n68.__)("This is the final value", "elementor");
6357
6423
  }
6358
6424
  if (hasValue) {
6359
- return (0, import_i18n67.__)("This value is overridden by another style", "elementor");
6425
+ return (0, import_i18n68.__)("This value is overridden by another style", "elementor");
6360
6426
  }
6361
- return (0, import_i18n67.__)("This has value from another style", "elementor");
6427
+ return (0, import_i18n68.__)("This has value from another style", "elementor");
6362
6428
  };
6363
6429
 
6364
6430
  // src/styles-inheritance/init-styles-inheritance-transformers.ts
@@ -6379,25 +6445,25 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
6379
6445
  ]);
6380
6446
 
6381
6447
  // src/styles-inheritance/transformers/array-transformer.tsx
6382
- var React99 = __toESM(require("react"));
6448
+ var React100 = __toESM(require("react"));
6383
6449
  var import_editor_canvas7 = require("@elementor/editor-canvas");
6384
- var import_ui48 = require("@elementor/ui");
6450
+ var import_ui49 = require("@elementor/ui");
6385
6451
  var arrayTransformer = (0, import_editor_canvas7.createTransformer)((values) => {
6386
6452
  if (!values || values.length === 0) {
6387
6453
  return null;
6388
6454
  }
6389
- return /* @__PURE__ */ React99.createElement(import_ui48.Stack, { direction: "column" }, values.map((item, index) => /* @__PURE__ */ React99.createElement(import_ui48.Stack, { key: index }, item)));
6455
+ return /* @__PURE__ */ React100.createElement(import_ui49.Stack, { direction: "column" }, values.map((item, index) => /* @__PURE__ */ React100.createElement(import_ui49.Stack, { key: index }, item)));
6390
6456
  });
6391
6457
 
6392
6458
  // src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
6393
- var React100 = __toESM(require("react"));
6459
+ var React101 = __toESM(require("react"));
6394
6460
  var import_editor_canvas8 = require("@elementor/editor-canvas");
6395
- var import_ui49 = require("@elementor/ui");
6396
- var backgroundColorOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React100.createElement(import_ui49.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React100.createElement(ItemLabelColor, { value })));
6461
+ var import_ui50 = require("@elementor/ui");
6462
+ var backgroundColorOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React101.createElement(import_ui50.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React101.createElement(ItemLabelColor, { value })));
6397
6463
  var ItemLabelColor = ({ value: { color } }) => {
6398
- return /* @__PURE__ */ React100.createElement("span", null, color);
6464
+ return /* @__PURE__ */ React101.createElement("span", null, color);
6399
6465
  };
6400
- var StyledUnstableColorIndicator = (0, import_ui49.styled)(import_ui49.UnstableColorIndicator)(({ theme }) => ({
6466
+ var StyledUnstableColorIndicator = (0, import_ui50.styled)(import_ui50.UnstableColorIndicator)(({ theme }) => ({
6401
6467
  width: "1em",
6402
6468
  height: "1em",
6403
6469
  borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -6406,20 +6472,20 @@ var StyledUnstableColorIndicator = (0, import_ui49.styled)(import_ui49.UnstableC
6406
6472
  }));
6407
6473
 
6408
6474
  // src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
6409
- var React101 = __toESM(require("react"));
6475
+ var React102 = __toESM(require("react"));
6410
6476
  var import_editor_canvas9 = require("@elementor/editor-canvas");
6411
- var import_ui50 = require("@elementor/ui");
6412
- var import_i18n68 = require("@wordpress/i18n");
6413
- var backgroundGradientOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React101.createElement(import_ui50.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React101.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React101.createElement(ItemLabelGradient, { value })));
6477
+ var import_ui51 = require("@elementor/ui");
6478
+ var import_i18n69 = require("@wordpress/i18n");
6479
+ var backgroundGradientOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React102.createElement(import_ui51.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React102.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React102.createElement(ItemLabelGradient, { value })));
6414
6480
  var ItemIconGradient = ({ value }) => {
6415
6481
  const gradient = getGradientValue(value);
6416
- return /* @__PURE__ */ React101.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
6482
+ return /* @__PURE__ */ React102.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
6417
6483
  };
6418
6484
  var ItemLabelGradient = ({ value }) => {
6419
6485
  if (value.type === "linear") {
6420
- return /* @__PURE__ */ React101.createElement("span", null, (0, import_i18n68.__)("Linear gradient", "elementor"));
6486
+ return /* @__PURE__ */ React102.createElement("span", null, (0, import_i18n69.__)("Linear gradient", "elementor"));
6421
6487
  }
6422
- return /* @__PURE__ */ React101.createElement("span", null, (0, import_i18n68.__)("Radial gradient", "elementor"));
6488
+ return /* @__PURE__ */ React102.createElement("span", null, (0, import_i18n69.__)("Radial gradient", "elementor"));
6423
6489
  };
6424
6490
  var getGradientValue = (gradient) => {
6425
6491
  const stops = gradient.stops?.map(({ color, offset }) => `${color} ${offset ?? 0}%`)?.join(",");
@@ -6430,16 +6496,16 @@ var getGradientValue = (gradient) => {
6430
6496
  };
6431
6497
 
6432
6498
  // src/styles-inheritance/transformers/background-image-overlay-transformer.tsx
6433
- var React102 = __toESM(require("react"));
6499
+ var React103 = __toESM(require("react"));
6434
6500
  var import_editor_canvas10 = require("@elementor/editor-canvas");
6435
- var import_editor_ui11 = require("@elementor/editor-ui");
6436
- var import_ui51 = require("@elementor/ui");
6501
+ var import_editor_ui12 = require("@elementor/editor-ui");
6502
+ var import_ui52 = require("@elementor/ui");
6437
6503
  var import_wp_media = require("@elementor/wp-media");
6438
- var backgroundImageOverlayTransformer = (0, import_editor_canvas10.createTransformer)((value) => /* @__PURE__ */ React102.createElement(import_ui51.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React102.createElement(ItemIconImage, { value }), /* @__PURE__ */ React102.createElement(ItemLabelImage, { value })));
6504
+ var backgroundImageOverlayTransformer = (0, import_editor_canvas10.createTransformer)((value) => /* @__PURE__ */ React103.createElement(import_ui52.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React103.createElement(ItemIconImage, { value }), /* @__PURE__ */ React103.createElement(ItemLabelImage, { value })));
6439
6505
  var ItemIconImage = ({ value }) => {
6440
6506
  const { imageUrl } = useImage(value);
6441
- return /* @__PURE__ */ React102.createElement(
6442
- import_ui51.CardMedia,
6507
+ return /* @__PURE__ */ React103.createElement(
6508
+ import_ui52.CardMedia,
6443
6509
  {
6444
6510
  image: imageUrl,
6445
6511
  sx: (theme) => ({
@@ -6454,7 +6520,7 @@ var ItemIconImage = ({ value }) => {
6454
6520
  };
6455
6521
  var ItemLabelImage = ({ value }) => {
6456
6522
  const { imageTitle } = useImage(value);
6457
- return /* @__PURE__ */ React102.createElement(import_editor_ui11.EllipsisWithTooltip, { title: imageTitle }, /* @__PURE__ */ React102.createElement("span", null, imageTitle));
6523
+ return /* @__PURE__ */ React103.createElement(import_editor_ui12.EllipsisWithTooltip, { title: imageTitle }, /* @__PURE__ */ React103.createElement("span", null, imageTitle));
6458
6524
  };
6459
6525
  var useImage = (image) => {
6460
6526
  let imageTitle, imageUrl = null;
@@ -6479,9 +6545,9 @@ var getFileExtensionFromFilename = (filename) => {
6479
6545
  };
6480
6546
 
6481
6547
  // src/styles-inheritance/transformers/box-shadow-transformer.tsx
6482
- var React103 = __toESM(require("react"));
6548
+ var React104 = __toESM(require("react"));
6483
6549
  var import_editor_canvas11 = require("@elementor/editor-canvas");
6484
- var import_ui52 = require("@elementor/ui");
6550
+ var import_ui53 = require("@elementor/ui");
6485
6551
  var boxShadowTransformer = (0, import_editor_canvas11.createTransformer)((value) => {
6486
6552
  if (!value) {
6487
6553
  return null;
@@ -6490,20 +6556,20 @@ var boxShadowTransformer = (0, import_editor_canvas11.createTransformer)((value)
6490
6556
  const colorValue = color || "#000000";
6491
6557
  const sizes = [hOffset || "0px", vOffset || "0px", blur || "10px", spread || "0px"].join(" ");
6492
6558
  const positionValue = position || "outset";
6493
- return /* @__PURE__ */ React103.createElement(import_ui52.Stack, { direction: "column", gap: 0.5, pb: 1 }, /* @__PURE__ */ React103.createElement("span", null, colorValue, " ", positionValue, ", ", sizes));
6559
+ return /* @__PURE__ */ React104.createElement(import_ui53.Stack, { direction: "column", gap: 0.5, pb: 1 }, /* @__PURE__ */ React104.createElement("span", null, colorValue, " ", positionValue, ", ", sizes));
6494
6560
  });
6495
6561
 
6496
6562
  // src/styles-inheritance/transformers/color-transformer.tsx
6497
- var React104 = __toESM(require("react"));
6563
+ var React105 = __toESM(require("react"));
6498
6564
  var import_editor_canvas12 = require("@elementor/editor-canvas");
6499
- var import_ui53 = require("@elementor/ui");
6565
+ var import_ui54 = require("@elementor/ui");
6500
6566
  function isValidCSSColor(value) {
6501
6567
  if (!value.trim()) {
6502
6568
  return false;
6503
6569
  }
6504
6570
  return CSS.supports("color", value.trim());
6505
6571
  }
6506
- var StyledColorIndicator = (0, import_ui53.styled)(import_ui53.UnstableColorIndicator)(({ theme }) => ({
6572
+ var StyledColorIndicator = (0, import_ui54.styled)(import_ui54.UnstableColorIndicator)(({ theme }) => ({
6507
6573
  width: "1em",
6508
6574
  height: "1em",
6509
6575
  borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -6514,13 +6580,13 @@ var colorTransformer = (0, import_editor_canvas12.createTransformer)((value) =>
6514
6580
  if (!isValidCSSColor(value)) {
6515
6581
  return value;
6516
6582
  }
6517
- return /* @__PURE__ */ React104.createElement(import_ui53.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React104.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React104.createElement("span", null, value));
6583
+ return /* @__PURE__ */ React105.createElement(import_ui54.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React105.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React105.createElement("span", null, value));
6518
6584
  });
6519
6585
 
6520
6586
  // src/styles-inheritance/transformers/repeater-to-items-transformer.tsx
6521
- var React105 = __toESM(require("react"));
6587
+ var React106 = __toESM(require("react"));
6522
6588
  var import_editor_canvas13 = require("@elementor/editor-canvas");
6523
- var import_ui54 = require("@elementor/ui");
6589
+ var import_ui55 = require("@elementor/ui");
6524
6590
  var createRepeaterToItemsTransformer = (originalTransformer, separator = " ") => {
6525
6591
  return (0, import_editor_canvas13.createTransformer)((value, options12) => {
6526
6592
  const stringResult = originalTransformer(value, options12);
@@ -6531,7 +6597,7 @@ var createRepeaterToItemsTransformer = (originalTransformer, separator = " ") =>
6531
6597
  if (parts.length <= 1) {
6532
6598
  return stringResult;
6533
6599
  }
6534
- return /* @__PURE__ */ React105.createElement(import_ui54.Stack, { direction: "column", gap: 0.5 }, parts.map((part, index) => /* @__PURE__ */ React105.createElement(import_ui54.Stack, { key: index }, part.trim())));
6600
+ return /* @__PURE__ */ React106.createElement(import_ui55.Stack, { direction: "column", gap: 0.5 }, parts.map((part, index) => /* @__PURE__ */ React106.createElement(import_ui55.Stack, { key: index }, part.trim())));
6535
6601
  });
6536
6602
  };
6537
6603
 
@@ -6578,7 +6644,7 @@ function registerCustomTransformers(originalStyleTransformers) {
6578
6644
  }
6579
6645
 
6580
6646
  // src/styles-inheritance/init.ts
6581
- var init2 = () => {
6647
+ var init3 = () => {
6582
6648
  initStylesInheritanceTransformers();
6583
6649
  registerFieldIndicator({
6584
6650
  fieldType: FIELD_TYPE.STYLES,
@@ -6589,17 +6655,18 @@ var init2 = () => {
6589
6655
  };
6590
6656
 
6591
6657
  // src/init.ts
6592
- function init3() {
6658
+ function init4() {
6593
6659
  (0, import_editor_panels3.__registerPanel)(panel);
6594
6660
  blockV1Panel();
6595
6661
  (0, import_editor.injectIntoLogic)({
6596
6662
  id: "editing-panel-hooks",
6597
6663
  component: EditingPanelHooks
6598
6664
  });
6599
- init();
6600
6665
  init2();
6666
+ init3();
6601
6667
  registerElementControls();
6602
6668
  initResetStyleProps();
6669
+ init();
6603
6670
  }
6604
6671
  var blockV1Panel = () => {
6605
6672
  (0, import_editor_v1_adapters8.blockCommand)({