npm - @elementor/editor-variables - Versions diffs - 0.11.0 → 0.12.0 - Mend

@elementor/editor-variables 0.11.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/CHANGELOG.md +19 -0
package/dist/index.js +30 -15
package/dist/index.js.map +1 -1
package/dist/index.mjs +32 -20
package/dist/index.mjs.map +1 -1
package/package.json +6 -5
package/src/components/color-variable-creation.tsx +8 -11
package/src/components/variables-selection-popover.tsx +20 -19

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,24 @@
 # @elementor/editor-variables
+## 0.12.0
+### Minor Changes
+- 80dbf43: Extract popover headers to a standalone component inside the Editor UI package.
+### Patch Changes
+- Updated dependencies [56b4348]
+- Updated dependencies [ea5d3df]
+- Updated dependencies [80dbf43]
+- Updated dependencies [6eeb59e]
+- Updated dependencies [af4e938]
+- Updated dependencies [a0af69a]
+  - @elementor/editor-canvas@0.22.3
+  - @elementor/editor-editing-panel@1.44.0
+  - @elementor/editor-controls@0.36.0
+  - @elementor/editor-ui@0.11.0
 ## 0.11.0
 ### Minor Changes

package/dist/index.js CHANGED Viewed

@@ -382,6 +382,7 @@ var ColorVariablesSelection = ({ onSelect }) => {
 // src/components/variables-selection-popover.tsx
 var React3 = __toESM(require("react"));
 var import_react4 = require("react");
+var import_editor_ui2 = require("@elementor/editor-ui");
 var import_icons3 = require("@elementor/icons");
 var import_ui5 = require("@elementor/ui");
 var import_i18n2 = require("@wordpress/i18n");
@@ -390,9 +391,11 @@ var import_i18n2 = require("@wordpress/i18n");
 var React2 = __toESM(require("react"));
 var import_react3 = require("react");
 var import_editor_controls2 = require("@elementor/editor-controls");
+var import_editor_ui = require("@elementor/editor-ui");
 var import_icons2 = require("@elementor/icons");
 var import_ui4 = require("@elementor/ui");
 var import_i18n = require("@wordpress/i18n");
+var SIZE = "tiny";
 var ColorVariableCreation = ({ popupState }) => {
   const { setValue: setVariable } = (0, import_editor_controls2.useBoundProp)(colorVariablePropTypeUtil);
   const [color, setColor] = (0, import_react3.useState)("");
@@ -427,14 +430,14 @@ var ColorVariableCreation = ({ popupState }) => {
       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,
+    /* @__PURE__ */ React2.createElement(
+      import_editor_ui.PopoverHeader,
       {
-        slotProps: { icon: { fontSize: "small" } },
-        sx: { ml: "auto" },
-        onClick: closePopover
+        title: (0, import_i18n.__)("Create variable", "elementor"),
+        onClose: closePopover,
+        icon: /* @__PURE__ */ React2.createElement(import_icons2.BrushIcon, { fontSize: SIZE })
       }
-    )),
+    ),
     /* @__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,
@@ -465,6 +468,7 @@ var ColorVariableCreation = ({ popupState }) => {
 };
 // src/components/variables-selection-popover.tsx
+var SIZE2 = "tiny";
 var VariablesSelectionPopover = ({
   selectedVariable,
   unlinkVariable,
@@ -490,7 +494,7 @@ var VariablesSelectionPopover = ({
       ...(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" }))
+      actions: /* @__PURE__ */ React3.createElement(import_ui5.IconButton, { size: SIZE2, onClick: unlinkVariable, "aria-label": (0, import_i18n2.__)("Unlink", "elementor") }, /* @__PURE__ */ React3.createElement(import_icons3.DetachIcon, { fontSize: SIZE2 }))
     }
   ), /* @__PURE__ */ React3.createElement(
     import_ui5.Popover,
@@ -501,15 +505,26 @@ var VariablesSelectionPopover = ({
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" }
     },
-    /* @__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" } }, colorCreationEnabled && /* @__PURE__ */ React3.createElement(
-      import_ui5.IconButton,
+    /* @__PURE__ */ React3.createElement(
+      import_editor_ui2.PopoverHeader,
       {
-        ...(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 }))),
+        title: (0, import_i18n2.__)("Variables", "elementor"),
+        onClose: closePopover,
+        icon: /* @__PURE__ */ React3.createElement(import_icons3.ColorFilterIcon, { fontSize: SIZE2 }),
+        actions: [
+          /* @__PURE__ */ React3.createElement(
+            import_ui5.IconButton,
+            {
+              key: "createVariable",
+              ...(0, import_ui5.bindTrigger)(creationPopupState),
+              size: SIZE2,
+              onClick: handleCreateButtonClick
+            },
+            /* @__PURE__ */ React3.createElement(import_icons3.PlusIcon, { fontSize: SIZE2 })
+          )
+        ]
+      }
+    ),
     children?.({ closePopover })
   ), colorCreationEnabled && /* @__PURE__ */ React3.createElement(ColorVariableCreation, { popupState: creationPopupState }));
 };

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts","../src/init.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/api.ts","../src/storage.ts","../src/service.ts","../src/create-style-variables-repository.ts","../src/style-variables-repository.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/renderers/style-variables-renderer.tsx","../src/sync/get-canvas-iframe-document.ts"],"sourcesContent":["export { init } from './init';\n","import { injectIntoTop } from '@elementor/editor';\n\nimport { initColorVariables } from './init-color-variables';\nimport { initFontVariables } from './init-font-variables';\nimport { StyleVariablesRenderer } from './renderers/style-variables-renderer';\nimport { service as variablesService } from './service';\n\nexport function init() {\n\tinitColorVariables();\n\tinitFontVariables();\n\n\tvariablesService.init();\n\n\tinjectIntoTop( {\n\t\tid: 'canvas-style-variables-render',\n\t\tcomponent: StyleVariablesRenderer,\n\t} );\n}\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( 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 VariableKey } 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 = ( key: VariableKey ) => {\n\t\tsetVariable( 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( 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';\nimport { type PropKey } from '@elementor/editor-props';\n\nimport { service } from '../service';\nimport { type TVariable } from '../storage';\nimport { styleVariablesRepository } from '../style-variables-repository';\nimport { type Variable } from '../types';\n\nexport const usePropVariables = ( propKey: PropKey ) => {\n\treturn useMemo( () => normalizeVariables( propKey ), [ propKey ] );\n};\n\nexport const useVariable = ( key: string ) => {\n\tconst variables = service.variables();\n\n\tif ( ! variables?.[ key ] ) {\n\t\treturn null;\n\t}\n\n\treturn {\n\t\t...variables[ key ],\n\t\tkey,\n\t};\n};\n\nconst normalizeVariables = ( propKey: string ) => {\n\tconst variables = service.variables();\n\n\tstyleVariablesRepository.update( variables );\n\n\treturn Object.entries( variables )\n\t\t.filter( ( [ , { type } ] ) => type === propKey )\n\t\t.map( ( [ key, { label, value } ] ) => ( {\n\t\t\tkey,\n\t\t\tlabel,\n\t\t\tvalue,\n\t\t} ) );\n};\n\nexport const createVariable = ( newVariable: Variable ): Promise< string > => {\n\treturn service.create( newVariable ).then( ( { id, variable }: { id: string; variable: TVariable } ) => {\n\t\tstyleVariablesRepository.update( {\n\t\t\t[ id ]: variable,\n\t\t} );\n\t\treturn id;\n\t} );\n};\n","import { httpService } from '@elementor/http-client';\n\nconst BASE_PATH = 'elementor/v1/variables';\n\nexport const apiClient = {\n\tlist: () => {\n\t\treturn httpService().get( BASE_PATH + '/list' );\n\t},\n\n\tcreate: ( type: string, label: string, value: string ) => {\n\t\treturn httpService().post( BASE_PATH + '/create', {\n\t\t\ttype,\n\t\t\tlabel,\n\t\t\tvalue,\n\t\t} );\n\t},\n\n\tupdate: ( id: string, label: string, value: string ) => {\n\t\treturn httpService().put( BASE_PATH + '/update', {\n\t\t\tid,\n\t\t\tlabel,\n\t\t\tvalue,\n\t\t} );\n\t},\n\n\tdelete: ( id: string ) => {\n\t\treturn httpService().post( BASE_PATH + '/delete', { id } );\n\t},\n\n\trestore: ( id: string ) => {\n\t\treturn httpService().post( BASE_PATH + '/restore', { id } );\n\t},\n};\n","export type TVariable = {\n\ttype: string;\n\tlabel: string;\n\tvalue: string;\n\tdeleted?: boolean;\n\tdeleted_at?: string;\n};\n\nexport type TVariablesList = Record< string, TVariable >;\n\nconst STORAGE_KEY = 'elementor-global-variables';\nconst STORAGE_WATERMARK_KEY = 'elementor-global-variables-watermark';\n\nexport const OP_RW = 'RW';\nconst OP_RO = 'RO';\n\nexport class Storage {\n\tstate: {\n\t\twatermark: number;\n\t\tvariables: TVariablesList;\n\t};\n\n\tconstructor() {\n\t\tthis.state = {\n\t\t\twatermark: -1,\n\t\t\tvariables: {},\n\t\t};\n\t}\n\n\tload() {\n\t\tthis.state.watermark = parseInt( localStorage.getItem( STORAGE_WATERMARK_KEY ) \|\| '-1' );\n\t\tthis.state.variables = JSON.parse( localStorage.getItem( STORAGE_KEY ) \|\| '{}' ) as TVariablesList;\n\t\treturn this.state.variables;\n\t}\n\n\tfill( variables: TVariablesList, watermark: number ) {\n\t\tthis.state.watermark = watermark;\n\t\tthis.state.variables = variables;\n\n\t\tlocalStorage.setItem( STORAGE_WATERMARK_KEY, this.state.watermark.toString() );\n\t\tlocalStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );\n\t}\n\n\tadd( id: string, variable: TVariable ) {\n\t\tthis.load();\n\t\tthis.state.variables[ id ] = variable;\n\t\tlocalStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );\n\t}\n\n\tupdate( id: string, variable: TVariable ) {\n\t\tthis.load();\n\t\tthis.state.variables[ id ] = variable;\n\t\tlocalStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );\n\t}\n\n\twatermark( watermark: number ) {\n\t\tthis.state.watermark = watermark;\n\t\tlocalStorage.setItem( STORAGE_WATERMARK_KEY, this.state.watermark.toString() );\n\t}\n\n\twatermarkDiff( operation: string, newWatermark: number ) {\n\t\tconst diff = newWatermark - this.state.watermark;\n\n\t\tif ( OP_RW === operation ) {\n\t\t\treturn 1 !== diff;\n\t\t}\n\n\t\tif ( OP_RO === operation ) {\n\t\t\treturn 0 !== diff;\n\t\t}\n\n\t\treturn false;\n\t}\n}\n","import { apiClient } from './api';\nimport { OP_RW, Storage, type TVariable, type TVariablesList } from './storage';\n\nconst storage = new Storage();\n\nexport const service = {\n\tvariables: (): TVariablesList => {\n\t\treturn storage.load();\n\t},\n\n\tinit: () => {\n\t\tservice.load();\n\t},\n\n\tload: () => {\n\t\treturn apiClient\n\t\t\t.list()\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variables, watermark } = data;\n\n\t\t\t\tstorage.fill( variables, watermark );\n\n\t\t\t\treturn variables;\n\t\t\t} );\n\t},\n\n\tcreate: ( { type, label, value }: TVariable ) => {\n\t\treturn apiClient\n\t\t\t.create( type, label, value )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...createdVariable } = variable;\n\n\t\t\t\tstorage.add( variableId, createdVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: createdVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n\n\tupdate: ( id: string, { label, value }: TVariable ) => {\n\t\treturn apiClient\n\t\t\t.update( id, label, value )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...updatedVariable } = variable;\n\n\t\t\t\tstorage.update( variableId, updatedVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: updatedVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n\n\tdelete: ( id: string ) => {\n\t\treturn apiClient\n\t\t\t.delete( id )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...deletedVariable } = variable;\n\n\t\t\t\tstorage.update( variableId, deletedVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: deletedVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n\n\trestore: ( id: string ) => {\n\t\treturn apiClient\n\t\t\t.restore( id )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...restoredVariable } = variable;\n\n\t\t\t\tstorage.update( variableId, restoredVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: restoredVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n};\n\nconst handleWatermark = ( operation: string, newWatermark: number ) => {\n\tif ( storage.watermarkDiff( operation, newWatermark ) ) {\n\t\tsetTimeout( () => service.load(), 500 );\n\t}\n\tstorage.watermark( newWatermark );\n};\n","import { type StyleVariables, type Variables, type VariableValue } from './types';\n\ntype VariablesChangeCallback = ( variables: StyleVariables ) => void;\n\nexport const createStyleVariablesRepository = () => {\n\tconst variables: StyleVariables = {};\n\tlet subscription: VariablesChangeCallback;\n\n\tconst subscribe = ( cb: VariablesChangeCallback ) => {\n\t\tsubscription = cb;\n\n\t\treturn () => {\n\t\t\tsubscription = () => {};\n\t\t};\n\t};\n\n\tconst notify = () => {\n\t\tif ( typeof subscription === 'function' ) {\n\t\t\tsubscription( { ...variables } );\n\t\t}\n\t};\n\n\tconst shouldUpdate = ( key: string, newValue: VariableValue ): boolean => {\n\t\treturn ! ( key in variables ) \|\| variables[ key ] !== newValue;\n\t};\n\n\tconst applyUpdates = ( updatedVars: Variables ): boolean => {\n\t\tlet hasChanges = false;\n\n\t\tfor ( const [ key, { value } ] of Object.entries( updatedVars ) ) {\n\t\t\tif ( shouldUpdate( key, value ) ) {\n\t\t\t\tvariables[ key ] = value;\n\t\t\t\thasChanges = true;\n\t\t\t}\n\t\t}\n\n\t\treturn hasChanges;\n\t};\n\n\tconst update = ( updatedVars: Variables ) => {\n\t\tif ( applyUpdates( updatedVars ) ) {\n\t\t\tnotify();\n\t\t}\n\t};\n\n\treturn {\n\t\tsubscribe,\n\t\tupdate,\n\t};\n};\n","import { createStyleVariablesRepository } from './create-style-variables-repository';\n\nexport const styleVariablesRepository = createStyleVariablesRepository();\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 { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\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\tconst colorCreationEnabled = colorVariablePropTypeUtil.key === selectedVariable.type;\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{ colorCreationEnabled && (\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t{ ...bindTrigger( creationPopupState ) }\n\t\t\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\t\t\tonClick={ handleCreateButtonClick }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<PlusIcon fontSize=\"tiny\" />\n\t\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t\t) }\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{ colorCreationEnabled && <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\tcreateVariable( {\n\t\t\tvalue: color,\n\t\t\tlabel,\n\t\t\ttype: colorVariablePropTypeUtil.key,\n\t\t} ).then( ( key ) => {\n\t\t\tsetVariable( key );\n\t\t\tclosePopover();\n\t\t} );\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( 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 VariableKey } 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 = ( key: VariableKey ) => {\n\t\tsetVariable( 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( 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 * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport { Portal } from '@elementor/ui';\n\nimport { styleVariablesRepository } from '../style-variables-repository';\nimport { getCanvasIframeDocument } from '../sync/get-canvas-iframe-document';\nimport { type StyleVariables } from '../types';\n\nconst VARIABLES_WRAPPER = 'body';\n\nexport function StyleVariablesRenderer() {\n\tconst container = usePortalContainer();\n\tconst styleVariables = useStyleVariables();\n\n\tconst hasVariables = Object.keys( styleVariables ).length > 0;\n\n\tif ( ! container \|\| ! hasVariables ) {\n\t\treturn null;\n\t}\n\n\tconst cssVariables = convertToCssVariables( styleVariables );\n\tconst wrappedCss = `${ VARIABLES_WRAPPER }{${ cssVariables }}`;\n\n\treturn (\n\t\t<Portal container={ container }>\n\t\t\t<style data-e-style-id=\"e-variables\" key={ wrappedCss }>\n\t\t\t\t{ wrappedCss }\n\t\t\t</style>\n\t\t</Portal>\n\t);\n}\n\nfunction usePortalContainer() {\n\treturn useListenTo( commandEndEvent( 'editor/documents/attach-preview' ), () => getCanvasIframeDocument()?.head );\n}\n\nfunction useStyleVariables() {\n\tconst [ variables, setVariables ] = useState< StyleVariables >( {} );\n\n\tuseEffect( () => {\n\t\tconst unsubscribe = styleVariablesRepository.subscribe( setVariables );\n\n\t\treturn () => {\n\t\t\tunsubscribe();\n\t\t};\n\t}, [] );\n\n\treturn variables;\n}\n\nfunction convertToCssVariables( variables: StyleVariables ): string {\n\treturn Object.entries( variables )\n\t\t.map( ( [ key, value ] ) => `--${ key }:${ value };` )\n\t\t.join( '' );\n}\n","import type { CanvasExtendedWindow } from './types';\n\nexport function getCanvasIframeDocument() {\n\tconst extendedWindow = window as unknown as CanvasExtendedWindow;\n\n\treturn extendedWindow.elementor?.$preview?.[ 0 ]?.contentDocument;\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","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","React","import_editor_editing_panel","import_icons","import_i18n","registerPopoverAction","React","import_react","import_ui","useListenTo"]}
1	+ {"version":3,"sources":["../src/index.ts","../src/init.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/api.ts","../src/storage.ts","../src/service.ts","../src/create-style-variables-repository.ts","../src/style-variables-repository.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/renderers/style-variables-renderer.tsx","../src/sync/get-canvas-iframe-document.ts"],"sourcesContent":["export { init } from './init';\n","import { injectIntoTop } from '@elementor/editor';\n\nimport { initColorVariables } from './init-color-variables';\nimport { initFontVariables } from './init-font-variables';\nimport { StyleVariablesRenderer } from './renderers/style-variables-renderer';\nimport { service as variablesService } from './service';\n\nexport function init() {\n\tinitColorVariables();\n\tinitFontVariables();\n\n\tvariablesService.init();\n\n\tinjectIntoTop( {\n\t\tid: 'canvas-style-variables-render',\n\t\tcomponent: StyleVariablesRenderer,\n\t} );\n}\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( 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 VariableKey } 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 = ( key: VariableKey ) => {\n\t\tsetVariable( 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( 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';\nimport { type PropKey } from '@elementor/editor-props';\n\nimport { service } from '../service';\nimport { type TVariable } from '../storage';\nimport { styleVariablesRepository } from '../style-variables-repository';\nimport { type Variable } from '../types';\n\nexport const usePropVariables = ( propKey: PropKey ) => {\n\treturn useMemo( () => normalizeVariables( propKey ), [ propKey ] );\n};\n\nexport const useVariable = ( key: string ) => {\n\tconst variables = service.variables();\n\n\tif ( ! variables?.[ key ] ) {\n\t\treturn null;\n\t}\n\n\treturn {\n\t\t...variables[ key ],\n\t\tkey,\n\t};\n};\n\nconst normalizeVariables = ( propKey: string ) => {\n\tconst variables = service.variables();\n\n\tstyleVariablesRepository.update( variables );\n\n\treturn Object.entries( variables )\n\t\t.filter( ( [ , { type } ] ) => type === propKey )\n\t\t.map( ( [ key, { label, value } ] ) => ( {\n\t\t\tkey,\n\t\t\tlabel,\n\t\t\tvalue,\n\t\t} ) );\n};\n\nexport const createVariable = ( newVariable: Variable ): Promise< string > => {\n\treturn service.create( newVariable ).then( ( { id, variable }: { id: string; variable: TVariable } ) => {\n\t\tstyleVariablesRepository.update( {\n\t\t\t[ id ]: variable,\n\t\t} );\n\t\treturn id;\n\t} );\n};\n","import { httpService } from '@elementor/http-client';\n\nconst BASE_PATH = 'elementor/v1/variables';\n\nexport const apiClient = {\n\tlist: () => {\n\t\treturn httpService().get( BASE_PATH + '/list' );\n\t},\n\n\tcreate: ( type: string, label: string, value: string ) => {\n\t\treturn httpService().post( BASE_PATH + '/create', {\n\t\t\ttype,\n\t\t\tlabel,\n\t\t\tvalue,\n\t\t} );\n\t},\n\n\tupdate: ( id: string, label: string, value: string ) => {\n\t\treturn httpService().put( BASE_PATH + '/update', {\n\t\t\tid,\n\t\t\tlabel,\n\t\t\tvalue,\n\t\t} );\n\t},\n\n\tdelete: ( id: string ) => {\n\t\treturn httpService().post( BASE_PATH + '/delete', { id } );\n\t},\n\n\trestore: ( id: string ) => {\n\t\treturn httpService().post( BASE_PATH + '/restore', { id } );\n\t},\n};\n","export type TVariable = {\n\ttype: string;\n\tlabel: string;\n\tvalue: string;\n\tdeleted?: boolean;\n\tdeleted_at?: string;\n};\n\nexport type TVariablesList = Record< string, TVariable >;\n\nconst STORAGE_KEY = 'elementor-global-variables';\nconst STORAGE_WATERMARK_KEY = 'elementor-global-variables-watermark';\n\nexport const OP_RW = 'RW';\nconst OP_RO = 'RO';\n\nexport class Storage {\n\tstate: {\n\t\twatermark: number;\n\t\tvariables: TVariablesList;\n\t};\n\n\tconstructor() {\n\t\tthis.state = {\n\t\t\twatermark: -1,\n\t\t\tvariables: {},\n\t\t};\n\t}\n\n\tload() {\n\t\tthis.state.watermark = parseInt( localStorage.getItem( STORAGE_WATERMARK_KEY ) \|\| '-1' );\n\t\tthis.state.variables = JSON.parse( localStorage.getItem( STORAGE_KEY ) \|\| '{}' ) as TVariablesList;\n\t\treturn this.state.variables;\n\t}\n\n\tfill( variables: TVariablesList, watermark: number ) {\n\t\tthis.state.watermark = watermark;\n\t\tthis.state.variables = variables;\n\n\t\tlocalStorage.setItem( STORAGE_WATERMARK_KEY, this.state.watermark.toString() );\n\t\tlocalStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );\n\t}\n\n\tadd( id: string, variable: TVariable ) {\n\t\tthis.load();\n\t\tthis.state.variables[ id ] = variable;\n\t\tlocalStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );\n\t}\n\n\tupdate( id: string, variable: TVariable ) {\n\t\tthis.load();\n\t\tthis.state.variables[ id ] = variable;\n\t\tlocalStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );\n\t}\n\n\twatermark( watermark: number ) {\n\t\tthis.state.watermark = watermark;\n\t\tlocalStorage.setItem( STORAGE_WATERMARK_KEY, this.state.watermark.toString() );\n\t}\n\n\twatermarkDiff( operation: string, newWatermark: number ) {\n\t\tconst diff = newWatermark - this.state.watermark;\n\n\t\tif ( OP_RW === operation ) {\n\t\t\treturn 1 !== diff;\n\t\t}\n\n\t\tif ( OP_RO === operation ) {\n\t\t\treturn 0 !== diff;\n\t\t}\n\n\t\treturn false;\n\t}\n}\n","import { apiClient } from './api';\nimport { OP_RW, Storage, type TVariable, type TVariablesList } from './storage';\n\nconst storage = new Storage();\n\nexport const service = {\n\tvariables: (): TVariablesList => {\n\t\treturn storage.load();\n\t},\n\n\tinit: () => {\n\t\tservice.load();\n\t},\n\n\tload: () => {\n\t\treturn apiClient\n\t\t\t.list()\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variables, watermark } = data;\n\n\t\t\t\tstorage.fill( variables, watermark );\n\n\t\t\t\treturn variables;\n\t\t\t} );\n\t},\n\n\tcreate: ( { type, label, value }: TVariable ) => {\n\t\treturn apiClient\n\t\t\t.create( type, label, value )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...createdVariable } = variable;\n\n\t\t\t\tstorage.add( variableId, createdVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: createdVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n\n\tupdate: ( id: string, { label, value }: TVariable ) => {\n\t\treturn apiClient\n\t\t\t.update( id, label, value )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...updatedVariable } = variable;\n\n\t\t\t\tstorage.update( variableId, updatedVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: updatedVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n\n\tdelete: ( id: string ) => {\n\t\treturn apiClient\n\t\t\t.delete( id )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...deletedVariable } = variable;\n\n\t\t\t\tstorage.update( variableId, deletedVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: deletedVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n\n\trestore: ( id: string ) => {\n\t\treturn apiClient\n\t\t\t.restore( id )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...restoredVariable } = variable;\n\n\t\t\t\tstorage.update( variableId, restoredVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: restoredVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n};\n\nconst handleWatermark = ( operation: string, newWatermark: number ) => {\n\tif ( storage.watermarkDiff( operation, newWatermark ) ) {\n\t\tsetTimeout( () => service.load(), 500 );\n\t}\n\tstorage.watermark( newWatermark );\n};\n","import { type StyleVariables, type Variables, type VariableValue } from './types';\n\ntype VariablesChangeCallback = ( variables: StyleVariables ) => void;\n\nexport const createStyleVariablesRepository = () => {\n\tconst variables: StyleVariables = {};\n\tlet subscription: VariablesChangeCallback;\n\n\tconst subscribe = ( cb: VariablesChangeCallback ) => {\n\t\tsubscription = cb;\n\n\t\treturn () => {\n\t\t\tsubscription = () => {};\n\t\t};\n\t};\n\n\tconst notify = () => {\n\t\tif ( typeof subscription === 'function' ) {\n\t\t\tsubscription( { ...variables } );\n\t\t}\n\t};\n\n\tconst shouldUpdate = ( key: string, newValue: VariableValue ): boolean => {\n\t\treturn ! ( key in variables ) \|\| variables[ key ] !== newValue;\n\t};\n\n\tconst applyUpdates = ( updatedVars: Variables ): boolean => {\n\t\tlet hasChanges = false;\n\n\t\tfor ( const [ key, { value } ] of Object.entries( updatedVars ) ) {\n\t\t\tif ( shouldUpdate( key, value ) ) {\n\t\t\t\tvariables[ key ] = value;\n\t\t\t\thasChanges = true;\n\t\t\t}\n\t\t}\n\n\t\treturn hasChanges;\n\t};\n\n\tconst update = ( updatedVars: Variables ) => {\n\t\tif ( applyUpdates( updatedVars ) ) {\n\t\t\tnotify();\n\t\t}\n\t};\n\n\treturn {\n\t\tsubscribe,\n\t\tupdate,\n\t};\n};\n","import { createStyleVariablesRepository } from './create-style-variables-repository';\n\nexport const styleVariablesRepository = createStyleVariablesRepository();\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 { PopoverHeader } from '@elementor/editor-ui';\nimport { ColorFilterIcon, DetachIcon, PlusIcon } from '@elementor/icons';\nimport {\n\tbindPopover,\n\tbindTrigger,\n\tBox,\n\tIconButton,\n\tPopover,\n\tStack,\n\tTypography,\n\tUnstableTag as Tag,\n\tusePopupState,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\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\nconst SIZE = 'tiny';\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\tconst colorCreationEnabled = colorVariablePropTypeUtil.key === selectedVariable.type;\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={ SIZE } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>\n\t\t\t\t\t\t<DetachIcon fontSize={ SIZE } />\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<PopoverHeader\n\t\t\t\t\ttitle={ __( 'Variables', 'elementor' ) }\n\t\t\t\t\tonClose={ closePopover }\n\t\t\t\t\ticon={ <ColorFilterIcon fontSize={ SIZE } /> }\n\t\t\t\t\tactions={ [\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\tkey=\"createVariable\"\n\t\t\t\t\t\t\t{ ...bindTrigger( creationPopupState ) }\n\t\t\t\t\t\t\tsize={ SIZE }\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={ SIZE } />\n\t\t\t\t\t\t</IconButton>,\n\t\t\t\t\t] }\n\t\t\t\t/>\n\t\t\t\t{ children?.( { closePopover } ) }\n\t\t\t</Popover>\n\n\t\t\t{ colorCreationEnabled && <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 { PopoverHeader } from '@elementor/editor-ui';\nimport { BrushIcon } from '@elementor/icons';\nimport {\n\tbindPopover,\n\tBox,\n\tButton,\n\tCardActions,\n\tDivider,\n\tFormLabel,\n\tGrid,\n\tPopover,\n\ttype PopupState,\n\tStack,\n\tTextField,\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\nconst SIZE = 'tiny';\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\tcreateVariable( {\n\t\t\tvalue: color,\n\t\t\tlabel,\n\t\t\ttype: colorVariablePropTypeUtil.key,\n\t\t} ).then( ( key ) => {\n\t\t\tsetVariable( key );\n\t\t\tclosePopover();\n\t\t} );\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<PopoverHeader\n\t\t\t\t\ttitle={ __( 'Create variable', 'elementor' ) }\n\t\t\t\t\tonClose={ closePopover }\n\t\t\t\t\ticon={ <BrushIcon fontSize={ SIZE } /> }\n\t\t\t\t/>\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( 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 VariableKey } 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 = ( key: VariableKey ) => {\n\t\tsetVariable( 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( 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 * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport { Portal } from '@elementor/ui';\n\nimport { styleVariablesRepository } from '../style-variables-repository';\nimport { getCanvasIframeDocument } from '../sync/get-canvas-iframe-document';\nimport { type StyleVariables } from '../types';\n\nconst VARIABLES_WRAPPER = 'body';\n\nexport function StyleVariablesRenderer() {\n\tconst container = usePortalContainer();\n\tconst styleVariables = useStyleVariables();\n\n\tconst hasVariables = Object.keys( styleVariables ).length > 0;\n\n\tif ( ! container \|\| ! hasVariables ) {\n\t\treturn null;\n\t}\n\n\tconst cssVariables = convertToCssVariables( styleVariables );\n\tconst wrappedCss = `${ VARIABLES_WRAPPER }{${ cssVariables }}`;\n\n\treturn (\n\t\t<Portal container={ container }>\n\t\t\t<style data-e-style-id=\"e-variables\" key={ wrappedCss }>\n\t\t\t\t{ wrappedCss }\n\t\t\t</style>\n\t\t</Portal>\n\t);\n}\n\nfunction usePortalContainer() {\n\treturn useListenTo( commandEndEvent( 'editor/documents/attach-preview' ), () => getCanvasIframeDocument()?.head );\n}\n\nfunction useStyleVariables() {\n\tconst [ variables, setVariables ] = useState< StyleVariables >( {} );\n\n\tuseEffect( () => {\n\t\tconst unsubscribe = styleVariablesRepository.subscribe( setVariables );\n\n\t\treturn () => {\n\t\t\tunsubscribe();\n\t\t};\n\t}, [] );\n\n\treturn variables;\n}\n\nfunction convertToCssVariables( variables: StyleVariables ): string {\n\treturn Object.entries( variables )\n\t\t.map( ( [ key, value ] ) => `--${ key }:${ value };` )\n\t\t.join( '' );\n}\n","import type { CanvasExtendedWindow } from './types';\n\nexport function getCanvasIframeDocument() {\n\tconst extendedWindow = window as unknown as CanvasExtendedWindow;\n\n\treturn extendedWindow.elementor?.$preview?.[ 0 ]?.contentDocument;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBAA8B;;;ACA9B,IAAAA,wBAA0C;AAC1C,IAAAC,+BAA+D;;;ACD/D,IAAAC,SAAuB;AACvB,IAAAC,0BAA6B;AAC7B,IAAAC,uBAAkC;;;ACFlC,gBAA+C;AAExC,IAAM,qBAAiB,kBAAQ,gCAAuB,EAAG,CAAE,EAAE,MAAM,OAAS;AAAA,EAClF,cAAc,GAAI,MAAM,MAAM,eAAe,CAAE;AAChD,EAAI;;;ACJJ,YAAuB;AACvB,IAAAC,gBAAyB;AACzB,6BAA6B;AAC7B,mBAAyB;AACzB,IAAAC,aAAmE;;;ACJnE,mBAAwB;;;ACAxB,yBAA4B;AAE5B,IAAM,YAAY;AAEX,IAAM,YAAY;AAAA,EACxB,MAAM,MAAM;AACX,eAAO,gCAAY,EAAE,IAAK,YAAY,OAAQ;AAAA,EAC/C;AAAA,EAEA,QAAQ,CAAE,MAAc,OAAe,UAAmB;AACzD,eAAO,gCAAY,EAAE,KAAM,YAAY,WAAW;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,IACD,CAAE;AAAA,EACH;AAAA,EAEA,QAAQ,CAAE,IAAY,OAAe,UAAmB;AACvD,eAAO,gCAAY,EAAE,IAAK,YAAY,WAAW;AAAA,MAChD;AAAA,MACA;AAAA,MACA;AAAA,IACD,CAAE;AAAA,EACH;AAAA,EAEA,QAAQ,CAAE,OAAgB;AACzB,eAAO,gCAAY,EAAE,KAAM,YAAY,WAAW,EAAE,GAAG,CAAE;AAAA,EAC1D;AAAA,EAEA,SAAS,CAAE,OAAgB;AAC1B,eAAO,gCAAY,EAAE,KAAM,YAAY,YAAY,EAAE,GAAG,CAAE;AAAA,EAC3D;AACD;;;ACtBA,IAAM,cAAc;AACpB,IAAM,wBAAwB;AAEvB,IAAM,QAAQ;AACrB,IAAM,QAAQ;AAEP,IAAM,UAAN,MAAc;AAAA,EACpB;AAAA,EAKA,cAAc;AACb,SAAK,QAAQ;AAAA,MACZ,WAAW;AAAA,MACX,WAAW,CAAC;AAAA,IACb;AAAA,EACD;AAAA,EAEA,OAAO;AACN,SAAK,MAAM,YAAY,SAAU,aAAa,QAAS,qBAAsB,KAAK,IAAK;AACvF,SAAK,MAAM,YAAY,KAAK,MAAO,aAAa,QAAS,WAAY,KAAK,IAAK;AAC/E,WAAO,KAAK,MAAM;AAAA,EACnB;AAAA,EAEA,KAAM,WAA2B,WAAoB;AACpD,SAAK,MAAM,YAAY;AACvB,SAAK,MAAM,YAAY;AAEvB,iBAAa,QAAS,uBAAuB,KAAK,MAAM,UAAU,SAAS,CAAE;AAC7E,iBAAa,QAAS,aAAa,KAAK,UAAW,KAAK,MAAM,SAAU,CAAE;AAAA,EAC3E;AAAA,EAEA,IAAK,IAAY,UAAsB;AACtC,SAAK,KAAK;AACV,SAAK,MAAM,UAAW,EAAG,IAAI;AAC7B,iBAAa,QAAS,aAAa,KAAK,UAAW,KAAK,MAAM,SAAU,CAAE;AAAA,EAC3E;AAAA,EAEA,OAAQ,IAAY,UAAsB;AACzC,SAAK,KAAK;AACV,SAAK,MAAM,UAAW,EAAG,IAAI;AAC7B,iBAAa,QAAS,aAAa,KAAK,UAAW,KAAK,MAAM,SAAU,CAAE;AAAA,EAC3E;AAAA,EAEA,UAAW,WAAoB;AAC9B,SAAK,MAAM,YAAY;AACvB,iBAAa,QAAS,uBAAuB,KAAK,MAAM,UAAU,SAAS,CAAE;AAAA,EAC9E;AAAA,EAEA,cAAe,WAAmB,cAAuB;AACxD,UAAM,OAAO,eAAe,KAAK,MAAM;AAEvC,QAAK,UAAU,WAAY;AAC1B,aAAO,MAAM;AAAA,IACd;AAEA,QAAK,UAAU,WAAY;AAC1B,aAAO,MAAM;AAAA,IACd;AAEA,WAAO;AAAA,EACR;AACD;;;ACtEA,IAAM,UAAU,IAAI,QAAQ;AAErB,IAAM,UAAU;AAAA,EACtB,WAAW,MAAsB;AAChC,WAAO,QAAQ,KAAK;AAAA,EACrB;AAAA,EAEA,MAAM,MAAM;AACX,YAAQ,KAAK;AAAA,EACd;AAAA,EAEA,MAAM,MAAM;AACX,WAAO,UACL,KAAK,EACL,KAAM,CAAE,aAAc;AACtB,YAAM,EAAE,SAAS,MAAM,QAAQ,IAAI,SAAS;AAE5C,UAAK,CAAE,SAAU;AAChB,cAAM,IAAI,MAAO,iCAAkC;AAAA,MACpD;AAEA,aAAO;AAAA,IACR,CAAE,EACD,KAAM,CAAE,SAAU;AAClB,YAAM,EAAE,WAAW,UAAU,IAAI;AAEjC,cAAQ,KAAM,WAAW,SAAU;AAEnC,aAAO;AAAA,IACR,CAAE;AAAA,EACJ;AAAA,EAEA,QAAQ,CAAE,EAAE,MAAM,OAAO,MAAM,MAAkB;AAChD,WAAO,UACL,OAAQ,MAAM,OAAO,KAAM,EAC3B,KAAM,CAAE,aAAc;AACtB,YAAM,EAAE,SAAS,MAAM,QAAQ,IAAI,SAAS;AAE5C,UAAK,CAAE,SAAU;AAChB,cAAM,IAAI,MAAO,iCAAkC;AAAA,MACpD;AAEA,aAAO;AAAA,IACR,CAAE,EACD,KAAM,CAAE,SAAU;AAClB,YAAM,EAAE,UAAU,UAAU,IAAI;AAEhC,sBAAiB,OAAO,SAAU;AAElC,YAAM,EAAE,IAAI,YAAY,GAAG,gBAAgB,IAAI;AAE/C,cAAQ,IAAK,YAAY,eAAgB;AAEzC,aAAO;AAAA,QACN,IAAI;AAAA,QACJ,UAAU;AAAA,MACX;AAAA,IACD,CAAE;AAAA,EACJ;AAAA,EAEA,QAAQ,CAAE,IAAY,EAAE,OAAO,MAAM,MAAkB;AACtD,WAAO,UACL,OAAQ,IAAI,OAAO,KAAM,EACzB,KAAM,CAAE,aAAc;AACtB,YAAM,EAAE,SAAS,MAAM,QAAQ,IAAI,SAAS;AAE5C,UAAK,CAAE,SAAU;AAChB,cAAM,IAAI,MAAO,iCAAkC;AAAA,MACpD;AAEA,aAAO;AAAA,IACR,CAAE,EACD,KAAM,CAAE,SAAU;AAClB,YAAM,EAAE,UAAU,UAAU,IAAI;AAEhC,sBAAiB,OAAO,SAAU;AAElC,YAAM,EAAE,IAAI,YAAY,GAAG,gBAAgB,IAAI;AAE/C,cAAQ,OAAQ,YAAY,eAAgB;AAE5C,aAAO;AAAA,QACN,IAAI;AAAA,QACJ,UAAU;AAAA,MACX;AAAA,IACD,CAAE;AAAA,EACJ;AAAA,EAEA,QAAQ,CAAE,OAAgB;AACzB,WAAO,UACL,OAAQ,EAAG,EACX,KAAM,CAAE,aAAc;AACtB,YAAM,EAAE,SAAS,MAAM,QAAQ,IAAI,SAAS;AAE5C,UAAK,CAAE,SAAU;AAChB,cAAM,IAAI,MAAO,iCAAkC;AAAA,MACpD;AAEA,aAAO;AAAA,IACR,CAAE,EACD,KAAM,CAAE,SAAU;AAClB,YAAM,EAAE,UAAU,UAAU,IAAI;AAEhC,sBAAiB,OAAO,SAAU;AAElC,YAAM,EAAE,IAAI,YAAY,GAAG,gBAAgB,IAAI;AAE/C,cAAQ,OAAQ,YAAY,eAAgB;AAE5C,aAAO;AAAA,QACN,IAAI;AAAA,QACJ,UAAU;AAAA,MACX;AAAA,IACD,CAAE;AAAA,EACJ;AAAA,EAEA,SAAS,CAAE,OAAgB;AAC1B,WAAO,UACL,QAAS,EAAG,EACZ,KAAM,CAAE,aAAc;AACtB,YAAM,EAAE,SAAS,MAAM,QAAQ,IAAI,SAAS;AAE5C,UAAK,CAAE,SAAU;AAChB,cAAM,IAAI,MAAO,iCAAkC;AAAA,MACpD;AAEA,aAAO;AAAA,IACR,CAAE,EACD,KAAM,CAAE,SAAU;AAClB,YAAM,EAAE,UAAU,UAAU,IAAI;AAEhC,sBAAiB,OAAO,SAAU;AAElC,YAAM,EAAE,IAAI,YAAY,GAAG,iBAAiB,IAAI;AAEhD,cAAQ,OAAQ,YAAY,gBAAiB;AAE7C,aAAO;AAAA,QACN,IAAI;AAAA,QACJ,UAAU;AAAA,MACX;AAAA,IACD,CAAE;AAAA,EACJ;AACD;AAEA,IAAM,kBAAkB,CAAE,WAAmB,iBAA0B;AACtE,MAAK,QAAQ,cAAe,WAAW,YAAa,GAAI;AACvD,eAAY,MAAM,QAAQ,KAAK,GAAG,GAAI;AAAA,EACvC;AACA,UAAQ,UAAW,YAAa;AACjC;;;ACrJO,IAAM,iCAAiC,MAAM;AACnD,QAAM,YAA4B,CAAC;AACnC,MAAI;AAEJ,QAAM,YAAY,CAAE,OAAiC;AACpD,mBAAe;AAEf,WAAO,MAAM;AACZ,qBAAe,MAAM;AAAA,MAAC;AAAA,IACvB;AAAA,EACD;AAEA,QAAM,SAAS,MAAM;AACpB,QAAK,OAAO,iBAAiB,YAAa;AACzC,mBAAc,EAAE,GAAG,UAAU,CAAE;AAAA,IAChC;AAAA,EACD;AAEA,QAAM,eAAe,CAAE,KAAa,aAAsC;AACzE,WAAO,EAAI,OAAO,cAAe,UAAW,GAAI,MAAM;AAAA,EACvD;AAEA,QAAM,eAAe,CAAE,gBAAqC;AAC3D,QAAI,aAAa;AAEjB,eAAY,CAAE,KAAK,EAAE,MAAM,CAAE,KAAK,OAAO,QAAS,WAAY,GAAI;AACjE,UAAK,aAAc,KAAK,KAAM,GAAI;AACjC,kBAAW,GAAI,IAAI;AACnB,qBAAa;AAAA,MACd;AAAA,IACD;AAEA,WAAO;AAAA,EACR;AAEA,QAAM,SAAS,CAAE,gBAA4B;AAC5C,QAAK,aAAc,WAAY,GAAI;AAClC,aAAO;AAAA,IACR;AAAA,EACD;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,EACD;AACD;;;AC/CO,IAAM,2BAA2B,+BAA+B;;;ALMhE,IAAM,mBAAmB,CAAE,YAAsB;AACvD,aAAO,sBAAS,MAAM,mBAAoB,OAAQ,GAAG,CAAE,OAAQ,CAAE;AAClE;AAEO,IAAM,cAAc,CAAE,QAAiB;AAC7C,QAAM,YAAY,QAAQ,UAAU;AAEpC,MAAK,CAAE,YAAa,GAAI,GAAI;AAC3B,WAAO;AAAA,EACR;AAEA,SAAO;AAAA,IACN,GAAG,UAAW,GAAI;AAAA,IAClB;AAAA,EACD;AACD;AAEA,IAAM,qBAAqB,CAAE,YAAqB;AACjD,QAAM,YAAY,QAAQ,UAAU;AAEpC,2BAAyB,OAAQ,SAAU;AAE3C,SAAO,OAAO,QAAS,SAAU,EAC/B,OAAQ,CAAE,CAAE,EAAE,EAAE,KAAK,CAAE,MAAO,SAAS,OAAQ,EAC/C,IAAK,CAAE,CAAE,KAAK,EAAE,OAAO,MAAM,CAAE,OAAS;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,EACD,EAAI;AACN;AAEO,IAAM,iBAAiB,CAAE,gBAA8C;AAC7E,SAAO,QAAQ,OAAQ,WAAY,EAAE,KAAM,CAAE,EAAE,IAAI,SAAS,MAA4C;AACvG,6BAAyB,OAAQ;AAAA,MAChC,CAAE,EAAG,GAAG;AAAA,IACT,CAAE;AACF,WAAO;AAAA,EACR,CAAE;AACH;;;AM9CA,0BAAgC;AAChC,oBAAkB;AAEX,IAAM,gCAA4B,qCAAiB,yBAAyB,gBAAE,OAAO,CAAE;;;ACH9F,IAAAC,aAAiC;AAE1B,IAAM,qBAAiB,mBAAQ,mBAAS,EAAG,OAAQ;AAAA,EACzD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,4BAA4B;AAAA,IAC3B,SAAS;AAAA,EACV;AACD,EAAI;;;AROG,IAAM,0BAA0B,CAAE,EAAE,SAAS,MAAc;AACjE,QAAM,EAAE,OAAO,UAAU,UAAU,YAAY,QAAI,qCAAc,yBAA0B;AAE3F,QAAM,YAAY,iBAAkB,0BAA0B,GAAI;AAElE,QAAM,yBAAyB,CAAE,QAAsB;AACtD,gBAAa,GAAI;AAEjB,eAAW;AAAA,EACZ;AAEA,SACC,oCAAC,8BACA,oCAAC,wBAAQ,GACT,oCAAC,kBAAI,IAAK,EAAE,WAAW,QAAQ,QAAQ,KAAK,OAAO,IAAI,KACtD,oCAAC,uBAAS,MAAK,WAAU,UAAW,KACjC,UAAU,IAAK,CAAE,EAAE,OAAO,OAAO,IAAI,MACtC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,SAAU,MAAM,uBAAwB,GAAI;AAAA,MAC5C,UAAW,QAAQ;AAAA;AAAA,IAEnB,oCAAC,+BACA,oCAAC,kBAAe,MAAK,WAAU,WAAU,QAAO,OAAgB,CACjE;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,WAAY;AAAA,QACZ,wBAAyB;AAAA,UACxB,SAAS;AAAA,UACT,OAAO;AAAA,UACP,OAAO;AAAA,YACN,YAAY;AAAA,YACZ,SAAS;AAAA,YACT,UAAU;AAAA,YACV,cAAc;AAAA,YACd,YAAY;AAAA,YACZ,UAAU;AAAA,UACX;AAAA,QACD;AAAA,QACA,0BAA2B;AAAA,UAC1B,SAAS;AAAA,UACT,OAAO;AAAA,UACP,OAAO,EAAE,WAAW,OAAO,YAAY,IAAI;AAAA,QAC5C;AAAA,QACA,IAAK,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAE;AAAA;AAAA,IACtD;AAAA,IACA,oCAAC,yBAAS,OAAM,UAAS,UAAS,WAAU,IAAK,EAAE,IAAI,GAAG,SAAS,IAAI,GAAI;AAAA,EAC5E,CACC,CACH,CACD,CACD;AAEF;;;AStEA,IAAAC,SAAuB;AACvB,IAAAC,gBAA8B;AAC9B,IAAAC,oBAA8B;AAC9B,IAAAC,gBAAsD;AACtD,IAAAC,aAUO;AACP,IAAAC,eAAmB;;;ACfnB,IAAAC,SAAuB;AACvB,IAAAC,gBAAiC;AACjC,IAAAC,0BAA6B;AAC7B,uBAA8B;AAC9B,IAAAC,gBAA0B;AAC1B,IAAAC,aAaO;AACP,kBAAmB;AAKnB,IAAM,OAAO;AAEN,IAAM,wBAAwB,CAAE,EAAE,WAAW,MAAmC;AACtF,QAAM,EAAE,UAAU,YAAY,QAAI,sCAAc,yBAA0B;AAE1E,QAAM,CAAE,OAAO,QAAS,QAAI,wBAAU,EAAG;AACzC,QAAM,CAAE,OAAO,QAAS,QAAI,wBAAU,EAAG;AAEzC,QAAM,gBAAY,sBAA0B,IAAK;AAEjD,QAAM,cAAc,MAAM;AACzB,aAAU,EAAG;AACb,aAAU,EAAG;AAAA,EACd;AAEA,QAAM,eAAe,MAAM;AAC1B,gBAAY;AACZ,eAAW,MAAM;AAAA,EAClB;AAEA,QAAM,eAAe,MAAM;AAC1B,mBAAgB;AAAA,MACf,OAAO;AAAA,MACP;AAAA,MACA,MAAM,0BAA0B;AAAA,IACjC,CAAE,EAAE,KAAM,CAAE,QAAS;AACpB,kBAAa,GAAI;AACjB,mBAAa;AAAA,IACd,CAAE;AAAA,EACH;AAEA,QAAM,gBAAgB,MAAM;AAC3B,WAAO,CAAE,OAAO,KAAK,KAAK,CAAE,OAAO,KAAK;AAAA,EACzC;AAEA,SACC,qCAAC,kBAAI,KAAM,aACV;AAAA,IAAC;AAAA;AAAA,MACE,OAAG,wBAAa,UAAW;AAAA,MAC7B,UAAW,UAAU;AAAA,MACrB,cAAe,EAAE,UAAU,UAAU,YAAY,QAAQ;AAAA,MACzD,iBAAkB,EAAE,UAAU,OAAO,YAAY,QAAQ;AAAA;AAAA,IAEzD;AAAA,MAAC;AAAA;AAAA,QACA,WAAQ,gBAAI,mBAAmB,WAAY;AAAA,QAC3C,SAAU;AAAA,QACV,MAAO,qCAAC,2BAAU,UAAW,MAAO;AAAA;AAAA,IACrC;AAAA,IAEA,qCAAC,wBAAQ;AAAA,IAET,qCAAC,oBAAM,GAAI,KAAM,KAAM,OACtB,qCAAC,mBAAK,WAAS,MAAC,KAAM,MAAO,YAAW,YACvC,qCAAC,mBAAK,MAAI,MAAC,IAAK,MACf,qCAAC,wBAAU,MAAK,eAAU,gBAAI,QAAQ,WAAY,CAAG,CACtD,GACA,qCAAC,mBAAK,MAAI,MAAC,IAAK,MACf;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,WAAS;AAAA,QACT,OAAQ;AAAA,QACR,UAAW,CAAE,MAA8C,SAAU,EAAE,OAAO,KAAM;AAAA;AAAA,IACrF,CACD,CACD,GAEA,qCAAC,mBAAK,WAAS,MAAC,KAAM,MAAO,YAAW,YACvC,qCAAC,mBAAK,MAAI,MAAC,IAAK,MACf,qCAAC,wBAAU,MAAK,eAAU,gBAAI,SAAS,WAAY,CAAG,CACvD,GACA,qCAAC,mBAAK,MAAI,MAAC,IAAK,MACf;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,WAAS;AAAA,QACT,OAAQ;AAAA,QACR,UAAW;AAAA,QACX,WAAY;AAAA,UACX,aAAa;AAAA,YACZ,UAAU,UAAU;AAAA,YACpB,cAAc,EAAE,UAAU,OAAO,YAAY,QAAQ;AAAA,YACrD,iBAAiB,EAAE,UAAU,OAAO,YAAY,IAAI;AAAA,UACrD;AAAA,QACD;AAAA;AAAA,IACD,CACD,CACD,CACD;AAAA,IAEA,qCAAC,8BACA,qCAAC,qBAAO,MAAK,SAAQ,SAAU,cAAe,OAAM,aAAY,SAAQ,cACrE,gBAAI,UAAU,WAAY,CAC7B,GACA,qCAAC,qBAAO,MAAK,SAAQ,SAAQ,aAAY,UAAW,cAAc,GAAI,SAAU,oBAC7E,gBAAI,UAAU,WAAY,CAC7B,CACD;AAAA,EACD,CACD;AAEF;;;AD/FA,IAAMC,QAAO;AAEN,IAAM,4BAA4B,CAAE;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,MAAc;AACb,QAAM,SAAK,qBAAM;AACjB,QAAM,iBAAa,0BAAe,EAAE,SAAS,WAAW,SAAS,8BAA+B,EAAG,GAAG,CAAE;AACxG,QAAM,yBAAqB,0BAAe,EAAE,SAAS,WAAW,SAAS,gCAAiC,EAAG,GAAG,CAAE;AAElH,QAAM,eAAe,MAAM,WAAW,MAAM;AAE5C,QAAM,0BAA0B,CAAE,UAA6B;AAC9D,iBAAa;AACb,gCAAa,kBAAmB,EAAE,QAAS,KAAM;AAAA,EAClD;AAEA,QAAM,gBAAY,sBAA0B,IAAK;AACjD,QAAM,EAAE,MAAM,IAAI;AAElB,QAAM,uBAAuB,0BAA0B,QAAQ,iBAAiB;AAEhF,SACC,qCAAC,kBAAI,KAAM,aACV;AAAA,IAAC,WAAAC;AAAA,IAAA;AAAA,MACA,WAAS;AAAA,MACT,oBAAkB;AAAA,MAChB,OAAG,wBAAa,UAAW;AAAA,MAC7B,WACC,qCAAC,oBAAM,SAAU,GAAI,WAAU,OAAM,YAAW,YAC7C,mBACF,qCAAC,iCAAgB,UAAW,WAAY,IAAK,EAAE,IAAI,EAAE,GAAI,CAC1D;AAAA,MAED,OACC,qCAAC,kBAAI,IAAK,EAAE,SAAS,cAAc,KAClC,qCAAC,yBAAW,IAAK,EAAE,cAAc,YAAY,WAAW,SAAS,GAAI,SAAQ,eAC1E,KACH,CACD;AAAA,MAED,SACC,qCAAC,yBAAW,MAAOD,OAAO,SAAU,gBAAiB,kBAAa,iBAAI,UAAU,WAAY,KAC3F,qCAAC,4BAAW,UAAWA,OAAO,CAC/B;AAAA;AAAA,EAEF,GACA;AAAA,IAAC;AAAA;AAAA,MACE,OAAG,wBAAa,UAAW;AAAA,MAC7B,mBAAiB;AAAA,MACjB,UAAW,UAAU;AAAA,MACrB,cAAe,EAAE,UAAU,UAAU,YAAY,QAAQ;AAAA,MACzD,iBAAkB,EAAE,UAAU,OAAO,YAAY,QAAQ;AAAA;AAAA,IAEzD;AAAA,MAAC;AAAA;AAAA,QACA,WAAQ,iBAAI,aAAa,WAAY;AAAA,QACrC,SAAU;AAAA,QACV,MAAO,qCAAC,iCAAgB,UAAWA,OAAO;AAAA,QAC1C,SAAU;AAAA,UACT;AAAA,YAAC;AAAA;AAAA,cACA,KAAI;AAAA,cACF,OAAG,wBAAa,kBAAmB;AAAA,cACrC,MAAOA;AAAA,cACP,SAAU;AAAA;AAAA,YAEV,qCAAC,0BAAS,UAAWA,OAAO;AAAA,UAC7B;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACE,WAAY,EAAE,aAAa,CAAE;AAAA,EAChC,GAEE,wBAAwB,qCAAC,yBAAsB,YAAa,oBAAqB,CACpF;AAEF;;;AX/FO,IAAM,iCAAiC,MAAM;AACnD,QAAM,EAAE,SAAS,QAAI,sCAAa;AAClC,QAAM,EAAE,OAAO,cAAc,QAAI,sCAAc,yBAA0B;AAEzE,QAAM,mBAAmB,YAAa,aAAc;AAEpD,MAAK,CAAE,kBAAmB;AACzB,UAAM,IAAI,MAAO,yBAA0B,aAAc,YAAa;AAAA,EACvE;AAEA,QAAM,iBAAiB,MAAM;AAC5B,aAAU,uCAAkB,OAAQ,iBAAiB,KAAM,CAAE;AAAA,EAC9D;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAoB,qCAAC,kBAAe,MAAK,WAAU,WAAU,QAAO,OAAQ,iBAAiB,OAAQ;AAAA;AAAA,IAEnG,CAAE,EAAE,aAAa,MAAO,qCAAC,2BAAwB,UAAW,cAAe;AAAA,EAC9E;AAEF;;;AajCA,IAAAE,SAAuB;AACvB,kCAAsD;AACtD,IAAAC,gBAAgC;AAChC,IAAAC,eAAmB;;;ACHnB,IAAAC,uBAAgC;AAChC,IAAAC,iBAAkB;AAEX,IAAM,+BAA2B,sCAAiB,wBAAwB,iBAAE,OAAO,CAAE;;;ACErF,IAAM,2BAA2B,CAAE,cAAmC;AAC5E,SAAO,CAAC,CAAE,0BAA0B,QAAS,SAAU;AACxD;AAEO,IAAM,yBAAyB,CAAE,aAAiC;AACxE,SAAO,SAAS,SAAS,WAAW,0BAA0B,OAAO,SAAS;AAC/E;AAEO,IAAM,0BAA0B,CAAE,cAAmC;AAC3E,SAAO,CAAC,CAAE,yBAAyB,QAAS,SAAU;AACvD;AAEO,IAAM,wBAAwB,CAAE,aAAiC;AACvE,SAAO,SAAS,SAAS,WAAW,yBAAyB,OAAO,SAAS;AAC9E;;;AFXO,IAAM,6BAA6B,MAA0B;AACnE,QAAM,EAAE,SAAS,QAAI,0CAAa;AAElC,QAAM,UAAU,CAAC,CAAE,YAAY,uBAAwB,QAAS;AAEhE,SAAO;AAAA,IACN;AAAA,IACA,MAAM;AAAA,IACN,WAAO,iBAAI,aAAa,WAAY;AAAA,IACpC,gBAAgB,CAAE,EAAE,aAAa,MAAO,qCAAC,2BAAwB,UAAW,cAAe;AAAA,EAC5F;AACD;;;AGnBA,2BAAkC;AAE3B,IAAM,0BAAsB,wCAAmB,CAAE,UAAmB;AAC1E,MAAK,CAAE,MAAM,KAAK,GAAI;AACrB,WAAO;AAAA,EACR;AAEA,SAAO,SAAU,KAAM;AACxB,CAAE;;;AjBCF,IAAM,EAAE,sBAAsB,IAAI;AAE3B,SAAS,qBAAqB;AACpC,+DAA4B;AAAA,IAC3B,WAAW;AAAA,IACX,WAAW,CAAE,EAAE,MAAM,MAAO,yBAA0B,KAAM;AAAA,EAC7D,CAAE;AAEF,wBAAuB;AAAA,IACtB,IAAI;AAAA,IACJ,UAAU;AAAA,EACX,CAAE;AAEF,kDAA0B,SAAU,0BAA0B,KAAK,mBAAoB;AACxF;;;AkBvBA,IAAAC,wBAA0C;AAC1C,IAAAC,+BAA+D;;;ACD/D,IAAAC,SAAuB;AACvB,IAAAC,0BAA6B;AAC7B,IAAAC,uBAAmC;;;ACFnC,IAAAC,SAAuB;AACvB,IAAAC,gBAAyB;AACzB,IAAAC,0BAA6B;AAC7B,IAAAC,gBAAmC;AACnC,IAAAC,aAAmE;AAW5D,IAAM,yBAAyB,CAAE,EAAE,SAAS,MAAc;AAChE,QAAM,EAAE,OAAO,UAAU,UAAU,YAAY,QAAI,sCAAc,wBAAyB;AAE1F,QAAM,YAAY,iBAAkB,yBAAyB,GAAI;AAEjE,QAAM,oBAAoB,CAAE,QAAsB;AACjD,gBAAa,GAAI;AAEjB,eAAW;AAAA,EACZ;AAEA,SACC,qCAAC,8BACA,qCAAC,wBAAQ,GACT,qCAAC,kBAAI,IAAK,EAAE,WAAW,QAAQ,QAAQ,KAAK,OAAO,IAAI,KACtD,qCAAC,uBAAS,MAAK,WAAU,UAAW,KACjC,UAAU,IAAK,CAAE,EAAE,OAAO,OAAO,IAAI,MACtC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,SAAU,MAAM,kBAAmB,GAAI;AAAA,MACvC,UAAW,QAAQ;AAAA;AAAA,IAEnB,qCAAC,+BACA,qCAAC,4BAAS,CACX;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,WAAY;AAAA,QACZ,wBAAyB;AAAA,UACxB,SAAS;AAAA,UACT,OAAO;AAAA,UACP,OAAO;AAAA,YACN,YAAY;AAAA,YACZ,SAAS;AAAA,YACT,UAAU;AAAA,YACV,cAAc;AAAA,YACd,YAAY;AAAA,YACZ,UAAU;AAAA,UACX;AAAA,QACD;AAAA,QACA,0BAA2B;AAAA,UAC1B,SAAS;AAAA,UACT,OAAO;AAAA,UACP,OAAO,EAAE,WAAW,OAAO,YAAY,IAAI;AAAA,QAC5C;AAAA,QACA,IAAK,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAE;AAAA;AAAA,IACtD;AAAA,IACA,qCAAC,0BAAS,OAAM,UAAS,UAAS,WAAU,IAAK,EAAE,IAAI,GAAG,SAAS,IAAI,GAAI;AAAA,EAC5E,CACC,CACH,CACD,CACD;AAEF;;;AD5DO,IAAM,gCAAgC,MAAM;AAClD,QAAM,EAAE,UAAU,cAAc,QAAI,sCAAa;AACjD,QAAM,EAAE,OAAO,cAAc,QAAI,sCAAc,wBAAyB;AAExE,QAAM,mBAAmB,YAAa,aAAc;AAEpD,MAAK,CAAE,kBAAmB;AACzB,UAAM,IAAI,MAAO,wBAAyB,aAAc,YAAa;AAAA,EACtE;AAEA,QAAM,iBAAiB,MAAM;AAC5B,kBAAe,wCAAmB,OAAQ,iBAAiB,KAAM,CAAE;AAAA,EACpE;AAEA,SACC,qCAAC,6BAA0B,kBAAsC,kBAC9D,CAAE,EAAE,aAAa,MAAO,qCAAC,0BAAuB,UAAW,cAAe,CAC7E;AAEF;;;AE5BA,IAAAC,SAAuB;AACvB,IAAAC,+BAAsD;AACtD,IAAAC,gBAAgC;AAChC,IAAAC,eAAmB;AAKZ,IAAM,4BAA4B,MAA0B;AAClE,QAAM,EAAE,SAAS,QAAI,2CAAa;AAElC,QAAM,UAAU,CAAC,CAAE,YAAY,sBAAuB,QAAS;AAE/D,SAAO;AAAA,IACN;AAAA,IACA,MAAM;AAAA,IACN,WAAO,iBAAI,aAAa,WAAY;AAAA,IACpC,gBAAgB,CAAE,EAAE,aAAa,MAAO,qCAAC,0BAAuB,UAAW,cAAe;AAAA,EAC3F;AACD;;;AHVA,IAAM,EAAE,uBAAAC,uBAAsB,IAAI;AAE3B,SAAS,oBAAoB;AACnC,+DAA4B;AAAA,IAC3B,WAAW;AAAA,IACX,WAAW,CAAE,EAAE,MAAM,MAAO,wBAAyB,KAAM;AAAA,EAC5D,CAAE;AAEF,EAAAA,uBAAuB;AAAA,IACtB,IAAI;AAAA,IACJ,UAAU;AAAA,EACX,CAAE;AAEF,kDAA0B,SAAU,yBAAyB,KAAK,mBAAoB;AACvF;;;AIvBA,IAAAC,SAAuB;AACvB,IAAAC,gBAAoC;AACpC,gCAAqE;AACrE,IAAAC,aAAuB;;;ACDhB,SAAS,0BAA0B;AACzC,QAAM,iBAAiB;AAEvB,SAAO,eAAe,WAAW,WAAY,CAAE,GAAG;AACnD;;;ADGA,IAAM,oBAAoB;AAEnB,SAAS,yBAAyB;AACxC,QAAM,YAAY,mBAAmB;AACrC,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,eAAe,OAAO,KAAM,cAAe,EAAE,SAAS;AAE5D,MAAK,CAAE,aAAa,CAAE,cAAe;AACpC,WAAO;AAAA,EACR;AAEA,QAAM,eAAe,sBAAuB,cAAe;AAC3D,QAAM,aAAa,GAAI,iBAAkB,IAAK,YAAa;AAE3D,SACC,qCAAC,qBAAO,aACP,qCAAC,WAAM,mBAAgB,eAAc,KAAM,cACxC,UACH,CACD;AAEF;AAEA,SAAS,qBAAqB;AAC7B,aAAO,0BAAAC,0BAAa,2CAAiB,iCAAkC,GAAG,MAAM,wBAAwB,GAAG,IAAK;AACjH;AAEA,SAAS,oBAAoB;AAC5B,QAAM,CAAE,WAAW,YAAa,QAAI,wBAA4B,CAAC,CAAE;AAEnE,+BAAW,MAAM;AAChB,UAAM,cAAc,yBAAyB,UAAW,YAAa;AAErE,WAAO,MAAM;AACZ,kBAAY;AAAA,IACb;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SAAO;AACR;AAEA,SAAS,sBAAuB,WAAoC;AACnE,SAAO,OAAO,QAAS,SAAU,EAC/B,IAAK,CAAE,CAAE,KAAK,KAAM,MAAO,KAAM,GAAI,IAAK,KAAM,GAAI,EACpD,KAAM,EAAG;AACZ;;;AvBhDO,SAAS,OAAO;AACtB,qBAAmB;AACnB,oBAAkB;AAElB,UAAiB,KAAK;AAEtB,mCAAe;AAAA,IACd,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;","names":["import_editor_canvas","import_editor_editing_panel","React","import_editor_controls","import_editor_props","import_react","import_ui","import_ui","React","import_react","import_editor_ui","import_icons","import_ui","import_i18n","React","import_react","import_editor_controls","import_icons","import_ui","SIZE","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","React","import_editor_editing_panel","import_icons","import_i18n","registerPopoverAction","React","import_react","import_ui","useListenTo"]}

package/dist/index.mjs CHANGED Viewed

@@ -346,16 +346,16 @@ var ColorVariablesSelection = ({ onSelect }) => {
 // src/components/variables-selection-popover.tsx
 import * as React3 from "react";
 import { useId, useRef as useRef2 } from "react";
+import { PopoverHeader as PopoverHeader2 } from "@elementor/editor-ui";
 import { ColorFilterIcon, DetachIcon, PlusIcon } from "@elementor/icons";
 import {
   bindPopover as bindPopover2,
   bindTrigger,
   Box as Box3,
-  CloseButton as CloseButton2,
   IconButton,
   Popover as Popover2,
   Stack as Stack2,
-  Typography as Typography2,
+  Typography,
   UnstableTag as Tag,
   usePopupState
 } from "@elementor/ui";
@@ -365,23 +365,23 @@ import { __ as __2 } from "@wordpress/i18n";
 import * as React2 from "react";
 import { useRef, useState } from "react";
 import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
+import { PopoverHeader } from "@elementor/editor-ui";
 import { BrushIcon } from "@elementor/icons";
 import {
   bindPopover,
   Box as Box2,
   Button,
   CardActions,
-  CloseButton,
   Divider as Divider2,
   FormLabel,
   Grid,
   Popover,
   Stack,
   TextField,
-  Typography,
   UnstableColorField
 } from "@elementor/ui";
 import { __ } from "@wordpress/i18n";
+var SIZE = "tiny";
 var ColorVariableCreation = ({ popupState }) => {
   const { setValue: setVariable } = useBoundProp2(colorVariablePropTypeUtil);
   const [color, setColor] = useState("");
@@ -416,14 +416,14 @@ var ColorVariableCreation = ({ popupState }) => {
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" }
     },
-    /* @__PURE__ */ React2.createElement(Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React2.createElement(BrushIcon, { fontSize: "tiny", sx: { mr: 0.5 } }), /* @__PURE__ */ React2.createElement(Typography, { variant: "subtitle2" }, __("Create variable", "elementor")), /* @__PURE__ */ React2.createElement(
-      CloseButton,
+    /* @__PURE__ */ React2.createElement(
+      PopoverHeader,
       {
-        slotProps: { icon: { fontSize: "small" } },
-        sx: { ml: "auto" },
-        onClick: closePopover
+        title: __("Create variable", "elementor"),
+        onClose: closePopover,
+        icon: /* @__PURE__ */ React2.createElement(BrushIcon, { fontSize: SIZE })
       }
-    )),
+    ),
     /* @__PURE__ */ React2.createElement(Divider2, null),
     /* @__PURE__ */ React2.createElement(Stack, { p: 1.5, gap: 1.5 }, /* @__PURE__ */ React2.createElement(Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(FormLabel, { size: "small" }, __("Name", "elementor"))), /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
       TextField,
@@ -454,6 +454,7 @@ var ColorVariableCreation = ({ popupState }) => {
 };
 // src/components/variables-selection-popover.tsx
+var SIZE2 = "tiny";
 var VariablesSelectionPopover = ({
   selectedVariable,
   unlinkVariable,
@@ -478,8 +479,8 @@ var VariablesSelectionPopover = ({
       showActionsOnHover: true,
       ...bindTrigger(popupState),
       startIcon: /* @__PURE__ */ React3.createElement(Stack2, { spacing: 1, direction: "row", alignItems: "center" }, startTagAdornment, /* @__PURE__ */ React3.createElement(ColorFilterIcon, { fontSize: "inherit", sx: { mr: 1 } })),
-      label: /* @__PURE__ */ React3.createElement(Box3, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React3.createElement(Typography2, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
-      actions: /* @__PURE__ */ React3.createElement(IconButton, { size: "tiny", onClick: unlinkVariable, "aria-label": __2("Unlink", "elementor") }, /* @__PURE__ */ React3.createElement(DetachIcon, { fontSize: "tiny" }))
+      label: /* @__PURE__ */ React3.createElement(Box3, { sx: { display: "inline-grid" } }, /* @__PURE__ */ React3.createElement(Typography, { sx: { textOverflow: "ellipsis", overflowX: "hidden" }, variant: "subtitle2" }, label)),
+      actions: /* @__PURE__ */ React3.createElement(IconButton, { size: SIZE2, onClick: unlinkVariable, "aria-label": __2("Unlink", "elementor") }, /* @__PURE__ */ React3.createElement(DetachIcon, { fontSize: SIZE2 }))
     }
   ), /* @__PURE__ */ React3.createElement(
     Popover2,
@@ -490,15 +491,26 @@ var VariablesSelectionPopover = ({
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" }
     },
-    /* @__PURE__ */ React3.createElement(Stack2, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React3.createElement(ColorFilterIcon, { fontSize: "tiny", sx: { mr: 0.5 } }), /* @__PURE__ */ React3.createElement(Typography2, { variant: "subtitle2" }, __2("Variables", "elementor")), /* @__PURE__ */ React3.createElement(Stack2, { direction: "row", sx: { ml: "auto" } }, colorCreationEnabled && /* @__PURE__ */ React3.createElement(
-      IconButton,
+    /* @__PURE__ */ React3.createElement(
+      PopoverHeader2,
       {
-        ...bindTrigger(creationPopupState),
-        size: "tiny",
-        onClick: handleCreateButtonClick
-      },
-      /* @__PURE__ */ React3.createElement(PlusIcon, { fontSize: "tiny" })
-    ), /* @__PURE__ */ React3.createElement(CloseButton2, { slotProps: { icon: { fontSize: "tiny" } }, onClick: closePopover }))),
+        title: __2("Variables", "elementor"),
+        onClose: closePopover,
+        icon: /* @__PURE__ */ React3.createElement(ColorFilterIcon, { fontSize: SIZE2 }),
+        actions: [
+          /* @__PURE__ */ React3.createElement(
+            IconButton,
+            {
+              key: "createVariable",
+              ...bindTrigger(creationPopupState),
+              size: SIZE2,
+              onClick: handleCreateButtonClick
+            },
+            /* @__PURE__ */ React3.createElement(PlusIcon, { fontSize: SIZE2 })
+          )
+        ]
+      }
+    ),
     children?.({ closePopover })
   ), colorCreationEnabled && /* @__PURE__ */ React3.createElement(ColorVariableCreation, { popupState: creationPopupState }));
 };

package/dist/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/init.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/api.ts","../src/storage.ts","../src/service.ts","../src/create-style-variables-repository.ts","../src/style-variables-repository.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/renderers/style-variables-renderer.tsx","../src/sync/get-canvas-iframe-document.ts"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\n\nimport { initColorVariables } from './init-color-variables';\nimport { initFontVariables } from './init-font-variables';\nimport { StyleVariablesRenderer } from './renderers/style-variables-renderer';\nimport { service as variablesService } from './service';\n\nexport function init() {\n\tinitColorVariables();\n\tinitFontVariables();\n\n\tvariablesService.init();\n\n\tinjectIntoTop( {\n\t\tid: 'canvas-style-variables-render',\n\t\tcomponent: StyleVariablesRenderer,\n\t} );\n}\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( 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 VariableKey } 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 = ( key: VariableKey ) => {\n\t\tsetVariable( 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( 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';\nimport { type PropKey } from '@elementor/editor-props';\n\nimport { service } from '../service';\nimport { type TVariable } from '../storage';\nimport { styleVariablesRepository } from '../style-variables-repository';\nimport { type Variable } from '../types';\n\nexport const usePropVariables = ( propKey: PropKey ) => {\n\treturn useMemo( () => normalizeVariables( propKey ), [ propKey ] );\n};\n\nexport const useVariable = ( key: string ) => {\n\tconst variables = service.variables();\n\n\tif ( ! variables?.[ key ] ) {\n\t\treturn null;\n\t}\n\n\treturn {\n\t\t...variables[ key ],\n\t\tkey,\n\t};\n};\n\nconst normalizeVariables = ( propKey: string ) => {\n\tconst variables = service.variables();\n\n\tstyleVariablesRepository.update( variables );\n\n\treturn Object.entries( variables )\n\t\t.filter( ( [ , { type } ] ) => type === propKey )\n\t\t.map( ( [ key, { label, value } ] ) => ( {\n\t\t\tkey,\n\t\t\tlabel,\n\t\t\tvalue,\n\t\t} ) );\n};\n\nexport const createVariable = ( newVariable: Variable ): Promise< string > => {\n\treturn service.create( newVariable ).then( ( { id, variable }: { id: string; variable: TVariable } ) => {\n\t\tstyleVariablesRepository.update( {\n\t\t\t[ id ]: variable,\n\t\t} );\n\t\treturn id;\n\t} );\n};\n","import { httpService } from '@elementor/http-client';\n\nconst BASE_PATH = 'elementor/v1/variables';\n\nexport const apiClient = {\n\tlist: () => {\n\t\treturn httpService().get( BASE_PATH + '/list' );\n\t},\n\n\tcreate: ( type: string, label: string, value: string ) => {\n\t\treturn httpService().post( BASE_PATH + '/create', {\n\t\t\ttype,\n\t\t\tlabel,\n\t\t\tvalue,\n\t\t} );\n\t},\n\n\tupdate: ( id: string, label: string, value: string ) => {\n\t\treturn httpService().put( BASE_PATH + '/update', {\n\t\t\tid,\n\t\t\tlabel,\n\t\t\tvalue,\n\t\t} );\n\t},\n\n\tdelete: ( id: string ) => {\n\t\treturn httpService().post( BASE_PATH + '/delete', { id } );\n\t},\n\n\trestore: ( id: string ) => {\n\t\treturn httpService().post( BASE_PATH + '/restore', { id } );\n\t},\n};\n","export type TVariable = {\n\ttype: string;\n\tlabel: string;\n\tvalue: string;\n\tdeleted?: boolean;\n\tdeleted_at?: string;\n};\n\nexport type TVariablesList = Record< string, TVariable >;\n\nconst STORAGE_KEY = 'elementor-global-variables';\nconst STORAGE_WATERMARK_KEY = 'elementor-global-variables-watermark';\n\nexport const OP_RW = 'RW';\nconst OP_RO = 'RO';\n\nexport class Storage {\n\tstate: {\n\t\twatermark: number;\n\t\tvariables: TVariablesList;\n\t};\n\n\tconstructor() {\n\t\tthis.state = {\n\t\t\twatermark: -1,\n\t\t\tvariables: {},\n\t\t};\n\t}\n\n\tload() {\n\t\tthis.state.watermark = parseInt( localStorage.getItem( STORAGE_WATERMARK_KEY ) \|\| '-1' );\n\t\tthis.state.variables = JSON.parse( localStorage.getItem( STORAGE_KEY ) \|\| '{}' ) as TVariablesList;\n\t\treturn this.state.variables;\n\t}\n\n\tfill( variables: TVariablesList, watermark: number ) {\n\t\tthis.state.watermark = watermark;\n\t\tthis.state.variables = variables;\n\n\t\tlocalStorage.setItem( STORAGE_WATERMARK_KEY, this.state.watermark.toString() );\n\t\tlocalStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );\n\t}\n\n\tadd( id: string, variable: TVariable ) {\n\t\tthis.load();\n\t\tthis.state.variables[ id ] = variable;\n\t\tlocalStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );\n\t}\n\n\tupdate( id: string, variable: TVariable ) {\n\t\tthis.load();\n\t\tthis.state.variables[ id ] = variable;\n\t\tlocalStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );\n\t}\n\n\twatermark( watermark: number ) {\n\t\tthis.state.watermark = watermark;\n\t\tlocalStorage.setItem( STORAGE_WATERMARK_KEY, this.state.watermark.toString() );\n\t}\n\n\twatermarkDiff( operation: string, newWatermark: number ) {\n\t\tconst diff = newWatermark - this.state.watermark;\n\n\t\tif ( OP_RW === operation ) {\n\t\t\treturn 1 !== diff;\n\t\t}\n\n\t\tif ( OP_RO === operation ) {\n\t\t\treturn 0 !== diff;\n\t\t}\n\n\t\treturn false;\n\t}\n}\n","import { apiClient } from './api';\nimport { OP_RW, Storage, type TVariable, type TVariablesList } from './storage';\n\nconst storage = new Storage();\n\nexport const service = {\n\tvariables: (): TVariablesList => {\n\t\treturn storage.load();\n\t},\n\n\tinit: () => {\n\t\tservice.load();\n\t},\n\n\tload: () => {\n\t\treturn apiClient\n\t\t\t.list()\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variables, watermark } = data;\n\n\t\t\t\tstorage.fill( variables, watermark );\n\n\t\t\t\treturn variables;\n\t\t\t} );\n\t},\n\n\tcreate: ( { type, label, value }: TVariable ) => {\n\t\treturn apiClient\n\t\t\t.create( type, label, value )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...createdVariable } = variable;\n\n\t\t\t\tstorage.add( variableId, createdVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: createdVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n\n\tupdate: ( id: string, { label, value }: TVariable ) => {\n\t\treturn apiClient\n\t\t\t.update( id, label, value )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...updatedVariable } = variable;\n\n\t\t\t\tstorage.update( variableId, updatedVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: updatedVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n\n\tdelete: ( id: string ) => {\n\t\treturn apiClient\n\t\t\t.delete( id )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...deletedVariable } = variable;\n\n\t\t\t\tstorage.update( variableId, deletedVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: deletedVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n\n\trestore: ( id: string ) => {\n\t\treturn apiClient\n\t\t\t.restore( id )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...restoredVariable } = variable;\n\n\t\t\t\tstorage.update( variableId, restoredVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: restoredVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n};\n\nconst handleWatermark = ( operation: string, newWatermark: number ) => {\n\tif ( storage.watermarkDiff( operation, newWatermark ) ) {\n\t\tsetTimeout( () => service.load(), 500 );\n\t}\n\tstorage.watermark( newWatermark );\n};\n","import { type StyleVariables, type Variables, type VariableValue } from './types';\n\ntype VariablesChangeCallback = ( variables: StyleVariables ) => void;\n\nexport const createStyleVariablesRepository = () => {\n\tconst variables: StyleVariables = {};\n\tlet subscription: VariablesChangeCallback;\n\n\tconst subscribe = ( cb: VariablesChangeCallback ) => {\n\t\tsubscription = cb;\n\n\t\treturn () => {\n\t\t\tsubscription = () => {};\n\t\t};\n\t};\n\n\tconst notify = () => {\n\t\tif ( typeof subscription === 'function' ) {\n\t\t\tsubscription( { ...variables } );\n\t\t}\n\t};\n\n\tconst shouldUpdate = ( key: string, newValue: VariableValue ): boolean => {\n\t\treturn ! ( key in variables ) \|\| variables[ key ] !== newValue;\n\t};\n\n\tconst applyUpdates = ( updatedVars: Variables ): boolean => {\n\t\tlet hasChanges = false;\n\n\t\tfor ( const [ key, { value } ] of Object.entries( updatedVars ) ) {\n\t\t\tif ( shouldUpdate( key, value ) ) {\n\t\t\t\tvariables[ key ] = value;\n\t\t\t\thasChanges = true;\n\t\t\t}\n\t\t}\n\n\t\treturn hasChanges;\n\t};\n\n\tconst update = ( updatedVars: Variables ) => {\n\t\tif ( applyUpdates( updatedVars ) ) {\n\t\t\tnotify();\n\t\t}\n\t};\n\n\treturn {\n\t\tsubscribe,\n\t\tupdate,\n\t};\n};\n","import { createStyleVariablesRepository } from './create-style-variables-repository';\n\nexport const styleVariablesRepository = createStyleVariablesRepository();\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 { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\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\tconst colorCreationEnabled = colorVariablePropTypeUtil.key === selectedVariable.type;\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{ colorCreationEnabled && (\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t{ ...bindTrigger( creationPopupState ) }\n\t\t\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\t\t\tonClick={ handleCreateButtonClick }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<PlusIcon fontSize=\"tiny\" />\n\t\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t\t) }\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{ colorCreationEnabled && <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\tcreateVariable( {\n\t\t\tvalue: color,\n\t\t\tlabel,\n\t\t\ttype: colorVariablePropTypeUtil.key,\n\t\t} ).then( ( key ) => {\n\t\t\tsetVariable( key );\n\t\t\tclosePopover();\n\t\t} );\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( 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 VariableKey } 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 = ( key: VariableKey ) => {\n\t\tsetVariable( 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( 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 * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport { Portal } from '@elementor/ui';\n\nimport { styleVariablesRepository } from '../style-variables-repository';\nimport { getCanvasIframeDocument } from '../sync/get-canvas-iframe-document';\nimport { type StyleVariables } from '../types';\n\nconst VARIABLES_WRAPPER = 'body';\n\nexport function StyleVariablesRenderer() {\n\tconst container = usePortalContainer();\n\tconst styleVariables = useStyleVariables();\n\n\tconst hasVariables = Object.keys( styleVariables ).length > 0;\n\n\tif ( ! container \|\| ! hasVariables ) {\n\t\treturn null;\n\t}\n\n\tconst cssVariables = convertToCssVariables( styleVariables );\n\tconst wrappedCss = `${ VARIABLES_WRAPPER }{${ cssVariables }}`;\n\n\treturn (\n\t\t<Portal container={ container }>\n\t\t\t<style data-e-style-id=\"e-variables\" key={ wrappedCss }>\n\t\t\t\t{ wrappedCss }\n\t\t\t</style>\n\t\t</Portal>\n\t);\n}\n\nfunction usePortalContainer() {\n\treturn useListenTo( commandEndEvent( 'editor/documents/attach-preview' ), () => getCanvasIframeDocument()?.head );\n}\n\nfunction useStyleVariables() {\n\tconst [ variables, setVariables ] = useState< StyleVariables >( {} );\n\n\tuseEffect( () => {\n\t\tconst unsubscribe = styleVariablesRepository.subscribe( setVariables );\n\n\t\treturn () => {\n\t\t\tunsubscribe();\n\t\t};\n\t}, [] );\n\n\treturn variables;\n}\n\nfunction convertToCssVariables( variables: StyleVariables ): string {\n\treturn Object.entries( variables )\n\t\t.map( ( [ key, value ] ) => `--${ key }:${ value };` )\n\t\t.join( '' );\n}\n","import type { CanvasExtendedWindow } from './types';\n\nexport function getCanvasIframeDocument() {\n\tconst extendedWindow = window as unknown as CanvasExtendedWindow;\n\n\treturn extendedWindow.elementor?.$preview?.[ 0 ]?.contentDocument;\n}\n"],"mappings":"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","names":["React","useBoundProp","styled","React","useRef","bindPopover","Box","CloseButton","Popover","Stack","Typography","__","React","useBoundProp","Box","Divider","useBoundProp","Box","Divider","useRef","Box","Stack","Typography","__","Popover","bindPopover","CloseButton","useBoundProp","React","useBoundProp","ColorFilterIcon","__","createPropUtils","z","useBoundProp","ColorFilterIcon","__","styleTransformersRegistry","controlActionsMenu","registerControlReplacement","React","useBoundProp","React","Fragment","useBoundProp","EditIcon","Box","Divider","ListItemIcon","ListItemText","MenuList","useBoundProp","Fragment","Divider","Box","MenuList","ListItemIcon","ListItemText","EditIcon","useBoundProp","React","useBoundProp","ColorFilterIcon","__","useBoundProp","ColorFilterIcon","__","registerPopoverAction","controlActionsMenu","registerControlReplacement","styleTransformersRegistry","React","useState","useState"]}
1	+ {"version":3,"sources":["../src/init.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/api.ts","../src/storage.ts","../src/service.ts","../src/create-style-variables-repository.ts","../src/style-variables-repository.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/renderers/style-variables-renderer.tsx","../src/sync/get-canvas-iframe-document.ts"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\n\nimport { initColorVariables } from './init-color-variables';\nimport { initFontVariables } from './init-font-variables';\nimport { StyleVariablesRenderer } from './renderers/style-variables-renderer';\nimport { service as variablesService } from './service';\n\nexport function init() {\n\tinitColorVariables();\n\tinitFontVariables();\n\n\tvariablesService.init();\n\n\tinjectIntoTop( {\n\t\tid: 'canvas-style-variables-render',\n\t\tcomponent: StyleVariablesRenderer,\n\t} );\n}\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( 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 VariableKey } 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 = ( key: VariableKey ) => {\n\t\tsetVariable( 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( 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';\nimport { type PropKey } from '@elementor/editor-props';\n\nimport { service } from '../service';\nimport { type TVariable } from '../storage';\nimport { styleVariablesRepository } from '../style-variables-repository';\nimport { type Variable } from '../types';\n\nexport const usePropVariables = ( propKey: PropKey ) => {\n\treturn useMemo( () => normalizeVariables( propKey ), [ propKey ] );\n};\n\nexport const useVariable = ( key: string ) => {\n\tconst variables = service.variables();\n\n\tif ( ! variables?.[ key ] ) {\n\t\treturn null;\n\t}\n\n\treturn {\n\t\t...variables[ key ],\n\t\tkey,\n\t};\n};\n\nconst normalizeVariables = ( propKey: string ) => {\n\tconst variables = service.variables();\n\n\tstyleVariablesRepository.update( variables );\n\n\treturn Object.entries( variables )\n\t\t.filter( ( [ , { type } ] ) => type === propKey )\n\t\t.map( ( [ key, { label, value } ] ) => ( {\n\t\t\tkey,\n\t\t\tlabel,\n\t\t\tvalue,\n\t\t} ) );\n};\n\nexport const createVariable = ( newVariable: Variable ): Promise< string > => {\n\treturn service.create( newVariable ).then( ( { id, variable }: { id: string; variable: TVariable } ) => {\n\t\tstyleVariablesRepository.update( {\n\t\t\t[ id ]: variable,\n\t\t} );\n\t\treturn id;\n\t} );\n};\n","import { httpService } from '@elementor/http-client';\n\nconst BASE_PATH = 'elementor/v1/variables';\n\nexport const apiClient = {\n\tlist: () => {\n\t\treturn httpService().get( BASE_PATH + '/list' );\n\t},\n\n\tcreate: ( type: string, label: string, value: string ) => {\n\t\treturn httpService().post( BASE_PATH + '/create', {\n\t\t\ttype,\n\t\t\tlabel,\n\t\t\tvalue,\n\t\t} );\n\t},\n\n\tupdate: ( id: string, label: string, value: string ) => {\n\t\treturn httpService().put( BASE_PATH + '/update', {\n\t\t\tid,\n\t\t\tlabel,\n\t\t\tvalue,\n\t\t} );\n\t},\n\n\tdelete: ( id: string ) => {\n\t\treturn httpService().post( BASE_PATH + '/delete', { id } );\n\t},\n\n\trestore: ( id: string ) => {\n\t\treturn httpService().post( BASE_PATH + '/restore', { id } );\n\t},\n};\n","export type TVariable = {\n\ttype: string;\n\tlabel: string;\n\tvalue: string;\n\tdeleted?: boolean;\n\tdeleted_at?: string;\n};\n\nexport type TVariablesList = Record< string, TVariable >;\n\nconst STORAGE_KEY = 'elementor-global-variables';\nconst STORAGE_WATERMARK_KEY = 'elementor-global-variables-watermark';\n\nexport const OP_RW = 'RW';\nconst OP_RO = 'RO';\n\nexport class Storage {\n\tstate: {\n\t\twatermark: number;\n\t\tvariables: TVariablesList;\n\t};\n\n\tconstructor() {\n\t\tthis.state = {\n\t\t\twatermark: -1,\n\t\t\tvariables: {},\n\t\t};\n\t}\n\n\tload() {\n\t\tthis.state.watermark = parseInt( localStorage.getItem( STORAGE_WATERMARK_KEY ) \|\| '-1' );\n\t\tthis.state.variables = JSON.parse( localStorage.getItem( STORAGE_KEY ) \|\| '{}' ) as TVariablesList;\n\t\treturn this.state.variables;\n\t}\n\n\tfill( variables: TVariablesList, watermark: number ) {\n\t\tthis.state.watermark = watermark;\n\t\tthis.state.variables = variables;\n\n\t\tlocalStorage.setItem( STORAGE_WATERMARK_KEY, this.state.watermark.toString() );\n\t\tlocalStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );\n\t}\n\n\tadd( id: string, variable: TVariable ) {\n\t\tthis.load();\n\t\tthis.state.variables[ id ] = variable;\n\t\tlocalStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );\n\t}\n\n\tupdate( id: string, variable: TVariable ) {\n\t\tthis.load();\n\t\tthis.state.variables[ id ] = variable;\n\t\tlocalStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );\n\t}\n\n\twatermark( watermark: number ) {\n\t\tthis.state.watermark = watermark;\n\t\tlocalStorage.setItem( STORAGE_WATERMARK_KEY, this.state.watermark.toString() );\n\t}\n\n\twatermarkDiff( operation: string, newWatermark: number ) {\n\t\tconst diff = newWatermark - this.state.watermark;\n\n\t\tif ( OP_RW === operation ) {\n\t\t\treturn 1 !== diff;\n\t\t}\n\n\t\tif ( OP_RO === operation ) {\n\t\t\treturn 0 !== diff;\n\t\t}\n\n\t\treturn false;\n\t}\n}\n","import { apiClient } from './api';\nimport { OP_RW, Storage, type TVariable, type TVariablesList } from './storage';\n\nconst storage = new Storage();\n\nexport const service = {\n\tvariables: (): TVariablesList => {\n\t\treturn storage.load();\n\t},\n\n\tinit: () => {\n\t\tservice.load();\n\t},\n\n\tload: () => {\n\t\treturn apiClient\n\t\t\t.list()\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variables, watermark } = data;\n\n\t\t\t\tstorage.fill( variables, watermark );\n\n\t\t\t\treturn variables;\n\t\t\t} );\n\t},\n\n\tcreate: ( { type, label, value }: TVariable ) => {\n\t\treturn apiClient\n\t\t\t.create( type, label, value )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...createdVariable } = variable;\n\n\t\t\t\tstorage.add( variableId, createdVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: createdVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n\n\tupdate: ( id: string, { label, value }: TVariable ) => {\n\t\treturn apiClient\n\t\t\t.update( id, label, value )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...updatedVariable } = variable;\n\n\t\t\t\tstorage.update( variableId, updatedVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: updatedVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n\n\tdelete: ( id: string ) => {\n\t\treturn apiClient\n\t\t\t.delete( id )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...deletedVariable } = variable;\n\n\t\t\t\tstorage.update( variableId, deletedVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: deletedVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n\n\trestore: ( id: string ) => {\n\t\treturn apiClient\n\t\t\t.restore( id )\n\t\t\t.then( ( response ) => {\n\t\t\t\tconst { success, data: payload } = response.data;\n\n\t\t\t\tif ( ! success ) {\n\t\t\t\t\tthrow new Error( 'Unexpected response from server' );\n\t\t\t\t}\n\n\t\t\t\treturn payload;\n\t\t\t} )\n\t\t\t.then( ( data ) => {\n\t\t\t\tconst { variable, watermark } = data;\n\n\t\t\t\thandleWatermark( OP_RW, watermark );\n\n\t\t\t\tconst { id: variableId, ...restoredVariable } = variable;\n\n\t\t\t\tstorage.update( variableId, restoredVariable );\n\n\t\t\t\treturn {\n\t\t\t\t\tid: variableId,\n\t\t\t\t\tvariable: restoredVariable,\n\t\t\t\t};\n\t\t\t} );\n\t},\n};\n\nconst handleWatermark = ( operation: string, newWatermark: number ) => {\n\tif ( storage.watermarkDiff( operation, newWatermark ) ) {\n\t\tsetTimeout( () => service.load(), 500 );\n\t}\n\tstorage.watermark( newWatermark );\n};\n","import { type StyleVariables, type Variables, type VariableValue } from './types';\n\ntype VariablesChangeCallback = ( variables: StyleVariables ) => void;\n\nexport const createStyleVariablesRepository = () => {\n\tconst variables: StyleVariables = {};\n\tlet subscription: VariablesChangeCallback;\n\n\tconst subscribe = ( cb: VariablesChangeCallback ) => {\n\t\tsubscription = cb;\n\n\t\treturn () => {\n\t\t\tsubscription = () => {};\n\t\t};\n\t};\n\n\tconst notify = () => {\n\t\tif ( typeof subscription === 'function' ) {\n\t\t\tsubscription( { ...variables } );\n\t\t}\n\t};\n\n\tconst shouldUpdate = ( key: string, newValue: VariableValue ): boolean => {\n\t\treturn ! ( key in variables ) \|\| variables[ key ] !== newValue;\n\t};\n\n\tconst applyUpdates = ( updatedVars: Variables ): boolean => {\n\t\tlet hasChanges = false;\n\n\t\tfor ( const [ key, { value } ] of Object.entries( updatedVars ) ) {\n\t\t\tif ( shouldUpdate( key, value ) ) {\n\t\t\t\tvariables[ key ] = value;\n\t\t\t\thasChanges = true;\n\t\t\t}\n\t\t}\n\n\t\treturn hasChanges;\n\t};\n\n\tconst update = ( updatedVars: Variables ) => {\n\t\tif ( applyUpdates( updatedVars ) ) {\n\t\t\tnotify();\n\t\t}\n\t};\n\n\treturn {\n\t\tsubscribe,\n\t\tupdate,\n\t};\n};\n","import { createStyleVariablesRepository } from './create-style-variables-repository';\n\nexport const styleVariablesRepository = createStyleVariablesRepository();\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 { PopoverHeader } from '@elementor/editor-ui';\nimport { ColorFilterIcon, DetachIcon, PlusIcon } from '@elementor/icons';\nimport {\n\tbindPopover,\n\tbindTrigger,\n\tBox,\n\tIconButton,\n\tPopover,\n\tStack,\n\tTypography,\n\tUnstableTag as Tag,\n\tusePopupState,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';\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\nconst SIZE = 'tiny';\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\tconst colorCreationEnabled = colorVariablePropTypeUtil.key === selectedVariable.type;\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={ SIZE } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>\n\t\t\t\t\t\t<DetachIcon fontSize={ SIZE } />\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<PopoverHeader\n\t\t\t\t\ttitle={ __( 'Variables', 'elementor' ) }\n\t\t\t\t\tonClose={ closePopover }\n\t\t\t\t\ticon={ <ColorFilterIcon fontSize={ SIZE } /> }\n\t\t\t\t\tactions={ [\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\tkey=\"createVariable\"\n\t\t\t\t\t\t\t{ ...bindTrigger( creationPopupState ) }\n\t\t\t\t\t\t\tsize={ SIZE }\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={ SIZE } />\n\t\t\t\t\t\t</IconButton>,\n\t\t\t\t\t] }\n\t\t\t\t/>\n\t\t\t\t{ children?.( { closePopover } ) }\n\t\t\t</Popover>\n\n\t\t\t{ colorCreationEnabled && <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 { PopoverHeader } from '@elementor/editor-ui';\nimport { BrushIcon } from '@elementor/icons';\nimport {\n\tbindPopover,\n\tBox,\n\tButton,\n\tCardActions,\n\tDivider,\n\tFormLabel,\n\tGrid,\n\tPopover,\n\ttype PopupState,\n\tStack,\n\tTextField,\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\nconst SIZE = 'tiny';\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\tcreateVariable( {\n\t\t\tvalue: color,\n\t\t\tlabel,\n\t\t\ttype: colorVariablePropTypeUtil.key,\n\t\t} ).then( ( key ) => {\n\t\t\tsetVariable( key );\n\t\t\tclosePopover();\n\t\t} );\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<PopoverHeader\n\t\t\t\t\ttitle={ __( 'Create variable', 'elementor' ) }\n\t\t\t\t\tonClose={ closePopover }\n\t\t\t\t\ticon={ <BrushIcon fontSize={ SIZE } /> }\n\t\t\t\t/>\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( 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 VariableKey } 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 = ( key: VariableKey ) => {\n\t\tsetVariable( 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( 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 * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport { Portal } from '@elementor/ui';\n\nimport { styleVariablesRepository } from '../style-variables-repository';\nimport { getCanvasIframeDocument } from '../sync/get-canvas-iframe-document';\nimport { type StyleVariables } from '../types';\n\nconst VARIABLES_WRAPPER = 'body';\n\nexport function StyleVariablesRenderer() {\n\tconst container = usePortalContainer();\n\tconst styleVariables = useStyleVariables();\n\n\tconst hasVariables = Object.keys( styleVariables ).length > 0;\n\n\tif ( ! container \|\| ! hasVariables ) {\n\t\treturn null;\n\t}\n\n\tconst cssVariables = convertToCssVariables( styleVariables );\n\tconst wrappedCss = `${ VARIABLES_WRAPPER }{${ cssVariables }}`;\n\n\treturn (\n\t\t<Portal container={ container }>\n\t\t\t<style data-e-style-id=\"e-variables\" key={ wrappedCss }>\n\t\t\t\t{ wrappedCss }\n\t\t\t</style>\n\t\t</Portal>\n\t);\n}\n\nfunction usePortalContainer() {\n\treturn useListenTo( commandEndEvent( 'editor/documents/attach-preview' ), () => getCanvasIframeDocument()?.head );\n}\n\nfunction useStyleVariables() {\n\tconst [ variables, setVariables ] = useState< StyleVariables >( {} );\n\n\tuseEffect( () => {\n\t\tconst unsubscribe = styleVariablesRepository.subscribe( setVariables );\n\n\t\treturn () => {\n\t\t\tunsubscribe();\n\t\t};\n\t}, [] );\n\n\treturn variables;\n}\n\nfunction convertToCssVariables( variables: StyleVariables ): string {\n\treturn Object.entries( variables )\n\t\t.map( ( [ key, value ] ) => `--${ key }:${ value };` )\n\t\t.join( '' );\n}\n","import type { CanvasExtendedWindow } from './types';\n\nexport function getCanvasIframeDocument() {\n\tconst extendedWindow = window as unknown as CanvasExtendedWindow;\n\n\treturn extendedWindow.elementor?.$preview?.[ 0 ]?.contentDocument;\n}\n"],"mappings":"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","names":["React","useBoundProp","styled","React","useRef","PopoverHeader","bindPopover","Box","Popover","Stack","__","React","useBoundProp","Box","Divider","useBoundProp","Box","Divider","SIZE","useRef","Box","Stack","__","Popover","bindPopover","PopoverHeader","useBoundProp","React","useBoundProp","ColorFilterIcon","__","createPropUtils","z","useBoundProp","ColorFilterIcon","__","styleTransformersRegistry","controlActionsMenu","registerControlReplacement","React","useBoundProp","React","Fragment","useBoundProp","EditIcon","Box","Divider","ListItemIcon","ListItemText","MenuList","useBoundProp","Fragment","Divider","Box","MenuList","ListItemIcon","ListItemText","EditIcon","useBoundProp","React","useBoundProp","ColorFilterIcon","__","useBoundProp","ColorFilterIcon","__","registerPopoverAction","controlActionsMenu","registerControlReplacement","styleTransformersRegistry","React","useState","useState"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,16 +40,17 @@
   },
   "dependencies": {
     "@elementor/editor": "0.19.4",
-    "@elementor/editor-editing-panel": "1.43.1",
-    "@elementor/editor-canvas": "0.22.2",
+    "@elementor/editor-editing-panel": "1.44.0",
+    "@elementor/editor-canvas": "0.22.3",
     "@elementor/editor-props": "0.12.1",
     "@elementor/schema": "0.1.2",
-    "@elementor/editor-controls": "0.35.0",
+    "@elementor/editor-controls": "0.36.0",
     "@elementor/icons": "1.44.0",
     "@wordpress/i18n": "^5.13.0",
     "@elementor/ui": "1.34.5",
     "@elementor/editor-v1-adapters": "0.12.0",
-    "@elementor/http-client": "0.3.0"
+    "@elementor/http-client": "0.3.0",
+    "@elementor/editor-ui": "0.11.0"
   },
   "peerDependencies": {
     "react": "^18.3.1"

package/src/components/color-variable-creation.tsx CHANGED Viewed

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { useRef, useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
+import { PopoverHeader } from '@elementor/editor-ui';
 import { BrushIcon } from '@elementor/icons';
 import {
 	bindPopover,
 	Box,
 	Button,
 	CardActions,
-	CloseButton,
 	Divider,
 	FormLabel,
 	Grid,
@@ -15,7 +15,6 @@ import {
 	type PopupState,
 	Stack,
 	TextField,
-	Typography,
 	UnstableColorField,
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -23,6 +22,8 @@ import { __ } from '@wordpress/i18n';
 import { createVariable } from '../hooks/use-prop-variables';
 import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
+const SIZE = 'tiny';
 export const ColorVariableCreation = ( { popupState }: { popupState: PopupState } ) => {
 	const { setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );
@@ -64,15 +65,11 @@ export const ColorVariableCreation = ( { popupState }: { popupState: PopupState
 				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
 				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
 			>
-				<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
-					<BrushIcon fontSize="tiny" sx={ { mr: 0.5 } } />
-					<Typography variant="subtitle2">{ __( 'Create variable', 'elementor' ) }</Typography>
-					<CloseButton
-						slotProps={ { icon: { fontSize: 'small' } } }
-						sx={ { ml: 'auto' } }
-						onClick={ closePopover }
-					/>
-				</Stack>
+				<PopoverHeader
+					title={ __( 'Create variable', 'elementor' ) }
+					onClose={ closePopover }
+					icon={ <BrushIcon fontSize={ SIZE } /> }
+				/>
 				<Divider />

package/src/components/variables-selection-popover.tsx CHANGED Viewed

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { useId, useRef } from 'react';
+import { PopoverHeader } from '@elementor/editor-ui';
 import { ColorFilterIcon, DetachIcon, PlusIcon } from '@elementor/icons';
 import {
 	bindPopover,
 	bindTrigger,
 	Box,
-	CloseButton,
 	IconButton,
 	Popover,
 	Stack,
@@ -26,6 +26,8 @@ type Props = {
 	startTagAdornment?: React.ReactNode;
 };
+const SIZE = 'tiny';
 export const VariablesSelectionPopover = ( {
 	selectedVariable,
 	unlinkVariable,
@@ -68,8 +70,8 @@ export const VariablesSelectionPopover = ( {
 					</Box>
 				}
 				actions={
-					<IconButton size="tiny" onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>
-						<DetachIcon fontSize="tiny" />
+					<IconButton size={ SIZE } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>
+						<DetachIcon fontSize={ SIZE } />
 					</IconButton>
 				}
 			/>
@@ -80,22 +82,21 @@ export const VariablesSelectionPopover = ( {
 				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
 				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
 			>
-				<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
-					<ColorFilterIcon fontSize="tiny" sx={ { mr: 0.5 } } />
-					<Typography variant="subtitle2">{ __( 'Variables', 'elementor' ) }</Typography>
-					<Stack direction="row" sx={ { ml: 'auto' } }>
-						{ colorCreationEnabled && (
-							<IconButton
-								{ ...bindTrigger( creationPopupState ) }
-								size="tiny"
-								onClick={ handleCreateButtonClick }
-							>
-								<PlusIcon fontSize="tiny" />
-							</IconButton>
-						) }
-						<CloseButton slotProps={ { icon: { fontSize: 'tiny' } } } onClick={ closePopover } />
-					</Stack>
-				</Stack>
+				<PopoverHeader
+					title={ __( 'Variables', 'elementor' ) }
+					onClose={ closePopover }
+					icon={ <ColorFilterIcon fontSize={ SIZE } /> }
+					actions={ [
+						<IconButton
+							key="createVariable"
+							{ ...bindTrigger( creationPopupState ) }
+							size={ SIZE }
+							onClick={ handleCreateButtonClick }
+						>
+							<PlusIcon fontSize={ SIZE } />
+						</IconButton>,
+					] }
+				/>
 				{ children?.( { closePopover } ) }
 			</Popover>