@xivart/tangram 0.0.1-security → 2.712.1

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

package/components/InfoButton/styled/InfoButton.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var InfoButton = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 100%;\n  border: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n  width: 20px;\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ",
+    ";\n  border-radius: 100%;\n  border: ",
+    ";\n  cursor: pointer;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n  width: 20px;\n\n  ",
+    ";\n"])), function (_a) {
+    var theme = _a.theme, pushed = _a.pushed;
+    return pushed ? theme.colors.TERTIARY : theme.colors.CONTENT_BACKGROUND;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.borders.style.SOLID + " " + theme.borders.width.bw200 + " " + theme.colors.TERTIARY_DARK;
+}, function (_a) {
+    var theme = _a.theme, isDark = _a.isDark, pushed = _a.pushed;
+    return isDark &&
+        "\n      background-color: " + theme.colors.PRIMARY + ";\n      border-color: " + (pushed ? theme.colors.TERTIARY_DARK : theme.colors.CONTENT_BACKGROUND) + ";\n    ";
+});
+exports.default = InfoButton;
+var templateObject_1;
+//# sourceMappingURL=InfoButton.js.map

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

package/components/InfoTag/InfoTag.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 Text_1 = tslib_1.__importDefault(require("../Text"));
+var S = tslib_1.__importStar(require("./styled"));
+var InfoTag = function (_a) {
+    var backgroundColor = _a.backgroundColor, _b = _a.color, color = _b === void 0 ? 'TEXT' : _b, borderColor = _a.borderColor, content = _a.content;
+    return (jsx_runtime_1.jsx(S.InfoTag, tslib_1.__assign({ backgroundColor: backgroundColor, borderColor: borderColor }, { children: jsx_runtime_1.jsx(Text_1.default, tslib_1.__assign({ color: color, fontSize: "fs200", fontWeight: "fw700" }, { children: content }), void 0) }), void 0));
+};
+exports.default = InfoTag;
+//# sourceMappingURL=InfoTag.js.map

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

package/components/InfoTag/styled/InfoTag.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 InfoTag = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  padding: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border: ", ";\n  width: fit-content;\n"], ["\n  padding: ", ";\n  background: ",
+    ";\n  border-radius: ", ";\n  border: ",
+    ";\n  width: fit-content;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacings.s100 + " " + theme.spacings.s300;
+}, function (_a) {
+    var theme = _a.theme, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'CONTENT_BACKGROUND' : _b;
+    return "" + theme.colors[backgroundColor];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.borders.radius.br200;
+}, function (_a) {
+    var theme = _a.theme, borderColor = _a.borderColor, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'CONTENT_BACKGROUND' : _b;
+    return "\n      " + theme.borders.style.SOLID + "\n      " + theme.borders.width.bw100 + "\n      " + theme.colors[borderColor || backgroundColor] + "\n    ";
+});
+exports.default = InfoTag;
+var templateObject_1;
+//# sourceMappingURL=InfoTag.js.map

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

package/components/Input/Input.js

@@ -0,0 +1,198 @@
+"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 Spinner_1 = tslib_1.__importDefault(require("../Spinner"));
+var MessageHelper_1 = tslib_1.__importStar(require("../MessageHelper"));
+var ValidationIcon_1 = tslib_1.__importDefault(require("../ValidationIcon"));
+var S = tslib_1.__importStar(require("./styled"));
+var types_1 = require("./types");
+var constants_1 = require("./constants");
+var isPatternMatched = function (value, pattern) {
+    var regexp = new RegExp(pattern);
+    return regexp.test(value);
+};
+var Input = (function (_super) {
+    tslib_1.__extends(Input, _super);
+    function Input(props) {
+        var _this = _super.call(this, props) || this;
+        _this.inputRef = null;
+        _this.createInputRef = function (element) {
+            _this.inputRef = element;
+            var inputRef = _this.props.inputRef;
+            if (inputRef) {
+                inputRef(element);
+            }
+        };
+        _this.getReactElement = function (element) {
+            return typeof element === 'function' ? element() : element;
+        };
+        _this.handleChange = function (event) {
+            var _a = _this
+                .props, onChange = _a.onChange, pattern = _a.pattern, restrictedMessage = _a.restrictedMessage;
+            var shouldShowRestrictedMessage = _this.state.shouldShowRestrictedMessage;
+            var value = event.target.value;
+            if (pattern && value && !isPatternMatched(value, pattern)) {
+                if (restrictedMessage && !shouldShowRestrictedMessage) {
+                    _this.setState({
+                        shouldShowRestrictedMessage: true,
+                    });
+                }
+                return;
+            }
+            if (shouldShowRestrictedMessage) {
+                _this.setState({
+                    shouldShowRestrictedMessage: false,
+                });
+            }
+            onChange(event);
+        };
+        _this.handleFocus = function (event) {
+            var onFocus = _this.props.onFocus;
+            onFocus(event);
+            event.persist();
+            _this.setState({ isFocused: true });
+        };
+        _this.handleBlur = function (event) {
+            var onBlur = _this.props.onBlur;
+            onBlur(event);
+            event.persist();
+            _this.setState({ isFocused: false, shouldShowRestrictedMessage: false });
+        };
+        _this.handleClearClick = function () {
+            var nativeInputValue = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
+            if (!nativeInputValue || !nativeInputValue.set) {
+                return;
+            }
+            nativeInputValue.set.call(_this.inputRef, '');
+            var synthEvent = new Event('input', { bubbles: true });
+            _this.inputRef.dispatchEvent(synthEvent);
+        };
+        _this.handlePasswordSwitchClick = function () {
+            _this.setState(function (prevState) { return ({
+                isPassword: !prevState.isPassword,
+            }); });
+        };
+        _this.handlePaste = function (e) {
+            var _a = _this.props, preventPaste = _a.preventPaste, onPaste = _a.onPaste;
+            if (preventPaste) {
+                e.preventDefault();
+                return;
+            }
+            if (onPaste) {
+                onPaste(e);
+            }
+        };
+        _this.state = {
+            isFocused: false,
+            isPassword: props.type === types_1.InputType.Password,
+            shouldShowRestrictedMessage: false,
+        };
+        return _this;
+    }
+    Input.prototype.getInputType = function () {
+        var isPassword = this.state.isPassword;
+        var type = this.props.type;
+        if (type === types_1.InputType.Password) {
+            return isPassword ? types_1.InputType.Password : types_1.InputType.Text;
+        }
+        return type;
+    };
+    Input.prototype.renderClearButton = function () {
+        var isFocused = this.state.isFocused;
+        var _a = this
+            .props, type = _a.type, hasClearButton = _a.hasClearButton, value = _a.value, childrenDataAttrs = _a.childrenDataAttrs;
+        var isPassword = type === types_1.InputType.Password;
+        if (hasClearButton && !isPassword && isFocused && value && value.length) {
+            return (jsx_runtime_1.jsx(S.IconWrapper, tslib_1.__assign({}, (childrenDataAttrs.clearButton || {}), { onMouseDown: this.handleClearClick, onTouchStart: this.handleClearClick }, { children: jsx_runtime_1.jsx(S.ClearButton, {}, void 0) }), void 0));
+        }
+        return null;
+    };
+    Input.prototype.renderMessage = function () {
+        var _a = this
+            .props, message = _a.message, errorMessage = _a.errorMessage, childrenDataAttrs = _a.childrenDataAttrs;
+        var shouldShowRestrictedMessage = this.state.shouldShowRestrictedMessage;
+        if (message && !errorMessage && !shouldShowRestrictedMessage) {
+            return (jsx_runtime_1.jsx(MessageHelper_1.default, tslib_1.__assign({ dataAttrs: childrenDataAttrs.message }, { children: this.getReactElement(message) }), void 0));
+        }
+        return null;
+    };
+    Input.prototype.renderRestrictedMessage = function () {
+        var _a = this
+            .props, restrictedMessage = _a.restrictedMessage, childrenDataAttrs = _a.childrenDataAttrs, errorMessage = _a.errorMessage;
+        var shouldShowRestrictedMessage = this.state.shouldShowRestrictedMessage;
+        if (shouldShowRestrictedMessage && !errorMessage) {
+            return (jsx_runtime_1.jsx(MessageHelper_1.default, tslib_1.__assign({ dataAttrs: childrenDataAttrs.errorMessage }, { children: this.getReactElement(restrictedMessage) }), void 0));
+        }
+        return null;
+    };
+    Input.prototype.renderErrorMessage = function () {
+        var _a = this
+            .props, errorMessage = _a.errorMessage, childrenDataAttrs = _a.childrenDataAttrs;
+        if (errorMessage) {
+            return (jsx_runtime_1.jsx(MessageHelper_1.default, tslib_1.__assign({ dataAttrs: childrenDataAttrs.errorMessage, type: MessageHelper_1.MessageHelperTypes.Error }, { children: this.getReactElement(errorMessage) }), void 0));
+        }
+        return null;
+    };
+    Input.prototype.renderValidationIcon = function () {
+        var isFocused = this.state.isFocused;
+        var _a = this
+            .props, valid = _a.valid, childrenDataAttrs = _a.childrenDataAttrs, showValidationIcon = _a.showValidationIcon;
+        if (!showValidationIcon) {
+            return null;
+        }
+        if (isFocused || valid === 'idle') {
+            return null;
+        }
+        return (jsx_runtime_1.jsx(S.IconWrapper, tslib_1.__assign({}, (childrenDataAttrs.validationIcon || {}), { children: jsx_runtime_1.jsx(ValidationIcon_1.default, { valid: valid === 'valid' }, void 0) }), void 0));
+    };
+    Input.prototype.renderLoadingIcon = function () {
+        var isLoading = this.props.isLoading;
+        if (isLoading) {
+            return (jsx_runtime_1.jsx(S.IconWrapper, { children: jsx_runtime_1.jsx(Spinner_1.default, { size: "xs" }, void 0) }, void 0));
+        }
+        return null;
+    };
+    Input.prototype.renderPasswordSwitch = function () {
+        var isPassword = this.state.isPassword;
+        var _a = this
+            .props, type = _a.type, showCaption = _a.showCaption, hideCaption = _a.hideCaption, childrenDataAttrs = _a.childrenDataAttrs;
+        if (type !== types_1.InputType.Password) {
+            return null;
+        }
+        return (jsx_runtime_1.jsx(S.IconWrapper, tslib_1.__assign({}, (childrenDataAttrs.passwordSwitcher || {}), { onClick: this.handlePasswordSwitchClick }, { children: jsx_runtime_1.jsx(S.PasswordSwitcher, { children: isPassword ? showCaption : hideCaption }, void 0) }), void 0));
+    };
+    Input.prototype.render = function () {
+        var _a = this.props, className = _a.className, dataAttrs = _a.dataAttrs, disabled = _a.disabled, isLoading = _a.isLoading, hideBorder = _a.hideBorder, hasClearButton = _a.hasClearButton, inputMode = _a.inputMode, pattern = _a.pattern, type = _a.type, valid = _a.valid, preventPaste = _a.preventPaste, restInputProps = tslib_1.__rest(_a, ["className", "dataAttrs", "disabled", "isLoading", "hideBorder", "hasClearButton", "inputMode", "pattern", "type", "valid", "preventPaste"]);
+        var isNumericKeyboard = inputMode === types_1.InputModeType.Numeric;
+        var inputPattern = isNumericKeyboard
+            ? constants_1.IOS_NUMERIC_KEYBOARD_PATTERN
+            : pattern;
+        return (jsx_runtime_1.jsxs(S.Container, tslib_1.__assign({ className: className, hasClearButton: hasClearButton, isPassword: type === types_1.InputType.Password }, { children: [jsx_runtime_1.jsx(S.InputBase, tslib_1.__assign({}, restInputProps, dataAttrs, { ref: this.createInputRef, disabled: disabled || isLoading, hideBorder: hideBorder, inputMode: inputMode, onBlur: this.handleBlur, onChange: this.handleChange, onFocus: this.handleFocus, onPaste: this.handlePaste, pattern: inputPattern, type: this.getInputType(), valid: valid }), void 0), this.renderClearButton(), this.renderErrorMessage(), this.renderMessage(), this.renderRestrictedMessage(), this.renderValidationIcon(), this.renderLoadingIcon(), this.renderPasswordSwitch()] }), void 0));
+    };
+    Input.defaultProps = {
+        childrenDataAttrs: {},
+        dataAttrs: {},
+        disabled: false,
+        errorMessage: '',
+        hideBorder: false,
+        hasClearButton: false,
+        hideCaption: constants_1.HIDE_CAPTION,
+        isLoading: false,
+        message: '',
+        onBlur: function () { },
+        onChange: function () { },
+        onFocus: function () { },
+        restrictedMessage: '',
+        showCaption: constants_1.SHOW_CAPTION,
+        showValidationIcon: true,
+        type: types_1.InputType.Text,
+        valid: 'idle',
+        value: '',
+        withEllipsis: false,
+    };
+    return Input;
+}(react_1.PureComponent));
+exports.default = Input;
+//# sourceMappingURL=Input.js.map

package/components/Input/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IOS_NUMERIC_KEYBOARD_PATTERN = exports.HIDE_CAPTION = exports.SHOW_CAPTION = exports.CLEAR_ICON_NAME = void 0;
+exports.CLEAR_ICON_NAME = 'close-small';
+exports.SHOW_CAPTION = 'Show';
+exports.HIDE_CAPTION = 'Hide';
+exports.IOS_NUMERIC_KEYBOARD_PATTERN = '[0-9]*';
+//# sourceMappingURL=constants.js.map

package/components/Input/index.js

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

package/components/Input/styled/ClearButton.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 themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var Icon_1 = tslib_1.__importDefault(require("../../Icon"));
+var constants_1 = require("../constants");
+var Circle = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  cursor: pointer;\n  width: 20px;\n  height: 20px;\n  background: ", ";\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  cursor: pointer;\n  width: 20px;\n  height: 20px;\n  background: ", ";\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.SECONDARY_LIGHT;
+});
+var ClearButton = function () { return (jsx_runtime_1.jsx(Circle, { children: jsx_runtime_1.jsx(Icon_1.default, { color: "SECONDARY_DARK", height: 12, name: constants_1.CLEAR_ICON_NAME, width: 12 }, void 0) }, void 0)); };
+exports.default = ClearButton;
+var templateObject_1;
+//# sourceMappingURL=ClearButton.js.map

package/components/Input/styled/Container.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var MessageHelper_1 = tslib_1.__importDefault(require("../../MessageHelper/styled/MessageHelper"));
+var InputBase_1 = tslib_1.__importDefault(require("./InputBase"));
+var IconWrapper_1 = tslib_1.__importDefault(require("./IconWrapper"));
+var Container = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: inline-block;\n  width: 100%;\n  position: relative;\n\n  ", " {\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  ", " {\n    margin-top: -4px;\n  }\n\n  ", " ", ";\n"], ["\n  display: inline-block;\n  width: 100%;\n  position: relative;\n\n  ", " {\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  ", " {\n    margin-top: -4px;\n  }\n\n  ",
+    " ",
+    ";\n"])), InputBase_1.default, MessageHelper_1.default, function (_a) {
+    var hasClearButton = _a.hasClearButton;
+    return hasClearButton &&
+        "\n      position: relative;\n\n      " + InputBase_1.default + " {\n        padding-right: 40px;\n      }\n    ";
+}, function (_a) {
+    var isPassword = _a.isPassword;
+    return isPassword &&
+        "\n      position: relative;\n\n      " + IconWrapper_1.default + " {\n        margin-right: 14px;\n      }\n\n      " + InputBase_1.default + " {\n        padding-right: 58px;\n      }\n    ";
+});
+exports.default = Container;
+var templateObject_1;
+//# sourceMappingURL=Container.js.map

package/components/Input/styled/IconWrapper.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 IconWrapper = themedStyledComponents_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  height: 48px;\n  justify-content: center;\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: 48px;\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  height: 48px;\n  justify-content: center;\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: 48px;\n"])));
+exports.default = IconWrapper;
+var templateObject_1;
+//# sourceMappingURL=IconWrapper.js.map

package/components/Input/styled/InputBase.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var getBorderStyle = function (_a) {
+    var theme = _a.theme, hideBorder = _a.hideBorder, valid = _a.valid;
+    if (hideBorder) {
+        return "\n      border: none;\n    ";
+    }
+    var isInvalid = valid === 'invalid';
+    var _b = theme.borders, br200 = _b.radius.br200, SOLID = _b.style.SOLID, bw200 = _b.width.bw200, _c = theme.colors, ACTIVE = _c.ACTIVE, NEGATIVE_LIGHT = _c.NEGATIVE_LIGHT, SECONDARY = _c.SECONDARY, SECONDARY_LIGHT = _c.SECONDARY_LIGHT;
+    return "\n    border: " + SOLID + " " + bw200 + " " + (isInvalid ? NEGATIVE_LIGHT : SECONDARY) + ";\n    border-radius: " + br200 + ";\n\n    &:focus {\n      border-color: " + (isInvalid ? NEGATIVE_LIGHT : ACTIVE) + ";\n    }\n  \n    &:disabled {\n      border:\n        " + SOLID + " " + bw200 + " " + SECONDARY_LIGHT + ";\n    }\n  ";
+};
+var InputBase = themedStyledComponents_1.default.input(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  appearance: none;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: normal;\n  font-style: normal;\n  font-stretch: normal;\n  height: 48px;\n  line-height: normal;\n  letter-spacing: normal;\n  padding: ", ";\n  box-shadow: none;\n\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n"], ["\n  appearance: none;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: normal;\n  font-style: normal;\n  font-stretch: normal;\n  height: 48px;\n  line-height: normal;\n  letter-spacing: normal;\n  padding: ", ";\n  box-shadow: none;\n\n  ", "\n\n  ",
+    "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    color: ", ";\n  }\n\n  &::placeholder {\n    color: ",
+    ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.CONTENT_BACKGROUND;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.TEXT_DARK;
+}, 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.s400;
+}, getBorderStyle, function (_a) {
+    var withEllipsis = _a.withEllipsis;
+    return withEllipsis &&
+        "\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  ";
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.TEXT_LIGHT;
+}, function (_a) {
+    var theme = _a.theme, valid = _a.valid;
+    return valid === 'invalid' ? theme.colors.NEGATIVE : theme.colors.TEXT_LIGHT;
+});
+exports.default = InputBase;
+var templateObject_1;
+//# sourceMappingURL=InputBase.js.map

package/components/Input/styled/PasswordSwitcher.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var themedStyledComponents_1 = tslib_1.__importDefault(require("../../../utils/themedStyledComponents"));
+var PasswordSwitcher = themedStyledComponents_1.default.span(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  color: ", ";\n  cursor: pointer;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 300;\n  text-decoration: underline;\n  user-select: none;\n"], ["\n  color: ", ";\n  cursor: pointer;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 300;\n  text-decoration: underline;\n  user-select: none;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.ACTIVE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.primary.fontFamily;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.sizes.fs300;
+});
+exports.default = PasswordSwitcher;
+var templateObject_1;
+//# sourceMappingURL=PasswordSwitcher.js.map

package/components/Input/styled/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PasswordSwitcher = exports.InputBase = exports.IconWrapper = exports.Container = exports.ClearButton = void 0;
+var ClearButton_1 = require("./ClearButton");
+Object.defineProperty(exports, "ClearButton", { enumerable: true, get: function () { return __importDefault(ClearButton_1).default; } });
+var Container_1 = require("./Container");
+Object.defineProperty(exports, "Container", { enumerable: true, get: function () { return __importDefault(Container_1).default; } });
+var IconWrapper_1 = require("./IconWrapper");
+Object.defineProperty(exports, "IconWrapper", { enumerable: true, get: function () { return __importDefault(IconWrapper_1).default; } });
+var InputBase_1 = require("./InputBase");
+Object.defineProperty(exports, "InputBase", { enumerable: true, get: function () { return __importDefault(InputBase_1).default; } });
+var PasswordSwitcher_1 = require("./PasswordSwitcher");
+Object.defineProperty(exports, "PasswordSwitcher", { enumerable: true, get: function () { return __importDefault(PasswordSwitcher_1).default; } });
+//# sourceMappingURL=index.js.map

package/components/Input/types.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputType = exports.InputModeType = void 0;
+var InputModeType;
+(function (InputModeType) {
+    InputModeType["Numeric"] = "numeric";
+})(InputModeType = exports.InputModeType || (exports.InputModeType = {}));
+var InputType;
+(function (InputType) {
+    InputType["Date"] = "date";
+    InputType["Password"] = "password";
+    InputType["Text"] = "text";
+    InputType["Number"] = "number";
+    InputType["Tel"] = "tel";
+    InputType["Email"] = "email";
+})(InputType = exports.InputType || (exports.InputType = {}));
+//# sourceMappingURL=types.js.map

package/components/Label/Label.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var S = tslib_1.__importStar(require("./styled"));
+var Label = S.Label;
+exports.default = Label;
+//# sourceMappingURL=Label.js.map

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

package/components/Label/styled/Label.js

@@ -0,0 +1,13 @@
+"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 StyledLabel = themedStyledComponents_1.default.label.withConfig(omitAttrs_1.default('disabled'))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  line-height: 1.25;\n  padding: 0;\n  margin: 0;\n\n  ", "\n"], ["\n  line-height: 1.25;\n  padding: 0;\n  margin: 0;\n\n  ",
+    "\n"])), function (_a) {
+    var _b = _a.theme, _c = _b.fonts, primary = _c.primary, sizes = _c.sizes, colors = _b.colors, spacings = _b.spacings, disabled = _a.disabled;
+    return "\n    font-family: " + primary.fontFamily + ";\n    font-size: " + sizes.fs400 + ";\n    color: " + (disabled ? colors.TEXT_LIGHT : colors.TEXT) + ";\n    font-weight: " + primary.weight.fw400 + ";\n    margin-bottom: " + spacings.s300 + ";\n  ";
+});
+exports.default = StyledLabel;
+var templateObject_1;
+//# sourceMappingURL=Label.js.map

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

package/components/Layout/Layout.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 react_1 = require("react");
+var S = tslib_1.__importStar(require("./styled"));
+var Layout = react_1.forwardRef(function (_a, ref) {
+    var dataAttrs = _a.dataAttrs, props = tslib_1.__rest(_a, ["dataAttrs"]);
+    return (jsx_runtime_1.jsx(S.Layout, tslib_1.__assign({ ref: ref }, dataAttrs, props), void 0));
+});
+exports.default = Layout;
+//# sourceMappingURL=Layout.js.map

package/components/Layout/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.allowedGlobalAspectRatio = exports.REGEX_RATIO_NUMBER = exports.REGEX_RATIO_FRACTION_NUMBERS = exports.DECIMALS_RATIO_DEFAULT = void 0;
+exports.DECIMALS_RATIO_DEFAULT = 2;
+exports.REGEX_RATIO_FRACTION_NUMBERS = /^(?:[1-9]\d*(?:\.\d*)?|0\.\d*[1-9]\d*)(?:e\d+)?(?: *)?\/(?: *)?(?:[1-9]\d*(?:\.\d*)?|0\.\d*[1-9]\d*)(?:\.\d+)?(?:e\d+)?$/i;
+exports.REGEX_RATIO_NUMBER = /^(?:[1-9]\d*(?:\.\d*)?|0\.\d*[1-9]\d*)$/;
+exports.allowedGlobalAspectRatio = [
+    'inherit',
+    'initial',
+    'revert',
+    'unset',
+];
+//# sourceMappingURL=constants.js.map

package/components/Layout/helpers/convertAspectRatio/convertAspectRatio.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var constants_1 = require("../../constants");
+var convertAspectRatio = function (aspectRatio) {
+    if (!aspectRatio) {
+        return undefined;
+    }
+    if (typeof aspectRatio === 'string') {
+        var ratio_1 = aspectRatio.trim();
+        if (constants_1.REGEX_RATIO_FRACTION_NUMBERS.test(ratio_1)) {
+            var _a = tslib_1.__read(ratio_1.split('/'), 2), aspectWidthStr = _a[0], aspectHeightStr = _a[1];
+            var aspectHeight = Number(aspectHeightStr);
+            var aspectWidth = Number(aspectWidthStr);
+            return ((aspectHeight / aspectWidth) * 100).toFixed(constants_1.DECIMALS_RATIO_DEFAULT) + "%";
+        }
+        if (constants_1.REGEX_RATIO_NUMBER.test(ratio_1)) {
+            return ((1 / Number(ratio_1)) * 100).toFixed(constants_1.DECIMALS_RATIO_DEFAULT) + "%";
+        }
+        return constants_1.allowedGlobalAspectRatio.some(function (r) { return r === ratio_1; }) ? ratio_1 : undefined;
+    }
+    return ((1 / aspectRatio) * 100).toFixed(constants_1.DECIMALS_RATIO_DEFAULT) + "%";
+};
+exports.default = convertAspectRatio;
+//# sourceMappingURL=convertAspectRatio.js.map

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

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