@elastic/eui 64.0.1 → 65.0.2

package/es/components/accessibility/screen_reader_only/screen_reader_only.styles.js

@@ -6,13 +6,14 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
+import { logicalCSS, logicalSizeCSS } from '../../../global_styling';
 /*
  * Mixin that hides elements offscreen to only be read by screen reader
  * See https://github.com/elastic/eui/pull/5130 and https://github.com/elastic/eui/pull/5152 for more info
  */
 
 export var euiScreenReaderOnly = function euiScreenReaderOnly() {
-  return "\n  // Take the element out of the layout\n  position: absolute;\n  // Keep it vertically inline\n  top: auto;\n  // Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text\n  left: -10000px;\n  // The element must have a size (for some screen readers)\n  width: 1px;\n  height: 1px;\n  // But reduce the visible size to nothing\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  // And ensure no overflows occur\n  overflow: hidden;\n  // Chrome requires the negative margin to not cause overflows of parent containers\n  margin: -1px;\n";
+  return "\n  // Take the element out of the layout\n  position: absolute;\n  // Keep it vertically inline\n  ".concat(logicalCSS('top', 'auto'), "\n  // Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text\n  ").concat(logicalCSS('left', '-10000px'), "\n  // The element must have a size (for some screen readers)\n  ").concat(logicalSizeCSS('1px', '1px'), "\n  // But reduce the visible size to nothing\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  // And ensure no overflows occur\n  overflow: hidden;\n  // Chrome requires the negative margin to not cause overflows of parent containers\n  margin: -1px;\n");
 };
 /*
  * Styles

package/es/components/accessibility/skip_link/skip_link.js

@@ -148,70 +148,20 @@ EuiSkipLink.propTypes = {
   fill: PropTypes.bool,
 
   /**
-     * Any of our named colors.
+     * Any of the named color palette options.
+     * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
      */
-  color: PropTypes.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]),
+  color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf(["ghost"])]),
 
   /**
      * Use size `s` in confined spaces
      */
-  size: PropTypes.oneOf(["s", "m"]),
+  size: PropTypes.any,
 
   /**
      * `disabled` is also allowed
      */
   isDisabled: PropTypes.bool,
-
-  /**
-     * Applies the boolean state as the `aria-pressed` property to create a toggle button.
-     * *Only use when the readable text does not change between states.*
-     */
-  isSelected: PropTypes.bool,
-
-  /**
-     * Extends the button to 100% width
-     */
-  fullWidth: PropTypes.bool,
-
-  /**
-     * Override the default minimum width
-     */
-  minWidth: PropTypes.any,
-
-  /**
-     * Force disables the button and changes the icon to a loading spinner
-     */
-  isLoading: PropTypes.bool,
-
-  /**
-     * Object of props passed to the <span/> wrapping the button's content
-     */
-  contentProps: PropTypes.any,
-  style: PropTypes.any,
-
-  /**
-     * Any `type` accepted by EuiIcon
-     */
-  iconType: PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alert", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "asterisk", "auditbeatApp", "beaker", "bell", "bellSlash", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInACircleFilled", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "document", "documentEdit", "documentation", "documents", "dot", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "inputOutput", "inspect", "invert", "ip", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "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", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spacesApp", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelionApp", "timeRefresh", "timeslider", "training", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDenseVector", "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", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]),
-
-  /**
-     * Can only be one side `left` or `right`
-     */
-  iconSide: PropTypes.oneOf(["left", "right"]),
-
-  /**
-     * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
-     * It doesn't apply to the icon.
-     */
-  textProps: PropTypes.shape({
-    className: PropTypes.string,
-    "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string,
-    css: PropTypes.any,
-    ref: PropTypes.any,
-    "data-text": PropTypes.string
-  }),
-  iconSize: PropTypes.oneOf(["s", "m"]),
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,

package/es/components/accordion/accordion.js

@@ -48,6 +48,7 @@ import { EuiI18n } from '../i18n';
 import { htmlIdGenerator, withEuiTheme } from '../../services';
 import { EuiButtonIcon } from '../button';
 import { euiAccordionButtonStyles, euiAccordionChildrenStyles, euiAccordionChildWrapperStyles, euiAccordionIconButtonStyles, euiAccordionOptionalActionStyles, euiAccordionSpinnerStyles, euiAccordionTriggerWrapperStyles } from './accordion.styles';
+import { logicalCSS } from '../../global_styling';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var paddingSizeToClassNameMap = {
   none: '',
@@ -86,7 +87,7 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       var forceState = _this.props.forceState;
       requestAnimationFrame(function () {
         var height = _this.childContent && (forceState ? forceState === 'open' : _this.state.isOpen) ? _this.childContent.clientHeight : 0;
-        _this.childWrapper && _this.childWrapper.setAttribute('style', "height: ".concat(height, "px"));
+        _this.childWrapper && _this.childWrapper.setAttribute('style', logicalCSS('height', "".concat(height, "px")));
       });
     });
 

package/es/components/accordion/accordion.styles.js

@@ -8,18 +8,18 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { euiFontSize } from '../../global_styling/mixins';
+import { euiFontSize, logicals, logicalCSS, logicalTextAlignCSS } from '../../global_styling';
 export var euiAccordionButtonStyles = function euiAccordionButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiAccordion__button: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), ";align-items:center;display:flex;flex-grow:1;line-height:", euiTheme.size.l, ";text-align:left;width:100%;&:hover,&:focus{cursor:pointer;text-decoration:underline;};label:euiAccordion__button;"),
+    euiAccordion__button: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), ";align-items:center;display:flex;flex-grow:1;line-height:", euiTheme.size.l, ";", logicalTextAlignCSS('left'), " ", logicalCSS('width', '100%'), " &:hover,&:focus{cursor:pointer;text-decoration:underline;};label:euiAccordion__button;"),
     // Triggering button needs separate `disabled` key because the element that renders may not support `:disabled`;
     // Hover pseudo selector for specificity
     disabled: /*#__PURE__*/css("&,&:hover{cursor:not-allowed;color:", euiTheme.colors.disabledText, ";text-decoration:none;};label:disabled;")
   };
 };
 
-var _ref5 = process.env.NODE_ENV === "production" ? {
+var _ref4 = process.env.NODE_ENV === "production" ? {
   name: "1xvjonu-isLoading",
   styles: "align-items:center;display:flex;label:isLoading;"
 } : {
@@ -28,11 +28,11 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-export var euiAccordionChildrenStyles = function euiAccordionChildrenStyles(_ref6) {
-  var euiTheme = _ref6.euiTheme;
+export var euiAccordionChildrenStyles = function euiAccordionChildrenStyles(_ref5) {
+  var euiTheme = _ref5.euiTheme;
   return {
     euiAccordion__children: /*#__PURE__*/css(";label:euiAccordion__children;"),
-    isLoading: _ref5,
+    isLoading: _ref4,
     xs: /*#__PURE__*/css("padding:", euiTheme.size.xs, ";;label:xs;"),
     s: /*#__PURE__*/css("padding:", euiTheme.size.s, ";;label:s;"),
     m: /*#__PURE__*/css("padding:", euiTheme.size.base, ";;label:m;"),
@@ -40,21 +40,11 @@ export var euiAccordionChildrenStyles = function euiAccordionChildrenStyles(_ref
     xl: /*#__PURE__*/css("padding:", euiTheme.size.xl, ";;label:xl;")
   };
 };
-
-var _ref4 = process.env.NODE_ENV === "production" ? {
-  name: "xodlxj-isOpen",
-  styles: "height:auto;opacity:1;visibility:visible;label:isOpen;"
-} : {
-  name: "xodlxj-isOpen",
-  styles: "height:auto;opacity:1;visibility:visible;label:isOpen;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-export var euiAccordionChildWrapperStyles = function euiAccordionChildWrapperStyles(_ref7) {
-  var euiTheme = _ref7.euiTheme;
+export var euiAccordionChildWrapperStyles = function euiAccordionChildWrapperStyles(_ref6) {
+  var euiTheme = _ref6.euiTheme;
   return {
-    euiAccordion__childWrapper: /*#__PURE__*/css("height:0;opacity:0;overflow:hidden;transition:height ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ",opacity ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";visibility:hidden;will-change:opacity,visibility,height;&:focus{outline:none;};label:euiAccordion__childWrapper;"),
-    isOpen: _ref4
+    euiAccordion__childWrapper: /*#__PURE__*/css(logicalCSS('height', 0), " opacity:0;overflow:hidden;transition:", logicals.height, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ",opacity ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";visibility:hidden;will-change:opacity,visibility,", logicals.height, ";&:focus{outline:none;};label:euiAccordion__childWrapper;"),
+    isOpen: /*#__PURE__*/css(logicalCSS('height', 'auto'), " opacity:1;visibility:visible;;label:isOpen;")
   };
 };
 
@@ -67,12 +57,12 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-export var euiAccordionIconButtonStyles = function euiAccordionIconButtonStyles(_ref8) {
-  var euiTheme = _ref8.euiTheme;
+export var euiAccordionIconButtonStyles = function euiAccordionIconButtonStyles(_ref7) {
+  var euiTheme = _ref7.euiTheme;
   return {
-    euiAccordion__iconButton: /*#__PURE__*/css("flex-shrink:0;margin-inline-end:", euiTheme.size.xs, ";transform:rotate(0deg)!important;transform:rotate(0deg)!important;;label:euiAccordion__iconButton;"),
+    euiAccordion__iconButton: /*#__PURE__*/css("flex-shrink:0;", logicalCSS('margin-right', euiTheme.size.xs), " transform:rotate(0deg)!important;;label:euiAccordion__iconButton;"),
     isOpen: _ref3,
-    arrowRight: /*#__PURE__*/css("margin-left:", euiTheme.size.xs, ";margin-right:0;;label:arrowRight;")
+    arrowRight: /*#__PURE__*/css(logicalCSS('margin-left', euiTheme.size.xs), " ", logicalCSS('margin-right', 0), ";;label:arrowRight;")
   };
 };
 
@@ -90,10 +80,10 @@ export var euiAccordionOptionalActionStyles = function euiAccordionOptionalActio
     euiAccordion__optionalAction: _ref2
   };
 };
-export var euiAccordionSpinnerStyles = function euiAccordionSpinnerStyles(_ref9) {
-  var euiTheme = _ref9.euiTheme;
+export var euiAccordionSpinnerStyles = function euiAccordionSpinnerStyles(_ref8) {
+  var euiTheme = _ref8.euiTheme;
   return {
-    euiAccordion__spinner: /*#__PURE__*/css("margin-right:", euiTheme.size.xs, ";;label:euiAccordion__spinner;")
+    euiAccordion__spinner: /*#__PURE__*/css(logicalCSS('margin-right', euiTheme.size.xs), ";;label:euiAccordion__spinner;")
   };
 };
 

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

@@ -1,4 +1,4 @@
-var _excluded = ["className", "label", "color", "tooltipContent", "tooltipPosition", "title", "iconType", "onClick", "onClickAriaLabel", "href", "rel", "target", "size"];
+var _excluded = ["className", "label", "color", "tooltipContent", "tooltipPosition", "anchorProps", "title", "iconType", "onClick", "onClickAriaLabel", "href", "rel", "target", "size"];
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
@@ -42,6 +42,7 @@ export var EuiBetaBadge = function EuiBetaBadge(_ref) {
       tooltipContent = _ref.tooltipContent,
       _ref$tooltipPosition = _ref.tooltipPosition,
       tooltipPosition = _ref$tooltipPosition === void 0 ? 'top' : _ref$tooltipPosition,
+      anchorProps = _ref.anchorProps,
       title = _ref.title,
       iconType = _ref.iconType,
       onClick = _ref.onClick,
@@ -107,7 +108,8 @@ export var EuiBetaBadge = function EuiBetaBadge(_ref) {
       return ___EmotionJSX(EuiToolTip, {
         position: tooltipPosition,
         content: tooltipContent,
-        title: title || label
+        title: title || label,
+        anchorProps: anchorProps
       }, content);
     } else {
       return ___EmotionJSX(Fragment, null, content);
@@ -117,7 +119,8 @@ export var EuiBetaBadge = function EuiBetaBadge(_ref) {
       return ___EmotionJSX(EuiToolTip, {
         position: tooltipPosition,
         content: tooltipContent,
-        title: title || label
+        title: title || label,
+        anchorProps: anchorProps
       }, ___EmotionJSX("span", _extends({
         tabIndex: 0,
         className: classes,
@@ -180,6 +183,16 @@ EuiBetaBadge.propTypes = {
      */
   tooltipPosition: PropTypes.oneOf(["top", "right", "bottom", "left"]),
 
+  /**
+     * Passes onto the span wrapping the badge
+     */
+  anchorProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
+  }),
+
   /**
      * Optional title will be supplied as tooltip title or title attribute
      * otherwise the label will be used

package/es/components/basic_table/basic_table.js

@@ -1313,7 +1313,7 @@ EuiBasicTable.propTypes = {
       /**
          * Defines the color of the button
          */
-      color: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.oneOf(["primary", "danger", "text", "ghost", "success", "warning"]).isRequired, PropTypes.func.isRequired]), PropTypes.oneOfType([PropTypes.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]).isRequired, PropTypes.func.isRequired])]),
+      color: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf(["ghost"])]).isRequired, PropTypes.func.isRequired]),
 
       /**
          * The display name of the action (will be the button caption)

package/es/components/basic_table/collapsed_item_actions.js

@@ -238,7 +238,7 @@ CollapsedItemActions.propTypes = {
     /**
        * Defines the color of the button
        */
-    color: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.oneOf(["primary", "danger", "text", "ghost", "success", "warning"]).isRequired, PropTypes.func.isRequired]), PropTypes.oneOfType([PropTypes.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]).isRequired, PropTypes.func.isRequired])]),
+    color: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf(["ghost"])]).isRequired, PropTypes.func.isRequired]),
 
     /**
        * The display name of the action (will be the button caption)

package/es/components/basic_table/in_memory_table.js

@@ -744,7 +744,7 @@ EuiInMemoryTable.propTypes = {
       /**
          * Defines the color of the button
          */
-      color: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.oneOf(["primary", "danger", "text", "ghost", "success", "warning"]).isRequired, PropTypes.func.isRequired]), PropTypes.oneOfType([PropTypes.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]).isRequired, PropTypes.func.isRequired])]),
+      color: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf(["ghost"])]).isRequired, PropTypes.func.isRequired]),
 
       /**
          * The display name of the action (will be the button caption)

package/es/components/beacon/beacon.styles.js

@@ -11,13 +11,13 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
  */
 import { keyframes, css } from '@emotion/react';
 import { euiPaletteColorBlind } from '../../services';
-import { euiCanAnimate } from '../../global_styling';
+import { euiCanAnimate, logicalCSS, logicalSizeCSS } from '../../global_styling';
 var visColors = euiPaletteColorBlind();
 var euiBeaconPulseLarge = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n    transform: scale(.1);\n    opacity: 1;\n  }\n\n  70% {\n    transform: scale(3);\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 0;\n  }\n"])));
 var euiBeaconPulseSmall = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   0% {\n    transform: scale(.1);\n    opacity: 1;\n  }\n\n  70% {\n    transform: scale(2);\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 0;\n  }\n"])));
 export var euiBeaconStyles = function euiBeaconStyles() {
   return {
     // Base
-    euiBeacon: /*#__PURE__*/css("position:relative;background-color:", visColors[0], ";border-radius:50%;&:before,&:after{position:absolute;content:'';height:100%;width:100%;inset-inline-start:0;inset-block-start:0;background-color:transparent;border-radius:50%;box-shadow:0 0 1px 1px ", visColors[0], ";}&:before{transform:scale(1.6);opacity:0.4;}&:after{opacity:0;}", euiCanAnimate, "{&:before{animation:", euiBeaconPulseLarge, " 2.5s infinite ease-out;}&:after{animation:", euiBeaconPulseSmall, " 2.5s infinite ease-out 0.25s;}};label:euiBeacon;")
+    euiBeacon: /*#__PURE__*/css("position:relative;background-color:", visColors[0], ";border-radius:50%;&:before,&:after{position:absolute;content:'';", logicalSizeCSS('100%', '100%'), " ", logicalCSS('left', 0), " ", logicalCSS('top', 0), " background-color:transparent;border-radius:50%;box-shadow:0 0 1px 1px ", visColors[0], ";}&:before{transform:scale(1.6);opacity:0.4;}&:after{opacity:0;}", euiCanAnimate, "{&:before{animation:", euiBeaconPulseLarge, " 2.5s infinite ease-out;}&:after{animation:", euiBeaconPulseSmall, " 2.5s infinite ease-out 0.25s;}};label:euiBeacon;")
   };
 };