@patternfly/react-styles 4.92.7 → 5.0.0-alpha.10

package/css/components/Wizard/wizard.d.ts

@@ -1,9 +1,7 @@
 import './wizard.css';
 declare const _default: {
-  "button": "pf-c-button",
-  "card": "pf-c-card",
-  "drawer": "pf-c-drawer",
-  "modalBox": "pf-c-modal-box",
+  "drawer": "pf-v5-c-drawer",
+  "modalBox": "pf-v5-c-modal-box",
   "modifiers": {
     "finished": "pf-m-finished",
     "expanded": "pf-m-expanded",
@@ -12,31 +10,32 @@ declare const _default: {
     "disabled": "pf-m-disabled",
     "noPadding": "pf-m-no-padding"
   },
-  "pageMainWizard": "pf-c-page__main-wizard",
-  "themeDark": "pf-theme-dark",
-  "wizard": "pf-c-wizard",
-  "wizardClose": "pf-c-wizard__close",
-  "wizardDescription": "pf-c-wizard__description",
-  "wizardFooter": "pf-c-wizard__footer",
-  "wizardFooterCancel": "pf-c-wizard__footer-cancel",
-  "wizardHeader": "pf-c-wizard__header",
-  "wizardInnerWrap": "pf-c-wizard__inner-wrap",
-  "wizardMain": "pf-c-wizard__main",
-  "wizardMainBody": "pf-c-wizard__main-body",
-  "wizardNav": "pf-c-wizard__nav",
-  "wizardNavItem": "pf-c-wizard__nav-item",
-  "wizardNavLink": "pf-c-wizard__nav-link",
-  "wizardNavLinkText": "pf-c-wizard__nav-link-text",
-  "wizardNavLinkToggle": "pf-c-wizard__nav-link-toggle",
-  "wizardNavLinkToggleIcon": "pf-c-wizard__nav-link-toggle-icon",
-  "wizardNavList": "pf-c-wizard__nav-list",
-  "wizardOuterWrap": "pf-c-wizard__outer-wrap",
-  "wizardTitle": "pf-c-wizard__title",
-  "wizardToggle": "pf-c-wizard__toggle",
-  "wizardToggleIcon": "pf-c-wizard__toggle-icon",
-  "wizardToggleList": "pf-c-wizard__toggle-list",
-  "wizardToggleListItem": "pf-c-wizard__toggle-list-item",
-  "wizardToggleNum": "pf-c-wizard__toggle-num",
-  "wizardToggleSeparator": "pf-c-wizard__toggle-separator"
+  "pageMainWizard": "pf-v5-c-page__main-wizard",
+  "themeDark": "pf-v5-theme-dark",
+  "wizard": "pf-v5-c-wizard",
+  "wizardClose": "pf-v5-c-wizard__close",
+  "wizardDescription": "pf-v5-c-wizard__description",
+  "wizardFooter": "pf-v5-c-wizard__footer",
+  "wizardFooterCancel": "pf-v5-c-wizard__footer-cancel",
+  "wizardHeader": "pf-v5-c-wizard__header",
+  "wizardInnerWrap": "pf-v5-c-wizard__inner-wrap",
+  "wizardMain": "pf-v5-c-wizard__main",
+  "wizardMainBody": "pf-v5-c-wizard__main-body",
+  "wizardNav": "pf-v5-c-wizard__nav",
+  "wizardNavItem": "pf-v5-c-wizard__nav-item",
+  "wizardNavLink": "pf-v5-c-wizard__nav-link",
+  "wizardNavLinkText": "pf-v5-c-wizard__nav-link-text",
+  "wizardNavLinkToggle": "pf-v5-c-wizard__nav-link-toggle",
+  "wizardNavLinkToggleIcon": "pf-v5-c-wizard__nav-link-toggle-icon",
+  "wizardNavList": "pf-v5-c-wizard__nav-list",
+  "wizardOuterWrap": "pf-v5-c-wizard__outer-wrap",
+  "wizardTitle": "pf-v5-c-wizard__title",
+  "wizardTitleText": "pf-v5-c-wizard__title-text",
+  "wizardToggle": "pf-v5-c-wizard__toggle",
+  "wizardToggleIcon": "pf-v5-c-wizard__toggle-icon",
+  "wizardToggleList": "pf-v5-c-wizard__toggle-list",
+  "wizardToggleListItem": "pf-v5-c-wizard__toggle-list-item",
+  "wizardToggleNum": "pf-v5-c-wizard__toggle-num",
+  "wizardToggleSeparator": "pf-v5-c-wizard__toggle-separator"
 };
 export default _default;

package/css/components/Wizard/wizard.js

@@ -2,10 +2,8 @@
 exports.__esModule = true;
 require('./wizard.css');
 exports.default = {
-  "button": "pf-c-button",
-  "card": "pf-c-card",
-  "drawer": "pf-c-drawer",
-  "modalBox": "pf-c-modal-box",
+  "drawer": "pf-v5-c-drawer",
+  "modalBox": "pf-v5-c-modal-box",
   "modifiers": {
     "finished": "pf-m-finished",
     "expanded": "pf-m-expanded",
@@ -14,30 +12,31 @@ exports.default = {
     "disabled": "pf-m-disabled",
     "noPadding": "pf-m-no-padding"
   },
-  "pageMainWizard": "pf-c-page__main-wizard",
-  "themeDark": "pf-theme-dark",
-  "wizard": "pf-c-wizard",
-  "wizardClose": "pf-c-wizard__close",
-  "wizardDescription": "pf-c-wizard__description",
-  "wizardFooter": "pf-c-wizard__footer",
-  "wizardFooterCancel": "pf-c-wizard__footer-cancel",
-  "wizardHeader": "pf-c-wizard__header",
-  "wizardInnerWrap": "pf-c-wizard__inner-wrap",
-  "wizardMain": "pf-c-wizard__main",
-  "wizardMainBody": "pf-c-wizard__main-body",
-  "wizardNav": "pf-c-wizard__nav",
-  "wizardNavItem": "pf-c-wizard__nav-item",
-  "wizardNavLink": "pf-c-wizard__nav-link",
-  "wizardNavLinkText": "pf-c-wizard__nav-link-text",
-  "wizardNavLinkToggle": "pf-c-wizard__nav-link-toggle",
-  "wizardNavLinkToggleIcon": "pf-c-wizard__nav-link-toggle-icon",
-  "wizardNavList": "pf-c-wizard__nav-list",
-  "wizardOuterWrap": "pf-c-wizard__outer-wrap",
-  "wizardTitle": "pf-c-wizard__title",
-  "wizardToggle": "pf-c-wizard__toggle",
-  "wizardToggleIcon": "pf-c-wizard__toggle-icon",
-  "wizardToggleList": "pf-c-wizard__toggle-list",
-  "wizardToggleListItem": "pf-c-wizard__toggle-list-item",
-  "wizardToggleNum": "pf-c-wizard__toggle-num",
-  "wizardToggleSeparator": "pf-c-wizard__toggle-separator"
+  "pageMainWizard": "pf-v5-c-page__main-wizard",
+  "themeDark": "pf-v5-theme-dark",
+  "wizard": "pf-v5-c-wizard",
+  "wizardClose": "pf-v5-c-wizard__close",
+  "wizardDescription": "pf-v5-c-wizard__description",
+  "wizardFooter": "pf-v5-c-wizard__footer",
+  "wizardFooterCancel": "pf-v5-c-wizard__footer-cancel",
+  "wizardHeader": "pf-v5-c-wizard__header",
+  "wizardInnerWrap": "pf-v5-c-wizard__inner-wrap",
+  "wizardMain": "pf-v5-c-wizard__main",
+  "wizardMainBody": "pf-v5-c-wizard__main-body",
+  "wizardNav": "pf-v5-c-wizard__nav",
+  "wizardNavItem": "pf-v5-c-wizard__nav-item",
+  "wizardNavLink": "pf-v5-c-wizard__nav-link",
+  "wizardNavLinkText": "pf-v5-c-wizard__nav-link-text",
+  "wizardNavLinkToggle": "pf-v5-c-wizard__nav-link-toggle",
+  "wizardNavLinkToggleIcon": "pf-v5-c-wizard__nav-link-toggle-icon",
+  "wizardNavList": "pf-v5-c-wizard__nav-list",
+  "wizardOuterWrap": "pf-v5-c-wizard__outer-wrap",
+  "wizardTitle": "pf-v5-c-wizard__title",
+  "wizardTitleText": "pf-v5-c-wizard__title-text",
+  "wizardToggle": "pf-v5-c-wizard__toggle",
+  "wizardToggleIcon": "pf-v5-c-wizard__toggle-icon",
+  "wizardToggleList": "pf-v5-c-wizard__toggle-list",
+  "wizardToggleListItem": "pf-v5-c-wizard__toggle-list-item",
+  "wizardToggleNum": "pf-v5-c-wizard__toggle-num",
+  "wizardToggleSeparator": "pf-v5-c-wizard__toggle-separator"
 };

package/css/components/Wizard/wizard.mjs

@@ -1,9 +1,7 @@
 import './wizard.css';
 export default {
-  "button": "pf-c-button",
-  "card": "pf-c-card",
-  "drawer": "pf-c-drawer",
-  "modalBox": "pf-c-modal-box",
+  "drawer": "pf-v5-c-drawer",
+  "modalBox": "pf-v5-c-modal-box",
   "modifiers": {
     "finished": "pf-m-finished",
     "expanded": "pf-m-expanded",
@@ -12,30 +10,31 @@ export default {
     "disabled": "pf-m-disabled",
     "noPadding": "pf-m-no-padding"
   },
-  "pageMainWizard": "pf-c-page__main-wizard",
-  "themeDark": "pf-theme-dark",
-  "wizard": "pf-c-wizard",
-  "wizardClose": "pf-c-wizard__close",
-  "wizardDescription": "pf-c-wizard__description",
-  "wizardFooter": "pf-c-wizard__footer",
-  "wizardFooterCancel": "pf-c-wizard__footer-cancel",
-  "wizardHeader": "pf-c-wizard__header",
-  "wizardInnerWrap": "pf-c-wizard__inner-wrap",
-  "wizardMain": "pf-c-wizard__main",
-  "wizardMainBody": "pf-c-wizard__main-body",
-  "wizardNav": "pf-c-wizard__nav",
-  "wizardNavItem": "pf-c-wizard__nav-item",
-  "wizardNavLink": "pf-c-wizard__nav-link",
-  "wizardNavLinkText": "pf-c-wizard__nav-link-text",
-  "wizardNavLinkToggle": "pf-c-wizard__nav-link-toggle",
-  "wizardNavLinkToggleIcon": "pf-c-wizard__nav-link-toggle-icon",
-  "wizardNavList": "pf-c-wizard__nav-list",
-  "wizardOuterWrap": "pf-c-wizard__outer-wrap",
-  "wizardTitle": "pf-c-wizard__title",
-  "wizardToggle": "pf-c-wizard__toggle",
-  "wizardToggleIcon": "pf-c-wizard__toggle-icon",
-  "wizardToggleList": "pf-c-wizard__toggle-list",
-  "wizardToggleListItem": "pf-c-wizard__toggle-list-item",
-  "wizardToggleNum": "pf-c-wizard__toggle-num",
-  "wizardToggleSeparator": "pf-c-wizard__toggle-separator"
+  "pageMainWizard": "pf-v5-c-page__main-wizard",
+  "themeDark": "pf-v5-theme-dark",
+  "wizard": "pf-v5-c-wizard",
+  "wizardClose": "pf-v5-c-wizard__close",
+  "wizardDescription": "pf-v5-c-wizard__description",
+  "wizardFooter": "pf-v5-c-wizard__footer",
+  "wizardFooterCancel": "pf-v5-c-wizard__footer-cancel",
+  "wizardHeader": "pf-v5-c-wizard__header",
+  "wizardInnerWrap": "pf-v5-c-wizard__inner-wrap",
+  "wizardMain": "pf-v5-c-wizard__main",
+  "wizardMainBody": "pf-v5-c-wizard__main-body",
+  "wizardNav": "pf-v5-c-wizard__nav",
+  "wizardNavItem": "pf-v5-c-wizard__nav-item",
+  "wizardNavLink": "pf-v5-c-wizard__nav-link",
+  "wizardNavLinkText": "pf-v5-c-wizard__nav-link-text",
+  "wizardNavLinkToggle": "pf-v5-c-wizard__nav-link-toggle",
+  "wizardNavLinkToggleIcon": "pf-v5-c-wizard__nav-link-toggle-icon",
+  "wizardNavList": "pf-v5-c-wizard__nav-list",
+  "wizardOuterWrap": "pf-v5-c-wizard__outer-wrap",
+  "wizardTitle": "pf-v5-c-wizard__title",
+  "wizardTitleText": "pf-v5-c-wizard__title-text",
+  "wizardToggle": "pf-v5-c-wizard__toggle",
+  "wizardToggleIcon": "pf-v5-c-wizard__toggle-icon",
+  "wizardToggleList": "pf-v5-c-wizard__toggle-list",
+  "wizardToggleListItem": "pf-v5-c-wizard__toggle-list-item",
+  "wizardToggleNum": "pf-v5-c-wizard__toggle-num",
+  "wizardToggleSeparator": "pf-v5-c-wizard__toggle-separator"
 };

package/css/docs/components/Avatar/examples/Avatar.css

@@ -1,3 +1,3 @@
 #ws-core-c-avatar-bordered---dark {
-  background: var(--pf-global--BackgroundColor--dark-100);
+  background: var(--#{$pf-global}--BackgroundColor--dark-100);
 }

package/css/docs/components/Button/examples/Button.css

@@ -1,4 +1,4 @@
-.ws-core-c-button .pf-c-button {
+.ws-core-c-button .pf-v5-c-button {
   margin-right: 6px;
   margin-bottom: 6px;
 }

package/css/docs/components/Button/examples/Button.d.ts

@@ -1,6 +1,6 @@
 import './Button.css';
 declare const _default: {
-  "button": "pf-c-button",
+  "button": "pf-v5-c-button",
   "wsCoreCButton": "ws-core-c-button"
 };
 export default _default;

package/css/docs/components/Button/examples/Button.js

@@ -2,6 +2,6 @@
 exports.__esModule = true;
 require('./Button.css');
 exports.default = {
-  "button": "pf-c-button",
+  "button": "pf-v5-c-button",
   "wsCoreCButton": "ws-core-c-button"
 };

package/css/docs/components/Button/examples/Button.mjs

@@ -1,5 +1,5 @@
 import './Button.css';
 export default {
-  "button": "pf-c-button",
+  "button": "pf-v5-c-button",
   "wsCoreCButton": "ws-core-c-button"
 };

package/css/docs/components/ContextSelector/examples/context-selector.css

@@ -1,3 +1,7 @@
-#ws-core-c-context-selector-basic, #ws-core-c-context-selector-with-footer, #ws-core-c-context-selector-plain-with-text {
+#ws-core-c-context-selector-basic, #ws-core-c-context-selector-plain-with-text {
   min-height: 380px;
 }
+
+#ws-core-c-context-selector-with-footer {
+  min-height: 420px;
+}

package/css/docs/components/DragDrop/examples/DragDrop.css

@@ -1,9 +1,9 @@
-.pf-c-draggable {
+.pf-v5-c-draggable {
   padding: .25em;
 }
 
-.pf-c-draggable.pf-m-dragging {
-  --pf-c-draggable--m-dragging--BackgroundColor: var(--pf-global--BackgroundColor--100);
+.pf-v5-c-draggable.pf-m-dragging {
+  --pf-v5-c-draggable--m-dragging--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
 
   position: absolute;
   top: 23%;

package/css/docs/components/DragDrop/examples/DragDrop.d.ts

@@ -1,6 +1,6 @@
 import './DragDrop.css';
 declare const _default: {
-  "draggable": "pf-c-draggable",
+  "draggable": "pf-v5-c-draggable",
   "modifiers": {
     "dragging": "pf-m-dragging"
   }

package/css/docs/components/DragDrop/examples/DragDrop.js

@@ -2,7 +2,7 @@
 exports.__esModule = true;
 require('./DragDrop.css');
 exports.default = {
-  "draggable": "pf-c-draggable",
+  "draggable": "pf-v5-c-draggable",
   "modifiers": {
     "dragging": "pf-m-dragging"
   }

package/css/docs/components/DragDrop/examples/DragDrop.mjs

@@ -1,6 +1,6 @@
 import './DragDrop.css';
 export default {
-  "draggable": "pf-c-draggable",
+  "draggable": "pf-v5-c-draggable",
   "modifiers": {
     "dragging": "pf-m-dragging"
   }

package/css/docs/components/Dropdown/examples/Dropdown.css

@@ -31,11 +31,14 @@
 }
 
 #ws-core-c-dropdown-with-groups,
-#ws-core-c-dropdown-with-groups-and-dividers-between-groups,
-#ws-core-c-dropdown-with-groups-and-dividers-between-items {
+#ws-core-c-dropdown-with-groups-and-dividers-between-groups {
   min-height: 440px;
 }
 
+#ws-core-c-dropdown-with-groups-and-dividers-between-items {
+  min-height: 460px;
+}
+
 #ws-core-c-dropdown-dropdown-with-image-and-text .ws-preview-html {
   min-height: 19rem;
 }
@@ -48,7 +51,7 @@
   min-height: 210px;
 }
 
-[id^="ws-core-c-dropdown-split-button"] .pf-c-dropdown:not(:last-child) {
+[id^="ws-core-c-dropdown-split-button"] .pf-v5-c-dropdown:not(:last-child) {
   margin-right: 4px;
 }
 

package/css/docs/components/Dropdown/examples/Dropdown.d.ts

@@ -1,6 +1,6 @@
 import './Dropdown.css';
 declare const _default: {
-  "dropdown": "pf-c-dropdown",
+  "dropdown": "pf-v5-c-dropdown",
   "wsPreviewHtml": "ws-preview-html"
 };
 export default _default;

package/css/docs/components/Dropdown/examples/Dropdown.js

@@ -2,6 +2,6 @@
 exports.__esModule = true;
 require('./Dropdown.css');
 exports.default = {
-  "dropdown": "pf-c-dropdown",
+  "dropdown": "pf-v5-c-dropdown",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/Dropdown/examples/Dropdown.mjs

@@ -1,5 +1,5 @@
 import './Dropdown.css';
 export default {
-  "dropdown": "pf-c-dropdown",
+  "dropdown": "pf-v5-c-dropdown",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/FormControl/examples/FormControl.css

@@ -1,5 +1,5 @@
 #ws-core-c-form-control-input #input-custom-icon {
-  --pf-c-form-control--m-icon--BackgroundSizeX: var(--pf-global--icon--FontSize--lg);
-  --pf-c-form-control--m-icon--BackgroundSizeY: var(--pf-global--icon--FontSize--lg);
-  --pf-c-form-control--m-icon--BackgroundUrl: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23a18fff" d="M158.87.15c-16.16-1.52-31.2 8.42-35.33 24.12l-14.81 56.27c187.62 5.49 314.54 130.61 322.48 317l56.94-15.78c15.72-4.36 25.49-19.68 23.62-35.9C490.89 165.08 340.78 17.32 158.87.15zm-58.47 112L.55 491.64a16.21 16.21 0 0 0 20 19.75l379-105.1c-4.27-174.89-123.08-292.14-299.15-294.1zM128 416a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm48-152a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm104 104a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/%3E%3C/svg%3E');
+  --pf-v5-c-form-control--m-icon--BackgroundSizeX: var(--pf-v5-global--icon--FontSize--lg);
+  --pf-v5-c-form-control--m-icon--BackgroundSizeY: var(--pf-v5-global--icon--FontSize--lg);
+  --pf-v5-c-form-control--m-icon--BackgroundUrl: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23a18fff" d="M158.87.15c-16.16-1.52-31.2 8.42-35.33 24.12l-14.81 56.27c187.62 5.49 314.54 130.61 322.48 317l56.94-15.78c15.72-4.36 25.49-19.68 23.62-35.9C490.89 165.08 340.78 17.32 158.87.15zm-58.47 112L.55 491.64a16.21 16.21 0 0 0 20 19.75l379-105.1c-4.27-174.89-123.08-292.14-299.15-294.1zM128 416a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm48-152a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm104 104a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/%3E%3C/svg%3E');
 }

package/css/docs/components/Label/examples/Label.css

@@ -3,7 +3,7 @@
   margin: -4px;
 }
 
-#ws-core-c-label-filled .pf-c-label,
-#ws-core-c-label-overflow .pf-c-label {
+#ws-core-c-label-filled .pf-v5-c-label,
+#ws-core-c-label-overflow .pf-v5-c-label {
   margin: 4px;
 }

package/css/docs/components/Label/examples/Label.d.ts

@@ -1,6 +1,6 @@
 import './Label.css';
 declare const _default: {
-  "label": "pf-c-label",
+  "label": "pf-v5-c-label",
   "wsPreviewHtml": "ws-preview-html"
 };
 export default _default;

package/css/docs/components/Label/examples/Label.js

@@ -2,6 +2,6 @@
 exports.__esModule = true;
 require('./Label.css');
 exports.default = {
-  "label": "pf-c-label",
+  "label": "pf-v5-c-label",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/Label/examples/Label.mjs

@@ -1,5 +1,5 @@
 import './Label.css';
 export default {
-  "label": "pf-c-label",
+  "label": "pf-v5-c-label",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/LogViewer/examples/LogViewer.css

@@ -2,7 +2,7 @@
   position: relative;
 }
 
-#ws-core-e-log-viewer-with-popover-open .pf-c-popover {
+#ws-core-e-log-viewer-with-popover-open .pf-v5-c-popover {
   display: none;
   position: absolute;
   z-index: 9999;
@@ -11,7 +11,7 @@
 }
 
 @media screen and (min-width: 992px) {
-  #ws-core-e-log-viewer-with-popover-open .pf-c-popover {
+  #ws-core-e-log-viewer-with-popover-open .pf-v5-c-popover {
     display: block;
   }
 }

package/css/docs/components/LogViewer/examples/LogViewer.d.ts

@@ -1,6 +1,6 @@
 import './LogViewer.css';
 declare const _default: {
-  "popover": "pf-c-popover",
+  "popover": "pf-v5-c-popover",
   "wsPreviewHtml": "ws-preview-html"
 };
 export default _default;

package/css/docs/components/LogViewer/examples/LogViewer.js

@@ -2,6 +2,6 @@
 exports.__esModule = true;
 require('./LogViewer.css');
 exports.default = {
-  "popover": "pf-c-popover",
+  "popover": "pf-v5-c-popover",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/LogViewer/examples/LogViewer.mjs

@@ -1,5 +1,5 @@
 import './LogViewer.css';
 export default {
-  "popover": "pf-c-popover",
+  "popover": "pf-v5-c-popover",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/ModalBox/examples/ModalBox.css

@@ -1,8 +1,8 @@
 .ws-core-c-modal .ws-preview-html {
- position: relative;
+  position: relative;
 }
 
-.ws-core-c-modal .pf-c-modal-box {
+.ws-core-c-modal .pf-v5-c-modal-box {
   position: absolute;
   top: 50%;
   left: 50%;

package/css/docs/components/ModalBox/examples/ModalBox.d.ts

@@ -1,6 +1,6 @@
 import './ModalBox.css';
 declare const _default: {
-  "modalBox": "pf-c-modal-box",
+  "modalBox": "pf-v5-c-modal-box",
   "wsCoreCModal": "ws-core-c-modal",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/ModalBox/examples/ModalBox.js

@@ -2,7 +2,7 @@
 exports.__esModule = true;
 require('./ModalBox.css');
 exports.default = {
-  "modalBox": "pf-c-modal-box",
+  "modalBox": "pf-v5-c-modal-box",
   "wsCoreCModal": "ws-core-c-modal",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/ModalBox/examples/ModalBox.mjs

@@ -1,6 +1,6 @@
 import './ModalBox.css';
 export default {
-  "modalBox": "pf-c-modal-box",
+  "modalBox": "pf-v5-c-modal-box",
   "wsCoreCModal": "ws-core-c-modal",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/Nav/examples/Navigation.css

@@ -11,17 +11,17 @@
 #ws-core-c-navigation-horizontal-subnav,
 #ws-core-c-navigation-horizontal-subnav-overflow,
 #ws-core-c-navigation-drilldown,
-#ws-core-c-navigation-nav-with-drilldown-menu .pf-c-nav,
+#ws-core-c-navigation-nav-with-drilldown-menu .pf-v5-c-nav,
 #ws-core-c-navigation-level-2-drilldown,
 #ws-core-c-navigation-level-3-drilldown,
-#ws-core-c-navigation-nav-with-flyout .pf-c-nav,
+#ws-core-c-navigation-nav-with-flyout .pf-v5-c-nav,
 #ws-core-c-navigation-grouped-nav-no-titles-no-margin-top {
   padding: 0;
-  background-color: var(--pf-global--BackgroundColor--dark-300);
+  background-color: var(--pf-v5-global--BackgroundColor--dark-300);
 }
 
-#ws-core-c-navigation-expandable-third-level .pf-c-nav {
-  background-color: var(--pf-global--BackgroundColor--dark-300);
+#ws-core-c-navigation-expandable-third-level .pf-v5-c-nav {
+  background-color: var(--pf-v5-global--BackgroundColor--dark-300);
 }
 
 #ws-core-c-navigation-horizontal-in-masthead,
@@ -30,20 +30,20 @@
   grid-template-rows: auto;
 }
 
-#ws-core-c-navigation-horizontal-in-masthead .pf-c-page__header,
-#ws-core-c-navigation-horizontal-in-masthead-overflow .pf-c-page__header {
+#ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header,
+#ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header {
   min-height: 0;
 }
 
 @media screen and (min-width: 1200px) {
-  #ws-core-c-navigation-horizontal-in-masthead .pf-c-page__header,
-  #ws-core-c-navigation-horizontal-in-masthead-overflow .pf-c-page__header {
-    min-height: var(--pf-c-page__header--MinHeight);
+  #ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header,
+  #ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header {
+    min-height: var(--pf-v5-c-page__header--MinHeight);
   }
 }
 
-#ws-core-c-navigation-horizontal-in-masthead .pf-c-page__header-nav,
-#ws-core-c-navigation-horizontal-in-masthead-overflow .pf-c-page__header-nav {
+#ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header-nav,
+#ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header-nav {
   grid-row: 1;
 }
 
@@ -56,7 +56,7 @@
   position: relative;
 }
 
-#ws-core-c-navigation-nav-with-flyout .pf-c-menu.pf-m-flyout.pf-m-nav {
+#ws-core-c-navigation-nav-with-flyout .pf-v5-c-menu.pf-m-flyout.pf-m-nav {
   position: absolute;
   top: 168px;
   left: 256px;

package/css/docs/components/Nav/examples/Navigation.d.ts

@@ -1,13 +1,13 @@
 import './Navigation.css';
 declare const _default: {
-  "menu": "pf-c-menu",
+  "menu": "pf-v5-c-menu",
   "modifiers": {
     "flyout": "pf-m-flyout",
     "nav": "pf-m-nav"
   },
-  "nav": "pf-c-nav",
-  "pageHeader": "pf-c-page__header",
-  "pageHeaderNav": "pf-c-page__header-nav",
+  "nav": "pf-v5-c-nav",
+  "pageHeader": "pf-v5-c-page__header",
+  "pageHeaderNav": "pf-v5-c-page__header-nav",
   "wsPreviewHtml": "ws-preview-html"
 };
 export default _default;

package/css/docs/components/Nav/examples/Navigation.js

@@ -2,13 +2,13 @@
 exports.__esModule = true;
 require('./Navigation.css');
 exports.default = {
-  "menu": "pf-c-menu",
+  "menu": "pf-v5-c-menu",
   "modifiers": {
     "flyout": "pf-m-flyout",
     "nav": "pf-m-nav"
   },
-  "nav": "pf-c-nav",
-  "pageHeader": "pf-c-page__header",
-  "pageHeaderNav": "pf-c-page__header-nav",
+  "nav": "pf-v5-c-nav",
+  "pageHeader": "pf-v5-c-page__header",
+  "pageHeaderNav": "pf-v5-c-page__header-nav",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/Nav/examples/Navigation.mjs

@@ -1,12 +1,12 @@
 import './Navigation.css';
 export default {
-  "menu": "pf-c-menu",
+  "menu": "pf-v5-c-menu",
   "modifiers": {
     "flyout": "pf-m-flyout",
     "nav": "pf-m-nav"
   },
-  "nav": "pf-c-nav",
-  "pageHeader": "pf-c-page__header",
-  "pageHeaderNav": "pf-c-page__header-nav",
+  "nav": "pf-v5-c-nav",
+  "pageHeader": "pf-v5-c-page__header",
+  "pageHeaderNav": "pf-v5-c-page__header-nav",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/NotificationBadge/examples/NotificationBadge.css

@@ -1,3 +1,3 @@
 .ws-core-c-notification-badge {
-  background: var(--pf-global--BackgroundColor--dark-100);
+  background: var(--#{$pf-global}--BackgroundColor--dark-100);
 }