fix: fix class names to follow the BEM naming convention

packages/lsd-react/src/components/Breadcrumb/Breadcrumb.classes.ts

@@ -1,8 +1,8 @@
 export const breadcrumbClasses = {
   root: `lsd-breadcrumb`,
-  list: `lsd-breadcrumb-list`,
+  list: `lsd-breadcrumb__list`,
 
-  listBox: 'lsd-breadcrumb-list-box',
+  listBox: 'lsd-breadcrumb__dropdown-menu',
 
   open: 'lsd-breadcrumb--open',
   disabled: 'lsd-breadcrumb--disabled',

packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.classes.ts

@@ -2,7 +2,7 @@ export const breadcrumbItemClasses = {
   root: `lsd-breadcrumb-item`,
 
   outlined: `lsd-breadcrumb-item--outlined`,
-  itemLink: `lsd-breadcrumb__item-link`,
+  itemLink: `lsd-breadcrumb-item__link`,
 
   large: `lsd-breadcrumb-item--large`,
   small: `lsd-breadcrumb-item--small`,

packages/lsd-react/src/components/Button/Button.classes.ts

@@ -1,13 +1,11 @@
-import { LSD_NAMESPACE } from '../Theme/constants'
-
 export const buttonClasses = {
-  root: `${LSD_NAMESPACE}-button`,
-  disabled: `${LSD_NAMESPACE}--disabled`,
-  large: `${LSD_NAMESPACE}--large`,
-  medium: `${LSD_NAMESPACE}--medium`,
-  small: `${LSD_NAMESPACE}--small`,
-  withIcon: `${LSD_NAMESPACE}--with-icon`,
+  root: `lsd-button`,
+  disabled: `lsd-button--disabled`,
+  large: `lsd-button--large`,
+  medium: `lsd-button--medium`,
+  small: `lsd-button--small`,
+  withIcon: `lsd-button--with-icon`,
 
-  text: `${LSD_NAMESPACE}-button__text`,
-  icon: `${LSD_NAMESPACE}-button__icon`,
+  text: `lsd-button__text`,
+  icon: `lsd-button__icon`,
 }

packages/lsd-react/src/components/TableBody/TableBody.classes.ts

@@ -2,9 +2,6 @@ export const tableBodyClasses = {
   root: `lsd-table-body`,
 
   toolbar: `lsd-table-body__toolbar`,
-  buttons: `lsd-table-body__buttons`,
-  button: `lsd-table-body__button`,
 
-  container: `lsd-table-container`,
   row: `lsd-table-body__row`,
 }

packages/lsd-react/src/components/TableBody/TableBody.styles.ts

@@ -24,28 +24,4 @@ export const TableBodyStyles = css`
     display: flex;
     justify-content: space-between;
   }
-
-  .${tableBodyClasses.buttons} {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-
-  .${tableBodyClasses.button} {
-    height: 28px;
-    background: rgb(var(--lsd-border-primary));
-    color: rgb(var(--lsd-icon-secondary));
-  }
-
-  .${tableBodyClasses.container} {
-    display: table;
-    width: 100%;
-    /* display: inline-grid;
-    grid-template-columns: auto auto auto auto; */
-
-    /* tr,
-    td {
-      border: 1px solid rgb(var(--lsd-border-primary));
-    } */
-  }
 `

packages/lsd-react/src/components/TextField/TextField.classes.ts

@@ -1,11 +1,10 @@
 export const textFieldClasses = {
   root: `lsd-text-field`,
 
-  inputContainer: `lsd-text-field-input-container`,
-  input: `lsd-text-field-input-container__input`,
-  icon: `lsd-text-field-input-container__icon`,
-  clearButton: `lsd-text-field-input-container__clear-button`,
-
+  inputContainer: `lsd-text-field__input-container`,
+  input: `lsd-text-field__input`,
+  icon: `lsd-text-field__icon`,
+  clearButton: `lsd-text-field__clear-button`,
   supportingText: 'lsd-text-field__supporting-text',
 
   disabled: `lsd-text-field--disabled`,