@elementor/editor-variables 3.33.0-101 → 3.33.0-102

package/dist/index.mjs

@@ -2040,11 +2040,9 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
 
 // src/components/ui/deleted-variable-alert.tsx
 import * as React23 from "react";
-import { useSectionWidth } from "@elementor/editor-editing-panel";
-import { Alert as Alert2, AlertAction, AlertTitle, ClickAwayListener as ClickAwayListener2 } from "@elementor/ui";
+import { Alert as Alert2, AlertAction, AlertTitle, ClickAwayListener as ClickAwayListener2, Typography as Typography11 } from "@elementor/ui";
 import { __ as __16 } from "@wordpress/i18n";
 var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
-  const sectionWidth = useSectionWidth();
   return /* @__PURE__ */ React23.createElement(ClickAwayListener2, { onClickAway: onClose }, /* @__PURE__ */ React23.createElement(
     Alert2,
     {
@@ -2052,25 +2050,20 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
       severity: "warning",
       onClose,
       action: /* @__PURE__ */ React23.createElement(React23.Fragment, null, onUnlink && /* @__PURE__ */ React23.createElement(AlertAction, { variant: "contained", onClick: onUnlink }, __16("Unlink", "elementor")), onRestore && /* @__PURE__ */ React23.createElement(AlertAction, { variant: "outlined", onClick: onRestore }, __16("Restore", "elementor"))),
-      sx: { width: sectionWidth }
+      sx: { maxWidth: 300 }
     },
     /* @__PURE__ */ React23.createElement(AlertTitle, null, __16("Deleted variable", "elementor")),
-    __16("The variable", "elementor"),
-    " '",
-    label,
-    "'",
-    " ",
-    __16(
+    /* @__PURE__ */ React23.createElement(Typography11, { variant: "body2", color: "textPrimary" }, __16("The variable", "elementor"), "\xA0'", /* @__PURE__ */ React23.createElement(Typography11, { variant: "body2", component: "span", sx: { lineBreak: "anywhere" } }, label), "'\xA0", __16(
       "has been deleted, but it is still referenced in this location. You may restore the variable or unlink it to assign a different value.",
       "elementor"
-    )
+    ))
   ));
 };
 
 // src/components/ui/tags/deleted-tag.tsx
 import * as React24 from "react";
 import { AlertTriangleFilledIcon as AlertTriangleFilledIcon2 } from "@elementor/icons";
-import { Box as Box6, Chip, Tooltip as Tooltip2, Typography as Typography11 } from "@elementor/ui";
+import { Box as Box6, Chip, Tooltip as Tooltip2, Typography as Typography12 } from "@elementor/ui";
 import { __ as __17 } from "@wordpress/i18n";
 var DeletedTag = React24.forwardRef(({ label, onClick, ...props }, ref) => {
   return /* @__PURE__ */ React24.createElement(
@@ -2083,7 +2076,7 @@ var DeletedTag = React24.forwardRef(({ label, onClick, ...props }, ref) => {
       variant: "standard",
       onClick,
       icon: /* @__PURE__ */ React24.createElement(AlertTriangleFilledIcon2, null),
-      label: /* @__PURE__ */ React24.createElement(Tooltip2, { title: label, placement: "top" }, /* @__PURE__ */ React24.createElement(Box6, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React24.createElement(Typography11, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React24.createElement(Typography11, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", __17("deleted", "elementor"), ")"))),
+      label: /* @__PURE__ */ React24.createElement(Tooltip2, { title: label, placement: "top" }, /* @__PURE__ */ React24.createElement(Box6, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React24.createElement(Typography12, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React24.createElement(Typography12, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", __17("deleted", "elementor"), ")"))),
       sx: {
         height: (theme) => theme.spacing(3.5),
         borderRadius: (theme) => theme.spacing(1),
@@ -2190,8 +2183,7 @@ import { Backdrop as Backdrop2, bindPopover as bindPopover3, Box as Box9, Infoti
 
 // src/components/ui/mismatch-variable-alert.tsx
 import * as React26 from "react";
-import { useSectionWidth as useSectionWidth2 } from "@elementor/editor-editing-panel";
-import { Alert as Alert3, AlertAction as AlertAction2, AlertTitle as AlertTitle2, ClickAwayListener as ClickAwayListener3 } from "@elementor/ui";
+import { Alert as Alert3, AlertAction as AlertAction2, AlertTitle as AlertTitle2, ClickAwayListener as ClickAwayListener3, Typography as Typography13 } from "@elementor/ui";
 import { __ as __18 } from "@wordpress/i18n";
 var i18n = {
   title: __18("Variable has changed", "elementor"),
@@ -2205,7 +2197,6 @@ var i18n = {
   }
 };
 var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
-  const sectionWidth = useSectionWidth2();
   return /* @__PURE__ */ React26.createElement(ClickAwayListener3, { onClickAway: onClose }, /* @__PURE__ */ React26.createElement(
     Alert3,
     {
@@ -2213,20 +2204,17 @@ var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
       severity: "warning",
       onClose,
       action: /* @__PURE__ */ React26.createElement(React26.Fragment, null, onClear && /* @__PURE__ */ React26.createElement(AlertAction2, { variant: "contained", onClick: onClear }, i18n.buttons.clear), triggerSelect && /* @__PURE__ */ React26.createElement(AlertAction2, { variant: "outlined", onClick: triggerSelect }, i18n.buttons.select)),
-      sx: {
-        width: sectionWidth,
-        minWidth: 300
-      }
+      sx: { maxWidth: 300 }
     },
     /* @__PURE__ */ React26.createElement(AlertTitle2, null, i18n.title),
-    i18n.message
+    /* @__PURE__ */ React26.createElement(Typography13, { variant: "body2", color: "textPrimary" }, i18n.message)
   ));
 };
 
 // src/components/ui/tags/mismatch-tag.tsx
 import * as React27 from "react";
 import { AlertTriangleFilledIcon as AlertTriangleFilledIcon3 } from "@elementor/icons";
-import { Box as Box8, Chip as Chip2, Tooltip as Tooltip3, Typography as Typography12 } from "@elementor/ui";
+import { Box as Box8, Chip as Chip2, Tooltip as Tooltip3, Typography as Typography14 } from "@elementor/ui";
 import { __ as __19 } from "@wordpress/i18n";
 var MismatchTag = React27.forwardRef(({ label, onClick, ...props }, ref) => {
   return /* @__PURE__ */ React27.createElement(
@@ -2239,7 +2227,7 @@ var MismatchTag = React27.forwardRef(({ label, onClick, ...props }, ref) => {
       variant: "standard",
       onClick,
       icon: /* @__PURE__ */ React27.createElement(AlertTriangleFilledIcon3, null),
-      label: /* @__PURE__ */ React27.createElement(Tooltip3, { title: label, placement: "top" }, /* @__PURE__ */ React27.createElement(Box8, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React27.createElement(Typography12, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React27.createElement(Typography12, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", __19("changed", "elementor"), ")"))),
+      label: /* @__PURE__ */ React27.createElement(Tooltip3, { title: label, placement: "top" }, /* @__PURE__ */ React27.createElement(Box8, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React27.createElement(Typography14, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React27.createElement(Typography14, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", __19("changed", "elementor"), ")"))),
       sx: {
         height: (theme) => theme.spacing(3.5),
         borderRadius: (theme) => theme.spacing(1),
@@ -2332,11 +2320,9 @@ import { __ as __21 } from "@wordpress/i18n";
 
 // src/components/ui/missing-variable-alert.tsx
 import * as React29 from "react";
-import { useSectionWidth as useSectionWidth3 } from "@elementor/editor-editing-panel";
-import { Alert as Alert4, AlertAction as AlertAction3, AlertTitle as AlertTitle3, ClickAwayListener as ClickAwayListener4 } from "@elementor/ui";
+import { Alert as Alert4, AlertAction as AlertAction3, AlertTitle as AlertTitle3, ClickAwayListener as ClickAwayListener4, Typography as Typography15 } from "@elementor/ui";
 import { __ as __20 } from "@wordpress/i18n";
 var MissingVariableAlert = ({ onClose, onClear }) => {
-  const sectionWidth = useSectionWidth3();
   return /* @__PURE__ */ React29.createElement(ClickAwayListener4, { onClickAway: onClose }, /* @__PURE__ */ React29.createElement(
     Alert4,
     {
@@ -2344,13 +2330,13 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
       severity: "warning",
       onClose,
       action: /* @__PURE__ */ React29.createElement(React29.Fragment, null, onClear && /* @__PURE__ */ React29.createElement(AlertAction3, { variant: "contained", onClick: onClear }, __20("Clear", "elementor"))),
-      sx: { width: sectionWidth }
+      sx: { maxWidth: 300 }
     },
     /* @__PURE__ */ React29.createElement(AlertTitle3, null, __20("This variable is missing", "elementor")),
-    __20(
+    /* @__PURE__ */ React29.createElement(Typography15, { variant: "body2", color: "textPrimary" }, __20(
       "It may have been deleted. Try clearing this field and select a different value or variable.",
       "elementor"
-    )
+    ))
   ));
 };
 
@@ -2524,7 +2510,7 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 import * as React35 from "react";
 import { useId as useId4, useRef as useRef5, useState as useState16 } from "react";
 import { enqueueFont as enqueueFont2, ItemSelector } from "@elementor/editor-controls";
-import { useFontFamilies, useSectionWidth as useSectionWidth4 } from "@elementor/editor-editing-panel";
+import { useFontFamilies, useSectionWidth } from "@elementor/editor-editing-panel";
 import { ChevronDownIcon, TextIcon } from "@elementor/icons";
 import { bindPopover as bindPopover4, bindTrigger as bindTrigger3, Popover as Popover4, UnstableTag, usePopupState as usePopupState5 } from "@elementor/ui";
 import { __ as __23 } from "@wordpress/i18n";
@@ -2534,7 +2520,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const fontPopoverState = usePopupState5({ variant: "popover" });
   const fontFamilies = useFontFamilies();
-  const sectionWidth = useSectionWidth4();
+  const sectionWidth = useSectionWidth();
   const mapFontSubs = React35.useMemo(() => {
     return fontFamilies.map(({ label, fonts }) => ({
       label,