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

package/cjs/components/GlobalLoader/GlobalLoader.md

@@ -0,0 +1,97 @@
+Индикатор обмена данными с сервером.
+
+Глобальный Лоадер может быть только один в приложении. Поэтому, каждый новый экземпляр компонента
+"убивает" предыдущий
+экземпляр, и начинает перехватывать статические методы.
+
+Предполагается монтирование компонента в единственном месте. И управление им через статические методы, либо через пропы.
+
+### Все статические методы
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Button onClick={GlobalLoader.start} use="primary">start</Button>
+  <Button onClick={GlobalLoader.done} use="success">done</Button>
+  <Button onClick={GlobalLoader.reject} use="danger">reject</Button>
+  <Button onClick={GlobalLoader.accept} use="pay">accept</Button>
+</Gapped>
+```
+
+### Монтирование и кастомизация
+```jsx harmony
+import { Button, Toggle, Gapped, GlobalLoader, ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
+
+const myTheme = ThemeFactory.create({ globalLoaderColor: 'red' });
+
+const [manually, setManually] = React.useState(false);
+const [active, setActive] = React.useState(false);
+const [error, setError] = React.useState(false);
+
+const reset = () => {
+  if (manually) {
+    setManually(false);
+    setError(false);
+    setActive(false);
+  } else {
+    setManually(true);
+  }
+}
+
+<Gapped vertical>
+  <Toggle checked={manually} onValueChange={reset}>
+    Управление пропами
+  </Toggle>
+  <Toggle checked={active} onValueChange={setActive} disabled={!manually}>
+    <code>active</code>
+  </Toggle>
+  <Toggle checked={error} onValueChange={setError} disabled={!manually}>
+    <code>rejected</code>
+  </Toggle>
+
+  <ThemeContext.Provider value={myTheme}>
+    <GlobalLoader expectedResponseTime={2000} delayBeforeShow={1000} active={active} rejected={error}
+      onStart={() => console.log('start')}
+      onDone={() => console.log('done')}
+      onReject={() => console.log('reject')}
+      onAccept={() => console.log('accept')}
+    />
+  </ThemeContext.Provider>
+
+</Gapped>
+```
+
+
+### Статические методы в модалке
+```jsx harmony
+import { Button, Gapped, Modal } from '@skbkontur/react-ui';
+
+const [opened, setOpened] = React.useState(false);
+
+function renderModal() {
+  return (
+    <Modal onClose={close}>
+      <Modal.Header>Заголовок</Modal.Header>
+      <Modal.Body>
+        <Gapped>
+          <Button onClick={GlobalLoader.start} use="primary">start</Button>
+          <Button onClick={GlobalLoader.done} use="success">done</Button>
+        </Gapped>
+      </Modal.Body>
+    </Modal>
+  );
+}
+
+function open() {
+  setOpened(true);
+}
+
+function close() {
+  setOpened(false);
+}
+
+<div>
+  {opened && renderModal()}
+  <Button onClick={open}>Открыть</Button>
+</div>;
+```

package/cjs/components/GlobalLoader/GlobalLoaderView.js

@@ -1,6 +1,6 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.GlobalLoaderView = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
 
-var _RenderEnvironmentContext = require("../../lib/theming/RenderEnvironmentContext");
+var _Emotion = require("../../lib/theming/Emotion");
 var _ZIndex = require("../../internal/ZIndex");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
@@ -37,10 +37,6 @@ var GlobalLoaderView = exports.GlobalLoaderView = function GlobalLoaderView(_ref
 {var expectedResponseTime = _ref.expectedResponseTime,delayBeforeHide = _ref.delayBeforeHide,status = _ref.status,disableAnimations = _ref.disableAnimations,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   var ref = (0, _react.useRef)(null);
   var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
-  var emotion = (0, _RenderEnvironmentContext.useEmotion)();
-  var cx = emotion.cx;
-  var styles = (0, _GlobalLoaderView.getStyles)(emotion);
-  var animations = (0, _GlobalLoaderView.getAnimations)(emotion);
   var _useGlobalLoaderWidth = (0, _useParams.useGlobalLoaderWidth)(status, ref),width = _useGlobalLoaderWidth.width,startWidth = _useGlobalLoaderWidth.startWidth,fullWidth = _useGlobalLoaderWidth.fullWidth;
   var _useGlobalLoaderPosit = (0, _useParams.useGlobalLoaderPosition)(ref),left = _useGlobalLoaderPosit.left;
 
@@ -48,37 +44,37 @@ var GlobalLoaderView = exports.GlobalLoaderView = function GlobalLoaderView(_ref
     if (!disableAnimations) {
       switch (status) {
         case 'success':
-          return animations.successAnimation(delayBeforeHide, width, left);
+          return _GlobalLoaderView.animations.successAnimation(delayBeforeHide, width, left);
         case 'accept':
           if (startWidth < fullWidth * 0.8) {
-            return animations.acceptAnimation(theme, startWidth, expectedResponseTime, width, left);
+            return _GlobalLoaderView.animations.acceptAnimation(theme, startWidth, expectedResponseTime, width, left);
           }
-          return animations.slowAcceptAnimation(theme, startWidth, width, left);
+          return _GlobalLoaderView.animations.slowAcceptAnimation(theme, startWidth, width, left);
         case 'error':
-          return animations.errorAnimation(theme);
+          return _GlobalLoaderView.animations.errorAnimation(theme);
         case 'standard':
-          return animations.standardAnimation(theme, expectedResponseTime);
+          return _GlobalLoaderView.animations.standardAnimation(theme, expectedResponseTime);
       }
     }
 
     if (disableAnimations) {
       switch (status) {
         case 'success':
-          return styles.successWithoutAnimation();
+          return _GlobalLoaderView.styles.successWithoutAnimation();
         case 'accept':
-          return animations.acceptWithoutAnimation(startWidth);
+          return _GlobalLoaderView.animations.acceptWithoutAnimation(startWidth);
         case 'error':
-          return styles.errorWithoutAnimation();
+          return _GlobalLoaderView.styles.errorWithoutAnimation();
         case 'standard':
-          return styles.standardWithoutAnimation();
+          return _GlobalLoaderView.styles.standardWithoutAnimation();
       }
     }
   };
 
   return /*#__PURE__*/(
     _react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({}, rest, { "data-status": status }), /*#__PURE__*/
-    _react.default.createElement(_ZIndex.ZIndex, { priority: "GlobalLoader", className: styles.outer(theme) }, /*#__PURE__*/
-    _react.default.createElement("div", { ref: ref, className: cx(styles.inner(theme), getAnimationClass(status)) })
+    _react.default.createElement(_ZIndex.ZIndex, { priority: "GlobalLoader", className: _GlobalLoaderView.styles.outer(theme) }, /*#__PURE__*/
+    _react.default.createElement("div", { ref: ref, className: (0, _Emotion.cx)(_GlobalLoaderView.styles.inner(theme), getAnimationClass(status)) })
     )
     ));
 

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_RenderEnvironmentContext","_ZIndex","_ThemeContext","_CommonWrapper","_GlobalLoaderView","_useParams","_excluded","GlobalLoaderView","exports","_ref","expectedResponseTime","delayBeforeHide","status","disableAnimations","rest","_objectWithoutPropertiesLoose2","default","ref","useRef","theme","useContext","ThemeContext","emotion","useEmotion","cx","styles","getStyles","animations","getAnimations","_useGlobalLoaderWidth","useGlobalLoaderWidth","width","startWidth","fullWidth","_useGlobalLoaderPosit","useGlobalLoaderPosition","left","getAnimationClass","successAnimation","acceptAnimation","slowAcceptAnimation","errorAnimation","standardAnimation","successWithoutAnimation","acceptWithoutAnimation","errorWithoutAnimation","standardWithoutAnimation","createElement","CommonWrapper","_extends2","ZIndex","priority","className","outer","inner"],"sources":["GlobalLoaderView.tsx"],"sourcesContent":["import React, { useContext, useRef } from 'react';\n\nimport { useEmotion } from '../../lib/theming/RenderEnvironmentContext';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { getAnimations, getStyles } from './GlobalLoaderView.styles';\nimport { useGlobalLoaderPosition, useGlobalLoaderWidth } from './useParams';\n\nexport interface GlobalLoaderViewProps extends Pick<CommonProps, 'data-tid'> {\n  /** Устанавливает ожидаемое время(ms) ответа сервера. */\n  expectedResponseTime: number;\n\n  /** Устанавливает задержку в миллисекундах до исчезновения лоадера. */\n  delayBeforeHide: number;\n\n  /** Устанавливает статус операции. */\n  status?: 'success' | 'error' | 'standard' | 'accept';\n\n  /** Отключает анимацию. */\n  disableAnimations: boolean;\n}\n\nexport interface GlobalLoaderViewRef {\n  element: HTMLDivElement;\n  refObject: React.RefObject<GlobalLoaderViewRef['element']>;\n}\n\nexport const GlobalLoaderView = ({\n  expectedResponseTime,\n  delayBeforeHide,\n  status,\n  disableAnimations,\n  ...rest\n}: GlobalLoaderViewProps) => {\n  const ref = useRef<GlobalLoaderViewRef['element']>(null);\n  const theme = useContext(ThemeContext);\n  const emotion = useEmotion();\n  const { cx } = emotion;\n  const styles = getStyles(emotion);\n  const animations = getAnimations(emotion);\n  const { width, startWidth, fullWidth } = useGlobalLoaderWidth(status, ref);\n  const { left } = useGlobalLoaderPosition(ref);\n\n  const getAnimationClass = (status: GlobalLoaderViewProps['status']) => {\n    if (!disableAnimations) {\n      switch (status) {\n        case 'success':\n          return animations.successAnimation(delayBeforeHide, width, left);\n        case 'accept':\n          if (startWidth < fullWidth * 0.8) {\n            return animations.acceptAnimation(theme, startWidth, expectedResponseTime, width, left);\n          }\n          return animations.slowAcceptAnimation(theme, startWidth, width, left);\n        case 'error':\n          return animations.errorAnimation(theme);\n        case 'standard':\n          return animations.standardAnimation(theme, expectedResponseTime);\n      }\n    }\n\n    if (disableAnimations) {\n      switch (status) {\n        case 'success':\n          return styles.successWithoutAnimation();\n        case 'accept':\n          return animations.acceptWithoutAnimation(startWidth);\n        case 'error':\n          return styles.errorWithoutAnimation();\n        case 'standard':\n          return styles.standardWithoutAnimation();\n      }\n    }\n  };\n\n  return (\n    <CommonWrapper {...rest} data-status={status}>\n      <ZIndex priority=\"GlobalLoader\" className={styles.outer(theme)}>\n        <div ref={ref} className={cx(styles.inner(theme), getAnimationClass(status))} />\n      </ZIndex>\n    </CommonWrapper>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_Emotion","_ZIndex","_ThemeContext","_CommonWrapper","_GlobalLoaderView","_useParams","_excluded","GlobalLoaderView","exports","_ref","expectedResponseTime","delayBeforeHide","status","disableAnimations","rest","_objectWithoutPropertiesLoose2","default","ref","useRef","theme","useContext","ThemeContext","_useGlobalLoaderWidth","useGlobalLoaderWidth","width","startWidth","fullWidth","_useGlobalLoaderPosit","useGlobalLoaderPosition","left","getAnimationClass","animations","successAnimation","acceptAnimation","slowAcceptAnimation","errorAnimation","standardAnimation","styles","successWithoutAnimation","acceptWithoutAnimation","errorWithoutAnimation","standardWithoutAnimation","createElement","CommonWrapper","_extends2","ZIndex","priority","className","outer","cx","inner"],"sources":["GlobalLoaderView.tsx"],"sourcesContent":["import React, { useContext, useRef } from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { animations, styles } from './GlobalLoaderView.styles';\nimport { useGlobalLoaderPosition, useGlobalLoaderWidth } from './useParams';\n\nexport interface GlobalLoaderViewProps extends Pick<CommonProps, 'data-tid'> {\n  /** Устанавливает ожидаемое время(ms) ответа сервера. */\n  expectedResponseTime: number;\n\n  /** Устанавливает задержку в миллисекундах до исчезновения лоадера. */\n  delayBeforeHide: number;\n\n  /** Устанавливает статус операции. */\n  status?: 'success' | 'error' | 'standard' | 'accept';\n\n  /** Отключает анимацию. */\n  disableAnimations: boolean;\n}\n\nexport interface GlobalLoaderViewRef {\n  element: HTMLDivElement;\n  refObject: React.RefObject<GlobalLoaderViewRef['element']>;\n}\n\nexport const GlobalLoaderView = ({\n  expectedResponseTime,\n  delayBeforeHide,\n  status,\n  disableAnimations,\n  ...rest\n}: GlobalLoaderViewProps) => {\n  const ref = useRef<GlobalLoaderViewRef['element']>(null);\n  const theme = useContext(ThemeContext);\n  const { width, startWidth, fullWidth } = useGlobalLoaderWidth(status, ref);\n  const { left } = useGlobalLoaderPosition(ref);\n\n  const getAnimationClass = (status: GlobalLoaderViewProps['status']) => {\n    if (!disableAnimations) {\n      switch (status) {\n        case 'success':\n          return animations.successAnimation(delayBeforeHide, width, left);\n        case 'accept':\n          if (startWidth < fullWidth * 0.8) {\n            return animations.acceptAnimation(theme, startWidth, expectedResponseTime, width, left);\n          }\n          return animations.slowAcceptAnimation(theme, startWidth, width, left);\n        case 'error':\n          return animations.errorAnimation(theme);\n        case 'standard':\n          return animations.standardAnimation(theme, expectedResponseTime);\n      }\n    }\n\n    if (disableAnimations) {\n      switch (status) {\n        case 'success':\n          return styles.successWithoutAnimation();\n        case 'accept':\n          return animations.acceptWithoutAnimation(startWidth);\n        case 'error':\n          return styles.errorWithoutAnimation();\n        case 'standard':\n          return styles.standardWithoutAnimation();\n      }\n    }\n  };\n\n  return (\n    <CommonWrapper {...rest} data-status={status}>\n      <ZIndex priority=\"GlobalLoader\" className={styles.outer(theme)}>\n        <div ref={ref} className={cx(styles.inner(theme), getAnimationClass(status))} />\n      </ZIndex>\n    </CommonWrapper>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/cjs/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/cjs/components/GlobalLoader/GlobalLoaderView.styles.js

@@ -1,54 +1,52 @@
-"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"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;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;
 
-var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 
+var styles = exports.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 = exports.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,
 
-      },
-      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);
 
-        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      "])));
 
 
+  }
+});
 
-      }
-    }));};
+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 moveToRightAnimation = function moveToRightAnimation(emotion) {return 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"])));};
 
 
 
@@ -61,8 +59,8 @@ var moveToRightAnimation = function moveToRightAnimation(emotion) {return emotio
 
 
 
+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 = function spinnerAnimation(emotion) {return 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"])));};
 
 
 
@@ -74,25 +72,25 @@ var spinnerAnimation = function spinnerAnimation(emotion) {return emotion.keyfra
 
 
 
+var linearProgressAnimation = (0, _Emotion.keyframes)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n  from { width: 0; }\n  to { width: 80% }\n"])));
 
-var linearProgressAnimation = function linearProgressAnimation(emotion) {return 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 = function slowProgressAnimation(emotion) {return emotion.keyframes(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n  from { width: 80%; }\n  to { width: 90% }\n"])));};
 
 
 
+var animations = exports.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    "])),
 
-var getAnimations = exports.getAnimations = function getAnimations(emotion) {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,
 
-      delayBeforeHide,
 
+    width,
+    left);
 
-      width,
-      left);
 
 
 
@@ -110,89 +108,88 @@ var getAnimations = exports.getAnimations = function getAnimations(emotion) {ret
 
 
 
+  },
+  errorAnimation: function errorAnimation(t) {
+    var transitionDuration = parseInt(t.globalLoaderTransitionToSpinnerDuration);
+    var spinnerAnimationDuration = parseInt(t.globalLoaderSpinnerAnimationDuration);
 
-    },
-    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:\n        ", " ", "ms linear,\n        ", "ms ", " ", "ms infinite alternate;\n    "])),
 
-      return emotion.css(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      left: 0;\n      width: 100%;\n      animation:\n        ", " ", "ms linear,\n        ", "ms ", " ", "ms infinite alternate;\n    "])),
 
 
+    moveToRightAnimation, transitionDuration,
+    spinnerAnimationDuration, spinnerAnimation, transitionDuration);
 
-      moveToRightAnimation(emotion), transitionDuration,
-      spinnerAnimationDuration, spinnerAnimation(emotion), 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:\n        ", " ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n        ", "ms ", " ", "ms linear;\n    "])),
 
-    },
-    standardAnimation: function standardAnimation(t, expectedTime) {
-      var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
-      return emotion.css(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\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);
 
-      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 (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\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    "])),
 
-    },
-    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:\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,
 
-      transitionTime,
-      expectedTime, transitionTime,
-      slowProgressAnimationTime, slowProgressAnimation(emotion), 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:\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    "])),
 
-    },
-    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:\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,
 
-      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);
 
-    },
-    acceptWithoutAnimation: function acceptWithoutAnimation(startWidth) {
-      return emotion.css(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", "px;\n    "])),
-      startWidth);
-
-    }
-  };};
+  }
+};

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

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","getStyles","exports","emotion","memoizeStyle","outer","t","css","_taggedTemplateLiteralLoose2","default","globalLoaderWidth","globalLoaderHeight","globalLoaderBackgroundColor","globalLoaderPosition","globalLoaderLeft","globalLoaderTop","globalLoaderRight","globalLoaderBottom","inner","globalLoaderColor","standardWithoutAnimation","successWithoutAnimation","errorWithoutAnimation","moveToRightAnimation","keyframes","spinnerAnimation","linearProgressAnimation","slowProgressAnimation","getAnimations","successAnimation","delayBeforeHide","width","left","errorAnimation","transitionDuration","parseInt","globalLoaderTransitionToSpinnerDuration","spinnerAnimationDuration","globalLoaderSpinnerAnimationDuration","standardAnimation","expectedTime","slowProgressAnimationTime","globalLoaderSlowAnimationDuration","acceptAnimation","startWidth","transitionTime","globalLoaderTransitionFromSpinnerDuration","slowAcceptAnimation","acceptWithoutAnimation"],"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":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","styles","exports","memoizeStyle","outer","t","css","_taggedTemplateLiteralLoose2","default","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"],"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/cjs/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/cjs/components/Group/Group.js

@@ -1,10 +1,9 @@
 "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 _RenderEnvironmentContext = require("../../lib/theming/RenderEnvironmentContext");
 var _client = require("../../lib/client");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
 
 var _rootNode = require("../../lib/rootNode");
 var _utils = require("../../lib/utils");
@@ -143,17 +142,6 @@ Group = exports.Group = (0, _rootNode.rootNode)(_class = (_Group = /*#__PURE__*/
 
 
 
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -170,31 +158,31 @@ Group = exports.Group = (0, _rootNode.rootNode)(_class = (_Group = /*#__PURE__*/
     child,
     isFirstChild,
     isLastChild,
-    isWidthInPercent) {var _this$cx, _this$cx2;return /*#__PURE__*/(
+    isWidthInPercent) {var _cx, _cx2;return /*#__PURE__*/(
 
         _react.default.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 && (_client.isIE11 || _client.isEdge)), _this$cx)
+          className: (0, _Emotion.cx)((_cx = {}, _cx[
+          _Group2.styles.fixed()] = !isWidthInPercent, _cx[
+          _Group2.styles.stretch()] = isWidthInPercent, _cx[
+          _Group2.styles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (_client.isIE11 || _client.isEdge)), _cx)
           ) }, /*#__PURE__*/
 
         _react.default.createElement("div", {
-          className: _this.cx((_this$cx2 = {}, _this$cx2[
-          _this.styles.item()] = true, _this$cx2[
-          _this.styles.itemFirst()] = isFirstChild, _this$cx2)
+          className: (0, _Emotion.cx)((_cx2 = {}, _cx2[
+          _Group2.styles.item()] = true, _cx2[
+          _Group2.styles.itemFirst()] = isFirstChild, _cx2)
           ) },
 
         tryPassCorners(child, isFirstChild, isLastChild)
         )
-        ));};return _this;}(0, _inheritsLoose2.default)(Group, _React$Component);var _proto = Group.prototype;_proto.render = function render() {var _this2 = this;var style = { width: this.props.width };var childrenArray = _react.default.Children.toArray(this.props.children);var firstChild = getFirstChild(childrenArray);var lastChild = getLastChild(childrenArray);return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);return /*#__PURE__*/_react.default.createElement(_RenderEnvironmentContext.RenderEnvironmentContext.Consumer, null, function (_ref) {var emotion = _ref.emotion;_this2.cx = emotion.cx;_this2.styles = (0, _Group2.getStyles)(emotion);return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), /*#__PURE__*/_react.default.createElement("span", { "data-tid": GroupDataTids.root, className: _this2.styles.root(), style: style }, _react.default.Children.map(childrenArray, function (child) {if (!child || ! /*#__PURE__*/_react.default.isValidElement(child)) {return null;}var isFirstChild = child === firstChild;var isLastChild = child === lastChild;if (_this2.featureFlags.groupAddHintAndTooltipSupport && ((0, _utils.isHint)(child) || (0, _utils.isTooltip)(child))) {return _this2.renderWrappedChildren(child, isFirstChild, isLastChild);}return _this2.renderChild(child, isFirstChild, isLastChild, hasWidthInPercent(child));})));});});};_proto.
+        ));};return _this;}(0, _inheritsLoose2.default)(Group, _React$Component);var _proto = Group.prototype;_proto.render = function render() {var _this2 = this;var style = { width: this.props.width };var childrenArray = _react.default.Children.toArray(this.props.children);var firstChild = getFirstChild(childrenArray);var lastChild = getLastChild(childrenArray);return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), /*#__PURE__*/_react.default.createElement("span", { "data-tid": GroupDataTids.root, className: _Group2.styles.root(), style: style }, _react.default.Children.map(childrenArray, function (child) {if (!child || ! /*#__PURE__*/_react.default.isValidElement(child)) {return null;}var isFirstChild = child === firstChild;var isLastChild = child === lastChild;if (_this2.featureFlags.groupAddHintAndTooltipSupport && ((0, _utils.isHint)(child) || (0, _utils.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;
+  {var _this3 = this,_cx3;
     var shouldStretchParent = false;
     var nestedChildren = _react.default.Children.toArray(parent.props.children);
 
@@ -213,7 +201,7 @@ Group = exports.Group = (0, _rootNode.rootNode)(_class = (_Group = /*#__PURE__*/
     });
 
     var wrappedChildren = /*#__PURE__*/
-    _react.default.createElement("div", { className: this.cx(this.styles.wrappedChildren(), (_this$cx3 = {}, _this$cx3[this.styles.stretch()] = shouldStretchParent, _this$cx3)) },
+    _react.default.createElement("div", { className: (0, _Emotion.cx)(_Group2.styles.wrappedChildren(), (_cx3 = {}, _cx3[_Group2.styles.stretch()] = shouldStretchParent, _cx3)) },
     modifiedChildren
     );