@roomstay/frontend 1.6.1 → 2.0.0-2

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

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from 'react';
+interface RadioButtonGroupProps {
+    options: {
+        value: string;
+        label?: ReactNode;
+        disabled?: boolean;
+        /** Enabled a tooltip that gives more info on why the field is disabled */
+        disabledReason?: string;
+        renderContent?: () => ReactNode;
+    }[];
+    value: string;
+    onChange: (value: string) => void;
+}
+declare const RadioButtonGroup: FC<RadioButtonGroupProps>;
+export default RadioButtonGroup;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const RadioButton_1 = require("components/generic/RadioButtonGroup/RadioButton");
+const RadioButtonGroup_module_scss_1 = require("./RadioButtonGroup.module.scss");
+const AutoAutoHeight_1 = require("animations/AutoAutoHeight");
+const Tooltip_1 = require("../Tooltip/Tooltip");
+const RadioButtonGroup = ({ options, value: valueProp, onChange }) => {
+    return (React.createElement("div", { className: RadioButtonGroup_module_scss_1.default.root }, options.map(({ value, label, disabled, disabledReason, renderContent }) => {
+        const radioButton = (React.createElement(RadioButton_1.RadioButton, { className: RadioButtonGroup_module_scss_1.default.item, key: value, checked: value === valueProp, onChange: () => {
+                onChange(value);
+            }, label: label, disabled: disabled, renderContent: () => React.createElement(AutoAutoHeight_1.default, { open: true }, renderContent()) }));
+        if (disabled && disabledReason) {
+            return React.createElement(Tooltip_1.default, { title: disabledReason }, radioButton);
+        }
+        return radioButton;
+    })));
+};
+exports.default = RadioButtonGroup;
+//# sourceMappingURL=RadioButtonGroup.js.map

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

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

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

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

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

@@ -2,21 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
 const dayjs = require("dayjs");
-const ImageGallerySlider_1 = require("../steps/room/ImageGallerySlider");
-const BEButton_1 = require("./BEButton");
-const Icon_1 = require("./Icon");
-const Color_1 = require("../../util/Color");
-const Text_1 = require("./Text");
+const ImageGallerySlider_1 = require("components/steps/room/ImageGallerySlider");
+const BEButton_1 = require("components/generic/BEButton");
+const Icon_1 = require("components/generic/Icon/Icon");
+const Color_1 = require("util/Color");
+const Text_1 = require("components/generic/Text");
 const react_i18next_1 = require("react-i18next");
-const Translation_1 = require("../../translations/Translation");
+const Translation_1 = require("translations/Translation");
 const react_1 = require("react");
-const ScreenSize_1 = require("../../util/ScreenSize");
+const ScreenSize_1 = require("util/ScreenSize");
 const contexts_1 = require("@frontend/contexts");
 const RecentSearchesCard = ({ basketRow, onRemove, onViewRatesClicked }) => {
     const start = dayjs(basketRow.getStartDate()).format('ddd DD MMM');
     const end = dayjs(basketRow.getEndDate()).format('ddd DD MMM');
-    const { t } = react_i18next_1.useTranslation();
-    const beContext = react_1.useContext(contexts_1.BookingEngineContext);
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const beContext = (0, react_1.useContext)(contexts_1.BookingEngineContext);
     return (React.createElement("div", { style: { backgroundColor: '#fff' }, className: "recent-searches-card" },
         React.createElement("div", { className: "recent-searches-card--gallery" },
             React.createElement(ImageGallerySlider_1.default, { images: basketRow.getRoom().images, hideLightboxIcon: true })),

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

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

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

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-const react_router_1 = require("react-router");
+const react_router_dom_1 = require("react-router-dom");
 function ScrollToTop(props) {
     const history = props.history;
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const unListen = history.listen(() => {
             window.scrollTo(0, 0);
         });
@@ -14,5 +14,5 @@ function ScrollToTop(props) {
     }, []);
     return null;
 }
-exports.default = react_router_1.withRouter(ScrollToTop);
+exports.default = (0, react_router_dom_1.withRouter)(ScrollToTop);
 //# sourceMappingURL=ScrollToTop.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollToTop.js","sourceRoot":"/","sources":["src/components/generic/ScrollToTop.tsx"],"names":[],"mappings":";;AAAA,iCAAkC;AAClC,+CAA0C;AAE1C,SAAS,WAAW,CAAC,KAAU;IAC3B,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAE9B,iBAAS,CAAC,GAAG,EAAE;QACX,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,EAAE;YACjC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACR,QAAQ,EAAE,CAAC;QACf,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,kBAAe,yBAAU,CAAC,WAAW,CAAC,CAAC","sourcesContent":["import { useEffect } from 'react';\nimport { withRouter } from 'react-router';\n\nfunction ScrollToTop(props: any): null {\n    const history = props.history;\n\n    useEffect(() => {\n        const unListen = history.listen(() => {\n            window.scrollTo(0, 0);\n        });\n\n        return () => {\n            unListen();\n        };\n    }, []);\n\n    return null;\n}\n\nexport default withRouter(ScrollToTop);\n"]}
+{"version":3,"file":"ScrollToTop.js","sourceRoot":"/","sources":["src/components/generic/ScrollToTop.tsx"],"names":[],"mappings":";;AAAA,iCAAkC;AAClC,uDAA8C;AAE9C,SAAS,WAAW,CAAC,KAAU;IAC3B,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAE9B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,EAAE;YACjC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACR,QAAQ,EAAE,CAAC;QACf,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,kBAAe,IAAA,6BAAU,EAAC,WAAW,CAAC,CAAC","sourcesContent":["import { useEffect } from 'react';\nimport { withRouter } from 'react-router-dom';\n\nfunction ScrollToTop(props: any): null {\n    const history = props.history;\n\n    useEffect(() => {\n        const unListen = history.listen(() => {\n            window.scrollTo(0, 0);\n        });\n\n        return () => {\n            unListen();\n        };\n    }, []);\n\n    return null;\n}\n\nexport default withRouter(ScrollToTop);\n"]}

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

@@ -0,0 +1,24 @@
+import { ReactNode, Ref } from 'react';
+import './Select.global.scss';
+export type Option<KeyName extends string> = {
+    [keyName in KeyName]: string;
+} & Record<any, any>;
+type Select<TOption extends Option<KeyName>, KeyName extends string> = {
+    options: TOption[];
+    value: TOption[KeyName];
+    keyName: KeyName;
+    labelName?: TOption[keyof TOption];
+    target?: HTMLElement;
+    open?: boolean;
+    onClose?: (e: MouseEvent) => void;
+    onChange?: (value: TOption[KeyName]) => void;
+    className?: string;
+    offset?: [number, number];
+    renderOption?: (option: TOption) => ReactNode;
+    nativeOnMobile?: boolean;
+};
+export declare const InnerSelect: <TOption extends Option<KeyName>, KeyName extends string>({ target, open, onClose, options, value, onChange, keyName, labelName, className, offset, renderOption, nativeOnMobile }: Select<TOption, KeyName>, ref: Ref<HTMLDivElement>) => JSX.Element;
+export declare const Select: <TOption extends Option<KeyName>, KeyName extends string>(p: Select<TOption, KeyName> & {
+    ref?: Ref<HTMLDivElement>;
+}) => JSX.Element;
+export {};

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

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = exports.InnerSelect = void 0;
+const React = require("react");
+const react_1 = require("react");
+const Icon_1 = require("../Icon/Icon");
+const classNames = require("classnames");
+require("./Select.global.scss");
+const Overlay_1 = require("components/generic/Overlay/Overlay");
+const KeyboardControlOnSelect_1 = require("../../../hooks/KeyboardControlOnSelect");
+const Color_1 = require("../../../util/Color");
+const CombineState_1 = require("../../../hooks/CombineState");
+const WindowSize_1 = require("../../../hooks/WindowSize");
+const MOBILE_BREAKPOINT = 992;
+const InnerSelect = ({ target, open, onClose, options = [], value, onChange, keyName, labelName, className, offset, renderOption, nativeOnMobile = false }, ref) => {
+    const { width } = (0, WindowSize_1.useWindowSize)();
+    const targetRef = (0, react_1.useRef)(null);
+    const [_open, _setIsOpen] = (0, CombineState_1.useCombinedState)(open, false);
+    const _onClose = (e) => {
+        _setIsOpen(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose(e);
+    };
+    const overlayRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => overlayRef.current);
+    const _onSelected = (value) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        _setIsOpen(false);
+    };
+    const _getOption = (value) => {
+        return options === null || options === void 0 ? void 0 : options.find((option) => option[keyName] === value);
+    };
+    const { selectingItem, onItemMouseMove, onItemMouseLeave, onItemMouseEnter } = (0, KeyboardControlOnSelect_1.useKeyboardControlOnSelect)({
+        onSelected: (item) => _onSelected(item[keyName]),
+        isEnabled: _open,
+        options,
+        idName: keyName,
+        overlayRef: overlayRef.current,
+        defaultOption: _getOption(value),
+    });
+    const _getLabel = (value) => {
+        const option = options === null || options === void 0 ? void 0 : options.find((option) => option[keyName] === value);
+        return (option === null || option === void 0 ? void 0 : option[labelName]) || value;
+    };
+    const native = width && width < MOBILE_BREAKPOINT && nativeOnMobile;
+    return (React.createElement(React.Fragment, null,
+        (native || !target) && (React.createElement("span", { className: classNames('be-select', className), onClick: () => _setIsOpen(true), ref: targetRef },
+            native ? (React.createElement("select", { value: value, onChange: (e) => onChange(e.target.value) }, options.map((item) => {
+                return React.createElement("option", { value: value, key: item[keyName], label: _getLabel(item[keyName]) });
+            }))) : (_getLabel(value)),
+            React.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown, color: Color_1.Color.DarkGrey }))),
+        !native && (React.createElement(Overlay_1.Overlay, { offset: offset, usePortal: true, followElement: target || targetRef.current, placement: "bottom-start", open: open === undefined ? _open : open, onClose: _onClose, className: "rs-select--suggest-list", overlayRef: overlayRef }, options.map((option, index) => {
+            const isSelected = option[keyName] === value;
+            const isSelecting = option[keyName] === (selectingItem === null || selectingItem === void 0 ? void 0 : selectingItem[keyName]);
+            return (React.createElement("div", { key: index, className: classNames('rs-select--suggest-list-item', { '--selected': isSelected || isSelecting }), onClick: () => _onSelected(option[keyName]), onMouseEnter: () => {
+                    onItemMouseEnter(option);
+                }, onMouseLeave: () => onItemMouseLeave(), onMouseMove: () => onItemMouseMove() },
+                React.createElement("div", { className: "rs-select--suggest-list-option-name" }, renderOption ? renderOption(option) : labelName ? option[labelName] : ''),
+                isSelected && (React.createElement("span", { className: "rs-select--suggest-list-option-icon" },
+                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.Check })))));
+        })))));
+};
+exports.InnerSelect = InnerSelect;
+exports.Select = (0, react_1.forwardRef)(exports.InnerSelect);
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"/","sources":["src/components/generic/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { forwardRef, ReactNode, Ref, useImperativeHandle, useRef } from 'react';\nimport Icon, { IconType } from '../Icon/Icon';\n\nimport * as classNames from 'classnames';\n\nimport './Select.global.scss';\nimport { Overlay } from 'components/generic/Overlay/Overlay';\nimport { useKeyboardControlOnSelect } from '../../../hooks/KeyboardControlOnSelect';\nimport { Color } from '../../../util/Color';\nimport { useCombinedState } from '../../../hooks/CombineState';\nimport { useWindowSize } from '../../../hooks/WindowSize';\n\nexport type Option<KeyName extends string> = {\n    [keyName in KeyName]: string;\n} & Record<any, any>;\n\ntype Select<TOption extends Option<KeyName>, KeyName extends string> = {\n    options: TOption[];\n    value: TOption[KeyName];\n    keyName: KeyName;\n\n    labelName?: TOption[keyof TOption];\n    target?: HTMLElement;\n    open?: boolean;\n    onClose?: (e: MouseEvent) => void;\n    onChange?: (value: TOption[KeyName]) => void;\n    className?: string;\n    offset?: [number, number];\n    renderOption?: (option: TOption) => ReactNode;\n    nativeOnMobile?: boolean;\n};\n\nconst MOBILE_BREAKPOINT = 992;\n\nexport const InnerSelect = <TOption extends Option<KeyName>, KeyName extends string>(\n    { target, open, onClose, options = [], value, onChange, keyName, labelName, className, offset, renderOption, nativeOnMobile = false }: Select<TOption, KeyName>,\n    ref: Ref<HTMLDivElement>\n) => {\n    const { width } = useWindowSize();\n    const targetRef = useRef<HTMLSpanElement>(null);\n    const [_open, _setIsOpen] = useCombinedState<boolean>(open, false);\n\n    const _onClose = (e: MouseEvent): void => {\n        _setIsOpen(false);\n        onClose?.(e);\n    };\n\n    const overlayRef = useRef<HTMLDivElement>(null);\n    useImperativeHandle(ref, () => overlayRef.current);\n\n    const _onSelected = (value: TOption[KeyName]) => {\n        onChange?.(value);\n        _setIsOpen(false);\n    };\n\n    const _getOption = (value: TOption[keyof TOption]): TOption | undefined => {\n        return options?.find((option) => option[keyName] === value);\n    };\n\n    const { selectingItem, onItemMouseMove, onItemMouseLeave, onItemMouseEnter } = useKeyboardControlOnSelect<TOption>({\n        onSelected: (item) => _onSelected(item[keyName]),\n        isEnabled: _open,\n        options,\n        idName: keyName,\n        overlayRef: overlayRef.current,\n        defaultOption: _getOption(value),\n    });\n\n    const _getLabel = (value: TOption[keyof TOption]): string => {\n        const option = options?.find((option) => option[keyName] === value);\n        return option?.[labelName] || value;\n    };\n\n    const native = width && width < MOBILE_BREAKPOINT && nativeOnMobile;\n\n    return (\n        <>\n            {(native || !target) && (\n                <span className={classNames('be-select', className)} onClick={() => _setIsOpen(true)} ref={targetRef}>\n                    {native ? (\n                        <select value={value} onChange={(e) => onChange(e.target.value as TOption[KeyName])}>\n                            {options.map((item) => {\n                                return <option value={value} key={item[keyName]} label={_getLabel(item[keyName])}></option>;\n                            })}\n                        </select>\n                    ) : (\n                        _getLabel(value)\n                    )}\n                    <Icon icon={IconType.Dropdown} color={Color.DarkGrey} />\n                </span>\n            )}\n            {!native && (\n                <Overlay\n                    offset={offset}\n                    usePortal={true}\n                    followElement={target || targetRef.current}\n                    placement=\"bottom-start\"\n                    open={open === undefined ? _open : open}\n                    onClose={_onClose}\n                    className=\"rs-select--suggest-list\"\n                    overlayRef={overlayRef}\n                >\n                    {options.map((option, index) => {\n                        const isSelected = option[keyName] === value;\n                        const isSelecting = option[keyName] === selectingItem?.[keyName];\n\n                        return (\n                            <div\n                                key={index}\n                                className={classNames('rs-select--suggest-list-item', { '--selected': isSelected || isSelecting })}\n                                onClick={() => _onSelected(option[keyName])}\n                                onMouseEnter={() => {\n                                    onItemMouseEnter(option);\n                                }}\n                                onMouseLeave={() => onItemMouseLeave()}\n                                onMouseMove={() => onItemMouseMove()}\n                            >\n                                <div className=\"rs-select--suggest-list-option-name\">{renderOption ? renderOption(option) : labelName ? option[labelName] : ''}</div>\n                                {isSelected && (\n                                    <span className=\"rs-select--suggest-list-option-icon\">\n                                        <Icon icon={IconType.Check} />\n                                    </span>\n                                )}\n                            </div>\n                        );\n                    })}\n                </Overlay>\n            )}\n        </>\n    );\n};\n\nexport const Select = forwardRef(InnerSelect) as <TOption extends Option<KeyName>, KeyName extends string>(\n    p: Select<TOption, KeyName> & { ref?: Ref<HTMLDivElement> }\n) => JSX.Element;\n"]}

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
-const Color_1 = require("../../util/Color");
-const Icon_1 = require("./Icon");
+const Color_1 = require("util/Color");
+const Icon_1 = require("components/generic/Icon/Icon");
 const Select = ({ className, items, onChange }) => {
     const onSelectChange = (event) => {
         onChange(event.target.value);

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"/","sources":["src/components/generic/Select.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,4CAAyC;AACzC,iCAAwC;AAaxC,MAAM,MAAM,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAS,EAAE,EAAE;IACrD,MAAM,cAAc,GAAG,CAAC,KAA2C,EAAE,EAAE;QACnE,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,OAAO,CACH;QACI,6BAAK,SAAS,EAAC,2BAA2B;YACtC,gCAAQ,SAAS,EAAC,WAAW,EAAC,QAAQ,EAAE,cAAc,IACjD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBAChB,OAAO,CACH,gCAAQ,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IACrC,IAAI,CAAC,IAAI,CACL,CACZ,CAAC;YACN,CAAC,CAAC,CACG;YACT,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,QAAQ,EAAE,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,aAAK,CAAC,QAAQ,GAAI,CACjE,CACP,CACN,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,MAAM,CAAC","sourcesContent":["import * as React from 'react';\nimport { Color } from '../../util/Color';\nimport Icon, { IconType } from './Icon';\n\ninterface SelectItem {\n    value: string | number;\n    text: any;\n}\n\ninterface Props {\n    className?: string;\n    items: SelectItem[];\n    onChange?: (selected: string | number) => void;\n}\n\nconst Select = ({ className, items, onChange }: Props) => {\n    const onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n        onChange(event.target.value);\n    };\n\n    return (\n        <>\n            <div className=\"d-flex align-items-center\">\n                <select className=\"rb-select\" onChange={onSelectChange}>\n                    {items.map((item) => {\n                        return (\n                            <option key={item.value} value={item.value}>\n                                {item.text}\n                            </option>\n                        );\n                    })}\n                </select>\n                <Icon icon={IconType.Dropdown} size=\"1em\" color={Color.DarkGrey} />\n            </div>\n        </>\n    );\n};\n\nexport default Select;\n"]}
+{"version":3,"file":"Select.js","sourceRoot":"/","sources":["src/components/generic/Select.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,sCAAmC;AACnC,uDAA8D;AAa9D,MAAM,MAAM,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAS,EAAE,EAAE;IACrD,MAAM,cAAc,GAAG,CAAC,KAA2C,EAAE,EAAE;QACnE,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,OAAO,CACH;QACI,6BAAK,SAAS,EAAC,2BAA2B;YACtC,gCAAQ,SAAS,EAAC,WAAW,EAAC,QAAQ,EAAE,cAAc,IACjD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBAChB,OAAO,CACH,gCAAQ,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IACrC,IAAI,CAAC,IAAI,CACL,CACZ,CAAC;YACN,CAAC,CAAC,CACG;YACT,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,QAAQ,EAAE,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,aAAK,CAAC,QAAQ,GAAI,CACjE,CACP,CACN,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,MAAM,CAAC","sourcesContent":["import * as React from 'react';\nimport { Color } from 'util/Color';\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\n\ninterface SelectItem {\n    value: string | number;\n    text: any;\n}\n\ninterface Props {\n    className?: string;\n    items: SelectItem[];\n    onChange?: (selected: string | number) => void;\n}\n\nconst Select = ({ className, items, onChange }: Props) => {\n    const onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n        onChange(event.target.value);\n    };\n\n    return (\n        <>\n            <div className=\"d-flex align-items-center\">\n                <select className=\"rb-select\" onChange={onSelectChange}>\n                    {items.map((item) => {\n                        return (\n                            <option key={item.value} value={item.value}>\n                                {item.text}\n                            </option>\n                        );\n                    })}\n                </select>\n                <Icon icon={IconType.Dropdown} size=\"1em\" color={Color.DarkGrey} />\n            </div>\n        </>\n    );\n};\n\nexport default Select;\n"]}

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export type MarkerType = {
+    isVisible: boolean;
+    label?: string | React.ReactNode;
+    value: number;
+};
+export type BackgroundMarkerType = {
+    isEdge?: 'start' | 'end';
+} & MarkerType;
+type SliderProps = {
+    min?: number;
+    max?: number;
+    onChange?: (markers: MarkerType[]) => void;
+    markers: MarkerType[];
+    backgroundMarkers?: BackgroundMarkerType[];
+};
+/**
+ * Specifically a ranged slider, specifically for the Filter section of the Step Room display.
+ * @param props
+ */
+export declare const Slider: (props: SliderProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = void 0;
+const React = require("react");
+const react_1 = require("react");
+const classnames = require("classnames");
+const Slider_module_scss_1 = require("./Slider.module.scss");
+const SliderMarker = (props) => {
+    const markerClasses = classnames(Slider_module_scss_1.default['marker'], {
+        [Slider_module_scss_1.default['--fixed']]: props.fixed,
+        [Slider_module_scss_1.default['--hidden']]: !props.marker.isVisible,
+        [Slider_module_scss_1.default[`--${props.isEdge}`]]: !!props.isEdge,
+    });
+    const markerLabelClasses = classnames(Slider_module_scss_1.default['marker-label'], {
+        [Slider_module_scss_1.default['--fixed']]: props.fixed,
+        [Slider_module_scss_1.default[`--${props.isEdge}`]]: !!props.isEdge,
+    });
+    const markerStyles = {};
+    if (props.offset) {
+        markerStyles.left = Math.max(Math.min(100, props.offset), 0) + '%';
+    }
+    return (React.createElement("span", { className: markerClasses, style: markerStyles }, props.marker && !!props.marker.label && React.createElement("span", { className: markerLabelClasses }, props.marker.label)));
+};
+/**
+ * Specifically a ranged slider, specifically for the Filter section of the Step Room display.
+ * @param props
+ */
+const Slider = (props) => {
+    var _a, _b;
+    const { min = 0, max = 100 } = props;
+    const [isMouseDown, setIsMouseDown] = (0, react_1.useState)(false);
+    const [movingIndex, setMovingIndex] = (0, react_1.useState)(null);
+    const sliderRef = (0, react_1.useRef)(null);
+    const funcMarkers = props.markers.map(() => { });
+    const changeTrigger = (e, isOnDown = false) => {
+        var _a;
+        const rect = (_a = sliderRef === null || sliderRef === void 0 ? void 0 : sliderRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect) {
+            return;
+        }
+        const startX = rect.x;
+        const endX = rect.x + rect.width;
+        const newValue = Math.max(Math.min(Math.round(min + ((max - min) * (e.clientX - startX)) / (endX - startX)), props.max), props.min);
+        let closestIndex = movingIndex;
+        const markers = props.markers;
+        for (let i = 0; i < markers.length; i++) {
+            if (!markers[i].isVisible)
+                continue;
+            if (closestIndex === null || Math.abs(newValue - markers[closestIndex].value) > Math.abs(newValue - markers[i].value)) {
+                closestIndex = i;
+            }
+        }
+        const newMarkers = [...props.markers];
+        newMarkers[closestIndex].value = newValue;
+        props.onChange(newMarkers);
+        setMovingIndex(closestIndex);
+    };
+    const onMouseDown = (e) => {
+        setIsMouseDown(true);
+        changeTrigger(e);
+    };
+    const mapValueToPercent = (value) => {
+        let newValue = 0;
+        const totalDiff = max - min;
+        const baseNewValue = value - min;
+        newValue = (baseNewValue / totalDiff) * 100;
+        return Math.min(Math.max(newValue, 0), 100);
+    };
+    (0, react_1.useEffect)(() => {
+        var _a;
+        let cancelled = false;
+        // Creating a bounding rect here to figure out how big the slider is,
+        // assumption is while the mouse is dragging, the screen size isn't going to change, right?
+        // If this is wrong, add a screen size listener to check on screen size change.
+        const rect = (_a = sliderRef === null || sliderRef === void 0 ? void 0 : sliderRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect) {
+            return;
+        }
+        const startX = rect.x;
+        const endX = rect.x + rect.width;
+        const mouseMoveListener = (e) => {
+            if (!cancelled && movingIndex !== null) {
+                changeTrigger(e);
+            }
+        };
+        const mouseUpListener = () => {
+            setIsMouseDown(false);
+            setMovingIndex(null);
+        };
+        document.body.addEventListener('mouseup', mouseUpListener);
+        document.body.addEventListener('mousemove', mouseMoveListener);
+        return () => {
+            cancelled = true;
+            document.body.removeEventListener('mouseup', mouseUpListener);
+            document.body.removeEventListener('mousemove', mouseMoveListener);
+        };
+    }, [movingIndex]);
+    return (React.createElement("div", { className: Slider_module_scss_1.default.slider, onMouseDown: onMouseDown, ref: sliderRef },
+        React.createElement("div", { className: Slider_module_scss_1.default['slider-track'] }, (_b = ((_a = props.backgroundMarkers) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 :
+            _b.map((marker) => {
+                // TODO: Add labels if we
+                // TODO: Possibly animate these with Spring library to make them smoother?
+                return React.createElement(SliderMarker, { offset: mapValueToPercent(marker.value), marker: marker, fixed: true, isEdge: marker.isEdge });
+            }),
+            React.createElement("div", { className: Slider_module_scss_1.default['slider-rail'], style: { left: `${mapValueToPercent(props.markers[0].value)}%`, right: `${100 - mapValueToPercent(props.markers[1].value)}%` } }),
+            props.markers.map((marker) => {
+                return React.createElement(SliderMarker, { offset: mapValueToPercent(marker.value), marker: marker });
+            }))));
+};
+exports.Slider = Slider;
+//# sourceMappingURL=Slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sourceRoot":"/","sources":["src/components/generic/Slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useState, useRef, useEffect } from 'react';\nimport * as classnames from 'classnames';\n\nimport styles from './Slider.module.scss';\n\nexport type MarkerType = {\n    isVisible: boolean;\n\n    label?: string | React.ReactNode;\n    value: number;\n};\n\nexport type BackgroundMarkerType = {\n    isEdge?: 'start' | 'end';\n} & MarkerType;\n\ntype SliderMakerProps = {\n    isEdge?: 'start' | 'end';\n    fixed?: boolean;\n\n    marker?: MarkerType;\n\n    /**\n     * On a scale of 0 to 100, how far should the marker be shown.\n     * @param offset number\n     */\n    offset?: number;\n};\n\nconst SliderMarker = (props: SliderMakerProps) => {\n    const markerClasses = classnames(styles['marker'], {\n        [styles['--fixed']]: props.fixed,\n        [styles['--hidden']]: !props.marker.isVisible,\n        [(styles as any)[`--${props.isEdge}`]]: !!props.isEdge,\n    });\n\n    const markerLabelClasses = classnames(styles['marker-label'], {\n        [styles['--fixed']]: props.fixed,\n        [(styles as any)[`--${props.isEdge}`]]: !!props.isEdge,\n    });\n\n    const markerStyles: React.CSSProperties = {};\n    if (props.offset) {\n        markerStyles.left = Math.max(Math.min(100, props.offset), 0) + '%';\n    }\n\n    return (\n        <span className={markerClasses} style={markerStyles}>\n            {props.marker && !!props.marker.label && <span className={markerLabelClasses}>{props.marker.label}</span>}\n        </span>\n    );\n};\n\ntype SliderProps = {\n    min?: number;\n    max?: number;\n\n    onChange?: (markers: MarkerType[]) => void;\n\n    markers: MarkerType[];\n    backgroundMarkers?: BackgroundMarkerType[];\n};\n\n/**\n * Specifically a ranged slider, specifically for the Filter section of the Step Room display.\n * @param props\n */\nexport const Slider = (props: SliderProps) => {\n    const { min = 0, max = 100 } = props;\n\n    const [isMouseDown, setIsMouseDown] = useState(false);\n    const [movingIndex, setMovingIndex] = useState<number>(null);\n\n    const sliderRef = useRef(null);\n\n    const funcMarkers = props.markers.map(() => {});\n\n    const changeTrigger = (e: MouseEvent | React.MouseEvent, isOnDown = false) => {\n        const rect = (sliderRef?.current as HTMLElement)?.getBoundingClientRect();\n        if (!rect) {\n            return;\n        }\n\n        const startX = rect.x;\n        const endX = rect.x + rect.width;\n\n        const newValue = Math.max(Math.min(Math.round(min + ((max - min) * (e.clientX - startX)) / (endX - startX)), props.max), props.min);\n\n        let closestIndex: number = movingIndex;\n        const markers = props.markers;\n\n        for (let i = 0; i < markers.length; i++) {\n            if (!markers[i].isVisible) continue;\n            if (closestIndex === null || Math.abs(newValue - markers[closestIndex].value) > Math.abs(newValue - markers[i].value)) {\n                closestIndex = i;\n            }\n        }\n\n        const newMarkers = [...props.markers];\n        newMarkers[closestIndex].value = newValue;\n\n        props.onChange(newMarkers);\n        setMovingIndex(closestIndex);\n    };\n\n    const onMouseDown = (e: React.MouseEvent) => {\n        setIsMouseDown(true);\n        changeTrigger(e);\n    };\n\n    const mapValueToPercent = (value: number) => {\n        let newValue = 0;\n\n        const totalDiff = max - min;\n        const baseNewValue = value - min;\n\n        newValue = (baseNewValue / totalDiff) * 100;\n\n        return Math.min(Math.max(newValue, 0), 100);\n    };\n\n    useEffect(() => {\n        let cancelled = false;\n        // Creating a bounding rect here to figure out how big the slider is,\n        // assumption is while the mouse is dragging, the screen size isn't going to change, right?\n        // If this is wrong, add a screen size listener to check on screen size change.\n        const rect = (sliderRef?.current as HTMLElement)?.getBoundingClientRect();\n\n        if (!rect) {\n            return;\n        }\n\n        const startX = rect.x;\n        const endX = rect.x + rect.width;\n\n        const mouseMoveListener = (e: MouseEvent) => {\n            if (!cancelled && movingIndex !== null) {\n                changeTrigger(e);\n            }\n        };\n\n        const mouseUpListener = () => {\n            setIsMouseDown(false);\n            setMovingIndex(null);\n        };\n\n        document.body.addEventListener('mouseup', mouseUpListener);\n        document.body.addEventListener('mousemove', mouseMoveListener);\n\n        return () => {\n            cancelled = true;\n\n            document.body.removeEventListener('mouseup', mouseUpListener);\n            document.body.removeEventListener('mousemove', mouseMoveListener);\n        };\n    }, [movingIndex]);\n\n    return (\n        <div className={styles.slider} onMouseDown={onMouseDown} ref={sliderRef}>\n            <div className={styles['slider-track']}>\n                {(props.backgroundMarkers ?? [])?.map((marker) => {\n                    // TODO: Add labels if we\n                    // TODO: Possibly animate these with Spring library to make them smoother?\n                    return <SliderMarker offset={mapValueToPercent(marker.value)} marker={marker} fixed={true} isEdge={marker.isEdge} />;\n                })}\n\n                <div\n                    className={styles['slider-rail']}\n                    style={{ left: `${mapValueToPercent(props.markers[0].value)}%`, right: `${100 - mapValueToPercent(props.markers[1].value)}%` }}\n                ></div>\n                {props.markers.map((marker) => {\n                    return <SliderMarker offset={mapValueToPercent(marker.value)} marker={marker} />;\n                })}\n            </div>\n        </div>\n    );\n};\n"]}

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare function reactForEach<P = any>(children: any, func: (el: React.ReactElement<P>, index: number) => void): void;
+export declare function reactMap<P = any>(children: any, func: (el: React.ReactElement<P>, index: number) => any): any;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reactMap = exports.reactForEach = void 0;
+const React = require("react");
+function reactForEach(children, func) {
+    let index = 0;
+    React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child))
+            func(child, index++);
+    });
+}
+exports.reactForEach = reactForEach;
+function reactMap(children, func) {
+    let index = 0;
+    return React.Children.map(children, (child) => (React.isValidElement(child) ? func(child, index++) : child));
+}
+exports.reactMap = reactMap;
+//# sourceMappingURL=ElementChildren.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ElementChildren.js","sourceRoot":"/","sources":["src/components/generic/Tabs/ElementChildren.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,SAAgB,YAAY,CAAU,QAAa,EAAE,IAAwD;IACzG,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACvC,IAAI,KAAK,CAAC,cAAc,CAAI,KAAK,CAAC;YAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;AACP,CAAC;AALD,oCAKC;AAED,SAAgB,QAAQ,CAAU,QAAa,EAAE,IAAuD;IACpG,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,cAAc,CAAI,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;AACpH,CAAC;AAJD,4BAIC","sourcesContent":["import * as React from 'react';\n\nexport function reactForEach<P = any>(children: any, func: (el: React.ReactElement<P>, index: number) => void) {\n    let index = 0;\n    React.Children.forEach(children, (child) => {\n        if (React.isValidElement<P>(child)) func(child, index++);\n    });\n}\n\nexport function reactMap<P = any>(children: any, func: (el: React.ReactElement<P>, index: number) => any) {\n    let index = 0;\n\n    return React.Children.map(children, (child) => (React.isValidElement<P>(child) ? func(child, index++) : child));\n}\n"]}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface TabProps {
+    title: React.ReactNode;
+    navPath: string;
+    disabled?: boolean;
+    tabClassName?: string;
+    tabAttrs?: Record<string, any>;
+}
+export declare const Tab: React.FC<TabProps>;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = void 0;
+const React = require("react");
+const Tab = () => {
+    throw new Error('The `Tab` component is not meant to be rendered! ' +
+        "It's an abstract component that is only valid as a direct Child of the `Tabs` Component. " +
+        'For custom tabs components use TabPane and TabsContainer directly');
+    // Needed otherwise docs error out.
+    return React.createElement(React.Fragment, null);
+};
+exports.Tab = Tab;
+//# sourceMappingURL=Tab.js.map

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

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

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { EventKey } from 'components/generic/Tabs/Tabs';
+interface TabContextProps {
+    activeKey: EventKey;
+    lastIndex: number;
+    currentIndex: number;
+    onChange: (newKey: EventKey, index: number) => void;
+}
+declare const TabContext: React.Context<TabContextProps>;
+interface TabContextProviderProps {
+    children: any;
+    defaultActiveKey: EventKey;
+    onChange: (key: EventKey) => void;
+}
+declare const TabContextProvider: React.FC<TabContextProviderProps>;
+export { TabContext as default, TabContextProvider };

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabContextProvider = exports.default = void 0;
+const React = require("react");
+const react_1 = require("react");
+const TabContext = React.createContext({
+    activeKey: '',
+    lastIndex: 0,
+    currentIndex: 0,
+    onChange: () => {
+        //
+    },
+});
+exports.default = TabContext;
+const TabContextProvider = ({ children, defaultActiveKey, onChange }) => {
+    const [activeKey, setActiveKey] = (0, react_1.useState)('');
+    const [lastIndex, setLastIndex] = (0, react_1.useState)(0);
+    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
+    const tabValues = {
+        activeKey,
+        lastIndex,
+        currentIndex,
+        onChange: (newKey, index) => {
+            // TODO: Add checks for Tab state being "Dirty"
+            // This means if you're in the middle of editing a form, and you press back / forward, we don't want to
+            // yank the user out of their flow
+            onChange(newKey);
+            setLastIndex(currentIndex);
+            setCurrentIndex(index);
+            setActiveKey(newKey);
+        },
+    };
+    (0, react_1.useEffect)(() => {
+        setActiveKey(defaultActiveKey);
+    }, []);
+    return React.createElement(TabContext.Provider, { value: tabValues }, children);
+};
+exports.TabContextProvider = TabContextProvider;
+//# sourceMappingURL=TabContext.js.map

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

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

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

@@ -0,0 +1 @@
+export declare const TabLink: (props: any) => JSX.Element;

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabLink = void 0;
+const React = require("react");
+const classnames_1 = require("classnames");
+const TabContext_1 = require("components/generic/Tabs/TabContext");
+const react_router_dom_1 = require("react-router-dom");
+const react_1 = require("react");
+const Text_1 = require("components/generic/Text");
+const Color_1 = require("util/Color");
+const TabLink = (props) => {
+    const tabContext = (0, react_1.useContext)(TabContext_1.default);
+    const { title, navPath, disabled, index } = props;
+    if (!title) {
+        return null;
+    }
+    return (React.createElement("li", null,
+        React.createElement(react_router_dom_1.NavLink, { to: navPath, activeClassName: "active", className: (0, classnames_1.default)('c-nav-item ', { disabled }), onClick: (e) => {
+                if (disabled) {
+                    e.preventDefault();
+                }
+                else {
+                    tabContext.onChange(navPath, index);
+                }
+            } },
+            React.createElement("span", { className: (0, classnames_1.default)('c-nav-link') },
+                React.createElement(Text_1.default, { color: Color_1.Color.DarkGrey, bold: true }, title)))));
+};
+exports.TabLink = TabLink;
+//# sourceMappingURL=TabLink.js.map

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

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