@elementor/editor-controls 4.0.0-497 → 4.0.0-499

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import { RefObject, ReactNode, FC, PropsWithChildren, ComponentProps, ReactElement, ComponentType } from 'react';
 import { SxProps, SelectProps, UnstableColorFieldProps, ToggleButtonProps, StackProps, PopupState, Theme, FormLabelProps, Grid } from '@elementor/ui';
-import { StringPropValue, PropTypeUtil, PropValue, PropKey, LinkPropValue, TransformablePropValue, PropType, CreateOptions } from '@elementor/editor-props';
+import { StringPropValue, PropTypeUtil, PropValue, PropKey, LinkPropValue, TransformablePropValue, PropType, CreateOptions, SizePropValue } from '@elementor/editor-props';
 import { StyleDefinitionState } from '@elementor/editor-styles';
 import { ElementID } from '@elementor/editor-elements';
 import { Editor } from '@tiptap/react';
@@ -26,11 +26,11 @@ declare const TextControl: ControlComponent$1<({ placeholder, error, inputValue,
     ariaLabel?: string;
 }) => React$1.JSX.Element>;
 
-type Props$8 = {
+type Props$9 = {
     placeholder?: string;
     ariaLabel?: string;
 };
-declare const TextAreaControl: ControlComponent$1<({ placeholder, ariaLabel }: Props$8) => React$1.JSX.Element>;
+declare const TextAreaControl: ControlComponent$1<({ placeholder, ariaLabel }: Props$9) => React$1.JSX.Element>;
 
 declare const lengthUnits: readonly ["px", "%", "em", "rem", "vw", "vh", "ch"];
 declare const angleUnits: readonly ["deg", "rad", "grad", "turn"];
@@ -102,12 +102,12 @@ type SelectControlWrapperProps = Parameters<typeof SelectControl>[0] & {
 };
 declare const SelectControlWrapper: ControlComponent$1<({ collectionId, options, ...props }: SelectControlWrapperProps) => React$1.JSX.Element>;
 
-type Props$7 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
+type Props$8 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
     propTypeUtil?: PropTypeUtil<string, string>;
     anchorEl?: HTMLElement | null;
     id?: string;
 };
-declare const ColorControl: ControlComponent$1<({ propTypeUtil, anchorEl, slotProps, id, ...props }: Props$7) => React$1.JSX.Element>;
+declare const ColorControl: ControlComponent$1<({ propTypeUtil, anchorEl, slotProps, id, ...props }: Props$8) => React$1.JSX.Element>;
 
 type RenderContentProps = {
     size: ToggleButtonProps['size'];
@@ -120,7 +120,7 @@ type ToggleButtonGroupItem<TValue> = {
 };
 type ExclusiveValue<TValue> = TValue;
 type NonExclusiveValue<TValue> = TValue[];
-type Props$6<TValue> = {
+type Props$7<TValue> = {
     disabled?: boolean;
     justify?: StackProps['justifyContent'];
     size?: ToggleButtonProps['size'];
@@ -137,10 +137,10 @@ type Props$6<TValue> = {
     value: ExclusiveValue<TValue>;
     onChange: (value: ExclusiveValue<TValue>) => void;
 });
-declare const ToggleButtonGroupUi: <TValue>(props: Props$6<TValue> & {
+declare const ToggleButtonGroupUi: <TValue>(props: Props$7<TValue> & {
     ref?: React$1.Ref<HTMLDivElement>;
 }) => React$1.ReactElement;
-declare const ControlToggleButtonGroup: <TValue>(props: Props$6<TValue>) => React$1.JSX.Element;
+declare const ControlToggleButtonGroup: <TValue>(props: Props$7<TValue>) => React$1.JSX.Element;
 
 type ToggleControlProps<T extends PropValue> = {
     options: Array<ToggleButtonGroupItem<T> & {
@@ -171,22 +171,22 @@ type Item$1 = {
     bind: PropKey;
 };
 type EqualUnequalItems = [Item$1, Item$1, Item$1, Item$1];
-type Props$5<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
+type Props$6<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
     label: string;
     icon: ReactNode;
     tooltipLabel: string;
     items: EqualUnequalItems;
     multiSizePropTypeUtil: PropTypeUtil<TMultiPropType, TPropValue>;
 };
-declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, tooltipLabel, items, multiSizePropTypeUtil, }: Props$5<TMultiPropType, TPropValue>): React$1.JSX.Element;
+declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, tooltipLabel, items, multiSizePropTypeUtil, }: Props$6<TMultiPropType, TPropValue>): React$1.JSX.Element;
 
-type Props$4 = {
+type Props$5 = {
     label: string;
     isSiteRtl?: boolean;
     extendedOptions?: ExtendedOption[];
     min?: number;
 };
-declare const LinkedDimensionsControl: ({ label, isSiteRtl, extendedOptions, min }: Props$4) => React$1.JSX.Element;
+declare const LinkedDimensionsControl: ({ label, isSiteRtl, extendedOptions, min }: Props$5) => React$1.JSX.Element;
 
 type FontCategory = {
     label: string;
@@ -239,7 +239,7 @@ type ControlProps<TControlProps = unknown> = TControlProps & {
     };
 };
 
-type Props$3 = ControlProps<{
+type Props$4 = ControlProps<{
     queryOptions: {
         params: Record<string, unknown>;
         url: string;
@@ -251,21 +251,21 @@ type Props$3 = ControlProps<{
     ariaLabel?: string;
 }>;
 type DestinationProp = LinkPropValue['value']['destination'];
-declare const LinkControl: ControlComponent$1<(props: Props$3) => React$1.JSX.Element>;
+declare const LinkControl: ControlComponent$1<(props: Props$4) => React$1.JSX.Element>;
 
 type SelectOption = {
     label: string;
     value: StringPropValue['value'];
     disabled?: boolean;
 };
-type Props$2 = {
+type Props$3 = {
     options: SelectOption[];
     onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
     fallbackLabels?: Record<string, string>;
 };
-declare const HtmlTagControl: ControlComponent$1<({ options, onChange, fallbackLabels }: Props$2) => React$1.JSX.Element>;
+declare const HtmlTagControl: ControlComponent$1<({ options, onChange, fallbackLabels }: Props$3) => React$1.JSX.Element>;
 
-type Props$1 = {
+type Props$2 = {
     queryOptions: {
         params: Record<string, unknown>;
         url: string;
@@ -276,7 +276,7 @@ type Props$1 = {
     onSetValue?: (value: DestinationProp | null) => void;
     ariaLabel?: string;
 };
-declare const QueryControl: ControlComponent$1<(props: Props$1) => React$1.JSX.Element>;
+declare const QueryControl: ControlComponent$1<(props: Props$2) => React$1.JSX.Element>;
 
 declare const GapControl: ({ label }: {
     label: string;
@@ -580,6 +580,15 @@ type InlineEditorToolbarProps = {
 };
 declare const InlineEditorToolbar: ({ editor, elementId }: InlineEditorToolbarProps) => React$1.JSX.Element;
 
+type Props$1<TValue> = {
+    units: Unit[];
+    value: TValue;
+    defaultValue?: Partial<TValue>;
+    onChange: (value: TValue) => void;
+    onBlur?: (event: React$1.FocusEvent<HTMLInputElement>) => void;
+};
+declare const UnstableSizeField: <T extends SizePropValue["value"]>({ value, defaultValue, onChange, onBlur, units, }: Props$1<T>) => React$1.JSX.Element;
+
 type AnyComponentType = ComponentType<any>;
 declare const brandSymbol: unique symbol;
 type ControlComponent$1<TComponent extends AnyComponentType = AnyComponentType> = TComponent & {
@@ -671,4 +680,4 @@ declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhe
 
 declare const useElementCanHaveChildren: () => boolean;
 
-export { type AdornmentComponent, type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, FloatingActionsBar, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PopoverGridContainer, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useElementCanHaveChildren, useFloatingActionsBar, useSyncExternalState };
+export { type AdornmentComponent, type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, FloatingActionsBar, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PopoverGridContainer, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UnstableSizeField, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useElementCanHaveChildren, useFloatingActionsBar, useSyncExternalState };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import { RefObject, ReactNode, FC, PropsWithChildren, ComponentProps, ReactElement, ComponentType } from 'react';
 import { SxProps, SelectProps, UnstableColorFieldProps, ToggleButtonProps, StackProps, PopupState, Theme, FormLabelProps, Grid } from '@elementor/ui';
-import { StringPropValue, PropTypeUtil, PropValue, PropKey, LinkPropValue, TransformablePropValue, PropType, CreateOptions } from '@elementor/editor-props';
+import { StringPropValue, PropTypeUtil, PropValue, PropKey, LinkPropValue, TransformablePropValue, PropType, CreateOptions, SizePropValue } from '@elementor/editor-props';
 import { StyleDefinitionState } from '@elementor/editor-styles';
 import { ElementID } from '@elementor/editor-elements';
 import { Editor } from '@tiptap/react';
@@ -26,11 +26,11 @@ declare const TextControl: ControlComponent$1<({ placeholder, error, inputValue,
     ariaLabel?: string;
 }) => React$1.JSX.Element>;
 
-type Props$8 = {
+type Props$9 = {
     placeholder?: string;
     ariaLabel?: string;
 };
-declare const TextAreaControl: ControlComponent$1<({ placeholder, ariaLabel }: Props$8) => React$1.JSX.Element>;
+declare const TextAreaControl: ControlComponent$1<({ placeholder, ariaLabel }: Props$9) => React$1.JSX.Element>;
 
 declare const lengthUnits: readonly ["px", "%", "em", "rem", "vw", "vh", "ch"];
 declare const angleUnits: readonly ["deg", "rad", "grad", "turn"];
@@ -102,12 +102,12 @@ type SelectControlWrapperProps = Parameters<typeof SelectControl>[0] & {
 };
 declare const SelectControlWrapper: ControlComponent$1<({ collectionId, options, ...props }: SelectControlWrapperProps) => React$1.JSX.Element>;
 
-type Props$7 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
+type Props$8 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
     propTypeUtil?: PropTypeUtil<string, string>;
     anchorEl?: HTMLElement | null;
     id?: string;
 };
-declare const ColorControl: ControlComponent$1<({ propTypeUtil, anchorEl, slotProps, id, ...props }: Props$7) => React$1.JSX.Element>;
+declare const ColorControl: ControlComponent$1<({ propTypeUtil, anchorEl, slotProps, id, ...props }: Props$8) => React$1.JSX.Element>;
 
 type RenderContentProps = {
     size: ToggleButtonProps['size'];
@@ -120,7 +120,7 @@ type ToggleButtonGroupItem<TValue> = {
 };
 type ExclusiveValue<TValue> = TValue;
 type NonExclusiveValue<TValue> = TValue[];
-type Props$6<TValue> = {
+type Props$7<TValue> = {
     disabled?: boolean;
     justify?: StackProps['justifyContent'];
     size?: ToggleButtonProps['size'];
@@ -137,10 +137,10 @@ type Props$6<TValue> = {
     value: ExclusiveValue<TValue>;
     onChange: (value: ExclusiveValue<TValue>) => void;
 });
-declare const ToggleButtonGroupUi: <TValue>(props: Props$6<TValue> & {
+declare const ToggleButtonGroupUi: <TValue>(props: Props$7<TValue> & {
     ref?: React$1.Ref<HTMLDivElement>;
 }) => React$1.ReactElement;
-declare const ControlToggleButtonGroup: <TValue>(props: Props$6<TValue>) => React$1.JSX.Element;
+declare const ControlToggleButtonGroup: <TValue>(props: Props$7<TValue>) => React$1.JSX.Element;
 
 type ToggleControlProps<T extends PropValue> = {
     options: Array<ToggleButtonGroupItem<T> & {
@@ -171,22 +171,22 @@ type Item$1 = {
     bind: PropKey;
 };
 type EqualUnequalItems = [Item$1, Item$1, Item$1, Item$1];
-type Props$5<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
+type Props$6<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
     label: string;
     icon: ReactNode;
     tooltipLabel: string;
     items: EqualUnequalItems;
     multiSizePropTypeUtil: PropTypeUtil<TMultiPropType, TPropValue>;
 };
-declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, tooltipLabel, items, multiSizePropTypeUtil, }: Props$5<TMultiPropType, TPropValue>): React$1.JSX.Element;
+declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, tooltipLabel, items, multiSizePropTypeUtil, }: Props$6<TMultiPropType, TPropValue>): React$1.JSX.Element;
 
-type Props$4 = {
+type Props$5 = {
     label: string;
     isSiteRtl?: boolean;
     extendedOptions?: ExtendedOption[];
     min?: number;
 };
-declare const LinkedDimensionsControl: ({ label, isSiteRtl, extendedOptions, min }: Props$4) => React$1.JSX.Element;
+declare const LinkedDimensionsControl: ({ label, isSiteRtl, extendedOptions, min }: Props$5) => React$1.JSX.Element;
 
 type FontCategory = {
     label: string;
@@ -239,7 +239,7 @@ type ControlProps<TControlProps = unknown> = TControlProps & {
     };
 };
 
-type Props$3 = ControlProps<{
+type Props$4 = ControlProps<{
     queryOptions: {
         params: Record<string, unknown>;
         url: string;
@@ -251,21 +251,21 @@ type Props$3 = ControlProps<{
     ariaLabel?: string;
 }>;
 type DestinationProp = LinkPropValue['value']['destination'];
-declare const LinkControl: ControlComponent$1<(props: Props$3) => React$1.JSX.Element>;
+declare const LinkControl: ControlComponent$1<(props: Props$4) => React$1.JSX.Element>;
 
 type SelectOption = {
     label: string;
     value: StringPropValue['value'];
     disabled?: boolean;
 };
-type Props$2 = {
+type Props$3 = {
     options: SelectOption[];
     onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
     fallbackLabels?: Record<string, string>;
 };
-declare const HtmlTagControl: ControlComponent$1<({ options, onChange, fallbackLabels }: Props$2) => React$1.JSX.Element>;
+declare const HtmlTagControl: ControlComponent$1<({ options, onChange, fallbackLabels }: Props$3) => React$1.JSX.Element>;
 
-type Props$1 = {
+type Props$2 = {
     queryOptions: {
         params: Record<string, unknown>;
         url: string;
@@ -276,7 +276,7 @@ type Props$1 = {
     onSetValue?: (value: DestinationProp | null) => void;
     ariaLabel?: string;
 };
-declare const QueryControl: ControlComponent$1<(props: Props$1) => React$1.JSX.Element>;
+declare const QueryControl: ControlComponent$1<(props: Props$2) => React$1.JSX.Element>;
 
 declare const GapControl: ({ label }: {
     label: string;
@@ -580,6 +580,15 @@ type InlineEditorToolbarProps = {
 };
 declare const InlineEditorToolbar: ({ editor, elementId }: InlineEditorToolbarProps) => React$1.JSX.Element;
 
+type Props$1<TValue> = {
+    units: Unit[];
+    value: TValue;
+    defaultValue?: Partial<TValue>;
+    onChange: (value: TValue) => void;
+    onBlur?: (event: React$1.FocusEvent<HTMLInputElement>) => void;
+};
+declare const UnstableSizeField: <T extends SizePropValue["value"]>({ value, defaultValue, onChange, onBlur, units, }: Props$1<T>) => React$1.JSX.Element;
+
 type AnyComponentType = ComponentType<any>;
 declare const brandSymbol: unique symbol;
 type ControlComponent$1<TComponent extends AnyComponentType = AnyComponentType> = TComponent & {
@@ -671,4 +680,4 @@ declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhe
 
 declare const useElementCanHaveChildren: () => boolean;
 
-export { type AdornmentComponent, type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, FloatingActionsBar, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PopoverGridContainer, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useElementCanHaveChildren, useFloatingActionsBar, useSyncExternalState };
+export { type AdornmentComponent, type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent$1 as ControlComponent, ControlFormLabel, type ControlReplacement, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, FloatingActionsBar, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, InlineEditorToolbar, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PopoverGridContainer, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UnstableSizeField, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useControlReplacement, useElementCanHaveChildren, useFloatingActionsBar, useSyncExternalState };

package/dist/index.js

@@ -78,6 +78,7 @@ __export(index_exports, {
   TransformRepeaterControl: () => TransformRepeaterControl,
   TransformSettingsControl: () => TransformSettingsControl,
   TransitionRepeaterControl: () => TransitionRepeaterControl,
+  UnstableSizeField: () => UnstableSizeField,
   UrlControl: () => UrlControl,
   createControl: () => createControl,
   createControlReplacementsRegistry: () => createControlReplacementsRegistry,
@@ -732,14 +733,14 @@ var TextFieldInnerSelection = (0, import_react9.forwardRef)(
     id
   }, ref) => {
     const { placeholder: boundPropPlaceholder } = useBoundProp(import_editor_props6.sizePropTypeUtil);
-    const getCursorStyle = () => ({
+    const getCursorStyle2 = () => ({
       input: { cursor: InputProps.readOnly ? "default !important" : void 0 }
     });
     return /* @__PURE__ */ React18.createElement(
       NumberInput,
       {
         ref,
-        sx: getCursorStyle(),
+        sx: getCursorStyle2(),
         size: "tiny",
         fullWidth: true,
         type,
@@ -6978,6 +6979,167 @@ var usePopover = (openOnMount, onOpen) => {
     popoverProps
   };
 };
+
+// src/components/size/unstable-size-field.tsx
+var React107 = __toESM(require("react"));
+var import_ui92 = require("@elementor/ui");
+
+// src/hooks/use-size-value.ts
+var useSizeValue = (externalValue, onChange, defaultValue) => {
+  const [sizeValue, setSizeValue] = useSyncExternalState({
+    external: externalValue,
+    setExternal: (newState) => {
+      if (newState !== null) {
+        onChange(newState);
+      }
+    },
+    persistWhen: (newState) => differsFromExternal(newState, externalValue),
+    fallback: () => defaultValue
+  });
+  const setSize = (value) => {
+    const newState = {
+      ...sizeValue,
+      size: value.trim() === "" ? null : Number(value)
+    };
+    setSizeValue(newState);
+  };
+  const setUnit = (unit) => {
+    const newState = {
+      ...sizeValue,
+      unit
+    };
+    setSizeValue(newState);
+  };
+  return {
+    size: sizeValue.size,
+    unit: sizeValue.unit,
+    setSize,
+    setUnit
+  };
+};
+var differsFromExternal = (newState, externalState) => {
+  return newState.size !== externalState.size || newState.unit !== externalState.unit;
+};
+
+// src/components/size/unit-select.tsx
+var React105 = __toESM(require("react"));
+var import_react59 = require("react");
+var import_editor_ui12 = require("@elementor/editor-ui");
+var import_ui91 = require("@elementor/ui");
+var menuItemContentStyles = {
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center"
+};
+var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
+  const popupState = (0, import_ui91.usePopupState)({
+    variant: "popover",
+    popupId: (0, import_react59.useId)()
+  });
+  const handleMenuItemClick = (index) => {
+    onClick(options[index]);
+    popupState.close();
+  };
+  return /* @__PURE__ */ React105.createElement(React105.Fragment, null, /* @__PURE__ */ React105.createElement(StyledButton2, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui91.bindTrigger)(popupState) }, value), /* @__PURE__ */ React105.createElement(import_ui91.Menu, { MenuListProps: { dense: true }, ...(0, import_ui91.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React105.createElement(
+    import_editor_ui12.MenuListItem,
+    {
+      key: option,
+      onClick: () => handleMenuItemClick(index),
+      primaryTypographyProps: {
+        variant: "caption",
+        sx: {
+          ...menuItemContentStyles,
+          lineHeight: "1"
+        }
+      },
+      menuItemTextProps: {
+        sx: menuItemContentStyles
+      }
+    },
+    option.toUpperCase()
+  ))));
+};
+var StyledButton2 = (0, import_ui91.styled)(import_ui91.Button, {
+  shouldForwardProp: (prop) => prop !== "isPrimaryColor"
+})(({ isPrimaryColor, theme }) => ({
+  color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
+  font: "inherit",
+  minWidth: "initial",
+  textTransform: "uppercase"
+}));
+
+// src/components/size/unstable-size-input.tsx
+var React106 = __toESM(require("react"));
+var import_react60 = require("react");
+var UnstableSizeInput = (0, import_react60.forwardRef)(
+  ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
+    return /* @__PURE__ */ React106.createElement(
+      NumberInput,
+      {
+        ref,
+        size: "tiny",
+        fullWidth: true,
+        type,
+        value,
+        onKeyUp,
+        focused,
+        disabled,
+        onKeyDown,
+        onInput: onChange,
+        onBlur,
+        InputProps,
+        sx: getCursorStyle(InputProps?.readOnly ?? false)
+      }
+    );
+  }
+);
+var getCursorStyle = (readOnly) => ({
+  input: { cursor: readOnly ? "default !important" : void 0 }
+});
+
+// src/components/size/unstable-size-field.tsx
+var DEFAULT_VALUE = {
+  unit: "px",
+  size: 0
+};
+var UnstableSizeField = ({
+  value,
+  defaultValue,
+  onChange,
+  onBlur,
+  units: units2
+}) => {
+  const { size, unit, setSize, setUnit } = useSizeValue(value, onChange, {
+    ...DEFAULT_VALUE,
+    ...defaultValue
+  });
+  const shouldHighlightUnit = () => {
+    return hasValue(size);
+  };
+  return /* @__PURE__ */ React107.createElement(
+    UnstableSizeInput,
+    {
+      type: "number",
+      value: size ?? "",
+      onBlur,
+      onChange: (event) => setSize(event.target.value),
+      InputProps: {
+        endAdornment: /* @__PURE__ */ React107.createElement(import_ui92.InputAdornment, { position: "end" }, /* @__PURE__ */ React107.createElement(
+          UnitSelect,
+          {
+            options: units2,
+            value: unit,
+            onClick: setUnit,
+            showPrimaryColor: shouldHighlightUnit()
+          }
+        ))
+      }
+    }
+  );
+};
+var hasValue = (value) => {
+  return value !== null && value !== "";
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AspectRatioControl,
@@ -7028,6 +7190,7 @@ var usePopover = (openOnMount, onOpen) => {
   TransformRepeaterControl,
   TransformSettingsControl,
   TransitionRepeaterControl,
+  UnstableSizeField,
   UrlControl,
   createControl,
   createControlReplacementsRegistry,