@skbkontur/react-ui 0.0.0-bcbd5e6112 → 0.0.0-c13bb5f4ca

package/components/GlobalLoader/GlobalLoaderView.styles/GlobalLoaderView.styles.js

@@ -1,63 +1,51 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
-import { memoizeStyle } from "../../../lib/theming/Emotion";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    outer: function outer(t) {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        width: ", ";\n        height: ", ";\n        background-color: ", ";\n        position: ", ";\n        left: ", ";\n        top: ", ";\n        right: ", ";\n        bottom: ", ";\n        overflow: hidden;\n      "])), t.globalLoaderWidth, t.globalLoaderHeight, t.globalLoaderBackgroundColor, t.globalLoaderPosition, t.globalLoaderLeft, t.globalLoaderTop, t.globalLoaderRight, t.globalLoaderBottom);
-    },
-    inner: function inner(t) {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        width: 0;\n        height: ", ";\n        position: absolute;\n        left: 0;\n        overflow: hidden;\n      "])), t.globalLoaderColor, t.globalLoaderHeight);
-    },
-    standardWithoutAnimation: function standardWithoutAnimation() {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        left: 0;\n        width: 90%;\n      "])));
-    },
-    successWithoutAnimation: function successWithoutAnimation() {
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        left: 0;\n        width: 100%;\n      "])));
-    },
-    errorWithoutAnimation: function errorWithoutAnimation() {
-      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        left: 40%;\n        width: 20%;\n      "])));
-    }
-  });
-};
-var moveToRightAnimation = function moveToRightAnimation(emotion) {
-  return emotion.keyframes(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  0% {\n    left: 0;\n    width: 100%;\n  }\n  50% {\n    left: 50%;\n    width: 50%;\n  }\n  100% {\n    left: 99%;\n    width: 1%\n  }\n"])));
-};
-var spinnerAnimation = function spinnerAnimation(emotion) {
-  return emotion.keyframes(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  0% {\n    transform: translateX(50%) scaleX(.005);\n    animation-timing-function: cubic-bezier(.895,.03,.685,.22);\n  }\n  50% {\n    transform: translateX(0) scaleX(.35);\n    animation-timing-function: cubic-bezier(.165,.84,.44,1);\n  }\n  100% {\n    transform: translateX(-50%) scaleX(.005);\n  }\n"])));
-};
-var linearProgressAnimation = function linearProgressAnimation(emotion) {
-  return emotion.keyframes(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  from { width: 0; }\n  to { width: 80% }\n"])));
-};
-var slowProgressAnimation = function slowProgressAnimation(emotion) {
-  return emotion.keyframes(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  from { width: 80%; }\n  to { width: 90% }\n"])));
-};
-export var getAnimations = function getAnimations(emotion) {
-  return {
-    successAnimation: function successAnimation(delayBeforeHide, width, left) {
-      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      animation: successAnimation;\n      animation-duration: ", "ms;\n      @keyframes successAnimation {\n        0% {\n          width: ", "px;\n          left: ", "px;\n          opacity: 1;\n        }\n        20% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        80% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        100% {\n          width: 100%;\n          opacity: 0;\n        }\n      }\n    "])), delayBeforeHide, width, left);
-    },
-    errorAnimation: function errorAnimation(t) {
-      var transitionDuration = parseInt(t.globalLoaderTransitionToSpinnerDuration);
-      var spinnerAnimationDuration = parseInt(t.globalLoaderSpinnerAnimationDuration);
-      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      left: 0;\n      width: 100%;\n      animation:\n        ", " ", "ms linear,\n        ", "ms ", " ", "ms infinite alternate;\n    "])), moveToRightAnimation(emotion), transitionDuration, spinnerAnimationDuration, spinnerAnimation(emotion), transitionDuration);
-    },
-    standardAnimation: function standardAnimation(t, expectedTime) {
-      var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
-      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      width: 90%;\n      animation:\n        ", " ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n        ", "ms ", " ", "ms linear;\n    "])), linearProgressAnimation(emotion), expectedTime, slowProgressAnimationTime, slowProgressAnimation(emotion), expectedTime);
-    },
-    acceptAnimation: function acceptAnimation(t, startWidth, expectedTime, width, left) {
-      var transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);
-      var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
-      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      width: 90%;\n      animation:\n        transitionAnimation ", "ms linear,\n        ", "ms acceptAnimation ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n        ", "ms ", " ", "ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ", "px;\n          left: ", "px;\n        }\n        to {\n          width: ", "px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ", "px;\n        }\n        to {\n          width: 80%;\n        }\n      }\n    "])), transitionTime, expectedTime, transitionTime, slowProgressAnimationTime, slowProgressAnimation(emotion), expectedTime + transitionTime, width, left, startWidth, startWidth);
-    },
-    slowAcceptAnimation: function slowAcceptAnimation(t, startWidth, width, left) {
-      var transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);
-      var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
-      return emotion.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      width: 90%;\n      animation:\n        transitionAnimation ", "ms linear,\n        ", "ms acceptAnimation ", "ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ", "px;\n          left: ", "px;\n        }\n        to {\n          width: ", "px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ", "px;\n        }\n        to {\n          width: 90%;\n        }\n      }\n    "])), transitionTime, slowProgressAnimationTime, transitionTime, width, left, startWidth, startWidth);
-    },
-    acceptWithoutAnimation: function acceptWithoutAnimation(startWidth) {
-      return emotion.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      width: ", "px;\n    "])), startWidth);
-    }
-  };
+import { css, memoizeStyle, keyframes } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  outer: function outer(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n      position: ", ";\n      left: ", ";\n      top: ", ";\n      right: ", ";\n      bottom: ", ";\n      overflow: hidden;\n    "])), t.globalLoaderWidth, t.globalLoaderHeight, t.globalLoaderBackgroundColor, t.globalLoaderPosition, t.globalLoaderLeft, t.globalLoaderTop, t.globalLoaderRight, t.globalLoaderBottom);
+  },
+  inner: function inner(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      width: 0;\n      height: ", ";\n      position: absolute;\n      left: 0;\n      overflow: hidden;\n    "])), t.globalLoaderColor, t.globalLoaderHeight);
+  },
+  standardWithoutAnimation: function standardWithoutAnimation() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      left: 0;\n      width: 90%;\n    "])));
+  },
+  successWithoutAnimation: function successWithoutAnimation() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      left: 0;\n      width: 100%;\n    "])));
+  },
+  errorWithoutAnimation: function errorWithoutAnimation() {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      left: 40%;\n      width: 20%;\n    "])));
+  }
+});
+var moveToRightAnimation = keyframes(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  0% {\n    left: 0;\n    width: 100%;\n  }\n  50% {\n    left: 50%;\n    width: 50%;\n  }\n  100% {\n    left: 99%;\n    width: 1%\n  }\n"])));
+var spinnerAnimation = keyframes(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  0% {\n    transform: translateX(50%) scaleX(.005);\n    animation-timing-function: cubic-bezier(.895,.03,.685,.22);\n  }\n  50% {\n    transform: translateX(0) scaleX(.35);\n    animation-timing-function: cubic-bezier(.165,.84,.44,1);\n  }\n  100% {\n    transform: translateX(-50%) scaleX(.005);\n  }\n"])));
+var linearProgressAnimation = keyframes(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  from { width: 0; }\n  to { width: 80% }\n"])));
+var slowProgressAnimation = keyframes(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  from { width: 80%; }\n  to { width: 90% }\n"])));
+export var animations = {
+  successAnimation: function successAnimation(delayBeforeHide, width, left) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      animation: successAnimation;\n      animation-duration: ", "ms;\n      @keyframes successAnimation {\n        0% {\n          width: ", "px;\n          left: ", "px;\n          opacity: 1;\n        }\n        20% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        80% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        100% {\n          width: 100%;\n          opacity: 0;\n        }\n      }\n    "])), delayBeforeHide, width, left);
+  },
+  errorAnimation: function errorAnimation(t) {
+    var transitionDuration = parseInt(t.globalLoaderTransitionToSpinnerDuration);
+    var spinnerAnimationDuration = parseInt(t.globalLoaderSpinnerAnimationDuration);
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      left: 0;\n      width: 100%;\n      animation:\n        ", " ", "ms linear,\n        ", "ms ", " ", "ms infinite alternate;\n    "])), moveToRightAnimation, transitionDuration, spinnerAnimationDuration, spinnerAnimation, transitionDuration);
+  },
+  standardAnimation: function standardAnimation(t, expectedTime) {
+    var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      width: 90%;\n      animation:\n        ", " ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n        ", "ms ", " ", "ms linear;\n    "])), linearProgressAnimation, expectedTime, slowProgressAnimationTime, slowProgressAnimation, expectedTime);
+  },
+  acceptAnimation: function acceptAnimation(t, startWidth, expectedTime, width, left) {
+    var transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);
+    var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      width: 90%;\n      animation:\n        transitionAnimation ", "ms linear,\n        ", "ms acceptAnimation ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n        ", "ms ", " ", "ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ", "px;\n          left: ", "px;\n        }\n        to {\n          width: ", "px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ", "px;\n        }\n        to {\n          width: 80%;\n        }\n      }\n    "])), transitionTime, expectedTime, transitionTime, slowProgressAnimationTime, slowProgressAnimation, expectedTime + transitionTime, width, left, startWidth, startWidth);
+  },
+  slowAcceptAnimation: function slowAcceptAnimation(t, startWidth, width, left) {
+    var transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);
+    var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      width: 90%;\n      animation:\n        transitionAnimation ", "ms linear,\n        ", "ms acceptAnimation ", "ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ", "px;\n          left: ", "px;\n        }\n        to {\n          width: ", "px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ", "px;\n        }\n        to {\n          width: 90%;\n        }\n      }\n    "])), transitionTime, slowProgressAnimationTime, transitionTime, width, left, startWidth, startWidth);
+  },
+  acceptWithoutAnimation: function acceptWithoutAnimation(startWidth) {
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      width: ", "px;\n    "])), startWidth);
+  }
 };

package/components/GlobalLoader/GlobalLoaderView.styles/GlobalLoaderView.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","getStyles","emotion","outer","t","css","_templateObject","_taggedTemplateLiteralLoose","globalLoaderWidth","globalLoaderHeight","globalLoaderBackgroundColor","globalLoaderPosition","globalLoaderLeft","globalLoaderTop","globalLoaderRight","globalLoaderBottom","inner","_templateObject2","globalLoaderColor","standardWithoutAnimation","_templateObject3","successWithoutAnimation","_templateObject4","errorWithoutAnimation","_templateObject5","moveToRightAnimation","keyframes","_templateObject6","spinnerAnimation","_templateObject7","linearProgressAnimation","_templateObject8","slowProgressAnimation","_templateObject9","getAnimations","successAnimation","delayBeforeHide","width","left","_templateObject10","errorAnimation","transitionDuration","parseInt","globalLoaderTransitionToSpinnerDuration","spinnerAnimationDuration","globalLoaderSpinnerAnimationDuration","_templateObject11","standardAnimation","expectedTime","slowProgressAnimationTime","globalLoaderSlowAnimationDuration","_templateObject12","acceptAnimation","startWidth","transitionTime","globalLoaderTransitionFromSpinnerDuration","_templateObject13","slowAcceptAnimation","_templateObject14","acceptWithoutAnimation","_templateObject15"],"sources":["GlobalLoaderView.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    outer(t: Theme) {\n      return emotion.css`\n        width: ${t.globalLoaderWidth};\n        height: ${t.globalLoaderHeight};\n        background-color: ${t.globalLoaderBackgroundColor};\n        position: ${t.globalLoaderPosition};\n        left: ${t.globalLoaderLeft};\n        top: ${t.globalLoaderTop};\n        right: ${t.globalLoaderRight};\n        bottom: ${t.globalLoaderBottom};\n        overflow: hidden;\n      `;\n    },\n    inner(t: Theme) {\n      return emotion.css`\n        background-color: ${t.globalLoaderColor};\n        width: 0;\n        height: ${t.globalLoaderHeight};\n        position: absolute;\n        left: 0;\n        overflow: hidden;\n      `;\n    },\n    standardWithoutAnimation() {\n      return emotion.css`\n        left: 0;\n        width: 90%;\n      `;\n    },\n    successWithoutAnimation() {\n      return emotion.css`\n        left: 0;\n        width: 100%;\n      `;\n    },\n    errorWithoutAnimation() {\n      return emotion.css`\n        left: 40%;\n        width: 20%;\n      `;\n    },\n  });\n\nconst moveToRightAnimation = (emotion: Emotion) => emotion.keyframes`\n  0% {\n    left: 0;\n    width: 100%;\n  }\n  50% {\n    left: 50%;\n    width: 50%;\n  }\n  100% {\n    left: 99%;\n    width: 1%\n  }\n`;\nconst spinnerAnimation = (emotion: Emotion) => emotion.keyframes`\n  0% {\n    transform: translateX(50%) scaleX(.005);\n    animation-timing-function: cubic-bezier(.895,.03,.685,.22);\n  }\n  50% {\n    transform: translateX(0) scaleX(.35);\n    animation-timing-function: cubic-bezier(.165,.84,.44,1);\n  }\n  100% {\n    transform: translateX(-50%) scaleX(.005);\n  }\n`;\nconst linearProgressAnimation = (emotion: Emotion) => emotion.keyframes`\n  from { width: 0; }\n  to { width: 80% }\n`;\nconst slowProgressAnimation = (emotion: Emotion) => emotion.keyframes`\n  from { width: 80%; }\n  to { width: 90% }\n`;\n\nexport const getAnimations = (emotion: Emotion) => ({\n  successAnimation(delayBeforeHide: number, width: number, left: number) {\n    return emotion.css`\n      animation: successAnimation;\n      animation-duration: ${delayBeforeHide}ms;\n      @keyframes successAnimation {\n        0% {\n          width: ${width}px;\n          left: ${left}px;\n          opacity: 1;\n        }\n        20% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        80% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        100% {\n          width: 100%;\n          opacity: 0;\n        }\n      }\n    `;\n  },\n  errorAnimation(t: Theme) {\n    const transitionDuration = parseInt(t.globalLoaderTransitionToSpinnerDuration);\n    const spinnerAnimationDuration = parseInt(t.globalLoaderSpinnerAnimationDuration);\n\n    return emotion.css`\n      left: 0;\n      width: 100%;\n      animation:\n        ${moveToRightAnimation(emotion)} ${transitionDuration}ms linear,\n        ${spinnerAnimationDuration}ms ${spinnerAnimation(emotion)} ${transitionDuration}ms infinite alternate;\n    `;\n  },\n  standardAnimation(t: Theme, expectedTime: number) {\n    const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n    return emotion.css`\n      width: 90%;\n      animation:\n        ${linearProgressAnimation(emotion)} ${expectedTime}ms cubic-bezier(0, 0.4, 0.4, 1),\n        ${slowProgressAnimationTime}ms ${slowProgressAnimation(emotion)} ${expectedTime}ms linear;\n    `;\n  },\n  acceptAnimation(t: Theme, startWidth: number, expectedTime: number, width: number, left: number) {\n    const transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);\n    const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n    return emotion.css`\n      width: 90%;\n      animation:\n        transitionAnimation ${transitionTime}ms linear,\n        ${expectedTime}ms acceptAnimation ${transitionTime}ms cubic-bezier(0, 0.4, 0.4, 1),\n        ${slowProgressAnimationTime}ms ${slowProgressAnimation(emotion)} ${expectedTime + transitionTime}ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ${width}px;\n          left: ${left}px;\n        }\n        to {\n          width: ${startWidth}px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ${startWidth}px;\n        }\n        to {\n          width: 80%;\n        }\n      }\n    `;\n  },\n  slowAcceptAnimation(t: Theme, startWidth: number, width: number, left: number) {\n    const transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);\n    const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n    return emotion.css`\n      width: 90%;\n      animation:\n        transitionAnimation ${transitionTime}ms linear,\n        ${slowProgressAnimationTime}ms acceptAnimation ${transitionTime}ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ${width}px;\n          left: ${left}px;\n        }\n        to {\n          width: ${startWidth}px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ${startWidth}px;\n        }\n        to {\n          width: 90%;\n        }\n      }\n    `;\n  },\n  acceptWithoutAnimation(startWidth: number) {\n    return emotion.css`\n      width: ${startWidth}px;\n    `;\n  },\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","keyframes","styles","outer","t","_templateObject","_taggedTemplateLiteralLoose","globalLoaderWidth","globalLoaderHeight","globalLoaderBackgroundColor","globalLoaderPosition","globalLoaderLeft","globalLoaderTop","globalLoaderRight","globalLoaderBottom","inner","_templateObject2","globalLoaderColor","standardWithoutAnimation","_templateObject3","successWithoutAnimation","_templateObject4","errorWithoutAnimation","_templateObject5","moveToRightAnimation","_templateObject6","spinnerAnimation","_templateObject7","linearProgressAnimation","_templateObject8","slowProgressAnimation","_templateObject9","animations","successAnimation","delayBeforeHide","width","left","_templateObject10","errorAnimation","transitionDuration","parseInt","globalLoaderTransitionToSpinnerDuration","spinnerAnimationDuration","globalLoaderSpinnerAnimationDuration","_templateObject11","standardAnimation","expectedTime","slowProgressAnimationTime","globalLoaderSlowAnimationDuration","_templateObject12","acceptAnimation","startWidth","transitionTime","globalLoaderTransitionFromSpinnerDuration","_templateObject13","slowAcceptAnimation","_templateObject14","acceptWithoutAnimation","_templateObject15"],"sources":["GlobalLoaderView.styles.ts"],"sourcesContent":["import { css, memoizeStyle, keyframes } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  outer(t: Theme) {\n    return css`\n      width: ${t.globalLoaderWidth};\n      height: ${t.globalLoaderHeight};\n      background-color: ${t.globalLoaderBackgroundColor};\n      position: ${t.globalLoaderPosition};\n      left: ${t.globalLoaderLeft};\n      top: ${t.globalLoaderTop};\n      right: ${t.globalLoaderRight};\n      bottom: ${t.globalLoaderBottom};\n      overflow: hidden;\n    `;\n  },\n  inner(t: Theme) {\n    return css`\n      background-color: ${t.globalLoaderColor};\n      width: 0;\n      height: ${t.globalLoaderHeight};\n      position: absolute;\n      left: 0;\n      overflow: hidden;\n    `;\n  },\n  standardWithoutAnimation() {\n    return css`\n      left: 0;\n      width: 90%;\n    `;\n  },\n  successWithoutAnimation() {\n    return css`\n      left: 0;\n      width: 100%;\n    `;\n  },\n  errorWithoutAnimation() {\n    return css`\n      left: 40%;\n      width: 20%;\n    `;\n  },\n});\n\nconst moveToRightAnimation = keyframes`\n  0% {\n    left: 0;\n    width: 100%;\n  }\n  50% {\n    left: 50%;\n    width: 50%;\n  }\n  100% {\n    left: 99%;\n    width: 1%\n  }\n`;\nconst spinnerAnimation = keyframes`\n  0% {\n    transform: translateX(50%) scaleX(.005);\n    animation-timing-function: cubic-bezier(.895,.03,.685,.22);\n  }\n  50% {\n    transform: translateX(0) scaleX(.35);\n    animation-timing-function: cubic-bezier(.165,.84,.44,1);\n  }\n  100% {\n    transform: translateX(-50%) scaleX(.005);\n  }\n`;\nconst linearProgressAnimation = keyframes`\n  from { width: 0; }\n  to { width: 80% }\n`;\nconst slowProgressAnimation = keyframes`\n  from { width: 80%; }\n  to { width: 90% }\n`;\n\nexport const animations = {\n  successAnimation(delayBeforeHide: number, width: number, left: number) {\n    return css`\n      animation: successAnimation;\n      animation-duration: ${delayBeforeHide}ms;\n      @keyframes successAnimation {\n        0% {\n          width: ${width}px;\n          left: ${left}px;\n          opacity: 1;\n        }\n        20% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        80% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        100% {\n          width: 100%;\n          opacity: 0;\n        }\n      }\n    `;\n  },\n  errorAnimation(t: Theme) {\n    const transitionDuration = parseInt(t.globalLoaderTransitionToSpinnerDuration);\n    const spinnerAnimationDuration = parseInt(t.globalLoaderSpinnerAnimationDuration);\n\n    return css`\n      left: 0;\n      width: 100%;\n      animation:\n        ${moveToRightAnimation} ${transitionDuration}ms linear,\n        ${spinnerAnimationDuration}ms ${spinnerAnimation} ${transitionDuration}ms infinite alternate;\n    `;\n  },\n  standardAnimation(t: Theme, expectedTime: number) {\n    const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n    return css`\n      width: 90%;\n      animation:\n        ${linearProgressAnimation} ${expectedTime}ms cubic-bezier(0, 0.4, 0.4, 1),\n        ${slowProgressAnimationTime}ms ${slowProgressAnimation} ${expectedTime}ms linear;\n    `;\n  },\n  acceptAnimation(t: Theme, startWidth: number, expectedTime: number, width: number, left: number) {\n    const transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);\n    const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n    return css`\n      width: 90%;\n      animation:\n        transitionAnimation ${transitionTime}ms linear,\n        ${expectedTime}ms acceptAnimation ${transitionTime}ms cubic-bezier(0, 0.4, 0.4, 1),\n        ${slowProgressAnimationTime}ms ${slowProgressAnimation} ${expectedTime + transitionTime}ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ${width}px;\n          left: ${left}px;\n        }\n        to {\n          width: ${startWidth}px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ${startWidth}px;\n        }\n        to {\n          width: 80%;\n        }\n      }\n    `;\n  },\n  slowAcceptAnimation(t: Theme, startWidth: number, width: number, left: number) {\n    const transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);\n    const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n    return css`\n      width: 90%;\n      animation:\n        transitionAnimation ${transitionTime}ms linear,\n        ${slowProgressAnimationTime}ms acceptAnimation ${transitionTime}ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ${width}px;\n          left: ${left}px;\n        }\n        to {\n          width: ${startWidth}px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ${startWidth}px;\n        }\n        to {\n          width: 90%;\n        }\n      }\n    `;\n  },\n  acceptWithoutAnimation(startWidth: number) {\n    return css`\n      width: ${startWidth}px;\n    `;\n  },\n};\n"],"mappings":"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","ignoreList":[]}

package/components/GlobalLoader/GlobalLoaderView.styles.d.ts

@@ -1,13 +1,12 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import type { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     outer(t: Theme): string;
     inner(t: Theme): string;
     standardWithoutAnimation(): string;
     successWithoutAnimation(): string;
     errorWithoutAnimation(): string;
 };
-export declare const getAnimations: (emotion: Emotion) => {
+export declare const animations: {
     successAnimation(delayBeforeHide: number, width: number, left: number): string;
     errorAnimation(t: Theme): string;
     standardAnimation(t: Theme, expectedTime: number): string;

package/components/Group/Group/Group.js

@@ -2,13 +2,13 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 var _class, _Group;
 import React from 'react';
-import { RenderEnvironmentContext } from "../../../lib/theming/RenderEnvironmentContext";
 import { isIE11, isEdge } from "../../../lib/client";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { isButton, isAutocomplete, isCurrencyInput, isDropdown, isDropdownMenu, isFxInput, isInput, isPasswordInput, isSelect, isTooltip, isHint } from "../../../lib/utils";
 import { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from "../../../lib/featureFlagsContext";
-import { getStyles } from "../Group.styles";
+import { styles } from "../Group.styles";
 var getFirstChild = function getFirstChild(children) {
   if (!Array.isArray(children)) {
     return children;
@@ -71,15 +71,15 @@ export var Group = rootNode(_class = (_Group = /*#__PURE__*/function (_React$Com
     }
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.renderChild = function (child, isFirstChild, isLastChild, isWidthInPercent) {
-      var _this$cx, _this$cx2;
+      var _cx, _cx2;
       return /*#__PURE__*/(
 
         React.createElement("div", {
-          className: _this.cx((_this$cx = {}, _this$cx[_this.styles.fixed()] = !isWidthInPercent, _this$cx[_this.styles.stretch()] = isWidthInPercent, _this$cx[_this.styles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (isIE11 || isEdge)), _this$cx))
+          className: cx((_cx = {}, _cx[styles.fixed()] = !isWidthInPercent, _cx[styles.stretch()] = isWidthInPercent, _cx[styles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (isIE11 || isEdge)), _cx))
         }, /*#__PURE__*/
 
         React.createElement("div", {
-          className: _this.cx((_this$cx2 = {}, _this$cx2[_this.styles.item()] = true, _this$cx2[_this.styles.itemFirst()] = isFirstChild, _this$cx2))
+          className: cx((_cx2 = {}, _cx2[styles.item()] = true, _cx2[styles.itemFirst()] = isFirstChild, _cx2))
         }, tryPassCorners(child, isFirstChild, isLastChild)))
       );
     };
@@ -97,33 +97,28 @@ export var Group = rootNode(_class = (_Group = /*#__PURE__*/function (_React$Com
     var lastChild = getLastChild(childrenArray);
     return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
       _this2.featureFlags = getFullReactUIFlagsContext(flags);
-      return /*#__PURE__*/React.createElement(RenderEnvironmentContext.Consumer, null, function (_ref) {
-        var emotion = _ref.emotion;
-        _this2.cx = emotion.cx;
-        _this2.styles = getStyles(emotion);
-        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-          rootNodeRef: _this2.setRootNode
-        }, _this2.props), /*#__PURE__*/React.createElement("span", {
-          "data-tid": GroupDataTids.root,
-          className: _this2.styles.root(),
-          style: style
-        }, React.Children.map(childrenArray, function (child) {
-          if (!child || ! /*#__PURE__*/React.isValidElement(child)) {
-            return null;
-          }
-          var isFirstChild = child === firstChild;
-          var isLastChild = child === lastChild;
-          if (_this2.featureFlags.groupAddHintAndTooltipSupport && (isHint(child) || isTooltip(child))) {
-            return _this2.renderWrappedChildren(child, isFirstChild, isLastChild);
-          }
-          return _this2.renderChild(child, isFirstChild, isLastChild, hasWidthInPercent(child));
-        })));
-      });
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this2.setRootNode
+      }, _this2.props), /*#__PURE__*/React.createElement("span", {
+        "data-tid": GroupDataTids.root,
+        className: styles.root(),
+        style: style
+      }, React.Children.map(childrenArray, function (child) {
+        if (!child || ! /*#__PURE__*/React.isValidElement(child)) {
+          return null;
+        }
+        var isFirstChild = child === firstChild;
+        var isLastChild = child === lastChild;
+        if (_this2.featureFlags.groupAddHintAndTooltipSupport && (isHint(child) || isTooltip(child))) {
+          return _this2.renderWrappedChildren(child, isFirstChild, isLastChild);
+        }
+        return _this2.renderChild(child, isFirstChild, isLastChild, hasWidthInPercent(child));
+      })));
     });
   };
   _proto.renderWrappedChildren = function renderWrappedChildren(parent, isParentFirst, isParentLast) {
     var _this3 = this,
-      _this$cx3;
+      _cx3;
     var shouldStretchParent = false;
     var nestedChildren = React.Children.toArray(parent.props.children);
     var modifiedChildren = nestedChildren.map(function (nestedChild, index) {
@@ -139,7 +134,7 @@ export var Group = rootNode(_class = (_Group = /*#__PURE__*/function (_React$Com
     });
     var wrappedChildren = /*#__PURE__*/
     React.createElement("div", {
-      className: this.cx(this.styles.wrappedChildren(), (_this$cx3 = {}, _this$cx3[this.styles.stretch()] = shouldStretchParent, _this$cx3))
+      className: cx(styles.wrappedChildren(), (_cx3 = {}, _cx3[styles.stretch()] = shouldStretchParent, _cx3))
     }, modifiedChildren);
     return /*#__PURE__*/React.cloneElement(parent, {
       children: wrappedChildren

package/components/Group/Group/Group.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","RenderEnvironmentContext","isIE11","isEdge","CommonWrapper","rootNode","isButton","isAutocomplete","isCurrencyInput","isDropdown","isDropdownMenu","isFxInput","isInput","isPasswordInput","isSelect","isTooltip","isHint","getFullReactUIFlagsContext","ReactUIFeatureFlagsContext","getStyles","getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","Children","count","getButtonCorners","isFirstChild","isLastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","tryPassCorners","child","corners","cloneElement","_extends","props","hasWidthInPercent","String","width","includes","GroupDataTids","root","Group","_class","_Group","_React$Component","_this","_len","arguments","length","args","_key","call","apply","concat","renderChild","isWidthInPercent","_this$cx","_this$cx2","createElement","className","cx","styles","fixed","stretch","stretchFallback","Boolean","item","itemFirst","_inheritsLoose","_proto","prototype","render","_this2","style","childrenArray","toArray","firstChild","lastChild","Consumer","flags","featureFlags","_ref","emotion","rootNodeRef","setRootNode","map","isValidElement","groupAddHintAndTooltipSupport","renderWrappedChildren","parent","isParentFirst","isParentLast","_this3","_this$cx3","shouldStretchParent","nestedChildren","modifiedChildren","nestedChild","index","wrappedChildren","Component","__KONTUR_REACT_UI__","displayName"],"sources":["Group.tsx"],"sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { RenderEnvironmentContext } from '../../lib/theming/RenderEnvironmentContext';\nimport { isIE11, isEdge } from '../../lib/client';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport {\n  isButton,\n  isAutocomplete,\n  isCurrencyInput,\n  isDropdown,\n  isDropdownMenu,\n  isFxInput,\n  isInput,\n  isPasswordInput,\n  isSelect,\n  isTooltip,\n  isHint,\n} from '../../lib/utils';\nimport type { ReactUIFeatureFlags } from '../../lib/featureFlagsContext';\nimport { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from '../../lib/featureFlagsContext';\n\nimport { getStyles } from './Group.styles';\n\nexport interface GroupProps extends CommonProps {\n  /** Задает длину компонента Group. */\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps extends CommonProps {\n  width?: React.CSSProperties['width'];\n  corners?: number;\n}\n\nconst getFirstChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  return children?.[0] as React.ReactNode;\n};\n\nconst getLastChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  const numberOfChildren = React.Children.count(children);\n\n  return children?.[numberOfChildren - 1] as React.ReactNode;\n};\n\nexport const getButtonCorners = (isFirstChild: boolean, isLastChild: boolean): React.CSSProperties => {\n  if (isFirstChild && isLastChild) {\n    return {};\n  }\n\n  if (isFirstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (isLastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst tryPassCorners = (child: React.ReactNode, isFirstChild: boolean, isLastChild: boolean) => {\n  const corners = getButtonCorners(isFirstChild, isLastChild);\n\n  if (\n    isButton(child) ||\n    isInput(child) ||\n    isFxInput(child) ||\n    isAutocomplete(child) ||\n    isPasswordInput(child) ||\n    isCurrencyInput(child) ||\n    isSelect(child) ||\n    isDropdown(child) ||\n    isDropdownMenu(child)\n  ) {\n    return React.cloneElement<(typeof child)['props']>(child, { corners: { ...corners, ...child.props.corners } });\n  }\n\n  return child;\n};\n\nconst hasWidthInPercent = (child: React.ReactElement<GroupChildProps>) => String(child.props.width).includes('%');\n\nexport const GroupDataTids = {\n  root: 'Group__root',\n} as const;\n\n/**\n *  Компонент `Group` используется для создания логически сгруппированных элементов, выровненных по горизонтали.\n *\n *  Длина контейнера настраивается с помощью пропа `width`.\n */\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  public static displayName = 'Group';\n\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private featureFlags!: ReactUIFeatureFlags;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n\n  public render() {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    const childrenArray = React.Children.toArray(this.props.children);\n    const firstChild = getFirstChild(childrenArray);\n    const lastChild = getLastChild(childrenArray);\n\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          this.featureFlags = getFullReactUIFlagsContext(flags);\n          return (\n            <RenderEnvironmentContext.Consumer>\n              {({ emotion }) => {\n                this.cx = emotion.cx;\n                this.styles = getStyles(emotion);\n\n                return (\n                  <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n                    <span data-tid={GroupDataTids.root} className={this.styles.root()} style={style}>\n                      {React.Children.map(childrenArray, (child) => {\n                        if (!child || !React.isValidElement<GroupChildProps>(child)) {\n                          return null;\n                        }\n\n                        const isFirstChild = child === firstChild;\n                        const isLastChild = child === lastChild;\n\n                        if (this.featureFlags.groupAddHintAndTooltipSupport && (isHint(child) || isTooltip(child))) {\n                          return this.renderWrappedChildren(child, isFirstChild, isLastChild);\n                        }\n\n                        return this.renderChild(child, isFirstChild, isLastChild, hasWidthInPercent(child));\n                      })}\n                    </span>\n                  </CommonWrapper>\n                );\n              }}\n            </RenderEnvironmentContext.Consumer>\n          );\n        }}\n      </ReactUIFeatureFlagsContext.Consumer>\n    );\n  }\n\n  private renderChild = (\n    child: React.ReactNode,\n    isFirstChild: boolean,\n    isLastChild: boolean,\n    isWidthInPercent: boolean,\n  ) => (\n    <div\n      className={this.cx({\n        [this.styles.fixed()]: !isWidthInPercent,\n        [this.styles.stretch()]: isWidthInPercent,\n        [this.styles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\n      })}\n    >\n      <div\n        className={this.cx({\n          [this.styles.item()]: true,\n          [this.styles.itemFirst()]: isFirstChild,\n        })}\n      >\n        {tryPassCorners(child, isFirstChild, isLastChild)}\n      </div>\n    </div>\n  );\n\n  private renderWrappedChildren(\n    parent: React.ReactElement<GroupChildProps>,\n    isParentFirst: boolean,\n    isParentLast: boolean,\n  ): React.ReactNode {\n    let shouldStretchParent = false;\n    const nestedChildren = React.Children.toArray(parent.props.children);\n\n    const modifiedChildren = nestedChildren.map((nestedChild, index) => {\n      if (!nestedChild || !React.isValidElement<GroupChildProps>(nestedChild)) {\n        return null;\n      }\n\n      const isFirstChild = isParentFirst && index === 0;\n      const isLastChild = isParentLast && index === nestedChildren.length - 1;\n      if (hasWidthInPercent(nestedChild)) {\n        shouldStretchParent = true;\n      }\n\n      return this.renderChild(nestedChild, isFirstChild, isLastChild, hasWidthInPercent(nestedChild));\n    });\n\n    const wrappedChildren = (\n      <div className={this.cx(this.styles.wrappedChildren(), { [this.styles.stretch()]: shouldStretchParent })}>\n        {modifiedChildren}\n      </div>\n    );\n\n    return React.cloneElement<GroupChildProps>(parent, {\n      children: wrappedChildren,\n    });\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","isIE11","isEdge","CommonWrapper","cx","rootNode","isButton","isAutocomplete","isCurrencyInput","isDropdown","isDropdownMenu","isFxInput","isInput","isPasswordInput","isSelect","isTooltip","isHint","getFullReactUIFlagsContext","ReactUIFeatureFlagsContext","styles","getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","Children","count","getButtonCorners","isFirstChild","isLastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","tryPassCorners","child","corners","cloneElement","_extends","props","hasWidthInPercent","String","width","includes","GroupDataTids","root","Group","_class","_Group","_React$Component","_this","_len","arguments","length","args","_key","call","apply","concat","renderChild","isWidthInPercent","_cx","_cx2","createElement","className","fixed","stretch","stretchFallback","Boolean","item","itemFirst","_inheritsLoose","_proto","prototype","render","_this2","style","childrenArray","toArray","firstChild","lastChild","Consumer","flags","featureFlags","rootNodeRef","setRootNode","map","isValidElement","groupAddHintAndTooltipSupport","renderWrappedChildren","parent","isParentFirst","isParentLast","_this3","_cx3","shouldStretchParent","nestedChildren","modifiedChildren","nestedChild","index","wrappedChildren","Component","__KONTUR_REACT_UI__","displayName"],"sources":["Group.tsx"],"sourcesContent":["import React from 'react';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport {\n  isButton,\n  isAutocomplete,\n  isCurrencyInput,\n  isDropdown,\n  isDropdownMenu,\n  isFxInput,\n  isInput,\n  isPasswordInput,\n  isSelect,\n  isTooltip,\n  isHint,\n} from '../../lib/utils';\nimport type { ReactUIFeatureFlags } from '../../lib/featureFlagsContext';\nimport { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from '../../lib/featureFlagsContext';\n\nimport { styles } from './Group.styles';\n\nexport interface GroupProps extends CommonProps {\n  /** Задает длину компонента Group. */\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps extends CommonProps {\n  width?: React.CSSProperties['width'];\n  corners?: number;\n}\n\nconst getFirstChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  return children?.[0] as React.ReactNode;\n};\n\nconst getLastChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  const numberOfChildren = React.Children.count(children);\n\n  return children?.[numberOfChildren - 1] as React.ReactNode;\n};\n\nexport const getButtonCorners = (isFirstChild: boolean, isLastChild: boolean): React.CSSProperties => {\n  if (isFirstChild && isLastChild) {\n    return {};\n  }\n\n  if (isFirstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (isLastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst tryPassCorners = (child: React.ReactNode, isFirstChild: boolean, isLastChild: boolean) => {\n  const corners = getButtonCorners(isFirstChild, isLastChild);\n\n  if (\n    isButton(child) ||\n    isInput(child) ||\n    isFxInput(child) ||\n    isAutocomplete(child) ||\n    isPasswordInput(child) ||\n    isCurrencyInput(child) ||\n    isSelect(child) ||\n    isDropdown(child) ||\n    isDropdownMenu(child)\n  ) {\n    return React.cloneElement<(typeof child)['props']>(child, { corners: { ...corners, ...child.props.corners } });\n  }\n\n  return child;\n};\n\nconst hasWidthInPercent = (child: React.ReactElement<GroupChildProps>) => String(child.props.width).includes('%');\n\nexport const GroupDataTids = {\n  root: 'Group__root',\n} as const;\n\n/**\n *  Компонент `Group` используется для создания логически сгруппированных элементов, выровненных по горизонтали.\n *\n *  Длина контейнера настраивается с помощью пропа `width`.\n */\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  public static displayName = 'Group';\n\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private featureFlags!: ReactUIFeatureFlags;\n\n  public render() {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    const childrenArray = React.Children.toArray(this.props.children);\n    const firstChild = getFirstChild(childrenArray);\n    const lastChild = getLastChild(childrenArray);\n\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          this.featureFlags = getFullReactUIFlagsContext(flags);\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              <span data-tid={GroupDataTids.root} className={styles.root()} style={style}>\n                {React.Children.map(childrenArray, (child) => {\n                  if (!child || !React.isValidElement<GroupChildProps>(child)) {\n                    return null;\n                  }\n\n                  const isFirstChild = child === firstChild;\n                  const isLastChild = child === lastChild;\n\n                  if (this.featureFlags.groupAddHintAndTooltipSupport && (isHint(child) || isTooltip(child))) {\n                    return this.renderWrappedChildren(child, isFirstChild, isLastChild);\n                  }\n\n                  return this.renderChild(child, isFirstChild, isLastChild, hasWidthInPercent(child));\n                })}\n              </span>\n            </CommonWrapper>\n          );\n        }}\n      </ReactUIFeatureFlagsContext.Consumer>\n    );\n  }\n\n  private renderChild = (\n    child: React.ReactNode,\n    isFirstChild: boolean,\n    isLastChild: boolean,\n    isWidthInPercent: boolean,\n  ) => (\n    <div\n      className={cx({\n        [styles.fixed()]: !isWidthInPercent,\n        [styles.stretch()]: isWidthInPercent,\n        [styles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\n      })}\n    >\n      <div\n        className={cx({\n          [styles.item()]: true,\n          [styles.itemFirst()]: isFirstChild,\n        })}\n      >\n        {tryPassCorners(child, isFirstChild, isLastChild)}\n      </div>\n    </div>\n  );\n\n  private renderWrappedChildren(\n    parent: React.ReactElement<GroupChildProps>,\n    isParentFirst: boolean,\n    isParentLast: boolean,\n  ): React.ReactNode {\n    let shouldStretchParent = false;\n    const nestedChildren = React.Children.toArray(parent.props.children);\n\n    const modifiedChildren = nestedChildren.map((nestedChild, index) => {\n      if (!nestedChild || !React.isValidElement<GroupChildProps>(nestedChild)) {\n        return null;\n      }\n\n      const isFirstChild = isParentFirst && index === 0;\n      const isLastChild = isParentLast && index === nestedChildren.length - 1;\n      if (hasWidthInPercent(nestedChild)) {\n        shouldStretchParent = true;\n      }\n\n      return this.renderChild(nestedChild, isFirstChild, isLastChild, hasWidthInPercent(nestedChild));\n    });\n\n    const wrappedChildren = (\n      <div className={cx(styles.wrappedChildren(), { [styles.stretch()]: shouldStretchParent })}>\n        {modifiedChildren}\n      </div>\n    );\n\n    return React.cloneElement<GroupChildProps>(parent, {\n      children: wrappedChildren,\n    });\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/Group/Group.d.ts

@@ -20,8 +20,6 @@ export declare class Group extends React.Component<GroupProps> {
     getRootNode: TGetRootNode;
     private setRootNode;
     private featureFlags;
-    private cx;
-    private styles;
     render(): React.JSX.Element;
     private renderChild;
     private renderWrappedChildren;

package/components/Group/Group.md

@@ -0,0 +1,19 @@
+### Базовый пример
+```jsx harmony
+import { MathFunctionIcon16Regular } from '@skbkontur/icons/icons/MathFunctionIcon/MathFunctionIcon16Regular';
+import { SearchLoupeIcon16Regular } from '@skbkontur/icons/icons/SearchLoupeIcon/SearchLoupeIcon16Regular';
+import { Button, Input } from '@skbkontur/react-ui';
+
+const [value, setValue] = React.useState('Foo');
+
+<Group width={300}>
+  <Button>
+    <MathFunctionIcon16Regular />
+  </Button>
+  <Input value={value} width="100%" onValueChange={setValue} />
+  <Button>
+    <SearchLoupeIcon16Regular />
+  </Button>
+  <Button>Bar</Button>
+</Group>;
+```

package/components/Group/Group.styles/Group.styles.js

@@ -1,28 +1,26 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-import { memoizeStyle } from "../../../lib/theming/Emotion";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    root: function root() {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        display: inline-flex;\n        line-height: normal;\n      "])));
-    },
-    wrappedChildren: function wrappedChildren() {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        display: flex;\n      "])));
-    },
-    fixed: function fixed() {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        flex-shrink: 0;\n        display: inline-block;\n      "])));
-    },
-    stretch: function stretch() {
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        flex-grow: 1;\n        flex-shrink: 1;\n      "])));
-    },
-    stretchFallback: function stretchFallback() {
-      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        flex-basis: 100%;\n      "])));
-    },
-    item: function item() {
-      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        margin-left: -1px;\n      "])));
-    },
-    itemFirst: function itemFirst() {
-      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        margin-left: 0;\n      "])));
-    }
-  });
-};
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  root: function root() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      line-height: normal;\n    "])));
+  },
+  wrappedChildren: function wrappedChildren() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      display: flex;\n    "])));
+  },
+  fixed: function fixed() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      flex-shrink: 0;\n      display: inline-block;\n    "])));
+  },
+  stretch: function stretch() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      flex-grow: 1;\n      flex-shrink: 1;\n    "])));
+  },
+  stretchFallback: function stretchFallback() {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      flex-basis: 100%;\n    "])));
+  },
+  item: function item() {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      margin-left: -1px;\n    "])));
+  },
+  itemFirst: function itemFirst() {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      margin-left: 0;\n    "])));
+  }
+});

package/components/Group/Group.styles/Group.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","getStyles","emotion","root","css","_templateObject","_taggedTemplateLiteralLoose","wrappedChildren","_templateObject2","fixed","_templateObject3","stretch","_templateObject4","stretchFallback","_templateObject5","item","_templateObject6","itemFirst","_templateObject7"],"sources":["Group.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.css`\n        display: inline-flex;\n        line-height: normal;\n      `;\n    },\n\n    wrappedChildren() {\n      return emotion.css`\n        display: flex;\n      `;\n    },\n\n    fixed() {\n      return emotion.css`\n        flex-shrink: 0;\n        display: inline-block;\n      `;\n    },\n\n    stretch() {\n      return emotion.css`\n        flex-grow: 1;\n        flex-shrink: 1;\n      `;\n    },\n\n    stretchFallback() {\n      return emotion.css`\n        flex-basis: 100%;\n      `;\n    },\n\n    item() {\n      return emotion.css`\n        margin-left: -1px;\n      `;\n    },\n\n    itemFirst() {\n      return emotion.css`\n        margin-left: 0;\n      `;\n    },\n  });\n"],"mappings":";;AAEA,SAASA,YAAY,QAAQ,2BAA2B;;AAExD,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,OAAgB;IACxCF,YAAY,CAAC;MACXG,IAAI,WAAAA,KAAA,EAAG;QACL,OAAOD,OAAO,CAACE,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;MAIpB,CAAC;;MAEDC,eAAe,WAAAA,gBAAA,EAAG;QAChB,OAAOL,OAAO,CAACE,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;MAGpB,CAAC;;MAEDG,KAAK,WAAAA,MAAA,EAAG;QACN,OAAOP,OAAO,CAACE,GAAG,CAAAM,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;;MAIpB,CAAC;;MAEDK,OAAO,WAAAA,QAAA,EAAG;QACR,OAAOT,OAAO,CAACE,GAAG,CAAAQ,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;;MAIpB,CAAC;;MAEDO,eAAe,WAAAA,gBAAA,EAAG;QAChB,OAAOX,OAAO,CAACE,GAAG,CAAAU,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;;;MAGpB,CAAC;;MAEDS,IAAI,WAAAA,KAAA,EAAG;QACL,OAAOb,OAAO,CAACE,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;;;MAGpB,CAAC;;MAEDW,SAAS,WAAAA,UAAA,EAAG;QACV,OAAOf,OAAO,CAACE,GAAG,CAAAc,gBAAA,KAAAA,gBAAA,GAAAZ,2BAAA;;;MAGpB;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","root","_templateObject","_taggedTemplateLiteralLoose","wrappedChildren","_templateObject2","fixed","_templateObject3","stretch","_templateObject4","stretchFallback","_templateObject5","item","_templateObject6","itemFirst","_templateObject7"],"sources":["Group.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      display: inline-flex;\n      line-height: normal;\n    `;\n  },\n\n  wrappedChildren() {\n    return css`\n      display: flex;\n    `;\n  },\n\n  fixed() {\n    return css`\n      flex-shrink: 0;\n      display: inline-block;\n    `;\n  },\n\n  stretch() {\n    return css`\n      flex-grow: 1;\n      flex-shrink: 1;\n    `;\n  },\n\n  stretchFallback() {\n    return css`\n      flex-basis: 100%;\n    `;\n  },\n\n  item() {\n    return css`\n      margin-left: -1px;\n    `;\n  },\n\n  itemFirst() {\n    return css`\n      margin-left: 0;\n    `;\n  },\n});\n"],"mappings":"gOAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;EAIZ,CAAC;;EAEDC,eAAe,WAAAA,gBAAA,EAAG;IAChB,OAAON,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;EAGZ,CAAC;;EAEDG,KAAK,WAAAA,MAAA,EAAG;IACN,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;;EAIZ,CAAC;;EAEDK,OAAO,WAAAA,QAAA,EAAG;IACR,OAAOV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;;EAIZ,CAAC;;EAEDO,eAAe,WAAAA,gBAAA,EAAG;IAChB,OAAOZ,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;;;EAGZ,CAAC;;EAEDS,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOd,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;;;EAGZ,CAAC;;EAEDW,SAAS,WAAAA,UAAA,EAAG;IACV,OAAOhB,GAAG,CAAAiB,gBAAA,KAAAA,gBAAA,GAAAZ,2BAAA;;;EAGZ;AACF,CAAC,CAAC","ignoreList":[]}

package/components/Group/Group.styles.d.ts

@@ -1,5 +1,4 @@
-import type { Emotion } from '@emotion/css/create-instance';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(): string;
     wrappedChildren(): string;
     fixed(): string;

package/components/Hint/Hint/Hint.js

@@ -2,15 +2,16 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _Hint;
 import React from 'react';
-import { RenderEnvironmentContext } from "../../../lib/theming/RenderEnvironmentContext";
+import { globalObject } from '@skbkontur/global-object';
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
 import { DUMMY_LOCATION, Popup } from "../../../internal/Popup";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
-import { getStyles } from "../Hint.styles";
+import { styles } from "../Hint.styles";
 var HINT_BORDER_COLOR = 'transparent';
 
 /**
@@ -41,7 +42,7 @@ export var Hint = rootNode(_class = (_Hint = /*#__PURE__*/function (_React$PureC
     };
     _this.handleMouseEnter = function (e) {
       if (!_this.getProps().manual && !_this.timer) {
-        _this.timer = setTimeout(_this.open, 400);
+        _this.timer = globalObject.setTimeout(_this.open, 400);
       }
       if (_this.props.onMouseEnter) {
         _this.props.onMouseEnter(e);
@@ -49,7 +50,7 @@ export var Hint = rootNode(_class = (_Hint = /*#__PURE__*/function (_React$PureC
     };
     _this.handleMouseLeave = function (e) {
       if (!_this.getProps().manual && _this.timer) {
-        clearTimeout(_this.timer);
+        globalObject.clearTimeout(_this.timer);
         _this.timer = null;
         _this.setState({
           opened: false
@@ -79,7 +80,7 @@ export var Hint = rootNode(_class = (_Hint = /*#__PURE__*/function (_React$PureC
       return;
     }
     if (this.timer) {
-      clearTimeout(this.timer);
+      globalObject.clearTimeout(this.timer);
       this.timer = null;
     }
     if (opened !== prevProps.opened) {
@@ -90,26 +91,21 @@ export var Hint = rootNode(_class = (_Hint = /*#__PURE__*/function (_React$PureC
   };
   _proto.componentWillUnmount = function componentWillUnmount() {
     if (this.timer) {
-      clearTimeout(this.timer);
+      globalObject.clearTimeout(this.timer);
       this.timer = null;
     }
   };
   _proto.render = function render() {
     var _this2 = this;
-    return /*#__PURE__*/React.createElement(RenderEnvironmentContext.Consumer, null, function (_ref) {
-      var emotion = _ref.emotion;
-      _this2.cx = emotion.cx;
-      _this2.styles = getStyles(emotion);
-      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-        _this2.theme = theme;
-        return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-          value: ThemeFactory.create({
-            popupMargin: theme.hintMargin,
-            popupBorder: theme.hintBorder,
-            popupBorderRadius: theme.hintBorderRadius
-          }, _this2.theme)
-        }, _this2.renderMain());
-      });
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+        value: ThemeFactory.create({
+          popupMargin: theme.hintMargin,
+          popupBorder: theme.hintBorder,
+          popupBorderRadius: theme.hintBorderRadius
+        }, _this2.theme)
+      }, _this2.renderMain());
     });
   };
   _proto.renderMain = function renderMain() {
@@ -141,14 +137,14 @@ export var Hint = rootNode(_class = (_Hint = /*#__PURE__*/function (_React$PureC
     }, this.renderContent()));
   };
   _proto.renderContent = function renderContent() {
-    var _this$cx;
+    var _cx;
     if (!this.props.text) {
       return null;
     }
     var _this$getProps3 = this.getProps(),
       maxWidth = _this$getProps3.maxWidth;
     var centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];
-    var className = this.cx((_this$cx = {}, _this$cx[this.styles.content(this.theme)] = true, _this$cx[this.styles.contentCenter(this.theme)] = centerAlignPositions.includes(this.state.position), _this$cx));
+    var className = cx((_cx = {}, _cx[styles.content(this.theme)] = true, _cx[styles.contentCenter(this.theme)] = centerAlignPositions.includes(this.state.position), _cx));
     return /*#__PURE__*/React.createElement("div", {
       className: className,
       style: {