@patternfly/react-core 4.205.0 → 4.206.1

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.206.1 (2022-04-20)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+# 4.206.0 (2022-04-19)
+
+
+### Features
+
+* **HelperText:** add react demos ([#7250](https://github.com/patternfly/patternfly-react/issues/7250)) ([bf68976](https://github.com/patternfly/patternfly-react/commit/bf68976bebd683c935f587795a868c32ea8c5616))
+
+
+
+
+
+## 4.205.1 (2022-04-19)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 # 4.205.0 (2022-04-18)
 
 

package/dist/esm/components/HelperText/HelperText.d.ts

@@ -6,6 +6,15 @@ export interface HelperTextProps extends React.HTMLProps<HTMLDivElement | HTMLUL
     className?: string;
     /** Component type of the helper text container */
     component?: 'div' | 'ul';
+    /** ID for the helper text container. The value of this prop can be passed into a form component's
+     * aria-describedby prop when you intend for all helper text items to be announced to
+     * assistive technologies.
+     */
+    id?: string;
+    /** Flag for indicating whether the helper text container is a live region. Use this prop when you
+     * expect or intend for any helper text items within the container to be dynamically updated.
+     */
+    isLiveRegion?: boolean;
 }
 export declare const HelperText: React.FunctionComponent<HelperTextProps>;
 //# sourceMappingURL=HelperText.d.ts.map

package/dist/esm/components/HelperText/HelperText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelperText.d.ts","sourceRoot":"","sources":["../../../../src/components/HelperText/HelperText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,gBAAgB,CAAC;IACzF,yDAAyD;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAY/D,CAAC"}
+{"version":3,"file":"HelperText.d.ts","sourceRoot":"","sources":["../../../../src/components/HelperText/HelperText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,gBAAgB,CAAC;IACzF,yDAAyD;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACzB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAmB/D,CAAC"}

package/dist/esm/components/HelperText/HelperText.js

@@ -3,9 +3,9 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/HelperText/helper-text';
 import { css } from '@patternfly/react-styles';
 export const HelperText = (_a) => {
-    var { children, className, component = 'div' } = _a, props = __rest(_a, ["children", "className", "component"]);
+    var { children, className, component = 'div', id, isLiveRegion = false } = _a, props = __rest(_a, ["children", "className", "component", "id", "isLiveRegion"]);
     const Component = component;
-    return (React.createElement(Component, Object.assign({ className: css(styles.helperText, className) }, props), children));
+    return (React.createElement(Component, Object.assign({ id: id, className: css(styles.helperText, className) }, (isLiveRegion && { 'aria-live': 'polite' }), props), children));
 };
 HelperText.displayName = 'HelperText';
 //# sourceMappingURL=HelperText.js.map

package/dist/esm/components/HelperText/HelperText.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelperText.js","sourceRoot":"","sources":["../../../../src/components/HelperText/HelperText.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,gEAAgE,CAAC;AACpF,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAW/C,MAAM,CAAC,MAAM,UAAU,GAA6C,CAAC,EAKnD,EAAE,EAAE;QAL+C,EACnE,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,KAAK,OAED,EADb,KAAK,cAJ2D,sCAKpE,CADS;IAER,MAAM,SAAS,GAAG,SAAgB,CAAC;IACnC,OAAO,CACL,oBAAC,SAAS,kBAAC,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,CAAC,IAAM,KAAK,GAC/D,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AACF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}
+{"version":3,"file":"HelperText.js","sourceRoot":"","sources":["../../../../src/components/HelperText/HelperText.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,gEAAgE,CAAC;AACpF,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAoB/C,MAAM,CAAC,MAAM,UAAU,GAA6C,CAAC,EAOnD,EAAE,EAAE;QAP+C,EACnE,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,EAAE,EACF,YAAY,GAAG,KAAK,OAEJ,EADb,KAAK,cAN2D,4DAOpE,CADS;IAER,MAAM,SAAS,GAAG,SAAgB,CAAC;IACnC,OAAO,CACL,oBAAC,SAAS,kBACR,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,CAAC,IACxC,CAAC,YAAY,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,EAC3C,KAAK,GAER,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AACF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/esm/components/HelperText/HelperTextItem.d.ts

@@ -10,10 +10,18 @@ export interface HelperTextItemProps extends React.HTMLProps<HTMLDivElement | HT
     variant?: 'default' | 'indeterminate' | 'warning' | 'success' | 'error';
     /** Custom icon prefixing the helper text. This property will override the default icon paired with each helper text variant. */
     icon?: React.ReactNode;
-    /** Flag indicating the helper text item is dynamic. */
+    /** Flag indicating the helper text item is dynamic. This prop should be used when the
+     * text content of the helper text item will never change, but the icon and styling will
+     * be dynamically updated via the `variant` prop.
+     */
     isDynamic?: boolean;
     /** Flag indicating the helper text should have an icon. Dynamic helper texts include icons by default while static helper texts do not. */
     hasIcon?: boolean;
+    /** ID for the helper text item. The value of this prop can be passed into a form component's
+     * aria-describedby prop when you intend for only specific helper text items to be announced to
+     * assistive technologies.
+     */
+    id?: string;
 }
 export declare const HelperTextItem: React.FunctionComponent<HelperTextItemProps>;
 //# sourceMappingURL=HelperTextItem.d.ts.map

package/dist/esm/components/HelperText/HelperTextItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelperTextItem.d.ts","sourceRoot":"","sources":["../../../../src/components/HelperText/HelperTextItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,aAAa,CAAC;IAC1F,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,SAAS,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACzB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,GAAG,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACxE,gIAAgI;IAChI,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2IAA2I;IAC3I,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAUD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAgCvE,CAAC"}
+{"version":3,"file":"HelperTextItem.d.ts","sourceRoot":"","sources":["../../../../src/components/HelperText/HelperTextItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,aAAa,CAAC;IAC1F,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,SAAS,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACzB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,GAAG,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACxE,gIAAgI;IAChI,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2IAA2I;IAC3I,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAUD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAkCvE,CAAC"}

package/dist/esm/components/HelperText/HelperTextItem.js

@@ -14,9 +14,9 @@ const variantStyle = {
     error: styles.modifiers.error
 };
 export const HelperTextItem = (_a) => {
-    var { children, className, component = 'div', variant = 'default', icon, isDynamic = false, hasIcon = isDynamic } = _a, props = __rest(_a, ["children", "className", "component", "variant", "icon", "isDynamic", "hasIcon"]);
+    var { children, className, component = 'div', variant = 'default', icon, isDynamic = false, hasIcon = isDynamic, id } = _a, props = __rest(_a, ["children", "className", "component", "variant", "icon", "isDynamic", "hasIcon", "id"]);
     const Component = component;
-    return (React.createElement(Component, Object.assign({ className: css(styles.helperTextItem, variantStyle[variant], isDynamic && styles.modifiers.dynamic, className) }, props),
+    return (React.createElement(Component, Object.assign({ className: css(styles.helperTextItem, variantStyle[variant], isDynamic && styles.modifiers.dynamic, className), id: id }, props),
         icon && (React.createElement("span", { className: css(styles.helperTextItemIcon), "aria-hidden": true }, icon)),
         hasIcon && !icon && (React.createElement("span", { className: css(styles.helperTextItemIcon), "aria-hidden": true },
             (variant === 'default' || variant === 'indeterminate') && React.createElement(MinusIcon, null),

package/dist/esm/components/HelperText/HelperTextItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelperTextItem.js","sourceRoot":"","sources":["../../../../src/components/HelperText/HelperTextItem.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,gEAAgE,CAAC;AACpF,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,SAAS,MAAM,mDAAmD,CAAC;AAC1E,OAAO,uBAAuB,MAAM,kEAAkE,CAAC;AACvG,OAAO,eAAe,MAAM,0DAA0D,CAAC;AACvF,OAAO,qBAAqB,MAAM,gEAAgE,CAAC;AAmBnG,MAAM,YAAY,GAAG;IACnB,OAAO,EAAE,EAAE;IACX,aAAa,EAAE,MAAM,CAAC,SAAS,CAAC,aAAa;IAC7C,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,OAAO;IACjC,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,OAAO;IACjC,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,KAAK;CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAiD,CAAC,EASvD,EAAE,EAAE;QATmD,EAC3E,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,SAAS,EACnB,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,SAAS,OAEC,EADjB,KAAK,cARmE,iFAS5E,CADS;IAER,MAAM,SAAS,GAAG,SAAgB,CAAC;IACnC,OAAO,CACL,oBAAC,SAAS,kBACR,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,cAAc,EAAE,YAAY,CAAC,OAAO,CAAC,EAAE,SAAS,IAAI,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,IAC1G,KAAK;QAER,IAAI,IAAI,CACP,8BAAM,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,kBAAkB,CAAC,yBAC5C,IAAI,CACA,CACR;QACA,OAAO,IAAI,CAAC,IAAI,IAAI,CACnB,8BAAM,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,kBAAkB,CAAC;YAC5C,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,eAAe,CAAC,IAAI,oBAAC,SAAS,OAAG;YACvE,OAAO,KAAK,SAAS,IAAI,oBAAC,uBAAuB,OAAG;YACpD,OAAO,KAAK,SAAS,IAAI,oBAAC,eAAe,OAAG;YAC5C,OAAO,KAAK,OAAO,IAAI,oBAAC,qBAAqB,OAAG,CAC5C,CACR;QACD,8BAAM,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,CAAQ,CACxD,CACb,CAAC;AACJ,CAAC,CAAC;AACF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC"}
+{"version":3,"file":"HelperTextItem.js","sourceRoot":"","sources":["../../../../src/components/HelperText/HelperTextItem.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,gEAAgE,CAAC;AACpF,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,SAAS,MAAM,mDAAmD,CAAC;AAC1E,OAAO,uBAAuB,MAAM,kEAAkE,CAAC;AACvG,OAAO,eAAe,MAAM,0DAA0D,CAAC;AACvF,OAAO,qBAAqB,MAAM,gEAAgE,CAAC;AA2BnG,MAAM,YAAY,GAAG;IACnB,OAAO,EAAE,EAAE;IACX,aAAa,EAAE,MAAM,CAAC,SAAS,CAAC,aAAa;IAC7C,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,OAAO;IACjC,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,OAAO;IACjC,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,KAAK;CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAiD,CAAC,EAUvD,EAAE,EAAE;QAVmD,EAC3E,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,SAAS,EACnB,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,SAAS,EACnB,EAAE,OAEkB,EADjB,KAAK,cATmE,uFAU5E,CADS;IAER,MAAM,SAAS,GAAG,SAAgB,CAAC;IACnC,OAAO,CACL,oBAAC,SAAS,kBACR,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,cAAc,EAAE,YAAY,CAAC,OAAO,CAAC,EAAE,SAAS,IAAI,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,EAC9G,EAAE,EAAE,EAAE,IACF,KAAK;QAER,IAAI,IAAI,CACP,8BAAM,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,kBAAkB,CAAC,yBAC5C,IAAI,CACA,CACR;QACA,OAAO,IAAI,CAAC,IAAI,IAAI,CACnB,8BAAM,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,kBAAkB,CAAC;YAC5C,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,eAAe,CAAC,IAAI,oBAAC,SAAS,OAAG;YACvE,OAAO,KAAK,SAAS,IAAI,oBAAC,uBAAuB,OAAG;YACpD,OAAO,KAAK,SAAS,IAAI,oBAAC,eAAe,OAAG;YAC5C,OAAO,KAAK,OAAO,IAAI,oBAAC,qBAAqB,OAAG,CAC5C,CACR;QACD,8BAAM,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,CAAQ,CACxD,CACb,CAAC;AACJ,CAAC,CAAC;AACF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC"}

package/dist/js/components/HelperText/HelperText.d.ts

@@ -6,6 +6,15 @@ export interface HelperTextProps extends React.HTMLProps<HTMLDivElement | HTMLUL
     className?: string;
     /** Component type of the helper text container */
     component?: 'div' | 'ul';
+    /** ID for the helper text container. The value of this prop can be passed into a form component's
+     * aria-describedby prop when you intend for all helper text items to be announced to
+     * assistive technologies.
+     */
+    id?: string;
+    /** Flag for indicating whether the helper text container is a live region. Use this prop when you
+     * expect or intend for any helper text items within the container to be dynamically updated.
+     */
+    isLiveRegion?: boolean;
 }
 export declare const HelperText: React.FunctionComponent<HelperTextProps>;
 //# sourceMappingURL=HelperText.d.ts.map

package/dist/js/components/HelperText/HelperText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelperText.d.ts","sourceRoot":"","sources":["../../../../src/components/HelperText/HelperText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,gBAAgB,CAAC;IACzF,yDAAyD;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAY/D,CAAC"}
+{"version":3,"file":"HelperText.d.ts","sourceRoot":"","sources":["../../../../src/components/HelperText/HelperText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,gBAAgB,CAAC;IACzF,yDAAyD;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACzB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAmB/D,CAAC"}

package/dist/js/components/HelperText/HelperText.js

@@ -6,9 +6,9 @@ const React = tslib_1.__importStar(require("react"));
 const helper_text_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/HelperText/helper-text"));
 const react_styles_1 = require("@patternfly/react-styles");
 const HelperText = (_a) => {
-    var { children, className, component = 'div' } = _a, props = tslib_1.__rest(_a, ["children", "className", "component"]);
+    var { children, className, component = 'div', id, isLiveRegion = false } = _a, props = tslib_1.__rest(_a, ["children", "className", "component", "id", "isLiveRegion"]);
     const Component = component;
-    return (React.createElement(Component, Object.assign({ className: react_styles_1.css(helper_text_1.default.helperText, className) }, props), children));
+    return (React.createElement(Component, Object.assign({ id: id, className: react_styles_1.css(helper_text_1.default.helperText, className) }, (isLiveRegion && { 'aria-live': 'polite' }), props), children));
 };
 exports.HelperText = HelperText;
 exports.HelperText.displayName = 'HelperText';

package/dist/js/components/HelperText/HelperText.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelperText.js","sourceRoot":"","sources":["../../../../src/components/HelperText/HelperText.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,yHAAoF;AACpF,2DAA+C;AAWxC,MAAM,UAAU,GAA6C,CAAC,EAKnD,EAAE,EAAE;QAL+C,EACnE,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,KAAK,OAED,EADb,KAAK,sBAJ2D,sCAKpE,CADS;IAER,MAAM,SAAS,GAAG,SAAgB,CAAC;IACnC,OAAO,CACL,oBAAC,SAAS,kBAAC,SAAS,EAAE,kBAAG,CAAC,qBAAM,CAAC,UAAU,EAAE,SAAS,CAAC,IAAM,KAAK,GAC/D,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,UAAU,cAYrB;AACF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}
+{"version":3,"file":"HelperText.js","sourceRoot":"","sources":["../../../../src/components/HelperText/HelperText.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,yHAAoF;AACpF,2DAA+C;AAoBxC,MAAM,UAAU,GAA6C,CAAC,EAOnD,EAAE,EAAE;QAP+C,EACnE,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,EAAE,EACF,YAAY,GAAG,KAAK,OAEJ,EADb,KAAK,sBAN2D,4DAOpE,CADS;IAER,MAAM,SAAS,GAAG,SAAgB,CAAC;IACnC,OAAO,CACL,oBAAC,SAAS,kBACR,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,kBAAG,CAAC,qBAAM,CAAC,UAAU,EAAE,SAAS,CAAC,IACxC,CAAC,YAAY,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,EAC3C,KAAK,GAER,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,UAAU,cAmBrB;AACF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/js/components/HelperText/HelperTextItem.d.ts

@@ -10,10 +10,18 @@ export interface HelperTextItemProps extends React.HTMLProps<HTMLDivElement | HT
     variant?: 'default' | 'indeterminate' | 'warning' | 'success' | 'error';
     /** Custom icon prefixing the helper text. This property will override the default icon paired with each helper text variant. */
     icon?: React.ReactNode;
-    /** Flag indicating the helper text item is dynamic. */
+    /** Flag indicating the helper text item is dynamic. This prop should be used when the
+     * text content of the helper text item will never change, but the icon and styling will
+     * be dynamically updated via the `variant` prop.
+     */
     isDynamic?: boolean;
     /** Flag indicating the helper text should have an icon. Dynamic helper texts include icons by default while static helper texts do not. */
     hasIcon?: boolean;
+    /** ID for the helper text item. The value of this prop can be passed into a form component's
+     * aria-describedby prop when you intend for only specific helper text items to be announced to
+     * assistive technologies.
+     */
+    id?: string;
 }
 export declare const HelperTextItem: React.FunctionComponent<HelperTextItemProps>;
 //# sourceMappingURL=HelperTextItem.d.ts.map

package/dist/js/components/HelperText/HelperTextItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelperTextItem.d.ts","sourceRoot":"","sources":["../../../../src/components/HelperText/HelperTextItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,aAAa,CAAC;IAC1F,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,SAAS,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACzB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,GAAG,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACxE,gIAAgI;IAChI,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2IAA2I;IAC3I,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAUD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAgCvE,CAAC"}
+{"version":3,"file":"HelperTextItem.d.ts","sourceRoot":"","sources":["../../../../src/components/HelperText/HelperTextItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,aAAa,CAAC;IAC1F,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,SAAS,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACzB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,GAAG,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACxE,gIAAgI;IAChI,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2IAA2I;IAC3I,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAUD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAkCvE,CAAC"}

package/dist/js/components/HelperText/HelperTextItem.js

@@ -17,9 +17,9 @@ const variantStyle = {
     error: helper_text_1.default.modifiers.error
 };
 const HelperTextItem = (_a) => {
-    var { children, className, component = 'div', variant = 'default', icon, isDynamic = false, hasIcon = isDynamic } = _a, props = tslib_1.__rest(_a, ["children", "className", "component", "variant", "icon", "isDynamic", "hasIcon"]);
+    var { children, className, component = 'div', variant = 'default', icon, isDynamic = false, hasIcon = isDynamic, id } = _a, props = tslib_1.__rest(_a, ["children", "className", "component", "variant", "icon", "isDynamic", "hasIcon", "id"]);
     const Component = component;
-    return (React.createElement(Component, Object.assign({ className: react_styles_1.css(helper_text_1.default.helperTextItem, variantStyle[variant], isDynamic && helper_text_1.default.modifiers.dynamic, className) }, props),
+    return (React.createElement(Component, Object.assign({ className: react_styles_1.css(helper_text_1.default.helperTextItem, variantStyle[variant], isDynamic && helper_text_1.default.modifiers.dynamic, className), id: id }, props),
         icon && (React.createElement("span", { className: react_styles_1.css(helper_text_1.default.helperTextItemIcon), "aria-hidden": true }, icon)),
         hasIcon && !icon && (React.createElement("span", { className: react_styles_1.css(helper_text_1.default.helperTextItemIcon), "aria-hidden": true },
             (variant === 'default' || variant === 'indeterminate') && React.createElement(minus_icon_1.default, null),

package/dist/js/components/HelperText/HelperTextItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelperTextItem.js","sourceRoot":"","sources":["../../../../src/components/HelperText/HelperTextItem.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,yHAAoF;AACpF,2DAA+C;AAC/C,0GAA0E;AAC1E,wIAAuG;AACvG,wHAAuF;AACvF,oIAAmG;AAmBnG,MAAM,YAAY,GAAG;IACnB,OAAO,EAAE,EAAE;IACX,aAAa,EAAE,qBAAM,CAAC,SAAS,CAAC,aAAa;IAC7C,OAAO,EAAE,qBAAM,CAAC,SAAS,CAAC,OAAO;IACjC,OAAO,EAAE,qBAAM,CAAC,SAAS,CAAC,OAAO;IACjC,KAAK,EAAE,qBAAM,CAAC,SAAS,CAAC,KAAK;CAC9B,CAAC;AAEK,MAAM,cAAc,GAAiD,CAAC,EASvD,EAAE,EAAE;QATmD,EAC3E,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,SAAS,EACnB,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,SAAS,OAEC,EADjB,KAAK,sBARmE,iFAS5E,CADS;IAER,MAAM,SAAS,GAAG,SAAgB,CAAC;IACnC,OAAO,CACL,oBAAC,SAAS,kBACR,SAAS,EAAE,kBAAG,CAAC,qBAAM,CAAC,cAAc,EAAE,YAAY,CAAC,OAAO,CAAC,EAAE,SAAS,IAAI,qBAAM,CAAC,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,IAC1G,KAAK;QAER,IAAI,IAAI,CACP,8BAAM,SAAS,EAAE,kBAAG,CAAC,qBAAM,CAAC,kBAAkB,CAAC,yBAC5C,IAAI,CACA,CACR;QACA,OAAO,IAAI,CAAC,IAAI,IAAI,CACnB,8BAAM,SAAS,EAAE,kBAAG,CAAC,qBAAM,CAAC,kBAAkB,CAAC;YAC5C,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,eAAe,CAAC,IAAI,oBAAC,oBAAS,OAAG;YACvE,OAAO,KAAK,SAAS,IAAI,oBAAC,mCAAuB,OAAG;YACpD,OAAO,KAAK,SAAS,IAAI,oBAAC,2BAAe,OAAG;YAC5C,OAAO,KAAK,OAAO,IAAI,oBAAC,iCAAqB,OAAG,CAC5C,CACR;QACD,8BAAM,SAAS,EAAE,kBAAG,CAAC,qBAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,CAAQ,CACxD,CACb,CAAC;AACJ,CAAC,CAAC;AAhCW,QAAA,cAAc,kBAgCzB;AACF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC"}
+{"version":3,"file":"HelperTextItem.js","sourceRoot":"","sources":["../../../../src/components/HelperText/HelperTextItem.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,yHAAoF;AACpF,2DAA+C;AAC/C,0GAA0E;AAC1E,wIAAuG;AACvG,wHAAuF;AACvF,oIAAmG;AA2BnG,MAAM,YAAY,GAAG;IACnB,OAAO,EAAE,EAAE;IACX,aAAa,EAAE,qBAAM,CAAC,SAAS,CAAC,aAAa;IAC7C,OAAO,EAAE,qBAAM,CAAC,SAAS,CAAC,OAAO;IACjC,OAAO,EAAE,qBAAM,CAAC,SAAS,CAAC,OAAO;IACjC,KAAK,EAAE,qBAAM,CAAC,SAAS,CAAC,KAAK;CAC9B,CAAC;AAEK,MAAM,cAAc,GAAiD,CAAC,EAUvD,EAAE,EAAE;QAVmD,EAC3E,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,SAAS,EACnB,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,SAAS,EACnB,EAAE,OAEkB,EADjB,KAAK,sBATmE,uFAU5E,CADS;IAER,MAAM,SAAS,GAAG,SAAgB,CAAC;IACnC,OAAO,CACL,oBAAC,SAAS,kBACR,SAAS,EAAE,kBAAG,CAAC,qBAAM,CAAC,cAAc,EAAE,YAAY,CAAC,OAAO,CAAC,EAAE,SAAS,IAAI,qBAAM,CAAC,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,EAC9G,EAAE,EAAE,EAAE,IACF,KAAK;QAER,IAAI,IAAI,CACP,8BAAM,SAAS,EAAE,kBAAG,CAAC,qBAAM,CAAC,kBAAkB,CAAC,yBAC5C,IAAI,CACA,CACR;QACA,OAAO,IAAI,CAAC,IAAI,IAAI,CACnB,8BAAM,SAAS,EAAE,kBAAG,CAAC,qBAAM,CAAC,kBAAkB,CAAC;YAC5C,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,eAAe,CAAC,IAAI,oBAAC,oBAAS,OAAG;YACvE,OAAO,KAAK,SAAS,IAAI,oBAAC,mCAAuB,OAAG;YACpD,OAAO,KAAK,SAAS,IAAI,oBAAC,2BAAe,OAAG;YAC5C,OAAO,KAAK,OAAO,IAAI,oBAAC,iCAAqB,OAAG,CAC5C,CACR;QACD,8BAAM,SAAS,EAAE,kBAAG,CAAC,qBAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,CAAQ,CACxD,CACb,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,cAAc,kBAkCzB;AACF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC"}

package/dist/umd/react-core.css

@@ -5616,27 +5616,45 @@ label.pf-c-check, .pf-c-check__label,
   }
 }
 .pf-c-divider {
-  --pf-c-divider--Height: var(--pf-global--BorderWidth--sm);
+  --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
+  --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
   --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
-  --pf-c-divider--after--Height: var(--pf-c-divider--Height);
-  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BackgroundColor);
-  --pf-c-divider--Display: flex;
+  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
   --pf-c-divider--after--FlexBasis: 100%;
   --pf-c-divider--after--Inset: 0%;
   --pf-c-divider--m-vertical--after--FlexBasis: 100%;
-  --pf-c-divider--m-vertical--after--Width: var(--pf-global--BorderWidth--sm);
+  --pf-c-divider--m-horizontal--Display: flex;
+  --pf-c-divider--m-horizontal--FlexDirection: row;
+  --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
+  --pf-c-divider--m-horizontal--after--Width: auto;
+  --pf-c-divider--m-vertical--Display: inline-flex;
+  --pf-c-divider--m-vertical--FlexDirection: column;
+  --pf-c-divider--m-vertical--after--Height: auto;
+  --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
   --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
+  --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+  --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+  --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+  width: 100%;
+  height: auto;
+  display: var(--pf-c-divider--Display);
+  flex-direction: var(--pf-c-divider--FlexDirection);
   align-items: center;
   align-self: stretch;
   flex-shrink: 0;
   justify-content: center;
-  width: 100%;
   border: 0;
 }
 
 .pf-c-divider::after {
   flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
+}
+
+.pf-c-divider::after {
   align-self: stretch;
+  width: var(--pf-c-divider--after--Width);
   height: var(--pf-c-divider--after--Height);
   content: "";
   background-color: var(--pf-c-divider--after--BackgroundColor);
@@ -5644,17 +5662,16 @@ label.pf-c-check, .pf-c-check__label,
 }
 
 .pf-c-divider.pf-m-vertical {
-  display: inline-flex;
-  flex-direction: column;
+  --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
+  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
+  --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
+  --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
   width: auto;
   height: inherit;
-  min-height: 100%;
-  max-height: 100%;
 }
 
 .pf-c-divider.pf-m-vertical::after {
   flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
-  width: var(--pf-c-divider--m-vertical--after--Width);
 }
 
 .pf-c-divider.pf-m-inset-none {
@@ -5689,6 +5706,34 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
 }
 
+@media (min-width: 576px) {
+  .pf-c-divider.pf-m-horizontal-on-sm {
+    --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+    width: 100%;
+    height: auto;
+  }
+
+  .pf-c-divider.pf-m-horizontal-on-sm::after {
+    flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-divider.pf-m-vertical-on-sm {
+    --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
+    width: auto;
+    height: inherit;
+  }
+
+  .pf-c-divider.pf-m-vertical-on-sm::after {
+    flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
+  }
+}
 @media (min-width: 576px) {
   .pf-c-divider.pf-m-inset-none-on-sm {
     --pf-c-divider--after--Inset: 0%;
@@ -5722,6 +5767,34 @@ label.pf-c-check, .pf-c-check__label,
     --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
   }
 }
+@media (min-width: 768px) {
+  .pf-c-divider.pf-m-horizontal-on-md {
+    --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+    width: 100%;
+    height: auto;
+  }
+
+  .pf-c-divider.pf-m-horizontal-on-md::after {
+    flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-divider.pf-m-vertical-on-md {
+    --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
+    width: auto;
+    height: inherit;
+  }
+
+  .pf-c-divider.pf-m-vertical-on-md::after {
+    flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
+  }
+}
 @media (min-width: 768px) {
   .pf-c-divider.pf-m-inset-none-on-md {
     --pf-c-divider--after--Inset: 0%;
@@ -5755,6 +5828,34 @@ label.pf-c-check, .pf-c-check__label,
     --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
   }
 }
+@media (min-width: 992px) {
+  .pf-c-divider.pf-m-horizontal-on-lg {
+    --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+    width: 100%;
+    height: auto;
+  }
+
+  .pf-c-divider.pf-m-horizontal-on-lg::after {
+    flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-divider.pf-m-vertical-on-lg {
+    --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
+    width: auto;
+    height: inherit;
+  }
+
+  .pf-c-divider.pf-m-vertical-on-lg::after {
+    flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
+  }
+}
 @media (min-width: 992px) {
   .pf-c-divider.pf-m-inset-none-on-lg {
     --pf-c-divider--after--Inset: 0%;
@@ -5788,6 +5889,34 @@ label.pf-c-check, .pf-c-check__label,
     --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
   }
 }
+@media (min-width: 1200px) {
+  .pf-c-divider.pf-m-horizontal-on-xl {
+    --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+    width: 100%;
+    height: auto;
+  }
+
+  .pf-c-divider.pf-m-horizontal-on-xl::after {
+    flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-divider.pf-m-vertical-on-xl {
+    --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
+    width: auto;
+    height: inherit;
+  }
+
+  .pf-c-divider.pf-m-vertical-on-xl::after {
+    flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
+  }
+}
 @media (min-width: 1200px) {
   .pf-c-divider.pf-m-inset-none-on-xl {
     --pf-c-divider--after--Inset: 0%;
@@ -5821,6 +5950,34 @@ label.pf-c-check, .pf-c-check__label,
     --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
   }
 }
+@media (min-width: 1450px) {
+  .pf-c-divider.pf-m-horizontal-on-2xl {
+    --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+    width: 100%;
+    height: auto;
+  }
+
+  .pf-c-divider.pf-m-horizontal-on-2xl::after {
+    flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-divider.pf-m-vertical-on-2xl {
+    --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
+    width: auto;
+    height: inherit;
+  }
+
+  .pf-c-divider.pf-m-vertical-on-2xl::after {
+    flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
+  }
+}
 @media (min-width: 1450px) {
   .pf-c-divider.pf-m-inset-none-on-2xl {
     --pf-c-divider--after--Inset: 0%;
@@ -14631,6 +14788,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-page__main-wizard--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
   --pf-c-page__main-wizard--BorderTopColor: var(--pf-global--BorderColor--100);
   --pf-c-page__main-wizard--BorderTopWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
   display: grid;
   height: 100%;
   grid-template-columns: 1fr;
@@ -15221,6 +15379,10 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-page__main-wizard--BorderTopWidth: 0;
 }
 
+.pf-c-page__main-wizard.pf-m-light-200 {
+  --pf-c-page__main-wizard--BackgroundColor: var(--pf-c-page__main-wizard--m-light-200--BackgroundColor);
+}
+
 .pf-c-page__main-wizard .pf-c-page__main-body {
   min-height: 0;
 }
@@ -21779,7 +21941,7 @@ svg.pf-c-spinner.pf-m-xl {
   min-height: 0;
 }
 
-.pf-c-wizard > *:not(.pf-c-wizard__outer-wrap) {
+.pf-c-wizard > :not(.pf-c-wizard__outer-wrap):not(.pf-c-drawer) {
   flex-shrink: 0;
 }
 
@@ -22202,6 +22364,7 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
   position: relative;
   display: flex;
+  width: 100%;
   color: var(--pf-c-text-input-group--Color, inherit);
   background-color: var(--pf-c-text-input-group--BackgroundColor);
 }
@@ -22338,6 +22501,10 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
 }
 
+.pf-c-text-input-group__group {
+  display: flex;
+}
+
 .pf-c-panel {
   --pf-c-panel--Width: auto;
   --pf-c-panel--MinWidth: auto;

package/dist/umd/react-core.js

@@ -5059,6 +5059,8 @@
         "insetXl": "pf-m-inset-xl",
         "inset_2xl": "pf-m-inset-2xl",
         "inset_3xl": "pf-m-inset-3xl",
+        "horizontalOnSm": "pf-m-horizontal-on-sm",
+        "verticalOnSm": "pf-m-vertical-on-sm",
         "insetNoneOnSm": "pf-m-inset-none-on-sm",
         "insetXsOnSm": "pf-m-inset-xs-on-sm",
         "insetSmOnSm": "pf-m-inset-sm-on-sm",
@@ -5067,6 +5069,8 @@
         "insetXlOnSm": "pf-m-inset-xl-on-sm",
         "inset_2xlOnSm": "pf-m-inset-2xl-on-sm",
         "inset_3xlOnSm": "pf-m-inset-3xl-on-sm",
+        "horizontalOnMd": "pf-m-horizontal-on-md",
+        "verticalOnMd": "pf-m-vertical-on-md",
         "insetNoneOnMd": "pf-m-inset-none-on-md",
         "insetXsOnMd": "pf-m-inset-xs-on-md",
         "insetSmOnMd": "pf-m-inset-sm-on-md",
@@ -5075,6 +5079,8 @@
         "insetXlOnMd": "pf-m-inset-xl-on-md",
         "inset_2xlOnMd": "pf-m-inset-2xl-on-md",
         "inset_3xlOnMd": "pf-m-inset-3xl-on-md",
+        "horizontalOnLg": "pf-m-horizontal-on-lg",
+        "verticalOnLg": "pf-m-vertical-on-lg",
         "insetNoneOnLg": "pf-m-inset-none-on-lg",
         "insetXsOnLg": "pf-m-inset-xs-on-lg",
         "insetSmOnLg": "pf-m-inset-sm-on-lg",
@@ -5083,6 +5089,8 @@
         "insetXlOnLg": "pf-m-inset-xl-on-lg",
         "inset_2xlOnLg": "pf-m-inset-2xl-on-lg",
         "inset_3xlOnLg": "pf-m-inset-3xl-on-lg",
+        "horizontalOnXl": "pf-m-horizontal-on-xl",
+        "verticalOnXl": "pf-m-vertical-on-xl",
         "insetNoneOnXl": "pf-m-inset-none-on-xl",
         "insetXsOnXl": "pf-m-inset-xs-on-xl",
         "insetSmOnXl": "pf-m-inset-sm-on-xl",
@@ -5091,6 +5099,8 @@
         "insetXlOnXl": "pf-m-inset-xl-on-xl",
         "inset_2xlOnXl": "pf-m-inset-2xl-on-xl",
         "inset_3xlOnXl": "pf-m-inset-3xl-on-xl",
+        "horizontalOn_2xl": "pf-m-horizontal-on-2xl",
+        "verticalOn_2xl": "pf-m-vertical-on-2xl",
         "insetNoneOn_2xl": "pf-m-inset-none-on-2xl",
         "insetXsOn_2xl": "pf-m-inset-xs-on-2xl",
         "insetSmOn_2xl": "pf-m-inset-sm-on-2xl",
@@ -13434,9 +13444,9 @@
     };
 
     const HelperText = (_a) => {
-        var { children, className, component = 'div' } = _a, props = __rest$1(_a, ["children", "className", "component"]);
+        var { children, className, component = 'div', id, isLiveRegion = false } = _a, props = __rest$1(_a, ["children", "className", "component", "id", "isLiveRegion"]);
         const Component = component;
-        return (React__namespace.createElement(Component, Object.assign({ className: css(styles$H.helperText, className) }, props), children));
+        return (React__namespace.createElement(Component, Object.assign({ id: id, className: css(styles$H.helperText, className) }, (isLiveRegion && { 'aria-live': 'polite' }), props), children));
     };
     HelperText.displayName = 'HelperText';
 
@@ -13461,9 +13471,9 @@
         error: styles$H.modifiers.error
     };
     const HelperTextItem = (_a) => {
-        var { children, className, component = 'div', variant = 'default', icon, isDynamic = false, hasIcon = isDynamic } = _a, props = __rest$1(_a, ["children", "className", "component", "variant", "icon", "isDynamic", "hasIcon"]);
+        var { children, className, component = 'div', variant = 'default', icon, isDynamic = false, hasIcon = isDynamic, id } = _a, props = __rest$1(_a, ["children", "className", "component", "variant", "icon", "isDynamic", "hasIcon", "id"]);
         const Component = component;
-        return (React__namespace.createElement(Component, Object.assign({ className: css(styles$H.helperTextItem, variantStyle$4[variant], isDynamic && styles$H.modifiers.dynamic, className) }, props),
+        return (React__namespace.createElement(Component, Object.assign({ className: css(styles$H.helperTextItem, variantStyle$4[variant], isDynamic && styles$H.modifiers.dynamic, className), id: id }, props),
             icon && (React__namespace.createElement("span", { className: css(styles$H.helperTextItemIcon), "aria-hidden": true }, icon)),
             hasIcon && !icon && (React__namespace.createElement("span", { className: css(styles$H.helperTextItemIcon), "aria-hidden": true },
                 (variant === 'default' || variant === 'indeterminate') && React__namespace.createElement(MinusIcon$1, null),
@@ -14371,7 +14381,8 @@
         "paddingOnXl": "pf-m-padding-on-xl",
         "noPaddingOnXl": "pf-m-no-padding-on-xl",
         "paddingOn_2xl": "pf-m-padding-on-2xl",
-        "noPaddingOn_2xl": "pf-m-no-padding-on-2xl"
+        "noPaddingOn_2xl": "pf-m-no-padding-on-2xl",
+        "light_200": "pf-m-light-200"
       },
       "nav": "pf-c-nav",
       "notificationBadge": "pf-c-notification-badge",
@@ -19905,6 +19916,7 @@
     var styles$a = {
       "button": "pf-c-button",
       "card": "pf-c-card",
+      "drawer": "pf-c-drawer",
       "modalBox": "pf-c-modal-box",
       "modifiers": {
         "finished": "pf-m-finished",
@@ -20604,6 +20616,7 @@
         "hint": "pf-m-hint"
       },
       "textInputGroup": "pf-c-text-input-group",
+      "textInputGroupGroup": "pf-c-text-input-group__group",
       "textInputGroupIcon": "pf-c-text-input-group__icon",
       "textInputGroupMain": "pf-c-text-input-group__main",
       "textInputGroupText": "pf-c-text-input-group__text",