@skbkontur/react-ui 0.0.0-031e4bb3f9 → 0.0.0-0fe669bb2d

package/cjs/components/Token/Token.md

@@ -1,112 +1,112 @@
-Token example
-
-```jsx harmony
-import { Token } from '@skbkontur/react-ui';
-
-<Token>Example</Token>;
-```
-
-You can control color of each token
-
-```jsx harmony
-import { Gapped, Token } from '@skbkontur/react-ui';
-
-const colors = {
-  default: {
-    idle: 'defaultIdle',
-    active: 'defaultActive',
-  },
-  gray: {
-    idle: 'grayIdle',
-    active: 'grayActive',
-  },
-  blue: {
-    idle: 'blueIdle',
-    active: 'blueActive',
-  },
-  green: {
-    idle: 'greenIdle',
-    active: 'greenActive',
-  },
-  yellow: {
-    idle: 'yellowIdle',
-    active: 'yellowActive',
-  },
-  red: {
-    idle: 'redIdle',
-    active: 'redActive',
-  },
-  mono: {
-    idle: 'white',
-    active: 'black',
-  },
-};
-
-<Gapped gap={20} vertical>
-  <Gapped gap={10}>
-    <Token colors={colors.default}>Default</Token>
-    <Token isActive colors={colors.default}>
-      Default
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.gray}>Gray</Token>
-    <Token isActive colors={colors.gray}>
-      Gray
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.blue}>Blue</Token>
-    <Token isActive colors={colors.blue}>
-      Blue
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.green}>Green</Token>
-    <Token isActive colors={colors.green}>
-      Green
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.yellow}>Yellow</Token>
-    <Token isActive colors={colors.yellow}>
-      Yellow
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.red}>Red</Token>
-    <Token isActive colors={colors.red}>
-      Red
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.mono}>Monochrome</Token>
-    <Token isActive colors={colors.mono}>
-      Monochrome
-    </Token>
-  </Gapped>
-</Gapped>;
-```
-
-Can accept validation state
-
-```jsx harmony
-import { Gapped, Token } from '@skbkontur/react-ui';
-
-<Gapped gap={20} vertical>
-  <Gapped gap={10}>
-    <Token>Correct</Token>
-    <Token warning>Warned</Token>
-    <Token error>Errored</Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token isActive>Correct</Token>
-    <Token isActive warning>
-      Warned
-    </Token>
-    <Token isActive error>
-      Errored
-    </Token>
-  </Gapped>
-</Gapped>;
-```
+Token example
+
+```jsx harmony
+import { Token } from '@skbkontur/react-ui';
+
+<Token>Example</Token>;
+```
+
+You can control color of each token
+
+```jsx harmony
+import { Gapped, Token } from '@skbkontur/react-ui';
+
+const colors = {
+  default: {
+    idle: 'defaultIdle',
+    active: 'defaultActive',
+  },
+  gray: {
+    idle: 'grayIdle',
+    active: 'grayActive',
+  },
+  blue: {
+    idle: 'blueIdle',
+    active: 'blueActive',
+  },
+  green: {
+    idle: 'greenIdle',
+    active: 'greenActive',
+  },
+  yellow: {
+    idle: 'yellowIdle',
+    active: 'yellowActive',
+  },
+  red: {
+    idle: 'redIdle',
+    active: 'redActive',
+  },
+  mono: {
+    idle: 'white',
+    active: 'black',
+  },
+};
+
+<Gapped gap={20} vertical>
+  <Gapped gap={10}>
+    <Token colors={colors.default}>Default</Token>
+    <Token isActive colors={colors.default}>
+      Default
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.gray}>Gray</Token>
+    <Token isActive colors={colors.gray}>
+      Gray
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.blue}>Blue</Token>
+    <Token isActive colors={colors.blue}>
+      Blue
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.green}>Green</Token>
+    <Token isActive colors={colors.green}>
+      Green
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.yellow}>Yellow</Token>
+    <Token isActive colors={colors.yellow}>
+      Yellow
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.red}>Red</Token>
+    <Token isActive colors={colors.red}>
+      Red
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.mono}>Monochrome</Token>
+    <Token isActive colors={colors.mono}>
+      Monochrome
+    </Token>
+  </Gapped>
+</Gapped>;
+```
+
+Can accept validation state
+
+```jsx harmony
+import { Gapped, Token } from '@skbkontur/react-ui';
+
+<Gapped gap={20} vertical>
+  <Gapped gap={10}>
+    <Token>Correct</Token>
+    <Token warning>Warned</Token>
+    <Token error>Errored</Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token isActive>Correct</Token>
+    <Token isActive warning>
+      Warned
+    </Token>
+    <Token isActive error>
+      Errored
+    </Token>
+  </Gapped>
+</Gapped>;
+```

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

@@ -1,25 +1,29 @@
-export declare const jsStyles: {
-    token(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    disabled(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    text(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    removeIcon(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    removeIcon: string;
 };
-export declare const jsTokenColors: {
-    defaultIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    defaultActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    defaultDisabled: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>) => string;
-    defaultDisabledWarning: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>) => string;
-    defaultDisabledError: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>) => string;
-    grayIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    grayActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    blueIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    blueActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    greenIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    greenActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    yellowIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    yellowActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    redIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    redActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    white: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    black: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
+export declare const styles: {
+    token(t: Theme): string;
+    disabled(t: Theme): string;
+    text(t: Theme): string;
+    removeIcon(t: Theme): string;
+};
+export declare const colorStyles: {
+    defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    defaultDisabled: (t: Theme) => string;
+    defaultDisabledWarning: (t: Theme) => string;
+    defaultDisabledError: (t: Theme) => string;
+    grayIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    grayActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    blueIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    blueActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    greenIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    greenActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    yellowIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    yellowActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    redIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    redActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    white: (t: Theme, v: 'error' | 'warning' | null) => string;
+    black: (t: Theme, v: 'error' | 'warning' | null) => string;
 };

package/cjs/components/Token/Token.styles.js

@@ -1,10 +1,14 @@
-"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsTokenColors = exports.jsStyles = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = exports.globalClasses = exports.colorStyles = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 
-var ColorFunctions = _interopRequireWildcard(require("../../lib/styles/ColorFunctions"));function _templateObject10() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "]);_templateObject10 = function _templateObject10() {return data;};return data;}function _templateObject9() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "]);_templateObject9 = function _templateObject9() {return data;};return data;}function _templateObject8() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        box-shadow: ", "};\n\n        & ", " {\n          fill: ", ";\n          opacity: 1;\n        }\n      "]);_templateObject8 = function _templateObject8() {return data;};return data;}function _templateObject7() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        color: ", ";\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n\n        ", "\n\n        & ", ":hover {\n          color: ", ";\n        }\n      "]);_templateObject7 = function _templateObject7() {return data;};return data;}function _templateObject6() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n      width: ", ";\n      flex-shrink: 0;\n      padding: ", " ", ";\n      box-sizing: ", ";\n      margin-left: ", ";\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n      align-items: center;\n      border-radius: ", ";\n      padding: ", " ", ";\n      line-height: ", ";\n      font-size: ", ";\n      margin: ", " ", ";\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    "]);_templateObject = function _templateObject() {return data;};return data;}
+var ColorFunctions = _interopRequireWildcard(require("../../lib/styles/ColorFunctions"));var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
 
-var styles = {
+var globalClasses = (0, _Emotion.prefix)('token')({
+  removeIcon: 'remove-icon' });exports.globalClasses = globalClasses;
+
+
+var styles = (0, _Emotion.memoizeStyle)({
   token: function token(t) {
-    return (0, _Emotion.css)(_templateObject(),
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n      align-items: center;\n      border-radius: ", ";\n      padding: ", " ", ";\n      line-height: ", ";\n      font-size: ", ";\n      margin: ", " ", ";\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    "])),
 
 
     t.tokenBorderRadius,
@@ -23,24 +27,29 @@ var styles = {
   },
 
   disabled: function disabled(t) {
-    return (0, _Emotion.css)(_templateObject2(),
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n\n      .", " {\n        visibility: hidden;\n      }\n    "])),
     t.tokenPaddingYDisabled, t.tokenPaddingXDisabled,
     t.tokenMarginYDisabled, t.tokenMarginXDisabled,
 
 
-    t.tokenTextColorDisabled);
+    t.tokenTextColorDisabled,
+
+
+    globalClasses.removeIcon);
+
+
 
   },
 
   text: function text(t) {
-    return (0, _Emotion.css)(_templateObject3(),
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "])),
 
     t.tokenLegacyTextShift);
 
   },
 
   removeIcon: function removeIcon(t) {
-    return (0, _Emotion.css)(_templateObject4(),
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n      width: ", ";\n      flex-shrink: 0;\n      padding: ", " ", ";\n      box-sizing: ", ";\n      margin-left: ", ";\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    "])),
     t.tokenRemoveIconSize,
     t.tokenRemoveIconSize,
 
@@ -56,7 +65,7 @@ var styles = {
 
 
 
-  } };
+  } });exports.styles = styles;
 
 
 
@@ -79,9 +88,7 @@ var styles = {
 
 
 
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
-
-var jsTokenColors = [
+var colorStyles = [
 { name: 'defaultIdle', color: function color(t) {return t.tokenDefaultIdle;} },
 { name: 'defaultActive', color: function color(t) {return t.tokenDefaultActive;} },
 { name: 'grayIdle', color: function color(t) {return t.tokenGrayIdle;} },
@@ -100,22 +107,28 @@ reduce(
 function (colors, _ref) {var _extends2;var name = _ref.name,color = _ref.color;return (0, _extends3.default)({},
   colors, (_extends2 = {}, _extends2[
   name] = function (t, v) {
-    var warning = (0, _Emotion.css)(_templateObject5(),
-    t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
+    var getVStyle = function getVStyle() {
+      if (v === 'error') {
+        return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])),
+        t.tokenOutlineWidth, t.tokenBorderColorError, color(t));
+
+      } else if (v === 'warning') {
+        return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])),
+        t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
 
-    var error = (0, _Emotion.css)(_templateObject6(),
-    t.tokenOutlineWidth, t.tokenBorderColorError, color(t));
+      }
 
-    var vStyle = v === 'error' ? error : v === 'warning' ? warning : '';
+      return '';
+    };
 
-    return (0, _Emotion.css)(_templateObject7(),
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        color: ", ";\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n\n        ", "\n\n        .", ":hover {\n          color: ", ";\n        }\n      "])),
     color(t),
     ColorFunctions.contrast(color(t)),
     t.tokenBorderWidth, ColorFunctions.darken(color(t), '5%'), color(t),
 
-    vStyle,
+    getVStyle(),
 
-    (0, _Emotion.cssName)(jsStyles.removeIcon(t)),
+    globalClasses.removeIcon,
     ColorFunctions.contrast(color(t)));
 
 
@@ -123,23 +136,18 @@ function (colors, _ref) {var _extends2;var name = _ref.name,color = _ref.color;r
 
 {
   defaultDisabled: function defaultDisabled(t) {
-    return (0, _Emotion.css)(_templateObject8(),
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        box-shadow: ", ";\n      "])),
     t.tokenDisabledBg,
-    t.tokenShadowDisabled,
-
-    (0, _Emotion.cssName)(jsStyles.removeIcon(t)),
-    t.tokenTextColorDisabled);
-
-
+    t.tokenShadowDisabled);
 
   },
   defaultDisabledWarning: function defaultDisabledWarning(t) {
-    return (0, _Emotion.css)(_templateObject9(),
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
     t.tokenOutlineWidth, t.tokenBorderColorWarning, t.tokenDisabledBg);
 
   },
   defaultDisabledError: function defaultDisabledError(t) {
-    return (0, _Emotion.css)(_templateObject10(),
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
     t.tokenOutlineWidth, t.tokenBorderColorError, t.tokenDisabledBg);
 
-  } });exports.jsTokenColors = jsTokenColors;
+  } });exports.colorStyles = colorStyles;

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

@@ -1 +1 @@
-{"version":3,"sources":["Token.styles.ts"],"names":["styles","token","t","css","tokenBorderRadius","tokenPaddingY","tokenPaddingX","tokenLineHeight","tokenFontSize","tokenMarginY","tokenMarginX","disabled","tokenPaddingYDisabled","tokenPaddingXDisabled","tokenMarginYDisabled","tokenMarginXDisabled","tokenTextColorDisabled","text","tokenLegacyTextShift","removeIcon","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","jsStyles","jsTokenColors","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","v","warning","tokenOutlineWidth","tokenBorderColorWarning","error","tokenBorderColorError","vStyle","ColorFunctions","contrast","tokenBorderWidth","darken","defaultDisabled","tokenDisabledBg","tokenShadowDisabled","defaultDisabledWarning","defaultDisabledError"],"mappings":"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","sourcesContent":["import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\r\n\r\nconst styles = {\r\n  token(t: Theme) {\r\n    return css`\r\n      display: inline-flex;\r\n      align-items: center;\r\n      border-radius: ${t.tokenBorderRadius};\r\n      padding: ${t.tokenPaddingY} ${t.tokenPaddingX};\r\n      line-height: ${t.tokenLineHeight};\r\n      font-size: ${t.tokenFontSize};\r\n      margin: ${t.tokenMarginY} ${t.tokenMarginX};\r\n      min-width: 0;\r\n      word-break: break-all;\r\n      user-select: none;\r\n\r\n      &:hover {\r\n        cursor: pointer;\r\n      }\r\n    `;\r\n  },\r\n\r\n  disabled(t: Theme) {\r\n    return css`\r\n      padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\r\n      margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\r\n      user-select: text;\r\n      cursor: text;\r\n      color: ${t.tokenTextColorDisabled};\r\n    `;\r\n  },\r\n\r\n  text(t: Theme) {\r\n    return css`\r\n      display: inline-block;\r\n      padding-bottom: ${t.tokenLegacyTextShift};\r\n    `;\r\n  },\r\n\r\n  removeIcon(t: Theme) {\r\n    return css`\r\n      height: ${t.tokenRemoveIconSize};\r\n      width: ${t.tokenRemoveIconSize};\r\n      flex-shrink: 0;\r\n      padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\r\n      box-sizing: ${t.tokenRemoveIconBoxSizing};\r\n      margin-left: ${t.tokenRemoveIconGap};\r\n      transition: none;\r\n      fill: currentColor;\r\n      opacity: 0.5;\r\n      line-height: 0;\r\n\r\n      &:hover {\r\n        opacity: 1;\r\n      }\r\n    `;\r\n  },\r\n};\r\n\r\ninterface TokenColors {\r\n  defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  defaultDisabled: (t: Theme) => string;\r\n  defaultDisabledWarning: (t: Theme) => string;\r\n  defaultDisabledError: (t: Theme) => string;\r\n  grayIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  grayActive: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  blueIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  blueActive: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  greenIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  greenActive: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  yellowIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  yellowActive: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  redIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  redActive: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  white: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  black: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n}\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n\r\nexport const jsTokenColors = [\r\n  { name: 'defaultIdle', color: (t: Theme) => t.tokenDefaultIdle },\r\n  { name: 'defaultActive', color: (t: Theme) => t.tokenDefaultActive },\r\n  { name: 'grayIdle', color: (t: Theme) => t.tokenGrayIdle },\r\n  { name: 'grayActive', color: (t: Theme) => t.tokenGrayActive },\r\n  { name: 'blueIdle', color: (t: Theme) => t.tokenBlueIdle },\r\n  { name: 'blueActive', color: (t: Theme) => t.tokenBlueActive },\r\n  { name: 'greenIdle', color: (t: Theme) => t.tokenGreenIdle },\r\n  { name: 'greenActive', color: (t: Theme) => t.tokenGreenActive },\r\n  { name: 'yellowIdle', color: (t: Theme) => t.tokenYellowIdle },\r\n  { name: 'yellowActive', color: (t: Theme) => t.tokenYellowActive },\r\n  { name: 'redIdle', color: (t: Theme) => t.tokenRedIdle },\r\n  { name: 'redActive', color: (t: Theme) => t.tokenRedActive },\r\n  { name: 'white', color: (t: Theme) => t.tokenWhite },\r\n  { name: 'black', color: (t: Theme) => t.tokenBlack },\r\n].reduce(\r\n  (colors: TokenColors, { name, color }) => ({\r\n    ...colors,\r\n    [name](t: Theme, v: 'error' | 'warning') {\r\n      const warning = css`\r\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${color(t)};\r\n      `;\r\n      const error = css`\r\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${color(t)};\r\n      `;\r\n      const vStyle = v === 'error' ? error : v === 'warning' ? warning : '';\r\n\r\n      return css`\r\n        background-color: ${color(t)};\r\n        color: ${ColorFunctions.contrast(color(t))};\r\n        box-shadow: 0 0 0 ${t.tokenBorderWidth} ${ColorFunctions.darken(color(t), '5%')}, inset 0 0 0 1px ${color(t)};\r\n\r\n        ${vStyle}\r\n\r\n        & ${cssName(jsStyles.removeIcon(t))}:hover {\r\n          color: ${ColorFunctions.contrast(color(t))};\r\n        }\r\n      `;\r\n    },\r\n  }),\r\n  {\r\n    defaultDisabled(t: Theme) {\r\n      return css`\r\n        background-color: ${t.tokenDisabledBg};\r\n        box-shadow: ${t.tokenShadowDisabled}};\r\n\r\n        & ${cssName(jsStyles.removeIcon(t))} {\r\n          fill: ${t.tokenTextColorDisabled};\r\n          opacity: 1;\r\n        }\r\n      `;\r\n    },\r\n    defaultDisabledWarning(t: Theme) {\r\n      return css`\r\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${t.tokenDisabledBg};\r\n      `;\r\n    },\r\n    defaultDisabledError(t: Theme) {\r\n      return css`\r\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${t.tokenDisabledBg};\r\n      `;\r\n    },\r\n  } as TokenColors,\r\n);\r\n"]}
+{"version":3,"sources":["Token.styles.ts"],"names":["globalClasses","removeIcon","styles","token","t","css","tokenBorderRadius","tokenPaddingY","tokenPaddingX","tokenLineHeight","tokenFontSize","tokenMarginY","tokenMarginX","disabled","tokenPaddingYDisabled","tokenPaddingXDisabled","tokenMarginYDisabled","tokenMarginXDisabled","tokenTextColorDisabled","text","tokenLegacyTextShift","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","colorStyles","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","v","getVStyle","tokenOutlineWidth","tokenBorderColorError","tokenBorderColorWarning","ColorFunctions","contrast","tokenBorderWidth","darken","defaultDisabled","tokenDisabledBg","tokenShadowDisabled","defaultDisabledWarning","defaultDisabledError"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\n\nexport const globalClasses = prefix('token')({\n  removeIcon: 'remove-icon',\n});\n\nexport const styles = memoizeStyle({\n  token(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      border-radius: ${t.tokenBorderRadius};\n      padding: ${t.tokenPaddingY} ${t.tokenPaddingX};\n      line-height: ${t.tokenLineHeight};\n      font-size: ${t.tokenFontSize};\n      margin: ${t.tokenMarginY} ${t.tokenMarginX};\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\n      margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\n      user-select: text;\n      cursor: text;\n      color: ${t.tokenTextColorDisabled};\n      pointer-events: none;\n\n      .${globalClasses.removeIcon} {\n        visibility: hidden;\n      }\n    `;\n  },\n\n  text(t: Theme) {\n    return css`\n      display: inline-block;\n      padding-bottom: ${t.tokenLegacyTextShift};\n    `;\n  },\n\n  removeIcon(t: Theme) {\n    return css`\n      height: ${t.tokenRemoveIconSize};\n      width: ${t.tokenRemoveIconSize};\n      flex-shrink: 0;\n      padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\n      box-sizing: ${t.tokenRemoveIconBoxSizing};\n      margin-left: ${t.tokenRemoveIconGap};\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    `;\n  },\n});\n\ninterface TokenColors {\n  defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultDisabled: (t: Theme) => string;\n  defaultDisabledWarning: (t: Theme) => string;\n  defaultDisabledError: (t: Theme) => string;\n  grayIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  grayActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  white: (t: Theme, v: 'error' | 'warning' | null) => string;\n  black: (t: Theme, v: 'error' | 'warning' | null) => string;\n}\n\nexport const colorStyles = [\n  { name: 'defaultIdle', color: (t: Theme) => t.tokenDefaultIdle },\n  { name: 'defaultActive', color: (t: Theme) => t.tokenDefaultActive },\n  { name: 'grayIdle', color: (t: Theme) => t.tokenGrayIdle },\n  { name: 'grayActive', color: (t: Theme) => t.tokenGrayActive },\n  { name: 'blueIdle', color: (t: Theme) => t.tokenBlueIdle },\n  { name: 'blueActive', color: (t: Theme) => t.tokenBlueActive },\n  { name: 'greenIdle', color: (t: Theme) => t.tokenGreenIdle },\n  { name: 'greenActive', color: (t: Theme) => t.tokenGreenActive },\n  { name: 'yellowIdle', color: (t: Theme) => t.tokenYellowIdle },\n  { name: 'yellowActive', color: (t: Theme) => t.tokenYellowActive },\n  { name: 'redIdle', color: (t: Theme) => t.tokenRedIdle },\n  { name: 'redActive', color: (t: Theme) => t.tokenRedActive },\n  { name: 'white', color: (t: Theme) => t.tokenWhite },\n  { name: 'black', color: (t: Theme) => t.tokenBlack },\n].reduce(\n  (colors: TokenColors, { name, color }) => ({\n    ...colors,\n    [name](t: Theme, v: 'error' | 'warning') {\n      const getVStyle = () => {\n        if (v === 'error') {\n          return css`\n            box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${color(t)};\n          `;\n        } else if (v === 'warning') {\n          return css`\n            box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${color(t)};\n          `;\n        }\n\n        return '';\n      };\n\n      return css`\n        background-color: ${color(t)};\n        color: ${ColorFunctions.contrast(color(t))};\n        box-shadow: 0 0 0 ${t.tokenBorderWidth} ${ColorFunctions.darken(color(t), '5%')}, inset 0 0 0 1px ${color(t)};\n\n        ${getVStyle()}\n\n        .${globalClasses.removeIcon}:hover {\n          color: ${ColorFunctions.contrast(color(t))};\n        }\n      `;\n    },\n  }),\n  {\n    defaultDisabled(t: Theme) {\n      return css`\n        background-color: ${t.tokenDisabledBg};\n        box-shadow: ${t.tokenShadowDisabled};\n      `;\n    },\n    defaultDisabledWarning(t: Theme) {\n      return css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n    defaultDisabledError(t: Theme) {\n      return css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n  } as TokenColors,\n);\n"]}

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

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

package/cjs/components/TokenInput/TextWidthHelper.js

@@ -1,6 +1,7 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TextWidthHelper = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 
+var _getDOMRect = require("../../lib/dom/getDOMRect");
 
 var _TokenInput = require("./TokenInput.styles");
 
@@ -13,9 +14,9 @@ var THIN_SPACE = "\u2009";
 
 
 
-/**
- * Херпер позволяет вычислить размеры блока с текстом
- * для последующего выставления размеров input
+/**
+ * Херпер позволяет вычислить размеры блока с текстом
+ * для последующего выставления размеров input
  */var
 TextWidthHelper = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(TextWidthHelper, _React$Component);function TextWidthHelper() {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.
     element = null;_this.
@@ -38,4 +39,4 @@ TextWidthHelper = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.
 
 
 
-    elementRef = function (node) {return _this.element = node;};return _this;}var _proto = TextWidthHelper.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement("div", { className: _TokenInput.jsStyles.helperContainer(this.props.theme) }, /*#__PURE__*/_react.default.createElement("div", { className: this.props.classHelp, ref: this.elementRef }, this.props.text || THIN_SPACE));};_proto.getTextWidth = function getTextWidth() {return this.element ? this.element.getBoundingClientRect().width : 0;};_proto.getTextHeight = function getTextHeight() {return this.element.getBoundingClientRect().height;};return TextWidthHelper;}(_react.default.Component);exports.TextWidthHelper = TextWidthHelper;
+    elementRef = function (node) {return _this.element = node;};return _this;}var _proto = TextWidthHelper.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement("div", { className: _TokenInput.styles.helperContainer(this.props.theme) }, /*#__PURE__*/_react.default.createElement("div", { className: this.props.classHelp, ref: this.elementRef }, this.props.text || THIN_SPACE));};_proto.getTextWidth = function getTextWidth() {return (0, _getDOMRect.getDOMRect)(this.element).width;};_proto.getTextHeight = function getTextHeight() {return (0, _getDOMRect.getDOMRect)(this.element).height;};return TextWidthHelper;}(_react.default.Component);exports.TextWidthHelper = TextWidthHelper;

package/cjs/components/TokenInput/TextWidthHelper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TextWidthHelper.tsx"],"names":["THIN_SPACE","TextWidthHelper","element","elementRef","node","render","jsStyles","helperContainer","props","theme","classHelp","text","getTextWidth","getBoundingClientRect","width","getTextHeight","height","React","Component"],"mappings":"2PAAA;;;;AAIA;;AAEA;AACA;AACA,IAAMA,UAAU,GAAG,QAAnB;;;;;;;AAOA;AACA;AACA;AACA,G;AACaC,e;AACHC,IAAAA,O,GAAiC,I;;;;;;;;;;;;;;;;;;;;AAoBjCC,IAAAA,U,GAAa,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,E,6DAlBdC,M,GAAP,kBAAgB,CACd,oBACE,sCAAK,SAAS,EAAEC,qBAASC,eAAT,CAAyB,KAAKC,KAAL,CAAWC,KAApC,CAAhB,iBACE,sCAAK,SAAS,EAAE,KAAKD,KAAL,CAAWE,SAA3B,EAAsC,GAAG,EAAE,KAAKP,UAAhD,IACG,KAAKK,KAAL,CAAWG,IAAX,IAAmBX,UADtB,CADF,CADF,CAOD,C,QAEMY,Y,GAAP,wBAA8B,CAC5B,OAAO,KAAKV,OAAL,GAAe,KAAKA,OAAL,CAAaW,qBAAb,GAAqCC,KAApD,GAA4D,CAAnE,CACD,C,QAEMC,a,GAAP,yBAA+B,CAC7B,OAAO,KAAKb,OAAL,CAAcW,qBAAd,GAAsCG,MAA7C,CACD,C,0BAnBkCC,eAAMC,S","sourcesContent":["import React from 'react';\r\n\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nimport { jsStyles } from './TokenInput.styles';\r\n\r\n// a thin character to preserve some space\r\n// for the caret visibillity in the input\r\nconst THIN_SPACE = '\\u2009';\r\n\r\nexport interface TextWidthHelperProps {\r\n  text?: string;\r\n  classHelp: string;\r\n  theme: Theme;\r\n}\r\n/**\r\n * Херпер позволяет вычислить размеры блока с текстом\r\n * для последующего выставления размеров input\r\n */\r\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\r\n  private element: HTMLDivElement | null = null;\r\n\r\n  public render() {\r\n    return (\r\n      <div className={jsStyles.helperContainer(this.props.theme)}>\r\n        <div className={this.props.classHelp} ref={this.elementRef}>\r\n          {this.props.text || THIN_SPACE}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  public getTextWidth(): number {\r\n    return this.element ? this.element.getBoundingClientRect().width : 0;\r\n  }\r\n\r\n  public getTextHeight(): number {\r\n    return this.element!.getBoundingClientRect().height;\r\n  }\r\n\r\n  private elementRef = (node: HTMLDivElement) => (this.element = node);\r\n}\r\n"]}
+{"version":3,"sources":["TextWidthHelper.tsx"],"names":["THIN_SPACE","TextWidthHelper","element","elementRef","node","render","styles","helperContainer","props","theme","classHelp","text","getTextWidth","width","getTextHeight","height","React","Component"],"mappings":"2PAAA;;;AAGA;;AAEA;;AAEA;AACA;AACA,IAAMA,UAAU,GAAG,QAAnB;;;;;;;AAOA;AACA;AACA;AACA,G;AACaC,e;AACHC,IAAAA,O,GAAiC,I;;;;;;;;;;;;;;;;;;;;AAoBjCC,IAAAA,U,GAAa,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,E,6DAlBdC,M,GAAP,kBAAgB,CACd,oBACE,sCAAK,SAAS,EAAEC,mBAAOC,eAAP,CAAuB,KAAKC,KAAL,CAAWC,KAAlC,CAAhB,iBACE,sCAAK,SAAS,EAAE,KAAKD,KAAL,CAAWE,SAA3B,EAAsC,GAAG,EAAE,KAAKP,UAAhD,IACG,KAAKK,KAAL,CAAWG,IAAX,IAAmBX,UADtB,CADF,CADF,CAOD,C,QAEMY,Y,GAAP,wBAA8B,CAC5B,OAAO,4BAAW,KAAKV,OAAhB,EAAyBW,KAAhC,CACD,C,QAEMC,a,GAAP,yBAA+B,CAC7B,OAAO,4BAAW,KAAKZ,OAAhB,EAAyBa,MAAhC,CACD,C,0BAnBkCC,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './TokenInput.styles';\n\n// a thin character to preserve some space\n// for the caret visibillity in the input\nconst THIN_SPACE = '\\u2009';\n\nexport interface TextWidthHelperProps {\n  text?: string;\n  classHelp: string;\n  theme: Theme;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n * для последующего выставления размеров input\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n\n  public render() {\n    return (\n      <div className={styles.helperContainer(this.props.theme)}>\n        <div className={this.props.classHelp} ref={this.elementRef}>\n          {this.props.text || THIN_SPACE}\n        </div>\n      </div>\n    );\n  }\n\n  public getTextWidth(): number {\n    return getDOMRect(this.element).width;\n  }\n\n  public getTextHeight(): number {\n    return getDOMRect(this.element).height;\n  }\n\n  private elementRef = (node: HTMLDivElement) => (this.element = node);\n}\n"]}