@rescui/textarea 0.10.2-RUI-286-Fix-tooltip-stacking-f4145b01.1 → 0.11.1-RUI-280-Update-select-component-026338d06.52

package/lib/public-api.pcss

@@ -2,7 +2,6 @@
   &:not(html){
     --_rs-textarea-vertical-padding:6px;
     --_rs-textarea-horizontal-padding:8px;
-    --_rs-textarea-parts-offset:4px;
   }
     &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
     --_rs-icons-height:20px;
@@ -34,8 +33,9 @@
 )
   );
     --_rs-typography-text-auto-offset:8px;
-    --_rs-typography-ul-list-li-padding-left:28px;
-    --_rs-typography-ol-list-li-padding-left:21px;
+    --_rs-typography-ul-bullet-offset:2px;
+    --_rs-typography-list-li-compact-left-offset:15px;
+    --_rs-typography-list-li-default-left-offset:19px;
     --_rs-typography-list-li-margin-top-from-text:8px;
     --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
@@ -71,8 +71,9 @@
 )
   );
     --_rs-typography-text-auto-offset:8px;
-    --_rs-typography-ul-list-li-padding-left:28px;
-    --_rs-typography-ol-list-li-padding-left:21px;
+    --_rs-typography-ul-bullet-offset:2px;
+    --_rs-typography-list-li-compact-left-offset:15px;
+    --_rs-typography-list-li-default-left-offset:19px;
     --_rs-typography-list-li-margin-top-from-text:8px;
     --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
@@ -102,87 +103,19 @@
 )
   );
     --_rs-typography-text-auto-offset:0;
-    --_rs-typography-ul-list-li-padding-left:initial;
-    --_rs-typography-ol-list-li-padding-left:initial;
+    --_rs-typography-ul-bullet-offset:initial;
+    --_rs-typography-list-li-compact-left-offset:initial;
+    --_rs-typography-list-li-default-left-offset:initial;
     --_rs-typography-list-li-margin-top-from-text:initial;
     --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:2px;
   }
-    &:not(html) [data-rs-internal='textarea__note']{
-    --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
-    --_rs-typography-text-transform:initial;
-    --_rs-typography-font-variant-numeric:initial;
-    --_rs-typography-font-family:var(
-    --rs-font-family-ui,
-    var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
-  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
-  );
-    --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
-    --_rs-typography-font-weight:var(
-    --rs-font-weight-regular,
-    400
-  );
-    --_rs-typography-line-height:var(
-    --rs-text-3-line-height,
-    20px
-  );
-    --_rs-typography-base-color:var(
-    --_rs-typography-hardness-color,
-    var(
-  --rs-color-average,
-  rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
-)
-  );
-    --_rs-typography-text-auto-offset:8px;
-    --_rs-typography-ul-list-li-padding-left:28px;
-    --_rs-typography-ol-list-li-padding-left:21px;
-    --_rs-typography-list-li-margin-top-from-text:8px;
-    --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
-    --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
-    --_rs-typography-link-border-bottom-width-from-text:1px;
-  }
-    &:not(html) [data-rs-internal='textarea__error-message']{
-    --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
-    --_rs-typography-text-transform:initial;
-    --_rs-typography-font-variant-numeric:initial;
-    --_rs-typography-font-family:var(
-    --rs-font-family-ui,
-    var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
-  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
-  );
-    --_rs-typography-font-size:var(--rs-h5-font-size, 13px);
-    --_rs-typography-font-weight:var(
-    --rs-font-weight-semi-bold,
-    600
-  );
-    --_rs-typography-line-height:var(--rs-h5-line-height, 20px);
-    --_rs-typography-base-color:var(
-    --_rs-typography-heading-hardness-color,
-    var(
-  --rs-color-hard,
-  rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227))
-)
-  );
-    --_rs-typography-text-auto-offset:0;
-    --_rs-typography-ul-list-li-padding-left:initial;
-    --_rs-typography-ol-list-li-padding-left:initial;
-    --_rs-typography-list-li-margin-top-from-text:initial;
-    --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
-    --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
-    --_rs-typography-link-border-bottom-width-from-text:2px;
-  }
-    &:not(html) [data-rs-internal='textarea__error-icon']:not(html){
-    --_rs-icons-height:20px;
-  }
 }
 @define-mixin rs-textarea-size-m{
   &:not(html){
     --_rs-textarea-vertical-padding:8px;
     --_rs-textarea-horizontal-padding:8px;
-    --_rs-textarea-parts-offset:8px;
   }
     &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
     --_rs-icons-height:24px;
@@ -214,8 +147,9 @@
 )
   );
     --_rs-typography-text-auto-offset:16px;
-    --_rs-typography-ul-list-li-padding-left:22px;
-    --_rs-typography-ol-list-li-padding-left:26px;
+    --_rs-typography-ul-bullet-offset:2px;
+    --_rs-typography-list-li-compact-left-offset:18px;
+    --_rs-typography-list-li-default-left-offset:24px;
     --_rs-typography-list-li-margin-top-from-text:var(
     --_rs-typography-text-2-sm-list-li-margin-top-from-text,
     16px
@@ -259,8 +193,9 @@
 )
   );
     --_rs-typography-text-auto-offset:16px;
-    --_rs-typography-ul-list-li-padding-left:22px;
-    --_rs-typography-ol-list-li-padding-left:26px;
+    --_rs-typography-ul-bullet-offset:2px;
+    --_rs-typography-list-li-compact-left-offset:18px;
+    --_rs-typography-list-li-default-left-offset:24px;
     --_rs-typography-list-li-margin-top-from-text:var(
     --_rs-typography-text-2-sm-list-li-margin-top-from-text,
     16px
@@ -301,87 +236,19 @@
 )
   );
     --_rs-typography-text-auto-offset:0;
-    --_rs-typography-ul-list-li-padding-left:initial;
-    --_rs-typography-ol-list-li-padding-left:initial;
-    --_rs-typography-list-li-margin-top-from-text:initial;
-    --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
-    --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
-    --_rs-typography-link-border-bottom-width-from-text:2px;
-  }
-    &:not(html) [data-rs-internal='textarea__note']{
-    --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
-    --_rs-typography-text-transform:initial;
-    --_rs-typography-font-variant-numeric:initial;
-    --_rs-typography-font-family:var(
-    --rs-font-family-ui,
-    var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
-  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
-  );
-    --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
-    --_rs-typography-font-weight:var(
-    --rs-font-weight-regular,
-    400
-  );
-    --_rs-typography-line-height:var(
-    --rs-text-3-line-height,
-    20px
-  );
-    --_rs-typography-base-color:var(
-    --_rs-typography-hardness-color,
-    var(
-  --rs-color-average,
-  rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
-)
-  );
-    --_rs-typography-text-auto-offset:8px;
-    --_rs-typography-ul-list-li-padding-left:28px;
-    --_rs-typography-ol-list-li-padding-left:21px;
-    --_rs-typography-list-li-margin-top-from-text:8px;
-    --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
-    --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
-    --_rs-typography-link-border-bottom-width-from-text:1px;
-  }
-    &:not(html) [data-rs-internal='textarea__error-message']{
-    --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
-    --_rs-typography-text-transform:initial;
-    --_rs-typography-font-variant-numeric:initial;
-    --_rs-typography-font-family:var(
-    --rs-font-family-ui,
-    var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
-  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
-  );
-    --_rs-typography-font-size:var(--rs-h5-font-size, 13px);
-    --_rs-typography-font-weight:var(
-    --rs-font-weight-semi-bold,
-    600
-  );
-    --_rs-typography-line-height:var(--rs-h5-line-height, 20px);
-    --_rs-typography-base-color:var(
-    --_rs-typography-heading-hardness-color,
-    var(
-  --rs-color-hard,
-  rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227))
-)
-  );
-    --_rs-typography-text-auto-offset:0;
-    --_rs-typography-ul-list-li-padding-left:initial;
-    --_rs-typography-ol-list-li-padding-left:initial;
+    --_rs-typography-ul-bullet-offset:initial;
+    --_rs-typography-list-li-compact-left-offset:initial;
+    --_rs-typography-list-li-default-left-offset:initial;
     --_rs-typography-list-li-margin-top-from-text:initial;
     --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:2px;
   }
-    &:not(html) [data-rs-internal='textarea__error-icon']:not(html){
-    --_rs-icons-height:20px;
-  }
 }
 @define-mixin rs-textarea-size-l{
   &:not(html){
     --_rs-textarea-vertical-padding:12px;
     --_rs-textarea-horizontal-padding:16px;
-    --_rs-textarea-parts-offset:8px;
   }
     &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
     --_rs-icons-height:28px;
@@ -413,8 +280,9 @@
 )
   );
     --_rs-typography-text-auto-offset:32px;
-    --_rs-typography-ul-list-li-padding-left:26px;
-    --_rs-typography-ol-list-li-padding-left:32px;
+    --_rs-typography-ul-bullet-offset:2px;
+    --_rs-typography-list-li-compact-left-offset:22px;
+    --_rs-typography-list-li-default-left-offset:28px;
     --_rs-typography-list-li-margin-top-from-text:var(
     --_rs-typography-text-1-sm-list-li-margin-top-from-text,
     24px
@@ -458,8 +326,9 @@
 )
   );
     --_rs-typography-text-auto-offset:32px;
-    --_rs-typography-ul-list-li-padding-left:26px;
-    --_rs-typography-ol-list-li-padding-left:32px;
+    --_rs-typography-ul-bullet-offset:2px;
+    --_rs-typography-list-li-compact-left-offset:22px;
+    --_rs-typography-list-li-default-left-offset:28px;
     --_rs-typography-list-li-margin-top-from-text:var(
     --_rs-typography-text-1-sm-list-li-margin-top-from-text,
     24px
@@ -500,89 +369,14 @@
 )
   );
     --_rs-typography-text-auto-offset:0;
-    --_rs-typography-ul-list-li-padding-left:initial;
-    --_rs-typography-ol-list-li-padding-left:initial;
+    --_rs-typography-ul-bullet-offset:initial;
+    --_rs-typography-list-li-compact-left-offset:initial;
+    --_rs-typography-list-li-default-left-offset:initial;
     --_rs-typography-list-li-margin-top-from-text:initial;
     --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:2px;
   }
-    &:not(html) [data-rs-internal='textarea__note']{
-    --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
-    --_rs-typography-text-transform:initial;
-    --_rs-typography-font-variant-numeric:initial;
-    --_rs-typography-font-family:var(
-    --rs-font-family-ui,
-    var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
-  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
-  );
-    --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
-    --_rs-typography-font-weight:var(
-    --rs-font-weight-regular,
-    400
-  );
-    --_rs-typography-line-height:var(
-    --rs-text-2-line-height,
-    24px
-  );
-    --_rs-typography-base-color:var(
-    --_rs-typography-hardness-color,
-    var(
-  --rs-color-average,
-  rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
-)
-  );
-    --_rs-typography-text-auto-offset:16px;
-    --_rs-typography-ul-list-li-padding-left:22px;
-    --_rs-typography-ol-list-li-padding-left:26px;
-    --_rs-typography-list-li-margin-top-from-text:var(
-    --_rs-typography-text-2-sm-list-li-margin-top-from-text,
-    16px
-  );
-    --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
-    --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
-    --_rs-typography-link-border-bottom-width-from-text:1px;
-  }
-    @media screen and (max-width: 640px){
-    &:not(html) [data-rs-internal='textarea__note']{
-    --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
-  }
-  }
-    &:not(html) [data-rs-internal='textarea__error-message']{
-    --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
-    --_rs-typography-text-transform:initial;
-    --_rs-typography-font-variant-numeric:initial;
-    --_rs-typography-font-family:var(
-    --rs-font-family-ui,
-    var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
-  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
-  );
-    --_rs-typography-font-size:var(--rs-h4-font-size, 16px);
-    --_rs-typography-font-weight:var(
-    --rs-font-weight-semi-bold,
-    600
-  );
-    --_rs-typography-line-height:var(--rs-h4-line-height, 24px);
-    --_rs-typography-base-color:var(
-    --_rs-typography-heading-hardness-color,
-    var(
-  --rs-color-hard,
-  rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227))
-)
-  );
-    --_rs-typography-text-auto-offset:0;
-    --_rs-typography-ul-list-li-padding-left:initial;
-    --_rs-typography-ol-list-li-padding-left:initial;
-    --_rs-typography-list-li-margin-top-from-text:initial;
-    --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
-    --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
-    --_rs-typography-link-border-bottom-width-from-text:2px;
-  }
-    &:not(html) [data-rs-internal='textarea__error-icon']:not(html){
-    --_rs-icons-height:24px;
-  }
 }
 @define-mixin rs-textarea-mode-classic{
   &:not(html){

package/lib/textarea.d.ts

@@ -23,6 +23,11 @@ declare type TextareaExclusiveProps = {
      * Error message to show
      */
     error?: React.ReactNode;
+    /**
+     * If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
+     * If `false`, there will be no reservation.
+     */
+    reserveErrorLine?: boolean;
     /**
      * Set loading state
      */
@@ -88,6 +93,10 @@ declare type TextareaExclusiveProps = {
     textareaRef?: React.Ref<HTMLTextAreaElement>;
     enableClear?: boolean;
     boldLabel?: boolean;
+    /**
+     * Character counter slot
+     */
+    characterCounter?: React.ReactNode;
 };
 export declare type TextareaProps = Omit<TextareaAutosizeProps, keyof TextareaExclusiveProps> & TextareaExclusiveProps;
 export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaAutosizeProps, keyof TextareaExclusiveProps> & TextareaExclusiveProps & React.RefAttributes<HTMLLabelElement>>;

package/lib/textarea.js

@@ -3,9 +3,10 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import TextareaAutosize from 'react-textarea-autosize';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
+import { shouldRenderErrorMessage, ErrorMessage } from '@rescui/form-field';
 import cn from 'classnames';
-import WarningIcon from './_virtual/warning.js';
 import LoadingOutlineIcon from './_virtual/loading-outline.js';
+import { useBackwardCompatibleId } from './use-backward-compatible-id.js';
 import styles from './textarea.p.module.css.js';
 const SIZE_STYLES = {
   s: styles.sizeS,
@@ -27,6 +28,7 @@ const Textarea = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
     className,
     disabled,
     error,
+    reserveErrorLine = false,
     busy,
     onChange,
     size = 'm',
@@ -36,13 +38,17 @@ const Textarea = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
     value,
     tabIndex,
     label,
-    boldLabel = false,
+    boldLabel = true,
     note,
+    characterCounter,
     ...restProps
   } = _ref;
   const theme = useThemeWithUndefined(themeFromProps);
   const isEmpty = !value;
   const [focused, setFocused] = useState(false);
+  const uniqueId = `textarea-${useBackwardCompatibleId()}`;
+  const errorId = `${id ? id : uniqueId}-error`;
+  const hasFooter = Boolean(note) || Boolean(characterCounter) || shouldRenderErrorMessage(error, reserveErrorLine);
   return /*#__PURE__*/React.createElement("label", {
     ref: ref,
     className: cn(styles.labelWrapper, SIZE_STYLES[size], MODE_STYLES[mode], THEME_STYLES[theme], !!error && styles.error, disabled ? styles.disabled : styles.enabled, focused && styles.focused, boldLabel && styles.boldLabel, isEmpty ? styles.empty : styles.filled, className),
@@ -62,7 +68,8 @@ const Textarea = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
     value: value,
     onChange: onChange,
     ref: textareaRef,
-    "aria-invalid": !!error,
+    "aria-errormessage": error ? errorId : undefined,
+    "aria-invalid": Boolean(error),
     tabIndex: disabled ? -1 : tabIndex,
     "data-test": 'textarea__input',
     "data-rs-internal": "textarea__inner"
@@ -72,19 +79,20 @@ const Textarea = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
     "data-test": "textarea__busy-icon",
     "data-rs-internal": "textarea__busy-icon",
     "data-render-all-sizes": true
-  }))), error && typeof error !== 'boolean' && /*#__PURE__*/React.createElement("div", {
+  }))), hasFooter && /*#__PURE__*/React.createElement("div", {
+    className: styles.footer
+  }, characterCounter && /*#__PURE__*/React.createElement("div", {
+    className: styles.characterCounter
+  }, characterCounter), /*#__PURE__*/React.createElement(ErrorMessage, {
+    id: errorId,
     className: styles.errorMessage,
     "data-test": 'textarea__error',
-    "data-rs-internal": "textarea__error-message"
-  }, /*#__PURE__*/React.createElement(WarningIcon, {
-    className: styles.errorIcon,
-    "data-rs-internal": "textarea__error-icon",
-    "data-render-all-sizes": true
-  }), /*#__PURE__*/React.createElement("span", null, error)), note && /*#__PURE__*/React.createElement("div", {
+    reserveLine: reserveErrorLine
+  }, error), note && /*#__PURE__*/React.createElement("div", {
     className: styles.note,
     "data-test": 'textarea__note',
     "data-rs-internal": "textarea__note"
-  }, note));
+  }, note)));
 });
 Textarea.displayName = 'Textarea';
 Textarea.propTypes = {
@@ -93,7 +101,7 @@ Textarea.propTypes = {
   placeholder: PropTypes.string,
   disabled: PropTypes.bool,
   busy: PropTypes.bool,
-  error: PropTypes.node,
+  error: ErrorMessage.propTypes.children,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
@@ -105,6 +113,7 @@ Textarea.propTypes = {
   maxRows: PropTypes.number,
   label: PropTypes.node,
   note: PropTypes.node,
+  characterCounter: PropTypes.node,
   boldLabel: PropTypes.bool
 };
 export { Textarea };

package/lib/textarea.p.module.css.js

@@ -1,23 +1,24 @@
 var styles = {
-  "themeLight": "_themeLight_bhaxh0_8",
-  "themeDark": "_themeDark_bhaxh0_11",
-  "sizeS": "_sizeS_bhaxh0_15",
-  "sizeM": "_sizeM_bhaxh0_18",
-  "sizeL": "_sizeL_bhaxh0_21",
-  "classic": "_classic_bhaxh0_25",
-  "rock": "_rock_bhaxh0_28",
-  "labelWrapper": "_labelWrapper_bhaxh0_32",
-  "wrapper": "_wrapper_bhaxh0_39",
-  "error": "_error_bhaxh0_56",
-  "disabled": "_disabled_bhaxh0_62",
-  "enabled": "_enabled_bhaxh0_68",
-  "focused": "_focused_bhaxh0_68",
-  "filled": "_filled_bhaxh0_74",
-  "inner": "_inner_bhaxh0_90",
-  "busyIcon": "_busyIcon_bhaxh0_176",
-  "errorMessage": "_errorMessage_bhaxh0_196",
-  "errorIcon": "_errorIcon_bhaxh0_208",
-  "note": "_note_bhaxh0_214",
-  "label": "_label_bhaxh0_32"
+  "themeLight": "_themeLight_r8fqis_8",
+  "themeDark": "_themeDark_r8fqis_11",
+  "sizeS": "_sizeS_r8fqis_15",
+  "sizeM": "_sizeM_r8fqis_18",
+  "sizeL": "_sizeL_r8fqis_21",
+  "classic": "_classic_r8fqis_25",
+  "rock": "_rock_r8fqis_28",
+  "labelWrapper": "_labelWrapper_r8fqis_32",
+  "wrapper": "_wrapper_r8fqis_40",
+  "error": "_error_r8fqis_57",
+  "disabled": "_disabled_r8fqis_63",
+  "enabled": "_enabled_r8fqis_69",
+  "focused": "_focused_r8fqis_69",
+  "filled": "_filled_r8fqis_75",
+  "inner": "_inner_r8fqis_91",
+  "busyIcon": "_busyIcon_r8fqis_177",
+  "label": "_label_r8fqis_32",
+  "footer": "_footer_r8fqis_208",
+  "characterCounter": "_characterCounter_r8fqis_227",
+  "errorMessage": "_errorMessage_r8fqis_236",
+  "note": "_note_r8fqis_240"
 };
 export { styles as default };

package/lib/use-backward-compatible-id.d.ts

@@ -0,0 +1,4 @@
+export declare const useBackwardCompatibleId: {
+    (): string | number;
+    counter: number;
+};

package/lib/use-backward-compatible-id.js

@@ -0,0 +1,14 @@
+import React, { useRef } from 'react';
+
+const useBackwardCompatibleId = () => {
+  const id = useRef(null);
+
+  if (id.current === null) {
+    id.current = useBackwardCompatibleId.counter++;
+  }
+
+  return (React.useId ? React.useId : () => id.current)();
+};
+
+useBackwardCompatibleId.counter = 0;
+export { useBackwardCompatibleId };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/textarea",
-  "version": "0.10.2-RUI-286-Fix-tooltip-stacking-f4145b01.1+f4145b01",
+  "version": "0.11.1-RUI-280-Update-select-component-026338d06.52+026338d06",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
+    "@rescui/form-field": "0.1.1-RUI-280-Update-select-component-026338d06.52+026338d06",
     "classnames": "^2.2.6",
     "react-textarea-autosize": "^8.3.4"
   },
@@ -25,9 +26,9 @@
     "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "0.2.13-RUI-286-Fix-tooltip-stacking-f4145b01.50+f4145b01",
+    "@rescui/colors": "0.3.1-RUI-280-Update-select-component-026338d06.52+026338d06",
     "@rescui/scripts": "0.5.1",
-    "@rescui/typography": "0.24.4-RUI-286-Fix-tooltip-stacking-f4145b01.1+f4145b01",
+    "@rescui/typography": "0.24.5-RUI-280-Update-select-component-026338d06.52+026338d06",
     "@rescui/visual-regression": "0.1.4",
     "@types/classnames": "^2.2.11"
   },
@@ -36,5 +37,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "f4145b012449db94a8903565358efc101a5f4ac2"
+  "gitHead": "026338d06dba5f4f8b42762b25aca5fb1f28fffb"
 }

package/lib/_virtual/warning.js

@@ -1,106 +0,0 @@
-import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'classnames';
-import styles from './index.css.js';
-const sizeStyles = {
-  "xs": styles.sizeXS,
-  "s": styles.sizeS,
-  "m": styles.sizeM,
-  "l": styles.sizeL
-};
-const Size = {
-  "xs": "xs",
-  "s": "s",
-  "m": "m",
-  "l": "l"
-};
-const WarningIcon16 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
-  viewBox: "0 0 16 16"
-}, props, {
-  ref: ref
-}), /*#__PURE__*/React.createElement("path", {
-  d: "m6.303 1.989-5.027 8.874C.483 12.263 1.494 14 3.103 14h9.793c1.609 0 2.62-1.736 1.827-3.137L9.696 1.99C8.949.67 7.05.67 6.303 1.989M8 12a1 1 0 1 1 0-2 1 1 0 0 1 0 2m0-8a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0v-4A.5.5 0 0 1 8 4"
-})));
-WarningIcon16.displayName = 'WarningIcon16';
-const WarningIcon20 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
-  viewBox: "0 0 20 20"
-}, props, {
-  ref: ref
-}), /*#__PURE__*/React.createElement("path", {
-  d: "m8.042 3.141-5.8 10.24C1.327 14.997 2.494 17 4.35 17h11.3c1.856 0 3.023-2.003 2.108-3.62l-5.8-10.239c-.862-1.521-3.054-1.521-3.916 0M10 5.25a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0V6a.75.75 0 0 1 .75-.75m0 9.25a1 1 0 1 1 0-2 1 1 0 0 1 0 2"
-})));
-WarningIcon20.displayName = 'WarningIcon20';
-const WarningIcon24 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
-  viewBox: "0 0 24 24"
-}, props, {
-  ref: ref
-}), /*#__PURE__*/React.createElement("path", {
-  d: "m9.52 3.446-7.346 12.97C1.014 18.463 2.492 21 4.844 21h14.312c2.352 0 3.83-2.537 2.67-4.584L14.48 3.446c-1.092-1.928-3.868-1.928-4.96 0M12 7a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V8a1 1 0 0 1 1-1m0 11a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"
-})));
-WarningIcon24.displayName = 'WarningIcon24';
-const WarningIcon28 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
-  viewBox: "0 0 28 28"
-}, props, {
-  ref: ref
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M11.26 4.598 3.14 18.933C1.858 21.195 3.492 24 6.09 24h15.82c2.599 0 4.232-2.805 2.951-5.067l-8.12-14.335c-1.207-2.13-4.275-2.13-5.481 0M14 8a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V9a1 1 0 0 1 1-1m0 12a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"
-})));
-WarningIcon28.displayName = 'WarningIcon28';
-const WarningIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    theme,
-    size: sizeFromProps = "m",
-    className,
-    style,
-    ['data-render-all-sizes']: renderAllSizes = false,
-    ...props
-  } = _ref;
-  const size = sizeFromProps in Size ? sizeFromProps : "m";
-  const mainProps = { ...props,
-    className: cn(styles.icon, styles[theme], sizeStyles[size], renderAllSizes && styles.allVariants, className),
-    style: renderAllSizes ? {
-      '--rs-icon-ar-width': 28,
-      '--rs-icon-ar-height': 28,
-      ...style
-    } : style,
-    ref
-  };
-
-  if (renderAllSizes) {
-    return /*#__PURE__*/React.createElement("svg", _extends({
-      viewBox: "0 0 28 28"
-    }, mainProps), /*#__PURE__*/React.createElement(WarningIcon16, {
-      className: styles.variant16
-    }), /*#__PURE__*/React.createElement(WarningIcon20, {
-      className: styles.variant20
-    }), /*#__PURE__*/React.createElement(WarningIcon24, {
-      className: styles.variant24
-    }), /*#__PURE__*/React.createElement(WarningIcon28, {
-      className: styles.variant28
-    }));
-  }
-
-  if (size === Size['xs']) {
-    return /*#__PURE__*/React.createElement(WarningIcon16, mainProps);
-  }
-
-  if (size === Size['s']) {
-    return /*#__PURE__*/React.createElement(WarningIcon20, mainProps);
-  }
-
-  if (size === Size['m']) {
-    return /*#__PURE__*/React.createElement(WarningIcon24, mainProps);
-  }
-
-  return /*#__PURE__*/React.createElement(WarningIcon28, mainProps);
-});
-WarningIcon.displayName = 'WarningIcon';
-WarningIcon.propTypes = {
-  className: PropTypes.string,
-  theme: PropTypes.oneOf(["light", "dark"]),
-  size: PropTypes.oneOf(["xs", "s", "m", "l"]),
-  'data-render-all-sizes': PropTypes.bool,
-  style: PropTypes.object
-};
-export { Size, WarningIcon as default };