@elastic/eui 82.0.0 → 82.2.0

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

@@ -25,7 +25,7 @@ var crossBrowserProgressValue = function crossBrowserProgressValue(cssProperties
   return "\n  &::-webkit-progress-value {\n    ".concat(cssProperties, "\n  }\n  &::-moz-progress-bar {\n    ").concat(cssProperties, "\n  }\n");
 };
 var indeterminateProgressValue = function indeterminateProgressValue(cssProperties) {
-  return "\n  &:before {\n    ".concat(cssProperties, "\n  }\n");
+  return "\n  &::before {\n    ".concat(cssProperties, "\n  }\n");
 };
 
 /**
@@ -67,11 +67,11 @@ var euiProgressStyles = function euiProgressStyles(_ref3, isNative) {
     // https://css-tricks.com/html5-progress-element/
     // Good resource if you need to work in here. There's some gotchas with
     // dealing with cross-browser progress bars.
-    native: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " appearance:none;border:none;border-radius:", euiTheme.size.s, ";&::-webkit-progress-bar{background-color:", euiTheme.colors.lightShade, ";}", crossBrowserProgressValue("transition: width ".concat(euiTheme.animation.normal, " linear;")), ";;label:native;"),
+    native: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " appearance:none;border:none;border-radius:", euiTheme.size.s, ";&::-webkit-progress-bar{background-color:", euiTheme.colors.lightShade, ";}", crossBrowserProgressValue('transition: width ${euiTheme.animation.normal} linear;'), ";;label:native;"),
     // An indeterminate bar has an unreliable end time. Because of a Firefox animation issue,
     // we apply this style to a <div> instead of a <progress> element.
     // See https://css-tricks.com/html5-progress-element/ for more info.
-    indeterminate: /*#__PURE__*/(0, _react.css)("&:before{position:absolute;content:'';", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " transform:scaleX(0) translateX(0%);animation:", euiIndeterminateAnimation, " 1s ", euiTheme.animation.resistance, " infinite;", _global_styling.euiCantAnimate, "{animation-duration:2s;animation-timing-function:linear;}};label:indeterminate;"),
+    indeterminate: /*#__PURE__*/(0, _react.css)("&::before{position:absolute;content:'';", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " transform:scaleX(0) translateX(0%);animation:", euiIndeterminateAnimation, " 1s ", euiTheme.animation.resistance, " infinite;", _global_styling.euiCantAnimate, "{animation-duration:2s;animation-timing-function:linear;}};label:indeterminate;"),
     // Sizes
     xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.xxs), ";;label:xs;"),
     s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.xs), ";;label:s;"),

package/optimize/lib/components/skeleton/skeleton_title.styles.js

@@ -19,14 +19,14 @@ var _utils = require("./utils");
 var euiSkeletonTitleStyles = function euiSkeletonTitleStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiSkeletonTitle: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '45%'), ";border-radius:", euiTheme.border.radius.medium, ";", (0, _utils.euiSkeletonGradientAnimation)(euiThemeContext), ";;label:euiSkeletonTitle;"),
+    euiSkeletonTitle: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '45%'), " border-radius:", euiTheme.border.radius.medium, ";", (0, _utils.euiSkeletonGradientAnimation)(euiThemeContext), ";;label:euiSkeletonTitle;"),
     // Sizes
     l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'l').lineHeight), ";;label:l;"),
     m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'm').lineHeight), ";;label:m;"),
     s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 's').lineHeight), ";;label:s;"),
     xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'xs').lineHeight), ";;label:xs;"),
     xxs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'xxs').lineHeight), ";;label:xxs;"),
-    xxxs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'xxxs').lineHeight), ";border-radius:", euiTheme.border.radius.small, ";;label:xxxs;")
+    xxxs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'xxxs').lineHeight), " border-radius:", euiTheme.border.radius.small, ";;label:xxxs;")
   };
 };
 exports.euiSkeletonTitleStyles = euiSkeletonTitleStyles;

package/optimize/lib/components/steps/step_horizontal.styles.js

@@ -54,7 +54,7 @@ exports.euiStepHorizontalNumberStyles = euiStepHorizontalNumberStyles;
 var euiStepHorizontalTitleStyles = function euiStepHorizontalTitleStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiStepHorizontal__title: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), ";margin-block-start:", euiTheme.size.s, ";font-weight:", euiTheme.font.weight.bold, ";text-align:center;", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{display:none;};label:euiStepHorizontal__title;"),
+    euiStepHorizontal__title: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), " margin-block-start:", euiTheme.size.s, ";font-weight:", euiTheme.font.weight.bold, ";text-align:center;", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{display:none;};label:euiStepHorizontal__title;"),
     disabled: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.disabledText, ";;label:disabled;")
   };
 };

package/optimize/lib/components/steps/steps_horizontal.styles.js

@@ -12,7 +12,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
                                                                                                                                                                                                                                                                                            * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                            */
-//  1. Make each step the same width
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1pmkwst-euiStepsHorizontal__item",
   styles: "flex-grow:1;flex-basis:0%;&:first-of-type>.euiStepHorizontal::before,&:last-of-type>.euiStepHorizontal::after{display:none;};label:euiStepsHorizontal__item;"

package/optimize/lib/components/tabs/tab.styles.js

@@ -49,12 +49,12 @@ var euiTabContentStyles = function euiTabContentStyles(euiThemeContext) {
   return {
     euiTab__content: _ref,
     // sizes
-    s: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxxs'), ";line-height:", euiTheme.size.xl, ";;label:s;"),
-    m: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxs'), ";line-height:", euiTheme.size.xxl, ";;label:m;"),
-    l: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), ";line-height:", (0, _global_styling.mathWithUnits)([euiTheme.size.xl, euiTheme.size.s], function (x, y) {
+    s: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxxs'), " line-height:", euiTheme.size.xl, ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxs'), " line-height:", euiTheme.size.xxl, ";;label:m;"),
+    l: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), " line-height:", (0, _global_styling.mathWithUnits)([euiTheme.size.xl, euiTheme.size.s], function (x, y) {
       return x + y;
     }), ";;label:l;"),
-    xl: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 's'), ";line-height:", (0, _global_styling.mathWithUnits)([euiTheme.size.xxxl, euiTheme.size.s], function (x, y) {
+    xl: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 's'), " line-height:", (0, _global_styling.mathWithUnits)([euiTheme.size.xxxl, euiTheme.size.s], function (x, y) {
       return x + y;
     }), ";;label:xl;"),
     // variations

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

@@ -17,7 +17,7 @@ var _global_styling = require("../../global_styling");
 var euiTabsStyles = function euiTabsStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiTabs: /*#__PURE__*/(0, _react.css)("display:flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";", (0, _global_styling.logicalCSSWithFallback)('overflow-x', 'auto'), ";", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'hidden'), ";position:relative;flex-shrink:0;;label:euiTabs;"),
+    euiTabs: /*#__PURE__*/(0, _react.css)("display:flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.logicalCSSWithFallback)('overflow-x', 'auto'), " ", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'hidden'), " position:relative;flex-shrink:0;;label:euiTabs;"),
     bottomBorder: /*#__PURE__*/(0, _react.css)("box-shadow:inset 0 -", euiTheme.border.width.thin, " 0 ", euiTheme.border.color, ";;label:bottomBorder;"),
     // sizes
     s: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.m, ";;label:s;"),

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

@@ -61,9 +61,9 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
   var blockQuoteBorderWidth = (0, _global_styling.mathWithUnits)(fontSize, function (x) {
     return x / 4;
   });
-  return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n\n    h1 {\n      font-size: ").concat(headings.h1.fontSize, ";\n      line-height: ").concat(headings.h1.lineHeight, ";\n    }\n    h1:not(:last-child) {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n    }\n\n    h2 {\n      font-size: ").concat(headings.h2.fontSize, ";\n      line-height: ").concat(headings.h2.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h3 {\n      font-size: ").concat(headings.h3.fontSize, ";\n      line-height: ").concat(headings.h3.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h4 {\n      font-size: ").concat(headings.h4.fontSize, ";\n      line-height: ").concat(headings.h4.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h5 {\n      font-size: ").concat(headings.h5.fontSize, ";\n      line-height: ").concat(headings.h5.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h6 {\n      font-size: ").concat(headings.h6.fontSize, ";\n      line-height: ").concat(headings.h6.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    dl,\n    blockquote,\n    img,\n    pre,\n    > ul,\n    > ol {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat((0, _global_styling.logicalCSS)('margin-left', lineHeightSize), "\n    }\n\n    // The styles of the nested ordered lists follow the style of GitHub\n    // which is commonly used in Markdown or MDX formatting.\n\n    ol ol,\n    ul ol {\n      list-style-type: lower-roman;\n    }\n\n    ul ul ol,\n    ul ol ol,\n    ol ul ol,\n    ol ol ol {\n      list-style-type: lower-alpha;\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      ").concat((0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(fontSize)), "\n      ").concat((0, _global_styling.logicalCSS)('border-left-width', blockQuoteBorderWidth), "\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    dd + dt {\n      ").concat((0, _global_styling.logicalCSS)('margin-top', fontSize), "\n    }\n\n    dt,\n    .eui-definitionListReverse dd {\n      font-size: ").concat(fontSize, ";\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .eui-definitionListReverse dt {\n      font-size: ").concat((0, _global_styling.euiFontSize)(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat((0, _global_styling.euiFontSize)(euiThemeContext, 's', options).fontSize, ";\n    }\n\n    pre:not(.euiCodeBlock__pre) {\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    code:not(.euiCode):not(.euiCodeBlock__code)  {\n      font-size: .9em; // 90% of parent font size\n    }\n    ").concat(
+  return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n\n    h1 {\n      font-size: ").concat(headings.h1.fontSize, ";\n      line-height: ").concat(headings.h1.lineHeight, ";\n    }\n    h1:not(:last-child) {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n    }\n\n    h2 {\n      font-size: ").concat(headings.h2.fontSize, ";\n      line-height: ").concat(headings.h2.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h3 {\n      font-size: ").concat(headings.h3.fontSize, ";\n      line-height: ").concat(headings.h3.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h4 {\n      font-size: ").concat(headings.h4.fontSize, ";\n      line-height: ").concat(headings.h4.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h5 {\n      font-size: ").concat(headings.h5.fontSize, ";\n      line-height: ").concat(headings.h5.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h6 {\n      font-size: ").concat(headings.h6.fontSize, ";\n      line-height: ").concat(headings.h6.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    dl,\n    blockquote,\n    img,\n    pre,\n    > ul,\n    > ol {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat((0, _global_styling.logicalCSS)('margin-left', lineHeightSize), "\n    }\n\n    /* The styles of the nested ordered lists follow the style of GitHub\n       which is commonly used in Markdown or MDX formatting. */\n    ol ol,\n    ul ol {\n      list-style-type: lower-roman;\n    }\n\n    ul ul ol,\n    ul ol ol,\n    ol ul ol,\n    ol ol ol {\n      list-style-type: lower-alpha;\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      ").concat((0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(fontSize)), "\n      ").concat((0, _global_styling.logicalCSS)('border-left-width', blockQuoteBorderWidth), "\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    dd + dt {\n      ").concat((0, _global_styling.logicalCSS)('margin-top', fontSize), "\n    }\n\n    dt,\n    .eui-definitionListReverse dd {\n      font-size: ").concat(fontSize, ";\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .eui-definitionListReverse dt {\n      font-size: ").concat((0, _global_styling.euiFontSize)(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat((0, _global_styling.euiFontSize)(euiThemeContext, 's', options).fontSize, ";\n    }\n\n    pre:not(.euiCodeBlock__pre) {\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    code:not(.euiCode):not(.euiCodeBlock__code)  {\n      font-size: .9em; /* 90% of parent font size */\n    }\n    ").concat(
   // when textSize is 'm', the 'kbd' element gets a line between the text and the border-bottom
-  _customScale === 'm' ? "\n    kbd {\n      ".concat((0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), "\n      // ensures when only one character the shape looks like a square\n      ").concat((0, _global_styling.logicalCSS)('min-width', euiTheme.size.l), "\n      ").concat((0, _global_styling.logicalTextAlignCSS)('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat((0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.text)), "\n      position: absolute;\n      ").concat((0, _global_styling.logicalCSS)('bottom', euiTheme.size.xxs), "\n      ").concat((0, _global_styling.logicalCSS)('left', 0), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    }") : '', "\n  ");
+  _customScale === 'm' ? "\n    kbd {\n      ".concat((0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), "\n      /* Ensures the shape still looks like a square when only one character */\n      ").concat((0, _global_styling.logicalCSS)('min-width', euiTheme.size.l), "\n      ").concat((0, _global_styling.logicalTextAlignCSS)('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat((0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.text)), "\n      position: absolute;\n      ").concat((0, _global_styling.logicalCSS)('bottom', euiTheme.size.xxs), "\n      ").concat((0, _global_styling.logicalCSS)('left', 0), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    }") : '', "\n  ");
 };
 
 /**
@@ -72,7 +72,7 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
 var euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), ";clear:both;a:not([class]){", (0, _link.euiLinkCSS)(euiThemeContext), ";}img{display:block;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote{border-inline-start-color:", euiTheme.border.color, ";border-inline-start-style:solid;}blockquote:not(.euiMarkdownFormat__blockquote){color:", euiTheme.colors.subduedText, ";}h1{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), "clear:both;a:not([class]){", (0, _link.euiLinkCSS)(euiThemeContext), ";}img{display:block;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote{border-inline-start-color:", euiTheme.border.color, ";border-inline-start-style:solid;}blockquote:not(.euiMarkdownFormat__blockquote){color:", euiTheme.colors.subduedText, ";}h1{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
       return x / 2;
     }), ";};label:euiText;"),
     constrainedWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),

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

@@ -25,7 +25,7 @@ var euiGlobalToastListStyles = function euiGlobalToastListStyles(euiThemeContext
      * 2. Allow some padding for shadow
      */
     // Base
-    euiGlobalToastList: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('bottom', 0), ";", (0, _global_styling.logicalCSS)('width', "".concat(euiToastWidth, "px")), ";", (0, _global_styling.logicalCSS)('max-height', '100vh'), ";", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'auto'), ";scrollbar-width:none;&::-webkit-scrollbar{", (0, _global_styling.logicalSizeCSS)(0, 0), ";}&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), ";}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiGlobalToastList;"),
+    euiGlobalToastList: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('width', "".concat(euiToastWidth, "px")), (0, _global_styling.logicalCSS)('max-height', '100vh'), (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'auto'), "scrollbar-width:none;&::-webkit-scrollbar{", (0, _global_styling.logicalSizeCSS)(0, 0), ";}&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), ";}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiGlobalToastList;"),
     // Variants
     right: /*#__PURE__*/(0, _react.css)("&:not(:empty){", (0, _global_styling.logicalCSS)('right', 0), ";", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('padding-left', "".concat(euiTheme.base * 4, "px")), ";}};label:right;"),
     left: /*#__PURE__*/(0, _react.css)("&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('padding-right', "".concat(euiTheme.base * 4, "px")), ";}};label:left;")
@@ -37,7 +37,7 @@ var euiGlobalToastListItemStyles = function euiGlobalToastListItemStyles(_ref) {
   var euiShowToast = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    transform: translateY(", ") scale(.9);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(0) scale(1);\n    opacity: 1;\n  }\n"])), euiTheme.size.l);
   return {
     // Base
-    euiGlobalToastListItem: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.base), ";animation:", euiTheme.animation.normal, " ", euiShowToast, " ", euiTheme.animation.resistance, ";opacity:1;&:first-child{", (0, _global_styling.logicalCSS)('margin-top', 'auto'), ";}&:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', 0), ";};label:euiGlobalToastListItem;"),
+    euiGlobalToastListItem: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.base), " animation:", euiTheme.animation.normal, " ", euiShowToast, " ", euiTheme.animation.resistance, ";opacity:1;&:first-child{", (0, _global_styling.logicalCSS)('margin-top', 'auto'), ";}&:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', 0), ";};label:euiGlobalToastListItem;"),
     // States
     dismissed: /*#__PURE__*/(0, _react.css)("transition:opacity ", euiTheme.animation.normal, ";opacity:0;;label:dismissed;")
   };

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

@@ -19,9 +19,9 @@ var euiToastStyles = function euiToastStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiToast: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", (0, _amsterdam.euiShadowLarge)(euiThemeContext), ";position:relative;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), ";background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('width', '100%'), ";&:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
+    euiToast: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", (0, _amsterdam.euiShadowLarge)(euiThemeContext), " position:relative;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('width', '100%'), " &:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
     // Elements
-    euiToast__closeButton: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('right', euiTheme.size.base), ";;label:euiToast__closeButton;"),
+    euiToast__closeButton: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('right', euiTheme.size.base), ";;label:euiToast__closeButton;"),
     // Variants
     primary: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "2px solid ".concat(euiTheme.colors.primary)), ";;label:primary;"),
     success: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "2px solid ".concat(euiTheme.colors.success)), ";;label:success;"),
@@ -34,10 +34,10 @@ var euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiToastHeader: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-right', euiTheme.size.l), ";display:flex;align-items:baseline;>*+*{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.s), ";};label:euiToastHeader;"),
+    euiToastHeader: /*#__PURE__*/(0, _react.css)("display:flex;align-items:baseline;", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.l), ">*+*{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.s), ";};label:euiToastHeader;"),
     // Elements
     euiToastHeader__icon: /*#__PURE__*/(0, _react.css)("flex:0 0 auto;fill:", euiTheme.colors.title, ";transform:translateY(2px);;label:euiToastHeader__icon;"),
-    euiToastHeader__title: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), ";font-weight:", euiTheme.font.weight.bold, ";;label:euiToastHeader__title;"),
+    euiToastHeader__title: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.bold, ";;label:euiToastHeader__title;"),
     // Variants
     withBody: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:withBody;")
   };

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

@@ -56,12 +56,12 @@ var euiTokenStyles = function euiTokenStyles(_ref2, fill) {
     square: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";;label:square;"),
     rectangle: /*#__PURE__*/(0, _react.css)("box-sizing:content-box;border-radius:", euiTheme.border.radius.small, ";;label:rectangle;"),
     // Sizes
-    xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.s, euiTheme.size.s), ";&[class*='-square'],&[class*='-rectangle']{border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+    xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.s), " &[class*='-square'],&[class*='-rectangle']{border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
       return x / 2;
-    }), ";}&[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-vertical', '1px'), ";", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";};label:xs;"),
-    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.base, euiTheme.size.base), ";&[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";};label:s;"),
-    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.l, euiTheme.size.l), ";&[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), ";};label:m;"),
-    l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.xl, euiTheme.size.xl), ";&[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), ";};label:l;"),
+    }), ";}&[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-vertical', '1px'), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";};label:xs;"),
+    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.base), " &[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";};label:s;"),
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.l), " &[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), ";};label:m;"),
+    l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.xl), " &[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), ";};label:l;"),
     // Colors
     euiColorVis0: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 0), ";label:euiColorVis0;"),
     euiColorVis1: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 1), ";label:euiColorVis1;"),

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

@@ -46,7 +46,7 @@ var euiToolTipStyles = function euiToolTipStyles(euiThemeContext) {
   });
   return {
     // Base
-    euiToolTip: /*#__PURE__*/(0, _react.css)((0, _amsterdam.euiShadow)(euiThemeContext), ";border-radius:", euiTheme.border.radius.medium, ";background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";color:", euiTheme.colors.ghost, ";z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('max-width', '256px'), " overflow-wrap:break-word;padding:", euiTheme.size.s, ";", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";position:absolute;[class*='euiHorizontalRule']{background-color:", euiToolTipBorderColor(euiTheme, colorMode), ";};label:euiToolTip;"),
+    euiToolTip: /*#__PURE__*/(0, _react.css)((0, _amsterdam.euiShadow)(euiThemeContext), " border-radius:", euiTheme.border.radius.medium, ";background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";color:", euiTheme.colors.ghost, ";z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('max-width', '256px'), " overflow-wrap:break-word;padding:", euiTheme.size.s, ";", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), " position:absolute;[class*='euiHorizontalRule']{background-color:", euiToolTipBorderColor(euiTheme, colorMode), ";};label:euiToolTip;"),
     // Sizes
     s: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";;label:s;"),
     // Positions
@@ -65,7 +65,7 @@ var euiToolTipStyles = function euiToolTipStyles(euiThemeContext) {
       right: /*#__PURE__*/(0, _react.css)("transform:translateX(", arrowMinusSize, ") rotateZ(45deg);;label:right;")
     },
     // Title
-    euiToolTip__title: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.bold, ";", (0, _global_styling.logicalCSS)('border-bottom', "solid ".concat(euiTheme.border.width.thin, " ").concat(euiToolTipBorderColor(euiTheme, colorMode))), ";", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), ";", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.xs), ";;label:euiToolTip__title;")
+    euiToolTip__title: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.bold, ";", (0, _global_styling.logicalCSS)('border-bottom', "solid ".concat(euiTheme.border.width.thin, " ").concat(euiToolTipBorderColor(euiTheme, colorMode))), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.xs), ";;label:euiToolTip__title;")
   };
 };
 exports.euiToolTipStyles = euiToolTipStyles;

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

@@ -43,10 +43,10 @@ var euiTourBeaconStyles = function euiTourBeaconStyles(_ref2) {
     euiTourBeacon: /*#__PURE__*/(0, _react.css)("pointer-events:none;position:absolute;", _global_styling.euiCanAnimate, "{opacity:0;transition:opacity 0s ", euiTheme.animation[_popover_panel.openAnimationTiming], ";};label:euiTourBeacon;"),
     isOpen: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{opacity:1;};label:isOpen;"),
     // Positions
-    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowHalfSize), ";", (0, _global_styling.logicalCSS)('left', arrowOffset), ";;label:right;"),
-    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowHalfSize), ";", (0, _global_styling.logicalCSS)('left', arrowSize), ";;label:left;"),
-    top: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowSize), ";", (0, _global_styling.logicalCSS)('left', arrowHalfSize), ";;label:top;"),
-    bottom: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowOffset), ";", (0, _global_styling.logicalCSS)('left', arrowHalfSize), ";;label:bottom;")
+    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowHalfSize), " ", (0, _global_styling.logicalCSS)('left', arrowOffset), ";;label:right;"),
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowHalfSize), " ", (0, _global_styling.logicalCSS)('left', arrowSize), ";;label:left;"),
+    top: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowSize), " ", (0, _global_styling.logicalCSS)('left', arrowHalfSize), ";;label:top;"),
+    bottom: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowOffset), " ", (0, _global_styling.logicalCSS)('left', arrowHalfSize), ";;label:bottom;")
   };
 };
 exports.euiTourBeaconStyles = euiTourBeaconStyles;
@@ -54,7 +54,7 @@ var euiTourHeaderStyles = function euiTourHeaderStyles(_ref3) {
   var euiTheme = _ref3.euiTheme;
   return {
     // Base
-    euiTourHeader: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-bottom', 'none'), ";", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:euiTourHeader;"),
+    euiTourHeader: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-bottom', 'none'), (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:euiTourHeader;"),
     // Elements
     euiTourHeader__title: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-top', 0), ";;label:euiTourHeader__title;"),
     euiTourHeader__subtitle: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.subduedText, ";padding-block-end:", euiTheme.size.xs, ";;label:euiTourHeader__subtitle;")
@@ -66,7 +66,7 @@ var euiTourFooterStyles = function euiTourFooterStyles(_ref4) {
     colorMode = _ref4.colorMode;
   return {
     // Base
-    euiTourFooter: /*#__PURE__*/(0, _react.css)("background-color:", backgroundColor(euiTheme.colors.lightestShade, colorMode), ";", (0, _global_styling.logicalCSS)('border-bottom-left-radius', euiTheme.border.radius.medium), ";", (0, _global_styling.logicalCSS)('border-bottom-right-radius', euiTheme.border.radius.medium), ";;label:euiTourFooter;")
+    euiTourFooter: /*#__PURE__*/(0, _react.css)("background-color:", backgroundColor(euiTheme.colors.lightestShade, colorMode), ";", (0, _global_styling.logicalCSS)('border-bottom-left-radius', euiTheme.border.radius.medium), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', euiTheme.border.radius.medium), ";;label:euiTourFooter;")
   };
 };
 exports.euiTourFooterStyles = euiTourFooterStyles;

package/optimize/lib/global_styling/mixins/_states.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiFocusRing = exports.euiFocusRing = void 0;
+exports.useEuiFocusRing = exports.euiOutline = exports.euiFocusRing = void 0;
 var _services = require("../../services");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -17,17 +17,18 @@ var _services = require("../../services");
  * It is best practice to utilize the browser's default `outline` property for handling focus rings.
  * However, some components need to be forced to have the same behavior, or adjust the display.
  * This function re-applies the same default outline with a couple parameters
- * @param euiTheme UseEuiTheme.euiTheme
+ * @param euiTheme UseEuiTheme
  * @param offset Accepts a specific measurement or 'inset', 'outset' or 'center' to adjust outline position
- * @param color Accepts any CSS color, **Note: only works in -webkit-**
+ * @param color Accepts any CSS color
  */
-var euiFocusRing = function euiFocusRing(_ref) {
+
+var euiOutline = function euiOutline(_ref) {
   var euiTheme = _ref.euiTheme;
   var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center';
-  var options = arguments.length > 2 ? arguments[2] : undefined;
+  var color = arguments.length > 2 ? arguments[2] : undefined;
   // Width is enforced as a constant at the global theme layer
   var outlineWidth = euiTheme.focus.width;
-  var outlineColor = (options === null || options === void 0 ? void 0 : options.color) || euiTheme.focus.color;
+  var outlineColor = color || euiTheme.focus.color;
   var outlineOffset = offset;
   if (offset === 'inset') {
     outlineOffset = "-".concat(outlineWidth);
@@ -37,13 +38,21 @@ var euiFocusRing = function euiFocusRing(_ref) {
     outlineOffset = "calc(".concat(outlineWidth, " / -2);");
   }
 
+  // This is a separate function from `euiFocusRing` because some EUI components
+  // need the outline styles only, not the :focus-visible settings (e.g. - :focus-within usage)
+  return "\n    outline: ".concat(outlineWidth, " solid ").concat(outlineColor, ";\n    outline-offset: ").concat(outlineOffset, ";\n  ");
+};
+exports.euiOutline = euiOutline;
+var euiFocusRing = function euiFocusRing(euiThemeContext) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center';
+  var options = arguments.length > 2 ? arguments[2] : undefined;
   // This function utilizes `focus-visible` to turn on focus outlines.
-  // But this is browser-dependend:
+  // But this is browser-dependent:
   // 👉 Safari and Firefox innately respect only showing the outline with keyboard only
   // 💔 But they don't allow coloring of the 'auto'/default outline, so contrast is no good in dark mode.
-  // 👉 For these browsers we use the solid type in order to match with `currentColor.
+  // 👉 For these browsers we use the solid type in order to match with `currentColor`.
   // 😦 Which does means the outline will be square
-  return "\n    outline: ".concat(outlineWidth, " solid ").concat(outlineColor, ";\n    outline-offset: ").concat(outlineOffset, ";\n\n    // \uD83D\uDC40 Chrome respects :focus-visible and allows coloring the `auto` style\n    &:focus-visible {\n      outline-style: auto;\n    }\n\n    // \uD83D\uDE45\u200D\u2640\uFE0F But Chrome also needs to have the outline forcefully removed from regular `:focus` state\n    &:not(:focus-visible) {\n      outline: none;\n    }\n  ");
+  return "\n    ".concat(euiOutline(euiThemeContext, offset, options === null || options === void 0 ? void 0 : options.color).trim(), "\n\n    // \uD83D\uDC40 Chrome respects :focus-visible and allows coloring the `auto` style\n    &:focus-visible {\n      outline-style: auto;\n    }\n\n    // \uD83D\uDE45\u200D\u2640\uFE0F But Chrome also needs to have the outline forcefully removed from regular `:focus` state\n    &:not(:focus-visible) {\n      outline: none;\n    }\n  ");
 };
 exports.euiFocusRing = euiFocusRing;
 var useEuiFocusRing = function useEuiFocusRing(offset, color) {

package/optimize/lib/themes/amsterdam/global_styling/mixins/button.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiButtonRadiusCSS = exports.useEuiButtonFocusCSS = exports.useEuiButtonColorCSS = exports.euiButtonFillColor = exports.euiButtonEmptyColor = exports.euiButtonColor = exports.BUTTON_COLORS = void 0;
+exports.useEuiButtonFocusCSS = exports.useEuiButtonColorCSS = exports.euiButtonSizeMap = exports.euiButtonFillColor = exports.euiButtonEmptyColor = exports.euiButtonColor = exports.BUTTON_COLORS = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("@emotion/react");
 var _global_styling = require("../../../../global_styling");
@@ -159,28 +159,39 @@ var useEuiButtonColorCSS = function useEuiButtonColorCSS() {
 };
 
 /**
- * Based on the button size, creates the style properties.
- * @returns An object of button size keys with Emption styles for `border-radius`
+ * Creates the translate animation when button is in focus.
+ * @returns string
  */
 exports.useEuiButtonColorCSS = useEuiButtonColorCSS;
-var useEuiButtonRadiusCSS = function useEuiButtonRadiusCSS() {
+var useEuiButtonFocusCSS = function useEuiButtonFocusCSS() {
   var _useEuiTheme = (0, _services.useEuiTheme)(),
     euiTheme = _useEuiTheme.euiTheme;
-  return {
-    xs: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";;label:xs;"),
-    s: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";;label:s;"),
-    m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:m;")
-  };
+  return "\n    ".concat(_global_styling.euiCanAnimate, " {\n      transition: transform ").concat(euiTheme.animation.normal, " ease-in-out,\n        background-color ").concat(euiTheme.animation.normal, " ease-in-out;\n\n      &:hover:not(:disabled) {\n        transform: translateY(-1px);\n      }\n\n      &:focus {\n        animation: euiButtonActive ").concat(euiTheme.animation.normal, "\n          ").concat(euiTheme.animation.bounce, ";\n      }\n\n      &:active:not(:disabled) {\n        transform: translateY(1px);\n      }\n    }\n  ");
 };
 
 /**
- * Creates the translate animation when button is in focus.
- * @returns string
+ * Map of `size` props to various sizings/scales
+ * that should remain consistent across all buttons
  */
-exports.useEuiButtonRadiusCSS = useEuiButtonRadiusCSS;
-var useEuiButtonFocusCSS = function useEuiButtonFocusCSS() {
-  var _useEuiTheme2 = (0, _services.useEuiTheme)(),
-    euiTheme = _useEuiTheme2.euiTheme;
-  return "\n    ".concat(_global_styling.euiCanAnimate, " {\n      transition: transform ").concat(euiTheme.animation.normal, " ease-in-out,\n        background-color ").concat(euiTheme.animation.normal, " ease-in-out;\n\n      &:hover:not(:disabled) {\n        transform: translateY(-1px);\n      }\n\n      &:focus {\n        animation: euiButtonActive ").concat(euiTheme.animation.normal, "\n          ").concat(euiTheme.animation.bounce, ";\n      }\n\n      &:active:not(:disabled) {\n        transform: translateY(1px);\n      }\n    }\n  ");
+exports.useEuiButtonFocusCSS = useEuiButtonFocusCSS;
+var euiButtonSizeMap = function euiButtonSizeMap(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    xs: {
+      height: euiTheme.size.l,
+      radius: euiTheme.border.radius.small,
+      fontScale: 'xs'
+    },
+    s: {
+      height: euiTheme.size.xl,
+      radius: euiTheme.border.radius.small,
+      fontScale: 's'
+    },
+    m: {
+      height: euiTheme.size.xxl,
+      radius: euiTheme.border.radius.medium,
+      fontScale: 's'
+    }
+  };
 };
-exports.useEuiButtonFocusCSS = useEuiButtonFocusCSS;
+exports.euiButtonSizeMap = euiButtonSizeMap;

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "82.0.0",
+  "version": "82.2.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
   "types": "eui.d.ts",
-  "docker_image": "node:16.19.1",
+  "docker_image": "18.16.0",
+  "engines": {
+    "node": ">=18.0.0 < 19.0.0"
+  },
   "sideEffects": [
     "*.css",
     "*.scss"
@@ -22,12 +25,11 @@
     "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.tsx\"",
     "compile-scss": "node ./scripts/compile-scss.js",
     "extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings",
-    "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-sass",
-    "lint-fix": "yarn lint-es-fix",
+    "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-css-in-js && yarn lint-sass",
+    "lint-fix": "yarn lint-es --fix && yarn lint-css-in-js --fix",
     "lint-es": "eslint --cache \"{src,src-docs}/**/*.{ts,tsx,js}\" --max-warnings 0",
-    "lint-es-fix": "yarn lint-es --fix",
-    "lint-sass": "yarn stylelint \"**/*.scss\"",
-    "lint-sass-fix": "yarn stylelint \"**/*.scss\" --fix",
+    "lint-css-in-js": "yarn stylelint \"**/*.styles.ts\" \"./src/themes/**/*.ts\" \"./src/global_styling/**/*.ts\" --quiet-deprecation-warnings",
+    "lint-sass": "yarn stylelint \"**/*.scss\" --quiet-deprecation-warnings",
     "test": "yarn lint && yarn test-unit",
     "test-ci": "yarn test && yarn test-cypress",
     "test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json",
@@ -133,8 +135,9 @@
     "@storybook/react": "^7.0.17",
     "@storybook/react-webpack5": "^7.0.17",
     "@storybook/testing-library": "^0.0.14-next.2",
-    "@svgr/core": "5.5.0",
-    "@svgr/plugin-svgo": "^4.0.3",
+    "@svgr/core": "8.0.0",
+    "@svgr/plugin-jsx": "^8.0.1",
+    "@svgr/plugin-svgo": "^8.0.1",
     "@testing-library/dom": "^8.12.0",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.5",
@@ -214,6 +217,7 @@
     "postcss-cli": "^7.1.2",
     "postcss-inline-svg": "^4.1.0",
     "postcss-loader": "^7.0.1",
+    "postcss-styled-syntax": "^0.4.0",
     "pre-commit": "^1.2.2",
     "prettier": "^2.8.8",
     "process": "^0.11.10",
@@ -240,13 +244,13 @@
     "start-server-and-test": "^1.11.3",
     "storybook": "^7.0.17",
     "style-loader": "^3.3.1",
-    "stylelint": "^14.15.0",
-    "stylelint-config-prettier-scss": "^0.0.1",
-    "stylelint-config-standard-scss": "^6.1.0",
+    "stylelint": "^15.7.0",
+    "stylelint-config-prettier-scss": "^1.0.0",
+    "stylelint-config-standard": "^33.0.0",
+    "stylelint-config-standard-scss": "^9.0.0",
     "terser-webpack-plugin": "^5.3.5",
     "typescript": "4.5.3",
     "uglifyjs-webpack-plugin": "^2.2.0",
-    "url-loader": "^4.1.0",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.10.0",

package/src/components/date_picker/react-datepicker/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 HackerOne Inc and individual contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.