@elementor/editor-editing-panel 1.36.0 → 1.37.0

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.
package/dist/index.js CHANGED
@@ -34,12 +34,12 @@ __export(index_exports, {
34
34
  init: () => init2,
35
35
  injectIntoClassSelectorActions: () => injectIntoClassSelectorActions,
36
36
  registerControlReplacement: () => registerControlReplacement,
37
- useBoundProp: () => import_editor_controls51.useBoundProp,
37
+ useBoundProp: () => import_editor_controls53.useBoundProp,
38
38
  usePanelActions: () => usePanelActions,
39
39
  usePanelStatus: () => usePanelStatus
40
40
  });
41
41
  module.exports = __toCommonJS(index_exports);
42
- var import_editor_controls51 = require("@elementor/editor-controls");
42
+ var import_editor_controls53 = require("@elementor/editor-controls");
43
43
 
44
44
  // src/control-replacement.tsx
45
45
  var import_editor_controls = require("@elementor/editor-controls");
@@ -949,15 +949,15 @@ function useHandleApply(appliedIds, setAppliedIds) {
949
949
  var import_editor_panels2 = require("@elementor/editor-panels");
950
950
 
951
951
  // src/components/editing-panel.tsx
952
- var React70 = __toESM(require("react"));
953
- var import_editor_controls45 = require("@elementor/editor-controls");
952
+ var React72 = __toESM(require("react"));
953
+ var import_editor_controls47 = require("@elementor/editor-controls");
954
954
  var import_editor_elements8 = require("@elementor/editor-elements");
955
955
  var import_editor_panels = require("@elementor/editor-panels");
956
956
  var import_editor_ui4 = require("@elementor/editor-ui");
957
957
  var import_icons23 = require("@elementor/icons");
958
958
  var import_session5 = require("@elementor/session");
959
- var import_ui58 = require("@elementor/ui");
960
- var import_i18n46 = require("@wordpress/i18n");
959
+ var import_ui60 = require("@elementor/ui");
960
+ var import_i18n48 = require("@wordpress/i18n");
961
961
 
962
962
  // src/controls-actions.ts
963
963
  var import_menus = require("@elementor/menus");
@@ -1013,10 +1013,10 @@ function EditorPanelErrorFallback() {
1013
1013
  }
1014
1014
 
1015
1015
  // src/components/editing-panel-tabs.tsx
1016
- var React69 = __toESM(require("react"));
1016
+ var React71 = __toESM(require("react"));
1017
1017
  var import_react26 = require("react");
1018
- var import_ui57 = require("@elementor/ui");
1019
- var import_i18n45 = require("@wordpress/i18n");
1018
+ var import_ui59 = require("@elementor/ui");
1019
+ var import_i18n47 = require("@wordpress/i18n");
1020
1020
 
1021
1021
  // src/contexts/scroll-context.tsx
1022
1022
  var React10 = __toESM(require("react"));
@@ -1059,11 +1059,13 @@ function useScrollDirection() {
1059
1059
 
1060
1060
  // src/hooks/use-state-by-element.ts
1061
1061
  var import_react11 = require("react");
1062
+ var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
1062
1063
  var import_session = require("@elementor/session");
1063
1064
  var useStateByElement = (key, initialValue) => {
1064
1065
  const { element } = useElement();
1066
+ const isFeatureActive = (0, import_editor_v1_adapters.isExperimentActive)("e_v_3_30");
1065
1067
  const lookup = `elementor/editor-state/${element.id}/${key}`;
1066
- const storedValue = (0, import_session.getSessionStorageItem)(lookup);
1068
+ const storedValue = isFeatureActive ? (0, import_session.getSessionStorageItem)(lookup) : initialValue;
1067
1069
  const [value, setValue] = (0, import_react11.useState)(storedValue ?? initialValue);
1068
1070
  const doUpdate = (newValue) => {
1069
1071
  (0, import_session.setSessionStorageItem)(lookup, newValue);
@@ -1238,13 +1240,13 @@ var Control2 = ({ control }) => {
1238
1240
  };
1239
1241
 
1240
1242
  // src/components/style-tab.tsx
1241
- var React68 = __toESM(require("react"));
1243
+ var React70 = __toESM(require("react"));
1242
1244
  var import_react25 = require("react");
1243
1245
  var import_editor_props7 = require("@elementor/editor-props");
1244
1246
  var import_editor_responsive2 = require("@elementor/editor-responsive");
1245
1247
  var import_session4 = require("@elementor/session");
1246
- var import_ui56 = require("@elementor/ui");
1247
- var import_i18n44 = require("@wordpress/i18n");
1248
+ var import_ui58 = require("@elementor/ui");
1249
+ var import_i18n46 = require("@wordpress/i18n");
1248
1250
 
1249
1251
  // src/contexts/styles-inheritance-context.tsx
1250
1252
  var React17 = __toESM(require("react"));
@@ -1499,7 +1501,7 @@ var import_react16 = require("react");
1499
1501
  var import_editor_elements6 = require("@elementor/editor-elements");
1500
1502
  var import_editor_styles = require("@elementor/editor-styles");
1501
1503
  var import_editor_styles_repository6 = require("@elementor/editor-styles-repository");
1502
- var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
1504
+ var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
1503
1505
  var import_i18n4 = require("@wordpress/i18n");
1504
1506
  function useStylesFields(propNames) {
1505
1507
  const { element } = useElement();
@@ -1550,7 +1552,7 @@ function getProps({ styleId, elementId, provider, meta, propNames }) {
1550
1552
  }
1551
1553
  function useUndoableCreateElementStyle() {
1552
1554
  return (0, import_react16.useMemo)(() => {
1553
- return (0, import_editor_v1_adapters.undoable)(
1555
+ return (0, import_editor_v1_adapters2.undoable)(
1554
1556
  {
1555
1557
  do: (payload) => {
1556
1558
  return (0, import_editor_elements6.createElementStyle)({
@@ -1578,7 +1580,7 @@ function useUndoableCreateElementStyle() {
1578
1580
  }
1579
1581
  function useUndoableUpdateStyle() {
1580
1582
  return (0, import_react16.useMemo)(() => {
1581
- return (0, import_editor_v1_adapters.undoable)(
1583
+ return (0, import_editor_v1_adapters2.undoable)(
1582
1584
  {
1583
1585
  do: ({ elementId, styleId, provider, meta, props }) => {
1584
1586
  if (!provider.actions.updateProps) {
@@ -1635,7 +1637,7 @@ var React19 = __toESM(require("react"));
1635
1637
  var import_react19 = require("react");
1636
1638
  var import_editor_controls5 = require("@elementor/editor-controls");
1637
1639
  var import_editor_styles_repository7 = require("@elementor/editor-styles-repository");
1638
- var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
1640
+ var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
1639
1641
  var import_ui16 = require("@elementor/ui");
1640
1642
  var import_i18n5 = require("@wordpress/i18n");
1641
1643
 
@@ -1723,7 +1725,7 @@ var StylesInheritanceIndicator = () => {
1723
1725
  const hasValue = value !== null && value !== void 0;
1724
1726
  const label = getLabel({ isFinalValue, hasValue });
1725
1727
  const variantType = getVariant({ isFinalValue, hasValue, currentStyleProvider });
1726
- const eIndicationsPopover = (0, import_editor_v1_adapters2.isExperimentActive)("e_indications_popover");
1728
+ const eIndicationsPopover = (0, import_editor_v1_adapters3.isExperimentActive)("e_indications_popover");
1727
1729
  if (!eIndicationsPopover) {
1728
1730
  return /* @__PURE__ */ React19.createElement(StyleIndicator, { variant: variantType, "aria-label": label });
1729
1731
  }
@@ -2046,14 +2048,14 @@ var import_editor_elements7 = require("@elementor/editor-elements");
2046
2048
  var import_i18n21 = require("@wordpress/i18n");
2047
2049
 
2048
2050
  // src/hooks/use-computed-style.ts
2049
- var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
2051
+ var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
2050
2052
  function useComputedStyle(elementId) {
2051
- return (0, import_editor_v1_adapters3.__privateUseListenTo)(
2053
+ return (0, import_editor_v1_adapters4.__privateUseListenTo)(
2052
2054
  [
2053
- (0, import_editor_v1_adapters3.windowEvent)("elementor/device-mode/change"),
2054
- (0, import_editor_v1_adapters3.commandEndEvent)("document/elements/reset-style"),
2055
- (0, import_editor_v1_adapters3.commandEndEvent)("document/elements/settings"),
2056
- (0, import_editor_v1_adapters3.commandEndEvent)("document/elements/paste-style")
2055
+ (0, import_editor_v1_adapters4.windowEvent)("elementor/device-mode/change"),
2056
+ (0, import_editor_v1_adapters4.commandEndEvent)("document/elements/reset-style"),
2057
+ (0, import_editor_v1_adapters4.commandEndEvent)("document/elements/settings"),
2058
+ (0, import_editor_v1_adapters4.commandEndEvent)("document/elements/paste-style")
2057
2059
  ],
2058
2060
  () => {
2059
2061
  if (!elementId) {
@@ -2297,7 +2299,7 @@ var AlignSelfChild = ({ parentStyleDirection }) => {
2297
2299
  // src/components/style-sections/layout-section/display-field.tsx
2298
2300
  var React37 = __toESM(require("react"));
2299
2301
  var import_editor_controls17 = require("@elementor/editor-controls");
2300
- var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
2302
+ var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
2301
2303
  var import_ui30 = require("@elementor/ui");
2302
2304
  var import_i18n14 = require("@wordpress/i18n");
2303
2305
  var displayFieldItems = [
@@ -2321,7 +2323,7 @@ var displayFieldItems = [
2321
2323
  }
2322
2324
  ];
2323
2325
  var DisplayField = () => {
2324
- const isDisplayNoneFeatureActive = (0, import_editor_v1_adapters4.isExperimentActive)("e_v_3_30");
2326
+ const isDisplayNoneFeatureActive = (0, import_editor_v1_adapters5.isExperimentActive)("e_v_3_30");
2325
2327
  const items3 = [...displayFieldItems];
2326
2328
  if (isDisplayNoneFeatureActive) {
2327
2329
  items3.push({
@@ -2671,7 +2673,7 @@ var shouldDisplayFlexFields = (display, local) => {
2671
2673
 
2672
2674
  // src/components/style-sections/position-section/position-section.tsx
2673
2675
  var React49 = __toESM(require("react"));
2674
- var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
2676
+ var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
2675
2677
  var import_session3 = require("@elementor/session");
2676
2678
 
2677
2679
  // src/components/style-sections/position-section/dimensions-field.tsx
@@ -2742,7 +2744,7 @@ var PositionSection = () => {
2742
2744
  "inset-inline-end"
2743
2745
  ]);
2744
2746
  const [dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory] = usePersistDimensions();
2745
- const isCssIdFeatureActive = (0, import_editor_v1_adapters5.isExperimentActive)("e_v_3_30");
2747
+ const isCssIdFeatureActive = (0, import_editor_v1_adapters6.isExperimentActive)("e_v_3_30");
2746
2748
  const onPositionChange = (newPosition, previousPosition) => {
2747
2749
  if (newPosition === "static") {
2748
2750
  if (dimensionsValues) {
@@ -2772,120 +2774,168 @@ var usePersistDimensions = () => {
2772
2774
  };
2773
2775
 
2774
2776
  // src/components/style-sections/size-section/size-section.tsx
2777
+ var React54 = __toESM(require("react"));
2778
+ var import_editor_controls32 = require("@elementor/editor-controls");
2779
+ var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
2780
+ var import_ui45 = require("@elementor/ui");
2781
+ var import_i18n30 = require("@wordpress/i18n");
2782
+
2783
+ // src/components/collapsible-content.tsx
2784
+ var React50 = __toESM(require("react"));
2785
+ var import_react23 = require("react");
2786
+ var import_ui41 = require("@elementor/ui");
2787
+ var import_i18n26 = require("@wordpress/i18n");
2788
+ var CollapsibleContent = ({ children, defaultOpen = false }) => {
2789
+ const [open, setOpen] = (0, import_react23.useState)(defaultOpen);
2790
+ const handleToggle = () => {
2791
+ setOpen((prevOpen) => !prevOpen);
2792
+ };
2793
+ return /* @__PURE__ */ React50.createElement(import_ui41.Stack, null, /* @__PURE__ */ React50.createElement(
2794
+ import_ui41.Button,
2795
+ {
2796
+ fullWidth: true,
2797
+ size: "small",
2798
+ color: "secondary",
2799
+ variant: "outlined",
2800
+ onClick: handleToggle,
2801
+ endIcon: /* @__PURE__ */ React50.createElement(CollapseIcon, { open }),
2802
+ sx: { my: 0.5 }
2803
+ },
2804
+ open ? (0, import_i18n26.__)("Show less", "elementor") : (0, import_i18n26.__)("Show more", "elementor")
2805
+ ), /* @__PURE__ */ React50.createElement(import_ui41.Collapse, { in: open, timeout: "auto", unmountOnExit: true }, children));
2806
+ };
2807
+
2808
+ // src/components/style-sections/size-section/object-fit-field.tsx
2775
2809
  var React51 = __toESM(require("react"));
2776
- var import_editor_controls30 = require("@elementor/editor-controls");
2810
+ var import_editor_controls29 = require("@elementor/editor-controls");
2777
2811
  var import_ui42 = require("@elementor/ui");
2778
2812
  var import_i18n27 = require("@wordpress/i18n");
2813
+ var positionOptions2 = [
2814
+ { label: (0, import_i18n27.__)("Fill", "elementor"), value: "fill" },
2815
+ { label: (0, import_i18n27.__)("Cover", "elementor"), value: "cover" },
2816
+ { label: (0, import_i18n27.__)("Contain", "elementor"), value: "contain" },
2817
+ { label: (0, import_i18n27.__)("None", "elementor"), value: "none" },
2818
+ { label: (0, import_i18n27.__)("Scale down", "elementor"), value: "scale-down" }
2819
+ ];
2820
+ var ObjectFitField = ({ onChange }) => {
2821
+ return /* @__PURE__ */ React51.createElement(StylesField, { bind: "object-fit" }, /* @__PURE__ */ React51.createElement(import_ui42.Grid, { container: true, pt: 2, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(ControlLabel, null, (0, import_i18n27.__)("Object fit", "elementor"))), /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React51.createElement(import_editor_controls29.SelectControl, { options: positionOptions2, onChange }))));
2822
+ };
2823
+
2824
+ // src/components/style-sections/size-section/object-position-field.tsx
2825
+ var React52 = __toESM(require("react"));
2826
+ var import_editor_controls30 = require("@elementor/editor-controls");
2827
+ var import_ui43 = require("@elementor/ui");
2828
+ var import_i18n28 = require("@wordpress/i18n");
2829
+ var positionOptions3 = [
2830
+ { label: (0, import_i18n28.__)("Center center", "elementor"), value: "center center" },
2831
+ { label: (0, import_i18n28.__)("Center left", "elementor"), value: "center left" },
2832
+ { label: (0, import_i18n28.__)("Center right", "elementor"), value: "center right" },
2833
+ { label: (0, import_i18n28.__)("Top center", "elementor"), value: "top center" },
2834
+ { label: (0, import_i18n28.__)("Top left", "elementor"), value: "top left" },
2835
+ { label: (0, import_i18n28.__)("Top right", "elementor"), value: "top right" },
2836
+ { label: (0, import_i18n28.__)("Bottom center", "elementor"), value: "bottom center" },
2837
+ { label: (0, import_i18n28.__)("Bottom left", "elementor"), value: "bottom left" },
2838
+ { label: (0, import_i18n28.__)("Bottom right", "elementor"), value: "bottom right" }
2839
+ ];
2840
+ var ObjectPositionField = ({ onChange }) => {
2841
+ return /* @__PURE__ */ React52.createElement(StylesField, { bind: "object-position" }, /* @__PURE__ */ React52.createElement(import_ui43.Grid, { container: true, pt: 2, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React52.createElement(import_ui43.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(ControlLabel, null, (0, import_i18n28.__)("Object position", "elementor"))), /* @__PURE__ */ React52.createElement(import_ui43.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React52.createElement(import_editor_controls30.SelectControl, { options: positionOptions3, onChange }))));
2842
+ };
2779
2843
 
2780
2844
  // src/components/style-sections/size-section/overflow-field.tsx
2781
- var React50 = __toESM(require("react"));
2782
- var import_editor_controls29 = require("@elementor/editor-controls");
2845
+ var React53 = __toESM(require("react"));
2846
+ var import_editor_controls31 = require("@elementor/editor-controls");
2783
2847
  var import_icons17 = require("@elementor/icons");
2784
- var import_ui41 = require("@elementor/ui");
2785
- var import_i18n26 = require("@wordpress/i18n");
2848
+ var import_ui44 = require("@elementor/ui");
2849
+ var import_i18n29 = require("@wordpress/i18n");
2786
2850
  var options6 = [
2787
2851
  {
2788
2852
  value: "visible",
2789
- label: (0, import_i18n26.__)("Visible", "elementor"),
2790
- renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(import_icons17.EyeIcon, { fontSize: size }),
2853
+ label: (0, import_i18n29.__)("Visible", "elementor"),
2854
+ renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(import_icons17.EyeIcon, { fontSize: size }),
2791
2855
  showTooltip: true
2792
2856
  },
2793
2857
  {
2794
2858
  value: "hidden",
2795
- label: (0, import_i18n26.__)("Hidden", "elementor"),
2796
- renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(import_icons17.EyeOffIcon, { fontSize: size }),
2859
+ label: (0, import_i18n29.__)("Hidden", "elementor"),
2860
+ renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(import_icons17.EyeOffIcon, { fontSize: size }),
2797
2861
  showTooltip: true
2798
2862
  },
2799
2863
  {
2800
2864
  value: "auto",
2801
- label: (0, import_i18n26.__)("Auto", "elementor"),
2802
- renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(import_icons17.LetterAIcon, { fontSize: size }),
2865
+ label: (0, import_i18n29.__)("Auto", "elementor"),
2866
+ renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(import_icons17.LetterAIcon, { fontSize: size }),
2803
2867
  showTooltip: true
2804
2868
  }
2805
2869
  ];
2806
2870
  var OverflowField = () => {
2807
- return /* @__PURE__ */ React50.createElement(StylesField, { bind: "overflow" }, /* @__PURE__ */ React50.createElement(import_ui41.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React50.createElement(import_ui41.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React50.createElement(ControlLabel, null, (0, import_i18n26.__)("Overflow", "elementor"))), /* @__PURE__ */ React50.createElement(import_ui41.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React50.createElement(import_editor_controls29.ToggleControl, { options: options6 }))));
2871
+ return /* @__PURE__ */ React53.createElement(StylesField, { bind: "overflow" }, /* @__PURE__ */ React53.createElement(import_ui44.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(import_ui44.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(ControlLabel, null, (0, import_i18n29.__)("Overflow", "elementor"))), /* @__PURE__ */ React53.createElement(import_ui44.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React53.createElement(import_editor_controls31.ToggleControl, { options: options6 }))));
2808
2872
  };
2809
2873
 
2810
2874
  // src/components/style-sections/size-section/size-section.tsx
2811
2875
  var SizeSection = () => {
2812
- return /* @__PURE__ */ React51.createElement(SectionContent, null, /* @__PURE__ */ React51.createElement(import_ui42.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(SizeField, { bind: "width", label: (0, import_i18n27.__)("Width", "elementor"), extendedValues: ["auto"] })), /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(SizeField, { bind: "height", label: (0, import_i18n27.__)("Height", "elementor"), extendedValues: ["auto"] }))), /* @__PURE__ */ React51.createElement(import_ui42.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(
2876
+ const [fitValue, setFitValue] = useStylesField("object-fit");
2877
+ const isNotFill = fitValue && fitValue?.value !== "fill";
2878
+ const onFitChange = (newFit, previousValue) => {
2879
+ if (newFit && newFit !== previousValue) {
2880
+ setFitValue({
2881
+ value: newFit,
2882
+ $$type: "string"
2883
+ });
2884
+ }
2885
+ };
2886
+ const isVersion330Active = (0, import_editor_v1_adapters7.isExperimentActive)("e_v_3_30");
2887
+ return /* @__PURE__ */ React54.createElement(SectionContent, null, /* @__PURE__ */ React54.createElement(import_ui45.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(SizeField, { bind: "width", label: (0, import_i18n30.__)("Width", "elementor"), extendedValues: ["auto"] })), /* @__PURE__ */ React54.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(SizeField, { bind: "height", label: (0, import_i18n30.__)("Height", "elementor"), extendedValues: ["auto"] }))), /* @__PURE__ */ React54.createElement(import_ui45.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(
2813
2888
  SizeField,
2814
2889
  {
2815
2890
  bind: "min-width",
2816
- label: (0, import_i18n27.__)("Min width", "elementor"),
2891
+ label: (0, import_i18n30.__)("Min width", "elementor"),
2817
2892
  extendedValues: ["auto"]
2818
2893
  }
2819
- )), /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(
2894
+ )), /* @__PURE__ */ React54.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(
2820
2895
  SizeField,
2821
2896
  {
2822
2897
  bind: "min-height",
2823
- label: (0, import_i18n27.__)("Min height", "elementor"),
2898
+ label: (0, import_i18n30.__)("Min height", "elementor"),
2824
2899
  extendedValues: ["auto"]
2825
2900
  }
2826
- ))), /* @__PURE__ */ React51.createElement(import_ui42.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(SizeField, { bind: "max-width", label: (0, import_i18n27.__)("Max width", "elementor") })), /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(SizeField, { bind: "max-height", label: (0, import_i18n27.__)("Max height", "elementor") }))), /* @__PURE__ */ React51.createElement(PanelDivider, null), /* @__PURE__ */ React51.createElement(import_ui42.Stack, null, /* @__PURE__ */ React51.createElement(OverflowField, null)));
2901
+ ))), /* @__PURE__ */ React54.createElement(import_ui45.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(SizeField, { bind: "max-width", label: (0, import_i18n30.__)("Max width", "elementor") })), /* @__PURE__ */ React54.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(SizeField, { bind: "max-height", label: (0, import_i18n30.__)("Max height", "elementor") }))), /* @__PURE__ */ React54.createElement(PanelDivider, null), /* @__PURE__ */ React54.createElement(import_ui45.Stack, null, /* @__PURE__ */ React54.createElement(OverflowField, null)), isVersion330Active && /* @__PURE__ */ React54.createElement(CollapsibleContent, null, /* @__PURE__ */ React54.createElement(ObjectFitField, { onChange: onFitChange }), /* @__PURE__ */ React54.createElement(import_ui45.Grid, { item: true, xs: 6 }, isNotFill && /* @__PURE__ */ React54.createElement(ObjectPositionField, null))));
2827
2902
  };
2828
2903
  var SizeField = ({ label, bind, extendedValues }) => {
2829
- return /* @__PURE__ */ React51.createElement(StylesField, { bind }, /* @__PURE__ */ React51.createElement(import_ui42.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React51.createElement(ControlLabel, null, label)), /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React51.createElement(import_editor_controls30.SizeControl, { extendedValues }))));
2904
+ return /* @__PURE__ */ React54.createElement(StylesField, { bind }, /* @__PURE__ */ React54.createElement(import_ui45.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React54.createElement(import_ui45.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React54.createElement(ControlLabel, null, label)), /* @__PURE__ */ React54.createElement(import_ui45.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React54.createElement(import_editor_controls32.SizeControl, { extendedValues }))));
2830
2905
  };
2831
2906
 
2832
2907
  // src/components/style-sections/spacing-section/spacing-section.tsx
2833
- var React52 = __toESM(require("react"));
2834
- var import_editor_controls31 = require("@elementor/editor-controls");
2835
- var import_i18n28 = require("@wordpress/i18n");
2908
+ var React55 = __toESM(require("react"));
2909
+ var import_editor_controls33 = require("@elementor/editor-controls");
2910
+ var import_i18n31 = require("@wordpress/i18n");
2836
2911
  var SpacingSection = () => {
2837
2912
  const { isSiteRtl } = useDirection();
2838
- return /* @__PURE__ */ React52.createElement(SectionContent, null, /* @__PURE__ */ React52.createElement(StylesField, { bind: "margin" }, /* @__PURE__ */ React52.createElement(
2839
- import_editor_controls31.LinkedDimensionsControl,
2913
+ return /* @__PURE__ */ React55.createElement(SectionContent, null, /* @__PURE__ */ React55.createElement(StylesField, { bind: "margin" }, /* @__PURE__ */ React55.createElement(
2914
+ import_editor_controls33.LinkedDimensionsControl,
2840
2915
  {
2841
- label: (0, import_i18n28.__)("Margin", "elementor"),
2916
+ label: (0, import_i18n31.__)("Margin", "elementor"),
2842
2917
  isSiteRtl,
2843
2918
  extendedValues: ["auto"]
2844
2919
  }
2845
- )), /* @__PURE__ */ React52.createElement(PanelDivider, null), /* @__PURE__ */ React52.createElement(StylesField, { bind: "padding" }, /* @__PURE__ */ React52.createElement(import_editor_controls31.LinkedDimensionsControl, { label: (0, import_i18n28.__)("Padding", "elementor"), isSiteRtl })));
2920
+ )), /* @__PURE__ */ React55.createElement(PanelDivider, null), /* @__PURE__ */ React55.createElement(StylesField, { bind: "padding" }, /* @__PURE__ */ React55.createElement(import_editor_controls33.LinkedDimensionsControl, { label: (0, import_i18n31.__)("Padding", "elementor"), isSiteRtl })));
2846
2921
  };
2847
2922
 
2848
2923
  // src/components/style-sections/typography-section/typography-section.tsx
2849
- var React67 = __toESM(require("react"));
2850
-
2851
- // src/components/collapsible-content.tsx
2852
- var React53 = __toESM(require("react"));
2853
- var import_react23 = require("react");
2854
- var import_ui43 = require("@elementor/ui");
2855
- var import_i18n29 = require("@wordpress/i18n");
2856
- var CollapsibleContent = ({ children, defaultOpen = false }) => {
2857
- const [open, setOpen] = (0, import_react23.useState)(defaultOpen);
2858
- const handleToggle = () => {
2859
- setOpen((prevOpen) => !prevOpen);
2860
- };
2861
- return /* @__PURE__ */ React53.createElement(import_ui43.Stack, null, /* @__PURE__ */ React53.createElement(
2862
- import_ui43.Button,
2863
- {
2864
- fullWidth: true,
2865
- size: "small",
2866
- color: "secondary",
2867
- variant: "outlined",
2868
- onClick: handleToggle,
2869
- endIcon: /* @__PURE__ */ React53.createElement(CollapseIcon, { open }),
2870
- sx: { my: 0.5 }
2871
- },
2872
- open ? (0, import_i18n29.__)("Show less", "elementor") : (0, import_i18n29.__)("Show more", "elementor")
2873
- ), /* @__PURE__ */ React53.createElement(import_ui43.Collapse, { in: open, timeout: "auto", unmountOnExit: true }, children));
2874
- };
2924
+ var React69 = __toESM(require("react"));
2875
2925
 
2876
2926
  // src/components/style-sections/typography-section/font-family-field.tsx
2877
- var React54 = __toESM(require("react"));
2878
- var import_editor_controls32 = require("@elementor/editor-controls");
2879
- var import_ui44 = require("@elementor/ui");
2880
- var import_i18n31 = require("@wordpress/i18n");
2927
+ var React56 = __toESM(require("react"));
2928
+ var import_editor_controls34 = require("@elementor/editor-controls");
2929
+ var import_ui46 = require("@elementor/ui");
2930
+ var import_i18n33 = require("@wordpress/i18n");
2881
2931
 
2882
2932
  // src/components/style-sections/typography-section/hooks/use-font-families.ts
2883
2933
  var import_react24 = require("react");
2884
- var import_i18n30 = require("@wordpress/i18n");
2934
+ var import_i18n32 = require("@wordpress/i18n");
2885
2935
  var supportedCategories = {
2886
- system: (0, import_i18n30.__)("System", "elementor"),
2887
- custom: (0, import_i18n30.__)("Custom Fonts", "elementor"),
2888
- googlefonts: (0, import_i18n30.__)("Google Fonts", "elementor")
2936
+ system: (0, import_i18n32.__)("System", "elementor"),
2937
+ custom: (0, import_i18n32.__)("Custom Fonts", "elementor"),
2938
+ googlefonts: (0, import_i18n32.__)("Google Fonts", "elementor")
2889
2939
  };
2890
2940
  var getFontFamilies = () => {
2891
2941
  const { controls } = getElementorConfig();
@@ -2922,188 +2972,188 @@ var FontFamilyField = () => {
2922
2972
  if (fontFamilies.length === 0) {
2923
2973
  return null;
2924
2974
  }
2925
- return /* @__PURE__ */ React54.createElement(StylesField, { bind: "font-family" }, /* @__PURE__ */ React54.createElement(import_ui44.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(import_ui44.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(ControlLabel, null, (0, import_i18n31.__)("Font family", "elementor"))), /* @__PURE__ */ React54.createElement(import_ui44.Grid, { item: true, xs: 6, sx: { minWidth: 0 } }, /* @__PURE__ */ React54.createElement(import_editor_controls32.FontFamilyControl, { fontFamilies }))));
2975
+ return /* @__PURE__ */ React56.createElement(StylesField, { bind: "font-family" }, /* @__PURE__ */ React56.createElement(import_ui46.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React56.createElement(import_ui46.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(ControlLabel, null, (0, import_i18n33.__)("Font family", "elementor"))), /* @__PURE__ */ React56.createElement(import_ui46.Grid, { item: true, xs: 6, sx: { minWidth: 0 } }, /* @__PURE__ */ React56.createElement(import_editor_controls34.FontFamilyControl, { fontFamilies }))));
2926
2976
  };
2927
2977
 
2928
2978
  // src/components/style-sections/typography-section/font-size-field.tsx
2929
- var React55 = __toESM(require("react"));
2930
- var import_editor_controls33 = require("@elementor/editor-controls");
2931
- var import_ui45 = require("@elementor/ui");
2932
- var import_i18n32 = require("@wordpress/i18n");
2979
+ var React57 = __toESM(require("react"));
2980
+ var import_editor_controls35 = require("@elementor/editor-controls");
2981
+ var import_ui47 = require("@elementor/ui");
2982
+ var import_i18n34 = require("@wordpress/i18n");
2933
2983
  var FontSizeField = () => {
2934
- return /* @__PURE__ */ React55.createElement(StylesField, { bind: "font-size" }, /* @__PURE__ */ React55.createElement(import_ui45.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React55.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React55.createElement(ControlLabel, null, (0, import_i18n32.__)("Font size", "elementor"))), /* @__PURE__ */ React55.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React55.createElement(import_editor_controls33.SizeControl, null))));
2984
+ return /* @__PURE__ */ React57.createElement(StylesField, { bind: "font-size" }, /* @__PURE__ */ React57.createElement(import_ui47.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(import_ui47.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, (0, import_i18n34.__)("Font size", "elementor"))), /* @__PURE__ */ React57.createElement(import_ui47.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(import_editor_controls35.SizeControl, null))));
2935
2985
  };
2936
2986
 
2937
2987
  // src/components/style-sections/typography-section/font-style-field.tsx
2938
- var React56 = __toESM(require("react"));
2939
- var import_editor_controls34 = require("@elementor/editor-controls");
2988
+ var React58 = __toESM(require("react"));
2989
+ var import_editor_controls36 = require("@elementor/editor-controls");
2940
2990
  var import_icons18 = require("@elementor/icons");
2941
- var import_ui46 = require("@elementor/ui");
2942
- var import_i18n33 = require("@wordpress/i18n");
2991
+ var import_ui48 = require("@elementor/ui");
2992
+ var import_i18n35 = require("@wordpress/i18n");
2943
2993
  var options7 = [
2944
2994
  {
2945
2995
  value: "normal",
2946
- label: (0, import_i18n33.__)("Normal", "elementor"),
2947
- renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(import_icons18.MinusIcon, { fontSize: size }),
2996
+ label: (0, import_i18n35.__)("Normal", "elementor"),
2997
+ renderContent: ({ size }) => /* @__PURE__ */ React58.createElement(import_icons18.MinusIcon, { fontSize: size }),
2948
2998
  showTooltip: true
2949
2999
  },
2950
3000
  {
2951
3001
  value: "italic",
2952
- label: (0, import_i18n33.__)("Italic", "elementor"),
2953
- renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(import_icons18.ItalicIcon, { fontSize: size }),
3002
+ label: (0, import_i18n35.__)("Italic", "elementor"),
3003
+ renderContent: ({ size }) => /* @__PURE__ */ React58.createElement(import_icons18.ItalicIcon, { fontSize: size }),
2954
3004
  showTooltip: true
2955
3005
  }
2956
3006
  ];
2957
- var FontStyleField = () => /* @__PURE__ */ React56.createElement(StylesField, { bind: "font-style" }, /* @__PURE__ */ React56.createElement(import_ui46.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React56.createElement(import_ui46.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(import_editor_controls34.ControlFormLabel, null, (0, import_i18n33.__)("Font style", "elementor"))), /* @__PURE__ */ React56.createElement(import_ui46.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React56.createElement(import_editor_controls34.ToggleControl, { options: options7 }))));
3007
+ var FontStyleField = () => /* @__PURE__ */ React58.createElement(StylesField, { bind: "font-style" }, /* @__PURE__ */ React58.createElement(import_ui48.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(import_ui48.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(import_editor_controls36.ControlFormLabel, null, (0, import_i18n35.__)("Font style", "elementor"))), /* @__PURE__ */ React58.createElement(import_ui48.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React58.createElement(import_editor_controls36.ToggleControl, { options: options7 }))));
2958
3008
 
2959
3009
  // src/components/style-sections/typography-section/font-weight-field.tsx
2960
- var React57 = __toESM(require("react"));
2961
- var import_editor_controls35 = require("@elementor/editor-controls");
2962
- var import_ui47 = require("@elementor/ui");
2963
- var import_i18n34 = require("@wordpress/i18n");
3010
+ var React59 = __toESM(require("react"));
3011
+ var import_editor_controls37 = require("@elementor/editor-controls");
3012
+ var import_ui49 = require("@elementor/ui");
3013
+ var import_i18n36 = require("@wordpress/i18n");
2964
3014
  var fontWeightOptions = [
2965
- { value: "100", label: (0, import_i18n34.__)("100 - Thin", "elementor") },
2966
- { value: "200", label: (0, import_i18n34.__)("200 - Extra light", "elementor") },
2967
- { value: "300", label: (0, import_i18n34.__)("300 - Light", "elementor") },
2968
- { value: "400", label: (0, import_i18n34.__)("400 - Normal", "elementor") },
2969
- { value: "500", label: (0, import_i18n34.__)("500 - Medium", "elementor") },
2970
- { value: "600", label: (0, import_i18n34.__)("600 - Semi bold", "elementor") },
2971
- { value: "700", label: (0, import_i18n34.__)("700 - Bold", "elementor") },
2972
- { value: "800", label: (0, import_i18n34.__)("800 - Extra bold", "elementor") },
2973
- { value: "900", label: (0, import_i18n34.__)("900 - Black", "elementor") }
3015
+ { value: "100", label: (0, import_i18n36.__)("100 - Thin", "elementor") },
3016
+ { value: "200", label: (0, import_i18n36.__)("200 - Extra light", "elementor") },
3017
+ { value: "300", label: (0, import_i18n36.__)("300 - Light", "elementor") },
3018
+ { value: "400", label: (0, import_i18n36.__)("400 - Normal", "elementor") },
3019
+ { value: "500", label: (0, import_i18n36.__)("500 - Medium", "elementor") },
3020
+ { value: "600", label: (0, import_i18n36.__)("600 - Semi bold", "elementor") },
3021
+ { value: "700", label: (0, import_i18n36.__)("700 - Bold", "elementor") },
3022
+ { value: "800", label: (0, import_i18n36.__)("800 - Extra bold", "elementor") },
3023
+ { value: "900", label: (0, import_i18n36.__)("900 - Black", "elementor") }
2974
3024
  ];
2975
3025
  var FontWeightField = () => {
2976
- return /* @__PURE__ */ React57.createElement(StylesField, { bind: "font-weight" }, /* @__PURE__ */ React57.createElement(import_ui47.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(import_ui47.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, (0, import_i18n34.__)("Font weight", "elementor"))), /* @__PURE__ */ React57.createElement(import_ui47.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React57.createElement(import_editor_controls35.SelectControl, { options: fontWeightOptions }))));
3026
+ return /* @__PURE__ */ React59.createElement(StylesField, { bind: "font-weight" }, /* @__PURE__ */ React59.createElement(import_ui49.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React59.createElement(import_ui49.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(ControlLabel, null, (0, import_i18n36.__)("Font weight", "elementor"))), /* @__PURE__ */ React59.createElement(import_ui49.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React59.createElement(import_editor_controls37.SelectControl, { options: fontWeightOptions }))));
2977
3027
  };
2978
3028
 
2979
3029
  // src/components/style-sections/typography-section/letter-spacing-field.tsx
2980
- var React58 = __toESM(require("react"));
2981
- var import_editor_controls36 = require("@elementor/editor-controls");
2982
- var import_ui48 = require("@elementor/ui");
2983
- var import_i18n35 = require("@wordpress/i18n");
3030
+ var React60 = __toESM(require("react"));
3031
+ var import_editor_controls38 = require("@elementor/editor-controls");
3032
+ var import_ui50 = require("@elementor/ui");
3033
+ var import_i18n37 = require("@wordpress/i18n");
2984
3034
  var LetterSpacingField = () => {
2985
- return /* @__PURE__ */ React58.createElement(StylesField, { bind: "letter-spacing" }, /* @__PURE__ */ React58.createElement(import_ui48.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(import_ui48.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(ControlLabel, null, (0, import_i18n35.__)("Letter spacing", "elementor"))), /* @__PURE__ */ React58.createElement(import_ui48.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(import_editor_controls36.SizeControl, null))));
3035
+ return /* @__PURE__ */ React60.createElement(StylesField, { bind: "letter-spacing" }, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(ControlLabel, null, (0, import_i18n37.__)("Letter spacing", "elementor"))), /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(import_editor_controls38.SizeControl, null))));
2986
3036
  };
2987
3037
 
2988
3038
  // src/components/style-sections/typography-section/line-height-field.tsx
2989
- var React59 = __toESM(require("react"));
2990
- var import_editor_controls37 = require("@elementor/editor-controls");
2991
- var import_ui49 = require("@elementor/ui");
2992
- var import_i18n36 = require("@wordpress/i18n");
3039
+ var React61 = __toESM(require("react"));
3040
+ var import_editor_controls39 = require("@elementor/editor-controls");
3041
+ var import_ui51 = require("@elementor/ui");
3042
+ var import_i18n38 = require("@wordpress/i18n");
2993
3043
  var LineHeightField = () => {
2994
- return /* @__PURE__ */ React59.createElement(StylesField, { bind: "line-height" }, /* @__PURE__ */ React59.createElement(import_ui49.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React59.createElement(import_ui49.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(ControlLabel, null, (0, import_i18n36.__)("Line height", "elementor"))), /* @__PURE__ */ React59.createElement(import_ui49.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(import_editor_controls37.SizeControl, null))));
3044
+ return /* @__PURE__ */ React61.createElement(StylesField, { bind: "line-height" }, /* @__PURE__ */ React61.createElement(import_ui51.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React61.createElement(import_ui51.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React61.createElement(ControlLabel, null, (0, import_i18n38.__)("Line height", "elementor"))), /* @__PURE__ */ React61.createElement(import_ui51.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React61.createElement(import_editor_controls39.SizeControl, null))));
2995
3045
  };
2996
3046
 
2997
3047
  // src/components/style-sections/typography-section/text-alignment-field.tsx
2998
- var React60 = __toESM(require("react"));
2999
- var import_editor_controls38 = require("@elementor/editor-controls");
3048
+ var React62 = __toESM(require("react"));
3049
+ var import_editor_controls40 = require("@elementor/editor-controls");
3000
3050
  var import_icons19 = require("@elementor/icons");
3001
- var import_ui50 = require("@elementor/ui");
3002
- var import_i18n37 = require("@wordpress/i18n");
3003
- var AlignStartIcon = (0, import_ui50.withDirection)(import_icons19.AlignLeftIcon);
3004
- var AlignEndIcon = (0, import_ui50.withDirection)(import_icons19.AlignRightIcon);
3051
+ var import_ui52 = require("@elementor/ui");
3052
+ var import_i18n39 = require("@wordpress/i18n");
3053
+ var AlignStartIcon = (0, import_ui52.withDirection)(import_icons19.AlignLeftIcon);
3054
+ var AlignEndIcon = (0, import_ui52.withDirection)(import_icons19.AlignRightIcon);
3005
3055
  var options8 = [
3006
3056
  {
3007
3057
  value: "start",
3008
- label: (0, import_i18n37.__)("Start", "elementor"),
3009
- renderContent: ({ size }) => /* @__PURE__ */ React60.createElement(AlignStartIcon, { fontSize: size }),
3058
+ label: (0, import_i18n39.__)("Start", "elementor"),
3059
+ renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(AlignStartIcon, { fontSize: size }),
3010
3060
  showTooltip: true
3011
3061
  },
3012
3062
  {
3013
3063
  value: "center",
3014
- label: (0, import_i18n37.__)("Center", "elementor"),
3015
- renderContent: ({ size }) => /* @__PURE__ */ React60.createElement(import_icons19.AlignCenterIcon, { fontSize: size }),
3064
+ label: (0, import_i18n39.__)("Center", "elementor"),
3065
+ renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(import_icons19.AlignCenterIcon, { fontSize: size }),
3016
3066
  showTooltip: true
3017
3067
  },
3018
3068
  {
3019
3069
  value: "end",
3020
- label: (0, import_i18n37.__)("End", "elementor"),
3021
- renderContent: ({ size }) => /* @__PURE__ */ React60.createElement(AlignEndIcon, { fontSize: size }),
3070
+ label: (0, import_i18n39.__)("End", "elementor"),
3071
+ renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(AlignEndIcon, { fontSize: size }),
3022
3072
  showTooltip: true
3023
3073
  },
3024
3074
  {
3025
3075
  value: "justify",
3026
- label: (0, import_i18n37.__)("Justify", "elementor"),
3027
- renderContent: ({ size }) => /* @__PURE__ */ React60.createElement(import_icons19.AlignJustifiedIcon, { fontSize: size }),
3076
+ label: (0, import_i18n39.__)("Justify", "elementor"),
3077
+ renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(import_icons19.AlignJustifiedIcon, { fontSize: size }),
3028
3078
  showTooltip: true
3029
3079
  }
3030
3080
  ];
3031
3081
  var TextAlignmentField = () => {
3032
- return /* @__PURE__ */ React60.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(ControlLabel, null, (0, import_i18n37.__)("Text align", "elementor"))), /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React60.createElement(import_editor_controls38.ToggleControl, { options: options8 }))));
3082
+ return /* @__PURE__ */ React62.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React62.createElement(import_ui52.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React62.createElement(import_ui52.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(ControlLabel, null, (0, import_i18n39.__)("Text align", "elementor"))), /* @__PURE__ */ React62.createElement(import_ui52.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React62.createElement(import_editor_controls40.ToggleControl, { options: options8 }))));
3033
3083
  };
3034
3084
 
3035
3085
  // src/components/style-sections/typography-section/text-color-field.tsx
3036
- var React61 = __toESM(require("react"));
3037
- var import_editor_controls39 = require("@elementor/editor-controls");
3038
- var import_ui51 = require("@elementor/ui");
3039
- var import_i18n38 = require("@wordpress/i18n");
3086
+ var React63 = __toESM(require("react"));
3087
+ var import_editor_controls41 = require("@elementor/editor-controls");
3088
+ var import_ui53 = require("@elementor/ui");
3089
+ var import_i18n40 = require("@wordpress/i18n");
3040
3090
  var TextColorField = () => {
3041
- return /* @__PURE__ */ React61.createElement(StylesField, { bind: "color" }, /* @__PURE__ */ React61.createElement(import_ui51.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React61.createElement(import_ui51.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React61.createElement(ControlLabel, null, (0, import_i18n38.__)("Text color", "elementor"))), /* @__PURE__ */ React61.createElement(import_ui51.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React61.createElement(import_editor_controls39.ColorControl, null))));
3091
+ return /* @__PURE__ */ React63.createElement(StylesField, { bind: "color" }, /* @__PURE__ */ React63.createElement(import_ui53.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React63.createElement(import_ui53.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React63.createElement(ControlLabel, null, (0, import_i18n40.__)("Text color", "elementor"))), /* @__PURE__ */ React63.createElement(import_ui53.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React63.createElement(import_editor_controls41.ColorControl, null))));
3042
3092
  };
3043
3093
 
3044
3094
  // src/components/style-sections/typography-section/text-decoration-field.tsx
3045
- var React62 = __toESM(require("react"));
3046
- var import_editor_controls40 = require("@elementor/editor-controls");
3095
+ var React64 = __toESM(require("react"));
3096
+ var import_editor_controls42 = require("@elementor/editor-controls");
3047
3097
  var import_icons20 = require("@elementor/icons");
3048
- var import_ui52 = require("@elementor/ui");
3049
- var import_i18n39 = require("@wordpress/i18n");
3098
+ var import_ui54 = require("@elementor/ui");
3099
+ var import_i18n41 = require("@wordpress/i18n");
3050
3100
  var options9 = [
3051
3101
  {
3052
3102
  value: "none",
3053
- label: (0, import_i18n39.__)("None", "elementor"),
3054
- renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(import_icons20.MinusIcon, { fontSize: size }),
3103
+ label: (0, import_i18n41.__)("None", "elementor"),
3104
+ renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons20.MinusIcon, { fontSize: size }),
3055
3105
  showTooltip: true,
3056
3106
  exclusive: true
3057
3107
  },
3058
3108
  {
3059
3109
  value: "underline",
3060
- label: (0, import_i18n39.__)("Underline", "elementor"),
3061
- renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(import_icons20.UnderlineIcon, { fontSize: size }),
3110
+ label: (0, import_i18n41.__)("Underline", "elementor"),
3111
+ renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons20.UnderlineIcon, { fontSize: size }),
3062
3112
  showTooltip: true
3063
3113
  },
3064
3114
  {
3065
3115
  value: "line-through",
3066
- label: (0, import_i18n39.__)("Line-through", "elementor"),
3067
- renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(import_icons20.StrikethroughIcon, { fontSize: size }),
3116
+ label: (0, import_i18n41.__)("Line-through", "elementor"),
3117
+ renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons20.StrikethroughIcon, { fontSize: size }),
3068
3118
  showTooltip: true
3069
3119
  },
3070
3120
  {
3071
3121
  value: "overline",
3072
- label: (0, import_i18n39.__)("Overline", "elementor"),
3073
- renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(import_icons20.OverlineIcon, { fontSize: size }),
3122
+ label: (0, import_i18n41.__)("Overline", "elementor"),
3123
+ renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons20.OverlineIcon, { fontSize: size }),
3074
3124
  showTooltip: true
3075
3125
  }
3076
3126
  ];
3077
- var TextDecorationField = () => /* @__PURE__ */ React62.createElement(StylesField, { bind: "text-decoration" }, /* @__PURE__ */ React62.createElement(import_ui52.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React62.createElement(import_ui52.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(ControlLabel, null, (0, import_i18n39.__)("Line decoration", "elementor"))), /* @__PURE__ */ React62.createElement(import_ui52.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React62.createElement(import_editor_controls40.ToggleControl, { options: options9, exclusive: false }))));
3127
+ var TextDecorationField = () => /* @__PURE__ */ React64.createElement(StylesField, { bind: "text-decoration" }, /* @__PURE__ */ React64.createElement(import_ui54.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React64.createElement(import_ui54.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React64.createElement(ControlLabel, null, (0, import_i18n41.__)("Line decoration", "elementor"))), /* @__PURE__ */ React64.createElement(import_ui54.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React64.createElement(import_editor_controls42.ToggleControl, { options: options9, exclusive: false }))));
3078
3128
 
3079
3129
  // src/components/style-sections/typography-section/text-direction-field.tsx
3080
- var React63 = __toESM(require("react"));
3081
- var import_editor_controls41 = require("@elementor/editor-controls");
3130
+ var React65 = __toESM(require("react"));
3131
+ var import_editor_controls43 = require("@elementor/editor-controls");
3082
3132
  var import_icons21 = require("@elementor/icons");
3083
- var import_ui53 = require("@elementor/ui");
3084
- var import_i18n40 = require("@wordpress/i18n");
3133
+ var import_ui55 = require("@elementor/ui");
3134
+ var import_i18n42 = require("@wordpress/i18n");
3085
3135
  var options10 = [
3086
3136
  {
3087
3137
  value: "ltr",
3088
- label: (0, import_i18n40.__)("Left to right", "elementor"),
3089
- renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(import_icons21.TextDirectionLtrIcon, { fontSize: size }),
3138
+ label: (0, import_i18n42.__)("Left to right", "elementor"),
3139
+ renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(import_icons21.TextDirectionLtrIcon, { fontSize: size }),
3090
3140
  showTooltip: true
3091
3141
  },
3092
3142
  {
3093
3143
  value: "rtl",
3094
- label: (0, import_i18n40.__)("Right to left", "elementor"),
3095
- renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(import_icons21.TextDirectionRtlIcon, { fontSize: size }),
3144
+ label: (0, import_i18n42.__)("Right to left", "elementor"),
3145
+ renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(import_icons21.TextDirectionRtlIcon, { fontSize: size }),
3096
3146
  showTooltip: true
3097
3147
  }
3098
3148
  ];
3099
3149
  var TextDirectionField = () => {
3100
- return /* @__PURE__ */ React63.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React63.createElement(import_ui53.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React63.createElement(import_ui53.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React63.createElement(ControlLabel, null, (0, import_i18n40.__)("Direction", "elementor"))), /* @__PURE__ */ React63.createElement(import_ui53.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React63.createElement(import_editor_controls41.ToggleControl, { options: options10 }))));
3150
+ return /* @__PURE__ */ React65.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React65.createElement(import_ui55.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React65.createElement(import_ui55.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(ControlLabel, null, (0, import_i18n42.__)("Direction", "elementor"))), /* @__PURE__ */ React65.createElement(import_ui55.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React65.createElement(import_editor_controls43.ToggleControl, { options: options10 }))));
3101
3151
  };
3102
3152
 
3103
3153
  // src/components/style-sections/typography-section/text-stroke-field.tsx
3104
- var React64 = __toESM(require("react"));
3105
- var import_editor_controls42 = require("@elementor/editor-controls");
3106
- var import_i18n41 = require("@wordpress/i18n");
3154
+ var React66 = __toESM(require("react"));
3155
+ var import_editor_controls44 = require("@elementor/editor-controls");
3156
+ var import_i18n43 = require("@wordpress/i18n");
3107
3157
  var initTextStroke = {
3108
3158
  $$type: "stroke",
3109
3159
  value: {
@@ -3129,64 +3179,64 @@ var TextStrokeField = () => {
3129
3179
  setTextStroke(null);
3130
3180
  };
3131
3181
  const hasTextStroke = Boolean(textStroke);
3132
- return /* @__PURE__ */ React64.createElement(StylesField, { bind: "stroke" }, /* @__PURE__ */ React64.createElement(
3182
+ return /* @__PURE__ */ React66.createElement(StylesField, { bind: "stroke" }, /* @__PURE__ */ React66.createElement(
3133
3183
  AddOrRemoveContent,
3134
3184
  {
3135
- label: (0, import_i18n41.__)("Text stroke", "elementor"),
3185
+ label: (0, import_i18n43.__)("Text stroke", "elementor"),
3136
3186
  isAdded: hasTextStroke,
3137
3187
  onAdd: addTextStroke,
3138
3188
  onRemove: removeTextStroke
3139
3189
  },
3140
- /* @__PURE__ */ React64.createElement(import_editor_controls42.StrokeControl, null)
3190
+ /* @__PURE__ */ React66.createElement(import_editor_controls44.StrokeControl, null)
3141
3191
  ));
3142
3192
  };
3143
3193
 
3144
3194
  // src/components/style-sections/typography-section/transform-field.tsx
3145
- var React65 = __toESM(require("react"));
3146
- var import_editor_controls43 = require("@elementor/editor-controls");
3195
+ var React67 = __toESM(require("react"));
3196
+ var import_editor_controls45 = require("@elementor/editor-controls");
3147
3197
  var import_icons22 = require("@elementor/icons");
3148
- var import_ui54 = require("@elementor/ui");
3149
- var import_i18n42 = require("@wordpress/i18n");
3198
+ var import_ui56 = require("@elementor/ui");
3199
+ var import_i18n44 = require("@wordpress/i18n");
3150
3200
  var options11 = [
3151
3201
  {
3152
3202
  value: "none",
3153
- label: (0, import_i18n42.__)("None", "elementor"),
3154
- renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(import_icons22.MinusIcon, { fontSize: size }),
3203
+ label: (0, import_i18n44.__)("None", "elementor"),
3204
+ renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(import_icons22.MinusIcon, { fontSize: size }),
3155
3205
  showTooltip: true
3156
3206
  },
3157
3207
  {
3158
3208
  value: "capitalize",
3159
- label: (0, import_i18n42.__)("Capitalize", "elementor"),
3160
- renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(import_icons22.LetterCaseIcon, { fontSize: size }),
3209
+ label: (0, import_i18n44.__)("Capitalize", "elementor"),
3210
+ renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(import_icons22.LetterCaseIcon, { fontSize: size }),
3161
3211
  showTooltip: true
3162
3212
  },
3163
3213
  {
3164
3214
  value: "uppercase",
3165
- label: (0, import_i18n42.__)("Uppercase", "elementor"),
3166
- renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(import_icons22.LetterCaseUpperIcon, { fontSize: size }),
3215
+ label: (0, import_i18n44.__)("Uppercase", "elementor"),
3216
+ renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(import_icons22.LetterCaseUpperIcon, { fontSize: size }),
3167
3217
  showTooltip: true
3168
3218
  },
3169
3219
  {
3170
3220
  value: "lowercase",
3171
- label: (0, import_i18n42.__)("Lowercase", "elementor"),
3172
- renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(import_icons22.LetterCaseLowerIcon, { fontSize: size }),
3221
+ label: (0, import_i18n44.__)("Lowercase", "elementor"),
3222
+ renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(import_icons22.LetterCaseLowerIcon, { fontSize: size }),
3173
3223
  showTooltip: true
3174
3224
  }
3175
3225
  ];
3176
- var TransformField = () => /* @__PURE__ */ React65.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React65.createElement(import_ui54.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React65.createElement(import_ui54.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(ControlLabel, null, (0, import_i18n42.__)("Text transform", "elementor"))), /* @__PURE__ */ React65.createElement(import_ui54.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React65.createElement(import_editor_controls43.ToggleControl, { options: options11 }))));
3226
+ var TransformField = () => /* @__PURE__ */ React67.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React67.createElement(import_ui56.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React67.createElement(import_ui56.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React67.createElement(ControlLabel, null, (0, import_i18n44.__)("Text transform", "elementor"))), /* @__PURE__ */ React67.createElement(import_ui56.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React67.createElement(import_editor_controls45.ToggleControl, { options: options11 }))));
3177
3227
 
3178
3228
  // src/components/style-sections/typography-section/word-spacing-field.tsx
3179
- var React66 = __toESM(require("react"));
3180
- var import_editor_controls44 = require("@elementor/editor-controls");
3181
- var import_ui55 = require("@elementor/ui");
3182
- var import_i18n43 = require("@wordpress/i18n");
3229
+ var React68 = __toESM(require("react"));
3230
+ var import_editor_controls46 = require("@elementor/editor-controls");
3231
+ var import_ui57 = require("@elementor/ui");
3232
+ var import_i18n45 = require("@wordpress/i18n");
3183
3233
  var WordSpacingField = () => {
3184
- return /* @__PURE__ */ React66.createElement(StylesField, { bind: "word-spacing" }, /* @__PURE__ */ React66.createElement(import_ui55.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React66.createElement(import_ui55.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(ControlLabel, null, (0, import_i18n43.__)("Word spacing", "elementor"))), /* @__PURE__ */ React66.createElement(import_ui55.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(import_editor_controls44.SizeControl, null))));
3234
+ return /* @__PURE__ */ React68.createElement(StylesField, { bind: "word-spacing" }, /* @__PURE__ */ React68.createElement(import_ui57.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React68.createElement(import_ui57.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React68.createElement(ControlLabel, null, (0, import_i18n45.__)("Word spacing", "elementor"))), /* @__PURE__ */ React68.createElement(import_ui57.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React68.createElement(import_editor_controls46.SizeControl, null))));
3185
3235
  };
3186
3236
 
3187
3237
  // src/components/style-sections/typography-section/typography-section.tsx
3188
3238
  var TypographySection = () => {
3189
- return /* @__PURE__ */ React67.createElement(SectionContent, null, /* @__PURE__ */ React67.createElement(FontFamilyField, null), /* @__PURE__ */ React67.createElement(FontWeightField, null), /* @__PURE__ */ React67.createElement(FontSizeField, null), /* @__PURE__ */ React67.createElement(PanelDivider, null), /* @__PURE__ */ React67.createElement(TextAlignmentField, null), /* @__PURE__ */ React67.createElement(TextColorField, null), /* @__PURE__ */ React67.createElement(CollapsibleContent, null, /* @__PURE__ */ React67.createElement(SectionContent, { sx: { pt: 2 } }, /* @__PURE__ */ React67.createElement(LineHeightField, null), /* @__PURE__ */ React67.createElement(LetterSpacingField, null), /* @__PURE__ */ React67.createElement(WordSpacingField, null), /* @__PURE__ */ React67.createElement(PanelDivider, null), /* @__PURE__ */ React67.createElement(TextDecorationField, null), /* @__PURE__ */ React67.createElement(TransformField, null), /* @__PURE__ */ React67.createElement(TextDirectionField, null), /* @__PURE__ */ React67.createElement(FontStyleField, null), /* @__PURE__ */ React67.createElement(TextStrokeField, null))));
3239
+ return /* @__PURE__ */ React69.createElement(SectionContent, null, /* @__PURE__ */ React69.createElement(FontFamilyField, null), /* @__PURE__ */ React69.createElement(FontWeightField, null), /* @__PURE__ */ React69.createElement(FontSizeField, null), /* @__PURE__ */ React69.createElement(PanelDivider, null), /* @__PURE__ */ React69.createElement(TextAlignmentField, null), /* @__PURE__ */ React69.createElement(TextColorField, null), /* @__PURE__ */ React69.createElement(CollapsibleContent, null, /* @__PURE__ */ React69.createElement(SectionContent, { sx: { pt: 2 } }, /* @__PURE__ */ React69.createElement(LineHeightField, null), /* @__PURE__ */ React69.createElement(LetterSpacingField, null), /* @__PURE__ */ React69.createElement(WordSpacingField, null), /* @__PURE__ */ React69.createElement(PanelDivider, null), /* @__PURE__ */ React69.createElement(TextDecorationField, null), /* @__PURE__ */ React69.createElement(TransformField, null), /* @__PURE__ */ React69.createElement(TextDirectionField, null), /* @__PURE__ */ React69.createElement(FontStyleField, null), /* @__PURE__ */ React69.createElement(TextStrokeField, null))));
3190
3240
  };
3191
3241
 
3192
3242
  // src/components/style-tab.tsx
@@ -3203,7 +3253,7 @@ var StyleTab = () => {
3203
3253
  const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp);
3204
3254
  const [activeStyleState, setActiveStyleState] = (0, import_react25.useState)(null);
3205
3255
  const breakpoint = (0, import_editor_responsive2.useActiveBreakpoint)();
3206
- return /* @__PURE__ */ React68.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React68.createElement(
3256
+ return /* @__PURE__ */ React70.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React70.createElement(
3207
3257
  StyleProvider,
3208
3258
  {
3209
3259
  meta: { breakpoint, state: activeStyleState },
@@ -3214,12 +3264,12 @@ var StyleTab = () => {
3214
3264
  },
3215
3265
  setMetaState: setActiveStyleState
3216
3266
  },
3217
- /* @__PURE__ */ React68.createElement(import_session4.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React68.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React68.createElement(ClassesHeader, null, /* @__PURE__ */ React68.createElement(CssClassSelector, null), /* @__PURE__ */ React68.createElement(import_ui56.Divider, null)), /* @__PURE__ */ React68.createElement(SectionsList, null, /* @__PURE__ */ React68.createElement(Section, { title: (0, import_i18n44.__)("Layout", "elementor") }, /* @__PURE__ */ React68.createElement(LayoutSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: (0, import_i18n44.__)("Spacing", "elementor") }, /* @__PURE__ */ React68.createElement(SpacingSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: (0, import_i18n44.__)("Size", "elementor") }, /* @__PURE__ */ React68.createElement(SizeSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: (0, import_i18n44.__)("Position", "elementor") }, /* @__PURE__ */ React68.createElement(PositionSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: (0, import_i18n44.__)("Typography", "elementor") }, /* @__PURE__ */ React68.createElement(TypographySection, null)), /* @__PURE__ */ React68.createElement(Section, { title: (0, import_i18n44.__)("Background", "elementor") }, /* @__PURE__ */ React68.createElement(BackgroundSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: (0, import_i18n44.__)("Border", "elementor") }, /* @__PURE__ */ React68.createElement(BorderSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: (0, import_i18n44.__)("Effects", "elementor") }, /* @__PURE__ */ React68.createElement(EffectsSection, null)))))
3267
+ /* @__PURE__ */ React70.createElement(import_session4.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React70.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React70.createElement(ClassesHeader, null, /* @__PURE__ */ React70.createElement(CssClassSelector, null), /* @__PURE__ */ React70.createElement(import_ui58.Divider, null)), /* @__PURE__ */ React70.createElement(SectionsList, null, /* @__PURE__ */ React70.createElement(Section, { title: (0, import_i18n46.__)("Layout", "elementor") }, /* @__PURE__ */ React70.createElement(LayoutSection, null)), /* @__PURE__ */ React70.createElement(Section, { title: (0, import_i18n46.__)("Spacing", "elementor") }, /* @__PURE__ */ React70.createElement(SpacingSection, null)), /* @__PURE__ */ React70.createElement(Section, { title: (0, import_i18n46.__)("Size", "elementor") }, /* @__PURE__ */ React70.createElement(SizeSection, null)), /* @__PURE__ */ React70.createElement(Section, { title: (0, import_i18n46.__)("Position", "elementor") }, /* @__PURE__ */ React70.createElement(PositionSection, null)), /* @__PURE__ */ React70.createElement(Section, { title: (0, import_i18n46.__)("Typography", "elementor") }, /* @__PURE__ */ React70.createElement(TypographySection, null)), /* @__PURE__ */ React70.createElement(Section, { title: (0, import_i18n46.__)("Background", "elementor") }, /* @__PURE__ */ React70.createElement(BackgroundSection, null)), /* @__PURE__ */ React70.createElement(Section, { title: (0, import_i18n46.__)("Border", "elementor") }, /* @__PURE__ */ React70.createElement(BorderSection, null)), /* @__PURE__ */ React70.createElement(Section, { title: (0, import_i18n46.__)("Effects", "elementor") }, /* @__PURE__ */ React70.createElement(EffectsSection, null)))))
3218
3268
  ));
3219
3269
  };
3220
3270
  function ClassesHeader({ children }) {
3221
3271
  const scrollDirection = useScrollDirection();
3222
- return /* @__PURE__ */ React68.createElement(import_ui56.Stack, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
3272
+ return /* @__PURE__ */ React70.createElement(import_ui58.Stack, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
3223
3273
  }
3224
3274
  function useCurrentClassesProp() {
3225
3275
  const { elementType } = useElement();
@@ -3238,15 +3288,15 @@ var EditingPanelTabs = () => {
3238
3288
  return (
3239
3289
  // When switching between elements, the local states should be reset. We are using key to rerender the tabs.
3240
3290
  // Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
3241
- /* @__PURE__ */ React69.createElement(import_react26.Fragment, { key: element.id }, /* @__PURE__ */ React69.createElement(PanelTabContent, null))
3291
+ /* @__PURE__ */ React71.createElement(import_react26.Fragment, { key: element.id }, /* @__PURE__ */ React71.createElement(PanelTabContent, null))
3242
3292
  );
3243
3293
  };
3244
3294
  var PanelTabContent = () => {
3245
3295
  const defaultComponentTab = "settings";
3246
3296
  const [currentTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
3247
- const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui57.useTabs)(currentTab);
3248
- return /* @__PURE__ */ React69.createElement(ScrollProvider, null, /* @__PURE__ */ React69.createElement(import_ui57.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React69.createElement(import_ui57.Stack, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React69.createElement(
3249
- import_ui57.Tabs,
3297
+ const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui59.useTabs)(currentTab);
3298
+ return /* @__PURE__ */ React71.createElement(ScrollProvider, null, /* @__PURE__ */ React71.createElement(import_ui59.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React71.createElement(import_ui59.Stack, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React71.createElement(
3299
+ import_ui59.Tabs,
3250
3300
  {
3251
3301
  variant: "fullWidth",
3252
3302
  size: "small",
@@ -3257,9 +3307,9 @@ var PanelTabContent = () => {
3257
3307
  setCurrentTab(newValue);
3258
3308
  }
3259
3309
  },
3260
- /* @__PURE__ */ React69.createElement(import_ui57.Tab, { label: (0, import_i18n45.__)("General", "elementor"), ...getTabProps("settings") }),
3261
- /* @__PURE__ */ React69.createElement(import_ui57.Tab, { label: (0, import_i18n45.__)("Style", "elementor"), ...getTabProps("style") })
3262
- ), /* @__PURE__ */ React69.createElement(import_ui57.Divider, null)), /* @__PURE__ */ React69.createElement(import_ui57.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React69.createElement(SettingsTab, null)), /* @__PURE__ */ React69.createElement(import_ui57.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React69.createElement(StyleTab, null))));
3310
+ /* @__PURE__ */ React71.createElement(import_ui59.Tab, { label: (0, import_i18n47.__)("General", "elementor"), ...getTabProps("settings") }),
3311
+ /* @__PURE__ */ React71.createElement(import_ui59.Tab, { label: (0, import_i18n47.__)("Style", "elementor"), ...getTabProps("style") })
3312
+ ), /* @__PURE__ */ React71.createElement(import_ui59.Divider, null)), /* @__PURE__ */ React71.createElement(import_ui59.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React71.createElement(SettingsTab, null)), /* @__PURE__ */ React71.createElement(import_ui59.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React71.createElement(StyleTab, null))));
3263
3313
  };
3264
3314
 
3265
3315
  // src/components/editing-panel.tsx
@@ -3271,8 +3321,8 @@ var EditingPanel = () => {
3271
3321
  if (!element || !elementType) {
3272
3322
  return null;
3273
3323
  }
3274
- const panelTitle = (0, import_i18n46.__)("Edit %s", "elementor").replace("%s", elementType.title);
3275
- return /* @__PURE__ */ React70.createElement(import_ui58.ErrorBoundary, { fallback: /* @__PURE__ */ React70.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React70.createElement(import_session5.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React70.createElement(import_editor_ui4.ThemeProvider, null, /* @__PURE__ */ React70.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React70.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React70.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React70.createElement(import_icons23.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React70.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React70.createElement(import_editor_controls45.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React70.createElement(import_editor_controls45.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React70.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React70.createElement(EditingPanelTabs, null)))))))));
3324
+ const panelTitle = (0, import_i18n48.__)("Edit %s", "elementor").replace("%s", elementType.title);
3325
+ return /* @__PURE__ */ React72.createElement(import_ui60.ErrorBoundary, { fallback: /* @__PURE__ */ React72.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React72.createElement(import_session5.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React72.createElement(import_editor_ui4.ThemeProvider, null, /* @__PURE__ */ React72.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React72.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React72.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React72.createElement(import_icons23.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React72.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React72.createElement(import_editor_controls47.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React72.createElement(import_editor_controls47.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React72.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React72.createElement(EditingPanelTabs, null)))))))));
3276
3326
  };
3277
3327
 
3278
3328
  // src/panel.ts
@@ -3285,11 +3335,11 @@ var { panel, usePanelActions, usePanelStatus } = (0, import_editor_panels2.__cre
3285
3335
  var import_editor = require("@elementor/editor");
3286
3336
  var import_editor_current_user = require("@elementor/editor-current-user");
3287
3337
  var import_editor_panels3 = require("@elementor/editor-panels");
3288
- var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
3338
+ var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
3289
3339
 
3290
3340
  // src/hooks/use-open-editor-panel.ts
3291
3341
  var import_react27 = require("react");
3292
- var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
3342
+ var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
3293
3343
 
3294
3344
  // src/sync/is-atomic-widget-selected.ts
3295
3345
  var import_editor_elements9 = require("@elementor/editor-elements");
@@ -3306,7 +3356,7 @@ var isAtomicWidgetSelected = () => {
3306
3356
  var useOpenEditorPanel = () => {
3307
3357
  const { open } = usePanelActions();
3308
3358
  (0, import_react27.useEffect)(() => {
3309
- return (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.commandStartEvent)("panel/editor/open"), () => {
3359
+ return (0, import_editor_v1_adapters8.__privateListenTo)((0, import_editor_v1_adapters8.commandStartEvent)("panel/editor/open"), () => {
3310
3360
  if (isAtomicWidgetSelected()) {
3311
3361
  open();
3312
3362
  }
@@ -3324,16 +3374,16 @@ var EditingPanelHooks = () => {
3324
3374
  var import_editor_canvas3 = require("@elementor/editor-canvas");
3325
3375
 
3326
3376
  // src/dynamics/components/dynamic-selection-control.tsx
3327
- var React74 = __toESM(require("react"));
3328
- var import_editor_controls49 = require("@elementor/editor-controls");
3377
+ var React76 = __toESM(require("react"));
3378
+ var import_editor_controls51 = require("@elementor/editor-controls");
3329
3379
  var import_icons25 = require("@elementor/icons");
3330
- var import_ui61 = require("@elementor/ui");
3331
- var import_i18n48 = require("@wordpress/i18n");
3380
+ var import_ui63 = require("@elementor/ui");
3381
+ var import_i18n50 = require("@wordpress/i18n");
3332
3382
 
3333
3383
  // src/components/popover-content.tsx
3334
- var React71 = __toESM(require("react"));
3335
- var import_ui59 = require("@elementor/ui");
3336
- var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */ React71.createElement(import_ui59.Stack, { alignItems, gap, p }, children);
3384
+ var React73 = __toESM(require("react"));
3385
+ var import_ui61 = require("@elementor/ui");
3386
+ var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */ React73.createElement(import_ui61.Stack, { alignItems, gap, p }, children);
3337
3387
 
3338
3388
  // src/hooks/use-persist-dynamic-value.ts
3339
3389
  var import_session6 = require("@elementor/session");
@@ -3344,15 +3394,15 @@ var usePersistDynamicValue = (propKey) => {
3344
3394
  };
3345
3395
 
3346
3396
  // src/dynamics/dynamic-control.tsx
3347
- var React72 = __toESM(require("react"));
3348
- var import_editor_controls47 = require("@elementor/editor-controls");
3397
+ var React74 = __toESM(require("react"));
3398
+ var import_editor_controls49 = require("@elementor/editor-controls");
3349
3399
 
3350
3400
  // src/dynamics/hooks/use-dynamic-tag.ts
3351
3401
  var import_react29 = require("react");
3352
3402
 
3353
3403
  // src/dynamics/hooks/use-prop-dynamic-tags.ts
3354
3404
  var import_react28 = require("react");
3355
- var import_editor_controls46 = require("@elementor/editor-controls");
3405
+ var import_editor_controls48 = require("@elementor/editor-controls");
3356
3406
 
3357
3407
  // src/dynamics/sync/get-elementor-config.ts
3358
3408
  var getElementorConfig2 = () => {
@@ -3398,7 +3448,7 @@ var dynamicPropTypeUtil = (0, import_editor_props8.createPropUtils)(
3398
3448
  // src/dynamics/hooks/use-prop-dynamic-tags.ts
3399
3449
  var usePropDynamicTags = () => {
3400
3450
  let categories = [];
3401
- const { propType } = (0, import_editor_controls46.useBoundProp)();
3451
+ const { propType } = (0, import_editor_controls48.useBoundProp)();
3402
3452
  if (propType) {
3403
3453
  const propDynamicType = getDynamicPropType(propType);
3404
3454
  categories = propDynamicType?.settings.categories || [];
@@ -3424,7 +3474,7 @@ var useDynamicTag = (tagName) => {
3424
3474
 
3425
3475
  // src/dynamics/dynamic-control.tsx
3426
3476
  var DynamicControl = ({ bind, children }) => {
3427
- const { value, setValue } = (0, import_editor_controls47.useBoundProp)(dynamicPropTypeUtil);
3477
+ const { value, setValue } = (0, import_editor_controls49.useBoundProp)(dynamicPropTypeUtil);
3428
3478
  const { name = "", settings } = value ?? {};
3429
3479
  const dynamicTag = useDynamicTag(name);
3430
3480
  if (!dynamicTag) {
@@ -3443,22 +3493,22 @@ var DynamicControl = ({ bind, children }) => {
3443
3493
  });
3444
3494
  };
3445
3495
  const propType = createTopLevelOjectType({ schema: dynamicTag.props_schema });
3446
- return /* @__PURE__ */ React72.createElement(import_editor_controls47.PropProvider, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React72.createElement(import_editor_controls47.PropKeyProvider, { bind }, children));
3496
+ return /* @__PURE__ */ React74.createElement(import_editor_controls49.PropProvider, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React74.createElement(import_editor_controls49.PropKeyProvider, { bind }, children));
3447
3497
  };
3448
3498
 
3449
3499
  // src/dynamics/components/dynamic-selection.tsx
3450
- var React73 = __toESM(require("react"));
3500
+ var React75 = __toESM(require("react"));
3451
3501
  var import_react30 = require("react");
3452
- var import_editor_controls48 = require("@elementor/editor-controls");
3502
+ var import_editor_controls50 = require("@elementor/editor-controls");
3453
3503
  var import_icons24 = require("@elementor/icons");
3454
- var import_ui60 = require("@elementor/ui");
3455
- var import_i18n47 = require("@wordpress/i18n");
3504
+ var import_ui62 = require("@elementor/ui");
3505
+ var import_i18n49 = require("@wordpress/i18n");
3456
3506
  var SIZE3 = "tiny";
3457
3507
  var DynamicSelection = ({ onSelect }) => {
3458
3508
  const [searchValue, setSearchValue] = (0, import_react30.useState)("");
3459
3509
  const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
3460
- const { value: anyValue } = (0, import_editor_controls48.useBoundProp)();
3461
- const { bind, value: dynamicValue, setValue } = (0, import_editor_controls48.useBoundProp)(dynamicPropTypeUtil);
3510
+ const { value: anyValue } = (0, import_editor_controls50.useBoundProp)();
3511
+ const { bind, value: dynamicValue, setValue } = (0, import_editor_controls50.useBoundProp)(dynamicPropTypeUtil);
3462
3512
  const [, updatePropValueHistory] = usePersistDynamicValue(bind);
3463
3513
  const isCurrentValueDynamic = !!dynamicValue;
3464
3514
  const options12 = useFilteredOptions(searchValue);
@@ -3473,28 +3523,28 @@ var DynamicSelection = ({ onSelect }) => {
3473
3523
  setValue({ name: value, settings: { label } });
3474
3524
  onSelect?.();
3475
3525
  };
3476
- return /* @__PURE__ */ React73.createElement(import_ui60.Stack, null, hasNoDynamicTags ? /* @__PURE__ */ React73.createElement(NoDynamicTags, null) : /* @__PURE__ */ React73.createElement(import_react30.Fragment, null, /* @__PURE__ */ React73.createElement(import_ui60.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React73.createElement(
3477
- import_ui60.TextField,
3526
+ return /* @__PURE__ */ React75.createElement(import_ui62.Stack, null, hasNoDynamicTags ? /* @__PURE__ */ React75.createElement(NoDynamicTags, null) : /* @__PURE__ */ React75.createElement(import_react30.Fragment, null, /* @__PURE__ */ React75.createElement(import_ui62.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React75.createElement(
3527
+ import_ui62.TextField,
3478
3528
  {
3479
3529
  fullWidth: true,
3480
3530
  size: SIZE3,
3481
3531
  value: searchValue,
3482
3532
  onChange: handleSearch,
3483
- placeholder: (0, import_i18n47.__)("Search dynamic tags\u2026", "elementor"),
3533
+ placeholder: (0, import_i18n49.__)("Search dynamic tags\u2026", "elementor"),
3484
3534
  InputProps: {
3485
- startAdornment: /* @__PURE__ */ React73.createElement(import_ui60.InputAdornment, { position: "start" }, /* @__PURE__ */ React73.createElement(import_icons24.SearchIcon, { fontSize: SIZE3 }))
3535
+ startAdornment: /* @__PURE__ */ React75.createElement(import_ui62.InputAdornment, { position: "start" }, /* @__PURE__ */ React75.createElement(import_icons24.SearchIcon, { fontSize: SIZE3 }))
3486
3536
  }
3487
3537
  }
3488
- )), /* @__PURE__ */ React73.createElement(import_ui60.Divider, null), /* @__PURE__ */ React73.createElement(import_ui60.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, options12.length > 0 ? /* @__PURE__ */ React73.createElement(import_ui60.MenuList, { role: "listbox", tabIndex: 0 }, options12.map(([category, items3], index) => /* @__PURE__ */ React73.createElement(import_react30.Fragment, { key: index }, /* @__PURE__ */ React73.createElement(
3489
- import_ui60.MenuSubheader,
3538
+ )), /* @__PURE__ */ React75.createElement(import_ui62.Divider, null), /* @__PURE__ */ React75.createElement(import_ui62.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, options12.length > 0 ? /* @__PURE__ */ React75.createElement(import_ui62.MenuList, { role: "listbox", tabIndex: 0 }, options12.map(([category, items3], index) => /* @__PURE__ */ React75.createElement(import_react30.Fragment, { key: index }, /* @__PURE__ */ React75.createElement(
3539
+ import_ui62.MenuSubheader,
3490
3540
  {
3491
3541
  sx: { px: 1.5, typography: "caption", color: "text.tertiary" }
3492
3542
  },
3493
3543
  dynamicGroups?.[category]?.title || category
3494
3544
  ), items3.map(({ value, label: tagLabel }) => {
3495
3545
  const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
3496
- return /* @__PURE__ */ React73.createElement(
3497
- import_ui60.MenuItem,
3546
+ return /* @__PURE__ */ React75.createElement(
3547
+ import_ui62.MenuItem,
3498
3548
  {
3499
3549
  key: value,
3500
3550
  selected: isSelected,
@@ -3504,10 +3554,10 @@ var DynamicSelection = ({ onSelect }) => {
3504
3554
  },
3505
3555
  tagLabel
3506
3556
  );
3507
- })))) : /* @__PURE__ */ React73.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") }))));
3557
+ })))) : /* @__PURE__ */ React75.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") }))));
3508
3558
  };
3509
- var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React73.createElement(
3510
- import_ui60.Stack,
3559
+ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React75.createElement(
3560
+ import_ui62.Stack,
3511
3561
  {
3512
3562
  gap: 1,
3513
3563
  alignItems: "center",
@@ -3517,12 +3567,12 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React73.createElem
3517
3567
  color: "text.secondary",
3518
3568
  sx: { pb: 3.5 }
3519
3569
  },
3520
- /* @__PURE__ */ React73.createElement(import_icons24.DatabaseIcon, { fontSize: "large" }),
3521
- /* @__PURE__ */ React73.createElement(import_ui60.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n47.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React73.createElement("br", null), "\u201C", searchValue, "\u201D."),
3522
- /* @__PURE__ */ React73.createElement(import_ui60.Typography, { align: "center", variant: "caption" }, (0, import_i18n47.__)("Try something else.", "elementor"), "\xA0", /* @__PURE__ */ React73.createElement(import_ui60.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n47.__)("Clear & try again", "elementor")))
3570
+ /* @__PURE__ */ React75.createElement(import_icons24.DatabaseIcon, { fontSize: "large" }),
3571
+ /* @__PURE__ */ React75.createElement(import_ui62.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n49.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React75.createElement("br", null), "\u201C", searchValue, "\u201D."),
3572
+ /* @__PURE__ */ React75.createElement(import_ui62.Typography, { align: "center", variant: "caption" }, (0, import_i18n49.__)("Try something else.", "elementor"), "\xA0", /* @__PURE__ */ React75.createElement(import_ui62.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n49.__)("Clear & try again", "elementor")))
3523
3573
  );
3524
- var NoDynamicTags = () => /* @__PURE__ */ React73.createElement(import_ui60.Box, { sx: { overflowY: "hidden", height: 297, width: 220 } }, /* @__PURE__ */ React73.createElement(import_ui60.Divider, null), /* @__PURE__ */ React73.createElement(
3525
- import_ui60.Stack,
3574
+ var NoDynamicTags = () => /* @__PURE__ */ React75.createElement(import_ui62.Box, { sx: { overflowY: "hidden", height: 297, width: 220 } }, /* @__PURE__ */ React75.createElement(import_ui62.Divider, null), /* @__PURE__ */ React75.createElement(
3575
+ import_ui62.Stack,
3526
3576
  {
3527
3577
  gap: 1,
3528
3578
  alignItems: "center",
@@ -3532,9 +3582,9 @@ var NoDynamicTags = () => /* @__PURE__ */ React73.createElement(import_ui60.Box,
3532
3582
  color: "text.secondary",
3533
3583
  sx: { pb: 3.5 }
3534
3584
  },
3535
- /* @__PURE__ */ React73.createElement(import_icons24.DatabaseIcon, { fontSize: "large" }),
3536
- /* @__PURE__ */ React73.createElement(import_ui60.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n47.__)("Streamline your workflow with dynamic tags", "elementor")),
3537
- /* @__PURE__ */ React73.createElement(import_ui60.Typography, { align: "center", variant: "caption" }, (0, import_i18n47.__)("You\u2019ll need Elementor Pro to use this feature.", "elementor"))
3585
+ /* @__PURE__ */ React75.createElement(import_icons24.DatabaseIcon, { fontSize: "large" }),
3586
+ /* @__PURE__ */ React75.createElement(import_ui62.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n49.__)("Streamline your workflow with dynamic tags", "elementor")),
3587
+ /* @__PURE__ */ React75.createElement(import_ui62.Typography, { align: "center", variant: "caption" }, (0, import_i18n49.__)("You\u2019ll need Elementor Pro to use this feature.", "elementor"))
3538
3588
  ));
3539
3589
  var useFilteredOptions = (searchValue) => {
3540
3590
  const dynamicTags = usePropDynamicTags();
@@ -3555,10 +3605,10 @@ var useFilteredOptions = (searchValue) => {
3555
3605
  // src/dynamics/components/dynamic-selection-control.tsx
3556
3606
  var SIZE4 = "tiny";
3557
3607
  var DynamicSelectionControl = () => {
3558
- const { setValue: setAnyValue } = (0, import_editor_controls49.useBoundProp)();
3559
- const { bind, value } = (0, import_editor_controls49.useBoundProp)(dynamicPropTypeUtil);
3608
+ const { setValue: setAnyValue } = (0, import_editor_controls51.useBoundProp)();
3609
+ const { bind, value } = (0, import_editor_controls51.useBoundProp)(dynamicPropTypeUtil);
3560
3610
  const [propValueFromHistory] = usePersistDynamicValue(bind);
3561
- const selectionPopoverState = (0, import_ui61.usePopupState)({ variant: "popover" });
3611
+ const selectionPopoverState = (0, import_ui63.usePopupState)({ variant: "popover" });
3562
3612
  const { name: tagName = "" } = value;
3563
3613
  const dynamicTag = useDynamicTag(tagName);
3564
3614
  const removeDynamicTag = () => {
@@ -3567,62 +3617,62 @@ var DynamicSelectionControl = () => {
3567
3617
  if (!dynamicTag) {
3568
3618
  throw new Error(`Dynamic tag ${tagName} not found`);
3569
3619
  }
3570
- return /* @__PURE__ */ React74.createElement(import_ui61.Box, null, /* @__PURE__ */ React74.createElement(
3571
- import_ui61.UnstableTag,
3620
+ return /* @__PURE__ */ React76.createElement(import_ui63.Box, null, /* @__PURE__ */ React76.createElement(
3621
+ import_ui63.UnstableTag,
3572
3622
  {
3573
3623
  fullWidth: true,
3574
3624
  showActionsOnHover: true,
3575
3625
  label: dynamicTag.label,
3576
- startIcon: /* @__PURE__ */ React74.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE4 }),
3577
- ...(0, import_ui61.bindTrigger)(selectionPopoverState),
3578
- actions: /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React74.createElement(
3579
- import_ui61.IconButton,
3626
+ startIcon: /* @__PURE__ */ React76.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE4 }),
3627
+ ...(0, import_ui63.bindTrigger)(selectionPopoverState),
3628
+ actions: /* @__PURE__ */ React76.createElement(React76.Fragment, null, /* @__PURE__ */ React76.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React76.createElement(
3629
+ import_ui63.IconButton,
3580
3630
  {
3581
3631
  size: SIZE4,
3582
3632
  onClick: removeDynamicTag,
3583
- "aria-label": (0, import_i18n48.__)("Remove dynamic value", "elementor")
3633
+ "aria-label": (0, import_i18n50.__)("Remove dynamic value", "elementor")
3584
3634
  },
3585
- /* @__PURE__ */ React74.createElement(import_icons25.XIcon, { fontSize: SIZE4 })
3635
+ /* @__PURE__ */ React76.createElement(import_icons25.XIcon, { fontSize: SIZE4 })
3586
3636
  ))
3587
3637
  }
3588
- ), /* @__PURE__ */ React74.createElement(
3589
- import_ui61.Popover,
3638
+ ), /* @__PURE__ */ React76.createElement(
3639
+ import_ui63.Popover,
3590
3640
  {
3591
3641
  disablePortal: true,
3592
3642
  disableScrollLock: true,
3593
3643
  anchorOrigin: { vertical: "bottom", horizontal: "left" },
3594
- ...(0, import_ui61.bindPopover)(selectionPopoverState)
3644
+ ...(0, import_ui63.bindPopover)(selectionPopoverState)
3595
3645
  },
3596
- /* @__PURE__ */ React74.createElement(import_ui61.Stack, null, /* @__PURE__ */ React74.createElement(import_ui61.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React74.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React74.createElement(import_ui61.Typography, { variant: "subtitle2" }, (0, import_i18n48.__)("Dynamic tags", "elementor")), /* @__PURE__ */ React74.createElement(import_ui61.IconButton, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React74.createElement(import_icons25.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React74.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
3646
+ /* @__PURE__ */ React76.createElement(import_ui63.Stack, null, /* @__PURE__ */ React76.createElement(import_ui63.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React76.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React76.createElement(import_ui63.Typography, { variant: "subtitle2" }, (0, import_i18n50.__)("Dynamic tags", "elementor")), /* @__PURE__ */ React76.createElement(import_ui63.IconButton, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React76.createElement(import_icons25.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React76.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
3597
3647
  ));
3598
3648
  };
3599
3649
  var DynamicSettingsPopover = ({ dynamicTag }) => {
3600
- const popupState = (0, import_ui61.usePopupState)({ variant: "popover" });
3650
+ const popupState = (0, import_ui63.usePopupState)({ variant: "popover" });
3601
3651
  const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
3602
3652
  if (!hasDynamicSettings) {
3603
3653
  return null;
3604
3654
  }
3605
- return /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(import_ui61.IconButton, { size: SIZE4, ...(0, import_ui61.bindTrigger)(popupState), "aria-label": (0, import_i18n48.__)("Settings", "elementor") }, /* @__PURE__ */ React74.createElement(import_icons25.SettingsIcon, { fontSize: SIZE4 })), /* @__PURE__ */ React74.createElement(
3606
- import_ui61.Popover,
3655
+ return /* @__PURE__ */ React76.createElement(React76.Fragment, null, /* @__PURE__ */ React76.createElement(import_ui63.IconButton, { size: SIZE4, ...(0, import_ui63.bindTrigger)(popupState), "aria-label": (0, import_i18n50.__)("Settings", "elementor") }, /* @__PURE__ */ React76.createElement(import_icons25.SettingsIcon, { fontSize: SIZE4 })), /* @__PURE__ */ React76.createElement(
3656
+ import_ui63.Popover,
3607
3657
  {
3608
3658
  disablePortal: true,
3609
3659
  disableScrollLock: true,
3610
3660
  anchorOrigin: { vertical: "bottom", horizontal: "center" },
3611
- ...(0, import_ui61.bindPopover)(popupState)
3661
+ ...(0, import_ui63.bindPopover)(popupState)
3612
3662
  },
3613
- /* @__PURE__ */ React74.createElement(import_ui61.Paper, { component: import_ui61.Stack, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React74.createElement(import_ui61.Stack, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React74.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React74.createElement(import_ui61.Typography, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React74.createElement(import_ui61.IconButton, { sx: { ml: "auto" }, size: SIZE4, onClick: popupState.close }, /* @__PURE__ */ React74.createElement(import_icons25.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React74.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
3663
+ /* @__PURE__ */ React76.createElement(import_ui63.Paper, { component: import_ui63.Stack, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React76.createElement(import_ui63.Stack, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React76.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React76.createElement(import_ui63.Typography, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React76.createElement(import_ui63.IconButton, { sx: { ml: "auto" }, size: SIZE4, onClick: popupState.close }, /* @__PURE__ */ React76.createElement(import_icons25.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React76.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
3614
3664
  ));
3615
3665
  };
3616
3666
  var DynamicSettings = ({ controls }) => {
3617
3667
  const tabs = controls.filter(({ type }) => type === "section");
3618
- const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui61.useTabs)(0);
3668
+ const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui63.useTabs)(0);
3619
3669
  if (!tabs.length) {
3620
3670
  return null;
3621
3671
  }
3622
- return /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(import_ui61.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React74.createElement(import_ui61.Tab, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React74.createElement(import_ui61.Divider, null), tabs.map(({ value }, index) => {
3623
- return /* @__PURE__ */ React74.createElement(import_ui61.TabPanel, { key: index, sx: { flexGrow: 1, py: 0 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React74.createElement(PopoverContent, { p: 2, gap: 2 }, value.items.map((item) => {
3672
+ return /* @__PURE__ */ React76.createElement(React76.Fragment, null, /* @__PURE__ */ React76.createElement(import_ui63.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React76.createElement(import_ui63.Tab, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React76.createElement(import_ui63.Divider, null), tabs.map(({ value }, index) => {
3673
+ return /* @__PURE__ */ React76.createElement(import_ui63.TabPanel, { key: index, sx: { flexGrow: 1, py: 0 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React76.createElement(PopoverContent, { p: 2, gap: 2 }, value.items.map((item) => {
3624
3674
  if (item.type === "control") {
3625
- return /* @__PURE__ */ React74.createElement(Control3, { key: item.value.bind, control: item.value });
3675
+ return /* @__PURE__ */ React76.createElement(Control3, { key: item.value.bind, control: item.value });
3626
3676
  }
3627
3677
  return null;
3628
3678
  })));
@@ -3632,7 +3682,7 @@ var Control3 = ({ control }) => {
3632
3682
  if (!getControl(control.type)) {
3633
3683
  return null;
3634
3684
  }
3635
- return /* @__PURE__ */ React74.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React74.createElement(import_ui61.Grid, { container: true, gap: 0.75 }, control.label ? /* @__PURE__ */ React74.createElement(import_ui61.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React74.createElement(import_editor_controls49.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React74.createElement(import_ui61.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React74.createElement(Control, { type: control.type, props: control.props }))));
3685
+ return /* @__PURE__ */ React76.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React76.createElement(import_ui63.Grid, { container: true, gap: 0.75 }, control.label ? /* @__PURE__ */ React76.createElement(import_ui63.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React76.createElement(import_editor_controls51.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React76.createElement(import_ui63.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React76.createElement(Control, { type: control.type, props: control.props }))));
3636
3686
  };
3637
3687
 
3638
3688
  // src/dynamics/dynamic-transformer.ts
@@ -3685,18 +3735,18 @@ function getDynamicValue(name, settings) {
3685
3735
  }
3686
3736
 
3687
3737
  // src/dynamics/hooks/use-prop-dynamic-action.tsx
3688
- var React75 = __toESM(require("react"));
3689
- var import_editor_controls50 = require("@elementor/editor-controls");
3738
+ var React77 = __toESM(require("react"));
3739
+ var import_editor_controls52 = require("@elementor/editor-controls");
3690
3740
  var import_icons26 = require("@elementor/icons");
3691
- var import_i18n49 = require("@wordpress/i18n");
3741
+ var import_i18n51 = require("@wordpress/i18n");
3692
3742
  var usePropDynamicAction = () => {
3693
- const { propType } = (0, import_editor_controls50.useBoundProp)();
3743
+ const { propType } = (0, import_editor_controls52.useBoundProp)();
3694
3744
  const visible = !!propType && supportsDynamic(propType);
3695
3745
  return {
3696
3746
  visible,
3697
3747
  icon: import_icons26.DatabaseIcon,
3698
- title: (0, import_i18n49.__)("Dynamic tags", "elementor"),
3699
- popoverContent: ({ closePopover }) => /* @__PURE__ */ React75.createElement(DynamicSelection, { onSelect: closePopover })
3748
+ title: (0, import_i18n51.__)("Dynamic tags", "elementor"),
3749
+ popoverContent: ({ closePopover }) => /* @__PURE__ */ React77.createElement(DynamicSelection, { onSelect: closePopover })
3700
3750
  };
3701
3751
  };
3702
3752
 
@@ -3730,7 +3780,7 @@ function init2() {
3730
3780
  init();
3731
3781
  }
3732
3782
  var blockV1Panel = () => {
3733
- (0, import_editor_v1_adapters7.blockCommand)({
3783
+ (0, import_editor_v1_adapters9.blockCommand)({
3734
3784
  command: "panel/editor/open",
3735
3785
  condition: isAtomicWidgetSelected
3736
3786
  });