@elastic/eui 59.1.0 → 60.1.0

package/README.md

@@ -22,6 +22,13 @@ To install and use the correct node version with `nvm`:
 nvm install
 ```
 
+> **Notes:** if you are running on an **M1 Apple device**, you might want to the following
+> - downgrade to node v14 (`lts/fermium` aka `v14.19.3` works)
+> - make sure that you're running your terminal in Rosetta mode
+    >  - select the `Terminal` application in the Finder (Applications -> Utilities)
+>  - right-click and select `Get Info` then check the `Open using Rosetta` check-box
+>  - close the window and restart your Terminal
+
 ### Documentation
 
 You can run the documentation locally at [http://localhost:8030/](http://localhost:8030/) by running the following.

package/dist/eui_theme_dark.css

@@ -1054,19 +1054,6 @@ SOFTWARE.
   .react-datepicker__time-box {
     margin-top: 0; } }
 
-.euiScreenReaderOnly,
-.euiScreenReaderOnly--showOnFocus:not(:focus):not(:active) {
-  position: absolute;
-  top: auto;
-  left: -10000px;
-  width: 1px;
-  height: 1px;
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
-  overflow: hidden;
-  margin: -1px; }
-
 .euiAccordionForm__extraAction {
   opacity: 0;
   transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); }
@@ -9561,108 +9548,6 @@ SOFTWARE.
     height: 16px;
     top: 9%; } }
 
-.euiIcon {
-  -webkit-flex-shrink: 0;
-          flex-shrink: 0;
-  display: inline-block;
-  vertical-align: middle;
-  fill: currentColor;
-  -webkit-transform: translate(0, 0);
-          transform: translate(0, 0); }
-  .euiIcon:focus {
-    opacity: 1;
-    background: rgba(54, 162, 239, 0.2); }
-
-.euiIcon--app {
-  fill: #DFE5EF; }
-  .euiIcon--app .euiIcon__fillSecondary {
-    fill: #7DDED8; }
-
-.euiIcon-isLoading {
-  opacity: 0.05;
-  background-color: currentColor;
-  border-radius: 6px; }
-
-.euiIcon-isLoaded {
-  -webkit-animation: euiIconLoading 250ms ease-in 0s 1 forwards;
-          animation: euiIconLoading 250ms ease-in 0s 1 forwards; }
-
-.euiIcon--accent {
-  color: #F68FBE; }
-
-.euiIcon--danger {
-  color: #F86B63; }
-
-.euiIcon--ghost {
-  color: #FFF; }
-
-.euiIcon--primary {
-  color: #36A2EF; }
-
-.euiIcon--success {
-  color: #7DDED8; }
-
-.euiIcon--subdued {
-  color: #7a7f89; }
-
-.euiIcon--text {
-  color: #DFE5EF; }
-
-.euiIcon--warning {
-  color: #F3D371; }
-
-.euiIcon--inherit {
-  color: inherit; }
-
-.euiIcon--ghost:not([data-type='logoElastic']) *[fill],
-.euiIcon--ghost:not([data-type='logoElastic']) .euiIcon__fillNegative,
-.euiIcon--text:not([data-type='logoElastic']) *[fill],
-.euiIcon--text:not([data-type='logoElastic']) .euiIcon__fillNegative {
-  fill: currentColor !important; }
-
-.euiIcon--ghost[data-type='logoElastic'] *[fill],
-.euiIcon--text[data-type='logoElastic'] *[fill] {
-  fill: none !important; }
-
-.euiIcon--ghost[data-type='logoElastic'] .outline,
-.euiIcon--text[data-type='logoElastic'] .outline {
-  fill: currentColor !important; }
-
-.euiIcon__fillNegative {
-  fill: #D4DAE5; }
-
-.euiIcon--small {
-  width: 12px;
-  height: 12px; }
-
-.euiIcon--medium {
-  width: 16px;
-  height: 16px; }
-
-.euiIcon--large {
-  width: 24px;
-  height: 24px; }
-
-.euiIcon--xLarge {
-  width: 32px;
-  height: 32px; }
-
-.euiIcon--xxLarge {
-  width: 40px;
-  height: 40px; }
-
-@-webkit-keyframes euiIconLoading {
-  0% {
-    opacity: 0.05; }
-  100% {
-    opacity: 1; } }
-
-@keyframes euiIconLoading {
-  0% {
-    opacity: 0.05; }
-  100% {
-    opacity: 1; } }
-
 /**
  * 1. Fix for IE where the image correctly resizes in width but doesn't collapse its height
       (https://github.com/philipwalton/flexbugs/issues/75#issuecomment-134702421)
@@ -11628,333 +11513,6 @@ SOFTWARE.
   position: relative;
   /* 1 */ }
 
-.euiProgress {
-  position: relative;
-  overflow: hidden;
-  background-color: #343741; }
-
-.euiProgress--xs {
-  height: 2px; }
-
-.euiProgress--s {
-  height: 4px; }
-
-.euiProgress--m {
-  height: 8px; }
-
-.euiProgress--l {
-  height: 16px; }
-
-.euiProgress--native {
-  display: block;
-  width: 100%;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border: none; }
-  .euiProgress--native::-webkit-progress-bar {
-    background-color: #343741; }
-  .euiProgress--native::-webkit-progress-value {
-    -webkit-transition: width 250ms linear;
-    transition: width 250ms linear; }
-  .euiProgress--native::-moz-progress-bar {
-    -moz-transition: width 250ms linear;
-    transition: width 250ms linear; }
-
-/**
- * An indeterminate bar has an unreliable end time. Because of a Firefox animation issue,
- * we apply this style to a <div> instead of a <progress> element.
- * See https://css-tricks.com/html5-progress-element/ for more info.
- */
-.euiProgress--indeterminate:before {
-  position: absolute;
-  content: '';
-  width: 100%;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  -webkit-transform: scaleX(0) translateX(0%);
-          transform: scaleX(0) translateX(0%);
-  -webkit-animation: euiProgress 1s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite;
-          animation: euiProgress 1s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; }
-
-.euiProgress--fixed {
-  position: fixed;
-  z-index: 1001; }
-
-.euiProgress--absolute {
-  position: absolute; }
-
-.euiProgress--fixed,
-.euiProgress--absolute {
-  top: 0;
-  left: 0;
-  right: 0;
-  background-color: transparent; }
-  .euiProgress--fixed.euiProgress--native::-webkit-progress-bar,
-  .euiProgress--absolute.euiProgress--native::-webkit-progress-bar {
-    background-color: transparent; }
-  .euiProgress--fixed.euiProgress--native::-moz-progress-bar,
-  .euiProgress--absolute.euiProgress--native::-moz-progress-bar {
-    background-color: transparent; }
-
-.euiProgress--primary.euiProgress--native::-webkit-progress-value {
-  background-color: #36A2EF; }
-
-.euiProgress--primary.euiProgress--native::-moz-progress-bar {
-  background-color: #36A2EF; }
-
-.euiProgress--primary.euiProgress--indeterminate:before {
-  background-color: #36A2EF; }
-
-.euiProgress__data--primary .euiProgress__valueText {
-  color: #36A2EF; }
-
-.euiProgress--success.euiProgress--native::-webkit-progress-value {
-  background-color: #7DDED8; }
-
-.euiProgress--success.euiProgress--native::-moz-progress-bar {
-  background-color: #7DDED8; }
-
-.euiProgress--success.euiProgress--indeterminate:before {
-  background-color: #7DDED8; }
-
-.euiProgress__data--success .euiProgress__valueText {
-  color: #7DDED8; }
-
-.euiProgress--warning.euiProgress--native::-webkit-progress-value {
-  background-color: #F3D371; }
-
-.euiProgress--warning.euiProgress--native::-moz-progress-bar {
-  background-color: #F3D371; }
-
-.euiProgress--warning.euiProgress--indeterminate:before {
-  background-color: #F3D371; }
-
-.euiProgress__data--warning .euiProgress__valueText {
-  color: #F3D371; }
-
-.euiProgress--danger.euiProgress--native::-webkit-progress-value {
-  background-color: #F86B63; }
-
-.euiProgress--danger.euiProgress--native::-moz-progress-bar {
-  background-color: #F86B63; }
-
-.euiProgress--danger.euiProgress--indeterminate:before {
-  background-color: #F86B63; }
-
-.euiProgress__data--danger .euiProgress__valueText {
-  color: #F86B63; }
-
-.euiProgress--accent.euiProgress--native::-webkit-progress-value {
-  background-color: #F68FBE; }
-
-.euiProgress--accent.euiProgress--native::-moz-progress-bar {
-  background-color: #F68FBE; }
-
-.euiProgress--accent.euiProgress--indeterminate:before {
-  background-color: #F68FBE; }
-
-.euiProgress__data--accent .euiProgress__valueText {
-  color: #F68FBE; }
-
-.euiProgress--subdued.euiProgress--native::-webkit-progress-value {
-  background-color: #7a7f89; }
-
-.euiProgress--subdued.euiProgress--native::-moz-progress-bar {
-  background-color: #7a7f89; }
-
-.euiProgress--subdued.euiProgress--indeterminate:before {
-  background-color: #7a7f89; }
-
-.euiProgress__data--subdued .euiProgress__valueText {
-  color: #7a7f89; }
-
-.euiProgress--vis0.euiProgress--native::-webkit-progress-value {
-  background-color: #54B399; }
-
-.euiProgress--vis0.euiProgress--native::-moz-progress-bar {
-  background-color: #54B399; }
-
-.euiProgress--vis0.euiProgress--indeterminate:before {
-  background-color: #54B399; }
-
-.euiProgress__data--vis0 .euiProgress__valueText {
-  color: #54B399; }
-
-.euiProgress--vis1.euiProgress--native::-webkit-progress-value {
-  background-color: #6092C0; }
-
-.euiProgress--vis1.euiProgress--native::-moz-progress-bar {
-  background-color: #6092C0; }
-
-.euiProgress--vis1.euiProgress--indeterminate:before {
-  background-color: #6092C0; }
-
-.euiProgress__data--vis1 .euiProgress__valueText {
-  color: #6092C0; }
-
-.euiProgress--vis2.euiProgress--native::-webkit-progress-value {
-  background-color: #D36086; }
-
-.euiProgress--vis2.euiProgress--native::-moz-progress-bar {
-  background-color: #D36086; }
-
-.euiProgress--vis2.euiProgress--indeterminate:before {
-  background-color: #D36086; }
-
-.euiProgress__data--vis2 .euiProgress__valueText {
-  color: #D36086; }
-
-.euiProgress--vis3.euiProgress--native::-webkit-progress-value {
-  background-color: #9170B8; }
-
-.euiProgress--vis3.euiProgress--native::-moz-progress-bar {
-  background-color: #9170B8; }
-
-.euiProgress--vis3.euiProgress--indeterminate:before {
-  background-color: #9170B8; }
-
-.euiProgress__data--vis3 .euiProgress__valueText {
-  color: #9170B8; }
-
-.euiProgress--vis4.euiProgress--native::-webkit-progress-value {
-  background-color: #CA8EAE; }
-
-.euiProgress--vis4.euiProgress--native::-moz-progress-bar {
-  background-color: #CA8EAE; }
-
-.euiProgress--vis4.euiProgress--indeterminate:before {
-  background-color: #CA8EAE; }
-
-.euiProgress__data--vis4 .euiProgress__valueText {
-  color: #CA8EAE; }
-
-.euiProgress--vis5.euiProgress--native::-webkit-progress-value {
-  background-color: #D6BF57; }
-
-.euiProgress--vis5.euiProgress--native::-moz-progress-bar {
-  background-color: #D6BF57; }
-
-.euiProgress--vis5.euiProgress--indeterminate:before {
-  background-color: #D6BF57; }
-
-.euiProgress__data--vis5 .euiProgress__valueText {
-  color: #D6BF57; }
-
-.euiProgress--vis6.euiProgress--native::-webkit-progress-value {
-  background-color: #B9A888; }
-
-.euiProgress--vis6.euiProgress--native::-moz-progress-bar {
-  background-color: #B9A888; }
-
-.euiProgress--vis6.euiProgress--indeterminate:before {
-  background-color: #B9A888; }
-
-.euiProgress__data--vis6 .euiProgress__valueText {
-  color: #B9A888; }
-
-.euiProgress--vis7.euiProgress--native::-webkit-progress-value {
-  background-color: #DA8B45; }
-
-.euiProgress--vis7.euiProgress--native::-moz-progress-bar {
-  background-color: #DA8B45; }
-
-.euiProgress--vis7.euiProgress--indeterminate:before {
-  background-color: #DA8B45; }
-
-.euiProgress__data--vis7 .euiProgress__valueText {
-  color: #DA8B45; }
-
-.euiProgress--vis8.euiProgress--native::-webkit-progress-value {
-  background-color: #AA6556; }
-
-.euiProgress--vis8.euiProgress--native::-moz-progress-bar {
-  background-color: #AA6556; }
-
-.euiProgress--vis8.euiProgress--indeterminate:before {
-  background-color: #AA6556; }
-
-.euiProgress__data--vis8 .euiProgress__valueText {
-  color: #b27466; }
-
-.euiProgress--vis9.euiProgress--native::-webkit-progress-value {
-  background-color: #E7664C; }
-
-.euiProgress--vis9.euiProgress--native::-moz-progress-bar {
-  background-color: #E7664C; }
-
-.euiProgress--vis9.euiProgress--indeterminate:before {
-  background-color: #E7664C; }
-
-.euiProgress__data--vis9 .euiProgress__valueText {
-  color: #E7664C; }
-
-.euiProgress--customColor.euiProgress--native::-webkit-progress-value {
-  background-color: currentColor; }
-
-.euiProgress--customColor.euiProgress--native::-moz-progress-bar {
-  background-color: currentColor; }
-
-.euiProgress--customColor.euiProgress--indeterminate:before {
-  background-color: currentColor; }
-
-@-webkit-keyframes euiProgress {
-  0% {
-    -webkit-transform: scaleX(1) translateX(-100%);
-            transform: scaleX(1) translateX(-100%); }
-  100% {
-    -webkit-transform: scaleX(1) translateX(100%);
-            transform: scaleX(1) translateX(100%); } }
-
-@keyframes euiProgress {
-  0% {
-    -webkit-transform: scaleX(1) translateX(-100%);
-            transform: scaleX(1) translateX(-100%); }
-  100% {
-    -webkit-transform: scaleX(1) translateX(100%);
-            transform: scaleX(1) translateX(100%); } }
-
-.euiProgress__data {
-  display: -webkit-flex;
-  display: flex;
-  -webkit-justify-content: space-between;
-          justify-content: space-between; }
-
-.euiProgress__label,
-.euiProgress__valueText {
-  color: #DFE5EF;
-  font-weight: 400;
-  font-size: 12px;
-  font-size: 0.85714rem;
-  line-height: 1.14286rem;
-  max-width: 100%;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  white-space: nowrap !important;
-  word-wrap: normal !important; }
-
-.euiProgress__label {
-  -webkit-flex-grow: 1;
-          flex-grow: 1; }
-  .euiProgress__label + .euiProgress__valueText {
-    padding-left: 4px;
-    -webkit-flex-grow: 1;
-            flex-grow: 1;
-    text-align: right;
-    -webkit-flex-shrink: 0;
-            flex-shrink: 0; }
-
-.euiProgress__valueText {
-  font-feature-settings: 'tnum' 1;
-  margin-left: auto; }
-
-.euiProgress__data--l .euiProgress__label,
-.euiProgress__data--l .euiProgress__valueText {
-  font-size: 14px;
-  font-size: 1rem;
-  line-height: 1.71429rem; }
-
 .euiTreeView__wrapper .euiTreeView {
   margin: 0;
   list-style-type: none; }
@@ -12773,54 +12331,6 @@ SOFTWARE.
   color: #D6BF57;
   font-weight: 500; }
 
-.euiStat .euiStat__title {
-  color: #FFF; }
-  .euiStat .euiStat__title--subdued {
-    color: #7a7f89; }
-  .euiStat .euiStat__title--primary {
-    color: #36A2EF; }
-  .euiStat .euiStat__title--success {
-    color: #7DDED8; }
-  .euiStat .euiStat__title--danger {
-    color: #F86B63; }
-  .euiStat .euiStat__title--accent {
-    color: #F68FBE; }
-
-.euiStat .euiStat__title-isLoading {
-  -webkit-animation: euiStatPulse 1.5s infinite ease-in-out;
-          animation: euiStatPulse 1.5s infinite ease-in-out; }
-
-.euiStat.euiStat--leftAligned {
-  text-align: left;
-  -webkit-align-items: flex-start;
-          align-items: flex-start; }
-
-.euiStat.euiStat--centerAligned {
-  text-align: center;
-  -webkit-align-items: center;
-          align-items: center; }
-
-.euiStat.euiStat--rightAligned {
-  text-align: right;
-  -webkit-align-items: flex-end;
-          align-items: flex-end; }
-
-@-webkit-keyframes euiStatPulse {
-  0% {
-    opacity: 1; }
-  50% {
-    opacity: .25; }
-  100% {
-    opacity: 1; } }
-
-@keyframes euiStatPulse {
-  0% {
-    opacity: 1; }
-  50% {
-    opacity: .25; }
-  100% {
-    opacity: 1; } }
-
 .euiStepNumber {
   width: 32px;
   height: 32px;
@@ -15588,9 +15098,6 @@ button.euiSuggestItem {
 .euiPopover__panel.euiPanel--paddingLarge .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) {
   padding: 24px; }
 
-.euiProgress--native {
-  border-radius: 8px; }
-
 .euiRangeTooltip__value {
   border-radius: 4px; }
 

package/dist/eui_theme_dark.json

@@ -160,25 +160,6 @@
     "gutterM": "12px",
     "gutterL": "24px"
   },
-  "euiIconLoadingOpacity": 0.05,
-  "euiIconColors": {
-    "accent": "#f68fbe",
-    "danger": "#f86b63",
-    "ghost": "#ffffff",
-    "primary": "#36a2ef",
-    "success": "#7dded8",
-    "subdued": "#7a7f89",
-    "text": "#dfe5ef",
-    "warning": "#f3d371",
-    "inherit": "inherit"
-  },
-  "euiIconSizes": {
-    "small": "12px",
-    "medium": "16px",
-    "large": "24px",
-    "xLarge": "32px",
-    "xxLarge": "40px"
-  },
   "euiKeyPadMenuSize": "96px",
   "euiKeyPadMenuMarginSize": "4px",
   "euiListGroupItemHoverBackground": "rgba(52, 55, 65, 0.25)",
@@ -202,31 +183,6 @@
   "euiMarkdownEditorMinHeight": "150px",
   "euiPopoverArrowSize": "12px",
   "euiPopoverTranslateDistance": "8px",
-  "euiProgressSizes": {
-    "xs": "2px",
-    "s": "4px",
-    "m": "8px",
-    "l": "16px"
-  },
-  "euiProgressColors": {
-    "primary": "#36a2ef",
-    "success": "#7dded8",
-    "warning": "#f3d371",
-    "danger": "#f86b63",
-    "accent": "#f68fbe",
-    "subdued": "#7a7f89",
-    "vis0": "#54b399",
-    "vis1": "#6092c0",
-    "vis2": "#d36086",
-    "vis3": "#9170b8",
-    "vis4": "#ca8eae",
-    "vis5": "#d6bf57",
-    "vis6": "#b9a888",
-    "vis7": "#da8b45",
-    "vis8": "#aa6556",
-    "vis9": "#e7664c",
-    "customColor": "currentColor"
-  },
   "euiResizableButtonTransitionSpeed": "150ms",
   "euiResizableButtonSize": "16px",
   "euiSelectableListItemBorder": "1px solid #202128",
@@ -504,6 +460,13 @@
   "euiFormInputGroupLabelBackground": "#2c2f37",
   "euiFormInputGroupBorder": "none",
   "euiSwitchOffColor": "rgba(83, 89, 102, 0.7)",
+  "euiFormControlIconSizes": {
+    "small": "12px",
+    "medium": "16px",
+    "large": "24px",
+    "xLarge": "32px",
+    "xxLarge": "40px"
+  },
   "euiFormControlLayoutGroupInputHeight": "38px",
   "euiFormControlLayoutGroupInputCompressedHeight": "30px",
   "euiFormControlLayoutGroupInputCompressedBorderRadius": "1px",

package/dist/eui_theme_dark.json.d.ts

@@ -161,25 +161,6 @@ declare module '@elastic/eui/dist/eui_theme_dark.json' {
       gutterM: string;
       gutterL: string;
     };
-    euiIconLoadingOpacity: number;
-    euiIconColors: {
-      accent: string;
-      danger: string;
-      ghost: string;
-      primary: string;
-      success: string;
-      subdued: string;
-      text: string;
-      warning: string;
-      inherit: string;
-    };
-    euiIconSizes: {
-      small: string;
-      medium: string;
-      large: string;
-      xLarge: string;
-      xxLarge: string;
-    };
     euiKeyPadMenuSize: string;
     euiKeyPadMenuMarginSize: string;
     euiListGroupItemHoverBackground: string;
@@ -203,31 +184,6 @@ declare module '@elastic/eui/dist/eui_theme_dark.json' {
     euiMarkdownEditorMinHeight: string;
     euiPopoverArrowSize: string;
     euiPopoverTranslateDistance: string;
-    euiProgressSizes: {
-      xs: string;
-      s: string;
-      m: string;
-      l: string;
-    };
-    euiProgressColors: {
-      primary: string;
-      success: string;
-      warning: string;
-      danger: string;
-      accent: string;
-      subdued: string;
-      vis0: string;
-      vis1: string;
-      vis2: string;
-      vis3: string;
-      vis4: string;
-      vis5: string;
-      vis6: string;
-      vis7: string;
-      vis8: string;
-      vis9: string;
-      customColor: string;
-    };
     euiResizableButtonTransitionSpeed: string;
     euiResizableButtonSize: string;
     euiSelectableListItemBorder: string;
@@ -505,6 +461,13 @@ declare module '@elastic/eui/dist/eui_theme_dark.json' {
     euiFormInputGroupLabelBackground: string;
     euiFormInputGroupBorder: string;
     euiSwitchOffColor: string;
+    euiFormControlIconSizes: {
+      small: string;
+      medium: string;
+      large: string;
+      xLarge: string;
+      xxLarge: string;
+    };
     euiFormControlLayoutGroupInputHeight: string;
     euiFormControlLayoutGroupInputCompressedHeight: string;
     euiFormControlLayoutGroupInputCompressedBorderRadius: string;