@xivart/tangram 0.0.1-security → 2.712.1

package/components/MaskedInput/MaskedInput.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_input_mask_1 = (0, tslib_1.__importDefault)(require("react-input-mask"));
+var S = (0, tslib_1.__importStar)(require("./styled"));
+var constants_1 = require("./constants");
+var MaskedInput = (function (_super) {
+    (0, tslib_1.__extends)(MaskedInput, _super);
+    function MaskedInput() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            isFocused: false,
+        };
+        _this.inputRef = null;
+        _this.setInputRef = function (element) {
+            var maskedInputRef = _this.props.maskedInputRef;
+            _this.inputRef = element;
+            if (maskedInputRef) {
+                maskedInputRef(element);
+            }
+        };
+        _this.handleKeydownEvent = function (keyEvent) {
+            var pressKey = _this.props.pressKey;
+            pressKey(keyEvent);
+        };
+        _this.handleFocus = function (event) {
+            document.addEventListener('keydown', _this.handleKeydownEvent);
+            _this.setState({ isFocused: true }, function () {
+                var onFocus = _this.props.onFocus;
+                onFocus(event);
+            });
+        };
+        _this.handleBlur = function (event) {
+            document.removeEventListener('keydown', _this.handleKeydownEvent);
+            _this.setState({ isFocused: false }, function () {
+                var onBlur = _this.props.onBlur;
+                onBlur(event);
+            });
+        };
+        _this.beforeMaskedValueChange = function (newState) {
+            var _a = _this
+                .props, omitLastMaskCharacter = _a.omitLastMaskCharacter, maskSymbolToOmit = _a.maskSymbolToOmit;
+            var value = newState.value, selection = newState.selection;
+            if (!omitLastMaskCharacter)
+                return { value: value, selection: selection };
+            var newValue = value.endsWith(maskSymbolToOmit)
+                ? value.slice(0, -maskSymbolToOmit.length)
+                : value;
+            return { value: newValue, selection: selection };
+        };
+        _this.handleChange = function (event) {
+            var value = event.target.value;
+            var prevValue = _this.props.value;
+            if (value === prevValue) {
+                return;
+            }
+            var onChange = _this.props.onChange;
+            onChange(event);
+        };
+        return _this;
+    }
+    MaskedInput.prototype.componentDidMount = function () {
+        this.forceUpdate();
+    };
+    MaskedInput.prototype.componentDidUpdate = function (prevProps) {
+        var value = this.props.value;
+        var isValueChanged = prevProps.value !== value;
+        var isInputValueUpdated = this.inputRef && this.inputRef.value !== value;
+        if (isValueChanged && isInputValueUpdated) {
+            this.forceUpdate();
+        }
+    };
+    MaskedInput.prototype.renderMaskedInput = function (_a, noLimit) {
+        var showValidationIcon = _a.showValidationIcon, small = _a.small, value = _a.value, valid = _a.valid, props = (0, tslib_1.__rest)(_a, ["showValidationIcon", "small", "value", "valid"]);
+        return ((0, jsx_runtime_1.jsx)(S.MaskedInput, (0, tslib_1.__assign)({}, props, { inputRef: this.setInputRef, onBlur: noLimit ? this.handleBlur : undefined, onChange: noLimit ? this.handleChange : undefined, onFocus: noLimit ? this.handleFocus : undefined, showValidationIcon: showValidationIcon, small: small, valid: valid, value: noLimit ? value : undefined }), void 0));
+    };
+    MaskedInput.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, disabled = _a.disabled, formatCharacters = _a.formatCharacters, hideBorder = _a.hideBorder, mask = _a.mask, maskPlaceholder = _a.maskPlaceholder, noLimit = _a.noLimit, placeholder = _a.placeholder, value = _a.value, withEllipsis = _a.withEllipsis, valid = _a.valid, showValidationIcon = _a.showValidationIcon, small = _a.small, restProps = (0, tslib_1.__rest)(_a, ["disabled", "formatCharacters", "hideBorder", "mask", "maskPlaceholder", "noLimit", "placeholder", "value", "withEllipsis", "valid", "showValidationIcon", "small"]);
+        var isFocused = this.state.isFocused;
+        var inputValue = this.inputRef ? this.inputRef.value : '';
+        var finalPlaceholder = maskPlaceholder &&
+            inputValue.concat(maskPlaceholder.slice(inputValue.length));
+        if (!isFocused && value.length === 0 && placeholder.length > 0) {
+            finalPlaceholder = placeholder;
+        }
+        return ((0, jsx_runtime_1.jsxs)(S.Container, { children: [(0, jsx_runtime_1.jsx)(S.BackgroundInput, { disabled: disabled, hideBorder: hideBorder, placeholder: finalPlaceholder, readOnly: true, showValidationIcon: showValidationIcon, small: small, tabIndex: -1, valid: valid, withEllipsis: withEllipsis }, void 0), noLimit ? (this.renderMaskedInput((0, tslib_1.__assign)({ disabled: disabled, hideBorder: hideBorder, value: value, showValidationIcon: showValidationIcon, small: small, valid: valid, withEllipsis: withEllipsis }, restProps), noLimit)) : ((0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, tslib_1.__assign)({ beforeMaskedValueChange: this.beforeMaskedValueChange, disabled: disabled, formatChars: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, constants_1.DEFAULT_FORMAT_CHARACTERS), formatCharacters), mask: mask, maskChar: null, onBlur: this.handleBlur, onChange: this.handleChange, onFocus: this.handleFocus, value: value }, { children: function () {
+                        return _this.renderMaskedInput((0, tslib_1.__assign)({ disabled: disabled, hideBorder: hideBorder, value: value, showValidationIcon: showValidationIcon, small: small, valid: valid, withEllipsis: withEllipsis }, restProps), noLimit);
+                    } }), void 0))] }, void 0));
+    };
+    MaskedInput.defaultProps = {
+        autoComplete: 'on',
+        dataAttrs: {},
+        value: '',
+        formatCharacters: {},
+        mask: '*',
+        maskPlaceholder: '',
+        maskSymbolToOmit: '-',
+        onBlur: function () { },
+        onChange: function () { },
+        onFocus: function () { },
+        pressKey: function () { },
+        placeholder: '',
+        disabled: false,
+        hideBorder: false,
+        showValidationIcon: true,
+        withEllipsis: false,
+        noLimit: false,
+    };
+    return MaskedInput;
+}(react_1.PureComponent));
+exports.default = MaskedInput;
+//# sourceMappingURL=MaskedInput.js.map

package/components/MaskedInput/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_FORMAT_CHARACTERS = void 0;
+exports.DEFAULT_FORMAT_CHARACTERS = {
+    '*': '[A-Za-z0-9]',
+    9: '[0-9]',
+    A: '[A-Za-z]',
+};
+//# sourceMappingURL=constants.js.map

package/components/MaskedInput/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 MaskedInput_1 = require("./MaskedInput");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(MaskedInput_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/MaskedInput/styled/BackgroundInput.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = (0, tslib_1.__importDefault)(require("../../../utils/themedStyledComponents"));
+var Input_1 = (0, tslib_1.__importDefault)(require("../../Input"));
+var BackgroundInput = (0, themedStyledComponents_1.default)(Input_1.default)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  && {\n    display: block;\n  }\n  ", "\n  ", "\n  ", "\n"], ["\n  && {\n    display: block;\n  }\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
+    var valid = _a.valid, theme = _a.theme;
+    return !valid && "color: ".concat(theme.colors.NEGATIVE, ";");
+}, function (_a) {
+    var hideBorder = _a.hideBorder;
+    return hideBorder && "border: none;";
+}, function (_a) {
+    var withEllipsis = _a.withEllipsis;
+    return withEllipsis &&
+        "\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n  ";
+});
+exports.default = BackgroundInput;
+var templateObject_1;
+//# sourceMappingURL=BackgroundInput.js.map

package/components/MaskedInput/styled/Container.js

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

package/components/MaskedInput/styled/MaskedInput.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = (0, tslib_1.__importDefault)(require("../../../utils/themedStyledComponents"));
+var Input_1 = (0, tslib_1.__importDefault)(require("../../Input"));
+var MaskedInput = (0, themedStyledComponents_1.default)(Input_1.default)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  && {\n    display: block;\n    margin-top: ", ";\n    position: relative;\n  }\n\n  & > input {\n    background-color: transparent;\n  }\n"], ["\n  && {\n    display: block;\n    margin-top: ", ";\n    position: relative;\n  }\n\n  & > input {\n    background-color: transparent;\n  }\n"])), function (_a) {
+    var small = _a.small;
+    return (small ? '-36px' : '-48px');
+});
+exports.default = MaskedInput;
+var templateObject_1;
+//# sourceMappingURL=MaskedInput.js.map

package/components/MaskedInput/styled/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.MaskedInput = exports.Container = exports.BackgroundInput = void 0;
+var BackgroundInput_1 = require("./BackgroundInput");
+Object.defineProperty(exports, "BackgroundInput", { enumerable: true, get: function () { return __importDefault(BackgroundInput_1).default; } });
+var Container_1 = require("./Container");
+Object.defineProperty(exports, "Container", { enumerable: true, get: function () { return __importDefault(Container_1).default; } });
+var MaskedInput_1 = require("./MaskedInput");
+Object.defineProperty(exports, "MaskedInput", { enumerable: true, get: function () { return __importDefault(MaskedInput_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Menu/Menu.js

@@ -0,0 +1,15 @@
+"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 Overlay_1 = tslib_1.__importDefault(require("../Overlay"));
+var TitleBar_1 = tslib_1.__importDefault(require("../TitleBar"));
+var S = tslib_1.__importStar(require("./styled"));
+var Menu = function (_a) {
+    var _b = _a.active, active = _b === void 0 ? false : _b, children = _a.children, childrenDataAttrs = _a.childrenDataAttrs, dataAttrs = _a.dataAttrs, onBack = _a.onBack, onClose = _a.onClose, title = _a.title;
+    return (jsx_runtime_1.jsx(Overlay_1.default, tslib_1.__assign({ active: active, onClose: onClose }, { children: jsx_runtime_1.jsxs(S.Menu, tslib_1.__assign({}, dataAttrs, { children: [jsx_runtime_1.jsx(TitleBar_1.default, tslib_1.__assign({ backButtonIcon: "chevron-horizontal", childrenDataAttrs: childrenDataAttrs && childrenDataAttrs.header, onBack: onBack, onClose: onClose }, { children: !!title && jsx_runtime_1.jsx(Layout_1.default, tslib_1.__assign({ as: "span" }, { children: title }), void 0) }), void 0),
+                jsx_runtime_1.jsx(S.Content, { children: children }, void 0)] }), void 0) }), void 0));
+};
+exports.default = Menu;
+//# sourceMappingURL=Menu.js.map

package/components/Menu/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 Menu_1 = require("./Menu");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Menu_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Menu/styled/Content.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 Content = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: relative;\n  flex: 1;\n  width: 100%;\n  z-index: ", ";\n"], ["\n  position: relative;\n  flex: 1;\n  width: 100%;\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.zIndexes.base;
+});
+exports.default = Content;
+var templateObject_1;
+//# sourceMappingURL=Content.js.map

package/components/Menu/styled/Menu.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 Menu = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  margin-left: auto;\n  max-width: 296px;\n  position: relative;\n"], ["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  margin-left: auto;\n  max-width: 296px;\n  position: relative;\n"])), function (_a) {
+    var colors = _a.theme.colors;
+    return colors.SECONDARY_LIGHT;
+});
+exports.default = Menu;
+var templateObject_1;
+//# sourceMappingURL=Menu.js.map

package/components/Menu/styled/index.js

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

package/components/MessageBox/MessageBox.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var S = tslib_1.__importStar(require("./styled"));
+var MessageBox = function (_a) {
+    var background = _a.background, children = _a.children, _b = _a.dataAttrs, dataAttrs = _b === void 0 ? {} : _b, withShadow = _a.withShadow;
+    return (react_1.default.createElement(S.MessageBox, tslib_1.__assign({}, dataAttrs, { background: background, withShadow: withShadow }), children));
+};
+exports.default = MessageBox;
+//# sourceMappingURL=MessageBox.js.map

package/components/MessageBox/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 MessageBox_1 = require("./MessageBox");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(MessageBox_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/MessageBox/styled/MessageBox.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var MessageBox = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  display: flex;\n  flex-grow: 1;\n  font-weight: normal;\n  padding: ", ";\n  position: relative;\n"], ["\n  align-items: center;\n  background: ",
+    ";\n  border-radius: ", ";\n  box-shadow: ",
+    ";\n  display: flex;\n  flex-grow: 1;\n  font-weight: normal;\n  padding: ", ";\n  position: relative;\n"])), function (_a) {
+    var theme = _a.theme, background = _a.background;
+    return background ? theme.colors[background] : theme.colors.TERTIARY;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.borders.radius.br200;
+}, function (_a) {
+    var withShadow = _a.withShadow;
+    return withShadow && "0 2px 3px 0 rgba(0, 0, 0, 0.15)";
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacings.s500;
+});
+exports.default = MessageBox;
+var templateObject_1;
+//# sourceMappingURL=MessageBox.js.map

package/components/MessageBox/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.MessageBox = void 0;
+var MessageBox_1 = require("./MessageBox");
+Object.defineProperty(exports, "MessageBox", { enumerable: true, get: function () { return __importDefault(MessageBox_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/MessageHelper/MessageHelper.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var types_1 = require("./types");
+var S = tslib_1.__importStar(require("./styled"));
+var MessageHelper = function (_a) {
+    var dataAttrs = _a.dataAttrs, props = tslib_1.__rest(_a, ["dataAttrs"]);
+    return jsx_runtime_1.jsx(S.MessageHelper, tslib_1.__assign({}, dataAttrs, props), void 0);
+};
+var defaultProps = {
+    dataAttrs: {},
+    type: types_1.MessageHelperTypes.Info,
+    roundedTop: false,
+};
+MessageHelper.defaultProps = defaultProps;
+exports.default = MessageHelper;
+//# sourceMappingURL=MessageHelper.js.map

package/components/MessageHelper/index.js

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

package/components/MessageHelper/styled/Arrow.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = require("../../../utils/themedStyledComponents");
+var getBgColor_1 = tslib_1.__importDefault(require("./getBgColor"));
+var Arrow = themedStyledComponents_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  &:before {\n    background: ", ";\n    content: '';\n    height: 12px;\n    left: ", ";\n    position: absolute;\n    top: -6px;\n    transform: rotate(-135deg);\n    width: 12px;\n  }\n"], ["\n  &:before {\n    background: ", ";\n    content: '';\n    height: 12px;\n    left: ", ";\n    position: absolute;\n    top: -6px;\n    transform: rotate(-135deg);\n    width: 12px;\n  }\n"])), getBgColor_1.default, function (_a) {
+    var theme = _a.theme;
+    return theme.spacings.s500;
+});
+exports.default = Arrow;
+var templateObject_1;
+//# sourceMappingURL=Arrow.js.map

package/components/MessageHelper/styled/MessageHelper.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var omitAttrs_1 = tslib_1.__importDefault(require("../../../utils/omitAttrs"));
+var getArrowStyles_1 = tslib_1.__importDefault(require("./getArrowStyles"));
+var getBgColor_1 = tslib_1.__importDefault(require("./getBgColor"));
+var MessageHelper = themedStyledComponents_1.default.div.withConfig(omitAttrs_1.default('type'))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  background: ", ";\n  border-bottom-left-radius: ", ";\n  border-bottom-right-radius: ", ";\n\n  ", "\n\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: normal;\n  line-height: 22px;\n  padding: ", ";\n  position: relative;\n\n  ", ";\n"], ["\n  background: ", ";\n  border-bottom-left-radius: ", ";\n  border-bottom-right-radius: ", ";\n\n  ",
+    "\n\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: normal;\n  line-height: 22px;\n  padding: ", ";\n  position: relative;\n\n  ", ";\n"])), getBgColor_1.default, function (_a) {
+    var theme = _a.theme;
+    return theme.borders.radius.br200;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.borders.radius.br200;
+}, function (_a) {
+    var theme = _a.theme, roundedTop = _a.roundedTop;
+    return roundedTop &&
+        "\n      border-top-left-radius: " + theme.borders.radius.br200 + ";\n      border-top-right-radius: " + theme.borders.radius.br200 + ";\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.fs400;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacings.s500;
+}, getArrowStyles_1.default);
+exports.default = MessageHelper;
+var templateObject_1;
+//# sourceMappingURL=MessageHelper.js.map

package/components/MessageHelper/styled/getArrowStyles.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var types_1 = require("../types");
+var Arrow_1 = tslib_1.__importDefault(require("./Arrow"));
+var getArrowStyles = function (_a) {
+    var type = _a.type;
+    switch (type) {
+        case types_1.MessageHelperTypes.Error:
+        case types_1.MessageHelperTypes.Warning:
+        case types_1.MessageHelperTypes.Restriction:
+            return null;
+        case types_1.MessageHelperTypes.Info:
+        default:
+            return Arrow_1.default;
+    }
+};
+exports.default = getArrowStyles;
+//# sourceMappingURL=getArrowStyles.js.map

package/components/MessageHelper/styled/getBgColor.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var types_1 = require("../types");
+var getBgColor = function (_a) {
+    var theme = _a.theme, type = _a.type;
+    switch (type) {
+        case types_1.MessageHelperTypes.Error:
+        case types_1.MessageHelperTypes.Warning:
+        case types_1.MessageHelperTypes.Restriction:
+            return theme.colors.NEGATIVE_LIGHT;
+        case types_1.MessageHelperTypes.Info:
+        default:
+            return theme.colors.TERTIARY_DARK;
+    }
+};
+exports.default = getBgColor;
+//# sourceMappingURL=getBgColor.js.map

package/components/MessageHelper/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.MessageHelper = void 0;
+var MessageHelper_1 = require("./MessageHelper");
+Object.defineProperty(exports, "MessageHelper", { enumerable: true, get: function () { return __importDefault(MessageHelper_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/MessageHelper/types.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageHelperTypes = void 0;
+var MessageHelperTypes;
+(function (MessageHelperTypes) {
+    MessageHelperTypes["Info"] = "info";
+    MessageHelperTypes["Error"] = "error";
+    MessageHelperTypes["Warning"] = "warning";
+    MessageHelperTypes["Restriction"] = "restriction";
+})(MessageHelperTypes = exports.MessageHelperTypes || (exports.MessageHelperTypes = {}));
+//# sourceMappingURL=types.js.map

package/components/Metroline/Metroline.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var S = (0, tslib_1.__importStar)(require("./styled"));
+var Metroline = function (props) { return (0, jsx_runtime_1.jsx)(S.Metroline, (0, tslib_1.__assign)({}, props), void 0); };
+Metroline.defaultProps = {
+    isStyled: false,
+    isVertical: false,
+    isDirect: false,
+    isEnabled: true,
+};
+exports.default = Metroline;
+//# sourceMappingURL=Metroline.js.map

package/components/Metroline/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 Metroline_1 = require("./Metroline");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Metroline_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Metroline/styled/Metroline.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = (0, tslib_1.__importDefault)(require("../../../utils/themedStyledComponents"));
+var getNotSolidStyles = function (_a) {
+    var isStyled = _a.isStyled, isVertical = _a.isVertical, theme = _a.theme;
+    return isStyled &&
+        "\n  border-".concat(isVertical ? 'left' : 'bottom', ": ").concat(theme.borders.width.bw200, " ").concat(theme.metroline.NOT_SOLID_LINE, " ").concat(theme.colors.PRIMARY_LIGHT, ";\n");
+};
+var getHorizontalStyles = function (_a) {
+    var isVertical = _a.isVertical, isDirect = _a.isDirect, theme = _a.theme;
+    return !isVertical &&
+        "\n  border-bottom: ".concat(theme.borders.width.bw200, " ").concat(theme.borders.style.SOLID, " ").concat(isDirect ? theme.colors.POSITIVE : theme.colors.SECONDARY_DARK, ";\n  content: '';\n  display: flex;\n  flex: 1;\n  margin: 0 ").concat(theme.spacings.s300, ";\n");
+};
+var getVerticalStyles = function (_a) {
+    var isVertical = _a.isVertical, isEnabled = _a.isEnabled, theme = _a.theme;
+    return isVertical &&
+        "\n  border-left: ".concat(theme.borders.width.bw200, " ").concat(theme.borders.style.SOLID, " ").concat(theme.colors.PRIMARY_LIGHT, ";\n  content: '';\n  display: ").concat(isEnabled ? 'flex' : 'none', ";\n  height: calc(100% - 14px);\n  position: absolute;\n  top: 15px;\n");
+};
+var Metroline = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n"])), getHorizontalStyles, getVerticalStyles, getNotSolidStyles);
+exports.default = Metroline;
+var templateObject_1;
+//# sourceMappingURL=Metroline.js.map

package/components/Metroline/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.Metroline = void 0;
+var Metroline_1 = require("./Metroline");
+Object.defineProperty(exports, "Metroline", { enumerable: true, get: function () { return __importDefault(Metroline_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/MetrolineContainer/MetrolineContainer.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 MetrolineContainer = function (props) { return (jsx_runtime_1.jsx(S.MetrolineContainer, tslib_1.__assign({}, props), void 0)); };
+exports.default = MetrolineContainer;
+//# sourceMappingURL=MetrolineContainer.js.map

package/components/MetrolineContainer/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 MetrolineContainer_1 = require("./MetrolineContainer");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(MetrolineContainer_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/MetrolineContainer/styled/MetrolineContainer.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var MetrolineContainer = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  padding: 0 ", "\n    ", ";\n  position: relative;\n"], ["\n  display: flex;\n  padding: 0 ", "\n    ", ";\n  position: relative;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacings.s500;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacings.s500;
+});
+exports.default = MetrolineContainer;
+var templateObject_1;
+//# sourceMappingURL=MetrolineContainer.js.map

package/components/MetrolineContainer/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.MetrolineContainer = void 0;
+var MetrolineContainer_1 = require("./MetrolineContainer");
+Object.defineProperty(exports, "MetrolineContainer", { enumerable: true, get: function () { return __importDefault(MetrolineContainer_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/MetrolineDivider/MetrolineDivider.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 S = tslib_1.__importStar(require("./styled"));
+var MetrolineDivider = function (_a) {
+    var _b = _a.isStyled, isStyled = _b === void 0 ? false : _b, _c = _a.isVertical, isVertical = _c === void 0 ? true : _c, _d = _a.isEnabled, isEnabled = _d === void 0 ? true : _d, _e = _a.noCircle, noCircle = _e === void 0 ? false : _e;
+    return (jsx_runtime_1.jsxs(S.MetrolineDivider, { children: [!noCircle && jsx_runtime_1.jsx(S.MetrolineCircle, {}, void 0),
+            jsx_runtime_1.jsx(S.Metroline, { isEnabled: isEnabled, isStyled: isStyled, isVertical: isVertical, noCircle: noCircle }, void 0)] }, void 0));
+};
+exports.default = MetrolineDivider;
+//# sourceMappingURL=MetrolineDivider.js.map

package/components/MetrolineDivider/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 MetrolineDivider_1 = require("./MetrolineDivider");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(MetrolineDivider_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/MetrolineDivider/styled/Metroline.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var Metroline_1 = tslib_1.__importDefault(require("../../Metroline"));
+var Line = themedStyledComponents_1.default(Metroline_1.default)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  top: ", ";\n  left: 3px;\n  height: calc(100% - 6px);\n"], ["\n  top: ", ";\n  left: 3px;\n  height: calc(100% - 6px);\n"])), function (_a) {
+    var noCircle = _a.noCircle;
+    return (noCircle ? '8px' : '11px');
+});
+exports.default = Line;
+var templateObject_1;
+//# sourceMappingURL=Metroline.js.map