@roomstay/frontend 2.5.6 → 2.5.8-0

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

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sourceRoot":"/","sources":["src/components/generic/Overlay/Overlay.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useBodyClick } from '@frontend/hooks';\nimport { Placement, PositioningStrategy } from '@popperjs/core';\nimport classNames from 'classnames';\nimport React, { LegacyRef, ReactNode, useEffect, useLayoutEffect, useState } from 'react';\nimport { Modifier, usePopper } from 'react-popper';\n\nimport FadeAnimation from '@/animations/Fade';\nimport { RoomstayPortal } from '@/components/generic/Portal/Portal';\n\nimport styles from './Overlay.module.scss';\n\nexport type OverlayProps = {\n    children: ReactNode | ReactNode[];\n    open: boolean;\n\n    usePortal?: boolean;\n    container?: HTMLElement | null;\n\n    followElement?: Element | null;\n    className?: string;\n    containerClassName?: string;\n\n    hideStyles?: boolean;\n\n    placement?: Placement;\n    fallbackPlacements?: Placement;\n    strategy?: PositioningStrategy;\n\n    onClose?: (e: Event) => void;\n    offset?: [number, number];\n    overlayRef?: LegacyRef<HTMLDivElement>;\n    preventScroll?: boolean;\n    isAboveNav?: boolean;\n};\n\nexport const Overlay = (props: OverlayProps) => {\n    const [referenceElement, setReferenceElement] = useState<Element | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);\n\n    const [isOpen, setIsOpen] = useState(props.open);\n\n    const { onBodyClickExcept } = useBodyClick();\n\n    // Used to prevent premature closing of window before it gets a chance to open\n    useEffect(() => {\n        let timeout: NodeJS.Timeout;\n        let cancelled = false;\n\n        if (props.open) {\n            setIsOpen(props.open);\n        } else {\n            // Allow for fade out animation to run before removing element\n            timeout = setTimeout(() => {\n                if (!cancelled) {\n                    setIsOpen(false);\n                }\n            }, 500);\n        }\n\n        return () => {\n            cancelled = true;\n            clearTimeout(timeout);\n        };\n    }, [props.open]);\n\n    useLayoutEffect(() => {\n        const { remove } = onBodyClickExcept((e: Event) => {\n            if (isOpen) {\n                e.preventDefault();\n                e.stopPropagation();\n                props.onClose?.(e);\n            }\n        }, popperElement as HTMLDivElement);\n\n        return () => {\n            remove();\n        };\n    }, [isOpen, popperElement]);\n\n    useEffect(() => {\n        if (props.strategy === 'fixed' && props.open && props.preventScroll) {\n            document.body.style.setProperty('overflow', 'hidden');\n        }\n        return () => {\n            if (props.strategy === 'fixed' && props.open && props.preventScroll) {\n                document.body.style.removeProperty('overflow');\n            }\n        };\n    }, [props.open, props.preventScroll, props.strategy]);\n\n    const modifiers: Modifier<any>[] = [\n        {\n            name: 'flip',\n            options: {\n                flipVariations: false,\n                fallbackPlacements: props.fallbackPlacements,\n            },\n        },\n        {\n            name: 'preventOverflow',\n            enabled: true,\n            options: {\n                altAxis: false,\n                altBoundary: false,\n                tether: false,\n                rootBoundary: 'body',\n                padding: 8,\n            },\n        },\n    ];\n    if (props.offset) {\n        modifiers.push({\n            name: 'offset',\n            options: {\n                offset: props.offset,\n            },\n        });\n    }\n\n    const { styles: popperStyles, attributes } = usePopper(props.followElement ?? referenceElement, popperElement, {\n        placement: props.placement ?? 'bottom',\n        strategy: props.strategy ?? 'absolute',\n        modifiers,\n    });\n\n    const overlayClasses = classNames(props.className, {\n        [styles['rs-overlay']]: !props.hideStyles,\n    });\n\n    const overlayElement = (\n        // Here we depend on the props.open as that's the \"intended\" state. Fade animation will handle it going in and out.\n\n        <>\n            {!props.followElement && <span ref={setReferenceElement}></span>}\n\n            <div\n                ref={setPopperElement}\n                style={popperStyles.popper}\n                {...attributes.popper}\n                className={classNames(styles['rs-popper-container'], props.containerClassName, { [styles['--above-nav']]: props.isAboveNav })}\n            >\n                <FadeAnimation open={props.open}>\n                    <div ref={props.overlayRef} className={overlayClasses}>\n                        {props.children}\n                    </div>\n                </FadeAnimation>\n            </div>\n        </>\n    );\n\n    if (!isOpen) {\n        return <></>;\n    }\n\n    if (props.usePortal || props.container) {\n        // PreventZIndex is only enabled if container is not specified, since modal will be appended to body, Roomstay engine by default will overlay it\n        return (\n            <RoomstayPortal target={props.container || document.body} preventZIndex={!!props.container}>\n                {overlayElement}\n            </RoomstayPortal>\n        );\n    }\n\n    return overlayElement;\n};\n"]}
+{"version":3,"file":"Overlay.js","sourceRoot":"/","sources":["src/components/generic/Overlay/Overlay.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useBodyClick } from '@frontend/hooks';\nimport { Placement, PositioningStrategy } from '@popperjs/core';\nimport classNames from 'classnames';\nimport React, { LegacyRef, ReactNode, useEffect, useLayoutEffect, useState } from 'react';\nimport { Modifier, usePopper } from 'react-popper';\n\nimport FadeAnimation from '@/animations/Fade';\nimport { RoomstayPortal } from '@/components/generic/Portal/Portal';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\n\nimport styles from './Overlay.module.scss';\n\nexport type OverlayProps = {\n    children: ReactNode | ReactNode[];\n    open: boolean;\n\n    usePortal?: boolean;\n    container?: HTMLElement | null;\n\n    followElement?: Element | null;\n    className?: string;\n    containerClassName?: string;\n\n    hideStyles?: boolean;\n\n    placement?: Placement;\n    fallbackPlacements?: Placement;\n    strategy?: PositioningStrategy;\n\n    onClose?: (e: Event) => void;\n    offset?: [number, number];\n    overlayRef?: LegacyRef<HTMLDivElement>;\n    preventScroll?: boolean;\n    isAboveNav?: boolean;\n};\n\nexport const Overlay = (props: OverlayProps) => {\n    const [referenceElement, setReferenceElement] = useState<Element | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);\n\n    const [isOpen, setIsOpen] = useState(props.open);\n\n    const { onBodyClickExcept } = useBodyClick();\n\n    // Used to prevent premature closing of window before it gets a chance to open\n    useEffect(() => {\n        let timeout: NodeJS.Timeout;\n        let cancelled = false;\n\n        if (props.open) {\n            setIsOpen(props.open);\n        } else {\n            // Allow for fade out animation to run before removing element\n            timeout = setTimeout(() => {\n                if (!cancelled) {\n                    setIsOpen(false);\n                }\n            }, 500);\n        }\n\n        return () => {\n            cancelled = true;\n            clearTimeout(timeout);\n        };\n    }, [props.open]);\n\n    useLayoutEffect(() => {\n        const { remove } = onBodyClickExcept((e: Event) => {\n            if (isOpen) {\n                e.preventDefault();\n                e.stopPropagation();\n                props.onClose?.(e);\n            }\n        }, popperElement as HTMLDivElement);\n\n        return () => {\n            remove();\n        };\n    }, [isOpen, popperElement]);\n\n    useEffect(() => {\n        if (props.strategy === 'fixed' && props.open && props.preventScroll) {\n            document.body.style.setProperty('overflow', 'hidden');\n        }\n        return () => {\n            if (props.strategy === 'fixed' && props.open && props.preventScroll) {\n                document.body.style.removeProperty('overflow');\n            }\n        };\n    }, [props.open, props.preventScroll, props.strategy]);\n\n    const modifiers: Modifier<any>[] = [\n        {\n            name: 'flip',\n            options: {\n                flipVariations: false,\n                fallbackPlacements: props.fallbackPlacements,\n            },\n        },\n        {\n            name: 'preventOverflow',\n            enabled: true,\n            options: {\n                altAxis: false,\n                altBoundary: false,\n                tether: false,\n                rootBoundary: 'body',\n                padding: 8,\n            },\n        },\n    ];\n    if (props.offset) {\n        modifiers.push({\n            name: 'offset',\n            options: {\n                offset: props.offset,\n            },\n        });\n    }\n\n    const { styles: popperStyles, attributes } = usePopper(props.followElement ?? referenceElement, popperElement, {\n        placement: props.placement ?? 'bottom',\n        strategy: props.strategy ?? 'absolute',\n        modifiers,\n    });\n\n    const overlayClasses = classNames(props.className, {\n        [styles['rs-overlay']]: !props.hideStyles,\n    });\n\n    const overlayElement = (\n        // Here we depend on the props.open as that's the \"intended\" state. Fade animation will handle it going in and out.\n\n        <>\n            {!props.followElement && <span ref={setReferenceElement}></span>}\n\n            <div\n                ref={setPopperElement}\n                style={popperStyles.popper}\n                {...attributes.popper}\n                className={classNames(styles['rs-popper-container'], props.containerClassName, { [styles['--above-nav']]: props.isAboveNav })}\n            >\n                <FadeAnimation open={props.open}>\n                    <div ref={props.overlayRef} className={overlayClasses}>\n                        {props.children}\n                    </div>\n                </FadeAnimation>\n            </div>\n        </>\n    );\n\n    if (!isOpen) {\n        return <></>;\n    }\n\n    if (props.usePortal || props.container) {\n        // PreventZIndex is only enabled if container is not specified, since modal will be appended to body, Roomstay engine by default will overlay it\n        return (\n            <RoomstayPortal target={props.container || RoomstayThemeEngine.EngineContainer} preventZIndex={!!props.container}>\n                {overlayElement}\n            </RoomstayPortal>\n        );\n    }\n\n    return overlayElement;\n};\n"]}

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

@@ -1,5 +1,6 @@
+import React from 'react';
 import { IRoomstayMemberCardFormInput } from '../../../models/RoomstayMembers/IRoomstayMemberCard';
 export interface PaymentCardProps {
     card: IRoomstayMemberCardFormInput;
 }
-export declare const PaymentCard: ({ card }: PaymentCardProps) => JSX.Element;
+export declare const PaymentCard: ({ card }: PaymentCardProps) => React.JSX.Element;

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

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { IconType } from './Icon/Icon';
+import { IconProps, IconType } from './Icon/Icon';
 export declare enum PillVariant {
     Outlined = "--outlined"
 }
@@ -17,9 +17,8 @@ export interface PillProps extends PropsWithChildren<any> {
     size?: 'medium' | 'small';
     iconPosition?: 'left' | 'right';
     type?: PillType;
-    onClickIcon?: () => void | null;
+    onClickIcon?: IconProps['onClick'];
     variant?: PillVariant;
     className?: string;
-    [x: string]: React.ReactNode;
 }
-export default function Pill(props: PillProps): JSX.Element;
+export default function Pill(props: PillProps): React.JSX.Element;

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,4DAAoC;AACpC,kDAAiD;AAEjD,0EAAgE;AAEhE,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,8BAAC,cAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAgB,EAAE,OAAO,EAAE,KAAK,CAAC,WAAW,GAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;IAE9H,OAAO,CACH,wCAAM,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 classNames from 'classnames';\nimport React, { PropsWithChildren } from 'react';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\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} /> : 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,4DAAoC;AACpC,kDAAiD;AAEjD,0EAA2E;AAE3E,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;AAYD,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,8BAAC,cAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAgB,EAAE,OAAO,EAAE,KAAK,CAAC,WAAW,GAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;IAE9H,OAAO,CACH,wCAAM,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 classNames from 'classnames';\nimport React, { PropsWithChildren } from 'react';\n\nimport Icon, { IconProps, IconType } from '@/components/generic/Icon/Icon';\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    onClickIcon?: IconProps['onClick'];\n    variant?: PillVariant;\n    className?: string;\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} /> : 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/Placeholder.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 type StringScreenSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface PlaceholderProps {
     type: 'text' | 'circle' | 'block';
@@ -9,5 +10,5 @@ export interface PlaceholderProps {
     rounded?: 'md' | 'lg';
     noMarg?: boolean;
 }
-export default function Placeholder(props: PlaceholderProps): JSX.Element;
+export default function Placeholder(props: PlaceholderProps): React.JSX.Element;
 export {};

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

@@ -32,6 +32,7 @@ const web_1 = require("@planpay/web");
 const react_1 = __importStar(require("react"));
 const PlanPayPricePreviewFeature_1 = __importDefault(require("../../../providers/feature/PlanPayPricePreviewFeature"));
 const Debounce_1 = require("../../../util/Debounce");
+const Planpay_1 = __importDefault(require("../../../hooks/Planpay"));
 let priceWidgetInitialised = false;
 const initialisePriceWidget = () => {
     if (priceWidgetInitialised)
@@ -49,9 +50,12 @@ const debounceReload = (0, Debounce_1.debounce)(() => {
 const PlanpayPrice = ({ price, checkin, currency }) => {
     var _a;
     const { hotel } = (0, hooks_1.useCurrentHotel)();
+    const { hasPlanpay } = (0, Planpay_1.default)();
     (0, react_1.useEffect)(() => {
-        initialisePriceWidget();
-    }, []);
+        if (hasPlanpay) {
+            initialisePriceWidget();
+        }
+    }, [hasPlanpay]);
     (0, react_1.useEffect)(() => {
         debounceReload();
     }, [price, currency, checkin]);

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

@@ -1 +1 @@
-{"version":3,"file":"PlanpayPrice.js","sourceRoot":"/","sources":["src/components/generic/PlanpayPrice/PlanpayPrice.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAAkD;AAClD,sCAAuC;AACvC,+CAAgE;AAEhE,gHAAwF;AACxF,8CAA2C;AAE3C,IAAI,sBAAsB,GAAG,KAAK,CAAC;AACnC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IAC/B,IAAI,sBAAsB;QAAE,OAAO;IAEnC,aAAO,CAAC,IAAI,CAAC;QACT,kCAAkC;QAClC,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,KAAK;KACnB,CAAC,CAAC;IAEH,sBAAsB,GAAG,IAAI,CAAC;AAClC,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,IAAA,mBAAQ,EAAC,GAAG,EAAE;IACjC,aAAO,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;AACrC,CAAC,EAAE,GAAG,CAAC,CAAC;AAQD,MAAM,YAAY,GAA0B,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE;;IAChF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IAEpC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,qBAAqB,EAAE,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,cAAc,EAAE,CAAC;IACrB,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAE/B,IAAI,CAAC,oCAA0B,CAAC,QAAQ,EAAE;QAAE,OAAO,IAAI,CAAC;IAExD,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAA;QAAE,OAAO,IAAI,CAAC;IAEjC,OAAO,CACH,uCACI,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE,4BAC7E,eAAe,6BACb,KAAK,gCACF,QAAQ,kCACN,OAAO,mCACP,GAAG,wCACE,GAAG,8BACZ,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,QAAQ,uBAChC,SAAS,0BACN,MAAM,GAC7B,CACL,CAAC;AACN,CAAC,CAAC;AA7BW,QAAA,YAAY,gBA6BvB","sourcesContent":["import { useCurrentHotel } from '@frontend/hooks';\nimport { planpay } from '@planpay/web';\nimport React, { FC, PropsWithChildren, useEffect } from 'react';\n\nimport PlanPayPricePreviewFeature from '@/providers/feature/PlanPayPricePreviewFeature';\nimport { debounce } from '@/util/Debounce';\n\nlet priceWidgetInitialised = false;\nconst initialisePriceWidget = () => {\n    if (priceWidgetInitialised) return;\n\n    planpay.init({\n        // environment: hotel.planpay.env,\n        environment: 'prod',\n        showDebug: false,\n    });\n\n    priceWidgetInitialised = true;\n};\n\nconst debounceReload = debounce(() => {\n    planpay.pricePreview.refresh({});\n}, 150);\n\nexport interface PlanpayPriceProps extends PropsWithChildren<any> {\n    price: number;\n    checkin: string;\n    currency: string;\n}\n\nexport const PlanpayPrice: FC<PlanpayPriceProps> = ({ price, checkin, currency }) => {\n    const { hotel } = useCurrentHotel();\n\n    useEffect(() => {\n        initialisePriceWidget();\n    }, []);\n\n    useEffect(() => {\n        debounceReload();\n    }, [price, currency, checkin]);\n\n    if (!PlanPayPricePreviewFeature.isActive()) return null;\n\n    if (!hotel?.planpay) return null;\n\n    return (\n        <div\n            style={{ whiteSpace: 'nowrap', marginRight: -16, marginTop: -10, marginBottom: -8, marginLeft: -12 }}\n            data-planpay-data-type=\"price-preview\"\n            data-planpay-total-cost={price}\n            data-planpay-currency-code={currency}\n            data-planpay-redemption-date={checkin}\n            data-planpay-payment-deadline=\"0\"\n            data-planpay-total-minimum-deposit=\"0\"\n            data-planpay-merchant-id={hotel?.planpay?.username}\n            data-planpay-size=\"x-small\"\n            data-planpay-variant=\"text\"\n        />\n    );\n};\n"]}
+{"version":3,"file":"PlanpayPrice.js","sourceRoot":"/","sources":["src/components/generic/PlanpayPrice/PlanpayPrice.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAAkD;AAClD,sCAAuC;AACvC,+CAAgE;AAEhE,gHAAwF;AACxF,8CAA2C;AAE3C,qEAAgD;AAEhD,IAAI,sBAAsB,GAAG,KAAK,CAAC;AACnC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IAC/B,IAAI,sBAAsB;QAAE,OAAO;IAEnC,aAAO,CAAC,IAAI,CAAC;QACT,kCAAkC;QAClC,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,KAAK;KACnB,CAAC,CAAC;IAEH,sBAAsB,GAAG,IAAI,CAAC;AAClC,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,IAAA,mBAAQ,EAAC,GAAG,EAAE;IACjC,aAAO,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;AACrC,CAAC,EAAE,GAAG,CAAC,CAAC;AAQD,MAAM,YAAY,GAA0B,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE;;IAChF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IACpC,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,iBAAU,GAAE,CAAC;IAEpC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,UAAU,EAAE;YACZ,qBAAqB,EAAE,CAAC;SAC3B;IACL,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,cAAc,EAAE,CAAC;IACrB,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAE/B,IAAI,CAAC,oCAA0B,CAAC,QAAQ,EAAE;QAAE,OAAO,IAAI,CAAC;IAExD,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAA;QAAE,OAAO,IAAI,CAAC;IAEjC,OAAO,CACH,uCACI,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE,4BAC7E,eAAe,6BACb,KAAK,gCACF,QAAQ,kCACN,OAAO,mCACP,GAAG,wCACE,GAAG,8BACZ,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,QAAQ,uBAChC,SAAS,0BACN,MAAM,GAC7B,CACL,CAAC;AACN,CAAC,CAAC;AAhCW,QAAA,YAAY,gBAgCvB","sourcesContent":["import { useCurrentHotel } from '@frontend/hooks';\nimport { planpay } from '@planpay/web';\nimport React, { FC, PropsWithChildren, useEffect } from 'react';\n\nimport PlanPayPricePreviewFeature from '@/providers/feature/PlanPayPricePreviewFeature';\nimport { debounce } from '@/util/Debounce';\n\nimport usePlanpay from '../../../hooks/Planpay';\n\nlet priceWidgetInitialised = false;\nconst initialisePriceWidget = () => {\n    if (priceWidgetInitialised) return;\n\n    planpay.init({\n        // environment: hotel.planpay.env,\n        environment: 'prod',\n        showDebug: false,\n    });\n\n    priceWidgetInitialised = true;\n};\n\nconst debounceReload = debounce(() => {\n    planpay.pricePreview.refresh({});\n}, 150);\n\nexport interface PlanpayPriceProps extends PropsWithChildren<any> {\n    price: number;\n    checkin: string;\n    currency: string;\n}\n\nexport const PlanpayPrice: FC<PlanpayPriceProps> = ({ price, checkin, currency }) => {\n    const { hotel } = useCurrentHotel();\n    const { hasPlanpay } = usePlanpay();\n\n    useEffect(() => {\n        if (hasPlanpay) {\n            initialisePriceWidget();\n        }\n    }, [hasPlanpay]);\n\n    useEffect(() => {\n        debounceReload();\n    }, [price, currency, checkin]);\n\n    if (!PlanPayPricePreviewFeature.isActive()) return null;\n\n    if (!hotel?.planpay) return null;\n\n    return (\n        <div\n            style={{ whiteSpace: 'nowrap', marginRight: -16, marginTop: -10, marginBottom: -8, marginLeft: -12 }}\n            data-planpay-data-type=\"price-preview\"\n            data-planpay-total-cost={price}\n            data-planpay-currency-code={currency}\n            data-planpay-redemption-date={checkin}\n            data-planpay-payment-deadline=\"0\"\n            data-planpay-total-minimum-deposit=\"0\"\n            data-planpay-merchant-id={hotel?.planpay?.username}\n            data-planpay-size=\"x-small\"\n            data-planpay-variant=\"text\"\n        />\n    );\n};\n"]}

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

@@ -1,3 +1,4 @@
+import React from 'react';
 interface PromoCodeInputProps {
     value: string;
     onChange: (code: string) => void;
@@ -7,5 +8,5 @@ interface PromoCodeInputProps {
     variant?: 'outlined' | 'text';
     hideValidText?: boolean;
 }
-export default function PromoCodeInput(props: PromoCodeInputProps): JSX.Element;
+export default function PromoCodeInput(props: PromoCodeInputProps): React.JSX.Element;
 export {};

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

@@ -1,8 +1,9 @@
+import React from 'react';
 import BasketRow from '../../models/BasketRow';
 export interface RecentSearchesCardProps {
     basketRow: BasketRow;
     onViewRatesClicked: () => void;
     onRemove: () => void;
 }
-declare const RecentSearchesCard: ({ basketRow, onRemove, onViewRatesClicked }: RecentSearchesCardProps) => JSX.Element;
+declare const RecentSearchesCard: ({ basketRow, onRemove, onViewRatesClicked }: RecentSearchesCardProps) => React.JSX.Element;
 export default RecentSearchesCard;

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

@@ -1 +1,2 @@
-export declare const RoomstayMark: () => JSX.Element;
+import React from 'react';
+export declare const RoomstayMark: () => React.JSX.Element;

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

@@ -1,4 +1,4 @@
-import './Select.global.scss';
+import './Select.engine.scss';
 import React, { ReactElement, Ref } from 'react';
 import { OverlayProps } from '../Overlay/Overlay';
 import { Color } from '../../../util/Color';
@@ -31,7 +31,7 @@ export type SelectProps<TOption extends Option<KeyName>, KeyName extends string>
     inputLabelColor?: Color;
     disableNative?: boolean;
 };
-export declare const InnerSelect: <TOption extends Option<KeyName>, KeyName extends string>({ target, open, onClose, options, value, onChange, keyName, labelName, className, offset, renderOption, nativeOnMobile, overlay, renderLabel, hideExpandIcon, inputLabelColor, disableNative, }: SelectProps<TOption, KeyName>, ref: Ref<HTMLDivElement | null>) => JSX.Element;
+export declare const InnerSelect: <TOption extends Option<KeyName>, KeyName extends string>({ target, open, onClose, options, value, onChange, keyName, labelName, className, offset, renderOption, nativeOnMobile, overlay, renderLabel, hideExpandIcon, inputLabelColor, disableNative, }: SelectProps<TOption, KeyName>, ref: Ref<HTMLDivElement | null>) => React.JSX.Element;
 export declare const Select: <TOption extends Option<KeyName>, KeyName extends string>(p: SelectProps<TOption, KeyName> & {
     ref?: React.Ref<HTMLDivElement> | undefined;
 }) => JSX.Element;

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

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = exports.InnerSelect = void 0;
-require("./Select.global.scss");
+require("./Select.engine.scss");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const Overlay_1 = require("../Overlay/Overlay");

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 './Select.global.scss';\n\nimport classNames from 'classnames';\nimport React, { forwardRef, ReactElement, ReactNode, Ref, useImperativeHandle, useMemo, useRef } from 'react';\n\nimport { Overlay, OverlayProps } from '@/components/generic/Overlay/Overlay';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { useCombinedState } from '@/hooks/CombineState';\nimport { useKeyboardControlOnSelect } from '@/hooks/KeyboardControlOnSelect';\nimport { useWindowSize } from '@/hooks/WindowSize';\nimport { Color } from '@/util/Color';\n\nimport Icon, { IconType } from '../Icon/Icon';\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\nexport type SelectProps<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 | null;\n    open?: boolean;\n    onClose?: (e: Event) => 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    hideExpandIcon?: boolean;\n\n    inputLabelColor?: Color;\n    disableNative?: boolean;\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        hideExpandIcon,\n        inputLabelColor,\n        disableNative,\n    }: SelectProps<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    const flattenOptions = useMemo<TOption[]>(() => {\n        return options.reduce<TOption[]>((result, optionGroupProbably) => {\n            if (optionGroupProbably.options) return result.concat(optionGroupProbably.options);\n            return result.concat(optionGroupProbably as TOption);\n        }, []);\n    }, [options]);\n\n    // TODO: Force to fix later\n    nativeOnMobile = false;\n\n    const _onClose = (e: Event): void => {\n        _setIsOpen(false);\n        onClose?.(e);\n    };\n\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(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 _getStringLabel = (value?: TOption[KeyName]): string => {\n        const option = _getOption(value);\n        return option?.[labelName] || value || '';\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 _getStringLabel(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    const labelProps: any = {};\n\n    if (inputLabelColor) {\n        labelProps.style = { color: inputLabelColor };\n    }\n\n    return (\n        <>\n            {(native || !target || disableNative) && (\n                <span className={classNames('be-select', className)} onClick={() => _setIsOpen(true)} ref={targetRef} {...labelProps}>\n                    {native ? (\n                        <select value={value} onChange={(e) => onChange?.(e.target.value as TOption[KeyName])}>\n                            {flattenOptions.map((item) => {\n                                return <option value={value} key={item[keyName]} label={_getStringLabel(item[keyName])}></option>;\n                            })}\n                        </select>\n                    ) : (\n                        _getLabel(value)\n                    )}\n                    {hideExpandIcon ? null : <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                    hideStyles={overlay?.hideStyles}\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: SelectProps<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 './Select.engine.scss';\n\nimport classNames from 'classnames';\nimport React, { forwardRef, ReactElement, ReactNode, Ref, useImperativeHandle, useMemo, useRef } from 'react';\n\nimport { Overlay, OverlayProps } from '@/components/generic/Overlay/Overlay';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { useCombinedState } from '@/hooks/CombineState';\nimport { useKeyboardControlOnSelect } from '@/hooks/KeyboardControlOnSelect';\nimport { useWindowSize } from '@/hooks/WindowSize';\nimport { Color } from '@/util/Color';\n\nimport Icon, { IconType } from '../Icon/Icon';\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\nexport type SelectProps<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 | null;\n    open?: boolean;\n    onClose?: (e: Event) => 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    hideExpandIcon?: boolean;\n\n    inputLabelColor?: Color;\n    disableNative?: boolean;\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        hideExpandIcon,\n        inputLabelColor,\n        disableNative,\n    }: SelectProps<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    const flattenOptions = useMemo<TOption[]>(() => {\n        return options.reduce<TOption[]>((result, optionGroupProbably) => {\n            if (optionGroupProbably.options) return result.concat(optionGroupProbably.options);\n            return result.concat(optionGroupProbably as TOption);\n        }, []);\n    }, [options]);\n\n    // TODO: Force to fix later\n    nativeOnMobile = false;\n\n    const _onClose = (e: Event): void => {\n        _setIsOpen(false);\n        onClose?.(e);\n    };\n\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(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 _getStringLabel = (value?: TOption[KeyName]): string => {\n        const option = _getOption(value);\n        return option?.[labelName] || value || '';\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 _getStringLabel(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    const labelProps: any = {};\n\n    if (inputLabelColor) {\n        labelProps.style = { color: inputLabelColor };\n    }\n\n    return (\n        <>\n            {(native || !target || disableNative) && (\n                <span className={classNames('be-select', className)} onClick={() => _setIsOpen(true)} ref={targetRef} {...labelProps}>\n                    {native ? (\n                        <select value={value} onChange={(e) => onChange?.(e.target.value as TOption[KeyName])}>\n                            {flattenOptions.map((item) => {\n                                return <option value={value} key={item[keyName]} label={_getStringLabel(item[keyName])}></option>;\n                            })}\n                        </select>\n                    ) : (\n                        _getLabel(value)\n                    )}\n                    {hideExpandIcon ? null : <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                    hideStyles={overlay?.hideStyles}\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: SelectProps<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/Slider/Slider.d.ts

@@ -18,5 +18,5 @@ type SliderProps = {
  * Specifically a ranged slider, specifically for the Filter section of the Step Room display.
  * @param props
  */
-export declare const Slider: (props: SliderProps) => JSX.Element;
+export declare const Slider: (props: SliderProps) => React.JSX.Element;
 export {};

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

@@ -1,10 +1,10 @@
-import React from 'react';
-export interface TabProps {
+import React, { PropsWithChildren } from 'react';
+export type TabProps = PropsWithChildren<{
     title: React.ReactNode;
     navPath: string;
     disabled?: boolean;
     tabClassName?: string;
     preventScrollTop?: boolean;
     tabAttrs?: Record<string, any>;
-}
+}>;
 export declare const Tab: React.FC<TabProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"/","sources":["src/components/generic/Tabs/Tab.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAWnB,MAAM,GAAG,GAAuB,GAAG,EAAE;IACxC,MAAM,IAAI,KAAK,CACX,mDAAmD;QAC/C,2FAA2F;QAC3F,mEAAmE,CAC1E,CAAC;IACF,mCAAmC;IACnC,OAAO,6DAAK,CAAC;AACjB,CAAC,CAAC;AARW,QAAA,GAAG,OAQd","sourcesContent":["import React from 'react';\n\nexport interface TabProps {\n    title: React.ReactNode;\n    navPath: string;\n    disabled?: boolean;\n    tabClassName?: string;\n    preventScrollTop?: boolean;\n    tabAttrs?: Record<string, any>;\n}\n\nexport const Tab: React.FC<TabProps> = () => {\n    throw new Error(\n        'The `Tab` component is not meant to be rendered! ' +\n            \"It's an abstract component that is only valid as a direct Child of the `Tabs` Component. \" +\n            'For custom tabs components use TabPane and TabsContainer directly'\n    );\n    // Needed otherwise docs error out.\n    return <></>;\n};\n"]}
+{"version":3,"file":"Tab.js","sourceRoot":"/","sources":["src/components/generic/Tabs/Tab.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAiD;AAW1C,MAAM,GAAG,GAAuB,GAAG,EAAE;IACxC,MAAM,IAAI,KAAK,CACX,mDAAmD;QAC/C,2FAA2F;QAC3F,mEAAmE,CAC1E,CAAC;IACF,mCAAmC;IACnC,OAAO,6DAAK,CAAC;AACjB,CAAC,CAAC;AARW,QAAA,GAAG,OAQd","sourcesContent":["import React, { PropsWithChildren } from 'react';\n\nexport type TabProps = PropsWithChildren<{\n    title: React.ReactNode;\n    navPath: string;\n    disabled?: boolean;\n    tabClassName?: string;\n    preventScrollTop?: boolean;\n    tabAttrs?: Record<string, any>;\n}>;\n\nexport const Tab: React.FC<TabProps> = () => {\n    throw new Error(\n        'The `Tab` component is not meant to be rendered! ' +\n            \"It's an abstract component that is only valid as a direct Child of the `Tabs` Component. \" +\n            'For custom tabs components use TabPane and TabsContainer directly'\n    );\n    // Needed otherwise docs error out.\n    return <></>;\n};\n"]}

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

@@ -1 +1,2 @@
-export declare const TabLink: (props: any) => JSX.Element | null;
+import React from 'react';
+export declare const TabLink: (props: any) => React.JSX.Element | null;

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

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 interface TabRouteContainerProps {
     children: ReactNode[];
 }
-export declare function TabRouteContainer({ children }: TabRouteContainerProps): JSX.Element;
+export declare function TabRouteContainer({ children }: TabRouteContainerProps): React.JSX.Element;
 export {};

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

@@ -11,7 +11,6 @@ export declare enum TextTransform {
     Uppercase = "u-uppercase"
 }
 export interface TextProps extends PropsWithChildren<any> {
-    [x: string]: React.ReactNode;
     type?: TextType;
     color?: Color;
     align?: TextAlign;
@@ -23,5 +22,5 @@ export interface TextProps extends PropsWithChildren<any> {
     style?: React.CSSProperties;
     lineThrough?: boolean;
 }
-export declare const Text: React.ForwardRefExoticComponent<Pick<TextProps, keyof TextProps> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 export default Text;

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

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"/","sources":["src/components/generic/Text.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4DAAoC;AACpC,+CAA6D;AAK7D,IAAY,QAKX;AALD,WAAY,QAAQ;IAChB,yBAAa,CAAA;IACb,2BAAe,CAAA;IACf,+BAAmB,CAAA;IACnB,2BAAe,CAAA;AACnB,CAAC,EALW,QAAQ,GAAR,gBAAQ,KAAR,gBAAQ,QAKnB;AAED,yCAAyC;AACzC,IAAY,aAEX;AAFD,WAAY,aAAa;IACrB,0CAAyB,CAAA;AAC7B,CAAC,EAFW,aAAa,GAAb,qBAAa,KAAb,qBAAa,QAExB;AAgBY,QAAA,IAAI,GAAG,IAAA,kBAAU,EAAkC,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG;IACpF,MAAM,YAAY,mBACd,IAAI,EAAE,QAAQ,CAAC,IAAI,IAChB,KAAK,CACX,CAAC;IAEF,MAAM,gBAAgB,GAAQ,EAAE,CAAC;IAEjC,IAAI,KAAK,CAAC,UAAU,EAAE;QAClB,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,gBAAgB,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;KACjF;IAED,MAAM,YAAY,GAAQ,EAAE,CAAC;IAE7B,IAAI,KAAK,CAAC,SAAS,EAAE;QACjB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;KACzE;IAED,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,KAAK,CAAC,KAAK,gCAClC,CAAC,QAAQ,YAAY,CAAC,IAAI,EAAE,CAAC,EAAE,YAAY,CAAC,IAAI,EAChD,eAAe,EAAE,KAAK,CAAC,MAAM,EAC7B,aAAa,EAAE,KAAK,CAAC,IAAI,EACzB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,gBAAgB,EAAE,KAAK,CAAC,WAAW,IAChC,YAAY,GACZ,gBAAgB,EACrB,CAAC;IAEH,MAAM,MAAM,qBACL,CAAC,YAAY,CAAC,KAAK,IAAI,EAAE,CAAC,CAChC,CAAC;IAEF,IAAI,YAAY,CAAC,KAAK,EAAE;QACpB,MAAM,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;KACrC;IAED,OAAO,CACH,qCAAG,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,IACzC,KAAK,CAAC,QAAQ,CACf,CACP,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,kBAAe,YAAI,CAAC","sourcesContent":["import classNames from 'classnames';\nimport React, { forwardRef, PropsWithChildren } from 'react';\n\nimport { Color } from '@/util/Color';\nimport { TextAlign } from '@/util/TextAlignment';\n\nexport enum TextType {\n    Body = 'body',\n    Small = 'small',\n    Caption = 'caption',\n    Label = 'label',\n}\n\n// Refactor to globalize for Headings too\nexport enum TextTransform {\n    Uppercase = 'u-uppercase',\n}\n\nexport interface TextProps extends PropsWithChildren<any> {\n    [x: string]: React.ReactNode;\n    type?: TextType;\n    color?: Color;\n    align?: TextAlign;\n    transforms?: TextTransform[];\n    className?: string;\n    inline?: boolean;\n    bold?: boolean;\n    preformatted?: boolean;\n    style?: React.CSSProperties;\n    lineThrough?: boolean;\n}\n\nexport const Text = forwardRef<HTMLParagraphElement, TextProps>(function Text(props, ref) {\n    const defaultProps: TextProps = {\n        type: TextType.Body,\n        ...props,\n    };\n\n    const transformClasses: any = {};\n\n    if (props.transforms) {\n        props.transforms.forEach((transform) => (transformClasses[transform] = true));\n    }\n\n    const extraClasses: any = {};\n\n    if (props.className) {\n        props.className.split(' ').forEach((it) => (extraClasses[it] = true));\n    }\n\n    const classes = classNames(props.align, {\n        [`text-${defaultProps.type}`]: defaultProps.type,\n        'u-inline-flex': props.inline,\n        'u-text-bold': props.bold,\n        'u-pre-wrap': props.preformatted,\n        'u-line-through': props.lineThrough,\n        ...extraClasses,\n        ...transformClasses,\n    });\n\n    const styles: any = {\n        ...(defaultProps.style || {}),\n    };\n\n    if (defaultProps.color) {\n        styles.color = defaultProps.color;\n    }\n\n    return (\n        <p className={classes} style={styles} ref={ref}>\n            {props.children}\n        </p>\n    );\n});\n\nexport default Text;\n"]}
+{"version":3,"file":"Text.js","sourceRoot":"/","sources":["src/components/generic/Text.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4DAAoC;AACpC,+CAA6D;AAK7D,IAAY,QAKX;AALD,WAAY,QAAQ;IAChB,yBAAa,CAAA;IACb,2BAAe,CAAA;IACf,+BAAmB,CAAA;IACnB,2BAAe,CAAA;AACnB,CAAC,EALW,QAAQ,GAAR,gBAAQ,KAAR,gBAAQ,QAKnB;AAED,yCAAyC;AACzC,IAAY,aAEX;AAFD,WAAY,aAAa;IACrB,0CAAyB,CAAA;AAC7B,CAAC,EAFW,aAAa,GAAb,qBAAa,KAAb,qBAAa,QAExB;AAeY,QAAA,IAAI,GAAG,IAAA,kBAAU,EAAkC,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG;IACpF,MAAM,YAAY,mBACd,IAAI,EAAE,QAAQ,CAAC,IAAI,IAChB,KAAK,CACX,CAAC;IAEF,MAAM,gBAAgB,GAAQ,EAAE,CAAC;IAEjC,IAAI,KAAK,CAAC,UAAU,EAAE;QAClB,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,gBAAgB,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;KACjF;IAED,MAAM,YAAY,GAAQ,EAAE,CAAC;IAE7B,IAAI,KAAK,CAAC,SAAS,EAAE;QACjB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;KACzE;IAED,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,KAAK,CAAC,KAAK,gCAClC,CAAC,QAAQ,YAAY,CAAC,IAAI,EAAE,CAAC,EAAE,YAAY,CAAC,IAAI,EAChD,eAAe,EAAE,KAAK,CAAC,MAAM,EAC7B,aAAa,EAAE,KAAK,CAAC,IAAI,EACzB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,gBAAgB,EAAE,KAAK,CAAC,WAAW,IAChC,YAAY,GACZ,gBAAgB,EACrB,CAAC;IAEH,MAAM,MAAM,qBACL,CAAC,YAAY,CAAC,KAAK,IAAI,EAAE,CAAC,CAChC,CAAC;IAEF,IAAI,YAAY,CAAC,KAAK,EAAE;QACpB,MAAM,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;KACrC;IAED,OAAO,CACH,qCAAG,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,IACzC,KAAK,CAAC,QAAQ,CACf,CACP,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,kBAAe,YAAI,CAAC","sourcesContent":["import classNames from 'classnames';\nimport React, { forwardRef, PropsWithChildren } from 'react';\n\nimport { Color } from '@/util/Color';\nimport { TextAlign } from '@/util/TextAlignment';\n\nexport enum TextType {\n    Body = 'body',\n    Small = 'small',\n    Caption = 'caption',\n    Label = 'label',\n}\n\n// Refactor to globalize for Headings too\nexport enum TextTransform {\n    Uppercase = 'u-uppercase',\n}\n\nexport interface TextProps extends PropsWithChildren<any> {\n    type?: TextType;\n    color?: Color;\n    align?: TextAlign;\n    transforms?: TextTransform[];\n    className?: string;\n    inline?: boolean;\n    bold?: boolean;\n    preformatted?: boolean;\n    style?: React.CSSProperties;\n    lineThrough?: boolean;\n}\n\nexport const Text = forwardRef<HTMLParagraphElement, TextProps>(function Text(props, ref) {\n    const defaultProps: TextProps = {\n        type: TextType.Body,\n        ...props,\n    };\n\n    const transformClasses: any = {};\n\n    if (props.transforms) {\n        props.transforms.forEach((transform) => (transformClasses[transform] = true));\n    }\n\n    const extraClasses: any = {};\n\n    if (props.className) {\n        props.className.split(' ').forEach((it) => (extraClasses[it] = true));\n    }\n\n    const classes = classNames(props.align, {\n        [`text-${defaultProps.type}`]: defaultProps.type,\n        'u-inline-flex': props.inline,\n        'u-text-bold': props.bold,\n        'u-pre-wrap': props.preformatted,\n        'u-line-through': props.lineThrough,\n        ...extraClasses,\n        ...transformClasses,\n    });\n\n    const styles: any = {\n        ...(defaultProps.style || {}),\n    };\n\n    if (defaultProps.color) {\n        styles.color = defaultProps.color;\n    }\n\n    return (\n        <p className={classes} style={styles} ref={ref}>\n            {props.children}\n        </p>\n    );\n});\n\nexport default Text;\n"]}

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

@@ -4,5 +4,5 @@ export type TextAreaProps = JSX.IntrinsicElements['textarea'] & {
     required?: boolean;
     validationStatus?: 'error' | 'success';
 };
-declare const _default: React.ForwardRefExoticComponent<Pick<TextAreaProps, "label" | "key" | keyof React.TextareaHTMLAttributes<HTMLTextAreaElement> | "validationStatus"> & React.RefAttributes<HTMLTextAreaElement>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export default _default;

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

@@ -1,4 +1,4 @@
-import { ReactChild } from 'react';
+import React, { ReactChild } from 'react';
 export interface BETooltipProps {
     wrapperClasses?: string;
     followElement?: HTMLElement | null;
@@ -8,4 +8,4 @@ export interface BETooltipProps {
     disabled?: boolean;
     dark?: boolean;
 }
-export default function Tooltip(props: BETooltipProps): JSX.Element;
+export default function Tooltip(props: BETooltipProps): React.JSX.Element;

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

@@ -1 +1,2 @@
-export default function TravelerNotfound(): JSX.Element;
+import React from 'react';
+export default function TravelerNotfound(): React.JSX.Element;

package/dist/src/components/generic/badging/SSLSecureBadge.d.ts

@@ -1 +1,2 @@
-export default function SSLSecureBadge(): JSX.Element;
+import React from 'react';
+export default function SSLSecureBadge(): React.JSX.Element;

package/dist/src/components/generic/buttons/NextStepButton.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export interface NextStepButtonProps {
     text: string;
     disabled?: boolean;
@@ -6,4 +7,4 @@ export interface NextStepButtonProps {
     wideByDefault?: boolean;
     hideIcon?: boolean;
 }
-export default function NextStepButton(props: NextStepButtonProps): JSX.Element;
+export default function NextStepButton(props: NextStepButtonProps): React.JSX.Element;

package/dist/src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.d.ts

@@ -1,4 +1,4 @@
-import './EnhancedPhoneNumberField.global.scss';
+import './EnhancedPhoneNumberField.engine.scss';
 import React, { ChangeEvent, PropsWithChildren } from 'react';
 export interface EnhancedPhoneNumberField extends PropsWithChildren<any> {
     validationStatus?: 'success' | 'error';
@@ -7,5 +7,5 @@ export interface EnhancedPhoneNumberField extends PropsWithChildren<any> {
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     disabled?: boolean;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<EnhancedPhoneNumberField>, keyof EnhancedPhoneNumberField> & React.RefAttributes<HTMLInputElement>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<EnhancedPhoneNumberField>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/dist/src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-require("./EnhancedPhoneNumberField.global.scss");
+require("./EnhancedPhoneNumberField.engine.scss");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const react_i18next_1 = require("react-i18next");

package/dist/src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnhancedPhoneNumberField.js","sourceRoot":"/","sources":["src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAgD;AAEhD,4DAAoC;AACpC,+CAAwI;AACxI,iDAA+C;AAC/C,0DAAuD;AAEvD,uEAAgE;AAChE,iEAAiE;AACjE,4EAAiH;AAEjH,gDAA6C;AAU7C,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAEnC,MAAM,wBAAwB,GAAyE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAClH,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAChD,IAAA,2BAAmB,EAAmD,GAAG,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACnG,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,IAAA,wCAAoB,EAAC;QAC3G,GAAG,EAAE,QAAQ,CAAC,OAAO;QACrB,0BAA0B,EAAE,IAAI;KACnC,CAAC,CAAC;IAEH,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,kBAAkB,GAAkB,IAAA,eAAO,EAAC,GAAG,EAAE;QACnD,OAAO,gDAAuB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACzC,OAAO,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;QAC9G,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,gDAAuB,CAAC,CAAC,CAAC;IAE9B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAwB,IAAI,CAAC,CAAC;IAExE,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAE1D,MAAM,CAAC,eAAe,EAAE,cAAc,CAAC,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;;QACnD,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,sBAAsB,CAAC,mCAAI,EAAE,CAAC;QAEpE,IAAI,MAAM,EAAE;YACR,MAAM,eAAe,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,MAAM,KAAK,KAAK,CAAC,IAAI,kBAAkB,CAAC,CAAC,CAAC,CAAC;YAC1G,OAAO,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;SACpC;QAED,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,SAAS,GAAG,CAAC,GAAwB,EAAe,EAAE;QACxD,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,KAAK,GAAG,CAAgB,CAAC;IAC9E,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,MAAoB,EAAE,MAAe,EAAE,EAAE;;QACjE,IAAI,SAAS,GAAG,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,cAAc,CAAC;QAEzC,IAAI,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;YAC3B,SAAS,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;SACtC;QAED,MAAM,QAAQ,GAAG,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,mCAAI,eAAe,CAAC,KAAK,GAAG,sBAAsB,GAAG,SAAS,EAAE,CAAC;QAElG,IAAI,KAAK,IAAI,QAAQ,EAAE;YACnB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAS,CAAC,CAAC;SAC5D;IACL,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,CAAgC,EAAE,EAAE;QACxD,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAC7B,kBAAkB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,eAA4B,EAAE,EAAE;QACrD,cAAc,EAAE,CAAC;QACjB,kBAAkB,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;IACnD,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,IAAA,oBAAU,EAAC,yBAAyB,EAAE;QACvD,CAAC,KAAK,gBAAgB,EAAE,CAAC,EAAE,CAAC,CAAC,gBAAgB;QAC7C,WAAW,EAAE,SAAS;QACtB,YAAY,EAAE,KAAK,CAAC,QAAQ;KAC/B,CAAC,CAAC;IACH,MAAM,cAAc,GAAG,CAAC,OAAoB,EAAE,EAAE;QAC5C,eAAe,CAAC,OAAO,CAAC,CAAC;QACzB,OAAO;IACX,CAAC,CAAC;IAEF,OAAO,CACH,uCAAK,SAAS,EAAE,YAAY;QACxB,uCAAK,SAAS,EAAC,kCAAkC,EAAC,OAAO,EAAE,gBAAgB;YACvE,uCAAK,SAAS,EAAC,uCAAuC,IAAE,IAAA,iDAAwB,EAAC,eAAe,CAAC,IAAI,CAAC,CAAO;YAC7G,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,QAAQ,GAAI,CAC/B;QACN,uCAAK,SAAS,EAAC,iCAAiC;YAC5C,wCAAM,SAAS,EAAC,wCAAwC;;gBAAG,eAAe,CAAC,KAAK,CAAQ;YACxF,yCACI,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,GAAG,EAAE,QAAQ,EACb,WAAW,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,EACjE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,WAAW,EAAE,eAAe,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,IAAI,EAAE,EACpE,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,cAAc,GACvB;YAEF,uCAAK,SAAS,EAAC,wCAAwC,GAAO,CAC5D;QACN,uCAAK,SAAS,EAAC,iCAAiC,EAAC,GAAG,EAAE,YAAY,GAAQ;QAC1E,8BAAC,eAAM,IACH,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,gBAAgB,EACzB,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,kBAAkB,EAC3B,KAAK,EAAE,eAAe,CAAC,IAAI,EAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EACrD,SAAS,EAAC,MAAM,EAChB,OAAO,EAAC,MAAM,EACd,YAAY,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CACvB,uCAAK,SAAS,EAAC,+CAA+C;gBAC1D,uCAAK,SAAS,EAAC,oDAAoD,IAAE,IAAA,iDAAwB,EAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAc,CAAC,CAAO;gBAC7H,uCAAK,SAAS,EAAC,oDAAoD,IAC9D,OAAO,aAAP,OAAO;oBAAP,OAAO,CAAE,KAAK;;oBAAE;6BAAQ,OAAO,aAAP,OAAO;wBAAP,OAAO,CAAE,KAAK,CAAQ,CAC7C,CACJ,CACT,GACH,CACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAK,CAAC,UAAU,CAAsE,wBAAwB,CAAC,CAAC","sourcesContent":["import './EnhancedPhoneNumberField.global.scss';\n\nimport classNames from 'classnames';\nimport React, { ChangeEvent, ForwardRefRenderFunction, PropsWithChildren, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { useAutoFocusOnSelect } from '@/hooks/AutoFocusOnSelect';\nimport { convertCountryCodeToFlag, CountryType, ListOfCountriesAndCodes } from '@/models/CountryCodesAndNumbers';\n\nimport { Select } from '../../Select/Select';\n\nexport interface EnhancedPhoneNumberField extends PropsWithChildren<any> {\n    validationStatus?: 'success' | 'error';\n    name?: string;\n    value?: string;\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n    disabled?: boolean;\n}\n\nconst PHONE_AND_PREFIX_SPLIT = ' ';\n\nconst EnhancedPhoneNumberField: ForwardRefRenderFunction<HTMLInputElement, EnhancedPhoneNumberField> = (props, ref) => {\n    const innerRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => innerRef.current);\n    const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen, isFocused } = useAutoFocusOnSelect({\n        ref: innerRef.current,\n        onlyAutoOpenWhenInputEmpty: true,\n    });\n\n    const { t } = useTranslation();\n\n    const organizedCountries: CountryType[] = useMemo(() => {\n        return ListOfCountriesAndCodes.sort((a, b) => {\n            return `${(a.suggested ? '000' : '') + a.label}`.localeCompare(`${(b.suggested ? '000' : '') + b.label}`);\n        });\n    }, [ListOfCountriesAndCodes]);\n\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n    const { validationStatus, name, onChange, value } = props;\n\n    const [selectedCountry, subscriberCode] = useMemo(() => {\n        const [prefix, number] = value?.split(PHONE_AND_PREFIX_SPLIT) ?? [];\n\n        if (prefix) {\n            const selectedCountry = organizedCountries.find(({ phone }) => prefix === phone) || organizedCountries[0];\n            return [selectedCountry, number];\n        }\n\n        return [organizedCountries[0], ''];\n    }, [value]);\n\n    const getOption = (key: CountryType['code']): CountryType => {\n        return organizedCountries.find(({ code }) => code === key) as CountryType;\n    };\n\n    const raiseOnChangeEvent = (prefix?: CountryType, suffix?: string) => {\n        let newSuffix = suffix ?? subscriberCode;\n\n        if (newSuffix.startsWith('0')) {\n            newSuffix = newSuffix.substring(1);\n        }\n\n        const newValue = `${prefix?.phone ?? selectedCountry.phone}${PHONE_AND_PREFIX_SPLIT}${newSuffix}`;\n\n        if (value != newValue) {\n            onChange?.({ target: { name, value: newValue } } as any);\n        }\n    };\n\n    const onInputChanged = (e: ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value;\n        raiseOnChangeEvent(undefined, value);\n    };\n\n    const onPrefixChanged = (selectedCountry: CountryType) => {\n        onItemSelected();\n        raiseOnChangeEvent(selectedCountry, undefined);\n    };\n\n    const fieldClasses = classNames('rs-enhanced-phone-field', {\n        [`--${validationStatus}`]: !!validationStatus,\n        '--focused': isFocused,\n        '--disabled': props.disabled,\n    });\n    const onCountryClick = (country: CountryType) => {\n        onPrefixChanged(country);\n        return;\n    };\n\n    return (\n        <div className={fieldClasses}>\n            <div className=\"rs-enhanced-phone-field--country\" onClick={onTriggerClicked}>\n                <div className=\"rs-enhanced-phone-field--country-icon\">{convertCountryCodeToFlag(selectedCountry.code)}</div>\n                <Icon icon={IconType.Dropdown} />\n            </div>\n            <div className=\"rs-enhanced-phone-field--number\">\n                <span className=\"rs-enhanced-phone-field--number-prefix\">+{selectedCountry.phone}</span>\n                <input\n                    disabled={props.disabled}\n                    ref={innerRef}\n                    placeholder={t(Translation.Step.Confirmation.Inputs.Phone) + ' *'}\n                    type=\"number\"\n                    style={{ paddingLeft: selectedCountry.phone.length * 8 + 20 + 'px' }}\n                    onChange={onInputChanged}\n                    value={subscriberCode}\n                />\n\n                <div className=\"rs-enhanced-phone-field--number-status\"></div>\n            </div>\n            <div className=\"rs-enhanced-phone-field--anchor\" ref={setContainer}></div>\n            <Select<CountryType, 'code'>\n                open={isDropdownOpen}\n                onClose={onDropdownClosed}\n                target={container}\n                options={organizedCountries}\n                value={selectedCountry.code}\n                onChange={(value) => onCountryClick(getOption(value))}\n                labelName=\"code\"\n                keyName=\"code\"\n                renderOption={(country) => (\n                    <div className=\"rs-enhanced-phone-field--suggest-list-country\">\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-icon\">{convertCountryCodeToFlag(country?.code as string)}</div>\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-name\">\n                            {country?.label} <span>+{country?.phone}</span>\n                        </div>\n                    </div>\n                )}\n            />\n        </div>\n    );\n};\n\nexport default React.forwardRef<HTMLInputElement, React.PropsWithChildren<EnhancedPhoneNumberField>>(EnhancedPhoneNumberField);\n"]}
+{"version":3,"file":"EnhancedPhoneNumberField.js","sourceRoot":"/","sources":["src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.tsx"],"names":[],"mappings":"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","sourcesContent":["import './EnhancedPhoneNumberField.engine.scss';\n\nimport classNames from 'classnames';\nimport React, { ChangeEvent, ForwardRefRenderFunction, PropsWithChildren, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { useAutoFocusOnSelect } from '@/hooks/AutoFocusOnSelect';\nimport { convertCountryCodeToFlag, CountryType, ListOfCountriesAndCodes } from '@/models/CountryCodesAndNumbers';\n\nimport { Select } from '../../Select/Select';\n\nexport interface EnhancedPhoneNumberField extends PropsWithChildren<any> {\n    validationStatus?: 'success' | 'error';\n    name?: string;\n    value?: string;\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n    disabled?: boolean;\n}\n\nconst PHONE_AND_PREFIX_SPLIT = ' ';\n\nconst EnhancedPhoneNumberField: ForwardRefRenderFunction<HTMLInputElement, EnhancedPhoneNumberField> = (props, ref) => {\n    const innerRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => innerRef.current);\n    const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen, isFocused } = useAutoFocusOnSelect({\n        ref: innerRef.current,\n        onlyAutoOpenWhenInputEmpty: true,\n    });\n\n    const { t } = useTranslation();\n\n    const organizedCountries: CountryType[] = useMemo(() => {\n        return ListOfCountriesAndCodes.sort((a, b) => {\n            return `${(a.suggested ? '000' : '') + a.label}`.localeCompare(`${(b.suggested ? '000' : '') + b.label}`);\n        });\n    }, [ListOfCountriesAndCodes]);\n\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n    const { validationStatus, name, onChange, value } = props;\n\n    const [selectedCountry, subscriberCode] = useMemo(() => {\n        const [prefix, number] = value?.split(PHONE_AND_PREFIX_SPLIT) ?? [];\n\n        if (prefix) {\n            const selectedCountry = organizedCountries.find(({ phone }) => prefix === phone) || organizedCountries[0];\n            return [selectedCountry, number];\n        }\n\n        return [organizedCountries[0], ''];\n    }, [value]);\n\n    const getOption = (key: CountryType['code']): CountryType => {\n        return organizedCountries.find(({ code }) => code === key) as CountryType;\n    };\n\n    const raiseOnChangeEvent = (prefix?: CountryType, suffix?: string) => {\n        let newSuffix = suffix ?? subscriberCode;\n\n        if (newSuffix.startsWith('0')) {\n            newSuffix = newSuffix.substring(1);\n        }\n\n        const newValue = `${prefix?.phone ?? selectedCountry.phone}${PHONE_AND_PREFIX_SPLIT}${newSuffix}`;\n\n        if (value != newValue) {\n            onChange?.({ target: { name, value: newValue } } as any);\n        }\n    };\n\n    const onInputChanged = (e: ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value;\n        raiseOnChangeEvent(undefined, value);\n    };\n\n    const onPrefixChanged = (selectedCountry: CountryType) => {\n        onItemSelected();\n        raiseOnChangeEvent(selectedCountry, undefined);\n    };\n\n    const fieldClasses = classNames('rs-enhanced-phone-field', {\n        [`--${validationStatus}`]: !!validationStatus,\n        '--focused': isFocused,\n        '--disabled': props.disabled,\n    });\n    const onCountryClick = (country: CountryType) => {\n        onPrefixChanged(country);\n        return;\n    };\n\n    return (\n        <div className={fieldClasses}>\n            <div className=\"rs-enhanced-phone-field--country\" onClick={onTriggerClicked}>\n                <div className=\"rs-enhanced-phone-field--country-icon\">{convertCountryCodeToFlag(selectedCountry.code)}</div>\n                <Icon icon={IconType.Dropdown} />\n            </div>\n            <div className=\"rs-enhanced-phone-field--number\">\n                <span className=\"rs-enhanced-phone-field--number-prefix\">+{selectedCountry.phone}</span>\n                <input\n                    disabled={props.disabled}\n                    ref={innerRef}\n                    placeholder={t(Translation.Step.Confirmation.Inputs.Phone) + ' *'}\n                    type=\"number\"\n                    style={{ paddingLeft: selectedCountry.phone.length * 8 + 20 + 'px' }}\n                    onChange={onInputChanged}\n                    value={subscriberCode}\n                />\n\n                <div className=\"rs-enhanced-phone-field--number-status\"></div>\n            </div>\n            <div className=\"rs-enhanced-phone-field--anchor\" ref={setContainer}></div>\n            <Select<CountryType, 'code'>\n                open={isDropdownOpen}\n                onClose={onDropdownClosed}\n                target={container}\n                options={organizedCountries}\n                value={selectedCountry.code}\n                onChange={(value) => onCountryClick(getOption(value))}\n                labelName=\"code\"\n                keyName=\"code\"\n                renderOption={(country) => (\n                    <div className=\"rs-enhanced-phone-field--suggest-list-country\">\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-icon\">{convertCountryCodeToFlag(country?.code as string)}</div>\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-name\">\n                            {country?.label} <span>+{country?.phone}</span>\n                        </div>\n                    </div>\n                )}\n            />\n        </div>\n    );\n};\n\nexport default React.forwardRef<HTMLInputElement, React.PropsWithChildren<EnhancedPhoneNumberField>>(EnhancedPhoneNumberField);\n"]}

package/dist/src/components/generic/date/DatePicker.d.ts

@@ -1,4 +1,5 @@
 import dayjs from 'dayjs';
+import React from 'react';
 export interface DatePickerProps {
     showMonthOnLoad?: dayjs.Dayjs;
     selectedStartDate?: dayjs.Dayjs;
@@ -14,4 +15,4 @@ export interface DatePickerProps {
     onStartDateChanged?: (date: dayjs.Dayjs) => void;
     onEndDateChanged?: (date: dayjs.Dayjs) => void;
 }
-export default function DatePicker(props: DatePickerProps): JSX.Element;
+export default function DatePicker(props: DatePickerProps): React.JSX.Element;

package/dist/src/components/generic/date/DatePickerDay.d.ts

@@ -1,4 +1,5 @@
 import dayjs from 'dayjs';
+import React from 'react';
 interface DatePickerDayProps {
     text: any;
     day?: dayjs.Dayjs | any;
@@ -16,5 +17,5 @@ export declare enum DatePickerDayStatus {
     Loading = "--loading",
     Selected = "--selected"
 }
-export default function DatePickerDay(props: DatePickerDayProps): JSX.Element;
+export default function DatePickerDay(props: DatePickerDayProps): React.JSX.Element;
 export {};

package/dist/src/components/generic/date/DatePickerDays.d.ts

@@ -1,6 +1,7 @@
 import dayjs from 'dayjs';
+import React from 'react';
 interface DatePickerDaysProps {
     showingMonth: dayjs.Dayjs;
 }
-export default function DatePickerDays(props: DatePickerDaysProps): JSX.Element;
+export default function DatePickerDays(props: DatePickerDaysProps): React.JSX.Element;
 export {};

package/dist/src/components/generic/date/DatePickerMonth.d.ts

@@ -1,7 +1,8 @@
 import dayjs from 'dayjs';
+import React from 'react';
 interface DatePickerMonthProps {
     showingMonth: dayjs.Dayjs;
     small?: boolean;
 }
-export default function DatePickerMonth(props: DatePickerMonthProps): JSX.Element;
+export default function DatePickerMonth(props: DatePickerMonthProps): React.JSX.Element;
 export {};

package/dist/src/components/generic/date/DatePickerWeek.d.ts

@@ -1 +1,2 @@
-export default function DatePickerWeek(): JSX.Element;
+import React from 'react';
+export default function DatePickerWeek(): React.JSX.Element;

package/dist/src/components/generic/date/FloatingDatePicker.d.ts

@@ -8,4 +8,4 @@ export interface FloatingDatePickerProps {
     className?: string;
     isAboveNav?: boolean;
 }
-export default function FloatingDatePicker(props: FloatingDatePickerProps): JSX.Element;
+export default function FloatingDatePicker(props: FloatingDatePickerProps): React.JSX.Element;

package/dist/src/components/generic/date/WeekViewSkeleton.d.ts

@@ -1,2 +1,3 @@
-declare const WeekViewSkeleton: () => JSX.Element;
+import React from 'react';
+declare const WeekViewSkeleton: () => React.JSX.Element;
 export default WeekViewSkeleton;

package/dist/src/components/generic/loader/ImageLoader.d.ts

@@ -7,5 +7,5 @@ interface ImageLoaderProps {
     size?: ImageSize;
     style?: React.CSSProperties;
 }
-export default function ImageLoader(props: ImageLoaderProps): JSX.Element;
+export default function ImageLoader(props: ImageLoaderProps): React.JSX.Element;
 export {};

package/dist/src/components/generic/loader/LargeLoader.d.ts

@@ -1 +1,2 @@
-export default function LargeLoader(): JSX.Element;
+import React from 'react';
+export default function LargeLoader(): React.JSX.Element;

package/dist/src/components/generic/loader/OverlayLoader.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 type OverlayLoaderProps = {
     label?: string;
     isFullscreen?: boolean;
 };
-export declare const OverlayLoader: (props: OverlayLoaderProps) => JSX.Element;
+export declare const OverlayLoader: (props: OverlayLoaderProps) => React.JSX.Element;
 export {};

package/dist/src/components/generic/loader/SmallSpinner.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import { IconProps } from '../Icon/Icon';
-export default function SmallSpinner(props: Partial<IconProps>): JSX.Element;
+export default function SmallSpinner(props: Partial<IconProps>): React.JSX.Element;

package/dist/src/components/generic/map/HotelLocationMap.d.ts

@@ -1 +1,2 @@
-export default function HotelLocationMap(): JSX.Element;
+import React from 'react';
+export default function HotelLocationMap(): React.JSX.Element;