New source found from dndbeyond.com

2026-07-08 01:00:09 -07:00
parent 9a983a6d7b
commit dcefa0d2f2
2865 changed files with 222467 additions and 49053 deletions
@@ -0,0 +1,71 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+// Adapted from https://codepen.io/Momciloo/pen/bpyMbB
+var getTextWidth = function (_a) {
+    var className = _a.className, value = _a.value;
+    if (!value) {
+        return 0;
+    }
+    var testEl = document.createElement('span');
+    testEl.className = className;
+    testEl.textContent = value;
+    // Let white space expand width
+    testEl.style.whiteSpace = 'pre';
+    // Render off-screen with no opacity so this doesn't flash in and appear for a frame
+    testEl.style.position = 'fixed';
+    testEl.style.left = '200vw';
+    testEl.style.opacity = '0';
+    // Undo any width-related styles so the text can expand as far as it needs to get a true width measurement
+    testEl.style.minWidth = '0';
+    testEl.style.width = 'auto';
+    testEl.style.maxWidth = 'none';
+    document.body.appendChild(testEl);
+    var width = testEl.getBoundingClientRect().width;
+    testEl.remove();
+    return width;
+};
+var AutoExpandTextInput = function (_a) {
+    var className = _a.className, defaultWidth = _a.defaultWidth, onChange = _a.onChange, value = _a.value, otherProps = __rest(_a, ["className", "defaultWidth", "onChange", "value"]);
+    var width = getTextWidth({
+        className: className,
+        value: value,
+    });
+    return (React.createElement("input", __assign({ className: className, onChange: onChange, style: {
+            width: width,
+        }, value: value }, otherProps)));
+};
+AutoExpandTextInput.propTypes = {
+    className: PropTypes.string,
+    defaultWidth: PropTypes.number,
+    onChange: PropTypes.func.isRequired,
+    value: PropTypes.string.isRequired,
+};
+AutoExpandTextInput.defaultProps = {
+    className: '',
+    defaultWidth: null,
+    onChange: getTextWidth,
+};
+export default AutoExpandTextInput;
+//# sourceMappingURL=AutoExpandTextInput.js.map
@@ -0,0 +1,4 @@
+import AutoExpandTextInput from './AutoExpandTextInput';
+export default AutoExpandTextInput;
+export { AutoExpandTextInput };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,69 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+import './Breadcrumbs.scss';
+export var createBreadcrumbItem = function (_a) {
+    var label = _a.label, link = _a.link;
+    return ({
+        label: label,
+        link: link,
+    });
+};
+var Breadcrumbs = /** @class */ (function (_super) {
+    __extends(Breadcrumbs, _super);
+    function Breadcrumbs() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.handleItemClicked = function (label) {
+            if (_this.props.onClick) {
+                _this.props.onClick(label);
+            }
+        };
+        return _this;
+    }
+    Breadcrumbs.prototype.render = function () {
+        var _this = this;
+        return (React.createElement("nav", { className: [
+                this.props.className,
+                'ddb-breadcrumbs__container',
+                "theme--" + this.props.theme,
+            ]
+                .filter(Boolean)
+                .join(' ') },
+            React.createElement("ol", { className: "ddb-breadcrumbs__list" }, this.props.items.map(function (_a) {
+                var label = _a.label, link = _a.link;
+                return React.createElement("li", { key: label, className: "ddb-breadcrumbs__item", itemScope: true, itemType: "http://data-vocabulary.org/Breadcrumb" }, link ?
+                    React.createElement("a", { className: "ddb-breadcrumbs__item-link", href: link, rel: "up", itemProp: "url", onClick: _this.handleItemClicked.bind(_this, label) },
+                        React.createElement("span", { className: "ddb-breadcrumbs__item-label", itemProp: "title" }, label)) :
+                    React.createElement("span", { className: "ddb-breadcrumbs__item-label", itemProp: "title" }, label));
+            }))));
+    };
+    Breadcrumbs.propTypes = {
+        className: PropTypes.string,
+        items: PropTypes.arrayOf(PropTypes.shape({
+            label: PropTypes.string,
+            link: PropTypes.string,
+        })).isRequired,
+        onClick: PropTypes.func,
+        theme: PropTypes.string,
+    };
+    Breadcrumbs.defaultProps = {
+        className: '',
+        theme: 'light',
+    };
+    return Breadcrumbs;
+}(PureComponent));
+export { Breadcrumbs };
+export default Breadcrumbs;
+//# sourceMappingURL=Breadcrumbs.js.map
@@ -0,0 +1,4 @@
+import Breadcrumbs from './Breadcrumbs';
+export default Breadcrumbs;
+export { Breadcrumbs };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,62 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Button.scss';
+import mapProps from '../../Utils/mapProps';
+export var mapButton = mapProps(function (_a) {
+    var className = _a.className, isCta = _a.isCta, isDark = _a.isDark, isGhost = _a.isGhost, isMinimal = _a.isMinimal, otherProps = __rest(_a, ["className", "isCta", "isDark", "isGhost", "isMinimal"]);
+    return (__assign({ className: [
+            className,
+            'ddb-button',
+            isCta && 'ddb-button--cta',
+            isDark && 'ddb-button--dark',
+            isGhost && 'ddb-button--ghost',
+            isMinimal && 'ddb-button--minimal',
+        ]
+            .filter(Boolean)
+            .join(' ') }, otherProps));
+});
+var Button = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, otherProps = __rest(_a, ["children", "className"]);
+    return React.createElement("button", __assign({ className: className, ref: ref }, otherProps), children);
+});
+var MappedButton = mapButton(Button);
+MappedButton.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    isCta: PropTypes.bool,
+    isDark: PropTypes.bool,
+    isGhost: PropTypes.bool,
+    isMinimal: PropTypes.bool,
+    onClick: PropTypes.func,
+};
+MappedButton.defaultProps = {
+    className: '',
+    isCta: false,
+    isDark: false,
+    isGhost: false,
+    isMinimal: false,
+};
+export default MappedButton;
+//# sourceMappingURL=Button.js.map
@@ -0,0 +1,4 @@
+import Button, { mapButton } from './Button';
+export default Button;
+export { Button, mapButton, };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,78 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+// A controlled input that will only trigger the onChange event if the new value is within the allowed min/max
+var ClampedInput = /** @class */ (function (_super) {
+    __extends(ClampedInput, _super);
+    function ClampedInput(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleInputBlurred = function () {
+            var value = parseInt(_this.state.value, 10);
+            var valueIsNaN = Number.isNaN(value);
+            var _a = _this.props, min = _a.min, max = _a.max, onChange = _a.onChange;
+            if (!valueIsNaN && value >= min && value <= max) {
+                onChange(value);
+            }
+            else {
+                _this.setState({
+                    value: _this.props.value,
+                });
+            }
+        };
+        _this.handleInputFocused = function () {
+            if (_this.props.highlightOnFocus && _this.inputRef.current) {
+                _this.inputRef.current.select();
+            }
+        };
+        _this.handleInputChange = function (event) {
+            _this.setState({
+                value: event.target.value,
+            });
+        };
+        _this.inputRef = React.createRef();
+        _this.state = {
+            value: props.value,
+        };
+        return _this;
+    }
+    ClampedInput.prototype.componentDidUpdate = function (prevProps) {
+        if (prevProps.value !== this.props.value) {
+            this.setState({
+                value: this.props.value,
+            });
+        }
+    };
+    ClampedInput.prototype.render = function () {
+        return (React.createElement("input", { className: this.props.className, min: this.props.min, max: this.props.max, onChange: this.handleInputChange, onBlur: this.handleInputBlurred, onFocus: this.handleInputFocused, onMouseDown: this.props.onMouseDown, ref: this.inputRef, style: this.props.style, title: this.props.title, type: "number", value: this.state.value }));
+    };
+    ClampedInput.propTypes = {
+        className: PropTypes.string,
+        highlightOnFocus: PropTypes.bool,
+        min: PropTypes.number.isRequired,
+        max: PropTypes.number.isRequired,
+        onChange: PropTypes.func.isRequired,
+        onMouseDown: PropTypes.func,
+        style: PropTypes.object,
+        title: PropTypes.string,
+        value: PropTypes.number.isRequired,
+    };
+    ClampedInput.defaultProps = {
+        className: '',
+        highlightOnFocus: false,
+    };
+    return ClampedInput;
+}(PureComponent));
+export default ClampedInput;
+//# sourceMappingURL=ClampedInput.js.map
@@ -0,0 +1,4 @@
+import ClampedInput from './ClampedInput';
+export default ClampedInput;
+export { ClampedInput };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,68 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import React from 'react';
+import PropTypes from 'prop-types';
+var defaultErrorMessageComponent = function (_a) {
+    var error = _a.error, errorInfo = _a.errorInfo;
+    return (React.createElement("div", null,
+        React.createElement("h2", null, "Something went wrong."),
+        React.createElement("details", { style: {
+                whiteSpace: 'pre-wrap',
+            } },
+            error && error.toString(),
+            React.createElement("br", null),
+            errorInfo.componentStack)));
+};
+defaultErrorMessageComponent.propTypes = {
+    error: PropTypes.any,
+    errorInfo: PropTypes.any,
+};
+// Component based on https://blog.pusher.com/react-error-boundaries/
+var ErrorBoundary = /** @class */ (function (_super) {
+    __extends(ErrorBoundary, _super);
+    function ErrorBoundary(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            hasError: false,
+            error: null,
+            errorInfo: null,
+        };
+        return _this;
+    }
+    ErrorBoundary.prototype.componentDidCatch = function (error, errorInfo) {
+        this.setState({
+            hasError: true,
+            error: error,
+            errorInfo: errorInfo,
+        });
+    };
+    ErrorBoundary.prototype.render = function () {
+        var ErrorMessageComponent = this.props.ErrorMessageComponent;
+        if (this.state.hasError) {
+            return (React.createElement(ErrorMessageComponent, { error: this.state.error, errorInfo: this.state.errorInfo }));
+        }
+        return this.props.children;
+    };
+    return ErrorBoundary;
+}(React.Component));
+export { ErrorBoundary };
+ErrorBoundary.propTypes = {
+    children: PropTypes.node.isRequired,
+    ErrorMessageComponent: PropTypes.any,
+};
+ErrorBoundary.defaultProps = {
+    ErrorMessageComponent: defaultErrorMessageComponent,
+};
+export default ErrorBoundary;
+//# sourceMappingURL=ErrorBoundary.js.map
@@ -0,0 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+var AvatarIcon = function (_a) {
+    var avatar = _a.avatar, className = _a.className, otherProps = __rest(_a, ["avatar", "className"]);
+    return React.createElement("img", __assign({ alt: "", className: className, src: avatar }, otherProps));
+};
+AvatarIcon.propTypes = {
+    avatar: PropTypes.string.isRequired,
+    className: PropTypes.string,
+};
+export default AvatarIcon;
+//# sourceMappingURL=AvatarIcon.js.map
@@ -0,0 +1,4 @@
+import AvatarIcon from './AvatarIcon';
+export default AvatarIcon;
+export { AvatarIcon };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,45 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+var CheckboxSvg = function (_a) {
+    var className = _a.className, hasBorder = _a.hasBorder, hasCircle = _a.hasCircle, otherProps = __rest(_a, ["className", "hasBorder", "hasCircle"]);
+    return React.createElement("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", overflow: "visible", focusable: "false" }, otherProps),
+        hasCircle &&
+            React.createElement("circle", { className: "svg-circle", cx: "12", cy: "12", r: "9" }),
+        hasBorder &&
+            React.createElement("path", { className: "svg-border", d: "M5.63636382,2.00000055 C3.62805456,2.00000064 2,3.62805509 2,5.63636419 C2,5.63636419 2,9.87878843 2,18.3636369 C1.9999997,20.3719455 3.62805456,22 5.63636367,22 L18.3636365,22 C20.3719454,22.0000001 22,20.3719455 22,18.3636364 L22,5.63636364 C22,3.62805455 20.3719454,2 18.3636363,2 L5.63636382,2.00000055 Z M19,17.25 C19,18.2164987 18.2164979,19 17.25,19 L6.75000007,19 C5.78350125,19 5,18.2164979 5,17.25 C5,17.25 5,17.25 5,17.25 L5,6.74999977 L5,6.75000003 C4.99999985,5.78350126 5.78350125,5 6.74999999,5 L17.2499999,5 C18.2164986,4.99999996 18.9999998,5.78350126 18.9999998,6.75000003 L19,17.25 Z" }),
+        React.createElement("path", { className: "svg-center", d: "M10.9545457,13.4909096 L8.00000021,11.2727278 C7.5983384,10.9714815 7.0285184,11.0528842 6.72727294,11.454546 C6.42602658,11.8562078 6.5074293,12.4260278 6.90909113,12.7272733 L11.227273,15.9636369 L17.2363639,8.95454602 C17.562714,8.57296782 17.5179421,7.99908236 17.136364,7.67272782 C16.7547858,7.34637782 16.1809003,7.39114963 15.8545458,7.77272782 L10.9545457,13.4909096 Z" }));
+};
+CheckboxSvg.propTypes = {
+    className: PropTypes.string,
+    hasBorder: PropTypes.bool,
+    hasCircle: PropTypes.bool,
+};
+CheckboxSvg.defaultProps = {
+    className: '',
+    hasBorder: true,
+    hasCircle: false,
+};
+export default CheckboxSvg;
+//# sourceMappingURL=CheckboxSvg.js.map
@@ -0,0 +1,4 @@
+import CheckboxSvg from './CheckboxSvg';
+export default CheckboxSvg;
+export { CheckboxSvg };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+var ChevronDownSvg = function (_a) {
+    var className = _a.className, thickness = _a.thickness, otherProps = __rest(_a, ["className", "thickness"]);
+    return React.createElement("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 100", overflow: "visible" }, otherProps),
+        React.createElement("path", { d: "M 0 25 L 50 75 L 100 25", strokeWidth: thickness, fill: "none" }));
+};
+ChevronDownSvg.propTypes = {
+    thickness: PropTypes.number,
+    className: PropTypes.string,
+};
+ChevronDownSvg.defaultProps = {
+    thickness: 15,
+    className: '',
+};
+export default ChevronDownSvg;
+//# sourceMappingURL=ChevronDownSvg.js.map
@@ -0,0 +1,4 @@
+import ChevronDownSvg from './ChevronDownSvg';
+export default ChevronDownSvg;
+export { ChevronDownSvg };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+var ChevronLeftSvg = function (_a) {
+    var className = _a.className, thickness = _a.thickness, otherProps = __rest(_a, ["className", "thickness"]);
+    return React.createElement("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 100", overflow: "visible" }, otherProps),
+        React.createElement("path", { d: "M 75 0 L 25 50 L 75 100", strokeWidth: thickness, fill: "none" }));
+};
+ChevronLeftSvg.propTypes = {
+    thickness: PropTypes.number,
+    className: PropTypes.string,
+};
+ChevronLeftSvg.defaultProps = {
+    thickness: 15,
+    className: '',
+};
+export default ChevronLeftSvg;
+//# sourceMappingURL=ChevronLeftSvg.js.map
@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+var ChevronRightSvg = function (_a) {
+    var className = _a.className, thickness = _a.thickness, otherProps = __rest(_a, ["className", "thickness"]);
+    return React.createElement("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 100", overflow: "visible" }, otherProps),
+        React.createElement("path", { d: "M 25 0 L 75 50 L 25 100", strokeWidth: thickness, fill: "none" }));
+};
+ChevronRightSvg.propTypes = {
+    thickness: PropTypes.number,
+    className: PropTypes.string,
+};
+ChevronRightSvg.defaultProps = {
+    thickness: 15,
+    className: '',
+};
+export default ChevronRightSvg;
+//# sourceMappingURL=ChevronRightSvg.js.map
@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+var ChevronUpSvg = function (_a) {
+    var className = _a.className, thickness = _a.thickness, otherProps = __rest(_a, ["className", "thickness"]);
+    return React.createElement("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 100", overflow: "visible" }, otherProps),
+        React.createElement("path", { d: "M 0 75 L 50 25 L 100 75", strokeWidth: thickness, fill: "none" }));
+};
+ChevronUpSvg.propTypes = {
+    thickness: PropTypes.number,
+    className: PropTypes.string,
+};
+ChevronUpSvg.defaultProps = {
+    thickness: 15,
+    className: '',
+};
+export default ChevronUpSvg;
+//# sourceMappingURL=ChevronUpSvg.js.map
@@ -0,0 +1,38 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+var CoatOfArmsSvg = function (_a) {
+    var className = _a.className, otherProps = __rest(_a, ["className"]);
+    return React.createElement("svg", __assign({ className: className, viewBox: "0 0 44 57", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, otherProps),
+        React.createElement("path", { d: "M42.0518 3.82289C41.2872 3.82289 40.7775 4.33261 40.7775 5.09718H25.4859V3.82289C25.4859 1.65658 23.8293 0 21.663 0C19.4967 0 17.8401 1.65658 17.8401 3.82289V5.09718H2.54859C2.54859 4.33261 2.03887 3.82289 1.2743 3.82289C0.509718 3.82289 0 4.33261 0 5.09718V6.37148V11.4687V12.743C0 13.5075 0.509718 14.0173 1.2743 14.0173C2.03887 14.0173 2.54859 13.5075 2.54859 12.743H3.82289V37.082C3.82289 38.9935 4.84233 40.7775 6.62634 41.6695L17.8401 47.2764V54.7947C17.8401 55.5593 18.3499 56.069 19.1144 56.069C19.879 56.069 20.3887 55.5593 20.3887 54.7947V48.2958C20.771 48.4233 21.2807 48.4233 21.663 48.4233C22.0453 48.4233 22.555 48.4233 22.9373 48.2958V54.7947C22.9373 55.5593 23.4471 56.069 24.2116 56.069C24.9762 56.069 25.4859 55.5593 25.4859 54.7947V47.2764L36.6997 41.6695C38.4837 40.7775 39.5032 38.9935 39.5032 37.082V16.5658C39.5032 15.8013 38.9935 15.2916 38.2289 15.2916C37.4643 15.2916 36.9546 15.8013 36.9546 16.5658V37.082C36.9546 38.1015 36.4449 38.866 35.5529 39.3758L23.5745 45.3649C22.4276 45.8747 21.0259 45.8747 19.879 45.3649L7.90064 39.3758C7.00863 38.9935 6.49891 38.1015 6.49891 37.082V11.4687C6.49891 10.7041 5.98919 10.1944 5.22462 10.1944H2.54859V7.64578H40.7775V10.1944H10.1944C9.42979 10.1944 8.92007 10.7041 8.92007 11.4687C8.92007 12.2332 9.42979 12.743 10.1944 12.743H40.7775C40.7775 13.5075 41.2872 14.0173 42.0518 14.0173C42.8164 14.0173 43.3261 13.5075 43.3261 12.743V11.4687V6.37148V5.09718C43.3261 4.33261 42.8164 3.82289 42.0518 3.82289ZM20.3887 3.82289C20.3887 3.05831 20.8985 2.54859 21.663 2.54859C22.4276 2.54859 22.9373 3.05831 22.9373 3.82289V5.09718H20.3887V3.82289Z", fill: "#1B9AF0" }),
+        React.createElement("path", { d: "M14.0173 35.68H29.3089C30.0735 35.68 30.5832 35.1703 30.5832 34.4057V30.5828C30.5832 27.2697 30.9655 24.0839 31.7301 20.8982V20.7707C31.8575 20.261 31.6026 19.6239 31.0929 19.369C30.5832 19.1142 29.946 19.1142 29.5638 19.6239L25.6134 23.5742L22.6826 18.6044C22.1728 17.8399 20.8985 17.8399 20.5163 18.6044L17.5854 23.5742L13.6351 19.6239C13.2528 19.2416 12.6156 19.1142 12.1059 19.369C11.5962 19.6239 11.3413 20.261 11.4688 20.7707V20.8982C12.2333 24.0839 12.6156 27.3971 12.6156 30.5828V34.4057C12.743 35.1703 13.2528 35.68 14.0173 35.68ZM28.0346 33.1314H15.2916V31.8571H28.0346V33.1314ZM16.9482 26.3776C17.2031 26.6325 17.5854 26.7599 17.9677 26.7599C18.35 26.7599 18.7322 26.5051 18.8597 26.1228L21.5357 21.5353L24.2117 26.1228C24.4666 26.5051 24.7214 26.6325 25.1037 26.7599C25.486 26.7599 25.8683 26.6325 26.1232 26.3776L28.2895 24.2113C28.0346 25.8679 27.9072 27.5245 27.7797 29.3085H15.2916C15.2916 27.6519 15.0368 25.9954 14.7819 24.2113L16.9482 26.3776Z", fill: "#1B9AF0" }));
+};
+CoatOfArmsSvg.propTypes = {
+    className: PropTypes.string,
+};
+CoatOfArmsSvg.defaultProps = {
+    className: '',
+};
+export default CoatOfArmsSvg;
+//# sourceMappingURL=CoatOfArmsSvg.js.map
@@ -0,0 +1,4 @@
+import CoatOfArmsSvg from './CoatOfArmsSvg';
+export default CoatOfArmsSvg;
+export { CoatOfArmsSvg };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+var DoubleChevronLeftSvg = function (_a) {
+    var className = _a.className, thickness = _a.thickness, otherProps = __rest(_a, ["className", "thickness"]);
+    return React.createElement("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", overflow: "visible" }, otherProps),
+        React.createElement("path", { fill: "none", d: "M11,2.48,5,8l6,5.52a1.3,1.3,0,0,1-.21,2.12h0a2.25,2.25,0,0,1-2.68-.17L0,8,8.11.53A2.25,2.25,0,0,1,10.79.36h0A1.3,1.3,0,0,1,11,2.48Z" }),
+        React.createElement("polygon", { fill: "none", points: "6.92 8 16 0 16 16 6.92 8" }));
+};
+DoubleChevronLeftSvg.defaultProps = {
+    thickness: 15,
+    className: '',
+};
+export default DoubleChevronLeftSvg;
+//# sourceMappingURL=DoubleChevronLeftSvg.js.map
@@ -0,0 +1,4 @@
+import DoubleChevronLeftSvg from './DoubleChevronLeftSvg';
+export default DoubleChevronLeftSvg;
+export { DoubleChevronLeftSvg };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+var DoubleChevronRightSvg = function (_a) {
+    var className = _a.className, thickness = _a.thickness, otherProps = __rest(_a, ["className", "thickness"]);
+    return React.createElement("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", overflow: "visible" }, otherProps),
+        React.createElement("path", { fill: "none", d: "M5.21.36h0A2.25,2.25,0,0,1,7.89.53L16,8,7.89,15.47a2.25,2.25,0,0,1-2.68.17h0A1.3,1.3,0,0,1,5,13.52L11,8,5,2.48A1.3,1.3,0,0,1,5.21.36Z" }),
+        React.createElement("polygon", { fill: "none", points: "9.09 8 0 0 0 16 9.09 8" }));
+};
+DoubleChevronRightSvg.defaultProps = {
+    thickness: 15,
+    className: '',
+};
+export default DoubleChevronRightSvg;
+//# sourceMappingURL=DoubleChevronRightSvg.js.map
@@ -0,0 +1,4 @@
+import DoubleChevronRightSvg from './DoubleChevronRightSvg';
+export default DoubleChevronRightSvg;
+export { DoubleChevronRightSvg };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,48 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+var LoadingRingSvg = function (_a) {
+    var className = _a.className, isAnimated = _a.isAnimated, height = _a.height, width = _a.width, otherProps = __rest(_a, ["className", "isAnimated", "height", "width"]);
+    return React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 " + width + " " + height, className: "uil-ring-alt " + className, preserveAspectRatio: "xMidYMid" }, otherProps),
+        React.createElement("path", { fill: "none", d: "M0 0h100v100H0z", className: "bk" }),
+        React.createElement("circle", { cx: width / 2, cy: height / 2, r: ((height / 2) + (width / 2)) / 2 - 10, fill: "none", stroke: "#131315", strokeLinecap: "round", strokeWidth: "10" }),
+        React.createElement("circle", { cx: width / 2, cy: height / 2, r: ((height / 2) + (width / 2)) / 2 - 10, fill: "none", stroke: "#ec2127", strokeLinecap: "round", strokeWidth: "6" }, isAnimated &&
+            React.createElement(React.Fragment, null,
+                React.createElement("animate", { attributeName: "stroke-dashoffset", dur: "2s", from: "0", to: "502", repeatCount: "indefinite" }),
+                React.createElement("animate", { attributeName: "stroke-dasharray", dur: "2s", repeatCount: "indefinite", values: "150.6 100.4;1 250;150.6 100.4" }))));
+};
+LoadingRingSvg.propTypes = {
+    className: PropTypes.string,
+    isAnimated: PropTypes.bool,
+    height: PropTypes.number.isRequired,
+    width: PropTypes.number.isRequired,
+};
+LoadingRingSvg.defaultProps = {
+    className: '',
+    isAnimated: true,
+    height: 100,
+    width: 100,
+};
+export default LoadingRingSvg;
+//# sourceMappingURL=LoadingRingSvg.js.map
@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+var LockSvg = function (_a) {
+    var className = _a.className, thickness = _a.thickness, fillColor = _a.fillColor, otherProps = __rest(_a, ["className", "thickness", "fillColor"]);
+    return React.createElement("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", overflow: "visible" }, otherProps),
+        React.createElement("path", { fill: fillColor, d: "M9.30491,6.41174V4.19A4.19,4.19,0,0,0,.925,4.19V6.41174L0,6.54333v7.61309l5.115.91918,5.115-.91918V6.54333ZM2.30862,4.19a2.80632,2.80632,0,0,1,5.61264,0V6.21491L5.115,5.81568l-2.80633.39923Z" }));
+};
+LockSvg.defaultProps = {
+    thickness: 15,
+    className: '',
+    fillColor: 'none'
+};
+export default LockSvg;
+//# sourceMappingURL=LockSvg.js.map
@@ -0,0 +1,4 @@
+import LockSvg from './LockSvg';
+export default LockSvg;
+export { LockSvg };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,37 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+var MagnifyingGlassSvg = function (_a) {
+    var className = _a.className, otherProps = __rest(_a, ["className"]);
+    return React.createElement("svg", __assign({ className: className, viewBox: "0 0 15 15", xmlns: "http://www.w3.org/2000/svg" }, otherProps),
+        React.createElement("path", { d: "M5.92 10.263A4.347 4.347 0 0 1 1.58 5.92 4.347 4.347 0 0 1 5.92 1.578a4.347 4.347 0 0 1 4.342 4.343 4.347 4.347 0 0 1-4.342 4.342m8.236 2.778l-3.514-3.515c-.006-.006-.015-.008-.022-.014a5.894 5.894 0 0 0 1.22-3.591 5.921 5.921 0 1 0-5.92 5.92 5.887 5.887 0 0 0 3.59-1.22c.007.006.009.016.015.022l3.514 3.514a.628.628 0 0 0 .89 0l.227-.228a.628.628 0 0 0 0-.888", fill: "#000", fillRule: "evenodd" }));
+};
+MagnifyingGlassSvg.propTypes = {
+    className: PropTypes.string,
+};
+MagnifyingGlassSvg.defaultProps = {
+    className: '',
+};
+export default MagnifyingGlassSvg;
+//# sourceMappingURL=MagnifyingGlassSvg.js.map
@@ -0,0 +1,4 @@
+import MagnifyingGlassSvg from './MagnifyingGlassSvg';
+export default MagnifyingGlassSvg;
+export { MagnifyingGlassSvg };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+var MinusIconSvg = function (_a) {
+    var className = _a.className, otherProps = __rest(_a, ["className"]);
+    return React.createElement("svg", __assign({ className: className, viewBox: "0 0 9 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, otherProps),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 5.25 V3.75 h9 v1.5 h-9 z" }));
+};
+MinusIconSvg.propTypes = {
+    className: PropTypes.string,
+};
+export default MinusIconSvg;
+//# sourceMappingURL=MinusIconSvg.js.map
@@ -0,0 +1,4 @@
+import MinusIconSvg from './MinusIconSvg';
+export default MinusIconSvg;
+export { MinusIconSvg };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,37 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+var PlusIconSvg = function (_a) {
+    var className = _a.className, otherProps = __rest(_a, ["className"]);
+    return React.createElement("svg", __assign({ className: className, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, otherProps),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.2 10.8V18h3.6v-7.2H18V7.2h-7.2V0H7.2v7.2H0v3.6h7.2z" }));
+};
+PlusIconSvg.propTypes = {
+    className: PropTypes.string,
+};
+PlusIconSvg.defaultProps = {
+    className: '',
+};
+export default PlusIconSvg;
+//# sourceMappingURL=PlusIconSvg.js.map
@@ -0,0 +1,4 @@
+import PlusIconSvg from './PlusIconSvg';
+export default PlusIconSvg;
+export { PlusIconSvg };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,54 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+var ScrollSvg = function (_a) {
+    var className = _a.className, otherProps = __rest(_a, ["className"]);
+    return React.createElement("svg", __assign({ className: className, viewBox: "0 0 51 51", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, otherProps),
+        React.createElement("path", { d: "M3.41589 7.97787H5.69314C5.69314 8.66169 6.14859 9.11757 6.83177 9.11757V17.0954C6.83177 17.3234 6.83177 17.4373 6.94563 17.5513L7.74267 19.1469L7.17336 19.7167C6.94563 19.9447 6.83177 20.1726 6.83177 20.5145V29.6321C6.83177 29.7461 6.83177 29.86 6.83177 29.86L7.62881 33.0512C7.17336 33.2791 6.83177 33.621 6.83177 34.1909V37.61C6.83177 38.2938 7.28722 38.7497 7.9704 38.7497C8.65358 38.7497 9.10903 38.2938 9.10903 37.61V35.3306C9.45062 35.3306 9.79221 35.2166 10.0199 34.8747C10.2477 34.6468 10.2477 34.3048 10.2477 33.9629L9.10903 29.5181V20.9704L9.90607 20.1726C10.2477 19.8307 10.3615 19.2609 10.1338 18.805L9.10903 16.8675V7.97787C9.10903 7.29405 8.65358 6.83818 7.9704 6.83818V2.27939H42.1293V6.83818H12.5249C11.8417 6.83818 11.3863 7.29405 11.3863 7.97787C11.3863 8.66169 11.8417 9.11757 12.5249 9.11757H43.2679C43.9511 9.11757 44.4065 8.66169 44.4065 7.97787H46.6838C48.6194 7.97787 50.0997 6.49627 50.0997 4.55878C50.0997 2.6213 48.6194 1.1397 46.6838 1.1397H44.4065C44.4065 0.455878 43.9511 0 43.2679 0H6.83177C6.14859 0 5.69314 0.455878 5.69314 1.1397H3.41589C1.48022 1.1397 0 2.6213 0 4.55878C0 6.49627 1.48022 7.97787 3.41589 7.97787ZM46.6838 3.41909C47.367 3.41909 47.8224 3.87497 47.8224 4.55878C47.8224 5.2426 47.367 5.69848 46.6838 5.69848H44.4065V3.41909H46.6838ZM3.41589 3.41909H5.69314V5.69848H3.41589C2.73271 5.69848 2.27726 5.2426 2.27726 4.55878C2.27726 3.87497 2.73271 3.41909 3.41589 3.41909Z" }),
+        React.createElement("path", { d: "M46.6838 42.1688H44.4065V42.0548C44.4065 41.371 43.9511 40.9151 43.2679 40.9151V26.213C43.2679 25.7571 42.9263 25.3013 42.5847 25.1873L43.2679 23.1358C43.2679 23.0219 43.3817 22.9079 43.3817 22.7939V19.3748C43.3817 19.1469 43.3817 19.0329 43.2679 18.919L42.4708 17.3234L43.0402 16.7535C43.2679 16.5256 43.3817 16.2977 43.3817 15.9558V12.5367C43.3817 11.8529 42.9263 11.397 42.2431 11.397C41.5599 11.397 41.1045 11.8529 41.1045 12.5367V15.4999L40.3075 16.2977C39.9659 16.6396 39.852 17.2094 40.0797 17.6653L41.1045 19.7168V22.68L40.0797 25.8711C39.9659 26.213 39.9659 26.5549 40.1936 26.8968C40.4213 27.2387 40.649 27.3527 40.9906 27.3527V42.1688C40.9906 42.8526 41.4461 43.3085 42.1293 43.3085V47.8672H7.9704V43.3085V43.1945H37.5747C38.2579 43.1945 38.7134 42.7386 38.7134 42.0548C38.7134 41.371 38.2579 40.9151 37.5747 40.9151H6.60405C6.26246 40.9151 6.03473 41.0291 5.80701 41.257C5.57928 41.485 5.46542 41.8269 5.46542 42.0548H3.41589C1.48022 42.0548 0 43.5364 0 45.4739C0 47.4114 1.48022 48.893 3.41589 48.893H5.69314C5.69314 49.4628 6.26246 50.0327 6.83177 50.0327H43.2679C43.9511 50.0327 44.4065 49.5768 44.4065 48.893H46.6838C48.6194 48.893 50.0997 47.4114 50.0997 45.4739C50.0997 43.5364 48.6194 42.1688 46.6838 42.1688ZM3.41589 46.7276C2.73271 46.7276 2.27726 46.2717 2.27726 45.5879C2.27726 44.904 2.73271 44.4482 3.41589 44.4482H5.46542L5.57928 46.7276H3.41589ZM46.6838 46.7276H44.4065V44.4482H46.6838C47.367 44.4482 47.8224 44.904 47.8224 45.5879C47.8224 46.2717 47.367 46.7276 46.6838 46.7276Z" }),
+        React.createElement("path", { d: "M36.4359 31.9109C36.4359 31.2271 35.9804 30.7712 35.2972 30.7712H13.6633C12.9801 30.7712 12.5247 31.2271 12.5247 31.9109C12.5247 32.5947 12.9801 33.0506 13.6633 33.0506H35.2972C35.9804 33.0506 36.4359 32.5947 36.4359 31.9109Z" }),
+        React.createElement("path", { d: "M13.6633 14.8167H25.0496C25.7328 14.8167 26.1882 14.3608 26.1882 13.677C26.1882 12.9932 25.7328 12.5374 25.0496 12.5374H13.6633C12.9801 12.5374 12.5247 12.9932 12.5247 13.677C12.5247 14.3608 12.9801 14.8167 13.6633 14.8167Z" }),
+        React.createElement("path", { d: "M36.436 17.0952H22.7724C22.0892 17.0952 21.6338 17.5511 21.6338 18.2349C21.6338 18.9187 22.0892 19.3746 22.7724 19.3746H36.436C37.1191 19.3746 37.5746 18.9187 37.5746 18.2349C37.5746 17.5511 37.1191 17.0952 36.436 17.0952Z" }),
+        React.createElement("path", { d: "M36.4365 12.5374H29.6047C28.9215 12.5374 28.4661 12.9932 28.4661 13.677C28.4661 14.3608 28.9215 14.8167 29.6047 14.8167H36.4365C37.1196 14.8167 37.5751 14.3608 37.5751 13.677C37.5751 12.9932 37.1196 12.5374 36.4365 12.5374Z" }),
+        React.createElement("path", { d: "M13.6633 23.9344H23.9109C24.5941 23.9344 25.0496 23.4785 25.0496 22.7947C25.0496 22.1109 24.5941 21.655 23.9109 21.655H13.6633C12.9801 21.655 12.5247 22.1109 12.5247 22.7947C12.5247 23.4785 12.9801 23.9344 13.6633 23.9344Z" }),
+        React.createElement("path", { d: "M13.6633 28.4925H18.2178C18.901 28.4925 19.3564 28.0366 19.3564 27.3528C19.3564 26.669 18.901 26.2131 18.2178 26.2131H13.6633C12.9801 26.2131 12.5247 26.669 12.5247 27.3528C12.5247 28.0366 12.9801 28.4925 13.6633 28.4925Z" }),
+        React.createElement("path", { d: "M13.6633 19.3746H18.2178C18.901 19.3746 19.3564 18.9187 19.3564 18.2349C19.3564 17.5511 18.901 17.0952 18.2178 17.0952H13.6633C12.9801 17.0952 12.5247 17.5511 12.5247 18.2349C12.5247 18.9187 12.9801 19.3746 13.6633 19.3746Z" }),
+        React.createElement("path", { d: "M37.5749 22.7947C37.5749 22.1109 37.1195 21.655 36.4363 21.655H28.4659C27.7827 21.655 27.3273 22.1109 27.3273 22.7947C27.3273 23.4785 27.7827 23.9344 28.4659 23.9344H36.4363C37.1195 23.9344 37.5749 23.4785 37.5749 22.7947Z" }),
+        React.createElement("path", { d: "M21.6338 27.3528C21.6338 28.0366 22.0892 28.4925 22.7724 28.4925H31.8814C32.5646 28.4925 33.0201 28.0366 33.0201 27.3528C33.0201 26.669 32.5646 26.2131 31.8814 26.2131H22.7724C22.0892 26.2131 21.6338 26.669 21.6338 27.3528Z" }),
+        React.createElement("path", { d: "M13.6633 35.3308C12.9801 35.3308 12.5247 35.7867 12.5247 36.4706C12.5247 37.1544 12.9801 37.6103 13.6633 37.6103H25.0496C25.7328 37.6103 26.1882 37.1544 26.1882 36.4706C26.1882 35.7867 25.7328 35.3308 25.0496 35.3308H13.6633Z" }));
+};
+ScrollSvg.propTypes = {
+    className: PropTypes.string,
+};
+ScrollSvg.defaultProps = {
+    className: '',
+};
+export default styled(ScrollSvg)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    path {\n        fill: #1B9AF0;\n    }\n"], ["\n    path {\n        fill: #1B9AF0;\n    }\n"])));
+var templateObject_1;
+//# sourceMappingURL=ScrollSvg.js.map
@@ -0,0 +1,4 @@
+import ScrollSvg from './ScrollSvg';
+export default ScrollSvg;
+export { ScrollSvg };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,66 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+import SortOrderType from '../../../Constants/SortOrderType';
+import styled from 'styled-components';
+var SortOrderIcon = function (_a) {
+    var className = _a.className, sortOrder = _a.sortOrder, otherProps = __rest(_a, ["className", "sortOrder"]);
+    return React.createElement("svg", __assign({ className: [
+            className,
+            'sort-order-icon',
+        ]
+            .filter(Boolean)
+            .join(' '), viewBox: "0 0 7 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, otherProps),
+        React.createElement("path", { className: [
+                'sort-order-icon__arrow',
+                "sort-order-icon__arrow--" + SortOrderType.Ascending,
+                sortOrder === SortOrderType.Ascending && 'is-active',
+            ]
+                .filter(Boolean)
+                .join(' '), fillRule: "evenodd", clipRule: "evenodd", d: "M7 3.88L3.493 0 0 3.88h7z" }),
+        React.createElement("path", { className: [
+                'sort-order-icon__arrow',
+                "sort-order-icon__arrow--" + SortOrderType.Descending,
+                sortOrder === SortOrderType.Descending && 'is-active',
+            ]
+                .filter(Boolean)
+                .join(' '), fillRule: "evenodd", clipRule: "evenodd", d: "M0 6l3.507 3.881L7 6H0z" }));
+};
+SortOrderIcon.propTypes = {
+    className: PropTypes.string,
+    sortOrder: PropTypes.oneOf(Object.values(SortOrderType)),
+};
+SortOrderIcon.defaultProps = {
+    className: '',
+};
+export default styled(SortOrderIcon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .sort-order-icon__arrow {\n        fill: gray;\n    }\n\n    .sort-order-icon__arrow--", " {\n        fill: blue;\n    }\n"], ["\n    .sort-order-icon__arrow {\n        fill: gray;\n    }\n\n    .sort-order-icon__arrow--", " {\n        fill: blue;\n    }\n"])), function (_a) {
+    var sortOrder = _a.sortOrder;
+    return sortOrder;
+});
+var templateObject_1;
+//# sourceMappingURL=SortOrderIcon.js.map
@@ -0,0 +1,4 @@
+import SortOrderIcon from './SortOrderIcon';
+export default SortOrderIcon;
+export { SortOrderIcon };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,29 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+var SwordsSvg = function (_a) {
+    var className = _a.className;
+    return React.createElement("svg", { className: [
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), viewBox: "0 0 44 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M25.7 9.7L33.4 2H38v4.6l-7.7 7.7c-.4.4-.4 1 0 1.4.2.2.5.3.7.3.2 0 .5-.1.7-.3l8-8c.2-.2.3-.4.3-.7V1c0-.6-.4-1-1-1h-6c-.3 0-.5.1-.7.3l-8 8c-.4.4-.4 1 0 1.4.4.4 1 .4 1.4 0z" }),
+        React.createElement("path", { d: "M18.9 28.5l.8-.8c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0l-.8.8-4.6-4.6.8-.8c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0l-.8.8-1.8-1.8c-.4-.4-1-.4-1.4 0-2 2-2 5.4 0 7.4l.3.3L2 33.6l-.3-.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l5 5c.2.2.4.3.7.3.3 0 .5-.1.7-.3.4-.4.4-1 0-1.4l-.3-.3 6.6-6.6.3.3a5.3 5.3 0 007.4 0c.4-.4.4-1 0-1.4l-1.8-1.8zM11.6 30H8.4l1.6-1.6 1.6 1.6zm-3 3H5.4l1-1h3.2l-1 1zm-5.2 2h3.2L5 36.6 3.4 35zm11.3-4.7l-5-5c-1-1-1.2-2.5-.6-3.8l9.4 9.4c-1.2.6-2.8.4-3.8-.6z" }),
+        React.createElement("path", { d: "M32.7 7.3c-.4-.4-1-.4-1.4 0l-4 4c-.4.4-.4 1 0 1.4.2.2.5.3.7.3.2 0 .5-.1.7-.3l4-4c.4-.4.4-1 0-1.4z" }),
+        React.createElement("path", { d: "M11.3 7.3c-.4.4-.4 1 0 1.4l14 14c.2.2.5.3.7.3.2 0 .5-.1.7-.3.4-.4.4-1 0-1.4l-14-14c-.4-.4-1-.4-1.4 0z" }),
+        React.createElement("path", { d: "M43.7 33.3c-.4-.4-1-.4-1.4 0l-.3.3-6.6-6.6.3-.3c2-2 2-5.4 0-7.4-.4-.4-1-.4-1.4 0L28 25.5c-.4.4-.4 1 0 1.4.4.4 1 .4 1.4 0l5.4-5.4c.6 1.2.4 2.7-.6 3.8l-5 5c-1 1-2.5 1.2-3.8.6l1.7-1.7c.4-.4.4-1 0-1.4L6 6.6V2h4.6l18.7 18.7c.4.4 1 .4 1.4 0 .4-.4.4-1 0-1.4l-19-19A.9.9 0 0011 0H5c-.6 0-1 .4-1 1v6c0 .3.1.5.3.7l20.8 20.8-1.8 1.8c-.4.4-.4 1 0 1.4a5.3 5.3 0 007.4 0l.3-.3 6.6 6.6-.3.3c-.4.4-.4 1 0 1.4.2.2.5.3.7.3.2 0 .5-.1.7-.3l5-5c.4-.4.4-1 0-1.4zM34.4 32h3.2l1 1h-3.2l-1-1zm1.2-2h-3.2l1.6-1.6 1.6 1.6zm3.4 6.6L37.4 35h3.2L39 36.6z" }));
+};
+SwordsSvg.propTypes = {
+    className: PropTypes.string,
+};
+SwordsSvg.defaultProps = {
+    className: '',
+};
+export default styled(SwordsSvg)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    path {\n        fill: #1B9AF0;\n    }\n"], ["\n    path {\n        fill: #1B9AF0;\n    }\n"])));
+var templateObject_1;
+//# sourceMappingURL=SwordsSvg.js.map
@@ -0,0 +1,3 @@
+import SwordsSvg from './SwordsSvg';
+export default SwordsSvg;
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,30 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+var ThroneSvg = function (_a) {
+    var className = _a.className;
+    return React.createElement("svg", { className: [
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), viewBox: "0 0 40 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M6 30a1 1 0 100-2 1 1 0 000 2z" }),
+        React.createElement("path", { d: "M34 30a1 1 0 100-2 1 1 0 000 2z" }),
+        React.createElement("path", { d: "M26 42H14c-.6 0-1 .4-1 1s.4 1 1 1h12c.6 0 1-.4 1-1s-.4-1-1-1z" }),
+        React.createElement("path", { d: "M9 23c.6 0 1-.4 1-1V3c0-.6.4-1 1-1s1 .4 1 1v3c0 .4.2.7.5.9.3.2.7.1 1-.1 3.5-2.4 9.3-2.4 12.9 0 .3.2.7.2 1 .1.4-.2.6-.5.6-.9V3c0-.6.4-1 1-1s1 .4 1 1v19c0 .6.4 1 1 1s1-.4 1-1V3c0-1.7-1.3-3-3-3s-3 1.3-3 3v1.3c-3.6-1.7-8.4-1.7-12 0V3c0-1.7-1.3-3-3-3S8 1.3 8 3v19c0 .6.4 1 1 1z" }),
+        React.createElement("path", { d: "M12.4 9.2c-.2.2-.4.5-.4.8v16c0 .6.4 1 1 1h14c.6 0 1-.4 1-1V10c0-.3-.2-.6-.4-.8-4.2-2.9-11-2.9-15.2 0zM26 25H14V10.5c3.4-2.1 8.6-2.1 12 0V25z" }),
+        React.createElement("path", { d: "M39 42h-2v-9c1.2-.9 2-2.4 2-4 0-2.8-2.2-5-5-5s-5 2.2-5 5v1H14c-.6 0-1 .4-1 1s.4 1 1 1h16c.6 0 1-.4 1-1v-2c0-1.7 1.3-3 3-3s3 1.3 3 3c0 1.1-.6 2-1.5 2.6-.3.2-.5.5-.5.9V42h-4v-7c0-.6-.4-1-1-1H11v-5c0-2.8-2.2-5-5-5s-5 2.2-5 5c0 1.6.8 3 2 4v9H1c-.6 0-1 .4-1 1s.4 1 1 1h9c.6 0 1-.4 1-1v-4c0-.6-.4-1-1-1s-1 .4-1 1v3H5v-9.6c0-.4-.2-.7-.5-.9A2.95 2.95 0 016 26c1.7 0 3 1.3 3 3v6c0 .6.4 1 1 1h19v7c0 .6.4 1 1 1h9c.6 0 1-.4 1-1s-.4-1-1-1z" }));
+};
+ThroneSvg.propTypes = {
+    className: PropTypes.string,
+};
+ThroneSvg.defaultProps = {
+    className: '',
+};
+export default styled(ThroneSvg)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    path {\n        fill: #1B9AF0;\n    }\n"], ["\n    path {\n        fill: #1B9AF0;\n    }\n"])));
+var templateObject_1;
+//# sourceMappingURL=ThroneSvg.js.map
@@ -0,0 +1,3 @@
+import ThroneSvg from './ThroneSvg';
+export default ThroneSvg;
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,37 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+var TrumpetSvg = function (_a) {
+    var className = _a.className, otherProps = __rest(_a, ["className"]);
+    return React.createElement("svg", __assign({ className: className, viewBox: "0 0 52 45", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, otherProps),
+        React.createElement("path", { d: "M50.4193 0.116282C50.3031 -1.12628e-07 50.0707 0 49.9546 0C49.606 0 49.3737 0.116282 49.1413 0.348846C44.9591 4.06987 39.8475 6.86064 34.3873 8.25603C33.8065 8.37231 33.3418 9.07 33.5741 9.65141C33.8065 10.2328 34.3873 10.6979 34.9682 10.4654C39.9636 9.18628 44.7268 6.86064 48.7928 3.72102V21.9773C43.6812 18.0237 37.7564 15.4655 31.3668 14.419V9.30256C31.3668 8.60487 30.9021 8.13974 30.2051 8.13974H25.5581C24.8611 8.13974 24.3964 8.60487 24.3964 9.30256H12.7791C12.7791 8.60487 12.3144 8.13974 11.6173 8.13974H6.9704C6.27336 8.13974 5.80867 8.60487 5.80867 9.30256H2.32347C2.32347 8.60487 1.85877 8.13974 1.16173 8.13974C0.464694 8.13974 0 8.60487 0 9.30256V10.4654V15.1167V16.2795C0 16.9772 0.464694 17.4423 1.16173 17.4423C1.85877 17.4423 2.32347 16.9772 2.32347 16.2795H6.9704C7.66744 16.2795 8.13214 15.8144 8.13214 15.1167V10.4654H10.4556V17.4423C10.4556 19.4191 11.9659 20.9308 13.9408 20.9308H23.2347C25.2096 20.9308 26.7199 19.4191 26.7199 17.4423V10.4654H29.0433V41.2801L19.0524 37.2103C18.8201 37.094 18.4716 37.094 18.2392 37.2103L8.13214 41.2801V19.7679C8.13214 19.0703 7.66744 18.6051 6.9704 18.6051C6.27336 18.6051 5.80867 19.0703 5.80867 19.7679V43.0244C5.80867 43.3732 6.04102 43.722 6.27336 43.9546C6.62188 44.1872 6.9704 44.1872 7.31892 44.0709L18.4716 39.5359L29.6242 44.0709C29.7404 44.0709 29.8566 44.1872 30.0889 44.1872C30.3213 44.1872 30.5536 44.0709 30.7859 43.9546C31.1345 43.722 31.2506 43.3732 31.2506 43.0244V16.7446C37.8725 17.7912 44.0297 20.6982 49.0252 25.2332C49.2575 25.4658 49.4899 25.582 49.8384 25.582C49.9546 25.582 50.1869 25.582 50.3031 25.4658C50.7678 25.2332 51.0001 24.8844 51.0001 24.4192V1.16282C51.1163 0.697692 50.8839 0.232564 50.4193 0.116282ZM5.80867 13.9538H2.32347V11.6282H5.80867V13.9538ZM24.3964 11.6282V13.9538H12.7791V11.6282H24.3964ZM23.2347 18.6051H13.9408C13.2438 18.6051 12.7791 18.14 12.7791 17.4423V16.2795H24.3964V17.4423C24.3964 18.14 23.9317 18.6051 23.2347 18.6051Z", fill: "#1B9AF0" }));
+};
+TrumpetSvg.propTypes = {
+    className: PropTypes.string,
+};
+TrumpetSvg.defaultProps = {
+    className: '',
+};
+export default TrumpetSvg;
+//# sourceMappingURL=TrumpetSvg.js.map
@@ -0,0 +1,4 @@
+import TrumpetSvg from './TrumpetSvg';
+export default TrumpetSvg;
+export { TrumpetSvg };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+var UnlockSvg = function (_a) {
+    var className = _a.className, thickness = _a.thickness, fillColor = _a.fillColor, otherProps = __rest(_a, ["className", "thickness", "fillColor"]);
+    return React.createElement("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", overflow: "visible" }, otherProps),
+        React.createElement("path", { fill: fillColor, d: "M5.11656,6.73717l-2.80744.39938V4.19033a2.8071,2.8071,0,0,1,5.6142,0H9.30741a4.19119,4.19119,0,0,0-8.38238,0V7.33344L0,7.465v7.61549L5.11656,16l5.11657-.91947V7.465Z" }));
+};
+UnlockSvg.defaultProps = {
+    thickness: 15,
+    className: '',
+    fillColor: 'none'
+};
+export default UnlockSvg;
+//# sourceMappingURL=UnlockSvg.js.map
@@ -0,0 +1,4 @@
+import UnlockSvg from './UnlockSvg';
+export default UnlockSvg;
+export { UnlockSvg };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,44 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+var XIconSvg = function (_a) {
+    var className = _a.className, thickness = _a.thickness, otherProps = __rest(_a, ["className", "thickness"]);
+    var halfThickness = thickness / 2;
+    var middleYPosition = 50;
+    return (React.createElement("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", width: "100", height: "100", viewBox: "0 0 100 100" }, otherProps),
+        React.createElement("g", { transform: "rotate(-45 50 50)" },
+            React.createElement("rect", { x: "0", y: middleYPosition - halfThickness, width: "100", height: thickness })),
+        React.createElement("g", { transform: "rotate(45 50 50)" },
+            React.createElement("rect", { x: "0", y: middleYPosition - halfThickness, width: "100", height: thickness }))));
+};
+XIconSvg.propTypes = {
+    thickness: PropTypes.number,
+    className: PropTypes.string,
+};
+XIconSvg.defaultProps = {
+    thickness: 20,
+    className: '',
+};
+export default XIconSvg;
+//# sourceMappingURL=XIconSvg.js.map
@@ -0,0 +1,4 @@
+import XIconSvg from './XIconSvg';
+export default XIconSvg;
+export { XIconSvg };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,81 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import './InputCheckbox.scss';
+import CheckboxSvg from '../Icons/CheckboxSvg';
+var InputCheckbox = /** @class */ (function (_super) {
+    __extends(InputCheckbox, _super);
+    function InputCheckbox() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.handleChange = function (event) {
+            return _this.props.onChange(event.target.checked);
+        };
+        _this.renderIcon = function () {
+            if (_this.props.disableIcon) {
+                return null;
+            }
+            if (_this.props.icon) {
+                return React.createElement(_this.props.icon, __assign(__assign({}, _this.props.iconProps), { className: "input-checkbox__icon " + _this.props.iconProps.className }));
+            }
+            return (React.createElement(CheckboxSvg, { className: "input-checkbox__icon", hasBorder: true, hasCircle: false }));
+        };
+        return _this;
+    }
+    InputCheckbox.prototype.render = function () {
+        return (React.createElement("label", { className: [
+                'input-checkbox',
+                'input-checkbox-label',
+                'qa-input-checkbox_label',
+                this.props.className,
+            ]
+                .filter(Boolean)
+                .join(' ') },
+            React.createElement("input", { checked: this.props.checked, className: "input-checkbox__input qa-input-checkbox_input", name: this.props.name, onChange: this.handleChange, tabIndex: this.props.tabIndex, type: "checkbox" }),
+            React.createElement("div", { className: "input-checkbox__focus-indicator" }),
+            this.renderIcon(),
+            React.createElement("span", { className: "input-checkbox__text" }, this.props.label)));
+    };
+    InputCheckbox.propTypes = {
+        checked: PropTypes.any.isRequired,
+        className: PropTypes.string,
+        disableIcon: PropTypes.bool,
+        icon: PropTypes.func,
+        iconProps: PropTypes.object,
+        label: PropTypes.any.isRequired,
+        name: PropTypes.string,
+        onChange: PropTypes.func.isRequired,
+        tabIndex: PropTypes.number,
+    };
+    InputCheckbox.defaultProps = {
+        className: '',
+        disableIcon: false,
+        iconProps: {},
+        tabIndex: 0,
+    };
+    return InputCheckbox;
+}(PureComponent));
+export default InputCheckbox;
+//# sourceMappingURL=InputCheckbox.js.map
@@ -0,0 +1,4 @@
+import InputCheckbox from './InputCheckbox';
+export default InputCheckbox;
+export { InputCheckbox };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,318 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import './InputSelectDropdown.scss';
+import ChevronDownSvg from '../Icons/ChevronDownSvg';
+import XIconSvg from '../Icons/XIconSvg';
+import InputCheckbox from '../InputCheckbox';
+import AvatarIcon from '../Icons/AvatarIcon';
+// W3 guide on implementing an accessible custom dropdown select
+// https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
+var InputSelectDropdown = /** @class */ (function (_super) {
+    __extends(InputSelectDropdown, _super);
+    function InputSelectDropdown(props) {
+        var _this = _super.call(this, props) || this;
+        _this.doesInputCacheMatchText = function (text) {
+            if (!_this.state.inputCache) {
+                return true;
+            }
+            var lowerCaseInputCache = _this.state.inputCache.toLowerCase();
+            var lowerCaseText = text.toLowerCase();
+            return lowerCaseText.includes(lowerCaseInputCache);
+        };
+        _this.focusFirstOption = function () { return _this.dropdownRef.current.firstChild.querySelector('input').focus(); };
+        _this.focusLastOption = function () { return _this.dropdownRef.current.lastChild.querySelector('input').focus(); };
+        _this.focusNextOption = function () {
+            if (document.activeElement === _this.inputCacheRef.current) {
+                _this.focusFirstOption();
+                return;
+            }
+            if (!_this.dropdownRef.current || !_this.dropdownRef.current.contains(document.activeElement)) {
+                return;
+            }
+            var focusedOption = document.activeElement.closest('.input-select__dropdown-option');
+            if (!focusedOption) {
+                return;
+            }
+            if (!focusedOption.nextSibling) {
+                return;
+            }
+            focusedOption.nextSibling.querySelector('input').focus();
+        };
+        _this.focusPreviousOption = function () {
+            if (!_this.dropdownRef.current || !_this.dropdownRef.current.contains(document.activeElement)) {
+                return;
+            }
+            var focusedOption = document.activeElement.closest('.input-select__dropdown-option');
+            if (!focusedOption) {
+                return;
+            }
+            if (!focusedOption.previousSibling) {
+                if (_this.inputCacheRef.current) {
+                    _this.inputCacheRef.current.focus();
+                }
+                return;
+            }
+            focusedOption.previousSibling.querySelector('input').focus();
+        };
+        _this.getInputId = function (value) { return "input-select_" + _this.props.id + "_" + value; };
+        _this.getSelectedCount = function () {
+            if (_this.props.isMulti) {
+                return _this.props.value.length;
+            }
+            return _this.props.value ?
+                1 :
+                0;
+        };
+        _this.handleButtonClick = function () { return _this.toggleDropdown(); };
+        _this.handleButtonKeyUp = function (event) {
+            var code = event.code, 
+            // keyCode backup for shitty IE/Edge that don't support event.code
+            keyCode = event.keyCode;
+            // If event.code is undefined, we're on shitty IE or Edge so we gotta kick it old school with a deprecated API
+            switch (code || keyCode) { // eslint-disable-line default-case, `don't update value if irrelevant key is pressed`
+                case 'ArrowDown':
+                case 40: // eslint-disable-line no-magic-numbers, `down keyCode, blame IE/Edge for not supporting event.code`
+                case 'ArrowUp':
+                case 38: // eslint-disable-line no-magic-numbers, `up keyCode, blame IE/Edge for not supporting event.code`
+                    _this.openDropdown();
+                    break;
+            }
+        };
+        _this.handleBodyClick = function (event) {
+            if (_this.wrapperRef.current && _this.wrapperRef.current.contains(event.target)) {
+                return;
+            }
+            _this.closeDropdown();
+        };
+        _this.handleBodyFocus = function (event) {
+            if (_this.wrapperRef.current && _this.wrapperRef.current.contains(event.target)) {
+                return;
+            }
+            _this.closeDropdown();
+        };
+        _this.handleInputCacheChange = function (event) {
+            return _this.setState({
+                inputCache: event.target.value,
+            });
+        };
+        _this.handleOptionChange = function (value, checked) {
+            if (_this.props.isMulti) {
+                _this.props.onChange(checked ? __spreadArrays(_this.props.value, [
+                    value,
+                ]) :
+                    _this.props.value.filter(function (val) { return val !== value; }));
+            }
+            else {
+                _this.props.onChange(checked ?
+                    value :
+                    null);
+                if (checked) {
+                    _this.closeDropdown();
+                }
+            }
+        };
+        _this.handleClearClicked = function () {
+            _this.props.onChange(_this.props.isMulti ? [] : null);
+            _this.setState({
+                isDropdownOpen: false,
+            });
+            if (_this.buttonRef.current) {
+                _this.buttonRef.current.focus();
+            }
+        };
+        _this.handleDropdownKeyUp = function (event) {
+            var code = event.code, 
+            // keyCode backup for shitty IE/Edge that don't support event.code
+            keyCode = event.keyCode;
+            // eslint-disable-next-line default-case, `if irrelevant key is pressed, do nothing`
+            switch (code || keyCode) {
+                case 'Escape':
+                // eslint-disable-next-line no-magic-numbers, no-fallthrough, `need use use key codes and fallthroughs for IE/Edge`
+                case 27: // escape
+                    _this.closeDropdown();
+                    break;
+                // eslint-disable-next-line no-magic-numbers, `need use use key code for home key`
+                case 36: // home
+                    _this.focusFirstOption();
+                    break;
+                // eslint-disable-next-line no-magic-numbers, `need use use key code for end key`
+                case 35: // end
+                    _this.focusLastOption();
+                    break;
+                case 'ArrowDown':
+                case 40: // eslint-disable-line no-magic-numbers, `down keyCode, blame IE/Edge for not supporting event.code`
+                    _this.focusNextOption();
+                    break;
+                case 'ArrowUp':
+                case 38: // eslint-disable-line no-magic-numbers, `up keyCode, blame IE/Edge for not supporting event.code`
+                    _this.focusPreviousOption();
+                    break;
+            }
+        };
+        _this.isValueSelected = function (value) {
+            return _this.props.isMulti ?
+                _this.props.value.includes(value) :
+                _this.props.value === value;
+        };
+        _this.closeDropdown = function () {
+            if (!_this.state.isDropdownOpen) {
+                return;
+            }
+            _this.setState({
+                isDropdownOpen: false,
+                inputCache: '',
+            }, function () {
+                if (_this.wrapperRef.current && _this.wrapperRef.current.contains(document.activeElement) && _this.buttonRef.current) {
+                    _this.buttonRef.current.focus();
+                }
+            });
+        };
+        _this.openDropdown = function () {
+            if (_this.state.isDropdownOpen) {
+                return;
+            }
+            _this.setState({
+                isDropdownOpen: true,
+            }, function () {
+                if (_this.inputCacheRef.current) {
+                    _this.inputCacheRef.current.focus();
+                }
+            });
+        };
+        _this.toggleDropdown = function () {
+            return _this.state.isDropdownOpen ?
+                _this.closeDropdown() :
+                _this.openDropdown();
+        };
+        _this.renderButtonText = function () {
+            if (_this.props.isMulti) {
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("span", null, _this.props.label),
+                    Boolean(_this.getSelectedCount()) &&
+                        React.createElement("span", { "aria-label": _this.getSelectedCount() + " selected", className: "input-select__button-text-count" },
+                            "(",
+                            _this.getSelectedCount(),
+                            ")")));
+            }
+            var selectedOption = _this.props.options.find(function (x) { return x.value === _this.props.value; });
+            if (selectedOption) {
+                return React.createElement("span", null, selectedOption.label || selectedOption.value);
+            }
+            return React.createElement("span", null, _this.props.label);
+        };
+        _this.state = {
+            isDropdownOpen: false,
+            inputCache: '',
+        };
+        _this.wrapperRef = React.createRef();
+        _this.buttonRef = React.createRef();
+        _this.dropdownRef = React.createRef();
+        _this.dropdownWrapperRef = React.createRef();
+        _this.inputCacheRef = React.createRef();
+        return _this;
+    }
+    InputSelectDropdown.prototype.componentDidMount = function () {
+        document.body.addEventListener('click', this.handleBodyClick);
+        document.body.addEventListener('focus', this.handleBodyFocus, true);
+    };
+    InputSelectDropdown.prototype.componentWillUnmount = function () {
+        document.body.removeEventListener('click', this.handleBodyClick);
+        document.body.removeEventListener('focus', this.handleBodyFocus);
+    };
+    InputSelectDropdown.prototype.render = function () {
+        var _this = this;
+        return (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions, `catch-all key listener, children have roles`
+        React.createElement("div", { className: [
+                'input-select',
+                'qa-input-select-dropdown',
+                this.props.className,
+                this.state.isDropdownOpen && 'is-open',
+                this.props.isGrid ? 'input-select--grid' : 'input-select--list',
+                this.props.isMulti ? 'input-select--multi' : 'input-select--single',
+            ]
+                .filter(Boolean)
+                .join(' '), ref: this.wrapperRef },
+            React.createElement("button", { "aria-haspopup": "true", className: "input-select__button qa-input-select-dropdown_button", onClick: this.handleButtonClick, onKeyUp: this.handleButtonKeyUp, ref: this.buttonRef, type: "button" },
+                React.createElement("div", { className: "input-select__button-text" }, this.renderButtonText()),
+                React.createElement("div", { className: "input-select__button-icon" },
+                    React.createElement(ChevronDownSvg, null))),
+            React.createElement("input", { className: [
+                    'input-select__input-cache',
+                    'qa-input-select-dropdown_input-cache',
+                    this.state.inputCache && 'has-value',
+                ]
+                    .filter(Boolean)
+                    .join(' '), onChange: this.handleInputCacheChange, onKeyUp: this.handleDropdownKeyUp, ref: this.inputCacheRef, title: "Search " + this.props.label + " filter options", type: "text", value: this.state.inputCache }),
+            Boolean(this.getSelectedCount()) &&
+                React.createElement("button", { className: "input-select__clear-button qa-input-select-dropdown_clear-button", onClick: this.handleClearClicked, title: "Clear " + this.props.label, type: "button" },
+                    React.createElement(XIconSvg, null)),
+            React.createElement("div", { "aria-hidden": !this.state.isDropdownOpen, className: "input-select__dropdown-wrapper", ref: this.dropdownWrapperRef },
+                React.createElement("ul", { className: "input-select__dropdown", onKeyUp: this.handleDropdownKeyUp, ref: this.dropdownRef, role: "listbox" }, this.props.options.map(function (_a) {
+                    var avatar = _a.avatar, disableIcon = _a.disableIcon, label = _a.label, value = _a.value;
+                    return React.createElement("li", { "aria-selected": _this.isValueSelected(value), key: _this.getInputId(value), className: [
+                            'input-select__dropdown-option',
+                            _this.isValueSelected(value) && 'is-selected',
+                            !_this.doesInputCacheMatchText(label || value) && 'is-filtered-out',
+                        ]
+                            .filter(Boolean)
+                            .join(' '), role: "option" },
+                        React.createElement(InputCheckbox, { checked: _this.isValueSelected(value), className: "input-select__dropdown-option-input-checkbox", disableIcon: disableIcon, icon: avatar && AvatarIcon, iconProps: {
+                                avatar: avatar,
+                                className: 'input-select__dropdown-option-input-checkbox-avatar',
+                            }, label: label || value, onChange: _this.handleOptionChange.bind(_this, value), tabIndex: _this.state.isDropdownOpen ? 0 : -1 }));
+                })))));
+    };
+    InputSelectDropdown.propTypes = {
+        className: PropTypes.string,
+        id: PropTypes.string.isRequired,
+        isGrid: PropTypes.bool,
+        isMulti: PropTypes.bool,
+        label: PropTypes.node.isRequired,
+        onChange: PropTypes.func.isRequired,
+        options: PropTypes.arrayOf(PropTypes.shape({
+            avatar: PropTypes.string,
+            disableIcon: PropTypes.bool,
+            label: PropTypes.string,
+            value: PropTypes.oneOfType([
+                PropTypes.number,
+                PropTypes.string,
+            ]).isRequired,
+        })).isRequired,
+        value: PropTypes.oneOfType([
+            PropTypes.number,
+            PropTypes.string,
+            PropTypes.arrayOf(PropTypes.oneOfType([
+                PropTypes.number,
+                PropTypes.string,
+            ])).isRequired,
+        ]),
+    };
+    InputSelectDropdown.defaultProps = {
+        className: '',
+        isGrid: false,
+    };
+    return InputSelectDropdown;
+}(PureComponent));
+export default InputSelectDropdown;
+//# sourceMappingURL=InputSelectDropdown.js.map
@@ -0,0 +1,93 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import './InputStepper.scss';
+import Button from '../Button';
+import MinusIconSvg from '../Icons/MinusIconSvg';
+import PlusIconSvg from '../Icons/PlusIconSvg';
+import ClampedInput from '../ClampedInput';
+var stopPropagation = function (event) { return event.stopPropagation(); };
+var InputStepper = /** @class */ (function (_super) {
+    __extends(InputStepper, _super);
+    function InputStepper() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.getDecrementLabel = function () {
+            return _this.props.labelWhenRemoving && _this.props.value === 1 ?
+                "Remove " + _this.props.labelWhenRemoving :
+                "Decrement " + _this.props.label;
+        };
+        _this.getIncrementLabel = function () {
+            return "Increment " + _this.props.label;
+        };
+        _this.setValue = function (value) {
+            if (_this.props.min != null && value < _this.props.min) {
+                return;
+            }
+            if (_this.props.max != null && value > _this.props.max) {
+                return;
+            }
+            _this.props.onChange(value);
+        };
+        _this.handleDownClicked = function () {
+            _this.setValue(_this.props.value - 1);
+        };
+        _this.handleValueChanged = function (event) {
+            if (!event.target.value) {
+                return;
+            }
+            var value = parseInt(event.target.value, 10);
+            _this.setValue(value);
+        };
+        _this.handleUpClicked = function () {
+            _this.setValue(_this.props.value + 1);
+        };
+        return _this;
+    }
+    InputStepper.prototype.render = function () {
+        return (React.createElement("div", { className: [
+                this.props.className,
+                'input-stepper',
+                this.props.isMini && 'input-stepper--mini',
+                this.props.isVertical ? 'input-stepper--vertical' : 'input-stepper--horizontal',
+            ]
+                .filter(Boolean)
+                .join(' ') },
+            React.createElement(Button, { className: "input-stepper__down", onClick: this.handleDownClicked, onMouseDown: stopPropagation, title: this.getDecrementLabel() },
+                React.createElement(MinusIconSvg, null)),
+            React.createElement(ClampedInput, { className: "input-stepper__value", highlightOnFocus: true, id: this.props.inputId, min: 0, max: Number.POSITIVE_INFINITY, onChange: this.setValue, onMouseDown: stopPropagation, title: this.props.label, value: this.props.value }),
+            React.createElement(Button, { className: "input-stepper__up", onClick: this.handleUpClicked, onMouseDown: stopPropagation, title: this.getIncrementLabel() },
+                React.createElement(PlusIconSvg, null))));
+    };
+    InputStepper.propTypes = {
+        className: PropTypes.string,
+        inputId: PropTypes.string,
+        isMini: PropTypes.bool,
+        isVertical: PropTypes.bool,
+        label: PropTypes.string,
+        labelWhenRemoving: PropTypes.string,
+        max: PropTypes.number,
+        min: PropTypes.number,
+        onChange: PropTypes.func.isRequired,
+        value: PropTypes.number.isRequired,
+    };
+    InputStepper.defaultProps = {
+        className: '',
+        isMini: false,
+        isVertical: false,
+    };
+    return InputStepper;
+}(PureComponent));
+export default InputStepper;
+//# sourceMappingURL=InputStepper.js.map
@@ -0,0 +1,46 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Callout.scss';
+import LinkButton from '../../LinkButton';
+import { ResponsiveBackgroundImage } from '../index';
+var Callout = function (_a) {
+    var backgroundImage = _a.backgroundImage, calmMainText = _a.calmMainText, mainText = _a.mainText, secondaryText = _a.secondaryText, buttonText = _a.buttonText, href = _a.href, ctaOverride = _a.ctaOverride;
+    return React.createElement(ResponsiveBackgroundImage, __assign({ className: "callout" }, backgroundImage),
+        mainText &&
+            React.createElement("div", { className: "callout__main-text" }, mainText),
+        calmMainText &&
+            React.createElement("div", { className: "callout__main-text callout__main-text--calm" }, calmMainText),
+        ctaOverride &&
+            React.createElement("div", { className: "callout__button-wrapper" }, ctaOverride),
+        !ctaOverride && buttonText && href &&
+            React.createElement("div", { className: "callout__button-wrapper" },
+                React.createElement(LinkButton, { href: href, isDark: true }, buttonText)),
+        secondaryText &&
+            React.createElement("div", { className: "callout__secondary-text" }, secondaryText));
+};
+Callout.propTypes = {
+    backgroundImage: PropTypes.object,
+    calmMainText: PropTypes.string,
+    mainText: PropTypes.string,
+    secondaryText: PropTypes.node,
+    buttonText: PropTypes.string,
+    href: PropTypes.string,
+    yelling: PropTypes.bool,
+    ctaOverride: PropTypes.node,
+};
+Callout.defaultProps = {
+    backgroundImage: {},
+};
+export default Callout;
+//# sourceMappingURL=Callout.js.map
@@ -0,0 +1,3 @@
+import Callout from './Callout';
+export default Callout;
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,45 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+import './CenterFeature.scss';
+import LinkButton from '../../LinkButton';
+import { ResponsiveBackgroundImage } from '../index';
+var CenterFeature = function (_a) {
+    var backgroundImage = _a.backgroundImage, featureImage = _a.featureImage, featureHeaderText = _a.featureHeaderText, featureBodyText = _a.featureBodyText, buttonText = _a.buttonText, href = _a.href, className = _a.className;
+    return (React.createElement(ResponsiveBackgroundImage, __assign({ className: [className, 'center-feature'].filter(Boolean).join(' ') }, backgroundImage),
+        React.createElement("div", { className: "center-feature__content" },
+            React.createElement("h2", { className: "center-feature__header-text" }, featureHeaderText),
+            React.createElement("p", { className: "center-feature__body-text" }, featureBodyText),
+            featureImage && (React.createElement("img", { src: featureImage.source, alt: featureImage.alt, className: "center-feature__image" })),
+            buttonText && href && (React.createElement("div", { className: "center-feature__button-wrapper" },
+                React.createElement(LinkButton, { href: href, isDark: true }, buttonText))))));
+};
+CenterFeature.propTypes = {
+    backgroundImage: PropTypes.object,
+    headerText: PropTypes.string,
+    subText: PropTypes.string,
+    mainImage: PropTypes.string,
+    buttonText: PropTypes.string,
+    href: PropTypes.string,
+    featureImage: PropTypes.object,
+    featureHeaderText: PropTypes.string,
+    featureBodyText: PropTypes.string,
+    className: PropTypes.string,
+};
+CenterFeature.defaultProps = {
+    backgroundImage: {},
+    buttonText: 'Order Now',
+    className: '',
+};
+export default CenterFeature;
+//# sourceMappingURL=CenterFeature.js.map
@@ -0,0 +1,3 @@
+import CenterFeature from './CenterFeature';
+export default CenterFeature;
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,66 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Hero from '../Hero';
+import SideFeature from '../SideFeature';
+import CenterFeature from '../CenterFeature';
+import KeyHighlights from '../KeyHighlights';
+import TrumpetSvg from '../../Icons/TrumpetSvg';
+import ScrollSvg from '../../Icons/ScrollSvg';
+import SwordsSvg from '../../Icons/SwordsSvg';
+import './CharacterSheetLandingPage.scss';
+var StyledHero = styled(Hero)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .hero__text-wrapper {\n        max-width: 605px;\n    }\n"], ["\n    .hero__text-wrapper {\n        max-width: 605px;\n    }\n"])));
+var StyledSideFeature = styled(SideFeature)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    .side-feature__content {\n        max-width: 1460px;\n    }\n    .side-feature__header-text span {\n        white-space: nowrap;\n    }\n"], ["\n    .side-feature__content {\n        max-width: 1460px;\n    }\n    .side-feature__header-text span {\n        white-space: nowrap;\n    }\n"])));
+var StyledCenterFeature = styled(CenterFeature)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    .center-feature__content {\n        max-width: 590px;\n    }\n"], ["\n    .center-feature__content {\n        max-width: 590px;\n    }\n"])));
+var CharacterSheetLandingPage = function (_a) {
+    var returnUrl = _a.returnUrl;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StyledHero, { backgroundImage: {
+                large: '/content/images/landing-pages/cs/character-sheet-hero-background-desktop.jpg',
+                medium: '/content/images/landing-pages/cs/character-sheet-hero-background-tablet.jpg',
+                small: '/content/images/landing-pages/cs/character-sheet-hero-background-mobile.jpg',
+            }, fromText: "Your D&D Characters Anywhere, Anytime, Any Device", bookTitle: "D&D Beyond Character Sheet", titleFollow: "The World's most intelligent Dungeons and Dragons Character Sheet.", buttonText: "Sign in Now", href: "/sign-in?returnUrl=" + returnUrl }),
+        React.createElement(StyledSideFeature, { backgroundImage: {
+                large: '/content/images/landing-pages/cs/character-sheet-feature-background-1-desktop.jpg',
+                medium: '/content/images/landing-pages/cs/character-sheet-feature-background-1-tablet.jpg',
+                small: '/content/images/landing-pages/cs/character-sheet-feature-background-1-mobile.jpg',
+            }, featureImage: {
+                source: '/content/images/landing-pages/cs/character-sheet-screenshot-1.png',
+                alt: 'Example of a D&D Beyond Character Sheet - Level 8 female Protector Aasimar Cleric named Nima showing automatically calculated ability scores, initiative, skills, actions, and more with built-in tracking for HP, conditions, equipment, and spells as well as integrated dice rolling',
+            }, featureHeaderText: React.createElement(React.Fragment, null,
+                React.createElement("span", null, "Keep track of"),
+                " ",
+                React.createElement("span", null, "\u201CAll the Things\u201D")), featureBodyText: "Ability Scores, Armor Class, Hit Points, Saving Throws, Actions, Spells, Equipment and more are automatically calculated and displayed for easy reference at the table." }),
+        React.createElement(StyledCenterFeature, { backgroundImage: {
+                large: '/content/images/landing-pages/cs/character-sheet-feature-background-2-desktop.jpg',
+                medium: '/content/images/landing-pages/cs/character-sheet-feature-background-2-tablet.jpg',
+                small: '/content/images/landing-pages/cs/character-sheet-feature-background-2-mobile.jpg',
+            }, featureHeaderText: "Quick and Customizable", featureBodyText: "Everything is at your finger tips on any device. Need to know how long \u201CSleet Storm\u201D lasts? Its here. How many Arrows you have left? You got it. Manage all of your resources in real time." }),
+        React.createElement(KeyHighlights, { headerText: "Play with Advantage", highlights: [
+                {
+                    icon: React.createElement(TrumpetSvg, null),
+                    header: 'Digital Dice Integrated',
+                    text: 'Forget your dice? Click or tap on any rollable ability or check and watch the dice roll across your screen.',
+                },
+                {
+                    icon: React.createElement(ScrollSvg, null),
+                    header: 'Manage Equipment, Inventory and Resources',
+                    text: 'Add/Subtract HP, Short/Long Rest, Death Saves, You will know the status of everything on one screen.',
+                },
+                {
+                    icon: React.createElement(SwordsSvg, null),
+                    header: 'Custom Frames and Backgrounds',
+                    text: 'Make it personal with magical D&D art and splash of color or animation.',
+                },
+            ], buttonText: "Start Adventuring", href: "/sign-in?returnUrl=" + returnUrl })));
+};
+CharacterSheetLandingPage.propTypes = {
+    returnUrl: PropTypes.string.isRequired,
+};
+export default CharacterSheetLandingPage;
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=CharacterSheetLandingPage.js.map
@@ -0,0 +1,69 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import React from 'react';
+import { Hero, SideFeature, CenterFeature, Callout, } from '../';
+import './CombatTrackerLandingPage.scss';
+var CombatTrackerLandingPage = /** @class */ (function (_super) {
+    __extends(CombatTrackerLandingPage, _super);
+    function CombatTrackerLandingPage() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CombatTrackerLandingPage.prototype.render = function () {
+        var _a = this.props, IsAuthenticated = _a.IsAuthenticated, IsSubscriber = _a.IsSubscriber;
+        var getHref = function () {
+            if (IsAuthenticated) {
+                return IsSubscriber ? '/encounter-builder' : '/subscribe';
+            }
+            else {
+                return '/login?returnUrl=/encounter-builder';
+            }
+        };
+        var getButtonText = function () {
+            if (IsAuthenticated) {
+                return IsSubscriber ? 'Start Building' : 'Subscribe Now';
+            }
+            else {
+                return 'Sign In';
+            }
+        };
+        return (React.createElement("div", { className: "combat-tracker" },
+            React.createElement(Hero, { backgroundImage: {
+                    large: 'content/images/landing-pages/ct/combat-tracker-hero-background-desktop.jpg',
+                    medium: 'content/images/landing-pages/ct/combat-tracker-hero-background-tablet.jpg',
+                    tiny: 'content/images/landing-pages/ct/combat-tracker-hero-background-mobile.jpg',
+                }, fromText: "New DM Tool Available Now On D&D Beyond", bookTitle: "Combat Tracker Alpha", titleFollow: "Combat is messy, but running combat doesn\u2019t have to be. Organize all your monsters, NPCs, player characters, combat rounds, and much more in real-time with the Combat Tracker.", buttonText: getButtonText(), href: getHref(), buttonFollow: "The Combat Tracker is currently in Alpha testing. If you have a Master Tier or Hero Tier subscription, you have Alpha access to this new tool." }),
+            React.createElement(SideFeature, { backgroundImage: {
+                    large: 'content/images/landing-pages/ct/combat-tracker-feature-background-1.jpg',
+                }, featureImage: {
+                    source: 'content/images/landing-pages/ct/combat-tracker-screenshot-1.jpg',
+                    alt: 'Combat Tracker Screenshot 1',
+                }, featureHeaderText: "Start Combat at the Touch of a Button", featureBodyText: "Instantly run the Combat Tracker on any encounter you\u2019ve created within the Encounter Builder. Simply click the \u201CRun\u201D button from any encounter to launch combat, instantly importing your monsters and players\u2019 character." }),
+            React.createElement(CenterFeature, { backgroundImage: {
+                    large: 'content/images/landing-pages/ct/combat-tracker-preorder-bonuses-background.jpg',
+                }, featureImage: {
+                    source: 'content/images/landing-pages/ct/combat-tracker-preorder-bonuses-main.jpg',
+                    alt: 'Combat Tracker Screenshot 2',
+                }, featureHeaderText: "Track Initiative Easily", featureBodyText: "Create player and monster initiative rolls with auto-roll or manually enter rolls to start the battle." }),
+            React.createElement(SideFeature, { reverse: true, backgroundImage: {
+                    large: 'content/images/landing-pages/ct/combat-tracker-feature-background-2.jpg',
+                }, featureImage: {
+                    source: 'content/images/landing-pages/ct/combat-tracker-screenshot-2.jpg',
+                    alt: 'Combat Tracker Screenshot 3',
+                }, featureHeaderText: "Keep Combat Organized", featureBodyText: "Track the HP of each monster, move rounds and turns in combat and even add in minions and new creatures on the fly! Everything you need to keep battle flowing is at your fingertips." }),
+            React.createElement(Callout, { mainText: "Fight With Advantage", buttonText: getButtonText(), href: getHref() })));
+    };
+    return CombatTrackerLandingPage;
+}(React.PureComponent));
+export default CombatTrackerLandingPage;
+//# sourceMappingURL=CombatTrackerLandingPage.js.map
@@ -0,0 +1,119 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+import './DarkTidesOfBilgewaterLandingPage.scss';
+import { Callout, CenterFeature, Hero, KeyHighlights, SideFeature, } from '../index';
+import styled from 'styled-components';
+import LinkButton from '../../LinkButton';
+var DISABLED = 'DISABLED';
+var Icon = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: center;\n    background-image: url(", ");\n"], ["\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: center;\n    background-image: url(", ");\n"])), function (props) { return props.source; });
+var StoreLink = styled.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: inline-block;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: contain;\n    background-image: url(", ");\n"], ["\n    display: inline-block;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: contain;\n    background-image: url(", ");\n"])), function (props) { return props.backgroundImage; });
+var DdbCta = function (_a) {
+    var ddbSourceLink = _a.ddbSourceLink;
+    return React.createElement(LinkButton, { href: ddbSourceLink, isDark: true }, "Explore Now");
+};
+var GoogleCta = function (_a) {
+    var googlePlayStoreLink = _a.googlePlayStoreLink;
+    return googlePlayStoreLink && googlePlayStoreLink !== DISABLED &&
+        React.createElement(StoreLink, { className: "dtob-app-store-link dtob-app-store-link--google", href: googlePlayStoreLink, backgroundImage: "content/images/landing-pages/dtob/google-play-badge.png" },
+            React.createElement("span", { className: "dtob-app-store-link__text" }, "Download now on Google Play!"));
+};
+var Ctas = function (_a) {
+    var ddbSourceLink = _a.ddbSourceLink, googlePlayStoreLink = _a.googlePlayStoreLink;
+    return React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "dtob-cta-wrapper" },
+            React.createElement("p", { className: "dtob-cta-text" }, "Experience Dark Tides of Bilgewater on D&D Beyond"),
+            React.createElement(LinkButton, { className: "dtob-cta-button", href: ddbSourceLink, isDark: true }, "Explore Now")),
+        googlePlayStoreLink && googlePlayStoreLink !== DISABLED &&
+            React.createElement("div", { className: "dtob-cta-wrapper" },
+                React.createElement("p", { className: "dtob-cta-text" }, "Download Legends of Runeterra on Google Play"),
+                React.createElement(LinkButton, { className: "dtob-cta-button", href: googlePlayStoreLink, isDark: true }, "Download Now")));
+};
+Ctas.propTypes = {
+    ddbSourceLink: PropTypes.string,
+    googlePlayStoreLink: PropTypes.string,
+};
+var DarkTidesOfBilgewaterLandingPage = function (_a) {
+    var backgroundOverlayColor = _a.backgroundOverlayColor, className = _a.className, ddbSourceLink = _a.ddbSourceLink, googlePlayStoreLink = _a.googlePlayStoreLink;
+    return React.createElement("div", { className: [
+            className,
+            'dtob-landing-page',
+        ]
+            .filter(Boolean)
+            .join(' ') },
+        React.createElement(Hero, { backgroundImage: {
+                large: 'content/images/landing-pages/dtob/hero-bg-large.jpg',
+                medium: 'content/images/landing-pages/dtob/hero-bg-medium.jpg',
+                small: 'content/images/landing-pages/dtob/hero-bg-small.jpg',
+                tiny: 'content/images/landing-pages/dtob/hero-bg-tiny.jpg',
+                overlayColor: backgroundOverlayColor,
+            }, bookTitle: React.createElement("img", { src: "content/images/landing-pages/dtob/logo.png", alt: "Legends of Runeterra: Dark Tides of Bilgewater" }), ctaOverride: React.createElement(Ctas, { ddbSourceLink: ddbSourceLink, googlePlayStoreLink: googlePlayStoreLink }), titleFollow: "Start your adventure in a scoundrel's paradise. In Bilgewater, everything is for sale, and fortune favors the bold." }),
+        React.createElement(SideFeature, { backgroundImage: {
+                large: 'content/images/landing-pages/dtob/side-feature-bg-large.jpg',
+                medium: 'content/images/landing-pages/dtob/side-feature-bg-medium.jpg',
+                small: 'content/images/landing-pages/dtob/side-feature-bg-small.jpg',
+                tiny: 'content/images/landing-pages/dtob/side-feature-bg-tiny.jpg',
+                overlayColor: backgroundOverlayColor,
+            }, featureImage: {
+                source: 'content/images/landing-pages/dtob/side-feature-image.jpg',
+                alt: 'Cover art for Legends of Runeterra: Dark Tides of Bilgewater',
+            }, featureHeaderText: "Welcome to Bilgewater!", featureBodyText: "Encounter the world of Runeterra as you never have before in an interactive exploration of Bilgewater, inspired by Legends of Runeterra, made for 5th edition, and integrated fully into D&D Beyond." }),
+        React.createElement(CenterFeature, { backgroundImage: {
+                large: 'content/images/landing-pages/dtob/center-feature-bg-large.jpg',
+                medium: 'content/images/landing-pages/dtob/center-feature-bg-medium.jpg',
+                small: 'content/images/landing-pages/dtob/center-feature-bg-small.jpg',
+                tiny: 'content/images/landing-pages/dtob/center-feature-bg-tiny.jpg',
+                overlayColor: backgroundOverlayColor,
+            }, featureImage: {
+                source: 'content/images/landing-pages/dtob/center-feature-image.jpg',
+                alt: 'Hired Gun',
+            }, headerText: "A Free Player Resource", featureBodyText: "Three new subclasses perfect for adventures on ships, under the sea, and on the scummy streets of the Bilge. A new adventure full of brand-new monsters, magic items, and NPCs drawn from the lore of Legends of Runeterra." }),
+        React.createElement(KeyHighlights, { backgroundImage: {
+                large: 'content/images/landing-pages/dtob/key-highlights-bg-large.jpg',
+                medium: 'content/images/landing-pages/dtob/key-highlights-bg-medium.jpg',
+                small: 'content/images/landing-pages/dtob/key-highlights-bg-small.jpg',
+                tiny: 'content/images/landing-pages/dtob/key-highlights-bg-tiny.jpg',
+                overlayColor: backgroundOverlayColor,
+            }, highlights: [
+                {
+                    icon: React.createElement(Icon, { className: "dtob-icon", source: "content/images/landing-pages/dtob/icon-highlight-1.png" }),
+                    header: '3 Subclasses',
+                    text: 'Play as the eldritch Path of the Depths barbarian, the gun-toting Renegade fighter, and the luck-twisting Wild Card rogue.',
+                },
+                {
+                    icon: React.createElement(Icon, { className: "dtob-icon", source: "content/images/landing-pages/dtob/icon-highlight-2.png" }),
+                    header: 'Items and Monsters',
+                    text: "Challenge players with monsters like Miss Fortune's explosive Powder Monkey and the fearsome Commander Ledros, and reward them with items like the Adaptive Helm and Dead Man's Plate.",
+                },
+                {
+                    icon: React.createElement(Icon, { className: "dtob-icon", source: "content/images/landing-pages/dtob/icon-highlight-3.png" }),
+                    header: 'A Harrowing Adventure',
+                    text: 'Defend Bilgewater from the Harrowing as a mighty specter of the Shadow Isles attempts to shroud all of Bilgewater Bay in the deadly Black Mist.',
+                },
+            ] }),
+        React.createElement(Callout, { backgroundImage: {
+                large: 'content/images/landing-pages/dtob/callout-bg-large.jpg',
+                medium: 'content/images/landing-pages/dtob/callout-bg-medium.jpg',
+                small: 'content/images/landing-pages/dtob/callout-bg-small.jpg',
+                tiny: 'content/images/landing-pages/dtob/callout-bg-tiny.jpg',
+                overlayColor: backgroundOverlayColor,
+            }, mainText: "Available Now", ctaOverride: React.createElement(Ctas, { ddbSourceLink: ddbSourceLink, googlePlayStoreLink: googlePlayStoreLink }) }));
+};
+DarkTidesOfBilgewaterLandingPage.propTypes = {
+    backgroundOverlayColor: PropTypes.string,
+    className: PropTypes.string,
+    ddbSourceLink: PropTypes.string,
+    googlePlayStoreLink: PropTypes.string,
+};
+DarkTidesOfBilgewaterLandingPage.defaultProps = {
+    backgroundOverlayColor: 'rgba(0, 0, 0, 0.5)',
+    className: '',
+    ddbSourceLink: 'https://www.dndbeyond.com/sources/LRDToB',
+    googlePlayStoreLink: 'https://gplay.page.link/ycgv',
+};
+export default DarkTidesOfBilgewaterLandingPage;
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=DarkTidesOfBilgewaterLandingPage.js.map
@@ -0,0 +1,82 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import React from 'react';
+import { Hero, SideFeature, CenterFeature, KeyHighlights, VideoFeature, Callout, } from '../';
+import TrumpetSvg from '../../Icons/TrumpetSvg';
+import CoatOfArmsSvg from '../../Icons/CoatOfArmsSvg';
+import ScrollSvg from '../../Icons/ScrollSvg';
+import './ExplorersGuideToWildemountLandingPage.scss';
+var marketPlaceUrl = '/marketplace/source/explorers-guide-to-wildemount';
+var loginUrl = "/login?returnUrl=" + marketPlaceUrl;
+var ExplorersGuideToWildemountLandingPage = /** @class */ (function (_super) {
+    __extends(ExplorersGuideToWildemountLandingPage, _super);
+    function ExplorersGuideToWildemountLandingPage() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ExplorersGuideToWildemountLandingPage.prototype.render = function () {
+        var _a = this.props, IsAuthenticated = _a.IsAuthenticated, IsReleased = _a.IsReleased;
+        var getHref = function () {
+            return IsAuthenticated ? marketPlaceUrl : loginUrl;
+        };
+        var getButtonText = function () {
+            if (IsAuthenticated) {
+                return IsReleased ? 'Buy Now' : 'Pre-Order Now';
+            }
+            return 'Sign In';
+        };
+        return (React.createElement("div", { className: "egtw" },
+            React.createElement(Hero, { backgroundImage: {
+                    large: 'content/images/landing-pages/egtw/explorers-guide-to-wildemount-hero-background-desktop.jpg',
+                    medium: 'content/images/landing-pages/egtw/explorers-guide-to-wildemount-hero-background-tablet.jpg',
+                    tiny: 'content/images/landing-pages/egtw/explorers-guide-to-wildemount-hero-background-mobile.jpg',
+                }, fromText: "From Critical Role D.M. Matt Mercer", bookTitle: "Explorer\u2019s Guide to Wildemount", buttonText: getButtonText(), href: getHref() }),
+            React.createElement(SideFeature, { backgroundImage: {
+                    large: 'content/images/landing-pages/egtw/explorers-guide-to-wildemount-feature-background.jpg',
+                }, featureImage: {
+                    source: 'content/images/landing-pages/egtw/explorers-guide-to-wildemount-book-cover.jpg',
+                    alt: 'Explorer\'s Guide to Wildemount Book Cover',
+                }, featureHeaderText: "Welcome to Wildemount", featureBodyText: "Create your own campaign in Critical Role's world of Exandria with this sourcebook for the world\u2019s greatest roleplaying game." }),
+            React.createElement(CenterFeature, { backgroundImage: {
+                    large: 'content/images/landing-pages/egtw/explorers-guide-to-wildemount-preorder-bonuses-background.jpg',
+                }, featureImage: {
+                    source: 'content/images/landing-pages/egtw/explorers-guide-to-wildemount-preorder-bonuses-main.jpg',
+                    alt: 'Explorer\'s Guide to Wildemount Customizations',
+                }, featureHeaderText: "Exclusive Pre-Order Bonuses", featureBodyText: "Customize your gaming experience with unique frames, backdrops, themes and portraits.", buttonText: getButtonText(), href: getHref() }),
+            React.createElement(KeyHighlights, { backgroundImage: {
+                    large: 'content/images/landing-pages/egtw/explorers-guide-to-wildemount-key-highlights-background.jpg',
+                }, highlights: [
+                    {
+                        icon: React.createElement(TrumpetSvg, null),
+                        header: 'Explore Exandria',
+                        text: 'Jump into the action with 4 starting adventures, complete with plot seeds, maps and more, to introduce you to the detailed world of Wildemount.',
+                    },
+                    {
+                        icon: React.createElement(CoatOfArmsSvg, null),
+                        header: 'Discover a Brand New World',
+                        text: 'Explore over 300 pages containing the turbulent history of Wildemount, including its rich gazetteer, detailed pantheon, major and minor factions, historical figures, new monsters, and much more.',
+                    },
+                    {
+                        icon: React.createElement(ScrollSvg, null),
+                        header: 'It’s Your Turn to Roll',
+                        text: 'Craft your character with any of the 3 new subclasses, wield one of the many Vestiges of Divergence, or embrace the world-bending magic of dunamancy.',
+                    },
+                ], buttonText: "View Details", href: "/marketplace/source/explorers-guide-to-wildemount" }),
+            React.createElement(VideoFeature, { headerText: "How Do You Want To Do This?", videoUrl: "https://www.youtube.com/embed/Z1CILn2VR8s" }),
+            React.createElement(Callout, { mainText: "Now Available", buttonText: getButtonText(), href: getHref() })));
+    };
+    ;
+    return ExplorersGuideToWildemountLandingPage;
+}(React.PureComponent));
+export default ExplorersGuideToWildemountLandingPage;
+//# sourceMappingURL=ExplorersGuideToWildemountLandingPage.js.map
@@ -0,0 +1,48 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Hero.scss';
+import LinkButton from '../../LinkButton';
+import ResponsiveBackgroundImage from '../ResponsiveBackgroundImage';
+export var Hero = function (_a) {
+    var backgroundImage = _a.backgroundImage, fromText = _a.fromText, bookTitle = _a.bookTitle, titleFollow = _a.titleFollow, buttonText = _a.buttonText, href = _a.href, buttonFollow = _a.buttonFollow, ctaOverride = _a.ctaOverride, className = _a.className;
+    return (React.createElement(ResponsiveBackgroundImage, __assign({ className: [className, 'hero'].filter(Boolean).join(' ') }, backgroundImage),
+        React.createElement("div", { className: "hero__content-wrapper" },
+            React.createElement("div", { className: "hero__content" },
+                React.createElement("div", { className: "hero__text-wrapper" },
+                    fromText && (React.createElement("div", { className: "hero__from-subtext" }, fromText)),
+                    React.createElement("h1", { className: "hero__title" }, bookTitle),
+                    titleFollow && (React.createElement("div", { className: "hero__title-follow" }, titleFollow)),
+                    ctaOverride && (React.createElement("div", { className: "hero__button-wrapper" }, ctaOverride)),
+                    !ctaOverride && buttonText && href && (React.createElement("div", { className: "hero__button-wrapper" },
+                        React.createElement(LinkButton, { href: href, isDark: true }, buttonText))),
+                    buttonFollow && (React.createElement("div", { className: "hero__button-follow" }, buttonFollow)))))));
+};
+Hero.propTypes = {
+    backgroundImage: PropTypes.object,
+    fromText: PropTypes.string,
+    bookTitle: PropTypes.node.isRequired,
+    titleFollow: PropTypes.node,
+    buttonText: PropTypes.string,
+    href: PropTypes.string,
+    buttonFollow: PropTypes.string,
+    ctaOverride: PropTypes.node,
+    className: PropTypes.string,
+};
+Hero.defaultProps = {
+    backgroundImage: {},
+    buttonText: 'Order Now',
+    className: '',
+};
+export default Hero;
+//# sourceMappingURL=Hero.js.map
@@ -0,0 +1,3 @@
+import Hero from './Hero';
+export default Hero;
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+var Highlight = function (_a) {
+    var icon = _a.icon, header = _a.header, text = _a.text;
+    return React.createElement("div", { className: "highlight" },
+        React.createElement("div", { className: "highlight__icon-wrapper" }, icon),
+        React.createElement("div", { className: "highlight__header" }, header),
+        React.createElement("div", { className: "highlight__text" }, text));
+};
+Highlight.propTypes = {
+    icon: PropTypes.node,
+    header: PropTypes.string,
+    text: PropTypes.string,
+};
+Highlight.defaultProps = {};
+export default Highlight;
+//# sourceMappingURL=Highlight.js.map
@@ -0,0 +1,43 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+import './KeyHighlights.scss';
+import LinkButton from '../../LinkButton';
+import { ResponsiveBackgroundImage } from '../index';
+import Highlight from './Highlight';
+var KeyHighlights = function (_a) {
+    var backgroundImage = _a.backgroundImage, headerText = _a.headerText, highlights = _a.highlights, buttonText = _a.buttonText, href = _a.href;
+    return React.createElement(ResponsiveBackgroundImage, __assign({ className: "key-highlights" }, backgroundImage),
+        React.createElement("div", { className: "key-highlights__content" },
+            React.createElement("h2", { className: "key-highlights__header" }, headerText),
+            React.createElement("div", { className: "key-highlights__highlights-wrapper" }, highlights.map(function (highlight, index) {
+                return React.createElement(Highlight, __assign({ key: index }, highlight));
+            })),
+            buttonText && href &&
+                React.createElement("div", { className: "key-highlights__button-wrapper" },
+                    React.createElement(LinkButton, { href: href, isDark: true }, buttonText))));
+};
+KeyHighlights.propTypes = {
+    backgroundImage: PropTypes.object,
+    headerText: PropTypes.string,
+    highlights: PropTypes.array,
+    buttonText: PropTypes.string,
+    href: PropTypes.string,
+};
+KeyHighlights.defaultProps = {
+    backgroundImage: {},
+    headerText: 'Key Highlights',
+    buttonText: 'See Full Details',
+};
+export default KeyHighlights;
+//# sourceMappingURL=KeyHighlights.js.map
@@ -0,0 +1,3 @@
+import KeyHighlights from './KeyHighlights';
+export default KeyHighlights;
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,110 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+import './PlayerAppLandingPage.scss';
+import { Callout, Hero, KeyHighlights, VideoFeature } from '../index';
+import ScrollSvg from '../../Icons/ScrollSvg';
+import ThroneSvg from '../../Icons/ThroneSvg';
+import SwordsSvg from '../../Icons/SwordsSvg';
+import ReleaseType from '../../../Constants/ReleaseType/ReleaseType';
+import Button from '../../Button';
+import styled from 'styled-components';
+var getHeroTitleFollowText = function (releaseType) {
+    switch (releaseType) {
+        case ReleaseType.ComingSoon:
+            return 'The character sheet app is currently in final stages of testing and will be available to the full community very soon. Keep an eyestalk here or on our social media channels for updates!';
+        default:
+            return 'The D&D Beyond Mobile App is always adding new features--keep your eyestalks on our social channels for updates.';
+    }
+};
+var getTrackProgressHighlightText = function (releaseType) {
+    switch (releaseType) {
+        case ReleaseType.ComingSoon:
+            return 'Once the app is live, you’ll not only be able to view all your character’s stats, equipment, and spells, but also track damage, use spell slots, and more by editing a character sheet directly in-app.';
+        default:
+            return 'Access your D&D Beyond library on or offline, (including Dark Mode).  Make your game sessions easier, faster, and more fun with filterable lists of monsters, spells, magic items and more.';
+    }
+};
+var getCalloutMainText = function (releaseType) {
+    switch (releaseType) {
+        case ReleaseType.ComingSoon:
+            return 'Available soon in the Apple App Store and Google Play Store for smartphones and tablets!';
+        default:
+            return 'Available in the Apple App Store and Google Play Store for smartphones and tablets!';
+    }
+};
+var StoreLink = styled.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: inline-block;\n    width: 120px;\n    height: 40px;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: contain;\n    background-image: url(", ");\n"], ["\n    display: inline-block;\n    width: 120px;\n    height: 40px;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: contain;\n    background-image: url(", ");\n"])), function (props) { return props.backgroundImage; });
+var DISABLED = 'DISABLED';
+var PlayerAppCta = function (_a) {
+    var appleStoreLink = _a.appleStoreLink, googlePlayStoreLink = _a.googlePlayStoreLink, releaseType = _a.releaseType;
+    switch (releaseType) {
+        case ReleaseType.ComingSoon:
+            return (React.createElement(Button, { isDark: true, disabled: true }, "Coming Soon!"));
+        default:
+            return (React.createElement(React.Fragment, null,
+                appleStoreLink && appleStoreLink !== DISABLED && (React.createElement(StoreLink, { className: "palp-app-store-link palp-app-store-link--apple", href: appleStoreLink, backgroundImage: "/content/images/landing-pages/player-app/apple-store-badge.svg" },
+                    React.createElement("span", { className: "palp-app-store-link__text" }, "Download now on the Apple App Store!"))),
+                googlePlayStoreLink && googlePlayStoreLink !== DISABLED && (React.createElement(StoreLink, { className: "palp-app-store-link palp-app-store-link--google", href: googlePlayStoreLink, backgroundImage: "/content/images/landing-pages/player-app/google-play-badge.png" },
+                    React.createElement("span", { className: "palp-app-store-link__text" }, "Download now on Google Play!")))));
+    }
+};
+PlayerAppCta.propTypes = {
+    appleStoreLink: PropTypes.string,
+    googlePlayStoreLink: PropTypes.string,
+    releaseType: PropTypes.string,
+};
+var PlayerAppLandingPage = function (_a) {
+    var appleStoreLink = _a.appleStoreLink, className = _a.className, googlePlayStoreLink = _a.googlePlayStoreLink, releaseType = _a.releaseType;
+    return releaseType !== ReleaseType.Disabled && (React.createElement("div", { className: [className, 'palp-page-wrapper']
+            .filter(Boolean)
+            .join(' ') },
+        React.createElement(Hero, { backgroundImage: {
+                large: '/content/images/landing-pages/player-app/hero-bg-large.png',
+                medium: '/content/images/landing-pages/player-app/hero-bg.png',
+            }, fromText: "Roll dice, create & manage characters, and explore your Dungeons & Dragons library from the palm of your hand!", bookTitle: "D&D Beyond Mobile App", titleFollow: getHeroTitleFollowText(releaseType), ctaOverride: React.createElement(PlayerAppCta, { appleStoreLink: appleStoreLink, googlePlayStoreLink: googlePlayStoreLink, releaseType: releaseType }) }),
+        React.createElement(VideoFeature, { backgroundImage: {
+                large: '/content/images/landing-pages/player-app/video-bg-large.png',
+                medium: '/content/images/landing-pages/player-app/video-bg.png',
+            }, headerText: "Wherever Adventure Leads, Bring the Power of D&D Beyond With You", videoUrl: "https://www.youtube.com/embed/KQLx2JH2WdM" }),
+        React.createElement(KeyHighlights, { backgroundImage: {
+                large: '/content/images/landing-pages/player-app/highlight-bg-large.png',
+                medium: '/content/images/landing-pages/player-app/highlight-bg.png',
+            }, highlights: [
+                {
+                    icon: React.createElement(ScrollSvg, null),
+                    header: 'Ready to Roll',
+                    text: 'Cast spells, attack, and perform skill checks wherever you go. Forget your dice? No problem--make rolls with any of your digital dice sets.',
+                },
+                {
+                    icon: React.createElement(ThroneSvg, null),
+                    header: 'Take Your Characters Everywhere',
+                    text: 'As long as you have your mobile device on you, you’ll have all of your character sheets wrinkle-free in your pocket.',
+                },
+                {
+                    icon: React.createElement(SwordsSvg, null),
+                    header: 'Like Upcasting Legend Lore',
+                    text: getTrackProgressHighlightText(releaseType),
+                },
+            ] }),
+        React.createElement(Callout, { calmMainText: getCalloutMainText(releaseType), ctaOverride: React.createElement(PlayerAppCta, { appleStoreLink: appleStoreLink, googlePlayStoreLink: googlePlayStoreLink, releaseType: releaseType }), secondaryText: React.createElement("span", null,
+                "Eager to get started? You can",
+                ' ',
+                React.createElement("a", { href: "https://www.dndbeyond.com/characters/builder" }, "build characters now on D&D Beyond"),
+                ' ',
+                "and have access to them the instant you download the D&D Beyond Mobile App!") })));
+};
+PlayerAppLandingPage.propTypes = {
+    appleStoreLink: PropTypes.string,
+    className: PropTypes.string,
+    googlePlayStoreLink: PropTypes.string,
+    releaseType: PropTypes.string,
+};
+PlayerAppLandingPage.defaultProps = {
+    className: '',
+};
+export default PlayerAppLandingPage;
+var templateObject_1;
+//# sourceMappingURL=PlayerAppLandingPage.js.map
@@ -0,0 +1,27 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Colors from '../../../__stylesheet-helpers/design-system/_colors-exports.scss';
+import BreakpointQueries from '../../../__stylesheet-helpers/responsive/_breakpoints-queries-exports.scss';
+var toLinearGradient = function (color) { return "linear-gradient(" + color + ", " + color + ")"; };
+var prependLinearGradient = function (color) { return toLinearGradient(color) + ","; };
+var ifColorPrependLinearGradient = function (color) {
+    return color ?
+        prependLinearGradient(color) :
+        '';
+};
+var ResponsiveBackgroundImage = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n"], ["\n    ",
+    "\n"])), function (props) { return props.large && "\n        background-color: " + Colors['$black'] + ";\n        background-image: " + ifColorPrependLinearGradient(props.overlayColor) + " url(" + props.large + ");\n        background-position: center;\n        background-size: cover;\n    \n        " + (props.medium && "\n            @media only screen and " + BreakpointQueries.MediumBelow + " {\n                background-image: " + ifColorPrependLinearGradient(props.overlayColor) + " url(" + props.medium + ");\n            }\n        ") + "\n            \n        " + (props.small && "\n            @media only screen and " + BreakpointQueries.SmallBelow + " {\n                background-image: " + ifColorPrependLinearGradient(props.overlayColor) + " url(" + props.small + ");\n            }\n        ") + "\n        \n        " + (props.tiny && "\n            @media only screen and " + BreakpointQueries.TinyBelow + " {\n                background-image: " + ifColorPrependLinearGradient(props.overlayColor) + " url(" + props.tiny + ");\n            }\n        ") + "\n    "; });
+ResponsiveBackgroundImage.propTypes = {
+    // If a large background image is not provided, then no background styles will be applied
+    large: PropTypes.string,
+    medium: PropTypes.string,
+    small: PropTypes.string,
+    tiny: PropTypes.string,
+};
+export default ResponsiveBackgroundImage;
+var templateObject_1;
+//# sourceMappingURL=ResponsiveBackgroundImage.js.map
@@ -0,0 +1,3 @@
+import ResponsiveBackgroundImage from './ResponsiveBackgroundImage';
+export default ResponsiveBackgroundImage;
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,46 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+import './SideFeature.scss';
+import ResponsiveBackgroundImage from '../ResponsiveBackgroundImage';
+var SideFeature = function (_a) {
+    var reverse = _a.reverse, backgroundImage = _a.backgroundImage, featureImage = _a.featureImage, featureVideoUrl = _a.featureVideoUrl, featureHeaderText = _a.featureHeaderText, featureBodyText = _a.featureBodyText, className = _a.className;
+    return (React.createElement(ResponsiveBackgroundImage, __assign({ className: [className, 'side-feature'].filter(Boolean).join(' ') }, backgroundImage),
+        React.createElement("div", { className: [
+                'side-feature__content',
+                reverse && 'side-feature__content--reverse',
+            ]
+                .filter(Boolean)
+                .join(' ') },
+            featureImage && (React.createElement("img", { src: featureImage.source, alt: featureImage.alt, className: "side-feature__image" })),
+            featureVideoUrl && (React.createElement("div", { className: "side-feature__video-wrapper" }, featureVideoUrl && (React.createElement("iframe", { className: "side-feature__video", src: featureVideoUrl, allowFullScreen: true })))),
+            React.createElement("div", { className: "side-feature__text" },
+                React.createElement("h2", { className: "side-feature__header-text" }, featureHeaderText),
+                React.createElement("p", { className: "side-feature__body-text" }, featureBodyText)))));
+};
+SideFeature.propTypes = {
+    reverse: PropTypes.bool,
+    backgroundImage: PropTypes.object,
+    featureImage: PropTypes.object,
+    featureVideoUrl: PropTypes.string,
+    featureHeaderText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    featureBodyText: PropTypes.node,
+    className: PropTypes.string,
+};
+SideFeature.defaultProps = {
+    backgroundImage: {},
+    reverse: false,
+    className: '',
+};
+export default SideFeature;
+//# sourceMappingURL=SideFeature.js.map
@@ -0,0 +1,3 @@
+import SideFeature from './SideFeature';
+export default SideFeature;
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+import './VideoFeature.scss';
+import ResponsiveBackgroundImage from '../ResponsiveBackgroundImage';
+var VideoFeature = function (_a) {
+    var backgroundImage = _a.backgroundImage, headerText = _a.headerText, videoUrl = _a.videoUrl;
+    return React.createElement(ResponsiveBackgroundImage, __assign({ className: "video-feature" }, backgroundImage),
+        React.createElement("div", { className: "video-feature__content" },
+            React.createElement("h2", { className: "video-feature__header" }, headerText),
+            React.createElement("div", { className: "video-feature__video-wrapper" }, videoUrl &&
+                React.createElement("iframe", { className: "video-feature__video", src: videoUrl, allowFullScreen: true }))));
+};
+VideoFeature.propTypes = {
+    backgroundImage: PropTypes.object,
+    headerText: PropTypes.string,
+    videoUrl: PropTypes.string,
+};
+VideoFeature.defaultProps = {
+    backgroundImage: {},
+};
+export default VideoFeature;
+//# sourceMappingURL=VideoFeature.js.map
@@ -0,0 +1,3 @@
+import VideoFeature from './VideoFeature';
+export default VideoFeature;
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,45 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+import { mapButton } from '../Button';
+var LinkButton = function (_a) {
+    var children = _a.children, href = _a.href, otherProps = __rest(_a, ["children", "href"]);
+    return React.createElement("a", __assign({ href: href }, otherProps), children);
+};
+var MappedLinkButton = mapButton(LinkButton);
+MappedLinkButton.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    isCta: PropTypes.bool,
+    isDark: PropTypes.bool,
+    isGhost: PropTypes.bool,
+    href: PropTypes.string,
+};
+MappedLinkButton.defaultProps = {
+    isCta: false,
+    isDark: false,
+    isGhost: false,
+};
+export default MappedLinkButton;
+//# sourceMappingURL=LinkButton.js.map
@@ -0,0 +1,4 @@
+import LinkButton from './LinkButton';
+export default LinkButton;
+export { LinkButton };
+//# sourceMappingURL=index.js.map
@@ -0,0 +1,162 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect } from 'react';
+import { useStore, Provider, useSelector, } from 'react-redux';
+import PropTypes from 'prop-types';
+import ApiUtils from '../../Utils/ApiUtils';
+import LibraryUtils from '../../Utils/LibraryUtils';
+import configureListingStore from './configureListingStore';
+import ListingActions from './ListingActions';
+import ListingHeaderLabel from './ListingHeaderLabel';
+import PaginationActions from './PaginationActions';
+import ListingSelectors from './ListingSelectors';
+import PaginationControls from './PaginationControls';
+import LoadingRingSvg from '../Icons/LoadingRingSvg/LoadingRingSvg';
+import PaginationSelectors from './PaginationSelectors';
+var LoadingIndicator = function () {
+    return React.createElement(LoadingRingSvg, null);
+};
+var LoadingError = function (_a) {
+    var message = _a.message;
+    return React.createElement("div", null, message);
+};
+LoadingError.propTypes = {
+    message: PropTypes.any,
+};
+export var LoadingStatusIndicator = function (_a) {
+    var isLoading = _a.isLoading, loadingError = _a.loadingError;
+    if (loadingError) {
+        return React.createElement(LoadingError, { message: loadingError });
+    }
+    if (isLoading) {
+        return React.createElement(LoadingIndicator, null);
+    }
+    return null;
+};
+LoadingStatusIndicator.propTypes = {
+    isLoading: PropTypes.bool.isRequired,
+    loadingError: PropTypes.any,
+};
+var Listing = function (_a) {
+    var className = _a.className, columnHeadings = _a.columnHeadings, endOfItemsMessage = _a.endOfItemsMessage, isLoading = _a.isLoading, ItemComponent = _a.ItemComponent, itemProps = _a.itemProps, items = _a.items, loadingError = _a.loadingError, onLoadMore = _a.onLoadMore, onSortChange = _a.onSortChange;
+    return React.createElement("div", { className: [
+            className,
+            'listing',
+        ]
+            .filter(Boolean)
+            .join(' ') },
+        React.createElement("table", null,
+            React.createElement("thead", { className: "listing__header" },
+                React.createElement("tr", null, columnHeadings.map(function (heading, index) {
+                    return React.createElement("th", { key: "column-heading_" + heading.key, role: "columnheader", className: "listing__column-heading listing__column-heading--" + heading.key, "aria-colindex": index },
+                        React.createElement(ListingHeaderLabel, { label: heading.label, sortByType: heading.sortByType, onSortChange: onSortChange }));
+                }))),
+            React.createElement("tbody", { className: "listing__items" }, items.map(function (item, index) {
+                return React.createElement(ItemComponent, __assign({ key: "listing-item_" + item.id }, itemProps, item));
+            }))),
+        React.createElement(PaginationControls, { endOfItemsMessage: endOfItemsMessage, onLoadMore: onLoadMore, isLoading: isLoading }),
+        React.createElement(LoadingStatusIndicator, { isLoading: isLoading, loadingError: loadingError }));
+};
+Listing.propTypes = {
+    className: PropTypes.string,
+    columnHeadings: PropTypes.arrayOf(PropTypes.shape({
+        key: PropTypes.string,
+        label: PropTypes.node,
+        // If specified, this label will be rendered as a sort control
+        sortByType: PropTypes.string,
+    })),
+    endOfItemsMessage: PropTypes.string,
+    isLoading: PropTypes.bool.isRequired,
+    ItemComponent: PropTypes.any,
+    itemProps: PropTypes.object,
+    items: PropTypes.array.isRequired,
+    loadingError: PropTypes.any,
+    onLoadMore: PropTypes.func.isRequired,
+    onSortChange: PropTypes.func.isRequired,
+};
+Listing.defaultProps = {
+    endOfItemsMessage: 'There are no more items.',
+};
+var withListingStore = function (dependencies) { return function (WrappedComponent) {
+    var store = configureListingStore(dependencies);
+    var WithListingStore = function (props) {
+        return React.createElement(Provider, { store: store },
+            React.createElement(WrappedComponent, __assign({}, props)));
+    };
+    WithListingStore.displayName = "WithListingStore(" + LibraryUtils.getDisplayName(WrappedComponent) + ")";
+    return WithListingStore;
+}; };
+var withListing = function (dependencies) { return function (WrappedComponent) {
+    var WithListing = function (_a) {
+        var itemProps = _a.itemProps, baseQueries = _a.baseQueries, props = __rest(_a, ["itemProps", "baseQueries"]);
+        var store = useStore();
+        var handleFilterMapChange = function (filterMap) {
+            return store.dispatch(PaginationActions.setFilterMap(filterMap));
+        };
+        var handleSortChange = function (sort) {
+            return store.dispatch(PaginationActions.setSort(sort));
+        };
+        var handleLoadMore = function () {
+            return store.dispatch(ListingActions.loadMore());
+        };
+        var handleReload = function () {
+            return store.dispatch(ListingActions.reload());
+        };
+        useEffect(function () {
+            store.dispatch(ListingActions.setBaseQueries(baseQueries));
+        }, [
+            baseQueries,
+        ]);
+        // onMount
+        // !!! mount should always be the last effect !!!
+        useEffect(function () {
+            store.dispatch(ListingActions.mount());
+        }, [
+            store,
+        ]);
+        return (React.createElement(WrappedComponent, __assign({ isLoading: useSelector(ListingSelectors.getIsLoading), itemProps: itemProps, items: useSelector(ListingSelectors.getVisibleItems), filterMap: useSelector(PaginationSelectors.getFilterMap), onFilterMapChange: handleFilterMapChange, sortBy: useSelector(PaginationSelectors.getSortBy), sortOrder: useSelector(PaginationSelectors.getSortOrder), onSortChange: handleSortChange, onLoadMore: handleLoadMore, reload: handleReload }, props)));
+    };
+    WithListing.propTypes = {
+        itemProps: PropTypes.object,
+        baseQueries: PropTypes.arrayOf(PropTypes.shape({
+            key: PropTypes.string.isRequired,
+            value: PropTypes.any,
+        })),
+    };
+    WithListing.defaultProps = {
+        baseQueries: [],
+    };
+    WithListing.displayName = "WithListing(" + LibraryUtils.getDisplayName(WrappedComponent) + ")";
+    return withListingStore(dependencies)(WithListing);
+}; };
+export var createListing = function (_a) {
+    var requestItems = _a.requestItems, _b = _a.fetchThrottleDelay, fetchThrottleDelay = _b === void 0 ? 1000 : _b, _c = _a.ListingComponent, ListingComponent = _c === void 0 ? Listing : _c, _d = _a.getDataFromJson, getDataFromJson = _d === void 0 ? ApiUtils.getDataFromJson : _d, _e = _a.getPaginationFromJson, getPaginationFromJson = _e === void 0 ? ApiUtils.getPaginationFromJson : _e;
+    return withListing({
+        requestItems: requestItems,
+        fetchThrottleDelay: fetchThrottleDelay,
+        getDataFromJson: getDataFromJson,
+        getPaginationFromJson: getPaginationFromJson,
+    })(ListingComponent);
+};
+export default createListing;
+//# sourceMappingURL=Listing.js.map
@@ -0,0 +1,14 @@
+export default {
+    ON_ITEMS_RECEIVED: 'LISTING_ON_ITEMS_RECEIVED',
+    SET_IS_LOADING: 'LISTING_SET_IS_LOADING',
+    SET_LOADING_ERROR: 'LISTING_SET_LOADING_ERROR',
+    SET_VISIBLE_ITEM_IDS: 'LISTING_SET_VISIBLE_ITEM_IDS',
+    SORT: 'LISTING_SORT',
+    SET_ITEM_CACHE: 'LISTING_SET_ITEM_CACHE',
+    LOAD_MORE: 'LISTING_LOAD_MORE',
+    REQUEST_ITEMS: 'LISTING_REQUEST_ITEMS',
+    RELOAD: 'LISTING_RELOAD',
+    MOUNT: 'LISTING_MOUNT',
+    SET_BASE_QUERIES: 'LISTING_SET_BASE_QUERIES',
+};
+//# sourceMappingURL=ListingActionTypes.js.map
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SortableLabel from '../SortableLabel/SortableLabel';
+import NonSortableLabel from '../NonSortableLabel/NonSortableLabel';
+var ListingHeaderLabel = function (_a) {
+    var className = _a.className, label = _a.label, sortByType = _a.sortByType, onSortChange = _a.onSortChange;
+    var LabelComponent = sortByType ? SortableLabel : NonSortableLabel;
+    if (!label) {
+        return null;
+    }
+    return (React.createElement(LabelComponent, { className: [
+            'listing__column-heading__label',
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), label: label, sortByType: sortByType, onSortChange: onSortChange }));
+};
+ListingHeaderLabel.propTypes = {
+    label: PropTypes.string,
+    className: PropTypes.string,
+    sortByType: PropTypes.string,
+    onSortChange: PropTypes.func,
+};
+ListingHeaderLabel.defaultProps = {};
+export default ListingHeaderLabel;
+//# sourceMappingURL=ListingHeaderLabel.js.map
@@ -0,0 +1,58 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import ListingActionTypes from './ListingActionTypes';
+export var initialState = {
+    itemCache: {},
+    visibleItemIds: [],
+    isLoading: false,
+    loadingError: null,
+    baseQueries: [],
+};
+var getStateDiff = function (state, _a) {
+    var _b = _a === void 0 ? {} : _a, type = _b.type, payload = _b.payload;
+    switch (type) {
+        case ListingActionTypes.SET_BASE_QUERIES:
+            return {
+                baseQueries: payload.baseQueries,
+            };
+        case ListingActionTypes.SET_ITEM_CACHE:
+            return {
+                itemCache: __assign(__assign({}, state.itemCache), payload.itemCache),
+            };
+        case ListingActionTypes.SET_VISIBLE_ITEM_IDS:
+            return {
+                visibleItemIds: payload.visibleItemIds,
+            };
+        case ListingActionTypes.SET_IS_LOADING:
+            return {
+                isLoading: payload.isLoading,
+                loadingError: payload.isLoading ?
+                    null :
+                    state.loadingError,
+            };
+        case ListingActionTypes.SET_LOADING_ERROR:
+            return {
+                loadingError: payload.error,
+            };
+        default:
+            return null;
+    }
+};
+export default (function (state, action) {
+    if (state === void 0) { state = initialState; }
+    var stateDiff = getStateDiff(state, action);
+    if (stateDiff) {
+        return __assign(__assign({}, state), stateDiff);
+    }
+    return state;
+});
+//# sourceMappingURL=ListingReducer.js.map
@@ -0,0 +1,55 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+import { createSelector } from 'reselect';
+import PaginationSelectors from './PaginationSelectors';
+var getListingState = function (state) { return state.listing; };
+var getVisibleItemIds = createSelector([
+    getListingState,
+], function (state) { return state.visibleItemIds; });
+var hasItems = createSelector([
+    getVisibleItemIds,
+], function (items) { return Boolean(items && items.length); });
+var getItemCache = createSelector([
+    getListingState,
+], function (state) { return state.itemCache; });
+var getVisibleItems = createSelector([
+    getItemCache,
+    getVisibleItemIds,
+], function (itemCache, visibleItemIds) { return visibleItemIds.map(function (id) { return (__assign({ id: id }, itemCache[id])); }); });
+var getIsLoading = createSelector([
+    getListingState,
+], function (state) { return state.isLoading; });
+var getBaseQueries = createSelector([
+    getListingState,
+], function (state) { return state.baseQueries; });
+var getQueries = createSelector([
+    getBaseQueries,
+    PaginationSelectors.getFilterKeyValuePairs,
+    PaginationSelectors.getSkipAndTakeKeyValuePairs,
+    PaginationSelectors.getSortKeyValuePairs,
+], function (baseQueries, filterKeyValuePairs, skipAndTakeKeyValuePairs, sortKeyValuePairs) { return __spreadArrays(baseQueries, filterKeyValuePairs, skipAndTakeKeyValuePairs, sortKeyValuePairs); });
+export default {
+    hasItems: hasItems,
+    getQueries: getQueries,
+    getBaseQueries: getBaseQueries,
+    getVisibleItems: getVisibleItems,
+    getVisibleItemIds: getVisibleItemIds,
+    getIsLoading: getIsLoading,
+};
+//# sourceMappingURL=ListingSelectors.js.map
@@ -0,0 +1,9 @@
+export default {
+    RESET_PAGING: 'PAGINATION_RESET_PAGING',
+    SET_FILTER_MAP: 'PAGINATION_SET_FILTER_MAP',
+    SET_SKIP: 'PAGINATION_SET_SKIP',
+    SET_SORT: 'PAGINATION_SET_SORT',
+    SET_TAKE: 'PAGINATION_SET_TAKE',
+    SET_TOTAL: 'PAGINATION_SET_TOTAL',
+};
+//# sourceMappingURL=PaginationActionTypes.js.map
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import Button from '../Button';
+import ListingSelectors from './ListingSelectors';
+import PaginationSelectors from './PaginationSelectors';
+var PaginationControls = function (_a) {
+    var className = _a.className, endOfItemsMessage = _a.endOfItemsMessage, isLoading = _a.isLoading, onLoadMore = _a.onLoadMore;
+    var hasItems = useSelector(ListingSelectors.hasItems);
+    var hasMorePages = useSelector(PaginationSelectors.hasMorePages);
+    return (React.createElement("div", { className: [
+            className,
+            'pagination-controls',
+        ]
+            .filter(Boolean)
+            .join(' ') },
+        hasMorePages &&
+            React.createElement(Button, { className: "pagination-controls__load-more-button", disabled: isLoading, onClick: onLoadMore }, "Load More"),
+        hasItems && !hasMorePages &&
+            React.createElement("div", { className: "pagination-controls__end-of-items-message" }, endOfItemsMessage)));
+};
+PaginationControls.propTypes = {
+    className: PropTypes.string,
+    endOfItemsMessage: PropTypes.node.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    onLoadMore: PropTypes.func.isRequired,
+};
+PaginationControls.defaultProps = {
+    className: '',
+};
+export default PaginationControls;
+//# sourceMappingURL=PaginationControls.js.map
@@ -0,0 +1,64 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import ActionTypes from './PaginationActionTypes';
+export var initialState = {
+    filterMap: {},
+    skip: 0,
+    sortBy: null,
+    sortOrder: null,
+    take: 10,
+    total: Number.POSITIVE_INFINITY,
+};
+var getStateDiff = function (state, _a) {
+    var _b = _a === void 0 ? {} : _a, type = _b.type, payload = _b.payload;
+    switch (type) {
+        case ActionTypes.RESET_PAGING:
+            return {
+                // Don't reset sort or filters
+                skip: initialState.skip,
+                take: initialState.take,
+                total: initialState.total,
+            };
+        case ActionTypes.SET_FILTER_MAP:
+            return {
+                filterMap: payload.filterMap,
+            };
+        case ActionTypes.SET_SKIP:
+            return {
+                skip: payload.skip,
+            };
+        case ActionTypes.SET_SORT:
+            return {
+                sortBy: payload.sortBy,
+                sortOrder: payload.sortOrder,
+            };
+        case ActionTypes.SET_TAKE:
+            return {
+                take: payload.take,
+            };
+        case ActionTypes.SET_TOTAL:
+            return {
+                total: payload.total,
+            };
+        default:
+            return null;
+    }
+};
+export default (function (state, action) {
+    if (state === void 0) { state = initialState; }
+    var stateDiff = getStateDiff(state, action);
+    if (stateDiff) {
+        return __assign(__assign({}, state), stateDiff);
+    }
+    return state;
+});
+//# sourceMappingURL=PaginationReducer.js.map
@@ -0,0 +1,83 @@
+import { createSelector } from 'reselect';
+var getPaginationState = function (state) { return state.pagination; };
+var getFilterMap = createSelector([
+    getPaginationState,
+], function (state) { return state.filterMap; });
+var getSkip = createSelector([
+    getPaginationState,
+], function (state) { return state.skip; });
+var getSortBy = createSelector([
+    getPaginationState,
+], function (state) { return state.sortBy; });
+var getSortOrder = createSelector([
+    getPaginationState,
+], function (state) { return state.sortOrder; });
+var getTake = createSelector([
+    getPaginationState,
+], function (state) { return state.take; });
+var getTotal = createSelector([
+    getPaginationState,
+], function (state) { return state.total; });
+var getPageIndex = createSelector([
+    getSkip,
+    getTake,
+], function (skip, take) { return take ?
+    skip / take :
+    skip; });
+var getPage = createSelector([
+    getPageIndex,
+], function (pageIndex) { return pageIndex + 1; });
+var hasMorePages = createSelector([
+    getSkip,
+    getTake,
+    getTotal,
+], function (skip, take, total) { return skip + take < total; });
+var getSkipAndTakeKeyValuePairs = createSelector([
+    getSkip,
+    getTake,
+], function (skip, take) { return [
+    {
+        key: 'skip',
+        value: skip,
+    },
+    {
+        key: 'take',
+        value: take,
+    },
+]; });
+var getSortKeyValuePairs = createSelector([
+    getSortBy,
+    getSortOrder,
+], function (sortBy, sortOrder) { return sortOrder ?
+    [
+        {
+            key: 'sortBy',
+            value: sortBy,
+        },
+        {
+            key: 'sortOrder',
+            value: sortOrder,
+        },
+    ] :
+    []; });
+var getFilterKeyValuePairs = createSelector([
+    getFilterMap,
+], function (filterMap) { return Object.keys(filterMap).map(function (key) { return ({
+    key: key,
+    value: filterMap[key],
+}); }); });
+export default {
+    getFilterMap: getFilterMap,
+    getFilterKeyValuePairs: getFilterKeyValuePairs,
+    getPage: getPage,
+    getPageIndex: getPageIndex,
+    getSkip: getSkip,
+    getSkipAndTakeKeyValuePairs: getSkipAndTakeKeyValuePairs,
+    getSortBy: getSortBy,
+    getSortKeyValuePairs: getSortKeyValuePairs,
+    getSortOrder: getSortOrder,
+    getTake: getTake,
+    getTotal: getTotal,
+    hasMorePages: hasMorePages,
+};
+//# sourceMappingURL=PaginationSelectors.js.map
@@ -0,0 +1,25 @@
+import LibraryUtils from '../../Utils/LibraryUtils';
+import createListingSaga from './listingSaga';
+import createSagaMiddleware from 'redux-saga';
+import { logger } from 'redux-logger';
+import { applyMiddleware, createStore, } from 'redux';
+import reducer from './reducer';
+var ReduxLoggingParamKey = 'debug-enabled-redux-logging';
+var clientConfig = {
+    debug: true,
+};
+var configureListingStore = function (dependencies) {
+    var sagaMiddleware = createSagaMiddleware();
+    var middleware = [
+        sagaMiddleware,
+    ];
+    if (LibraryUtils.doesSearchParamEqual(ReduxLoggingParamKey, 'true') ||
+        clientConfig.debug === true) {
+        middleware.push(logger);
+    }
+    var store = createStore(reducer, applyMiddleware.apply(void 0, middleware));
+    sagaMiddleware.run(createListingSaga(dependencies));
+    return store;
+};
+export default configureListingStore;
+//# sourceMappingURL=configureListingStore.js.map
@@ -0,0 +1,10 @@
+import { combineReducers } from 'redux';
+import listing from './ListingReducer';
+import pagination from './PaginationReducer';
+var reducer = combineReducers({
+    listing: listing,
+    pagination: pagination,
+});
+export var initialState = reducer();
+export default reducer;
+//# sourceMappingURL=reducer.js.map
@@ -0,0 +1,101 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import './Modal.scss';
+import pipe from '../../Utils/pipe';
+import withPortal from '../../Utils/withPortal';
+import XIconSvg from '../Icons/XIconSvg';
+import renderIfProp from '../../Utils/renderIfProp';
+import getPopupPortalRoot from '../../Utils/getPopupPortalRoot';
+import onEscape from '../../Utils/Input/onEscape';
+var tryFocus = function (ref) {
+    if (ref.current &&
+        document.activeElement &&
+        ref.current !== document.activeElement &&
+        !ref.current.contains(document.activeElement)) {
+        ref.current.focus();
+        return true;
+    }
+    return false;
+};
+// Class component so we can use mount and unmount without side effects on unrelated prop changes
+var Modal = /** @class */ (function (_super) {
+    __extends(Modal, _super);
+    function Modal(props) {
+        var _this = _super.call(this, props) || this;
+        _this.childFocusOnMountRef = React.createRef();
+        _this.closeButtonRef = React.createRef();
+        return _this;
+    }
+    Modal.prototype.componentDidMount = function () {
+        this.previousActiveElement = document.activeElement;
+        // eslint-disable-next-line no-unused-expressions, `try to focus child-specified ref, otherwise try to focus close button`
+        tryFocus(this.childFocusOnMountRef) || tryFocus(this.closeButtonRef);
+    };
+    Modal.prototype.componentWillUnmount = function () {
+        if (this.previousActiveElement) {
+            this.previousActiveElement.focus();
+        }
+    };
+    Modal.prototype.render = function () {
+        var _a = this.props, children = _a.children, className = _a.className, isDark = _a.isDark, onClose = _a.onClose, wrapperClassName = _a.wrapperClassName;
+        return (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions, `Just capturing escape keypresses to close for keyboard accessibility`
+        React.createElement("div", { className: [
+                wrapperClassName,
+                'ddbeb-modal',
+                isDark && 'ddbeb-modal--dark',
+            ]
+                .filter(Boolean)
+                .join(' '), onKeyDown: onEscape(onClose) },
+            React.createElement("div", { className: "ddbeb-modal__overlay", onClick: onClose }),
+            React.createElement("div", { className: [
+                    className,
+                    'ddbeb-modal__content',
+                ]
+                    .filter(Boolean)
+                    .join(' '), "aria-modal": "true", role: "dialog" },
+                React.createElement("button", { className: "ddbeb-modal__close-button qa-modal_close", onClick: onClose, title: "Close Modal", ref: this.closeButtonRef },
+                    React.createElement(XIconSvg, { thickness: 10 })),
+                typeof children === 'function' ?
+                    children(onClose, this.childFocusOnMountRef) :
+                    children)));
+    };
+    return Modal;
+}(PureComponent));
+Modal.propTypes = {
+    children: PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.func,
+    ]),
+    className: PropTypes.string,
+    isDark: PropTypes.bool,
+    onClose: PropTypes.func.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    wrapperClassName: PropTypes.string,
+};
+Modal.defaultProps = {
+    className: '',
+    isDark: false,
+    wrapperClassName: '',
+};
+export var createModal = function (_a) {
+    var portalRoot = _a.portalRoot;
+    return pipe(withPortal(portalRoot), renderIfProp(function (props) { return props.isOpen; }))(Modal);
+};
+export default createModal({
+    portalRoot: getPopupPortalRoot(),
+});
+//# sourceMappingURL=Modal.js.map
@@ -0,0 +1,32 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+import './NonSortableLabel.scss';
+import styled from 'styled-components';
+export var NonSortableLabel = function (_a) {
+    var className = _a.className, label = _a.label, labelHelpText = _a.labelHelpText;
+    var title = labelHelpText || label;
+    if (!title) {
+        return null;
+    }
+    return (React.createElement("button", { className: [
+            className,
+            'non-sortable-label',
+        ]
+            .filter(Boolean)
+            .join(' '), title: title }, label));
+};
+NonSortableLabel.propTypes = {
+    className: PropTypes.string,
+    label: PropTypes.node.isRequired,
+    labelHelpText: PropTypes.string,
+};
+NonSortableLabel.defaultProps = {
+    className: '',
+};
+export default styled(NonSortableLabel)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var templateObject_1;
+//# sourceMappingURL=NonSortableLabel.js.map
@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import useMediaQuery from './useMediaQuery';
+/**
+ * Renders children only if the media query matches
+ * @param {node} children What to render if the query is a match
+ * @param {string} query A media query to check for conditionally rendering the children
+ * @returns {node|null} The children if the query matches, otherwise, null
+ */
+var MediaQuery = function (_a) {
+    var children = _a.children, query = _a.query;
+    var matches = useMediaQuery(query);
+    return matches ? children : null;
+};
+MediaQuery.propTypes = {
+    children: PropTypes.node.isRequired,
+    query: PropTypes.string.isRequired,
+};
+export default MediaQuery;
+//# sourceMappingURL=MediaQuery.js.map
@@ -0,0 +1,23 @@
+import { useEffect, useState, } from 'react';
+/**
+ * Returns a boolean to indicate if a media query is matched. Only triggers re-renders when the match changes.
+ * @param {string} query A window.matchMedia parsable media query string
+ * @returns {boolean} Does the query match the current media?
+ */
+var useMediaQuery = function (query) {
+    var _a = useState(false), matches = _a[0], setMatches = _a[1];
+    useEffect(function () {
+        var handleQueryChange = function (event) { return setMatches(event.matches); };
+        var mediaQueryList = window.matchMedia(query);
+        // DDBEB-304 Use addListener instead of addEventListener for iPad support
+        mediaQueryList.addListener(handleQueryChange);
+        setMatches(mediaQueryList.matches);
+        // DDBEB-304 Use removeListener instead of removeEventListener for iPad support
+        return function () { return mediaQueryList.removeListener(handleQueryChange); };
+    }, [
+        query,
+    ]);
+    return matches;
+};
+export default useMediaQuery;
+//# sourceMappingURL=useMediaQuery.js.map
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './RichTextEditor.scss';
+var RichTextEditor = function (_a) {
+    var className = _a.className, cols = _a.cols, id = _a.id, label = _a.label, lineHeight = _a.lineHeight, maxLength = _a.maxLength, minLength = _a.minLength, onChange = _a.onChange, placeholder = _a.placeholder, resize = _a.resize, rows = _a.rows, value = _a.value;
+    var handleTextAreaChange = function (event) { return onChange(event.target.value, event); };
+    return (React.createElement("div", { className: [
+            className,
+            'rich-text-editor',
+        ]
+            .filter(Boolean)
+            .join(' ') },
+        React.createElement("label", { className: "rich-text-editor__label", htmlFor: id }, label),
+        React.createElement("textarea", { cols: cols, className: "rich-text-editor__input", id: id, maxLength: maxLength, minLength: minLength, name: id, onChange: handleTextAreaChange, placeholder: placeholder, rows: rows, style: {
+                height: rows ?
+                    rows * lineHeight + "em" :
+                    null,
+                lineHeight: lineHeight,
+                minHeight: lineHeight + "em",
+                resize: resize,
+            }, value: value })));
+};
+RichTextEditor.propTypes = {
+    cols: PropTypes.number,
+    className: PropTypes.string,
+    id: PropTypes.string.isRequired,
+    label: PropTypes.node.isRequired,
+    lineHeight: PropTypes.number,
+    maxLength: PropTypes.number,
+    minLength: PropTypes.number,
+    onChange: PropTypes.func.isRequired,
+    placeholder: PropTypes.string,
+    resize: PropTypes.string,
+    rows: PropTypes.number,
+    value: PropTypes.string.isRequired,
+};
+RichTextEditor.defaultProps = {
+    className: '',
+    lineHeight: 1.1,
+};
+export default RichTextEditor;
+//# sourceMappingURL=RichTextEditor.js.map
@@ -0,0 +1,44 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import './SearchField.scss';
+import MagnifyingGlassSvg from '../Icons/MagnifyingGlassSvg';
+var SearchField = /** @class */ (function (_super) {
+    __extends(SearchField, _super);
+    function SearchField() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.handleInputChange = function (event) {
+            var value = event.target.value;
+            _this.props.onChange(value);
+        };
+        return _this;
+    }
+    SearchField.prototype.render = function () {
+        return (React.createElement("div", { className: "search-field " + this.props.className },
+            React.createElement(MagnifyingGlassSvg, { className: "search-field__icon" }),
+            React.createElement("input", { className: "search-field__input", onChange: this.handleInputChange, placeholder: "Search", value: this.props.value })));
+    };
+    SearchField.propTypes = {
+        className: PropTypes.string,
+        onChange: PropTypes.func.isRequired,
+        value: PropTypes.string.isRequired,
+    };
+    SearchField.defaultProps = {
+        className: '',
+    };
+    return SearchField;
+}(PureComponent));
+export default SearchField;
+//# sourceMappingURL=SearchField.js.map
@@ -0,0 +1,34 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import React from 'react';
+import LockSvg from '../Icons/LockSvg';
+import UnlockSvg from '../Icons/UnlockSvg';
+var LockControl = /** @class */ (function (_super) {
+    __extends(LockControl, _super);
+    function LockControl() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    LockControl.prototype.render = function () {
+        var _a = this.props, isVisible = _a.isVisible, isLocked = _a.isLocked, alignment = _a.alignment, placement = _a.placement, onToggleLocked = _a.onToggleLocked;
+        var iconClassName = isLocked
+            ? 'sidebar__control--unlock'
+            : 'sidebar__control--lock';
+        return (React.createElement("button", { className: "sidebar__control", onClick: onToggleLocked },
+            !isLocked && React.createElement(UnlockSvg, { className: iconClassName }),
+            isLocked && React.createElement(LockSvg, { className: iconClassName })));
+    };
+    return LockControl;
+}(React.PureComponent));
+export default LockControl;
+//# sourceMappingURL=LockControl.js.map
@@ -0,0 +1,46 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import LockControl from "./LockControl";
+import VisibilityControl from "./VisibilityControl";
+var SidebarControls = /** @class */ (function (_super) {
+    __extends(SidebarControls, _super);
+    function SidebarControls() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SidebarControls.prototype.render = function () {
+        var _a = this.props, isVisible = _a.isVisible, isLocked = _a.isLocked, alignment = _a.alignment, placement = _a.placement;
+        return (React.createElement("div", { className: "sidebar__controls" },
+            !isLocked &&
+                React.createElement("span", { className: "sidebar__control-group sidebar__control-group--visibility" },
+                    React.createElement(VisibilityControl, __assign({}, this.props))),
+            isVisible &&
+                React.createElement("span", { className: "sidebar__control-group sidebar__control-group--lock" },
+                    React.createElement(LockControl, __assign({}, this.props)))));
+    };
+    return SidebarControls;
+}(React.PureComponent));
+export default SidebarControls;
+//# sourceMappingURL=SidebarControls.js.map
@@ -0,0 +1,43 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import React from "react";
+import DoubleChevronLeftSvg from "../Icons/DoubleChevronLeftSvg";
+import DoubleChevronRightSvg from "../Icons/DoubleChevronRightSvg";
+var VisibilityControl = /** @class */ (function (_super) {
+    __extends(VisibilityControl, _super);
+    function VisibilityControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.renderLeftArrow = function () {
+            var _a = _this.props, isVisible = _a.isVisible, isLocked = _a.isLocked, alignment = _a.alignment, placement = _a.placement;
+            return !isLocked && !isVisible;
+        };
+        _this.renderRightArrow = function () {
+            var _a = _this.props, isVisible = _a.isVisible, isLocked = _a.isLocked, alignment = _a.alignment, placement = _a.placement;
+            return isVisible;
+        };
+        return _this;
+    }
+    VisibilityControl.prototype.render = function () {
+        var _a = this.props, isVisible = _a.isVisible, isLocked = _a.isLocked, alignment = _a.alignment, placement = _a.placement, onToggleVisibility = _a.onToggleVisibility;
+        var iconClassName = isVisible ? "sidebar__control--collaspe" : "sidebar__control--expand";
+        return (React.createElement("button", { className: "sidebar__control", onClick: onToggleVisibility },
+            this.renderLeftArrow() &&
+                React.createElement(DoubleChevronLeftSvg, { className: iconClassName }),
+            this.renderRightArrow() &&
+                React.createElement(DoubleChevronRightSvg, { className: iconClassName })));
+    };
+    return VisibilityControl;
+}(React.PureComponent));
+export default VisibilityControl;
+//# sourceMappingURL=VisibilityControl.js.map
@@ -0,0 +1,61 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+import './SortableLabel.scss';
+import SortOrderType, { SortOrderTypeLabelMap } from '../../Constants/SortOrderType';
+import SortOrderIcon from '../Icons/SortOrderIcon';
+import styled from 'styled-components';
+var toggleSortOrder = function (sortOrder) {
+    switch (sortOrder) {
+        case SortOrderType.Ascending:
+            return SortOrderType.Descending;
+        case SortOrderType.Descending:
+            return null;
+        default:
+            return SortOrderType.Ascending;
+    }
+};
+var getSortableLabelTitle = function (_a) {
+    var label = _a.label, sortOrder = _a.sortOrder;
+    return sortOrder ?
+        "Sorting by " + label + " " + SortOrderTypeLabelMap[sortOrder] :
+        "Sort by " + label;
+};
+export var SortableLabel = function (_a) {
+    var className = _a.className, label = _a.label, labelHelpText = _a.labelHelpText, onSortChange = _a.onSortChange, sortBy = _a.sortBy, sortByType = _a.sortByType, sortOrder = _a.sortOrder;
+    var activeSortOrder = sortBy === sortByType ?
+        sortOrder :
+        null;
+    return (React.createElement("button", { className: [
+            className,
+            'sortable-label',
+        ]
+            .filter(Boolean)
+            .join(' '), onClick: function () { return onSortChange({
+            sortBy: sortByType,
+            sortOrder: toggleSortOrder(activeSortOrder),
+        }); }, title: getSortableLabelTitle({
+            label: labelHelpText || label,
+            sortOrder: activeSortOrder,
+        }) },
+        label,
+        React.createElement(SortOrderIcon, { sortOrder: activeSortOrder })));
+};
+SortableLabel.propTypes = {
+    className: PropTypes.string,
+    label: PropTypes.node.isRequired,
+    labelHelpText: PropTypes.string,
+    onSortChange: PropTypes.func.isRequired,
+    sortOrder: PropTypes.string,
+    sortBy: PropTypes.string,
+    sortByType: PropTypes.string.isRequired,
+};
+SortableLabel.defaultProps = {
+    className: '',
+};
+export default styled(SortableLabel)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var templateObject_1;
+//# sourceMappingURL=SortableLabel.js.map
@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './SubscriptionsBanner.scss';
+import Button from '../Button/Button';
+/**
+ * The images are not loading in production from here.
+ * The images are served by waterdeep.
+*/
+var imagePath = '/content/images/subscriptions/';
+var SubscriptionsBanner = function (_a) {
+    var iconType = _a.iconType, text = _a.text, children = _a.children, buttonLabel = _a.buttonLabel, onClick = _a.onClick;
+    return React.createElement("div", { class: "variant-cta-container" },
+        React.createElement("div", { class: "variant-cta-icon-copy-wrapper" },
+            iconType && React.createElement("div", { class: "variant-cta-container-icon" },
+                React.createElement("img", { src: "" + imagePath + iconType + "-tier-icon.png", alt: iconType, class: "variant-cta-icon-mask" })),
+            React.createElement("div", { class: "variant-cta-container-copy" }, text || children)),
+        onClick && React.createElement(Button, { class: "variant-cta-container-upsell-btn", onClick: onClick, role: "button" }, buttonLabel));
+};
+SubscriptionsBanner.propTypes = {
+    /** Text to be shown in the main section */
+    text: PropTypes.string,
+    /** Could send react element instead of a string */
+    children: PropTypes.node,
+    /** Icon to display hero or master. Could be null and not icon will be present.  */
+    iconType: PropTypes.oneOf([
+        'hero',
+        'master',
+        null,
+    ]),
+    /** Event fired by the button. */
+    onClick: PropTypes.func,
+    /** By default is `upgrade now` only works if onClick also sent. */
+    buttonLabel: PropTypes.string,
+};
+SubscriptionsBanner.defaultProps = {
+    text: null,
+    children: null,
+    mainIcon: null,
+    onClick: null,
+    buttonLabel: 'upgrade now',
+};
+export default SubscriptionsBanner;
+//# sourceMappingURL=SubscriptionsBanner.js.map
@@ -0,0 +1,112 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import './Tabs.scss';
+// Accessibility code adapted from
+// https://gist.github.com/jonathantneal/435478e415bfe4f54d06
+export var Tab = function (_a) {
+    var children = _a.children;
+    return children;
+};
+Tab.propTypes = {
+    children: PropTypes.node.isRequired,
+    label: PropTypes.node.isRequired,
+    labelClassName: PropTypes.string,
+    title: PropTypes.string,
+};
+Tab.defaultProps = {
+    title: '',
+    labelClassName: '',
+};
+var TabLabel = function (_a) {
+    var children = _a.children, className = _a.className, contentId = _a.contentId, id = _a.id, isSelected = _a.isSelected, onClick = _a.onClick, title = _a.title;
+    return React.createElement("li", { className: [
+            'ddb-tabs__tab',
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), role: "presentation" },
+        React.createElement("a", { href: "#" + contentId, id: id, onClick: onClick, title: title, role: "tab", "aria-controls": contentId, "aria-selected": isSelected }, children));
+};
+TabLabel.propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+    contentId: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
+    isSelected: PropTypes.bool,
+    onClick: PropTypes.func.isRequired,
+    title: PropTypes.string,
+};
+TabLabel.defaultProps = {
+    className: '',
+    title: '',
+};
+var Tabs = /** @class */ (function (_super) {
+    __extends(Tabs, _super);
+    function Tabs(props) {
+        var _this = _super.call(this, props) || this;
+        _this.getTabContentId = function (key) {
+            return _this.props.id + "_content_" + key;
+        };
+        _this.getTabId = function (key) {
+            return _this.props.id + "_tab_" + key;
+        };
+        _this.handleTabClick = function (index, event) {
+            event.preventDefault();
+            _this.setState({
+                selectedTabIndex: index,
+            });
+            if (_this.props.onChangeTab) {
+                _this.props.onChangeTab(index);
+            }
+        };
+        _this.isTabSelected = function (tabIndex) { return _this.state.selectedTabIndex === tabIndex; };
+        _this.state = {
+            selectedTabIndex: props.selectedTabIndex,
+        };
+        return _this;
+    }
+    Tabs.prototype.render = function () {
+        var _this = this;
+        var children = React.Children.toArray(this.props.children);
+        return (React.createElement("div", { className: [
+                'ddb-tabs',
+                this.props.className,
+            ]
+                .filter(Boolean)
+                .join(' ') },
+            React.createElement("ul", { className: "ddb-tabs__tabs", role: "tablist" }, children.map(function (child, index) {
+                return React.createElement(TabLabel, { key: _this.getTabId(index), className: "ddb-tabs__tabs-tab " + child.props.labelClassName, contentId: _this.getTabContentId(index), id: _this.getTabId(index), isSelected: _this.isTabSelected(index), onClick: _this.handleTabClick.bind(_this, index), title: child.props.title }, child.props.label);
+            })),
+            children.map(function (child, index) {
+                return React.createElement("section", { key: _this.getTabContentId(index), className: "ddb-tabs__content", id: _this.getTabContentId(index), "aria-labelledby": _this.getTabId(index), hidden: !_this.isTabSelected(index), role: "tabpanel" }, child);
+            })));
+    };
+    Tabs.propTypes = {
+        children: PropTypes.arrayOf(PropTypes.node).isRequired,
+        id: PropTypes.string.isRequired,
+        className: PropTypes.string,
+        onChangeTab: PropTypes.func,
+        selectedTabIndex: PropTypes.number,
+    };
+    Tabs.defaultProps = {
+        className: '',
+        selectedTabIndex: 0,
+    };
+    return Tabs;
+}(PureComponent));
+export { Tabs };
+export default Tabs;
+//# sourceMappingURL=Tabs.js.map
@@ -0,0 +1,9 @@
+export default {
+    Disabled: 'DISABLED',
+    ComingSoon: 'coming-soon',
+    Alpha: 'alpha',
+    Beta: 'beta',
+    NewRelease: 'new-release',
+    Released: 'release',
+};
+//# sourceMappingURL=ReleaseType.js.map
@@ -0,0 +1,11 @@
+var _a;
+import ReleaseType from './ReleaseType';
+export default (_a = {},
+    _a[ReleaseType.Disabled] = 'disabled',
+    _a[ReleaseType.ComingSoon] = 'coming-soon',
+    _a[ReleaseType.Alpha] = 'alpha',
+    _a[ReleaseType.Beta] = 'beta',
+    _a[ReleaseType.NewRelease] = 'new-release',
+    _a[ReleaseType.Released] = 'released',
+    _a);
+//# sourceMappingURL=ReleaseTypeClassMap.js.map
@@ -0,0 +1,11 @@
+var _a;
+import ReleaseType from './ReleaseType';
+export default (_a = {},
+    _a[ReleaseType.Disabled] = 'Disabled',
+    _a[ReleaseType.ComingSoon] = 'Coming Soon',
+    _a[ReleaseType.Alpha] = 'Alpha',
+    _a[ReleaseType.Beta] = 'Beta',
+    _a[ReleaseType.NewRelease] = 'New Release',
+    _a[ReleaseType.Released] = 'Released',
+    _a);
+//# sourceMappingURL=ReleaseTypeLabelMap.js.map
@@ -0,0 +1,5 @@
+export default {
+    Ascending: 'asc',
+    Descending: 'desc',
+};
+//# sourceMappingURL=SortOrderType.js.map
--- a/Show More
+++ b/Show More