@elementor/editor-editing-panel 1.16.0 → 1.17.0

package/dist/index.mjs

@@ -606,6 +606,7 @@ import * as React63 from "react";
 import { ControlActionsProvider, ControlReplacementProvider } from "@elementor/editor-controls";
 import { useSelectedElement } from "@elementor/editor-elements";
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
+import { RocketIcon } from "@elementor/icons";
 import { SessionStorageProvider as SessionStorageProvider3 } from "@elementor/session";
 import { ErrorBoundary } from "@elementor/ui";
 import { __ as __42 } from "@wordpress/i18n";
@@ -1027,7 +1028,7 @@ import { Stack as Stack5 } from "@elementor/ui";
 var SectionContent = ({ gap = 2, sx, children }) => /* @__PURE__ */ React19.createElement(Stack5, { gap, sx: { ...sx } }, children);
 
 // src/components/style-sections/border-section/border-field.tsx
-import * as React24 from "react";
+import * as React25 from "react";
 import { __ as __8 } from "@wordpress/i18n";
 
 // src/components/add-or-remove-content.tsx
@@ -1081,40 +1082,88 @@ var BorderStyleField = () => {
 };
 
 // src/components/style-sections/border-section/border-width-field.tsx
-import * as React23 from "react";
+import * as React24 from "react";
 import { EqualUnequalSizesControl } from "@elementor/editor-controls";
 import { borderWidthPropTypeUtil } from "@elementor/editor-props";
 import { SideAllIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
+import { withDirection } from "@elementor/ui";
 import { __ as __7 } from "@wordpress/i18n";
-var edges = [
+
+// src/hooks/use-direction.ts
+import { useTheme } from "@elementor/ui";
+function useDirection() {
+  const theme = useTheme(), extendedWindow = window;
+  const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!extendedWindow.elementorFrontend?.config?.is_rtl;
+  return { isSiteRtl, isUiRtl };
+}
+
+// src/components/style-sections/layout-section/utils/rotated-icon.tsx
+import * as React23 from "react";
+import { useRef } from "react";
+import { useTheme as useTheme2 } from "@elementor/ui";
+var CLOCKWISE_ANGLES = {
+  row: 0,
+  column: 90,
+  "row-reverse": 180,
+  "column-reverse": 270
+};
+var COUNTER_CLOCKWISE_ANGLES = {
+  row: 0,
+  column: -90,
+  "row-reverse": -180,
+  "column-reverse": -270
+};
+var RotatedIcon = ({ icon: Icon, size, isClockwise = true, offset = 0 }) => {
+  const rotate = useRef(useGetTargetAngle(isClockwise, offset));
+  rotate.current = useGetTargetAngle(isClockwise, offset, rotate);
+  return /* @__PURE__ */ React23.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
+};
+var useGetTargetAngle = (isClockwise, offset, existingRef) => {
+  const [direction] = useStylesField("flex-direction");
+  const isRtl = "rtl" === useTheme2().direction;
+  const rotationMultiplier = isRtl ? -1 : 1;
+  const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
+  const currentAngle = existingRef ? existingRef.current * rotationMultiplier : angleMap[direction?.value || "row"] + offset;
+  const targetAngle = angleMap[direction?.value || "row"] + offset;
+  const diffToTargetAngle = (targetAngle - currentAngle + 360) % 360;
+  const formattedDiff = (diffToTargetAngle + 180) % 360 - 180;
+  return (currentAngle + formattedDiff) * rotationMultiplier;
+};
+
+// src/components/style-sections/border-section/border-width-field.tsx
+var InlineStartIcon = withDirection(SideRightIcon);
+var InlineEndIcon = withDirection(SideLeftIcon);
+var getEdges = (isSiteRtl) => [
   {
     label: __7("Top", "elementor"),
-    icon: /* @__PURE__ */ React23.createElement(SideTopIcon, { fontSize: "tiny" }),
-    bind: "top"
+    icon: /* @__PURE__ */ React24.createElement(SideTopIcon, { fontSize: "tiny" }),
+    bind: "block-start"
   },
   {
-    label: __7("Right", "elementor"),
-    icon: /* @__PURE__ */ React23.createElement(SideRightIcon, { fontSize: "tiny" }),
-    bind: "right"
+    label: isSiteRtl ? __7("Left", "elementor") : __7("Right", "elementor"),
+    icon: /* @__PURE__ */ React24.createElement(RotatedIcon, { icon: InlineStartIcon, size: "tiny" }),
+    bind: "inline-end"
   },
   {
     label: __7("Bottom", "elementor"),
-    icon: /* @__PURE__ */ React23.createElement(SideBottomIcon, { fontSize: "tiny" }),
-    bind: "bottom"
+    icon: /* @__PURE__ */ React24.createElement(SideBottomIcon, { fontSize: "tiny" }),
+    bind: "block-end"
   },
   {
-    label: __7("Left", "elementor"),
-    icon: /* @__PURE__ */ React23.createElement(SideLeftIcon, { fontSize: "tiny" }),
-    bind: "left"
+    label: isSiteRtl ? __7("Right", "elementor") : __7("Left", "elementor"),
+    icon: /* @__PURE__ */ React24.createElement(RotatedIcon, { icon: InlineEndIcon, size: "tiny" }),
+    bind: "inline-start"
   }
 ];
 var BorderWidthField = () => {
-  return /* @__PURE__ */ React23.createElement(StylesField, { bind: "border-width" }, /* @__PURE__ */ React23.createElement(
+  const { isSiteRtl } = useDirection();
+  return /* @__PURE__ */ React24.createElement(StylesField, { bind: "border-width" }, /* @__PURE__ */ React24.createElement(
     EqualUnequalSizesControl,
     {
-      items: edges,
+      items: getEdges(isSiteRtl),
       label: __7("Border width", "elementor"),
-      icon: /* @__PURE__ */ React23.createElement(SideAllIcon, { fontSize: "tiny" }),
+      icon: /* @__PURE__ */ React24.createElement(SideAllIcon, { fontSize: "tiny" }),
+      tooltipLabel: __7("Adjust borders", "elementor"),
       multiSizePropTypeUtil: borderWidthPropTypeUtil
     }
   ));
@@ -1139,7 +1188,7 @@ var BorderField = () => {
     });
   };
   const hasBorder = Object.values(border ?? {}).some(Boolean);
-  return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(
     AddOrRemoveContent,
     {
       label: __8("Border", "elementor"),
@@ -1147,9 +1196,9 @@ var BorderField = () => {
       onAdd: addBorder,
       onRemove: removeBorder
     },
-    /* @__PURE__ */ React24.createElement(BorderWidthField, null),
-    /* @__PURE__ */ React24.createElement(BorderColorField, null),
-    /* @__PURE__ */ React24.createElement(BorderStyleField, null)
+    /* @__PURE__ */ React25.createElement(BorderWidthField, null),
+    /* @__PURE__ */ React25.createElement(BorderColorField, null),
+    /* @__PURE__ */ React25.createElement(BorderStyleField, null)
   );
 };
 
@@ -1164,55 +1213,12 @@ import {
   RadiusTopLeftIcon,
   RadiusTopRightIcon
 } from "@elementor/icons";
-import { withDirection } from "@elementor/ui";
+import { withDirection as withDirection2 } from "@elementor/ui";
 import { __ as __9 } from "@wordpress/i18n";
-
-// src/hooks/use-direction.ts
-import { useTheme } from "@elementor/ui";
-function useDirection() {
-  const theme = useTheme(), extendedWindow = window;
-  const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!extendedWindow.elementorFrontend?.config?.is_rtl;
-  return { isSiteRtl, isUiRtl };
-}
-
-// src/components/style-sections/layout-section/utils/rotated-icon.tsx
-import * as React25 from "react";
-import { useRef } from "react";
-import { useTheme as useTheme2 } from "@elementor/ui";
-var CLOCKWISE_ANGLES = {
-  row: 0,
-  column: 90,
-  "row-reverse": 180,
-  "column-reverse": 270
-};
-var COUNTER_CLOCKWISE_ANGLES = {
-  row: 0,
-  column: -90,
-  "row-reverse": -180,
-  "column-reverse": -270
-};
-var RotatedIcon = ({ icon: Icon, size, isClockwise = true, offset = 0 }) => {
-  const rotate = useRef(useGetTargetAngle(isClockwise, offset));
-  rotate.current = useGetTargetAngle(isClockwise, offset, rotate);
-  return /* @__PURE__ */ React25.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
-};
-var useGetTargetAngle = (isClockwise, offset, existingRef) => {
-  const [direction] = useStylesField("flex-direction");
-  const isRtl = "rtl" === useTheme2().direction;
-  const rotationMultiplier = isRtl ? -1 : 1;
-  const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
-  const currentAngle = existingRef ? existingRef.current * rotationMultiplier : angleMap[direction?.value || "row"] + offset;
-  const targetAngle = angleMap[direction?.value || "row"] + offset;
-  const diffToTargetAngle = (targetAngle - currentAngle + 360) % 360;
-  const formattedDiff = (diffToTargetAngle + 180) % 360 - 180;
-  return (currentAngle + formattedDiff) * rotationMultiplier;
-};
-
-// src/components/style-sections/border-section/border-radius-field.tsx
-var StartStartIcon = withDirection(RadiusTopLeftIcon);
-var StartEndIcon = withDirection(RadiusTopRightIcon);
-var EndStartIcon = withDirection(RadiusBottomLeftIcon);
-var EndEndIcon = withDirection(RadiusBottomRightIcon);
+var StartStartIcon = withDirection2(RadiusTopLeftIcon);
+var StartEndIcon = withDirection2(RadiusTopRightIcon);
+var EndStartIcon = withDirection2(RadiusBottomLeftIcon);
+var EndEndIcon = withDirection2(RadiusBottomRightIcon);
 var getStartStartLabel = (isSiteRtl) => isSiteRtl ? __9("Top right", "elementor") : __9("Top left", "elementor");
 var getStartEndLabel = (isSiteRtl) => isSiteRtl ? __9("Top left", "elementor") : __9("Top right", "elementor");
 var getEndStartLabel = (isSiteRtl) => isSiteRtl ? __9("Bottom right", "elementor") : __9("Bottom left", "elementor");
@@ -1247,6 +1253,7 @@ var BorderRadiusField = () => {
       items: getCorners(isSiteRtl),
       label: __9("Border radius", "elementor"),
       icon: /* @__PURE__ */ React26.createElement(BorderCornersIcon, { fontSize: "tiny" }),
+      tooltipLabel: __9("Adjust corners", "elementor"),
       multiSizePropTypeUtil: borderRadiusPropTypeUtil
     }
   ));
@@ -1302,10 +1309,10 @@ import {
   LayoutAlignRightIcon,
   LayoutDistributeVerticalIcon as JustifyIcon
 } from "@elementor/icons";
-import { DirectionProvider, Grid as Grid3, ThemeProvider, withDirection as withDirection2 } from "@elementor/ui";
+import { DirectionProvider, Grid as Grid3, ThemeProvider, withDirection as withDirection3 } from "@elementor/ui";
 import { __ as __10 } from "@wordpress/i18n";
-var StartIcon = withDirection2(LayoutAlignLeftIcon);
-var EndIcon = withDirection2(LayoutAlignRightIcon);
+var StartIcon = withDirection3(LayoutAlignLeftIcon);
+var EndIcon = withDirection3(LayoutAlignRightIcon);
 var iconProps = {
   isClockwise: false,
   offset: 90
@@ -1350,10 +1357,10 @@ import {
   LayoutAlignRightIcon as LayoutAlignRightIcon2,
   LayoutDistributeVerticalIcon as JustifyIcon2
 } from "@elementor/icons";
-import { DirectionProvider as DirectionProvider2, Grid as Grid4, ThemeProvider as ThemeProvider2, withDirection as withDirection3 } from "@elementor/ui";
+import { DirectionProvider as DirectionProvider2, Grid as Grid4, ThemeProvider as ThemeProvider2, withDirection as withDirection4 } from "@elementor/ui";
 import { __ as __11 } from "@wordpress/i18n";
-var StartIcon2 = withDirection3(LayoutAlignLeftIcon2);
-var EndIcon2 = withDirection3(LayoutAlignRightIcon2);
+var StartIcon2 = withDirection4(LayoutAlignLeftIcon2);
+var EndIcon2 = withDirection4(LayoutAlignRightIcon2);
 var iconProps2 = {
   isClockwise: false,
   offset: 90
@@ -1428,14 +1435,14 @@ var DisplayField = () => {
 import * as React32 from "react";
 import { ControlLabel as ControlLabel8, ToggleControl as ToggleControl4 } from "@elementor/editor-controls";
 import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from "@elementor/icons";
-import { DirectionProvider as DirectionProvider3, Grid as Grid5, ThemeProvider as ThemeProvider3, withDirection as withDirection4 } from "@elementor/ui";
+import { DirectionProvider as DirectionProvider3, Grid as Grid5, ThemeProvider as ThemeProvider3, withDirection as withDirection5 } from "@elementor/ui";
 import { __ as __13 } from "@wordpress/i18n";
 var options3 = [
   {
     value: "row",
     label: __13("Row", "elementor"),
     renderContent: ({ size }) => {
-      const StartIcon5 = withDirection4(ArrowRightIcon);
+      const StartIcon5 = withDirection5(ArrowRightIcon);
       return /* @__PURE__ */ React32.createElement(StartIcon5, { fontSize: size });
     },
     showTooltip: true
@@ -1450,7 +1457,7 @@ var options3 = [
     value: "row-reverse",
     label: __13("Reversed row", "elementor"),
     renderContent: ({ size }) => {
-      const EndIcon5 = withDirection4(ArrowLeftIcon);
+      const EndIcon5 = withDirection5(ArrowLeftIcon);
       return /* @__PURE__ */ React32.createElement(EndIcon5, { fontSize: size });
     },
     showTooltip: true
@@ -1649,10 +1656,10 @@ import {
   JustifySpaceBetweenVerticalIcon as BetweenIcon,
   JustifyTopIcon
 } from "@elementor/icons";
-import { DirectionProvider as DirectionProvider6, Stack as Stack9, ThemeProvider as ThemeProvider6, withDirection as withDirection5 } from "@elementor/ui";
+import { DirectionProvider as DirectionProvider6, Stack as Stack9, ThemeProvider as ThemeProvider6, withDirection as withDirection6 } from "@elementor/ui";
 import { __ as __17 } from "@wordpress/i18n";
-var StartIcon3 = withDirection5(JustifyTopIcon);
-var EndIcon3 = withDirection5(JustifyBottomIcon);
+var StartIcon3 = withDirection6(JustifyTopIcon);
+var EndIcon3 = withDirection6(JustifyBottomIcon);
 var iconProps3 = {
   isClockwise: true,
   offset: -90
@@ -1750,16 +1757,21 @@ import { useSessionStorage } from "@elementor/session";
 import * as React39 from "react";
 import { ControlLabel as ControlLabel14, SizeControl as SizeControl3 } from "@elementor/editor-controls";
 import { SideBottomIcon as SideBottomIcon2, SideLeftIcon as SideLeftIcon2, SideRightIcon as SideRightIcon2, SideTopIcon as SideTopIcon2 } from "@elementor/icons";
-import { Grid as Grid9, Stack as Stack10 } from "@elementor/ui";
+import { Grid as Grid9, Stack as Stack10, withDirection as withDirection7 } from "@elementor/ui";
 import { __ as __20 } from "@wordpress/i18n";
+var InlineStartIcon2 = withDirection7(SideLeftIcon2);
+var InlineEndIcon2 = withDirection7(SideRightIcon2);
 var sideIcons = {
-  left: /* @__PURE__ */ React39.createElement(SideLeftIcon2, { fontSize: "tiny" }),
-  right: /* @__PURE__ */ React39.createElement(SideRightIcon2, { fontSize: "tiny" }),
-  top: /* @__PURE__ */ React39.createElement(SideTopIcon2, { fontSize: "tiny" }),
-  bottom: /* @__PURE__ */ React39.createElement(SideBottomIcon2, { fontSize: "tiny" })
+  "inset-block-start": /* @__PURE__ */ React39.createElement(SideTopIcon2, { fontSize: "tiny" }),
+  "inset-block-end": /* @__PURE__ */ React39.createElement(SideBottomIcon2, { fontSize: "tiny" }),
+  "inset-inline-start": /* @__PURE__ */ React39.createElement(RotatedIcon, { icon: InlineStartIcon2, size: "tiny" }),
+  "inset-inline-end": /* @__PURE__ */ React39.createElement(RotatedIcon, { icon: InlineEndIcon2, size: "tiny" })
 };
+var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? __20("Right", "elementor") : __20("Left", "elementor");
+var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? __20("Left", "elementor") : __20("Right", "elementor");
 var DimensionsField = () => {
-  return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(DimensionField, { side: "top", label: __20("Top", "elementor") }), /* @__PURE__ */ React39.createElement(DimensionField, { side: "right", label: __20("Right", "elementor") })), /* @__PURE__ */ React39.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(DimensionField, { side: "bottom", label: __20("Bottom", "elementor") }), /* @__PURE__ */ React39.createElement(DimensionField, { side: "left", label: __20("Left", "elementor") })));
+  const { isSiteRtl } = useDirection();
+  return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(DimensionField, { side: "inset-block-start", label: __20("Top", "elementor") }), /* @__PURE__ */ React39.createElement(DimensionField, { side: "inset-inline-start", label: getInlineStartLabel(isSiteRtl) })), /* @__PURE__ */ React39.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(DimensionField, { side: "inset-block-end", label: __20("Bottom", "elementor") }), /* @__PURE__ */ React39.createElement(DimensionField, { side: "inset-inline-end", label: getInlineEndLabel(isSiteRtl) })));
 };
 var DimensionField = ({ side, label }) => {
   return /* @__PURE__ */ React39.createElement(Grid9, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React39.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(ControlLabel14, null, label)), /* @__PURE__ */ React39.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(StylesField, { bind: side }, /* @__PURE__ */ React39.createElement(SizeControl3, { startIcon: sideIcons[side], extendedValues: ["auto"] }))));
@@ -1794,10 +1806,10 @@ var ZIndexField = () => {
 var PositionSection = () => {
   const [positionValue] = useStylesField("position");
   const [dimensionsValues, setDimensionsValues] = useStylesFields([
-    "top",
-    "bottom",
-    "left",
-    "right"
+    "inset-block-start",
+    "inset-block-end",
+    "inset-inline-start",
+    "inset-inline-end"
   ]);
   const [dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory] = usePersistDimensions();
   const onPositionChange = (newPosition, previousPosition) => {
@@ -1805,10 +1817,10 @@ var PositionSection = () => {
       if (dimensionsValues) {
         updateDimensionsHistory(dimensionsValues);
         setDimensionsValues({
-          top: void 0,
-          bottom: void 0,
-          left: void 0,
-          right: void 0
+          "inset-block-start": void 0,
+          "inset-block-end": void 0,
+          "inset-inline-start": void 0,
+          "inset-inline-end": void 0
         });
       }
     } else if (previousPosition === "static") {
@@ -1891,7 +1903,15 @@ import * as React45 from "react";
 import { LinkedDimensionsControl } from "@elementor/editor-controls";
 import { __ as __25 } from "@wordpress/i18n";
 var SpacingSection = () => {
-  return /* @__PURE__ */ React45.createElement(SectionContent, null, /* @__PURE__ */ React45.createElement(StylesField, { bind: "padding" }, /* @__PURE__ */ React45.createElement(LinkedDimensionsControl, { label: __25("Padding", "elementor") })), /* @__PURE__ */ React45.createElement(PanelDivider, null), /* @__PURE__ */ React45.createElement(StylesField, { bind: "margin" }, /* @__PURE__ */ React45.createElement(LinkedDimensionsControl, { label: __25("Margin", "elementor"), extendedValues: ["auto"] })));
+  const { isSiteRtl } = useDirection();
+  return /* @__PURE__ */ React45.createElement(SectionContent, null, /* @__PURE__ */ React45.createElement(StylesField, { bind: "padding" }, /* @__PURE__ */ React45.createElement(LinkedDimensionsControl, { label: __25("Padding", "elementor"), isSiteRtl })), /* @__PURE__ */ React45.createElement(PanelDivider, null), /* @__PURE__ */ React45.createElement(StylesField, { bind: "margin" }, /* @__PURE__ */ React45.createElement(
+    LinkedDimensionsControl,
+    {
+      label: __25("Margin", "elementor"),
+      isSiteRtl,
+      extendedValues: ["auto"]
+    }
+  )));
 };
 
 // src/components/style-sections/typography-section/typography-section.tsx
@@ -1924,6 +1944,7 @@ var CollapsibleContent = ({ children, defaultOpen = false }) => {
 
 // src/components/style-sections/typography-section/font-family-field.tsx
 import * as React47 from "react";
+import { useMemo as useMemo3 } from "react";
 import { ControlLabel as ControlLabel19, FontFamilyControl } from "@elementor/editor-controls";
 import { Grid as Grid14 } from "@elementor/ui";
 import { __ as __27 } from "@wordpress/i18n";
@@ -1935,9 +1956,14 @@ var getElementorConfig = () => {
 };
 
 // src/components/style-sections/typography-section/font-family-field.tsx
+var supportedCategories = {
+  system: __27("System", "elementor"),
+  custom: __27("Custom Fonts", "elementor"),
+  googlefonts: __27("Google Fonts", "elementor")
+};
 var FontFamilyField = () => {
-  const fontFamilies = getFontFamilies();
-  if (!fontFamilies) {
+  const fontFamilies = useFontFamilies();
+  if (Object.keys(fontFamilies).length === 0) {
     return null;
   }
   return /* @__PURE__ */ React47.createElement(StylesField, { bind: "font-family" }, /* @__PURE__ */ React47.createElement(Grid14, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(ControlLabel19, null, __27("Font family", "elementor"))), /* @__PURE__ */ React47.createElement(Grid14, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React47.createElement(FontFamilyControl, { fontFamilies }))));
@@ -1950,6 +1976,24 @@ var getFontFamilies = () => {
   }
   return options11;
 };
+var useFontFamilies = () => {
+  const fontFamilies = getFontFamilies();
+  return useMemo3(
+    () => Object.entries(fontFamilies || {}).reduce((acc, [font, category]) => {
+      const categoryLabel = supportedCategories[category];
+      const existingCategory = acc[categoryLabel];
+      if (!categoryLabel) {
+        return acc;
+      }
+      if (!existingCategory) {
+        acc[categoryLabel] = [];
+      }
+      acc[categoryLabel].push(font);
+      return acc;
+    }, {}),
+    [fontFamilies]
+  );
+};
 
 // src/components/style-sections/typography-section/font-size-field.tsx
 import * as React48 from "react";
@@ -2024,10 +2068,10 @@ var LineHeightField = () => {
 import * as React53 from "react";
 import { ControlLabel as ControlLabel25, ToggleControl as ToggleControl9 } from "@elementor/editor-controls";
 import { AlignCenterIcon, AlignJustifiedIcon, AlignLeftIcon, AlignRightIcon } from "@elementor/icons";
-import { Grid as Grid20, withDirection as withDirection6 } from "@elementor/ui";
+import { Grid as Grid20, withDirection as withDirection8 } from "@elementor/ui";
 import { __ as __33 } from "@wordpress/i18n";
-var StartIcon4 = withDirection6(AlignLeftIcon);
-var EndIcon4 = withDirection6(AlignRightIcon);
+var StartIcon4 = withDirection8(AlignLeftIcon);
+var EndIcon4 = withDirection8(AlignRightIcon);
 var options8 = [
   {
     value: "start",
@@ -2140,13 +2184,15 @@ import { __ as __36 } from "@wordpress/i18n";
 var options9 = [
   {
     value: "ltr",
-    label: __36("Left to Right", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(TextDirectionLtrIcon, { fontSize: size })
+    label: __36("Left to right", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(TextDirectionLtrIcon, { fontSize: size }),
+    showTooltip: true
   },
   {
     value: "rtl",
-    label: __36("Right to Left", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(TextDirectionRtlIcon, { fontSize: size })
+    label: __36("Right to left", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(TextDirectionRtlIcon, { fontSize: size }),
+    showTooltip: true
   }
 ];
 var TextDirectionField = () => {
@@ -2306,7 +2352,7 @@ var EditingPanel = () => {
     return null;
   }
   const panelTitle = __42("Edit %s", "elementor").replace("%s", elementType.title);
-  return /* @__PURE__ */ React63.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React63.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React63.createElement(SessionStorageProvider3, { prefix: "elementor" }, /* @__PURE__ */ React63.createElement(Panel, null, /* @__PURE__ */ React63.createElement(PanelHeader, null, /* @__PURE__ */ React63.createElement(PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React63.createElement(PanelBody, null, /* @__PURE__ */ React63.createElement(ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React63.createElement(ControlReplacementProvider, { ...controlReplacement }, /* @__PURE__ */ React63.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React63.createElement(EditingPanelTabs, null))))))));
+  return /* @__PURE__ */ React63.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React63.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React63.createElement(SessionStorageProvider3, { prefix: "elementor" }, /* @__PURE__ */ React63.createElement(Panel, null, /* @__PURE__ */ React63.createElement(PanelHeader, null, /* @__PURE__ */ React63.createElement(PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React63.createElement(RocketIcon, { fontSize: "small", sx: { color: "text.disabled" } })), /* @__PURE__ */ React63.createElement(PanelBody, null, /* @__PURE__ */ React63.createElement(ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React63.createElement(ControlReplacementProvider, { ...controlReplacement }, /* @__PURE__ */ React63.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React63.createElement(EditingPanelTabs, null))))))));
 };
 
 // src/panel.ts
@@ -2376,7 +2422,7 @@ var EditingPanelHooks = () => {
 import * as React67 from "react";
 import { useId as useId4 } from "react";
 import { ControlLabel as ControlLabel31, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
-import { DatabaseIcon, SettingsIcon, XIcon as XIcon2 } from "@elementor/icons";
+import { DatabaseIcon as DatabaseIcon2, SettingsIcon, XIcon as XIcon2 } from "@elementor/icons";
 import {
   bindPopover as bindPopover2,
   bindTrigger as bindTrigger2,
@@ -2415,10 +2461,10 @@ import * as React65 from "react";
 import { PropKeyProvider as PropKeyProvider3, PropProvider as PropProvider3, useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
 
 // src/dynamics/hooks/use-dynamic-tag.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 import { useBoundProp } from "@elementor/editor-controls";
 
 // src/dynamics/sync/get-elementor-config.ts
@@ -2473,7 +2519,7 @@ var usePropDynamicTags = () => {
     const propDynamicType = getDynamicPropType(propType);
     categories = propDynamicType?.settings.categories || [];
   }
-  return useMemo3(() => getDynamicTagsByCategories(categories), [categories.join()]);
+  return useMemo4(() => getDynamicTagsByCategories(categories), [categories.join()]);
 };
 var getDynamicTagsByCategories = (categories) => {
   const dynamicTags = getAtomicDynamicTags();
@@ -2489,7 +2535,7 @@ var getDynamicTagsByCategories = (categories) => {
 // src/dynamics/hooks/use-dynamic-tag.ts
 var useDynamicTag = (tagName) => {
   const dynamicTags = usePropDynamicTags();
-  return useMemo4(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
+  return useMemo5(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
 };
 
 // src/dynamics/dynamic-control.tsx
@@ -2520,7 +2566,7 @@ var DynamicControl = ({ bind, children }) => {
 import * as React66 from "react";
 import { Fragment as Fragment9, useState as useState8 } from "react";
 import { useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
-import { PhotoIcon, SearchIcon } from "@elementor/icons";
+import { DatabaseIcon, SearchIcon } from "@elementor/icons";
 import {
   Box as Box4,
   Divider as Divider6,
@@ -2578,16 +2624,30 @@ var DynamicSelection = ({ onSelect }) => {
       },
       tagLabel
     );
-  })))) : /* @__PURE__ */ React66.createElement(PopoverContent, { alignItems: "center", p: 2.5 }, /* @__PURE__ */ React66.createElement(PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React66.createElement(Typography4, { align: "center", variant: "caption", color: "text.secondary" }, __43("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React66.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React66.createElement(Typography4, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React66.createElement(
-    Link,
+  })))) : /* @__PURE__ */ React66.createElement(
+    Stack15,
     {
-      color: "secondary",
-      variant: "caption",
-      component: "button",
-      onClick: () => setSearchValue("")
+      gap: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      p: 2.5,
+      color: "text.secondary",
+      sx: { pb: 3.5 }
     },
-    __43("Clear the filters", "elementor")
-  ), "\xA0", __43("and try again.", "elementor")))));
+    /* @__PURE__ */ React66.createElement(DatabaseIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React66.createElement(Typography4, { align: "center", variant: "subtitle2" }, __43("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React66.createElement("br", null), "\u201C", searchValue, "\u201D."),
+    /* @__PURE__ */ React66.createElement(Typography4, { align: "center", variant: "caption" }, __43("Try something else.", "elementor"), "\xA0", /* @__PURE__ */ React66.createElement(
+      Link,
+      {
+        color: "text.secondary",
+        variant: "caption",
+        component: "button",
+        onClick: () => setSearchValue("")
+      },
+      __43("Clear & try again", "elementor")
+    ))
+  )));
 };
 var useFilteredOptions = (searchValue) => {
   const dynamicTags = usePropDynamicTags();
@@ -2627,7 +2687,7 @@ var DynamicSelectionControl = () => {
       fullWidth: true,
       showActionsOnHover: true,
       label: dynamicTag.label,
-      startIcon: /* @__PURE__ */ React67.createElement(DatabaseIcon, { fontSize: SIZE4 }),
+      startIcon: /* @__PURE__ */ React67.createElement(DatabaseIcon2, { fontSize: SIZE4 }),
       ...bindTrigger2(selectionPopoverState),
       actions: /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React67.createElement(
         IconButton3,
@@ -2647,7 +2707,7 @@ var DynamicSelectionControl = () => {
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
       ...bindPopover2(selectionPopoverState)
     },
-    /* @__PURE__ */ React67.createElement(Stack16, null, /* @__PURE__ */ React67.createElement(Stack16, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React67.createElement(DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React67.createElement(Typography5, { variant: "subtitle2" }, __44("Dynamic tags", "elementor")), /* @__PURE__ */ React67.createElement(IconButton3, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React67.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React67.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
+    /* @__PURE__ */ React67.createElement(Stack16, null, /* @__PURE__ */ React67.createElement(Stack16, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React67.createElement(DatabaseIcon2, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React67.createElement(Typography5, { variant: "subtitle2" }, __44("Dynamic tags", "elementor")), /* @__PURE__ */ React67.createElement(IconButton3, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React67.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React67.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
   ));
 };
 var DynamicSettingsPopover = ({ dynamicTag }) => {
@@ -2672,7 +2732,7 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
       ...bindPopover2(settingsPopupState)
     },
-    /* @__PURE__ */ React67.createElement(Paper, { component: Stack16, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React67.createElement(Stack16, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React67.createElement(DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React67.createElement(Typography5, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React67.createElement(IconButton3, { sx: { ml: "auto" }, size: SIZE4, onClick: settingsPopupState.close }, /* @__PURE__ */ React67.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React67.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
+    /* @__PURE__ */ React67.createElement(Paper, { component: Stack16, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React67.createElement(Stack16, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React67.createElement(DatabaseIcon2, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React67.createElement(Typography5, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React67.createElement(IconButton3, { sx: { ml: "auto" }, size: SIZE4, onClick: settingsPopupState.close }, /* @__PURE__ */ React67.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React67.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
   ));
 };
 var DynamicSettings = ({ controls }) => {
@@ -2700,14 +2760,14 @@ var Control3 = ({ control }) => {
 // src/dynamics/hooks/use-prop-dynamic-action.tsx
 import * as React68 from "react";
 import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
-import { DatabaseIcon as DatabaseIcon2 } from "@elementor/icons";
+import { DatabaseIcon as DatabaseIcon3 } from "@elementor/icons";
 import { __ as __45 } from "@wordpress/i18n";
 var usePropDynamicAction = () => {
   const { propType } = useBoundProp5();
   const visible = !!propType && supportsDynamic(propType);
   return {
     visible,
-    icon: DatabaseIcon2,
+    icon: DatabaseIcon3,
     title: __45("Dynamic tags", "elementor"),
     popoverContent: ({ closePopover }) => /* @__PURE__ */ React68.createElement(DynamicSelection, { onSelect: closePopover })
   };