@patternfly/react-styles 5.0.0-alpha.8 → 5.0.0-prerelease.1

package/scripts/generateClassMaps.js

@@ -14,7 +14,7 @@ function getCSSClasses(cssString) {
  * @param {string} className - Class name
  */
 function formatClassName(className) {
-  return camelcase(className.replace(/pf-((c|l|m|u|is|has)-)?/g, ''));
+  return camelcase(className.replace(/pf-(v5-)?((c|l|m|u|is|has)-)?/g, ''));
 }
 
 /**
@@ -31,7 +31,7 @@ function getClassMaps(cssString) {
   const res = {};
   const distinctClasses = new Set(getCSSClasses(cssString));
 
-  distinctClasses.forEach(className => {
+  distinctClasses.forEach((className) => {
     const key = formatClassName(className);
     const value = className.replace('.', '').trim();
     if (isModifier(className)) {
@@ -45,7 +45,7 @@ function getClassMaps(cssString) {
   const ordered = {};
   Object.keys(res)
     .sort()
-    .forEach(key => (ordered[key] = res[key]));
+    .forEach((key) => (ordered[key] = res[key]));
 
   return ordered;
 }
@@ -66,8 +66,8 @@ function generateClassMaps() {
   const res = {};
   patternflyCSSFiles
     .concat(srcCSSFiles)
-    .map(file => path.resolve(file)) // Normalize path for Windows
-    .forEach(file => {
+    .map((file) => path.resolve(file)) // Normalize path for Windows
+    .forEach((file) => {
       res[file] = getClassMaps(fs.readFileSync(file, 'utf8'));
     });
 

package/src/css/components/Consoles/AccessConsoles.css

@@ -1,13 +1,14 @@
-.pf-c-console {
+.pf-v5-c-console {
   display: grid;
-  grid-template-areas: "actions-main actions-extra"
-                       "main main";
-  row-gap: var(--pf-global--spacer--md);
+  grid-template-areas:
+    'actions-main actions-extra'
+    'main main';
+  row-gap: var(--pf-v5-global--spacer--md);
 }
-.pf-c-console__actions {
+.pf-v5-c-console__actions {
   grid-area: actions-main;
   display: flex;
 }
-.pf-c-console__actions > div {
-  margin-right: var(--pf-global--spacer--sm);
+.pf-v5-c-console__actions > div {
+  margin-right: var(--pf-v5-global--spacer--sm);
 }

package/src/css/components/Consoles/DesktopViewer.css

@@ -1,7 +1,6 @@
-.pf-c-console__desktop-viewer {
+.pf-v5-c-console__desktop-viewer {
   grid-area: main;
   display: grid;
-  gap: var(--pf-global--spacer--md);
+  gap: var(--pf-v5-global--spacer--md);
   grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
 }
-

package/src/css/components/Consoles/SerialConsole.css

@@ -1,11 +1,11 @@
-.pf-c-console__serial {
+.pf-v5-c-console__serial {
   grid-area: main;
 }
-.pf-c-console__actions-serial {
+.pf-v5-c-console__actions-serial {
   grid-area: actions-extra;
   display: flex;
   justify-content: flex-end;
 }
-.pf-c-console__actions-serial > button {
-  margin-right: var(--pf-global--spacer--sm);
+.pf-v5-c-console__actions-serial > button {
+  margin-right: var(--pf-v5-global--spacer--sm);
 }

package/src/css/components/Consoles/VncConsole.css

@@ -1,10 +1,10 @@
-.pf-c-console__vnc {
+.pf-v5-c-console__vnc {
   grid-area: main;
 }
-.pf-c-console__actions-vnc {
+.pf-v5-c-console__actions-vnc {
   grid-area: actions-extra;
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  column-gap: var(--pf-global--spacer--sm)
+  column-gap: var(--pf-v5-global--spacer--sm);
 }

package/src/css/components/Popper/Popper.css

@@ -1,4 +1,4 @@
-.pf-c-popover[data-popper-reference-hidden="true"] {
+.pf-v5-c-popover[data-popper-reference-hidden="true"] {
     visibility: hidden;
     pointer-events: none;
 }

package/src/css/components/Table/inline-edit.css

@@ -1,56 +1,60 @@
 :root {
-  --pf-global--Blue--50: #def3ff;
-  --pf-global--Blue--200: #7dc3e8;
+  --pf-v5-global--palette--blue-50: #def3ff;
+  --pf-v5-global--palette--blue-200: #7dc3e8;
 }
 
- tr.pf-c-table__editable-row:hover, tr.pf-c-table__editable-row.pf-m-editing {
-  background: var(--pf-global--Blue--50) !important;
+tr.pf-v5-c-table__editable-row:hover,
+tr.pf-v5-c-table__editable-row.pf-m-editing {
+  background: var(--pf-v5-global--palette--blue-50) !important;
 }
-tr.pf-c-table__editable-row:hover td, tr.pf-c-table__editable-row.pf-m-editing td {
-  border-bottom: 1px solid var(--pf-global--Blue--200) !important;
-  border-top: 1px solid var(--pf-global--Blue--200) !important;
+tr.pf-v5-c-table__editable-row:hover td,
+tr.pf-v5-c-table__editable-row.pf-m-editing td {
+  border-bottom: 1px solid var(--pf-v5-global--palette--blue-200) !important;
+  border-top: 1px solid var(--pf-v5-global--palette--blue-200) !important;
 }
-tr.pf-c-table__editable-row:hover td:first-child, tr.pf-c-table__editable-row.pf-m-editing td:first-child {
-  border-left: 1px solid var(--pf-global--Blue--200) !important;
+tr.pf-v5-c-table__editable-row:hover td:first-child,
+tr.pf-v5-c-table__editable-row.pf-m-editing td:first-child {
+  border-left: 1px solid var(--pf-v5-global--palette--blue-200) !important;
 }
-tr.pf-c-table__editable-row:hover td:last-child, tr.pf-c-table__editable-row.pf-m-editing td:last-child {
-  border-right: 1px solid var(--pf-global--Blue--200) !important;
+tr.pf-v5-c-table__editable-row:hover td:last-child,
+tr.pf-v5-c-table__editable-row.pf-m-editing td:last-child {
+  border-right: 1px solid var(--pf-v5-global--palette--blue-200) !important;
 }
-tr.pf-c-table__editable-row.pf-m-table-editing-first-row {
-  border-top: 3px solid var(--pf-global--Blue--200) !important;
+tr.pf-v5-c-table__editable-row.pf-m-table-editing-first-row {
+  border-top: 3px solid var(--pf-v5-global--palette--blue-200) !important;
 }
-tr.pf-c-table__editable-row.pf-m-table-editing-last-row {
-  border-bottom: 3px solid var(--pf-global--Blue--200) !important;
+tr.pf-v5-c-table__editable-row.pf-m-table-editing-last-row {
+  border-bottom: 3px solid var(--pf-v5-global--palette--blue-200) !important;
 }
-tr.pf-c-table__editable-row input {
+tr.pf-v5-c-table__editable-row input {
   display: block;
-  background: var(--pf-global--BackgroundColor--100);
-  border: 1px solid var(--pf-global--BorderColor);
+  background: var(--pf-v5-global--BackgroundColor--100);
+  border: 1px solid var(--pf-v5-global--BorderColor--100);
 }
-tr.pf-c-table__editable-row input:hover {
+tr.pf-v5-c-table__editable-row input:hover {
   cursor: text;
 }
 
- .pf-c-table__inline-edit-buttons {
+.pf-v5-c-table__inline-edit-buttons {
   position: fixed;
   z-index: 1000;
   padding: 4px;
   margin: 0;
-  background: var(--pf-global--Blue--50);
-  border: 1px solid var(--pf-global--Blue--200);
+  background: var(--pf-v5-global--palette--blue-50);
+  border: 1px solid var(--pf-v5-global--palette--blue-200);
 }
-.pf-c-table__inline-edit-buttons.pf-m-top {
+.pf-v5-c-table__inline-edit-buttons.pf-m-top {
   border-bottom: 0;
 }
-.pf-c-table__inline-edit-buttons.pf-m-bottom {
+.pf-v5-c-table__inline-edit-buttons.pf-m-bottom {
   border-top: 0;
 }
-.pf-c-table__inline-edit-buttons.pf-m-bold {
+.pf-v5-c-table__inline-edit-buttons.pf-m-bold {
   border-width: 3px;
 }
-.pf-c-table__inline-edit-buttons button {
+.pf-v5-c-table__inline-edit-buttons button {
   margin-left: 4px;
 }
-.pf-c-table__inline-edit-buttons button:first-child {
+.pf-v5-c-table__inline-edit-buttons button:first-child {
   margin-left: 0;
-} 
+}

package/src/css/layouts/Toolbar/toolbar.css

@@ -1,24 +1,30 @@
 .pf-l-toolbar {
-  --pf-l-toolbar__section--MarginTop: var(--pf-global--spacer--md);
-  --pf-l-toolbar__group--MarginRight: var(--pf-global--spacer--xl);
-  --pf-l-toolbar__group--MarginLeft: var(--pf-global--spacer--xl);
-  --pf-l-toolbar__item--MarginRight: var(--pf-global--spacer--md);
-  --pf-l-toolbar__item--MarginLeft: var(--pf-global--spacer--md); }
+  --pf-v5-l-toolbar__section--MarginTop: var(--pf-v5-global--spacer--md);
+  --pf-v5-l-toolbar__group--MarginRight: var(--pf-v5-global--spacer--xl);
+  --pf-v5-l-toolbar__group--MarginLeft: var(--pf-v5-global--spacer--xl);
+  --pf-v5-l-toolbar__item--MarginRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-l-toolbar__item--MarginLeft: var(--pf-v5-global--spacer--md);
+}
 
- .pf-l-toolbar,
+.pf-l-toolbar,
 .pf-l-toolbar__section,
 .pf-l-toolbar__group {
   display: flex;
   flex-wrap: wrap;
-  align-items: center; }
+  align-items: center;
+}
 
- .pf-l-toolbar__section {
-  flex-basis: 100%; }
+.pf-l-toolbar__section {
+  flex-basis: 100%;
+}
 .pf-l-toolbar__section:not(:first-child) {
-  margin-top: var(--pf-l-toolbar__section--MarginTop); }
+  margin-top: var(--pf-v5-l-toolbar__section--MarginTop);
+}
 
- .pf-l-toolbar__group:not(:last-child) {
-  margin-right: var(--pf-l-toolbar__group--MarginRight); }
+.pf-l-toolbar__group:not(:last-child) {
+  margin-right: var(--pf-v5-l-toolbar__group--MarginRight);
+}
 
- .pf-l-toolbar__item .pf-l-toolbar:not(:last-child) {
-  margin-right: var(--pf-l-toolbar__item--MarginRight); } 
+.pf-l-toolbar__item .pf-l-toolbar:not(:last-child) {
+  margin-right: var(--pf-v5-l-toolbar__item--MarginRight);
+}

package/css/components/AlertGroup/alert-group.css

@@ -1,54 +0,0 @@
-.pf-c-alert-group {
-  --pf-c-alert-group__item--MarginTop: var(--pf-global--spacer--sm);
-  --pf-c-alert-group--m-toast--Top: var(--pf-global--spacer--2xl);
-  --pf-c-alert-group--m-toast--Right: var(--pf-global--spacer--xl);
-  --pf-c-alert-group--m-toast--MaxWidth: 37.5rem;
-  --pf-c-alert-group--m-toast--ZIndex: var(--pf-global--ZIndex--2xl);
-  --pf-c-alert-group__overflow-button--BorderWidth: 0;
-  --pf-c-alert-group__overflow-button--PaddingTop: var(--pf-global--spacer--lg);
-  --pf-c-alert-group__overflow-button--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-alert-group__overflow-button--PaddingBottom: var(--pf-global--spacer--lg);
-  --pf-c-alert-group__overflow-button--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-alert-group__overflow-button--Color: var(--pf-global--link--Color);
-  --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-global--BoxShadow--lg);
-  --pf-c-alert-group__overflow-button--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-alert-group__overflow-button--hover--Color: var(--pf-global--link--Color--hover);
-  --pf-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
-  --pf-c-alert-group__overflow-button--focus--Color: var(--pf-global--link--Color--hover);
-  --pf-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
-  --pf-c-alert-group__overflow-button--active--Color: var(--pf-global--link--Color--hover);
-  --pf-c-alert-group__overflow-button--active--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
-}
-.pf-c-alert-group > * + * {
-  margin-top: var(--pf-c-alert-group__item--MarginTop);
-}
-.pf-c-alert-group.pf-m-toast {
-  position: fixed;
-  top: var(--pf-c-alert-group--m-toast--Top);
-  right: var(--pf-c-alert-group--m-toast--Right);
-  z-index: var(--pf-c-alert-group--m-toast--ZIndex);
-  width: calc(100% - var(--pf-c-alert-group--m-toast--Right) * 2);
-  max-width: var(--pf-c-alert-group--m-toast--MaxWidth);
-}
-
-.pf-c-alert-group__overflow-button {
-  position: relative;
-  width: 100%;
-  padding: var(--pf-c-alert-group__overflow-button--PaddingTop) var(--pf-c-alert-group__overflow-button--PaddingRight) var(--pf-c-alert-group__overflow-button--PaddingBottom) var(--pf-c-alert-group__overflow-button--PaddingLeft);
-  color: var(--pf-c-alert-group__overflow-button--Color);
-  background-color: var(--pf-c-alert-group__overflow-button--BackgroundColor);
-  border-width: var(--pf-c-alert-group__overflow-button--BorderWidth);
-  box-shadow: var(--pf-c-alert-group__overflow-button--BoxShadow);
-}
-.pf-c-alert-group__overflow-button:hover {
-  --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--hover--Color);
-  --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--hover--BoxShadow);
-}
-.pf-c-alert-group__overflow-button:focus {
-  --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--focus--Color);
-  --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--focus--BoxShadow);
-}
-.pf-c-alert-group__overflow-button:active {
-  --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--active--Color);
-  --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--active--BoxShadow);
-}

package/css/components/AlertGroup/alert-group.d.ts

@@ -1,9 +0,0 @@
-import './alert-group.css';
-declare const _default: {
-  "alertGroup": "pf-c-alert-group",
-  "alertGroupOverflowButton": "pf-c-alert-group__overflow-button",
-  "modifiers": {
-    "toast": "pf-m-toast"
-  }
-};
-export default _default;

package/css/components/AlertGroup/alert-group.mjs

@@ -1,8 +0,0 @@
-import './alert-group.css';
-export default {
-  "alertGroup": "pf-c-alert-group",
-  "alertGroupOverflowButton": "pf-c-alert-group__overflow-button",
-  "modifiers": {
-    "toast": "pf-m-toast"
-  }
-};

package/css/components/ChipGroup/chip-group.css

@@ -1,91 +0,0 @@
-.pf-c-chip-group {
-  --pf-global--Color--100: var(--pf-global--Color--dark-100);
-  --pf-global--Color--200: var(--pf-global--Color--dark-200);
-  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
-  --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
-  --pf-global--link--Color: var(--pf-global--link--Color--dark);
-  --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
-  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
-}
-
-.pf-c-chip-group {
-  color: var(--pf-global--Color--100);
-  --pf-c-chip-group--PaddingTop: 0;
-  --pf-c-chip-group--PaddingRight: 0;
-  --pf-c-chip-group--PaddingBottom: 0;
-  --pf-c-chip-group--PaddingLeft: 0;
-  --pf-c-chip-group--RowGap: var(--pf-global--spacer--sm);
-  --pf-c-chip-group--ColumnGap: 0;
-  --pf-c-chip-group__main--RowGap: var(--pf-global--spacer--xs);
-  --pf-c-chip-group__main--ColumnGap: var(--pf-global--spacer--sm);
-  --pf-c-chip-group__list--RowGap: var(--pf-global--spacer--xs);
-  --pf-c-chip-group__list--ColumnGap: var(--pf-global--spacer--xs);
-  --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
-  --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
-  --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-chip-group__label--MaxWidth: 18ch;
-  --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  row-gap: var(--pf-c-chip-group--RowGap);
-  column-gap: var(--pf-c-chip-group--ColumnGap);
-  max-width: 100%;
-  padding-top: var(--pf-c-chip-group--PaddingTop);
-  padding-right: var(--pf-c-chip-group--PaddingRight);
-  padding-bottom: var(--pf-c-chip-group--PaddingBottom);
-  padding-left: var(--pf-c-chip-group--PaddingLeft);
-}
-.pf-c-chip-group.pf-m-category {
-  --pf-c-chip-group--PaddingTop: var(--pf-c-chip-group--m-category--PaddingTop);
-  --pf-c-chip-group--PaddingRight: var(--pf-c-chip-group--m-category--PaddingRight);
-  --pf-c-chip-group--PaddingBottom: var(--pf-c-chip-group--m-category--PaddingBottom);
-  --pf-c-chip-group--PaddingLeft: var(--pf-c-chip-group--m-category--PaddingLeft);
-  background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
-  border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
-}
-
-.pf-c-chip-group__main {
-  display: flex;
-  flex: 1;
-  flex-wrap: wrap;
-  row-gap: var(--pf-c-chip-group__main--RowGap);
-  column-gap: var(--pf-c-chip-group__main--ColumnGap);
-  align-items: baseline;
-  min-width: 0;
-}
-
-.pf-c-chip-group,
-.pf-c-chip-group__list {
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  min-width: 0;
-}
-
-.pf-c-chip-group__list {
-  row-gap: var(--pf-c-chip-group__list--RowGap);
-  column-gap: var(--pf-c-chip-group__list--ColumnGap);
-}
-
-.pf-c-chip-group__list-item {
-  display: inline-flex;
-  min-width: 0;
-}
-
-.pf-c-chip-group__label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: var(--pf-c-chip-group__label--MaxWidth);
-  font-size: var(--pf-c-chip-group__label--FontSize);
-}
-
-.pf-c-chip-group__close {
-  display: flex;
-  align-self: flex-start;
-  margin-top: var(--pf-c-chip-group__close--MarginTop);
-  margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
-}

package/css/components/ChipGroup/chip-group.d.ts

@@ -1,13 +0,0 @@
-import './chip-group.css';
-declare const _default: {
-  "chipGroup": "pf-c-chip-group",
-  "chipGroupClose": "pf-c-chip-group__close",
-  "chipGroupLabel": "pf-c-chip-group__label",
-  "chipGroupList": "pf-c-chip-group__list",
-  "chipGroupListItem": "pf-c-chip-group__list-item",
-  "chipGroupMain": "pf-c-chip-group__main",
-  "modifiers": {
-    "category": "pf-m-category"
-  }
-};
-export default _default;

package/css/components/ChipGroup/chip-group.js

@@ -1,14 +0,0 @@
-"use strict";
-exports.__esModule = true;
-require('./chip-group.css');
-exports.default = {
-  "chipGroup": "pf-c-chip-group",
-  "chipGroupClose": "pf-c-chip-group__close",
-  "chipGroupLabel": "pf-c-chip-group__label",
-  "chipGroupList": "pf-c-chip-group__list",
-  "chipGroupListItem": "pf-c-chip-group__list-item",
-  "chipGroupMain": "pf-c-chip-group__main",
-  "modifiers": {
-    "category": "pf-m-category"
-  }
-};

package/css/components/ChipGroup/chip-group.mjs

@@ -1,12 +0,0 @@
-import './chip-group.css';
-export default {
-  "chipGroup": "pf-c-chip-group",
-  "chipGroupClose": "pf-c-chip-group__close",
-  "chipGroupLabel": "pf-c-chip-group__label",
-  "chipGroupList": "pf-c-chip-group__list",
-  "chipGroupListItem": "pf-c-chip-group__list-item",
-  "chipGroupMain": "pf-c-chip-group__main",
-  "modifiers": {
-    "category": "pf-m-category"
-  }
-};

package/css/components/LabelGroup/label-group.css

@@ -1,137 +0,0 @@
-.pf-c-label-group {
-  --pf-c-label-group--RowGap: var(--pf-global--spacer--sm);
-  --pf-c-label-group--ColumnGap: 0;
-  --pf-c-label-group-m-vertical--RowGap: var(--pf-global--spacer--sm);
-  --pf-c-label-group-m-vertical--ColumnGap: var(--pf-global--spacer--sm);
-  --pf-c-label-group__main--RowGap: var(--pf-global--spacer--xs);
-  --pf-c-label-group__main--ColumnGap: var(--pf-global--spacer--sm);
-  --pf-c-label-group-m-vertical__main--RowGap: var(--pf-global--spacer--sm);
-  --pf-c-label-group-m-vertical__main--ColumnGap: var(--pf-global--spacer--xs);
-  --pf-c-label-group__list--RowGap: var(--pf-global--spacer--xs);
-  --pf-c-label-group__list--ColumnGap: var(--pf-global--spacer--xs);
-  --pf-c-label-group-m-vertical__list--RowGap: var(--pf-global--spacer--xs);
-  --pf-c-label-group-m-vertical__list--ColumnGap: var(--pf-global--spacer--xs);
-  --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
-  --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
-  --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
-  --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-label-group__label--MaxWidth: 18ch;
-  --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-label-group__textarea--MinWidth: 12.5rem;
-  --pf-c-label-group__textarea--PaddingTop: 0.125rem;
-  --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
-  --pf-c-label-group__textarea--PaddingBottom: 0;
-  --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
-  display: inline-flex;
-  row-gap: var(--pf-c-label-group--RowGap);
-  column-gap: var(--pf-c-label-group--ColumnGap);
-  align-items: center;
-}
-.pf-c-label-group.pf-m-category {
-  padding-top: var(--pf-c-label-group--m-category--PaddingTop);
-  padding-right: var(--pf-c-label-group--m-category--PaddingRight);
-  padding-bottom: var(--pf-c-label-group--m-category--PaddingBottom);
-  padding-left: var(--pf-c-label-group--m-category--PaddingLeft);
-  background-color: var(--pf-c-label-group--m-category--BackgroundColor);
-  border: var(--pf-c-label-group--m-category--BorderWidth) solid var(--pf-c-label-group--m-category--BorderColor);
-  border-radius: var(--pf-c-label-group--m-category--BorderRadius);
-}
-.pf-c-label-group.pf-m-vertical {
-  --pf-c-label-group--RowGap: var(--pf-c-label-group-m-vertical--RowGap);
-  --pf-c-label-group--ColumnGap: var(--pf-c-label-group-m-vertical--ColumnGap);
-  --pf-c-label-group__main--RowGap: var(--pf-c-label-group-m-vertical__main--RowGap);
-  --pf-c-label-group__main--ColumnGap: var(--pf-c-label-group-m-vertical__main--ColumnGap);
-  --pf-c-label-group__list--RowGap: var(--pf-c-label-group-m-vertical__list--RowGap);
-  --pf-c-label-group__list--ColumnGap: var(--pf-c-label-group-m-vertical__list--ColumnGap);
-  --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
-  --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
-  --pf-c-label-group__close--MarginBottom: 0;
-  --pf-c-label-group__close--MarginRight: var(--pf-c-label-group--m-vertical__close--MarginRight);
-  --pf-c-label-group--m-category--PaddingRight: var(--pf-c-label-group--m-vertical--m-category--PaddingRight);
-}
-.pf-c-label-group.pf-m-vertical.pf-c-label-group {
-  align-items: flex-start;
-}
-.pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
-  flex-direction: column;
-  align-items: flex-start;
-}
-.pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
-  flex-direction: column;
-}
-.pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
-  --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
-  --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
-}
-.pf-c-label-group.pf-m-editable,
-.pf-c-label-group.pf-m-editable .pf-c-label-group__main,
-.pf-c-label-group.pf-m-editable .pf-c-label-group__list {
-  display: flex;
-}
-.pf-c-label-group.pf-m-editable .pf-c-label-group__main,
-.pf-c-label-group.pf-m-editable .pf-c-label-group__list,
-.pf-c-label-group.pf-m-editable .pf-c-label-group__list-item.pf-m-textarea,
-.pf-c-label-group.pf-m-editable .pf-c-label-group__textarea {
-  flex: 1;
-}
-
-.pf-c-label-group__main {
-  display: flex;
-  flex: 1;
-  flex-wrap: wrap;
-  row-gap: var(--pf-c-label-group__main--RowGap);
-  column-gap: var(--pf-c-label-group__main--ColumnGap);
-  align-items: baseline;
-}
-
-.pf-c-label-group__list {
-  display: inline-flex;
-  flex-wrap: wrap;
-  row-gap: var(--pf-c-label-group__list--RowGap);
-  column-gap: var(--pf-c-label-group__list--ColumnGap);
-}
-
-.pf-c-label-group__list-item {
-  display: inline-flex;
-}
-
-.pf-c-label-group__label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: var(--pf-c-label-group__label--MaxWidth);
-  font-size: var(--pf-c-label-group__label--FontSize);
-}
-
-.pf-c-label-group__close {
-  display: flex;
-  align-self: start;
-  margin-top: var(--pf-c-label-group__close--MarginTop);
-  margin-right: var(--pf-c-label-group__close--MarginRight);
-  margin-bottom: var(--pf-c-label-group__close--MarginBottom);
-  margin-left: var(--pf-c-label-group__close--MarginLeft);
-}
-
-.pf-c-label-group__textarea {
-  min-width: var(--pf-c-label-group__textarea--MinWidth);
-  padding: var(--pf-c-label-group__textarea--PaddingTop) var(--pf-c-label-group__textarea--PaddingRight) var(--pf-c-label-group__textarea--PaddingBottom) var(--pf-c-label-group__textarea--PaddingLeft);
-  white-space: nowrap;
-  resize: none;
-  border: 0;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-.pf-c-label-group__textarea::-webkit-scrollbar {
-  display: none;
-}

package/css/components/LabelGroup/label-group.d.ts

@@ -1,18 +0,0 @@
-import './label-group.css';
-declare const _default: {
-  "button": "pf-c-button",
-  "labelGroup": "pf-c-label-group",
-  "labelGroupClose": "pf-c-label-group__close",
-  "labelGroupLabel": "pf-c-label-group__label",
-  "labelGroupList": "pf-c-label-group__list",
-  "labelGroupListItem": "pf-c-label-group__list-item",
-  "labelGroupMain": "pf-c-label-group__main",
-  "labelGroupTextarea": "pf-c-label-group__textarea",
-  "modifiers": {
-    "category": "pf-m-category",
-    "vertical": "pf-m-vertical",
-    "editable": "pf-m-editable",
-    "textarea": "pf-m-textarea"
-  }
-};
-export default _default;

package/css/components/LabelGroup/label-group.js

@@ -1,19 +0,0 @@
-"use strict";
-exports.__esModule = true;
-require('./label-group.css');
-exports.default = {
-  "button": "pf-c-button",
-  "labelGroup": "pf-c-label-group",
-  "labelGroupClose": "pf-c-label-group__close",
-  "labelGroupLabel": "pf-c-label-group__label",
-  "labelGroupList": "pf-c-label-group__list",
-  "labelGroupListItem": "pf-c-label-group__list-item",
-  "labelGroupMain": "pf-c-label-group__main",
-  "labelGroupTextarea": "pf-c-label-group__textarea",
-  "modifiers": {
-    "category": "pf-m-category",
-    "vertical": "pf-m-vertical",
-    "editable": "pf-m-editable",
-    "textarea": "pf-m-textarea"
-  }
-};

package/css/components/LabelGroup/label-group.mjs

@@ -1,17 +0,0 @@
-import './label-group.css';
-export default {
-  "button": "pf-c-button",
-  "labelGroup": "pf-c-label-group",
-  "labelGroupClose": "pf-c-label-group__close",
-  "labelGroupLabel": "pf-c-label-group__label",
-  "labelGroupList": "pf-c-label-group__list",
-  "labelGroupListItem": "pf-c-label-group__list-item",
-  "labelGroupMain": "pf-c-label-group__main",
-  "labelGroupTextarea": "pf-c-label-group__textarea",
-  "modifiers": {
-    "category": "pf-m-category",
-    "vertical": "pf-m-vertical",
-    "editable": "pf-m-editable",
-    "textarea": "pf-m-textarea"
-  }
-};