@antscorp/antsomi-ui 2.0.89 → 2.0.91-text-editor-beta.1

package/es/components/molecules/ColorSetting/index.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Molecules
 import { SettingWrapper } from '../SettingWrapper';
-import { ColorPicker, } from '@antscorp/antsomi-ui/es/components/molecules/ColorPicker';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 import { Button, Icon, Text } from '@antscorp/antsomi-ui/es/components/atoms';
 // Styled
-import { ButtonPreset, PresetColor, PresetWrapper } from './styled';
+import { ButtonPreset, PresetColor, PresetWrapper, StyledColorPicker } from './styled';
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/ColorSetting/index.tsx';
 const stylingCenter = {
     display: 'flex',
@@ -64,13 +63,5 @@ export const ColorSetting = props => {
     const presetColors = customColors ? (_jsxs("div", { children: [_jsxs("div", { style: stylingCenter, children: [_jsx(Text, { children: "Color Profile" }), !isHideBtnEdit && (_jsx(Button, { type: "primary", onClick: onClickEdit, children: "Edit" }))] }), _jsxs(PresetWrapper, { children: [_jsx(ButtonPreset, { shape: "circle", onClick: onClickAddNewPresetColor, children: _jsx(Icon, { type: "icon-ants-plus-slim", style: { fontSize: 14 } }) }), customColors && customColors.length
                         ? customColors.map((customColor, idx) => (_jsx(PresetColor, { color: customColor, onClick: () => onClickPresetColor(customColor), children: _jsx("div", { className: "__color", style: { backgroundColor: customColor } }) }, idx)))
                         : null] })] })) : null;
-    return (_jsx(SettingWrapper, { label: label, className: className, labelClassName: labelClassName, labelStyle: labelStyling, vertical: vertical, children: _jsx(ColorPicker, { ...restOf, color: color, presetColors: presetColors, onChange: onChange }) }));
-};
-ColorSetting.defaultProps = {
-    label: '',
-    labelClassName: '',
-    // customColors: [],
-    isHideBtnEdit: true,
-    callback: () => { },
-    onChange: () => { },
+    return (_jsx(SettingWrapper, { label: label, className: className, labelClassName: labelClassName, labelStyle: labelStyling, vertical: vertical, children: _jsx(StyledColorPicker, { ...restOf, color: color, presetColors: presetColors, onChange: onChange }) }));
 };

package/es/components/molecules/ColorSetting/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const ColorSettingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledColorPicker: import("styled-components").StyledComponent<import("react").FC<import("@antscorp/antsomi-ui/es/components/molecules/ColorPicker").ColorPickerProps>, any, {}, never>;
 export declare const PresetColor: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ButtonPreset: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
 export declare const PresetWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/ColorSetting/styled.js

@@ -1,10 +1,18 @@
 // Libraries
 import styled from 'styled-components';
+import { ColorPicker } from '@antscorp/antsomi-ui/es/components/molecules/ColorPicker';
 // Image
 import TransparentSvg from '@antscorp/antsomi-ui/es/assets/svg/transparent.svg';
 // Components
 import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
-export const ColorSettingWrapper = styled.div ``;
+export const StyledColorPicker = styled(ColorPicker) `
+  &.antsomi-color-picker {
+    .antsomi-popover-button {
+      display: flex;
+      align-items: center;
+    }
+  }
+`;
 export const PresetColor = styled.div `
   position: relative;
   width: 24px;

package/es/components/molecules/EmojiCollections/CommonCollection/index.js

@@ -16,7 +16,7 @@ import { COMMON_TAB_COLLECTION, MIN_VISIBLE_COUNT, SMILEYS_BODY } from './consta
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const { Text } = Typography;
 const emojiListParsed = JSON.parse(JSON.stringify(ICON_EMOJI_COMMON));
-const CommonCollection = ({ onEmojiClick }) => {
+const CommonCollection = ({ onEmojiClick, getPopupContainer }) => {
     // States
     const [visibleCount, setVisibleCount] = useState(MIN_VISIBLE_COUNT);
     const [state, setState] = useImmer({
@@ -93,7 +93,7 @@ const CommonCollection = ({ onEmojiClick }) => {
         });
         return (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 150, onScroll: e => onScroll(e, emojiCollection.length), children: _jsx(Flex, { wrap: "wrap", children: content }) }));
     }, [emojiCollection, visibleCount, onScroll, onEmojiClick]);
-    return (_jsxs(WrapperCollection, { children: [_jsxs(Flex, { gap: 20, justify: "space-between", align: "flex-end", children: [_jsx(Input, { placeholder: "Search...", suffix: _jsx(SearchIcon, { color: globalToken?.bw8 }), styles: { affixWrapper: { minWidth: 280 } }, onChange: handleChangeInput }), _jsx(Select, { placeholder: "Select collection", value: state.collectionActive, style: { width: 200 }, options: collectionOptions, optionRender: renderOption, onChange: handleChangeSelect })] }), _jsx(EmojiList, { children: renderCommonCollection() })] }));
+    return (_jsxs(WrapperCollection, { children: [_jsxs(Flex, { gap: 20, justify: "space-between", align: "flex-end", children: [_jsx(Input, { placeholder: "Search...", suffix: _jsx(SearchIcon, { color: globalToken?.bw8 }), styles: { affixWrapper: { minWidth: 280 } }, onChange: handleChangeInput }), _jsx(Select, { placeholder: "Select collection", value: state.collectionActive, style: { width: 200 }, options: collectionOptions, optionRender: renderOption, onChange: handleChangeSelect, getPopupContainer: getPopupContainer })] }), _jsx(EmojiList, { children: renderCommonCollection() })] }));
 };
 CommonCollection.defaultProps = {
     onEmojiClick: () => { },

package/es/components/molecules/EmojiCollections/types.d.ts

@@ -1,3 +1,4 @@
 export interface EmojiCollectionProps {
     onEmojiClick: (newEmoji: string) => void;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 }

package/es/components/molecules/EmojiPopover/EmojiPopover.d.ts

@@ -10,6 +10,7 @@ interface EmojiPopoverProps {
     isForceHide?: boolean;
     children?: React.ReactNode;
     onEmojiClick?: (emoji: string | TagDataCustomize) => void;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 }
 declare const _default: React.NamedExoticComponent<EmojiPopoverProps>;
 export default _default;

package/es/components/molecules/EmojiPopover/EmojiPopover.js

@@ -11,7 +11,7 @@ import { EMOJI_COLLECTIONS, } from '@antscorp/antsomi-ui/es/components/molecules
 import { EmojiTabs, EmojiPopoverStyled } from './styled';
 // Utils
 import { handleGetTextToReplace } from './utils';
-const EmojiPopover = ({ disabled, collections, isForceHide, children, onEmojiClick, }) => {
+const EmojiPopover = ({ disabled, collections, isForceHide, children, onEmojiClick, getPopupContainer, }) => {
     const [state, setState] = useImmer({
         isOpen: false,
         collectionActive: collections ? collections[0]?.key : EMOJI_COLLECTIONS.COMMON,
@@ -47,16 +47,16 @@ const EmojiPopover = ({ disabled, collections, isForceHide, children, onEmojiCli
     const renderCollection = useCallback((collectionCurrent = '') => {
         switch (collectionCurrent) {
             case EMOJI_COLLECTIONS.VIBER: {
-                return _jsx(ViberCollection, { onEmojiClick: handleGetCodeEmoji });
+                return (_jsx(ViberCollection, { onEmojiClick: handleGetCodeEmoji, getPopupContainer: getPopupContainer }));
             }
             case EMOJI_COLLECTIONS.LINE: {
-                return _jsx(LineCollection, { onEmojiClick: handleGetCodeEmoji });
+                return (_jsx(LineCollection, { onEmojiClick: handleGetCodeEmoji, getPopupContainer: getPopupContainer }));
             }
             default: {
-                return _jsx(CommonCollection, { onEmojiClick: handleGetCodeEmoji });
+                return (_jsx(CommonCollection, { onEmojiClick: handleGetCodeEmoji, getPopupContainer: getPopupContainer }));
             }
         }
-    }, [handleGetCodeEmoji]);
+    }, [handleGetCodeEmoji, getPopupContainer]);
     const emojiCollections = useMemo(() => {
         if (!collections)
             return [];
@@ -66,7 +66,11 @@ const EmojiPopover = ({ disabled, collections, isForceHide, children, onEmojiCli
             children: renderCollection(collection.key),
         }));
     }, [collections, renderCollection]);
-    return (_jsx(EmojiPopoverStyled, { content: _jsx(EmojiTabs, { activeKey: state.collectionActive, onTabClick: handleClickCollection, items: emojiCollections }), placement: "topLeft", trigger: "click", fresh: false, style: { padding: 15 }, arrow: false, rootClassName: "antsomi-emoji-popover", open: state.isOpen, onOpenChange: handleOpenChange, children: children || (_jsx(Button, { type: "link", icon: _jsx(EmojiSmileIcon, {}), disabled: disabled, onClick: () => handleOpenChange(true) })) }));
+    let content = (_jsx(EmojiTabs, { activeKey: state.collectionActive, onTabClick: handleClickCollection, items: emojiCollections }));
+    if (emojiCollections.length <= 1) {
+        content = emojiCollections.at(0)?.children;
+    }
+    return (_jsx(EmojiPopoverStyled, { content: content, placement: "topLeft", trigger: "click", fresh: false, style: { padding: 15 }, arrow: false, rootClassName: "antsomi-emoji-popover", open: state.isOpen, onOpenChange: handleOpenChange, getPopupContainer: getPopupContainer, children: children || (_jsx(Button, { type: "link", icon: _jsx(EmojiSmileIcon, {}), disabled: disabled, onClick: () => handleOpenChange(true) })) }));
 };
 EmojiPopover.defaultProps = {
     disabled: false,

package/es/components/molecules/EmojiPopover/styled.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-export declare const EmojiTabs: import("styled-components").StyledComponent<import("react").FC<import("antd/es/tabs").TabsProps> & {
+export declare const EmojiTabs: import("styled-components").StyledComponent<import("react").FC<import("antd").TabsProps> & {
     TabPane: import("react").FC<import("antd").TabPaneProps>;
 }, any, {
     shadow?: boolean | undefined;
 }, never>;
-export declare const EmojiPopoverStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/popover").PopoverProps & import("react").RefAttributes<unknown>> & {
+export declare const EmojiPopoverStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").PopoverProps & import("react").RefAttributes<unknown>> & {
     _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/popover/PurePanel").PurePanelProps>;
 }, any, {}, never>;

package/es/components/molecules/EmojiPopover/styled.js

@@ -1,7 +1,7 @@
 // Libraries
+import { Popover } from 'antd';
 import styled from 'styled-components';
 // Components
-import { Popover } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Tabs as TabsUI } from '@antscorp/antsomi-ui/es/components/molecules';
 export const EmojiTabs = styled(TabsUI) `
   .antsomi-tabs-tab {

package/es/components/molecules/FontSizeInput/FontSizeInput.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FontSizeInputProps, HandlerRef } from './types';
+export declare const FontSizeInput: import("react").ForwardRefExoticComponent<FontSizeInputProps & import("react").RefAttributes<HandlerRef>>;

package/es/components/molecules/FontSizeInput/FontSizeInput.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useState, useImperativeHandle, useEffect, useRef, useMemo, } from 'react';
+import clsx from 'clsx';
+import { useElementSize } from '@antscorp/antsomi-ui/es/hooks';
+import { DEFAULT_FONT_SIZE, DEFAULT_FONT_SIZE_OPTIONS } from './constants';
+import { CLS } from './utils';
+import { FontSizeDropdown } from './components/FontSizeDropdown';
+import { FontSizeControl } from './components/FontSizeControl';
+export const FontSizeInput = forwardRef((props, ref) => {
+    const { min = 1, max = 300, value: valueProp, defaultValue = DEFAULT_FONT_SIZE, options = DEFAULT_FONT_SIZE_OPTIONS, placeholder, style, className, disabled, dropdownProps, onFocus, onBlur, onChange = () => undefined, } = props;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const [popoverValue, setPopoverValue] = useState(null);
+    const [inputRef, { width: inputWidth }] = useElementSize();
+    const isControlled = valueProp !== undefined;
+    const value = isControlled ? +valueProp : +uncontrolledValue;
+    const popoverItemRefs = useRef(new Map());
+    const fontSizeOptions = useMemo(() => options.map(option => ({
+        size: option,
+        label: option.toString(),
+        className: clsx(CLS.PopoverListItem, {
+            [CLS.PopoverListItemSelected]: option === value,
+        }),
+    })), [options, value]);
+    useEffect(() => {
+        if (!isPopoverOpen) {
+            setPopoverValue(null);
+        }
+        if (isPopoverOpen && popoverValue) {
+            popoverItemRefs.current.get(popoverValue)?.focus({
+                preventScroll: true,
+            });
+        }
+    }, [popoverValue, isPopoverOpen]);
+    const handleInputFocus = (event) => {
+        onFocus?.(value, event);
+        setIsPopoverOpen(true);
+    };
+    const handleInputBlur = (event) => {
+        onBlur?.(value, event);
+        if (!popoverValue) {
+            setIsPopoverOpen(false);
+        }
+    };
+    const handleValueChange = useCallback((newValue, info) => {
+        if (!isControlled) {
+            setUncontrolledValue(newValue);
+        }
+        onChange(newValue, info);
+    }, [isControlled, onChange]);
+    const handleKeyDown = useCallback((e) => {
+        const currentSize = popoverValue ?? value;
+        const currentFocusIndex = fontSizeOptions.findIndex(item => item.size === currentSize);
+        const firstFontSize = fontSizeOptions.at(0);
+        const lastFontSize = fontSizeOptions.at(-1);
+        switch (e.key) {
+            case 'Enter': {
+                inputRef.current?.blur();
+                break;
+            }
+            case 'ArrowDown': {
+                e.preventDefault();
+                if (currentFocusIndex !== -1) {
+                    const nextFocusIndex = Math.min(fontSizeOptions.length - 1, currentFocusIndex + 1);
+                    setPopoverValue(fontSizeOptions[nextFocusIndex].size);
+                }
+                else if (firstFontSize) {
+                    setPopoverValue(firstFontSize.size);
+                }
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                if (currentFocusIndex !== -1) {
+                    const nextFocusIndex = Math.max(0, currentFocusIndex - 1);
+                    setPopoverValue(fontSizeOptions[nextFocusIndex].size);
+                }
+                else if (lastFontSize) {
+                    setPopoverValue(lastFontSize.size);
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    }, [fontSizeOptions, inputRef, value, popoverValue]);
+    const handleClickPopoverItem = useCallback((size) => {
+        handleValueChange(size, { type: 'dropdown' });
+        setIsPopoverOpen(false);
+        inputRef.current?.blur();
+    }, [handleValueChange, inputRef]);
+    const handlePopoverItemKeydown = useCallback((e, size) => {
+        const currentFocusIndex = fontSizeOptions.findIndex(item => item.size === popoverValue);
+        switch (e.key) {
+            case 'Enter': {
+                handleClickPopoverItem(size);
+                break;
+            }
+            case 'ArrowDown': {
+                const nextFocusIndex = Math.min(fontSizeOptions.length - 1, currentFocusIndex + 1);
+                setPopoverValue(fontSizeOptions[nextFocusIndex].size);
+                e.stopPropagation();
+                break;
+            }
+            case 'ArrowUp': {
+                const nextFocusIndex = Math.max(0, currentFocusIndex - 1);
+                setPopoverValue(fontSizeOptions[nextFocusIndex].size);
+                e.stopPropagation();
+                break;
+            }
+            default:
+                break;
+        }
+    }, [fontSizeOptions, popoverValue, handleClickPopoverItem]);
+    useImperativeHandle(ref, () => ({
+        closeDropdown: () => setIsPopoverOpen(false),
+    }));
+    const content = (_jsx(FontSizeControl, { disabled: disabled, ref: inputRef, className: className, value: popoverValue ?? value, max: max, min: min, keyboard: false, defaultValue: defaultValue, style: style, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleKeyDown, onChange: newValue => {
+            if (newValue === null)
+                return;
+            handleValueChange(Number(newValue), { type: 'input' });
+        }, onIncrement: () => handleValueChange(value + 1, { type: 'input' }), onDecrement: () => handleValueChange(value - 1, { type: 'input' }) }));
+    if (options.length) {
+        return (_jsx(FontSizeDropdown, { isOpen: isPopoverOpen, options: fontSizeOptions, popoverValue: popoverValue, width: inputWidth, itemRefs: popoverItemRefs, onItemClick: handleClickPopoverItem, onItemKeyDown: handlePopoverItemKeydown, onClose: () => setIsPopoverOpen(false), getPopupContainer: () => dropdownProps?.getPopupContainer?.() || document.body, children: content }));
+    }
+    return content;
+});

package/es/components/molecules/FontSizeInput/components/FontSizeControl.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { InputNumberProps } from 'antd';
+interface FontSizeControlProps extends InputNumberProps {
+    onIncrement: () => void;
+    onDecrement: () => void;
+}
+export declare const FontSizeControl: import("react").ForwardRefExoticComponent<FontSizeControlProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/es/components/molecules/FontSizeInput/components/FontSizeControl.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InputNumber } from 'antd';
+import { forwardRef } from 'react';
+import { ControlButton, InputRoot } from '../styled';
+import { CLS } from '../utils';
+import clsx from 'clsx';
+import { AddIcon, MinusIcon } from '../../../icons';
+export const FontSizeControl = forwardRef(({ onIncrement, onDecrement, ...rest }, ref) => (_jsxs(InputRoot, { children: [_jsx(ControlButton, { type: "text", onClick: onDecrement, disabled: rest.disabled ||
+                typeof rest.value !== 'number' ||
+                typeof rest.min !== 'number' ||
+                rest.value <= rest.min, children: _jsx(MinusIcon, { size: 14 }) }), _jsx(InputNumber, { ref: ref, className: clsx(CLS.Input, rest.className), parser: value => value?.replace(/[^\d]/g, ''), controls: false, ...rest }), _jsx(ControlButton, { type: "text", onClick: onIncrement, disabled: rest.disabled ||
+                typeof rest.value !== 'number' ||
+                typeof rest.max !== 'number' ||
+                rest.value >= rest.max, children: _jsx(AddIcon, { size: 14 }) })] })));

package/es/components/molecules/FontSizeInput/components/FontSizeDropdown.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from 'react';
+type FontSizeOption = {
+    size: number;
+    label: string;
+    className: string;
+};
+interface FontSizeDropdownProps {
+    children: React.ReactNode;
+    isOpen: boolean;
+    options: FontSizeOption[];
+    popoverValue: number | null;
+    width: number;
+    itemRefs: RefObject<Map<number, HTMLLIElement>>;
+    onItemClick: (size: number) => void;
+    onItemKeyDown: (e: React.KeyboardEvent, size: number) => void;
+    onClose: () => void;
+    getPopupContainer?: () => HTMLElement;
+}
+export declare const FontSizeDropdown: ({ children, isOpen, options, popoverValue, width, itemRefs, onItemClick, onItemKeyDown, onClose, getPopupContainer, }: FontSizeDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/molecules/FontSizeInput/components/FontSizeDropdown.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover } from 'antd';
+import { CLS } from '../utils';
+import { StyledListFont, StyledListItemFont } from '../styled';
+export const FontSizeDropdown = ({ children, isOpen, options, popoverValue, width, itemRefs, onItemClick, onItemKeyDown, onClose, getPopupContainer, }) => {
+    const content = (_jsx(StyledListFont, { role: "list", className: CLS.PopoverList, style: { width: `${width}px` }, onMouseDown: e => e.preventDefault(), children: options.map((i, idx) => {
+            const isFocused = i.size === popoverValue;
+            return (_jsx(StyledListItemFont, { ref: el => {
+                    if (!el || !itemRefs.current)
+                        return;
+                    itemRefs.current.set(i.size, el);
+                }, role: "listitem", className: i.className, "aria-posinset": idx + 1, "aria-setsize": options.length, tabIndex: isFocused ? 0 : -1, onClick: () => onItemClick(i.size), onKeyDown: e => onItemKeyDown(e, i.size), ...(isFocused && {
+                    onBlur: onClose,
+                }), children: i.label }, i.size));
+        }) }));
+    return (_jsx(Popover, { arrow: false, open: isOpen, overlayClassName: CLS.Popover, overlayInnerStyle: {
+            borderRadius: 4,
+        }, content: content, getPopupContainer: getPopupContainer, placement: "bottom", children: children }));
+};

package/es/components/molecules/FontSizeInput/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_FONT_SIZE_OPTIONS: number[];
+export declare const DEFAULT_FONT_SIZE: number;

package/es/components/molecules/FontSizeInput/constants.js

@@ -0,0 +1,5 @@
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const DEFAULT_FONT_SIZE_OPTIONS = [
+    8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72, 96,
+];
+export const DEFAULT_FONT_SIZE = THEME.token?.fontSize || 14;

package/es/components/molecules/FontSizeInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FontSizeInput';
+export type { FontSizeInputProps, HandlerRef as FontSizeInputHandlerRef } from './types';

package/es/components/molecules/FontSizeInput/index.js

@@ -0,0 +1 @@
+export * from './FontSizeInput';

package/es/components/molecules/FontSizeInput/styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const StyledListFont: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const StyledListItemFont: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const InputRoot: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ControlButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {}, never>;

package/es/components/molecules/FontSizeInput/styled.js

@@ -0,0 +1,36 @@
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { Button } from 'antd';
+import styled from 'styled-components';
+export const StyledListFont = styled.ul `
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+`;
+export const StyledListItemFont = styled.li `
+  padding: 6px 10px;
+  cursor: pointer;
+  text-align: center;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:hover,
+  &:focus-visible {
+    background-color: ${THEME.components?.Menu?.itemHoverBg};
+  }
+`;
+export const InputRoot = styled.div `
+  gap: 2px;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+`;
+export const ControlButton = styled(Button) `
+  &.antsomi-btn {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    padding: 0px;
+  }
+`;

package/es/components/molecules/FontSizeInput/styles.scss

@@ -0,0 +1,15 @@
+.antsomi-font-size-input-popover {
+  &.antsomi-popover {
+    .antsomi-popover-inner {
+      padding: 0;
+
+      .antsomi-popover-inner-content {
+        overflow: auto;
+
+        > ul {
+          max-height: 240px;
+        }
+      }
+    }
+  }
+}

package/es/components/molecules/FontSizeInput/types.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export interface HandlerRef {
+    closeDropdown: () => void;
+}
+export interface FontSizeInputProps {
+    value: number;
+    min?: number;
+    max?: number;
+    defaultValue?: number;
+    options?: number[];
+    placeholder?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    disabled?: boolean;
+    onChange?: (value: number, info: {
+        type: 'input' | 'dropdown';
+    }) => void;
+    onFocus?: (value: number, event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (value: number, event: React.FocusEvent<HTMLInputElement>) => void;
+    dropdownProps?: {
+        getPopupContainer?: () => HTMLElement | null;
+    };
+}

package/es/components/molecules/FontSizeInput/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/molecules/FontSizeInput/utils.d.ts

@@ -0,0 +1,7 @@
+export declare const CLS: {
+    Popover: string;
+    PopoverList: string;
+    PopoverListItem: string;
+    PopoverListItemSelected: string;
+    Input: string;
+};

package/es/components/molecules/FontSizeInput/utils.js

@@ -0,0 +1,9 @@
+import { antsomiClsx } from '@antscorp/antsomi-ui/es/utils';
+const componentCls = antsomiClsx('font-size-input');
+export const CLS = {
+    Popover: componentCls('popover'),
+    PopoverList: componentCls('popover-list'),
+    PopoverListItem: componentCls('popover-list-item'),
+    PopoverListItemSelected: componentCls('popover-list-item-selected'),
+    Input: componentCls('input'),
+};

package/es/components/molecules/ItemNotFound/ItemNotFound.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type TItemNotFoundProps = {
+    height?: string;
+};
+export declare const ItemNotFound: React.FC<TItemNotFoundProps>;
+export {};

package/es/components/molecules/ItemNotFound/ItemNotFound.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex } from 'antd';
+import { translate, translations } from '@antscorp/antsomi-locales';
+import { SearchNotFoundIcon } from '../../icons';
+import { ContainerModule } from './styled';
+export const ItemNotFound = props => {
+    const { height = '100%' } = props;
+    return (_jsx(ContainerModule, { "$height": height, children: _jsxs("div", { children: [_jsxs(Flex, { className: "item-title", align: "center", children: [_jsx("span", { className: "content-title", children: translate(translations._ERR_ITEM_NOT_FOUND, 'Item not found') }), _jsx(SearchNotFoundIcon, { className: "icon-title" })] }), _jsx("div", { className: "item-body", children: translate(translations._ERR_ITEM_NOT_FOUND_DES, 'Item does not exist or has been deleted') })] }) }));
+};

package/es/components/molecules/ItemNotFound/index.d.ts

@@ -0,0 +1 @@
+export { ItemNotFound } from './ItemNotFound';

package/es/components/molecules/ItemNotFound/index.js

@@ -0,0 +1 @@
+export { ItemNotFound } from './ItemNotFound';

package/es/components/molecules/ItemNotFound/styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ContainerModule: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
+    $height: string;
+}, never>;

package/es/components/molecules/ItemNotFound/styled.js

@@ -0,0 +1,29 @@
+import { Flex } from 'antd';
+import styled from 'styled-components';
+export const ContainerModule = styled(Flex) `
+  height: ${props => (props.$height ? props.$height : '100%')};
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 5px;
+  .item-title {
+    display: flex;
+
+    .content-title {
+      font-size: 20px;
+      font-weight: bold;
+      color: #f29100;
+      margin-right: 5px;
+    }
+
+    .icon-title {
+      font-size: 24px;
+      color: #666666;
+    }
+  }
+
+  .item-body {
+    font-size: 12px;
+    color: #595959;
+  }
+`;