@elastic/eui 64.0.0 → 65.0.1

package/optimize/es/components/card/{card_select.js → card_select/card_select.js}

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "isSelected", "isDisabled", "color", "children"];
+var _excluded = ["isSelected", "isDisabled", "disabled", "color", "children"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -10,29 +10,31 @@ var _excluded = ["className", "isSelected", "isDisabled", "color", "children"];
  * Side Public License, v 1.
  */
 import React from 'react';
-import classNames from 'classnames';
-import { EuiButtonEmpty } from '../button/button_empty';
-import { EuiI18n } from '../i18n';
+import { EuiI18n } from '../../i18n';
+import { EuiButton } from '../../button/button';
+import { euiCardSelectStyles } from './card_select.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiCardSelect = function EuiCardSelect(_ref) {
-  var className = _ref.className,
-      _ref$isSelected = _ref.isSelected,
+  var _ref$isSelected = _ref.isSelected,
       isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
       isDisabled = _ref.isDisabled,
+      disabled = _ref.disabled,
       color = _ref.color,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var child = euiCardSelectableText(isSelected, isDisabled, children);
-  var selectClasses = classNames('euiCardSelect', "euiCardSelect--".concat(euiCardSelectableColor(color, isSelected)), className);
-  return ___EmotionJSX(EuiButtonEmpty, _extends({
-    className: selectClasses,
-    color: color || 'text',
-    size: "xs",
-    isDisabled: isDisabled,
+  var styles = euiCardSelectStyles();
+  var baseCSS = [styles.euiCardSelect];
+  var child = euiCardSelectableText(isSelected, isDisabled || disabled, children);
+  return ___EmotionJSX(EuiButton, _extends({
+    css: baseCSS,
+    color: euiCardSelectableColor(color, isSelected),
+    size: "m",
+    isDisabled: isDisabled || disabled,
     iconType: isSelected ? 'check' : undefined,
     role: "switch",
-    "aria-checked": isSelected
+    "aria-checked": isSelected,
+    fullWidth: true
   }, rest), child);
 };
 

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

@@ -0,0 +1,25 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css } from '@emotion/react';
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "g3lgnd-euiCardSelect",
+  styles: "transform:none!important;label:euiCardSelect;"
+} : {
+  name: "g3lgnd-euiCardSelect",
+  styles: "transform:none!important;label:euiCardSelect;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiCardSelectStyles = function euiCardSelectStyles() {
+  return {
+    euiCardSelect: _ref
+  };
+};

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

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+export { EuiCardSelect, euiCardSelectableColor } from './card_select';

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

@@ -13,6 +13,8 @@ import React, { useRef } from 'react';
 import classNames from 'classnames';
 import { EuiRadio, EuiCheckbox } from '../../form';
 import { EuiSplitPanel } from '../../panel';
+import { useEuiTheme } from '../../../services';
+import { euiCheckableCardStyles } from './checkable_card.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiCheckableCard = function EuiCheckableCard(_ref) {
   var children = _ref.children,
@@ -27,12 +29,14 @@ export var EuiCheckableCard = function EuiCheckableCard(_ref) {
       hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var euiThemeContext = useEuiTheme();
+  var styles = euiCheckableCardStyles(euiThemeContext);
+  var baseStyles = [styles.euiCheckableCard, checked && !disabled && styles.isChecked];
+  var labelStyles = [styles.label.euiCheckableCard__label, disabled && styles.label.isDisabled];
+  var childStyles = [styles.euiCheckableCard__children];
   var id = rest.id;
   var labelEl = useRef(null);
-  var classes = classNames('euiCheckableCard', {
-    'euiCheckableCard-isChecked': checked,
-    'euiCheckableCard-isDisabled': disabled
-  }, className);
+  var classes = classNames('euiCheckableCard', className);
   var checkableElement;
 
   if (checkableType === 'radio') {
@@ -47,9 +51,7 @@ export var EuiCheckableCard = function EuiCheckableCard(_ref) {
     }, rest));
   }
 
-  var labelClasses = classNames('euiCheckableCard__label', {
-    'euiCheckableCard__label-isDisabled': disabled
-  });
+  var labelClasses = classNames('euiCheckableCard__label');
 
   var onChangeAffordance = function onChangeAffordance() {
     if (labelEl.current) {
@@ -62,7 +64,8 @@ export var EuiCheckableCard = function EuiCheckableCard(_ref) {
     hasShadow: hasShadow,
     hasBorder: hasBorder,
     direction: "row",
-    className: classes
+    className: classes,
+    css: baseStyles
   }, ___EmotionJSX(EuiSplitPanel.Inner, {
     // Bubbles up the change event when clicking on the whole div for extra affordance
     onClick: disabled ? undefined : onChangeAffordance,
@@ -71,10 +74,12 @@ export var EuiCheckableCard = function EuiCheckableCard(_ref) {
   }, checkableElement), ___EmotionJSX(EuiSplitPanel.Inner, null, ___EmotionJSX("label", {
     ref: labelEl,
     className: labelClasses,
+    css: labelStyles,
     htmlFor: id,
     "aria-describedby": children ? "".concat(id, "-details") : undefined
   }, label), children && ___EmotionJSX("div", {
     id: "".concat(id, "-details"),
-    className: "euiCheckableCard__children"
+    className: "euiCheckableCard__children",
+    css: childStyles
   }, children)));
 };

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

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css } from '@emotion/react';
+import { euiCanAnimate, euiPaddingSize, logicalCSS, logicals } from '../../../global_styling';
+export var euiCheckableCardStyles = function euiCheckableCardStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var padding = euiPaddingSize(euiThemeContext, 'm');
+  return {
+    euiCheckableCard: /*#__PURE__*/css(euiCanAnimate, "{transition:border-color ", euiTheme.animation.normal, " ease-in;};label:euiCheckableCard;"),
+    isChecked: /*#__PURE__*/css("border-color:", euiTheme.colors.primary, ";;label:isChecked;"),
+    label: {
+      euiCheckableCard__label: /*#__PURE__*/css("cursor:pointer;display:block;", logicals.width, ":calc(100% + (", padding, " * 2));padding:", padding, ";margin:-", padding, ";;label:euiCheckableCard__label;"),
+      isDisabled: /*#__PURE__*/css("color:", euiTheme.colors.disabledText, ";cursor:not-allowed;;label:isDisabled;")
+    },
+    euiCheckableCard__children: /*#__PURE__*/css(logicalCSS('margin-top', euiTheme.size.base), ";;label:euiCheckableCard__children;")
+  };
+};

package/optimize/es/components/comment_list/comment_event.styles.js

@@ -53,7 +53,7 @@ export var euiCommentEventHeaderStyles = function euiCommentEventHeaderStyles(_r
   return {
     euiCommentEvent__header: /*#__PURE__*/css(";label:euiCommentEvent__header;"),
     // types
-    regular: /*#__PURE__*/css("background:", euiTheme.colors.lightestShade, ";border-bottom:", euiTheme.border.thin, ";padding:", euiTheme.size.s, ";;label:regular;"),
+    regular: /*#__PURE__*/css("background:", euiTheme.colors.lightestShade, ";", logicalCSS('border-bottom', euiTheme.border.thin), " padding:", euiTheme.size.s, ";;label:regular;"),
     // variants
     hasEventColor: _ref2,
     // Children

package/optimize/es/components/description_list/description_list_title.js

@@ -30,7 +30,7 @@ export var EuiDescriptionListTitle = function EuiDescriptionListTitle(_ref) {
 
   var theme = useEuiTheme();
   var styles = euiDescriptionListTitleStyles(theme);
-  var conditionalStyles = compressed && textStyle === 'reverse' ? [styles.fontStyles.compressed] : [styles.fontStyles[textStyle]];
+  var conditionalStyles = compressed && textStyle !== 'reverse' ? [styles.fontStyles.compressed] : [styles.fontStyles[textStyle]];
 
   switch (type) {
     case 'inline':

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

@@ -10,42 +10,24 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { euiFontSize, logicalCSS, euiTextBreakWord, euiTextTruncate } from '../../global_styling';
+import { euiFontSize, logicalCSS, logicalTextAlignCSS, euiTextBreakWord, euiTextTruncate } from '../../global_styling';
 import { transparentize } from '../../services/color';
 
 var _colorCSS = function _colorCSS(color) {
   return "\n    &:focus {\n      background-color: ".concat(transparentize(color, 0.1), ";\n    }\n  ");
 };
 
-var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "6151l-base",
-  styles: "border-bottom-style:solid;label:base;"
-} : {
-  name: "6151l-base",
-  styles: "border-bottom-style:solid;label:base;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-var _ref4 = process.env.NODE_ENV === "production" ? {
-  name: "1372s1f-truncate",
-  styles: "max-width:100%;label:truncate;"
-} : {
-  name: "1372s1f-truncate",
-  styles: "max-width:100%;label:truncate;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
 export var euiExpressionStyles = function euiExpressionStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiExpression: /*#__PURE__*/css(euiTextBreakWord(), ";font-family:", euiTheme.font.familyCode, ";border-bottom:", euiTheme.border.width.thick, " solid transparent;", euiFontSize(euiThemeContext, 's'), ";display:inline-block;text-align:left;padding:calc(", euiTheme.size.s, " / 2) 0;color:", euiTheme.colors.text, ";&:focus{border-bottom-style:solid;}&+.euiExpression{", logicalCSS('margin-left', euiTheme.size.s), ";};label:euiExpression;"),
+    euiExpression: /*#__PURE__*/css(euiTextBreakWord(), ";display:inline-block;font-family:", euiTheme.font.familyCode, ";", logicalCSS('border-bottom', "".concat(euiTheme.border.width.thick, " solid transparent")), " ", euiFontSize(euiThemeContext, 's'), ";", logicalTextAlignCSS('left'), " padding:", parseFloat(euiTheme.size.s) / 2, "px 0;color:", euiTheme.colors.text, ";&:focus{", logicalCSS('border-bottom-style', 'solid'), ";}&+.euiExpression{", logicalCSS('margin-left', euiTheme.size.s), ";};label:euiExpression;"),
     // Variants
-    columns: /*#__PURE__*/css("border-color:transparent;border-bottom-style:solid;", logicalCSS('margin-bottom', euiTheme.size.xs), " width:100%;display:flex;padding:", euiTheme.size.xs, ";border-radius:", euiTheme.size.xs, ";;label:columns;"),
-    truncate: _ref4,
+    columns: /*#__PURE__*/css("border-color:transparent;", logicalCSS('border-bottom-style', 'solid'), " ", logicalCSS('margin-bottom', euiTheme.size.xs), " ", logicalCSS('width', '100%'), " display:flex;padding:", euiTheme.size.xs, ";border-radius:", euiTheme.size.xs, ";;label:columns;"),
+    truncate: /*#__PURE__*/css(logicalCSS('max-width', '100%'), ";;label:truncate;"),
     // States
-    isClickable: /*#__PURE__*/css("cursor:pointer;border-bottom:", euiTheme.border.editable, ";&[class*='-columns']{background-color:", euiTheme.colors.lightestShade, ";&:focus,&:hover:not(:disabled){[class*='euiExpression__description'],[class*='euiExpression__value']{text-decoration:underline;}}};label:isClickable;"),
+    isClickable: /*#__PURE__*/css("cursor:pointer;", logicalCSS('border-bottom', euiTheme.border.editable), " &[class*='-columns']{background-color:", euiTheme.colors.lightestShade, ";&:focus,&:hover:not(:disabled){[class*='euiExpression__description'],[class*='euiExpression__value']{text-decoration:underline;}}};label:isClickable;"),
     isActive: {
-      base: _ref3,
+      base: /*#__PURE__*/css(logicalCSS('border-bottom-style', 'solid'), ";;label:base;"),
       subdued: /*#__PURE__*/css("border-color:", euiTheme.colors.subduedText, ";;label:subdued;"),
       primary: /*#__PURE__*/css("border-color:", euiTheme.colors.primary, ";;label:primary;"),
       success: /*#__PURE__*/css("border-color:", euiTheme.colors.success, ";;label:success;"),
@@ -71,8 +53,8 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-export var euiExpressionDescriptionStyles = function euiExpressionDescriptionStyles(_ref5) {
-  var euiTheme = _ref5.euiTheme;
+export var euiExpressionDescriptionStyles = function euiExpressionDescriptionStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
   return {
     euiExpression__description: /*#__PURE__*/css(";label:euiExpression__description;"),
     truncate: /*#__PURE__*/css(euiTextTruncate(), " display:inline-block;vertical-align:bottom;;label:truncate;"),
@@ -83,7 +65,7 @@ export var euiExpressionDescriptionStyles = function euiExpressionDescriptionSty
     danger: /*#__PURE__*/css("color:", euiTheme.colors.dangerText, ";;label:danger;"),
     accent: /*#__PURE__*/css("color:", euiTheme.colors.accentText, ";;label:accent;"),
     isUppercase: _ref2,
-    columns: /*#__PURE__*/css("text-align:end;", logicalCSS('margin-right', euiTheme.size.s), ";flex-shrink:0;;label:columns;")
+    columns: /*#__PURE__*/css(logicalTextAlignCSS('right'), " ", logicalCSS('margin-right', euiTheme.size.s), ";flex-shrink:0;;label:columns;")
   };
 };
 
@@ -96,8 +78,8 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-export var euiExpressionValueStyles = function euiExpressionValueStyles(_ref6) {
-  _objectDestructuringEmpty(_ref6);
+export var euiExpressionValueStyles = function euiExpressionValueStyles(_ref4) {
+  _objectDestructuringEmpty(_ref4);
 
   return {
     euiExpression__value: /*#__PURE__*/css(";label:euiExpression__value;"),
@@ -105,8 +87,8 @@ export var euiExpressionValueStyles = function euiExpressionValueStyles(_ref6) {
     columns: _ref
   };
 };
-export var euiExpressionIconStyles = function euiExpressionIconStyles(_ref7) {
-  var euiTheme = _ref7.euiTheme;
+export var euiExpressionIconStyles = function euiExpressionIconStyles(_ref5) {
+  var euiTheme = _ref5.euiTheme;
   return {
     euiExpression__icon: /*#__PURE__*/css(logicalCSS('margin-left', euiTheme.size.xs), ";;label:euiExpression__icon;"),
     columns: /*#__PURE__*/css(logicalCSS('margin-top', euiTheme.size.xs), ";;label:columns;")

package/optimize/es/components/facet/facet_button.js

@@ -17,7 +17,7 @@ import { EuiInnerText } from '../inner_text';
 import { cloneElementWithCss } from '../../services/theme/clone_element';
 import { useEuiTheme } from '../../services';
 import { euiFacetButtonStyles, euiFacetButtonTextStyles, euiFacetButtonIconStyles, euiFacetButtonQuantityStyles, euiFacetButtonLoadingSpinnerStyles } from './facet_button.styles';
-import { EuiButtonDisplay } from '../button/button_display/_button_display';
+import { EuiButtonDisplay, isButtonDisabled } from '../button/button_display/_button_display';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFacetButton = function EuiFacetButton(_ref) {
   var children = _ref.children,
@@ -34,7 +34,10 @@ export var EuiFacetButton = function EuiFacetButton(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   // If in the loading state, force disabled to true
-  isDisabled = isLoading ? true : isDisabled;
+  isDisabled = isButtonDisabled({
+    isDisabled: isDisabled,
+    isLoading: isLoading
+  });
   var selection = isSelected ? 'isSelected' : 'unSelected';
   var classes = classNames('euiFacetButton', className);
   var theme = useEuiTheme();
@@ -79,7 +82,6 @@ export var EuiFacetButton = function EuiFacetButton(_ref) {
     return ___EmotionJSX(EuiButtonDisplay, _extends({
       className: classes,
       css: cssStyles,
-      element: "button",
       isDisabled: isDisabled,
       ref: buttonRef,
       title: rest['aria-label'] || innerText,

package/optimize/es/components/image/image_button.styles.js

@@ -14,7 +14,7 @@ export var euiImageButtonStyles = function euiImageButtonStyles(euiThemeContext)
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiImageButton: /*#__PURE__*/css("position:relative;cursor:pointer;text-align:match-parent;line-height:0;&::before{opacity:0;content:'';pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}}&:hover,&:focus{&::before{opacity:1;}[class*='euiImageButton__icon']{opacity:1;}}&:focus{", euiFocusRing(euiTheme, 'outset'), ";};label:euiImageButton;"),
+    euiImageButton: /*#__PURE__*/css("position:relative;cursor:pointer;text-align:match-parent;line-height:0;&::before{opacity:0;content:'';pointer-events:none;position:absolute;inset:0;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}}&:hover,&:focus{&::before{opacity:1;}[class*='euiImageButton__icon']{opacity:1;}}&:focus{", euiFocusRing(euiThemeContext, 'outset'), ";};label:euiImageButton;"),
     fullWidth: /*#__PURE__*/css(logicalCSS('width', '100%'), ";;label:fullWidth;"),
     shadowHover: /*#__PURE__*/css("&::before{", euiShadow(euiThemeContext, 's'), ";};label:shadowHover;"),
     hasShadowHover: /*#__PURE__*/css("&::before{", euiShadow(euiThemeContext, 'm'), ";};label:hasShadowHover;")

package/optimize/es/components/image/image_wrapper.styles.js

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { logicalCSS, logicalTextAlignCSS, logicalSide } from '../../global_styling';
+import { euiBreakpoint, logicalCSS, logicalTextAlignCSS, logicalSide } from '../../global_styling';
 
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "gacnmc-allowFullScreen",
@@ -33,8 +33,8 @@ export var euiImageWrapperStyles = function euiImageWrapperStyles(euiThemeContex
     // Floats
     // 1: Logical properties/values in `float` is currently not yet supported by all browsers w/o flags
     // @see https://caniuse.com/mdn-css_properties_float_flow_relative_values for when we can remove left/right fallbacks
-    left: /*#__PURE__*/css("@media only screen and (min-width: ", euiTheme.breakpoint.m, "px){float:left;float:", logicalSide.left, ";", logicalCSS('margin-left', '0'), ";", logicalCSS('margin-top', '0'), ";};label:left;"),
-    right: /*#__PURE__*/css("@media only screen and (min-width: ", euiTheme.breakpoint.m, "px){float:right;float:", logicalSide.right, ";", logicalCSS('margin-right', '0'), ";", logicalCSS('margin-top', '0'), ";};label:right;"),
+    left: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['m', 'xl']), "{float:left;float:", logicalSide.left, ";", logicalCSS('margin-left', '0'), ";", logicalCSS('margin-top', '0'), ";};label:left;"),
+    right: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['m', 'xl']), "{float:right;float:", logicalSide.right, ";", logicalCSS('margin-right', '0'), ";", logicalCSS('margin-top', '0'), ";};label:right;"),
     // Sizes
     fullWidth: /*#__PURE__*/css(logicalCSS('width', '100%'), ";;label:fullWidth;")
   };

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

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { euiFocusRing, logicalCSS } from '../../global_styling';
+import { euiFocusRing, logicalCSS, logicalTextAlignCSS } from '../../global_styling';
 
 var _colorCSS = function _colorCSS(color) {
   return "\n    color: ".concat(color, ";\n\n    &:hover,\n    &:focus,\n    &:target {\n      text-decoration: underline;\n    }\n\n    &:target {\n      color: darken(").concat(color, ", 10%);\n    }\n  ");
@@ -20,8 +20,9 @@ export var euiLinkHoverCSS = function euiLinkHoverCSS() {
 export var euiLinkFocusCSS = function euiLinkFocusCSS(euiTheme) {
   return "\n    text-decoration: underline;\n    text-decoration-thickness: ".concat(euiTheme.border.width.thick, " !important;\n  ");
 };
-export var euiLinkCSS = function euiLinkCSS(euiTheme) {
-  return "\n    font-weight: ".concat(euiTheme.font.weight.medium, ";\n    text-align: left;\n\n    &:hover {\n      ").concat(euiLinkHoverCSS(), "\n    }\n\n    &:focus {\n      ").concat(euiFocusRing(euiTheme, 'outset'), "\n      ").concat(euiLinkFocusCSS(euiTheme), "\n    }\n  ");
+export var euiLinkCSS = function euiLinkCSS(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return "\n    font-weight: ".concat(euiTheme.font.weight.medium, ";\n    ").concat(logicalTextAlignCSS('left'), "\n\n    &:hover {\n      ").concat(euiLinkHoverCSS(), "\n    }\n\n    &:focus {\n      ").concat(euiFocusRing(euiThemeContext, 'outset'), "\n      ").concat(euiLinkFocusCSS(euiTheme), "\n    }\n  ");
 };
 
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -33,10 +34,10 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-export var euiLinkStyles = function euiLinkStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
+export var euiLinkStyles = function euiLinkStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiLink: /*#__PURE__*/css(euiLinkCSS(euiTheme), " user-select:text;&[target='_blank']{position:relative;};label:euiLink;"),
+    euiLink: /*#__PURE__*/css(euiLinkCSS(euiThemeContext), " user-select:text;&[target='_blank']{position:relative;};label:euiLink;"),
     disabled: _ref,
     // Color styles
     primary: /*#__PURE__*/css(_colorCSS(euiTheme.colors.primaryText), ";label:primary;"),

package/optimize/es/components/loading/loading_chart.styles.js

@@ -15,7 +15,7 @@ import { css, keyframes } from '@emotion/react';
 import { euiPaletteColorBlind, shadeOrTint } from '../../services';
 import { euiCanAnimate, logicalCSS } from '../../global_styling';
 
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var _ref = process.env.NODE_ENV === "production" ? {
   name: "yovxj7-euiLoadingChart",
   styles: "overflow:hidden;display:inline-flex;label:euiLoadingChart;"
 } : {
@@ -24,38 +24,28 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-export var euiLoadingChartStyles = function euiLoadingChartStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
+export var euiLoadingChartStyles = function euiLoadingChartStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
   return {
-    euiLoadingChart: _ref2,
-    m: /*#__PURE__*/css("height:", euiTheme.size.base, ";gap:", euiTheme.size.xxs, ";;label:m;"),
-    l: /*#__PURE__*/css("height:", euiTheme.size.l, ";gap:", euiTheme.size.xxs, ";;label:l;"),
-    xl: /*#__PURE__*/css("height:", euiTheme.size.xl, ";gap:", euiTheme.size.xs, ";;label:xl;")
+    euiLoadingChart: _ref,
+    m: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.base), " gap:", euiTheme.size.xxs, ";;label:m;"),
+    l: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.l), " gap:", euiTheme.size.xxs, ";;label:l;"),
+    xl: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.xl), " gap:", euiTheme.size.xs, ";;label:xl;")
   };
 };
-
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "decz5u-euiLoadingChart__bar",
-  styles: "height:100%;display:inline-block;label:euiLoadingChart__bar;"
-} : {
-  name: "decz5u-euiLoadingChart__bar",
-  styles: "height:100%;display:inline-block;label:euiLoadingChart__bar;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-export var euiLoadingChartBarStyles = function euiLoadingChartBarStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+export var euiLoadingChartBarStyles = function euiLoadingChartBarStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
   return {
-    euiLoadingChart__bar: _ref,
-    m: /*#__PURE__*/css("width:", euiTheme.size.xxs, ";", logicalCSS('margin-bottom', euiTheme.size.s), ";;label:m;"),
-    l: /*#__PURE__*/css("width:", euiTheme.size.xs, ";", logicalCSS('margin-bottom', euiTheme.size.m), ";;label:l;"),
-    xl: /*#__PURE__*/css("width:", euiTheme.size.s, ";", logicalCSS('margin-bottom', euiTheme.size.base), ";;label:xl;")
+    euiLoadingChart__bar: /*#__PURE__*/css(logicalCSS('height', '100%'), " display:inline-block;;label:euiLoadingChart__bar;"),
+    m: /*#__PURE__*/css(logicalCSS('width', euiTheme.size.xxs), " ", logicalCSS('margin-bottom', euiTheme.size.s), ";;label:m;"),
+    l: /*#__PURE__*/css(logicalCSS('width', euiTheme.size.xs), " ", logicalCSS('margin-bottom', euiTheme.size.m), ";;label:l;"),
+    xl: /*#__PURE__*/css(logicalCSS('width', euiTheme.size.s), " ", logicalCSS('margin-bottom', euiTheme.size.base), ";;label:xl;")
   };
 };
 var barAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: translateY(0);\n  }\n\n  50% {\n    transform: translateY(66%);\n  }\n\n  100% {\n    transform: translateY(0);\n  }\n"])));
-export var _barIndex = function _barIndex(index, mono, _ref5) {
-  var euiTheme = _ref5.euiTheme,
-      colorMode = _ref5.colorMode;
+export var _barIndex = function _barIndex(index, mono, _ref4) {
+  var euiTheme = _ref4.euiTheme,
+      colorMode = _ref4.colorMode;
   var backgroundColor = mono ? shadeOrTint(euiTheme.colors.lightShade, index * 0.04, colorMode) : euiPaletteColorBlind()[index];
   return /*#__PURE__*/css("background-color:", backgroundColor, ";transform:translateY(", 22 * index, "%);", euiCanAnimate, "{animation:", barAnimation, " 1s ", ".".concat(index, "s"), " infinite;}");
 };

package/optimize/es/components/loading/loading_content.styles.js

@@ -10,7 +10,7 @@ var _templateObject;
  * Side Public License, v 1.
  */
 import { css, keyframes } from '@emotion/react';
-import { euiCanAnimate } from '../../global_styling';
+import { euiCanAnimate, logicalCSS } from '../../global_styling';
 import { COLOR_MODES_STANDARD, shade, tint } from '../../services';
 var loadingContentGradient = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: translateX(-53%);\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n"])));
 export var euiLoadingContentStyles = function euiLoadingContentStyles(_ref) {
@@ -19,6 +19,6 @@ export var euiLoadingContentStyles = function euiLoadingContentStyles(_ref) {
   var gradientStartStop = colorMode === COLOR_MODES_STANDARD.dark ? shade(euiTheme.colors.lightShade, 0.12) : tint(euiTheme.colors.lightShade, 0.65);
   var gradientMiddle = colorMode === COLOR_MODES_STANDARD.dark ? shade(euiTheme.colors.lightShade, 0.24) : tint(euiTheme.colors.lightShade, 0.8);
   return {
-    euiLoadingContent__singleLine: /*#__PURE__*/css("display:block;width:100%;height:", euiTheme.size.base, ";border-radius:", euiTheme.border.radius.medium, ";background:", gradientStartStop, ";overflow:hidden;&:not(:last-child){margin-block-end:", euiTheme.size.s, ";}&:last-child:not(:only-child){width:75%;}&::after{content:'';display:block;width:220%;height:100%;background:linear-gradient(\n          137deg,\n          ", gradientStartStop, " 45%,\n          ", gradientMiddle, " 50%,\n          ", gradientStartStop, " 55%\n        );", euiCanAnimate, "{animation:", loadingContentGradient, " 1.5s ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingContent__singleLine;")
+    euiLoadingContent__singleLine: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), " ", logicalCSS('height', euiTheme.size.base), " border-radius:", euiTheme.border.radius.medium, ";background:", gradientStartStop, ";overflow:hidden;&:not(:last-child){", logicalCSS('margin-bottom', euiTheme.size.s), ";}&:last-child:not(:only-child){", logicalCSS('width', '75%'), ";}&::after{content:'';display:block;", logicalCSS('width', '220%'), " ", logicalCSS('height', '100%'), " background:linear-gradient(\n          137deg,\n          ", gradientStartStop, " 45%,\n          ", gradientMiddle, " 50%,\n          ", gradientStartStop, " 55%\n        );", euiCanAnimate, "{animation:", loadingContentGradient, " 1.5s ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingContent__singleLine;")
   };
 };

package/optimize/es/components/loading/loading_logo.styles.js

@@ -22,15 +22,15 @@ var loadingPadding = {
 export var euiLoadingLogoStyles = function euiLoadingLogoStyles(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
-    euiLoadingLogo: /*#__PURE__*/css("position:relative;display:inline-block;", euiCanAnimate, "{&:before,&:after{position:absolute;content:'';width:90%;inset-inline-start:5%;border-radius:50%;opacity:0.2;z-index:1;}&:before{box-shadow:0 0 ", euiTheme.size.s, " ", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsateAndFade, " ", euiTheme.animation.resistance, " infinite;}&:after{background-color:", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsate, " ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingLogo;"),
+    euiLoadingLogo: /*#__PURE__*/css("position:relative;display:inline-block;", euiCanAnimate, "{&:before,&:after{position:absolute;content:'';inline-size:90%;inset-inline-start:5%;border-radius:50%;opacity:0.2;z-index:1;}&:before{box-shadow:0 0 ", euiTheme.size.s, " ", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsateAndFade, " ", euiTheme.animation.resistance, " infinite;}&:after{background-color:", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsate, " ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingLogo;"),
 
     /**
      * 1. Requires pixel math for animation
      * 2. Add a half the amount of animation distance padding to the top to give it more room
      */
-    m: /*#__PURE__*/css(euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.m], ";}&:before,&:after{height:", euiTheme.base * 0.25, "px;inset-block-end:-", euiTheme.size.xs, ";};label:m;"),
-    l: /*#__PURE__*/css(euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.l], ";}&:before,&:after{height:", euiTheme.base * 0.375, "px;inset-block-end:-", euiTheme.size.s, ";};label:l;"),
-    xl: /*#__PURE__*/css(euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.xl], ";}&:before,&:after{height:", euiTheme.base * 0.5, "px;inset-block-end:-", euiTheme.size.m, ";};label:xl;")
+    m: /*#__PURE__*/css(euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.m], ";}&:before,&:after{block-size:", euiTheme.base * 0.25, "px;inset-block-end:-", euiTheme.size.xs, ";};label:m;"),
+    l: /*#__PURE__*/css(euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.l], ";}&:before,&:after{block-size:", euiTheme.base * 0.375, "px;inset-block-end:-", euiTheme.size.s, ";};label:l;"),
+    xl: /*#__PURE__*/css(euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.xl], ";}&:before,&:after{block-size:", euiTheme.base * 0.5, "px;inset-block-end:-", euiTheme.size.m, ";};label:xl;")
   };
 };
 export var euiLoadingLogoIconStyles = function euiLoadingLogoIconStyles(_ref2) {

package/optimize/es/components/loading/loading_spinner.styles.js

@@ -10,7 +10,7 @@ var _templateObject;
  * Side Public License, v 1.
  */
 import { css, keyframes } from '@emotion/react';
-import { euiCanAnimate } from '../../global_styling';
+import { euiCanAnimate, logicalSizeCSS } from '../../global_styling';
 
 var _loadingSpinner = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(359deg);\n  }\n"])));
 
@@ -31,10 +31,10 @@ export var euiLoadingSpinnerStyles = function euiLoadingSpinnerStyles(_ref, colo
   return {
     euiLoadingSpinner: /*#__PURE__*/css("flex-shrink:0;display:inline-block;border-radius:50%;border:", euiTheme.border.thick, ";", spinnerColorsCSS((color === null || color === void 0 ? void 0 : color.border) || euiTheme.colors.lightShade, (color === null || color === void 0 ? void 0 : color.highlight) || euiTheme.colors.primary), ";", euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
     // Sizes
-    s: /*#__PURE__*/css("width:", euiTheme.size[spinnerSizes.s], ";height:", euiTheme.size[spinnerSizes.s], ";border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:s;"),
-    m: /*#__PURE__*/css("width:", euiTheme.size[spinnerSizes.m], ";height:", euiTheme.size[spinnerSizes.m], ";border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:m;"),
-    l: /*#__PURE__*/css("width:", euiTheme.size[spinnerSizes.l], ";height:", euiTheme.size[spinnerSizes.l], ";;label:l;"),
-    xl: /*#__PURE__*/css("width:", euiTheme.size[spinnerSizes.xl], ";height:", euiTheme.size[spinnerSizes.xl], ";;label:xl;"),
-    xxl: /*#__PURE__*/css("width:", euiTheme.size[spinnerSizes.xxl], ";height:", euiTheme.size[spinnerSizes.xxl], ";;label:xxl;")
+    s: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.s], euiTheme.size[spinnerSizes.s]), " border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:s;"),
+    m: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.m], euiTheme.size[spinnerSizes.m]), " border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:m;"),
+    l: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.l], euiTheme.size[spinnerSizes.l]), ";;label:l;"),
+    xl: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.xl], euiTheme.size[spinnerSizes.xl]), ";;label:xl;"),
+    xxl: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.xxl], euiTheme.size[spinnerSizes.xxl]), ";;label:xxl;")
   };
 };

package/optimize/es/components/markdown_editor/markdown_editor_toolbar.js

@@ -173,6 +173,7 @@ export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, r
       icon: button.iconType
     }));
   })) : null), isPreviewing ? ___EmotionJSX(EuiButtonEmpty, {
+    "data-test-subj": "markdown_editor_edit_button",
     iconType: "editorCodeBlock",
     color: "text",
     size: "s",
@@ -182,6 +183,7 @@ export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, r
     token: "euiMarkdownEditorToolbar.editor",
     default: "Editor"
   })) : ___EmotionJSX(EuiButtonEmpty, {
+    "data-test-subj": "markdown_editor_preview_button",
     iconType: "eye",
     color: "text",
     size: "s",

package/optimize/es/components/page/page_template.js

@@ -25,7 +25,7 @@ import { EuiPageContent_Deprecated as EuiPageContent, EuiPageContentBody_Depreca
 import { EuiBottomBar } from '../bottom_bar';
 import { useIsWithinBreakpoints } from '../../services';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
-import { useEuiPaddingSize } from '../../global_styling';
+import { useEuiPaddingSize, logicalCSS } from '../../global_styling';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var TEMPLATES = ['default', 'centeredBody', 'centeredContent', 'empty'];
 
@@ -61,7 +61,7 @@ export var EuiPageTemplate_Deprecated = function EuiPageTemplate_Deprecated(_ref
       rest = _objectWithoutProperties(_ref, _excluded);
 
   // BWC page header margin to match padding
-  var headerMargin = /*#__PURE__*/css("margin-bottom: ".concat(useEuiPaddingSize(paddingSize)), ";label:headerMargin;");
+  var headerMargin = /*#__PURE__*/css(logicalCSS('margin-bottom', useEuiPaddingSize(paddingSize)), ";label:headerMargin;");
   /**
    * Full height ~madness~ logic
    */

package/optimize/es/components/page_template/inner/page_inner.styles.js

@@ -15,8 +15,8 @@ export var euiPageInnerStyles = function euiPageInnerStyles(euiThemeContext) {
     euiPageInner: /*#__PURE__*/css("display:flex;flex-direction:column;align-items:stretch;flex:1 1 100%;", logicalCSS('max-width', '100%'), " ", logicalCSS('min-width', '0'), ";;label:euiPageInner;"),
     panelled: /*#__PURE__*/css("background:", euiBackgroundColor(euiThemeContext, 'plain'), ";", euiShadow(euiThemeContext, 'm'), ";;label:panelled;"),
     border: {
-      top: /*#__PURE__*/css("border-top:", euiThemeContext.euiTheme.border.width.thin, " solid ", borderColor, ";;label:top;"),
-      left: /*#__PURE__*/css("border-left:", euiThemeContext.euiTheme.border.width.thin, " solid ", borderColor, ";;label:left;")
+      top: /*#__PURE__*/css(logicalCSS('border-top', "".concat(euiThemeContext.euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:top;"),
+      left: /*#__PURE__*/css(logicalCSS('border-left', "".concat(euiThemeContext.euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:left;")
     }
   };
 };

package/optimize/es/components/page_template/outer/page_outer.styles.js

@@ -8,6 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
+import { logicalCSS } from '../../../global_styling';
 
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "15mvjmo-row",
@@ -39,7 +40,8 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 export var euiPageOuterStyles = function euiPageOuterStyles(_ref4) {
   var euiTheme = _ref4.euiTheme;
   return {
-    euiPageOuter: /*#__PURE__*/css("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;max-width:100%;;label:euiPageOuter;"),
+    euiPageOuter: /*#__PURE__*/css("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;", logicalCSS('max-width', '100%' // Ensures Firefox doesn't expand width beyond bounds
+    ), ";;label:euiPageOuter;"),
     // Grow
     grow: _ref3,
     // Direction

package/optimize/es/components/panel/panel.js

@@ -15,7 +15,7 @@ import classNames from 'classnames';
 import { useEuiTheme } from '../../services';
 import { useEuiBackgroundColorCSS, useEuiPaddingCSS, BACKGROUND_COLORS, PADDING_SIZES } from '../../global_styling';
 import { keysOf } from '../common';
-import { euiPanelStyles } from './panel.style';
+import { euiPanelStyles } from './panel.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SIZES = PADDING_SIZES; // Exported padding sizes and class names necessary for EuiPopover and EuiCard.
 // Which currently will only maintain support for the original values until conversion.