@elastic/eui 70.2.4 → 70.3.0

package/optimize/es/components/badge/beta_badge/beta_badge.js

@@ -1,7 +1,7 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "label", "color", "tooltipContent", "tooltipPosition", "anchorProps", "title", "iconType", "onClick", "onClickAriaLabel", "href", "rel", "target", "size"];
+var _excluded = ["className", "label", "color", "tooltipContent", "tooltipPosition", "anchorProps", "title", "iconType", "onClick", "onClickAriaLabel", "href", "rel", "target", "size", "alignment"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -19,6 +19,7 @@ import { euiBetaBadgeStyles } from './beta_badge.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = ['accent', 'subdued', 'hollow'];
 export var SIZES = ['s', 'm'];
+export var ALIGNMENTS = ['baseline', 'middle'];
 export var EuiBetaBadge = function EuiBetaBadge(_ref) {
   var className = _ref.className,
       label = _ref.label,
@@ -37,6 +38,8 @@ export var EuiBetaBadge = function EuiBetaBadge(_ref) {
       target = _ref.target,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'm' : _ref$size,
+      _ref$alignment = _ref.alignment,
+      alignment = _ref$alignment === void 0 ? 'baseline' : _ref$alignment,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var euiTheme = useEuiTheme();
@@ -44,7 +47,7 @@ export var EuiBetaBadge = function EuiBetaBadge(_ref) {
   var isCircular = iconType || singleLetter;
   var classes = classNames('euiBetaBadge', className);
   var styles = euiBetaBadgeStyles(euiTheme);
-  var cssStyles = [styles.euiBetaBadge, styles[color], styles[size], isCircular ? styles.badgeSizes.circle[size] : styles.badgeSizes.default[size]];
+  var cssStyles = [styles.euiBetaBadge, styles[color], styles[size], styles[alignment], isCircular ? styles.badgeSizes.circle[size] : styles.badgeSizes.default[size]];
   var icon;
 
   if (iconType) {

package/optimize/es/components/badge/beta_badge/beta_badge.styles.js

@@ -14,6 +14,24 @@ import { logicalCSS, euiFocusRing, euiFontSizeFromScale, euiTextTruncate, mathWi
 import { tint, isColorDark, hexToRgb } from '../../../services';
 
 var _ref = process.env.NODE_ENV === "production" ? {
+  name: "l1nme7-middle",
+  styles: "vertical-align:middle;label:middle;"
+} : {
+  name: "l1nme7-middle",
+  styles: "vertical-align:middle;label:middle;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "19hexhy-baseline",
+  styles: "vertical-align:baseline;label:baseline;"
+} : {
+  name: "19hexhy-baseline",
+  styles: "vertical-align:baseline;label:baseline;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref3 = process.env.NODE_ENV === "production" ? {
   name: "pzpqqg-euiBetaBadge__icon",
   styles: "position:relative;transform:translate(0, -1px);label:euiBetaBadge__icon;"
 } : {
@@ -26,7 +44,7 @@ export var euiBetaBadgeStyles = function euiBetaBadgeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
       colorMode = euiThemeContext.colorMode;
   return {
-    euiBetaBadge: /*#__PURE__*/css("display:inline-block;vertical-align:super;border-radius:", euiTheme.size.l, ";cursor:default;font-weight:", euiTheme.font.weight.bold, ";text-transform:uppercase;letter-spacing:0.05em;text-align:center;", euiTextTruncate(), " &:focus{", euiFocusRing(euiThemeContext, 'outset', {
+    euiBetaBadge: /*#__PURE__*/css("display:inline-block;border-radius:", euiTheme.size.l, ";cursor:default;font-weight:", euiTheme.font.weight.bold, ";text-transform:uppercase;letter-spacing:0.05em;text-align:center;", euiTextTruncate(), " &:focus{", euiFocusRing(euiThemeContext, 'outset', {
       color: colorMode === 'DARK' ? euiTheme.colors.ghost : euiTheme.colors.ink
     }), ";};label:euiBetaBadge;"),
     // Colors
@@ -52,12 +70,15 @@ export var euiBetaBadgeStyles = function euiBetaBadgeStyles(euiThemeContext) {
         })), "\n        ")
       }
     },
-    euiBetaBadge__icon: _ref
+    euiBetaBadge__icon: _ref3,
+    // Alignments
+    baseline: _ref2,
+    middle: _ref
   };
 }; // Util for detecting text color based on badge bg color
 
-export var getBadgeColors = function getBadgeColors(backgroundColor, _ref2) {
-  var euiTheme = _ref2.euiTheme;
+export var getBadgeColors = function getBadgeColors(backgroundColor, _ref4) {
+  var euiTheme = _ref4.euiTheme;
   var textColor = isColorDark.apply(void 0, _toConsumableArray(hexToRgb(backgroundColor))) ? euiTheme.colors.ghost : euiTheme.colors.ink;
   return "\n    background-color: ".concat(backgroundColor, ";\n    color: ").concat(textColor, ";\n  ");
 };

package/optimize/es/components/card/card.styles.js

@@ -55,11 +55,11 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
 };
 
 var _ref6 = process.env.NODE_ENV === "production" ? {
-  name: "z24364-euiCard__main",
-  styles: "display:flex;label:euiCard__main;"
+  name: "31kq8f-euiCard__main",
+  styles: "display:flex;inline-size:100%;label:euiCard__main;"
 } : {
-  name: "z24364-euiCard__main",
-  styles: "display:flex;label:euiCard__main;",
+  name: "31kq8f-euiCard__main",
+  styles: "display:flex;inline-size:100%;label:euiCard__main;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 

package/optimize/es/components/date_picker/super_date_picker/super_date_picker.a11y.js

@@ -0,0 +1,98 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/*
+ * 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.
+ */
+/// <reference types="../../../../cypress/support"/>
+import React, { useState } from 'react';
+import { EuiSuperDatePicker } from './super_date_picker';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var SuperDatePicker = function SuperDatePicker() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isLoading = _useState2[0],
+      setIsLoading = _useState2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 1),
+      showUpdateButton = _useState4[0];
+
+  var _useState5 = useState('now-30m'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      start = _useState6[0],
+      setStart = _useState6[1];
+
+  var _useState7 = useState('now'),
+      _useState8 = _slicedToArray(_useState7, 2),
+      end = _useState8[0],
+      setEnd = _useState8[1];
+
+  var _useState9 = useState(true),
+      _useState10 = _slicedToArray(_useState9, 1),
+      showFill = _useState10[0];
+
+  var onTimeChange = function onTimeChange(_ref) {
+    var start = _ref.start,
+        end = _ref.end;
+    setStart(start);
+    setEnd(end);
+    setIsLoading(true);
+    startLoading();
+  };
+
+  var startLoading = function startLoading() {
+    setTimeout(stopLoading, 1000);
+  };
+
+  var stopLoading = function stopLoading() {
+    setIsLoading(false);
+  };
+
+  var datepickerProps = {
+    isLoading: isLoading,
+    start: start,
+    end: end,
+    onTimeChange: onTimeChange,
+    showUpdateButton: showUpdateButton
+  };
+  return ___EmotionJSX(EuiSuperDatePicker, _extends({}, datepickerProps, {
+    updateButtonProps: {
+      fill: showFill
+    }
+  }));
+};
+
+beforeEach(function () {
+  cy.mount(___EmotionJSX(SuperDatePicker, null));
+  cy.get('div.euiSuperDatePicker__flexWrapper').should('exist');
+});
+describe('EuiSuperDatePicker', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when quick select menu is open', function () {
+      cy.get('button.euiFormControlLayout__prepend').click();
+      cy.get('div.euiPanel').contains('Quick select').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when start / end date menus are open', function () {
+      cy.get('button.euiSuperDatePicker__prettyFormat').click();
+      cy.get('div.euiDatePopoverContent').should('exist');
+      cy.checkAxe();
+      cy.get('button.euiDatePopoverButton--start').click();
+      cy.get('button.euiDatePopoverButton--end').click();
+      cy.get('div.euiDatePopoverContent').should('exist');
+      cy.checkAxe();
+      cy.get('button.euiDatePopoverButton--end').click();
+      cy.get('div.euiDatePopoverContent').should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});

package/optimize/es/components/flyout/flyout.a11y.js

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+
+/*
+ * 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.
+ */
+/// <reference types="../../../cypress/support"/>
+import React, { useState } from 'react';
+import { EuiFlyout } from './flyout';
+import { EuiButtonEmpty } from '../button';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var childrenDefault = ___EmotionJSX(React.Fragment, null, ___EmotionJSX("button", {
+  "data-test-subj": "itemA"
+}, "Item A"), ___EmotionJSX("button", {
+  "data-test-subj": "itemB"
+}, "Item B"), ___EmotionJSX("button", {
+  "data-test-subj": "itemC"
+}, "Item C"), ___EmotionJSX("input", {
+  "data-test-subj": "itemD"
+}));
+
+var Flyout = function Flyout(_ref) {
+  var _ref$children = _ref.children,
+      children = _ref$children === void 0 ? childrenDefault : _ref$children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var onButtonClick = function onButtonClick() {
+    return setIsOpen(!isOpen);
+  };
+
+  var button = ___EmotionJSX(EuiButtonEmpty, {
+    onClick: onButtonClick
+  }, "Toggle flyout");
+
+  return ___EmotionJSX("div", null, button, isOpen ? ___EmotionJSX(EuiFlyout, _extends({
+    "data-test-subj": "flyoutSpec",
+    onClose: function onClose() {
+      return setIsOpen(false);
+    }
+  }, rest), children) : null);
+};
+
+beforeEach(function () {
+  cy.mount(___EmotionJSX(Flyout, null));
+  cy.get('div.euiFlyout').should('not.exist');
+});
+describe('EuiFlyout', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when flyout is opened', function () {
+      cy.get('button.euiButtonEmpty').click();
+      cy.get('div.euiFlyout').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when flyout is closed', function () {
+      cy.get('button.euiButtonEmpty').click();
+      cy.get('div.euiFlyout').should('exist');
+      cy.get('button.euiFlyout__closeButton').click();
+      cy.get('div.euiFlyout').should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});

package/optimize/es/components/image/image_fullscreen_wrapper.styles.js

@@ -1,7 +1,3 @@
-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
@@ -9,18 +5,14 @@ var _templateObject;
  * 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 { logicalCSS, logicalTextAlignCSS, euiCanAnimate } from '../../global_styling';
+import { css } from '@emotion/react';
+import { logicalCSS, logicalTextAlignCSS, euiCanAnimate, euiAnimSlideInUp } from '../../global_styling';
 export var euiImageFullscreenWrapperStyles = function euiImageFullscreenWrapperStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiImageFullscreenWrapper: /*#__PURE__*/css(logicalCSS('max-height', '80vh'), ";", logicalCSS('max-width', '80vw'), ";", logicalTextAlignCSS('center'), ";line-height:0;", euiCanAnimate, "{animation:", euiImageFullScreen(euiTheme.size.xxxxl), " ", euiTheme.animation.extraSlow, " ", euiTheme.animation.bounce, ";}&:hover [class*='euiImageCaption']{text-decoration:underline;};label:euiImageFullscreenWrapper;"),
+    euiImageFullscreenWrapper: /*#__PURE__*/css(logicalCSS('max-height', '80vh'), ";", logicalCSS('max-width', '80vw'), ";", logicalTextAlignCSS('center'), ";line-height:0;", euiCanAnimate, "{animation:", euiAnimSlideInUp(euiTheme.size.xxxxl), " ", euiTheme.animation.extraSlow, " ", euiTheme.animation.bounce, ";}&:hover [class*='euiImageCaption']{text-decoration:underline;};label:euiImageFullscreenWrapper;"),
     // Sizes
     fullWidth: /*#__PURE__*/css(logicalCSS('width', '100%'), ";;label:fullWidth;")
   };
-};
-
-var euiImageFullScreen = function euiImageFullScreen(size) {
-  return keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])), size);
 };

package/optimize/es/components/modal/confirm_modal.js

@@ -17,6 +17,8 @@ import { EuiModalFooter } from './modal_footer';
 import { EuiModalHeader } from './modal_header';
 import { EuiModalHeaderTitle } from './modal_header_title';
 import { EuiModalBody } from './modal_body';
+import { useEuiTheme } from '../../services';
+import { euiModalStyles } from './modal.styles';
 import { EuiButton, EuiButtonEmpty } from '../button';
 import { EuiText } from '../text';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -70,6 +72,9 @@ export var EuiConfirmModal = function EuiConfirmModal(_ref) {
   };
 
   var classes = classnames('euiModal--confirmation', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiModalStyles(euiTheme);
+  var cssStyles = [styles.confirmation];
   var modalTitle;
 
   if (title) {
@@ -88,6 +93,7 @@ export var EuiConfirmModal = function EuiConfirmModal(_ref) {
 
   return ___EmotionJSX(EuiModal, _extends({
     className: classes,
+    css: cssStyles,
     onClose: onCancel
   }, rest), modalTitle, message && ___EmotionJSX(EuiModalBody, null, ___EmotionJSX(EuiText, {
     "data-test-subj": "confirmModalBodyText"

package/optimize/es/components/modal/modal.a11y.js

@@ -0,0 +1,60 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/*
+ * 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.
+ */
+/// <reference types="../../../cypress/support"/>
+import React, { useState } from 'react';
+import { EuiModal, EuiModalHeader, EuiModalHeaderTitle, EuiModalBody, EuiModalFooter } from './index';
+import { EuiButton } from '../button';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var Modal = function Modal() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isModalVisible = _useState2[0],
+      setIsModalVisible = _useState2[1];
+
+  var closeModal = function closeModal() {
+    return setIsModalVisible(false);
+  };
+
+  var showModal = function showModal() {
+    return setIsModalVisible(true);
+  };
+
+  var modalProps = {
+    title: 'Do this thing',
+    onClose: closeModal,
+    children: React
+  };
+  return ___EmotionJSX("div", null, ___EmotionJSX(EuiButton, {
+    onClick: showModal
+  }, "Show confirm modal"), isModalVisible && ___EmotionJSX(EuiModal, modalProps, ___EmotionJSX(EuiModalHeader, null, ___EmotionJSX(EuiModalHeaderTitle, null, ___EmotionJSX("h1", null, "Title of modal"))), ___EmotionJSX(EuiModalBody, null, ___EmotionJSX("p", null, "This is a simple modal body")), ___EmotionJSX(EuiModalFooter, null, ___EmotionJSX(EuiButton, {
+    onClick: closeModal,
+    fill: true
+  }, "Close"))));
+};
+
+beforeEach(function () {
+  cy.mount(___EmotionJSX(Modal, null));
+  cy.get('div.euiModal').should('not.exist');
+  cy.get('button.euiButton').click();
+  cy.get('div.euiModal').should('exist');
+});
+describe('EuiModal', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations when modal is open', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when modal is closed', function () {
+      cy.get('div.euiModalFooter button.euiButton').click();
+      cy.get('div.euiModal').should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});

package/optimize/es/components/modal/modal.js

@@ -14,13 +14,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { useRef, useCallback } from 'react';
+import React from 'react';
 import classnames from 'classnames';
-import { keys } from '../../services';
+import { keys, useEuiTheme } from '../../services';
 import { EuiButtonIcon } from '../button';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
 import { EuiI18n } from '../i18n';
+import { euiModalStyles } from './modal.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiModal = function EuiModal(_ref) {
   var className = _ref.className,
@@ -32,19 +33,6 @@ export var EuiModal = function EuiModal(_ref) {
       style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  // TODO: Remove this onFocus scroll workaround after react-focus-on supports focusOptions
-  // @see https://github.com/elastic/eui/issues/6304
-  var bodyScrollTop = useRef(typeof window === 'undefined' ? undefined : window.scrollY // Account for SSR
-  );
-  var onFocus = useCallback(function () {
-    if (bodyScrollTop.current != null) {
-      window.scrollTo({
-        top: bodyScrollTop.current
-      });
-      bodyScrollTop.current = undefined; // Unset after first auto focus
-    }
-  }, []);
-
   var onKeyDown = function onKeyDown(event) {
     if (event.key === keys.ESCAPE) {
       event.preventDefault();
@@ -53,28 +41,29 @@ export var EuiModal = function EuiModal(_ref) {
     }
   };
 
-  var newStyle;
-  var widthClassName;
+  var newStyle = style;
 
-  if (maxWidth === true) {
-    widthClassName = 'euiModal--maxWidth-default';
-  } else if (maxWidth !== false) {
-    var value = typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth;
-    newStyle = _objectSpread(_objectSpread({}, style), {}, {
-      maxWidth: value
+  if (typeof maxWidth !== 'boolean') {
+    newStyle = _objectSpread(_objectSpread({}, newStyle), {}, {
+      maxInlineSize: maxWidth
     });
   }
 
-  var classes = classnames('euiModal', widthClassName, className);
+  var classes = classnames('euiModal', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiModalStyles(euiTheme);
+  var cssStyles = [styles.euiModal, maxWidth === true && styles.defaultMaxWidth];
+  var cssCloseIconStyles = [styles.euiModal__closeIcon];
   return ___EmotionJSX(EuiOverlayMask, null, ___EmotionJSX(EuiFocusTrap, {
     initialFocus: initialFocus,
-    scrollLock: true
+    scrollLock: true,
+    preventScrollOnFocus: true
   }, ___EmotionJSX("div", _extends({
+    css: cssStyles,
     className: classes,
     onKeyDown: onKeyDown,
     tabIndex: 0,
-    onFocus: onFocus,
-    style: newStyle || style
+    style: newStyle
   }, rest), ___EmotionJSX(EuiI18n, {
     token: "euiModal.closeModal",
     default: "Closes this modal window"
@@ -82,6 +71,7 @@ export var EuiModal = function EuiModal(_ref) {
     return ___EmotionJSX(EuiButtonIcon, {
       iconType: "cross",
       onClick: onClose,
+      css: cssCloseIconStyles,
       className: "euiModal__closeIcon",
       color: "text",
       "aria-label": closeModal

package/optimize/es/components/modal/modal.styles.js

@@ -0,0 +1,23 @@
+/*
+ * 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 } from '@emotion/react';
+import { euiShadowXLarge } from '../../themes/amsterdam/global_styling/mixins';
+import { euiCanAnimate, euiBreakpoint, euiAnimSlideInUp } from '../../global_styling';
+import { euiFormVariables } from '../form/form.styles';
+export var euiModalStyles = function euiModalStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiModal: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext), " display:flex;flex-direction:column;max-block-size:75vh;position:relative;background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";z-index:", euiTheme.levels.modal, ";min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";max-inline-size:calc(100vw - ", euiTheme.size.base, ");", euiCanAnimate, "{animation:", euiAnimSlideInUp(euiTheme.size.xxl), " ", euiTheme.animation.slow, " ", euiTheme.animation.bounce, ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{position:fixed;inset:0;border-radius:0;inline-size:100vw!important;min-inline-size:0!important;max-inline-size:none!important;max-block-size:100vh!important;}&:focus{outline:none;};label:euiModal;"),
+    // Variants
+    defaultMaxWidth: /*#__PURE__*/css("max-inline-size:min(\n        ", euiTheme.breakpoint.m, "px,\n        calc(100vw - ", euiTheme.size.base, ")\n      );;label:defaultMaxWidth;"),
+    confirmation: /*#__PURE__*/css("min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";", euiBreakpoint(euiThemeContext, ['xs', 's']), "{", euiShadowXLarge(euiThemeContext, {
+      reverse: true
+    }), " inset-block-start:auto;};label:confirmation;"),
+    euiModal__closeIcon: /*#__PURE__*/css("position:absolute;inset-inline-end:", euiTheme.size.xs, ";inset-block-start:", euiTheme.size.xs, ";z-index:3;;label:euiModal__closeIcon;")
+  };
+};

package/optimize/es/components/modal/modal_body.js

@@ -11,6 +11,8 @@ var _excluded = ["className", "children"];
  */
 import React from 'react';
 import classnames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { euiModalBodyStyles } from './modal_body.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiModalBody = function EuiModalBody(_ref) {
   var className = _ref.className,
@@ -18,9 +20,15 @@ export var EuiModalBody = function EuiModalBody(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classnames('euiModalBody', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiModalBodyStyles(euiTheme);
+  var cssStyles = [styles.euiModalBody];
+  var cssOverflowStyles = [styles.euiModalBody__overflow];
   return ___EmotionJSX("div", _extends({
+    css: cssStyles,
     className: classes
   }, rest), ___EmotionJSX("div", {
+    css: cssOverflowStyles,
     className: "euiModalBody__overflow"
   }, children));
 };

package/optimize/es/components/modal/modal_body.styles.js

@@ -0,0 +1,16 @@
+/*
+ * 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 } from '@emotion/react';
+import { euiYScrollWithShadows, euiBreakpoint } from '../../global_styling';
+export var euiModalBodyStyles = function euiModalBodyStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiModalBody: /*#__PURE__*/css("flex-grow:1;overflow:hidden;display:flex;flex-direction:column;&:last-of-type .euiModalBody__overflow{padding-block-end:", euiTheme.size.l, ";};label:euiModalBody;"),
+    euiModalBody__overflow: /*#__PURE__*/css(euiYScrollWithShadows(euiThemeContext), ";padding-inline:", euiTheme.size.l, ";padding-block:", euiTheme.size.s, ";", euiBreakpoint(euiThemeContext, ['xs', 's']), "{padding-block-end:", euiTheme.size.l, ";};label:euiModalBody__overflow;")
+  };
+};

package/optimize/es/components/modal/modal_footer.js

@@ -11,6 +11,8 @@ var _excluded = ["className", "children"];
  */
 import React from 'react';
 import classnames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { euiModalFooterStyles } from './modal_footer.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiModalFooter = function EuiModalFooter(_ref) {
   var className = _ref.className,
@@ -18,7 +20,11 @@ export var EuiModalFooter = function EuiModalFooter(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classnames('euiModalFooter', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiModalFooterStyles(euiTheme);
+  var cssStyles = [styles.euiModalFooter];
   return ___EmotionJSX("div", _extends({
+    css: cssStyles,
     className: classes
   }, rest), children);
 };

package/optimize/es/components/modal/modal_footer.styles.js

@@ -0,0 +1,15 @@
+/*
+ * 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 } from '@emotion/react';
+import { euiBreakpoint } from '../../global_styling';
+export var euiModalFooterStyles = function euiModalFooterStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiModalFooter: /*#__PURE__*/css("display:flex;justify-content:flex-end;padding-block:", euiTheme.size.base, " ", euiTheme.size.l, ";padding-inline:", euiTheme.size.l, ";flex-grow:0;flex-shrink:0;gap:", euiTheme.size.base, ";", euiBreakpoint(euiThemeContext, ['xs', 's']), "{background:", euiTheme.colors.lightestShade, ";padding-block:", euiTheme.size.m, ";padding-inline:", euiTheme.size.l, ";justify-content:stretch;gap:", euiTheme.size.s, ";>*{flex:1;}};label:euiModalFooter;")
+  };
+};

package/optimize/es/components/modal/modal_header.js

@@ -11,6 +11,8 @@ var _excluded = ["className", "children"];
  */
 import React from 'react';
 import classnames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { euiModalHeaderStyles } from './modal_header.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiModalHeader = function EuiModalHeader(_ref) {
   var className = _ref.className,
@@ -18,7 +20,11 @@ export var EuiModalHeader = function EuiModalHeader(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classnames('euiModalHeader', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiModalHeaderStyles(euiTheme);
+  var cssStyles = [styles.euiModalHeader];
   return ___EmotionJSX("div", _extends({
+    css: cssStyles,
     className: classes
   }, rest), children);
 };

package/optimize/es/components/modal/modal_header.styles.js

@@ -0,0 +1,14 @@
+/*
+ * 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 } from '@emotion/react';
+export var euiModalHeaderStyles = function euiModalHeaderStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiModalHeader: /*#__PURE__*/css("display:flex;justify-content:space-between;align-items:center;padding-inline:", euiTheme.size.l, " ", euiTheme.size.xxl, ";padding-block:", euiTheme.size.l, " ", euiTheme.size.base, ";flex-grow:0;flex-shrink:0;&+.euiModalFooter{padding-block-start:", euiTheme.size.s, ";};label:euiModalHeader;")
+  };
+};

package/optimize/es/components/modal/modal_header_title.js

@@ -11,6 +11,7 @@ var _excluded = ["className", "children"];
  */
 import React from 'react';
 import classnames from 'classnames';
+import { EuiTitle } from '../title';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiModalHeaderTitle = function EuiModalHeaderTitle(_ref) {
   var className = _ref.className,
@@ -18,7 +19,8 @@ export var EuiModalHeaderTitle = function EuiModalHeaderTitle(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classnames('euiModalHeader__title', className);
-  return ___EmotionJSX("div", _extends({
+  return ___EmotionJSX(EuiTitle, _extends({
+    size: "m",
     className: classes
   }, rest), /*#__PURE__*/React.isValidElement(children) ? children : ___EmotionJSX("h1", null, children));
 };