@elastic/eui 74.0.0 → 74.1.0

package/test-env/global_styling/utility/animations.js

@@ -5,13 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiAnimSlideInUp = exports.euiAnimFadeIn = void 0;
+exports.euiAnimSlideX = exports.euiAnimSlideInUp = exports.euiAnimFadeIn = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = require("@emotion/react");
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 var euiAnimFadeIn = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])));
 exports.euiAnimFadeIn = euiAnimFadeIn;
@@ -20,4 +20,10 @@ var euiAnimSlideInUp = function euiAnimSlideInUp(size) {
   return (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n   0% {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])), size);
 };
 
-exports.euiAnimSlideInUp = euiAnimSlideInUp;
+exports.euiAnimSlideInUp = euiAnimSlideInUp;
+
+var euiAnimSlideX = function euiAnimSlideX(size) {
+  return (0, _react.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    transform: translateX(", ");\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n"])), size);
+};
+
+exports.euiAnimSlideX = euiAnimSlideX;

package/es/components/loading/loading_content.styles.js

@@ -1,24 +0,0 @@
-var _templateObject;
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-import { css, keyframes } from '@emotion/react';
-import { euiCanAnimate, logicalCSS } from '../../global_styling';
-import { COLOR_MODES_STANDARD, shade, tint } from '../../services';
-var loadingContentGradient = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: translateX(-53%);\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n"])));
-export var euiLoadingContentStyles = function euiLoadingContentStyles(_ref) {
-  var euiTheme = _ref.euiTheme,
-      colorMode = _ref.colorMode;
-  var gradientStartStop = colorMode === COLOR_MODES_STANDARD.dark ? shade(euiTheme.colors.lightShade, 0.12) : tint(euiTheme.colors.lightShade, 0.65);
-  var gradientMiddle = colorMode === COLOR_MODES_STANDARD.dark ? shade(euiTheme.colors.lightShade, 0.24) : tint(euiTheme.colors.lightShade, 0.8);
-  return {
-    euiLoadingContent__singleLine: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), " ", logicalCSS('height', euiTheme.size.base), " border-radius:", euiTheme.border.radius.medium, ";background:", gradientStartStop, ";overflow:hidden;&:not(:last-child){", logicalCSS('margin-bottom', euiTheme.size.s), ";}&:last-child:not(:only-child){", logicalCSS('width', '75%'), ";}&::after{content:'';display:block;", logicalCSS('width', '220%'), " ", logicalCSS('height', '100%'), " background:linear-gradient(\n          137deg,\n          ", gradientStartStop, " 45%,\n          ", gradientMiddle, " 50%,\n          ", gradientStartStop, " 55%\n        );", euiCanAnimate, "{animation:", loadingContentGradient, " 1.5s ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingContent__singleLine;")
-  };
-};

package/lib/components/loading/loading_content.styles.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.euiLoadingContentStyles = void 0;
-
-var _react = require("@emotion/react");
-
-var _global_styling = require("../../global_styling");
-
-var _services = require("../../services");
-
-var _templateObject;
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var loadingContentGradient = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: translateX(-53%);\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n"])));
-
-var euiLoadingContentStyles = function euiLoadingContentStyles(_ref) {
-  var euiTheme = _ref.euiTheme,
-      colorMode = _ref.colorMode;
-  var gradientStartStop = colorMode === _services.COLOR_MODES_STANDARD.dark ? (0, _services.shade)(euiTheme.colors.lightShade, 0.12) : (0, _services.tint)(euiTheme.colors.lightShade, 0.65);
-  var gradientMiddle = colorMode === _services.COLOR_MODES_STANDARD.dark ? (0, _services.shade)(euiTheme.colors.lightShade, 0.24) : (0, _services.tint)(euiTheme.colors.lightShade, 0.8);
-  return {
-    euiLoadingContent__singleLine: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('height', euiTheme.size.base), " border-radius:", euiTheme.border.radius.medium, ";background:", gradientStartStop, ";overflow:hidden;&:not(:last-child){", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";}&:last-child:not(:only-child){", (0, _global_styling.logicalCSS)('width', '75%'), ";}&::after{content:'';display:block;", (0, _global_styling.logicalCSS)('width', '220%'), " ", (0, _global_styling.logicalCSS)('height', '100%'), " background:linear-gradient(\n          137deg,\n          ", gradientStartStop, " 45%,\n          ", gradientMiddle, " 50%,\n          ", gradientStartStop, " 55%\n        );", _global_styling.euiCanAnimate, "{animation:", loadingContentGradient, " 1.5s ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingContent__singleLine;")
-  };
-};
-
-exports.euiLoadingContentStyles = euiLoadingContentStyles;

package/optimize/es/components/loading/loading_content.styles.js

@@ -1,24 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-import { css, keyframes } from '@emotion/react';
-import { euiCanAnimate, logicalCSS } from '../../global_styling';
-import { COLOR_MODES_STANDARD, shade, tint } from '../../services';
-var loadingContentGradient = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: translateX(-53%);\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n"])));
-export var euiLoadingContentStyles = function euiLoadingContentStyles(_ref) {
-  var euiTheme = _ref.euiTheme,
-      colorMode = _ref.colorMode;
-  var gradientStartStop = colorMode === COLOR_MODES_STANDARD.dark ? shade(euiTheme.colors.lightShade, 0.12) : tint(euiTheme.colors.lightShade, 0.65);
-  var gradientMiddle = colorMode === COLOR_MODES_STANDARD.dark ? shade(euiTheme.colors.lightShade, 0.24) : tint(euiTheme.colors.lightShade, 0.8);
-  return {
-    euiLoadingContent__singleLine: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), " ", logicalCSS('height', euiTheme.size.base), " border-radius:", euiTheme.border.radius.medium, ";background:", gradientStartStop, ";overflow:hidden;&:not(:last-child){", logicalCSS('margin-bottom', euiTheme.size.s), ";}&:last-child:not(:only-child){", logicalCSS('width', '75%'), ";}&::after{content:'';display:block;", logicalCSS('width', '220%'), " ", logicalCSS('height', '100%'), " background:linear-gradient(\n          137deg,\n          ", gradientStartStop, " 45%,\n          ", gradientMiddle, " 50%,\n          ", gradientStartStop, " 55%\n        );", euiCanAnimate, "{animation:", loadingContentGradient, " 1.5s ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingContent__singleLine;")
-  };
-};

package/optimize/lib/components/loading/loading_content.styles.js

@@ -1,32 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.euiLoadingContentStyles = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = require("@emotion/react");
-
-var _global_styling = require("../../global_styling");
-
-var _services = require("../../services");
-
-var _templateObject;
-
-var loadingContentGradient = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    transform: translateX(-53%);\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n"])));
-
-var euiLoadingContentStyles = function euiLoadingContentStyles(_ref) {
-  var euiTheme = _ref.euiTheme,
-      colorMode = _ref.colorMode;
-  var gradientStartStop = colorMode === _services.COLOR_MODES_STANDARD.dark ? (0, _services.shade)(euiTheme.colors.lightShade, 0.12) : (0, _services.tint)(euiTheme.colors.lightShade, 0.65);
-  var gradientMiddle = colorMode === _services.COLOR_MODES_STANDARD.dark ? (0, _services.shade)(euiTheme.colors.lightShade, 0.24) : (0, _services.tint)(euiTheme.colors.lightShade, 0.8);
-  return {
-    euiLoadingContent__singleLine: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('height', euiTheme.size.base), " border-radius:", euiTheme.border.radius.medium, ";background:", gradientStartStop, ";overflow:hidden;&:not(:last-child){", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";}&:last-child:not(:only-child){", (0, _global_styling.logicalCSS)('width', '75%'), ";}&::after{content:'';display:block;", (0, _global_styling.logicalCSS)('width', '220%'), " ", (0, _global_styling.logicalCSS)('height', '100%'), " background:linear-gradient(\n          137deg,\n          ", gradientStartStop, " 45%,\n          ", gradientMiddle, " 50%,\n          ", gradientStartStop, " 55%\n        );", _global_styling.euiCanAnimate, "{animation:", loadingContentGradient, " 1.5s ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingContent__singleLine;")
-  };
-};
-
-exports.euiLoadingContentStyles = euiLoadingContentStyles;

package/test-env/components/loading/loading_content.styles.js

@@ -1,32 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.euiLoadingContentStyles = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = require("@emotion/react");
-
-var _global_styling = require("../../global_styling");
-
-var _services = require("../../services");
-
-var _templateObject;
-
-var loadingContentGradient = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    transform: translateX(-53%);\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n"])));
-
-var euiLoadingContentStyles = function euiLoadingContentStyles(_ref) {
-  var euiTheme = _ref.euiTheme,
-      colorMode = _ref.colorMode;
-  var gradientStartStop = colorMode === _services.COLOR_MODES_STANDARD.dark ? (0, _services.shade)(euiTheme.colors.lightShade, 0.12) : (0, _services.tint)(euiTheme.colors.lightShade, 0.65);
-  var gradientMiddle = colorMode === _services.COLOR_MODES_STANDARD.dark ? (0, _services.shade)(euiTheme.colors.lightShade, 0.24) : (0, _services.tint)(euiTheme.colors.lightShade, 0.8);
-  return {
-    euiLoadingContent__singleLine: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('height', euiTheme.size.base), " border-radius:", euiTheme.border.radius.medium, ";background:", gradientStartStop, ";overflow:hidden;&:not(:last-child){", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";}&:last-child:not(:only-child){", (0, _global_styling.logicalCSS)('width', '75%'), ";}&::after{content:'';display:block;", (0, _global_styling.logicalCSS)('width', '220%'), " ", (0, _global_styling.logicalCSS)('height', '100%'), " background:linear-gradient(\n          137deg,\n          ", gradientStartStop, " 45%,\n          ", gradientMiddle, " 50%,\n          ", gradientStartStop, " 55%\n        );", _global_styling.euiCanAnimate, "{animation:", loadingContentGradient, " 1.5s ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingContent__singleLine;")
-  };
-};
-
-exports.euiLoadingContentStyles = euiLoadingContentStyles;