@via-profit/ui-kit 0.1.7 → 0.2.1-alpha.1

package/Popper/usePopprer.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { AnchorPos } from './Popper';
+import { PositionStrategy } from './PopperContainer';
+export interface UsePopperProps {
+    readonly anchorElement?: HTMLElement | null;
+    readonly anchorPos?: AnchorPos;
+    readonly positionStrategy?: PositionStrategy;
+    readonly autoFlip?: boolean;
+    readonly offset?: number;
+    readonly viewportMargin?: number;
+    readonly isOpen?: boolean;
+}
+export interface UsePopperResult {
+    readonly actualPlacement: AnchorPos;
+    readonly style: React.CSSProperties | null;
+    readonly popperRef: React.MutableRefObject<HTMLDivElement | null>;
+    readonly isVisible: boolean;
+    readonly calculatePosition: () => void;
+    readonly getTransformOrigin: (placement: AnchorPos) => string;
+    readonly setActualPlacement: React.Dispatch<React.SetStateAction<AnchorPos>>;
+    readonly setStyle: React.Dispatch<React.SetStateAction<React.CSSProperties | null>>;
+    readonly setIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare const usePopper: ({ anchorElement, anchorPos, positionStrategy, autoFlip, offset, viewportMargin, isOpen, }: UsePopperProps) => UsePopperResult;
+export default usePopper;

package/Popper/usePopprer.js

@@ -0,0 +1,330 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePopper = void 0;
+const react_1 = __importDefault(require("react"));
+const usePopper = ({ anchorElement, anchorPos = 'auto', positionStrategy = 'absolute', autoFlip = true, offset = 0, viewportMargin = 30, isOpen = false, }) => {
+    const [actualPlacement, setActualPlacement] = react_1.default.useState(anchorPos);
+    const [style, setStyle] = react_1.default.useState(null);
+    const [isVisible, setIsVisible] = react_1.default.useState(false);
+    const popperRef = react_1.default.useRef(null);
+    // Синхронизация actualPlacement с anchorPos
+    react_1.default.useEffect(() => {
+        if (actualPlacement !== anchorPos) {
+            setActualPlacement(anchorPos);
+        }
+    }, [actualPlacement, anchorPos]);
+    const getPositionStyle = react_1.default.useCallback((props) => {
+        const { place, anchorRect, popperRect, forViewportCheck = false } = props;
+        const [direction, modifier = ''] = place.split('-');
+        let left = anchorRect.left;
+        let top = anchorRect.top;
+        // Вычисляем позицию относительно viewport
+        switch (direction) {
+            case 'top':
+                top = anchorRect.top - popperRect.height - offset;
+                if (modifier === 'left' || modifier === 'start') {
+                    left = anchorRect.left;
+                }
+                else if (modifier === 'right' || modifier === 'end') {
+                    left = anchorRect.right - popperRect.width;
+                }
+                else {
+                    left = anchorRect.left + (anchorRect.width - popperRect.width) / 2;
+                }
+                break;
+            case 'bottom':
+                top = anchorRect.bottom + offset;
+                if (modifier === 'left' || modifier === 'start') {
+                    left = anchorRect.left;
+                }
+                else if (modifier === 'right' || modifier === 'end') {
+                    left = anchorRect.right - popperRect.width;
+                }
+                else {
+                    left = anchorRect.left + (anchorRect.width - popperRect.width) / 2;
+                }
+                break;
+            case 'left':
+                left = anchorRect.left - popperRect.width - offset;
+                if (modifier === 'top' || modifier === 'start') {
+                    top = anchorRect.top;
+                }
+                else if (modifier === 'bottom' || modifier === 'end') {
+                    top = anchorRect.bottom - popperRect.height;
+                }
+                else {
+                    top = anchorRect.top + (anchorRect.height - popperRect.height) / 2;
+                }
+                break;
+            case 'right':
+                left = anchorRect.right + offset;
+                if (modifier === 'top' || modifier === 'start') {
+                    top = anchorRect.top;
+                }
+                else if (modifier === 'bottom' || modifier === 'end') {
+                    top = anchorRect.bottom - popperRect.height;
+                }
+                else {
+                    top = anchorRect.top + (anchorRect.height - popperRect.height) / 2;
+                }
+                break;
+            default:
+                left = anchorRect.left + (anchorRect.width - popperRect.width) / 2;
+                top = anchorRect.bottom + offset;
+        }
+        // Возвращаем viewport координаты для проверки или финальные координаты
+        if (forViewportCheck) {
+            return { left, top };
+        }
+        // Для финального позиционирования учитываем стратегию
+        if (positionStrategy === 'absolute') {
+            return {
+                left: left + window.scrollX,
+                top: top + window.scrollY,
+            };
+        }
+        return { left, top };
+    }, [offset, positionStrategy]);
+    const checkIfViewportFits = react_1.default.useCallback((style, popperRect) => {
+        const left = style.left;
+        const top = style.top;
+        const right = left + popperRect.width;
+        const bottom = top + popperRect.height;
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const isWithinHorizontal = left >= viewportMargin && right <= viewportWidth - viewportMargin;
+        const isWithinVertical = top >= viewportMargin && bottom <= viewportHeight - viewportMargin;
+        const hasValidPosition = left >= 0 && top >= 0;
+        return hasValidPosition && isWithinHorizontal && isWithinVertical;
+    }, [viewportMargin]);
+    const placementsOrder = react_1.default.useMemo(() => {
+        const basePlacements = {
+            top: ['top', 'top-left', 'top-right', 'top-start', 'top-end'],
+            bottom: ['bottom', 'bottom-left', 'bottom-right', 'bottom-start', 'bottom-end'],
+            left: ['left', 'left-top', 'left-bottom'],
+            right: ['right', 'right-top', 'right-bottom'],
+        };
+        const allPlacements = [
+            ...basePlacements.top,
+            ...basePlacements.bottom,
+            ...basePlacements.left,
+            ...basePlacements.right,
+        ];
+        const order = {};
+        allPlacements.forEach(placement => {
+            const [direction] = placement.split('-');
+            // Приоритет: то же направление > противоположное > остальные
+            const opposite = direction === 'top'
+                ? 'bottom'
+                : direction === 'bottom'
+                    ? 'top'
+                    : direction === 'left'
+                        ? 'right'
+                        : 'left';
+            order[placement] = [
+                placement,
+                ...basePlacements[direction].filter(p => p !== placement),
+                ...(basePlacements[opposite] || []),
+                ...(direction !== 'left' && direction !== 'right' ? basePlacements.left : []),
+                ...(direction !== 'left' && direction !== 'right' ? basePlacements.right : []),
+            ];
+        });
+        return order;
+    }, []);
+    const getPreferredPlacements = react_1.default.useCallback((preferredPlacement, anchorRect, popperRect) => {
+        // Обработка auto placement
+        if (preferredPlacement.startsWith('auto')) {
+            const [, preferredDirection = 'bottom'] = preferredPlacement.split('-');
+            const allPlacements = [
+                'bottom',
+                'bottom-start',
+                'bottom-end',
+                'bottom-left',
+                'bottom-right',
+                'top',
+                'top-left',
+                'top-right',
+                'top-start',
+                'top-end',
+                'left',
+                'left-top',
+                'left-bottom',
+                'right',
+                'right-top',
+                'right-bottom',
+            ];
+            // Сортируем: сначала указанное направление
+            const sortedPlacements = [...allPlacements].sort((a, b) => {
+                const aDir = a.split('-')[0];
+                const bDir = b.split('-')[0];
+                if (aDir === preferredDirection && bDir !== preferredDirection)
+                    return -1;
+                if (aDir !== preferredDirection && bDir === preferredDirection)
+                    return 1;
+                return 0;
+            });
+            for (const place of sortedPlacements) {
+                const viewportStyle = getPositionStyle({
+                    place,
+                    anchorRect,
+                    popperRect,
+                    forViewportCheck: true,
+                });
+                const fits = checkIfViewportFits(viewportStyle, popperRect);
+                if (fits) {
+                    const finalStyle = getPositionStyle({
+                        place,
+                        anchorRect,
+                        popperRect,
+                        forViewportCheck: false,
+                    });
+                    return {
+                        found: true,
+                        placement: place,
+                        style: finalStyle,
+                    };
+                }
+            }
+        }
+        if (!autoFlip) {
+            const finalStyle = getPositionStyle({
+                place: preferredPlacement,
+                anchorRect,
+                popperRect,
+                forViewportCheck: false,
+            });
+            return {
+                found: false,
+                placement: preferredPlacement,
+                style: finalStyle,
+            };
+        }
+        const order = placementsOrder[preferredPlacement] || placementsOrder.bottom;
+        for (const place of order) {
+            const viewportStyle = getPositionStyle({
+                place,
+                anchorRect,
+                popperRect,
+                forViewportCheck: true,
+            });
+            const fits = checkIfViewportFits(viewportStyle, popperRect);
+            if (fits) {
+                const finalStyle = getPositionStyle({
+                    place,
+                    anchorRect,
+                    popperRect,
+                    forViewportCheck: false,
+                });
+                return {
+                    found: true,
+                    placement: place,
+                    style: finalStyle,
+                };
+            }
+        }
+        const finalStyle = getPositionStyle({
+            place: preferredPlacement,
+            anchorRect,
+            popperRect,
+            forViewportCheck: false,
+        });
+        return {
+            found: false,
+            placement: preferredPlacement,
+            style: finalStyle,
+        };
+    }, [autoFlip, getPositionStyle, checkIfViewportFits, placementsOrder]);
+    const calculatePosition = react_1.default.useCallback(() => {
+        if (!anchorElement || !popperRef.current) {
+            return;
+        }
+        const anchorRect = anchorElement.getBoundingClientRect();
+        const popperRect = popperRef.current.getBoundingClientRect();
+        const placements = getPreferredPlacements(actualPlacement, anchorRect, popperRect);
+        if (placements.found) {
+            setActualPlacement(placements.placement);
+            setStyle(placements.style);
+        }
+        else {
+            setStyle(placements.style);
+        }
+    }, [actualPlacement, anchorElement, getPreferredPlacements]);
+    const getTransformOrigin = react_1.default.useCallback((placement) => {
+        if (placement.startsWith('top'))
+            return 'bottom center';
+        if (placement.startsWith('bottom'))
+            return 'top center';
+        if (placement.startsWith('left'))
+            return 'right center';
+        if (placement.startsWith('right'))
+            return 'left center';
+        return 'top center';
+    }, []);
+    // Очистка при закрытии
+    react_1.default.useEffect(() => {
+        if (!isOpen) {
+            setIsVisible(false);
+            setStyle(null);
+        }
+        else if (anchorElement && isOpen && popperRef.current) {
+            const anchorRect = anchorElement.getBoundingClientRect();
+            const popperRect = popperRef.current.getBoundingClientRect();
+            const placements = getPreferredPlacements(actualPlacement, anchorRect, popperRect);
+            if (placements.found) {
+                setActualPlacement(placements.placement);
+                setStyle(placements.style);
+            }
+            else {
+                setStyle(placements.style);
+            }
+            setIsVisible(true);
+        }
+    }, [actualPlacement, anchorElement, getPreferredPlacements, isOpen]);
+    // Отслеживание скролла
+    react_1.default.useEffect(() => {
+        const handleEvent = () => {
+            if (isOpen) {
+                calculatePosition();
+            }
+        };
+        window.addEventListener('scroll', handleEvent);
+        return () => {
+            window.removeEventListener('scroll', handleEvent);
+        };
+    }, [calculatePosition, isOpen]);
+    // Отслеживание мутаций anchor элемента
+    react_1.default.useEffect(() => {
+        if (!isOpen || !anchorElement)
+            return;
+        const observer = new MutationObserver(() => {
+            window.requestAnimationFrame(() => {
+                calculatePosition();
+            });
+        });
+        observer.observe(anchorElement, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+        });
+        // eslint-disable-next-line consistent-return
+        return () => {
+            observer.disconnect();
+        };
+    }, [isOpen, anchorElement, calculatePosition]);
+    return {
+        actualPlacement,
+        style,
+        popperRef,
+        isVisible,
+        calculatePosition,
+        getTransformOrigin,
+        setActualPlacement,
+        setStyle,
+        setIsVisible,
+    };
+};
+exports.usePopper = usePopper;
+exports.default = exports.usePopper;

package/Selectbox/index.d.ts

@@ -33,7 +33,7 @@ export interface SelectboxProps<T, Multiple extends boolean | undefined = undefi
     /**
      * Anchor position\
      * \
-     * Default: `auto-start-end`
+     * Default: `bottom`
      */
     readonly anchorPos?: AnchorPos;
     /**
@@ -125,31 +125,31 @@ export interface SelectboxOverrides {
     /**
      * Container element
      */
-    readonly Container?: React.ForwardRefExoticComponent<SelectboxContainerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Container?: React.ComponentType<SelectboxContainerProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Base element
      */
-    readonly Button?: React.ForwardRefExoticComponent<SelectboxButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    readonly Button?: React.ComponentType<SelectboxButtonProps & React.RefAttributes<HTMLButtonElement>>;
     /**
      * Icon
      */
-    readonly Icon?: React.ForwardRefExoticComponent<SelectboxChevronIconProps & React.RefAttributes<SVGElement>>;
+    readonly Icon?: React.ComponentType<SelectboxChevronIconProps & React.RefAttributes<SVGElement>>;
     /**
      * Component for display error text
      */
-    readonly ErrorText?: React.ForwardRefExoticComponent<TextFieldErrorTextProps & React.RefAttributes<HTMLDivElement>>;
+    readonly ErrorText?: React.ComponentType<TextFieldErrorTextProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * label component
      */
-    readonly Label?: React.ForwardRefExoticComponent<TextFieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
+    readonly Label?: React.ComponentType<TextFieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
     /**
      * label asterisk component
      */
-    readonly Asterisk?: React.ForwardRefExoticComponent<TextFieldLabelAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly Asterisk?: React.ComponentType<TextFieldLabelAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * button wrapper component
      */
-    readonly ButtonWrapper?: React.ForwardRefExoticComponent<SelectboxButtonWrapperProps & React.RefAttributes<HTMLDivElement>>;
+    readonly ButtonWrapper?: React.ComponentType<SelectboxButtonWrapperProps & React.RefAttributes<HTMLDivElement>>;
 }
 export type Children<T> = (data: {
     item: T;

package/Selectbox/index.js

@@ -29,7 +29,7 @@ const TextFieldErrorText_1 = __importDefault(require("../TextField/TextFieldErro
 const SelectboxButtonWrapper_1 = __importDefault(require("./SelectboxButtonWrapper"));
 const SelectboxContainer_1 = __importDefault(require("./SelectboxContainer"));
 const Selectbox = react_1.default.forwardRef((props, ref) => {
-    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'auto-start-end', fullWidth = false, children, onChange, selectedItemToString, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, onFocus, requiredAsterisk, error, errorText, notSetLabel = 'Not set' } = props, nativeButtonProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "onFocus", "requiredAsterisk", "error", "errorText", "notSetLabel"]);
+    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom', fullWidth = false, children, onChange, selectedItemToString, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, onFocus, requiredAsterisk, error, errorText, notSetLabel = 'Not set' } = props, nativeButtonProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "onFocus", "requiredAsterisk", "error", "errorText", "notSetLabel"]);
     const menuRef = react_1.default.useRef(null);
     const overridesMap = react_1.default.useMemo(() => ({
         Button: (overrides === null || overrides === void 0 ? void 0 : overrides.Button) || SelectboxButton_1.default,
@@ -117,7 +117,7 @@ const Selectbox = react_1.default.forwardRef((props, ref) => {
                 if (typeof onChange === 'function') {
                     onChange(item);
                 }
-            }, closeOnSelect: multiple ? false : true, onRequestClose: evt => {
+            }, closeOnSelect: !multiple, onRequestClose: evt => {
                 if ((evt === null || evt === void 0 ? void 0 : evt.target) !== anchorElement) {
                     onRequestClose(evt);
                     anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.focus();

package/Surface/SurfaceContent.js

@@ -19,10 +19,8 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
 const StyledContent = styled_1.default.div `
   flex: 1;
-  overflow: auto;
   ${({ $noPadding }) => (typeof $noPadding === 'undefined' || $noPadding === false) &&
     (0, react_2.css) `
-      overflow: visible;
       padding: 1.4rem 1rem 1rem 1rem;
     `}
 

package/Surface/index.d.ts

@@ -39,23 +39,23 @@ export interface SurfaceOverrides {
     /**
      * Surface container component
      */
-    readonly Container?: React.ForwardRefExoticComponent<SurfaceContainerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Container?: React.ComponentType<SurfaceContainerProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Surface header component
      */
-    readonly Header?: React.ForwardRefExoticComponent<SurfaceHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Header?: React.ComponentType<SurfaceHeaderProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Surface subheader component
      */
-    readonly Subheader?: React.ForwardRefExoticComponent<SurfaceSubheaderProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Subheader?: React.ComponentType<SurfaceSubheaderProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Surface content component
      */
-    readonly Content?: React.ForwardRefExoticComponent<SurfaceContentProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Content?: React.ComponentType<SurfaceContentProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Surface footer component
      */
-    readonly Footer?: React.ForwardRefExoticComponent<SurfaceFooterProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Footer?: React.ComponentType<SurfaceFooterProps & React.RefAttributes<HTMLDivElement>>;
 }
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     readonly children: React.ReactNode | React.ReactNode[];

package/Switch/index.d.ts

@@ -58,35 +58,35 @@ export interface SwitchOverrides {
     /**
      * Element container
      */
-    readonly Container?: React.ForwardRefExoticComponent<SwitchContainerProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly Container?: React.ComponentType<SwitchContainerProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * Element toggle
      */
-    readonly ToggleWrapper?: React.ForwardRefExoticComponent<SwitchToggleWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly ToggleWrapper?: React.ComponentType<SwitchToggleWrapperProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * text wrapper
      */
-    readonly TextWrapper?: React.ForwardRefExoticComponent<SwitchTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly TextWrapper?: React.ComponentType<SwitchTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * Dot wrapper
      */
-    readonly Dot?: React.ForwardRefExoticComponent<SwitchDotProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly Dot?: React.ComponentType<SwitchDotProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * Toggle track wrapper
      */
-    readonly Track?: React.ForwardRefExoticComponent<SwitchTrackProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly Track?: React.ComponentType<SwitchTrackProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * error text wrapper
      */
-    readonly ErrorText?: React.ForwardRefExoticComponent<SwitchErrorTextProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly ErrorText?: React.ComponentType<SwitchErrorTextProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * error text wrapper
      */
-    readonly Asterisk?: React.ForwardRefExoticComponent<SwitchAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly Asterisk?: React.ComponentType<SwitchAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * the main cwitch wrapper
      */
-    readonly Wrapper?: React.ForwardRefExoticComponent<SwitchWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly Wrapper?: React.ComponentType<SwitchWrapperProps & React.RefAttributes<HTMLSpanElement>>;
 }
 declare const _default: React.ForwardRefExoticComponent<Omit<SwitchToggleWrapperProps, "onChange" | "disabled" | "checked"> & {
     /**

package/TextArea/index.d.ts

@@ -50,31 +50,31 @@ export interface TextAreaOverrides {
     /**
      * Native `input` component
      */
-    readonly Input?: React.ForwardRefExoticComponent<TextAreaInputProps & React.RefAttributes<HTMLTextAreaElement>>;
+    readonly Input?: React.ComponentType<TextAreaInputProps & React.RefAttributes<HTMLTextAreaElement>>;
     /**
      * Component for display error text
      */
-    readonly ErrorText?: React.ForwardRefExoticComponent<TextFieldErrorTextProps & React.RefAttributes<HTMLDivElement>>;
+    readonly ErrorText?: React.ComponentType<TextFieldErrorTextProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Icons wrapper component
      */
-    readonly IconWrapper?: React.ForwardRefExoticComponent<TextAreaIconWrapperProps & React.RefAttributes<HTMLDivElement>>;
+    readonly IconWrapper?: React.ComponentType<TextAreaIconWrapperProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * input field wrapper component
      */
-    readonly InputWrapper?: React.ForwardRefExoticComponent<TextFieldInputWrapperProps & React.RefAttributes<HTMLDivElement>>;
+    readonly InputWrapper?: React.ComponentType<TextFieldInputWrapperProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * label component
      */
-    readonly Label?: React.ForwardRefExoticComponent<TextFieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
+    readonly Label?: React.ComponentType<TextFieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
     /**
      * label asterisk component
      */
-    readonly Asterisk?: React.ForwardRefExoticComponent<TextFieldLabelAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly Asterisk?: React.ComponentType<TextFieldLabelAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * label component
      */
-    readonly Container?: React.ForwardRefExoticComponent<TextFieldContainerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Container?: React.ComponentType<TextFieldContainerProps & React.RefAttributes<HTMLDivElement>>;
 }
 declare const _default: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/TextField/index.d.ts

@@ -50,31 +50,31 @@ export interface TextFieldOverrides {
     /**
      * Native `input` component
      */
-    readonly Input?: React.ForwardRefExoticComponent<TextFieldInputProps & React.RefAttributes<HTMLInputElement>>;
+    readonly Input?: React.ComponentType<TextFieldInputProps & React.RefAttributes<HTMLInputElement>>;
     /**
      * Component for display error text
      */
-    readonly ErrorText?: React.ForwardRefExoticComponent<TextFieldErrorTextProps & React.RefAttributes<HTMLDivElement>>;
+    readonly ErrorText?: React.ComponentType<TextFieldErrorTextProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Icons wrapper component
      */
-    readonly IconWrapper?: React.ForwardRefExoticComponent<TextFieldIconWrapperProps & React.RefAttributes<HTMLDivElement>>;
+    readonly IconWrapper?: React.ComponentType<TextFieldIconWrapperProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * input field wrapper component
      */
-    readonly InputWrapper?: React.ForwardRefExoticComponent<TextFieldInputWrapperProps & React.RefAttributes<HTMLDivElement>>;
+    readonly InputWrapper?: React.ComponentType<TextFieldInputWrapperProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * label component
      */
-    readonly Label?: React.ForwardRefExoticComponent<TextFieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
+    readonly Label?: React.ComponentType<TextFieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
     /**
      * label asterisk component
      */
-    readonly Asterisk?: React.ForwardRefExoticComponent<TextFieldLabelAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly Asterisk?: React.ComponentType<TextFieldLabelAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * label component
      */
-    readonly Container?: React.ForwardRefExoticComponent<TextFieldContainerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Container?: React.ComponentType<TextFieldContainerProps & React.RefAttributes<HTMLDivElement>>;
 }
 declare const _default: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.7",
+  "version": "0.2.1-alpha.1",
   "description": "UI Kit",
   "repository": {
     "type": "git",