@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

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

@@ -1,52 +1,55 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = exports.animations = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = exports.getAnimations = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 
-var styles = (0, _Emotion.memoizeStyle)({
-  outer: function outer(t) {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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);
 
+var getStyles = function getStyles(emotion) {return (
+    (0, _Emotion.memoizeStyle)({
+      outer: function outer(t) {
+        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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 (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background-color: ", ";\n      width: 0;\n      height: ", ";\n      position: absolute;\n      left: 0;\n      overflow: hidden;\n    "])),
-    t.globalLoaderColor,
 
-    t.globalLoaderHeight);
+      },
+      inner: function inner(t) {
+        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\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 (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      left: 0;\n      width: 90%;\n    "])));
 
+      },
+      standardWithoutAnimation: function standardWithoutAnimation() {
+        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        left: 0;\n        width: 90%;\n      "])));
 
 
-  },
-  successWithoutAnimation: function successWithoutAnimation() {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      left: 0;\n      width: 100%;\n    "])));
 
+      },
+      successWithoutAnimation: function successWithoutAnimation() {
+        return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        left: 0;\n        width: 100%;\n      "])));
 
 
-  },
-  errorWithoutAnimation: function errorWithoutAnimation() {
-    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      left: 40%;\n      width: 20%;\n    "])));
 
+      },
+      errorWithoutAnimation: function errorWithoutAnimation() {
+        return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        left: 40%;\n        width: 20%;\n      "])));
 
 
-  } });exports.styles = styles;
 
+      } }));};exports.getStyles = getStyles;
 
-var moveToRightAnimation = (0, _Emotion.keyframes)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\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 getAnimations = function getAnimations(emotion) {
+  var moveToRightAnimation = emotion.keyframes(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\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"])));
 
 
 
@@ -59,8 +62,8 @@ var moveToRightAnimation = (0, _Emotion.keyframes)(_templateObject6 || (_templat
 
 
 
-var spinnerAnimation = (0, _Emotion.keyframes)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\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 spinnerAnimation = emotion.keyframes(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\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"])));
 
 
 
@@ -72,25 +75,25 @@ var spinnerAnimation = (0, _Emotion.keyframes)(_templateObject7 || (_templateObj
 
 
 
-var linearProgressAnimation = (0, _Emotion.keyframes)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n  from { width: 0; }\n  to { width: 80% }\n"])));
 
+  var linearProgressAnimation = emotion.keyframes(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n  from { width: 0; }\n  to { width: 80% }\n"])));
 
 
-var slowProgressAnimation = (0, _Emotion.keyframes)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n  from { width: 80%; }\n  to { width: 90% }\n"])));
 
+  var slowProgressAnimation = emotion.keyframes(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n  from { width: 80%; }\n  to { width: 90% }\n"])));
 
 
 
-var animations = {
-  successAnimation: function successAnimation(delayBeforeHide, width, left) {
-    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\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,
+  return {
+    successAnimation: function successAnimation(delayBeforeHide, width, left) {
+      return emotion.css(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\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);
 
+      width,
+      left);
 
 
 
@@ -108,83 +111,86 @@ var animations = {
 
 
 
-  },
-  errorAnimation: function errorAnimation(t) {
-    var transitionDuration = parseInt(t.globalLoaderTransitionToSpinnerDuration);
-    var spinnerAnimationDuration = parseInt(t.globalLoaderSpinnerAnimationDuration);
 
-    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      left: 0;\n      width: 100%;\n      animation: ", " ", "ms linear,\n        ", "ms ", " ", "ms infinite alternate;\n    "])),
+    },
+    errorAnimation: function errorAnimation(t) {
+      var transitionDuration = parseInt(t.globalLoaderTransitionToSpinnerDuration);
+      var spinnerAnimationDuration = parseInt(t.globalLoaderSpinnerAnimationDuration);
 
+      return emotion.css(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n        left: 0;\n        width: 100%;\n        animation: ", " ", "ms linear,\n          ", "ms ", " ", "ms infinite alternate;\n      "])),
 
-    moveToRightAnimation, transitionDuration,
-    spinnerAnimationDuration, spinnerAnimation, transitionDuration);
 
-  },
-  standardAnimation: function standardAnimation(t, expectedTime) {
-    var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
-    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 90%;\n      animation: ", " ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n        ", "ms ", " ", "ms linear;\n    "])),
+      moveToRightAnimation, transitionDuration,
+      spinnerAnimationDuration, spinnerAnimation, transitionDuration);
 
-    linearProgressAnimation, expectedTime,
-    slowProgressAnimationTime, slowProgressAnimation, expectedTime);
+    },
+    standardAnimation: function standardAnimation(t, expectedTime) {
+      var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
+      return emotion.css(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n        width: 90%;\n        animation: ", " ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n          ", "ms ", " ", "ms linear;\n      "])),
 
-  },
-  acceptAnimation: function acceptAnimation(t, startWidth, expectedTime, width, left) {
-    var transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);
-    var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
-    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 90%;\n      animation: 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    "])),
+      linearProgressAnimation, expectedTime,
+      slowProgressAnimationTime, slowProgressAnimation, expectedTime);
 
-    transitionTime,
-    expectedTime, transitionTime,
-    slowProgressAnimationTime, slowProgressAnimation, expectedTime + transitionTime,
+    },
+    acceptAnimation: function acceptAnimation(t, startWidth, expectedTime, width, left) {
+      var transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);
+      var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
+      return emotion.css(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n        width: 90%;\n        animation: 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,
 
+      width,
+      left,
 
-    startWidth,
 
+      startWidth,
 
 
 
 
-    startWidth);
 
+      startWidth);
 
 
 
 
 
-  },
-  slowAcceptAnimation: function slowAcceptAnimation(t, startWidth, width, left) {
-    var transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);
-    var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
-    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 90%;\n      animation: 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,
+    },
+    slowAcceptAnimation: function slowAcceptAnimation(t, startWidth, width, left) {
+      var transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);
+      var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
+      return emotion.css(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n        width: 90%;\n        animation: 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,
 
+      width,
+      left,
 
-    startWidth,
 
+      startWidth,
 
 
 
 
-    startWidth);
 
+      startWidth);
 
 
 
 
 
-  },
-  acceptWithoutAnimation: function acceptWithoutAnimation(startWidth) {
-    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", "px;\n    "])),
-    startWidth);
 
-  } };exports.animations = animations;
+    },
+    acceptWithoutAnimation: function acceptWithoutAnimation(startWidth) {
+      return emotion.css(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n        width: ", "px;\n      "])),
+      startWidth);
+
+    } };
+
+};exports.getAnimations = getAnimations;

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

@@ -1 +1 @@
-{"version":3,"sources":["GlobalLoaderView.styles.ts"],"names":["styles","outer","t","css","globalLoaderWidth","globalLoaderHeight","globalLoaderBackgroundColor","globalLoaderPosition","globalLoaderLeft","globalLoaderTop","globalLoaderRight","globalLoaderBottom","inner","globalLoaderColor","standardWithoutAnimation","successWithoutAnimation","errorWithoutAnimation","moveToRightAnimation","keyframes","spinnerAnimation","linearProgressAnimation","slowProgressAnimation","animations","successAnimation","delayBeforeHide","width","left","errorAnimation","transitionDuration","parseInt","globalLoaderTransitionToSpinnerDuration","spinnerAnimationDuration","globalLoaderSpinnerAnimationDuration","standardAnimation","expectedTime","slowProgressAnimationTime","globalLoaderSlowAnimationDuration","acceptAnimation","startWidth","transitionTime","globalLoaderTransitionFromSpinnerDuration","slowAcceptAnimation","acceptWithoutAnimation"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, keyframes } from '../../lib/theming/Emotion';\nimport { 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: ${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: ${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: 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: 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"]}
+{"version":3,"sources":["GlobalLoaderView.styles.ts"],"names":["getStyles","emotion","outer","t","css","globalLoaderWidth","globalLoaderHeight","globalLoaderBackgroundColor","globalLoaderPosition","globalLoaderLeft","globalLoaderTop","globalLoaderRight","globalLoaderBottom","inner","globalLoaderColor","standardWithoutAnimation","successWithoutAnimation","errorWithoutAnimation","getAnimations","moveToRightAnimation","keyframes","spinnerAnimation","linearProgressAnimation","slowProgressAnimation","successAnimation","delayBeforeHide","width","left","errorAnimation","transitionDuration","parseInt","globalLoaderTransitionToSpinnerDuration","spinnerAnimationDuration","globalLoaderSpinnerAnimationDuration","standardAnimation","expectedTime","slowProgressAnimationTime","globalLoaderSlowAnimationDuration","acceptAnimation","startWidth","transitionTime","globalLoaderTransitionFromSpinnerDuration","slowAcceptAnimation","acceptWithoutAnimation"],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { 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\nexport const getAnimations = (emotion: Emotion) => {\n  const moveToRightAnimation = 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`;\n  const spinnerAnimation = 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`;\n  const linearProgressAnimation = emotion.keyframes`\n  from { width: 0; }\n  to { width: 80% }\n`;\n  const slowProgressAnimation = emotion.keyframes`\n  from { width: 80%; }\n  to { width: 90% }\n`;\n\n  return {\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: ${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 emotion.css`\n        width: 90%;\n        animation: ${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 emotion.css`\n        width: 90%;\n        animation: 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 emotion.css`\n        width: 90%;\n        animation: 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};\n"]}

package/cjs/components/Group/Group.d.ts

@@ -10,8 +10,10 @@ export declare const GroupDataTids: {
 };
 export declare class Group extends React.Component<GroupProps> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     private setRootNode;
     private theme;
+    private emotion;
     static propTypes: {
         width: PropTypes.Requireable<string | number>;
     };

package/cjs/components/Group/Group.js

@@ -1,16 +1,16 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.getButtonCorners = exports.GroupDataTids = exports.Group = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getButtonCorners = exports.GroupDataTids = exports.Group = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+
 var _client = require("../../lib/client");
 var _Button = require("../Button");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
 var _utils = require("../../lib/utils");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
-var _Clickable = require("../Clickable");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _Group = require("./Group.styles");var _class, _class2, _temp;
 
@@ -65,10 +65,6 @@ var getButtonCorners = function getButtonCorners(isFirstChild, isLastChild) {
 
 };exports.getButtonCorners = getButtonCorners;
 
-var passCorners = function passCorners(child, corners) {
-  return /*#__PURE__*/_react.default.cloneElement(child, { corners: (0, _extends2.default)({}, corners, child.props.corners) });
-};
-
 var passCornersIfButton = function passCornersIfButton(
 child,
 firstChild,
@@ -76,8 +72,11 @@ lastChild,
 isInputLikeToo)
 {if (isInputLikeToo === void 0) {isInputLikeToo = false;}
   var corners = getButtonCorners(child === firstChild, child === lastChild);
-  if ((0, _Button.isButton)(child) || (0, _Clickable.isClickable)(child) || isInputLikeToo && (0, _utils.isInputLike)(child)) {
-    return passCorners(child, corners);
+  if ((0, _Button.isButton)(child)) {
+    return /*#__PURE__*/_react.default.cloneElement(child, { corners: (0, _extends2.default)({}, corners, child.props.corners) });
+  }
+  if (isInputLikeToo && (0, _utils.isInputLike)(child)) {
+    return /*#__PURE__*/_react.default.cloneElement(child, { corners: (0, _extends2.default)({}, corners, child.props.corners) });
   }
 
   return child;
@@ -97,12 +96,22 @@ Group = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
 
+
+
+
   render = function render() {var _this = this;
     return /*#__PURE__*/(
-      _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null,
-      function (theme) {
-        _this.theme = theme;
-        return _this.renderMain();
+      _react.default.createElement(_Emotion.EmotionConsumer, null,
+      function (emotion) {
+        _this.emotion = emotion;
+        return /*#__PURE__*/(
+          _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null,
+          function (theme) {
+            _this.theme = theme;
+            return _this.renderMain();
+          }));
+
+
       }));
 
 
@@ -116,11 +125,12 @@ Group = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
     var childrenArray = _react.default.Children.toArray(this.props.children);
     var firstChild = getFirstChild(childrenArray);
     var lastChild = getLastChild(childrenArray);
+    var styles = (0, _Group.getStyles)(this.emotion);
 
     return /*#__PURE__*/(
       _react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/
-      _react.default.createElement("span", { "data-tid": GroupDataTids.root, className: _Group.styles.root(), style: style },
-      _react.default.Children.map(childrenArray, function (child) {var _cx, _cx2;
+      _react.default.createElement("span", { "data-tid": GroupDataTids.root, className: styles.root(), style: style },
+      _react.default.Children.map(childrenArray, function (child) {var _this2$emotion$cx, _this2$emotion$cx2;
         if (!child || ! /*#__PURE__*/_react.default.isValidElement(child)) {
           return null;
         }
@@ -133,16 +143,16 @@ Group = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
         return /*#__PURE__*/(
           _react.default.createElement("div", {
-            className: (0, _Emotion.cx)((_cx = {}, _cx[
-            _Group.styles.fixed()] = !isWidthInPercent, _cx[
-            _Group.styles.stretch()] = isWidthInPercent, _cx[
-            _Group.styles.stretchFallback()] = Boolean(isWidthInPercent && _this2.props.width && (_client.isIE11 || _client.isEdge)), _cx)) }, /*#__PURE__*/
+            className: _this2.emotion.cx((_this2$emotion$cx = {}, _this2$emotion$cx[
+            styles.fixed()] = !isWidthInPercent, _this2$emotion$cx[
+            styles.stretch()] = isWidthInPercent, _this2$emotion$cx[
+            styles.stretchFallback()] = Boolean(isWidthInPercent && _this2.props.width && (_client.isIE11 || _client.isEdge)), _this2$emotion$cx)) }, /*#__PURE__*/
 
 
           _react.default.createElement("div", {
-            className: (0, _Emotion.cx)((_cx2 = {}, _cx2[
-            _Group.styles.item()] = true, _cx2[
-            _Group.styles.itemFirst()] = isFirstChild, _cx2)) },
+            className: _this2.emotion.cx((_this2$emotion$cx2 = {}, _this2$emotion$cx2[
+            styles.item()] = true, _this2$emotion$cx2[
+            styles.itemFirst()] = isFirstChild, _this2$emotion$cx2)) },
 
 
           modifiedChild)));
@@ -153,4 +163,4 @@ Group = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
 
-  };return Group;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Group', _class2.propTypes = { width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]) }, _temp)) || _class;exports.Group = Group;
+  };return Group;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Group', _class2.displayName = 'Group', _class2.propTypes = { width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]) }, _temp)) || _class;exports.Group = Group;

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

@@ -1 +1 @@
-{"version":3,"sources":["Group.tsx"],"names":["getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","React","Children","count","getButtonCorners","isFirstChild","isLastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","passCorners","child","corners","cloneElement","props","passCornersIfButton","firstChild","lastChild","isInputLikeToo","GroupDataTids","root","Group","rootNode","render","theme","renderMain","style","width","childrenArray","toArray","setRootNode","styles","map","isValidElement","isWidthInPercent","Boolean","toString","includes","modifiedChild","fixed","stretch","stretchFallback","isIE11","isEdge","item","itemFirst","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","oneOfType","number","string"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport { isButton } from '../Button';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isInputLike } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { isClickable } from '../Clickable';\n\nimport { styles } from './Group.styles';\n\nexport interface GroupProps extends CommonProps {\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps {\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 passCorners = (child: React.ReactElement, corners: React.CSSProperties) => {\n  return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n};\n\nconst passCornersIfButton = (\n  child: React.ReactNode,\n  firstChild: React.ReactNode,\n  lastChild: React.ReactNode,\n  isInputLikeToo = false,\n) => {\n  const corners = getButtonCorners(child === firstChild, child === lastChild);\n  if (isButton(child) || isClickable(child) || (isInputLikeToo && isInputLike(child))) {\n    return passCorners(child, corners);\n  }\n\n  return child;\n};\n\nexport const GroupDataTids = {\n  root: 'Group__root',\n} as const;\n\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\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      <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 isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\n\n            const modifiedChild = passCornersIfButton(child, firstChild, lastChild, isTheme2022(this.theme));\n\n            const isFirstChild = child === firstChild;\n\n            return (\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                  {modifiedChild}\n                </div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["Group.tsx"],"names":["getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","React","Children","count","getButtonCorners","isFirstChild","isLastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","passCornersIfButton","child","firstChild","lastChild","isInputLikeToo","corners","cloneElement","props","GroupDataTids","root","Group","rootNode","render","emotion","theme","renderMain","style","width","childrenArray","toArray","styles","setRootNode","map","isValidElement","isWidthInPercent","Boolean","toString","includes","modifiedChild","cx","fixed","stretch","stretchFallback","isIE11","isEdge","item","itemFirst","Component","__KONTUR_REACT_UI__","displayName","propTypes","PropTypes","oneOfType","number","string"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { isEdge, isIE11 } from '../../lib/client';\nimport { isButton } from '../Button';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isInputLike } from '../../lib/utils';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './Group.styles';\n\nexport interface GroupProps extends CommonProps {\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps {\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 passCornersIfButton = (\n  child: React.ReactNode,\n  firstChild: React.ReactNode,\n  lastChild: React.ReactNode,\n  isInputLikeToo = false,\n) => {\n  const corners = getButtonCorners(child === firstChild, child === lastChild);\n  if (isButton(child)) {\n    return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n  }\n  if (isInputLikeToo && isInputLike(child)) {\n    return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n  }\n\n  return child;\n};\n\nexport const GroupDataTids = {\n  root: 'Group__root',\n} as const;\n\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  public static displayName = 'Group';\n\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n  private emotion!: Emotion;\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  public renderMain() {\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    const styles = getStyles(this.emotion);\n\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 isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\n\n            const modifiedChild = passCornersIfButton(child, firstChild, lastChild, isTheme2022(this.theme));\n\n            const isFirstChild = child === firstChild;\n\n            return (\n              <div\n                className={this.emotion.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={this.emotion.cx({\n                    [styles.item()]: true,\n                    [styles.itemFirst()]: isFirstChild,\n                  })}\n                >\n                  {modifiedChild}\n                </div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"]}

package/cjs/components/Group/Group.md

@@ -1,5 +1,3 @@
-Контрол `<Group>` умеет работать как с `<Button>`...
-
 ```jsx harmony
 import FunctionIcon from '@skbkontur/react-icons/Function';
 import SearchIcon from '@skbkontur/react-icons/Search';
@@ -18,25 +16,3 @@ const [value, setValue] = React.useState('Foo');
   <Button>Bar</Button>
 </Group>;
 ```
-
-...так и с `<Clickable>`
-
-```jsx harmony
-import FunctionIcon from '@skbkontur/react-icons/Function';
-import SearchIcon from '@skbkontur/react-icons/Search';
-import { Clickable, Input } from '@skbkontur/react-ui';
-
-
-const [value, setValue] = React.useState('Foo');
-
-<Group width={300}>
-  <Clickable>
-    <FunctionIcon />
-  </Clickable>
-  <Input value={value} width="100%" onValueChange={setValue} />
-  <Clickable>
-    <SearchIcon />
-  </Clickable>
-  <Clickable>Bar</Clickable>
-</Group>
-```

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

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

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

@@ -1,41 +1,44 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 
-var styles = (0, _Emotion.memoizeStyle)({
-  root: function root() {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n      line-height: normal;\n    "])));
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
+var getStyles = function getStyles(emotion) {return (
+    (0, _Emotion.memoizeStyle)({
+      root: function root() {
+        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n        display: inline-flex;\n        line-height: normal;\n      "])));
 
 
-  },
 
-  fixed: function fixed() {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-shrink: 0;\n      display: inline-block;\n    "])));
+      },
 
+      fixed: function fixed() {
+        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        flex-shrink: 0;\n        display: inline-block;\n      "])));
 
 
-  },
 
-  stretch: function stretch() {
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-grow: 1;\n      flex-shrink: 1;\n    "])));
+      },
 
+      stretch: function stretch() {
+        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        flex-grow: 1;\n        flex-shrink: 1;\n      "])));
 
 
-  },
 
-  stretchFallback: function stretchFallback() {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-basis: 100%;\n    "])));
+      },
 
+      stretchFallback: function stretchFallback() {
+        return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        flex-basis: 100%;\n      "])));
 
-  },
 
-  item: function item() {
-    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: -1px;\n    "])));
+      },
 
+      item: function item() {
+        return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        margin-left: -1px;\n      "])));
 
-  },
 
-  itemFirst: function itemFirst() {
-    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: 0;\n    "])));
+      },
 
+      itemFirst: function itemFirst() {
+        return emotion.css(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n        margin-left: 0;\n      "])));
 
-  } });exports.styles = styles;
+
+      } }));};exports.getStyles = getStyles;

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

@@ -1 +1 @@
-{"version":3,"sources":["Group.styles.ts"],"names":["styles","root","css","fixed","stretch","stretchFallback","item","itemFirst"],"mappings":"4QAAA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;;AAID,GANgC;;AAQjCC,EAAAA,KARiC,mBAQzB;AACN,eAAOD,YAAP;;;;AAID,GAbgC;;AAejCE,EAAAA,OAfiC,qBAevB;AACR,eAAOF,YAAP;;;;AAID,GApBgC;;AAsBjCG,EAAAA,eAtBiC,6BAsBf;AAChB,eAAOH,YAAP;;;AAGD,GA1BgC;;AA4BjCI,EAAAA,IA5BiC,kBA4B1B;AACL,eAAOJ,YAAP;;;AAGD,GAhCgC;;AAkCjCK,EAAAA,SAlCiC,uBAkCrB;AACV,eAAOL,YAAP;;;AAGD,GAtCgC,EAAb,CAAf,C","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  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"]}
+{"version":3,"sources":["Group.styles.ts"],"names":["getStyles","emotion","root","css","fixed","stretch","stretchFallback","item","itemFirst"],"mappings":";;AAEA,oD;;AAEO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvB,+BAAa;AACXC,MAAAA,IADW,kBACJ;AACL,eAAOD,OAAO,CAACE,GAAf;;;;AAID,OANU;;AAQXC,MAAAA,KARW,mBAQH;AACN,eAAOH,OAAO,CAACE,GAAf;;;;AAID,OAbU;;AAeXE,MAAAA,OAfW,qBAeD;AACR,eAAOJ,OAAO,CAACE,GAAf;;;;AAID,OApBU;;AAsBXG,MAAAA,eAtBW,6BAsBO;AAChB,eAAOL,OAAO,CAACE,GAAf;;;AAGD,OA1BU;;AA4BXI,MAAAA,IA5BW,kBA4BJ;AACL,eAAON,OAAO,CAACE,GAAf;;;AAGD,OAhCU;;AAkCXK,MAAAA,SAlCW,uBAkCC;AACV,eAAOP,OAAO,CAACE,GAAf;;;AAGD,OAtCU,EAAb,CADuB,GAAlB,C","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    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"]}