@patternfly/quickstarts 6.3.0-prerelease.2 → 6.3.0-prerelease.4

package/dist/quickstarts.css

@@ -207,6 +207,67 @@
   font-size: var(--pf-t--global--font--size--body--default);
   color: var(--pf-t--global--text--color--subtle);
   font-weight: var(--pf-t--global--font--weight--body);
+}
+
+@keyframes pfext-spotlight-expand {
+  0% {
+    outline-offset: -4px;
+    outline-width: 4px;
+    opacity: 1;
+  }
+  100% {
+    outline-offset: 21px;
+    outline-width: 12px;
+    opacity: 0;
+  }
+}
+@keyframes pfext-spotlight-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes pfext-spotlight-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.pfext-spotlight {
+  pointer-events: none;
+  position: absolute;
+}
+.pfext-spotlight__with-backdrop {
+  mix-blend-mode: hard-light;
+}
+.pfext-spotlight__element-highlight-noanimate {
+  border: var(--pf-t--global--border--width--strong) solid var(--pf-t--global--border--color--brand--default);
+  background-color: var(--pf-t--color--gray--40);
+  z-index: 9999;
+}
+.pfext-spotlight__element-highlight-animate {
+  pointer-events: none;
+  position: absolute;
+  box-shadow: inset 0px 0px 0px 4px var(--pf-t--global--color--brand--default);
+  opacity: 0;
+  animation: 0.4s pfext-spotlight-fade-in 0s ease-in-out, 5s pfext-spotlight-fade-out 12.8s ease-in-out;
+  animation-fill-mode: forwards;
+}
+.pfext-spotlight__element-highlight-animate::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  animation: 1.2s pfext-spotlight-expand 1.6s ease-out;
+  animation-fill-mode: forwards;
+  outline: 4px solid var(--pf-t--global--color--brand--default);
+  outline-offset: -4px;
 }.pf-v6-c-clipboard-copy {
   --pf-v6-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
   --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;

package/dist/quickstarts.min.css

@@ -1 +1 @@
-.pfext-quick-start-panel{--pf-v6-c-drawer__panel--PaddingBlockStart:0}.pfext-popover__base ul{list-style-type:var(--pf-t--global--list-style)}.pfext-markdown-view .h1,.pfext-markdown-view .h2,.pfext-markdown-view .h3,.pfext-markdown-view .h4,.pfext-markdown-view .h5,.pfext-markdown-view .h6,.pfext-markdown-view h1,.pfext-markdown-view h2,.pfext-markdown-view h3,.pfext-markdown-view h4,.pfext-markdown-view h5,.pfext-markdown-view h6{font-family:var(--pf-t--global--font--family--heading);font-weight:var(--pf-t--global--font--weight--heading);line-height:1.1;color:inherit}.pfext-markdown-view .h1,.pfext-markdown-view .h2,.pfext-markdown-view .h3,.pfext-markdown-view h1,.pfext-markdown-view h2,.pfext-markdown-view h3{margin-top:23px;margin-bottom:11.5px}.pfext-markdown-view .h4,.pfext-markdown-view .h5,.pfext-markdown-view .h6,.pfext-markdown-view h4,.pfext-markdown-view h5,.pfext-markdown-view h6{margin-top:11.5px;margin-bottom:11.5px}.pfext-markdown-view .h1,.pfext-markdown-view h1{font-size:var(--pf-t--global--font--size--heading--h1)}.pfext-markdown-view .h2,.pfext-markdown-view h2{font-size:var(--pf-t--global--font--size--heading--h2)}.pfext-markdown-view .h3,.pfext-markdown-view h3{font-size:var(--pf-t--global--font--size--heading--h3)}.pfext-markdown-view .h4,.pfext-markdown-view h4{font-size:var(--pf-t--global--font--size--heading--h4)}.pfext-markdown-view .h5,.pfext-markdown-view h5{font-size:var(--pf-t--global--font--size--heading--h5)}.pfext-markdown-view .h6,.pfext-markdown-view h6{font-size:var(--pf-t--global--font--size--heading--h6)}.pfext-markdown-view p{margin:0 0 11.5px}.pfext-markdown-view ol,.pfext-markdown-view ul{margin-top:0;margin-bottom:11.5px}.pfext-markdown-view ol ol,.pfext-markdown-view ol ul,.pfext-markdown-view ul ol,.pfext-markdown-view ul ul{margin-bottom:0}.pfext-markdown-view dl{margin-top:0;margin-bottom:23px}.pfext-markdown-view dd,.pfext-markdown-view dt{line-height:1.66666667}.pfext-markdown-view dt{font-weight:700}.pfext-markdown-view dd{margin-left:0}.pfext-markdown-view blockquote{padding:11.5px 23px;margin:0 0 23px;font-size:17.5px;border-left:5px solid #f1f1f1}.pfext-markdown-view blockquote ol:last-child,.pfext-markdown-view blockquote p:last-child,.pfext-markdown-view blockquote ul:last-child{margin-bottom:0}.pfext-markdown-view code,.pfext-markdown-view pre{font-family:Menlo,Monaco,Consolas,monospace}.pfext-markdown-view code{padding:2px 4px;font-size:90%;color:#004368;background-color:#def3ff;border-radius:1px}.pfext-markdown-view pre{display:block;padding:11px;margin:0 0 11.5px;font-size:13px;line-height:1.66666667;color:#363636;word-break:break-all;word-wrap:break-word;background-color:#fafafa;border:1px solid #ccc;border-radius:1px}.pfext-markdown-view pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.pfext-markdown-view table{background-color:transparent}.pfext-markdown-view table col[class*=col-]{position:static;display:table-column;float:none}.pfext-markdown-view table td[class*=col-],.pfext-markdown-view table th[class*=col-]{position:static;display:table-cell;float:none}.pfext-markdown-view caption{padding-top:10px;padding-bottom:10px;color:#9c9c9c;text-align:left}.pfext-markdown-view th{text-align:left}.pfext-quick-start-panel-content{background-color:var(--pf-t--global--color--brand--default);color:var(--pf-t--global--text--color--inverse);padding:var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--lg)}.pfext-quick-start-panel-content__body{display:flex;flex-direction:column}.pfext-quick-start-panel-content span.pf-v6-c-button__icon{color:var(--pf-t--global--text--color--inverse)}.pf-v6-theme-dark .pfext-catalog-item-icon__img{filter:brightness(1.5) invert(1) hue-rotate(180deg) saturate(4)}.pfext-catalog-item .pf-v6-c-card__header-main .pf-v6-c-icon__content{display:contents}.pfext-catalog-item.pf-v6-c-card.pf-m-clickable::before,.pfext-catalog-item.pf-v6-c-card.pf-m-selectable::before{border:var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth)}.pfext-quick-start-task{flex:1 1 0;overflow:auto}.pfext-quick-start-task .pf-v6-c-accordion,.pfext-quick-start-task .pf-v6-c-alert,.pfext-quick-start-task .pf-v6-c-code-block{margin-block-end:var(--pf-v6-c-content--MarginBlockEnd)}.pfext-quick-start-task .pf-v6-c-wizard{height:initial}.pfext-quick-start-footer{padding-top:var(--pf-t--global--spacer--md)}.pfext-quick-start-task-header button.pf-v6-c-wizard__nav-link{margin-bottom:var(--pf-t--global--spacer--md)}.pfext-quick-start-task-header button.pf-v6-c-wizard__nav-link.pf-m-current{--pf-v6-c-wizard__nav-link-main--BackgroundColor:transparent}.pfext-quick-start-task-header button.pf-v6-c-wizard__nav-link::before{background-color:var(--pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor);color:var(--pf-v6-c-wizard__nav-link--m-current--before--Color);min-width:var(--pf-v6-c-wizard__nav-link--before--Width)}.pfext-quick-start-task-header__title{font-family:var(--pf-t--global--font--family--body);font-weight:var(---pf-t--global--font--weight--body--bold);font-size:var(--pf-t--global--font--size--body--lg)}.pfext-quick-start-task-header__subtitle{font-size:var(--pf-t--global--font--size--body--default);color:var(--pf-t--global--text--color--subtle);font-weight:var(--pf-t--global--font--weight--body)}.pfext-quick-start-task-header__tryagain{display:block;font-size:var(--pf-t--global--font--size--body--default);color:var(--pf-t--global--text--color--subtle);font-weight:var(--pf-t--global--font--weight--body)}.pf-v6-c-clipboard-copy{--pf-v6-c-clipboard-copy__toggle-icon--Transition:.2s ease-in 0s;--pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate:90deg;--pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--BackgroundColor:var(--pf-t--global--background--color--primary--default);--pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderColor:var(--pf-t--global--border--color--default);--pf-v6-c-clipboard-copy__expandable-content--BorderRadius:var(--pf-t--global--border--radius--small);--pf-v6-c-clipboard-copy__expandable-content--OutlineOffset:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy__group--Gap:var(--pf-t--global--spacer--gap--control-to-control--default);--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy--m-inline--BackgroundColor:var(--pf-t--global--background--color--secondary--default);--pf-v6-c-clipboard-copy__actions--Gap:var(--pf-t--global--spacer--gap--action-to-action--plain);--pf-v6-c-clipboard-copy__actions--MarginInlineStart:var(--pf-t--global--spacer--gap--text-to-element--compact);--pf-v6-c-clipboard-copy__actions-item--button--Color:var(--pf-t--global--icon--color--subtle);--pf-v6-c-clipboard-copy__actions-item--button--hover--Color:var(--pf-t--global--icon--color--regular);--pf-v6-c-clipboard-copy__text--m-code--FontFamily:var(--pf-t--global--font--family--mono);--pf-v6-c-clipboard-copy__text--m-code--FontSize:var(--pf-t--global--font--size--body--default)}.pf-v6-c-clipboard-copy.pf-m-inline{display:inline;padding-inline-start:var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart);padding-inline-end:var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd);white-space:nowrap;background-color:var(--pf-v6-c-clipboard-copy--m-inline--BackgroundColor)}.pf-v6-c-clipboard-copy.pf-m-inline.pf-m-block{display:block}.pf-v6-c-clipboard-copy__text{word-break:break-word;white-space:normal}.pf-v6-c-clipboard-copy__actions{display:inline-flex;gap:var(--pf-v6-c-clipboard-copy__actions--Gap);margin-inline-start:var(--pf-v6-c-clipboard-copy__actions--MarginInlineStart)}.pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button.pf-m-plain{--pf-v6-c-button--m-plain__icon--Color:var(--pf-v6-c-clipboard-copy__actions-item--button--Color);--pf-v6-c-button--m-plain--hover__icon--Color:var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color)}.pf-v6-c-code-block{--pf-v6-c-code-block--BackgroundColor:var(--pf-t--global--background--color--secondary--default);--pf-v6-c-code-block--BorderRadius:var(--pf-t--global--border--radius--medium);--pf-v6-c-code-block__header--BorderBlockEndWidth:var(--pf-t--global--border--width--divider--default);--pf-v6-c-code-block__header--BorderBlockEndColor:var(--pf-t--global--border--color--default);--pf-v6-c-code-block__header--PaddingBlockStart:var(--pf-t--global--spacer--xs);--pf-v6-c-code-block__header--PaddingBlockEnd:var(--pf-t--global--spacer--xs);--pf-v6-c-code-block__header--PaddingInlineEnd:var(--pf-t--global--spacer--sm);--pf-v6-c-code-block__header--PaddingInlineStart:var(--pf-t--global--spacer--sm);--pf-v6-c-code-block__content--PaddingBlockStart:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__content--PaddingInlineEnd:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__content--PaddingBlockEnd:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__content--PaddingInlineStart:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__pre--FontFamily:var(--pf-t--global--font--family--mono);--pf-v6-c-code-block__pre--FontSize:var(--pf-t--global--font--size--xs)}.pf-v6-c-code-block{background-color:var(--pf-v6-c-code-block--BackgroundColor);border-radius:var(--pf-v6-c-code-block--BorderRadius)}.pf-v6-c-code-block__header{display:flex;padding-block-start:var(--pf-v6-c-code-block__header--PaddingBlockStart);padding-block-end:var(--pf-v6-c-code-block__header--PaddingBlockEnd);padding-inline-start:var(--pf-v6-c-code-block__header--PaddingInlineStart);padding-inline-end:var(--pf-v6-c-code-block__header--PaddingInlineEnd);border-block-end:var(--pf-v6-c-code-block__header--BorderBlockEndWidth) solid var(--pf-v6-c-code-block__header--BorderBlockEndColor)}.pf-v6-c-code-block__actions{display:flex;margin-inline-start:auto}.pf-v6-c-code-block__content{padding-block-start:var(--pf-v6-c-code-block__content--PaddingBlockStart);padding-block-end:var(--pf-v6-c-code-block__content--PaddingBlockEnd);padding-inline-start:var(--pf-v6-c-code-block__content--PaddingInlineStart);padding-inline-end:var(--pf-v6-c-code-block__content--PaddingInlineEnd)}.pf-v6-c-code-block__pre{font-family:var(--pf-v6-c-code-block__pre--FontFamily);font-size:var(--pf-v6-c-code-block__pre--FontSize);overflow-wrap:break-word;white-space:pre-wrap}.pf-v6-c-code-block__code{font-family:var(--pf-v6-c-code-block__code--FontFamily,inherit)}
+.pfext-quick-start-panel{--pf-v6-c-drawer__panel--PaddingBlockStart:0}.pfext-popover__base ul{list-style-type:var(--pf-t--global--list-style)}.pfext-markdown-view .h1,.pfext-markdown-view .h2,.pfext-markdown-view .h3,.pfext-markdown-view .h4,.pfext-markdown-view .h5,.pfext-markdown-view .h6,.pfext-markdown-view h1,.pfext-markdown-view h2,.pfext-markdown-view h3,.pfext-markdown-view h4,.pfext-markdown-view h5,.pfext-markdown-view h6{font-family:var(--pf-t--global--font--family--heading);font-weight:var(--pf-t--global--font--weight--heading);line-height:1.1;color:inherit}.pfext-markdown-view .h1,.pfext-markdown-view .h2,.pfext-markdown-view .h3,.pfext-markdown-view h1,.pfext-markdown-view h2,.pfext-markdown-view h3{margin-top:23px;margin-bottom:11.5px}.pfext-markdown-view .h4,.pfext-markdown-view .h5,.pfext-markdown-view .h6,.pfext-markdown-view h4,.pfext-markdown-view h5,.pfext-markdown-view h6{margin-top:11.5px;margin-bottom:11.5px}.pfext-markdown-view .h1,.pfext-markdown-view h1{font-size:var(--pf-t--global--font--size--heading--h1)}.pfext-markdown-view .h2,.pfext-markdown-view h2{font-size:var(--pf-t--global--font--size--heading--h2)}.pfext-markdown-view .h3,.pfext-markdown-view h3{font-size:var(--pf-t--global--font--size--heading--h3)}.pfext-markdown-view .h4,.pfext-markdown-view h4{font-size:var(--pf-t--global--font--size--heading--h4)}.pfext-markdown-view .h5,.pfext-markdown-view h5{font-size:var(--pf-t--global--font--size--heading--h5)}.pfext-markdown-view .h6,.pfext-markdown-view h6{font-size:var(--pf-t--global--font--size--heading--h6)}.pfext-markdown-view p{margin:0 0 11.5px}.pfext-markdown-view ol,.pfext-markdown-view ul{margin-top:0;margin-bottom:11.5px}.pfext-markdown-view ol ol,.pfext-markdown-view ol ul,.pfext-markdown-view ul ol,.pfext-markdown-view ul ul{margin-bottom:0}.pfext-markdown-view dl{margin-top:0;margin-bottom:23px}.pfext-markdown-view dd,.pfext-markdown-view dt{line-height:1.66666667}.pfext-markdown-view dt{font-weight:700}.pfext-markdown-view dd{margin-left:0}.pfext-markdown-view blockquote{padding:11.5px 23px;margin:0 0 23px;font-size:17.5px;border-left:5px solid #f1f1f1}.pfext-markdown-view blockquote ol:last-child,.pfext-markdown-view blockquote p:last-child,.pfext-markdown-view blockquote ul:last-child{margin-bottom:0}.pfext-markdown-view code,.pfext-markdown-view pre{font-family:Menlo,Monaco,Consolas,monospace}.pfext-markdown-view code{padding:2px 4px;font-size:90%;color:#004368;background-color:#def3ff;border-radius:1px}.pfext-markdown-view pre{display:block;padding:11px;margin:0 0 11.5px;font-size:13px;line-height:1.66666667;color:#363636;word-break:break-all;word-wrap:break-word;background-color:#fafafa;border:1px solid #ccc;border-radius:1px}.pfext-markdown-view pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.pfext-markdown-view table{background-color:transparent}.pfext-markdown-view table col[class*=col-]{position:static;display:table-column;float:none}.pfext-markdown-view table td[class*=col-],.pfext-markdown-view table th[class*=col-]{position:static;display:table-cell;float:none}.pfext-markdown-view caption{padding-top:10px;padding-bottom:10px;color:#9c9c9c;text-align:left}.pfext-markdown-view th{text-align:left}.pfext-quick-start-panel-content{background-color:var(--pf-t--global--color--brand--default);color:var(--pf-t--global--text--color--inverse);padding:var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--lg)}.pfext-quick-start-panel-content__body{display:flex;flex-direction:column}.pfext-quick-start-panel-content span.pf-v6-c-button__icon{color:var(--pf-t--global--text--color--inverse)}.pf-v6-theme-dark .pfext-catalog-item-icon__img{filter:brightness(1.5) invert(1) hue-rotate(180deg) saturate(4)}.pfext-catalog-item .pf-v6-c-card__header-main .pf-v6-c-icon__content{display:contents}.pfext-catalog-item.pf-v6-c-card.pf-m-clickable::before,.pfext-catalog-item.pf-v6-c-card.pf-m-selectable::before{border:var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth)}.pfext-quick-start-task{flex:1 1 0;overflow:auto}.pfext-quick-start-task .pf-v6-c-accordion,.pfext-quick-start-task .pf-v6-c-alert,.pfext-quick-start-task .pf-v6-c-code-block{margin-block-end:var(--pf-v6-c-content--MarginBlockEnd)}.pfext-quick-start-task .pf-v6-c-wizard{height:initial}.pfext-quick-start-footer{padding-top:var(--pf-t--global--spacer--md)}.pfext-quick-start-task-header button.pf-v6-c-wizard__nav-link{margin-bottom:var(--pf-t--global--spacer--md)}.pfext-quick-start-task-header button.pf-v6-c-wizard__nav-link.pf-m-current{--pf-v6-c-wizard__nav-link-main--BackgroundColor:transparent}.pfext-quick-start-task-header button.pf-v6-c-wizard__nav-link::before{background-color:var(--pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor);color:var(--pf-v6-c-wizard__nav-link--m-current--before--Color);min-width:var(--pf-v6-c-wizard__nav-link--before--Width)}.pfext-quick-start-task-header__title{font-family:var(--pf-t--global--font--family--body);font-weight:var(---pf-t--global--font--weight--body--bold);font-size:var(--pf-t--global--font--size--body--lg)}.pfext-quick-start-task-header__subtitle{font-size:var(--pf-t--global--font--size--body--default);color:var(--pf-t--global--text--color--subtle);font-weight:var(--pf-t--global--font--weight--body)}.pfext-quick-start-task-header__tryagain{display:block;font-size:var(--pf-t--global--font--size--body--default);color:var(--pf-t--global--text--color--subtle);font-weight:var(--pf-t--global--font--weight--body)}@keyframes pfext-spotlight-expand{0%{outline-offset:-4px;outline-width:4px;opacity:1}100%{outline-offset:21px;outline-width:12px;opacity:0}}@keyframes pfext-spotlight-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes pfext-spotlight-fade-out{0%{opacity:1}100%{opacity:0}}.pfext-spotlight{pointer-events:none;position:absolute}.pfext-spotlight__with-backdrop{mix-blend-mode:hard-light}.pfext-spotlight__element-highlight-noanimate{border:var(--pf-t--global--border--width--strong) solid var(--pf-t--global--border--color--brand--default);background-color:var(--pf-t--color--gray--40);z-index:9999}.pfext-spotlight__element-highlight-animate{pointer-events:none;position:absolute;box-shadow:inset 0 0 0 4px var(--pf-t--global--color--brand--default);opacity:0;animation:.4s pfext-spotlight-fade-in 0s ease-in-out,5s pfext-spotlight-fade-out 12.8s ease-in-out;animation-fill-mode:forwards}.pfext-spotlight__element-highlight-animate::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;animation:1.2s pfext-spotlight-expand 1.6s ease-out;animation-fill-mode:forwards;outline:4px solid var(--pf-t--global--color--brand--default);outline-offset:-4px}.pf-v6-c-clipboard-copy{--pf-v6-c-clipboard-copy__toggle-icon--Transition:.2s ease-in 0s;--pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate:90deg;--pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--BackgroundColor:var(--pf-t--global--background--color--primary--default);--pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderColor:var(--pf-t--global--border--color--default);--pf-v6-c-clipboard-copy__expandable-content--BorderRadius:var(--pf-t--global--border--radius--small);--pf-v6-c-clipboard-copy__expandable-content--OutlineOffset:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy__group--Gap:var(--pf-t--global--spacer--gap--control-to-control--default);--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy--m-inline--BackgroundColor:var(--pf-t--global--background--color--secondary--default);--pf-v6-c-clipboard-copy__actions--Gap:var(--pf-t--global--spacer--gap--action-to-action--plain);--pf-v6-c-clipboard-copy__actions--MarginInlineStart:var(--pf-t--global--spacer--gap--text-to-element--compact);--pf-v6-c-clipboard-copy__actions-item--button--Color:var(--pf-t--global--icon--color--subtle);--pf-v6-c-clipboard-copy__actions-item--button--hover--Color:var(--pf-t--global--icon--color--regular);--pf-v6-c-clipboard-copy__text--m-code--FontFamily:var(--pf-t--global--font--family--mono);--pf-v6-c-clipboard-copy__text--m-code--FontSize:var(--pf-t--global--font--size--body--default)}.pf-v6-c-clipboard-copy.pf-m-inline{display:inline;padding-inline-start:var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart);padding-inline-end:var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd);white-space:nowrap;background-color:var(--pf-v6-c-clipboard-copy--m-inline--BackgroundColor)}.pf-v6-c-clipboard-copy.pf-m-inline.pf-m-block{display:block}.pf-v6-c-clipboard-copy__text{word-break:break-word;white-space:normal}.pf-v6-c-clipboard-copy__actions{display:inline-flex;gap:var(--pf-v6-c-clipboard-copy__actions--Gap);margin-inline-start:var(--pf-v6-c-clipboard-copy__actions--MarginInlineStart)}.pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button.pf-m-plain{--pf-v6-c-button--m-plain__icon--Color:var(--pf-v6-c-clipboard-copy__actions-item--button--Color);--pf-v6-c-button--m-plain--hover__icon--Color:var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color)}.pf-v6-c-code-block{--pf-v6-c-code-block--BackgroundColor:var(--pf-t--global--background--color--secondary--default);--pf-v6-c-code-block--BorderRadius:var(--pf-t--global--border--radius--medium);--pf-v6-c-code-block__header--BorderBlockEndWidth:var(--pf-t--global--border--width--divider--default);--pf-v6-c-code-block__header--BorderBlockEndColor:var(--pf-t--global--border--color--default);--pf-v6-c-code-block__header--PaddingBlockStart:var(--pf-t--global--spacer--xs);--pf-v6-c-code-block__header--PaddingBlockEnd:var(--pf-t--global--spacer--xs);--pf-v6-c-code-block__header--PaddingInlineEnd:var(--pf-t--global--spacer--sm);--pf-v6-c-code-block__header--PaddingInlineStart:var(--pf-t--global--spacer--sm);--pf-v6-c-code-block__content--PaddingBlockStart:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__content--PaddingInlineEnd:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__content--PaddingBlockEnd:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__content--PaddingInlineStart:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__pre--FontFamily:var(--pf-t--global--font--family--mono);--pf-v6-c-code-block__pre--FontSize:var(--pf-t--global--font--size--xs)}.pf-v6-c-code-block{background-color:var(--pf-v6-c-code-block--BackgroundColor);border-radius:var(--pf-v6-c-code-block--BorderRadius)}.pf-v6-c-code-block__header{display:flex;padding-block-start:var(--pf-v6-c-code-block__header--PaddingBlockStart);padding-block-end:var(--pf-v6-c-code-block__header--PaddingBlockEnd);padding-inline-start:var(--pf-v6-c-code-block__header--PaddingInlineStart);padding-inline-end:var(--pf-v6-c-code-block__header--PaddingInlineEnd);border-block-end:var(--pf-v6-c-code-block__header--BorderBlockEndWidth) solid var(--pf-v6-c-code-block__header--BorderBlockEndColor)}.pf-v6-c-code-block__actions{display:flex;margin-inline-start:auto}.pf-v6-c-code-block__content{padding-block-start:var(--pf-v6-c-code-block__content--PaddingBlockStart);padding-block-end:var(--pf-v6-c-code-block__content--PaddingBlockEnd);padding-inline-start:var(--pf-v6-c-code-block__content--PaddingInlineStart);padding-inline-end:var(--pf-v6-c-code-block__content--PaddingInlineEnd)}.pf-v6-c-code-block__pre{font-family:var(--pf-v6-c-code-block__pre--FontFamily);font-size:var(--pf-v6-c-code-block__pre--FontSize);overflow-wrap:break-word;white-space:pre-wrap}.pf-v6-c-code-block__code{font-family:var(--pf-v6-c-code-block__code--FontFamily,inherit)}

package/dist/utils/help-topic-context.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { HelpTopic } from './help-topic-types';
 export interface HelpTopicContextValues {
     helpTopics?: HelpTopic[];
@@ -19,5 +19,5 @@ export declare const HelpTopicContextDefaults: {
     setFilteredHelpTopics: () => void;
     loading: boolean;
 };
-export declare const HelpTopicContext: React.Context<HelpTopicContextValues>;
+export declare const HelpTopicContext: import("react").Context<HelpTopicContextValues>;
 export declare const useValuesForHelpTopicContext: (value?: HelpTopicContextValues) => HelpTopicContextValues;

package/dist/utils/quick-start-context.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { AllQuickStartStates, QuickStart, QuickStartState, QuickStartStatus, QuickStartTaskStatus } from './quick-start-types';
 export interface FooterProps {
     show?: boolean;
@@ -74,10 +74,10 @@ export declare const QuickStartContextDefaults: {
     alwaysShowTaskReview: boolean;
     focusOnQuickStart: boolean;
 };
-export declare const QuickStartContext: React.Context<QuickStartContextValues>;
+export declare const QuickStartContext: import("react").Context<QuickStartContextValues>;
 export declare const getResource: (resource: string, options: any, resourceBundle: any, lng: string) => any;
 export declare const useValuesForQuickStartContext: (value?: QuickStartContextValues) => QuickStartContextValues;
-export declare const QuickStartContextProvider: React.FC<{
+export declare const QuickStartContextProvider: FC<{
     children: React.ReactNode;
     value: QuickStartContextValues;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/quickstarts",
-  "version": "6.3.0-prerelease.2",
+  "version": "6.3.0-prerelease.4",
   "description": "PatternFly quick starts",
   "files": [
     "src",
@@ -46,8 +46,8 @@
   },
   "peerDependencies": {
     "@patternfly/react-core": "^6.0.0",
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18",
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19",
     "marked": "^15.0.6"
   },
   "dependencies": {
@@ -88,7 +88,6 @@
     "react-axe": "^3.5.4",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^18.2.0",
-    "react-monaco-editor": "0.51.0",
     "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.2",
     "rollup": "^2.79.2",

package/src/ConsoleInternal/components/markdown-view.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { css } from '@patternfly/react-styles';
 import { marked } from 'marked';
 import { useForceRender } from '@console/shared';
@@ -121,7 +121,7 @@ type InnerSyncMarkdownProps = Pick<SyncMarkdownProps, 'renderExtension' | 'exact
   className?: string;
 };
 
-export const SyncMarkdownView: React.FC<SyncMarkdownProps> = ({
+export const SyncMarkdownView: FC<SyncMarkdownProps> = ({
   content,
   emptyMsg,
   extensions,
@@ -130,10 +130,10 @@ export const SyncMarkdownView: React.FC<SyncMarkdownProps> = ({
   inline,
   className,
 }) => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  const [markup, setMarkup] = React.useState<string>('');
+  const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
+  const [markup, setMarkup] = useState<string>('');
 
-  React.useEffect(() => {
+  useEffect(() => {
     async function getMd() {
       const md = await markdownConvert(
         content || emptyMsg || getResource('Not available'),
@@ -176,8 +176,8 @@ const RenderExtension: React.FC<RenderExtensionProps> = ({
   docContext,
 }) => {
   const forceRender = useForceRender();
-  const markupRef = React.useRef<string>(null);
-  const shouldRenderExtension = React.useCallback(() => {
+  const markupRef = useRef<string>(null);
+  const shouldRenderExtension = useCallback(() => {
     if (markupRef.current === markup) {
       return true;
     }
@@ -190,7 +190,7 @@ const RenderExtension: React.FC<RenderExtensionProps> = ({
    * which causes the component rendered by renderExtension to receive old copy of document
    * use forceRender to delay the rendering of extension by one render cycle
    */
-  React.useEffect(() => {
+  useEffect(() => {
     if (renderExtension) {
       forceRender();
     }
@@ -201,13 +201,13 @@ const RenderExtension: React.FC<RenderExtensionProps> = ({
   );
 };
 
-const InlineMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
+const InlineMarkdownView: FC<InnerSyncMarkdownProps> = ({
   markup,
   isEmpty,
   renderExtension,
   className,
 }) => {
-  const id = React.useMemo(() => uniqueId('markdown'), []);
+  const id = useMemo(() => uniqueId('markdown'), []);
   return (
     <div className={css({ 'is-empty': isEmpty } as any, className)} id={id}>
       <div dangerouslySetInnerHTML={{ __html: markup }} />
@@ -218,18 +218,18 @@ const InlineMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
   );
 };
 
-const IFrameMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
+const IFrameMarkdownView: FC<InnerSyncMarkdownProps> = ({
   exactHeight,
   markup,
   isEmpty,
   renderExtension,
   className,
 }) => {
-  const [frame, setFrame] = React.useState<HTMLIFrameElement>();
-  const [loaded, setLoaded] = React.useState(false);
-  const updateTimeoutHandle = React.useRef<NodeJS.Timeout>();
+  const [frame, setFrame] = useState<HTMLIFrameElement>();
+  const [loaded, setLoaded] = useState(false);
+  const updateTimeoutHandle = useRef<NodeJS.Timeout>(null);
 
-  const updateDimensions = React.useCallback(() => {
+  const updateDimensions = useCallback(() => {
     if (!frame?.contentWindow?.document.body.firstChild) {
       return;
     }
@@ -248,14 +248,14 @@ const IFrameMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
     });
   }, [frame, exactHeight]);
 
-  React.useEffect(
+  useEffect(
     () => () => {
       clearTimeout(updateTimeoutHandle.current);
     },
     [],
   );
 
-  const onLoad = React.useCallback(() => {
+  const onLoad = useCallback(() => {
     updateDimensions();
     setLoaded(true);
   }, [updateDimensions]);
@@ -302,7 +302,9 @@ const IFrameMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
         sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin"
         srcDoc={contents}
         style={{ border: '0px', display: 'block', width: '100%', height: '0' }}
-        ref={(r) => setFrame(r)}
+        ref={(r) => {
+          setFrame(r);
+        }}
         onLoad={() => onLoad()}
         className={className}
       />

package/src/ConsoleInternal/components/utils/camel-case-wrap.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Fragment } from 'react';
 
 const MEMO = {};
 
@@ -16,10 +16,10 @@ export const CamelCaseWrap: React.FC<CamelCaseWrapProps> = ({ value, dataTest })
   const rendered = (
     <span data-test={dataTest}>
       {words.map((word, i) => (
-        <React.Fragment key={i}>
+        <Fragment key={i}>
           {word}
           {i !== words.length - 1 && <wbr />}
-        </React.Fragment>
+        </Fragment>
       ))}
     </span>
   );

package/src/ConsoleInternal/components/utils/status-box.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useContext } from 'react';
 import { css } from '@patternfly/react-styles';
 import { QuickStartContext, QuickStartContextValues } from '../../../utils/quick-start-context';
 
@@ -6,7 +6,7 @@ export const Box: React.FC<BoxProps> = ({ children, className }) => (
   <div className={css('pfext-status-box', className)}>{children}</div>
 );
 
-export const Loading: React.FC<LoadingProps> = ({ className }) => (
+export const Loading: FC<LoadingProps> = ({ className }) => (
   <div className={css('pfext-m-loader', className)}>
     <div className="pfext-m-loader-dot__one" />
     <div className="pfext-m-loader-dot__two" />
@@ -15,7 +15,7 @@ export const Loading: React.FC<LoadingProps> = ({ className }) => (
 );
 Loading.displayName = 'Loading';
 
-export const LoadingBox: React.FC<LoadingBoxProps> = ({ className, message }) => (
+export const LoadingBox: FC<LoadingBoxProps> = ({ className, message }) => (
   <Box className={css('pfext-status-box--loading', className)}>
     <Loading />
     {message && <div className="pfext-status-box__loading-message">{message}</div>}
@@ -24,7 +24,7 @@ export const LoadingBox: React.FC<LoadingBoxProps> = ({ className, message }) =>
 LoadingBox.displayName = 'LoadingBox';
 
 export const EmptyBox: React.FC<EmptyBoxProps> = ({ label }) => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
   return (
     <Box>
       <div data-test="empty-message" className="text-center">

package/src/ConsoleShared/src/components/markdown-extensions/MarkdownCopyClipboard.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useCallback, useContext, useMemo, useState } from 'react';
 import { Tooltip } from '@patternfly/react-core';
 import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
 import { useEventListener } from '../../hooks';
@@ -10,14 +10,10 @@ interface CopyClipboardProps {
   docContext: Document;
 }
 
-export const CopyClipboard: React.FC<CopyClipboardProps> = ({
-  element,
-  rootSelector,
-  docContext,
-}) => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  const [showSuccessContent, setShowSuccessContent] = React.useState<boolean>(false);
-  const textToCopy = React.useMemo(() => {
+export const CopyClipboard: FC<CopyClipboardProps> = ({ element, rootSelector, docContext }) => {
+  const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
+  const [showSuccessContent, setShowSuccessContent] = useState<boolean>(false);
+  const textToCopy = useMemo(() => {
     const copyTextId = element.getAttribute(MARKDOWN_COPY_BUTTON_ID);
     return (
       docContext.querySelector(
@@ -29,7 +25,7 @@ export const CopyClipboard: React.FC<CopyClipboardProps> = ({
   useEventListener(
     element,
     'click',
-    React.useCallback(() => {
+    useCallback(() => {
       navigator.clipboard
         .writeText(textToCopy.trim())
         .then(() => {
@@ -42,7 +38,7 @@ export const CopyClipboard: React.FC<CopyClipboardProps> = ({
   useEventListener(
     element,
     'mouseleave',
-    React.useCallback(() => {
+    useCallback(() => {
       setShowSuccessContent(false);
     }, []),
   );
@@ -70,10 +66,7 @@ interface MarkdownCopyClipboardProps {
   rootSelector: string;
 }
 
-const MarkdownCopyClipboard: React.FC<MarkdownCopyClipboardProps> = ({
-  docContext,
-  rootSelector,
-}) => {
+const MarkdownCopyClipboard: FC<MarkdownCopyClipboardProps> = ({ docContext, rootSelector }) => {
   const elements = docContext.querySelectorAll(`${rootSelector} [${MARKDOWN_COPY_BUTTON_ID}]`);
   return elements.length > 0 ? (
     <>

package/src/ConsoleShared/src/components/markdown-extensions/__tests__/MarkdownCopyClipboard.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
 import MarkdownCopyClipboard, { CopyClipboard } from '../MarkdownCopyClipboard';
 import { htmlDocumentForCopyClipboard } from './test-data';

package/src/ConsoleShared/src/components/markdown-extensions/accordion-extension.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import {
   Accordion,
   AccordionItem,
@@ -10,7 +10,7 @@ import { removeTemplateWhitespace } from './utils';
 import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from './const';
 
 const useAccordionShowdownExtension = () =>
-  React.useMemo(
+  useMemo(
     () => ({
       type: 'lang',
       regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,

package/src/ConsoleShared/src/components/markdown-extensions/accordion-render-extension.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useState } from 'react';
 import { useEventListener } from '../../hooks';
 import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from './const';
 
@@ -7,11 +7,11 @@ interface AccordionShowdownComponentProps {
   contentElement: HTMLElement;
 }
 
-const AccordionShowdownHandler: React.FC<AccordionShowdownComponentProps> = ({
+const AccordionShowdownHandler: FC<AccordionShowdownComponentProps> = ({
   buttonElement,
   contentElement,
 }) => {
-  const [expanded, setExpanded] = React.useState<boolean>(false);
+  const [expanded, setExpanded] = useState<boolean>(false);
 
   const handleClick = () => {
     const expandedModifier = 'pf-m-expanded';
@@ -33,7 +33,7 @@ interface accordionRenderExtensionProps {
   docContext: Document;
 }
 
-const AccordionRenderExtension: React.FC<accordionRenderExtensionProps> = ({ docContext }) => {
+const AccordionRenderExtension: FC<accordionRenderExtensionProps> = ({ docContext }) => {
   const buttonElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_BUTTON_ID}]`);
   const contentElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_CONTENT_ID}]`);
 

package/src/ConsoleShared/src/components/markdown-extensions/admonition-extension.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import { removeTemplateWhitespace } from './utils';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { Alert } from '@patternfly/react-core';
@@ -24,7 +24,7 @@ const admonitionToAlertVariantMap = {
 
 const useAdmonitionShowdownExtension = () =>
   // const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  React.useMemo(
+  useMemo(
     () => ({
       type: 'lang',
       regex: /\[(.+)]{{(admonition) ([\w-]+)}}/g,

package/src/ConsoleShared/src/components/markdown-extensions/code-extension.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import { removeTemplateWhitespace } from './utils';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { CodeBlock } from '@patternfly/react-core';
 
 const useCodeShowdownExtension = () =>
-  React.useMemo(
+  useMemo(
     () => ({
       type: 'output',
       regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,

package/src/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext, useMemo } from 'react';
 import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
 import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
 import { removeTemplateWhitespace } from './utils';
@@ -6,8 +6,8 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
 
 const useInlineCopyClipboardShowdownExtension = () => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  return React.useMemo(
+  const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
+  return useMemo(
     () => ({
       type: 'lang',
       regex: /`([^`](.*?)[^`])`{{copy}}/g,

package/src/ConsoleShared/src/components/markdown-extensions/multiline-clipboard-extension.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable max-len */
-import * as React from 'react';
+import { useContext, useMemo } from 'react';
 import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
 import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
 import { renderToStaticMarkup } from 'react-dom/server';
 import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
 
 const useMultilineCopyClipboardShowdownExtension = () => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  return React.useMemo(
+  const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
+  return useMemo(
     () => ({
       type: 'lang',
       regex: /```[\n]\s*((((?!```).)*?\n)+)\s*```{{copy}}/g,

package/src/ConsoleShared/src/components/markdown-highlight-extension/MarkdownHighlightExtension.tsx

@@ -1,16 +1,16 @@
-import * as React from 'react';
+import { FC, useEffect, useState } from 'react';
 import { Spotlight } from '../spotlight';
 
 interface MarkdownHighlightExtensionProps {
   docContext: Document;
   rootSelector: string;
 }
-const MarkdownHighlightExtension: React.FC<MarkdownHighlightExtensionProps> = ({
+const MarkdownHighlightExtension: FC<MarkdownHighlightExtensionProps> = ({
   docContext,
   rootSelector,
 }) => {
-  const [selector, setSelector] = React.useState<string>(null);
-  React.useEffect(() => {
+  const [selector, setSelector] = useState<string>(null);
+  useEffect(() => {
     const elements = docContext.querySelectorAll(`${rootSelector} [data-highlight]`);
     let timeoutId: NodeJS.Timeout;
     function startHighlight(e) {
@@ -29,7 +29,7 @@ const MarkdownHighlightExtension: React.FC<MarkdownHighlightExtensionProps> = ({
       elements && elements.forEach((elm) => elm.removeEventListener('click', startHighlight));
     };
   }, [docContext, rootSelector]);
-  React.useEffect(() => {
+  useEffect(() => {
     const elements = docContext.querySelectorAll(`${rootSelector} [class^=data-highlight__]`);
     let timeoutId: NodeJS.Timeout;
     function startHighlight(e) {

package/src/ConsoleShared/src/components/modal/Modal.tsx

@@ -1,13 +1,13 @@
-import * as React from 'react';
+import { FC, Ref } from 'react';
 import { Modal as PfModal, ModalProps as PfModalProps } from '@patternfly/react-core/deprecated';
 import { css } from '@patternfly/react-styles';
 
 type ModalProps = {
   isFullScreen?: boolean;
-  ref?: React.LegacyRef<PfModal>;
+  ref?: Ref<PfModal>;
 } & PfModalProps;
 
-const Modal: React.FC<ModalProps> = ({ isFullScreen = false, className, ...props }) => (
+const Modal: FC<ModalProps> = ({ isFullScreen = false, className, ...props }) => (
   <PfModal
     {...props}
     className={css('pfext-modal', className)}

package/src/ConsoleShared/src/components/popper/Portal.tsx

@@ -1,11 +1,11 @@
 import { useIsomorphicLayoutEffect } from '@patternfly/react-core';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { useState, ReactNode } from 'react';
+import { createPortal } from 'react-dom';
 
 type GetContainer = Element | null | undefined | (() => Element);
 
 interface PortalProps {
-  children: React.ReactNode;
+  children: ReactNode;
   container?: GetContainer;
 }
 
@@ -13,13 +13,13 @@ const getContainer = (container: GetContainer): Element | null | undefined =>
   typeof container === 'function' ? container() : container;
 
 const Portal = ({ children, container }: PortalProps) => {
-  const [containerNode, setContainerNode] = React.useState<Element>();
+  const [containerNode, setContainerNode] = useState<Element>();
 
   useIsomorphicLayoutEffect(() => {
     setContainerNode(getContainer(container) || document.body);
   }, [container]);
 
-  return containerNode ? ReactDOM.createPortal(children, containerNode) : null;
+  return containerNode ? createPortal(children, containerNode) : null;
 };
 
 export default Portal;