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

package/components/Switcher/Switcher.md

@@ -1,10 +1,10 @@
-```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}
+/>;
+```

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["Switcher.styles.ts"],"names":["css","memoizeStyle","styles","wrap","input","label","labelSmall","t","switcherLabelGapSmall","switcherLabelFontSizeSmall","switcherLabelLineHeightSmall","labelMedium","switcherLabelGapMedium","switcherLabelFontSizeMedium","switcherLabelLineHeightMedium","labelLarge","switcherLabelGapLarge","switcherLabelFontSizeLarge","switcherLabelLineHeightLarge","error","switcherOutlineWidth","borderColorError","jsStyles"],"mappings":"2oDAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,WAAOH,GAAP;;;;AAID,GANY;;AAQbI,EAAAA,KARa,mBAQL;AACN,WAAOJ,GAAP;;;;;;AAMD,GAfY;;AAiBbK,EAAAA,KAjBa,mBAiBL;AACN,WAAOL,GAAP;;;;AAID,GAtBY;;AAwBbM,EAAAA,UAxBa,sBAwBFC,CAxBE,EAwBQ;AACnB,WAAOP,GAAP;AACkBO,IAAAA,CAAC,CAACC,qBADpB;AAEeD,IAAAA,CAAC,CAACE,0BAFjB;AAGiBF,IAAAA,CAAC,CAACG,4BAHnB;;AAKD,GA9BY;;AAgCbC,EAAAA,WAhCa,uBAgCDJ,CAhCC,EAgCS;AACpB,WAAOP,GAAP;AACkBO,IAAAA,CAAC,CAACK,sBADpB;AAEeL,IAAAA,CAAC,CAACM,2BAFjB;AAGiBN,IAAAA,CAAC,CAACO,6BAHnB;;AAKD,GAtCY;;AAwCbC,EAAAA,UAxCa,sBAwCFR,CAxCE,EAwCQ;AACnB,WAAOP,GAAP;AACkBO,IAAAA,CAAC,CAACS,qBADpB;AAEeT,IAAAA,CAAC,CAACU,0BAFjB;AAGiBV,IAAAA,CAAC,CAACW,4BAHnB;;AAKD,GA9CY;;AAgDbC,EAAAA,KAhDa,iBAgDPZ,CAhDO,EAgDG;AACd,WAAOP,GAAP;;AAEsBO,IAAAA,CAAC,CAACa,oBAFxB,EAEgDb,CAAC,CAACc,gBAFlD;;AAID,GArDY,EAAf;;;AAwDA,OAAO,IAAMC,QAAQ,GAAGrB,YAAY,CAACC,MAAD,CAA7B","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":["css","memoizeStyle","styles","root","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":"kPAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;AAGD,GALgC;;AAOjCI,EAAAA,IAPiC,kBAO1B;AACL,WAAOJ,GAAP;;;;AAID,GAZgC;;AAcjCK,EAAAA,KAdiC,mBAczB;AACN,WAAOL,GAAP;;;;;;AAMD,GArBgC;;AAuBjCM,EAAAA,OAvBiC,mBAuBzBC,CAvByB,EAuBf;AAChB,WAAOP,GAAP;AACWO,IAAAA,CAAC,CAACC,iBADb;;;;AAKD,GA7BgC;;AA+BjCC,EAAAA,YA/BiC,wBA+BpBF,CA/BoB,EA+BV;AACrB,WAAOP,GAAP;AACkBO,IAAAA,CAAC,CAACG,uBADpB;AAEeH,IAAAA,CAAC,CAACI,4BAFjB;AAGiBJ,IAAAA,CAAC,CAACK,8BAHnB;;AAKD,GArCgC;;AAuCjCC,EAAAA,aAvCiC,yBAuCnBN,CAvCmB,EAuCT;AACtB,WAAOP,GAAP;AACkBO,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,WAAOP,GAAP;AACkBO,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,WAAOtB,GAAP;AACmBO,IAAAA,CAAC,CAACoB,oBADrB;AAE4BL,IAAAA,WAF5B,EAE6Cf,CAAC,CAACqB,gBAF/C,EAE0EH,YAF1E,EAE0FlB,CAAC,CAACqB,gBAF5F;;AAID,GA9DgC,EAAD,CAA3B","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/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/components/Switcher/index/index.js.map

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

package/components/Switcher/switcherTheme/switcherTheme.js

@@ -2,6 +2,8 @@ import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
 export var getSwitcherTheme = function getSwitcherTheme(theme) {
   return ThemeFactory.create({
     btnBorderWidth: theme.switcherButtonBorderWidth,
+    btnDisabledBorderColor: theme.switcherButtonDisabledBorderColor,
+    btnCheckedDisabledShadow: theme.switcherButtonCheckedDisabledShadow,
     btnLineHeightSmall: theme.switcherButtonLineHeightSmall,
     btnFontSizeSmall: theme.switcherButtonFontSizeSmall,
     btnPaddingXSmall: theme.switcherButtonPaddingXSmall,

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

@@ -1 +1 @@
-{"version":3,"sources":["switcherTheme.ts"],"names":["ThemeFactory","getSwitcherTheme","theme","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":"AAAA,SAASA,YAAT,QAA6B,gCAA7B;;;AAGA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAyB;AACvD,SAAOF,YAAY,CAACG,MAAb;AACL;AACEC,IAAAA,cAAc,EAAEF,KAAK,CAACG,yBADxB;;AAGEC,IAAAA,kBAAkB,EAAEJ,KAAK,CAACK,6BAH5B;AAIEC,IAAAA,gBAAgB,EAAEN,KAAK,CAACO,2BAJ1B;AAKEC,IAAAA,gBAAgB,EAAER,KAAK,CAACS,2BAL1B;AAMEC,IAAAA,gBAAgB,EAAEV,KAAK,CAACW,2BAN1B;AAOEC,IAAAA,oBAAoB,EAAEZ,KAAK,CAACa,+BAP9B;;AASEC,IAAAA,mBAAmB,EAAEd,KAAK,CAACe,8BAT7B;AAUEC,IAAAA,iBAAiB,EAAEhB,KAAK,CAACiB,4BAV3B;AAWEC,IAAAA,iBAAiB,EAAElB,KAAK,CAACmB,4BAX3B;AAYEC,IAAAA,iBAAiB,EAAEpB,KAAK,CAACqB,4BAZ3B;AAaEC,IAAAA,qBAAqB,EAAEtB,KAAK,CAACuB,gCAb/B;;AAeEC,IAAAA,kBAAkB,EAAExB,KAAK,CAACyB,6BAf5B;AAgBEC,IAAAA,gBAAgB,EAAE1B,KAAK,CAAC2B,2BAhB1B;AAiBEC,IAAAA,gBAAgB,EAAE5B,KAAK,CAAC6B,2BAjB1B;AAkBEC,IAAAA,gBAAgB,EAAE9B,KAAK,CAAC+B,2BAlB1B;AAmBEC,IAAAA,oBAAoB,EAAEhC,KAAK,CAACiC,+BAnB9B,EADK;;AAsBLjC,EAAAA,KAtBK,CAAP;;AAwBD,CAzBM","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":["ThemeFactory","getSwitcherTheme","theme","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":"AAAA,SAASA,YAAT,QAA6B,gCAA7B;;;AAGA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAyB;AACvD,SAAOF,YAAY,CAACG,MAAb;AACL;AACEC,IAAAA,cAAc,EAAEF,KAAK,CAACG,yBADxB;AAEEC,IAAAA,sBAAsB,EAAEJ,KAAK,CAACK,iCAFhC;AAGEC,IAAAA,wBAAwB,EAAEN,KAAK,CAACO,mCAHlC;;AAKEC,IAAAA,kBAAkB,EAAER,KAAK,CAACS,6BAL5B;AAMEC,IAAAA,gBAAgB,EAAEV,KAAK,CAACW,2BAN1B;AAOEC,IAAAA,gBAAgB,EAAEZ,KAAK,CAACa,2BAP1B;AAQEC,IAAAA,gBAAgB,EAAEd,KAAK,CAACe,2BAR1B;AASEC,IAAAA,oBAAoB,EAAEhB,KAAK,CAACiB,+BAT9B;;AAWEC,IAAAA,mBAAmB,EAAElB,KAAK,CAACmB,8BAX7B;AAYEC,IAAAA,iBAAiB,EAAEpB,KAAK,CAACqB,4BAZ3B;AAaEC,IAAAA,iBAAiB,EAAEtB,KAAK,CAACuB,4BAb3B;AAcEC,IAAAA,iBAAiB,EAAExB,KAAK,CAACyB,4BAd3B;AAeEC,IAAAA,qBAAqB,EAAE1B,KAAK,CAAC2B,gCAf/B;;AAiBEC,IAAAA,kBAAkB,EAAE5B,KAAK,CAAC6B,6BAjB5B;AAkBEC,IAAAA,gBAAgB,EAAE9B,KAAK,CAAC+B,2BAlB1B;AAmBEC,IAAAA,gBAAgB,EAAEhC,KAAK,CAACiC,2BAnB1B;AAoBEC,IAAAA,gBAAgB,EAAElC,KAAK,CAACmC,2BApB1B;AAqBEC,IAAAA,oBAAoB,EAAEpC,KAAK,CAACqC,+BArB9B,EADK;;AAwBLrC,EAAAA,KAxBK,CAAP;;AA0BD,CA3BM","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"]}

package/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/components/Tabs/Indicator/Indicator.js

@@ -1,15 +1,17 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
-import { findDOMNode } from 'react-dom';
 import throttle from 'lodash.throttle';
-import cn from 'classnames';
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { jsStyles } from "../Indicator.styles";
+import { cx } from "../../../lib/theming/Emotion";
+import { getRootNode, rootNode } from "../../../lib/rootNode";
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
+import { styles } from "../Indicator.styles";
 import { TabsContext } from "../TabsContext";
-export var Indicator =
-/*#__PURE__*/
-function (_React$Component) {
+export var Indicator = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Indicator, _React$Component);
 
   function Indicator() {
@@ -24,11 +26,9 @@ function (_React$Component) {
     _this.state = {
       styles: {}
     };
-    _this.theme = void 0;
     _this.eventListener = null;
     _this.removeTabUpdatesListener = null;
-
-    _this.reflow = function () {
+    _this.reflow = throttle(function () {
       var _this$context = _this.context,
           getTab = _this$context.getTab,
           activeTab = _this$context.activeTab;
@@ -45,22 +45,20 @@ function (_React$Component) {
           styles: nodeStyles
         });
       }
-    };
-
-    _this.throttledReflow = throttle(_this.reflow, 100);
+    }, 100);
     return _this;
   }
 
   var _proto = Indicator.prototype;
 
   _proto.componentDidMount = function componentDidMount() {
-    this.eventListener = LayoutEvents.addListener(this.throttledReflow);
+    this.eventListener = LayoutEvents.addListener(this.reflow);
     this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);
     this.reflow();
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
-    this.throttledReflow.cancel();
+    this.reflow.cancel();
 
     if (this.eventListener) {
       this.eventListener.remove();
@@ -78,7 +76,7 @@ function (_React$Component) {
   _proto.render = function render() {
     var _this2 = this;
 
-    return React.createElement(ThemeContext.Consumer, null, function (theme) {
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
       _this2.theme = theme;
       return _this2.renderMain();
     });
@@ -96,33 +94,32 @@ function (_React$Component) {
       primary: false,
       disabled: false
     };
-    return React.createElement("div", {
-      className: cn(jsStyles.root(this.theme), indicators.primary && jsStyles.primary(this.theme), indicators.success && jsStyles.success(this.theme), indicators.warning && jsStyles.warning(this.theme), indicators.error && jsStyles.error(this.theme), this.props.className),
-      style: this.state.styles
+    return /*#__PURE__*/React.createElement("div", {
+      className: cx(styles.root(this.theme), indicators.primary && styles.primary(this.theme), indicators.success && styles.success(this.theme), indicators.warning && styles.warning(this.theme), indicators.error && styles.error(this.theme), this.props.className),
+      style: this.state.styles,
+      ref: this.setRootNode
     });
   };
 
   _proto.getStyles = function getStyles(node) {
-    if (node instanceof React.Component) {
-      node = findDOMNode(node);
-    }
+    var htmlNode = getRootNode(node);
 
-    if (node instanceof HTMLElement) {
-      var rect = node.getBoundingClientRect();
+    if (htmlNode && htmlNode instanceof HTMLElement) {
+      var rect = getDOMRect(htmlNode);
 
       if (this.props.vertical) {
         return {
           width: this.theme.tabBorderWidth,
-          left: node.offsetLeft,
-          top: node.offsetTop,
+          left: htmlNode.offsetLeft,
+          top: htmlNode.offsetTop,
           height: rect.bottom - rect.top
         };
       }
 
       var tabBorderWidth = parseInt(this.theme.tabBorderWidth, 10) || 0;
       return {
-        left: node.offsetLeft,
-        top: node.offsetHeight + node.offsetTop - tabBorderWidth,
+        left: htmlNode.offsetLeft,
+        top: htmlNode.offsetHeight + htmlNode.offsetTop - tabBorderWidth,
         width: rect.right - rect.left
       };
     }
@@ -131,5 +128,4 @@ function (_React$Component) {
   };
 
   return Indicator;
-}(React.Component);
-Indicator.contextType = TabsContext;
+}(React.Component), _class2.contextType = TabsContext, _temp)) || _class;

package/components/Tabs/Indicator/Indicator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Indicator.tsx"],"names":["React","findDOMNode","throttle","cn","LayoutEvents","ThemeContext","jsStyles","TabsContext","Indicator","context","state","styles","theme","eventListener","removeTabUpdatesListener","reflow","getTab","activeTab","node","nodeStyles","getStyles","stylesUpdated","some","prop","setState","throttledReflow","componentDidMount","addListener","props","tabUpdates","on","componentWillUnmount","cancel","remove","componentDidUpdate","_","prevState","render","renderMain","indicators","getIndicators","error","warning","success","primary","disabled","root","className","Component","HTMLElement","rect","getBoundingClientRect","vertical","width","tabBorderWidth","left","offsetLeft","top","offsetTop","height","bottom","parseInt","offsetHeight","right","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport { findDOMNode } from 'react-dom';\r\nimport throttle from 'lodash.throttle';\r\nimport cn from 'classnames';\r\n\r\nimport * as LayoutEvents from '../../lib/LayoutEvents';\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 './Indicator.styles';\r\nimport { TabsContext, TabsContextType } from './TabsContext';\r\nimport { TabIndicators } from './Tab';\r\n\r\nexport interface IndicatorProps {\r\n  className?: string;\r\n  tabUpdates: {\r\n    on: (x0: () => void) => () => void;\r\n  };\r\n  vertical: boolean;\r\n}\r\n\r\nexport interface IndicatorState {\r\n  styles: React.CSSProperties;\r\n}\r\n\r\nexport class Indicator extends React.Component<IndicatorProps, IndicatorState> {\r\n  public static contextType = TabsContext;\r\n  public context: TabsContextType = this.context;\r\n\r\n  public state: IndicatorState = {\r\n    styles: {},\r\n  };\r\n\r\n  private theme!: Theme;\r\n\r\n  private eventListener: Nullable<{\r\n    remove: () => void;\r\n  }> = null;\r\n\r\n  private removeTabUpdatesListener: Nullable<() => void> = null;\r\n\r\n  public componentDidMount() {\r\n    this.eventListener = LayoutEvents.addListener(this.throttledReflow);\r\n    this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);\r\n    this.reflow();\r\n  }\r\n\r\n  public componentWillUnmount() {\r\n    this.throttledReflow.cancel();\r\n\r\n    if (this.eventListener) {\r\n      this.eventListener.remove();\r\n    }\r\n    if (this.removeTabUpdatesListener) {\r\n      this.removeTabUpdatesListener();\r\n    }\r\n  }\r\n\r\n  public componentDidUpdate(_: IndicatorProps, prevState: IndicatorState) {\r\n    this.reflow();\r\n  }\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const { getTab, activeTab } = this.context;\r\n    const node = getTab(activeTab);\r\n    const indicators: TabIndicators = (node && node.getIndicators && node.getIndicators()) || {\r\n      error: false,\r\n      warning: false,\r\n      success: false,\r\n      primary: false,\r\n      disabled: false,\r\n    };\r\n    return (\r\n      <div\r\n        className={cn(\r\n          jsStyles.root(this.theme),\r\n          indicators.primary && jsStyles.primary(this.theme),\r\n          indicators.success && jsStyles.success(this.theme),\r\n          indicators.warning && jsStyles.warning(this.theme),\r\n          indicators.error && jsStyles.error(this.theme),\r\n          this.props.className,\r\n        )}\r\n        style={this.state.styles}\r\n      />\r\n    );\r\n  }\r\n\r\n  private reflow = () => {\r\n    const { getTab, activeTab } = this.context;\r\n    const node = getTab(activeTab);\r\n    const nodeStyles = this.getStyles(node);\r\n    const stylesUpdated = ['left', 'top', 'width', 'height'].some(\r\n      prop => nodeStyles[prop as keyof React.CSSProperties] !== this.state.styles[prop as keyof React.CSSProperties],\r\n    );\r\n    if (stylesUpdated) {\r\n      this.setState({ styles: nodeStyles });\r\n    }\r\n  };\r\n\r\n  private throttledReflow = throttle(this.reflow, 100);\r\n\r\n  private getStyles(node: any): React.CSSProperties {\r\n    if (node instanceof React.Component) {\r\n      node = findDOMNode(node);\r\n    }\r\n\r\n    if (node instanceof HTMLElement) {\r\n      const rect = node.getBoundingClientRect();\r\n      if (this.props.vertical) {\r\n        return {\r\n          width: this.theme.tabBorderWidth,\r\n          left: node.offsetLeft,\r\n          top: node.offsetTop,\r\n          height: rect.bottom - rect.top,\r\n        };\r\n      }\r\n\r\n      const tabBorderWidth = parseInt(this.theme.tabBorderWidth, 10) || 0;\r\n      return {\r\n        left: node.offsetLeft,\r\n        top: node.offsetHeight + node.offsetTop - tabBorderWidth,\r\n        width: rect.right - rect.left,\r\n      };\r\n    }\r\n\r\n    return {};\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["Indicator.tsx"],"names":["React","throttle","LayoutEvents","ThemeContext","cx","getRootNode","rootNode","getDOMRect","styles","TabsContext","Indicator","context","state","eventListener","removeTabUpdatesListener","reflow","getTab","activeTab","node","nodeStyles","getStyles","stylesUpdated","some","prop","setState","componentDidMount","addListener","props","tabUpdates","on","componentWillUnmount","cancel","remove","componentDidUpdate","_","prevState","render","theme","renderMain","indicators","getIndicators","error","warning","success","primary","disabled","root","className","setRootNode","htmlNode","HTMLElement","rect","vertical","width","tabBorderWidth","left","offsetLeft","top","offsetTop","height","bottom","parseInt","offsetHeight","right","Component","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\nimport throttle from 'lodash.throttle';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './Indicator.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { TabIndicators } from './Tab';\n\nexport interface IndicatorProps {\n  className?: string;\n  tabUpdates: {\n    on: (x0: () => void) => () => void;\n  };\n  vertical: boolean;\n}\n\nexport interface IndicatorState {\n  styles: React.CSSProperties;\n}\n\n@rootNode\nexport class Indicator extends React.Component<IndicatorProps, IndicatorState> {\n  public static contextType = TabsContext;\n  public context: TabsContextType = this.context;\n\n  public state: IndicatorState = {\n    styles: {},\n  };\n\n  private theme!: Theme;\n\n  private eventListener: Nullable<{\n    remove: () => void;\n  }> = null;\n\n  private removeTabUpdatesListener: Nullable<() => void> = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.eventListener = LayoutEvents.addListener(this.reflow);\n    this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);\n    this.reflow();\n  }\n\n  public componentWillUnmount() {\n    this.reflow.cancel();\n\n    if (this.eventListener) {\n      this.eventListener.remove();\n    }\n    if (this.removeTabUpdatesListener) {\n      this.removeTabUpdatesListener();\n    }\n  }\n\n  public componentDidUpdate(_: IndicatorProps, prevState: IndicatorState) {\n    this.reflow();\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { getTab, activeTab } = this.context;\n    const node = getTab(activeTab);\n    const indicators: TabIndicators = (node && node.getIndicators && node.getIndicators()) || {\n      error: false,\n      warning: false,\n      success: false,\n      primary: false,\n      disabled: false,\n    };\n    return (\n      <div\n        className={cx(\n          styles.root(this.theme),\n          indicators.primary && styles.primary(this.theme),\n          indicators.success && styles.success(this.theme),\n          indicators.warning && styles.warning(this.theme),\n          indicators.error && styles.error(this.theme),\n          this.props.className,\n        )}\n        style={this.state.styles}\n        ref={this.setRootNode}\n      />\n    );\n  }\n\n  private reflow = throttle(() => {\n    const { getTab, activeTab } = this.context;\n    const node = getTab(activeTab);\n    const nodeStyles = this.getStyles(node);\n    const stylesUpdated = ['left', 'top', 'width', 'height'].some(\n      (prop) => nodeStyles[prop as keyof React.CSSProperties] !== this.state.styles[prop as keyof React.CSSProperties],\n    );\n    if (stylesUpdated) {\n      this.setState({ styles: nodeStyles });\n    }\n  }, 100);\n\n  private getStyles(node: any): React.CSSProperties {\n    const htmlNode = getRootNode(node);\n\n    if (htmlNode && htmlNode instanceof HTMLElement) {\n      const rect = getDOMRect(htmlNode);\n      if (this.props.vertical) {\n        return {\n          width: this.theme.tabBorderWidth,\n          left: htmlNode.offsetLeft,\n          top: htmlNode.offsetTop,\n          height: rect.bottom - rect.top,\n        };\n      }\n\n      const tabBorderWidth = parseInt(this.theme.tabBorderWidth, 10) || 0;\n      return {\n        left: htmlNode.offsetLeft,\n        top: htmlNode.offsetHeight + htmlNode.offsetTop - tabBorderWidth,\n        width: rect.right - rect.left,\n      };\n    }\n\n    return {};\n  }\n}\n"]}

package/components/Tabs/Indicator.d.ts

@@ -11,18 +11,18 @@ export interface IndicatorState {
     styles: React.CSSProperties;
 }
 export declare class Indicator extends React.Component<IndicatorProps, IndicatorState> {
-    static contextType: React.Context<TabsContextType>;
+    static contextType: React.Context<TabsContextType<any>>;
     context: TabsContextType;
     state: IndicatorState;
     private theme;
     private eventListener;
     private removeTabUpdatesListener;
+    private setRootNode;
     componentDidMount(): void;
     componentWillUnmount(): void;
     componentDidUpdate(_: IndicatorProps, prevState: IndicatorState): void;
     render(): JSX.Element;
     private renderMain;
     private reflow;
-    private throttledReflow;
     private getStyles;
 }

package/components/Tabs/Indicator.styles/Indicator.styles.js

@@ -1,71 +1,22 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      height: ", ";\n      position: absolute;\n      transition: all 0.2s ease-out;\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+export var styles = memoizeStyle({
   root: function root(t) {
-    return css(_templateObject(), t.tabColorFocus, t.tabBorderWidth);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      height: ", ";\n      position: absolute;\n      transition: all 0.2s ease-out;\n    "])), t.tabColorFocus, t.tabBorderWidth);
   },
   primary: function primary(t) {
-    return css(_templateObject2(), t.tabColorPrimary);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.tabColorPrimary);
   },
   success: function success(t) {
-    return css(_templateObject3(), t.tabColorSuccess);
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.tabColorSuccess);
   },
   warning: function warning(t) {
-    return css(_templateObject4(), t.tabColorWarning);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.tabColorWarning);
   },
   error: function error(t) {
-    return css(_templateObject5(), t.tabColorError);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.tabColorError);
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/components/Tabs/Indicator.styles/Indicator.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Indicator.styles.ts"],"names":["css","memoizeStyle","styles","root","t","tabColorFocus","tabBorderWidth","primary","tabColorPrimary","success","tabColorSuccess","warning","tabColorWarning","error","tabColorError","jsStyles"],"mappings":"ujCAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACC,aADlB;AAEYD,IAAAA,CAAC,CAACE,cAFd;;;;AAMD,GARY;;AAUbC,EAAAA,OAVa,mBAULH,CAVK,EAUK;AAChB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACI,eADlB;;AAGD,GAdY;;AAgBbC,EAAAA,OAhBa,mBAgBLL,CAhBK,EAgBK;AAChB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACM,eADlB;;AAGD,GApBY;;AAsBbC,EAAAA,OAtBa,mBAsBLP,CAtBK,EAsBK;AAChB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACQ,eADlB;;AAGD,GA1BY;;AA4BbC,EAAAA,KA5Ba,iBA4BPT,CA5BO,EA4BG;AACd,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACU,aADlB;;AAGD,GAhCY,EAAf;;;AAmCA,OAAO,IAAMC,QAAQ,GAAGd,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, 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      background: ${t.tabColorFocus};\r\n      height: ${t.tabBorderWidth};\r\n      position: absolute;\r\n      transition: all 0.2s ease-out;\r\n    `;\r\n  },\r\n\r\n  primary(t: Theme) {\r\n    return css`\r\n      background: ${t.tabColorPrimary};\r\n    `;\r\n  },\r\n\r\n  success(t: Theme) {\r\n    return css`\r\n      background: ${t.tabColorSuccess};\r\n    `;\r\n  },\r\n\r\n  warning(t: Theme) {\r\n    return css`\r\n      background: ${t.tabColorWarning};\r\n    `;\r\n  },\r\n\r\n  error(t: Theme) {\r\n    return css`\r\n      background: ${t.tabColorError};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Indicator.styles.ts"],"names":["css","memoizeStyle","styles","root","t","tabColorFocus","tabBorderWidth","primary","tabColorPrimary","success","tabColorSuccess","warning","tabColorWarning","error","tabColorError"],"mappings":"4LAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACC,aADlB;AAEYD,IAAAA,CAAC,CAACE,cAFd;;;;AAMD,GARgC;;AAUjCC,EAAAA,OAViC,mBAUzBH,CAVyB,EAUf;AAChB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACI,eADlB;;AAGD,GAdgC;;AAgBjCC,EAAAA,OAhBiC,mBAgBzBL,CAhByB,EAgBf;AAChB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACM,eADlB;;AAGD,GApBgC;;AAsBjCC,EAAAA,OAtBiC,mBAsBzBP,CAtByB,EAsBf;AAChB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACQ,eADlB;;AAGD,GA1BgC;;AA4BjCC,EAAAA,KA5BiC,iBA4B3BT,CA5B2B,EA4BjB;AACd,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACU,aADlB;;AAGD,GAhCgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      background: ${t.tabColorFocus};\n      height: ${t.tabBorderWidth};\n      position: absolute;\n      transition: all 0.2s ease-out;\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      background: ${t.tabColorPrimary};\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      background: ${t.tabColorSuccess};\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      background: ${t.tabColorWarning};\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      background: ${t.tabColorError};\n    `;\n  },\n});\n"]}

package/components/Tabs/Indicator.styles.d.ts

@@ -1,7 +1,8 @@
-export declare const jsStyles: {
-    root(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    primary(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    success(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    warning(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    error(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(t: Theme): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    warning(t: Theme): string;
+    error(t: Theme): string;
 };