@elastic/eui 116.5.0 → 117.0.0-snapshot.1783954480414

package/optimize/lib/components/call_out/call_out.js

@@ -5,24 +5,29 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SIZES = exports.HEADINGS = exports.EuiCallOut = exports.COLORS = void 0;
+exports.EuiCallOut = exports.COLOR_TO_NOTIFICATION_ICON_MAP = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _services = require("../../services");
+var _global_styling = require("../../global_styling");
 var _icon = require("../icon");
 var _button = require("../button");
 var _text = require("../text");
 var _panel = require("../panel");
-var _spacer = require("../spacer");
 var _title = require("../title");
 var _i18n = require("../i18n");
 var _live_announcer = require("../accessibility/live_announcer");
+var _notification_icon = require("../notification_icon/notification_icon");
+var _use_layout_observer = require("./use_layout_observer");
+var _call_out_action = require("./call_out_action");
 var _call_out = require("./call_out.styles");
+var _notification_icon2 = require("../notification_icon/notification_icon.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["title", "color", "size", "iconType", "children", "className", "heading", "onDismiss", "dismissButtonProps", "announceOnMount"];
+var _excluded = ["title", "text", "color", "size", "iconType", "children", "actionProps", "className", "heading", "onDismiss", "dismissButtonProps", "announceOnMount", "style", "data-test-subj"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -32,17 +37,29 @@ var _excluded = ["title", "color", "size", "iconType", "children", "className",
  */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var COLORS = exports.COLORS = ['primary', 'success', 'warning', 'danger', 'accent'];
-var HEADINGS = exports.HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'];
-var SIZES = exports.SIZES = ['s', 'm'];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var COLOR_TO_NOTIFICATION_ICON_MAP = exports.COLOR_TO_NOTIFICATION_ICON_MAP = {
+  primary: 'info',
+  success: 'success',
+  warning: 'warning',
+  danger: 'error'
+};
+
+/** Get correct color with fallback */
+var getCallOutColor = function getCallOutColor(color) {
+  return typeof color === 'string' && COLOR_TO_NOTIFICATION_ICON_MAP.hasOwnProperty(color) ? color : 'primary';
+};
 var EuiCallOut = exports.EuiCallOut = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var title = _ref.title,
+    text = _ref.text,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'primary' : _ref$color,
+    _color = _ref$color === void 0 ? 'primary' : _ref$color,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
     iconType = _ref.iconType,
     children = _ref.children,
+    actionProps = _ref.actionProps,
     className = _ref.className,
     _ref$heading = _ref.heading,
     heading = _ref$heading === void 0 ? 'p' : _ref$heading,
@@ -50,13 +67,36 @@ var EuiCallOut = exports.EuiCallOut = /*#__PURE__*/(0, _react.forwardRef)(functi
     dismissButtonProps = _ref.dismissButtonProps,
     _ref$announceOnMount = _ref.announceOnMount,
     announceOnMount = _ref$announceOnMount === void 0 ? false : _ref$announceOnMount,
+    style = _ref.style,
+    dataTestSubj = _ref['data-test-subj'],
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+    euiTheme = _useEuiTheme.euiTheme;
+  var color = getCallOutColor(_color);
+
+  /* Uses resize observer to determine the container width/layout instead of native container queries,
+  because callouts can be placed in containers without defined size (absolute positioned, no-grow flex layout etc.)
+  where container queries would collapse by design instead of adjusting to the content dimensions. */
+  var layoutRef = (0, _use_layout_observer.useLayoutObserver)(size);
+  // Memoize the refs array so `useCombinedRefs` returns a stable callback-ref across renders
+  var combinedRefs = (0, _react.useMemo)(function () {
+    return [layoutRef, ref];
+  }, [layoutRef, ref]);
+  var panelRef = (0, _services.useCombinedRefs)(combinedRefs);
+  var borderColors = (0, _global_styling.useEuiBorderColorCSS)();
   var styles = (0, _services.useEuiMemoizedStyles)(_call_out.euiCallOutStyles);
-  var cssStyles = [styles.euiCallOut, onDismiss && styles.hasDismissButton.hasDimissButton, onDismiss && styles.hasDismissButton[size]];
+  var cssStyles = [styles.euiCallOut, borderColors[color], onDismiss && styles.hasDismissButton];
+  var highlightColorToken = (0, _euiThemeCommon.getTokenName)('borderStrong', color);
+  var typeColor = euiTheme.colors[highlightColorToken];
+  var cssVariables = (0, _react.useMemo)(function () {
+    return {
+      '--euiCallOutTypeColor': typeColor
+    };
+  }, [typeColor]);
   var classes = (0, _classnames.default)('euiCallOut', (0, _defineProperty2.default)({}, "euiCallOut--".concat(color), color), className);
   var dismissButton = (0, _react.useMemo)(function () {
     if (!onDismiss) return;
-    var cssStyles = [styles.dismissButton.euiCallOut__dismissButton, styles.dismissButton[size]];
+    var cssStyles = [styles.dismissButton.euiCallOut__dismissButton];
     return (0, _react2.jsx)(_i18n.EuiI18n, {
       token: "euiCallOut.dismissAriaLabel",
       default: "Dismiss this callout"
@@ -68,46 +108,101 @@ var EuiCallOut = exports.EuiCallOut = /*#__PURE__*/(0, _react.forwardRef)(functi
       }, dismissButtonProps, {
         iconType: "cross",
         color: color,
+        size: "xs",
         onClick: onDismiss
       }));
     });
-  }, [onDismiss, styles, color, size]);
+  }, [onDismiss, styles, color, dismissButtonProps]);
   var headerStyles = (0, _services.useEuiMemoizedStyles)(_call_out.euiCallOutHeaderStyles);
+  var iconStyles = (0, _services.useEuiMemoizedStyles)(_notification_icon2.euiNotificationIconStyles);
   var header = (0, _react.useMemo)(function () {
     if (!title) return;
     var H = heading;
-    var cssStyles = [headerStyles.euiCallOutHeader, headerStyles[color]];
+    var cssStyles = [headerStyles.euiCallOutHeader];
     return (0, _react2.jsx)(_title.EuiTitle, {
       size: size === 's' ? 'xxs' : 'xs',
       css: cssStyles
     }, (0, _react2.jsx)(H, {
       className: "euiCallOutHeader__title"
-    }, iconType && (0, _react2.jsx)(_icon.EuiIcon, {
-      css: headerStyles.euiCallOut__icon,
+    }, title));
+  }, [title, heading, size, headerStyles]);
+  var icon = (0, _react.useMemo)(function () {
+    if (!iconType) {
+      var _COLOR_TO_NOTIFICATIO;
+      var _iconType = (_COLOR_TO_NOTIFICATIO = COLOR_TO_NOTIFICATION_ICON_MAP[color]) !== null && _COLOR_TO_NOTIFICATIO !== void 0 ? _COLOR_TO_NOTIFICATIO : 'info';
+      return (0, _react2.jsx)(_notification_icon.EuiNotificationIcon, {
+        css: styles.icon,
+        type: _iconType,
+        size: size === 's' ? 'm' : 'l'
+      });
+    }
+    return (0, _react2.jsx)(_icon.EuiIcon, {
+      css: [styles.icon, size === 'm' && iconStyles.size.l, ";label:icon;"],
       type: iconType,
-      size: "m",
+      size: size === 's' ? 'm' : 'l',
       "aria-hidden": "true",
-      color: "inherit"
-    }), title));
-  }, [title, heading, iconType, size, color, headerStyles]);
-  var optionalChildren = children && (0, _react2.jsx)(_text.EuiText, {
+      color: typeColor
+    });
+  }, [iconType, color, size, typeColor, styles, iconStyles]);
+  var optionalChildren = (text || children) && (0, _react2.jsx)(_react.default.Fragment, null, text && (0, _react2.jsx)(_text.EuiText, {
+    size: "s",
+    color: "default",
+    className: "euiCallOut__text",
+    "data-test-subj": dataTestSubj && "".concat(dataTestSubj, "__message")
+  }, text), children && (0, _react2.jsx)(_text.EuiText, {
+    className: "euiCallOut__additionalContent",
     size: size === 's' ? 'xs' : 's',
-    color: "default"
-  }, children);
+    color: "default",
+    "data-test-subj": dataTestSubj && "".concat(dataTestSubj, "__content")
+  }, children));
+  var actionControls = (0, _react.useMemo)(function () {
+    var actionPrimaryProps = _objectSpread(_objectSpread({}, actionProps === null || actionProps === void 0 ? void 0 : actionProps.primary), {}, {
+      color: color
+    });
+    var actionSecondaryProps = _objectSpread(_objectSpread({}, actionProps === null || actionProps === void 0 ? void 0 : actionProps.secondary), {}, {
+      color: color
+    });
+    var hasActionPrimary = Boolean(actionProps === null || actionProps === void 0 ? void 0 : actionProps.primary);
+    var hasActionSecondary = Boolean(actionProps === null || actionProps === void 0 ? void 0 : actionProps.secondary);
+    if (!hasActionPrimary && !hasActionSecondary) return null;
+    var actionPrimary = hasActionPrimary && (0, _react2.jsx)(_call_out_action.EuiCallOutAction, (0, _extends2.default)({
+      actionType: "primary"
+    }, actionPrimaryProps));
+    var actionSecondary = hasActionSecondary && (0, _react2.jsx)(_call_out_action.EuiCallOutAction, (0, _extends2.default)({
+      actionType: "secondary"
+    }, actionSecondaryProps));
+    return (0, _react2.jsx)("div", {
+      css: styles.actions,
+      "data-test-subj": dataTestSubj && "".concat(dataTestSubj, "__actions")
+    }, actionPrimary, actionSecondary);
+  }, [actionProps, color, styles, dataTestSubj]);
+  var announcement = (0, _react.useMemo)(function () {
+    if (!announceOnMount || !(title || text || children)) return null;
+    return (0, _react2.jsx)(_live_announcer.EuiLiveAnnouncer, null, title, title && text && ",\xA0", text, (title || text) && children && ",\xA0", children);
+  }, [announceOnMount, title, text, children]);
   return (0, _react2.jsx)(_panel.EuiPanel, (0, _extends2.default)({
     borderRadius: "none",
     color: color,
-    css: cssStyles,
-    paddingSize: size === 's' ? 's' : 'm',
+    css: cssStyles
+    // uses custom padding
+    ,
+    paddingSize: "none",
     className: classes,
-    panelRef: ref,
-    grow: false
-  }, rest),
+    panelRef: panelRef,
+    grow: false,
+    style: _objectSpread(_objectSpread({}, cssVariables), style),
+    "data-size": size,
+    "data-test-subj": dataTestSubj
+  }, rest), (0, _react2.jsx)("div", {
+    css: styles.wrapper
+  }, (0, _react2.jsx)("div", {
+    css: styles.body
+  }, icon, (0, _react2.jsx)("div", {
+    css: styles.content
+  },
   // Note: the DOM position of the dismiss button matters to screen reader users.
   // We generally want them to have some context of _what_ they're dismissing,
   // instead of navigating to the dismiss button first before the callout content
-  header && optionalChildren ? (0, _react2.jsx)(_react.default.Fragment, null, header, dismissButton, (0, _react2.jsx)(_spacer.EuiSpacer, {
-    size: "s"
-  }), optionalChildren) : (0, _react2.jsx)(_react.default.Fragment, null, header || optionalChildren, dismissButton), announceOnMount && (title || children) && (0, _react2.jsx)(_live_announcer.EuiLiveAnnouncer, null, title && "".concat(title, ", "), children));
+  header && optionalChildren ? (0, _react2.jsx)(_react.default.Fragment, null, header, dismissButton, optionalChildren) : (0, _react2.jsx)(_react.default.Fragment, null, header || optionalChildren, dismissButton))), actionControls, announcement));
 });
 EuiCallOut.displayName = 'EuiCallOut';

package/optimize/lib/components/call_out/call_out.styles.js

@@ -6,59 +6,54 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiCallOutStyles = exports.euiCallOutHeaderStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
+/*
  * 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.
  */
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "173v8a4-euiCallOut__dismissButton",
-  styles: "position:absolute;label:euiCallOut__dismissButton;"
-} : {
-  name: "173v8a4-euiCallOut__dismissButton",
-  styles: "position:absolute;label:euiCallOut__dismissButton;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "192kin0-euiCallOut",
-  styles: "position:relative;label:euiCallOut;"
-} : {
-  name: "192kin0-euiCallOut",
-  styles: "position:relative;label:euiCallOut;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiCallOutStyles = exports.euiCallOutStyles = function euiCallOutStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
+
+/** Maximum reading width for `text` and `children` slots. */
+var TEXT_MAX_WIDTH = 1200;
+var euiCallOutStyles = exports.euiCallOutStyles = function euiCallOutStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var paddingSizes = {
+    s: euiTheme.size.m,
+    m: euiTheme.size.base
+  };
+  var borderRadius = euiTheme.border.radius.small;
+  var highlightSize = (0, _global_styling.mathWithUnits)([euiTheme.border.width.thin, euiTheme.border.width.thick], function (x, y) {
+    return x + y;
+  });
+  var highlightOffset = euiTheme.border.width.thin;
+  var highlightSizeOffset = (0, _global_styling.mathWithUnits)([highlightOffset], function (x) {
+    return x * 2;
+  });
+  var separatorSize = (0, _global_styling.mathWithUnits)([euiTheme.size.s, euiTheme.size.xxs], function (x, y) {
+    return x + y;
+  });
   return {
-    euiCallOut: _ref2,
-    hasDismissButton: {
-      // Ensure that only the top-most (first-child) title or child text
-      // has a padding-right on it (to account for the dismiss button)
-      hasDimissButton: /*#__PURE__*/(0, _react.css)("&>:first-child:is(.euiTitle),&>:first-child:is(.euiText)>:first-child{", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";};label:hasDimissButton;"),
-      // Ensure the callout always has enough height for the button
-      s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-height', euiTheme.size.xl), ";;label:s;"),
-      m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-height', euiTheme.size.xxl), ";;label:m;")
-    },
+    euiCallOut: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;max-inline-size:100%;align-items:center;border:", euiTheme.border.width.thin, " solid;border-radius:", borderRadius, ";&:focus{outline-offset:2px;}&::before{content:'';position:absolute;inset-block-start:-", euiTheme.border.width.thin, ";inset-inline-start:-", euiTheme.border.width.thin, ";block-size:calc(100% + ", highlightSizeOffset, ");border-inline-start:", highlightSize, " solid var(--euiCallOutTypeColor);border-start-start-radius:", borderRadius, ";border-end-start-radius:", borderRadius, ";pointer-events:none;", (0, _global_styling.preventForcedColors)(euiThemeContext), ";}&:where([data-size='s']){", (0, _global_styling.logicalShorthandCSS)('padding', "".concat(paddingSizes.s, " ").concat(paddingSizes.m)), ";}&:where([data-size='m']){padding:", paddingSizes.m, ";};label:euiCallOut;"),
+    // handles content + actions layout
+    wrapper: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;inline-size:100%;&:where([data-size='s'] &){gap:", euiTheme.size.s, ";}&:where([data-size='m'] &){gap:", euiTheme.size.m, ";}&:where([data-layout='wide'] &){flex-direction:row;gap:", euiTheme.size.xxl, ";};label:wrapper;"),
+    // handles icon + text layout
+    body: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:row;align-self:center;inline-size:100%;&:where([data-size='s'] &){gap:", euiTheme.size.s, ";}&:where([data-size='m'] &){gap:", euiTheme.size.m, ";};label:body;"),
+    // handles text layout
+    content: /*#__PURE__*/(0, _react.css)("align-self:center;inline-size:100%;max-inline-size:", TEXT_MAX_WIDTH, "px;&:where([data-size='s'] &){gap:", euiTheme.size.s, ";block-size:min-content;>.euiTitle{display:inline;", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xxs), ";}>.euiCallOut__text{display:inline;*{display:inline;}&:where(:not(:first-child)){&::before{content:'\xB7';display:inline-block;inline-size:", separatorSize, ";text-align:center;color:", euiTheme.colors.textHeading, ";}}}.euiCallOut__additionalContent:not(:first-child){", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.xs), ";}}&:where([data-size='m'] &){display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";.euiCallOut__text+.euiCallOut__additionalContent{", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.s), ";}};label:content;"),
+    hasDismissButton: /*#__PURE__*/(0, _react.css)("&:where([data-size]){padding-inline-end:", euiTheme.size.xxl, ";};label:hasDismissButton;"),
     dismissButton: {
-      euiCallOut__dismissButton: _ref,
-      s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('right', euiTheme.size.xs), ";;label:s;"),
-      m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('right', euiTheme.size.s), ";;label:m;")
-    }
+      euiCallOut__dismissButton: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('right', euiTheme.size.s), ";;label:euiCallOut__dismissButton;")
+    },
+    icon: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('margin-vertical', euiTheme.size.xxs), ";;label:icon;"),
+    actions: /*#__PURE__*/(0, _react.css)("display:flex;gap:", euiTheme.size.s, ";&:where([data-size='s'] &){", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.l), ";}&:where([data-size='m'] &){", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xl), ";}&:where([data-layout='superNarrow'] &){flex-wrap:wrap;*:has(.euiCallOutAction),.euiCallOutAction{inline-size:100%;}}&:where([data-layout='wide'] &){", (0, _global_styling.logicalCSS)('margin-left', '0'), " align-self:center;flex-shrink:0;flex-direction:row-reverse;};label:actions;")
   };
 };
-var euiCallOutHeaderStyles = exports.euiCallOutHeaderStyles = function euiCallOutHeaderStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+var euiCallOutHeaderStyles = exports.euiCallOutHeaderStyles = function euiCallOutHeaderStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
   return {
-    euiCallOutHeader: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.medium, ";", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'
+    euiCallOutHeader: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.bold, ";", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'
     // In case it's nested inside EuiText
-    ), ";;label:euiCallOutHeader;"),
-    primary: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textPrimary, ";;label:primary;"),
-    success: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textSuccess, ";;label:success;"),
-    warning: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textWarning, ";;label:warning;"),
-    danger: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textDanger, ";;label:danger;"),
-    accent: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textAccent, ";;label:accent;"),
-    euiCallOut__icon: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('top', '-1px'), " ", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.s), ";;label:euiCallOut__icon;")
+    ), "&&{color:", euiTheme.colors.textHeading, ";};label:euiCallOutHeader;")
   };
 };

package/optimize/lib/components/call_out/call_out_action.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiCallOutAction = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _button2 = require("../button");
+var _with_popover = require("../popover/with_popover");
+var _with_tooltip = require("../tool_tip/with_tooltip");
+var _react2 = require("@emotion/react");
+var _excluded = ["children", "actionType", "color", "tooltipProps", "popoverProps", "className"];
+/*
+ * 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.
+ */
+var EuiCallOutAction = exports.EuiCallOutAction = function EuiCallOutAction(_ref) {
+  var children = _ref.children,
+    _ref$actionType = _ref.actionType,
+    actionType = _ref$actionType === void 0 ? 'primary' : _ref$actionType,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'primary' : _ref$color,
+    tooltipProps = _ref.tooltipProps,
+    popoverProps = _ref.popoverProps,
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var classes = (0, _classnames.default)('euiCallOutAction', className);
+  if (actionType === 'primary') {
+    var button = (0, _react2.jsx)(_button2.EuiButton, (0, _extends2.default)({
+      className: classes,
+      size: "s",
+      color: color
+    }, rest), children);
+    return (0, _with_popover.withEuiPopover)((0, _with_tooltip.withEuiToolTip)(button, tooltipProps), popoverProps);
+  } else {
+    var _button = (0, _react2.jsx)(_button2.EuiButtonEmpty, (0, _extends2.default)({
+      className: classes,
+      size: "s",
+      color: color
+    }, rest), children);
+    return (0, _with_popover.withEuiPopover)((0, _with_tooltip.withEuiToolTip)(_button, tooltipProps), popoverProps);
+  }
+};

package/optimize/lib/components/call_out/types.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZES = exports.HEADINGS = exports.COLORS = void 0;
+/*
+ * 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.
+ */
+
+var COLORS = exports.COLORS = ['primary', 'success', 'warning', 'danger'];
+var SIZES = exports.SIZES = ['s', 'm'];
+var HEADINGS = exports.HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'];

package/optimize/lib/components/call_out/use_layout_observer.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLayoutObserver = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _resize_observer = require("../observer/resize_observer/resize_observer");
+/*
+ * 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.
+ */
+
+var SUPER_NARROW_WIDTH = 400;
+var WIDE_BREAKPOINTS = {
+  s: 800,
+  m: 1000
+};
+
+/**
+ * Observes the rendered width and sets `data-layout` on the root
+ * element so that CSS can respond to size changes.
+ *
+ * This is an alternative to native CSS container queries. Its purpose is to handle cases where
+ * container queries would collapse if the element is placed inside a container without a defined size.
+ */
+var useLayoutObserver = exports.useLayoutObserver = function useLayoutObserver(size) {
+  var elementRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var element = elementRef.current;
+    if (!element || !_resize_observer.hasResizeObserver) return;
+    var wide = WIDE_BREAKPOINTS[size];
+    var observer = new ResizeObserver(function (_ref) {
+      var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+        entry = _ref2[0];
+      var width = entry.borderBoxSize[0].inlineSize;
+      if (width <= SUPER_NARROW_WIDTH) {
+        element.setAttribute('data-layout', 'superNarrow');
+      } else if (width >= wide) {
+        element.setAttribute('data-layout', 'wide');
+      } else {
+        element.removeAttribute('data-layout');
+      }
+    });
+    observer.observe(element);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [size]);
+  return elementRef;
+};

package/optimize/lib/components/flyout/flyout.component.js

@@ -430,6 +430,8 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
     }),
     flyoutZIndex = _useEuiFlyoutZIndex.flyoutZIndex,
     maskZIndex = _useEuiFlyoutZIndex.maskZIndex;
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+    euiTheme = _useEuiTheme.euiTheme;
 
   /**
    * Inline styles position the flyout inside the reference container's
@@ -483,14 +485,17 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
         containerRelativeWidth = size;
       }
 
-      // All container-scoped flyouts get top/height from the container rect.
-      // Reset minInlineSize to 0 so that the CSS `min-inline-size` (which
-      // resolves against the viewport for `position: fixed`) does not
-      // prevent the container-relative width constraints from taking effect.
+      // Pixel-based min-widths for named sizes within containers
+      var containerMinWidthMap = {
+        s: Math.round(euiTheme.breakpoint.m * 0.42),
+        m: Math.round(euiTheme.breakpoint.m * 0.5)
+      };
+      var sizeMinWidth = typeof size === 'string' ? containerMinWidthMap[size] : undefined;
+      var containerMinInlineSize = sizeMinWidth !== undefined ? Math.min(sizeMinWidth, containerMaxWidth) : 0;
       containerPositionStyles = {
         top: containerRect.top,
         height: containerRect.height,
-        minInlineSize: 0
+        minInlineSize: containerMinInlineSize
       };
       if (isChildFlyout) {
         // Child flyouts position themselves relative to the main flyout.
@@ -536,7 +541,7 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
       }
     }
     return _objectSpread(_objectSpread(_objectSpread({}, style), composedStyles), containerPositionStyles);
-  }, [style, size, layoutMode, siblingFlyoutId, siblingFlyoutWidth, maxWidth, flyoutZIndex, containerRect, side, isChildFlyout]);
+  }, [style, size, layoutMode, siblingFlyoutId, siblingFlyoutWidth, maxWidth, flyoutZIndex, containerRect, side, isChildFlyout, euiTheme.breakpoint.m]);
   var styles = (0, _services.useEuiMemoizedStyles)(_flyout.euiFlyoutStyles);
   var cssStyles = [styles.euiFlyout, styles.paddingSizes[paddingSize], (0, _const2.isEuiFlyoutSizeNamed)(size) && styles[size], maxWidth === false && styles.noMaxWidth, isPushed ? styles.push.push : styles.overlay.overlay, isPushed ? styles.push[side] : styles.overlay[side], !hasAnimation && styles.noAnimation, styles[side]];
   var classes = (0, _classnames.default)('euiFlyout', isChildFlyout && hasChildBackground && 'euiFlyout--hasChildBackground', className);

package/optimize/lib/components/flyout/flyout.styles.js

@@ -165,7 +165,7 @@ var composeFlyoutPadding = function composeFlyoutPadding(euiThemeContext, paddin
       return x / 1.5;
     }), " ").concat(euiTheme.size.l, ";")
   };
-  return "\n    .euiFlyoutHeader {\n      ".concat((0, _global_styling.logicalCSS)('padding-horizontal', paddingModifierMap[paddingSize]), "\n      ").concat((0, _global_styling.logicalCSS)('padding-top', paddingModifierMap[paddingSize]), "\n    }\n\n    [class*='euiFlyoutHeader-hasBorder'] {\n      ").concat((0, _global_styling.logicalCSS)('padding-bottom', paddingModifierMap[paddingSize]), "\n    }\n\n    .euiFlyoutBody__overflowContent {\n      padding: ").concat(paddingModifierMap[paddingSize], ";\n    }\n\n    .euiFlyoutBody__banner .euiCallOut {\n      ").concat((0, _global_styling.logicalCSS)('padding-horizontal', paddingModifierMap[paddingSize]), "\n    }\n\n    .euiFlyoutFooter {\n      padding: ").concat(footerPaddingSizes[paddingSize], ";\n    }\n  ");
+  return "\n    .euiFlyoutHeader {\n      ".concat((0, _global_styling.logicalCSS)('padding-horizontal', paddingModifierMap[paddingSize]), "\n      ").concat((0, _global_styling.logicalCSS)('padding-top', paddingModifierMap[paddingSize]), "\n    }\n\n    [class*='euiFlyoutHeader-hasBorder'] {\n      ").concat((0, _global_styling.logicalCSS)('padding-bottom', paddingModifierMap[paddingSize]), "\n    }\n\n    .euiFlyoutBody__overflowContent {\n      padding: ").concat(paddingModifierMap[paddingSize], ";\n    }\n\n    .euiFlyoutFooter {\n      padding: ").concat(footerPaddingSizes[paddingSize], ";\n    }\n  ");
 };
 
 /**

package/optimize/lib/components/flyout/flyout_body.styles.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiFlyoutBodyStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-var _high_contrast = require("../../global_styling/functions/high_contrast");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -26,8 +25,6 @@ var euiFlyoutBodyStyles = exports.euiFlyoutBodyStyles = function euiFlyoutBodySt
         side: 'end'
       }), ";;label:hasBanner;")
     },
-    euiFlyoutBody__banner: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSSWithFallback)('overflow-x', 'hidden'), " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-      preferred: (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin)
-    }), ";;label:euiFlyoutBody__banner;")
+    euiFlyoutBody__banner: /*#__PURE__*/(0, _react.css)("overflow:hidden;.euiCallOut{", (0, _global_styling.logicalCSS)('margin-top', "".concat(euiTheme.size.s)), " ", (0, _global_styling.logicalCSS)('margin-left', "".concat(euiTheme.size.l)), " ", (0, _global_styling.logicalCSS)('margin-right', "".concat(euiTheme.size.l)), ";}.euiFlyout:not(:has(.euiFlyoutHeader)) &{.euiCallOut{", (0, _global_styling.logicalCSS)('margin-right', "".concat(euiTheme.size.xxl)), ";}};label:euiFlyoutBody__banner;")
   };
 };

package/optimize/lib/components/icon/assets/add_to_chat.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _excluded = ["title", "titleId"];
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var EuiIconAddToChat = function EuiIconAddToChat(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("path", {
+    fillRule: "evenodd",
+    d: "M8 0a1.5 1.5 0 0 1 .5 2.912V4H11a3 3 0 0 1 3 3h1l.102.005A1 1 0 0 1 16 8v1h-1V8h-1v1h-1V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v7h6v1H3a1 1 0 0 1-1-1v-2H1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1a3 3 0 0 1 3-3h2.5V2.912A1.498 1.498 0 0 1 8 0ZM1 11h1V8H1v3ZM8 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
+    clipRule: "evenodd"
+  }), (0, _react2.jsx)("path", {
+    d: "M10.447 11.523C9.826 12.767 8.59 13 8 13c-.59 0-1.826-.233-2.447-1.477l.894-.447C6.826 11.833 7.59 12 8 12c.41 0 1.174-.167 1.553-.924l.894.447Z"
+  }), (0, _react2.jsx)("path", {
+    fillRule: "evenodd",
+    d: "M5.5 7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm5-1a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
+    clipRule: "evenodd"
+  }), (0, _react2.jsx)("path", {
+    d: "M14 13h2v1h-2v2h-1v-2h-2v-1h2v-2h1v2Z"
+  }));
+};
+var icon = exports.icon = EuiIconAddToChat;