@elastic/eui 119.0.0 → 119.1.0

package/es/components/button/button_group/button_group.js

@@ -1,5 +1,11 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["className", "buttonSize", "color", "idSelected", "idToSelectedMap", "isDisabled", "hasAriaDisabled", "isFullWidth", "isIconOnly", "legend", "name", "onChange", "options", "type"],
-  _excluded2 = ["className", "children", "legend", "buttonSize", "variant", "gutterSize", "isDisabled", "hasAriaDisabled", "isFullWidth", "onChange"];
+  _excluded2 = ["className", "children", "legend", "buttonSize", "variant", "gutterSize", "isDisabled", "hasAriaDisabled", "isFullWidth", "showDividers", "wrap", "layout", "onChange"];
+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) { _defineProperty(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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
@@ -19,7 +25,24 @@ import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiButtonGroupButton } from './button_group_button';
 import { EuiButtonContext } from '../button_context';
 import { euiButtonGroupStyles, euiButtonGroupButtonsStyles } from './button_group.styles';
+
+// removes outer fragment wrappers only; no nested traversal of children
+// uses forEach over .toArray() to avoid mutating keys; only unwraps one Fragment level
 import { jsx as ___EmotionJSX } from "@emotion/react";
+function flattenButtonGroupChildren(children) {
+  var result = [];
+  React.Children.forEach(children, function (child) {
+    if (! /*#__PURE__*/React.isValidElement(child)) return;
+    if (child.type === React.Fragment) {
+      React.Children.forEach(child.props.children, function (fragmentChild) {
+        if ( /*#__PURE__*/React.isValidElement(fragmentChild)) result.push(fragmentChild);
+      });
+    } else {
+      result.push(child);
+    }
+  });
+  return result;
+}
 var EuiButtonGroupOptions = function EuiButtonGroupOptions(_ref) {
   var className = _ref.className,
     _ref$buttonSize = _ref.buttonSize,
@@ -200,9 +223,9 @@ EuiButtonGroupOptions.propTypes = {
   idToSelectedMap: PropTypes.shape({})
 };
 export var BUTTON_GROUP_GUTTER_SIZES = ['none', 'xs', 's', 'm', 'l', 'xl'];
-var EuiButtonGroupChildren = function EuiButtonGroupChildren(_ref2) {
+export var EuiButtonGroupChildren = function EuiButtonGroupChildren(_ref2) {
   var className = _ref2.className,
-    children = _ref2.children,
+    _children = _ref2.children,
     legend = _ref2.legend,
     _ref2$buttonSize = _ref2.buttonSize,
     buttonSize = _ref2$buttonSize === void 0 ? 's' : _ref2$buttonSize,
@@ -216,36 +239,63 @@ var EuiButtonGroupChildren = function EuiButtonGroupChildren(_ref2) {
     hasAriaDisabled = _ref2$hasAriaDisabled === void 0 ? false : _ref2$hasAriaDisabled,
     _ref2$isFullWidth = _ref2.isFullWidth,
     isFullWidth = _ref2$isFullWidth === void 0 ? false : _ref2$isFullWidth,
+    _ref2$showDividers = _ref2.showDividers,
+    showDividers = _ref2$showDividers === void 0 ? false : _ref2$showDividers,
+    _ref2$wrap = _ref2.wrap,
+    wrap = _ref2$wrap === void 0 ? true : _ref2$wrap,
+    _ref2$layout = _ref2.layout,
+    layout = _ref2$layout === void 0 ? 'horizontal' : _ref2$layout,
     _onChange = _ref2.onChange,
     rest = _objectWithoutProperties(_ref2, _excluded2);
+  var isSegmented = variant === 'segmented';
+  var hasGutterSize = variant === 'default' && gutterSize !== 'none';
   var wrapperCssStyles = [euiButtonGroupStyles.euiButtonGroup, isFullWidth && euiButtonGroupStyles.fullWidth];
   var styles = useEuiMemoizedStyles(euiButtonGroupButtonsStyles);
-  var cssStyles = [styles.euiButtonGroup__buttons, isFullWidth && styles.fullWidth, gutterSize && gutterSize !== 'none' && styles.gutterSize[gutterSize]];
+  var cssStyles = [styles.euiButtonGroup__buttons, hasGutterSize && styles.gutterSize[gutterSize], isSegmented && !wrap && styles.noWrap];
+  var containerCssStyles = [styles.euiButtonGroup__container, isFullWidth && layout !== 'vertical' && styles.fullWidth];
   var classes = classNames('euiButtonGroup', {
     'euiButtonGroup-isDisabled': isDisabled
   }, className);
   var contextValue = useMemo(function () {
-    return {
+    return _objectSpread({
       size: buttonSize,
       isDisabled: isDisabled || undefined,
       hasAriaDisabled: hasAriaDisabled || undefined,
       fullWidth: isFullWidth
-    };
-  }, [buttonSize, isDisabled, hasAriaDisabled, isFullWidth]);
+    }, isSegmented && {
+      display: 'base',
+      color: 'text',
+      fill: false
+    });
+  }, [buttonSize, isDisabled, hasAriaDisabled, isFullWidth, isSegmented]);
+
+  // wrap children in a wrapper to be able to apply required styles
+  var children = isSegmented ? flattenButtonGroupChildren(_children).map(function (child, index) {
+    var _child$key;
+    return ___EmotionJSX("div", {
+      key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : "euiButtonGroupItem-".concat(index),
+      className: "euiButtonGroup__item"
+    }, child);
+  }) : _children;
   return ___EmotionJSX("div", _extends({
     css: wrapperCssStyles,
     className: classes,
     role: "group",
     "data-variant": variant,
     "data-size": buttonSize,
+    "data-layout": isSegmented ? layout : undefined,
+    "data-dividers": isSegmented && showDividers || undefined,
     "aria-label": legend,
     "aria-disabled": isDisabled || undefined
   }, rest), ___EmotionJSX("div", {
+    css: containerCssStyles,
+    className: "euiButtonGroup__container"
+  }, ___EmotionJSX("div", {
     css: cssStyles,
     className: "euiButtonGroup__buttons"
   }, ___EmotionJSX(EuiButtonContext.Provider, {
     value: contextValue
-  }, children)));
+  }, children))));
 };
 
 /* Overloaded call signatures let one `EuiButtonGroup` component support both
@@ -267,27 +317,55 @@ EuiButtonGroupChildren.propTypes = {
   /**
        * Pass button components (`EuiButton`, `EuiButtonEmpty`, `EuiButtonIcon`) as children,
        * some specific wrappers, like `EuiToolTip` and `EuiPopover` are allowed.
+       *
+       * Do not pass children as combined custom component. Each child needs to be a standalone component.
        */
   children: PropTypes.node.isRequired,
   /**
        * Typical sizing is `s`. Medium `m` size should be reserved for major features.
+       * @default 's'
        */
   buttonSize: PropTypes.oneOf(["s", "m"]),
   /**
        * Defines the type of a button group, which renders visually and functionally different:
        * - default: arranges buttons in a horizontal row with optional gutter via `gutterSize`
+       * - segmented: arranges buttons in a horizontal or vertical row with no gutter.
+       *   The buttons are placed inset and dividers can optionally be shown between them.
+       * @default 'default'
        */
-  variant: PropTypes.oneOf(["default"]),
+  variant: PropTypes.oneOf(["default", "segmented"]),
   /**
        * Defines the gutter size between children buttons.
        * Applies only when `variant="default"`.
+       * @default 's'
        */
   gutterSize: PropTypes.any,
   /**
        * Expands the whole group to the full width of the container.
        * `EuiButton` children will stretch to fill the available space via their `fullWidth` prop.
+       * Does not apply when `layout="vertical"`.
+       * @default false
        */
   isFullWidth: PropTypes.bool,
+  /**
+       * Shows dividers between buttons.
+       * Applies only when `variant="segmented"`.
+       * @default false
+       */
+  showDividers: PropTypes.bool,
+  /**
+       * Defines the layout direction of the button group.
+       * `layout="vertical"` should only be used with EuiButtonIcon children.
+       * Applies only when `variant="segmented"`.
+       * @default 'horizontal'
+       */
+  layout: PropTypes.oneOf(["horizontal", "vertical"]),
+  /**
+       * Defines if buttons wrap or shrink.
+       * Applies only when `variant="segmented"`.
+       * @default true
+       */
+  wrap: PropTypes.bool,
   /**
        * Callback fired when a child button is selected.
        * Returns the `id` of the clicked option.

package/es/components/button/button_group/button_group.styles.js

@@ -8,11 +8,15 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { euiDisabledSelector, logicalCSS } from '../../../global_styling';
+import { euiButtonSizeMap, euiDisabledSelector, logicalCSS, mathWithUnits } from '../../../global_styling';
 import { highContrastModeStyles, preventForcedColors } from '../../../global_styling/functions/high_contrast';
 import { euiFormVariables } from '../../form/form.styles';
+var hasButtonOnlySelector = ':not(:has(.euiButtonIcon))';
+var hasButtonIconOnlySelector = ':not(:has(.euiButton, .euiButtonEmpty))';
+var buttonItemSelector = '.euiButtonGroup__item, .euiToolTipAnchor, .euiPopover, .euiButton';
+var buttonOnlyItemSelector = "*:is(".concat(buttonItemSelector, "):not(:has(.euiButtonIcon))");
 export var euiButtonGroupStyles = {
-  euiButtonGroup: /*#__PURE__*/css("display:inline-block;", logicalCSS('max-width', '100%'), " position:relative;;label:euiButtonGroup;"),
+  euiButtonGroup: /*#__PURE__*/css("display:inline-block;", logicalCSS('max-width', '100%'), " position:relative;&:where([data-variant='segmented']){&", hasButtonIconOnlySelector, "{display:flex;}};label:euiButtonGroup;"),
   fullWidth: process.env.NODE_ENV === "production" ? {
     name: "jl0hie-fullWidth",
     styles: "display:block;label:fullWidth;"
@@ -24,23 +28,58 @@ export var euiButtonGroupStyles = {
 };
 export var euiButtonGroupButtonsStyles = function euiButtonGroupButtonsStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var buttonSizes = {
-    s: "\n      border-radius: ".concat(euiTheme.border.radius.small, ";\n      ").concat(_highContrastStyles(euiThemeContext), "\n    "),
-    m: "\n      border-radius: ".concat(euiTheme.border.radius.medium, ";\n      ").concat(_highContrastStyles(euiThemeContext), "\n    ")
+  var buttonSizeMap = euiButtonSizeMap(euiThemeContext);
+  var containerPadding = euiTheme.size.xs;
+  var splitPadding = mathWithUnits(containerPadding, function (x) {
+    return x / 2;
+  });
+  var insetSize = function insetSize(height) {
+    return mathWithUnits([height, containerPadding], function (x, y) {
+      return x - y * 2;
+    });
   };
+  var buttonGroupVariables = {
+    gap: {
+      regular: euiTheme.size.xs,
+      dividers: mathWithUnits([euiTheme.size.xs, euiTheme.border.width.thin], function (x, y) {
+        return x + y;
+      })
+    },
+    // TODO: use from buttonSizeMap once added via EuiSplitButton:
+    // https://github.com/elastic/eui/pull/9865
+    radius: {
+      outer: euiTheme.border.radius.medium,
+      inner: '2px' // should eventually be a token, but currently small and medium have the same value
+    },
+    size: {
+      s: insetSize(buttonSizeMap.s.height),
+      m: insetSize(buttonSizeMap.m.height)
+    }
+  };
+  var dividerOffset = mathWithUnits([buttonGroupVariables.gap.dividers, euiTheme.border.width.thin], function (x, y) {
+    return (x + y) / 2;
+  });
   var _euiFormVariables = euiFormVariables(euiThemeContext),
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight,
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
     backgroundColor = _euiFormVariables.backgroundColor,
     borderColor = _euiFormVariables.borderColor;
+  var dividerStyles = "\n    gap: ".concat(buttonGroupVariables.gap.dividers, ";\n\n    .euiButtonGroup__item {\n      position: relative;\n\n      /* block border */\n      &::before {\n        content: '';\n        position: absolute;\n        inset-block-start: -").concat(dividerOffset, ";\n        inset-inline-start: -").concat(mathWithUnits(containerPadding, function (x) {
+    return x / 2;
+  }), ";\n        inline-size: calc(\n          100% + ").concat(mathWithUnits(containerPadding, function (x) {
+    return x * 2;
+  }), "\n        );\n        block-size: ").concat(euiTheme.border.width.thin, ";\n        border-block-start: ").concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBasePlain, ";\n        pointer-events: none;\n      }\n\n      /* inline border */\n      &::after {\n        content: '';\n        position: absolute;\n        inset-inline-start: -").concat(dividerOffset, ";\n        block-size: calc(\n          var(--euiButtonGroupButtonInsetSize) - ").concat(euiTheme.size.s, "\n        );\n        inline-size: ").concat(euiTheme.border.width.thin, ";\n        border-inline-start: ").concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBasePlain, ";\n        pointer-events: none;\n      }\n    }\n\n    &:where([data-layout='horizontal'] &) {\n      &:where(:is(").concat(hasButtonIconOnlySelector, ") &) {\n        .euiButtonGroup__item::before {\n          inset-inline-start: 0;\n          inline-size: 100%;\n        }\n      }\n    }\n\n    &:where([data-layout='vertical'] &) {\n      &:where(:is(").concat(hasButtonIconOnlySelector, ") &) {\n        .euiButtonGroup__item::before {\n          inset-inline-start: auto;\n          inline-size: calc(\n            var(--euiButtonGroupButtonInsetSize) - ").concat(euiTheme.size.s, "\n          );\n        }\n      }\n    }\n  ");
+  var segmentedChildrenStyles = "\n    /* Buttons are used inset and shouldn't have their own borders */\n    .euiButton,\n    .euiButtonIcon {\n      border: none;\n      pointer-events: auto; /* Ensure buttons are still clickable in jsdom */\n\n      &::before {\n        border-radius: inherit;\n      }\n    }\n\n    /* Adjust children for inset behavior */\n    ".concat(buttonItemSelector, ", \n    .euiButtonIcon {\n      display: inline-flex;\n      align-items: center;\n      block-size: var(--euiButtonGroupButtonInsetSize);\n      border-radius: ").concat(buttonGroupVariables.radius.inner, ";\n    }\n\n    .euiButtonIcon {\n      inline-size: var(--euiButtonGroupButtonInsetSize);\n    }\n\n    /* Only non-icon buttons auto-grow/shrink */\n    .euiButton,\n    ").concat(buttonOnlyItemSelector, " {\n      flex: 1;\n      min-inline-size: auto;\n    }\n  ");
   return {
     // Base
-    euiButtonGroup__buttons: /*#__PURE__*/css(logicalCSS('max-width', '100%'), " display:flex;align-items:center;&:where([data-variant='default'] &){flex-wrap:wrap;}&:where([data-size='s'] &){", buttonSizes.s, ";}&:where([data-size='m'] &){", buttonSizes.m, ";};label:euiButtonGroup__buttons;"),
-    fullWidth: /*#__PURE__*/css(logicalCSS('width', '100%'), " .euiButtonGroupButton,.euiButtonGroup__tooltipWrapper{flex:1;", logicalCSS('width', '100%'), ";}.euiButton{flex-grow:1;inline-size:auto;}.euiButtonEmpty{flex-shrink:0;};label:fullWidth;"),
+    euiButtonGroup__container: /*#__PURE__*/css("&:where([data-variant='segmented'] &){position:relative;display:inline-flex;align-items:center;max-inline-size:100%;padding:", splitPadding, ";border-radius:", buttonGroupVariables.radius.outer, ";background-color:", euiTheme.colors.backgroundBasePlain, ";&:where([data-size='s'] &){--euiButtonGroupButtonInsetSize:", buttonGroupVariables.size.s, ";min-block-size:", buttonSizeMap.s.height, ";}&:where([data-size='m'] &){--euiButtonGroupButtonInsetSize:", buttonGroupVariables.size.m, ";min-block-size:", buttonSizeMap.m.height, ";}&::after{content:'';position:absolute;inset:0;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBasePlain, ";border-radius:inherit;pointer-events:none;}};label:euiButtonGroup__container;"),
+    euiButtonGroup__buttons: /*#__PURE__*/css(logicalCSS('max-width', '100%'), " display:flex;align-items:center;&:where([data-variant='default'] &){flex-wrap:wrap;}&:where([data-variant='segmented'] &){position:relative;display:inline-flex;align-items:center;flex-wrap:wrap;gap:", buttonGroupVariables.gap.regular, ";max-inline-size:100%;padding:", splitPadding, ";overflow:hidden;*:where(.euiButton, .euiButtonIcon):is(", euiDisabledSelector, "){background-color:transparent;}&:where([data-dividers='true'] &){", dividerStyles, ";}", segmentedChildrenStyles, " &:where([data-layout='vertical'] &){flex-direction:column;.euiButtonGroup__item{justify-content:center;}}};label:euiButtonGroup__buttons;"),
+    noWrap: /*#__PURE__*/css("&:where([data-variant='segmented'] &){flex-wrap:nowrap;", buttonOnlyItemSelector, "{flex:0 1 auto;min-inline-size:0;.euiButton .eui-textTruncate{min-inline-size:0;}}&", hasButtonIconOnlySelector, "{overflow-inline:auto;}};label:noWrap;"),
+    fullWidth: /*#__PURE__*/css(logicalCSS('width', '100%'), " .euiButtonGroupButton,.euiButtonGroup__tooltipWrapper{flex:1;", logicalCSS('width', '100%'), ";}&:where([data-variant='default'] &){.euiButton{flex-grow:1;inline-size:auto;}.euiButtonEmpty{flex-shrink:0;}}&:where([data-variant='segmented'] &){&", hasButtonIconOnlySelector, "{inline-size:auto;}&", hasButtonOnlySelector, "{.euiButtonGroup__buttons{inline-size:100%;}", buttonOnlyItemSelector, "{flex-grow:1;}}};label:fullWidth;"),
     // Sizes
     size: {
-      m: /*#__PURE__*/css(buttonSizes.m, ";;label:m;"),
-      s: /*#__PURE__*/css(buttonSizes.s, ";;label:s;"),
+      m: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";", _highContrastStyles(euiThemeContext), ";;label:m;"),
+      s: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.small, ";", _highContrastStyles(euiThemeContext), ";;label:s;"),
       compressed: /*#__PURE__*/css(logicalCSS('height', controlCompressedHeight), " background-color:", backgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", controlCompressedBorderRadius, ";", _highContrastStyles(euiThemeContext, true), ";;label:compressed;")
     },
     gutterSize: {

package/es/components/button/button_icon/button_icon.js

@@ -38,7 +38,7 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     _ref$display = _ref.display,
-    display = _ref$display === void 0 ? 'empty' : _ref$display,
+    _display = _ref$display === void 0 ? 'empty' : _ref$display,
     target = _ref.target,
     rel = _ref.rel,
     _ref$size = _ref.size,
@@ -52,6 +52,7 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
       color: _color,
       isDisabled: _isDisabled,
       hasAriaDisabled: _hasAriaDisabled,
+      display: _display,
       href: href,
       disabled: disabled,
       isLoading: isLoading
@@ -60,7 +61,8 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
     color = _useEuiButtonCommonPr.color,
     isDisabled = _useEuiButtonCommonPr.isDisabled,
     _useEuiButtonCommonPr2 = _useEuiButtonCommonPr.hasAriaDisabled,
-    hasAriaDisabled = _useEuiButtonCommonPr2 === void 0 ? false : _useEuiButtonCommonPr2;
+    hasAriaDisabled = _useEuiButtonCommonPr2 === void 0 ? false : _useEuiButtonCommonPr2,
+    display = _useEuiButtonCommonPr.display;
   var _useEuiDisabledElemen = useEuiDisabledElement({
       isDisabled: isDisabled,
       hasAriaDisabled: hasAriaDisabled,
@@ -146,7 +148,7 @@ EuiButtonIcon.propTypes = {
   type: PropTypes.any,
   href: PropTypes.string,
   onClick: PropTypes.func,
-  iconType: PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "addToChat", "addToDashboard", "advancedSettingsApp", "agentApp", "aggregate", "alignBottom", "alignBottomLeft", "alignBottomRight", "alignCenterHorizontal", "alignCenterVertical", "alignLeft", "alignRight", "alignTop", "alignTopLeft", "alignTopRight", "analyzeEvent", "annotation", "chartAnomaly", "anomalySwimLane", "apmApp", "chartWaterfall", "appSearchApp", "apps", "chevronSingleDown", "chevronSingleLeft", "chevronSingleRight", "chevronSingleUp", "chevronLimitLeft", "chevronLimitRight", "article", "asterisk", "at", "archive", "axisX", "axisYLeft", "axisYRight", "auditbeatApp", "backgroundTask", "bell", "bellSlash", "beta", "bolt", "boxesVertical", "branch", "briefcase", "branchUser", "broom", "brush", "bug", "bulb", "bullseye", "calendar", "canvasApp", "casesApp", "chartChangePoint", "chartArea", "visArea", "chartAreaStack", "chartBarHorizontal", "chartBarHorizontalStack", "chartBarVertical", "visBarVertical", "chartBarVerticalStack", "chartGauge", "visGauge", "chartHeatmap", "chartLine", "visLine", "chartPie", "visPie", "chartTagCloud", "chartThreshold", "check", "checkCircle", "checkCircleFill", "popper", "classificationJob", "clickLeft", "clickRight", "clock", "clockCounter", "clockControl", "cloud", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "code", "codeApp", "paintBucket", "commandLine", "comment", "editorComment", "compare", "processor", "compute", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "contrast", "contrastFill", "controls", "copy", "crossProjectSearch", "createAdvancedJob", "createGenericJob", "createGeoJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossCircle", "crosshair", "money", "scissors", "dashboardApp", "dashedCircle", "dataVisualizer", "database", "display", "devToolsApp", "discoverApp", "distributeHorizontal", "distributeVertical", "download", "drag", "dragHorizontal", "dragVertical", "document", "documentation", "documents", "dot", "dotInCircle", "chevronDoubleLeft", "chevronDoubleRight", "ellipsis", "textAlignCenter", "textAlignLeft", "textAlignRight", "textBold", "listCheck", "textHeading", "textItalic", "listNumber", "redo", "textStrike", "table", "visTable", "textUnderline", "undo", "listBullet", "list", "mail", "empty", "emsApp", "endpoint", "query", "eraser", "error", "errorFill", "esqlVis", "logOut", "maximize", "export", "upload", "external", "eye", "eyeSlash", "faceHappy", "faceNeutral", "faceSad", "tableInfo", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "flask", "flag", "fleetApp", "fold", "folder", "folderClosed", "folderClose", "folderCheck", "folderExclamation", "folderOpen", "folderOpened", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "globe", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "help", "home", "hourglass", "if", "info", "image", "index", "indexClose", "tableCross", "indexEdit", "tablePencil", "indexManagementApp", "mapping", "indexOpen", "tablePlus", "indexPatternApp", "indexRollupApp", "indexRuntime", "tablePlay", "indexSettings", "tableGear", "tableTime", "infinity", "inputOutput", "inspect", "ip", "key", "keyboard", "queryField", "kqlFunction", "queryOperand", "querySelector", "queryValue", "kubernetesNode", "kubernetesPod", "cube", "rocket", "layers", "lensApp", "text", "lineBreak", "lineBreakSlash", "lineDash", "lineDot", "lineSolid", "link", "linkSlash", "lock", "lockOpen", "pattern", "logRateAnalysis", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVectorDB", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashInput", "logstashOutput", "queue", "machineLearningApp", "magnet", "magnify", "search", "magnifyExclamation", "magnifyMinus", "magnifyPlus", "managementApp", "map", "mapMarker", "waypoint", "megaphone", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusCircle", "minusSquare", "mobile", "monitoringApp", "moon", "move", "namespace", "nested", "vectorTriangle", "notebookApp", "number", "wifiSlash", "wifi", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "documentsCheck", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFill", "pinFilled", "pipelineApp", "pivot", "play", "plugs", "plus", "plusCircle", "plusSquare", "presentation", "productAgent", "productCloudInfra", "productDashboard", "productDiscover", "productML", "productStreamsClassic", "productStreamsWired", "send", "question", "quote", "radar", "readOnly", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "return", "save", "savedObjectsApp", "scale", "searchProfilerApp", "section", "securityAnalyticsApp", "securityApp", "securitySignalDetected", "securitySignalResolved", "server", "sessionViewer", "shard", "share", "significantEvents", "singleMetricViewer", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "star", "starEmpty", "starEmptySpace", "starFill", "starFilled", "starFillSpace", "starMinusEmpty", "starMinusFill", "starPlusEmpty", "starPlusFill", "stats", "stop", "stopFill", "stopSlash", "storage", "string", "sun", "swatchInput", "symlink", "tableDensityHigh", "tableDensityLow", "tableOfContents", "tag", "tear", "thermometer", "temperature", "thumbDown", "thumbUp", "timeline", "timelineWithArrow", "timelinePointer", "timelionApp", "refreshTime", "transitionBottomIn", "transitionBottomOut", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "translate", "trash", "unfold", "upgradeAssistantApp", "uptimeApp", "user", "users", "usersRolesApp", "unarchive", "vectorSquare", "videoPlayer", "visGoal", "chartMetric", "visTimelion", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "warningFill", "watchesApp", "web", "wordWrap", "wordWrapDisabled", "workflowsApp", "workflow", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDimension", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenSemanticText", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenVectorSparse"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]).isRequired,
+  iconType: PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "addToChat", "addToDashboard", "advancedSettingsApp", "agentApp", "aggregate", "alignBottom", "alignBottomLeft", "alignBottomRight", "alignCenterHorizontal", "alignCenterVertical", "alignLeft", "alignRight", "alignTop", "alignTopLeft", "alignTopRight", "analyzeEvent", "annotation", "chartAnomaly", "anomalySwimLane", "apmApp", "chartWaterfall", "appSearchApp", "apps", "chevronSingleDown", "chevronSingleLeft", "chevronSingleRight", "chevronSingleUp", "chevronLimitLeft", "chevronLimitRight", "article", "asterisk", "at", "archive", "axisX", "axisYLeft", "axisYRight", "auditbeatApp", "backgroundTask", "bell", "bellSlash", "beta", "bolt", "boxesVertical", "branch", "briefcase", "branchUser", "broom", "brush", "bug", "bulb", "bullseye", "calendar", "canvasApp", "casesApp", "chartChangePoint", "chartArea", "visArea", "chartAreaStack", "chartBarHorizontal", "chartBarHorizontalStack", "chartBarVertical", "visBarVertical", "chartBarVerticalStack", "chartGauge", "visGauge", "chartHeatmap", "chartLine", "visLine", "chartPie", "visPie", "chartTagCloud", "chartThreshold", "check", "checkCircle", "checkCircleFill", "popper", "classificationJob", "clickLeft", "clickRight", "clock", "clockCounter", "clockControl", "cloud", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "code", "codeApp", "paintBucket", "commandLine", "comment", "editorComment", "compare", "processor", "compute", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "contrast", "contrastFill", "controls", "copy", "crossProjectSearch", "createAdvancedJob", "createGenericJob", "createGeoJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossCircle", "crosshair", "cursorDefault", "money", "scissors", "dashboardApp", "dashedCircle", "dataVisualizer", "database", "display", "devToolsApp", "discoverApp", "distributeHorizontal", "distributeVertical", "download", "drag", "dragHorizontal", "dragVertical", "document", "documentation", "documents", "dot", "dotInCircle", "chevronDoubleLeft", "chevronDoubleRight", "ellipsis", "textAlignCenter", "textAlignLeft", "textAlignRight", "textBold", "listCheck", "textHeading", "textItalic", "listNumber", "redo", "textStrike", "table", "visTable", "textUnderline", "undo", "listBullet", "list", "mail", "empty", "emsApp", "endpoint", "query", "eraser", "error", "errorFill", "esqlVis", "logIn", "logOut", "maximize", "export", "upload", "external", "eye", "eyeSlash", "faceHappy", "faceNeutral", "faceSad", "tableInfo", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "flask", "flag", "fleetApp", "fold", "folder", "folderClosed", "folderClose", "folderCheck", "folderExclamation", "folderOpen", "folderOpened", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "globe", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "help", "home", "hourglass", "if", "info", "image", "index", "indexClose", "tableCross", "indexEdit", "tablePencil", "indexManagementApp", "mapping", "indexOpen", "tablePlus", "indexPatternApp", "indexRollupApp", "indexRuntime", "tablePlay", "indexSettings", "tableGear", "tableTime", "infinity", "inputOutput", "inspect", "ip", "key", "keyboard", "queryField", "kqlFunction", "queryOperand", "querySelector", "queryValue", "kubernetesNode", "kubernetesPod", "cube", "rocket", "layers", "lensApp", "text", "lineBreak", "lineBreakSlash", "lineDash", "lineDot", "lineSolid", "link", "linkSlash", "lock", "lockOpen", "pattern", "logRateAnalysis", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVectorDB", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashInput", "logstashOutput", "queue", "machineLearningApp", "magnet", "magnify", "search", "magnifyExclamation", "magnifyMinus", "magnifyPlus", "managementApp", "map", "mapMarker", "waypoint", "megaphone", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusCircle", "minusSquare", "mobile", "monitoringApp", "moon", "move", "namespace", "nested", "vectorTriangle", "notebookApp", "number", "wifiSlash", "wifi", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "documentsCheck", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFill", "pinFilled", "pipelineApp", "pivot", "play", "plugs", "plus", "plusCircle", "plusSquare", "presentation", "productAgent", "productCloudInfra", "productDashboard", "productDiscover", "productML", "productStreamsClassic", "productStreamsWired", "send", "question", "quote", "radar", "readOnly", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "return", "routeSplit", "save", "savedObjectsApp", "scale", "searchProfilerApp", "section", "securityAnalyticsApp", "securityApp", "securitySignalDetected", "securitySignalResolved", "server", "sessionViewer", "shard", "share", "significantEvents", "singleMetricViewer", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "star", "starEmpty", "starEmptySpace", "starFill", "starFilled", "starFillSpace", "starMinusEmpty", "starMinusFill", "starPlusEmpty", "starPlusFill", "stats", "stop", "stopFill", "stopSlash", "storage", "string", "sun", "swatchInput", "symlink", "tableDensityHigh", "tableDensityLow", "tableOfContents", "tag", "tear", "thermometer", "temperature", "thumbDown", "thumbUp", "timeline", "timelineWithArrow", "timelinePointer", "timelionApp", "refreshTime", "transitionBottomIn", "transitionBottomOut", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "translate", "trash", "unfold", "upgradeAssistantApp", "uptimeApp", "user", "users", "usersRolesApp", "unarchive", "vectorSquare", "videoPlayer", "visGoal", "chartMetric", "visTimelion", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "warningFill", "watchesApp", "web", "wordWrap", "wordWrapDisabled", "workflowsApp", "workflow", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDimension", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenSemanticText", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenVectorSparse"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]).isRequired,
   /**
      * Any of the named color palette options.
      *

package/es/components/button/split_button/split_button.js

@@ -1,5 +1,11 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["className", "children", "size", "color", "fill", "isDisabled", "hasAriaDisabled", "isLoading"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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) { _defineProperty(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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -19,7 +25,8 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import classNames from 'classnames';
 import PropTypes from "prop-types";
 import React, { Children, Fragment, isValidElement, useMemo } from 'react';
-import { useEuiMemoizedStyles, useEuiTheme, useGeneratedHtmlId } from '../../../services';
+import { getTokenName } from '@elastic/eui-theme-common';
+import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
 import { getEuiButtonColorValues, getEuiFilledButtonColorValues } from '../../../global_styling';
 import { EuiSplitButtonContext } from './split_button_context';
 import { EuiSplitButtonActionPrimary, EuiSplitButtonActionSecondary } from './split_button_actions';
@@ -39,29 +46,41 @@ export var _EuiSplitButton = function _EuiSplitButton(_ref) {
     isLoading = _ref.isLoading,
     rest = _objectWithoutProperties(_ref, _excluded);
   var euiThemeContext = useEuiTheme();
-  var highContrastMode = euiThemeContext.highContrastMode;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var _children = _slicedToArray(children, 2),
     primaryAction = _children[0],
     secondaryAction = _children[1];
   var key = useGeneratedHtmlId({
     suffix: 'EuiSplitButton'
   });
-  var commonProps = {
-    size: size,
-    color: color,
-    fill: fill,
-    isDisabled: isDisabled,
-    hasAriaDisabled: hasAriaDisabled,
-    isLoading: isLoading
-  };
+  var commonProps = useMemo(function () {
+    return {
+      size: size,
+      color: color,
+      fill: fill,
+      isDisabled: isDisabled,
+      hasAriaDisabled: hasAriaDisabled,
+      isLoading: isLoading
+    };
+  }, [size, color, fill, isDisabled, hasAriaDisabled, isLoading]);
   var buttonFilledColors = getEuiFilledButtonColorValues(euiThemeContext, isDisabled ? 'disabled' : color);
   var buttonColors = getEuiButtonColorValues(euiThemeContext, isDisabled ? 'disabled' : color);
+  var borderToken = color === 'text' ? 'borderBasePlain' : getTokenName('borderBase', color);
   var classes = classNames('euiSplitButton', className);
-  var styles = useEuiMemoizedStyles(euiSplitButtonStyles);
-  var cssStyles = [styles.euiSplitButton, fill && styles.fill];
+  var styles = useMemo(function () {
+    return euiSplitButtonStyles(euiThemeContext, fill ? buttonFilledColors.backgroundColor : buttonColors.backgroundColor);
+  }, [euiThemeContext, fill, buttonFilledColors.backgroundColor, buttonColors.backgroundColor]);
+  var cssStyles = [styles.euiSplitButton, (color === 'text' || highContrastMode) && styles.hasBorder];
+  var dividerColor = color === 'warning' && fill ? buttonFilledColors.color : euiTheme.colors[borderToken];
   var dividerStyles = useMemo(function () {
-    return euiSplitButtonDividerStyles(euiThemeContext, !fill ? buttonColors.borderColor : highContrastMode && fill ? buttonFilledColors.backgroundColor : 'transparent');
-  }, [euiThemeContext, highContrastMode, fill, buttonFilledColors.backgroundColor, buttonColors.borderColor]);
+    return euiSplitButtonDividerStyles(euiThemeContext, highContrastMode && fill ? buttonFilledColors.color : dividerColor);
+  }, [euiThemeContext, highContrastMode, fill, buttonFilledColors.color, dividerColor]);
+  var cssVariables = useMemo(function () {
+    return {
+      '--euiSplitButtonBorderColor': dividerColor
+    };
+  }, [dividerColor]);
 
   // NOTE: dev-mode-only runtime check to evaluate if correct child components are passed
   if (process.env.NODE_ENV !== 'production') {
@@ -79,8 +98,12 @@ export var _EuiSplitButton = function _EuiSplitButton(_ref) {
   return ___EmotionJSX("div", _extends({
     role: "group",
     className: classes,
-    css: cssStyles
-  }, rest), ___EmotionJSX(EuiSplitButtonContext.Provider, {
+    css: cssStyles,
+    "data-size": size,
+    "data-fill": fill || undefined
+  }, rest, {
+    style: _objectSpread({}, cssVariables)
+  }), ___EmotionJSX(EuiSplitButtonContext.Provider, {
     value: commonProps
   }, ___EmotionJSX(Fragment, {
     key: "".concat(key, "-primaryAction")

package/es/components/button/split_button/split_button.styles.js

@@ -1,4 +1,3 @@
-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
@@ -8,44 +7,41 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { euiDisabledSelector, highContrastModeStyles } from '../../../global_styling';
-export var euiSplitButtonStyles = function euiSplitButtonStyles(euiThemeContext) {
+import { euiButtonSizeMap, euiDisabledSelector, highContrastModeStyles, logicalCSS } from '../../../global_styling';
+var primaryDisabledSelector = ".euiSplitButtonActionPrimary:is(".concat(euiDisabledSelector, ")");
+var secondaryDisabledSelector = ".euiSplitButtonActionSecondary:is(".concat(euiDisabledSelector, ")");
+export var euiSplitButtonStyles = function euiSplitButtonStyles(euiThemeContext, backgroundColor) {
   var euiTheme = euiThemeContext.euiTheme;
-  var primaryDisabledSelector = ".euiSplitButtonActionPrimary:is(".concat(euiDisabledSelector, ")");
-  var secondaryDisabledSelector = ".euiSplitButtonActionSecondary:is(".concat(euiDisabledSelector, ")");
-  var dividerSelector = ".euiSplitButton__divider";
+  var buttonSizeMap = euiButtonSizeMap(euiThemeContext);
+  var borderStyles = function borderStyles(color) {
+    return "\n    &::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      border: ".concat(euiTheme.border.width.thin, " solid ").concat(color, ";\n      border-radius: ").concat(euiTheme.border.radius.small, ";\n      pointer-events: none;\n    }\n  ");
+  };
   return {
-    euiSplitButton: /*#__PURE__*/css("display:inline-flex;flex-wrap:nowrap;&:has(", primaryDisabledSelector, "):has(", secondaryDisabledSelector, "){", dividerSelector, "{", highContrastModeStyles(euiThemeContext, {
-      // When both buttons are disabled set as visual gap
-      none: "\n              border-color: transparent;\n            ",
-      // When both buttons are disabled set a disabled divider color
-      preferred: "\n              border-color: ".concat(euiTheme.colors.borderBaseDisabled, ";\n            ")
-    }), ";}};label:euiSplitButton;"),
-    // When both buttons are enabled set as visual gap
-    fill: /*#__PURE__*/css("&:not(:has(", primaryDisabledSelector, ")):not(\n          :has(", secondaryDisabledSelector, ")\n        ){", dividerSelector, "{border-color:transparent;}};label:fill;")
+    euiSplitButton: /*#__PURE__*/css("position:relative;display:inline-flex;align-items:center;flex-wrap:nowrap;max-inline-size:fit-content;padding:", euiTheme.size.xs, ";border-radius:", euiTheme.border.radius.small, ";background-color:", backgroundColor, ";&:where([data-size='s']){block-size:", buttonSizeMap.s.height, ";}&:where([data-size='m']){block-size:", buttonSizeMap.m.height, ";}&:has(", primaryDisabledSelector, ", ", secondaryDisabledSelector, "){background-color:", euiTheme.colors.backgroundBaseDisabled, ";};label:euiSplitButton;"),
+    hasBorder: /*#__PURE__*/css(highContrastModeStyles(euiThemeContext, {
+      none: "\n          &:where(:not([data-fill])):not(:has(".concat(primaryDisabledSelector, ", ").concat(secondaryDisabledSelector, ")) {\n            ").concat(borderStyles("var(--euiSplitButtonBorderColor)"), "\n          }\n        "),
+      preferred: "\n          &:where(:not([data-fill])) {\n            ".concat(borderStyles("var(--euiSplitButtonBorderColor)"), "\n\n            &:has(").concat(primaryDisabledSelector, ", ").concat(secondaryDisabledSelector, ") {\n              ").concat(borderStyles(euiTheme.colors.borderBaseDisabled), "\n            }\n          }\n\n          &:where([data-fill]):has(").concat(primaryDisabledSelector, ", ").concat(secondaryDisabledSelector, ") {\n            ").concat(borderStyles(euiTheme.colors.borderBaseDisabled), "\n          }\n        "),
+      forced: "\n          ".concat(borderStyles("var(--euiSplitButtonBorderColor)"), "\n        ")
+    }), ";;label:hasBorder;")
   };
 };
-export var euiSplitButtonActionStyles = {
-  euiSplitButtonActionPrimary: process.env.NODE_ENV === "production" ? {
-    name: "12txneb-euiSplitButtonActionPrimary",
-    styles: "z-index:0;border-inline-end:none;border-start-end-radius:0;border-end-end-radius:0;label:euiSplitButtonActionPrimary;"
-  } : {
-    name: "12txneb-euiSplitButtonActionPrimary",
-    styles: "z-index:0;border-inline-end:none;border-start-end-radius:0;border-end-end-radius:0;label:euiSplitButtonActionPrimary;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  },
-  euiSplitButtonActionSecondary: process.env.NODE_ENV === "production" ? {
-    name: "5uh4vx-euiSplitButtonActionSecondary",
-    styles: "border-inline-start:none;border-start-start-radius:0;border-end-start-radius:0;label:euiSplitButtonActionSecondary;"
-  } : {
-    name: "5uh4vx-euiSplitButtonActionSecondary",
-    styles: "border-inline-start:none;border-start-start-radius:0;border-end-start-radius:0;label:euiSplitButtonActionSecondary;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  }
+export var euiSplitButtonActionStyles = function euiSplitButtonActionStyles(euiThemeContext, size) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var buttonSizeMap = euiButtonSizeMap(euiThemeContext);
+
+  // uses smaller sizes due to the buttons being inset into the parent container
+  var buttonSize = size === 's' ? buttonSizeMap.xs.height : buttonSizeMap.s.height;
+  var buttonMinWidth = size === 's' ? buttonSizeMap.xs.minWidth : buttonSizeMap.s.minWidth;
+  var buttonRadius = size === 's' ? buttonSizeMap.xs.radiusInset : buttonSizeMap.s.radiusInset;
+  var commonStyles = "\n    block-size: ".concat(buttonSize, ";\n    border-radius: ").concat(buttonRadius, ";\n    /* prevent issues in jsdom where pointer-events: none is inherited from the pseudo element */\n    pointer-events: auto;\n\n     /* zero-specificity ancestor :has() check */\n    &:where(:not(:has(").concat(primaryDisabledSelector, ", ").concat(secondaryDisabledSelector, ")) &) {\n      border: none;\n    }\n    \n    &:where(:has(").concat(primaryDisabledSelector, ", ").concat(secondaryDisabledSelector, ") &) {\n      &:is(").concat(euiDisabledSelector, ") {\n        border: none;\n      }\n    }\n   \n  ");
+  return {
+    euiSplitButtonActionPrimary: /*#__PURE__*/css(commonStyles, " z-index:", euiTheme.levels.content, ";&:not(.euiButtonIcon){min-inline-size:", buttonMinWidth, "px;}&.euiButtonIcon{inline-size:", buttonSize, ";};label:euiSplitButtonActionPrimary;"),
+    euiSplitButtonActionSecondary: /*#__PURE__*/css(commonStyles, " inline-size:", buttonSize, ";;label:euiSplitButtonActionSecondary;")
+  };
 };
 export var euiSplitButtonDividerStyles = function euiSplitButtonDividerStyles(euiThemeContext, color) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    divider: /*#__PURE__*/css("border-inline-start:", euiTheme.border.width.thin, " solid ", color, ";;label:divider;")
+    divider: /*#__PURE__*/css("block-size:calc(100% - ", euiTheme.size.s, ");border-inline-start:", euiTheme.border.width.thin, " solid ", color, ";", logicalCSS('margin-horizontal', euiTheme.size.xs), ";&:where(\n          ", primaryDisabledSelector, " + &,\n          :has(~ ", secondaryDisabledSelector, ")\n        ){border-color:", euiTheme.colors.borderBaseDisabled, ";};label:divider;")
   };
 };

package/es/components/button/split_button/split_button_actions.js

@@ -1,8 +1,8 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["className", "isIconOnly", "tooltipProps"],
-  _excluded2 = ["fill", "isDisabled", "isLoading"],
+  _excluded2 = ["fill", "isDisabled", "isLoading", "size"],
   _excluded3 = ["className", "popoverProps", "tooltipProps"],
-  _excluded4 = ["fill", "isDisabled", "isLoading"];
+  _excluded4 = ["fill", "isDisabled", "isLoading", "size"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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) { _defineProperty(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; }
@@ -19,9 +19,10 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * Side Public License, v 1.
  */
 
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiTheme } from '../../../services';
 import { EuiPopover } from '../../popover';
 import { EuiToolTip } from '../../tool_tip';
 import { EuiButton } from '../button';
@@ -35,17 +36,22 @@ export var EuiSplitButtonActionPrimary = function EuiSplitButtonActionPrimary(_r
     isIconOnly = _ref.isIconOnly,
     tooltipProps = _ref.tooltipProps,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var euiThemeContext = useEuiTheme();
   var _useContext = useContext(EuiSplitButtonContext),
     fill = _useContext.fill,
     isDisabled = _useContext.isDisabled,
     isLoading = _useContext.isLoading,
+    size = _useContext.size,
     sharedRest = _objectWithoutProperties(_useContext, _excluded2);
   var _isDisabled = !!isDisabled || isButtonDisabled(rest);
   var _isLoading = !!isLoading || !!rest.isLoading;
   var display = fill ? 'fill' : 'base';
   var classes = classNames('euiSplitButtonActionPrimary', className);
-  var styles = euiSplitButtonActionStyles;
+  var styles = useMemo(function () {
+    return euiSplitButtonActionStyles(euiThemeContext, size);
+  }, [euiThemeContext, size]);
   var actionProps = _objectSpread(_objectSpread(_objectSpread({}, rest), sharedRest), {}, {
+    size: size,
     isDisabled: _isDisabled,
     isLoading: _isLoading,
     css: [styles.euiSplitButtonActionPrimary],
@@ -88,17 +94,22 @@ export var EuiSplitButtonActionSecondary = function EuiSplitButtonActionSecondar
     popoverProps = _ref2.popoverProps,
     tooltipProps = _ref2.tooltipProps,
     rest = _objectWithoutProperties(_ref2, _excluded3);
+  var euiThemeContext = useEuiTheme();
   var _useContext2 = useContext(EuiSplitButtonContext),
     fill = _useContext2.fill,
     isDisabled = _useContext2.isDisabled,
     isLoading = _useContext2.isLoading,
+    size = _useContext2.size,
     sharedRest = _objectWithoutProperties(_useContext2, _excluded4);
   var _isDisabled = !!isDisabled || isButtonDisabled(rest);
   var _isLoading = !!isLoading || !!rest.isLoading;
   var display = fill ? 'fill' : 'base';
   var classes = classNames('euiSplitButtonActionSecondary', className);
-  var styles = euiSplitButtonActionStyles;
+  var styles = useMemo(function () {
+    return euiSplitButtonActionStyles(euiThemeContext, size);
+  }, [euiThemeContext, size]);
   var actionProps = _objectSpread(_objectSpread(_objectSpread({}, rest), sharedRest), {}, {
+    size: size,
     display: display,
     // enforce chevronSingleDown icon when a popover is rendered
     iconType: popoverProps != null ? 'chevronSingleDown' : rest.iconType,