@elementor/editor-ui 0.5.0 → 0.5.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-ui@0.5.0 build
+> @elementor/editor-ui@0.5.1 build
 > tsup --config=../../tsup.build.ts
 
 CLI Building entry: src/index.ts
@@ -10,13 +10,13 @@
 CLI Cleaning output folder
 ESM Build start
 CJS Build start
-ESM dist/index.mjs     6.02 KB
-ESM dist/index.mjs.map 11.72 KB
-ESM ⚡️ Build success in 249ms
-CJS dist/index.js     7.96 KB
-CJS dist/index.js.map 12.06 KB
-CJS ⚡️ Build success in 260ms
+ESM dist/index.mjs     7.57 KB
+ESM dist/index.mjs.map 14.92 KB
+ESM ⚡️ Build success in 149ms
+CJS dist/index.js     9.64 KB
+CJS dist/index.js.map 15.26 KB
+CJS ⚡️ Build success in 135ms
 DTS Build start
-DTS ⚡️ Build success in 42228ms
-DTS dist/index.d.mts 1.90 KB
-DTS dist/index.d.ts  1.90 KB
+DTS ⚡️ Build success in 17237ms
+DTS dist/index.d.mts 2.09 KB
+DTS dist/index.d.ts  2.09 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @elementor/editor-ui
 
+## 0.5.1
+
+### Patch Changes
+
+- 666ffdd: Change theme provider styles for editing panel and class manager panel
+
 ## 0.5.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -13,10 +13,18 @@ declare const EditableField: React$1.ForwardRefExoticComponent<Omit<any, "ref">
 type IntroductionModalProps = {
     open: boolean;
     handleClose: (shouldShowAgain: boolean) => void;
-    title: string;
+    title?: string;
     content: React$1.ReactNode;
+    image?: {
+        src: string;
+        alt: string;
+    };
 };
-declare const IntroductionModal: ({ open, handleClose, title, content }: IntroductionModalProps) => React$1.JSX.Element;
+declare const IntroductionModal: ({ open, handleClose, title, content, image }: IntroductionModalProps) => React$1.JSX.Element;
+
+declare function ThemeProvider({ children }: {
+    children: React$1.ReactNode;
+}): React$1.JSX.Element;
 
 declare const MenuListItem: ({ children, ...props }: MenuItemProps) => React$1.JSX.Element;
 
@@ -45,4 +53,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick }: UseEditabl
     };
 };
 
-export { EditableField, EllipsisWithTooltip, IntroductionModal, MenuListItem, useEditable };
+export { EditableField, EllipsisWithTooltip, IntroductionModal, MenuListItem, ThemeProvider, useEditable };

package/dist/index.d.ts

@@ -13,10 +13,18 @@ declare const EditableField: React$1.ForwardRefExoticComponent<Omit<any, "ref">
 type IntroductionModalProps = {
     open: boolean;
     handleClose: (shouldShowAgain: boolean) => void;
-    title: string;
+    title?: string;
     content: React$1.ReactNode;
+    image?: {
+        src: string;
+        alt: string;
+    };
 };
-declare const IntroductionModal: ({ open, handleClose, title, content }: IntroductionModalProps) => React$1.JSX.Element;
+declare const IntroductionModal: ({ open, handleClose, title, content, image }: IntroductionModalProps) => React$1.JSX.Element;
+
+declare function ThemeProvider({ children }: {
+    children: React$1.ReactNode;
+}): React$1.JSX.Element;
 
 declare const MenuListItem: ({ children, ...props }: MenuItemProps) => React$1.JSX.Element;
 
@@ -45,4 +53,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick }: UseEditabl
     };
 };
 
-export { EditableField, EllipsisWithTooltip, IntroductionModal, MenuListItem, useEditable };
+export { EditableField, EllipsisWithTooltip, IntroductionModal, MenuListItem, ThemeProvider, useEditable };

package/dist/index.js

@@ -34,6 +34,7 @@ __export(index_exports, {
   EllipsisWithTooltip: () => EllipsisWithTooltip,
   IntroductionModal: () => IntroductionModal,
   MenuListItem: () => MenuListItem,
+  ThemeProvider: () => ThemeProvider,
   useEditable: () => useEditable
 });
 module.exports = __toCommonJS(index_exports);
@@ -104,7 +105,7 @@ var import_react3 = require("react");
 var import_ui3 = require("@elementor/ui");
 var import_i18n = require("@wordpress/i18n");
 var OPEN_DELAY = 1e3;
-var IntroductionModal = ({ open, handleClose, title, content }) => {
+var IntroductionModal = ({ open, handleClose, title, content, image }) => {
   const [shouldShowAgain, setShouldShowAgain] = (0, import_react3.useState)(true);
   return /* @__PURE__ */ React3.createElement(
     import_ui3.Dialog,
@@ -117,7 +118,8 @@ var IntroductionModal = ({ open, handleClose, title, content }) => {
         style: { transitionDelay: open ? `${OPEN_DELAY}ms` : "0ms" }
       }
     },
-    /* @__PURE__ */ React3.createElement(import_ui3.DialogHeader, { logo: false }, /* @__PURE__ */ React3.createElement(import_ui3.DialogTitle, null, title)),
+    title && /* @__PURE__ */ React3.createElement(import_ui3.DialogHeader, { logo: false }, /* @__PURE__ */ React3.createElement(import_ui3.DialogTitle, null, title)),
+    image && /* @__PURE__ */ React3.createElement(import_ui3.Image, { sx: { width: "100%" }, src: image.src, alt: image.alt }),
     content,
     /* @__PURE__ */ React3.createElement(import_ui3.DialogActions, null, /* @__PURE__ */ React3.createElement(
       import_ui3.FormControlLabel,
@@ -130,40 +132,76 @@ var IntroductionModal = ({ open, handleClose, title, content }) => {
             onChange: () => setShouldShowAgain(!shouldShowAgain)
           }
         ),
-        label: (0, import_i18n.__)("Don't show this again", "elementor")
+        label: /* @__PURE__ */ React3.createElement(import_ui3.Typography, { variant: "body2" }, (0, import_i18n.__)("Don't show this again", "elementor"))
       }
     ), /* @__PURE__ */ React3.createElement(import_ui3.Button, { size: "medium", onClick: () => handleClose(shouldShowAgain), variant: "contained" }, (0, import_i18n.__)("Got it", "elementor")))
   );
 };
 
-// src/components/menu-item.tsx
+// src/components/theme-provider.tsx
 var React4 = __toESM(require("react"));
 var import_ui4 = require("@elementor/ui");
-var MenuListItem = ({ children, ...props }) => /* @__PURE__ */ React4.createElement(
-  import_ui4.MenuItem,
-  {
-    dense: true,
-    ...props,
-    sx: {
-      ...props.sx ?? {}
-    }
-  },
-  /* @__PURE__ */ React4.createElement(
-    import_ui4.MenuItemText,
+
+// src/hooks/use-color-scheme.ts
+var import_react4 = require("react");
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+function useColorScheme() {
+  const [colorScheme, setColorScheme] = (0, import_react4.useState)(() => getV1ColorScheme());
+  (0, import_react4.useEffect)(() => {
+    return (0, import_editor_v1_adapters.__privateListenTo)((0, import_editor_v1_adapters.v1ReadyEvent)(), () => setColorScheme(getV1ColorScheme()));
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    return (0, import_editor_v1_adapters.__privateListenTo)((0, import_editor_v1_adapters.commandEndEvent)("document/elements/settings"), (e) => {
+      const event = e;
+      const isColorScheme = event.args?.settings && "ui_theme" in event.args.settings;
+      if (isColorScheme) {
+        setColorScheme(getV1ColorScheme());
+      }
+    });
+  }, []);
+  return colorScheme;
+}
+function getV1ColorScheme() {
+  return window.elementor?.getPreferences?.("ui_theme") || "auto";
+}
+
+// src/components/theme-provider.tsx
+var EDITOR_PALLETTE = "unstable";
+function ThemeProvider({ children }) {
+  const colorScheme = useColorScheme();
+  return /* @__PURE__ */ React4.createElement(import_ui4.ThemeProvider, { colorScheme, palette: EDITOR_PALLETTE }, children);
+}
+
+// src/components/menu-item.tsx
+var React5 = __toESM(require("react"));
+var import_ui5 = require("@elementor/ui");
+var MenuListItem = ({ children, ...props }) => {
+  return /* @__PURE__ */ React5.createElement(
+    import_ui5.MenuItem,
     {
-      primary: children,
-      primaryTypographyProps: {
-        variant: "caption"
+      dense: true,
+      ...props,
+      sx: {
+        ...props.sx ?? {}
       }
-    }
-  )
-);
+    },
+    /* @__PURE__ */ React5.createElement(
+      import_ui5.MenuItemText,
+      {
+        primary: children,
+        primaryTypographyProps: {
+          variant: "caption"
+        }
+      }
+    )
+  );
+};
 
 // src/hooks/use-editable.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 var useEditable = ({ value, onSubmit, validation, onClick }) => {
-  const [isEditing, setIsEditing] = (0, import_react4.useState)(false);
-  const [error, setError] = (0, import_react4.useState)(null);
+  const [isEditing, setIsEditing] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)(null);
   const ref = useSelection(isEditing);
   const isDirty = (newValue) => newValue !== value;
   const openEditMode = () => {
@@ -233,8 +271,8 @@ var useEditable = ({ value, onSubmit, validation, onClick }) => {
   };
 };
 var useSelection = (isEditing) => {
-  const ref = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const ref = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     if (isEditing) {
       selectAll(ref.current);
     }
@@ -257,6 +295,7 @@ var selectAll = (el) => {
   EllipsisWithTooltip,
   IntroductionModal,
   MenuListItem,
+  ThemeProvider,
   useEditable
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/ellipsis-with-tooltip.tsx","../src/components/editable-field.tsx","../src/components/introduction-modal.tsx","../src/components/menu-item.tsx","../src/hooks/use-editable.ts"],"sourcesContent":["// components\nexport { EllipsisWithTooltip } from './components/ellipsis-with-tooltip';\nexport { EditableField } from './components/editable-field';\nexport { IntroductionModal } from './components/introduction-modal';\nexport { MenuListItem } from './components/menu-item';\n\n// hooks\nexport { useEditable } from './hooks/use-editable';\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Tooltip } from '@elementor/ui';\n\ntype EllipsisWithTooltipProps< T extends React.ElementType > = {\n\tmaxWidth?: React.CSSProperties[ 'maxWidth' ];\n\ttitle: string;\n\tas?: T;\n} & React.ComponentProps< T >;\n\nexport const EllipsisWithTooltip = < T extends React.ElementType >( {\n\tmaxWidth,\n\ttitle,\n\tas,\n\t...props\n}: EllipsisWithTooltipProps< T > ) => {\n\tconst [ setRef, isOverflowing ] = useIsOverflowing();\n\n\tif ( isOverflowing ) {\n\t\treturn (\n\t\t\t<Tooltip title={ title } placement=\"top\">\n\t\t\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Content>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t{ title }\n\t\t</Content>\n\t);\n};\n\ntype ContentProps< T extends React.ElementType > = React.PropsWithChildren<\n\tOmit< EllipsisWithTooltipProps< T >, 'title' >\n>;\n\nconst Content = React.forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ maxWidth, as: Component = Box, ...props }: ContentProps< T >,\n\t\t// forwardRef loses the typing when using generic components.\n\t\tref: unknown\n\t) => (\n\t\t<Component\n\t\t\tref={ ref }\n\t\t\tposition=\"relative\"\n\t\t\t{ ...props }\n\t\t\tstyle={ { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth } }\n\t\t/>\n\t)\n);\n\nconst useIsOverflowing = () => {\n\tconst [ el, setEl ] = useState< HTMLElement | null >( null );\n\tconst [ isOverflowing, setIsOverflown ] = useState( false );\n\n\tuseEffect( () => {\n\t\tconst observer = new ResizeObserver( ( [ { target } ] ) => {\n\t\t\tsetIsOverflown( target.scrollWidth > target.clientWidth );\n\t\t} );\n\n\t\tif ( el ) {\n\t\t\tobserver.observe( el );\n\t\t}\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ el ] );\n\n\treturn [ setEl, isOverflowing ] as const;\n};\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Box, styled, Tooltip } from '@elementor/ui';\n\ntype EditableFieldProps< T extends React.ElementType > = {\n\tvalue: string;\n\terror?: string;\n\tas?: T;\n} & React.ComponentPropsWithRef< T >;\n\nexport const EditableField = forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ value, error, as = 'span', sx, ...props }: EditableFieldProps< T >,\n\t\tref: unknown\n\t) => {\n\t\treturn (\n\t\t\t<Tooltip title={ error } open={ !! error } placement=\"top\">\n\t\t\t\t<StyledField ref={ ref } component={ as } { ...props }>\n\t\t\t\t\t{ value }\n\t\t\t\t</StyledField>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n);\n\nconst StyledField = styled( Box )`\n\twidth: 100%;\n\t&:focus {\n\t\toutline: none;\n\t}\n`;\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { Button, Checkbox, Dialog, DialogActions, DialogHeader, DialogTitle, FormControlLabel } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype IntroductionModalProps = {\n\topen: boolean;\n\thandleClose: ( shouldShowAgain: boolean ) => void;\n\ttitle: string;\n\tcontent: React.ReactNode;\n};\n\nconst OPEN_DELAY = 1000;\n\nexport const IntroductionModal = ( { open, handleClose, title, content }: IntroductionModalProps ) => {\n\tconst [ shouldShowAgain, setShouldShowAgain ] = useState( true );\n\n\treturn (\n\t\t<Dialog\n\t\t\topen={ open }\n\t\t\tonClose={ handleClose }\n\t\t\tmaxWidth={ 'sm' }\n\t\t\tTransitionProps={ {\n\t\t\t\ttimeout: 700,\n\t\t\t\tstyle: { transitionDelay: open ? `${ OPEN_DELAY }ms` : '0ms' },\n\t\t\t} }\n\t\t>\n\t\t\t<DialogHeader logo={ false }>\n\t\t\t\t<DialogTitle>{ title }</DialogTitle>\n\t\t\t</DialogHeader>\n\t\t\t{ content }\n\t\t\t<DialogActions>\n\t\t\t\t<FormControlLabel\n\t\t\t\t\tsx={ { marginRight: 'auto' } }\n\t\t\t\t\tcontrol={\n\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\tchecked={ ! shouldShowAgain }\n\t\t\t\t\t\t\tonChange={ () => setShouldShowAgain( ! shouldShowAgain ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={ __( \"Don't show this again\", 'elementor' ) }\n\t\t\t\t/>\n\t\t\t\t<Button size={ 'medium' } onClick={ () => handleClose( shouldShowAgain ) } variant=\"contained\">\n\t\t\t\t\t{ __( 'Got it', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n};\n","import * as React from 'react';\nimport { MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';\n\nexport const MenuListItem = ( { children, ...props }: MenuItemProps ) => (\n\t<MenuItem\n\t\tdense\n\t\t{ ...props }\n\t\tsx={ {\n\t\t\t...( props.sx ?? {} ),\n\t\t} }\n\t>\n\t\t<MenuItemText\n\t\t\tprimary={ children }\n\t\t\tprimaryTypographyProps={ {\n\t\t\t\tvariant: 'caption',\n\t\t\t} }\n\t\t/>\n\t</MenuItem>\n);\n","import { useEffect, useRef, useState } from 'react';\n\ntype UseEditableParams = {\n\tvalue: string;\n\tonSubmit: ( value: string ) => unknown;\n\tvalidation?: ( value: string ) => string | null;\n\tonClick?: ( event: React.MouseEvent< HTMLDivElement > ) => void;\n};\n\nexport const useEditable = ( { value, onSubmit, validation, onClick }: UseEditableParams ) => {\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ error, setError ] = useState< string | null >( null );\n\n\tconst ref = useSelection( isEditing );\n\n\tconst isDirty = ( newValue: string ) => newValue !== value;\n\n\tconst openEditMode = () => {\n\t\tsetIsEditing( true );\n\t};\n\n\tconst closeEditMode = () => {\n\t\tref.current?.blur();\n\n\t\tsetError( null );\n\t\tsetIsEditing( false );\n\t};\n\n\tconst submit = ( newValue: string ) => {\n\t\tif ( ! isDirty( newValue ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! error ) {\n\t\t\ttry {\n\t\t\t\tonSubmit( newValue );\n\t\t\t} finally {\n\t\t\t\tcloseEditMode();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst onChange = ( event: React.ChangeEvent< HTMLSpanElement > ) => {\n\t\tconst { innerText: newValue } = event.target;\n\n\t\tif ( validation ) {\n\t\t\tsetError( isDirty( newValue ) ? validation( newValue ) : null );\n\t\t}\n\t};\n\n\tconst handleKeyDown = ( event: React.KeyboardEvent ) => {\n\t\tevent.stopPropagation();\n\n\t\tif ( [ 'Escape' ].includes( event.key ) ) {\n\t\t\treturn closeEditMode();\n\t\t}\n\n\t\tif ( [ 'Enter' ].includes( event.key ) ) {\n\t\t\tevent.preventDefault();\n\t\t\treturn submit( ( event.target as HTMLElement ).innerText );\n\t\t}\n\t};\n\n\tconst handleClick = ( event: React.MouseEvent< HTMLDivElement > ) => {\n\t\tif ( isEditing ) {\n\t\t\tevent.stopPropagation();\n\t\t}\n\n\t\tonClick?.( event );\n\t};\n\n\tconst listeners = {\n\t\tonClick: handleClick,\n\t\tonKeyDown: handleKeyDown,\n\t\tonInput: onChange,\n\t\tonBlur: closeEditMode,\n\t} as const;\n\n\tconst attributes = {\n\t\tvalue,\n\t\trole: 'textbox',\n\t\tcontentEditable: isEditing,\n\t\t...( isEditing && {\n\t\t\tsuppressContentEditableWarning: true,\n\t\t} ),\n\t} as const;\n\n\treturn {\n\t\tref,\n\t\tisEditing,\n\t\topenEditMode,\n\t\tcloseEditMode,\n\t\tvalue,\n\t\terror,\n\t\tgetProps: () => ( { ...listeners, ...attributes } ),\n\t} as const;\n};\n\nconst useSelection = ( isEditing: boolean ) => {\n\tconst ref = useRef< HTMLElement | null >( null );\n\n\tuseEffect( () => {\n\t\tif ( isEditing ) {\n\t\t\tselectAll( ref.current );\n\t\t}\n\t}, [ isEditing ] );\n\n\treturn ref;\n};\n\nconst selectAll = ( el: HTMLElement | null ) => {\n\tconst selection = getSelection();\n\n\tif ( ! selection || ! el ) {\n\t\treturn;\n\t}\n\n\tconst range = document.createRange();\n\trange.selectNodeContents( el );\n\n\tselection.removeAllRanges();\n\tselection.addRange( range );\n};\n"],"mappings":"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","names":["React","import_react","import_ui","React","import_react","import_ui","React","import_ui","import_react"]}
+{"version":3,"sources":["../src/index.ts","../src/components/ellipsis-with-tooltip.tsx","../src/components/editable-field.tsx","../src/components/introduction-modal.tsx","../src/components/theme-provider.tsx","../src/hooks/use-color-scheme.ts","../src/components/menu-item.tsx","../src/hooks/use-editable.ts"],"sourcesContent":["// components\nexport { EllipsisWithTooltip } from './components/ellipsis-with-tooltip';\nexport { EditableField } from './components/editable-field';\nexport { IntroductionModal } from './components/introduction-modal';\nexport { default as ThemeProvider } from './components/theme-provider';\nexport { MenuListItem } from './components/menu-item';\n\n// hooks\nexport { useEditable } from './hooks/use-editable';\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Tooltip } from '@elementor/ui';\n\ntype EllipsisWithTooltipProps< T extends React.ElementType > = {\n\tmaxWidth?: React.CSSProperties[ 'maxWidth' ];\n\ttitle: string;\n\tas?: T;\n} & React.ComponentProps< T >;\n\nexport const EllipsisWithTooltip = < T extends React.ElementType >( {\n\tmaxWidth,\n\ttitle,\n\tas,\n\t...props\n}: EllipsisWithTooltipProps< T > ) => {\n\tconst [ setRef, isOverflowing ] = useIsOverflowing();\n\n\tif ( isOverflowing ) {\n\t\treturn (\n\t\t\t<Tooltip title={ title } placement=\"top\">\n\t\t\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Content>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t{ title }\n\t\t</Content>\n\t);\n};\n\ntype ContentProps< T extends React.ElementType > = React.PropsWithChildren<\n\tOmit< EllipsisWithTooltipProps< T >, 'title' >\n>;\n\nconst Content = React.forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ maxWidth, as: Component = Box, ...props }: ContentProps< T >,\n\t\t// forwardRef loses the typing when using generic components.\n\t\tref: unknown\n\t) => (\n\t\t<Component\n\t\t\tref={ ref }\n\t\t\tposition=\"relative\"\n\t\t\t{ ...props }\n\t\t\tstyle={ { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth } }\n\t\t/>\n\t)\n);\n\nconst useIsOverflowing = () => {\n\tconst [ el, setEl ] = useState< HTMLElement | null >( null );\n\tconst [ isOverflowing, setIsOverflown ] = useState( false );\n\n\tuseEffect( () => {\n\t\tconst observer = new ResizeObserver( ( [ { target } ] ) => {\n\t\t\tsetIsOverflown( target.scrollWidth > target.clientWidth );\n\t\t} );\n\n\t\tif ( el ) {\n\t\t\tobserver.observe( el );\n\t\t}\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ el ] );\n\n\treturn [ setEl, isOverflowing ] as const;\n};\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Box, styled, Tooltip } from '@elementor/ui';\n\ntype EditableFieldProps< T extends React.ElementType > = {\n\tvalue: string;\n\terror?: string;\n\tas?: T;\n} & React.ComponentPropsWithRef< T >;\n\nexport const EditableField = forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ value, error, as = 'span', sx, ...props }: EditableFieldProps< T >,\n\t\tref: unknown\n\t) => {\n\t\treturn (\n\t\t\t<Tooltip title={ error } open={ !! error } placement=\"top\">\n\t\t\t\t<StyledField ref={ ref } component={ as } { ...props }>\n\t\t\t\t\t{ value }\n\t\t\t\t</StyledField>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n);\n\nconst StyledField = styled( Box )`\n\twidth: 100%;\n\t&:focus {\n\t\toutline: none;\n\t}\n`;\n","import * as React from 'react';\nimport { useState } from 'react';\nimport {\n\tButton,\n\tCheckbox,\n\tDialog,\n\tDialogActions,\n\tDialogHeader,\n\tDialogTitle,\n\tFormControlLabel,\n\tImage,\n\tTypography,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype IntroductionModalProps = {\n\topen: boolean;\n\thandleClose: ( shouldShowAgain: boolean ) => void;\n\ttitle?: string;\n\tcontent: React.ReactNode;\n\timage?: {\n\t\tsrc: string;\n\t\talt: string;\n\t};\n};\n\nconst OPEN_DELAY = 1000;\n\nexport const IntroductionModal = ( { open, handleClose, title, content, image }: IntroductionModalProps ) => {\n\tconst [ shouldShowAgain, setShouldShowAgain ] = useState( true );\n\n\treturn (\n\t\t<Dialog\n\t\t\topen={ open }\n\t\t\tonClose={ handleClose }\n\t\t\tmaxWidth={ 'sm' }\n\t\t\tTransitionProps={ {\n\t\t\t\ttimeout: 700,\n\t\t\t\tstyle: { transitionDelay: open ? `${ OPEN_DELAY }ms` : '0ms' },\n\t\t\t} }\n\t\t>\n\t\t\t{ title && (\n\t\t\t\t<DialogHeader logo={ false }>\n\t\t\t\t\t<DialogTitle>{ title }</DialogTitle>\n\t\t\t\t</DialogHeader>\n\t\t\t) }\n\t\t\t{ image && <Image sx={ { width: '100%' } } src={ image.src } alt={ image.alt } /> }\n\t\t\t{ content }\n\t\t\t<DialogActions>\n\t\t\t\t<FormControlLabel\n\t\t\t\t\tsx={ { marginRight: 'auto' } }\n\t\t\t\t\tcontrol={\n\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\tchecked={ ! shouldShowAgain }\n\t\t\t\t\t\t\tonChange={ () => setShouldShowAgain( ! shouldShowAgain ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={\n\t\t\t\t\t\t<Typography variant={ 'body2' }>{ __( \"Don't show this again\", 'elementor' ) }</Typography>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<Button size={ 'medium' } onClick={ () => handleClose( shouldShowAgain ) } variant=\"contained\">\n\t\t\t\t\t{ __( 'Got it', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n};\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase, type ThemeProviderProps } from '@elementor/ui';\n\nimport { useColorScheme } from '../hooks/use-color-scheme';\n\nconst EDITOR_PALLETTE: ThemeProviderProps[ 'palette' ] = 'unstable';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme } palette={ EDITOR_PALLETTE }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\tcommandEndEvent,\n\ttype CommandEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme;\n\t};\n};\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {\n\t\t\tconst event = e as CommandEvent< {\n\t\t\t\tsettings: {\n\t\t\t\t\tui_theme?: ColorScheme;\n\t\t\t\t};\n\t\t\t} >;\n\n\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\tif ( isColorScheme ) {\n\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n","import * as React from 'react';\nimport { MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';\n\nexport const MenuListItem = ( { children, ...props }: MenuItemProps ) => {\n\treturn (\n\t\t<MenuItem\n\t\t\tdense\n\t\t\t{ ...props }\n\t\t\tsx={ {\n\t\t\t\t...( props.sx ?? {} ),\n\t\t\t} }\n\t\t>\n\t\t\t<MenuItemText\n\t\t\t\tprimary={ children }\n\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\tvariant: 'caption',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</MenuItem>\n\t);\n};\n","import { useEffect, useRef, useState } from 'react';\n\ntype UseEditableParams = {\n\tvalue: string;\n\tonSubmit: ( value: string ) => unknown;\n\tvalidation?: ( value: string ) => string | null;\n\tonClick?: ( event: React.MouseEvent< HTMLDivElement > ) => void;\n};\n\nexport const useEditable = ( { value, onSubmit, validation, onClick }: UseEditableParams ) => {\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ error, setError ] = useState< string | null >( null );\n\n\tconst ref = useSelection( isEditing );\n\n\tconst isDirty = ( newValue: string ) => newValue !== value;\n\n\tconst openEditMode = () => {\n\t\tsetIsEditing( true );\n\t};\n\n\tconst closeEditMode = () => {\n\t\tref.current?.blur();\n\n\t\tsetError( null );\n\t\tsetIsEditing( false );\n\t};\n\n\tconst submit = ( newValue: string ) => {\n\t\tif ( ! isDirty( newValue ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! error ) {\n\t\t\ttry {\n\t\t\t\tonSubmit( newValue );\n\t\t\t} finally {\n\t\t\t\tcloseEditMode();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst onChange = ( event: React.ChangeEvent< HTMLSpanElement > ) => {\n\t\tconst { innerText: newValue } = event.target;\n\n\t\tif ( validation ) {\n\t\t\tsetError( isDirty( newValue ) ? validation( newValue ) : null );\n\t\t}\n\t};\n\n\tconst handleKeyDown = ( event: React.KeyboardEvent ) => {\n\t\tevent.stopPropagation();\n\n\t\tif ( [ 'Escape' ].includes( event.key ) ) {\n\t\t\treturn closeEditMode();\n\t\t}\n\n\t\tif ( [ 'Enter' ].includes( event.key ) ) {\n\t\t\tevent.preventDefault();\n\t\t\treturn submit( ( event.target as HTMLElement ).innerText );\n\t\t}\n\t};\n\n\tconst handleClick = ( event: React.MouseEvent< HTMLDivElement > ) => {\n\t\tif ( isEditing ) {\n\t\t\tevent.stopPropagation();\n\t\t}\n\n\t\tonClick?.( event );\n\t};\n\n\tconst listeners = {\n\t\tonClick: handleClick,\n\t\tonKeyDown: handleKeyDown,\n\t\tonInput: onChange,\n\t\tonBlur: closeEditMode,\n\t} as const;\n\n\tconst attributes = {\n\t\tvalue,\n\t\trole: 'textbox',\n\t\tcontentEditable: isEditing,\n\t\t...( isEditing && {\n\t\t\tsuppressContentEditableWarning: true,\n\t\t} ),\n\t} as const;\n\n\treturn {\n\t\tref,\n\t\tisEditing,\n\t\topenEditMode,\n\t\tcloseEditMode,\n\t\tvalue,\n\t\terror,\n\t\tgetProps: () => ( { ...listeners, ...attributes } ),\n\t} as const;\n};\n\nconst useSelection = ( isEditing: boolean ) => {\n\tconst ref = useRef< HTMLElement | null >( null );\n\n\tuseEffect( () => {\n\t\tif ( isEditing ) {\n\t\t\tselectAll( ref.current );\n\t\t}\n\t}, [ isEditing ] );\n\n\treturn ref;\n};\n\nconst selectAll = ( el: HTMLElement | null ) => {\n\tconst selection = getSelection();\n\n\tif ( ! selection || ! el ) {\n\t\treturn;\n\t}\n\n\tconst range = document.createRange();\n\trange.selectNodeContents( el );\n\n\tselection.removeAllRanges();\n\tselection.addRange( range );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,mBAAoC;AACpC,gBAA6B;AAQtB,IAAM,sBAAsB,CAAiC;AAAA,EACnE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAsC;AACrC,QAAM,CAAE,QAAQ,aAAc,IAAI,iBAAiB;AAEnD,MAAK,eAAgB;AACpB,WACC,oCAAC,qBAAQ,OAAgB,WAAU,SAClC,oCAAC,WAAQ,UAAsB,KAAM,QAAS,IAAY,GAAG,SAC1D,KACH,CACD;AAAA,EAEF;AAEA,SACC,oCAAC,WAAQ,UAAsB,KAAM,QAAS,IAAY,GAAG,SAC1D,KACH;AAEF;AAMA,IAAM,UAAgB;AAAA,EACrB,CACC,EAAE,UAAU,IAAI,YAAY,eAAK,GAAG,MAAM,GAE1C,QAEA;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,UAAS;AAAA,MACP,GAAG;AAAA,MACL,OAAQ,EAAE,UAAU,UAAU,cAAc,YAAY,YAAY,UAAU,SAAS;AAAA;AAAA,EACxF;AAEF;AAEA,IAAM,mBAAmB,MAAM;AAC9B,QAAM,CAAE,IAAI,KAAM,QAAI,uBAAgC,IAAK;AAC3D,QAAM,CAAE,eAAe,cAAe,QAAI,uBAAU,KAAM;AAE1D,8BAAW,MAAM;AAChB,UAAM,WAAW,IAAI,eAAgB,CAAE,CAAE,EAAE,OAAO,CAAE,MAAO;AAC1D,qBAAgB,OAAO,cAAc,OAAO,WAAY;AAAA,IACzD,CAAE;AAEF,QAAK,IAAK;AACT,eAAS,QAAS,EAAG;AAAA,IACtB;AAEA,WAAO,MAAM;AACZ,eAAS,WAAW;AAAA,IACrB;AAAA,EACD,GAAG,CAAE,EAAG,CAAE;AAEV,SAAO,CAAE,OAAO,aAAc;AAC/B;;;ACzEA,IAAAA,SAAuB;AACvB,IAAAC,gBAA2B;AAC3B,IAAAC,aAAqC;AAQ9B,IAAM,oBAAgB;AAAA,EAC5B,CACC,EAAE,OAAO,OAAO,KAAK,QAAQ,IAAI,GAAG,MAAM,GAC1C,QACI;AACJ,WACC,qCAAC,sBAAQ,OAAQ,OAAQ,MAAO,CAAC,CAAE,OAAQ,WAAU,SACpD,qCAAC,eAAY,KAAY,WAAY,IAAO,GAAG,SAC5C,KACH,CACD;AAAA,EAEF;AACD;AAEA,IAAM,kBAAc,mBAAQ,cAAI;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACzBhC,IAAAC,SAAuB;AACvB,IAAAC,gBAAyB;AACzB,IAAAC,aAUO;AACP,kBAAmB;AAanB,IAAM,aAAa;AAEZ,IAAM,oBAAoB,CAAE,EAAE,MAAM,aAAa,OAAO,SAAS,MAAM,MAA+B;AAC5G,QAAM,CAAE,iBAAiB,kBAAmB,QAAI,wBAAU,IAAK;AAE/D,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,SAAU;AAAA,MACV,UAAW;AAAA,MACX,iBAAkB;AAAA,QACjB,SAAS;AAAA,QACT,OAAO,EAAE,iBAAiB,OAAO,GAAI,UAAW,OAAO,MAAM;AAAA,MAC9D;AAAA;AAAA,IAEE,SACD,qCAAC,2BAAa,MAAO,SACpB,qCAAC,8BAAc,KAAO,CACvB;AAAA,IAEC,SAAS,qCAAC,oBAAM,IAAK,EAAE,OAAO,OAAO,GAAI,KAAM,MAAM,KAAM,KAAM,MAAM,KAAM;AAAA,IAC7E;AAAA,IACF,qCAAC,gCACA;AAAA,MAAC;AAAA;AAAA,QACA,IAAK,EAAE,aAAa,OAAO;AAAA,QAC3B,SACC;AAAA,UAAC;AAAA;AAAA,YACA,SAAU,CAAE;AAAA,YACZ,UAAW,MAAM,mBAAoB,CAAE,eAAgB;AAAA;AAAA,QACxD;AAAA,QAED,OACC,qCAAC,yBAAW,SAAU,eAAY,gBAAI,yBAAyB,WAAY,CAAG;AAAA;AAAA,IAEhF,GACA,qCAAC,qBAAO,MAAO,UAAW,SAAU,MAAM,YAAa,eAAgB,GAAI,SAAQ,mBAChF,gBAAI,UAAU,WAAY,CAC7B,CACD;AAAA,EACD;AAEF;;;ACnEA,IAAAC,SAAuB;AACvB,IAAAC,aAA4E;;;ACD5E,IAAAC,gBAAoC;AACpC,gCAKO;AAUA,SAAS,iBAAiB;AAChC,QAAM,CAAE,aAAa,cAAe,QAAI,wBAAyB,MAAM,iBAAiB,CAAE;AAE1F,+BAAW,MAAM;AAChB,eAAO,0BAAAC,uBAAU,wCAAa,GAAG,MAAM,eAAgB,iBAAiB,CAAE,CAAE;AAAA,EAC7E,GAAG,CAAC,CAAE;AAEN,+BAAW,MAAM;AAChB,eAAO,0BAAAA,uBAAU,2CAAiB,4BAA6B,GAAG,CAAE,MAAO;AAC1E,YAAM,QAAQ;AAOd,YAAM,gBAAgB,MAAM,MAAM,YAAY,cAAc,MAAM,KAAK;AAEvE,UAAK,eAAgB;AACpB,uBAAgB,iBAAiB,CAAE;AAAA,MACpC;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AAEN,SAAO;AACR;AAEA,SAAS,mBAAmB;AAC3B,SAAS,OAAsC,WAAW,iBAAkB,UAAW,KAAK;AAC7F;;;ADxCA,IAAM,kBAAmD;AAE1C,SAAR,cAAgC,EAAE,SAAS,GAAmC;AACpF,QAAM,cAAc,eAAe;AAEnC,SACC,qCAAC,WAAAC,eAAA,EAAkB,aAA4B,SAAU,mBACtD,QACH;AAEF;;;AEfA,IAAAC,SAAuB;AACvB,IAAAC,aAA2D;AAEpD,IAAM,eAAe,CAAE,EAAE,UAAU,GAAG,MAAM,MAAsB;AACxE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAK;AAAA,MACH,GAAG;AAAA,MACL,IAAK;AAAA,QACJ,GAAK,MAAM,MAAM,CAAC;AAAA,MACnB;AAAA;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,wBAAyB;AAAA,UACxB,SAAS;AAAA,QACV;AAAA;AAAA,IACD;AAAA,EACD;AAEF;;;ACpBA,IAAAC,gBAA4C;AASrC,IAAM,cAAc,CAAE,EAAE,OAAO,UAAU,YAAY,QAAQ,MAA0B;AAC7F,QAAM,CAAE,WAAW,YAAa,QAAI,wBAAU,KAAM;AACpD,QAAM,CAAE,OAAO,QAAS,QAAI,wBAA2B,IAAK;AAE5D,QAAM,MAAM,aAAc,SAAU;AAEpC,QAAM,UAAU,CAAE,aAAsB,aAAa;AAErD,QAAM,eAAe,MAAM;AAC1B,iBAAc,IAAK;AAAA,EACpB;AAEA,QAAM,gBAAgB,MAAM;AAC3B,QAAI,SAAS,KAAK;AAElB,aAAU,IAAK;AACf,iBAAc,KAAM;AAAA,EACrB;AAEA,QAAM,SAAS,CAAE,aAAsB;AACtC,QAAK,CAAE,QAAS,QAAS,GAAI;AAC5B;AAAA,IACD;AAEA,QAAK,CAAE,OAAQ;AACd,UAAI;AACH,iBAAU,QAAS;AAAA,MACpB,UAAE;AACD,sBAAc;AAAA,MACf;AAAA,IACD;AAAA,EACD;AAEA,QAAM,WAAW,CAAE,UAAiD;AACnE,UAAM,EAAE,WAAW,SAAS,IAAI,MAAM;AAEtC,QAAK,YAAa;AACjB,eAAU,QAAS,QAAS,IAAI,WAAY,QAAS,IAAI,IAAK;AAAA,IAC/D;AAAA,EACD;AAEA,QAAM,gBAAgB,CAAE,UAAgC;AACvD,UAAM,gBAAgB;AAEtB,QAAK,CAAE,QAAS,EAAE,SAAU,MAAM,GAAI,GAAI;AACzC,aAAO,cAAc;AAAA,IACtB;AAEA,QAAK,CAAE,OAAQ,EAAE,SAAU,MAAM,GAAI,GAAI;AACxC,YAAM,eAAe;AACrB,aAAO,OAAU,MAAM,OAAwB,SAAU;AAAA,IAC1D;AAAA,EACD;AAEA,QAAM,cAAc,CAAE,UAA+C;AACpE,QAAK,WAAY;AAChB,YAAM,gBAAgB;AAAA,IACvB;AAEA,cAAW,KAAM;AAAA,EAClB;AAEA,QAAM,YAAY;AAAA,IACjB,SAAS;AAAA,IACT,WAAW;AAAA,IACX,SAAS;AAAA,IACT,QAAQ;AAAA,EACT;AAEA,QAAM,aAAa;AAAA,IAClB;AAAA,IACA,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,GAAK,aAAa;AAAA,MACjB,gCAAgC;AAAA,IACjC;AAAA,EACD;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,OAAQ,EAAE,GAAG,WAAW,GAAG,WAAW;AAAA,EACjD;AACD;AAEA,IAAM,eAAe,CAAE,cAAwB;AAC9C,QAAM,UAAM,sBAA8B,IAAK;AAE/C,+BAAW,MAAM;AAChB,QAAK,WAAY;AAChB,gBAAW,IAAI,OAAQ;AAAA,IACxB;AAAA,EACD,GAAG,CAAE,SAAU,CAAE;AAEjB,SAAO;AACR;AAEA,IAAM,YAAY,CAAE,OAA4B;AAC/C,QAAM,YAAY,aAAa;AAE/B,MAAK,CAAE,aAAa,CAAE,IAAK;AAC1B;AAAA,EACD;AAEA,QAAM,QAAQ,SAAS,YAAY;AACnC,QAAM,mBAAoB,EAAG;AAE7B,YAAU,gBAAgB;AAC1B,YAAU,SAAU,KAAM;AAC3B;","names":["React","import_react","import_ui","React","import_react","import_ui","React","import_ui","import_react","listenTo","ThemeProviderBase","React","import_ui","import_react"]}

package/dist/index.mjs

@@ -61,10 +61,20 @@ var StyledField = styled(Box2)`
 // src/components/introduction-modal.tsx
 import * as React3 from "react";
 import { useState as useState2 } from "react";
-import { Button, Checkbox, Dialog, DialogActions, DialogHeader, DialogTitle, FormControlLabel } from "@elementor/ui";
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogHeader,
+  DialogTitle,
+  FormControlLabel,
+  Image,
+  Typography
+} from "@elementor/ui";
 import { __ } from "@wordpress/i18n";
 var OPEN_DELAY = 1e3;
-var IntroductionModal = ({ open, handleClose, title, content }) => {
+var IntroductionModal = ({ open, handleClose, title, content, image }) => {
   const [shouldShowAgain, setShouldShowAgain] = useState2(true);
   return /* @__PURE__ */ React3.createElement(
     Dialog,
@@ -77,7 +87,8 @@ var IntroductionModal = ({ open, handleClose, title, content }) => {
         style: { transitionDelay: open ? `${OPEN_DELAY}ms` : "0ms" }
       }
     },
-    /* @__PURE__ */ React3.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React3.createElement(DialogTitle, null, title)),
+    title && /* @__PURE__ */ React3.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React3.createElement(DialogTitle, null, title)),
+    image && /* @__PURE__ */ React3.createElement(Image, { sx: { width: "100%" }, src: image.src, alt: image.alt }),
     content,
     /* @__PURE__ */ React3.createElement(DialogActions, null, /* @__PURE__ */ React3.createElement(
       FormControlLabel,
@@ -90,40 +101,80 @@ var IntroductionModal = ({ open, handleClose, title, content }) => {
             onChange: () => setShouldShowAgain(!shouldShowAgain)
           }
         ),
-        label: __("Don't show this again", "elementor")
+        label: /* @__PURE__ */ React3.createElement(Typography, { variant: "body2" }, __("Don't show this again", "elementor"))
       }
     ), /* @__PURE__ */ React3.createElement(Button, { size: "medium", onClick: () => handleClose(shouldShowAgain), variant: "contained" }, __("Got it", "elementor")))
   );
 };
 
-// src/components/menu-item.tsx
+// src/components/theme-provider.tsx
 import * as React4 from "react";
+import { ThemeProvider as ThemeProviderBase } from "@elementor/ui";
+
+// src/hooks/use-color-scheme.ts
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import {
+  __privateListenTo as listenTo,
+  commandEndEvent,
+  v1ReadyEvent
+} from "@elementor/editor-v1-adapters";
+function useColorScheme() {
+  const [colorScheme, setColorScheme] = useState3(() => getV1ColorScheme());
+  useEffect2(() => {
+    return listenTo(v1ReadyEvent(), () => setColorScheme(getV1ColorScheme()));
+  }, []);
+  useEffect2(() => {
+    return listenTo(commandEndEvent("document/elements/settings"), (e) => {
+      const event = e;
+      const isColorScheme = event.args?.settings && "ui_theme" in event.args.settings;
+      if (isColorScheme) {
+        setColorScheme(getV1ColorScheme());
+      }
+    });
+  }, []);
+  return colorScheme;
+}
+function getV1ColorScheme() {
+  return window.elementor?.getPreferences?.("ui_theme") || "auto";
+}
+
+// src/components/theme-provider.tsx
+var EDITOR_PALLETTE = "unstable";
+function ThemeProvider({ children }) {
+  const colorScheme = useColorScheme();
+  return /* @__PURE__ */ React4.createElement(ThemeProviderBase, { colorScheme, palette: EDITOR_PALLETTE }, children);
+}
+
+// src/components/menu-item.tsx
+import * as React5 from "react";
 import { MenuItem, MenuItemText } from "@elementor/ui";
-var MenuListItem = ({ children, ...props }) => /* @__PURE__ */ React4.createElement(
-  MenuItem,
-  {
-    dense: true,
-    ...props,
-    sx: {
-      ...props.sx ?? {}
-    }
-  },
-  /* @__PURE__ */ React4.createElement(
-    MenuItemText,
+var MenuListItem = ({ children, ...props }) => {
+  return /* @__PURE__ */ React5.createElement(
+    MenuItem,
     {
-      primary: children,
-      primaryTypographyProps: {
-        variant: "caption"
+      dense: true,
+      ...props,
+      sx: {
+        ...props.sx ?? {}
       }
-    }
-  )
-);
+    },
+    /* @__PURE__ */ React5.createElement(
+      MenuItemText,
+      {
+        primary: children,
+        primaryTypographyProps: {
+          variant: "caption"
+        }
+      }
+    )
+  );
+};
 
 // src/hooks/use-editable.ts
-import { useEffect as useEffect2, useRef, useState as useState3 } from "react";
+import { useEffect as useEffect3, useRef, useState as useState4 } from "react";
 var useEditable = ({ value, onSubmit, validation, onClick }) => {
-  const [isEditing, setIsEditing] = useState3(false);
-  const [error, setError] = useState3(null);
+  const [isEditing, setIsEditing] = useState4(false);
+  const [error, setError] = useState4(null);
   const ref = useSelection(isEditing);
   const isDirty = (newValue) => newValue !== value;
   const openEditMode = () => {
@@ -194,7 +245,7 @@ var useEditable = ({ value, onSubmit, validation, onClick }) => {
 };
 var useSelection = (isEditing) => {
   const ref = useRef(null);
-  useEffect2(() => {
+  useEffect3(() => {
     if (isEditing) {
       selectAll(ref.current);
     }
@@ -216,6 +267,7 @@ export {
   EllipsisWithTooltip,
   IntroductionModal,
   MenuListItem,
+  ThemeProvider,
   useEditable
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ellipsis-with-tooltip.tsx","../src/components/editable-field.tsx","../src/components/introduction-modal.tsx","../src/components/menu-item.tsx","../src/hooks/use-editable.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Tooltip } from '@elementor/ui';\n\ntype EllipsisWithTooltipProps< T extends React.ElementType > = {\n\tmaxWidth?: React.CSSProperties[ 'maxWidth' ];\n\ttitle: string;\n\tas?: T;\n} & React.ComponentProps< T >;\n\nexport const EllipsisWithTooltip = < T extends React.ElementType >( {\n\tmaxWidth,\n\ttitle,\n\tas,\n\t...props\n}: EllipsisWithTooltipProps< T > ) => {\n\tconst [ setRef, isOverflowing ] = useIsOverflowing();\n\n\tif ( isOverflowing ) {\n\t\treturn (\n\t\t\t<Tooltip title={ title } placement=\"top\">\n\t\t\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Content>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t{ title }\n\t\t</Content>\n\t);\n};\n\ntype ContentProps< T extends React.ElementType > = React.PropsWithChildren<\n\tOmit< EllipsisWithTooltipProps< T >, 'title' >\n>;\n\nconst Content = React.forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ maxWidth, as: Component = Box, ...props }: ContentProps< T >,\n\t\t// forwardRef loses the typing when using generic components.\n\t\tref: unknown\n\t) => (\n\t\t<Component\n\t\t\tref={ ref }\n\t\t\tposition=\"relative\"\n\t\t\t{ ...props }\n\t\t\tstyle={ { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth } }\n\t\t/>\n\t)\n);\n\nconst useIsOverflowing = () => {\n\tconst [ el, setEl ] = useState< HTMLElement | null >( null );\n\tconst [ isOverflowing, setIsOverflown ] = useState( false );\n\n\tuseEffect( () => {\n\t\tconst observer = new ResizeObserver( ( [ { target } ] ) => {\n\t\t\tsetIsOverflown( target.scrollWidth > target.clientWidth );\n\t\t} );\n\n\t\tif ( el ) {\n\t\t\tobserver.observe( el );\n\t\t}\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ el ] );\n\n\treturn [ setEl, isOverflowing ] as const;\n};\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Box, styled, Tooltip } from '@elementor/ui';\n\ntype EditableFieldProps< T extends React.ElementType > = {\n\tvalue: string;\n\terror?: string;\n\tas?: T;\n} & React.ComponentPropsWithRef< T >;\n\nexport const EditableField = forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ value, error, as = 'span', sx, ...props }: EditableFieldProps< T >,\n\t\tref: unknown\n\t) => {\n\t\treturn (\n\t\t\t<Tooltip title={ error } open={ !! error } placement=\"top\">\n\t\t\t\t<StyledField ref={ ref } component={ as } { ...props }>\n\t\t\t\t\t{ value }\n\t\t\t\t</StyledField>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n);\n\nconst StyledField = styled( Box )`\n\twidth: 100%;\n\t&:focus {\n\t\toutline: none;\n\t}\n`;\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { Button, Checkbox, Dialog, DialogActions, DialogHeader, DialogTitle, FormControlLabel } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype IntroductionModalProps = {\n\topen: boolean;\n\thandleClose: ( shouldShowAgain: boolean ) => void;\n\ttitle: string;\n\tcontent: React.ReactNode;\n};\n\nconst OPEN_DELAY = 1000;\n\nexport const IntroductionModal = ( { open, handleClose, title, content }: IntroductionModalProps ) => {\n\tconst [ shouldShowAgain, setShouldShowAgain ] = useState( true );\n\n\treturn (\n\t\t<Dialog\n\t\t\topen={ open }\n\t\t\tonClose={ handleClose }\n\t\t\tmaxWidth={ 'sm' }\n\t\t\tTransitionProps={ {\n\t\t\t\ttimeout: 700,\n\t\t\t\tstyle: { transitionDelay: open ? `${ OPEN_DELAY }ms` : '0ms' },\n\t\t\t} }\n\t\t>\n\t\t\t<DialogHeader logo={ false }>\n\t\t\t\t<DialogTitle>{ title }</DialogTitle>\n\t\t\t</DialogHeader>\n\t\t\t{ content }\n\t\t\t<DialogActions>\n\t\t\t\t<FormControlLabel\n\t\t\t\t\tsx={ { marginRight: 'auto' } }\n\t\t\t\t\tcontrol={\n\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\tchecked={ ! shouldShowAgain }\n\t\t\t\t\t\t\tonChange={ () => setShouldShowAgain( ! shouldShowAgain ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={ __( \"Don't show this again\", 'elementor' ) }\n\t\t\t\t/>\n\t\t\t\t<Button size={ 'medium' } onClick={ () => handleClose( shouldShowAgain ) } variant=\"contained\">\n\t\t\t\t\t{ __( 'Got it', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n};\n","import * as React from 'react';\nimport { MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';\n\nexport const MenuListItem = ( { children, ...props }: MenuItemProps ) => (\n\t<MenuItem\n\t\tdense\n\t\t{ ...props }\n\t\tsx={ {\n\t\t\t...( props.sx ?? {} ),\n\t\t} }\n\t>\n\t\t<MenuItemText\n\t\t\tprimary={ children }\n\t\t\tprimaryTypographyProps={ {\n\t\t\t\tvariant: 'caption',\n\t\t\t} }\n\t\t/>\n\t</MenuItem>\n);\n","import { useEffect, useRef, useState } from 'react';\n\ntype UseEditableParams = {\n\tvalue: string;\n\tonSubmit: ( value: string ) => unknown;\n\tvalidation?: ( value: string ) => string | null;\n\tonClick?: ( event: React.MouseEvent< HTMLDivElement > ) => void;\n};\n\nexport const useEditable = ( { value, onSubmit, validation, onClick }: UseEditableParams ) => {\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ error, setError ] = useState< string | null >( null );\n\n\tconst ref = useSelection( isEditing );\n\n\tconst isDirty = ( newValue: string ) => newValue !== value;\n\n\tconst openEditMode = () => {\n\t\tsetIsEditing( true );\n\t};\n\n\tconst closeEditMode = () => {\n\t\tref.current?.blur();\n\n\t\tsetError( null );\n\t\tsetIsEditing( false );\n\t};\n\n\tconst submit = ( newValue: string ) => {\n\t\tif ( ! isDirty( newValue ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! error ) {\n\t\t\ttry {\n\t\t\t\tonSubmit( newValue );\n\t\t\t} finally {\n\t\t\t\tcloseEditMode();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst onChange = ( event: React.ChangeEvent< HTMLSpanElement > ) => {\n\t\tconst { innerText: newValue } = event.target;\n\n\t\tif ( validation ) {\n\t\t\tsetError( isDirty( newValue ) ? validation( newValue ) : null );\n\t\t}\n\t};\n\n\tconst handleKeyDown = ( event: React.KeyboardEvent ) => {\n\t\tevent.stopPropagation();\n\n\t\tif ( [ 'Escape' ].includes( event.key ) ) {\n\t\t\treturn closeEditMode();\n\t\t}\n\n\t\tif ( [ 'Enter' ].includes( event.key ) ) {\n\t\t\tevent.preventDefault();\n\t\t\treturn submit( ( event.target as HTMLElement ).innerText );\n\t\t}\n\t};\n\n\tconst handleClick = ( event: React.MouseEvent< HTMLDivElement > ) => {\n\t\tif ( isEditing ) {\n\t\t\tevent.stopPropagation();\n\t\t}\n\n\t\tonClick?.( event );\n\t};\n\n\tconst listeners = {\n\t\tonClick: handleClick,\n\t\tonKeyDown: handleKeyDown,\n\t\tonInput: onChange,\n\t\tonBlur: closeEditMode,\n\t} as const;\n\n\tconst attributes = {\n\t\tvalue,\n\t\trole: 'textbox',\n\t\tcontentEditable: isEditing,\n\t\t...( isEditing && {\n\t\t\tsuppressContentEditableWarning: true,\n\t\t} ),\n\t} as const;\n\n\treturn {\n\t\tref,\n\t\tisEditing,\n\t\topenEditMode,\n\t\tcloseEditMode,\n\t\tvalue,\n\t\terror,\n\t\tgetProps: () => ( { ...listeners, ...attributes } ),\n\t} as const;\n};\n\nconst useSelection = ( isEditing: boolean ) => {\n\tconst ref = useRef< HTMLElement | null >( null );\n\n\tuseEffect( () => {\n\t\tif ( isEditing ) {\n\t\t\tselectAll( ref.current );\n\t\t}\n\t}, [ isEditing ] );\n\n\treturn ref;\n};\n\nconst selectAll = ( el: HTMLElement | null ) => {\n\tconst selection = getSelection();\n\n\tif ( ! selection || ! el ) {\n\t\treturn;\n\t}\n\n\tconst range = document.createRange();\n\trange.selectNodeContents( el );\n\n\tselection.removeAllRanges();\n\tselection.addRange( range );\n};\n"],"mappings":"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","names":["React","forwardRef","Box","Tooltip","React","useState","React","useEffect","useState"]}
+{"version":3,"sources":["../src/components/ellipsis-with-tooltip.tsx","../src/components/editable-field.tsx","../src/components/introduction-modal.tsx","../src/components/theme-provider.tsx","../src/hooks/use-color-scheme.ts","../src/components/menu-item.tsx","../src/hooks/use-editable.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Tooltip } from '@elementor/ui';\n\ntype EllipsisWithTooltipProps< T extends React.ElementType > = {\n\tmaxWidth?: React.CSSProperties[ 'maxWidth' ];\n\ttitle: string;\n\tas?: T;\n} & React.ComponentProps< T >;\n\nexport const EllipsisWithTooltip = < T extends React.ElementType >( {\n\tmaxWidth,\n\ttitle,\n\tas,\n\t...props\n}: EllipsisWithTooltipProps< T > ) => {\n\tconst [ setRef, isOverflowing ] = useIsOverflowing();\n\n\tif ( isOverflowing ) {\n\t\treturn (\n\t\t\t<Tooltip title={ title } placement=\"top\">\n\t\t\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Content>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t{ title }\n\t\t</Content>\n\t);\n};\n\ntype ContentProps< T extends React.ElementType > = React.PropsWithChildren<\n\tOmit< EllipsisWithTooltipProps< T >, 'title' >\n>;\n\nconst Content = React.forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ maxWidth, as: Component = Box, ...props }: ContentProps< T >,\n\t\t// forwardRef loses the typing when using generic components.\n\t\tref: unknown\n\t) => (\n\t\t<Component\n\t\t\tref={ ref }\n\t\t\tposition=\"relative\"\n\t\t\t{ ...props }\n\t\t\tstyle={ { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth } }\n\t\t/>\n\t)\n);\n\nconst useIsOverflowing = () => {\n\tconst [ el, setEl ] = useState< HTMLElement | null >( null );\n\tconst [ isOverflowing, setIsOverflown ] = useState( false );\n\n\tuseEffect( () => {\n\t\tconst observer = new ResizeObserver( ( [ { target } ] ) => {\n\t\t\tsetIsOverflown( target.scrollWidth > target.clientWidth );\n\t\t} );\n\n\t\tif ( el ) {\n\t\t\tobserver.observe( el );\n\t\t}\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ el ] );\n\n\treturn [ setEl, isOverflowing ] as const;\n};\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Box, styled, Tooltip } from '@elementor/ui';\n\ntype EditableFieldProps< T extends React.ElementType > = {\n\tvalue: string;\n\terror?: string;\n\tas?: T;\n} & React.ComponentPropsWithRef< T >;\n\nexport const EditableField = forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ value, error, as = 'span', sx, ...props }: EditableFieldProps< T >,\n\t\tref: unknown\n\t) => {\n\t\treturn (\n\t\t\t<Tooltip title={ error } open={ !! error } placement=\"top\">\n\t\t\t\t<StyledField ref={ ref } component={ as } { ...props }>\n\t\t\t\t\t{ value }\n\t\t\t\t</StyledField>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n);\n\nconst StyledField = styled( Box )`\n\twidth: 100%;\n\t&:focus {\n\t\toutline: none;\n\t}\n`;\n","import * as React from 'react';\nimport { useState } from 'react';\nimport {\n\tButton,\n\tCheckbox,\n\tDialog,\n\tDialogActions,\n\tDialogHeader,\n\tDialogTitle,\n\tFormControlLabel,\n\tImage,\n\tTypography,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype IntroductionModalProps = {\n\topen: boolean;\n\thandleClose: ( shouldShowAgain: boolean ) => void;\n\ttitle?: string;\n\tcontent: React.ReactNode;\n\timage?: {\n\t\tsrc: string;\n\t\talt: string;\n\t};\n};\n\nconst OPEN_DELAY = 1000;\n\nexport const IntroductionModal = ( { open, handleClose, title, content, image }: IntroductionModalProps ) => {\n\tconst [ shouldShowAgain, setShouldShowAgain ] = useState( true );\n\n\treturn (\n\t\t<Dialog\n\t\t\topen={ open }\n\t\t\tonClose={ handleClose }\n\t\t\tmaxWidth={ 'sm' }\n\t\t\tTransitionProps={ {\n\t\t\t\ttimeout: 700,\n\t\t\t\tstyle: { transitionDelay: open ? `${ OPEN_DELAY }ms` : '0ms' },\n\t\t\t} }\n\t\t>\n\t\t\t{ title && (\n\t\t\t\t<DialogHeader logo={ false }>\n\t\t\t\t\t<DialogTitle>{ title }</DialogTitle>\n\t\t\t\t</DialogHeader>\n\t\t\t) }\n\t\t\t{ image && <Image sx={ { width: '100%' } } src={ image.src } alt={ image.alt } /> }\n\t\t\t{ content }\n\t\t\t<DialogActions>\n\t\t\t\t<FormControlLabel\n\t\t\t\t\tsx={ { marginRight: 'auto' } }\n\t\t\t\t\tcontrol={\n\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\tchecked={ ! shouldShowAgain }\n\t\t\t\t\t\t\tonChange={ () => setShouldShowAgain( ! shouldShowAgain ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={\n\t\t\t\t\t\t<Typography variant={ 'body2' }>{ __( \"Don't show this again\", 'elementor' ) }</Typography>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<Button size={ 'medium' } onClick={ () => handleClose( shouldShowAgain ) } variant=\"contained\">\n\t\t\t\t\t{ __( 'Got it', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n};\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase, type ThemeProviderProps } from '@elementor/ui';\n\nimport { useColorScheme } from '../hooks/use-color-scheme';\n\nconst EDITOR_PALLETTE: ThemeProviderProps[ 'palette' ] = 'unstable';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme } palette={ EDITOR_PALLETTE }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\tcommandEndEvent,\n\ttype CommandEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme;\n\t};\n};\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {\n\t\t\tconst event = e as CommandEvent< {\n\t\t\t\tsettings: {\n\t\t\t\t\tui_theme?: ColorScheme;\n\t\t\t\t};\n\t\t\t} >;\n\n\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\tif ( isColorScheme ) {\n\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n","import * as React from 'react';\nimport { MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';\n\nexport const MenuListItem = ( { children, ...props }: MenuItemProps ) => {\n\treturn (\n\t\t<MenuItem\n\t\t\tdense\n\t\t\t{ ...props }\n\t\t\tsx={ {\n\t\t\t\t...( props.sx ?? {} ),\n\t\t\t} }\n\t\t>\n\t\t\t<MenuItemText\n\t\t\t\tprimary={ children }\n\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\tvariant: 'caption',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</MenuItem>\n\t);\n};\n","import { useEffect, useRef, useState } from 'react';\n\ntype UseEditableParams = {\n\tvalue: string;\n\tonSubmit: ( value: string ) => unknown;\n\tvalidation?: ( value: string ) => string | null;\n\tonClick?: ( event: React.MouseEvent< HTMLDivElement > ) => void;\n};\n\nexport const useEditable = ( { value, onSubmit, validation, onClick }: UseEditableParams ) => {\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ error, setError ] = useState< string | null >( null );\n\n\tconst ref = useSelection( isEditing );\n\n\tconst isDirty = ( newValue: string ) => newValue !== value;\n\n\tconst openEditMode = () => {\n\t\tsetIsEditing( true );\n\t};\n\n\tconst closeEditMode = () => {\n\t\tref.current?.blur();\n\n\t\tsetError( null );\n\t\tsetIsEditing( false );\n\t};\n\n\tconst submit = ( newValue: string ) => {\n\t\tif ( ! isDirty( newValue ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! error ) {\n\t\t\ttry {\n\t\t\t\tonSubmit( newValue );\n\t\t\t} finally {\n\t\t\t\tcloseEditMode();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst onChange = ( event: React.ChangeEvent< HTMLSpanElement > ) => {\n\t\tconst { innerText: newValue } = event.target;\n\n\t\tif ( validation ) {\n\t\t\tsetError( isDirty( newValue ) ? validation( newValue ) : null );\n\t\t}\n\t};\n\n\tconst handleKeyDown = ( event: React.KeyboardEvent ) => {\n\t\tevent.stopPropagation();\n\n\t\tif ( [ 'Escape' ].includes( event.key ) ) {\n\t\t\treturn closeEditMode();\n\t\t}\n\n\t\tif ( [ 'Enter' ].includes( event.key ) ) {\n\t\t\tevent.preventDefault();\n\t\t\treturn submit( ( event.target as HTMLElement ).innerText );\n\t\t}\n\t};\n\n\tconst handleClick = ( event: React.MouseEvent< HTMLDivElement > ) => {\n\t\tif ( isEditing ) {\n\t\t\tevent.stopPropagation();\n\t\t}\n\n\t\tonClick?.( event );\n\t};\n\n\tconst listeners = {\n\t\tonClick: handleClick,\n\t\tonKeyDown: handleKeyDown,\n\t\tonInput: onChange,\n\t\tonBlur: closeEditMode,\n\t} as const;\n\n\tconst attributes = {\n\t\tvalue,\n\t\trole: 'textbox',\n\t\tcontentEditable: isEditing,\n\t\t...( isEditing && {\n\t\t\tsuppressContentEditableWarning: true,\n\t\t} ),\n\t} as const;\n\n\treturn {\n\t\tref,\n\t\tisEditing,\n\t\topenEditMode,\n\t\tcloseEditMode,\n\t\tvalue,\n\t\terror,\n\t\tgetProps: () => ( { ...listeners, ...attributes } ),\n\t} as const;\n};\n\nconst useSelection = ( isEditing: boolean ) => {\n\tconst ref = useRef< HTMLElement | null >( null );\n\n\tuseEffect( () => {\n\t\tif ( isEditing ) {\n\t\t\tselectAll( ref.current );\n\t\t}\n\t}, [ isEditing ] );\n\n\treturn ref;\n};\n\nconst selectAll = ( el: HTMLElement | null ) => {\n\tconst selection = getSelection();\n\n\tif ( ! selection || ! el ) {\n\t\treturn;\n\t}\n\n\tconst range = document.createRange();\n\trange.selectNodeContents( el );\n\n\tselection.removeAllRanges();\n\tselection.addRange( range );\n};\n"],"mappings":"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","names":["React","forwardRef","Box","Tooltip","React","useState","React","useEffect","useState","React","useEffect","useState"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-ui",
   "description": "Elementor Editor UI",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -36,6 +36,7 @@
     "react": "^18.3.1"
   },
   "dependencies": {
+    "@elementor/editor-v1-adapters": "0.11.0",
     "@elementor/ui": "1.32.1",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/introduction-modal.tsx

@@ -1,18 +1,32 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Button, Checkbox, Dialog, DialogActions, DialogHeader, DialogTitle, FormControlLabel } from '@elementor/ui';
+import {
+	Button,
+	Checkbox,
+	Dialog,
+	DialogActions,
+	DialogHeader,
+	DialogTitle,
+	FormControlLabel,
+	Image,
+	Typography,
+} from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 type IntroductionModalProps = {
 	open: boolean;
 	handleClose: ( shouldShowAgain: boolean ) => void;
-	title: string;
+	title?: string;
 	content: React.ReactNode;
+	image?: {
+		src: string;
+		alt: string;
+	};
 };
 
 const OPEN_DELAY = 1000;
 
-export const IntroductionModal = ( { open, handleClose, title, content }: IntroductionModalProps ) => {
+export const IntroductionModal = ( { open, handleClose, title, content, image }: IntroductionModalProps ) => {
 	const [ shouldShowAgain, setShouldShowAgain ] = useState( true );
 
 	return (
@@ -25,9 +39,12 @@ export const IntroductionModal = ( { open, handleClose, title, content }: Introd
 				style: { transitionDelay: open ? `${ OPEN_DELAY }ms` : '0ms' },
 			} }
 		>
-			<DialogHeader logo={ false }>
-				<DialogTitle>{ title }</DialogTitle>
-			</DialogHeader>
+			{ title && (
+				<DialogHeader logo={ false }>
+					<DialogTitle>{ title }</DialogTitle>
+				</DialogHeader>
+			) }
+			{ image && <Image sx={ { width: '100%' } } src={ image.src } alt={ image.alt } /> }
 			{ content }
 			<DialogActions>
 				<FormControlLabel
@@ -38,7 +55,9 @@ export const IntroductionModal = ( { open, handleClose, title, content }: Introd
 							onChange={ () => setShouldShowAgain( ! shouldShowAgain ) }
 						/>
 					}
-					label={ __( "Don't show this again", 'elementor' ) }
+					label={
+						<Typography variant={ 'body2' }>{ __( "Don't show this again", 'elementor' ) }</Typography>
+					}
 				/>
 				<Button size={ 'medium' } onClick={ () => handleClose( shouldShowAgain ) } variant="contained">
 					{ __( 'Got it', 'elementor' ) }

package/src/components/menu-item.tsx

@@ -1,19 +1,21 @@
 import * as React from 'react';
 import { MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';
 
-export const MenuListItem = ( { children, ...props }: MenuItemProps ) => (
-	<MenuItem
-		dense
-		{ ...props }
-		sx={ {
-			...( props.sx ?? {} ),
-		} }
-	>
-		<MenuItemText
-			primary={ children }
-			primaryTypographyProps={ {
-				variant: 'caption',
+export const MenuListItem = ( { children, ...props }: MenuItemProps ) => {
+	return (
+		<MenuItem
+			dense
+			{ ...props }
+			sx={ {
+				...( props.sx ?? {} ),
 			} }
-		/>
-	</MenuItem>
-);
+		>
+			<MenuItemText
+				primary={ children }
+				primaryTypographyProps={ {
+					variant: 'caption',
+				} }
+			/>
+		</MenuItem>
+	);
+};

package/src/components/theme-provider.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ThemeProvider as ThemeProviderBase, type ThemeProviderProps } from '@elementor/ui';
+
+import { useColorScheme } from '../hooks/use-color-scheme';
+
+const EDITOR_PALLETTE: ThemeProviderProps[ 'palette' ] = 'unstable';
+
+export default function ThemeProvider( { children }: { children: React.ReactNode } ) {
+	const colorScheme = useColorScheme();
+
+	return (
+		<ThemeProviderBase colorScheme={ colorScheme } palette={ EDITOR_PALLETTE }>
+			{ children }
+		</ThemeProviderBase>
+	);
+}

package/src/hooks/__tests__/use-color-scheme.test.ts

@@ -0,0 +1,91 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { type ColorScheme, type ExtendedWindow, useColorScheme } from '../use-color-scheme';
+
+describe( '@elementor/editor - useColorScheme', () => {
+	it( 'should use the "auto" color scheme by default', () => {
+		// Act.
+		const { result } = renderHook( () => useColorScheme() );
+
+		// Assert.
+		expect( result.current ).toBe( 'auto' );
+	} );
+
+	it( 'should sync color scheme on V1 ready', () => {
+		// Arrange.
+		mockV1ColorScheme( 'dark' );
+
+		// Act.
+		const { result } = renderHook( () => useColorScheme() );
+
+		act( () => {
+			dispatchEvent( new CustomEvent( 'elementor/initialized' ) );
+		} );
+
+		// Assert.
+		expect( result.current ).toBe( 'dark' );
+	} );
+
+	it( 'should sync color scheme on V1 change', () => {
+		// Arrange.
+		mockV1ColorScheme( 'auto' );
+
+		const { result } = renderHook( () => useColorScheme() );
+
+		// Assert - Before change.
+		expect( result.current ).toBe( 'auto' );
+
+		// Act - Change.
+		act( () => {
+			mockV1ColorScheme( 'dark' );
+
+			dispatchEvent(
+				new CustomEvent( 'elementor/commands/run/after', {
+					detail: {
+						command: 'document/elements/settings',
+						args: {
+							container: {
+								id: 'editorPreferences_settings',
+							},
+							settings: {
+								ui_theme: 'dark',
+							},
+						},
+					},
+				} )
+			);
+		} );
+
+		// Assert.
+		expect( result.current ).toBe( 'dark' );
+	} );
+
+	it( 'should not sync color scheme on unrelated commands', () => {
+		// Act.
+		const { result } = renderHook( () => useColorScheme() );
+
+		act( () => {
+			dispatchEvent(
+				new CustomEvent( 'elementor/commands/run/after', {
+					detail: {
+						command: 'document/elements/settings',
+						args: {
+							container: {
+								id: 'some_other_container',
+							},
+						},
+					},
+				} )
+			);
+		} );
+
+		// Assert.
+		expect( result.current ).toBe( 'auto' );
+	} );
+} );
+
+function mockV1ColorScheme( colorScheme: ColorScheme ) {
+	( window as unknown as ExtendedWindow ).elementor = {
+		getPreferences: () => colorScheme,
+	};
+}

package/src/hooks/use-color-scheme.ts

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+import {
+	__privateListenTo as listenTo,
+	commandEndEvent,
+	type CommandEvent,
+	v1ReadyEvent,
+} from '@elementor/editor-v1-adapters';
+
+export type ColorScheme = 'auto' | 'dark' | 'light';
+
+export type ExtendedWindow = Window & {
+	elementor: {
+		getPreferences: ( key: 'ui_theme' ) => ColorScheme;
+	};
+};
+
+export function useColorScheme() {
+	const [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );
+
+	useEffect( () => {
+		return listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );
+	}, [] );
+
+	useEffect( () => {
+		return listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {
+			const event = e as CommandEvent< {
+				settings: {
+					ui_theme?: ColorScheme;
+				};
+			} >;
+
+			// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.
+			const isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;
+
+			if ( isColorScheme ) {
+				setColorScheme( getV1ColorScheme() );
+			}
+		} );
+	}, [] );
+
+	return colorScheme;
+}
+
+function getV1ColorScheme() {
+	return ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';
+}

package/src/index.ts

@@ -2,6 +2,7 @@
 export { EllipsisWithTooltip } from './components/ellipsis-with-tooltip';
 export { EditableField } from './components/editable-field';
 export { IntroductionModal } from './components/introduction-modal';
+export { default as ThemeProvider } from './components/theme-provider';
 export { MenuListItem } from './components/menu-item';
 
 // hooks