@elastic/eui 123.1.0 → 123.2.0

package/lib/components/toast/toast.styles.js

@@ -10,7 +10,7 @@ var _global_styling = require("../../global_styling");
 var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _title = require("../title/title.styles");
 var _panel = require("../panel/panel.styles");
-var _templateObject, _templateObject2;
+var _templateObject;
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -22,10 +22,7 @@ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.fre
 var TEXT_MAX_WIDTH = 1200;
 var CONTAINER_NAME = 'euiToast';
 var CQC_BREAKPOINT_NARROWEST = '(max-width: 320px)';
-var decorClipSize = '9px'; // the height of the decor clip that includes the border rounding
-var decorClipPath = "polygon(0 0, 100% 0, 100% ".concat(decorClipSize, ", 0 ").concat(decorClipSize, ")");
-var euiToastAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    clip-path: ", ";\n  }\n  to {\n    clip-path: polygon(0 0, 0% 0, 0% ", ", 0 ", ");\n  }\n"])), decorClipPath, decorClipSize, decorClipSize);
-var euiToastAnimationRTL = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from {\n    clip-path: ", ";\n  }\n  to {\n    clip-path: polygon(100% 0, 100% 0, 100% ", ", 100% ", ");\n  }\n"])), decorClipPath, decorClipSize, decorClipSize);
+var euiToastAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    transform: scaleX(1);\n  }\n  to {\n    transform: scaleX(0);\n  }\n"])));
 var euiToastStyles = exports.euiToastStyles = function euiToastStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
@@ -35,26 +32,23 @@ var euiToastStyles = exports.euiToastStyles = function euiToastStyles(euiThemeCo
     return highContrastMode ? x * 2 + y : x + y;
   });
   var highlightOffset = euiTheme.border.width.thin;
-  var highlightSizeOffset = (0, _euiThemeCommon.mathWithUnits)([highlightOffset], function (x) {
-    return x * 2;
-  });
   var paddingTop = (0, _euiThemeCommon.mathWithUnits)([euiTheme.size.base, highlightSize], function (x, y) {
     return x + y;
   });
   var offsetTop = (0, _euiThemeCommon.mathWithUnits)([euiTheme.size.s, highlightSize], function (x, y) {
     return x + y;
   });
-  var decorCommonStyles = "\n    content: '';\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    block-size: 100%;\n    inline-size: 100%;\n    border-radius: ".concat(euiTheme.border.radius.panel, ";\n    border-end-start-radius: 0;\n    border-block-start: ").concat(highlightSize, " solid;\n    clip-path: ").concat(decorClipPath, ";\n    pointer-events: none;\n\n    ").concat((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-    preferred: "\n        inset-block-start: -".concat(highlightOffset, ";\n      inset-inline-start: -").concat(highlightOffset, ";\n      inline-size: calc(100% + ").concat(highlightSizeOffset, ");\n      ")
-  }), "\n  ");
+
+  // Straight bar that doesn't follow the border radius of the toast.
+  var decorCommonStyles = "\n    content: '';\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    inline-size: 100%;\n    block-size: ".concat(highlightSize, ";\n    pointer-events: none;\n  ");
   return {
     // Base
     euiToast: /*#__PURE__*/(0, _react.css)("container-type:inline-size;container-name:", CONTAINER_NAME, ";position:relative;border-radius:", borderRadius, ";", (0, _euiThemeCommon.euiShadowLarge)(euiThemeContext, {
       borderAllInHighContrastMode: true
     }), " ", (0, _global_styling.logicalCSS)('padding-top', paddingTop), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " background-color:", euiTheme.colors.backgroundBasePlain, ";", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.euiTextBreakWord)(), (0, _panel.euiPanelBorderStyles)(euiThemeContext), ";;label:euiToast;"),
-    decor: /*#__PURE__*/(0, _react.css)("position:absolute;inset:0;pointer-events:none;", (0, _high_contrast.preventForcedColors)(euiThemeContext), " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-      preferred: "\n          --euiToastTypeBackgroundColor: ".concat(euiTheme.colors.borderBasePlain, ";\n        ")
-    }), " &::before{", decorCommonStyles, " z-index:", decorLevel, ";border-block-start-color:var(--euiToastTypeBackgroundColor);}&::after{", decorCommonStyles, "z-index:", decorLevel + 1, ";border-block-start-color:var(--euiToastTypeColor);};label:decor;"),
+    decor: /*#__PURE__*/(0, _react.css)("position:absolute;inset:0;border-radius:", borderRadius, ";overflow:hidden;pointer-events:none;", (0, _high_contrast.preventForcedColors)(euiThemeContext), " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      preferred: "\n          --euiToastTypeBackgroundColor: ".concat(euiTheme.colors.borderBasePlain, ";\n          /* Cover the high contrast border so the clip matches its outer radius */\n          inset-block-start: -").concat(highlightOffset, ";\n          inset-inline-start: -").concat(highlightOffset, ";\n          inset-inline-end: -").concat(highlightOffset, ";\n        ")
+    }), " &::before{", decorCommonStyles, " z-index:", decorLevel, ";background-color:var(--euiToastTypeBackgroundColor);}&::after{", decorCommonStyles, "z-index:", decorLevel + 1, ";background-color:var(--euiToastTypeColor);transform-origin:left center;[dir='rtl'] &{transform-origin:right center;}};label:decor;"),
     // handles content + actions layout
     wrapper: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;gap:", euiTheme.size.m, ";inline-size:100%;;label:wrapper;"),
     // handles icon + text layout
@@ -65,7 +59,7 @@ var euiToastStyles = exports.euiToastStyles = function euiToastStyles(euiThemeCo
     icon: /*#__PURE__*/(0, _react.css)("grid-area:icon;position:relative;", (0, _global_styling.logicalCSS)('margin-vertical', euiTheme.size.xxs), ";;label:icon;"),
     actions: /*#__PURE__*/(0, _react.css)("grid-area:actions;display:flex;gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xl), "@container ", CONTAINER_NAME, " ", CQC_BREAKPOINT_NARROWEST, "{flex-wrap:wrap;>*{inline-size:100%;}};label:actions;"),
     dismissButton: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', offsetTop), ";", (0, _global_styling.logicalCSS)('right', euiTheme.size.s), ";;label:dismissButton;"),
-    hasAnimation: /*#__PURE__*/(0, _react.css)("&::after{", _euiThemeCommon.euiCanAnimate, "{will-change:clip-path;animation:", euiToastAnimation, " var(--euiToastAnimationMs) linear forwards;[dir='rtl'] &{animation:", euiToastAnimationRTL, " var(--euiToastAnimationMs) linear forwards;}}};label:hasAnimation;")
+    hasAnimation: /*#__PURE__*/(0, _react.css)("&::after{", _euiThemeCommon.euiCanAnimate, "{animation:", euiToastAnimation, " var(--euiToastAnimationMs) linear forwards;}};label:hasAnimation;")
   };
 };
 var euiToastHeaderStyles = exports.euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext) {

package/lib/components/token/token.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiToken = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _icon = require("../icon");
@@ -22,8 +22,6 @@ var _excluded = ["iconType", "color", "fill", "shape", "size", "style", "classNa
  * Side Public License, v 1.
  */
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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; }
 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; }
@@ -65,7 +63,6 @@ var EuiToken = exports.EuiToken = function EuiToken(_ref) {
   if (typeof iconType === 'string' && iconType.indexOf('token') === 0 && size === 's') {
     finalSize = 'm';
   }
-  var euiTheme = (0, _services.useEuiTheme)();
 
   // If the iconType passed is one of the prefab token types,
   // grab its properties
@@ -73,11 +70,7 @@ var EuiToken = exports.EuiToken = function EuiToken(_ref) {
   var finalColor = color || tokenDefaults.color || 'gray';
   var finalShape = shape || tokenDefaults.shape || 'circle';
   var finalFill = fill || 'light';
-
-  // memoize styles to reduce executing contained color calculations
-  var styles = (0, _react.useMemo)(function () {
-    return (0, _token.euiTokenStyles)(euiTheme, finalFill);
-  }, [euiTheme, finalFill]);
+  var styles = (0, _services.useEuiMemoizedStyles)(_token.euiTokenFillStyles[finalFill]);
   var cssStyles = [styles.euiToken, styles[finalShape], styles[finalFill], styles[size]];
   var finalStyle = style;
   if (isTokenColor(finalColor)) {

package/lib/components/token/token.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiTokenStyles = void 0;
+exports.euiTokenStyles = exports.euiTokenFillStyles = void 0;
 var _react = require("@emotion/react");
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _global_styling = require("../../global_styling");
@@ -99,4 +99,17 @@ var euiTokenStyles = exports.euiTokenStyles = function euiTokenStyles(euiThemeCo
     dark: /*#__PURE__*/(0, _react.css)(";label:dark;"),
     none: /*#__PURE__*/(0, _react.css)(";label:none;")
   };
+};
+
+// Static per-fill generators so `useEuiMemoizedStyles` can share them across instances
+var euiTokenFillStyles = exports.euiTokenFillStyles = {
+  light: function light(euiThemeContext) {
+    return euiTokenStyles(euiThemeContext, 'light');
+  },
+  dark: function dark(euiThemeContext) {
+    return euiTokenStyles(euiThemeContext, 'dark');
+  },
+  none: function none(euiThemeContext) {
+    return euiTokenStyles(euiThemeContext, 'none');
+  }
 };

package/lib/components/tool_tip/icon_tip.js

@@ -120,7 +120,7 @@ EuiIconTip.propTypes = {
   /**
      * The icon type.
      */
-  type: _propTypes.default.oneOfType([_propTypes.default.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", "asterisk", "at", "archive", "article", "axisX", "axisYLeft", "axisYRight", "auditbeatApp", "backgroundTask", "bell", "bellSlash", "beta", "bolt", "boxesVertical", "branch", "briefcase", "broom", "brush", "bug", "bulb", "bullseye", "calendar", "canvasApp", "casesApp", "chartChangePoint", "chartArea", "visArea", "chartAreaStack", "chartBarHorizontal", "chartBarHorizontalStack", "chartBarVertical", "visBarVertical", "chartBarVerticalStack", "chartGauge", "visGauge", "chartHeatmap", "chartLine", "visLine", "chartMix", "chartPie", "visPie", "chartTagCloud", "chartThreshold", "chartWaffle", "check", "checkCircle", "checkCircleFill", "popper", "classificationJob", "clickLeft", "clickRight", "clipboardWarning", "clock", "clockControl", "clockCounter", "clockUp", "cloud", "cloudBolt", "cloudDrizzle", "cloudRain", "cloudStormy", "cloudSun", "cloudSunny", "cluster", "code", "codeApp", "paintBucket", "commandLine", "comment", "editorComment", "compare", "processor", "compute", "consoleApp", "container", "continuityAbove", "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", "emergencyLight", "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", "gear", "gisApp", "globe", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "help", "home", "hourglass", "if", "info", "image", "index", "indexClose", "tableCross", "tableSparkles", "indexEdit", "tablePencil", "indexManagementApp", "mapping", "indexOpen", "tablePlus", "indexPatternApp", "indexRollupApp", "indexRuntime", "tablePlay", "indexSettings", "tableGear", "tableTime", "infinity", "inputOutput", "inspect", "ip", "key", "keyboard", "queryField", "kqlFunction", "queryOperand", "querySelector", "queryValue", "kubernetesNamespace", "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", "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", "pagesSelect", "documentsCheck", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFill", "pinFilled", "pipelineApp", "pivot", "play", "plugs", "plus", "plusCircle", "plusSquare", "presentation", "productAgent", "productCanvas", "productCloudInfra", "productDashboard", "productDiscover", "productElasticAgent", "productFleet", "productLens", "productML", "productStreamsClassic", "productStreamsWired", "productTimelion", "productTSVB", "push", "send", "puzzlePiece", "question", "quote", "radar", "readOnly", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "return", "routeSplit", "save", "scale", "savedObjectsApp", "searchProfilerApp", "section", "securityAnalyticsApp", "securityApp", "securitySignalDetected", "server", "sessionViewer", "shard", "share", "shield", "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", "thermometer", "temperature", "thumbDown", "thumbUp", "timeline", "timelineWithArrow", "timelinePointer", "timelionApp", "refreshTime", "transitionBottomIn", "transitionBottomOut", "transitionLeftIn", "transitionLeftOut", "transitionRightIn", "transitionRightOut", "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.default.string.isRequired, _propTypes.default.elementType.isRequired]),
+  type: _propTypes.default.oneOfType([_propTypes.default.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", "asterisk", "at", "archive", "article", "axisX", "axisYLeft", "axisYRight", "auditbeatApp", "backgroundTask", "bell", "bellSlash", "beta", "bolt", "boxesVertical", "branch", "briefcase", "broom", "brush", "bug", "bulb", "bullseye", "calendar", "canvasApp", "casesApp", "chartChangePoint", "chartArea", "visArea", "chartAreaStack", "chartBarHorizontal", "chartBarHorizontalStack", "chartBarVertical", "visBarVertical", "chartBarVerticalStack", "chartGauge", "visGauge", "chartHeatmap", "chartLine", "visLine", "chartMix", "chartPie", "visPie", "chartTagCloud", "chartThreshold", "chartWaffle", "check", "checkCircle", "checkCircleFill", "popper", "classificationJob", "clickLeft", "clickRight", "clipboardWarning", "clock", "clockControl", "clockCounter", "clockUp", "cloud", "cloudBolt", "cloudDrizzle", "cloudRain", "cloudStormy", "cloudSun", "cloudSunny", "cluster", "code", "codeApp", "paintBucket", "commandLine", "comment", "editorComment", "compare", "processor", "compute", "consoleApp", "container", "continuityAbove", "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", "emergencyLight", "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", "gear", "gisApp", "globe", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "help", "home", "hourglass", "if", "info", "image", "index", "indexClose", "tableCross", "tableSparkles", "indexEdit", "tablePencil", "indexManagementApp", "mapping", "indexOpen", "tablePlus", "indexPatternApp", "indexRollupApp", "indexRuntime", "tablePlay", "indexSettings", "tableGear", "tableTime", "infinity", "inputOutput", "inspect", "ip", "key", "keyboard", "queryField", "kqlFunction", "queryOperand", "querySelector", "queryValue", "kubernetesNamespace", "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", "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", "pagesSelect", "documentsCheck", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFill", "pinFilled", "pipelineApp", "pivot", "play", "plugs", "plus", "plusCircle", "plusSquare", "presentation", "productAgent", "productCanvas", "productCloudInfra", "productDashboard", "productDiscover", "productElasticAgent", "productFleet", "productLens", "productML", "productStreamsClassic", "productStreamsWired", "productTimelion", "productTSVB", "push", "send", "puzzlePiece", "question", "quote", "radar", "readOnly", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "return", "routeSplit", "ruler", "save", "scale", "savedObjectsApp", "searchProfilerApp", "section", "securityAnalyticsApp", "securityApp", "securitySignalDetected", "server", "sessionViewer", "shard", "share", "shield", "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", "thermometer", "temperature", "thumbDown", "thumbUp", "timeline", "timelineWithArrow", "timelinePointer", "timelionApp", "refreshTime", "transitionBottomIn", "transitionBottomOut", "transitionLeftIn", "transitionLeftOut", "transitionRightIn", "transitionRightOut", "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.default.string.isRequired, _propTypes.default.elementType.isRequired]),
   /**
      * The icon size.
      */

package/lib/components/tree_view/tree_view.js

@@ -13,7 +13,7 @@ var _accessibility = require("../accessibility");
 var _tree_view_item = require("./tree_view_item");
 var _tree_view = require("./tree_view.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "items", "display", "expandByDefault", "showExpansionArrows", "theme"];
+var _excluded = ["children", "className", "items", "display", "expandByDefault", "showExpansionArrows", "stylesMemoizer"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
@@ -202,9 +202,9 @@ var EuiTreeViewClass = exports.EuiTreeViewClass = /*#__PURE__*/function (_Compon
         display = _this$props$display === void 0 ? 'default' : _this$props$display,
         expandByDefault = _this$props.expandByDefault,
         showExpansionArrows = _this$props.showExpansionArrows,
-        theme = _this$props.theme,
+        stylesMemoizer = _this$props.stylesMemoizer,
         rest = _objectWithoutProperties(_this$props, _excluded);
-      var styles = (0, _tree_view.euiTreeViewStyles)(theme);
+      var styles = stylesMemoizer(_tree_view.euiTreeViewStyles);
       var cssStyles = [styles.euiTreeView, styles[display]];
 
       // Computed classNames
@@ -336,6 +336,6 @@ EuiTreeViewClass.propTypes = {
   "aria-label": _propTypes.default.string,
   "aria-labelledby": _propTypes.default.string
 };
-var EuiTreeView = exports.EuiTreeView = Object.assign((0, _services.withEuiTheme)(EuiTreeViewClass), {
+var EuiTreeView = exports.EuiTreeView = Object.assign((0, _services.withEuiStylesMemoizer)(EuiTreeViewClass), {
   Item: _tree_view_item.EuiTreeViewItem
 });

package/optimize/es/components/accordion/accordion_children/accordion_children.js

@@ -12,7 +12,7 @@ var _excluded = ["role", "children", "paddingSize", "isLoading", "isLoadingMessa
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiResizeObserver } from '../../observer/resize_observer';
 import { EuiAccordionChildrenLoading } from './accordion_children_loading';
 import { euiAccordionChildrenStyles, euiAccordionChildWrapperStyles } from './accordion_children.styles';
@@ -32,8 +32,7 @@ export var EuiAccordionChildren = function EuiAccordionChildren(_ref) {
   var classes = classNames('euiAccordion__children', {
     'euiAccordion__children-isLoading': isLoading
   });
-  var euiTheme = useEuiTheme();
-  var styles = euiAccordionChildrenStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiAccordionChildrenStyles);
   var cssStyles = [styles.euiAccordion__children, isLoading && styles.isLoading, paddingSize && paddingSize !== 'none' && styles[paddingSize]];
 
   /**
@@ -43,7 +42,7 @@ export var EuiAccordionChildren = function EuiAccordionChildren(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     hasTransition = _useState2[0],
     setHasTransition = _useState2[1];
-  var wrapperStyles = euiAccordionChildWrapperStyles(euiTheme);
+  var wrapperStyles = useEuiMemoizedStyles(euiAccordionChildWrapperStyles);
   var wrapperCssStyles = [wrapperStyles.euiAccordion__childWrapper, isOpen ? wrapperStyles.isOpen : wrapperStyles.isClosed, initialIsOpen && !hasTransition && isOpen && wrapperStyles.noTransition];
 
   /* Controls enabling opening/closing transitions on first interaction

package/optimize/es/components/accordion/accordion_trigger/accordion_arrow.js

@@ -11,7 +11,7 @@ var _excluded = ["arrowDisplay", "arrowProps", "isOpen"];
 
 import React from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiButtonIcon } from '../../button';
 import { euiAccordionArrowStyles } from './accordion_arrow.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -21,9 +21,8 @@ export var EuiAccordionArrow = function EuiAccordionArrow(_ref) {
     arrowProps = _ref.arrowProps,
     isOpen = _ref.isOpen,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
+  var styles = useEuiMemoizedStyles(euiAccordionArrowStyles);
   if (arrowDisplay === 'none') return null;
-  var styles = euiAccordionArrowStyles(euiTheme);
   var cssStyles = [styles.euiAccordion__arrow, styles[arrowDisplay], isOpen ? styles.isOpen : styles.isClosed, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.css];
   var classes = classNames('euiAccordion__arrow', arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.className);
   return ___EmotionJSX(EuiButtonIcon, _extends({

package/optimize/es/components/accordion/accordion_trigger/accordion_button.js

@@ -13,7 +13,7 @@ var _excluded = ["buttonElement", "buttonProps", "buttonClassName", "buttonConte
 
 import React from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
 import { euiAccordionButtonStyles } from './accordion_button.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiAccordionButton = function EuiAccordionButton(_ref) {
@@ -30,8 +30,7 @@ export var EuiAccordionButton = function EuiAccordionButton(_ref) {
     buttonProps = _objectWithoutProperties(_ref2, _excluded2);
   var classes = classNames('euiAccordion__button', buttonClassName, buttonProps.className);
   var buttonContentClasses = classNames('euiAccordion__buttonContent', buttonContentClassName);
-  var euiTheme = useEuiTheme();
-  var styles = euiAccordionButtonStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiAccordionButtonStyles);
   var cssStyles = [styles.euiAccordion__button, isDisabled && styles.disabled].concat(_toConsumableArray(paddingSize ? [styles[paddingSize], arrowDisplay === 'left' && styles.arrowLeft, arrowDisplay === 'right' && styles.arrowRight] : []), [buttonProps.css]);
   var elementIsButton = ButtonElement === 'button';
   return ___EmotionJSX(ButtonElement, _extends({}, buttonProps, rest, {

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

@@ -85,7 +85,6 @@ export var EuiBadge = function EuiBadge(_ref) {
   var clickableCssStyles = styles.clickable[isNamedColor ? color === 'hollow' ? 'hollow' : !fill ? 'base' : 'fill' : 'custom'];
   var iconOnClickCssStyles = isNamedColor ? styles.iconClickable[color === 'hollow' ? 'hollow' : !fill ? 'base' : 'fill'] : styles.iconClickable.custom;
   var cssStyles = [styles.euiBadge, isIconOnly && styles.iconOnly].concat(_toConsumableArray(isDisabled ? [styles.disabled] : [isNamedColor && fill && styles.colors.fill[color], isNamedColor && !fill && styles.colors.base[color], !iconOnClick && (onClick || href) && clickableCssStyles, iconOnClick && !(onClick || href) && iconOnClickCssStyles]));
-  var textCssStyles = [styles.text.euiBadge__text, (onClick || href) && !isDisabled && styles.text.clickable];
   var iconCssStyles = [styles.icon.euiBadge__icon, styles.icon[iconSide]];
   var iconButtonCssStyles = [styles.iconButton.euiBadge__iconButton, styles.iconButton[iconSide]];
   var classes = classNames('euiBadge', className);
@@ -144,7 +143,7 @@ export var EuiBadge = function EuiBadge(_ref) {
     css: styles.euiBadge__content
   }, iconSide === 'left' && optionalIcon, children && ___EmotionJSX("span", {
     className: "euiBadge__text",
-    css: textCssStyles
+    css: styles.text.euiBadge__text
   }, children), iconSide === 'right' && optionalIcon);
   if (iconOnClick) {
     return onClick || href ? ___EmotionJSX("span", {

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

@@ -18,14 +18,6 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "font-size:0;&:disabled{cursor:not-allowed;}.euiBadge__icon{margin:0!important;};label:euiBadge__iconButton;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "1hw5vc4-clickable",
-  styles: "cursor:pointer;label:clickable;"
-} : {
-  name: "1hw5vc4-clickable",
-  styles: "cursor:pointer;label:clickable;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
 export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var badgeColors = euiBadgeColors(euiThemeContext);
@@ -52,7 +44,7 @@ export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
   });
   var focusStyles = "\n    &:focus {\n      ".concat(euiFocusRing(euiThemeContext, 'outset'), "\n      /* uses custom offset as the default \"outset\" is not enough */\n      outline-offset: ").concat(focusOutlineOffset, ";\n    }\n  ");
   var getClickableStyles = function getClickableStyles(interactionStyles) {
-    return "\n    &:not(:disabled) {\n      ".concat(interactionStyles, "\n\n      &:hover,\n      &:focus {\n        ").concat(highContrastStyles, "\n      }\n\n      ").concat(focusStyles, "\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  ");
+    return "\n    &:not(:disabled) {\n      cursor: pointer;\n      ".concat(interactionStyles, "\n\n      &:hover,\n      &:focus {\n        ").concat(highContrastStyles, "\n      }\n\n      ").concat(focusStyles, "\n    }\n  ");
   };
   var customInteractiveStyles = "\n    &:hover {\n      background-color: var(--euiBadgeBackgroundHoverColor);\n    }\n\n    &:active {\n      background-color: var(--euiBadgeBackgroundActiveColor);\n    }\n\n    ".concat(focusStyles, "\n  ");
   var inlinePadding = mathWithUnits(
@@ -84,7 +76,7 @@ export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
         }), ";;label:base;"),
         // hollow has a visible border that must not be overwritten on hover
         hollow: /*#__PURE__*/css(getClickableStyles(getButtonInteractionStyles(euiThemeContext, 'overlay')), " &:hover,&:focus{", highContrastStyles, ";};label:hollow;"),
-        custom: /*#__PURE__*/css("&:not(:disabled){", customInteractiveStyles, ";&:hover,&:focus{", highContrastStyles, ";}};label:custom;")
+        custom: /*#__PURE__*/css("&:not(:disabled){cursor:pointer;", customInteractiveStyles, ";&:hover,&:focus{", highContrastStyles, ";}};label:custom;")
       };
     },
     // on icon button hover, we apply hover styles on the entire badge
@@ -128,7 +120,7 @@ export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
         danger: /*#__PURE__*/css(setBadgeColorVars(badgeColors.base.danger), ";label:danger;")
       }
     },
-    disabled: /*#__PURE__*/css(setBadgeColorVars(badgeColors.disabled), " border-color:", badgeColors.disabled.borderColor, ";*::selection{color:", euiTheme.colors.backgroundBasePlain, ";};label:disabled;"),
+    disabled: /*#__PURE__*/css(setBadgeColorVars(badgeColors.disabled), " border-color:", badgeColors.disabled.borderColor, ";&:disabled{cursor:not-allowed;}*::selection{color:", euiTheme.colors.backgroundBasePlain, ";};label:disabled;"),
     // Content wrapper
     euiBadge__content: /*#__PURE__*/css(logicalCSS(
     // Ensure proper height in case of just displaying an icon
@@ -137,8 +129,7 @@ export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
     }))), " display:flex;align-items:center;overflow:hidden;;label:euiBadge__content;"),
     // Text
     text: {
-      euiBadge__text: /*#__PURE__*/css(euiTextTruncate(), " padding-inline:", euiTheme.size.xxs, ";cursor:inherit;;label:euiBadge__text;"),
-      clickable: _ref2
+      euiBadge__text: /*#__PURE__*/css(euiTextTruncate(), " padding-inline:", euiTheme.size.xxs, ";cursor:inherit;;label:euiBadge__text;")
     },
     // Icon
     icon: {

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

@@ -15,7 +15,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import React, { isValidElement } from 'react';
 import classNames from 'classnames';
-import { getSecureRelForTarget, useEuiTheme, cloneElementWithCss } from '../../services';
+import { getSecureRelForTarget, useEuiTheme, useEuiMemoizedStyles, cloneElementWithCss } from '../../services';
 import { useGeneratedHtmlId } from '../../services/accessibility';
 import { validateHref } from '../../services/security/href_validator';
 import { EuiText } from '../text';
@@ -24,7 +24,7 @@ import { EuiBetaBadge } from '../badge/beta_badge';
 import { EuiPanel } from '../panel';
 import { EuiSpacer } from '../spacer';
 import { EuiCardSelect } from './card_select';
-import { euiCardBetaBadgeStyles, euiCardStyles, euiCardTextStyles } from './card.styles';
+import { euiCardBetaBadgeStyles, euiCardStylesByPadding, euiCardTextStyles } from './card.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ALIGNMENTS = ['left', 'center', 'right'];
 
@@ -66,13 +66,13 @@ export var EuiCard = function EuiCard(_ref) {
   var isDisabled = _isDisabled || !isHrefValid;
   var isClickable = !isDisabled && (onClick || href || selectable && !selectable.isDisabled);
   var euiThemeContext = useEuiTheme();
-  var styles = euiCardStyles(euiThemeContext, paddingSize);
+  var styles = useEuiMemoizedStyles(euiCardStylesByPadding[paddingSize]);
   var cardStyles = [styles.card.euiCard,
   // Text alignment should always be left when horizontal
   styles.card.aligned[layout === 'horizontal' ? 'left' : textAlign], isDisabled && styles.card.disabled];
   var contentStyles = [styles.content.euiCard__content, styles.content.layout[layout]];
   var mainStyles = [styles.main.euiCard__main, styles.main.layout[layout]];
-  var textStyles = euiCardTextStyles(euiThemeContext);
+  var textStyles = useEuiMemoizedStyles(euiCardTextStyles);
   var textCSS = [textStyles.euiCard__text,
   // Text alignment should always be left when horizontal
   textStyles.aligned[layout === 'horizontal' ? 'left' : textAlign], isClickable && textStyles.interactive, isDisabled && textStyles.disabled];

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

@@ -112,6 +112,28 @@ export var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize)
     }
   };
 };
+
+// Static per-size generators so `useEuiMemoizedStyles` can share them across instances
+export var euiCardStylesByPadding = {
+  none: function none(euiThemeContext) {
+    return euiCardStyles(euiThemeContext, 'none');
+  },
+  xs: function xs(euiThemeContext) {
+    return euiCardStyles(euiThemeContext, 'xs');
+  },
+  s: function s(euiThemeContext) {
+    return euiCardStyles(euiThemeContext, 's');
+  },
+  m: function m(euiThemeContext) {
+    return euiCardStyles(euiThemeContext, 'm');
+  },
+  l: function l(euiThemeContext) {
+    return euiCardStyles(euiThemeContext, 'l');
+  },
+  xl: function xl(euiThemeContext) {
+    return euiCardStyles(euiThemeContext, 'xl');
+  }
+};
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "r8agzg-euiCard__text",
   styles: "font:inherit;color:inherit;cursor:inherit;label:euiCard__text;"

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "css", "checkableType", "label", "labelProps", "checked", "disabled", "hasShadow", "hasBorder"];
+var _excluded = ["children", "className", "css", "checkableType", "label", "labelProps", "name", "checked", "disabled", "hasShadow", "hasBorder"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -30,6 +30,7 @@ export var EuiCheckableCard = function EuiCheckableCard(_ref) {
     checkableType = _ref$checkableType === void 0 ? 'radio' : _ref$checkableType,
     label = _ref.label,
     labelProps = _ref.labelProps,
+    name = _ref.name,
     checked = _ref.checked,
     disabled = _ref.disabled,
     hasShadow = _ref.hasShadow,
@@ -57,12 +58,14 @@ export var EuiCheckableCard = function EuiCheckableCard(_ref) {
   var checkableElement;
   if (checkableType === 'radio') {
     checkableElement = ___EmotionJSX(EuiRadio, _extends({
+      name: name,
       checked: checked,
       disabled: disabled
     }, rest));
   } else {
     checkableElement = ___EmotionJSX(EuiCheckbox, _extends({
       inputRef: inputEl,
+      name: name,
       checked: checked,
       disabled: disabled
     }, rest));

package/optimize/es/components/code/utils.js

@@ -159,9 +159,9 @@ function wrapLines(nodes, options, euiTheme) {
     }
   });
   var wrapped = [];
+  var styles = euiCodeBlockLineStyles(euiTheme);
   grouped.forEach(function (node, i) {
     var children = node;
-    var styles = euiCodeBlockLineStyles(euiTheme);
     var lineStyles = cx([styles.euiCodeBlock__line, options.showLineNumbers && styles.hasLineNumbers]);
     if (options.showLineNumbers) {
       var _options$annotations;

package/optimize/es/components/flyout/flyout_menu/flyout_menu.styles.js

@@ -28,14 +28,11 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 export var euiFlyoutMenuStyles = function euiFlyoutMenuStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var topOffset = mathWithUnits([euiTheme.size.m, euiTheme.border.width.thin], function (x, y) {
-    return x + y;
-  });
   var containerHeight = mathWithUnits([euiTheme.size.base, euiTheme.border.width.thin], function (x, y) {
-    return x * 3 + y * 2;
+    return x * 3 + y;
   });
   return {
-    euiFlyoutMenu__container: /*#__PURE__*/css("block-size:", containerHeight, ";flex-shrink:0;padding-block:", euiTheme.size.s, ";padding-inline:", euiTheme.size.s, ";border-block-end:", euiTheme.border.width.thin, " solid ", euiTheme.border.color, ";.euiFlyout__closeButton{", logicalCSS('top', topOffset), ";}.euiTitle{padding-inline:", euiTheme.size.s, ";};label:euiFlyoutMenu__container;"),
+    euiFlyoutMenu__container: /*#__PURE__*/css("block-size:", containerHeight, ";flex-shrink:0;padding-block:", euiTheme.size.s, ";padding-inline:", euiTheme.size.s, ";border-block-end:", euiTheme.border.width.thin, " solid ", euiTheme.border.color, ";.euiFlyout__closeButton{", logicalCSS('top', euiTheme.size.m), ";}.euiTitle{padding-inline:", euiTheme.size.s, ";};label:euiFlyoutMenu__container;"),
     // Full height in high contrast mode so dividers can bleed to the container edges.
     euiFlyoutMenu__controls: _ref2,
     euiFlyoutMenu__spacer: /*#__PURE__*/css("padding-inline:", euiTheme.size.m, ";;label:euiFlyoutMenu__spacer;"),