@beweco/aurora-ui 0.1.4 → 0.1.6

package/dist/index.cjs.js

@@ -4,6 +4,7 @@ var react = require('@heroui/react');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var react$1 = require('@iconify/react');
+var reactDom = require('react-dom');
 var useTheme = require('@heroui/use-theme');
 
 /******************************************************************************
@@ -465,42 +466,50 @@ var defaultTranslations$2 = {
     expandListAriaLabel: "Desplegar lista de países",
     noCountriesFound: "No se encontraron países",
 };
+
 var Phone = function (_a) {
-    var label = _a.label, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.errorText, errorText = _d === void 0 ? "" : _d, _e = _a.value, value = _e === void 0 ? "" : _e, onChange = _a.onChange, onBlur = _a.onBlur, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.name, name = _g === void 0 ? "phone" : _g, _h = _a.translations, translations = _h === void 0 ? {} : _h;
-    var _j = React.useState(false), isDropdownOpen = _j[0], setIsDropdownOpen = _j[1];
-    var _k = React.useState(uniqueCountries[0]), selectedCountry = _k[0], setSelectedCountry = _k[1];
-    var _l = React.useState(""), inputValue = _l[0], setInputValue = _l[1];
+    var id = _a.id, label = _a.label, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.errorText, errorText = _d === void 0 ? "" : _d, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.name, name = _f === void 0 ? "phone" : _f, _g = _a.translations, translations = _g === void 0 ? {} : _g;
+    var _h = React.useState(false), isDropdownOpen = _h[0], setIsDropdownOpen = _h[1];
+    var _j = React.useState(uniqueCountries[0]), selectedCountry = _j[0], setSelectedCountry = _j[1];
+    var _k = React.useState(""), inputValue = _k[0], setInputValue = _k[1];
     var dropdownRef = React.useRef(null);
+    var portalDropdownRef = React.useRef(null);
+    var _l = React.useState({}), dropdownPosition = _l[0], setDropdownPosition = _l[1];
     var _m = React.useState(uniqueCountries), filteredCountries = _m[0], setFilteredCountries = _m[1];
-    // Combinar traducciones por defecto con las proporcionadas
     var t = __assign(__assign({}, defaultTranslations$2), translations);
-    // Usar la etiqueta de las traducciones si no se proporciona label explícitamente
     var finalLabel = label || t.label;
-    // Sincroniza valor externo
     React.useEffect(function () {
         if (value) {
-            // Si value incluye el código, lo separamos
-            var found = uniqueCountries.find(function (c) { return value.startsWith(c.code); });
+            var found = uniqueCountries.find(function (c) { return c.code === value.countryCode; });
             if (found) {
                 setSelectedCountry(found);
-                setInputValue(value.replace(found.code, "").trim());
-            }
-            else {
-                setInputValue(value);
             }
+            setInputValue(value.phoneNumber);
         }
     }, [value]);
-    // Open dropdown: reset filteredCountries
     React.useEffect(function () {
         if (isDropdownOpen) {
             setFilteredCountries(uniqueCountries);
         }
     }, [isDropdownOpen]);
-    // Cierra dropdown al hacer click fuera
+    React.useLayoutEffect(function () {
+        if (isDropdownOpen && dropdownRef.current) {
+            var rect = dropdownRef.current.getBoundingClientRect();
+            setDropdownPosition({
+                position: "absolute",
+                top: "".concat(rect.bottom + window.scrollY + 4, "px"),
+                left: "".concat(rect.left + window.scrollX, "px"),
+                width: "15rem",
+                zIndex: 50,
+            });
+        }
+    }, [isDropdownOpen]);
     React.useEffect(function () {
         var handleClickOutside = function (event) {
             if (dropdownRef.current &&
-                !dropdownRef.current.contains(event.target)) {
+                !dropdownRef.current.contains(event.target) &&
+                portalDropdownRef.current &&
+                !portalDropdownRef.current.contains(event.target)) {
                 setIsDropdownOpen(false);
             }
         };
@@ -515,31 +524,27 @@ var Phone = function (_a) {
         setSelectedCountry(country);
         setIsDropdownOpen(false);
         if (onChange) {
-            onChange(country.code + inputValue);
+            onChange({ countryCode: country.code, phoneNumber: inputValue });
         }
     };
     var handleInputChange = function (e) {
-        // Solo números
         var val = e.target.value.replace(/\D/g, "");
         setInputValue(val);
         if (onChange) {
-            onChange(selectedCountry.code + val);
+            onChange({ countryCode: selectedCountry.code, phoneNumber: val });
         }
     };
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 w-full relative", children: [finalLabel && (jsxRuntime.jsxs("label", { htmlFor: "phone-input-".concat(name), className: "text-tiny text-default-600 mb-1", children: [finalLabel, " ", required && jsxRuntime.jsx("span", { className: "text-pink-600", children: "*" })] })), jsxRuntime.jsxs("div", { className: "flex items-center w-full min-h-[56px] bg-white dark:bg-gray-900 transition-colors shadow-sm border border-[#E4E4E7] dark:border-gray-700 rounded-2xl focus-within:border-blue-500 dark:focus-within:border-blue-400 ".concat(error
-                    ? "border-pink-500 dark:border-pink-600"
-                    : "border-[#E4E4E7] dark:border-gray-700").concat(disabled ? " bg-gray-100 dark:bg-gray-800 opacity-60" : ""), children: [jsxRuntime.jsxs("div", { className: "relative ml-2", ref: dropdownRef, children: [jsxRuntime.jsxs("button", { type: "button", 
-                                ///bg-gray-100
-                                className: "flex items-center gap-1 px-4 h-10 rounded-xl  dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none transition-colors", onClick: function () { return setIsDropdownOpen(function (v) { return !v; }); }, disabled: disabled, tabIndex: 0, "aria-label": t.selectCountryAriaLabel, children: [jsxRuntime.jsx("span", { className: "text-lg", children: selectedCountry.flag }), jsxRuntime.jsx("span", { className: "text-xs text-gray-700 dark:text-gray-200", children: selectedCountry.code }), jsxRuntime.jsxs("svg", { className: "w-4 h-4 text-gray-400 dark:text-gray-300 ml-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": t.expandListAriaLabel, children: [jsxRuntime.jsx("title", { children: t.expandListAriaLabel }), jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })] })] }), isDropdownOpen && (jsxRuntime.jsxs("div", { className: "absolute z-30 mt-2 w-60 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg", children: [jsxRuntime.jsx("div", { className: "p-2", children: jsxRuntime.jsx("input", { type: "text", className: "w-full px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:border-blue-500 dark:focus:border-blue-400", placeholder: t.searchPlaceholder, onChange: function (e) {
-                                                var searchTerm = e.target.value.toLowerCase();
-                                                var filtered = uniqueCountries.filter(function (country) {
-                                                    return country.name.toLowerCase().includes(searchTerm) ||
-                                                        country.code.toLowerCase().includes(searchTerm);
-                                                });
-                                                setFilteredCountries(filtered);
-                                            } }) }), jsxRuntime.jsx("div", { className: "max-h-60 overflow-y-auto", children: filteredCountries.length > 0 ? (filteredCountries.map(function (country) { return (jsxRuntime.jsxs("button", { type: "button", className: "flex items-center w-full px-4 py-2.5 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 ".concat(country.code === selectedCountry.code
-                                                ? "bg-blue-50 dark:bg-blue-900"
-                                                : ""), onClick: function () { return handleCountrySelect(country); }, children: [jsxRuntime.jsx("span", { className: "mr-3 text-lg", children: country.flag }), jsxRuntime.jsx("span", { className: "flex-1 text-left dark:text-gray-100", children: country.name }), jsxRuntime.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: country.code })] }, country.code)); })) : (jsxRuntime.jsx("div", { className: "px-4 py-2 text-sm text-gray-500 dark:text-gray-400", children: t.noCountriesFound })) })] }))] }), jsxRuntime.jsx(react.Input, { type: "tel", className: "flex-1 border-none bg-transparent text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 h-10 px-2", placeholder: t.placeholder, value: inputValue, onChange: handleInputChange, onBlur: onBlur, disabled: disabled, name: name, autoComplete: "tel", id: "phone-input-".concat(name) })] }), error && errorText && (jsxRuntime.jsx("span", { className: "text-xs text-pink-600 dark:text-pink-400 mt-1", children: errorText }))] }));
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 w-full relative", id: id, children: [finalLabel && (jsxRuntime.jsxs("label", { htmlFor: "phone-input-".concat(name), className: "text-tiny text-default-500 mb-1", children: [finalLabel, " ", required && jsxRuntime.jsx("span", { className: "text-danger-500", children: "*" })] })), jsxRuntime.jsxs("div", { className: "flex items-center w-full min-h-[56px]  transition-colors shadow-sm border-medium border-default-200 rounded-xl focus-within:border-primary-500 dark:focus-within:border-primary-500 ".concat(error ? "border-danger-500 " : "border-default-200").concat(disabled ? "opacity-60" : ""), children: [jsxRuntime.jsx("div", { className: "relative ml-2", ref: dropdownRef, children: jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-1 px-4 h-10 rounded-xl  bg-default-100  focus:outline-none transition-colors", onClick: function () { return setIsDropdownOpen(function (v) { return !v; }); }, disabled: disabled, tabIndex: 0, "aria-label": t.selectCountryAriaLabel, children: [jsxRuntime.jsx("span", { className: "text-lg", children: selectedCountry.flag }), jsxRuntime.jsx("span", { className: "text-xs text-default-500", children: selectedCountry.code }), jsxRuntime.jsxs("svg", { className: "w-4 h-4 text-default-500 ml-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": t.expandListAriaLabel, children: [jsxRuntime.jsx("title", { children: t.expandListAriaLabel }), jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })] })] }) }), jsxRuntime.jsx(react.Input, { type: "tel", className: "flex-1 border-none bg-transparent text-default-500  placeholder-default-500 px-2", placeholder: t.placeholder, value: inputValue, onChange: handleInputChange, onBlur: onBlur, disabled: disabled, name: name, autoComplete: "tel", id: "phone-input-".concat(name) })] }), error && errorText && (jsxRuntime.jsx("span", { className: "text-xs text-danger-500 mt-1", children: errorText })), isDropdownOpen &&
+                reactDom.createPortal(jsxRuntime.jsxs("div", { ref: portalDropdownRef, style: dropdownPosition, className: "bg-content1 border border-default-200 rounded-lg shadow-lg z-50", children: [jsxRuntime.jsx("div", { className: "p-2", children: jsxRuntime.jsx("input", { type: "text", className: "w-full px-3 py-2 text-sm bg-default-100 border-medium border-default-200 text-default-500 rounded-lg focus:outline-none focus:border-primary-500", placeholder: t.searchPlaceholder, onChange: function (e) {
+                                    var searchTerm = e.target.value.toLowerCase();
+                                    var filtered = uniqueCountries.filter(function (country) {
+                                        return country.name.toLowerCase().includes(searchTerm) ||
+                                            country.code.toLowerCase().includes(searchTerm);
+                                    });
+                                    setFilteredCountries(filtered);
+                                } }) }), jsxRuntime.jsx("div", { className: "max-h-60 overflow-y-auto", children: filteredCountries.length > 0 ? (filteredCountries.map(function (country) { return (jsxRuntime.jsxs("button", { type: "button", className: "flex items-center w-full px-4 py-2.5 text-sm hover:bg-default-200 ".concat(country.code === selectedCountry.code
+                                    ? "bg-primary-50"
+                                    : ""), onClick: function () { return handleCountrySelect(country); }, children: [jsxRuntime.jsx("span", { className: "mr-3 text-lg", children: country.flag }), jsxRuntime.jsx("span", { className: "flex-1 text-left text-default-500", children: country.name }), jsxRuntime.jsx("span", { className: "text-xs text-default-500", children: country.code })] }, country.code)); })) : (jsxRuntime.jsx("div", { className: "px-4 py-2 text-sm text-default-500", children: t.noCountriesFound })) })] }), document.body)] }));
 };
 
 /**
@@ -895,7 +900,9 @@ var ThemePicker = function (_a) {
             previewContent: (jsxRuntime.jsxs("div", { className: "rounded-lg border border-[#3F3F46] p-3 mt-4 flex flex-col gap-2", children: [jsxRuntime.jsx("div", { className: "h-3 w-1/2 bg-[#3F3F46] rounded mb-2" }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full bg-[#3F3F46]" }), jsxRuntime.jsx("div", { className: "h-3 w-1/3 rounded bg-[#3F3F46]" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full bg-[#3F3F46]" }), jsxRuntime.jsx("div", { className: "h-3 w-1/4 rounded bg-[#3F3F46]" })] })] }), jsxRuntime.jsx("div", { className: "h-8 w-2/3 bg-[#27272A] rounded-lg mt-2" })] })),
         },
     ];
-    return (jsxRuntime.jsx(react.RadioGroup, { value: value, onChange: function (e) { return onChange(e.target.value); }, className: "flex gap-6 w-full ".concat(className || ""), style: { gap: 16 }, children: themes.map(function (theme) { return (jsxRuntime.jsxs("div", { className: "relative rounded-[14px] ".concat(theme.cardClass, " p-6 w-1/2 min-h-[180px] transition-all duration-200 flex flex-col justify-start"), children: [jsxRuntime.jsx("div", { className: "absolute top-6 right-6", children: jsxRuntime.jsx(react.Radio, { "aria-label": theme.label, color: theme.radioColor, size: "sm", value: theme.key }) }), jsxRuntime.jsx("span", { className: theme.labelClass, children: theme.label }), theme.previewContent] }, theme.key)); }) }));
+    return (jsxRuntime.jsx(react.RadioGroup, { value: value, onChange: function (e) { return onChange(e.target.value); }, className: "flex justify-center ".concat(className || ""), orientation: "horizontal", classNames: {
+            wrapper: "gap-3",
+        }, children: themes.map(function (theme) { return (jsxRuntime.jsxs("div", { className: "relative rounded-2xl ".concat(theme.cardClass, " p-4 flex-1 transition-all duration-200 flex flex-col justify-start"), children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsxRuntime.jsx("span", { className: theme.labelClass, children: theme.label }), jsxRuntime.jsx(react.Radio, { "aria-label": theme.label, color: theme.radioColor, size: "sm", value: theme.key })] }), theme.previewContent] }, theme.key)); }) }));
 };
 
 var ConfigMenu = function (_a) {
@@ -1440,38 +1447,40 @@ var Pagination = function (_a) {
     return jsxRuntime.jsx(react.Pagination, __assign({ showControls: true, isCompact: true }, props));
 };
 
-var Modal = function (props) {
-    return (jsxRuntime.jsx(react.Modal, __assign({ shouldBlockScroll: true, radius: "lg", className: "py-9 px-6" }, props)));
+var H2 = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (jsxRuntime.jsx("h2", __assign({ className: react.cn("text-lg font-medium", className) }, props, { children: children })));
 };
 
-var ModalContent = react.ModalContent;
-
-var ModalHeader = react.ModalHeader;
-
-var ModalBody = react.ModalBody;
+var H3 = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (jsxRuntime.jsx("h3", __assign({ className: react.cn("text-base font-medium mb-1", className) }, props, { children: children })));
+};
 
-var ModalFooter = react.ModalFooter;
+var H4 = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (jsxRuntime.jsx("h4", __assign({ className: react.cn("text-sm font-medium mb-1", className) }, props, { children: children })));
+};
 
-var paddingClasses = {
-    sm: "p-4",
-    md: "p-6",
-    lg: "p-8",
+var P = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (jsxRuntime.jsx("p", __assign({ className: react.cn("text-sm text-default-500", className) }, props, { children: children })));
 };
 
-/**
- * Card genérica siguiendo las reglas de diseño BeweOS basada en HeroUI.
- *
- * Reglas aplicadas:
- * - Shadow: none, sm, md, lg (configurable)
- * - Radius: sm (por defecto, configurable)
- * - Padding configurable (sm, md, lg)
- * - Hereda de HeroUI Card con personalización BeweOS
- */
-var Card = function (_a) {
-    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.shadow, shadow = _c === void 0 ? "sm" : _c, _d = _a.radius, radius = _d === void 0 ? "sm" : _d, _e = _a.padding, padding = _e === void 0 ? "md" : _e, props = __rest(_a, ["children", "className", "shadow", "radius", "padding"]);
-    var paddingClass = paddingClasses[padding];
-    var combinedClassName = [paddingClass, className].filter(Boolean).join(" ");
-    return (jsxRuntime.jsx(react.Card, __assign({ shadow: shadow, radius: radius, className: combinedClassName }, props, { children: children })));
+var ThemeContext = React.createContext({
+    mode: "light",
+    color: "blue",
+    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
+    setMode: function () { },
+    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
+    setColor: function () { },
+});
+var useThemeContext = function () {
+    var context = React.useContext(ThemeContext);
+    if (!context) {
+        throw new Error("useThemeContext debe ser usado dentro de un ThemeProvider");
+    }
+    return context;
 };
 
 var themeColors = {
@@ -1964,20 +1973,74 @@ var themeColors = {
     },
 };
 
-var ThemeContext = React.createContext({
-    mode: "light",
-    color: "blue",
-    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
-    setMode: function () { },
-    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
-    setColor: function () { },
-});
-var useThemeContext = function () {
-    var context = React.useContext(ThemeContext);
-    if (!context) {
-        throw new Error("useThemeContext debe ser usado dentro de un ThemeProvider");
-    }
-    return context;
+var ColorSelector = function (_a) {
+    var selectedColor = _a.selectedColor, onColorChange = _a.onColorChange;
+    var mode = useThemeContext().mode;
+    /**
+     * Filters and maps the available theme colors to the current theme mode (light/dark).
+     * Each color option contains:
+     * - value: the theme name (e.g., "blue-light")
+     * - label: the base color name (e.g., "blue")
+     * - color: the primary color hex value
+     */
+    var colorOptions = Object.entries(themeColors)
+        .filter(function (_a) {
+        var themeData = _a[1];
+        var themeMode = themeData.extend;
+        return mode === "light" ? themeMode === "light" : themeMode === "dark";
+    })
+        .map(function (_a) {
+        var themeName = _a[0], theme = _a[1];
+        return ({
+            value: themeName,
+            label: themeName.split("-")[0],
+            color: theme.colors.primary.DEFAULT,
+        });
+    });
+    return (jsxRuntime.jsx(react.RadioGroup, { value: selectedColor, onValueChange: onColorChange, orientation: "horizontal", className: "flex flex-wrap !gap-2", classNames: {
+            base: "flex flex-wrap !gap-2",
+            wrapper: "flex flex-wrap !gap-2",
+        }, children: colorOptions.map(function (color) { return (jsxRuntime.jsx(react.Radio, { value: color.label, className: "p-0 m-0", classNames: {
+                base: "p-0 m-0",
+                wrapper: "hidden",
+                labelWrapper: "p-0 m-0",
+            }, children: jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full border-2 cursor-pointer transition-all ".concat(selectedColor === color.label
+                    ? "border-black border-opacity-20 scale-110"
+                    : "border-gray-200 hover:scale-105"), style: { backgroundColor: color.color }, title: color.label }) }, color.value)); }) }));
+};
+
+var Modal = function (props) {
+    return (jsxRuntime.jsx(react.Modal, __assign({ shouldBlockScroll: true, radius: "lg", className: "py-9 px-6" }, props)));
+};
+
+var ModalContent = react.ModalContent;
+
+var ModalHeader = react.ModalHeader;
+
+var ModalBody = react.ModalBody;
+
+var ModalFooter = react.ModalFooter;
+
+var paddingClasses = {
+    sm: "p-4",
+    md: "p-6",
+    lg: "p-8",
+};
+
+/**
+ * Card genérica siguiendo las reglas de diseño BeweOS basada en HeroUI.
+ *
+ * Reglas aplicadas:
+ * - Shadow: none, sm, md, lg (configurable)
+ * - Radius: sm (por defecto, configurable)
+ * - Padding configurable (sm, md, lg)
+ * - Hereda de HeroUI Card con personalización BeweOS
+ */
+var Card = function (_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.shadow, shadow = _c === void 0 ? "sm" : _c, _d = _a.radius, radius = _d === void 0 ? "sm" : _d, _e = _a.padding, padding = _e === void 0 ? "md" : _e, props = __rest(_a, ["children", "className", "shadow", "radius", "padding"]);
+    var paddingClass = paddingClasses[padding];
+    var combinedClassName = [paddingClass, className].filter(Boolean).join(" ");
+    return (jsxRuntime.jsx(react.Card, __assign({ shadow: shadow, radius: radius, className: combinedClassName }, props, { children: children })));
 };
 
 /**
@@ -2097,9 +2160,13 @@ exports.AuraToastProvider = AuraToastProvider;
 exports.AutoComplete = AutoComplete;
 exports.Button = Button;
 exports.Card = Card;
+exports.ColorSelector = ColorSelector;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
 exports.GlobalToast = GlobalToast;
+exports.H2 = H2;
+exports.H3 = H3;
+exports.H4 = H4;
 exports.HeaderComponent = HeaderComponent;
 exports.IconComponent = IconComponent;
 exports.Input = Input;
@@ -2109,6 +2176,7 @@ exports.ModalBody = ModalBody;
 exports.ModalContent = ModalContent;
 exports.ModalFooter = ModalFooter;
 exports.ModalHeader = ModalHeader;
+exports.P = P;
 exports.Pagination = Pagination;
 exports.Phone = Phone;
 exports.ScheduleRow = ScheduleRow;