ncore-ui-kit 1.0.0-pre-alpha.0

package/lib/src/components/dateTimePicker/stylesheet.js

@@ -0,0 +1,198 @@
+import { StyleSheet } from "react-native";
+import {} from "./type";
+export const DATE_TIME_PICKER_TYPE_STYLES = {
+    default: {
+        focusBorderColor: "emphasized",
+        borderColor: "emphasized",
+        hintTextIconColor: "mid",
+        placeholderColor: "low",
+        containerColor: "mid",
+        hintTextColor: "mid",
+        titleColor: "high",
+        inputColor: "mid",
+        iconColor: "mid"
+    },
+    danger: {
+        placeholderColor: "dangerLow",
+        hintTextIconColor: "danger",
+        focusBorderColor: "danger",
+        containerColor: "danger",
+        hintTextColor: "danger",
+        borderColor: "danger",
+        titleColor: "danger",
+        inputColor: "danger",
+        iconColor: "danger"
+    },
+    success: {
+        placeholderColor: "successLow",
+        hintTextIconColor: "success",
+        focusBorderColor: "success",
+        containerColor: "success",
+        hintTextColor: "success",
+        borderColor: "success",
+        titleColor: "success",
+        inputColor: "success",
+        iconColor: "success"
+    },
+    warning: {
+        placeholderColor: "warningLow",
+        hintTextIconColor: "warning",
+        focusBorderColor: "warning",
+        containerColor: "warning",
+        hintTextColor: "warning",
+        borderColor: "warning",
+        titleColor: "warning",
+        inputColor: "warning",
+        iconColor: "warning"
+    },
+    info: {
+        placeholderColor: "infoLow",
+        hintTextIconColor: "info",
+        focusBorderColor: "info",
+        containerColor: "info",
+        hintTextColor: "info",
+        borderColor: "info",
+        titleColor: "info",
+        inputColor: "info",
+        iconColor: "info"
+    },
+    question: {
+        focusBorderColor: "emphasized",
+        borderColor: "emphasized",
+        hintTextIconColor: "mid",
+        placeholderColor: "low",
+        containerColor: "mid",
+        hintTextColor: "mid",
+        titleColor: "mid",
+        inputColor: "mid",
+        iconColor: "mid"
+    }
+};
+export const getDateTimePickerType = ({ type }) => {
+    const currentType = DATE_TIME_PICKER_TYPE_STYLES[type];
+    return currentType;
+};
+const stylesheet = StyleSheet.create({
+    container: {
+        flexDirection: "column",
+        boxSizing: "border-box"
+    },
+    contentContainer: {
+        boxSizing: "border-box",
+        flexDirection: "row",
+        borderStyle: "solid",
+        alignItems: "center",
+        position: "relative",
+        minWidth: 250
+    },
+    content: {
+        flexShrink: 1,
+        width: "100%",
+        flex: 1
+    },
+    contentText: {
+        minHeight: 20
+    },
+    cleanButton: {
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "center",
+        zIndex: 99
+    },
+    titleContainer: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    title: {},
+    icon: {
+        justifyContent: "center",
+        alignContent: "center",
+        alignItems: "center",
+        zIndex: 99
+    },
+    required: {},
+    hintTextIcon: {},
+    hintText: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    subTitle: {},
+    overlay: {
+        position: "absolute",
+        zIndex: 98,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    },
+    rightIcon: {
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "center",
+        zIndex: 99
+    }
+});
+export const useStyles = ({ spreadBehaviour, inlineSpaces, currentType, isDisabled, radiuses, isActive, borders, colors, spaces, type }) => {
+    const styleType = type === "danger" ? "error" : type === "question" ? "neutral" : type;
+    const styles = {
+        container: {},
+        contentContainer: {
+            backgroundColor: colors.content.container[currentType.containerColor],
+            borderColor: colors.content.container[currentType.containerColor],
+            paddingBottom: spaces.spacingMd,
+            paddingRight: spaces.spacingMd,
+            borderRadius: radiuses.actions,
+            paddingLeft: spaces.spacingMd,
+            paddingTop: spaces.spacingMd,
+            borderWidth: borders.line
+        },
+        content: {},
+        contentText: {},
+        cleanButton: {
+            marginLeft: spaces.spacingSm
+        },
+        titleContainer: {
+            marginBottom: spaces.spacingSm
+        },
+        title: {},
+        icon: {
+            marginRight: spaces.spacingSm
+        },
+        required: {
+            marginRight: inlineSpaces.required
+        },
+        hintTextIcon: {
+            marginRight: spaces.spacingXs
+        },
+        hintText: {
+            marginTop: spaces.spacingSm
+        },
+        subTitle: {
+            marginLeft: inlineSpaces.subTitle
+        },
+        overlay: {
+            borderRadius: radiuses.actions - 1
+        },
+        rightIcon: {
+            marginLeft: spaces.spacingSm
+        }
+    };
+    if (isDisabled) {
+        const disableStyleType = styleType === "default" ? "neutral" : styleType;
+        styles.overlay.backgroundColor = colors.system.state.overlay.disabled[disableStyleType];
+        styles.container.borderColor = colors.system.state.overlay.disabled[disableStyleType];
+    }
+    if (spreadBehaviour === "baseline") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.width = "auto";
+    }
+    if (spreadBehaviour === "stretch") {
+        styles.container.justifyContent = "center";
+        styles.container.width = "100%";
+    }
+    if (isActive) {
+        styles.contentContainer.borderColor = colors.content.border.emphasized;
+    }
+    return styles;
+};
+export default stylesheet;

package/lib/src/components/dateTimePicker/type.js

@@ -0,0 +1,3 @@
+import {} from "react-native";
+import {} from "../../types";
+;

package/lib/src/components/dateTimeSheet/index.js

@@ -0,0 +1,154 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { TouchableOpacity, View } from "react-native";
+import stylesheet, { useStyles } from "./stylesheet";
+import { NCoreUIKitLocalize, NCoreUIKitTheme } from "../../core/hooks";
+import MonthSelector from "../monthSelector";
+import TimeSelector from "../timeSelector";
+import YearSelector from "../yearSelector";
+import DateSelector from "../dateSelector";
+import BottomSheet from "../bottomSheet";
+import CheckBox from "../checkBox";
+import Loading from "../loading";
+import Button from "../button";
+import Text from "../text";
+const DateTimeSheet = ({ isTimeSelectWorksWithCenterWhenTimePicker, dateCalendarType: dateCalendarTypeProp, multipleSelectMinimumRequiredDayCount, localeBasedFirstDayOfWeek = true, multipleSelectMinimumRequireMS, isShowTodayIndicator = true, isShowCalenderChangerTool, dayOfWeekLength = "short", LoadingIconComponentProp, multipleSelectMaximumMS, multipleSelectDayLimit, monthOfYearLengthType, selectMultipleObject, isWorkWithRealtime, isShowTools = true, isWorkWithSeconds, dateTimePickerKey, bottomSheetProps, bottomSheetRef, customLocalize, selectObject, customTheme, setIsActive, pickerType, dateRange, maxChoice, minChoice, isLoading, isActive, dateRule, variant, maxDate, minDate, cancel, clean, title, date, ok }) => {
+    const { radiuses, borders, spaces, colors } = NCoreUIKitTheme.useContext(customTheme);
+    const { localize } = NCoreUIKitLocalize.useContext(customLocalize);
+    const [isSheetContentReady, setIsSheetContentReady] = useState(false);
+    const [dateCalendarType, setDateCalendarType] = useState(dateCalendarTypeProp ?? "day");
+    const monthCalendarRef = useRef(null);
+    const yearCalendarRef = useRef(null);
+    const dayCalendarRef = useRef(null);
+    const { calendarChangerToolContainer: calendarChangerToolContainerDynamicStyle, calendarChangerToolButton: calendarChangerToolButtonDynamicStyle, loadingContainer: loadingContainerDynamicStyle, contentContainer: contentContainerDynamicStyle, headerContainer: headerContainerDynamicStyle, bottomContainer: bottomContainerDynamicStyle, toolsContainer: toolsContainerDynamicStyle, cancelButton: cancelButtonDynamicStyle, headerTitle: headerTitleDynamicStyle, okButton: okButtonDynamicStyle } = useStyles({
+        radiuses,
+        borders,
+        spaces,
+        colors
+    });
+    const renderCalenderChangerTool = () => {
+        if (!isShowCalenderChangerTool) {
+            return null;
+        }
+        if (dateCalendarTypeProp) {
+            return null;
+        }
+        return _jsxs(View, { style: [
+                stylesheet.calendarChangerToolContainer,
+                calendarChangerToolContainerDynamicStyle
+            ], children: [_jsx(TouchableOpacity, { style: [
+                        stylesheet.calendarChangerToolButton,
+                        calendarChangerToolButtonDynamicStyle,
+                        dateCalendarType === "day" ? {
+                            backgroundColor: colors.content.container.primary
+                        } : null
+                    ], onPress: () => {
+                        setDateCalendarType("day");
+                    }, children: _jsx(Text, { color: dateCalendarType === "day" ? "onPrimary" : undefined, children: localize("daily") }) }), _jsx(TouchableOpacity, { style: [
+                        stylesheet.calendarChangerToolButton,
+                        calendarChangerToolButtonDynamicStyle,
+                        dateCalendarType === "month" ? {
+                            backgroundColor: colors.content.container.primary
+                        } : null
+                    ], onPress: () => {
+                        setDateCalendarType("month");
+                    }, children: _jsx(Text, { color: dateCalendarType === "month" ? "onPrimary" : undefined, children: localize("monthly") }) }), _jsx(TouchableOpacity, { style: [
+                        stylesheet.calendarChangerToolButton,
+                        calendarChangerToolButtonDynamicStyle,
+                        dateCalendarType === "year" ? {
+                            backgroundColor: colors.content.container.primary
+                        } : null
+                    ], onPress: () => {
+                        setDateCalendarType("year");
+                    }, children: _jsx(Text, { color: dateCalendarType === "year" ? "onPrimary" : undefined, children: localize("yearly") }) })] });
+    };
+    const renderDateCalendar = () => {
+        if (pickerType === "time") {
+            return null;
+        }
+        if (dateCalendarType === "month") {
+            return _jsx(MonthSelector, { multipleSelectMinimumRequiredDayCount: multipleSelectMinimumRequiredDayCount, setIsSheetContentReady: setIsSheetContentReady, multipleSelectDayLimit: multipleSelectDayLimit, monthOfYearLengthType: monthOfYearLengthType, selectMultipleObject: selectMultipleObject, isShowTodayIndicator: isShowTodayIndicator, selectObject: selectObject, ref: monthCalendarRef, dateRange: dateRange, maxDate: maxDate, minDate: minDate, variant: variant, date: date });
+        }
+        if (dateCalendarType === "year") {
+            return _jsx(YearSelector, { multipleSelectMinimumRequiredDayCount: multipleSelectMinimumRequiredDayCount, setIsSheetContentReady: setIsSheetContentReady, multipleSelectDayLimit: multipleSelectDayLimit, selectMultipleObject: selectMultipleObject, isShowTodayIndicator: isShowTodayIndicator, selectObject: selectObject, dateRange: dateRange, ref: yearCalendarRef, maxDate: maxDate, minDate: minDate, variant: variant, date: date });
+        }
+        return _jsx(DateSelector, { multipleSelectMinimumRequiredDayCount: multipleSelectMinimumRequiredDayCount, localeBasedFirstDayOfWeek: localeBasedFirstDayOfWeek, setIsSheetContentReady: setIsSheetContentReady, multipleSelectDayLimit: multipleSelectDayLimit, selectMultipleObject: selectMultipleObject, isShowTodayIndicator: isShowTodayIndicator, dayOfWeekLength: dayOfWeekLength, selectObject: selectObject, dateRange: dateRange, ref: dayCalendarRef, maxDate: maxDate, minDate: minDate, variant: variant, date: date });
+    };
+    const renderBottomSheetContent = () => {
+        if (isLoading) {
+            return _jsx(View, { style: [
+                    stylesheet.loadingContainer,
+                    loadingContainerDynamicStyle
+                ], children: LoadingIconComponentProp ? _jsx(LoadingIconComponentProp, { color: "emphasized", size: 20 }) : _jsx(Loading, {}) });
+        }
+        return _jsxs(View, { style: [
+                stylesheet.contentContainer,
+                contentContainerDynamicStyle
+            ], children: [renderCalenderChangerTool(), renderDateCalendar(), pickerType === "date" ? null : _jsx(TimeSelector, { isTimeSelectWorksWithCenterWhenTimePicker: isTimeSelectWorksWithCenterWhenTimePicker, multipleSelectMinimumRequireMS: multipleSelectMinimumRequireMS, multipleSelectMaximumMS: multipleSelectMaximumMS, setIsSheetContentReady: setIsSheetContentReady, selectMultipleObject: selectMultipleObject, isWorkWithSeconds: isWorkWithSeconds, selectObject: selectObject, pickerType: pickerType, dateRange: dateRange, maxDate: maxDate, minDate: minDate, variant: variant, date: date })] });
+    };
+    const renderTools = () => {
+        if (!isShowTools) {
+            return null;
+        }
+        if (minChoice && maxChoice !== -1) {
+            return null;
+        }
+        let isAnySelected = false;
+        if (variant === "single" && date) {
+            isAnySelected = true;
+        }
+        if (variant === "range" && dateRange && (dateRange.start || dateRange.end)) {
+            isAnySelected = true;
+        }
+        if (variant === "rrule" && dateRule) {
+            isAnySelected = true;
+        }
+        return _jsxs(View, { style: [
+                stylesheet.toolsContainer,
+                toolsContainerDynamicStyle
+            ], children: [!minChoice ? _jsx(CheckBox, { isChecked: isAnySelected ? "checked" : null, title: localize("clean-selection"), spreadBehaviour: "free", onPress: () => {
+                        clean();
+                    } }) : null, _jsx(Button, { onPress: () => {
+                        if (monthCalendarRef.current)
+                            monthCalendarRef.current.changeCurrentYear(new Date());
+                        if (yearCalendarRef.current)
+                            yearCalendarRef.current.changeCurrentView(new Date());
+                        if (dayCalendarRef.current)
+                            dayCalendarRef.current.changeCurrentMonth(new Date());
+                    }, title: localize("go-to-today"), spreadBehaviour: "free", size: "small" })] });
+    };
+    const renderBottomSheetHeader = () => {
+        return _jsxs(View, { style: [
+                stylesheet.headerContainer,
+                headerContainerDynamicStyle
+            ], children: [title ? _jsx(Text, { variant: "titleMediumSize", style: [
+                        headerTitleDynamicStyle
+                    ], children: title }) : null, renderTools()] });
+    };
+    const renderBottomSheetBottom = () => {
+        if (isWorkWithRealtime) {
+            return null;
+        }
+        return _jsxs(View, { style: [
+                stylesheet.bottomContainer,
+                bottomContainerDynamicStyle
+            ], children: [_jsx(Button, { title: localize("cancel"), spreadBehaviour: "stretch", variant: "outline", type: "neutral", onPress: () => {
+                        cancel();
+                    }, style: {
+                        ...cancelButtonDynamicStyle
+                    } }), _jsx(Button, { spreadBehaviour: "stretch", title: localize("ok"), onPress: () => {
+                        ok();
+                    }, style: {
+                        ...okButtonDynamicStyle
+                    } })] });
+    };
+    return _createElement(BottomSheet, { ...bottomSheetProps, key: `${dateTimePickerKey}-bottomsheet`, isContentReady: isSheetContentReady, customKey: dateTimePickerKey, ref: bottomSheetRef, isAutoHeight: true, isActive: isActive, renderBottom: () => {
+            return renderBottomSheetBottom();
+        }, renderHeader: () => {
+            return renderBottomSheetHeader();
+        }, onClosed: () => {
+            setIsActive(false);
+        } }, renderBottomSheetContent());
+};
+export default DateTimeSheet;

package/lib/src/components/dateTimeSheet/stylesheet.js

@@ -0,0 +1,81 @@
+import { StyleSheet } from "react-native";
+import {} from "./type";
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        flexDirection: "column"
+    },
+    headerContainer: {
+        flexDirection: "column",
+        width: "100%"
+    },
+    bottomContainer: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    loadingContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        flex: 1
+    },
+    itemContentContainer: {
+        flex: 1
+    },
+    toolsContainer: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    moreLoadingContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%"
+    },
+    calendarChangerToolContainer: {
+        alignSelf: "baseline",
+        flexDirection: "row"
+    },
+    calendarChangerToolButton: {}
+});
+export const useStyles = ({ radiuses, borders, spaces, colors }) => {
+    const styles = {
+        contentContainer: {
+            paddingVertical: spaces.spacingSm
+        },
+        headerContainer: {
+            marginBottom: spaces.spacingSm
+        },
+        headerTitle: {},
+        bottomContainer: {
+            marginTop: spaces.spacingSm,
+            padding: spaces.spacingSm
+        },
+        cancelButton: {
+            marginRight: spaces.spacingSm
+        },
+        okButton: {
+            marginLeft: spaces.spacingSm
+        },
+        loadingContainer: {
+            padding: spaces.spacingMd
+        },
+        toolsContainer: {
+            marginTop: spaces.spacingSm
+        },
+        moreLoadingContainer: {
+            padding: spaces.spacingSm
+        },
+        calendarChangerToolContainer: {
+            borderColor: colors.content.border.subtle,
+            marginBottom: spaces.spacingSm,
+            borderRadius: radiuses.actions,
+            borderWidth: borders.line
+        },
+        calendarChangerToolButton: {
+            paddingHorizontal: spaces.spacingSm,
+            paddingVertical: spaces.spacingSm,
+            borderRadius: radiuses.actions
+        }
+    };
+    return styles;
+};
+export default stylesheet;

package/lib/src/components/dateTimeSheet/type.js

@@ -0,0 +1,2 @@
+import {} from "../../types";
+;

package/lib/src/components/dialog/index.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImperativeHandle, forwardRef, useEffect, useRef } from "react";
+import { Animated, Easing, View } from "react-native";
+import stylesheet, { useStyles } from "./stylesheet";
+import { NCoreUIKitLocalize, NCoreUIKitTheme } from "../../core/hooks";
+import { X as XIcon } from "lucide-react-native";
+import Button from "../button";
+import Modal from "../modal";
+import Text from "../text";
+import { uuid } from "../../utils";
+const Dialog = ({ bottomContentContainerStyle, contentJustify = "centered", closeAnimationDelay = 100, openAnimationDelay = 100, contentContainerStyle, bottomContainerStyle, headerContainerStyle, secondaryButtonStyle, secondaryButtonProps, primaryButtonStyle, primaryButtonProps, closeIconProps = {
+    color: "low",
+    size: 22
+}, isVisible = false, withModal = true, headerComponent, bottomComponent, onOverlayPress, variant = "ok", modalProps, id: outID, onClosed, children, content, style, title }, ref) => {
+    const { radiuses, colors, spaces } = NCoreUIKitTheme.useContext();
+    const { localize } = NCoreUIKitLocalize.useContext();
+    const id = useRef(outID ? outID : uuid());
+    const { bottomContentContainer: bottomContentContainerDynamicStyle, headerContainer: headerContainerDynamicStyle, bottomContainer: bottomContainerDynamicStyle, primaryButton: primaryButtonDynamicStyle, contentText: contentTextDynamicStyle, headerTitle: headerTitleDynamicStyle, container: containerDynamicStyle, closeIcon: closeIconDynamicStyle, content: contentDynamicStyle } = useStyles({
+        contentJustify,
+        isVisible,
+        radiuses,
+        variant,
+        colors,
+        spaces
+    });
+    const scaleAnim = useRef(new Animated.Value(0)).current;
+    const modalRef = useRef(null);
+    useEffect(() => {
+        if (isVisible) {
+            Animated.timing(scaleAnim, {
+                duration: openAnimationDelay,
+                useNativeDriver: true,
+                easing: Easing.linear,
+                toValue: 1
+            }).start();
+        }
+    }, [isVisible]);
+    useImperativeHandle(ref, () => ({
+        closeAnimation
+    }), []);
+    const closeAnimation = (_onClosed) => {
+        Animated.timing(scaleAnim, {
+            duration: closeAnimationDelay,
+            useNativeDriver: true,
+            easing: Easing.linear,
+            toValue: 0
+        }).start(({ finished }) => {
+            if (finished) {
+                if (_onClosed)
+                    _onClosed({
+                        id: id.current
+                    });
+                if (onClosed)
+                    onClosed({
+                        id: id.current
+                    });
+                if (modalRef && modalRef.current)
+                    modalRef.current.closeAnimation();
+            }
+        });
+    };
+    const renderHeader = () => {
+        return _jsx(View, { style: [
+                headerContainerStyle,
+                stylesheet.headerContainer,
+                headerContainerDynamicStyle
+            ], children: headerComponent || _jsx(Text, { style: [
+                    stylesheet.headerTitle,
+                    headerTitleDynamicStyle
+                ], variant: "titleLargeSize", color: "mid", children: title }) });
+    };
+    const renderBottom = () => {
+        if (variant === "info") {
+            return null;
+        }
+        return _jsx(View, { style: [
+                bottomContainerStyle,
+                stylesheet.bottomContainer,
+                bottomContainerDynamicStyle
+            ], children: bottomComponent || _jsxs(View, { style: [
+                    bottomContentContainerStyle,
+                    stylesheet.bottomContentContainer,
+                    bottomContentContainerDynamicStyle
+                ], children: [secondaryButton(), primaryButton()] }) });
+    };
+    const secondaryButton = () => {
+        if (variant !== "yes-no") {
+            return null;
+        }
+        return _jsx(Button, { type: "neutral", ...secondaryButtonProps, onPress: () => {
+                if (secondaryButtonProps?.onPress)
+                    secondaryButtonProps.onPress({
+                        closeAnimation: (onClosed) => {
+                            closeAnimation(onClosed);
+                        }
+                    });
+            }, spreadBehaviour: contentJustify === "centered" ? "stretch" : "free", title: secondaryButtonProps?.title || localize("cancel"), style: secondaryButtonStyle, variant: "outline" });
+    };
+    const primaryButton = () => {
+        return _jsx(Button, { type: "primary", size: "medium", ...primaryButtonProps, spreadBehaviour: contentJustify === "centered" ? "stretch" : "free", onPress: () => {
+                if (primaryButtonProps?.onPress)
+                    primaryButtonProps?.onPress({
+                        closeAnimation: (onClosed) => {
+                            closeAnimation(onClosed);
+                        }
+                    });
+            }, title: primaryButtonProps?.title || localize("ok"), style: [
+                primaryButtonStyle,
+                stylesheet.primaryButton,
+                primaryButtonDynamicStyle
+            ], variant: "filled" });
+    };
+    const renderCloseIcon = () => {
+        if (variant !== "info") {
+            return null;
+        }
+        if (contentJustify === "centered") {
+            return null;
+        }
+        return _jsx(Button, { onPress: () => {
+                if (onOverlayPress)
+                    onOverlayPress({
+                        closeAnimation: (onClosed) => {
+                            closeAnimation(onClosed);
+                        }
+                    });
+            }, icon: () => _jsx(XIcon, { color: closeIconProps.color, size: closeIconProps.size }), style: [
+                stylesheet.closeIcon,
+                closeIconDynamicStyle
+            ], isCustomPadding: true, variant: "ghost" });
+    };
+    const renderDialog = () => {
+        if (!isVisible) {
+            return null;
+        }
+        return _jsxs(Animated.View, { style: [
+                style,
+                stylesheet.container,
+                containerDynamicStyle,
+                {
+                    transform: [{
+                            scale: scaleAnim
+                        }]
+                }
+            ], children: [renderCloseIcon(), renderHeader(), _jsx(View, { style: [
+                        contentContainerStyle,
+                        stylesheet.content,
+                        contentDynamicStyle
+                    ], children: children || _jsx(Text, { style: [
+                            stylesheet.contentText,
+                            contentTextDynamicStyle
+                        ], variant: "bodyLargeSize", children: content }) }), renderBottom()] });
+    };
+    if (!isVisible) {
+        return null;
+    }
+    return withModal ? _jsx(Modal, { ...modalProps, id: `${id.current}-modal`, ref: modalRef, onOverlayPress: () => {
+            if (onOverlayPress)
+                onOverlayPress({
+                    closeAnimation: (onClosed) => {
+                        closeAnimation(onClosed);
+                    }
+                });
+        }, children: renderDialog() }) : renderDialog();
+};
+export default forwardRef(Dialog);