@roomstay/frontend 2.3.9 → 2.3.11

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

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
 function InputGroup(props) {
     var _a, _b;
     const classes = (0, classnames_1.default)('be-form-group', {

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

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.js","sourceRoot":"/","sources":["src/components/generic/InputGroup/InputGroup.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAE1B,4DAAoC;AASpC,SAAwB,UAAU,CAAC,KAAsB;;IACrD,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,eAAe,EAAE;QACxC,CAAC,KAAK,KAAK,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,UAAU;KAChD,CAAC,CAAC;IAEH,IAAI,WAAW,CAAC;IAEhB,MAAM,aAAa,GAAU,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACpE,QAAQ,KAAK,CAAC,UAAU,EAAE;QACtB,KAAK,KAAK,CAAC;QACX,KAAK,KAAK,CAAC;QACX,KAAK,KAAK;YACN,WAAW,GAAG,CACV;gBACK,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,CAAC,CAAC,KAAI,2CAAM,aAAa,CAAC,CAAC,CAAC,CAAO;gBACnD,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,CAAC,CAAC,KAAI,uCAAK,SAAS,EAAE,CAAA,MAAA,MAAA,aAAa,CAAC,CAAC,CAAC,0CAAE,IAAI,0CAAE,IAAI,MAAK,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAG,aAAa,CAAC,CAAC,CAAC,CAAO,CACnI,CACN,CAAC;YAEF,MAAM;QACV,KAAK,GAAG,CAAC;QACT;YACI,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAC;YAC7B,MAAM;KACb;IAED,OAAO,uCAAK,SAAS,EAAE,OAAO,IAAG,WAAW,CAAO,CAAC;AACxD,CAAC;AA3BD,6BA2BC","sourcesContent":["import React from 'react';\nimport { ReactNode } from 'react';\nimport classNames from 'classnames';\nimport { InputGroupDimensions } from '@/components/generic/InputGroup/InputGroup.types';\n\nexport interface InputGroupProps {\n    children: ReactNode | ReactNode[];\n\n    dimensions?: InputGroupDimensions;\n}\n\nexport default function InputGroup(props: InputGroupProps) {\n    const classes = classNames('be-form-group', {\n        [`s-${props.dimensions}`]: !!props.dimensions,\n    });\n\n    let innerLayout;\n\n    const childrenArray: any[] = React.Children.toArray(props.children);\n    switch (props.dimensions) {\n        case '1/3':\n        case '3/1':\n        case '2/2':\n            innerLayout = (\n                <>\n                    {childrenArray?.[0] && <div>{childrenArray[0]}</div>}\n                    {childrenArray?.[1] && <div className={childrenArray[1]?.type?.name === InputGroup.name ? 'no-marg' : ''}>{childrenArray[1]}</div>}\n                </>\n            );\n\n            break;\n        case '1':\n        default:\n            innerLayout = props.children;\n            break;\n    }\n\n    return <div className={classes}>{innerLayout}</div>;\n}\n"]}
+{"version":3,"file":"InputGroup.js","sourceRoot":"/","sources":["src/components/generic/InputGroup/InputGroup.tsx"],"names":[],"mappings":";;;;;AAAA,4DAAoC;AACpC,kDAAyC;AAUzC,SAAwB,UAAU,CAAC,KAAsB;;IACrD,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,eAAe,EAAE;QACxC,CAAC,KAAK,KAAK,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,UAAU;KAChD,CAAC,CAAC;IAEH,IAAI,WAAW,CAAC;IAEhB,MAAM,aAAa,GAAU,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACpE,QAAQ,KAAK,CAAC,UAAU,EAAE;QACtB,KAAK,KAAK,CAAC;QACX,KAAK,KAAK,CAAC;QACX,KAAK,KAAK;YACN,WAAW,GAAG,CACV;gBACK,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,CAAC,CAAC,KAAI,2CAAM,aAAa,CAAC,CAAC,CAAC,CAAO;gBACnD,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,CAAC,CAAC,KAAI,uCAAK,SAAS,EAAE,CAAA,MAAA,MAAA,aAAa,CAAC,CAAC,CAAC,0CAAE,IAAI,0CAAE,IAAI,MAAK,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAG,aAAa,CAAC,CAAC,CAAC,CAAO,CACnI,CACN,CAAC;YAEF,MAAM;QACV,KAAK,GAAG,CAAC;QACT;YACI,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAC;YAC7B,MAAM;KACb;IAED,OAAO,uCAAK,SAAS,EAAE,OAAO,IAAG,WAAW,CAAO,CAAC;AACxD,CAAC;AA3BD,6BA2BC","sourcesContent":["import classNames from 'classnames';\nimport React, { ReactNode } from 'react';\n\nimport { InputGroupDimensions } from '@/components/generic/InputGroup/InputGroup.types';\n\nexport interface InputGroupProps {\n    children: ReactNode | ReactNode[];\n\n    dimensions?: InputGroupDimensions;\n}\n\nexport default function InputGroup(props: InputGroupProps) {\n    const classes = classNames('be-form-group', {\n        [`s-${props.dimensions}`]: !!props.dimensions,\n    });\n\n    let innerLayout;\n\n    const childrenArray: any[] = React.Children.toArray(props.children);\n    switch (props.dimensions) {\n        case '1/3':\n        case '3/1':\n        case '2/2':\n            innerLayout = (\n                <>\n                    {childrenArray?.[0] && <div>{childrenArray[0]}</div>}\n                    {childrenArray?.[1] && <div className={childrenArray[1]?.type?.name === InputGroup.name ? 'no-marg' : ''}>{childrenArray[1]}</div>}\n                </>\n            );\n\n            break;\n        case '1':\n        default:\n            innerLayout = props.children;\n            break;\n    }\n\n    return <div className={classes}>{innerLayout}</div>;\n}\n"]}

package/dist/src/components/generic/Layout/StepLayout/StepLayoutContainer.js

@@ -14,10 +14,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const StepLayout_module_scss_1 = __importDefault(require("./StepLayout.module.scss"));
 const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
 const FullPageEngineSmallSpacingFeature_1 = __importDefault(require("../../../../providers/feature/FullPageEngineSmallSpacingFeature"));
+const StepLayout_module_scss_1 = __importDefault(require("./StepLayout.module.scss"));
 const StepLayoutContainer = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(StepLayout_module_scss_1.default.container, className, {

package/dist/src/components/generic/Layout/StepLayout/StepLayoutContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepLayoutContainer.js","sourceRoot":"/","sources":["src/components/generic/Layout/StepLayout/StepLayoutContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAAqD;AACrD,sFAA8C;AAC9C,4DAAoC;AACpC,8HAAsG;AAEtG,MAAM,mBAAmB,GAAwD,CAAC,EAAuB,EAAE,EAAE;QAA3B,EAAE,SAAS,OAAY,EAAP,KAAK,cAArB,aAAuB,CAAF;IACnG,OAAO,CACH,qDACI,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAM,CAAC,SAAS,EAAE,SAAS,EAAE;YAC/C,CAAC,gCAAM,CAAC,SAAS,CAAC,CAAC,EAAE,2CAAiC,CAAC,QAAQ,EAAE;SACpE,CAAC,IACE,KAAK,EACX,CACL,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,mBAAmB,CAAC","sourcesContent":["import React, { FC, PropsWithChildren } from 'react';\nimport styles from './StepLayout.module.scss';\nimport classNames from 'classnames';\nimport FullPageEngineSmallSpacingFeature from '@/providers/feature/FullPageEngineSmallSpacingFeature';\n\nconst StepLayoutContainer: FC<PropsWithChildren<JSX.IntrinsicElements['div']>> = ({ className, ...props }) => {\n    return (\n        <div\n            className={classNames(styles.container, className, {\n                [styles['no-gaps']]: FullPageEngineSmallSpacingFeature.isActive(),\n            })}\n            {...props}\n        />\n    );\n};\n\nexport default StepLayoutContainer;\n"]}
+{"version":3,"file":"StepLayoutContainer.js","sourceRoot":"/","sources":["src/components/generic/Layout/StepLayout/StepLayoutContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,4DAAoC;AACpC,kDAAqD;AAErD,8HAAsG;AAEtG,sFAA8C;AAE9C,MAAM,mBAAmB,GAAwD,CAAC,EAAuB,EAAE,EAAE;QAA3B,EAAE,SAAS,OAAY,EAAP,KAAK,cAArB,aAAuB,CAAF;IACnG,OAAO,CACH,qDACI,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAM,CAAC,SAAS,EAAE,SAAS,EAAE;YAC/C,CAAC,gCAAM,CAAC,SAAS,CAAC,CAAC,EAAE,2CAAiC,CAAC,QAAQ,EAAE;SACpE,CAAC,IACE,KAAK,EACX,CACL,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,mBAAmB,CAAC","sourcesContent":["import classNames from 'classnames';\nimport React, { FC, PropsWithChildren } from 'react';\n\nimport FullPageEngineSmallSpacingFeature from '@/providers/feature/FullPageEngineSmallSpacingFeature';\n\nimport styles from './StepLayout.module.scss';\n\nconst StepLayoutContainer: FC<PropsWithChildren<JSX.IntrinsicElements['div']>> = ({ className, ...props }) => {\n    return (\n        <div\n            className={classNames(styles.container, className, {\n                [styles['no-gaps']]: FullPageEngineSmallSpacingFeature.isActive(),\n            })}\n            {...props}\n        />\n    );\n};\n\nexport default StepLayoutContainer;\n"]}

package/dist/src/components/generic/Layout/StepLayout/StepLayoutLeftContent.js

@@ -14,9 +14,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importDefault(require("react"));
 const StepLayout_module_scss_1 = __importDefault(require("./StepLayout.module.scss"));
-const classnames_1 = __importDefault(require("classnames"));
 const StepLayoutLeftContent = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(StepLayout_module_scss_1.default.leftContent, className) }, props));

package/dist/src/components/generic/Layout/StepLayout/StepLayoutLeftContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepLayoutLeftContent.js","sourceRoot":"/","sources":["src/components/generic/Layout/StepLayout/StepLayoutLeftContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAAqD;AACrD,sFAA8C;AAC9C,4DAAoC;AAEpC,MAAM,qBAAqB,GAAwD,CAAC,EAAuB,EAAE,EAAE;QAA3B,EAAE,SAAS,OAAY,EAAP,KAAK,cAArB,aAAuB,CAAF;IACrG,OAAO,qDAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAM,CAAC,WAAW,EAAE,SAAS,CAAC,IAAM,KAAK,EAAI,CAAC;AACpF,CAAC,CAAC;AAEF,kBAAe,qBAAqB,CAAC","sourcesContent":["import React, { FC, PropsWithChildren } from 'react';\nimport styles from './StepLayout.module.scss';\nimport classNames from 'classnames';\n\nconst StepLayoutLeftContent: FC<PropsWithChildren<JSX.IntrinsicElements['div']>> = ({ className, ...props }) => {\n    return <div className={classNames(styles.leftContent, className)} {...props} />;\n};\n\nexport default StepLayoutLeftContent;\n"]}
+{"version":3,"file":"StepLayoutLeftContent.js","sourceRoot":"/","sources":["src/components/generic/Layout/StepLayout/StepLayoutLeftContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,4DAAoC;AACpC,kDAAqD;AAErD,sFAA8C;AAE9C,MAAM,qBAAqB,GAAwD,CAAC,EAAuB,EAAE,EAAE;QAA3B,EAAE,SAAS,OAAY,EAAP,KAAK,cAArB,aAAuB,CAAF;IACrG,OAAO,qDAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAM,CAAC,WAAW,EAAE,SAAS,CAAC,IAAM,KAAK,EAAI,CAAC;AACpF,CAAC,CAAC;AAEF,kBAAe,qBAAqB,CAAC","sourcesContent":["import classNames from 'classnames';\nimport React, { FC, PropsWithChildren } from 'react';\n\nimport styles from './StepLayout.module.scss';\n\nconst StepLayoutLeftContent: FC<PropsWithChildren<JSX.IntrinsicElements['div']>> = ({ className, ...props }) => {\n    return <div className={classNames(styles.leftContent, className)} {...props} />;\n};\n\nexport default StepLayoutLeftContent;\n"]}

package/dist/src/components/generic/Layout/StepLayout/StepLayoutRightContent.js

@@ -14,9 +14,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importDefault(require("react"));
 const StepLayout_module_scss_1 = __importDefault(require("./StepLayout.module.scss"));
-const classnames_1 = __importDefault(require("classnames"));
 const StepLayoutRightContent = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(StepLayout_module_scss_1.default.rightContent, className) }, props));

package/dist/src/components/generic/Layout/StepLayout/StepLayoutRightContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepLayoutRightContent.js","sourceRoot":"/","sources":["src/components/generic/Layout/StepLayout/StepLayoutRightContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAAqD;AACrD,sFAA8C;AAC9C,4DAAoC;AAEpC,MAAM,sBAAsB,GAAwD,CAAC,EAAuB,EAAE,EAAE;QAA3B,EAAE,SAAS,OAAY,EAAP,KAAK,cAArB,aAAuB,CAAF;IACtG,OAAO,qDAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAM,CAAC,YAAY,EAAE,SAAS,CAAC,IAAM,KAAK,EAAI,CAAC;AACrF,CAAC,CAAC;AAEF,kBAAe,sBAAsB,CAAC","sourcesContent":["import React, { FC, PropsWithChildren } from 'react';\nimport styles from './StepLayout.module.scss';\nimport classNames from 'classnames';\n\nconst StepLayoutRightContent: FC<PropsWithChildren<JSX.IntrinsicElements['div']>> = ({ className, ...props }) => {\n    return <div className={classNames(styles.rightContent, className)} {...props} />;\n};\n\nexport default StepLayoutRightContent;\n"]}
+{"version":3,"file":"StepLayoutRightContent.js","sourceRoot":"/","sources":["src/components/generic/Layout/StepLayout/StepLayoutRightContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,4DAAoC;AACpC,kDAAqD;AAErD,sFAA8C;AAE9C,MAAM,sBAAsB,GAAwD,CAAC,EAAuB,EAAE,EAAE;QAA3B,EAAE,SAAS,OAAY,EAAP,KAAK,cAArB,aAAuB,CAAF;IACtG,OAAO,qDAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAM,CAAC,YAAY,EAAE,SAAS,CAAC,IAAM,KAAK,EAAI,CAAC;AACrF,CAAC,CAAC;AAEF,kBAAe,sBAAsB,CAAC","sourcesContent":["import classNames from 'classnames';\nimport React, { FC, PropsWithChildren } from 'react';\n\nimport styles from './StepLayout.module.scss';\n\nconst StepLayoutRightContent: FC<PropsWithChildren<JSX.IntrinsicElements['div']>> = ({ className, ...props }) => {\n    return <div className={classNames(styles.rightContent, className)} {...props} />;\n};\n\nexport default StepLayoutRightContent;\n"]}

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

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
 function LineBreak(props) {
     const classes = (0, classnames_1.default)('line-break', {
         '--darker': props.darker,

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

@@ -1 +1 @@
-{"version":3,"file":"LineBreak.js","sourceRoot":"/","sources":["src/components/generic/LineBreak.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AASpC,SAAwB,SAAS,CAAC,KAAqB;IACnD,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,YAAY,EAAE;QACrC,UAAU,EAAE,KAAK,CAAC,MAAM;QACxB,WAAW,EAAE,KAAK,CAAC,YAAY;QAC/B,aAAa,EAAE,KAAK,CAAC,SAAS;QAC9B,cAAc,EAAE,KAAK,CAAC,SAAS;KAClC,CAAC,CAAC;IAEH,OAAO,uCAAK,SAAS,EAAE,OAAO,GAAI,CAAC;AACvC,CAAC;AATD,4BASC","sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nexport interface LineBreakProps {\n    darker?: boolean;\n    noMargins?: boolean;\n    smallMargins?: boolean;\n    fullBleed?: boolean;\n}\n\nexport default function LineBreak(props: LineBreakProps) {\n    const classes = classNames('line-break', {\n        '--darker': props.darker,\n        '--smaller': props.smallMargins,\n        'u-marg-none': props.noMargins,\n        '--full-bleed': props.fullBleed,\n    });\n\n    return <div className={classes} />;\n}\n"]}
+{"version":3,"file":"LineBreak.js","sourceRoot":"/","sources":["src/components/generic/LineBreak.tsx"],"names":[],"mappings":";;;;;AAAA,4DAAoC;AACpC,kDAA0B;AAS1B,SAAwB,SAAS,CAAC,KAAqB;IACnD,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,YAAY,EAAE;QACrC,UAAU,EAAE,KAAK,CAAC,MAAM;QACxB,WAAW,EAAE,KAAK,CAAC,YAAY;QAC/B,aAAa,EAAE,KAAK,CAAC,SAAS;QAC9B,cAAc,EAAE,KAAK,CAAC,SAAS;KAClC,CAAC,CAAC;IAEH,OAAO,uCAAK,SAAS,EAAE,OAAO,GAAI,CAAC;AACvC,CAAC;AATD,4BASC","sourcesContent":["import classNames from 'classnames';\nimport React from 'react';\n\nexport interface LineBreakProps {\n    darker?: boolean;\n    noMargins?: boolean;\n    smallMargins?: boolean;\n    fullBleed?: boolean;\n}\n\nexport default function LineBreak(props: LineBreakProps) {\n    const classes = classNames('line-break', {\n        '--darker': props.darker,\n        '--smaller': props.smallMargins,\n        'u-marg-none': props.noMargins,\n        '--full-bleed': props.fullBleed,\n    });\n\n    return <div className={classes} />;\n}\n"]}

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

@@ -22,18 +22,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const web_1 = require("@react-spring/web");
+const react_1 = __importStar(require("react"));
 const Icon_1 = __importStar(require("./Icon/Icon"));
 const Color_1 = require("../../util/Color");
-const web_1 = require("@react-spring/web");
-const react_2 = require("react");
 function Notification(props) {
     const { icon, children } = props.data;
-    const [goAway, setGoAway] = (0, react_2.useState)(false);
+    const [goAway, setGoAway] = (0, react_1.useState)(false);
     const right = (0, web_1.useSpring)({
         delay: 1200,
         config: { mass: 50, tension: 170, friction: 200 },

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sourceRoot":"/","sources":["src/components/generic/Notification.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,uEAAgE;AAChE,wCAAqC;AACrC,2CAAwD;AACxD,iCAAiC;AAejC,SAAwB,YAAY,CAAC,KAAwB;IACzD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC;IAEtC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,KAAK,GAAG,IAAA,eAAS,EAAC;QACpB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE;QACjD,EAAE,EAAE;YACA,KAAK,EAAE,GAAG;SACb;QACD,IAAI,EAAE;YACF,KAAK,EAAE,MAAM;SAChB;QACD,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;KAChC,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,IAAA,eAAS,EAAC;QACtB,IAAI,EAAE;YACF,OAAO,EAAE,CAAC;SACb;QACD,EAAE,EAAE;YACA,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC1B;QACD,MAAM,EAAE,GAAG,EAAE,WAAC,OAAA,KAAK,CAAC,IAAI,CAAC,EAAE,KAAI,MAAA,KAAK,CAAC,QAAQ,sDAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA,CAAA,EAAA;KAC1D,CAAC,CAAC;IACV,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC5B,SAAS,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,CAAC;IACF,OAAO,CACH,8BAAC,cAAQ,CAAC,GAAG,IAAC,SAAS,EAAC,mCAAmC,EAAC,KAAK,EAAE,OAAO;QACtE,uCAAK,SAAS,EAAC,uBAAuB;YAClC,8BAAC,cAAQ,CAAC,GAAG,IAAC,SAAS,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,GAAI;YACjF,uCAAK,SAAS,EAAC,QAAQ;gBACnB,uCAAK,SAAS,EAAC,cAAc;oBACzB,8BAAC,cAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,aAAK,CAAC,MAAM,GAAI;oBACzC,uCAAK,SAAS,EAAC,sBAAsB,IAAE,QAAQ,CAAO,CACpD;gBACN,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,kBAAkB,GAAI,CACrE,CACJ,CACK,CAClB,CAAC;AACN,CAAC;AA3CD,+BA2CC","sourcesContent":["import React from 'react';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Color } from '@/util/Color';\nimport { useSpring, animated } from '@react-spring/web';\nimport { useState } from 'react';\n\nexport interface NotificationType {\n    icon: IconType;\n    children?: React.ReactNode;\n    // in milliseconds\n\n    id?: number;\n}\n\ninterface NotificationProps {\n    data: NotificationType;\n    onRemove?: (id: number) => void;\n}\n\nexport default function Notification(props: NotificationProps) {\n    const { icon, children } = props.data;\n\n    const [goAway, setGoAway] = useState(false);\n\n    const right = useSpring({\n        delay: 1200,\n        config: { mass: 50, tension: 170, friction: 200 },\n        to: {\n            right: '0',\n        },\n        from: {\n            right: '100%',\n        },\n        onRest: () => setGoAway(true),\n    });\n\n    const outAnim = useSpring({\n        from: {\n            opacity: 1,\n        },\n        to: {\n            opacity: goAway ? 0 : 1,\n        },\n        onRest: () => props.data.id && props.onRemove?.(props.data.id),\n    } as any);\n    const iconOnClickHandler = () => {\n        setGoAway(true);\n    };\n    return (\n        <animated.div className=\"c-notification a-bounce-down-left\" style={outAnim}>\n            <div className=\"c-notification__inner\">\n                <animated.div className=\"c-notification__timer\" style={{ right: right.right }} />\n                <div className=\"u-flex\">\n                    <div className=\"u-flex__item\">\n                        <Icon icon={icon} color={Color.Accent} />\n                        <div className=\"u-inline u-marg-left\">{children}</div>\n                    </div>\n                    <Icon icon={IconType.Close} size=\"24px\" onClick={iconOnClickHandler} />\n                </div>\n            </div>\n        </animated.div>\n    );\n}\n"]}
+{"version":3,"file":"Notification.js","sourceRoot":"/","sources":["src/components/generic/Notification.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAAwD;AACxD,+CAAwC;AAExC,uEAAgE;AAChE,wCAAqC;AAerC,SAAwB,YAAY,CAAC,KAAwB;IACzD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC;IAEtC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,KAAK,GAAG,IAAA,eAAS,EAAC;QACpB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE;QACjD,EAAE,EAAE;YACA,KAAK,EAAE,GAAG;SACb;QACD,IAAI,EAAE;YACF,KAAK,EAAE,MAAM;SAChB;QACD,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;KAChC,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,IAAA,eAAS,EAAC;QACtB,IAAI,EAAE;YACF,OAAO,EAAE,CAAC;SACb;QACD,EAAE,EAAE;YACA,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC1B;QACD,MAAM,EAAE,GAAG,EAAE,WAAC,OAAA,KAAK,CAAC,IAAI,CAAC,EAAE,KAAI,MAAA,KAAK,CAAC,QAAQ,sDAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA,CAAA,EAAA;KAC1D,CAAC,CAAC;IACV,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC5B,SAAS,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,CAAC;IACF,OAAO,CACH,8BAAC,cAAQ,CAAC,GAAG,IAAC,SAAS,EAAC,mCAAmC,EAAC,KAAK,EAAE,OAAO;QACtE,uCAAK,SAAS,EAAC,uBAAuB;YAClC,8BAAC,cAAQ,CAAC,GAAG,IAAC,SAAS,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,GAAI;YACjF,uCAAK,SAAS,EAAC,QAAQ;gBACnB,uCAAK,SAAS,EAAC,cAAc;oBACzB,8BAAC,cAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,aAAK,CAAC,MAAM,GAAI;oBACzC,uCAAK,SAAS,EAAC,sBAAsB,IAAE,QAAQ,CAAO,CACpD;gBACN,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,kBAAkB,GAAI,CACrE,CACJ,CACK,CAClB,CAAC;AACN,CAAC;AA3CD,+BA2CC","sourcesContent":["import { animated, useSpring } from '@react-spring/web';\nimport React, { useState } from 'react';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Color } from '@/util/Color';\n\nexport interface NotificationType {\n    icon: IconType;\n    children?: React.ReactNode;\n    // in milliseconds\n\n    id?: number;\n}\n\ninterface NotificationProps {\n    data: NotificationType;\n    onRemove?: (id: number) => void;\n}\n\nexport default function Notification(props: NotificationProps) {\n    const { icon, children } = props.data;\n\n    const [goAway, setGoAway] = useState(false);\n\n    const right = useSpring({\n        delay: 1200,\n        config: { mass: 50, tension: 170, friction: 200 },\n        to: {\n            right: '0',\n        },\n        from: {\n            right: '100%',\n        },\n        onRest: () => setGoAway(true),\n    });\n\n    const outAnim = useSpring({\n        from: {\n            opacity: 1,\n        },\n        to: {\n            opacity: goAway ? 0 : 1,\n        },\n        onRest: () => props.data.id && props.onRemove?.(props.data.id),\n    } as any);\n    const iconOnClickHandler = () => {\n        setGoAway(true);\n    };\n    return (\n        <animated.div className=\"c-notification a-bounce-down-left\" style={outAnim}>\n            <div className=\"c-notification__inner\">\n                <animated.div className=\"c-notification__timer\" style={{ right: right.right }} />\n                <div className=\"u-flex\">\n                    <div className=\"u-flex__item\">\n                        <Icon icon={icon} color={Color.Accent} />\n                        <div className=\"u-inline u-marg-left\">{children}</div>\n                    </div>\n                    <Icon icon={IconType.Close} size=\"24px\" onClick={iconOnClickHandler} />\n                </div>\n            </div>\n        </animated.div>\n    );\n}\n"]}

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

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const Text_1 = __importStar(require("./Text"));
 const Icon_1 = __importStar(require("./Icon/Icon"));
+const Text_1 = __importStar(require("./Text"));
 const Tooltip_1 = __importDefault(require("./Tooltip/Tooltip"));
 function NumberIncrement(props) {
     const { textSize = Text_1.TextType.Body } = props;

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

@@ -1 +1 @@
-{"version":3,"file":"NumberIncrement.js","sourceRoot":"/","sources":["src/components/generic/NumberIncrement.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,kEAA2D;AAC3D,uEAAgE;AAEhE,mFAA2D;AAU3D,SAAwB,eAAe,CAAC,KAA2B;IAC/D,MAAM,EAAE,QAAQ,GAAG,eAAQ,CAAC,IAAI,EAAE,GAAG,KAAK,CAAC;IAE3C,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtD,MAAM,SAAS,GAAG,CAAC,SAAiB,EAAE,EAAE;QACpC,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;SAC7B;IACL,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,SAAkB,EAAE,EAAE;QAC/C,IAAI,SAAS,GAAG,aAAa,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAErD,IAAI,SAAS,EAAE;YACX,IAAI,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,SAAS,IAAI,KAAK,CAAC,GAAG,EAAE;gBACzD,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC;aACzB;SACJ;aAAM;YACH,IAAI,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,SAAS,IAAI,KAAK,CAAC,GAAG,EAAE;gBACzD,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC;aACzB;SACJ;QAED,SAAS,CAAC,SAAS,CAAC,CAAC;IACzB,CAAC,CAAC;IACF,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAChC,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IACF,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAChC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC;IACF,OAAO,CACH,uCAAK,SAAS,EAAC,kBAAkB;QAC7B,8BAAC,iBAAO,IAAC,KAAK,EAAE,aAAa,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,UAAU;YAC9E,uCAAK,SAAS,EAAE,0BAA0B,GAAG,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,sBAAsB;gBAChI,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,GAAG,CACzC,CACA;QACV,uCAAK,SAAS,EAAC,yBAAyB;YACpC,8BAAC,cAAI,IAAC,IAAI,EAAE,QAAQ,IAAG,aAAa,CAAQ,CAC1C;QACN,8BAAC,iBAAO,IAAC,KAAK,EAAE,aAAa,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK;YACzE,uCAAK,SAAS,EAAE,0BAA0B,GAAG,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,sBAAsB;gBAChI,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,GAAG,EAAE,IAAI,EAAC,MAAM,GAAG,CACtC,CACA,CACR,CACT,CAAC;AACN,CAAC;AAjDD,kCAiDC","sourcesContent":["import React from 'react';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\n\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\n\nexport interface NumberIncrementProps {\n    number?: number;\n    onChange?: (value: number) => void;\n    min?: number;\n    max?: number;\n    textSize?: TextType;\n}\n\nexport default function NumberIncrement(props: NumberIncrementProps) {\n    const { textSize = TextType.Body } = props;\n\n    const currentNumber = props.number ? props.number : 0;\n\n    const setNumber = (newNumber: number) => {\n        if (props.onChange) {\n            props.onChange(newNumber);\n        }\n    };\n\n    const updateCurrentNumber = (increment: boolean) => {\n        let newNumber = currentNumber + (increment ? 1 : -1);\n\n        if (increment) {\n            if (typeof props.max === 'number' && newNumber >= props.max) {\n                newNumber = props.max;\n            }\n        } else {\n            if (typeof props.min === 'number' && newNumber <= props.min) {\n                newNumber = props.min;\n            }\n        }\n\n        setNumber(newNumber);\n    };\n    const decrementCurrentNumber = () => {\n        updateCurrentNumber(false);\n    };\n    const incrementCurrentNumber = () => {\n        updateCurrentNumber(true);\n    };\n    return (\n        <div className=\"number-increment\">\n            <Tooltip title={currentNumber <= (props.min || 0) ? 'Minimum reached' : 'Decrease'}>\n                <div className={'number-increment--button' + (currentNumber <= (props.min || 0) ? ' disabled' : '')} onClick={decrementCurrentNumber}>\n                    <Icon icon={IconType.Remove} size=\"24px\" />\n                </div>\n            </Tooltip>\n            <div className=\"number-increment--value\">\n                <Text type={textSize}>{currentNumber}</Text>\n            </div>\n            <Tooltip title={currentNumber >= (props.max || 0) ? 'Maximum reached' : 'Add'}>\n                <div className={'number-increment--button' + (currentNumber >= (props.max || 0) ? ' disabled' : '')} onClick={incrementCurrentNumber}>\n                    <Icon icon={IconType.Add} size=\"24px\" />\n                </div>\n            </Tooltip>\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"NumberIncrement.js","sourceRoot":"/","sources":["src/components/generic/NumberIncrement.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAE1B,uEAAgE;AAChE,kEAA2D;AAC3D,mFAA2D;AAU3D,SAAwB,eAAe,CAAC,KAA2B;IAC/D,MAAM,EAAE,QAAQ,GAAG,eAAQ,CAAC,IAAI,EAAE,GAAG,KAAK,CAAC;IAE3C,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtD,MAAM,SAAS,GAAG,CAAC,SAAiB,EAAE,EAAE;QACpC,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;SAC7B;IACL,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,SAAkB,EAAE,EAAE;QAC/C,IAAI,SAAS,GAAG,aAAa,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAErD,IAAI,SAAS,EAAE;YACX,IAAI,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,SAAS,IAAI,KAAK,CAAC,GAAG,EAAE;gBACzD,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC;aACzB;SACJ;aAAM;YACH,IAAI,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,SAAS,IAAI,KAAK,CAAC,GAAG,EAAE;gBACzD,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC;aACzB;SACJ;QAED,SAAS,CAAC,SAAS,CAAC,CAAC;IACzB,CAAC,CAAC;IACF,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAChC,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IACF,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAChC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC;IACF,OAAO,CACH,uCAAK,SAAS,EAAC,kBAAkB;QAC7B,8BAAC,iBAAO,IAAC,KAAK,EAAE,aAAa,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,UAAU;YAC9E,uCAAK,SAAS,EAAE,0BAA0B,GAAG,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,sBAAsB;gBAChI,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,GAAG,CACzC,CACA;QACV,uCAAK,SAAS,EAAC,yBAAyB;YACpC,8BAAC,cAAI,IAAC,IAAI,EAAE,QAAQ,IAAG,aAAa,CAAQ,CAC1C;QACN,8BAAC,iBAAO,IAAC,KAAK,EAAE,aAAa,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK;YACzE,uCAAK,SAAS,EAAE,0BAA0B,GAAG,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,sBAAsB;gBAChI,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,GAAG,EAAE,IAAI,EAAC,MAAM,GAAG,CACtC,CACA,CACR,CACT,CAAC;AACN,CAAC;AAjDD,kCAiDC","sourcesContent":["import React from 'react';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\n\nexport interface NumberIncrementProps {\n    number?: number;\n    onChange?: (value: number) => void;\n    min?: number;\n    max?: number;\n    textSize?: TextType;\n}\n\nexport default function NumberIncrement(props: NumberIncrementProps) {\n    const { textSize = TextType.Body } = props;\n\n    const currentNumber = props.number ? props.number : 0;\n\n    const setNumber = (newNumber: number) => {\n        if (props.onChange) {\n            props.onChange(newNumber);\n        }\n    };\n\n    const updateCurrentNumber = (increment: boolean) => {\n        let newNumber = currentNumber + (increment ? 1 : -1);\n\n        if (increment) {\n            if (typeof props.max === 'number' && newNumber >= props.max) {\n                newNumber = props.max;\n            }\n        } else {\n            if (typeof props.min === 'number' && newNumber <= props.min) {\n                newNumber = props.min;\n            }\n        }\n\n        setNumber(newNumber);\n    };\n    const decrementCurrentNumber = () => {\n        updateCurrentNumber(false);\n    };\n    const incrementCurrentNumber = () => {\n        updateCurrentNumber(true);\n    };\n    return (\n        <div className=\"number-increment\">\n            <Tooltip title={currentNumber <= (props.min || 0) ? 'Minimum reached' : 'Decrease'}>\n                <div className={'number-increment--button' + (currentNumber <= (props.min || 0) ? ' disabled' : '')} onClick={decrementCurrentNumber}>\n                    <Icon icon={IconType.Remove} size=\"24px\" />\n                </div>\n            </Tooltip>\n            <div className=\"number-increment--value\">\n                <Text type={textSize}>{currentNumber}</Text>\n            </div>\n            <Tooltip title={currentNumber >= (props.max || 0) ? 'Maximum reached' : 'Add'}>\n                <div className={'number-increment--button' + (currentNumber >= (props.max || 0) ? ' disabled' : '')} onClick={incrementCurrentNumber}>\n                    <Icon icon={IconType.Add} size=\"24px\" />\n                </div>\n            </Tooltip>\n        </div>\n    );\n}\n"]}

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

@@ -1,5 +1,5 @@
-import { LegacyRef, ReactNode } from 'react';
 import { Placement, PositioningStrategy } from '@popperjs/core';
+import { LegacyRef, ReactNode } from 'react';
 export type OverlayProps = {
     children: ReactNode | ReactNode[];
     open: boolean;

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

@@ -27,13 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Overlay = void 0;
+const hooks_1 = require("../../../hooks/index.js");
+const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const react_popper_1 = require("react-popper");
-const Overlay_module_scss_1 = __importDefault(require("./Overlay.module.scss"));
-const Portal_1 = require("../Portal/Portal");
-const hooks_1 = require("../../../hooks/index.js");
 const Fade_1 = __importDefault(require("../../../animations/Fade"));
-const classnames_1 = __importDefault(require("classnames"));
+const Portal_1 = require("../Portal/Portal");
+const Overlay_module_scss_1 = __importDefault(require("./Overlay.module.scss"));
 const Overlay = (props) => {
     var _a, _b, _c;
     const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);

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 React, { LegacyRef, ReactNode, useEffect, useLayoutEffect, useState } from 'react';\nimport { Modifier, usePopper } from 'react-popper';\n\nimport styles from './Overlay.module.scss';\nimport { RoomstayPortal } from '@/components/generic/Portal/Portal';\nimport { useBodyClick } from '@frontend/hooks';\nimport FadeAnimation from '@/animations/Fade';\nimport classNames from 'classnames';\nimport { Placement, PositioningStrategy } from '@popperjs/core';\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';\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"]}

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

@@ -27,13 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PasswordBox = void 0;
-const react_1 = __importDefault(require("react"));
-const react_2 = require("react");
+const react_1 = __importStar(require("react"));
 const Icon_1 = __importStar(require("../Icon/Icon"));
 const TextBox_1 = __importDefault(require("../TextBox"));
 const PasswordBox_module_scss_1 = __importDefault(require("./PasswordBox.module.scss"));
-exports.PasswordBox = (0, react_2.forwardRef)(function PasswordBox(props, ref) {
-    const [canSeePassword, setCanSeePassword] = (0, react_2.useState)(false);
+exports.PasswordBox = (0, react_1.forwardRef)(function PasswordBox(props, ref) {
+    const [canSeePassword, setCanSeePassword] = (0, react_1.useState)(false);
     const inputProperties = Object.assign(Object.assign({}, props), { type: canSeePassword ? 'text' : 'password' });
     const onSwitch = () => {
         setCanSeePassword(!canSeePassword);

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordBox.js","sourceRoot":"/","sources":["src/components/generic/PasswordBox/PasswordBox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,iCAA6C;AAC7C,uEAAgE;AAChE,yDAAmD;AACnD,wFAA+C;AAElC,QAAA,WAAW,GAAG,IAAA,kBAAU,EAAiC,SAAS,WAAW,CAAC,KAAK,EAAE,GAAG;IACjG,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5D,MAAM,eAAe,mCACd,KAAK,KACR,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,GAC7C,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QAClB,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,OAAO,CACH;QACI,uCAAK,SAAS,EAAE,iCAAM,CAAC,WAAW;YAC9B,8BAAC,iBAAO,kBAAC,GAAG,EAAE,GAAG,IAAM,eAAe,EAAI;YAC1C,8BAAC,cAAI,IAAC,SAAS,EAAE,iCAAM,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,eAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,eAAQ,CAAC,GAAG,EAAE,OAAO,EAAE,QAAQ,GAAI,CACtH,CACP,CACN,CAAC;AACN,CAAC,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { forwardRef, useState } from 'react';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport TextBox, { TextBoxProps } from '../TextBox';\nimport styles from './PasswordBox.module.scss';\n\nexport const PasswordBox = forwardRef<HTMLInputElement, TextBoxProps>(function PasswordBox(props, ref) {\n    const [canSeePassword, setCanSeePassword] = useState(false);\n\n    const inputProperties: TextBoxProps = {\n        ...props,\n        type: canSeePassword ? 'text' : 'password',\n    };\n\n    const onSwitch = () => {\n        setCanSeePassword(!canSeePassword);\n    };\n\n    return (\n        <>\n            <div className={styles.passwordbox}>\n                <TextBox ref={ref} {...inputProperties} />\n                <Icon className={styles['suffix-icon']} icon={canSeePassword ? IconType.EyeBlocked : IconType.Eye} onClick={onSwitch} />\n            </div>\n        </>\n    );\n});\n"]}
+{"version":3,"file":"PasswordBox.js","sourceRoot":"/","sources":["src/components/generic/PasswordBox/PasswordBox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AAEpD,uEAAgE;AAEhE,yDAAmD;AACnD,wFAA+C;AAElC,QAAA,WAAW,GAAG,IAAA,kBAAU,EAAiC,SAAS,WAAW,CAAC,KAAK,EAAE,GAAG;IACjG,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5D,MAAM,eAAe,mCACd,KAAK,KACR,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,GAC7C,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QAClB,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,OAAO,CACH;QACI,uCAAK,SAAS,EAAE,iCAAM,CAAC,WAAW;YAC9B,8BAAC,iBAAO,kBAAC,GAAG,EAAE,GAAG,IAAM,eAAe,EAAI;YAC1C,8BAAC,cAAI,IAAC,SAAS,EAAE,iCAAM,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,eAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,eAAQ,CAAC,GAAG,EAAE,OAAO,EAAE,QAAQ,GAAI,CACtH,CACP,CACN,CAAC;AACN,CAAC,CAAC,CAAC","sourcesContent":["import React, { forwardRef, useState } from 'react';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\n\nimport TextBox, { TextBoxProps } from '../TextBox';\nimport styles from './PasswordBox.module.scss';\n\nexport const PasswordBox = forwardRef<HTMLInputElement, TextBoxProps>(function PasswordBox(props, ref) {\n    const [canSeePassword, setCanSeePassword] = useState(false);\n\n    const inputProperties: TextBoxProps = {\n        ...props,\n        type: canSeePassword ? 'text' : 'password',\n    };\n\n    const onSwitch = () => {\n        setCanSeePassword(!canSeePassword);\n    };\n\n    return (\n        <>\n            <div className={styles.passwordbox}>\n                <TextBox ref={ref} {...inputProperties} />\n                <Icon className={styles['suffix-icon']} icon={canSeePassword ? IconType.EyeBlocked : IconType.Eye} onClick={onSwitch} />\n            </div>\n        </>\n    );\n});\n"]}

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

@@ -4,13 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardTypeSelect = void 0;
+const hooks_1 = require("../../../hooks/index.js");
+const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importDefault(require("react"));
+const Hotel_1 = require("../../../models/Client/Hotel/Hotel");
 const PaymentCard_1 = require("../../../models/PaymentCard");
-const CardTypeSelect_module_scss_1 = __importDefault(require("./CardTypeSelect.module.scss"));
-const classnames_1 = __importDefault(require("classnames"));
 const PaymentCardHelper_1 = require("../../../util/PaymentCardHelper");
-const hooks_1 = require("../../../hooks/index.js");
-const Hotel_1 = require("../../../models/Client/Hotel/Hotel");
+const CardTypeSelect_module_scss_1 = __importDefault(require("./CardTypeSelect.module.scss"));
 const cardType2HotelCardType = {
     [PaymentCard_1.ECardType.Visa]: Hotel_1.EPaymentCardType.Visa,
     [PaymentCard_1.ECardType.Mastercard]: Hotel_1.EPaymentCardType.Mastercard,

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

@@ -1 +1 @@
-{"version":3,"file":"CardTypeSelect.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/CardTypeSelect.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,sDAAiD;AACjD,8FAAkD;AAClD,4DAAoC;AACpC,gEAAgE;AAChE,2CAAkD;AAClD,uDAA+D;AAQ/D,MAAM,sBAAsB,GAExB;IACA,CAAC,uBAAS,CAAC,IAAI,CAAC,EAAE,wBAAgB,CAAC,IAAI;IACvC,CAAC,uBAAS,CAAC,UAAU,CAAC,EAAE,wBAAgB,CAAC,UAAU;IACnD,CAAC,uBAAS,CAAC,eAAe,CAAC,EAAE,wBAAgB,CAAC,eAAe;IAC7D,CAAC,uBAAS,CAAC,GAAG,CAAC,EAAE,wBAAgB,CAAC,GAAG;CACxC,CAAC;AACK,MAAM,cAAc,GAA4B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3E,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IACpC,OAAO,CACH,uCAAK,SAAS,EAAE,oCAAM,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,IAC1C,MAAM,CAAC,MAAM,CAAC,uBAAS,CAAC;SACpB,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE;;QACjB,MAAM,eAAe,GAAG,sBAAsB,CAAC,QAAQ,CAAC,CAAC;QACzD,OAAO,eAAe,KAAI,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB,0CAAE,QAAQ,CAAC,eAAe,CAAC,CAAA,CAAC;IACjF,CAAC,CAAC;SACD,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;QACd,MAAM,OAAO,GAAG,IAAA,wCAAoB,EAAC,QAAQ,CAAC,CAAC,WAAW,CAAC;QAE3D,OAAO,CACH,uCACI,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,oBAAU,EAAC,oCAAM,CAAC,IAAI,EAAE;gBAC/B,CAAC,oCAAM,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,QAAQ;aAC1C,CAAC;YAEF,uCAAK,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,GAAI,CAClC,CACT,CAAC;IACN,CAAC,CAAC,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAzBW,QAAA,cAAc,kBAyBzB","sourcesContent":["import React from 'react';\nimport { FC, FormEvent } from 'react';\nimport { ECardType } from '@/models/PaymentCard';\nimport styles from './CardTypeSelect.module.scss';\nimport classNames from 'classnames';\nimport { mapCardTypeToGraphic } from '@/util/PaymentCardHelper';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { EPaymentCardType } from '@/models/Client/Hotel/Hotel';\n\nexport interface CardTypeSelectProps {\n    value?: ECardType;\n    onChange?: (e: FormEvent<HTMLDivElement>) => void;\n    name?: string;\n}\n\nconst cardType2HotelCardType: {\n    [cardType in ECardType]?: EPaymentCardType;\n} = {\n    [ECardType.Visa]: EPaymentCardType.Visa,\n    [ECardType.Mastercard]: EPaymentCardType.Mastercard,\n    [ECardType.AmericanExpress]: EPaymentCardType.AmericanExpress,\n    [ECardType.JCB]: EPaymentCardType.JCB,\n};\nexport const CardTypeSelect: FC<CardTypeSelectProps> = ({ value, onChange }) => {\n    const { hotel } = useCurrentHotel();\n    return (\n        <div className={styles.root} onChange={onChange}>\n            {Object.values(ECardType)\n                .filter((cardType) => {\n                    const paymentCardType = cardType2HotelCardType[cardType];\n                    return paymentCardType && hotel?.paymentCardTypes?.includes(paymentCardType);\n                })\n                .map((cardType) => {\n                    const iconUrl = mapCardTypeToGraphic(cardType).cardIconUrl;\n\n                    return (\n                        <div\n                            key={cardType}\n                            className={classNames(styles.icon, {\n                                [styles.isSelected]: value === cardType,\n                            })}\n                        >\n                            <img src={iconUrl} alt={cardType} />\n                        </div>\n                    );\n                })}\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"CardTypeSelect.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/CardTypeSelect.tsx"],"names":[],"mappings":";;;;;;AAAA,2CAAkD;AAClD,4DAAoC;AACpC,kDAA6C;AAE7C,uDAA+D;AAC/D,sDAAiD;AACjD,gEAAgE;AAEhE,8FAAkD;AAQlD,MAAM,sBAAsB,GAExB;IACA,CAAC,uBAAS,CAAC,IAAI,CAAC,EAAE,wBAAgB,CAAC,IAAI;IACvC,CAAC,uBAAS,CAAC,UAAU,CAAC,EAAE,wBAAgB,CAAC,UAAU;IACnD,CAAC,uBAAS,CAAC,eAAe,CAAC,EAAE,wBAAgB,CAAC,eAAe;IAC7D,CAAC,uBAAS,CAAC,GAAG,CAAC,EAAE,wBAAgB,CAAC,GAAG;CACxC,CAAC;AACK,MAAM,cAAc,GAA4B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3E,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IACpC,OAAO,CACH,uCAAK,SAAS,EAAE,oCAAM,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,IAC1C,MAAM,CAAC,MAAM,CAAC,uBAAS,CAAC;SACpB,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE;;QACjB,MAAM,eAAe,GAAG,sBAAsB,CAAC,QAAQ,CAAC,CAAC;QACzD,OAAO,eAAe,KAAI,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB,0CAAE,QAAQ,CAAC,eAAe,CAAC,CAAA,CAAC;IACjF,CAAC,CAAC;SACD,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;QACd,MAAM,OAAO,GAAG,IAAA,wCAAoB,EAAC,QAAQ,CAAC,CAAC,WAAW,CAAC;QAE3D,OAAO,CACH,uCACI,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,oBAAU,EAAC,oCAAM,CAAC,IAAI,EAAE;gBAC/B,CAAC,oCAAM,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,QAAQ;aAC1C,CAAC;YAEF,uCAAK,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,GAAI,CAClC,CACT,CAAC;IACN,CAAC,CAAC,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAzBW,QAAA,cAAc,kBAyBzB","sourcesContent":["import { useCurrentHotel } from '@frontend/hooks';\nimport classNames from 'classnames';\nimport React, { FC, FormEvent } from 'react';\n\nimport { EPaymentCardType } from '@/models/Client/Hotel/Hotel';\nimport { ECardType } from '@/models/PaymentCard';\nimport { mapCardTypeToGraphic } from '@/util/PaymentCardHelper';\n\nimport styles from './CardTypeSelect.module.scss';\n\nexport interface CardTypeSelectProps {\n    value?: ECardType;\n    onChange?: (e: FormEvent<HTMLDivElement>) => void;\n    name?: string;\n}\n\nconst cardType2HotelCardType: {\n    [cardType in ECardType]?: EPaymentCardType;\n} = {\n    [ECardType.Visa]: EPaymentCardType.Visa,\n    [ECardType.Mastercard]: EPaymentCardType.Mastercard,\n    [ECardType.AmericanExpress]: EPaymentCardType.AmericanExpress,\n    [ECardType.JCB]: EPaymentCardType.JCB,\n};\nexport const CardTypeSelect: FC<CardTypeSelectProps> = ({ value, onChange }) => {\n    const { hotel } = useCurrentHotel();\n    return (\n        <div className={styles.root} onChange={onChange}>\n            {Object.values(ECardType)\n                .filter((cardType) => {\n                    const paymentCardType = cardType2HotelCardType[cardType];\n                    return paymentCardType && hotel?.paymentCardTypes?.includes(paymentCardType);\n                })\n                .map((cardType) => {\n                    const iconUrl = mapCardTypeToGraphic(cardType).cardIconUrl;\n\n                    return (\n                        <div\n                            key={cardType}\n                            className={classNames(styles.icon, {\n                                [styles.isSelected]: value === cardType,\n                            })}\n                        >\n                            <img src={iconUrl} alt={cardType} />\n                        </div>\n                    );\n                })}\n        </div>\n    );\n};\n"]}

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

@@ -3,10 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importDefault(require("react"));
 const RoomstayThemeEngine_1 = __importDefault(require("../../../providers/RoomstayThemeEngine"));
 const InlinePaymentCard_module_scss_1 = __importDefault(require("./InlinePaymentCard.module.scss"));
-const classnames_1 = __importDefault(require("classnames"));
 const InlinePaymentCard = ({ vgsCardName, large }) => {
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)(InlinePaymentCard_module_scss_1.default.root, {
             [InlinePaymentCard_module_scss_1.default['--large']]: large,

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

@@ -1 +1 @@
-{"version":3,"file":"InlinePaymentCard.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/InlinePaymentCard.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAkC;AAClC,0FAAkE;AAClE,oGAAqD;AAErD,4DAAoC;AAOpC,MAAM,iBAAiB,GAA+B,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7E,OAAO,CACH,uCACI,SAAS,EAAE,IAAA,oBAAU,EAAC,uCAAM,CAAC,IAAI,EAAE;YAC/B,CAAE,uCAAc,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK;SACtC,CAAC,EACF,KAAK,EAAE,EAAE,eAAe,EAAE,QAAQ,6BAAmB,CAAC,gBAAgB,EAAE,GAAG,WAAW,GAAG,MAAM,IAAI,EAAE,GACvG,CACL,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,iBAAiB,CAAC","sourcesContent":["import React, { FC } from 'react';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\nimport styles from './InlinePaymentCard.module.scss';\nimport { VGSCardName } from '@/models/Api/HotelDTO';\nimport classNames from 'classnames';\n\ninterface InlinePaymentCardProps {\n    vgsCardName?: VGSCardName;\n    large?: boolean;\n}\n\nconst InlinePaymentCard: FC<InlinePaymentCardProps> = ({ vgsCardName, large }) => {\n    return (\n        <div\n            className={classNames(styles.root, {\n                [(styles as any)['--large']]: large,\n            })}\n            style={{ backgroundImage: `url('${RoomstayThemeEngine.getImageAssetUrl() + vgsCardName + '.png'}')` }}\n        />\n    );\n};\n\nexport default InlinePaymentCard;\n"]}
+{"version":3,"file":"InlinePaymentCard.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/InlinePaymentCard.tsx"],"names":[],"mappings":";;;;;AAAA,4DAAoC;AACpC,kDAAkC;AAGlC,0FAAkE;AAElE,oGAAqD;AAOrD,MAAM,iBAAiB,GAA+B,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7E,OAAO,CACH,uCACI,SAAS,EAAE,IAAA,oBAAU,EAAC,uCAAM,CAAC,IAAI,EAAE;YAC/B,CAAE,uCAAc,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK;SACtC,CAAC,EACF,KAAK,EAAE,EAAE,eAAe,EAAE,QAAQ,6BAAmB,CAAC,gBAAgB,EAAE,GAAG,WAAW,GAAG,MAAM,IAAI,EAAE,GACvG,CACL,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,iBAAiB,CAAC","sourcesContent":["import classNames from 'classnames';\nimport React, { FC } from 'react';\n\nimport { VGSCardName } from '@/models/Api/HotelDTO';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\n\nimport styles from './InlinePaymentCard.module.scss';\n\ninterface InlinePaymentCardProps {\n    vgsCardName?: VGSCardName;\n    large?: boolean;\n}\n\nconst InlinePaymentCard: FC<InlinePaymentCardProps> = ({ vgsCardName, large }) => {\n    return (\n        <div\n            className={classNames(styles.root, {\n                [(styles as any)['--large']]: large,\n            })}\n            style={{ backgroundImage: `url('${RoomstayThemeEngine.getImageAssetUrl() + vgsCardName + '.png'}')` }}\n        />\n    );\n};\n\nexport default InlinePaymentCard;\n"]}

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

@@ -1,5 +1,5 @@
-import { FC } from 'react';
 import { IRoomstayMemberCards } from '@roomstay/core';
+import { FC } from 'react';
 interface InlinePaymentOptionProps {
     card?: IRoomstayMemberCards;
     active?: boolean;

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

@@ -27,16 +27,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+const react_i18next_1 = require("react-i18next");
 const InlinePaymentCard_1 = __importDefault(require("./InlinePaymentCard"));
+const Pill_1 = __importStar(require("../Pill"));
 const Text_1 = __importStar(require("../Text"));
-const Color_1 = require("../../../util/Color");
 const AcceptablePaymentCard_1 = __importDefault(require("../../steps/confirmation/PaymentDetails/AcceptablePaymentCard"));
+const contexts_1 = require("../../../contexts");
+const Translation_1 = require("../../../translations/Translation");
+const Color_1 = require("../../../util/Color");
 const TextAlignment_1 = require("../../../util/TextAlignment");
 const InlinePaymentOption_module_scss_1 = __importDefault(require("./InlinePaymentOption.module.scss"));
-const react_i18next_1 = require("react-i18next");
-const Translation_1 = require("../../../translations/Translation");
-const contexts_1 = require("../../../contexts");
-const Pill_1 = __importStar(require("../Pill"));
 const InlinePaymentOption = ({ card, active }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { roomstayMember } = (0, contexts_1.useMemberContext)();

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

@@ -1 +1 @@
-{"version":3,"file":"InlinePaymentOption.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/InlinePaymentOption.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAkC;AAElC,2GAAmF;AACnF,kEAA2D;AAC3D,wCAAqC;AACrC,iIAAyG;AAEzG,wDAAiD;AACjD,wGAAuD;AACvD,iDAA+C;AAC/C,4DAAyD;AACzD,yCAA8C;AAC9C,kEAA2D;AAO3D,MAAM,mBAAmB,GAAiC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE;IAC3E,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,2BAAgB,GAAE,CAAC;IAC9C,MAAM,aAAa,GAAG,CAAC,MAAc,EAAE,EAAE;QACrC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACxD,CAAC,CAAC;IACF,OAAO,CACH,uCAAK,SAAS,EAAE,yCAAM,CAAC,IAAI;QACvB,uCAAK,SAAS,EAAC,eAAe,IAAE,IAAI,CAAC,CAAC,CAAC,8BAAC,2BAAiB,IAAC,WAAW,EAAE,IAAI,CAAC,IAAmB,EAAE,KAAK,SAAG,CAAC,CAAC,CAAC,IAAI,CAAO;QACvH;YACI,8BAAC,cAAI,IAAC,KAAK,EAAE,yBAAS,CAAC,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,IAC/D,IAAI,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAC/F;YACP,8BAAC,cAAI,IAAC,SAAS,EAAC,qBAAqB,EAAC,KAAK,EAAE,yBAAS,CAAC,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,IACrG,IAAI,CAAC,CAAC,CAAC,WAAW,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAC5F,CACL;QACL,CAAC,IAAI,IAAI,CACN;YACI,8BAAC,+BAAqB,IAClB,KAAK,EAAE;oBACH,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,EAAE;oBACV,YAAY,EAAE,GAAG;oBACjB,MAAM,EAAE,qBAAqB;iBAChC,EACD,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,GACvB,CACA,CACT;QACA,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,WAAW,KAAI,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,cAAc,CAAC,WAAW,IAAI,CAClF,8BAAC,cAAI,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,eAAQ,CAAC,OAAO,mBAElC,CACV,CACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,mBAAmB,CAAC","sourcesContent":["import React, { FC } from 'react';\nimport { IRoomstayMemberCards } from '@roomstay/core';\nimport InlinePaymentCard from '@/components/generic/PaymentCard/InlinePaymentCard';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { Color } from '@/util/Color';\nimport AcceptablePaymentCard from '@/components/steps/confirmation/PaymentDetails/AcceptablePaymentCard';\nimport { VGSCardName } from '@/models/Api/HotelDTO';\nimport { TextAlign } from '@/util/TextAlignment';\nimport styles from './InlinePaymentOption.module.scss';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '@/translations/Translation';\nimport { useMemberContext } from '@/contexts';\nimport Pill, { PillType } from '@/components/generic/Pill';\n\ninterface InlinePaymentOptionProps {\n    card?: IRoomstayMemberCards;\n    active?: boolean;\n}\n\nconst InlinePaymentOption: FC<InlinePaymentOptionProps> = ({ card, active }) => {\n    const { t } = useTranslation();\n    const { roomstayMember } = useMemberContext();\n    const displayExpiry = (expiry: string) => {\n        return expiry.slice(0, 2) + ' / ' + expiry.slice(2);\n    };\n    return (\n        <div className={styles.root}>\n            <div className=\"flex-shrink-0\">{card ? <InlinePaymentCard vgsCardName={card.type as VGSCardName} large /> : null}</div>\n            <div>\n                <Text align={TextAlign.Left} type={TextType.Small} color={Color.Navy}>\n                    {card ? `**** **** **** ${card.cardNumber.slice(-4)}` : t(Translation.Step.Confirmation.CardLabel)}\n                </Text>\n                <Text className=\"u-marg-top--lighter\" align={TextAlign.Left} type={TextType.Caption} color={Color.DarkGrey}>\n                    {card ? `Expires ${displayExpiry(card.expiry)}` : t(Translation.Step.Confirmation.CardSubLabel)}\n                </Text>\n            </div>\n            {!card && (\n                <div>\n                    <AcceptablePaymentCard\n                        style={{\n                            width: 24,\n                            height: 16,\n                            borderRadius: 1.5,\n                            border: '0.5px solid #DFE1E5',\n                        }}\n                        isCurrent={() => true}\n                    />\n                </div>\n            )}\n            {roomstayMember?.defaultCard && card && card.cardId === roomstayMember.defaultCard && (\n                <Pill size=\"small\" type={PillType.Primary}>\n                    DEFAULT CARD\n                </Pill>\n            )}\n        </div>\n    );\n};\n\nexport default InlinePaymentOption;\n"]}
+{"version":3,"file":"InlinePaymentOption.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/InlinePaymentOption.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,kDAAkC;AAClC,iDAA+C;AAE/C,2GAAmF;AACnF,kEAA2D;AAC3D,kEAA2D;AAC3D,iIAAyG;AACzG,yCAA8C;AAE9C,4DAAyD;AACzD,wCAAqC;AACrC,wDAAiD;AAEjD,wGAAuD;AAOvD,MAAM,mBAAmB,GAAiC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE;IAC3E,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,2BAAgB,GAAE,CAAC;IAC9C,MAAM,aAAa,GAAG,CAAC,MAAc,EAAE,EAAE;QACrC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACxD,CAAC,CAAC;IACF,OAAO,CACH,uCAAK,SAAS,EAAE,yCAAM,CAAC,IAAI;QACvB,uCAAK,SAAS,EAAC,eAAe,IAAE,IAAI,CAAC,CAAC,CAAC,8BAAC,2BAAiB,IAAC,WAAW,EAAE,IAAI,CAAC,IAAmB,EAAE,KAAK,SAAG,CAAC,CAAC,CAAC,IAAI,CAAO;QACvH;YACI,8BAAC,cAAI,IAAC,KAAK,EAAE,yBAAS,CAAC,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,IAC/D,IAAI,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAC/F;YACP,8BAAC,cAAI,IAAC,SAAS,EAAC,qBAAqB,EAAC,KAAK,EAAE,yBAAS,CAAC,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,IACrG,IAAI,CAAC,CAAC,CAAC,WAAW,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAC5F,CACL;QACL,CAAC,IAAI,IAAI,CACN;YACI,8BAAC,+BAAqB,IAClB,KAAK,EAAE;oBACH,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,EAAE;oBACV,YAAY,EAAE,GAAG;oBACjB,MAAM,EAAE,qBAAqB;iBAChC,EACD,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,GACvB,CACA,CACT;QACA,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,WAAW,KAAI,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,cAAc,CAAC,WAAW,IAAI,CAClF,8BAAC,cAAI,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,eAAQ,CAAC,OAAO,mBAElC,CACV,CACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,mBAAmB,CAAC","sourcesContent":["import { IRoomstayMemberCards } from '@roomstay/core';\nimport React, { FC } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport InlinePaymentCard from '@/components/generic/PaymentCard/InlinePaymentCard';\nimport Pill, { PillType } from '@/components/generic/Pill';\nimport Text, { TextType } from '@/components/generic/Text';\nimport AcceptablePaymentCard from '@/components/steps/confirmation/PaymentDetails/AcceptablePaymentCard';\nimport { useMemberContext } from '@/contexts';\nimport { VGSCardName } from '@/models/Api/HotelDTO';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\nimport { TextAlign } from '@/util/TextAlignment';\n\nimport styles from './InlinePaymentOption.module.scss';\n\ninterface InlinePaymentOptionProps {\n    card?: IRoomstayMemberCards;\n    active?: boolean;\n}\n\nconst InlinePaymentOption: FC<InlinePaymentOptionProps> = ({ card, active }) => {\n    const { t } = useTranslation();\n    const { roomstayMember } = useMemberContext();\n    const displayExpiry = (expiry: string) => {\n        return expiry.slice(0, 2) + ' / ' + expiry.slice(2);\n    };\n    return (\n        <div className={styles.root}>\n            <div className=\"flex-shrink-0\">{card ? <InlinePaymentCard vgsCardName={card.type as VGSCardName} large /> : null}</div>\n            <div>\n                <Text align={TextAlign.Left} type={TextType.Small} color={Color.Navy}>\n                    {card ? `**** **** **** ${card.cardNumber.slice(-4)}` : t(Translation.Step.Confirmation.CardLabel)}\n                </Text>\n                <Text className=\"u-marg-top--lighter\" align={TextAlign.Left} type={TextType.Caption} color={Color.DarkGrey}>\n                    {card ? `Expires ${displayExpiry(card.expiry)}` : t(Translation.Step.Confirmation.CardSubLabel)}\n                </Text>\n            </div>\n            {!card && (\n                <div>\n                    <AcceptablePaymentCard\n                        style={{\n                            width: 24,\n                            height: 16,\n                            borderRadius: 1.5,\n                            border: '0.5px solid #DFE1E5',\n                        }}\n                        isCurrent={() => true}\n                    />\n                </div>\n            )}\n            {roomstayMember?.defaultCard && card && card.cardId === roomstayMember.defaultCard && (\n                <Pill size=\"small\" type={PillType.Primary}>\n                    DEFAULT CARD\n                </Pill>\n            )}\n        </div>\n    );\n};\n\nexport default InlinePaymentOption;\n"]}

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

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PaymentCard = void 0;
 const react_1 = __importDefault(require("react"));
-const PaymentCard_module_scss_1 = __importDefault(require("./PaymentCard.module.scss"));
-const RoomstayThemeEngine_1 = __importDefault(require("../../../providers/RoomstayThemeEngine"));
-const VGSHooks_1 = require("../../../hooks/VGSHooks");
-const SmallSpinner_1 = __importDefault(require("../loader/SmallSpinner"));
-const PaymentCardHelper_1 = require("../../../util/PaymentCardHelper");
 const react_i18next_1 = require("react-i18next");
+const VGSHooks_1 = require("../../../hooks/VGSHooks");
+const RoomstayThemeEngine_1 = __importDefault(require("../../../providers/RoomstayThemeEngine"));
 const Translation_1 = require("../../../translations/Translation");
+const PaymentCardHelper_1 = require("../../../util/PaymentCardHelper");
+const SmallSpinner_1 = __importDefault(require("../loader/SmallSpinner"));
+const PaymentCard_module_scss_1 = __importDefault(require("./PaymentCard.module.scss"));
 const PaymentCard = ({ card }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const labelStyles = {

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentCard.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/PaymentCard.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,wFAA+C;AAC/C,0FAAkE;AAClE,+CAA8C;AAE9C,0EAAkD;AAClD,gEAAgE;AAEhE,iDAA+C;AAC/C,4DAAyD;AAMlD,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAE,EAAE;IACtD,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,MAAM,WAAW,GAAG;QAChB,YAAY,EAAE;YACV,GAAG,EAAE,OAAO,6BAAmB,CAAC,YAAY,CAAC,mCAAmC,CAAC,GAAG;YACpF,aAAa,EAAE,MAAM;YACrB,cAAc,EAAE,MAAM;YACtB,aAAa,EAAE,OAAO;SACzB;QACD,WAAW,EAAE,MAAM;QACnB,aAAa,EAAE,MAAM;QACrB,aAAa,EAAE,MAAM;QACrB,aAAa,EAAE,OAAO;QACtB,KAAK,EAAE,OAAO;KACjB,CAAC;IAEF,MAAM,EAAE,SAAS,EAAE,uBAAuB,EAAE,SAAS,EAAE,mBAAmB,EAAE,GAAG,IAAA,qBAAU,EAAC;QACtF,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,IAAI,CAAC,UAAU;QACtB,MAAM,kCAAO,WAAW,KAAE,cAAc,EAAE,MAAM,GAAE;KACrD,CAAC,CAAC;IAEH,MAAM,EAAE,SAAS,EAAE,2BAA2B,EAAE,SAAS,EAAE,uBAAuB,EAAE,GAAG,IAAA,qBAAU,EAAC;QAC9F,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,IAAI,CAAC,IAAI;QAChB,MAAM,EAAE,WAAW;KACtB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,IAAA,wCAAoB,EAAC,IAAI,CAAC,IAAiB,CAAC,CAAC;IAEjE,OAAO,CACH,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;QACvB,uCAAK,SAAS,EAAC,SAAS,EAAC,GAAG,EAAE,WAAW,CAAC,aAAa,EAAE,GAAG,EAAC,+BAA+B,GAAG;QAC/F,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,GAAG,EAAE,6BAAmB,CAAC,gBAAgB,EAAE,GAAG,UAAU,EAAE,GAAG,EAAC,MAAM,GAAG,CAC1E;QACN,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,GAAG,EAAE,WAAW,CAAC,eAAe,EAAE,GAAG,EAAE,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAI,CAC9E;QAEN,uCAAK,SAAS,EAAE,iCAAM,CAAC,MAAM;YACxB,mBAAmB,IAAI,8BAAC,sBAAY,OAAG;YACxC,wCAAM,GAAG,EAAE,uBAAuB,GAAS,CACzC;QACN,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,IAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,cAAc,CAAC,CAAO;YACjG;gBACK,uBAAuB,IAAI,8BAAC,sBAAY,OAAG;gBAC5C,wCAAM,GAAG,EAAE,2BAA2B,GAAS,CAC7C,CACJ;QACN,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,IAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,UAAU,CAAC,CAAO;YAC5F,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,uCAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,IAAG,IAAI,CAAC,MAAM,CAAO,CAAC,CAAC,CAAC,sCAAI,SAAS,EAAE,iCAAM,CAAC,KAAK,GAAI,CAChG,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAzDW,QAAA,WAAW,eAyDtB","sourcesContent":["import React from 'react';\nimport styles from './PaymentCard.module.scss';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\nimport { useVgsShow } from '@/hooks/VGSHooks';\nimport { IRoomstayMemberCardFormInput } from '@/models/RoomstayMembers/IRoomstayMemberCard';\nimport SmallSpinner from '../loader/SmallSpinner';\nimport { mapCardTypeToGraphic } from '@/util/PaymentCardHelper';\nimport { ECardType } from '@/models/PaymentCard';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '@/translations/Translation';\n\nexport interface PaymentCardProps {\n    card: IRoomstayMemberCardFormInput;\n}\n\nexport const PaymentCard = ({ card }: PaymentCardProps) => {\n    const { t } = useTranslation();\n    const labelStyles = {\n        '@font-face': {\n            src: `url(${RoomstayThemeEngine.wrapAssetUrl('assets/fonts/cadiz/Cadiz-Bold.otf')})`,\n            'font-weight': 'bold',\n            'font-display': 'swap',\n            'font-family': 'Cadiz',\n        },\n        'font-size': '18px',\n        'line-height': '24px',\n        'font-weight': 'bold',\n        'font-family': 'Cadiz',\n        color: 'white',\n    };\n\n    const { targetRef: cardNumberTargetElement, isLoading: isCardNumberLoading } = useVgsShow({\n        name: 'credit-card',\n        value: card.cardNumber,\n        styles: { ...labelStyles, 'word-spacing': '16px' },\n    });\n\n    const { targetRef: cardholderNameTargetElement, isLoading: isCardholderNameLoading } = useVgsShow({\n        name: 'card-name',\n        value: card.name,\n        styles: labelStyles,\n    });\n\n    const cardGraphic = mapCardTypeToGraphic(card.type as ECardType);\n\n    return (\n        <div className={styles.card}>\n            <img className=\"u-w-100\" src={cardGraphic.backgroundUrl} alt=\"Payment card background color\" />\n            <div className={styles.chip}>\n                <img src={RoomstayThemeEngine.getImageAssetUrl() + 'chip.svg'} alt=\"Chip\" />\n            </div>\n            <div className={styles.type}>\n                <img src={cardGraphic.cardNameIconUrl} alt={`Payment card type ${card.type}`} />\n            </div>\n\n            <div className={styles.number}>\n                {isCardNumberLoading && <SmallSpinner />}\n                <span ref={cardNumberTargetElement}></span>\n            </div>\n            <div className={styles.name}>\n                <div className={styles.label}>{t(Translation.Step.Confirmation.PaymentCard.CardHolderName)}</div>\n                <div>\n                    {isCardholderNameLoading && <SmallSpinner />}\n                    <span ref={cardholderNameTargetElement}></span>\n                </div>\n            </div>\n            <div className={styles.date}>\n                <div className={styles.label}>{t(Translation.Step.Confirmation.PaymentCard.ExpiryDate)}</div>\n                {card.expiry ? <div className={styles.value}>{card.expiry}</div> : <br className={styles.value} />}\n            </div>\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"PaymentCard.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/PaymentCard.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,iDAA+C;AAE/C,+CAA8C;AAG9C,0FAAkE;AAClE,4DAAyD;AACzD,gEAAgE;AAEhE,0EAAkD;AAClD,wFAA+C;AAMxC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAE,EAAE;IACtD,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,MAAM,WAAW,GAAG;QAChB,YAAY,EAAE;YACV,GAAG,EAAE,OAAO,6BAAmB,CAAC,YAAY,CAAC,mCAAmC,CAAC,GAAG;YACpF,aAAa,EAAE,MAAM;YACrB,cAAc,EAAE,MAAM;YACtB,aAAa,EAAE,OAAO;SACzB;QACD,WAAW,EAAE,MAAM;QACnB,aAAa,EAAE,MAAM;QACrB,aAAa,EAAE,MAAM;QACrB,aAAa,EAAE,OAAO;QACtB,KAAK,EAAE,OAAO;KACjB,CAAC;IAEF,MAAM,EAAE,SAAS,EAAE,uBAAuB,EAAE,SAAS,EAAE,mBAAmB,EAAE,GAAG,IAAA,qBAAU,EAAC;QACtF,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,IAAI,CAAC,UAAU;QACtB,MAAM,kCAAO,WAAW,KAAE,cAAc,EAAE,MAAM,GAAE;KACrD,CAAC,CAAC;IAEH,MAAM,EAAE,SAAS,EAAE,2BAA2B,EAAE,SAAS,EAAE,uBAAuB,EAAE,GAAG,IAAA,qBAAU,EAAC;QAC9F,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,IAAI,CAAC,IAAI;QAChB,MAAM,EAAE,WAAW;KACtB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,IAAA,wCAAoB,EAAC,IAAI,CAAC,IAAiB,CAAC,CAAC;IAEjE,OAAO,CACH,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;QACvB,uCAAK,SAAS,EAAC,SAAS,EAAC,GAAG,EAAE,WAAW,CAAC,aAAa,EAAE,GAAG,EAAC,+BAA+B,GAAG;QAC/F,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,GAAG,EAAE,6BAAmB,CAAC,gBAAgB,EAAE,GAAG,UAAU,EAAE,GAAG,EAAC,MAAM,GAAG,CAC1E;QACN,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,GAAG,EAAE,WAAW,CAAC,eAAe,EAAE,GAAG,EAAE,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAI,CAC9E;QAEN,uCAAK,SAAS,EAAE,iCAAM,CAAC,MAAM;YACxB,mBAAmB,IAAI,8BAAC,sBAAY,OAAG;YACxC,wCAAM,GAAG,EAAE,uBAAuB,GAAS,CACzC;QACN,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,IAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,cAAc,CAAC,CAAO;YACjG;gBACK,uBAAuB,IAAI,8BAAC,sBAAY,OAAG;gBAC5C,wCAAM,GAAG,EAAE,2BAA2B,GAAS,CAC7C,CACJ;QACN,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,IAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,UAAU,CAAC,CAAO;YAC5F,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,uCAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,IAAG,IAAI,CAAC,MAAM,CAAO,CAAC,CAAC,CAAC,sCAAI,SAAS,EAAE,iCAAM,CAAC,KAAK,GAAI,CAChG,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAzDW,QAAA,WAAW,eAyDtB","sourcesContent":["import React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { useVgsShow } from '@/hooks/VGSHooks';\nimport { ECardType } from '@/models/PaymentCard';\nimport { IRoomstayMemberCardFormInput } from '@/models/RoomstayMembers/IRoomstayMemberCard';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\nimport { Translation } from '@/translations/Translation';\nimport { mapCardTypeToGraphic } from '@/util/PaymentCardHelper';\n\nimport SmallSpinner from '../loader/SmallSpinner';\nimport styles from './PaymentCard.module.scss';\n\nexport interface PaymentCardProps {\n    card: IRoomstayMemberCardFormInput;\n}\n\nexport const PaymentCard = ({ card }: PaymentCardProps) => {\n    const { t } = useTranslation();\n    const labelStyles = {\n        '@font-face': {\n            src: `url(${RoomstayThemeEngine.wrapAssetUrl('assets/fonts/cadiz/Cadiz-Bold.otf')})`,\n            'font-weight': 'bold',\n            'font-display': 'swap',\n            'font-family': 'Cadiz',\n        },\n        'font-size': '18px',\n        'line-height': '24px',\n        'font-weight': 'bold',\n        'font-family': 'Cadiz',\n        color: 'white',\n    };\n\n    const { targetRef: cardNumberTargetElement, isLoading: isCardNumberLoading } = useVgsShow({\n        name: 'credit-card',\n        value: card.cardNumber,\n        styles: { ...labelStyles, 'word-spacing': '16px' },\n    });\n\n    const { targetRef: cardholderNameTargetElement, isLoading: isCardholderNameLoading } = useVgsShow({\n        name: 'card-name',\n        value: card.name,\n        styles: labelStyles,\n    });\n\n    const cardGraphic = mapCardTypeToGraphic(card.type as ECardType);\n\n    return (\n        <div className={styles.card}>\n            <img className=\"u-w-100\" src={cardGraphic.backgroundUrl} alt=\"Payment card background color\" />\n            <div className={styles.chip}>\n                <img src={RoomstayThemeEngine.getImageAssetUrl() + 'chip.svg'} alt=\"Chip\" />\n            </div>\n            <div className={styles.type}>\n                <img src={cardGraphic.cardNameIconUrl} alt={`Payment card type ${card.type}`} />\n            </div>\n\n            <div className={styles.number}>\n                {isCardNumberLoading && <SmallSpinner />}\n                <span ref={cardNumberTargetElement}></span>\n            </div>\n            <div className={styles.name}>\n                <div className={styles.label}>{t(Translation.Step.Confirmation.PaymentCard.CardHolderName)}</div>\n                <div>\n                    {isCardholderNameLoading && <SmallSpinner />}\n                    <span ref={cardholderNameTargetElement}></span>\n                </div>\n            </div>\n            <div className={styles.date}>\n                <div className={styles.label}>{t(Translation.Step.Confirmation.PaymentCard.ExpiryDate)}</div>\n                {card.expiry ? <div className={styles.value}>{card.expiry}</div> : <br className={styles.value} />}\n            </div>\n        </div>\n    );\n};\n"]}

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

@@ -1,5 +1,5 @@
-import { FC } from 'react';
 import { IRoomstayMemberCards } from '@roomstay/core';
+import { FC } from 'react';
 export interface PaymentCardInputProps {
     card: IRoomstayMemberCards;
     onSubmit?: (card: IRoomstayMemberCards) => Promise<IRoomstayMemberCards>;

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

@@ -37,22 +37,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PaymentCardInput = void 0;
 const react_1 = __importStar(require("react"));
-const PaymentCardInput_module_scss_1 = __importDefault(require("./PaymentCardInput.module.scss"));
-const Text_1 = __importStar(require("../Text"));
-const Color_1 = require("../../../util/Color");
-const InputGroup_1 = __importDefault(require("../InputGroup/InputGroup"));
-const PaymentCard_1 = require("./PaymentCard");
-const CardTypeSelect_1 = require("./CardTypeSelect");
-const BEButton_1 = __importDefault(require("../BEButton"));
+const react_i18next_1 = require("react-i18next");
 const AutoAutoHeight_1 = __importDefault(require("../../../animations/AutoAutoHeight"));
 const Alert_1 = __importStar(require("../Alert"));
 const Icon_1 = require("../Icon/Icon");
-const VGSHooks_1 = require("../../../hooks/VGSHooks");
+const InputGroup_1 = __importDefault(require("../InputGroup/InputGroup"));
+const CardTypeSelect_1 = require("./CardTypeSelect");
+const PaymentCard_1 = require("./PaymentCard");
+const Text_1 = __importStar(require("../Text"));
 const LoggedInUserHook_1 = require("../../../hooks/LoggedInUserHook");
-const Fade_1 = __importDefault(require("../../../animations/Fade"));
-const AsyncAuth_1 = require("../../../util/AsyncAuth");
-const react_i18next_1 = require("react-i18next");
+const VGSHooks_1 = require("../../../hooks/VGSHooks");
 const Translation_1 = require("../../../translations/Translation");
+const AsyncAuth_1 = require("../../../util/AsyncAuth");
+const Color_1 = require("../../../util/Color");
+const Fade_1 = __importDefault(require("../../../animations/Fade"));
+const BEButton_1 = __importDefault(require("../BEButton"));
+const PaymentCardInput_module_scss_1 = __importDefault(require("./PaymentCardInput.module.scss"));
 const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultClicked }) => {
     const { user, fullName } = (0, LoggedInUserHook_1.useMember)();
     const { t } = (0, react_i18next_1.useTranslation)();