@roomstay/frontend 1.3.0

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertType = void 0;
+const React = require("react");
+const Icon_1 = require("./Icon");
+const classNames = require("classnames");
+var AlertType;
+(function (AlertType) {
+    AlertType["Alert"] = "--alert";
+    AlertType["Accent1"] = "--accent-1";
+    AlertType["Accent2"] = "--accent-2";
+    AlertType["Accent3"] = "--accent-3";
+    AlertType["Success"] = "--success";
+    AlertType["Danger"] = "--danger";
+    AlertType["LightGray"] = "--light-gray";
+})(AlertType = exports.AlertType || (exports.AlertType = {}));
+function Alert(props) {
+    const type = props.type ? props.type : AlertType.Success;
+    const classes = classNames('c-alert', {
+        [type]: true,
+        '--heavy-padding': props.heavyPadding,
+        '--icon-center': props.iconAlignCenter,
+        '--no-icon-margin': props.noIconMargin,
+        'u-marg-bottom--none': props.noMargin,
+    });
+    return (React.createElement("div", { className: classes },
+        props.icon && React.createElement(Icon_1.default, { icon: props.icon, size: "16px" }),
+        props.children));
+}
+exports.default = Alert;
+//# sourceMappingURL=Alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"/","sources":["src/components/generic/Alert.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAwC;AAGxC,yCAAyC;AAEzC,IAAY,SAQX;AARD,WAAY,SAAS;IACjB,8BAAiB,CAAA;IACjB,mCAAsB,CAAA;IACtB,mCAAsB,CAAA;IACtB,mCAAsB,CAAA;IACtB,kCAAqB,CAAA;IACrB,gCAAmB,CAAA;IACnB,uCAA0B,CAAA;AAC9B,CAAC,EARW,SAAS,GAAT,iBAAS,KAAT,iBAAS,QAQpB;AAcD,SAAwB,KAAK,CAAC,KAAiB;IAC3C,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC;IAEzD,MAAM,OAAO,GAAG,UAAU,CAAC,SAAS,EAAE;QAClC,CAAC,IAAI,CAAC,EAAE,IAAI;QACZ,iBAAiB,EAAE,KAAK,CAAC,YAAY;QACrC,eAAe,EAAE,KAAK,CAAC,eAAe;QACtC,kBAAkB,EAAE,KAAK,CAAC,YAAY;QACtC,qBAAqB,EAAE,KAAK,CAAC,QAAQ;KACxC,CAAC,CAAC;IAEH,OAAO,CACH,6BAAK,SAAS,EAAE,OAAO;QAClB,KAAK,CAAC,IAAI,IAAI,oBAAC,cAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAC,MAAM,GAAG;QACpD,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC;AAjBD,wBAiBC","sourcesContent":["import * as React from 'react';\nimport Icon, { IconType } from './Icon';\nimport { Color } from '../../util/Color';\nimport { ReactNode } from 'react';\nimport * as classNames from 'classnames';\n\nexport enum AlertType {\n    Alert = '--alert',\n    Accent1 = '--accent-1',\n    Accent2 = '--accent-2',\n    Accent3 = '--accent-3',\n    Success = '--success',\n    Danger = '--danger',\n    LightGray = '--light-gray',\n}\n\nexport interface AlertProps {\n    [x: string]: ReactNode;\n    type?: AlertType;\n    icon?: IconType;\n\n    heavyPadding?: boolean;\n    noMargin?: boolean;\n    noIconMargin?: boolean;\n\n    iconAlignCenter?: boolean;\n}\n\nexport default function Alert(props: AlertProps) {\n    const type = props.type ? props.type : AlertType.Success;\n\n    const classes = classNames('c-alert', {\n        [type]: true,\n        '--heavy-padding': props.heavyPadding,\n        '--icon-center': props.iconAlignCenter,\n        '--no-icon-margin': props.noIconMargin,\n        'u-marg-bottom--none': props.noMargin,\n    });\n\n    return (\n        <div className={classes}>\n            {props.icon && <Icon icon={props.icon} size=\"16px\" />}\n            {props.children}\n        </div>\n    );\n}\n"]}

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

@@ -0,0 +1,24 @@
+import { IconType } from './Icon';
+import * as React from 'react';
+import { Color } from '../../util/Color';
+export interface BEButtonProps {
+    [x: string]: React.ReactNode;
+    icon?: IconType;
+    iconPosition?: 'left' | 'right';
+    rounded?: boolean;
+    size?: 'large' | 'normal' | 'small' | 'tiny';
+    name?: string;
+    wide?: boolean;
+    filled?: boolean;
+    isText?: boolean;
+    isLoading?: boolean;
+    textColor?: Color;
+    disabled?: boolean;
+    primary?: boolean;
+    primaryActive?: boolean;
+    success?: boolean;
+    mobileWidth?: boolean;
+    stopIconAnimation?: boolean;
+    onClick?: () => void;
+}
+export default function BEButton(props: BEButtonProps): JSX.Element;

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

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Icon_1 = require("./Icon");
+const Icon_2 = require("./Icon");
+const React = require("react");
+const classNames = require("classnames");
+const core_1 = require("@material-ui/core");
+const Color_1 = require("../../util/Color");
+function BEButton(props) {
+    const defaultProps = Object.assign({ size: 'normal', disabled: false, iconPosition: 'left' }, props);
+    const classes = classNames({
+        '--wide': defaultProps.wide,
+        '--primary': defaultProps.primary,
+        '--primary-active': defaultProps.primaryActive,
+        '--rounded': defaultProps.rounded,
+        '--filled': defaultProps.filled && !defaultProps.backgroundColor,
+        '--success': defaultProps.filled,
+        '--loading': defaultProps.isLoading,
+        '--fill@m-': defaultProps.mobileWidth,
+        '--no-icon-animate': defaultProps.stopIconAnimation,
+        '--icon-right': defaultProps.iconPosition === 'right',
+        [`--${defaultProps.size}`]: defaultProps.size,
+        '--text': defaultProps.isText,
+    });
+    let icon = '';
+    if (defaultProps.icon) {
+        icon = React.createElement(Icon_2.default, { icon: defaultProps.icon, size: "1em" });
+    }
+    const extraProperties = {};
+    const styles = {};
+    if (props.disabled || props.isLoading) {
+        extraProperties.disabled = true;
+    }
+    if (props.textColor) {
+        styles.color = props.textColor;
+    }
+    if (props.onClick) {
+        extraProperties.onClick = () => {
+            if (!props.isLoading) {
+                props.onClick();
+            }
+        };
+    }
+    if (props.name) {
+        extraProperties.name = props.name;
+    }
+    let bgColor = {};
+    if (defaultProps.backgroundColor) {
+        bgColor = { backgroundColor: defaultProps.backgroundColor, borderColor: defaultProps.backgroundColor };
+    }
+    return (React.createElement(core_1.ButtonBase, Object.assign({ className: classes }, extraProperties, { style: Object.assign(Object.assign({}, styles), bgColor) }),
+        props.isLoading && (React.createElement("span", { className: "c-spin" },
+            React.createElement(Icon_2.default, { icon: Icon_1.IconType.Spinner, color: props.primary ? Color_1.Color.White : Color_1.Color.Accent }))),
+        React.createElement("span", null,
+            defaultProps.iconPosition === 'left' && icon,
+            props.children,
+            defaultProps.iconPosition === 'right' && icon)));
+}
+exports.default = BEButton;
+//# sourceMappingURL=BEButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BEButton.js","sourceRoot":"/","sources":["src/components/generic/BEButton.tsx"],"names":[],"mappings":";;AAAA,iCAAkC;AAClC,iCAA0B;AAC1B,+BAA+B;AAE/B,yCAAyC;AAEzC,4CAA+C;AAC/C,4CAAyC;AA4BzC,SAAwB,QAAQ,CAAC,KAAoB;IACjD,MAAM,YAAY,mBACd,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,KAAK,EACf,YAAY,EAAE,MAAM,IACjB,KAAK,CACX,CAAC;IAEF,MAAM,OAAO,GAAG,UAAU,CAAC;QACvB,QAAQ,EAAE,YAAY,CAAC,IAAI;QAC3B,WAAW,EAAE,YAAY,CAAC,OAAO;QACjC,kBAAkB,EAAE,YAAY,CAAC,aAAa;QAC9C,WAAW,EAAE,YAAY,CAAC,OAAO;QACjC,UAAU,EAAE,YAAY,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,eAAe;QAChE,WAAW,EAAE,YAAY,CAAC,MAAM;QAChC,WAAW,EAAE,YAAY,CAAC,SAAS;QACnC,WAAW,EAAE,YAAY,CAAC,WAAW;QACrC,mBAAmB,EAAE,YAAY,CAAC,iBAAiB;QACnD,cAAc,EAAE,YAAY,CAAC,YAAY,KAAK,OAAO;QACrD,CAAC,KAAK,YAAY,CAAC,IAAI,EAAE,CAAC,EAAE,YAAY,CAAC,IAAI;QAC7C,QAAQ,EAAE,YAAY,CAAC,MAAM;KAChC,CAAC,CAAC;IAEH,IAAI,IAAI,GAAQ,EAAE,CAAC;IACnB,IAAI,YAAY,CAAC,IAAI,EAAE;QACnB,IAAI,GAAG,oBAAC,cAAI,IAAC,IAAI,EAAE,YAAY,CAAC,IAAI,EAAE,IAAI,EAAC,KAAK,GAAG,CAAC;KACvD;IAED,MAAM,eAAe,GAAQ,EAAE,CAAC;IAChC,MAAM,MAAM,GAAQ,EAAE,CAAC;IAEvB,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,SAAS,EAAE;QACnC,eAAe,CAAC,QAAQ,GAAG,IAAI,CAAC;KACnC;IAED,IAAI,KAAK,CAAC,SAAS,EAAE;QACjB,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC;KAClC;IAED,IAAI,KAAK,CAAC,OAAO,EAAE;QACf,eAAe,CAAC,OAAO,GAAG,GAAG,EAAE;YAC3B,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;gBAClB,KAAK,CAAC,OAAO,EAAE,CAAC;aACnB;QACL,CAAC,CAAC;KACL;IAED,IAAI,KAAK,CAAC,IAAI,EAAE;QACZ,eAAe,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;KACrC;IACD,IAAI,OAAO,GAAG,EAAE,CAAC;IACjB,IAAI,YAAY,CAAC,eAAe,EAAE;QAC9B,OAAO,GAAG,EAAE,eAAe,EAAE,YAAY,CAAC,eAAe,EAAE,WAAW,EAAE,YAAY,CAAC,eAAe,EAAE,CAAC;KAC1G;IACD,OAAO,CACH,oBAAC,iBAAU,kBAAC,SAAS,EAAE,OAAO,IAAM,eAAe,IAAE,KAAK,kCAAO,MAAM,GAAK,OAAO;QAC9E,KAAK,CAAC,SAAS,IAAI,CAChB,8BAAM,SAAS,EAAC,QAAQ;YACpB,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAK,CAAC,MAAM,GAAI,CAChF,CACV;QACD;YACK,YAAY,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI;YAC5C,KAAK,CAAC,QAAQ;YACd,YAAY,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAC3C,CACE,CAChB,CAAC;AACN,CAAC;AApED,2BAoEC","sourcesContent":["import { IconType } from './Icon';\nimport Icon from './Icon';\nimport * as React from 'react';\n\nimport * as classNames from 'classnames';\n\nimport { ButtonBase } from '@material-ui/core';\nimport { Color } from '../../util/Color';\n\nexport interface BEButtonProps {\n    [x: string]: React.ReactNode;\n    icon?: IconType;\n    iconPosition?: 'left' | 'right';\n    rounded?: boolean;\n    size?: 'large' | 'normal' | 'small' | 'tiny';\n\n    name?: string;\n\n    wide?: boolean;\n    filled?: boolean;\n    isText?: boolean;\n    isLoading?: boolean;\n    textColor?: Color;\n\n    disabled?: boolean;\n    primary?: boolean;\n    primaryActive?: boolean;\n\n    success?: boolean;\n    mobileWidth?: boolean;\n    stopIconAnimation?: boolean; // Rename this it's bad\n\n    onClick?: () => void;\n}\n\nexport default function BEButton(props: BEButtonProps) {\n    const defaultProps: BEButtonProps = {\n        size: 'normal',\n        disabled: false,\n        iconPosition: 'left',\n        ...props,\n    };\n\n    const classes = classNames({\n        '--wide': defaultProps.wide,\n        '--primary': defaultProps.primary,\n        '--primary-active': defaultProps.primaryActive,\n        '--rounded': defaultProps.rounded,\n        '--filled': defaultProps.filled && !defaultProps.backgroundColor,\n        '--success': defaultProps.filled,\n        '--loading': defaultProps.isLoading,\n        '--fill@m-': defaultProps.mobileWidth,\n        '--no-icon-animate': defaultProps.stopIconAnimation,\n        '--icon-right': defaultProps.iconPosition === 'right',\n        [`--${defaultProps.size}`]: defaultProps.size,\n        '--text': defaultProps.isText,\n    });\n\n    let icon: any = '';\n    if (defaultProps.icon) {\n        icon = <Icon icon={defaultProps.icon} size=\"1em\" />;\n    }\n\n    const extraProperties: any = {};\n    const styles: any = {};\n\n    if (props.disabled || props.isLoading) {\n        extraProperties.disabled = true;\n    }\n\n    if (props.textColor) {\n        styles.color = props.textColor;\n    }\n\n    if (props.onClick) {\n        extraProperties.onClick = () => {\n            if (!props.isLoading) {\n                props.onClick();\n            }\n        };\n    }\n\n    if (props.name) {\n        extraProperties.name = props.name;\n    }\n    let bgColor = {};\n    if (defaultProps.backgroundColor) {\n        bgColor = { backgroundColor: defaultProps.backgroundColor, borderColor: defaultProps.backgroundColor };\n    }\n    return (\n        <ButtonBase className={classes} {...extraProperties} style={{ ...styles, ...bgColor }}>\n            {props.isLoading && (\n                <span className=\"c-spin\">\n                    <Icon icon={IconType.Spinner} color={props.primary ? Color.White : Color.Accent} />\n                </span>\n            )}\n            <span>\n                {defaultProps.iconPosition === 'left' && icon}\n                {props.children}\n                {defaultProps.iconPosition === 'right' && icon}\n            </span>\n        </ButtonBase>\n    );\n}\n"]}

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface BESelectItem {
+    value: string | number;
+    text: any;
+}
+export interface BESelectProps {
+    items: BESelectItem[];
+    iconComponent?: React.ElementType<any>;
+    selectedValue?: BESelectItem | any;
+    onChange?: (selected: unknown) => void;
+    className?: string;
+}
+export default function BESelect(props: BESelectProps): JSX.Element;

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@material-ui/core");
+const React = require("react");
+const react_1 = require("react");
+const ScrollLock_1 = require("../../hooks/ScrollLock");
+const Icon_1 = require("./Icon");
+function BESelect(props) {
+    var _a;
+    let selectedItem;
+    const [isOpen, setOpen] = react_1.useState(false);
+    const getSelectedItem = () => {
+        var _a;
+        if (props.selectedValue) {
+            if (props.selectedValue.value) {
+                return props.selectedValue.value;
+            }
+            else {
+                return props.selectedValue;
+            }
+        }
+        else {
+            if ((_a = props.items) === null || _a === void 0 ? void 0 : _a.length) {
+                return props.items[0].value;
+            }
+        }
+        return null;
+    };
+    selectedItem = getSelectedItem();
+    const handleChange = (event) => {
+        if (props.onChange) {
+            props.onChange(event.target.value);
+        }
+    };
+    const handleOpen = () => {
+        setOpen(true);
+    };
+    const handleColse = () => {
+        setOpen(false);
+    };
+    ScrollLock_1.default(isOpen);
+    return (React.createElement(core_1.Select, { onOpen: handleOpen, onClose: handleColse, open: isOpen, displayEmpty: true, value: selectedItem, onChange: handleChange, MenuProps: { disableScrollLock: true }, IconComponent: props.iconComponent ? props.iconComponent : Icon_1.IconDropdown, className: 'be-select ' + props.className, SelectDisplayProps: { 'data-scroll-lock-scrollable': true } }, (_a = props.items) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        return (React.createElement(core_1.MenuItem, { value: item.value, key: item.value }, item.text));
+    })));
+}
+exports.default = BESelect;
+//# sourceMappingURL=BESelect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BESelect.js","sourceRoot":"/","sources":["src/components/generic/BESelect.tsx"],"names":[],"mappings":";;AAAA,4CAAqD;AACrD,+BAA+B;AAC/B,iCAAkD;AAClD,uDAAmD;AACnD,iCAAsC;AAgBtC,SAAwB,QAAQ,CAAC,KAAoB;;IACjD,IAAI,YAAY,CAAC;IACjB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,gBAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,MAAM,eAAe,GAAG,GAAG,EAAE;;QACzB,IAAI,KAAK,CAAC,aAAa,EAAE;YACrB,IAAI,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;gBAC3B,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;aACpC;iBAAM;gBACH,OAAO,KAAK,CAAC,aAAa,CAAC;aAC9B;SACJ;aAAM;YACH,UAAI,KAAK,CAAC,KAAK,0CAAE,MAAM,EAAE;gBACrB,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;aAC/B;SACJ;QAED,OAAO,IAAI,CAAC;IAChB,CAAC,CAAC;IAEF,YAAY,GAAG,eAAe,EAAE,CAAC;IAEjC,MAAM,YAAY,GAAG,CAAC,KAA4C,EAAE,EAAE;QAClE,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SACtC;IACL,CAAC,CAAC;IACF,MAAM,UAAU,GAAG,GAAG,EAAE;QACpB,OAAO,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,CAAC;IACF,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,OAAO,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IACF,oBAAa,CAAC,MAAM,CAAC,CAAC;IACtB,OAAO,CACH,oBAAC,aAAM,IACH,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,IAAI,EAClB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,EACtC,aAAa,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,mBAAY,EACvE,SAAS,EAAE,YAAY,GAAG,KAAK,CAAC,SAAS,EACzC,kBAAkB,EAAE,EAAE,6BAA6B,EAAE,IAAI,EAAS,UAEjE,KAAK,CAAC,KAAK,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACvB,OAAO,CACH,oBAAC,eAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,IACvC,IAAI,CAAC,IAAI,CACH,CACd,CAAC;IACN,CAAC,EACI,CACZ,CAAC;AACN,CAAC;AAxDD,2BAwDC","sourcesContent":["import { Select, MenuItem } from '@material-ui/core';\nimport * as React from 'react';\nimport { useState, useLayoutEffect } from 'react';\nimport useScrollLock from '../../hooks/ScrollLock';\nimport { IconDropdown } from './Icon';\n\nexport interface BESelectItem {\n    value: string | number;\n    text: any;\n}\n\nexport interface BESelectProps {\n    items: BESelectItem[];\n    iconComponent?: React.ElementType<any>;\n    selectedValue?: BESelectItem | any;\n\n    onChange?: (selected: unknown) => void;\n    className?: string;\n}\n\nexport default function BESelect(props: BESelectProps) {\n    let selectedItem;\n    const [isOpen, setOpen] = useState(false);\n\n    const getSelectedItem = () => {\n        if (props.selectedValue) {\n            if (props.selectedValue.value) {\n                return props.selectedValue.value;\n            } else {\n                return props.selectedValue;\n            }\n        } else {\n            if (props.items?.length) {\n                return props.items[0].value;\n            }\n        }\n\n        return null;\n    };\n\n    selectedItem = getSelectedItem();\n\n    const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {\n        if (props.onChange) {\n            props.onChange(event.target.value);\n        }\n    };\n    const handleOpen = () => {\n        setOpen(true);\n    };\n    const handleColse = () => {\n        setOpen(false);\n    };\n    useScrollLock(isOpen);\n    return (\n        <Select\n            onOpen={handleOpen}\n            onClose={handleColse}\n            open={isOpen}\n            displayEmpty={true}\n            value={selectedItem}\n            onChange={handleChange}\n            MenuProps={{ disableScrollLock: true }}\n            IconComponent={props.iconComponent ? props.iconComponent : IconDropdown}\n            className={'be-select ' + props.className}\n            SelectDisplayProps={{ 'data-scroll-lock-scrollable': true } as any}\n        >\n            {props.items?.map((item) => {\n                return (\n                    <MenuItem value={item.value} key={item.value}>\n                        {item.text}\n                    </MenuItem>\n                );\n            })}\n        </Select>\n    );\n}\n"]}

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { TooltipProps } from '@material-ui/core';
+export interface BETooltipProps extends TooltipProps {
+    wrapperClasses?: string;
+    overrideContainer?: React.ReactInstance;
+}
+export default function BETooltip(props: BETooltipProps): JSX.Element;

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+// tslint:disable-next-line: no-submodule-imports
+const styles_1 = require("@material-ui/core/styles");
+const core_1 = require("@material-ui/core");
+const Color_1 = require("../../util/Color");
+const RoomstayThemeEngine_1 = require("../../providers/RoomstayThemeEngine");
+const react_1 = require("react");
+const StyledTooltip = styles_1.withStyles((theme) => ({
+    tooltip: {
+        backgroundColor: Color_1.Color.Accent2,
+        color: Color_1.Color.Navy,
+        maxWidth: 220,
+        fontSize: 12,
+        border: '1px solid',
+        borderColor: Color_1.Color.Accent,
+        padding: 8,
+        boxShadow: theme.shadows[1],
+    },
+    arrow: {
+        color: Color_1.Color.Accent,
+    },
+}))(core_1.Tooltip);
+function BETooltip(props) {
+    var _a, _b;
+    const wrapperClass = (_a = props.wrapperClasses) !== null && _a !== void 0 ? _a : '';
+    props = Object.assign(Object.assign({}, props), { disableTouchListener: true });
+    delete props.wrapperClasses;
+    delete props.overrideContainer;
+    const [isDisplayed, setDisplayed] = react_1.useState(false);
+    const displayFalse = () => {
+        setDisplayed(false);
+    };
+    const displayTrue = () => {
+        setDisplayed(true);
+    };
+    return (React.createElement("div", { onMouseLeave: displayFalse, onMouseEnter: displayTrue, onMouseDown: displayFalse, className: wrapperClass },
+        React.createElement(StyledTooltip, Object.assign({ open: isDisplayed, arrow: true, PopperProps: {
+                container: (_b = props.overrideContainer) !== null && _b !== void 0 ? _b : RoomstayThemeEngine_1.default.EngineContainer,
+            } }, props))));
+}
+exports.default = BETooltip;
+//# sourceMappingURL=BETooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BETooltip.js","sourceRoot":"/","sources":["src/components/generic/BETooltip.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,iDAAiD;AACjD,qDAA6D;AAC7D,4CAA0D;AAC1D,4CAAyC;AACzC,6EAAsE;AACtE,iCAAiC;AAEjC,MAAM,aAAa,GAAG,mBAAU,CAAC,CAAC,KAAY,EAAE,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE;QACL,eAAe,EAAE,aAAK,CAAC,OAAO;QAC9B,KAAK,EAAE,aAAK,CAAC,IAAI;QACjB,QAAQ,EAAE,GAAG;QACb,QAAQ,EAAE,EAAE;QACZ,MAAM,EAAE,WAAW;QACnB,WAAW,EAAE,aAAK,CAAC,MAAM;QACzB,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;KAC9B;IACD,KAAK,EAAE;QACH,KAAK,EAAE,aAAK,CAAC,MAAM;KACtB;CACJ,CAAC,CAAC,CAAC,cAAO,CAAC,CAAC;AAOb,SAAwB,SAAS,CAAC,KAAqB;;IACnD,MAAM,YAAY,SAAG,KAAK,CAAC,cAAc,mCAAI,EAAE,CAAC;IAEhD,KAAK,mCACE,KAAK,KACR,oBAAoB,EAAE,IAAI,GAC7B,CAAC;IAEF,OAAO,KAAK,CAAC,cAAc,CAAC;IAC5B,OAAO,KAAK,CAAC,iBAAiB,CAAC;IAE/B,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,gBAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,YAAY,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,YAAY,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,OAAO,CACH,6BAAK,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY;QAC1G,oBAAC,aAAa,kBACV,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,IAAI,EACX,WAAW,EAAE;gBACT,SAAS,QAAE,KAAK,CAAC,iBAAiB,mCAAI,6BAAmB,CAAC,eAAe;aAC5E,IACG,KAAK,EACX,CACA,CACT,CAAC;AACN,CAAC;AAjCD,4BAiCC","sourcesContent":["import * as React from 'react';\n// tslint:disable-next-line: no-submodule-imports\nimport { withStyles, Theme } from '@material-ui/core/styles';\nimport { Tooltip, TooltipProps } from '@material-ui/core';\nimport { Color } from '../../util/Color';\nimport RoomstayThemeEngine from '../../providers/RoomstayThemeEngine';\nimport { useState } from 'react';\n\nconst StyledTooltip = withStyles((theme: Theme) => ({\n    tooltip: {\n        backgroundColor: Color.Accent2,\n        color: Color.Navy,\n        maxWidth: 220,\n        fontSize: 12,\n        border: '1px solid',\n        borderColor: Color.Accent,\n        padding: 8,\n        boxShadow: theme.shadows[1],\n    },\n    arrow: {\n        color: Color.Accent,\n    },\n}))(Tooltip);\n\nexport interface BETooltipProps extends TooltipProps {\n    wrapperClasses?: string;\n    overrideContainer?: React.ReactInstance;\n}\n\nexport default function BETooltip(props: BETooltipProps) {\n    const wrapperClass = props.wrapperClasses ?? '';\n\n    props = {\n        ...props,\n        disableTouchListener: true,\n    };\n\n    delete props.wrapperClasses;\n    delete props.overrideContainer;\n\n    const [isDisplayed, setDisplayed] = useState(false);\n\n    const displayFalse = () => {\n        setDisplayed(false);\n    };\n\n    const displayTrue = () => {\n        setDisplayed(true);\n    };\n\n    return (\n        <div onMouseLeave={displayFalse} onMouseEnter={displayTrue} onMouseDown={displayFalse} className={wrapperClass}>\n            <StyledTooltip\n                open={isDisplayed}\n                arrow={true}\n                PopperProps={{\n                    container: props.overrideContainer ?? RoomstayThemeEngine.EngineContainer,\n                }}\n                {...props}\n            />\n        </div>\n    );\n}\n"]}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface BackButtonProps {
+    onClick?: () => void;
+}
+export default function BackButton(props: BackButtonProps): JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const Icon_1 = require("./Icon");
+const BEButton_1 = require("./BEButton");
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("../../translations/Translation");
+function BackButton(props) {
+    var _a;
+    const { t } = react_i18next_1.useTranslation();
+    return (React.createElement(BEButton_1.default, { size: "tiny", isText: true, onClick: (_a = props.onClick) !== null && _a !== void 0 ? _a : null, icon: Icon_1.IconType.ArrowLeft }, t(Translation_1.Translation.Navigation.Back).toUpperCase()));
+}
+exports.default = BackButton;
+//# sourceMappingURL=BackButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackButton.js","sourceRoot":"/","sources":["src/components/generic/BackButton.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,iCAAkC;AAClC,yCAAkC;AAClC,iDAA+C;AAC/C,gEAA6D;AAM7D,SAAwB,UAAU,CAAC,KAAsB;;IACrD,MAAM,EAAE,CAAC,EAAE,GAAG,8BAAc,EAAE,CAAC;IAE/B,OAAO,CACH,oBAAC,kBAAQ,IAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,EAAE,OAAO,QAAE,KAAK,CAAC,OAAO,mCAAI,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,SAAS,IACvF,CAAC,CAAC,yBAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CACtC,CACd,CAAC;AACN,CAAC;AARD,6BAQC","sourcesContent":["import * as React from 'react';\nimport { IconType } from './Icon';\nimport BEButton from './BEButton';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '../../translations/Translation';\n\ninterface BackButtonProps {\n    onClick?: () => void;\n}\n\nexport default function BackButton(props: BackButtonProps) {\n    const { t } = useTranslation();\n\n    return (\n        <BEButton size=\"tiny\" isText={true} onClick={props.onClick ?? null} icon={IconType.ArrowLeft}>\n            {t(Translation.Navigation.Back).toUpperCase()}\n        </BEButton>\n    );\n}\n"]}

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function BookNowPayLaterInfoBlock(): JSX.Element;

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BookNowPayLaterInfoBlock = void 0;
+const React = require("react");
+const react_i18next_1 = require("react-i18next");
+const hooks_1 = require("@frontend/hooks");
+const Translation_1 = require("../../translations/Translation");
+const Color_1 = require("../../util/Color");
+const BookNowPayLaterIcon_1 = require("../iconComponents/BookNowPayLaterIcon");
+const Text_1 = require("./Text");
+function BookNowPayLaterInfoBlock() {
+    var _a, _b;
+    const { t } = react_i18next_1.useTranslation();
+    const { hotel } = hooks_1.useCurrentHotel();
+    let url = '';
+    if (hotel) {
+        url = (_b = (_a = hotel.bestRateNoBSUrl) !== null && _a !== void 0 ? _a : hotel.bookNowPayLaterUrl) !== null && _b !== void 0 ? _b : hotel.privacyPolicyUrl;
+    }
+    const titleTranslation = t(Translation_1.Translation.Custom.BookNowPayLaterInfoBlock.BookNowPayLater);
+    return (titleTranslation && (React.createElement("div", { className: "u-marg-bottom u-border-rounded", style: { padding: '16px 30px', backgroundColor: Color_1.Color.Accent2 } },
+        React.createElement("div", { className: "u-flex u-flex-flex-start u-flex-align-center" },
+            React.createElement(BookNowPayLaterIcon_1.default, { width: 40, height: 40 }),
+            React.createElement("div", { className: "u-marg-left--med" },
+                React.createElement(Text_1.default, { bold: true, type: Text_1.TextType.Small }, titleTranslation),
+                React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                    t(Translation_1.Translation.Custom.BookNowPayLaterInfoBlock.IfYourDreamsChange),
+                    ' ',
+                    React.createElement("a", { style: { color: Color_1.Color.Accent }, href: url, target: "_blank", rel: "noreferrer" }, t(Translation_1.Translation.Step.Room.ReadMore)),
+                    "."))))));
+}
+exports.BookNowPayLaterInfoBlock = BookNowPayLaterInfoBlock;
+//# sourceMappingURL=BookNowPayLaterInfoBlock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BookNowPayLaterInfoBlock.js","sourceRoot":"/","sources":["src/components/generic/BookNowPayLaterInfoBlock.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iDAA+C;AAC/C,2CAAkD;AAClD,gEAA6D;AAC7D,4CAAyC;AACzC,+EAAwE;AACxE,iCAAwC;AAExC,SAAgB,wBAAwB;;IACpC,MAAM,EAAE,CAAC,EAAE,GAAG,8BAAc,EAAE,CAAC;IAC/B,MAAM,EAAE,KAAK,EAAE,GAAG,uBAAe,EAAE,CAAC;IAEpC,IAAI,GAAG,GAAG,EAAE,CAAC;IACb,IAAI,KAAK,EAAE;QACP,GAAG,eAAG,KAAK,CAAC,eAAe,mCAAI,KAAK,CAAC,kBAAkB,mCAAI,KAAK,CAAC,gBAAgB,CAAC;KACrF;IAED,MAAM,gBAAgB,GAAG,CAAC,CAAC,yBAAW,CAAC,MAAM,CAAC,wBAAwB,CAAC,eAAe,CAAC,CAAC;IAExF,OAAO,CACH,gBAAgB,IAAI,CAChB,6BAAK,SAAS,EAAC,gCAAgC,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,aAAK,CAAC,OAAO,EAAE;QAC3G,6BAAK,SAAS,EAAC,8CAA8C;YACzD,oBAAC,6BAAmB,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI;YAC9C,6BAAK,SAAS,EAAC,kBAAkB;gBAC7B,oBAAC,cAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,IACjC,gBAAgB,CACd;gBACP,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK;oBACrB,CAAC,CAAC,yBAAW,CAAC,MAAM,CAAC,wBAAwB,CAAC,kBAAkB,CAAC;oBAAE,GAAG;oBACvE,2BAAG,KAAK,EAAE,EAAE,KAAK,EAAE,aAAK,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,YAAY,IACzE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAClC;wBAED,CACL,CACJ,CACJ,CACT,CACJ,CAAC;AACN,CAAC;AAhCD,4DAgCC","sourcesContent":["import * as React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { Translation } from '../../translations/Translation';\nimport { Color } from '../../util/Color';\nimport BookNowPayLaterIcon from '../iconComponents/BookNowPayLaterIcon';\nimport Text, { TextType } from './Text';\n\nexport function BookNowPayLaterInfoBlock() {\n    const { t } = useTranslation();\n    const { hotel } = useCurrentHotel();\n\n    let url = '';\n    if (hotel) {\n        url = hotel.bestRateNoBSUrl ?? hotel.bookNowPayLaterUrl ?? hotel.privacyPolicyUrl;\n    }\n\n    const titleTranslation = t(Translation.Custom.BookNowPayLaterInfoBlock.BookNowPayLater);\n\n    return (\n        titleTranslation && (\n            <div className=\"u-marg-bottom u-border-rounded\" style={{ padding: '16px 30px', backgroundColor: Color.Accent2 }}>\n                <div className=\"u-flex u-flex-flex-start u-flex-align-center\">\n                    <BookNowPayLaterIcon width={40} height={40} />\n                    <div className=\"u-marg-left--med\">\n                        <Text bold={true} type={TextType.Small}>\n                            {titleTranslation}\n                        </Text>\n                        <Text type={TextType.Small}>\n                            {t(Translation.Custom.BookNowPayLaterInfoBlock.IfYourDreamsChange)}{' '}\n                            <a style={{ color: Color.Accent }} href={url} target=\"_blank\" rel=\"noreferrer\">\n                                {t(Translation.Step.Room.ReadMore)}\n                            </a>\n                            .\n                        </Text>\n                    </div>\n                </div>\n            </div>\n        )\n    );\n}\n"]}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface CheckboxProps {
+    label: string | JSX.Element;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+}
+declare const _default: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<unknown>>;
+export default _default;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const Icon_1 = require("./Icon");
+const Text_1 = require("./Text");
+exports.default = React.forwardRef(function Checkbox(props, ref) {
+    const setChecked = (checked) => {
+        if (props.onChange) {
+            props.onChange(checked);
+        }
+    };
+    const onChange = () => {
+        setChecked(!props.checked);
+    };
+    return (React.createElement("div", { className: "checkbox" },
+        React.createElement("label", null,
+            React.createElement("input", { ref: ref, checked: props.checked, type: "checkbox", onChange: onChange }),
+            React.createElement("span", { className: "fake-checkbox" },
+                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Check })),
+            React.createElement(Text_1.default, { type: Text_1.TextType.Small, inline: true }, props.label))));
+});
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"/","sources":["src/components/generic/Checkbox.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,iCAAwC;AACxC,iCAAwC;AAQxC,kBAAe,KAAK,CAAC,UAAU,CAAC,SAAS,QAAQ,CAAC,KAAoB,EAAE,GAAQ;IAC5E,MAAM,UAAU,GAAG,CAAC,OAAgB,EAAE,EAAE;QACpC,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;SAC3B;IACL,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QAClB,UAAU,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACH,6BAAK,SAAS,EAAC,UAAU;QACrB;YACI,+BAAO,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,QAAQ,GAAI;YAC/E,8BAAM,SAAS,EAAC,eAAe;gBAC3B,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,GAAI,CAC3B;YACP,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,IACnC,KAAK,CAAC,KAAK,CACT,CACH,CACN,CACT,CAAC;AACN,CAAC,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport Icon, { IconType } from './Icon';\nimport Text, { TextType } from './Text';\n\nexport interface CheckboxProps {\n    label: string | JSX.Element;\n    checked?: boolean;\n\n    onChange?: (checked: boolean) => void;\n}\nexport default React.forwardRef(function Checkbox(props: CheckboxProps, ref: any) {\n    const setChecked = (checked: boolean) => {\n        if (props.onChange) {\n            props.onChange(checked);\n        }\n    };\n\n    const onChange = () => {\n        setChecked(!props.checked);\n    };\n\n    return (\n        <div className=\"checkbox\">\n            <label>\n                <input ref={ref} checked={props.checked} type=\"checkbox\" onChange={onChange} />\n                <span className=\"fake-checkbox\">\n                    <Icon icon={IconType.Check} />\n                </span>\n                <Text type={TextType.Small} inline={true}>\n                    {props.label}\n                </Text>\n            </label>\n        </div>\n    );\n});\n"]}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import * as dayjs from 'dayjs';
+interface CountdownProps {
+    endTimeDate: dayjs.Dayjs;
+    onEnd?: () => void;
+}
+export default function Countdown(props: CountdownProps): JSX.Element;
+export {};

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const dayjs = require("dayjs");
+function Countdown(props) {
+    const [secondsLeft, setSecondsLeft] = react_1.useState(props.endTimeDate.diff(dayjs(), 'second'));
+    react_1.useEffect(() => {
+        let cancelled = false;
+        const timeInterval = setTimeout(() => {
+            if (!cancelled) {
+                if (secondsLeft > 0) {
+                    setSecondsLeft((left) => left - 1);
+                }
+                else {
+                    if (props.onEnd) {
+                        props.onEnd();
+                    }
+                    cancelled = true;
+                    clearTimeout(timeInterval);
+                }
+            }
+        }, 1000);
+        return () => {
+            cancelled = true;
+            clearTimeout(timeInterval);
+        };
+    }, [secondsLeft]);
+    return react_1.useMemo(() => {
+        const days = [Math.floor(secondsLeft / 60 / 60), Math.floor((secondsLeft / 60) % 60), Math.floor(secondsLeft % 60)];
+        return React.createElement(React.Fragment, null, days.map((day) => day.toString().padStart(2, '0')).join(':'));
+    }, [secondsLeft]);
+}
+exports.default = Countdown;
+//# sourceMappingURL=Countdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Countdown.js","sourceRoot":"/","sources":["src/components/generic/Countdown.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,iCAAqD;AAErD,+BAA+B;AAO/B,SAAwB,SAAS,CAAC,KAAqB;IACnD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,gBAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1F,iBAAS,CAAC,GAAG,EAAE;QACX,IAAI,SAAS,GAAG,KAAK,CAAC;QAEtB,MAAM,YAAY,GAAG,UAAU,CAAC,GAAG,EAAE;YACjC,IAAI,CAAC,SAAS,EAAE;gBACZ,IAAI,WAAW,GAAG,CAAC,EAAE;oBACjB,cAAc,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;iBACtC;qBAAM;oBACH,IAAI,KAAK,CAAC,KAAK,EAAE;wBACb,KAAK,CAAC,KAAK,EAAE,CAAC;qBACjB;oBAED,SAAS,GAAG,IAAI,CAAC;oBACjB,YAAY,CAAC,YAAY,CAAC,CAAC;iBAC9B;aACJ;QACL,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,OAAO,GAAG,EAAE;YACR,SAAS,GAAG,IAAI,CAAC;YACjB,YAAY,CAAC,YAAY,CAAC,CAAC;QAC/B,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,eAAO,CAAC,GAAG,EAAE;QAChB,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,EAAE,CAAC,CAAC,CAAC;QAEpH,OAAO,0CAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAI,CAAC;IAC/E,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;AACtB,CAAC;AAhCD,4BAgCC","sourcesContent":["import * as React from 'react';\nimport { useEffect, useState, useMemo } from 'react';\n\nimport * as dayjs from 'dayjs';\n\ninterface CountdownProps {\n    endTimeDate: dayjs.Dayjs;\n    onEnd?: () => void;\n}\n\nexport default function Countdown(props: CountdownProps) {\n    const [secondsLeft, setSecondsLeft] = useState(props.endTimeDate.diff(dayjs(), 'second'));\n\n    useEffect(() => {\n        let cancelled = false;\n\n        const timeInterval = setTimeout(() => {\n            if (!cancelled) {\n                if (secondsLeft > 0) {\n                    setSecondsLeft((left) => left - 1);\n                } else {\n                    if (props.onEnd) {\n                        props.onEnd();\n                    }\n\n                    cancelled = true;\n                    clearTimeout(timeInterval);\n                }\n            }\n        }, 1000);\n\n        return () => {\n            cancelled = true;\n            clearTimeout(timeInterval);\n        };\n    }, [secondsLeft]);\n\n    return useMemo(() => {\n        const days = [Math.floor(secondsLeft / 60 / 60), Math.floor((secondsLeft / 60) % 60), Math.floor(secondsLeft % 60)];\n\n        return <>{days.map((day) => day.toString().padStart(2, '0')).join(':')}</>;\n    }, [secondsLeft]);\n}\n"]}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface CurrencyProps {
+    removeCurrencyAfterChar?: number;
+    shortenThousandsAfter?: number;
+    children: any;
+    hideDecimals?: boolean;
+    disableLocalization?: boolean;
+    disableLoading?: boolean;
+    originalCurrencyCode?: string;
+}
+export default function Currency(props: CurrencyProps): JSX.Element;
+export {};

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const CurrencyProvider_1 = require("../../providers/CurrencyProvider");
+const react_1 = require("react");
+const Icon_1 = require("./Icon");
+const Color_1 = require("../../util/Color");
+const contexts_1 = require("@frontend/contexts");
+const hooks_1 = require("@frontend/hooks");
+function Currency(props) {
+    var _a;
+    const { currentCurrency } = react_1.useContext(contexts_1.CompanyContext);
+    const { hotel } = hooks_1.useCurrentHotel();
+    const [value, setValue] = react_1.useState(0);
+    const [isLoading, setIsLoading] = react_1.useState(false);
+    const toLocalString = (original, toFixed) => {
+        if (props.disableLocalization) {
+            return original;
+        }
+        if (original) {
+            return original.toLocaleString(undefined, { minimumFractionDigits: toFixed ? 2 : 0 });
+        }
+        return original;
+    };
+    react_1.useEffect(() => {
+        let isCancelled = false;
+        setIsLoading(true);
+        setTimeout(() => {
+            var _a;
+            if (!isCancelled) {
+                setIsLoading(false);
+                if (isNaN(props.children)) {
+                    setValue(props.children);
+                }
+                else {
+                    const totalValue = CurrencyProvider_1.default.convertPrice(props.children, !props.hideDecimals, currentCurrency, (_a = props.originalCurrencyCode) !== null && _a !== void 0 ? _a : hotel === null || hotel === void 0 ? void 0 : hotel.defaultCurrency);
+                    if (!isCancelled) {
+                        setValue(totalValue);
+                    }
+                }
+            }
+        }, props.disableLoading ? 0 : 200);
+        return () => {
+            setIsLoading(false);
+            isCancelled = true;
+        };
+    }, [props.children, currentCurrency, props.originalCurrencyCode, CurrencyProvider_1.default.getRatesForCurrencyCode((_a = props.originalCurrencyCode) !== null && _a !== void 0 ? _a : hotel === null || hotel === void 0 ? void 0 : hotel.defaultCurrency)]);
+    return react_1.useMemo(() => {
+        const stringVal = props.disableLocalization ? value.toString() : value === null || value === void 0 ? void 0 : value.toLocaleString();
+        let symbol = CurrencyProvider_1.default.getSymbol(currentCurrency);
+        if (props.removeCurrencyAfterChar) {
+            const priceLength = String(value).length;
+            if (priceLength + symbol.length > props.removeCurrencyAfterChar) {
+                symbol = CurrencyProvider_1.default.getShortSymbol(currentCurrency);
+                if (priceLength + symbol.length > props.removeCurrencyAfterChar) {
+                    symbol = '';
+                }
+            }
+        }
+        let prettyValue = toLocalString(value, !(props.hideDecimals || typeof value !== 'number'));
+        if (props.shortenThousandsAfter && props.shortenThousandsAfter <= String(value).length && props.hideDecimals) {
+            prettyValue = stringVal.substring(0, stringVal.length - 3) + '…';
+        }
+        return isLoading && !props.disableLoading ? (React.createElement("span", { className: "u-inline-flex a-spin" },
+            React.createElement(Icon_1.default, { icon: Icon_1.IconType.Spinner, size: "1em", color: Color_1.Color.Accent }))) : (React.createElement("span", { className: "u-ellip-overflow u-nowrap" },
+            symbol && React.createElement("span", null, symbol),
+            prettyValue));
+    }, [value, isLoading]);
+}
+exports.default = Currency;
+//# sourceMappingURL=Currency.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Currency.js","sourceRoot":"/","sources":["src/components/generic/Currency.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport CurrencyProvider from '../../providers/CurrencyProvider';\nimport { useState, useEffect, useMemo, useContext } from 'react';\nimport Icon, { IconType } from './Icon';\nimport { Color } from '../../util/Color';\nimport { CompanyContext } from '@frontend/contexts';\nimport { useCurrentHotel } from '@frontend/hooks';\n\ninterface CurrencyProps {\n    removeCurrencyAfterChar?: number;\n    shortenThousandsAfter?: number;\n\n    children: any;\n\n    hideDecimals?: boolean;\n\n    disableLocalization?: boolean;\n    disableLoading?: boolean;\n\n    originalCurrencyCode?: string;\n}\n\nexport default function Currency(props: CurrencyProps) {\n    const { currentCurrency } = useContext(CompanyContext);\n    const { hotel } = useCurrentHotel();\n\n    const [value, setValue] = useState(0);\n    const [isLoading, setIsLoading] = useState(false);\n\n    const toLocalString = (original: number, toFixed?: boolean) => {\n        if (props.disableLocalization) {\n            return original;\n        }\n\n        if (original) {\n            return original.toLocaleString(undefined, { minimumFractionDigits: toFixed ? 2 : 0 });\n        }\n\n        return original;\n    };\n\n    useEffect(() => {\n        let isCancelled = false;\n\n        setIsLoading(true);\n        setTimeout(\n            () => {\n                if (!isCancelled) {\n                    setIsLoading(false);\n\n                    if (isNaN(props.children)) {\n                        setValue(props.children);\n                    } else {\n                        const totalValue = CurrencyProvider.convertPrice(\n                            props.children,\n                            !props.hideDecimals,\n                            currentCurrency,\n                            props.originalCurrencyCode ?? hotel?.defaultCurrency\n                        );\n\n                        if (!isCancelled) {\n                            setValue(totalValue);\n                        }\n                    }\n                }\n            },\n            props.disableLoading ? 0 : 200\n        );\n\n        return () => {\n            setIsLoading(false);\n            isCancelled = true;\n        };\n    }, [props.children, currentCurrency, props.originalCurrencyCode, CurrencyProvider.getRatesForCurrencyCode(props.originalCurrencyCode ?? hotel?.defaultCurrency)]);\n\n    return useMemo(() => {\n        const stringVal = props.disableLocalization ? value.toString() : value?.toLocaleString();\n\n        let symbol = CurrencyProvider.getSymbol(currentCurrency);\n        if (props.removeCurrencyAfterChar) {\n            const priceLength = String(value).length;\n            if (priceLength + symbol.length > props.removeCurrencyAfterChar) {\n                symbol = CurrencyProvider.getShortSymbol(currentCurrency);\n                if (priceLength + symbol.length > props.removeCurrencyAfterChar) {\n                    symbol = '';\n                }\n            }\n        }\n\n        let prettyValue = toLocalString(value, !(props.hideDecimals || typeof value !== 'number'));\n\n        if (props.shortenThousandsAfter && props.shortenThousandsAfter <= String(value).length && props.hideDecimals) {\n            prettyValue = stringVal.substring(0, stringVal.length - 3) + '…';\n        }\n\n        return isLoading && !props.disableLoading ? (\n            <span className=\"u-inline-flex a-spin\">\n                <Icon icon={IconType.Spinner} size=\"1em\" color={Color.Accent} />\n            </span>\n        ) : (\n            <span className=\"u-ellip-overflow u-nowrap\">\n                {symbol && <span>{symbol}</span>}\n                {prettyValue}\n            </span>\n        );\n    }, [value, isLoading]);\n}\n"]}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface DistanceProps {
+    distance: number | string;
+}
+export default function Distance({ distance }: DistanceProps): JSX.Element;
+export {};

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const React = require("react");
+const DistanceProvider_1 = require("../../providers/DistanceProvider");
+const HotelOverridesContext_1 = require("../../contexts/HotelOverridesContext");
+function Distance({ distance }) {
+    const { distanceUnitType } = React.useContext(HotelOverridesContext_1.HotelOverridesContext);
+    const distanceString = (() => {
+        if (typeof distance === 'string') {
+            return `${distance} ${DistanceProvider_1.default.getMeasurementString(distanceUnitType)}`;
+        }
+        else {
+            return `${DistanceProvider_1.default.convertTo(distanceUnitType, distance)} ${DistanceProvider_1.default.getMeasurementString(distanceUnitType)}`;
+        }
+    })();
+    return react_1.useMemo(() => {
+        return React.createElement(React.Fragment, null, distanceString);
+    }, [distance]);
+}
+exports.default = Distance;
+//# sourceMappingURL=Distance.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Distance.js","sourceRoot":"/","sources":["src/components/generic/Distance.tsx"],"names":[],"mappings":";;AAAA,iCAAgC;AAChC,+BAA+B;AAC/B,uEAAgE;AAChE,gFAA6E;AAM7E,SAAwB,QAAQ,CAAC,EAAE,QAAQ,EAAiB;IACxD,MAAM,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,6CAAqB,CAAC,CAAC;IAErE,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE;QACzB,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAC9B,OAAO,GAAG,QAAQ,IAAI,0BAAgB,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,EAAE,CAAC;SACnF;aAAM;YACH,OAAO,GAAG,0BAAgB,CAAC,SAAS,CAAC,gBAAgB,EAAE,QAAQ,CAAC,IAAI,0BAAgB,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,EAAE,CAAC;SACjI;IACL,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO,eAAO,CAAC,GAAG,EAAE;QAChB,OAAO,0CAAG,cAAc,CAAI,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AACnB,CAAC;AAdD,2BAcC","sourcesContent":["import { useMemo } from 'react';\nimport * as React from 'react';\nimport DistanceProvider from '../../providers/DistanceProvider';\nimport { HotelOverridesContext } from '../../contexts/HotelOverridesContext';\n\ninterface DistanceProps {\n    distance: number | string;\n}\n\nexport default function Distance({ distance }: DistanceProps) {\n    const { distanceUnitType } = React.useContext(HotelOverridesContext);\n\n    const distanceString = (() => {\n        if (typeof distance === 'string') {\n            return `${distance} ${DistanceProvider.getMeasurementString(distanceUnitType)}`;\n        } else {\n            return `${DistanceProvider.convertTo(distanceUnitType, distance)} ${DistanceProvider.getMeasurementString(distanceUnitType)}`;\n        }\n    })();\n\n    return useMemo(() => {\n        return <>{distanceString}</>;\n    }, [distance]);\n}\n"]}

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

@@ -0,0 +1,13 @@
+import { TextAlign } from '../../util/TextAlignment';
+import { Color } from '../../util/Color';
+import * as React from 'react';
+export interface HeadlineProps {
+    bold?: boolean;
+    size?: 'extra-large' | 'large' | 'normal';
+    lineHeight?: '1em' | 'normal';
+    color?: Color;
+    [x: string]: React.ReactNode;
+    align?: TextAlign;
+    className?: string;
+}
+export default function Headline(props: HeadlineProps): JSX.Element;