mautourco-components 0.1.2 → 0.2.1

package/dist/components/molecules/LocationDropdown/LocationDropdown.js

@@ -0,0 +1,120 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import '../../../styles/components/molecule/location-dropdown.css';
+var LocationDropdown = function (_a) {
+    var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.groups, groups = _c === void 0 ? [] : _c, _d = _a.selectedValue, selectedValue = _d === void 0 ? null : _d, _e = _a.placeholder, placeholder = _e === void 0 ? 'Select a location' : _e, label = _a.label, onSelectionChange = _a.onSelectionChange, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.className, className = _h === void 0 ? '' : _h, _j = _a.type, type = _j === void 0 ? 'airport-port' : _j, _k = _a.maxHeight, maxHeight = _k === void 0 ? 240 : _k, _l = _a.direction, direction = _l === void 0 ? undefined : _l, _m = _a.showGroupTitles, showGroupTitles = _m === void 0 ? true : _m;
+    var _o = useState(false), isOpen = _o[0], setIsOpen = _o[1];
+    var dropdownRef = useRef(null);
+    // Close dropdown when clicking outside
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    var handleToggleDropdown = function () {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+        }
+    };
+    var handleOptionSelect = function (option) {
+        if (disabled)
+            return;
+        var locationData = {
+            id: option.id,
+            locationName: option.label,
+        };
+        onSelectionChange(locationData);
+        setIsOpen(false);
+    };
+    var getSelectedOption = function () {
+        if (!selectedValue)
+            return null;
+        // Search in flat options
+        var flatOption = options.find(function (opt) { return opt.id === selectedValue; });
+        if (flatOption)
+            return flatOption;
+        // Search in groups
+        for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
+            var group = groups_1[_i];
+            var groupOption = group.options.find(function (opt) { return opt.id === selectedValue; });
+            if (groupOption)
+                return groupOption;
+        }
+        return null;
+    };
+    var getIconForType = function (optionType) {
+        switch (optionType) {
+            case 'airport':
+                return 'plane';
+            case 'port':
+                return 'ship';
+            case 'accommodation':
+                return 'map-pin';
+            default:
+                return 'map-pin';
+        }
+    };
+    var getInputIcon = function () {
+        if (selectedOption) {
+            // For airports, show arrival/departure based on direction
+            console.log({ direction: direction });
+            if (selectedOption.type === 'airport' && direction) {
+                return direction === 'pickup' ? 'arrival' : 'departure';
+            }
+            return getIconForType(selectedOption.type);
+        }
+        // Use arrival/departure icons based on direction for pickup/dropoff types
+        if ((type === 'pickup-dropoff' || type === 'airport-port') && direction) {
+            return direction === 'pickup' ? 'arrival' : 'departure';
+        }
+        return 'map-pin';
+    };
+    var getOptionIcon = function (option, isSelected) {
+        // For selected airports, show arrival/departure based on direction
+        if (isSelected && option.type === 'airport' && direction) {
+            return direction === 'pickup' ? 'arrival' : 'departure';
+        }
+        // For other types (port, accommodation), show their specific icon
+        return getIconForType(option.type);
+    };
+    var getDropdownState = function () {
+        if (disabled)
+            return 'disabled';
+        if (error)
+            return 'error';
+        if (isOpen)
+            return 'open';
+        if (selectedValue)
+            return 'selected';
+        return 'default';
+    };
+    var selectedOption = getSelectedOption();
+    var displayText = selectedOption ? selectedOption.label : placeholder;
+    // Prepare all options (flat or grouped)
+    var allOptions = groups.length > 0 ? groups : [{ id: 'default', label: '', options: options }];
+    return (_jsxs("div", __assign({ ref: dropdownRef, className: "location-dropdown location-dropdown--".concat(type, " ").concat(className) }, { children: [label && (_jsx("div", __assign({ className: "location-dropdown__label" }, { children: _jsx(Text, __assign({ size: "sm", variant: "medium" }, { children: label })) }))), _jsxs("div", __assign({ className: "location-dropdown__input location-dropdown__input--".concat(getDropdownState()), onClick: handleToggleDropdown }, { children: [_jsxs("div", __assign({ className: "location-dropdown__input-content" }, { children: [_jsx(Icon, { name: getInputIcon(), size: "sm", className: "location-dropdown__input-icon ".concat(!selectedOption ? 'location-dropdown__input-icon--placeholder' : '') }), _jsx("span", __assign({ className: "location-dropdown__input-text ".concat(!selectedOption ? 'location-dropdown__input-text--placeholder' : '') }, { children: displayText }))] })), _jsx(Icon, { name: "chevron-down", size: "sm", className: "location-dropdown__input-chevron" })] })), isOpen && (_jsx("div", __assign({ className: "location-dropdown__panel" }, { children: _jsx("div", __assign({ className: "location-dropdown__content", style: { maxHeight: "".concat(maxHeight, "px") } }, { children: _jsx("div", __assign({ className: "location-dropdown__options-wrapper" }, { children: allOptions.map(function (group, groupIndex) { return (_jsxs("div", __assign({ className: "location-dropdown__group" }, { children: [showGroupTitles && group.label && groups.length > 0 && (_jsxs(_Fragment, { children: [groupIndex > 0 && _jsx("div", { className: "location-dropdown__divider" }), _jsx("div", __assign({ className: "location-dropdown__group-header" }, { children: _jsx(Text, __assign({ size: "xs", variant: "bold" }, { children: group.label })) }))] })), _jsx("div", __assign({ className: "location-dropdown__group-options" }, { children: group.options.map(function (option) {
+                                        var isSelected = selectedValue === option.id;
+                                        var isDisabled = option.disabled || disabled;
+                                        return (_jsxs("div", __assign({ className: "location-dropdown__option ".concat(isSelected ? 'location-dropdown__option--selected' : '', " ").concat(isDisabled ? 'location-dropdown__option--disabled' : ''), onClick: function () { return !isDisabled && handleOptionSelect(option); } }, { children: [_jsx(Icon, { name: getOptionIcon(option, isSelected), size: "sm", className: "location-dropdown__option-icon" }), _jsx("span", __assign({ className: "location-dropdown__option-text" }, { children: option.label }))] }), option.id));
+                                    }) }))] }), group.id)); }) })) })) })))] })));
+};
+export default LocationDropdown;

package/dist/components/molecules/LocationDropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './LocationDropdown';
+export type { LocationDropdownProps, LocationOption, LocationGroup } from './LocationDropdown';

package/dist/components/molecules/LocationDropdown/index.js

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

package/dist/components/molecules/RatingTab/RatingTab.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+export interface RatingTabProps {
+    /**
+     * Label displayed next to the checkbox (e.g. "5 stars").
+     */
+    label: string;
+    /**
+     * Rating value displayed in the star row (0–max, typically 1–5).
+     */
+    ratingValue: number;
+    /**
+     * Maximum number of stars.
+     */
+    maxStars?: number;
+    /**
+     * Whether this tab is selected.
+     */
+    checked?: boolean;
+    /**
+     * Whether the tab is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Called when the selection state changes.
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * Additional CSS classes for the container.
+     */
+    className?: string;
+}
+/**
+ * RatingTab molecule
+ *
+ * Combines a checkbox-like selector, a label and the RatingStar atom.
+ * Used for filters like "5 stars", "4 stars", etc.
+ */
+declare const RatingTab: React.FC<RatingTabProps>;
+export default RatingTab;

package/dist/components/molecules/RatingTab/RatingTab.js

@@ -0,0 +1,41 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Check from '../../atoms/Icon/icons/Check';
+import { Text } from '../../atoms/Typography/Typography';
+import RatingStar from '../../atoms/RatingStar/RatingStar';
+/**
+ * RatingTab molecule
+ *
+ * Combines a checkbox-like selector, a label and the RatingStar atom.
+ * Used for filters like "5 stars", "4 stars", etc.
+ */
+var RatingTab = function (_a) {
+    var label = _a.label, ratingValue = _a.ratingValue, _b = _a.maxStars, maxStars = _b === void 0 ? 5 : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, onChange = _a.onChange, _e = _a.className, className = _e === void 0 ? '' : _e;
+    var handleToggle = function () {
+        if (disabled || !onChange)
+            return;
+        onChange(!checked);
+    };
+    var handleKeyDown = function (event) {
+        if (disabled || !onChange)
+            return;
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            onChange(!checked);
+        }
+    };
+    var stateClass = disabled ? 'rating-tab--disabled' : checked ? 'rating-tab--active' : 'rating-tab--default';
+    var containerClasses = ['rating-tab', stateClass, className].filter(Boolean).join(' ');
+    return (_jsxs("div", __assign({ className: containerClasses, role: "checkbox", "aria-checked": checked, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onClick: handleToggle, onKeyDown: handleKeyDown }, { children: [_jsxs("div", __assign({ className: "rating-tab__left" }, { children: [_jsx("div", __assign({ className: "rating-tab__checkbox" }, { children: checked && _jsx(Check, { size: "sm", className: "rating-tab__checkbox-icon" }) })), _jsx(Text, __assign({ size: "sm", className: "rating-tab__label" }, { children: label }))] })), _jsx(RatingStar, { value: ratingValue, max: maxStars })] })));
+};
+export default RatingTab;

package/dist/components/molecules/TabGroup/TabGroup.d.ts

@@ -0,0 +1,17 @@
+import { TabProps } from '../../atoms/Tab/Tab';
+export type TabItem<T = string> = {
+    label: string;
+    value: T;
+    disabled?: boolean;
+};
+export interface TabGroupProps<T = string> {
+    items: TabItem<T>[];
+    size?: TabProps['size'];
+    variant?: TabProps['variant'];
+    active?: T;
+    defaultActive?: T;
+    onChange?: (value: T) => void;
+    className?: string;
+}
+export declare function TabGroup<T = string>({ items, size, variant, active, defaultActive, onChange, className, }: TabGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export default TabGroup;

package/dist/components/molecules/TabGroup/TabGroup.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import Tab from '../../atoms/Tab/Tab';
+export function TabGroup(_a) {
+    var _b;
+    var items = _a.items, _c = _a.size, size = _c === void 0 ? 'lg' : _c, _d = _a.variant, variant = _d === void 0 ? 'inline' : _d, active = _a.active, defaultActive = _a.defaultActive, onChange = _a.onChange, _e = _a.className, className = _e === void 0 ? '' : _e;
+    var _f = React.useState(defaultActive !== null && defaultActive !== void 0 ? defaultActive : (_b = items[0]) === null || _b === void 0 ? void 0 : _b.value), internalActive = _f[0], setInternalActive = _f[1];
+    var isControlled = active !== undefined;
+    var current = (isControlled ? active : internalActive);
+    var handleClick = function (item) {
+        if (item.disabled)
+            return;
+        if (!isControlled)
+            setInternalActive(item.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(item.value);
+    };
+    return (_jsx("div", __assign({ className: "tab-group flex ".concat(className), role: "tablist" }, { children: items.map(function (it) { return (_jsx(Tab, __assign({ isActive: current === it.value, size: size, variant: variant, disabled: it.disabled, onClick: function () { return handleClick(it); } }, { children: it.label }), String(it.value))); }) })));
+}
+export default TabGroup;

package/dist/components/organisms/CardContainer/CardContainer.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+export type CardContainerSpacing = 'compact' | 'normal' | 'relaxed' | 'chill';
+export interface CardContainerProps {
+    /**
+     * The content to be displayed inside the card container
+     */
+    children: React.ReactNode;
+    /**
+     * Spacing variant for the card container padding
+     * - compact: 8px padding
+     * - normal: 12px padding
+     * - relaxed: 16px padding
+     * - chill: 24px padding
+     */
+    spacing?: CardContainerSpacing;
+    /**
+     * Additional CSS classes to apply to the card container
+     */
+    className?: string;
+    /**
+     * Optional click handler
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Optional data attributes for testing or tracking
+     */
+    'data-testid'?: string;
+}
+/**
+ * CardContainer is a versatile UI element that groups related content,
+ * such as text, images, buttons, or interactive elements.
+ *
+ * It supports different spacing variants to control the visual density
+ * and padding of the container.
+ */
+export declare const CardContainer: React.FC<CardContainerProps>;
+export default CardContainer;

package/dist/components/organisms/CardContainer/CardContainer.js

@@ -0,0 +1,27 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * CardContainer is a versatile UI element that groups related content,
+ * such as text, images, buttons, or interactive elements.
+ *
+ * It supports different spacing variants to control the visual density
+ * and padding of the container.
+ */
+export var CardContainer = function (_a) {
+    var children = _a.children, _b = _a.spacing, spacing = _b === void 0 ? 'normal' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, onClick = _a.onClick, testId = _a["data-testid"];
+    var baseClass = 'card-container';
+    var spacingClass = "card-container--spacing-".concat(spacing);
+    var classes = [baseClass, spacingClass, className].filter(Boolean).join(' ');
+    return (_jsx("div", __assign({ className: classes, onClick: onClick, "data-testid": testId }, { children: children })));
+};
+export default CardContainer;

package/dist/components/organisms/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { DateTimeProps } from "../../molecules/Calendar/DateTime";
+export interface DateTimePickerProps extends Partial<DateTimeProps> {
+    placeholder?: string;
+    disabled?: boolean;
+    onValueChange?: (value: string | string[]) => void;
+    /** Whether the calendar icon has full bg*/
+    iconBGFull?: boolean;
+    /** Position of the calendar icon: left or right */
+    iconPosition?: "left" | "right";
+    /** Show chevron on the right when icon is on the left */
+    showChevron?: boolean;
+}
+declare const DateTimePicker: React.FC<DateTimePickerProps>;
+export default DateTimePicker;

package/dist/components/organisms/DateTimePicker/DateTimePicker.js

@@ -0,0 +1,66 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import CalendarInput from "../../molecules/Calendar/CalendarInput";
+import DateTime from "../../molecules/Calendar/DateTime";
+import { Popover, PopoverTrigger, PopoverContent } from "../../ui/popover";
+import { format } from "date-fns";
+var formatDateRange = function (dateRange) {
+    var _a;
+    if (!dateRange || !dateRange.from)
+        return "";
+    var from = dateRange.from;
+    var to = (_a = dateRange.to) !== null && _a !== void 0 ? _a : dateRange.from;
+    if (+from === +to)
+        return format(from, "dd/MM/yyyy");
+    return "".concat(format(from, "dd/MM/yyyy"), " - ").concat(format(to, "dd/MM/yyyy"));
+};
+var DateTimePicker = function (_a) {
+    var _b = _a.placeholder, placeholder = _b === void 0 ? "Select date" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.mode, mode = _d === void 0 ? "both" : _d, _e = _a.selectionMode, selectionMode = _e === void 0 ? "range" : _e, _f = _a.numberOfMonths, numberOfMonths = _f === void 0 ? 2 : _f, _g = _a.disableBeforeToday, disableBeforeToday = _g === void 0 ? true : _g, _h = _a.disableToday, disableToday = _h === void 0 ? false : _h, onValueChange = _a.onValueChange, _j = _a.iconBGFull, iconBGFull = _j === void 0 ? true : _j, _k = _a.iconPosition, iconPosition = _k === void 0 ? "right" : _k, _l = _a.showChevron, showChevron = _l === void 0 ? false : _l;
+    var _m = useState(""), value = _m[0], setValue = _m[1];
+    var _o = useState(undefined), selectedDateRange = _o[0], setSelectedDateRange = _o[1];
+    var _p = useState(undefined), selectedTime = _p[0], setSelectedTime = _p[1];
+    var _q = useState(false), isOpen = _q[0], setIsOpen = _q[1];
+    var handleDtChange = React.useCallback(function (payload) {
+        var _a;
+        var datePart = formatDateRange(payload.dateRange);
+        var time = payload.time ? "".concat(payload.time.hour, ":").concat(payload.time.minute, " ").concat(payload.time.meridiem) : "";
+        var combined = [datePart, time].filter(Boolean).join(" ");
+        setValue(combined);
+        setSelectedDateRange(payload.dateRange);
+        setSelectedTime(payload.time);
+        // Return date strings in yyyy-MM-dd format for both modes
+        if (payload.dateRange) {
+            if (selectionMode === "range") {
+                // Return array of date strings for range mode
+                var from = payload.dateRange.from;
+                var to = (_a = payload.dateRange.to) !== null && _a !== void 0 ? _a : payload.dateRange.from;
+                if (from && to) {
+                    var fromStr = format(from, "yyyy-MM-dd");
+                    var toStr = format(to, "yyyy-MM-dd");
+                    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([fromStr, toStr]);
+                }
+            }
+            else {
+                // Return single date string in yyyy-MM-dd format for single mode
+                var date = payload.dateRange.from;
+                if (date) {
+                    var dateStr = format(date, "yyyy-MM-dd");
+                    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(dateStr);
+                }
+            }
+        }
+    }, [onValueChange, selectionMode]);
+    return (_jsxs(Popover, __assign({ open: isOpen, onOpenChange: setIsOpen }, { children: [_jsx(PopoverTrigger, __assign({ asChild: true }, { children: _jsx("div", { children: _jsx(CalendarInput, { placeholder: placeholder, value: value, disabled: disabled, iconBGFull: iconBGFull, iconPosition: iconPosition, showChevron: showChevron, isOpen: isOpen }) }) })), _jsx(PopoverContent, __assign({ className: "w-auto p-0 border-transparent" }, { children: _jsx(DateTime, { mode: mode, selectionMode: selectionMode, numberOfMonths: numberOfMonths, disableBeforeToday: disableBeforeToday, disableToday: disableToday, onChange: handleDtChange, defaultDateRange: selectedDateRange, defaultTime: selectedTime }) }))] })));
+};
+export default DateTimePicker;

package/dist/components/organisms/Dialog/Dialog.d.ts

@@ -0,0 +1,103 @@
+import React from 'react';
+import '../../../styles/components/organism/dialog.css';
+/**
+ * Size variants for the Dialog component
+ */
+export type DialogSize = 'desktop' | 'tablet' | 'mobile' | 'full' | 'responsive';
+/**
+ * Props for the Dialog component
+ */
+export interface DialogProps {
+    /**
+     * Whether the dialog is open
+     */
+    isOpen: boolean;
+    /**
+     * Callback when the dialog should close
+     */
+    onClose: () => void;
+    /**
+     * Title displayed in the dialog header
+     */
+    title: string;
+    /**
+     * Content to be rendered in the dialog body
+     */
+    children: React.ReactNode;
+    /**
+     * Footer content or buttons. If not provided, default Cancel/Save buttons are shown
+     */
+    footer?: React.ReactNode;
+    /**
+     * Size variant of the dialog
+     * @default 'responsive'
+     */
+    size?: DialogSize;
+    /**
+     * Text for the primary action button (when using default footer)
+     * @default 'Save and update'
+     */
+    primaryButtonText?: string;
+    /**
+     * Text for the secondary action button (when using default footer)
+     * @default 'Cancel'
+     */
+    secondaryButtonText?: string;
+    /**
+     * Callback for primary button click (when using default footer)
+     */
+    onPrimaryClick?: () => void;
+    /**
+     * Callback for secondary button click (when using default footer)
+     */
+    onSecondaryClick?: () => void;
+    /**
+     * Whether to show the footer
+     * @default true
+     */
+    showFooter?: boolean;
+    /**
+     * Whether to show the close button in the header
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * Whether clicking the overlay closes the dialog
+     * @default true
+     */
+    closeOnOverlayClick?: boolean;
+    /**
+     * Whether pressing Escape closes the dialog
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Additional CSS classes for the dialog content
+     */
+    className?: string;
+    /**
+     * ID for aria-labelledby
+     */
+    ariaLabelledBy?: string;
+    /**
+     * ID for aria-describedby
+     */
+    ariaDescribedBy?: string;
+}
+/**
+ * Dialog component - A modal dialog that adapts to different screen sizes
+ *
+ * @example
+ * ```tsx
+ * <Dialog
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Edit Information"
+ *   onPrimaryClick={handleSave}
+ * >
+ *   <p>Your content here</p>
+ * </Dialog>
+ * ```
+ */
+export declare const Dialog: React.FC<DialogProps>;
+export default Dialog;