@roomstay/frontend 2.1.0 → 2.1.2

package/dist/src/components/generic/PaymentCard/PaymentCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentCard.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/PaymentCard.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,wFAA+C;AAC/C,wFAAgE;AAChE,6CAA4C;AAE5C,0EAAkD;AAClD,8DAA8D;AAOvD,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAE,EAAE;IACtD,MAAM,WAAW,GAAG;QAChB,YAAY,EAAE;YACV,GAAG,EAAE,OAAO,6BAAmB,CAAC,YAAY,CAAC,mCAAmC,CAAC,GAAG;YACpF,aAAa,EAAE,MAAM;YACrB,cAAc,EAAE,MAAM;YACtB,aAAa,EAAE,OAAO;SACzB;QACD,WAAW,EAAE,MAAM;QACnB,aAAa,EAAE,MAAM;QACrB,aAAa,EAAE,MAAM;QACrB,aAAa,EAAE,OAAO;QACtB,KAAK,EAAE,OAAO;KACjB,CAAC;IAEF,MAAM,EAAE,SAAS,EAAE,uBAAuB,EAAE,SAAS,EAAE,mBAAmB,EAAE,GAAG,IAAA,qBAAU,EAAC;QACtF,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,IAAI,CAAC,UAAU;QACtB,MAAM,kCAAO,WAAW,KAAE,cAAc,EAAE,MAAM,GAAE;KACrD,CAAC,CAAC;IAEH,MAAM,EAAE,SAAS,EAAE,2BAA2B,EAAE,SAAS,EAAE,uBAAuB,EAAE,GAAG,IAAA,qBAAU,EAAC;QAC9F,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,IAAI,CAAC,IAAI;QAChB,MAAM,EAAE,WAAW;KACtB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,IAAA,wCAAoB,EAAC,IAAI,CAAC,IAAiB,CAAC,CAAC;IAEjE,OAAO,CACH,6BAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;QACvB,6BAAK,SAAS,EAAC,SAAS,EAAC,GAAG,EAAE,WAAW,CAAC,aAAa,EAAE,GAAG,EAAC,+BAA+B,GAAG;QAC/F,6BAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,6BAAK,GAAG,EAAE,6BAAmB,CAAC,gBAAgB,EAAE,GAAG,UAAU,EAAE,GAAG,EAAC,MAAM,GAAG,CAC1E;QACN,6BAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,6BAAK,GAAG,EAAE,WAAW,CAAC,eAAe,EAAE,GAAG,EAAE,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAI,CAC9E;QAEN,6BAAK,SAAS,EAAE,iCAAM,CAAC,MAAM;YACxB,mBAAmB,IAAI,oBAAC,sBAAY,OAAG;YACxC,8BAAM,GAAG,EAAE,uBAAuB,GAAS,CACzC;QACN,6BAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,6BAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,uBAAwB;YACpD,6BAAK,SAAS,EAAE,iCAAM,CAAC,cAAc;gBAChC,uBAAuB,IAAI,oBAAC,sBAAY,OAAG;gBAC5C,8BAAM,GAAG,EAAE,2BAA2B,GAAS,CAC7C,CACJ;QACN,6BAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,6BAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,kBAAmB;YAC9C,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,IAAG,IAAI,CAAC,MAAM,CAAO,CAAC,CAAC,CAAC,4BAAI,SAAS,EAAE,iCAAM,CAAC,KAAK,GAAI,CAChG,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAxDW,QAAA,WAAW,eAwDtB","sourcesContent":["import * as React from 'react';\nimport styles from './PaymentCard.module.scss';\nimport RoomstayThemeEngine from 'providers/RoomstayThemeEngine';\nimport { useVgsShow } from 'hooks/VGSHooks';\nimport { IRoomstayMemberCardFormInput } from 'models/RoomstayMembers/IRoomstayMemberCard';\nimport SmallSpinner from '../loader/SmallSpinner';\nimport { mapCardTypeToGraphic } from 'util/PaymentCardHelper';\nimport { ECardType } from 'models/PaymentCard';\n\nexport interface PaymentCardProps {\n    card: IRoomstayMemberCardFormInput;\n}\n\nexport const PaymentCard = ({ card }: PaymentCardProps) => {\n    const labelStyles = {\n        '@font-face': {\n            src: `url(${RoomstayThemeEngine.wrapAssetUrl('assets/fonts/cadiz/Cadiz-Bold.otf')})`,\n            'font-weight': 'bold',\n            'font-display': 'swap',\n            'font-family': 'Cadiz',\n        },\n        'font-size': '18px',\n        'line-height': '24px',\n        'font-weight': 'bold',\n        'font-family': 'Cadiz',\n        color: 'white',\n    };\n\n    const { targetRef: cardNumberTargetElement, isLoading: isCardNumberLoading } = useVgsShow({\n        name: 'credit-card',\n        value: card.cardNumber,\n        styles: { ...labelStyles, 'word-spacing': '16px' },\n    });\n\n    const { targetRef: cardholderNameTargetElement, isLoading: isCardholderNameLoading } = useVgsShow({\n        name: 'card-name',\n        value: card.name,\n        styles: labelStyles,\n    });\n\n    const cardGraphic = mapCardTypeToGraphic(card.type as ECardType);\n\n    return (\n        <div className={styles.card}>\n            <img className=\"u-w-100\" src={cardGraphic.backgroundUrl} alt=\"Payment card background color\" />\n            <div className={styles.chip}>\n                <img src={RoomstayThemeEngine.getImageAssetUrl() + 'chip.svg'} alt=\"Chip\" />\n            </div>\n            <div className={styles.type}>\n                <img src={cardGraphic.cardNameIconUrl} alt={`Payment card type ${card.type}`} />\n            </div>\n\n            <div className={styles.number}>\n                {isCardNumberLoading && <SmallSpinner />}\n                <span ref={cardNumberTargetElement}></span>\n            </div>\n            <div className={styles.name}>\n                <div className={styles.label}>Card Holder Name</div>\n                <div className={styles.cardholderName}>\n                    {isCardholderNameLoading && <SmallSpinner />}\n                    <span ref={cardholderNameTargetElement}></span>\n                </div>\n            </div>\n            <div className={styles.date}>\n                <div className={styles.label}>Expiry Date</div>\n                {card.expiry ? <div className={styles.value}>{card.expiry}</div> : <br className={styles.value} />}\n            </div>\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"PaymentCard.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/PaymentCard.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,wFAA+C;AAC/C,0FAAkE;AAClE,+CAA8C;AAE9C,0EAAkD;AAClD,gEAAgE;AAOzD,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAE,EAAE;IACtD,MAAM,WAAW,GAAG;QAChB,YAAY,EAAE;YACV,GAAG,EAAE,OAAO,6BAAmB,CAAC,YAAY,CAAC,mCAAmC,CAAC,GAAG;YACpF,aAAa,EAAE,MAAM;YACrB,cAAc,EAAE,MAAM;YACtB,aAAa,EAAE,OAAO;SACzB;QACD,WAAW,EAAE,MAAM;QACnB,aAAa,EAAE,MAAM;QACrB,aAAa,EAAE,MAAM;QACrB,aAAa,EAAE,OAAO;QACtB,KAAK,EAAE,OAAO;KACjB,CAAC;IAEF,MAAM,EAAE,SAAS,EAAE,uBAAuB,EAAE,SAAS,EAAE,mBAAmB,EAAE,GAAG,IAAA,qBAAU,EAAC;QACtF,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,IAAI,CAAC,UAAU;QACtB,MAAM,kCAAO,WAAW,KAAE,cAAc,EAAE,MAAM,GAAE;KACrD,CAAC,CAAC;IAEH,MAAM,EAAE,SAAS,EAAE,2BAA2B,EAAE,SAAS,EAAE,uBAAuB,EAAE,GAAG,IAAA,qBAAU,EAAC;QAC9F,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,IAAI,CAAC,IAAI;QAChB,MAAM,EAAE,WAAW;KACtB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,IAAA,wCAAoB,EAAC,IAAI,CAAC,IAAiB,CAAC,CAAC;IAEjE,OAAO,CACH,6BAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;QACvB,6BAAK,SAAS,EAAC,SAAS,EAAC,GAAG,EAAE,WAAW,CAAC,aAAa,EAAE,GAAG,EAAC,+BAA+B,GAAG;QAC/F,6BAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,6BAAK,GAAG,EAAE,6BAAmB,CAAC,gBAAgB,EAAE,GAAG,UAAU,EAAE,GAAG,EAAC,MAAM,GAAG,CAC1E;QACN,6BAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,6BAAK,GAAG,EAAE,WAAW,CAAC,eAAe,EAAE,GAAG,EAAE,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAI,CAC9E;QAEN,6BAAK,SAAS,EAAE,iCAAM,CAAC,MAAM;YACxB,mBAAmB,IAAI,oBAAC,sBAAY,OAAG;YACxC,8BAAM,GAAG,EAAE,uBAAuB,GAAS,CACzC;QACN,6BAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,6BAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,uBAAwB;YACpD,6BAAK,SAAS,EAAE,iCAAM,CAAC,cAAc;gBAChC,uBAAuB,IAAI,oBAAC,sBAAY,OAAG;gBAC5C,8BAAM,GAAG,EAAE,2BAA2B,GAAS,CAC7C,CACJ;QACN,6BAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,6BAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,kBAAmB;YAC9C,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,IAAG,IAAI,CAAC,MAAM,CAAO,CAAC,CAAC,CAAC,4BAAI,SAAS,EAAE,iCAAM,CAAC,KAAK,GAAI,CAChG,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAxDW,QAAA,WAAW,eAwDtB","sourcesContent":["import * as React from 'react';\nimport styles from './PaymentCard.module.scss';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\nimport { useVgsShow } from '@/hooks/VGSHooks';\nimport { IRoomstayMemberCardFormInput } from '@/models/RoomstayMembers/IRoomstayMemberCard';\nimport SmallSpinner from '../loader/SmallSpinner';\nimport { mapCardTypeToGraphic } from '@/util/PaymentCardHelper';\nimport { ECardType } from '@/models/PaymentCard';\n\nexport interface PaymentCardProps {\n    card: IRoomstayMemberCardFormInput;\n}\n\nexport const PaymentCard = ({ card }: PaymentCardProps) => {\n    const labelStyles = {\n        '@font-face': {\n            src: `url(${RoomstayThemeEngine.wrapAssetUrl('assets/fonts/cadiz/Cadiz-Bold.otf')})`,\n            'font-weight': 'bold',\n            'font-display': 'swap',\n            'font-family': 'Cadiz',\n        },\n        'font-size': '18px',\n        'line-height': '24px',\n        'font-weight': 'bold',\n        'font-family': 'Cadiz',\n        color: 'white',\n    };\n\n    const { targetRef: cardNumberTargetElement, isLoading: isCardNumberLoading } = useVgsShow({\n        name: 'credit-card',\n        value: card.cardNumber,\n        styles: { ...labelStyles, 'word-spacing': '16px' },\n    });\n\n    const { targetRef: cardholderNameTargetElement, isLoading: isCardholderNameLoading } = useVgsShow({\n        name: 'card-name',\n        value: card.name,\n        styles: labelStyles,\n    });\n\n    const cardGraphic = mapCardTypeToGraphic(card.type as ECardType);\n\n    return (\n        <div className={styles.card}>\n            <img className=\"u-w-100\" src={cardGraphic.backgroundUrl} alt=\"Payment card background color\" />\n            <div className={styles.chip}>\n                <img src={RoomstayThemeEngine.getImageAssetUrl() + 'chip.svg'} alt=\"Chip\" />\n            </div>\n            <div className={styles.type}>\n                <img src={cardGraphic.cardNameIconUrl} alt={`Payment card type ${card.type}`} />\n            </div>\n\n            <div className={styles.number}>\n                {isCardNumberLoading && <SmallSpinner />}\n                <span ref={cardNumberTargetElement}></span>\n            </div>\n            <div className={styles.name}>\n                <div className={styles.label}>Card Holder Name</div>\n                <div className={styles.cardholderName}>\n                    {isCardholderNameLoading && <SmallSpinner />}\n                    <span ref={cardholderNameTargetElement}></span>\n                </div>\n            </div>\n            <div className={styles.date}>\n                <div className={styles.label}>Expiry Date</div>\n                {card.expiry ? <div className={styles.value}>{card.expiry}</div> : <br className={styles.value} />}\n            </div>\n        </div>\n    );\n};\n"]}

package/dist/src/components/generic/PaymentCard/PaymentCardInput.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { IRoomstayMemberCards } from '@roomstay/core';
-import { IRoomstayMemberCardFormInput } from 'models/RoomstayMembers/IRoomstayMemberCard';
+import { IRoomstayMemberCardFormInput } from '../../../../models/RoomstayMembers/IRoomstayMemberCard';
 export interface PaymentCardInputProps {
     card: IRoomstayMemberCardFormInput;
     onSubmit?: (card: IRoomstayMemberCards) => Promise<void>;

package/dist/src/components/generic/PaymentCard/PaymentCardInput.js

@@ -39,18 +39,18 @@ exports.PaymentCardInput = void 0;
 const React = __importStar(require("react"));
 const react_1 = require("react");
 const PaymentCardInput_module_scss_1 = __importDefault(require("./PaymentCardInput.module.scss"));
-const Text_1 = __importStar(require("components/generic/Text"));
-const Color_1 = require("util/Color");
-const InputGroup_1 = __importDefault(require("components/generic/InputGroup/InputGroup"));
-const PaymentCard_1 = require("components/generic/PaymentCard/PaymentCard");
-const CardTypeSelect_1 = require("components/generic/PaymentCard/CardTypeSelect");
+const Text_1 = __importStar(require("../../../../components/generic/Text"));
+const Color_1 = require("../../../../util/Color");
+const InputGroup_1 = __importDefault(require("../../../../components/generic/InputGroup/InputGroup"));
+const PaymentCard_1 = require("../../../../components/generic/PaymentCard/PaymentCard");
+const CardTypeSelect_1 = require("../../../../components/generic/PaymentCard/CardTypeSelect");
 const BEButton_1 = __importDefault(require("../BEButton"));
 const AutoAutoHeight_1 = __importDefault(require("animations/AutoAutoHeight"));
-const Alert_1 = __importStar(require("components/generic/Alert"));
-const Icon_1 = require("components/generic/Icon/Icon");
+const Alert_1 = __importStar(require("../../../../components/generic/Alert"));
+const Icon_1 = require("../../../../components/generic/Icon/Icon");
 const auth_1 = require("@aws-amplify/auth");
-const VGSHooks_1 = require("hooks/VGSHooks");
-const LoggedInUserHook_1 = require("hooks/LoggedInUserHook");
+const VGSHooks_1 = require("../../../../hooks/VGSHooks");
+const LoggedInUserHook_1 = require("../../../../hooks/LoggedInUserHook");
 const Fade_1 = __importDefault(require("../../../animations/Fade"));
 const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultClicked }) => {
     const { user, fullName } = (0, LoggedInUserHook_1.useMember)();

package/dist/src/components/generic/PaymentCard/PaymentCardInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentCardInput.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/PaymentCardInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { FC, useEffect, useState } from 'react';\nimport styles from './PaymentCardInput.module.scss';\nimport Text, { TextType } from 'components/generic/Text';\nimport { Color } from 'util/Color';\nimport InputGroup from 'components/generic/InputGroup/InputGroup';\nimport { ECardType } from 'models/PaymentCard';\nimport { PaymentCard as GenericPaymentCard } from 'components/generic/PaymentCard/PaymentCard';\nimport { CardTypeSelect } from 'components/generic/PaymentCard/CardTypeSelect';\n\nimport BEButton from '../BEButton';\n\nimport AutoAutoHeight from 'animations/AutoAutoHeight';\nimport Alert, { AlertType } from 'components/generic/Alert';\nimport { IconType } from 'components/generic/Icon/Icon';\nimport { IRoomstayMemberCards } from '@roomstay/core';\nimport { Auth } from '@aws-amplify/auth';\nimport { useVgsCollect } from 'hooks/VGSHooks';\nimport { useMember } from 'hooks/LoggedInUserHook';\nimport FadeAnimation from '../../../animations/Fade';\nimport { IRoomstayMemberCardFormInput } from 'models/RoomstayMembers/IRoomstayMemberCard';\n\nexport interface PaymentCardInputProps {\n    card: IRoomstayMemberCardFormInput;\n    onSubmit?: (card: IRoomstayMemberCards) => Promise<void>;\n    onDeleteClicked: (card: IRoomstayMemberCards) => Promise<void>;\n    onMarkedAsDefaultClicked: (card: IRoomstayMemberCards) => Promise<void>;\n}\n\nexport const PaymentCardInput: FC<PaymentCardInputProps> = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultClicked }) => {\n    const { user, fullName } = useMember();\n\n    const [errors, setErrors] = useState<{ [x: string]: string }>({});\n    const [cardType, setCardType] = useState<ECardType>(null);\n\n    const [isSavingVGSDetails, setIsSavingVGSDetails] = useState(false);\n    const [isDeletingCard, setIsDeletingCard] = useState(false);\n    const [isMarkingAsDefault, setIsMarkingAsDefault] = useState(false);\n\n    const isCardDefault = user?.defaultCard === card?.cardId;\n\n    const inputsDisabled = !!card?.cardId;\n\n    const css = {\n        fontSize: '13px',\n        lineHeight: '18px',\n        '&::placeholder': {\n            color: '#8B8F9A',\n            opacity: 1,\n        },\n    };\n\n    const {\n        fields: [cardNumber, cardHolder, expiryDate, securityCode],\n        triggerFieldUpdate,\n        vgsForm,\n    } = useVgsCollect([\n        {\n            name: 'credit-card',\n            label: 'Credit Card',\n            type: 'card-number',\n            vgsProps: {\n                validations: ['required', 'validCardNumber'],\n                css,\n                autoComplete: ['cc-number'],\n                successColor: '#4F8A10',\n                errorColor: '#D8000C',\n                showCardIcon: false,\n                placeholder: '5913 2207 9578 4291',\n                disabled: inputsDisabled,\n            },\n        },\n        { name: 'card-name', label: 'Card Name', type: 'text', vgsProps: { validations: ['required'], css, disabled: inputsDisabled, placeholder: fullName } },\n        {\n            name: 'expiration-date',\n            label: 'Expiration Date',\n            type: 'card-expiration-date',\n            vgsProps: { validations: ['required', 'validCardExpirationDate'], css, disabled: inputsDisabled, placeholder: '12/27' },\n        },\n        {\n            name: 'security-code',\n            label: 'Security Code',\n            type: 'card-security-code',\n            vgsProps: { validations: ['required', 'validCardSecurityCode'], css, disabled: inputsDisabled, placeholder: '552' },\n        },\n    ]);\n\n    useEffect(() => {\n        triggerFieldUpdate();\n    }, [card]);\n\n    useEffect(() => {\n        if (cardNumber?.state.cardType) {\n            setCardType(cardNumber.state.cardType);\n        }\n    }, [cardNumber]);\n\n    const inputNames = ['credit-card', 'card-name', 'expiration-date', 'security-code'];\n    const setErrorsOnFaults = (faults: any) => {\n        const newErrors: { [x: string]: string } = {};\n\n        Object.keys(faults).forEach((input) => {\n            let name = '';\n\n            switch (input) {\n                case 'credit-card':\n                    name = 'Credit Card';\n                    break;\n                case 'expiration-date':\n                    name = 'Expiration Date';\n                    break;\n                case 'security-code':\n                    name = 'Security Code';\n                    break;\n                default:\n                    name = 'Card Name';\n                    break;\n            }\n\n            newErrors[input] = name + ' ' + faults[input].errorMessages[faults[input].errorMessages.length - 1];\n        });\n\n        setErrors(newErrors);\n    };\n\n    const onChangeSubmit = (): void => {\n        if (vgsForm) {\n            setIsSavingVGSDetails(true);\n            Auth.currentAuthenticatedUser().then((cognitoData) => {\n                const jwtToken = cognitoData.signInUserSession.idToken.jwtToken;\n\n                vgsForm.submit(\n                    '/members/vgs-hide',\n                    {\n                        serializer: 'deep',\n                        methods: 'POST',\n                        headers: {\n                            Authorization: jwtToken,\n                        },\n                    },\n                    async (status: any, cardData: any) => {\n                        const expMatch = cardData['expiration-date'].match(/^(\\d+)\\s*\\/\\s*(\\d+)$/);\n                        if (!expMatch || expMatch[1].length > 2 || (expMatch[2].length !== 4 && expMatch[2].length !== 2)) {\n                            setErrorsOnFaults({\n                                'expiration-date': {\n                                    errorMessages: ['Invalid - it must be in the format MM / YY or MM / YYYY'],\n                                },\n                            });\n                            return;\n                        }\n\n                        console.log(cardData);\n\n                        const expiration = (expMatch[1].length === 1 ? '0' : '') + expMatch[1] + (expMatch[2].length === 2 ? expMatch[2] : expMatch[2].substr(2));\n                        const newCard: IRoomstayMemberCards = {\n                            username: card.username,\n                            cardId: card.cardId,\n                            securityCode: cardData['security-code'],\n                            expiry: expiration,\n                            name: cardData['card-name'],\n\n                            cardNumber: cardData['credit-card'],\n                            type: cardType,\n                        };\n\n                        await onSubmit(newCard);\n                        vgsForm.reset();\n                        setIsSavingVGSDetails(false);\n                    },\n                    (error: any) => {\n                        setErrorsOnFaults(error);\n                        setIsSavingVGSDetails(false);\n                    }\n                );\n            });\n        } else {\n            console.error('VGS not on element, problem has occurred');\n        }\n    };\n\n    const onDeleteCardClicked = () => {\n        setIsDeletingCard(true);\n\n        onDeleteClicked?.(card).finally(() => {\n            setIsDeletingCard(false);\n        });\n    };\n\n    const onMarkAsDefault = () => {\n        setIsMarkingAsDefault(true);\n\n        onMarkedAsDefaultClicked?.(card).finally(() => {\n            setIsMarkingAsDefault(false);\n        });\n    };\n\n    return (\n        <>\n            <div className={styles['card-inputs']}>\n                <div className=\"u-marg-bottom--medium u-marg-top--heavy@l-\">\n                    <CardTypeSelect value={cardType} />\n                </div>\n                <div className=\"u-margin-bottom\">\n                    {inputNames.map((name) => {\n                        const errorMessage = errors[name];\n                        return (\n                            <AutoAutoHeight open={!!errorMessage} key={name}>\n                                <div className=\"u-flex\">\n                                    <Alert type={AlertType.Danger} icon={IconType.Error}>\n                                        <Text type={TextType.Small}>{errorMessage}</Text>\n                                    </Alert>\n                                </div>\n                            </AutoAutoHeight>\n                        );\n                    })}\n                </div>\n                <div className=\"u-marg-bottom\">\n                    <div className=\"u-marg-bottom--light\">\n                        <Text type={TextType.Label} color={Color.Navy} bold>\n                            Card Number\n                        </Text>\n                    </div>\n                    <div className={cardNumber.getClasses()} ref={cardNumber.ref} />\n                </div>\n                <div className=\"u-marg-bottom\">\n                    <InputGroup dimensions=\"2/2\">\n                        <>\n                            <div className=\"u-marg-bottom--light\">\n                                <Text type={TextType.Label} color={Color.Navy} bold>\n                                    Expiry Month / Year\n                                </Text>\n                            </div>\n                            <div className={expiryDate.getClasses()} ref={expiryDate.ref} />\n                        </>\n                        <>\n                            <div className=\"u-marg-bottom--light\">\n                                <Text type={TextType.Label} color={Color.Navy} bold>\n                                    Security code\n                                </Text>\n                            </div>\n                            <div className={securityCode.getClasses()} ref={securityCode.ref} />\n                        </>\n                    </InputGroup>\n                </div>\n                <div className=\"u-marg-bottom\">\n                    <div className=\"u-marg-bottom--light\">\n                        <Text type={TextType.Label} color={Color.Navy} bold>\n                            Name on Credit Card\n                        </Text>\n                    </div>\n                    <div className={cardHolder.getClasses()} ref={cardHolder.ref} />\n                </div>\n                <div className=\"u-marg-bottom\">\n                    {card?.cardId ? (\n                        <BEButton\n                            className=\"u-marg-top--heavier@l u-marg-top--heavy@l- u-flex u-flex-justify-center\"\n                            isLoading={isDeletingCard}\n                            textColor={Color.Danger}\n                            isText={true}\n                            icon={IconType.Delete}\n                            onClick={onDeleteCardClicked}\n                            stopIconAnimation={true}\n                        >\n                            Delete Card\n                        </BEButton>\n                    ) : (\n                        <BEButton\n                            className=\"u-marg-top--heavier@l u-marg-top--heavy@l- u-flex u-flex-justify-center\"\n                            isLoading={isSavingVGSDetails}\n                            rounded={true}\n                            primary={true}\n                            filled={true}\n                            mobileWidth={true}\n                            onClick={onChangeSubmit}\n                        >\n                            Save Card\n                        </BEButton>\n                    )}\n                </div>\n            </div>\n            <FadeAnimation open={!!card?.cardId}>\n                <div className={styles['card-large']}>\n                    <GenericPaymentCard card={card} />\n                    <div className=\"u-marg-top u-marg-top--heavy@l-\">\n                        <BEButton onClick={onMarkAsDefault} isLoading={isMarkingAsDefault} disabled={isCardDefault} filled={true} primary={true} size={'small'}>\n                            Mark as Default\n                        </BEButton>\n                    </div>\n                </div>\n            </FadeAnimation>\n        </>\n    );\n};\n"]}
+{"version":3,"file":"PaymentCardInput.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/PaymentCardInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { FC, useEffect, useState } from 'react';\nimport styles from './PaymentCardInput.module.scss';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { Color } from '@/util/Color';\nimport InputGroup from '@/components/generic/InputGroup/InputGroup';\nimport { ECardType } from '@/models/PaymentCard';\nimport { PaymentCard as GenericPaymentCard } from '@/components/generic/PaymentCard/PaymentCard';\nimport { CardTypeSelect } from '@/components/generic/PaymentCard/CardTypeSelect';\n\nimport BEButton from '../BEButton';\n\nimport AutoAutoHeight from 'animations/AutoAutoHeight';\nimport Alert, { AlertType } from '@/components/generic/Alert';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport { IRoomstayMemberCards } from '@roomstay/core';\nimport { Auth } from '@aws-amplify/auth';\nimport { useVgsCollect } from '@/hooks/VGSHooks';\nimport { useMember } from '@/hooks/LoggedInUserHook';\nimport FadeAnimation from '../../../animations/Fade';\nimport { IRoomstayMemberCardFormInput } from '@/models/RoomstayMembers/IRoomstayMemberCard';\n\nexport interface PaymentCardInputProps {\n    card: IRoomstayMemberCardFormInput;\n    onSubmit?: (card: IRoomstayMemberCards) => Promise<void>;\n    onDeleteClicked: (card: IRoomstayMemberCards) => Promise<void>;\n    onMarkedAsDefaultClicked: (card: IRoomstayMemberCards) => Promise<void>;\n}\n\nexport const PaymentCardInput: FC<PaymentCardInputProps> = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultClicked }) => {\n    const { user, fullName } = useMember();\n\n    const [errors, setErrors] = useState<{ [x: string]: string }>({});\n    const [cardType, setCardType] = useState<ECardType>(null);\n\n    const [isSavingVGSDetails, setIsSavingVGSDetails] = useState(false);\n    const [isDeletingCard, setIsDeletingCard] = useState(false);\n    const [isMarkingAsDefault, setIsMarkingAsDefault] = useState(false);\n\n    const isCardDefault = user?.defaultCard === card?.cardId;\n\n    const inputsDisabled = !!card?.cardId;\n\n    const css = {\n        fontSize: '13px',\n        lineHeight: '18px',\n        '&::placeholder': {\n            color: '#8B8F9A',\n            opacity: 1,\n        },\n    };\n\n    const {\n        fields: [cardNumber, cardHolder, expiryDate, securityCode],\n        triggerFieldUpdate,\n        vgsForm,\n    } = useVgsCollect([\n        {\n            name: 'credit-card',\n            label: 'Credit Card',\n            type: 'card-number',\n            vgsProps: {\n                validations: ['required', 'validCardNumber'],\n                css,\n                autoComplete: ['cc-number'],\n                successColor: '#4F8A10',\n                errorColor: '#D8000C',\n                showCardIcon: false,\n                placeholder: '5913 2207 9578 4291',\n                disabled: inputsDisabled,\n            },\n        },\n        { name: 'card-name', label: 'Card Name', type: 'text', vgsProps: { validations: ['required'], css, disabled: inputsDisabled, placeholder: fullName } },\n        {\n            name: 'expiration-date',\n            label: 'Expiration Date',\n            type: 'card-expiration-date',\n            vgsProps: { validations: ['required', 'validCardExpirationDate'], css, disabled: inputsDisabled, placeholder: '12/27' },\n        },\n        {\n            name: 'security-code',\n            label: 'Security Code',\n            type: 'card-security-code',\n            vgsProps: { validations: ['required', 'validCardSecurityCode'], css, disabled: inputsDisabled, placeholder: '552' },\n        },\n    ]);\n\n    useEffect(() => {\n        triggerFieldUpdate();\n    }, [card]);\n\n    useEffect(() => {\n        if (cardNumber?.state.cardType) {\n            setCardType(cardNumber.state.cardType);\n        }\n    }, [cardNumber]);\n\n    const inputNames = ['credit-card', 'card-name', 'expiration-date', 'security-code'];\n    const setErrorsOnFaults = (faults: any) => {\n        const newErrors: { [x: string]: string } = {};\n\n        Object.keys(faults).forEach((input) => {\n            let name = '';\n\n            switch (input) {\n                case 'credit-card':\n                    name = 'Credit Card';\n                    break;\n                case 'expiration-date':\n                    name = 'Expiration Date';\n                    break;\n                case 'security-code':\n                    name = 'Security Code';\n                    break;\n                default:\n                    name = 'Card Name';\n                    break;\n            }\n\n            newErrors[input] = name + ' ' + faults[input].errorMessages[faults[input].errorMessages.length - 1];\n        });\n\n        setErrors(newErrors);\n    };\n\n    const onChangeSubmit = (): void => {\n        if (vgsForm) {\n            setIsSavingVGSDetails(true);\n            Auth.currentAuthenticatedUser().then((cognitoData) => {\n                const jwtToken = cognitoData.signInUserSession.idToken.jwtToken;\n\n                vgsForm.submit(\n                    '/members/vgs-hide',\n                    {\n                        serializer: 'deep',\n                        methods: 'POST',\n                        headers: {\n                            Authorization: jwtToken,\n                        },\n                    },\n                    async (status: any, cardData: any) => {\n                        const expMatch = cardData['expiration-date'].match(/^(\\d+)\\s*\\/\\s*(\\d+)$/);\n                        if (!expMatch || expMatch[1].length > 2 || (expMatch[2].length !== 4 && expMatch[2].length !== 2)) {\n                            setErrorsOnFaults({\n                                'expiration-date': {\n                                    errorMessages: ['Invalid - it must be in the format MM / YY or MM / YYYY'],\n                                },\n                            });\n                            return;\n                        }\n\n                        console.log(cardData);\n\n                        const expiration = (expMatch[1].length === 1 ? '0' : '') + expMatch[1] + (expMatch[2].length === 2 ? expMatch[2] : expMatch[2].substr(2));\n                        const newCard: IRoomstayMemberCards = {\n                            username: card.username,\n                            cardId: card.cardId,\n                            securityCode: cardData['security-code'],\n                            expiry: expiration,\n                            name: cardData['card-name'],\n\n                            cardNumber: cardData['credit-card'],\n                            type: cardType,\n                        };\n\n                        await onSubmit(newCard);\n                        vgsForm.reset();\n                        setIsSavingVGSDetails(false);\n                    },\n                    (error: any) => {\n                        setErrorsOnFaults(error);\n                        setIsSavingVGSDetails(false);\n                    }\n                );\n            });\n        } else {\n            console.error('VGS not on element, problem has occurred');\n        }\n    };\n\n    const onDeleteCardClicked = () => {\n        setIsDeletingCard(true);\n\n        onDeleteClicked?.(card).finally(() => {\n            setIsDeletingCard(false);\n        });\n    };\n\n    const onMarkAsDefault = () => {\n        setIsMarkingAsDefault(true);\n\n        onMarkedAsDefaultClicked?.(card).finally(() => {\n            setIsMarkingAsDefault(false);\n        });\n    };\n\n    return (\n        <>\n            <div className={styles['card-inputs']}>\n                <div className=\"u-marg-bottom--medium u-marg-top--heavy@l-\">\n                    <CardTypeSelect value={cardType} />\n                </div>\n                <div className=\"u-margin-bottom\">\n                    {inputNames.map((name) => {\n                        const errorMessage = errors[name];\n                        return (\n                            <AutoAutoHeight open={!!errorMessage} key={name}>\n                                <div className=\"u-flex\">\n                                    <Alert type={AlertType.Danger} icon={IconType.Error}>\n                                        <Text type={TextType.Small}>{errorMessage}</Text>\n                                    </Alert>\n                                </div>\n                            </AutoAutoHeight>\n                        );\n                    })}\n                </div>\n                <div className=\"u-marg-bottom\">\n                    <div className=\"u-marg-bottom--light\">\n                        <Text type={TextType.Label} color={Color.Navy} bold>\n                            Card Number\n                        </Text>\n                    </div>\n                    <div className={cardNumber.getClasses()} ref={cardNumber.ref} />\n                </div>\n                <div className=\"u-marg-bottom\">\n                    <InputGroup dimensions=\"2/2\">\n                        <>\n                            <div className=\"u-marg-bottom--light\">\n                                <Text type={TextType.Label} color={Color.Navy} bold>\n                                    Expiry Month / Year\n                                </Text>\n                            </div>\n                            <div className={expiryDate.getClasses()} ref={expiryDate.ref} />\n                        </>\n                        <>\n                            <div className=\"u-marg-bottom--light\">\n                                <Text type={TextType.Label} color={Color.Navy} bold>\n                                    Security code\n                                </Text>\n                            </div>\n                            <div className={securityCode.getClasses()} ref={securityCode.ref} />\n                        </>\n                    </InputGroup>\n                </div>\n                <div className=\"u-marg-bottom\">\n                    <div className=\"u-marg-bottom--light\">\n                        <Text type={TextType.Label} color={Color.Navy} bold>\n                            Name on Credit Card\n                        </Text>\n                    </div>\n                    <div className={cardHolder.getClasses()} ref={cardHolder.ref} />\n                </div>\n                <div className=\"u-marg-bottom\">\n                    {card?.cardId ? (\n                        <BEButton\n                            className=\"u-marg-top--heavier@l u-marg-top--heavy@l- u-flex u-flex-justify-center\"\n                            isLoading={isDeletingCard}\n                            textColor={Color.Danger}\n                            isText={true}\n                            icon={IconType.Delete}\n                            onClick={onDeleteCardClicked}\n                            stopIconAnimation={true}\n                        >\n                            Delete Card\n                        </BEButton>\n                    ) : (\n                        <BEButton\n                            className=\"u-marg-top--heavier@l u-marg-top--heavy@l- u-flex u-flex-justify-center\"\n                            isLoading={isSavingVGSDetails}\n                            rounded={true}\n                            primary={true}\n                            filled={true}\n                            mobileWidth={true}\n                            onClick={onChangeSubmit}\n                        >\n                            Save Card\n                        </BEButton>\n                    )}\n                </div>\n            </div>\n            <FadeAnimation open={!!card?.cardId}>\n                <div className={styles['card-large']}>\n                    <GenericPaymentCard card={card} />\n                    <div className=\"u-marg-top u-marg-top--heavy@l-\">\n                        <BEButton onClick={onMarkAsDefault} isLoading={isMarkingAsDefault} disabled={isCardDefault} filled={true} primary={true} size={'small'}>\n                            Mark as Default\n                        </BEButton>\n                    </div>\n                </div>\n            </FadeAnimation>\n        </>\n    );\n};\n"]}

package/dist/src/components/generic/Pill.d.ts

@@ -1,4 +1,4 @@
-import { IconType } from 'components/generic/Icon/Icon';
+import { IconType } from '../../../components/generic/Icon/Icon';
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
 export declare enum PillVariant {

package/dist/src/components/generic/Pill.js

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PillType = exports.PillVariant = void 0;
-const Icon_1 = __importDefault(require("components/generic/Icon/Icon"));
+const Icon_1 = __importDefault(require("../../../components/generic/Icon/Icon"));
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 var PillVariant;

package/dist/src/components/generic/Pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.js","sourceRoot":"/","sources":["src/components/generic/Pill.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wEAA8D;AAC9D,6CAA+B;AAG/B,4DAAoC;AAEpC,IAAY,WAEX;AAFD,WAAY,WAAW;IACnB,sCAAuB,CAAA;AAC3B,CAAC,EAFW,WAAW,GAAX,mBAAW,KAAX,mBAAW,QAEtB;AAED,IAAY,QAQX;AARD,WAAY,QAAQ;IAChB,gCAAoB,CAAA;IACpB,oCAAwB,CAAA;IACxB,iCAAqB,CAAA;IACrB,iCAAqB,CAAA;IACrB,iCAAqB,CAAA;IACrB,2BAAe,CAAA;IACf,+BAAmB,CAAA;AACvB,CAAC,EARW,QAAQ,GAAR,gBAAQ,KAAR,gBAAQ,QAQnB;AAeD,SAAwB,IAAI,CAAC,KAAgB;;IACzC,MAAM,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAEtD,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE;QACrD,cAAc,EAAE,KAAK,CAAC,YAAY,KAAK,OAAO;QAC9C,SAAS,EAAE,IAAI,KAAK,OAAO;QAC3B,CAAC,MAAA,KAAK,CAAC,IAAI,mCAAI,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI;KACzC,CAAC,CAAC;IAEH,MAAM,IAAI,GAAG,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,oBAAC,cAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAgB,EAAE,OAAO,EAAE,MAAA,KAAK,CAAC,WAAW,mCAAI,IAAI,GAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;IAEtI,OAAO,CACH,8BAAM,SAAS,EAAE,OAAO;QACnB,CAAC,KAAK,CAAC,YAAY,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,IAAI;QAC9D,KAAK,CAAC,QAAQ;QACd,KAAK,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CACpC,CACV,CAAC;AACN,CAAC;AAlBD,uBAkBC","sourcesContent":["import Icon, { IconType } from 'components/generic/Icon/Icon';\nimport * as React from 'react';\nimport { PropsWithChildren } from 'react';\n\nimport classNames from 'classnames';\n\nexport enum PillVariant {\n    Outlined = '--outlined',\n}\n\nexport enum PillType {\n    Primary = '--accent',\n    Secondary = '--accent-2',\n    Warning = '--warning',\n    Success = '--success',\n    Default = '--default',\n    Grey = '--grey',\n    Danger = '--danger',\n}\n\nexport interface PillProps extends PropsWithChildren<any> {\n    icon?: IconType | React.ReactNode;\n    size?: 'medium' | 'small';\n    iconPosition?: 'left' | 'right';\n    type?: PillType;\n\n    onClickIcon?: () => void | null;\n    variant?: PillVariant;\n    className?: string;\n\n    [x: string]: React.ReactNode;\n}\n\nexport default function Pill(props: PillProps) {\n    const { size = 'medium', variant, className } = props;\n\n    const classes = classNames('c-pill', variant, className, {\n        '--icon-right': props.iconPosition === 'right',\n        '--small': size === 'small',\n        [props.type ?? PillType.Default]: true,\n    });\n\n    const icon = typeof props.icon === 'string' ? <Icon icon={props.icon as IconType} onClick={props.onClickIcon ?? null} /> : props.icon;\n\n    return (\n        <span className={classes}>\n            {(props.iconPosition === 'left' || !props.iconPosition) && icon}\n            {props.children}\n            {props.iconPosition === 'right' && icon}\n        </span>\n    );\n}\n"]}
+{"version":3,"file":"Pill.js","sourceRoot":"/","sources":["src/components/generic/Pill.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0EAAgE;AAChE,6CAA+B;AAG/B,4DAAoC;AAEpC,IAAY,WAEX;AAFD,WAAY,WAAW;IACnB,sCAAuB,CAAA;AAC3B,CAAC,EAFW,WAAW,GAAX,mBAAW,KAAX,mBAAW,QAEtB;AAED,IAAY,QAQX;AARD,WAAY,QAAQ;IAChB,gCAAoB,CAAA;IACpB,oCAAwB,CAAA;IACxB,iCAAqB,CAAA;IACrB,iCAAqB,CAAA;IACrB,iCAAqB,CAAA;IACrB,2BAAe,CAAA;IACf,+BAAmB,CAAA;AACvB,CAAC,EARW,QAAQ,GAAR,gBAAQ,KAAR,gBAAQ,QAQnB;AAeD,SAAwB,IAAI,CAAC,KAAgB;;IACzC,MAAM,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAEtD,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE;QACrD,cAAc,EAAE,KAAK,CAAC,YAAY,KAAK,OAAO;QAC9C,SAAS,EAAE,IAAI,KAAK,OAAO;QAC3B,CAAC,MAAA,KAAK,CAAC,IAAI,mCAAI,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI;KACzC,CAAC,CAAC;IAEH,MAAM,IAAI,GAAG,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,oBAAC,cAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAgB,EAAE,OAAO,EAAE,MAAA,KAAK,CAAC,WAAW,mCAAI,IAAI,GAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;IAEtI,OAAO,CACH,8BAAM,SAAS,EAAE,OAAO;QACnB,CAAC,KAAK,CAAC,YAAY,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,IAAI;QAC9D,KAAK,CAAC,QAAQ;QACd,KAAK,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CACpC,CACV,CAAC;AACN,CAAC;AAlBD,uBAkBC","sourcesContent":["import Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport * as React from 'react';\nimport { PropsWithChildren } from 'react';\n\nimport classNames from 'classnames';\n\nexport enum PillVariant {\n    Outlined = '--outlined',\n}\n\nexport enum PillType {\n    Primary = '--accent',\n    Secondary = '--accent-2',\n    Warning = '--warning',\n    Success = '--success',\n    Default = '--default',\n    Grey = '--grey',\n    Danger = '--danger',\n}\n\nexport interface PillProps extends PropsWithChildren<any> {\n    icon?: IconType | React.ReactNode;\n    size?: 'medium' | 'small';\n    iconPosition?: 'left' | 'right';\n    type?: PillType;\n\n    onClickIcon?: () => void | null;\n    variant?: PillVariant;\n    className?: string;\n\n    [x: string]: React.ReactNode;\n}\n\nexport default function Pill(props: PillProps) {\n    const { size = 'medium', variant, className } = props;\n\n    const classes = classNames('c-pill', variant, className, {\n        '--icon-right': props.iconPosition === 'right',\n        '--small': size === 'small',\n        [props.type ?? PillType.Default]: true,\n    });\n\n    const icon = typeof props.icon === 'string' ? <Icon icon={props.icon as IconType} onClick={props.onClickIcon ?? null} /> : props.icon;\n\n    return (\n        <span className={classes}>\n            {(props.iconPosition === 'left' || !props.iconPosition) && icon}\n            {props.children}\n            {props.iconPosition === 'right' && icon}\n        </span>\n    );\n}\n"]}

package/dist/src/components/generic/PromoCodeInput.js

@@ -27,15 +27,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
-const TextBox_1 = __importDefault(require("components/generic/TextBox"));
+const TextBox_1 = __importDefault(require("../../../components/generic/TextBox"));
 const Translation_1 = require("translations/Translation");
-const Tooltip_1 = __importDefault(require("components/generic/Tooltip/Tooltip"));
-const Icon_1 = __importStar(require("components/generic/Icon/Icon"));
-const Color_1 = require("util/Color");
+const Tooltip_1 = __importDefault(require("../../../components/generic/Tooltip/Tooltip"));
+const Icon_1 = __importStar(require("../../../components/generic/Icon/Icon"));
+const Color_1 = require("../../../util/Color");
 const react_i18next_1 = require("react-i18next");
 const react_1 = require("react");
-const SmallSpinner_1 = __importDefault(require("components/generic/loader/SmallSpinner"));
-const Text_1 = __importStar(require("components/generic/Text"));
+const SmallSpinner_1 = __importDefault(require("../../../components/generic/loader/SmallSpinner"));
+const Text_1 = __importStar(require("../../../components/generic/Text"));
 function PromoCodeInput(props) {
     var _a;
     const { t } = (0, react_i18next_1.useTranslation)();

package/dist/src/components/generic/PromoCodeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromoCodeInput.js","sourceRoot":"/","sources":["src/components/generic/PromoCodeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport TextBox from 'components/generic/TextBox';\nimport { Translation } from 'translations/Translation';\nimport Tooltip from 'components/generic/Tooltip/Tooltip';\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\nimport { Color } from 'util/Color';\nimport { useTranslation } from 'react-i18next';\nimport { useState, useRef, useEffect } from 'react';\nimport SmallSpinner from 'components/generic/loader/SmallSpinner';\nimport Text, { TextType } from 'components/generic/Text';\n\ninterface PromoCodeInputProps {\n    value: string;\n    onChange: (code: string) => void;\n\n    valid?: boolean;\n    direct?: boolean;\n}\n\nexport default function PromoCodeInput(props: PromoCodeInputProps) {\n    const { t } = useTranslation();\n\n    const [promoCode, setPromoCode] = useState(props.value ?? '');\n    const [showPromoSave, setShowPromoSave] = useState(false);\n    const [showPromoRemove, setShowPromoRemove] = useState(false);\n\n    const [pressedChange, setPressedChange] = useState(false);\n\n    const firstUpdate = useRef();\n\n    let promoCodeStatus: 'success' | 'error';\n    promoCodeStatus = props.valid || props.valid === false ? (props.valid ? 'success' : 'error') : null;\n\n    useEffect(() => {\n        if (props.valid || props.valid === false) {\n            setShowPromoRemove(true);\n        }\n    }, [props.valid]);\n\n    useEffect(() => {\n        if (showPromoSave || showPromoRemove) {\n            setPressedChange(false);\n        }\n    }, [showPromoSave, showPromoRemove]);\n\n    useEffect(() => {\n        if (firstUpdate) {\n            if (promoCode) {\n                if (promoCode !== props.value) {\n                    if (props.direct) {\n                        updatePromoCode(promoCode, false);\n                    } else {\n                        setShowPromoSave(true);\n                    }\n                } else {\n                    setShowPromoRemove(true);\n                }\n            } else {\n                setShowPromoSave(false);\n                setShowPromoRemove(false);\n\n                if (promoCode !== '') {\n                    updatePromoCode('', false);\n                }\n            }\n        } else {\n            if (promoCode) {\n                setShowPromoRemove(true);\n            }\n        }\n    }, [promoCode]);\n\n    const updatePromoCode = (code: string, propagate = true) => {\n        if (code) {\n            if (props.direct) {\n                setShowPromoRemove(true);\n            } else {\n                setPressedChange(true);\n                setShowPromoSave(false);\n            }\n        }\n\n        if (propagate) {\n            setPromoCode(code);\n        }\n\n        props.onChange(code);\n    };\n\n    const handleKeyPress = (event: any) => {\n        if (event.key === 'Enter') {\n            updatePromoCode(promoCode);\n        }\n    };\n    const clearPromoCode = () => {\n        return updatePromoCode('');\n    };\n    const setUpdatedPromoCode = () => {\n        return updatePromoCode(promoCode);\n    };\n    const setPromoCodeOnChange = (val: React.ChangeEvent<HTMLInputElement>) => {\n        setPromoCode(val.target.value);\n    };\n    return (\n        <div ref={firstUpdate}>\n            <div className=\"u-pos-rel\">\n                <TextBox\n                    value={(props.direct ? props.value : promoCode).toUpperCase().replace(' ', '')}\n                    placeholder={t(Translation.Step.Date.PromoCode)}\n                    wide={true}\n                    validationStatus={promoCodeStatus}\n                    onChange={setPromoCodeOnChange}\n                    onKeyPress={handleKeyPress}\n                />\n                {showPromoRemove && (\n                    <Tooltip title=\"Remove Promo code\">\n                        <div className=\"people-picker--promo-icon\" onClick={clearPromoCode}>\n                            <Icon size=\"24px\" icon={IconType.Close} color={Color.Grey} />\n                        </div>\n                    </Tooltip>\n                )}\n                {showPromoSave && (\n                    <Tooltip title=\"Apply Code\">\n                        <div className=\"people-picker--promo-icon --success\" onClick={setUpdatedPromoCode}>\n                            <Icon size=\"24px\" icon={IconType.ArrowRight2} color={Color.Success} />\n                        </div>\n                    </Tooltip>\n                )}\n                {pressedChange && (\n                    <Tooltip title=\"Promo code loading\">\n                        <div className=\"people-picker--promo-icon\">\n                            <SmallSpinner />\n                        </div>\n                    </Tooltip>\n                )}\n            </div>\n            {props.valid === true && (\n                <div className=\"u-marg-top\">\n                    <Text type={TextType.Small} color={Color.Success}>\n                        Promo Code '{props.value}' applied\n                    </Text>\n                </div>\n            )}\n            {props.valid === false && (\n                <div className=\"u-marg-top\">\n                    <Text type={TextType.Small} color={Color.Alert}>\n                        Promo Code '{props.value}' is not valid\n                    </Text>\n                </div>\n            )}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"PromoCodeInput.js","sourceRoot":"/","sources":["src/components/generic/PromoCodeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport TextBox from '@/components/generic/TextBox';\nimport { Translation } from 'translations/Translation';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Color } from '@/util/Color';\nimport { useTranslation } from 'react-i18next';\nimport { useState, useRef, useEffect } from 'react';\nimport SmallSpinner from '@/components/generic/loader/SmallSpinner';\nimport Text, { TextType } from '@/components/generic/Text';\n\ninterface PromoCodeInputProps {\n    value: string;\n    onChange: (code: string) => void;\n\n    valid?: boolean;\n    direct?: boolean;\n}\n\nexport default function PromoCodeInput(props: PromoCodeInputProps) {\n    const { t } = useTranslation();\n\n    const [promoCode, setPromoCode] = useState(props.value ?? '');\n    const [showPromoSave, setShowPromoSave] = useState(false);\n    const [showPromoRemove, setShowPromoRemove] = useState(false);\n\n    const [pressedChange, setPressedChange] = useState(false);\n\n    const firstUpdate = useRef();\n\n    let promoCodeStatus: 'success' | 'error';\n    promoCodeStatus = props.valid || props.valid === false ? (props.valid ? 'success' : 'error') : null;\n\n    useEffect(() => {\n        if (props.valid || props.valid === false) {\n            setShowPromoRemove(true);\n        }\n    }, [props.valid]);\n\n    useEffect(() => {\n        if (showPromoSave || showPromoRemove) {\n            setPressedChange(false);\n        }\n    }, [showPromoSave, showPromoRemove]);\n\n    useEffect(() => {\n        if (firstUpdate) {\n            if (promoCode) {\n                if (promoCode !== props.value) {\n                    if (props.direct) {\n                        updatePromoCode(promoCode, false);\n                    } else {\n                        setShowPromoSave(true);\n                    }\n                } else {\n                    setShowPromoRemove(true);\n                }\n            } else {\n                setShowPromoSave(false);\n                setShowPromoRemove(false);\n\n                if (promoCode !== '') {\n                    updatePromoCode('', false);\n                }\n            }\n        } else {\n            if (promoCode) {\n                setShowPromoRemove(true);\n            }\n        }\n    }, [promoCode]);\n\n    const updatePromoCode = (code: string, propagate = true) => {\n        if (code) {\n            if (props.direct) {\n                setShowPromoRemove(true);\n            } else {\n                setPressedChange(true);\n                setShowPromoSave(false);\n            }\n        }\n\n        if (propagate) {\n            setPromoCode(code);\n        }\n\n        props.onChange(code);\n    };\n\n    const handleKeyPress = (event: any) => {\n        if (event.key === 'Enter') {\n            updatePromoCode(promoCode);\n        }\n    };\n    const clearPromoCode = () => {\n        return updatePromoCode('');\n    };\n    const setUpdatedPromoCode = () => {\n        return updatePromoCode(promoCode);\n    };\n    const setPromoCodeOnChange = (val: React.ChangeEvent<HTMLInputElement>) => {\n        setPromoCode(val.target.value);\n    };\n    return (\n        <div ref={firstUpdate}>\n            <div className=\"u-pos-rel\">\n                <TextBox\n                    value={(props.direct ? props.value : promoCode).toUpperCase().replace(' ', '')}\n                    placeholder={t(Translation.Step.Date.PromoCode)}\n                    wide={true}\n                    validationStatus={promoCodeStatus}\n                    onChange={setPromoCodeOnChange}\n                    onKeyPress={handleKeyPress}\n                />\n                {showPromoRemove && (\n                    <Tooltip title=\"Remove Promo code\">\n                        <div className=\"people-picker--promo-icon\" onClick={clearPromoCode}>\n                            <Icon size=\"24px\" icon={IconType.Close} color={Color.Grey} />\n                        </div>\n                    </Tooltip>\n                )}\n                {showPromoSave && (\n                    <Tooltip title=\"Apply Code\">\n                        <div className=\"people-picker--promo-icon --success\" onClick={setUpdatedPromoCode}>\n                            <Icon size=\"24px\" icon={IconType.ArrowRight2} color={Color.Success} />\n                        </div>\n                    </Tooltip>\n                )}\n                {pressedChange && (\n                    <Tooltip title=\"Promo code loading\">\n                        <div className=\"people-picker--promo-icon\">\n                            <SmallSpinner />\n                        </div>\n                    </Tooltip>\n                )}\n            </div>\n            {props.valid === true && (\n                <div className=\"u-marg-top\">\n                    <Text type={TextType.Small} color={Color.Success}>\n                        Promo Code '{props.value}' applied\n                    </Text>\n                </div>\n            )}\n            {props.valid === false && (\n                <div className=\"u-marg-top\">\n                    <Text type={TextType.Small} color={Color.Alert}>\n                        Promo Code '{props.value}' is not valid\n                    </Text>\n                </div>\n            )}\n        </div>\n    );\n}\n"]}

package/dist/src/components/generic/RadioButtonGroup/RadioButtonGroup.js

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
-const RadioButton_1 = require("components/generic/RadioButtonGroup/RadioButton");
+const RadioButton_1 = require("../../../../components/generic/RadioButtonGroup/RadioButton");
 const RadioButtonGroup_module_scss_1 = __importDefault(require("./RadioButtonGroup.module.scss"));
 const AutoAutoHeight_1 = __importDefault(require("animations/AutoAutoHeight"));
 const Tooltip_1 = __importDefault(require("../Tooltip/Tooltip"));

package/dist/src/components/generic/RadioButtonGroup/RadioButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonGroup.js","sourceRoot":"/","sources":["src/components/generic/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,iFAA8E;AAC9E,kGAAoD;AACpD,+EAAuD;AACvD,iEAAyC;AAiBzC,MAAM,gBAAgB,GAA8B,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5F,OAAO,CACH,6BAAK,SAAS,EAAE,sCAAM,CAAC,IAAI,IACtB,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,aAAa,EAAE,EAAE,EAAE;QACvE,MAAM,WAAW,GAAG,CAChB,oBAAC,yBAAW,IACR,SAAS,EAAE,sCAAM,CAAC,IAAI,EACtB,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,CAAC,QAAQ,IAAI,KAAK,KAAK,SAAS,EACzC,QAAQ,EAAE,GAAG,EAAE;gBACX,IAAI,CAAC,QAAQ;oBAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;YACnC,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,GAAG,EAAE,CAAC,oBAAC,wBAAc,IAAC,IAAI,UAAE,aAAa,EAAE,CAAkB,GAC9E,CACL,CAAC;QAEF,IAAI,QAAQ,IAAI,cAAc,EAAE;YAC5B,OAAO,CACH,oBAAC,iBAAO,IAAC,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE,sCAAM,CAAC,OAAO,EAAE,KAAK,EAAE,cAAc,IACrE,WAAW,CACN,CACb,CAAC;SACL;QAED,OAAO,CACH,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,sCAAM,CAAC,OAAO,IACrC,WAAW,CACV,CACT,CAAC;IACN,CAAC,CAAC,CACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,gBAAgB,CAAC","sourcesContent":["import * as React from 'react';\nimport { FC, ReactNode } from 'react';\nimport { RadioButton } from 'components/generic/RadioButtonGroup/RadioButton';\nimport styles from './RadioButtonGroup.module.scss';\nimport AutoAutoHeight from 'animations/AutoAutoHeight';\nimport Tooltip from '../Tooltip/Tooltip';\n\nexport interface RadioButtonGroupProps {\n    options: {\n        value: string;\n        label?: ReactNode;\n\n        disabled?: boolean;\n        /** Enabled a tooltip that gives more info on why the field is disabled */\n        disabledReason?: string;\n\n        renderContent?: () => ReactNode;\n    }[];\n    value: string;\n    onChange: (value: string) => void;\n}\n\nconst RadioButtonGroup: FC<RadioButtonGroupProps> = ({ options, value: valueProp, onChange }) => {\n    return (\n        <div className={styles.root}>\n            {options.map(({ value, label, disabled, disabledReason, renderContent }) => {\n                const radioButton = (\n                    <RadioButton\n                        className={styles.item}\n                        key={value}\n                        checked={!disabled && value === valueProp}\n                        onChange={() => {\n                            if (!disabled) onChange(value);\n                        }}\n                        label={label}\n                        disabled={disabled}\n                        renderContent={() => <AutoAutoHeight open>{renderContent()}</AutoAutoHeight>}\n                    />\n                );\n\n                if (disabled && disabledReason) {\n                    return (\n                        <Tooltip key={value} wrapperClasses={styles.wrapper} title={disabledReason}>\n                            {radioButton}\n                        </Tooltip>\n                    );\n                }\n\n                return (\n                    <div key={value} className={styles.wrapper}>\n                        {radioButton}\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n\nexport default RadioButtonGroup;\n"]}
+{"version":3,"file":"RadioButtonGroup.js","sourceRoot":"/","sources":["src/components/generic/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,mFAAgF;AAChF,kGAAoD;AACpD,+EAAuD;AACvD,iEAAyC;AAiBzC,MAAM,gBAAgB,GAA8B,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5F,OAAO,CACH,6BAAK,SAAS,EAAE,sCAAM,CAAC,IAAI,IACtB,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,aAAa,EAAE,EAAE,EAAE;QACvE,MAAM,WAAW,GAAG,CAChB,oBAAC,yBAAW,IACR,SAAS,EAAE,sCAAM,CAAC,IAAI,EACtB,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,CAAC,QAAQ,IAAI,KAAK,KAAK,SAAS,EACzC,QAAQ,EAAE,GAAG,EAAE;gBACX,IAAI,CAAC,QAAQ;oBAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;YACnC,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,GAAG,EAAE,CAAC,oBAAC,wBAAc,IAAC,IAAI,UAAE,aAAa,EAAE,CAAkB,GAC9E,CACL,CAAC;QAEF,IAAI,QAAQ,IAAI,cAAc,EAAE;YAC5B,OAAO,CACH,oBAAC,iBAAO,IAAC,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE,sCAAM,CAAC,OAAO,EAAE,KAAK,EAAE,cAAc,IACrE,WAAW,CACN,CACb,CAAC;SACL;QAED,OAAO,CACH,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,sCAAM,CAAC,OAAO,IACrC,WAAW,CACV,CACT,CAAC;IACN,CAAC,CAAC,CACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,gBAAgB,CAAC","sourcesContent":["import * as React from 'react';\nimport { FC, ReactNode } from 'react';\nimport { RadioButton } from '@/components/generic/RadioButtonGroup/RadioButton';\nimport styles from './RadioButtonGroup.module.scss';\nimport AutoAutoHeight from 'animations/AutoAutoHeight';\nimport Tooltip from '../Tooltip/Tooltip';\n\nexport interface RadioButtonGroupProps {\n    options: {\n        value: string;\n        label?: ReactNode;\n\n        disabled?: boolean;\n        /** Enabled a tooltip that gives more info on why the field is disabled */\n        disabledReason?: string;\n\n        renderContent?: () => ReactNode;\n    }[];\n    value: string;\n    onChange: (value: string) => void;\n}\n\nconst RadioButtonGroup: FC<RadioButtonGroupProps> = ({ options, value: valueProp, onChange }) => {\n    return (\n        <div className={styles.root}>\n            {options.map(({ value, label, disabled, disabledReason, renderContent }) => {\n                const radioButton = (\n                    <RadioButton\n                        className={styles.item}\n                        key={value}\n                        checked={!disabled && value === valueProp}\n                        onChange={() => {\n                            if (!disabled) onChange(value);\n                        }}\n                        label={label}\n                        disabled={disabled}\n                        renderContent={() => <AutoAutoHeight open>{renderContent()}</AutoAutoHeight>}\n                    />\n                );\n\n                if (disabled && disabledReason) {\n                    return (\n                        <Tooltip key={value} wrapperClasses={styles.wrapper} title={disabledReason}>\n                            {radioButton}\n                        </Tooltip>\n                    );\n                }\n\n                return (\n                    <div key={value} className={styles.wrapper}>\n                        {radioButton}\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n\nexport default RadioButtonGroup;\n"]}

package/dist/src/components/generic/RecentSearchesCard.d.ts

@@ -1,4 +1,4 @@
-import BasketRow from 'models/BasketRow';
+import BasketRow from '../../../models/BasketRow';
 export interface RecentSearchesCardProps {
     basketRow: BasketRow;
     onViewRatesClicked: () => void;

package/dist/src/components/generic/RecentSearchesCard.js

@@ -28,16 +28,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const dayjs_1 = __importDefault(require("dayjs"));
-const ImageGallerySlider_1 = __importDefault(require("components/steps/room/ImageGallerySlider"));
-const BEButton_1 = __importDefault(require("components/generic/BEButton"));
-const Icon_1 = __importStar(require("components/generic/Icon/Icon"));
-const Color_1 = require("util/Color");
-const Text_1 = __importStar(require("components/generic/Text"));
+const ImageGallerySlider_1 = __importDefault(require("../../../components/steps/room/ImageGallerySlider"));
+const BEButton_1 = __importDefault(require("../../../components/generic/BEButton"));
+const Icon_1 = __importStar(require("../../../components/generic/Icon/Icon"));
+const Color_1 = require("../../../util/Color");
+const Text_1 = __importStar(require("../../../components/generic/Text"));
 const react_i18next_1 = require("react-i18next");
 const Translation_1 = require("translations/Translation");
 const react_1 = require("react");
-const ScreenSize_1 = __importDefault(require("util/ScreenSize"));
-const contexts_1 = require("@frontend/contexts");
+const ScreenSize_1 = __importDefault(require("../../../util/ScreenSize"));
+const contexts_1 = require("../../../contexts/index.js");
 const RecentSearchesCard = ({ basketRow, onRemove, onViewRatesClicked }) => {
     const start = (0, dayjs_1.default)(basketRow.getStartDate()).format('ddd DD MMM');
     const end = (0, dayjs_1.default)(basketRow.getEndDate()).format('ddd DD MMM');

package/dist/src/components/generic/RecentSearchesCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecentSearchesCard.js","sourceRoot":"/","sources":["src/components/generic/RecentSearchesCard.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,kDAA0B;AAC1B,kGAA0E;AAC1E,2EAAmD;AACnD,qEAA8D;AAC9D,sCAAmC;AACnC,gEAAyD;AAEzD,iDAA+C;AAC/C,0DAAuD;AACvD,iCAAmC;AACnC,iEAAyC;AACzC,iDAA0D;AAQ1D,MAAM,kBAAkB,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,kBAAkB,EAA2B,EAAE,EAAE;IAChG,MAAM,KAAK,GAAG,IAAA,eAAK,EAAC,SAAS,CAAC,YAAY,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IACnE,MAAM,GAAG,GAAG,IAAA,eAAK,EAAC,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IAE/D,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IAEnD,OAAO,CACH,6BAAK,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,EAAE,SAAS,EAAC,sBAAsB;QACrE,6BAAK,SAAS,EAAC,+BAA+B;YAC1C,oBAAC,4BAAkB,IAAC,MAAM,EAAE,SAAS,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,gBAAgB,EAAE,IAAI,GAAI,CAChF;QACN,6BAAK,SAAS,EAAC,mCAAmC,EAAC,OAAO,EAAE,kBAAkB;YAC1E,6BAAK,SAAS,EAAC,6BAA6B;gBACxC,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,aAAK,CAAC,MAAM,IACrD,SAAS,CAAC,OAAO,EAAE,CAAC,IAAI,CACtB;gBACP,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE,SAAS,EAAC,sBAAsB,IAC9E,SAAS,CAAC,OAAO,EAAE,CAAC,IAAI,CACtB,CACL;YAEN,6BAAK,SAAS,EAAC,sDAAsD;gBACjE,6BAAK,SAAS,EAAC,aAAa;oBACxB,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK;wBACrB,KAAK;;wBAAI,GAAG,CACV,CACL;gBACN;oBACI,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ;wBAC5C,SAAS,CAAC,SAAS,EAAE;;wBAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;;wBAAO,SAAS,CAAC,WAAW,EAAE;;wBAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CACjI,CACL,CACJ;YACN,oBAAC,kBAAQ,IACL,IAAI,EAAE,eAAQ,CAAC,UAAU,EACzB,YAAY,EAAC,OAAO,EACpB,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,IAAI,EACb,IAAI,EAAE,SAAS,CAAC,UAAU,IAAI,oBAAU,CAAC,MAAM,EAC/C,OAAO,EAAE,kBAAkB,IAE1B,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CACrC,CACT;QACN,6BAAK,SAAS,EAAC,6BAA6B;YACxC,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,GAAI,CACpF,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC","sourcesContent":["import * as React from 'react';\nimport dayjs from 'dayjs';\nimport ImageGallerySlider from 'components/steps/room/ImageGallerySlider';\nimport BEButton from 'components/generic/BEButton';\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\nimport { Color } from 'util/Color';\nimport Text, { TextType } from 'components/generic/Text';\nimport BasketRow from 'models/BasketRow';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport { useContext } from 'react';\nimport ScreenSize from 'util/ScreenSize';\nimport { BookingEngineContext } from '@frontend/contexts';\nexport interface RecentSearchesCardProps {\n    basketRow: BasketRow;\n\n    onViewRatesClicked: () => void;\n    onRemove: () => void;\n}\n\nconst RecentSearchesCard = ({ basketRow, onRemove, onViewRatesClicked }: RecentSearchesCardProps) => {\n    const start = dayjs(basketRow.getStartDate()).format('ddd DD MMM');\n    const end = dayjs(basketRow.getEndDate()).format('ddd DD MMM');\n\n    const { t } = useTranslation();\n\n    const beContext = useContext(BookingEngineContext);\n\n    return (\n        <div style={{ backgroundColor: '#fff' }} className=\"recent-searches-card\">\n            <div className=\"recent-searches-card--gallery\">\n                <ImageGallerySlider images={basketRow.getRoom().images} hideLightboxIcon={true} />\n            </div>\n            <div className=\"recent-searches-card--information\" onClick={onViewRatesClicked}>\n                <div className=\"recent-searches-card--title\">\n                    <Text type={TextType.Body} bold={true} color={Color.Accent}>\n                        {basketRow.getRoom().name}\n                    </Text>\n                    <Text type={TextType.Small} color={Color.DarkGrey} className=\"u-marg-bottom--light\">\n                        {basketRow.getRate().name}\n                    </Text>\n                </div>\n\n                <div className=\"u-marg-bottom u-flex flex-wrap justify-content-start\">\n                    <div className=\"u-pad-right\">\n                        <Text type={TextType.Small}>\n                            {start}, {end}\n                        </Text>\n                    </div>\n                    <div>\n                        <Text type={TextType.Small} color={Color.DarkGrey}>\n                            {basketRow.getAdults()} {t(Translation.Step.Date.Adult_plural)} and {basketRow.getChildren()} {t(Translation.Step.Date.Child_plural)}\n                        </Text>\n                    </div>\n                </div>\n                <BEButton\n                    icon={IconType.ArrowRight}\n                    iconPosition=\"right\"\n                    filled={true}\n                    primary={true}\n                    wide={beContext.screenSize <= ScreenSize.Medium}\n                    onClick={onViewRatesClicked}\n                >\n                    {t(Translation.Step.Room.RoomInfo.ViewRates)}\n                </BEButton>\n            </div>\n            <div className=\"recent-searches-card--close\">\n                <Icon icon={IconType.Close} color={Color.DarkGrey} size={'24px'} onClick={onRemove} />\n            </div>\n        </div>\n    );\n};\n\nexport default RecentSearchesCard;\n"]}
+{"version":3,"file":"RecentSearchesCard.js","sourceRoot":"/","sources":["src/components/generic/RecentSearchesCard.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,kDAA0B;AAC1B,oGAA4E;AAC5E,6EAAqD;AACrD,uEAAgE;AAChE,wCAAqC;AACrC,kEAA2D;AAE3D,iDAA+C;AAC/C,0DAAuD;AACvD,iCAAmC;AACnC,mEAA2C;AAC3C,iDAA0D;AAQ1D,MAAM,kBAAkB,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,kBAAkB,EAA2B,EAAE,EAAE;IAChG,MAAM,KAAK,GAAG,IAAA,eAAK,EAAC,SAAS,CAAC,YAAY,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IACnE,MAAM,GAAG,GAAG,IAAA,eAAK,EAAC,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IAE/D,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IAEnD,OAAO,CACH,6BAAK,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,EAAE,SAAS,EAAC,sBAAsB;QACrE,6BAAK,SAAS,EAAC,+BAA+B;YAC1C,oBAAC,4BAAkB,IAAC,MAAM,EAAE,SAAS,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,gBAAgB,EAAE,IAAI,GAAI,CAChF;QACN,6BAAK,SAAS,EAAC,mCAAmC,EAAC,OAAO,EAAE,kBAAkB;YAC1E,6BAAK,SAAS,EAAC,6BAA6B;gBACxC,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,aAAK,CAAC,MAAM,IACrD,SAAS,CAAC,OAAO,EAAE,CAAC,IAAI,CACtB;gBACP,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE,SAAS,EAAC,sBAAsB,IAC9E,SAAS,CAAC,OAAO,EAAE,CAAC,IAAI,CACtB,CACL;YAEN,6BAAK,SAAS,EAAC,sDAAsD;gBACjE,6BAAK,SAAS,EAAC,aAAa;oBACxB,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK;wBACrB,KAAK;;wBAAI,GAAG,CACV,CACL;gBACN;oBACI,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ;wBAC5C,SAAS,CAAC,SAAS,EAAE;;wBAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;;wBAAO,SAAS,CAAC,WAAW,EAAE;;wBAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CACjI,CACL,CACJ;YACN,oBAAC,kBAAQ,IACL,IAAI,EAAE,eAAQ,CAAC,UAAU,EACzB,YAAY,EAAC,OAAO,EACpB,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,IAAI,EACb,IAAI,EAAE,SAAS,CAAC,UAAU,IAAI,oBAAU,CAAC,MAAM,EAC/C,OAAO,EAAE,kBAAkB,IAE1B,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CACrC,CACT;QACN,6BAAK,SAAS,EAAC,6BAA6B;YACxC,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,GAAI,CACpF,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC","sourcesContent":["import * as React from 'react';\nimport dayjs from 'dayjs';\nimport ImageGallerySlider from '@/components/steps/room/ImageGallerySlider';\nimport BEButton from '@/components/generic/BEButton';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Color } from '@/util/Color';\nimport Text, { TextType } from '@/components/generic/Text';\nimport BasketRow from '@/models/BasketRow';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport { useContext } from 'react';\nimport ScreenSize from '@/util/ScreenSize';\nimport { BookingEngineContext } from '@frontend/contexts';\nexport interface RecentSearchesCardProps {\n    basketRow: BasketRow;\n\n    onViewRatesClicked: () => void;\n    onRemove: () => void;\n}\n\nconst RecentSearchesCard = ({ basketRow, onRemove, onViewRatesClicked }: RecentSearchesCardProps) => {\n    const start = dayjs(basketRow.getStartDate()).format('ddd DD MMM');\n    const end = dayjs(basketRow.getEndDate()).format('ddd DD MMM');\n\n    const { t } = useTranslation();\n\n    const beContext = useContext(BookingEngineContext);\n\n    return (\n        <div style={{ backgroundColor: '#fff' }} className=\"recent-searches-card\">\n            <div className=\"recent-searches-card--gallery\">\n                <ImageGallerySlider images={basketRow.getRoom().images} hideLightboxIcon={true} />\n            </div>\n            <div className=\"recent-searches-card--information\" onClick={onViewRatesClicked}>\n                <div className=\"recent-searches-card--title\">\n                    <Text type={TextType.Body} bold={true} color={Color.Accent}>\n                        {basketRow.getRoom().name}\n                    </Text>\n                    <Text type={TextType.Small} color={Color.DarkGrey} className=\"u-marg-bottom--light\">\n                        {basketRow.getRate().name}\n                    </Text>\n                </div>\n\n                <div className=\"u-marg-bottom u-flex flex-wrap justify-content-start\">\n                    <div className=\"u-pad-right\">\n                        <Text type={TextType.Small}>\n                            {start}, {end}\n                        </Text>\n                    </div>\n                    <div>\n                        <Text type={TextType.Small} color={Color.DarkGrey}>\n                            {basketRow.getAdults()} {t(Translation.Step.Date.Adult_plural)} and {basketRow.getChildren()} {t(Translation.Step.Date.Child_plural)}\n                        </Text>\n                    </div>\n                </div>\n                <BEButton\n                    icon={IconType.ArrowRight}\n                    iconPosition=\"right\"\n                    filled={true}\n                    primary={true}\n                    wide={beContext.screenSize <= ScreenSize.Medium}\n                    onClick={onViewRatesClicked}\n                >\n                    {t(Translation.Step.Room.RoomInfo.ViewRates)}\n                </BEButton>\n            </div>\n            <div className=\"recent-searches-card--close\">\n                <Icon icon={IconType.Close} color={Color.DarkGrey} size={'24px'} onClick={onRemove} />\n            </div>\n        </div>\n    );\n};\n\nexport default RecentSearchesCard;\n"]}

package/dist/src/components/generic/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement, Ref } from 'react';
 import './Select.global.scss';
-import { OverlayProps } from 'components/generic/Overlay/Overlay';
+import { OverlayProps } from '../../../../components/generic/Overlay/Overlay';
 export type Option<KeyName extends string> = {
     [keyName in KeyName]: string;
 } & Record<any, any> & {

package/dist/src/components/generic/Select/Select.js

@@ -31,12 +31,12 @@ const react_1 = __importStar(require("react"));
 const Icon_1 = __importStar(require("../Icon/Icon"));
 const classnames_1 = __importDefault(require("classnames"));
 require("./Select.global.scss");
-const Overlay_1 = require("components/generic/Overlay/Overlay");
-const KeyboardControlOnSelect_1 = require("hooks/KeyboardControlOnSelect");
-const Color_1 = require("util/Color");
-const CombineState_1 = require("hooks/CombineState");
-const WindowSize_1 = require("hooks/WindowSize");
-const Text_1 = __importStar(require("components/generic/Text"));
+const Overlay_1 = require("../../../../components/generic/Overlay/Overlay");
+const KeyboardControlOnSelect_1 = require("../../../../hooks/KeyboardControlOnSelect");
+const Color_1 = require("../../../../util/Color");
+const CombineState_1 = require("../../../../hooks/CombineState");
+const WindowSize_1 = require("../../../../hooks/WindowSize");
+const Text_1 = __importStar(require("../../../../components/generic/Text"));
 const MOBILE_BREAKPOINT = 992;
 const InnerSelect = ({ target, open, onClose, options = [], value, onChange, keyName, labelName, className, offset, renderOption, nativeOnMobile = false, overlay, renderLabel, }, ref) => {
     var _a, _b;

package/dist/src/components/generic/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"/","sources":["src/components/generic/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, ReactElement, ReactNode, Ref, useImperativeHandle, useRef } from 'react';\nimport Icon, { IconType } from '../Icon/Icon';\n\nimport classNames from 'classnames';\n\nimport './Select.global.scss';\nimport { Overlay, OverlayProps } from 'components/generic/Overlay/Overlay';\nimport { useKeyboardControlOnSelect } from 'hooks/KeyboardControlOnSelect';\nimport { Color } from 'util/Color';\nimport { useCombinedState } from 'hooks/CombineState';\nimport { useWindowSize } from 'hooks/WindowSize';\nimport Text, { TextType } from 'components/generic/Text';\n\nexport type Option<KeyName extends string> = {\n    [keyName in KeyName]: string;\n} & Record<any, any> & { options?: Option<KeyName>[] };\n\nexport type TOptionGroup<T> = {\n    name: string;\n    options: T[];\n};\n\nexport type TSelectOptionKey<T> = TOptionGroup<T> | T;\n\ntype Select<TOption extends Option<KeyName>, KeyName extends string> = {\n    options: TSelectOptionKey<TOption>[];\n    keyName: KeyName;\n\n    value?: TOption[KeyName];\n    labelName?: TOption[keyof TOption];\n    target?: HTMLElement;\n    open?: boolean;\n    onClose?: (e: MouseEvent) => void;\n    onChange?: (value: TOption[KeyName]) => void;\n    className?: string;\n    offset?: [number, number];\n    renderOption?: (option?: TOption) => ReactElement | null;\n    renderLabel?: (option?: TOption | null) => ReactElement | null;\n    nativeOnMobile?: boolean;\n    overlay?: Partial<Omit<OverlayProps, 'children' | 'open' | 'container' | 'followElement' | 'onClose' | 'overlayRef'>>;\n};\n\nconst MOBILE_BREAKPOINT = 992;\n\nexport const InnerSelect = <TOption extends Option<KeyName>, KeyName extends string>(\n    {\n        target,\n        open,\n        onClose,\n        options = [],\n        value,\n        onChange,\n        keyName,\n        labelName,\n        className,\n        offset,\n        renderOption,\n        nativeOnMobile = false,\n        overlay,\n        renderLabel,\n    }: Select<TOption, KeyName>,\n    ref: Ref<HTMLDivElement | null>\n) => {\n    const { width } = useWindowSize();\n    const targetRef = useRef<HTMLSpanElement>(null);\n    const optionRefs = useRef<{ [id: string]: HTMLDivElement | null }>({});\n    const optionContainerRef = useRef<HTMLDivElement | null>(null);\n    const [_open, _setIsOpen] = useCombinedState<boolean>(open, false);\n\n    // TODO: Force to fix later\n    nativeOnMobile = false;\n\n    const _onClose = (e: MouseEvent): void => {\n        _setIsOpen(false);\n        onClose?.(e);\n    };\n\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    useImperativeHandle(ref, () => overlayRef.current);\n\n    const _onSelected = (value: TOption[KeyName]) => {\n        onChange?.(value);\n        _setIsOpen(false);\n    };\n\n    const _getOption = (value?: TOption[KeyName]): TOption | undefined => {\n        for (const option of options) {\n            if (option.options && Array.isArray(option.options)) {\n                for (const childOption of option.options) {\n                    if (childOption[keyName] === value) {\n                        return childOption;\n                    }\n                }\n            } else {\n                // If we're in here it means that this option doesn't have children and is in fact an individual group\n                if ((option as TOption)[keyName] === value) {\n                    return option as TOption;\n                }\n            }\n        }\n    };\n\n    const { selectingItem, onItemMouseMove, onItemMouseLeave, onItemMouseEnter } = useKeyboardControlOnSelect<TOption, KeyName>({\n        onSelected: (item) => _onSelected(item[keyName]),\n        isEnabled: _open,\n        options,\n        idName: keyName,\n        overlayRef: overlayRef.current,\n        defaultOption: _getOption(value),\n        optionRefs,\n        optionContainerRef,\n    });\n\n    const _getLabel = (value?: TOption[KeyName]): string | ReactNode => {\n        const option = _getOption(value);\n\n        if (renderLabel) {\n            return renderLabel(option);\n        }\n\n        return option?.[labelName] || value || '';\n    };\n\n    const _renderOptions = (options?: TSelectOptionKey<TOption>[]): ReactElement | JSX.Element[] | null => {\n        if (!options) return null;\n        return options.map((option, index) => {\n            const isGroup = option.options;\n\n            if (isGroup) {\n                return _renderGroup(option.name, option.options);\n            }\n\n            return _renderOption({ option: option as TOption, key: index });\n        });\n    };\n\n    const _renderGroup = (name: string, options?: TSelectOptionKey<TOption>[]) => {\n        return (\n            <>\n                <div className=\"rs-select--suggest-list-item --group-title\">\n                    <Text type={TextType.Small} color={Color.DarkGrey}>\n                        {name}\n                    </Text>\n                </div>\n                {_renderOptions(options)}\n            </>\n        );\n    };\n\n    const _renderOption = ({ option, key }: { option: TOption; key: any }) => {\n        const isSelected = option[keyName] === value;\n        const isSelecting = option[keyName] === selectingItem?.[keyName];\n\n        return (\n            <div\n                ref={(ref) => (optionRefs.current[option[keyName]] = ref)}\n                key={key}\n                className={classNames('rs-select--suggest-list-item', { '--selected': isSelected || isSelecting })}\n                onClick={() => _onSelected(option[keyName])}\n                onMouseEnter={() => {\n                    onItemMouseEnter(option);\n                }}\n                onMouseLeave={() => onItemMouseLeave()}\n                onMouseMove={() => onItemMouseMove()}\n            >\n                <Text type={TextType.Small} className=\"rs-select--suggest-list-option-name\">\n                    {renderOption ? renderOption(option) : labelName ? option[labelName] : ''}\n                </Text>\n                {isSelected && (\n                    <span className=\"rs-select--suggest-list-option-icon\">\n                        <Icon icon={IconType.Check} />\n                    </span>\n                )}\n            </div>\n        );\n    };\n\n    const native = width && width < MOBILE_BREAKPOINT && nativeOnMobile;\n\n    return (\n        <>\n            {(native || !target) && (\n                <span className={classNames('be-select', className)} onClick={() => _setIsOpen(true)} ref={targetRef}>\n                    {native ? (\n                        <select value={value} onChange={(e) => onChange?.(e.target.value as TOption[KeyName])}>\n                            {options.map((item) => {\n                                //@ts-ignore TODO: This needs to support opt groups\n                                return <option value={value} key={item[keyName]} label={_getLabel(item[keyName])}></option>;\n                            })}\n                        </select>\n                    ) : (\n                        _getLabel(value)\n                    )}\n                    <Icon icon={IconType.Dropdown} color={Color.DarkGrey} />\n                </span>\n            )}\n            {!native && (\n                <Overlay\n                    offset={offset}\n                    usePortal={overlay?.usePortal ?? true}\n                    followElement={target || targetRef.current || undefined}\n                    placement={overlay?.placement ?? 'bottom-start'}\n                    strategy={overlay?.strategy}\n                    open={open === undefined ? _open : open}\n                    onClose={_onClose}\n                    containerClassName={overlay?.containerClassName}\n                    overlayRef={overlayRef}\n                >\n                    <div ref={optionContainerRef} className={classNames('rs-select--suggest-list', overlay?.className)}>\n                        {_renderOptions(options)}\n                    </div>\n                </Overlay>\n            )}\n        </>\n    );\n};\n\nexport const Select = forwardRef(InnerSelect) as <TOption extends Option<KeyName>, KeyName extends string>(\n    p: Select<TOption, KeyName> & { ref?: Ref<HTMLDivElement> }\n) => JSX.Element;\n\nexport interface IDefaultSelectOption {\n    value: string;\n    text: string;\n}\n"]}
+{"version":3,"file":"Select.js","sourceRoot":"/","sources":["src/components/generic/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, ReactElement, ReactNode, Ref, useImperativeHandle, useRef } from 'react';\nimport Icon, { IconType } from '../Icon/Icon';\n\nimport classNames from 'classnames';\n\nimport './Select.global.scss';\nimport { Overlay, OverlayProps } from '@/components/generic/Overlay/Overlay';\nimport { useKeyboardControlOnSelect } from '@/hooks/KeyboardControlOnSelect';\nimport { Color } from '@/util/Color';\nimport { useCombinedState } from '@/hooks/CombineState';\nimport { useWindowSize } from '@/hooks/WindowSize';\nimport Text, { TextType } from '@/components/generic/Text';\n\nexport type Option<KeyName extends string> = {\n    [keyName in KeyName]: string;\n} & Record<any, any> & { options?: Option<KeyName>[] };\n\nexport type TOptionGroup<T> = {\n    name: string;\n    options: T[];\n};\n\nexport type TSelectOptionKey<T> = TOptionGroup<T> | T;\n\ntype Select<TOption extends Option<KeyName>, KeyName extends string> = {\n    options: TSelectOptionKey<TOption>[];\n    keyName: KeyName;\n\n    value?: TOption[KeyName];\n    labelName?: TOption[keyof TOption];\n    target?: HTMLElement;\n    open?: boolean;\n    onClose?: (e: MouseEvent) => void;\n    onChange?: (value: TOption[KeyName]) => void;\n    className?: string;\n    offset?: [number, number];\n    renderOption?: (option?: TOption) => ReactElement | null;\n    renderLabel?: (option?: TOption | null) => ReactElement | null;\n    nativeOnMobile?: boolean;\n    overlay?: Partial<Omit<OverlayProps, 'children' | 'open' | 'container' | 'followElement' | 'onClose' | 'overlayRef'>>;\n};\n\nconst MOBILE_BREAKPOINT = 992;\n\nexport const InnerSelect = <TOption extends Option<KeyName>, KeyName extends string>(\n    {\n        target,\n        open,\n        onClose,\n        options = [],\n        value,\n        onChange,\n        keyName,\n        labelName,\n        className,\n        offset,\n        renderOption,\n        nativeOnMobile = false,\n        overlay,\n        renderLabel,\n    }: Select<TOption, KeyName>,\n    ref: Ref<HTMLDivElement | null>\n) => {\n    const { width } = useWindowSize();\n    const targetRef = useRef<HTMLSpanElement>(null);\n    const optionRefs = useRef<{ [id: string]: HTMLDivElement | null }>({});\n    const optionContainerRef = useRef<HTMLDivElement | null>(null);\n    const [_open, _setIsOpen] = useCombinedState<boolean>(open, false);\n\n    // TODO: Force to fix later\n    nativeOnMobile = false;\n\n    const _onClose = (e: MouseEvent): void => {\n        _setIsOpen(false);\n        onClose?.(e);\n    };\n\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    useImperativeHandle(ref, () => overlayRef.current);\n\n    const _onSelected = (value: TOption[KeyName]) => {\n        onChange?.(value);\n        _setIsOpen(false);\n    };\n\n    const _getOption = (value?: TOption[KeyName]): TOption | undefined => {\n        for (const option of options) {\n            if (option.options && Array.isArray(option.options)) {\n                for (const childOption of option.options) {\n                    if (childOption[keyName] === value) {\n                        return childOption;\n                    }\n                }\n            } else {\n                // If we're in here it means that this option doesn't have children and is in fact an individual group\n                if ((option as TOption)[keyName] === value) {\n                    return option as TOption;\n                }\n            }\n        }\n    };\n\n    const { selectingItem, onItemMouseMove, onItemMouseLeave, onItemMouseEnter } = useKeyboardControlOnSelect<TOption, KeyName>({\n        onSelected: (item) => _onSelected(item[keyName]),\n        isEnabled: _open,\n        options,\n        idName: keyName,\n        overlayRef: overlayRef.current,\n        defaultOption: _getOption(value),\n        optionRefs,\n        optionContainerRef,\n    });\n\n    const _getLabel = (value?: TOption[KeyName]): string | ReactNode => {\n        const option = _getOption(value);\n\n        if (renderLabel) {\n            return renderLabel(option);\n        }\n\n        return option?.[labelName] || value || '';\n    };\n\n    const _renderOptions = (options?: TSelectOptionKey<TOption>[]): ReactElement | JSX.Element[] | null => {\n        if (!options) return null;\n        return options.map((option, index) => {\n            const isGroup = option.options;\n\n            if (isGroup) {\n                return _renderGroup(option.name, option.options);\n            }\n\n            return _renderOption({ option: option as TOption, key: index });\n        });\n    };\n\n    const _renderGroup = (name: string, options?: TSelectOptionKey<TOption>[]) => {\n        return (\n            <>\n                <div className=\"rs-select--suggest-list-item --group-title\">\n                    <Text type={TextType.Small} color={Color.DarkGrey}>\n                        {name}\n                    </Text>\n                </div>\n                {_renderOptions(options)}\n            </>\n        );\n    };\n\n    const _renderOption = ({ option, key }: { option: TOption; key: any }) => {\n        const isSelected = option[keyName] === value;\n        const isSelecting = option[keyName] === selectingItem?.[keyName];\n\n        return (\n            <div\n                ref={(ref) => (optionRefs.current[option[keyName]] = ref)}\n                key={key}\n                className={classNames('rs-select--suggest-list-item', { '--selected': isSelected || isSelecting })}\n                onClick={() => _onSelected(option[keyName])}\n                onMouseEnter={() => {\n                    onItemMouseEnter(option);\n                }}\n                onMouseLeave={() => onItemMouseLeave()}\n                onMouseMove={() => onItemMouseMove()}\n            >\n                <Text type={TextType.Small} className=\"rs-select--suggest-list-option-name\">\n                    {renderOption ? renderOption(option) : labelName ? option[labelName] : ''}\n                </Text>\n                {isSelected && (\n                    <span className=\"rs-select--suggest-list-option-icon\">\n                        <Icon icon={IconType.Check} />\n                    </span>\n                )}\n            </div>\n        );\n    };\n\n    const native = width && width < MOBILE_BREAKPOINT && nativeOnMobile;\n\n    return (\n        <>\n            {(native || !target) && (\n                <span className={classNames('be-select', className)} onClick={() => _setIsOpen(true)} ref={targetRef}>\n                    {native ? (\n                        <select value={value} onChange={(e) => onChange?.(e.target.value as TOption[KeyName])}>\n                            {options.map((item) => {\n                                //@ts-ignore TODO: This needs to support opt groups\n                                return <option value={value} key={item[keyName]} label={_getLabel(item[keyName])}></option>;\n                            })}\n                        </select>\n                    ) : (\n                        _getLabel(value)\n                    )}\n                    <Icon icon={IconType.Dropdown} color={Color.DarkGrey} />\n                </span>\n            )}\n            {!native && (\n                <Overlay\n                    offset={offset}\n                    usePortal={overlay?.usePortal ?? true}\n                    followElement={target || targetRef.current || undefined}\n                    placement={overlay?.placement ?? 'bottom-start'}\n                    strategy={overlay?.strategy}\n                    open={open === undefined ? _open : open}\n                    onClose={_onClose}\n                    containerClassName={overlay?.containerClassName}\n                    overlayRef={overlayRef}\n                >\n                    <div ref={optionContainerRef} className={classNames('rs-select--suggest-list', overlay?.className)}>\n                        {_renderOptions(options)}\n                    </div>\n                </Overlay>\n            )}\n        </>\n    );\n};\n\nexport const Select = forwardRef(InnerSelect) as <TOption extends Option<KeyName>, KeyName extends string>(\n    p: Select<TOption, KeyName> & { ref?: Ref<HTMLDivElement> }\n) => JSX.Element;\n\nexport interface IDefaultSelectOption {\n    value: string;\n    text: string;\n}\n"]}

package/dist/src/components/generic/Tabs/TabContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { EventKey } from 'components/generic/Tabs/Tabs';
+import { EventKey } from '../../../../components/generic/Tabs/Tabs';
 interface TabContextProps {
     activeKey: EventKey;
     lastIndex: number;

package/dist/src/components/generic/Tabs/TabContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabContext.js","sourceRoot":"/","sources":["src/components/generic/Tabs/TabContext.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,iCAA4C;AAU5C,MAAM,UAAU,GAAG,KAAK,CAAC,aAAa,CAAkB;IACpD,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,CAAC;IACZ,YAAY,EAAE,CAAC;IACf,QAAQ,EAAE,GAAG,EAAE;QACX,EAAE;IACN,CAAC;CACJ,CAAC,CAAC;AAmCoB,6BAAO;AA3B9B,MAAM,kBAAkB,GAAsC,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,EAAE,EAAE,EAAE;IACvG,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAW,EAAE,CAAC,CAAC;IACzD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAS,CAAC,CAAC,CAAC;IACtD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAS,CAAC,CAAC,CAAC;IAE5D,MAAM,SAAS,GAAG;QACd,SAAS;QACT,SAAS;QACT,YAAY;QACZ,QAAQ,EAAE,CAAC,MAAgB,EAAE,KAAa,EAAE,EAAE;YAC1C,+CAA+C;YAC/C,uGAAuG;YACvG,kCAAkC;YAClC,QAAQ,CAAC,MAAM,CAAC,CAAC;YACjB,YAAY,CAAC,YAAY,CAAC,CAAC;YAC3B,eAAe,CAAC,KAAK,CAAC,CAAC;YACvB,YAAY,CAAC,MAAM,CAAC,CAAC;QACzB,CAAC;KACJ,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,YAAY,CAAC,gBAAgB,CAAC,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,oBAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,IAAG,QAAQ,CAAuB,CAAC;AACnF,CAAC,CAAC;AAE8B,gDAAkB","sourcesContent":["import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { EventKey } from 'components/generic/Tabs/Tabs';\n\ninterface TabContextProps {\n    activeKey: EventKey;\n    lastIndex: number;\n    currentIndex: number;\n    onChange: (newKey: EventKey, index: number) => void;\n}\n\nconst TabContext = React.createContext<TabContextProps>({\n    activeKey: '',\n    lastIndex: 0,\n    currentIndex: 0,\n    onChange: () => {\n        //\n    },\n});\n\ninterface TabContextProviderProps {\n    children: any;\n    defaultActiveKey: EventKey;\n    onChange: (key: EventKey) => void;\n}\n\nconst TabContextProvider: React.FC<TabContextProviderProps> = ({ children, defaultActiveKey, onChange }) => {\n    const [activeKey, setActiveKey] = useState<EventKey>('');\n    const [lastIndex, setLastIndex] = useState<number>(0);\n    const [currentIndex, setCurrentIndex] = useState<number>(0);\n\n    const tabValues = {\n        activeKey,\n        lastIndex,\n        currentIndex,\n        onChange: (newKey: EventKey, index: number) => {\n            // TODO: Add checks for Tab state being \"Dirty\"\n            // This means if you're in the middle of editing a form, and you press back / forward, we don't want to\n            // yank the user out of their flow\n            onChange(newKey);\n            setLastIndex(currentIndex);\n            setCurrentIndex(index);\n            setActiveKey(newKey);\n        },\n    };\n\n    useEffect(() => {\n        setActiveKey(defaultActiveKey);\n    }, []);\n\n    return <TabContext.Provider value={tabValues}>{children}</TabContext.Provider>;\n};\n\nexport { TabContext as default, TabContextProvider };\n"]}
+{"version":3,"file":"TabContext.js","sourceRoot":"/","sources":["src/components/generic/Tabs/TabContext.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,iCAA4C;AAU5C,MAAM,UAAU,GAAG,KAAK,CAAC,aAAa,CAAkB;IACpD,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,CAAC;IACZ,YAAY,EAAE,CAAC;IACf,QAAQ,EAAE,GAAG,EAAE;QACX,EAAE;IACN,CAAC;CACJ,CAAC,CAAC;AAmCoB,6BAAO;AA3B9B,MAAM,kBAAkB,GAAsC,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,EAAE,EAAE,EAAE;IACvG,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAW,EAAE,CAAC,CAAC;IACzD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAS,CAAC,CAAC,CAAC;IACtD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAS,CAAC,CAAC,CAAC;IAE5D,MAAM,SAAS,GAAG;QACd,SAAS;QACT,SAAS;QACT,YAAY;QACZ,QAAQ,EAAE,CAAC,MAAgB,EAAE,KAAa,EAAE,EAAE;YAC1C,+CAA+C;YAC/C,uGAAuG;YACvG,kCAAkC;YAClC,QAAQ,CAAC,MAAM,CAAC,CAAC;YACjB,YAAY,CAAC,YAAY,CAAC,CAAC;YAC3B,eAAe,CAAC,KAAK,CAAC,CAAC;YACvB,YAAY,CAAC,MAAM,CAAC,CAAC;QACzB,CAAC;KACJ,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,YAAY,CAAC,gBAAgB,CAAC,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,oBAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,IAAG,QAAQ,CAAuB,CAAC;AACnF,CAAC,CAAC;AAE8B,gDAAkB","sourcesContent":["import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { EventKey } from '@/components/generic/Tabs/Tabs';\n\ninterface TabContextProps {\n    activeKey: EventKey;\n    lastIndex: number;\n    currentIndex: number;\n    onChange: (newKey: EventKey, index: number) => void;\n}\n\nconst TabContext = React.createContext<TabContextProps>({\n    activeKey: '',\n    lastIndex: 0,\n    currentIndex: 0,\n    onChange: () => {\n        //\n    },\n});\n\ninterface TabContextProviderProps {\n    children: any;\n    defaultActiveKey: EventKey;\n    onChange: (key: EventKey) => void;\n}\n\nconst TabContextProvider: React.FC<TabContextProviderProps> = ({ children, defaultActiveKey, onChange }) => {\n    const [activeKey, setActiveKey] = useState<EventKey>('');\n    const [lastIndex, setLastIndex] = useState<number>(0);\n    const [currentIndex, setCurrentIndex] = useState<number>(0);\n\n    const tabValues = {\n        activeKey,\n        lastIndex,\n        currentIndex,\n        onChange: (newKey: EventKey, index: number) => {\n            // TODO: Add checks for Tab state being \"Dirty\"\n            // This means if you're in the middle of editing a form, and you press back / forward, we don't want to\n            // yank the user out of their flow\n            onChange(newKey);\n            setLastIndex(currentIndex);\n            setCurrentIndex(index);\n            setActiveKey(newKey);\n        },\n    };\n\n    useEffect(() => {\n        setActiveKey(defaultActiveKey);\n    }, []);\n\n    return <TabContext.Provider value={tabValues}>{children}</TabContext.Provider>;\n};\n\nexport { TabContext as default, TabContextProvider };\n"]}

package/dist/src/components/generic/Tabs/TabLink.js

@@ -29,11 +29,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabLink = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const TabContext_1 = __importDefault(require("components/generic/Tabs/TabContext"));
+const TabContext_1 = __importDefault(require("../../../../components/generic/Tabs/TabContext"));
 const react_router_dom_1 = require("react-router-dom");
 const react_1 = require("react");
-const Text_1 = __importDefault(require("components/generic/Text"));
-const Color_1 = require("util/Color");
+const Text_1 = __importDefault(require("../../../../components/generic/Text"));
+const Color_1 = require("../../../../util/Color");
 const TabLink = (props) => {
     const tabContext = (0, react_1.useContext)(TabContext_1.default);
     const { title, navPath, disabled, index } = props;

package/dist/src/components/generic/Tabs/TabLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLink.js","sourceRoot":"/","sources":["src/components/generic/Tabs/TabLink.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,4DAA4B;AAC5B,oFAA4D;AAC5D,uDAA2C;AAC3C,iCAAmC;AACnC,mEAA2C;AAC3C,sCAAmC;AAE5B,MAAM,OAAO,GAAG,CAAC,KAAU,EAAE,EAAE;IAClC,MAAM,UAAU,GAAG,IAAA,kBAAU,EAAC,oBAAU,CAAC,CAAC;IAE1C,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAElD,IAAI,CAAC,KAAK,EAAE;QACR,OAAO,IAAI,CAAC;KACf;IAED,OAAO,CACH;QACI,oBAAC,0BAAO,IACJ,EAAE,EAAE,OAAO,EACX,eAAe,EAAC,QAAQ,EACxB,SAAS,EAAE,IAAA,oBAAE,EAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,CAAC,EAC1C,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACX,IAAI,QAAQ,EAAE;oBACV,CAAC,CAAC,cAAc,EAAE,CAAC;iBACtB;qBAAM;oBACH,UAAU,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;iBACvC;YACL,CAAC;YAED,8BAAM,SAAS,EAAE,IAAA,oBAAE,EAAC,YAAY,CAAC;gBAC7B,oBAAC,cAAI,IAAC,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE,IAAI,UAC5B,KAAK,CACH,CACJ,CACD,CACT,CACR,CAAC;AACN,CAAC,CAAC;AA/BW,QAAA,OAAO,WA+BlB","sourcesContent":["import * as React from 'react';\nimport cx from 'classnames';\nimport TabContext from 'components/generic/Tabs/TabContext';\nimport { NavLink } from 'react-router-dom';\nimport { useContext } from 'react';\nimport Text from 'components/generic/Text';\nimport { Color } from 'util/Color';\n\nexport const TabLink = (props: any) => {\n    const tabContext = useContext(TabContext);\n\n    const { title, navPath, disabled, index } = props;\n\n    if (!title) {\n        return null;\n    }\n\n    return (\n        <li>\n            <NavLink\n                to={navPath}\n                activeClassName=\"active\"\n                className={cx('c-nav-item ', { disabled })}\n                onClick={(e) => {\n                    if (disabled) {\n                        e.preventDefault();\n                    } else {\n                        tabContext.onChange(navPath, index);\n                    }\n                }}\n            >\n                <span className={cx('c-nav-link')}>\n                    <Text color={Color.DarkGrey} bold>\n                        {title}\n                    </Text>\n                </span>\n            </NavLink>\n        </li>\n    );\n};\n"]}
+{"version":3,"file":"TabLink.js","sourceRoot":"/","sources":["src/components/generic/Tabs/TabLink.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,4DAA4B;AAC5B,sFAA8D;AAC9D,uDAA2C;AAC3C,iCAAmC;AACnC,qEAA6C;AAC7C,wCAAqC;AAE9B,MAAM,OAAO,GAAG,CAAC,KAAU,EAAE,EAAE;IAClC,MAAM,UAAU,GAAG,IAAA,kBAAU,EAAC,oBAAU,CAAC,CAAC;IAE1C,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAElD,IAAI,CAAC,KAAK,EAAE;QACR,OAAO,IAAI,CAAC;KACf;IAED,OAAO,CACH;QACI,oBAAC,0BAAO,IACJ,EAAE,EAAE,OAAO,EACX,eAAe,EAAC,QAAQ,EACxB,SAAS,EAAE,IAAA,oBAAE,EAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,CAAC,EAC1C,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACX,IAAI,QAAQ,EAAE;oBACV,CAAC,CAAC,cAAc,EAAE,CAAC;iBACtB;qBAAM;oBACH,UAAU,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;iBACvC;YACL,CAAC;YAED,8BAAM,SAAS,EAAE,IAAA,oBAAE,EAAC,YAAY,CAAC;gBAC7B,oBAAC,cAAI,IAAC,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE,IAAI,UAC5B,KAAK,CACH,CACJ,CACD,CACT,CACR,CAAC;AACN,CAAC,CAAC;AA/BW,QAAA,OAAO,WA+BlB","sourcesContent":["import * as React from 'react';\nimport cx from 'classnames';\nimport TabContext from '@/components/generic/Tabs/TabContext';\nimport { NavLink } from 'react-router-dom';\nimport { useContext } from 'react';\nimport Text from '@/components/generic/Text';\nimport { Color } from '@/util/Color';\n\nexport const TabLink = (props: any) => {\n    const tabContext = useContext(TabContext);\n\n    const { title, navPath, disabled, index } = props;\n\n    if (!title) {\n        return null;\n    }\n\n    return (\n        <li>\n            <NavLink\n                to={navPath}\n                activeClassName=\"active\"\n                className={cx('c-nav-item ', { disabled })}\n                onClick={(e) => {\n                    if (disabled) {\n                        e.preventDefault();\n                    } else {\n                        tabContext.onChange(navPath, index);\n                    }\n                }}\n            >\n                <span className={cx('c-nav-link')}>\n                    <Text color={Color.DarkGrey} bold>\n                        {title}\n                    </Text>\n                </span>\n            </NavLink>\n        </li>\n    );\n};\n"]}

package/dist/src/components/generic/Tabs/TabRouteContainer.js

@@ -31,8 +31,8 @@ const web_1 = require("@react-spring/web");
 const React = __importStar(require("react"));
 const react_1 = require("react");
 const react_router_1 = require("react-router");
-const ElementChildren_1 = require("components/generic/Tabs/ElementChildren");
-const TabContext_1 = __importDefault(require("components/generic/Tabs/TabContext"));
+const ElementChildren_1 = require("../../../../components/generic/Tabs/ElementChildren");
+const TabContext_1 = __importDefault(require("../../../../components/generic/Tabs/TabContext"));
 function TabRouteContainer({ children }) {
     const tabContext = (0, react_1.useContext)(TabContext_1.default);
     const transitions = (0, web_1.useTransition)(tabContext.activeKey, {

package/dist/src/components/generic/Tabs/TabRouteContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabRouteContainer.js","sourceRoot":"/","sources":["src/components/generic/Tabs/TabRouteContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA4D;AAC5D,6CAA+B;AAC/B,iCAA8C;AAC9C,+CAAuD;AACvD,6EAAmE;AACnE,oFAA4D;AAM5D,SAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAA0B;IAClE,MAAM,UAAU,GAAG,IAAA,kBAAU,EAAC,oBAAU,CAAC,CAAC;IAE1C,MAAM,WAAW,GAAG,IAAA,mBAAa,EAAC,UAAU,CAAC,SAAS,EAAE;QACpD,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE;QAC1C,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE;QACxC,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE;QAC3C,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE;QAC3C,MAAM,EAAE;YACJ,QAAQ,EAAE,EAAE;SACf;KACJ,CAAC,CAAC;IAEH,OAAO,CACH,6BAAK,SAAS,EAAC,WAAW,IACrB,WAAW,CAAC,CAAC,KAAK,EAAE,EAAE;QACnB,OAAO,CACH,oBAAC,cAAQ,CAAC,GAAG,IAAC,KAAK,kBAAI,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,IAAM,KAAa;YACvD,oBAAC,qBAAM;gBACF,IAAA,0BAAQ,EAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAC3B,oBAAC,oBAAK,IAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,IAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAS,CACnE,CAAC;gBAEF,oBAAC,oBAAK,IAAC,IAAI,EAAC,GAAG;oBACX,oBAAC,uBAAQ,IAAC,EAAE,EAAG,QAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,GAAI,CAC7D,CACH,CACE,CAClB,CAAC;IACN,CAAC,CAAC,CACA,CACT,CAAC;AACN,CAAC;AAhCD,8CAgCC","sourcesContent":["import { animated, useTransition } from '@react-spring/web';\nimport * as React from 'react';\nimport { ReactNode, useContext } from 'react';\nimport { Switch, Route, Redirect } from 'react-router';\nimport { reactMap } from 'components/generic/Tabs/ElementChildren';\nimport TabContext from 'components/generic/Tabs/TabContext';\n\ninterface TabRouteContainerProps {\n    children: ReactNode[];\n}\n\nexport function TabRouteContainer({ children }: TabRouteContainerProps) {\n    const tabContext = useContext(TabContext);\n\n    const transitions = useTransition(tabContext.activeKey, {\n        from: { opacity: 0, position: 'absolute' },\n        to: { opacity: 1, position: 'relative' },\n        enter: { opacity: 1, position: 'absolute' },\n        leave: { opacity: 0, position: 'absolute' },\n        config: {\n            friction: 25,\n        },\n    });\n\n    return (\n        <div className=\"u-pos-rel\">\n            {transitions((props) => {\n                return (\n                    <animated.div style={{ left: 0, right: 0, ...(props as any) }}>\n                        <Switch>\n                            {reactMap(children, (child) => (\n                                <Route path={child.props.navPath}>{child.props.children}</Route>\n                            ))}\n                            {/* Adding a redirect if no route is matched */}\n                            <Route path=\"*\">\n                                <Redirect to={(children as any)[0].props.navPath} push={false} />\n                            </Route>\n                        </Switch>\n                    </animated.div>\n                );\n            })}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"TabRouteContainer.js","sourceRoot":"/","sources":["src/components/generic/Tabs/TabRouteContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA4D;AAC5D,6CAA+B;AAC/B,iCAA8C;AAC9C,+CAAuD;AACvD,+EAAqE;AACrE,sFAA8D;AAM9D,SAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAA0B;IAClE,MAAM,UAAU,GAAG,IAAA,kBAAU,EAAC,oBAAU,CAAC,CAAC;IAE1C,MAAM,WAAW,GAAG,IAAA,mBAAa,EAAC,UAAU,CAAC,SAAS,EAAE;QACpD,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE;QAC1C,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE;QACxC,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE;QAC3C,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE;QAC3C,MAAM,EAAE;YACJ,QAAQ,EAAE,EAAE;SACf;KACJ,CAAC,CAAC;IAEH,OAAO,CACH,6BAAK,SAAS,EAAC,WAAW,IACrB,WAAW,CAAC,CAAC,KAAK,EAAE,EAAE;QACnB,OAAO,CACH,oBAAC,cAAQ,CAAC,GAAG,IAAC,KAAK,kBAAI,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,IAAM,KAAa;YACvD,oBAAC,qBAAM;gBACF,IAAA,0BAAQ,EAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAC3B,oBAAC,oBAAK,IAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,IAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAS,CACnE,CAAC;gBAEF,oBAAC,oBAAK,IAAC,IAAI,EAAC,GAAG;oBACX,oBAAC,uBAAQ,IAAC,EAAE,EAAG,QAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,GAAI,CAC7D,CACH,CACE,CAClB,CAAC;IACN,CAAC,CAAC,CACA,CACT,CAAC;AACN,CAAC;AAhCD,8CAgCC","sourcesContent":["import { animated, useTransition } from '@react-spring/web';\nimport * as React from 'react';\nimport { ReactNode, useContext } from 'react';\nimport { Switch, Route, Redirect } from 'react-router';\nimport { reactMap } from '@/components/generic/Tabs/ElementChildren';\nimport TabContext from '@/components/generic/Tabs/TabContext';\n\ninterface TabRouteContainerProps {\n    children: ReactNode[];\n}\n\nexport function TabRouteContainer({ children }: TabRouteContainerProps) {\n    const tabContext = useContext(TabContext);\n\n    const transitions = useTransition(tabContext.activeKey, {\n        from: { opacity: 0, position: 'absolute' },\n        to: { opacity: 1, position: 'relative' },\n        enter: { opacity: 1, position: 'absolute' },\n        leave: { opacity: 0, position: 'absolute' },\n        config: {\n            friction: 25,\n        },\n    });\n\n    return (\n        <div className=\"u-pos-rel\">\n            {transitions((props) => {\n                return (\n                    <animated.div style={{ left: 0, right: 0, ...(props as any) }}>\n                        <Switch>\n                            {reactMap(children, (child) => (\n                                <Route path={child.props.navPath}>{child.props.children}</Route>\n                            ))}\n                            {/* Adding a redirect if no route is matched */}\n                            <Route path=\"*\">\n                                <Redirect to={(children as any)[0].props.navPath} push={false} />\n                            </Route>\n                        </Switch>\n                    </animated.div>\n                );\n            })}\n        </div>\n    );\n}\n"]}

package/dist/src/components/generic/Tabs/Tabs.js

@@ -29,11 +29,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const uncontrollable_1 = require("uncontrollable");
 const react_1 = require("swiper/react");
-const LineBreak_1 = __importDefault(require("components/generic/LineBreak"));
-const ElementChildren_1 = require("components/generic/Tabs/ElementChildren");
-const TabContext_1 = require("components/generic/Tabs/TabContext");
-const TabLink_1 = require("components/generic/Tabs/TabLink");
-const TabRouteContainer_1 = require("components/generic/Tabs/TabRouteContainer");
+const LineBreak_1 = __importDefault(require("../../../../components/generic/LineBreak"));
+const ElementChildren_1 = require("../../../../components/generic/Tabs/ElementChildren");
+const TabContext_1 = require("../../../../components/generic/Tabs/TabContext");
+const TabLink_1 = require("../../../../components/generic/Tabs/TabLink");
+const TabRouteContainer_1 = require("../../../../components/generic/Tabs/TabRouteContainer");
 const tabs_module_scss_1 = __importDefault(require("./tabs.module.scss"));
 const getDefaultActiveKey = (children) => {
     let defaultActiveKey;