@roomstay/frontend 2.0.11 → 2.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"/","sources":["src/components/generic/Tabs/Tabs.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAE/B,mDAAiD;AAEjD,wCAAmD;AACnD,4DAAqD;AACrD,6EAAiF;AAEjF,mEAAwE;AACxE,6DAA0D;AAC1D,iFAA8E;AAE9E,yDAAwC;AAYxC,MAAM,mBAAmB,GAAG,CAAC,QAAa,EAAE,EAAE;IAC1C,IAAI,gBAA0B,CAAC;IAC/B,IAAA,8BAAY,EAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QAC7B,IAAI,CAAC,gBAAgB,EAAE;YACnB,gBAAgB,GAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;SAC3C;IACL,CAAC,CAAC,CAAC;IAEH,OAAO,gBAAgB,CAAC;AAC5B,CAAC,CAAC;AAEF,MAAM,OAAO,GAAkB;IAC3B,aAAa,EAAE,MAAM;IACrB,cAAc,EAAE,IAAI;IACpB,YAAY,EAAE,EAAE;IAChB,SAAS,EAAE,KAAK;CACnB,CAAC;AAEF,MAAM,IAAI,GAAwB,CAAC,KAAK,EAAE,EAAE;IACxC,MAAM,EACF,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,MAAM,EAChB,SAAS,GAAG,mBAAmB,CAAC,QAAQ,CAAC,GAC5C,GAAG,IAAA,gCAAe,EAAC,KAAK,EAAE;QACvB,SAAS,EAAE,UAAU;KACxB,CAAC,CAAC;IAEH,OAAO,CACH,oBAAC,+BAAkB,IAAC,gBAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ;QAC/D,4BAAI,SAAS,EAAE,eAAe,OAAO,IAAI,0BAAM,CAAC,WAAW,EAAE;YACzD,oBAAC,cAAM,oBAAK,OAAO,GACd,IAAA,0BAAQ,EAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAClC,oBAAC,mBAAW,IAAC,GAAG,EAAE,KAAK;gBACnB,oBAAC,iBAAO,kBAAC,KAAK,EAAE,KAAK,IAAM,KAAK,CAAC,KAAK,GACjC,KAAK,CACA,CACA,CACjB,CAAC,CACG,CACR;QACL,oBAAC,mBAAS,IAAC,SAAS,QAAC,SAAS,SAAG;QACjC,oBAAC,qCAAiB,QAAE,KAAK,CAAC,QAAQ,CAAqB,CACtC,CACxB,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,IAAI,CAAC","sourcesContent":["import * as React from 'react';\nimport { ReactNode } from 'react';\nimport { useUncontrolled } from 'uncontrollable';\nimport { SwiperOptions } from 'swiper';\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport LineBreak from 'components/generic/LineBreak';\nimport { reactForEach, reactMap } from 'components/generic/Tabs/ElementChildren';\n\nimport { TabContextProvider } from 'components/generic/Tabs/TabContext';\nimport { TabLink } from 'components/generic/Tabs/TabLink';\nimport { TabRouteContainer } from 'components/generic/Tabs/TabRouteContainer';\n\nimport styles from './tabs.module.scss';\n\nexport type EventKey = string | number;\n\nexport interface TabsProps {\n    variant?: 'tabs' | 'pills';\n    activeKey?: EventKey;\n    defaultActiveKey?: EventKey;\n    onSelect?: (key: string) => void;\n    children: ReactNode[];\n}\n\nconst getDefaultActiveKey = (children: any) => {\n    let defaultActiveKey: EventKey;\n    reactForEach(children, (child) => {\n        if (!defaultActiveKey) {\n            defaultActiveKey = child.props.eventKey;\n        }\n    });\n\n    return defaultActiveKey;\n};\n\nconst options: SwiperOptions = {\n    slidesPerView: 'auto',\n    allowTouchMove: true,\n    spaceBetween: 32,\n    noSwiping: false,\n};\n\nconst Tabs: React.FC<TabsProps> = (props) => {\n    const {\n        onSelect,\n        children,\n        variant = 'tabs',\n        activeKey = getDefaultActiveKey(children),\n    } = useUncontrolled(props, {\n        activeKey: 'onSelect',\n    });\n\n    return (\n        <TabContextProvider defaultActiveKey={activeKey} onChange={onSelect}>\n            <ul className={`c-nav c-nav-${variant} ${styles.tabCarousel}`}>\n                <Swiper {...options}>\n                    {reactMap(children, (child, index) => (\n                        <SwiperSlide key={index}>\n                            <TabLink index={index} {...child.props}>\n                                {child}\n                            </TabLink>\n                        </SwiperSlide>\n                    ))}\n                </Swiper>\n            </ul>\n            <LineBreak noMargins fullBleed />\n            <TabRouteContainer>{props.children}</TabRouteContainer>\n        </TabContextProvider>\n    );\n};\n\nexport default Tabs;\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"/","sources":["src/components/generic/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,mDAAiD;AAEjD,wCAAmD;AACnD,6EAAqD;AACrD,6EAAiF;AAEjF,mEAAwE;AACxE,6DAA0D;AAC1D,iFAA8E;AAE9E,0EAAwC;AAYxC,MAAM,mBAAmB,GAAG,CAAC,QAAa,EAAE,EAAE;IAC1C,IAAI,gBAA0B,CAAC;IAC/B,IAAA,8BAAY,EAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QAC7B,IAAI,CAAC,gBAAgB,EAAE;YACnB,gBAAgB,GAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;SAC3C;IACL,CAAC,CAAC,CAAC;IAEH,OAAO,gBAAgB,CAAC;AAC5B,CAAC,CAAC;AAEF,MAAM,OAAO,GAAkB;IAC3B,aAAa,EAAE,MAAM;IACrB,cAAc,EAAE,IAAI;IACpB,YAAY,EAAE,EAAE;IAChB,SAAS,EAAE,KAAK;CACnB,CAAC;AAEF,MAAM,IAAI,GAAwB,CAAC,KAAK,EAAE,EAAE;IACxC,MAAM,EACF,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,MAAM,EAChB,SAAS,GAAG,mBAAmB,CAAC,QAAQ,CAAC,GAC5C,GAAG,IAAA,gCAAe,EAAC,KAAK,EAAE;QACvB,SAAS,EAAE,UAAU;KACxB,CAAC,CAAC;IAEH,OAAO,CACH,oBAAC,+BAAkB,IAAC,gBAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ;QAC/D,4BAAI,SAAS,EAAE,eAAe,OAAO,IAAI,0BAAM,CAAC,WAAW,EAAE;YACzD,oBAAC,cAAM,oBAAK,OAAO,GACd,IAAA,0BAAQ,EAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAClC,oBAAC,mBAAW,IAAC,GAAG,EAAE,KAAK;gBACnB,oBAAC,iBAAO,kBAAC,KAAK,EAAE,KAAK,IAAM,KAAK,CAAC,KAAK,GACjC,KAAK,CACA,CACA,CACjB,CAAC,CACG,CACR;QACL,oBAAC,mBAAS,IAAC,SAAS,QAAC,SAAS,SAAG;QACjC,oBAAC,qCAAiB,QAAE,KAAK,CAAC,QAAQ,CAAqB,CACtC,CACxB,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,IAAI,CAAC","sourcesContent":["import * as React from 'react';\nimport { ReactNode } from 'react';\nimport { useUncontrolled } from 'uncontrollable';\nimport { SwiperOptions } from 'swiper';\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport LineBreak from 'components/generic/LineBreak';\nimport { reactForEach, reactMap } from 'components/generic/Tabs/ElementChildren';\n\nimport { TabContextProvider } from 'components/generic/Tabs/TabContext';\nimport { TabLink } from 'components/generic/Tabs/TabLink';\nimport { TabRouteContainer } from 'components/generic/Tabs/TabRouteContainer';\n\nimport styles from './tabs.module.scss';\n\nexport type EventKey = string | number;\n\nexport interface TabsProps {\n    variant?: 'tabs' | 'pills';\n    activeKey?: EventKey;\n    defaultActiveKey?: EventKey;\n    onSelect?: (key: string) => void;\n    children: ReactNode[];\n}\n\nconst getDefaultActiveKey = (children: any) => {\n    let defaultActiveKey: EventKey;\n    reactForEach(children, (child) => {\n        if (!defaultActiveKey) {\n            defaultActiveKey = child.props.eventKey;\n        }\n    });\n\n    return defaultActiveKey;\n};\n\nconst options: SwiperOptions = {\n    slidesPerView: 'auto',\n    allowTouchMove: true,\n    spaceBetween: 32,\n    noSwiping: false,\n};\n\nconst Tabs: React.FC<TabsProps> = (props) => {\n    const {\n        onSelect,\n        children,\n        variant = 'tabs',\n        activeKey = getDefaultActiveKey(children),\n    } = useUncontrolled(props, {\n        activeKey: 'onSelect',\n    });\n\n    return (\n        <TabContextProvider defaultActiveKey={activeKey} onChange={onSelect}>\n            <ul className={`c-nav c-nav-${variant} ${styles.tabCarousel}`}>\n                <Swiper {...options}>\n                    {reactMap(children, (child, index) => (\n                        <SwiperSlide key={index}>\n                            <TabLink index={index} {...child.props}>\n                                {child}\n                            </TabLink>\n                        </SwiperSlide>\n                    ))}\n                </Swiper>\n            </ul>\n            <LineBreak noMargins fullBleed />\n            <TabRouteContainer>{props.children}</TabRouteContainer>\n        </TabContextProvider>\n    );\n};\n\nexport default Tabs;\n"]}

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

@@ -1,8 +1,34 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = exports.TextTransform = exports.TextType = void 0;
-const React = require("react");
-const classNames = require("classnames");
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 var TextType;
 (function (TextType) {
     TextType["Body"] = "body";
@@ -25,7 +51,7 @@ function Text(props) {
     if (props.className) {
         props.className.split(' ').forEach((it) => (extraClasses[it] = true));
     }
-    const classes = classNames(Object.assign(Object.assign({ [`text-${defaultProps.type}`]: defaultProps.type, [props.align]: !!props.align, 'u-inline-flex': props.inline, 'u-text-bold': props.bold, 'u-pre-wrap': props.preformatted, 'u-line-through': props.lineThrough }, extraClasses), transformClasses));
+    const classes = (0, classnames_1.default)(Object.assign(Object.assign({ [`text-${defaultProps.type}`]: defaultProps.type, [props.align]: !!props.align, 'u-inline-flex': props.inline, 'u-text-bold': props.bold, 'u-pre-wrap': props.preformatted, 'u-line-through': props.lineThrough }, extraClasses), transformClasses));
     const styles = Object.assign({}, (defaultProps.style || {}));
     if (defaultProps.color) {
         styles.color = defaultProps.color;

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

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

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

@@ -1,6 +1,29 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
+const React = __importStar(require("react"));
 const react_1 = require("react");
 const TextArea = (props, ref) => {
     return React.createElement("textarea", Object.assign({}, props, { ref: ref }));

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"/","sources":["src/components/generic/TextArea.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,iCAA6D;AAI7D,MAAM,QAAQ,GAAiE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC1F,OAAO,kDAAc,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAC7C,CAAC,CAAC;AAEF,kBAAe,IAAA,kBAAU,EAAC,QAAQ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { forwardRef, ForwardRefRenderFunction } from 'react';\n\nexport type TextAreaProps = JSX.IntrinsicElements['textarea'];\n\nconst TextArea: ForwardRefRenderFunction<HTMLTextAreaElement, TextAreaProps> = (props, ref) => {\n    return <textarea {...props} ref={ref} />;\n};\n\nexport default forwardRef(TextArea);\n"]}
+{"version":3,"file":"TextArea.js","sourceRoot":"/","sources":["src/components/generic/TextArea.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,iCAA6D;AAI7D,MAAM,QAAQ,GAAiE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC1F,OAAO,kDAAc,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAC7C,CAAC,CAAC;AAEF,kBAAe,IAAA,kBAAU,EAAC,QAAQ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { forwardRef, ForwardRefRenderFunction } from 'react';\n\nexport type TextAreaProps = JSX.IntrinsicElements['textarea'];\n\nconst TextArea: ForwardRefRenderFunction<HTMLTextAreaElement, TextAreaProps> = (props, ref) => {\n    return <textarea {...props} ref={ref} />;\n};\n\nexport default forwardRef(TextArea);\n"]}

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

@@ -1,9 +1,35 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
+const React = __importStar(require("react"));
 const react_1 = require("react");
-const Icon_1 = require("components/generic/Icon/Icon");
-const classNames = require("classnames");
+const Icon_1 = __importDefault(require("components/generic/Icon/Icon"));
+const classnames_1 = __importDefault(require("classnames"));
 const TextBox = (props, ref) => {
     const [selected, setSelected] = (0, react_1.useState)(false);
     const type = props.type ? props.type : 'text';
@@ -26,7 +52,7 @@ const TextBox = (props, ref) => {
     if (props.icon) {
         icon = React.createElement(Icon_1.default, { icon: props.icon, size: "1em" });
     }
-    const classes = classNames('textbox c-input', {
+    const classes = (0, classnames_1.default)('textbox c-input', {
         '--has-icon': !!icon,
         '--selected': selected,
         '--wide': props.wide,

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

@@ -1 +1 @@
-{"version":3,"file":"TextBox.js","sourceRoot":"/","sources":["src/components/generic/TextBox.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,iCAAsE;AACtE,uDAA8D;AAE9D,yCAAyC;AAsBzC,MAAM,OAAO,GAA6D,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACrF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAC9C,MAAM,eAAe,mBACjB,IAAI,EACJ,SAAS,EAAE,YAAY,EACvB,WAAW,EAAE,KAAK,CAAC,WAAW,IAC3B,KAAK,CAAC,UAAU,CACtB,CAAC;IAEF,IAAI,KAAK,CAAC,IAAI,EAAE;QACZ,eAAe,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;KACrC;IAED,IAAI,KAAK,CAAC,QAAQ,EAAE;QAChB,eAAe,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;KAC7C;IAED,MAAM,QAAQ,GAA+C,CAAC,CAAC,EAAE,EAAE;QAC/D,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;SACrB;IACL,CAAC,CAAC;IAEF,IAAI,KAAK,CAAC,QAAQ,EAAE;QAChB,eAAe,CAAC,QAAQ,GAAG,QAAQ,CAAC;KACvC;IAED,IAAI,IAAI,GAAc,EAAE,CAAC;IAEzB,IAAI,KAAK,CAAC,IAAI,EAAE;QACZ,IAAI,GAAG,oBAAC,cAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAC,KAAK,GAAG,CAAC;KAChD;IAED,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,EAAE;QAC1C,YAAY,EAAE,CAAC,CAAC,IAAI;QACpB,YAAY,EAAE,QAAQ;QACtB,QAAQ,EAAE,KAAK,CAAC,IAAI;QACpB,WAAW,EAAE,KAAK,CAAC,gBAAgB,KAAK,SAAS;QACjD,SAAS,EAAE,KAAK,CAAC,gBAAgB,KAAK,OAAO;QAC7C,YAAY,EAAE,eAAe,CAAC,QAAQ;KACzC,CAAC,CAAC;IACH,MAAM,cAAc,GAAG,GAAG,EAAE;QACxB,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC;IACF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,EAAE,GAAG,GAAG,KAAK,CAAC,IAAI,GAAG,IAAI,OAAO,CAAC;IAEvC,OAAO,CACH;QACK,KAAK,CAAC,KAAK,IAAI,CACZ,+BAAO,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,EAAE;YACpC;gBACK,KAAK,CAAC,KAAK;gBACX,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,KAAI,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAS,CAC1D,CACC,CACX;QACD,+BAAO,SAAS,EAAE,OAAO;YACpB,IAAI;YACL,+CAAW,eAAe,IAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI,CAC9I,CACT,CACN,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { ForwardRefRenderFunction, ReactNode, useState } from 'react';\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\n\nimport * as classNames from 'classnames';\n\nexport interface TextBoxProps {\n    icon?: IconType;\n    placeholder?: string;\n    wide?: boolean;\n    type?: 'text' | 'tel' | 'password' | 'email';\n    name?: string;\n    required?: boolean;\n    label?: string;\n\n    validationStatus?: 'success' | 'error';\n\n    value?: string;\n\n    onChange?: (e: React.ChangeEvent) => void;\n\n    inputProps?: Omit<JSX.IntrinsicElements['input'], 'id' | 'ref' | 'value' | 'onFocus' | 'onBlur' | 'onKeyPress'>;\n\n    onKeyPress?: JSX.IntrinsicElements['input']['onKeyPress'];\n}\n\nconst TextBox: ForwardRefRenderFunction<HTMLInputElement, TextBoxProps> = (props, ref) => {\n    const [selected, setSelected] = useState(false);\n\n    const type = props.type ? props.type : 'text';\n    const inputProperties: JSX.IntrinsicElements['input'] = {\n        type,\n        className: 'text-small',\n        placeholder: props.placeholder,\n        ...props.inputProps,\n    };\n\n    if (props.name) {\n        inputProperties.name = props.name;\n    }\n\n    if (props.required) {\n        inputProperties.required = props.required;\n    }\n\n    const onChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {\n        if (props.onChange) {\n            props.onChange(e);\n        }\n    };\n\n    if (props.onChange) {\n        inputProperties.onChange = onChange;\n    }\n\n    let icon: ReactNode = '';\n\n    if (props.icon) {\n        icon = <Icon icon={props.icon} size=\"1em\" />;\n    }\n\n    const classes = classNames('textbox c-input', {\n        '--has-icon': !!icon,\n        '--selected': selected,\n        '--wide': props.wide,\n        '--success': props.validationStatus === 'success',\n        '--error': props.validationStatus === 'error',\n        '--disabled': inputProperties.disabled,\n    });\n    const onFocusHandler = () => {\n        return setSelected(true);\n    };\n    const onBlurHandler = () => {\n        return setSelected(false);\n    };\n\n    const id = `${props.name}${type}Input`;\n\n    return (\n        <>\n            {props.label && (\n                <label className=\"text-bold\" htmlFor={id}>\n                    <>\n                        {props.label}\n                        {props?.required && <div style={{ color: 'red' }}>*</div>}\n                    </>\n                </label>\n            )}\n            <label className={classes}>\n                {icon}\n                <input {...inputProperties} id={id} ref={ref} value={props.value} onFocus={onFocusHandler} onBlur={onBlurHandler} onKeyPress={props.onKeyPress} />\n            </label>\n        </>\n    );\n};\n\nexport default React.forwardRef(TextBox);\n"]}
+{"version":3,"file":"TextBox.js","sourceRoot":"/","sources":["src/components/generic/TextBox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,iCAAsE;AACtE,wEAA8D;AAE9D,4DAAoC;AAsBpC,MAAM,OAAO,GAA6D,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACrF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAC9C,MAAM,eAAe,mBACjB,IAAI,EACJ,SAAS,EAAE,YAAY,EACvB,WAAW,EAAE,KAAK,CAAC,WAAW,IAC3B,KAAK,CAAC,UAAU,CACtB,CAAC;IAEF,IAAI,KAAK,CAAC,IAAI,EAAE;QACZ,eAAe,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;KACrC;IAED,IAAI,KAAK,CAAC,QAAQ,EAAE;QAChB,eAAe,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;KAC7C;IAED,MAAM,QAAQ,GAA+C,CAAC,CAAC,EAAE,EAAE;QAC/D,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;SACrB;IACL,CAAC,CAAC;IAEF,IAAI,KAAK,CAAC,QAAQ,EAAE;QAChB,eAAe,CAAC,QAAQ,GAAG,QAAQ,CAAC;KACvC;IAED,IAAI,IAAI,GAAc,EAAE,CAAC;IAEzB,IAAI,KAAK,CAAC,IAAI,EAAE;QACZ,IAAI,GAAG,oBAAC,cAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAC,KAAK,GAAG,CAAC;KAChD;IAED,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,iBAAiB,EAAE;QAC1C,YAAY,EAAE,CAAC,CAAC,IAAI;QACpB,YAAY,EAAE,QAAQ;QACtB,QAAQ,EAAE,KAAK,CAAC,IAAI;QACpB,WAAW,EAAE,KAAK,CAAC,gBAAgB,KAAK,SAAS;QACjD,SAAS,EAAE,KAAK,CAAC,gBAAgB,KAAK,OAAO;QAC7C,YAAY,EAAE,eAAe,CAAC,QAAQ;KACzC,CAAC,CAAC;IACH,MAAM,cAAc,GAAG,GAAG,EAAE;QACxB,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC;IACF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,EAAE,GAAG,GAAG,KAAK,CAAC,IAAI,GAAG,IAAI,OAAO,CAAC;IAEvC,OAAO,CACH;QACK,KAAK,CAAC,KAAK,IAAI,CACZ,+BAAO,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,EAAE;YACpC;gBACK,KAAK,CAAC,KAAK;gBACX,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,KAAI,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAS,CAC1D,CACC,CACX;QACD,+BAAO,SAAS,EAAE,OAAO;YACpB,IAAI;YACL,+CAAW,eAAe,IAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI,CAC9I,CACT,CACN,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { ForwardRefRenderFunction, ReactNode, useState } from 'react';\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\n\nimport classNames from 'classnames';\n\nexport interface TextBoxProps {\n    icon?: IconType;\n    placeholder?: string;\n    wide?: boolean;\n    type?: 'text' | 'tel' | 'password' | 'email';\n    name?: string;\n    required?: boolean;\n    label?: string;\n\n    validationStatus?: 'success' | 'error';\n\n    value?: string;\n\n    onChange?: (e: React.ChangeEvent) => void;\n\n    inputProps?: Omit<JSX.IntrinsicElements['input'], 'id' | 'ref' | 'value' | 'onFocus' | 'onBlur' | 'onKeyPress'>;\n\n    onKeyPress?: JSX.IntrinsicElements['input']['onKeyPress'];\n}\n\nconst TextBox: ForwardRefRenderFunction<HTMLInputElement, TextBoxProps> = (props, ref) => {\n    const [selected, setSelected] = useState(false);\n\n    const type = props.type ? props.type : 'text';\n    const inputProperties: JSX.IntrinsicElements['input'] = {\n        type,\n        className: 'text-small',\n        placeholder: props.placeholder,\n        ...props.inputProps,\n    };\n\n    if (props.name) {\n        inputProperties.name = props.name;\n    }\n\n    if (props.required) {\n        inputProperties.required = props.required;\n    }\n\n    const onChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {\n        if (props.onChange) {\n            props.onChange(e);\n        }\n    };\n\n    if (props.onChange) {\n        inputProperties.onChange = onChange;\n    }\n\n    let icon: ReactNode = '';\n\n    if (props.icon) {\n        icon = <Icon icon={props.icon} size=\"1em\" />;\n    }\n\n    const classes = classNames('textbox c-input', {\n        '--has-icon': !!icon,\n        '--selected': selected,\n        '--wide': props.wide,\n        '--success': props.validationStatus === 'success',\n        '--error': props.validationStatus === 'error',\n        '--disabled': inputProperties.disabled,\n    });\n    const onFocusHandler = () => {\n        return setSelected(true);\n    };\n    const onBlurHandler = () => {\n        return setSelected(false);\n    };\n\n    const id = `${props.name}${type}Input`;\n\n    return (\n        <>\n            {props.label && (\n                <label className=\"text-bold\" htmlFor={id}>\n                    <>\n                        {props.label}\n                        {props?.required && <div style={{ color: 'red' }}>*</div>}\n                    </>\n                </label>\n            )}\n            <label className={classes}>\n                {icon}\n                <input {...inputProperties} id={id} ref={ref} value={props.value} onFocus={onFocusHandler} onBlur={onBlurHandler} onKeyPress={props.onKeyPress} />\n            </label>\n        </>\n    );\n};\n\nexport default React.forwardRef(TextBox);\n"]}

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

@@ -1,9 +1,35 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
+const React = __importStar(require("react"));
 const react_1 = require("react");
 const Overlay_1 = require("components/generic/Overlay/Overlay");
-const Tooltip_module_scss_1 = require("./Tooltip.module.scss");
+const Tooltip_module_scss_1 = __importDefault(require("./Tooltip.module.scss"));
 function Tooltip(props) {
     var _a;
     const wrapperClass = (_a = props.wrapperClasses) !== null && _a !== void 0 ? _a : '';

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"/","sources":["src/components/generic/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAE/B,iCAAqD;AACrD,gEAA6D;AAE7D,+DAA2C;AAU3C,SAAwB,OAAO,CAAC,KAAqB;;IACjD,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,cAAc,mCAAI,EAAE,CAAC;IAChD,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAElC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,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,GAAG,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY;QAC7H,oBAAC,iBAAO,IAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,CAAC,iBAAiB,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO;YAClH,6BAAK,SAAS,EAAE,6BAAM,CAAC,YAAY,CAAC;gBAChC,6BAAK,SAAS,EAAE,6BAAM,CAAC,kBAAkB,CAAC,GAAQ;gBACjD,KAAK,CAAC,KAAK,CACV,CACA;QACT,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC;AAzBD,0BAyBC","sourcesContent":["import * as React from 'react';\n\nimport { useState, useRef, ReactChild } from 'react';\nimport { Overlay } from 'components/generic/Overlay/Overlay';\n\nimport styles from './Tooltip.module.scss';\n\nexport interface BETooltipProps {\n    wrapperClasses?: string;\n    overrideContainer?: HTMLElement;\n\n    children: ReactChild | ReactChild[];\n    title: string;\n}\n\nexport default function Tooltip(props: BETooltipProps) {\n    const wrapperClass = props.wrapperClasses ?? '';\n    const containerRef = useRef(null);\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 ref={containerRef} onMouseLeave={displayFalse} onMouseEnter={displayTrue} onMouseDown={displayFalse} className={wrapperClass}>\n            <Overlay open={isDisplayed} container={props.overrideContainer} hideStyles={true} followElement={containerRef?.current}>\n                <div className={styles['rs-tooltip']}>\n                    <div className={styles['rs-tooltip-arrow']}></div>\n                    {props.title}\n                </div>\n            </Overlay>\n            {props.children}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"Tooltip.js","sourceRoot":"/","sources":["src/components/generic/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,iCAAqD;AACrD,gEAA6D;AAE7D,gFAA2C;AAU3C,SAAwB,OAAO,CAAC,KAAqB;;IACjD,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,cAAc,mCAAI,EAAE,CAAC;IAChD,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAElC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,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,GAAG,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY;QAC7H,oBAAC,iBAAO,IAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,CAAC,iBAAiB,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO;YAClH,6BAAK,SAAS,EAAE,6BAAM,CAAC,YAAY,CAAC;gBAChC,6BAAK,SAAS,EAAE,6BAAM,CAAC,kBAAkB,CAAC,GAAQ;gBACjD,KAAK,CAAC,KAAK,CACV,CACA;QACT,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC;AAzBD,0BAyBC","sourcesContent":["import * as React from 'react';\n\nimport { useState, useRef, ReactChild } from 'react';\nimport { Overlay } from 'components/generic/Overlay/Overlay';\n\nimport styles from './Tooltip.module.scss';\n\nexport interface BETooltipProps {\n    wrapperClasses?: string;\n    overrideContainer?: HTMLElement;\n\n    children: ReactChild | ReactChild[];\n    title: string;\n}\n\nexport default function Tooltip(props: BETooltipProps) {\n    const wrapperClass = props.wrapperClasses ?? '';\n    const containerRef = useRef(null);\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 ref={containerRef} onMouseLeave={displayFalse} onMouseEnter={displayTrue} onMouseDown={displayFalse} className={wrapperClass}>\n            <Overlay open={isDisplayed} container={props.overrideContainer} hideStyles={true} followElement={containerRef?.current}>\n                <div className={styles['rs-tooltip']}>\n                    <div className={styles['rs-tooltip-arrow']}></div>\n                    {props.title}\n                </div>\n            </Overlay>\n            {props.children}\n        </div>\n    );\n}\n"]}

package/dist/src/components/generic/badging/SSLSecureBadge.js

@@ -1,8 +1,34 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-const RoomstayThemeEngine_1 = require("providers/RoomstayThemeEngine");
-const Tooltip_1 = require("components/generic/Tooltip/Tooltip");
+const React = __importStar(require("react"));
+const RoomstayThemeEngine_1 = __importDefault(require("providers/RoomstayThemeEngine"));
+const Tooltip_1 = __importDefault(require("components/generic/Tooltip/Tooltip"));
 function SSLSecureBadge() {
     return (React.createElement(Tooltip_1.default, { title: "Shop without worries! This site is protected by high level encryption, to ensure every purchase is always safe & secure" },
         React.createElement("img", { src: RoomstayThemeEngine_1.default.getAssetUrl() + 'assets/img/ssl-secure-connection.png' })));

package/dist/src/components/generic/badging/SSLSecureBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"SSLSecureBadge.js","sourceRoot":"/","sources":["src/components/generic/badging/SSLSecureBadge.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,uEAAgE;AAChE,gEAAyD;AAEzD,SAAwB,cAAc;IAClC,OAAO,CACH,oBAAC,iBAAO,IAAC,KAAK,EAAC,yHAAyH;QACpI,6BAAK,GAAG,EAAE,6BAAmB,CAAC,WAAW,EAAE,GAAG,sCAAsC,GAAI,CAClF,CACb,CAAC;AACN,CAAC;AAND,iCAMC","sourcesContent":["import * as React from 'react';\nimport RoomstayThemeEngine from 'providers/RoomstayThemeEngine';\nimport Tooltip from 'components/generic/Tooltip/Tooltip';\n\nexport default function SSLSecureBadge() {\n    return (\n        <Tooltip title=\"Shop without worries! This site is protected by high level encryption, to ensure every purchase is always safe & secure\">\n            <img src={RoomstayThemeEngine.getAssetUrl() + 'assets/img/ssl-secure-connection.png'} />\n        </Tooltip>\n    );\n}\n"]}
+{"version":3,"file":"SSLSecureBadge.js","sourceRoot":"/","sources":["src/components/generic/badging/SSLSecureBadge.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,wFAAgE;AAChE,iFAAyD;AAEzD,SAAwB,cAAc;IAClC,OAAO,CACH,oBAAC,iBAAO,IAAC,KAAK,EAAC,yHAAyH;QACpI,6BAAK,GAAG,EAAE,6BAAmB,CAAC,WAAW,EAAE,GAAG,sCAAsC,GAAI,CAClF,CACb,CAAC;AACN,CAAC;AAND,iCAMC","sourcesContent":["import * as React from 'react';\nimport RoomstayThemeEngine from 'providers/RoomstayThemeEngine';\nimport Tooltip from 'components/generic/Tooltip/Tooltip';\n\nexport default function SSLSecureBadge() {\n    return (\n        <Tooltip title=\"Shop without worries! This site is protected by high level encryption, to ensure every purchase is always safe & secure\">\n            <img src={RoomstayThemeEngine.getAssetUrl() + 'assets/img/ssl-secure-connection.png'} />\n        </Tooltip>\n    );\n}\n"]}

package/dist/src/components/generic/buttons/NextStepButton.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -8,13 +31,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
+const React = __importStar(require("react"));
 const react_1 = require("react");
-const BEButton_1 = require("components/generic/BEButton");
+const BEButton_1 = __importDefault(require("components/generic/BEButton"));
 const Icon_1 = require("components/generic/Icon/Icon");
-const ScreenSize_1 = require("util/ScreenSize");
-const StepManager_1 = require("util/StepManager");
+const ScreenSize_1 = __importDefault(require("util/ScreenSize"));
+const StepManager_1 = __importDefault(require("util/StepManager"));
 const contexts_1 = require("@frontend/contexts");
 function NextStepButton(props) {
     const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);

package/dist/src/components/generic/buttons/NextStepButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"NextStepButton.js","sourceRoot":"/","sources":["src/components/generic/buttons/NextStepButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,+BAA+B;AAC/B,iCAAmC;AACnC,0DAAmD;AACnD,uDAAwD;AAExD,gDAAyC;AAEzC,kDAA2C;AAC3C,iDAA0D;AAe1D,SAAwB,cAAc,CAAC,KAA0B;IAC7D,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACjD,MAAM,kBAAkB,GAAG,GAAS,EAAE;QAClC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,MAAM,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE;YAC9D,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAW,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;SACrE;IACL,CAAC,CAAA,CAAC;IACF,OAAO,CACH,6BAAK,SAAS,EAAC,kBAAkB;QAC7B,oBAAC,kBAAQ,IACL,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAQ,CAAC,UAAU,EACjD,YAAY,EAAC,OAAO,EACpB,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,aAAa,IAAI,OAAO,CAAC,UAAU,IAAI,oBAAU,CAAC,MAAM,EACpE,OAAO,EAAE,kBAAkB,IAE1B,KAAK,CAAC,IAAI,CACJ,CACT,CACT,CAAC;AACN,CAAC;AAxBD,iCAwBC","sourcesContent":["import * as React from 'react';\nimport { useContext } from 'react';\nimport BEButton from 'components/generic/BEButton';\nimport { IconType } from 'components/generic/Icon/Icon';\n\nimport ScreenSize from 'util/ScreenSize';\nimport Step from 'pages/steps/Step';\nimport StepManager from 'util/StepManager';\nimport { BookingEngineContext } from '@frontend/contexts';\n\nexport interface NextStepButtonProps {\n    text: string;\n    history: any;\n    currentStep: Step;\n\n    disabled?: boolean;\n    isLoading?: boolean;\n    onClick?: () => Promise<unknown>;\n    wideByDefault?: boolean;\n\n    hideIcon?: boolean;\n}\n\nexport default function NextStepButton(props: NextStepButtonProps) {\n    const context = useContext(BookingEngineContext);\n    const buttonClickHandler = async () => {\n        if (!props.onClick || (props.onClick && (await props.onClick()))) {\n            props.history.push(StepManager.getNextStepUrl(props.currentStep));\n        }\n    };\n    return (\n        <div className=\"next-step-button\">\n            <BEButton\n                size={'large'}\n                icon={props.hideIcon ? null : IconType.ArrowRight}\n                iconPosition=\"right\"\n                filled={true}\n                primary={true}\n                isLoading={props.isLoading}\n                disabled={props.disabled}\n                wide={props.wideByDefault || context.screenSize <= ScreenSize.Medium}\n                onClick={buttonClickHandler}\n            >\n                {props.text}\n            </BEButton>\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"NextStepButton.js","sourceRoot":"/","sources":["src/components/generic/buttons/NextStepButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,iCAAmC;AACnC,2EAAmD;AACnD,uDAAwD;AAExD,iEAAyC;AAEzC,mEAA2C;AAC3C,iDAA0D;AAe1D,SAAwB,cAAc,CAAC,KAA0B;IAC7D,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACjD,MAAM,kBAAkB,GAAG,GAAS,EAAE;QAClC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,MAAM,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE;YAC9D,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAW,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;SACrE;IACL,CAAC,CAAA,CAAC;IACF,OAAO,CACH,6BAAK,SAAS,EAAC,kBAAkB;QAC7B,oBAAC,kBAAQ,IACL,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAQ,CAAC,UAAU,EACjD,YAAY,EAAC,OAAO,EACpB,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,aAAa,IAAI,OAAO,CAAC,UAAU,IAAI,oBAAU,CAAC,MAAM,EACpE,OAAO,EAAE,kBAAkB,IAE1B,KAAK,CAAC,IAAI,CACJ,CACT,CACT,CAAC;AACN,CAAC;AAxBD,iCAwBC","sourcesContent":["import * as React from 'react';\nimport { useContext } from 'react';\nimport BEButton from 'components/generic/BEButton';\nimport { IconType } from 'components/generic/Icon/Icon';\n\nimport ScreenSize from 'util/ScreenSize';\nimport Step from 'pages/steps/Step';\nimport StepManager from 'util/StepManager';\nimport { BookingEngineContext } from '@frontend/contexts';\n\nexport interface NextStepButtonProps {\n    text: string;\n    history: any;\n    currentStep: Step;\n\n    disabled?: boolean;\n    isLoading?: boolean;\n    onClick?: () => Promise<unknown>;\n    wideByDefault?: boolean;\n\n    hideIcon?: boolean;\n}\n\nexport default function NextStepButton(props: NextStepButtonProps) {\n    const context = useContext(BookingEngineContext);\n    const buttonClickHandler = async () => {\n        if (!props.onClick || (props.onClick && (await props.onClick()))) {\n            props.history.push(StepManager.getNextStepUrl(props.currentStep));\n        }\n    };\n    return (\n        <div className=\"next-step-button\">\n            <BEButton\n                size={'large'}\n                icon={props.hideIcon ? null : IconType.ArrowRight}\n                iconPosition=\"right\"\n                filled={true}\n                primary={true}\n                isLoading={props.isLoading}\n                disabled={props.disabled}\n                wide={props.wideByDefault || context.screenSize <= ScreenSize.Medium}\n                onClick={buttonClickHandler}\n            >\n                {props.text}\n            </BEButton>\n        </div>\n    );\n}\n"]}

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

@@ -1,14 +1,40 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const classNames = require("classnames");
-const React = require("react");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const CountryCodesAndNumbers_1 = require("models/CountryCodesAndNumbers");
 const Translation_1 = require("translations/Translation");
-const Icon_1 = require("components/generic/Icon/Icon");
+const Icon_1 = __importStar(require("components/generic/Icon/Icon"));
 require("./EnhancedPhoneNumberField.global.scss");
-const AutoFocusOnSelect_1 = require("../../../../hooks/AutoFocusOnSelect");
+const AutoFocusOnSelect_1 = require("hooks/AutoFocusOnSelect");
 const Select_1 = require("../../Select/Select");
 const PHONE_AND_PREFIX_SPLIT = ' ';
 const EnhancedPhoneNumberField = (props, ref) => {
@@ -24,7 +50,7 @@ const EnhancedPhoneNumberField = (props, ref) => {
             return `${(a.suggested ? '000' : '') + a.label}`.localeCompare(`${(b.suggested ? '000' : '') + b.label}`);
         });
     }, [CountryCodesAndNumbers_1.ListOfCountriesAndCodes]);
-    const container = (0, react_1.useRef)(null);
+    const [container, setContainer] = (0, react_1.useState)(null);
     const { validationStatus, name, onChange, value } = props;
     const [selectedCountry, subscriberCode] = (0, react_1.useMemo)(() => {
         var _a;
@@ -66,7 +92,7 @@ const EnhancedPhoneNumberField = (props, ref) => {
         onItemSelected();
         raiseOnChangeEvent(selectedCountry, undefined);
     };
-    const fieldClasses = classNames('rs-enhanced-phone-field', {
+    const fieldClasses = (0, classnames_1.default)('rs-enhanced-phone-field', {
         [`--${validationStatus}`]: !!validationStatus,
         '--focused': isFocused,
         '--disabled': props.disabled,
@@ -85,8 +111,8 @@ const EnhancedPhoneNumberField = (props, ref) => {
                 selectedCountry.phone),
             React.createElement("input", { disabled: props.disabled, ref: innerRef, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Phone) + ' *', type: "number", style: { paddingLeft: selectedCountry.phone.length * 8 + 20 + 'px' }, onChange: onInputChanged, value: subscriberCode }),
             React.createElement("div", { className: "rs-enhanced-phone-field--number-status" })),
-        React.createElement("div", { className: "rs-enhanced-phone-field--anchor", ref: container }),
-        React.createElement(Select_1.Select, { open: isDropdownOpen, onClose: onDropdownClosed, target: container.current, options: organizedCountries, value: selectedCountry.code, onChange: (value) => onCountryClick(getOption(value)), labelName: "code", keyName: "code", renderOption: (country) => (React.createElement("div", { className: "rs-enhanced-phone-field--suggest-list-country" },
+        React.createElement("div", { className: "rs-enhanced-phone-field--anchor", ref: setContainer }),
+        React.createElement(Select_1.Select, { open: isDropdownOpen, onClose: onDropdownClosed, target: container, options: organizedCountries, value: selectedCountry.code, onChange: (value) => onCountryClick(getOption(value)), labelName: "code", keyName: "code", renderOption: (country) => (React.createElement("div", { className: "rs-enhanced-phone-field--suggest-list-country" },
                 React.createElement("div", { className: "rs-enhanced-phone-field--suggest-list-country-icon" }, (0, CountryCodesAndNumbers_1.convertCountryCodeToFlag)(country.code)),
                 React.createElement("div", { className: "rs-enhanced-phone-field--suggest-list-country-name" },
                     country.label,

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

@@ -1 +1 @@
-{"version":3,"file":"EnhancedPhoneNumberField.js","sourceRoot":"/","sources":["src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as classNames from 'classnames';\nimport * as React from 'react';\nimport { ChangeEvent, ForwardRefRenderFunction, PropsWithChildren, useImperativeHandle, useMemo, useRef } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { convertCountryCodeToFlag, CountryType, ListOfCountriesAndCodes } from 'models/CountryCodesAndNumbers';\nimport { Translation } from 'translations/Translation';\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\n\nimport './EnhancedPhoneNumberField.global.scss';\nimport { useAutoFocusOnSelect } from '../../../../hooks/AutoFocusOnSelect';\nimport { Select } from '../../Select/Select';\n\ninterface EnhancedPhoneNumberField extends PropsWithChildren<any> {\n    validationStatus?: 'success' | 'error';\n    name?: string;\n    value?: string;\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n    disabled?: boolean;\n}\n\nconst PHONE_AND_PREFIX_SPLIT = ' ';\n\nconst EnhancedPhoneNumberField: ForwardRefRenderFunction<HTMLInputElement, EnhancedPhoneNumberField> = (props, ref) => {\n    const innerRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => innerRef.current);\n    const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen, isFocused } = useAutoFocusOnSelect({\n        ref: innerRef.current,\n        onlyAutoOpenWhenInputEmpty: true,\n    });\n\n    const { t } = useTranslation();\n\n    const organizedCountries: CountryType[] = useMemo(() => {\n        return ListOfCountriesAndCodes.sort((a, b) => {\n            return `${(a.suggested ? '000' : '') + a.label}`.localeCompare(`${(b.suggested ? '000' : '') + b.label}`);\n        });\n    }, [ListOfCountriesAndCodes]);\n\n    const container = useRef(null);\n\n    const { validationStatus, name, onChange, value } = props;\n\n    const [selectedCountry, subscriberCode] = useMemo(() => {\n        const [prefix, number] = value?.split(PHONE_AND_PREFIX_SPLIT) ?? [];\n        let selectedCountry: CountryType;\n\n        if (prefix) {\n            for (const country of organizedCountries) {\n                if (prefix === `${country.phone}`) {\n                    selectedCountry = country;\n                    break;\n                }\n            }\n\n            if (!selectedCountry) {\n                selectedCountry = organizedCountries[0];\n            }\n\n            return [selectedCountry, number];\n        }\n\n        return [organizedCountries[0], ''];\n    }, [value]);\n\n    const getOption = (key: CountryType['code']): CountryType => {\n        return organizedCountries.find(({ code }) => code === key);\n    };\n\n    const raiseOnChangeEvent = (prefix?: CountryType, suffix?: string) => {\n        let newSuffix = suffix ?? subscriberCode;\n\n        if (newSuffix.startsWith('0')) {\n            newSuffix = newSuffix.substring(1);\n        }\n\n        const newValue = `${prefix?.phone ?? selectedCountry.phone}${PHONE_AND_PREFIX_SPLIT}${newSuffix}`;\n\n        if (value != newValue) {\n            onChange?.({ target: { name, value: newValue } } as any);\n        }\n    };\n\n    const onInputChanged = (e: ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value;\n        raiseOnChangeEvent(undefined, value);\n    };\n\n    const onPrefixChanged = (selectedCountry: CountryType) => {\n        onItemSelected();\n        raiseOnChangeEvent(selectedCountry, undefined);\n    };\n\n    const fieldClasses = classNames('rs-enhanced-phone-field', {\n        [`--${validationStatus}`]: !!validationStatus,\n        '--focused': isFocused,\n        '--disabled': props.disabled,\n    });\n    const onCountryClick = (country: CountryType) => {\n        onPrefixChanged(country);\n        return;\n    };\n\n    return (\n        <div className={fieldClasses}>\n            <div className=\"rs-enhanced-phone-field--country\" onClick={onTriggerClicked}>\n                <div className=\"rs-enhanced-phone-field--country-icon\">{convertCountryCodeToFlag(selectedCountry.code)}</div>\n                <Icon icon={IconType.Dropdown} />\n            </div>\n            <div className=\"rs-enhanced-phone-field--number\">\n                <span className=\"rs-enhanced-phone-field--number-prefix\">+{selectedCountry.phone}</span>\n                <input\n                    disabled={props.disabled}\n                    ref={innerRef}\n                    placeholder={t(Translation.Step.Confirmation.Inputs.Phone) + ' *'}\n                    type=\"number\"\n                    style={{ paddingLeft: selectedCountry.phone.length * 8 + 20 + 'px' }}\n                    onChange={onInputChanged}\n                    value={subscriberCode}\n                />\n\n                <div className=\"rs-enhanced-phone-field--number-status\"></div>\n            </div>\n            <div className=\"rs-enhanced-phone-field--anchor\" ref={container}></div>\n            <Select<CountryType, 'code'>\n                open={isDropdownOpen}\n                onClose={onDropdownClosed}\n                target={container.current}\n                options={organizedCountries}\n                value={selectedCountry.code}\n                onChange={(value) => onCountryClick(getOption(value))}\n                labelName=\"code\"\n                keyName=\"code\"\n                renderOption={(country) => (\n                    <div className=\"rs-enhanced-phone-field--suggest-list-country\">\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-icon\">{convertCountryCodeToFlag(country.code)}</div>\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-name\">\n                            {country.label} <span>+{country.phone}</span>\n                        </div>\n                    </div>\n                )}\n            />\n        </div>\n    );\n};\n\nexport default React.forwardRef<HTMLInputElement, React.PropsWithChildren<EnhancedPhoneNumberField>>(EnhancedPhoneNumberField);\n"]}
+{"version":3,"file":"EnhancedPhoneNumberField.js","sourceRoot":"/","sources":["src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames';\nimport * as React from 'react';\nimport { ChangeEvent, ForwardRefRenderFunction, PropsWithChildren, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { convertCountryCodeToFlag, CountryType, ListOfCountriesAndCodes } from 'models/CountryCodesAndNumbers';\nimport { Translation } from 'translations/Translation';\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\n\nimport './EnhancedPhoneNumberField.global.scss';\nimport { useAutoFocusOnSelect } from 'hooks/AutoFocusOnSelect';\nimport { Select } from '../../Select/Select';\n\ninterface EnhancedPhoneNumberField extends PropsWithChildren<any> {\n    validationStatus?: 'success' | 'error';\n    name?: string;\n    value?: string;\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n    disabled?: boolean;\n}\n\nconst PHONE_AND_PREFIX_SPLIT = ' ';\n\nconst EnhancedPhoneNumberField: ForwardRefRenderFunction<HTMLInputElement, EnhancedPhoneNumberField> = (props, ref) => {\n    const innerRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => innerRef.current);\n    const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen, isFocused } = useAutoFocusOnSelect({\n        ref: innerRef.current,\n        onlyAutoOpenWhenInputEmpty: true,\n    });\n\n    const { t } = useTranslation();\n\n    const organizedCountries: CountryType[] = useMemo(() => {\n        return ListOfCountriesAndCodes.sort((a, b) => {\n            return `${(a.suggested ? '000' : '') + a.label}`.localeCompare(`${(b.suggested ? '000' : '') + b.label}`);\n        });\n    }, [ListOfCountriesAndCodes]);\n\n    const [container, setContainer] = useState<HTMLDivElement>(null);\n\n    const { validationStatus, name, onChange, value } = props;\n\n    const [selectedCountry, subscriberCode] = useMemo(() => {\n        const [prefix, number] = value?.split(PHONE_AND_PREFIX_SPLIT) ?? [];\n        let selectedCountry: CountryType;\n\n        if (prefix) {\n            for (const country of organizedCountries) {\n                if (prefix === `${country.phone}`) {\n                    selectedCountry = country;\n                    break;\n                }\n            }\n\n            if (!selectedCountry) {\n                selectedCountry = organizedCountries[0];\n            }\n\n            return [selectedCountry, number];\n        }\n\n        return [organizedCountries[0], ''];\n    }, [value]);\n\n    const getOption = (key: CountryType['code']): CountryType => {\n        return organizedCountries.find(({ code }) => code === key);\n    };\n\n    const raiseOnChangeEvent = (prefix?: CountryType, suffix?: string) => {\n        let newSuffix = suffix ?? subscriberCode;\n\n        if (newSuffix.startsWith('0')) {\n            newSuffix = newSuffix.substring(1);\n        }\n\n        const newValue = `${prefix?.phone ?? selectedCountry.phone}${PHONE_AND_PREFIX_SPLIT}${newSuffix}`;\n\n        if (value != newValue) {\n            onChange?.({ target: { name, value: newValue } } as any);\n        }\n    };\n\n    const onInputChanged = (e: ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value;\n        raiseOnChangeEvent(undefined, value);\n    };\n\n    const onPrefixChanged = (selectedCountry: CountryType) => {\n        onItemSelected();\n        raiseOnChangeEvent(selectedCountry, undefined);\n    };\n\n    const fieldClasses = classNames('rs-enhanced-phone-field', {\n        [`--${validationStatus}`]: !!validationStatus,\n        '--focused': isFocused,\n        '--disabled': props.disabled,\n    });\n    const onCountryClick = (country: CountryType) => {\n        onPrefixChanged(country);\n        return;\n    };\n\n    return (\n        <div className={fieldClasses}>\n            <div className=\"rs-enhanced-phone-field--country\" onClick={onTriggerClicked}>\n                <div className=\"rs-enhanced-phone-field--country-icon\">{convertCountryCodeToFlag(selectedCountry.code)}</div>\n                <Icon icon={IconType.Dropdown} />\n            </div>\n            <div className=\"rs-enhanced-phone-field--number\">\n                <span className=\"rs-enhanced-phone-field--number-prefix\">+{selectedCountry.phone}</span>\n                <input\n                    disabled={props.disabled}\n                    ref={innerRef}\n                    placeholder={t(Translation.Step.Confirmation.Inputs.Phone) + ' *'}\n                    type=\"number\"\n                    style={{ paddingLeft: selectedCountry.phone.length * 8 + 20 + 'px' }}\n                    onChange={onInputChanged}\n                    value={subscriberCode}\n                />\n\n                <div className=\"rs-enhanced-phone-field--number-status\"></div>\n            </div>\n            <div className=\"rs-enhanced-phone-field--anchor\" ref={setContainer}></div>\n            <Select<CountryType, 'code'>\n                open={isDropdownOpen}\n                onClose={onDropdownClosed}\n                target={container}\n                options={organizedCountries}\n                value={selectedCountry.code}\n                onChange={(value) => onCountryClick(getOption(value))}\n                labelName=\"code\"\n                keyName=\"code\"\n                renderOption={(country) => (\n                    <div className=\"rs-enhanced-phone-field--suggest-list-country\">\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-icon\">{convertCountryCodeToFlag(country.code)}</div>\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-name\">\n                            {country.label} <span>+{country.phone}</span>\n                        </div>\n                    </div>\n                )}\n            />\n        </div>\n    );\n};\n\nexport default React.forwardRef<HTMLInputElement, React.PropsWithChildren<EnhancedPhoneNumberField>>(EnhancedPhoneNumberField);\n"]}

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

@@ -1,4 +1,4 @@
-import * as dayjs from 'dayjs';
+import dayjs from 'dayjs';
 export interface DatePickerProps {
     showMonthOnLoad?: dayjs.Dayjs;
     selectedStartDate?: dayjs.Dayjs;

package/dist/src/components/generic/date/DatePicker.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -8,23 +31,27 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
+const React = __importStar(require("react"));
 const Color_1 = require("util/Color");
-const Icon_1 = require("components/generic/Icon/Icon");
+const Icon_1 = __importStar(require("components/generic/Icon/Icon"));
 const react_1 = require("react");
-const classNames = require("classnames");
-const dayjs = require("dayjs");
+const classnames_1 = __importDefault(require("classnames"));
+const dayjs_1 = __importDefault(require("dayjs"));
 const contexts_1 = require("@frontend/contexts");
-const DatePickerMonth_1 = require("components/generic/date/DatePickerMonth");
-const BookingAPI_1 = require("api/BookingAPI");
+const DatePickerMonth_1 = __importDefault(require("components/generic/date/DatePickerMonth"));
+const BookingAPI_1 = __importDefault(require("api/BookingAPI"));
 const contexts_2 = require("@frontend/contexts");
-const DataLayer_1 = require("util/DataLayer");
-const MinimumNightStayPill_1 = require("components/steps/MinimumNightStayPill");
-const DaysSelectedInformer_1 = require("components/steps/DaysSelectedInformer");
+const DataLayer_1 = __importStar(require("util/DataLayer"));
+const MinimumNightStayPill_1 = __importDefault(require("components/steps/MinimumNightStayPill"));
+const DaysSelectedInformer_1 = __importDefault(require("components/steps/DaysSelectedInformer"));
 const hooks_1 = require("@frontend/hooks");
-const DatePickerTypeFeature_1 = require("providers/feature/DatePickerTypeFeature");
-const DatePickerWeek = (0, react_1.lazy)(() => Promise.resolve().then(() => require('components/generic/date/DatePickerWeek')));
+const DatePickerTypeFeature_1 = __importDefault(require("providers/feature/DatePickerTypeFeature"));
+const WeekViewSkeleton_1 = __importDefault(require("./WeekViewSkeleton"));
+const DatePickerWeek = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('components/generic/date/DatePickerWeek'))));
 var DateRangePickingState;
 (function (DateRangePickingState) {
     DateRangePickingState[DateRangePickingState["StartDate"] = 1] = "StartDate";
@@ -33,7 +60,7 @@ var DateRangePickingState;
 function DatePicker(props) {
     var _a, _b;
     const { hotel } = (0, hooks_1.useCurrentHotel)();
-    const [currentMonth, setCurrentMonth] = (0, react_1.useState)(props.showMonthOnLoad ? props.showMonthOnLoad : props.selectedStartDate ? props.selectedStartDate : dayjs());
+    const [currentMonth, setCurrentMonth] = (0, react_1.useState)(props.showMonthOnLoad ? props.showMonthOnLoad : props.selectedStartDate ? props.selectedStartDate : (0, dayjs_1.default)());
     const [selectedStartDate, setSelectedStartDate] = (0, react_1.useState)((_a = props.selectedStartDate) !== null && _a !== void 0 ? _a : null);
     const [selectedEndDate, setSelectedEndDate] = (0, react_1.useState)((_b = props.selectedEndDate) !== null && _b !== void 0 ? _b : null);
     const [hoveringOverDate, setHoveringOverDate] = (0, react_1.useState)(null);
@@ -147,8 +174,8 @@ function DatePicker(props) {
         }
     }, [selectedEndDate]);
     const context = {
-        today: dayjs(),
-        todayInUnix: dayjs().unix(),
+        today: (0, dayjs_1.default)(),
+        todayInUnix: (0, dayjs_1.default)().unix(),
         startDate: selectedStartDate,
         endDate: selectedEndDate,
         hoveredMonth: hoveringOverDate,
@@ -163,9 +190,9 @@ function DatePicker(props) {
     const printMonths = (0, react_1.useMemo)(() => (React.createElement(React.Fragment, null, calendarStyle === 'Month' ? (React.createElement(React.Fragment, null,
         React.createElement(DatePickerMonth_1.default, { small: props.small, showingMonth: currentMonth }),
         props.showMultipleMonths && React.createElement(DatePickerMonth_1.default, { showingMonth: currentMonth.add(1, 'month') }))) : (React.createElement(React.Fragment, null,
-        React.createElement(React.Suspense, { fallback: "Loading..." },
+        React.createElement(React.Suspense, { fallback: React.createElement(WeekViewSkeleton_1.default, null) },
             React.createElement(DatePickerWeek, null)))))), [currentMonth, props.showMultipleMonths, calendarStyle]);
-    const calendarClassNames = classNames('diji-calendar', {
+    const calendarClassNames = (0, classnames_1.default)('diji-calendar', {
         '--single': !props.showMultipleMonths,
         '--small': props.small,
         '--week': calendarStyle === 'Week',