@elastic/eui 67.1.8 → 67.1.10

package/es/components/button/button.js

@@ -212,6 +212,7 @@ export var EuiButtonDisplayDeprecated = /*#__PURE__*/forwardRef(function (_ref,
 
   if (minWidth !== undefined || minWidth !== null) {
     calculatedStyle = _objectSpread(_objectSpread({}, calculatedStyle), {}, {
+      // @ts-ignore - deprecated component
       minWidth: minWidth
     });
   }

package/es/components/button/button_display/_button_display.js

@@ -74,7 +74,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var theme = useEuiTheme();
   var styles = euiButtonDisplayStyles(theme);
   var buttonRadiusStyle = useEuiButtonRadiusCSS()[size];
-  var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
+  var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && styles.defaultMinWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
 
   var innerNode = ___EmotionJSX(EuiButtonDisplayContent, _extends({
     isLoading: isLoading,
@@ -111,7 +111,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
 
   return createElement(element, _objectSpread(_objectSpread(_objectSpread({
     css: cssStyles,
-    style: minWidth != null ? _objectSpread(_objectSpread({}, style), {}, {
+    style: minWidth ? _objectSpread(_objectSpread({}, style), {}, {
       minInlineSize: minWidth
     }) : style,
     ref: ref
@@ -150,7 +150,7 @@ EuiButtonDisplay.propTypes = {
   /**
      * Override the default minimum width
      */
-  minWidth: PropTypes.any,
+  minWidth: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([false])]),
 
   /**
      * Force disables the button and changes the icon to a loading spinner

package/es/components/button/button_display/_button_display.styles.js

@@ -32,10 +32,11 @@ export var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeCont
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiButtonDisplay: /*#__PURE__*/css(euiButtonBaseCSS(), ";", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), " font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
+    euiButtonDisplay: /*#__PURE__*/css(euiButtonBaseCSS(), ";font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
     // States
     isDisabled: _ref,
     fullWidth: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), ";;label:fullWidth;"),
+    defaultMinWidth: /*#__PURE__*/css(logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), ";;label:defaultMinWidth;"),
     // Sizes
     xs: /*#__PURE__*/css(_buttonSize(euiTheme.size.l), euiFontSize(euiThemeContext, 'xs'), ";label:xs;"),
     s: /*#__PURE__*/css(_buttonSize(euiTheme.size.xl), euiFontSize(euiThemeContext, 's'), ";label:s;"),

package/es/components/date_picker/super_date_picker/super_update_button.js

@@ -181,7 +181,7 @@ export var EuiSuperUpdateButton = /*#__PURE__*/function (_Component) {
         sizes: responsive || 'none'
       }, ___EmotionJSX(EuiButton, _extends({
         className: classes,
-        minWidth: 0
+        minWidth: false
       }, sharedButtonProps, {
         fill: fill,
         textProps: _objectSpread(_objectSpread({}, restTextProps), {}, {

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

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { logicalTextAlignCSS, euiBreakpoint } from '../../global_styling';
+import { logicalTextAlignCSS, euiMinBreakpoint } from '../../global_styling';
 export var euiDescriptionListStyles = function euiDescriptionListStyles(euiThemeContext) {
   // Flex display for column and responsive column
   var columnDisplay = "\n    display: flex;\n    align-items: baseline;\n    flex-wrap: wrap;  \n  ";
@@ -17,7 +17,7 @@ export var euiDescriptionListStyles = function euiDescriptionListStyles(euiTheme
     inline: /*#__PURE__*/css(";label:inline;"),
     column: /*#__PURE__*/css(columnDisplay, ";;label:column;"),
     // Responsive columns behave as a row on breakpoints xs-s
-    responsiveColumn: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['m', 'xl']), "{", columnDisplay, ";};label:responsiveColumn;"),
+    responsiveColumn: /*#__PURE__*/css(euiMinBreakpoint(euiThemeContext, 'm'), "{", columnDisplay, ";};label:responsiveColumn;"),
     // Alignment
     center: /*#__PURE__*/css(logicalTextAlignCSS('center'), ";;label:center;"),
     left: /*#__PURE__*/css(logicalTextAlignCSS('left'), ";;label:left;")

package/es/components/description_list/description_list_description.js

@@ -28,7 +28,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { useContext } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiTheme, useIsWithinMinBreakpoint } from '../../services';
 import { euiDescriptionListDescriptionStyles } from './description_list_description.styles';
 import { EuiDescriptionListContext } from './description_list_context'; // Export required for correct inference by HOCs
 
@@ -45,6 +45,7 @@ export var EuiDescriptionListDescription = function EuiDescriptionListDescriptio
       align = _useContext.align,
       gutterSize = _useContext.gutterSize;
 
+  var showResponsiveColumns = useIsWithinMinBreakpoint('m');
   var theme = useEuiTheme();
   var styles = euiDescriptionListDescriptionStyles(theme);
   var conditionalStyles = compressed && textStyle === 'reverse' ? [styles.fontStyles.compressed] : [styles.fontStyles[textStyle]];
@@ -60,7 +61,10 @@ export var EuiDescriptionListDescription = function EuiDescriptionListDescriptio
         conditionalStyles.push(styles.left);
       }
 
-      conditionalStyles.push(styles[gutterSize]);
+      if (type === 'column' || showResponsiveColumns) {
+        conditionalStyles.push(styles[gutterSize]);
+      }
+
       break;
   }
 

package/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/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/es/components/facet/facet_button.js

@@ -105,7 +105,7 @@ EuiFacetButton.propTypes = {
   /**
      * ReactNode to render as this component's content
      */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.oneOfType([PropTypes.node.isRequired, PropTypes.node]),
 
   /**
      * Any node, but preferably a `EuiIcon` or `EuiAvatar`
@@ -113,11 +113,20 @@ EuiFacetButton.propTypes = {
   icon: PropTypes.node,
   isDisabled: PropTypes.bool,
 
+  /**
+     * Force disables the button and changes the icon to a loading spinner
+     */
+
   /**
      * Adds/swaps for loading spinner & disables
      */
   isLoading: PropTypes.bool,
 
+  /**
+     * Applies the boolean state as the `aria-pressed` property to create a toggle button.
+     * *Only use when the readable text does not change between states.*
+     */
+
   /**
      * Changes visual of button to indicate it's currently selected
      */
@@ -127,6 +136,51 @@ EuiFacetButton.propTypes = {
      * Adds a notification indicator for displaying the quantity provided
      */
   quantity: PropTypes.number,
+  size: PropTypes.any,
+
+  /**
+     * Extends the button to 100% width
+     */
+  fullWidth: PropTypes.bool,
+
+  /**
+     * Override the default minimum width
+     */
+  minWidth: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([false])]),
+
+  /**
+     * Object of props passed to the <span/> wrapping the button's content
+     */
+  contentProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
+  }),
+  style: PropTypes.any,
+
+  /**
+     * Any `type` accepted by EuiIcon
+     */
+  iconType: PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alert", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "asterisk", "auditbeatApp", "beaker", "bell", "bellSlash", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInACircleFilled", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "document", "documentEdit", "documentation", "documents", "dot", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "inputOutput", "inspect", "invert", "ip", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spacesApp", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelionApp", "timeRefresh", "timeslider", "training", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDenseVector", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]),
+
+  /**
+     * Can only be one side `left` or `right`
+     */
+  iconSide: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([undefined])]),
+
+  /**
+     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+     */
+  textProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
+    ref: PropTypes.any,
+    "data-text": PropTypes.string
+  }),
+  iconSize: PropTypes.any,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,

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

@@ -10,12 +10,12 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
  * 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/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/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/es/components/toast/global_toast_list.styles.js

@@ -10,20 +10,20 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
  * 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/es/global_styling/mixins/_helpers.js

@@ -55,7 +55,7 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
 
   var direction = _direction || 'y';
   var side = _side || 'both';
-  var hideHeight = "calc(".concat(size.base, " * 0.75 * 1.25)");
+  var hideHeight = size.s;
   var gradientStart = "\n  ".concat(transparentize('red', 0.1), " 0%,\n  ").concat(transparentize('red', 1), " ").concat(hideHeight, "\n  ");
   var gradientEnd = "\n  ".concat(transparentize('red', 1), " calc(100% - ").concat(hideHeight, "),\n  ").concat(transparentize('red', 0.1), " 100%\n  ");
   var gradient = '';

package/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/eui.d.ts

@@ -1891,6 +1891,7 @@ declare module '@elastic/eui/src/components/button/button_display/_button_displa
 	    euiButtonDisplay: import("@emotion/utils").SerializedStyles;
 	    isDisabled: import("@emotion/utils").SerializedStyles;
 	    fullWidth: import("@emotion/utils").SerializedStyles;
+	    defaultMinWidth: import("@emotion/utils").SerializedStyles;
 	    xs: import("@emotion/utils").SerializedStyles;
 	    s: import("@emotion/utils").SerializedStyles;
 	    m: import("@emotion/utils").SerializedStyles;
@@ -2042,7 +2043,7 @@ declare module '@elastic/eui/src/components/button/button_display/_button_displa
 	    /**
 	     * Override the default minimum width
 	     */
-	    minWidth?: CSSProperties['minWidth'];
+	    minWidth?: CSSProperties['minWidth'] | false;
 	    /**
 	     * Force disables the button and changes the icon to a loading spinner
 	     */
@@ -7289,7 +7290,7 @@ declare module '@elastic/eui/src/global_styling/mixins/_responsive' {
 	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
 	import { _EuiThemeBreakpoint } from '@elastic/eui/src/global_styling/variables';
 	/**
-	 * 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)`
@@ -7303,6 +7304,24 @@ declare module '@elastic/eui/src/global_styling/mixins/_responsive' {
 	 */
 	export const euiBreakpoint: ({ euiTheme }: UseEuiTheme, sizes: [_EuiThemeBreakpoint, ..._EuiThemeBreakpoint[]]) => string;
 	export const useEuiBreakpoint: (sizes: [_EuiThemeBreakpoint, ..._EuiThemeBreakpoint[]]) => string;
+	/**
+	 * 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 const euiMinBreakpoint: ({ euiTheme }: UseEuiTheme, size: _EuiThemeBreakpoint) => string;
+	export const useEuiMinBreakpoint: (size: _EuiThemeBreakpoint) => string;
+	export const euiMaxBreakpoint: ({ euiTheme }: UseEuiTheme, size: _EuiThemeBreakpoint) => string;
+	export const useEuiMaxBreakpoint: (size: _EuiThemeBreakpoint) => string;
 
 }
 declare module '@elastic/eui/src/global_styling/mixins' {
@@ -13786,8 +13805,8 @@ declare module '@elastic/eui/src/components/facet/facet_button.styles' {
 }
 declare module '@elastic/eui/src/components/facet/facet_button' {
 	import { FunctionComponent, HTMLAttributes, ReactNode, RefCallback } from 'react';
-	import { CommonProps } from '@elastic/eui/src/components/common';
-	export interface EuiFacetButtonProps extends CommonProps, HTMLAttributes<HTMLButtonElement> {
+	import { EuiButtonDisplayCommonProps } from '@elastic/eui/src/components/button/button_display/_button_display';
+	export interface EuiFacetButtonProps extends EuiButtonDisplayCommonProps, HTMLAttributes<HTMLButtonElement> {
 	    buttonRef?: RefCallback<HTMLButtonElement>;
 	    /**
 	     * ReactNode to render as this component's content

package/lib/components/button/button.js

@@ -231,6 +231,7 @@ var EuiButtonDisplayDeprecated = /*#__PURE__*/(0, _react.forwardRef)(function (_
 
   if (minWidth !== undefined || minWidth !== null) {
     calculatedStyle = _objectSpread(_objectSpread({}, calculatedStyle), {}, {
+      // @ts-ignore - deprecated component
       minWidth: minWidth
     });
   }

package/lib/components/button/button_display/_button_display.js

@@ -91,7 +91,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
   var theme = (0, _services.useEuiTheme)();
   var styles = (0, _button_display.euiButtonDisplayStyles)(theme);
   var buttonRadiusStyle = (0, _mixins.useEuiButtonRadiusCSS)()[size];
-  var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
+  var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && styles.defaultMinWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
   var innerNode = (0, _react2.jsx)(_button_display_content.EuiButtonDisplayContent, _extends({
     isLoading: isLoading,
     isDisabled: buttonIsDisabled,
@@ -126,7 +126,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
 
   return (0, _react2.createElement)(element, _objectSpread(_objectSpread(_objectSpread({
     css: cssStyles,
-    style: minWidth != null ? _objectSpread(_objectSpread({}, style), {}, {
+    style: minWidth ? _objectSpread(_objectSpread({}, style), {}, {
       minInlineSize: minWidth
     }) : style,
     ref: ref
@@ -166,7 +166,7 @@ EuiButtonDisplay.propTypes = {
   /**
      * Override the default minimum width
      */
-  minWidth: _propTypes.default.any,
+  minWidth: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([false])]),
 
   /**
      * Force disables the button and changes the icon to a loading spinner

package/lib/components/button/button_display/_button_display.styles.js

@@ -36,10 +36,11 @@ var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiButtonDisplay: /*#__PURE__*/(0, _react.css)(euiButtonBaseCSS(), ";", (0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), " font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
+    euiButtonDisplay: /*#__PURE__*/(0, _react.css)(euiButtonBaseCSS(), ";font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
     // States
     isDisabled: _ref,
     fullWidth: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;"),
+    defaultMinWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), ";;label:defaultMinWidth;"),
     // Sizes
     xs: /*#__PURE__*/(0, _react.css)(_buttonSize(euiTheme.size.l), (0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";label:xs;"),
     s: /*#__PURE__*/(0, _react.css)(_buttonSize(euiTheme.size.xl), (0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";label:s;"),

package/lib/components/date_picker/super_date_picker/super_update_button.js

@@ -194,7 +194,7 @@ var EuiSuperUpdateButton = /*#__PURE__*/function (_Component) {
         sizes: responsive || 'none'
       }, (0, _react2.jsx)(_button.EuiButton, _extends({
         className: classes,
-        minWidth: 0
+        minWidth: false
       }, sharedButtonProps, {
         fill: fill,
         textProps: _objectSpread(_objectSpread({}, restTextProps), {}, {

package/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/lib/components/description_list/description_list_description.js

@@ -59,6 +59,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]];
@@ -74,7 +75,10 @@ var EuiDescriptionListDescription = function EuiDescriptionListDescription(_ref)
         conditionalStyles.push(styles.left);
       }
 
-      conditionalStyles.push(styles[gutterSize]);
+      if (type === 'column' || showResponsiveColumns) {
+        conditionalStyles.push(styles[gutterSize]);
+      }
+
       break;
   }
 

package/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: {