@xivart/tangram 0.0.1-security → 2.712.1

package/components/StopsLine/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var StopsLine_1 = require("./StopsLine");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(StopsLine_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/StopsLine/styled/StopsLineCircle.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = (0, tslib_1.__importDefault)(require("../../../utils/themedStyledComponents"));
+var omitAttrs_1 = (0, tslib_1.__importDefault)(require("../../../utils/omitAttrs"));
+var StopsLineCircle = themedStyledComponents_1.default.div.withConfig((0, omitAttrs_1.default)('fill'))(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  border-radius: 50%;\n  border: ", ";\n  height: 6px;\n  width: 6px;\n  ", ";\n  z-index: 1;\n"], ["\n  border-radius: 50%;\n  border: ", ";\n  height: 6px;\n  width: 6px;\n  ", ";\n  z-index: 1;\n"])), function (_a) {
+    var theme = _a.theme, color = _a.color;
+    return "".concat(theme.borders.width.bw100, " ").concat(theme.borders.style.SOLID, " ").concat(theme.colors[color !== null && color !== void 0 ? color : 'SECONDARY_DARK']);
+}, function (_a) {
+    var theme = _a.theme, color = _a.color, fill = _a.fill;
+    return "background: ".concat(fill
+        ? theme.colors[color !== null && color !== void 0 ? color : 'SECONDARY_DARK']
+        : theme.colors.TERTIARY_LIGHT, ";");
+});
+exports.default = StopsLineCircle;
+var templateObject_1;
+//# sourceMappingURL=StopsLineCircle.js.map

package/components/StopsLine/styled/StopsLineDivider.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = (0, tslib_1.__importDefault)(require("../../../utils/themedStyledComponents"));
+var StopsLineDivider = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  border-left: ", ";\n  height: 22px;\n  position: absolute;\n  left: 2px;\n  top: 5px;\n  z-index: 0;\n"], ["\n  border-left: ", ";\n  height: 22px;\n  position: absolute;\n  left: 2px;\n  top: 5px;\n  z-index: 0;\n"])), function (_a) {
+    var theme = _a.theme, color = _a.color;
+    return "".concat(theme.borders.width.bw200, " ").concat(theme.borders.style.SOLID, "\n    ").concat(theme.colors[color], " ");
+});
+exports.default = StopsLineDivider;
+var templateObject_1;
+//# sourceMappingURL=StopsLineDivider.js.map

package/components/StopsLine/styled/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StopsLineDivider = exports.StopsLineCircle = void 0;
+var tslib_1 = require("tslib");
+var StopsLineCircle_1 = (0, tslib_1.__importDefault)(require("./StopsLineCircle"));
+exports.StopsLineCircle = StopsLineCircle_1.default;
+var StopsLineDivider_1 = (0, tslib_1.__importDefault)(require("./StopsLineDivider"));
+exports.StopsLineDivider = StopsLineDivider_1.default;
+//# sourceMappingURL=index.js.map

package/components/Switch/Switch.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var S = tslib_1.__importStar(require("./styled"));
+var Switch = function (_a) {
+    var checked = _a.checked, _b = _a.dataAttrs, dataAttrs = _b === void 0 ? {} : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d;
+    return (jsx_runtime_1.jsxs(S.Wrapper, tslib_1.__assign({ checked: checked, disabled: disabled }, { children: [jsx_runtime_1.jsx(S.Checkbox, tslib_1.__assign({ checked: checked, disabled: disabled, onChange: onChange, role: "switch" }, dataAttrs), void 0),
+            jsx_runtime_1.jsx(S.Knob, { checked: checked, disabled: disabled }, void 0)] }), void 0));
+};
+exports.Switch = Switch;
+//# sourceMappingURL=Switch.js.map

package/components/Switch/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+var Switch_1 = require("./Switch");
+Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return Switch_1.Switch; } });
+//# sourceMappingURL=index.js.map

package/components/Switch/styled/Checkbox.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+exports.Checkbox = themedStyledComponents_1.default.input.attrs(function () { return ({
+    type: 'checkbox',
+}); })(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  height: 100%;\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  width: 100%;\n"], ["\n  height: 100%;\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])));
+var templateObject_1;
+//# sourceMappingURL=Checkbox.js.map

package/components/Switch/styled/Knob.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Knob = void 0;
+var tslib_1 = require("tslib");
+var hexToRgba_1 = tslib_1.__importDefault(require("../../../utils/hexToRgba"));
+var omitAttrs_1 = tslib_1.__importDefault(require("../../../utils/omitAttrs"));
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+exports.Knob = themedStyledComponents_1.default.span.withConfig(omitAttrs_1.default('checked', 'disabled'))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 50%;\n  box-shadow: 0 2px 3px rgba(0, 63, 127, 0.15);\n  display: block;\n  height: 16px;\n  left: 2px;\n  pointer-events: none;\n  position: absolute;\n  top: 2px;\n  transition: left 0.2s;\n  width: 16px;\n\n  ", "\n"], ["\n  background-color: ",
+    ";\n  border-radius: 50%;\n  box-shadow: 0 2px 3px rgba(0, 63, 127, 0.15);\n  display: block;\n  height: 16px;\n  left: 2px;\n  pointer-events: none;\n  position: absolute;\n  top: 2px;\n  transition: left 0.2s;\n  width: 16px;\n\n  ",
+    "\n"])), function (_a) {
+    var disabled = _a.disabled, theme = _a.theme;
+    return hexToRgba_1.default(theme.colors.CONTENT_BACKGROUND, disabled ? 0.94 : 1);
+}, function (_a) {
+    var checked = _a.checked;
+    return checked &&
+        "\n    left: 18px;\n  ";
+});
+var templateObject_1;
+//# sourceMappingURL=Knob.js.map

package/components/Switch/styled/Wrapper.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = void 0;
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var omitAttrs_1 = tslib_1.__importDefault(require("../../../utils/omitAttrs"));
+var Knob_1 = require("./Knob");
+var hexToRgba_1 = tslib_1.__importDefault(require("../../../utils/hexToRgba"));
+exports.Wrapper = themedStyledComponents_1.default.label.withConfig(omitAttrs_1.default('checked', 'disabled'))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 10px;\n  display: inline-block;\n  height: 20px;\n  position: relative;\n  transition: all 0.2s;\n  width: 36px;\n\n  ", "\n"], ["\n  background-color: ",
+    ";\n  border-radius: 10px;\n  display: inline-block;\n  height: 20px;\n  position: relative;\n  transition: all 0.2s;\n  width: 36px;\n\n  ",
+    "\n"])), function (_a) {
+    var checked = _a.checked, disabled = _a.disabled, theme = _a.theme;
+    return hexToRgba_1.default(checked ? theme.colors.ACTIVE : theme.colors.TEXT_LIGHT, disabled ? 0.24 : 1);
+}, function (_a) {
+    var checked = _a.checked, disabled = _a.disabled, theme = _a.theme;
+    return !disabled &&
+        "\n    cursor: pointer;\n    \n    &:hover {\n      " + Knob_1.Knob + " {\n        box-shadow: 0 2px 3px rgba(0, 63, 127, 0.15),\n          0 0 0 10px\n            " + hexToRgba_1.default(checked ? theme.colors.ACTIVE : theme.colors.TEXT_LIGHT, 0.08) + ";\n      }\n    }\n\n    &:active {\n      " + Knob_1.Knob + " {\n        box-shadow: 0 2px 3px rgba(0, 63, 127, 0.15),\n          0 0 0 10px\n            " + hexToRgba_1.default(checked ? theme.colors.ACTIVE : theme.colors.TEXT_LIGHT, 0.14) + ";\n      }\n    }\n  ";
+});
+var templateObject_1;
+//# sourceMappingURL=Wrapper.js.map

package/components/Switch/styled/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = exports.Knob = exports.Checkbox = void 0;
+var Checkbox_1 = require("./Checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
+var Knob_1 = require("./Knob");
+Object.defineProperty(exports, "Knob", { enumerable: true, get: function () { return Knob_1.Knob; } });
+var Wrapper_1 = require("./Wrapper");
+Object.defineProperty(exports, "Wrapper", { enumerable: true, get: function () { return Wrapper_1.Wrapper; } });
+//# sourceMappingURL=index.js.map

package/components/Table/Table.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Layout_1 = tslib_1.__importDefault(require("../Layout"));
+var Table = function (props) { return jsx_runtime_1.jsx(Layout_1.default, tslib_1.__assign({}, props), void 0); };
+exports.default = Table;
+//# sourceMappingURL=Table.js.map

package/components/Table/components/Cell/Cell.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var HTMLLabelWrapper_1 = tslib_1.__importDefault(require("../../../HTMLLabelWrapper"));
+var S = tslib_1.__importStar(require("./styled"));
+var Cell = function (_a) {
+    var text = _a.text, width = _a.width;
+    return (jsx_runtime_1.jsx(S.Cell, tslib_1.__assign({ flexBasis: width, flexGrow: 1, flexShrink: 0, padding: "s300" }, { children: jsx_runtime_1.jsx(HTMLLabelWrapper_1.default, { children: text }, void 0) }), void 0));
+};
+exports.default = Cell;
+//# sourceMappingURL=Cell.js.map

package/components/Table/components/Cell/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Cell_1 = require("./Cell");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Cell_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Table/components/Cell/styled/Cell.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var Flex_1 = tslib_1.__importDefault(require("../../../../Flex"));
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../../../utils/themedStyledComponents"));
+var Cell = themedStyledComponents_1.default(Flex_1.default)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 1.57;\n  overflow-wrap: anywhere;\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 1.57;\n  overflow-wrap: anywhere;\n  box-sizing: border-box;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.TEXT;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.primary.fontFamily;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.sizes.fs300;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.primary.weight.fw400;
+});
+exports.default = Cell;
+var templateObject_1;
+//# sourceMappingURL=Cell.js.map

package/components/Table/components/Cell/styled/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cell = void 0;
+var Cell_1 = require("./Cell");
+Object.defineProperty(exports, "Cell", { enumerable: true, get: function () { return __importDefault(Cell_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Table/components/Row/Row.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var S = tslib_1.__importStar(require("./styled"));
+var Row = function (props) { return (jsx_runtime_1.jsx(S.Row, tslib_1.__assign({}, props, { justifyContent: "space-between", padding: "s300" }), void 0)); };
+exports.default = Row;
+//# sourceMappingURL=Row.js.map

package/components/Table/components/Row/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Row_1 = require("./Row");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Row_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Table/components/Row/styled/Row.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var Flex_1 = tslib_1.__importDefault(require("../../../../Flex"));
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../../../utils/themedStyledComponents"));
+var Row = themedStyledComponents_1.default(Flex_1.default)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  background-clip: border-box;\n  background-color: ", ";\n\n  &:first-child {\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n  }\n\n  &:last-child {\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n  }\n"], ["\n  background-clip: border-box;\n  background-color: ",
+    ";\n\n  &:first-child {\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n  }\n\n  &:last-child {\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme, highlighted = _a.highlighted;
+    return highlighted ? theme.colors.TERTIARY : theme.colors.CONTENT_BACKGROUND;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.borders.radius.br400;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.borders.radius.br400;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.borders.radius.br400;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.borders.radius.br400;
+});
+exports.default = Row;
+var templateObject_1;
+//# sourceMappingURL=Row.js.map

package/components/Table/components/Row/styled/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Row = void 0;
+var Row_1 = require("./Row");
+Object.defineProperty(exports, "Row", { enumerable: true, get: function () { return __importDefault(Row_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Table/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Row = exports.Cell = exports.default = void 0;
+var Table_1 = require("./Table");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
+var Cell_1 = require("./components/Cell");
+Object.defineProperty(exports, "Cell", { enumerable: true, get: function () { return __importDefault(Cell_1).default; } });
+var Row_1 = require("./components/Row");
+Object.defineProperty(exports, "Row", { enumerable: true, get: function () { return __importDefault(Row_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Tabs/Arrow.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Arrow = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Icon_1 = (0, tslib_1.__importDefault)(require("../Icon"));
+var S = (0, tslib_1.__importStar)(require("./styled"));
+var Arrow = function (_a) {
+    var width = _a.width, height = _a.height, color = _a.color, backgroundColor = _a.backgroundColor, position = _a.position, insetInlineStart = _a.insetInlineStart, insetInlineEnd = _a.insetInlineEnd, reverse = _a.reverse, rounded = _a.rounded, onClick = _a.onClick;
+    return ((0, jsx_runtime_1.jsx)(S.ArrowWrapper, (0, tslib_1.__assign)({ alignItems: "center", backgroundColor: backgroundColor, blockSize: "100%", insetInlineEnd: insetInlineEnd, insetInlineStart: insetInlineStart, onClick: onClick, paddingInlineEnd: "s500", paddingInlineStart: "s200", position: position, reverse: reverse, rounded: rounded }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: color, height: height, name: "chevron-horizontal", width: width }, void 0) }), void 0));
+};
+exports.Arrow = Arrow;
+//# sourceMappingURL=Arrow.js.map

package/components/Tabs/Tab.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var Tab = function () {
+    throw new Error('The `Tab` component is not meant to be rendered! ' +
+        "It's an abstract component that is only valid as a direct Child of the `Tabs` Component.");
+};
+exports.default = Tab;
+//# sourceMappingURL=Tab.js.map

package/components/Tabs/TabTitle.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var types_1 = require("./types");
+var S = tslib_1.__importStar(require("./styled"));
+var TabTitle = (function (_super) {
+    tslib_1.__extends(TabTitle, _super);
+    function TabTitle() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.handleClick = function (e) {
+            var _a = _this.props, index = _a.index, onClick = _a.onClick;
+            onClick(e, index);
+        };
+        return _this;
+    }
+    TabTitle.prototype.render = function () {
+        var _a = this.props, index = _a.index, active = _a.active, activeTabBackgroundColor = _a.activeTabBackgroundColor, activeTabColor = _a.activeTabColor, inactiveTabBackgroundColor = _a.inactiveTabBackgroundColor, inactiveTabColor = _a.inactiveTabColor, dataAttrs = _a.dataAttrs, children = _a.children, forwardedRef = _a.forwardedRef, showBorderForInactiveTabs = _a.showBorderForInactiveTabs, tabWidth = _a.tabWidth;
+        return (react_1.default.createElement(S.TabTitleWrapper, tslib_1.__assign({}, dataAttrs, { ref: forwardedRef, active: active, activeTabBackgroundColor: activeTabBackgroundColor, activeTabColor: activeTabColor, inactiveTabBackgroundColor: inactiveTabBackgroundColor, inactiveTabColor: inactiveTabColor, isCustom: types_1.isFunction(children), onClick: this.handleClick, showBorderForInactiveTabs: showBorderForInactiveTabs, tabWidth: tabWidth }),
+            react_1.default.createElement(S.TabTitleContainer, null, types_1.isFunction(children) ? children(index, active) : children)));
+    };
+    TabTitle.defaultProps = {
+        active: false,
+        dataAttrs: {},
+        onClick: function () { },
+    };
+    return TabTitle;
+}(react_1.PureComponent));
+exports.default = TabTitle;
+//# sourceMappingURL=TabTitle.js.map

package/components/Tabs/Tabs.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var Layout_1 = tslib_1.__importDefault(require("../Layout"));
+var Flex_1 = tslib_1.__importDefault(require("../Flex"));
+var S = tslib_1.__importStar(require("./styled"));
+var Tab_1 = tslib_1.__importDefault(require("./Tab"));
+var TabTitle_1 = tslib_1.__importDefault(require("./TabTitle"));
+var constants_1 = require("./constants");
+var Tabs = (function (_super) {
+    tslib_1.__extends(Tabs, _super);
+    function Tabs(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleTouchDown = function (e) {
+            _this.isSwiping = true;
+            _this.draggingStart = e.nativeEvent.touches[0].clientX;
+            document.addEventListener('touchmove', _this.handleTouchMove);
+        };
+        _this.handleTouchMove = function (e) {
+            var x = e.touches[0].clientX;
+            _this.handleMove(x);
+        };
+        _this.handleMove = function (x) {
+            var tabsWidth = (_this.scrollTapeRef.current && _this.scrollTapeRef.current.offsetWidth) ||
+                0;
+            var viewWidth = (_this.navWrapperRef.current && _this.navWrapperRef.current.offsetWidth) ||
+                0;
+            if (!_this.isSwiping)
+                return;
+            var transformOffset = _this.state.transformOffset;
+            _this.scrollLeft = _this.draggingStart - x;
+            if (transformOffset < 0 || transformOffset + _this.scrollLeft < 0) {
+                _this.setState({ transformOffset: 0 });
+                return;
+            }
+            if (tabsWidth - transformOffset < viewWidth &&
+                _this.draggingStart - x >= 0) {
+                return;
+            }
+            if (transformOffset + _this.scrollLeft > tabsWidth - viewWidth) {
+                _this.setState({
+                    transformOffset: tabsWidth - viewWidth + constants_1.SCROLL_OFFSET,
+                });
+                return;
+            }
+            _this.setState({ transformOffset: transformOffset + _this.scrollLeft });
+        };
+        _this.handleTouchEnd = function () {
+            _this.isSwiping = false;
+            document.removeEventListener('touchmove', _this.handleTouchMove);
+            document.removeEventListener('touchend', _this.handleTouchEnd);
+        };
+        _this.handleTitleClick = function (e, tabIndex) {
+            var onChange = _this.props.onChange;
+            var index = _this.props.index;
+            e.preventDefault();
+            e.stopPropagation();
+            var offset = e.currentTarget.offsetLeft;
+            var actualOffset = _this.getTransformOffset(offset);
+            if (tabIndex !== index) {
+                onChange(tabIndex);
+            }
+            _this.setState({
+                transformOffset: actualOffset,
+            });
+        };
+        _this.navWrapperRef = react_1.createRef();
+        _this.scrollTapeRef = react_1.createRef();
+        _this.selectedTabRef = react_1.createRef();
+        _this.scrollLeft = 0;
+        _this.isSwiping = false;
+        _this.draggingStart = 0;
+        var state = {
+            transformOffset: 0,
+        };
+        _this.state = state;
+        return _this;
+    }
+    Tabs.prototype.componentDidMount = function () {
+        var index = this.props.index;
+        var activeTabElement = this.selectedTabRef.current;
+        if (activeTabElement && index > 0) {
+            this.scrollToTab(activeTabElement);
+        }
+    };
+    Tabs.prototype.scrollToTab = function (element) {
+        var offset = element.offsetLeft;
+        var transformOffset = this.getTransformOffset(offset);
+        this.setState({ transformOffset: transformOffset });
+    };
+    Tabs.prototype.getTransformOffset = function (clickableTabOffset) {
+        var tabsWidth = (this.scrollTapeRef.current && this.scrollTapeRef.current.offsetWidth) ||
+            0;
+        var viewWidth = (this.navWrapperRef.current && this.navWrapperRef.current.offsetWidth) ||
+            0;
+        var MAX = tabsWidth + (constants_1.SCROLL_OFFSET - viewWidth);
+        if (viewWidth > tabsWidth) {
+            return 0;
+        }
+        return Math.min(clickableTabOffset - constants_1.SCROLL_OFFSET, MAX);
+    };
+    Tabs.prototype.renderTabsNavigation = function () {
+        var _this = this;
+        var _a = this.props, children = _a.children, activeTabBackgroundColor = _a.activeTabBackgroundColor, activeTabColor = _a.activeTabColor, inactiveTabBackgroundColor = _a.inactiveTabBackgroundColor, inactiveTabColor = _a.inactiveTabColor, index = _a.index, tabWidth = _a.tabWidth, showBorderForInactiveTabs = _a.showBorderForInactiveTabs;
+        var transformOffset = this.state.transformOffset;
+        var childrenArray = react_1.Children.toArray(children).filter(function (child) { return child != null && child !== true && child !== false; });
+        var tabs = react_1.Children.map(childrenArray, function (child, tabIndex) {
+            if (child.type.toString() !== Tab_1.default.toString()) {
+                throw new Error('Only children of Tab type are allowed in Tabs component');
+            }
+            return (react_1.default.createElement(TabTitle_1.default, { key: child.props.id, active: tabIndex === index, activeTabBackgroundColor: activeTabBackgroundColor, activeTabColor: activeTabColor, dataAttrs: child.props.dataAttrs, forwardedRef: tabIndex === index ? _this.selectedTabRef : undefined, inactiveTabBackgroundColor: inactiveTabBackgroundColor, inactiveTabColor: inactiveTabColor, index: tabIndex, onClick: _this.handleTitleClick, showBorderForInactiveTabs: showBorderForInactiveTabs, tabWidth: tabWidth }, child.props.title));
+        });
+        return tabWidth === '100%' ? (tabs) : (react_1.default.createElement(S.ScrollTape, { ref: this.scrollTapeRef, onTouchEnd: this.handleTouchEnd, onTouchStart: this.handleTouchDown, transformOffset: transformOffset }, tabs));
+    };
+    Tabs.prototype.renderActiveTabContent = function () {
+        var children = this.props.children;
+        var _a = this.props, index = _a.index, fullHeight = _a.fullHeight;
+        var ActiveTab = react_1.Children.toArray(children).find(function (_item, tabIndex) { return tabIndex === index; });
+        return (ActiveTab &&
+            ActiveTab.props &&
+            ActiveTab.props.children && (react_1.default.createElement(Layout_1.default, { blockSize: fullHeight ? '100%' : undefined }, ActiveTab.props.children)));
+    };
+    Tabs.prototype.render = function () {
+        var _a = this.props, titleBackgroundColor = _a.titleBackgroundColor, shouldHideTitlePaddings = _a.shouldHideTitlePaddings, fullHeight = _a.fullHeight;
+        return (react_1.default.createElement(Flex_1.default, { blockSize: fullHeight ? '100%' : undefined, flexDirection: "column" },
+            react_1.default.createElement(S.TabsNavigationWrapper, { ref: this.navWrapperRef, shouldHideTitlePaddings: shouldHideTitlePaddings, titleBackgroundColor: titleBackgroundColor }, this.renderTabsNavigation()),
+            this.renderActiveTabContent()));
+    };
+    Tabs.Tab = Tab_1.default;
+    Tabs.defaultProps = {
+        dataAttrs: {},
+        index: 0,
+        onChange: function () { },
+        shouldHideTitlePaddings: false,
+        showBorderForInactiveTabs: false,
+    };
+    return Tabs;
+}(react_1.PureComponent));
+exports.default = Tabs;
+//# sourceMappingURL=Tabs.js.map

package/components/Tabs/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAX_TAB_WIDTH = exports.SCROLL_OFFSET = void 0;
+exports.SCROLL_OFFSET = 40;
+exports.MAX_TAB_WIDTH = 168;
+//# sourceMappingURL=constants.js.map

package/components/Tabs/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Tabs_1 = require("./Tabs");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Tabs_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Tabs/styled/ArrowWrapper.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var Flex_1 = (0, tslib_1.__importDefault)(require("../../Flex"));
+var themedStyledComponents_1 = (0, tslib_1.__importDefault)(require("../../../utils/themedStyledComponents"));
+var ArrowWrapper = (0, themedStyledComponents_1.default)(Flex_1.default)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  ", ";\n  cursor: pointer;\n  background-color: ", ";\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  cursor: pointer;\n  background-color: ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var reverse = _a.reverse;
+    return reverse && "transform: rotate(180deg)";
+}, function (_a) {
+    var backgroundColor = _a.backgroundColor, theme = _a.theme;
+    return theme.colors[backgroundColor];
+}, function (_a) {
+    var theme = _a.theme, reverse = _a.reverse, rounded = _a.rounded;
+    return rounded &&
+        (reverse
+            ? "border-top-left-radius: ".concat(theme.borders.radius.br200, ";\n      border-bottom-left-radius: ").concat(theme.borders.radius.br200, ";")
+            : "border-top-right-radius: ".concat(theme.borders.radius.br200, ";\n      border-bottom-right-radius: ").concat(theme.borders.radius.br200, "; "));
+}, function (_a) {
+    var theme = _a.theme, reverse = _a.reverse;
+    return reverse
+        ? "border-top: ".concat("".concat(theme.borders.width.bw400, " solid transparent"), ";")
+        : "border-bottom: ".concat("".concat(theme.borders.width.bw400, " solid transparent"), ";");
+});
+exports.default = ArrowWrapper;
+var templateObject_1;
+//# sourceMappingURL=ArrowWrapper.js.map

package/components/Tabs/styled/ScrollTape.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var ScrollTape = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  flex-flow: row nowrap;\n  transform: ", ";\n  transition: transform 1s;\n  flex-shrink: 0;\n"], ["\n  display: flex;\n  flex-flow: row nowrap;\n  transform: ", ";\n  transition: transform 1s;\n  flex-shrink: 0;\n"])), function (_a) {
+    var transformOffset = _a.transformOffset;
+    return "translateX(-" + transformOffset + "px)";
+});
+exports.default = ScrollTape;
+var templateObject_1;
+//# sourceMappingURL=ScrollTape.js.map

package/components/Tabs/styled/TabTitleContainer.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var TabTitleContainer = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n"], ["\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n"])));
+exports.default = TabTitleContainer;
+var templateObject_1;
+//# sourceMappingURL=TabTitleContainer.js.map

package/components/Tabs/styled/TabTitleWrapper.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importStar(require("../../../utils/themedStyledComponents"));
+var getActiveStyles = function (_a) {
+    var active = _a.active, activeTabBackgroundColor = _a.activeTabBackgroundColor, activeTabColor = _a.activeTabColor;
+    return active && themedStyledComponents_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    background-color: ", ";\n    border-bottom: ", ";\n    color: ", ";\n  "], ["\n    background-color: ",
+        ";\n    border-bottom: ",
+        ";\n    color: ",
+        ";\n  "])), function (_a) {
+        var theme = _a.theme;
+        return activeTabBackgroundColor ? theme.colors[activeTabBackgroundColor] : '';
+    }, function (_a) {
+        var theme = _a.theme;
+        return theme.borders.width.bw400 + " " + theme.borders.style.SOLID + " " + theme.colors.ACTIVE;
+    }, function (_a) {
+        var theme = _a.theme;
+        return activeTabColor
+            ? theme.colors[activeTabColor]
+            : theme.colors.CONTENT_BACKGROUND;
+    });
+};
+var getInactiveStyles = function (_a) {
+    var active = _a.active, inactiveTabBackgroundColor = _a.inactiveTabBackgroundColor, inactiveTabColor = _a.inactiveTabColor;
+    return !active && themedStyledComponents_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n  "], ["\n    background-color: ",
+        ";\n    color: ",
+        ";\n  "])), function (_a) {
+        var theme = _a.theme;
+        return inactiveTabBackgroundColor
+            ? theme.colors[inactiveTabBackgroundColor]
+            : '';
+    }, function (_a) {
+        var theme = _a.theme;
+        return inactiveTabColor ? theme.colors[inactiveTabColor] : '';
+    });
+};
+var getPredefinedTabStyles = function () { return themedStyledComponents_1.css(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  box-sizing: border-box;\n  color: ", ";\n  display: inline-flex;\n  align-items: top;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: bold;\n  line-height: 14px;\n  min-height: 46px;\n  min-width: 20px;\n  margin: 0;\n  max-height: 60px;\n  overflow: hidden;\n  padding: 16px 24px 15px;\n  position: relative;\n  text-align: center;\n  text-transform: uppercase;\n"], ["\n  box-sizing: border-box;\n  color: ", ";\n  display: inline-flex;\n  align-items: top;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: bold;\n  line-height: 14px;\n  min-height: 46px;\n  min-width: 20px;\n  margin: 0;\n  max-height: 60px;\n  overflow: hidden;\n  padding: 16px 24px 15px;\n  position: relative;\n  text-align: center;\n  text-transform: uppercase;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.SECONDARY_LIGHT;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.primary.fontFamily;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.sizes.fs200;
+}); };
+var getWidthStyles = function (_a) {
+    var tabWidth = _a.tabWidth;
+    if (!tabWidth) {
+        return '';
+    }
+    return tabWidth === '100%' ? 'flex: 1 1 0;' : "width: " + tabWidth + ";";
+};
+var TabTitleWrapper = themedStyledComponents_1.default.div(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  border-bottom: ", ";\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  border-bottom: ",
+    ";\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme, showBorderForInactiveTabs = _a.showBorderForInactiveTabs;
+    return theme.borders.width.bw400 + " " + theme.borders.style.SOLID + " " + (showBorderForInactiveTabs ? theme.colors.TERTIARY_DARK : 'transparent');
+}, function (_a) {
+    var isCustom = _a.isCustom;
+    return !isCustom && getPredefinedTabStyles;
+}, getWidthStyles, getActiveStyles, getInactiveStyles);
+exports.default = TabTitleWrapper;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//# sourceMappingURL=TabTitleWrapper.js.map