@patternfly/react-core 4.208.9 → 4.208.12

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.208.12 (2022-05-05)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## 4.208.11 (2022-05-05)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## 4.208.10 (2022-05-05)
+
+
+### Bug Fixes
+
+* **charts:** Add style for tooltip cursor ([#7361](https://github.com/patternfly/patternfly-react/issues/7361)) ([1b3f67c](https://github.com/patternfly/patternfly-react/commit/1b3f67c3712a194bef672fe888f6a446f4bd8bc6))
+
+
+
+
+
 ## 4.208.9 (2022-05-04)
 
 **Note:** Version bump only for package @patternfly/react-core

package/dist/esm/helpers/index.d.ts

@@ -9,4 +9,5 @@ export * from './Popper/Popper';
 export * from './useIsomorphicLayout';
 export * from './KeyboardHandler';
 export * from './resizeObserver';
+export * from './useInterval';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/helpers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}

package/dist/esm/helpers/index.js

@@ -9,4 +9,5 @@ export * from './Popper/Popper';
 export * from './useIsomorphicLayout';
 export * from './KeyboardHandler';
 export * from './resizeObserver';
+export * from './useInterval';
 //# sourceMappingURL=index.js.map

package/dist/esm/helpers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}

package/dist/esm/helpers/useInterval.d.ts

@@ -0,0 +1,6 @@
+/** This is a custom React hook in a format suggest by Dan Abramov in a blog post here:
+ * https://overreacted.io/making-setinterval-declarative-with-react-hooks/. It allows setInterval to be used
+ * declaratively in functional React components.
+ */
+export declare function useInterval(callback: () => void, delay: number | null): void;
+//# sourceMappingURL=useInterval.d.ts.map

package/dist/esm/helpers/useInterval.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.d.ts","sourceRoot":"","sources":["../../../src/helpers/useInterval.ts"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,QAiBrE"}

package/dist/esm/helpers/useInterval.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+/** This is a custom React hook in a format suggest by Dan Abramov in a blog post here:
+ * https://overreacted.io/making-setinterval-declarative-with-react-hooks/. It allows setInterval to be used
+ * declaratively in functional React components.
+ */
+export function useInterval(callback, delay) {
+    const savedCallback = React.useRef(() => { });
+    React.useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    React.useEffect(() => {
+        function tick() {
+            savedCallback.current();
+        }
+        if (delay !== null) {
+            const id = setInterval(tick, delay);
+            return () => clearInterval(id);
+        }
+    }, [delay]);
+}
+//# sourceMappingURL=useInterval.js.map

package/dist/esm/helpers/useInterval.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.js","sourceRoot":"","sources":["../../../src/helpers/useInterval.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;GAGG;AAEH,MAAM,UAAU,WAAW,CAAC,QAAoB,EAAE,KAAoB;IACpE,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IAE7C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,aAAa,CAAC,OAAO,GAAG,QAAQ,CAAC;IACnC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,SAAS,IAAI;YACX,aAAa,CAAC,OAAO,EAAE,CAAC;QAC1B,CAAC;QAED,IAAI,KAAK,KAAK,IAAI,EAAE;YAClB,MAAM,EAAE,GAAG,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YACpC,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;SAChC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,CAAC"}

package/dist/js/helpers/index.d.ts

@@ -9,4 +9,5 @@ export * from './Popper/Popper';
 export * from './useIsomorphicLayout';
 export * from './KeyboardHandler';
 export * from './resizeObserver';
+export * from './useInterval';
 //# sourceMappingURL=index.d.ts.map

package/dist/js/helpers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}

package/dist/js/helpers/index.js

@@ -12,4 +12,5 @@ tslib_1.__exportStar(require("./Popper/Popper"), exports);
 tslib_1.__exportStar(require("./useIsomorphicLayout"), exports);
 tslib_1.__exportStar(require("./KeyboardHandler"), exports);
 tslib_1.__exportStar(require("./resizeObserver"), exports);
+tslib_1.__exportStar(require("./useInterval"), exports);
 //# sourceMappingURL=index.js.map

package/dist/js/helpers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/helpers/index.ts"],"names":[],"mappings":";;;AAAA,sDAA4B;AAC5B,gEAAsC;AACtC,kEAAwC;AACxC,0DAAgC;AAChC,sDAA4B;AAC5B,sDAA4B;AAC5B,iDAAuB;AACvB,0DAAgC;AAChC,gEAAsC;AACtC,4DAAkC;AAClC,2DAAiC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/helpers/index.ts"],"names":[],"mappings":";;;AAAA,sDAA4B;AAC5B,gEAAsC;AACtC,kEAAwC;AACxC,0DAAgC;AAChC,sDAA4B;AAC5B,sDAA4B;AAC5B,iDAAuB;AACvB,0DAAgC;AAChC,gEAAsC;AACtC,4DAAkC;AAClC,2DAAiC;AACjC,wDAA8B"}

package/dist/js/helpers/useInterval.d.ts

@@ -0,0 +1,6 @@
+/** This is a custom React hook in a format suggest by Dan Abramov in a blog post here:
+ * https://overreacted.io/making-setinterval-declarative-with-react-hooks/. It allows setInterval to be used
+ * declaratively in functional React components.
+ */
+export declare function useInterval(callback: () => void, delay: number | null): void;
+//# sourceMappingURL=useInterval.d.ts.map

package/dist/js/helpers/useInterval.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.d.ts","sourceRoot":"","sources":["../../../src/helpers/useInterval.ts"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,QAiBrE"}

package/dist/js/helpers/useInterval.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInterval = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+/** This is a custom React hook in a format suggest by Dan Abramov in a blog post here:
+ * https://overreacted.io/making-setinterval-declarative-with-react-hooks/. It allows setInterval to be used
+ * declaratively in functional React components.
+ */
+function useInterval(callback, delay) {
+    const savedCallback = React.useRef(() => { });
+    React.useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    React.useEffect(() => {
+        function tick() {
+            savedCallback.current();
+        }
+        if (delay !== null) {
+            const id = setInterval(tick, delay);
+            return () => clearInterval(id);
+        }
+    }, [delay]);
+}
+exports.useInterval = useInterval;
+//# sourceMappingURL=useInterval.js.map

package/dist/js/helpers/useInterval.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.js","sourceRoot":"","sources":["../../../src/helpers/useInterval.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B;;;GAGG;AAEH,SAAgB,WAAW,CAAC,QAAoB,EAAE,KAAoB;IACpE,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IAE7C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,aAAa,CAAC,OAAO,GAAG,QAAQ,CAAC;IACnC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,SAAS,IAAI;YACX,aAAa,CAAC,OAAO,EAAE,CAAC;QAC1B,CAAC;QAED,IAAI,KAAK,KAAK,IAAI,EAAE;YAClB,MAAM,EAAE,GAAG,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YACpC,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;SAChC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,CAAC;AAjBD,kCAiBC"}

package/dist/umd/react-core.css

@@ -9917,13 +9917,15 @@ label.pf-c-input-group__text {
   --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
 }
 
-.pf-c-label.pf-m-overflow:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
+.pf-c-label.pf-m-overflow:hover,
+.pf-c-label.pf-m-add:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
 .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--hover--before--BorderWidth);
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--hover--before--BorderColor);
 }
 
-.pf-c-label.pf-m-overflow:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
+.pf-c-label.pf-m-overflow:focus,
+.pf-c-label.pf-m-add:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
 .pf-c-label.pf-m-outline button.pf-c-label__content:focus {
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--focus--before--BorderWidth);
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
@@ -9977,7 +9979,7 @@ label.pf-c-input-group__text {
   margin-left: var(--pf-c-label__c-button--MarginLeft);
 }
 
-.pf-c-label.pf-m-overflow {
+.pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
   --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
@@ -17860,10 +17862,10 @@ span.pf-c-spinner {
     transform: rotate(0deg);
   }
   50% {
-    transform: rotate(-540deg);
+    transform: rotate(540deg);
   }
   100% {
-    transform: rotate(-1080deg);
+    transform: rotate(1080deg);
   }
 }
 .pf-c-spinner__clipper {
@@ -17876,10 +17878,10 @@ span.pf-c-spinner {
 
 @keyframes pf-animation-spinner__clipper {
   0% {
-    transform: rotate(0deg);
+    transform: rotate(90deg);
   }
   100% {
-    transform: rotate(-270deg);
+    transform: rotate(360deg);
   }
 }
 .pf-c-spinner__clipper::after {
@@ -17895,10 +17897,10 @@ span.pf-c-spinner {
 
 @keyframes pf-animation-spinner__clipper-after {
   0% {
-    transform: rotate(90deg);
+    transform: rotate(-180deg);
   }
   100% {
-    transform: rotate(-180deg);
+    transform: rotate(90deg);
   }
 }
 .pf-c-spinner__lead-ball {
@@ -17926,11 +17928,11 @@ span.pf-c-spinner {
   0% {
     transform: rotate(0deg);
   }
-  34% {
-    transform: rotate(-180deg);
+  33% {
+    transform: rotate(180deg);
   }
   100% {
-    transform: rotate(-360deg);
+    transform: rotate(360deg);
   }
 }
 .pf-c-spinner__tail-ball {
@@ -17958,11 +17960,11 @@ span.pf-c-spinner {
   0% {
     transform: rotate(0deg);
   }
-  67.5% {
-    transform: rotate(-180deg);
+  66% {
+    transform: rotate(180deg);
   }
   100% {
-    transform: rotate(-360deg);
+    transform: rotate(360deg);
   }
 }
 svg.pf-c-spinner {

package/dist/umd/react-core.js

@@ -3483,6 +3483,26 @@
         };
     };
 
+    /** This is a custom React hook in a format suggest by Dan Abramov in a blog post here:
+     * https://overreacted.io/making-setinterval-declarative-with-react-hooks/. It allows setInterval to be used
+     * declaratively in functional React components.
+     */
+    function useInterval(callback, delay) {
+        const savedCallback = React__namespace.useRef(() => { });
+        React__namespace.useEffect(() => {
+            savedCallback.current = callback;
+        }, [callback]);
+        React__namespace.useEffect(() => {
+            function tick() {
+                savedCallback.current();
+            }
+            if (delay !== null) {
+                const id = setInterval(tick, delay);
+                return () => clearInterval(id);
+            }
+        }, [delay]);
+    }
+
     Promise.resolve().then(function () { return bullseye; });
     var styles$1h = {
       "bullseye": "pf-l-bullseye"
@@ -13822,6 +13842,7 @@
         "cyan": "pf-m-cyan",
         "outline": "pf-m-outline",
         "overflow": "pf-m-overflow",
+        "add": "pf-m-add",
         "editable": "pf-m-editable",
         "editableActive": "pf-m-editable-active"
       }
@@ -22338,6 +22359,7 @@
     exports.sideElementIsOutOfView = sideElementIsOutOfView;
     exports.toCamel = toCamel;
     exports.trimLeft = trimLeft;
+    exports.useInterval = useInterval;
     exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
     exports.useOUIAId = useOUIAId;
     exports.useOUIAProps = useOUIAProps;

package/dist/umd/react-core.min.css

@@ -8040,6 +8040,81 @@ label.pf-c-check, .pf-c-check__label,
   font-size: var(--pf-global--FontSize--lg);
 }
 
+.pf-c-file-upload {
+  --pf-c-file-upload--m-loading__file-details--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-file-upload--m-loading__file-details--before--Left: var(--pf-global--BorderWidth--sm);
+  --pf-c-file-upload--m-loading__file-details--before--Right: var(--pf-global--BorderWidth--sm);
+  --pf-c-file-upload--m-loading__file-details--before--Bottom: var(--pf-global--BorderWidth--sm);
+  --pf-c-file-upload--m-drag-hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-file-upload--m-drag-hover--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-file-upload--m-drag-hover--before--ZIndex: var(--pf-global--ZIndex--xs);
+  --pf-c-file-upload--m-drag-hover--after--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-file-upload--m-drag-hover--after--Opacity: .1;
+  --pf-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-global--spacer--3xl) * 2);
+  --pf-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.pf-c-file-upload.pf-m-drag-hover::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--pf-c-file-upload--m-drag-hover--before--ZIndex);
+  content: "";
+  border: var(--pf-c-file-upload--m-drag-hover--before--BorderWidth) solid var(--pf-c-file-upload--m-drag-hover--before--BorderColor);
+}
+
+.pf-c-file-upload.pf-m-drag-hover::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  background-color: var(--pf-c-file-upload--m-drag-hover--after--BackgroundColor);
+  opacity: var(--pf-c-file-upload--m-drag-hover--after--Opacity);
+}
+
+.pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details {
+  position: relative;
+}
+
+.pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details::before {
+  position: absolute;
+  top: 0;
+  right: var(--pf-c-file-upload--m-loading__file-details--before--Left);
+  bottom: var(--pf-c-file-upload--m-loading__file-details--before--Left);
+  left: var(--pf-c-file-upload--m-loading__file-details--before--Left);
+  content: "";
+  background-color: var(--pf-c-file-upload--m-loading__file-details--before--BackgroundColor);
+}
+
+.pf-c-file-upload__file-select .pf-c-button.pf-m-control {
+  outline-offset: var(--pf-c-file-upload__file-select__c-button--m-control--OutlineOffset);
+}
+
+.pf-c-file-upload__file-details {
+  position: relative;
+  display: flex;
+}
+
+.pf-c-file-upload__file-details .pf-c-form-control {
+  flex: 1 1 auto;
+  min-height: var(--pf-c-file-upload__file-details__c-form-control--MinHeight);
+  border-top: 0;
+}
+
+.pf-c-file-upload__file-details-spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .pf-c-expandable-section {
   --pf-c-expandable-section__toggle--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-expandable-section__toggle--PaddingRight: var(--pf-global--spacer--md);
@@ -8164,81 +8239,6 @@ label.pf-c-check, .pf-c-check__label,
   font-weight: var(--pf-global--FontWeight--semi-bold);
 }
 
-.pf-c-file-upload {
-  --pf-c-file-upload--m-loading__file-details--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-file-upload--m-loading__file-details--before--Left: var(--pf-global--BorderWidth--sm);
-  --pf-c-file-upload--m-loading__file-details--before--Right: var(--pf-global--BorderWidth--sm);
-  --pf-c-file-upload--m-loading__file-details--before--Bottom: var(--pf-global--BorderWidth--sm);
-  --pf-c-file-upload--m-drag-hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-file-upload--m-drag-hover--before--BorderColor: var(--pf-global--primary-color--100);
-  --pf-c-file-upload--m-drag-hover--before--ZIndex: var(--pf-global--ZIndex--xs);
-  --pf-c-file-upload--m-drag-hover--after--BackgroundColor: var(--pf-global--primary-color--100);
-  --pf-c-file-upload--m-drag-hover--after--Opacity: .1;
-  --pf-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-global--spacer--3xl) * 2);
-  --pf-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-
-.pf-c-file-upload.pf-m-drag-hover::before {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: var(--pf-c-file-upload--m-drag-hover--before--ZIndex);
-  content: "";
-  border: var(--pf-c-file-upload--m-drag-hover--before--BorderWidth) solid var(--pf-c-file-upload--m-drag-hover--before--BorderColor);
-}
-
-.pf-c-file-upload.pf-m-drag-hover::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  content: "";
-  background-color: var(--pf-c-file-upload--m-drag-hover--after--BackgroundColor);
-  opacity: var(--pf-c-file-upload--m-drag-hover--after--Opacity);
-}
-
-.pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details {
-  position: relative;
-}
-
-.pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details::before {
-  position: absolute;
-  top: 0;
-  right: var(--pf-c-file-upload--m-loading__file-details--before--Left);
-  bottom: var(--pf-c-file-upload--m-loading__file-details--before--Left);
-  left: var(--pf-c-file-upload--m-loading__file-details--before--Left);
-  content: "";
-  background-color: var(--pf-c-file-upload--m-loading__file-details--before--BackgroundColor);
-}
-
-.pf-c-file-upload__file-select .pf-c-button.pf-m-control {
-  outline-offset: var(--pf-c-file-upload__file-select__c-button--m-control--OutlineOffset);
-}
-
-.pf-c-file-upload__file-details {
-  position: relative;
-  display: flex;
-}
-
-.pf-c-file-upload__file-details .pf-c-form-control {
-  flex: 1 1 auto;
-  min-height: var(--pf-c-file-upload__file-details__c-form-control--MinHeight);
-  border-top: 0;
-}
-
-.pf-c-file-upload__file-details-spinner {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
 .pf-c-form {
   --pf-c-form--GridGap: var(--pf-global--gutter--md);
   --pf-c-form__group--m-action--MarginTop: var(--pf-global--spacer--xl);
@@ -9917,13 +9917,15 @@ label.pf-c-input-group__text {
   --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
 }
 
-.pf-c-label.pf-m-overflow:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
+.pf-c-label.pf-m-overflow:hover,
+.pf-c-label.pf-m-add:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
 .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--hover--before--BorderWidth);
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--hover--before--BorderColor);
 }
 
-.pf-c-label.pf-m-overflow:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
+.pf-c-label.pf-m-overflow:focus,
+.pf-c-label.pf-m-add:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
 .pf-c-label.pf-m-outline button.pf-c-label__content:focus {
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--focus--before--BorderWidth);
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
@@ -9977,7 +9979,7 @@ label.pf-c-input-group__text {
   margin-left: var(--pf-c-label__c-button--MarginLeft);
 }
 
-.pf-c-label.pf-m-overflow {
+.pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
   --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
@@ -17860,10 +17862,10 @@ span.pf-c-spinner {
     transform: rotate(0deg);
   }
   50% {
-    transform: rotate(-540deg);
+    transform: rotate(540deg);
   }
   100% {
-    transform: rotate(-1080deg);
+    transform: rotate(1080deg);
   }
 }
 .pf-c-spinner__clipper {
@@ -17876,10 +17878,10 @@ span.pf-c-spinner {
 
 @keyframes pf-animation-spinner__clipper {
   0% {
-    transform: rotate(0deg);
+    transform: rotate(90deg);
   }
   100% {
-    transform: rotate(-270deg);
+    transform: rotate(360deg);
   }
 }
 .pf-c-spinner__clipper::after {
@@ -17895,10 +17897,10 @@ span.pf-c-spinner {
 
 @keyframes pf-animation-spinner__clipper-after {
   0% {
-    transform: rotate(90deg);
+    transform: rotate(-180deg);
   }
   100% {
-    transform: rotate(-180deg);
+    transform: rotate(90deg);
   }
 }
 .pf-c-spinner__lead-ball {
@@ -17926,11 +17928,11 @@ span.pf-c-spinner {
   0% {
     transform: rotate(0deg);
   }
-  34% {
-    transform: rotate(-180deg);
+  33% {
+    transform: rotate(180deg);
   }
   100% {
-    transform: rotate(-360deg);
+    transform: rotate(360deg);
   }
 }
 .pf-c-spinner__tail-ball {
@@ -17958,11 +17960,11 @@ span.pf-c-spinner {
   0% {
     transform: rotate(0deg);
   }
-  67.5% {
-    transform: rotate(-180deg);
+  66% {
+    transform: rotate(180deg);
   }
   100% {
-    transform: rotate(-360deg);
+    transform: rotate(360deg);
   }
 }
 svg.pf-c-spinner {