@roomstay/frontend 2.0.11 → 2.1.0

package/dist/src/hooks/AutoFocusOnSelect.js

@@ -70,6 +70,7 @@ const useAutoFocusOnSelect = ({ ref, onlyAutoOpenWhenInputEmpty = false, focusOn
         onDropdownClosed,
         onTriggerClicked,
         onItemSelected,
+        setIsDropdownOpen,
     };
 };
 exports.useAutoFocusOnSelect = useAutoFocusOnSelect;

package/dist/src/hooks/AutoFocusOnSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoFocusOnSelect.js","sourceRoot":"/","sources":["src/hooks/AutoFocusOnSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from 'react';\nimport { debounce } from '../util/Debounce';\n\ninterface UseAutoFocusOnSelectProps {\n    ref: HTMLInputElement | null;\n    onlyAutoOpenWhenInputEmpty?: boolean;\n    focusOnSelected?: boolean;\n}\n\nconst duration = 300;\n\nexport const useAutoFocusOnSelect = ({ ref, onlyAutoOpenWhenInputEmpty = false, focusOnSelected = true }: UseAutoFocusOnSelectProps) => {\n    const [isFocused, setIsFocused] = useState<boolean>(false);\n    const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n    const lockOpen = useRef<boolean>(false);\n    const timeout = useRef<NodeJS.Timeout>();\n\n    useEffect(() => clearTimeout(timeout.current), []);\n\n    const debounceSetFocus = useCallback(\n        debounce((value) => {\n            setIsFocused(value);\n        }, duration),\n        []\n    );\n\n    const onTriggerClicked = () => {\n        setIsDropdownOpen(true);\n        debounceSetFocus(true);\n    };\n\n    const onDropdownClosed = (e: MouseEvent) => {\n        const composedPath = e.composedPath() as HTMLElement[];\n        if (composedPath.some((el) => el.isSameNode?.(ref))) {\n            return;\n        }\n        if (!lockOpen.current) {\n            setIsDropdownOpen(false);\n        }\n        debounceSetFocus(false);\n    };\n\n    const onItemSelected = () => {\n        if (!lockOpen.current) setIsDropdownOpen(false);\n        if (focusOnSelected) ref?.focus();\n        else ref?.blur();\n    };\n\n    const _onFocus = useCallback(() => {\n        if (!isFocused) {\n            if (!onlyAutoOpenWhenInputEmpty || !ref?.value) {\n                setIsDropdownOpen(true);\n                lockOpen.current = true;\n                timeout.current = setTimeout(() => {\n                    lockOpen.current = false;\n                }, duration);\n            }\n        }\n        debounceSetFocus(true);\n    }, [setIsFocused, isFocused, isDropdownOpen, setIsDropdownOpen]);\n\n    const _onBlur = useCallback(() => {\n        debounceSetFocus(false);\n    }, [setIsFocused]);\n\n    useEffect(() => {\n        if (!ref) return;\n        ref.addEventListener('focus', _onFocus);\n        ref.addEventListener('blur', _onBlur);\n        ref.addEventListener('click', _onFocus);\n        return () => {\n            if (!ref) return;\n            ref.removeEventListener('focus', _onFocus);\n            ref.removeEventListener('blur', _onBlur);\n            ref.removeEventListener('click', _onFocus);\n        };\n    }, [ref, _onFocus, _onBlur]);\n    return {\n        isFocused,\n        isDropdownOpen,\n        onDropdownClosed,\n        onTriggerClicked,\n        onItemSelected,\n    };\n};\n"]}
+{"version":3,"file":"AutoFocusOnSelect.js","sourceRoot":"/","sources":["src/hooks/AutoFocusOnSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from 'react';\nimport { debounce } from '../util/Debounce';\n\ninterface UseAutoFocusOnSelectProps {\n    ref: HTMLInputElement | null;\n    onlyAutoOpenWhenInputEmpty?: boolean;\n    focusOnSelected?: boolean;\n}\n\nconst duration = 300;\n\nexport const useAutoFocusOnSelect = ({ ref, onlyAutoOpenWhenInputEmpty = false, focusOnSelected = true }: UseAutoFocusOnSelectProps) => {\n    const [isFocused, setIsFocused] = useState<boolean>(false);\n    const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n    const lockOpen = useRef<boolean>(false);\n    const timeout = useRef<NodeJS.Timeout>();\n\n    useEffect(() => clearTimeout(timeout.current), []);\n\n    const debounceSetFocus = useCallback(\n        debounce((value) => {\n            setIsFocused(value);\n        }, duration),\n        []\n    );\n\n    const onTriggerClicked = () => {\n        setIsDropdownOpen(true);\n        debounceSetFocus(true);\n    };\n\n    const onDropdownClosed = (e: MouseEvent) => {\n        const composedPath = e.composedPath() as HTMLElement[];\n        if (composedPath.some((el) => el.isSameNode?.(ref))) {\n            return;\n        }\n        if (!lockOpen.current) {\n            setIsDropdownOpen(false);\n        }\n        debounceSetFocus(false);\n    };\n\n    const onItemSelected = () => {\n        if (!lockOpen.current) setIsDropdownOpen(false);\n        if (focusOnSelected) ref?.focus();\n        else ref?.blur();\n    };\n\n    const _onFocus = useCallback(() => {\n        if (!isFocused) {\n            if (!onlyAutoOpenWhenInputEmpty || !ref?.value) {\n                setIsDropdownOpen(true);\n                lockOpen.current = true;\n                timeout.current = setTimeout(() => {\n                    lockOpen.current = false;\n                }, duration);\n            }\n        }\n        debounceSetFocus(true);\n    }, [setIsFocused, isFocused, isDropdownOpen, setIsDropdownOpen]);\n\n    const _onBlur = useCallback(() => {\n        debounceSetFocus(false);\n    }, [setIsFocused]);\n\n    useEffect(() => {\n        if (!ref) return;\n        ref.addEventListener('focus', _onFocus);\n        ref.addEventListener('blur', _onBlur);\n        ref.addEventListener('click', _onFocus);\n        return () => {\n            if (!ref) return;\n            ref.removeEventListener('focus', _onFocus);\n            ref.removeEventListener('blur', _onBlur);\n            ref.removeEventListener('click', _onFocus);\n        };\n    }, [ref, _onFocus, _onBlur]);\n    return {\n        isFocused,\n        isDropdownOpen,\n        onDropdownClosed,\n        onTriggerClicked,\n        onItemSelected,\n        setIsDropdownOpen,\n    };\n};\n"]}

package/dist/src/hooks/ConfirmationQuery.js

@@ -4,9 +4,9 @@ exports.useConfirmationQuery = void 0;
 const react_1 = require("react");
 const Query_1 = require("./Query");
 const useConfirmationQuery = () => {
+    const hashQuery = (0, Query_1.useHashQuery)();
     const query = (0, Query_1.useQuery)();
-    const hashQuery = (0, Query_1.useHashParams)();
-    const [queryPaymentMethod, queryRoomstayId, queryPlanpayCheckoutId] = (0, react_1.useMemo)(() => ['paymentMethod', 'roomstayId', 'planpay_checkout_id'].map((name) => hashQuery.get(name) || query.get(name)), [query]);
+    const [queryPaymentMethod, queryRoomstayId, queryPlanpayCheckoutId] = (0, react_1.useMemo)(() => ['paymentMethod', 'roomstayId', 'planpay_checkout_id'].map((name) => query.get(name) || hashQuery.get(name)), [hashQuery, query]);
     return {
         queryPaymentMethod,
         queryRoomstayId,

package/dist/src/hooks/ConfirmationQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationQuery.js","sourceRoot":"/","sources":["src/hooks/ConfirmationQuery.ts"],"names":[],"mappings":";;;AAAA,iCAAgC;AAChC,mCAAkD;AAE3C,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACrC,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IACzB,MAAM,SAAS,GAAG,IAAA,qBAAa,GAAE,CAAC;IAClC,MAAM,CAAC,kBAAkB,EAAE,eAAe,EAAE,sBAAsB,CAAC,GAAG,IAAA,eAAO,EACzE,GAAG,EAAE,CAAC,CAAC,eAAe,EAAE,YAAY,EAAE,qBAAqB,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,EAClH,CAAC,KAAK,CAAC,CACV,CAAC;IACF,OAAO;QACH,kBAAkB;QAClB,eAAe;QACf,sBAAsB;KACzB,CAAC;AACN,CAAC,CAAC;AAZW,QAAA,oBAAoB,wBAY/B","sourcesContent":["import { useMemo } from 'react';\nimport { useHashParams, useQuery } from './Query';\n\nexport const useConfirmationQuery = () => {\n    const query = useQuery();\n    const hashQuery = useHashParams();\n    const [queryPaymentMethod, queryRoomstayId, queryPlanpayCheckoutId] = useMemo(\n        () => ['paymentMethod', 'roomstayId', 'planpay_checkout_id'].map((name) => hashQuery.get(name) || query.get(name)),\n        [query]\n    );\n    return {\n        queryPaymentMethod,\n        queryRoomstayId,\n        queryPlanpayCheckoutId,\n    };\n};\n"]}
+{"version":3,"file":"ConfirmationQuery.js","sourceRoot":"/","sources":["src/hooks/ConfirmationQuery.ts"],"names":[],"mappings":";;;AAAA,iCAAgC;AAChC,mCAAiD;AAE1C,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACrC,MAAM,SAAS,GAAG,IAAA,oBAAY,GAAE,CAAC;IACjC,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IACzB,MAAM,CAAC,kBAAkB,EAAE,eAAe,EAAE,sBAAsB,CAAC,GAAG,IAAA,eAAO,EACzE,GAAG,EAAE,CAAC,CAAC,eAAe,EAAE,YAAY,EAAE,qBAAqB,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,EAClH,CAAC,SAAS,EAAE,KAAK,CAAC,CACrB,CAAC;IACF,OAAO;QACH,kBAAkB;QAClB,eAAe;QACf,sBAAsB;KACzB,CAAC;AACN,CAAC,CAAC;AAZW,QAAA,oBAAoB,wBAY/B","sourcesContent":["import { useMemo } from 'react';\nimport { useQuery, useHashQuery } from './Query';\n\nexport const useConfirmationQuery = () => {\n    const hashQuery = useHashQuery();\n    const query = useQuery();\n    const [queryPaymentMethod, queryRoomstayId, queryPlanpayCheckoutId] = useMemo(\n        () => ['paymentMethod', 'roomstayId', 'planpay_checkout_id'].map((name) => query.get(name) || hashQuery.get(name)),\n        [hashQuery, query]\n    );\n    return {\n        queryPaymentMethod,\n        queryRoomstayId,\n        queryPlanpayCheckoutId,\n    };\n};\n"]}

package/dist/src/hooks/ElementSortHook.js

@@ -1,7 +1,30 @@
 "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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useElementSort = void 0;
-const React = require("react");
+const React = __importStar(require("react"));
 const react_1 = require("react");
 const useElementSort = (list) => {
     const [sortedComponents, setSortedComponents] = (0, react_1.useState)([]);

package/dist/src/hooks/ElementSortHook.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementSortHook.js","sourceRoot":"/","sources":["src/hooks/ElementSortHook.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAiE;AAa1D,MAAM,cAAc,GAAG,CAAC,IAAwB,EAAE,EAAE;IACvD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IAE7D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC;aACjC,IAAI,CAAC,CAAC,UAAU,EAAE,SAAS,EAAE,EAAE;YAC5B,OAAO,UAAU,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC;QACpD,CAAC,CAAC;aACD,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,oBAAC,gBAAQ,IAAC,GAAG,EAAE,KAAK,IAAG,IAAI,CAAC,SAAS,CAAY,CAAC,CAAC;QAE7E,mBAAmB,CAAC,UAAU,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO;QACH,gBAAgB;KACnB,CAAC;AACN,CAAC,CAAC;AAhBW,QAAA,cAAc,kBAgBzB","sourcesContent":["import * as React from 'react';\nimport { Fragment, ReactNode, useEffect, useState } from 'react';\n\nexport type OrderableReactNode = {\n    // TODO: Add complex references to other OrderableReactNodes to chain blocks, and keep references.\n    priority: number;\n    // TODO: Add a way to pass props through to children.\n    component: ReactNode;\n};\n\nexport type OrderableReactList = {\n    [name: string]: OrderableReactNode;\n};\n\nexport const useElementSort = (list: OrderableReactList) => {\n    const [sortedComponents, setSortedComponents] = useState([]);\n\n    useEffect(() => {\n        const valueArray = Object.values(list)\n            .sort((firstValue, nextValue) => {\n                return firstValue.priority - nextValue.priority;\n            })\n            .map((item, index) => <Fragment key={index}>{item.component}</Fragment>);\n\n        setSortedComponents(valueArray);\n    }, [list]);\n\n    return {\n        sortedComponents,\n    };\n};\n"]}
+{"version":3,"file":"ElementSortHook.js","sourceRoot":"/","sources":["src/hooks/ElementSortHook.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,iCAAiE;AAa1D,MAAM,cAAc,GAAG,CAAC,IAAwB,EAAE,EAAE;IACvD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IAE7D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC;aACjC,IAAI,CAAC,CAAC,UAAU,EAAE,SAAS,EAAE,EAAE;YAC5B,OAAO,UAAU,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC;QACpD,CAAC,CAAC;aACD,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,oBAAC,gBAAQ,IAAC,GAAG,EAAE,KAAK,IAAG,IAAI,CAAC,SAAS,CAAY,CAAC,CAAC;QAE7E,mBAAmB,CAAC,UAAU,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO;QACH,gBAAgB;KACnB,CAAC;AACN,CAAC,CAAC;AAhBW,QAAA,cAAc,kBAgBzB","sourcesContent":["import * as React from 'react';\nimport { Fragment, ReactNode, useEffect, useState } from 'react';\n\nexport type OrderableReactNode = {\n    // TODO: Add complex references to other OrderableReactNodes to chain blocks, and keep references.\n    priority: number;\n    // TODO: Add a way to pass props through to children.\n    component: ReactNode;\n};\n\nexport type OrderableReactList = {\n    [name: string]: OrderableReactNode;\n};\n\nexport const useElementSort = (list: OrderableReactList) => {\n    const [sortedComponents, setSortedComponents] = useState([]);\n\n    useEffect(() => {\n        const valueArray = Object.values(list)\n            .sort((firstValue, nextValue) => {\n                return firstValue.priority - nextValue.priority;\n            })\n            .map((item, index) => <Fragment key={index}>{item.component}</Fragment>);\n\n        setSortedComponents(valueArray);\n    }, [list]);\n\n    return {\n        sortedComponents,\n    };\n};\n"]}

package/dist/src/hooks/EventHook.js

@@ -1,7 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useEvent = void 0;
-const RoomstayEventManager_1 = require("events/RoomstayEventManager");
+const RoomstayEventManager_1 = __importDefault(require("events/RoomstayEventManager"));
 // Thanks to Cerz for the idea
 const useEvent = () => {
     return {

package/dist/src/hooks/EventHook.js.map

@@ -1 +1 @@
-{"version":3,"file":"EventHook.js","sourceRoot":"/","sources":["src/hooks/EventHook.tsx"],"names":[],"mappings":";;;AACA,sEAA6E;AAE7E,8BAA8B;AACvB,MAAM,QAAQ,GAAG,GAAG,EAAE;IACzB,OAAO;QACH,KAAK,EAAE,CAAC,KAAoB,EAAE,EAAE;YAC5B,8BAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;QACD,EAAE,EAAE,CAAC,SAAiC,EAAE,QAA+B,EAAE,EAAW,EAAE,EAAE;YACpF,8BAAO,CAAC,QAAQ,CAAC,SAAS,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC;QAC9C,CAAC;KACJ,CAAC;AACN,CAAC,CAAC;AATW,QAAA,QAAQ,YASnB","sourcesContent":["import { RoomstayEvent } from 'events/RoomstayEvent';\nimport manager, { RoomstayEventCallback } from 'events/RoomstayEventManager';\n\n// Thanks to Cerz for the idea\nexport const useEvent = () => {\n    return {\n        raise: (event: RoomstayEvent) => {\n            manager.raise(event);\n        },\n        on: (eventType: RoomstayEvent | string, callback: RoomstayEventCallback, id?: string) => {\n            manager.addEvent(eventType, callback, id);\n        },\n    };\n};\n"]}
+{"version":3,"file":"EventHook.js","sourceRoot":"/","sources":["src/hooks/EventHook.tsx"],"names":[],"mappings":";;;;;;AACA,uFAA6E;AAE7E,8BAA8B;AACvB,MAAM,QAAQ,GAAG,GAAG,EAAE;IACzB,OAAO;QACH,KAAK,EAAE,CAAC,KAAoB,EAAE,EAAE;YAC5B,8BAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;QACD,EAAE,EAAE,CAAC,SAAiC,EAAE,QAA+B,EAAE,EAAW,EAAE,EAAE;YACpF,8BAAO,CAAC,QAAQ,CAAC,SAAS,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC;QAC9C,CAAC;KACJ,CAAC;AACN,CAAC,CAAC;AATW,QAAA,QAAQ,YASnB","sourcesContent":["import { RoomstayEvent } from 'events/RoomstayEvent';\nimport manager, { RoomstayEventCallback } from 'events/RoomstayEventManager';\n\n// Thanks to Cerz for the idea\nexport const useEvent = () => {\n    return {\n        raise: (event: RoomstayEvent) => {\n            manager.raise(event);\n        },\n        on: (eventType: RoomstayEvent | string, callback: RoomstayEventCallback, id?: string) => {\n            manager.addEvent(eventType, callback, id);\n        },\n    };\n};\n"]}

package/dist/src/hooks/KeyboardControlOnSelect.d.ts

@@ -1,13 +1,19 @@
-export declare const useKeyboardControlOnSelect: <T>({ defaultOption, options, idName, overlayRef, isEnabled, onSelected, }: {
-    defaultOption?: T;
-    options: T[];
-    idName: keyof T;
-    overlayRef: HTMLDivElement;
+import { MutableRefObject } from 'react';
+import { Option, TSelectOptionKey } from 'components/generic/Select/Select';
+export declare const useKeyboardControlOnSelect: <TOption extends Option<KeyName>, KeyName extends string>({ defaultOption, options, idName, overlayRef, isEnabled, onSelected, optionRefs, optionContainerRef, }: {
+    defaultOption?: TOption;
+    options: TSelectOptionKey<TOption>[];
+    idName: keyof TOption;
+    overlayRef: HTMLDivElement | null;
     isEnabled: boolean;
-    onSelected: (item: T) => void;
+    onSelected: (item: TOption) => void;
+    optionRefs: MutableRefObject<{
+        [id: string]: HTMLDivElement;
+    }>;
+    optionContainerRef: MutableRefObject<HTMLDivElement | null>;
 }) => {
-    selectingItem: T;
-    onItemMouseEnter: (item: T) => void;
+    selectingItem: TOption;
+    onItemMouseEnter: (item: TOption) => void;
     onItemMouseLeave: () => void;
     onItemMouseMove: () => void;
 };

package/dist/src/hooks/KeyboardControlOnSelect.js

@@ -2,18 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useKeyboardControlOnSelect = void 0;
 const react_1 = require("react");
-const useKeyboardControlOnSelect = ({ defaultOption, options, idName, overlayRef, isEnabled, onSelected, }) => {
+const useKeyboardControlOnSelect = ({ defaultOption, options, idName, overlayRef, isEnabled, onSelected, optionRefs, optionContainerRef, }) => {
     const [selectingItem, setSelectingItem] = (0, react_1.useState)(defaultOption);
     const [focusedItem, setFocusedItem] = (0, react_1.useState)(null);
     const [lockHover, setLockHover] = (0, react_1.useState)(false);
+    const flattenedOptions = options.reduce((flattenedOptions, optionGroup) => {
+        if (optionGroup.options)
+            return flattenedOptions.concat(optionGroup.options);
+        return flattenedOptions.concat([optionGroup]);
+    }, []);
     const _onKeyDown = (0, react_1.useCallback)((e) => {
         switch (e.key) {
             case 'ArrowUp': {
                 e.preventDefault();
                 setLockHover(true);
-                const index = options.findIndex((item) => (selectingItem === null || selectingItem === void 0 ? void 0 : selectingItem[idName]) === item[idName]);
-                const newIndex = index - 1 < 0 ? options.length - 1 : index - 1;
-                const newSelecting = options[newIndex];
+                const index = flattenedOptions.findIndex((item) => (selectingItem === null || selectingItem === void 0 ? void 0 : selectingItem[idName]) === item[idName]);
+                const newIndex = index - 1 < 0 ? flattenedOptions.length - 1 : index - 1;
+                const newSelecting = flattenedOptions[newIndex];
                 setSelectingItem(newSelecting);
                 scrollIntoSelectingItem(newSelecting);
                 break;
@@ -21,9 +26,9 @@ const useKeyboardControlOnSelect = ({ defaultOption, options, idName, overlayRef
             case 'ArrowDown': {
                 e.preventDefault();
                 setLockHover(true);
-                const index = options.findIndex((item) => (selectingItem === null || selectingItem === void 0 ? void 0 : selectingItem[idName]) === item[idName]);
-                const newIndex = (index + 1) % options.length;
-                const newSelecting = options[newIndex];
+                const index = flattenedOptions.findIndex((item) => (selectingItem === null || selectingItem === void 0 ? void 0 : selectingItem[idName]) === item[idName]);
+                const newIndex = (index + 1) % flattenedOptions.length;
+                const newSelecting = flattenedOptions[newIndex];
                 setSelectingItem(newSelecting);
                 scrollIntoSelectingItem(newSelecting);
                 break;
@@ -31,7 +36,7 @@ const useKeyboardControlOnSelect = ({ defaultOption, options, idName, overlayRef
             case 'Tab':
             case 'Enter': {
                 e.preventDefault();
-                const selectedItem = selectingItem || options[0];
+                const selectedItem = selectingItem || flattenedOptions[0];
                 if (selectedItem)
                     onSelected(selectedItem);
                 break;
@@ -40,40 +45,43 @@ const useKeyboardControlOnSelect = ({ defaultOption, options, idName, overlayRef
         }
     }, [options, setSelectingItem, selectingItem]);
     const scrollIntoSelectingItem = (selecting, smooth = true) => {
-        if (overlayRef) {
-            const index = options.findIndex((item) => selecting[idName] === item[idName]);
-            const childNodes = [...overlayRef.childNodes];
-            const scrollTop = childNodes.slice(0, index).reduce((result, node) => {
-                result += node.getBoundingClientRect().height;
-                return result;
-            }, 0);
-            const offset = overlayRef.clientHeight / 2;
-            const targetPosition = Math.max(scrollTop + childNodes[index].getBoundingClientRect().height - offset, 0);
-            if (smooth)
-                scrollTo(overlayRef, targetPosition, 200);
-            else
-                overlayRef.scrollTop = targetPosition;
+        const optionRef = optionRefs.current[selecting[idName]];
+        if (optionContainerRef.current && optionRef) {
+            scrollToElm(optionContainerRef.current, optionRef, 0.2, optionContainerRef.current.getBoundingClientRect().height / 2);
         }
     };
-    const easeInOutQuad = function (t, b, c, d) {
-        t /= d / 2;
-        if (t < 1)
-            return (c / 2) * t * t + b;
-        t--;
-        return (-c / 2) * (t * (t - 2) - 1) + b;
+    const scrollToElm = (container, elm, duration, offset = 0) => {
+        const pos = getRelativePos(elm);
+        scrollTo(container, pos.top - offset, duration); // duration in seconds
     };
-    const scrollTo = (element, to, duration) => {
-        const start = element.scrollTop, change = to - start, increment = 20;
-        let currentTime = 0;
-        const animateScroll = function () {
-            currentTime += increment;
-            element.scrollTop = easeInOutQuad(currentTime, start, change, duration);
-            if (currentTime < duration) {
-                setTimeout(animateScroll, increment);
-            }
+    const getRelativePos = (elm) => {
+        const pPos = elm.parentNode.getBoundingClientRect(), // parent pos
+        cPos = elm.getBoundingClientRect(), // target pos
+        pos = {};
+        (pos.top = cPos.top - pPos.top + elm.parentNode.scrollTop),
+            (pos.right = cPos.right - pPos.right),
+            (pos.bottom = cPos.bottom - pPos.bottom),
+            (pos.left = cPos.left - pPos.left);
+        return pos;
+    };
+    const scrollTo = (element, to, duration, onDone) => {
+        let now, elapsed, t;
+        const startTime = performance.now(), start = element.scrollTop, change = to - start;
+        const animateScroll = () => {
+            now = performance.now();
+            elapsed = (now - startTime) / 1000;
+            t = elapsed / duration;
+            element.scrollTop = start + change * easeInOutQuad(t);
+            if (t < 1)
+                window.requestAnimationFrame(animateScroll);
+            else
+                onDone && onDone();
         };
         animateScroll();
     };
+    const easeInOutQuad = (t) => {
+        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+    };
     (0, react_1.useEffect)(() => setSelectingItem(focusedItem || defaultOption), [defaultOption, focusedItem]);
     (0, react_1.useEffect)(() => {
         if (isEnabled)
@@ -84,7 +92,7 @@ const useKeyboardControlOnSelect = ({ defaultOption, options, idName, overlayRef
         };
     }, [_onKeyDown, isEnabled]);
     (0, react_1.useEffect)(() => {
-        setSelectingItem(options.find((item) => item[idName] === (selectingItem === null || selectingItem === void 0 ? void 0 : selectingItem[idName])));
+        setSelectingItem(flattenedOptions.find((item) => item[idName] === (selectingItem === null || selectingItem === void 0 ? void 0 : selectingItem[idName])));
     }, [options]);
     (0, react_1.useEffect)(() => {
         if (isEnabled && overlayRef && defaultOption) {

package/dist/src/hooks/KeyboardControlOnSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardControlOnSelect.js","sourceRoot":"/","sources":["src/hooks/KeyboardControlOnSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\nexport const useKeyboardControlOnSelect = <T>({\n    defaultOption,\n    options,\n    idName,\n    overlayRef,\n    isEnabled,\n    onSelected,\n}: {\n    defaultOption?: T;\n    options: T[];\n    idName: keyof T;\n    overlayRef: HTMLDivElement;\n    isEnabled: boolean;\n    onSelected: (item: T) => void;\n}) => {\n    const [selectingItem, setSelectingItem] = useState<T | undefined>(defaultOption);\n    const [focusedItem, setFocusedItem] = useState<T | null>(null);\n    const [lockHover, setLockHover] = useState<boolean>(false);\n    const _onKeyDown = useCallback(\n        (e: KeyboardEvent) => {\n            switch (e.key) {\n                case 'ArrowUp': {\n                    e.preventDefault();\n                    setLockHover(true);\n                    const index = options.findIndex((item) => selectingItem?.[idName] === item[idName]);\n                    const newIndex = index - 1 < 0 ? options.length - 1 : index - 1;\n                    const newSelecting = options[newIndex];\n                    setSelectingItem(newSelecting);\n                    scrollIntoSelectingItem(newSelecting);\n                    break;\n                }\n                case 'ArrowDown': {\n                    e.preventDefault();\n                    setLockHover(true);\n                    const index = options.findIndex((item) => selectingItem?.[idName] === item[idName]);\n                    const newIndex = (index + 1) % options.length;\n                    const newSelecting = options[newIndex];\n                    setSelectingItem(newSelecting);\n                    scrollIntoSelectingItem(newSelecting);\n                    break;\n                }\n                case 'Tab':\n                case 'Enter': {\n                    e.preventDefault();\n                    const selectedItem = selectingItem || options[0];\n                    if (selectedItem) onSelected(selectedItem);\n                    break;\n                }\n                default:\n            }\n        },\n        [options, setSelectingItem, selectingItem]\n    );\n\n    const scrollIntoSelectingItem = (selecting: T, smooth = true) => {\n        if (overlayRef) {\n            const index = options.findIndex((item) => selecting[idName] === item[idName]);\n            const childNodes: HTMLDivElement[] = [...overlayRef.childNodes] as HTMLDivElement[];\n            const scrollTop = childNodes.slice(0, index).reduce<number>((result, node) => {\n                result += node.getBoundingClientRect().height;\n                return result;\n            }, 0);\n            const offset = overlayRef.clientHeight / 2;\n            const targetPosition = Math.max(scrollTop + childNodes[index].getBoundingClientRect().height - offset, 0);\n            if (smooth) scrollTo(overlayRef, targetPosition, 200);\n            else overlayRef.scrollTop = targetPosition;\n        }\n    };\n\n    const easeInOutQuad = function (t: number, b: number, c: number, d: number) {\n        t /= d / 2;\n        if (t < 1) return (c / 2) * t * t + b;\n        t--;\n        return (-c / 2) * (t * (t - 2) - 1) + b;\n    };\n\n    const scrollTo = (element: HTMLElement, to: number, duration: number) => {\n        const start = element.scrollTop,\n            change = to - start,\n            increment = 20;\n\n        let currentTime = 0;\n\n        const animateScroll = function () {\n            currentTime += increment;\n            element.scrollTop = easeInOutQuad(currentTime, start, change, duration);\n            if (currentTime < duration) {\n                setTimeout(animateScroll, increment);\n            }\n        };\n        animateScroll();\n    };\n\n    useEffect(() => setSelectingItem(focusedItem || defaultOption), [defaultOption, focusedItem]);\n\n    useEffect(() => {\n        if (isEnabled) window.addEventListener('keydown', _onKeyDown);\n        return () => {\n            if (isEnabled) window.removeEventListener('keydown', _onKeyDown);\n        };\n    }, [_onKeyDown, isEnabled]);\n\n    useEffect(() => {\n        setSelectingItem(options.find((item) => item[idName] === selectingItem?.[idName]));\n    }, [options]);\n\n    useEffect(() => {\n        if (isEnabled && overlayRef && defaultOption) {\n            scrollIntoSelectingItem(defaultOption, false);\n        }\n    }, [isEnabled, defaultOption, overlayRef]);\n\n    const onItemMouseEnter = (item: T) => {\n        if (!lockHover) setFocusedItem(item);\n    };\n\n    const onItemMouseLeave = () => {\n        if (!lockHover) setFocusedItem(null);\n    };\n\n    const onItemMouseMove = () => setLockHover(false);\n\n    return {\n        selectingItem,\n        onItemMouseEnter,\n        onItemMouseLeave,\n        onItemMouseMove,\n    };\n};\n"]}
+{"version":3,"file":"KeyboardControlOnSelect.js","sourceRoot":"/","sources":["src/hooks/KeyboardControlOnSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import { MutableRefObject, useCallback, useEffect, useState } from 'react';\nimport { Option, TSelectOptionKey } from 'components/generic/Select/Select';\n\nexport const useKeyboardControlOnSelect = <TOption extends Option<KeyName>, KeyName extends string>({\n    defaultOption,\n    options,\n    idName,\n    overlayRef,\n    isEnabled,\n    onSelected,\n    optionRefs,\n    optionContainerRef,\n}: {\n    defaultOption?: TOption;\n    options: TSelectOptionKey<TOption>[];\n    idName: keyof TOption;\n    overlayRef: HTMLDivElement | null;\n    isEnabled: boolean;\n    onSelected: (item: TOption) => void;\n    optionRefs: MutableRefObject<{ [id: string]: HTMLDivElement | undefined | null }>;\n    optionContainerRef: MutableRefObject<HTMLDivElement | null>;\n}) => {\n    const [selectingItem, setSelectingItem] = useState<TOption | undefined>(defaultOption);\n    const [focusedItem, setFocusedItem] = useState<TOption | null>(null);\n    const [lockHover, setLockHover] = useState<boolean>(false);\n    const flattenedOptions = options.reduce<TOption[]>((flattenedOptions, optionGroup) => {\n        if (optionGroup.options) return flattenedOptions.concat(optionGroup.options as TOption[]);\n        return flattenedOptions.concat([optionGroup as TOption]);\n    }, []);\n\n    const _onKeyDown = useCallback(\n        (e: KeyboardEvent) => {\n            switch (e.key) {\n                case 'ArrowUp': {\n                    e.preventDefault();\n                    setLockHover(true);\n                    const index = flattenedOptions.findIndex((item) => selectingItem?.[idName] === item[idName]);\n                    const newIndex = index - 1 < 0 ? flattenedOptions.length - 1 : index - 1;\n                    const newSelecting = flattenedOptions[newIndex];\n                    setSelectingItem(newSelecting);\n                    scrollIntoSelectingItem(newSelecting);\n                    break;\n                }\n                case 'ArrowDown': {\n                    e.preventDefault();\n                    setLockHover(true);\n                    const index = flattenedOptions.findIndex((item) => selectingItem?.[idName] === item[idName]);\n                    const newIndex = (index + 1) % flattenedOptions.length;\n                    const newSelecting = flattenedOptions[newIndex];\n                    setSelectingItem(newSelecting);\n                    scrollIntoSelectingItem(newSelecting);\n                    break;\n                }\n                case 'Tab':\n                case 'Enter': {\n                    e.preventDefault();\n                    const selectedItem = selectingItem || flattenedOptions[0];\n                    if (selectedItem) onSelected(selectedItem);\n                    break;\n                }\n                default:\n            }\n        },\n        [options, setSelectingItem, selectingItem]\n    );\n\n    const scrollIntoSelectingItem = (selecting: TOption, smooth = true) => {\n        const optionRef = optionRefs.current[selecting[idName] as unknown as string];\n        if (optionContainerRef.current && optionRef) {\n            scrollToElm(optionContainerRef.current, optionRef, 0.2, optionContainerRef.current.getBoundingClientRect().height / 2);\n        }\n    };\n\n    const scrollToElm = (container: HTMLElement, elm: HTMLElement, duration: number, offset = 0) => {\n        const pos = getRelativePos(elm);\n        scrollTo(container, pos.top - offset, duration); // duration in seconds\n    };\n\n    const getRelativePos = (elm: HTMLElement): { top: number; right: number; bottom: number; left: number } => {\n        const pPos = (elm.parentNode as HTMLElement).getBoundingClientRect(), // parent pos\n            cPos = elm.getBoundingClientRect(), // target pos\n            pos: { top?: number; right?: number; bottom?: number; left?: number } = {};\n\n        (pos.top = cPos.top - pPos.top + (elm.parentNode as HTMLElement).scrollTop),\n            (pos.right = cPos.right - pPos.right),\n            (pos.bottom = cPos.bottom - pPos.bottom),\n            (pos.left = cPos.left - pPos.left);\n\n        return pos as ReturnType<typeof getRelativePos>;\n    };\n\n    const scrollTo = (element: HTMLElement, to: number, duration: number, onDone?: () => void) => {\n        let now, elapsed, t;\n        const startTime = performance.now(),\n            start = element.scrollTop,\n            change = to - start;\n\n        const animateScroll = () => {\n            now = performance.now();\n            elapsed = (now - startTime) / 1000;\n            t = elapsed / duration;\n\n            element.scrollTop = start + change * easeInOutQuad(t);\n\n            if (t < 1) window.requestAnimationFrame(animateScroll);\n            else onDone && onDone();\n        };\n\n        animateScroll();\n    };\n\n    const easeInOutQuad = (t: number) => {\n        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;\n    };\n\n    useEffect(() => setSelectingItem(focusedItem || defaultOption), [defaultOption, focusedItem]);\n\n    useEffect(() => {\n        if (isEnabled) window.addEventListener('keydown', _onKeyDown);\n        return () => {\n            if (isEnabled) window.removeEventListener('keydown', _onKeyDown);\n        };\n    }, [_onKeyDown, isEnabled]);\n\n    useEffect(() => {\n        setSelectingItem(flattenedOptions.find((item) => item[idName] === selectingItem?.[idName]));\n    }, [options]);\n\n    useEffect(() => {\n        if (isEnabled && overlayRef && defaultOption) {\n            scrollIntoSelectingItem(defaultOption, false);\n        }\n    }, [isEnabled, defaultOption, overlayRef]);\n\n    const onItemMouseEnter = (item: TOption) => {\n        if (!lockHover) setFocusedItem(item);\n    };\n\n    const onItemMouseLeave = () => {\n        if (!lockHover) setFocusedItem(null);\n    };\n\n    const onItemMouseMove = () => setLockHover(false);\n\n    return {\n        selectingItem,\n        onItemMouseEnter,\n        onItemMouseLeave,\n        onItemMouseMove,\n    };\n};\n"]}

package/dist/src/hooks/Query.d.ts

@@ -1,2 +1,2 @@
+export declare function useHashQuery(): URLSearchParams;
 export declare function useQuery(): URLSearchParams;
-export declare function useHashParams(): URLSearchParams;

package/dist/src/hooks/Query.js

@@ -1,15 +1,38 @@
 "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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useHashParams = exports.useQuery = void 0;
+exports.useQuery = exports.useHashQuery = void 0;
 const react_router_dom_1 = require("react-router-dom");
-const React = require("react");
-function useQuery() {
+const React = __importStar(require("react"));
+function useHashQuery() {
     const { search } = (0, react_router_dom_1.useLocation)();
     return React.useMemo(() => new URLSearchParams(search), [search]);
 }
-exports.useQuery = useQuery;
-function useHashParams() {
+exports.useHashQuery = useHashQuery;
+function useQuery() {
     return React.useMemo(() => new URLSearchParams(window.location.search), [window.location.search]);
 }
-exports.useHashParams = useHashParams;
+exports.useQuery = useQuery;
 //# sourceMappingURL=Query.js.map

package/dist/src/hooks/Query.js.map

@@ -1 +1 @@
-{"version":3,"file":"Query.js","sourceRoot":"/","sources":["src/hooks/Query.ts"],"names":[],"mappings":";;;AAAA,uDAA+C;AAC/C,+BAA+B;AAE/B,SAAgB,QAAQ;IACpB,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,8BAAW,GAAE,CAAC;IACjC,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACtE,CAAC;AAHD,4BAGC;AAED,SAAgB,aAAa;IACzB,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;AACtG,CAAC;AAFD,sCAEC","sourcesContent":["import { useLocation } from 'react-router-dom';\nimport * as React from 'react';\n\nexport function useQuery() {\n    const { search } = useLocation();\n    return React.useMemo(() => new URLSearchParams(search), [search]);\n}\n\nexport function useHashParams() {\n    return React.useMemo(() => new URLSearchParams(window.location.search), [window.location.search]);\n}\n"]}
+{"version":3,"file":"Query.js","sourceRoot":"/","sources":["src/hooks/Query.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uDAA+C;AAC/C,6CAA+B;AAE/B,SAAgB,YAAY;IACxB,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,8BAAW,GAAE,CAAC;IACjC,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACtE,CAAC;AAHD,oCAGC;AAED,SAAgB,QAAQ;IACpB,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;AACtG,CAAC;AAFD,4BAEC","sourcesContent":["import { useLocation } from 'react-router-dom';\nimport * as React from 'react';\n\nexport function useHashQuery() {\n    const { search } = useLocation();\n    return React.useMemo(() => new URLSearchParams(search), [search]);\n}\n\nexport function useQuery() {\n    return React.useMemo(() => new URLSearchParams(window.location.search), [window.location.search]);\n}\n"]}

package/dist/src/hooks/VGSHooks.js

@@ -8,12 +8,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useVgsCollect = exports.useVgsShow = void 0;
 const auth_1 = require("@aws-amplify/auth");
-const RoomstayThemeEngine_1 = require("providers/RoomstayThemeEngine");
+const RoomstayThemeEngine_1 = __importDefault(require("providers/RoomstayThemeEngine"));
 const react_1 = require("react");
-const classNames = require("classnames");
+const classnames_1 = __importDefault(require("classnames"));
 const CurrentHotelHook_1 = require("./CurrentHotelHook");
 let vgsShowLoader = null;
 let VGSShow;
@@ -103,7 +106,7 @@ const useVgsCollect = (fields) => {
         const config = fields[index];
         if (!field)
             return '';
-        return classNames('c-input', extendedClasses, {
+        return (0, classnames_1.default)('c-input', 'c-input--vgs', extendedClasses, {
             '--selected': field.isFocused,
             '--success': field.isValid !== null && field.isValid,
             '--error': field.isValid !== null && !field.isValid,

package/dist/src/hooks/VGSHooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"VGSHooks.js","sourceRoot":"/","sources":["src/hooks/VGSHooks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Auth } from '@aws-amplify/auth';\nimport { ECardType } from 'models/PaymentCard';\nimport RoomstayThemeEngine from 'providers/RoomstayThemeEngine';\nimport { useEffect, useRef, useState } from 'react';\nimport * as classNames from 'classnames';\nimport { useCurrentHotel } from './CurrentHotelHook';\n\nlet vgsShowLoader: Promise<any> | null = null;\nlet VGSShow: any;\n\nlet vgsCollectLoader: Promise<any> | null = null;\n\ndeclare global {\n    interface Window {\n        VGSCollect: any;\n    }\n}\n\nwindow.VGSCollect = window.VGSCollect || {};\n\ntype UseVgsShowProps = {\n    name: string;\n    value: string;\n\n    styles?: {};\n};\n\nexport const useVgsShow = (props: UseVgsShowProps) => {\n    const { hotel } = useCurrentHotel();\n\n    const [randomId, setRandomId] = useState(btoa((Math.random() * Math.random() * Date.now()).toString()).replace(/\\=/gi, ''));\n    const [isLoading, setIsLoading] = useState(false);\n\n    const targetRef = useRef(null);\n\n    useEffect(() => {\n        if (vgsShowLoader === null) {\n            vgsShowLoader = (async () => {\n                try {\n                    await RoomstayThemeEngine.loadScript('https://js.verygoodvault.com/vgs-show/2.0.2/show.js', 'vgs-show');\n\n                    // TODO: Load this ID dynamically\n                    VGSShow = window.VGSShow.create(hotel.vgsVaultName, (state: any) => {}).setEnvironment('live');\n                } catch (ex) {\n                    console.error('Unable to load vgs-show ' + ex.message);\n                }\n            })();\n        }\n    }, []);\n\n    useEffect(() => {\n        let cancelled = false;\n\n        if (VGSShow && targetRef?.current) {\n            targetRef.current.classList.add(randomId);\n            setIsLoading(true);\n\n            Auth.currentAuthenticatedUser().then((cognitoData) => {\n                const jwtToken = cognitoData.signInUserSession.idToken.jwtToken;\n\n                const revealer = VGSShow.request({\n                    name: props.name,\n                    method: 'POST',\n                    path: '/members/vgs-auth',\n                    payload: {\n                        [props.name]: `${props.value}`,\n                    },\n                    headers: {\n                        Authorization: jwtToken,\n                    },\n                    serializers: [VGSShow.SERIALIZERS.replace('(\\\\d{4})(\\\\d{4})(\\\\d{4})(\\\\d{4})', '$1 $2 $3 $4')],\n                    htmlWrapper: 'text',\n                    jsonPathSelector: `${props.name}`,\n                });\n\n                // TODO: Handle failure on reveal\n                revealer.on('revealSuccess', () => {\n                    setIsLoading(false);\n                });\n\n                revealer.on('revealFail', () => {\n                    setIsLoading(false);\n                });\n\n                targetRef.current.innerHTML = '';\n                revealer.render(`.${randomId}`, props.styles);\n            });\n        }\n\n        return () => {\n            cancelled = true;\n        };\n    }, [VGSShow, targetRef, props.name, props.value]);\n\n    return { targetRef, isLoading };\n};\n\ntype VGSCollectProps = {\n    name: string;\n    type: 'card-expiration-date' | 'text' | 'card-number' | 'card-security-code';\n    label: string;\n\n    vgsProps: {\n        validations?: ('required' | 'validCardNumber' | 'validCardExpirationDate' | 'validCardSecurityCode')[];\n        disabled?: boolean;\n        css: object;\n        placeholder?: string;\n\n        [name: string]: any;\n    };\n};\n\ntype VGSCollectInputState = {\n    name: string;\n    label: string;\n    type: string;\n\n    isFocused: boolean;\n    isValid: boolean;\n\n    vgsInput: any;\n\n    cardType?: ECardType;\n};\n\nexport const useVgsCollect = (fields: VGSCollectProps[]) => {\n    const { hotel } = useCurrentHotel();\n\n    const refs = fields.map(() => {\n        return useRef();\n    });\n\n    const getDefaultStateFromFields: () => VGSCollectInputState[] = () => {\n        return fields.map((field) => {\n            return {\n                isFocused: null,\n                isValid: null,\n\n                name: field.name,\n                label: field.label,\n                type: field.type,\n\n                vgsInput: null,\n            };\n        });\n    };\n\n    const mapInputConfigToVGS = (config: VGSCollectProps) => {\n        return { name: config.name, type: config.type, ...config.vgsProps, disabled: config.vgsProps.disabled || undefined };\n    };\n\n    const getClassesFormInput = (index: number, extendedClasses?: string) => {\n        const field: VGSCollectInputState = inputState[index];\n        const config = fields[index];\n\n        if (!field) return '';\n\n        return classNames('c-input', extendedClasses, {\n            '--selected': field.isFocused,\n            '--success': field.isValid !== null && field.isValid,\n            '--error': field.isValid !== null && !field.isValid,\n            '--disabled': !!config?.vgsProps?.disabled,\n        });\n    };\n\n    const [vgsLoaded, setVgsLoaded] = useState(false);\n    const [vgsForm, setVgsForm] = useState(null);\n    const [inputState, setInputState] = useState<VGSCollectInputState[]>(getDefaultStateFromFields());\n\n    /** Loading VGS, or seeing if it's been loaded before, and binding onto that. */\n    useEffect(() => {\n        let cancelled = false;\n\n        if (vgsCollectLoader === null) {\n            vgsCollectLoader = (async () => {\n                await RoomstayThemeEngine.loadScript('https://js.verygoodvault.com/vgs-collect/2.18.1/vgs-collect.js', 'vgs-collect');\n\n                if (!cancelled) {\n                    setVgsLoaded(true);\n                }\n            })();\n        } else {\n            vgsCollectLoader.then(() => {\n                if (!cancelled) {\n                    setVgsLoaded(true);\n                }\n            });\n        }\n\n        return () => {\n            cancelled = true;\n        };\n    }, []);\n\n    useEffect(() => {\n        for (const ref of refs) {\n            if (!ref?.current) {\n                // Means we've still to wait for all the refs to bind\n                return;\n            }\n        }\n\n        if (vgsLoaded && !vgsForm) {\n            const form = window.VGSCollect.create(hotel.vgsVaultName, 'live', (state: any) => {\n                setInputState((oldState) => {\n                    const newState = [...oldState];\n\n                    for (const input of newState) {\n                        const vgsState = state[input.name];\n\n                        if (vgsState) {\n                            input.isFocused = vgsState.isFocused;\n                            input.isValid = !vgsState.isEmpty ? vgsState.isValid : null;\n\n                            if (input.type === 'card-number') {\n                                input.cardType = vgsState.cardType;\n                            }\n                        }\n                    }\n\n                    return newState;\n                });\n            });\n\n            setVgsForm(form);\n\n            setInputState((oldState) => {\n                const newState = [...oldState];\n\n                for (let i = 0; i < newState.length; i++) {\n                    const input = newState[i];\n                    const inputConfig = fields[i];\n\n                    input.vgsInput = form.field(refs[i].current, mapInputConfigToVGS(inputConfig));\n                }\n\n                return newState;\n            });\n        }\n    }, [vgsLoaded, vgsForm, refs]);\n\n    const triggerFieldUpdate = () => {\n        for (const ref of refs) {\n            if (!ref?.current) {\n                // Means we've still to wait for all the refs to bind\n                return;\n            }\n        }\n\n        if (!vgsForm) {\n            // Means VGS Collect has not loaded yet.\n            return;\n        }\n\n        for (let i = 0; i < inputState.length; i++) {\n            const input = inputState[i];\n            const inputConfig = fields[i];\n\n            if (input.vgsInput) {\n                input.vgsInput.update?.(mapInputConfigToVGS(inputConfig));\n            }\n        }\n    };\n\n    return {\n        fields: fields.map((item, index) => {\n            return {\n                ref: refs[index],\n                state: inputState[index],\n                getClasses: (extendedClasses?: string) => getClassesFormInput(index, extendedClasses),\n            };\n        }),\n        triggerFieldUpdate,\n        vgsForm,\n    };\n};\n"]}
+{"version":3,"file":"VGSHooks.js","sourceRoot":"/","sources":["src/hooks/VGSHooks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Auth } from '@aws-amplify/auth';\nimport { ECardType } from 'models/PaymentCard';\nimport RoomstayThemeEngine from 'providers/RoomstayThemeEngine';\nimport { useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useCurrentHotel } from './CurrentHotelHook';\n\nlet vgsShowLoader: Promise<any> | null = null;\nlet VGSShow: any;\n\nlet vgsCollectLoader: Promise<any> | null = null;\n\ndeclare global {\n    interface Window {\n        VGSCollect: any;\n    }\n}\n\nwindow.VGSCollect = window.VGSCollect || {};\n\ntype UseVgsShowProps = {\n    name: string;\n    value: string;\n\n    styles?: {};\n};\n\nexport const useVgsShow = (props: UseVgsShowProps) => {\n    const { hotel } = useCurrentHotel();\n\n    const [randomId, setRandomId] = useState(btoa((Math.random() * Math.random() * Date.now()).toString()).replace(/\\=/gi, ''));\n    const [isLoading, setIsLoading] = useState(false);\n\n    const targetRef = useRef(null);\n\n    useEffect(() => {\n        if (vgsShowLoader === null) {\n            vgsShowLoader = (async () => {\n                try {\n                    await RoomstayThemeEngine.loadScript('https://js.verygoodvault.com/vgs-show/2.0.2/show.js', 'vgs-show');\n\n                    // TODO: Load this ID dynamically\n                    VGSShow = window.VGSShow.create(hotel.vgsVaultName, (state: any) => {}).setEnvironment('live');\n                } catch (ex) {\n                    console.error('Unable to load vgs-show ' + ex.message);\n                }\n            })();\n        }\n    }, []);\n\n    useEffect(() => {\n        let cancelled = false;\n\n        if (VGSShow && targetRef?.current) {\n            targetRef.current.classList.add(randomId);\n            setIsLoading(true);\n\n            Auth.currentAuthenticatedUser().then((cognitoData) => {\n                const jwtToken = cognitoData.signInUserSession.idToken.jwtToken;\n\n                const revealer = VGSShow.request({\n                    name: props.name,\n                    method: 'POST',\n                    path: '/members/vgs-auth',\n                    payload: {\n                        [props.name]: `${props.value}`,\n                    },\n                    headers: {\n                        Authorization: jwtToken,\n                    },\n                    serializers: [VGSShow.SERIALIZERS.replace('(\\\\d{4})(\\\\d{4})(\\\\d{4})(\\\\d{4})', '$1 $2 $3 $4')],\n                    htmlWrapper: 'text',\n                    jsonPathSelector: `${props.name}`,\n                });\n\n                // TODO: Handle failure on reveal\n                revealer.on('revealSuccess', () => {\n                    setIsLoading(false);\n                });\n\n                revealer.on('revealFail', () => {\n                    setIsLoading(false);\n                });\n\n                targetRef.current.innerHTML = '';\n                revealer.render(`.${randomId}`, props.styles);\n            });\n        }\n\n        return () => {\n            cancelled = true;\n        };\n    }, [VGSShow, targetRef, props.name, props.value]);\n\n    return { targetRef, isLoading };\n};\n\ntype VGSCollectProps = {\n    name: string;\n    type: 'card-expiration-date' | 'text' | 'card-number' | 'card-security-code';\n    label: string;\n\n    vgsProps: {\n        validations?: ('required' | 'validCardNumber' | 'validCardExpirationDate' | 'validCardSecurityCode')[];\n        disabled?: boolean;\n        css: object;\n        placeholder?: string;\n\n        [name: string]: any;\n    };\n};\n\ntype VGSCollectInputState = {\n    name: string;\n    label: string;\n    type: string;\n\n    isFocused: boolean;\n    isValid: boolean;\n\n    vgsInput: any;\n\n    cardType?: ECardType;\n};\n\nexport const useVgsCollect = (fields: VGSCollectProps[]) => {\n    const { hotel } = useCurrentHotel();\n\n    const refs = fields.map(() => {\n        return useRef();\n    });\n\n    const getDefaultStateFromFields: () => VGSCollectInputState[] = () => {\n        return fields.map((field) => {\n            return {\n                isFocused: null,\n                isValid: null,\n\n                name: field.name,\n                label: field.label,\n                type: field.type,\n\n                vgsInput: null,\n            };\n        });\n    };\n\n    const mapInputConfigToVGS = (config: VGSCollectProps) => {\n        return { name: config.name, type: config.type, ...config.vgsProps, disabled: config.vgsProps.disabled || undefined };\n    };\n\n    const getClassesFormInput = (index: number, extendedClasses?: string) => {\n        const field: VGSCollectInputState = inputState[index];\n        const config = fields[index];\n\n        if (!field) return '';\n\n        return classNames('c-input', 'c-input--vgs', extendedClasses, {\n            '--selected': field.isFocused,\n            '--success': field.isValid !== null && field.isValid,\n            '--error': field.isValid !== null && !field.isValid,\n            '--disabled': !!config?.vgsProps?.disabled,\n        });\n    };\n\n    const [vgsLoaded, setVgsLoaded] = useState(false);\n    const [vgsForm, setVgsForm] = useState(null);\n    const [inputState, setInputState] = useState<VGSCollectInputState[]>(getDefaultStateFromFields());\n\n    /** Loading VGS, or seeing if it's been loaded before, and binding onto that. */\n    useEffect(() => {\n        let cancelled = false;\n\n        if (vgsCollectLoader === null) {\n            vgsCollectLoader = (async () => {\n                await RoomstayThemeEngine.loadScript('https://js.verygoodvault.com/vgs-collect/2.18.1/vgs-collect.js', 'vgs-collect');\n\n                if (!cancelled) {\n                    setVgsLoaded(true);\n                }\n            })();\n        } else {\n            vgsCollectLoader.then(() => {\n                if (!cancelled) {\n                    setVgsLoaded(true);\n                }\n            });\n        }\n\n        return () => {\n            cancelled = true;\n        };\n    }, []);\n\n    useEffect(() => {\n        for (const ref of refs) {\n            if (!ref?.current) {\n                // Means we've still to wait for all the refs to bind\n                return;\n            }\n        }\n\n        if (vgsLoaded && !vgsForm) {\n            const form = window.VGSCollect.create(hotel.vgsVaultName, 'live', (state: any) => {\n                setInputState((oldState) => {\n                    const newState = [...oldState];\n\n                    for (const input of newState) {\n                        const vgsState = state[input.name];\n\n                        if (vgsState) {\n                            input.isFocused = vgsState.isFocused;\n                            input.isValid = !vgsState.isEmpty ? vgsState.isValid : null;\n\n                            if (input.type === 'card-number') {\n                                input.cardType = vgsState.cardType;\n                            }\n                        }\n                    }\n\n                    return newState;\n                });\n            });\n\n            setVgsForm(form);\n\n            setInputState((oldState) => {\n                const newState = [...oldState];\n\n                for (let i = 0; i < newState.length; i++) {\n                    const input = newState[i];\n                    const inputConfig = fields[i];\n\n                    input.vgsInput = form.field(refs[i].current, mapInputConfigToVGS(inputConfig));\n                }\n\n                return newState;\n            });\n        }\n    }, [vgsLoaded, vgsForm, refs]);\n\n    const triggerFieldUpdate = () => {\n        for (const ref of refs) {\n            if (!ref?.current) {\n                // Means we've still to wait for all the refs to bind\n                return;\n            }\n        }\n\n        if (!vgsForm) {\n            // Means VGS Collect has not loaded yet.\n            return;\n        }\n\n        for (let i = 0; i < inputState.length; i++) {\n            const input = inputState[i];\n            const inputConfig = fields[i];\n\n            if (input.vgsInput) {\n                input.vgsInput.update?.(mapInputConfigToVGS(inputConfig));\n            }\n        }\n    };\n\n    return {\n        fields: fields.map((item, index) => {\n            return {\n                ref: refs[index],\n                state: inputState[index],\n                getClasses: (extendedClasses?: string) => getClassesFormInput(index, extendedClasses),\n            };\n        }),\n        triggerFieldUpdate,\n        vgsForm,\n    };\n};\n"]}

package/dist/src/hooks/WindowSize.d.ts

@@ -1,4 +1,10 @@
-export declare const useWindowSize: () => {
-    width?: number;
-    height?: number;
+export interface Size {
+    width: number | undefined;
+    height: number | undefined;
+    isMobile: boolean | undefined;
+}
+type UseWindowSizeProps = {
+    debounceTime?: number;
 };
+export declare const useWindowSize: (props?: UseWindowSizeProps) => Size;
+export {};

package/dist/src/hooks/WindowSize.js

@@ -1,17 +1,28 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useWindowSize = void 0;
 const react_1 = require("react");
-const useWindowSize = () => {
+const Debounce_1 = require("util/Debounce");
+const ScreenSize_1 = __importDefault(require("util/ScreenSize"));
+const useWindowSize = (props) => {
+    const { debounceTime = 5 } = props !== null && props !== void 0 ? props : {};
     const [windowSize, setWindowSize] = (0, react_1.useState)({
         width: undefined,
         height: undefined,
+        isMobile: undefined,
     });
+    const setWindowSizeDebounce = (0, react_1.useCallback)((0, Debounce_1.debounce)((value) => {
+        setWindowSize(value);
+    }, debounceTime), []);
     (0, react_1.useEffect)(() => {
         function handleResize() {
-            setWindowSize({
+            setWindowSizeDebounce({
                 width: window.innerWidth,
                 height: window.innerHeight,
+                isMobile: window.innerWidth <= ScreenSize_1.default.Large,
             });
         }
         window.addEventListener('resize', handleResize);

package/dist/src/hooks/WindowSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"WindowSize.js","sourceRoot":"/","sources":["src/hooks/WindowSize.ts"],"names":[],"mappings":";;;AAAA,iCAA4C;AAErC,MAAM,aAAa,GAAG,GAAwC,EAAE;IACnE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAsC;QAC9E,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;KACpB,CAAC,CAAC;IACH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,SAAS,YAAY;YACjB,aAAa,CAAC;gBACV,KAAK,EAAE,MAAM,CAAC,UAAU;gBACxB,MAAM,EAAE,MAAM,CAAC,WAAW;aAC7B,CAAC,CAAC;QACP,CAAC;QACD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAChD,YAAY,EAAE,CAAC;QACf,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IACpE,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,UAAU,CAAC;AACtB,CAAC,CAAC;AAjBW,QAAA,aAAa,iBAiBxB","sourcesContent":["import { useEffect, useState } from 'react';\n\nexport const useWindowSize = (): { width?: number; height?: number } => {\n    const [windowSize, setWindowSize] = useState<{ width?: number; height?: number }>({\n        width: undefined,\n        height: undefined,\n    });\n    useEffect(() => {\n        function handleResize() {\n            setWindowSize({\n                width: window.innerWidth,\n                height: window.innerHeight,\n            });\n        }\n        window.addEventListener('resize', handleResize);\n        handleResize();\n        return () => window.removeEventListener('resize', handleResize);\n    }, []);\n    return windowSize;\n};\n"]}
+{"version":3,"file":"WindowSize.js","sourceRoot":"/","sources":["src/hooks/WindowSize.ts"],"names":[],"mappings":";;;;;;AAAA,iCAAyD;AACzD,4CAAyC;AACzC,iEAAyC;AAWlC,MAAM,aAAa,GAAG,CAAC,KAA0B,EAAQ,EAAE;IAC9D,MAAM,EAAE,YAAY,GAAG,CAAC,EAAE,GAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC;IAEzC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAO;QAC/C,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,SAAS;KACtB,CAAC,CAAC;IAEH,MAAM,qBAAqB,GAAG,IAAA,mBAAW,EACrC,IAAA,mBAAQ,EAAC,CAAC,KAAK,EAAE,EAAE;QACf,aAAa,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,EAAE,YAAY,CAAC,EAChB,EAAE,CACL,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,SAAS,YAAY;YACjB,qBAAqB,CAAC;gBAClB,KAAK,EAAE,MAAM,CAAC,UAAU;gBACxB,MAAM,EAAE,MAAM,CAAC,WAAW;gBAC1B,QAAQ,EAAE,MAAM,CAAC,UAAU,IAAI,oBAAU,CAAC,KAAK;aAClD,CAAC,CAAC;QACP,CAAC;QAED,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAChD,YAAY,EAAE,CAAC;QAEf,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IACpE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,UAAU,CAAC;AACtB,CAAC,CAAC;AAhCW,QAAA,aAAa,iBAgCxB","sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { debounce } from 'util/Debounce';\nimport ScreenSize from 'util/ScreenSize';\n\nexport interface Size {\n    width: number | undefined;\n    height: number | undefined;\n    isMobile: boolean | undefined;\n}\n\ntype UseWindowSizeProps = {\n    debounceTime?: number;\n};\nexport const useWindowSize = (props?: UseWindowSizeProps): Size => {\n    const { debounceTime = 5 } = props ?? {};\n\n    const [windowSize, setWindowSize] = useState<Size>({\n        width: undefined,\n        height: undefined,\n        isMobile: undefined,\n    });\n\n    const setWindowSizeDebounce = useCallback(\n        debounce((value) => {\n            setWindowSize(value);\n        }, debounceTime),\n        []\n    );\n\n    useEffect(() => {\n        function handleResize() {\n            setWindowSizeDebounce({\n                width: window.innerWidth,\n                height: window.innerHeight,\n                isMobile: window.innerWidth <= ScreenSize.Large,\n            });\n        }\n\n        window.addEventListener('resize', handleResize);\n        handleResize();\n\n        return () => window.removeEventListener('resize', handleResize);\n    }, []);\n\n    return windowSize;\n};\n"]}

package/dist/src/icons/Check.js

@@ -1,6 +1,29 @@
 "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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
+const React = __importStar(require("react"));
 const Color_1 = require("util/Color");
 const Check = (props) => {
     return (React.createElement("div", { className: props.className },

package/dist/src/icons/Check.js.map

@@ -1 +1 @@
-{"version":3,"file":"Check.js","sourceRoot":"/","sources":["src/icons/Check.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,sCAAmC;AAMnC,MAAM,KAAK,GAAG,CAAC,KAAY,EAAE,EAAE;IAC3B,OAAO,CACH,6BAAK,SAAS,EAAE,KAAK,CAAC,SAAS;QAC3B,6BAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;YAC1F,8BAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAE,aAAK,CAAC,MAAM,GAAI;YAC3D,8BAAM,CAAC,EAAC,uGAAuG,EAAC,IAAI,EAAC,OAAO,GAAG,CAC7H,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,KAAK,CAAC","sourcesContent":["import * as React from 'react';\nimport { Color } from 'util/Color';\n\ninterface Props {\n    className?: string;\n}\n\nconst Check = (props: Props) => {\n    return (\n        <div className={props.className}>\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect width=\"24\" height=\"24\" rx=\"12\" fill={Color.Accent} />\n                <path d=\"M7.33333 12L10.6667 15.3333L16.6667 9.33332L15.7267 8.38666L10.6667 13.4467L8.27333 11.06L7.33333 12Z\" fill=\"white\" />\n            </svg>\n        </div>\n    );\n};\n\nexport default Check;\n"]}
+{"version":3,"file":"Check.js","sourceRoot":"/","sources":["src/icons/Check.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,sCAAmC;AAMnC,MAAM,KAAK,GAAG,CAAC,KAAY,EAAE,EAAE;IAC3B,OAAO,CACH,6BAAK,SAAS,EAAE,KAAK,CAAC,SAAS;QAC3B,6BAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;YAC1F,8BAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAE,aAAK,CAAC,MAAM,GAAI;YAC3D,8BAAM,CAAC,EAAC,uGAAuG,EAAC,IAAI,EAAC,OAAO,GAAG,CAC7H,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,KAAK,CAAC","sourcesContent":["import * as React from 'react';\nimport { Color } from 'util/Color';\n\ninterface Props {\n    className?: string;\n}\n\nconst Check = (props: Props) => {\n    return (\n        <div className={props.className}>\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect width=\"24\" height=\"24\" rx=\"12\" fill={Color.Accent} />\n                <path d=\"M7.33333 12L10.6667 15.3333L16.6667 9.33332L15.7267 8.38666L10.6667 13.4467L8.27333 11.06L7.33333 12Z\" fill=\"white\" />\n            </svg>\n        </div>\n    );\n};\n\nexport default Check;\n"]}

package/dist/src/index.d.ts

@@ -5,6 +5,7 @@ export { Link } from 'react-router-dom';
 export * from 'engines/FullPageBookingEngine/FullPageBookingEngine';
 export * from 'engines/InlineRoomMiniEngine/InlineRoomMiniEngine';
 export * from 'engines/RecentSearchesEngine/RecentSearchesEngine';
+export * from 'engines/BookingWizardEngine/BookingWizardEngine';
 export * from 'engines/CustomEngine/CustomEngine';
 export { default as Icon } from 'components/generic/Icon/Icon';
 export * from 'components/generic/Icon/Icon';