@elastic/eui 106.1.0 → 106.2.0-snapshot.1757009122780

package/optimize/lib/components/flyout/manager/provider.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFlyoutManager = exports.EuiFlyoutManagerContext = exports.EuiFlyoutManager = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("./hooks");
+var _layout_mode = require("./layout_mode");
+var _react2 = require("@emotion/react");
+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; }
+/*
+ * 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.
+ */
+
+/**
+ * React context that exposes the Flyout Manager API (state + actions).
+ */
+var EuiFlyoutManagerContext = exports.EuiFlyoutManagerContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+/**
+ * Provides the Flyout Manager API via context and runs layout-mode logic.
+ */
+var EuiFlyoutManager = exports.EuiFlyoutManager = function EuiFlyoutManager(_ref) {
+  var children = _ref.children;
+  var api = (0, _hooks.useFlyoutManagerReducer)();
+  return (0, _react2.jsx)(EuiFlyoutManagerContext.Provider, {
+    value: api
+  }, (0, _react2.jsx)(EuiFlyoutManagerContainer, null, children));
+};
+var EuiFlyoutManagerContainer = function EuiFlyoutManagerContainer(_ref2) {
+  var children = _ref2.children;
+  (0, _layout_mode.useApplyFlyoutLayoutMode)();
+  return (0, _react2.jsx)(_react.default.Fragment, null, children);
+};
+
+/** Hook to access the Flyout Manager API from context. */
+var useFlyoutManager = exports.useFlyoutManager = function useFlyoutManager() {
+  return (0, _react.useContext)(EuiFlyoutManagerContext);
+};

package/optimize/lib/components/flyout/manager/reducer.js

@@ -0,0 +1,198 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.flyoutManagerReducer = flyoutManagerReducer;
+exports.initialState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _actions = require("./actions");
+var _const = require("./const");
+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; } /*
+ * 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.
+ */
+/**
+ * Default flyout manager state used to initialize the reducer.
+ */
+var initialState = exports.initialState = {
+  sessions: [],
+  flyouts: [],
+  layoutMode: _const.LAYOUT_MODE_SIDE_BY_SIDE
+};
+
+/**
+ * Reducer handling all flyout manager actions and state transitions.
+ */
+function flyoutManagerReducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var action = arguments.length > 1 ? arguments[1] : undefined;
+  switch (action.type) {
+    // Register a flyout.
+    // - Ignore duplicates by `flyoutId`.
+    // - For a `main` flyout, start a new session { main, child: null }.
+    // - For a `child` flyout, attach it to the most recent session; if no
+    //   session exists, do nothing (invalid child without a parent).
+    case _actions.ACTION_ADD:
+      {
+        var flyoutId = action.flyoutId,
+          level = action.level,
+          size = action.size;
+        if (state.flyouts.some(function (f) {
+          return f.flyoutId === flyoutId;
+        })) {
+          return state;
+        }
+        var newFlyoutState = {
+          level: level,
+          flyoutId: flyoutId,
+          size: size,
+          activityStage: _const.STAGE_OPENING
+        };
+        var newFlyouts = [].concat((0, _toConsumableArray2.default)(state.flyouts), [newFlyoutState]);
+        if (level === _const.LEVEL_MAIN) {
+          var newSession = {
+            main: flyoutId,
+            child: null
+          };
+          return _objectSpread(_objectSpread({}, state), {}, {
+            sessions: [].concat((0, _toConsumableArray2.default)(state.sessions), [newSession]),
+            flyouts: newFlyouts
+          });
+        }
+        if (state.sessions.length === 0) {
+          return state;
+        }
+        var updatedSessions = (0, _toConsumableArray2.default)(state.sessions);
+        var currentSessionIndex = updatedSessions.length - 1;
+        updatedSessions[currentSessionIndex] = _objectSpread(_objectSpread({}, updatedSessions[currentSessionIndex]), {}, {
+          child: flyoutId
+        });
+        return _objectSpread(_objectSpread({}, state), {}, {
+          sessions: updatedSessions,
+          flyouts: newFlyouts
+        });
+      }
+
+    // Unregister a flyout and update sessions accordingly.
+    // - When closing a `main` flyout, drop its entire session and all associated flyouts.
+    // - When closing a `child` flyout, clear the child pointer on the most
+    //   recent session if it matches.
+    case _actions.ACTION_CLOSE:
+      {
+        var removedFlyout = state.flyouts.find(function (f) {
+          return f.flyoutId === action.flyoutId;
+        });
+        if (!removedFlyout) {
+          return state;
+        }
+        if (removedFlyout.level === _const.LEVEL_MAIN) {
+          // Find the session that contains this main flyout
+          var sessionToRemove = state.sessions.find(function (session) {
+            return session.main === action.flyoutId;
+          });
+          if (sessionToRemove) {
+            // Remove all flyouts associated with this session (main + child)
+            var flyoutsToRemove = new Set([action.flyoutId]);
+            if (sessionToRemove.child) {
+              flyoutsToRemove.add(sessionToRemove.child);
+            }
+            var _newFlyouts = state.flyouts.filter(function (f) {
+              return !flyoutsToRemove.has(f.flyoutId);
+            });
+            var newSessions = state.sessions.filter(function (session) {
+              return session.main !== action.flyoutId;
+            });
+            return _objectSpread(_objectSpread({}, state), {}, {
+              sessions: newSessions,
+              flyouts: _newFlyouts
+            });
+          }
+        }
+
+        // Handle child flyout closing (existing logic)
+        var _newFlyouts2 = state.flyouts.filter(function (f) {
+          return f.flyoutId !== action.flyoutId;
+        });
+        if (state.sessions.length === 0) {
+          return _objectSpread(_objectSpread({}, state), {}, {
+            flyouts: _newFlyouts2
+          });
+        }
+        var _updatedSessions = (0, _toConsumableArray2.default)(state.sessions);
+        var _currentSessionIndex = _updatedSessions.length - 1;
+        if (_updatedSessions[_currentSessionIndex].child === action.flyoutId) {
+          _updatedSessions[_currentSessionIndex] = _objectSpread(_objectSpread({}, _updatedSessions[_currentSessionIndex]), {}, {
+            child: null
+          });
+        }
+        return _objectSpread(_objectSpread({}, state), {}, {
+          sessions: _updatedSessions,
+          flyouts: _newFlyouts2
+        });
+      }
+
+    // Mark the provided flyout ID as the active child for the latest session.
+    case _actions.ACTION_SET_ACTIVE:
+      {
+        // No-op when no session exists.
+        if (state.sessions.length === 0) {
+          return state;
+        }
+        var _updatedSessions2 = (0, _toConsumableArray2.default)(state.sessions);
+        var _currentSessionIndex2 = _updatedSessions2.length - 1;
+        _updatedSessions2[_currentSessionIndex2] = _objectSpread(_objectSpread({}, _updatedSessions2[_currentSessionIndex2]), {}, {
+          child: action.flyoutId
+        });
+        return _objectSpread(_objectSpread({}, state), {}, {
+          sessions: _updatedSessions2
+        });
+      }
+
+    // Persist a flyout's measured width (px). Used for responsive layout
+    // calculations, e.g., deciding stacked vs side-by-side.
+    case _actions.ACTION_SET_WIDTH:
+      {
+        var _flyoutId = action.flyoutId,
+          width = action.width;
+        var updatedFlyouts = state.flyouts.map(function (flyout) {
+          return flyout.flyoutId === _flyoutId ? _objectSpread(_objectSpread({}, flyout), {}, {
+            width: width
+          }) : flyout;
+        });
+        return _objectSpread(_objectSpread({}, state), {}, {
+          flyouts: updatedFlyouts
+        });
+      }
+
+    // Switch global layout mode for managed flyouts.
+    case _actions.ACTION_SET_LAYOUT_MODE:
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          layoutMode: action.layoutMode
+        });
+      }
+
+    // Update a flyout's activity stage in state
+    case _actions.ACTION_SET_ACTIVITY_STAGE:
+      {
+        var _flyoutId2 = action.flyoutId;
+        var _updatedFlyouts = state.flyouts.map(function (flyout) {
+          return flyout.flyoutId === _flyoutId2 ? _objectSpread(_objectSpread({}, flyout), {}, {
+            activityStage: action.activityStage
+          }) : flyout;
+        });
+        return _objectSpread(_objectSpread({}, state), {}, {
+          flyouts: _updatedFlyouts
+        });
+      }
+    default:
+      return state;
+  }
+}

package/optimize/lib/components/flyout/manager/selectors.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSession = exports.useParentFlyoutSize = exports.useIsFlyoutRegistered = exports.useIsFlyoutActive = exports.useHasChildFlyout = exports.useHasActiveSession = exports.useFlyoutWidth = exports.useFlyout = exports.useCurrentSession = exports.useCurrentMainFlyout = exports.useCurrentChildFlyout = void 0;
+var _provider = require("./provider");
+/*
+ * 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 useSession = exports.useSession = function useSession(flyoutId) {
+  var context = (0, _provider.useFlyoutManager)();
+  if (!context) {
+    return null;
+  }
+  return context.state.sessions.find(function (s) {
+    return s.main === flyoutId || s.child === flyoutId;
+  }) || null;
+};
+
+/** True when any managed flyout session is currently active. */
+var useHasActiveSession = exports.useHasActiveSession = function useHasActiveSession() {
+  return !!useCurrentSession();
+};
+
+/** True if the given `flyoutId` is the main or child flyout in the latest session. */
+var useIsFlyoutActive = exports.useIsFlyoutActive = function useIsFlyoutActive(flyoutId) {
+  var currentSession = useCurrentSession();
+  return (currentSession === null || currentSession === void 0 ? void 0 : currentSession.main) === flyoutId || (currentSession === null || currentSession === void 0 ? void 0 : currentSession.child) === flyoutId;
+};
+var useFlyout = exports.useFlyout = function useFlyout(flyoutId) {
+  var context = (0, _provider.useFlyoutManager)();
+  if (!context || !flyoutId) {
+    return null;
+  }
+  return context.state.flyouts.find(function (f) {
+    return f.flyoutId === flyoutId;
+  }) || null;
+};
+var useIsFlyoutRegistered = exports.useIsFlyoutRegistered = function useIsFlyoutRegistered(flyoutId) {
+  var context = (0, _provider.useFlyoutManager)();
+  if (!context || !flyoutId) {
+    return false;
+  }
+  return context.state.flyouts.some(function (f) {
+    return f.flyoutId === flyoutId;
+  });
+};
+
+/** The most recent flyout session or `null` if none. */
+var useCurrentSession = exports.useCurrentSession = function useCurrentSession() {
+  var context = (0, _provider.useFlyoutManager)();
+  if (!context) return null;
+  return context.state.sessions[context.state.sessions.length - 1] || null;
+};
+
+/** The registered state of the current session's main flyout, if present. */
+var useCurrentMainFlyout = exports.useCurrentMainFlyout = function useCurrentMainFlyout() {
+  var currentSession = useCurrentSession();
+  var mainFlyoutId = currentSession === null || currentSession === void 0 ? void 0 : currentSession.main;
+  return useFlyout(mainFlyoutId);
+};
+
+/** The registered state of the current session's child flyout, if present. */
+var useCurrentChildFlyout = exports.useCurrentChildFlyout = function useCurrentChildFlyout() {
+  var currentSession = useCurrentSession();
+  var childFlyoutId = currentSession === null || currentSession === void 0 ? void 0 : currentSession.child;
+  return useFlyout(childFlyoutId);
+};
+
+/** The measured width (px) of the specified flyout, or `null` if unknown. */
+var useFlyoutWidth = exports.useFlyoutWidth = function useFlyoutWidth(flyoutId) {
+  var _useFlyout;
+  return (_useFlyout = useFlyout(flyoutId)) === null || _useFlyout === void 0 ? void 0 : _useFlyout.width;
+};
+
+/** The configured size of the parent (main) flyout for a given child flyout ID. */
+var useParentFlyoutSize = exports.useParentFlyoutSize = function useParentFlyoutSize(childFlyoutId) {
+  var session = useSession(childFlyoutId);
+  var parentFlyout = useFlyout(session === null || session === void 0 ? void 0 : session.main);
+  return parentFlyout === null || parentFlyout === void 0 ? void 0 : parentFlyout.size;
+};
+
+/** True if the provided `flyoutId` is the main flyout and it currently has a child. */
+var useHasChildFlyout = exports.useHasChildFlyout = function useHasChildFlyout(flyoutId) {
+  var session = useSession(flyoutId);
+  return !!(session !== null && session !== void 0 && session.child);
+};

package/optimize/lib/components/flyout/manager/validation.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createValidationErrorMessage = createValidationErrorMessage;
+exports.isNamedSize = isNamedSize;
+exports.validateFlyoutSize = validateFlyoutSize;
+exports.validateManagedFlyoutSize = validateManagedFlyoutSize;
+exports.validateSizeCombination = validateSizeCombination;
+var _const = require("../const");
+var _const2 = require("./const");
+/*
+ * 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.
+ */
+
+/**
+ * Business rules for flyout sizes:
+ * - Managed flyouts should only accept "named" sizes (s, m, l, fill)
+ * - Parent and child can't both be 'm'
+ * - Parent and child can't both be 'fill'
+ * - Parent can't be 'l' if there is a child
+ */
+
+/**
+ * Checks if a size is a named size (s, m, l)
+ */
+function isNamedSize(size) {
+  return _const.FLYOUT_SIZES.includes(size);
+}
+
+/**
+ * Validates that a managed flyout only uses named sizes
+ */
+function validateManagedFlyoutSize(size, flyoutId, level) {
+  if (!isNamedSize(size)) {
+    var namedSizes = _const.FLYOUT_SIZES.join(', ');
+    return {
+      type: 'INVALID_SIZE_TYPE',
+      message: "Managed flyouts must use named sizes (".concat(namedSizes, "). Received: ").concat(size),
+      flyoutId: flyoutId,
+      level: level,
+      size: "".concat(size)
+    };
+  }
+  return null;
+}
+
+/**
+ * Validates size combinations for parent-child flyouts
+ */
+function validateSizeCombination(parentSize, childSize) {
+  // Parent and child can't both be 'm'
+  if (parentSize === 'm' && childSize === 'm') {
+    return {
+      type: 'INVALID_SIZE_COMBINATION',
+      message: 'Parent and child flyouts cannot both be size "m"',
+      size: childSize
+    };
+  }
+
+  // Parent and child can't both be 'fill'
+  if (parentSize === 'fill' && childSize === 'fill') {
+    return {
+      type: 'INVALID_SIZE_COMBINATION',
+      message: 'Parent and child flyouts cannot both be size "fill"',
+      size: childSize
+    };
+  }
+
+  // Parent can't be 'l' if there is a child
+  if (parentSize === 'l') {
+    return {
+      type: 'INVALID_SIZE_COMBINATION',
+      message: 'Parent flyouts cannot be size "l" when there is a child flyout',
+      size: parentSize
+    };
+  }
+  return null;
+}
+
+/**
+ * Comprehensive validation for flyout size rules
+ */
+function validateFlyoutSize(size, flyoutId, level, parentSize) {
+  // First validate that managed flyouts use named sizes
+  var sizeTypeError = validateManagedFlyoutSize(size, flyoutId, level);
+  if (sizeTypeError) {
+    return sizeTypeError;
+  }
+
+  // If this is a child flyout and we have parent size, validate combination
+  if (level === _const2.LEVEL_CHILD && parentSize && isNamedSize(size)) {
+    var combinationError = validateSizeCombination(parentSize, size);
+    if (combinationError) {
+      combinationError.flyoutId = flyoutId;
+      combinationError.level = level;
+      return combinationError;
+    }
+  }
+  return null;
+}
+
+/**
+ * Creates a user-friendly error message for validation errors
+ */
+function createValidationErrorMessage(error) {
+  var prefix = "EuiFlyout validation error: ";
+  switch (error.type) {
+    case 'INVALID_SIZE_TYPE':
+      return "".concat(prefix).concat(error.message);
+    case 'INVALID_SIZE_COMBINATION':
+      return "".concat(prefix).concat(error.message);
+    default:
+      return "".concat(prefix, "Unknown validation error");
+  }
+}

package/optimize/lib/components/form/field_password/field_password.styles.js

@@ -26,6 +26,7 @@ var euiFieldPasswordStyles = exports.euiFieldPasswordStyles = function euiFieldP
   return {
     euiFieldPassword: /*#__PURE__*/(0, _react.css)(formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldPassword;"),
     // Only remove Edge's internal reveal button if we're providing a custom one
+    // This pseudo-element is still supported in Chromium-based Edge.
     withToggle: _ref,
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,

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

@@ -176,7 +176,7 @@ var euiFormControlInvalidStyles = exports.euiFormControlInvalidStyles = function
   var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var form = euiFormVariables(euiThemeContext);
   var invalidColor = euiTheme.colors.danger;
-  return isRefreshVariant ? "\n      --euiFormControlStateColor: ".concat(form.borderInvalid, ";\n      --euiFormControlStateHoverColor: ").concat(form.borderInvalidHovered, ";\n      --euiFormControlStateWidth: ").concat(highContrastMode === 'preferred' ? euiTheme.border.width.thick : euiTheme.border.width.thin, ";\n      \n      ").concat(euiFormControlHighlightBorderStyles, "\n      ").concat(euiFormControlShowBackgroundLine(euiThemeContext, invalidColor), "\n    ") : "\n      --euiFormControlStateColor: ".concat(invalidColor, ";\n      ").concat(euiFormControlShowBackgroundLine(euiThemeContext, invalidColor), "\n    ");
+  return isRefreshVariant ? "\n      --euiFormControlStateColor: ".concat(form.borderInvalid, ";\n      --euiFormControlStateHoverColor: ").concat(form.borderInvalidHovered, ";\n      --euiFormControlStateWidth: ").concat(highContrastMode === 'preferred' ? euiTheme.border.width.thick : euiTheme.border.width.thin, ";\n\n      ").concat(euiFormControlHighlightBorderStyles, "\n      ").concat(euiFormControlShowBackgroundLine(euiThemeContext, invalidColor), "\n    ") : "\n      --euiFormControlStateColor: ".concat(invalidColor, ";\n      ").concat(euiFormControlShowBackgroundLine(euiThemeContext, invalidColor), "\n    ");
 };
 var euiFormControlDisabledStyles = exports.euiFormControlDisabledStyles = function euiFormControlDisabledStyles(euiThemeContext) {
   var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
@@ -245,7 +245,7 @@ var euiFormControlShowBackgroundLine = exports.euiFormControlShowBackgroundLine
   }), ");\n      background-position: ").concat(euiTheme.border.width.thin, ";\n      background-image: url(\"").concat(refreshInlineSVG, "\");\n    ") : "\n    background-size: 100% ".concat(stateUnderlineHeight, ";\n    background-image: url(\"").concat(inlineSVG, "\");\n  ");
 };
 var euiPlaceholderPerBrowser = function euiPlaceholderPerBrowser(content) {
-  return "\n  &::-webkit-input-placeholder { ".concat(content, " }\n  &::-moz-placeholder { ").concat(content, " }\n  &:-ms-input-placeholder { ").concat(content, " }\n  &:-moz-placeholder { ").concat(content, " }\n  &::placeholder { ").concat(content, " }\n");
+  return "\n  &::-webkit-input-placeholder { ".concat(content, " }\n  &::-moz-placeholder { ").concat(content, " }\n  &:-moz-placeholder { ").concat(content, " }\n  &::placeholder { ").concat(content, " }\n");
 };
 
 /**

package/optimize/lib/components/form/form_control_layout/form_control_layout.styles.js

@@ -77,7 +77,7 @@ var euiFormControlLayoutSideNodeStyles = exports.euiFormControlLayoutSideNodeSty
   var appendStyles = "\n    position: relative;\n    ".concat((0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.border.width.thin)), "\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      border-inline-start: \n        ").concat(euiTheme.border.width.thin, " solid ").concat(form.borderColor, ";\n    }\n  ");
   var prependStyles = "\n    position: relative;\n    ".concat((0, _global_styling.logicalCSS)('margin-right', "-".concat(euiTheme.border.width.thin)), "\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      pointer-events: none;\n      border-inline-end: \n        ").concat(euiTheme.border.width.thin, " solid ").concat(form.borderColor, ";\n    }\n  ");
   return {
-    euiFormControlLayout__side: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.euiTextTruncate)('50%'), " flex-shrink:0;display:flex;align-items:center;gap:", euiTheme.size.xs, ";background-color:", form.appendPrependBackground, ";", buttons, "{transform:none!important;line-height:1;&:focus-visible{outline-offset:-", euiTheme.focus.width, ";}}", text, "{cursor:default;overflow:hidden;text-overflow:ellipsis;}&:not(:has(> ", buttons, ":first-child, > *:first-child > ", buttons, ")){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), ";}&:not(:has(> ", buttons, ":last-child, > *:last-child > ", buttons, ")){", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.s), ";};label:euiFormControlLayout__side;"),
+    euiFormControlLayout__side: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.euiTextTruncate)('50%'), " flex-shrink:0;display:flex;align-items:center;gap:", euiTheme.size.xs, ";background-color:", form.appendPrependBackground, ";", buttons, "{transform:none!important;&:focus-visible{outline-offset:-", euiTheme.focus.width, ";}}", text, "{cursor:default;overflow:hidden;text-overflow:ellipsis;}&:not(:has(> ", buttons, ":first-child, > *:first-child > ", buttons, ")){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), ";}&:not(:has(> ", buttons, ":last-child, > *:last-child > ", buttons, ")){", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.s), ";};label:euiFormControlLayout__side;"),
     append: /*#__PURE__*/(0, _react.css)((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       none: "\n          ".concat(isRefreshVariant && appendStyles, "\n        "),
       preferred: (0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin)

package/optimize/lib/components/form/range/range.styles.js

@@ -64,7 +64,7 @@ var euiRangeVariables = exports.euiRangeVariables = function euiRangeVariables(e
   };
 };
 var euiRangeTrackPerBrowser = exports.euiRangeTrackPerBrowser = function euiRangeTrackPerBrowser(content) {
-  return "\n    &::-webkit-slider-runnable-track { ".concat(content, "; }\n    &::-moz-range-track { ").concat(content, "; }\n    &::-ms-fill-lower {").concat(content, "; }\n    &::-ms-fill-upper { ").concat(content, "; }\n  ");
+  return "\n    &::-webkit-slider-runnable-track { ".concat(content, "; }\n    &::-moz-range-track { ").concat(content, "; }\n  ");
 };
 var euiRangeThumbBorder = exports.euiRangeThumbBorder = function euiRangeThumbBorder(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
@@ -98,7 +98,7 @@ var euiRangeThumbStyle = exports.euiRangeThumbStyle = function euiRangeThumbStyl
   });
 };
 var euiRangeThumbPerBrowser = exports.euiRangeThumbPerBrowser = function euiRangeThumbPerBrowser(content) {
-  return "\n    &::-webkit-slider-thumb { ".concat(content, "; }\n    &::-moz-range-thumb { ").concat(content, "; }\n    &::-ms-thumb {").concat(content, "; }\n  ");
+  return "\n    &::-webkit-slider-thumb { ".concat(content, "; }\n    &::-moz-range-thumb { ").concat(content, "; }\n  ");
 };
 var euiRangeThumbFocus = exports.euiRangeThumbFocus = function euiRangeThumbFocus(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);

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

@@ -0,0 +1,44 @@
+"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 EuiIconThumbDown = function EuiIconThumbDown(_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", {
+    d: "M12 7h1v2h-1V7Z"
+  }), (0, _react2.jsx)("path", {
+    fillRule: "evenodd",
+    d: "M7.8 14.22a1.135 1.135 0 0 1-1.89.437 3.221 3.221 0 0 1-.655-3.519l.484-1.132H3.001a2 2 0 0 1-1.977-2.308L1.74 3.12a2.5 2.5 0 0 1 2.47-2.114h2.988c.995 0 1.972.23 2.859.666a.999.999 0 0 1 .941-.666h3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-3a1 1 0 0 1-.943-.67A5.012 5.012 0 0 0 8.268 12.8L7.8 14.22Zm6.198-12.214h-3v8h3v-8ZM6.626 13.958c.07.073.193.044.225-.051l.467-1.42a6.012 6.012 0 0 1 2.68-3.309V2.78a5.472 5.472 0 0 0-2.8-.774H4.21a1.5 1.5 0 0 0-1.483 1.269l-.714 4.577A1 1 0 0 0 3 9.006h3.497a.5.5 0 0 1 .46.697l-.784 1.829a2.222 2.222 0 0 0 .452 2.426Z",
+    clipRule: "evenodd"
+  }));
+};
+var icon = exports.icon = EuiIconThumbDown;

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

@@ -0,0 +1,44 @@
+"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 EuiIconThumbUp = function EuiIconThumbUp(_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", {
+    d: "M4 13H3v-2h1v2Z"
+  }), (0, _react2.jsx)("path", {
+    fillRule: "evenodd",
+    d: "M8.197 1.787a1.135 1.135 0 0 1 1.89-.438 3.222 3.222 0 0 1 .656 3.519L10.26 6h2.738a2 2 0 0 1 1.977 2.308l-.716 4.578A2.5 2.5 0 0 1 11.788 15H8.803a6.457 6.457 0 0 1-2.86-.67A.999.999 0 0 1 5 15H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h3a1 1 0 0 1 .943.67A5.012 5.012 0 0 0 7.73 3.206l.467-1.42ZM2 14h3V6H2v8ZM9.372 2.048a.135.135 0 0 0-.225.051L8.68 3.52A6.012 6.012 0 0 1 6 6.827v6.392c.846.507 1.813.78 2.803.78h2.985a1.5 1.5 0 0 0 1.482-1.269l.715-4.577A1 1 0 0 0 12.997 7H9.5a.5.5 0 0 1-.46-.697l.784-1.829a2.222 2.222 0 0 0-.452-2.426Z",
+    clipRule: "evenodd"
+  }));
+};
+var icon = exports.icon = EuiIconThumbUp;

package/optimize/lib/components/icon/icon_map.js

@@ -436,6 +436,8 @@ var typeToPathMap = exports.typeToPathMap = {
   tag: 'tag',
   tear: 'tear',
   temperature: 'temperature',
+  thumbDown: 'thumbDown',
+  thumbUp: 'thumbUp',
   timeline: 'timeline',
   timelineWithArrow: 'timelineWithArrow',
   timelionApp: 'app_timelion',

package/optimize/lib/components/icon/svgs/thumbDown.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9999 7.00037L12.9999 7.00037V9.00037L11.9999 9.00037V7.00037Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.80071 14.2191C7.53408 15.0278 6.50475 15.266 5.91008 14.6566C5.00031 13.7241 4.74169 12.3355 5.25481 11.1381L5.73918 10.0062H3.0009C1.77338 10.0062 0.835103 8.91041 1.02434 7.69763L1.74016 3.12048C1.93031 1.90355 2.97818 1.00623 4.20989 1.00623L7.19817 1.00623C8.19291 1.00623 9.17042 1.23623 10.0566 1.67224C10.1941 1.28431 10.5629 1.00623 10.998 1.00623L13.998 1.00623C14.5503 1.00623 14.998 1.45394 14.998 2.00623L14.998 10.0062C14.9978 10.5584 14.5502 11.0062 13.998 11.0062H10.998C10.5615 11.0062 10.1911 10.7261 10.0546 10.3363C9.22335 10.9492 8.59491 11.8072 8.2675 12.8002L7.80071 14.2191ZM13.998 2.00623L10.998 2.00623L10.998 10.0062H13.998L13.998 2.00623ZM6.6259 13.9584C6.69661 14.0306 6.81865 14.0025 6.85051 13.9066L7.31829 12.4877C7.77871 11.0911 8.73405 9.91584 9.99797 9.1781L9.99797 2.77966C9.15214 2.27594 8.18583 2.00623 7.19817 2.00623L4.20989 2.00623C3.47087 2.00623 2.84155 2.54462 2.72747 3.27478L2.01262 7.85193C1.91807 8.45828 2.38717 9.00623 3.0009 9.00623H6.49797C6.66598 9.00623 6.82243 9.09062 6.91497 9.23083C7.00736 9.37098 7.02387 9.54817 6.95793 9.70251L6.17375 11.5316C5.81986 12.3574 5.9985 13.3153 6.6259 13.9584Z" />
+</svg>

package/optimize/lib/components/icon/svgs/thumbUp.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 13.0007H3V11.0007H4V13.0007Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.19727 1.78682C8.46389 0.978178 9.49322 0.739976 10.0879 1.34932C10.9977 2.28184 11.2563 3.6704 10.7432 4.86788L10.2588 5.99971H12.9971C14.2246 5.99971 15.1629 7.09552 14.9736 8.3083L14.2578 12.8855C14.0677 14.1024 13.0198 14.9997 11.7881 14.9997H8.80273C7.80683 14.9997 6.82863 14.7687 5.94238 14.3308C5.80568 14.7202 5.43616 14.9997 5 14.9997H2C1.44772 14.9997 1 14.552 1 13.9997V5.99971C1.00013 5.44754 1.4478 4.99971 2 4.99971H5C5.43644 4.99971 5.80686 5.2798 5.94336 5.66963C6.77462 5.05676 7.40306 4.19871 7.73047 3.20577L8.19727 1.78682ZM2 13.9997H5V5.99971H2V13.9997ZM9.37207 2.04756C9.30136 1.97537 9.17932 2.00344 9.14746 2.09932L8.67969 3.51827C8.21927 4.91487 7.26392 6.0901 6 6.82784V13.2204C6.8459 13.7275 7.81328 13.9997 8.80273 13.9997H11.7881C12.5271 13.9997 13.1564 13.4613 13.2705 12.7312L13.9854 8.15401C14.0799 7.54766 13.6108 6.99971 12.9971 6.99971H9.5C9.33199 6.99971 9.17554 6.91532 9.08301 6.7751C8.99062 6.63496 8.97411 6.45776 9.04004 6.30342L9.82422 4.47432C10.1781 3.64852 9.99947 2.69065 9.37207 2.04756Z" />
+</svg>