From b6551bfffb7677279f379f1297bdc1f1eba87e02 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 6 Jul 2024 21:19:03 +0200
Subject: [PATCH 01/10] refactor(CPopover, CTooltip): prevent interface
 flickering when component change visibility

---
 packages/coreui-react/src/components/popover/CPopover.tsx | 8 ++++++++
 packages/coreui-react/src/components/tooltip/CTooltip.tsx | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/packages/coreui-react/src/components/popover/CPopover.tsx b/packages/coreui-react/src/components/popover/CPopover.tsx
index 3f239a8b..24a41c20 100644
--- a/packages/coreui-react/src/components/popover/CPopover.tsx
+++ b/packages/coreui-react/src/components/popover/CPopover.tsx
@@ -149,6 +149,7 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
             }
 
             initPopper(togglerRef.current, popoverRef.current, popperConfig)
+            popoverRef.current.style.removeProperty('display')
             popoverRef.current.classList.add('show')
             onShow && onShow()
           }
@@ -160,6 +161,10 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
           popoverRef.current.classList.remove('show')
           onHide && onHide()
           executeAfterTransition(() => {
+            if (popoverRef.current) {
+              popoverRef.current.style.display = 'none'
+            }
+
             destroyPopper()
             setMounted(false)
           }, popoverRef.current)
@@ -193,6 +198,9 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
               id={uID.current}
               ref={forkedRef}
               role="tooltip"
+              style={{
+                display: 'none',
+              }}
               {...rest}
             >
               <div className="popover-arrow"></div>
diff --git a/packages/coreui-react/src/components/tooltip/CTooltip.tsx b/packages/coreui-react/src/components/tooltip/CTooltip.tsx
index 18d0629f..56158a3f 100644
--- a/packages/coreui-react/src/components/tooltip/CTooltip.tsx
+++ b/packages/coreui-react/src/components/tooltip/CTooltip.tsx
@@ -144,6 +144,7 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
             }
 
             initPopper(togglerRef.current, tooltipRef.current, popperConfig)
+            tooltipRef.current.style.removeProperty('display')
             tooltipRef.current.classList.add('show')
             onShow && onShow()
           }
@@ -155,6 +156,10 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
           tooltipRef.current.classList.remove('show')
           onHide && onHide()
           executeAfterTransition(() => {
+            if (tooltipRef.current) {
+              tooltipRef.current.style.display = 'none'
+            }
+
             destroyPopper()
             setMounted(false)
           }, tooltipRef.current)
@@ -192,6 +197,9 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
               id={uID.current}
               ref={forkedRef}
               role="tooltip"
+              style={{
+                display: 'none',
+              }}
               {...rest}
             >
               <div className="tooltip-arrow"></div>

From df09e844de2cf0d89dbb46383217b632024b5790 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 7 Jul 2024 12:43:20 +0200
Subject: [PATCH 02/10] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@rollup/plugin-commonjs           ^25.0.8  →  ^26.0.1
@testing-library/jest-dom          ^6.4.5  →   ^6.4.6
@testing-library/react            ^14.3.1  →  ^16.0.0
@typescript-eslint/eslint-plugin  ^7.10.0  →  ^7.15.0
@typescript-eslint/parser         ^7.10.0  →  ^7.15.0
eslint-plugin-react               ^7.34.1  →  ^7.34.3
eslint-plugin-unicorn             ^51.0.1  →  ^54.0.0
gatsby                            ^5.13.5  →  ^5.13.6
lerna                              ^8.1.3  →   ^8.1.6
prettier                           ^3.2.5  →   ^3.3.2
rimraf                             ^5.0.7  →   ^5.0.8
sass                              ^1.77.2  →  ^1.77.6
ts-jest                           ^29.1.3  →  ^29.1.5
tslib                              ^2.6.2  →   ^2.6.3
typescript                         ^5.4.5  →   ^5.5.3
---
 package.json                       | 12 ++++++------
 packages/coreui-react/package.json | 12 ++++++------
 packages/docs/package.json         |  6 +++---
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 109914f1..2b78740b 100644
--- a/package.json
+++ b/package.json
@@ -22,17 +22,17 @@
     "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.10.0",
-    "@typescript-eslint/parser": "^7.10.0",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-unicorn": "^51.0.1",
-    "lerna": "^8.1.3",
+    "eslint-plugin-unicorn": "^54.0.0",
+    "lerna": "^8.1.6",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.2.5"
+    "prettier": "^3.3.2"
   },
   "overrides": {
     "gatsby-remark-external-links": {
diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json
index 7037b5a5..2ee8ed22 100644
--- a/packages/coreui-react/package.json
+++ b/packages/coreui-react/package.json
@@ -46,11 +46,11 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^14.3.1",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
     "@types/react": "18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -63,9 +63,9 @@
     "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.5",
     "rollup": "^4.18.0",
-    "ts-jest": "^29.1.3",
-    "tslib": "^2.6.2",
-    "typescript": "^5.4.5"
+    "ts-jest": "^29.1.5",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3"
   },
   "peerDependencies": {
     "react": ">=17",
diff --git a/packages/docs/package.json b/packages/docs/package.json
index b48e3519..3331d01e 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -34,7 +34,7 @@
     "@mdx-js/mdx": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
     "@types/react-helmet": "^6.1.11",
-    "gatsby": "^5.13.5",
+    "gatsby": "^5.13.6",
     "gatsby-plugin-google-tagmanager": "^5.13.1",
     "gatsby-plugin-image": "^3.13.1",
     "gatsby-plugin-manifest": "^5.13.1",
@@ -58,8 +58,8 @@
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-imask": "^7.6.1",
-    "rimraf": "^5.0.7",
-    "sass": "^1.77.2"
+    "rimraf": "^5.0.8",
+    "sass": "^1.77.6"
   },
   "devDependencies": {
     "npm-run-all": "^4.1.5"

From 8ab945e3d5f7ec6a9571d3091e06f7b7a7920132 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 7 Jul 2024 12:44:42 +0200
Subject: [PATCH 03/10] refactor(CButton): improve colors and variants handling

---
 packages/coreui-react/src/components/button/CButton.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/coreui-react/src/components/button/CButton.tsx b/packages/coreui-react/src/components/button/CButton.tsx
index 01efb820..f8f5e17a 100644
--- a/packages/coreui-react/src/components/button/CButton.tsx
+++ b/packages/coreui-react/src/components/button/CButton.tsx
@@ -74,8 +74,11 @@ export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps>
         {...(!rest.href && { type: type })}
         className={classNames(
           'btn',
-          variant ? `btn-${variant}-${color}` : `btn-${color}`,
-          { [`btn-${size}`]: size },
+          {
+            [`btn-${color}`]: color && !variant,
+            [`btn-${variant}-${color}`]: color && variant,
+            [`btn-${size}`]: size,
+          },
           shape,
           className,
         )}

From 54c1df14c54571b2cc982239eb888a40e9a544fb Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 7 Jul 2024 12:45:18 +0200
Subject: [PATCH 04/10] tests: update tests and snapshots

---
 .../__tests__/CButtonGroup.spec.tsx           | 12 +++++-----
 .../__tests__/CButtonToolbar.spec.tsx         | 12 +++++-----
 .../button/__tests__/CButton.spec.tsx         |  2 +-
 .../__tests__/CDropdownToggle.spec.tsx        |  2 +-
 .../__snapshots__/CDropdown.spec.tsx.snap     |  2 +-
 .../CDropdownToggle.spec.tsx.snap             |  2 +-
 .../modal/__tests__/CModal.spec.tsx           |  2 +-
 .../__snapshots__/CNavItem.spec.tsx.snap      | 20 ++++++++++-------
 .../popover/__tests__/CPopover.spec.tsx       |  4 ++--
 .../__snapshots__/CPopover.spec.tsx.snap      | 22 +++++++++++++++++++
 .../__snapshots__/CSidebarBrand.spec.tsx.snap |  8 +++----
 .../__snapshots__/CSidebarNav.spec.tsx.snap   |  8 +++++--
 .../__snapshots__/CTabPane.spec.tsx.snap      |  2 +-
 .../__snapshots__/CToaster.spec.tsx.snap      |  2 +-
 .../__snapshots__/CTooltip.spec.tsx.snap      |  1 +
 .../__snapshots__/CWidgetStatsC.spec.tsx.snap |  2 +-
 16 files changed, 67 insertions(+), 36 deletions(-)

diff --git a/packages/coreui-react/src/components/button-group/__tests__/CButtonGroup.spec.tsx b/packages/coreui-react/src/components/button-group/__tests__/CButtonGroup.spec.tsx
index 6e286f65..84671690 100644
--- a/packages/coreui-react/src/components/button-group/__tests__/CButtonGroup.spec.tsx
+++ b/packages/coreui-react/src/components/button-group/__tests__/CButtonGroup.spec.tsx
@@ -11,9 +11,9 @@ test('loads and displays CButtonGroup component', async () => {
 test('CButtonGroup customize', async () => {
   const { container } = render(
     <CButtonGroup className="bazinga" size="lg" vertical={false}>
-      <CButton>Test A</CButton>
-      <CButton>Test B</CButton>
-      <CButton>Test C</CButton>
+      <CButton color="primary">Test A</CButton>
+      <CButton color="primary">Test B</CButton>
+      <CButton color="primary">Test C</CButton>
     </CButtonGroup>,
   )
   expect(container).toMatchSnapshot()
@@ -25,9 +25,9 @@ test('CButtonGroup customize', async () => {
 test('CButtonGroup customize vertical', async () => {
   const { container } = render(
     <CButtonGroup className="bazinga" size="lg" vertical={true}>
-      <CButton>Test A</CButton>
-      <CButton>Test B</CButton>
-      <CButton>Test C</CButton>
+      <CButton color="primary">Test A</CButton>
+      <CButton color="primary">Test B</CButton>
+      <CButton color="primary">Test C</CButton>
     </CButtonGroup>,
   )
   expect(container).toMatchSnapshot()
diff --git a/packages/coreui-react/src/components/button-group/__tests__/CButtonToolbar.spec.tsx b/packages/coreui-react/src/components/button-group/__tests__/CButtonToolbar.spec.tsx
index 5f59d423..f90c74cc 100644
--- a/packages/coreui-react/src/components/button-group/__tests__/CButtonToolbar.spec.tsx
+++ b/packages/coreui-react/src/components/button-group/__tests__/CButtonToolbar.spec.tsx
@@ -12,14 +12,14 @@ test('CButtonToolbar customize', async () => {
   const { container } = render(
     <CButtonToolbar className="bazinga" role="group" aria-label="Bazinga">
       <CButtonGroup role="group">
-        <CButton>1</CButton>
-        <CButton>2</CButton>
-        <CButton>3</CButton>
+        <CButton color="primary">1</CButton>
+        <CButton color="primary">2</CButton>
+        <CButton color="primary">3</CButton>
       </CButtonGroup>
       <CButtonGroup role="group">
-        <CButton>A</CButton>
-        <CButton>B</CButton>
-        <CButton>C</CButton>
+        <CButton color="primary">A</CButton>
+        <CButton color="primary">B</CButton>
+        <CButton color="primary">C</CButton>
       </CButtonGroup>
     </CButtonToolbar>,
   )
diff --git a/packages/coreui-react/src/components/button/__tests__/CButton.spec.tsx b/packages/coreui-react/src/components/button/__tests__/CButton.spec.tsx
index a547189a..27f3f8ce 100644
--- a/packages/coreui-react/src/components/button/__tests__/CButton.spec.tsx
+++ b/packages/coreui-react/src/components/button/__tests__/CButton.spec.tsx
@@ -4,7 +4,7 @@ import '@testing-library/jest-dom'
 import { CButton } from '../../../index'
 
 test('loads and displays CButton component', async () => {
-  const { container } = render(<CButton>Test</CButton>)
+  const { container } = render(<CButton color="primary">Test</CButton>)
   expect(container).toMatchSnapshot()
 })
 
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx
index 99c20985..5d9db7e7 100644
--- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx
+++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx
@@ -10,7 +10,7 @@ test('loads and displays CDropdownToggle component', async () => {
 
 test('CDropdownToggle customize', async () => {
   const { container } = render(
-    <CDropdownToggle caret={true} split={true} trigger="focus">
+    <CDropdownToggle caret={true} color="primary" split={true} trigger="focus">
       Test
     </CDropdownToggle>,
   )
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap
index 315f0287..f6741bfd 100644
--- a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap
+++ b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap
@@ -17,7 +17,7 @@ exports[`CDropdown example 1`] = `
   >
     <button
       aria-expanded="false"
-      class="btn btn-primary dropdown-toggle"
+      class="btn dropdown-toggle"
       tabindex="0"
       type="button"
     >
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.tsx.snap
index cb0745bb..9486fa02 100644
--- a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.tsx.snap
+++ b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.tsx.snap
@@ -20,7 +20,7 @@ exports[`CDropdownToggle customize 1`] = `
 exports[`loads and displays CDropdownToggle component 1`] = `
 <div>
   <button
-    class="btn btn-primary dropdown-toggle"
+    class="btn dropdown-toggle"
     tabindex="0"
     type="button"
   >
diff --git a/packages/coreui-react/src/components/modal/__tests__/CModal.spec.tsx b/packages/coreui-react/src/components/modal/__tests__/CModal.spec.tsx
index 0ad365cb..22b6f0c9 100644
--- a/packages/coreui-react/src/components/modal/__tests__/CModal.spec.tsx
+++ b/packages/coreui-react/src/components/modal/__tests__/CModal.spec.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CModal } from '../../../index'
 
 test('loads and displays CModal component', async () => {
diff --git a/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavItem.spec.tsx.snap b/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavItem.spec.tsx.snap
index 4a8940f6..da8174ed 100644
--- a/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavItem.spec.tsx.snap
+++ b/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavItem.spec.tsx.snap
@@ -2,35 +2,39 @@
 
 exports[`CNavItem customize 1`] = `
 <div>
-  <li
+  <h3
     class="nav-item bazinga"
   >
-    <h3
+    <a
       aria-current="page"
+      aria-disabled="true"
       class="nav-link bazinga active disabled"
       disabled=""
       href="/bazinga"
+      tabindex="-1"
     >
       Test
-    </h3>
-  </li>
+    </a>
+  </h3>
 </div>
 `;
 
 exports[`CNavItem customize 2`] = `
 <div>
-  <li
+  <h3
     class="nav-item bazinga"
   >
-    <h3
+    <a
       aria-current="page"
+      aria-disabled="true"
       class="nav-link bazinga active disabled"
       disabled=""
       href="/bazinga"
+      tabindex="-1"
     >
       Test
-    </h3>
-  </li>
+    </a>
+  </h3>
 </div>
 `;
 
diff --git a/packages/coreui-react/src/components/popover/__tests__/CPopover.spec.tsx b/packages/coreui-react/src/components/popover/__tests__/CPopover.spec.tsx
index 0005c7aa..95ef134b 100644
--- a/packages/coreui-react/src/components/popover/__tests__/CPopover.spec.tsx
+++ b/packages/coreui-react/src/components/popover/__tests__/CPopover.spec.tsx
@@ -6,7 +6,7 @@ import { CPopover, CButton } from '../../../index'
 test('loads and displays CPopover component', async () => {
   const { container } = render(
     <CPopover content="A">
-      <CButton>Test</CButton>
+      <CButton color="primary">Test</CButton>
     </CPopover>,
   )
   expect(container).toMatchSnapshot()
@@ -17,7 +17,7 @@ test('CPopover customize', async () => {
   let arr, element
   const { container } = render(
     <CPopover content="content" title="title" trigger="click" placement="right">
-      <CButton>Test</CButton>
+      <CButton color="primary">Test</CButton>
     </CPopover>,
     { container: document.body },
   )
diff --git a/packages/coreui-react/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap b/packages/coreui-react/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap
index e57f1613..dc4c83e6 100644
--- a/packages/coreui-react/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap
+++ b/packages/coreui-react/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap
@@ -3,11 +3,33 @@
 exports[`CPopover customize 1`] = `
 <body>
   <button
+    aria-describedby="popover744956"
     class="btn btn-primary"
     type="button"
   >
     Test
   </button>
+  <div
+    class="popover bs-popover-auto fade show"
+    id="popover744956"
+    role="tooltip"
+    style="position: absolute; left: 0px; top: 0px; margin: 0px;"
+  >
+    <div
+      class="popover-arrow"
+      style="position: absolute;"
+    />
+    <div
+      class="popover-header"
+    >
+      title
+    </div>
+    <div
+      class="popover-body"
+    >
+      content
+    </div>
+  </div>
 </body>
 `;
 
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarBrand.spec.tsx.snap b/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarBrand.spec.tsx.snap
index 7a6430f1..a307004e 100644
--- a/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarBrand.spec.tsx.snap
+++ b/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarBrand.spec.tsx.snap
@@ -2,21 +2,21 @@
 
 exports[`CSidebarBrand customize 1`] = `
 <div>
-  <div
+  <a
     class="sidebar-brand bazinga"
   >
     Test
-  </div>
+  </a>
 </div>
 `;
 
 exports[`loads and displays CSidebarBrand component 1`] = `
 <div>
-  <div
+  <a
     class="sidebar-brand"
     color="primary"
   >
     Test
-  </div>
+  </a>
 </div>
 `;
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarNav.spec.tsx.snap b/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarNav.spec.tsx.snap
index db0872b0..4dd9cd96 100644
--- a/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarNav.spec.tsx.snap
+++ b/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarNav.spec.tsx.snap
@@ -4,7 +4,9 @@ exports[`CSidebarNav customize 1`] = `
 <div>
   <ul
     class="sidebar-nav bazinga"
-  />
+  >
+    Test
+  </ul>
 </div>
 `;
 
@@ -12,6 +14,8 @@ exports[`loads and displays CSidebarNav component 1`] = `
 <div>
   <ul
     class="sidebar-nav"
-  />
+  >
+    Test
+  </ul>
 </div>
 `;
diff --git a/packages/coreui-react/src/components/tabs/__tests__/__snapshots__/CTabPane.spec.tsx.snap b/packages/coreui-react/src/components/tabs/__tests__/__snapshots__/CTabPane.spec.tsx.snap
index a1127e85..7f453cdb 100644
--- a/packages/coreui-react/src/components/tabs/__tests__/__snapshots__/CTabPane.spec.tsx.snap
+++ b/packages/coreui-react/src/components/tabs/__tests__/__snapshots__/CTabPane.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`CTabPane customize 1`] = `
 <div>
   <div
-    class="tab-pane fade active show bazinga"
+    class="tab-pane active fade show bazinga"
   >
     Test
   </div>
diff --git a/packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToaster.spec.tsx.snap b/packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToaster.spec.tsx.snap
index f4c8f07d..2a2f88f5 100644
--- a/packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToaster.spec.tsx.snap
+++ b/packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToaster.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`CToaster customize 1`] = `
     class="toaster toast-container bazinga"
   />
   <button
-    class="btn btn-primary"
+    class="btn"
     type="button"
   >
     Send a toast
diff --git a/packages/coreui-react/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap b/packages/coreui-react/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap
index ad0c7594..aed23818 100644
--- a/packages/coreui-react/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap
+++ b/packages/coreui-react/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap
@@ -3,6 +3,7 @@
 exports[`CTooltip customize 1`] = `
 <div>
   <a
+    aria-describedby="tooltip97108"
     class="link"
   >
     Test
diff --git a/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.tsx.snap b/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.tsx.snap
index 9559d000..fb4f4455 100644
--- a/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.tsx.snap
+++ b/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.tsx.snap
@@ -9,7 +9,7 @@ exports[`CWidgetStatsC customize 1`] = `
       class="card-body"
     >
       <div
-        class="text-end mb-4"
+        class="text-end mb-4 text-white text-opacity-75"
       >
         icon
       </div>

From 7fa5ed2cfbed8a51d53ca76d35f5744d16b94cfd Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 14 Jul 2024 18:20:40 +0200
Subject: [PATCH 05/10] docs: add `CIconSvg` component documentation

---
 packages/coreui-icons-react                |  2 +-
 packages/docs/content/api/CIconSvg.api.mdx | 15 +++++
 packages/docs/content/components/icon.mdx  | 69 ++++++++++++++++++++--
 packages/docs/package.json                 |  2 +-
 4 files changed, 81 insertions(+), 7 deletions(-)
 create mode 100644 packages/docs/content/api/CIconSvg.api.mdx

diff --git a/packages/coreui-icons-react b/packages/coreui-icons-react
index bcbe37d7..aad2d31c 160000
--- a/packages/coreui-icons-react
+++ b/packages/coreui-icons-react
@@ -1 +1 @@
-Subproject commit bcbe37d75c46bfa18e8c1b3c903d60fe8f0b1222
+Subproject commit aad2d31c3cd8ca4d3ed7457ef02730f60038b6e8
diff --git a/packages/docs/content/api/CIconSvg.api.mdx b/packages/docs/content/api/CIconSvg.api.mdx
new file mode 100644
index 00000000..29a8ed9f
--- /dev/null
+++ b/packages/docs/content/api/CIconSvg.api.mdx
@@ -0,0 +1,15 @@
+
+```jsx
+import { CIconSvg } from '@coreui/icons-react'
+// or
+import CIconSvg from '@coreui/icons-react/src/CIconSvg'
+```
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| **className** | A string of all className you want applied to the component. | `string` | - |
+| **customClassName** | Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. | `string` \| `string[]` | - |
+| **height** | The height attribute defines the vertical length of an icon. | `number` | - |
+| **size** | Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'. | `'custom'` \| `'custom-size'` \| `'sm'` \| `'lg'` \| `'xl'` \| `'xxl'` \| `'3xl'` \| `'4xl'` \| `'5xl'` \| `'6xl'` \| `'7xl'` \| `'8xl'` \| `'9xl'` | - |
+| **title** | Title tag content. | `string` | - |
+| **width** | The width attribute defines the horizontal length of an icon. | `number` | - |
diff --git a/packages/docs/content/components/icon.mdx b/packages/docs/content/components/icon.mdx
index 795072b5..ef56fd5b 100644
--- a/packages/docs/content/components/icon.mdx
+++ b/packages/docs/content/components/icon.mdx
@@ -15,7 +15,7 @@ import {
   CRow,
   CTabContent,
   CTabPane } from '@coreui/react/src/index'
-import CIcon from '@coreui/icons-react'
+import {CIcon, CIconSvg} from '@coreui/icons-react/src/index'
 import { cilList, cilShieldAlt } from '@coreui/icons'
 import * as icon from '@coreui/icons';
 
@@ -44,8 +44,8 @@ Import react icons using one of these two options:
 To use a single react icon, import the `<CIcon>` component and the desired icon(s) from the `@coreui/icons` library. Then, include the `<CIcon>` component in your code and specify the icon prop with the imported icon variable. Additionally, you can set the desired size for the icon using the `size` prop.
 
 <Example>
-  <CIcon icon={cilList} size="xl"/>
-  <CIcon icon={cilShieldAlt} size="xl"/>
+  <CIcon icon={cilList} size="xl" />
+  <CIcon icon={cilShieldAlt} size="xl" />
 </Example>
 
 ```jsx
@@ -108,13 +108,68 @@ Set heights of react icons using size property like size="lg" and size="sm".
 
 ```jsx preview
 <CIcon icon={cilList} size="sm" />
-<CIcon icon={cilList} size="md" />
+<CIcon icon={cilList} />
 <CIcon icon={cilList} size="lg" />
 <CIcon icon={cilList} size="xl" />
 <CIcon icon={cilList} size="xxl" />
 <CIcon icon={cilList} size="3xl" />
 ```
 
+### Custom SVG Icons
+
+The `<CIconSvg`> component allows you to add custom SVG icons to your application. In case you want to use custom SVG icons, this component provides the flexibility to include bespoke SVG graphics that align with your design requirements.
+
+<Example>
+  <CIconSvg size="4xl">
+    <svg
+      viewBox="0 0 102 116"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <g stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
+        <g fill="#3C4B64" fillRule="nonzero">
+          <path
+            d="M96,25.091 L57,2.5743 C53.2871871,0.430706461 48.7128129,0.430706461 45,2.5743 L6,25.091 C2.292246,27.239646 0.00690676667,31.1979678 0,35.4833 L0,80.5167 C0.00688629146,84.8020377 2.29223099,88.760369 6,90.909 L45,113.4256 C48.7127742,115.569338 53.2872258,115.569338 57,113.4256 L96,90.909 C99.707769,88.760369 101.993114,84.8020377 102,80.5167 L102,35.4833 C101.993093,31.1979678 99.707754,27.239646 96,25.091 Z M94,80.5167 C94,81.9457261 93.2375729,83.266187 92,83.9807 L53,106.4974 C51.7623957,107.211931 50.2376043,107.211931 49,106.4974 L10,83.9807 C8.76242713,83.266187 8,81.9457261 8,80.5167 L8,35.4833 C8,34.0542382 8.76239619,32.7337309 10,32.0192 L49,9.5025 C50.2376043,8.78796882 51.7623957,8.78796882 53,9.5025 L92,32.0192 C93.2376038,32.7337309 94,34.0542382 94,35.4833 L94,80.5167 Z"
+            id="Shape"
+          />
+          <path
+            d="M74.0216,71.0379 L71.1556,71.0379 C70.4827717,71.0379163 69.8208181,71.2076524 69.231,71.5314 L51.95,81.0167 L32,69.4981 L32,46.5206 L51.95,35.002 L69.2394,44.457 C69.8278903,44.7788245 70.4878603,44.9474965 71.1586,44.9475 L74.0218,44.9475 C75.1263695,44.9475 76.0218,44.0520695 76.0218,42.9475 L76.0218,40.2357 C76.0218,39.5046907 75.6230914,38.8318844 74.9818,38.481 L55.793,27.9854 C53.3404536,26.651551 50.3714915,26.6856213 47.9502,28.0754 L28,39.5929 C25.5282949,41.025705 24.0048155,43.6646378 24,46.5216 L24,69.4976 C24,72.3557593 25.5247614,74.9968204 28,76.4259 L47.95,87.9444 C50.3719491,89.3331078 53.3408366,89.3663802 55.7933,88.0323 L74.9833,77.5012 C75.623333,77.1499602 76.021125,76.4778764 76.0211,75.7478 L76.0211,73.0378 C76.0210448,71.9334648 75.1259352,71.0381761 74.0216,71.0379 L74.0216,71.0379 Z"
+            id="Path"
+          />
+        </g>
+      </g>
+    </svg>
+  </CIconSvg>
+</Example>
+
+```jsx
+import { CIconSvg } from '@coreui/icons-react';
+
+...
+<CIconSvg size="4xl">
+  <svg
+    viewBox="0 0 102 116"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
+      <g fill="#3C4B64" fillRule="nonzero">
+        <path
+          d="M96,25.091 L57,2.5743 C53.2871871,0.430706461 48.7128129,0.430706461 45,2.5743 L6,25.091 C2.292246,27.239646 0.00690676667,31.1979678 0,35.4833 L0,80.5167 C0.00688629146,84.8020377 2.29223099,88.760369 6,90.909 L45,113.4256 C48.7127742,115.569338 53.2872258,115.569338 57,113.4256 L96,90.909 C99.707769,88.760369 101.993114,84.8020377 102,80.5167 L102,35.4833 C101.993093,31.1979678 99.707754,27.239646 96,25.091 Z M94,80.5167 C94,81.9457261 93.2375729,83.266187 92,83.9807 L53,106.4974 C51.7623957,107.211931 50.2376043,107.211931 49,106.4974 L10,83.9807 C8.76242713,83.266187 8,81.9457261 8,80.5167 L8,35.4833 C8,34.0542382 8.76239619,32.7337309 10,32.0192 L49,9.5025 C50.2376043,8.78796882 51.7623957,8.78796882 53,9.5025 L92,32.0192 C93.2376038,32.7337309 94,34.0542382 94,35.4833 L94,80.5167 Z"
+          id="Shape"
+        />
+        <path
+          d="M74.0216,71.0379 L71.1556,71.0379 C70.4827717,71.0379163 69.8208181,71.2076524 69.231,71.5314 L51.95,81.0167 L32,69.4981 L32,46.5206 L51.95,35.002 L69.2394,44.457 C69.8278903,44.7788245 70.4878603,44.9474965 71.1586,44.9475 L74.0218,44.9475 C75.1263695,44.9475 76.0218,44.0520695 76.0218,42.9475 L76.0218,40.2357 C76.0218,39.5046907 75.6230914,38.8318844 74.9818,38.481 L55.793,27.9854 C53.3404536,26.651551 50.3714915,26.6856213 47.9502,28.0754 L28,39.5929 C25.5282949,41.025705 24.0048155,43.6646378 24,46.5216 L24,69.4976 C24,72.3557593 25.5247614,74.9968204 28,76.4259 L47.95,87.9444 C50.3719491,89.3331078 53.3408366,89.3663802 55.7933,88.0323 L74.9833,77.5012 C75.623333,77.1499602 76.021125,76.4778764 76.0211,75.7478 L76.0211,73.0378 C76.0210448,71.9334648 75.1259352,71.0381761 74.0216,71.0379 L74.0216,71.0379 Z"
+          id="Path"
+        />
+      </g>
+    </g>
+  </svg>
+</CIconSvg>
+...
+```
 
 ## Accessibility
 
@@ -317,4 +372,8 @@ So if you need more icons our PRO package will be a great choice for you.
 
 ### CIcon
 
-`markdown:CIcon.api.mdx`
\ No newline at end of file
+`markdown:CIcon.api.mdx`
+
+### CIconSvg
+
+`markdown:CIconSvg.api.mdx`
\ No newline at end of file
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 3331d01e..6a04ebf7 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -27,7 +27,7 @@
     "@coreui/chartjs": "^4.0.0",
     "@coreui/coreui": "^5.0.2",
     "@coreui/icons": "^3.0.1",
-    "@coreui/icons-react": "^2.2.1",
+    "@coreui/icons-react": "^2.3.0",
     "@coreui/react-chartjs": "^3.0.0",
     "@coreui/utils": "^2.0.2",
     "@docsearch/css": "^3.6.0",

From fec032bbb56304e77c8230360a12b632b87569eb Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 19 Jul 2024 14:58:53 +0200
Subject: [PATCH 06/10] docs: update CAvatar documentation

---
 packages/docs/content/components/avatar.mdx | 56 +++++++++++++++++++--
 1 file changed, 53 insertions(+), 3 deletions(-)

diff --git a/packages/docs/content/components/avatar.mdx b/packages/docs/content/components/avatar.mdx
index 0e06b6ec..ebc7bae1 100644
--- a/packages/docs/content/components/avatar.mdx
+++ b/packages/docs/content/components/avatar.mdx
@@ -1,7 +1,7 @@
 ---
 title: React Avatar Component
 name: Avatar
-description: React avatar component can be used to display circular user profile pictures. Avatar can be used to portray people or objects. It supports images, icons, or letters.
+description: The React Avatar component is used to display circular user profile pictures. React avatars can portray people or objects and support images, icons, or letters.
 menu: Components
 route: /components/avatar
 other_frameworks: avatar
@@ -15,6 +15,8 @@ import Avatar3 from './../assets/images/avatars/3.jpg'
 
 ## Image avatars
 
+Showcase React avatars using images. These avatars are typically circular and can display user profile pictures.
+
 ```jsx preview
 <CAvatar src={Avatar1} />
 <CAvatar src={Avatar2} />
@@ -23,12 +25,36 @@ import Avatar3 from './../assets/images/avatars/3.jpg'
 
 ## Letter avatars
 
+Use letters inside avatars to represent users or objects when images are not available. This can be useful for displaying initials.
+
 ```jsx preview
 <CAvatar color="primary" textColor="white">CUI</CAvatar>
 <CAvatar color="secondary">CUI</CAvatar>
 <CAvatar color="warning" textColor="white">CUI</CAvatar>
 ```
 
+## Icons avatars 
+
+Incorporate icons within React avatars, allowing for a visual representation using scalable vector graphics (SVG).
+
+```jsx preview
+<CAvatar color="info" textColor="white">
+  <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
+    <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path><path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
+  </svg>
+</CAvatar>
+<CAvatar color="success" textColor="white">
+  <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
+    <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path><path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
+  </svg>
+</CAvatar>
+<CAvatar color="danger" textColor="white">
+  <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
+    <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path><path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
+  </svg>
+</CAvatar>
+```
+
 ## Rounded avatars
 
 Use the `shape="rounded"` prop to make react avatars squared with rounded corners.
@@ -51,25 +77,49 @@ Use the `shape="rounded-0"` prop to make react avatars squared.
 
 ## Sizes
 
-Fancy larger or smaller react avatar component? Add `size="xl"`, `size="lg"` or `size="sm"` for additional sizes.
+Fancy larger or smaller react avatar component? Add `size="xl"`, `size="lg"`, `size="md"` or `size="sm"` for additional sizes.
 
 ```jsx preview
 <CAvatar color="secondary" size="xl">CUI</CAvatar>
 <CAvatar color="secondary" size="lg">CUI</CAvatar>
+<CAvatar color="secondary" size="md">CUI</CAvatar>
 <CAvatar color="secondary">CUI</CAvatar>
 <CAvatar color="secondary" size="sm">CUI</CAvatar>
 ```
 
 ## Avatars with status
 
+Add a status indicator to avatars using the `status` property to show online or offline status.
+
 ```jsx preview
 <CAvatar src={Avatar1} status="success" />
 <CAvatar color="secondary" status="danger">CUI</CAvatar>
 ```
 
+## Customizing
+
+### CSS variables
+
+React avatars use local CSS variables on `.avatar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+<ScssDocs file="_avatar.scss" capture="avatar-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const vars = {
+  '--my-css-var': 10,
+  '--my-another-css-var': 'red',
+}
+return <CAvatar style={vars}>...</CAvatar>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="avatar-variables"/>
+
 ## API
 
 ### CAvatar
 
 `markdown:CAvatar.api.mdx`
-

From 2db9889cf7452495b014dc97a806b56c4669bba6 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 19 Jul 2024 15:01:09 +0200
Subject: [PATCH 07/10] chore: update `@coreui/coreui` to v5.1.0

---
 packages/coreui-react/package.json | 2 +-
 packages/docs/package.json         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json
index 2ee8ed22..8ac13454 100644
--- a/packages/coreui-react/package.json
+++ b/packages/coreui-react/package.json
@@ -41,7 +41,7 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui": "^5.0.2",
+    "@coreui/coreui": "^5.1.0",
     "@popperjs/core": "^2.11.8",
     "prop-types": "^15.8.1"
   },
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 6a04ebf7..6254366f 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@coreui/chartjs": "^4.0.0",
-    "@coreui/coreui": "^5.0.2",
+    "@coreui/coreui": "^5.1.0",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.3.0",
     "@coreui/react-chartjs": "^3.0.0",

From 30679279685474dd7cc86e8a515825238918a866 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 25 Jul 2024 20:39:26 +0200
Subject: [PATCH 08/10] docs: update Avatar examples

---
 packages/docs/src/styles/_component-examples.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/docs/src/styles/_component-examples.scss b/packages/docs/src/styles/_component-examples.scss
index 14e7dd0a..1fb306de 100644
--- a/packages/docs/src/styles/_component-examples.scss
+++ b/packages/docs/src/styles/_component-examples.scss
@@ -95,6 +95,11 @@
     margin-left: .5rem;
   }
 
+  // Avatars
+  > .avatar + .avatar {
+    margin-left: .25rem;
+  }
+
   // Badges
   > .badge + .badge {
     margin-left: .25rem;

From 11306fca13c4e0fa5c9ed83646ad9f1fbae945f6 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 25 Jul 2024 20:43:12 +0200
Subject: [PATCH 09/10] docs: improve icons documentation

---
 packages/docs/content/components/icon.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/docs/content/components/icon.mdx b/packages/docs/content/components/icon.mdx
index ef56fd5b..5e995616 100644
--- a/packages/docs/content/components/icon.mdx
+++ b/packages/docs/content/components/icon.mdx
@@ -257,7 +257,7 @@ export const LinearExample = () => {
       {icons.map((i, idx) => {
         return (
           <CCol className="mb-4" key={idx}>
-            <div className="p-3 py-4 mb-2 bg-light text-center rounded">
+            <div className="p-3 py-4 mb-2 bg-body-tertiary text-center rounded">
               <CIcon icon={icon[i]} size="xxl"/>
             </div>
             <div className="text-body-secondary text-center pt-1 small">{i}</div>
@@ -274,7 +274,7 @@ export const BrandExample = () => {
       {icons.map((i, idx) => {
         return (
           <CCol className="mb-4" key={idx}>
-            <div className="p-3 py-4 mb-2 bg-light text-center rounded">
+            <div className="p-3 py-4 mb-2 bg-body-tertiary text-center rounded">
               <CIcon icon={icon[i]} size="xxl"/>
             </div>
             <div className="text-body-secondary text-center pt-1 small">{i}</div>
@@ -291,7 +291,7 @@ export const FlagsExample = () => {
       {icons.map((i, idx) => {
         return (
           <CCol className="mb-4" key={idx}>
-            <div className="p-3 py-4 mb-2 bg-light text-center rounded">
+            <div className="p-3 py-4 mb-2 bg-body-tertiary text-center rounded">
               <CIcon icon={icon[i]} size="xxl"/>
             </div>
             <div className="text-body-secondary text-center pt-1 small">{i}</div>

From 14e60d90cde177af25b2ba2b20ea4d33dd371f73 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 26 Jul 2024 10:56:37 +0200
Subject: [PATCH 10/10] release: v5.2.0

---
 README.md                          | 2 +-
 lerna.json                         | 2 +-
 packages/coreui-react/README.md    | 2 +-
 packages/coreui-react/package.json | 2 +-
 packages/docs/package.json         | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 004a8107..7ba55b56 100644
--- a/README.md
+++ b/README.md
@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.1.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.2.0.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`
diff --git a/lerna.json b/lerna.json
index 5ceaf54d..f19238c5 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "5.1.0",
+  "version": "5.2.0",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md
index 21e4dc6a..13a31f8e 100644
--- a/packages/coreui-react/README.md
+++ b/packages/coreui-react/README.md
@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.1.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.2.0.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`
diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json
index 8ac13454..74f11789 100644
--- a/packages/coreui-react/package.json
+++ b/packages/coreui-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 6254366f..2846bbab 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-docs",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "private": true,
   "description": "",
   "homepage": "https://coreui.io/react/",