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

package/components/Checkbox/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Checkbox.tsx"],"names":["React","PropTypes","cn","tabListener","ThemeContext","OkIcon","SquareIcon","isEdge","isFirefox","isIE11","CommonWrapper","jsStyles","Checkbox","state","focusedByTab","indeterminate","props","initialIndeterminate","theme","input","componentDidMount","setIndeterminate","setState","resetIndeterminate","renderMain","error","warning","onMouseEnter","onMouseLeave","onMouseOver","onValueChange","type","rest","isIndeterminate","rootClass","root","rootFallback","disabled","Boolean","checked","focus","inputProps","className","onChange","handleChange","onFocus","handleFocus","onBlur","handleBlur","onClick","handleClick","ref","inputRef","caption","children","captionClass","captionIE11","iconClass","iconUnchecked","iconFixBaseline","box","e","process","nextTick","isTabPressed","event","currentTarget","undefined","UNSAFE_componentWillReceiveProps","nextProps","render","blur","Component","__KONTUR_REACT_UI__","propTypes","bool","func"],"mappings":"oOAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,EAAP,MAAe,YAAf;;;AAGA,SAASC,WAAT,QAA4B,8BAA5B;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,MAAT,EAAiBC,UAAjB,QAAmC,2BAAnC;AACA,SAASC,MAAT,EAAiBC,SAAjB,EAA4BC,MAA5B,QAA0C,kBAA1C;AACA,SAASC,aAAT,QAAmE,8BAAnE;;AAEA,SAASC,QAAT,QAAyB,mBAAzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA;AACA;AACA;AACA,WAAaC,QAAb;;;;;;;;;;;;;;;AAeSC,IAAAA,KAfT,GAeiB;AACbC,MAAAA,YAAY,EAAE,KADD;AAEbC,MAAAA,aAAa,EAAE,MAAKC,KAAL,CAAWC,oBAAX,IAAmC,KAFrC,EAfjB;;;AAoBUC,IAAAA,KApBV;AAqBUC,IAAAA,KArBV;;AAuBSC,IAAAA,iBAvBT,GAuB6B,YAAM;AAC/B,UAAI,MAAKP,KAAL,CAAWE,aAAX,IAA4B,MAAKI,KAArC,EAA4C;AAC1C,cAAKA,KAAL,CAAWJ,aAAX,GAA2B,IAA3B;AACD;AACF,KA3BH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiESM,IAAAA,gBAjET,GAiE4B,YAAM;AAC9B,YAAKC,QAAL,CAAc;AACZP,QAAAA,aAAa,EAAE,IADH,EAAd;;AAGA,UAAI,MAAKI,KAAT,EAAgB;AACd,cAAKA,KAAL,CAAWJ,aAAX,GAA2B,IAA3B;AACD;AACF,KAxEH;;;;;;AA8ESQ,IAAAA,kBA9ET,GA8E8B,YAAM;AAChC,YAAKD,QAAL,CAAc;AACZP,QAAAA,aAAa,EAAE,KADH,EAAd;;AAGA,UAAI,MAAKI,KAAT,EAAgB;AACd,cAAKA,KAAL,CAAWJ,aAAX,GAA2B,KAA3B;AACD;AACF,KArFH;;AAuFUS,IAAAA,UAvFV,GAuFuB,UAACR,KAAD,EAAkD;;AAEnES,MAAAA,KAFmE;;;;;;;;;AAWjET,MAAAA,KAXiE,CAEnES,KAFmE,CAGnEC,OAHmE,GAWjEV,KAXiE,CAGnEU,OAHmE,CAInEC,YAJmE,GAWjEX,KAXiE,CAInEW,YAJmE,CAKnEC,YALmE,GAWjEZ,KAXiE,CAKnEY,YALmE,CAMnEC,WANmE,GAWjEb,KAXiE,CAMnEa,WANmE,CAOnEC,aAPmE,GAWjEd,KAXiE,CAOnEc,aAPmE,CAQnEC,IARmE,GAWjEf,KAXiE,CAQnEe,IARmE,CASnEd,oBATmE,GAWjED,KAXiE,CASnEC,oBATmE,CAUhEe,IAVgE,iCAWjEhB,KAXiE;AAYrE,UAAMiB,eAAe,GAAG,MAAKpB,KAAL,CAAWE,aAAnC;;AAEA,UAAMmB,SAAS,GAAGhC,EAAE;AACjBS,MAAAA,QAAQ,CAACwB,IAAT,CAAc,MAAKjB,KAAnB,CADiB,IACW,IADX;AAEjBP,MAAAA,QAAQ,CAACyB,YAAT,EAFiB,IAES3B,MAAM,IAAIF,MAFnB;AAGjBI,MAAAA,QAAQ,CAAC0B,QAAT,CAAkB,MAAKnB,KAAvB,CAHiB,IAGeoB,OAAO,CAACtB,KAAK,CAACqB,QAAP,CAHtB;AAIjB1B,MAAAA,QAAQ,CAAC4B,OAAT,CAAiB,MAAKrB,KAAtB,CAJiB,IAIcoB,OAAO,CAACtB,KAAK,CAACuB,OAAP,CAJrB;AAKjB5B,MAAAA,QAAQ,CAACI,aAAT,CAAuB,MAAKG,KAA5B,CALiB,IAKoBe,eALpB;AAMjBtB,MAAAA,QAAQ,CAAC6B,KAAT,CAAe,MAAKtB,KAApB,CANiB,IAMY,MAAKL,KAAL,CAAWC,YANvB;AAOjBH,MAAAA,QAAQ,CAACe,OAAT,CAAiB,MAAKR,KAAtB,CAPiB,IAOcoB,OAAO,CAACtB,KAAK,CAACU,OAAP,CAPrB;AAQjBf,MAAAA,QAAQ,CAACc,KAAT,CAAe,MAAKP,KAApB,CARiB,IAQYoB,OAAO,CAACtB,KAAK,CAACS,KAAP,CARnB,OAApB;;;AAWA,UAAMgB,UAAU;AACXT,MAAAA,IADW;AAEdD,QAAAA,IAAI,EAAE,UAFQ;AAGdW,QAAAA,SAAS,EAAE/B,QAAQ,CAACQ,KAAT,EAHG;AAIdwB,QAAAA,QAAQ,EAAE,MAAKC,YAJD;AAKdC,QAAAA,OAAO,EAAE,MAAKC,WALA;AAMdC,QAAAA,MAAM,EAAE,MAAKC,UANC;AAOdC,QAAAA,OAAO,EAAE,MAAKC,WAPA;AAQdC,QAAAA,GAAG,EAAE,MAAKC,QARI,GAAhB;;;AAWA,UAAIC,OAAO,GAAG,IAAd;AACA,UAAI,MAAKrC,KAAL,CAAWsC,QAAf,EAAyB;AACvB,YAAMC,YAAY,GAAGrD,EAAE;AACpBS,QAAAA,QAAQ,CAAC0C,OAAT,CAAiB,MAAKnC,KAAtB,CADoB,IACW,IADX;AAEpBP,QAAAA,QAAQ,CAAC6C,WAAT,EAFoB,IAEK/C,MAAM,IAAIF,MAFf,QAAvB;;AAIA8C,QAAAA,OAAO,gBAAG,8BAAM,SAAS,EAAEE,YAAjB,IAAgC,MAAKvC,KAAL,CAAWsC,QAA3C,CAAV;AACD;;AAED,UAAMG,SAAS,GAAGvD,EAAE;AACjBS,MAAAA,QAAQ,CAAC+C,aAAT,EADiB,IACU,CAAC1C,KAAK,CAACuB,OAAP,IAAkB,CAACN,eAD7B;AAEjBtB,MAAAA,QAAQ,CAACgD,eAAT,EAFiB,IAEYnD,SAAS,IAAIC,MAAb,IAAuBF,MAFnC,QAApB;;;AAKA,UAAMqD,GAAG;AACP,oCAAM,SAAS,EAAEjD,QAAQ,CAACiD,GAAT,CAAa,MAAK1C,KAAlB,CAAjB;AACIe,MAAAA,eAAe,iBAAI,oBAAC,UAAD,IAAY,SAAS,EAAEwB,SAAvB,GAApB,iBAA6D,oBAAC,MAAD,IAAQ,SAAS,EAAEA,SAAnB,GADhE,CADF;;;;AAMA;AACE,uCAAO,SAAS,EAAEvB,SAAlB,EAA6B,YAAY,EAAEP,YAA3C,EAAyD,YAAY,EAAEC,YAAvE,EAAqF,WAAW,EAAEC,WAAlG;AACE,qCAAWY,UAAX,CADF;AAEGmB,QAAAA,GAFH;AAGGP,QAAAA,OAHH,CADF;;;AAOD,KAtJH;;AAwJUP,IAAAA,WAxJV,GAwJwB,UAACe,CAAD,EAA8B;AAClD,UAAI,CAAC,MAAK7C,KAAL,CAAWqB,QAAhB,EAA0B;AACxB;AACA;AACAyB,QAAAA,OAAO,CAACC,QAAR,CAAiB,YAAM;AACrB,cAAI5D,WAAW,CAAC6D,YAAhB,EAA8B;AAC5B,kBAAK1C,QAAL,CAAc,EAAER,YAAY,EAAE,IAAhB,EAAd;AACD;AACF,SAJD;AAKD;AACF,KAlKH;;AAoKUkC,IAAAA,UApKV,GAoKuB,UAACa,CAAD,EAA2C;AAC9D,YAAK7C,KAAL,CAAW+B,MAAX,0BAAK/B,KAAL,CAAW+B,MAAX,CAAoBc,CAApB;AACA,YAAKvC,QAAL,CAAc,EAAER,YAAY,EAAE,KAAhB,EAAd;AACD,KAvKH;;AAyKUsC,IAAAA,QAzKV,GAyKqB,UAACD,GAAD,EAAkC;AACnD,YAAKhC,KAAL,GAAagC,GAAb;AACD,KA3KH;;AA6KUP,IAAAA,YA7KV,GA6KyB,UAACqB,KAAD,EAAgD;AACrE,UAAM1B,OAAO,GAAG0B,KAAK,CAACC,aAAN,CAAoB3B,OAApC;AACA,YAAKvB,KAAL,CAAWc,aAAX,0BAAKd,KAAL,CAAWc,aAAX,CAA2BS,OAA3B;;AAEA,YAAKhB,kBAAL;;AAEA,YAAKP,KAAL,CAAW2B,QAAX,0BAAK3B,KAAL,CAAW2B,QAAX,CAAsBsB,KAAtB;AACD,KApLH;;AAsLUf,IAAAA,WAtLV,GAsLwB,UAACW,CAAD,EAA2C;AAC/D,YAAK7C,KAAL,CAAWiC,OAAX,0BAAKjC,KAAL,CAAWiC,OAAX,CAAqBY,CAArB;AACA;AACA;AACA,UAAI,MAAKhD,KAAL,CAAWE,aAAX,KAA6BN,MAAM,IAAIF,MAAvC,CAAJ,EAAoD;AAClD,cAAKgB,kBAAL;AACA;AACA;AACA,YAAI,MAAKP,KAAL,CAAWc,aAAX,IAA4B,MAAKX,KAArC,EAA4C;AAC1C,cAAMoB,OAAO,GAAG,CAAC,MAAKpB,KAAL,CAAWoB,OAA5B;;AAEA,cAAI,MAAKvB,KAAL,CAAWuB,OAAX,KAAuB4B,SAA3B,EAAsC;AACpC;AACA,kBAAKhD,KAAL,CAAWoB,OAAX,GAAqBA,OAArB;AACD;;AAED,gBAAKvB,KAAL,CAAWc,aAAX,CAAyBS,OAAzB;AACD;AACF;AACF,KAzMH,sDA6BS6B,gCA7BT,GA6BE,0CAAwCC,SAAxC,EAAkE,CAChE,IAAIA,SAAS,CAAC9B,OAAV,KAAsB,KAAKvB,KAAL,CAAWuB,OAArC,EAA8C,CAC5C,KAAKhB,kBAAL,GACD,CACF,CAjCH,QAmCS+C,MAnCT,GAmCE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAAApD,KAAK,EAAI,CACR,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBAAO,oBAAC,aAAD,EAAmB,MAAI,CAACF,KAAxB,EAAgC,MAAI,CAACQ,UAArC,CAAP,CACD,CAJH,CADF,CAQD,CA5CH,CA8CE;AACF;AACA,KAhDA,QAiDSgB,KAjDT,GAiDE,iBAAe,iBACbrC,WAAW,CAAC6D,YAAZ,GAA2B,IAA3B,CACA,oBAAK7C,KAAL,iCAAYqB,KAAZ,GACD,CApDH,CAsDE;AACF;AACA,KAxDA,QAyDS+B,IAzDT,GAyDE,gBAAc,kBACZ,qBAAKpD,KAAL,kCAAYoD,IAAZ,GACD,CA3DH,CA6DE;AACF;AACA;AACA,KAhEA,mBAA8BvE,KAAK,CAACwE,SAApC,EAAa5D,Q,CACG6D,mB,GAAsB,U,CADzB7D,Q,CAGG8D,S,GAAY,EACxBnC,OAAO,EAAEtC,SAAS,CAAC0E,IADK,EAExBtC,QAAQ,EAAEpC,SAAS,CAAC0E,IAFI,EAGxBlD,KAAK,EAAExB,SAAS,CAAC0E,IAHO,EAIxBjD,OAAO,EAAEzB,SAAS,CAAC0E,IAJK,EAKxB7C,aAAa,EAAE7B,SAAS,CAAC2E,IALD,EAMxB7B,MAAM,EAAE9C,SAAS,CAAC2E,IANM,EAOxBjD,YAAY,EAAE1B,SAAS,CAAC2E,IAPA,EAQxBhD,YAAY,EAAE3B,SAAS,CAAC2E,IARA,EASxB/C,WAAW,EAAE5B,SAAS,CAAC2E,IATC,E","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { Nullable, Override } from '../../typings/utility-types';\r\nimport { tabListener } from '../../lib/events/tabListener';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { OkIcon, SquareIcon } from '../../internal/icons/16px';\r\nimport { isEdge, isFirefox, isIE11 } from '../../lib/client';\r\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './Checkbox.styles';\r\n\r\nexport interface CheckboxProps\r\n  extends CommonProps,\r\n    Override<\r\n      React.InputHTMLAttributes<HTMLInputElement>,\r\n      {\r\n        /** Контент `label` */\r\n        children?: React.ReactNode;\r\n        /** Состояние ошибки */\r\n        error?: boolean;\r\n        /** Состояние Предупреждения */\r\n        warning?: boolean;\r\n        /** Вызывается на label */\r\n        onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;\r\n        /** Вызывается на label */\r\n        onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;\r\n        /** Вызывается на label */\r\n        onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;\r\n        /** Вызывается при изменении `value` */\r\n        onValueChange?: (value: boolean) => void;\r\n        /** onBlur */\r\n        onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\r\n        /** Состояние частичного выделения */\r\n        initialIndeterminate?: boolean;\r\n      }\r\n    > {}\r\n\r\nexport interface CheckboxState {\r\n  focusedByTab: boolean;\r\n  indeterminate: boolean;\r\n}\r\n\r\n/**\r\n * Все свойства, кроме перечисленных, `className` и `style` передаются в `input`.\r\n */\r\nexport class Checkbox extends React.Component<CheckboxProps, CheckboxState> {\r\n  public static __KONTUR_REACT_UI__ = 'Checkbox';\r\n\r\n  public static propTypes = {\r\n    checked: PropTypes.bool,\r\n    disabled: PropTypes.bool,\r\n    error: PropTypes.bool,\r\n    warning: PropTypes.bool,\r\n    onValueChange: PropTypes.func,\r\n    onBlur: PropTypes.func,\r\n    onMouseEnter: PropTypes.func,\r\n    onMouseLeave: PropTypes.func,\r\n    onMouseOver: PropTypes.func,\r\n  };\r\n\r\n  public state = {\r\n    focusedByTab: false,\r\n    indeterminate: this.props.initialIndeterminate || false,\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private input: Nullable<HTMLInputElement>;\r\n\r\n  public componentDidMount = () => {\r\n    if (this.state.indeterminate && this.input) {\r\n      this.input.indeterminate = true;\r\n    }\r\n  };\r\n\r\n  public UNSAFE_componentWillReceiveProps(nextProps: CheckboxProps) {\r\n    if (nextProps.checked !== this.props.checked) {\r\n      this.resetIndeterminate();\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 <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public focus() {\r\n    tabListener.isTabPressed = true;\r\n    this.input?.focus();\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public blur() {\r\n    this.input?.blur();\r\n  }\r\n\r\n  /**\r\n   * Установить промежуточное значение\r\n   * @public\r\n   */\r\n  public setIndeterminate = () => {\r\n    this.setState({\r\n      indeterminate: true,\r\n    });\r\n    if (this.input) {\r\n      this.input.indeterminate = true;\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Сбросить промежуточное значение\r\n   * @public\r\n   */\r\n  public resetIndeterminate = () => {\r\n    this.setState({\r\n      indeterminate: false,\r\n    });\r\n    if (this.input) {\r\n      this.input.indeterminate = false;\r\n    }\r\n  };\r\n\r\n  private renderMain = (props: CommonWrapperRestProps<CheckboxProps>) => {\r\n    const {\r\n      error,\r\n      warning,\r\n      onMouseEnter,\r\n      onMouseLeave,\r\n      onMouseOver,\r\n      onValueChange,\r\n      type,\r\n      initialIndeterminate,\r\n      ...rest\r\n    } = props;\r\n    const isIndeterminate = this.state.indeterminate;\r\n\r\n    const rootClass = cn({\r\n      [jsStyles.root(this.theme)]: true,\r\n      [jsStyles.rootFallback()]: isIE11 || isEdge,\r\n      [jsStyles.disabled(this.theme)]: Boolean(props.disabled),\r\n      [jsStyles.checked(this.theme)]: Boolean(props.checked),\r\n      [jsStyles.indeterminate(this.theme)]: isIndeterminate,\r\n      [jsStyles.focus(this.theme)]: this.state.focusedByTab,\r\n      [jsStyles.warning(this.theme)]: Boolean(props.warning),\r\n      [jsStyles.error(this.theme)]: Boolean(props.error),\r\n    });\r\n\r\n    const inputProps = {\r\n      ...rest,\r\n      type: 'checkbox',\r\n      className: jsStyles.input(),\r\n      onChange: this.handleChange,\r\n      onFocus: this.handleFocus,\r\n      onBlur: this.handleBlur,\r\n      onClick: this.handleClick,\r\n      ref: this.inputRef,\r\n    };\r\n\r\n    let caption = null;\r\n    if (this.props.children) {\r\n      const captionClass = cn({\r\n        [jsStyles.caption(this.theme)]: true,\r\n        [jsStyles.captionIE11()]: isIE11 || isEdge,\r\n      });\r\n      caption = <span className={captionClass}>{this.props.children}</span>;\r\n    }\r\n\r\n    const iconClass = cn({\r\n      [jsStyles.iconUnchecked()]: !props.checked && !isIndeterminate,\r\n      [jsStyles.iconFixBaseline()]: isFirefox || isIE11 || isEdge,\r\n    });\r\n\r\n    const box = (\r\n      <span className={jsStyles.box(this.theme)}>\r\n        {(isIndeterminate && <SquareIcon className={iconClass} />) || <OkIcon className={iconClass} />}\r\n      </span>\r\n    );\r\n\r\n    return (\r\n      <label className={rootClass} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onMouseOver={onMouseOver}>\r\n        <input {...inputProps} />\r\n        {box}\r\n        {caption}\r\n      </label>\r\n    );\r\n  };\r\n\r\n  private handleFocus = (e: React.FocusEvent<any>) => {\r\n    if (!this.props.disabled) {\r\n      // focus event fires before keyDown eventlistener\r\n      // so we should check tabPressed in async way\r\n      process.nextTick(() => {\r\n        if (tabListener.isTabPressed) {\r\n          this.setState({ focusedByTab: true });\r\n        }\r\n      });\r\n    }\r\n  };\r\n\r\n  private handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\r\n    this.props.onBlur?.(e);\r\n    this.setState({ focusedByTab: false });\r\n  };\r\n\r\n  private inputRef = (ref: HTMLInputElement | null) => {\r\n    this.input = ref;\r\n  };\r\n\r\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    const checked = event.currentTarget.checked;\r\n    this.props.onValueChange?.(checked);\r\n\r\n    this.resetIndeterminate();\r\n\r\n    this.props.onChange?.(event);\r\n  };\r\n\r\n  private handleClick = (e: React.MouseEvent<HTMLInputElement>) => {\r\n    this.props.onClick?.(e);\r\n    // support IE11's and old Edge's special behavior\r\n    // https://github.com/jquery/jquery/issues/1698\r\n    if (this.state.indeterminate && (isIE11 || isEdge)) {\r\n      this.resetIndeterminate();\r\n      // simulate correct behavior only if onValueChange is used\r\n      // because we cant simulate real native onChange event\r\n      if (this.props.onValueChange && this.input) {\r\n        const checked = !this.input.checked;\r\n\r\n        if (this.props.checked === undefined) {\r\n          // in case of uncontrolled mode\r\n          this.input.checked = checked;\r\n        }\r\n\r\n        this.props.onValueChange(checked);\r\n      }\r\n    }\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Checkbox.tsx"],"names":["React","PropTypes","keyListener","ThemeContext","OkIcon","SquareIcon","isEdge","isIE11","CommonWrapper","cx","rootNode","fixFirefoxModifiedClickOnLabel","isTheme2022","styles","globalClasses","CheckedIcon","IndeterminateIcon","CheckboxDataTids","root","Checkbox","state","focusedByTab","indeterminate","props","initialIndeterminate","isShiftPressed","input","createRef","handleShiftPress","e","key","setState","handleShiftRelease","componentDidMount","current","document","addEventListener","componentWillUnmount","removeEventListener","setIndeterminate","resetIndeterminate","renderMain","error","warning","onMouseEnter","onMouseLeave","onMouseOver","onValueChange","type","ariaDescribedby","rest","isIndeterminate","_isTheme2022","theme","iconClass","icon","iconFixPosition","checked","iconUnchecked","IconCheck","parseInt","checkboxBoxSize","IconSquare","rootClass","rootFallback","rootChecked","rootDisableTextSelect","disabled","Boolean","inputProps","className","onChange","handleChange","onFocus","handleFocus","onBlur","handleBlur","onClick","handleClick","ref","caption","children","captionClass","captionIE11","box","boxWrapper","boxChecked","boxFocus","boxError","boxWarning","boxDisabled","requestAnimationFrame","isTabPressed","event","currentTarget","undefined","componentDidUpdate","prevProps","render","setRootNode","focus","blur","PureComponent","__KONTUR_REACT_UI__","propTypes","bool","func"],"mappings":"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","sourcesContent":["// TODO: Enable this rule in functional components.\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Override } from '../../typings/utility-types';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { OkIcon, SquareIcon } from '../../internal/icons/16px';\nimport { isEdge, isIE11 } from '../../lib/client';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { fixFirefoxModifiedClickOnLabel } from '../../lib/events/fixFirefoxModifiedClickOnLabel';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nimport { styles, globalClasses } from './Checkbox.styles';\nimport { CheckedIcon } from './CheckedIcon';\nimport { IndeterminateIcon } from './IndeterminateIcon';\n\nexport interface CheckboxProps\n  extends CommonProps,\n    Override<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      {\n        /**\n         * Контент `label`\n         */\n        children?: React.ReactNode;\n        /**\n         * Состояние валидации при ошибке.\n         */\n        error?: boolean;\n        /**\n         * Состояние валидации при предупреждении.\n         */\n        warning?: boolean;\n        /**\n         * HTML-событие `mouseenter`.\n         */\n        onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;\n        /**\n         * HTML-событие `mouseleave`.\n         */\n        onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;\n        /**\n         * HTML-событие `mouseover`.\n         */\n        onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;\n        /**\n         * Функция, вызываемая при изменении `value`.\n         */\n        onValueChange?: (value: boolean) => void;\n        /**\n         * HTML-событие `onblur`.\n         */\n        onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n        /**\n         * [Неопределённое состояние](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-indeterminate) чекбокса из HTML.\n         */\n        initialIndeterminate?: boolean;\n        /**\n         * Атрибут для указания id элемента(-ов), описывающих его\n         */\n        'aria-describedby'?: AriaAttributes['aria-describedby'];\n      }\n    > {}\n\nexport interface CheckboxState {\n  focusedByTab: boolean;\n  indeterminate: boolean;\n  isShiftPressed: boolean;\n}\n\nexport const CheckboxDataTids = {\n  root: 'Checkbox__root',\n} as const;\n\n@rootNode\nexport class Checkbox extends React.PureComponent<CheckboxProps, CheckboxState> {\n  public static __KONTUR_REACT_UI__ = 'Checkbox';\n\n  public static propTypes = {\n    checked: PropTypes.bool,\n    disabled: PropTypes.bool,\n    error: PropTypes.bool,\n    warning: PropTypes.bool,\n    onValueChange: PropTypes.func,\n    onBlur: PropTypes.func,\n    onMouseEnter: PropTypes.func,\n    onMouseLeave: PropTypes.func,\n    onMouseOver: PropTypes.func,\n  };\n\n  public state = {\n    focusedByTab: false,\n    indeterminate: this.props.initialIndeterminate || false,\n    isShiftPressed: false,\n  };\n\n  private theme!: Theme;\n  private input = React.createRef<HTMLInputElement>();\n\n  private handleShiftPress = (e: KeyboardEvent) => {\n    if (e.key === 'Shift') {\n      this.setState(() => ({\n        isShiftPressed: true,\n      }));\n    }\n  };\n\n  private handleShiftRelease = (e: KeyboardEvent) => {\n    if (e.key === 'Shift') {\n      this.setState({\n        isShiftPressed: false,\n      });\n    }\n  };\n\n  public componentDidMount = () => {\n    if (this.state.indeterminate && this.input.current) {\n      this.input.current.indeterminate = true;\n    }\n\n    document.addEventListener('keydown', this.handleShiftPress);\n    document.addEventListener('keyup', this.handleShiftRelease);\n  };\n\n  public componentWillUnmount = () => {\n    document.removeEventListener('keydown', this.handleShiftPress);\n    document.removeEventListener('keyup', this.handleShiftRelease);\n  };\n\n  private setRootNode!: TSetRootNode;\n\n  public componentDidUpdate(prevProps: CheckboxProps) {\n    if (prevProps.checked !== this.props.checked) {\n      this.resetIndeterminate();\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              {this.renderMain}\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  /**\n   * Программная установка фокуса чекбоксу.\n   * @public\n   */\n  public focus() {\n    keyListener.isTabPressed = true;\n    this.input.current?.focus();\n  }\n\n  /**\n   * Программное снятие фокуса с чекбокса.\n   * @public\n   */\n  public blur() {\n    this.input.current?.blur();\n  }\n\n  /**\n   * Устанавливает чекбокс в HTML-состояние `indeterminate`.\n   * @public\n   */\n  public setIndeterminate = () => {\n    this.setState({\n      indeterminate: true,\n    });\n    if (this.input.current) {\n      this.input.current.indeterminate = true;\n    }\n  };\n\n  /**\n   * Снимает с чекбокса HTML-состояние `indeterminate`.\n   * @public\n   */\n  public resetIndeterminate = () => {\n    this.setState({\n      indeterminate: false,\n    });\n    if (this.input.current) {\n      this.input.current.indeterminate = false;\n    }\n  };\n\n  private renderMain = (props: CommonWrapperRestProps<CheckboxProps>) => {\n    const {\n      error,\n      warning,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseOver,\n      onValueChange,\n      type,\n      initialIndeterminate,\n      'aria-describedby': ariaDescribedby,\n      ...rest\n    } = props;\n    const isIndeterminate = this.state.indeterminate;\n\n    const _isTheme2022 = isTheme2022(this.theme);\n\n    const iconClass = cx(\n      styles.icon(),\n      !_isTheme2022 && styles.iconFixPosition(),\n      !props.checked && !isIndeterminate && styles.iconUnchecked(),\n    );\n\n    const IconCheck = _isTheme2022 ? (\n      <span className={iconClass}>\n        <CheckedIcon size={parseInt(this.theme.checkboxBoxSize)} />\n      </span>\n    ) : (\n      <OkIcon className={iconClass} />\n    );\n    const IconSquare = _isTheme2022 ? (\n      <span className={iconClass}>\n        <IndeterminateIcon size={parseInt(this.theme.checkboxBoxSize)} />\n      </span>\n    ) : (\n      <SquareIcon className={iconClass} />\n    );\n\n    const rootClass = cx({\n      [styles.root(this.theme)]: true,\n      [styles.rootFallback()]: isIE11 || isEdge,\n      [styles.rootChecked(this.theme)]: props.checked || isIndeterminate,\n      [styles.rootDisableTextSelect()]: this.state.isShiftPressed,\n      [styles.disabled(this.theme)]: Boolean(props.disabled),\n    });\n\n    const inputProps = {\n      ...rest,\n      type: 'checkbox',\n      className: styles.input(),\n      onChange: this.handleChange,\n      onFocus: this.handleFocus,\n      onBlur: this.handleBlur,\n      onClick: this.handleClick,\n      ref: this.input,\n    };\n\n    let caption = null;\n    if (this.props.children) {\n      const captionClass = cx({\n        [styles.caption(this.theme)]: true,\n        [styles.captionIE11()]: isIE11 || isEdge,\n        [styles.disabled(this.theme)]: Boolean(props.disabled),\n      });\n      caption = <span className={captionClass}>{this.props.children}</span>;\n    }\n\n    const box = (\n      <div className={cx(styles.boxWrapper(this.theme))}>\n        <div\n          className={cx(styles.box(this.theme), globalClasses.box, {\n            [styles.boxChecked(this.theme)]: props.checked || isIndeterminate,\n            [styles.boxFocus(this.theme)]: this.state.focusedByTab,\n            [styles.boxError(this.theme)]: props.error,\n            [styles.boxWarning(this.theme)]: props.warning,\n            [styles.boxDisabled(this.theme)]: props.disabled,\n          })}\n        >\n          {(isIndeterminate && IconSquare) || IconCheck}\n        </div>\n      </div>\n    );\n\n    return (\n      <label\n        data-tid={CheckboxDataTids.root}\n        className={rootClass}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        onMouseOver={onMouseOver}\n        onClick={fixFirefoxModifiedClickOnLabel(this.input)}\n      >\n        <input {...inputProps} aria-describedby={ariaDescribedby} />\n        {box}\n        {caption}\n      </label>\n    );\n  };\n\n  private handleFocus = (e: React.FocusEvent<any>) => {\n    if (!this.props.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      requestAnimationFrame(() => {\n        if (keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n\n      if (this.props.onFocus) {\n        this.props.onFocus(e);\n      }\n    }\n  };\n\n  private handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    this.props.onBlur?.(e);\n    this.setState({ focusedByTab: false });\n  };\n\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const checked = event.currentTarget.checked;\n    this.props.onValueChange?.(checked);\n\n    this.resetIndeterminate();\n\n    this.props.onChange?.(event);\n  };\n\n  private handleClick = (e: React.MouseEvent<HTMLInputElement>) => {\n    this.props.onClick?.(e);\n    // support IE11's and old Edge's special behavior\n    // https://github.com/jquery/jquery/issues/1698\n    if (this.state.indeterminate && (isIE11 || isEdge)) {\n      this.resetIndeterminate();\n      // simulate correct behavior only if onValueChange is used\n      // because we cant simulate real native onChange event\n      if (this.props.onValueChange && this.input.current) {\n        const checked = !this.input.current.checked;\n\n        if (this.props.checked === undefined) {\n          // in case of uncontrolled mode\n          this.input.current.checked = checked;\n        }\n\n        this.props.onValueChange(checked);\n      }\n    }\n  };\n}\n"]}

package/components/Checkbox/Checkbox.d.ts

@@ -1,36 +1,59 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { Override } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 export interface CheckboxProps extends CommonProps, Override<React.InputHTMLAttributes<HTMLInputElement>, {
-    /** Контент `label` */
+    /**
+     * Контент `label`
+     */
     children?: React.ReactNode;
-    /** Состояние ошибки */
+    /**
+     * Состояние валидации при ошибке.
+     */
     error?: boolean;
-    /** Состояние Предупреждения */
+    /**
+     * Состояние валидации при предупреждении.
+     */
     warning?: boolean;
-    /** Вызывается на label */
+    /**
+     * HTML-событие `mouseenter`.
+     */
     onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;
-    /** Вызывается на label */
+    /**
+     * HTML-событие `mouseleave`.
+     */
     onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;
-    /** Вызывается на label */
+    /**
+     * HTML-событие `mouseover`.
+     */
     onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;
-    /** Вызывается при изменении `value` */
+    /**
+     * Функция, вызываемая при изменении `value`.
+     */
     onValueChange?: (value: boolean) => void;
-    /** onBlur */
+    /**
+     * HTML-событие `onblur`.
+     */
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    /** Состояние частичного выделения */
+    /**
+     * [Неопределённое состояние](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-indeterminate) чекбокса из HTML.
+     */
     initialIndeterminate?: boolean;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
 }> {
 }
 export interface CheckboxState {
     focusedByTab: boolean;
     indeterminate: boolean;
+    isShiftPressed: boolean;
 }
-/**
- * Все свойства, кроме перечисленных, `className` и `style` передаются в `input`.
- */
-export declare class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
+export declare const CheckboxDataTids: {
+    readonly root: "Checkbox__root";
+};
+export declare class Checkbox extends React.PureComponent<CheckboxProps, CheckboxState> {
     static __KONTUR_REACT_UI__: string;
     static propTypes: {
         checked: PropTypes.Requireable<boolean>;
@@ -46,34 +69,40 @@ export declare class Checkbox extends React.Component<CheckboxProps, CheckboxSta
     state: {
         focusedByTab: boolean;
         indeterminate: boolean;
+        isShiftPressed: boolean;
     };
     private theme;
     private input;
+    private handleShiftPress;
+    private handleShiftRelease;
     componentDidMount: () => void;
-    UNSAFE_componentWillReceiveProps(nextProps: CheckboxProps): void;
+    componentWillUnmount: () => void;
+    private setRootNode;
+    componentDidUpdate(prevProps: CheckboxProps): void;
     render(): JSX.Element;
     /**
+     * Программная установка фокуса чекбоксу.
      * @public
      */
     focus(): void;
     /**
+     * Программное снятие фокуса с чекбокса.
      * @public
      */
     blur(): void;
     /**
-     * Установить промежуточное значение
+     * Устанавливает чекбокс в HTML-состояние `indeterminate`.
      * @public
      */
     setIndeterminate: () => void;
     /**
-     * Сбросить промежуточное значение
+     * Снимает с чекбокса HTML-состояние `indeterminate`.
      * @public
      */
     resetIndeterminate: () => void;
     private renderMain;
     private handleFocus;
     private handleBlur;
-    private inputRef;
     private handleChange;
     private handleClick;
 }

package/components/Checkbox/Checkbox.md

@@ -1,63 +1,152 @@
-```jsx harmony
-const [checked, setChecked] = React.useState(false);
-
-<Checkbox checked={checked} onValueChange={setChecked}>
-  Checkbox
-</Checkbox>;
-```
-
-Чекбокс может быть в состоянии "частично выбран". Как и в браузерном чекбоксе, это состояние влияет только на внешний вид и не влияет на состояние `checked`. `indeterminate` устанавливается в конструкторе через проп `initialIndeterminate` или методами инстанса `setIndeterminate()`/`resetIndeterminate()`
-
-```jsx harmony
-import { Button, Checkbox, Gapped } from '@skbkontur/react-ui';
-
-class IndeterminateExample extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.checkboxInstance = null;
-
-    this.state = {
-      checked: false,
-    };
-  }
-
-  render() {
-    return (
-      <div>
-        <Gapped>
-          <Checkbox
-            initialIndeterminate
-            checked={this.state.checked}
-            onValueChange={checked => this.setState({ checked })}
-            ref={element => {
-              this.checkboxInstance = element;
-            }}
-          >
-            Checkbox
-          </Checkbox>
-          <Button onClick={this.handleClickOnSetIndeterminate.bind(this)}>
-            <code>setIndeterminate()</code>
-          </Button>
-          <Button onClick={this.handleClickOnResetIndeterminate.bind(this)}>
-            <code>resetIndeterminate()</code>
-          </Button>
-        </Gapped>
-      </div>
-    );
-  }
-
-  handleClickOnSetIndeterminate() {
-    if (this.checkboxInstance) {
-      this.checkboxInstance.setIndeterminate();
-    }
-  }
-  handleClickOnResetIndeterminate() {
-    if (this.checkboxInstance) {
-      this.checkboxInstance.resetIndeterminate();
-    }
-  }
-}
-
-<IndeterminateExample />;
-```
+Базовый пример чекбокса.
+
+```jsx harmony
+const [checked, setChecked] = React.useState(false);
+
+<Checkbox checked={checked} onValueChange={setChecked}>
+  Обычный чекбокс
+</Checkbox>;
+```
+
+У чекбокса есть несколько состояний.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+const CheckboxWithState = ({children, ...props}) => {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <Checkbox checked={checked} onValueChange={setChecked} {...props}>
+      {children}
+    </Checkbox>
+  )
+};
+
+<Gapped vertical>
+  <CheckboxWithState>
+    Обычный чекбокс
+  </CheckboxWithState>
+  <CheckboxWithState error>
+    Чекбокс в состоянии ошибки
+  </CheckboxWithState>
+  <CheckboxWithState warning>
+    Чекбокс в состоянии предупреждения
+  </CheckboxWithState>
+</Gapped>
+```
+
+Пример использования методов чекбокса `focus()` и `blur()`.
+
+```jsx harmony
+import { Button, Checkbox, Gapped } from '@skbkontur/react-ui';
+
+const [checked, setChecked] = React.useState(false);
+
+let checkboxInstance = React.useRef(null);
+
+<Gapped vertical>
+  <Checkbox
+    ref={el => checkboxInstance = el}
+    checked={checked}
+    onValueChange={setChecked}
+    >
+    Пример чекбокса с программным фокусом
+  </Checkbox>
+  <Gapped gap={12}>
+    <Button
+      onClick={() => {
+        checkboxInstance.focus();
+      }}
+    >
+      Дать фокус
+    </Button>
+    <Button
+      onClick={() => {
+        checkboxInstance.blur();
+      }}
+    >
+      Забрать фокус
+    </Button>
+  </Gapped>
+</Gapped>
+```
+
+Чекбокс может находится в неопределённом состоянии. <br/> Это состояние полностью копирует поведение состояния `indeterminate` ([подробнее](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)) из HTML.
+
+Это состояние влияет только на внешний вид и не влияет на состояние `checked`.
+
+```jsx harmony
+import { Button, Checkbox, Gapped } from '@skbkontur/react-ui';
+
+const [checked, setChecked] = React.useState(false);
+
+let checkboxInstance = React.useRef(null);
+
+<Gapped vertical>
+  <Checkbox
+    initialIndeterminate
+    checked={checked}
+    onValueChange={setChecked}
+    ref={el => checkboxInstance = el}
+  >
+    Неопределённый чекбокс
+  </Checkbox>
+  <Gapped>
+    <Button onClick={() => checkboxInstance.setIndeterminate()}>
+      Перевести в неопределённое состояние
+    </Button>
+    <Button onClick={() => checkboxInstance.resetIndeterminate()}>
+      Сбросить неопределённое состояние
+    </Button>
+  </Gapped>
+</Gapped>
+```
+
+Пример использования неопределённого состояния чекбокса
+
+```jsx harmony
+const [checkedSiblings, setCheckedSiblings] = React.useState([]);
+const siblingCheckboxes = [1, 2];
+
+let parentCheckboxRef;
+
+React.useEffect(() => {
+  if (checkedSiblings.length === 0 || checkedSiblings.length === siblingCheckboxes.length) {
+    parentCheckboxRef.resetIndeterminate();
+  } else if (checkedSiblings.length !== 0) {
+    parentCheckboxRef.setIndeterminate();
+  }
+}, [JSON.stringify(checkedSiblings)]);
+
+<>
+  <Checkbox checked={checkedSiblings.length === siblingCheckboxes.length} ref={(el) => (parentCheckboxRef = el)}>
+    Родитель
+  </Checkbox>
+  <div style={{ display: 'flex', flexDirection: 'column', marginLeft: '20px' }}>
+    {siblingCheckboxes.map((id) => {
+      return (
+        <Checkbox
+          key={id}
+          checked={checkedSiblings.includes(id)}
+          onValueChange={() => {
+            const siblingIndex = checkedSiblings.indexOf(id);
+
+            if (siblingIndex === -1) {
+              setCheckedSiblings((prev) => [...prev, id]);
+            } else {
+              setCheckedSiblings((prev) =>
+                prev.filter((siblingId) => {
+                  return siblingId !== id;
+                }),
+              );
+            }
+          }}
+        >
+          Ребёнок ({id})
+        </Checkbox>
+      );
+    })}
+  </div>
+</>
+```

package/components/Checkbox/Checkbox.styles/Checkbox.styles.js

@@ -1,54 +1,72 @@
 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, _templateObject19;
 
-import { css, cssName, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+import { getLabGrotesqueBaselineCompensation } from "../../../lib/styles/getLabGrotesqueBaselineCompensation";
+import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
+import { isChrome } from "../../../lib/client";
+export var globalClasses = prefix('checkbox')({
+  box: 'box'
+});
+export var styles = memoizeStyle({
   root: function root(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: baseline;\n      cursor: pointer;\n      position: relative;\n      user-select: none;\n      line-height: ", ";\n      font-size: ", ";\n      padding: ", " 0;\n\n      &:hover ", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n\n      &:active ", " {\n        box-shadow: ", ";\n        background: ", ";\n      }\n    "])), t.checkboxLineHeight, t.checkboxFontSize, t.checkboxPaddingY, cssName(styles.box(t)), t.checkboxHoverBg, t.checkboxShadowHover, cssName(styles.box(t)), t.checkboxShadowActive, t.checkboxActiveBg);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: baseline;\n      cursor: pointer;\n      position: relative;\n      line-height: ", ";\n      font-size: ", ";\n      padding: ", " 0;\n\n      &:hover .", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n\n      &:active .", " {\n        box-shadow: ", ";\n        background: ", ";\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned box,\n        // and also height and baseline for checkbox without caption.\n        content: '\\00A0';\n        display: inline-block;\n        width: ", ";\n        flex: 0 0 auto;\n      }\n    "], ["\n      display: inline-flex;\n      align-items: baseline;\n      cursor: pointer;\n      position: relative;\n      line-height: ", ";\n      font-size: ", ";\n      padding: ", " 0;\n\n      &:hover .", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n\n      &:active .", " {\n        box-shadow: ", ";\n        background: ", ";\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned box,\n        // and also height and baseline for checkbox without caption.\n        content: '\\\\00A0';\n        display: inline-block;\n        width: ", ";\n        flex: 0 0 auto;\n      }\n    "])), t.checkboxLineHeight, t.checkboxFontSize, t.checkboxPaddingY, globalClasses.box, t.checkboxHoverBg, t.checkboxShadowHover, globalClasses.box, t.checkboxShadowActive, t.checkboxActiveBg, t.checkboxBoxSize);
+  },
+  rootDisableTextSelect: function rootDisableTextSelect() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      user-select: none;\n    "])));
+  },
+  rootChecked: function rootChecked(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      &:hover .", " {\n        box-shadow: ", ";\n        background: ", ";\n      }\n\n      &:active .", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n    "])), globalClasses.box, t.checkboxCheckedHoverShadow, t.checkboxCheckedHoverBg, globalClasses.box, t.checkboxCheckedActiveBg, t.checkboxCheckedActiveShadow);
   },
   rootFallback: function rootFallback() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      display: inline-table !important;\n    "])));
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      display: inline-table;\n\n      & > * {\n        // fix root's :active state in IE11 that gets blocked by nested elements\n        pointer-events: none;\n      }\n    "])));
   },
   rootWrapperIE11: function rootWrapperIE11() {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      display: inline;\n    "])));
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      display: inline;\n    "])));
+  },
+  boxWrapper: function boxWrapper(t) {
+    var labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);
+    var fontSize = parseInt(t.checkboxFontSize);
+    var baselineCompensation = getLabGrotesqueBaselineCompensation(fontSize, labGrotesqueCompenstation, isChrome);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      width: ", ";\n      height: ", ";\n      box-sizing: border-box;\n      padding: ", ";\n      margin-top: calc(", " + ", "px);\n\n      // fix position in ie11\n      display: inline-block;\n      left: 0;\n    "])), t.checkboxBoxSize, t.checkboxBoxSize, t.checkboxBorderWidth, t.checkboxBoxOffsetY, baselineCompensation);
   },
   box: function box(t) {
-    var boxSize = "calc(" + t.checkboxBoxSize + " - 2 * " + t.checkboxBorderWidthCompensation + ")";
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      width: ", ";\n      height: ", ";\n      flex: none;\n      font-size: ", ";\n      color: ", ";\n      border: ", ";\n      border-radius: ", ";\n      box-shadow: ", ";\n      background: ", ";\n      align-self: baseline;\n      margin: ", ";\n    "])), boxSize, boxSize, t.checkboxFontSize, t.checkboxTextColorDefault, t.checkboxBorder, t.checkboxBorderRadius, t.checkboxShadow, t.checkboxBg, t.checkboxBorderWidthCompensation);
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      box-shadow: ", ";\n      background: ", ";\n      border-radius: ", ";\n      height: 100%;\n    "])), t.checkboxTextColorDefault, t.checkboxShadow, t.checkboxBg, t.checkboxBorderRadius);
   },
   input: function input() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      opacity: 0;\n      width: 0;\n      height: 0;\n      position: absolute;\n      z-index: -1;\n    "])));
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n      z-index: -1;\n    "])));
   },
-  warning: function warning(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      & ", " {\n        box-shadow: inset 0 0 0 1px ", ",\n          0 0 0 ", " ", " !important;\n      }\n    "])), cssName(styles.box(t)), t.checkboxOutlineColorFocus, t.checkboxOutlineWidth, t.checkboxBorderColorWarning);
+  boxWarning: function boxWarning(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      box-shadow: inset 0 0 0 1px ", ",\n        0 0 0 ", " ", " !important; // override hover and active\n    "])), t.checkboxOutlineColorFocus, t.checkboxOutlineWidth, t.checkboxBorderColorWarning);
   },
-  error: function error(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      & ", " {\n        box-shadow: inset 0 0 0 1px ", ",\n          0 0 0 ", " ", " !important;\n      }\n    "])), cssName(styles.box(t)), t.checkboxOutlineColorFocus, t.checkboxOutlineWidth, t.checkboxBorderColorError);
+  boxError: function boxError(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      box-shadow: inset 0 0 0 1px ", ",\n        0 0 0 ", " ", " !important; // override hover and active\n    "])), t.checkboxOutlineColorFocus, t.checkboxOutlineWidth, t.checkboxBorderColorError);
   },
-  checked: function checked(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      ", "& {\n        & ", " {\n          background: ", ";\n          color: ", ";\n          box-shadow: ", ";\n        }\n\n        &:hover ", " {\n          box-shadow: ", ";\n          background: ", ";\n        }\n\n        &:active ", " {\n          background: ", ";\n          box-shadow: ", ";\n        }\n      }\n    "])), cssName(styles.root(t)), cssName(styles.box(t)), t.checkboxCheckedBg, t.checkboxCheckedColor, t.checkboxCheckedShadow, cssName(styles.box(t)), t.checkboxCheckedHoverShadow, t.checkboxCheckedHoverBg, cssName(styles.box(t)), t.checkboxCheckedActiveBg, t.checkboxCheckedActiveShadow);
+  boxChecked: function boxChecked(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    "])), t.checkboxCheckedBg, t.checkboxCheckedColor, t.checkboxCheckedShadow);
   },
-  indeterminate: function indeterminate(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      ", "& {\n        & ", " {\n          background: ", ";\n          color: ", ";\n          box-shadow: ", ";\n        }\n\n        &:hover ", " {\n          box-shadow: ", ";\n          background: ", ";\n        }\n        &:active ", " {\n          background: ", ";\n          box-shadow: ", ";\n        }\n      }\n    "])), cssName(styles.root(t)), cssName(styles.box(t)), t.checkboxBoxIndeterminateBg, t.checkboxIndeterminateBg, t.checkboxCheckedShadow, cssName(styles.box(t)), t.checkboxCheckedHoverShadow, t.checkboxCheckedHoverBg, cssName(styles.box(t)), t.checkboxCheckedActiveBg, t.checkboxCheckedActiveShadow);
+  boxFocus: function boxFocus(t) {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      box-shadow: inset 0 0 0 1px ", ",\n        0 0 0 ", " ", " !important; // override hover and active\n    "])), t.checkboxOutlineColorFocus, t.checkboxOutlineWidth, t.checkboxBorderColorFocus);
   },
-  focus: function focus(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      & ", " {\n        box-shadow: inset 0 0 0 1px ", ",\n          0 0 0 ", " ", " !important;\n      }\n    "])), cssName(styles.box(t)), t.checkboxOutlineColorFocus, t.checkboxOutlineWidth, t.checkboxBorderColorFocus);
+  boxDisabled: function boxDisabled(t) {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      box-shadow: ", " !important; // override hover and active\n      background: ", " !important; // override hover and active\n      color: ", ";\n    "])), t.checkboxShadowDisabled, t.checkboxBgDisabled, t.checkboxTextColorDisabled);
   },
   disabled: function disabled(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: default;\n\n      & ", " {\n        box-shadow: ", " !important; //to override hover and active\n        background: ", " !important;\n        color: ", " !important;\n      }\n    "])), t.checkboxTextColorDisabled, cssName(styles.box(t)), t.checkboxShadowDisabled, t.checkboxBgDisabled, t.checkboxTextColorDisabled);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: default;\n    "])), t.checkboxTextColorDisabled);
+  },
+  icon: function icon() {
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    "])));
   },
-  iconFixBaseline: function iconFixBaseline() {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      margin-top: -2px;\n    "])));
+  iconFixPosition: function iconFixPosition() {
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      svg {\n        margin: -12.5% 0 0 0;\n      }\n    "])));
   },
   iconUnchecked: function iconUnchecked() {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      color: transparent;\n    "])));
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      color: transparent;\n    "])));
   },
   caption: function caption(t) {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n    "])), t.checkboxLabelGap);
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding-left: ", ";\n    "])), t.checkboxTextColorDefault, t.checkboxCaptionGap);
   },
   captionIE11: function captionIE11() {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      display: table-cell;\n    "])));
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      display: table-cell;\n    "])));
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/components/Checkbox/Checkbox.styles/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Checkbox.styles.ts"],"names":["css","cssName","memoizeStyle","styles","root","t","checkboxLineHeight","checkboxFontSize","checkboxPaddingY","box","checkboxHoverBg","checkboxShadowHover","checkboxShadowActive","checkboxActiveBg","rootFallback","rootWrapperIE11","boxSize","checkboxBoxSize","checkboxBorderWidthCompensation","checkboxTextColorDefault","checkboxBorder","checkboxBorderRadius","checkboxShadow","checkboxBg","input","warning","checkboxOutlineColorFocus","checkboxOutlineWidth","checkboxBorderColorWarning","error","checkboxBorderColorError","checked","checkboxCheckedBg","checkboxCheckedColor","checkboxCheckedShadow","checkboxCheckedHoverShadow","checkboxCheckedHoverBg","checkboxCheckedActiveBg","checkboxCheckedActiveShadow","indeterminate","checkboxBoxIndeterminateBg","checkboxIndeterminateBg","focus","checkboxBorderColorFocus","disabled","checkboxTextColorDisabled","checkboxShadowDisabled","checkboxBgDisabled","iconFixBaseline","iconUnchecked","caption","checkboxLabelGap","captionIE11","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    return css`\r\n      display: inline-flex;\r\n      align-items: baseline;\r\n      cursor: pointer;\r\n      position: relative;\r\n      user-select: none;\r\n      line-height: ${t.checkboxLineHeight};\r\n      font-size: ${t.checkboxFontSize};\r\n      padding: ${t.checkboxPaddingY} 0;\r\n\r\n      &:hover ${cssName(styles.box(t))} {\r\n        background: ${t.checkboxHoverBg};\r\n        box-shadow: ${t.checkboxShadowHover};\r\n      }\r\n\r\n      &:active ${cssName(styles.box(t))} {\r\n        box-shadow: ${t.checkboxShadowActive};\r\n        background: ${t.checkboxActiveBg};\r\n      }\r\n    `;\r\n  },\r\n\r\n  rootFallback() {\r\n    return css`\r\n      display: inline-table !important;\r\n    `;\r\n  },\r\n\r\n  rootWrapperIE11() {\r\n    return css`\r\n      display: inline;\r\n    `;\r\n  },\r\n\r\n  box(t: Theme) {\r\n    const boxSize = `calc(${t.checkboxBoxSize} - 2 * ${t.checkboxBorderWidthCompensation})`;\r\n    return css`\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      box-sizing: border-box;\r\n      width: ${boxSize};\r\n      height: ${boxSize};\r\n      flex: none;\r\n      font-size: ${t.checkboxFontSize};\r\n      color: ${t.checkboxTextColorDefault};\r\n      border: ${t.checkboxBorder};\r\n      border-radius: ${t.checkboxBorderRadius};\r\n      box-shadow: ${t.checkboxShadow};\r\n      background: ${t.checkboxBg};\r\n      align-self: baseline;\r\n      margin: ${t.checkboxBorderWidthCompensation};\r\n    `;\r\n  },\r\n\r\n  input() {\r\n    return css`\r\n      display: inline-block;\r\n      opacity: 0;\r\n      width: 0;\r\n      height: 0;\r\n      position: absolute;\r\n      z-index: -1;\r\n    `;\r\n  },\r\n\r\n  warning(t: Theme) {\r\n    return css`\r\n      & ${cssName(styles.box(t))} {\r\n        box-shadow: inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\r\n          0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorWarning} !important;\r\n      }\r\n    `;\r\n  },\r\n\r\n  error(t: Theme) {\r\n    return css`\r\n      & ${cssName(styles.box(t))} {\r\n        box-shadow: inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\r\n          0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorError} !important;\r\n      }\r\n    `;\r\n  },\r\n\r\n  checked(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.root(t))}& {\r\n        & ${cssName(styles.box(t))} {\r\n          background: ${t.checkboxCheckedBg};\r\n          color: ${t.checkboxCheckedColor};\r\n          box-shadow: ${t.checkboxCheckedShadow};\r\n        }\r\n\r\n        &:hover ${cssName(styles.box(t))} {\r\n          box-shadow: ${t.checkboxCheckedHoverShadow};\r\n          background: ${t.checkboxCheckedHoverBg};\r\n        }\r\n\r\n        &:active ${cssName(styles.box(t))} {\r\n          background: ${t.checkboxCheckedActiveBg};\r\n          box-shadow: ${t.checkboxCheckedActiveShadow};\r\n        }\r\n      }\r\n    `;\r\n  },\r\n\r\n  indeterminate(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.root(t))}& {\r\n        & ${cssName(styles.box(t))} {\r\n          background: ${t.checkboxBoxIndeterminateBg};\r\n          color: ${t.checkboxIndeterminateBg};\r\n          box-shadow: ${t.checkboxCheckedShadow};\r\n        }\r\n\r\n        &:hover ${cssName(styles.box(t))} {\r\n          box-shadow: ${t.checkboxCheckedHoverShadow};\r\n          background: ${t.checkboxCheckedHoverBg};\r\n        }\r\n        &:active ${cssName(styles.box(t))} {\r\n          background: ${t.checkboxCheckedActiveBg};\r\n          box-shadow: ${t.checkboxCheckedActiveShadow};\r\n        }\r\n      }\r\n    `;\r\n  },\r\n\r\n  focus(t: Theme) {\r\n    return css`\r\n      & ${cssName(styles.box(t))} {\r\n        box-shadow: inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\r\n          0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorFocus} !important;\r\n      }\r\n    `;\r\n  },\r\n\r\n  disabled(t: Theme) {\r\n    return css`\r\n      color: ${t.checkboxTextColorDisabled};\r\n      cursor: default;\r\n\r\n      & ${cssName(styles.box(t))} {\r\n        box-shadow: ${t.checkboxShadowDisabled} !important; //to override hover and active\r\n        background: ${t.checkboxBgDisabled} !important;\r\n        color: ${t.checkboxTextColorDisabled} !important;\r\n      }\r\n    `;\r\n  },\r\n\r\n  iconFixBaseline() {\r\n    return css`\r\n      margin-top: -2px;\r\n    `;\r\n  },\r\n\r\n  iconUnchecked() {\r\n    return css`\r\n      color: transparent;\r\n    `;\r\n  },\r\n\r\n  caption(t: Theme) {\r\n    return css`\r\n      padding-left: ${t.checkboxLabelGap};\r\n    `;\r\n  },\r\n\r\n  captionIE11() {\r\n    return css`\r\n      display: table-cell;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Checkbox.styles.ts"],"names":["getLabGrotesqueBaselineCompensation","css","memoizeStyle","prefix","isChrome","globalClasses","box","styles","root","t","checkboxLineHeight","checkboxFontSize","checkboxPaddingY","checkboxHoverBg","checkboxShadowHover","checkboxShadowActive","checkboxActiveBg","checkboxBoxSize","rootDisableTextSelect","rootChecked","checkboxCheckedHoverShadow","checkboxCheckedHoverBg","checkboxCheckedActiveBg","checkboxCheckedActiveShadow","rootFallback","rootWrapperIE11","boxWrapper","labGrotesqueCompenstation","parseInt","labGrotesqueBaselineCompensation","fontSize","baselineCompensation","checkboxBorderWidth","checkboxBoxOffsetY","checkboxTextColorDefault","checkboxShadow","checkboxBg","checkboxBorderRadius","input","boxWarning","checkboxOutlineColorFocus","checkboxOutlineWidth","checkboxBorderColorWarning","boxError","checkboxBorderColorError","boxChecked","checkboxCheckedBg","checkboxCheckedColor","checkboxCheckedShadow","boxFocus","checkboxBorderColorFocus","boxDisabled","checkboxShadowDisabled","checkboxBgDisabled","checkboxTextColorDisabled","disabled","icon","iconFixPosition","iconUnchecked","caption","checkboxCaptionGap","captionIE11"],"mappings":"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","sourcesContent":["import { getLabGrotesqueBaselineCompensation } from '../../lib/styles/getLabGrotesqueBaselineCompensation';\nimport { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isChrome } from '../../lib/client';\n\nexport const globalClasses = prefix('checkbox')({\n  box: 'box',\n});\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: baseline;\n      cursor: pointer;\n      position: relative;\n      line-height: ${t.checkboxLineHeight};\n      font-size: ${t.checkboxFontSize};\n      padding: ${t.checkboxPaddingY} 0;\n\n      &:hover .${globalClasses.box} {\n        background: ${t.checkboxHoverBg};\n        box-shadow: ${t.checkboxShadowHover};\n      }\n\n      &:active .${globalClasses.box} {\n        box-shadow: ${t.checkboxShadowActive};\n        background: ${t.checkboxActiveBg};\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned box,\n        // and also height and baseline for checkbox without caption.\n        content: '\\\\00A0';\n        display: inline-block;\n        width: ${t.checkboxBoxSize};\n        flex: 0 0 auto;\n      }\n    `;\n  },\n\n  rootDisableTextSelect() {\n    return css`\n      user-select: none;\n    `;\n  },\n\n  rootChecked(t: Theme) {\n    return css`\n      &:hover .${globalClasses.box} {\n        box-shadow: ${t.checkboxCheckedHoverShadow};\n        background: ${t.checkboxCheckedHoverBg};\n      }\n\n      &:active .${globalClasses.box} {\n        background: ${t.checkboxCheckedActiveBg};\n        box-shadow: ${t.checkboxCheckedActiveShadow};\n      }\n    `;\n  },\n\n  rootFallback() {\n    return css`\n      display: inline-table;\n\n      & > * {\n        // fix root's :active state in IE11 that gets blocked by nested elements\n        pointer-events: none;\n      }\n    `;\n  },\n\n  rootWrapperIE11() {\n    return css`\n      display: inline;\n    `;\n  },\n\n  boxWrapper(t: Theme) {\n    const labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);\n    const fontSize = parseInt(t.checkboxFontSize);\n    const baselineCompensation = getLabGrotesqueBaselineCompensation(fontSize, labGrotesqueCompenstation, isChrome);\n\n    return css`\n      position: absolute;\n      width: ${t.checkboxBoxSize};\n      height: ${t.checkboxBoxSize};\n      box-sizing: border-box;\n      padding: ${t.checkboxBorderWidth};\n      margin-top: calc(${t.checkboxBoxOffsetY} + ${baselineCompensation}px);\n\n      // fix position in ie11\n      display: inline-block;\n      left: 0;\n    `;\n  },\n\n  box(t: Theme) {\n    return css`\n      color: ${t.checkboxTextColorDefault};\n      box-shadow: ${t.checkboxShadow};\n      background: ${t.checkboxBg};\n      border-radius: ${t.checkboxBorderRadius};\n      height: 100%;\n    `;\n  },\n\n  input() {\n    return css`\n      display: inline-block;\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n      z-index: -1;\n    `;\n  },\n\n  boxWarning(t: Theme) {\n    return css`\n      box-shadow: inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\n        0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorWarning} !important; // override hover and active\n    `;\n  },\n\n  boxError(t: Theme) {\n    return css`\n      box-shadow: inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\n        0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorError} !important; // override hover and active\n    `;\n  },\n\n  boxChecked(t: Theme) {\n    return css`\n      background: ${t.checkboxCheckedBg};\n      color: ${t.checkboxCheckedColor};\n      box-shadow: ${t.checkboxCheckedShadow};\n    `;\n  },\n\n  boxFocus(t: Theme) {\n    return css`\n      box-shadow: inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\n        0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorFocus} !important; // override hover and active\n    `;\n  },\n\n  boxDisabled(t: Theme) {\n    return css`\n      box-shadow: ${t.checkboxShadowDisabled} !important; // override hover and active\n      background: ${t.checkboxBgDisabled} !important; // override hover and active\n      color: ${t.checkboxTextColorDisabled};\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      color: ${t.checkboxTextColorDisabled};\n      cursor: default;\n    `;\n  },\n\n  icon() {\n    return css`\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    `;\n  },\n\n  iconFixPosition() {\n    return css`\n      svg {\n        margin: -12.5% 0 0 0;\n      }\n    `;\n  },\n\n  iconUnchecked() {\n    return css`\n      color: transparent;\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      color: ${t.checkboxTextColorDefault};\n      padding-left: ${t.checkboxCaptionGap};\n    `;\n  },\n\n  captionIE11() {\n    return css`\n      display: table-cell;\n    `;\n  },\n});\n"]}