@invoicebox/ui 0.1.0-alpha.314 → 0.1.0-alpha.316

package/dist/esm/components/form/Checkbox/index.js

@@ -0,0 +1,38 @@
+var _excluded = ["disabled", "className", "checked", "disabledText", "label"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+import React, { useMemo } from 'react';
+import { Typography } from '../../common/Typography';
+import { Tooltip } from '../../common/Tooltip';
+import { useComponentPalette } from '../../../palette';
+import * as S from './styles';
+export var Checkbox = function Checkbox(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    className = _ref.className,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    disabledText = _ref.disabledText,
+    label = _ref.label,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var palette = useComponentPalette('checkbox');
+  var content = useMemo(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.HiddenCheckbox, _extends({
+      type: "checkbox",
+      disabled: disabled,
+      checked: checked
+    }, props)), /*#__PURE__*/React.createElement(S.StyledCheckbox, null, /*#__PURE__*/React.createElement(S.CheckboxIcon, null)));
+  }, [checked, disabled, props]);
+  return /*#__PURE__*/React.createElement(S.CheckboxLabel, {
+    $checked: checked,
+    $disabled: disabled,
+    $palette: palette,
+    className: className
+  }, /*#__PURE__*/React.createElement(S.CheckboxContainer, null, disabled && disabledText ? /*#__PURE__*/React.createElement(Tooltip, {
+    overlay: disabledText
+  }, content) : content), label && /*#__PURE__*/React.createElement(Typography, {
+    variant: "bodyMRegular"
+  }, label));
+};
+export default /*#__PURE__*/React.memo(Checkbox);

package/dist/esm/components/form/Checkbox/index.stories.js

@@ -0,0 +1,60 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useState } from 'react';
+import { Checkbox } from '.';
+var meta = {
+  title: 'form/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs']
+};
+export default meta;
+var Component = function Component(props) {
+  var _useState = useState(props.checked),
+    _useState2 = _slicedToArray(_useState, 2),
+    checked = _useState2[0],
+    setChecked = _useState2[1];
+  return /*#__PURE__*/React.createElement(Checkbox, _extends({}, props, {
+    checked: checked,
+    onChange: function onChange() {
+      return setChecked(function (prev) {
+        return !prev;
+      });
+    }
+  }));
+};
+export var Default = {
+  args: {
+    checked: false,
+    label: 'Label'
+  },
+  render: Component
+};
+export var Checked = {
+  args: {
+    checked: true,
+    label: 'Label'
+  },
+  render: Component
+};
+export var Disabled = {
+  args: {
+    checked: false,
+    disabled: true,
+    label: 'Label',
+    disabledText: 'Недоступно'
+  },
+  render: Component
+};
+export var DisabledChecked = {
+  args: {
+    checked: true,
+    disabled: true,
+    label: 'Label'
+  },
+  render: Component
+};

package/dist/esm/components/form/Checkbox/palette.js

@@ -0,0 +1,13 @@
+import hexToRgba from '../../../utils/hexToRgba';
+export var generateCheckboxPalette = function generateCheckboxPalette(abstractPalette) {
+  return {
+    labelColor: abstractPalette.primary,
+    mark: abstractPalette.base,
+    borderDefault: hexToRgba(abstractPalette.primary, 0.3),
+    borderHover: hexToRgba(abstractPalette.primary, 0.5),
+    checkedBg: abstractPalette.secondary,
+    checkedHoverBg: '#EDC743',
+    disabledBg: hexToRgba(abstractPalette.neutralBrutal, 0.3),
+    disabledBorder: hexToRgba(abstractPalette.neutralBrutal, 0.3)
+  };
+};

package/dist/esm/components/form/Checkbox/styles.js

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+import { CheckIcon } from './CheckIcon';
+var TRANSITION = 'all .2s ease-in-out';
+var BORDER_RADIUS_MIN = 4;
+export var CheckboxContainer = styled.div.withConfig({
+  displayName: "styles__CheckboxContainer",
+  componentId: "sc-11prdl0-0"
+})(["display:inline-block;vertical-align:middle;"]);
+export var HiddenCheckbox = styled.input.withConfig({
+  displayName: "styles__HiddenCheckbox",
+  componentId: "sc-11prdl0-1"
+})(["display:none;"]);
+export var CheckboxIcon = styled(CheckIcon).withConfig({
+  displayName: "styles__CheckboxIcon",
+  componentId: "sc-11prdl0-2"
+})(["transition:", ";"], TRANSITION);
+export var StyledCheckbox = styled.div.withConfig({
+  displayName: "styles__StyledCheckbox",
+  componentId: "sc-11prdl0-3"
+})(["display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:", "px;transition:", ";"], BORDER_RADIUS_MIN, TRANSITION);
+var getStylesCheckbox = function getStylesCheckbox(palette, disabled, checked) {
+  if (disabled) {
+    if (checked) {
+      return "background-color: ".concat(palette.disabledBg, "; border: none");
+    }
+    return "border: 1px solid ".concat(palette.disabledBorder);
+  }
+  if (checked) {
+    return "background-color: ".concat(palette.checkedBg, "; border: none");
+  }
+  return "border: 1px solid ".concat(palette.borderDefault);
+};
+var getHoverStylesCheckbox = function getHoverStylesCheckbox(palette, disabled, checked) {
+  if (disabled) {
+    if (checked) {
+      return "background-color: ".concat(palette.disabledBg, "; border: none");
+    }
+    return "border: 1px solid ".concat(palette.disabledBg);
+  }
+  if (checked) {
+    return "background-color: ".concat(palette.checkedHoverBg, "; border: none");
+  }
+  return "border: 1px solid ".concat(palette.borderHover);
+};
+export var CheckboxLabel = styled.label.withConfig({
+  displayName: "styles__CheckboxLabel",
+  componentId: "sc-11prdl0-4"
+})(["display:flex;align-items:center;grid-column-gap:10px;user-select:none;width:fit-content;cursor:pointer;color:", ";", "{", ";", "{opacity:", ";}}&:hover{", "{", ";}}"], function (_ref) {
+  var $palette = _ref.$palette;
+  return $palette.labelColor;
+}, StyledCheckbox, function (_ref2) {
+  var $checked = _ref2.$checked,
+    $disabled = _ref2.$disabled,
+    $palette = _ref2.$palette;
+  return getStylesCheckbox($palette, $disabled, $checked);
+}, CheckboxIcon, function (_ref3) {
+  var $checked = _ref3.$checked;
+  return $checked ? 1 : 0;
+}, StyledCheckbox, function (_ref4) {
+  var $checked = _ref4.$checked,
+    $disabled = _ref4.$disabled,
+    $palette = _ref4.$palette;
+  return getHoverStylesCheckbox($palette, $disabled, $checked);
+});

package/dist/esm/components/form/CurrencyInput/CoreCurrencyInput/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useId } from 'react';
 import { InputLabel } from '../../InputLabel';
 import { useInputFocus } from '../../../../hooks/useInputFocus';
 import { StyledCurrencyInputFromLibrary, InputWrapper } from './styles';
@@ -21,7 +21,8 @@ export var CoreCurrencyInput = function CoreCurrencyInput(_ref) {
     required = _ref$required === void 0 ? false : _ref$required,
     onBlur = _ref.onBlur,
     _ref$useModernStyles = _ref.useModernStyles,
-    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
+    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    id = _ref.id;
   var _useInputFocus = useInputFocus({
       onBlur: onBlur
     }),
@@ -29,6 +30,8 @@ export var CoreCurrencyInput = function CoreCurrencyInput(_ref) {
     handleFocus = _useInputFocus.handleFocus,
     handleBlur = _useInputFocus.handleBlur;
   var palette = useComponentPalette('pureInput');
+  var fallbackId = useId();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var _useInputStyles = useInputStyles({
       isHaveValue: !!value || typeof defaultValue === 'number',
       useModernStyles: useModernStyles,
@@ -48,8 +51,11 @@ export var CoreCurrencyInput = function CoreCurrencyInput(_ref) {
     disabled: disabled,
     required: required,
     useModernStyles: useModernStyles,
-    size: fieldSize
+    size: fieldSize,
+    htmlFor: inputId
   }, /*#__PURE__*/React.createElement(InputWrapper, null, modernPlaceholder, /*#__PURE__*/React.createElement(StyledCurrencyInputFromLibrary, {
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     $palette: palette,
     $hasBorder: !useModernStyles || hasError,
     $paddingLeft: 18,

package/dist/esm/components/form/DateInput/index.js

@@ -5,7 +5,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
 import * as S from './styles';
 import { logic } from './logic';
 import { useOutsideClick } from '../../../hooks/useOutsideClick';
@@ -36,9 +36,12 @@ export var DateInput = function DateInput(_ref) {
     _ref$useModernStyles = _ref.useModernStyles,
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
     _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required;
+    required = _ref$required === void 0 ? false : _ref$required,
+    id = _ref.id;
   var palette = useComponentPalette('dateInput');
   var inputRef = useRef(null);
+  var fallbackId = useId();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var isMobile = useMobile();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -115,8 +118,11 @@ export var DateInput = function DateInput(_ref) {
     label: inputLabel,
     useModernStyles: useModernStyles,
     size: fieldSize,
-    required: required
+    required: required,
+    htmlFor: inputId
   }, /*#__PURE__*/React.createElement(S.InputWrapper, null, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     onClick: handleTrigger,
     ref: inputRef,
     hasError: hasError,

package/dist/esm/components/form/DateTimeInput/index.js

@@ -5,7 +5,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useId, useRef, useState } from 'react';
 import { useComponentPalette } from '../../../palette';
 import { useOutsideClick } from '../../../hooks/useOutsideClick';
 import { useInputFocus } from '../../../hooks/useInputFocus';
@@ -40,9 +40,12 @@ export var DateTimeInput = function DateTimeInput(_ref) {
     _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
     _ref$useModernStyles = _ref.useModernStyles,
-    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
+    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    id = _ref.id;
   var palette = useComponentPalette('dateTimeInput');
   var inputRef = useRef(null);
+  var fallbackId = useId();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var isMobile = useMobile();
   var withTime = true;
   var _useState = useState(false),
@@ -142,8 +145,11 @@ export var DateTimeInput = function DateTimeInput(_ref) {
     label: inputLabel,
     required: required,
     useModernStyles: useModernStyles,
-    size: fieldSize
+    size: fieldSize,
+    htmlFor: inputId
   }, /*#__PURE__*/React.createElement(S.InputWrapper, null, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     onClick: handleTrigger,
     ref: inputRef,
     hasError: hasError,

package/dist/esm/components/form/InputLabel/index.js

@@ -15,7 +15,8 @@ export var InputLabel = function InputLabel(_ref) {
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'M' : _ref$size,
-    left = _ref.left;
+    left = _ref.left,
+    htmlFor = _ref.htmlFor;
   var palette = useComponentPalette('inputLabel');
   return /*#__PURE__*/React.createElement(S.Wrapper, {
     $palette: palette,
@@ -25,6 +26,8 @@ export var InputLabel = function InputLabel(_ref) {
     $marginTop: useModernStyles && MODERN_STYLE_SIZE_PARAMS_MAP[size].$labelPaddingTop < 0 && !!label ? -MODERN_STYLE_SIZE_PARAMS_MAP[size].$labelPaddingTop : undefined,
     $paddingTop: useModernStyles ? 0 : 10
   }, label && /*#__PURE__*/React.createElement(S.Label, {
+    element: "label",
+    htmlFor: htmlFor,
     $palette: palette,
     $inFocus: inFocus,
     variant: size && useModernStyles ? MODERN_STYLE_SIZE_PARAMS_MAP[size].$labelVariant : 'captionRegular',

package/dist/esm/components/form/PhoneInput/index.js

@@ -5,7 +5,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import React, { useCallback, useMemo, useState, useRef } from 'react';
+import React, { useCallback, useMemo, useState, useRef, useId } from 'react';
 import InputMask from '@mona-health/react-input-mask';
 import * as S from './styles';
 import { PhoneInputLogic } from './phoneInputLogic';
@@ -45,6 +45,8 @@ export var PhoneInput = function PhoneInput(_ref) {
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
   var inputRef = useRef();
   var isMobile = useMobile();
+  var fallbackId = useId();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var phoneInputLogic = useMemo(function () {
     return new PhoneInputLogic(isSupportCityRusPhoneNumber);
   }, [isSupportCityRusPhoneNumber]);
@@ -182,7 +184,8 @@ export var PhoneInput = function PhoneInput(_ref) {
     required: required,
     useModernStyles: useModernStyles,
     size: fieldSize,
-    left: isHaveSelectCountries && useModernStyles ? 65 : undefined
+    left: isHaveSelectCountries && useModernStyles ? 65 : undefined,
+    htmlFor: inputId
   }, /*#__PURE__*/React.createElement(S.InputLabelContent, null, useModernStyles && /*#__PURE__*/React.createElement(ModernPlaceholder, {
     visible: !isHideModernPlaceholder,
     paddingLeft: isHaveSelectCountries ? 75 : 18,
@@ -212,7 +215,8 @@ export var PhoneInput = function PhoneInput(_ref) {
     placeholder: inputPlaceholder,
     ref: inputRef
   }, /*#__PURE__*/React.createElement(PureInput, _extends({
-    id: id,
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     hasError: hasPureInputError,
     inFocus: inFocus,
     name: name,

package/dist/esm/components/form/PositiveIntegerInput/index.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback } from 'react';
+import React, { useCallback, useId } from 'react';
 import * as S from './styles';
 import { useInputFocus } from '../../../hooks/useInputFocus';
 import { InputLabel } from '../InputLabel';
@@ -25,7 +25,8 @@ export var PositiveIntegerInput = function PositiveIntegerInput(_ref) {
     name = _ref.name,
     size = _ref.size,
     _ref$useModernStyles = _ref.useModernStyles,
-    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
+    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    id = _ref.id;
   var _useInputFocus = useInputFocus({
       onFocus: onFocus,
       onBlur: onBlur
@@ -33,6 +34,8 @@ export var PositiveIntegerInput = function PositiveIntegerInput(_ref) {
     inFocus = _useInputFocus.inFocus,
     handleFocus = _useInputFocus.handleFocus,
     handleBlur = _useInputFocus.handleBlur;
+  var fallbackId = useId();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var _useInputStyles = useInputStyles({
       isHaveValue: typeof value === 'number',
       useModernStyles: useModernStyles,
@@ -77,8 +80,11 @@ export var PositiveIntegerInput = function PositiveIntegerInput(_ref) {
     inFocus: inFocus,
     label: inputLabel,
     useModernStyles: useModernStyles,
-    size: fieldSize
+    size: fieldSize,
+    htmlFor: inputId
   }, /*#__PURE__*/React.createElement(S.ControlWrapper, null, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     name: name,
     hasError: hasError,
     inFocus: inFocus,

package/dist/esm/components/form/PureInput/index.js

@@ -1,8 +1,8 @@
-var _excluded = ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "borderRadius", "hasError", "inFocus", "hasBorder", "isOnlyNumbers", "className", "onChange", "element", "variant", "renderedValue", "useModernStyles"];
+var _excluded = ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "borderRadius", "hasError", "inFocus", "hasBorder", "isOnlyNumbers", "className", "onChange", "element", "variant", "renderedValue", "useModernStyles", "id"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
-import React, { useCallback } from 'react';
+import React, { useCallback, useId } from 'react';
 import * as S from './styles';
 import { useComponentPalette } from '../../../palette';
 export var PureInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -33,8 +33,10 @@ export var PureInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     renderedValue = _ref.renderedValue,
     _ref$useModernStyles = _ref.useModernStyles,
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    id = _ref.id,
     rest = _objectWithoutProperties(_ref, _excluded);
   var palette = useComponentPalette('pureInput');
+  var fallbackId = useId();
   var handleChange = useCallback(function (event) {
     var inputValue = event.target.value;
     event.target.value = isOnlyNumbers ? inputValue.replace(/[^0-9]/g, '') : inputValue;
@@ -56,7 +58,8 @@ export var PureInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     $palette: palette,
     $borderRadius: borderRadius,
     onChange: handleChange,
-    $useModernStyles: useModernStyles
+    $useModernStyles: useModernStyles,
+    id: id !== null && id !== void 0 ? id : fallbackId
   }, rest), renderedValue);
 });
 PureInput.displayName = 'PureInput';

package/dist/esm/components/form/SearchInput/index.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, forwardRef } from 'react';
+import React, { useCallback, forwardRef, useId } from 'react';
 import * as S from './styles';
 import { InputLabel } from '../InputLabel';
 import { PureInput } from '../PureInput';
@@ -21,7 +21,8 @@ export var SearchInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     maxLength = _ref.maxLength,
     size = _ref.size,
     _ref$useModernStyles = _ref.useModernStyles,
-    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
+    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    id = _ref.id;
   var _useInputFocus = useInputFocus({
       onFocus: onFocus,
       onBlur: onBlur
@@ -29,6 +30,8 @@ export var SearchInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     inFocus = _useInputFocus.inFocus,
     handleFocus = _useInputFocus.handleFocus,
     handleBlur = _useInputFocus.handleBlur;
+  var fallbackId = useId();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var palette = useComponentPalette('searchInput');
   var _useInputStyles = useInputStyles({
       isHaveValue: !!value,
@@ -52,9 +55,12 @@ export var SearchInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement(InputLabel, {
     useModernStyles: useModernStyles,
     size: fieldSize,
-    label: useModernStyles ? inputLabel : undefined
+    label: useModernStyles ? inputLabel : undefined,
+    htmlFor: inputId
   }, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
     ref: ref,
+    id: inputId,
+    "aria-label": useModernStyles && inputLabel ? undefined : placeholder,
     paddingRight: 56,
     hasBorder: hasBorder,
     onChange: handleInputChange,

package/dist/esm/components/form/Select/components/Input/index.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useId } from 'react';
 import * as S from './styles';
 import { InputLabel } from '../../../InputLabel';
 import { PureInput } from '../../../PureInput';
@@ -23,7 +23,10 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClick = _ref.onClick,
     required = _ref.required,
     _ref$useModernStyles = _ref.useModernStyles,
-    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
+    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    id = _ref.id;
+  var fallbackId = useId();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var _useInputStyles = useInputStyles({
       isHaveValue: !!value,
       useModernStyles: useModernStyles,
@@ -44,8 +47,11 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     label: inputLabel,
     required: required,
     useModernStyles: useModernStyles,
-    size: fieldSize
+    size: fieldSize,
+    htmlFor: inputId
   }, /*#__PURE__*/React.createElement(S.ControlWrapper, null, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     ref: ref,
     hasError: hasError,
     inFocus: inFocus,

package/dist/esm/components/form/Select/components/MultipleValue/index.js

@@ -0,0 +1,120 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import * as S from './styles';
+import { useComponentPalette } from '../../../../../palette';
+import { Chip } from '../../../../common/Chip';
+var CHIP_SIZE = 'xs';
+export var MultipleValue = function MultipleValue(_ref) {
+  var _chipProps$color, _chipProps$bgColor, _chipProps$size;
+  var selectedOptions = _ref.selectedOptions,
+    onRemove = _ref.onRemove,
+    _ref$collapse = _ref.collapse,
+    collapse = _ref$collapse === void 0 ? false : _ref$collapse,
+    chipProps = _ref.chipProps;
+  var palette = useComponentPalette('select');
+  var chipColor = (_chipProps$color = chipProps === null || chipProps === void 0 ? void 0 : chipProps.color) !== null && _chipProps$color !== void 0 ? _chipProps$color : palette.tagColor;
+  var chipBgColor = (_chipProps$bgColor = chipProps === null || chipProps === void 0 ? void 0 : chipProps.bgColor) !== null && _chipProps$bgColor !== void 0 ? _chipProps$bgColor : palette.tagBg;
+  var chipSize = (_chipProps$size = chipProps === null || chipProps === void 0 ? void 0 : chipProps.size) !== null && _chipProps$size !== void 0 ? _chipProps$size : CHIP_SIZE;
+  var wrapperRef = useRef(null);
+  var tagRefs = useRef([]);
+  var counterRef = useRef(null);
+  var _useState = useState(selectedOptions.length),
+    _useState2 = _slicedToArray(_useState, 2),
+    visibleCount = _useState2[0],
+    setVisibleCount = _useState2[1];
+  var handleRemove = useCallback(function (event, value) {
+    event.preventDefault();
+    event.stopPropagation();
+    onRemove(value);
+  }, [onRemove]);
+  useLayoutEffect(function () {
+    if (!collapse) {
+      setVisibleCount(selectedOptions.length);
+      return undefined;
+    }
+    var wrapper = wrapperRef.current;
+    if (!wrapper) return undefined;
+    var recalculate = function recalculate() {
+      var _counterRef$current;
+      var total = selectedOptions.length;
+      var containerWidth = wrapper.clientWidth;
+      var widths = tagRefs.current.slice(0, total).map(function (el) {
+        return (el === null || el === void 0 ? void 0 : el.offsetWidth) || 0;
+      });
+      var counterWidth = ((_counterRef$current = counterRef.current) === null || _counterRef$current === void 0 ? void 0 : _counterRef$current.offsetWidth) || 0;
+      var countFitting = function countFitting(reserve) {
+        var used = 0;
+        var count = 0;
+        for (var i = 0; i < total; i += 1) {
+          var width = widths[i] + (count > 0 ? S.TAGS_GAP : 0);
+          if (used + width <= containerWidth - reserve) {
+            used += width;
+            count += 1;
+          } else {
+            break;
+          }
+        }
+        return count;
+      };
+      var count = countFitting(0);
+      // если влезли не все теги, оставляем место под счётчик "+N"
+      if (count < total) {
+        count = Math.max(countFitting(counterWidth + S.TAGS_GAP), 1);
+      }
+      setVisibleCount(count);
+    };
+    recalculate();
+    var observer = new ResizeObserver(recalculate);
+    observer.observe(wrapper);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [collapse, selectedOptions]);
+  var safeVisibleCount = collapse ? visibleCount : selectedOptions.length;
+  var hiddenCount = selectedOptions.length - safeVisibleCount;
+  var hiddenStyle = {
+    position: 'absolute',
+    visibility: 'hidden',
+    pointerEvents: 'none'
+  };
+  return /*#__PURE__*/React.createElement(S.Wrapper, {
+    ref: wrapperRef,
+    $collapse: collapse
+  }, selectedOptions.map(function (option, index) {
+    return /*#__PURE__*/React.createElement(S.ItemWrapper, {
+      key: option.value,
+      ref: function ref(el) {
+        tagRefs.current[index] = el;
+      },
+      style: collapse && index >= safeVisibleCount ? hiddenStyle : undefined
+    }, /*#__PURE__*/React.createElement(Chip, {
+      size: chipSize,
+      color: chipColor,
+      bgColor: chipBgColor,
+      label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.TagLabel, {
+        variant: "smallMedium"
+      }, option.label), /*#__PURE__*/React.createElement(S.TagRemove, {
+        type: "button",
+        onMouseDown: function onMouseDown(event) {
+          return event.preventDefault();
+        },
+        onClick: function onClick(event) {
+          return handleRemove(event, option.value);
+        }
+      }, "\xD7"))
+    }));
+  }), collapse && /*#__PURE__*/React.createElement(S.ItemWrapper, {
+    ref: counterRef,
+    style: hiddenCount > 0 ? undefined : hiddenStyle
+  }, /*#__PURE__*/React.createElement(Chip, {
+    size: chipSize,
+    color: chipColor,
+    bgColor: chipBgColor,
+    label: "+".concat(hiddenCount)
+  })));
+};

package/dist/esm/components/form/Select/components/MultipleValue/styles.js

@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components';
+import { Typography } from '../../../../common/Typography';
+export var TAGS_GAP = 6;
+export var Wrapper = styled.div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-gzjw07-0"
+})(["display:flex;align-items:center;gap:", "px;width:100%;min-width:0;", ""], TAGS_GAP, function (_ref) {
+  var $collapse = _ref.$collapse;
+  return $collapse ? css(["flex-wrap:nowrap;overflow:hidden;"]) : css(["flex-wrap:wrap;"]);
+});
+export var ItemWrapper = styled.div.withConfig({
+  displayName: "styles__ItemWrapper",
+  componentId: "sc-gzjw07-1"
+})(["display:inline-flex;flex:0 0 auto;max-width:100%;"]);
+export var TagLabel = styled(Typography).withConfig({
+  displayName: "styles__TagLabel",
+  componentId: "sc-gzjw07-2"
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+export var TagRemove = styled.button.withConfig({
+  displayName: "styles__TagRemove",
+  componentId: "sc-gzjw07-3"
+})(["display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:14px;height:14px;padding:0;border:none;background:none;color:inherit;font-size:16px;line-height:1;cursor:pointer;"]);