@elementor/editor-variables 0.5.4 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @elementor/editor-variables
 
+## 0.7.0
+
+### Minor Changes
+
+- 783b838: Add color variable creation ui
+
+### Patch Changes
+
+- Updated dependencies [120cc05]
+- Updated dependencies [67248fc]
+  - @elementor/editor-editing-panel@1.40.0
+  - @elementor/editor-controls@0.33.0
+
+## 0.6.0
+
+### Minor Changes
+
+- 80c545c: Detach variable (color & font) style remains
+
+### Patch Changes
+
+- 615baa1: upgrade elementor/ui version
+- Updated dependencies [93642ee]
+- Updated dependencies [ab07642]
+- Updated dependencies [12fab9e]
+- Updated dependencies [6e1d5ff]
+- Updated dependencies [d80a316]
+- Updated dependencies [35cdc76]
+- Updated dependencies [615baa1]
+- Updated dependencies [ae40ebe]
+- Updated dependencies [53a75e4]
+  - @elementor/editor-editing-panel@1.39.0
+  - @elementor/editor-controls@0.32.0
+  - @elementor/editor-canvas@0.22.1
+
 ## 0.5.4
 
 ### Patch Changes

package/dist/index.js

@@ -39,8 +39,9 @@ var import_editor_canvas2 = require("@elementor/editor-canvas");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 
 // src/controls/color-variables-selection-control.tsx
-var React3 = __toESM(require("react"));
-var import_editor_controls2 = require("@elementor/editor-controls");
+var React4 = __toESM(require("react"));
+var import_editor_controls3 = require("@elementor/editor-controls");
+var import_editor_props2 = require("@elementor/editor-props");
 
 // src/components/color-indicator.tsx
 var import_ui = require("@elementor/ui");
@@ -61,7 +62,7 @@ var usePropVariables = (propTypeKey) => {
   return (0, import_react.useMemo)(() => normalizeVariables(propTypeKey), [propTypeKey]);
 };
 var useVariable = (propTypeKey, key) => {
-  if (!variables[propTypeKey][key]) {
+  if (!variables[propTypeKey]?.[key]) {
     return null;
   }
   return {
@@ -70,13 +71,27 @@ var useVariable = (propTypeKey, key) => {
   };
 };
 var normalizeVariables = (propTypeKey) => {
-  return Object.entries(variables[propTypeKey]).map(([key, { label, value }]) => ({
+  return Object.entries(variables[propTypeKey] || {}).map(([key, { label, value }]) => ({
     key,
     label,
     value
   }));
 };
-var variables = window?.ElementorV4Variables;
+var createVariable = (propTypeKey, variable) => {
+  const id = generateId("e-gv", Object.keys(variables[propTypeKey]).length);
+  const newVariable = {
+    value: variable.value,
+    label: variable.label,
+    key: propTypeKey
+  };
+  variables[propTypeKey][id] = newVariable || {};
+  return id;
+};
+var variables = window?.ElementorV4Variables || {};
+var generateId = (prefix, variablesCount) => {
+  const randomHex = Math.random().toString(16).slice(2, 9);
+  return `${prefix}${randomHex}${variablesCount}`;
+};
 
 // src/prop-types/color-variable-prop-type.ts
 var import_editor_props = require("@elementor/editor-props");
@@ -140,83 +155,166 @@ var ColorVariablesSelection = ({ onSelect }) => {
 };
 
 // src/components/variables-selection-popover.tsx
+var React3 = __toESM(require("react"));
+var import_react4 = require("react");
+var import_icons3 = require("@elementor/icons");
+var import_ui5 = require("@elementor/ui");
+var import_i18n2 = require("@wordpress/i18n");
+
+// src/components/color-variable-creation.tsx
 var React2 = __toESM(require("react"));
 var import_react3 = require("react");
+var import_editor_controls2 = require("@elementor/editor-controls");
 var import_icons2 = require("@elementor/icons");
 var import_ui4 = require("@elementor/ui");
 var import_i18n = require("@wordpress/i18n");
+var ColorVariableCreation = ({ popupState }) => {
+  const { setValue: setVariable } = (0, import_editor_controls2.useBoundProp)(colorVariablePropTypeUtil);
+  const [color, setColor] = (0, import_react3.useState)("");
+  const [label, setLabel] = (0, import_react3.useState)("");
+  const anchorRef = (0, import_react3.useRef)(null);
+  const resetFields = () => {
+    setColor("");
+    setLabel("");
+  };
+  const closePopover = () => {
+    resetFields();
+    popupState.close();
+  };
+  const handleCreate = () => {
+    const key = createVariable(colorVariablePropTypeUtil.key, { label, value: color });
+    setVariable(key);
+    closePopover();
+  };
+  const isInValidForm = () => {
+    return !color?.trim() || !label?.trim();
+  };
+  return /* @__PURE__ */ React2.createElement(import_ui4.Box, { ref: anchorRef }, /* @__PURE__ */ React2.createElement(
+    import_ui4.Popover,
+    {
+      ...(0, import_ui4.bindPopover)(popupState),
+      anchorEl: anchorRef.current,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" }
+    },
+    /* @__PURE__ */ React2.createElement(import_ui4.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React2.createElement(import_icons2.BrushIcon, { fontSize: "tiny", sx: { mr: 0.5 } }), /* @__PURE__ */ React2.createElement(import_ui4.Typography, { variant: "subtitle2" }, (0, import_i18n.__)("Create variable", "elementor")), /* @__PURE__ */ React2.createElement(
+      import_ui4.CloseButton,
+      {
+        slotProps: { icon: { fontSize: "small" } },
+        sx: { ml: "auto" },
+        onClick: closePopover
+      }
+    )),
+    /* @__PURE__ */ React2.createElement(import_ui4.Divider, null),
+    /* @__PURE__ */ React2.createElement(import_ui4.Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React2.createElement(import_ui4.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui4.FormLabel, { size: "small" }, (0, import_i18n.__)("Name", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
+      import_ui4.TextField,
+      {
+        size: "tiny",
+        fullWidth: true,
+        value: label,
+        onChange: (e) => setLabel(e.target.value)
+      }
+    ))), /* @__PURE__ */ React2.createElement(import_ui4.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui4.FormLabel, { size: "small" }, (0, import_i18n.__)("Value", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
+      import_ui4.UnstableColorField,
+      {
+        size: "tiny",
+        fullWidth: true,
+        value: color,
+        onChange: setColor,
+        slotProps: {
+          colorPicker: {
+            anchorEl: anchorRef.current,
+            anchorOrigin: { vertical: "top", horizontal: "right" },
+            transformOrigin: { vertical: "top", horizontal: -10 }
+          }
+        }
+      }
+    )))),
+    /* @__PURE__ */ React2.createElement(import_ui4.CardActions, null, /* @__PURE__ */ React2.createElement(import_ui4.Button, { size: "small", onClick: closePopover, color: "secondary", variant: "text" }, (0, import_i18n.__)("Cancel", "elementor")), /* @__PURE__ */ React2.createElement(import_ui4.Button, { size: "small", variant: "contained", disabled: isInValidForm(), onClick: handleCreate }, (0, import_i18n.__)("Create", "elementor")))
+  ));
+};
+
+// src/components/variables-selection-popover.tsx
 var VariablesSelectionPopover = ({
   selectedVariable,
   unlinkVariable,
   startTagAdornment,
   children
 }) => {
-  const id = (0, import_react3.useId)();
-  const popupState = (0, import_ui4.usePopupState)({ variant: "popover", popupId: `elementor-variables-action-${id}` });
+  const id = (0, import_react4.useId)();
+  const popupState = (0, import_ui5.usePopupState)({ variant: "popover", popupId: `elementor-variables-action-${id}` });
+  const creationPopupState = (0, import_ui5.usePopupState)({ variant: "popover", popupId: `elementor-variables-creation-${id}` });
   const closePopover = () => popupState.close();
+  const handleCreateButtonClick = (event) => {
+    closePopover();
+    (0, import_ui5.bindTrigger)(creationPopupState).onClick(event);
+  };
+  const anchorRef = (0, import_react4.useRef)(null);
   const { label } = selectedVariable;
-  return /* @__PURE__ */ React2.createElement(import_ui4.Box, null, /* @__PURE__ */ React2.createElement(
-    import_ui4.UnstableTag,
+  return /* @__PURE__ */ React3.createElement(import_ui5.Box, { ref: anchorRef }, /* @__PURE__ */ React3.createElement(
+    import_ui5.UnstableTag,
     {
       fullWidth: true,
       showActionsOnHover: true,
-      ...(0, import_ui4.bindTrigger)(popupState),
-      startIcon: /* @__PURE__ */ React2.createElement(import_ui4.Stack, { spacing: 1, direction: "row", alignItems: "center" }, startTagAdornment, /* @__PURE__ */ React2.createElement(import_icons2.ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
-      label: /* @__PURE__ */ React2.createElement(import_ui4.Box, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React2.createElement(import_ui4.Typography, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
-      actions: /* @__PURE__ */ React2.createElement(import_ui4.IconButton, { size: "tiny", onClick: unlinkVariable, "aria-label": (0, import_i18n.__)("Unlink", "elementor") }, /* @__PURE__ */ React2.createElement(import_icons2.DetachIcon, { fontSize: "tiny" }))
+      ...(0, import_ui5.bindTrigger)(popupState),
+      startIcon: /* @__PURE__ */ React3.createElement(import_ui5.Stack, { spacing: 1, direction: "row", alignItems: "center" }, startTagAdornment, /* @__PURE__ */ React3.createElement(import_icons3.ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
+      label: /* @__PURE__ */ React3.createElement(import_ui5.Box, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React3.createElement(import_ui5.Typography, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
+      actions: /* @__PURE__ */ React3.createElement(import_ui5.IconButton, { size: "tiny", onClick: unlinkVariable, "aria-label": (0, import_i18n2.__)("Unlink", "elementor") }, /* @__PURE__ */ React3.createElement(import_icons3.DetachIcon, { fontSize: "tiny" }))
     }
-  ), /* @__PURE__ */ React2.createElement(
-    import_ui4.Popover,
+  ), /* @__PURE__ */ React3.createElement(
+    import_ui5.Popover,
     {
+      ...(0, import_ui5.bindPopover)(popupState),
       disableScrollLock: true,
-      anchorOrigin: { vertical: "bottom", horizontal: "center" },
-      transformOrigin: { vertical: "top", horizontal: "center" },
-      ...(0, import_ui4.bindPopover)(popupState)
+      anchorEl: anchorRef.current,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" }
     },
-    /* @__PURE__ */ React2.createElement(import_ui4.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React2.createElement(import_icons2.ColorFilterIcon, { fontSize: "tiny", sx: { mr: 0.5 } }), /* @__PURE__ */ React2.createElement(import_ui4.Typography, { variant: "subtitle2" }, (0, import_i18n.__)("Variables", "elementor")), /* @__PURE__ */ React2.createElement(
-      import_ui4.CloseButton,
+    /* @__PURE__ */ React3.createElement(import_ui5.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React3.createElement(import_icons3.ColorFilterIcon, { fontSize: "tiny", sx: { mr: 0.5 } }), /* @__PURE__ */ React3.createElement(import_ui5.Typography, { variant: "subtitle2" }, (0, import_i18n2.__)("Variables", "elementor")), /* @__PURE__ */ React3.createElement(import_ui5.Stack, { direction: "row", sx: { ml: "auto" } }, /* @__PURE__ */ React3.createElement(
+      import_ui5.IconButton,
       {
-        slotProps: { icon: { fontSize: "tiny" } },
-        sx: { ml: "auto" },
-        onClick: closePopover
-      }
-    )),
-    children({ closePopover })
-  ));
+        ...(0, import_ui5.bindTrigger)(creationPopupState),
+        size: "tiny",
+        onClick: handleCreateButtonClick
+      },
+      /* @__PURE__ */ React3.createElement(import_icons3.PlusIcon, { fontSize: "tiny" })
+    ), /* @__PURE__ */ React3.createElement(import_ui5.CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: closePopover }))),
+    children?.({ closePopover })
+  ), /* @__PURE__ */ React3.createElement(ColorVariableCreation, { popupState: creationPopupState }));
 };
 
 // src/controls/color-variables-selection-control.tsx
 var ColorVariablesSelectionControl = () => {
-  const { setValue } = (0, import_editor_controls2.useBoundProp)();
-  const { value: variableValue } = (0, import_editor_controls2.useBoundProp)(colorVariablePropTypeUtil);
-  const unlinkVariable = () => {
-    setValue(null);
-  };
+  const { setValue } = (0, import_editor_controls3.useBoundProp)();
+  const { value: variableValue } = (0, import_editor_controls3.useBoundProp)(colorVariablePropTypeUtil);
   const selectedVariable = useVariable(colorVariablePropTypeUtil.key, variableValue);
   if (!selectedVariable) {
     throw new Error(`Global color variable ${variableValue} not found`);
   }
-  return /* @__PURE__ */ React3.createElement(
+  const unlinkVariable = () => {
+    setValue(import_editor_props2.colorPropTypeUtil.create(selectedVariable.value));
+  };
+  return /* @__PURE__ */ React4.createElement(
     VariablesSelectionPopover,
     {
       selectedVariable,
       unlinkVariable,
-      startTagAdornment: /* @__PURE__ */ React3.createElement(ColorIndicator, { size: "inherit", component: "span", value: selectedVariable.value })
+      startTagAdornment: /* @__PURE__ */ React4.createElement(ColorIndicator, { size: "inherit", component: "span", value: selectedVariable.value })
     },
-    ({ closePopover }) => /* @__PURE__ */ React3.createElement(ColorVariablesSelection, { onSelect: closePopover })
+    ({ closePopover }) => /* @__PURE__ */ React4.createElement(ColorVariablesSelection, { onSelect: closePopover })
   );
 };
 
 // src/hooks/use-prop-color-variable-action.tsx
-var React4 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_editor_editing_panel = require("@elementor/editor-editing-panel");
-var import_icons3 = require("@elementor/icons");
-var import_i18n2 = require("@wordpress/i18n");
+var import_icons4 = require("@elementor/icons");
+var import_i18n3 = require("@wordpress/i18n");
 
 // src/prop-types/font-variable-prop-type.ts
-var import_editor_props2 = require("@elementor/editor-props");
+var import_editor_props3 = require("@elementor/editor-props");
 var import_schema2 = require("@elementor/schema");
-var fontVariablePropTypeUtil = (0, import_editor_props2.createPropUtils)("global-font-variable", import_schema2.z.string());
+var fontVariablePropTypeUtil = (0, import_editor_props3.createPropUtils)("global-font-variable", import_schema2.z.string());
 
 // src/utils.ts
 var hasAssignedColorVariable = (propValue) => {
@@ -238,9 +336,9 @@ var usePropColorVariableAction = () => {
   const visible = !!propType && supportsColorVariables(propType);
   return {
     visible,
-    icon: import_icons3.ColorFilterIcon,
-    title: (0, import_i18n2.__)("Variables", "elementor"),
-    popoverContent: ({ closePopover }) => /* @__PURE__ */ React4.createElement(ColorVariablesSelection, { onSelect: closePopover })
+    icon: import_icons4.ColorFilterIcon,
+    title: (0, import_i18n3.__)("Variables", "elementor"),
+    popoverContent: ({ closePopover }) => /* @__PURE__ */ React5.createElement(ColorVariablesSelection, { onSelect: closePopover })
   };
 };
 
@@ -272,32 +370,33 @@ var import_editor_canvas3 = require("@elementor/editor-canvas");
 var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
 
 // src/controls/font-variables-selection-control.tsx
-var React6 = __toESM(require("react"));
-var import_editor_controls4 = require("@elementor/editor-controls");
+var React7 = __toESM(require("react"));
+var import_editor_controls5 = require("@elementor/editor-controls");
+var import_editor_props4 = require("@elementor/editor-props");
 
 // src/components/font-variables-selection.tsx
-var React5 = __toESM(require("react"));
-var import_react4 = require("react");
-var import_editor_controls3 = require("@elementor/editor-controls");
-var import_icons4 = require("@elementor/icons");
-var import_ui5 = require("@elementor/ui");
+var React6 = __toESM(require("react"));
+var import_react5 = require("react");
+var import_editor_controls4 = require("@elementor/editor-controls");
+var import_icons5 = require("@elementor/icons");
+var import_ui6 = require("@elementor/ui");
 var FontVariablesSelection = ({ onSelect }) => {
-  const { value: variable, setValue: setVariable } = (0, import_editor_controls3.useBoundProp)(fontVariablePropTypeUtil);
+  const { value: variable, setValue: setVariable } = (0, import_editor_controls4.useBoundProp)(fontVariablePropTypeUtil);
   const variables2 = usePropVariables(fontVariablePropTypeUtil.key);
   const handleSetVariable = (newValue) => {
     setVariable(newValue.key);
     onSelect?.();
   };
-  return /* @__PURE__ */ React5.createElement(import_react4.Fragment, null, /* @__PURE__ */ React5.createElement(import_ui5.Divider, null), /* @__PURE__ */ React5.createElement(import_ui5.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React5.createElement(import_ui5.MenuList, { role: "listbox", tabIndex: 0 }, variables2.map(({ value, label, key }) => /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(import_react5.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui6.Divider, null), /* @__PURE__ */ React6.createElement(import_ui6.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React6.createElement(import_ui6.MenuList, { role: "listbox", tabIndex: 0 }, variables2.map(({ value, label, key }) => /* @__PURE__ */ React6.createElement(
     StyledMenuItem,
     {
       key,
       onClick: () => handleSetVariable({ value, label, key }),
       selected: key === variable
     },
-    /* @__PURE__ */ React5.createElement(import_ui5.ListItemIcon, null, /* @__PURE__ */ React5.createElement(import_icons4.TextIcon, null)),
-    /* @__PURE__ */ React5.createElement(
-      import_ui5.ListItemText,
+    /* @__PURE__ */ React6.createElement(import_ui6.ListItemIcon, null, /* @__PURE__ */ React6.createElement(import_icons5.TextIcon, null)),
+    /* @__PURE__ */ React6.createElement(
+      import_ui6.ListItemText,
       {
         primary: label,
         secondary: value,
@@ -321,37 +420,37 @@ var FontVariablesSelection = ({ onSelect }) => {
         sx: { display: "flex", alignItems: "center", gap: 1 }
       }
     ),
-    /* @__PURE__ */ React5.createElement(import_icons4.EditIcon, { color: "action", fontSize: "inherit", sx: { mx: 1, opacity: "0" } })
+    /* @__PURE__ */ React6.createElement(import_icons5.EditIcon, { color: "action", fontSize: "inherit", sx: { mx: 1, opacity: "0" } })
   )))));
 };
 
 // src/controls/font-variables-selection-control.tsx
 var FontVariablesSelectionControl = () => {
-  const { setValue } = (0, import_editor_controls4.useBoundProp)();
-  const { value: variableValue } = (0, import_editor_controls4.useBoundProp)(fontVariablePropTypeUtil);
-  const unlinkVariable = () => {
-    setValue(null);
-  };
+  const { setValue: setFontFamily } = (0, import_editor_controls5.useBoundProp)();
+  const { value: variableValue } = (0, import_editor_controls5.useBoundProp)(fontVariablePropTypeUtil);
   const selectedVariable = useVariable(fontVariablePropTypeUtil.key, variableValue);
   if (!selectedVariable) {
     throw new Error(`Global font variable ${variableValue} not found`);
   }
-  return /* @__PURE__ */ React6.createElement(VariablesSelectionPopover, { selectedVariable, unlinkVariable }, ({ closePopover }) => /* @__PURE__ */ React6.createElement(FontVariablesSelection, { onSelect: closePopover }));
+  const unlinkVariable = () => {
+    setFontFamily(import_editor_props4.stringPropTypeUtil.create(selectedVariable.value));
+  };
+  return /* @__PURE__ */ React7.createElement(VariablesSelectionPopover, { selectedVariable, unlinkVariable }, ({ closePopover }) => /* @__PURE__ */ React7.createElement(FontVariablesSelection, { onSelect: closePopover }));
 };
 
 // src/hooks/use-prop-font-variable-action.tsx
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
-var import_icons5 = require("@elementor/icons");
-var import_i18n3 = require("@wordpress/i18n");
+var import_icons6 = require("@elementor/icons");
+var import_i18n4 = require("@wordpress/i18n");
 var usePropFontVariableAction = () => {
   const { propType } = (0, import_editor_editing_panel3.useBoundProp)();
   const visible = !!propType && supportsFontVariables(propType);
   return {
     visible,
-    icon: import_icons5.ColorFilterIcon,
-    title: (0, import_i18n3.__)("Variables", "elementor"),
-    popoverContent: ({ closePopover }) => /* @__PURE__ */ React7.createElement(FontVariablesSelection, { onSelect: closePopover })
+    icon: import_icons6.ColorFilterIcon,
+    title: (0, import_i18n4.__)("Variables", "elementor"),
+    popoverContent: ({ closePopover }) => /* @__PURE__ */ React8.createElement(FontVariablesSelection, { onSelect: closePopover })
   };
 };
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/init-color-variables.ts","../src/controls/color-variables-selection-control.tsx","../src/components/color-indicator.tsx","../src/components/color-variables-selection.tsx","../src/hooks/use-prop-variables.ts","../src/prop-types/color-variable-prop-type.ts","../src/components/styled-menu-item.tsx","../src/components/variables-selection-popover.tsx","../src/hooks/use-prop-color-variable-action.tsx","../src/prop-types/font-variable-prop-type.ts","../src/utils.ts","../src/transformers/variable-transformer.ts","../src/init-font-variables.ts","../src/controls/font-variables-selection-control.tsx","../src/components/font-variables-selection.tsx","../src/hooks/use-prop-font-variable-action.tsx","../src/init.ts"],"sourcesContent":["export { init } from './init';\n","import { styleTransformersRegistry } from '@elementor/editor-canvas';\nimport { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';\n\nimport { ColorVariablesSelectionControl } from './controls/color-variables-selection-control';\nimport { usePropColorVariableAction } from './hooks/use-prop-color-variable-action';\nimport { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';\nimport { variableTransformer } from './transformers/variable-transformer';\nimport { hasAssignedColorVariable } from './utils';\n\nconst { registerPopoverAction } = controlActionsMenu;\n\nexport function initColorVariables() {\n\tregisterControlReplacement( {\n\t\tcomponent: ColorVariablesSelectionControl,\n\t\tcondition: ( { value } ) => hasAssignedColorVariable( value ),\n\t} );\n\n\tregisterPopoverAction( {\n\t\tid: 'color-variables',\n\t\tuseProps: usePropColorVariableAction,\n\t} );\n\n\tstyleTransformersRegistry.register( colorVariablePropTypeUtil.key, variableTransformer );\n}\n","import * as React from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\n\nimport { ColorIndicator } from '../components/color-indicator';\nimport { ColorVariablesSelection } from '../components/color-variables-selection';\nimport { VariablesSelectionPopover } from '../components/variables-selection-popover';\nimport { useVariable } from '../hooks/use-prop-variables';\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\n\nexport const ColorVariablesSelectionControl = () => {\n\tconst { setValue } = useBoundProp();\n\tconst { value: variableValue } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst unlinkVariable = () => {\n\t\tsetValue( null );\n\t};\n\n\tconst selectedVariable = useVariable( colorVariablePropTypeUtil.key, variableValue );\n\n\tif ( ! selectedVariable ) {\n\t\tthrow new Error( `Global color variable ${ variableValue } not found` );\n\t}\n\n\treturn (\n\t\t<VariablesSelectionPopover\n\t\t\tselectedVariable={ selectedVariable }\n\t\t\tunlinkVariable={ unlinkVariable }\n\t\t\tstartTagAdornment={ <ColorIndicator size=\"inherit\" component=\"span\" value={ selectedVariable.value } /> }\n\t\t>\n\t\t\t{ ( { closePopover } ) => <ColorVariablesSelection onSelect={ closePopover } /> }\n\t\t</VariablesSelectionPopover>\n\t);\n};\n","import { styled, UnstableColorIndicator } from '@elementor/ui';\n\nexport const ColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {\n\tborderRadius: `${ theme.shape.borderRadius / 2 }px`,\n} ) );\n","import * as React from 'react';\nimport { Fragment } from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { EditIcon } from '@elementor/icons';\nimport { Box, Divider, ListItemIcon, ListItemText, MenuList } from '@elementor/ui';\n\nimport { usePropVariables } from '../hooks/use-prop-variables';\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\nimport { type Variable } from '../types';\nimport { ColorIndicator } from './color-indicator';\nimport { StyledMenuItem } from './styled-menu-item';\n\ntype Props = {\n\tonSelect?: () => void;\n};\n\nexport const ColorVariablesSelection = ( { onSelect }: Props ) => {\n\tconst { value: variable, setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst variables = usePropVariables( colorVariablePropTypeUtil.key );\n\n\tconst handleSetColorVariable = ( newValue: Variable ) => {\n\t\tsetVariable( newValue.key );\n\n\t\tonSelect?.();\n\t};\n\n\treturn (\n\t\t<Fragment>\n\t\t\t<Divider />\n\t\t\t<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>\n\t\t\t\t<MenuList role=\"listbox\" tabIndex={ 0 }>\n\t\t\t\t\t{ variables.map( ( { value, label, key } ) => (\n\t\t\t\t\t\t<StyledMenuItem\n\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\tonClick={ () => handleSetColorVariable( { value, label, key } ) }\n\t\t\t\t\t\t\tselected={ key === variable }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ListItemIcon>\n\t\t\t\t\t\t\t\t<ColorIndicator size=\"inherit\" component=\"span\" value={ value } />\n\t\t\t\t\t\t\t</ListItemIcon>\n\t\t\t\t\t\t\t<ListItemText\n\t\t\t\t\t\t\t\tprimary={ label }\n\t\t\t\t\t\t\t\tsecondary={ value }\n\t\t\t\t\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\t\t\t\t\tvariant: 'body2',\n\t\t\t\t\t\t\t\t\tcolor: 'text.secondary',\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\tlineHeight: 2,\n\t\t\t\t\t\t\t\t\t\tdisplay: 'inline-block',\n\t\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t\t\ttextOverflow: 'ellipsis',\n\t\t\t\t\t\t\t\t\t\twhiteSpace: 'nowrap',\n\t\t\t\t\t\t\t\t\t\tmaxWidth: '81px',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsecondaryTypographyProps={ {\n\t\t\t\t\t\t\t\t\tvariant: 'caption',\n\t\t\t\t\t\t\t\t\tcolor: 'text.tertiary',\n\t\t\t\t\t\t\t\t\tstyle: { marginTop: '1px', lineHeight: '1' },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsx={ { display: 'flex', alignItems: 'center', gap: 1 } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<EditIcon color=\"action\" fontSize=\"inherit\" sx={ { mx: 1, opacity: '0' } } />\n\t\t\t\t\t\t</StyledMenuItem>\n\t\t\t\t\t) ) }\n\t\t\t\t</MenuList>\n\t\t\t</Box>\n\t\t</Fragment>\n\t);\n};\n","import { useMemo } from 'react';\n\ntype Variables = Record< string, { value: string; label: string } >;\n\ntype VariablesGroup = Record< string, Variables >;\n\nexport const usePropVariables = ( propTypeKey: string ) => {\n\treturn useMemo( () => normalizeVariables( propTypeKey ), [ propTypeKey ] );\n};\n\nexport const useVariable = ( propTypeKey: string, key: string ) => {\n\tif ( ! variables[ propTypeKey ][ key ] ) {\n\t\treturn null;\n\t}\n\n\treturn {\n\t\t...variables[ propTypeKey ][ key ],\n\t\tkey,\n\t};\n};\n\nconst normalizeVariables = ( propTypeKey: string ) => {\n\treturn Object.entries( variables[ propTypeKey ] ).map( ( [ key, { label, value } ] ) => ( {\n\t\tkey,\n\t\tlabel,\n\t\tvalue,\n\t} ) );\n};\n\n// @ts-expect-error the temporary solution to get the list of variables from the server\nconst variables: VariablesGroup = window?.ElementorV4Variables;\n","import { createPropUtils } from '@elementor/editor-props';\nimport { z } from '@elementor/schema';\n\nexport const colorVariablePropTypeUtil = createPropUtils( 'global-color-variable', z.string() );\n","import { MenuItem, styled } from '@elementor/ui';\n\nexport const StyledMenuItem = styled( MenuItem )( () => ( {\n\tpl: 2,\n\tpr: 1,\n\tpy: 0.5,\n\t'&:hover .MuiSvgIcon-root': {\n\t\topacity: 1,\n\t},\n} ) );\n","import * as React from 'react';\nimport { useId } from 'react';\nimport { ColorFilterIcon, DetachIcon } from '@elementor/icons';\nimport {\n\tbindPopover,\n\tbindTrigger,\n\tBox,\n\tCloseButton,\n\tIconButton,\n\tPopover,\n\tStack,\n\tTypography,\n\tUnstableTag as Tag,\n\tusePopupState,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type Variable } from '../types';\n\ntype Props = {\n\tselectedVariable: Variable;\n\tunlinkVariable: () => void;\n\tchildren: ( { closePopover }: { closePopover: () => void } ) => React.ReactNode;\n\tstartTagAdornment?: React.ReactNode;\n};\n\nexport const VariablesSelectionPopover = ( {\n\tselectedVariable,\n\tunlinkVariable,\n\tstartTagAdornment,\n\tchildren,\n}: Props ) => {\n\tconst id = useId();\n\tconst popupState = usePopupState( { variant: 'popover', popupId: `elementor-variables-action-${ id }` } );\n\n\tconst closePopover = () => popupState.close();\n\n\tconst { label } = selectedVariable;\n\n\treturn (\n\t\t<Box>\n\t\t\t<Tag\n\t\t\t\tfullWidth\n\t\t\t\tshowActionsOnHover\n\t\t\t\t{ ...bindTrigger( popupState ) }\n\t\t\t\tstartIcon={\n\t\t\t\t\t<Stack spacing={ 1 } direction=\"row\" alignItems=\"center\">\n\t\t\t\t\t\t{ startTagAdornment }\n\t\t\t\t\t\t<ColorFilterIcon fontSize={ 'inherit' } sx={ { mr: 1 } } />\n\t\t\t\t\t</Stack>\n\t\t\t\t}\n\t\t\t\tlabel={\n\t\t\t\t\t<Box sx={ { display: 'inline-grid' } }>\n\t\t\t\t\t\t<Typography sx={ { textOverflow: 'ellipsis', overflowX: 'hidden' } } variant=\"subtitle2\">\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t}\n\t\t\t\tactions={\n\t\t\t\t\t<IconButton size={ 'tiny' } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>\n\t\t\t\t\t\t<DetachIcon fontSize={ 'tiny' } />\n\t\t\t\t\t</IconButton>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Popover\n\t\t\t\tdisableScrollLock\n\t\t\t\tanchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }\n\t\t\t\ttransformOrigin={ { vertical: 'top', horizontal: 'center' } }\n\t\t\t\t{ ...bindPopover( popupState ) }\n\t\t\t>\n\t\t\t\t<Stack direction=\"row\" alignItems=\"center\" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>\n\t\t\t\t\t<ColorFilterIcon fontSize={ 'tiny' } sx={ { mr: 0.5 } } />\n\t\t\t\t\t<Typography variant=\"subtitle2\">{ __( 'Variables', 'elementor' ) }</Typography>\n\t\t\t\t\t<CloseButton\n\t\t\t\t\t\tslotProps={ { icon: { fontSize: 'tiny' } } }\n\t\t\t\t\t\tsx={ { ml: 'auto' } }\n\t\t\t\t\t\tonClick={ closePopover }\n\t\t\t\t\t/>\n\t\t\t\t</Stack>\n\t\t\t\t{ children( { closePopover } ) }\n\t\t\t</Popover>\n\t\t</Box>\n\t);\n};\n","import * as React from 'react';\nimport { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing-panel';\nimport { ColorFilterIcon } from '@elementor/icons';\nimport { __ } from '@wordpress/i18n';\n\nimport { ColorVariablesSelection } from '../components/color-variables-selection';\nimport { supportsColorVariables } from '../utils';\n\nexport const usePropColorVariableAction = (): PopoverActionProps => {\n\tconst { propType } = useBoundProp();\n\n\tconst visible = !! propType && supportsColorVariables( propType );\n\n\treturn {\n\t\tvisible,\n\t\ticon: ColorFilterIcon,\n\t\ttitle: __( 'Variables', 'elementor' ),\n\t\tpopoverContent: ( { closePopover } ) => <ColorVariablesSelection onSelect={ closePopover } />,\n\t};\n};\n","import { createPropUtils } from '@elementor/editor-props';\nimport { z } from '@elementor/schema';\n\nexport const fontVariablePropTypeUtil = createPropUtils( 'global-font-variable', z.string() );\n","import { type PropType, type PropValue } from '@elementor/editor-props';\n\nimport { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';\nimport { fontVariablePropTypeUtil } from './prop-types/font-variable-prop-type';\n\nexport const hasAssignedColorVariable = ( propValue: PropValue ): boolean => {\n\treturn !! colorVariablePropTypeUtil.isValid( propValue );\n};\n\nexport const supportsColorVariables = ( propType: PropType ): boolean => {\n\treturn propType.kind === 'union' && colorVariablePropTypeUtil.key in propType.prop_types;\n};\n\nexport const hasAssignedFontVariable = ( propValue: PropValue ): boolean => {\n\treturn !! fontVariablePropTypeUtil.isValid( propValue );\n};\n\nexport const supportsFontVariables = ( propType: PropType ): boolean => {\n\treturn propType.kind === 'union' && fontVariablePropTypeUtil.key in propType.prop_types;\n};\n","import { createTransformer } from '@elementor/editor-canvas';\n\nexport const variableTransformer = createTransformer( ( value: string ) => {\n\tif ( ! value.trim() ) {\n\t\treturn null;\n\t}\n\n\treturn `var(--${ value })`;\n} );\n","import { styleTransformersRegistry } from '@elementor/editor-canvas';\nimport { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';\n\nimport { FontVariablesSelectionControl } from './controls/font-variables-selection-control';\nimport { usePropFontVariableAction } from './hooks/use-prop-font-variable-action';\nimport { fontVariablePropTypeUtil } from './prop-types/font-variable-prop-type';\nimport { variableTransformer } from './transformers/variable-transformer';\nimport { hasAssignedFontVariable } from './utils';\n\nconst { registerPopoverAction } = controlActionsMenu;\n\nexport function initFontVariables() {\n\tregisterControlReplacement( {\n\t\tcomponent: FontVariablesSelectionControl,\n\t\tcondition: ( { value } ) => hasAssignedFontVariable( value ),\n\t} );\n\n\tregisterPopoverAction( {\n\t\tid: 'font-variables',\n\t\tuseProps: usePropFontVariableAction,\n\t} );\n\n\tstyleTransformersRegistry.register( fontVariablePropTypeUtil.key, variableTransformer );\n}\n","import * as React from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\n\nimport { FontVariablesSelection } from '../components/font-variables-selection';\nimport { VariablesSelectionPopover } from '../components/variables-selection-popover';\nimport { useVariable } from '../hooks/use-prop-variables';\nimport { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';\n\nexport const FontVariablesSelectionControl = () => {\n\tconst { setValue } = useBoundProp();\n\tconst { value: variableValue } = useBoundProp( fontVariablePropTypeUtil );\n\n\tconst unlinkVariable = () => {\n\t\tsetValue( null );\n\t};\n\n\tconst selectedVariable = useVariable( fontVariablePropTypeUtil.key, variableValue );\n\n\tif ( ! selectedVariable ) {\n\t\tthrow new Error( `Global font variable ${ variableValue } not found` );\n\t}\n\n\treturn (\n\t\t<VariablesSelectionPopover selectedVariable={ selectedVariable } unlinkVariable={ unlinkVariable }>\n\t\t\t{ ( { closePopover } ) => <FontVariablesSelection onSelect={ closePopover } /> }\n\t\t</VariablesSelectionPopover>\n\t);\n};\n","import * as React from 'react';\nimport { Fragment } from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { EditIcon, TextIcon } from '@elementor/icons';\nimport { Box, Divider, ListItemIcon, ListItemText, MenuList } from '@elementor/ui';\n\nimport { usePropVariables } from '../hooks/use-prop-variables';\nimport { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';\nimport { type Variable } from '../types';\nimport { StyledMenuItem } from './styled-menu-item';\n\ntype Props = {\n\tonSelect?: () => void;\n};\n\nexport const FontVariablesSelection = ( { onSelect }: Props ) => {\n\tconst { value: variable, setValue: setVariable } = useBoundProp( fontVariablePropTypeUtil );\n\n\tconst variables = usePropVariables( fontVariablePropTypeUtil.key );\n\n\tconst handleSetVariable = ( newValue: Variable ) => {\n\t\tsetVariable( newValue.key );\n\n\t\tonSelect?.();\n\t};\n\n\treturn (\n\t\t<Fragment>\n\t\t\t<Divider />\n\t\t\t<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>\n\t\t\t\t<MenuList role=\"listbox\" tabIndex={ 0 }>\n\t\t\t\t\t{ variables.map( ( { value, label, key } ) => (\n\t\t\t\t\t\t<StyledMenuItem\n\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\tonClick={ () => handleSetVariable( { value, label, key } ) }\n\t\t\t\t\t\t\tselected={ key === variable }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ListItemIcon>\n\t\t\t\t\t\t\t\t<TextIcon />\n\t\t\t\t\t\t\t</ListItemIcon>\n\t\t\t\t\t\t\t<ListItemText\n\t\t\t\t\t\t\t\tprimary={ label }\n\t\t\t\t\t\t\t\tsecondary={ value }\n\t\t\t\t\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\t\t\t\t\tvariant: 'body2',\n\t\t\t\t\t\t\t\t\tcolor: 'text.secondary',\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\tlineHeight: 2,\n\t\t\t\t\t\t\t\t\t\tdisplay: 'inline-block',\n\t\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t\t\ttextOverflow: 'ellipsis',\n\t\t\t\t\t\t\t\t\t\twhiteSpace: 'nowrap',\n\t\t\t\t\t\t\t\t\t\tmaxWidth: '81px',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsecondaryTypographyProps={ {\n\t\t\t\t\t\t\t\t\tvariant: 'caption',\n\t\t\t\t\t\t\t\t\tcolor: 'text.tertiary',\n\t\t\t\t\t\t\t\t\tstyle: { marginTop: '1px', lineHeight: '1' },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsx={ { display: 'flex', alignItems: 'center', gap: 1 } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<EditIcon color=\"action\" fontSize=\"inherit\" sx={ { mx: 1, opacity: '0' } } />\n\t\t\t\t\t\t</StyledMenuItem>\n\t\t\t\t\t) ) }\n\t\t\t\t</MenuList>\n\t\t\t</Box>\n\t\t</Fragment>\n\t);\n};\n","import * as React from 'react';\nimport { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing-panel';\nimport { ColorFilterIcon } from '@elementor/icons';\nimport { __ } from '@wordpress/i18n';\n\nimport { FontVariablesSelection } from '../components/font-variables-selection';\nimport { supportsFontVariables } from '../utils';\n\nexport const usePropFontVariableAction = (): PopoverActionProps => {\n\tconst { propType } = useBoundProp();\n\n\tconst visible = !! propType && supportsFontVariables( propType );\n\n\treturn {\n\t\tvisible,\n\t\ticon: ColorFilterIcon,\n\t\ttitle: __( 'Variables', 'elementor' ),\n\t\tpopoverContent: ( { closePopover } ) => <FontVariablesSelection onSelect={ closePopover } />,\n\t};\n};\n","import { initColorVariables } from './init-color-variables';\nimport { initFontVariables } from './init-font-variables';\n\nexport function init() {\n\tinitColorVariables();\n\n\tinitFontVariables();\n}\n"],"mappings":"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","names":["import_editor_canvas","import_editor_editing_panel","React","import_editor_controls","import_react","import_ui","import_ui","variables","React","import_react","import_icons","import_ui","Tag","React","import_icons","import_i18n","import_editor_props","import_schema","import_editor_canvas","import_editor_editing_panel","React","import_editor_controls","React","import_react","import_editor_controls","import_icons","import_ui","variables","React","import_editor_editing_panel","import_icons","import_i18n","registerPopoverAction"]}
+{"version":3,"sources":["../src/index.ts","../src/init-color-variables.ts","../src/controls/color-variables-selection-control.tsx","../src/components/color-indicator.tsx","../src/components/color-variables-selection.tsx","../src/hooks/use-prop-variables.ts","../src/prop-types/color-variable-prop-type.ts","../src/components/styled-menu-item.tsx","../src/components/variables-selection-popover.tsx","../src/components/color-variable-creation.tsx","../src/hooks/use-prop-color-variable-action.tsx","../src/prop-types/font-variable-prop-type.ts","../src/utils.ts","../src/transformers/variable-transformer.ts","../src/init-font-variables.ts","../src/controls/font-variables-selection-control.tsx","../src/components/font-variables-selection.tsx","../src/hooks/use-prop-font-variable-action.tsx","../src/init.ts"],"sourcesContent":["export { init } from './init';\n","import { styleTransformersRegistry } from '@elementor/editor-canvas';\nimport { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';\n\nimport { ColorVariablesSelectionControl } from './controls/color-variables-selection-control';\nimport { usePropColorVariableAction } from './hooks/use-prop-color-variable-action';\nimport { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';\nimport { variableTransformer } from './transformers/variable-transformer';\nimport { hasAssignedColorVariable } from './utils';\n\nconst { registerPopoverAction } = controlActionsMenu;\n\nexport function initColorVariables() {\n\tregisterControlReplacement( {\n\t\tcomponent: ColorVariablesSelectionControl,\n\t\tcondition: ( { value } ) => hasAssignedColorVariable( value ),\n\t} );\n\n\tregisterPopoverAction( {\n\t\tid: 'color-variables',\n\t\tuseProps: usePropColorVariableAction,\n\t} );\n\n\tstyleTransformersRegistry.register( colorVariablePropTypeUtil.key, variableTransformer );\n}\n","import * as React from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { colorPropTypeUtil } from '@elementor/editor-props';\n\nimport { ColorIndicator } from '../components/color-indicator';\nimport { ColorVariablesSelection } from '../components/color-variables-selection';\nimport { VariablesSelectionPopover } from '../components/variables-selection-popover';\nimport { useVariable } from '../hooks/use-prop-variables';\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\n\nexport const ColorVariablesSelectionControl = () => {\n\tconst { setValue } = useBoundProp();\n\tconst { value: variableValue } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst selectedVariable = useVariable( colorVariablePropTypeUtil.key, variableValue );\n\n\tif ( ! selectedVariable ) {\n\t\tthrow new Error( `Global color variable ${ variableValue } not found` );\n\t}\n\n\tconst unlinkVariable = () => {\n\t\tsetValue( colorPropTypeUtil.create( selectedVariable.value ) );\n\t};\n\n\treturn (\n\t\t<VariablesSelectionPopover\n\t\t\tselectedVariable={ selectedVariable }\n\t\t\tunlinkVariable={ unlinkVariable }\n\t\t\tstartTagAdornment={ <ColorIndicator size=\"inherit\" component=\"span\" value={ selectedVariable.value } /> }\n\t\t>\n\t\t\t{ ( { closePopover } ) => <ColorVariablesSelection onSelect={ closePopover } /> }\n\t\t</VariablesSelectionPopover>\n\t);\n};\n","import { styled, UnstableColorIndicator } from '@elementor/ui';\n\nexport const ColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {\n\tborderRadius: `${ theme.shape.borderRadius / 2 }px`,\n} ) );\n","import * as React from 'react';\nimport { Fragment } from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { EditIcon } from '@elementor/icons';\nimport { Box, Divider, ListItemIcon, ListItemText, MenuList } from '@elementor/ui';\n\nimport { usePropVariables } from '../hooks/use-prop-variables';\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\nimport { type Variable } from '../types';\nimport { ColorIndicator } from './color-indicator';\nimport { StyledMenuItem } from './styled-menu-item';\n\ntype Props = {\n\tonSelect?: () => void;\n};\n\nexport const ColorVariablesSelection = ( { onSelect }: Props ) => {\n\tconst { value: variable, setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst variables = usePropVariables( colorVariablePropTypeUtil.key );\n\n\tconst handleSetColorVariable = ( newValue: Variable ) => {\n\t\tsetVariable( newValue.key );\n\n\t\tonSelect?.();\n\t};\n\n\treturn (\n\t\t<Fragment>\n\t\t\t<Divider />\n\t\t\t<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>\n\t\t\t\t<MenuList role=\"listbox\" tabIndex={ 0 }>\n\t\t\t\t\t{ variables.map( ( { value, label, key } ) => (\n\t\t\t\t\t\t<StyledMenuItem\n\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\tonClick={ () => handleSetColorVariable( { value, label, key } ) }\n\t\t\t\t\t\t\tselected={ key === variable }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ListItemIcon>\n\t\t\t\t\t\t\t\t<ColorIndicator size=\"inherit\" component=\"span\" value={ value } />\n\t\t\t\t\t\t\t</ListItemIcon>\n\t\t\t\t\t\t\t<ListItemText\n\t\t\t\t\t\t\t\tprimary={ label }\n\t\t\t\t\t\t\t\tsecondary={ value }\n\t\t\t\t\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\t\t\t\t\tvariant: 'body2',\n\t\t\t\t\t\t\t\t\tcolor: 'text.secondary',\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\tlineHeight: 2,\n\t\t\t\t\t\t\t\t\t\tdisplay: 'inline-block',\n\t\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t\t\ttextOverflow: 'ellipsis',\n\t\t\t\t\t\t\t\t\t\twhiteSpace: 'nowrap',\n\t\t\t\t\t\t\t\t\t\tmaxWidth: '81px',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsecondaryTypographyProps={ {\n\t\t\t\t\t\t\t\t\tvariant: 'caption',\n\t\t\t\t\t\t\t\t\tcolor: 'text.tertiary',\n\t\t\t\t\t\t\t\t\tstyle: { marginTop: '1px', lineHeight: '1' },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsx={ { display: 'flex', alignItems: 'center', gap: 1 } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<EditIcon color=\"action\" fontSize=\"inherit\" sx={ { mx: 1, opacity: '0' } } />\n\t\t\t\t\t\t</StyledMenuItem>\n\t\t\t\t\t) ) }\n\t\t\t\t</MenuList>\n\t\t\t</Box>\n\t\t</Fragment>\n\t);\n};\n","import { useMemo } from 'react';\n\nimport { type Variable } from '../types';\n\ntype VariableData = {\n\tvalue: string;\n\tlabel: string;\n};\ntype Variables = Record< string, VariableData >;\n\ntype VariablesGroup = Record< string, Variables >;\n\nexport const usePropVariables = ( propTypeKey: string ) => {\n\treturn useMemo( () => normalizeVariables( propTypeKey ), [ propTypeKey ] );\n};\n\nexport const useVariable = ( propTypeKey: string, key: string ) => {\n\tif ( ! variables[ propTypeKey ]?.[ key ] ) {\n\t\treturn null;\n\t}\n\n\treturn {\n\t\t...variables[ propTypeKey ][ key ],\n\t\tkey,\n\t};\n};\n\nconst normalizeVariables = ( propTypeKey: string ) => {\n\treturn Object.entries( variables[ propTypeKey ] || {} ).map( ( [ key, { label, value } ] ) => ( {\n\t\tkey,\n\t\tlabel,\n\t\tvalue,\n\t} ) );\n};\n\nexport const createVariable = ( propTypeKey: string, variable: VariableData ) => {\n\tconst id = generateId( 'e-gv', Object.keys( variables[ propTypeKey ] ).length );\n\n\tconst newVariable: Variable = {\n\t\tvalue: variable.value,\n\t\tlabel: variable.label,\n\t\tkey: propTypeKey,\n\t};\n\n\tvariables[ propTypeKey ][ id ] = newVariable || {};\n\n\treturn id;\n};\n\n// @ts-expect-error the temporary solution to get the list of variables from the server\nconst variables: VariablesGroup = window?.ElementorV4Variables || {};\n\nconst generateId = ( prefix: string, variablesCount: number ) => {\n\tconst randomHex = Math.random().toString( 16 ).slice( 2, 9 );\n\n\treturn `${ prefix }${ randomHex }${ variablesCount }`;\n};\n","import { createPropUtils } from '@elementor/editor-props';\nimport { z } from '@elementor/schema';\n\nexport const colorVariablePropTypeUtil = createPropUtils( 'global-color-variable', z.string() );\n","import { MenuItem, styled } from '@elementor/ui';\n\nexport const StyledMenuItem = styled( MenuItem )( () => ( {\n\tpl: 2,\n\tpr: 1,\n\tpy: 0.5,\n\t'&:hover .MuiSvgIcon-root': {\n\t\topacity: 1,\n\t},\n} ) );\n","import * as React from 'react';\nimport { useId, useRef } from 'react';\nimport { ColorFilterIcon, DetachIcon, PlusIcon } from '@elementor/icons';\nimport {\n\tbindPopover,\n\tbindTrigger,\n\tBox,\n\tCloseButton,\n\tIconButton,\n\tPopover,\n\tStack,\n\tTypography,\n\tUnstableTag as Tag,\n\tusePopupState,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type Variable } from '../types';\nimport { ColorVariableCreation } from './color-variable-creation';\n\ntype Props = {\n\tselectedVariable: Variable;\n\tunlinkVariable: () => void;\n\tchildren: ( { closePopover }: { closePopover: () => void } ) => React.ReactNode;\n\tstartTagAdornment?: React.ReactNode;\n};\n\nexport const VariablesSelectionPopover = ( {\n\tselectedVariable,\n\tunlinkVariable,\n\tstartTagAdornment,\n\tchildren,\n}: Props ) => {\n\tconst id = useId();\n\tconst popupState = usePopupState( { variant: 'popover', popupId: `elementor-variables-action-${ id }` } );\n\tconst creationPopupState = usePopupState( { variant: 'popover', popupId: `elementor-variables-creation-${ id }` } );\n\n\tconst closePopover = () => popupState.close();\n\n\tconst handleCreateButtonClick = ( event: React.MouseEvent ) => {\n\t\tclosePopover();\n\t\tbindTrigger( creationPopupState ).onClick( event );\n\t};\n\n\tconst anchorRef = useRef< HTMLDivElement >( null );\n\tconst { label } = selectedVariable;\n\n\treturn (\n\t\t<Box ref={ anchorRef }>\n\t\t\t<Tag\n\t\t\t\tfullWidth\n\t\t\t\tshowActionsOnHover\n\t\t\t\t{ ...bindTrigger( popupState ) }\n\t\t\t\tstartIcon={\n\t\t\t\t\t<Stack spacing={ 1 } direction=\"row\" alignItems=\"center\">\n\t\t\t\t\t\t{ startTagAdornment }\n\t\t\t\t\t\t<ColorFilterIcon fontSize={ 'inherit' } sx={ { mr: 1 } } />\n\t\t\t\t\t</Stack>\n\t\t\t\t}\n\t\t\t\tlabel={\n\t\t\t\t\t<Box sx={ { display: 'inline-grid' } }>\n\t\t\t\t\t\t<Typography sx={ { textOverflow: 'ellipsis', overflowX: 'hidden' } } variant=\"subtitle2\">\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t}\n\t\t\t\tactions={\n\t\t\t\t\t<IconButton size=\"tiny\" onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>\n\t\t\t\t\t\t<DetachIcon fontSize=\"tiny\" />\n\t\t\t\t\t</IconButton>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Popover\n\t\t\t\t{ ...bindPopover( popupState ) }\n\t\t\t\tdisableScrollLock\n\t\t\t\tanchorEl={ anchorRef.current }\n\t\t\t\tanchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }\n\t\t\t\ttransformOrigin={ { vertical: 'top', horizontal: 'right' } }\n\t\t\t>\n\t\t\t\t<Stack direction=\"row\" alignItems=\"center\" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>\n\t\t\t\t\t<ColorFilterIcon fontSize=\"tiny\" sx={ { mr: 0.5 } } />\n\t\t\t\t\t<Typography variant=\"subtitle2\">{ __( 'Variables', 'elementor' ) }</Typography>\n\t\t\t\t\t<Stack direction=\"row\" sx={ { ml: 'auto' } }>\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t{ ...bindTrigger( creationPopupState ) }\n\t\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\t\tonClick={ handleCreateButtonClick }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<PlusIcon fontSize=\"tiny\" />\n\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t\t<CloseButton slotProps={ { icon: { fontSize: 'tiny' } } } onClick={ closePopover } />\n\t\t\t\t\t</Stack>\n\t\t\t\t</Stack>\n\t\t\t\t{ children?.( { closePopover } ) }\n\t\t\t</Popover>\n\n\t\t\t<ColorVariableCreation popupState={ creationPopupState } />\n\t\t</Box>\n\t);\n};\n","import * as React from 'react';\nimport { useRef, useState } from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { BrushIcon } from '@elementor/icons';\nimport {\n\tbindPopover,\n\tBox,\n\tButton,\n\tCardActions,\n\tCloseButton,\n\tDivider,\n\tFormLabel,\n\tGrid,\n\tPopover,\n\ttype PopupState,\n\tStack,\n\tTextField,\n\tTypography,\n\tUnstableColorField,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { createVariable } from '../hooks/use-prop-variables';\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\n\nexport const ColorVariableCreation = ( { popupState }: { popupState: PopupState } ) => {\n\tconst { setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );\n\n\tconst [ color, setColor ] = useState( '' );\n\tconst [ label, setLabel ] = useState( '' );\n\n\tconst anchorRef = useRef< HTMLDivElement >( null );\n\n\tconst resetFields = () => {\n\t\tsetColor( '' );\n\t\tsetLabel( '' );\n\t};\n\n\tconst closePopover = () => {\n\t\tresetFields();\n\t\tpopupState.close();\n\t};\n\n\tconst handleCreate = () => {\n\t\tconst key = createVariable( colorVariablePropTypeUtil.key, { label, value: color } );\n\t\tsetVariable( key );\n\t\tclosePopover();\n\t};\n\n\tconst isInValidForm = () => {\n\t\treturn ! color?.trim() || ! label?.trim();\n\t};\n\n\treturn (\n\t\t<Box ref={ anchorRef }>\n\t\t\t<Popover\n\t\t\t\t{ ...bindPopover( popupState ) }\n\t\t\t\tanchorEl={ anchorRef.current }\n\t\t\t\tanchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }\n\t\t\t\ttransformOrigin={ { vertical: 'top', horizontal: 'right' } }\n\t\t\t>\n\t\t\t\t<Stack direction=\"row\" alignItems=\"center\" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>\n\t\t\t\t\t<BrushIcon fontSize=\"tiny\" sx={ { mr: 0.5 } } />\n\t\t\t\t\t<Typography variant=\"subtitle2\">{ __( 'Create variable', 'elementor' ) }</Typography>\n\t\t\t\t\t<CloseButton\n\t\t\t\t\t\tslotProps={ { icon: { fontSize: 'small' } } }\n\t\t\t\t\t\tsx={ { ml: 'auto' } }\n\t\t\t\t\t\tonClick={ closePopover }\n\t\t\t\t\t/>\n\t\t\t\t</Stack>\n\n\t\t\t\t<Divider />\n\n\t\t\t\t<Stack p={ 1.5 } gap={ 1.5 }>\n\t\t\t\t\t<Grid container gap={ 0.75 } alignItems=\"center\">\n\t\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t\t<FormLabel size=\"small\">{ __( 'Name', 'elementor' ) }</FormLabel>\n\t\t\t\t\t\t</Grid>\n\t\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t\t<TextField\n\t\t\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\t\t\tvalue={ label }\n\t\t\t\t\t\t\t\tonChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => setLabel( e.target.value ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Grid>\n\t\t\t\t\t</Grid>\n\n\t\t\t\t\t<Grid container gap={ 0.75 } alignItems=\"center\">\n\t\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t\t<FormLabel size=\"small\">{ __( 'Value', 'elementor' ) }</FormLabel>\n\t\t\t\t\t\t</Grid>\n\t\t\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t\t\t<UnstableColorField\n\t\t\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\t\t\tvalue={ color }\n\t\t\t\t\t\t\t\tonChange={ setColor }\n\t\t\t\t\t\t\t\tslotProps={ {\n\t\t\t\t\t\t\t\t\tcolorPicker: {\n\t\t\t\t\t\t\t\t\t\tanchorEl: anchorRef.current,\n\t\t\t\t\t\t\t\t\t\tanchorOrigin: { vertical: 'top', horizontal: 'right' },\n\t\t\t\t\t\t\t\t\t\ttransformOrigin: { vertical: 'top', horizontal: -10 },\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Grid>\n\t\t\t\t\t</Grid>\n\t\t\t\t</Stack>\n\n\t\t\t\t<CardActions>\n\t\t\t\t\t<Button size=\"small\" onClick={ closePopover } color=\"secondary\" variant=\"text\">\n\t\t\t\t\t\t{ __( 'Cancel', 'elementor' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button size=\"small\" variant=\"contained\" disabled={ isInValidForm() } onClick={ handleCreate }>\n\t\t\t\t\t\t{ __( 'Create', 'elementor' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</CardActions>\n\t\t\t</Popover>\n\t\t</Box>\n\t);\n};\n","import * as React from 'react';\nimport { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing-panel';\nimport { ColorFilterIcon } from '@elementor/icons';\nimport { __ } from '@wordpress/i18n';\n\nimport { ColorVariablesSelection } from '../components/color-variables-selection';\nimport { supportsColorVariables } from '../utils';\n\nexport const usePropColorVariableAction = (): PopoverActionProps => {\n\tconst { propType } = useBoundProp();\n\n\tconst visible = !! propType && supportsColorVariables( propType );\n\n\treturn {\n\t\tvisible,\n\t\ticon: ColorFilterIcon,\n\t\ttitle: __( 'Variables', 'elementor' ),\n\t\tpopoverContent: ( { closePopover } ) => <ColorVariablesSelection onSelect={ closePopover } />,\n\t};\n};\n","import { createPropUtils } from '@elementor/editor-props';\nimport { z } from '@elementor/schema';\n\nexport const fontVariablePropTypeUtil = createPropUtils( 'global-font-variable', z.string() );\n","import { type PropType, type PropValue } from '@elementor/editor-props';\n\nimport { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';\nimport { fontVariablePropTypeUtil } from './prop-types/font-variable-prop-type';\n\nexport const hasAssignedColorVariable = ( propValue: PropValue ): boolean => {\n\treturn !! colorVariablePropTypeUtil.isValid( propValue );\n};\n\nexport const supportsColorVariables = ( propType: PropType ): boolean => {\n\treturn propType.kind === 'union' && colorVariablePropTypeUtil.key in propType.prop_types;\n};\n\nexport const hasAssignedFontVariable = ( propValue: PropValue ): boolean => {\n\treturn !! fontVariablePropTypeUtil.isValid( propValue );\n};\n\nexport const supportsFontVariables = ( propType: PropType ): boolean => {\n\treturn propType.kind === 'union' && fontVariablePropTypeUtil.key in propType.prop_types;\n};\n","import { createTransformer } from '@elementor/editor-canvas';\n\nexport const variableTransformer = createTransformer( ( value: string ) => {\n\tif ( ! value.trim() ) {\n\t\treturn null;\n\t}\n\n\treturn `var(--${ value })`;\n} );\n","import { styleTransformersRegistry } from '@elementor/editor-canvas';\nimport { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';\n\nimport { FontVariablesSelectionControl } from './controls/font-variables-selection-control';\nimport { usePropFontVariableAction } from './hooks/use-prop-font-variable-action';\nimport { fontVariablePropTypeUtil } from './prop-types/font-variable-prop-type';\nimport { variableTransformer } from './transformers/variable-transformer';\nimport { hasAssignedFontVariable } from './utils';\n\nconst { registerPopoverAction } = controlActionsMenu;\n\nexport function initFontVariables() {\n\tregisterControlReplacement( {\n\t\tcomponent: FontVariablesSelectionControl,\n\t\tcondition: ( { value } ) => hasAssignedFontVariable( value ),\n\t} );\n\n\tregisterPopoverAction( {\n\t\tid: 'font-variables',\n\t\tuseProps: usePropFontVariableAction,\n\t} );\n\n\tstyleTransformersRegistry.register( fontVariablePropTypeUtil.key, variableTransformer );\n}\n","import * as React from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { stringPropTypeUtil } from '@elementor/editor-props';\n\nimport { FontVariablesSelection } from '../components/font-variables-selection';\nimport { VariablesSelectionPopover } from '../components/variables-selection-popover';\nimport { useVariable } from '../hooks/use-prop-variables';\nimport { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';\n\nexport const FontVariablesSelectionControl = () => {\n\tconst { setValue: setFontFamily } = useBoundProp();\n\tconst { value: variableValue } = useBoundProp( fontVariablePropTypeUtil );\n\n\tconst selectedVariable = useVariable( fontVariablePropTypeUtil.key, variableValue );\n\n\tif ( ! selectedVariable ) {\n\t\tthrow new Error( `Global font variable ${ variableValue } not found` );\n\t}\n\n\tconst unlinkVariable = () => {\n\t\tsetFontFamily( stringPropTypeUtil.create( selectedVariable.value ) );\n\t};\n\n\treturn (\n\t\t<VariablesSelectionPopover selectedVariable={ selectedVariable } unlinkVariable={ unlinkVariable }>\n\t\t\t{ ( { closePopover } ) => <FontVariablesSelection onSelect={ closePopover } /> }\n\t\t</VariablesSelectionPopover>\n\t);\n};\n","import * as React from 'react';\nimport { Fragment } from 'react';\nimport { useBoundProp } from '@elementor/editor-controls';\nimport { EditIcon, TextIcon } from '@elementor/icons';\nimport { Box, Divider, ListItemIcon, ListItemText, MenuList } from '@elementor/ui';\n\nimport { usePropVariables } from '../hooks/use-prop-variables';\nimport { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';\nimport { type Variable } from '../types';\nimport { StyledMenuItem } from './styled-menu-item';\n\ntype Props = {\n\tonSelect?: () => void;\n};\n\nexport const FontVariablesSelection = ( { onSelect }: Props ) => {\n\tconst { value: variable, setValue: setVariable } = useBoundProp( fontVariablePropTypeUtil );\n\n\tconst variables = usePropVariables( fontVariablePropTypeUtil.key );\n\n\tconst handleSetVariable = ( newValue: Variable ) => {\n\t\tsetVariable( newValue.key );\n\n\t\tonSelect?.();\n\t};\n\n\treturn (\n\t\t<Fragment>\n\t\t\t<Divider />\n\t\t\t<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>\n\t\t\t\t<MenuList role=\"listbox\" tabIndex={ 0 }>\n\t\t\t\t\t{ variables.map( ( { value, label, key } ) => (\n\t\t\t\t\t\t<StyledMenuItem\n\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\tonClick={ () => handleSetVariable( { value, label, key } ) }\n\t\t\t\t\t\t\tselected={ key === variable }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ListItemIcon>\n\t\t\t\t\t\t\t\t<TextIcon />\n\t\t\t\t\t\t\t</ListItemIcon>\n\t\t\t\t\t\t\t<ListItemText\n\t\t\t\t\t\t\t\tprimary={ label }\n\t\t\t\t\t\t\t\tsecondary={ value }\n\t\t\t\t\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\t\t\t\t\tvariant: 'body2',\n\t\t\t\t\t\t\t\t\tcolor: 'text.secondary',\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\tlineHeight: 2,\n\t\t\t\t\t\t\t\t\t\tdisplay: 'inline-block',\n\t\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t\t\ttextOverflow: 'ellipsis',\n\t\t\t\t\t\t\t\t\t\twhiteSpace: 'nowrap',\n\t\t\t\t\t\t\t\t\t\tmaxWidth: '81px',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsecondaryTypographyProps={ {\n\t\t\t\t\t\t\t\t\tvariant: 'caption',\n\t\t\t\t\t\t\t\t\tcolor: 'text.tertiary',\n\t\t\t\t\t\t\t\t\tstyle: { marginTop: '1px', lineHeight: '1' },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsx={ { display: 'flex', alignItems: 'center', gap: 1 } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<EditIcon color=\"action\" fontSize=\"inherit\" sx={ { mx: 1, opacity: '0' } } />\n\t\t\t\t\t\t</StyledMenuItem>\n\t\t\t\t\t) ) }\n\t\t\t\t</MenuList>\n\t\t\t</Box>\n\t\t</Fragment>\n\t);\n};\n","import * as React from 'react';\nimport { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing-panel';\nimport { ColorFilterIcon } from '@elementor/icons';\nimport { __ } from '@wordpress/i18n';\n\nimport { FontVariablesSelection } from '../components/font-variables-selection';\nimport { supportsFontVariables } from '../utils';\n\nexport const usePropFontVariableAction = (): PopoverActionProps => {\n\tconst { propType } = useBoundProp();\n\n\tconst visible = !! propType && supportsFontVariables( propType );\n\n\treturn {\n\t\tvisible,\n\t\ticon: ColorFilterIcon,\n\t\ttitle: __( 'Variables', 'elementor' ),\n\t\tpopoverContent: ( { closePopover } ) => <FontVariablesSelection onSelect={ closePopover } />,\n\t};\n};\n","import { initColorVariables } from './init-color-variables';\nimport { initFontVariables } from './init-font-variables';\n\nexport function init() {\n\tinitColorVariables();\n\n\tinitFontVariables();\n}\n"],"mappings":"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","names":["import_editor_canvas","import_editor_editing_panel","React","import_editor_controls","import_editor_props","import_react","import_ui","import_ui","variables","React","import_react","import_icons","import_ui","import_i18n","React","import_react","import_editor_controls","import_icons","import_ui","Tag","React","import_icons","import_i18n","import_editor_props","import_schema","import_editor_canvas","import_editor_editing_panel","React","import_editor_controls","import_editor_props","React","import_react","import_editor_controls","import_icons","import_ui","variables","React","import_editor_editing_panel","import_icons","import_i18n","registerPopoverAction"]}