@patternfly/react-core 6.0.0-alpha.35 → 6.0.0-alpha.36

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.34","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.35","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.34","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.35","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.34","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.35","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.35",
+  "version": "6.0.0-alpha.36",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.13",
-    "@patternfly/react-styles": "^6.0.0-alpha.13",
-    "@patternfly/react-tokens": "^6.0.0-alpha.13",
+    "@patternfly/react-icons": "^6.0.0-alpha.14",
+    "@patternfly/react-styles": "^6.0.0-alpha.14",
+    "@patternfly/react-tokens": "^6.0.0-alpha.14",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.90",
+    "@patternfly/patternfly": "6.0.0-alpha.91",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -73,5 +73,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "32771c6b3b9a2019175891ef50196b829eaec291"
+  "gitHead": "ebcdfc928535052f026fd6e88be4170603213921"
 }

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBox.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`AboutModalBox Test 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="id"
-    class="pf-v5-c-about-modal-box"
+    class="pf-v6-c-about-modal-box"
   >
     This is a AboutModalBox
   </div>

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxBrand.test.tsx.snap

@@ -3,11 +3,11 @@
 exports[`test About Modal Brand 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-about-modal-box__brand"
+    class="pf-v6-c-about-modal-box__brand"
   >
     <img
       alt="brand"
-      class="pf-v5-c-about-modal-box__brand-image"
+      class="pf-v6-c-about-modal-box__brand-image"
       src="testimage.."
     />
   </div>

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap

@@ -3,12 +3,12 @@
 exports[`AboutModalBoxCloseButton Test 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-about-modal-box__close"
+    class="pf-v6-c-about-modal-box__close"
   >
     <button
       aria-disabled="false"
       aria-label="Close Dialog"
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v6-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-1"
       data-ouia-component-type="PF5/Button"
       data-ouia-safe="true"
@@ -16,7 +16,7 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="pf-v5-svg"
+        class="pf-v6-svg"
         fill="currentColor"
         height="1em"
         role="img"
@@ -35,12 +35,12 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
 exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-about-modal-box__close"
+    class="pf-v6-c-about-modal-box__close"
   >
     <button
       aria-disabled="false"
       aria-label="Klose Daylok"
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v6-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-3"
       data-ouia-component-type="PF5/Button"
       data-ouia-safe="true"
@@ -48,7 +48,7 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="pf-v5-svg"
+        class="pf-v6-svg"
         fill="currentColor"
         height="1em"
         role="img"
@@ -67,12 +67,12 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
 exports[`AboutModalBoxCloseButton Test onclose 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-about-modal-box__close"
+    class="pf-v6-c-about-modal-box__close"
   >
     <button
       aria-disabled="false"
       aria-label="Close Dialog"
-      class="pf-v5-c-button pf-m-plain"
+      class="pf-v6-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-2"
       data-ouia-component-type="PF5/Button"
       data-ouia-safe="true"
@@ -80,7 +80,7 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="pf-v5-svg"
+        class="pf-v6-svg"
         fill="currentColor"
         height="1em"
         role="img"

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxContent.test.tsx.snap

@@ -3,20 +3,20 @@
 exports[`AboutModalBoxContent Test 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-about-modal-box__content"
+    class="pf-v6-c-about-modal-box__content"
     id="id"
   >
     <div
-      class="pf-v5-c-about-modal-box__body"
+      class="pf-v6-c-about-modal-box__body"
     >
       <div
-        class="pf-v5-c-content"
+        class="pf-v6-c-content"
       >
         This is a AboutModalBoxContent
       </div>
     </div>
     <p
-      class="pf-v5-c-about-modal-box__strapline"
+      class="pf-v6-c-about-modal-box__strapline"
     >
       trademark
     </p>

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHeader.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`AboutModalBoxHeader Test 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-about-modal-box__header"
+    class="pf-v6-c-about-modal-box__header"
   >
     <h1
-      class="pf-v5-c-title pf-m-4xl"
+      class="pf-v6-c-title pf-m-4xl"
       data-ouia-component-id="OUIA-Generated-Title-1"
       data-ouia-component-type="PF5/Title"
       data-ouia-safe="true"

package/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <dl
     aria-label="this is a simple accordion"
-    class="pf-v5-c-accordion"
+    class="pf-v6-c-accordion"
   />
 </DocumentFragment>
 `;

package/src/components/Accordion/__tests__/__snapshots__/AccordionContent.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <h3
     aria-label="this is a simple accordion"
-    class="pf-v5-c-accordion__expandable-content"
+    class="pf-v6-c-accordion__expandable-content"
     id=""
   >
     <div

package/src/components/Accordion/__tests__/__snapshots__/AccordionExpandedContentBody.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-accordion__expandable-content-body"
+    class="pf-v6-c-accordion__expandable-content-body"
   >
     Test
   </div>
@@ -13,7 +13,7 @@ exports[`Matches the snapshot 1`] = `
 exports[`Renders without children 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-accordion__expandable-content-body"
+    class="pf-v6-c-accordion__expandable-content-body"
   />
 </DocumentFragment>
 `;

package/src/components/Accordion/__tests__/__snapshots__/AccordionItem.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-accordion__item"
+    class="pf-v6-c-accordion__item"
   >
     Test
   </div>

package/src/components/Accordion/__tests__/__snapshots__/AccordionToggle.test.tsx.snap

@@ -5,17 +5,17 @@ exports[`Matches the snapshot 1`] = `
   <h3>
     <button
       aria-expanded="false"
-      class="pf-v5-c-accordion__toggle"
+      class="pf-v6-c-accordion__toggle"
       id="accordion-toggle"
       type="button"
     >
       <span
-        class="pf-v5-c-accordion__toggle-text"
+        class="pf-v6-c-accordion__toggle-text"
       >
         Test
       </span>
       <span
-        class="pf-v5-c-accordion__toggle-icon"
+        class="pf-v6-c-accordion__toggle-icon"
       >
         Icon mock
       </span>

package/src/components/ActionList/__tests__/__snapshots__/ActionList.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-action-list"
+    class="pf-v6-c-action-list"
   >
     test
   </div>

package/src/components/ActionList/__tests__/__snapshots__/ActionListGroup.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-action-list__group"
+    class="pf-v6-c-action-list__group"
   >
     test
   </div>

package/src/components/ActionList/__tests__/__snapshots__/ActionListItem.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-action-list__item"
+    class="pf-v6-c-action-list__item"
   >
     test
   </div>

package/src/components/Alert/Alert.tsx

@@ -116,7 +116,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   const ouiaProps = useOUIAProps(Alert.displayName, ouiaId, ouiaSafe, variant);
   const getHeadingContent = (
     <React.Fragment>
-      <span className="pf-v5-screen-reader">{variantLabel}</span>
+      <span className="pf-v6-screen-reader">{variantLabel}</span>
       {title}
     </React.Fragment>
   );

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
   <button
     aria-disabled="false"
     aria-label="Close some label alert: test title"
-    class="pf-v5-c-button pf-m-plain"
+    class="pf-v6-c-button pf-m-plain"
     data-ouia-component-id="OUIA-Generated-Button-plain-1"
     data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
@@ -13,7 +13,7 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="pf-v5-svg"
+      class="pf-v6-svg"
       fill="currentColor"
       height="1em"
       role="img"

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`AlertActionLink should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
-    class="pf-v5-c-button pf-m-link pf-m-inline ''"
+    class="pf-v6-c-button pf-m-link pf-m-inline ''"
     data-ouia-component-id="OUIA-Generated-Button-link-1"
     data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertGroupInline.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`AlertGroupInline should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <ul
-    class="pf-v5-c-alert-group"
+    class="pf-v6-c-alert-group"
     role="list"
   />
 </DocumentFragment>

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertIcon.test.tsx.snap

@@ -3,11 +3,11 @@
 exports[`AlertIcon should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-alert__icon ''"
+    class="pf-v6-c-alert__icon ''"
   >
     <svg
       aria-hidden="true"
-      class="pf-v5-svg"
+      class="pf-v6-svg"
       fill="currentColor"
       height="1em"
       role="img"

package/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Matches snapshot 1`] = `
     aria-atomic="false"
     aria-label="Toast alert label"
     aria-live="polite"
-    class="pf-v5-c-alert pf-m-custom"
+    class="pf-v6-c-alert pf-m-custom"
     data-ouia-component-id="ouia-id"
     data-ouia-component-type="PF5/Alert"
     data-ouia-safe="true"
@@ -20,17 +20,17 @@ exports[`Matches snapshot 1`] = `
       </p>
     </div>
     <h4
-      class="pf-v5-c-alert__title"
+      class="pf-v6-c-alert__title"
     >
       <span
-        class="pf-v5-screen-reader"
+        class="pf-v6-screen-reader"
       >
         Custom alert:
       </span>
       Some title
     </h4>
     <div
-      class="pf-v5-c-alert__description"
+      class="pf-v6-c-alert__description"
     >
       Some toast alert
     </div>

package/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`Matches the snapshot 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="pf-v5-svg"
+      class="pf-v6-svg"
       fill="currentColor"
       height="1em"
       role="img"

package/src/components/Alert/__tests__/__snapshots__/AlertIcon.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-alert__icon"
+    class="pf-v6-c-alert__icon"
   >
     Bell icon mock
   </div>

package/src/components/Alert/__tests__/__snapshots__/AlertToggleExpandButton.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`Matches snapshot 1`] = `
     aria-label="Toggle variantLabel alert: title"
   >
     <span
-      class="pf-v5-c-alert__toggle-icon"
+      class="pf-v6-c-alert__toggle-icon"
     >
       Icon mock
     </span>

package/src/components/Alert/examples/alert.css

@@ -1,3 +1,3 @@
-.ws-react-c-alert .pf-v5-c-alert {
+.ws-react-c-alert .pf-v6-c-alert {
   margin-bottom: 21px;
 }

package/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Matches the snapshot 1`] = `
   <img
     alt="avatar"
     aria-label="Avatar test"
-    class="pf-v5-c-avatar test-class"
+    class="pf-v6-c-avatar test-class"
     src="test.png"
   />
 </DocumentFragment>

package/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-back-to-top pf-m-hidden"
+    class="pf-v6-c-back-to-top pf-m-hidden"
   >
     <button>
       Back to top
@@ -27,7 +27,7 @@ exports[`Matches the snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="pf-v5-svg"
+        class="pf-v6-svg"
         fill="currentColor"
         height="1em"
         role="img"

package/src/components/Backdrop/__tests__/__snapshots__/Backdrop.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-backdrop"
+    class="pf-v6-c-backdrop"
   >
     Backdrop
   </div>

package/src/components/BackgroundImage/__tests__/__snapshots__/BackgroundImage.test.tsx.snap

@@ -3,9 +3,9 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-background-image"
+    class="pf-v6-c-background-image"
     data-testid="test-id"
-    style="--pf-v5-c-background-image--BackgroundImage: url(/image/url.png);"
+    style="--pf-v6-c-background-image--BackgroundImage: url(/image/url.png);"
   />
 </DocumentFragment>
 `;

package/src/components/Badge/Badge.tsx

@@ -29,7 +29,7 @@ export const Badge: React.FunctionComponent<BadgeProps> = ({
     className={css(styles.badge, (isRead ? styles.modifiers.read : styles.modifiers.unread) as any, className)}
   >
     {children}
-    {screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>}
+    {screenReaderText && <span className="pf-v6-screen-reader">{screenReaderText}</span>}
     {isToggle && (
       <span className={css(styles.badgeToggleIcon)}>
         <CaretDownIcon />

package/src/components/Badge/__tests__/Badge.test.tsx

@@ -41,9 +41,9 @@ test('Renders with toggle styles and icon when isToggle prop is true', () => {
   expect(screen.getByText('Test').lastChild).toHaveClass(styles.badgeToggleIcon);
 });
 
-test('Does not render pf-v5-screen-reader class by default', () => {
+test('Does not render pf-v6-screen-reader class by default', () => {
   render(<Badge>Test</Badge>);
-  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-screen-reader"></span>');
+  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v6-screen-reader"></span>');
 });
 
 test('Renders screenReaderText passed via prop', () => {

package/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v5-c-badge pf-m-unread"
+    class="pf-v6-c-badge pf-m-unread"
   >
     Test
   </span>

package/src/components/Badge/examples/Badge.css

@@ -1,6 +1,6 @@
-#ws-react-c-badge-read .pf-v5-c-badge,
-#ws-react-c-badge-unread .pf-v5-c-badge,
-#ws-react-c-badge-badge-as-toggle .pf-v5-c-badge {
+#ws-react-c-badge-read .pf-v6-c-badge,
+#ws-react-c-badge-unread .pf-v6-c-badge,
+#ws-react-c-badge-badge-as-toggle .pf-v6-c-badge {
     margin-inline-end: var(--pf-t--global--spacer--xs); 
     margin-block-end: var(--pf-t--global--spacer--xs); 
 }

package/src/components/Banner/Banner.tsx

@@ -56,7 +56,7 @@ export const Banner: React.FunctionComponent<StatusBanner | NonStatusBanner> = (
       className={css(styles.banner, getStatusOrColorModifier(), isSticky && styles.modifiers.sticky, className)}
       {...props}
     >
-      {screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>}
+      {screenReaderText && <span className="pf-v6-screen-reader">{screenReaderText}</span>}
       {children}
     </div>
   );

package/src/components/Banner/__tests__/Banner.test.tsx

@@ -97,9 +97,9 @@ test('Renders with class name pf-m-custom when "custom" is passed to status prop
   expect(screen.getByText('Test')).toHaveClass('pf-m-custom');
 });
 
-test('Does not render pf-v5-screen-reader class by default', () => {
+test('Does not render pf-v6-screen-reader class by default', () => {
   render(<Banner>Test</Banner>);
-  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-screen-reader"></span>');
+  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v6-screen-reader"></span>');
 });
 
 test('Renders screenReaderText passed via prop', () => {

package/src/components/Banner/__tests__/__snapshots__/Banner.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-banner"
+    class="pf-v6-c-banner"
   >
     Test
   </div>

package/src/components/Brand/Brand.tsx

@@ -60,7 +60,7 @@ export const Brand: React.FunctionComponent<BrandProps> = ({
   }
 
   return (
-    /** the brand component currently contains no styling the 'pf-v5-c-brand' string will be used for the className */
+    /** the brand component currently contains no styling the 'pf-v6-c-brand' string will be used for the className */
     children !== undefined ? (
       <picture
         className={css(styles.brand, styles.modifiers.picture, className)}

package/src/components/Brand/__tests__/Brand.test.tsx

@@ -106,6 +106,6 @@ test('width styles are present when passed', () => {
   );
   expect(screen.getByAltText('brand with widths')).toHaveAttribute(
     'style',
-    '--pf-v5-c-brand--Width: 100px; --pf-v5-c-brand--Width-on-sm: 25px; --pf-v5-c-brand--Width-on-md: 50px; --pf-v5-c-brand--Width-on-lg: 100px; --pf-v5-c-brand--Width-on-xl: 125px; --pf-v5-c-brand--Width-on-2xl: 150px;'
+    '--pf-v6-c-brand--Width: 100px; --pf-v6-c-brand--Width-on-sm: 25px; --pf-v6-c-brand--Width-on-md: 50px; --pf-v6-c-brand--Width-on-lg: 100px; --pf-v6-c-brand--Width-on-xl: 125px; --pf-v6-c-brand--Width-on-2xl: 150px;'
   );
 });

package/src/components/Brand/examples/Brand.css

@@ -1,12 +1,12 @@
 .show-dark,
-:where(.pf-v5-theme-dark) .show-light {
+:where(.pf-v6-theme-dark) .show-light {
   display: none;
 }
 
-:where(.pf-v5-theme-dark) .show-dark {
+:where(.pf-v6-theme-dark) .show-dark {
   display: revert;
 }
 
-:where(.pf-v5-theme-dark) .show-dark .pf-m-picture {
+:where(.pf-v6-theme-dark) .show-dark .pf-m-picture {
   display: inline-flex;
 }