From 92d97153551c2501671c1ded6405848700a4e678 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Wed, 9 Jul 2025 09:30:57 +0200
Subject: [PATCH] Renames class names

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/components/Avatar/Avatar.styles.css   |  12 +-
 packages/canon/src/components/Box/styles.css  |   2 +-
 .../canon/src/components/Button/styles.css    |  16 +-
 .../src/components/ButtonIcon/styles.css      |   6 +-
 .../canon/src/components/Card/Card.styles.css |   8 +-
 .../canon/src/components/Checkbox/styles.css  |  12 +-
 .../Collapsible/Collapsible.styles.css        |   2 +-
 .../canon/src/components/Container/styles.css |   4 +-
 .../Pagination/DataTablePagination.styles.css |   8 +-
 .../Pagination/DataTablePagination.tsx        |   8 +-
 .../DataTable/Root/DataTableRoot.styles.css   |   2 +-
 .../DataTable/Root/DataTableRoot.tsx          |   6 +-
 .../FieldError/FieldError.styles.css          |   2 +-
 .../src/components/FieldError/FieldError.tsx  |   2 +-
 .../FieldLabel/FieldLabel.styles.css          |   8 +-
 packages/canon/src/components/Flex/styles.css |   2 +-
 packages/canon/src/components/Grid/styles.css |   2 +-
 .../src/components/Header/Header.styles.css   |  30 +--
 .../canon/src/components/Heading/styles.css   |  20 +-
 packages/canon/src/components/Icon/Icon.tsx   |   6 +-
 packages/canon/src/components/Icon/styles.css |   2 +-
 packages/canon/src/components/Link/styles.css |  14 +-
 .../canon/src/components/Menu/Combobox.tsx    |  16 +-
 .../canon/src/components/Menu/Menu.styles.css |  26 +--
 .../RadioGroup/RadioGroup.styles.css          |   8 +-
 .../ScrollArea/ScrollArea.styles.css          |  10 +-
 .../SearchField/SearchField.styles.css        |  12 +-
 .../src/components/Select/Select.styles.css   |  58 ++---
 .../canon/src/components/Select/Select.tsx    |   2 +-
 .../components/Skeleton/Skeleton.styles.css   |   4 +-
 .../src/components/Switch/Switch.styles.css   |  10 +-
 .../Table/TableCell/TableCell.styles.css      |   2 +-
 .../TableCellLink/TableCellLink.styles.css    |   2 +-
 .../TableCellProfile.styles.css               |   8 +-
 .../TableCellText/TableCellText.styles.css    |   2 +-
 .../canon/src/components/Table/styles.css     |  10 +-
 .../canon/src/components/Tabs/Tabs.styles.css |  10 +-
 packages/canon/src/components/Text/styles.css |  26 +--
 .../components/TextField/TextField.styles.css |  16 +-
 .../src/components/Tooltip/Tooltip.styles.css |  10 +-
 .../canon/src/utils/componentDefinitions.ts   | 220 +++++++++---------
 41 files changed, 310 insertions(+), 316 deletions(-)

diff --git a/packages/canon/src/components/Avatar/Avatar.styles.css b/packages/canon/src/components/Avatar/Avatar.styles.css
index c716cee197..ce3afea3b5 100644
--- a/packages/canon/src/components/Avatar/Avatar.styles.css
+++ b/packages/canon/src/components/Avatar/Avatar.styles.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.canon-AvatarRoot {
+.bui-AvatarRoot {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -31,28 +31,28 @@
   width: 2rem;
 }
 
-.canon-AvatarRoot[data-size='small'] {
+.bui-AvatarRoot[data-size='small'] {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.canon-AvatarRoot[data-size='medium'] {
+.bui-AvatarRoot[data-size='medium'] {
   height: 2rem;
   width: 2rem;
 }
 
-.canon-AvatarRoot[data-size='large'] {
+.bui-AvatarRoot[data-size='large'] {
   height: 3rem;
   width: 3rem;
 }
 
-.canon-AvatarImage {
+.bui-AvatarImage {
   object-fit: cover;
   height: 100%;
   width: 100%;
 }
 
-.canon-AvatarFallback {
+.bui-AvatarFallback {
   align-items: center;
   display: flex;
   justify-content: center;
diff --git a/packages/canon/src/components/Box/styles.css b/packages/canon/src/components/Box/styles.css
index 40669be43f..c499657230 100644
--- a/packages/canon/src/components/Box/styles.css
+++ b/packages/canon/src/components/Box/styles.css
@@ -1,4 +1,4 @@
-.canon-Box {
+.bui-Box {
   font-family: var(--bui-font-regular);
   font-weight: var(--bui-font-weight-regular);
   color: var(--bui-fg-primary);
diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css
index 7bd477e9b5..03138a7c44 100644
--- a/packages/canon/src/components/Button/styles.css
+++ b/packages/canon/src/components/Button/styles.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.canon-Button {
+.bui-Button {
   border: none;
   display: inline-flex;
   align-items: center;
@@ -33,7 +33,7 @@
   }
 }
 
-.canon-Button[data-variant='primary'] {
+.bui-Button[data-variant='primary'] {
   background-color: var(--bui-bg-solid);
   color: var(--bui-fg-solid);
 
@@ -57,7 +57,7 @@
   }
 }
 
-.canon-Button[data-variant='secondary'] {
+.bui-Button[data-variant='secondary'] {
   background-color: var(--bui-bg-surface-1);
   box-shadow: inset 0 0 0 1px var(--bui-border);
   color: var(--bui-fg-primary);
@@ -83,7 +83,7 @@
   }
 }
 
-.canon-Button[data-variant='tertiary'] {
+.bui-Button[data-variant='tertiary'] {
   background-color: transparent;
   color: var(--bui-fg-primary);
 
@@ -108,24 +108,24 @@
   }
 }
 
-.canon-Button[data-size='medium'] {
+.bui-Button[data-size='medium'] {
   font-size: var(--bui-font-size-4);
   padding: 0 var(--bui-space-3);
   height: 2.5rem;
 }
 
-.canon-Button[data-size='small'] {
+.bui-Button[data-size='small'] {
   font-size: var(--bui-font-size-3);
   padding: 0 var(--bui-space-2);
   height: 2rem;
 }
 
-.canon-Button[data-size='small'] svg {
+.bui-Button[data-size='small'] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button[data-size='medium'] svg {
+.bui-Button[data-size='medium'] svg {
   width: 1.25rem;
   height: 1.25rem;
 }
diff --git a/packages/canon/src/components/ButtonIcon/styles.css b/packages/canon/src/components/ButtonIcon/styles.css
index 27c96e696e..cbd19071a9 100644
--- a/packages/canon/src/components/ButtonIcon/styles.css
+++ b/packages/canon/src/components/ButtonIcon/styles.css
@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 
-.canon-ButtonIcon {
+.bui-ButtonIcon {
   align-items: center;
   justify-content: center;
 }
 
-.canon-ButtonIcon[data-size='small'] {
+.bui-ButtonIcon[data-size='small'] {
   padding: 0;
   width: 2rem;
 }
 
-.canon-ButtonIcon[data-size='medium'] {
+.bui-ButtonIcon[data-size='medium'] {
   padding: 0;
   width: 2.5rem;
 }
diff --git a/packages/canon/src/components/Card/Card.styles.css b/packages/canon/src/components/Card/Card.styles.css
index 6a8fa0b2dd..1643ba0b8a 100644
--- a/packages/canon/src/components/Card/Card.styles.css
+++ b/packages/canon/src/components/Card/Card.styles.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.canon-Card {
+.bui-Card {
   display: flex;
   flex-direction: column;
   gap: var(--bui-space-3);
@@ -28,16 +28,16 @@
   width: 100%;
 }
 
-.canon-CardBody {
+.bui-CardBody {
   flex: 1;
   min-height: 0;
   overflow: auto;
 }
 
-.canon-CardHeader {
+.bui-CardHeader {
   padding-inline: var(--bui-space-3);
 }
 
-.canon-CardFooter {
+.bui-CardFooter {
   padding-inline: var(--bui-space-3);
 }
diff --git a/packages/canon/src/components/Checkbox/styles.css b/packages/canon/src/components/Checkbox/styles.css
index 4141d1f3be..75d57e72aa 100644
--- a/packages/canon/src/components/Checkbox/styles.css
+++ b/packages/canon/src/components/Checkbox/styles.css
@@ -1,4 +1,4 @@
-.canon-CheckboxRoot {
+.bui-CheckboxRoot {
   border: none;
   display: flex;
   align-items: center;
@@ -14,19 +14,19 @@
   flex-shrink: 0;
 }
 
-.canon-CheckboxRoot:focus-visible {
+.bui-CheckboxRoot:focus-visible {
   transition: none;
   outline: 2px solid var(--bui-ring);
   outline-offset: 2px;
 }
 
-.canon-CheckboxRoot[data-checked] {
+.bui-CheckboxRoot[data-checked] {
   background-color: var(--bui-bg-solid);
   box-shadow: none;
   color: var(--bui-fg-solid);
 }
 
-.canon-CheckboxLabel {
+.bui-CheckboxLabel {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -38,13 +38,13 @@
   user-select: none;
 
   &:hover {
-    & .canon-CheckboxRoot:not([data-checked]) {
+    & .bui-CheckboxRoot:not([data-checked]) {
       box-shadow: inset 0 0 0 1px var(--bui-border-hover);
     }
   }
 }
 
-.canon-CheckboxIndicator {
+.bui-CheckboxIndicator {
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/packages/canon/src/components/Collapsible/Collapsible.styles.css b/packages/canon/src/components/Collapsible/Collapsible.styles.css
index 78823cbb84..e1fbf00a82 100644
--- a/packages/canon/src/components/Collapsible/Collapsible.styles.css
+++ b/packages/canon/src/components/Collapsible/Collapsible.styles.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.canon-CollapsiblePanel {
+.bui-CollapsiblePanel {
   display: flex;
   height: var(--collapsible-panel-height);
   overflow: hidden;
diff --git a/packages/canon/src/components/Container/styles.css b/packages/canon/src/components/Container/styles.css
index 86d886e8a4..a812b7c767 100644
--- a/packages/canon/src/components/Container/styles.css
+++ b/packages/canon/src/components/Container/styles.css
@@ -1,4 +1,4 @@
-.canon-Container {
+.bui-Container {
   max-width: 120rem;
   padding-inline: var(--bui-space-4);
   margin-inline: auto;
@@ -6,7 +6,7 @@
 }
 
 @media (min-width: 640px) {
-  .canon-Container {
+  .bui-Container {
     padding-inline: var(--bui-space-5);
   }
 }
diff --git a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.styles.css b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.styles.css
index 829cf24b71..f7cbb44fc2 100644
--- a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.styles.css
+++ b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.styles.css
@@ -1,23 +1,23 @@
-.canon-DataTablePagination {
+.bui-DataTablePagination {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-top: var(--bui-space-5);
 }
 
-.canon-DataTablePagination--left {
+.bui-DataTablePagination--left {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.canon-DataTablePagination--right {
+.bui-DataTablePagination--right {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--bui-space-2);
 }
 
-.canon-DataTablePagination--select {
+.bui-DataTablePagination--select {
   min-width: 10.5rem;
 }
diff --git a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
index ee9dda7ab5..5575305d64 100644
--- a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
+++ b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
@@ -44,10 +44,10 @@ const DataTablePagination = forwardRef(
       <div
         ref={ref}
         style={{ minWidth: table?.getTotalSize() }}
-        className={clsx('canon-DataTablePagination', className)}
+        className={clsx('bui-DataTablePagination', className)}
         {...rest}
       >
-        <div className="canon-DataTablePagination--left">
+        <div className="bui-DataTablePagination--left">
           {!table.options.manualPagination && (
             <Select
               name="pageSize"
@@ -65,11 +65,11 @@ const DataTablePagination = forwardRef(
               onValueChange={value => {
                 table?.setPageSize(Number(value));
               }}
-              className="canon-DataTablePagination--select"
+              className="bui-DataTablePagination--select"
             />
           )}
         </div>
-        <div className="canon-DataTablePagination--right">
+        <div className="bui-DataTablePagination--right">
           <Text variant="body">{`${fromCount} - ${toCount} of ${rowCount}`}</Text>
           <ButtonIcon
             variant="secondary"
diff --git a/packages/canon/src/components/DataTable/Root/DataTableRoot.styles.css b/packages/canon/src/components/DataTable/Root/DataTableRoot.styles.css
index 68352c42b2..21b9be4eb8 100644
--- a/packages/canon/src/components/DataTable/Root/DataTableRoot.styles.css
+++ b/packages/canon/src/components/DataTable/Root/DataTableRoot.styles.css
@@ -1,4 +1,4 @@
-.canon-DataTableRoot {
+.bui-DataTableRoot {
   display: flex;
   flex-direction: column;
   gap: var(--bui-space-3);
diff --git a/packages/canon/src/components/DataTable/Root/DataTableRoot.tsx b/packages/canon/src/components/DataTable/Root/DataTableRoot.tsx
index 8207fe4412..2e3f7a7c6d 100644
--- a/packages/canon/src/components/DataTable/Root/DataTableRoot.tsx
+++ b/packages/canon/src/components/DataTable/Root/DataTableRoot.tsx
@@ -38,11 +38,7 @@ const DataTableRoot = forwardRef(
 
     return (
       <DataTableContext.Provider value={{ table }}>
-        <div
-          ref={ref}
-          className={clsx('canon-DataTable', className)}
-          {...rest}
-        />
+        <div ref={ref} className={clsx('bui-DataTable', className)} {...rest} />
       </DataTableContext.Provider>
     );
   },
diff --git a/packages/canon/src/components/FieldError/FieldError.styles.css b/packages/canon/src/components/FieldError/FieldError.styles.css
index c7bbad9ca4..30e305c826 100644
--- a/packages/canon/src/components/FieldError/FieldError.styles.css
+++ b/packages/canon/src/components/FieldError/FieldError.styles.css
@@ -1,4 +1,4 @@
-.canon-FieldError {
+.bui-FieldError {
   color: var(--bui-fg-danger);
   font-size: var(--bui-font-size-2);
   font-weight: var(--bui-font-weight-regular);
diff --git a/packages/canon/src/components/FieldError/FieldError.tsx b/packages/canon/src/components/FieldError/FieldError.tsx
index b90d7b3bd3..f216cd6bb8 100644
--- a/packages/canon/src/components/FieldError/FieldError.tsx
+++ b/packages/canon/src/components/FieldError/FieldError.tsx
@@ -28,7 +28,7 @@ export const FieldError = forwardRef<HTMLDivElement, FieldErrorProps>(
 
     return (
       <AriaFieldError
-        className={clsx('canon-FieldError', className)}
+        className={clsx('bui-FieldError', className)}
         ref={ref}
         {...rest}
       />
diff --git a/packages/canon/src/components/FieldLabel/FieldLabel.styles.css b/packages/canon/src/components/FieldLabel/FieldLabel.styles.css
index 0a17806d83..2dfc28a49d 100644
--- a/packages/canon/src/components/FieldLabel/FieldLabel.styles.css
+++ b/packages/canon/src/components/FieldLabel/FieldLabel.styles.css
@@ -1,11 +1,11 @@
-.canon-FieldLabelWrapper {
+.bui-FieldLabelWrapper {
   display: flex;
   flex-direction: column;
   margin-bottom: var(--bui-space-3);
   gap: var(--bui-space-1);
 }
 
-.canon-FieldLabel {
+.bui-FieldLabel {
   color: var(--bui-fg-primary);
   margin-right: auto;
   cursor: pointer;
@@ -13,13 +13,13 @@
   font-size: var(--bui-font-size-2);
 }
 
-.canon-FieldSecondaryLabel {
+.bui-FieldSecondaryLabel {
   color: var(--bui-fg-secondary);
   font-weight: var(--bui-font-weight-regular);
   margin-left: var(--bui-space-1);
 }
 
-.canon-FieldDescription {
+.bui-FieldDescription {
   font-weight: var(--bui-font-weight-regular);
   font-size: var(--bui-font-size-2);
   color: var(--bui-fg-secondary);
diff --git a/packages/canon/src/components/Flex/styles.css b/packages/canon/src/components/Flex/styles.css
index 61fb53d257..96c94ab58a 100644
--- a/packages/canon/src/components/Flex/styles.css
+++ b/packages/canon/src/components/Flex/styles.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.canon-Flex {
+.bui-Flex {
   display: flex;
 
   /* This helps when using `truncate` on text inside a flex container */
diff --git a/packages/canon/src/components/Grid/styles.css b/packages/canon/src/components/Grid/styles.css
index 0bb9267795..e21191ad47 100644
--- a/packages/canon/src/components/Grid/styles.css
+++ b/packages/canon/src/components/Grid/styles.css
@@ -1,3 +1,3 @@
-.canon-Grid {
+.bui-Grid {
   display: grid;
 }
diff --git a/packages/canon/src/components/Header/Header.styles.css b/packages/canon/src/components/Header/Header.styles.css
index 4bc323f529..2760fec5fa 100644
--- a/packages/canon/src/components/Header/Header.styles.css
+++ b/packages/canon/src/components/Header/Header.styles.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.canon-HeaderToolbar {
+.bui-HeaderToolbar {
   position: sticky;
   top: 0;
   z-index: 10;
@@ -36,7 +36,7 @@
   }
 }
 
-.canon-HeaderToolbarWrapper {
+.bui-HeaderToolbarWrapper {
   position: relative;
   z-index: 1;
   display: flex;
@@ -50,14 +50,14 @@
   height: 52px;
 }
 
-.canon-HeaderToolbarContent {
+.bui-HeaderToolbarContent {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: var(--bui-space-2);
 }
 
-.canon-HeaderToolbarName {
+.bui-HeaderToolbarName {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -67,7 +67,7 @@
   flex-shrink: 0;
 }
 
-.canon-HeaderToolbarIcon {
+.bui-HeaderToolbarIcon {
   width: 16px;
   height: 16px;
   color: var(--bui-fg-primary);
@@ -78,14 +78,14 @@
   }
 }
 
-.canon-HeaderToolbarControls {
+.bui-HeaderToolbarControls {
   position: absolute;
   right: var(--bui-space-3);
   top: 50%;
   transform: translateY(-50%);
 }
 
-.canon-HeaderBreadcrumbs {
+.bui-HeaderBreadcrumbs {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -94,14 +94,14 @@
   font-weight: var(--bui-font-weight-regular);
 }
 
-.canon-HeaderBreadcrumb {
+.bui-HeaderBreadcrumb {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: var(--bui-space-2);
 }
 
-.canon-HeaderBreadcrumbLink {
+.bui-HeaderBreadcrumbLink {
   color: var(--bui-fg-secondary);
   text-decoration: none;
   cursor: pointer;
@@ -111,13 +111,13 @@
   }
 }
 
-.canon-HeaderBreadcrumbSeparator {
+.bui-HeaderBreadcrumbSeparator {
   width: 16px;
   height: 16px;
   color: var(--bui-fg-secondary);
 }
 
-.canon-HeaderTabs {
+.bui-HeaderTabs {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -144,12 +144,12 @@
   --hovered-transition-duration: 0s;
 }
 
-.canon-HeaderTabList {
+.bui-HeaderTabList {
   display: flex;
   flex-direction: row;
 }
 
-.canon-HeaderTab {
+.bui-HeaderTab {
   font-size: var(--bui-font-size-3);
   color: var(--bui-fg-secondary);
   height: 36px;
@@ -166,7 +166,7 @@
   }
 }
 
-.canon-HeaderTabActive {
+.bui-HeaderTabActive {
   content: '';
   position: absolute;
   left: calc(var(--active-tab-left) + var(--bui-space-2));
@@ -179,7 +179,7 @@
   opacity: 1;
 }
 
-.canon-HeaderTabHovered {
+.bui-HeaderTabHovered {
   content: '';
   position: absolute;
   left: var(--hovered-tab-left);
diff --git a/packages/canon/src/components/Heading/styles.css b/packages/canon/src/components/Heading/styles.css
index 9bcda2c67e..15d7eea798 100644
--- a/packages/canon/src/components/Heading/styles.css
+++ b/packages/canon/src/components/Heading/styles.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.canon-Heading {
+.bui-Heading {
   font-family: var(--bui-font-regular);
   color: var(--bui-fg-primary);
   line-height: 100%;
@@ -22,45 +22,45 @@
   margin: 0;
 }
 
-.canon-Heading[data-variant='display'] {
+.bui-Heading[data-variant='display'] {
   font-size: var(--bui-font-size-10);
   font-weight: var(--bui-font-weight-bold);
 }
 
-.canon-Heading[data-variant='title1'] {
+.bui-Heading[data-variant='title1'] {
   font-size: var(--bui-font-size-9);
   font-weight: var(--bui-font-weight-bold);
 }
 
-.canon-Heading[data-variant='title2'] {
+.bui-Heading[data-variant='title2'] {
   font-size: var(--bui-font-size-8);
   font-weight: var(--bui-font-weight-bold);
 }
 
-.canon-Heading[data-variant='title3'] {
+.bui-Heading[data-variant='title3'] {
   font-size: var(--bui-font-size-7);
   font-weight: var(--bui-font-weight-bold);
 }
 
-.canon-Heading[data-variant='title4'] {
+.bui-Heading[data-variant='title4'] {
   font-size: var(--bui-font-size-6);
   font-weight: var(--bui-font-weight-bold);
 }
 
-.canon-Heading[data-variant='title5'] {
+.bui-Heading[data-variant='title5'] {
   font-size: var(--bui-font-size-5);
   font-weight: var(--bui-font-weight-bold);
 }
 
-.canon-Heading[data-color='primary'] {
+.bui-Heading[data-color='primary'] {
   color: var(--bui-fg-primary);
 }
 
-.canon-Heading[data-color='secondary'] {
+.bui-Heading[data-color='secondary'] {
   color: var(--bui-fg-secondary);
 }
 
-.canon-Heading[data-truncate] {
+.bui-Heading[data-truncate] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/packages/canon/src/components/Icon/Icon.tsx b/packages/canon/src/components/Icon/Icon.tsx
index 85b476339d..6f1e3d9c72 100644
--- a/packages/canon/src/components/Icon/Icon.tsx
+++ b/packages/canon/src/components/Icon/Icon.tsx
@@ -25,9 +25,9 @@ export const Icon = (props: IconProps) => {
   const { name, size, className, style, ...restProps } = props;
   const { icons } = useIcons();
 
-  const CanonIcon = icons[name] as ComponentType<Omit<IconProps, 'name'>>;
+  const BckstageIcon = icons[name] as ComponentType<Omit<IconProps, 'name'>>;
 
-  if (!CanonIcon) {
+  if (!BckstageIcon) {
     console.error(`Icon "${name}" not found or is not a valid component.`);
     return null;
   }
@@ -35,7 +35,7 @@ export const Icon = (props: IconProps) => {
   const { classNames } = useStyles('Icon');
 
   return (
-    <CanonIcon
+    <BckstageIcon
       className={clsx(classNames.root, className)}
       style={{
         ...(size ? { width: size, height: size } : {}),
diff --git a/packages/canon/src/components/Icon/styles.css b/packages/canon/src/components/Icon/styles.css
index 49df1f4a21..a6a3f7d49c 100644
--- a/packages/canon/src/components/Icon/styles.css
+++ b/packages/canon/src/components/Icon/styles.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.canon-Icon {
+.bui-Icon {
   width: 1rem;
   height: 1rem;
 }
diff --git a/packages/canon/src/components/Link/styles.css b/packages/canon/src/components/Link/styles.css
index a767f14fb0..a529dcdc14 100644
--- a/packages/canon/src/components/Link/styles.css
+++ b/packages/canon/src/components/Link/styles.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.canon-Link {
+.bui-Link {
   font-family: var(--bui-font-regular);
   color: var(--bui-fg-link);
   padding: 0;
@@ -36,30 +36,30 @@
   }
 }
 
-.canon-Link[data-variant='body'] {
+.bui-Link[data-variant='body'] {
   font-size: var(--bui-font-size-3);
   line-height: 140%;
 }
 
-.canon-Link[data-variant='subtitle'] {
+.bui-Link[data-variant='subtitle'] {
   font-size: var(--bui-font-size-4);
   line-height: 140%;
 }
 
-.canon-Link[data-variant='caption'] {
+.bui-Link[data-variant='caption'] {
   font-size: var(--bui-font-size-2);
   line-height: 140%;
 }
 
-.canon-Link[data-variant='label'] {
+.bui-Link[data-variant='label'] {
   font-size: var(--bui-font-size-1);
   line-height: 140%;
 }
 
-.canon-Link[data-weight='regular'] {
+.bui-Link[data-weight='regular'] {
   font-weight: var(--bui-font-weight-regular);
 }
 
-.canon-Link[data-weight='bold'] {
+.bui-Link[data-weight='bold'] {
   font-weight: var(--bui-font-weight-bold);
 }
diff --git a/packages/canon/src/components/Menu/Combobox.tsx b/packages/canon/src/components/Menu/Combobox.tsx
index c9593ed2a4..1c475f75ca 100644
--- a/packages/canon/src/components/Menu/Combobox.tsx
+++ b/packages/canon/src/components/Menu/Combobox.tsx
@@ -66,7 +66,7 @@ function ComboboxItem({
   return (
     <div
       ref={itemRef}
-      className="canon-SubmenuComboboxItem"
+      className="bui-SubmenuComboboxItem"
       id={itemId}
       role="option"
       aria-selected={isSelected}
@@ -76,10 +76,10 @@ function ComboboxItem({
       onMouseOver={() => !option.disabled && onItemActive(optionIndex)}
       onClick={() => !option.disabled && onItemSelect(option.value)}
     >
-      <div className="canon-SubmenuComboboxItemCheckbox">
+      <div className="bui-SubmenuComboboxItemCheckbox">
         {isSelected && <Icon aria-hidden="true" name="check" size={12} />}
       </div>
-      <div className="canon-SubmenuComboboxItemLabel">{option.label}</div>
+      <div className="bui-SubmenuComboboxItemLabel">{option.label}</div>
     </div>
   );
 }
@@ -194,11 +194,11 @@ export const Combobox = forwardRef<HTMLDivElement, MenuComboboxProps>(
       <div
         ref={ref}
         role="combobox"
-        className={clsx('canon-MenuCombobox', className)}
+        className={clsx('bui-MenuCombobox', className)}
         {...rest}
       >
         <input
-          className="canon-SubmenuComboboxSearch"
+          className="bui-SubmenuComboboxSearch"
           type="text"
           role="combobox"
           placeholder="Filter..."
@@ -217,12 +217,10 @@ export const Combobox = forwardRef<HTMLDivElement, MenuComboboxProps>(
           id={listboxId}
           tabIndex={-1}
           aria-multiselectable={multiselect ? true : undefined}
-          className="canon-SubmenuComboboxItems"
+          className="bui-SubmenuComboboxItems"
         >
           {filteredOptions.length === 0 ? (
-            <div className="canon-SubmenuComboboxNoResults">
-              No results found
-            </div>
+            <div className="bui-SubmenuComboboxNoResults">No results found</div>
           ) : (
             filteredOptions.map((option, index) => (
               <ComboboxItem
diff --git a/packages/canon/src/components/Menu/Menu.styles.css b/packages/canon/src/components/Menu/Menu.styles.css
index e3f8e04599..fe1275cb56 100644
--- a/packages/canon/src/components/Menu/Menu.styles.css
+++ b/packages/canon/src/components/Menu/Menu.styles.css
@@ -1,9 +1,9 @@
-.canon-MenuPositioner {
+.bui-MenuPositioner {
   outline: 0;
   z-index: 100;
 }
 
-.canon-MenuPopup {
+.bui-MenuPopup {
   display: flex;
   flex-direction: column;
   border-radius: 0.375rem;
@@ -26,7 +26,7 @@
   }
 }
 
-.canon-MenuItem {
+.bui-MenuItem {
   outline: 0;
   user-select: none;
   display: flex;
@@ -51,7 +51,7 @@
   }
 }
 
-.canon-MenuSubmenuTrigger {
+.bui-MenuSubmenuTrigger {
   outline: 0;
   user-select: none;
   display: flex;
@@ -68,7 +68,7 @@
   cursor: pointer;
   flex-shrink: 0;
 
-  & .canon-Icon {
+  & .bui-Icon {
     color: var(--bui-fg-secondary);
   }
 
@@ -80,19 +80,19 @@
   &[data-highlighted] {
     background-color: var(--bui-gray-3);
 
-    .canon-Icon {
+    .bui-Icon {
       color: var(--bui-fg-primary);
     }
   }
 }
 
-.canon-MenuSeparator {
+.bui-MenuSeparator {
   margin: 0.375rem 1rem;
   height: 1px;
   background-color: var(--color-gray-200);
 }
 
-.canon-SubmenuComboboxSearch {
+.bui-SubmenuComboboxSearch {
   padding-inline: var(--bui-space-3);
   width: 100%;
   height: 32px;
@@ -117,7 +117,7 @@
   }
 }
 
-.canon-SubmenuComboboxItems {
+.bui-SubmenuComboboxItems {
   overflow-y: auto;
   display: flex;
   flex-direction: column;
@@ -125,7 +125,7 @@
   outline: none;
 }
 
-.canon-SubmenuComboboxNoResults {
+.bui-SubmenuComboboxNoResults {
   padding-inline: var(--bui-space-3);
   padding-top: var(--bui-space-2);
   padding-bottom: var(--bui-space-4);
@@ -133,7 +133,7 @@
   font-size: var(--bui-font-size-3);
 }
 
-.canon-SubmenuComboboxItem {
+.bui-SubmenuComboboxItem {
   outline: 0;
   user-select: none;
   display: flex;
@@ -161,7 +161,7 @@
   }
 }
 
-.canon-SubmenuComboboxItemCheckbox {
+.bui-SubmenuComboboxItemCheckbox {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -174,7 +174,7 @@
   background: var(--bui-bg-surface-1);
 }
 
-.canon-SubmenuComboboxItemLabel {
+.bui-SubmenuComboboxItemLabel {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/packages/canon/src/components/RadioGroup/RadioGroup.styles.css b/packages/canon/src/components/RadioGroup/RadioGroup.styles.css
index bf41b6c120..f12d5571e0 100644
--- a/packages/canon/src/components/RadioGroup/RadioGroup.styles.css
+++ b/packages/canon/src/components/RadioGroup/RadioGroup.styles.css
@@ -1,21 +1,21 @@
-.canon-RadioGroup {
+.bui-RadioGroup {
   display: flex;
   flex-direction: column;
   color: var(--bui-fg-primary);
 }
 
-.canon-RadioGroup[data-orientation='horizontal'] .canon-RadioGroupContent {
+.bui-RadioGroup[data-orientation='horizontal'] .bui-RadioGroupContent {
   flex-direction: row;
   gap: var(--bui-space-4);
 }
 
-.canon-RadioGroupContent {
+.bui-RadioGroupContent {
   display: flex;
   flex-direction: column;
   gap: var(--bui-space-2);
 }
 
-.canon-Radio {
+.bui-Radio {
   display: flex;
   /* This is needed so the HiddenInput is positioned correctly */
   position: relative;
diff --git a/packages/canon/src/components/ScrollArea/ScrollArea.styles.css b/packages/canon/src/components/ScrollArea/ScrollArea.styles.css
index 2ddf11089f..558a4f497d 100644
--- a/packages/canon/src/components/ScrollArea/ScrollArea.styles.css
+++ b/packages/canon/src/components/ScrollArea/ScrollArea.styles.css
@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 
-.canon-ScrollAreaRoot {
+.bui-ScrollAreaRoot {
   box-sizing: border-box;
   max-width: calc(100vw - 8rem);
 }
 
-.canon-ScrollAreaViewport {
+.bui-ScrollAreaViewport {
   height: 100%;
   overscroll-behavior: contain;
 }
 
-.canon-ScrollAreaContent {
+.bui-ScrollAreaContent {
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -33,7 +33,7 @@
   padding-right: 1.5rem;
 }
 
-.canon-ScrollAreaScrollbar {
+.bui-ScrollAreaScrollbar {
   display: flex;
   justify-content: center;
   background-color: var(--bui-scrollbar);
@@ -58,7 +58,7 @@
   }
 }
 
-.canon-ScrollAreaThumb {
+.bui-ScrollAreaThumb {
   width: 100%;
   border-radius: inherit;
   background-color: var(--bui-scrollbar-thumb);
diff --git a/packages/canon/src/components/SearchField/SearchField.styles.css b/packages/canon/src/components/SearchField/SearchField.styles.css
index 5c4376edb4..f2f808c5e0 100644
--- a/packages/canon/src/components/SearchField/SearchField.styles.css
+++ b/packages/canon/src/components/SearchField/SearchField.styles.css
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-.canon-SearchField[data-empty] .canon-InputClear {
+.bui-SearchField[data-empty] .bui-InputClear {
   display: none;
 }
 
-.canon-InputClear {
+.bui-InputClear {
   position: absolute;
   right: 0;
   top: 0;
@@ -35,21 +35,21 @@
   transition: color 0.2s ease-in-out;
 }
 
-.canon-InputClear:hover {
+.bui-InputClear:hover {
   color: var(--bui-fg-primary);
 }
 
-.canon-InputClear[data-size='small'] {
+.bui-InputClear[data-size='small'] {
   width: 2rem;
   height: 2rem;
 }
 
-.canon-InputClear[data-size='medium'] {
+.bui-InputClear[data-size='medium'] {
   width: 2.5rem;
   height: 2.5rem;
 }
 
-.canon-InputClear svg {
+.bui-InputClear svg {
   width: 1rem;
   height: 1rem;
 }
diff --git a/packages/canon/src/components/Select/Select.styles.css b/packages/canon/src/components/Select/Select.styles.css
index f0e1a72293..09730644be 100644
--- a/packages/canon/src/components/Select/Select.styles.css
+++ b/packages/canon/src/components/Select/Select.styles.css
@@ -14,25 +14,25 @@
  * limitations under the License.
  */
 
-.canon-Select {
+.bui-Select {
   display: flex;
   flex-direction: column;
   font-family: var(--bui-font-regular);
   width: 100%;
 }
 
-.canon-SelectLabel {
+.bui-SelectLabel {
   font-size: var(--bui-font-size-2);
   font-weight: var(--bui-font-weight-regular);
   color: var(--bui-fg-primary);
   margin-bottom: var(--bui-space-1_5);
   cursor: pointer;
 }
-.canon-SelectLabel[data-disabled] {
+.bui-SelectLabel[data-disabled] {
   cursor: default;
 }
 
-.canon-SelectDescription {
+.bui-SelectDescription {
   font-size: var(--bui-font-size-2);
   font-weight: var(--bui-font-weight-regular);
   color: var(--bui-fg-secondary);
@@ -40,7 +40,7 @@
   padding-top: var(--bui-space-1_5);
 }
 
-.canon-SelectError {
+.bui-SelectError {
   font-size: var(--bui-font-size-2);
   font-weight: var(--bui-font-weight-regular);
   color: var(--bui-fg-danger);
@@ -48,7 +48,7 @@
   padding-top: var(--bui-space-1_5);
 }
 
-.canon-SelectTrigger {
+.bui-SelectTrigger {
   box-sizing: border-box;
   border-radius: var(--bui-radius-3);
   border: 1px solid var(--bui-border);
@@ -67,54 +67,54 @@
   gap: var(--bui-space-2);
 }
 
-.canon-SelectTrigger::placeholder {
+.bui-SelectTrigger::placeholder {
   color: var(--bui-fg-secondary);
 }
 
-.canon-SelectTrigger:hover {
+.bui-SelectTrigger:hover {
   border-color: var(--bui-border-hover);
 }
 
-.canon-SelectTrigger:focus-visible {
+.bui-SelectTrigger:focus-visible {
   border-color: var(--bui-border-pressed);
   outline: 0;
 }
 
-.canon-SelectTrigger[data-invalid] {
+.bui-SelectTrigger[data-invalid] {
   border-color: var(--bui-fg-danger);
 }
-.canon-SelectTrigger[data-invalid]:hover {
+.bui-SelectTrigger[data-invalid]:hover {
   border-width: 2px;
 }
 
-.canon-SelectTrigger[data-invalid]:focus-visible {
+.bui-SelectTrigger[data-invalid]:focus-visible {
   border-width: 2px;
 }
 
-.canon-SelectTrigger[data-disabled] {
+.bui-SelectTrigger[data-disabled] {
   cursor: not-allowed;
   border-color: var(--bui-border-disabled);
   color: var(--bui-fg-disabled);
 }
 
-.canon-SelectTrigger[data-size='small'] {
+.bui-SelectTrigger[data-size='small'] {
   height: 2rem;
 }
 
-.canon-SelectTrigger[data-size='medium'] {
+.bui-SelectTrigger[data-size='medium'] {
   height: 3rem;
 }
 
-.canon-SelectIcon {
+.bui-SelectIcon {
   margin-left: var(--bui-space-5);
   transition: transform 0.2s ease;
 }
 
-.canon-SelectTrigger[data-popup-open] .canon-SelectIcon {
+.bui-SelectTrigger[data-popup-open] .bui-SelectIcon {
   transform: rotate(180deg);
 }
 
-.canon-SelectPopup {
+.bui-SelectPopup {
   box-sizing: border-box;
   max-height: var(--available-height);
   overflow-y: auto;
@@ -129,13 +129,13 @@
   transition: transform 150ms, opacity 150ms;
 }
 
-.canon-SelectPopup[data-starting-style],
-.canon-SelectPopup[data-ending-style] {
+.bui-SelectPopup[data-starting-style],
+.bui-SelectPopup[data-ending-style] {
   opacity: 0;
   transform: scale(0.9);
 }
 
-.canon-SelectItem {
+.bui-SelectItem {
   position: relative;
   width: var(--anchor-width);
   display: grid;
@@ -153,13 +153,13 @@
   outline: none;
 }
 
-.canon-SelectItem[data-highlighted] {
+.bui-SelectItem[data-highlighted] {
   z-index: 0;
   position: relative;
   color: var(--bui-fg-primary);
 }
 
-.canon-SelectItem[data-highlighted]::before {
+.bui-SelectItem[data-highlighted]::before {
   content: '';
   z-index: -1;
   position: absolute;
@@ -169,37 +169,37 @@
   background-color: var(--bui-bg-tint-hover);
 }
 
-.canon-SelectItem[data-disabled] {
+.bui-SelectItem[data-disabled] {
   cursor: not-allowed;
   color: var(--bui-fg-disabled);
 }
 
-.canon-SelectItemIndicator {
+.bui-SelectItemIndicator {
   grid-area: icon;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.canon-SelectItemText {
+.bui-SelectItemText {
   flex: 1;
   grid-area: text;
 }
 
-.canon-SelectRequired {
+.bui-SelectRequired {
   color: var(--bui-fg-secondary);
   font-size: var(--bui-font-size-2);
   font-weight: var(--bui-font-weight-regular);
   margin-left: var(--bui-space-1);
 }
 
-.canon-SelectIcon {
+.bui-SelectIcon {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.canon-SelectValue {
+.bui-SelectValue {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
diff --git a/packages/canon/src/components/Select/Select.tsx b/packages/canon/src/components/Select/Select.tsx
index 7bedc5e2a0..07545bb3dd 100644
--- a/packages/canon/src/components/Select/Select.tsx
+++ b/packages/canon/src/components/Select/Select.tsx
@@ -62,7 +62,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
     <div className={clsx(classNames.root, className)} style={style} ref={ref}>
       {label && (
         <label
-          className="canon-SelectLabel"
+          className="bui-SelectLabel"
           htmlFor={selectId}
           onClick={handleLabelClick}
           data-disabled={props.disabled ? true : undefined}
diff --git a/packages/canon/src/components/Skeleton/Skeleton.styles.css b/packages/canon/src/components/Skeleton/Skeleton.styles.css
index 26c6755556..bbbb6deaeb 100644
--- a/packages/canon/src/components/Skeleton/Skeleton.styles.css
+++ b/packages/canon/src/components/Skeleton/Skeleton.styles.css
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-.canon-Skeleton {
+.bui-Skeleton {
   animation: var(--bui-animate-pulse);
   background-color: var(--bui-bg-surface-2);
   border-radius: var(--bui-radius-2);
 }
 
-.canon-Skeleton[data-rounded='true'] {
+.bui-Skeleton[data-rounded='true'] {
   border-radius: var(--bui-radius-full);
 }
diff --git a/packages/canon/src/components/Switch/Switch.styles.css b/packages/canon/src/components/Switch/Switch.styles.css
index a8adff2d75..ee2a24d013 100644
--- a/packages/canon/src/components/Switch/Switch.styles.css
+++ b/packages/canon/src/components/Switch/Switch.styles.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.canon-Switch {
+.bui-Switch {
   display: flex;
   /* This is needed so the HiddenInput is positioned correctly */
   position: relative;
@@ -24,14 +24,14 @@
   color: var(--bui-fg-primary);
   cursor: pointer;
 
-  &[data-pressed] .canon-SwitchIndicator {
+  &[data-pressed] .bui-SwitchIndicator {
     &:before {
       background: var(--bui-fg-solid);
     }
   }
 
   &[data-selected] {
-    .canon-SwitchIndicator {
+    .bui-SwitchIndicator {
       background: var(--bui-bg-solid);
 
       &:before {
@@ -47,13 +47,13 @@
     }
   }
 
-  &[data-focus-visible] .canon-SwitchIndicator {
+  &[data-focus-visible] .bui-SwitchIndicator {
     outline: 2px solid;
     outline-offset: 2px;
   }
 }
 
-.canon-SwitchIndicator {
+.bui-SwitchIndicator {
   width: 2rem;
   height: 1.143rem;
   border: 2px;
diff --git a/packages/canon/src/components/Table/TableCell/TableCell.styles.css b/packages/canon/src/components/Table/TableCell/TableCell.styles.css
index e1b960bb2c..dd3857d6f8 100644
--- a/packages/canon/src/components/Table/TableCell/TableCell.styles.css
+++ b/packages/canon/src/components/Table/TableCell/TableCell.styles.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.canon-TableCell {
+.bui-TableCell {
   padding: var(--bui-space-3);
   font-size: var(--bui-font-size-3);
 }
diff --git a/packages/canon/src/components/Table/TableCellLink/TableCellLink.styles.css b/packages/canon/src/components/Table/TableCellLink/TableCellLink.styles.css
index 33d45578c2..d4e10631fe 100644
--- a/packages/canon/src/components/Table/TableCellLink/TableCellLink.styles.css
+++ b/packages/canon/src/components/Table/TableCellLink/TableCellLink.styles.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.canon-TableCellLink {
+.bui-TableCellLink {
   display: flex;
   flex-direction: column;
   gap: var(--bui-space-0_5);
diff --git a/packages/canon/src/components/Table/TableCellProfile/TableCellProfile.styles.css b/packages/canon/src/components/Table/TableCellProfile/TableCellProfile.styles.css
index 30a1559109..4ec0f74899 100644
--- a/packages/canon/src/components/Table/TableCellProfile/TableCellProfile.styles.css
+++ b/packages/canon/src/components/Table/TableCellProfile/TableCellProfile.styles.css
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-.canon-TableCellProfile {
+.bui-TableCellProfile {
   display: flex;
   flex-direction: row;
   gap: var(--bui-space-2);
   align-items: center;
 }
 
-.canon-TableCellProfileAvatar {
+.bui-TableCellProfileAvatar {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -38,13 +38,13 @@
   width: 1.25rem;
 }
 
-.canon-TableCellProfileAvatarImage {
+.bui-TableCellProfileAvatarImage {
   object-fit: cover;
   height: 100%;
   width: 100%;
 }
 
-.canon-TableCellProfileAvatarFallback {
+.bui-TableCellProfileAvatarFallback {
   align-items: center;
   display: flex;
   justify-content: center;
diff --git a/packages/canon/src/components/Table/TableCellText/TableCellText.styles.css b/packages/canon/src/components/Table/TableCellText/TableCellText.styles.css
index 653ef19330..f38f8b3689 100644
--- a/packages/canon/src/components/Table/TableCellText/TableCellText.styles.css
+++ b/packages/canon/src/components/Table/TableCellText/TableCellText.styles.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.canon-TableCellText {
+.bui-TableCellText {
   display: flex;
   flex-direction: column;
   gap: var(--bui-space-0_5);
diff --git a/packages/canon/src/components/Table/styles.css b/packages/canon/src/components/Table/styles.css
index 6b2c7c8d38..63502eaa51 100644
--- a/packages/canon/src/components/Table/styles.css
+++ b/packages/canon/src/components/Table/styles.css
@@ -1,25 +1,25 @@
-.canon-TableRoot {
+.bui-TableRoot {
   width: 100%;
   caption-side: bottom;
   border-collapse: collapse;
 }
 
-.canon-TableHead {
+.bui-TableHead {
   text-align: left;
   padding: var(--bui-space-3);
   font-size: var(--bui-font-size-3);
   color: var(--bui-fg-primary);
 }
 
-.canon-TableBody {
+.bui-TableBody {
   color: var(--bui-fg-primary);
 }
 
-.canon-TableRow {
+.bui-TableRow {
   border-bottom: 1px solid var(--bui-border);
   transition: color 0.2s ease-in-out;
 }
 
-.canon-TableBody .canon-TableRow:hover {
+.bui-TableBody .bui-TableRow:hover {
   background-color: var(--bui-gray-2);
 }
diff --git a/packages/canon/src/components/Tabs/Tabs.styles.css b/packages/canon/src/components/Tabs/Tabs.styles.css
index a8d167604d..44da74b7c7 100644
--- a/packages/canon/src/components/Tabs/Tabs.styles.css
+++ b/packages/canon/src/components/Tabs/Tabs.styles.css
@@ -1,15 +1,15 @@
-.canon-TabsRoot {
+.bui-TabsRoot {
   border: 1px solid var(--color-gray-200);
   border-radius: 0.375rem;
 }
 
-.canon-TabsList {
+.bui-TabsList {
   display: flex;
   position: relative;
   z-index: 0;
 }
 
-.canon-TabsTab {
+.bui-TabsTab {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -55,7 +55,7 @@
   }
 }
 
-.canon-TabsIndicator {
+.bui-TabsIndicator {
   position: absolute;
   z-index: -1;
   left: 0;
@@ -69,7 +69,7 @@
   transition-timing-function: ease-in-out;
 }
 
-.canon-TabsPanel {
+.bui-TabsPanel {
   &[hidden] {
     display: none;
   }
diff --git a/packages/canon/src/components/Text/styles.css b/packages/canon/src/components/Text/styles.css
index cd26944d2a..a940fcf9fa 100644
--- a/packages/canon/src/components/Text/styles.css
+++ b/packages/canon/src/components/Text/styles.css
@@ -14,61 +14,61 @@
  * limitations under the License.
  */
 
-.canon-Text {
+.bui-Text {
   font-family: var(--bui-font-regular);
   padding: 0;
   margin: 0;
 }
 
-.canon-Text[data-variant='body'] {
+.bui-Text[data-variant='body'] {
   font-size: var(--bui-font-size-3);
   line-height: 140%;
 }
 
-.canon-Text[data-variant='subtitle'] {
+.bui-Text[data-variant='subtitle'] {
   font-size: var(--bui-font-size-4);
   line-height: 140%;
 }
 
-.canon-Text[data-variant='caption'] {
+.bui-Text[data-variant='caption'] {
   font-size: var(--bui-font-size-2);
   line-height: 140%;
 }
 
-.canon-Text[data-variant='label'] {
+.bui-Text[data-variant='label'] {
   font-size: var(--bui-font-size-1);
   line-height: 140%;
 }
 
-.canon-Text[data-weight='regular'] {
+.bui-Text[data-weight='regular'] {
   font-weight: var(--bui-font-weight-regular);
 }
 
-.canon-Text[data-weight='bold'] {
+.bui-Text[data-weight='bold'] {
   font-weight: var(--bui-font-weight-bold);
 }
 
-.canon-Text[data-color='primary'] {
+.bui-Text[data-color='primary'] {
   color: var(--bui-fg-primary);
 }
 
-.canon-Text[data-color='secondary'] {
+.bui-Text[data-color='secondary'] {
   color: var(--bui-fg-secondary);
 }
 
-.canon-Text[data-color='danger'] {
+.bui-Text[data-color='danger'] {
   color: var(--bui-fg-danger);
 }
 
-.canon-Text[data-color='warning'] {
+.bui-Text[data-color='warning'] {
   color: var(--bui-fg-warning);
 }
 
-.canon-Text[data-color='success'] {
+.bui-Text[data-color='success'] {
   color: var(--bui-fg-success);
 }
 
-.canon-Text[data-truncate] {
+.bui-Text[data-truncate] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/packages/canon/src/components/TextField/TextField.styles.css b/packages/canon/src/components/TextField/TextField.styles.css
index 1ea00779e9..abdce20294 100644
--- a/packages/canon/src/components/TextField/TextField.styles.css
+++ b/packages/canon/src/components/TextField/TextField.styles.css
@@ -14,34 +14,34 @@
  * limitations under the License.
  */
 
-.canon-TextField {
+.bui-TextField {
   display: flex;
   flex-direction: column;
   font-family: var(--bui-font-regular);
   width: 100%;
 }
 
-.canon-InputWrapper {
+.bui-InputWrapper {
   position: relative;
 
-  &[data-size='small'] .canon-Input {
+  &[data-size='small'] .bui-Input {
     height: 2rem;
   }
 
-  &[data-size='medium'] .canon-Input {
+  &[data-size='medium'] .bui-Input {
     height: 2.5rem;
   }
 
-  &[data-size='small'] .canon-Input[data-icon] {
+  &[data-size='small'] .bui-Input[data-icon] {
     padding-left: var(--bui-space-8);
   }
 
-  &[data-size='medium'] .canon-Input[data-icon] {
+  &[data-size='medium'] .bui-Input[data-icon] {
     padding-left: var(--bui-space-9);
   }
 }
 
-.canon-InputIcon {
+.bui-InputIcon {
   position: absolute;
   left: var(--bui-space-3);
   top: 50%;
@@ -63,7 +63,7 @@
   }
 }
 
-.canon-Input {
+.bui-Input {
   display: flex;
   align-items: center;
   padding: 0 var(--bui-space-3);
diff --git a/packages/canon/src/components/Tooltip/Tooltip.styles.css b/packages/canon/src/components/Tooltip/Tooltip.styles.css
index 2bad68a223..b86a93b038 100644
--- a/packages/canon/src/components/Tooltip/Tooltip.styles.css
+++ b/packages/canon/src/components/Tooltip/Tooltip.styles.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.canon-Tooltip {
+.bui-Tooltip {
   box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
   border-radius: 4px;
   background: var(--bui-bg-surface-2);
@@ -44,7 +44,7 @@
     margin-top: var(--bui-space-2);
     --origin: translateY(-4px);
 
-    & .canon-TooltipArrow svg {
+    & .bui-TooltipArrow svg {
       transform: rotate(180deg);
     }
   }
@@ -53,7 +53,7 @@
     margin-left: var(--bui-space-2);
     --origin: translateX(-4px);
 
-    & .canon-TooltipArrow svg {
+    & .bui-TooltipArrow svg {
       transform: rotate(90deg);
     }
   }
@@ -62,13 +62,13 @@
     margin-right: var(--bui-space-2);
     --origin: translateX(4px);
 
-    & .canon-TooltipArrow svg {
+    & .bui-TooltipArrow svg {
       transform: rotate(-90deg);
     }
   }
 }
 
-.canon-TooltipArrow svg {
+.bui-TooltipArrow svg {
   display: block;
   fill: var(--bui-bg-surface-1);
 }
diff --git a/packages/canon/src/utils/componentDefinitions.ts b/packages/canon/src/utils/componentDefinitions.ts
index 829ac5d861..ecba9646f0 100644
--- a/packages/canon/src/utils/componentDefinitions.ts
+++ b/packages/canon/src/utils/componentDefinitions.ts
@@ -17,15 +17,15 @@
 import type { ComponentDefinition } from '../types';
 
 /**
- * Component definitions for the Canon library
+ * Component definitions for the Backstage UI library
  * @public
  */
 export const componentDefinitions = {
   Avatar: {
     classNames: {
-      root: 'canon-AvatarRoot',
-      image: 'canon-AvatarImage',
-      fallback: 'canon-AvatarFallback',
+      root: 'bui-AvatarRoot',
+      image: 'bui-AvatarImage',
+      fallback: 'bui-AvatarFallback',
     },
     dataAttributes: {
       size: ['small', 'medium', 'large'] as const,
@@ -33,12 +33,12 @@ export const componentDefinitions = {
   },
   Box: {
     classNames: {
-      root: 'canon-Box',
+      root: 'bui-Box',
     },
   },
   Button: {
     classNames: {
-      root: 'canon-Button',
+      root: 'bui-Button',
     },
     dataAttributes: {
       size: ['small', 'medium', 'large'] as const,
@@ -47,27 +47,27 @@ export const componentDefinitions = {
   },
   ButtonIcon: {
     classNames: {
-      root: 'canon-ButtonIcon',
+      root: 'bui-ButtonIcon',
     },
   },
   ButtonLink: {
     classNames: {
-      root: 'canon-ButtonLink',
+      root: 'bui-ButtonLink',
     },
   },
   Card: {
     classNames: {
-      root: 'canon-Card',
-      header: 'canon-CardHeader',
-      body: 'canon-CardBody',
-      footer: 'canon-CardFooter',
+      root: 'bui-Card',
+      header: 'bui-CardHeader',
+      body: 'bui-CardBody',
+      footer: 'bui-CardFooter',
     },
   },
   Checkbox: {
     classNames: {
-      root: 'canon-CheckboxRoot',
-      label: 'canon-CheckboxLabel',
-      indicator: 'canon-CheckboxIndicator',
+      root: 'bui-CheckboxRoot',
+      label: 'bui-CheckboxLabel',
+      indicator: 'bui-CheckboxIndicator',
     },
     dataAttributes: {
       checked: [true, false] as const,
@@ -75,38 +75,38 @@ export const componentDefinitions = {
   },
   Collapsible: {
     classNames: {
-      root: 'canon-CollapsibleRoot',
-      trigger: 'canon-CollapsibleTrigger',
-      panel: 'canon-CollapsiblePanel',
+      root: 'bui-CollapsibleRoot',
+      trigger: 'bui-CollapsibleTrigger',
+      panel: 'bui-CollapsiblePanel',
     },
   },
   Container: {
     classNames: {
-      root: 'canon-Container',
+      root: 'bui-Container',
     },
   },
   FieldLabel: {
     classNames: {
-      root: 'canon-FieldLabelWrapper',
-      label: 'canon-FieldLabel',
-      secondaryLabel: 'canon-FieldSecondaryLabel',
-      description: 'canon-FieldDescription',
+      root: 'bui-FieldLabelWrapper',
+      label: 'bui-FieldLabel',
+      secondaryLabel: 'bui-FieldSecondaryLabel',
+      description: 'bui-FieldDescription',
     },
   },
   Flex: {
     classNames: {
-      root: 'canon-Flex',
+      root: 'bui-Flex',
     },
   },
   Grid: {
     classNames: {
-      root: 'canon-Grid',
-      item: 'canon-GridItem',
+      root: 'bui-Grid',
+      item: 'bui-GridItem',
     },
   },
   Heading: {
     classNames: {
-      root: 'canon-Heading',
+      root: 'bui-Heading',
     },
     dataAttributes: {
       variant: ['title1', 'title2', 'title3', 'subtitle'] as const,
@@ -116,12 +116,12 @@ export const componentDefinitions = {
   },
   Icon: {
     classNames: {
-      root: 'canon-Icon',
+      root: 'bui-Icon',
     },
   },
   Link: {
     classNames: {
-      root: 'canon-Link',
+      root: 'bui-Link',
     },
     dataAttributes: {
       variant: ['subtitle', 'body', 'caption', 'label'] as const,
@@ -130,57 +130,57 @@ export const componentDefinitions = {
   },
   Menu: {
     classNames: {
-      trigger: 'canon-MenuTrigger',
-      backdrop: 'canon-MenuBackdrop',
-      positioner: 'canon-MenuPositioner',
-      popup: 'canon-MenuPopup',
-      arrow: 'canon-MenuArrow',
-      item: 'canon-MenuItem',
-      group: 'canon-MenuGroup',
-      groupLabel: 'canon-MenuGroupLabel',
-      radioGroup: 'canon-MenuRadioGroup',
-      radioItem: 'canon-MenuRadioItem',
-      radioItemIndicator: 'canon-MenuRadioItemIndicator',
-      checkboxItem: 'canon-MenuCheckboxItem',
-      checkboxItemIndicator: 'canon-MenuCheckboxItemIndicator',
-      submenuTrigger: 'canon-MenuSubmenuTrigger',
-      separator: 'canon-MenuSeparator',
+      trigger: 'bui-MenuTrigger',
+      backdrop: 'bui-MenuBackdrop',
+      positioner: 'bui-MenuPositioner',
+      popup: 'bui-MenuPopup',
+      arrow: 'bui-MenuArrow',
+      item: 'bui-MenuItem',
+      group: 'bui-MenuGroup',
+      groupLabel: 'bui-MenuGroupLabel',
+      radioGroup: 'bui-MenuRadioGroup',
+      radioItem: 'bui-MenuRadioItem',
+      radioItemIndicator: 'bui-MenuRadioItemIndicator',
+      checkboxItem: 'bui-MenuCheckboxItem',
+      checkboxItemIndicator: 'bui-MenuCheckboxItemIndicator',
+      submenuTrigger: 'bui-MenuSubmenuTrigger',
+      separator: 'bui-MenuSeparator',
     },
   },
   RadioGroup: {
     classNames: {
-      root: 'canon-RadioGroup',
-      content: 'canon-RadioGroupContent',
-      radio: 'canon-Radio',
+      root: 'bui-RadioGroup',
+      content: 'bui-RadioGroupContent',
+      radio: 'bui-Radio',
     },
   },
   ScrollArea: {
     classNames: {
-      root: 'canon-ScrollAreaRoot',
-      viewport: 'canon-ScrollAreaViewport',
-      scrollbar: 'canon-ScrollAreaScrollbar',
-      thumb: 'canon-ScrollAreaThumb',
+      root: 'bui-ScrollAreaRoot',
+      viewport: 'bui-ScrollAreaViewport',
+      scrollbar: 'bui-ScrollAreaScrollbar',
+      thumb: 'bui-ScrollAreaThumb',
     },
   },
   SearchField: {
     classNames: {
-      root: 'canon-SearchField',
-      clear: 'canon-InputClear',
+      root: 'bui-SearchField',
+      clear: 'bui-InputClear',
     },
   },
   Select: {
     classNames: {
-      root: 'canon-Select',
-      required: 'canon-SelectRequired',
-      trigger: 'canon-SelectTrigger',
-      value: 'canon-SelectValue',
-      icon: 'canon-SelectIcon',
-      popup: 'canon-SelectPopup',
-      item: 'canon-SelectItem',
-      itemIndicator: 'canon-SelectItemIndicator',
-      itemText: 'canon-SelectItemText',
-      description: 'canon-SelectDescription',
-      error: 'canon-SelectError',
+      root: 'bui-Select',
+      required: 'bui-SelectRequired',
+      trigger: 'bui-SelectTrigger',
+      value: 'bui-SelectValue',
+      icon: 'bui-SelectIcon',
+      popup: 'bui-SelectPopup',
+      item: 'bui-SelectItem',
+      itemIndicator: 'bui-SelectItemIndicator',
+      itemText: 'bui-SelectItemText',
+      description: 'bui-SelectDescription',
+      error: 'bui-SelectError',
     },
     dataAttributes: {
       size: ['small', 'medium'] as const,
@@ -188,46 +188,46 @@ export const componentDefinitions = {
   },
   Skeleton: {
     classNames: {
-      root: 'canon-Skeleton',
+      root: 'bui-Skeleton',
     },
   },
   Switch: {
     classNames: {
-      root: 'canon-Switch',
-      indicator: 'canon-SwitchIndicator',
+      root: 'bui-Switch',
+      indicator: 'bui-SwitchIndicator',
     },
   },
   Table: {
     classNames: {
-      root: 'canon-TableRoot',
-      header: 'canon-TableHeader',
-      body: 'canon-TableBody',
-      row: 'canon-TableRow',
-      head: 'canon-TableHead',
-      caption: 'canon-TableCaption',
-      cell: 'canon-TableCell',
-      cellText: 'canon-TableCellText',
-      cellLink: 'canon-TableCellLink',
-      cellProfile: 'canon-TableCellProfile',
-      cellProfileAvatar: 'canon-TableCellProfileAvatar',
-      cellProfileAvatarImage: 'canon-TableCellProfileAvatarImage',
-      cellProfileAvatarFallback: 'canon-TableCellProfileAvatarFallback',
-      cellProfileName: 'canon-TableCellProfileName',
-      cellProfileLink: 'canon-TableCellProfileLink',
+      root: 'bui-TableRoot',
+      header: 'bui-TableHeader',
+      body: 'bui-TableBody',
+      row: 'bui-TableRow',
+      head: 'bui-TableHead',
+      caption: 'bui-TableCaption',
+      cell: 'bui-TableCell',
+      cellText: 'bui-TableCellText',
+      cellLink: 'bui-TableCellLink',
+      cellProfile: 'bui-TableCellProfile',
+      cellProfileAvatar: 'bui-TableCellProfileAvatar',
+      cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage',
+      cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback',
+      cellProfileName: 'bui-TableCellProfileName',
+      cellProfileLink: 'bui-TableCellProfileLink',
     },
   },
   Tabs: {
     classNames: {
-      root: 'canon-TabsRoot',
-      list: 'canon-TabsList',
-      indicator: 'canon-TabsIndicator',
-      tab: 'canon-TabsTab',
-      panel: 'canon-TabsPanel',
+      root: 'bui-TabsRoot',
+      list: 'bui-TabsList',
+      indicator: 'bui-TabsIndicator',
+      tab: 'bui-TabsTab',
+      panel: 'bui-TabsPanel',
     },
   },
   Text: {
     classNames: {
-      root: 'canon-Text',
+      root: 'bui-Text',
     },
     dataAttributes: {
       variant: ['subtitle', 'body', 'caption', 'label'] as const,
@@ -238,10 +238,10 @@ export const componentDefinitions = {
   },
   TextField: {
     classNames: {
-      root: 'canon-TextField',
-      inputWrapper: 'canon-InputWrapper',
-      input: 'canon-Input',
-      inputIcon: 'canon-InputIcon',
+      root: 'bui-TextField',
+      inputWrapper: 'bui-InputWrapper',
+      input: 'bui-Input',
+      inputIcon: 'bui-InputIcon',
     },
     dataAttributes: {
       invalid: [true, false] as const,
@@ -250,28 +250,28 @@ export const componentDefinitions = {
   },
   Header: {
     classNames: {
-      toolbar: 'canon-HeaderToolbar',
-      toolbarWrapper: 'canon-HeaderToolbarWrapper',
-      toolbarContent: 'canon-HeaderToolbarContent',
-      toolbarControls: 'canon-HeaderToolbarControls',
-      toolbarIcon: 'canon-HeaderToolbarIcon',
-      toolbarName: 'canon-HeaderToolbarName',
-      breadcrumbs: 'canon-HeaderBreadcrumbs',
-      breadcrumb: 'canon-HeaderBreadcrumb',
-      breadcrumbLink: 'canon-HeaderBreadcrumbLink',
-      breadcrumbSeparator: 'canon-HeaderBreadcrumbSeparator',
-      tabs: 'canon-HeaderTabs',
-      tabList: 'canon-HeaderTabList',
-      tab: 'canon-HeaderTab',
-      tabActive: 'canon-HeaderTabActive',
-      tabHovered: 'canon-HeaderTabHovered',
-      subNav: 'canon-HeaderSubNav',
+      toolbar: 'bui-HeaderToolbar',
+      toolbarWrapper: 'bui-HeaderToolbarWrapper',
+      toolbarContent: 'bui-HeaderToolbarContent',
+      toolbarControls: 'bui-HeaderToolbarControls',
+      toolbarIcon: 'bui-HeaderToolbarIcon',
+      toolbarName: 'bui-HeaderToolbarName',
+      breadcrumbs: 'bui-HeaderBreadcrumbs',
+      breadcrumb: 'bui-HeaderBreadcrumb',
+      breadcrumbLink: 'bui-HeaderBreadcrumbLink',
+      breadcrumbSeparator: 'bui-HeaderBreadcrumbSeparator',
+      tabs: 'bui-HeaderTabs',
+      tabList: 'bui-HeaderTabList',
+      tab: 'bui-HeaderTab',
+      tabActive: 'bui-HeaderTabActive',
+      tabHovered: 'bui-HeaderTabHovered',
+      subNav: 'bui-HeaderSubNav',
     },
   },
   Tooltip: {
     classNames: {
-      tooltip: 'canon-Tooltip',
-      arrow: 'canon-TooltipArrow',
+      tooltip: 'bui-Tooltip',
+      arrow: 'bui-TooltipArrow',
     },
   },
 } as const satisfies Record<string, ComponentDefinition>;