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

package/components/Toast/ToastStatic.d.ts

@@ -1,7 +1,8 @@
+import { Nullable } from '../../typings/utility-types';
 import { Action } from './Toast';
 export declare class ToastStatic {
-    static push: (notification: string, action?: Action | undefined) => void;
-    static _push: (notification: string, action?: Action | undefined) => void;
+    static push: (notification: string, action?: Nullable<Action>, showTime?: number | undefined) => void;
+    static _push: (notification: string, action?: Nullable<Action>, showTime?: number | undefined) => void;
     static close: () => void;
     private static node;
     private static instance;

package/components/Toast/ToastView/ToastView.js

@@ -12,7 +12,10 @@ 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";
+import { ToastDataTids } from "../Toast";
 export var ToastView = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ToastView, _React$Component);
 
@@ -31,22 +34,37 @@ export var ToastView = rootNode(_class = (_temp = _class2 = /*#__PURE__*/functio
           rest = _objectWithoutPropertiesLoose(props, _excluded);
 
       var link = action ? /*#__PURE__*/React.createElement("span", {
-        "data-tid": "ToastView__action",
+        "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",
+        "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, {
+          "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

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","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"]}

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      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);
   },
   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","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;AACWY,IAAAA,CAAC,CAACmB,cADb;;;;;AAMalB,IAAAA,UANb,EAM2Bc,WAN3B,EAM2Cb,aAN3C,EAM4DF,CAAC,CAACS,aAN9D;;AAQaS,IAAAA,OARb;;;AAWkBlB,IAAAA,CAAC,CAACoB,gBAXpB;AAYuBpB,IAAAA,CAAC,CAACqB,4BAZzB;;;;AAgBkBrB,IAAAA,CAAC,CAACsB,iBAhBpB;;;AAmBD,GA9DgC;;AAgEjCC,EAAAA,KAhEiC,iBAgE3BvB,CAhE2B,EAgEjB;AACd,WAAOZ,GAAP;;AAEWY,IAAAA,CAAC,CAACwB,eAFb;;;AAKYxB,IAAAA,CAAC,CAACyB,cALd;;AAOazB,IAAAA,CAAC,CAACa,iBAPf;;AASWb,IAAAA,CAAC,CAACyB,cATb;;;AAYazB,IAAAA,CAAC,CAAC0B,oBAZf;;;AAeD,GAhFgC,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      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: ${padding};\n\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/Toggle/Toggle/Toggle.js

@@ -11,8 +11,14 @@ 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";
 var colorWarningShown = false;
+export var ToggleDataTids = {
+  root: 'Toggle__root'
+};
 export
 /**
 * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
@@ -24,6 +30,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 () {
@@ -110,16 +117,21 @@ var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
 
     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'];
+
+    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 labelClassNames = cx(styles.root(this.theme), (_cx2 = {}, _cx2[styles.activeHandle(this.theme)] = !isTheme2022(this.theme), _cx2[styles.rootLeft()] = captionPosition === 'left', _cx2[styles.disabled()] = !!disabled, _cx2[globalClasses.disabled] = !!disabled, _cx2[styles.disableAnimation()] = disableAnimations, _cx2));
     var caption = null;
 
     if (children) {
@@ -134,6 +146,7 @@ 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))
@@ -141,19 +154,21 @@ var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
       type: "checkbox",
       checked: checked,
       onChange: this.handleChange,
-      className: styles.input(this.theme),
+      className: cx(styles.input(this.theme), isTheme2022(this.theme) && styles.input2022(this.theme)),
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       ref: this.inputRef,
       disabled: disabled,
-      id: id
+      id: id,
+      role: "switch",
+      "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", {
+    }, !isTheme2022(this.theme) && /*#__PURE__*/React.createElement("div", {
       className: cx(styles.activeBackground(), globalClasses.background, (_cx5 = {}, _cx5[styles.activeBackgroundLoading(this.theme)] = loading, _cx5[styles.disabledBackground(this.theme)] = disabled, _cx5)),
       style: checked && color && !disabled ? {
         backgroundColor: color,
@@ -186,5 +201,6 @@ var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
 }, _class2.defaultProps = {
   disabled: false,
   loading: false,
-  captionPosition: 'right'
+  captionPosition: 'right',
+  disableAnimations: isTestEnv
 }, _temp)) || _class;

package/components/Toggle/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","warning","keyListener","ThemeContext","CommonWrapper","cx","rootNode","styles","globalClasses","colorWarningShown","Toggle","props","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","theme","renderMain","children","captionPosition","error","loading","color","id","disabled","containerClassNames","container","containerDisabled","containerLoading","labelClassNames","root","rootLeft","caption","captionClass","captionLeft","disabledCaption","setRootNode","button","buttonRight","isWarning","isError","focused","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","Component","__KONTUR_REACT_UI__","propTypes","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Положение `children` относительно переключателя.\n   * @default 'right'\n   */\n  captionPosition: 'left' | 'right';\n  /**\n   * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.\n   * @default false\n   */\n  checked?: boolean;\n  /**\n   * Делает `тогл` включенным по умолчанию.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Отключает `тогл`.\n   */\n  disabled?: boolean;\n  /**\n   * Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.\n   */\n  onValueChange?: (value: boolean) => void;\n  /**\n   * Событие вызывающееся при клике на `тогл`.\n   */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Cостояние валидации при предупреждении.\n   * @default false\n   */\n  warning?: boolean;\n  /**\n   * Cостояние валидации при ошибке.\n   * @default false\n   */\n  error?: boolean;\n  /**\n   * Добавляет стили для состояния `loading` и отключает `тогл`.\n   */\n  loading?: boolean;\n  /**\n   * Если true, выставляет фокус на `тогле` после загрузки страницы.\n   */\n  autoFocus?: boolean;\n  /**\n   * Событие вызывающееся, когда `тогл` получает фокус.\n   */\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * Событие вызывающееся, когда `тогл` теряет фокус.\n   */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.\n   */\n  color?: React.CSSProperties['color'];\n  /**\n   * HTML-атрибут `id` для передачи во внутренний `<input />`.\n   */\n  id?: string;\n}\n\nexport interface ToggleState {\n  checked?: boolean;\n  focusByTab?: boolean;\n}\n\n/**\n * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.\n */\n@rootNode\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n  public static __KONTUR_REACT_UI__ = 'Toggle';\n\n  public static propTypes = {\n    checked: PropTypes.bool,\n    defaultChecked: PropTypes.bool,\n    disabled: PropTypes.bool,\n    error: PropTypes.bool,\n    loading: PropTypes.bool,\n    warning: PropTypes.bool,\n    onValueChange: PropTypes.func,\n    color(props: ToggleProps) {\n      if (props.color && !colorWarningShown) {\n        warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n        colorWarningShown = true;\n      }\n    },\n  };\n\n  public static defaultProps = {\n    disabled: false,\n    loading: false,\n    captionPosition: 'right',\n  };\n\n  private theme!: Theme;\n  private input: HTMLInputElement | null = null;\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: ToggleProps) {\n    super(props);\n\n    this.state = {\n      focusByTab: false,\n      checked: props.defaultChecked,\n    };\n  }\n\n  public componentDidMount() {\n    if (this.props.autoFocus) {\n      keyListener.isTabPressed = true;\n      this.focus();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      keyListener.isTabPressed = true;\n      this.input.focus();\n    }\n  };\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { children, captionPosition, warning, error, loading, color, id } = this.props;\n    const disabled = this.props.disabled || loading;\n    const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n    const containerClassNames = cx(styles.container(this.theme), {\n      [styles.containerDisabled(this.theme)]: !!disabled,\n      [globalClasses.container]: true,\n      [globalClasses.containerDisabled]: !!disabled,\n      [globalClasses.containerLoading]: loading,\n    });\n\n    const labelClassNames = cx(styles.root(this.theme), {\n      [styles.rootLeft()]: captionPosition === 'left',\n      [styles.disabled()]: !!disabled,\n      [globalClasses.disabled]: !!disabled,\n    });\n\n    let caption = null;\n    if (children) {\n      const captionClass = cx(styles.caption(this.theme), {\n        [styles.captionLeft(this.theme)]: captionPosition === 'left',\n        [styles.disabledCaption(this.theme)]: !!disabled,\n      });\n      caption = <span className={captionClass}>{children}</span>;\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <label className={labelClassNames}>\n          <div\n            className={cx(styles.button(this.theme), {\n              [styles.buttonRight()]: captionPosition === 'left',\n              [styles.isWarning(this.theme)]: !!warning,\n              [styles.isError(this.theme)]: !!error,\n              [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n            })}\n          >\n            <input\n              type=\"checkbox\"\n              checked={checked}\n              onChange={this.handleChange}\n              className={styles.input(this.theme)}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n              ref={this.inputRef}\n              disabled={disabled}\n              id={id}\n            />\n            <div\n              className={containerClassNames}\n              style={\n                checked && color && !disabled\n                  ? {\n                      backgroundColor: color,\n                      boxShadow: `inset 0 0 0 1px ${color}`,\n                    }\n                  : undefined\n              }\n            >\n              <div\n                className={cx(styles.activeBackground(), globalClasses.background, {\n                  [styles.activeBackgroundLoading(this.theme)]: loading,\n                  [styles.disabledBackground(this.theme)]: disabled,\n                })}\n                style={\n                  checked && color && !disabled\n                    ? {\n                        backgroundColor: color,\n                        boxShadow: `inset 0 0 0 1px ${color}`,\n                      }\n                    : undefined\n                }\n              />\n            </div>\n            <div\n              className={cx(styles.handle(this.theme), globalClasses.handle, {\n                [styles.handleDisabled(this.theme)]: disabled,\n              })}\n            />\n          </div>\n          {caption}\n        </label>\n      </CommonWrapper>\n    );\n  }\n\n  private inputRef = (element: HTMLInputElement) => {\n    this.input = element;\n  };\n\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (this.props.onValueChange) {\n      this.props.onValueChange(event.target.checked);\n    }\n\n    if (this.isUncontrolled()) {\n      this.setState({\n        checked: event.target.checked,\n      });\n    }\n\n    if (this.props.onChange) {\n      this.props.onChange(event);\n    }\n  };\n\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onFocus) {\n      this.props.onFocus(event);\n    }\n\n    if (keyListener.isTabPressed) {\n      this.setState({ focusByTab: true });\n    }\n  };\n\n  private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onBlur) {\n      this.props.onBlur(event);\n    }\n    this.setState({\n      focusByTab: false,\n    });\n  };\n\n  private isUncontrolled() {\n    return this.props.checked === undefined;\n  }\n}\n"]}
+{"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","warning","keyListener","ThemeContext","CommonWrapper","cx","rootNode","createPropsGetter","isTestEnv","isTheme2022","styles","globalClasses","colorWarningShown","ToggleDataTids","root","Toggle","props","getProps","defaultProps","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","theme","renderMain","children","error","color","id","ariaDescribedby","loading","captionPosition","disableAnimations","disabled","containerClassNames","container","containerDisabled","containerLoading","labelClassNames","activeHandle","rootLeft","disableAnimation","caption","captionClass","captionLeft","disabledCaption","setRootNode","button","buttonRight","isWarning","isError","focused","input2022","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","Component","__KONTUR_REACT_UI__","propTypes","bool","func"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Положение `children` относительно переключателя.\n   * @default 'right'\n   */\n  captionPosition?: 'left' | 'right';\n  /**\n   * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.\n   * @default false\n   */\n  checked?: boolean;\n  /**\n   * Делает `тогл` включенным по умолчанию.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Отключает `тогл`.\n   */\n  disabled?: boolean;\n  /**\n   * Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.\n   */\n  onValueChange?: (value: boolean) => void;\n  /**\n   * Событие вызывающееся при клике на `тогл`.\n   */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Состояние валидации при предупреждении.\n   * @default false\n   */\n  warning?: boolean;\n  /**\n   * Состояние валидации при ошибке.\n   * @default false\n   */\n  error?: boolean;\n  /**\n   * Добавляет стили для состояния `loading` и отключает `тогл`.\n   */\n  loading?: boolean;\n  /**\n   * Если true, выставляет фокус на `тогле` после загрузки страницы.\n   */\n  autoFocus?: boolean;\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n  /**\n   * Событие вызывающееся, когда `тогл` получает фокус.\n   */\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * Событие вызывающееся, когда `тогл` теряет фокус.\n   */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.\n   */\n  color?: React.CSSProperties['color'];\n  /**\n   * HTML-атрибут `id` для передачи во внутренний `<input />`.\n   */\n  id?: string;\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations?: boolean;\n}\n\nexport interface ToggleState {\n  checked?: boolean;\n  focusByTab?: boolean;\n}\n\nexport const ToggleDataTids = {\n  root: 'Toggle__root',\n} as const;\n\ntype DefaultProps = Required<Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition' | 'disableAnimations'>>;\n\n/**\n * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.\n */\n@rootNode\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n  public static __KONTUR_REACT_UI__ = 'Toggle';\n\n  public static propTypes = {\n    checked: PropTypes.bool,\n    defaultChecked: PropTypes.bool,\n    disabled: PropTypes.bool,\n    error: PropTypes.bool,\n    loading: PropTypes.bool,\n    warning: PropTypes.bool,\n    onValueChange: PropTypes.func,\n    color: (props: ToggleProps) => {\n      if (props.color && !colorWarningShown) {\n        warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n        colorWarningShown = true;\n      }\n    },\n  };\n\n  public static defaultProps: DefaultProps = {\n    disabled: false,\n    loading: false,\n    captionPosition: 'right',\n    disableAnimations: isTestEnv,\n  };\n\n  private getProps = createPropsGetter(Toggle.defaultProps);\n\n  private theme!: Theme;\n  private input: HTMLInputElement | null = null;\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: ToggleProps) {\n    super(props);\n\n    this.state = {\n      focusByTab: false,\n      checked: props.defaultChecked,\n    };\n  }\n\n  public componentDidMount() {\n    if (this.props.autoFocus) {\n      keyListener.isTabPressed = true;\n      this.focus();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      keyListener.isTabPressed = true;\n      this.input.focus();\n    }\n  };\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { children, warning, error, color, id, 'aria-describedby': ariaDescribedby } = this.props;\n    const { loading, captionPosition, disableAnimations } = this.getProps();\n    const disabled = this.getProps().disabled || loading;\n    const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n    const containerClassNames = cx(styles.container(this.theme), {\n      [styles.containerDisabled(this.theme)]: !!disabled,\n      [globalClasses.container]: true,\n      [globalClasses.containerDisabled]: !!disabled,\n      [globalClasses.containerLoading]: loading,\n    });\n\n    const labelClassNames = cx(styles.root(this.theme), {\n      [styles.activeHandle(this.theme)]: !isTheme2022(this.theme),\n      [styles.rootLeft()]: captionPosition === 'left',\n      [styles.disabled()]: !!disabled,\n      [globalClasses.disabled]: !!disabled,\n      [styles.disableAnimation()]: disableAnimations,\n    });\n\n    let caption = null;\n    if (children) {\n      const captionClass = cx(styles.caption(this.theme), {\n        [styles.captionLeft(this.theme)]: captionPosition === 'left',\n        [styles.disabledCaption(this.theme)]: !!disabled,\n      });\n      caption = <span className={captionClass}>{children}</span>;\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <label data-tid={ToggleDataTids.root} className={labelClassNames}>\n          <div\n            className={cx(styles.button(this.theme), {\n              [styles.buttonRight()]: captionPosition === 'left',\n              [styles.isWarning(this.theme)]: !!warning,\n              [styles.isError(this.theme)]: !!error,\n              [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n            })}\n          >\n            <input\n              type=\"checkbox\"\n              checked={checked}\n              onChange={this.handleChange}\n              className={cx(styles.input(this.theme), isTheme2022(this.theme) && styles.input2022(this.theme))}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n              ref={this.inputRef}\n              disabled={disabled}\n              id={id}\n              role=\"switch\"\n              aria-describedby={ariaDescribedby}\n            />\n            <div\n              className={containerClassNames}\n              style={\n                checked && color && !disabled\n                  ? {\n                      backgroundColor: color,\n                      boxShadow: `inset 0 0 0 1px ${color}`,\n                    }\n                  : undefined\n              }\n            >\n              {!isTheme2022(this.theme) && (\n                <div\n                  className={cx(styles.activeBackground(), globalClasses.background, {\n                    [styles.activeBackgroundLoading(this.theme)]: loading,\n                    [styles.disabledBackground(this.theme)]: disabled,\n                  })}\n                  style={\n                    checked && color && !disabled\n                      ? {\n                          backgroundColor: color,\n                          boxShadow: `inset 0 0 0 1px ${color}`,\n                        }\n                      : undefined\n                  }\n                />\n              )}\n            </div>\n            <div\n              className={cx(styles.handle(this.theme), globalClasses.handle, {\n                [styles.handleDisabled(this.theme)]: disabled,\n              })}\n            />\n          </div>\n          {caption}\n        </label>\n      </CommonWrapper>\n    );\n  }\n\n  private inputRef = (element: HTMLInputElement) => {\n    this.input = element;\n  };\n\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (this.props.onValueChange) {\n      this.props.onValueChange(event.target.checked);\n    }\n\n    if (this.isUncontrolled()) {\n      this.setState({\n        checked: event.target.checked,\n      });\n    }\n\n    if (this.props.onChange) {\n      this.props.onChange(event);\n    }\n  };\n\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onFocus) {\n      this.props.onFocus(event);\n    }\n\n    if (keyListener.isTabPressed) {\n      this.setState({ focusByTab: true });\n    }\n  };\n\n  private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onBlur) {\n      this.props.onBlur(event);\n    }\n    this.setState({\n      focusByTab: false,\n    });\n  };\n\n  private isUncontrolled() {\n    return this.props.checked === undefined;\n  }\n}\n"]}

package/components/Toggle/Toggle.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 export interface ToggleProps extends CommonProps {
@@ -7,7 +7,7 @@ export interface ToggleProps extends CommonProps {
      * Положение `children` относительно переключателя.
      * @default 'right'
      */
-    captionPosition: 'left' | 'right';
+    captionPosition?: 'left' | 'right';
     /**
      * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.
      * @default false
@@ -30,12 +30,12 @@ export interface ToggleProps extends CommonProps {
      */
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     /**
-     * Cостояние валидации при предупреждении.
+     * Состояние валидации при предупреждении.
      * @default false
      */
     warning?: boolean;
     /**
-     * Cостояние валидации при ошибке.
+     * Состояние валидации при ошибке.
      * @default false
      */
     error?: boolean;
@@ -47,6 +47,10 @@ export interface ToggleProps extends CommonProps {
      * Если true, выставляет фокус на `тогле` после загрузки страницы.
      */
     autoFocus?: boolean;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
     /**
      * Событие вызывающееся, когда `тогл` получает фокус.
      */
@@ -63,11 +67,19 @@ export interface ToggleProps extends CommonProps {
      * HTML-атрибут `id` для передачи во внутренний `<input />`.
      */
     id?: string;
+    /**
+     * Не показывать анимацию
+     */
+    disableAnimations?: boolean;
 }
 export interface ToggleState {
     checked?: boolean;
     focusByTab?: boolean;
 }
+export declare const ToggleDataTids: {
+    readonly root: "Toggle__root";
+};
+declare type DefaultProps = Required<Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition' | 'disableAnimations'>>;
 /**
  * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
  */
@@ -81,13 +93,10 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
         loading: PropTypes.Requireable<boolean>;
         warning: PropTypes.Requireable<boolean>;
         onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
-        color(props: ToggleProps): void;
-    };
-    static defaultProps: {
-        disabled: boolean;
-        loading: boolean;
-        captionPosition: string;
+        color: (props: ToggleProps) => void;
     };
+    static defaultProps: DefaultProps;
+    private getProps;
     private theme;
     private input;
     private setRootNode;
@@ -105,3 +114,4 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
     private handleBlur;
     private isUncontrolled;
 }
+export {};

package/components/Toggle/Toggle.styles/Toggle.styles.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+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, prefix } from "../../../lib/theming/Emotion";
 import { isChrome } from "../../../lib/client";
@@ -14,67 +14,75 @@ export var globalClasses = prefix('toggle')({
 });
 export var styles = memoizeStyle({
   root: function root(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      cursor: pointer;\n      align-items: baseline;\n      position: relative;\n      line-height: ", ";\n      font-size: ", ";\n\n      &:hover .", " {\n        background: ", ";\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned button,\n        // and also height and baseline for toggle without caption.\n        content: '\\00A0';\n        display: inline-block;\n        width: ", ";\n        flex: 0 0 auto;\n      }\n    "], ["\n      display: inline-flex;\n      cursor: pointer;\n      align-items: baseline;\n      position: relative;\n      line-height: ", ";\n      font-size: ", ";\n\n      &:hover .", " {\n        background: ", ";\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned button,\n        // and also height and baseline for toggle without caption.\n        content: '\\\\00A0';\n        display: inline-block;\n        width: ", ";\n        flex: 0 0 auto;\n      }\n    "])), t.toggleLineHeight, t.toggleFontSize, globalClasses.handle, t.toggleBgHover, t.toggleWidth);
+  },
+  activeHandle: function activeHandle(t) {
     var handleWidthWithBorders = t.toggleHeight;
     var handleActiveWidth = "calc(" + handleWidthWithBorders + " - 2 * " + t.toggleBorderWidth + " + " + t.toggleHandleActiveWidthIncrement + ")";
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      cursor: pointer;\n      align-items: baseline;\n      position: relative;\n      line-height: ", ";\n      font-size: ", ";\n\n      &:hover .", " {\n        background: ", ";\n      }\n      &:active:not(.", ") .", " {\n        width: ", ";\n      }\n      &:active:not(.", ") input:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ")\n          translateX(-", ");\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned button,\n        // and also height and baseline for toggle without caption.\n        content: '\\00A0';\n        display: inline-block;\n        width: ", ";\n        flex: 0 0 auto;\n      }\n    "], ["\n      display: inline-flex;\n      cursor: pointer;\n      align-items: baseline;\n      position: relative;\n      line-height: ", ";\n      font-size: ", ";\n\n      &:hover .", " {\n        background: ", ";\n      }\n      &:active:not(.", ") .", " {\n        width: ", ";\n      }\n      &:active:not(.", ") input:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ")\n          translateX(-", ");\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned button,\n        // and also height and baseline for toggle without caption.\n        content: '\\\\00A0';\n        display: inline-block;\n        width: ", ";\n        flex: 0 0 auto;\n      }\n    "])), t.toggleLineHeight, t.toggleFontSize, globalClasses.handle, t.toggleBgHover, globalClasses.disabled, globalClasses.handle, handleActiveWidth, globalClasses.disabled, globalClasses.handle, t.toggleWidth, handleWidthWithBorders, t.toggleHandleActiveWidthIncrement, t.toggleWidth);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      &:active:not(.", ") .", " {\n        width: ", ";\n      }\n      &:active:not(.", ") input:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ") translateX(-4px);\n      }\n    "])), globalClasses.disabled, globalClasses.handle, handleActiveWidth, globalClasses.disabled, globalClasses.handle, t.toggleWidth, handleWidthWithBorders);
+  },
+  disableAnimation: function disableAnimation() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      &,\n      * {\n        transition: none !important;\n      }\n    "])));
   },
   handle: function handle(t) {
-    var handleSize = "calc(" + t.toggleHeight + " - 2 * " + t.toggleBorderWidth + ")";
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-radius: ", ";\n      bottom: ", ";\n      box-shadow: 0 ", " 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ", " rgba(0, 0, 0, 0.15);\n      height: ", ";\n      left: ", ";\n      position: absolute;\n      top: ", ";\n      transition: 0.2s ease-in;\n      width: ", ";\n    "])), t.toggleBg, t.toggleHandleBorderRadius, t.toggleBorderWidth, t.toggleBorderWidth, t.toggleBorderWidth, handleSize, t.toggleBorderWidth, t.toggleBorderWidth, handleSize);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-radius: ", ";\n      bottom: ", ";\n      box-shadow: ", ";\n      height: ", ";\n      left: ", ";\n      position: absolute;\n      top: ", ";\n      transition: 0.2s ease-in;\n      width: ", ";\n    "])), t.toggleHandleBg, t.toggleHandleBorderRadius, t.toggleBorderWidth, t.toggleHandleBoxShadowOld, t.toggleHandleSize, t.toggleHandleLeft, t.toggleHandleTop, t.toggleHandleSize);
   },
   handleDisabled: function handleDisabled(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background: ", " !important; // override root hover/active styles\n    "])), t.toggleDisabledHandleBg);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background: ", " !important; // override root hover/active styles\n    "])), t.toggleDisabledHandleBg);
   },
   input: function input(t) {
     var handleWidthWithBorders = t.toggleHeight;
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      opacity: 0;\n\n      &:focus {\n        outline: none;\n      }\n      &:checked ~ .", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .", " {\n        background: ", ";\n        box-shadow: inset 0 0 0 ", " ", ";\n      }\n      &:checked ~ .", " .", " {\n        width: 70%;\n        background: ", ";\n      }\n      &:checked ~ .", " .", " {\n        width: 70%;\n        background: ", ";\n        border-radius: calc(", " * 0.5) 0 0 calc(", " * 0.5);\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n      &:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ");\n      }\n    "])), globalClasses.container, t.toggleBorderWidth, t.toggleBgChecked, t.toggleBgChecked, globalClasses.containerDisabled, t.toggleBorderWidth, t.toggleBorderColorDisabledChecked, t.toggleBgDisabledChecked, globalClasses.containerLoading, t.toggleBorderColor, t.toggleBorderWidth, t.toggleBorderColor, globalClasses.container, globalClasses.background, t.toggleBgChecked, globalClasses.containerDisabled, globalClasses.background, t.toggleBgDisabledChecked, t.toggleHeight, t.toggleHeight, t.toggleBorderColorDisabledChecked, globalClasses.handle, t.toggleWidth, handleWidthWithBorders);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      opacity: 0;\n\n      &:focus {\n        outline: none;\n      }\n      &:checked ~ .", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .", " {\n        background: ", ";\n        box-shadow: inset 0 0 0 ", " ", ";\n      }\n      &:checked ~ .", " .", " {\n        width: 70%;\n        background: ", ";\n      }\n      &:checked ~ .", " .", " {\n        width: 70%;\n        background: ", ";\n        border-radius: calc(", " * 0.5) 0 0 calc(", " * 0.5);\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n      &:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ");\n        background: ", ";\n        &:hover {\n          background: ", ";\n        }\n      }\n    "])), globalClasses.container, t.toggleBorderWidth, t.toggleBgChecked, t.toggleBgChecked, globalClasses.containerDisabled, t.toggleBorderWidth, t.toggleBorderColorDisabledChecked, t.toggleBgDisabledChecked, globalClasses.containerLoading, t.toggleBorderColor, t.toggleBorderWidth, t.toggleBorderColor, globalClasses.container, globalClasses.background, t.toggleBgChecked, globalClasses.containerDisabled, globalClasses.background, t.toggleBgDisabledChecked, t.toggleHeight, t.toggleHeight, t.toggleBorderColorDisabledChecked, globalClasses.handle, t.toggleWidth, handleWidthWithBorders, t.toggleCheckedBg, t.toggleCheckedBgHover);
+  },
+  input2022: function input2022(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      &:enabled {\n        ~ .", ", ~ .", " {\n          transition: 0.2s ease-in !important;\n        }\n        :not(:checked) {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n        :checked {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n      }\n      &:enabled:hover {\n        :not(:checked) {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n        :checked {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n      }\n      &:disabled {\n        :not(:checked) {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", " !important;\n            box-shadow: ", ";\n          }\n        }\n        :checked {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", " !important;\n            box-shadow: ", ";\n          }\n        }\n      }\n    "])), globalClasses.container, globalClasses.handle, globalClasses.container, t.toggleContainerBg, t.toggleContainerBoxShadow, globalClasses.handle, t.toggleHandleBg, t.toggleHandleBoxShadow, globalClasses.container, t.toggleContainerBgChecked, t.toggleContainerBoxShadowChecked, globalClasses.handle, t.toggleHandleBgChecked, t.toggleHandleBoxShadowChecked, globalClasses.container, t.toggleContainerBgHover, t.toggleContainerBoxShadowHover, globalClasses.handle, t.toggleHandleBgHover, t.toggleHandleBoxShadowHover, globalClasses.container, t.toggleContainerBgCheckedHover, t.toggleContainerBoxShadowCheckedHover, globalClasses.handle, t.toggleHandleBgCheckedHover, t.toggleHandleBoxShadowCheckedHover, globalClasses.container, t.toggleContainerBgDisabled, t.toggleContainerBoxShadowDisabled, globalClasses.handle, t.toggleHandleBgDisabled, t.toggleHandleBoxShadowDisabled, globalClasses.container, t.toggleContainerBgDisabledChecked, t.toggleContainerBoxShadowDisabledChecked, globalClasses.handle, t.toggleHandleBgDisabledChecked, t.toggleHandleBoxShadowDisabledChecked);
   },
   container: function container(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n      box-shadow: inset 0 0 0 ", " ", ";\n      height: 100%;\n      overflow: hidden;\n      position: absolute;\n      width: 100%;\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n      z-index: 0;\n    "])), t.toggleBorderRadius, t.toggleBorderWidth, t.toggleBorderColor);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n      box-shadow: inset 0 0 0 ", " ", ";\n      height: 100%;\n      overflow: hidden;\n      position: absolute;\n      width: 100%;\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n      z-index: 0;\n    "])), t.toggleBorderRadius, t.toggleBorderWidth, t.toggleBorderColor);
   },
   containerDisabled: function containerDisabled(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    "])), t.toggleBgDisabled, t.toggleBorderColorDisabled);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    "])), t.toggleBgDisabled, t.toggleBorderColorDisabled);
   },
   focused: function focused(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleFocusShadowColor);
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleFocusShadowColor);
   },
   activeBackground: function activeBackground() {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      background: inherit;\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      transition: 0.2s ease-in;\n      width: 10px;\n    "])));
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      background: inherit;\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      transition: 0.2s ease-in;\n      width: 10px;\n    "])));
   },
   disabledBackground: function disabledBackground(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      box-shadow: inset 0 0 0 1px ", ";\n      width: 0;\n    "])), t.toggleBorderColorDisabled);
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      box-shadow: inset 0 0 0 1px ", ";\n      width: 0;\n    "])), t.toggleBorderColorDisabled);
   },
   activeBackgroundLoading: function activeBackgroundLoading(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.toggleBgActive);
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.toggleBgActive);
   },
   isWarning: function isWarning(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
   },
   isError: function isError(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
   },
   button: function button(t) {
     var labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);
     var fontSize = parseInt(t.checkboxFontSize);
     var baselineCompensation = fontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      left: 0;\n      top: 0;\n      height: ", ";\n      width: ", ";\n      flex: 1 0 ", ";\n\n      background: ", ";\n      border-radius: ", ";\n      line-height: ", ";\n\n      margin-top: calc(", " + ", "px);\n    "])), t.toggleHeight, t.toggleWidth, t.toggleWidth, t.toggleBaseBg, t.toggleBorderRadius, t.toggleHeight, t.toggleButtonOffsetY, baselineCompensation);
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      left: 0;\n      top: 0;\n      height: ", ";\n      width: ", ";\n      flex: 1 0 ", ";\n\n      background: ", ";\n      border-radius: ", ";\n      line-height: ", ";\n\n      margin-top: calc(", " + ", "px);\n    "])), t.toggleHeight, t.toggleWidth, t.toggleWidth, t.toggleBaseBg, t.toggleBorderRadius, t.toggleHeight, t.toggleButtonOffsetY, baselineCompensation);
   },
   buttonRight: function buttonRight() {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      right: 0;\n      left: auto;\n    "])));
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      right: 0;\n      left: auto;\n    "])));
   },
   disabled: function disabled() {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
   },
   rootLeft: function rootLeft() {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      flex-direction: row-reverse;\n    "])));
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      flex-direction: row-reverse;\n    "])));
   },
   caption: function caption(t) {
-    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 0 0 ", ";\n      line-height: ", ";\n      font-size: ", ";\n    "])), t.toggleTextColor, t.toggleCaptionGap, t.toggleLineHeight, t.toggleFontSize);
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 0 0 ", ";\n      line-height: ", ";\n      font-size: ", ";\n    "])), t.toggleTextColor, t.toggleCaptionGap, t.toggleLineHeight, t.toggleFontSize);
   },
   disabledCaption: function disabledCaption(t) {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textColorDisabled);
+    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textColorDisabled);
   },
   captionLeft: function captionLeft(t) {
-    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "])), t.toggleTextColor, t.toggleCaptionGap);
+    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "])), t.toggleTextColor, t.toggleCaptionGap);
   }
 });