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

package/dist/components/common/Typography/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ButtonHTMLAttributes, FC, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import React, { ButtonHTMLAttributes, FC, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import { typography } from './typography';
 type TDivProps = {
     element?: 'div';
@@ -15,6 +15,9 @@ type THeadingProps = {
 type TButtonProps = {
     element: 'button';
 } & ButtonHTMLAttributes<HTMLButtonElement>;
+type TLabelProps = {
+    element: 'label';
+} & LabelHTMLAttributes<HTMLLabelElement>;
 type TInputProps = {
     element: 'input';
 } & InputHTMLAttributes<HTMLInputElement>;
@@ -24,7 +27,7 @@ type TTextAreaProps = {
 type TGeneralProps = {
     variant: keyof typeof typography;
 };
-export type TTypographyProps = TGeneralProps & (TDivProps | TParagraphProps | TSpanProps | THeadingProps | TButtonProps | TInputProps | TTextAreaProps);
+export type TTypographyProps = TGeneralProps & (TDivProps | TParagraphProps | TSpanProps | THeadingProps | TButtonProps | TLabelProps | TInputProps | TTextAreaProps);
 export declare const Typography: FC<TTypographyProps>;
 export type TInputWithTypographyProps = TGeneralProps & (TInputProps | TTextAreaProps);
 export declare const InputWithTypography: React.ForwardRefExoticComponent<TInputWithTypographyProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/form/Autocomplete/components/Autocomplete/index.js

@@ -81,6 +81,7 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     setActiveIndex = _useState4[1];
   var baseId = (0, _react.useId)();
   var listboxId = "".concat(baseId, "-listbox");
+  var inputId = "".concat(baseId, "-input");
   var activeOptionRef = (0, _react.useRef)(null);
   var palette = (0, _palette.useComponentPalette)('autocompleteDefaultOption');
   var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
@@ -189,7 +190,8 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     required: required,
     useModernStyles: useModernStyles,
     size: fieldSize,
-    left: useModernStyles && typeof inputPaddingLeft === 'number' ? inputPaddingLeft - _constants2.LABEL_PADDING : undefined
+    left: useModernStyles && typeof inputPaddingLeft === 'number' ? inputPaddingLeft - _constants2.LABEL_PADDING : undefined,
+    htmlFor: inputId
   }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, children ? /*#__PURE__*/_react["default"].createElement(S.ChildrenWrapper, null, children) : null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
     visible: !isHideModernPlaceholder,
     paddingLeft: typeof inputPaddingLeft === 'number' ? inputPaddingLeft : 20,
@@ -197,6 +199,8 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     size: fieldSize,
     required: required
   }, modernInputPlaceholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     ref: ref,
     hasError: hasError,
     inFocus: inFocus,

package/dist/components/form/CurrencyInput/CoreCurrencyInput/index.d.ts

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { TProps as TInputLabelProps } from '../../InputLabel';
 import { TSizes } from '../../constants';
 import { CurrencyInputProps } from 'react-currency-input-field';
-export type TProps = Pick<CurrencyInputProps, 'allowNegativeValue' | 'onValueChange' | 'value' | 'defaultValue' | 'allowDecimals' | 'onBlur'> & Pick<TInputLabelProps, 'label' | 'disabled'> & {
+export type TProps = Pick<CurrencyInputProps, 'allowNegativeValue' | 'onValueChange' | 'value' | 'defaultValue' | 'allowDecimals' | 'onBlur' | 'id'> & Pick<TInputLabelProps, 'label' | 'disabled'> & {
     hasError?: boolean;
     required?: boolean;
 } & {

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

@@ -1,16 +1,18 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CoreCurrencyInput = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _InputLabel = require("../../InputLabel");
 var _useInputFocus2 = require("../../../../hooks/useInputFocus");
 var _styles = require("./styles");
 var _palette = require("../../../../palette");
 var _useInputStyles2 = require("../../_hooks/useInputStyles");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_ref) {
   var label = _ref.label,
     size = _ref.size,
@@ -28,7 +30,8 @@ var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_
     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 = (0, _useInputFocus2.useInputFocus)({
       onBlur: onBlur
     }),
@@ -36,6 +39,8 @@ var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_
     handleFocus = _useInputFocus.handleFocus,
     handleBlur = _useInputFocus.handleBlur;
   var palette = (0, _palette.useComponentPalette)('pureInput');
+  var fallbackId = (0, _react.useId)();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var _useInputStyles = (0, _useInputStyles2.useInputStyles)({
       isHaveValue: !!value || typeof defaultValue === 'number',
       useModernStyles: useModernStyles,
@@ -55,8 +60,11 @@ var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_
     disabled: disabled,
     required: required,
     useModernStyles: useModernStyles,
-    size: fieldSize
+    size: fieldSize,
+    htmlFor: inputId
   }, /*#__PURE__*/_react["default"].createElement(_styles.InputWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_styles.StyledCurrencyInputFromLibrary, {
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     $palette: palette,
     $hasBorder: !useModernStyles || hasError,
     $paddingLeft: 18,

package/dist/components/form/DateInput/index.d.ts

@@ -11,7 +11,7 @@ export type TProps = {
     dropdownProps?: Pick<TDropdownProps, 'isAutoPosition' | 'positionLeft' | 'positionRight' | 'positionVertical'>;
     useModernStyles?: boolean;
     required?: boolean;
-} & Pick<TPureInputProps, 'hasError' | 'name' | 'onBlur' | 'onFocus'> & Pick<TInputLabelProps, 'label'> & Pick<TCalendarProps, 'maxDate' | 'minDate'> & {
+} & Pick<TPureInputProps, 'hasError' | 'name' | 'onBlur' | 'onFocus' | 'id'> & Pick<TInputLabelProps, 'label'> & Pick<TCalendarProps, 'maxDate' | 'minDate'> & {
     size?: TSizes;
 };
 export declare const DateInput: FC<TProps>;

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

@@ -45,9 +45,12 @@ var DateInput = exports.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 = (0, _palette.useComponentPalette)('dateInput');
   var inputRef = (0, _react.useRef)(null);
+  var fallbackId = (0, _react.useId)();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var isMobile = (0, _index.useMobile)();
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -124,8 +127,11 @@ var DateInput = exports.DateInput = function DateInput(_ref) {
     label: inputLabel,
     useModernStyles: useModernStyles,
     size: fieldSize,
-    required: required
+    required: required,
+    htmlFor: inputId
   }, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     onClick: handleTrigger,
     ref: inputRef,
     hasError: hasError,

package/dist/components/form/DateTimeInput/index.d.ts

@@ -13,7 +13,7 @@ export type TProps = {
     cancelLabel?: string;
     required?: boolean;
     useModernStyles?: boolean;
-} & Pick<TPureInputProps, 'hasError' | 'name' | 'onBlur' | 'onFocus'> & Pick<TInputLabelProps, 'label'> & Pick<TCalendarProps, 'maxDate' | 'minDate'> & {
+} & Pick<TPureInputProps, 'hasError' | 'name' | 'onBlur' | 'onFocus' | 'id'> & Pick<TInputLabelProps, 'label'> & Pick<TCalendarProps, 'maxDate' | 'minDate'> & {
     size?: TSizes;
 };
 export declare const DateTimeInput: FC<TProps>;

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

@@ -49,9 +49,12 @@ var DateTimeInput = exports.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 = (0, _palette.useComponentPalette)('dateTimeInput');
   var inputRef = (0, _react.useRef)(null);
+  var fallbackId = (0, _react.useId)();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var isMobile = (0, _index.useMobile)();
   var withTime = true;
   var _useState = (0, _react.useState)(false),
@@ -151,8 +154,11 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
     label: inputLabel,
     required: required,
     useModernStyles: useModernStyles,
-    size: fieldSize
+    size: fieldSize,
+    htmlFor: inputId
   }, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     onClick: handleTrigger,
     ref: inputRef,
     hasError: hasError,

package/dist/components/form/InputLabel/index.d.ts

@@ -9,5 +9,6 @@ export type TProps = {
     useModernStyles?: boolean;
     size?: TSizes;
     left?: number;
+    htmlFor?: string;
 };
 export declare const InputLabel: FC<TProps>;

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

@@ -25,7 +25,8 @@ var InputLabel = exports.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 = (0, _palette.useComponentPalette)('inputLabel');
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
     $palette: palette,
@@ -35,6 +36,8 @@ var InputLabel = exports.InputLabel = function InputLabel(_ref) {
     $marginTop: useModernStyles && _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].$labelPaddingTop < 0 && !!label ? -_constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].$labelPaddingTop : undefined,
     $paddingTop: useModernStyles ? 0 : 10
   }, label && /*#__PURE__*/_react["default"].createElement(S.Label, {
+    element: "label",
+    htmlFor: htmlFor,
     $palette: palette,
     $inFocus: inFocus,
     variant: size && useModernStyles ? _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].$labelVariant : 'captionRegular',

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

@@ -55,6 +55,8 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
   var inputRef = (0, _react.useRef)();
   var isMobile = (0, _useMedia.useMobile)();
+  var fallbackId = (0, _react.useId)();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var phoneInputLogic = (0, _react.useMemo)(function () {
     return new _phoneInputLogic.PhoneInputLogic(isSupportCityRusPhoneNumber);
   }, [isSupportCityRusPhoneNumber]);
@@ -192,7 +194,8 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
     required: required,
     useModernStyles: useModernStyles,
     size: fieldSize,
-    left: isHaveSelectCountries && useModernStyles ? 65 : undefined
+    left: isHaveSelectCountries && useModernStyles ? 65 : undefined,
+    htmlFor: inputId
   }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, useModernStyles && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
     visible: !isHideModernPlaceholder,
     paddingLeft: isHaveSelectCountries ? 75 : 18,
@@ -222,7 +225,8 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
     placeholder: inputPlaceholder,
     ref: inputRef
   }, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
-    id: id,
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     hasError: hasPureInputError,
     inFocus: inFocus,
     name: name,

package/dist/components/form/PositiveIntegerInput/index.d.ts

@@ -7,7 +7,7 @@ export type TProps = {
     onChange: (value: number | null) => void;
     max?: number;
     upAndDown?: boolean;
-} & Pick<TInputLabelProps, 'label'> & Pick<TPureInputProps, 'placeholder' | 'hasError' | 'onFocus' | 'onBlur' | 'disabled' | 'name' | 'useModernStyles'> & {
+} & Pick<TInputLabelProps, 'label'> & Pick<TPureInputProps, 'placeholder' | 'hasError' | 'onFocus' | 'onBlur' | 'disabled' | 'name' | 'useModernStyles' | 'id'> & {
     size?: TSizes;
 };
 export declare const PositiveIntegerInput: FC<TProps>;

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

@@ -34,7 +34,8 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
     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 = (0, _useInputFocus2.useInputFocus)({
       onFocus: onFocus,
       onBlur: onBlur
@@ -42,6 +43,8 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
     inFocus = _useInputFocus.inFocus,
     handleFocus = _useInputFocus.handleFocus,
     handleBlur = _useInputFocus.handleBlur;
+  var fallbackId = (0, _react.useId)();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var _useInputStyles = (0, _useInputStyles2.useInputStyles)({
       isHaveValue: typeof value === 'number',
       useModernStyles: useModernStyles,
@@ -86,8 +89,11 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
     inFocus: inFocus,
     label: inputLabel,
     useModernStyles: useModernStyles,
-    size: fieldSize
+    size: fieldSize,
+    htmlFor: inputId
   }, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     name: name,
     hasError: hasError,
     inFocus: inFocus,

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

@@ -8,7 +8,7 @@ exports.PureInput = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var S = _interopRequireWildcard(require("./styles"));
 var _palette = require("../../../palette");
-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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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); }
@@ -42,8 +42,10 @@ var PureInput = exports.PureInput = /*#__PURE__*/_react["default"].forwardRef(fu
     renderedValue = _ref.renderedValue,
     _ref$useModernStyles = _ref.useModernStyles,
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    id = _ref.id,
     rest = _objectWithoutProperties(_ref, _excluded);
   var palette = (0, _palette.useComponentPalette)('pureInput');
+  var fallbackId = (0, _react.useId)();
   var handleChange = (0, _react.useCallback)(function (event) {
     var inputValue = event.target.value;
     event.target.value = isOnlyNumbers ? inputValue.replace(/[^0-9]/g, '') : inputValue;
@@ -65,7 +67,8 @@ var PureInput = exports.PureInput = /*#__PURE__*/_react["default"].forwardRef(fu
     $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/components/form/SearchInput/index.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { TProps as PureInputProps } from '../PureInput';
 import { TSizes } from '../constants';
-export type TProps = Pick<PureInputProps, 'placeholder' | 'hasBorder' | 'autoFocus' | 'name' | 'onFocus' | 'onBlur' | 'isOnlyNumbers' | 'maxLength'> & {
+export type TProps = Pick<PureInputProps, 'placeholder' | 'hasBorder' | 'autoFocus' | 'name' | 'onFocus' | 'onBlur' | 'isOnlyNumbers' | 'maxLength' | 'id'> & {
     value: string;
     onChange: (value: string) => void;
     size?: TSizes;
     useModernStyles?: boolean;
 };
-export declare const SearchInput: React.ForwardRefExoticComponent<Pick<PureInputProps, "name" | "maxLength" | "placeholder" | "autoFocus" | "onFocus" | "onBlur" | "hasBorder" | "isOnlyNumbers"> & {
+export declare const SearchInput: React.ForwardRefExoticComponent<Pick<PureInputProps, "id" | "name" | "maxLength" | "placeholder" | "autoFocus" | "onFocus" | "onBlur" | "hasBorder" | "isOnlyNumbers"> & {
     value: string;
     onChange: (value: string) => void;
     size?: TSizes | undefined;

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

@@ -30,7 +30,8 @@ var SearchInput = exports.SearchInput = /*#__PURE__*/(0, _react.forwardRef)(func
     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 = (0, _useInputFocus2.useInputFocus)({
       onFocus: onFocus,
       onBlur: onBlur
@@ -38,6 +39,8 @@ var SearchInput = exports.SearchInput = /*#__PURE__*/(0, _react.forwardRef)(func
     inFocus = _useInputFocus.inFocus,
     handleFocus = _useInputFocus.handleFocus,
     handleBlur = _useInputFocus.handleBlur;
+  var fallbackId = (0, _react.useId)();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var palette = (0, _palette.useComponentPalette)('searchInput');
   var _useInputStyles = (0, _useInputStyles2.useInputStyles)({
       isHaveValue: !!value,
@@ -61,9 +64,12 @@ var SearchInput = exports.SearchInput = /*#__PURE__*/(0, _react.forwardRef)(func
   return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
     useModernStyles: useModernStyles,
     size: fieldSize,
-    label: useModernStyles ? inputLabel : undefined
+    label: useModernStyles ? inputLabel : undefined,
+    htmlFor: inputId
   }, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
     ref: ref,
+    id: inputId,
+    "aria-label": useModernStyles && inputLabel ? undefined : placeholder,
     paddingRight: 56,
     hasBorder: hasBorder,
     onChange: handleInputChange,

package/dist/components/form/Select/components/Input/index.d.ts

@@ -3,13 +3,13 @@ import { TProps as TInputLabelProps } from '../../../InputLabel';
 import { TProps as TPureInputProps } from '../../../PureInput';
 import { TProps as TArrowProps } from '../../../../common/Arrow';
 import { TSizes } from '../../../constants';
-export type TProps = Pick<TInputLabelProps, 'inFocus' | 'label' | 'required'> & Pick<TPureInputProps, 'hasError' | 'placeholder' | 'name' | 'onFocus' | 'onBlur' | 'value' | 'onClick'> & Pick<TArrowProps, 'isOpen'> & {
+export type TProps = Pick<TInputLabelProps, 'inFocus' | 'label' | 'required'> & Pick<TPureInputProps, 'hasError' | 'placeholder' | 'name' | 'onFocus' | 'onBlur' | 'value' | 'onClick' | 'id'> & Pick<TArrowProps, 'isOpen'> & {
     onReset?: () => void;
     size?: TSizes;
     renderedValue?: React.ReactNode;
     useModernStyles?: boolean;
 };
-export declare const Input: React.ForwardRefExoticComponent<Pick<TInputLabelProps, "required" | "label" | "inFocus"> & Pick<TPureInputProps, "name" | "value" | "placeholder" | "onFocus" | "onBlur" | "onClick" | "hasError"> & Pick<TArrowProps, "isOpen"> & {
+export declare const Input: React.ForwardRefExoticComponent<Pick<TInputLabelProps, "required" | "label" | "inFocus"> & Pick<TPureInputProps, "id" | "name" | "value" | "placeholder" | "onFocus" | "onBlur" | "onClick" | "hasError"> & Pick<TArrowProps, "isOpen"> & {
     onReset?: (() => void) | undefined;
     size?: TSizes | undefined;
     renderedValue?: React.ReactNode;

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

@@ -32,7 +32,10 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_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 = (0, _react.useId)();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var _useInputStyles = (0, _useInputStyles2.useInputStyles)({
       isHaveValue: !!value,
       useModernStyles: useModernStyles,
@@ -53,8 +56,11 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     label: inputLabel,
     required: required,
     useModernStyles: useModernStyles,
-    size: fieldSize
+    size: fieldSize,
+    htmlFor: inputId
   }, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     ref: ref,
     hasError: hasError,
     inFocus: inFocus,

package/dist/components/form/TagsInput/index.js

@@ -46,6 +46,7 @@ var TagsInput = exports.TagsInput = function TagsInput(_ref) {
     inFocus = _useInputFocus.inFocus,
     handleFocus = _useInputFocus.handleFocus,
     handleBlur = _useInputFocus.handleBlur;
+  var inputId = (0, _react.useId)();
   var inputRef = (0, _react.useRef)(null);
   var pureInputPalette = (0, _palette.useComponentPalette)('pureInput');
   var tagsInputPalette = (0, _palette.useComponentPalette)('tagsInput', palette);
@@ -117,7 +118,8 @@ var TagsInput = exports.TagsInput = function TagsInput(_ref) {
     (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
   };
   return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
-    label: label
+    label: label,
+    htmlFor: inputId
   }, /*#__PURE__*/_react["default"].createElement(S.PureInputStyledWrapper, {
     $palette: pureInputPalette,
     $hasBorder: true,
@@ -151,6 +153,7 @@ var TagsInput = exports.TagsInput = function TagsInput(_ref) {
       bgColor: tagsInputPalette.chipBg
     });
   }), /*#__PURE__*/_react["default"].createElement(S.InputWithSaveButtonWrapper, null, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, {
+    id: inputId,
     ref: inputRef,
     hasBorder: inFocus,
     paddingBottom: 0,

package/dist/components/form/TextInput/index.js

@@ -53,6 +53,8 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
     inFocus = _useInputFocus.inFocus,
     handleFocus = _useInputFocus.handleFocus,
     handleBlur = _useInputFocus.handleBlur;
+  var fallbackId = (0, _react.useId)();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var _useElementWidth = (0, _useElementWidth2.useElementWidth)(),
     childrenRef = _useElementWidth.ref,
     childrenWidth = _useElementWidth.width;
@@ -80,9 +82,11 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
     disabled: disabled,
     required: required,
     size: fieldSize,
-    useModernStyles: useModernStyles
+    useModernStyles: useModernStyles,
+    htmlFor: inputId
   }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
-    id: id,
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     ref: ref,
     name: name,
     disabled: disabled,

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

@@ -72,6 +72,7 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setActiveIndex = _useState4[1];
   var baseId = useId();
   var listboxId = "".concat(baseId, "-listbox");
+  var inputId = "".concat(baseId, "-input");
   var activeOptionRef = useRef(null);
   var palette = useComponentPalette('autocompleteDefaultOption');
   var _useInputFocus = useInputFocus({
@@ -180,7 +181,8 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
     required: required,
     useModernStyles: useModernStyles,
     size: fieldSize,
-    left: useModernStyles && typeof inputPaddingLeft === 'number' ? inputPaddingLeft - LABEL_PADDING : undefined
+    left: useModernStyles && typeof inputPaddingLeft === 'number' ? inputPaddingLeft - LABEL_PADDING : undefined,
+    htmlFor: inputId
   }, /*#__PURE__*/React.createElement(S.InputLabelContent, null, children ? /*#__PURE__*/React.createElement(S.ChildrenWrapper, null, children) : null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
     visible: !isHideModernPlaceholder,
     paddingLeft: typeof inputPaddingLeft === 'number' ? inputPaddingLeft : 20,
@@ -188,6 +190,8 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
     size: fieldSize,
     required: required
   }, modernInputPlaceholder), /*#__PURE__*/React.createElement(PureInput, _extends({
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     ref: ref,
     hasError: hasError,
     inFocus: inFocus,

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/TagsInput/index.js

@@ -8,7 +8,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, { useState, useRef } from 'react';
+import React, { useState, useRef, useId } from 'react';
 import { InputLabel } from '../InputLabel';
 import { PureInput } from '../PureInput';
 import * as S from './styles';
@@ -37,6 +37,7 @@ export var TagsInput = function TagsInput(_ref) {
     inFocus = _useInputFocus.inFocus,
     handleFocus = _useInputFocus.handleFocus,
     handleBlur = _useInputFocus.handleBlur;
+  var inputId = useId();
   var inputRef = useRef(null);
   var pureInputPalette = useComponentPalette('pureInput');
   var tagsInputPalette = useComponentPalette('tagsInput', palette);
@@ -108,7 +109,8 @@ export var TagsInput = function TagsInput(_ref) {
     (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
   };
   return /*#__PURE__*/React.createElement(InputLabel, {
-    label: label
+    label: label,
+    htmlFor: inputId
   }, /*#__PURE__*/React.createElement(S.PureInputStyledWrapper, {
     $palette: pureInputPalette,
     $hasBorder: true,
@@ -142,6 +144,7 @@ export var TagsInput = function TagsInput(_ref) {
       bgColor: tagsInputPalette.chipBg
     });
   }), /*#__PURE__*/React.createElement(S.InputWithSaveButtonWrapper, null, /*#__PURE__*/React.createElement(PureInput, {
+    id: inputId,
     ref: inputRef,
     hasBorder: inFocus,
     paddingBottom: 0,

package/dist/esm/components/form/TextInput/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 { InputLabel } from '../InputLabel';
 import { PureInput } from '../PureInput';
@@ -44,6 +44,8 @@ export var TextInput = /*#__PURE__*/React.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 _useElementWidth = useElementWidth(),
     childrenRef = _useElementWidth.ref,
     childrenWidth = _useElementWidth.width;
@@ -71,9 +73,11 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disabled: disabled,
     required: required,
     size: fieldSize,
-    useModernStyles: useModernStyles
+    useModernStyles: useModernStyles,
+    htmlFor: inputId
   }, /*#__PURE__*/React.createElement(S.InputLabelContent, null, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
-    id: id,
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     ref: ref,
     name: name,
     disabled: disabled,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.315",
+    "version": "0.1.0-alpha.316",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {