@skbkontur/react-ui 0.0.0-bb4cbfe9c6 → 0.0.0-bc0c053ae7

package/components/Toast/ToastView/ToastView.js

@@ -3,17 +3,22 @@ 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";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { rootNode } from "../../../lib/rootNode";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { CloseButtonIcon } from "../../../internal/CloseButtonIcon/CloseButtonIcon";
 import { styles } from "../ToastView.styles";
-export var ToastView = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+import { ToastDataTids } from "../Toast";
+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() {
@@ -30,23 +35,41 @@ export var ToastView = rootNode(_class = (_temp = _class2 = /*#__PURE__*/functio
           onClose = props.onClose,
           rest = _objectWithoutPropertiesLoose(props, _excluded);
 
-      var link = action ? /*#__PURE__*/React.createElement("span", {
-        "data-tid": "ToastView__action",
+      var link = action ? /*#__PURE__*/React.createElement("button", {
+        "aria-label": action['aria-label'],
+        "data-tid": ToastDataTids.action,
         className: styles.link(_this.theme),
         onClick: action.handler
       }, action.label) : null;
       var close = action ? /*#__PURE__*/React.createElement("span", {
         className: styles.closeWrapper(_this.theme)
       }, /*#__PURE__*/React.createElement("span", {
-        "data-tid": "ToastView__close",
+        "aria-label": _this.locale.closeButtonAriaLabel,
+        "data-tid": ToastDataTids.close,
         className: styles.close(_this.theme),
         onClick: onClose
       }, /*#__PURE__*/React.createElement(CrossIcon, null))) : null;
+
+      if (isTheme2022(_this.theme) && close) {
+        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),
+          side: 40,
+          color: _this.theme.toastCloseColor,
+          colorHover: _this.theme.toastCloseHoverColor,
+          tabbable: false
+        }));
+      }
+
       return /*#__PURE__*/React.createElement(ZIndex, {
         priority: "Toast",
-        className: styles.wrapper()
+        className: styles.wrapper(_this.theme)
       }, /*#__PURE__*/React.createElement("div", _extends({
-        "data-tid": "ToastView__root"
+        "data-tid": ToastDataTids.toastView
       }, rest, {
         className: styles.root(_this.theme),
         ref: _this.setRootNode
@@ -82,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","styles","ToastView","renderMain","props","action","onClose","rest","link","theme","handler","label","close","closeWrapper","wrapper","root","setRootNode","children","render","Component","propTypes","isRequired"],"mappings":"qSAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,MAAtB,QAAoC,YAApC;;AAEA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAAmE,8BAAnE;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,MAAT,QAAuB,oBAAvB;;;;;;;;;;;;;;;;;;;;AAoBA,WAAaC,SAAb,GADCF,QACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BUG,IAAAA,UA9BV,GA8BuB,UAACC,KAAD,EAAmD;AACtE,UAAQC,MAAR,GAAqCD,KAArC,CAAQC,MAAR,CAAgBC,OAAhB,GAAqCF,KAArC,CAAgBE,OAAhB,CAA4BC,IAA5B,iCAAqCH,KAArC;;AAEA,UAAMI,IAAI,GAAGH,MAAM;AACjB,oCAAM,YAAS,mBAAf,EAAmC,SAAS,EAAEJ,MAAM,CAACO,IAAP,CAAY,MAAKC,KAAjB,CAA9C,EAAuE,OAAO,EAAEJ,MAAM,CAACK,OAAvF;AACGL,MAAAA,MAAM,CAACM,KADV,CADiB;;AAIf,UAJJ;;AAMA,UAAMC,KAAK,GAAGP,MAAM;AAClB,oCAAM,SAAS,EAAEJ,MAAM,CAACY,YAAP,CAAoB,MAAKJ,KAAzB,CAAjB;AACE,oCAAM,YAAS,kBAAf,EAAkC,SAAS,EAAER,MAAM,CAACW,KAAP,CAAa,MAAKH,KAAlB,CAA7C,EAAuE,OAAO,EAAEH,OAAhF;AACE,0BAAC,SAAD,OADF,CADF,CADkB;;;AAMhB,UANJ;;AAQA;AACE,4BAAC,MAAD,IAAQ,QAAQ,EAAC,OAAjB,EAAyB,SAAS,EAAEL,MAAM,CAACa,OAAP,EAApC;AACE,8CAAK,YAAS,iBAAd,IAAoCP,IAApC,IAA0C,SAAS,EAAEN,MAAM,CAACc,IAAP,CAAY,MAAKN,KAAjB,CAArD,EAA8E,GAAG,EAAE,MAAKO,WAAxF;AACE,0CAAO,MAAKZ,KAAL,CAAWa,QAAlB,CADF;AAEGT,QAAAA,IAFH;AAGGI,QAAAA,KAHH,CADF,CADF;;;;AASD,KAxDH,uDAmBSM,MAnBT,GAmBE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACT,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBAAO,oBAAC,aAAD,EAAmB,MAAI,CAACL,KAAxB,EAAgC,MAAI,CAACD,UAArC,CAAP,CACD,CAJH,CADF,CAQD,CA5BH,oBAA+BX,KAAK,CAAC2B,SAArC,WACgBC,SADhB,GAC4B,EACxB;AACJ;AACA,KACIf,MAAM,EAAEX,KAAK,CAAC,EACZiB,KAAK,EAAEhB,MAAM,CAAC0B,UADF,EAEZX,OAAO,EAAEjB,IAAI,CAAC4B,UAFF,EAAD,CAJW,EAQxB;AACJ;AACA,KACIJ,QAAQ,EAAEtB,MAAM,CAAC0B,UAXO,EAYxBf,OAAO,EAAEb,IAZe,EAD5B","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';\n\nimport { styles } from './ToastView.styles';\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=\"ToastView__action\" className={styles.link(this.theme)} onClick={action.handler}>\n        {action.label}\n      </span>\n    ) : null;\n\n    const close = action ? (\n      <span className={styles.closeWrapper(this.theme)}>\n        <span data-tid=\"ToastView__close\" className={styles.close(this.theme)} onClick={onClose}>\n          <CrossIcon />\n        </span>\n      </span>\n    ) : null;\n\n    return (\n      <ZIndex priority=\"Toast\" className={styles.wrapper()}>\n        <div data-tid=\"ToastView__root\" {...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":"2SAAA,OAAOA,KAAP,MAAsC,OAAtC;AACA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,MAAtB,QAAoC,YAApC;;AAEA,SAASC,MAAT,QAAuB,6BAAvB;;AAEA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAAmE,8BAAnE;AACA,SAASC,QAAT,QAAuC,oBAAvC;AACA,SAASC,WAAT,QAA4B,gCAA5B;AACA,SAASC,eAAT,QAAgC,gDAAhC;;AAEA,SAASC,MAAT,QAAuB,oBAAvB;AACA,SAAiBC,aAAjB,QAAsC,SAAtC;AACA,SAAsBC,iBAAtB,QAA+C,UAA/C;;;;;;;;;;;;;;;;;;AAkBA,WAAaC,SAAb,WADCX,MAAM,CAAC,OAAD,EAAUU,iBAAV,CACP,EAFCL,QAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BUO,IAAAA,UA/BV,GA+BuB,UAACC,KAAD,EAAmD;AACtE,UAAQC,MAAR,GAAqCD,KAArC,CAAQC,MAAR,CAAgBC,OAAhB,GAAqCF,KAArC,CAAgBE,OAAhB,CAA4BC,IAA5B,iCAAqCH,KAArC;;AAEA,UAAMI,IAAI,GAAGH,MAAM;AACjB;AACE,sBAAYA,MAAM,CAAC,YAAD,CADpB;AAEE,oBAAUL,aAAa,CAACK,MAF1B;AAGE,QAAA,SAAS,EAAEN,MAAM,CAACS,IAAP,CAAY,MAAKC,KAAjB,CAHb;AAIE,QAAA,OAAO,EAAEJ,MAAM,CAACK,OAJlB;;AAMGL,MAAAA,MAAM,CAACM,KANV,CADiB;;AASf,UATJ;;AAWA,UAAIC,KAAK,GAAGP,MAAM;AAChB,oCAAM,SAAS,EAAEN,MAAM,CAACc,YAAP,CAAoB,MAAKJ,KAAzB,CAAjB;AACE;AACE,sBAAY,MAAKlB,MAAL,CAAYuB,oBAD1B;AAEE,oBAAUd,aAAa,CAACY,KAF1B;AAGE,QAAA,SAAS,EAAEb,MAAM,CAACa,KAAP,CAAa,MAAKH,KAAlB,CAHb;AAIE,QAAA,OAAO,EAAEH,OAJX;;AAME,0BAAC,SAAD,OANF,CADF,CADgB;;;AAWd,UAXJ;;AAaA,UAAIT,WAAW,CAAC,MAAKY,KAAN,CAAX,IAA2BG,KAA/B,EAAsC;AACpCA,QAAAA,KAAK;AACH,sCAAM,SAAS,EAAEb,MAAM,CAACc,YAAP,CAAoB,MAAKJ,KAAzB,CAAjB;AACE,4BAAC,eAAD;AACE,wBAAY,MAAKlB,MAAL,CAAYuB,oBAD1B;AAEE,sBAAUd,aAAa,CAACY,KAF1B;AAGE,UAAA,OAAO,EAAEN,OAHX;AAIE,UAAA,IAAI,EAAES,QAAQ,CAAC,MAAKN,KAAL,CAAWO,cAAZ,CAJhB;AAKE,UAAA,IAAI,EAAE,EALR;AAME,UAAA,KAAK,EAAE,MAAKP,KAAL,CAAWQ,eANpB;AAOE,UAAA,UAAU,EAAE,MAAKR,KAAL,CAAWS,oBAPzB;AAQE,UAAA,QAAQ,EAAE,KARZ,GADF,CADF;;;;AAcD;;AAED;AACE,4BAAC,MAAD,IAAQ,QAAQ,EAAC,OAAjB,EAAyB,SAAS,EAAEnB,MAAM,CAACoB,OAAP,CAAe,MAAKV,KAApB,CAApC;AACE,8CAAK,YAAUT,aAAa,CAACoB,SAA7B,IAA4Cb,IAA5C,IAAkD,SAAS,EAAER,MAAM,CAACsB,IAAP,CAAY,MAAKZ,KAAjB,CAA7D,EAAsF,GAAG,EAAE,MAAKa,WAAhG;AACE,0CAAO,MAAKlB,KAAL,CAAWmB,QAAlB,CADF;AAEGf,QAAAA,IAFH;AAGGI,QAAAA,KAHH,CADF,CADF;;;;AASD,KApFH,uDAoBSY,MApBT,GAoBE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACf,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBAAO,oBAAC,aAAD,EAAmB,MAAI,CAACL,KAAxB,EAAgC,MAAI,CAACD,UAArC,CAAP,CACD,CAJH,CADF,CAQD,CA7BH,oBAA+BhB,KAAK,CAACsC,SAArC,WACgBC,SADhB,GAC4B,EACxB;AACJ;AACA,KACIrB,MAAM,EAAEhB,KAAK,CAAC,EACZsB,KAAK,EAAErB,MAAM,CAACqC,UADF,EAEZjB,OAAO,EAAEtB,IAAI,CAACuC,UAFF,EAAD,CAJW,EAQxB;AACJ;AACA,KACIJ,QAAQ,EAAEjC,MAAM,CAACqC,UAXO,EAYxBrB,OAAO,EAAElB,IAZe,EAD5B","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

@@ -3,6 +3,7 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
 
 var getVerticalPaddingsWithCompensation = function getVerticalPaddingsWithCompensation(theme) {
   var toastPaddingY = theme.toastPaddingY,
@@ -20,8 +21,8 @@ export var styles = memoizeStyle({
 
     return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-radius: ", ";\n      border: ", ";\n      color: ", ";\n      display: inline-flex;\n      font-size: ", ";\n      line-height: ", ";\n      opacity: 1;\n      padding: ", " ", " ", ";\n      position: relative;\n      top: ", ";\n    "])), t.toastBg, t.toastBorderRadius, t.toastBorder, t.toastColor, t.toastFontSize, t.toastLineHeight, paddingTop, t.toastPaddingX, paddingBottom, t.toastTop);
   },
-  wrapper: function wrapper() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n    "])));
+  wrapper: function wrapper(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ", ";\n    "])), t.toastBorderRadius);
   },
   closeWrapper: function closeWrapper(t) {
     var _getVerticalPaddingsW2 = getVerticalPaddingsWithCompensation(t),
@@ -36,7 +37,8 @@ export var styles = memoizeStyle({
         paddingBottom = _getVerticalPaddingsW3[1];
 
     var marginRight = Math.round(parseInt(t.toastPaddingX) * 1.5) + "px";
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n\n      margin: -", " ", " -", " ", ";\n\n      padding: ", " 0 ", ";\n\n      &:hover {\n        text-decoration: underline;\n      }\n    "])), t.toastLinkColor, paddingTop, marginRight, paddingBottom, t.toastPaddingX, paddingTop, paddingBottom);
+    var padding = isTheme2022(t) ? paddingTop + " " + paddingBottom : paddingTop + " 0 " + paddingBottom;
+    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);

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

@@ -1 +1 @@
-{"version":3,"sources":["ToastView.styles.ts"],"names":["css","memoizeStyle","getVerticalPaddingsWithCompensation","theme","toastPaddingY","fontFamilyCompensationBaseline","paddingY","parseInt","compensation","styles","root","t","paddingTop","paddingBottom","toastBg","toastBorderRadius","toastBorder","toastColor","toastFontSize","toastLineHeight","toastPaddingX","toastTop","wrapper","closeWrapper","toastClosePadding","link","marginRight","Math","round","toastLinkColor","close","toastCloseColor","toastCloseSize","toastCloseHoverColor"],"mappings":"4LAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,IAAMC,mCAAmC,GAAG,SAAtCA,mCAAsC,CAACC,KAAD,EAAkB;AAC5D,MAAQC,aAAR,GAA0DD,KAA1D,CAAQC,aAAR,CAAuBC,8BAAvB,GAA0DF,KAA1D,CAAuBE,8BAAvB;AACA,MAAMC,QAAQ,GAAGC,QAAQ,CAACH,aAAD,CAAzB;AACA,MAAMI,YAAY,GAAGD,QAAQ,CAACF,8BAAD,CAA7B;AACA,SAAO,CAAIC,QAAQ,GAAGE,YAAf,SAAoCF,QAAQ,GAAGE,YAA/C,QAAP;AACD,CALD;;AAOA,OAAO,IAAMC,MAAM,GAAGR,YAAY,CAAC;AACjCS,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,gCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,4BAAmBC,aAAnB;AACA,WAAOb,GAAP;AACgBW,IAAAA,CAAC,CAACG,OADlB;AAEmBH,IAAAA,CAAC,CAACI,iBAFrB;AAGYJ,IAAAA,CAAC,CAACK,WAHd;AAIWL,IAAAA,CAAC,CAACM,UAJb;;AAMeN,IAAAA,CAAC,CAACO,aANjB;AAOiBP,IAAAA,CAAC,CAACQ,eAPnB;;AASaP,IAAAA,UATb,EAS2BD,CAAC,CAACS,aAT7B,EAS8CP,aAT9C;;AAWSF,IAAAA,CAAC,CAACU,QAXX;;AAaD,GAhBgC;;AAkBjCC,EAAAA,OAlBiC,qBAkBvB;AACR,WAAOtB,GAAP;;;;;;;;AAQD,GA3BgC;;AA6BjCuB,EAAAA,YA7BiC,wBA6BpBZ,CA7BoB,EA6BV;AACrB,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,WAAOb,GAAP;;AAEaY,IAAAA,UAFb,EAE4BD,CAAC,CAACS,aAF9B,EAEgDP,aAFhD,EAEkEF,CAAC,CAACa,iBAFpE;;AAID,GAnCgC;;AAqCjCC,EAAAA,IArCiC,gBAqC5Bd,CArC4B,EAqClB;AACb,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,QAAMa,WAAW,GAAMC,IAAI,CAACC,KAAL,CAAWrB,QAAQ,CAACI,CAAC,CAACS,aAAH,CAAR,GAA4B,GAAvC,CAAN,OAAjB;AACA,WAAOpB,GAAP;AACWW,IAAAA,CAAC,CAACkB,cADb;;;;;AAMajB,IAAAA,UANb,EAM2Bc,WAN3B,EAM2Cb,aAN3C,EAM4DF,CAAC,CAACS,aAN9D;;AAQaR,IAAAA,UARb,EAQ6BC,aAR7B;;;;;;AAcD,GAtDgC;;AAwDjCiB,EAAAA,KAxDiC,iBAwD3BnB,CAxD2B,EAwDjB;AACd,WAAOX,GAAP;;AAEWW,IAAAA,CAAC,CAACoB,eAFb;;;AAKYpB,IAAAA,CAAC,CAACqB,cALd;;AAOarB,IAAAA,CAAC,CAACa,iBAPf;;AASWb,IAAAA,CAAC,CAACqB,cATb;;;AAYarB,IAAAA,CAAC,CAACsB,oBAZf;;;AAeD,GAxEgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nconst getVerticalPaddingsWithCompensation = (theme: Theme) => {\n  const { toastPaddingY, fontFamilyCompensationBaseline } = theme;\n  const paddingY = parseInt(toastPaddingY);\n  const compensation = parseInt(fontFamilyCompensationBaseline);\n  return [`${paddingY - compensation}px`, `${paddingY + compensation}px`];\n};\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n    return css`\n      background: ${t.toastBg};\n      border-radius: ${t.toastBorderRadius};\n      border: ${t.toastBorder};\n      color: ${t.toastColor};\n      display: inline-flex;\n      font-size: ${t.toastFontSize};\n      line-height: ${t.toastLineHeight};\n      opacity: 1;\n      padding: ${paddingTop} ${t.toastPaddingX} ${paddingBottom};\n      position: relative;\n      top: ${t.toastTop};\n    `;\n  },\n\n  wrapper() {\n    return css`\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n    `;\n  },\n\n  closeWrapper(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n    return css`\n      display: flex;\n      margin: -${paddingTop} -${t.toastPaddingX} -${paddingBottom} -${t.toastClosePadding};\n    `;\n  },\n\n  link(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n    const marginRight = `${Math.round(parseInt(t.toastPaddingX) * 1.5)}px`;\n    return css`\n      color: ${t.toastLinkColor};\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n\n      margin: -${paddingTop} ${marginRight} -${paddingBottom} ${t.toastPaddingX};\n\n      padding: ${paddingTop} 0 ${paddingBottom};\n\n      &:hover {\n        text-decoration: underline;\n      }\n    `;\n  },\n\n  close(t: Theme) {\n    return css`\n      box-sizing: content-box !important; // fix \"reset.css\" problem\n      color: ${t.toastCloseColor};\n      cursor: pointer;\n      display: inline-block;\n      height: ${t.toastCloseSize};\n      line-height: 0;\n      padding: ${t.toastClosePadding};\n      text-align: center;\n      width: ${t.toastCloseSize};\n\n      &:hover {\n        color: ${t.toastCloseHoverColor};\n      }\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["ToastView.styles.ts"],"names":["css","memoizeStyle","isTheme2022","getVerticalPaddingsWithCompensation","theme","toastPaddingY","fontFamilyCompensationBaseline","paddingY","parseInt","compensation","styles","root","t","paddingTop","paddingBottom","toastBg","toastBorderRadius","toastBorder","toastColor","toastFontSize","toastLineHeight","toastPaddingX","toastTop","wrapper","closeWrapper","toastClosePadding","link","marginRight","Math","round","padding","toastLinkColor","transitionDuration","transitionTimingFunction","toastLinkBgHover","toastLinkTextDecorationHover","toastLinkBgActive","close","toastCloseColor","toastCloseSize","toastCloseHoverColor"],"mappings":"4LAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,SAASC,WAAT,QAA4B,gCAA5B;;AAEA,IAAMC,mCAAmC,GAAG,SAAtCA,mCAAsC,CAACC,KAAD,EAAkB;AAC5D,MAAQC,aAAR,GAA0DD,KAA1D,CAAQC,aAAR,CAAuBC,8BAAvB,GAA0DF,KAA1D,CAAuBE,8BAAvB;AACA,MAAMC,QAAQ,GAAGC,QAAQ,CAACH,aAAD,CAAzB;AACA,MAAMI,YAAY,GAAGD,QAAQ,CAACF,8BAAD,CAA7B;AACA,SAAO,CAAIC,QAAQ,GAAGE,YAAf,SAAoCF,QAAQ,GAAGE,YAA/C,QAAP;AACD,CALD;;AAOA,OAAO,IAAMC,MAAM,GAAGT,YAAY,CAAC;AACjCU,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,gCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,4BAAmBC,aAAnB;AACA,WAAOd,GAAP;AACgBY,IAAAA,CAAC,CAACG,OADlB;AAEmBH,IAAAA,CAAC,CAACI,iBAFrB;AAGYJ,IAAAA,CAAC,CAACK,WAHd;AAIWL,IAAAA,CAAC,CAACM,UAJb;;AAMeN,IAAAA,CAAC,CAACO,aANjB;AAOiBP,IAAAA,CAAC,CAACQ,eAPnB;;AASaP,IAAAA,UATb,EAS2BD,CAAC,CAACS,aAT7B,EAS8CP,aAT9C;;AAWSF,IAAAA,CAAC,CAACU,QAXX;;AAaD,GAhBgC;;AAkBjCC,EAAAA,OAlBiC,mBAkBzBX,CAlByB,EAkBf;AAChB,WAAOZ,GAAP;;;;;;;AAOmBY,IAAAA,CAAC,CAACI,iBAPrB;;AASD,GA5BgC;;AA8BjCQ,EAAAA,YA9BiC,wBA8BpBZ,CA9BoB,EA8BV;AACrB,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,WAAOd,GAAP;;AAEaa,IAAAA,UAFb,EAE4BD,CAAC,CAACS,aAF9B,EAEgDP,aAFhD,EAEkEF,CAAC,CAACa,iBAFpE;;AAID,GApCgC;;AAsCjCC,EAAAA,IAtCiC,gBAsC5Bd,CAtC4B,EAsClB;AACb,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,QAAMa,WAAW,GAAMC,IAAI,CAACC,KAAL,CAAWrB,QAAQ,CAACI,CAAC,CAACS,aAAH,CAAR,GAA4B,GAAvC,CAAN,OAAjB;AACA,QAAMS,OAAO,GAAG5B,WAAW,CAACU,CAAD,CAAX,GAAoBC,UAApB,SAAkCC,aAAlC,GAAuDD,UAAvD,WAAuEC,aAAvF;;AAEA,WAAOd,GAAP;;;AAGWY,IAAAA,CAAC,CAACmB,cAHb;;;;;;AASalB,IAAAA,UATb,EAS2Bc,WAT3B,EAS2Cb,aAT3C,EAS4DF,CAAC,CAACS,aAT9D;;AAWaS,IAAAA,OAXb;AAY2BlB,IAAAA,CAAC,CAACoB,kBAZ7B,EAYmDpB,CAAC,CAACqB,wBAZrD;;AAckBrB,IAAAA,CAAC,CAACsB,gBAdpB;AAeuBtB,IAAAA,CAAC,CAACuB,4BAfzB;;;;AAmBkBvB,IAAAA,CAAC,CAACwB,iBAnBpB;;;AAsBD,GAjEgC;;AAmEjCC,EAAAA,KAnEiC,iBAmE3BzB,CAnE2B,EAmEjB;AACd,WAAOZ,GAAP;;AAEWY,IAAAA,CAAC,CAAC0B,eAFb;;;AAKY1B,IAAAA,CAAC,CAAC2B,cALd;;AAOa3B,IAAAA,CAAC,CAACa,iBAPf;;AASWb,IAAAA,CAAC,CAAC2B,cATb;;;AAYa3B,IAAAA,CAAC,CAAC4B,oBAZf;;;AAeD,GAnFgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nconst getVerticalPaddingsWithCompensation = (theme: Theme) => {\n  const { toastPaddingY, fontFamilyCompensationBaseline } = theme;\n  const paddingY = parseInt(toastPaddingY);\n  const compensation = parseInt(fontFamilyCompensationBaseline);\n  return [`${paddingY - compensation}px`, `${paddingY + compensation}px`];\n};\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n    return css`\n      background: ${t.toastBg};\n      border-radius: ${t.toastBorderRadius};\n      border: ${t.toastBorder};\n      color: ${t.toastColor};\n      display: inline-flex;\n      font-size: ${t.toastFontSize};\n      line-height: ${t.toastLineHeight};\n      opacity: 1;\n      padding: ${paddingTop} ${t.toastPaddingX} ${paddingBottom};\n      position: relative;\n      top: ${t.toastTop};\n    `;\n  },\n\n  wrapper(t: Theme) {\n    return css`\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ${t.toastBorderRadius};\n    `;\n  },\n\n  closeWrapper(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n    return css`\n      display: flex;\n      margin: -${paddingTop} -${t.toastPaddingX} -${paddingBottom} -${t.toastClosePadding};\n    `;\n  },\n\n  link(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n    const marginRight = `${Math.round(parseInt(t.toastPaddingX) * 1.5)}px`;\n    const padding = isTheme2022(t) ? `${paddingTop} ${paddingBottom}` : `${paddingTop} 0 ${paddingBottom}`;\n\n    return css`\n      border: none;\n      font: inherit;\n      color: ${t.toastLinkColor};\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n      background-color: transparent;\n\n      margin: -${paddingTop} ${marginRight} -${paddingBottom} ${t.toastPaddingX};\n\n      padding: ${padding};\n      transition: background ${t.transitionDuration} ${t.transitionTimingFunction};\n      &:hover {\n        background: ${t.toastLinkBgHover};\n        text-decoration: ${t.toastLinkTextDecorationHover};\n      }\n\n      &:active {\n        background: ${t.toastLinkBgActive};\n      }\n    `;\n  },\n\n  close(t: Theme) {\n    return css`\n      box-sizing: content-box !important; // fix \"reset.css\" problem\n      color: ${t.toastCloseColor};\n      cursor: pointer;\n      display: inline-block;\n      height: ${t.toastCloseSize};\n      line-height: 0;\n      padding: ${t.toastClosePadding};\n      text-align: center;\n      width: ${t.toastCloseSize};\n\n      &:hover {\n        color: ${t.toastCloseHoverColor};\n      }\n    `;\n  },\n});\n"]}

package/components/Toast/ToastView.styles.d.ts

@@ -1,7 +1,7 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
     root(t: Theme): string;
-    wrapper(): string;
+    wrapper(t: Theme): string;
     closeWrapper(t: Theme): string;
     link(t: Theme): string;
     close(t: Theme): string;

package/components/Toast/locale/index/index.js

@@ -0,0 +1,8 @@
+import { LocaleHelper } from "../../../../lib/locale/LocaleHelper";
+import { componentsLocales as en_GB } from "../locales/en";
+import { componentsLocales as ru_RU } from "../locales/ru";
+export * from "../types";
+export var ToastLocaleHelper = new LocaleHelper({
+  ru_RU: ru_RU,
+  en_GB: en_GB
+});

package/components/Toast/locale/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","ToastLocaleHelper"],"mappings":"AAAA,SAASA,YAAT,QAA6B,kCAA7B;;AAEA,SAASC,iBAAiB,IAAIC,KAA9B,QAA2C,cAA3C;AACA,SAASD,iBAAiB,IAAIE,KAA9B,QAA2C,cAA3C;;;AAGA,cAAc,SAAd;;AAEA,OAAO,IAAMC,iBAAiB,GAAG,IAAIJ,YAAJ,CAA8B;AAC7DG,EAAAA,KAAK,EAALA,KAD6D;AAE7DD,EAAAA,KAAK,EAALA,KAF6D,EAA9B,CAA1B","sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\n\nimport { componentsLocales as en_GB } from './locales/en';\nimport { componentsLocales as ru_RU } from './locales/ru';\nimport { ToastLocale } from './types';\n\nexport * from './types';\n\nexport const ToastLocaleHelper = new LocaleHelper<ToastLocale>({\n  ru_RU,\n  en_GB,\n});\n"]}

package/components/Toast/locale/index/package.json

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

package/components/Toast/locale/index.d.ts

@@ -0,0 +1,4 @@
+import { LocaleHelper } from '../../../lib/locale/LocaleHelper';
+import { ToastLocale } from './types';
+export * from './types';
+export declare const ToastLocaleHelper: LocaleHelper<ToastLocale>;

package/components/Toast/locale/locales/en/en.js

@@ -0,0 +1,3 @@
+export var componentsLocales = {
+  closeButtonAriaLabel: 'Close notification'
+};

package/components/Toast/locale/locales/en/en.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["en.ts"],"names":["componentsLocales","closeButtonAriaLabel"],"mappings":";;AAEA,OAAO,IAAMA,iBAA8B,GAAG;AAC5CC,EAAAA,oBAAoB,EAAE,oBADsB,EAAvC","sourcesContent":["import { ToastLocale } from '../types';\n\nexport const componentsLocales: ToastLocale = {\n  closeButtonAriaLabel: 'Close notification',\n};\n"]}

package/components/Toast/locale/locales/en/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../../cjs/components/Toast/locale/locales/en.js",
+  "module": "en",
+  "types": "../en.d.ts",
+  "sideEffects": false
+}

package/components/Toast/locale/locales/en.d.ts

@@ -0,0 +1,2 @@
+import { ToastLocale } from '../types';
+export declare const componentsLocales: ToastLocale;

package/components/Toast/locale/locales/ru/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../../cjs/components/Toast/locale/locales/ru.js",
+  "module": "ru",
+  "types": "../ru.d.ts",
+  "sideEffects": false
+}

package/components/Toast/locale/locales/ru/ru.js

@@ -0,0 +1,3 @@
+export var componentsLocales = {
+  closeButtonAriaLabel: 'Закрыть уведомление'
+};

package/components/Toast/locale/locales/ru/ru.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ru.ts"],"names":["componentsLocales","closeButtonAriaLabel"],"mappings":";;AAEA,OAAO,IAAMA,iBAA8B,GAAG;AAC5CC,EAAAA,oBAAoB,EAAE,qBADsB,EAAvC","sourcesContent":["import { ToastLocale } from '../types';\n\nexport const componentsLocales: ToastLocale = {\n  closeButtonAriaLabel: 'Закрыть уведомление',\n};\n"]}

package/components/Toast/locale/locales/ru.d.ts

@@ -0,0 +1,2 @@
+import { ToastLocale } from '../types';
+export declare const componentsLocales: ToastLocale;

package/components/Toast/locale/package.json

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

package/components/Toast/locale/types/package.json

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

package/components/Toast/locale/types/types.js

@@ -0,0 +1 @@
+export {};

package/components/Toast/locale/types/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/components/Toast/locale/types.d.ts

@@ -0,0 +1,3 @@
+export interface ToastLocale {
+    closeButtonAriaLabel: string;
+}

package/components/Toggle/Toggle/Toggle.js

@@ -11,8 +11,18 @@ import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTestEnv } from "../../../lib/currentEnvironment";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
 import { styles, globalClasses } from "../Toggle.styles";
+/**
+ * @deprecated use SizeProp
+ */
+
 var colorWarningShown = false;
+export var ToggleDataTids = {
+  root: 'Toggle__root'
+};
 export
 /**
 * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
@@ -24,6 +34,7 @@ var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
     var _this;
 
     _this = _React$Component.call(this, props) || this;
+    _this.getProps = createPropsGetter(Toggle.defaultProps);
     _this.input = null;
 
     _this.focus = function () {
@@ -105,27 +116,135 @@ var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
     });
   };
 
+  _proto.getContainerSizeClassName = function getContainerSizeClassName() {
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.containerLarge(this.theme);
+
+      case 'medium':
+        return styles.containerMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.containerSmall(this.theme);
+    }
+  };
+
+  _proto.getHandleSizeClassName = function getHandleSizeClassName() {
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.handleLarge(this.theme);
+
+      case 'medium':
+        return styles.handleMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.handleSmall(this.theme);
+    }
+  };
+
+  _proto.getButtonSizeClassName = function getButtonSizeClassName() {
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.buttonLarge(this.theme);
+
+      case 'medium':
+        return styles.buttonMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.buttonSmall(this.theme);
+    }
+  };
+
+  _proto.getRootSizeClassName = function getRootSizeClassName() {
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.rootLarge(this.theme);
+
+      case 'medium':
+        return styles.rootMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.rootSmall(this.theme);
+    }
+  };
+
+  _proto.getInputSizeClassName = function getInputSizeClassName() {
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.inputLarge(this.theme);
+
+      case 'medium':
+        return styles.inputMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.inputSmall(this.theme);
+    }
+  };
+
+  _proto.getActiveHandleSizeClassName = function getActiveHandleSizeClassName() {
+    if (isTheme2022(this.theme)) {
+      return '';
+    }
+
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.activeHandleLarge(this.theme);
+
+      case 'medium':
+        return styles.activeHandleMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.activeHandleSmall(this.theme);
+    }
+  };
+
+  _proto.getCaptionSizeClassName = function getCaptionSizeClassName() {
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.captionLarge(this.theme);
+
+      case 'medium':
+        return styles.captionMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.captionSmall(this.theme);
+    }
+  };
+
   _proto.renderMain = function renderMain() {
-    var _cx, _cx2, _cx4, _cx5, _cx6;
+    var _cx, _cx2, _cx4, _cx5, _cx6, _cx7;
 
     var _this$props = this.props,
         children = _this$props.children,
-        captionPosition = _this$props.captionPosition,
         warning = _this$props.warning,
         error = _this$props.error,
-        loading = _this$props.loading,
         color = _this$props.color,
-        id = _this$props.id;
-    var disabled = this.props.disabled || loading;
+        id = _this$props.id,
+        ariaDescribedby = _this$props['aria-describedby'],
+        ariaLabel = _this$props['aria-label'];
+
+    var _this$getProps = this.getProps(),
+        loading = _this$getProps.loading,
+        captionPosition = _this$getProps.captionPosition,
+        disableAnimations = _this$getProps.disableAnimations;
+
+    var disabled = this.getProps().disabled || loading;
     var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;
-    var containerClassNames = cx(styles.container(this.theme), (_cx = {}, _cx[styles.containerDisabled(this.theme)] = !!disabled, _cx[globalClasses.container] = true, _cx[globalClasses.containerDisabled] = !!disabled, _cx[globalClasses.containerLoading] = loading, _cx));
-    var labelClassNames = cx(styles.root(this.theme), (_cx2 = {}, _cx2[styles.rootLeft()] = captionPosition === 'left', _cx2[styles.disabled()] = !!disabled, _cx2[globalClasses.disabled] = !!disabled, _cx2));
+    var containerClassNames = cx(this.getContainerSizeClassName(), (_cx = {}, _cx[styles.container(this.theme)] = true, _cx[styles.containerDisabled(this.theme)] = !!disabled, _cx[globalClasses.container] = true, _cx[globalClasses.containerDisabled] = !!disabled, _cx[globalClasses.containerLoading] = loading, _cx));
+    var labelClassNames = cx(this.getRootSizeClassName(), this.getActiveHandleSizeClassName(), (_cx2 = {}, _cx2[styles.root(this.theme)] = true, _cx2[styles.rootLeft()] = captionPosition === 'left', _cx2[styles.disabled()] = !!disabled, _cx2[globalClasses.disabled] = !!disabled, _cx2[styles.disableAnimation()] = disableAnimations, _cx2));
     var caption = null;
 
     if (children) {
       var _cx3;
 
-      var captionClass = cx(styles.caption(this.theme), (_cx3 = {}, _cx3[styles.captionLeft(this.theme)] = captionPosition === 'left', _cx3[styles.disabledCaption(this.theme)] = !!disabled, _cx3));
+      var captionClass = cx(this.getCaptionSizeClassName(), (_cx3 = {}, _cx3[styles.caption(this.theme)] = true, _cx3[styles.captionLeft(this.theme)] = captionPosition === 'left', _cx3[styles.disabledCaption(this.theme)] = !!disabled, _cx3));
       caption = /*#__PURE__*/React.createElement("span", {
         className: captionClass
       }, children);
@@ -134,33 +253,37 @@ var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement("label", {
+      "data-tid": ToggleDataTids.root,
       className: labelClassNames
     }, /*#__PURE__*/React.createElement("div", {
-      className: cx(styles.button(this.theme), (_cx4 = {}, _cx4[styles.buttonRight()] = captionPosition === 'left', _cx4[styles.isWarning(this.theme)] = !!warning, _cx4[styles.isError(this.theme)] = !!error, _cx4[styles.focused(this.theme)] = !disabled && !!this.state.focusByTab, _cx4))
+      className: cx(this.getButtonSizeClassName(), (_cx4 = {}, _cx4[styles.button(this.theme)] = true, _cx4[styles.buttonRight()] = captionPosition === 'left', _cx4[styles.isWarning(this.theme)] = !!warning, _cx4[styles.isError(this.theme)] = !!error, _cx4[styles.focused(this.theme)] = !disabled && !!this.state.focusByTab, _cx4))
     }, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       checked: checked,
       onChange: this.handleChange,
-      className: styles.input(this.theme),
+      className: cx(this.getInputSizeClassName(), isTheme2022(this.theme) && styles.input2022(this.theme), (_cx5 = {}, _cx5[styles.input(this.theme)] = true, _cx5)),
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       ref: this.inputRef,
       disabled: disabled,
-      id: id
+      id: id,
+      role: "switch",
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedby
     }), /*#__PURE__*/React.createElement("div", {
       className: containerClassNames,
       style: checked && color && !disabled ? {
         backgroundColor: color,
         boxShadow: "inset 0 0 0 1px " + color
       } : undefined
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cx(styles.activeBackground(), globalClasses.background, (_cx5 = {}, _cx5[styles.activeBackgroundLoading(this.theme)] = loading, _cx5[styles.disabledBackground(this.theme)] = disabled, _cx5)),
+    }, !isTheme2022(this.theme) && /*#__PURE__*/React.createElement("div", {
+      className: cx(styles.activeBackground(), globalClasses.background, (_cx6 = {}, _cx6[styles.activeBackgroundLoading(this.theme)] = loading, _cx6[styles.disabledBackground(this.theme)] = disabled, _cx6)),
       style: checked && color && !disabled ? {
         backgroundColor: color,
         boxShadow: "inset 0 0 0 1px " + color
       } : undefined
     })), /*#__PURE__*/React.createElement("div", {
-      className: cx(styles.handle(this.theme), globalClasses.handle, (_cx6 = {}, _cx6[styles.handleDisabled(this.theme)] = disabled, _cx6))
+      className: cx(this.getHandleSizeClassName(), globalClasses.handle, (_cx7 = {}, _cx7[styles.handle(this.theme)] = true, _cx7[styles.handleDisabled(this.theme)] = disabled, _cx7))
     })), caption));
   };
 
@@ -186,5 +309,7 @@ var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
 }, _class2.defaultProps = {
   disabled: false,
   loading: false,
-  captionPosition: 'right'
+  captionPosition: 'right',
+  disableAnimations: isTestEnv,
+  size: 'small'
 }, _temp)) || _class;