@skbkontur/react-ui 0.0.0-cb54865bf2 → 0.0.0-ccbe7cf017

package/cjs/components/Switcher/Switcher.js

@@ -1,6 +1,5 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Switcher = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SwitcherDataTids = exports.Switcher = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
 
 var _identifiers = require("../../lib/events/keyboard/identifiers");
 var _Group = require("../Group");
@@ -8,13 +7,19 @@ var _Button = require("../Button");
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
 
 var _Switcher = require("./Switcher.styles");
-var _switcherTheme = require("./switcherTheme");var
+var _switcherTheme = require("./switcherTheme");
+var _helpers = require("./helpers");var _class, _class2, _temp;
 
 
 
 
+var SwitcherDataTids = {
+  root: 'Switcher__root' };exports.SwitcherDataTids = SwitcherDataTids;var
 
 
 
@@ -41,7 +46,33 @@ var _switcherTheme = require("./switcherTheme");var
 
 
 
-Switcher = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Switcher, _React$Component);function Switcher() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Switcher = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Switcher, _React$Component);function Switcher() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+
+
+
+
+
 
 
 
@@ -64,7 +95,10 @@ Switcher = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
       focusedIndex: null };_this.
 
 
-    theme = void 0;_this.
+
+
+
+
 
 
 
@@ -116,32 +150,12 @@ Switcher = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
     };_this.
 
     _extractValuesFromItems = function () {
-      return _this.props.items.map(function (item) {var _this$_extractPropsFr =
-        _this._extractPropsFromItem(item),value = _this$_extractPropsFr.value;
+      return _this.props.items.map(function (item) {
+        var _this$_extractPropsFr = _this._extractPropsFromItem(item),value = _this$_extractPropsFr.value;
         return value;
       });
     };_this.
 
-    move = function (step) {
-      var selectedIndex = _this.state.focusedIndex;
-
-      if (typeof selectedIndex !== 'number') {
-        return;
-      }
-
-      var items = _this._extractValuesFromItems();
-
-      selectedIndex += step;
-
-      if (selectedIndex < 0) {
-        selectedIndex = items.length - 1;
-      } else if (selectedIndex >= items.length) {
-        selectedIndex = 0;
-      }
-
-      _this._focus(selectedIndex);
-    };_this.
-
     _focus = function (index) {
       _this.setState({ focusedIndex: index });
     };_this.
@@ -153,21 +167,49 @@ Switcher = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
       }
 
       if ((0, _identifiers.isKeyEnter)(e)) {
-        if (_this.props.onValueChange) {var _this$_extractPropsFr2 =
-          _this._extractPropsFromItem(_this.props.items[focusedIndex]),_value = _this$_extractPropsFr2.value;
-          _this.selectItem(_value);
+        if (_this.props.onValueChange) {
+          var _this$_extractPropsFr2 = _this._extractPropsFromItem(_this.props.items[focusedIndex]),_value = _this$_extractPropsFr2.value,_buttonProps = _this$_extractPropsFr2.buttonProps;
+          if (!(_buttonProps != null && _buttonProps.disabled)) {
+            _this.selectItem(_value);
+          }
         }
         return;
       }
 
       if ((0, _identifiers.isKeyArrowHorizontal)(e)) {
         e.preventDefault();
-        _this.move((0, _identifiers.isKeyArrowLeft)(e) ? -1 : 1);
+        _this.move((0, _identifiers.isKeyArrowLeft)(e));
+      }
+    };_this.
+
+    move = function (left) {
+      var selectedIndex = _this.state.focusedIndex;
+
+      if (typeof selectedIndex !== 'number') {
+        return;
       }
+      var newFocusedIndex = _this._getNextFocusedIndex(left, selectedIndex);
+      _this._focus(newFocusedIndex);
     };_this.
 
-    _handleFocus = function () {var
-      value = _this.props.value;
+    _getNextFocusedIndex = function (left, focusedIndex) {
+      var _this$props = _this.props,items = _this$props.items,disabled = _this$props.disabled;
+      if (disabled) {
+        return focusedIndex;
+      }
+
+      for (var i = 1; i < items.length; i++) {
+        var index = (0, _helpers.mod)(focusedIndex + (left ? -i : i), items.length);
+        var _this$_extractPropsFr3 = _this._extractPropsFromItem(items[index]),_buttonProps2 = _this$_extractPropsFr3.buttonProps;
+        if (!(_buttonProps2 != null && _buttonProps2.disabled)) {
+          return index;
+        }
+      }
+      return focusedIndex;
+    };_this.
+
+    _handleFocus = function () {
+      var value = _this.props.value;
 
       var items = _this._extractValuesFromItems();
       var currentIndex = [].concat(items).indexOf(value);
@@ -181,33 +223,50 @@ Switcher = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
     };_this.
 
     _renderItems = function () {
-      return _this.props.items.map(function (item, i) {var _this$_extractPropsFr3 =
-        _this._extractPropsFromItem(item),label = _this$_extractPropsFr3.label,value = _this$_extractPropsFr3.value;
-        var buttonProps = {
-          checked: _this.props.value === value,
+      var _this$props2 = _this.props,items = _this$props2.items,value = _this$props2.value,size = _this$props2.size,disabled = _this$props2.disabled,role = _this$props2.role,renderItem = _this$props2.renderItem;
+      return items.map(function (item, i) {
+        var _this$_extractPropsFr4 = _this._extractPropsFromItem(item),label = _this$_extractPropsFr4.label,itemValue = _this$_extractPropsFr4.value,customButtonProps = _this$_extractPropsFr4.buttonProps;
+
+        var isChecked = value === itemValue;
+        var commonButtonProps = {
+          'aria-checked': isChecked,
+          role: role,
+          checked: isChecked,
           visuallyFocused: _this.state.focusedIndex === i,
           onClick: function onClick() {
-            _this.selectItem(value);
+            _this.selectItem(itemValue);
           },
           disableFocus: true,
-          size: _this.props.size };
+          size: size,
+          disabled: disabled,
+          corners: (0, _Group.getButtonCorners)(i === 0, i === items.length - 1) };
+
+
+        var buttonProps = (0, _extends2.default)({},
+        commonButtonProps,
+        customButtonProps);
 
-        return (
-          _react.default.createElement(_Button.Button, (0, _extends2.default)({ key: value }, buttonProps),
-          label));
 
+        var renderDefault = function renderDefault() {return _this.renderDefaultItem(label, itemValue, buttonProps);};
 
+        return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault) : renderDefault();
       });
     };_this.
 
+    renderDefaultItem = function (label, value, buttonProps) {return /*#__PURE__*/(
+        _react.default.createElement(_Button.Button, (0, _extends2.default)({ key: value }, buttonProps),
+        label));};_this.
+
+
+
     getLabelSizeClassName = function () {
       switch (_this.props.size) {
         case 'large':
-          return _Switcher.jsStyles.labelLarge(_this.theme);
+          return _Switcher.styles.captionLarge(_this.theme);
         case 'medium':
-          return _Switcher.jsStyles.labelMedium(_this.theme);
+          return _Switcher.styles.captionMedium(_this.theme);
         case 'small':
         default:
-          return _Switcher.jsStyles.labelSmall(_this.theme);}
+          return _Switcher.styles.captionSmall(_this.theme);}
 
-    };return _this;}var _proto = Switcher.prototype;_proto.render = function render() {var _this2 = this;return _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = (0, _switcherTheme.getSwitcherTheme)(theme);return _react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _cn;var listClassName = (0, _classnames.default)((_cn = {}, _cn[_Switcher.jsStyles.error(this.theme)] = !!this.props.error, _cn));var inputProps = { type: 'checkbox', onKeyDown: this.handleKey, onFocus: this._handleFocus, onBlur: this._handleBlur, className: _Switcher.jsStyles.input() };var lableClassName = (0, _classnames.default)(_Switcher.jsStyles.label(), this.getLabelSizeClassName());return _react.default.createElement("div", null, this.props.label ? _react.default.createElement("div", { className: lableClassName }, this.props.label) : null, _react.default.createElement("div", { className: _Switcher.jsStyles.wrap() }, _react.default.createElement("input", inputProps), _react.default.createElement("div", { className: listClassName }, _react.default.createElement(_Group.Group, null, this._renderItems()))));};return Switcher;}(_react.default.Component);exports.Switcher = Switcher;Switcher.__KONTUR_REACT_UI__ = 'Switcher';Switcher.propTypes = { error: _propTypes.default.bool, items: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.shape({ label: _propTypes.default.string, value: _propTypes.default.string }))]).isRequired, label: _propTypes.default.string, value: _propTypes.default.string, onValueChange: _propTypes.default.func };
+    };return _this;}var _proto = Switcher.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = (0, _switcherTheme.getSwitcherTheme)(theme);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _cx;var listClassName = (0, _Emotion.cx)((_cx = {}, _cx[_Switcher.styles.error(this.theme)] = !!this.props.error, _cx));var inputProps = { type: 'checkbox', onKeyDown: this.handleKey, onFocus: this._handleFocus, onBlur: this._handleBlur, className: _Switcher.styles.input() };var captionClassName = (0, _Emotion.cx)(_Switcher.styles.caption(this.theme), this.getLabelSizeClassName());return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SwitcherDataTids.root, className: _Switcher.styles.root() }, this.props.caption ? /*#__PURE__*/_react.default.createElement("div", { className: captionClassName }, this.props.caption) : null, /*#__PURE__*/_react.default.createElement("div", { className: _Switcher.styles.wrap() }, /*#__PURE__*/_react.default.createElement("input", inputProps), /*#__PURE__*/_react.default.createElement("div", { className: listClassName }, /*#__PURE__*/_react.default.createElement(_Group.Group, null, this._renderItems())))));};return Switcher;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Switcher', _class2.defaultProps = { role: 'switch' }, _class2.propTypes = { error: _propTypes.default.bool, disabled: _propTypes.default.bool, items: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.shape({ label: _propTypes.default.string, value: _propTypes.default.string }))]).isRequired, caption: _propTypes.default.string, value: _propTypes.default.string, onValueChange: _propTypes.default.func, renderItem: _propTypes.default.func }, _temp)) || _class;exports.Switcher = Switcher;

package/cjs/components/Switcher/Switcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Switcher.tsx"],"names":["Switcher","state","focusedIndex","theme","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","move","step","selectedIndex","length","_focus","index","setState","handleKey","e","preventDefault","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","i","buttonProps","checked","visuallyFocused","onClick","disableFocus","size","getLabelSizeClassName","jsStyles","labelLarge","labelMedium","labelSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","lableClassName","wrap","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"sUAAA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;;AAGA;AACA,gD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BaA,Q;;;;;;;;;;;;;;;;;;;AAmBJC,IAAAA,K,GAAuB;AAC5BC,MAAAA,YAAY,EAAE,IADc,E;;;AAItBC,IAAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCAC,IAAAA,U,GAAa,UAACC,KAAD,EAAmB;AACtC,UAAI,MAAKC,KAAL,CAAWC,aAAf,EAA8B;AAC5B,cAAKD,KAAL,CAAWC,aAAX,CAAyBF,KAAzB;AACD;AACF,K;;AAEOG,IAAAA,qB,GAAwB,UAACC,IAAD,EAA+C;AAC7E,aAAO,OAAOA,IAAP,KAAgB,QAAhB,GAA2BA,IAA3B,GAAkC,EAAEC,KAAK,EAAED,IAAT,EAAeJ,KAAK,EAAEI,IAAtB,EAAzC;AACD,K;;AAEOE,IAAAA,uB,GAA0B,YAAgB;AAChD,aAAO,MAAKL,KAAL,CAAWM,KAAX,CAAiBC,GAAjB,CAAqB,UAAAJ,IAAI,EAAI;AAChB,cAAKD,qBAAL,CAA2BC,IAA3B,CADgB,CAC1BJ,KAD0B,yBAC1BA,KAD0B;AAElC,eAAOA,KAAP;AACD,OAHM,CAAP;AAID,K;;AAEOS,IAAAA,I,GAAO,UAACC,IAAD,EAAkB;AAC/B,UAAIC,aAAa,GAAG,MAAKf,KAAL,CAAWC,YAA/B;;AAEA,UAAI,OAAOc,aAAP,KAAyB,QAA7B,EAAuC;AACrC;AACD;;AAED,UAAMJ,KAAK,GAAG,MAAKD,uBAAL,EAAd;;AAEAK,MAAAA,aAAa,IAAID,IAAjB;;AAEA,UAAIC,aAAa,GAAG,CAApB,EAAuB;AACrBA,QAAAA,aAAa,GAAGJ,KAAK,CAACK,MAAN,GAAe,CAA/B;AACD,OAFD,MAEO,IAAID,aAAa,IAAIJ,KAAK,CAACK,MAA3B,EAAmC;AACxCD,QAAAA,aAAa,GAAG,CAAhB;AACD;;AAED,YAAKE,MAAL,CAAYF,aAAZ;AACD,K;;AAEOE,IAAAA,M,GAAS,UAACC,KAAD,EAAmB;AAClC,YAAKC,QAAL,CAAc,EAAElB,YAAY,EAAEiB,KAAhB,EAAd;AACD,K;;AAEOE,IAAAA,S,GAAY,UAACC,CAAD,EAA8C;AAChE,UAAMpB,YAAY,GAAG,MAAKD,KAAL,CAAWC,YAAhC;AACA,UAAI,OAAOA,YAAP,KAAwB,QAA5B,EAAsC;AACpC;AACD;;AAED,UAAI,6BAAWoB,CAAX,CAAJ,EAAmB;AACjB,YAAI,MAAKhB,KAAL,CAAWC,aAAf,EAA8B;AACV,gBAAKC,qBAAL,CAA2B,MAAKF,KAAL,CAAWM,KAAX,CAAiBV,YAAjB,CAA3B,CADU,CACpBG,MADoB,0BACpBA,KADoB;AAE5B,gBAAKD,UAAL,CAAgBC,MAAhB;AACD;AACD;AACD;;AAED,UAAI,uCAAqBiB,CAArB,CAAJ,EAA6B;AAC3BA,QAAAA,CAAC,CAACC,cAAF;AACA,cAAKT,IAAL,CAAU,iCAAeQ,CAAf,IAAoB,CAAC,CAArB,GAAyB,CAAnC;AACD;AACF,K;;AAEOE,IAAAA,Y,GAAe,YAAM;AACnBnB,MAAAA,KADmB,GACT,MAAKC,KADI,CACnBD,KADmB;;AAG3B,UAAMO,KAAK,GAAG,MAAKD,uBAAL,EAAd;AACA,UAAMc,YAAY,GAAG,UAAIb,KAAJ,EAAWc,OAAX,CAAmBrB,KAAnB,CAArB;AACA,UAAMc,KAAK,GAAGM,YAAY,GAAG,CAAC,CAAhB,GAAoBA,YAApB,GAAmC,CAAjD;;AAEA,YAAKL,QAAL,CAAc,EAAElB,YAAY,EAAEiB,KAAhB,EAAd;AACD,K;;AAEOQ,IAAAA,W,GAAc,YAAM;AAC1B,YAAKP,QAAL,CAAc,EAAElB,YAAY,EAAE,IAAhB,EAAd;AACD,K;;AAEO0B,IAAAA,Y,GAAe,YAAM;AAC3B,aAAO,MAAKtB,KAAL,CAAWM,KAAX,CAAiBC,GAAjB,CAAqB,UAACJ,IAAD,EAAOoB,CAAP,EAAa;AACd,cAAKrB,qBAAL,CAA2BC,IAA3B,CADc,CAC/BC,KAD+B,0BAC/BA,KAD+B,CACxBL,KADwB,0BACxBA,KADwB;AAEvC,YAAMyB,WAAW,GAAG;AAClBC,UAAAA,OAAO,EAAE,MAAKzB,KAAL,CAAWD,KAAX,KAAqBA,KADZ;AAElB2B,UAAAA,eAAe,EAAE,MAAK/B,KAAL,CAAWC,YAAX,KAA4B2B,CAF3B;AAGlBI,UAAAA,OAAO,EAAE,mBAAM;AACb,kBAAK7B,UAAL,CAAgBC,KAAhB;AACD,WALiB;AAMlB6B,UAAAA,YAAY,EAAE,IANI;AAOlBC,UAAAA,IAAI,EAAE,MAAK7B,KAAL,CAAW6B,IAPC,EAApB;;AASA;AACE,uCAAC,cAAD,2BAAQ,GAAG,EAAE9B,KAAb,IAAwByB,WAAxB;AACGpB,UAAAA,KADH,CADF;;;AAKD,OAhBM,CAAP;AAiBD,K;;AAEO0B,IAAAA,qB,GAAwB,YAAc;AAC5C,cAAQ,MAAK9B,KAAL,CAAW6B,IAAnB;AACE,aAAK,OAAL;AACE,iBAAOE,mBAASC,UAAT,CAAoB,MAAKnC,KAAzB,CAAP;AACF,aAAK,QAAL;AACE,iBAAOkC,mBAASE,WAAT,CAAqB,MAAKpC,KAA1B,CAAP;AACF,aAAK,OAAL;AACA;AACE,iBAAOkC,mBAASG,UAAT,CAAoB,MAAKrC,KAAzB,CAAP,CAPJ;;AASD,K,sDAhJMsC,M,GAAP,kBAAgB,mBACd,OACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAAAtC,KAAK,EAAI,CACR,MAAI,CAACA,KAAL,GAAa,qCAAiBA,KAAjB,CAAb,CACA,OAAO,6BAAC,0BAAD,CAAc,QAAd,IAAuB,KAAK,EAAE,MAAI,CAACA,KAAnC,IAA2C,MAAI,CAACuC,UAAL,EAA3C,CAAP,CACD,CAJH,CADF,CAQD,C,QAEOA,U,GAAR,sBAAqB,SACnB,IAAMC,aAAa,GAAG,wCACnBN,mBAASO,KAAT,CAAe,KAAKzC,KAApB,CADmB,IACU,CAAC,CAAC,KAAKG,KAAL,CAAWsC,KADvB,OAAtB,CAIA,IAAMC,UAAU,GAAG,EACjBC,IAAI,EAAE,UADW,EAEjBC,SAAS,EAAE,KAAK1B,SAFC,EAGjB2B,OAAO,EAAE,KAAKxB,YAHG,EAIjByB,MAAM,EAAE,KAAKtB,WAJI,EAKjBuB,SAAS,EAAEb,mBAASc,KAAT,EALM,EAAnB,CAQA,IAAMC,cAAc,GAAG,yBAAGf,mBAAS3B,KAAT,EAAH,EAAqB,KAAK0B,qBAAL,EAArB,CAAvB,CAEA,OACE,0CACG,KAAK9B,KAAL,CAAWI,KAAX,GAAmB,sCAAK,SAAS,EAAE0C,cAAhB,IAAiC,KAAK9C,KAAL,CAAWI,KAA5C,CAAnB,GAA8E,IADjF,EAEE,sCAAK,SAAS,EAAE2B,mBAASgB,IAAT,EAAhB,IACE,sCAAWR,UAAX,CADF,EAEE,sCAAK,SAAS,EAAEF,aAAhB,IACE,6BAAC,YAAD,QAAQ,KAAKf,YAAL,EAAR,CADF,CAFF,CAFF,CADF,CAWD,C,mBA9D2B0B,eAAMC,S,8BAAvBvD,Q,CACGwD,mB,GAAsB,U,CADzBxD,Q,CAGGyD,S,GAAY,EACxBb,KAAK,EAAEc,mBAAUC,IADO,EAExB/C,KAAK,EAAE8C,mBAAUE,SAAV,CAAoB,CACzBF,mBAAUG,OAAV,CAAkBH,mBAAUI,MAA5B,CADyB,EAEzBJ,mBAAUG,OAAV,CACEH,mBAAUK,KAAV,CAAgB,EACdrD,KAAK,EAAEgD,mBAAUI,MADH,EAEdzD,KAAK,EAAEqD,mBAAUI,MAFH,EAAhB,CADF,CAFyB,CAApB,EAQJE,UAVqB,EAWxBtD,KAAK,EAAEgD,mBAAUI,MAXO,EAYxBzD,KAAK,EAAEqD,mBAAUI,MAZO,EAaxBvD,aAAa,EAAEmD,mBAAUO,IAbD,E","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\r\nimport { Group } from '../Group';\r\nimport { Button, ButtonSize } from '../Button';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nimport { jsStyles } from './Switcher.styles';\r\nimport { getSwitcherTheme } from './switcherTheme';\r\n\r\nexport type SwitcherSize = ButtonSize;\r\n\r\nexport interface SwitcherProps {\r\n  /**\r\n   * Список строк или список элементов типа `{ label: string, value: string }`\r\n   */\r\n  items: Array<string | SwitcherItem>;\r\n\r\n  value?: string;\r\n\r\n  onValueChange?: (value: string) => void;\r\n\r\n  label?: string;\r\n\r\n  error?: boolean;\r\n\r\n  /** Размер */\r\n  size?: SwitcherSize;\r\n}\r\n\r\nexport interface SwitcherState {\r\n  focusedIndex: Nullable<number>;\r\n}\r\n\r\ninterface SwitcherItem {\r\n  label: string;\r\n  value: string;\r\n}\r\n\r\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\r\n  public static __KONTUR_REACT_UI__ = 'Switcher';\r\n\r\n  public static propTypes = {\r\n    error: PropTypes.bool,\r\n    items: PropTypes.oneOfType([\r\n      PropTypes.arrayOf(PropTypes.string),\r\n      PropTypes.arrayOf(\r\n        PropTypes.shape({\r\n          label: PropTypes.string,\r\n          value: PropTypes.string,\r\n        }),\r\n      ),\r\n    ]).isRequired,\r\n    label: PropTypes.string,\r\n    value: PropTypes.string,\r\n    onValueChange: PropTypes.func,\r\n  };\r\n\r\n  public state: SwitcherState = {\r\n    focusedIndex: null,\r\n  };\r\n\r\n  private theme!: Theme;\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = getSwitcherTheme(theme);\r\n          return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const listClassName = cn({\r\n      [jsStyles.error(this.theme)]: !!this.props.error,\r\n    });\r\n\r\n    const inputProps = {\r\n      type: 'checkbox',\r\n      onKeyDown: this.handleKey,\r\n      onFocus: this._handleFocus,\r\n      onBlur: this._handleBlur,\r\n      className: jsStyles.input(),\r\n    };\r\n\r\n    const lableClassName = cn(jsStyles.label(), this.getLabelSizeClassName());\r\n\r\n    return (\r\n      <div>\r\n        {this.props.label ? <div className={lableClassName}>{this.props.label}</div> : null}\r\n        <div className={jsStyles.wrap()}>\r\n          <input {...inputProps} />\r\n          <div className={listClassName}>\r\n            <Group>{this._renderItems()}</Group>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private selectItem = (value: string) => {\r\n    if (this.props.onValueChange) {\r\n      this.props.onValueChange(value);\r\n    }\r\n  };\r\n\r\n  private _extractPropsFromItem = (item: string | SwitcherItem): SwitcherItem => {\r\n    return typeof item === 'object' ? item : { label: item, value: item };\r\n  };\r\n\r\n  private _extractValuesFromItems = (): string[] => {\r\n    return this.props.items.map(item => {\r\n      const { value } = this._extractPropsFromItem(item);\r\n      return value;\r\n    });\r\n  };\r\n\r\n  private move = (step: number) => {\r\n    let selectedIndex = this.state.focusedIndex;\r\n\r\n    if (typeof selectedIndex !== 'number') {\r\n      return;\r\n    }\r\n\r\n    const items = this._extractValuesFromItems();\r\n\r\n    selectedIndex += step;\r\n\r\n    if (selectedIndex < 0) {\r\n      selectedIndex = items.length - 1;\r\n    } else if (selectedIndex >= items.length) {\r\n      selectedIndex = 0;\r\n    }\r\n\r\n    this._focus(selectedIndex);\r\n  };\r\n\r\n  private _focus = (index: number) => {\r\n    this.setState({ focusedIndex: index });\r\n  };\r\n\r\n  private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n    const focusedIndex = this.state.focusedIndex;\r\n    if (typeof focusedIndex !== 'number') {\r\n      return;\r\n    }\r\n\r\n    if (isKeyEnter(e)) {\r\n      if (this.props.onValueChange) {\r\n        const { value } = this._extractPropsFromItem(this.props.items[focusedIndex]);\r\n        this.selectItem(value);\r\n      }\r\n      return;\r\n    }\r\n\r\n    if (isKeyArrowHorizontal(e)) {\r\n      e.preventDefault();\r\n      this.move(isKeyArrowLeft(e) ? -1 : 1);\r\n    }\r\n  };\r\n\r\n  private _handleFocus = () => {\r\n    const { value } = this.props;\r\n\r\n    const items = this._extractValuesFromItems();\r\n    const currentIndex = [...items].indexOf(value as string);\r\n    const index = currentIndex > -1 ? currentIndex : 0;\r\n\r\n    this.setState({ focusedIndex: index });\r\n  };\r\n\r\n  private _handleBlur = () => {\r\n    this.setState({ focusedIndex: null });\r\n  };\r\n\r\n  private _renderItems = () => {\r\n    return this.props.items.map((item, i) => {\r\n      const { label, value } = this._extractPropsFromItem(item);\r\n      const buttonProps = {\r\n        checked: this.props.value === value,\r\n        visuallyFocused: this.state.focusedIndex === i,\r\n        onClick: () => {\r\n          this.selectItem(value);\r\n        },\r\n        disableFocus: true,\r\n        size: this.props.size,\r\n      };\r\n      return (\r\n        <Button key={value} {...buttonProps}>\r\n          {label}\r\n        </Button>\r\n      );\r\n    });\r\n  };\r\n\r\n  private getLabelSizeClassName = (): string => {\r\n    switch (this.props.size) {\r\n      case 'large':\r\n        return jsStyles.labelLarge(this.theme);\r\n      case 'medium':\r\n        return jsStyles.labelMedium(this.theme);\r\n      case 'small':\r\n      default:\r\n        return jsStyles.labelSmall(this.theme);\r\n    }\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Switcher.tsx"],"names":["SwitcherDataTids","root","Switcher","rootNode","state","focusedIndex","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","_focus","index","setState","handleKey","e","buttonProps","disabled","preventDefault","move","left","selectedIndex","newFocusedIndex","_getNextFocusedIndex","i","length","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","size","role","renderItem","itemValue","customButtonProps","isChecked","commonButtonProps","checked","visuallyFocused","onClick","disableFocus","corners","renderDefault","renderDefaultItem","getLabelSizeClassName","styles","captionLarge","theme","captionMedium","captionSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","setRootNode","wrap","React","Component","__KONTUR_REACT_UI__","defaultProps","propTypes","PropTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { getButtonCorners, Group } from '../Group';\nimport { Button, ButtonProps, ButtonSize } from '../Button';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Switcher.styles';\nimport { getSwitcherTheme } from './switcherTheme';\nimport { mod } from './helpers';\n\nexport type SwitcherSize = ButtonSize;\ntype SwitcherItems = string | SwitcherItem;\n\nexport const SwitcherDataTids = {\n  root: 'Switcher__root',\n} as const;\n\nexport interface SwitcherProps extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'> {\n  /**\n   * Список строк или список элементов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }`\n   */\n  items: SwitcherItems[];\n\n  value?: string;\n\n  onValueChange?: (value: string) => void;\n\n  caption?: string;\n\n  error?: boolean;\n\n  /** Размер */\n  size?: SwitcherSize;\n\n  disabled?: boolean;\n\n  /**\n   * Функция для отрисовки элемента. Аргументы — `label`,\n   * `value`, `buttonProps`, `renderDefault`\n   */\n  renderItem?: (\n    label: string,\n    value: string,\n    buttonProps: ButtonProps,\n    renderDefault: () => React.ReactNode,\n  ) => React.ReactNode;\n}\n\ntype DefaultProps = Required<Pick<SwitcherProps, 'role'>>;\n\nexport interface SwitcherState {\n  focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n  label: string;\n  value: string;\n  buttonProps?: Partial<ButtonProps>;\n}\n\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n  public static __KONTUR_REACT_UI__ = 'Switcher';\n\n  public static defaultProps: DefaultProps = {\n    role: 'switch',\n  };\n\n  public static propTypes = {\n    error: PropTypes.bool,\n    disabled: PropTypes.bool,\n    items: PropTypes.oneOfType([\n      PropTypes.arrayOf(PropTypes.string),\n      PropTypes.arrayOf(\n        PropTypes.shape({\n          label: PropTypes.string,\n          value: PropTypes.string,\n        }),\n      ),\n    ]).isRequired,\n    caption: PropTypes.string,\n    value: PropTypes.string,\n    onValueChange: PropTypes.func,\n    renderItem: PropTypes.func,\n  };\n\n  public state: SwitcherState = {\n    focusedIndex: null,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = getSwitcherTheme(theme);\n          return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const listClassName = cx({\n      [styles.error(this.theme)]: !!this.props.error,\n    });\n\n    const inputProps = {\n      type: 'checkbox',\n      onKeyDown: this.handleKey,\n      onFocus: this._handleFocus,\n      onBlur: this._handleBlur,\n      className: styles.input(),\n    };\n\n    const captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName());\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={SwitcherDataTids.root} className={styles.root()}>\n          {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}\n          <div className={styles.wrap()}>\n            <input {...inputProps} />\n            <div className={listClassName}>\n              <Group>{this._renderItems()}</Group>\n            </div>\n          </div>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private selectItem = (value: string) => {\n    if (this.props.onValueChange) {\n      this.props.onValueChange(value);\n    }\n  };\n\n  private _extractPropsFromItem = (item: string | SwitcherItem): SwitcherItem => {\n    return typeof item === 'object' ? item : { label: item, value: item };\n  };\n\n  private _extractValuesFromItems = (): string[] => {\n    return this.props.items.map((item) => {\n      const { value } = this._extractPropsFromItem(item);\n      return value;\n    });\n  };\n\n  private _focus = (index: number) => {\n    this.setState({ focusedIndex: index });\n  };\n\n  private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    const focusedIndex = this.state.focusedIndex;\n    if (typeof focusedIndex !== 'number') {\n      return;\n    }\n\n    if (isKeyEnter(e)) {\n      if (this.props.onValueChange) {\n        const { value, buttonProps } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n        if (!buttonProps?.disabled) {\n          this.selectItem(value);\n        }\n      }\n      return;\n    }\n\n    if (isKeyArrowHorizontal(e)) {\n      e.preventDefault();\n      this.move(isKeyArrowLeft(e));\n    }\n  };\n\n  private move = (left: boolean) => {\n    const selectedIndex = this.state.focusedIndex;\n\n    if (typeof selectedIndex !== 'number') {\n      return;\n    }\n    const newFocusedIndex = this._getNextFocusedIndex(left, selectedIndex);\n    this._focus(newFocusedIndex);\n  };\n\n  private _getNextFocusedIndex = (left: boolean, focusedIndex: number): number => {\n    const { items, disabled } = this.props;\n    if (disabled) {\n      return focusedIndex;\n    }\n\n    for (let i = 1; i < items.length; i++) {\n      const index = mod(focusedIndex + (left ? -i : i), items.length);\n      const { buttonProps } = this._extractPropsFromItem(items[index]);\n      if (!buttonProps?.disabled) {\n        return index;\n      }\n    }\n    return focusedIndex;\n  };\n\n  private _handleFocus = () => {\n    const { value } = this.props;\n\n    const items = this._extractValuesFromItems();\n    const currentIndex = [...items].indexOf(value as string);\n    const index = currentIndex > -1 ? currentIndex : 0;\n\n    this.setState({ focusedIndex: index });\n  };\n\n  private _handleBlur = () => {\n    this.setState({ focusedIndex: null });\n  };\n\n  private _renderItems = () => {\n    const { items, value, size, disabled, role, renderItem } = this.props;\n    return items.map((item, i) => {\n      const { label, value: itemValue, buttonProps: customButtonProps } = this._extractPropsFromItem(item);\n\n      const isChecked = value === itemValue;\n      const commonButtonProps = {\n        'aria-checked': isChecked,\n        role,\n        checked: isChecked,\n        visuallyFocused: this.state.focusedIndex === i,\n        onClick: () => {\n          this.selectItem(itemValue);\n        },\n        disableFocus: true,\n        size,\n        disabled,\n        corners: getButtonCorners(i === 0, i === items.length - 1),\n      };\n\n      const buttonProps = {\n        ...commonButtonProps,\n        ...customButtonProps,\n      };\n\n      const renderDefault = () => this.renderDefaultItem(label, itemValue, buttonProps);\n\n      return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault) : renderDefault();\n    });\n  };\n\n  private renderDefaultItem = (label: string, value: string, buttonProps: ButtonProps) => (\n    <Button key={value} {...buttonProps}>\n      {label}\n    </Button>\n  );\n\n  private getLabelSizeClassName = (): string => {\n    switch (this.props.size) {\n      case 'large':\n        return styles.captionLarge(this.theme);\n      case 'medium':\n        return styles.captionMedium(this.theme);\n      case 'small':\n      default:\n        return styles.captionSmall(this.theme);\n    }\n  };\n}\n"]}

package/cjs/components/Switcher/Switcher.md

@@ -1,10 +1,107 @@
-```jsx harmony
-let intialState = {};
-
-<Switcher
-  label="Switch the switcher"
-  items={['One', 'Two', 'Three']}
-  value={state.value}
-  onValueChange={value => setState({ value })}
-/>;
-```
+```jsx harmony
+const [value, setValue] = React.useState();
+
+<Switcher
+  caption="Switch the switcher"
+  items={['One', 'Two', 'Three']}
+  value={value}
+  onValueChange={setValue}
+/>;
+```
+
+Случай, когда `items` принимает объект типа `{ label: string, value: string }`:
+
+```jsx harmony
+const [value, setValue] = React.useState();
+const items = [
+  {
+    label: 'One',
+    value: '111',
+  },
+  {
+    label: 'Two',
+    value: '222',
+  },
+  {
+    label: 'Three',
+    value: '333',
+  }
+];
+
+<Switcher
+  caption="Switch the switcher"
+  items={items}
+  value={value}
+  onValueChange={setValue}
+/>;
+```
+
+Вариант `items` с полем `buttonProps`, который позволяет кастомизировать кнопку:
+
+```jsx harmony
+const [value, setValue] = React.useState();
+const items = [
+  {
+    label: 'One',
+    value: '111',
+    buttonProps: {
+      'data-tid': "1-1-1",
+      disabled: true,
+    }
+  },
+  {
+    label: 'Three',
+    value: '333',
+    buttonProps: {
+      'data-tid': "1-1-1",
+      use: "primary",
+    }
+  },
+  {
+    label: 'Two',
+    value: '222',
+    buttonProps: {
+      'data-tid': "1-1-1",
+      arrow: true,
+    }
+  }
+];
+
+<Switcher
+  caption="Switch the switcher"
+  items={items}
+  value={value}
+  onValueChange={setValue}
+/>;
+```
+
+Пример с методом `renderItem` для кастомизации `items`:
+
+```jsx harmony
+import {Hint, Tooltip} from '@skbkontur/react-ui';
+
+const [value, setValue] = React.useState();
+const items = ['One', 'Two', 'Three'];
+
+const renderItem = (label, value, buttonProps, renderDefault) => {
+  if (value === 'One') {
+    return <Hint pos="bottom" text="Подсказка" opened manual>{renderDefault()}</Hint>;
+  }
+  if (value === 'Three') {
+    return (
+      <Tooltip pos="right middle" trigger="opened" render={() => 'Тултип'}>
+        {renderDefault()}
+      </Tooltip>
+    );
+  }
+  return renderDefault();
+}
+
+<Switcher
+  caption="Switch the switcher"
+  items={items}
+  value={value}
+  onValueChange={setValue}
+  renderItem={renderItem}
+/>;
+```

package/cjs/components/Switcher/Switcher.styles.d.ts

@@ -1,9 +1,11 @@
-export declare const jsStyles: {
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(): string;
     wrap(): string;
     input(): string;
-    label(): string;
-    labelSmall(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    labelMedium(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    labelLarge(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    error(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    caption(t: Theme): string;
+    captionSmall(t: Theme): string;
+    captionMedium(t: Theme): string;
+    captionLarge(t: Theme): string;
+    error(t: Theme): string;
 };

package/cjs/components/Switcher/Switcher.styles.js

@@ -1,16 +1,22 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");function _templateObject7() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: 2px;\n      box-shadow: 0 0 0 ", " ", ";\n    "]);_templateObject7 = function _templateObject7() {return data;};return data;}function _templateObject6() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      vertical-align: middle;\n      display: inline-block;\n    "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      vertical-align: middle;\n    "]);_templateObject = function _templateObject() {return data;};return data;}
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 
-var styles = {
+var styles = (0, _Emotion.memoizeStyle)({
+  root: function root() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      line-height: normal;\n    "])));
+
+
+  },
+
   wrap: function wrap() {
-    return (0, _Emotion.css)(_templateObject());
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      vertical-align: middle;\n    "])));
 
 
 
   },
 
   input: function input() {
-    return (0, _Emotion.css)(_templateObject2());
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    "])));
 
 
 
@@ -18,43 +24,43 @@ var styles = {
 
   },
 
-  label: function label() {
-    return (0, _Emotion.css)(_templateObject3());
+  caption: function caption(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      vertical-align: middle;\n      display: inline-block;\n    "])),
+    t.switcherTextColor);
 
 
 
   },
 
-  labelSmall: function labelSmall(t) {
-    return (0, _Emotion.css)(_templateObject4(),
-    t.switcherLabelGapSmall,
-    t.switcherLabelFontSizeSmall,
-    t.switcherLabelLineHeightSmall);
+  captionSmall: function captionSmall(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])),
+    t.switcherCaptionGapSmall,
+    t.switcherCaptionFontSizeSmall,
+    t.switcherCaptionLineHeightSmall);
 
   },
 
-  labelMedium: function labelMedium(t) {
-    return (0, _Emotion.css)(_templateObject5(),
-    t.switcherLabelGapMedium,
-    t.switcherLabelFontSizeMedium,
-    t.switcherLabelLineHeightMedium);
+  captionMedium: function captionMedium(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])),
+    t.switcherCaptionGapMedium,
+    t.switcherCaptionFontSizeMedium,
+    t.switcherCaptionLineHeightMedium);
 
   },
 
-  labelLarge: function labelLarge(t) {
-    return (0, _Emotion.css)(_templateObject6(),
-    t.switcherLabelGapLarge,
-    t.switcherLabelFontSizeLarge,
-    t.switcherLabelLineHeightLarge);
+  captionLarge: function captionLarge(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])),
+    t.switcherCaptionGapLarge,
+    t.switcherCaptionFontSizeLarge,
+    t.switcherCaptionLineHeightLarge);
 
   },
 
   error: function error(t) {
-    return (0, _Emotion.css)(_templateObject7(),
-
-    t.switcherOutlineWidth, t.borderColorError);
-
-  } };
-
+    var insideWidth = parseInt(t.btnBorderWidth);
+    var outsideWidth = parseInt(t.switcherOutlineWidth) - insideWidth + "px";
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: ", ";\n      box-shadow: inset 0 0 0 ", "px ", ", 0 0 0 ", " ", ";\n    "])),
+    t.switcherBorderRadius,
+    insideWidth, t.borderColorError, outsideWidth, t.borderColorError);
 
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

package/cjs/components/Switcher/Switcher.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Switcher.styles.ts"],"names":["styles","wrap","css","input","label","labelSmall","t","switcherLabelGapSmall","switcherLabelFontSizeSmall","switcherLabelLineHeightSmall","labelMedium","switcherLabelGapMedium","switcherLabelFontSizeMedium","switcherLabelLineHeightMedium","labelLarge","switcherLabelGapLarge","switcherLabelFontSizeLarge","switcherLabelLineHeightLarge","error","switcherOutlineWidth","borderColorError","jsStyles"],"mappings":"8QAAA,oD;;;AAGA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,eAAOC,YAAP;;;;AAID,GANY;;AAQbC,EAAAA,KARa,mBAQL;AACN,eAAOD,YAAP;;;;;;AAMD,GAfY;;AAiBbE,EAAAA,KAjBa,mBAiBL;AACN,eAAOF,YAAP;;;;AAID,GAtBY;;AAwBbG,EAAAA,UAxBa,sBAwBFC,CAxBE,EAwBQ;AACnB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACC,qBADpB;AAEeD,IAAAA,CAAC,CAACE,0BAFjB;AAGiBF,IAAAA,CAAC,CAACG,4BAHnB;;AAKD,GA9BY;;AAgCbC,EAAAA,WAhCa,uBAgCDJ,CAhCC,EAgCS;AACpB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACK,sBADpB;AAEeL,IAAAA,CAAC,CAACM,2BAFjB;AAGiBN,IAAAA,CAAC,CAACO,6BAHnB;;AAKD,GAtCY;;AAwCbC,EAAAA,UAxCa,sBAwCFR,CAxCE,EAwCQ;AACnB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACS,qBADpB;AAEeT,IAAAA,CAAC,CAACU,0BAFjB;AAGiBV,IAAAA,CAAC,CAACW,4BAHnB;;AAKD,GA9CY;;AAgDbC,EAAAA,KAhDa,iBAgDPZ,CAhDO,EAgDG;AACd,eAAOJ,YAAP;;AAEsBI,IAAAA,CAAC,CAACa,oBAFxB,EAEgDb,CAAC,CAACc,gBAFlD;;AAID,GArDY,EAAf;;;AAwDO,IAAMC,QAAQ,GAAG,2BAAarB,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  wrap() {\r\n    return css`\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n    `;\r\n  },\r\n\r\n  input() {\r\n    return css`\r\n      height: 0;\r\n      opacity: 0;\r\n      position: absolute;\r\n      width: 0;\r\n    `;\r\n  },\r\n\r\n  label() {\r\n    return css`\r\n      vertical-align: middle;\r\n      display: inline-block;\r\n    `;\r\n  },\r\n\r\n  labelSmall(t: Theme) {\r\n    return css`\r\n      margin-right: ${t.switcherLabelGapSmall};\r\n      font-size: ${t.switcherLabelFontSizeSmall};\r\n      line-height: ${t.switcherLabelLineHeightSmall};\r\n    `;\r\n  },\r\n\r\n  labelMedium(t: Theme) {\r\n    return css`\r\n      margin-right: ${t.switcherLabelGapMedium};\r\n      font-size: ${t.switcherLabelFontSizeMedium};\r\n      line-height: ${t.switcherLabelLineHeightMedium};\r\n    `;\r\n  },\r\n\r\n  labelLarge(t: Theme) {\r\n    return css`\r\n      margin-right: ${t.switcherLabelGapLarge};\r\n      font-size: ${t.switcherLabelFontSizeLarge};\r\n      line-height: ${t.switcherLabelLineHeightLarge};\r\n    `;\r\n  },\r\n\r\n  error(t: Theme) {\r\n    return css`\r\n      border-radius: 2px;\r\n      box-shadow: 0 0 0 ${t.switcherOutlineWidth} ${t.borderColorError};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Switcher.styles.ts"],"names":["styles","root","css","wrap","input","caption","t","switcherTextColor","captionSmall","switcherCaptionGapSmall","switcherCaptionFontSizeSmall","switcherCaptionLineHeightSmall","captionMedium","switcherCaptionGapMedium","switcherCaptionFontSizeMedium","switcherCaptionLineHeightMedium","captionLarge","switcherCaptionGapLarge","switcherCaptionFontSizeLarge","switcherCaptionLineHeightLarge","error","insideWidth","parseInt","btnBorderWidth","outsideWidth","switcherOutlineWidth","switcherBorderRadius","borderColorError"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;AAGD,GALgC;;AAOjCC,EAAAA,IAPiC,kBAO1B;AACL,eAAOD,YAAP;;;;AAID,GAZgC;;AAcjCE,EAAAA,KAdiC,mBAczB;AACN,eAAOF,YAAP;;;;;;AAMD,GArBgC;;AAuBjCG,EAAAA,OAvBiC,mBAuBzBC,CAvByB,EAuBf;AAChB,eAAOJ,YAAP;AACWI,IAAAA,CAAC,CAACC,iBADb;;;;AAKD,GA7BgC;;AA+BjCC,EAAAA,YA/BiC,wBA+BpBF,CA/BoB,EA+BV;AACrB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACG,uBADpB;AAEeH,IAAAA,CAAC,CAACI,4BAFjB;AAGiBJ,IAAAA,CAAC,CAACK,8BAHnB;;AAKD,GArCgC;;AAuCjCC,EAAAA,aAvCiC,yBAuCnBN,CAvCmB,EAuCT;AACtB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACO,wBADpB;AAEeP,IAAAA,CAAC,CAACQ,6BAFjB;AAGiBR,IAAAA,CAAC,CAACS,+BAHnB;;AAKD,GA7CgC;;AA+CjCC,EAAAA,YA/CiC,wBA+CpBV,CA/CoB,EA+CV;AACrB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACW,uBADpB;AAEeX,IAAAA,CAAC,CAACY,4BAFjB;AAGiBZ,IAAAA,CAAC,CAACa,8BAHnB;;AAKD,GArDgC;;AAuDjCC,EAAAA,KAvDiC,iBAuD3Bd,CAvD2B,EAuDjB;AACd,QAAMe,WAAW,GAAGC,QAAQ,CAAChB,CAAC,CAACiB,cAAH,CAA5B;AACA,QAAMC,YAAY,GAAMF,QAAQ,CAAChB,CAAC,CAACmB,oBAAH,CAAR,GAAmCJ,WAAzC,OAAlB;AACA,eAAOnB,YAAP;AACmBI,IAAAA,CAAC,CAACoB,oBADrB;AAE4BL,IAAAA,WAF5B,EAE6Cf,CAAC,CAACqB,gBAF/C,EAE0EH,YAF1E,EAE0FlB,CAAC,CAACqB,gBAF5F;;AAID,GA9DgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      line-height: normal;\n    `;\n  },\n\n  wrap() {\n    return css`\n      display: inline-block;\n      vertical-align: middle;\n    `;\n  },\n\n  input() {\n    return css`\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      color: ${t.switcherTextColor};\n      vertical-align: middle;\n      display: inline-block;\n    `;\n  },\n\n  captionSmall(t: Theme) {\n    return css`\n      margin-right: ${t.switcherCaptionGapSmall};\n      font-size: ${t.switcherCaptionFontSizeSmall};\n      line-height: ${t.switcherCaptionLineHeightSmall};\n    `;\n  },\n\n  captionMedium(t: Theme) {\n    return css`\n      margin-right: ${t.switcherCaptionGapMedium};\n      font-size: ${t.switcherCaptionFontSizeMedium};\n      line-height: ${t.switcherCaptionLineHeightMedium};\n    `;\n  },\n\n  captionLarge(t: Theme) {\n    return css`\n      margin-right: ${t.switcherCaptionGapLarge};\n      font-size: ${t.switcherCaptionFontSizeLarge};\n      line-height: ${t.switcherCaptionLineHeightLarge};\n    `;\n  },\n\n  error(t: Theme) {\n    const insideWidth = parseInt(t.btnBorderWidth);\n    const outsideWidth = `${parseInt(t.switcherOutlineWidth) - insideWidth}px`;\n    return css`\n      border-radius: ${t.switcherBorderRadius};\n      box-shadow: inset 0 0 0 ${insideWidth}px ${t.borderColorError}, 0 0 0 ${outsideWidth} ${t.borderColorError};\n    `;\n  },\n});\n"]}

package/cjs/components/Switcher/helpers.d.ts

@@ -0,0 +1 @@
+export declare const mod: (n: number, mod: number) => number;

package/cjs/components/Switcher/helpers.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;exports.mod = void 0;var mod = function mod(n, _mod) {return (n % _mod + _mod) % _mod;};exports.mod = mod;

package/cjs/components/Switcher/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["helpers.ts"],"names":["mod","n"],"mappings":"4DAAO,IAAMA,GAAG,GAAG,aAACC,CAAD,EAAYD,IAAZ,UAA4B,CAAEC,CAAC,GAAGD,IAAL,GAAYA,IAAb,IAAoBA,IAAhD,EAAZ,C","sourcesContent":["export const mod = (n: number, mod: number) => ((n % mod) + mod) % mod;\n"]}

package/cjs/components/Switcher/index.js

@@ -1 +1 @@
-"use strict";exports.__esModule = true;var _Switcher = require("./Switcher");Object.keys(_Switcher).forEach(function (key) {if (key === "default" || key === "__esModule") return;exports[key] = _Switcher[key];});
+"use strict";exports.__esModule = true;var _Switcher = require("./Switcher");Object.keys(_Switcher).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Switcher[key]) return;exports[key] = _Switcher[key];});

package/cjs/components/Switcher/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Switcher';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Switcher';\n"]}

package/cjs/components/Switcher/switcherTheme.d.ts

@@ -1 +1,2 @@
-export declare const getSwitcherTheme: (theme: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>) => Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>;
+import { Theme } from '../../lib/theming/Theme';
+export declare const getSwitcherTheme: (theme: Theme) => Theme;

package/cjs/components/Switcher/switcherTheme.js

@@ -5,6 +5,8 @@ var getSwitcherTheme = function getSwitcherTheme(theme) {
   return _ThemeFactory.ThemeFactory.create(
   {
     btnBorderWidth: theme.switcherButtonBorderWidth,
+    btnDisabledBorderColor: theme.switcherButtonDisabledBorderColor,
+    btnCheckedDisabledShadow: theme.switcherButtonCheckedDisabledShadow,
 
     btnLineHeightSmall: theme.switcherButtonLineHeightSmall,
     btnFontSizeSmall: theme.switcherButtonFontSizeSmall,

package/cjs/components/Switcher/switcherTheme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["switcherTheme.ts"],"names":["getSwitcherTheme","theme","ThemeFactory","create","btnBorderWidth","switcherButtonBorderWidth","btnLineHeightSmall","switcherButtonLineHeightSmall","btnFontSizeSmall","switcherButtonFontSizeSmall","btnPaddingXSmall","switcherButtonPaddingXSmall","btnPaddingYSmall","switcherButtonPaddingYSmall","btnBorderRadiusSmall","switcherButtonBorderRadiusSmall","btnLineHeightMedium","switcherButtonLineHeightMedium","btnFontSizeMedium","switcherButtonFontSizeMedium","btnPaddingXMedium","switcherButtonPaddingXMedium","btnPaddingYMedium","switcherButtonPaddingYMedium","btnBorderRadiusMedium","switcherButtonBorderRadiusMedium","btnLineHeightLarge","switcherButtonLineHeightLarge","btnFontSizeLarge","switcherButtonFontSizeLarge","btnPaddingXLarge","switcherButtonPaddingXLarge","btnPaddingYLarge","switcherButtonPaddingYLarge","btnBorderRadiusLarge","switcherButtonBorderRadiusLarge"],"mappings":"yEAAA;;;AAGO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAyB;AACvD,SAAOC,2BAAaC,MAAb;AACL;AACEC,IAAAA,cAAc,EAAEH,KAAK,CAACI,yBADxB;;AAGEC,IAAAA,kBAAkB,EAAEL,KAAK,CAACM,6BAH5B;AAIEC,IAAAA,gBAAgB,EAAEP,KAAK,CAACQ,2BAJ1B;AAKEC,IAAAA,gBAAgB,EAAET,KAAK,CAACU,2BAL1B;AAMEC,IAAAA,gBAAgB,EAAEX,KAAK,CAACY,2BAN1B;AAOEC,IAAAA,oBAAoB,EAAEb,KAAK,CAACc,+BAP9B;;AASEC,IAAAA,mBAAmB,EAAEf,KAAK,CAACgB,8BAT7B;AAUEC,IAAAA,iBAAiB,EAAEjB,KAAK,CAACkB,4BAV3B;AAWEC,IAAAA,iBAAiB,EAAEnB,KAAK,CAACoB,4BAX3B;AAYEC,IAAAA,iBAAiB,EAAErB,KAAK,CAACsB,4BAZ3B;AAaEC,IAAAA,qBAAqB,EAAEvB,KAAK,CAACwB,gCAb/B;;AAeEC,IAAAA,kBAAkB,EAAEzB,KAAK,CAAC0B,6BAf5B;AAgBEC,IAAAA,gBAAgB,EAAE3B,KAAK,CAAC4B,2BAhB1B;AAiBEC,IAAAA,gBAAgB,EAAE7B,KAAK,CAAC8B,2BAjB1B;AAkBEC,IAAAA,gBAAgB,EAAE/B,KAAK,CAACgC,2BAlB1B;AAmBEC,IAAAA,oBAAoB,EAAEjC,KAAK,CAACkC,+BAnB9B,EADK;;AAsBLlC,EAAAA,KAtBK,CAAP;;AAwBD,CAzBM,C","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nexport const getSwitcherTheme = (theme: Theme): Theme => {\r\n  return ThemeFactory.create(\r\n    {\r\n      btnBorderWidth: theme.switcherButtonBorderWidth,\r\n\r\n      btnLineHeightSmall: theme.switcherButtonLineHeightSmall,\r\n      btnFontSizeSmall: theme.switcherButtonFontSizeSmall,\r\n      btnPaddingXSmall: theme.switcherButtonPaddingXSmall,\r\n      btnPaddingYSmall: theme.switcherButtonPaddingYSmall,\r\n      btnBorderRadiusSmall: theme.switcherButtonBorderRadiusSmall,\r\n\r\n      btnLineHeightMedium: theme.switcherButtonLineHeightMedium,\r\n      btnFontSizeMedium: theme.switcherButtonFontSizeMedium,\r\n      btnPaddingXMedium: theme.switcherButtonPaddingXMedium,\r\n      btnPaddingYMedium: theme.switcherButtonPaddingYMedium,\r\n      btnBorderRadiusMedium: theme.switcherButtonBorderRadiusMedium,\r\n\r\n      btnLineHeightLarge: theme.switcherButtonLineHeightLarge,\r\n      btnFontSizeLarge: theme.switcherButtonFontSizeLarge,\r\n      btnPaddingXLarge: theme.switcherButtonPaddingXLarge,\r\n      btnPaddingYLarge: theme.switcherButtonPaddingYLarge,\r\n      btnBorderRadiusLarge: theme.switcherButtonBorderRadiusLarge,\r\n    },\r\n    theme,\r\n  );\r\n};\r\n"]}
+{"version":3,"sources":["switcherTheme.ts"],"names":["getSwitcherTheme","theme","ThemeFactory","create","btnBorderWidth","switcherButtonBorderWidth","btnDisabledBorderColor","switcherButtonDisabledBorderColor","btnCheckedDisabledShadow","switcherButtonCheckedDisabledShadow","btnLineHeightSmall","switcherButtonLineHeightSmall","btnFontSizeSmall","switcherButtonFontSizeSmall","btnPaddingXSmall","switcherButtonPaddingXSmall","btnPaddingYSmall","switcherButtonPaddingYSmall","btnBorderRadiusSmall","switcherButtonBorderRadiusSmall","btnLineHeightMedium","switcherButtonLineHeightMedium","btnFontSizeMedium","switcherButtonFontSizeMedium","btnPaddingXMedium","switcherButtonPaddingXMedium","btnPaddingYMedium","switcherButtonPaddingYMedium","btnBorderRadiusMedium","switcherButtonBorderRadiusMedium","btnLineHeightLarge","switcherButtonLineHeightLarge","btnFontSizeLarge","switcherButtonFontSizeLarge","btnPaddingXLarge","switcherButtonPaddingXLarge","btnPaddingYLarge","switcherButtonPaddingYLarge","btnBorderRadiusLarge","switcherButtonBorderRadiusLarge"],"mappings":"yEAAA;;;AAGO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAyB;AACvD,SAAOC,2BAAaC,MAAb;AACL;AACEC,IAAAA,cAAc,EAAEH,KAAK,CAACI,yBADxB;AAEEC,IAAAA,sBAAsB,EAAEL,KAAK,CAACM,iCAFhC;AAGEC,IAAAA,wBAAwB,EAAEP,KAAK,CAACQ,mCAHlC;;AAKEC,IAAAA,kBAAkB,EAAET,KAAK,CAACU,6BAL5B;AAMEC,IAAAA,gBAAgB,EAAEX,KAAK,CAACY,2BAN1B;AAOEC,IAAAA,gBAAgB,EAAEb,KAAK,CAACc,2BAP1B;AAQEC,IAAAA,gBAAgB,EAAEf,KAAK,CAACgB,2BAR1B;AASEC,IAAAA,oBAAoB,EAAEjB,KAAK,CAACkB,+BAT9B;;AAWEC,IAAAA,mBAAmB,EAAEnB,KAAK,CAACoB,8BAX7B;AAYEC,IAAAA,iBAAiB,EAAErB,KAAK,CAACsB,4BAZ3B;AAaEC,IAAAA,iBAAiB,EAAEvB,KAAK,CAACwB,4BAb3B;AAcEC,IAAAA,iBAAiB,EAAEzB,KAAK,CAAC0B,4BAd3B;AAeEC,IAAAA,qBAAqB,EAAE3B,KAAK,CAAC4B,gCAf/B;;AAiBEC,IAAAA,kBAAkB,EAAE7B,KAAK,CAAC8B,6BAjB5B;AAkBEC,IAAAA,gBAAgB,EAAE/B,KAAK,CAACgC,2BAlB1B;AAmBEC,IAAAA,gBAAgB,EAAEjC,KAAK,CAACkC,2BAnB1B;AAoBEC,IAAAA,gBAAgB,EAAEnC,KAAK,CAACoC,2BApB1B;AAqBEC,IAAAA,oBAAoB,EAAErC,KAAK,CAACsC,+BArB9B,EADK;;AAwBLtC,EAAAA,KAxBK,CAAP;;AA0BD,CA3BM,C","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getSwitcherTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      btnBorderWidth: theme.switcherButtonBorderWidth,\n      btnDisabledBorderColor: theme.switcherButtonDisabledBorderColor,\n      btnCheckedDisabledShadow: theme.switcherButtonCheckedDisabledShadow,\n\n      btnLineHeightSmall: theme.switcherButtonLineHeightSmall,\n      btnFontSizeSmall: theme.switcherButtonFontSizeSmall,\n      btnPaddingXSmall: theme.switcherButtonPaddingXSmall,\n      btnPaddingYSmall: theme.switcherButtonPaddingYSmall,\n      btnBorderRadiusSmall: theme.switcherButtonBorderRadiusSmall,\n\n      btnLineHeightMedium: theme.switcherButtonLineHeightMedium,\n      btnFontSizeMedium: theme.switcherButtonFontSizeMedium,\n      btnPaddingXMedium: theme.switcherButtonPaddingXMedium,\n      btnPaddingYMedium: theme.switcherButtonPaddingYMedium,\n      btnBorderRadiusMedium: theme.switcherButtonBorderRadiusMedium,\n\n      btnLineHeightLarge: theme.switcherButtonLineHeightLarge,\n      btnFontSizeLarge: theme.switcherButtonFontSizeLarge,\n      btnPaddingXLarge: theme.switcherButtonPaddingXLarge,\n      btnPaddingYLarge: theme.switcherButtonPaddingYLarge,\n      btnBorderRadiusLarge: theme.switcherButtonBorderRadiusLarge,\n    },\n    theme,\n  );\n};\n"]}