@roomstay/frontend 2.1.6 → 2.1.8

package/dist/src/components/generic/modal/SigninModal/AuthenticatedUserModal.js

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AuthenticatedUserModal = void 0;
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const Overlay_1 = require("../../Overlay/Overlay");
 const contexts_1 = require("../../../../contexts/index.js");
 const ScreenSize_1 = __importDefault(require("../../../../util/ScreenSize"));
@@ -41,8 +41,8 @@ const AuthenticatedUserModal_module_scss_1 = __importDefault(require("./Authenti
 const AccountRoutes_1 = require("../../../../pages/account/AccountRoutes");
 const AuthenticatedUserModal = (props) => {
     const { open, anchorEl, containerEl } = props;
-    const { logout } = (0, react_1.useContext)(contexts_1.AuthenticationContext);
-    const { screenSize } = (0, react_1.useContext)(contexts_1.BookingEngineContext);
+    const { logout } = (0, react_2.useContext)(contexts_1.AuthenticationContext);
+    const { screenSize } = (0, react_2.useContext)(contexts_1.BookingEngineContext);
     const shouldBreakpoint = screenSize <= ScreenSize_1.default.Large;
     const onClose = () => {
         var _a;
@@ -79,21 +79,21 @@ const AuthenticatedUserModal = (props) => {
             link: AccountRoutes_1.AccountRoutes.Help.path,
         },
     ];
-    return (open && (React.createElement(Overlay_1.Overlay, { usePortal: true, followElement: shouldBreakpoint ? null : anchorEl, placement: "auto-end", container: containerEl, open: open, onClose: onClose, strategy: "fixed", className: AuthenticatedUserModal_module_scss_1.default['logged-in-overlay'] },
-        React.createElement("div", { className: AuthenticatedUserModal_module_scss_1.default['list-items'] },
+    return open ? (react_1.default.createElement(Overlay_1.Overlay, { usePortal: true, followElement: shouldBreakpoint ? null : anchorEl, placement: "auto-end", container: containerEl, open: open, onClose: onClose, strategy: "fixed", className: AuthenticatedUserModal_module_scss_1.default['logged-in-overlay'] },
+        react_1.default.createElement("div", { className: AuthenticatedUserModal_module_scss_1.default['list-items'] },
             items.map((item, index) => {
-                return (React.createElement(react_router_dom_1.NavLink, { isActive: (item, location) => {
-                        return item && item.url && location.pathname.toLowerCase().includes(item.url.toLowerCase());
+                return (react_1.default.createElement(react_router_dom_1.NavLink, { isActive: (item, location) => {
+                        return !!(item === null || item === void 0 ? void 0 : item.url) && location.pathname.toLowerCase().includes(item.url.toLowerCase());
                     }, activeClassName: AuthenticatedUserModal_module_scss_1.default['--selected'], to: item.link, className: AuthenticatedUserModal_module_scss_1.default['list-item'], key: index, onClick: onClose },
-                    React.createElement("div", { className: AuthenticatedUserModal_module_scss_1.default['list-item--icon'] },
-                        React.createElement(Icon_1.default, { icon: item.icon, color: Color_1.Color.Grey, size: '24px' })),
-                    React.createElement(Text_1.default, null, item.text)));
+                    react_1.default.createElement("div", { className: AuthenticatedUserModal_module_scss_1.default['list-item--icon'] },
+                        react_1.default.createElement(Icon_1.default, { icon: item.icon, color: Color_1.Color.Grey, size: "24px" })),
+                    react_1.default.createElement(Text_1.default, null, item.text)));
             }),
-            React.createElement(LineBreak_1.default, null),
-            React.createElement("div", { className: AuthenticatedUserModal_module_scss_1.default['list-item'], onClick: onLogoutClick },
-                React.createElement("div", { className: AuthenticatedUserModal_module_scss_1.default['list-item--icon'] },
-                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.LogOut, color: Color_1.Color.Alert, size: '24px' })),
-                React.createElement(Text_1.default, { color: Color_1.Color.Alert }, "Log Out"))))));
+            react_1.default.createElement(LineBreak_1.default, null),
+            react_1.default.createElement("div", { className: AuthenticatedUserModal_module_scss_1.default['list-item'], onClick: onLogoutClick },
+                react_1.default.createElement("div", { className: AuthenticatedUserModal_module_scss_1.default['list-item--icon'] },
+                    react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.LogOut, color: Color_1.Color.Alert, size: "24px" })),
+                react_1.default.createElement(Text_1.default, { color: Color_1.Color.Alert }, "Log Out"))))) : null;
 };
 exports.AuthenticatedUserModal = AuthenticatedUserModal;
 //# sourceMappingURL=AuthenticatedUserModal.js.map

package/dist/src/components/generic/modal/SigninModal/AuthenticatedUserModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthenticatedUserModal.js","sourceRoot":"/","sources":["src/components/generic/modal/SigninModal/AuthenticatedUserModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useContext } from 'react';\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\nimport { AuthenticationContext, BookingEngineContext } from '@frontend/contexts';\nimport ScreenSize from '@/util/ScreenSize';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Color } from '@/util/Color';\nimport Text from '@/components/generic/Text';\nimport { NavLink } from 'react-router-dom';\nimport LineBreak from '@/components/generic/LineBreak';\n\nimport styles from './AuthenticatedUserModal.module.scss';\nimport { AccountRoutes } from '@/pages/account/AccountRoutes';\n\ntype AuthenticatedUserModalProps = {\n    open: boolean;\n    anchorEl?: HTMLElement;\n    containerEl?: HTMLElement;\n    onClose?: () => void;\n};\n\ntype MenuItemType = {\n    icon: IconType;\n    text: string;\n    link: string;\n};\n\nexport const AuthenticatedUserModal = (props: AuthenticatedUserModalProps) => {\n    const { open, anchorEl, containerEl } = props;\n\n    const { logout } = useContext(AuthenticationContext);\n\n    const { screenSize } = useContext(BookingEngineContext);\n    const shouldBreakpoint = screenSize <= ScreenSize.Large;\n\n    const onClose = () => {\n        props.onClose?.();\n    };\n\n    const onLogoutClick = () => {\n        onClose();\n        logout();\n    };\n\n    const items: MenuItemType[] = [\n        {\n            icon: IconType.Bed,\n            text: 'Your Reservations',\n            link: AccountRoutes.Reservations.path,\n        },\n        {\n            icon: IconType.Person,\n            text: 'Profile Information',\n            link: AccountRoutes.ProfileDetails.path,\n        },\n        {\n            icon: IconType.CreditCard,\n            text: 'Payment Information',\n            link: AccountRoutes.CardDetails.path,\n        },\n        {\n            icon: IconType.Hotel,\n            text: 'Hotel Information',\n            link: '/hotel-info/',\n        },\n        {\n            icon: IconType.Info,\n            text: 'Need Help?',\n            link: AccountRoutes.Help.path,\n        },\n    ];\n\n    return (\n        open && (\n            <Overlay\n                usePortal={true}\n                followElement={shouldBreakpoint ? null : anchorEl}\n                placement=\"auto-end\"\n                container={containerEl}\n                open={open}\n                onClose={onClose}\n                strategy=\"fixed\"\n                className={styles['logged-in-overlay']}\n            >\n                <div className={styles['list-items']}>\n                    {items.map((item, index) => {\n                        return (\n                            <NavLink\n                                isActive={(item, location) => {\n                                    return item && item.url && location.pathname.toLowerCase().includes(item.url.toLowerCase());\n                                }}\n                                activeClassName={styles['--selected']}\n                                to={item.link}\n                                className={styles['list-item']}\n                                key={index}\n                                onClick={onClose}\n                            >\n                                <div className={styles['list-item--icon']}>\n                                    <Icon icon={item.icon} color={Color.Grey} size={'24px'} />\n                                </div>\n                                <Text>{item.text}</Text>\n                            </NavLink>\n                        );\n                    })}\n                    <LineBreak />\n                    <div className={styles['list-item']} onClick={onLogoutClick}>\n                        <div className={styles['list-item--icon']}>\n                            <Icon icon={IconType.LogOut} color={Color.Alert} size={'24px'} />\n                        </div>\n                        <Text color={Color.Alert}>Log Out</Text>\n                    </div>\n                </div>\n            </Overlay>\n        )\n    );\n};\n"]}
+{"version":3,"file":"AuthenticatedUserModal.js","sourceRoot":"/","sources":["src/components/generic/modal/SigninModal/AuthenticatedUserModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA4C;AAC5C,iCAAmC;AACnC,kEAA+D;AAC/D,iDAAiF;AACjF,mEAA2C;AAE3C,uEAAgE;AAChE,wCAAqC;AACrC,qEAA6C;AAC7C,uDAA2C;AAC3C,+EAAuD;AAEvD,8GAA0D;AAC1D,iEAA8D;AAevD,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAuB,EAAE;IAC9F,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAE9C,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,kBAAU,EAAC,gCAAqB,CAAC,CAAC;IAErD,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACxD,MAAM,gBAAgB,GAAG,UAAU,IAAI,oBAAU,CAAC,KAAK,CAAC;IAExD,MAAM,OAAO,GAAG,GAAG,EAAE;;QACjB,MAAA,KAAK,CAAC,OAAO,qDAAI,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,MAAM,KAAK,GAAmB;QAC1B;YACI,IAAI,EAAE,eAAQ,CAAC,GAAG;YAClB,IAAI,EAAE,mBAAmB;YACzB,IAAI,EAAE,6BAAa,CAAC,YAAY,CAAC,IAAI;SACxC;QACD;YACI,IAAI,EAAE,eAAQ,CAAC,MAAM;YACrB,IAAI,EAAE,qBAAqB;YAC3B,IAAI,EAAE,6BAAa,CAAC,cAAc,CAAC,IAAI;SAC1C;QACD;YACI,IAAI,EAAE,eAAQ,CAAC,UAAU;YACzB,IAAI,EAAE,qBAAqB;YAC3B,IAAI,EAAE,6BAAa,CAAC,WAAW,CAAC,IAAI;SACvC;QACD;YACI,IAAI,EAAE,eAAQ,CAAC,KAAK;YACpB,IAAI,EAAE,mBAAmB;YACzB,IAAI,EAAE,cAAc;SACvB;QACD;YACI,IAAI,EAAE,eAAQ,CAAC,IAAI;YACnB,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,6BAAa,CAAC,IAAI,CAAC,IAAI;SAChC;KACJ,CAAC;IAEF,OAAO,IAAI,CAAC,CAAC,CAAC,CACV,8BAAC,iBAAO,IACJ,SAAS,QACT,aAAa,EAAE,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,EACjD,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,EACtB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,4CAAM,CAAC,mBAAmB,CAAC;QAEtC,uCAAK,SAAS,EAAE,4CAAM,CAAC,YAAY,CAAC;YAC/B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACvB,OAAO,CACH,8BAAC,0BAAO,IACJ,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE;wBACzB,OAAO,CAAC,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,GAAG,CAAA,IAAI,QAAQ,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;oBAC3F,CAAC,EACD,eAAe,EAAE,4CAAM,CAAC,YAAY,CAAC,EACrC,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,SAAS,EAAE,4CAAM,CAAC,WAAW,CAAC,EAC9B,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,OAAO;oBAEhB,uCAAK,SAAS,EAAE,4CAAM,CAAC,iBAAiB,CAAC;wBACrC,8BAAC,cAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,EAAE,IAAI,EAAC,MAAM,GAAG,CACtD;oBACN,8BAAC,cAAI,QAAE,IAAI,CAAC,IAAI,CAAQ,CAClB,CACb,CAAC;YACN,CAAC,CAAC;YACF,8BAAC,mBAAS,OAAG;YACb,uCAAK,SAAS,EAAE,4CAAM,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,aAAa;gBACvD,uCAAK,SAAS,EAAE,4CAAM,CAAC,iBAAiB,CAAC;oBACrC,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,aAAK,CAAC,KAAK,EAAE,IAAI,EAAC,MAAM,GAAG,CAC7D;gBACN,8BAAC,cAAI,IAAC,KAAK,EAAE,aAAK,CAAC,KAAK,cAAgB,CACtC,CACJ,CACA,CACb,CAAC,CAAC,CAAC,IAAI,CAAC;AACb,CAAC,CAAC;AAtFW,QAAA,sBAAsB,0BAsFjC","sourcesContent":["import React, { ReactElement } from 'react';\nimport { useContext } from 'react';\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\nimport { AuthenticationContext, BookingEngineContext } from '@frontend/contexts';\nimport ScreenSize from '@/util/ScreenSize';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Color } from '@/util/Color';\nimport Text from '@/components/generic/Text';\nimport { NavLink } from 'react-router-dom';\nimport LineBreak from '@/components/generic/LineBreak';\n\nimport styles from './AuthenticatedUserModal.module.scss';\nimport { AccountRoutes } from '@/pages/account/AccountRoutes';\n\ntype AuthenticatedUserModalProps = {\n    open: boolean;\n    anchorEl?: HTMLElement | null;\n    containerEl?: HTMLElement;\n    onClose?: () => void;\n};\n\ntype MenuItemType = {\n    icon: IconType;\n    text: string;\n    link: string;\n};\n\nexport const AuthenticatedUserModal = (props: AuthenticatedUserModalProps): ReactElement | null => {\n    const { open, anchorEl, containerEl } = props;\n\n    const { logout } = useContext(AuthenticationContext);\n\n    const { screenSize } = useContext(BookingEngineContext);\n    const shouldBreakpoint = screenSize <= ScreenSize.Large;\n\n    const onClose = () => {\n        props.onClose?.();\n    };\n\n    const onLogoutClick = () => {\n        onClose();\n        logout();\n    };\n\n    const items: MenuItemType[] = [\n        {\n            icon: IconType.Bed,\n            text: 'Your Reservations',\n            link: AccountRoutes.Reservations.path,\n        },\n        {\n            icon: IconType.Person,\n            text: 'Profile Information',\n            link: AccountRoutes.ProfileDetails.path,\n        },\n        {\n            icon: IconType.CreditCard,\n            text: 'Payment Information',\n            link: AccountRoutes.CardDetails.path,\n        },\n        {\n            icon: IconType.Hotel,\n            text: 'Hotel Information',\n            link: '/hotel-info/',\n        },\n        {\n            icon: IconType.Info,\n            text: 'Need Help?',\n            link: AccountRoutes.Help.path,\n        },\n    ];\n\n    return open ? (\n        <Overlay\n            usePortal\n            followElement={shouldBreakpoint ? null : anchorEl}\n            placement=\"auto-end\"\n            container={containerEl}\n            open={open}\n            onClose={onClose}\n            strategy=\"fixed\"\n            className={styles['logged-in-overlay']}\n        >\n            <div className={styles['list-items']}>\n                {items.map((item, index) => {\n                    return (\n                        <NavLink\n                            isActive={(item, location) => {\n                                return !!item?.url && location.pathname.toLowerCase().includes(item.url.toLowerCase());\n                            }}\n                            activeClassName={styles['--selected']}\n                            to={item.link}\n                            className={styles['list-item']}\n                            key={index}\n                            onClick={onClose}\n                        >\n                            <div className={styles['list-item--icon']}>\n                                <Icon icon={item.icon} color={Color.Grey} size=\"24px\" />\n                            </div>\n                            <Text>{item.text}</Text>\n                        </NavLink>\n                    );\n                })}\n                <LineBreak />\n                <div className={styles['list-item']} onClick={onLogoutClick}>\n                    <div className={styles['list-item--icon']}>\n                        <Icon icon={IconType.LogOut} color={Color.Alert} size=\"24px\" />\n                    </div>\n                    <Text color={Color.Alert}>Log Out</Text>\n                </div>\n            </div>\n        </Overlay>\n    ) : null;\n};\n"]}

package/dist/src/components/generic/modal/SigninModal/UnauthenticatedUserModal.d.ts

@@ -1,6 +1,6 @@
 interface UnauthenticatedUserModalProps {
     open: boolean;
-    anchorEl?: HTMLElement;
+    anchorEl?: HTMLElement | null;
     containerEl?: HTMLElement;
     onClose?: () => void;
     onConfirm?: () => void;

package/dist/src/components/generic/modal/SigninModal/UnauthenticatedUserModal.js

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UnauthenticatedUserModal = exports.EViewingScreen = void 0;
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const Overlay_1 = require("../../Overlay/Overlay");
 const Fade_1 = __importDefault(require("../../../../animations/Fade"));
 const SignInForm_1 = require("../../../User/Forms/SignInForm");
@@ -50,12 +50,12 @@ var EViewingScreen;
 })(EViewingScreen = exports.EViewingScreen || (exports.EViewingScreen = {}));
 const UnauthenticatedUserModal = (props) => {
     const { open, anchorEl, containerEl, onClose } = props;
-    const { reset: cognitoReset } = (0, react_1.useContext)(contexts_1.AuthenticationContext);
-    const [viewingScreen, setViewingScreen] = (0, react_1.useState)(EViewingScreen.SignIn);
-    const nextViewingScreen = (0, react_1.useRef)();
-    const { screenSize } = (0, react_1.useContext)(contexts_1.BookingEngineContext);
+    const { reset: cognitoReset } = (0, react_2.useContext)(contexts_1.AuthenticationContext);
+    const [viewingScreen, setViewingScreen] = (0, react_2.useState)(EViewingScreen.SignIn);
+    const nextViewingScreen = (0, react_2.useRef)(null);
+    const { screenSize } = (0, react_2.useContext)(contexts_1.BookingEngineContext);
     const shouldBreakpoint = screenSize <= ScreenSize_1.default.Large;
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (open) {
             setViewingScreen(EViewingScreen.SignIn);
         }
@@ -79,30 +79,30 @@ const UnauthenticatedUserModal = (props) => {
     const onAnimationExit = () => {
         setViewingScreen(nextViewingScreen.current);
     };
-    const signInFormContent = (React.createElement(React.Fragment, null,
-        React.createElement(SignInForm_1.SignInForm, { onForgotPassword: showForgotPassword }),
-        React.createElement(LineBreak_1.default, null),
-        React.createElement("div", { className: "u-marg-bottom--light" },
-            React.createElement(BEButton_1.default, { isText: true, wide: true, size: 'small', textColor: Color_1.Color.Navy, onClick: showSignUpFormContent }, "Don't have an account?")),
-        React.createElement(BEButton_1.default, { onClick: showSignUpFormContent, wide: true, primary: true }, "Sign Up, It's Free")));
-    const signUpFormContent = (React.createElement(React.Fragment, null,
-        React.createElement(SignUpForm_1.SignUpForm, { onSignedIn: showSignInFormContent }),
-        React.createElement(LineBreak_1.default, null),
-        React.createElement("div", { className: "u-marg-bottom--light" },
-            React.createElement(Text_1.default, { type: Text_1.TextType.Label, bold: true }, "Already have an account?")),
-        React.createElement(Text_1.default, { type: Text_1.TextType.Small },
-            React.createElement(BEButton_1.default, { isText: true, size: 'small', primary: true, onClick: showSignInFormContent }, "Sign in"),
+    const signInFormContent = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(SignInForm_1.SignInForm, { onForgotPassword: showForgotPassword }),
+        react_1.default.createElement(LineBreak_1.default, null),
+        react_1.default.createElement("div", { className: "u-marg-bottom--light" },
+            react_1.default.createElement(BEButton_1.default, { isText: true, wide: true, size: "small", textColor: Color_1.Color.Navy, onClick: showSignUpFormContent }, "Don't have an account?")),
+        react_1.default.createElement(BEButton_1.default, { onClick: showSignUpFormContent, wide: true, primary: true }, "Sign Up, It's Free")));
+    const signUpFormContent = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(SignUpForm_1.SignUpForm, { onSignedIn: showSignInFormContent }),
+        react_1.default.createElement(LineBreak_1.default, null),
+        react_1.default.createElement("div", { className: "u-marg-bottom--light" },
+            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, bold: true }, "Already have an account?")),
+        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
+            react_1.default.createElement(BEButton_1.default, { isText: true, size: "small", primary: true, onClick: showSignInFormContent }, "Sign in"),
             ' ',
             "to log in with your account.")));
-    const forgotPasswordContent = (React.createElement(React.Fragment, null,
-        React.createElement(ForgotPasswordForm_1.ForgotPasswordForm, { onCancelled: showSignInFormContent })));
-    return (React.createElement(Overlay_1.Overlay, { usePortal: true, followElement: shouldBreakpoint ? null : anchorEl, placement: "auto-end", container: containerEl, open: open, onClose: onClose, strategy: "fixed", className: "c-login-overlay" },
-        React.createElement("div", { className: 'u-w-100 u-pad--heavy@m u-pad@m-' },
-            React.createElement(AutoAutoHeight_1.default, { open: true, startOpen: true }, [
+    const forgotPasswordContent = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ForgotPasswordForm_1.ForgotPasswordForm, { onCancelled: showSignInFormContent })));
+    return (react_1.default.createElement(Overlay_1.Overlay, { usePortal: true, followElement: shouldBreakpoint ? null : anchorEl, placement: "auto-end", container: containerEl, open: open, onClose: onClose, strategy: "fixed", className: "c-login-overlay" },
+        react_1.default.createElement("div", { className: "u-w-100 u-pad--heavy@m u-pad@m-" },
+            react_1.default.createElement(AutoAutoHeight_1.default, { open: true, startOpen: true }, [
                 [EViewingScreen.SignIn, signInFormContent],
                 [EViewingScreen.SignUp, signUpFormContent],
                 [EViewingScreen.ForgotPassword, forgotPasswordContent],
-            ].map(([forScreen, content], index) => (React.createElement(Fade_1.default, { open: viewingScreen === forScreen, onExitCompletely: onAnimationExit, key: index }, content)))))));
+            ].map(([forScreen, content], index) => (react_1.default.createElement(Fade_1.default, { open: viewingScreen === forScreen, onExitCompletely: onAnimationExit, key: index }, content)))))));
 };
 exports.UnauthenticatedUserModal = UnauthenticatedUserModal;
 //# sourceMappingURL=UnauthenticatedUserModal.js.map

package/dist/src/components/generic/modal/SigninModal/UnauthenticatedUserModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"UnauthenticatedUserModal.js","sourceRoot":"/","sources":["src/components/generic/modal/SigninModal/UnauthenticatedUserModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useEffect, useContext, useState, useRef } from 'react';\n\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\nimport FadeAnimation from '@/animations/Fade';\nimport { SignInForm } from '@/components/User/Forms/SignInForm';\nimport { AuthenticationContext, BookingEngineContext } from '@frontend/contexts';\nimport ScreenSize from '@/util/ScreenSize';\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport { SignUpForm } from '@/components/User/Forms/SignUpForm';\nimport { ForgotPasswordForm } from '@/components/User/Forms/ForgotPasswordForm';\nimport LineBreak from '@/components/generic/LineBreak';\nimport BEButton from '@/components/generic/BEButton';\nimport { Color } from '@/util/Color';\nimport Text, { TextType } from '@/components/generic/Text';\n\n// TODO: Move file to not be in a generic location\n\ninterface UnauthenticatedUserModalProps {\n    open: boolean;\n    anchorEl?: HTMLElement;\n    containerEl?: HTMLElement;\n    onClose?: () => void;\n    onConfirm?: () => void;\n}\n\nexport enum EViewingScreen {\n    Default = 'Default',\n    SignIn = 'SignIn',\n    SignUp = 'SignUp',\n    ForgotPassword = 'ForgotPassword',\n}\n\nexport const UnauthenticatedUserModal = (props: UnauthenticatedUserModalProps) => {\n    const { open, anchorEl, containerEl, onClose } = props;\n    const { reset: cognitoReset } = useContext(AuthenticationContext);\n\n    const [viewingScreen, setViewingScreen] = useState<EViewingScreen>(EViewingScreen.SignIn);\n\n    const nextViewingScreen = useRef<EViewingScreen>();\n\n    const { screenSize } = useContext(BookingEngineContext);\n    const shouldBreakpoint = screenSize <= ScreenSize.Large;\n\n    useEffect(() => {\n        if (open) {\n            setViewingScreen(EViewingScreen.SignIn);\n        }\n    }, [open]);\n\n    const reset = () => {\n        cognitoReset();\n        setViewingScreen(null);\n    };\n\n    const showForgotPassword = () => {\n        reset();\n        nextViewingScreen.current = EViewingScreen.ForgotPassword;\n    };\n\n    const showSignInFormContent = () => {\n        reset();\n        nextViewingScreen.current = EViewingScreen.SignIn;\n    };\n\n    const showSignUpFormContent = () => {\n        reset();\n        nextViewingScreen.current = EViewingScreen.SignUp;\n    };\n\n    const onAnimationExit = () => {\n        setViewingScreen(nextViewingScreen.current);\n    };\n\n    const signInFormContent = (\n        <>\n            <SignInForm onForgotPassword={showForgotPassword} />\n            <LineBreak />\n            <div className=\"u-marg-bottom--light\">\n                <BEButton isText={true} wide={true} size={'small'} textColor={Color.Navy} onClick={showSignUpFormContent}>\n                    Don't have an account?\n                </BEButton>\n            </div>\n            <BEButton onClick={showSignUpFormContent} wide={true} primary={true}>\n                Sign Up, It's Free\n            </BEButton>\n        </>\n    );\n\n    const signUpFormContent = (\n        <>\n            <SignUpForm onSignedIn={showSignInFormContent} />\n            <LineBreak />\n            <div className=\"u-marg-bottom--light\">\n                <Text type={TextType.Label} bold={true}>\n                    Already have an account?\n                </Text>\n            </div>\n            <Text type={TextType.Small}>\n                <BEButton isText={true} size={'small'} primary={true} onClick={showSignInFormContent}>\n                    Sign in\n                </BEButton>{' '}\n                to log in with your account.\n            </Text>\n        </>\n    );\n\n    const forgotPasswordContent = (\n        <>\n            <ForgotPasswordForm onCancelled={showSignInFormContent} />\n        </>\n    );\n\n    return (\n        <Overlay\n            usePortal={true}\n            followElement={shouldBreakpoint ? null : anchorEl}\n            placement=\"auto-end\"\n            container={containerEl}\n            open={open}\n            onClose={onClose}\n            strategy=\"fixed\"\n            className=\"c-login-overlay\"\n        >\n            <div className={'u-w-100 u-pad--heavy@m u-pad@m-'}>\n                <AutoAutoHeight open={true} startOpen={true}>\n                    {[\n                        [EViewingScreen.SignIn, signInFormContent],\n                        [EViewingScreen.SignUp, signUpFormContent],\n                        [EViewingScreen.ForgotPassword, forgotPasswordContent],\n                    ].map(([forScreen, content], index) => (\n                        <FadeAnimation open={viewingScreen === forScreen} onExitCompletely={onAnimationExit} key={index}>\n                            {content as React.ReactElement}\n                        </FadeAnimation>\n                    ))}\n                </AutoAutoHeight>\n            </div>\n        </Overlay>\n    );\n};\n"]}
+{"version":3,"file":"UnauthenticatedUserModal.js","sourceRoot":"/","sources":["src/components/generic/modal/SigninModal/UnauthenticatedUserModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { useEffect, useContext, useState, useRef } from 'react';\n\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\nimport FadeAnimation from '@/animations/Fade';\nimport { SignInForm } from '@/components/User/Forms/SignInForm';\nimport { AuthenticationContext, BookingEngineContext } from '@frontend/contexts';\nimport ScreenSize from '@/util/ScreenSize';\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport { SignUpForm } from '@/components/User/Forms/SignUpForm';\nimport { ForgotPasswordForm } from '@/components/User/Forms/ForgotPasswordForm';\nimport LineBreak from '@/components/generic/LineBreak';\nimport BEButton from '@/components/generic/BEButton';\nimport { Color } from '@/util/Color';\nimport Text, { TextType } from '@/components/generic/Text';\n\n// TODO: Move file to not be in a generic location\n\ninterface UnauthenticatedUserModalProps {\n    open: boolean;\n    anchorEl?: HTMLElement | null;\n    containerEl?: HTMLElement;\n    onClose?: () => void;\n    onConfirm?: () => void;\n}\n\nexport enum EViewingScreen {\n    Default = 'Default',\n    SignIn = 'SignIn',\n    SignUp = 'SignUp',\n    ForgotPassword = 'ForgotPassword',\n}\n\nexport const UnauthenticatedUserModal = (props: UnauthenticatedUserModalProps) => {\n    const { open, anchorEl, containerEl, onClose } = props;\n    const { reset: cognitoReset } = useContext(AuthenticationContext);\n\n    const [viewingScreen, setViewingScreen] = useState<EViewingScreen | null>(EViewingScreen.SignIn);\n\n    const nextViewingScreen = useRef<EViewingScreen | null>(null);\n\n    const { screenSize } = useContext(BookingEngineContext);\n    const shouldBreakpoint = screenSize <= ScreenSize.Large;\n\n    useEffect(() => {\n        if (open) {\n            setViewingScreen(EViewingScreen.SignIn);\n        }\n    }, [open]);\n\n    const reset = () => {\n        cognitoReset();\n        setViewingScreen(null);\n    };\n\n    const showForgotPassword = () => {\n        reset();\n        nextViewingScreen.current = EViewingScreen.ForgotPassword;\n    };\n\n    const showSignInFormContent = () => {\n        reset();\n        nextViewingScreen.current = EViewingScreen.SignIn;\n    };\n\n    const showSignUpFormContent = () => {\n        reset();\n        nextViewingScreen.current = EViewingScreen.SignUp;\n    };\n\n    const onAnimationExit = () => {\n        setViewingScreen(nextViewingScreen.current);\n    };\n\n    const signInFormContent = (\n        <>\n            <SignInForm onForgotPassword={showForgotPassword} />\n            <LineBreak />\n            <div className=\"u-marg-bottom--light\">\n                <BEButton isText wide size=\"small\" textColor={Color.Navy} onClick={showSignUpFormContent}>\n                    Don&apos;t have an account?\n                </BEButton>\n            </div>\n            <BEButton onClick={showSignUpFormContent} wide primary>\n                Sign Up, It&apos;s Free\n            </BEButton>\n        </>\n    );\n\n    const signUpFormContent = (\n        <>\n            <SignUpForm onSignedIn={showSignInFormContent} />\n            <LineBreak />\n            <div className=\"u-marg-bottom--light\">\n                <Text type={TextType.Label} bold>\n                    Already have an account?\n                </Text>\n            </div>\n            <Text type={TextType.Small}>\n                <BEButton isText size=\"small\" primary onClick={showSignInFormContent}>\n                    Sign in\n                </BEButton>{' '}\n                to log in with your account.\n            </Text>\n        </>\n    );\n\n    const forgotPasswordContent = (\n        <>\n            <ForgotPasswordForm onCancelled={showSignInFormContent} />\n        </>\n    );\n\n    return (\n        <Overlay\n            usePortal\n            followElement={shouldBreakpoint ? null : anchorEl}\n            placement=\"auto-end\"\n            container={containerEl}\n            open={open}\n            onClose={onClose}\n            strategy=\"fixed\"\n            className=\"c-login-overlay\"\n        >\n            <div className=\"u-w-100 u-pad--heavy@m u-pad@m-\">\n                <AutoAutoHeight open startOpen>\n                    {[\n                        [EViewingScreen.SignIn, signInFormContent],\n                        [EViewingScreen.SignUp, signUpFormContent],\n                        [EViewingScreen.ForgotPassword, forgotPasswordContent],\n                    ].map(([forScreen, content], index) => (\n                        <FadeAnimation open={viewingScreen === forScreen} onExitCompletely={onAnimationExit} key={index}>\n                            {content as React.ReactElement}\n                        </FadeAnimation>\n                    ))}\n                </AutoAutoHeight>\n            </div>\n        </Overlay>\n    );\n};\n"]}

package/dist/src/components/generic/modal/SimpleModal.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 export declare enum SimpleModalSize {
     ExtraSmall = "--extra-small",
     Small = "--small",
@@ -14,7 +14,7 @@ export interface SimpleModalProps {
     open?: boolean;
     alignCenter?: boolean;
     onClose?: () => void;
-    modalTarget?: HTMLElement;
+    modalTarget?: HTMLElement | null;
     style?: any;
     overflowVisible?: boolean;
     className?: string;

package/dist/src/components/generic/modal/SimpleModal.js

@@ -27,11 +27,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SimpleModalSize = void 0;
-const React = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const Text_1 = __importDefault(require("../Text"));
 const Color_1 = require("../../../util/Color");
 const Icon_1 = __importStar(require("../Icon/Icon"));
-const react_1 = require("react");
+const react_2 = require("react");
 const classnames_1 = __importDefault(require("classnames"));
 const ScreenSize_1 = __importDefault(require("../../../util/ScreenSize"));
 const Fade_1 = __importDefault(require("../../../animations/Fade"));
@@ -48,12 +48,12 @@ var SimpleModalSize;
 })(SimpleModalSize = exports.SimpleModalSize || (exports.SimpleModalSize = {}));
 function SimpleModal(props) {
     var _a;
-    const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);
-    const [modalId, setModalId] = (0, react_1.useState)(null);
-    const modalBody = (0, react_1.useRef)(null);
-    const overlayRef = (0, react_1.useRef)(null);
+    const context = (0, react_2.useContext)(contexts_1.BookingEngineContext);
+    const [modalId, setModalId] = (0, react_2.useState)(null);
+    const modalBody = (0, react_2.useRef)(null);
+    const overlayRef = (0, react_2.useRef)(null);
     const { onBodyClickExcept } = (0, hooks_1.useBodyClick)();
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (!(modalBody === null || modalBody === void 0 ? void 0 : modalBody.current)) {
             return;
         }
@@ -64,7 +64,7 @@ function SimpleModal(props) {
             remove();
         };
     }, [props.open, modalBody, props.onClose]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         setModalId(Math.random());
     }, []);
     const close = () => {
@@ -72,8 +72,7 @@ function SimpleModal(props) {
             props.onClose();
         }
     };
-    const classes = (0, classnames_1.default)(SimpleModal_module_scss_1.default['roomstay-modal'], {
-        [SimpleModal_module_scss_1.default[props.size]]: !!props.size,
+    const classes = (0, classnames_1.default)(SimpleModal_module_scss_1.default['roomstay-modal'], props.size && SimpleModal_module_scss_1.default[props.size], {
         [SimpleModal_module_scss_1.default['--centered']]: props.alignCenter,
         [SimpleModal_module_scss_1.default['--overflow-visible']]: props.overflowVisible,
     });
@@ -100,22 +99,22 @@ function SimpleModal(props) {
     //     }
     // }, [modalContext?.modalStatus]);
     return props.open ? ( // TODO: Need an actual isVisible state value instead of relying on the prop since we can't animate out.
-    React.createElement(Portal_1.RoomstayPortal, { target: (_a = props.modalTarget) !== null && _a !== void 0 ? _a : document.body },
-        React.createElement("div", { className: (0, classnames_1.default)(SimpleModal_module_scss_1.default['roomstay-overlay'], props.className), ref: overlayRef },
-            React.createElement(Fade_1.default, { open: props.open },
-                React.createElement("div", { ref: modalBody, className: classes, style: props.title ? {} : { paddingTop: 0 } },
-                    props.title ? (React.createElement("div", { className: SimpleModal_module_scss_1.default['roomstay-modal--title'] },
-                        React.createElement(Text_1.default, { color: Color_1.Color.White },
-                            React.createElement("strong", null, props.title)),
-                        React.createElement(Icon_1.default, { icon: Icon_1.IconType.Close, color: Color_1.Color.White, size: "24px", onClick: close }))) : (React.createElement("div", { className: `room-gallery-slider__icon-lightbox${props.size === SimpleModalSize.ExtraSmall ? '' : '-map'}` },
-                        React.createElement(Icon_1.default, { icon: Icon_1.IconType.Close, size: "24px", onClick: close }))),
-                    React.createElement("div", { className: "simple-modal--content" },
+    react_1.default.createElement(Portal_1.RoomstayPortal, { target: (_a = props.modalTarget) !== null && _a !== void 0 ? _a : document.body },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(SimpleModal_module_scss_1.default['roomstay-overlay'], props.className), ref: overlayRef },
+            react_1.default.createElement(Fade_1.default, { open: props.open },
+                react_1.default.createElement("div", { ref: modalBody, className: classes, style: props.title ? {} : { paddingTop: 0 } },
+                    props.title ? (react_1.default.createElement("div", { className: SimpleModal_module_scss_1.default['roomstay-modal--title'] },
+                        react_1.default.createElement(Text_1.default, { color: Color_1.Color.White },
+                            react_1.default.createElement("strong", null, props.title)),
+                        react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Close, color: Color_1.Color.White, size: "24px", onClick: close }))) : (react_1.default.createElement("div", { className: `room-gallery-slider__icon-lightbox${props.size === SimpleModalSize.ExtraSmall ? '' : '-map'}` },
+                        react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Close, size: "24px", onClick: close }))),
+                    react_1.default.createElement("div", { className: "simple-modal--content" },
                         props.children,
                         props.desktopFooter &&
                             context.screenSize > ScreenSize_1.default.Medium && // TODO: refactor this to be variable
                             props.desktopFooter),
-                    props.mobileFooter && context.screenSize <= ScreenSize_1.default.Medium && (React.createElement("div", { className: SimpleModal_module_scss_1.default['roomstay-modal--footer'] }, props.mobileFooter // TODO: refactor this to be variable
-                    ))))))) : (React.createElement(React.Fragment, null));
+                    props.mobileFooter && context.screenSize <= ScreenSize_1.default.Medium && (react_1.default.createElement("div", { className: SimpleModal_module_scss_1.default['roomstay-modal--footer'] }, props.mobileFooter // TODO: refactor this to be variable
+                    ))))))) : (react_1.default.createElement(react_1.default.Fragment, null));
 }
 exports.default = SimpleModal;
 //# sourceMappingURL=SimpleModal.js.map

package/dist/src/components/generic/modal/SimpleModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleModal.js","sourceRoot":"/","sources":["src/components/generic/modal/SimpleModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Text from '@/components/generic/Text';\nimport { Color } from '@/util/Color';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { useContext, useEffect, useState, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport ScreenSize from '@/util/ScreenSize';\nimport FadeAnimation from '@/animations/Fade';\n\nimport { BookingEngineContext } from '@frontend/contexts';\n\nimport styles from './SimpleModal.module.scss';\nimport { RoomstayPortal } from '@/components/generic/Portal/Portal';\nimport { useBodyClick } from '@frontend/hooks';\n\nexport enum SimpleModalSize {\n    ExtraSmall = '--extra-small',\n    Small = '--small',\n    Normal = '--normal',\n    Large = '--large',\n}\n\nexport interface SimpleModalProps {\n    children: React.ReactElement;\n\n    mobileFooter?: React.ReactElement;\n    desktopFooter?: React.ReactElement;\n\n    title?: string;\n    size?: SimpleModalSize;\n\n    open?: boolean;\n    alignCenter?: boolean;\n\n    onClose?: () => void;\n\n    modalTarget?: HTMLElement;\n    style?: any;\n    overflowVisible?: boolean;\n    className?: string;\n}\n\nexport default function SimpleModal(props: SimpleModalProps) {\n    const context = useContext(BookingEngineContext);\n\n    const [modalId, setModalId] = useState<number | null>(null);\n    const modalBody = useRef(null);\n    const overlayRef = useRef(null);\n\n    const { onBodyClickExcept } = useBodyClick();\n\n    useEffect(() => {\n        if (!modalBody?.current) {\n            return;\n        }\n\n        const { remove } = onBodyClickExcept(\n            () => {\n                close();\n            },\n            modalBody.current,\n            overlayRef.current\n        );\n\n        return () => {\n            remove();\n        };\n    }, [props.open, modalBody, props.onClose]);\n\n    useEffect(() => {\n        setModalId(Math.random());\n    }, []);\n\n    const close = () => {\n        if (props.onClose) {\n            props.onClose();\n        }\n    };\n\n    const classes = classNames(styles['roomstay-modal'], {\n        [(styles as any)[props.size]]: !!props.size,\n        [styles['--centered']]: props.alignCenter,\n        [styles['--overflow-visible']]: props.overflowVisible,\n    });\n\n    // useLayoutEffect(() => {\n    //     modalContext?.addModalStatus(props.open, modalId);\n    // }, [props.open]);\n\n    // useLayoutEffect(() => {\n    //     const triptease: HTMLElement = document.querySelector('iframe.tt-guestpa');\n    //     const hiWidget: HTMLElement = document.querySelector('.hi-widget-container .hi-launcher-container');\n\n    //     if (modalContext?.isAnyModalOpen()) {\n    //         if (triptease) {\n    //             triptease.style.display = 'none';\n    //         }\n\n    //         if (hiWidget) {\n    //             hiWidget.classList.add('--moved');\n    //         }\n    //     } else {\n    //         if (triptease) {\n    //             triptease.style.display = 'block';\n    //         }\n\n    //         if (hiWidget) {\n    //             hiWidget.classList.remove('--moved');\n    //         }\n    //     }\n    // }, [modalContext?.modalStatus]);\n\n    return props.open ? ( // TODO: Need an actual isVisible state value instead of relying on the prop since we can't animate out.\n        <RoomstayPortal target={props.modalTarget ?? document.body}>\n            <div className={classNames(styles['roomstay-overlay'], props.className)} ref={overlayRef}>\n                <FadeAnimation open={props.open}>\n                    <div ref={modalBody} className={classes} style={props.title ? {} : { paddingTop: 0 }}>\n                        {props.title ? (\n                            <div className={styles['roomstay-modal--title']}>\n                                <Text color={Color.White}>\n                                    <strong>{props.title}</strong>\n                                </Text>\n                                <Icon icon={IconType.Close} color={Color.White} size=\"24px\" onClick={close} />\n                            </div>\n                        ) : (\n                            <div className={`room-gallery-slider__icon-lightbox${props.size === SimpleModalSize.ExtraSmall ? '' : '-map'}`}>\n                                <Icon icon={IconType.Close} size=\"24px\" onClick={close} />\n                            </div>\n                        )}\n\n                        <div className=\"simple-modal--content\">\n                            {props.children}\n\n                            {props.desktopFooter &&\n                                context.screenSize > ScreenSize.Medium && // TODO: refactor this to be variable\n                                props.desktopFooter}\n                        </div>\n\n                        {props.mobileFooter && context.screenSize <= ScreenSize.Medium && (\n                            <div className={styles['roomstay-modal--footer']}>\n                                {\n                                    props.mobileFooter // TODO: refactor this to be variable\n                                }\n                            </div>\n                        )}\n                    </div>\n                </FadeAnimation>\n            </div>\n        </RoomstayPortal>\n    ) : (\n        <></>\n    );\n}\n"]}
+{"version":3,"file":"SimpleModal.js","sourceRoot":"/","sources":["src/components/generic/modal/SimpleModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport Text from '@/components/generic/Text';\nimport { Color } from '@/util/Color';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { useContext, useEffect, useState, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport ScreenSize from '@/util/ScreenSize';\nimport FadeAnimation from '@/animations/Fade';\n\nimport { BookingEngineContext } from '@frontend/contexts';\n\nimport styles from './SimpleModal.module.scss';\nimport { RoomstayPortal } from '@/components/generic/Portal/Portal';\nimport { useBodyClick } from '@frontend/hooks';\n\nexport enum SimpleModalSize {\n    ExtraSmall = '--extra-small',\n    Small = '--small',\n    Normal = '--normal',\n    Large = '--large',\n}\n\nexport interface SimpleModalProps {\n    children: React.ReactElement;\n\n    mobileFooter?: React.ReactElement;\n    desktopFooter?: React.ReactElement;\n\n    title?: string;\n    size?: SimpleModalSize;\n\n    open?: boolean;\n    alignCenter?: boolean;\n\n    onClose?: () => void;\n\n    modalTarget?: HTMLElement | null;\n    style?: any;\n    overflowVisible?: boolean;\n    className?: string;\n}\n\nexport default function SimpleModal(props: SimpleModalProps) {\n    const context = useContext(BookingEngineContext);\n\n    const [modalId, setModalId] = useState<number | null>(null);\n    const modalBody = useRef(null);\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n\n    const { onBodyClickExcept } = useBodyClick();\n\n    useEffect(() => {\n        if (!modalBody?.current) {\n            return;\n        }\n\n        const { remove } = onBodyClickExcept(\n            () => {\n                close();\n            },\n            modalBody.current,\n            overlayRef.current\n        );\n\n        return () => {\n            remove();\n        };\n    }, [props.open, modalBody, props.onClose]);\n\n    useEffect(() => {\n        setModalId(Math.random());\n    }, []);\n\n    const close = () => {\n        if (props.onClose) {\n            props.onClose();\n        }\n    };\n\n    const classes = classNames(styles['roomstay-modal'], props.size && styles[props.size], {\n        [styles['--centered']]: props.alignCenter,\n        [styles['--overflow-visible']]: props.overflowVisible,\n    });\n\n    // useLayoutEffect(() => {\n    //     modalContext?.addModalStatus(props.open, modalId);\n    // }, [props.open]);\n\n    // useLayoutEffect(() => {\n    //     const triptease: HTMLElement = document.querySelector('iframe.tt-guestpa');\n    //     const hiWidget: HTMLElement = document.querySelector('.hi-widget-container .hi-launcher-container');\n\n    //     if (modalContext?.isAnyModalOpen()) {\n    //         if (triptease) {\n    //             triptease.style.display = 'none';\n    //         }\n\n    //         if (hiWidget) {\n    //             hiWidget.classList.add('--moved');\n    //         }\n    //     } else {\n    //         if (triptease) {\n    //             triptease.style.display = 'block';\n    //         }\n\n    //         if (hiWidget) {\n    //             hiWidget.classList.remove('--moved');\n    //         }\n    //     }\n    // }, [modalContext?.modalStatus]);\n\n    return props.open ? ( // TODO: Need an actual isVisible state value instead of relying on the prop since we can't animate out.\n        <RoomstayPortal target={props.modalTarget ?? document.body}>\n            <div className={classNames(styles['roomstay-overlay'], props.className)} ref={overlayRef}>\n                <FadeAnimation open={props.open}>\n                    <div ref={modalBody} className={classes} style={props.title ? {} : { paddingTop: 0 }}>\n                        {props.title ? (\n                            <div className={styles['roomstay-modal--title']}>\n                                <Text color={Color.White}>\n                                    <strong>{props.title}</strong>\n                                </Text>\n                                <Icon icon={IconType.Close} color={Color.White} size=\"24px\" onClick={close} />\n                            </div>\n                        ) : (\n                            <div className={`room-gallery-slider__icon-lightbox${props.size === SimpleModalSize.ExtraSmall ? '' : '-map'}`}>\n                                <Icon icon={IconType.Close} size=\"24px\" onClick={close} />\n                            </div>\n                        )}\n\n                        <div className=\"simple-modal--content\">\n                            {props.children}\n\n                            {props.desktopFooter &&\n                                context.screenSize > ScreenSize.Medium && // TODO: refactor this to be variable\n                                props.desktopFooter}\n                        </div>\n\n                        {props.mobileFooter && context.screenSize <= ScreenSize.Medium && (\n                            <div className={styles['roomstay-modal--footer']}>\n                                {\n                                    props.mobileFooter // TODO: refactor this to be variable\n                                }\n                            </div>\n                        )}\n                    </div>\n                </FadeAnimation>\n            </div>\n        </RoomstayPortal>\n    ) : (\n        <></>\n    );\n}\n"]}

package/dist/src/components/generic/modal/TabbedModal.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 export interface TabbedModalTab {
     title: string;
     content: React.ReactElement | any;

package/dist/src/components/generic/modal/TabbedModal.js

@@ -27,33 +27,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const SimpleModal_1 = __importStar(require("./SimpleModal"));
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const BEButton_1 = __importDefault(require("../BEButton"));
 function TabbedModal(props) {
     var _a;
-    const [openTab, setOpenTab] = (0, react_1.useState)((_a = props.openTab) !== null && _a !== void 0 ? _a : '');
-    (0, react_1.useEffect)(() => {
+    const [openTab, setOpenTab] = (0, react_2.useState)((_a = props.openTab) !== null && _a !== void 0 ? _a : '');
+    (0, react_2.useEffect)(() => {
         if (openTab) {
-            setOpenTab(props.openTab);
+            setOpenTab(props.openTab || '');
         }
     }, [props.openTab]);
     const currentTab = props.tabs[openTab];
     const onModalClose = () => {
         return props.onClose();
     };
-    return (React.createElement(SimpleModal_1.default, { title: currentTab.title, open: props.isOpen, size: SimpleModal_1.SimpleModalSize.Small, desktopFooter: React.createElement("div", { className: "u-marg-heavy u-marg@m-" }, currentTab.footer), mobileFooter: currentTab.footer, onClose: onModalClose },
-        React.createElement("div", { className: "u-marg-heavy u-marg@m-" },
-            React.createElement("div", { className: "roomstay-tabbed-modal" },
-                React.createElement("div", { className: "roomstay-tabbed-modal--tabs" }, Object.keys(props.tabs).map((key) => {
+    return (react_1.default.createElement(SimpleModal_1.default, { title: currentTab.title, open: props.isOpen, size: SimpleModal_1.SimpleModalSize.Small, desktopFooter: react_1.default.createElement("div", { className: "u-marg-heavy u-marg@m-" }, currentTab.footer), mobileFooter: currentTab.footer, onClose: onModalClose },
+        react_1.default.createElement("div", { className: "u-marg-heavy u-marg@m-" },
+            react_1.default.createElement("div", { className: "roomstay-tabbed-modal" },
+                react_1.default.createElement("div", { className: "roomstay-tabbed-modal--tabs" }, Object.keys(props.tabs).map((key) => {
                     const thisTab = props.tabs[key];
                     const openTabOnClick = () => {
                         setOpenTab(key);
                     };
-                    return (React.createElement("div", { key: key, className: "roomstay-tabbed-modal--tab" },
-                        React.createElement(BEButton_1.default, { filled: currentTab.title === thisTab.title, primary: true, onClick: openTabOnClick }, thisTab.title)));
+                    return (react_1.default.createElement("div", { key: key, className: "roomstay-tabbed-modal--tab" },
+                        react_1.default.createElement(BEButton_1.default, { filled: currentTab.title === thisTab.title, primary: true, onClick: openTabOnClick }, thisTab.title)));
                 })),
-                React.createElement("div", { className: "roomstay-tab-content" }, currentTab.content)))));
+                react_1.default.createElement("div", { className: "roomstay-tab-content" }, currentTab.content)))));
 }
 exports.default = TabbedModal;
 //# sourceMappingURL=TabbedModal.js.map

package/dist/src/components/generic/modal/TabbedModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabbedModal.js","sourceRoot":"/","sources":["src/components/generic/modal/TabbedModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6DAA6D;AAC7D,6CAA+B;AAC/B,iCAA4C;AAC5C,6EAAqD;AAiBrD,SAAwB,WAAW,CAAC,KAAoB;;IACpD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,MAAA,KAAK,CAAC,OAAO,mCAAI,EAAE,CAAC,CAAC;IAE5D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,OAAO,EAAE;YACT,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAC7B;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAEpB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACvC,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,OAAO,KAAK,CAAC,OAAO,EAAE,CAAC;IAC3B,CAAC,CAAC;IACF,OAAO,CACH,oBAAC,qBAAW,IACR,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,IAAI,EAAE,KAAK,CAAC,MAAM,EAClB,IAAI,EAAE,6BAAe,CAAC,KAAK,EAC3B,aAAa,EAAE,6BAAK,SAAS,EAAC,wBAAwB,IAAE,UAAU,CAAC,MAAM,CAAO,EAChF,YAAY,EAAE,UAAU,CAAC,MAAM,EAC/B,OAAO,EAAE,YAAY;QAErB,6BAAK,SAAS,EAAC,wBAAwB;YACnC,6BAAK,SAAS,EAAC,uBAAuB;gBAClC,6BAAK,SAAS,EAAC,6BAA6B,IACvC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;oBACjC,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;oBAChC,MAAM,cAAc,GAAG,GAAG,EAAE;wBACxB,UAAU,CAAC,GAAG,CAAC,CAAC;oBACpB,CAAC,CAAC;oBACF,OAAO,CACH,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,4BAA4B;wBACjD,oBAAC,kBAAQ,IAAC,MAAM,EAAE,UAAU,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,IACvF,OAAO,CAAC,KAAK,CACP,CACT,CACT,CAAC;gBACN,CAAC,CAAC,CACA;gBACN,6BAAK,SAAS,EAAC,sBAAsB,IAAE,UAAU,CAAC,OAAO,CAAO,CAC9D,CACJ,CACI,CACjB,CAAC;AACN,CAAC;AA5CD,8BA4CC","sourcesContent":["import SimpleModal, { SimpleModalSize } from './SimpleModal';\nimport * as React from 'react';\nimport { useState, useEffect } from 'react';\nimport BEButton from '@/components/generic/BEButton';\n\nexport interface TabbedModalTab {\n    title: string;\n    content: React.ReactElement | any;\n    footer: React.ReactElement | any;\n}\n\ninterface TabModalProps {\n    isOpen: boolean;\n\n    tabs: { [name: string]: TabbedModalTab };\n    onClose: () => void;\n\n    openTab?: string;\n}\n\nexport default function TabbedModal(props: TabModalProps) {\n    const [openTab, setOpenTab] = useState(props.openTab ?? '');\n\n    useEffect(() => {\n        if (openTab) {\n            setOpenTab(props.openTab);\n        }\n    }, [props.openTab]);\n\n    const currentTab = props.tabs[openTab];\n    const onModalClose = () => {\n        return props.onClose();\n    };\n    return (\n        <SimpleModal\n            title={currentTab.title}\n            open={props.isOpen}\n            size={SimpleModalSize.Small}\n            desktopFooter={<div className=\"u-marg-heavy u-marg@m-\">{currentTab.footer}</div>}\n            mobileFooter={currentTab.footer}\n            onClose={onModalClose}\n        >\n            <div className=\"u-marg-heavy u-marg@m-\">\n                <div className=\"roomstay-tabbed-modal\">\n                    <div className=\"roomstay-tabbed-modal--tabs\">\n                        {Object.keys(props.tabs).map((key) => {\n                            const thisTab = props.tabs[key];\n                            const openTabOnClick = () => {\n                                setOpenTab(key);\n                            };\n                            return (\n                                <div key={key} className=\"roomstay-tabbed-modal--tab\">\n                                    <BEButton filled={currentTab.title === thisTab.title} primary={true} onClick={openTabOnClick}>\n                                        {thisTab.title}\n                                    </BEButton>\n                                </div>\n                            );\n                        })}\n                    </div>\n                    <div className=\"roomstay-tab-content\">{currentTab.content}</div>\n                </div>\n            </div>\n        </SimpleModal>\n    );\n}\n"]}
+{"version":3,"file":"TabbedModal.js","sourceRoot":"/","sources":["src/components/generic/modal/TabbedModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6DAA6D;AAC7D,kDAA0B;AAC1B,iCAA4C;AAC5C,6EAAqD;AAiBrD,SAAwB,WAAW,CAAC,KAAoB;;IACpD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,MAAA,KAAK,CAAC,OAAO,mCAAI,EAAE,CAAC,CAAC;IAE5D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,OAAO,EAAE;YACT,UAAU,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;SACnC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAEpB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACvC,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,OAAO,KAAK,CAAC,OAAO,EAAE,CAAC;IAC3B,CAAC,CAAC;IACF,OAAO,CACH,8BAAC,qBAAW,IACR,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,IAAI,EAAE,KAAK,CAAC,MAAM,EAClB,IAAI,EAAE,6BAAe,CAAC,KAAK,EAC3B,aAAa,EAAE,uCAAK,SAAS,EAAC,wBAAwB,IAAE,UAAU,CAAC,MAAM,CAAO,EAChF,YAAY,EAAE,UAAU,CAAC,MAAM,EAC/B,OAAO,EAAE,YAAY;QAErB,uCAAK,SAAS,EAAC,wBAAwB;YACnC,uCAAK,SAAS,EAAC,uBAAuB;gBAClC,uCAAK,SAAS,EAAC,6BAA6B,IACvC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;oBACjC,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;oBAChC,MAAM,cAAc,GAAG,GAAG,EAAE;wBACxB,UAAU,CAAC,GAAG,CAAC,CAAC;oBACpB,CAAC,CAAC;oBACF,OAAO,CACH,uCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,4BAA4B;wBACjD,8BAAC,kBAAQ,IAAC,MAAM,EAAE,UAAU,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK,EAAE,OAAO,QAAC,OAAO,EAAE,cAAc,IAChF,OAAO,CAAC,KAAK,CACP,CACT,CACT,CAAC;gBACN,CAAC,CAAC,CACA;gBACN,uCAAK,SAAS,EAAC,sBAAsB,IAAE,UAAU,CAAC,OAAO,CAAO,CAC9D,CACJ,CACI,CACjB,CAAC;AACN,CAAC;AA5CD,8BA4CC","sourcesContent":["import SimpleModal, { SimpleModalSize } from './SimpleModal';\nimport React from 'react';\nimport { useState, useEffect } from 'react';\nimport BEButton from '@/components/generic/BEButton';\n\nexport interface TabbedModalTab {\n    title: string;\n    content: React.ReactElement | any;\n    footer: React.ReactElement | any;\n}\n\ninterface TabModalProps {\n    isOpen: boolean;\n\n    tabs: { [name: string]: TabbedModalTab };\n    onClose: () => void;\n\n    openTab?: string;\n}\n\nexport default function TabbedModal(props: TabModalProps) {\n    const [openTab, setOpenTab] = useState(props.openTab ?? '');\n\n    useEffect(() => {\n        if (openTab) {\n            setOpenTab(props.openTab || '');\n        }\n    }, [props.openTab]);\n\n    const currentTab = props.tabs[openTab];\n    const onModalClose = () => {\n        return props.onClose();\n    };\n    return (\n        <SimpleModal\n            title={currentTab.title}\n            open={props.isOpen}\n            size={SimpleModalSize.Small}\n            desktopFooter={<div className=\"u-marg-heavy u-marg@m-\">{currentTab.footer}</div>}\n            mobileFooter={currentTab.footer}\n            onClose={onModalClose}\n        >\n            <div className=\"u-marg-heavy u-marg@m-\">\n                <div className=\"roomstay-tabbed-modal\">\n                    <div className=\"roomstay-tabbed-modal--tabs\">\n                        {Object.keys(props.tabs).map((key) => {\n                            const thisTab = props.tabs[key];\n                            const openTabOnClick = () => {\n                                setOpenTab(key);\n                            };\n                            return (\n                                <div key={key} className=\"roomstay-tabbed-modal--tab\">\n                                    <BEButton filled={currentTab.title === thisTab.title} primary onClick={openTabOnClick}>\n                                        {thisTab.title}\n                                    </BEButton>\n                                </div>\n                            );\n                        })}\n                    </div>\n                    <div className=\"roomstay-tab-content\">{currentTab.content}</div>\n                </div>\n            </div>\n        </SimpleModal>\n    );\n}\n"]}

package/dist/src/components/generic/radio/RadioFields.js

@@ -26,12 +26,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const Icon_1 = __importStar(require("../Icon/Icon"));
 const Text_1 = __importStar(require("../Text"));
 const classnames_1 = __importDefault(require("classnames"));
-const styles = __importStar(require("./RadioFields.module.scss"));
-const cx = classnames_1.default.bind(styles);
+const RadioFields_module_scss_1 = __importDefault(require("./RadioFields.module.scss"));
+const cx = classnames_1.default.bind(RadioFields_module_scss_1.default);
 function RadioFields(props) {
     const classes = cx({
         'radio-group': true,
@@ -40,20 +40,20 @@ function RadioFields(props) {
         'radio-item': true,
         'u-marg-bottom--light': true,
     });
-    return (React.createElement("div", { className: classes },
-        props.label && (React.createElement("div", { className: "u-marg-bottom u-marg-top" },
-            React.createElement(Text_1.default, { type: Text_1.TextType.Small, bold: true }, props.label))),
+    return (react_1.default.createElement("div", { className: classes },
+        props.label && (react_1.default.createElement("div", { className: "u-marg-bottom u-marg-top" },
+            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, bold: true }, props.label))),
         props.options.map((option, index) => {
             const onChangeCallback = () => {
                 if (props.onChange) {
                     props.onChange(option);
                 }
             };
-            return (React.createElement("label", { className: rowClasses, key: index },
-                React.createElement("input", { name: props.name, type: "radio", value: option.value, onChange: onChangeCallback }),
-                React.createElement("span", { className: "fake-radio" },
-                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.Check })),
-                React.createElement(Text_1.default, { inline: true, type: Text_1.TextType.Small }, option.label)));
+            return (react_1.default.createElement("label", { className: rowClasses, key: index },
+                react_1.default.createElement("input", { name: props.name, type: "radio", value: option.value, onChange: onChangeCallback }),
+                react_1.default.createElement("span", { className: "fake-radio" },
+                    react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Check })),
+                react_1.default.createElement(Text_1.default, { inline: true, type: Text_1.TextType.Small }, option.label)));
         })));
 }
 exports.default = RadioFields;

package/dist/src/components/generic/radio/RadioFields.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioFields.js","sourceRoot":"/","sources":["src/components/generic/radio/RadioFields.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,uEAAgE;AAChE,kEAA2D;AAE3D,4DAAoC;AAEpC,kEAAoD;AACpD,MAAM,EAAE,GAAG,oBAAU,CAAC,IAAI,CAAC,MAAa,CAAC,CAAC;AAkB1C,SAAwB,WAAW,CAAC,KAAuB;IACvD,MAAM,OAAO,GAAG,EAAE,CAAC;QACf,aAAa,EAAE,IAAI;KACtB,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,EAAE,CAAC;QAClB,YAAY,EAAE,IAAI;QAClB,sBAAsB,EAAE,IAAI;KAC/B,CAAC,CAAC;IAEH,OAAO,CACH,6BAAK,SAAS,EAAE,OAAO;QAClB,KAAK,CAAC,KAAK,IAAI,CACZ,6BAAK,SAAS,EAAC,0BAA0B;YACrC,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,IACjC,KAAK,CAAC,KAAK,CACT,CACL,CACT;QACA,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACjC,MAAM,gBAAgB,GAAG,GAAG,EAAE;gBAC1B,IAAI,KAAK,CAAC,QAAQ,EAAE;oBAChB,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;iBAC1B;YACL,CAAC,CAAC;YAEF,OAAO,CACH,+BAAO,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK;gBACpC,+BAAO,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,gBAAgB,GAAI;gBACzF,8BAAM,SAAS,EAAC,YAAY;oBACxB,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,GAAI,CAC3B;gBACP,oBAAC,cAAI,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,IACnC,MAAM,CAAC,KAAK,CACV,CACH,CACX,CAAC;QACN,CAAC,CAAC,CACA,CACT,CAAC;AACN,CAAC;AAxCD,8BAwCC","sourcesContent":["import * as React from 'react';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\n\nimport classNames from 'classnames';\n\nimport * as styles from './RadioFields.module.scss';\nconst cx = classNames.bind(styles as any);\n\ninterface RadioFieldOption {\n    label: string;\n    value: string;\n    selected?: boolean;\n}\n\ninterface RadioFieldsProps {\n    label: string;\n\n    name: string;\n\n    options: RadioFieldOption[];\n\n    onChange: (selectedOption: RadioFieldOption) => void;\n}\n\nexport default function RadioFields(props: RadioFieldsProps) {\n    const classes = cx({\n        'radio-group': true,\n    });\n\n    const rowClasses = cx({\n        'radio-item': true,\n        'u-marg-bottom--light': true,\n    });\n\n    return (\n        <div className={classes}>\n            {props.label && (\n                <div className=\"u-marg-bottom u-marg-top\">\n                    <Text type={TextType.Small} bold={true}>\n                        {props.label}\n                    </Text>\n                </div>\n            )}\n            {props.options.map((option, index) => {\n                const onChangeCallback = () => {\n                    if (props.onChange) {\n                        props.onChange(option);\n                    }\n                };\n\n                return (\n                    <label className={rowClasses} key={index}>\n                        <input name={props.name} type=\"radio\" value={option.value} onChange={onChangeCallback} />\n                        <span className=\"fake-radio\">\n                            <Icon icon={IconType.Check} />\n                        </span>\n                        <Text inline={true} type={TextType.Small}>\n                            {option.label}\n                        </Text>\n                    </label>\n                );\n            })}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"RadioFields.js","sourceRoot":"/","sources":["src/components/generic/radio/RadioFields.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,uEAAgE;AAChE,kEAA2D;AAE3D,4DAAoC;AAEpC,wFAA+C;AAC/C,MAAM,EAAE,GAAG,oBAAU,CAAC,IAAI,CAAC,iCAAa,CAAC,CAAC;AAkB1C,SAAwB,WAAW,CAAC,KAAuB;IACvD,MAAM,OAAO,GAAG,EAAE,CAAC;QACf,aAAa,EAAE,IAAI;KACtB,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,EAAE,CAAC;QAClB,YAAY,EAAE,IAAI;QAClB,sBAAsB,EAAE,IAAI;KAC/B,CAAC,CAAC;IAEH,OAAO,CACH,uCAAK,SAAS,EAAE,OAAO;QAClB,KAAK,CAAC,KAAK,IAAI,CACZ,uCAAK,SAAS,EAAC,0BAA0B;YACrC,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,IAAI,UAC3B,KAAK,CAAC,KAAK,CACT,CACL,CACT;QACA,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACjC,MAAM,gBAAgB,GAAG,GAAG,EAAE;gBAC1B,IAAI,KAAK,CAAC,QAAQ,EAAE;oBAChB,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;iBAC1B;YACL,CAAC,CAAC;YAEF,OAAO,CACH,yCAAO,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK;gBACpC,yCAAO,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,gBAAgB,GAAI;gBACzF,wCAAM,SAAS,EAAC,YAAY;oBACxB,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,GAAI,CAC3B;gBACP,8BAAC,cAAI,IAAC,MAAM,QAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,IAC5B,MAAM,CAAC,KAAK,CACV,CACH,CACX,CAAC;QACN,CAAC,CAAC,CACA,CACT,CAAC;AACN,CAAC;AAxCD,8BAwCC","sourcesContent":["import React from 'react';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\n\nimport classNames from 'classnames';\n\nimport styles from './RadioFields.module.scss';\nconst cx = classNames.bind(styles as any);\n\ninterface RadioFieldOption {\n    label: string;\n    value: string;\n    selected?: boolean;\n}\n\ninterface RadioFieldsProps {\n    label: string;\n\n    name: string;\n\n    options: RadioFieldOption[];\n\n    onChange: (selectedOption: RadioFieldOption) => void;\n}\n\nexport default function RadioFields(props: RadioFieldsProps) {\n    const classes = cx({\n        'radio-group': true,\n    });\n\n    const rowClasses = cx({\n        'radio-item': true,\n        'u-marg-bottom--light': true,\n    });\n\n    return (\n        <div className={classes}>\n            {props.label && (\n                <div className=\"u-marg-bottom u-marg-top\">\n                    <Text type={TextType.Small} bold>\n                        {props.label}\n                    </Text>\n                </div>\n            )}\n            {props.options.map((option, index) => {\n                const onChangeCallback = () => {\n                    if (props.onChange) {\n                        props.onChange(option);\n                    }\n                };\n\n                return (\n                    <label className={rowClasses} key={index}>\n                        <input name={props.name} type=\"radio\" value={option.value} onChange={onChangeCallback} />\n                        <span className=\"fake-radio\">\n                            <Icon icon={IconType.Check} />\n                        </span>\n                        <Text inline type={TextType.Small}>\n                            {option.label}\n                        </Text>\n                    </label>\n                );\n            })}\n        </div>\n    );\n}\n"]}