@homecode/ui 4.11.1

package/dist/esm/src/components/Icon/icons/send.svg.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgSend = function SvgSend(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 48 48",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    "data-name": "Path 8370",
+    d: "M44.697 20.016 6.703 4.25A4.547 4.547 0 0 0 .555 9.575l3.382 13.261h16.557a1.38 1.38 0 0 1 0 2.76H3.937L.555 38.855a4.547 4.547 0 0 0 6.148 5.325l37.994-15.765a4.547 4.547 0 0 0 0-8.4z"
+  })));
+};
+
+export { SvgSend as default };

package/dist/esm/src/components/Icon/icons/settings.svg.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+var _path, _path2, _path3, _path4, _path5, _path6;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgSettings = function SvgSettings(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M18.38 3.255h-1.92m-14.83 0h11.08",
+    stroke: "currentColor",
+    strokeWidth: 1.25,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    clipRule: "evenodd",
+    d: "M13.96 16.755a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0z",
+    stroke: "currentColor",
+    strokeWidth: 1.25,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
+    d: "M1.63 10.002h3.58m13.17 0H8.96",
+    stroke: "currentColor",
+    strokeWidth: 1.25,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })), _path4 || (_path4 = /*#__PURE__*/React.createElement("path", {
+    clipRule: "evenodd",
+    d: "M8.96 10a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0z",
+    stroke: "currentColor",
+    strokeWidth: 1.25,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })), _path5 || (_path5 = /*#__PURE__*/React.createElement("path", {
+    d: "M1.63 16.75h8.58m8.17 0h-4.42",
+    stroke: "currentColor",
+    strokeWidth: 1.25,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })), _path6 || (_path6 = /*#__PURE__*/React.createElement("path", {
+    clipRule: "evenodd",
+    d: "M16.46 3.255a1.875 1.875 0 1 0-3.75 0 1.875 1.875 0 0 0 3.75 0z",
+    stroke: "currentColor",
+    strokeWidth: 1.25,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+};
+
+export { SvgSettings as default };

package/dist/esm/src/components/Icon/icons/shoppingBag.svg.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+var _path, _path2;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgShoppingBag = function SvgShoppingBag(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 512 512",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M109.378 8.35c-45.305 8.237-80.035 43.301-87.16 87.938-.556 3.673-3.561 73.801-6.678 155.84-6.122 162.074-6.122 159.736-.445 177.88 5.454 17.143 13.691 30.723 26.493 43.636 13.357 13.469 30.5 23.376 49.646 28.608l9.462 2.56h156.396c149.495 0 156.73-.112 164.078-2.115 19.48-5.232 35.843-14.916 49.757-29.276 18.144-18.7 28.274-39.85 30.5-63.338.89-9.128-10.13-304.11-11.688-314.018-6.122-38.292-33.617-70.796-70.684-83.485-17.588-6.011-15.362-5.9-164.078-5.789-107.752.112-139.365.446-145.599 1.559zm298.545 37.179c10.241 3.45 14.248 5.454 22.486 11.799 13.914 10.352 23.487 27.495 25.936 46.307 1.224 9.35 11.131 269.715 11.131 290.976 0 13.135-2.003 22.262-7.124 33.171-7.346 15.807-19.034 28.051-33.728 35.287-13.914 6.901-8.015 6.679-169.31 6.679-158.733 0-154.392.111-167.973-5.677-21.928-9.35-38.737-30.834-42.522-54.433-1.67-10.352 9.128-301.996 11.577-312.57 5.01-21.484 21.15-40.52 41.632-49.09 13.469-5.677 9.795-5.566 159.847-5.343l140.256.222z"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    d: "M140.435 80.147c-8.905 4.008-10.909 13.915-7.458 35.621 8.682 53.431 49.535 94.283 102.966 102.966 25.045 4.007 54.098-.334 75.916-11.243 35.843-17.922 61.112-52.874 67.122-92.502 3.34-21.818 1.336-30.834-7.458-34.842-6.01-2.782-11.354-2.782-17.365 0-6.233 2.783-8.682 8.238-9.573 21.707-2.56 38.18-27.717 69.237-64.896 79.812-11.465 3.34-34.841 3.562-45.973.445-38.07-10.463-63.783-41.631-66.343-80.257-.89-13.47-3.34-18.924-9.573-21.707-6.011-2.782-11.354-2.782-17.365 0z"
+  })));
+};
+
+export { SvgShoppingBag as default };

package/dist/esm/src/components/Icon/icons/social_email.svg.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgSocialEmail = function SvgSocialEmail(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M1.94 21.48c-.474 0-.89-.178-1.248-.535-.355-.357-.535-.773-.535-1.249V4.24c0-.475.179-.891.535-1.249.357-.355.774-.534 1.249-.534h20.213c.475 0 .891.178 1.249.535.355.357.535.773.535 1.249v15.457c0 .475-.18.891-.535 1.249-.358.355-.774.534-1.25.534zm10.107-8.383L2.535 7.063V19.1H21.56V7.064zm0-2.378 9.393-5.886H2.684zM2.535 7.063V4.834v14.267z"
+  })));
+};
+
+export { SvgSocialEmail as default };

package/dist/esm/src/components/Icon/icons/social_instagram.svg.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgSocialInstagram = function SvgSocialInstagram(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"
+  })));
+};
+
+export { SvgSocialInstagram as default };

package/dist/esm/src/components/Icon/icons/social_telegram.svg.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgSocialTelegram = function SvgSocialTelegram(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    strokeLinejoin: "round",
+    strokeMiterlimit: 1.414,
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M18.384 21.78a1.19 1.19 0 0 0 1.107.144 1.16 1.16 0 0 0 .724-.84c.87-4.084 2.977-14.42 3.768-18.136a.78.78 0 0 0-.26-.758.8.8 0 0 0-.797-.14C18.733 3.602 5.82 8.447.542 10.4a.827.827 0 0 0-.542.8c.012.353.25.66.593.763 2.367.708 5.474 1.693 5.474 1.693s1.452 4.385 2.21 6.615c.094.28.313.5.602.576a.866.866 0 0 0 .811-.207l3.096-2.923s3.572 2.62 5.598 4.062zm-11.01-8.678 1.68 5.538.372-3.507 10.185-9.186a.277.277 0 0 0 .033-.377.284.284 0 0 0-.376-.064z"
+  })));
+};
+
+export { SvgSocialTelegram as default };

package/dist/esm/src/components/Icon/icons/undo.svg.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgUndo = function SvgUndo(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 96 48 48",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M10.79 139.824v-4.025h19.385q4.695 0 8.083-3.119 3.387-3.119 3.387-7.747t-3.387-7.747q-3.388-3.12-8.083-3.12H10.388l7.647 7.647-2.818 2.818-12.476-12.476 12.476-12.476 2.818 2.817-7.647 7.646h19.72q6.372 0 10.967 4.293 4.594 4.293 4.594 10.598 0 6.305-4.594 10.598-4.595 4.293-10.967 4.293z"
+  })));
+};
+
+export { SvgUndo as default };

package/dist/esm/src/components/Input/Input.js

@@ -0,0 +1,331 @@
+import { Component, createRef, createElement } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { createStore } from 'justorm/react';
+import omit from 'lodash.omit';
+import { Label } from '../Label/Label.js';
+import { RequiredStar } from '../RequiredStar/RequiredStar.js';
+import { AssistiveText } from '../AssistiveText/AssistiveText.js';
+import { Button } from '../Button/Button.js';
+import { Icon } from '../Icon/Icon.js';
+import { Scroll } from '../Scroll/Scroll.js';
+import { capitalize } from '../../tools/string.js';
+import { generateUID } from '../../tools/uid.js';
+import S from './Input.styl.js';
+import '../ButtonGroup/ButtonGroup.styl.js';
+import '../Checkbox/Checkbox.styl.js';
+import '../Container/Container.styl.js';
+import 'moment';
+import 'timen';
+import '../../tools/dom.js';
+import debounce from '../../tools/debounce.js';
+import 'compareq';
+import 'lodash.pick';
+import '../../tools/queryParams.js';
+import '../Draggable/Draggable.styl.js';
+import '../Expand/Expand.styl.js';
+import '../Form/Form.styl.js';
+import '../Form/Validator.js';
+import '../Form/SubmitButtons/SubmitButtons.styl.js';
+import '../Spinner/Spinner.styl.js';
+import '../Gallery/Gallery.styl.js';
+import '../Heading/Heading.js';
+import '../InputFile/InputFile.styl.js';
+import '../InputFile/Item/Item.styl.js';
+import '../Portal/Portal.js';
+import '../Paranja/Paranja.styl.js';
+import '../LightBox/LightBox.styl.js';
+import '../Notifications/Notifications.js';
+import '../Popup/Popup.styl.js';
+import '../PopupMenu/PopupMenu.styl.js';
+import '../Router/Router.js';
+import '../Select/Select.styl.js';
+import '../Table/Table.styl.js';
+import '../Tabs/Tabs.styl.js';
+import '../Text/Text.js';
+import '../Virtualized/Virtualized.styl.js';
+import '../Virtualized/List/List.styl.js';
+import '../Virtualized/List/ListScroll.styl.js';
+import '../../services/i18n.js';
+
+const TEXTAREA_SCROLL_TOP_OFFSET = {
+    s: 30,
+    m: 40,
+    l: 50,
+};
+class Input extends Component {
+    inputRef = createRef();
+    isClearPressed = false;
+    cursorPos = 0;
+    prevLabelText = '';
+    store;
+    uid = generateUID();
+    static defaultProps = {
+        type: 'text',
+        size: 'm',
+        variant: 'default',
+    };
+    constructor(props) {
+        super(props);
+        const inputValue = props.value ?? props.defaultValue ?? '';
+        const hasValue = this.hasValue(inputValue);
+        this.store = createStore(this, {
+            isFocused: false,
+            isLabelOnTop: this.isLabelOnTop(hasValue),
+            inputValue,
+            hasValue,
+            labelClipPath: '',
+            autoComplete: null,
+        });
+    }
+    componentDidMount() {
+        document.addEventListener('keyup', this.onDocKeyUp, true);
+        if (this.isTextArea()) {
+            this.inputRef.current.innerText = this.store.inputValue;
+            document.addEventListener('paste', this.onTextareaPaste, true);
+        }
+    }
+    componentDidUpdate(prevProps) {
+        const { value } = this.props;
+        this.updateSelection();
+        this.updateAutoComplete();
+        if (value !== prevProps.value && value !== this.store.inputValue) {
+            this.store.inputValue = value;
+            // @ts-ignore
+            if (this.isTextArea())
+                this.inputRef.current.innerText = value;
+            this.updateHasValue();
+            this.updateLabelPosition();
+        }
+    }
+    updateAutoComplete() {
+        const form = this.inputRef.current?.closest('form');
+        const val = form?.getAttribute('autocomplete');
+        if (this.store.autoComplete !== val)
+            this.store.autoComplete = val;
+    }
+    updateSelection() {
+        const { type } = this.props;
+        const { isFocused } = this.store;
+        const elem = this.inputRef.current;
+        if (!isFocused || !elem || type !== 'text')
+            return;
+        elem.selectionStart = this.cursorPos;
+        elem.selectionEnd = this.cursorPos;
+    }
+    updateLabelPosition() {
+        this.store.isLabelOnTop = this.isLabelOnTop();
+    }
+    updateHasValue() {
+        this.store.hasValue = this.hasValue();
+    }
+    hasValue(value = this.store.inputValue) {
+        const { type, defaultValue } = this.props;
+        return type === 'number' || Boolean(value || defaultValue);
+    }
+    isTextArea = () => this.props.type === 'textarea';
+    isLabelOnTop(hasValue = this.store?.hasValue) {
+        const { forceLabelOnTop, addonLeft } = this.props;
+        return (forceLabelOnTop || Boolean(addonLeft) || hasValue || this.store?.isFocused);
+    }
+    getValue(val = this.store.inputValue) {
+        const { type } = this.props;
+        if (type === 'number') {
+            if (val)
+                return parseFloat(val);
+            return 0;
+        }
+        if (this.isTextArea())
+            return this.inputRef.current.innerText.replace('/n', '');
+        return val;
+    }
+    onTextareaPaste = e => {
+        if (!this.store.isFocused)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        this.pasteToTextarea(e.clipboardData.getData('text/plain'));
+    };
+    pasteToTextarea = debounce((text) => {
+        console.log('onTextareaPaste');
+        const sel = window.getSelection();
+        const textarea = this.inputRef.current;
+        const prevText = textarea.innerText;
+        // @ts-ignore
+        const startPos = sel.extentOffset;
+        const nextText = prevText.substring(0, startPos) + text + prevText.substring(startPos);
+        textarea.innerText = nextText;
+        sel.setPosition(textarea.firstChild, startPos + text.length);
+    }, 100);
+    onClearPress = e => {
+        const { onChange, onClear } = this.props;
+        this.isTextArea();
+        e.preventDefault();
+        e.stopPropagation();
+        onClear?.();
+        if (this.isTextArea()) {
+            this.inputRef.current.innerText = '';
+        }
+        if (onChange) {
+            this.onChange('');
+        }
+        else {
+            if (!this.isTextArea) {
+                this.inputRef.current.value = '';
+            }
+        }
+        this.inputRef.current?.focus();
+    };
+    onDocKeyUp = (e) => {
+        const { changeOnEnd } = this.props;
+        const { isFocused } = this.store;
+        if (changeOnEnd && e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            this.onTypingEnd();
+        }
+        if (isFocused && e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            this.inputRef.current?.blur();
+        }
+    };
+    handleChange = (e) => {
+        const value = this.getValue(e.target.value);
+        this.onChange(value);
+    };
+    onChange = (value, e) => {
+        const { onChange, changeOnEnd, type } = this.props;
+        const isNumber = type === 'number';
+        if (!isNumber)
+            this.cursorPos = this.inputRef.current.selectionStart;
+        if (changeOnEnd) {
+            this.store.inputValue = value;
+            this.updateHasValue();
+        }
+        else if (onChange) {
+            onChange(e, value);
+        }
+        else {
+            this.store.inputValue = value;
+        }
+    };
+    onTextAreaInput = e => {
+        const { onInput } = this.props;
+        this.store.inputValue = e.target.innerText;
+        this.updateHasValue();
+        this.handleChange(e);
+        onInput?.(e);
+    };
+    onLabelClipPathChange = (clipPath) => (this.store.labelClipPath = clipPath);
+    onTypingEnd = () => {
+        const { onChange } = this.props;
+        onChange?.(null, this.getValue());
+    };
+    onFocus = e => {
+        const { onFocus } = this.props;
+        this.store.isFocused = true;
+        this.updateLabelPosition();
+        onFocus?.(e);
+    };
+    onBlur = e => {
+        if (this.props.changeOnEnd)
+            this.onTypingEnd();
+        if (this.isClearPressed) {
+            e.preventDefault();
+            return;
+        }
+        // @ts-ignore
+        const val = this.getValue(e?.target?.value);
+        const { onBlur, onChange, value, checkAutofill } = this.props;
+        this.store.isFocused = false;
+        this.updateLabelPosition();
+        // some browsers not fire `onchange` after autofill
+        if (checkAutofill && onChange && !value && val)
+            onChange(null, val);
+        if (onBlur)
+            onBlur(e);
+    };
+    getControlProps() {
+        const { value, label, controlProps, placeholder, ...rest } = this.props;
+        const { autoComplete, isLabelOnTop, inputValue } = this.store;
+        const props = {
+            ...omit(rest, [
+                'className',
+                'clear',
+                'onClear',
+                'hasClear',
+                'size',
+                'error',
+                'checkAutofill',
+                'addonLeft',
+                'addonRight',
+                'forceLabelOnTop',
+                'changeOnEnd',
+            ]),
+            value: inputValue,
+            ...controlProps,
+            onChange: this.handleChange,
+            onFocus: this.onFocus,
+            onBlur: this.onBlur,
+        };
+        if (this.isTextArea()) {
+            props.contentEditable = true;
+            props.onInput = this.onTextAreaInput;
+        }
+        if (placeholder && !value && (!label || isLabelOnTop)) {
+            props.placeholder = placeholder;
+        }
+        if (!autoComplete) {
+            props.suppressHydrationWarning = true;
+            props.autoComplete = this.uid;
+            delete props.name;
+        }
+        if (props.value === undefined)
+            props.value = '';
+        return props;
+    }
+    wrapControll(control) {
+        if (this.isTextArea()) {
+            const { size } = this.props;
+            const { labelClipPath } = this.store;
+            return (jsx(Scroll, { y: true, size: size, fadeSize: "s", className: S.scroller, innerProps: {
+                    suppressHydrationWarning: true,
+                    style: { clipPath: labelClipPath },
+                }, offset: {
+                    y: { before: TEXTAREA_SCROLL_TOP_OFFSET[size], after: 20 },
+                }, children: control }, "scroller"));
+        }
+        return control;
+    }
+    renderAddon(type) {
+        const name = `addon${capitalize(type)}`;
+        const content = this.props[name];
+        if (!content)
+            return null;
+        const props = {
+            // @ts-ignore
+            className: cn(S[name], this.props[`${name}ClassName`]),
+            key: name,
+        };
+        const isString = typeof content === 'string';
+        const elem = isString ? jsx("span", { children: content }) : content;
+        // @ts-ignore
+        if (isString)
+            props.title = content;
+        return jsx("div", { ...props, children: elem });
+    }
+    render() {
+        const { className, size, label, value, variant, error, hasClear, required, disabled, } = this.props;
+        const { isFocused, hasValue, labelClipPath, isLabelOnTop } = this.store;
+        const isTextArea = this.isTextArea();
+        const Control = isTextArea ? 'span' : 'input';
+        const controlProps = this.getControlProps();
+        const classes = cn(S.root, isTextArea && S.isTextArea, S[`size-${size}`], S[`variant-${variant}`], isFocused && S.isFocused, error && S.hasError, hasClear && S.hasClear, disabled && S.isDisabled, className);
+        return (
+        // @ts-ignore
+        jsxs("div", { className: classes, title: value, children: [jsxs("label", { className: S.main, children: [jsx("div", { className: S.border, suppressHydrationWarning: true, style: { clipPath: labelClipPath } }, "border"), this.renderAddon('left'), this.wrapControll(createElement(Control, { ...controlProps, className: cn(S.control, controlProps?.className), ref: this.inputRef, key: "control" })), isTextArea && controlProps.placeholder && (jsx("span", { className: S.placeholder, spellCheck: false, children: controlProps.placeholder })), jsx(Label, { className: S.label, size: size, isOnTop: isLabelOnTop, isError: Boolean(error), onClipPathChange: this.onLabelClipPathChange, children: label }, "label"), this.renderAddon('right'), required && jsx(RequiredStar, { size: size }, "required-star")] }, "main"), hasClear && !disabled && hasValue && (jsx(Button, { className: S.clearButton, variant: "clear", size: size, square: true, onClick: this.onClearPress, title: "", children: jsx(Icon, { className: S.clearIcon, size: size, type: "close" }) }, "clear")), !disabled && typeof error === 'string' && (jsx(AssistiveText, { variant: "danger", size: size, children: error }, "assistive-text"))] }));
+    }
+}
+
+export { Input };

package/dist/esm/src/components/Input/Input.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Input_root__kj4vQ{color:var(--accent-color);position:relative}.Input_root__kj4vQ.Input_isTextArea__1a6n1{max-height:10em}.Input_control__wZcMD,.Input_main__M6Qxb,.Input_root__kj4vQ{width:-moz-fit-content;width:fit-content}.Input_controlWrapper__WgrZL,.Input_root__kj4vQ{max-width:100%}.Input_main__M6Qxb{border-radius:inherit;display:flex;max-width:100%;position:relative}.Input_isTextArea__1a6n1 .Input_main__M6Qxb{height:auto!important;max-height:inherit!important}.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_main__M6Qxb{padding-right:2px!important}.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_main__M6Qxb{padding-right:8px!important}.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_main__M6Qxb{padding-right:13px!important}.Input_border__01i-B{background-color:var(--accent-color-alpha-100);border-radius:inherit;bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;transition:.15s ease-out;transition-property:box-shadow,border-color,background-color;z-index:0}.Input_root__kj4vQ:hover .Input_border__01i-B{background-color:var(--active-color-alpha-100)}.Input_variant-default__frNbg .Input_border__01i-B{background-color:var(--accent-color-alpha-100)}.Input_isFocused__9jtFN.Input_variant-default__frNbg .Input_border__01i-B{background-color:var(--active-color-alpha-300)}.Input_variant-outlined__qKjnJ .Input_border__01i-B{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.Input_isFocused__9jtFN.Input_variant-outlined__qKjnJ .Input_border__01i-B{background-color:var(--active-color-alpha-300);box-shadow:inset 0 0 0 2px var(--active-color)}.Input_hasError__5iS2M .Input_variant-outlined__qKjnJ .Input_border__01i-B,.Input_hasError__5iS2M:hover .Input_variant-outlined__qKjnJ .Input_border__01i-B{box-shadow:inset 0 0 0 2px var(--danger-color)}.Input_isDisabled__e7J10.Input_variant-outlined__qKjnJ .Input_border__01i-B{box-shadow:none}.Input_size-s__-U0r-{font-size:12px}.Input_size-s__-U0r- .Input_main__M6Qxb{border-radius:4px;font-size:12px;min-height:30px;min-width:30px;padding:0 10px}.Input_size-m__jTEMl{font-size:16px}.Input_size-m__jTEMl .Input_main__M6Qxb{border-radius:6px;font-size:16px;min-height:40px;min-width:40px;padding:0 12px}.Input_size-l__BR-zg{font-size:20px}.Input_size-l__BR-zg .Input_main__M6Qxb{border-radius:8px;font-size:20px;min-height:50px;min-width:50px;padding:0 14px}.Input_isTextArea__1a6n1 .Input_main__M6Qxb{padding-left:0}.Input_isDisabled__e7J10{color:var(--accent-color-alpha-500);opacity:.4}.Input_addonLeft__i1c70,.Input_addonRight__A9Iht,.Input_control__wZcMD{font-size:inherit;font-weight:400}.Input_labelGap__T6fAj{opacity:0;pointer-events:none;position:absolute}.Input_isTextArea__1a6n1 .Input_label__FT90l{max-height:40px}.Input_scroller__OBm8M{max-height:100%;width:100%}.Input_control__wZcMD{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;box-shadow:none;box-shadow:inset 0 0 0 2px none;color:inherit;display:inline-flex;filter:none;flex-grow:1;min-width:200px;position:relative;text-overflow:ellipsis;transition:border-color .15s ease-in-out 0s;width:100%}.Input_isTextArea__1a6n1 .Input_control__wZcMD{display:block;height:100%;width:100%}.Input_isTextArea__1a6n1 .Input_control__wZcMD:hover{cursor:text}.Input_isTextArea__1a6n1 .Input_control__wZcMD:after{content:\"\";display:block}.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:8px 10px 0}.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:8px}.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:10px 12px 0}.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:10px}.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:12px 14px 0}.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:12px}.Input_control__wZcMD:-internal-autofill-selected,.Input_control__wZcMD:-webkit-autofill{animation-fill-mode:both;animation-name:Input_clearBg__jqI1h}.Input_size-s__-U0r-.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:20px}.Input_size-m__jTEMl.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:24px}.Input_size-l__BR-zg.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:28px}.Input_control__wZcMD::-moz-placeholder{color:var(--accent-color-alpha-500)}.Input_control__wZcMD::placeholder{color:var(--accent-color-alpha-500)}.Input_control__wZcMD::-moz-selection{background-color:var(--active-color-alpha-300)}.Input_control__wZcMD::selection{background-color:var(--active-color-alpha-300)}.Input_placeholder__DRYLA{display:inline-block;left:0;max-width:100%;opacity:.4;overflow:hidden;padding:inherit;pointer-events:none;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap}.Input_addonLeft__i1c70,.Input_addonRight__A9Iht{align-items:center;display:inline-flex;min-width:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.Input_size-s__-U0r- .Input_addonLeft__i1c70,.Input_size-s__-U0r- .Input_addonRight__A9Iht{min-width:calc(var(--indent-s)*1.5)}.Input_size-m__jTEMl .Input_addonLeft__i1c70,.Input_size-m__jTEMl .Input_addonRight__A9Iht{min-width:var(--indent-m)}.Input_size-l__BR-zg .Input_addonLeft__i1c70,.Input_size-l__BR-zg .Input_addonRight__A9Iht{min-width:var(--indent-l)}.Input_addonLeft__i1c70>span,.Input_addonRight__A9Iht>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Input_addonLeft__i1c70{margin-right:12px}.Input_addonRight__A9Iht{margin-left:12px}.Input_requiredStar__6MeQ4{background-color:var(--warning-color);border-radius:50%;height:8px;opacity:.8;pointer-events:none;position:absolute;width:8px}.Input_isDisabled__e7J10 .Input_requiredStar__6MeQ4{display:none}.Input_size-s__-U0r- .Input_requiredStar__6MeQ4{right:4px;top:4px}.Input_size-m__jTEMl .Input_requiredStar__6MeQ4{right:6px;top:6px}.Input_size-l__BR-zg .Input_requiredStar__6MeQ4{right:8px;top:8px}.Input_isDisabled__e7J10{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Input_clearButton__0E-9L{border-bottom-left-radius:0;border-top-left-radius:0;bottom:1px;height:auto;position:absolute;right:0;top:0;z-index:1}.Input_clearButton__0E-9L:hover{background-color:var(--accent-color-alpha-0)!important}.Input_clearIcon__Gi1Nc{flex-shrink:0;opacity:.3;transition:opacity .2s ease-out}.Input_clearButton__0E-9L:hover .Input_clearIcon__Gi1Nc{opacity:.8}.Input_size-s__-U0r- .Input_clearIcon__Gi1Nc{height:10px;width:10px}.Input_size-m__jTEMl .Input_clearIcon__Gi1Nc{height:12px;width:12px}.Input_size-l__BR-zg .Input_clearIcon__Gi1Nc{height:14px;width:14px}.Input_size-xl__o-R-1 .Input_clearIcon__Gi1Nc{height:16px;width:16px}";
+var S = {"root":"Input_root__kj4vQ","isTextArea":"Input_isTextArea__1a6n1","main":"Input_main__M6Qxb","control":"Input_control__wZcMD","controlWrapper":"Input_controlWrapper__WgrZL","size-s":"Input_size-s__-U0r-","size-m":"Input_size-m__jTEMl","size-l":"Input_size-l__BR-zg","border":"Input_border__01i-B","variant-default":"Input_variant-default__frNbg","isFocused":"Input_isFocused__9jtFN","variant-outlined":"Input_variant-outlined__qKjnJ","hasError":"Input_hasError__5iS2M","isDisabled":"Input_isDisabled__e7J10","addonLeft":"Input_addonLeft__i1c70","addonRight":"Input_addonRight__A9Iht","labelGap":"Input_labelGap__T6fAj","label":"Input_label__FT90l","scroller":"Input_scroller__OBm8M","placeholder":"Input_placeholder__DRYLA","clearBg":"Input_clearBg__jqI1h","hasClear":"Input_hasClear__5Y3nU","requiredStar":"Input_requiredStar__6MeQ4","clearButton":"Input_clearButton__0E-9L","clearIcon":"Input_clearIcon__Gi1Nc","size-xl":"Input_size-xl__o-R-1"};
+styleInject(css_248z);
+
+export { S as default };