mautourco-components 0.2.4 → 0.2.7

package/dist/components/organisms/Dialog/Dialog.js

@@ -1,162 +1,162 @@
-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 { useEffect, useCallback, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import { useMobile } from '../../../hooks/useMobile';
-import Button from '../../atoms/Button/Button';
-import Icon from '../../atoms/Icon/Icon';
-import '../../../styles/components/organism/dialog.css';
-/**
- * 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 var Dialog = function (_a) {
-    var isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title, children = _a.children, footer = _a.footer, _b = _a.size, size = _b === void 0 ? 'responsive' : _b, _c = _a.primaryButtonText, primaryButtonText = _c === void 0 ? 'Save and update' : _c, _d = _a.secondaryButtonText, secondaryButtonText = _d === void 0 ? 'Cancel' : _d, onPrimaryClick = _a.onPrimaryClick, onSecondaryClick = _a.onSecondaryClick, _e = _a.showFooter, showFooter = _e === void 0 ? true : _e, _f = _a.showCloseButton, showCloseButton = _f === void 0 ? true : _f, _g = _a.closeOnOverlayClick, closeOnOverlayClick = _g === void 0 ? true : _g, _h = _a.closeOnEscape, closeOnEscape = _h === void 0 ? true : _h, _j = _a.className, className = _j === void 0 ? '' : _j, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy;
-    var _k = useMobile(), isMobile = _k.isMobile, isTablet = _k.isTablet, isDesktop = _k.isDesktop;
-    var dialogRef = useRef(null);
-    var previousFocusRef = useRef(null);
-    // Determine the actual size based on responsive setting
-    var getActualSize = function () {
-        if (size !== 'responsive')
-            return size;
-        if (isMobile)
-            return 'mobile';
-        if (isTablet)
-            return 'tablet';
-        return 'desktop';
-    };
-    var actualSize = getActualSize();
-    var isMobileSize = actualSize === 'mobile';
-    var isTabletSize = actualSize === 'tablet';
-    // Handle escape key
-    var handleKeyDown = useCallback(function (event) {
-        if (closeOnEscape && event.key === 'Escape') {
-            onClose();
-        }
-    }, [closeOnEscape, onClose]);
-    // Handle overlay click
-    var handleOverlayClick = useCallback(function (event) {
-        if (closeOnOverlayClick && event.target === event.currentTarget) {
-            onClose();
-        }
-    }, [closeOnOverlayClick, onClose]);
-    // Focus management and scroll lock
-    useEffect(function () {
-        if (isOpen) {
-            // Store current focus
-            previousFocusRef.current = document.activeElement;
-            // Focus the dialog
-            if (dialogRef.current) {
-                dialogRef.current.focus();
-            }
-            // Lock body scroll
-            document.body.style.overflow = 'hidden';
-            // Add escape listener
-            document.addEventListener('keydown', handleKeyDown);
-        }
-        else {
-            // Unlock body scroll
-            document.body.style.overflow = '';
-            // Restore focus
-            if (previousFocusRef.current) {
-                previousFocusRef.current.focus();
-            }
-        }
-        return function () {
-            document.body.style.overflow = '';
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [isOpen, handleKeyDown]);
-    // Handle secondary button click
-    var handleSecondaryClick = function () {
-        if (onSecondaryClick) {
-            onSecondaryClick();
-        }
-        else {
-            onClose();
-        }
-    };
-    // Handle primary button click
-    var handlePrimaryClick = function () {
-        if (onPrimaryClick) {
-            onPrimaryClick();
-        }
-    };
-    // Generate unique IDs for accessibility
-    var titleId = ariaLabelledBy || "dialog-title-".concat(title.replace(/\s+/g, '-').toLowerCase());
-    var bodyId = ariaDescribedBy || "dialog-body-".concat(title.replace(/\s+/g, '-').toLowerCase());
-    // Build class names
-    var contentClasses = [
-        'dialog__content',
-        "dialog__content--".concat(actualSize),
-        size === 'responsive' ? 'dialog__content--responsive' : '',
-        className,
-    ]
-        .filter(Boolean)
-        .join(' ');
-    var headerClasses = [
-        'dialog__header',
-        isMobileSize ? 'dialog__header--mobile' : '',
-        size === 'responsive' ? 'dialog__header--responsive' : '',
-    ]
-        .filter(Boolean)
-        .join(' ');
-    var titleClasses = [
-        'dialog__title',
-        isMobileSize ? 'dialog__title--mobile' : '',
-        isTabletSize ? 'dialog__title--tablet' : '',
-        size === 'responsive' ? 'dialog__title--responsive' : '',
-    ]
-        .filter(Boolean)
-        .join(' ');
-    var closeButtonClasses = 'dialog__close-button';
-    var bodyClasses = [
-        'dialog__body',
-        isMobileSize ? 'dialog__body--mobile' : '',
-        size === 'responsive' ? 'dialog__body--responsive' : '',
-    ]
-        .filter(Boolean)
-        .join(' ');
-    var footerClasses = [
-        'dialog__footer',
-        isMobileSize ? 'dialog__footer--mobile' : '',
-        size === 'responsive' ? 'dialog__footer--responsive' : '',
-    ]
-        .filter(Boolean)
-        .join(' ');
-    var footerButtonsClasses = [
-        'dialog__footer-buttons',
-        isMobileSize ? 'dialog__footer-buttons--mobile' : '',
-        size === 'responsive' ? 'dialog__footer-buttons--responsive' : '',
-    ]
-        .filter(Boolean)
-        .join(' ');
-    if (!isOpen) {
-        return null;
-    }
-    var dialogContent = (_jsxs(_Fragment, { children: [_jsx("div", { className: "dialog-overlay", onClick: handleOverlayClick, "aria-hidden": "true" }), _jsx("div", __assign({ className: "dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": bodyId, ref: dialogRef, tabIndex: -1, onClick: handleOverlayClick }, { children: _jsxs("div", __assign({ className: contentClasses }, { children: [_jsxs("div", __assign({ className: headerClasses }, { children: [_jsx("h2", __assign({ id: titleId, className: titleClasses }, { children: title })), showCloseButton && (_jsx("button", __assign({ type: "button", className: closeButtonClasses, onClick: onClose, "aria-label": "Close dialog" }, { children: _jsx(Icon, { name: "close", size: "md" }) })))] })), _jsx("div", __assign({ id: bodyId, className: bodyClasses }, { children: _jsx("div", __assign({ className: "dialog__body-content" }, { children: children })) })), showFooter && (_jsx("div", __assign({ className: footerClasses }, { children: footer ? (footer) : (_jsxs("div", __assign({ className: footerButtonsClasses }, { children: [_jsx(Button, __assign({ variant: "outline-secondary", size: isMobileSize ? 'sm' : 'md', onClick: handleSecondaryClick }, { children: secondaryButtonText })), _jsx(Button, __assign({ variant: "secondary", size: isMobileSize ? 'sm' : 'md', onClick: handlePrimaryClick }, { children: primaryButtonText }))] }))) })))] })) }))] }));
-    // Use portal to render at the document body level
-    return createPortal(dialogContent, document.body);
-};
-export default Dialog;
+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 { useEffect, useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useMobile } from '../../../hooks/useMobile';
+import Button from '../../atoms/Button/Button';
+import Icon from '../../atoms/Icon/Icon';
+import '../../../styles/components/organism/dialog.css';
+/**
+ * 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 var Dialog = function (_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title, children = _a.children, footer = _a.footer, _b = _a.size, size = _b === void 0 ? 'responsive' : _b, _c = _a.primaryButtonText, primaryButtonText = _c === void 0 ? 'Save and update' : _c, _d = _a.secondaryButtonText, secondaryButtonText = _d === void 0 ? 'Cancel' : _d, onPrimaryClick = _a.onPrimaryClick, onSecondaryClick = _a.onSecondaryClick, _e = _a.showFooter, showFooter = _e === void 0 ? true : _e, _f = _a.showCloseButton, showCloseButton = _f === void 0 ? true : _f, _g = _a.closeOnOverlayClick, closeOnOverlayClick = _g === void 0 ? true : _g, _h = _a.closeOnEscape, closeOnEscape = _h === void 0 ? true : _h, _j = _a.className, className = _j === void 0 ? '' : _j, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy;
+    var _k = useMobile(), isMobile = _k.isMobile, isTablet = _k.isTablet, isDesktop = _k.isDesktop;
+    var dialogRef = useRef(null);
+    var previousFocusRef = useRef(null);
+    // Determine the actual size based on responsive setting
+    var getActualSize = function () {
+        if (size !== 'responsive')
+            return size;
+        if (isMobile)
+            return 'mobile';
+        if (isTablet)
+            return 'tablet';
+        return 'desktop';
+    };
+    var actualSize = getActualSize();
+    var isMobileSize = actualSize === 'mobile';
+    var isTabletSize = actualSize === 'tablet';
+    // Handle escape key
+    var handleKeyDown = useCallback(function (event) {
+        if (closeOnEscape && event.key === 'Escape') {
+            onClose();
+        }
+    }, [closeOnEscape, onClose]);
+    // Handle overlay click
+    var handleOverlayClick = useCallback(function (event) {
+        if (closeOnOverlayClick && event.target === event.currentTarget) {
+            onClose();
+        }
+    }, [closeOnOverlayClick, onClose]);
+    // Focus management and scroll lock
+    useEffect(function () {
+        if (isOpen) {
+            // Store current focus
+            previousFocusRef.current = document.activeElement;
+            // Focus the dialog
+            if (dialogRef.current) {
+                dialogRef.current.focus();
+            }
+            // Lock body scroll
+            document.body.style.overflow = 'hidden';
+            // Add escape listener
+            document.addEventListener('keydown', handleKeyDown);
+        }
+        else {
+            // Unlock body scroll
+            document.body.style.overflow = '';
+            // Restore focus
+            if (previousFocusRef.current) {
+                previousFocusRef.current.focus();
+            }
+        }
+        return function () {
+            document.body.style.overflow = '';
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen, handleKeyDown]);
+    // Handle secondary button click
+    var handleSecondaryClick = function () {
+        if (onSecondaryClick) {
+            onSecondaryClick();
+        }
+        else {
+            onClose();
+        }
+    };
+    // Handle primary button click
+    var handlePrimaryClick = function () {
+        if (onPrimaryClick) {
+            onPrimaryClick();
+        }
+    };
+    // Generate unique IDs for accessibility
+    var titleId = ariaLabelledBy || "dialog-title-".concat(title.replace(/\s+/g, '-').toLowerCase());
+    var bodyId = ariaDescribedBy || "dialog-body-".concat(title.replace(/\s+/g, '-').toLowerCase());
+    // Build class names
+    var contentClasses = [
+        'dialog__content',
+        "dialog__content--".concat(actualSize),
+        size === 'responsive' ? 'dialog__content--responsive' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var headerClasses = [
+        'dialog__header',
+        isMobileSize ? 'dialog__header--mobile' : '',
+        size === 'responsive' ? 'dialog__header--responsive' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var titleClasses = [
+        'dialog__title',
+        isMobileSize ? 'dialog__title--mobile' : '',
+        isTabletSize ? 'dialog__title--tablet' : '',
+        size === 'responsive' ? 'dialog__title--responsive' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var closeButtonClasses = 'dialog__close-button';
+    var bodyClasses = [
+        'dialog__body',
+        isMobileSize ? 'dialog__body--mobile' : '',
+        size === 'responsive' ? 'dialog__body--responsive' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var footerClasses = [
+        'dialog__footer',
+        isMobileSize ? 'dialog__footer--mobile' : '',
+        size === 'responsive' ? 'dialog__footer--responsive' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var footerButtonsClasses = [
+        'dialog__footer-buttons',
+        isMobileSize ? 'dialog__footer-buttons--mobile' : '',
+        size === 'responsive' ? 'dialog__footer-buttons--responsive' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    if (!isOpen) {
+        return null;
+    }
+    var dialogContent = (_jsxs(_Fragment, { children: [_jsx("div", { className: "dialog-overlay", onClick: handleOverlayClick, "aria-hidden": "true" }), _jsx("div", __assign({ className: "dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": bodyId, ref: dialogRef, tabIndex: -1, onClick: handleOverlayClick }, { children: _jsxs("div", __assign({ className: contentClasses }, { children: [_jsxs("div", __assign({ className: headerClasses }, { children: [_jsx("h2", __assign({ id: titleId, className: titleClasses }, { children: title })), showCloseButton && (_jsx("button", __assign({ type: "button", className: closeButtonClasses, onClick: onClose, "aria-label": "Close dialog" }, { children: _jsx(Icon, { name: "close", size: "md" }) })))] })), _jsx("div", __assign({ id: bodyId, className: bodyClasses }, { children: _jsx("div", __assign({ className: "dialog__body-content" }, { children: children })) })), showFooter && (_jsx("div", __assign({ className: footerClasses }, { children: footer ? (footer) : (_jsxs("div", __assign({ className: footerButtonsClasses }, { children: [_jsx(Button, __assign({ variant: "outline-secondary", size: isMobileSize ? 'sm' : 'md', onClick: handleSecondaryClick }, { children: secondaryButtonText })), _jsx(Button, __assign({ variant: "secondary", size: isMobileSize ? 'sm' : 'md', onClick: handlePrimaryClick }, { children: primaryButtonText }))] }))) })))] })) }))] }));
+    // Use portal to render at the document body level
+    return createPortal(dialogContent, document.body);
+};
+export default Dialog;

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

@@ -1,38 +1,38 @@
-import React from "react";
-type FooterLink = {
-    label: string;
-    href?: string;
-    onClick?: () => void;
-};
-type FooterColumn = {
-    id: string;
-    title: string;
-    links: FooterLink[];
-};
-type SocialLink = {
-    id: string;
-    icon: React.ReactNode;
-    label: string;
-    href: string;
-};
-type ContactBlock = {
-    title: string;
-    addressLines: string[];
-    phone?: string;
-    fax?: string;
-    email?: string;
-};
-export interface FooterProps {
-    logo?: React.ReactNode;
-    columns?: FooterColumn[];
-    contact?: ContactBlock;
-    socials?: SocialLink[];
-    className?: string;
-    homeUrl?: string;
-    onLinkClick?: (link: {
-        label: string;
-        route: string;
-    }) => void;
-}
-export declare const Footer: React.FC<FooterProps>;
-export {};
+import React from "react";
+type FooterLink = {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+};
+type FooterColumn = {
+    id: string;
+    title: string;
+    links: FooterLink[];
+};
+type SocialLink = {
+    id: string;
+    icon: React.ReactNode;
+    label: string;
+    href: string;
+};
+type ContactBlock = {
+    title: string;
+    addressLines: string[];
+    phone?: string;
+    fax?: string;
+    email?: string;
+};
+export interface FooterProps {
+    logo?: React.ReactNode;
+    columns?: FooterColumn[];
+    contact?: ContactBlock;
+    socials?: SocialLink[];
+    className?: string;
+    homeUrl?: string;
+    onLinkClick?: (link: {
+        label: string;
+        route: string;
+    }) => void;
+}
+export declare const Footer: React.FC<FooterProps>;
+export {};

package/dist/components/organisms/Footer/Footer.js

@@ -1,74 +1,74 @@
-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 { useState } from "react";
-import { Text } from "../../atoms/Typography/Typography";
-import { Link } from "../../atoms/Link/Link";
-import Icon from "../../atoms/Icon/Icon";
-export var Footer = function (_a) {
-    var _b;
-    var logo = _a.logo, _c = _a.columns, columns = _c === void 0 ? defaultColumns : _c, _d = _a.contact, contact = _d === void 0 ? defaultContact : _d, _e = _a.socials, socials = _e === void 0 ? defaultSocials : _e, _f = _a.className, className = _f === void 0 ? "" : _f, homeUrl = _a.homeUrl, onLinkClick = _a.onLinkClick;
-    var _g = useState((_b = columns[0]) === null || _b === void 0 ? void 0 : _b.id), openSection = _g[0], setOpenSection = _g[1];
-    var toggleSection = function (id) {
-        setOpenSection(function (prev) { return (prev === id ? null : id); });
-    };
-    var year = new Date().getFullYear();
-    return (_jsx("footer", __assign({ className: "footer" }, { children: _jsxs("div", __assign({ className: "footer__wrapper" }, { children: [_jsxs("div", __assign({ className: "footer__desktop" }, { children: [_jsxs("div", __assign({ className: "footer__top-row" }, { children: [_jsxs("div", __assign({ className: "footer__content-left" }, { children: [columns.map(function (col) { return (_jsxs("div", __assign({ className: "footer__column" }, { children: [_jsx(Text, __assign({ as: "h4", className: "footer__column-title" }, { children: col.title })), _jsx("div", __assign({ className: "footer__column-links" }, { children: col.links.map(function (link) { return (_jsx(Link, __assign({ href: link.href, onClick: link.onClick, theme: "dark", className: "text-xs no-underline hover:opacity-80" }, { children: link.label }), link.label)); }) }))] }), col.id)); }), _jsxs("div", __assign({ className: "footer__contact" }, { children: [_jsx(Text, __assign({ as: "h4", className: "footer__column-title" }, { children: contact.title })), _jsxs("div", __assign({ className: "footer__contact-info" }, { children: [contact.addressLines.map(function (line) { return (_jsx("p", { children: line }, line)); }), contact.phone && _jsxs("p", { children: ["Tel: ", contact.phone] }), contact.fax && _jsxs("p", { children: ["Fax: ", contact.fax] }), contact.email && (_jsx(Link, __assign({ href: "mailto:".concat(contact.email), theme: "dark", className: "text-xs no-underline" }, { children: contact.email })))] }))] })), _jsxs("div", __assign({ className: "footer__socials" }, { children: [_jsx(Text, __assign({ as: "h4", className: "footer__column-title" }, { children: "Socials" })), _jsx("div", __assign({ className: "footer__socials-icons" }, { children: socials.map(function (s) { return (_jsx("a", __assign({ href: s.href, "aria-label": s.label, className: "footer__social-link" }, { children: s.icon }), s.id)); }) }))] }))] })), logo && (_jsx("div", __assign({ className: "footer__logo-section" }, { children: _jsxs("div", __assign({ className: "footer__logo-container" }, { children: [_jsx("a", __assign({ href: homeUrl !== null && homeUrl !== void 0 ? homeUrl : "/", onClick: function (e) {
-                                                    e.preventDefault();
-                                                    onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick({ label: "Home", route: homeUrl !== null && homeUrl !== void 0 ? homeUrl : "/" });
-                                                } }, { children: logo })), _jsxs(Text, __assign({ as: "p", className: "footer__copyright" }, { children: ["\u00A9 ", year, " Mautourco, All Rights Reserved"] }))] })) })))] })), !logo && (_jsxs(Text, __assign({ as: "p", className: "footer__copyright-standalone" }, { children: ["\u00A9 ", year, " Mautourco, All Rights Reserved"] })))] })), _jsxs("div", __assign({ className: "footer__mobile" }, { children: [columns.map(function (col) { return (_jsxs("div", __assign({ className: "footer__mobile-section" }, { children: [_jsxs("button", __assign({ type: "button", onClick: function () { return toggleSection(col.id); }, className: "footer__mobile-section-button" }, { children: [_jsx("span", { children: col.title }), _jsx("span", __assign({ className: "footer__mobile-section-icon ".concat(openSection === col.id ? "footer__mobile-section-icon--rotated" : "") }, { children: _jsx(Icon, { name: "chevron-down", size: "sm", color: "white" }) }))] })), openSection === col.id && (_jsx("div", __assign({ className: "footer__mobile-section-content" }, { children: col.links.map(function (link) { return (_jsx(Link, __assign({ href: link.href, onClick: link.onClick, theme: "dark", className: "text-xs no-underline" }, { children: link.label }), link.label)); }) })))] }), col.id)); }), _jsxs("div", __assign({ className: "footer__mobile-contact" }, { children: [_jsx(Text, __assign({ as: "h4", className: "footer__mobile-contact-title" }, { children: contact.title })), _jsxs("div", __assign({ className: "footer__mobile-contact-info" }, { children: [contact.addressLines.map(function (line) { return (_jsx("p", { children: line }, line)); }), contact.phone && _jsxs("p", { children: ["Tel: ", contact.phone] }), contact.fax && _jsxs("p", { children: ["Fax: ", contact.fax] }), contact.email && (_jsx(Link, __assign({ href: "mailto:".concat(contact.email), theme: "dark", className: "text-xs no-underline" }, { children: contact.email })))] }))] })), _jsxs("div", __assign({ className: "footer__mobile-footer" }, { children: [_jsx("a", __assign({ href: homeUrl !== null && homeUrl !== void 0 ? homeUrl : "/", onClick: function (e) {
-                                        e.preventDefault();
-                                        onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick({ label: "Home", route: homeUrl !== null && homeUrl !== void 0 ? homeUrl : "/" });
-                                    } }, { children: logo })), _jsxs(Text, __assign({ as: "p", className: "footer__mobile-copyright" }, { children: ["\u00A9 ", year, " Mautourco, All Rights Reserved"] }))] }))] }))] })) })));
-};
-var defaultColumns = [
-    {
-        id: "menu-1",
-        title: "Menu Title",
-        links: [
-            { label: "Menu Item", href: "#" },
-            { label: "Menu Item", href: "#" },
-            { label: "Menu Item", href: "#" },
-            { label: "Menu Item", href: "#" },
-            { label: "Menu Item", href: "#" },
-            { label: "Menu Item", href: "#" },
-        ],
-    },
-    {
-        id: "menu-2",
-        title: "Menu Title",
-        links: [
-            { label: "Menu Item", href: "#" },
-            { label: "Menu Item", href: "#" },
-            { label: "Menu Item", href: "#" },
-            { label: "Menu Item", href: "#" },
-            { label: "Menu Item", href: "#" },
-            { label: "Menu Item", href: "#" },
-        ],
-    },
-];
-var defaultContact = {
-    title: "Contact Us",
-    addressLines: [
-        "84, Gustave Colin Street,",
-        "Forest Side 74414, Mauritius",
-    ],
-    phone: "+ (230) 604 3000",
-    fax: "+ (230) 674 3720",
-    email: "info@mautourco.com",
-};
-var defaultSocials = [
-    { id: "fb", label: "Facebook", href: "#", icon: _jsx("span", { children: "\uF09A" }) },
-    { id: "ig", label: "Instagram", href: "#", icon: _jsx("span", { children: "\uF16D" }) },
-    { id: "in", label: "LinkedIn", href: "#", icon: _jsx("span", { children: "\uF0E1" }) },
-    { id: "yt", label: "YouTube", href: "#", icon: _jsx("span", { children: "\uF167" }) },
-];
+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 { useState } from "react";
+import { Text } from "../../atoms/Typography/Typography";
+import { Link } from "../../atoms/Link/Link";
+import Icon from "../../atoms/Icon/Icon";
+export var Footer = function (_a) {
+    var _b;
+    var logo = _a.logo, _c = _a.columns, columns = _c === void 0 ? defaultColumns : _c, _d = _a.contact, contact = _d === void 0 ? defaultContact : _d, _e = _a.socials, socials = _e === void 0 ? defaultSocials : _e, _f = _a.className, className = _f === void 0 ? "" : _f, homeUrl = _a.homeUrl, onLinkClick = _a.onLinkClick;
+    var _g = useState((_b = columns[0]) === null || _b === void 0 ? void 0 : _b.id), openSection = _g[0], setOpenSection = _g[1];
+    var toggleSection = function (id) {
+        setOpenSection(function (prev) { return (prev === id ? null : id); });
+    };
+    var year = new Date().getFullYear();
+    return (_jsx("footer", __assign({ className: "footer" }, { children: _jsxs("div", __assign({ className: "footer__wrapper" }, { children: [_jsxs("div", __assign({ className: "footer__desktop" }, { children: [_jsxs("div", __assign({ className: "footer__top-row" }, { children: [_jsxs("div", __assign({ className: "footer__content-left" }, { children: [columns.map(function (col) { return (_jsxs("div", __assign({ className: "footer__column" }, { children: [_jsx(Text, __assign({ as: "h4", className: "footer__column-title" }, { children: col.title })), _jsx("div", __assign({ className: "footer__column-links" }, { children: col.links.map(function (link) { return (_jsx(Link, __assign({ href: link.href, onClick: link.onClick, theme: "dark", className: "text-xs no-underline hover:opacity-80" }, { children: link.label }), link.label)); }) }))] }), col.id)); }), _jsxs("div", __assign({ className: "footer__contact" }, { children: [_jsx(Text, __assign({ as: "h4", className: "footer__column-title" }, { children: contact.title })), _jsxs("div", __assign({ className: "footer__contact-info" }, { children: [contact.addressLines.map(function (line) { return (_jsx("p", { children: line }, line)); }), contact.phone && _jsxs("p", { children: ["Tel: ", contact.phone] }), contact.fax && _jsxs("p", { children: ["Fax: ", contact.fax] }), contact.email && (_jsx(Link, __assign({ href: "mailto:".concat(contact.email), theme: "dark", className: "text-xs no-underline" }, { children: contact.email })))] }))] })), _jsxs("div", __assign({ className: "footer__socials" }, { children: [_jsx(Text, __assign({ as: "h4", className: "footer__column-title" }, { children: "Socials" })), _jsx("div", __assign({ className: "footer__socials-icons" }, { children: socials.map(function (s) { return (_jsx("a", __assign({ href: s.href, "aria-label": s.label, className: "footer__social-link" }, { children: s.icon }), s.id)); }) }))] }))] })), logo && (_jsx("div", __assign({ className: "footer__logo-section" }, { children: _jsxs("div", __assign({ className: "footer__logo-container" }, { children: [_jsx("a", __assign({ href: homeUrl !== null && homeUrl !== void 0 ? homeUrl : "/", onClick: function (e) {
+                                                    e.preventDefault();
+                                                    onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick({ label: "Home", route: homeUrl !== null && homeUrl !== void 0 ? homeUrl : "/" });
+                                                } }, { children: logo })), _jsxs(Text, __assign({ as: "p", className: "footer__copyright" }, { children: ["\u00A9 ", year, " Mautourco, All Rights Reserved"] }))] })) })))] })), !logo && (_jsxs(Text, __assign({ as: "p", className: "footer__copyright-standalone" }, { children: ["\u00A9 ", year, " Mautourco, All Rights Reserved"] })))] })), _jsxs("div", __assign({ className: "footer__mobile" }, { children: [columns.map(function (col) { return (_jsxs("div", __assign({ className: "footer__mobile-section" }, { children: [_jsxs("button", __assign({ type: "button", onClick: function () { return toggleSection(col.id); }, className: "footer__mobile-section-button" }, { children: [_jsx("span", { children: col.title }), _jsx("span", __assign({ className: "footer__mobile-section-icon ".concat(openSection === col.id ? "footer__mobile-section-icon--rotated" : "") }, { children: _jsx(Icon, { name: "chevron-down", size: "sm", color: "white" }) }))] })), openSection === col.id && (_jsx("div", __assign({ className: "footer__mobile-section-content" }, { children: col.links.map(function (link) { return (_jsx(Link, __assign({ href: link.href, onClick: link.onClick, theme: "dark", className: "text-xs no-underline" }, { children: link.label }), link.label)); }) })))] }), col.id)); }), _jsxs("div", __assign({ className: "footer__mobile-contact" }, { children: [_jsx(Text, __assign({ as: "h4", className: "footer__mobile-contact-title" }, { children: contact.title })), _jsxs("div", __assign({ className: "footer__mobile-contact-info" }, { children: [contact.addressLines.map(function (line) { return (_jsx("p", { children: line }, line)); }), contact.phone && _jsxs("p", { children: ["Tel: ", contact.phone] }), contact.fax && _jsxs("p", { children: ["Fax: ", contact.fax] }), contact.email && (_jsx(Link, __assign({ href: "mailto:".concat(contact.email), theme: "dark", className: "text-xs no-underline" }, { children: contact.email })))] }))] })), _jsxs("div", __assign({ className: "footer__mobile-footer" }, { children: [_jsx("a", __assign({ href: homeUrl !== null && homeUrl !== void 0 ? homeUrl : "/", onClick: function (e) {
+                                        e.preventDefault();
+                                        onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick({ label: "Home", route: homeUrl !== null && homeUrl !== void 0 ? homeUrl : "/" });
+                                    } }, { children: logo })), _jsxs(Text, __assign({ as: "p", className: "footer__mobile-copyright" }, { children: ["\u00A9 ", year, " Mautourco, All Rights Reserved"] }))] }))] }))] })) })));
+};
+var defaultColumns = [
+    {
+        id: "menu-1",
+        title: "Menu Title",
+        links: [
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+        ],
+    },
+    {
+        id: "menu-2",
+        title: "Menu Title",
+        links: [
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+            { label: "Menu Item", href: "#" },
+        ],
+    },
+];
+var defaultContact = {
+    title: "Contact Us",
+    addressLines: [
+        "84, Gustave Colin Street,",
+        "Forest Side 74414, Mauritius",
+    ],
+    phone: "+ (230) 604 3000",
+    fax: "+ (230) 674 3720",
+    email: "info@mautourco.com",
+};
+var defaultSocials = [
+    { id: "fb", label: "Facebook", href: "#", icon: _jsx("span", { children: "\uF09A" }) },
+    { id: "ig", label: "Instagram", href: "#", icon: _jsx("span", { children: "\uF16D" }) },
+    { id: "in", label: "LinkedIn", href: "#", icon: _jsx("span", { children: "\uF0E1" }) },
+    { id: "yt", label: "YouTube", href: "#", icon: _jsx("span", { children: "\uF167" }) },
+];