@elastic/eui 67.1.9 → 67.1.10

package/optimize/es/components/description_list/description_list_description.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 { euiFontSize, euiBreakpoint, logicalTextAlignCSS, logicalCSS } from '../../global_styling';
+import { euiFontSize, euiMaxBreakpoint, euiMinBreakpoint, logicalTextAlignCSS, logicalCSS } from '../../global_styling';
 import { euiTitle } from '../title/title.styles';
 
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -28,7 +28,7 @@ export var euiDescriptionListDescriptionStyles = function euiDescriptionListDesc
     // Types
     row: /*#__PURE__*/css(";label:row;"),
     column: /*#__PURE__*/css(columnDisplay, ";;label:column;"),
-    responsiveColumn: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['xs', 's']), "{", logicalCSS('width', '100%'), " padding:0;}", euiBreakpoint(euiThemeContext, ['m', 'xl']), "{", columnDisplay, ";};label:responsiveColumn;"),
+    responsiveColumn: /*#__PURE__*/css(euiMaxBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('width', '100%'), " padding:0;}", euiMinBreakpoint(euiThemeContext, 'm'), "{", columnDisplay, ";};label:responsiveColumn;"),
     inline: _ref,
     // This nested block handles just the font styling based on compressed and reverse
     fontStyles: {

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

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { euiFontSize, euiTextBreakWord, logicalTextAlignCSS, euiBreakpoint, logicalCSS } from '../../global_styling';
+import { euiFontSize, euiTextBreakWord, logicalTextAlignCSS, euiMaxBreakpoint, euiMinBreakpoint, logicalCSS } from '../../global_styling';
 import { tint } from '../../services';
 import { euiTitle } from '../title/title.styles';
 export var euiDescriptionListTitleStyles = function euiDescriptionListTitleStyles(euiThemeContext) {
@@ -18,7 +18,7 @@ export var euiDescriptionListTitleStyles = function euiDescriptionListTitleStyle
     // Types
     row: /*#__PURE__*/css(";label:row;"),
     column: /*#__PURE__*/css(columnDisplay, ";;label:column;"),
-    responsiveColumn: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['xs', 's']), "{", logicalCSS('width', '100%'), " padding:0;}", euiBreakpoint(euiThemeContext, ['m', 'xl']), "{", columnDisplay, ";};label:responsiveColumn;"),
+    responsiveColumn: /*#__PURE__*/css(euiMaxBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('width', '100%'), " padding:0;}", euiMinBreakpoint(euiThemeContext, 'm'), "{", columnDisplay, ";};label:responsiveColumn;"),
     inline: /*#__PURE__*/css("display:inline;border-radius:", euiTheme.border.radius.small, ";font-weight:", euiTheme.font.weight.medium, ";background-color:", colorMode === 'DARK' ? tint(euiTheme.colors.lightestShade, 0.5) : euiTheme.colors.lightestShade, ";", logicalCSS('margin-vertical', '0'), " ", logicalCSS('margin-horizontal', euiTheme.size.xs), "&:first-of-type{", logicalCSS('margin-left', '0'), ";};label:inline;"),
     // This nested block handles just the font styling based on compressed and reverse
     fontStyles: {

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

@@ -10,12 +10,12 @@ var _templateObject, _templateObject2;
  * Side Public License, v 1.
  */
 import { css, keyframes } from '@emotion/react';
-import { euiCanAnimate, euiBreakpoint, logicalCSS, mathWithUnits } from '../../global_styling';
+import { euiCanAnimate, euiMaxBreakpoint, euiMinBreakpoint, logicalCSS, mathWithUnits } from '../../global_styling';
 import { euiShadowXLarge } from '../../themes/amsterdam/global_styling/mixins';
 import { transparentize } from '../../services/color';
 import { euiFormMaxWidth } from '../form/form.styles';
 var euiFlyoutSlideInRight = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
-var euiFlyoutSlideInLeft = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n}\n"])));
+var euiFlyoutSlideInLeft = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
 export var euiFlyoutCloseButtonStyles = function euiFlyoutCloseButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
@@ -25,15 +25,15 @@ export var euiFlyoutCloseButtonStyles = function euiFlyoutCloseButtonStyles(euiT
     outsideSide: {
       // `transforms` pull in close buttons a little
       // `!important` is necessary here to override the hover/focus transitions of buttons
-      right: /*#__PURE__*/css(logicalCSS('left', 0), " ", euiBreakpoint(euiThemeContext, ['m', 'xl']), "{transform:translateX(calc(-100% - ", euiTheme.size.l, "))!important;}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{transform:translateX(calc(-100% - ", euiTheme.size.xs, "))!important;};label:right;"),
-      left: /*#__PURE__*/css(logicalCSS('right', 0), " ", euiBreakpoint(euiThemeContext, ['m', 'xl']), "{transform:translateX(calc(100% + ", euiTheme.size.l, "))!important;}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{transform:translateX(calc(100% + ", euiTheme.size.xs, "))!important;};label:left;")
+      right: /*#__PURE__*/css(logicalCSS('left', 0), " ", euiMaxBreakpoint(euiThemeContext, 'm'), "{transform:translateX(calc(-100% - ", euiTheme.size.xs, "))!important;}", euiMinBreakpoint(euiThemeContext, 'm'), "{transform:translateX(calc(-100% - ", euiTheme.size.l, "))!important;};label:right;"),
+      left: /*#__PURE__*/css(logicalCSS('right', 0), " ", euiMaxBreakpoint(euiThemeContext, 'm'), "{transform:translateX(calc(100% + ", euiTheme.size.xs, "))!important;}", euiMinBreakpoint(euiThemeContext, 'm'), "{transform:translateX(calc(100% + ", euiTheme.size.l, "))!important;};label:left;")
     }
   };
 };
 export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiFlyout: /*#__PURE__*/css("position:fixed;", logicalCSS('top', 0), " ", logicalCSS('bottom', 0), " ", logicalCSS('height', '100%'), " z-index:", euiTheme.levels.flyout, ";background:", euiTheme.colors.emptyShade, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{", logicalCSS('max-width', '90vw !important'), ";};label:euiFlyout;"),
+    euiFlyout: /*#__PURE__*/css("position:fixed;", logicalCSS('top', 0), " ", logicalCSS('bottom', 0), " ", logicalCSS('height', '100%'), " z-index:", euiTheme.levels.flyout, ";background:", euiTheme.colors.emptyShade, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}", euiMaxBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('max-width', '90vw !important'), ";};label:euiFlyout;"),
     // Flyout sizes
     s: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 's'), ";;label:s;"),
     m: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 'm'), ";;label:m;"),
@@ -42,7 +42,7 @@ export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
     // Side
     right: /*#__PURE__*/css("clip-path:polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);", logicalCSS('right', 0), " ", euiCanAnimate, "{animation:", euiFlyoutSlideInRight, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:right;"),
     // Left-side flyouts should only be used for navigation
-    left: /*#__PURE__*/css(logicalCSS('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, ";};label:left;"),
+    left: /*#__PURE__*/css(logicalCSS('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:left;"),
     // Type
     overlay: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext), ";;label:overlay;"),
     push: /*#__PURE__*/css("clip-path:none;animation-duration:0s!important;z-index:", Number(euiTheme.levels.flyout) - 1, ";;label:push;"),
@@ -85,7 +85,7 @@ var composeFlyoutSizing = function composeFlyoutSizing(euiThemeContext, size) {
       max: "".concat(euiTheme.breakpoint.l, "px")
     }
   };
-  return "\n    ".concat(logicalCSS('max-width', flyoutSizes[size].max), "\n\n    ").concat(euiBreakpoint(euiThemeContext, ['m', 'xl']), " {\n      ").concat(logicalCSS('min-width', flyoutSizes[size].min), "\n      ").concat(logicalCSS('width', flyoutSizes[size].width), "\n    }\n    ").concat(euiBreakpoint(euiThemeContext, ['xs', 's']), " {\n      ").concat(logicalCSS('min-width', 0), "\n      ").concat(logicalCSS('width', flyoutSizes[size].min), "\n    }\n  ");
+  return "\n    ".concat(logicalCSS('max-width', flyoutSizes[size].max), "\n\n    ").concat(euiMaxBreakpoint(euiThemeContext, 'm'), " {\n      ").concat(logicalCSS('min-width', 0), "\n      ").concat(logicalCSS('width', flyoutSizes[size].min), "\n    }\n    ").concat(euiMinBreakpoint(euiThemeContext, 'm'), " {\n      ").concat(logicalCSS('min-width', flyoutSizes[size].min), "\n      ").concat(logicalCSS('width', flyoutSizes[size].width), "\n    }\n  ");
 };
 
 var composeFlyoutPadding = function composeFlyoutPadding(euiThemeContext, paddingSize) {

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 { euiBreakpoint, logicalCSS, logicalTextAlignCSS, logicalSide } from '../../global_styling';
+import { euiMinBreakpoint, 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(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;"),
+    left: /*#__PURE__*/css(euiMinBreakpoint(euiThemeContext, 'm'), "{float:left;float:", logicalSide.left, ";", logicalCSS('margin-left', '0'), ";", logicalCSS('margin-top', '0'), ";};label:left;"),
+    right: /*#__PURE__*/css(euiMinBreakpoint(euiThemeContext, 'm'), "{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/page/page.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 { euiBreakpoint, logicalCSS } from '../../global_styling';
+import { euiMinBreakpoint, logicalCSS } from '../../global_styling';
 
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "ll8kmq-column",
@@ -36,7 +36,7 @@ export var euiPageStyles = function euiPageStyles(euiThemeContext) {
     grow: _ref2,
     // Direction
     column: _ref,
-    row: /*#__PURE__*/css("flex-direction:column;", euiBreakpoint(euiThemeContext, ['m', 'xl']), "{flex-direction:row;};label:row;"),
+    row: /*#__PURE__*/css("flex-direction:column;", euiMinBreakpoint(euiThemeContext, 'm'), "{flex-direction:row;};label:row;"),
     // Max widths
     restrictWidth: /*#__PURE__*/css(logicalCSS('margin-horizontal', 'auto'), ";;label:restrictWidth;")
   };

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

@@ -10,20 +10,20 @@ var _templateObject;
  * Side Public License, v 1.
  */
 import { css, keyframes } from '@emotion/react';
-import { euiBreakpoint, euiScrollBarStyles, logicalCSS, logicalCSSWithFallback, logicalSizeCSS } from '../../global_styling';
+import { euiMaxBreakpoint, euiMinBreakpoint, euiScrollBarStyles, logicalCSS, logicalCSSWithFallback, logicalSizeCSS } from '../../global_styling';
 export var euiGlobalToastListStyles = function euiGlobalToastListStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var euiToastWidth = euiTheme.base * 20;
+  var euiToastWidth = euiTheme.base * 25;
   return {
     /**
      * 1. Allow list to expand as items are added, but cap it at the screen height.
      * 2. Allow some padding for shadow
      */
     // Base
-    euiGlobalToastList: /*#__PURE__*/css(euiScrollBarStyles(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", logicalCSS('bottom', 0), ";", logicalCSS('width', "".concat(euiToastWidth + euiTheme.base * 5, "px")), ";", logicalCSS('max-height', '100vh'), ";", logicalCSSWithFallback('overflow-y', 'auto'), ";scrollbar-width:none;&::-webkit-scrollbar{", logicalSizeCSS(0, 0), ";}&:not(:empty){", logicalCSS('padding-left', euiTheme.size.base), ";", logicalCSS('padding-right', euiTheme.size.base), ";", logicalCSS('padding-vertical', euiTheme.size.base), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{&:not(:empty){", logicalCSS('left', 0), ";", logicalCSS('width', '100%'), ";}};label:euiGlobalToastList;"),
+    euiGlobalToastList: /*#__PURE__*/css(euiScrollBarStyles(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", logicalCSS('bottom', 0), ";", logicalCSS('width', "".concat(euiToastWidth, "px")), ";", logicalCSS('max-height', '100vh'), ";", logicalCSSWithFallback('overflow-y', 'auto'), ";scrollbar-width:none;&::-webkit-scrollbar{", logicalSizeCSS(0, 0), ";}&:not(:empty){", logicalCSS('padding-left', euiTheme.size.base), ";", logicalCSS('padding-right', euiTheme.size.base), ";", logicalCSS('padding-vertical', euiTheme.size.base), ";}", euiMaxBreakpoint(euiThemeContext, 'm'), "{&:not(:empty){", logicalCSS('left', 0), ";", logicalCSS('width', '100%'), ";}};label:euiGlobalToastList;"),
     // Variants
-    right: /*#__PURE__*/css("&:not(:empty){", logicalCSS('right', 0), ";", logicalCSS('padding-left', "".concat(euiTheme.base * 4, "px")), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{&:not(:empty){", logicalCSS('padding-left', euiTheme.size.base), ";}};label:right;"),
-    left: /*#__PURE__*/css("&:not(:empty){", logicalCSS('left', 0), ";", logicalCSS('padding-right', "".concat(euiTheme.base * 4, "px")), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{&:not(:empty){", logicalCSS('padding-right', euiTheme.size.base), ";}};label:left;")
+    right: /*#__PURE__*/css("&:not(:empty){", logicalCSS('right', 0), ";", euiMinBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('padding-left', "".concat(euiTheme.base * 4, "px")), ";}};label:right;"),
+    left: /*#__PURE__*/css("&:not(:empty){", logicalCSS('left', 0), ";", euiMinBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('padding-right', "".concat(euiTheme.base * 4, "px")), ";}};label:left;")
   };
 };
 export var euiGlobalToastListItemStyles = function euiGlobalToastListItemStyles(_ref) {

package/optimize/es/global_styling/mixins/_responsive.js

@@ -9,7 +9,7 @@ import { sortMapBySmallToLargeValues } from '../../services/breakpoint/_sorting'
 import { useEuiTheme } from '../../services/theme/hooks';
 
 /**
- * Generates a CSS media query rule string based on the input breakpoint ranges.
+ * Generates a CSS media query rule string based on the input breakpoint *ranges*.
  * Examples with default theme breakpoints:
  *
  * euiBreakpoint(['s']) becomes `@media only screen and (min-width: 575px) and (max-width: 767px)`
@@ -47,4 +47,49 @@ export var euiBreakpoint = function euiBreakpoint(_ref, sizes) {
 export var useEuiBreakpoint = function useEuiBreakpoint(sizes) {
   var euiTheme = useEuiTheme();
   return euiBreakpoint(euiTheme, sizes);
+};
+/**
+ * Min/Max width breakpoint utilities that generate only a single min/max query/bound
+ *
+ * *Unlike the above euiBreakpoint utility*, these utilities treat breakpoint
+ * sizes as a one-dimensional point, rather than a two-dimensional *screen range*.
+ * Examples with default theme breakpoints:
+ *
+ * euiMaxBreakpoint('m') becomes `@media only screen and (max-width: 767px)`
+ * euiMinBreakpoint('m') becomes `@media only screen and (min-width: 768px)`
+ *
+ * This is safer and more intentional to use than euiBreakpoint(['xs', 's']) / euiBreakpoint(['m', 'xl'])
+ * in the event that consumers add larger or smaller custom breakpoints (e.g 'xxs' or `xxl`)
+ * and if the intention of the media query is actually "m and below/above" vs. "only screens m/l/xl".
+ */
+
+export var euiMinBreakpoint = function euiMinBreakpoint(_ref2, size) {
+  var euiTheme = _ref2.euiTheme;
+  var minBreakpointSize = euiTheme.breakpoint[size];
+
+  if (minBreakpointSize) {
+    return "@media only screen and (min-width: ".concat(minBreakpointSize, "px)");
+  } else {
+    console.warn("Invalid min breakpoint size: ".concat(size));
+    return '@media only screen';
+  }
+};
+export var useEuiMinBreakpoint = function useEuiMinBreakpoint(size) {
+  var euiTheme = useEuiTheme();
+  return euiMinBreakpoint(euiTheme, size);
+};
+export var euiMaxBreakpoint = function euiMaxBreakpoint(_ref3, size) {
+  var euiTheme = _ref3.euiTheme;
+  var maxBreakpointSize = euiTheme.breakpoint[size];
+
+  if (maxBreakpointSize) {
+    return "@media only screen and (max-width: ".concat(maxBreakpointSize - 1, "px)");
+  } else {
+    console.warn("Invalid max breakpoint size: ".concat(size));
+    return '@media only screen';
+  }
+};
+export var useEuiMaxBreakpoint = function useEuiMaxBreakpoint(size) {
+  var euiTheme = useEuiTheme();
+  return euiMaxBreakpoint(euiTheme, size);
 };

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

@@ -26,7 +26,7 @@ var euiDescriptionListStyles = function euiDescriptionListStyles(euiThemeContext
     inline: /*#__PURE__*/(0, _react.css)(";label:inline;"),
     column: /*#__PURE__*/(0, _react.css)(columnDisplay, ";;label:column;"),
     // Responsive columns behave as a row on breakpoints xs-s
-    responsiveColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{", columnDisplay, ";};label:responsiveColumn;"),
+    responsiveColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{", columnDisplay, ";};label:responsiveColumn;"),
     // Alignment
     center: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('center'), ";;label:center;"),
     left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), ";;label:left;")

package/optimize/lib/components/description_list/description_list_description.js

@@ -45,6 +45,7 @@ var EuiDescriptionListDescription = function EuiDescriptionListDescription(_ref)
       align = _useContext.align,
       gutterSize = _useContext.gutterSize;
 
+  var showResponsiveColumns = (0, _services.useIsWithinMinBreakpoint)('m');
   var theme = (0, _services.useEuiTheme)();
   var styles = (0, _description_list_description.euiDescriptionListDescriptionStyles)(theme);
   var conditionalStyles = compressed && textStyle === 'reverse' ? [styles.fontStyles.compressed] : [styles.fontStyles[textStyle]];
@@ -60,7 +61,10 @@ var EuiDescriptionListDescription = function EuiDescriptionListDescription(_ref)
         conditionalStyles.push(styles.left);
       }
 
-      conditionalStyles.push(styles[gutterSize]);
+      if (type === 'column' || showResponsiveColumns) {
+        conditionalStyles.push(styles[gutterSize]);
+      }
+
       break;
   }
 

package/optimize/lib/components/description_list/description_list_description.styles.js

@@ -30,7 +30,7 @@ var euiDescriptionListDescriptionStyles = function euiDescriptionListDescription
     // Types
     row: /*#__PURE__*/(0, _react.css)(";label:row;"),
     column: /*#__PURE__*/(0, _react.css)(columnDisplay, ";;label:column;"),
-    responsiveColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{", (0, _global_styling.logicalCSS)('width', '100%'), " padding:0;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{", columnDisplay, ";};label:responsiveColumn;"),
+    responsiveColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('width', '100%'), " padding:0;}", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{", columnDisplay, ";};label:responsiveColumn;"),
     inline: _ref,
     // This nested block handles just the font styling based on compressed and reverse
     fontStyles: {

package/optimize/lib/components/description_list/description_list_title.styles.js

@@ -29,7 +29,7 @@ var euiDescriptionListTitleStyles = function euiDescriptionListTitleStyles(euiTh
     // Types
     row: /*#__PURE__*/(0, _react.css)(";label:row;"),
     column: /*#__PURE__*/(0, _react.css)(columnDisplay, ";;label:column;"),
-    responsiveColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{", (0, _global_styling.logicalCSS)('width', '100%'), " padding:0;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{", columnDisplay, ";};label:responsiveColumn;"),
+    responsiveColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('width', '100%'), " padding:0;}", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{", columnDisplay, ";};label:responsiveColumn;"),
     inline: /*#__PURE__*/(0, _react.css)("display:inline;border-radius:", euiTheme.border.radius.small, ";font-weight:", euiTheme.font.weight.medium, ";background-color:", colorMode === 'DARK' ? (0, _services.tint)(euiTheme.colors.lightestShade, 0.5) : euiTheme.colors.lightestShade, ";", (0, _global_styling.logicalCSS)('margin-vertical', '0'), " ", (0, _global_styling.logicalCSS)('margin-horizontal', euiTheme.size.xs), "&:first-of-type{", (0, _global_styling.logicalCSS)('margin-left', '0'), ";};label:inline;"),
     // This nested block handles just the font styling based on compressed and reverse
     fontStyles: {

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

@@ -22,7 +22,7 @@ var _form = require("../form/form.styles");
 var _templateObject, _templateObject2;
 
 var euiFlyoutSlideInRight = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
-var euiFlyoutSlideInLeft = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n}\n"])));
+var euiFlyoutSlideInLeft = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
 
 var euiFlyoutCloseButtonStyles = function euiFlyoutCloseButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
@@ -33,8 +33,8 @@ var euiFlyoutCloseButtonStyles = function euiFlyoutCloseButtonStyles(euiThemeCon
     outsideSide: {
       // `transforms` pull in close buttons a little
       // `!important` is necessary here to override the hover/focus transitions of buttons
-      right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{transform:translateX(calc(-100% - ", euiTheme.size.l, "))!important;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{transform:translateX(calc(-100% - ", euiTheme.size.xs, "))!important;};label:right;"),
-      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{transform:translateX(calc(100% + ", euiTheme.size.l, "))!important;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{transform:translateX(calc(100% + ", euiTheme.size.xs, "))!important;};label:left;")
+      right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{transform:translateX(calc(-100% - ", euiTheme.size.xs, "))!important;}", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{transform:translateX(calc(-100% - ", euiTheme.size.l, "))!important;};label:right;"),
+      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{transform:translateX(calc(100% + ", euiTheme.size.xs, "))!important;}", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{transform:translateX(calc(100% + ", euiTheme.size.l, "))!important;};label:left;")
     }
   };
 };
@@ -44,7 +44,7 @@ exports.euiFlyoutCloseButtonStyles = euiFlyoutCloseButtonStyles;
 var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiFlyout: /*#__PURE__*/(0, _react.css)("position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('height', '100%'), " z-index:", euiTheme.levels.flyout, ";background:", euiTheme.colors.emptyShade, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{", (0, _global_styling.logicalCSS)('max-width', '90vw !important'), ";};label:euiFlyout;"),
+    euiFlyout: /*#__PURE__*/(0, _react.css)("position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('height', '100%'), " z-index:", euiTheme.levels.flyout, ";background:", euiTheme.colors.emptyShade, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('max-width', '90vw !important'), ";};label:euiFlyout;"),
     // Flyout sizes
     s: /*#__PURE__*/(0, _react.css)(composeFlyoutSizing(euiThemeContext, 's'), ";;label:s;"),
     m: /*#__PURE__*/(0, _react.css)(composeFlyoutSizing(euiThemeContext, 'm'), ";;label:m;"),
@@ -53,7 +53,7 @@ var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
     // Side
     right: /*#__PURE__*/(0, _react.css)("clip-path:polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);", (0, _global_styling.logicalCSS)('right', 0), " ", _global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideInRight, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:right;"),
     // Left-side flyouts should only be used for navigation
-    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", _global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, ";};label:left;"),
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", _global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:left;"),
     // Type
     overlay: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowXLarge)(euiThemeContext), ";;label:overlay;"),
     push: /*#__PURE__*/(0, _react.css)("clip-path:none;animation-duration:0s!important;z-index:", Number(euiTheme.levels.flyout) - 1, ";;label:push;"),
@@ -98,7 +98,7 @@ var composeFlyoutSizing = function composeFlyoutSizing(euiThemeContext, size) {
       max: "".concat(euiTheme.breakpoint.l, "px")
     }
   };
-  return "\n    ".concat((0, _global_styling.logicalCSS)('max-width', flyoutSizes[size].max), "\n\n    ").concat((0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), " {\n      ").concat((0, _global_styling.logicalCSS)('min-width', flyoutSizes[size].min), "\n      ").concat((0, _global_styling.logicalCSS)('width', flyoutSizes[size].width), "\n    }\n    ").concat((0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), " {\n      ").concat((0, _global_styling.logicalCSS)('min-width', 0), "\n      ").concat((0, _global_styling.logicalCSS)('width', flyoutSizes[size].min), "\n    }\n  ");
+  return "\n    ".concat((0, _global_styling.logicalCSS)('max-width', flyoutSizes[size].max), "\n\n    ").concat((0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), " {\n      ").concat((0, _global_styling.logicalCSS)('min-width', 0), "\n      ").concat((0, _global_styling.logicalCSS)('width', flyoutSizes[size].min), "\n    }\n    ").concat((0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), " {\n      ").concat((0, _global_styling.logicalCSS)('min-width', flyoutSizes[size].min), "\n      ").concat((0, _global_styling.logicalCSS)('width', flyoutSizes[size].width), "\n    }\n  ");
 };
 
 var composeFlyoutPadding = function composeFlyoutPadding(euiThemeContext, paddingSize) {

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

@@ -34,8 +34,8 @@ var euiImageWrapperStyles = function euiImageWrapperStyles(euiThemeContext) {
     // 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__*/(0, _react.css)((0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{float:left;float:", _global_styling.logicalSide.left, ";", (0, _global_styling.logicalCSS)('margin-left', '0'), ";", (0, _global_styling.logicalCSS)('margin-top', '0'), ";};label:left;"),
-    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{float:right;float:", _global_styling.logicalSide.right, ";", (0, _global_styling.logicalCSS)('margin-right', '0'), ";", (0, _global_styling.logicalCSS)('margin-top', '0'), ";};label:right;"),
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{float:left;float:", _global_styling.logicalSide.left, ";", (0, _global_styling.logicalCSS)('margin-left', '0'), ";", (0, _global_styling.logicalCSS)('margin-top', '0'), ";};label:left;"),
+    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{float:right;float:", _global_styling.logicalSide.right, ";", (0, _global_styling.logicalCSS)('margin-right', '0'), ";", (0, _global_styling.logicalCSS)('margin-top', '0'), ";};label:right;"),
     // Sizes
     fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;")
   };

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

@@ -37,7 +37,7 @@ var euiPageStyles = function euiPageStyles(euiThemeContext) {
     grow: _ref2,
     // Direction
     column: _ref,
-    row: /*#__PURE__*/(0, _react.css)("flex-direction:column;", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{flex-direction:row;};label:row;"),
+    row: /*#__PURE__*/(0, _react.css)("flex-direction:column;", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{flex-direction:row;};label:row;"),
     // Max widths
     restrictWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), ";;label:restrictWidth;")
   };

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

@@ -17,17 +17,17 @@ var _templateObject;
 
 var euiGlobalToastListStyles = function euiGlobalToastListStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var euiToastWidth = euiTheme.base * 20;
+  var euiToastWidth = euiTheme.base * 25;
   return {
     /**
      * 1. Allow list to expand as items are added, but cap it at the screen height.
      * 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 + euiTheme.base * 5, "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.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&: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.logicalCSS)('padding-left', "".concat(euiTheme.base * 4, "px")), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), ";}};label:right;"),
-    left: /*#__PURE__*/(0, _react.css)("&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.logicalCSS)('padding-right', "".concat(euiTheme.base * 4, "px")), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";}};label:left;")
+    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;")
   };
 };
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiBreakpoint = exports.euiBreakpoint = void 0;
+exports.useEuiMinBreakpoint = exports.useEuiMaxBreakpoint = exports.useEuiBreakpoint = exports.euiMinBreakpoint = exports.euiMaxBreakpoint = exports.euiBreakpoint = void 0;
 
 var _sorting = require("../../services/breakpoint/_sorting");
 
@@ -18,7 +18,7 @@ var _hooks = require("../../services/theme/hooks");
  */
 
 /**
- * Generates a CSS media query rule string based on the input breakpoint ranges.
+ * Generates a CSS media query rule string based on the input breakpoint *ranges*.
  * Examples with default theme breakpoints:
  *
  * euiBreakpoint(['s']) becomes `@media only screen and (min-width: 575px) and (max-width: 767px)`
@@ -60,5 +60,62 @@ var useEuiBreakpoint = function useEuiBreakpoint(sizes) {
   var euiTheme = (0, _hooks.useEuiTheme)();
   return euiBreakpoint(euiTheme, sizes);
 };
+/**
+ * Min/Max width breakpoint utilities that generate only a single min/max query/bound
+ *
+ * *Unlike the above euiBreakpoint utility*, these utilities treat breakpoint
+ * sizes as a one-dimensional point, rather than a two-dimensional *screen range*.
+ * Examples with default theme breakpoints:
+ *
+ * euiMaxBreakpoint('m') becomes `@media only screen and (max-width: 767px)`
+ * euiMinBreakpoint('m') becomes `@media only screen and (min-width: 768px)`
+ *
+ * This is safer and more intentional to use than euiBreakpoint(['xs', 's']) / euiBreakpoint(['m', 'xl'])
+ * in the event that consumers add larger or smaller custom breakpoints (e.g 'xxs' or `xxl`)
+ * and if the intention of the media query is actually "m and below/above" vs. "only screens m/l/xl".
+ */
+
+
+exports.useEuiBreakpoint = useEuiBreakpoint;
+
+var euiMinBreakpoint = function euiMinBreakpoint(_ref2, size) {
+  var euiTheme = _ref2.euiTheme;
+  var minBreakpointSize = euiTheme.breakpoint[size];
+
+  if (minBreakpointSize) {
+    return "@media only screen and (min-width: ".concat(minBreakpointSize, "px)");
+  } else {
+    console.warn("Invalid min breakpoint size: ".concat(size));
+    return '@media only screen';
+  }
+};
+
+exports.euiMinBreakpoint = euiMinBreakpoint;
+
+var useEuiMinBreakpoint = function useEuiMinBreakpoint(size) {
+  var euiTheme = (0, _hooks.useEuiTheme)();
+  return euiMinBreakpoint(euiTheme, size);
+};
+
+exports.useEuiMinBreakpoint = useEuiMinBreakpoint;
+
+var euiMaxBreakpoint = function euiMaxBreakpoint(_ref3, size) {
+  var euiTheme = _ref3.euiTheme;
+  var maxBreakpointSize = euiTheme.breakpoint[size];
+
+  if (maxBreakpointSize) {
+    return "@media only screen and (max-width: ".concat(maxBreakpointSize - 1, "px)");
+  } else {
+    console.warn("Invalid max breakpoint size: ".concat(size));
+    return '@media only screen';
+  }
+};
+
+exports.euiMaxBreakpoint = euiMaxBreakpoint;
+
+var useEuiMaxBreakpoint = function useEuiMaxBreakpoint(size) {
+  var euiTheme = (0, _hooks.useEuiTheme)();
+  return euiMaxBreakpoint(euiTheme, size);
+};
 
-exports.useEuiBreakpoint = useEuiBreakpoint;
+exports.useEuiMaxBreakpoint = useEuiMaxBreakpoint;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "67.1.9",
+  "version": "67.1.10",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/test-env/components/description_list/description_list.styles.js

@@ -26,7 +26,7 @@ var euiDescriptionListStyles = function euiDescriptionListStyles(euiThemeContext
     inline: /*#__PURE__*/(0, _react.css)(";label:inline;"),
     column: /*#__PURE__*/(0, _react.css)(columnDisplay, ";;label:column;"),
     // Responsive columns behave as a row on breakpoints xs-s
-    responsiveColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{", columnDisplay, ";};label:responsiveColumn;"),
+    responsiveColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{", columnDisplay, ";};label:responsiveColumn;"),
     // Alignment
     center: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('center'), ";;label:center;"),
     left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), ";;label:left;")

package/test-env/components/description_list/description_list_description.js

@@ -47,6 +47,7 @@ var EuiDescriptionListDescription = function EuiDescriptionListDescription(_ref)
       align = _useContext.align,
       gutterSize = _useContext.gutterSize;
 
+  var showResponsiveColumns = (0, _services.useIsWithinMinBreakpoint)('m');
   var theme = (0, _services.useEuiTheme)();
   var styles = (0, _description_list_description.euiDescriptionListDescriptionStyles)(theme);
   var conditionalStyles = compressed && textStyle === 'reverse' ? [styles.fontStyles.compressed] : [styles.fontStyles[textStyle]];
@@ -62,7 +63,10 @@ var EuiDescriptionListDescription = function EuiDescriptionListDescription(_ref)
         conditionalStyles.push(styles.left);
       }
 
-      conditionalStyles.push(styles[gutterSize]);
+      if (type === 'column' || showResponsiveColumns) {
+        conditionalStyles.push(styles[gutterSize]);
+      }
+
       break;
   }
 

package/test-env/components/description_list/description_list_description.styles.js

@@ -30,7 +30,7 @@ var euiDescriptionListDescriptionStyles = function euiDescriptionListDescription
     // Types
     row: /*#__PURE__*/(0, _react.css)(";label:row;"),
     column: /*#__PURE__*/(0, _react.css)(columnDisplay, ";;label:column;"),
-    responsiveColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{", (0, _global_styling.logicalCSS)('width', '100%'), " padding:0;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{", columnDisplay, ";};label:responsiveColumn;"),
+    responsiveColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('width', '100%'), " padding:0;}", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{", columnDisplay, ";};label:responsiveColumn;"),
     inline: _ref,
     // This nested block handles just the font styling based on compressed and reverse
     fontStyles: {

package/test-env/components/description_list/description_list_title.styles.js

@@ -29,7 +29,7 @@ var euiDescriptionListTitleStyles = function euiDescriptionListTitleStyles(euiTh
     // Types
     row: /*#__PURE__*/(0, _react.css)(";label:row;"),
     column: /*#__PURE__*/(0, _react.css)(columnDisplay, ";;label:column;"),
-    responsiveColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{", (0, _global_styling.logicalCSS)('width', '100%'), " padding:0;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{", columnDisplay, ";};label:responsiveColumn;"),
+    responsiveColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('width', '100%'), " padding:0;}", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{", columnDisplay, ";};label:responsiveColumn;"),
     inline: /*#__PURE__*/(0, _react.css)("display:inline;border-radius:", euiTheme.border.radius.small, ";font-weight:", euiTheme.font.weight.medium, ";background-color:", colorMode === 'DARK' ? (0, _services.tint)(euiTheme.colors.lightestShade, 0.5) : euiTheme.colors.lightestShade, ";", (0, _global_styling.logicalCSS)('margin-vertical', '0'), " ", (0, _global_styling.logicalCSS)('margin-horizontal', euiTheme.size.xs), "&:first-of-type{", (0, _global_styling.logicalCSS)('margin-left', '0'), ";};label:inline;"),
     // This nested block handles just the font styling based on compressed and reverse
     fontStyles: {

package/test-env/components/flyout/flyout.styles.js

@@ -22,7 +22,7 @@ var _form = require("../form/form.styles");
 var _templateObject, _templateObject2;
 
 var euiFlyoutSlideInRight = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
-var euiFlyoutSlideInLeft = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n}\n"])));
+var euiFlyoutSlideInLeft = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
 
 var euiFlyoutCloseButtonStyles = function euiFlyoutCloseButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
@@ -33,8 +33,8 @@ var euiFlyoutCloseButtonStyles = function euiFlyoutCloseButtonStyles(euiThemeCon
     outsideSide: {
       // `transforms` pull in close buttons a little
       // `!important` is necessary here to override the hover/focus transitions of buttons
-      right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{transform:translateX(calc(-100% - ", euiTheme.size.l, "))!important;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{transform:translateX(calc(-100% - ", euiTheme.size.xs, "))!important;};label:right;"),
-      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{transform:translateX(calc(100% + ", euiTheme.size.l, "))!important;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{transform:translateX(calc(100% + ", euiTheme.size.xs, "))!important;};label:left;")
+      right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{transform:translateX(calc(-100% - ", euiTheme.size.xs, "))!important;}", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{transform:translateX(calc(-100% - ", euiTheme.size.l, "))!important;};label:right;"),
+      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{transform:translateX(calc(100% + ", euiTheme.size.xs, "))!important;}", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{transform:translateX(calc(100% + ", euiTheme.size.l, "))!important;};label:left;")
     }
   };
 };
@@ -44,7 +44,7 @@ exports.euiFlyoutCloseButtonStyles = euiFlyoutCloseButtonStyles;
 var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiFlyout: /*#__PURE__*/(0, _react.css)("position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('height', '100%'), " z-index:", euiTheme.levels.flyout, ";background:", euiTheme.colors.emptyShade, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{", (0, _global_styling.logicalCSS)('max-width', '90vw !important'), ";};label:euiFlyout;"),
+    euiFlyout: /*#__PURE__*/(0, _react.css)("position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('height', '100%'), " z-index:", euiTheme.levels.flyout, ";background:", euiTheme.colors.emptyShade, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('max-width', '90vw !important'), ";};label:euiFlyout;"),
     // Flyout sizes
     s: /*#__PURE__*/(0, _react.css)(composeFlyoutSizing(euiThemeContext, 's'), ";;label:s;"),
     m: /*#__PURE__*/(0, _react.css)(composeFlyoutSizing(euiThemeContext, 'm'), ";;label:m;"),
@@ -53,7 +53,7 @@ var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
     // Side
     right: /*#__PURE__*/(0, _react.css)("clip-path:polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);", (0, _global_styling.logicalCSS)('right', 0), " ", _global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideInRight, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:right;"),
     // Left-side flyouts should only be used for navigation
-    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", _global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, ";};label:left;"),
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", _global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:left;"),
     // Type
     overlay: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowXLarge)(euiThemeContext), ";;label:overlay;"),
     push: /*#__PURE__*/(0, _react.css)("clip-path:none;animation-duration:0s!important;z-index:", Number(euiTheme.levels.flyout) - 1, ";;label:push;"),
@@ -98,7 +98,7 @@ var composeFlyoutSizing = function composeFlyoutSizing(euiThemeContext, size) {
       max: "".concat(euiTheme.breakpoint.l, "px")
     }
   };
-  return "\n    ".concat((0, _global_styling.logicalCSS)('max-width', flyoutSizes[size].max), "\n\n    ").concat((0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), " {\n      ").concat((0, _global_styling.logicalCSS)('min-width', flyoutSizes[size].min), "\n      ").concat((0, _global_styling.logicalCSS)('width', flyoutSizes[size].width), "\n    }\n    ").concat((0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), " {\n      ").concat((0, _global_styling.logicalCSS)('min-width', 0), "\n      ").concat((0, _global_styling.logicalCSS)('width', flyoutSizes[size].min), "\n    }\n  ");
+  return "\n    ".concat((0, _global_styling.logicalCSS)('max-width', flyoutSizes[size].max), "\n\n    ").concat((0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), " {\n      ").concat((0, _global_styling.logicalCSS)('min-width', 0), "\n      ").concat((0, _global_styling.logicalCSS)('width', flyoutSizes[size].min), "\n    }\n    ").concat((0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), " {\n      ").concat((0, _global_styling.logicalCSS)('min-width', flyoutSizes[size].min), "\n      ").concat((0, _global_styling.logicalCSS)('width', flyoutSizes[size].width), "\n    }\n  ");
 };
 
 var composeFlyoutPadding = function composeFlyoutPadding(euiThemeContext, paddingSize) {