@roomstay/frontend 2.1.32 → 2.2.0

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

@@ -27,11 +27,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AuthenticatedUserModal = void 0;
-const react_1 = __importDefault(require("react"));
-const react_2 = require("react");
+const react_1 = __importStar(require("react"));
 const Overlay_1 = require("../../Overlay/Overlay");
 const contexts_1 = require("../../../../contexts/index.js");
-const ScreenSize_1 = __importDefault(require("../../../../util/ScreenSize"));
 const Icon_1 = __importStar(require("../../Icon/Icon"));
 const Color_1 = require("../../../../util/Color");
 const Text_1 = __importDefault(require("../../Text"));
@@ -39,52 +37,62 @@ const react_router_dom_1 = require("react-router-dom");
 const LineBreak_1 = __importDefault(require("../../LineBreak"));
 const AuthenticatedUserModal_module_scss_1 = __importDefault(require("./AuthenticatedUserModal.module.scss"));
 const AccountRoutes_1 = require("../../../../pages/account/AccountRoutes");
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("../../../../translations/Translation");
+const ScreenSize_1 = __importDefault(require("../../../../util/ScreenSize"));
+const classnames_1 = __importDefault(require("classnames"));
+const WindowSize_1 = require("../../../../hooks/WindowSize");
 const AuthenticatedUserModal = (props) => {
-    const { open, anchorEl, containerEl } = props;
-    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;
-        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-    };
+    const { open, anchorEl, containerEl, menuItems, placement, fallbackPlacements, basePath = '', onSignedOut, onClose, onCloseMenu } = props;
+    const { logout } = (0, react_1.useContext)(contexts_1.AuthenticationContext);
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { screenSize } = (0, contexts_1.useBookingEngine)();
+    const windowSize = (0, WindowSize_1.useWindowSize)();
+    const isMobile = screenSize < ScreenSize_1.default.Large;
+    const shouldBreakpoint = isMobile && (windowSize.height || 0) <= 705;
     const onLogoutClick = () => {
-        onClose();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+        onSignedOut === null || onSignedOut === void 0 ? void 0 : onSignedOut();
         logout();
     };
-    const items = [
+    const items = menuItems || [
+        {
+            icon: Icon_1.IconType.Person,
+            text: 'Account',
+            link: AccountRoutes_1.AccountRoutes.Home.path,
+        },
         {
             icon: Icon_1.IconType.Bed,
-            text: 'Your Reservations',
+            text: t(Translation_1.Translation.Navigation.Menu.YourReservations),
             link: AccountRoutes_1.AccountRoutes.Reservations.path,
         },
         {
-            icon: Icon_1.IconType.Person,
-            text: 'Profile Information',
+            icon: Icon_1.IconType.Edit,
+            text: t(Translation_1.Translation.Navigation.Menu.ProfileInformation),
             link: AccountRoutes_1.AccountRoutes.ProfileDetails.path,
         },
         {
             icon: Icon_1.IconType.CreditCard,
-            text: 'Payment Information',
+            text: t(Translation_1.Translation.Navigation.Menu.PaymentInformation),
             link: AccountRoutes_1.AccountRoutes.CardDetails.path,
         },
-        {
-            icon: Icon_1.IconType.Hotel,
-            text: 'Hotel Information',
-            link: '/hotel-info/',
-        },
         {
             icon: Icon_1.IconType.Info,
-            text: 'Need Help?',
+            text: t(Translation_1.Translation.Navigation.Menu.NeedHelp),
             link: AccountRoutes_1.AccountRoutes.Help.path,
         },
     ];
-    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'] },
+    return (react_1.default.createElement(Overlay_1.Overlay, { preventScroll: shouldBreakpoint, usePortal: true, followElement: shouldBreakpoint ? null : anchorEl, placement: placement || 'auto-end', fallbackPlacements: fallbackPlacements, container: containerEl, open: open, onClose: onClose, strategy: "fixed", className: AuthenticatedUserModal_module_scss_1.default['logged-in-overlay'], containerClassName: (0, classnames_1.default)({
+            [AuthenticatedUserModal_module_scss_1.default['logged-in-overlay-container--fixed']]: shouldBreakpoint,
+        }) },
         react_1.default.createElement("div", { className: AuthenticatedUserModal_module_scss_1.default['list-items'] },
             items.map((item, index) => {
                 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 },
+                    }, activeClassName: AuthenticatedUserModal_module_scss_1.default['--selected'], to: `${basePath}${item.link}`, className: AuthenticatedUserModal_module_scss_1.default['list-item'], key: index, onClick: () => {
+                        onClose === null || onClose === void 0 ? void 0 : onClose();
+                        onCloseMenu === null || onCloseMenu === void 0 ? void 0 : onCloseMenu();
+                    } },
                     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)));
@@ -93,7 +101,7 @@ const AuthenticatedUserModal = (props) => {
             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;
+                react_1.default.createElement(Text_1.default, { color: Color_1.Color.Alert }, t(Translation_1.Translation.Misc.LogOut))))));
 };
 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 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"]}
+{"version":3,"file":"AuthenticatedUserModal.js","sourceRoot":"/","sources":["src/components/generic/modal/SigninModal/AuthenticatedUserModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactElement, useContext } from 'react';\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\nimport { AuthenticationContext, useBookingEngine } from '@frontend/contexts';\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';\nimport { Placement } from '@popperjs/core';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '@/translations/Translation';\nimport ScreenSize from '@/util/ScreenSize';\nimport classNames from 'classnames';\nimport { useWindowSize } from '@/hooks/WindowSize';\n\nexport type AuthenticatedUserModalProps = {\n    open: boolean;\n    anchorEl?: HTMLElement | null;\n    placement?: Placement;\n    fallbackPlacements?: Placement;\n    containerEl?: HTMLElement;\n    menuItems?: MenuItemType[];\n    basePath?: string;\n    onClose?: () => void;\n    onSignedOut?: () => void;\n    onCloseMenu?: () => void;\n};\n\nexport type MenuItemType = {\n    icon: IconType;\n    text: string;\n    link: string;\n};\n\nexport const AuthenticatedUserModal = (props: AuthenticatedUserModalProps): ReactElement | null => {\n    const { open, anchorEl, containerEl, menuItems, placement, fallbackPlacements, basePath = '', onSignedOut, onClose, onCloseMenu } = props;\n\n    const { logout } = useContext(AuthenticationContext);\n    const { t } = useTranslation();\n    const { screenSize } = useBookingEngine();\n    const windowSize = useWindowSize();\n    const isMobile = screenSize < ScreenSize.Large;\n    const shouldBreakpoint = isMobile && (windowSize.height || 0) <= 705;\n\n    const onLogoutClick = () => {\n        onClose?.();\n        onSignedOut?.();\n        logout();\n    };\n\n    const items: MenuItemType[] = menuItems || [\n        {\n            icon: IconType.Person,\n            text: 'Account',\n            link: AccountRoutes.Home.path,\n        },\n        {\n            icon: IconType.Bed,\n            text: t(Translation.Navigation.Menu.YourReservations),\n            link: AccountRoutes.Reservations.path,\n        },\n        {\n            icon: IconType.Edit,\n            text: t(Translation.Navigation.Menu.ProfileInformation),\n            link: AccountRoutes.ProfileDetails.path,\n        },\n        {\n            icon: IconType.CreditCard,\n            text: t(Translation.Navigation.Menu.PaymentInformation),\n            link: AccountRoutes.CardDetails.path,\n        },\n        {\n            icon: IconType.Info,\n            text: t(Translation.Navigation.Menu.NeedHelp),\n            link: AccountRoutes.Help.path,\n        },\n    ];\n\n    return (\n        <Overlay\n            preventScroll={shouldBreakpoint}\n            usePortal\n            followElement={shouldBreakpoint ? null : anchorEl}\n            placement={placement || 'auto-end'}\n            fallbackPlacements={fallbackPlacements}\n            container={containerEl}\n            open={open}\n            onClose={onClose}\n            strategy=\"fixed\"\n            className={styles['logged-in-overlay']}\n            containerClassName={classNames({\n                [styles['logged-in-overlay-container--fixed']]: shouldBreakpoint,\n            })}\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={`${basePath}${item.link}`}\n                            className={styles['list-item']}\n                            key={index}\n                            onClick={() => {\n                                onClose?.();\n                                onCloseMenu?.();\n                            }}\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}>{t(Translation.Misc.LogOut)}</Text>\n                </div>\n            </div>\n        </Overlay>\n    );\n};\n"]}

package/dist/src/components/generic/modal/SigninModal/FormContent/ForgotPasswordFormContent.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface ForgotPasswordFormContentProps {
+    onCancelled?: () => void;
+    onDone?: () => void;
+}
+export declare const ForgotPasswordFormContent: FC<ForgotPasswordFormContentProps>;
+export {};

package/dist/src/components/generic/modal/SigninModal/FormContent/ForgotPasswordFormContent.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ForgotPasswordFormContent = void 0;
+const react_1 = __importDefault(require("react"));
+const ForgotPasswordForm_1 = require("../../../../User/Forms/ForgotPasswordForm");
+const ForgotPasswordFormContent = (props) => {
+    const { onCancelled, onDone } = props;
+    return react_1.default.createElement(ForgotPasswordForm_1.ForgotPasswordForm, { onCancelled: onCancelled, onDone: onDone });
+};
+exports.ForgotPasswordFormContent = ForgotPasswordFormContent;
+//# sourceMappingURL=ForgotPasswordFormContent.js.map

package/dist/src/components/generic/modal/SigninModal/FormContent/ForgotPasswordFormContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ForgotPasswordFormContent.js","sourceRoot":"/","sources":["src/components/generic/modal/SigninModal/FormContent/ForgotPasswordFormContent.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAkC;AAElC,mFAAgF;AAOzE,MAAM,yBAAyB,GAAuC,CAAC,KAAK,EAAE,EAAE;IACnF,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEtC,OAAO,8BAAC,uCAAkB,IAAC,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AAC5E,CAAC,CAAC;AAJW,QAAA,yBAAyB,6BAIpC","sourcesContent":["import React, { FC } from 'react';\n\nimport { ForgotPasswordForm } from '@/components/User/Forms/ForgotPasswordForm';\n\ninterface ForgotPasswordFormContentProps {\n    onCancelled?: () => void;\n    onDone?: () => void;\n}\n\nexport const ForgotPasswordFormContent: FC<ForgotPasswordFormContentProps> = (props) => {\n    const { onCancelled, onDone } = props;\n\n    return <ForgotPasswordForm onCancelled={onCancelled} onDone={onDone} />;\n};\n"]}

package/dist/src/components/generic/modal/SigninModal/FormContent/SignInFormContent.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface SignInFormContentProps {
+    onForgotPasswordClick?: () => void;
+    onSignUpClick?: () => void;
+    onDone?: () => void;
+}
+export declare const SignInFormContent: FC<SignInFormContentProps>;
+export {};

package/dist/src/components/generic/modal/SigninModal/FormContent/SignInFormContent.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SignInFormContent = void 0;
+const react_1 = __importDefault(require("react"));
+const BEButton_1 = __importDefault(require("../../../BEButton"));
+const LineBreak_1 = __importDefault(require("../../../LineBreak"));
+const SignInForm_1 = require("../../../../User/Forms/SignInForm");
+const Color_1 = require("../../../../../util/Color");
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("../../../../../translations/Translation");
+const SignInFormContent = (props) => {
+    const { onForgotPasswordClick, onSignUpClick, onDone } = props;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(SignInForm_1.SignInForm, { onForgotPassword: onForgotPasswordClick, onDone: onDone }),
+        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: onSignUpClick }, t(Translation_1.Translation.Navigation.SignIn.DontHaveAnAccount))),
+        react_1.default.createElement(BEButton_1.default, { onClick: onSignUpClick, wide: true, primary: true }, t(Translation_1.Translation.Navigation.SignIn.SignUp))));
+};
+exports.SignInFormContent = SignInFormContent;
+//# sourceMappingURL=SignInFormContent.js.map

package/dist/src/components/generic/modal/SigninModal/FormContent/SignInFormContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignInFormContent.js","sourceRoot":"/","sources":["src/components/generic/modal/SigninModal/FormContent/SignInFormContent.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAkC;AAElC,6EAAqD;AACrD,+EAAuD;AACvD,mEAAgE;AAChE,wCAAqC;AACrC,iDAA+C;AAC/C,4DAAyD;AAQlD,MAAM,iBAAiB,GAA+B,CAAC,KAAK,EAAE,EAAE;IACnE,MAAM,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAC/D,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,OAAO,CACH;QACI,8BAAC,uBAAU,IAAC,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,EAAE,MAAM,GAAI;QACvE,8BAAC,mBAAS,OAAG;QACb,uCAAK,SAAS,EAAC,sBAAsB;YACjC,8BAAC,kBAAQ,IAAC,MAAM,QAAC,IAAI,QAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,aAAK,CAAC,IAAI,EAAE,OAAO,EAAE,aAAa,IAC3E,CAAC,CAAC,yBAAW,CAAC,UAAU,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAC5C,CACT;QACN,8BAAC,kBAAQ,IAAC,OAAO,EAAE,aAAa,EAAE,IAAI,QAAC,OAAO,UACzC,CAAC,CAAC,yBAAW,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,CACjC,CACZ,CACN,CAAC;AACN,CAAC,CAAC;AAlBW,QAAA,iBAAiB,qBAkB5B","sourcesContent":["import React, { FC } from 'react';\n\nimport BEButton from '@/components/generic/BEButton';\nimport LineBreak from '@/components/generic/LineBreak';\nimport { SignInForm } from '@/components/User/Forms/SignInForm';\nimport { Color } from '@/util/Color';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '@/translations/Translation';\n\ninterface SignInFormContentProps {\n    onForgotPasswordClick?: () => void;\n    onSignUpClick?: () => void;\n    onDone?: () => void;\n}\n\nexport const SignInFormContent: FC<SignInFormContentProps> = (props) => {\n    const { onForgotPasswordClick, onSignUpClick, onDone } = props;\n    const { t } = useTranslation();\n\n    return (\n        <>\n            <SignInForm onForgotPassword={onForgotPasswordClick} onDone={onDone} />\n            <LineBreak />\n            <div className=\"u-marg-bottom--light\">\n                <BEButton isText wide size=\"small\" textColor={Color.Navy} onClick={onSignUpClick}>\n                    {t(Translation.Navigation.SignIn.DontHaveAnAccount)}\n                </BEButton>\n            </div>\n            <BEButton onClick={onSignUpClick} wide primary>\n                {t(Translation.Navigation.SignIn.SignUp)}\n            </BEButton>\n        </>\n    );\n};\n"]}

package/dist/src/components/generic/modal/SigninModal/FormContent/SignUpFormContent.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface SignUpFormContentProps {
+    onSignedInClick?: () => void;
+    onDone?: () => void;
+}
+export declare const SignUpFormContent: FC<SignUpFormContentProps>;
+export {};

package/dist/src/components/generic/modal/SigninModal/FormContent/SignUpFormContent.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SignUpFormContent = void 0;
+const react_1 = __importDefault(require("react"));
+const BEButton_1 = __importDefault(require("../../../BEButton"));
+const LineBreak_1 = __importDefault(require("../../../LineBreak"));
+const Text_1 = __importStar(require("../../../Text"));
+const SignUpForm_1 = require("../../../../User/Forms/SignUpForm");
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("../../../../../translations/Translation");
+const SignUpFormContent = (props) => {
+    const { onSignedInClick, onDone } = props;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(SignUpForm_1.SignUpForm, { onSignedIn: onSignedInClick, onDone: onDone }),
+        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 }, t(Translation_1.Translation.Step.Confirmation.AlreadyHaveAccount))),
+        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
+            react_1.default.createElement(react_i18next_1.Trans, { i18nKey: Translation_1.Translation.Navigation.SignUp.SignIn, components: [react_1.default.createElement(BEButton_1.default, { key: 0, isText: true, size: "small", primary: true, onClick: onSignedInClick })] }))));
+};
+exports.SignUpFormContent = SignUpFormContent;
+//# sourceMappingURL=SignUpFormContent.js.map

package/dist/src/components/generic/modal/SigninModal/FormContent/SignUpFormContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignUpFormContent.js","sourceRoot":"/","sources":["src/components/generic/modal/SigninModal/FormContent/SignUpFormContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAkC;AAElC,6EAAqD;AACrD,+EAAuD;AACvD,kEAA2D;AAC3D,mEAAgE;AAChE,iDAAsD;AACtD,4DAAyD;AAOlD,MAAM,iBAAiB,GAA+B,CAAC,KAAK,EAAE,EAAE;IACnE,MAAM,EAAE,eAAe,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAC1C,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,OAAO,CACH;QACI,8BAAC,uBAAU,IAAC,UAAU,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,GAAI;QAC3D,8BAAC,mBAAS,OAAG;QACb,uCAAK,SAAS,EAAC,sBAAsB;YACjC,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,IAAI,UAC3B,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,CACjD,CACL;QACN,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK;YACtB,8BAAC,qBAAK,IAAC,OAAO,EAAE,yBAAW,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,8BAAC,kBAAQ,IAAC,GAAG,EAAE,CAAC,EAAE,MAAM,QAAC,IAAI,EAAC,OAAO,EAAC,OAAO,QAAC,OAAO,EAAE,eAAe,GAAI,CAAC,GAAI,CAC/I,CACR,CACN,CAAC;AACN,CAAC,CAAC;AAlBW,QAAA,iBAAiB,qBAkB5B","sourcesContent":["import React, { FC } from 'react';\n\nimport BEButton from '@/components/generic/BEButton';\nimport LineBreak from '@/components/generic/LineBreak';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { SignUpForm } from '@/components/User/Forms/SignUpForm';\nimport { Trans, useTranslation } from 'react-i18next';\nimport { Translation } from '@/translations/Translation';\n\ninterface SignUpFormContentProps {\n    onSignedInClick?: () => void;\n    onDone?: () => void;\n}\n\nexport const SignUpFormContent: FC<SignUpFormContentProps> = (props) => {\n    const { onSignedInClick, onDone } = props;\n    const { t } = useTranslation();\n\n    return (\n        <>\n            <SignUpForm onSignedIn={onSignedInClick} onDone={onDone} />\n            <LineBreak />\n            <div className=\"u-marg-bottom--light\">\n                <Text type={TextType.Label} bold>\n                    {t(Translation.Step.Confirmation.AlreadyHaveAccount)}\n                </Text>\n            </div>\n            <Text type={TextType.Small}>\n                <Trans i18nKey={Translation.Navigation.SignUp.SignIn} components={[<BEButton key={0} isText size=\"small\" primary onClick={onSignedInClick} />]} />\n            </Text>\n        </>\n    );\n};\n"]}

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

@@ -1,8 +1,12 @@
-interface UnauthenticatedUserModalProps {
+import { Placement } from '@popperjs/core';
+export interface UnauthenticatedUserModalProps {
     open: boolean;
     anchorEl?: HTMLElement | null;
+    placement?: Placement;
+    fallbackPlacements?: Placement;
     containerEl?: HTMLElement;
     onClose?: () => void;
+    onOpenOnMobile?: () => void;
     onConfirm?: () => void;
 }
 export declare enum EViewingScreen {
@@ -12,4 +16,3 @@ export declare enum EViewingScreen {
     ForgotPassword = "ForgotPassword"
 }
 export declare const UnauthenticatedUserModal: (props: UnauthenticatedUserModalProps) => JSX.Element;
-export {};

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

@@ -27,20 +27,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UnauthenticatedUserModal = exports.EViewingScreen = void 0;
-const react_1 = __importDefault(require("react"));
-const react_2 = require("react");
+const react_1 = __importStar(require("react"));
 const Overlay_1 = require("../../Overlay/Overlay");
 const Fade_1 = __importDefault(require("../../../../animations/Fade"));
-const SignInForm_1 = require("../../../User/Forms/SignInForm");
 const contexts_1 = require("../../../../contexts/index.js");
 const ScreenSize_1 = __importDefault(require("../../../../util/ScreenSize"));
 const AutoAutoHeight_1 = __importDefault(require("../../../../animations/AutoAutoHeight"));
-const SignUpForm_1 = require("../../../User/Forms/SignUpForm");
-const ForgotPasswordForm_1 = require("../../../User/Forms/ForgotPasswordForm");
-const LineBreak_1 = __importDefault(require("../../LineBreak"));
-const BEButton_1 = __importDefault(require("../../BEButton"));
-const Color_1 = require("../../../../util/Color");
-const Text_1 = __importStar(require("../../Text"));
+const SignInFormContent_1 = require("./FormContent/SignInFormContent");
+const SignUpFormContent_1 = require("./FormContent/SignUpFormContent");
+const ForgotPasswordFormContent_1 = require("./FormContent/ForgotPasswordFormContent");
+const SimpleModal_1 = __importDefault(require("../SimpleModal"));
 var EViewingScreen;
 (function (EViewingScreen) {
     EViewingScreen["Default"] = "Default";
@@ -49,13 +45,17 @@ var EViewingScreen;
     EViewingScreen["ForgotPassword"] = "ForgotPassword";
 })(EViewingScreen = exports.EViewingScreen || (exports.EViewingScreen = {}));
 const UnauthenticatedUserModal = (props) => {
-    const { open, anchorEl, containerEl, onClose } = props;
-    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 { open, anchorEl, containerEl, placement, onClose, onOpenOnMobile } = 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)(null);
+    const { screenSize } = (0, react_1.useContext)(contexts_1.BookingEngineContext);
     const shouldBreakpoint = screenSize <= ScreenSize_1.default.Large;
-    (0, react_2.useEffect)(() => {
+    const _onOpen = () => {
+        if (shouldBreakpoint)
+            onOpenOnMobile === null || onOpenOnMobile === void 0 ? void 0 : onOpenOnMobile();
+    };
+    (0, react_1.useEffect)(() => {
         if (open) {
             setViewingScreen(EViewingScreen.SignIn);
         }
@@ -79,30 +79,21 @@ const UnauthenticatedUserModal = (props) => {
     const onAnimationExit = () => {
         setViewingScreen(nextViewingScreen.current);
     };
-    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_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_1.default.createElement(Fade_1.default, { open: viewingScreen === forScreen, onExitCompletely: onAnimationExit, key: index }, content)))))));
+    const innerContent = (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,
+                react_1.default.createElement(SignInFormContent_1.SignInFormContent, { key: EViewingScreen.SignIn, onForgotPasswordClick: showForgotPassword, onSignUpClick: showSignUpFormContent, onDone: _onOpen }),
+            ],
+            [EViewingScreen.SignUp, react_1.default.createElement(SignUpFormContent_1.SignUpFormContent, { key: EViewingScreen.SignUp, onSignedInClick: showSignInFormContent, onDone: _onOpen })],
+            [EViewingScreen.ForgotPassword, react_1.default.createElement(ForgotPasswordFormContent_1.ForgotPasswordFormContent, { key: EViewingScreen.ForgotPassword, onCancelled: showSignInFormContent, onDone: _onOpen })],
+        ].map(([forScreen, content], index) => (react_1.default.createElement(Fade_1.default, { open: viewingScreen === forScreen, onExitCompletely: onAnimationExit, key: index }, content))))));
+    if (shouldBreakpoint) {
+        return (react_1.default.createElement(SimpleModal_1.default, { open: open, onClose: onClose }, innerContent));
+    }
+    else {
+        return (react_1.default.createElement(Overlay_1.Overlay, { usePortal: true, followElement: shouldBreakpoint ? null : anchorEl, placement: placement || 'auto-end', container: containerEl, open: open, onClose: onClose, strategy: "fixed", className: "c-login-overlay" }, innerContent));
+    }
 };
 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 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"]}
+{"version":3,"file":"UnauthenticatedUserModal.js","sourceRoot":"/","sources":["src/components/generic/modal/SigninModal/UnauthenticatedUserModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuE;AAEvE,kEAA+D;AAC/D,6DAA8C;AAC9C,iDAAiF;AACjF,mEAA2C;AAC3C,iFAAyD;AACzD,uEAAoE;AACpE,uEAAoE;AACpE,uFAAoF;AAEpF,iEAAyC;AAezC,IAAY,cAKX;AALD,WAAY,cAAc;IACtB,qCAAmB,CAAA;IACnB,mCAAiB,CAAA;IACjB,mCAAiB,CAAA;IACjB,mDAAiC,CAAA;AACrC,CAAC,EALW,cAAc,GAAd,sBAAc,KAAd,sBAAc,QAKzB;AAEM,MAAM,wBAAwB,GAAG,CAAC,KAAoC,EAAE,EAAE;IAC7E,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAClF,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,IAAA,kBAAU,EAAC,gCAAqB,CAAC,CAAC;IAElE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAwB,cAAc,CAAC,MAAM,CAAC,CAAC;IAEjG,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAE9D,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,IAAI,gBAAgB;YAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,EAAI,CAAC;IAC7C,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,IAAI,EAAE;YACN,gBAAgB,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;SAC3C;IACL,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,KAAK,GAAG,GAAG,EAAE;QACf,YAAY,EAAE,CAAC;QACf,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC5B,KAAK,EAAE,CAAC;QACR,iBAAiB,CAAC,OAAO,GAAG,cAAc,CAAC,cAAc,CAAC;IAC9D,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE;QAC/B,KAAK,EAAE,CAAC;QACR,iBAAiB,CAAC,OAAO,GAAG,cAAc,CAAC,MAAM,CAAC;IACtD,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE;QAC/B,KAAK,EAAE,CAAC;QACR,iBAAiB,CAAC,OAAO,GAAG,cAAc,CAAC,MAAM,CAAC;IACtD,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,GAAG,EAAE;QACzB,gBAAgB,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAChD,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CACjB,uCAAK,SAAS,EAAC,iCAAiC;QAC5C,8BAAC,wBAAc,IAAC,IAAI,QAAC,SAAS,UACzB;YACG;gBACI,cAAc,CAAC,MAAM;gBACrB,8BAAC,qCAAiB,IAAC,GAAG,EAAE,cAAc,CAAC,MAAM,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,EAAE,OAAO,GAAI;aACtJ;YACD,CAAC,cAAc,CAAC,MAAM,EAAE,8BAAC,qCAAiB,IAAC,GAAG,EAAE,cAAc,CAAC,MAAM,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,EAAE,OAAO,GAAI,CAAC;YACnI,CAAC,cAAc,CAAC,cAAc,EAAE,8BAAC,qDAAyB,IAAC,GAAG,EAAE,cAAc,CAAC,cAAc,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,EAAE,OAAO,GAAI,CAAC;SAC1J,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,8BAAC,cAAa,IAAC,IAAI,EAAE,aAAa,KAAK,SAAS,EAAE,gBAAgB,EAAE,eAAe,EAAE,GAAG,EAAE,KAAK,IAC1F,OAA6B,CAClB,CACnB,CAAC,CACW,CACf,CACT,CAAC;IAEF,IAAI,gBAAgB,EAAE;QAClB,OAAO,CACH,8BAAC,qBAAW,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IACpC,YAAY,CACH,CACjB,CAAC;KACL;SAAM;QACH,OAAO,CACH,8BAAC,iBAAO,IACJ,SAAS,QACT,aAAa,EAAE,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,EACjD,SAAS,EAAE,SAAS,IAAI,UAAU,EAClC,SAAS,EAAE,WAAW,EACtB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAC,iBAAiB,IAE1B,YAAY,CACP,CACb,CAAC;KACL;AACL,CAAC,CAAC;AAtFW,QAAA,wBAAwB,4BAsFnC","sourcesContent":["import React, { useContext, useEffect, useRef, useState } from 'react';\n\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\nimport FadeAnimation from '@/animations/Fade';\nimport { AuthenticationContext, BookingEngineContext } from '@frontend/contexts';\nimport ScreenSize from '@/util/ScreenSize';\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport { SignInFormContent } from './FormContent/SignInFormContent';\nimport { SignUpFormContent } from './FormContent/SignUpFormContent';\nimport { ForgotPasswordFormContent } from './FormContent/ForgotPasswordFormContent';\nimport { Placement } from '@popperjs/core';\nimport SimpleModal from '../SimpleModal';\n\n// TODO: Move file to not be in a generic location\n\nexport interface UnauthenticatedUserModalProps {\n    open: boolean;\n    anchorEl?: HTMLElement | null;\n    placement?: Placement;\n    fallbackPlacements?: Placement;\n    containerEl?: HTMLElement;\n    onClose?: () => void;\n    onOpenOnMobile?: () => 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, placement, onClose, onOpenOnMobile } = 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    const _onOpen = () => {\n        if (shouldBreakpoint) onOpenOnMobile?.();\n    };\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 innerContent = (\n        <div className=\"u-w-100 u-pad--heavy@m u-pad@m-\">\n            <AutoAutoHeight open startOpen>\n                {[\n                    [\n                        EViewingScreen.SignIn,\n                        <SignInFormContent key={EViewingScreen.SignIn} onForgotPasswordClick={showForgotPassword} onSignUpClick={showSignUpFormContent} onDone={_onOpen} />,\n                    ],\n                    [EViewingScreen.SignUp, <SignUpFormContent key={EViewingScreen.SignUp} onSignedInClick={showSignInFormContent} onDone={_onOpen} />],\n                    [EViewingScreen.ForgotPassword, <ForgotPasswordFormContent key={EViewingScreen.ForgotPassword} onCancelled={showSignInFormContent} onDone={_onOpen} />],\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    );\n\n    if (shouldBreakpoint) {\n        return (\n            <SimpleModal open={open} onClose={onClose}>\n                {innerContent}\n            </SimpleModal>\n        );\n    } else {\n        return (\n            <Overlay\n                usePortal\n                followElement={shouldBreakpoint ? null : anchorEl}\n                placement={placement || 'auto-end'}\n                container={containerEl}\n                open={open}\n                onClose={onClose}\n                strategy=\"fixed\"\n                className=\"c-login-overlay\"\n            >\n                {innerContent}\n            </Overlay>\n        );\n    }\n};\n"]}

package/dist/src/components/generic/print/NoPrint.d.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from 'react';
+declare const NoPrint: FC<PropsWithChildren<Record<any, any>>>;
+export default NoPrint;

package/dist/src/components/generic/print/NoPrint.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const NoPrint = ({ children }) => {
+    return react_1.default.createElement("div", { className: "u-print-none" }, children);
+};
+exports.default = NoPrint;
+//# sourceMappingURL=NoPrint.js.map

package/dist/src/components/generic/print/NoPrint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoPrint.js","sourceRoot":"/","sources":["src/components/generic/print/NoPrint.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAqD;AAErD,MAAM,OAAO,GAA4C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACtE,OAAO,uCAAK,SAAS,EAAC,cAAc,IAAE,QAAQ,CAAO,CAAC;AAC1D,CAAC,CAAC;AAEF,kBAAe,OAAO,CAAC","sourcesContent":["import React, { FC, PropsWithChildren } from 'react';\n\nconst NoPrint: FC<PropsWithChildren<Record<any, any>>> = ({ children }) => {\n    return <div className=\"u-print-none\">{children}</div>;\n};\n\nexport default NoPrint;\n"]}

package/dist/src/components/generic/print/PrintOnly.d.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from 'react';
+declare const PrintOnly: FC<PropsWithChildren<Record<any, any>>>;
+export default PrintOnly;

package/dist/src/components/generic/print/PrintOnly.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const PrintOnly = ({ children }) => {
+    return react_1.default.createElement("div", { className: "u-print-only" }, children);
+};
+exports.default = PrintOnly;
+//# sourceMappingURL=PrintOnly.js.map

package/dist/src/components/generic/print/PrintOnly.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrintOnly.js","sourceRoot":"/","sources":["src/components/generic/print/PrintOnly.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAqD;AAErD,MAAM,SAAS,GAA4C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxE,OAAO,uCAAK,SAAS,EAAC,cAAc,IAAE,QAAQ,CAAO,CAAC;AAC1D,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["import React, { FC, PropsWithChildren } from 'react';\n\nconst PrintOnly: FC<PropsWithChildren<Record<any, any>>> = ({ children }) => {\n    return <div className=\"u-print-only\">{children}</div>;\n};\n\nexport default PrintOnly;\n"]}

package/dist/src/components/graphics/AddCard.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { Color } from '../../util/Color';
+type HomeEmptyProps = JSX.IntrinsicElements['svg'] & {
+    color?: Color;
+};
+declare const AddCard: FC<HomeEmptyProps>;
+export default AddCard;

package/dist/src/components/graphics/AddCard.js

@@ -0,0 +1,28 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Color_1 = require("../../util/Color");
+const AddCard = (_a) => {
+    var { color = Color_1.Color.Accent } = _a, svgProps = __rest(_a, ["color"]);
+    return (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "85", height: "58", viewBox: "0 0 85 58", fill: "none" }, svgProps),
+        react_1.default.createElement("rect", { width: "85", height: "58", rx: "8", fill: "#F6F6FA" }),
+        react_1.default.createElement("path", { d: "M19 8H10C8.89543 8 8 8.89543 8 10V17C8 18.1046 8.89543 19 10 19H19C20.1046 19 21 18.1046 21 17V10C21 8.89543 20.1046 8 19 8Z", fill: color }),
+        react_1.default.createElement("path", { opacity: "0.25", d: "M11.14 40.98C9.35 40.98 8.4 42.5 8.4 44.58C8.4 46.65 9.35 48.16 11.14 48.16C12.93 48.16 13.88 46.65 13.88 44.58C13.88 42.5 12.93 40.98 11.14 40.98ZM11.14 47.01C10.22 47.01 9.65 46.19 9.65 44.58C9.65 42.95 10.22 42.13 11.14 42.13C12.06 42.13 12.63 42.95 12.63 44.58C12.63 46.19 12.06 47.01 11.14 47.01ZM17.6193 40.98C15.8293 40.98 14.8793 42.5 14.8793 44.58C14.8793 46.65 15.8293 48.16 17.6193 48.16C19.4093 48.16 20.3593 46.65 20.3593 44.58C20.3593 42.5 19.4093 40.98 17.6193 40.98ZM17.6193 47.01C16.6993 47.01 16.1293 46.19 16.1293 44.58C16.1293 42.95 16.6993 42.13 17.6193 42.13C18.5393 42.13 19.1093 42.95 19.1093 44.58C19.1093 46.19 18.5393 47.01 17.6193 47.01ZM24.0986 40.98C22.3086 40.98 21.3586 42.5 21.3586 44.58C21.3586 46.65 22.3086 48.16 24.0986 48.16C25.8886 48.16 26.8386 46.65 26.8386 44.58C26.8386 42.5 25.8886 40.98 24.0986 40.98ZM24.0986 47.01C23.1786 47.01 22.6086 46.19 22.6086 44.58C22.6086 42.95 23.1786 42.13 24.0986 42.13C25.0186 42.13 25.5886 42.95 25.5886 44.58C25.5886 46.19 25.0186 47.01 24.0986 47.01ZM30.5779 40.98C28.7879 40.98 27.8379 42.5 27.8379 44.58C27.8379 46.65 28.7879 48.16 30.5779 48.16C32.3679 48.16 33.3179 46.65 33.3179 44.58C33.3179 42.5 32.3679 40.98 30.5779 40.98ZM30.5779 47.01C29.6579 47.01 29.0879 46.19 29.0879 44.58C29.0879 42.95 29.6579 42.13 30.5779 42.13C31.4979 42.13 32.0679 42.95 32.0679 44.58C32.0679 46.19 31.4979 47.01 30.5779 47.01Z", fill: "#1D1D1D" }),
+        react_1.default.createElement("path", { opacity: "0.25", d: "M50.1505 40.98C48.3605 40.98 47.4105 42.5 47.4105 44.58C47.4105 46.65 48.3605 48.16 50.1505 48.16C51.9405 48.16 52.8905 46.65 52.8905 44.58C52.8905 42.5 51.9405 40.98 50.1505 40.98ZM50.1505 47.01C49.2305 47.01 48.6605 46.19 48.6605 44.58C48.6605 42.95 49.2305 42.13 50.1505 42.13C51.0705 42.13 51.6405 42.95 51.6405 44.58C51.6405 46.19 51.0705 47.01 50.1505 47.01ZM56.6298 40.98C54.8398 40.98 53.8898 42.5 53.8898 44.58C53.8898 46.65 54.8398 48.16 56.6298 48.16C58.4198 48.16 59.3698 46.65 59.3698 44.58C59.3698 42.5 58.4198 40.98 56.6298 40.98ZM56.6298 47.01C55.7098 47.01 55.1398 46.19 55.1398 44.58C55.1398 42.95 55.7098 42.13 56.6298 42.13C57.5498 42.13 58.1198 42.95 58.1198 44.58C58.1198 46.19 57.5498 47.01 56.6298 47.01ZM63.7391 40.83L61.2891 48H60.2691L62.7091 40.83H63.7391ZM67.3814 40.98C65.5914 40.98 64.6414 42.5 64.6414 44.58C64.6414 46.65 65.5914 48.16 67.3814 48.16C69.1714 48.16 70.1214 46.65 70.1214 44.58C70.1214 42.5 69.1714 40.98 67.3814 40.98ZM67.3814 47.01C66.4614 47.01 65.8914 46.19 65.8914 44.58C65.8914 42.95 66.4614 42.13 67.3814 42.13C68.3014 42.13 68.8714 42.95 68.8714 44.58C68.8714 46.19 68.3014 47.01 67.3814 47.01ZM73.8607 40.98C72.0707 40.98 71.1207 42.5 71.1207 44.58C71.1207 46.65 72.0707 48.16 73.8607 48.16C75.6507 48.16 76.6007 46.65 76.6007 44.58C76.6007 42.5 75.6507 40.98 73.8607 40.98ZM73.8607 47.01C72.9407 47.01 72.3707 46.19 72.3707 44.58C72.3707 42.95 72.9407 42.13 73.8607 42.13C74.7807 42.13 75.3507 42.95 75.3507 44.58C75.3507 46.19 74.7807 47.01 73.8607 47.01Z", fill: "#1D1D1D" })));
+};
+exports.default = AddCard;
+//# sourceMappingURL=AddCard.js.map

package/dist/src/components/graphics/AddCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddCard.js","sourceRoot":"/","sources":["src/components/graphics/AddCard.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAAkC;AAClC,wCAAqC;AAMrC,MAAM,OAAO,GAAuB,CAAC,EAAqC,EAAE,EAAE;QAAzC,EAAE,KAAK,GAAG,aAAK,CAAC,MAAM,OAAe,EAAV,QAAQ,cAAnC,SAAqC,CAAF;IACpE,OAAO,CACH,qDAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,IAAK,QAAQ;QACvG,wCAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAG;QACrD,wCAAM,CAAC,EAAC,8HAA8H,EAAC,IAAI,EAAE,KAAK,GAAI;QACtJ,wCACI,OAAO,EAAC,MAAM,EACd,CAAC,EAAC,m3CAAm3C,EACr3C,IAAI,EAAC,SAAS,GAChB;QACF,wCACI,OAAO,EAAC,MAAM,EACd,CAAC,EAAC,0+CAA0+C,EAC5+C,IAAI,EAAC,SAAS,GAChB,CACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,OAAO,CAAC","sourcesContent":["import React, { FC } from 'react';\nimport { Color } from '@/util/Color';\n\ntype HomeEmptyProps = JSX.IntrinsicElements['svg'] & {\n    color?: Color;\n};\n\nconst AddCard: FC<HomeEmptyProps> = ({ color = Color.Accent, ...svgProps }) => {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"85\" height=\"58\" viewBox=\"0 0 85 58\" fill=\"none\" {...svgProps}>\n            <rect width=\"85\" height=\"58\" rx=\"8\" fill=\"#F6F6FA\" />\n            <path d=\"M19 8H10C8.89543 8 8 8.89543 8 10V17C8 18.1046 8.89543 19 10 19H19C20.1046 19 21 18.1046 21 17V10C21 8.89543 20.1046 8 19 8Z\" fill={color} />\n            <path\n                opacity=\"0.25\"\n                d=\"M11.14 40.98C9.35 40.98 8.4 42.5 8.4 44.58C8.4 46.65 9.35 48.16 11.14 48.16C12.93 48.16 13.88 46.65 13.88 44.58C13.88 42.5 12.93 40.98 11.14 40.98ZM11.14 47.01C10.22 47.01 9.65 46.19 9.65 44.58C9.65 42.95 10.22 42.13 11.14 42.13C12.06 42.13 12.63 42.95 12.63 44.58C12.63 46.19 12.06 47.01 11.14 47.01ZM17.6193 40.98C15.8293 40.98 14.8793 42.5 14.8793 44.58C14.8793 46.65 15.8293 48.16 17.6193 48.16C19.4093 48.16 20.3593 46.65 20.3593 44.58C20.3593 42.5 19.4093 40.98 17.6193 40.98ZM17.6193 47.01C16.6993 47.01 16.1293 46.19 16.1293 44.58C16.1293 42.95 16.6993 42.13 17.6193 42.13C18.5393 42.13 19.1093 42.95 19.1093 44.58C19.1093 46.19 18.5393 47.01 17.6193 47.01ZM24.0986 40.98C22.3086 40.98 21.3586 42.5 21.3586 44.58C21.3586 46.65 22.3086 48.16 24.0986 48.16C25.8886 48.16 26.8386 46.65 26.8386 44.58C26.8386 42.5 25.8886 40.98 24.0986 40.98ZM24.0986 47.01C23.1786 47.01 22.6086 46.19 22.6086 44.58C22.6086 42.95 23.1786 42.13 24.0986 42.13C25.0186 42.13 25.5886 42.95 25.5886 44.58C25.5886 46.19 25.0186 47.01 24.0986 47.01ZM30.5779 40.98C28.7879 40.98 27.8379 42.5 27.8379 44.58C27.8379 46.65 28.7879 48.16 30.5779 48.16C32.3679 48.16 33.3179 46.65 33.3179 44.58C33.3179 42.5 32.3679 40.98 30.5779 40.98ZM30.5779 47.01C29.6579 47.01 29.0879 46.19 29.0879 44.58C29.0879 42.95 29.6579 42.13 30.5779 42.13C31.4979 42.13 32.0679 42.95 32.0679 44.58C32.0679 46.19 31.4979 47.01 30.5779 47.01Z\"\n                fill=\"#1D1D1D\"\n            />\n            <path\n                opacity=\"0.25\"\n                d=\"M50.1505 40.98C48.3605 40.98 47.4105 42.5 47.4105 44.58C47.4105 46.65 48.3605 48.16 50.1505 48.16C51.9405 48.16 52.8905 46.65 52.8905 44.58C52.8905 42.5 51.9405 40.98 50.1505 40.98ZM50.1505 47.01C49.2305 47.01 48.6605 46.19 48.6605 44.58C48.6605 42.95 49.2305 42.13 50.1505 42.13C51.0705 42.13 51.6405 42.95 51.6405 44.58C51.6405 46.19 51.0705 47.01 50.1505 47.01ZM56.6298 40.98C54.8398 40.98 53.8898 42.5 53.8898 44.58C53.8898 46.65 54.8398 48.16 56.6298 48.16C58.4198 48.16 59.3698 46.65 59.3698 44.58C59.3698 42.5 58.4198 40.98 56.6298 40.98ZM56.6298 47.01C55.7098 47.01 55.1398 46.19 55.1398 44.58C55.1398 42.95 55.7098 42.13 56.6298 42.13C57.5498 42.13 58.1198 42.95 58.1198 44.58C58.1198 46.19 57.5498 47.01 56.6298 47.01ZM63.7391 40.83L61.2891 48H60.2691L62.7091 40.83H63.7391ZM67.3814 40.98C65.5914 40.98 64.6414 42.5 64.6414 44.58C64.6414 46.65 65.5914 48.16 67.3814 48.16C69.1714 48.16 70.1214 46.65 70.1214 44.58C70.1214 42.5 69.1714 40.98 67.3814 40.98ZM67.3814 47.01C66.4614 47.01 65.8914 46.19 65.8914 44.58C65.8914 42.95 66.4614 42.13 67.3814 42.13C68.3014 42.13 68.8714 42.95 68.8714 44.58C68.8714 46.19 68.3014 47.01 67.3814 47.01ZM73.8607 40.98C72.0707 40.98 71.1207 42.5 71.1207 44.58C71.1207 46.65 72.0707 48.16 73.8607 48.16C75.6507 48.16 76.6007 46.65 76.6007 44.58C76.6007 42.5 75.6507 40.98 73.8607 40.98ZM73.8607 47.01C72.9407 47.01 72.3707 46.19 72.3707 44.58C72.3707 42.95 72.9407 42.13 73.8607 42.13C74.7807 42.13 75.3507 42.95 75.3507 44.58C75.3507 46.19 74.7807 47.01 73.8607 47.01Z\"\n                fill=\"#1D1D1D\"\n            />\n        </svg>\n    );\n};\n\nexport default AddCard;\n"]}

package/dist/src/components/graphics/HomeEmptyCard.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { Color } from '../../util/Color';
+type HomeEmptyProps = JSX.IntrinsicElements['svg'] & {
+    color?: Color;
+};
+declare const HomeEmptyCard: FC<HomeEmptyProps>;
+export default HomeEmptyCard;