@elementor/editor-editing-panel 1.47.0 → 1.48.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
@@ -1195,7 +1195,7 @@ var import_editor_ui5 = require("@elementor/editor-ui");
1195
1195
  var import_icons24 = require("@elementor/icons");
1196
1196
  var import_session5 = require("@elementor/session");
1197
1197
  var import_ui45 = require("@elementor/ui");
1198
- var import_i18n59 = require("@wordpress/i18n");
1198
+ var import_i18n62 = require("@wordpress/i18n");
1199
1199
 
1200
1200
  // src/controls-actions.ts
1201
1201
  var import_menus = require("@elementor/menus");
@@ -1272,7 +1272,7 @@ var React85 = __toESM(require("react"));
1272
1272
  var import_react38 = require("react");
1273
1273
  var import_editor_v1_adapters18 = require("@elementor/editor-v1-adapters");
1274
1274
  var import_ui44 = require("@elementor/ui");
1275
- var import_i18n58 = require("@wordpress/i18n");
1275
+ var import_i18n61 = require("@wordpress/i18n");
1276
1276
 
1277
1277
  // src/contexts/scroll-context.tsx
1278
1278
  var React12 = __toESM(require("react"));
@@ -1431,6 +1431,7 @@ var import_react15 = require("react");
1431
1431
  var import_editor_controls3 = require("@elementor/editor-controls");
1432
1432
  var import_editor_documents2 = require("@elementor/editor-documents");
1433
1433
  var import_editor_elements3 = require("@elementor/editor-elements");
1434
+ var import_editor_props3 = require("@elementor/editor-props");
1434
1435
  var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
1435
1436
  var import_i18n5 = require("@wordpress/i18n");
1436
1437
 
@@ -1450,8 +1451,8 @@ var createTopLevelOjectType = ({ schema }) => {
1450
1451
  // src/controls-registry/settings-field.tsx
1451
1452
  var SettingsField = ({ bind, children, propDisplayName }) => {
1452
1453
  const { element, elementType } = useElement();
1453
- const settingsValue = (0, import_editor_elements3.useElementSetting)(element.id, bind);
1454
- const value = { [bind]: settingsValue };
1454
+ const elementSettingValues = (0, import_editor_elements3.useElementSettings)(element.id, Object.keys(elementType.propsSchema));
1455
+ const value = { [bind]: elementSettingValues?.[bind] };
1455
1456
  const propType = createTopLevelOjectType({ schema: elementType.propsSchema });
1456
1457
  const undoableUpdateElementProp = useUndoableUpdateElementProp({
1457
1458
  propKey: bind,
@@ -1466,8 +1467,19 @@ var SettingsField = ({ bind, children, propDisplayName }) => {
1466
1467
  (0, import_editor_elements3.updateElementSettings)({ id: element.id, props: newValue });
1467
1468
  }
1468
1469
  };
1469
- return /* @__PURE__ */ React15.createElement(import_editor_controls3.PropProvider, { propType, value, setValue }, /* @__PURE__ */ React15.createElement(import_editor_controls3.PropKeyProvider, { bind }, children));
1470
+ const isDisabled = (prop) => getDisableState(prop, elementSettingValues);
1471
+ return /* @__PURE__ */ React15.createElement(import_editor_controls3.PropProvider, { propType, value, setValue, isDisabled }, /* @__PURE__ */ React15.createElement(import_editor_controls3.PropKeyProvider, { bind }, children));
1470
1472
  };
1473
+ function getDisableState(propType, elementValues) {
1474
+ const disablingDependencies = propType.dependencies?.filter(({ effect }) => effect === "disable") || [];
1475
+ if (!disablingDependencies.length) {
1476
+ return false;
1477
+ }
1478
+ if (disablingDependencies.length > 1) {
1479
+ throw new Error("Multiple disabling dependencies are not supported.");
1480
+ }
1481
+ return (0, import_editor_props3.shouldApplyEffect)(disablingDependencies[0], elementValues);
1482
+ }
1471
1483
  function useUndoableUpdateElementProp({
1472
1484
  propKey,
1473
1485
  elementId,
@@ -1660,17 +1672,17 @@ function populateChildControlProps(props) {
1660
1672
  // src/components/style-tab.tsx
1661
1673
  var React84 = __toESM(require("react"));
1662
1674
  var import_react37 = require("react");
1663
- var import_editor_props10 = require("@elementor/editor-props");
1675
+ var import_editor_props11 = require("@elementor/editor-props");
1664
1676
  var import_editor_responsive3 = require("@elementor/editor-responsive");
1665
1677
  var import_session4 = require("@elementor/session");
1666
1678
  var import_ui43 = require("@elementor/ui");
1667
- var import_i18n57 = require("@wordpress/i18n");
1679
+ var import_i18n60 = require("@wordpress/i18n");
1668
1680
 
1669
1681
  // src/contexts/styles-inheritance-context.tsx
1670
1682
  var React20 = __toESM(require("react"));
1671
1683
  var import_react20 = require("react");
1672
1684
  var import_editor_elements4 = require("@elementor/editor-elements");
1673
- var import_editor_props5 = require("@elementor/editor-props");
1685
+ var import_editor_props6 = require("@elementor/editor-props");
1674
1686
  var import_editor_responsive = require("@elementor/editor-responsive");
1675
1687
  var import_editor_styles = require("@elementor/editor-styles");
1676
1688
  var import_editor_styles_repository7 = require("@elementor/editor-styles-repository");
@@ -1684,10 +1696,10 @@ var useStylesRerender = () => {
1684
1696
  };
1685
1697
 
1686
1698
  // src/styles-inheritance/create-styles-inheritance.ts
1687
- var import_editor_props4 = require("@elementor/editor-props");
1699
+ var import_editor_props5 = require("@elementor/editor-props");
1688
1700
 
1689
1701
  // src/styles-inheritance/create-snapshots-manager.ts
1690
- var import_editor_props3 = require("@elementor/editor-props");
1702
+ var import_editor_props4 = require("@elementor/editor-props");
1691
1703
 
1692
1704
  // src/styles-inheritance/utils.ts
1693
1705
  var DEFAULT_STATE = "normal";
@@ -1787,7 +1799,7 @@ function buildInitialSnapshotFromStyles(styles) {
1787
1799
  variant: { props }
1788
1800
  } = styleData;
1789
1801
  Object.entries(props).forEach(([key, value]) => {
1790
- const filteredValue = (0, import_editor_props3.filterEmptyValues)(value);
1802
+ const filteredValue = (0, import_editor_props4.filterEmptyValues)(value);
1791
1803
  if (filteredValue === null) {
1792
1804
  return;
1793
1805
  }
@@ -1833,7 +1845,7 @@ function createStylesInheritance(styleDefs, breakpointsRoot) {
1833
1845
  inheritanceChain = inheritanceChain.map(({ value: styleValue, ...rest }) => ({
1834
1846
  ...rest,
1835
1847
  value: getValueByPath(styleValue, nextFields, filterPropType)
1836
- })).filter(({ value: styleValue }) => !(0, import_editor_props4.isEmpty)(styleValue));
1848
+ })).filter(({ value: styleValue }) => !(0, import_editor_props5.isEmpty)(styleValue));
1837
1849
  }
1838
1850
  return inheritanceChain;
1839
1851
  }
@@ -1875,7 +1887,7 @@ function getValueByPath(value, path, filterPropType) {
1875
1887
  if (!currentScope) {
1876
1888
  return null;
1877
1889
  }
1878
- if ((0, import_editor_props4.isTransformable)(currentScope)) {
1890
+ if ((0, import_editor_props5.isTransformable)(currentScope)) {
1879
1891
  return currentScope.value?.[key] ?? null;
1880
1892
  }
1881
1893
  if (typeof currentScope === "object") {
@@ -1885,7 +1897,7 @@ function getValueByPath(value, path, filterPropType) {
1885
1897
  }, value);
1886
1898
  }
1887
1899
  function shouldUseOriginalValue(filterPropType, value) {
1888
- return !!filterPropType && (0, import_editor_props4.isTransformable)(value) && filterPropType.key !== value.$$type;
1900
+ return !!filterPropType && (0, import_editor_props5.isTransformable)(value) && filterPropType.key !== value.$$type;
1889
1901
  }
1890
1902
  var getFilterPropType = (propType, path) => {
1891
1903
  if (!propType || propType.kind !== "union") {
@@ -1943,7 +1955,7 @@ var useAppliedStyles = () => {
1943
1955
  const baseStyles = useBaseStyles();
1944
1956
  useStylesRerender();
1945
1957
  const classesProp = (0, import_editor_elements4.useElementSetting)(element.id, currentClassesProp);
1946
- const appliedStyles = import_editor_props5.classesPropTypeUtil.extract(classesProp) ?? [];
1958
+ const appliedStyles = import_editor_props6.classesPropTypeUtil.extract(classesProp) ?? [];
1947
1959
  return import_editor_styles_repository7.stylesRepository.all().filter((style) => [...baseStyles, ...appliedStyles].includes(style.id));
1948
1960
  };
1949
1961
  var useBaseStyles = () => {
@@ -1995,39 +2007,24 @@ var import_react21 = require("react");
1995
2007
  var import_editor_elements6 = require("@elementor/editor-elements");
1996
2008
  var import_editor_styles2 = require("@elementor/editor-styles");
1997
2009
  var import_editor_styles_repository8 = require("@elementor/editor-styles-repository");
2010
+ var import_editor_styles_repository9 = require("@elementor/editor-styles-repository");
1998
2011
  var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
1999
2012
  var import_i18n7 = require("@wordpress/i18n");
2000
2013
  function useStylesFields(propNames) {
2001
- const { element } = useElement();
2002
- const { id, meta, provider, canEdit } = useStyle();
2003
- const classesProp = useClassesProp();
2004
- const undoableUpdateStyle = useUndoableUpdateStyle();
2005
- const undoableCreateElementStyle = useUndoableCreateElementStyle();
2014
+ const {
2015
+ element: { id: elementId }
2016
+ } = useElement();
2017
+ const { id: styleId, meta, provider, canEdit } = useStyle();
2018
+ const undoableUpdateStyle = useUndoableUpdateStyle({ elementId, meta });
2019
+ const undoableCreateElementStyle = useUndoableCreateElementStyle({ elementId, meta });
2006
2020
  useStylesRerender();
2007
- const values = getProps({
2008
- elementId: element.id,
2009
- styleId: id,
2010
- provider,
2011
- meta,
2012
- propNames
2013
- });
2014
- const setValues = (props) => {
2015
- if (id === null) {
2016
- undoableCreateElementStyle({
2017
- elementId: element.id,
2018
- classesProp,
2019
- meta,
2020
- props
2021
- });
2022
- return;
2021
+ const values = getProps({ elementId, styleId, provider, meta, propNames });
2022
+ const setValues = (props, { history: { propDisplayName } }) => {
2023
+ if (styleId === null) {
2024
+ undoableCreateElementStyle({ props, propDisplayName });
2025
+ } else {
2026
+ undoableUpdateStyle({ provider, styleId, props, propDisplayName });
2023
2027
  }
2024
- undoableUpdateStyle({
2025
- elementId: element.id,
2026
- styleId: id,
2027
- provider,
2028
- meta,
2029
- props
2030
- });
2031
2028
  };
2032
2029
  return { values, setValues, canEdit };
2033
2030
  }
@@ -2044,39 +2041,52 @@ function getProps({ styleId, elementId, provider, meta, propNames }) {
2044
2041
  propNames.map((key) => [key, variant?.props[key] ?? null])
2045
2042
  );
2046
2043
  }
2047
- function useUndoableCreateElementStyle() {
2044
+ function useUndoableCreateElementStyle({
2045
+ elementId,
2046
+ meta
2047
+ }) {
2048
+ const classesProp = useClassesProp();
2048
2049
  return (0, import_react21.useMemo)(() => {
2050
+ const isVersion331Active = (0, import_editor_v1_adapters6.isExperimentActive)(EXPERIMENTAL_FEATURES.V_3_31);
2051
+ const createStyleArgs = { elementId, classesProp, meta, label: import_editor_styles_repository9.ELEMENTS_STYLES_RESERVED_LABEL };
2049
2052
  return (0, import_editor_v1_adapters6.undoable)(
2050
2053
  {
2051
- do: (payload) => {
2052
- return (0, import_editor_elements6.createElementStyle)({
2053
- ...payload,
2054
- label: import_editor_styles_repository8.ELEMENTS_STYLES_RESERVED_LABEL
2055
- });
2054
+ do: ({ props }) => {
2055
+ return (0, import_editor_elements6.createElementStyle)({ ...createStyleArgs, props });
2056
2056
  },
2057
- undo: ({ elementId }, styleId) => {
2057
+ undo: (_, styleId) => {
2058
2058
  (0, import_editor_elements6.deleteElementStyle)(elementId, styleId);
2059
2059
  },
2060
- redo: (payload, styleId) => {
2061
- return (0, import_editor_elements6.createElementStyle)({
2062
- ...payload,
2063
- styleId,
2064
- label: import_editor_styles_repository8.ELEMENTS_STYLES_RESERVED_LABEL
2065
- });
2060
+ redo: ({ props }, styleId) => {
2061
+ return (0, import_editor_elements6.createElementStyle)({ ...createStyleArgs, props, styleId });
2066
2062
  }
2067
2063
  },
2068
2064
  {
2069
- title: ({ elementId }) => (0, import_editor_elements6.getElementLabel)(elementId),
2070
- subtitle: (0, import_i18n7.__)("Style edited", "elementor")
2065
+ title: () => {
2066
+ if (isVersion331Active) {
2067
+ return localStyleHistoryTitlesV331.title({ elementId });
2068
+ }
2069
+ return historyTitlesV330.title({ elementId });
2070
+ },
2071
+ subtitle: ({ propDisplayName }) => {
2072
+ if (isVersion331Active) {
2073
+ return localStyleHistoryTitlesV331.subtitle({ propDisplayName });
2074
+ }
2075
+ return historyTitlesV330.subtitle;
2076
+ }
2071
2077
  }
2072
2078
  );
2073
- }, []);
2079
+ }, [classesProp, elementId, meta]);
2074
2080
  }
2075
- function useUndoableUpdateStyle() {
2081
+ function useUndoableUpdateStyle({
2082
+ elementId,
2083
+ meta
2084
+ }) {
2076
2085
  return (0, import_react21.useMemo)(() => {
2086
+ const isVersion331Active = (0, import_editor_v1_adapters6.isExperimentActive)(EXPERIMENTAL_FEATURES.V_3_31);
2077
2087
  return (0, import_editor_v1_adapters6.undoable)(
2078
2088
  {
2079
- do: ({ elementId, styleId, provider, meta, props }) => {
2089
+ do: ({ provider, styleId, props }) => {
2080
2090
  if (!provider.actions.updateProps) {
2081
2091
  throw new StylesProviderCannotUpdatePropsError({
2082
2092
  context: { providerKey: provider.getKey() }
@@ -2084,26 +2094,37 @@ function useUndoableUpdateStyle() {
2084
2094
  }
2085
2095
  const style = provider.actions.get(styleId, { elementId });
2086
2096
  const prevProps = getCurrentProps(style, meta);
2087
- provider.actions.updateProps(
2088
- {
2089
- id: styleId,
2090
- meta,
2091
- props
2092
- },
2093
- { elementId }
2094
- );
2097
+ provider.actions.updateProps({ id: styleId, meta, props }, { elementId });
2095
2098
  return prevProps;
2096
2099
  },
2097
- undo: ({ elementId, styleId, meta, provider }, prevProps) => {
2100
+ undo: ({ provider, styleId }, prevProps) => {
2098
2101
  provider.actions.updateProps?.({ id: styleId, meta, props: prevProps }, { elementId });
2099
2102
  }
2100
2103
  },
2101
2104
  {
2102
- title: ({ elementId }) => (0, import_editor_elements6.getElementLabel)(elementId),
2103
- subtitle: (0, import_i18n7.__)("Style edited", "elementor")
2105
+ title: ({ provider }) => {
2106
+ if (isVersion331Active) {
2107
+ const isLocal = (0, import_editor_styles_repository8.isElementsStylesProvider)(provider.getKey());
2108
+ if (isLocal) {
2109
+ return localStyleHistoryTitlesV331.title({ elementId });
2110
+ }
2111
+ return defaultHistoryTitlesV331.title({ provider });
2112
+ }
2113
+ return historyTitlesV330.title({ elementId });
2114
+ },
2115
+ subtitle: ({ provider, styleId, propDisplayName }) => {
2116
+ if (isVersion331Active) {
2117
+ const isLocal = (0, import_editor_styles_repository8.isElementsStylesProvider)(provider.getKey());
2118
+ if (isLocal) {
2119
+ return localStyleHistoryTitlesV331.subtitle({ propDisplayName });
2120
+ }
2121
+ return defaultHistoryTitlesV331.subtitle({ provider, styleId, elementId, propDisplayName });
2122
+ }
2123
+ return historyTitlesV330.subtitle;
2124
+ }
2104
2125
  }
2105
2126
  );
2106
- }, []);
2127
+ }, [elementId, meta]);
2107
2128
  }
2108
2129
  function getCurrentProps(style, meta) {
2109
2130
  if (!style) {
@@ -2113,15 +2134,40 @@ function getCurrentProps(style, meta) {
2113
2134
  const props = variant?.props ?? {};
2114
2135
  return structuredClone(props);
2115
2136
  }
2137
+ var historyTitlesV330 = {
2138
+ title: ({ elementId }) => (0, import_editor_elements6.getElementLabel)(elementId),
2139
+ subtitle: (0, import_i18n7.__)("Style edited", "elementor")
2140
+ };
2141
+ var defaultHistoryTitlesV331 = {
2142
+ title: ({ provider }) => {
2143
+ const providerLabel = provider.labels?.singular;
2144
+ return providerLabel ? capitalize(providerLabel) : (0, import_i18n7.__)("Style", "elementor");
2145
+ },
2146
+ subtitle: ({ provider, styleId, elementId, propDisplayName }) => {
2147
+ const styleLabel = provider.actions.get(styleId, { elementId })?.label;
2148
+ if (!styleLabel) {
2149
+ throw new Error(`Style ${styleId} not found`);
2150
+ }
2151
+ return (0, import_i18n7.__)(`%s$1 %s$2 edited`, "elementor").replace("%s$1", styleLabel).replace("%s$2", propDisplayName);
2152
+ }
2153
+ };
2154
+ var localStyleHistoryTitlesV331 = {
2155
+ title: ({ elementId }) => (0, import_editor_elements6.getElementLabel)(elementId),
2156
+ subtitle: ({ propDisplayName }) => (
2157
+ // translators: %s is the name of the style property being edited
2158
+ (0, import_i18n7.__)(`%s edited`, "elementor").replace("%s", propDisplayName)
2159
+ )
2160
+ };
2161
+ function capitalize(str) {
2162
+ return str.charAt(0).toUpperCase() + str.slice(1);
2163
+ }
2116
2164
 
2117
2165
  // src/hooks/use-styles-field.ts
2118
- function useStylesField(propName) {
2166
+ function useStylesField(propName, meta) {
2119
2167
  const { values, setValues, canEdit } = useStylesFields([propName]);
2120
2168
  const value = values?.[propName] ?? null;
2121
2169
  const setValue = (newValue) => {
2122
- setValues({
2123
- [propName]: newValue
2124
- });
2170
+ setValues({ [propName]: newValue }, meta);
2125
2171
  };
2126
2172
  return { value, setValue, canEdit };
2127
2173
  }
@@ -2129,8 +2175,8 @@ function useStylesField(propName) {
2129
2175
  // src/styles-inheritance/components/styles-inheritance-indicator.tsx
2130
2176
  var React26 = __toESM(require("react"));
2131
2177
  var import_editor_controls5 = require("@elementor/editor-controls");
2132
- var import_editor_props6 = require("@elementor/editor-props");
2133
- var import_editor_styles_repository11 = require("@elementor/editor-styles-repository");
2178
+ var import_editor_props7 = require("@elementor/editor-props");
2179
+ var import_editor_styles_repository12 = require("@elementor/editor-styles-repository");
2134
2180
  var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
2135
2181
  var import_ui23 = require("@elementor/ui");
2136
2182
  var import_i18n11 = require("@wordpress/i18n");
@@ -2181,7 +2227,7 @@ function useDirection() {
2181
2227
 
2182
2228
  // src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
2183
2229
  var import_react22 = require("react");
2184
- var import_editor_styles_repository9 = require("@elementor/editor-styles-repository");
2230
+ var import_editor_styles_repository10 = require("@elementor/editor-styles-repository");
2185
2231
  var import_i18n8 = require("@wordpress/i18n");
2186
2232
  var MAXIMUM_ITEMS = 2;
2187
2233
  var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
@@ -2193,7 +2239,7 @@ var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
2193
2239
  );
2194
2240
  const validItems = normalizedItems.map((item) => ({
2195
2241
  ...item,
2196
- displayLabel: import_editor_styles_repository9.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0, import_i18n8.__)("Base", "elementor")
2242
+ displayLabel: import_editor_styles_repository10.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0, import_i18n8.__)("Base", "elementor")
2197
2243
  })).filter((item) => !item.value || item.displayLabel !== "").slice(0, MAXIMUM_ITEMS);
2198
2244
  setItems(validItems);
2199
2245
  })();
@@ -2270,13 +2316,13 @@ var BreakpointIcon = ({ breakpoint }) => {
2270
2316
 
2271
2317
  // src/styles-inheritance/components/infotip/label-chip.tsx
2272
2318
  var React22 = __toESM(require("react"));
2273
- var import_editor_styles_repository10 = require("@elementor/editor-styles-repository");
2319
+ var import_editor_styles_repository11 = require("@elementor/editor-styles-repository");
2274
2320
  var import_icons5 = require("@elementor/icons");
2275
2321
  var import_ui19 = require("@elementor/ui");
2276
2322
  var import_i18n9 = require("@wordpress/i18n");
2277
2323
  var SIZE4 = "tiny";
2278
2324
  var LabelChip = ({ displayLabel, provider }) => {
2279
- const isBaseStyle = provider === import_editor_styles_repository10.ELEMENTS_BASE_STYLES_PROVIDER_KEY;
2325
+ const isBaseStyle = provider === import_editor_styles_repository11.ELEMENTS_BASE_STYLES_PROVIDER_KEY;
2280
2326
  const chipIcon = isBaseStyle ? /* @__PURE__ */ React22.createElement(import_ui19.Tooltip, { title: (0, import_i18n9.__)("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React22.createElement(import_icons5.InfoCircleIcon, { fontSize: SIZE4 })) : void 0;
2281
2327
  return /* @__PURE__ */ React22.createElement(
2282
2328
  import_ui19.Chip,
@@ -2460,9 +2506,9 @@ var StylesInheritanceIndicator = () => {
2460
2506
  var Indicator = ({ inheritanceChain, path, propType }) => {
2461
2507
  const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
2462
2508
  const currentItem = currentStyleId ? getValueFromInheritanceChain(inheritanceChain, currentStyleId, currentStyleMeta) : null;
2463
- const hasValue = !(0, import_editor_props6.isEmpty)(currentItem?.value);
2509
+ const hasValue = !(0, import_editor_props7.isEmpty)(currentItem?.value);
2464
2510
  const [actualStyle] = inheritanceChain;
2465
- if (!(0, import_editor_v1_adapters8.isExperimentActive)(EXPERIMENTAL_FEATURES.V_3_31) && actualStyle.provider === import_editor_styles_repository11.ELEMENTS_BASE_STYLES_PROVIDER_KEY) {
2511
+ if (!(0, import_editor_v1_adapters8.isExperimentActive)(EXPERIMENTAL_FEATURES.V_3_31) && actualStyle.provider === import_editor_styles_repository12.ELEMENTS_BASE_STYLES_PROVIDER_KEY) {
2466
2512
  return null;
2467
2513
  }
2468
2514
  const isFinalValue = currentItem === actualStyle;
@@ -2496,8 +2542,10 @@ var getLabel = ({ isFinalValue, hasValue }) => {
2496
2542
  };
2497
2543
 
2498
2544
  // src/controls-registry/styles-field.tsx
2499
- var StylesField = ({ bind, placeholder, children }) => {
2500
- const { value, setValue, canEdit } = useStylesField(bind);
2545
+ var StylesField = ({ bind, placeholder, propDisplayName, children }) => {
2546
+ const { value, setValue, canEdit } = useStylesField(bind, {
2547
+ history: { propDisplayName }
2548
+ });
2501
2549
  const isVersion331Active = (0, import_editor_v1_adapters9.isExperimentActive)("e_v_3_31");
2502
2550
  const stylesInheritanceChain = useStylesInheritanceChain([bind]);
2503
2551
  const stylesSchema = (0, import_editor_styles3.getStylesSchema)();
@@ -2527,7 +2575,7 @@ var StylesField = ({ bind, placeholder, children }) => {
2527
2575
  value: values,
2528
2576
  setValue: setValues,
2529
2577
  placeholder: placeholderValues,
2530
- disabled: !canEdit
2578
+ isDisabled: () => !canEdit
2531
2579
  },
2532
2580
  /* @__PURE__ */ React27.createElement(import_editor_controls6.PropKeyProvider, { bind }, children)
2533
2581
  )
@@ -2655,7 +2703,7 @@ var BorderStyleField = () => /* @__PURE__ */ React35.createElement(StylesField,
2655
2703
  // src/components/style-sections/border-section/border-width-field.tsx
2656
2704
  var React36 = __toESM(require("react"));
2657
2705
  var import_editor_controls11 = require("@elementor/editor-controls");
2658
- var import_editor_props7 = require("@elementor/editor-props");
2706
+ var import_editor_props8 = require("@elementor/editor-props");
2659
2707
  var import_icons7 = require("@elementor/icons");
2660
2708
  var import_ui29 = require("@elementor/ui");
2661
2709
  var import_i18n15 = require("@wordpress/i18n");
@@ -2693,12 +2741,13 @@ var BorderWidthField = () => {
2693
2741
  label: BORDER_WIDTH_LABEL,
2694
2742
  icon: /* @__PURE__ */ React36.createElement(import_icons7.SideAllIcon, { fontSize: "tiny" }),
2695
2743
  tooltipLabel: (0, import_i18n15.__)("Adjust borders", "elementor"),
2696
- multiSizePropTypeUtil: import_editor_props7.borderWidthPropTypeUtil
2744
+ multiSizePropTypeUtil: import_editor_props8.borderWidthPropTypeUtil
2697
2745
  }
2698
2746
  ));
2699
2747
  };
2700
2748
 
2701
2749
  // src/components/style-sections/border-section/border-field.tsx
2750
+ var BORDER_LABEL = (0, import_i18n16.__)("Border", "elementor");
2702
2751
  var initialBorder = {
2703
2752
  "border-width": { $$type: "size", value: { size: 1, unit: "px" } },
2704
2753
  "border-color": { $$type: "color", value: "#000000" },
@@ -2706,15 +2755,19 @@ var initialBorder = {
2706
2755
  };
2707
2756
  var BorderField = () => {
2708
2757
  const { values, setValues, canEdit } = useStylesFields(Object.keys(initialBorder));
2758
+ const meta = { history: { propDisplayName: BORDER_LABEL } };
2709
2759
  const addBorder = () => {
2710
- setValues(initialBorder);
2760
+ setValues(initialBorder, meta);
2711
2761
  };
2712
2762
  const removeBorder = () => {
2713
- setValues({
2714
- "border-width": null,
2715
- "border-color": null,
2716
- "border-style": null
2717
- });
2763
+ setValues(
2764
+ {
2765
+ "border-width": null,
2766
+ "border-color": null,
2767
+ "border-style": null
2768
+ },
2769
+ meta
2770
+ );
2718
2771
  };
2719
2772
  const hasBorder = Object.values(values ?? {}).some(Boolean);
2720
2773
  return /* @__PURE__ */ React37.createElement(
@@ -2724,7 +2777,7 @@ var BorderField = () => {
2724
2777
  onAdd: addBorder,
2725
2778
  onRemove: removeBorder,
2726
2779
  disabled: !canEdit,
2727
- renderLabel: () => /* @__PURE__ */ React37.createElement(import_editor_controls12.ControlFormLabel, null, (0, import_i18n16.__)("Border", "elementor"))
2780
+ renderLabel: () => /* @__PURE__ */ React37.createElement(import_editor_controls12.ControlFormLabel, null, BORDER_LABEL)
2728
2781
  },
2729
2782
  /* @__PURE__ */ React37.createElement(BorderWidthField, null),
2730
2783
  /* @__PURE__ */ React37.createElement(BorderColorField, null),
@@ -2735,7 +2788,7 @@ var BorderField = () => {
2735
2788
  // src/components/style-sections/border-section/border-radius-field.tsx
2736
2789
  var React39 = __toESM(require("react"));
2737
2790
  var import_editor_controls13 = require("@elementor/editor-controls");
2738
- var import_editor_props8 = require("@elementor/editor-props");
2791
+ var import_editor_props9 = require("@elementor/editor-props");
2739
2792
  var import_icons8 = require("@elementor/icons");
2740
2793
  var import_ui31 = require("@elementor/ui");
2741
2794
  var import_i18n17 = require("@wordpress/i18n");
@@ -2789,7 +2842,7 @@ var BorderRadiusField = () => {
2789
2842
  label: BORDER_RADIUS_LABEL,
2790
2843
  icon: /* @__PURE__ */ React39.createElement(import_icons8.BorderCornersIcon, { fontSize: "tiny" }),
2791
2844
  tooltipLabel: (0, import_i18n17.__)("Adjust corners", "elementor"),
2792
- multiSizePropTypeUtil: import_editor_props8.borderRadiusPropTypeUtil
2845
+ multiSizePropTypeUtil: import_editor_props9.borderRadiusPropTypeUtil
2793
2846
  }
2794
2847
  )));
2795
2848
  };
@@ -2817,16 +2870,17 @@ var OpacityControlField = () => {
2817
2870
  // src/components/style-sections/effects-section/effects-section.tsx
2818
2871
  var BOX_SHADOW_LABEL = (0, import_i18n19.__)("Box shadow", "elementor");
2819
2872
  var FILTER_LABEL = (0, import_i18n19.__)("Filter", "elementor");
2873
+ var TRANSFORM_LABEL = (0, import_i18n19.__)("Transform", "elementor");
2820
2874
  var EffectsSection = () => {
2821
2875
  const isVersion331Active = (0, import_editor_v1_adapters10.isExperimentActive)(EXPERIMENTAL_FEATURES.V_3_31);
2822
- return /* @__PURE__ */ React42.createElement(SectionContent, null, /* @__PURE__ */ React42.createElement(OpacityControlField, null), /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(StylesField, { bind: "box-shadow", propDisplayName: BOX_SHADOW_LABEL }, /* @__PURE__ */ React42.createElement(import_editor_controls15.BoxShadowRepeaterControl, null)), isVersion331Active && /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(StylesField, { bind: "filter", propDisplayName: FILTER_LABEL }, /* @__PURE__ */ React42.createElement(import_editor_controls15.FilterRepeaterControl, null))));
2876
+ return /* @__PURE__ */ React42.createElement(SectionContent, null, isVersion331Active && /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(OpacityControlField, null), /* @__PURE__ */ React42.createElement(PanelDivider, null)), /* @__PURE__ */ React42.createElement(StylesField, { bind: "box-shadow", propDisplayName: BOX_SHADOW_LABEL }, /* @__PURE__ */ React42.createElement(import_editor_controls15.BoxShadowRepeaterControl, null)), isVersion331Active && /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(StylesField, { bind: "transform", propDisplayName: TRANSFORM_LABEL }, /* @__PURE__ */ React42.createElement(import_editor_controls15.TransformRepeaterControl, null)), /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(StylesField, { bind: "filter", propDisplayName: FILTER_LABEL }, /* @__PURE__ */ React42.createElement(import_editor_controls15.FilterRepeaterControl, null))));
2823
2877
  };
2824
2878
 
2825
2879
  // src/components/style-sections/layout-section/layout-section.tsx
2826
2880
  var React54 = __toESM(require("react"));
2827
2881
  var import_editor_controls26 = require("@elementor/editor-controls");
2828
2882
  var import_editor_elements7 = require("@elementor/editor-elements");
2829
- var import_i18n30 = require("@wordpress/i18n");
2883
+ var import_i18n31 = require("@wordpress/i18n");
2830
2884
 
2831
2885
  // src/hooks/use-computed-style.ts
2832
2886
  var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
@@ -2858,12 +2912,14 @@ var React44 = __toESM(require("react"));
2858
2912
  var import_editor_controls16 = require("@elementor/editor-controls");
2859
2913
  var import_icons9 = require("@elementor/icons");
2860
2914
  var import_ui33 = require("@elementor/ui");
2861
- var import_i18n20 = require("@wordpress/i18n");
2915
+ var import_i18n21 = require("@wordpress/i18n");
2862
2916
 
2863
2917
  // src/components/style-sections/layout-section/utils/rotated-icon.tsx
2864
2918
  var React43 = __toESM(require("react"));
2865
2919
  var import_react25 = require("react");
2866
2920
  var import_ui32 = require("@elementor/ui");
2921
+ var import_i18n20 = require("@wordpress/i18n");
2922
+ var FLEX_DIRECTION_LABEL = (0, import_i18n20.__)("Flex direction", "elementor");
2867
2923
  var CLOCKWISE_ANGLES = {
2868
2924
  row: 0,
2869
2925
  column: 90,
@@ -2888,7 +2944,9 @@ var RotatedIcon = ({
2888
2944
  return /* @__PURE__ */ React43.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
2889
2945
  };
2890
2946
  var useGetTargetAngle = (isClockwise, offset, disableRotationForReversed, existingRef) => {
2891
- const { value: direction } = useStylesField("flex-direction");
2947
+ const { value: direction } = useStylesField("flex-direction", {
2948
+ history: { propDisplayName: FLEX_DIRECTION_LABEL }
2949
+ });
2892
2950
  const isRtl = "rtl" === (0, import_ui32.useTheme)().direction;
2893
2951
  const rotationMultiplier = isRtl ? -1 : 1;
2894
2952
  const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
@@ -2904,7 +2962,7 @@ var useGetTargetAngle = (isClockwise, offset, disableRotationForReversed, existi
2904
2962
  };
2905
2963
 
2906
2964
  // src/components/style-sections/layout-section/align-content-field.tsx
2907
- var ALIGN_CONTENT_LABEL = (0, import_i18n20.__)("Align content", "elementor");
2965
+ var ALIGN_CONTENT_LABEL = (0, import_i18n21.__)("Align content", "elementor");
2908
2966
  var StartIcon = (0, import_ui33.withDirection)(import_icons9.JustifyTopIcon);
2909
2967
  var EndIcon = (0, import_ui33.withDirection)(import_icons9.JustifyBottomIcon);
2910
2968
  var iconProps = {
@@ -2915,37 +2973,37 @@ var iconProps = {
2915
2973
  var options = [
2916
2974
  {
2917
2975
  value: "start",
2918
- label: (0, import_i18n20.__)("Start", "elementor"),
2976
+ label: (0, import_i18n21.__)("Start", "elementor"),
2919
2977
  renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(RotatedIcon, { icon: StartIcon, size, ...iconProps }),
2920
2978
  showTooltip: true
2921
2979
  },
2922
2980
  {
2923
2981
  value: "center",
2924
- label: (0, import_i18n20.__)("Center", "elementor"),
2982
+ label: (0, import_i18n21.__)("Center", "elementor"),
2925
2983
  renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(RotatedIcon, { icon: import_icons9.JustifyCenterIcon, size, ...iconProps }),
2926
2984
  showTooltip: true
2927
2985
  },
2928
2986
  {
2929
2987
  value: "end",
2930
- label: (0, import_i18n20.__)("End", "elementor"),
2988
+ label: (0, import_i18n21.__)("End", "elementor"),
2931
2989
  renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(RotatedIcon, { icon: EndIcon, size, ...iconProps }),
2932
2990
  showTooltip: true
2933
2991
  },
2934
2992
  {
2935
2993
  value: "space-between",
2936
- label: (0, import_i18n20.__)("Space between", "elementor"),
2994
+ label: (0, import_i18n21.__)("Space between", "elementor"),
2937
2995
  renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(RotatedIcon, { icon: import_icons9.JustifySpaceBetweenVerticalIcon, size, ...iconProps }),
2938
2996
  showTooltip: true
2939
2997
  },
2940
2998
  {
2941
2999
  value: "space-around",
2942
- label: (0, import_i18n20.__)("Space around", "elementor"),
3000
+ label: (0, import_i18n21.__)("Space around", "elementor"),
2943
3001
  renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(RotatedIcon, { icon: import_icons9.JustifySpaceAroundVerticalIcon, size, ...iconProps }),
2944
3002
  showTooltip: true
2945
3003
  },
2946
3004
  {
2947
3005
  value: "space-evenly",
2948
- label: (0, import_i18n20.__)("Space evenly", "elementor"),
3006
+ label: (0, import_i18n21.__)("Space evenly", "elementor"),
2949
3007
  renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(RotatedIcon, { icon: import_icons9.JustifyDistributeVerticalIcon, size, ...iconProps }),
2950
3008
  showTooltip: true
2951
3009
  }
@@ -2957,8 +3015,8 @@ var React45 = __toESM(require("react"));
2957
3015
  var import_editor_controls17 = require("@elementor/editor-controls");
2958
3016
  var import_icons10 = require("@elementor/icons");
2959
3017
  var import_ui34 = require("@elementor/ui");
2960
- var import_i18n21 = require("@wordpress/i18n");
2961
- var ALIGN_ITEMS_LABEL = (0, import_i18n21.__)("Align items", "elementor");
3018
+ var import_i18n22 = require("@wordpress/i18n");
3019
+ var ALIGN_ITEMS_LABEL = (0, import_i18n22.__)("Align items", "elementor");
2962
3020
  var StartIcon2 = (0, import_ui34.withDirection)(import_icons10.LayoutAlignLeftIcon);
2963
3021
  var EndIcon2 = (0, import_ui34.withDirection)(import_icons10.LayoutAlignRightIcon);
2964
3022
  var iconProps2 = {
@@ -2968,25 +3026,25 @@ var iconProps2 = {
2968
3026
  var options2 = [
2969
3027
  {
2970
3028
  value: "start",
2971
- label: (0, import_i18n21.__)("Start", "elementor"),
3029
+ label: (0, import_i18n22.__)("Start", "elementor"),
2972
3030
  renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(RotatedIcon, { icon: StartIcon2, size, ...iconProps2 }),
2973
3031
  showTooltip: true
2974
3032
  },
2975
3033
  {
2976
3034
  value: "center",
2977
- label: (0, import_i18n21.__)("Center", "elementor"),
3035
+ label: (0, import_i18n22.__)("Center", "elementor"),
2978
3036
  renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(RotatedIcon, { icon: import_icons10.LayoutAlignCenterIcon, size, ...iconProps2 }),
2979
3037
  showTooltip: true
2980
3038
  },
2981
3039
  {
2982
3040
  value: "end",
2983
- label: (0, import_i18n21.__)("End", "elementor"),
3041
+ label: (0, import_i18n22.__)("End", "elementor"),
2984
3042
  renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(RotatedIcon, { icon: EndIcon2, size, ...iconProps2 }),
2985
3043
  showTooltip: true
2986
3044
  },
2987
3045
  {
2988
3046
  value: "stretch",
2989
- label: (0, import_i18n21.__)("Stretch", "elementor"),
3047
+ label: (0, import_i18n22.__)("Stretch", "elementor"),
2990
3048
  renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(RotatedIcon, { icon: import_icons10.LayoutDistributeVerticalIcon, size, ...iconProps2 }),
2991
3049
  showTooltip: true
2992
3050
  }
@@ -3000,8 +3058,8 @@ var React46 = __toESM(require("react"));
3000
3058
  var import_editor_controls18 = require("@elementor/editor-controls");
3001
3059
  var import_icons11 = require("@elementor/icons");
3002
3060
  var import_ui35 = require("@elementor/ui");
3003
- var import_i18n22 = require("@wordpress/i18n");
3004
- var ALIGN_SELF_LABEL = (0, import_i18n22.__)("Align self", "elementor");
3061
+ var import_i18n23 = require("@wordpress/i18n");
3062
+ var ALIGN_SELF_LABEL = (0, import_i18n23.__)("Align self", "elementor");
3005
3063
  var ALIGN_SELF_CHILD_OFFSET_MAP = {
3006
3064
  row: 90,
3007
3065
  "row-reverse": 90,
@@ -3016,7 +3074,7 @@ var iconProps3 = {
3016
3074
  var getOptions = (parentStyleDirection) => [
3017
3075
  {
3018
3076
  value: "start",
3019
- label: (0, import_i18n22.__)("Start", "elementor"),
3077
+ label: (0, import_i18n23.__)("Start", "elementor"),
3020
3078
  renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(
3021
3079
  RotatedIcon,
3022
3080
  {
@@ -3030,7 +3088,7 @@ var getOptions = (parentStyleDirection) => [
3030
3088
  },
3031
3089
  {
3032
3090
  value: "center",
3033
- label: (0, import_i18n22.__)("Center", "elementor"),
3091
+ label: (0, import_i18n23.__)("Center", "elementor"),
3034
3092
  renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(
3035
3093
  RotatedIcon,
3036
3094
  {
@@ -3044,7 +3102,7 @@ var getOptions = (parentStyleDirection) => [
3044
3102
  },
3045
3103
  {
3046
3104
  value: "end",
3047
- label: (0, import_i18n22.__)("End", "elementor"),
3105
+ label: (0, import_i18n23.__)("End", "elementor"),
3048
3106
  renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(
3049
3107
  RotatedIcon,
3050
3108
  {
@@ -3058,7 +3116,7 @@ var getOptions = (parentStyleDirection) => [
3058
3116
  },
3059
3117
  {
3060
3118
  value: "stretch",
3061
- label: (0, import_i18n22.__)("Stretch", "elementor"),
3119
+ label: (0, import_i18n23.__)("Stretch", "elementor"),
3062
3120
  renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(
3063
3121
  RotatedIcon,
3064
3122
  {
@@ -3077,25 +3135,25 @@ var AlignSelfChild = ({ parentStyleDirection }) => /* @__PURE__ */ React46.creat
3077
3135
  var React47 = __toESM(require("react"));
3078
3136
  var import_editor_controls19 = require("@elementor/editor-controls");
3079
3137
  var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
3080
- var import_i18n23 = require("@wordpress/i18n");
3081
- var DISPLAY_LABEL = (0, import_i18n23.__)("Display", "elementor");
3138
+ var import_i18n24 = require("@wordpress/i18n");
3139
+ var DISPLAY_LABEL = (0, import_i18n24.__)("Display", "elementor");
3082
3140
  var displayFieldItems = [
3083
3141
  {
3084
3142
  value: "block",
3085
- renderContent: () => (0, import_i18n23.__)("Block", "elementor"),
3086
- label: (0, import_i18n23.__)("Block", "elementor"),
3143
+ renderContent: () => (0, import_i18n24.__)("Block", "elementor"),
3144
+ label: (0, import_i18n24.__)("Block", "elementor"),
3087
3145
  showTooltip: true
3088
3146
  },
3089
3147
  {
3090
3148
  value: "flex",
3091
- renderContent: () => (0, import_i18n23.__)("Flex", "elementor"),
3092
- label: (0, import_i18n23.__)("Flex", "elementor"),
3149
+ renderContent: () => (0, import_i18n24.__)("Flex", "elementor"),
3150
+ label: (0, import_i18n24.__)("Flex", "elementor"),
3093
3151
  showTooltip: true
3094
3152
  },
3095
3153
  {
3096
3154
  value: "inline-block",
3097
- renderContent: () => (0, import_i18n23.__)("In-blk", "elementor"),
3098
- label: (0, import_i18n23.__)("Inline-block", "elementor"),
3155
+ renderContent: () => (0, import_i18n24.__)("In-blk", "elementor"),
3156
+ label: (0, import_i18n24.__)("Inline-block", "elementor"),
3099
3157
  showTooltip: true
3100
3158
  }
3101
3159
  ];
@@ -3105,15 +3163,15 @@ var DisplayField = () => {
3105
3163
  if (isDisplayNoneFeatureActive) {
3106
3164
  items3.push({
3107
3165
  value: "none",
3108
- renderContent: () => (0, import_i18n23.__)("None", "elementor"),
3109
- label: (0, import_i18n23.__)("None", "elementor"),
3166
+ renderContent: () => (0, import_i18n24.__)("None", "elementor"),
3167
+ label: (0, import_i18n24.__)("None", "elementor"),
3110
3168
  showTooltip: true
3111
3169
  });
3112
3170
  }
3113
3171
  items3.push({
3114
3172
  value: "inline-flex",
3115
- renderContent: () => (0, import_i18n23.__)("In-flx", "elementor"),
3116
- label: (0, import_i18n23.__)("Inline-flex", "elementor"),
3173
+ renderContent: () => (0, import_i18n24.__)("In-flx", "elementor"),
3174
+ label: (0, import_i18n24.__)("Inline-flex", "elementor"),
3117
3175
  showTooltip: true
3118
3176
  });
3119
3177
  const placeholder = useDisplayPlaceholderValue();
@@ -3126,12 +3184,12 @@ var React48 = __toESM(require("react"));
3126
3184
  var import_editor_controls20 = require("@elementor/editor-controls");
3127
3185
  var import_icons12 = require("@elementor/icons");
3128
3186
  var import_ui36 = require("@elementor/ui");
3129
- var import_i18n24 = require("@wordpress/i18n");
3130
- var FLEX_DIRECTION_LABEL = (0, import_i18n24.__)("Direction", "elementor");
3187
+ var import_i18n25 = require("@wordpress/i18n");
3188
+ var FLEX_DIRECTION_LABEL2 = (0, import_i18n25.__)("Direction", "elementor");
3131
3189
  var options3 = [
3132
3190
  {
3133
3191
  value: "row",
3134
- label: (0, import_i18n24.__)("Row", "elementor"),
3192
+ label: (0, import_i18n25.__)("Row", "elementor"),
3135
3193
  renderContent: ({ size }) => {
3136
3194
  const StartIcon5 = (0, import_ui36.withDirection)(import_icons12.ArrowRightIcon);
3137
3195
  return /* @__PURE__ */ React48.createElement(StartIcon5, { fontSize: size });
@@ -3140,13 +3198,13 @@ var options3 = [
3140
3198
  },
3141
3199
  {
3142
3200
  value: "column",
3143
- label: (0, import_i18n24.__)("Column", "elementor"),
3201
+ label: (0, import_i18n25.__)("Column", "elementor"),
3144
3202
  renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(import_icons12.ArrowDownSmallIcon, { fontSize: size }),
3145
3203
  showTooltip: true
3146
3204
  },
3147
3205
  {
3148
3206
  value: "row-reverse",
3149
- label: (0, import_i18n24.__)("Reversed row", "elementor"),
3207
+ label: (0, import_i18n25.__)("Reversed row", "elementor"),
3150
3208
  renderContent: ({ size }) => {
3151
3209
  const EndIcon5 = (0, import_ui36.withDirection)(import_icons12.ArrowLeftIcon);
3152
3210
  return /* @__PURE__ */ React48.createElement(EndIcon5, { fontSize: size });
@@ -3155,13 +3213,13 @@ var options3 = [
3155
3213
  },
3156
3214
  {
3157
3215
  value: "column-reverse",
3158
- label: (0, import_i18n24.__)("Reversed column", "elementor"),
3216
+ label: (0, import_i18n25.__)("Reversed column", "elementor"),
3159
3217
  renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(import_icons12.ArrowUpSmallIcon, { fontSize: size }),
3160
3218
  showTooltip: true
3161
3219
  }
3162
3220
  ];
3163
3221
  var FlexDirectionField = () => {
3164
- return /* @__PURE__ */ React48.createElement(StylesField, { bind: "flex-direction", propDisplayName: FLEX_DIRECTION_LABEL }, /* @__PURE__ */ React48.createElement(UiProviders, null, /* @__PURE__ */ React48.createElement(StylesFieldLayout, { label: FLEX_DIRECTION_LABEL }, /* @__PURE__ */ React48.createElement(import_editor_controls20.ToggleControl, { options: options3 }))));
3222
+ return /* @__PURE__ */ React48.createElement(StylesField, { bind: "flex-direction", propDisplayName: FLEX_DIRECTION_LABEL2 }, /* @__PURE__ */ React48.createElement(UiProviders, null, /* @__PURE__ */ React48.createElement(StylesFieldLayout, { label: FLEX_DIRECTION_LABEL2 }, /* @__PURE__ */ React48.createElement(import_editor_controls20.ToggleControl, { options: options3 }))));
3165
3223
  };
3166
3224
 
3167
3225
  // src/components/style-sections/layout-section/flex-order-field.tsx
@@ -3170,8 +3228,8 @@ var import_react26 = require("react");
3170
3228
  var import_editor_controls21 = require("@elementor/editor-controls");
3171
3229
  var import_icons13 = require("@elementor/icons");
3172
3230
  var import_ui37 = require("@elementor/ui");
3173
- var import_i18n25 = require("@wordpress/i18n");
3174
- var ORDER_LABEL = (0, import_i18n25.__)("Order", "elementor");
3231
+ var import_i18n26 = require("@wordpress/i18n");
3232
+ var ORDER_LABEL = (0, import_i18n26.__)("Order", "elementor");
3175
3233
  var FIRST_DEFAULT_VALUE = -99999;
3176
3234
  var LAST_DEFAULT_VALUE = 99999;
3177
3235
  var FIRST = "first";
@@ -3184,25 +3242,31 @@ var orderValueMap = {
3184
3242
  var items = [
3185
3243
  {
3186
3244
  value: FIRST,
3187
- label: (0, import_i18n25.__)("First", "elementor"),
3245
+ label: (0, import_i18n26.__)("First", "elementor"),
3188
3246
  renderContent: ({ size }) => /* @__PURE__ */ React49.createElement(import_icons13.ArrowUpSmallIcon, { fontSize: size }),
3189
3247
  showTooltip: true
3190
3248
  },
3191
3249
  {
3192
3250
  value: LAST,
3193
- label: (0, import_i18n25.__)("Last", "elementor"),
3251
+ label: (0, import_i18n26.__)("Last", "elementor"),
3194
3252
  renderContent: ({ size }) => /* @__PURE__ */ React49.createElement(import_icons13.ArrowDownSmallIcon, { fontSize: size }),
3195
3253
  showTooltip: true
3196
3254
  },
3197
3255
  {
3198
3256
  value: CUSTOM,
3199
- label: (0, import_i18n25.__)("Custom", "elementor"),
3257
+ label: (0, import_i18n26.__)("Custom", "elementor"),
3200
3258
  renderContent: ({ size }) => /* @__PURE__ */ React49.createElement(import_icons13.PencilIcon, { fontSize: size }),
3201
3259
  showTooltip: true
3202
3260
  }
3203
3261
  ];
3204
3262
  var FlexOrderField = () => {
3205
- const { value: order, setValue: setOrder, canEdit } = useStylesField("order");
3263
+ const {
3264
+ value: order,
3265
+ setValue: setOrder,
3266
+ canEdit
3267
+ } = useStylesField("order", {
3268
+ history: { propDisplayName: ORDER_LABEL }
3269
+ });
3206
3270
  const [groupControlValue, setGroupControlValue] = (0, import_react26.useState)(getGroupControlValue(order?.value || null));
3207
3271
  const handleToggleButtonChange = (group) => {
3208
3272
  setGroupControlValue(group);
@@ -3212,7 +3276,7 @@ var FlexOrderField = () => {
3212
3276
  }
3213
3277
  setOrder({ $$type: "number", value: orderValueMap[group] });
3214
3278
  };
3215
- return /* @__PURE__ */ React49.createElement(StylesField, { bind: "order", propDisplayName: ORDER_LABEL }, /* @__PURE__ */ React49.createElement(UiProviders, null, /* @__PURE__ */ React49.createElement(StylesFieldLayout, { label: ORDER_LABEL }, /* @__PURE__ */ React49.createElement(SectionContent, null, /* @__PURE__ */ React49.createElement(
3279
+ return /* @__PURE__ */ React49.createElement(StylesField, { bind: "order", propDisplayName: ORDER_LABEL }, /* @__PURE__ */ React49.createElement(UiProviders, null, /* @__PURE__ */ React49.createElement(SectionContent, null, /* @__PURE__ */ React49.createElement(StylesFieldLayout, { label: ORDER_LABEL }, /* @__PURE__ */ React49.createElement(
3216
3280
  import_editor_controls21.ControlToggleButtonGroup,
3217
3281
  {
3218
3282
  items,
@@ -3221,14 +3285,14 @@ var FlexOrderField = () => {
3221
3285
  exclusive: true,
3222
3286
  disabled: !canEdit
3223
3287
  }
3224
- ), CUSTOM === groupControlValue && /* @__PURE__ */ React49.createElement(import_ui37.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React49.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(ControlLabel, null, (0, import_i18n25.__)("Custom order", "elementor"))), /* @__PURE__ */ React49.createElement(import_ui37.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React49.createElement(
3288
+ )), CUSTOM === groupControlValue && /* @__PURE__ */ React49.createElement(import_ui37.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React49.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(ControlLabel, null, (0, import_i18n26.__)("Custom order", "elementor"))), /* @__PURE__ */ React49.createElement(import_ui37.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React49.createElement(
3225
3289
  import_editor_controls21.NumberControl,
3226
3290
  {
3227
3291
  min: FIRST_DEFAULT_VALUE + 1,
3228
3292
  max: LAST_DEFAULT_VALUE - 1,
3229
3293
  shouldForceInt: true
3230
3294
  }
3231
- )))))));
3295
+ ))))));
3232
3296
  };
3233
3297
  var getGroupControlValue = (order) => {
3234
3298
  if (LAST_DEFAULT_VALUE === order) {
@@ -3244,27 +3308,27 @@ var getGroupControlValue = (order) => {
3244
3308
  var React50 = __toESM(require("react"));
3245
3309
  var import_react27 = require("react");
3246
3310
  var import_editor_controls22 = require("@elementor/editor-controls");
3247
- var import_editor_props9 = require("@elementor/editor-props");
3311
+ var import_editor_props10 = require("@elementor/editor-props");
3248
3312
  var import_icons14 = require("@elementor/icons");
3249
- var import_i18n26 = require("@wordpress/i18n");
3250
- var FLEX_SIZE_LABEL = (0, import_i18n26.__)("Flex Size", "elementor");
3313
+ var import_i18n27 = require("@wordpress/i18n");
3314
+ var FLEX_SIZE_LABEL = (0, import_i18n27.__)("Flex Size", "elementor");
3251
3315
  var DEFAULT = 1;
3252
3316
  var items2 = [
3253
3317
  {
3254
3318
  value: "flex-grow",
3255
- label: (0, import_i18n26.__)("Grow", "elementor"),
3319
+ label: (0, import_i18n27.__)("Grow", "elementor"),
3256
3320
  renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(import_icons14.ExpandIcon, { fontSize: size }),
3257
3321
  showTooltip: true
3258
3322
  },
3259
3323
  {
3260
3324
  value: "flex-shrink",
3261
- label: (0, import_i18n26.__)("Shrink", "elementor"),
3325
+ label: (0, import_i18n27.__)("Shrink", "elementor"),
3262
3326
  renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(import_icons14.ShrinkIcon, { fontSize: size }),
3263
3327
  showTooltip: true
3264
3328
  },
3265
3329
  {
3266
3330
  value: "custom",
3267
- label: (0, import_i18n26.__)("Custom", "elementor"),
3331
+ label: (0, import_i18n27.__)("Custom", "elementor"),
3268
3332
  renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(import_icons14.PencilIcon, { fontSize: size }),
3269
3333
  showTooltip: true
3270
3334
  }
@@ -3277,27 +3341,27 @@ var FlexSizeField = () => {
3277
3341
  const currentGroup = (0, import_react27.useMemo)(() => getActiveGroup({ grow, shrink, basis }), [grow, shrink, basis]), [activeGroup, setActiveGroup] = (0, import_react27.useState)(currentGroup);
3278
3342
  const onChangeGroup = (group = null) => {
3279
3343
  setActiveGroup(group);
3344
+ let props;
3280
3345
  if (!group || group === "custom") {
3281
- setValues({
3346
+ props = {
3282
3347
  "flex-basis": null,
3283
3348
  "flex-grow": null,
3284
3349
  "flex-shrink": null
3285
- });
3286
- return;
3287
- }
3288
- if (group === "flex-grow") {
3289
- setValues({
3350
+ };
3351
+ } else if (group === "flex-grow") {
3352
+ props = {
3290
3353
  "flex-basis": null,
3291
- "flex-grow": import_editor_props9.numberPropTypeUtil.create(DEFAULT),
3354
+ "flex-grow": import_editor_props10.numberPropTypeUtil.create(DEFAULT),
3292
3355
  "flex-shrink": null
3293
- });
3294
- return;
3356
+ };
3357
+ } else {
3358
+ props = {
3359
+ "flex-basis": null,
3360
+ "flex-grow": null,
3361
+ "flex-shrink": import_editor_props10.numberPropTypeUtil.create(DEFAULT)
3362
+ };
3295
3363
  }
3296
- setValues({
3297
- "flex-basis": null,
3298
- "flex-grow": null,
3299
- "flex-shrink": import_editor_props9.numberPropTypeUtil.create(DEFAULT)
3300
- });
3364
+ setValues(props, { history: { propDisplayName: FLEX_SIZE_LABEL } });
3301
3365
  };
3302
3366
  return /* @__PURE__ */ React50.createElement(UiProviders, null, /* @__PURE__ */ React50.createElement(SectionContent, null, /* @__PURE__ */ React50.createElement(StylesField, { bind: activeGroup ?? "", propDisplayName: FLEX_SIZE_LABEL }, /* @__PURE__ */ React50.createElement(StylesFieldLayout, { label: FLEX_SIZE_LABEL }, /* @__PURE__ */ React50.createElement(
3303
3367
  import_editor_controls22.ControlToggleButtonGroup,
@@ -3312,7 +3376,7 @@ var FlexSizeField = () => {
3312
3376
  };
3313
3377
  var FlexCustomField = () => {
3314
3378
  const flexBasisRowRef = (0, import_react27.useRef)(null);
3315
- return /* @__PURE__ */ React50.createElement(React50.Fragment, null, /* @__PURE__ */ React50.createElement(StylesField, { bind: "flex-grow", propDisplayName: FLEX_SIZE_LABEL }, /* @__PURE__ */ React50.createElement(StylesFieldLayout, { label: (0, import_i18n26.__)("Grow", "elementor") }, /* @__PURE__ */ React50.createElement(import_editor_controls22.NumberControl, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React50.createElement(StylesField, { bind: "flex-shrink", propDisplayName: FLEX_SIZE_LABEL }, /* @__PURE__ */ React50.createElement(StylesFieldLayout, { label: (0, import_i18n26.__)("Shrink", "elementor") }, /* @__PURE__ */ React50.createElement(import_editor_controls22.NumberControl, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React50.createElement(StylesField, { bind: "flex-basis", propDisplayName: FLEX_SIZE_LABEL }, /* @__PURE__ */ React50.createElement(StylesFieldLayout, { label: (0, import_i18n26.__)("Basis", "elementor"), ref: flexBasisRowRef }, /* @__PURE__ */ React50.createElement(import_editor_controls22.SizeControl, { extendedOptions: ["auto"], anchorRef: flexBasisRowRef }))));
3379
+ return /* @__PURE__ */ React50.createElement(React50.Fragment, null, /* @__PURE__ */ React50.createElement(StylesField, { bind: "flex-grow", propDisplayName: FLEX_SIZE_LABEL }, /* @__PURE__ */ React50.createElement(StylesFieldLayout, { label: (0, import_i18n27.__)("Grow", "elementor") }, /* @__PURE__ */ React50.createElement(import_editor_controls22.NumberControl, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React50.createElement(StylesField, { bind: "flex-shrink", propDisplayName: FLEX_SIZE_LABEL }, /* @__PURE__ */ React50.createElement(StylesFieldLayout, { label: (0, import_i18n27.__)("Shrink", "elementor") }, /* @__PURE__ */ React50.createElement(import_editor_controls22.NumberControl, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React50.createElement(StylesField, { bind: "flex-basis", propDisplayName: FLEX_SIZE_LABEL }, /* @__PURE__ */ React50.createElement(StylesFieldLayout, { label: (0, import_i18n27.__)("Basis", "elementor"), ref: flexBasisRowRef }, /* @__PURE__ */ React50.createElement(import_editor_controls22.SizeControl, { extendedOptions: ["auto"], anchorRef: flexBasisRowRef }))));
3316
3380
  };
3317
3381
  var getActiveGroup = ({
3318
3382
  grow,
@@ -3337,8 +3401,8 @@ var getActiveGroup = ({
3337
3401
  // src/components/style-sections/layout-section/gap-control-field.tsx
3338
3402
  var React51 = __toESM(require("react"));
3339
3403
  var import_editor_controls23 = require("@elementor/editor-controls");
3340
- var import_i18n27 = require("@wordpress/i18n");
3341
- var GAPS_LABEL = (0, import_i18n27.__)("Gaps", "elementor");
3404
+ var import_i18n28 = require("@wordpress/i18n");
3405
+ var GAPS_LABEL = (0, import_i18n28.__)("Gaps", "elementor");
3342
3406
  var GapControlField = () => {
3343
3407
  return /* @__PURE__ */ React51.createElement(StylesField, { bind: "gap", propDisplayName: GAPS_LABEL }, /* @__PURE__ */ React51.createElement(import_editor_controls23.GapControl, { label: GAPS_LABEL }));
3344
3408
  };
@@ -3348,8 +3412,8 @@ var React52 = __toESM(require("react"));
3348
3412
  var import_editor_controls24 = require("@elementor/editor-controls");
3349
3413
  var import_icons15 = require("@elementor/icons");
3350
3414
  var import_ui38 = require("@elementor/ui");
3351
- var import_i18n28 = require("@wordpress/i18n");
3352
- var JUSTIFY_CONTENT_LABEL = (0, import_i18n28.__)("Justify content", "elementor");
3415
+ var import_i18n29 = require("@wordpress/i18n");
3416
+ var JUSTIFY_CONTENT_LABEL = (0, import_i18n29.__)("Justify content", "elementor");
3353
3417
  var StartIcon4 = (0, import_ui38.withDirection)(import_icons15.JustifyTopIcon);
3354
3418
  var EndIcon4 = (0, import_ui38.withDirection)(import_icons15.JustifyBottomIcon);
3355
3419
  var iconProps4 = {
@@ -3359,37 +3423,37 @@ var iconProps4 = {
3359
3423
  var options4 = [
3360
3424
  {
3361
3425
  value: "flex-start",
3362
- label: (0, import_i18n28.__)("Start", "elementor"),
3426
+ label: (0, import_i18n29.__)("Start", "elementor"),
3363
3427
  renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(RotatedIcon, { icon: StartIcon4, size, ...iconProps4 }),
3364
3428
  showTooltip: true
3365
3429
  },
3366
3430
  {
3367
3431
  value: "center",
3368
- label: (0, import_i18n28.__)("Center", "elementor"),
3432
+ label: (0, import_i18n29.__)("Center", "elementor"),
3369
3433
  renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(RotatedIcon, { icon: import_icons15.JustifyCenterIcon, size, ...iconProps4 }),
3370
3434
  showTooltip: true
3371
3435
  },
3372
3436
  {
3373
3437
  value: "flex-end",
3374
- label: (0, import_i18n28.__)("End", "elementor"),
3438
+ label: (0, import_i18n29.__)("End", "elementor"),
3375
3439
  renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(RotatedIcon, { icon: EndIcon4, size, ...iconProps4 }),
3376
3440
  showTooltip: true
3377
3441
  },
3378
3442
  {
3379
3443
  value: "space-between",
3380
- label: (0, import_i18n28.__)("Space between", "elementor"),
3444
+ label: (0, import_i18n29.__)("Space between", "elementor"),
3381
3445
  renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(RotatedIcon, { icon: import_icons15.JustifySpaceBetweenVerticalIcon, size, ...iconProps4 }),
3382
3446
  showTooltip: true
3383
3447
  },
3384
3448
  {
3385
3449
  value: "space-around",
3386
- label: (0, import_i18n28.__)("Space around", "elementor"),
3450
+ label: (0, import_i18n29.__)("Space around", "elementor"),
3387
3451
  renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(RotatedIcon, { icon: import_icons15.JustifySpaceAroundVerticalIcon, size, ...iconProps4 }),
3388
3452
  showTooltip: true
3389
3453
  },
3390
3454
  {
3391
3455
  value: "space-evenly",
3392
- label: (0, import_i18n28.__)("Space evenly", "elementor"),
3456
+ label: (0, import_i18n29.__)("Space evenly", "elementor"),
3393
3457
  renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(RotatedIcon, { icon: import_icons15.JustifyDistributeVerticalIcon, size, ...iconProps4 }),
3394
3458
  showTooltip: true
3395
3459
  }
@@ -3400,24 +3464,24 @@ var JustifyContentField = () => /* @__PURE__ */ React52.createElement(StylesFiel
3400
3464
  var React53 = __toESM(require("react"));
3401
3465
  var import_editor_controls25 = require("@elementor/editor-controls");
3402
3466
  var import_icons16 = require("@elementor/icons");
3403
- var import_i18n29 = require("@wordpress/i18n");
3404
- var FLEX_WRAP_LABEL = (0, import_i18n29.__)("Wrap", "elementor");
3467
+ var import_i18n30 = require("@wordpress/i18n");
3468
+ var FLEX_WRAP_LABEL = (0, import_i18n30.__)("Wrap", "elementor");
3405
3469
  var options5 = [
3406
3470
  {
3407
3471
  value: "nowrap",
3408
- label: (0, import_i18n29.__)("No wrap", "elementor"),
3472
+ label: (0, import_i18n30.__)("No wrap", "elementor"),
3409
3473
  renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(import_icons16.ArrowRightIcon, { fontSize: size }),
3410
3474
  showTooltip: true
3411
3475
  },
3412
3476
  {
3413
3477
  value: "wrap",
3414
- label: (0, import_i18n29.__)("Wrap", "elementor"),
3478
+ label: (0, import_i18n30.__)("Wrap", "elementor"),
3415
3479
  renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(import_icons16.ArrowBackIcon, { fontSize: size }),
3416
3480
  showTooltip: true
3417
3481
  },
3418
3482
  {
3419
3483
  value: "wrap-reverse",
3420
- label: (0, import_i18n29.__)("Reversed wrap", "elementor"),
3484
+ label: (0, import_i18n30.__)("Reversed wrap", "elementor"),
3421
3485
  renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(import_icons16.ArrowForwardIcon, { fontSize: size }),
3422
3486
  showTooltip: true
3423
3487
  }
@@ -3427,8 +3491,12 @@ var WrapField = () => {
3427
3491
  };
3428
3492
 
3429
3493
  // src/components/style-sections/layout-section/layout-section.tsx
3494
+ var DISPLAY_LABEL2 = (0, import_i18n31.__)("Display", "elementor");
3495
+ var FLEX_WRAP_LABEL2 = (0, import_i18n31.__)("Flex wrap", "elementor");
3430
3496
  var LayoutSection = () => {
3431
- const { value: display } = useStylesField("display");
3497
+ const { value: display } = useStylesField("display", {
3498
+ history: { propDisplayName: DISPLAY_LABEL2 }
3499
+ });
3432
3500
  const displayPlaceholder = useDisplayPlaceholderValue();
3433
3501
  const isDisplayFlex = shouldDisplayFlexFields(display, displayPlaceholder);
3434
3502
  const { element } = useElement();
@@ -3438,10 +3506,12 @@ var LayoutSection = () => {
3438
3506
  return /* @__PURE__ */ React54.createElement(SectionContent, null, /* @__PURE__ */ React54.createElement(DisplayField, null), isDisplayFlex && /* @__PURE__ */ React54.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React54.createElement(FlexChildFields, { parentStyleDirection }));
3439
3507
  };
3440
3508
  var FlexFields = () => {
3441
- const { value: flexWrap } = useStylesField("flex-wrap");
3509
+ const { value: flexWrap } = useStylesField("flex-wrap", {
3510
+ history: { propDisplayName: FLEX_WRAP_LABEL2 }
3511
+ });
3442
3512
  return /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(FlexDirectionField, null), /* @__PURE__ */ React54.createElement(JustifyContentField, null), /* @__PURE__ */ React54.createElement(AlignItemsField, null), /* @__PURE__ */ React54.createElement(PanelDivider, null), /* @__PURE__ */ React54.createElement(GapControlField, null), /* @__PURE__ */ React54.createElement(WrapField, null), ["wrap", "wrap-reverse"].includes(flexWrap?.value) && /* @__PURE__ */ React54.createElement(AlignContentField, null));
3443
3513
  };
3444
- var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(PanelDivider, null), /* @__PURE__ */ React54.createElement(import_editor_controls26.ControlFormLabel, null, (0, import_i18n30.__)("Flex child", "elementor")), /* @__PURE__ */ React54.createElement(AlignSelfChild, { parentStyleDirection }), /* @__PURE__ */ React54.createElement(FlexOrderField, null), /* @__PURE__ */ React54.createElement(FlexSizeField, null));
3514
+ var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(PanelDivider, null), /* @__PURE__ */ React54.createElement(import_editor_controls26.ControlFormLabel, null, (0, import_i18n31.__)("Flex child", "elementor")), /* @__PURE__ */ React54.createElement(AlignSelfChild, { parentStyleDirection }), /* @__PURE__ */ React54.createElement(FlexOrderField, null), /* @__PURE__ */ React54.createElement(FlexSizeField, null));
3445
3515
  var shouldDisplayFlexFields = (display, local) => {
3446
3516
  const value = display?.value ?? local?.value;
3447
3517
  if (!value) {
@@ -3454,6 +3524,7 @@ var shouldDisplayFlexFields = (display, local) => {
3454
3524
  var React59 = __toESM(require("react"));
3455
3525
  var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
3456
3526
  var import_session3 = require("@elementor/session");
3527
+ var import_i18n36 = require("@wordpress/i18n");
3457
3528
 
3458
3529
  // src/components/style-sections/position-section/dimensions-field.tsx
3459
3530
  var React55 = __toESM(require("react"));
@@ -3461,7 +3532,7 @@ var import_react28 = require("react");
3461
3532
  var import_editor_controls27 = require("@elementor/editor-controls");
3462
3533
  var import_icons17 = require("@elementor/icons");
3463
3534
  var import_ui39 = require("@elementor/ui");
3464
- var import_i18n31 = require("@wordpress/i18n");
3535
+ var import_i18n32 = require("@wordpress/i18n");
3465
3536
  var InlineStartIcon2 = (0, import_ui39.withDirection)(import_icons17.SideLeftIcon);
3466
3537
  var InlineEndIcon2 = (0, import_ui39.withDirection)(import_icons17.SideRightIcon);
3467
3538
  var sideIcons = {
@@ -3470,19 +3541,19 @@ var sideIcons = {
3470
3541
  "inset-inline-start": /* @__PURE__ */ React55.createElement(RotatedIcon, { icon: InlineStartIcon2, size: "tiny" }),
3471
3542
  "inset-inline-end": /* @__PURE__ */ React55.createElement(RotatedIcon, { icon: InlineEndIcon2, size: "tiny" })
3472
3543
  };
3473
- var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n31.__)("Right", "elementor") : (0, import_i18n31.__)("Left", "elementor");
3474
- var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n31.__)("Left", "elementor") : (0, import_i18n31.__)("Right", "elementor");
3544
+ var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n32.__)("Right", "elementor") : (0, import_i18n32.__)("Left", "elementor");
3545
+ var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n32.__)("Left", "elementor") : (0, import_i18n32.__)("Right", "elementor");
3475
3546
  var DimensionsField = () => {
3476
3547
  const { isSiteRtl } = useDirection();
3477
3548
  const rowRefs = [(0, import_react28.useRef)(null), (0, import_react28.useRef)(null)];
3478
- return /* @__PURE__ */ React55.createElement(UiProviders, null, /* @__PURE__ */ React55.createElement(import_ui39.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React55.createElement(DimensionField, { side: "inset-block-start", label: (0, import_i18n31.__)("Top", "elementor"), rowRef: rowRefs[0] }), /* @__PURE__ */ React55.createElement(
3549
+ return /* @__PURE__ */ React55.createElement(UiProviders, null, /* @__PURE__ */ React55.createElement(import_ui39.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React55.createElement(DimensionField, { side: "inset-block-start", label: (0, import_i18n32.__)("Top", "elementor"), rowRef: rowRefs[0] }), /* @__PURE__ */ React55.createElement(
3479
3550
  DimensionField,
3480
3551
  {
3481
3552
  side: "inset-inline-end",
3482
3553
  label: getInlineEndLabel(isSiteRtl),
3483
3554
  rowRef: rowRefs[0]
3484
3555
  }
3485
- )), /* @__PURE__ */ React55.createElement(import_ui39.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[1] }, /* @__PURE__ */ React55.createElement(DimensionField, { side: "inset-block-end", label: (0, import_i18n31.__)("Bottom", "elementor"), rowRef: rowRefs[1] }), /* @__PURE__ */ React55.createElement(
3556
+ )), /* @__PURE__ */ React55.createElement(import_ui39.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[1] }, /* @__PURE__ */ React55.createElement(DimensionField, { side: "inset-block-end", label: (0, import_i18n32.__)("Bottom", "elementor"), rowRef: rowRefs[1] }), /* @__PURE__ */ React55.createElement(
3486
3557
  DimensionField,
3487
3558
  {
3488
3559
  side: "inset-inline-start",
@@ -3501,8 +3572,8 @@ var DimensionField = ({
3501
3572
  var React56 = __toESM(require("react"));
3502
3573
  var import_react29 = require("react");
3503
3574
  var import_editor_controls28 = require("@elementor/editor-controls");
3504
- var import_i18n32 = require("@wordpress/i18n");
3505
- var OFFSET_LABEL = (0, import_i18n32.__)("Anchor offset", "elementor");
3575
+ var import_i18n33 = require("@wordpress/i18n");
3576
+ var OFFSET_LABEL = (0, import_i18n33.__)("Anchor offset", "elementor");
3506
3577
  var UNITS = ["px", "em", "rem", "vw", "vh"];
3507
3578
  var OffsetField = () => {
3508
3579
  const rowRef = (0, import_react29.useRef)(null);
@@ -3512,14 +3583,14 @@ var OffsetField = () => {
3512
3583
  // src/components/style-sections/position-section/position-field.tsx
3513
3584
  var React57 = __toESM(require("react"));
3514
3585
  var import_editor_controls29 = require("@elementor/editor-controls");
3515
- var import_i18n33 = require("@wordpress/i18n");
3516
- var POSITION_LABEL = (0, import_i18n33.__)("Position", "elementor");
3586
+ var import_i18n34 = require("@wordpress/i18n");
3587
+ var POSITION_LABEL = (0, import_i18n34.__)("Position", "elementor");
3517
3588
  var positionOptions = [
3518
- { label: (0, import_i18n33.__)("Static", "elementor"), value: "static" },
3519
- { label: (0, import_i18n33.__)("Relative", "elementor"), value: "relative" },
3520
- { label: (0, import_i18n33.__)("Absolute", "elementor"), value: "absolute" },
3521
- { label: (0, import_i18n33.__)("Fixed", "elementor"), value: "fixed" },
3522
- { label: (0, import_i18n33.__)("Sticky", "elementor"), value: "sticky" }
3589
+ { label: (0, import_i18n34.__)("Static", "elementor"), value: "static" },
3590
+ { label: (0, import_i18n34.__)("Relative", "elementor"), value: "relative" },
3591
+ { label: (0, import_i18n34.__)("Absolute", "elementor"), value: "absolute" },
3592
+ { label: (0, import_i18n34.__)("Fixed", "elementor"), value: "fixed" },
3593
+ { label: (0, import_i18n34.__)("Sticky", "elementor"), value: "sticky" }
3523
3594
  ];
3524
3595
  var PositionField = ({ onChange }) => {
3525
3596
  return /* @__PURE__ */ React57.createElement(StylesField, { bind: "position", propDisplayName: POSITION_LABEL }, /* @__PURE__ */ React57.createElement(StylesFieldLayout, { label: POSITION_LABEL }, /* @__PURE__ */ React57.createElement(import_editor_controls29.SelectControl, { options: positionOptions, onChange })));
@@ -3528,15 +3599,19 @@ var PositionField = ({ onChange }) => {
3528
3599
  // src/components/style-sections/position-section/z-index-field.tsx
3529
3600
  var React58 = __toESM(require("react"));
3530
3601
  var import_editor_controls30 = require("@elementor/editor-controls");
3531
- var import_i18n34 = require("@wordpress/i18n");
3532
- var Z_INDEX_LABEL = (0, import_i18n34.__)("Z-index", "elementor");
3602
+ var import_i18n35 = require("@wordpress/i18n");
3603
+ var Z_INDEX_LABEL = (0, import_i18n35.__)("Z-index", "elementor");
3533
3604
  var ZIndexField = () => {
3534
3605
  return /* @__PURE__ */ React58.createElement(StylesField, { bind: "z-index", propDisplayName: Z_INDEX_LABEL }, /* @__PURE__ */ React58.createElement(StylesFieldLayout, { label: Z_INDEX_LABEL }, /* @__PURE__ */ React58.createElement(import_editor_controls30.NumberControl, null)));
3535
3606
  };
3536
3607
 
3537
3608
  // src/components/style-sections/position-section/position-section.tsx
3609
+ var POSITION_LABEL2 = (0, import_i18n36.__)("Position", "elementor");
3610
+ var DIMENSIONS_LABEL = (0, import_i18n36.__)("Dimensions", "elementor");
3538
3611
  var PositionSection = () => {
3539
- const { value: positionValue } = useStylesField("position");
3612
+ const { value: positionValue } = useStylesField("position", {
3613
+ history: { propDisplayName: POSITION_LABEL2 }
3614
+ });
3540
3615
  const { values: dimensions, setValues: setDimensions } = useStylesFields([
3541
3616
  "inset-block-start",
3542
3617
  "inset-block-end",
@@ -3546,19 +3621,23 @@ var PositionSection = () => {
3546
3621
  const [dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory] = usePersistDimensions();
3547
3622
  const isCssIdFeatureActive = (0, import_editor_v1_adapters13.isExperimentActive)("e_v_3_30");
3548
3623
  const onPositionChange = (newPosition, previousPosition) => {
3624
+ const meta = { history: { propDisplayName: DIMENSIONS_LABEL } };
3549
3625
  if (newPosition === "static") {
3550
3626
  if (dimensions) {
3551
3627
  updateDimensionsHistory(dimensions);
3552
- setDimensions({
3553
- "inset-block-start": void 0,
3554
- "inset-block-end": void 0,
3555
- "inset-inline-start": void 0,
3556
- "inset-inline-end": void 0
3557
- });
3628
+ setDimensions(
3629
+ {
3630
+ "inset-block-start": void 0,
3631
+ "inset-block-end": void 0,
3632
+ "inset-inline-start": void 0,
3633
+ "inset-inline-end": void 0
3634
+ },
3635
+ meta
3636
+ );
3558
3637
  }
3559
3638
  } else if (previousPosition === "static") {
3560
3639
  if (dimensionsValuesFromHistory) {
3561
- setDimensions(dimensionsValuesFromHistory);
3640
+ setDimensions(dimensionsValuesFromHistory, meta);
3562
3641
  clearDimensionsHistory();
3563
3642
  }
3564
3643
  }
@@ -3579,7 +3658,7 @@ var import_react30 = require("react");
3579
3658
  var import_editor_controls34 = require("@elementor/editor-controls");
3580
3659
  var import_editor_v1_adapters15 = require("@elementor/editor-v1-adapters");
3581
3660
  var import_ui41 = require("@elementor/ui");
3582
- var import_i18n39 = require("@wordpress/i18n");
3661
+ var import_i18n41 = require("@wordpress/i18n");
3583
3662
 
3584
3663
  // src/components/style-tab-collapsible-content.tsx
3585
3664
  var React61 = __toESM(require("react"));
@@ -3587,9 +3666,9 @@ var import_editor_v1_adapters14 = require("@elementor/editor-v1-adapters");
3587
3666
 
3588
3667
  // src/styles-inheritance/components/styles-inheritance-section-indicators.tsx
3589
3668
  var React60 = __toESM(require("react"));
3590
- var import_editor_styles_repository12 = require("@elementor/editor-styles-repository");
3669
+ var import_editor_styles_repository13 = require("@elementor/editor-styles-repository");
3591
3670
  var import_ui40 = require("@elementor/ui");
3592
- var import_i18n35 = require("@wordpress/i18n");
3671
+ var import_i18n37 = require("@wordpress/i18n");
3593
3672
  var StylesInheritanceSectionIndicators = ({ fields }) => {
3594
3673
  const { id, meta, provider } = useStyle();
3595
3674
  const snapshot = useStylesInheritanceSnapshot();
@@ -3600,13 +3679,13 @@ var StylesInheritanceSectionIndicators = ({ fields }) => {
3600
3679
  if (!hasValues && !hasOverrides) {
3601
3680
  return null;
3602
3681
  }
3603
- const hasValueLabel = (0, import_i18n35.__)("Has effective styles", "elementor");
3604
- const hasOverridesLabel = (0, import_i18n35.__)("Has overridden styles", "elementor");
3605
- return /* @__PURE__ */ React60.createElement(import_ui40.Tooltip, { title: (0, import_i18n35.__)("Has styles", "elementor"), placement: "top" }, /* @__PURE__ */ React60.createElement(import_ui40.Stack, { direction: "row", sx: { "& > *": { marginInlineStart: -0.25 } }, role: "list" }, hasValues && provider && /* @__PURE__ */ React60.createElement(
3682
+ const hasValueLabel = (0, import_i18n37.__)("Has effective styles", "elementor");
3683
+ const hasOverridesLabel = (0, import_i18n37.__)("Has overridden styles", "elementor");
3684
+ return /* @__PURE__ */ React60.createElement(import_ui40.Tooltip, { title: (0, import_i18n37.__)("Has styles", "elementor"), placement: "top" }, /* @__PURE__ */ React60.createElement(import_ui40.Stack, { direction: "row", sx: { "& > *": { marginInlineStart: -0.25 } }, role: "list" }, hasValues && provider && /* @__PURE__ */ React60.createElement(
3606
3685
  StyleIndicator,
3607
3686
  {
3608
3687
  getColor: getStylesProviderThemeColor(provider.getKey()),
3609
- "data-variant": (0, import_editor_styles_repository12.isElementsStylesProvider)(provider.getKey()) ? "local" : "global",
3688
+ "data-variant": (0, import_editor_styles_repository13.isElementsStylesProvider)(provider.getKey()) ? "local" : "global",
3610
3689
  role: "listitem",
3611
3690
  "aria-label": hasValueLabel
3612
3691
  }
@@ -3663,14 +3742,14 @@ function getStylesInheritanceIndicators(fields) {
3663
3742
  // src/components/style-sections/size-section/object-fit-field.tsx
3664
3743
  var React62 = __toESM(require("react"));
3665
3744
  var import_editor_controls31 = require("@elementor/editor-controls");
3666
- var import_i18n36 = require("@wordpress/i18n");
3667
- var OBJECT_FIT_LABEL = (0, import_i18n36.__)("Object fit", "elementor");
3745
+ var import_i18n38 = require("@wordpress/i18n");
3746
+ var OBJECT_FIT_LABEL = (0, import_i18n38.__)("Object fit", "elementor");
3668
3747
  var positionOptions2 = [
3669
- { label: (0, import_i18n36.__)("Fill", "elementor"), value: "fill" },
3670
- { label: (0, import_i18n36.__)("Cover", "elementor"), value: "cover" },
3671
- { label: (0, import_i18n36.__)("Contain", "elementor"), value: "contain" },
3672
- { label: (0, import_i18n36.__)("None", "elementor"), value: "none" },
3673
- { label: (0, import_i18n36.__)("Scale down", "elementor"), value: "scale-down" }
3748
+ { label: (0, import_i18n38.__)("Fill", "elementor"), value: "fill" },
3749
+ { label: (0, import_i18n38.__)("Cover", "elementor"), value: "cover" },
3750
+ { label: (0, import_i18n38.__)("Contain", "elementor"), value: "contain" },
3751
+ { label: (0, import_i18n38.__)("None", "elementor"), value: "none" },
3752
+ { label: (0, import_i18n38.__)("Scale down", "elementor"), value: "scale-down" }
3674
3753
  ];
3675
3754
  var ObjectFitField = () => {
3676
3755
  return /* @__PURE__ */ React62.createElement(StylesField, { bind: "object-fit", propDisplayName: OBJECT_FIT_LABEL }, /* @__PURE__ */ React62.createElement(StylesFieldLayout, { label: OBJECT_FIT_LABEL }, /* @__PURE__ */ React62.createElement(import_editor_controls31.SelectControl, { options: positionOptions2 })));
@@ -3679,8 +3758,8 @@ var ObjectFitField = () => {
3679
3758
  // src/components/style-sections/size-section/object-position-field.tsx
3680
3759
  var React63 = __toESM(require("react"));
3681
3760
  var import_editor_controls32 = require("@elementor/editor-controls");
3682
- var import_i18n37 = require("@wordpress/i18n");
3683
- var OBJECT_POSITION_LABEL = (0, import_i18n37.__)("Object position", "elementor");
3761
+ var import_i18n39 = require("@wordpress/i18n");
3762
+ var OBJECT_POSITION_LABEL = (0, import_i18n39.__)("Object position", "elementor");
3684
3763
  var ObjectPositionField = () => {
3685
3764
  return /* @__PURE__ */ React63.createElement(StylesField, { bind: "object-position", propDisplayName: OBJECT_POSITION_LABEL }, /* @__PURE__ */ React63.createElement(import_editor_controls32.PositionControl, null));
3686
3765
  };
@@ -3689,24 +3768,24 @@ var ObjectPositionField = () => {
3689
3768
  var React64 = __toESM(require("react"));
3690
3769
  var import_editor_controls33 = require("@elementor/editor-controls");
3691
3770
  var import_icons18 = require("@elementor/icons");
3692
- var import_i18n38 = require("@wordpress/i18n");
3693
- var OVERFLOW_LABEL = (0, import_i18n38.__)("Overflow", "elementor");
3771
+ var import_i18n40 = require("@wordpress/i18n");
3772
+ var OVERFLOW_LABEL = (0, import_i18n40.__)("Overflow", "elementor");
3694
3773
  var options6 = [
3695
3774
  {
3696
3775
  value: "visible",
3697
- label: (0, import_i18n38.__)("Visible", "elementor"),
3776
+ label: (0, import_i18n40.__)("Visible", "elementor"),
3698
3777
  renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons18.EyeIcon, { fontSize: size }),
3699
3778
  showTooltip: true
3700
3779
  },
3701
3780
  {
3702
3781
  value: "hidden",
3703
- label: (0, import_i18n38.__)("Hidden", "elementor"),
3782
+ label: (0, import_i18n40.__)("Hidden", "elementor"),
3704
3783
  renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons18.EyeOffIcon, { fontSize: size }),
3705
3784
  showTooltip: true
3706
3785
  },
3707
3786
  {
3708
3787
  value: "auto",
3709
- label: (0, import_i18n38.__)("Auto", "elementor"),
3788
+ label: (0, import_i18n40.__)("Auto", "elementor"),
3710
3789
  renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons18.LetterAIcon, { fontSize: size }),
3711
3790
  showTooltip: true
3712
3791
  }
@@ -3721,37 +3800,40 @@ var CssSizeProps = [
3721
3800
  [
3722
3801
  {
3723
3802
  bind: "width",
3724
- label: (0, import_i18n39.__)("Width", "elementor")
3803
+ label: (0, import_i18n41.__)("Width", "elementor")
3725
3804
  },
3726
3805
  {
3727
3806
  bind: "height",
3728
- label: (0, import_i18n39.__)("Height", "elementor")
3807
+ label: (0, import_i18n41.__)("Height", "elementor")
3729
3808
  }
3730
3809
  ],
3731
3810
  [
3732
3811
  {
3733
3812
  bind: "min-width",
3734
- label: (0, import_i18n39.__)("Min width", "elementor")
3813
+ label: (0, import_i18n41.__)("Min width", "elementor")
3735
3814
  },
3736
3815
  {
3737
3816
  bind: "min-height",
3738
- label: (0, import_i18n39.__)("Min height", "elementor")
3817
+ label: (0, import_i18n41.__)("Min height", "elementor")
3739
3818
  }
3740
3819
  ],
3741
3820
  [
3742
3821
  {
3743
3822
  bind: "max-width",
3744
- label: (0, import_i18n39.__)("Max width", "elementor")
3823
+ label: (0, import_i18n41.__)("Max width", "elementor")
3745
3824
  },
3746
3825
  {
3747
3826
  bind: "max-height",
3748
- label: (0, import_i18n39.__)("Max height", "elementor")
3827
+ label: (0, import_i18n41.__)("Max height", "elementor")
3749
3828
  }
3750
3829
  ]
3751
3830
  ];
3752
- var ASPECT_RATIO_LABEL = (0, import_i18n39.__)("Aspect Ratio", "elementor");
3831
+ var ASPECT_RATIO_LABEL = (0, import_i18n41.__)("Aspect Ratio", "elementor");
3832
+ var OBJECT_FIT_LABEL2 = (0, import_i18n41.__)("Object fit", "elementor");
3753
3833
  var SizeSection = () => {
3754
- const { value: fitValue } = useStylesField("object-fit");
3834
+ const { value: fitValue } = useStylesField("object-fit", {
3835
+ history: { propDisplayName: OBJECT_FIT_LABEL2 }
3836
+ });
3755
3837
  const isNotFill = fitValue && fitValue?.value !== "fill";
3756
3838
  const gridRowRefs = [(0, import_react30.useRef)(null), (0, import_react30.useRef)(null), (0, import_react30.useRef)(null)];
3757
3839
  const isVersion330Active = (0, import_editor_v1_adapters15.isExperimentActive)(EXPERIMENT_ID);
@@ -3764,9 +3846,9 @@ var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
3764
3846
  // src/components/style-sections/spacing-section/spacing-section.tsx
3765
3847
  var React66 = __toESM(require("react"));
3766
3848
  var import_editor_controls35 = require("@elementor/editor-controls");
3767
- var import_i18n40 = require("@wordpress/i18n");
3768
- var MARGIN_LABEL = (0, import_i18n40.__)("Margin", "elementor");
3769
- var PADDING_LABEL = (0, import_i18n40.__)("Padding", "elementor");
3849
+ var import_i18n42 = require("@wordpress/i18n");
3850
+ var MARGIN_LABEL = (0, import_i18n42.__)("Margin", "elementor");
3851
+ var PADDING_LABEL = (0, import_i18n42.__)("Padding", "elementor");
3770
3852
  var SpacingSection = () => {
3771
3853
  const { isSiteRtl } = useDirection();
3772
3854
  return /* @__PURE__ */ React66.createElement(SectionContent, null, /* @__PURE__ */ React66.createElement(StylesField, { bind: "margin", propDisplayName: MARGIN_LABEL }, /* @__PURE__ */ React66.createElement(
@@ -3782,12 +3864,13 @@ var SpacingSection = () => {
3782
3864
  // src/components/style-sections/typography-section/typography-section.tsx
3783
3865
  var React82 = __toESM(require("react"));
3784
3866
  var import_editor_v1_adapters16 = require("@elementor/editor-v1-adapters");
3867
+ var import_i18n59 = require("@wordpress/i18n");
3785
3868
 
3786
3869
  // src/components/style-sections/typography-section/column-count-field.tsx
3787
3870
  var React67 = __toESM(require("react"));
3788
3871
  var import_editor_controls36 = require("@elementor/editor-controls");
3789
- var import_i18n41 = require("@wordpress/i18n");
3790
- var COLUMN_COUNT_LABEL = (0, import_i18n41.__)("Columns", "elementor");
3872
+ var import_i18n43 = require("@wordpress/i18n");
3873
+ var COLUMN_COUNT_LABEL = (0, import_i18n43.__)("Columns", "elementor");
3791
3874
  var ColumnCountField = () => {
3792
3875
  return /* @__PURE__ */ React67.createElement(StylesField, { bind: "column-count", propDisplayName: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React67.createElement(StylesFieldLayout, { label: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React67.createElement(import_editor_controls36.NumberControl, { shouldForceInt: true, min: 0, step: 1 })));
3793
3876
  };
@@ -3796,8 +3879,8 @@ var ColumnCountField = () => {
3796
3879
  var React68 = __toESM(require("react"));
3797
3880
  var import_react31 = require("react");
3798
3881
  var import_editor_controls37 = require("@elementor/editor-controls");
3799
- var import_i18n42 = require("@wordpress/i18n");
3800
- var COLUMN_GAP_LABEL = (0, import_i18n42.__)("Column gap", "elementor");
3882
+ var import_i18n44 = require("@wordpress/i18n");
3883
+ var COLUMN_GAP_LABEL = (0, import_i18n44.__)("Column gap", "elementor");
3801
3884
  var ColumnGapField = () => {
3802
3885
  const rowRef = (0, import_react31.useRef)(null);
3803
3886
  return /* @__PURE__ */ React68.createElement(StylesField, { bind: "column-gap", propDisplayName: COLUMN_GAP_LABEL }, /* @__PURE__ */ React68.createElement(StylesFieldLayout, { label: COLUMN_GAP_LABEL, ref: rowRef }, /* @__PURE__ */ React68.createElement(import_editor_controls37.SizeControl, { anchorRef: rowRef })));
@@ -3806,15 +3889,15 @@ var ColumnGapField = () => {
3806
3889
  // src/components/style-sections/typography-section/font-family-field.tsx
3807
3890
  var React69 = __toESM(require("react"));
3808
3891
  var import_editor_controls38 = require("@elementor/editor-controls");
3809
- var import_i18n44 = require("@wordpress/i18n");
3892
+ var import_i18n46 = require("@wordpress/i18n");
3810
3893
 
3811
3894
  // src/components/style-sections/typography-section/hooks/use-font-families.ts
3812
3895
  var import_react32 = require("react");
3813
- var import_i18n43 = require("@wordpress/i18n");
3896
+ var import_i18n45 = require("@wordpress/i18n");
3814
3897
  var supportedCategories = {
3815
- system: (0, import_i18n43.__)("System", "elementor"),
3816
- custom: (0, import_i18n43.__)("Custom Fonts", "elementor"),
3817
- googlefonts: (0, import_i18n43.__)("Google Fonts", "elementor")
3898
+ system: (0, import_i18n45.__)("System", "elementor"),
3899
+ custom: (0, import_i18n45.__)("Custom Fonts", "elementor"),
3900
+ googlefonts: (0, import_i18n45.__)("Google Fonts", "elementor")
3818
3901
  };
3819
3902
  var getFontFamilies = () => {
3820
3903
  const { controls } = getElementorConfig();
@@ -3846,7 +3929,7 @@ var useFontFamilies = () => {
3846
3929
  };
3847
3930
 
3848
3931
  // src/components/style-sections/typography-section/font-family-field.tsx
3849
- var FONT_FAMILY_LABEL = (0, import_i18n44.__)("Font family", "elementor");
3932
+ var FONT_FAMILY_LABEL = (0, import_i18n46.__)("Font family", "elementor");
3850
3933
  var FontFamilyField = () => {
3851
3934
  const fontFamilies = useFontFamilies();
3852
3935
  const sectionWidth = useSectionWidth();
@@ -3860,8 +3943,8 @@ var FontFamilyField = () => {
3860
3943
  var React70 = __toESM(require("react"));
3861
3944
  var import_react33 = require("react");
3862
3945
  var import_editor_controls39 = require("@elementor/editor-controls");
3863
- var import_i18n45 = require("@wordpress/i18n");
3864
- var FONT_SIZE_LABEL = (0, import_i18n45.__)("Font size", "elementor");
3946
+ var import_i18n47 = require("@wordpress/i18n");
3947
+ var FONT_SIZE_LABEL = (0, import_i18n47.__)("Font size", "elementor");
3865
3948
  var FontSizeField = () => {
3866
3949
  const rowRef = (0, import_react33.useRef)(null);
3867
3950
  return /* @__PURE__ */ React70.createElement(StylesField, { bind: "font-size", propDisplayName: FONT_SIZE_LABEL }, /* @__PURE__ */ React70.createElement(StylesFieldLayout, { label: FONT_SIZE_LABEL, ref: rowRef }, /* @__PURE__ */ React70.createElement(import_editor_controls39.SizeControl, { anchorRef: rowRef })));
@@ -3871,18 +3954,18 @@ var FontSizeField = () => {
3871
3954
  var React71 = __toESM(require("react"));
3872
3955
  var import_editor_controls40 = require("@elementor/editor-controls");
3873
3956
  var import_icons19 = require("@elementor/icons");
3874
- var import_i18n46 = require("@wordpress/i18n");
3875
- var FONT_STYLE_LABEL = (0, import_i18n46.__)("Font style", "elementor");
3957
+ var import_i18n48 = require("@wordpress/i18n");
3958
+ var FONT_STYLE_LABEL = (0, import_i18n48.__)("Font style", "elementor");
3876
3959
  var options7 = [
3877
3960
  {
3878
3961
  value: "normal",
3879
- label: (0, import_i18n46.__)("Normal", "elementor"),
3962
+ label: (0, import_i18n48.__)("Normal", "elementor"),
3880
3963
  renderContent: ({ size }) => /* @__PURE__ */ React71.createElement(import_icons19.MinusIcon, { fontSize: size }),
3881
3964
  showTooltip: true
3882
3965
  },
3883
3966
  {
3884
3967
  value: "italic",
3885
- label: (0, import_i18n46.__)("Italic", "elementor"),
3968
+ label: (0, import_i18n48.__)("Italic", "elementor"),
3886
3969
  renderContent: ({ size }) => /* @__PURE__ */ React71.createElement(import_icons19.ItalicIcon, { fontSize: size }),
3887
3970
  showTooltip: true
3888
3971
  }
@@ -3894,18 +3977,18 @@ var FontStyleField = () => {
3894
3977
  // src/components/style-sections/typography-section/font-weight-field.tsx
3895
3978
  var React72 = __toESM(require("react"));
3896
3979
  var import_editor_controls41 = require("@elementor/editor-controls");
3897
- var import_i18n47 = require("@wordpress/i18n");
3898
- var FONT_WEIGHT_LABEL = (0, import_i18n47.__)("Font weight", "elementor");
3980
+ var import_i18n49 = require("@wordpress/i18n");
3981
+ var FONT_WEIGHT_LABEL = (0, import_i18n49.__)("Font weight", "elementor");
3899
3982
  var fontWeightOptions = [
3900
- { value: "100", label: (0, import_i18n47.__)("100 - Thin", "elementor") },
3901
- { value: "200", label: (0, import_i18n47.__)("200 - Extra light", "elementor") },
3902
- { value: "300", label: (0, import_i18n47.__)("300 - Light", "elementor") },
3903
- { value: "400", label: (0, import_i18n47.__)("400 - Normal", "elementor") },
3904
- { value: "500", label: (0, import_i18n47.__)("500 - Medium", "elementor") },
3905
- { value: "600", label: (0, import_i18n47.__)("600 - Semi bold", "elementor") },
3906
- { value: "700", label: (0, import_i18n47.__)("700 - Bold", "elementor") },
3907
- { value: "800", label: (0, import_i18n47.__)("800 - Extra bold", "elementor") },
3908
- { value: "900", label: (0, import_i18n47.__)("900 - Black", "elementor") }
3983
+ { value: "100", label: (0, import_i18n49.__)("100 - Thin", "elementor") },
3984
+ { value: "200", label: (0, import_i18n49.__)("200 - Extra light", "elementor") },
3985
+ { value: "300", label: (0, import_i18n49.__)("300 - Light", "elementor") },
3986
+ { value: "400", label: (0, import_i18n49.__)("400 - Normal", "elementor") },
3987
+ { value: "500", label: (0, import_i18n49.__)("500 - Medium", "elementor") },
3988
+ { value: "600", label: (0, import_i18n49.__)("600 - Semi bold", "elementor") },
3989
+ { value: "700", label: (0, import_i18n49.__)("700 - Bold", "elementor") },
3990
+ { value: "800", label: (0, import_i18n49.__)("800 - Extra bold", "elementor") },
3991
+ { value: "900", label: (0, import_i18n49.__)("900 - Black", "elementor") }
3909
3992
  ];
3910
3993
  var FontWeightField = () => {
3911
3994
  return /* @__PURE__ */ React72.createElement(StylesField, { bind: "font-weight", propDisplayName: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React72.createElement(StylesFieldLayout, { label: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React72.createElement(import_editor_controls41.SelectControl, { options: fontWeightOptions })));
@@ -3915,8 +3998,8 @@ var FontWeightField = () => {
3915
3998
  var React73 = __toESM(require("react"));
3916
3999
  var import_react34 = require("react");
3917
4000
  var import_editor_controls42 = require("@elementor/editor-controls");
3918
- var import_i18n48 = require("@wordpress/i18n");
3919
- var LETTER_SPACING_LABEL = (0, import_i18n48.__)("Letter spacing", "elementor");
4001
+ var import_i18n50 = require("@wordpress/i18n");
4002
+ var LETTER_SPACING_LABEL = (0, import_i18n50.__)("Letter spacing", "elementor");
3920
4003
  var LetterSpacingField = () => {
3921
4004
  const rowRef = (0, import_react34.useRef)(null);
3922
4005
  return /* @__PURE__ */ React73.createElement(StylesField, { bind: "letter-spacing", propDisplayName: LETTER_SPACING_LABEL }, /* @__PURE__ */ React73.createElement(StylesFieldLayout, { label: LETTER_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React73.createElement(import_editor_controls42.SizeControl, { anchorRef: rowRef })));
@@ -3926,8 +4009,8 @@ var LetterSpacingField = () => {
3926
4009
  var React74 = __toESM(require("react"));
3927
4010
  var import_react35 = require("react");
3928
4011
  var import_editor_controls43 = require("@elementor/editor-controls");
3929
- var import_i18n49 = require("@wordpress/i18n");
3930
- var LINE_HEIGHT_LABEL = (0, import_i18n49.__)("Line height", "elementor");
4012
+ var import_i18n51 = require("@wordpress/i18n");
4013
+ var LINE_HEIGHT_LABEL = (0, import_i18n51.__)("Line height", "elementor");
3931
4014
  var LineHeightField = () => {
3932
4015
  const rowRef = (0, import_react35.useRef)(null);
3933
4016
  return /* @__PURE__ */ React74.createElement(StylesField, { bind: "line-height", propDisplayName: LINE_HEIGHT_LABEL }, /* @__PURE__ */ React74.createElement(StylesFieldLayout, { label: LINE_HEIGHT_LABEL, ref: rowRef }, /* @__PURE__ */ React74.createElement(import_editor_controls43.SizeControl, { anchorRef: rowRef })));
@@ -3938,32 +4021,32 @@ var React75 = __toESM(require("react"));
3938
4021
  var import_editor_controls44 = require("@elementor/editor-controls");
3939
4022
  var import_icons20 = require("@elementor/icons");
3940
4023
  var import_ui42 = require("@elementor/ui");
3941
- var import_i18n50 = require("@wordpress/i18n");
3942
- var TEXT_ALIGNMENT_LABEL = (0, import_i18n50.__)("Text align", "elementor");
4024
+ var import_i18n52 = require("@wordpress/i18n");
4025
+ var TEXT_ALIGNMENT_LABEL = (0, import_i18n52.__)("Text align", "elementor");
3943
4026
  var AlignStartIcon = (0, import_ui42.withDirection)(import_icons20.AlignLeftIcon);
3944
4027
  var AlignEndIcon = (0, import_ui42.withDirection)(import_icons20.AlignRightIcon);
3945
4028
  var options8 = [
3946
4029
  {
3947
4030
  value: "start",
3948
- label: (0, import_i18n50.__)("Start", "elementor"),
4031
+ label: (0, import_i18n52.__)("Start", "elementor"),
3949
4032
  renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(AlignStartIcon, { fontSize: size }),
3950
4033
  showTooltip: true
3951
4034
  },
3952
4035
  {
3953
4036
  value: "center",
3954
- label: (0, import_i18n50.__)("Center", "elementor"),
4037
+ label: (0, import_i18n52.__)("Center", "elementor"),
3955
4038
  renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(import_icons20.AlignCenterIcon, { fontSize: size }),
3956
4039
  showTooltip: true
3957
4040
  },
3958
4041
  {
3959
4042
  value: "end",
3960
- label: (0, import_i18n50.__)("End", "elementor"),
4043
+ label: (0, import_i18n52.__)("End", "elementor"),
3961
4044
  renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(AlignEndIcon, { fontSize: size }),
3962
4045
  showTooltip: true
3963
4046
  },
3964
4047
  {
3965
4048
  value: "justify",
3966
- label: (0, import_i18n50.__)("Justify", "elementor"),
4049
+ label: (0, import_i18n52.__)("Justify", "elementor"),
3967
4050
  renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(import_icons20.AlignJustifiedIcon, { fontSize: size }),
3968
4051
  showTooltip: true
3969
4052
  }
@@ -3975,8 +4058,8 @@ var TextAlignmentField = () => {
3975
4058
  // src/components/style-sections/typography-section/text-color-field.tsx
3976
4059
  var React76 = __toESM(require("react"));
3977
4060
  var import_editor_controls45 = require("@elementor/editor-controls");
3978
- var import_i18n51 = require("@wordpress/i18n");
3979
- var TEXT_COLOR_LABEL = (0, import_i18n51.__)("Text color", "elementor");
4061
+ var import_i18n53 = require("@wordpress/i18n");
4062
+ var TEXT_COLOR_LABEL = (0, import_i18n53.__)("Text color", "elementor");
3980
4063
  var TextColorField = () => {
3981
4064
  return /* @__PURE__ */ React76.createElement(StylesField, { bind: "color", propDisplayName: TEXT_COLOR_LABEL }, /* @__PURE__ */ React76.createElement(StylesFieldLayout, { label: TEXT_COLOR_LABEL }, /* @__PURE__ */ React76.createElement(import_editor_controls45.ColorControl, null)));
3982
4065
  };
@@ -3985,31 +4068,31 @@ var TextColorField = () => {
3985
4068
  var React77 = __toESM(require("react"));
3986
4069
  var import_editor_controls46 = require("@elementor/editor-controls");
3987
4070
  var import_icons21 = require("@elementor/icons");
3988
- var import_i18n52 = require("@wordpress/i18n");
3989
- var TEXT_DECORATION_LABEL = (0, import_i18n52.__)("Line decoration", "elementor");
4071
+ var import_i18n54 = require("@wordpress/i18n");
4072
+ var TEXT_DECORATION_LABEL = (0, import_i18n54.__)("Line decoration", "elementor");
3990
4073
  var options9 = [
3991
4074
  {
3992
4075
  value: "none",
3993
- label: (0, import_i18n52.__)("None", "elementor"),
4076
+ label: (0, import_i18n54.__)("None", "elementor"),
3994
4077
  renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons21.MinusIcon, { fontSize: size }),
3995
4078
  showTooltip: true,
3996
4079
  exclusive: true
3997
4080
  },
3998
4081
  {
3999
4082
  value: "underline",
4000
- label: (0, import_i18n52.__)("Underline", "elementor"),
4083
+ label: (0, import_i18n54.__)("Underline", "elementor"),
4001
4084
  renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons21.UnderlineIcon, { fontSize: size }),
4002
4085
  showTooltip: true
4003
4086
  },
4004
4087
  {
4005
4088
  value: "line-through",
4006
- label: (0, import_i18n52.__)("Line-through", "elementor"),
4089
+ label: (0, import_i18n54.__)("Line-through", "elementor"),
4007
4090
  renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons21.StrikethroughIcon, { fontSize: size }),
4008
4091
  showTooltip: true
4009
4092
  },
4010
4093
  {
4011
4094
  value: "overline",
4012
- label: (0, import_i18n52.__)("Overline", "elementor"),
4095
+ label: (0, import_i18n54.__)("Overline", "elementor"),
4013
4096
  renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons21.OverlineIcon, { fontSize: size }),
4014
4097
  showTooltip: true
4015
4098
  }
@@ -4020,18 +4103,18 @@ var TextDecorationField = () => /* @__PURE__ */ React77.createElement(StylesFiel
4020
4103
  var React78 = __toESM(require("react"));
4021
4104
  var import_editor_controls47 = require("@elementor/editor-controls");
4022
4105
  var import_icons22 = require("@elementor/icons");
4023
- var import_i18n53 = require("@wordpress/i18n");
4024
- var TEXT_DIRECTION_LABEL = (0, import_i18n53.__)("Direction", "elementor");
4106
+ var import_i18n55 = require("@wordpress/i18n");
4107
+ var TEXT_DIRECTION_LABEL = (0, import_i18n55.__)("Direction", "elementor");
4025
4108
  var options10 = [
4026
4109
  {
4027
4110
  value: "ltr",
4028
- label: (0, import_i18n53.__)("Left to right", "elementor"),
4111
+ label: (0, import_i18n55.__)("Left to right", "elementor"),
4029
4112
  renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(import_icons22.TextDirectionLtrIcon, { fontSize: size }),
4030
4113
  showTooltip: true
4031
4114
  },
4032
4115
  {
4033
4116
  value: "rtl",
4034
- label: (0, import_i18n53.__)("Right to left", "elementor"),
4117
+ label: (0, import_i18n55.__)("Right to left", "elementor"),
4035
4118
  renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(import_icons22.TextDirectionRtlIcon, { fontSize: size }),
4036
4119
  showTooltip: true
4037
4120
  }
@@ -4043,7 +4126,7 @@ var TextDirectionField = () => {
4043
4126
  // src/components/style-sections/typography-section/text-stroke-field.tsx
4044
4127
  var React79 = __toESM(require("react"));
4045
4128
  var import_editor_controls48 = require("@elementor/editor-controls");
4046
- var import_i18n54 = require("@wordpress/i18n");
4129
+ var import_i18n56 = require("@wordpress/i18n");
4047
4130
  var initTextStroke = {
4048
4131
  $$type: "stroke",
4049
4132
  value: {
@@ -4060,9 +4143,11 @@ var initTextStroke = {
4060
4143
  }
4061
4144
  }
4062
4145
  };
4063
- var TEXT_STROKE_LABEL = (0, import_i18n54.__)("Text stroke", "elementor");
4146
+ var TEXT_STROKE_LABEL = (0, import_i18n56.__)("Text stroke", "elementor");
4064
4147
  var TextStrokeField = () => {
4065
- const { value, setValue, canEdit } = useStylesField("stroke");
4148
+ const { value, setValue, canEdit } = useStylesField("stroke", {
4149
+ history: { propDisplayName: TEXT_STROKE_LABEL }
4150
+ });
4066
4151
  const addTextStroke = () => {
4067
4152
  setValue(initTextStroke);
4068
4153
  };
@@ -4087,30 +4172,30 @@ var TextStrokeField = () => {
4087
4172
  var React80 = __toESM(require("react"));
4088
4173
  var import_editor_controls49 = require("@elementor/editor-controls");
4089
4174
  var import_icons23 = require("@elementor/icons");
4090
- var import_i18n55 = require("@wordpress/i18n");
4091
- var TEXT_TRANSFORM_LABEL = (0, import_i18n55.__)("Text transform", "elementor");
4175
+ var import_i18n57 = require("@wordpress/i18n");
4176
+ var TEXT_TRANSFORM_LABEL = (0, import_i18n57.__)("Text transform", "elementor");
4092
4177
  var options11 = [
4093
4178
  {
4094
4179
  value: "none",
4095
- label: (0, import_i18n55.__)("None", "elementor"),
4180
+ label: (0, import_i18n57.__)("None", "elementor"),
4096
4181
  renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(import_icons23.MinusIcon, { fontSize: size }),
4097
4182
  showTooltip: true
4098
4183
  },
4099
4184
  {
4100
4185
  value: "capitalize",
4101
- label: (0, import_i18n55.__)("Capitalize", "elementor"),
4186
+ label: (0, import_i18n57.__)("Capitalize", "elementor"),
4102
4187
  renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(import_icons23.LetterCaseIcon, { fontSize: size }),
4103
4188
  showTooltip: true
4104
4189
  },
4105
4190
  {
4106
4191
  value: "uppercase",
4107
- label: (0, import_i18n55.__)("Uppercase", "elementor"),
4192
+ label: (0, import_i18n57.__)("Uppercase", "elementor"),
4108
4193
  renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(import_icons23.LetterCaseUpperIcon, { fontSize: size }),
4109
4194
  showTooltip: true
4110
4195
  },
4111
4196
  {
4112
4197
  value: "lowercase",
4113
- label: (0, import_i18n55.__)("Lowercase", "elementor"),
4198
+ label: (0, import_i18n57.__)("Lowercase", "elementor"),
4114
4199
  renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(import_icons23.LetterCaseLowerIcon, { fontSize: size }),
4115
4200
  showTooltip: true
4116
4201
  }
@@ -4121,16 +4206,19 @@ var TransformField = () => /* @__PURE__ */ React80.createElement(StylesField, {
4121
4206
  var React81 = __toESM(require("react"));
4122
4207
  var import_react36 = require("react");
4123
4208
  var import_editor_controls50 = require("@elementor/editor-controls");
4124
- var import_i18n56 = require("@wordpress/i18n");
4125
- var WORD_SPACING_LABEL = (0, import_i18n56.__)("Word spacing", "elementor");
4209
+ var import_i18n58 = require("@wordpress/i18n");
4210
+ var WORD_SPACING_LABEL = (0, import_i18n58.__)("Word spacing", "elementor");
4126
4211
  var WordSpacingField = () => {
4127
4212
  const rowRef = (0, import_react36.useRef)(null);
4128
4213
  return /* @__PURE__ */ React81.createElement(StylesField, { bind: "word-spacing", propDisplayName: WORD_SPACING_LABEL }, /* @__PURE__ */ React81.createElement(StylesFieldLayout, { label: WORD_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React81.createElement(import_editor_controls50.SizeControl, { anchorRef: rowRef })));
4129
4214
  };
4130
4215
 
4131
4216
  // src/components/style-sections/typography-section/typography-section.tsx
4217
+ var COLUMN_COUNT_LABEL2 = (0, import_i18n59.__)("Column count", "elementor");
4132
4218
  var TypographySection = () => {
4133
- const { value: columnCount } = useStylesField("column-count");
4219
+ const { value: columnCount } = useStylesField("column-count", {
4220
+ history: { propDisplayName: COLUMN_COUNT_LABEL2 }
4221
+ });
4134
4222
  const hasMultiColumns = !!(columnCount?.value && columnCount?.value > 1);
4135
4223
  const isVersion330Active = (0, import_editor_v1_adapters16.isExperimentActive)("e_v_3_30");
4136
4224
  return /* @__PURE__ */ React82.createElement(SectionContent, null, /* @__PURE__ */ React82.createElement(FontFamilyField, null), /* @__PURE__ */ React82.createElement(FontWeightField, null), /* @__PURE__ */ React82.createElement(FontSizeField, null), /* @__PURE__ */ React82.createElement(PanelDivider, null), /* @__PURE__ */ React82.createElement(TextAlignmentField, null), /* @__PURE__ */ React82.createElement(TextColorField, null), /* @__PURE__ */ React82.createElement(
@@ -4167,7 +4255,7 @@ var StyleTabSection = ({ section, fields = [] }) => {
4167
4255
  var TABS_HEADER_HEIGHT = "37px";
4168
4256
  var stickyHeaderStyles = {
4169
4257
  position: "sticky",
4170
- zIndex: 1,
4258
+ zIndex: 1100,
4171
4259
  opacity: 1,
4172
4260
  backgroundColor: "background.default",
4173
4261
  transition: "top 300ms ease"
@@ -4194,7 +4282,7 @@ var StyleTab = () => {
4194
4282
  section: {
4195
4283
  component: LayoutSection,
4196
4284
  name: "Layout",
4197
- title: (0, import_i18n57.__)("Layout", "elementor")
4285
+ title: (0, import_i18n60.__)("Layout", "elementor")
4198
4286
  },
4199
4287
  fields: [
4200
4288
  "display",
@@ -4213,7 +4301,7 @@ var StyleTab = () => {
4213
4301
  section: {
4214
4302
  component: SpacingSection,
4215
4303
  name: "Spacing",
4216
- title: (0, import_i18n57.__)("Spacing", "elementor")
4304
+ title: (0, import_i18n60.__)("Spacing", "elementor")
4217
4305
  },
4218
4306
  fields: ["margin", "padding"]
4219
4307
  }
@@ -4223,7 +4311,7 @@ var StyleTab = () => {
4223
4311
  section: {
4224
4312
  component: SizeSection,
4225
4313
  name: "Size",
4226
- title: (0, import_i18n57.__)("Size", "elementor")
4314
+ title: (0, import_i18n60.__)("Size", "elementor")
4227
4315
  },
4228
4316
  fields: [
4229
4317
  "width",
@@ -4243,7 +4331,7 @@ var StyleTab = () => {
4243
4331
  section: {
4244
4332
  component: PositionSection,
4245
4333
  name: "Position",
4246
- title: (0, import_i18n57.__)("Position", "elementor")
4334
+ title: (0, import_i18n60.__)("Position", "elementor")
4247
4335
  },
4248
4336
  fields: ["position", "z-index", "scroll-margin-top"]
4249
4337
  }
@@ -4253,7 +4341,7 @@ var StyleTab = () => {
4253
4341
  section: {
4254
4342
  component: TypographySection,
4255
4343
  name: "Typography",
4256
- title: (0, import_i18n57.__)("Typography", "elementor")
4344
+ title: (0, import_i18n60.__)("Typography", "elementor")
4257
4345
  },
4258
4346
  fields: [
4259
4347
  "font-family",
@@ -4278,7 +4366,7 @@ var StyleTab = () => {
4278
4366
  section: {
4279
4367
  component: BackgroundSection,
4280
4368
  name: "Background",
4281
- title: (0, import_i18n57.__)("Background", "elementor")
4369
+ title: (0, import_i18n60.__)("Background", "elementor")
4282
4370
  },
4283
4371
  fields: ["background"]
4284
4372
  }
@@ -4288,7 +4376,7 @@ var StyleTab = () => {
4288
4376
  section: {
4289
4377
  component: BorderSection,
4290
4378
  name: "Border",
4291
- title: (0, import_i18n57.__)("Border", "elementor")
4379
+ title: (0, import_i18n60.__)("Border", "elementor")
4292
4380
  },
4293
4381
  fields: ["border-radius", "border-width", "border-color", "border-style"]
4294
4382
  }
@@ -4298,7 +4386,7 @@ var StyleTab = () => {
4298
4386
  section: {
4299
4387
  component: EffectsSection,
4300
4388
  name: "Effects",
4301
- title: (0, import_i18n57.__)("Effects", "elementor")
4389
+ title: (0, import_i18n60.__)("Effects", "elementor")
4302
4390
  },
4303
4391
  fields: ["box-shadow"]
4304
4392
  }
@@ -4312,7 +4400,7 @@ function ClassesHeader({ children }) {
4312
4400
  function useCurrentClassesProp() {
4313
4401
  const { elementType } = useElement();
4314
4402
  const prop = Object.entries(elementType.propsSchema).find(
4315
- ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props10.CLASSES_PROP_KEY
4403
+ ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props11.CLASSES_PROP_KEY
4316
4404
  );
4317
4405
  if (!prop) {
4318
4406
  throw new Error("Element does not have a classes prop");
@@ -4346,8 +4434,8 @@ var PanelTabContent = () => {
4346
4434
  setCurrentTab(newValue);
4347
4435
  }
4348
4436
  },
4349
- /* @__PURE__ */ React85.createElement(import_ui44.Tab, { label: (0, import_i18n58.__)("General", "elementor"), ...getTabProps("settings") }),
4350
- /* @__PURE__ */ React85.createElement(import_ui44.Tab, { label: (0, import_i18n58.__)("Style", "elementor"), ...getTabProps("style") })
4437
+ /* @__PURE__ */ React85.createElement(import_ui44.Tab, { label: (0, import_i18n61.__)("General", "elementor"), ...getTabProps("settings") }),
4438
+ /* @__PURE__ */ React85.createElement(import_ui44.Tab, { label: (0, import_i18n61.__)("Style", "elementor"), ...getTabProps("style") })
4351
4439
  ), /* @__PURE__ */ React85.createElement(import_ui44.Divider, null)), /* @__PURE__ */ React85.createElement(import_ui44.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React85.createElement(SettingsTab, null)), /* @__PURE__ */ React85.createElement(import_ui44.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React85.createElement(StyleTab, null))));
4352
4440
  };
4353
4441
 
@@ -4360,7 +4448,7 @@ var EditingPanel = () => {
4360
4448
  if (!element || !elementType) {
4361
4449
  return null;
4362
4450
  }
4363
- const panelTitle = (0, import_i18n59.__)("Edit %s", "elementor").replace("%s", elementType.title);
4451
+ const panelTitle = (0, import_i18n62.__)("Edit %s", "elementor").replace("%s", elementType.title);
4364
4452
  return /* @__PURE__ */ React86.createElement(import_ui45.ErrorBoundary, { fallback: /* @__PURE__ */ React86.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React86.createElement(import_session5.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React86.createElement(import_editor_ui5.ThemeProvider, null, /* @__PURE__ */ React86.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React86.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React86.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React86.createElement(import_icons24.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React86.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React86.createElement(import_editor_controls51.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React86.createElement(import_editor_controls51.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React86.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React86.createElement(EditingPanelTabs, null)))))))));
4365
4453
  };
4366
4454
 
@@ -4380,7 +4468,6 @@ var PopoverScrollableContent = (props) => {
4380
4468
 
4381
4469
  // src/init.ts
4382
4470
  var import_editor = require("@elementor/editor");
4383
- var import_editor_current_user = require("@elementor/editor-current-user");
4384
4471
  var import_editor_panels3 = require("@elementor/editor-panels");
4385
4472
  var import_editor_v1_adapters20 = require("@elementor/editor-v1-adapters");
4386
4473
 
@@ -4424,7 +4511,7 @@ var import_editor_controls58 = require("@elementor/editor-controls");
4424
4511
  // src/dynamics/components/background-control-dynamic-tag.tsx
4425
4512
  var React88 = __toESM(require("react"));
4426
4513
  var import_editor_controls53 = require("@elementor/editor-controls");
4427
- var import_editor_props12 = require("@elementor/editor-props");
4514
+ var import_editor_props13 = require("@elementor/editor-props");
4428
4515
  var import_icons25 = require("@elementor/icons");
4429
4516
 
4430
4517
  // src/dynamics/hooks/use-dynamic-tag.ts
@@ -4453,7 +4540,7 @@ var getAtomicDynamicTags = () => {
4453
4540
  };
4454
4541
 
4455
4542
  // src/dynamics/utils.ts
4456
- var import_editor_props11 = require("@elementor/editor-props");
4543
+ var import_editor_props12 = require("@elementor/editor-props");
4457
4544
  var import_schema = require("@elementor/schema");
4458
4545
  var DYNAMIC_PROP_TYPE_KEY = "dynamic";
4459
4546
  var isDynamicPropType = (prop) => prop.key === DYNAMIC_PROP_TYPE_KEY;
@@ -4462,12 +4549,12 @@ var getDynamicPropType = (propType) => {
4462
4549
  return dynamicPropType && isDynamicPropType(dynamicPropType) ? dynamicPropType : null;
4463
4550
  };
4464
4551
  var isDynamicPropValue = (prop) => {
4465
- return (0, import_editor_props11.isTransformable)(prop) && prop.$$type === DYNAMIC_PROP_TYPE_KEY;
4552
+ return (0, import_editor_props12.isTransformable)(prop) && prop.$$type === DYNAMIC_PROP_TYPE_KEY;
4466
4553
  };
4467
4554
  var supportsDynamic = (propType) => {
4468
4555
  return !!getDynamicPropType(propType);
4469
4556
  };
4470
- var dynamicPropTypeUtil = (0, import_editor_props11.createPropUtils)(
4557
+ var dynamicPropTypeUtil = (0, import_editor_props12.createPropUtils)(
4471
4558
  DYNAMIC_PROP_TYPE_KEY,
4472
4559
  import_schema.z.strictObject({
4473
4560
  name: import_schema.z.string(),
@@ -4505,7 +4592,7 @@ var useDynamicTag = (tagName) => {
4505
4592
  // src/dynamics/components/background-control-dynamic-tag.tsx
4506
4593
  var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React88.createElement(import_icons25.DatabaseIcon, { fontSize: "tiny" });
4507
4594
  var BackgroundControlDynamicTagLabel = ({ value }) => {
4508
- const context = (0, import_editor_controls53.useBoundProp)(import_editor_props12.backgroundImageOverlayPropTypeUtil);
4595
+ const context = (0, import_editor_controls53.useBoundProp)(import_editor_props13.backgroundImageOverlayPropTypeUtil);
4509
4596
  return /* @__PURE__ */ React88.createElement(import_editor_controls53.PropProvider, { ...context, value: value.value }, /* @__PURE__ */ React88.createElement(import_editor_controls53.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React88.createElement(Wrapper, { rawValue: value.value })));
4510
4597
  };
4511
4598
  var Wrapper = ({ rawValue }) => {
@@ -4525,7 +4612,7 @@ var import_editor_controls56 = require("@elementor/editor-controls");
4525
4612
  var import_editor_ui8 = require("@elementor/editor-ui");
4526
4613
  var import_icons27 = require("@elementor/icons");
4527
4614
  var import_ui47 = require("@elementor/ui");
4528
- var import_i18n61 = require("@wordpress/i18n");
4615
+ var import_i18n64 = require("@wordpress/i18n");
4529
4616
 
4530
4617
  // src/hooks/use-persist-dynamic-value.ts
4531
4618
  var import_session6 = require("@elementor/session");
@@ -4568,7 +4655,7 @@ var import_editor_controls55 = require("@elementor/editor-controls");
4568
4655
  var import_editor_ui7 = require("@elementor/editor-ui");
4569
4656
  var import_icons26 = require("@elementor/icons");
4570
4657
  var import_ui46 = require("@elementor/ui");
4571
- var import_i18n60 = require("@wordpress/i18n");
4658
+ var import_i18n63 = require("@wordpress/i18n");
4572
4659
  var SIZE6 = "tiny";
4573
4660
  var DynamicSelection = ({ close: closePopover }) => {
4574
4661
  const [searchValue, setSearchValue] = (0, import_react42.useState)("");
@@ -4606,7 +4693,7 @@ var DynamicSelection = ({ close: closePopover }) => {
4606
4693
  return /* @__PURE__ */ React90.createElement(React90.Fragment, null, /* @__PURE__ */ React90.createElement(
4607
4694
  import_editor_ui7.PopoverHeader,
4608
4695
  {
4609
- title: (0, import_i18n60.__)("Dynamic tags", "elementor"),
4696
+ title: (0, import_i18n63.__)("Dynamic tags", "elementor"),
4610
4697
  onClose: closePopover,
4611
4698
  icon: /* @__PURE__ */ React90.createElement(import_icons26.DatabaseIcon, { fontSize: SIZE6 })
4612
4699
  }
@@ -4615,7 +4702,7 @@ var DynamicSelection = ({ close: closePopover }) => {
4615
4702
  {
4616
4703
  value: searchValue,
4617
4704
  onSearch: handleSearch,
4618
- placeholder: (0, import_i18n60.__)("Search dynamic tags\u2026", "elementor")
4705
+ placeholder: (0, import_i18n63.__)("Search dynamic tags\u2026", "elementor")
4619
4706
  }
4620
4707
  ), /* @__PURE__ */ React90.createElement(import_ui46.Divider, null), /* @__PURE__ */ React90.createElement(PopoverScrollableContent, null, /* @__PURE__ */ React90.createElement(
4621
4708
  import_editor_ui7.PopoverMenuList,
@@ -4641,8 +4728,8 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React90.createElem
4641
4728
  sx: { pb: 3.5 }
4642
4729
  },
4643
4730
  /* @__PURE__ */ React90.createElement(import_icons26.DatabaseIcon, { fontSize: "large" }),
4644
- /* @__PURE__ */ React90.createElement(import_ui46.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n60.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React90.createElement("br", null), "\u201C", searchValue, "\u201D."),
4645
- /* @__PURE__ */ React90.createElement(import_ui46.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n60.__)("Try something else.", "elementor"), /* @__PURE__ */ React90.createElement(import_ui46.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n60.__)("Clear & try again", "elementor")))
4731
+ /* @__PURE__ */ React90.createElement(import_ui46.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n63.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React90.createElement("br", null), "\u201C", searchValue, "\u201D."),
4732
+ /* @__PURE__ */ React90.createElement(import_ui46.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n63.__)("Try something else.", "elementor"), /* @__PURE__ */ React90.createElement(import_ui46.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n63.__)("Clear & try again", "elementor")))
4646
4733
  );
4647
4734
  var NoDynamicTags = () => /* @__PURE__ */ React90.createElement(import_ui46.Box, { sx: { overflowY: "hidden", height: 297, width: 220 } }, /* @__PURE__ */ React90.createElement(import_ui46.Divider, null), /* @__PURE__ */ React90.createElement(
4648
4735
  import_ui46.Stack,
@@ -4656,8 +4743,8 @@ var NoDynamicTags = () => /* @__PURE__ */ React90.createElement(import_ui46.Box,
4656
4743
  sx: { pb: 3.5 }
4657
4744
  },
4658
4745
  /* @__PURE__ */ React90.createElement(import_icons26.DatabaseIcon, { fontSize: "large" }),
4659
- /* @__PURE__ */ React90.createElement(import_ui46.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n60.__)("Streamline your workflow with dynamic tags", "elementor")),
4660
- /* @__PURE__ */ React90.createElement(import_ui46.Typography, { align: "center", variant: "caption" }, (0, import_i18n60.__)("You'll need Elementor Pro to use this feature.", "elementor"))
4746
+ /* @__PURE__ */ React90.createElement(import_ui46.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n63.__)("Streamline your workflow with dynamic tags", "elementor")),
4747
+ /* @__PURE__ */ React90.createElement(import_ui46.Typography, { align: "center", variant: "caption" }, (0, import_i18n63.__)("You'll need Elementor Pro to use this feature.", "elementor"))
4661
4748
  ));
4662
4749
  var useFilteredOptions = (searchValue) => {
4663
4750
  const dynamicTags = usePropDynamicTags();
@@ -4703,7 +4790,7 @@ var DynamicSelectionControl = () => {
4703
4790
  {
4704
4791
  size: SIZE7,
4705
4792
  onClick: removeDynamicTag,
4706
- "aria-label": (0, import_i18n61.__)("Remove dynamic value", "elementor")
4793
+ "aria-label": (0, import_i18n64.__)("Remove dynamic value", "elementor")
4707
4794
  },
4708
4795
  /* @__PURE__ */ React91.createElement(import_icons27.XIcon, { fontSize: SIZE7 })
4709
4796
  ))
@@ -4729,7 +4816,7 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
4729
4816
  if (!hasDynamicSettings) {
4730
4817
  return null;
4731
4818
  }
4732
- return /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(import_ui47.IconButton, { size: SIZE7, ...(0, import_ui47.bindTrigger)(popupState), "aria-label": (0, import_i18n61.__)("Settings", "elementor") }, /* @__PURE__ */ React91.createElement(import_icons27.SettingsIcon, { fontSize: SIZE7 })), /* @__PURE__ */ React91.createElement(
4819
+ return /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(import_ui47.IconButton, { size: SIZE7, ...(0, import_ui47.bindTrigger)(popupState), "aria-label": (0, import_i18n64.__)("Settings", "elementor") }, /* @__PURE__ */ React91.createElement(import_icons27.SettingsIcon, { fontSize: SIZE7 })), /* @__PURE__ */ React91.createElement(
4733
4820
  import_ui47.Popover,
4734
4821
  {
4735
4822
  disablePortal: true,
@@ -4775,7 +4862,7 @@ var Control3 = ({ control }) => {
4775
4862
 
4776
4863
  // src/dynamics/dynamic-transformer.ts
4777
4864
  var import_editor_canvas3 = require("@elementor/editor-canvas");
4778
- var import_editor_props13 = require("@elementor/editor-props");
4865
+ var import_editor_props14 = require("@elementor/editor-props");
4779
4866
 
4780
4867
  // src/dynamics/errors.ts
4781
4868
  var import_utils9 = require("@elementor/utils");
@@ -4793,7 +4880,7 @@ var dynamicTransformer = (0, import_editor_canvas3.createTransformer)((value) =>
4793
4880
  });
4794
4881
  function simpleTransform(props) {
4795
4882
  const transformed = Object.entries(props).map(([settingKey, settingValue]) => {
4796
- const value = (0, import_editor_props13.isTransformable)(settingValue) ? settingValue.value : settingValue;
4883
+ const value = (0, import_editor_props14.isTransformable)(settingValue) ? settingValue.value : settingValue;
4797
4884
  return [settingKey, value];
4798
4885
  });
4799
4886
  return Object.fromEntries(transformed);
@@ -4826,14 +4913,14 @@ function getDynamicValue(name, settings) {
4826
4913
  var React92 = __toESM(require("react"));
4827
4914
  var import_editor_controls57 = require("@elementor/editor-controls");
4828
4915
  var import_icons28 = require("@elementor/icons");
4829
- var import_i18n62 = require("@wordpress/i18n");
4916
+ var import_i18n65 = require("@wordpress/i18n");
4830
4917
  var usePropDynamicAction = () => {
4831
4918
  const { propType } = (0, import_editor_controls57.useBoundProp)();
4832
4919
  const visible = !!propType && supportsDynamic(propType);
4833
4920
  return {
4834
4921
  visible,
4835
4922
  icon: import_icons28.DatabaseIcon,
4836
- title: (0, import_i18n62.__)("Dynamic tags", "elementor"),
4923
+ title: (0, import_i18n65.__)("Dynamic tags", "elementor"),
4837
4924
  content: ({ close }) => /* @__PURE__ */ React92.createElement(DynamicSelection, { close })
4838
4925
  };
4839
4926
  };
@@ -4866,7 +4953,7 @@ var init = () => {
4866
4953
  // src/reset-style-props.tsx
4867
4954
  var import_editor_controls59 = require("@elementor/editor-controls");
4868
4955
  var import_icons29 = require("@elementor/icons");
4869
- var import_i18n63 = require("@wordpress/i18n");
4956
+ var import_i18n66 = require("@wordpress/i18n");
4870
4957
  var { registerAction } = controlActionsMenu;
4871
4958
  function initResetStyleProps() {
4872
4959
  registerAction({
@@ -4880,7 +4967,7 @@ function useResetStyleValueProps() {
4880
4967
  const { value, setValue, path, bind } = (0, import_editor_controls59.useBoundProp)();
4881
4968
  return {
4882
4969
  visible: isStyle && value !== null && value !== void 0 && path.length <= 2 && !EXCLUDED_BINDS.includes(bind),
4883
- title: (0, import_i18n63.__)("Clear", "elementor"),
4970
+ title: (0, import_i18n66.__)("Clear", "elementor"),
4884
4971
  icon: import_icons29.BrushBigIcon,
4885
4972
  onClick: () => setValue(null)
4886
4973
  };
@@ -4909,7 +4996,7 @@ var StyledUnstableColorIndicator = (0, import_ui48.styled)(import_ui48.UnstableC
4909
4996
  var React94 = __toESM(require("react"));
4910
4997
  var import_editor_canvas6 = require("@elementor/editor-canvas");
4911
4998
  var import_ui49 = require("@elementor/ui");
4912
- var import_i18n64 = require("@wordpress/i18n");
4999
+ var import_i18n67 = require("@wordpress/i18n");
4913
5000
  var backgroundGradientOverlayTransformer = (0, import_editor_canvas6.createTransformer)((value) => /* @__PURE__ */ React94.createElement(import_ui49.Stack, { direction: "row", gap: 10 }, /* @__PURE__ */ React94.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React94.createElement(ItemLabelGradient, { value })));
4914
5001
  var ItemIconGradient = ({ value }) => {
4915
5002
  const gradient = getGradientValue(value);
@@ -4917,9 +5004,9 @@ var ItemIconGradient = ({ value }) => {
4917
5004
  };
4918
5005
  var ItemLabelGradient = ({ value }) => {
4919
5006
  if (value.type === "linear") {
4920
- return /* @__PURE__ */ React94.createElement("span", null, (0, import_i18n64.__)("Linear Gradient", "elementor"));
5007
+ return /* @__PURE__ */ React94.createElement("span", null, (0, import_i18n67.__)("Linear Gradient", "elementor"));
4921
5008
  }
4922
- return /* @__PURE__ */ React94.createElement("span", null, (0, import_i18n64.__)("Radial Gradient", "elementor"));
5009
+ return /* @__PURE__ */ React94.createElement("span", null, (0, import_i18n67.__)("Radial Gradient", "elementor"));
4923
5010
  };
4924
5011
  var getGradientValue = (gradient) => {
4925
5012
  const stops = gradient.stops?.map(({ color, offset }) => `${color} ${offset ?? 0}%`)?.join(",");
@@ -5029,10 +5116,6 @@ function init3() {
5029
5116
  id: "editing-panel-hooks",
5030
5117
  component: EditingPanelHooks
5031
5118
  });
5032
- (0, import_editor.injectIntoLogic)({
5033
- id: "current-user-data",
5034
- component: import_editor_current_user.PrefetchUserData
5035
- });
5036
5119
  init();
5037
5120
  init2();
5038
5121
  if ((0, import_editor_v1_adapters20.isExperimentActive)(EXPERIMENTAL_FEATURES.V_3_30)) {