@skbkontur/react-ui 0.0.0-c91b3db3f4 → 0.0.0-cb270e7a13

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","jsStyles"],"mappings":"4LAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,IAAMC,mCAAmC,GAAG,SAAtCA,mCAAsC,CAACC,KAAD,EAAkB;AACpDC,EAAAA,aADoD,GACFD,KADE,CACpDC,aADoD,CACrCC,8BADqC,GACFF,KADE,CACrCE,8BADqC;AAE5D,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,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACuBT,IAAAA,mCAAmC,CAACS,CAAD,CAD1D,CACNC,UADM,4BACMC,aADN;AAEb,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,GAhBY;;AAkBbC,EAAAA,OAlBa,qBAkBH;AACR,WAAOtB,GAAP;;;;;;;;AAQD,GA3BY;;AA6BbuB,EAAAA,YA7Ba,wBA6BAZ,CA7BA,EA6BU;AACeT,IAAAA,mCAAmC,CAACS,CAAD,CADlD,CACdC,UADc,6BACFC,aADE;AAErB,WAAOb,GAAP;;AAEaY,IAAAA,UAFb,EAE4BD,CAAC,CAACS,aAF9B,EAEgDP,aAFhD,EAEkEF,CAAC,CAACa,iBAFpE;;AAID,GAnCY;;AAqCbC,EAAAA,IArCa,gBAqCRd,CArCQ,EAqCE;AACuBT,IAAAA,mCAAmC,CAACS,CAAD,CAD1D,CACNC,UADM,6BACMC,aADN;AAEb,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,GAtDY;;AAwDbiB,EAAAA,KAxDa,iBAwDPnB,CAxDO,EAwDG;AACd,WAAOX,GAAP;AACWW,IAAAA,CAAC,CAACoB,eADb;;;AAIYpB,IAAAA,CAAC,CAACqB,cAJd;;AAMarB,IAAAA,CAAC,CAACa,iBANf;;AAQWb,IAAAA,CAAC,CAACqB,cARb;;;AAWarB,IAAAA,CAAC,CAACsB,oBAXf;;;AAcD,GAvEY,EAAf;;;AA0EA,OAAO,IAAMC,QAAQ,GAAGjC,YAAY,CAACQ,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst getVerticalPaddingsWithCompensation = (theme: Theme) => {\r\n  const { toastPaddingY, fontFamilyCompensationBaseline } = theme;\r\n  const paddingY = parseInt(toastPaddingY);\r\n  const compensation = parseInt(fontFamilyCompensationBaseline);\r\n  return [`${paddingY - compensation}px`, `${paddingY + compensation}px`];\r\n};\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\r\n    return css`\r\n      background: ${t.toastBg};\r\n      border-radius: ${t.toastBorderRadius};\r\n      border: ${t.toastBorder};\r\n      color: ${t.toastColor};\r\n      display: inline-flex;\r\n      font-size: ${t.toastFontSize};\r\n      line-height: ${t.toastLineHeight};\r\n      opacity: 1;\r\n      padding: ${paddingTop} ${t.toastPaddingX} ${paddingBottom};\r\n      position: relative;\r\n      top: ${t.toastTop};\r\n    `;\r\n  },\r\n\r\n  wrapper() {\r\n    return css`\r\n      position: fixed;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      height: 0;\r\n      text-align: center;\r\n    `;\r\n  },\r\n\r\n  closeWrapper(t: Theme) {\r\n    const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\r\n    return css`\r\n      display: flex;\r\n      margin: -${paddingTop} -${t.toastPaddingX} -${paddingBottom} -${t.toastClosePadding};\r\n    `;\r\n  },\r\n\r\n  link(t: Theme) {\r\n    const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\r\n    const marginRight = `${Math.round(parseInt(t.toastPaddingX) * 1.5)}px`;\r\n    return css`\r\n      color: ${t.toastLinkColor};\r\n      cursor: pointer;\r\n      display: inline-block;\r\n      font-weight: 600;\r\n\r\n      margin: -${paddingTop} ${marginRight} -${paddingBottom} ${t.toastPaddingX};\r\n\r\n      padding: ${paddingTop} 0 ${paddingBottom};\r\n\r\n      &:hover {\r\n        text-decoration: underline;\r\n      }\r\n    `;\r\n  },\r\n\r\n  close(t: Theme) {\r\n    return css`\r\n      color: ${t.toastCloseColor};\r\n      cursor: pointer;\r\n      display: inline-block;\r\n      height: ${t.toastCloseSize};\r\n      line-height: 0;\r\n      padding: ${t.toastClosePadding};\r\n      text-align: center;\r\n      width: ${t.toastCloseSize};\r\n\r\n      &:hover {\r\n        color: ${t.toastCloseHoverColor};\r\n      }\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"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;AACpDC,EAAAA,aADoD,GACFD,KADE,CACpDC,aADoD,CACrCC,8BADqC,GACFF,KADE,CACrCE,8BADqC;AAE5D,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;AACuBT,IAAAA,mCAAmC,CAACS,CAAD,CAD1D,CACNC,UADM,4BACMC,aADN;AAEb,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;AACeT,IAAAA,mCAAmC,CAACS,CAAD,CADlD,CACdC,UADc,6BACFC,aADE;AAErB,WAAOb,GAAP;;AAEaY,IAAAA,UAFb,EAE4BD,CAAC,CAACS,aAF9B,EAEgDP,aAFhD,EAEkEF,CAAC,CAACa,iBAFpE;;AAID,GAnCgC;;AAqCjCC,EAAAA,IArCiC,gBAqC5Bd,CArC4B,EAqClB;AACuBT,IAAAA,mCAAmC,CAACS,CAAD,CAD1D,CACNC,UADM,6BACMC,aADN;AAEb,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"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Toast';\r\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Toast';\n"]}

package/components/Toggle/Toggle/Toggle.js

@@ -1,13 +1,17 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
 import warning from 'warning';
-import { tabListener } from "../../../lib/events/tabListener";
+import { keyListener } from "../../../lib/events/keyListener";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { jsStyles } from "../Toggle.styles";
+import { cx } from "../../../lib/theming/Emotion";
+import { styles, globalClasses } from "../Toggle.styles";
 var colorWarningShown = false;
+/**
+ * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
+ */
+
 export var Toggle = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Toggle, _React$Component);
 
@@ -20,7 +24,7 @@ export var Toggle = /*#__PURE__*/function (_React$Component) {
 
     _this.focus = function () {
       if (_this.input) {
-        tabListener.isTabPressed = true;
+        keyListener.isTabPressed = true;
 
         _this.input.focus();
       }
@@ -51,7 +55,7 @@ export var Toggle = /*#__PURE__*/function (_React$Component) {
         _this.props.onFocus(event);
       }
 
-      if (tabListener.isTabPressed) {
+      if (keyListener.isTabPressed) {
         _this.setState({
           focusByTab: true
         });
@@ -79,12 +83,12 @@ export var Toggle = /*#__PURE__*/function (_React$Component) {
 
   _proto.componentDidMount = function componentDidMount() {
     if (this.props.autoFocus) {
-      tabListener.isTabPressed = true;
+      keyListener.isTabPressed = true;
       this.focus();
     }
   }
-  /**
-  * @public
+  /**
+  * @public
   */
   ;
 
@@ -98,7 +102,7 @@ export var Toggle = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.renderMain = function renderMain() {
-    var _cn, _cn2, _cn4;
+    var _cx, _cx2, _cx4, _cx5, _cx6;
 
     var _this$props = this.props,
         children = _this$props.children,
@@ -106,17 +110,18 @@ export var Toggle = /*#__PURE__*/function (_React$Component) {
         warning = _this$props.warning,
         error = _this$props.error,
         loading = _this$props.loading,
-        color = _this$props.color;
+        color = _this$props.color,
+        id = _this$props.id;
     var disabled = this.props.disabled || loading;
     var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;
-    var containerClassNames = cn(jsStyles.container(this.theme), (_cn = {}, _cn[jsStyles.isLoading(this.theme)] = !!loading, _cn));
-    var labelClassNames = cn(jsStyles.root(this.theme), (_cn2 = {}, _cn2[jsStyles.rootLeft()] = captionPosition === 'left', _cn2[jsStyles.disabled(this.theme)] = !!disabled, _cn2));
+    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 caption = null;
 
     if (children) {
-      var _cn3;
+      var _cx3;
 
-      var captionClass = cn(jsStyles.caption(this.theme), (_cn3 = {}, _cn3[jsStyles.captionLeft(this.theme)] = captionPosition === 'left', _cn3));
+      var captionClass = cx(styles.caption(this.theme), (_cx3 = {}, _cx3[styles.captionLeft(this.theme)] = captionPosition === 'left', _cx3[styles.disabledCaption(this.theme)] = !!disabled, _cx3));
       caption = /*#__PURE__*/React.createElement("span", {
         className: captionClass
       }, children);
@@ -125,32 +130,32 @@ export var Toggle = /*#__PURE__*/function (_React$Component) {
     return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("label", {
       className: labelClassNames
     }, /*#__PURE__*/React.createElement("div", {
-      className: cn(jsStyles.outline(this.theme), (_cn4 = {}, _cn4[jsStyles.isWarning(this.theme)] = !!warning, _cn4[jsStyles.isError(this.theme)] = !!error, _cn4[jsStyles.focused(this.theme)] = !disabled && !!this.state.focusByTab, _cn4))
-    }, /*#__PURE__*/React.createElement("span", {
-      className: jsStyles.wrapper(this.theme)
+      className: cx(styles.button(this.theme), (_cx4 = {}, _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: jsStyles.input(this.theme),
+      className: styles.input(this.theme),
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       ref: this.inputRef,
-      disabled: disabled
+      disabled: disabled,
+      id: id
     }), /*#__PURE__*/React.createElement("div", {
       className: containerClassNames,
-      style: checked && color ? {
+      style: checked && color && !disabled ? {
         backgroundColor: color,
         boxShadow: "inset 0 0 0 1px " + color
       } : undefined
     }, /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.activeBackground(),
-      style: checked && color ? {
-        backgroundColor: color
+      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,
+        boxShadow: "inset 0 0 0 1px " + color
       } : undefined
     })), /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.handle(this.theme)
-    }))), caption));
+      className: cx(styles.handle(this.theme), globalClasses.handle, (_cx6 = {}, _cx6[styles.handleDisabled(this.theme)] = disabled, _cx6))
+    })), caption));
   };
 
   _proto.isUncontrolled = function isUncontrolled() {

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

@@ -1 +1 @@
-{"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","cn","warning","tabListener","ThemeContext","CommonWrapper","jsStyles","colorWarningShown","Toggle","props","theme","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","renderMain","children","captionPosition","error","loading","color","disabled","containerClassNames","container","isLoading","labelClassNames","root","rootLeft","caption","captionClass","captionLeft","outline","isWarning","isError","focused","wrapper","backgroundColor","boxShadow","undefined","activeBackground","handle","Component","__KONTUR_REACT_UI__","propTypes","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\nimport warning from 'warning';\r\n\r\nimport { tabListener } from '../../lib/events/tabListener';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './Toggle.styles';\r\n\r\nlet colorWarningShown = false;\r\n\r\nexport interface ToggleProps extends CommonProps {\r\n  children?: React.ReactNode;\r\n  /**\r\n   * Положение children справа или слева от переключателя\r\n   * @default 'right'\r\n   */\r\n  captionPosition: 'left' | 'right';\r\n  checked?: boolean;\r\n  defaultChecked?: boolean;\r\n  disabled?: boolean;\r\n  onValueChange?: (value: boolean) => void;\r\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\r\n  warning?: boolean;\r\n  error?: boolean;\r\n  loading?: boolean;\r\n  autoFocus?: boolean;\r\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\r\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\r\n  color?: React.CSSProperties['color'];\r\n}\r\n\r\nexport interface ToggleState {\r\n  checked?: boolean;\r\n  focusByTab?: boolean;\r\n}\r\n\r\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\r\n  public static __KONTUR_REACT_UI__ = 'Toggle';\r\n\r\n  public static propTypes = {\r\n    checked: PropTypes.bool,\r\n    defaultChecked: PropTypes.bool,\r\n    disabled: PropTypes.bool,\r\n    error: PropTypes.bool,\r\n    loading: PropTypes.bool,\r\n    warning: PropTypes.bool,\r\n    onValueChange: PropTypes.func,\r\n    color(props: ToggleProps) {\r\n      if (props.color && !colorWarningShown) {\r\n        warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\r\n        colorWarningShown = true;\r\n      }\r\n    },\r\n  };\r\n\r\n  public static defaultProps = {\r\n    disabled: false,\r\n    loading: false,\r\n    captionPosition: 'right',\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private input: HTMLInputElement | null = null;\r\n\r\n  constructor(props: ToggleProps) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      focusByTab: false,\r\n      checked: props.defaultChecked,\r\n    };\r\n  }\r\n\r\n  public componentDidMount() {\r\n    if (this.props.autoFocus) {\r\n      tabListener.isTabPressed = true;\r\n      this.focus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public focus = () => {\r\n    if (this.input) {\r\n      tabListener.isTabPressed = true;\r\n      this.input.focus();\r\n    }\r\n  };\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const { children, captionPosition, warning, error, loading, color } = this.props;\r\n    const disabled = this.props.disabled || loading;\r\n    const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\r\n\r\n    const containerClassNames = cn(jsStyles.container(this.theme), {\r\n      [jsStyles.isLoading(this.theme)]: !!loading,\r\n    });\r\n\r\n    const labelClassNames = cn(jsStyles.root(this.theme), {\r\n      [jsStyles.rootLeft()]: captionPosition === 'left',\r\n      [jsStyles.disabled(this.theme)]: !!disabled,\r\n    });\r\n\r\n    let caption = null;\r\n    if (children) {\r\n      const captionClass = cn(jsStyles.caption(this.theme), {\r\n        [jsStyles.captionLeft(this.theme)]: captionPosition === 'left',\r\n      });\r\n      caption = <span className={captionClass}>{children}</span>;\r\n    }\r\n\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <label className={labelClassNames}>\r\n          <div\r\n            className={cn(jsStyles.outline(this.theme), {\r\n              [jsStyles.isWarning(this.theme)]: !!warning,\r\n              [jsStyles.isError(this.theme)]: !!error,\r\n              [jsStyles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\r\n            })}\r\n          >\r\n            <span className={jsStyles.wrapper(this.theme)}>\r\n              <input\r\n                type=\"checkbox\"\r\n                checked={checked}\r\n                onChange={this.handleChange}\r\n                className={jsStyles.input(this.theme)}\r\n                onFocus={this.handleFocus}\r\n                onBlur={this.handleBlur}\r\n                ref={this.inputRef}\r\n                disabled={disabled}\r\n              />\r\n              <div\r\n                className={containerClassNames}\r\n                style={\r\n                  checked && color\r\n                    ? {\r\n                        backgroundColor: color,\r\n                        boxShadow: `inset 0 0 0 1px ${color}`,\r\n                      }\r\n                    : undefined\r\n                }\r\n              >\r\n                <div\r\n                  className={jsStyles.activeBackground()}\r\n                  style={checked && color ? { backgroundColor: color } : undefined}\r\n                />\r\n              </div>\r\n              <div className={jsStyles.handle(this.theme)} />\r\n            </span>\r\n          </div>\r\n          {caption}\r\n        </label>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private inputRef = (element: HTMLInputElement) => {\r\n    this.input = element;\r\n  };\r\n\r\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (this.props.onValueChange) {\r\n      this.props.onValueChange(event.target.checked);\r\n    }\r\n\r\n    if (this.isUncontrolled()) {\r\n      this.setState({\r\n        checked: event.target.checked,\r\n      });\r\n    }\r\n\r\n    if (this.props.onChange) {\r\n      this.props.onChange(event);\r\n    }\r\n  };\r\n\r\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\r\n    if (this.props.onFocus) {\r\n      this.props.onFocus(event);\r\n    }\r\n\r\n    if (tabListener.isTabPressed) {\r\n      this.setState({ focusByTab: true });\r\n    }\r\n  };\r\n\r\n  private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\r\n    if (this.props.onBlur) {\r\n      this.props.onBlur(event);\r\n    }\r\n    this.setState({\r\n      focusByTab: false,\r\n    });\r\n  };\r\n\r\n  private isUncontrolled() {\r\n    return this.props.checked === undefined;\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","warning","keyListener","ThemeContext","CommonWrapper","cx","styles","globalClasses","colorWarningShown","Toggle","props","theme","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","renderMain","children","captionPosition","error","loading","color","id","disabled","containerClassNames","container","containerDisabled","containerLoading","labelClassNames","root","rootLeft","caption","captionClass","captionLeft","disabledCaption","button","isWarning","isError","focused","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","Component","__KONTUR_REACT_UI__","propTypes","bool","func","defaultProps"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,OAAP,MAAoB,SAApB;;AAEA,SAASC,WAAT,QAA4B,8BAA5B;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,MAAT,EAAiBC,aAAjB,QAAsC,iBAAtC;;AAEA,IAAIC,iBAAiB,GAAG,KAAxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA;AACA;AACA;AACA,WAAaC,MAAb;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BE,kBAAYC,KAAZ,EAAgC;AAC9B,wCAAMA,KAAN,UAD8B,MAHxBC,KAGwB,gBAFxBC,KAEwB,GAFS,IAET;;;;;;;;;;;;;;;;;;AAmBzBC,IAAAA,KAnByB,GAmBjB,YAAM;AACnB,UAAI,MAAKD,KAAT,EAAgB;AACdV,QAAAA,WAAW,CAACY,YAAZ,GAA2B,IAA3B;AACA,cAAKF,KAAL,CAAWC,KAAX;AACD;AACF,KAxB+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2HxBE,IAAAA,QA3HwB,GA2Hb,UAACC,OAAD,EAA+B;AAChD,YAAKJ,KAAL,GAAaI,OAAb;AACD,KA7H+B;;AA+HxBC,IAAAA,YA/HwB,GA+HT,UAACC,KAAD,EAAgD;AACrE,UAAI,MAAKR,KAAL,CAAWS,aAAf,EAA8B;AAC5B,cAAKT,KAAL,CAAWS,aAAX,CAAyBD,KAAK,CAACE,MAAN,CAAaC,OAAtC;AACD;;AAED,UAAI,MAAKC,cAAL,EAAJ,EAA2B;AACzB,cAAKC,QAAL,CAAc;AACZF,UAAAA,OAAO,EAAEH,KAAK,CAACE,MAAN,CAAaC,OADV,EAAd;;AAGD;;AAED,UAAI,MAAKX,KAAL,CAAWc,QAAf,EAAyB;AACvB,cAAKd,KAAL,CAAWc,QAAX,CAAoBN,KAApB;AACD;AACF,KA7I+B;;AA+IxBO,IAAAA,WA/IwB,GA+IV,UAACP,KAAD,EAA+C;AACnE,UAAI,MAAKR,KAAL,CAAWgB,OAAf,EAAwB;AACtB,cAAKhB,KAAL,CAAWgB,OAAX,CAAmBR,KAAnB;AACD;;AAED,UAAIhB,WAAW,CAACY,YAAhB,EAA8B;AAC5B,cAAKS,QAAL,CAAc,EAAEI,UAAU,EAAE,IAAd,EAAd;AACD;AACF,KAvJ+B;;AAyJxBC,IAAAA,UAzJwB,GAyJX,UAACV,KAAD,EAA+C;AAClE,UAAI,MAAKR,KAAL,CAAWmB,MAAf,EAAuB;AACrB,cAAKnB,KAAL,CAAWmB,MAAX,CAAkBX,KAAlB;AACD;AACD,YAAKK,QAAL,CAAc;AACZI,QAAAA,UAAU,EAAE,KADA,EAAd;;AAGD,KAhK+B,CAG9B,MAAKG,KAAL,GAAa,EACXH,UAAU,EAAE,KADD,EAEXN,OAAO,EAAEX,KAAK,CAACqB,cAFJ,EAAb,CAH8B,aAO/B,CAnCH,qCAqCSC,iBArCT,GAqCE,6BAA2B,CACzB,IAAI,KAAKtB,KAAL,CAAWuB,SAAf,EAA0B,CACxB/B,WAAW,CAACY,YAAZ,GAA2B,IAA3B,CACA,KAAKD,KAAL,GACD,CACF,CA1CH,CA4CE;AACF;AACA,KA9CA,QAsDSqB,MAtDT,GAsDE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACvB,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACwB,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CA/DH,QAiEUA,UAjEV,GAiEE,sBAAqB,mDACuD,KAAKzB,KAD5D,CACX0B,QADW,eACXA,QADW,CACDC,eADC,eACDA,eADC,CACgBpC,OADhB,eACgBA,OADhB,CACyBqC,KADzB,eACyBA,KADzB,CACgCC,OADhC,eACgCA,OADhC,CACyCC,KADzC,eACyCA,KADzC,CACgDC,EADhD,eACgDA,EADhD,CAEnB,IAAMC,QAAQ,GAAG,KAAKhC,KAAL,CAAWgC,QAAX,IAAuBH,OAAxC,CACA,IAAMlB,OAAO,GAAG,KAAKC,cAAL,KAAwB,KAAKQ,KAAL,CAAWT,OAAnC,GAA6C,KAAKX,KAAL,CAAWW,OAAxE,CAEA,IAAMsB,mBAAmB,GAAGtC,EAAE,CAACC,MAAM,CAACsC,SAAP,CAAiB,KAAKjC,KAAtB,CAAD,iBAC3BL,MAAM,CAACuC,iBAAP,CAAyB,KAAKlC,KAA9B,CAD2B,IACY,CAAC,CAAC+B,QADd,MAE3BnC,aAAa,CAACqC,SAFa,IAED,IAFC,MAG3BrC,aAAa,CAACsC,iBAHa,IAGO,CAAC,CAACH,QAHT,MAI3BnC,aAAa,CAACuC,gBAJa,IAIMP,OAJN,OAA9B,CAOA,IAAMQ,eAAe,GAAG1C,EAAE,CAACC,MAAM,CAAC0C,IAAP,CAAY,KAAKrC,KAAjB,CAAD,mBACvBL,MAAM,CAAC2C,QAAP,EADuB,IACHZ,eAAe,KAAK,MADjB,OAEvB/B,MAAM,CAACoC,QAAP,EAFuB,IAEH,CAAC,CAACA,QAFC,OAGvBnC,aAAa,CAACmC,QAHS,IAGE,CAAC,CAACA,QAHJ,QAA1B,CAMA,IAAIQ,OAAO,GAAG,IAAd,CACA,IAAId,QAAJ,EAAc,UACZ,IAAMe,YAAY,GAAG9C,EAAE,CAACC,MAAM,CAAC4C,OAAP,CAAe,KAAKvC,KAApB,CAAD,mBACpBL,MAAM,CAAC8C,WAAP,CAAmB,KAAKzC,KAAxB,CADoB,IACa0B,eAAe,KAAK,MADjC,OAEpB/B,MAAM,CAAC+C,eAAP,CAAuB,KAAK1C,KAA5B,CAFoB,IAEiB,CAAC,CAAC+B,QAFnB,QAAvB,CAIAQ,OAAO,gBAAG,8BAAM,SAAS,EAAEC,YAAjB,IAAgCf,QAAhC,CAAV,CACD,CAED,oBACE,oBAAC,aAAD,EAAmB,KAAK1B,KAAxB,eACE,+BAAO,SAAS,EAAEqC,eAAlB,iBACE,6BACE,SAAS,EAAE1C,EAAE,CAACC,MAAM,CAACgD,MAAP,CAAc,KAAK3C,KAAnB,CAAD,mBACVL,MAAM,CAACiD,SAAP,CAAiB,KAAK5C,KAAtB,CADU,IACqB,CAAC,CAACV,OADvB,OAEVK,MAAM,CAACkD,OAAP,CAAe,KAAK7C,KAApB,CAFU,IAEmB,CAAC,CAAC2B,KAFrB,OAGVhC,MAAM,CAACmD,OAAP,CAAe,KAAK9C,KAApB,CAHU,IAGmB,CAAC+B,QAAD,IAAa,CAAC,CAAC,KAAKZ,KAAL,CAAWH,UAH7C,QADf,iBAOE,+BACE,IAAI,EAAC,UADP,EAEE,OAAO,EAAEN,OAFX,EAGE,QAAQ,EAAE,KAAKJ,YAHjB,EAIE,SAAS,EAAEX,MAAM,CAACM,KAAP,CAAa,KAAKD,KAAlB,CAJb,EAKE,OAAO,EAAE,KAAKc,WALhB,EAME,MAAM,EAAE,KAAKG,UANf,EAOE,GAAG,EAAE,KAAKb,QAPZ,EAQE,QAAQ,EAAE2B,QARZ,EASE,EAAE,EAAED,EATN,GAPF,eAkBE,6BACE,SAAS,EAAEE,mBADb,EAEE,KAAK,EACHtB,OAAO,IAAImB,KAAX,IAAoB,CAACE,QAArB,GACI,EACEgB,eAAe,EAAElB,KADnB,EAEEmB,SAAS,uBAAqBnB,KAFhC,EADJ,GAKIoB,SARR,iBAWE,6BACE,SAAS,EAAEvD,EAAE,CAACC,MAAM,CAACuD,gBAAP,EAAD,EAA4BtD,aAAa,CAACuD,UAA1C,mBACVxD,MAAM,CAACyD,uBAAP,CAA+B,KAAKpD,KAApC,CADU,IACmC4B,OADnC,OAEVjC,MAAM,CAAC0D,kBAAP,CAA0B,KAAKrD,KAA/B,CAFU,IAE8B+B,QAF9B,QADf,EAKE,KAAK,EACHrB,OAAO,IAAImB,KAAX,IAAoB,CAACE,QAArB,GACI,EACEgB,eAAe,EAAElB,KADnB,EAEEmB,SAAS,uBAAqBnB,KAFhC,EADJ,GAKIoB,SAXR,GAXF,CAlBF,eA4CE,6BACE,SAAS,EAAEvD,EAAE,CAACC,MAAM,CAAC2D,MAAP,CAAc,KAAKtD,KAAnB,CAAD,EAA4BJ,aAAa,CAAC0D,MAA1C,mBACV3D,MAAM,CAAC4D,cAAP,CAAsB,KAAKvD,KAA3B,CADU,IAC0B+B,QAD1B,QADf,GA5CF,CADF,EAmDGQ,OAnDH,CADF,CADF,CAyDD,CArJH,QA8LU5B,cA9LV,GA8LE,0BAAyB;AACvB,WAAO,KAAKZ,KAAL,CAAWW,OAAX,KAAuBuC,SAA9B;AACD,GAhMH,iBAA4B7D,KAAK,CAACoE,SAAlC,EAAa1D,M,CACG2D,mB,GAAsB,Q,CADzB3D,M,CAGG4D,S,GAAY,EACxBhD,OAAO,EAAErB,SAAS,CAACsE,IADK,EAExBvC,cAAc,EAAE/B,SAAS,CAACsE,IAFF,EAGxB5B,QAAQ,EAAE1C,SAAS,CAACsE,IAHI,EAIxBhC,KAAK,EAAEtC,SAAS,CAACsE,IAJO,EAKxB/B,OAAO,EAAEvC,SAAS,CAACsE,IALK,EAMxBrE,OAAO,EAAED,SAAS,CAACsE,IANK,EAOxBnD,aAAa,EAAEnB,SAAS,CAACuE,IAPD,EAQxB/B,KARwB,iBAQlB9B,KARkB,EAQE,CACxB,IAAIA,KAAK,CAAC8B,KAAN,IAAe,CAAChC,iBAApB,EAAuC,CACrCP,OAAO,CAAC,KAAD,iGAAP,CACAO,iBAAiB,GAAG,IAApB,CACD,CACF,CAbuB,E,CAHfC,M,CAmBG+D,Y,GAAe,EAC3B9B,QAAQ,EAAE,KADiB,EAE3BH,OAAO,EAAE,KAFkB,EAG3BF,eAAe,EAAE,OAHU,E","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';\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 */\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\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 {...this.props}>\n        <label className={labelClassNames}>\n          <div\n            className={cx(styles.button(this.theme), {\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"]}

package/components/Toggle/Toggle.d.ts

@@ -4,27 +4,73 @@ import { CommonProps } from '../../internal/CommonWrapper';
 export interface ToggleProps extends CommonProps {
     children?: React.ReactNode;
     /**
-     * Положение children справа или слева от переключателя
+     * Положение `children` относительно переключателя.
      * @default 'right'
      */
     captionPosition: 'left' | 'right';
+    /**
+     * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.
+     * @default false
+     */
     checked?: boolean;
+    /**
+     * Делает `тогл` включенным по умолчанию.
+     */
     defaultChecked?: boolean;
+    /**
+     * Отключает `тогл`.
+     */
     disabled?: boolean;
+    /**
+     * Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.
+     */
     onValueChange?: (value: boolean) => void;
+    /**
+     * Событие вызывающееся при клике на `тогл`.
+     */
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Cостояние валидации при предупреждении.
+     * @default false
+     */
     warning?: boolean;
+    /**
+     * Cостояние валидации при ошибке.
+     * @default false
+     */
     error?: boolean;
+    /**
+     * Добавляет стили для состояния `loading` и отключает `тогл`.
+     */
     loading?: boolean;
+    /**
+     * Если true, выставляет фокус на `тогле` после загрузки страницы.
+     */
     autoFocus?: boolean;
+    /**
+     * Событие вызывающееся, когда `тогл` получает фокус.
+     */
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * Событие вызывающееся, когда `тогл` теряет фокус.
+     */
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.
+     */
     color?: React.CSSProperties['color'];
+    /**
+     * HTML-атрибут `id` для передачи во внутренний `<input />`.
+     */
+    id?: string;
 }
 export interface ToggleState {
     checked?: boolean;
     focusByTab?: boolean;
 }
+/**
+ * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
+ */
 export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
     static __KONTUR_REACT_UI__: string;
     static propTypes: {

package/components/Toggle/Toggle.md

@@ -1,20 +1,94 @@
-```jsx harmony
-const [checked, setChecked] = React.useState(false);
-
-<div>
-  <Toggle checked={checked} onValueChange={setChecked} /> {checked ? 'On' : 'Off'}
-</div>;
-```
-
-В компонент можно передать `children`, который будет отображаться рядом с переключателем.
-Положение `children` относительно переключателя указывается в `captionPosition`.
-
-```jsx harmony
-const [checked, setChecked] = React.useState(false);
-
-<div>
-  <Toggle checked={checked} onValueChange={setChecked} captionPosition="left">
-    <span>Показывать уведомления</span>
-  </Toggle>
-</div>;
-```
+Базовый пример тогла.
+
+```jsx harmony
+const [checked, setChecked] = React.useState(false);
+
+<Toggle checked={checked} onValueChange={setChecked}>
+  {checked ? 'On' : 'Off'}
+</Toggle>
+```
+
+Пример тогла включенного по умолчанию.
+
+```jsx harmony
+<Toggle defaultChecked>
+  Включен по умолчанию
+</Toggle>
+```
+
+Тогл с надписью слева от переключателя.
+
+```jsx harmony
+const [checked, setChecked] = React.useState(false);
+
+<Toggle checked={checked} onValueChange={setChecked} captionPosition="left">
+  Показывать уведомления
+</Toggle>
+```
+
+Тогл с внешним `<label/>`.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+const [checked, setChecked] = React.useState(false);
+
+<Gapped>
+  <Toggle id="toggle-1" checked={checked} onValueChange={setChecked}/>
+  <label htmlFor="toggle-1">Внешний label</label>
+</Gapped>
+```
+
+Тогл получающий фокус после загрузки страницы.
+
+```jsx harmony
+<Toggle autoFocus>
+  Сразу с фокусом
+</Toggle>
+```
+
+Тоглы в различных стилях.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped gap="20px">
+  <Toggle warning>
+    Warning
+  </Toggle>
+  <Toggle error>
+    Error
+  </Toggle>
+  <Toggle loading>
+    Loading
+  </Toggle>
+  <Toggle disabled>
+    Disabled
+  </Toggle>
+</Gapped>
+```
+
+Тогл с кастомным действием при получении и потере фокуса.
+
+
+```jsx harmony
+import { Toast } from '@skbkontur/react-ui';
+
+<Toggle
+  onFocus={() => Toast.push('Я получил фокус!')}
+  onBlur={() => Toast.push('И потерял его...')}
+  >
+  С кастомными действиями при фокусе и его потере
+</Toggle>
+```
+
+
+Тогл с кастомным действием при переключении.
+
+```jsx harmony
+import { Toast } from '@skbkontur/react-ui';
+
+<Toggle onChange={() => Toast.push("Запускаю кастомное действие")}>
+  Кастомное действие при переключении
+</Toggle>
+```

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

@@ -1,58 +1,77 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
 
-import { css, cssName, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
+import { isChrome } from "../../../lib/client";
+export var globalClasses = prefix('toggle')({
+  handle: 'handle',
+  container: 'container',
+  disabled: 'disabled',
+  containerDisabled: 'container-disabled',
+  containerLoading: 'container-loading',
+  background: 'background'
+});
+export var styles = memoizeStyle({
   root: function root(t) {
-    var disabled = cssName(styles.disabled(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\n      &:hover:not(", ") {\n        ", " {\n          background: ", ";\n        }\n      }\n      &:active:not(", ") ", " {\n        width: ", ";\n      }\n      &:active:not(", ") ", ":checked ~ ", " {\n        transform: translateX(", ") translateX(-", ")\n          translateX(-", ");\n      }\n    "])), disabled, cssName(styles.handle(t)), t.toggleBgHover, disabled, cssName(styles.handle(t)), handleActiveWidth, disabled, cssName(styles.input(t)), cssName(styles.handle(t)), t.toggleWidth, handleWidthWithBorders, 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);
   },
   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);
   },
+  handleDisabled: function handleDisabled(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background: ", " !important; // override root hover/active styles\n    "])), t.toggleDisabledHandleBg);
+  },
   input: function input(t) {
     var handleWidthWithBorders = t.toggleHeight;
-    return css(_templateObject3 || (_templateObject3 = _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        width: 70%;\n        background: ", ";\n      }\n      &:checked ~ ", " {\n        transform: translateX(", ") translateX(-", ");\n      }\n    "])), cssName(styles.container(t)), t.toggleBorderWidth, t.toggleBgChecked, t.toggleBgChecked, cssName(styles.container(t)), cssName(styles.activeBackground()), t.toggleBgChecked, cssName(styles.handle(t)), t.toggleWidth, handleWidthWithBorders);
+    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);
   },
   container: function container(t) {
-    return css(_templateObject4 || (_templateObject4 = _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(_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);
+  },
+  containerDisabled: function containerDisabled(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    "])), t.toggleBgDisabled, t.toggleBorderColorDisabled);
   },
   focused: function focused(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", " !important;\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleFocusShadowColor);
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleFocusShadowColor);
   },
   activeBackground: function activeBackground() {
-    return css(_templateObject6 || (_templateObject6 = _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(_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    "])));
+  },
+  disabledBackground: function disabledBackground(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      box-shadow: inset 0 0 0 1px ", ";\n      width: 0;\n    "])), t.toggleBorderColorDisabled);
   },
-  isLoading: function isLoading(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      ", ":checked ~ ", "& {\n        background: ", ";\n        box-shadow: inset 0 0 0 ", " ", ";\n      }\n      ", " {\n        background: ", ";\n      }\n    "])), cssName(styles.input(t)), cssName(styles.container(t)), t.toggleBorderColor, t.toggleBorderWidth, t.toggleBorderColor, cssName(styles.activeBackground()), t.toggleBgActive);
+  activeBackgroundLoading: function activeBackgroundLoading(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.toggleBgActive);
   },
   isWarning: function isWarning(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
   },
   isError: function isError(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
   },
-  outline: function outline(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n    "])), t.toggleBorderRadius);
+  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);
   },
-  wrapper: function wrapper(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      height: ", ";\n      position: relative;\n      width: ", ";\n      flex: 1 0 ", ";\n\n      &::after {\n        content: '';\n        display: inline-block;\n      }\n    "])), t.toggleHeight, t.toggleWidth, t.toggleWidth);
-  },
-  disabled: function disabled(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      cursor: default !important;\n\n      ", " {\n        background: ", ";\n      }\n\n      ", " {\n        opacity: 0.3;\n      }\n    "])), cssName(styles.container(t)), t.toggleBgDisabled, cssName(styles.wrapper(t)));
+  disabled: function disabled() {
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
   },
   rootLeft: function rootLeft() {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      flex-direction: row-reverse;\n    "])));
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      flex-direction: row-reverse;\n    "])));
   },
   caption: function caption(t) {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      padding: 0 0 0 ", ";\n    "])), t.toggleCaptionGap);
+    return css(_templateObject16 || (_templateObject16 = _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(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textColorDisabled);
   },
   captionLeft: function captionLeft(t) {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      padding: 0 ", " 0 0;\n    "])), t.toggleCaptionGap);
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "])), t.toggleTextColor, t.toggleCaptionGap);
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

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

@@ -1 +1 @@
-{"version":3,"sources":["Toggle.styles.ts"],"names":["css","cssName","memoizeStyle","styles","root","t","disabled","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","handle","toggleBgHover","input","toggleWidth","handleSize","toggleBg","toggleHandleBorderRadius","container","toggleBgChecked","activeBackground","toggleBorderRadius","toggleBorderColor","focused","outlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","isLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","outline","wrapper","toggleBgDisabled","rootLeft","caption","toggleCaptionGap","captionLeft","jsStyles"],"mappings":"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","sourcesContent":["import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    const disabled = cssName(styles.disabled(t));\r\n    const handleWidthWithBorders = t.toggleHeight;\r\n    const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;\r\n    return css`\r\n      display: inline-flex;\r\n      cursor: pointer;\r\n\r\n      &:hover:not(${disabled}) {\r\n        ${cssName(styles.handle(t))} {\r\n          background: ${t.toggleBgHover};\r\n        }\r\n      }\r\n      &:active:not(${disabled}) ${cssName(styles.handle(t))} {\r\n        width: ${handleActiveWidth};\r\n      }\r\n      &:active:not(${disabled}) ${cssName(styles.input(t))}:checked ~ ${cssName(styles.handle(t))} {\r\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders})\r\n          translateX(-${t.toggleHandleActiveWidthIncrement});\r\n      }\r\n    `;\r\n  },\r\n\r\n  handle(t: Theme) {\r\n    const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;\r\n    return css`\r\n      background: ${t.toggleBg};\r\n      border-radius: ${t.toggleHandleBorderRadius};\r\n      bottom: ${t.toggleBorderWidth};\r\n      box-shadow: 0 ${t.toggleBorderWidth} 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ${t.toggleBorderWidth} rgba(0, 0, 0, 0.15);\r\n      height: ${handleSize};\r\n      left: ${t.toggleBorderWidth};\r\n      position: absolute;\r\n      top: ${t.toggleBorderWidth};\r\n      transition: 0.2s ease-in;\r\n      width: ${handleSize};\r\n    `;\r\n  },\r\n\r\n  input(t: Theme) {\r\n    const handleWidthWithBorders = t.toggleHeight;\r\n    return css`\r\n      position: absolute;\r\n      opacity: 0;\r\n\r\n      &:focus {\r\n        outline: none;\r\n      }\r\n      &:checked ~ ${cssName(styles.container(t))} {\r\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgChecked};\r\n        background: ${t.toggleBgChecked};\r\n        transition: background 0s 0.2s;\r\n      }\r\n      &:checked ~ ${cssName(styles.container(t))} ${cssName(styles.activeBackground())} {\r\n        width: 70%;\r\n        background: ${t.toggleBgChecked};\r\n      }\r\n      &:checked ~ ${cssName(styles.handle(t))} {\r\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders});\r\n      }\r\n    `;\r\n  },\r\n\r\n  container(t: Theme) {\r\n    return css`\r\n      border-radius: ${t.toggleBorderRadius};\r\n      box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\r\n      height: 100%;\r\n      overflow: hidden;\r\n      position: absolute;\r\n      width: 100%;\r\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\r\n      z-index: 0;\r\n    `;\r\n  },\r\n\r\n  focused(t: Theme) {\r\n    return css`\r\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor} !important;\r\n    `;\r\n  },\r\n\r\n  activeBackground() {\r\n    return css`\r\n      background: inherit;\r\n      bottom: 0;\r\n      left: 0;\r\n      position: absolute;\r\n      top: 0;\r\n      transition: 0.2s ease-in;\r\n      width: 10px;\r\n    `;\r\n  },\r\n\r\n  isLoading(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.input(t))}:checked ~ ${cssName(styles.container(t))}& {\r\n        background: ${t.toggleBorderColor};\r\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\r\n      }\r\n      ${cssName(styles.activeBackground())} {\r\n        background: ${t.toggleBgActive};\r\n      }\r\n    `;\r\n  },\r\n\r\n  isWarning(t: Theme) {\r\n    return css`\r\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorWarning};\r\n    `;\r\n  },\r\n\r\n  isError(t: Theme) {\r\n    return css`\r\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\r\n    `;\r\n  },\r\n\r\n  outline(t: Theme) {\r\n    return css`\r\n      border-radius: ${t.toggleBorderRadius};\r\n    `;\r\n  },\r\n\r\n  wrapper(t: Theme) {\r\n    return css`\r\n      display: inline-block;\r\n      height: ${t.toggleHeight};\r\n      position: relative;\r\n      width: ${t.toggleWidth};\r\n      flex: 1 0 ${t.toggleWidth};\r\n\r\n      &::after {\r\n        content: '';\r\n        display: inline-block;\r\n      }\r\n    `;\r\n  },\r\n\r\n  disabled(t: Theme) {\r\n    return css`\r\n      cursor: default !important;\r\n\r\n      ${cssName(styles.container(t))} {\r\n        background: ${t.toggleBgDisabled};\r\n      }\r\n\r\n      ${cssName(styles.wrapper(t))} {\r\n        opacity: 0.3;\r\n      }\r\n    `;\r\n  },\r\n\r\n  rootLeft() {\r\n    return css`\r\n      flex-direction: row-reverse;\r\n    `;\r\n  },\r\n\r\n  caption(t: Theme) {\r\n    return css`\r\n      padding: 0 0 0 ${t.toggleCaptionGap};\r\n    `;\r\n  },\r\n\r\n  captionLeft(t: Theme) {\r\n    return css`\r\n      padding: 0 ${t.toggleCaptionGap} 0 0;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Toggle.styles.ts"],"names":["css","memoizeStyle","prefix","isChrome","globalClasses","handle","container","disabled","containerDisabled","containerLoading","background","styles","root","t","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","toggleLineHeight","toggleFontSize","toggleBgHover","toggleWidth","handleSize","toggleBg","toggleHandleBorderRadius","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColorDisabledChecked","toggleBgDisabledChecked","toggleBorderColor","toggleBorderRadius","toggleBgDisabled","toggleBorderColorDisabled","focused","outlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","disabledBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","button","labGrotesqueCompenstation","parseInt","labGrotesqueBaselineCompensation","fontSize","checkboxFontSize","baselineCompensation","toggleBaseBg","toggleButtonOffsetY","rootLeft","caption","toggleTextColor","toggleCaptionGap","disabledCaption","textColorDisabled","captionLeft"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isChrome } from '../../lib/client';\n\nexport const globalClasses = prefix('toggle')({\n  handle: 'handle',\n  container: 'container',\n  disabled: 'disabled',\n  containerDisabled: 'container-disabled',\n  containerLoading: 'container-loading',\n  background: 'background',\n});\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const handleWidthWithBorders = t.toggleHeight;\n    const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;\n    return css`\n      display: inline-flex;\n      cursor: pointer;\n      align-items: baseline;\n      position: relative;\n      line-height: ${t.toggleLineHeight};\n      font-size: ${t.toggleFontSize};\n\n      &:hover .${globalClasses.handle} {\n        background: ${t.toggleBgHover};\n      }\n      &:active:not(.${globalClasses.disabled}) .${globalClasses.handle} {\n        width: ${handleActiveWidth};\n      }\n      &:active:not(.${globalClasses.disabled}) input:checked ~ .${globalClasses.handle} {\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders})\n          translateX(-${t.toggleHandleActiveWidthIncrement});\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: ${t.toggleWidth};\n        flex: 0 0 auto;\n      }\n    `;\n  },\n\n  handle(t: Theme) {\n    const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;\n    return css`\n      background: ${t.toggleBg};\n      border-radius: ${t.toggleHandleBorderRadius};\n      bottom: ${t.toggleBorderWidth};\n      box-shadow: 0 ${t.toggleBorderWidth} 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ${t.toggleBorderWidth} rgba(0, 0, 0, 0.15);\n      height: ${handleSize};\n      left: ${t.toggleBorderWidth};\n      position: absolute;\n      top: ${t.toggleBorderWidth};\n      transition: 0.2s ease-in;\n      width: ${handleSize};\n    `;\n  },\n\n  handleDisabled(t: Theme) {\n    return css`\n      background: ${t.toggleDisabledHandleBg} !important; // override root hover/active styles\n    `;\n  },\n\n  input(t: Theme) {\n    const handleWidthWithBorders = t.toggleHeight;\n    return css`\n      position: absolute;\n      opacity: 0;\n\n      &:focus {\n        outline: none;\n      }\n      &:checked ~ .${globalClasses.container} {\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgChecked};\n        background: ${t.toggleBgChecked};\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .${globalClasses.containerDisabled} {\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColorDisabledChecked};\n        background: ${t.toggleBgDisabledChecked};\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .${globalClasses.containerLoading} {\n        background: ${t.toggleBorderColor};\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n      }\n      &:checked ~ .${globalClasses.container} .${globalClasses.background} {\n        width: 70%;\n        background: ${t.toggleBgChecked};\n      }\n      &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n        width: 70%;\n        background: ${t.toggleBgDisabledChecked};\n        border-radius: calc(${t.toggleHeight} * 0.5) 0 0 calc(${t.toggleHeight} * 0.5);\n        box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabledChecked};\n      }\n      &:checked ~ .${globalClasses.handle} {\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders});\n      }\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      border-radius: ${t.toggleBorderRadius};\n      box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\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    `;\n  },\n\n  containerDisabled(t: Theme) {\n    return css`\n      background: ${t.toggleBgDisabled};\n      box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n    `;\n  },\n\n  focused(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\n    `;\n  },\n\n  activeBackground() {\n    return css`\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    `;\n  },\n\n  disabledBackground(t: Theme) {\n    return css`\n      box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n      width: 0;\n    `;\n  },\n\n  activeBackgroundLoading(t: Theme) {\n    return css`\n      background: ${t.toggleBgActive};\n    `;\n  },\n\n  isWarning(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorWarning};\n    `;\n  },\n\n  isError(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\n    `;\n  },\n\n  button(t: Theme) {\n    const labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);\n    const fontSize = parseInt(t.checkboxFontSize);\n    const baselineCompensation = fontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;\n    return css`\n      position: absolute;\n      left: 0;\n      top: 0;\n      height: ${t.toggleHeight};\n      width: ${t.toggleWidth};\n      flex: 1 0 ${t.toggleWidth};\n\n      background: ${t.toggleBaseBg};\n      border-radius: ${t.toggleBorderRadius};\n      line-height: ${t.toggleHeight};\n\n      margin-top: calc(${t.toggleButtonOffsetY} + ${baselineCompensation}px);\n    `;\n  },\n\n  disabled() {\n    return css`\n      cursor: default;\n    `;\n  },\n\n  rootLeft() {\n    return css`\n      flex-direction: row-reverse;\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      color: ${t.toggleTextColor};\n      padding: 0 0 0 ${t.toggleCaptionGap};\n      line-height: ${t.toggleLineHeight};\n      font-size: ${t.toggleFontSize};\n    `;\n  },\n\n  disabledCaption(t: Theme) {\n    return css`\n      color: ${t.textColorDisabled};\n    `;\n  },\n\n  captionLeft(t: Theme) {\n    return css`\n      color: ${t.toggleTextColor};\n      padding: 0 ${t.toggleCaptionGap} 0 0;\n    `;\n  },\n});\n"]}