@skbkontur/react-ui 0.0.0-0dca6f33be → 0.0.0-0ffbe8b468

package/components/Textarea/Textarea.d.ts

@@ -1,8 +1,13 @@
-import React, { ReactNode } from 'react';
+import React, { AriaAttributes, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { Override } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
-export interface TextareaProps extends CommonProps, Override<React.TextareaHTMLAttributes<HTMLTextAreaElement>, {
+import { SizeProp } from '../../lib/types/props';
+/**
+ * @deprecated use SizeProp
+ */
+export declare type TextareaSize = SizeProp;
+export interface TextareaProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps, Override<React.TextareaHTMLAttributes<HTMLTextAreaElement>, {
     /**
      * Состояние валидации при ошибке.
      */
@@ -13,6 +18,8 @@ export interface TextareaProps extends CommonProps, Override<React.TextareaHTMLA
     warning?: boolean;
     /** Не активное состояние */
     disabled?: boolean;
+    /** Размер */
+    size?: SizeProp;
     /**
      * Автоматический ресайз
      * в зависимости от содержимого
@@ -78,7 +85,7 @@ export declare const TextareaDataTids: {
     readonly counter: "TextareaCounter__root";
     readonly helpIcon: "TextareaCounter__helpIcon";
 };
-declare type DefaultProps = Required<Pick<TextareaProps, 'rows' | 'maxRows' | 'extraRow' | 'disableAnimations'>>;
+declare type DefaultProps = Required<Pick<TextareaProps, 'rows' | 'maxRows' | 'extraRow' | 'disableAnimations' | 'size'>>;
 /**
  * Компонент для ввода многострочного текста.
  *
@@ -133,6 +140,8 @@ export declare class Textarea extends React.Component<TextareaProps, TextareaSta
     };
     static defaultProps: DefaultProps;
     private getProps;
+    private getRootSizeClassName;
+    private getTextareaSizeClassName;
     state: {
         needsPolyfillPlaceholder: boolean;
         isCounterVisible: boolean;

package/components/Textarea/Textarea.md

@@ -42,3 +42,15 @@ const [value, setValue] = React.useState('');
   counterHelp="Hello 👋"
 />;
 ```
+
+У Textarea есть 3 стандартных размера.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped vertical>
+  <Textarea size={'small'} value={'Маленький'} autoResize rows={1} />
+  <Textarea size={'medium'} value={'Средний'} autoResize rows={1} />
+  <Textarea size={'large'} value={'Большой'} autoResize rows={1} />
+</Gapped>
+```

package/components/Textarea/Textarea.mixins/Textarea.mixins.js

@@ -0,0 +1,14 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import { css } from "../../../lib/theming/Emotion";
+export var rootTextareaSizeMixin = function rootTextareaSizeMixin(fontSize, lineHeight) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    font-size: ", ";\n    line-height: ", ";\n  "])), fontSize, lineHeight);
+};
+export var textareaSizeMixin = function textareaSizeMixin(paddingY, paddingX, minHeight) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    min-height: ", ";\n    padding: ", " ", ";\n  "])), minHeight, paddingY, paddingX);
+};
+export var counterSizeMixin = function counterSizeMixin(paddingX, paddingY) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    right: ", ";\n    bottom: ", ";\n  "])), paddingY, paddingX);
+};

package/components/Textarea/Textarea.mixins/Textarea.mixins.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Textarea.mixins.ts"],"names":["css","rootTextareaSizeMixin","fontSize","lineHeight","textareaSizeMixin","paddingY","paddingX","minHeight","counterSizeMixin"],"mappings":"wJAAA,SAASA,GAAT,QAAoB,2BAApB;;AAEA,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,QAAD,EAAmBC,UAAnB,EAA0C;AAC7E,SAAOH,GAAP;AACeE,EAAAA,QADf;AAEiBC,EAAAA,UAFjB;;AAID,CALM;;AAOP,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,QAAD,EAAmBC,QAAnB,EAAqCC,SAArC,EAA2D;AAC1F,SAAOP,GAAP;AACgBO,EAAAA,SADhB;AAEaF,EAAAA,QAFb,EAEyBC,QAFzB;;AAID,CALM;;AAOP,OAAO,IAAME,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACF,QAAD,EAAmBD,QAAnB,EAAwC;AACtE,SAAOL,GAAP;AACWK,EAAAA,QADX;AAEYC,EAAAA,QAFZ;;AAID,CALM","sourcesContent":["import { css } from '../../lib/theming/Emotion';\n\nexport const rootTextareaSizeMixin = (fontSize: string, lineHeight: string) => {\n  return css`\n    font-size: ${fontSize};\n    line-height: ${lineHeight};\n  `;\n};\n\nexport const textareaSizeMixin = (paddingY: string, paddingX: string, minHeight: string) => {\n  return css`\n    min-height: ${minHeight};\n    padding: ${paddingY} ${paddingX};\n  `;\n};\n\nexport const counterSizeMixin = (paddingX: string, paddingY: string) => {\n  return css`\n    right: ${paddingY};\n    bottom: ${paddingX};\n  `;\n};\n"]}

package/components/Textarea/Textarea.mixins/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Textarea/Textarea.mixins.js",
+  "module": "Textarea.mixins",
+  "types": "../Textarea.mixins.d.ts",
+  "sideEffects": false
+}

package/components/Textarea/Textarea.mixins.d.ts

@@ -0,0 +1,3 @@
+export declare const rootTextareaSizeMixin: (fontSize: string, lineHeight: string) => string;
+export declare const textareaSizeMixin: (paddingY: string, paddingX: string, minHeight: string) => string;
+export declare const counterSizeMixin: (paddingX: string, paddingY: string) => string;

package/components/Textarea/Textarea.styles/Textarea.styles.js

@@ -1,46 +1,74 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+import { counterSizeMixin, rootTextareaSizeMixin, textareaSizeMixin } from "../Textarea.mixins";
 export var styles = memoizeStyle({
-  root: function root(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      font-size: ", ";\n      line-height: ", ";\n      position: relative;\n    "])), t.textareaFontSize, t.textareaLineHeight);
+  root: function root() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      position: relative;\n    "])));
+  },
+  rootSmall: function rootSmall(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), rootTextareaSizeMixin(t.textareaFontSizeSmall, t.textareaLineHeightSmall));
+  },
+  rootMedium: function rootMedium(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), rootTextareaSizeMixin(t.textareaFontSizeMedium, t.textareaLineHeightMedium));
+  },
+  rootLarge: function rootLarge(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), rootTextareaSizeMixin(t.textareaFontSizeLarge, t.textareaLineHeightLarge));
   },
   textarea: function textarea(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      -webkit-appearance: none;\n      background: ", ";\n      background-clip: ", ";\n      border: ", " solid ", ";\n      border-top-color: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      font-family: inherit;\n      font-size: inherit;\n      line-height: inherit;\n      max-width: 100%;\n      min-width: ", ";\n      min-height: ", ";\n      outline: none;\n      padding: ", " ", ";\n      transition: height 0.2s ease-out;\n      vertical-align: middle;\n      width: 100%;\n      border-radius: ", ";\n      white-space: pre-wrap;\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n        position: relative;\n        z-index: 2;\n\n        &::placeholder {\n          color: ", ";\n        }\n      }\n\n      &::placeholder {\n        color: ", ";\n      }\n\n      &:-moz-placeholder {\n        color: ", ";\n      }\n\n      &::-moz-placeholder {\n        color: ", ";\n      }\n    "])), t.textareaBg, t.textareaBackgroundClip, t.textareaBorderWidth, t.textareaBorderColor, t.textareaBorderTopColor, t.textareaShadow, t.textareaColor, t.textareaWidth, t.textareaMinHeight, t.textareaPaddingY, t.textareaPaddingX, t.textareaBorderRadius, t.textareaBorderColorFocus, t.textareaOutlineWidth, t.textareaBorderColorFocus, t.textareaPlaceholderColorLight, t.textareaPlaceholderColor, t.textareaPlaceholderColor, t.textareaPlaceholderColor);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      -webkit-appearance: none;\n      background: ", ";\n      background-clip: ", ";\n      border: ", " solid ", ";\n      border-top-color: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      font-family: inherit;\n      font-size: inherit;\n      line-height: inherit;\n      max-width: 100%;\n      min-width: ", ";\n      outline: none;\n      transition: border-color ", " ", ", height 0.2s ease-out;\n      vertical-align: middle;\n      width: 100%;\n      border-radius: ", ";\n      white-space: pre-wrap;\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n        position: relative;\n        z-index: 2;\n\n        &::placeholder {\n          color: ", ";\n        }\n      }\n\n      &::placeholder {\n        color: ", ";\n      }\n\n      &:-moz-placeholder {\n        color: ", ";\n      }\n\n      &::-moz-placeholder {\n        color: ", ";\n      }\n    "])), t.textareaBg, t.textareaBackgroundClip, t.textareaBorderWidth, t.textareaBorderColor, t.textareaBorderTopColor, t.textareaShadow, t.textareaColor, t.textareaWidth, t.transitionDuration, t.transitionTimingFunction, t.textareaBorderRadius, t.textareaBorderColorFocus, t.textareaOutlineWidth, t.textareaBorderColorFocus, t.textareaPlaceholderColorLight, t.textareaPlaceholderColor, t.textareaPlaceholderColor, t.textareaPlaceholderColor);
+  },
+  textareaSmall: function textareaSmall(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), textareaSizeMixin(t.textareaPaddingYSmall, t.textareaPaddingXSmall, t.textareaMinHeightSmall));
+  },
+  textareaMedium: function textareaMedium(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), textareaSizeMixin(t.textareaPaddingYMedium, t.textareaPaddingXMedium, t.textareaMinHeightMedium));
+  },
+  textareaLarge: function textareaLarge(t) {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), textareaSizeMixin(t.textareaPaddingYLarge, t.textareaPaddingXLarge, t.textareaMinHeightLarge));
   },
   hovering: function hovering(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      &:enabled:hover:not(:focus) {\n        border-color: ", ";\n      }\n    "])), t.textareaBorderColorHover);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      &:enabled:hover:not(:focus) {\n        border-color: ", ";\n      }\n    "])), t.textareaBorderColorHover);
   },
   error: function error(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n    "])), t.textareaBorderColorError, t.textareaBorderWidth, t.textareaBorderColorError, t.textareaBorderColorError, t.textareaOutlineWidth, t.textareaBorderColorError);
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n    "])), t.textareaBorderColorError, t.textareaBorderWidth, t.textareaBorderColorError, t.textareaBorderColorError, t.textareaOutlineWidth, t.textareaBorderColorError);
   },
   warning: function warning(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n    "])), t.textareaBorderColorWarning, t.textareaOutlineWidth, t.textareaBorderColorWarning, t.textareaBorderColorWarning, t.textareaOutlineWidth, t.textareaBorderColorWarning);
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n    "])), t.textareaBorderColorWarning, t.textareaOutlineWidth, t.textareaBorderColorWarning, t.textareaBorderColorWarning, t.textareaOutlineWidth, t.textareaBorderColorWarning);
   },
   disabled: function disabled(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border-color: ", ";\n      box-shadow: none;\n\n      &::placeholder {\n        color: ", ";\n      }\n    "])), t.textareaTextColorDisabled, t.textareaDisabledBg, t.textareaDisabledBorderColor, t.textareaPlaceholderColorDisabled);
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border-color: ", ";\n      box-shadow: none;\n\n      &::placeholder {\n        color: ", ";\n      }\n    "])), t.textareaTextColorDisabled, t.textareaDisabledBg, t.textareaDisabledBorderColor, t.textareaPlaceholderColorDisabled);
   },
   fake: function fake() {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      height: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      visibility: hidden;\n      width: 100%;\n    "])));
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      height: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      visibility: hidden;\n      width: 100%;\n    "])));
   },
   placeholder: function placeholder() {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      -ms-user-select: none;\n      color: #aaa;\n      left: 12px;\n      overflow: hidden;\n      position: absolute;\n      right: 12px;\n      top: 9px;\n      user-select: none;\n      z-index: 3;\n    "])));
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      -ms-user-select: none;\n      color: #aaa;\n      left: 12px;\n      overflow: hidden;\n      position: absolute;\n      right: 12px;\n      top: 9px;\n      user-select: none;\n      z-index: 3;\n    "])));
   },
   counterContainer: function counterContainer(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: 0;\n      border: ", " solid transparent;\n      box-sizing: content-box;\n    "])), t.textareaBorderWidth);
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: 0;\n      border: ", " solid transparent;\n      box-sizing: content-box;\n    "])), t.textareaBorderWidth);
   },
   counter: function counter(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      z-index: 3;\n      text-align: right;\n      background: ", ";\n      color: ", ";\n      border-radius: 2px;\n      right: ", ";\n      bottom: ", ";\n    "])), t.textareaCounterBg, t.textareaCounterColor, t.textareaPaddingX, t.textareaPaddingY);
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      z-index: 3;\n      text-align: right;\n      background: ", ";\n      color: ", ";\n      border-radius: 2px;\n    "])), t.textareaCounterBg, t.textareaCounterColor);
+  },
+  counterSmall: function counterSmall(t) {
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), counterSizeMixin(t.textareaPaddingYSmall, t.textareaPaddingXSmall));
+  },
+  counterMedium: function counterMedium(t) {
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), counterSizeMixin(t.textareaPaddingYMedium, t.textareaPaddingXMedium));
+  },
+  counterLarge: function counterLarge(t) {
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), counterSizeMixin(t.textareaPaddingYLarge, t.textareaPaddingXLarge));
   },
   counterError: function counterError(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textareaCounterErrorColor);
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textareaCounterErrorColor);
   },
   counterHelp: function counterHelp() {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      margin-left: 4px;\n      cursor: pointer;\n    "])));
+    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      margin-left: 4px;\n      cursor: pointer;\n    "])));
   },
   disableAnimations: function disableAnimations() {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      transition: none;\n    "])));
+    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      transition: none;\n    "])));
   }
 });

package/components/Textarea/Textarea.styles/Textarea.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Textarea.styles.ts"],"names":["css","memoizeStyle","styles","root","t","textareaFontSize","textareaLineHeight","textarea","textareaBg","textareaBackgroundClip","textareaBorderWidth","textareaBorderColor","textareaBorderTopColor","textareaShadow","textareaColor","textareaWidth","textareaMinHeight","textareaPaddingY","textareaPaddingX","textareaBorderRadius","textareaBorderColorFocus","textareaOutlineWidth","textareaPlaceholderColorLight","textareaPlaceholderColor","hovering","textareaBorderColorHover","error","textareaBorderColorError","warning","textareaBorderColorWarning","disabled","textareaTextColorDisabled","textareaDisabledBg","textareaDisabledBorderColor","textareaPlaceholderColorDisabled","fake","placeholder","counterContainer","counter","textareaCounterBg","textareaCounterColor","counterError","textareaCounterErrorColor","counterHelp","disableAnimations"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      display: inline-block;\n      font-size: ${t.textareaFontSize};\n      line-height: ${t.textareaLineHeight};\n      position: relative;\n    `;\n  },\n\n  textarea(t: Theme) {\n    return css`\n      -webkit-appearance: none;\n      background: ${t.textareaBg};\n      background-clip: ${t.textareaBackgroundClip};\n      border: ${t.textareaBorderWidth} solid ${t.textareaBorderColor};\n      border-top-color: ${t.textareaBorderTopColor};\n      box-shadow: ${t.textareaShadow};\n      box-sizing: border-box;\n      color: ${t.textareaColor};\n      font-family: inherit;\n      font-size: inherit;\n      line-height: inherit;\n      max-width: 100%;\n      min-width: ${t.textareaWidth};\n      min-height: ${t.textareaMinHeight};\n      outline: none;\n      padding: ${t.textareaPaddingY} ${t.textareaPaddingX};\n      transition: height 0.2s ease-out;\n      vertical-align: middle;\n      width: 100%;\n      border-radius: ${t.textareaBorderRadius};\n      white-space: pre-wrap;\n\n      &:focus {\n        border-color: ${t.textareaBorderColorFocus};\n        box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorFocus};\n        position: relative;\n        z-index: 2;\n\n        &::placeholder {\n          color: ${t.textareaPlaceholderColorLight};\n        }\n      }\n\n      &::placeholder {\n        color: ${t.textareaPlaceholderColor};\n      }\n\n      &:-moz-placeholder {\n        color: ${t.textareaPlaceholderColor};\n      }\n\n      &::-moz-placeholder {\n        color: ${t.textareaPlaceholderColor};\n      }\n    `;\n  },\n\n  hovering(t: Theme) {\n    return css`\n      &:enabled:hover:not(:focus) {\n        border-color: ${t.textareaBorderColorHover};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      border-color: ${t.textareaBorderColorError};\n      box-shadow: 0 0 0 ${t.textareaBorderWidth} ${t.textareaBorderColorError};\n\n      &:focus {\n        border-color: ${t.textareaBorderColorError};\n        box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorError};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      border-color: ${t.textareaBorderColorWarning};\n      box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\n\n      &:focus {\n        border-color: ${t.textareaBorderColorWarning};\n        box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\n      }\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      color: ${t.textareaTextColorDisabled};\n      background: ${t.textareaDisabledBg};\n      border-color: ${t.textareaDisabledBorderColor};\n      box-shadow: none;\n\n      &::placeholder {\n        color: ${t.textareaPlaceholderColorDisabled};\n      }\n    `;\n  },\n\n  fake() {\n    return css`\n      height: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      visibility: hidden;\n      width: 100%;\n    `;\n  },\n\n  placeholder() {\n    return css`\n      -ms-user-select: none;\n      color: #aaa;\n      left: 12px;\n      overflow: hidden;\n      position: absolute;\n      right: 12px;\n      top: 9px;\n      user-select: none;\n      z-index: 3;\n    `;\n  },\n\n  counterContainer(t: Theme) {\n    return css`\n      position: absolute;\n      top: 0;\n      border: ${t.textareaBorderWidth} solid transparent;\n      box-sizing: content-box;\n    `;\n  },\n\n  counter(t: Theme) {\n    return css`\n      position: absolute;\n      z-index: 3;\n      text-align: right;\n      background: ${t.textareaCounterBg};\n      color: ${t.textareaCounterColor};\n      border-radius: 2px;\n      right: ${t.textareaPaddingX};\n      bottom: ${t.textareaPaddingY};\n    `;\n  },\n\n  counterError(t: Theme) {\n    return css`\n      color: ${t.textareaCounterErrorColor};\n    `;\n  },\n\n  counterHelp() {\n    return css`\n      margin-left: 4px;\n      cursor: pointer;\n    `;\n  },\n\n  disableAnimations() {\n    return css`\n      transition: none;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Textarea.styles.ts"],"names":["css","memoizeStyle","counterSizeMixin","rootTextareaSizeMixin","textareaSizeMixin","styles","root","rootSmall","t","textareaFontSizeSmall","textareaLineHeightSmall","rootMedium","textareaFontSizeMedium","textareaLineHeightMedium","rootLarge","textareaFontSizeLarge","textareaLineHeightLarge","textarea","textareaBg","textareaBackgroundClip","textareaBorderWidth","textareaBorderColor","textareaBorderTopColor","textareaShadow","textareaColor","textareaWidth","transitionDuration","transitionTimingFunction","textareaBorderRadius","textareaBorderColorFocus","textareaOutlineWidth","textareaPlaceholderColorLight","textareaPlaceholderColor","textareaSmall","textareaPaddingYSmall","textareaPaddingXSmall","textareaMinHeightSmall","textareaMedium","textareaPaddingYMedium","textareaPaddingXMedium","textareaMinHeightMedium","textareaLarge","textareaPaddingYLarge","textareaPaddingXLarge","textareaMinHeightLarge","hovering","textareaBorderColorHover","error","textareaBorderColorError","warning","textareaBorderColorWarning","disabled","textareaTextColorDisabled","textareaDisabledBg","textareaDisabledBorderColor","textareaPlaceholderColorDisabled","fake","placeholder","counterContainer","counter","textareaCounterBg","textareaCounterColor","counterSmall","counterMedium","counterLarge","counterError","textareaCounterErrorColor","counterHelp","disableAnimations"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { counterSizeMixin, rootTextareaSizeMixin, textareaSizeMixin } from './Textarea.mixins';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      display: inline-block;\n      position: relative;\n    `;\n  },\n  rootSmall(t: Theme) {\n    return css`\n      ${rootTextareaSizeMixin(t.textareaFontSizeSmall, t.textareaLineHeightSmall)};\n    `;\n  },\n  rootMedium(t: Theme) {\n    return css`\n      ${rootTextareaSizeMixin(t.textareaFontSizeMedium, t.textareaLineHeightMedium)};\n    `;\n  },\n  rootLarge(t: Theme) {\n    return css`\n      ${rootTextareaSizeMixin(t.textareaFontSizeLarge, t.textareaLineHeightLarge)};\n    `;\n  },\n\n  textarea(t: Theme) {\n    return css`\n      -webkit-appearance: none;\n      background: ${t.textareaBg};\n      background-clip: ${t.textareaBackgroundClip};\n      border: ${t.textareaBorderWidth} solid ${t.textareaBorderColor};\n      border-top-color: ${t.textareaBorderTopColor};\n      box-shadow: ${t.textareaShadow};\n      box-sizing: border-box;\n      color: ${t.textareaColor};\n      font-family: inherit;\n      font-size: inherit;\n      line-height: inherit;\n      max-width: 100%;\n      min-width: ${t.textareaWidth};\n      outline: none;\n      transition: border-color ${t.transitionDuration} ${t.transitionTimingFunction}, height 0.2s ease-out;\n      vertical-align: middle;\n      width: 100%;\n      border-radius: ${t.textareaBorderRadius};\n      white-space: pre-wrap;\n\n      &:focus {\n        border-color: ${t.textareaBorderColorFocus};\n        box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorFocus};\n        position: relative;\n        z-index: 2;\n\n        &::placeholder {\n          color: ${t.textareaPlaceholderColorLight};\n        }\n      }\n\n      &::placeholder {\n        color: ${t.textareaPlaceholderColor};\n      }\n\n      &:-moz-placeholder {\n        color: ${t.textareaPlaceholderColor};\n      }\n\n      &::-moz-placeholder {\n        color: ${t.textareaPlaceholderColor};\n      }\n    `;\n  },\n  textareaSmall(t: Theme) {\n    return css`\n      ${textareaSizeMixin(t.textareaPaddingYSmall, t.textareaPaddingXSmall, t.textareaMinHeightSmall)};\n    `;\n  },\n  textareaMedium(t: Theme) {\n    return css`\n      ${textareaSizeMixin(t.textareaPaddingYMedium, t.textareaPaddingXMedium, t.textareaMinHeightMedium)};\n    `;\n  },\n  textareaLarge(t: Theme) {\n    return css`\n      ${textareaSizeMixin(t.textareaPaddingYLarge, t.textareaPaddingXLarge, t.textareaMinHeightLarge)};\n    `;\n  },\n\n  hovering(t: Theme) {\n    return css`\n      &:enabled:hover:not(:focus) {\n        border-color: ${t.textareaBorderColorHover};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      border-color: ${t.textareaBorderColorError};\n      box-shadow: 0 0 0 ${t.textareaBorderWidth} ${t.textareaBorderColorError};\n\n      &:focus {\n        border-color: ${t.textareaBorderColorError};\n        box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorError};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      border-color: ${t.textareaBorderColorWarning};\n      box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\n\n      &:focus {\n        border-color: ${t.textareaBorderColorWarning};\n        box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\n      }\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      color: ${t.textareaTextColorDisabled};\n      background: ${t.textareaDisabledBg};\n      border-color: ${t.textareaDisabledBorderColor};\n      box-shadow: none;\n\n      &::placeholder {\n        color: ${t.textareaPlaceholderColorDisabled};\n      }\n    `;\n  },\n\n  fake() {\n    return css`\n      height: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      visibility: hidden;\n      width: 100%;\n    `;\n  },\n\n  placeholder() {\n    return css`\n      -ms-user-select: none;\n      color: #aaa;\n      left: 12px;\n      overflow: hidden;\n      position: absolute;\n      right: 12px;\n      top: 9px;\n      user-select: none;\n      z-index: 3;\n    `;\n  },\n\n  counterContainer(t: Theme) {\n    return css`\n      position: absolute;\n      top: 0;\n      border: ${t.textareaBorderWidth} solid transparent;\n      box-sizing: content-box;\n    `;\n  },\n\n  counter(t: Theme) {\n    return css`\n      position: absolute;\n      z-index: 3;\n      text-align: right;\n      background: ${t.textareaCounterBg};\n      color: ${t.textareaCounterColor};\n      border-radius: 2px;\n    `;\n  },\n  counterSmall(t: Theme) {\n    return css`\n      ${counterSizeMixin(t.textareaPaddingYSmall, t.textareaPaddingXSmall)};\n    `;\n  },\n  counterMedium(t: Theme) {\n    return css`\n      ${counterSizeMixin(t.textareaPaddingYMedium, t.textareaPaddingXMedium)};\n    `;\n  },\n  counterLarge(t: Theme) {\n    return css`\n      ${counterSizeMixin(t.textareaPaddingYLarge, t.textareaPaddingXLarge)};\n    `;\n  },\n\n  counterError(t: Theme) {\n    return css`\n      color: ${t.textareaCounterErrorColor};\n    `;\n  },\n\n  counterHelp() {\n    return css`\n      margin-left: 4px;\n      cursor: pointer;\n    `;\n  },\n\n  disableAnimations() {\n    return css`\n      transition: none;\n    `;\n  },\n});\n"]}

package/components/Textarea/Textarea.styles.d.ts

@@ -1,7 +1,13 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
-    root(t: Theme): string;
+    root(): string;
+    rootSmall(t: Theme): string;
+    rootMedium(t: Theme): string;
+    rootLarge(t: Theme): string;
     textarea(t: Theme): string;
+    textareaSmall(t: Theme): string;
+    textareaMedium(t: Theme): string;
+    textareaLarge(t: Theme): string;
     hovering(t: Theme): string;
     error(t: Theme): string;
     warning(t: Theme): string;
@@ -10,6 +16,9 @@ export declare const styles: {
     placeholder(): string;
     counterContainer(t: Theme): string;
     counter(t: Theme): string;
+    counterSmall(t: Theme): string;
+    counterMedium(t: Theme): string;
+    counterLarge(t: Theme): string;
     counterError(t: Theme): string;
     counterHelp(): string;
     disableAnimations(): string;

package/components/Textarea/TextareaCounter/TextareaCounter.js

@@ -23,7 +23,8 @@ export var TextareaCounter = forwardRefAndName('TextareaCounter', function (_ref
       value = _ref.value,
       help = _ref.help,
       onCloseHelp = _ref.onCloseHelp,
-      textarea = _ref.textarea;
+      textarea = _ref.textarea,
+      size = _ref.size;
   var theme = useContext(ThemeContext);
 
   var _useState = useState(textarea.clientWidth),
@@ -62,15 +63,30 @@ export var TextareaCounter = forwardRefAndName('TextareaCounter', function (_ref
     render: renderTooltipContent,
     onCloseClick: onCloseHelp
   }, helpIcon);
+
+  var getCounterSizeClassName = function getCounterSizeClassName() {
+    switch (size) {
+      case 'large':
+        return styles.counterLarge(theme);
+
+      case 'medium':
+        return styles.counterMedium(theme);
+
+      case 'small':
+      default:
+        return styles.counterSmall(theme);
+    }
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     "data-tid": TextareaDataTids.counter,
-    className: styles.counterContainer(theme),
+    className: cx(styles.counterContainer(theme)),
     style: {
       width: width,
       height: height
     }
   }, /*#__PURE__*/React.createElement("span", {
-    className: cx(styles.counter(theme), (_cx = {}, _cx[styles.counterError(theme)] = counterValue < 0, _cx))
+    className: cx(getCounterSizeClassName(), styles.counter(theme), (_cx = {}, _cx[styles.counterError(theme)] = counterValue < 0, _cx))
   }, counterValue, help && /*#__PURE__*/React.createElement("span", {
     className: styles.counterHelp()
   }, counterHelp)));

package/components/Textarea/TextareaCounter/TextareaCounter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TextareaCounter.tsx"],"names":["React","useContext","useCallback","useImperativeHandle","useState","propTypes","safePropTypesInstanceOf","forwardRefAndName","HelpDotIcon","ThemeContext","isFunction","Tooltip","cx","isTheme2022","QuestionCircleIcon16Solid","TextareaDataTids","styles","handleHelpMouseDown","e","preventDefault","TextareaCounter","ref","length","value","help","onCloseHelp","textarea","theme","clientWidth","width","setWidth","clientHeight","height","setHeight","reflow","renderTooltipContent","textareaValue","toString","counterValue","helpIconProps","onMouseDown","color","textareaCounterHelpIconColor","helpIcon","counterHelp","counter","counterContainer","counterError","number","isRequired","oneOfType","string","node","func","HTMLElement"],"mappings":"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","sourcesContent":["import React, { SyntheticEvent, useContext, useCallback, useImperativeHandle, useState } from 'react';\nimport propTypes from 'prop-types';\n\nimport { safePropTypesInstanceOf } from '../../lib/SSRSafe';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { HelpDotIcon } from '../../internal/icons/16px';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isFunction } from '../../lib/utils';\nimport { Tooltip } from '../Tooltip';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { QuestionCircleIcon16Solid } from '../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Solid';\n\nimport { TextareaDataTids, TextareaProps } from './Textarea';\nimport { styles } from './Textarea.styles';\n\nexport interface TextareaCounterProps {\n  value: TextareaProps['value'];\n  length: number;\n  help: TextareaProps['counterHelp'];\n  onCloseHelp: () => void;\n  textarea: HTMLTextAreaElement;\n}\n\nexport interface TextareaCounterRef {\n  reflow: () => void;\n}\n\nconst handleHelpMouseDown = (e: SyntheticEvent) => e.preventDefault();\n\nexport const TextareaCounter = forwardRefAndName<TextareaCounterRef, TextareaCounterProps>(\n  'TextareaCounter',\n  ({ length, value, help, onCloseHelp, textarea }, ref) => {\n    const theme = useContext(ThemeContext);\n    const [width, setWidth] = useState(textarea.clientWidth);\n    const [height, setHeight] = useState(textarea.clientHeight);\n    const reflow = useCallback(() => {\n      const { clientWidth, clientHeight } = textarea;\n      setWidth(clientWidth);\n      setHeight(clientHeight);\n    }, [textarea]);\n    useImperativeHandle(ref, () => ({ reflow }), [reflow]);\n    const renderTooltipContent = useCallback(() => help, [help]);\n    const textareaValue = value ? value.toString().length : 0;\n    const counterValue = length - textareaValue;\n\n    const helpIconProps = {\n      onMouseDown: handleHelpMouseDown,\n      color: theme.textareaCounterHelpIconColor,\n      'data-tid': TextareaDataTids.helpIcon,\n    };\n    const helpIcon = isTheme2022(theme) ? (\n      <QuestionCircleIcon16Solid {...helpIconProps} />\n    ) : (\n      <HelpDotIcon {...helpIconProps} />\n    );\n    const counterHelp = isFunction(help) ? (\n      help()\n    ) : (\n      <Tooltip pos={'right bottom'} trigger={'click'} render={renderTooltipContent} onCloseClick={onCloseHelp}>\n        {helpIcon}\n      </Tooltip>\n    );\n\n    return (\n      <div data-tid={TextareaDataTids.counter} className={styles.counterContainer(theme)} style={{ width, height }}>\n        <span\n          className={cx(styles.counter(theme), {\n            [styles.counterError(theme)]: counterValue < 0,\n          })}\n        >\n          {counterValue}\n          {help && <span className={styles.counterHelp()}>{counterHelp}</span>}\n        </span>\n      </div>\n    );\n  },\n);\n\nTextareaCounter.propTypes = {\n  length: propTypes.number.isRequired,\n  value: propTypes.oneOfType([propTypes.string, propTypes.number]),\n  help: propTypes.oneOfType([propTypes.node, propTypes.func]),\n  onCloseHelp: propTypes.func.isRequired,\n  textarea: safePropTypesInstanceOf(() => HTMLElement).isRequired,\n};\n"]}
+{"version":3,"sources":["TextareaCounter.tsx"],"names":["React","useContext","useCallback","useImperativeHandle","useState","propTypes","safePropTypesInstanceOf","forwardRefAndName","HelpDotIcon","ThemeContext","isFunction","Tooltip","cx","isTheme2022","QuestionCircleIcon16Solid","TextareaDataTids","styles","handleHelpMouseDown","e","preventDefault","TextareaCounter","ref","length","value","help","onCloseHelp","textarea","size","theme","clientWidth","width","setWidth","clientHeight","height","setHeight","reflow","renderTooltipContent","textareaValue","toString","counterValue","helpIconProps","onMouseDown","color","textareaCounterHelpIconColor","helpIcon","counterHelp","getCounterSizeClassName","counterLarge","counterMedium","counterSmall","counter","counterContainer","counterError","number","isRequired","oneOfType","string","node","func","HTMLElement"],"mappings":"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","sourcesContent":["import React, { SyntheticEvent, useContext, useCallback, useImperativeHandle, useState } from 'react';\nimport propTypes from 'prop-types';\n\nimport { safePropTypesInstanceOf } from '../../lib/SSRSafe';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { HelpDotIcon } from '../../internal/icons/16px';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isFunction } from '../../lib/utils';\nimport { Tooltip } from '../Tooltip';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { QuestionCircleIcon16Solid } from '../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Solid';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { TextareaDataTids, TextareaProps } from './Textarea';\nimport { styles } from './Textarea.styles';\n\nexport interface TextareaCounterProps {\n  value: TextareaProps['value'];\n  length: number;\n  help: TextareaProps['counterHelp'];\n  onCloseHelp: () => void;\n  textarea: HTMLTextAreaElement;\n  size: SizeProp;\n}\n\nexport interface TextareaCounterRef {\n  reflow: () => void;\n}\n\nconst handleHelpMouseDown = (e: SyntheticEvent) => e.preventDefault();\n\nexport const TextareaCounter = forwardRefAndName<TextareaCounterRef, TextareaCounterProps>(\n  'TextareaCounter',\n  ({ length, value, help, onCloseHelp, textarea, size }, ref) => {\n    const theme = useContext(ThemeContext);\n    const [width, setWidth] = useState(textarea.clientWidth);\n    const [height, setHeight] = useState(textarea.clientHeight);\n    const reflow = useCallback(() => {\n      const { clientWidth, clientHeight } = textarea;\n      setWidth(clientWidth);\n      setHeight(clientHeight);\n    }, [textarea]);\n    useImperativeHandle(ref, () => ({ reflow }), [reflow]);\n    const renderTooltipContent = useCallback(() => help, [help]);\n    const textareaValue = value ? value.toString().length : 0;\n    const counterValue = length - textareaValue;\n\n    const helpIconProps = {\n      onMouseDown: handleHelpMouseDown,\n      color: theme.textareaCounterHelpIconColor,\n      'data-tid': TextareaDataTids.helpIcon,\n    };\n    const helpIcon = isTheme2022(theme) ? (\n      <QuestionCircleIcon16Solid {...helpIconProps} />\n    ) : (\n      <HelpDotIcon {...helpIconProps} />\n    );\n    const counterHelp = isFunction(help) ? (\n      help()\n    ) : (\n      <Tooltip pos={'right bottom'} trigger={'click'} render={renderTooltipContent} onCloseClick={onCloseHelp}>\n        {helpIcon}\n      </Tooltip>\n    );\n\n    const getCounterSizeClassName = () => {\n      switch (size) {\n        case 'large':\n          return styles.counterLarge(theme);\n        case 'medium':\n          return styles.counterMedium(theme);\n        case 'small':\n        default:\n          return styles.counterSmall(theme);\n      }\n    };\n\n    return (\n      <div data-tid={TextareaDataTids.counter} className={cx(styles.counterContainer(theme))} style={{ width, height }}>\n        <span\n          className={cx(getCounterSizeClassName(), styles.counter(theme), {\n            [styles.counterError(theme)]: counterValue < 0,\n          })}\n        >\n          {counterValue}\n          {help && <span className={styles.counterHelp()}>{counterHelp}</span>}\n        </span>\n      </div>\n    );\n  },\n);\n\nTextareaCounter.propTypes = {\n  length: propTypes.number.isRequired,\n  value: propTypes.oneOfType([propTypes.string, propTypes.number]),\n  help: propTypes.oneOfType([propTypes.node, propTypes.func]),\n  onCloseHelp: propTypes.func.isRequired,\n  textarea: safePropTypesInstanceOf(() => HTMLElement).isRequired,\n};\n"]}

package/components/Textarea/TextareaCounter.d.ts

@@ -1,3 +1,4 @@
+import { SizeProp } from '../../lib/types/props';
 import { TextareaProps } from './Textarea';
 export interface TextareaCounterProps {
     value: TextareaProps['value'];
@@ -5,6 +6,7 @@ export interface TextareaCounterProps {
     help: TextareaProps['counterHelp'];
     onCloseHelp: () => void;
     textarea: HTMLTextAreaElement;
+    size: SizeProp;
 }
 export interface TextareaCounterRef {
     reflow: () => void;

package/components/Toast/Toast/Toast.js

@@ -151,6 +151,7 @@ export var Toast = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       onMouseLeave: this._setTimer,
       onClose: this.close,
       children: notification,
+      'aria-label': this.props['aria-label'],
       action: action
     };
     return /*#__PURE__*/React.createElement(CSSTransition, {

package/components/Toast/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Toast.tsx"],"names":["React","CSSTransition","TransitionGroup","RenderContainer","CommonWrapper","isTestEnv","rootNode","styles","ToastView","ToastStatic","ToastDataTids","toastStatic","toastView","action","close","Toast","push","notification","showTime","props","_timeout","rootRef","createRef","safelyCall","onClose","state","setState","setRootRef","element","setRootNode","current","_clearTimer","clearTimeout","_setTimer","window","setTimeout","_refToast","_toast","id","componentWillUnmount","render","_renderToast","onPush","toastProps","onMouseEnter","onMouseLeave","children","enter","enterActive","exit","exitActive","Component","__KONTUR_REACT_UI__","fn","args"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\n\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Toast.styles';\nimport { ToastView, ToastViewProps } from './ToastView';\nimport { ToastStatic } from './ToastStatic';\n\nexport interface Action {\n  label: string;\n  handler: () => void;\n}\n\nexport interface ToastState {\n  notification: Nullable<string>;\n  action: Nullable<Action>;\n  id: number;\n  showTime: Nullable<number>;\n}\n\nexport interface ToastProps extends CommonProps {\n  onPush?: (notification: string, action?: Action) => void;\n  onClose?: (notification: string, action?: Action) => void;\n}\n\nexport const ToastDataTids = {\n  toastStatic: 'StaticToast',\n  toastView: 'ToastView__root',\n  action: 'ToastView__action',\n  close: 'ToastView__close',\n} as const;\n\n/**\n * Показывает уведомления.\n *\n * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.\n * Однако, при его использовании не работает кастомизация и могут быть проблемы\n * с перекрытием уведомления другими элементами страницы.\n *\n * Рекомендуется использовать Toast через `ref` (см. примеры).\n */\n@rootNode\nexport class Toast extends React.Component<ToastProps, ToastState> {\n  public static __KONTUR_REACT_UI__ = 'Toast';\n  private setRootNode!: TSetRootNode;\n\n  public static push(notification: string, action?: Nullable<Action>, showTime?: number) {\n    ToastStatic.push(notification, action, showTime);\n  }\n\n  public static close() {\n    ToastStatic.close();\n  }\n\n  public _toast: Nullable<ToastView>;\n  private _timeout: Nullable<number> = null;\n  private rootRef = React.createRef<HTMLElement>();\n\n  constructor(props: ToastProps) {\n    super(props);\n    this.state = {\n      notification: null,\n      action: null,\n      id: 0,\n      showTime: null,\n    };\n  }\n\n  public componentWillUnmount() {\n    this._clearTimer();\n  }\n\n  public render() {\n    return (\n      <RenderContainer>\n        <TransitionGroup>{this._renderToast()}</TransitionGroup>\n      </RenderContainer>\n    );\n  }\n\n  /**\n   * Показывает тост с `notification` в качестве сообщения.\n   * Тост автоматически скрывается через 3 или 7 секунд,\n   * в зависимости от наличия у него кнопки `action`.\n   * Время показа можно задать вручную, передав `showTime`.\n   *\n   * @public\n   * @param {string} notification\n   * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`\n   * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler\n   * @param {number} showTime Время существования Toast в миллисекундах\n   */\n  public push(notification: string, action?: Nullable<Action>, showTime?: number) {\n    if (this.state.notification) {\n      this.close();\n    }\n\n    safelyCall(this.props.onPush, notification, action);\n\n    this.setState(({ id }) => ({ notification, action, id: id + 1, showTime }), this._setTimer);\n  }\n\n  /**\n   * @public\n   */\n  public close = () => {\n    safelyCall(this.props.onClose, this.state.notification, this.state.action);\n    this.setState({ notification: null, action: null });\n  };\n\n  private _renderToast() {\n    const { notification, action, id } = this.state;\n\n    if (!notification) {\n      return null;\n    }\n\n    const toastProps: ToastViewProps = {\n      onMouseEnter: this._clearTimer,\n      onMouseLeave: this._setTimer,\n      onClose: this.close,\n      children: notification,\n      action,\n    };\n\n    return (\n      <CSSTransition\n        key={id}\n        classNames={{\n          enter: styles.enter(),\n          enterActive: styles.enterActive(),\n          exit: styles.exit(),\n          exitActive: styles.exitActive(),\n        }}\n        timeout={{\n          enter: 200,\n          exit: 150,\n        }}\n        enter={!isTestEnv}\n        exit={!isTestEnv}\n        nodeRef={this.rootRef}\n      >\n        <CommonWrapper rootNodeRef={this.setRootRef} {...this.props}>\n          <ToastView ref={this._refToast} {...toastProps} />\n        </CommonWrapper>\n      </CSSTransition>\n    );\n  }\n\n  private setRootRef = (element: Nullable<Element>) => {\n    this.setRootNode(element);\n    // @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.\n    this.rootRef.current = element;\n  };\n\n  private _clearTimer = () => {\n    if (this._timeout) {\n      clearTimeout(this._timeout);\n      this._timeout = null;\n    }\n  };\n\n  private _setTimer = () => {\n    this._clearTimer();\n\n    let showTime = this.state.action ? 7000 : 3000;\n    showTime = this.state.showTime ?? showTime;\n\n    this._timeout = window.setTimeout(this.close, showTime);\n  };\n\n  private _refToast = (element: ToastView) => {\n    this._toast = element;\n  };\n}\n\nfunction safelyCall(fn: Nullable<(a?: any) => any>, ...args: any[]) {\n  if (fn) {\n    fn(...args);\n  }\n}\n"]}
+{"version":3,"sources":["Toast.tsx"],"names":["React","CSSTransition","TransitionGroup","RenderContainer","CommonWrapper","isTestEnv","rootNode","styles","ToastView","ToastStatic","ToastDataTids","toastStatic","toastView","action","close","Toast","push","notification","showTime","props","_timeout","rootRef","createRef","safelyCall","onClose","state","setState","setRootRef","element","setRootNode","current","_clearTimer","clearTimeout","_setTimer","window","setTimeout","_refToast","_toast","id","componentWillUnmount","render","_renderToast","onPush","toastProps","onMouseEnter","onMouseLeave","children","enter","enterActive","exit","exitActive","Component","__KONTUR_REACT_UI__","fn","args"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\n\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Toast.styles';\nimport { ToastView, ToastViewProps } from './ToastView';\nimport { ToastStatic } from './ToastStatic';\n\nexport interface Action {\n  label: string;\n  handler: () => void;\n  'aria-label'?: string;\n}\n\nexport interface ToastState {\n  notification: Nullable<string>;\n  action: Nullable<Action>;\n  id: number;\n  showTime: Nullable<number>;\n}\n\nexport interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n  onPush?: (notification: string, action?: Action) => void;\n  onClose?: (notification: string, action?: Action) => void;\n}\n\nexport const ToastDataTids = {\n  toastStatic: 'StaticToast',\n  toastView: 'ToastView__root',\n  action: 'ToastView__action',\n  close: 'ToastView__close',\n} as const;\n\n/**\n * Показывает уведомления.\n *\n * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.\n * Однако, при его использовании не работает кастомизация и могут быть проблемы\n * с перекрытием уведомления другими элементами страницы.\n *\n * Рекомендуется использовать Toast через `ref` (см. примеры).\n */\n@rootNode\nexport class Toast extends React.Component<ToastProps, ToastState> {\n  public static __KONTUR_REACT_UI__ = 'Toast';\n  private setRootNode!: TSetRootNode;\n\n  public static push(notification: string, action?: Nullable<Action>, showTime?: number) {\n    ToastStatic.push(notification, action, showTime);\n  }\n\n  public static close() {\n    ToastStatic.close();\n  }\n\n  public _toast: Nullable<ToastView>;\n  private _timeout: Nullable<number> = null;\n  private rootRef = React.createRef<HTMLElement>();\n\n  constructor(props: ToastProps) {\n    super(props);\n    this.state = {\n      notification: null,\n      action: null,\n      id: 0,\n      showTime: null,\n    };\n  }\n\n  public componentWillUnmount() {\n    this._clearTimer();\n  }\n\n  public render() {\n    return (\n      <RenderContainer>\n        <TransitionGroup>{this._renderToast()}</TransitionGroup>\n      </RenderContainer>\n    );\n  }\n\n  /**\n   * Показывает тост с `notification` в качестве сообщения.\n   * Тост автоматически скрывается через 3 или 7 секунд,\n   * в зависимости от наличия у него кнопки `action`.\n   * Время показа можно задать вручную, передав `showTime`.\n   *\n   * @public\n   * @param {string} notification\n   * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`\n   * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler\n   * @param {number} showTime Время существования Toast в миллисекундах\n   */\n  public push(notification: string, action?: Nullable<Action>, showTime?: number) {\n    if (this.state.notification) {\n      this.close();\n    }\n\n    safelyCall(this.props.onPush, notification, action);\n\n    this.setState(({ id }) => ({ notification, action, id: id + 1, showTime }), this._setTimer);\n  }\n\n  /**\n   * @public\n   */\n  public close = () => {\n    safelyCall(this.props.onClose, this.state.notification, this.state.action);\n    this.setState({ notification: null, action: null });\n  };\n\n  private _renderToast() {\n    const { notification, action, id } = this.state;\n\n    if (!notification) {\n      return null;\n    }\n\n    const toastProps: ToastViewProps = {\n      onMouseEnter: this._clearTimer,\n      onMouseLeave: this._setTimer,\n      onClose: this.close,\n      children: notification,\n      'aria-label': this.props['aria-label'],\n      action,\n    };\n\n    return (\n      <CSSTransition\n        key={id}\n        classNames={{\n          enter: styles.enter(),\n          enterActive: styles.enterActive(),\n          exit: styles.exit(),\n          exitActive: styles.exitActive(),\n        }}\n        timeout={{\n          enter: 200,\n          exit: 150,\n        }}\n        enter={!isTestEnv}\n        exit={!isTestEnv}\n        nodeRef={this.rootRef}\n      >\n        <CommonWrapper rootNodeRef={this.setRootRef} {...this.props}>\n          <ToastView ref={this._refToast} {...toastProps} />\n        </CommonWrapper>\n      </CSSTransition>\n    );\n  }\n\n  private setRootRef = (element: Nullable<Element>) => {\n    this.setRootNode(element);\n    // @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.\n    this.rootRef.current = element;\n  };\n\n  private _clearTimer = () => {\n    if (this._timeout) {\n      clearTimeout(this._timeout);\n      this._timeout = null;\n    }\n  };\n\n  private _setTimer = () => {\n    this._clearTimer();\n\n    let showTime = this.state.action ? 7000 : 3000;\n    showTime = this.state.showTime ?? showTime;\n\n    this._timeout = window.setTimeout(this.close, showTime);\n  };\n\n  private _refToast = (element: ToastView) => {\n    this._toast = element;\n  };\n}\n\nfunction safelyCall(fn: Nullable<(a?: any) => any>, ...args: any[]) {\n  if (fn) {\n    fn(...args);\n  }\n}\n"]}

package/components/Toast/Toast.d.ts

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import { Nullable } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { ToastView } from './ToastView';
 export interface Action {
     label: string;
     handler: () => void;
+    'aria-label'?: string;
 }
 export interface ToastState {
     notification: Nullable<string>;
@@ -12,7 +13,7 @@ export interface ToastState {
     id: number;
     showTime: Nullable<number>;
 }
-export interface ToastProps extends CommonProps {
+export interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {
     onPush?: (notification: string, action?: Action) => void;
     onClose?: (notification: string, action?: Action) => void;
 }

package/components/Toast/ToastView/ToastView.js

@@ -3,10 +3,11 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _excluded = ["action", "onClose"];
 
-var _class, _class2, _temp;
+var _dec, _class, _class2, _temp;
 
 import React from 'react';
 import { func, shape, string } from 'prop-types';
+import { locale } from "../../../lib/locale/decorators";
 import { CrossIcon } from "../../../internal/icons/CrossIcon";
 import { ZIndex } from "../../../internal/ZIndex";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
@@ -16,7 +17,8 @@ import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
 import { CloseButtonIcon } from "../../../internal/CloseButtonIcon/CloseButtonIcon";
 import { styles } from "../ToastView.styles";
 import { ToastDataTids } from "../Toast";
-export var ToastView = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+import { ToastLocaleHelper } from "../locale";
+export var ToastView = (_dec = locale('Toast', ToastLocaleHelper), rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ToastView, _React$Component);
 
   function ToastView() {
@@ -33,7 +35,8 @@ export var ToastView = rootNode(_class = (_temp = _class2 = /*#__PURE__*/functio
           onClose = props.onClose,
           rest = _objectWithoutPropertiesLoose(props, _excluded);
 
-      var link = action ? /*#__PURE__*/React.createElement("span", {
+      var link = action ? /*#__PURE__*/React.createElement("button", {
+        "aria-label": action['aria-label'],
         "data-tid": ToastDataTids.action,
         className: styles.link(_this.theme),
         onClick: action.handler
@@ -41,6 +44,7 @@ export var ToastView = rootNode(_class = (_temp = _class2 = /*#__PURE__*/functio
       var close = action ? /*#__PURE__*/React.createElement("span", {
         className: styles.closeWrapper(_this.theme)
       }, /*#__PURE__*/React.createElement("span", {
+        "aria-label": _this.locale.closeButtonAriaLabel,
         "data-tid": ToastDataTids.close,
         className: styles.close(_this.theme),
         onClick: onClose
@@ -50,6 +54,7 @@ export var ToastView = rootNode(_class = (_temp = _class2 = /*#__PURE__*/functio
         close = /*#__PURE__*/React.createElement("span", {
           className: styles.closeWrapper(_this.theme)
         }, /*#__PURE__*/React.createElement(CloseButtonIcon, {
+          "aria-label": _this.locale.closeButtonAriaLabel,
           "data-tid": ToastDataTids.close,
           onClick: onClose,
           size: parseInt(_this.theme.toastCloseSize),
@@ -100,4 +105,4 @@ export var ToastView = rootNode(_class = (_temp = _class2 = /*#__PURE__*/functio
   */
   children: string.isRequired,
   onClose: func
-}, _temp)) || _class;
+}, _temp)) || _class) || _class);

package/components/Toast/ToastView/ToastView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ToastView.tsx"],"names":["React","func","shape","string","CrossIcon","ZIndex","ThemeContext","CommonWrapper","rootNode","isTheme2022","CloseButtonIcon","styles","ToastDataTids","ToastView","renderMain","props","action","onClose","rest","link","theme","handler","label","close","closeWrapper","parseInt","toastCloseSize","toastCloseColor","toastCloseHoverColor","wrapper","toastView","root","setRootNode","children","render","Component","propTypes","isRequired"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { func, shape, string } from 'prop-types';\n\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\n\nimport { styles } from './ToastView.styles';\nimport { ToastDataTids } from './Toast';\n\nexport interface ToastViewProps extends CommonProps {\n  /**\n   * Toast content\n   */\n  children?: string;\n  /**\n   * Adds action handling and close icon for toast\n   */\n  action?: {\n    label: string;\n    handler: () => void;\n  } | null;\n  onClose?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n}\n\n@rootNode\nexport class ToastView extends React.Component<ToastViewProps> {\n  public static propTypes = {\n    /**\n     * Adds action handling and close icon for toast\n     */\n    action: shape({\n      label: string.isRequired,\n      handler: func.isRequired,\n    }),\n    /**\n     * Toast content\n     */\n    children: string.isRequired,\n    onClose: func,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<ToastViewProps>) => {\n    const { action, onClose, ...rest } = props;\n\n    const link = action ? (\n      <span data-tid={ToastDataTids.action} className={styles.link(this.theme)} onClick={action.handler}>\n        {action.label}\n      </span>\n    ) : null;\n\n    let close = action ? (\n      <span className={styles.closeWrapper(this.theme)}>\n        <span data-tid={ToastDataTids.close} className={styles.close(this.theme)} onClick={onClose}>\n          <CrossIcon />\n        </span>\n      </span>\n    ) : null;\n\n    if (isTheme2022(this.theme) && close) {\n      close = (\n        <span className={styles.closeWrapper(this.theme)}>\n          <CloseButtonIcon\n            data-tid={ToastDataTids.close}\n            onClick={onClose}\n            size={parseInt(this.theme.toastCloseSize)}\n            side={40}\n            color={this.theme.toastCloseColor}\n            colorHover={this.theme.toastCloseHoverColor}\n            tabbable={false}\n          />\n        </span>\n      );\n    }\n\n    return (\n      <ZIndex priority=\"Toast\" className={styles.wrapper(this.theme)}>\n        <div data-tid={ToastDataTids.toastView} {...rest} className={styles.root(this.theme)} ref={this.setRootNode}>\n          <span>{this.props.children}</span>\n          {link}\n          {close}\n        </div>\n      </ZIndex>\n    );\n  };\n}\n"]}
+{"version":3,"sources":["ToastView.tsx"],"names":["React","func","shape","string","locale","CrossIcon","ZIndex","ThemeContext","CommonWrapper","rootNode","isTheme2022","CloseButtonIcon","styles","ToastDataTids","ToastLocaleHelper","ToastView","renderMain","props","action","onClose","rest","link","theme","handler","label","close","closeWrapper","closeButtonAriaLabel","parseInt","toastCloseSize","toastCloseColor","toastCloseHoverColor","wrapper","toastView","root","setRootNode","children","render","Component","propTypes","isRequired"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { func, shape, string } from 'prop-types';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Nullable } from '../../typings/utility-types';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\n\nimport { styles } from './ToastView.styles';\nimport { Action, ToastDataTids } from './Toast';\nimport { ToastLocale, ToastLocaleHelper } from './locale';\n\nexport interface ToastViewProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n  /**\n   * Toast content\n   */\n  children?: string;\n  /**\n   * Adds action handling and close icon for toast\n   */\n  action?: Nullable<Action>;\n  onClose?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n}\n\n@rootNode\n@locale('Toast', ToastLocaleHelper)\nexport class ToastView extends React.Component<ToastViewProps> {\n  public static propTypes = {\n    /**\n     * Adds action handling and close icon for toast\n     */\n    action: shape({\n      label: string.isRequired,\n      handler: func.isRequired,\n    }),\n    /**\n     * Toast content\n     */\n    children: string.isRequired,\n    onClose: func,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n  private readonly locale!: ToastLocale;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<ToastViewProps>) => {\n    const { action, onClose, ...rest } = props;\n\n    const link = action ? (\n      <button\n        aria-label={action['aria-label']}\n        data-tid={ToastDataTids.action}\n        className={styles.link(this.theme)}\n        onClick={action.handler}\n      >\n        {action.label}\n      </button>\n    ) : null;\n\n    let close = action ? (\n      <span className={styles.closeWrapper(this.theme)}>\n        <span\n          aria-label={this.locale.closeButtonAriaLabel}\n          data-tid={ToastDataTids.close}\n          className={styles.close(this.theme)}\n          onClick={onClose}\n        >\n          <CrossIcon />\n        </span>\n      </span>\n    ) : null;\n\n    if (isTheme2022(this.theme) && close) {\n      close = (\n        <span className={styles.closeWrapper(this.theme)}>\n          <CloseButtonIcon\n            aria-label={this.locale.closeButtonAriaLabel}\n            data-tid={ToastDataTids.close}\n            onClick={onClose}\n            size={parseInt(this.theme.toastCloseSize)}\n            side={40}\n            color={this.theme.toastCloseColor}\n            colorHover={this.theme.toastCloseHoverColor}\n            tabbable={false}\n          />\n        </span>\n      );\n    }\n\n    return (\n      <ZIndex priority=\"Toast\" className={styles.wrapper(this.theme)}>\n        <div data-tid={ToastDataTids.toastView} {...rest} className={styles.root(this.theme)} ref={this.setRootNode}>\n          <span>{this.props.children}</span>\n          {link}\n          {close}\n        </div>\n      </ZIndex>\n    );\n  };\n}\n"]}

package/components/Toast/ToastView.d.ts

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
+import { Nullable } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
-export interface ToastViewProps extends CommonProps {
+import { Action } from './Toast';
+export interface ToastViewProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {
     /**
      * Toast content
      */
@@ -8,10 +10,7 @@ export interface ToastViewProps extends CommonProps {
     /**
      * Adds action handling and close icon for toast
      */
-    action?: {
-        label: string;
-        handler: () => void;
-    } | null;
+    action?: Nullable<Action>;
     onClose?: () => void;
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
@@ -33,6 +32,7 @@ export declare class ToastView extends React.Component<ToastViewProps> {
     };
     private theme;
     private setRootNode;
+    private readonly locale;
     render(): JSX.Element;
     private renderMain;
 }

package/components/Toast/ToastView.styles/ToastView.styles.js

@@ -38,7 +38,7 @@ export var styles = memoizeStyle({
 
     var marginRight = Math.round(parseInt(t.toastPaddingX) * 1.5) + "px";
     var padding = isTheme2022(t) ? paddingTop + " " + paddingBottom : paddingTop + " 0 " + paddingBottom;
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n\n      margin: -", " ", " -", " ", ";\n\n      padding: ", ";\n\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "])), t.toastLinkColor, paddingTop, marginRight, paddingBottom, t.toastPaddingX, padding, t.toastLinkBgHover, t.toastLinkTextDecorationHover, t.toastLinkBgActive);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      border: none;\n      font: inherit;\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n      background-color: transparent;\n\n      margin: -", " ", " -", " ", ";\n\n      padding: ", ";\n      transition: background ", " ", ";\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "])), t.toastLinkColor, paddingTop, marginRight, paddingBottom, t.toastPaddingX, padding, t.transitionDuration, t.transitionTimingFunction, t.toastLinkBgHover, t.toastLinkTextDecorationHover, t.toastLinkBgActive);
   },
   close: function close(t) {
     return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      box-sizing: content-box !important; // fix \"reset.css\" problem\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      height: ", ";\n      line-height: 0;\n      padding: ", ";\n      text-align: center;\n      width: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), t.toastCloseColor, t.toastCloseSize, t.toastClosePadding, t.toastCloseSize, t.toastCloseHoverColor);